/* Marketing UX fixes kept out of main.css so they do not collide with the
   pricing redesign's stylesheet edits. Loaded after main.css. */

/* Desktop links collide with the logo and the actions from 768px up.
   The hamburger owns the bar through 1199.98px. At 1200px and up the row
   uses the 1200px container; gap and padding stay tight so the longer
   demo label clears the links (about 30px of spare). */
@media (max-width: 1199.98px) {
    .mk-header-inner {
        grid-template-columns: 1fr auto auto;
        gap: 0.5rem;
    }

    .mk-header-nav,
    .mk-header-actions {
        display: none;
    }

    .mk-logo-img {
        max-width: min(168px, 52vw);
        max-height: 44px;
    }

    .mk-theme-toggle--mobile {
        display: inline-flex;
        grid-column: 2;
        justify-self: end;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .mk-hamburger {
        display: flex;
        grid-column: 3;
        justify-self: end;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 2;
    }

    .mk-header.is-nav-open { z-index: 1060; }
    .mk-header.is-nav-open .mk-hamburger { z-index: 1061; }

    .mk-mobile-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: color-mix(in srgb, var(--mk-brand-deep) 45%, transparent);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .mk-mobile-nav-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .mk-mobile-nav {
        display: block;
        position: fixed;
        top: var(--mk-header-height);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        overflow-y: auto;
        transform: none;
        background: var(--mk-card-bg);
        padding: 1.5rem;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }

    .mk-mobile-nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    body.nav-open {
        overflow: hidden;
    }
}

@media (min-width: 1200px) {
    /* At exactly 1200px the shared sheet caps .mk-container at 960px.
       The header needs the full container or the desktop nav overlaps. */
    .mk-header > .mk-container {
        max-width: var(--mk-container);
    }

    .mk-header-inner {
        gap: 0.75rem;
    }

    .mk-nav-desktop {
        gap: 0;
    }

    .mk-nav-link-flat,
    .mk-nav-item > .mk-nav-link {
        padding-inline: 0.55rem;
    }

    .mk-header-actions {
        gap: 0.4rem;
    }

    .mk-header-actions .mk-btn.btn-size-sm {
        padding-inline: 12px;
    }

    .mk-header-portal {
        padding-inline: 0.35rem;
    }

    /* Scrolling used to drop the logo to max-height 40px (192px wide).
       The 52px cap is the 250px-wide asset. It still fits beside the nav. */
    .mk-header.is-shrunk .mk-logo-img {
        max-height: 52px;
    }

    .mk-header-brand {
        min-width: max-content;
    }
}

/* Reveal stays visible until script marks only below-the-fold, non-CTA
   blocks as pending. No-JS and slow-JS never leave content invisible. */
.mk-reveal {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: no-preference) {
    .mk-reveal.is-pending:not(.is-visible) {
        opacity: 0;
        transform: translateY(22px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mk-reveal,
    .mk-reveal.is-pending,
    .mk-reveal.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Story teaser needs a visible control, not only an arrow icon. */
.mk-story-teaser {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--mk-ink);
    color: var(--mk-on-ink);
    border-radius: 12px;
    text-decoration: none;
}

.mk-story-teaser-cta {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 479.98px) {
    .mk-story-teaser {
        flex-direction: column;
        align-items: stretch;
    }

    .mk-story-teaser-cta {
        width: 100%;
        white-space: normal;
        text-align: center;
    }
}

/* Pages that already end with a CTA strip should not stack the footer bar. */
main.site-main:has(.mk-cta-strip) + .mk-footer .mk-footer-cta {
    display: none;
}

/* Install chip + close control. The close target is 44px even when an
   inline stylesheet asks for 36px. On phones the pair sits in extra padding
   at the top of the sticky bar, so it does not cover card text or the
   demo label. It stays hidden until that bar is on screen. */
#pwa-install-dismiss {
    box-sizing: border-box !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
}

#pwa-ios-install-dismiss {
    box-sizing: border-box !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
}

#pwa-install-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--mk-brand-deep) !important;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

#pwa-install-dock {
    position: fixed;
    z-index: 970;
    left: 20px;
    right: auto;
    bottom: 20px;
    display: none;
    align-items: center;
    gap: 6px;
}

#pwa-install-dock.show {
    display: flex;
}

#pwa-install-button,
#pwa-install-button.show,
#pwa-install-dock #pwa-install-button.show {
    background-color: var(--mk-brand) !important;
    color: #fff !important;
}

#pwa-install-button:hover,
#pwa-install-dock #pwa-install-button.show:hover {
    background-color: var(--mk-brand-dark) !important;
}

#pwa-install-dock #pwa-install-button.show {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

