/**
 * Programs landing page — /programs/ (archive-mm_program).
 *
 * Adapted from the Classes.html design (kept to its visual structure)
 * but routed through theme.json tokens (--wp--preset--color--*,
 * --wp--preset--font-family--*) and the --mm-* foundation aliases
 * defined in block-styles.css.
 *
 * Sections:
 *   1. .mm-programs-intro    — eyebrow + headline + body + stats + philosophy card
 *   2. .mm-programs-grid     — filter tabs + card grid (server-rendered cards)
 *   3. .mm-not-sure          — gradient teal-to-grape band with Katherine card
 *
 * The 8-question FAQ block uses the existing .mm-faq styles in custom.css.
 * No new styles for it here; the archive template re-uses the homepage FAQ.
 *
 * Layout cap: 1280px inner, matching every other section on the site.
 * Page padding token: --mm-s-8 (32px) on desktop, --mm-s-5 (20px) <640.
 */

/* =====================================================================
   Page wrapper
===================================================================== */

.mm-programs-page {
    background: var(--mm-paper);
    color: var(--mm-fg);
}

/* =====================================================================
   1) Programs hero — full-bleed two-column hero band.
   Left: eyebrow + h1 + lede + CTAs.  Right: paper philosophy card.
   Background: featured image under a light white -> teal-200 fade
   overlay so the section reads bright and branded with dark ink text.
===================================================================== */

.mm-programs-hero {
    position: relative;
    isolation: isolate;
    color: var(--mm-ink);
    background-color: var(--mm-teal-100);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-block: clamp(64px, 7vw, 120px);
    overflow: hidden;
}

/* Light fade overlay — teal-100 at top-left, teal-300 at bottom-right.
   Higher opacity than the white-leaning first pass so the photo doesn't
   wash out the dark-ink text in the left column, while still letting a
   subtle hint of the image come through behind the philosophy card. */
.mm-programs-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Ben 6/1: light, white-washed teal→lavender→teal wash over the
       kids-keyboards photo — pale pastel tints at high opacity so the photo
       stays a soft hint and the dark-ink left-column copy reads cleanly.
       (Brings the home hero's teal/grape duo in, but light instead of vibrant.) */
    background: linear-gradient(135deg, rgba(205, 236, 230, 0.92) 0%, rgba(228, 214, 240, 0.88) 58%, rgba(190, 227, 219, 0.92) 100%);
    z-index: 0;
}

.mm-programs-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--mm-s-8);
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

@media (max-width: 960px) {
    .mm-programs-hero__inner {
        grid-template-columns: 1fr;
        gap: var(--mm-s-10);
    }
}

@media (max-width: 640px) {
    .mm-programs-hero__inner {
        padding-inline: var(--mm-s-5);
    }
}

.mm-programs-hero__lead {
    min-width: 0;
}

.mm-programs-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--mm-s-5);
    padding: 6px 14px;
    background: var(--mm-teal);
    border-radius: 999px;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mm-white);
}

.mm-programs-hero__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--mm-butter);
}

.mm-programs-hero__headline {
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 800;
    font-size: clamp(38px, 4.6vw, 60px);
    line-height: 1.04;
    letter-spacing: var(--wp--custom--letter-spacing--display);
    color: var(--mm-ink);
    margin: 0 0 var(--mm-s-5);
    text-wrap: balance;
}

.mm-programs-hero__headline em {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-weight: 800;
    color: var(--mm-grape-700);
}

/* "Thrive" accent — butter squiggle underline, mirroring the home hero's
   .mm-hero__accent::after (same masked SVG path). Sits on the grape line. */
.mm-programs-hero__accent {
    position: relative;
    display: inline;
}
.mm-programs-hero__accent::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    width: 100%;
    height: 12px;
    pointer-events: none;
    background-color: var(--mm-butter);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'><path d='M2 8 Q 40 1, 80 7 T 160 7 T 240 7 T 320 7 T 400 7 T 480 7 T 560 7 T 598 8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'><path d='M2 8 Q 40 1, 80 7 T 160 7 T 240 7 T 320 7 T 400 7 T 480 7 T 560 7 T 598 8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>");
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}

