/* =====================================================================
   Wizard Rewards Membership page (template-membership.php)

   Scoped under .sw-membership so nothing leaks into the rest of the theme.
   Layout follows the ASI Hastings membership template; look, copy and
   palette follow the "Wizard Rewards Website" Figma frame (1440 wide).

   Units are px on purpose: the theme sets a 13px root font-size via theme
   options, so rem values here would silently scale down.

   Fonts: Inter (Figma headings) is enqueued with this file. Figma body copy
   is Myriad Pro, which isn't a web font. Source Sans 3 (same designer,
   near-identical metrics) is already loaded on every page.
   ===================================================================== */

.sw-membership {
    --mm-navy: #232e66;
    --mm-navy-deep: #19244f;
    --mm-sky: #57beed;
    --mm-sky-dark: #3aa9dd;
    --mm-sky-text: #1f86b8;     /* sky darkened to 4.5:1 on white for text */
    --mm-gold: #edb54a;
    --mm-gold-dark: #dca033;
    --mm-hero-sky: #5fb2da;     /* sampled from the top of the hero image */
    --mm-tint: #e9f2fa;         /* table row A */
    --mm-tint-light: #f3f8fd;   /* table row B */
    --mm-rule: #c9d7e6;
    --mm-text: #1d1d1f;
    --mm-muted: #6b6b6b;

    /* Same stack the service hero defines on .vc_row.sw-svc-hero; Bebas Neue
       is loaded on every page by sw-summer-fonts. */
    --sw-hero-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
    --mm-font-head: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mm-font-body: "Source Sans 3", "Myriad Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    font-family: var(--mm-font-body);
    font-size: 20px;
    color: var(--mm-text);
    line-height: 1.5;
    background: #fff;
}

.sw-membership *,
.sw-membership *::before,
.sw-membership *::after { box-sizing: border-box; }

.sw-membership h1,
.sw-membership h2,
.sw-membership h3 {
    font-family: var(--mm-font-head);
    text-align: inherit;
    word-spacing: normal;
}

.sw-membership p { margin: 0; }

/* Parent theme gives sup position:relative + top:-1em + a muted color on
   top of vertical-align, which double-raises and fades footnote numbers. */
.sw-membership sup {
    position: static;
    top: auto;
    margin-left: 1px;
    font-size: 0.6em;
    line-height: 0;
    vertical-align: super;
    color: inherit;
}

.sw-membership .mm-container {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Masked SVG icons: the SVG supplies the shape, background-color the color. */
.sw-membership .mm-benefit__icon-svg,
.sw-membership .mm-circle__svg,
.sw-membership .mm-save__icon-svg,
.sw-membership .mm-check {
    display: block;
    -webkit-mask: var(--mm-icon-url) center / contain no-repeat;
            mask: var(--mm-icon-url) center / contain no-repeat;
}

/* =====================================================================
   HERO
   ===================================================================== */
.sw-membership .mm-hero {
    position: relative;
    display: flex;
    align-items: center;
    /* Keeps the image's 1440x559 aspect so the wizard is never cropped,
       capped so ultra-wide screens don't get a giant hero. */
    height: clamp(440px, 38.82vw, 680px);
    background-color: var(--mm-hero-sky);
    background-image: var(--mm-hero-img);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 30%;
}

/* 1088 = the advantage box's 1040px + gutters, so the H1 lines up with the
   box's left edge (as in the Figma frame). */
.sw-membership .mm-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1088px;
    margin: 0 auto;
    padding: 0 24px 56px; /* nudge text up so it clears the overlapping box */
}

/* Matches .vc_row.sw-svc-hero h1 (style.css "SERVICE HERO SKIN"). */
.sw-membership .mm-hero__text h1 {
    margin: 0 0 14px;
    font-family: var(--sw-hero-display);
    font-size: clamp(40px, 5.2vw, 76px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--mm-navy);
    text-shadow: rgba(10, 28, 54, 0.6) 0 2px 18px;
}

/* Advantage box: normal flow, pulled up to overlap the bottom of the hero. */
.sw-membership .mm-hero__advantage {
    position: relative;
    z-index: 2;
    margin-top: -48px;
    padding: 0 24px;
}

.sw-membership .mm-hero__advantage-inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 40px 56px 48px;
    background: var(--mm-navy);
    color: #fff;
    text-align: center;
    border-radius: 18px;
    box-shadow: 0 14px 28px -8px rgba(25, 36, 79, 0.45);
}

