/* =========================================================
   SEO PRICING PAGE
   Refined SaaS feel + vivid per-plan colour identity
========================================================= */

:root {
    --sp-primary: #5ea3d8;
    --sp-primary-dark: #367eaf;
    --sp-primary-soft: #eef7fd;

    --sp-navy: #102c46;
    --sp-text: #183246;
    --sp-muted: #6d7d8d;

    --sp-border: #dfeaf2;
    --sp-border-soft: #e9f1f7;
    --sp-bg: #f6faff;
    --sp-white: #ffffff;

    --sp-shadow-sm: 0 8px 25px rgba(16, 44, 70, .06);
    --sp-shadow-md: 0 18px 50px rgba(16, 44, 70, .09);
    --sp-shadow-lg: 0 25px 70px rgba(16, 44, 70, .12);
}


/* =========================================================
   PAGE
========================================================= */

.seo-pricing-page {
    position: relative;

    padding: 3.5rem 0 4rem;

    background:
        radial-gradient(circle at 8% 0%, rgba(94, 163, 216, .16), transparent 30%),
        radial-gradient(circle at 92% 6%, rgba(99, 102, 241, .10), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(13, 148, 136, .07), transparent 42%),
        linear-gradient(180deg, #f8fbfe 0%, #f4f9fd 46%, #ffffff 100%);

    overflow-x: clip;
}

.seo-pricing-page .container {
    position: relative;
    z-index: 1;
}


/* =========================================================
   INTRO
========================================================= */

.seo-pricing-intro {
    max-width: 780px;

    margin: 0 auto 3.25rem;
}

.seo-pricing-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;

    padding: .55rem 1rem;
    margin-bottom: 1.35rem;

    background: rgba(255, 255, 255, .94);

    border: 1px solid rgba(94, 163, 216, .28);
    border-radius: 999px;

    color: var(--sp-primary-dark);

    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;

    box-shadow: var(--sp-shadow-sm);
}

.seo-pricing-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 1.85rem;
    height: 1.85rem;

    border-radius: .6rem;

    background: linear-gradient(135deg, #d7ecfa, #eef7fd);
    color: var(--sp-primary-dark);

    font-size: .72rem;
}

