/* =========================================================
   Outside / Marketing Styles (consolidated)
   ========================================================= */
:root {
    /* Layout */
    --container-max: 1200px;
    --container-pad: clamp(16px,3.5vw,32px);
    /* Hero colors (match artwork) */
    --hero-amber-start: #ff9f00;
    --hero-amber-mid: #fbb746;
    --hero-amber-end: #FFFFFF;
    /* CTA (teal) */
    --cta: #008272;
    --cta-hover: #006b5e;
    /* Shared sizes */
    --chip-h: 38px; /* hero CTA & chips */
    --hdr-btn-h: 34px;
    /* Rhythm & line-height */
    --vr-h1: 8px;
    --vr-h2: 12px;
    --vr-h3: 10px;
    --vr-body: 8px;
    --lh-body: 1.66;
}

body.outside {
    --bg: #fff;
    --card: #fff;
    --line: #fff;
    --muted: #6a7a8f;
    --text: #1f2937;
    --accent: #0ea5e9;
    --hover: #eef7ff;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 18px; /* body (+2px) */
}

    body.outside .topbar {
        background: var(--card);
        border-bottom: 1px solid var(--line);
        box-shadow: none
    }

    body.outside .side {
        background: var(--card);
        border-right: 1px solid var(--line);
        box-shadow: none
    }

    body.outside .main {
        background: var(--bg)
    }

    body.outside .nav a {
        border-radius: 12px
    }

        body.outside .nav a:hover,
        body.outside .nav a[aria-current="page"],
        body.outside .nav a.active {
            background: rgba(14,165,233,.12)
        }

    body.outside .nav-ico svg {
        width: 18px;
        height: 18px
    }

/* Top-right actions */
#planPill, #upgradeBtn, #ctaSignIn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--hdr-btn-h);
    line-height: 1;
    padding: 0 12px;
    text-decoration: none;
    background: #fff;
    border: none;
    box-shadow: none
}

#planPill {
    border-radius: 999px
}

/* =========================================================
   Landing (typography & centered sections)
   ========================================================= */
.mk-landing .mk-h1 {
    font-size: 34px;
    line-height: 1.2;
    margin: 0 0 var(--vr-h1)
}

.mk-landing .mk-h2 {
    font-size: 30px;
    line-height: 1.25;
    margin: 0 0 var(--vr-h2)
}

.mk-landing .mk-card h3 {
    font-size: 20px;
    line-height: 1.3;
    margin: 0 0 var(--vr-h3)
}

.mk-landing p, .mk-landing li {
    line-height: var(--lh-body)
}

.mk-landing .mk-ticks, .mk-landing .mk-steps {
    margin: var(--vr-body) 0 0;
    padding-left: 1.2rem
}

    .mk-landing .mk-ticks li, .mk-landing .mk-steps li {
        margin: 6px 0;
        font-size: 16px;
        color: #0b0f1a
    }

        .mk-landing .mk-ticks li::marker, .mk-landing .mk-steps li::marker {
            color: #0b0f1a
        }

.mk-section,
.mk-landing .features,
.mk-landing .how,
.mk-landing .mk-faq,
.mk-landing .mk-banner {
    background: #fff;
    border: none;
    margin-top: 22px;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding: clamp(16px,2.2vw,22px) var(--container-pad)
}

    .mk-section::before, .mk-section::after {
        content: none
    }

/* =========================================================
   HERO — gradient + image fills/aligns to top
   ========================================================= */
.mk-hero {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 16px;
    max-width: var(--container-max);
    margin: 0 auto;
    --hero-pad-y: clamp(20px,3vw,28px);
    padding: var(--hero-pad-y) var(--container-pad);
    color: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none
}

    .mk-hero::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 100%;
        background: linear-gradient(180deg,var(--hero-amber-start) 0%,var(--hero-amber-mid) 45%,var(--hero-amber-end) 100%)
    }

@media (max-width:980px) {
    .mk-hero {
        grid-template-columns: 1fr
    }
}

.mk-hero .mk-h1 {
    color: #fff
}

.mk-hero .mk-lead {
    color: #ffedd5;
    max-width: 70ch
}

/* hero visual flush-to-top and scaled */
.mk-hero-visual {
    position: relative;
    margin-top: calc(-1 * var(--hero-pad-y));
    height: calc(100% + var(--hero-pad-y))
}

    .mk-hero-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        border: 0;
        box-shadow: none
    }

    .mk-hero-visual figcaption {
        color: #111;
        font-size: 13px;
        margin-top: 8px
    }

