/* ==========================================================
   RESET
========================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background:
        radial-gradient(
            circle at 50% -120px,
            rgba(31, 242, 113, .045),
            transparent 520px
        ),
        #040b10;
    color: #eef4f6;
    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}


/* ==========================================================
   GLOBAL
========================================================== */

.pricing-container {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
}

.pricing-eyebrow {
    display: inline-block;
    color: #1ee771;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}


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

.pricing-header {
    position: relative;
    z-index: 20;
    border-bottom: 1px solid #12202a;
    background: rgba(4, 11, 16, .88);
    backdrop-filter: blur(14px);
}

.pricing-header-inner {
    display: flex;
    min-height: 74px;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.pricing-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #eef5f7;
    font-size: 14px;
    font-weight: 850;
    text-decoration: none;
}

.pricing-brand-mark {
    display: flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid #1d5030;
    border-radius: 9px;
    background: #0a2214;
    color: #24e777;
    font-size: 10px;
    font-weight: 950;
}

.pricing-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pricing-header-back,
.pricing-header-login {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.pricing-header-back {
    padding: 0 6px;
    color: #74828d;
}

.pricing-header-back:hover {
    color: #c9d3d8;
}

.pricing-header-login {
    padding: 0 15px;
    border: 1px solid #283741;
    background: #0c151c;
    color: #cbd5d9;
}

.pricing-header-login:hover {
    border-color: #3a4b56;
    background: #101b22;
}


/* ==========================================================
   HERO
========================================================== */

.pricing-hero {
    padding: 105px 0 82px;
    text-align: center;
}

.pricing-hero h1 {
    max-width: 850px;
    margin: 17px auto 25px;
    color: #f2f6f7;
    font-size: clamp(45px, 6.3vw, 82px);
    font-weight: 900;
    letter-spacing: -.065em;
    line-height: .98;
}

.pricing-hero h1 span {
    display: block;
    color: #20e977;
}

.pricing-hero p {
    max-width: 700px;
    margin: 0 auto;
    color: #8d9aa4;
    font-size: 16px;
    line-height: 1.75;
}


/* ==========================================================
   OVERVIEW
========================================================== */

.pricing-overview {
    padding: 25px 0 110px;
}

.pricing-section-heading-center {
    max-width: 750px;
    margin: 0 auto 36px;
    text-align: center;
}

.pricing-section-heading h2 {
    margin: 0 0 13px;
    color: #eef3f5;
    font-size: clamp(31px, 4vw, 48px);
    font-weight: 900;
    letter-spacing: -.045em;
}

.pricing-section-heading p {
    margin: 0;
    color: #89959e;
    font-size: 15px;
    line-height: 1.7;
}


/* ==========================================================
   TAX BANNER
========================================================== */

.pricing-tax-banner {
    display: flex;
    max-width: 820px;
    align-items: center;
    gap: 15px;
    margin: 0 auto 40px;
    padding: 17px 20px;
    border: 1px solid #195c35;
    border-radius: 12px;
    background:
        linear-gradient(
            90deg,
            rgba(32, 233, 119, .055),
            rgba(32, 233, 119, .015)
        ),
        #08140f;
}

.pricing-tax-icon {
    display: flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid #257344;
    border-radius: 50%;
    background: rgba(32, 233, 119, .08);
    color: #25e979;
    font-size: 12px;
    font-weight: 950;
}

.pricing-tax-banner strong {
    display: block;
    margin-bottom: 4px;
    color: #cce4d5;
    font-size: 12px;
    font-weight: 850;
}

.pricing-tax-banner p {
    margin: 0;
    color: #779084;
    font-size: 10px;
    line-height: 1.6;
}


/* ==========================================================
   OVERVIEW GRID
========================================================== */

.pricing-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.pricing-overview-card {
    position: relative;
    display: flex;
    min-height: 630px;
    flex-direction: column;
    padding: 30px 28px 28px;
    border: 1px solid #25343e;
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .01),
            transparent 45%
        ),
        #08131b;
}

.pricing-overview-card-popular {
    border-color: #087d3f;
    background:
        radial-gradient(
            circle at 70% 0%,
            rgba(31, 231, 113, .07),
            transparent 280px
        ),
        #071817;
    box-shadow:
        0 30px 70px rgba(0, 0, 0, .18);
}

