/* ----- Compare Overview ----- */

.compare-overview {
    padding: 6rem 0;
    background: var(--z-bg-dark);
}

.compare-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6rem;
    align-items: start;
}


/* ----- Package Comparison ----- */
.compare-packages {
    padding: 6rem 0;

    background: var(--z-surface);
}

.compare-table {
    overflow: hidden;

    border: 1px solid rgba(68, 176, 215, .20);
    border-radius: 6px;

    background: var(--z-bg-dark);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .20);
}

.compare-row {
    display: grid;

    grid-template-columns:
        minmax(280px, 1.5fr)
        repeat(3, minmax(170px, .8fr));

    background: #081A23;
    border-bottom: 1px solid rgba(68, 176, 215, .20);
}

.compare-row:nth-of-type(even) {
    background: #0D2530;
}

.compare-row:last-child {
    border-bottom: none;
}

.compare-row > div {
    display: flex;
    align-items: center;

    min-height: 64px;

    padding: 1rem 1.25rem;
}

.compare-row > div + div {
    justify-content: center;

    border-left: 1px solid rgba(68, 176, 215, .18);

    text-align: center;
}

/* Standard */
.compare-row:not(.compare-header) > div:nth-child(2) {
    background: rgba(68, 176, 215, .015);
}

/* Security+ */
.compare-row:not(.compare-header) > div:nth-child(3) {
    background: rgba(68, 176, 215, .045);
     --compare-accent: var(--z-cyan);
}

/* Healthcare+ */
.compare-row:not(.compare-header) > div:nth-child(4) {
    background: rgba(251, 161, 32, .025);
    --compare-accent: var(--z-orange);
}


/* Header */
.compare-header {
    background:
        linear-gradient(
            110deg,
            #153C50 0%,
            #102A36 60%,
            #07161E 100%
        );

    border-bottom: 1px solid rgba(68, 176, 215, .30);
}

.compare-header > div {
    min-height: 145px;
}