.mm-programs-hero__body {
    font-family: var(--wp--preset--font-family--source-sans-3);
    font-size: clamp(16px, 0.6vw + 14px, 18px);
    line-height: 1.6;
    color: var(--mm-ink-2);
    margin: 0 0 var(--mm-s-4);
    max-width: 56ch;
}

.mm-programs-hero__body--muted {
    /* Ben 6/1: match the first paragraph's size + color (inherited from the
       shared .mm-programs-hero__body class) — only the larger gap before the
       CTAs differs now. */
    margin-bottom: var(--mm-s-8);
}

.mm-programs-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mm-s-3);
    align-items: center;
}

.mm-programs-hero__cta-primary,
.mm-programs-hero__cta-ghost {
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: var(--mm-s-2);
    border-radius: var(--wp--custom--radius--pill);
    text-decoration: none;
    transition: background var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
                color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
                border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
    line-height: 1.2;
}

.mm-programs-hero__cta-primary {
    padding: 15px 26px;
    background: var(--mm-teal);
    color: var(--mm-white);
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 6px 18px -8px rgba(21, 92, 85, 0.45);
    border: 0;
}

.mm-programs-hero__cta-primary:hover {
    background: var(--mm-teal-700);
    color: var(--mm-white);
}

.mm-programs-hero__cta-ghost {
    padding: 13px 22px;
    background: transparent;
    color: var(--mm-teal-700);
    font-size: 14.5px;
    border: 1.5px solid var(--mm-teal-700);
}

.mm-programs-hero__cta-ghost:hover {
    border-color: var(--mm-teal);
    background: rgba(66, 174, 154, 0.08);
    color: var(--mm-teal-700);
}

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

/* ---- Right column: paper philosophy card ---- */

.mm-programs-hero__philosophy {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--mm-line);
    border-radius: var(--wp--custom--radius--xl);
    padding: clamp(24px, 3vw, 36px);
    box-shadow: 0 18px 40px -20px rgba(21, 92, 85, 0.22), 0 2px 8px rgba(21, 92, 85, 0.06);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}

.mm-programs-hero__philosophy-label {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--wp--custom--letter-spacing--caps);
    text-transform: uppercase;
    color: var(--mm-grape-700);
    margin: 0 0 var(--mm-s-4);
}

.mm-programs-hero__philosophy-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-5);
}

.mm-programs-hero__philosophy-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: var(--mm-s-4);
    align-items: start;
}

.mm-programs-hero__philosophy-num {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--mm-white);
    color: var(--mm-grape-700);
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1.5px solid var(--mm-grape-300);
}

.mm-programs-hero__philosophy-title {
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 700;
    font-size: 16.5px;
    color: var(--mm-ink);
    margin: 0 0 4px;
    line-height: 1.3;
}

.mm-programs-hero__philosophy-desc {
    font-family: var(--wp--preset--font-family--source-sans-3);
    font-size: 14px;
    color: var(--mm-ink-2);
    line-height: 1.5;
    margin: 0;
}

.mm-programs-intro__lead {
    min-width: 0;
}

.mm-programs-intro__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--mm-s-3);
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: var(--wp--custom--letter-spacing--caps);
    text-transform: uppercase;
    color: var(--mm-teal-700);
    margin: 0 0 var(--mm-s-5);
}

.mm-programs-intro__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--mm-teal);
}

.mm-programs-intro__headline {
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 800;
    font-size: clamp(40px, 4.2vw, 60px);
    line-height: 1.04;
    letter-spacing: var(--wp--custom--letter-spacing--display);
    color: var(--mm-ink);
    margin: 0 0 var(--mm-s-6);
    text-wrap: balance;
}

.mm-programs-intro__headline-accent {
    display: block;
    color: var(--mm-grape-700);
    font-style: italic;
}

.mm-programs-intro__body {
    font-family: var(--wp--preset--font-family--source-sans-3);
    font-size: 18px;
    line-height: 1.6;
    color: var(--mm-ink-2);
    margin: 0 0 var(--mm-s-4);
}

.mm-programs-intro__body--muted {
    font-size: 16px;
    color: var(--mm-ink-3);
    margin-bottom: 0;
}