.pricing-plan-number {
    margin-bottom: 20px;
    color: #53616c;
    font-size: 10px;
}

.pricing-overview-card h3 {
    margin: 0 0 12px;
    color: #f1f4f5;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -.03em;
}

.pricing-plan-kicker {
    display: block;
    margin-bottom: 17px;
    color: #1eea73;
    font-size: 13px;
}

.pricing-plan-description {
    min-height: 74px;
    margin: 0;
    color: #83909a;
    font-size: 13px;
    line-height: 1.75;
}


/* ==========================================================
   BADGES
========================================================== */

.pricing-card-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pricing-card-badge-popular {
    background: #27eb7b;
    color: #031008;
}

.pricing-card-badge-pro {
    border: 1px solid #525394;
    background: #28294d;
    color: #d9d9ff;
}


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

.pricing-overview-features {
    display: grid;
    gap: 0;
    margin: 34px 0 30px;
    padding: 0;
    border-top: 1px solid #1c2a33;
    list-style: none;
}

.pricing-overview-features li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 12px 0;
    border-bottom: 1px solid #1c2a33;
    color: #9ba6ad;
    font-size: 11px;
    line-height: 1.45;
}

.pricing-overview-features li span {
    color: #a9bbc4;
}

.pricing-explore-button {
    display: flex;
    width: 100%;
    min-height: 47px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
    border: 1px solid #31414c;
    border-radius: 8px;
    background: #101b23;
    color: #f3f6f7;
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease;
}

.pricing-explore-button:hover {
    transform: translateY(-1px);
    border-color: #455966;
    background: #14222c;
}

.pricing-explore-button-primary {
    border-color: #23dc70;
    background: #20e873;
    color: #041108;
}

.pricing-explore-button-primary:hover {
    border-color: #36ef86;
    background: #36ef86;
}


/* ==========================================================
   DETAILS
========================================================== */

.pricing-details {
    border-top: 1px solid #132029;
}

.pricing-plan-detail {
    scroll-margin-top: 28px;
    padding: 100px 0;
    border-bottom: 1px solid #132029;
}

.pricing-plan-detail-card {
    display: grid;
    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(330px, .6fr);
    overflow: hidden;
    border: 1px solid #24323b;
    border-radius: 18px;
    background: #081119;
}

.pricing-plan-detail-card-popular {
    border-color: #087a3d;
    box-shadow:
        0 35px 90px rgba(0, 0, 0, .18);
}


/* ==========================================================
   DETAIL COPY
========================================================== */

.pricing-plan-detail-copy {
    padding: 48px;
}

.pricing-detail-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.pricing-detail-number {
    color: #485863;
    font-size: 10px;
}

.pricing-detail-eyebrow {
    color: #1eea73;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.pricing-detail-badge {
    display: inline-flex;
    min-height: 23px;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    background: #24e978;
    color: #031008;
    font-size: 7px;
    font-weight: 950;
    text-transform: uppercase;
}

.pricing-plan-detail-copy > h2 {
    margin: 0 0 12px;
    color: #f3f6f7;
    font-size: 48px;
    font-weight: 900;
    letter-spacing: -.045em;
}

.pricing-plan-detail-copy > h3 {
    max-width: 620px;
    margin: 0 0 18px;
    color: #d9e0e3;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.35;
}

.pricing-detail-description {
    max-width: 690px;
    margin: 0;
    color: #85929b;
    font-size: 14px;
    line-height: 1.75;
}


/* ==========================================================
   AI MODEL
========================================================== */

.pricing-ai-model {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 21px;
    padding: 8px 11px;
    border: 1px solid #1f3829;
    border-radius: 8px;
    background: rgba(30, 234, 115, .025);
}

.pricing-ai-model span {
    display: inline-flex;
    min-height: 21px;
    align-items: center;
    padding: 0 6px;
    border-radius: 5px;
    background: rgba(31, 234, 115, .09);
    color: #23e977;
    font-size: 8px;
    font-weight: 950;
}

.pricing-ai-model strong {
    color: #91a59a;
    font-size: 10px;
}


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

