/* =========================================================
   PAYMENTPROCESSOR.COM
   COMPARE PAGE
   ========================================================= */


/* =====================================================
   FOUNDATION
   ===================================================== */

.pp-compare-page,
.pp-compare-page * {
    box-sizing: border-box;
}


.pp-compare-page {
    position: relative;

    overflow: hidden;

    background:
        #010407;

    color:
        var(--pp-white);
}


.pp-compare-page .pp-container {
    position: relative;
}



/* =====================================================
   SHARED EYEBROW
   ===================================================== */

.pp-compare-eyebrow {
    margin:
        0
        0
        16px;

    color:
        var(--pp-gold-light);

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        .18em;
}



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

.pp-compare-hero {
    position: relative;

    overflow: hidden;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .06);

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(231, 167, 47, .055),
            transparent 26%
        ),
        radial-gradient(
            circle at 72% 34%,
            rgba(24, 45, 60, .17),
            transparent 34%
        );
}


.pp-compare-hero::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .15;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:
        72px 72px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            #000 55%,
            #000
        );
}


.pp-compare-hero-inner {
    min-height:
        535px;

    padding:
        82px 0 78px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(430px, .95fr);

    align-items:
        center;

    gap:
        70px;
}



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

.pp-compare-hero-copy {
    position:
        relative;

    z-index:
        5;

    max-width:
        700px;
}


.pp-compare-hero-copy h1 {
    max-width:
        700px;

    margin:
        0 0 24px;

    color:
        var(--pp-white);

    font-size:
        clamp(
            52px,
            4.3vw,
            70px
        );

    line-height:
        1;

    letter-spacing:
        -.045em;

    font-weight:
        700;
}


.pp-compare-hero-copy h1 span {
    display:
        block;

    color:
        var(--pp-gold-light);
}


.pp-compare-hero-text {
    max-width:
        620px;

    margin:
        0 0 28px;

    color:
        var(--pp-muted);

    font-size:
        17px;

    line-height:
        1.65;
}


.pp-compare-hero-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-bottom:
        28px;
}


.pp-compare-hero-points {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px 25px;

    color:
        #8f979f;

    font-size:
        13px;
}


.pp-compare-hero-points > span {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    white-space:
        nowrap;
}


.pp-compare-check {
    width:
        18px;

    height:
        18px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--pp-gold-light);

    border:
        1px solid
        rgba(231, 167, 47, .45);

    border-radius:
        50%;

    font-size:
        10px;
}



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

.pp-compare-hero-visual {
    position:
        relative;

    z-index:
        3;

    min-height:
        400px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.pp-compare-visual-glow {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        430px;

    height:
        430px;

    transform:
        translate(-50%, -50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(231, 167, 47, .11),
            rgba(20, 40, 55, .05) 42%,
            transparent 70%
        );

    filter:
        blur(12px);
}



/* =====================================================
   MINI COMPARISON PANEL
   ===================================================== */

.pp-compare-mini-panel {
    position:
        relative;

    width:
        min(100%, 505px);

    overflow:
        hidden;

    border:
        1px solid
        rgba(231, 167, 47, .24);

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            rgba(16, 18, 20, .96),
            rgba(4, 6, 8, .98)
        );

    box-shadow:
        0 28px 80px
        rgba(0, 0, 0, .42);

    backdrop-filter:
        blur(8px);
}


.pp-compare-mini-header {
    min-height:
        88px;

    padding:
        22px 24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


.pp-compare-mini-eyebrow {
    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--pp-gold);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .15em;
}


.pp-compare-mini-header strong {
    display:
        block;

    color:
        #f2f2ef;

    font-size:
        18px;

    line-height:
        1.2;
}


.pp-compare-mini-status {
    min-height:
        28px;

    padding:
        0 11px;

    display:
        inline-flex;

    align-items:
        center;

    color:
        var(--pp-gold-light);

    border:
        1px solid
        rgba(231,167,47,.34);

    border-radius:
        999px;

    background:
        rgba(231,167,47,.045);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .12em;
}


.pp-compare-mini-columns,
.pp-compare-mini-row {
    display:
        grid;

    grid-template-columns:
        minmax(130px, 1.6fr)
        repeat(3, 1fr);

    align-items:
        center;
}


.pp-compare-mini-columns {
    min-height:
        45px;

    padding:
        0 22px;

    color:
        #6f777f;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

    text-align:
        center;

    font-size:
        11px;
}


.pp-compare-mini-row {
    min-height:
        55px;

    padding:
        0 22px;

    border-bottom:
        1px solid
        rgba(255,255,255,.055);
}