.mm-programs-intro__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mm-s-6);
    margin-top: var(--mm-s-10);
    padding-top: var(--mm-s-8);
    border-top: 1px solid var(--mm-line);
}

.mm-programs-intro__stat-value {
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 800;
    font-size: clamp(28px, 2.6vw, 36px);
    line-height: 1;
    letter-spacing: var(--wp--custom--letter-spacing--tight);
    color: var(--mm-teal-800);
    margin: 0 0 var(--mm-s-2);
}

.mm-programs-intro__stat-label {
    font-family: var(--wp--preset--font-family--source-sans-3);
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--mm-ink-3);
    margin: 0;
}

.mm-programs-intro__philosophy {
    background: var(--mm-paper-2);
    border: 1px solid var(--mm-line);
    border-radius: var(--wp--custom--radius--xl);
    padding: clamp(24px, 3vw, 40px);
}

.mm-programs-intro__philosophy-label {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--wp--custom--letter-spacing--caps);
    text-transform: uppercase;
    color: var(--mm-grape-700);
    margin: 0 0 var(--mm-s-4);
}

.mm-programs-intro__philosophy-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-5);
}

.mm-programs-intro__philosophy-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: var(--mm-s-4);
    align-items: start;
}

.mm-programs-intro__philosophy-num {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--mm-white);
    color: var(--mm-grape-700);
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--mm-grape-300);
    flex-shrink: 0;
}

.mm-programs-intro__philosophy-title {
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 700;
    font-size: 17px;
    color: var(--mm-ink);
    margin: 0 0 4px;
    line-height: 1.3;
}

.mm-programs-intro__philosophy-desc {
    font-family: var(--wp--preset--font-family--source-sans-3);
    font-size: 14.5px;
    color: var(--mm-ink-2);
    line-height: 1.5;
    margin: 0;
}

/* =====================================================================
   2) Programs grid
===================================================================== */

.mm-programs-grid {
    padding-block: clamp(40px, 4vw, 72px);
}

.mm-programs-grid__inner {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--mm-s-8);
}

@media (max-width: 640px) {
    .mm-programs-grid__inner {
        padding-inline: var(--mm-s-5);
    }
}

.mm-programs-grid__header {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-3);
    margin-bottom: var(--mm-s-8);
    max-width: 720px;
}

.mm-programs-grid__title {
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 800;
    font-size: clamp(28px, 2.6vw, 38px);
    letter-spacing: var(--wp--custom--letter-spacing--tight);
    color: var(--mm-ink);
    line-height: 1.1;
    margin: 0;
}

.mm-programs-grid__sub {
    font-family: var(--wp--preset--font-family--source-sans-3);
    font-size: 15.5px;
    color: var(--mm-ink-3);
    line-height: 1.5;
    max-width: 560px;
    margin: 0;
}

.mm-programs-grid__tabs-row {
    display: flex;
    align-items: center;
    gap: var(--mm-s-4);
    margin-bottom: var(--mm-s-8);
    flex-wrap: wrap;
}

.mm-programs-grid__tabs {
    display: inline-flex;
    padding: 4px;
    background: var(--mm-white);
    border: 1px solid var(--mm-line);
    border-radius: var(--wp--custom--radius--pill);
    box-shadow: var(--wp--custom--shadow--xs);
    flex-wrap: wrap;
    gap: 0;
}

.mm-programs-grid__tab {
    padding: 10px 18px;
    border-radius: var(--wp--custom--radius--pill);
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 700;
    font-size: 14px;
    color: var(--mm-ink-2);
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--mm-s-2);
    transition: background var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
                color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
    white-space: nowrap;
}

.mm-programs-grid__tab:hover {
    color: var(--mm-teal);
}

.mm-programs-grid__tab.is-active {
    /* Vibrant brand teal, not the old dark green (teal-800). */
    background: var(--mm-teal);
    color: var(--mm-white);
}

.mm-programs-grid__tab:focus-visible {
    outline: 3px solid color-mix(in oklab, var(--mm-teal) 45%, transparent);
    outline-offset: 2px;
}

.mm-programs-grid__tab-count {
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 700;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: var(--wp--custom--radius--pill);
    /* Grape number accent (was neutral paper) — brand purple against the
       teal tabs for a teal+grape duo-tone. */
    background: var(--mm-grape-100);
    color: var(--mm-grape-700);
    transition: inherit;
}

