.mm-feature-row { padding: clamp(3rem, 4vw + 1rem, 5rem) 0; }
.mm-feature-row--bg-white      { background: var(--wp--preset--color--mist-0); }
.mm-feature-row--bg-light-grey { background: var(--wp--preset--color--light-grey); }
.mm-feature-row--bg-navy       { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--mist-0); }

.mm-feature-row__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
}

/* Image-right layout: simply swap visual order of the two columns. We don't
   use grid `direction: rtl` because it inverts internal text alignment. */
.mm-feature-row--image-right .mm-feature-row__media { order: 2; }
.mm-feature-row--image-right .mm-feature-row__copy  { order: 1; }

@media (max-width: 880px) {
    /* Stack to a single column; image sits above the copy regardless of the
       desktop image-left / image-right choice. */
    .mm-feature-row__inner {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
    .mm-feature-row__media { order: 0; }
    .mm-feature-row__copy  { order: 1; }
    .mm-feature-row--image-right .mm-feature-row__media { order: 0; }
    .mm-feature-row--image-right .mm-feature-row__copy  { order: 1; }
    /* Reduce the vertical band on tablets/phones so the section isn't
       disproportionately tall once stacked. */
    .mm-feature-row { padding: clamp(2.5rem, 6vw, 3.5rem) 0; }
    /* Let the (now-stacked) image use more of the column width on mobile so
       it doesn't read as a tiny thumbnail — but still comfortably inset. */
    .mm-feature-row__image { max-width: 88%; max-height: 360px; }
}

@media (max-width: 560px) {
    /* Tighten copy spacing and guarantee horizontal breathing room on phones.
       (.mm-container supplies the gutter, but enforce a floor for safety.) */
    .mm-feature-row__inner {
        gap: 1.25rem;
        padding-left: max(1rem, env(safe-area-inset-left, 0));
        padding-right: max(1rem, env(safe-area-inset-right, 0));
        box-sizing: border-box;
    }
    .mm-feature-row__image { max-width: 92%; }
    .mm-feature-row__headline { font-size: clamp(1.5rem, 6vw, 1.875rem); }
    .mm-feature-row__cta { margin-top: 1.25rem; }
    .mm-feature-row__cta .mm-button { width: 100%; }
}

.mm-feature-row__media { text-align: center; }
/* Photos sized to read as a supporting visual, not a dominant one: capped at
   75% of the media column and 315px tall (25% smaller than the previous
   100% / 420px). Centered within the column. */
.mm-feature-row__image {
    max-width: 75%;
    width: auto;
    max-height: 315px;
    margin: 0 auto;
    display: block;
}

.mm-feature-row__headline {
    font-family: var(--wp--preset--font-family--azo-sans);
    font-weight: 700;
    font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.25rem);
    line-height: 1.15;
    color: var(--wp--preset--color--ink);
    margin: 0.5rem 0 0.75rem;
}
.mm-feature-row--bg-navy .mm-feature-row__headline { color: var(--wp--preset--color--mist-0); }

.mm-feature-row__lead {
    font-weight: 700;
    font-size: 1.0625rem;
    margin: 0 0 0.75rem;
    color: var(--wp--preset--color--ink);
}
.mm-feature-row--bg-navy .mm-feature-row__lead { color: var(--wp--preset--color--mist-0); opacity: 0.95; }

.mm-feature-row__body {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(0,0,0,0.78);
}
.mm-feature-row--bg-navy .mm-feature-row__body { color: rgba(255,255,255,0.9); }
.mm-feature-row__body p { margin: 0 0 0.75rem; }

.mm-feature-row__benefits-heading {
    font-family: var(--wp--preset--font-family--montserrat);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--wp--preset--color--ink);
    margin: 1.25rem 0 0.5rem;
}
.mm-feature-row--bg-navy .mm-feature-row__benefits-heading { color: var(--wp--preset--color--mist-0); }

.mm-feature-row__benefits.mm-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}
.mm-feature-row__benefits.mm-checklist li {
    position: relative;
    padding-left: 1.625rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(0,0,0,0.82);
}
.mm-feature-row--bg-navy .mm-feature-row__benefits.mm-checklist li { color: rgba(255,255,255,0.92); }
/* Orange checkmark icon (inline SVG via mask) — replaces the dot bullet. */
.mm-feature-row__benefits.mm-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 1.125rem;
    height: 1.125rem;
    /* Neutralize the generic border-based checkmark from `ul.mm-checklist`
       (mindmixer.css) — its rotate()/borders otherwise distort this masked
       SVG check into an "L" shape. */
    transform: none;
    border: 0;
    background-color: var(--wp--preset--color--orange);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.mm-feature-row--bg-navy .mm-feature-row__benefits.mm-checklist li::before {
    background-color: var(--wp--preset--color--mist-0);
}

.mm-feature-row__cta { margin-top: 1.5rem; }