.pricing-detail-features {
    margin-top: 38px;
    padding-top: 28px;
    border-top: 1px solid #1c2931;
}

.pricing-detail-features-title {
    display: block;
    margin-bottom: 17px;
    color: #66757f;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pricing-detail-features ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pricing-detail-features li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #9ca8af;
    font-size: 11px;
    line-height: 1.45;
}

.pricing-feature-check {
    display: flex;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    align-items: center;
    justify-content: center;
    border: 1px solid #175f36;
    border-radius: 50%;
    background: rgba(31, 234, 115, .04);
    color: #21e875;
    font-size: 8px;
}


/* ==========================================================
   PURCHASE
========================================================== */

.pricing-plan-purchase {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px;
    border-left: 1px solid #1b2932;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .012),
            transparent 35%
        ),
        #071017;
}

.pricing-cycle {
    padding: 20px;
    border: 1px solid #26353e;
    border-radius: 11px;
    background: #0b161e;
}

.pricing-cycle + .pricing-cycle {
    margin-top: 12px;
}

.pricing-cycle-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pricing-cycle-label {
    display: block;
    margin-bottom: 9px;
    color: #75838c;
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.pricing-cycle-label-row .pricing-cycle-label {
    margin-bottom: 0;
}

.pricing-tax-pill {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 0 8px;
    border: 1px solid #185c34;
    border-radius: 999px;
    background: rgba(31, 234, 115, .05);
    color: #4fd789;
    font-size: 7px;
    font-weight: 900;
    white-space: nowrap;
}

.pricing-cycle-price {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 10px;
}

.pricing-cycle-price strong {
    color: #e7edef;
    font-size: 29px;
    font-weight: 900;
    letter-spacing: -.04em;
}

.pricing-cycle-price span {
    color: #67757e;
    font-size: 10px;
}

.pricing-tax-inline {
    margin: 9px 0 0;
    color: #5e9270;
    font-size: 9px;
}


/* ==========================================================
   ANNUAL
========================================================== */

.pricing-cycle-annual {
    position: relative;
    border-color: #14703a;
    background:
        radial-gradient(
            circle at 95% 0%,
            rgba(31, 234, 115, .08),
            transparent 170px
        ),
        #091a14;
}

.pricing-cycle-annual-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pricing-cycle-annual-top .pricing-cycle-label {
    margin-bottom: 0;
}

.pricing-best-value {
    display: inline-flex;
    min-height: 23px;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    background: #25e879;
    color: #031008;
    font-size: 7px;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pricing-cycle-price-annual {
    margin-top: 11px;
}

.pricing-cycle-price-annual strong {
    color: #32ec83;
    font-size: 34px;
}

.pricing-annual-tax {
    display: inline-flex;
    margin-top: 9px;
    padding: 5px 8px;
    border: 1px solid #1a6037;
    border-radius: 6px;
    background: rgba(31, 234, 115, .035);
    color: #53cf83;
    font-size: 8px;
    font-weight: 800;
}

.pricing-annual-equivalent {
    margin: 11px 0 0;
    color: #71827a;
    font-size: 10px;
    line-height: 1.5;
}

.pricing-annual-equivalent strong {
    color: #9ab6a6;
}

.pricing-saving {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    padding: 7px 9px;
    border: 1px solid #1c6138;
    border-radius: 7px;
    background: rgba(31, 234, 115, .045);
    color: #6ea982;
    font-size: 9px;
}

.pricing-saving strong {
    color: #31eb81;
}


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

.pricing-choose-button {
    display: flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 19px;
    border: 1px solid #ff726b;
    border-radius: 9px;
    background: #ff6e67;
    color: #170505;
    font-size: 12px;
    font-weight: 950;
    text-decoration: none;
    transition:
        transform .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.pricing-choose-button:hover {
    transform: translateY(-1px);
    background: #ff817a;
    box-shadow:
        0 14px 30px rgba(255, 110, 103, .12);
}

.pricing-checkout-note {
    margin: 10px 8px 0;
    color: #52616a;
    font-size: 9px;
    line-height: 1.5;
    text-align: center;
}

.pricing-checkout-tax-note {
    margin: 7px 8px 0;
    color: #4f9469;
    font-size: 9px;
    font-weight: 750;
    line-height: 1.5;
    text-align: center;
}


/* ==========================================================
   MARKETING BLOCK
========================================================== */

.pricing-marketing-block {
    margin-top: 24px;
    padding: 44px;
    border: 1px solid #173b27;
    border-radius: 17px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(31, 234, 115, .055),
            transparent 320px
        ),
        #07120e;
}

.pricing-marketing-block-pro {
    border-color: #303254;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(105, 103, 255, .07),
            transparent 350px
        ),
        #0a0f19;
}

.pricing-marketing-heading {
    max-width: 730px;
}

.pricing-marketing-heading h2 {
    margin: 12px 0 14px;
    color: #eff5f2;
    font-size: 37px;
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: 1.08;
}

.pricing-marketing-heading p {
    margin: 0;
    color: #829289;
    font-size: 14px;
    line-height: 1.75;
}


/* ==========================================================
   QUESTIONS
========================================================== */

.pricing-question-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-top: 30px;
}

