/* =========================
   FastBusinessAPI vs Checkify
   Cleaner SaaS / Editorial Design
========================= */

.checkify-compare-page {
    position: relative;
    overflow: hidden;

    min-height: calc(100vh - 78px);
    padding: 0 24px 96px;

    background:
        radial-gradient(circle at 12% 4%, rgba(213, 173, 40, 0.10), transparent 28%),
        radial-gradient(circle at 88% 8%, rgba(7, 19, 38, 0.065), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fbfaf7 48%, var(--surface-soft) 100%);
}

.checkify-compare-page::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(rgba(7, 19, 38, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(7, 19, 38, 0.025) 1px, transparent 1px);

    background-size: 56px 56px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 58%);
    pointer-events: none;
}

.checkify-compare-bg {
    position: absolute;
    border-radius: 999px;
    filter: blur(100px);
    pointer-events: none;
}

.checkify-compare-bg-one {
    width: 520px;
    height: 520px;
    right: -240px;
    top: 80px;
    background: rgba(213, 173, 40, 0.12);
}

.checkify-compare-bg-two {
    width: 480px;
    height: 480px;
    left: -260px;
    bottom: 22%;
    background: rgba(7, 19, 38, 0.055);
}

.checkify-compare-shell {
    position: relative;
    z-index: 2;

    max-width: 1240px;
    margin: 0 auto;
}

.checkify-compare-eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: 18px;

    color: var(--gold-dark);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


/* =========================
   Buttons
========================= */

.checkify-compare-actions,
.checkify-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 32px;
}

