/**
 * WPIDE product pages (/features/, /pricing/, /compare/) and the footer's links. Built on the theme's DashLite
 * styles and the snippet library's tokens (assets/css/library.css), so every page reads as the same site; only
 * what these pages add lives here. Small text is a step darker than the theme's #8094ae for 4.5:1 contrast.
 */

.mk,
.footer-links {
    --mk-ink: #364a63;
    --mk-text: #526484;
    --mk-muted: #5f7293;
    --mk-line: #e5e9f2;
    --mk-line-strong: #dbdfea;
    --mk-soft: #f5f6fa;
    --mk-primary: #6576ff;
    --mk-primary-ink: #4b5ad8;
    --mk-primary-soft: #eef0ff;
    --mk-radius: 10px;
    --mk-gap: 1.25rem;
}

.mk {
    display: block;
    color: var(--mk-text);
    overflow-wrap: break-word;
}

.mk a:not(.btn) {
    color: var(--mk-primary-ink);
}

.mk a:not(.btn):hover {
    color: var(--mk-ink);
}

.mk :focus-visible {
    outline: 2px solid var(--mk-primary);
    outline-offset: 2px;
}

/* Page head */

.mk-hero {
    padding: 2.75rem 0 2.5rem;
    border-bottom: 1px solid var(--mk-line);
}

.mk-hero-inner {
    max-width: 860px;
}

.mk-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    font-size: .8125rem;
    line-height: 1.5;
}

.mk-crumbs li {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: var(--mk-muted);
}

.mk-crumbs li + li::before {
    content: "/";
    color: #b7c2d0;
}

.mk-crumbs [aria-current] {
    color: var(--mk-text);
}

.mk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin: 0 0 .75rem;
    padding: .25rem .75rem;
    border-radius: 999px;
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.mk-title {
    margin: 0 0 .75rem;
    color: var(--mk-ink);
    font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.mk-lead {
    margin: 0;
    color: var(--mk-text);
    font-size: 1.0625rem;
    line-height: 1.6;
}

.mk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.mk-actions .btn {
    gap: .5rem;
}

.mk-note {
    margin: 1rem 0 0;
    color: var(--mk-muted);
    font-size: .8125rem;
}

/* The hero screenshot overlaps the head's bottom edge, like the front page's. */
.mk-hero-media {
    margin-top: -1px;
    padding: 2rem 0 0;
    background: linear-gradient(to bottom, var(--mk-soft) 50%, #fff 50%);
}

.mk-media {
    margin: 0;
}

.mk-media img,
.mk-media video {
    display: block;
    border-radius: 6px;
}

/* Sections */

/* Anchor jumps land below the sticky header. */
.mk section[id],
.mk [id^="faq"] {
    scroll-margin-top: 90px;
}

.mk-section-head {
    max-width: 720px;
    margin: 0 auto 2rem;
    text-align: center;
}

.mk-section-head .title {
    margin-bottom: .5rem;
    color: var(--mk-ink);
}

.mk-section-head p {
    margin: 0;
}

.mk-row-text .title {
    color: var(--mk-ink);
}

.mk-row-text .list li {
    color: var(--mk-text);
}

.mk-row-link {
    margin-top: 1rem;
    font-weight: 500;
}

.mk-row-link .icon,
.mk-card-more .icon,
.mk-table-foot .icon {
    vertical-align: middle;
    transition: transform .2s ease;
}

.mk-row-link a:hover .icon,
.mk-card:hover .mk-card-more .icon,
.mk-table-foot a:hover .icon {
    transform: translateX(3px);
}

/* Cards: equal heights, the link line at the bottom of each. */

.mk-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--mk-gap);
}

.mk-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius);
    background: #fff;
    color: var(--mk-text);
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* A linked card keeps body text; only its "learn more" line is link-colored. */
.mk a.mk-card:not(.btn),
.mk a.mk-card:not(.btn):hover {
    color: var(--mk-text);
}

a.mk-card:hover {
    border-color: #c9cffd;
    box-shadow: 0 6px 20px -8px rgba(60, 77, 98, .25);
    transform: translateY(-2px);
}

.mk-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--mk-primary-soft);
    color: var(--mk-primary);
    font-size: 1.375rem;
}

.mk-card-title {
    margin: 0 0 .5rem;
    color: var(--mk-ink);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
}

.mk-card-text {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
}

.mk-card-more {
    margin-top: auto;
    padding-top: 1rem;
    color: var(--mk-primary-ink);
    font-size: .875rem;
    font-weight: 600;
}

/* Tables: plans and comparisons */

.mk-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius);
    background: #fff;
}

.mk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}