.mm-programs-grid__tab.is-active .mm-programs-grid__tab-count {
    /* Solid grape pill on the active (teal) tab — the purple pops on teal. */
    background: var(--mm-grape-500);
    color: var(--mm-white);
}

.mm-programs-grid__result-meta {
    font-family: var(--wp--preset--font-family--source-sans-3);
    font-size: 13px;
    color: var(--mm-ink-3);
    margin: 0 0 0 auto;
}

@media (max-width: 640px) {
    .mm-programs-grid__result-meta {
        margin-left: 0;
    }
}

.mm-programs-grid__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mm-s-6);
}

@media (max-width: 1024px) {
    .mm-programs-grid__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .mm-programs-grid__list {
        grid-template-columns: 1fr;
        gap: var(--mm-s-5);
    }
}

.mm-programs-grid__empty {
    grid-column: 1 / -1;
    padding: var(--mm-s-10);
    text-align: center;
    color: var(--mm-ink-3);
    background: var(--mm-paper-2);
    border-radius: var(--wp--custom--radius--lg);
}

/* ---- Card ---- */

.mm-programs-grid__card {
    background: var(--mm-white);
    border: 1px solid var(--mm-line);
    border-radius: var(--wp--custom--radius--lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
                box-shadow var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
                transform var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
}

.mm-programs-grid__card:hover {
    border-color: var(--mm-teal-300);
    box-shadow: var(--wp--custom--shadow--md);
    transform: translateY(-3px);
}

.mm-programs-grid__card[data-mm-hidden="true"] {
    display: none;
}

.mm-programs-grid__card-photo {
    position: relative;
    display: block;
    height: 180px;
    overflow: hidden;
    background: var(--mm-paper-2);
    text-decoration: none;
}

.mm-programs-grid__card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--wp--custom--motion--duration-slow) var(--wp--custom--motion--ease);
}

.mm-programs-grid__card:hover .mm-programs-grid__card-photo img {
    transform: scale(1.04);
}

.mm-programs-grid__card-photo-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mm-ink-4);
}

.mm-programs-grid__card-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 63, 58, 0) 45%, rgba(14, 63, 58, 0.55) 100%);
    pointer-events: none;
}

.mm-programs-grid__card-cat-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 800;
    font-size: 10px;
    letter-spacing: var(--wp--custom--letter-spacing--caps);
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: var(--wp--custom--radius--pill);
    background: rgba(255, 255, 255, 0.92);
    color: var(--mm-teal-800);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}

.mm-programs-grid__card--early .mm-programs-grid__card-cat-badge,
.mm-programs-grid__card--private .mm-programs-grid__card-cat-badge {
    color: var(--mm-grape-700);
}

.mm-programs-grid__card-new-chip {
    position: absolute;
    top: 14px;
    right: 14px;
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 800;
    font-size: 10px;
    letter-spacing: var(--wp--custom--letter-spacing--caps);
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: var(--wp--custom--radius--pill);
    background: var(--mm-butter);
    color: #8A6B0A;
}

.mm-programs-grid__card-body {
    padding: var(--mm-s-5) var(--mm-s-6) var(--mm-s-6);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mm-programs-grid__card-eyebrow {
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: var(--wp--custom--letter-spacing--caps);
    text-transform: uppercase;
    color: var(--mm-ink-3);
    margin: 0 0 var(--mm-s-3);
}

.mm-programs-grid__card-title {
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.015em;
    color: var(--mm-ink);
    line-height: 1.15;
    margin: 0 0 var(--mm-s-2);
}

.mm-programs-grid__card-title a {
    color: inherit;
    text-decoration: none;
}

.mm-programs-grid__card-title a:hover {
    color: var(--mm-teal-800);
}

.mm-programs-grid__card-desc {
    font-family: var(--wp--preset--font-family--source-sans-3);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--mm-ink-2);
    margin: 0 0 var(--mm-s-5);
}

/* Feature list — checkmark bullets driven by the program_features post
   meta (newline-joined string from the binding source, split per <li>
   in patterns/programs-grid.php). 3–5 short phrases per program. */