.checkify-compare-btn {
    min-height: 46px;
    padding: 0 18px;

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

    border-radius: 999px;

    font-size: 0.92rem;
    font-weight: 850;
    text-decoration: none;

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

.checkify-compare-btn.primary {
    background: var(--navy);
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(7, 19, 38, 0.14);
}

.checkify-compare-btn.primary:hover {
    background: var(--gold-dark);
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(184, 138, 46, 0.18);
}

.checkify-compare-btn.secondary {
    background: rgba(255, 255, 255, 0.76);
    color: var(--navy);
    border: 1px solid rgba(222, 222, 216, 0.96);
    backdrop-filter: blur(14px);
}

.checkify-compare-btn.secondary:hover {
    color: var(--gold-dark);
    border-color: rgba(213, 173, 40, 0.45);
    transform: translateY(-2px);
}

.checkify-compare-btn.secondary-dark {
    background: #ffffff;
    color: var(--navy);
    border: 1px solid rgba(222, 222, 216, 0.95);
}

.checkify-compare-btn.secondary-dark:hover {
    color: var(--gold-dark);
    border-color: rgba(213, 173, 40, 0.45);
    transform: translateY(-2px);
}


/* =========================
   Hero
========================= */

.checkify-compare-hero {
    min-height: 680px;
    padding: 84px 0 98px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    gap: clamp(48px, 7vw, 96px);
    align-items: center;

    border-bottom: 1px solid rgba(231, 223, 210, 0.9);
}

.checkify-compare-hero-copy {
    min-width: 0;
}

.checkify-compare-hero h1 {
    max-width: 900px;

    color: var(--text-main);
    font-size: clamp(3rem, 6vw, 6.35rem);
    line-height: 0.95;
    letter-spacing: -0.082em;
    font-weight: 950;
}

.checkify-compare-hero-copy > p {
    max-width: 740px;
    margin-top: 26px;

    color: var(--text-muted);
    font-size: clamp(1rem, 1.25vw, 1.13rem);
    line-height: 1.78;
}

.checkify-compare-hero-card {
    position: relative;
    min-width: 0;
}

.checkify-compare-hero-card::before {
    content: "";
    position: absolute;
    inset: -18px;

    border-radius: 36px;
    background:
        radial-gradient(circle at top right, rgba(213, 173, 40, 0.18), transparent 38%),
        rgba(255, 255, 255, 0.42);

    border: 1px solid rgba(255, 255, 255, 0.72);
    pointer-events: none;
}

.checkify-vs-panel {
    position: relative;
    overflow: hidden;

    border-radius: 30px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(222, 222, 216, 0.92);
    box-shadow:
        0 30px 80px rgba(7, 19, 38, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);

    backdrop-filter: blur(18px);
}

.checkify-vs-item {
    padding: 30px;
}

.checkify-vs-item span {
    display: block;
    margin-bottom: 10px;

    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.checkify-vs-item h2 {
    margin: 0;

    color: var(--text-main);
    font-size: 1.5rem;
    line-height: 1.08;
    letter-spacing: -0.045em;
    font-weight: 950;
}

.checkify-vs-item p {
    margin-top: 11px;

    color: var(--text-muted);
    font-size: 0.94rem;
    line-height: 1.66;
}

.checkify-vs-divider {
    position: relative;
    height: 1px;

    background: rgba(231, 223, 210, 0.96);
}

.checkify-vs-divider span {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 999px;
    background: var(--gold);
    color: var(--navy);
    border: 6px solid #ffffff;

    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
    box-shadow: 0 12px 26px rgba(184, 138, 46, 0.18);
}

.checkify-vs-item.fastbusiness {
    background:
        radial-gradient(circle at top right, rgba(213, 173, 40, 0.18), transparent 34%),
        linear-gradient(180deg, #101827 0%, #071326 100%);
}

.checkify-vs-item.fastbusiness span {
    color: var(--gold);
}

.checkify-vs-item.fastbusiness h2 {
    color: #ffffff;
}

.checkify-vs-item.fastbusiness p {
    color: rgba(255, 255, 255, 0.70);
}


/* =========================
   Shared Sections
========================= */

.checkify-compare-split-section,
.checkify-table-section,
.checkify-position-section,
.checkify-benefits-section,
.checkify-use-cases-section,
.checkify-choice-section,
.checkify-faq-section {
    padding: 92px 0;
    border-bottom: 1px solid rgba(231, 223, 210, 0.88);
}

.checkify-section-header {
    max-width: 920px;
    margin-bottom: 42px;
}

.checkify-section-header h2,
.checkify-section-copy h2,
.checkify-position-copy h2,
.checkify-use-cases-copy h2,
.checkify-cta-section h2 {
    max-width: 940px;

    color: var(--text-main);
    font-size: clamp(2.1rem, 4.3vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -0.068em;
    font-weight: 950;
}

.checkify-section-header p:not(.checkify-compare-eyebrow),
.checkify-section-copy p,
.checkify-use-cases-copy p,
.checkify-cta-section p {
    max-width: 790px;
    margin-top: 18px;

    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.78;
}


/* =========================
   Quick Answer
========================= */

.checkify-compare-split-section {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: clamp(40px, 7vw, 96px);
}

.checkify-section-label {
    position: sticky;
    top: 110px;
    height: fit-content;
}

.checkify-section-copy {
    max-width: 980px;
}


/* =========================
   Comparison Table
========================= */

.checkify-table-section {
    position: relative;
}

.checkify-table-wrap {
    overflow-x: auto;

    border-radius: 26px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(222, 222, 216, 0.94);
    box-shadow: 0 24px 68px rgba(7, 19, 38, 0.07);
    backdrop-filter: blur(14px);
}

.checkify-compare-table {
    width: 100%;
    min-width: 820px;

    border-collapse: collapse;
}

.checkify-compare-table th {
    padding: 18px 20px;

    background: rgba(251, 250, 247, 0.94);
    color: var(--text-main);

    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.065em;
    text-transform: uppercase;
    text-align: left;

    border-bottom: 1px solid rgba(231, 223, 210, 0.95);
}

.checkify-compare-table td {
    padding: 19px 20px;

    color: var(--text-muted);
    font-size: 0.94rem;
    line-height: 1.62;

    border-bottom: 1px solid rgba(231, 223, 210, 0.82);
    vertical-align: top;
}

.checkify-compare-table tr:last-child td {
    border-bottom: 0;
}

.checkify-compare-table td:first-child {
    width: 21%;

    color: var(--text-main);
    font-weight: 900;
}

.checkify-compare-table th:last-child,
.checkify-compare-table td:last-child {
    background: rgba(213, 173, 40, 0.055);
}

.checkify-compare-table th:last-child {
    color: var(--gold-dark);
}

.checkify-compare-table td:last-child {
    color: var(--text-main);
    font-weight: 720;
}


/* =========================
   Positioning Section
========================= */

.checkify-position-section {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(340px, 0.82fr);
    gap: clamp(44px, 6vw, 84px);
    align-items: start;
}

.checkify-position-list {
    display: grid;
    gap: 0;

    border-top: 1px solid rgba(231, 223, 210, 0.95);
}

.checkify-position-list div {
    padding: 22px 0;
    border-bottom: 1px solid rgba(231, 223, 210, 0.95);
}

.checkify-position-list strong {
    display: block;

    color: var(--text-main);
    font-size: 1.02rem;
    font-weight: 900;
    letter-spacing: -0.025em;
}

.checkify-position-list p {
    max-width: 620px;
    margin-top: 7px;

    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.68;
}


/* =========================
   Benefits
========================= */

.checkify-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 34px;

    border-top: 1px solid rgba(231, 223, 210, 0.95);
}

.checkify-benefits-grid article {
    padding: 30px 0 8px;
    border-bottom: 1px solid rgba(231, 223, 210, 0.95);
}

.checkify-benefits-grid span {
    display: block;

    color: var(--gold-dark);
    font-size: 0.76rem;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.checkify-benefits-grid h3 {
    margin-top: 18px;

    color: var(--text-main);
    font-size: 1.18rem;
    line-height: 1.2;
    letter-spacing: -0.04em;
    font-weight: 900;
}

.checkify-benefits-grid p {
    max-width: 360px;
    margin-top: 10px;

    color: var(--text-muted);
    font-size: 0.93rem;
    line-height: 1.68;
}


/* =========================
   Use Cases
========================= */

.checkify-use-cases-section {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(340px, 0.82fr);
    gap: clamp(44px, 6vw, 84px);
    align-items: start;
}

.checkify-use-cases-list {
    display: grid;
    gap: 0;

    border-top: 1px solid rgba(231, 223, 210, 0.95);
}

.checkify-use-cases-list div {
    padding: 20px 0;
    border-bottom: 1px solid rgba(231, 223, 210, 0.95);
}

.checkify-use-cases-list strong {
    display: block;

    color: var(--text-main);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -0.025em;
}

.checkify-use-cases-list span {
    display: block;
    max-width: 620px;
    margin-top: 7px;

    color: var(--text-muted);
    font-size: 0.94rem;
    line-height: 1.62;
}


/* =========================
   Choice Cards
========================= */

.checkify-choice-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.checkify-choice-card {
    padding: 32px;

    border-radius: 28px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(222, 222, 216, 0.95);
    box-shadow: 0 18px 48px rgba(7, 19, 38, 0.055);
    backdrop-filter: blur(14px);
}

.checkify-choice-card.highlighted {
    background:
        radial-gradient(circle at top right, rgba(213, 173, 40, 0.16), transparent 34%),
        linear-gradient(180deg, #101827 0%, #071326 100%);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 24px 68px rgba(7, 19, 38, 0.15);
}

.checkify-choice-card.highlighted .checkify-compare-eyebrow {
    color: var(--gold);
}

.checkify-choice-card ul {
    display: grid;
    gap: 14px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.checkify-choice-card li {
    position: relative;

    padding-left: 26px;

    color: var(--text-muted);
    font-size: 0.96rem;
    line-height: 1.62;
}

.checkify-choice-card.highlighted li {
    color: rgba(255, 255, 255, 0.76);
}

.checkify-choice-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;

    width: 8px;
    height: 8px;

    border-radius: 999px;
    background: var(--gold);
    box-shadow: 0 0 0 5px rgba(213, 173, 40, 0.12);
}


/* =========================
   FAQ
========================= */

.checkify-faq-list {
    max-width: 920px;

    display: grid;
    gap: 0;

    border-top: 1px solid rgba(231, 223, 210, 0.95);
}

.checkify-faq-list details {
    padding: 22px 0;
    border-bottom: 1px solid rgba(231, 223, 210, 0.95);
}

.checkify-faq-list summary {
    cursor: pointer;

    color: var(--text-main);
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: -0.035em;

    list-style-position: outside;
}

.checkify-faq-list summary::marker {
    color: var(--gold-dark);
}

.checkify-faq-list p {
    max-width: 780px;
    margin-top: 12px;

    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
}


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

.checkify-cta-section {
    padding: 86px 0 0;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 42px;
    align-items: end;
}

.checkify-cta-section > div:first-child {
    max-width: 850px;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1120px) {
    .checkify-compare-hero,
    .checkify-position-section,
    .checkify-use-cases-section,
    .checkify-cta-section {
        grid-template-columns: 1fr;
    }

    .checkify-compare-hero {
        min-height: auto;
    }

    .checkify-compare-hero-card {
        max-width: 560px;
    }

    .checkify-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .checkify-compare-page {
        padding: 0 18px 76px;
    }

    .checkify-compare-hero {
        padding: 58px 0 68px;
    }

    .checkify-compare-split-section,
    .checkify-table-section,
    .checkify-position-section,
    .checkify-benefits-section,
    .checkify-use-cases-section,
    .checkify-choice-section,
    .checkify-faq-section {
        padding: 68px 0;
    }

    .checkify-compare-split-section,
    .checkify-choice-section {
        grid-template-columns: 1fr;
    }

    .checkify-section-label {
        position: static;
    }

    .checkify-choice-card {
        padding: 26px;
        border-radius: 24px;
    }
}

@media (max-width: 640px) {
    .checkify-compare-page {
        padding: 0 16px 64px;
    }

    .checkify-compare-hero {
        padding: 44px 0 58px;
    }

    .checkify-compare-hero h1 {
        letter-spacing: -0.065em;
    }

    .checkify-compare-actions,
    .checkify-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .checkify-compare-btn {
        width: 100%;
    }

    .checkify-benefits-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .checkify-vs-panel,
    .checkify-table-wrap,
    .checkify-choice-card {
        border-radius: 22px;
    }

    .checkify-vs-item {
        padding: 24px;
    }

    .checkify-vs-divider span {
        left: 24px;
    }

    .checkify-section-header h2,
    .checkify-section-copy h2,
    .checkify-position-copy h2,
    .checkify-use-cases-copy h2,
    .checkify-cta-section h2 {
        letter-spacing: -0.056em;
    }
}