/* Shared typography for the main heading on every product pricing section. */
#pricing .intro > h1,
#pricing #payrollpro-pricing .hero > h1,
#business-os-pricing .pricing-intro > h1 {
    font-family: Inter, Arial, sans-serif;
    font-size: clamp(30px, 4vw, 47px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.1;
}

/* A pricing card is filled only when it is the one selected plan. */
#pricing .plan:not(.selected) .plan-btn,
#pricing .plan:not(.selected) .plan-btn:hover,
#business-os-pricing .plan:not(.selected) .plan-btn,
#business-os-pricing .plan:not(.selected) .plan-btn:hover {
    background: #fff;
    color: #075bbe;
    border-color: #075bbe;
    filter: none;
}

#pricing .plan.selected .plan-btn,
#pricing .plan.selected .plan-btn:hover,
#business-os-pricing .plan.selected .plan-btn,
#business-os-pricing .plan.selected .plan-btn:hover {
    background: #075bbe;
    color: #fff;
    border-color: #075bbe;
    filter: none;
}

#pricing .plan-btn:focus-visible,
#business-os-pricing .plan-btn:focus-visible {
    outline: 3px solid rgba(7, 91, 190, .28);
    outline-offset: 3px;
}

/* Keep the Best Value ribbon without the extra blue card outline. */
#pricing .plan.popular,
#business-os-pricing .plan.popular {
    border: 1.5px solid #d4e0f2;
}

/* Keep every HR OS package card edge identical despite global .card styles. */
#payrollpro-pricing .cards > .card,
#payrollpro-pricing .cards > .card.featured {
    box-sizing: border-box;
    border-width: 1.5px;
    border-style: solid;
    border-color: rgba(6, 32, 101, .2);
    border-radius: 12px;
}