.compare-feature-heading {
    color: var(--z-text);

    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.compare-package-heading {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;

    gap: .35rem;
}

.compare-package-heading strong {
    color: var(--z-text);

    font-size: 1.35rem;
}

.compare-package-heading a {
    margin-top: .35rem;

    color: var(--z-cyan);

    font-size: .78rem;
    font-weight: 650;

    text-decoration: none;
}

.compare-package-heading a:hover {
    text-decoration: underline;
}

.compare-package-kicker {
    color: var(--z-text-muted);

    font-size: .65rem;
    font-weight: 700;

    letter-spacing: .1em;
    text-transform: uppercase;
}

.compare-securityplus-heading {
    background: rgba(68, 176, 215, .06);
}

.compare-healthcare-heading {
    background: rgba(251, 161, 32, .05);
}

.compare-healthcare-heading a {
    color: var(--z-orange);
}


/* Category Rows */
.compare-category {
    padding: .9rem 1.25rem;

    background:
        linear-gradient(
            90deg,
            #153C50 0%,
            #102A36 72%,
            #0B202A 100%
        );

    border-top: 1px solid rgba(68, 176, 215, .38);
    border-bottom: 1px solid rgba(68, 176, 215, .28);

    color: var(--z-cyan);

    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.compare-category-healthcare {
    color: var(--z-orange);

    border-color: rgba(251, 161, 32, .22);
}


/* Feature Rows */
.compare-feature {
    color: var(--z-text);

    font-size: .9rem;
    font-weight: 600;
}

.compare-value {
    color: var(--z-text-half-muted);

    font-size: .85rem;
    line-height: 1.45;
}

.compare-included {
    color: var(--compare-accent, var(--z-cyan));

    font-size: 1.05rem;
    font-weight: 700;
}

.compare-healthcare-value {
    color: var(--z-orange);

    font-size: 1.05rem;
    font-weight: 700;
}

.compare-none {
    color: rgba(170, 184, 194, .32);
}


/* Slight row alternation */
.compare-row:nth-of-type(even) {
    background: rgba(21, 60, 80, .06);
}


/* Notes */
.compare-notes {
    margin-top: 1.25rem;
}

.compare-notes p {
    margin: .35rem 0;

    color: var(--z-text-muted);

    font-size: .78rem;
    line-height: 1.5;
}

/* ----- Package Guidance ----- */
.compare-guidance {
    padding: 6rem 0;
    background: var(--z-bg-dark);
}

.compare-guidance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;

    margin-top: 3rem;
}

.compare-guidance-card {
    position: relative;
    overflow: hidden;

    min-height: 280px;
    padding: 2rem;

    text-decoration: none;

    background:
        linear-gradient(
            145deg,
            #102A36 0%,
            #0B202A 60%,
            #07161E 100%
        );

    border: 1px solid rgba(68, 176, 215, .20);
    border-radius: 6px;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}


/* ----- Card Backgrounds ----- */
.compare-guidance-standard,
.compare-guidance-security {
    background:
        linear-gradient(
            135deg,
            #102A36 0%,
            #153C50 55%,
            #0B202A 100%
        );
}

.compare-guidance-healthcare {
    background:
        linear-gradient(
            135deg,
            #102A36 0%,
            #163442 58%,
            #07161E 100%
        );

    border-color: rgba(251, 161, 32, .30);
}


/* ----- Corner Highlight ----- */
.compare-guidance-card::before {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    right: -100px;
    top: -120px;

    border-radius: 50%;
    filter: blur(75px);

    pointer-events: none;
}

.compare-guidance-standard::before,
.compare-guidance-security::before {
    background: rgba(68, 176, 215, .13);
}

.compare-guidance-healthcare::before {
    background: rgba(251, 161, 32, .11);
}


/* ----- Card Content ----- */
.compare-guidance-card-content {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;

    height: 100%;
}

.compare-guidance-kicker {
    margin: 0 0 .75rem;

    color: var(--z-cyan);

    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.compare-guidance-healthcare .compare-guidance-kicker {
    color: var(--z-orange);
}

.compare-guidance-card h3 {
    margin: 0 0 1rem;

    color: var(--z-text);

    font-size: 2rem;
    font-weight: 700;
}

.compare-guidance-card-content > p:not(.compare-guidance-kicker) {
    margin: 0;

    color: var(--z-text-muted);

    font-size: .92rem;
    line-height: 1.65;
}


/* ----- Explore Link ----- */
.explore-link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;

    margin-top: auto;
    padding-top: 2rem;

    color: var(--z-cyan);

    font-size: .9rem;
    font-weight: 650;
}

.compare-guidance-healthcare .explore-link {
    color: var(--z-orange);
}

.explore-link span {
    transition: transform .2s ease;
}

/* ----- Hover ----- */
.compare-guidance-card:hover {
    transform: translateY(-6px);

    border-color: rgba(68, 176, 215, .55);

    box-shadow:
        0 16px 35px rgba(0, 0, 0, .25),
        0 0 30px rgba(68, 176, 215, .10);

    filter: brightness(1.08);
}

.compare-guidance-healthcare:hover {
    border-color: rgba(251, 161, 32, .55);

    box-shadow:
        0 16px 35px rgba(0, 0, 0, .25),
        0 0 30px rgba(251, 161, 32, .09);
}

.compare-guidance-card:hover .explore-link span {
    transform: translateX(4px);
}

/* ----- Final CTA ----- */
.compare-cta {
    position: relative;
    overflow: hidden;

    padding: 4.25rem 0;

    background:
        linear-gradient(
            110deg,
            #102A36 0%,
            #153C50 50%,
            #07161E 100%
        );

    border-top: 1px solid var(--z-border);
}

.compare-cta::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -100px;
    top: 50%;

    transform: translateY(-50%);

    background: rgba(68, 176, 215, .08);

    border-radius: 50%;
    filter: blur(100px);

    pointer-events: none;
}

.compare-cta-inner {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(220px, .7fr);
    gap: 4rem;

    align-items: center;
}

.compare-cta-copy {
    max-width: 700px;
}

.compare-cta-copy h2 {
    max-width: 650px;

    margin: 0 0 1rem;

    color: var(--z-text);

    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.08;
}

.compare-cta-copy p:last-child {
    max-width: 650px;

    margin: 0;

    color: var(--z-text-muted);

    font-size: 1rem;
    line-height: 1.7;
}

.compare-cta-actions {
    display: flex;
    justify-content: flex-start;
}

@media (max-width: 900px) {

    .compare-overview {
        padding: 4.5rem 0;
    }

    .compare-overview-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .compare-table {
        overflow-x: auto;
    }

    .compare-row {
        min-width: 900px;
    }

    .compare-category {
        min-width: 900px;
    }

    .compare-guidance {
        padding: 4.5rem 0;
    }

    .compare-guidance-grid {
        grid-template-columns: 1fr;
    }

    .compare-cta {
        padding: 4rem 0;
    }

    .compare-cta-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .compare-guidance-card,
    .compare-guidance-card a span {
        transition: none;
    }

    .compare-guidance-card:hover {
        transform: none;
    }

    .compare-guidance-card:hover a span {
        transform: none;
    }
}