/* Back-to-top sits on the opposite side of the install chip, and above
   the sticky bar on phones, so the two controls do not cover each other. */
body:has(#pwa-install-dock.show) #scroll_up {
    left: auto;
    right: 20px;
    bottom: 20px;
}

@media (min-width: 768px) {
    body:has(#pwa-install-dock.show) #scroll_up {
        right: auto;
        left: 30px;
    }
}

@media (max-width: 767px) {
    body:has(#pwa-install-dock.show):has(.mk-sticky-cta.is-visible) .mk-sticky-cta.is-visible {
        padding-top: 58px;
    }

    body:has(#pwa-install-dock.show):has(.mk-sticky-cta.is-visible) {
        padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #pwa-install-dock.show {
        right: 12px !important;
        left: auto !important;
        bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body:not(:has(.mk-sticky-cta.is-visible)) #pwa-install-dock.show {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body:has(#pwa-install-dock.show) #scroll_up {
        left: calc(16px + env(safe-area-inset-left, 0px));
        right: auto;
        bottom: calc(148px + env(safe-area-inset-bottom, 0px));
    }

    #pwa-ios-install-banner.show {
        bottom: calc(136px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 970 !important;
    }
}

/* FAQ category bar: solid surface so scrolled text does not show through,
   and a visible active category. At 767px and below the shared stylesheet
   still sets this bar to position:static so the chips can scroll sideways. */
.mk-faq-nav {
    background: var(--mk-card-bg);
    border: 1px solid var(--mk-border);
}

.mk-faq-nav a.is-active,
.mk-faq-nav a[aria-current] {
    background: var(--mk-brand-deep);
    border-color: var(--mk-brand-deep);
    color: #fff;
}

:root {
    --mk-header-height-shrunk: 63px;
}

/* Dark header uses the white logo asset. */
.mk-logo-img--dark { display: none; }

[data-theme="dark"] .mk-logo-img--light { display: none; }

[data-theme="dark"] .mk-logo-img--dark { display: block; }

/* Long AI button wraps instead of widening the page. */
@media (max-width: 479.98px) {
    .mk-section--ai .mk-btn {
        white-space: normal;
        max-width: 100%;
    }
}

/* Connector lines sit 50% outside each step. When the row wraps, the
   leftmost line crosses the viewport and widens the page. Clip only the
   horizontal axis so the 6px circle halo is not cut off. */
.mk-flow-stepper {
    overflow-x: clip;
    overflow-y: visible;
}

/* Demo control inside the mobile menu. */
.mk-mobile-nav a.mk-btn,
.mk-mobile-nav a.mk-btn:hover,
.mk-mobile-nav a.mk-btn:focus-visible {
    color: #fff;
    background: var(--mk-brand-deep);
}

/* Shrunk header is 63px. Sticky table heads follow that, not the full bar. */
body:has(.mk-header.is-shrunk) .mk-offer-compare thead th {
    top: var(--mk-header-height-shrunk);
}

@media (max-width: 767.98px) {
    ol.mk-rule-cards li,
    .mk-offer-plus,
    .mk-offer-disclaimer,
    .mk-form label,
    .mk-compare-table,
    .mk-compare-table th,
    .mk-compare-table td {
        font-size: 1rem;
    }
}

.mk-persona-pain,
.mk-ai-demo-label {
    font-size: 1rem;
}

.mk-offer-name a,
.mk-faq-nav a,
.breadcrumbs a,
.mk-footer-social a,
.mk-module-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.breadcrumbs a {
    min-width: 44px;
    justify-content: center;
}

.mk-footer-social a {
    width: 44px;
    height: 44px;
    min-width: 44px;
    justify-content: center;
}

.mk-faq-nav a {
    box-sizing: border-box;
}

/* Text links. Brand teal on white is 3.17:1; the darker brand clears 4.5:1.
   Dark theme keeps --mk-brand, which stays above 4.5:1 on the dark surfaces. */
:root {
    --mk-link: #007A72;
}

html[data-theme="dark"] {
    --mk-link: var(--mk-brand);
}

a {
    color: var(--mk-link);
}

/* WhatsApp green #25D366 with white text is 1.98:1. #075E54 on that green
   is 3.87:1, so the label uses a darker green from the same family. */
.mk-btn-whatsapp,
.mk-btn-whatsapp:hover,
.mk-btn-whatsapp:focus-visible,
.mk-sticky-cta-whatsapp,
.mk-sticky-cta-whatsapp:hover,
.mk-sticky-cta-whatsapp:focus,
.mk-sticky-cta-whatsapp:focus-visible,
.mk-cta-strip .mk-btn-whatsapp-outline:hover,
.mk-cta-strip .mk-btn-whatsapp-outline:focus-visible {
    color: #043E38;
}