.sw-membership .mm-hero__advantage-inner h2 {
    margin: 0 0 22px;
    font-weight: 700;
    font-size: clamp(26px, 2.6vw, 37px);
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--mm-gold);
}

.sw-membership .mm-hero__advantage-inner p {
    max-width: 840px;
    margin: 0 auto;
    font-size: 21px;
    line-height: 1.4;
    color: #fff;
}

/* =====================================================================
   4 BENEFITS
   ===================================================================== */
.sw-membership .mm-benefits {
    padding: 80px 0 40px;
}

.sw-membership .mm-benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
}

.sw-membership .mm-benefit__icon {
    width: 108px;
    height: 108px;
    margin: 0 auto 26px;
}

.sw-membership .mm-benefit__icon-svg {
    width: 100%;
    height: 100%;
    background-color: var(--mm-sky);
}

.sw-membership .mm-benefit h3 {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 23px;
    line-height: 1.25;
    color: var(--mm-navy);
}

.sw-membership .mm-benefit p {
    max-width: 310px;
    margin: 0 auto;
    font-size: 19px;
    line-height: 1.55;
}

/* =====================================================================
   WE HANDLE THE UPKEEP
   ===================================================================== */
.sw-membership .mm-upkeep {
    padding: 50px 0 90px;
}

.sw-membership .mm-section-title {
    margin: 0 0 12px;
    font-weight: 700;
    font-size: clamp(26px, 2.6vw, 37px);
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    color: var(--mm-navy);
}

/* Title with gold rules either side */
.sw-membership .mm-section-title--lined {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
}

.sw-membership .mm-section-title--lined::before,
.sw-membership .mm-section-title--lined::after {
    content: "";
    flex: 1;
    max-width: 344px;
    height: 4px;
    background: var(--mm-gold);
}

.sw-membership .mm-upkeep__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1080px;
    margin: 56px auto 0;
}

.sw-membership .mm-upkeep__text p {
    max-width: 480px;
    margin: 0 0 40px;
    font-size: 20px;
    line-height: 1.5;
}

.sw-membership .mm-upkeep__icons {
    display: flex;
    justify-content: center;
    gap: 96px;
}

.sw-membership .mm-upkeep__icon { text-align: center; }

.sw-membership .mm-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 176px;
    height: 176px;
    margin: 0 auto 26px;
    border: 3px solid var(--mm-sky);
    border-radius: 50%;
}

.sw-membership .mm-circle__svg {
    width: 112px;
    height: 112px;
    background-color: var(--mm-sky);
}

.sw-membership .mm-upkeep__icon span {
    display: block;
    font-weight: 600;
    font-size: 20px;
    color: var(--mm-navy);
}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.sw-membership .mm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-family: var(--mm-font-head);
    font-weight: 700;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 2px solid transparent;
    box-shadow: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.sw-membership .mm-btn:focus-visible {
    outline: 2px solid var(--mm-navy);
    outline-offset: 3px;
}

.sw-membership .mm-btn--outline {
    padding: 13px 18px;
    font-size: 21px;
    color: var(--mm-sky-text);
    background: transparent;
    border-color: var(--mm-gold);
    border-radius: 2px;
}

.sw-membership .mm-btn--outline:hover {
    color: var(--mm-navy);
    background: var(--mm-gold);
}

.sw-membership .mm-btn--pill {
    min-width: 276px;
    min-height: 58px;
    padding: 12px 32px;
    font-size: 26px;
    color: #fff;
    border-radius: 999px;
}

.sw-membership .mm-btn--pill:hover { transform: translateY(-1px); }