.pricing-question-card {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 72px;
    padding: 15px 17px;
    border: 1px solid #1b3928;
    border-radius: 10px;
    background: rgba(0, 0, 0, .14);
}

.pricing-question-card > span {
    display: flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid #1c6739;
    border-radius: 8px;
    color: #26e97a;
    font-size: 10px;
    font-weight: 900;
}

.pricing-question-card p {
    margin: 0;
    color: #a4b0aa;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.5;
}

.pricing-question-card-pro {
    border-color: #2c304a;
}

.pricing-question-card-pro > span {
    border-color: #484d80;
    color: #999cff;
}


/* ==========================================================
   AI INSIGHT EXAMPLE
========================================================== */

.pricing-insight-card {
    margin-top: 20px;
    padding: 26px;
    border: 1px solid #1b5532;
    border-radius: 13px;
    background:
        linear-gradient(
            135deg,
            rgba(31, 234, 115, .035),
            transparent 55%
        ),
        #08140f;
}

.pricing-insight-card-pro {
    border-color: #3a3d66;
    background:
        linear-gradient(
            135deg,
            rgba(113, 109, 255, .055),
            transparent 55%
        ),
        #0b101d;
}

.pricing-insight-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: #62746a;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pricing-insight-tag {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 0 7px;
    border-radius: 5px;
    background: #1de672;
    color: #041008;
    font-size: 7px;
    font-weight: 950;
}

.pricing-insight-card-pro .pricing-insight-tag {
    background: #7478f5;
    color: #080817;
}

.pricing-insight-card h3 {
    margin: 0 0 13px;
    color: #dce6e0;
    font-size: 17px;
    font-weight: 850;
}

.pricing-insight-card > p {
    max-width: 850px;
    margin: 7px 0;
    color: #84958b;
    font-size: 12px;
    line-height: 1.7;
}

.pricing-insight-action {
    margin-top: 20px;
    padding: 14px 16px;
    border-left: 2px solid #23e978;
    background: rgba(31, 234, 115, .025);
}

.pricing-insight-card-pro .pricing-insight-action {
    border-left-color: #777af5;
    background: rgba(119, 122, 245, .035);
}

.pricing-insight-action strong {
    display: block;
    margin-bottom: 5px;
    color: #42d67b;
    font-size: 9px;
    text-transform: uppercase;
}

.pricing-insight-card-pro .pricing-insight-action strong {
    color: #a3a5ff;
}

.pricing-insight-action p {
    margin: 0;
    color: #819087;
    font-size: 11px;
    line-height: 1.6;
}


/* ==========================================================
   PRO BRIDGE
========================================================== */

.pricing-pro-bridge {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 30px;
    margin: 24px 0;
    padding: 29px 32px;
    border: 1px solid #36395e;
    border-radius: 14px;
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(105, 103, 255, .07),
            transparent 320px
        ),
        #0b101a;
}

.pricing-pro-bridge > span {
    color: #8589e8;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.pricing-pro-bridge div {
    display: grid;
    gap: 7px;
}

.pricing-pro-bridge p,
.pricing-pro-bridge strong {
    margin: 0;
}