.mm-programs-grid__card-features {
    list-style: none;
    margin: 0 0 var(--mm-s-5);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mm-programs-grid__card-feature {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--wp--preset--font-family--source-sans-3);
    font-size: 14px;
    line-height: 1.45;
    color: var(--mm-ink-2);
}

.mm-programs-grid__card-feature-check {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background-color: var(--mm-teal-100);
    color: var(--mm-teal-800);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.mm-programs-grid__card--private .mm-programs-grid__card-feature-check {
    background-color: var(--mm-grape-100);
    color: var(--mm-grape-700);
}

.mm-programs-grid__card-feature-text {
    min-width: 0;
}

.mm-programs-grid__card-meta {
    /* margin-top: auto pushes the pricing (and the actions below it)
       to the bottom of the card body, so the "Starting at" line and
       the buttons align horizontally across every card regardless of
       the title/description height. */
    margin-top: auto;
    padding: 0;
    margin-bottom: var(--mm-s-4);
    border-top: 0;
    border-bottom: 0;
}

.mm-programs-grid__card-meta-label {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: var(--wp--custom--letter-spacing--caps);
    text-transform: uppercase;
    color: var(--mm-ink-3);
    margin: 0;
}

.mm-programs-grid__card-meta-value {
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 800;
    font-size: 18px;
    color: var(--mm-teal-800);
    margin: 4px 0 0;
}

.mm-programs-grid__card--private .mm-programs-grid__card-meta-value {
    color: var(--mm-grape-700);
}

.mm-programs-grid__card-meta-note {
    font-family: var(--wp--preset--font-family--source-sans-3);
    font-size: 12px;
    color: var(--mm-ink-3);
    margin: 4px 0 0;
}

.mm-programs-grid__card-actions {
    /* margin-top: 0 — the meta block above now carries `margin-top: auto`,
       which already pushes the meta+actions pair to the bottom of the
       card. Putting auto on both would force a gap between them. */
    margin-top: 0;
    display: flex;
    gap: var(--mm-s-2);
    align-items: stretch;
}

.mm-programs-grid__card-btn {
    flex: 1;
    padding: 11px 14px;
    border-radius: var(--wp--custom--radius--sm);
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 700;
    font-size: 13.5px;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mm-s-2);
    transition: background var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
                color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
                box-shadow var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
                transform var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
    line-height: 1.2;
}

.mm-programs-grid__card-btn--ghost {
    background: var(--mm-white);
    border: 1.5px solid var(--mm-teal);
    color: var(--mm-teal-800);
}

.mm-programs-grid__card-btn--ghost:hover {
    background: var(--mm-teal-50);
}

.mm-programs-grid__card-btn--primary {
    flex: 1.2;
    background: var(--mm-teal);
    color: var(--mm-white);
    border: 1.5px solid var(--mm-teal);
    box-shadow: 0 2px 8px rgba(21, 92, 85, 0.2);
}

.mm-programs-grid__card-btn--primary:hover {
    /* Brighten by lifting, not darkening (Katherine: no dark green). The
       fill stays brand teal; a teal glow + 1px lift give the hover "pop".
       color:white is REQUIRED here: the global `a:hover { color: teal-800 }`
       in block-styles.css (specificity 0,1,1) otherwise wins over the base
       button color (0,1,0) and turns the Enroll LABEL dark green on hover.
       This :hover selector (0,2,0) beats it and keeps the label white. */
    color: var(--mm-white);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(66, 174, 154, 0.35);
}

.mm-programs-grid__card-btn--grape {
    background: var(--mm-grape-700);
    border-color: var(--mm-grape-700);
    box-shadow: 0 2px 8px rgba(95, 44, 117, 0.25);
}

.mm-programs-grid__card-btn--primary.mm-programs-grid__card-btn--grape:hover {
    /* Brighten grape-700 -> grape-500 (lighter, vibrant purple) + lift.
       Selector intentionally names BOTH classes so its specificity (0,3,0)
       definitively beats --primary:hover (0,2,0) — these Enroll buttons
       carry both classes, and that collision is what made purple buttons
       hover dark green. Bulletproof, not relying on source order. */
    background: var(--mm-grape-500);
    border-color: var(--mm-grape-500);
    color: var(--mm-white);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(122, 58, 150, 0.35);
}