.sw-membership .mm-btn--sky { background: var(--mm-sky); }
.sw-membership .mm-btn--sky:hover { background: var(--mm-sky-dark); color: #fff; }

.sw-membership .mm-btn--gold { background: var(--mm-gold); }
.sw-membership .mm-btn--gold:hover { background: var(--mm-gold-dark); color: #fff; }

/* =====================================================================
   FULL VALUE TABLE
   ===================================================================== */
.sw-membership .mm-value {
    --mm-overhang: 200px;  /* how far the table hangs below the blue */
    position: relative;
    padding: 96px 0 0;
}

/* Sunburst: rays fanning out from a white glow at the top center. On a
   pseudo-element so it can stop short of the overhanging table. */
.sw-membership .mm-value::before {
    content: "";
    position: absolute;
    inset: 0 0 var(--mm-overhang) 0;
    background:
        radial-gradient(ellipse 48% 42% at 50% 8%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 30%, rgba(255, 255, 255, 0) 72%),
        repeating-conic-gradient(from 0deg at 50% 8%, rgba(255, 255, 255, 0.13) 0deg 5deg, rgba(255, 255, 255, 0) 5deg 10deg),
        linear-gradient(180deg, #6cc1ea 0%, #42a5db 100%);
    pointer-events: none;
}

.sw-membership .mm-value .mm-container {
    position: relative;
    z-index: 1;
}

.sw-membership .mm-value__sub {
    max-width: 1000px;
    margin: 0 auto 56px;
    font-size: 22px;
    line-height: 1.4;
    text-align: center;
}

.sw-membership .mm-value__grid {
    max-width: 1190px;
    margin: 0 auto;
    font-family: var(--mm-font-head);
    font-size: 17px;
    line-height: 1.4;
    background: #fff;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 22px 34px -14px rgba(25, 36, 79, 0.45);
}

/* Cols: row label · Upkeep · Prices · Pays You Back (wider) · Priority · Warranty */
.sw-membership .mm-value__head,
.sw-membership .mm-value__row {
    display: grid;
    grid-template-columns: 1.33fr 1.65fr 1.82fr 2.27fr 1.55fr 1.31fr;
}

.sw-membership .mm-value__head { background: var(--mm-navy); }

.sw-membership .mm-value__head-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 10px;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.2;
    text-align: center;
    color: #fff;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.sw-membership .mm-value__head-cell:last-child { border-right: none; }

.sw-membership .mm-value__row--tint  > div { background: var(--mm-tint); }
.sw-membership .mm-value__row--light > div { background: var(--mm-tint-light); }

.sw-membership .mm-value__row-label {
    display: flex;
    align-items: center;
    padding: 24px 20px;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.2;
    color: var(--mm-navy);
    border-right: 1px solid var(--mm-rule);
}

.sw-membership .mm-value__cell {
    padding: 24px 18px 34px;
    color: var(--mm-text);
    border-right: 1px solid var(--mm-rule);
}

.sw-membership .mm-value__cell:last-child { border-right: none; }

.sw-membership .mm-value__cell strong,
.sw-membership .mm-value__mcard-body strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    color: var(--mm-navy);
}

/* Standalone price / priority lines: spaced as separate statements */
.sw-membership .mm-value__cell strong.mm-value__price,
.sw-membership .mm-value__mcard-body strong.mm-value__price { margin-bottom: 22px; }

.sw-membership .mm-value__cell > :last-child,
.sw-membership .mm-value__mcard-body > :last-child { margin-bottom: 0; }

.sw-membership .mm-value__cell ul,
.sw-membership .mm-value__mcard-body ul {
    margin: 0 0 22px 10px;
    padding: 0;
    list-style: none;
}

.sw-membership .mm-value__cell li,
.sw-membership .mm-value__mcard-body li {
    position: relative;
    margin: 0 0 4px;
    padding-left: 10px;
}

.sw-membership .mm-value__cell li::before,
.sw-membership .mm-value__mcard-body li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    font-size: 0.8em;
}

.sw-membership .mm-value__cell--check {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sw-membership .mm-check {
    width: 56px;
    height: 54px;
    background-color: var(--mm-navy);
}

/* ---- Mobile/tablet: table pivoted to one card per benefit ---- */
.sw-membership .mm-value__mobile { display: none; }

.sw-membership .mm-value__mcard {
    overflow: hidden;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 24px -12px rgba(25, 36, 79, 0.35);
}

.sw-membership .mm-value__mcard + .mm-value__mcard { margin-top: 16px; }

.sw-membership .mm-value__mcard-head {
    padding: 16px;
    font-family: var(--mm-font-head);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.2;
    text-align: center;
    color: #fff;
    background: var(--mm-navy);
}

.sw-membership .mm-value__mcard-row {
    display: grid;
    grid-template-columns: 108px 1fr;
}

.sw-membership .mm-value__mcard-row--tint  { background: var(--mm-tint); }
.sw-membership .mm-value__mcard-row--light { background: var(--mm-tint-light); }

.sw-membership .mm-value__mcard-row + .mm-value__mcard-row { border-top: 1px solid var(--mm-rule); }

.sw-membership .mm-value__mcard-label {
    display: flex;
    align-items: center;
    padding: 18px 12px;
    font-family: var(--mm-font-head);
    font-weight: 800;
    font-size: 16px;
    line-height: 1.2;
    color: var(--mm-navy);
    border-right: 1px solid var(--mm-rule);
}

.sw-membership .mm-value__mcard-body {
    padding: 18px;
    font-family: var(--mm-font-head);
    font-size: 16px;
    line-height: 1.45;
}

.sw-membership .mm-value__mcard-body strong.mm-value__price { margin-bottom: 14px; }
.sw-membership .mm-value__mcard-body ul { margin-bottom: 14px; }

.sw-membership .mm-value__mcard-body--check {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sw-membership .mm-value__mcard-body--check .mm-check {
    width: 40px;
    height: 38px;
}

/* =====================================================================
   YEAR-ROUND CARE
   ===================================================================== */
.sw-membership .mm-save {
    padding: 80px 0 40px;
}

/* "Learn More" jump target. The id sits on the headline so the jump lands
   there, not on the section padding. Desktop header doesn't pin; mobile
   has a fixed 60px bar to clear. */
.sw-membership #year-round { scroll-margin-top: 30px; }

.sw-membership .mm-save__sub {
    max-width: 1060px;
    margin: 0 auto 48px;
    font-size: 22px;
    line-height: 1.3;
    text-align: center;
}

.sw-membership .mm-save__list {
    display: flex;
    flex-direction: column;
    gap: 26px;
    max-width: 980px;
    margin: 0 auto;
}

.sw-membership .mm-save__item {
    display: grid;
    grid-template-columns: 144px 1fr;
    gap: 36px;
    align-items: center;
}

.sw-membership .mm-save__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 144px;
    height: 132px;
    background: var(--mm-gold);
    border-radius: 22px;
    box-shadow: 4px 8px 12px rgba(25, 36, 79, 0.28);
}

.sw-membership .mm-save__icon-svg {
    width: 80px;
    height: 80px;
    background-color: #fff;
}

.sw-membership .mm-save__copy h3 {
    margin: 0 0 2px;
    font-family: var(--mm-font-body);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.3;
    color: var(--mm-navy);
}

.sw-membership .mm-save__copy p {
    font-size: 18.5px;
    line-height: 1.3;
}

/* =====================================================================
   CTA
   ===================================================================== */
.sw-membership .mm-cta {
    padding: 70px 0 30px;
    text-align: center;
}

.sw-membership .mm-section-title--cta {
    margin-bottom: 44px;
    font-size: clamp(24px, 2.4vw, 34px);
    letter-spacing: 0.07em;
    color: var(--mm-navy-deep);
}

.sw-membership .mm-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 88px;
}

/* =====================================================================
   FOOTNOTES
   ===================================================================== */
.sw-membership .mm-footnotes {
    padding: 50px 0 80px;
    font-size: 18px;
    line-height: 1.2;
    color: var(--mm-muted);
}

.sw-membership .mm-footnotes .mm-container { max-width: 1336px; }

.sw-membership .mm-footnotes ol {
    margin: 0 0 21px;
    padding: 0;
    list-style: none;
}

.sw-membership .mm-footnotes li { margin: 0 0 10px; }
.sw-membership .mm-footnotes li:last-child { margin-bottom: 0; }

.sw-membership .mm-footnotes li > sup:first-child { margin-left: 0; }

.sw-membership .mm-footnotes p { margin: 0 0 21px; }
.sw-membership .mm-footnotes p:last-child { margin-bottom: 0; }

.sw-membership .mm-footnotes a {
    color: inherit;
    text-decoration: underline;
}

.sw-membership .mm-footnotes__terms {
    margin-top: 40px;
    text-align: center;
}

.sw-membership .mm-footnotes a.mm-btn--terms {
    padding: 15px 26px;
    font-family: var(--mm-font-body);
    font-size: 17px;
    font-weight: 400;
    color: var(--mm-navy);
    text-decoration: none;
    background: linear-gradient(180deg, var(--mm-sky) 0%, #6cc8f5 100%);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(87, 190, 237, 0.35);
}

.sw-membership .mm-footnotes a.mm-btn--terms:hover {
    background: var(--mm-sky-dark);
    transform: translateY(-1px);
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1180px) {
    .sw-membership .mm-value__head-cell { font-size: 19px; }
    .sw-membership .mm-value__row-label { font-size: 19px; padding: 20px 14px; }
    .sw-membership .mm-value__cell { padding: 20px 14px 28px; font-size: 16px; }
}

/* Swap the table for cards before the 6 columns get cramped */
@media (max-width: 1024px) {
    .sw-membership .mm-value { --mm-overhang: 100px; }
    .sw-membership .mm-value__grid { display: none; }
    .sw-membership .mm-value__mobile {
        display: block;
        max-width: 640px;
        margin: 0 auto;
    }
    .sw-membership .mm-save { padding-top: 70px; }

    .sw-membership .mm-benefits__grid { grid-template-columns: repeat(2, 1fr); gap: 48px 32px; }
}

@media (max-width: 900px) {
    /* Hero stacks: headline in a band of sky, the wizard below it. The
       desktop image is reused, sized to a fixed height and shifted right
       (86%) so the whole wizard stays in frame from 360px to 900px. */
    .sw-membership .mm-hero {
        display: block;
        height: auto;
        padding: 36px 0 clamp(300px, 85vw, 480px);
        background-size: auto clamp(300px, 85vw, 480px);
        background-position: 86% bottom;
    }

    /* Blend the image's top edge into the flat sky above it */
    .sw-membership .mm-hero::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(clamp(300px, 85vw, 480px) - 90px);
        height: 90px;
        background: linear-gradient(180deg, var(--mm-hero-sky) 0%, rgba(95, 178, 218, 0) 100%);
        pointer-events: none;
    }

    .sw-membership .mm-hero__inner { padding: 0 20px; }

    .sw-membership .mm-hero__text { text-align: center; }

    .sw-membership .mm-hero__text h1 { font-size: 40px; } /* mobile size unchanged */

    .sw-membership .mm-hero__advantage { margin-top: -40px; padding: 0 16px; }

    .sw-membership .mm-hero__advantage-inner {
        padding: 28px 22px 32px;
        border-radius: 14px;
    }

    .sw-membership .mm-hero__advantage-inner h2 { margin-bottom: 14px; }

    .sw-membership .mm-hero__advantage-inner p { font-size: 18px; }

    .sw-membership .mm-benefits { padding-top: 56px; }

    .sw-membership .mm-section-title--lined { gap: 18px; }
    .sw-membership .mm-section-title--lined::before,
    .sw-membership .mm-section-title--lined::after { max-width: 60px; height: 3px; }

    .sw-membership .mm-upkeep { padding-bottom: 70px; }

    .sw-membership .mm-upkeep__row {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-top: 32px;
        text-align: center;
    }

    .sw-membership .mm-upkeep__text p { margin: 0 auto 28px; }

    .sw-membership .mm-upkeep__icons { gap: 40px; }

    .sw-membership .mm-value { padding-top: 64px; }

    .sw-membership .mm-value__sub { margin-bottom: 36px; font-size: 19px; }

    .sw-membership .mm-save__sub { font-size: 19px; margin-bottom: 36px; }

    .sw-membership .mm-save__item {
        grid-template-columns: 84px 1fr;
        gap: 20px;
        align-items: flex-start;
    }

    .sw-membership .mm-save__icon {
        width: 84px;
        height: 78px;
        border-radius: 16px;
    }

    .sw-membership .mm-save__icon-svg { width: 46px; height: 46px; }

    .sw-membership .mm-save__copy h3 { font-size: 19px; margin-bottom: 4px; }
    .sw-membership .mm-save__copy p { font-size: 17px; line-height: 1.4; }

    .sw-membership #year-round { scroll-margin-top: 80px; }

    .sw-membership .mm-btn--pill { min-width: 240px; font-size: 22px; }

    .sw-membership .mm-footnotes { font-size: 15px; line-height: 1.35; }
}

@media (max-width: 560px) {
    .sw-membership .mm-benefits__grid { grid-template-columns: 1fr; gap: 36px; }

    .sw-membership .mm-benefit__icon { width: 84px; height: 84px; margin-bottom: 18px; }

    .sw-membership .mm-upkeep__icons { gap: 24px; }

    .sw-membership .mm-circle { width: 128px; height: 128px; margin-bottom: 16px; }

    .sw-membership .mm-circle__svg { width: 80px; height: 80px; }

    .sw-membership .mm-upkeep__icon span { font-size: 17px; }

    .sw-membership .mm-value__mcard-row { grid-template-columns: 92px 1fr; }

    .sw-membership .mm-value__mcard-label { font-size: 15px; padding: 16px 10px; }

    .sw-membership .mm-value__mcard-body { padding: 16px 14px; font-size: 15px; }

    .sw-membership .mm-save__item { grid-template-columns: 64px 1fr; gap: 16px; }

    .sw-membership .mm-save__icon { width: 64px; height: 60px; border-radius: 13px; }

    .sw-membership .mm-save__icon-svg { width: 36px; height: 36px; }

    .sw-membership .mm-cta__buttons { flex-direction: column; align-items: center; }
}