.pricing-pro-bridge p {
    color: #717d86;
    font-size: 17px;
    font-weight: 700;
}

.pricing-pro-bridge strong {
    color: #d9daff;
    font-size: 23px;
    font-weight: 900;
    letter-spacing: -.03em;
}


/* ==========================================================
   PRO CAPABILITIES
========================================================== */

.pricing-capability-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-top: 20px;
}

.pricing-capability-card {
    padding: 22px;
    border: 1px solid #2d304e;
    border-radius: 11px;
    background: rgba(0, 0, 0, .15);
}

.pricing-capability-number {
    display: block;
    margin-bottom: 17px;
    color: #555982;
    font-size: 9px;
    font-weight: 900;
}

.pricing-capability-card h3 {
    margin: 0 0 9px;
    color: #d5d7ee;
    font-size: 14px;
    font-weight: 850;
}

.pricing-capability-card p {
    margin: 0;
    color: #777f91;
    font-size: 10px;
    line-height: 1.65;
}


/* ==========================================================
   REVIEWS
========================================================== */

.pricing-reviews {
    padding: 100px 0;
    border-bottom: 1px solid #132029;
    background: #050d12;
}

.pricing-review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 900px;
    margin: 0 auto;
}

.pricing-review-card {
    position: relative;
    padding: 28px;
    border: 1px solid #25343e;
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .012),
            transparent
        ),
        #09131a;
}

.pricing-review-stars {
    margin-bottom: 18px;
    color: #25e978;
    font-size: 11px;
    letter-spacing: .12em;
}

.pricing-review-card blockquote {
    min-height: 100px;
    margin: 0;
    color: #c1cbcf;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.75;
}

.pricing-review-person {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #1d2930;
}

.pricing-review-avatar {
    display: flex;
    width: 37px;
    height: 37px;
    align-items: center;
    justify-content: center;
    border: 1px solid #1c6a3a;
    border-radius: 50%;
    background: #0a2013;
    color: #28e97b;
    font-size: 12px;
    font-weight: 900;
}

.pricing-review-person strong {
    display: block;
    margin-bottom: 4px;
    color: #e2e8ea;
    font-size: 11px;
}

.pricing-review-person span {
    display: block;
    color: #687780;
    font-size: 9px;
}

.pricing-review-plan {
    position: absolute;
    right: 22px;
    bottom: 26px;
    display: inline-flex;
    min-height: 23px;
    align-items: center;
    padding: 0 8px;
    border: 1px solid #294336;
    border-radius: 999px;
    color: #74a788;
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
}


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

.pricing-comparison {
    padding: 100px 0;
    background: #050d12;
}

.pricing-comparison-heading {
    max-width: 650px;
    margin-bottom: 34px;
}

.pricing-comparison-heading h2 {
    margin: 0 0 11px;
    color: #edf3f5;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: -.045em;
}

.pricing-comparison-heading p {
    margin: 0;
    color: #83909a;
    font-size: 14px;
    line-height: 1.7;
}

.pricing-comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.pricing-comparison-item {
    display: block;
    padding: 22px;
    border: 1px solid #21303a;
    border-radius: 11px;
    background: #09131a;
    text-decoration: none;
    transition:
        transform .16s ease,
        border-color .16s ease;
}

.pricing-comparison-item:hover {
    transform: translateY(-2px);
    border-color: #344650;
}

.pricing-comparison-item-featured {
    border-color: #106c39;
    background: #091814;
}

.pricing-comparison-item > span {
    display: block;
    margin-bottom: 16px;
    color: #53626c;
    font-size: 9px;
}

.pricing-comparison-item strong {
    color: #edf2f4;
    font-size: 18px;
}

.pricing-comparison-item p {
    margin: 7px 0 0;
    color: #75838c;
    font-size: 11px;
}


/* ==========================================================
   FINAL CTA
========================================================== */

.pricing-final {
    padding: 0 0 100px;
    background: #050d12;
}

.pricing-final-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 46px;
    border: 1px solid #164d2d;
    border-radius: 16px;
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(31, 234, 115, .08),
            transparent 300px
        ),
        #081510;
}