.pp-compare-mini-row > span {
    color:
        #b7bdc4;

    font-size:
        13px;
}


.pp-compare-mini-row i {
    width:
        23px;

    height:
        23px;

    margin:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--pp-gold-light);

    border:
        1px solid
        rgba(231,167,47,.27);

    border-radius:
        50%;

    font-style:
        normal;

    font-size:
        10px;
}


.pp-compare-mini-footer {
    padding:
        18px 22px 21px;

    color:
        #777f87;

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        .1em;
}


.pp-compare-mini-progress {
    height:
        4px;

    margin-top:
        10px;

    overflow:
        hidden;

    border-radius:
        99px;

    background:
        rgba(255,255,255,.07);
}


.pp-compare-mini-progress span {
    width:
        72%;

    height:
        100%;

    display:
        block;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            var(--pp-gold),
            var(--pp-gold-light)
        );
}



/* =====================================================
   SECTION HEADING
   ===================================================== */

.pp-compare-section-heading {
    max-width:
        760px;

    margin-bottom:
        43px;
}


.pp-compare-section-heading h2,
.pp-compare-table-heading h2 {
    margin:
        0 0 16px;

    color:
        var(--pp-white);

    font-size:
        clamp(
            36px,
            3.4vw,
            50px
        );

    line-height:
        1.08;

    letter-spacing:
        -.035em;
}


.pp-compare-section-heading > p:last-child {
    max-width:
        720px;

    margin:
        0;

    color:
        var(--pp-muted);

    font-size:
        16px;

    line-height:
        1.65;
}


.pp-compare-section-heading-center {
    margin-left:
        auto;

    margin-right:
        auto;

    text-align:
        center;
}



/* =====================================================
   CRITERIA
   ===================================================== */

.pp-compare-criteria-intro {
    padding:
        92px 0;
}


.pp-compare-criteria-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        18px;
}


.pp-compare-criterion {
    min-height:
        245px;

    padding:
        29px;

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

    border-radius:
        16px;

    background:
        linear-gradient(
            145deg,
            rgba(14,16,18,.88),
            rgba(5,7,9,.92)
        );

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


.pp-compare-criterion:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(231,167,47,.28);
}


.pp-compare-criterion-icon {
    width:
        46px;

    height:
        46px;

    margin-bottom:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--pp-gold-light);

    border:
        1px solid
        rgba(231,167,47,.38);

    border-radius:
        11px;

    background:
        rgba(231,167,47,.035);
}


.pp-compare-criterion-icon svg {
    width:
        23px;

    height:
        23px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.pp-compare-criterion h3 {
    margin:
        0 0 11px;

    color:
        #f0f0ed;

    font-size:
        19px;
}


.pp-compare-criterion p {
    margin:
        0;

    color:
        #8f979f;

    font-size:
        14px;

    line-height:
        1.62;
}



/* =====================================================
   MAIN TABLE SECTION
   ===================================================== */

.pp-compare-table-section {
    padding:
        92px 0;

    background:
        linear-gradient(
            180deg,
            rgba(8,10,12,.62),
            rgba(2,4,6,.2)
        );

    border-top:
        1px solid
        rgba(255,255,255,.05);

    border-bottom:
        1px solid
        rgba(255,255,255,.05);
}


.pp-compare-table-heading {
    margin-bottom:
        35px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, .75fr);

    align-items:
        end;

    gap:
        60px;
}


.pp-compare-table-heading > p {
    margin:
        0 0 5px;

    color:
        var(--pp-muted);

    font-size:
        15px;

    line-height:
        1.65;
}


.pp-compare-table-wrap {
    overflow-x:
        auto;

    border:
        1px solid
        rgba(231,167,47,.20);

    border-radius:
        17px;

    background:
        linear-gradient(
            145deg,
            rgba(13,15,17,.97),
            rgba(4,6,8,.98)
        );
}


.pp-compare-main-table {
    width:
        100%;

    min-width:
        850px;

    border-collapse:
        collapse;

    text-align:
        left;
}


.pp-compare-main-table th,
.pp-compare-main-table td {
    padding:
        19px 24px;

    border-bottom:
        1px solid
        rgba(255,255,255,.065);
}