/* CTA & chips (same physical size) */
.mk-landing .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--chip-h);
    line-height: 1;
    padding: 0 14px;
    font-size: 1rem
}

    .mk-landing .btn.btn-accent {
        background: var(--cta);
        color: #fff;
        border-color: transparent
    }

        .mk-landing .btn.btn-accent:hover {
            background: var(--cta-hover)
        }

.mk-chips {
    display: flex;
    gap: 8px;
    padding: 0;
    margin: 10px 0 0;
    list-style: none;
    flex-wrap: wrap
}

.mk-hero .mk-chips li {
    display: inline-flex;
    align-items: center;
    height: var(--chip-h);
    padding: 0 14px;
    border-radius: 999px;
    background: transparent;
    border: 1.5px solid #000;
    color: #111;
    font-size: 1rem
}

.pill-lite {
    background: transparent;
    border: 1.5px solid #000;
    color: #111;
    border-radius: 9999px;
    padding: 2px 10px
}

/* remove any generic “surface” seams */
.mk-landing .surface {
    border: none;
    box-shadow: none;
    background: transparent
}

.mk-hero + .mk-section {
    border-top: none
}

/* =========================================================
   WHY IT MATTERS
   ========================================================= */
.mk-why .mk-why-lead {
    max-width: 70ch;
    margin: 8px 0 10px
}

.mk-why .mk-why-intro {
    margin: 6px 0
}

.mk-why .mk-why-list {
    margin: 0;
    padding-left: 1.2rem;
    list-style: disc
}

    .mk-why .mk-why-list li {
        margin: 6px 0
    }

/* =========================================================
   WHAT YOU GET — tiles
   ========================================================= */
.mk-grid-2 {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit,minmax(340px,1fr));
    align-items: start
}

.features .mk-card, .mk-card.white {
    background: #fff !important;
    border: none !important;
    box-shadow: none !important;
    padding: 20px 22px
}

    .features .mk-card .btn {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        height: auto !important;
        border-radius: 0 !important;
        text-decoration: none !important;
        color: var(--accent);
        display: inline
    }

        .features .mk-card .btn:hover {
            text-decoration: underline !important
        }

        .features .mk-card .btn:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px
        }

/* =========================================================
   Full-width banner (above “How it works”)
   ========================================================= */
.mk-banner {
    background: #fff
}

.mk-banner-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    margin: 0 0 18px
}

.how-visual {
    display: none !important
}

/* =========================================================
   FAQ — SAP-style
   ========================================================= */
.mk-faq {
    padding-top: 30px;
    background: #fff
}

    .mk-faq details {
        border-bottom: 1px solid #dbe2ef;
        padding: 14px 0
    }

    .mk-faq summary {
        display: flex;
        align-items: center;
        cursor: pointer;
        font-weight: 600;
        font-size: 18px;
        color: var(--text);
        list-style: none
    }

        .mk-faq summary::-webkit-details-marker {
            display: none
        }

        .mk-faq summary::before {
            content: "›";
            font-size: 20px;
            color: var(--accent);
            margin-right: 10px;
            transform: rotate(0);
            transition: transform .2s ease
        }

    .mk-faq details[open] summary::before {
        transform: rotate(90deg)
    }

    .mk-faq p {
        margin: 8px 0 0 30px;
        color: var(--muted);
        line-height: var(--lh-body)
    }

.mk-landing hr, .mk-landing .divider, .mk-landing .section-divider {
    display: none;
    height: 0;
    border: 0;
    background: transparent
}

/* =========================================================
   HERO — bleed image to right edge on wide screens
   ========================================================= */
@media (min-width: 1200px) {
    .mk-hero {
        position: relative;
        display: block;
    }
        /* keep copy centered; reserve space on the right for the image */
        .mk-hero > :first-child {
            max-width: var(--container-max);
            margin-left: auto;
            margin-right: auto;
            padding-left: var(--container-pad);
            padding-right: calc(var(--container-pad) + clamp(520px, 42vw, 760px));
        }

    .mk-hero-visual {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: clamp(520px, 42vw, 760px);
        margin: 0;
        pointer-events: none;
    }

        .mk-hero-visual img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
            box-shadow: none;
        }
}
/* small screens: normal stacked layout stays in effect via defaults above */