.mk-table th,
.mk-table td {
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--mk-line);
    text-align: center;
    vertical-align: middle;
}

.mk-table tbody:last-child tr:last-child > * {
    border-bottom: 0;
}

.mk-table thead th {
    position: sticky;
    top: 0;
    background: var(--mk-soft);
    color: var(--mk-ink);
    font-weight: 600;
    white-space: nowrap;
}

.mk-table tbody th {
    min-width: 220px;
    text-align: left;
    font-weight: 400;
}

.mk-table-label {
    display: block;
    color: var(--mk-ink);
    font-weight: 500;
}

.mk-table-help {
    display: block;
    margin-top: .125rem;
    color: var(--mk-muted);
    font-size: .8125rem;
    line-height: 1.5;
}

.mk-table .is-featured {
    background: rgba(101, 118, 255, .05);
}

.mk-table thead .is-featured {
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
}

.mk-table-group th {
    padding-top: 1.25rem;
    background: #fff;
    color: var(--mk-ink);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
}

.mk-table .pt-yes {
    color: var(--mk-primary);
    font-size: 1.125rem;
}

.mk-table .pt-no {
    color: #b7c2d0;
}

.mk-table .pt-text {
    color: var(--mk-ink);
    font-size: .875rem;
    font-weight: 500;
}

.mk-table-compare td {
    min-width: 180px;
}

.mk-table-foot {
    margin: 1rem 0 0;
    text-align: center;
    font-size: .875rem;
    font-weight: 500;
}

.mk-muted {
    color: var(--mk-muted);
    font-weight: 400;
}

/* Comparisons */

.mk-verdict {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--mk-gap);
}

.mk-verdict-card {
    height: 100%;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius);
    background: #fff;
}

.mk-verdict-card.is-wpide {
    border-color: #c9cffd;
    background: var(--mk-primary-soft);
}

.mk-verdict-title {
    margin: 0 0 1rem;
    color: var(--mk-ink);
    font-size: 1.125rem;
    font-weight: 600;
}

.mk-verdict-card .list li {
    padding-left: 2rem;
    color: var(--mk-text);
}

.mk-verdict-card .list li + li {
    margin-top: .625rem;
}

.mk-steps {
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    counter-reset: mk-step;
}

.mk-steps li {
    position: relative;
    padding: 0 0 1.25rem 3.25rem;
    counter-increment: mk-step;
    color: var(--mk-text);
    line-height: 1.6;
}

.mk-steps li::before {
    content: counter(mk-step);
    position: absolute;
    top: -.125rem;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-size: .875rem;
    font-weight: 700;
}

.mk-sources .mk-section-head p {
    color: var(--mk-muted);
    font-size: .875rem;
}

.mk-source-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
}

/* Footer links (every page) */

.footer-links {
    padding: 2.5rem 0 .5rem;
}

.footer-links-title {
    margin: 0 0 .75rem;
    color: var(--mk-ink);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.footer-links ul {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.footer-links li + li {
    margin-top: .375rem;
}

.footer-links a {
    color: var(--mk-text);
    font-size: .9375rem;
}

.footer-links a:hover {
    color: var(--mk-primary-ink);
}

/* Phones: tables become one card per row, each cell labelled. */

@media (max-width: 767.98px) {
    .mk-hero {
        padding: 2rem 0;
    }

    .mk-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .mk-actions li {
        flex: 1 1 100%;
    }

    .mk-table-wrap {
        overflow: visible;
        border: 0;
        background: none;
    }

    .mk-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .mk-table,
    .mk-table tbody,
    .mk-table tr,
    .mk-table th,
    .mk-table td {
        display: block;
        width: 100%;
    }

    .mk-table tr {
        margin-bottom: .75rem;
        border: 1px solid var(--mk-line);
        border-radius: var(--mk-radius);
        background: #fff;
        overflow: hidden;
    }

    .mk-table tbody th {
        min-width: 0;
        background: var(--mk-soft);
    }

    .mk-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-width: 0;
        text-align: right;
    }

    .mk-table td::before {
        content: attr(data-label);
        color: var(--mk-muted);
        font-size: .8125rem;
        font-weight: 600;
        text-align: left;
    }

    .mk-table .mk-table-group {
        margin: 1.25rem 0 .5rem;
        border: 0;
        background: none;
    }

    .mk-table .mk-table-group th {
        padding: 0;
        background: none;
    }

    .mk-table tbody:last-child tr:last-child > *,
    .mk-table tr > *:last-child {
        border-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mk-card,
    .mk-row-link .icon,
    .mk-card-more .icon,
    .mk-table-foot .icon {
        transition: none;
    }

    a.mk-card:hover {
        transform: none;
    }
}