.pp-compare-main-table thead th {
    color:
        var(--pp-gold-light);

    background:
        rgba(231,167,47,.035);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.pp-compare-main-table thead th:first-child {
    width:
        22%;
}


.pp-compare-main-table thead th:nth-child(2) {
    width:
        38%;
}


.pp-compare-main-table tbody th {
    color:
        #efefec;

    font-size:
        14px;

    font-weight:
        650;
}


.pp-compare-main-table tbody td {
    color:
        #959da5;

    font-size:
        14px;

    line-height:
        1.55;
}


.pp-compare-main-table tbody tr:last-child th,
.pp-compare-main-table tbody tr:last-child td {
    border-bottom:
        0;
}


.pp-compare-main-table tbody tr {
    transition:
        background .2s ease;
}


.pp-compare-main-table tbody tr:hover {
    background:
        rgba(231,167,47,.025);
}


.pp-compare-table-note {
    margin:
        14px 4px 0;

    color:
        #69717a;

    font-size:
        11px;

    line-height:
        1.55;
}



/* =====================================================
   BUSINESS TYPES
   ===================================================== */

.pp-compare-business-section {
    padding:
        94px 0;
}


.pp-compare-business-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        17px;
}


.pp-compare-business-card {
    min-height:
        178px;

    padding:
        27px;

    display:
        grid;

    grid-template-columns:
        52px
        minmax(0, 1fr);

    gap:
        21px;

    color:
        inherit;

    text-decoration:
        none;

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

    border-radius:
        16px;

    background:
        linear-gradient(
            145deg,
            rgba(14,16,18,.89),
            rgba(5,7,9,.94)
        );

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


.pp-compare-business-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(231,167,47,.30);
}


.pp-compare-business-icon {
    width:
        50px;

    height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--pp-gold-light);

    border:
        1px solid
        rgba(231,167,47,.40);

    border-radius:
        50%;
}


.pp-compare-business-icon svg {
    width:
        23px;

    height:
        23px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.pp-compare-business-card h3 {
    margin:
        1px 0 9px;

    color:
        #f0f0ed;

    font-size:
        19px;
}


.pp-compare-business-card p {
    max-width:
        510px;

    margin:
        0 0 13px;

    color:
        #8d959e;

    font-size:
        14px;

    line-height:
        1.55;
}


.pp-compare-business-card span {
    color:
        var(--pp-gold-light);

    font-size:
        12px;

    font-weight:
        650;
}



/* =====================================================
   PROCESS
   ===================================================== */

.pp-compare-process {
    padding:
        90px 0;

    border-top:
        1px solid
        rgba(255,255,255,.05);

    background:
        rgba(5,7,9,.32);
}


.pp-compare-process-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        0;
}


.pp-compare-step {
    position:
        relative;

    padding:
        8px 38px 0;

    text-align:
        center;
}


.pp-compare-step:not(:last-child)::after {
    content:
        "";

    position:
        absolute;

    top:
        27px;

    left:
        calc(50% + 31px);

    width:
        calc(100% - 62px);

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            rgba(231,167,47,.34),
            rgba(231,167,47,.12)
        );
}


.pp-compare-step-number {
    position:
        relative;

    z-index:
        2;

    width:
        44px;

    height:
        44px;

    margin:
        0 auto 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--pp-gold-light);

    border:
        1px solid
        rgba(231,167,47,.55);

    border-radius:
        50%;

    background:
        #050709;

    font-size:
        13px;
}


.pp-compare-step h3 {
    margin:
        0 0 10px;

    color:
        #eeeeeb;

    font-size:
        17px;
}


.pp-compare-step p {
    max-width:
        340px;

    margin:
        0 auto;

    color:
        #858d96;

    font-size:
        13px;

    line-height:
        1.6;
}



/* =====================================================
   TRUST PANEL
   ===================================================== */

.pp-compare-trust {
    padding:
        24px 0 74px;
}


.pp-compare-trust-inner {
    min-height:
        155px;

    padding:
        30px 40px;

    display:
        grid;

    grid-template-columns:
        62px
        minmax(0, 1fr);

    align-items:
        center;

    gap:
        28px;

    border:
        1px solid
        rgba(231,167,47,.22);

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            rgba(14,16,18,.96),
            rgba(5,7,9,.98)
        );
}


.pp-compare-trust-icon {
    width:
        58px;

    height:
        64px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--pp-gold-light);
}