.seo-pricing-title {
    color: var(--sp-navy);

    font-size: clamp(2rem, 4vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -.035em;
    font-weight: 600;

    margin-bottom: 1.1rem;
}

.seo-pricing-title .highlight {
    font-size: clamp(2rem, 4vw, 2.6rem);

    background: linear-gradient(135deg, #367eaf 0%, #6366f1 100%);

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.seo-pricing-description {
    max-width: 660px;

    color: var(--sp-muted);

    font-size: 1.03rem;
    line-height: 1.8;
}

.seo-pricing-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;

    margin-top: 1.75rem;
    padding-top: 1.5rem;

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

.seo-pricing-trust span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;

    color: var(--sp-muted);

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

.seo-pricing-trust i {
    color: #0d9488;
    font-size: .88rem;
}


/* =========================================================
   PRICING GRID
========================================================= */

.seo-pricing-grid {
    --bs-gutter-y: 1.5rem;

    margin-bottom: 3rem;
}


/* =========================================================
   PLAN CARD
========================================================= */

.seo-plan-card {
    position: relative;

    display: flex;
    flex-direction: column;

    height: 100%;

    background: var(--sp-white);

    border: 1px solid var(--sp-border);
    border-radius: 1.25rem;

    box-shadow: 0 6px 20px rgba(16, 44, 70, .045);

    overflow: hidden;

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

.seo-plan-card:hover {
    transform: translateY(-6px);
}


/* =========================================================
   PLAN COLOR SYSTEM
========================================================= */

.seo-plan-starter {
    --plan-accent: #0d9488;
    --plan-accent-dark: #0f766e;
    --plan-accent-soft: #f0fdfa;
    --plan-accent-soft-2: #e6faf6;
    --plan-accent-border: rgba(13, 148, 136, .22);
    --plan-accent-glow: rgba(13, 148, 136, .22);
    --plan-gradient: linear-gradient(135deg, #0d9488, #14b8a6);
}

.seo-plan-pro {
    --plan-accent: #4f46e5;
    --plan-accent-dark: #4338ca;
    --plan-accent-soft: #eef2ff;
    --plan-accent-soft-2: #e0e7ff;
    --plan-accent-border: rgba(79, 70, 229, .28);
    --plan-accent-glow: rgba(79, 70, 229, .28);
    --plan-gradient: linear-gradient(135deg, #4f46e5, #6366f1);
}

.seo-plan-market {
    --plan-accent: #d97706;
    --plan-accent-dark: #b45309;
    --plan-accent-soft: #fffbeb;
    --plan-accent-soft-2: #fef3c7;
    --plan-accent-border: rgba(217, 119, 6, .24);
    --plan-accent-glow: rgba(217, 119, 6, .22);
    --plan-gradient: linear-gradient(135deg, #d97706, #f59e0b);
}

.seo-plan-enterprise {
    --plan-accent: #17324d;
    --plan-accent-dark: #0d2338;
    --plan-accent-soft: #f1f5f9;
    --plan-accent-soft-2: #e2e8f0;
    --plan-accent-border: rgba(23, 50, 77, .22);
    --plan-accent-glow: rgba(23, 50, 77, .22);
    --plan-gradient: linear-gradient(135deg, #17324d, #2b5478);
}


/* =========================================================
   PLAN HOVER GLOW
========================================================= */

.seo-plan-starter:hover,
.seo-plan-market:hover,
.seo-plan-enterprise:hover {
    border-color: var(--plan-accent-border);

    box-shadow:
        0 20px 45px var(--plan-accent-glow),
        0 6px 20px rgba(16, 44, 70, .05);
}


/* =========================================================
   ACCENT BAR
========================================================= */

.seo-plan-accent {
    width: 100%;
    height: 5px;

    flex-shrink: 0;

    background: var(--plan-gradient);
}


/* =========================================================
   CARD BODY
========================================================= */

.seo-plan-body {
    display: flex;
    flex-direction: column;

    flex: 1 1 auto;

    padding: 1.75rem 1.6rem 1.85rem;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #ffffff 65%,
            var(--plan-accent-soft) 220%);
}


/* =========================================================
   PLAN HEADER
========================================================= */

.seo-plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: .75rem;

    margin-bottom: 1.25rem;
}

.seo-plan-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 3.2rem;
    height: 3.2rem;

    border-radius: 1rem;

    background: var(--plan-gradient);
    color: #ffffff;

    font-size: 1.15rem;

    border: 1px solid rgba(255, 255, 255, .18);

    box-shadow:
        0 10px 22px var(--plan-accent-glow),
        inset 0 1px 0 rgba(255, 255, 255, .25);

    flex-shrink: 0;
}

.seo-plan-tag {
    display: inline-flex;
    align-items: center;

    padding: .35rem .75rem;

    background: var(--plan-accent-soft);

    border: 1px solid var(--plan-accent-border);
    border-radius: 999px;

    color: var(--plan-accent-dark);

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


/* =========================================================
   PLAN TITLE / DESCRIPTION
========================================================= */

.seo-plan-heading {
    margin-bottom: 1.35rem;
}

.seo-plan-name {
    color: var(--sp-navy);

    font-size: 1.32rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;

    margin: 0 0 .55rem;
}

.seo-plan-description {
    color: var(--sp-muted);

    font-size: .88rem;
    line-height: 1.7;

    min-height: 5rem;

    margin: 0;
}


/* =========================================================
   PRICE BOX
========================================================= */

.seo-plan-price-box {
    position: relative;

    overflow: hidden;

    padding: 1.15rem 1.15rem 1.2rem;
    margin-bottom: 1.4rem;

    background:
        linear-gradient(135deg,
            var(--plan-accent-soft),
            #ffffff 90%);

    border: 1px solid var(--plan-accent-border);
    border-radius: .95rem;
}

.seo-plan-price-box::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    bottom: 0;

    width: 4px;

    background: var(--plan-gradient);
}

.seo-plan-price-box::after {
    content: "";

    position: absolute;

    right: -46px;
    bottom: -56px;

    width: 130px;
    height: 130px;

    border-radius: 50%;

    border: 1px solid var(--plan-accent-border);

    opacity: .55;

    pointer-events: none;
}

.seo-plan-price-label {
    color: var(--plan-accent-dark);

    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;

    margin-bottom: .4rem;
}

.seo-plan-price {
    color: var(--plan-accent-dark);

    font-size: clamp(1.7rem, 2.1vw, 2.1rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.035em;
}

.seo-plan-price small {
    color: var(--sp-muted);

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

    letter-spacing: 0;

    margin-left: .15rem;
}

.seo-plan-price-note {
    color: var(--sp-muted);

    font-size: .76rem;
    line-height: 1.5;

    margin-top: .5rem;
}

.seo-plan-enterprise .seo-plan-price {
    font-size: 1.6rem;
    letter-spacing: -.02em;
}


/* =========================================================
   FEATURE HEADING
========================================================= */

.seo-plan-feature-heading {
    display: flex;
    align-items: center;
    gap: .5rem;

    color: var(--plan-accent-dark);

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

    margin-bottom: .5rem;
}

.seo-plan-feature-heading i {
    color: var(--plan-accent);

    font-size: .82rem;
}


/* =========================================================
   FEATURES
========================================================= */

.seo-plan-features {
    flex-grow: 1;

    margin-bottom: 1.6rem;
}

.seo-plan-feature {
    display: flex;
    align-items: flex-start;

    gap: .6rem;

    padding: .55rem 0;

    border-bottom: 1px solid #f0f5f9;
}

.seo-plan-feature:last-child {
    border-bottom: 0;
}

.seo-plan-feature i {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    margin-top: .18rem;

    width: 1.15rem;
    height: 1.15rem;

    border-radius: 50%;

    background: var(--plan-accent-soft);
    color: var(--plan-accent-dark);

    font-size: .62rem;
}

.seo-plan-feature p {
    color: var(--sp-text);

    font-size: .84rem;
    line-height: 1.55;

    margin: 0;
}


/* =========================================================
   ACTION BUTTON
========================================================= */

.seo-plan-action {
    margin-top: auto;
}

.seo-plan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: .55rem;

    width: 100%;
    min-height: 2.95rem;

    padding: .75rem 1rem;

    background: #ffffff;

    border: 1.5px solid var(--plan-accent);
    border-radius: .85rem;

    color: var(--plan-accent-dark);

    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .01em;

    text-decoration: none;

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.seo-plan-button i {
    font-size: .74rem;

    transition: transform .2s ease;
}

.seo-plan-button:hover {
    background: var(--plan-gradient);

    border-color: transparent;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 14px 28px var(--plan-accent-glow);
}

.seo-plan-button:hover i {
    transform: translateX(3px);
}


/* =========================================================
   FEATURED CARD
========================================================= */

.seo-plan-featured {
    border-color: var(--plan-accent-border);

    box-shadow:
        0 16px 45px var(--plan-accent-glow),
        0 6px 18px rgba(16, 44, 70, .05);
}

.seo-plan-featured:hover {
    border-color: var(--plan-accent);

    box-shadow:
        0 26px 60px var(--plan-accent-glow),
        0 8px 22px rgba(16, 44, 70, .07);
}

.seo-plan-featured .seo-plan-body {
    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #fbfcff 55%,
            #f2f5ff 100%);
}

.seo-plan-featured .seo-plan-price-box {
    background:
        linear-gradient(135deg,
            #eef2ff,
            #ffffff 85%);
}

.seo-plan-featured .seo-plan-button {
    background: var(--plan-gradient);

    border-color: transparent;

    color: #ffffff;

    box-shadow:
        0 12px 26px var(--plan-accent-glow);
}

.seo-plan-featured .seo-plan-button:hover {
    background:
        linear-gradient(135deg,
            #4338ca,
            #4f46e5);

    box-shadow:
        0 16px 32px var(--plan-accent-glow);
}


/* =========================================================
   FEATURED LABEL
========================================================= */

.seo-featured-label {
    position: absolute;

    top: 1rem;
    right: 1rem;

    display: inline-flex;
    align-items: center;

    gap: .35rem;

    padding: .42rem .75rem;

    background:
        linear-gradient(135deg,
            #4f46e5,
            #6366f1);

    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;

    color: #ffffff;

    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;

    box-shadow:
        0 8px 18px rgba(79, 70, 229, .35),
        inset 0 1px 0 rgba(255, 255, 255, .3);

    z-index: 3;
}

.seo-featured-label i {
    color: #fde68a;
    font-size: .6rem;
}


/* =========================================================
   COMPARISON TABLE
========================================================= */

.seo-comparison-wrapper {
    position: relative;

    margin-top: 1rem;

    background: var(--sp-white);

    border: 1px solid var(--sp-border);
    border-radius: 1.5rem;

    box-shadow: var(--sp-shadow-md);

    overflow: hidden;
}


/* =========================================================
   COMPARISON HEADER
========================================================= */

.seo-comparison-header {
    position: relative;

    padding: 1.75rem 2rem;

    background:
        radial-gradient(circle at 88% 20%,
            rgba(79, 70, 229, .30),
            transparent 42%),
        radial-gradient(circle at 15% 100%,
            rgba(13, 148, 136, .22),
            transparent 42%),
        linear-gradient(135deg,
            #102c46 0%,
            #173b5b 100%);

    overflow: hidden;
}

.seo-comparison-header::after {
    content: "";

    position: absolute;

    right: -60px;
    bottom: -90px;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    border: 1px solid rgba(99, 102, 241, .32);

    box-shadow:
        0 0 0 30px rgba(255, 255, 255, .02),
        0 0 0 60px rgba(255, 255, 255, .012);

    pointer-events: none;
}

.seo-comparison-header-content {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1.5rem;
}

.seo-comparison-eyebrow {
    display: inline-flex;
    align-items: center;

    padding: .38rem .8rem;
    margin-bottom: .65rem;

    background: rgba(99, 102, 241, .18);

    border: 1px solid rgba(99, 102, 241, .38);
    border-radius: 999px;

    color: #c7d2fe;

    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.seo-comparison-title {
    color: #ffffff;

    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.025em;

    margin: 0 0 .5rem;
}

.seo-comparison-description {
    max-width: 640px;

    color: rgba(255, 255, 255, .7);

    font-size: .86rem;
    line-height: 1.7;

    margin: 0;
}

.seo-monthly-label {
    display: inline-flex;
    align-items: center;

    gap: .5rem;

    flex-shrink: 0;

    padding: .65rem 1rem;

    background: rgba(255, 255, 255, .08);

    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: .75rem;

    color: rgba(255, 255, 255, .85);

    font-size: .72rem;
    font-weight: 700;
}

.seo-monthly-label i {
    color: #a5b4fc;
    font-size: .8rem;
}


/* =========================================================
   TABLE SCROLL CONTAINER
========================================================= */

.seo-comparison-scroll {
    position: relative;

    width: 100%;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;

    scrollbar-width: thin;
    scrollbar-color: rgba(94, 163, 216, .45) transparent;

    scroll-behavior: smooth;
}

.seo-comparison-scroll::-webkit-scrollbar {
    height: 7px;
}

.seo-comparison-scroll::-webkit-scrollbar-track {
    background: #f4f8fb;
}

.seo-comparison-scroll::-webkit-scrollbar-thumb {
    background: rgba(94, 163, 216, .4);

    border-radius: 99px;
}

.seo-comparison-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(94, 163, 216, .65);
}


/* =========================================================
   TABLE BASE
========================================================= */

.seo-comparison-table {
    width: 100%;
    min-width: 1080px;

    margin: 0;

    border-collapse: separate;
    border-spacing: 0;

    table-layout: auto;
}

.seo-comparison-table th,
.seo-comparison-table td {
    border-right: 1px solid var(--sp-border-soft);
    border-bottom: 1px solid var(--sp-border-soft);

    text-align: center;
    vertical-align: middle;

    overflow-wrap: break-word;
    word-break: normal;
}

.seo-comparison-table th:last-child,
.seo-comparison-table td:last-child {
    border-right: 0;
}

.seo-comparison-table tbody tr:last-child td {
    border-bottom: 0;
}


/* =========================================================
   STICKY FEATURE COLUMN
========================================================= */

.seo-comparison-table thead .seo-feature-column {
    position: sticky;

    left: 0;

    z-index: 10;

    min-width: 230px;
    width: 230px;

    background: #f4f8fb !important;

    color: var(--sp-navy) !important;

    text-align: left !important;

    padding-left: 1.5rem !important;

    box-shadow:
        inset 0 5px 0 var(--sp-navy),
        8px 0 14px -14px rgba(16, 44, 70, .45);
}


/* =========================================================
   TABLE HEADERS
========================================================= */

.seo-comparison-table thead th {
    position: relative;

    padding: 1.1rem .9rem;

    background: #f7fbfe;

    color: var(--sp-navy);

    font-size: .82rem;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: -.005em;
}

.seo-starter-column {
    background:
        linear-gradient(180deg,
            #e6faf6,
            #f7fbfe) !important;

    color: #0f766e !important;

    box-shadow:
        inset 0 5px 0 #0d9488;
}

.seo-featured-column-head {
    position: relative;

    background:
        linear-gradient(180deg,
            #e0e7ff,
            #eef2ff) !important;

    color: #4338ca !important;

    box-shadow:
        inset 0 5px 0 #4f46e5;

    padding-top: 2rem !important;
}

.seo-market-column {
    background:
        linear-gradient(180deg,
            #fef3c7,
            #fffbeb) !important;

    color: #b45309 !important;

    box-shadow:
        inset 0 5px 0 #d97706;
}

.seo-enterprise-column {
    background:
        linear-gradient(180deg,
            #e2e8f0,
            #f1f5f9) !important;

    color: #17324d !important;

    box-shadow:
        inset 0 5px 0 #17324d;
}


/* =========================================================
   RECOMMENDED BADGE IN TABLE
========================================================= */

.seo-table-recommended {
    position: absolute;

    top: .55rem;
    right: .55rem;

    display: inline-flex;
    align-items: center;

    gap: .28rem;

    padding: .3rem .6rem;

    background:
        linear-gradient(135deg,
            #4f46e5,
            #6366f1);

    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;

    color: #ffffff;

    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .08em;

    text-transform: uppercase;

    white-space: nowrap;
    line-height: 1;

    box-shadow:
        0 6px 14px rgba(79, 70, 229, .35);

    z-index: 2;
}

.seo-table-recommended i {
    color: #fde68a;
    font-size: .5rem;
}

.seo-table-plan-name {
    display: block;

    font-size: .84rem;
    font-weight: 800;

    color: #4338ca;
}


/* =========================================================
   TABLE BODY
========================================================= */

.seo-comparison-table tbody td {
    min-width: 175px;

    padding: .95rem .9rem;

    background: var(--sp-white);

    color: var(--sp-text);

    font-size: .83rem;
    line-height: 1.55;
}

.seo-comparison-table tbody tr:nth-child(even) td {
    background: #fcfdfe;
}


/* Sticky first column */

.seo-comparison-table tbody td:first-child {
    position: sticky;

    left: 0;

    z-index: 6;

    min-width: 230px;
    width: 230px;

    background: #f9fbfd !important;

    color: var(--sp-navy);

    font-weight: 700;

    text-align: left;

    padding-left: 1.5rem;

    box-shadow:
        8px 0 14px -14px rgba(16, 44, 70, .40);
}


/* Keep sticky cells solid on alternate rows */

.seo-comparison-table tbody tr:nth-child(even) td:first-child {
    background: #f9fbfd !important;
}


/* Featured column */

.seo-comparison-table tbody td.seo-featured-column {
    background: #f4f6ff !important;

    color: #4338ca;

    font-weight: 600;
}


/* Row hover */

.seo-comparison-table tbody tr:hover td {
    background: #f5faff;
}

.seo-comparison-table tbody tr:hover td:first-child {
    background: #eff5fb !important;
}

.seo-comparison-table tbody tr:hover td.seo-featured-column {
    background: #eaeeff !important;
}


/* =========================================================
   PRICE ROW
========================================================= */

.seo-comparison-table tbody tr:first-child td {
    background: #f7fbfe;
}

.seo-comparison-table tbody tr:first-child td:first-child {
    background: #f4f8fb !important;
}

.seo-comparison-table tbody tr:first-child td strong {
    font-size: .9rem;
    font-weight: 800;
}

.seo-comparison-table tbody tr:first-child td:nth-child(2) strong {
    color: #0f766e;
}

.seo-comparison-table tbody tr:first-child td:nth-child(3) strong {
    color: #4338ca;
}

.seo-comparison-table tbody tr:first-child td:nth-child(4) strong {
    color: #b45309;
}

.seo-comparison-table tbody tr:first-child td:nth-child(5) strong {
    color: #17324d;
}


/* =========================================================
   CHECK / X
========================================================= */

.seo-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 1.55rem;
    height: 1.55rem;

    border-radius: 50%;

    background: #e6faf6;
    color: #0f766e;

    font-size: .68rem;
    line-height: 1;
}

.seo-featured-column .seo-check {
    background: #e0e7ff;
    color: #4338ca;
}

.seo-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 1.55rem;
    height: 1.55rem;

    border-radius: 50%;

    background: #fef2f2;
    color: #dc2626;

    font-size: .68rem;
    line-height: 1;
}


/* =========================================================
   BEST SUITABLE ROW
========================================================= */

.seo-comparison-table tbody tr.seo-best-row td {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;

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

.seo-comparison-table tbody tr.seo-best-row td:first-child {
    color: var(--sp-navy);

    background: #f9fbfd !important;
}

.seo-best-starter {
    background: #f0fdfa !important;
    color: #0f766e;
}

.seo-best-pro {
    background: #eef2ff !important;
    color: #4338ca;
}

.seo-best-market {
    background: #fffbeb !important;
    color: #b45309;
}

.seo-best-enterprise {
    background: #f1f5f9 !important;
    color: #17324d;
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.seo-pricing-cta {
    position: relative;

    margin-top: 3rem;

    border-radius: 1.5rem;

    background:
        radial-gradient(circle at 12% 100%,
            rgba(13, 148, 136, .28),
            transparent 40%),
        radial-gradient(circle at 85% 15%,
            rgba(99, 102, 241, .30),
            transparent 42%),
        linear-gradient(135deg,
            #0d263d 0%,
            #153b5b 100%);

    box-shadow: var(--sp-shadow-lg);

    overflow: hidden;
}

.seo-pricing-cta::after {
    content: "";

    position: absolute;

    right: -120px;
    bottom: -150px;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    border: 1px solid rgba(165, 180, 252, .18);

    box-shadow:
        0 0 0 35px rgba(255, 255, 255, .025),
        0 0 0 70px rgba(255, 255, 255, .018);

    pointer-events: none;
}

.seo-pricing-cta-inner {
    position: relative;
    z-index: 2;

    padding: 2.5rem 2.75rem;
}

.seo-pricing-cta-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: .5rem;

    color: #a5b4fc;

    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .15em;

    text-transform: uppercase;

    margin-bottom: .75rem;
}

.seo-pricing-cta-eyebrow i {
    color: #c7d2fe;
}

.seo-pricing-cta-title {
    color: #ffffff;

    font-size: clamp(1.55rem, 2.8vw, 2.1rem);
    line-height: 1.2;

    font-weight: 600;
    letter-spacing: -.025em;

    margin: 0 0 .9rem;
}

.seo-pricing-cta-title .highlight {
    background:
        linear-gradient(135deg,
            #a5b4fc,
            #5eead4);

    font-size: clamp(1.55rem, 2.8vw, 2.1rem);

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.seo-pricing-cta-text {
    max-width: 640px;

    color: rgba(255, 255, 255, .72);

    font-size: .94rem;
    line-height: 1.75;

    margin: 0;
}

.seo-pricing-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: .55rem;

    min-height: 3.15rem;

    padding: .85rem 1.4rem;

    background:
        linear-gradient(135deg,
            #4f46e5,
            #6366f1);

    border-radius: .9rem;

    color: #ffffff;

    font-size: .86rem;
    font-weight: 800;

    text-decoration: none;

    box-shadow:
        0 15px 32px rgba(79, 70, 229, .42);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.seo-pricing-cta-button:hover {
    color: #ffffff;

    transform: translateY(-2px);

    filter: brightness(1.05);

    box-shadow:
        0 20px 40px rgba(79, 70, 229, .5);
}

.seo-pricing-cta-button i {
    font-size: .78rem;

    transition: transform .2s ease;
}

.seo-pricing-cta-button:hover i {
    transform: translateX(3px);
}

.seo-pricing-cta-meta {
    display: inline-flex;
    align-items: center;

    gap: .45rem;

    margin-top: .9rem;

    color: rgba(255, 255, 255, .6);

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

.seo-pricing-cta-meta i {
    color: #5eead4;
    font-size: .66rem;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 991.98px) {

    .seo-pricing-page {
        padding: 2.75rem 0 3.25rem;
    }

    .seo-pricing-intro {
        margin-bottom: 2.5rem;
    }

    .seo-plan-description {
        min-height: auto;
    }


    /* Comparison header */

    .seo-comparison-header-content {
        flex-direction: column;
        align-items: flex-start;

        gap: 1.1rem;
    }

    .seo-comparison-header {
        padding: 1.5rem;
    }


    /* CTA */

    .seo-pricing-cta-inner {
        padding: 2rem 1.75rem;
    }

    .seo-pricing-cta-action {
        text-align: left;
    }


    /* Table */

    .seo-comparison-table {
        min-width: 980px;
    }

    .seo-comparison-table thead th {
        padding: .95rem .75rem;

        font-size: .79rem;
    }

    .seo-comparison-table tbody td {
        padding: .82rem .72rem;

        font-size: .79rem;
    }

    .seo-comparison-table thead .seo-feature-column,
    .seo-comparison-table tbody td:first-child {
        min-width: 205px;
        width: 205px;
        max-width: 205px;
    }

    .seo-table-recommended {
        top: .45rem;
        right: .45rem;

        padding: .27rem .52rem;

        font-size: .5rem;
    }

    .seo-table-plan-name {
        font-size: .8rem;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .seo-pricing-page {
        padding: 2.25rem 0 2.75rem;
    }

    .seo-pricing-title {
        font-size: 1.85rem;
    }

    .seo-pricing-description {
        font-size: .96rem;
    }

    .seo-pricing-trust {
        gap: 1rem;

        flex-direction: column;
        align-items: center;
    }


    /* Comparison */

    .seo-comparison-wrapper {
        border-radius: 1.1rem;
    }

    .seo-comparison-header {
        padding: 1.2rem 1.1rem;
    }

    .seo-comparison-title {
        font-size: 1.28rem;
    }

    .seo-comparison-description {
        max-width: 100%;

        font-size: .82rem;
    }

    .seo-monthly-label {
        width: 100%;

        justify-content: center;

        padding: .6rem .8rem;
    }


    /* Mobile scroll */

    .seo-comparison-scroll {
        width: 100%;

        margin: 0;
        padding-bottom: .35rem;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
    }


    /* Smaller overall width */

    .seo-comparison-table {
        min-width: 900px;
    }


    /* Table headers */

    .seo-comparison-table thead th {
        padding: .82rem .6rem;

        font-size: .74rem;
        line-height: 1.35;
    }


    /* Table body */

    .seo-comparison-table tbody td {
        min-width: 170px;

        padding: .72rem .62rem;

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


    /* Sticky feature column */

    .seo-comparison-table thead .seo-feature-column,
    .seo-comparison-table tbody td:first-child {
        min-width: 175px;
        width: 175px;
        max-width: 175px;
    }

    .seo-comparison-table thead .seo-feature-column {
        padding-left: 1rem !important;
    }

    .seo-comparison-table tbody td:first-child {
        padding-left: 1rem;
        padding-right: .7rem;
    }


    /* Price */

    .seo-comparison-table tbody tr:first-child td strong {
        font-size: .8rem;

        white-space: nowrap;
    }


    /* Best suitable row */

    .seo-comparison-table tbody tr.seo-best-row td {
        padding-top: 1rem;
        padding-bottom: 1rem;

        font-size: .71rem;
        line-height: 1.55;
    }


    /* Recommended badge */

    .seo-featured-column-head {
        padding-top: 1.8rem !important;
    }

    .seo-table-recommended {
        top: .4rem;
        right: .4rem;

        padding: .24rem .42rem;

        font-size: .46rem;
        letter-spacing: .06em;
    }

    .seo-table-recommended i {
        font-size: .42rem;
    }

    .seo-table-plan-name {
        font-size: .76rem;
    }


    /* Check / X */

    .seo-check,
    .seo-x {
        width: 1.4rem;
        height: 1.4rem;

        font-size: .62rem;
    }


    /* CTA */

    .seo-pricing-cta {
        border-radius: 1.1rem;
    }

    .seo-pricing-cta-inner {
        padding: 1.75rem 1.4rem;
    }

    .seo-pricing-cta-button {
        width: 100%;
    }
}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .seo-pricing-title {
        font-size: 1.65rem;
    }


    /* Plan cards */

    .seo-plan-body {
        padding: 1.5rem 1.35rem 1.65rem;
    }

    .seo-plan-icon {
        width: 2.95rem;
        height: 2.95rem;

        border-radius: .9rem;

        font-size: 1.05rem;
    }

    .seo-plan-name {
        font-size: 1.22rem;
    }


    /* CTA */

    .seo-pricing-cta-inner {
        padding: 1.5rem 1.2rem;
    }

    .seo-pricing-cta-title {
        font-size: 1.45rem;
    }


    /* Smaller table */

    .seo-comparison-table {
        min-width: 860px;
    }

    .seo-comparison-table thead th {
        padding: .72rem .5rem;

        font-size: .7rem;
    }

    .seo-comparison-table tbody td {
        min-width: 165px;

        padding: .68rem .52rem;

        font-size: .71rem;

        line-height: 1.45;
    }


    /* Narrower sticky feature column */

    .seo-comparison-table thead .seo-feature-column,
    .seo-comparison-table tbody td:first-child {
        min-width: 160px;
        width: 160px;
        max-width: 160px;
    }

    .seo-comparison-table thead .seo-feature-column {
        padding-left: .85rem !important;
    }

    .seo-comparison-table tbody td:first-child {
        padding-left: .85rem;
        padding-right: .55rem;
    }


    /* Price row */

    .seo-comparison-table tbody tr:first-child td strong {
        font-size: .76rem;
    }


    /* Best suitable row */

    .seo-comparison-table tbody tr.seo-best-row td {
        font-size: .67rem;
        line-height: 1.5;
    }


    /* Recommended badge */

    .seo-table-recommended {
        top: .32rem;
        right: .3rem;

        padding: .22rem .35rem;

        font-size: .41rem;
    }

    .seo-table-plan-name {
        font-size: .72rem;
    }
}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .seo-plan-card,
    .seo-plan-button,
    .seo-plan-button i,
    .seo-pricing-cta-button,
    .seo-pricing-cta-button i,
    .seo-comparison-scroll {
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .seo-plan-card:hover {
        transform: none;
    }
}

.popup-hidden {
    display: none;
}

/* Blur only pricing details */
.seo-plan-price {
    filter: blur(6px);
    user-select: none;
    transition: filter 0.3s ease;
}