.mm-programs-grid__card-btn-icon {
    display: inline-flex;
    align-items: center;
}

/* =====================================================================
   3) Not-sure band
===================================================================== */

.mm-not-sure {
    padding-block: clamp(48px, 5vw, 96px);
}

.mm-not-sure__inner {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--mm-s-8);
}

@media (max-width: 640px) {
    .mm-not-sure__inner {
        padding-inline: var(--mm-s-5);
    }
}

.mm-not-sure__panel {
    position: relative;
    border-radius: var(--wp--custom--radius--xl);
    overflow: hidden;
    background: linear-gradient(135deg, #155C55 0%, #0E3F3A 55%, #5F2C75 100%);
    padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 64px);
    color: var(--mm-white);
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
}

@media (max-width: 960px) {
    .mm-not-sure__panel {
        grid-template-columns: 1fr;
    }
}

.mm-not-sure__panel-glow {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(244, 209, 106, 0.25) 0%, rgba(244, 209, 106, 0) 70%);
    pointer-events: none;
}

.mm-not-sure__lead {
    position: relative;
    z-index: 1;
}

.mm-not-sure__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--mm-s-3);
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: var(--wp--custom--letter-spacing--caps);
    text-transform: uppercase;
    color: var(--mm-butter);
    margin: 0 0 var(--mm-s-4);
}

.mm-not-sure__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--mm-butter);
}

.mm-not-sure__heading {
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 800;
    font-size: clamp(30px, 3.2vw, 44px);
    letter-spacing: var(--wp--custom--letter-spacing--tight);
    line-height: 1.08;
    margin: 0 0 var(--mm-s-4);
    color: var(--mm-white);
    text-wrap: balance;
}

.mm-not-sure__heading-accent {
    display: block;
    color: var(--mm-butter);
    font-style: italic;
}

.mm-not-sure__body {
    font-family: var(--wp--preset--font-family--source-sans-3);
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 var(--mm-s-8);
    max-width: 480px;
}

.mm-not-sure__ctas {
    display: flex;
    gap: var(--mm-s-3);
    flex-wrap: wrap;
    align-items: center;
}

.mm-not-sure__cta-primary,
.mm-not-sure__cta-ghost {
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: var(--mm-s-2);
    border-radius: var(--wp--custom--radius--pill);
    text-decoration: none;
    transition: background var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
                color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
                border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
    line-height: 1.2;
}

.mm-not-sure__cta-primary {
    padding: 15px 26px;
    background: var(--mm-butter);
    color: var(--mm-teal-900);
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.4);
    border: 0;
}

.mm-not-sure__cta-primary:hover {
    background: #FFE08C;
    color: var(--mm-teal-900);
}

.mm-not-sure__cta-ghost {
    padding: 13px 22px;
    background: transparent;
    color: var(--mm-white);
    font-size: 14.5px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
}

.mm-not-sure__cta-ghost:hover {
    border-color: rgba(255, 255, 255, 0.7);
    color: var(--mm-white);
    background: rgba(255, 255, 255, 0.08);
}

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

.mm-not-sure__card {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--wp--custom--radius--lg);
    padding: clamp(24px, 3vw, 32px);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}

.mm-not-sure__card-header {
    display: flex;
    align-items: center;
    gap: var(--mm-s-4);
    margin-bottom: var(--mm-s-5);
}

.mm-not-sure__card-avatar {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: var(--mm-butter);
    color: var(--mm-teal-900);
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 800;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.mm-not-sure__card-name {
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 800;
    font-size: 17px;
    color: var(--mm-white);
    letter-spacing: -0.01em;
    margin: 0;
}

.mm-not-sure__card-role {
    font-family: var(--wp--preset--font-family--source-sans-3);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin: 4px 0 0;
}

.mm-not-sure__card-quote {
    font-family: var(--wp--preset--font-family--outfit);
    font-style: italic;
    font-size: 15.5px;
    color: var(--mm-white);
    line-height: 1.45;
    margin: 0 0 var(--mm-s-5);
    padding-left: var(--mm-s-4);
    border-left: 2px solid var(--mm-butter);
}

.mm-not-sure__card-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mm-s-4);
    padding-top: var(--mm-s-4);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.mm-not-sure__card-meta-value {
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 800;
    font-size: 13.5px;
    color: var(--mm-butter);
    margin: 0;
}