.pp-compare-trust-icon svg {
    width:
        48px;

    height:
        53px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.3;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.pp-compare-trust h2 {
    margin:
        0 0 9px;

    color:
        var(--pp-gold-light);

    font-size:
        clamp(
            23px,
            2.1vw,
            31px
        );

    line-height:
        1.15;
}


.pp-compare-trust p {
    max-width:
        820px;

    margin:
        0;

    color:
        var(--pp-muted);

    font-size:
        14px;

    line-height:
        1.65;
}



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

.pp-compare-final {
    padding:
        0 0 88px;
}


.pp-compare-final-inner {
    overflow:
        hidden;

    padding:
        66px 48px;

    text-align:
        center;

    border:
        1px solid
        rgba(231,167,47,.24);

    border-radius:
        20px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(231,167,47,.09),
            transparent 43%
        ),
        linear-gradient(
            135deg,
            rgba(14,16,18,.97),
            rgba(5,7,9,.98)
        );
}


.pp-compare-final .pp-compare-eyebrow {
    text-align:
        center;
}


.pp-compare-final h2 {
    max-width:
        850px;

    margin:
        0 auto 17px;

    color:
        var(--pp-white);

    font-size:
        clamp(
            38px,
            3.7vw,
            54px
        );

    line-height:
        1.08;

    letter-spacing:
        -.035em;
}


.pp-compare-final > .pp-container > p:not(.pp-compare-eyebrow) {
    max-width:
        690px;

    margin:
        0 auto 27px;

    color:
        var(--pp-muted);

    font-size:
        16px;

    line-height:
        1.65;
}


.pp-compare-final-actions {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        18px;
}


.pp-compare-final-actions > span {
    color:
        #737b84;

    font-size:
        12px;
}



/* =====================================================
   SMALL DESKTOP / TABLET
   ===================================================== */

@media (max-width: 1100px) {

    .pp-compare-hero-inner {
        grid-template-columns:
            1fr;

        gap:
            45px;

        padding:
            65px 0;
    }


    .pp-compare-hero-copy {
        max-width:
            720px;
    }


    .pp-compare-hero-visual {
        width:
            min(100%, 580px);

        min-height:
            360px;

        margin:
            0 auto;
    }


    .pp-compare-criteria-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .pp-compare-table-heading {
        grid-template-columns:
            1fr;

        gap:
            10px;
    }

}



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

@media (max-width: 820px) {

    .pp-compare-criteria-intro,
    .pp-compare-table-section,
    .pp-compare-business-section,
    .pp-compare-process {
        padding:
            72px 0;
    }


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


    .pp-compare-process-grid {
        grid-template-columns:
            1fr;

        gap:
            38px;
    }


    .pp-compare-step {
        padding:
            0 20px;
    }


    .pp-compare-step:not(:last-child)::after {
        display:
            none;
    }

}



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

@media (max-width: 600px) {

    .pp-compare-hero-inner {
        min-height:
            0;

        padding:
            50px 0 56px;

        gap:
            38px;
    }


    .pp-compare-hero-copy h1 {
        font-size:
            clamp(
                43px,
                12vw,
                52px
            );

        line-height:
            1.02;
    }


    .pp-compare-hero-text {
        font-size:
            16px;
    }


    .pp-compare-hero-actions {
        display:
            grid;

        grid-template-columns:
            1fr;

        width:
            100%;
    }


    .pp-compare-hero-actions
    .pp-button-primary,
    .pp-compare-hero-actions
    .pp-button-outline {
        width:
            100%;
    }


    .pp-compare-hero-points {
        display:
            grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            12px;
    }


    .pp-compare-hero-visual {
        min-height:
            330px;
    }


    .pp-compare-mini-panel {
        border-radius:
            14px;
    }


    .pp-compare-mini-columns,
    .pp-compare-mini-row {
        grid-template-columns:
            minmax(100px, 1.5fr)
            repeat(3, 1fr);
    }


    .pp-compare-mini-columns,
    .pp-compare-mini-row {
        padding-left:
            15px;

        padding-right:
            15px;
    }


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


    .pp-compare-criterion {
        min-height:
            0;
    }


    .pp-compare-section-heading {
        margin-bottom:
            32px;
    }


    .pp-compare-section-heading h2,
    .pp-compare-table-heading h2 {
        font-size:
            36px;
    }


    .pp-compare-business-card {
        grid-template-columns:
            1fr;

        min-height:
            0;
    }


    .pp-compare-trust-inner {
        padding:
            28px 24px;

        grid-template-columns:
            1fr;

        gap:
            15px;
    }


    .pp-compare-final {
        padding-bottom:
            60px;
    }


    .pp-compare-final-inner {
        padding:
            48px 24px;
    }


    .pp-compare-final h2 {
        font-size:
            38px;
    }


    .pp-compare-final-actions {
        display:
            grid;

        grid-template-columns:
            1fr;
    }


    .pp-compare-final-actions
    .pp-button-primary {
        width:
            100%;
    }

}