/* Shared mobile behavior for product plan-comparison tables. */
@media (max-width: 760px) {
    #pricing .comparison,
    #payrollpro-pricing .comparison,
    #business-os-pricing .comparison {
        max-width: 100%;
        margin-top: 26px;
        padding: 22px 10px 18px;
        border-radius: 16px;
        overflow: hidden;
    }

    #pricing .comparison-intro,
    #payrollpro-pricing .comparison-intro,
    #business-os-pricing .comparison-intro {
        margin-bottom: 20px;
        padding-inline: 4px;
    }

    #pricing .comparison-intro h2,
    #payrollpro-pricing .comparison-intro h2,
    #business-os-pricing .comparison-intro h2 {
        font-size: clamp(1.4rem, 7vw, 1.85rem);
        line-height: 1.14;
    }

    #pricing .comparison-intro p,
    #payrollpro-pricing .comparison-intro p,
    #business-os-pricing .comparison-intro p {
        font-size: .76rem;
        line-height: 1.55;
    }

    #pricing .comparison-legend,
    #payrollpro-pricing .comparison-legend,
    #business-os-pricing .comparison-legend {
        gap: 8px 14px;
        margin-top: 13px;
        font-size: .68rem;
    }

    #pricing .comparison-scroll,
    #payrollpro-pricing .comparison-scroll,
    #business-os-pricing .comparison-scroll {
        position: relative;
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        border-radius: 12px;
        overscroll-behavior-inline: contain;
        scroll-behavior: smooth;
        scrollbar-width: thin;
        scrollbar-color: #9cb5d8 #edf3fb;
        -webkit-overflow-scrolling: touch;
        /* Keep horizontal table swiping without trapping vertical page scroll. */
        touch-action: pan-x pan-y;
    }

    #pricing .comparison-scroll::before,
    #payrollpro-pricing .comparison-scroll::before,
    #business-os-pricing .comparison-scroll::before {
        content: 'Swipe horizontally to compare all plans \2192';
        position: sticky;
        left: 0;
        z-index: 6;
        display: block;
        width: max-content;
        max-width: calc(100vw - 52px);
        padding: 8px 10px;
        color: #587096;
        background: #f4f8fe;
        border-right: 1px solid #d7e3f3;
        border-bottom: 1px solid #d7e3f3;
        border-bottom-right-radius: 8px;
        font-size: .65rem;
        font-weight: 750;
        line-height: 1.2;
        white-space: nowrap;
    }

    #pricing .comparison-scroll::-webkit-scrollbar,
    #payrollpro-pricing .comparison-scroll::-webkit-scrollbar,
    #business-os-pricing .comparison-scroll::-webkit-scrollbar {
        height: 7px;
    }

    #pricing .comparison-scroll::-webkit-scrollbar-track,
    #payrollpro-pricing .comparison-scroll::-webkit-scrollbar-track,
    #business-os-pricing .comparison-scroll::-webkit-scrollbar-track {
        background: #edf3fb;
    }

    #pricing .comparison-scroll::-webkit-scrollbar-thumb,
    #payrollpro-pricing .comparison-scroll::-webkit-scrollbar-thumb,
    #business-os-pricing .comparison-scroll::-webkit-scrollbar-thumb {
        background: #9cb5d8;
        border-radius: 99px;
    }

    #pricing .compare-table,
    #payrollpro-pricing .compare-table,
    #business-os-pricing .compare-table {
        width: 100%;
        min-width: 650px !important;
        table-layout: fixed;
    }

    #pricing .compare-table th,
    #pricing .compare-table td,
    #payrollpro-pricing .compare-table th,
    #payrollpro-pricing .compare-table td,
    #business-os-pricing .compare-table th,
    #business-os-pricing .compare-table td {
        padding: 12px 9px;
        font-size: .7rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    #pricing .compare-table thead th,
    #payrollpro-pricing .compare-table thead th,
    #business-os-pricing .compare-table thead th {
        height: auto;
        min-height: 52px;
        padding: 13px 9px;
        font-size: .72rem;
    }

    #pricing .compare-table th:first-child,
    #pricing .compare-table tbody tr:not(.category-row) > td:first-child,
    #payrollpro-pricing .compare-table th:first-child,
    #payrollpro-pricing .compare-table tbody tr:not(.category-row) > td:first-child,
    #business-os-pricing .compare-table th:first-child,
    #business-os-pricing .compare-table tbody tr:not(.category-row) > td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        width: 210px !important;
        min-width: 210px;
        padding-left: 12px;
        background: #fff;
        box-shadow: 1px 0 0 #dce6f4, 7px 0 12px rgba(33, 64, 110, .06);
    }

    #pricing .compare-table thead th:first-child,
    #payrollpro-pricing .compare-table thead th:first-child,
    #business-os-pricing .compare-table thead th:first-child {
        z-index: 4;
        background: #eaf2ff;
    }

    #pricing .compare-table tbody tr:not(.category-row):nth-child(even) > td:first-child,
    #payrollpro-pricing .compare-table tbody tr:not(.category-row):nth-child(even) > td:first-child,
    #business-os-pricing .compare-table tbody tr:not(.category-row):nth-child(even) > td:first-child {
        background: #fafcff;
    }

    #pricing .category-toggle,
    #payrollpro-pricing .category-toggle,
    #business-os-pricing .category-toggle {
        min-height: 44px;
        padding: 12px;
        font-size: .73rem;
        line-height: 1.35;
    }

    #pricing .comparison-note,
    #payrollpro-pricing .comparison-note,
    #business-os-pricing .comparison-note {
        margin-top: 13px;
        padding-inline: 3px;
        font-size: .65rem;
        line-height: 1.55;
    }
}

@media (max-width: 420px) {
    #pricing .comparison,
    #payrollpro-pricing .comparison,
    #business-os-pricing .comparison {
        padding-inline: 7px;
    }

    #pricing .compare-table,
    #payrollpro-pricing .compare-table,
    #business-os-pricing .compare-table {
        min-width: 600px !important;
    }

    #pricing .compare-table th:first-child,
    #pricing .compare-table tbody tr:not(.category-row) > td:first-child,
    #payrollpro-pricing .compare-table th:first-child,
    #payrollpro-pricing .compare-table tbody tr:not(.category-row) > td:first-child,
    #business-os-pricing .compare-table th:first-child,
    #business-os-pricing .compare-table tbody tr:not(.category-row) > td:first-child {
        width: 180px !important;
        min-width: 180px;
    }
}