.mm-not-sure__card-meta-label {
    font-family: var(--wp--preset--font-family--source-sans-3);
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.65);
    margin: 4px 0 0;
}

/* =====================================================================
   /programs/ catalog grid — port of the page-378 program block's polish
   (Ben 6/1). Mirrors the .mm-offer overrides in homepage.css, re-scoped to
   .mm-programs-page so ONLY the catalog page gets the fine details:
   category-tinted active tabs, solid category badges, per-category card
   top-accent bars, the Early "butter" enroll button, and the light-purple
   star eyebrow divider. The base .mm-programs-grid__* rules above stay the
   shared default (used on /classes/, single-program "related" grids, etc.).
   ===================================================================== */

/* Active filter tab tinted to its category: Early = butter (dark text),
   Group = teal, Private = grape. The "All" overview tab keeps brand teal.
   [data-mm-filter] selectors are (0,4,0), beating the shared .is-active. */
.mm-programs-page .mm-programs-grid__tab.is-active[data-mm-filter="early"] {
    background: var(--mm-butter);
    color: var(--mm-ink);
}
.mm-programs-page .mm-programs-grid__tab.is-active[data-mm-filter="group"] {
    background: var(--mm-teal);
}
.mm-programs-page .mm-programs-grid__tab.is-active[data-mm-filter="private"] {
    background: var(--mm-grape);
}
.mm-programs-page .mm-programs-grid__tab.is-active .mm-programs-grid__tab-count {
    background: rgba(0, 0, 0, 0.16);
    color: inherit;
}

/* Category-colored 4px top accent bar, clipped to the card's rounded corners
   by the card's own overflow:hidden. The card hover lift is dropped (matching
   the block) so the rounded clip can't re-rasterize/flicker the bar; the photo
   zoom (base rule) stays the hover effect, isolated on its own layer. */
.mm-programs-page .mm-programs-grid__card {
    position: relative;
}
.mm-programs-page .mm-programs-grid__card-photo {
    transform: translateZ(0);
}
.mm-programs-page .mm-programs-grid__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 3;
}
.mm-programs-page .mm-programs-grid__card--group::before {
    background: var(--mm-teal);
}
.mm-programs-page .mm-programs-grid__card--private::before {
    background: var(--mm-grape);
}
.mm-programs-page .mm-programs-grid__card--early::before {
    background: var(--mm-butter);
}
.mm-programs-page .mm-programs-grid__card:hover {
    transform: none;
    box-shadow: none;
}

/* Solid category-colored badges (override the base white pill): Early = butter
   (dark text), Group = teal, Private = grape (white text). */
.mm-programs-page .mm-programs-grid__card--early .mm-programs-grid__card-cat-badge {
    background: var(--mm-butter);
    color: var(--mm-ink);
}
.mm-programs-page .mm-programs-grid__card--group .mm-programs-grid__card-cat-badge {
    background: var(--mm-teal);
    color: var(--mm-white);
}
.mm-programs-page .mm-programs-grid__card--private .mm-programs-grid__card-cat-badge {
    background: var(--mm-grape);
    color: var(--mm-white);
}

/* Early "Enroll" button → butter with dark text (Group already brand teal,
   Private already grape via the base --grape variant). */
.mm-programs-page .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-programs-page .mm-programs-grid__card--early .mm-programs-grid__card-btn--primary:hover {
    color: var(--mm-ink);
    box-shadow: 0 6px 16px rgba(244, 209, 106, 0.42);
}

/* Light-purple star divider between eyebrow meta parts (Ages 0–4 ★ 45 min) —
   the pattern now emits the .mm-programs-grid__card-eyebrow-sep span. */
.mm-programs-page .mm-programs-grid__card-eyebrow-sep {
    color: var(--mm-grape-300);
    margin: 0 7px;
    font-size: 0.9em;
    vertical-align: 1px;
}