.pricing-final-card h2 {
    max-width: 700px;
    margin: 12px 0 13px;
    color: #eff5f1;
    font-size: 35px;
    font-weight: 900;
    letter-spacing: -.045em;
}

.pricing-final-card p {
    max-width: 700px;
    margin: 0;
    color: #779084;
    font-size: 13px;
    line-height: 1.7;
}

.pricing-final-button {
    display: inline-flex;
    min-height: 48px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 19px;
    border: 1px solid #24e978;
    border-radius: 8px;
    background: #21e875;
    color: #041108;
    font-size: 11px;
    font-weight: 950;
    text-decoration: none;
}


/* ==========================================================
   FOOTER
========================================================== */

.pricing-footer {
    border-top: 1px solid #132029;
    background: #03090d;
}

.pricing-footer-inner {
    display: flex;
    min-height: 88px;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.pricing-footer-inner > span {
    color: #52616a;
    font-size: 10px;
}

.pricing-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.pricing-footer a {
    color: #687780;
    font-size: 10px;
    text-decoration: none;
}

.pricing-footer a:hover {
    color: #b9c4ca;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 980px) {

    .pricing-overview-grid {
        grid-template-columns: 1fr;
    }

    .pricing-overview-card {
        min-height: 0;
    }

    .pricing-plan-description {
        min-height: 0;
    }

    .pricing-plan-detail-card {
        grid-template-columns: 1fr;
    }

    .pricing-plan-purchase {
        border-top: 1px solid #1b2932;
        border-left: 0;
    }

    .pricing-detail-features ul {
        grid-template-columns: 1fr;
    }

    .pricing-capability-grid {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 680px) {

    .pricing-container {
        width: min(100% - 28px, 1240px);
    }

    .pricing-header-inner {
        min-height: 66px;
    }

    .pricing-brand > span:last-child {
        display: none;
    }

    .pricing-header-back {
        display: none;
    }

    .pricing-hero {
        padding: 78px 0 60px;
    }

    .pricing-hero h1 {
        font-size: 43px;
    }

    .pricing-hero p {
        font-size: 14px;
    }

    .pricing-overview {
        padding-bottom: 75px;
    }

    .pricing-tax-banner {
        align-items: flex-start;
        margin-bottom: 28px;
    }

    .pricing-overview-card {
        padding: 25px 21px 21px;
    }

    .pricing-plan-detail {
        padding: 65px 0;
    }

    .pricing-plan-detail-copy {
        padding: 28px 22px;
    }

    .pricing-plan-detail-copy > h2 {
        font-size: 37px;
    }

    .pricing-plan-detail-copy > h3 {
        font-size: 18px;
    }

    .pricing-plan-purchase {
        padding: 22px;
    }

    .pricing-cycle-label-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .pricing-marketing-block {
        padding: 28px 21px;
    }

    .pricing-marketing-heading h2 {
        font-size: 30px;
    }

    .pricing-question-grid {
        grid-template-columns: 1fr;
    }

    .pricing-pro-bridge {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 24px 21px;
    }

    .pricing-pro-bridge strong {
        font-size: 20px;
    }

    .pricing-review-grid {
        grid-template-columns: 1fr;
    }

    .pricing-review-card blockquote {
        min-height: 0;
    }

    .pricing-comparison {
        padding: 70px 0;
    }

    .pricing-comparison-grid {
        grid-template-columns: 1fr;
    }

    .pricing-final {
        padding-bottom: 70px;
    }

    .pricing-final-card {
        align-items: stretch;
        flex-direction: column;
        padding: 29px 23px;
    }

    .pricing-final-card h2 {
        font-size: 30px;
    }

    .pricing-final-button {
        width: 100%;
    }

    .pricing-footer-inner {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 14px;
        padding: 25px 0;
    }

}


/* ==========================================================
   VERY SMALL
========================================================== */

@media (max-width: 420px) {

    .pricing-hero h1 {
        font-size: 37px;
    }

    .pricing-overview-card h3 {
        font-size: 26px;
    }

    .pricing-card-badge {
        top: 18px;
        right: 18px;
    }

    .pricing-cycle-price strong {
        font-size: 26px;
    }

    .pricing-cycle-price-annual strong {
        font-size: 30px;
    }

}