/* Shared responsive finish for WordPress and WooCommerce hosting pages. */
@media (min-width: 769px) and (max-width: 1100px) {
    .mz-wp-hero-wrapper,
    .mz-woo-hero-wrapper { gap: 34px; }

    .mz-wp-hero-image,
    .mz-woo-hero-image { flex: 0 1 42%; min-width: 0; }

    .mz-wp-hero-visual,
    .mz-woo-hero-visual { max-width: 390px; }

    .mz-wp-hero-content h1,
    .mz-woo-hero-content h1 { font-size: clamp(34px, 4vw, 46px); }

    .mz-wp-hero-content > p,
    .mz-woo-hero-content > p { text-align: left; }
}

@media (max-width: 768px) {
    .mz-wp-page,
    .mz-woo-page { overflow-x: hidden; }

    .mz-wp-hero,
    .mz-woo-hero { padding: 32px 0 52px !important; }

    .mz-wp-hero-wrapper,
    .mz-woo-hero-wrapper {
        flex-direction: column !important;
        gap: 28px;
        text-align: center;
    }

    .mz-wp-hero-image,
    .mz-woo-hero-image { width: min(100%, 330px); max-width: 330px; }

    .mz-wp-hero-visual,
    .mz-woo-hero-visual { max-width: 300px; }

    .mz-wp-hero-content,
    .mz-woo-hero-content { width: 100%; min-width: 0; }

    .mz-wp-hero-content h1,
    .mz-woo-hero-content h1 {
        margin-bottom: 14px;
        font-size: clamp(29px, 8vw, 38px);
        line-height: 1.14;
        letter-spacing: -.025em;
    }

    .mz-wp-hero-sub,
    .mz-woo-hero-sub { margin-bottom: 12px; font-size: 16px; line-height: 1.5; }

    .mz-wp-hero-content > p:not(.mz-wp-hero-sub),
    .mz-woo-hero-content > p:not(.mz-woo-hero-sub) {
        margin: 0 auto 24px;
        font-size: 15px;
        line-height: 1.72;
        text-align: center;
    }

    .mz-wp-hero-btns,
    .mz-woo-hero-btns { width: 100%; align-items: stretch; }

    .mz-wp-hero-btns .mz-btn-group,
    .mz-woo-hero-btns .mz-btn-group { width: min(100%, 360px); max-width: none; margin: 0 auto; }

    .mz-wp-hero-features,
    .mz-woo-hero-features { width: min(100%, 360px); margin: 24px auto 0; gap: 10px; }

    .mz-wp-hero-feature-item,
    .mz-woo-hero-feature-item { justify-content: flex-start; text-align: left; }

    /* Keep the desktop button language rather than the site-wide compact mobile variant. */
    .mz-wp-page .mz-btn-group,
    .mz-woo-page .mz-btn-group {
        display: flex;
        width: fit-content;
        margin: 15px 0;
        gap: 4px;
        padding: 8px;
        overflow: visible;
        border: 0;
        border-radius: var(--mz-radius-md);
        background: #f1f1f1;
        box-shadow: inset 0 1px 3px rgba(210, 210, 220, .12);
    }

    .mz-wp-page .mz-btn-group.full-width,
    .mz-woo-page .mz-btn-group.full-width { width: 100%; }

    .mz-wp-page .mz-wp-hero-btns .mz-btn-group,
    .mz-woo-page .mz-woo-hero-btns .mz-btn-group { width: fit-content; max-width: none; }

    .mz-wp-page .mz-btn-group .mz-btn,
    .mz-woo-page .mz-btn-group .mz-btn {
        height: auto;
        padding: 12px 20px;
        border: 0;
        border-radius: 10px;
        background: transparent;
    }

    .mz-wp-page .mz-btn-group .mz-btn-main,
    .mz-woo-page .mz-btn-group .mz-btn-main {
        flex: initial;
        justify-content: center;
        padding-left: 20px;
        background: var(--mz-white);
        color: var(--mz-text-dark);
        box-shadow: var(--mz-shadow-sm);
    }

    .mz-wp-page .mz-btn-group .mz-btn-icon-only,
    .mz-woo-page .mz-btn-group .mz-btn-icon-only {
        width: auto;
        padding: 12px 15px;
        border-left: 0;
        color: var(--mz-text-main);
    }

    .mz-wp-features-list,
    .mz-woo-page .mz-wp-features-list { gap: 56px; }

    .mz-wp-feature-item,
    .mz-wp-feature-item.mz-reverse,
    .mz-woo-feature-item,
    .mz-woo-feature-item.mz-reverse { gap: 24px; text-align: left; }

    .mz-wp-feature-content,
    .mz-woo-feature-content { width: 100%; }

    .mz-wp-feature-content h3,
    .mz-woo-feature-content h3 { font-size: clamp(23px, 6vw, 29px); line-height: 1.25; }

    .mz-wp-feature-content p,
    .mz-woo-feature-content p { font-size: 15px; line-height: 1.75; text-align: left; }

    .mz-wp-feature-visual,
    .mz-woo-feature-visual { width: 100%; min-height: 250px !important; }
}

@media (max-width: 1024px) {
    .mz-wp-page .mz-wp-compare-table-wrapper,
    .mz-woo-page .mz-wp-compare-table-wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    .mz-wp-page table.mz-wp-compare-table,
    .mz-woo-page table.mz-wp-compare-table {
        width: 660px;
        min-width: 660px;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .mz-wp-hero,
    .mz-woo-hero { padding-top: 24px !important; }

    .mz-wp-hero-image,
    .mz-woo-hero-image { width: min(100%, 280px); }

    .mz-wp-hero-visual,
    .mz-woo-hero-visual { max-width: 260px; }

    .mz-wp-hero-badge,
    .mz-woo-hero-badge { max-width: 100%; padding: 7px 11px; font-size: 11px; }

    .mz-wp-feature-visual,
    .mz-woo-feature-visual { min-height: 220px !important; }
}