section.Banner_Pricing {
        background: var(--White, #FFF);
        padding-block: 56px;
        text-align: center;
    }

    section.Banner_Pricing .Sec_Title h1 {
        color: var(--Text-Grey-900, #101828);
        font-family: Inter;
        font-size: 48px;
        font-style: normal;
        font-weight: 700;
        line-height: 60px;
        letter-spacing: -0.96px;
        margin-bottom: 16px;
    }

    section.Banner_Pricing .Sec_Title h1 span {
        color: var(--Theme-Blue-500, #3A58EF);
        text-align: center;
        font-family: Inter;
        font-size: 48px;
        font-style: normal;
        font-weight: 700;
        line-height: 60px;
        letter-spacing: -0.96px;
    }

    section.Banner_Pricing .Sec_Title h2 {
        color: var(--Text-Grey-700, #344054);
        text-align: center;
        font-family: Inter;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 32px;
        margin-bottom: 12px;
        letter-spacing: 0;
    }

    @media (max-width: 767.51px) {
        section.Banner_Pricing h3 {
            color: var(--Text-Grey-700, #344054);
            line-height: inherit !important;
        }
    }
</style>

<style>
    /* ═══════════════════════════════════════════════════
   MY-CPE ONE V5.0 — CSS Custom Properties
   ═══════════════════════════════════════════════════ */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    :root {
        /* Brand Blue */
        --brand-50: #EBEEFD;
        --brand-100: #D8DEFC;
        --brand-200: #9CABF7;
        --brand-300: #758AF4;
        --brand-400: #4E69F1;
        --brand-500: #3A58EF;
        --brand-600: #314BD0;
        --brand-700: #283FB1;
        --brand-800: #12327B;
        --brand-900: #04092A;
        /* Purple */
        --purple-50: #F3F1FD;
        --purple-400: #7162EA;
        --purple-500: #5849D0;
        --purple-800: #26244A;
        /* Grays */
        --gray-50: #F9FAFB;
        --gray-100: #F2F4F7;
        --gray-200: #EAECF0;
        --gray-300: #D0D5DD;
        --gray-400: #98A2B3;
        --gray-500: #667085;
        --gray-600: #475467;
        --gray-700: #344054;
        --gray-800: #1D2939;
        --gray-900: #101828;
        /* Semantic */
        --success: #12B76A;
        --success-lt: #D1FAE5;
        --warning: #F79009;
        --warning-lt: #FEF3C7;
        /* Shadows */
        --shadow-sm: 0 1px 3px rgba(16, 24, 40, .10), 0 1px 2px rgba(16, 24, 40, .06);
        --shadow-md: 0 4px 8px rgba(16, 24, 40, .08);
        --shadow-lg: 0 12px 16px rgba(16, 24, 40, .08);
        /* Radius */
        --r-xs: 4px;
        --r-sm: 5px;
        --r-md: 8px;
        --r-lg: 12px;
        --r-pill: 64px;
        /* Ease */
        --ease: cubic-bezier(.4, 0, .2, 1);
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        /* font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; */
        background: #F5F8FD;
        color: var(--gray-900);
        min-height: 100vh;
        padding: 0;
    }

    /* ── Controls bar ─────────────────────────────── */
    .controls {
        margin: 32px 0 20px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
    }

    /* ── Monthly / Yearly Toggle ──────────────────── */
    /* Pill-style tab toggle matching reference image */
    .billing-toggle {
        display: inline-flex;
        align-items: center;
        border: 10px;
        box-shadow: none;
        border-radius: 12px;
        background: var(--Text-Grey-50, #F9FAFB);
        padding: 2px;
    }

    .tog-btn {
        white-space: nowrap;
        padding: 8px 20px;
        border: none;
        border-radius: 10px;
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        min-width: 177px;
        background: transparent;
        color: var(--Text-Grey-500, #5D667B);
        transition: background .18s var(--ease), color .18s var(--ease);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
    }

    .tog-btn.active {
        background: var(--Theme-Blue-800, #182878);
        color: #fff;
        box-shadow: 0 4px 4px -2px rgba(24, 39, 75, 0.06), 0 2px 4px -2px rgba(24, 39, 75, 0.02), 0 0 2px 0 #E0E0E0;
    }

    .tog-btn:not(.active):hover {
        background: transparent;
        color: inherit;
    }

    /* Save 17% badge next to Yearly */
    .save-badge {
        display: inline-block;
        border: 1px solid #FDE68A;
        letter-spacing: .04em;
        margin-left: 8px;
        white-space: nowrap;
        background: var(--Theme-Yellow-500, #F0C33A);
        color: var(--Text-Grey-900, #101828);
        border-radius: 4px;
        font-size: 13px;
        font-weight: 600;
        line-height: 24px;
        padding: 2px 6px;
        text-transform: inherit;
    }

    /* ── Revenue dropdown group ───────────────────── */
    .rev-group {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 220px;
        flex: 1;
        max-width: 320px;
    }

    .rev-label-row {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .rev-lbl {
        font-size: 11px;
        font-weight: 700;
        color: var(--gray-500);
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    /* Tooltip wrapper */
    .tip-wrap {
        position: relative;
        display: inline-flex;
    }

    .tip-icon {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 1.5px solid var(--gray-300);
        font-size: 9px;
        font-weight: 700;
        color: var(--gray-400);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: default;
        font-style: normal;
    }

    .tip-box {
        display: none;
        position: absolute;
        bottom: calc(100% + 7px);
        left: 50%;
        transform: translateX(-50%);
        background: var(--gray-800);
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        font-family: 'Inter', sans-serif;
        padding: 7px 12px;
        border-radius: var(--r-md);
        white-space: nowrap;
        z-index: 60;
        box-shadow: var(--shadow-md);
        pointer-events: none;
    }

    .tip-wrap:hover .tip-box {
        display: block;
    }

    /* Dropdown */
    .sel-wrap {
        position: relative;
    }

    .sel-wrap::after {
        content: '';
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        border: 4px solid transparent;
        border-top: 5px solid var(--gray-500);
        pointer-events: none;
    }

    .rev-sel {
        width: 100%;
        appearance: none;
        background: #FFFFFF;
        border: 1px solid var(--gray-300);
        border-radius: var(--r-md);
        padding: 9px 34px 9px 12px;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: var(--gray-800);
        cursor: pointer;
        box-shadow: var(--shadow-sm);
        transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
    }

    .rev-sel:focus {
        outline: none;
        border-color: var(--brand-500);
        box-shadow: 0 0 0 3px rgba(58, 88, 239, .12);
    }

    /* ── Main pricing card ────────────────────────── */
    .pricing-wrap {
        overflow: visible;
    }

    /* ═══════════════════════════════════════════════
   SINGLE-COLUMN LAYOUT
   Grid: [feature name col] [single price col]
   The price column width EXACTLY matches the $299 price card.
   We define a fixed --price-col width token.
   ═══════════════════════════════════════════════ */
    :root {
        --price-col: 220px;
        /* exact width of price/check column */
    }

    .pt-head,
    .pt-row,
    .sec-row {
        display: grid;
        grid-template-columns: 1fr var(--price-col);
        border-bottom: 1px solid var(--gray-200);
    }

    .pt-row:last-child {
        border-bottom: none;
    }

    .pt-row:nth-child(odd) {
        /* background: #EBEEFD; */
    }

    .pt-row:nth-child(even) {
        /* background: #ffffff; */
    }

    .pt-row:hover {
        /* background: var(--brand-50); */
        transition: background .15s var(--ease);
    }

    /* ── Sticky header ────────────────────────────── */
    .pt-head {
        position: sticky;
        top: 0;
        background: #FFFFFF;
        z-index: 20;
        border-bottom: 2px solid var(--gray-200);
        box-shadow: 0 2px 8px rgba(16, 24, 40, .06);
    }

    /* Feature label column in header */
    .hd-feat {
        padding: 24px 24px 20px;
        display: flex;
        flex-direction: column;
        justify-content: start;
        gap: 3px;
    }

    .hd-feat .eyebrow {
        font-size: 20px;
        font-weight: 600;
        color: var(--gray-700);
        text-transform: none;
        letter-spacing: 0;
    }

    .hd-feat .main-title {
        font-size: 42px;
        font-weight: 700;
        color: #3E3C64;
        letter-spacing: -0.6px;
        line-height: 44px;
        margin-bottom: 16px;
    }

    .hd-feat .sub-title {
        font-size: 26px;
        font-weight: 600;
        color: #344054;
        margin-top: 1px;
        line-height: 30px;
    }

    /* ── Price card (the green-bordered column) ─────
   This is the single active tier column.
   Width = --price-col (220px) exactly.
   ───────────────────────────────────────────── */
    .price-card {
        width: var(--price-col);
        border-left: 1px solid var(--gray-200);
        background: var(--brand-50);
        padding: 20px 16px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-align: center;
    }

    /* Range badge inside price card */
    .price-range-badge {
        display: inline-flex;
        align-items: center;
        background: var(--brand-50);
        border: 1px solid var(--gray-200);
        color: #344054;
        border-radius: var(--r-pill);
        padding: 2px 12px;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0;
        white-space: nowrap;
        line-height: 24px;
    }

    /* The big "$299" price number */
    .price-amount {
        font-family: 'Inter', sans-serif;
        font-size: 30px;
        font-weight: 700;
        color: var(--brand-500);
        letter-spacing: -.6px;
        line-height: 38px;
        transition: opacity .2s var(--ease), transform .2s var(--ease);
    }

    .price-amount.flash {
        opacity: 0;
        transform: translateY(-5px);
    }

    .price-period {
        font-size: 14px;
        font-weight: 500;
        color: var(--gray-500);
        margin-top: -4px;
    }

    /* Fee label: "Monthly Fee" / "Yearly Fee" */
    .fee-label {
        font-size: 11px;
        font-weight: 600;
        color: var(--gray-500);
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    /* Annual total shown in yearly mode */
    .annual-note {
        display: none;
        font-size: 12px;
        font-weight: 600;
        color: var(--brand-600);
    }

    .annual-note.show {
        display: block;
    }

    /* Savings badge */
    .savings-badge {
        display: none;
        align-items: center;
        gap: 3px;
        background: var(--success-lt);
        color: var(--success);
        border: 1px solid #A7F3D0;
        border-radius: var(--r-pill);
        padding: 2px 8px;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
    }

    .savings-badge.show {
        display: inline-flex;
    }

    /* "Selected" / "Get Started" CTA button */
    .cta-selected-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        background: var(--brand-500);
        color: #FFFFFF;
        border: none;
        border-radius: var(--r-xs);
        padding: 10px 18px;
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        cursor: pointer;
        transition: background .18s var(--ease);
        margin-top: 4px;
    }

    .cta-selected-btn:hover {
        background: var(--brand-600);
    }

    .cta-selected-btn svg {
        flex-shrink: 0;
    }

    /* Custom tier */
    .custom-price {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--gray-500);
    }

    /* ── Check column in feature rows ──────────────
   Same width as price card = --price-col
   ─────────────────────────────────────────── */
    .check-col {
        width: var(--price-col);
        border-left: 1px solid var(--gray-200);
        background: rgba(235, 238, 253, .35);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 8px;
        transition: background .15s var(--ease);
    }

    .pt-row:hover .check-col {
        background: rgba(58, 88, 239, .07);
    }

    /* Filled check icon */
    .chk-icon {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #D8DEFC;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .chk-icon svg path {
        stroke: #3A58EF;
    }

    /* ── Feature label cells ──────────────────────── */
    .feat-cell {
        padding: 12px 0px 12px 55px;
        color: var(--Text-Grey-700, #344054);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 7px;
        line-height: 20px;
        position: relative;
        overflow: visible;
    }

    /* Info "i" icon with tooltip */
    .fi {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 1.5px solid #00001E;
        font-size: 9px;
        font-weight: 700;
        color: #00001E;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: default;
        flex-shrink: 0;
        position: relative;
        font-style: normal;
        z-index: 1;
    }

    .fi .ft {
        display: none;
        position: absolute;
        bottom: calc(100% + 7px);
        left: 50%;
        transform: translateX(-50%);
        max-width: 280px;
        width: max-content;
        min-width: 160px;
        white-space: normal;
        background: var(--gray-800);
        color: #fff;
        font-size: 12px;
        font-family: 'Inter', sans-serif;
        font-weight: 400;
        line-height: 1.45;
        padding: 7px 12px;
        border-radius: var(--r-md);
        z-index: 50;
        pointer-events: none;
        box-shadow: var(--shadow-md);
    }

    .fi .ft::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: var(--gray-800);
    }

    .fi:hover .ft {
        display: none;
    }

    /* ── Accordion sections ───────────────────────── */
    .sec-row {
        background: #fff;
        cursor: pointer;
        user-select: none;
    }

    .sec-row:hover {
        /* background: var(--brand-50); */
    }

    .sec-label {
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 18px;
        font-weight: 600;
        color: #344054;
        text-transform: none;
        letter-spacing: 0;
    }

    .sec-label-text {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
    }

    .acc-icon {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 1.5px solid var(--brand-500);
        background: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 15px;
        font-weight: 400;
        color: var(--brand-500);
        line-height: 1;
        transition: background .18s var(--ease), color .18s var(--ease);
    }

    .acc-icon::before {
        content: '+';
        position: relative;
        top: -0.5px;
    }

    .sec-row.open .acc-icon::before {
        content: '\2212';
    }

    /* Red cross icon for policy rows */
    .chk-icon.cross {
        background: #FEE2E2;
    }

    .chk-icon.cross svg path {
        stroke: #EF4444;
    }

    .acc-body {
        overflow: hidden;
        max-height: 0;
        transition: max-height .3s ease;
    }

    .acc-body.open {
        max-height: 9999px;
        overflow: visible;
    }

    /* Closed state: show blue tick in check column of sec-row */
    .sec-check-col-inner {
        display: none;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .sec-row:not(.open) .sec-check-col-inner {
        display: flex;
    }

    /* Section divider check column */
    .sec-check-col {
        width: var(--price-col);
        /* border-left: 1px solid var(--gray-200);
        background: rgba(235, 238, 253, .45); */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ── Footer ────────────────────────────────────── */
    .pt-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px 16px;
        padding: 14px 24px;
        border-top: 1px solid var(--gray-200);
        background: var(--gray-50);
    }

    .ft-note {
        font-size: 12px;
        color: var(--gray-500);
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .ft-dot {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--gray-300);
    }

    /* ── Disclaimer ─────────────────────────────────── */
    .disclaimer {
        max-width: inherit;
        margin: 20px auto 24px;
        border-radius: 4px;
        border: 1px solid var(--Theme-Yellow-400, #F1C94E);
        background: var(--Theme-Yellow-50, #FDF9EB);
        padding: 10px;
        color: var(--Text-Grey-700, #344054);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 1.6;
    }

    .disclaimer strong {
        font-weight: 700;
    }

    /* ── Mobile ──────────────────────────────────────── */
    @media (max-width: 640px) {
        .controls {
            flex-direction: column;
            align-items: stretch;
        }

        .billing-toggle {
            justify-content: center;
        }

        .rev-group {
            max-width: 100%;
        }

        :root {
            --price-col: 160px;
        }

        .price-amount {
            font-size: 1.9rem;
        }
    }

    /* ── Plus/Minus SVG toggle (drives accordion open/close) ── */
    .sec-row .Plus_Icon {
        display: inline-block;
    }

    .sec-row .Minus_Icon {
        display: none;
    }

    .sec-row.open .Plus_Icon {
        display: none;
    }

    .sec-row.open .Minus_Icon {
        display: inline-block;
    }

    /* ── Requirement icon h2 styling (accordion headers) ── */
    .requirement_icn {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* Higher specificity to override section.complince_solution h2 (36px/700) from pricing-page-accounting.css */
    section.complince_solution .requirement_icn h2 {
        margin-bottom: 0 !important;
        color: #344054 !important;
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 28px;
        text-align: left !important;
        letter-spacing: normal !important;
    }

    /* ── Check column — match reference (no separator, no tint) ── */
    .check-col {
        background: transparent !important;
        border-left: none !important;
    }

    .pt-row:hover .check-col {
        background: transparent !important;
    }

    /* ── Remove row bottom borders inside accordion body (reference has none) ── */
    .acc-body .pt-row {
        border-bottom: 1px solid #D0D5DD;
    }

    /* ── Cross icons match reference red circle style ── */
    .chk-icon.cross {
        background: #FEE4E2;
    }

    .chk-icon.cross svg path {
        stroke: #F04438;
    }

    /* ── Pricing Table Top controls (reference layout) ── */
    .Pricing_Table_Top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    :root {
        --brand-50: #EBEEFD;
        --brand-100: #D8DEFC;
        --brand-200: #9CABF7;
        --brand-300: #758AF4;
        --brand-400: #4E69F1;
        --brand-500: #3A58EF;
        --brand-600: #314BD0;
        --brand-700: #283FB1;
        --brand-800: #12327B;
        --brand-900: #04092A;
        --gray-50: #F9FAFB;
        --gray-100: #F2F4F7;
        --gray-200: #EAECF0;
        --gray-300: #D0D5DD;
        --gray-400: #98A2B3;
        --gray-500: #667085;
        --gray-600: #475467;
        --gray-700: #344054;
        --gray-800: #1D2939;
        --gray-900: #101828;
        --success: #12B76A;
        --success-lt: #D1FAE5;
        --warning: #F79009;
        --warning-lt: #FEF3C7;
        --shadow-sm: 0 1px 3px rgba(16, 24, 40, .10), 0 1px 2px rgba(16, 24, 40, .06);
        --shadow-md: 0 4px 8px rgba(16, 24, 40, .08);
        --shadow-lg: 0 12px 24px rgba(16, 24, 40, .10);
        --r-xs: 4px;
        --r-sm: 5px;
        --r-md: 8px;
        --r-lg: 12px;
        --r-xl: 16px;
        --r-pill: 64px;
        --ease: cubic-bezier(.4, 0, .2, 1);
        --page-max: 1040px;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        /* font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; */
        background: #F5F8FD;
        color: var(--gray-900);
        min-height: 100vh;
        padding: 0;
    }

    /* ── Section wrapper ── */
    .section {
        margin-bottom: 32px;
        padding: 50px 0px 0;
    }

    /* ── Section header ── */
    .section-hdr {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
    }

    .section-hdr .eyebrow {
        font-size: 14px;
        font-weight: 700;
        color: var(--gray-400);
        text-transform: uppercase;
        letter-spacing: .1em;
    }

    .section-hdr .sec-title {
        font-size: 18px;
        font-weight: 700;
        color: var(--gray-900);
        letter-spacing: -.02em;
    }

    .section-hdr .sec-sub {
        font-size: 14px;
        color: var(--gray-500);
        margin-top: 2px;
    }

    /* ══════════════════════════════════════════
   FOLD 1 - FREE ONBOARDING CARDS
   ══════════════════════════════════════════ */
    .fold1-hero {
        background: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-600) 100%);
        border-radius: var(--r-xl);
        padding: 28px 32px 24px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
    }

    .fold1-hero-text .tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, .15);
        border: 1px solid rgba(255, 255, 255, .25);
        border-radius: var(--r-pill);
        padding: 3px 12px;
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        letter-spacing: .06em;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    .fold1-hero-text h2 {
        font-size: 24px;
        font-weight: 800;
        color: #fff;
        letter-spacing: -.03em;
        line-height: 1.2;
    }

    .fold1-hero-text p {
        font-size: 14px;
        color: rgba(255, 255, 255, .75);
        margin-top: 6px;
        max-width: 480px;
        line-height: 1.5;
    }

    .fold1-hero-badge {
        background: #fff;
        border-radius: var(--r-lg);
        padding: 16px 24px;
        text-align: center;
        flex-shrink: 0;
    }

    .fold1-hero-badge .price {
        font-size: 32px;
        font-weight: 900;
        color: var(--success);
        letter-spacing: -.04em;
    }

    .fold1-hero-badge .price-label {
        font-size: 14px;
        color: var(--gray-500);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .06em;
        margin-top: 2px;
    }

    /* ── Compact top-aligned onboarding grid ── */
    .onboarding-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        grid-auto-rows: 1fr;
        gap: 12px;
        align-items: stretch;
    }

    .ob-card {
        background: #fff;
        border: 1px solid var(--gray-200);
        border-radius: var(--r-lg);
        padding: 16px 16px 14px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        box-shadow: var(--shadow-sm);
        transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
    }


    .ob-check {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--success-lt);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .ob-check svg {
        width: 13px;
        height: 11px;
    }

    .ob-card-title {
        font-size: 16px;
        font-weight: 700;
        color: var(--gray-800);
        line-height: inherit;
    }

    .ob-card-desc {
        font-size: 14px;
        color: var(--gray-500);
        line-height: 1.5;
        display: none;
    }

    /* ── ob-card: same slide-up hover as obs-card ── */
    .ob-card {
        height: 100%;
        min-height: 160px;
        justify-content: flex-start;
        position: relative;
        overflow: hidden;
        cursor: default;
        transition: box-shadow .22s var(--ease), border-color .22s var(--ease);
    }

    .ob-card:hover {
        box-shadow: var(--shadow-lg);
        border-color: var(--brand-200);
    }

    .ob-card-default {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        transition: transform .3s var(--ease), opacity .3s var(--ease);
    }

    .ob-card:hover .ob-card-default {
        transform: translateY(-8px);
        opacity: 0;
    }

    .ob-desc {
        position: absolute;
        inset: 0;
        background: var(--brand-800);
        padding: 16px 16px 14px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        transform: translateY(100%);
        opacity: 0;
        transition: transform .3s var(--ease), opacity .3s var(--ease);
    }

    .ob-card:hover .ob-desc {
        transform: translateY(0);
        opacity: 1;
    }

    .ob-desc-title {
        font-size: 14px;
        font-weight: 800;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: .06em;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
        padding-bottom: 8px;
        display: none;
    }

    .ob-desc-body {
        font-size: 14px;
        color: rgba(255, 255, 255, .82);
        line-height: 1.6;
    }

    /* ══════════════════════════════════════════
   ADD-ON SQUARE CARDS
   ══════════════════════════════════════════ */
    .addon-section {
        margin-bottom: 32px;
    }

    .addon-header-card {
        background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-800) 100%);
        border-radius: var(--r-xl);
        padding: 22px 28px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        flex-wrap: wrap;
        margin-bottom: 14px;
    }

    .addon-header-text .addon-label {
        font-size: 11px;
        font-weight: 800;
        color: rgba(255, 255, 255, .65);
        text-transform: uppercase;
        letter-spacing: .1em;
        margin-bottom: 6px;
    }

    .addon-header-text h3 {
        font-size: 20px;
        font-weight: 800;
        color: #fff;
        letter-spacing: -.03em;
        line-height: 1.2;
    }

    .addon-header-text p {
        font-size: 13px;
        color: rgba(255, 255, 255, .7);
        margin-top: 5px;
    }

    .addon-header-pill {
        background: rgba(255, 255, 255, .15);
        border: 1px solid rgba(255, 255, 255, .25);
        border-radius: var(--r-pill);
        padding: 8px 20px;
        font-size: 14px;
        font-weight: 800;
        color: #fff;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .addon-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 14px;
    }

    .addon-card {
        aspect-ratio: 1 / 1;
        background: #fff;
        border: 1.5px solid var(--brand-200);
        border-radius: var(--r-xl);
        box-shadow: var(--shadow-sm);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px 16px;
        text-align: center;
        gap: 8px;
        transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
        position: relative;
        overflow: hidden;
    }

    .addon-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, var(--brand-50) 0%, rgba(255, 255, 255, 0) 60%);
        pointer-events: none;
    }

    .addon-card:hover {
        box-shadow: var(--shadow-md);
        border-color: var(--brand-400);
        transform: translateY(-2px);
    }

    .addon-card.custom-card {
        border-color: var(--gray-300);
    }

    .addon-card.custom-card::before {
        background: linear-gradient(135deg, var(--gray-100) 0%, rgba(255, 255, 255, 0) 60%);
    }

    .addon-months {
        font-size: 12px;
        font-weight: 600;
        color: var(--gray-600);
        line-height: 1.35;
    }

    .addon-price {
        font-size: 28px;
        font-weight: 900;
        color: var(--brand-500);
        letter-spacing: -.04em;
        line-height: 1;
    }

    .addon-price.custom {
        font-size: 16px;
        font-style: italic;
        color: var(--gray-400);
        font-weight: 600;
    }

    .addon-per {
        font-size: 11px;
        color: var(--gray-400);
        font-weight: 500;
    }

    /* ══════════════════════════════════════════
   FOLD 2 - CATCH-UP PRICING TABLE + TABS
   ══════════════════════════════════════════ */

    /* Tab bar - matches Monthly/Yearly pill toggle */
    .tab-bar {
        display: inline-flex;
        background: #fff;
        border: 1px solid var(--gray-200);
        border-radius: var(--r-pill);
        padding: 3px;
        box-shadow: var(--shadow-sm);
        margin-bottom: 20px;
    }

    .tab-btn {
        padding: 6px 20px;
        border-radius: var(--r-pill);
        border: none;
        background: transparent;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: var(--gray-500);
        cursor: pointer;
        transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
        white-space: nowrap;
    }

    .tab-btn.active {
        background: var(--brand-800);
        color: #fff;
        box-shadow: 0 1px 4px rgba(18, 50, 123, .22);
    }

    .tab-btn:not(.active):hover {
        background: var(--brand-50);
        color: var(--brand-600);
    }

    .tab-pane {
        display: none;
    }

    .tab-pane.active {
        display: block;
    }

    /* ── Catch-up section layout ─────────────────────── */
    .cu-top-bar {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 14px;
        margin-bottom: 18px;
    }

    .cu-dropdowns-row {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .cu-sel-group {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 190px;
    }

    .cu-sel-label {
        font-size: 10px;
        font-weight: 700;
        color: var(--gray-500);
        text-transform: uppercase;
        letter-spacing: .09em;
    }

    .cu-sel-wrap {
        position: relative;
    }

    .cu-sel-wrap::after {
        content: '';
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        border: 5px solid transparent;
        border-top: 6px solid var(--gray-500);
        pointer-events: none;
        margin-top: 3px;
    }

    .cu-sel-wrap select {
        width: 100%;
        appearance: none;
        background: #fff;
        border: 1px solid var(--gray-300);
        border-radius: var(--r-md);
        padding: 9px 36px 9px 13px;
        font-family: 'Inter', sans-serif;
        font-size: 13.5px;
        font-weight: 500;
        color: var(--gray-800);
        cursor: pointer;
        box-shadow: var(--shadow-sm);
        transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
    }

    .cu-sel-wrap select:focus {
        outline: none;
        border-color: var(--brand-500);
        box-shadow: 0 0 0 3px rgba(58, 88, 239, .12);
    }


    /* Price card - full width horizontal */
    .cu-price-card {
        background: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-600) 100%);
        border-radius: var(--r-xl);
        box-shadow: var(--shadow-lg);
        padding: 28px 36px;
        display: flex;
        align-items: center;
        gap: 0;
        width: 100%;
    }

    .cu-card-left {
        flex: 1.2;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .cu-card-label {
        font-size: 14px;
        font-weight: 800;
        color: rgba(255, 255, 255, .55);
        text-transform: uppercase;
        letter-spacing: .1em;
    }

    .cu-card-desc {
        font-size: 14px;
        color: rgba(255, 255, 255, .6);
        line-height: 1.5;
        max-width: 260px;
    }

    .cu-card-divider {
        width: 1px;
        align-self: stretch;
        background: rgba(255, 255, 255, .15);
        margin: 0 32px;
        flex-shrink: 0;
    }

    .cu-card-center {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-align: center;
    }

    .cu-card-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
    }

    .cu-turn-label {
        font-size: 14px;
        color: rgba(255, 255, 255, .5);
        font-weight: 500;
    }

    .cu-card-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .cu-badge-acct {
        display: inline-flex;
        align-items: center;
        background: rgba(255, 255, 255, .18);
        border: 1.5px solid rgba(255, 255, 255, .35);
        color: #fff;
        border-radius: var(--r-pill);
        padding: 4px 13px;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
    }

    .cu-badge-mo {
        display: inline-flex;
        align-items: center;
        background: rgba(255, 255, 255, .10);
        border: 1px solid rgba(255, 255, 255, .2);
        color: rgba(255, 255, 255, .8);
        border-radius: var(--r-pill);
        padding: 4px 13px;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
    }

    .cu-price-amt {
        font-size: 3.6rem;
        font-weight: 700;
        color: #fff;
        letter-spacing: -.05em;
        line-height: 1;
        transition: opacity .2s var(--ease), transform .2s var(--ease);
    }

    .cu-price-amt.flash {
        opacity: 0;
        transform: translateY(-7px);
    }

    .cu-price-per {
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, .6);
        margin-top: -2px;
    }

    .cu-payroll-note {
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, .8);
        background: rgba(255, 255, 255, .12);
        border-radius: var(--r-pill);
        padding: 4px 14px;
        border: 1px solid rgba(255, 255, 255, .2);
        margin-top: 2px;
    }

    .cu-turnaround {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        background: rgba(18, 183, 106, .25);
        border: 1px solid rgba(18, 183, 106, .4);
        border-radius: var(--r-pill);
        padding: 6px 16px;
    }

    .cu-cta-btn {
        background: #fff;
        color: var(--brand-700);
        border: none;
        border-radius: var(--r-md);
        padding: 12px 28px;
        font-family: 'Inter', sans-serif;
        font-size: 13.5px;
        font-weight: 800;
        cursor: pointer;
        letter-spacing: -.01em;
        white-space: nowrap;
        transition: background .18s var(--ease), transform .15s var(--ease);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    }

    .cu-cta-btn:hover {
        background: var(--brand-50);
        transform: translateY(-1px);
    }

    @media (max-width: 800px) {
        .cu-price-card {
            flex-direction: column;
            align-items: flex-start;
            padding: 24px 20px;
        }

        .cu-card-divider {
            width: 100%;
            height: 1px;
            margin: 16px 0;
            align-self: auto;
        }

        .cu-card-right {
            align-items: flex-start;
        }

        .cu-cta-btn {
            width: 100%;
            text-align: center;
        }
    }

    /* Pricing table - clean white card matching reference */
    .pricing-tbl-wrap {
        background: #fff;
        border: 1px solid var(--gray-200);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-md);
        overflow: hidden;
    }

    .ptbl {
        width: 100%;
        border-collapse: collapse;
    }

    /* Header row - no background, uppercase label + small sub-label */
    .ptbl thead tr {
        border-bottom: 1px solid var(--gray-200);
    }

    .ptbl thead th {
        background: #fff;
        padding: 14px 20px 12px;
        font-size: 11px;
        font-weight: 700;
        color: var(--gray-500);
        text-transform: uppercase;
        letter-spacing: .08em;
        text-align: center;
        vertical-align: bottom;
        line-height: 1.3;
        white-space: nowrap;
    }

    .ptbl thead th:first-child {
        text-align: left;
        padding-left: 24px;
    }

    .ptbl thead th .col-sub {
        display: block;
        font-size: 11px;
        font-weight: 400;
        color: var(--gray-400);
        text-transform: none;
        letter-spacing: 0;
        margin-top: 2px;
    }

    /* Body rows */
    .ptbl tbody tr {
        border-bottom: 1px solid var(--gray-100);
    }

    .ptbl tbody tr:last-child {
        border-bottom: none;
    }

    .ptbl tbody tr:hover {
        background: var(--brand-50);
        transition: background .12s var(--ease);
    }

    .ptbl tbody td {
        padding: 15px 20px;
        font-size: 14px;
        color: var(--gray-600);
        text-align: center;
        vertical-align: middle;
    }

    .ptbl tbody td:first-child {
        text-align: left;
        padding-left: 24px;
        font-size: 14px;
        font-weight: 500;
        color: var(--gray-700);
        white-space: nowrap;
    }

    /* Price cell - bold blue number + lighter /mo */
    .ptbl .price-cell {
        font-size: 15px;
        font-weight: 700;
        color: var(--brand-600);
    }

    .ptbl .price-cell .mo {
        font-size: 12px;
        font-weight: 400;
        color: var(--gray-400);
    }

    .ptbl .custom-cell {
        color: var(--gray-400);
        font-style: italic;
        font-size: 13px;
    }

    /* ══════════════════════════════════════════
   SIDE INFO CARDS - Image-1 card style
   ══════════════════════════════════════════ */
    .side-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 16px;
        margin-top: 24px;
    }

    .side-card {
        background: #fff;
        border: 1px solid var(--gray-200);
        border-radius: var(--r-xl);
        padding: 24px 26px 22px;
        box-shadow: var(--shadow-sm);
        display: flex;
        flex-direction: column;
        transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
    }

    .side-card:hover {
        box-shadow: var(--shadow-md);
        border-color: var(--brand-200);
    }

    .side-card-icon-wrap {
        width: 40px;
        height: 40px;
        border-radius: var(--r-md);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        margin-bottom: 14px;
    }

    .side-card-icon-wrap.blue {
        background: var(--brand-50);
    }

    .side-card-icon-wrap.green {
        background: var(--success-lt);
    }

    .side-card-icon-wrap.amber {
        background: var(--warning-lt);
    }

    .side-card-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--gray-900);
        letter-spacing: -.01em;
        margin-bottom: 16px;
    }

    .side-card-rows {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .sc-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 9px 12px;
        border-radius: var(--r-sm);
    }

    .sc-row:nth-child(odd) {
        background: var(--gray-50);
    }

    .sc-row-label {
        font-size: 13px;
        color: var(--gray-600);
        line-height: 1.4;
    }

    .sc-row-val {
        font-size: 13px;
        font-weight: 700;
        color: var(--gray-800);
        text-align: right;
        white-space: nowrap;
    }

    .sc-row-val.green {
        color: var(--success);
    }

    .sc-row-val.blue {
        color: var(--brand-600);
    }

    .sc-row-val.muted {
        color: var(--gray-400);
        font-weight: 400;
        font-style: italic;
    }

    @media (max-width: 640px) {
        .side-cards {
            grid-template-columns: 1fr;
        }
    }

    /* Notes box */
    .notes-box {
       max-width: inherit;
        margin: 20px auto 24px;
        border-radius: 4px;
        border: 1px solid var(--Theme-Yellow-400, #F1C94E);
        background: var(--Theme-Yellow-50, #FDF9EB);
        padding: 10px;
        color: var(--Text-Grey-700, #344054);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 1.6;
    }

    .notes-box strong {
        font-weight: 700;
    }

    .notes-box ol {
        margin: 8px 0 0 18px;
        padding: 0;
    }

    .notes-box ol li {
        margin-bottom: 4px;
    }


    /* ══════════════════════════════════════════
   INFO PANELS - Turnaround + Benchmark
   ══════════════════════════════════════════ */
    .info-panels {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-top: 24px;
    }

    @media (max-width: 720px) {
        .info-panels {
            grid-template-columns: 1fr;
        }
    }

    .info-panel {
        background: #fff;
        border: 1px solid var(--gray-200);
        border-radius: var(--r-xl);
        padding: 22px 22px 18px;
        box-shadow: var(--shadow-sm);
    }

    .panel-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
    }

    .panel-icon {
        width: 36px;
        height: 36px;
        border-radius: var(--r-md);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .panel-icon.green {
        background: var(--success-lt);
        color: var(--success);
    }

    .panel-icon.amber {
        background: var(--warning-lt);
        color: var(--warning);
    }

    .panel-label {
        font-size: 10px;
        font-weight: 700;
        color: var(--gray-400);
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .panel-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--gray-900);
        letter-spacing: -.01em;
        margin-top: 2px;
    }

    /* Turnaround bar rows */
    .turnaround-rows {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .ta-row {
        display: grid;
        grid-template-columns: 90px 1fr 60px;
        align-items: center;
        gap: 10px;
    }

    .ta-range {
        font-size: 12px;
        font-weight: 600;
        color: var(--gray-600);
        white-space: nowrap;
    }

    .ta-bar-wrap {
        height: 6px;
        background: var(--gray-100);
        border-radius: 99px;
        overflow: hidden;
    }

    .ta-bar {
        height: 100%;
        background: linear-gradient(90deg, var(--success) 0%, #34d399 100%);
        border-radius: 99px;
    }

    .ta-bar.custom {
        background: var(--gray-300);
    }

    .ta-val {
        font-size: 12px;
        font-weight: 700;
        color: var(--success);
        text-align: right;
        white-space: nowrap;
    }

    .ta-val.muted {
        color: var(--gray-400);
        font-weight: 400;
        font-style: italic;
    }

    /* Benchmark rows */
    .benchmark-rows {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .bm-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 9px 10px;
        border-radius: var(--r-sm);
    }

    .bm-row:nth-child(odd) {
        background: var(--gray-50);
    }

    .bm-left {
        flex: 1;
        min-width: 0;
    }

    .bm-period {
        font-size: 11px;
        font-weight: 800;
        color: var(--gray-700);
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .bm-competitors {
        font-size: 11.5px;
        color: var(--gray-500);
        margin-top: 1px;
        line-height: 1.3;
    }

    .bm-badge {
        background: var(--success-lt);
        color: #047857;
        border-radius: var(--r-pill);
        padding: 3px 10px;
        font-size: 11px;
        font-weight: 800;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .bm-badge.alt {
        background: var(--brand-50);
        color: var(--brand-700);
    }

    /* ══════════════════════════════════════════
   FOLD 4 - KEY OBSERVATIONS (slide-up hover)
   ══════════════════════════════════════════ */
    .obs-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 14px;
    }

    .obs-card {
        background: #fff;
        border: 1px solid var(--gray-200);
        border-radius: var(--r-lg);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        position: relative;
        cursor: default;
        min-height: 160px;
        transition: box-shadow .22s var(--ease), border-color .22s var(--ease);
    }

    .obs-card:hover {
        box-shadow: var(--shadow-lg);
        border-color: var(--brand-200);
    }

    /* Default state: number badge + title visible */
    .obs-card-default {
        padding: 22px 20px 20px;
        transition: transform .3s var(--ease), opacity .3s var(--ease);
    }

    .obs-card:hover .obs-card-default {
        transform: translateY(-8px);
        opacity: 0;
    }

    .obs-num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--brand-50);
        border: 1.5px solid var(--brand-200);
        font-size: 14px;
        font-weight: 800;
        color: var(--brand-600);
        margin-bottom: 12px;
    }

    .obs-title {
        font-size: 16px;
        font-weight: 700;
        color: var(--brand-800);
        line-height: inherit;
    }

    /* Hover state: slides up from bottom */
    .obs-card-hover {
        position: absolute;
        inset: 0;
        background: var(--brand-800);
        padding: 22px 20px 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        transform: translateY(100%);
        opacity: 0;
        transition: transform .3s var(--ease), opacity .3s var(--ease);
    }

    .obs-card:hover .obs-card-hover {
        transform: translateY(0);
        opacity: 1;
    }

    .obs-card-hover .obs-title {
        color: #fff;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: .06em;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
        padding-bottom: 10px;
        display: none;
    }

    .obs-body {
        font-size: 13px;
        color: rgba(255, 255, 255, .82);
        line-height: 1.6;
    }

    .obs-body strong {
        color: #fff;
        font-weight: 700;
    }

    /* ── Disclaimer ── */
    .disclaimer {
        max-width: inherit;
        margin: 20px auto 24px;
        border-radius: 4px;
        border: 1px solid var(--Theme-Yellow-400, #F1C94E);
        background: var(--Theme-Yellow-50, #FDF9EB);
        padding: 10px;
        color: var(--Text-Grey-700, #344054);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 1.6;
    }

    .disclaimer strong {
        font-weight: 700;
    }

    @media (max-width: 640px) {
        .fold1-hero {
            flex-direction: column;
        }

        .onboarding-grid {
            grid-template-columns: 1fr;
        }

        .obs-grid {
            grid-template-columns: 1fr;
        }

        .side-cards {
            flex-direction: column;
        }
    }

    /* ─── Lets_Build section ─── */
    section.Lets_Build {
        background: var(--White, #FFF);
        padding: 72px 0;
    }

    section.Lets_Build .Sec_Title h2 {
        color: var(--Theme-Dark-Blue-800, #26244A);
        font-family: Inter;
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px;
        letter-spacing: -0.72px;
        text-align: center;
        padding-bottom: 0;
    }

    section.Lets_Build .Sec_Title h2 span {
        color: var(--Theme-Blue-500, #3A58EF);
        text-align: center;
        font-family: Inter;
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px;
        letter-spacing: -0.72px;
    }

    section.Lets_Build .Sec_Title p {
        color: var(--Text-Grey-600, #475467);
        text-align: center;
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
        margin-bottom: 36px;
    }

    .Lets_Build_Box {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
        margin-bottom: 0;
    }

    .Lets_Build_Box a.Schedule_Call_Btn {
        border-radius: 4px;
        background: var(--Theme-Blue-500, #3A58EF);
        box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
        padding: 12px 20px;
        display: inline-block;
        color: var(--White, #FFF);
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
    }

    .Lets_Build_Box a.Schedule_Call_Btn:hover {
        border-radius: 4px;
        background: var(--Theme-Blue-800, #182878);
        box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    }

    .Lets_Build_Box a.Chat_Btn {
        border-radius: 4px;
        border: 1px solid var(--Theme-Blue-500, #3A58EF);
        padding: 12px 20px;
        color: var(--Theme-Blue-500, #3A58EF);
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .Lets_Build_Box a.Chat_Btn:hover {
        background: var(--Theme-Blue-500, #3A58EF);
        color: #fff;
    }

    .Lets_Build_Box a.Chat_Btn:hover svg path {
        stroke: #fff;
    }

    .Lets_Build a.Call_Btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        color: var(--Text-Grey-500, #5D667B);
        text-align: center;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
    }

    section.Schedule_Contact {
        background: transparent;
        padding: 0;
    }

    /* Schedule_Consultation */
    .Schedule_Consultation {
        border-radius: 12px;
        border: 1px solid var(--Text-Grey-200, #EAECF0);
        background: #FFF;
        padding: 24px;
    }

    .Schedule_Consultation h2 {
        color: var(--Text-Grey-800, #1D2939);
        font-family: Inter;
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: 130%;
        margin-bottom: 4px;
    }

    .Schedule_Consultation p {
        color: var(--Text-Grey-500, #5D667B);
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        margin-bottom: 24px;
    }

    .Schedule_Consultation form .form-floating>.form-select {
        padding: 5px 16px;
        background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        background-size: 14px;
        background-position: right .75rem center;
        background-repeat: no-repeat;
    }

    .Schedule_Consultation form button.Submit_Btn {
        border-radius: 4px;
        background: var(--Theme-Blue-500, #3A58EF);
        padding: 12px 20px;
        color: var(--White, #FFF);
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0;
        width: 100%;
    }

    .Schedule_Consultation form a.Submit_Btn:hover {
        border-radius: 4px;
        background: var(--Theme-Blue-800, #182878);
        box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    }

    /* Quick_Contact */
    .Quick_Contact {
        border-radius: 12px;
        border: 1px solid var(--Text-Grey-200, #EAECF0);
        background: var(--White, #FFF);
        padding: 24px;
    }

    .Quick_Contact h3 {
        color: var(--Theme-Dark-Blue-800, #26244A);
        font-family: Inter;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 30px;
        margin-bottom: 24px;
    }

    .Quick_Contact_Box {
        display: flex;
        align-items: start;
        gap: 16px;
        margin-bottom: 24px;
    }

    .Quick_Contact_Box span {
        border-radius: 8px;
        background: var(--Theme-Blue-50, #EBEEFD);
        padding: 12px;
    }

    .Quick_Contact_Box_Text label {
        color: var(--Text-Grey-500, #5D667B);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
        margin-bottom: 4px;
    }

    .Quick_Contact_Box_Text p,
    .Quick_Contact_Box_Text a {
        color: var(--Text-Grey-700, #344054);
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 28px;
    }

    .Quick_Contact_Box:last-child {
        margin: 0;
    }

    @media (max-width: 1366.51px) {

        .Quick_Contact_Box_Text p,
        .Quick_Contact_Box_Text a {
            font-size: 16px;
        }
    }

    @media (max-width: 767.51px) {
        .Lets_Build_Box {
            flex-direction: column;
        }

        .Lets_Build_Box a.Schedule_Call_Btn,
        .Lets_Build_Box a.Chat_Btn {
            padding: 12px 14px;
        }

        .Schedule_Consultation h2 {
            font-size: 20px;
        }
    }



    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: 'Inter', sans-serif;
        color: #101828;
        background: #fff;
    }

    :root {
        --brand-50: #EBEEFD;
        --brand-500: #3A58EF;
        --brand-600: #314BD0;
        --brand-800: #12327B;
        --purple-50: #F3F1FD;
        --purple-400: #7162EA;
        --purple-500: #5849D0;
        --gray-50: #F9FAFB;
        --gray-200: #EAECF0;
        --gray-400: #98A2B3;
        --gray-500: #667085;
        --gray-600: #475467;
        --gray-700: #344054;
        --gray-900: #101828;
        --green: #12B76A;
    }

    /* ── UTILITY BAR ── */
    .top-bar {
        background: var(--brand-50);
        height: 44px;
        padding: 0 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--gray-200);
    }

    .top-bar span {
        font-size: 13px;
        font-weight: 500;
        color: var(--gray-700);
    }

    .top-bar strong {
        color: var(--brand-500);
    }

    .top-bar-right {
        display: flex;
        gap: 10px;
    }

    .btn-xs-ghost {
        background: transparent;
        border: 1px solid var(--brand-500);
        color: var(--brand-500);
        border-radius: 4px;
        padding: 5px 12px;
        font: 600 13px 'Inter', sans-serif;
        cursor: pointer;
    }

    .btn-xs {
        background: var(--brand-500);
        border: none;
        color: #fff;
        border-radius: 4px;
        padding: 5px 13px;
        font: 600 13px 'Inter', sans-serif;
        cursor: pointer;
    }

    .btn-xs:hover {
        background: var(--brand-600);
    }

    /* ── MAIN HEADER ── */
    .main-header {
        background: #fff;
        height: 88px;
        padding: 0 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--gray-200);
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 1px 4px rgba(16, 24, 40, .06);
    }

    .logo {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
    }

    .logo-mark {
        width: 40px;
        height: 40px;
        background: var(--brand-500);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 18px;
        font-weight: 900;
    }

    .logo-text {
        font-size: 20px;
        font-weight: 700;
        color: var(--gray-900);
    }

    .logo-text span {
        color: var(--brand-500);
    }

    .nav-links {
        display: flex;
        gap: 32px;
    }

    .nav-links a {
        font: 600 15px 'Inter', sans-serif;
        color: var(--gray-700);
        text-decoration: none;
    }

    .nav-links a.active,
    .nav-links a:hover {
        color: var(--brand-500);
    }

    .hdr-cta {
        display: flex;
        gap: 10px;
    }

    .btn-outline {
        background: transparent;
        border: 1px solid var(--brand-500);
        color: var(--brand-500);
        border-radius: 4px;
        padding: 8px 16px;
        font: 600 14px 'Inter', sans-serif;
        cursor: pointer;
    }

    .btn-fill {
        background: var(--brand-500);
        border: none;
        color: #fff;
        border-radius: 4px;
        padding: 8px 16px;
        font: 600 14px 'Inter', sans-serif;
        cursor: pointer;
    }

    .btn-fill:hover {
        background: var(--brand-600);
    }

    /* ── SUB-NAV ── */
    .sub-nav {
        background: var(--brand-50);
        height: 64px;
        padding: 0 24px 0 140px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--gray-200);
    }

    .sub-tabs {
        display: flex;
        gap: 4px;
    }

    .sub-tab {
        font: 600 14px 'Inter', sans-serif;
        color: var(--gray-600);
        padding: 8px 16px;
        border-radius: 4px;
        border: none;
        background: transparent;
        cursor: pointer;
        transition: all .15s;
    }

    .sub-tab:hover {
        background: #D8DEFC;
        color: var(--brand-500);
    }

    .sub-tab.active {
        background: var(--brand-500);
        color: #fff;
    }

    /* ── BREADCRUMB ── */
    .breadcrumb {
        background: var(--gray-50);
        padding: 13px 140px;
        display: flex;
        gap: 8px;
        align-items: center;
        border-bottom: 1px solid var(--gray-200);
    }

    .breadcrumb a {
        font: 500 13px 'Inter', sans-serif;
        color: var(--gray-500);
        text-decoration: none;
    }

    .breadcrumb a:hover {
        color: var(--brand-500);
    }

    .breadcrumb-sep {
        color: var(--gray-400);
        font-size: 11px;
    }

    .breadcrumb-now {
        font: 600 13px 'Inter', sans-serif;
        color: var(--brand-500);
    }

    /* ══════════════════════════════════════════
       BUNDLED SECTION — card grid layout
    ══════════════════════════════════════════ */
    .section-bundled {
        background: var(--brand-50);
        padding: 72px 140px;
    }

    .section-bundled-title {
        text-align: center;
        margin-bottom: 24px;
    }

    .bundled-header {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 32px;
        flex-wrap: wrap;
        gap: 16px;
    }

    .bundled-title-group {
        text-align: center;
    }

    .bundled-title-group h3 {
        font: 700 28px/1.2 'Inter', sans-serif;
        color: var(--gray-900);
        margin-bottom: 6px;
    }

    .bundled-title-group p {
        font: 400 16px/1.5 'Inter', sans-serif;
        color: var(--gray-600);
    }

    .bundled-badge-set {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border-radius: 64px;
        padding: 5px 14px;
        font: 700 12px 'Inter', sans-serif;
        white-space: nowrap;
    }

    .badge-green {
        background: #ECFDF3;
        color: #027a48;
    }

    .badge-blue {
        background: #EEF2FF;
        color: var(--brand-500);
        border: 1px solid #c7d2fe;
    }

    /* 3-col card grid */
    .bundled-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .bundled-card {
        background: #fff;
        border: 1px solid var(--gray-200);
        border-radius: 10px;
        padding: 20px 22px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        transition: box-shadow .2s, border-color .2s;
        position: relative;
    }

    .bundled-card:hover {
        box-shadow: 0 6px 20px rgba(58, 88, 239, .1);
        border-color: #c7d2fe;
    }

    .bc-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
    }

    .bc-name {
        font: 600 16px/1.3 'Inter', sans-serif;
        color: var(--gray-900);
        flex: 1;
    }

    .bc-free {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: #ECFDF3;
        color: #027a48;
        border-radius: 64px;
        padding: 2px 10px;
        font: 700 11px 'Inter', sans-serif;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .bc-free svg {
        width: 10px;
        height: 10px;
    }

    .bc-desc-row {
        display: flex;
        align-items: flex-start;
        gap: 7px;
    }

    .bc-desc {
        font: 400 14px/1.5 'Inter', sans-serif;
        color: var(--gray-600);
        flex: 1;
    }

    /* info icon — shows desc on hover */
    .iw {
        position: relative;
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .ii {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--gray-200);
        color: var(--gray-600);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font: 700 10px/1 Georgia, serif;
        font-style: italic;
        cursor: default;
        transition: background .15s, color .15s;
        user-select: none;
    }

    .ii:hover {
        background: var(--brand-500);
        color: #fff;
    }

    .itt {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        left: 22px;
        top: 50%;
        transform: translateY(-50%);
        background: var(--gray-900);
        color: #fff;
        font: 400 12px/1.5 'Inter', sans-serif;
        font-style: normal;
        padding: 8px 12px;
        border-radius: 6px;
        width: 230px;
        z-index: 600;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
        transition: opacity .15s;
    }

    .itt::before {
        content: '';
        position: absolute;
        right: 100%;
        top: 50%;
        transform: translateY(-50%);
        border: 5px solid transparent;
        border-right-color: var(--gray-900);
    }

    .iw:hover .itt {
        visibility: visible;
        opacity: 1;
    }

    /* ══════════════════════════════════════════
       ADD-ON PLANS
    ══════════════════════════════════════════ */
    .section-addons {
        padding: 72px 140px;
    }

    .sec-hdr {
        text-align: center;
        margin-bottom: 48px;
    }

    .sec-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border-radius: 64px;
        padding: 4px 14px;
        font: 700 12px 'Inter', sans-serif;
        margin-bottom: 14px;
    }

    .sec-eyebrow.orange {
        background: #FFF7ED;
        color: #c2410c;
    }

    .sec-eyebrow.purple {
        background: var(--purple-50);
        color: var(--purple-500);
    }

    .sec-hdr h2 {
        font: 700 34px/1.2 'Inter', sans-serif;
        color: var(--gray-900);
        letter-spacing: -.01em;
        margin-bottom: 14px;
    }

    .sec-hdr p {
        font: 400 17px/1.6 'Inter', sans-serif;
        color: var(--gray-600);
        max-width: 600px;
        margin: 0 auto;
    }

    .plan-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .plan-card {
        border: 1px solid var(--gray-200);
        border-radius: 14px;
        overflow: hidden;
        background: #fff;
        display: flex;
        flex-direction: column;
        box-shadow: 0 1px 4px rgba(16, 24, 40, .07);
        transition: box-shadow .2s, transform .2s;
    }

    .plan-card:hover {
        box-shadow: 0 12px 28px rgba(16, 24, 40, .12);
        transform: translateY(-3px);
    }

    .plan-card.pop {
        border: 2px solid var(--brand-500);
        position: relative;
    }

    .pop-badge {
        position: absolute;
        top: -1px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--brand-500);
        color: #fff;
        border-radius: 0 0 8px 8px;
        font: 700 10px 'Inter', sans-serif;
        padding: 4px 16px;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    /* card band */
    .plan-band {
        padding: 28px 26px 22px;
    }

    .plan-card.e1 .plan-band {
        background: var(--gray-50);
        border-bottom: 1px solid var(--gray-200);
    }

    .plan-card.pop .plan-band {
        border-bottom: 1px solid #c7d2fe;
    }

    .plan-card.e3 .plan-band {
        background: linear-gradient(150deg, #1e1b4b, var(--brand-800));
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .plan-tier {
        font: 700 11px 'Inter', sans-serif;
        text-transform: uppercase;
        letter-spacing: .08em;
        margin-bottom: 8px;
    }

    .plan-card.e1 .plan-tier,
    .plan-card.pop .plan-tier {
        color: var(--purple-500);
    }

    .plan-card.e3 .plan-tier {
        color: #a5b4fc;
    }

    .plan-name {
        font: 700 26px 'Inter', sans-serif;
        margin-bottom: 4px;
    }

    .plan-card.e1 .plan-name,
    .plan-card.pop .plan-name {
        color: var(--gray-900);
    }

    .plan-card.e3 .plan-name {
        color: #fff;
    }

    .plan-for {
        font: 500 13px/1.4 'Inter', sans-serif;
        margin-bottom: 18px;
    }

    .plan-card.e1 .plan-for,
    .plan-card.pop .plan-for {
        color: var(--gray-500);
    }

    .plan-card.e3 .plan-for {
        color: rgba(255, 255, 255, .6);
    }

    .plan-price {
        display: flex;
        align-items: baseline;
        gap: 3px;
        margin-bottom: 20px;
    }

    .plan-amt {
        font: 700 38px/1 'Inter', sans-serif;
    }

    .plan-card.e1 .plan-amt,
    .plan-card.pop .plan-amt {
        color: var(--gray-900);
    }

    .plan-card.e3 .plan-amt {
        color: #fff;
    }

    .plan-per {
        font: 500 14px 'Inter', sans-serif;
    }

    .plan-card.e1 .plan-per,
    .plan-card.pop .plan-per {
        color: var(--gray-500);
    }

    .plan-card.e3 .plan-per {
        color: rgba(255, 255, 255, .55);
    }

    .plan-cta {
        width: 100%;
        padding: 10px;
        border-radius: 4px;
        font: 600 15px 'Inter', sans-serif;
        cursor: pointer;
        border: none;
    }

    .cta-fill {
        background: var(--brand-500);
        color: #fff;
    }

    .cta-fill:hover {
        background: var(--brand-600);
    }

    .cta-stroke {
        background: transparent;
        border: 1.5px solid var(--brand-500);
        color: var(--brand-500);
    }

    .cta-ghost {
        background: rgba(255, 255, 255, .12);
        color: #fff;
        border: 1.5px solid rgba(255, 255, 255, .35);
    }

    .cta-ghost:hover {
        background: rgba(255, 255, 255, .22);
    }

    /* feature list */
    .plan-feats {
        padding: 22px 26px;
        flex: 1;
    }

    .feats-lbl {
        font: 700 11px 'Inter', sans-serif;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--gray-400);
        margin-bottom: 14px;
    }

    .plan-card.e3 .feats-lbl {
        color: rgba(255, 255, 255, .35);
    }

    .feat-row {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        margin-bottom: 11px;
    }

    .fcheck {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        flex-shrink: 0;
        margin-top: 1px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .plan-card.e1 .fcheck,
    .plan-card.pop .fcheck {
        background: #ECFDF3;
    }

    .plan-card.e3 .fcheck {
        background: rgba(18, 183, 106, .2);
    }

    .fcheck svg {
        width: 10px;
        height: 10px;
    }

    .feat-txt {
        font: 500 13px/1.4 'Inter', sans-serif;
        flex: 1;
    }

    .plan-card.e1 .feat-txt,
    .plan-card.pop .feat-txt {
        color: var(--gray-700);
    }

    .plan-card.e3 .feat-txt {
        color: rgba(255, 255, 255, .85);
    }

    .inherit-row {
        font: 600 12px 'Inter', sans-serif;
        border-radius: 4px;
        padding: 6px 12px;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .plan-card.e1 .inherit-row,
    .plan-card.pop .inherit-row {
        background: var(--brand-50);
        color: var(--brand-500);
    }

    .plan-card.e3 .inherit-row {
        background: rgba(58, 88, 239, .2);
        color: #93c5fd;
    }

    .inherit-plus {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: transparent;
        border: 1.5px solid #3A58EF;
        color: #3A58EF;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        flex-shrink: 0;
        line-height: 1;
        padding-bottom: 0;
        text-align: center;
        vertical-align: middle;
    }

    .section .Sec_Title {}

    .section .Sec_Title h2 {
        color: var(--Theme-Dark-Blue-800, #26244A);
        font-family: Inter;
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px;
        letter-spacing: -0.72px;
        text-align: center;
        padding-bottom: 0;
    }

    .section .Sec_Title h2 span {
        font-family: Inter;
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px;
        letter-spacing: -0.72px;
        text-align: center;
        padding-bottom: 0;
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 1100px) {

        .section-bundled,
        .section-addons {
            padding: 56px 40px;
        }

        .bundled-grid {
            grid-template-columns: repeat(2, 1fr);
        }

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

    @media (max-width: 768px) {
        .bundled-grid {
            grid-template-columns: 1fr;
        }

        .note-grid {
            grid-template-columns: 1fr;
        }

        .nav-links,
        .hdr-cta .btn-outline {
            display: none;
        }

        .main-header {
            padding: 0 20px;
        }

        .breadcrumb,
        .sub-nav {
            padding-left: 20px;
        }
    }

    section.bg-blue {
        background: #EBEEFD;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
    --brand-50:  #EBEEFD;
    --brand-100: #D8DEFC;
    --brand-200: #9CABF7;
    --brand-300: #758AF4;
    --brand-400: #4E69F1;
    --brand-500: #3A58EF;
    --brand-600: #314BD0;
    --brand-700: #283FB1;
    --brand-800: #12327B;
    --brand-900: #04092A;
    --gray-50:  #F9FAFB;
    --gray-100: #F2F4F7;
    --gray-200: #EAECF0;
    --gray-300: #D0D5DD;
    --gray-400: #98A2B3;
    --gray-500: #667085;
    --gray-600: #475467;
    --gray-700: #344054;
    --gray-800: #1D2939;
    --gray-900: #101828;
    --success: #12B76A;
    --success-lt: #D1FAE5;
    --warning: #F79009;
    --warning-lt: #FEF3C7;
    --shadow-sm: 0 1px 3px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.06);
    --shadow-md: 0 4px 8px rgba(16,24,40,.08);
    --shadow-lg: 0 12px 24px rgba(16,24,40,.10);
    --r-xs: 4px; --r-sm: 5px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 64px;
    --ease: cubic-bezier(.4,0,.2,1);
    --page-max: 1040px;
    }
    html { scroll-behavior: smooth; }
    body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    /* background: var(--brand-50); */
    color: var(--gray-900);
    min-height: 100vh;
    padding: 0;
    }

    /* ── Section wrapper ── */
    .section {
    /* max-width: var(--page-max);
    margin: 0 auto 32px; */
    }

    /* ── Section header ── */
    .section-hdr {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 18px;
    }
    .section-hdr .eyebrow {
    font-size: 11px; font-weight: 700; color: var(--gray-400);
    text-transform: uppercase; letter-spacing: .1em;
    }
    .section-hdr .sec-title {
    font-size: 18px; font-weight: 700; color: var(--gray-900); letter-spacing: -.02em;
    }
    .section-hdr .sec-sub {
    font-size: 13px; color: var(--gray-500); margin-top: 2px;
    }

    /* ══════════════════════════════════════════
    FOLD 1 - FREE ONBOARDING CARDS
    ══════════════════════════════════════════ */
    .fold1-hero {
    background: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-600) 100%);
    border-radius: var(--r-xl);
    padding: 28px 32px 24px;
    margin-bottom: 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    flex-wrap: wrap;
    }
    .fold1-hero-text .tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--r-pill); padding: 3px 12px;
    font-size: 11px; font-weight: 700; color: #fff; letter-spacing: .06em; text-transform: uppercase;
    margin-bottom: 10px;
    }
    .fold1-hero-text h2 {
    font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.03em; line-height: 1.2;
    }
    .fold1-hero-text p {
    font-size: 13px; color: rgba(255,255,255,.75); margin-top: 6px; max-width: 480px; line-height: 1.5;
    }
    .fold1-hero-badge {
    background: #fff;
    border-radius: var(--r-lg);
    padding: 16px 24px;
    text-align: center;
    flex-shrink: 0;
    }
    .fold1-hero-badge .price { font-size: 32px; font-weight: 900; color: var(--success); letter-spacing: -.04em; }
    .fold1-hero-badge .price-label { font-size: 12px; color: var(--gray-500); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }

    /* ── Compact top-aligned onboarding grid ── */
    .onboarding-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-auto-rows: 1fr;
    gap: 12px;
    align-items: stretch;
    }

    .ob-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-lg);
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
    }


    .ob-check {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--success-lt);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .ob-check svg { width: 13px; height: 11px; }
   


    /* ── ob-card: same slide-up hover as obs-card ── */
    .ob-card {
    height: 100%;
    min-height: 160px;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    cursor: default;
    transition: box-shadow .22s var(--ease), border-color .22s var(--ease);
    }
    .ob-card:hover { box-shadow: var(--shadow-lg); border-color: var(--brand-200); }
    .ob-card-default {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
    }
    .ob-card:hover .ob-card-default {
    transform: translateY(-8px);
    opacity: 0;
    }
    .ob-desc {
    position: absolute;
    inset: 0;
    background: var(--brand-800);
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: translateY(100%);
    opacity: 0;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
    }
    .ob-card:hover .ob-desc {
    transform: translateY(0);
    opacity: 1;
    }
    .ob-desc-title {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid rgba(255,255,255,.15);
    padding-bottom: 8px;
    }
 

    /* ══════════════════════════════════════════
    ADD-ON SQUARE CARDS
    ══════════════════════════════════════════ */
    .addon-section { max-width: var(--page-max); margin: 0 auto 32px; }

    .addon-header-card {
    background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-800) 100%);
    border-radius: var(--r-xl);
    padding: 22px 28px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    margin-bottom: 14px;
    }
    .addon-header-text .addon-label {
    font-size: 11px; font-weight: 800; color: rgba(255,255,255,.65);
    text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px;
    }
    .addon-header-text h3 {
    font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -.03em; line-height: 1.2;
    }
    .addon-header-text p { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 5px; }
    .addon-header-pill {
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--r-pill); padding: 8px 20px;
    font-size: 14px; font-weight: 800; color: #fff; white-space: nowrap; flex-shrink: 0;
    }

    .addon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    }
    .addon-card {
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 1.5px solid var(--brand-200);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 20px 16px; text-align: center; gap: 8px;
    transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
    position: relative; overflow: hidden;
    }
    .addon-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--brand-50) 0%, rgba(255,255,255,0) 60%);
    pointer-events: none;
    }
    .addon-card:hover { box-shadow: var(--shadow-md); border-color: var(--brand-400); transform: translateY(-2px); }
    .addon-card.custom-card { border-color: var(--gray-300); }
    .addon-card.custom-card::before { background: linear-gradient(135deg, var(--gray-100) 0%, rgba(255,255,255,0) 60%); }
    .addon-months { font-size: 12px; font-weight: 600; color: var(--gray-600); line-height: 1.35; }
    .addon-price { font-size: 28px; font-weight: 900; color: var(--brand-500); letter-spacing: -.04em; line-height: 1; }
    .addon-price.custom { font-size: 16px; font-style: italic; color: var(--gray-400); font-weight: 600; }
    .addon-per { font-size: 11px; color: var(--gray-400); font-weight: 500; }

    /* ══════════════════════════════════════════
    FOLD 2 - CATCH-UP PRICING TABLE + TABS
    ══════════════════════════════════════════ */

    /* Tab bar - matches Monthly/Yearly pill toggle */
    .tab-bar {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-pill);
    padding: 3px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    }
    .tab-btn {
    padding: 6px 20px;
    border-radius: var(--r-pill);
    border: none;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 600; color: var(--gray-500);
    cursor: pointer;
    transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
    white-space: nowrap;
    }
    .tab-btn.active {
    background: var(--brand-800);
    color: #fff;
    box-shadow: 0 1px 4px rgba(18,50,123,.22);
    }
    .tab-btn:not(.active):hover { background: var(--brand-50); color: var(--brand-600); }

    .tab-pane { display: none; }
    .tab-pane.active { display: block; }

    /* ── Catch-up section layout ─────────────────────── */
    .cu-top-bar {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 14px;
    margin-bottom: 18px;
    }
    .cu-dropdowns-row {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
    }
    .cu-sel-group {
    display: flex; flex-direction: column; gap: 4px; min-width: 220px;
    }
    .cu-sel-label {
    font-size: 10px; font-weight: 700; color: var(--gray-500);
    text-transform: uppercase; letter-spacing: .09em;
    }
    .cu-sel-wrap { position: relative; }
    .cu-sel-wrap::after {
    content: ''; position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent; border-top: 6px solid var(--gray-500);
    pointer-events: none; margin-top: 3px;
    }
    .cu-sel-wrap select {
    width: 100%; appearance: none;
    background: #fff; border: 1px solid var(--gray-300);
    border-radius: var(--r-md); padding: 9px 36px 9px 13px;
    font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 500; color: var(--gray-800);
    cursor: pointer; box-shadow: var(--shadow-sm);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
    }
    .cu-sel-wrap select:focus {
    outline: none; border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(58,88,239,.12);
    }


    /* Price card - full width horizontal */
    .cu-price-card {
    background: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-600) 100%);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    padding: 28px 36px;
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    }
    .cu-card-left {
    flex: 1.2;
    display: flex; flex-direction: column; gap: 10px;
    }
    .cu-card-label {
    font-size: 11px; font-weight: 800; color: rgba(255,255,255,.55);
    text-transform: uppercase; letter-spacing: .1em;
    }
    .cu-card-desc {
    font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.5; max-width: 260px;
    }
    .cu-card-divider {
    width: 1px; align-self: stretch;
    background: rgba(255,255,255,.15);
    margin: 0 32px;
    flex-shrink: 0;
    }
    .cu-card-center {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-align: center;
    }
    .cu-card-right {
    flex: 1;
    display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
    }
    .cu-turn-label {
    font-size: 11px; color: rgba(255,255,255,.5); font-weight: 500;
    }
    .cu-card-badges {
    display: flex; flex-wrap: wrap; gap: 6px;
    }
    .cu-badge-acct {
    display: inline-flex; align-items: center;
    background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.35);
    color: #fff; border-radius: var(--r-pill);
    padding: 4px 13px; font-size: 11px; font-weight: 700; white-space: nowrap;
    }
    .cu-badge-mo {
    display: inline-flex; align-items: center;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.8); border-radius: var(--r-pill);
    padding: 4px 13px; font-size: 11px; font-weight: 600; white-space: nowrap;
    }
    .cu-price-amt {
    font-size: 3.6rem; font-weight: 700; color: #fff;
    letter-spacing: -.05em; line-height: 1;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
    }
    .cu-price-amt.flash { opacity: 0; transform: translateY(-7px); }
    .cu-price-per {
    font-size: 12px; font-weight: 500; color: rgba(255,255,255,.6);
    margin-top: -2px;
    }
    .cu-payroll-note {
    font-size: 12px; font-weight: 600; color: rgba(255,255,255,.8);
    background: rgba(255,255,255,.12); border-radius: var(--r-pill);
    padding: 4px 14px; border: 1px solid rgba(255,255,255,.2);
    margin-top: 2px;
    }
    .cu-turnaround {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; color: #fff;
    background: rgba(18,183,106,.25); border: 1px solid rgba(18,183,106,.4);
    border-radius: var(--r-pill); padding: 6px 16px;
    }
    .cu-cta-btn {
    background: #fff; color: var(--brand-700);
    border: none; border-radius: var(--r-md);
    padding: 12px 28px;
    font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 800;
    cursor: pointer; letter-spacing: -.01em; white-space: nowrap;
    transition: background .18s var(--ease), transform .15s var(--ease);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    }
    .cu-cta-btn:hover { background: var(--brand-50); transform: translateY(-1px); }

    @media (max-width: 800px) {
    .cu-price-card { flex-direction: column; align-items: flex-start; padding: 24px 20px; }
    .cu-card-divider { width: 100%; height: 1px; margin: 16px 0; align-self: auto; }
    .cu-card-right { align-items: flex-start; }
    .cu-cta-btn { width: 100%; text-align: center; }
    }

    /* Pricing table - clean white card matching reference */
    .pricing-tbl-wrap {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    }
    .ptbl { width: 100%; border-collapse: collapse; }

    /* Header row - no background, uppercase label + small sub-label */
    .ptbl thead tr {
    border-bottom: 1px solid var(--gray-200);
    }
    .ptbl thead th {
    background: #fff;
    padding: 14px 20px 12px;
    font-size: 11px; font-weight: 700; color: var(--gray-500);
    text-transform: uppercase; letter-spacing: .08em;
    text-align: center;
    vertical-align: bottom;
    line-height: 1.3;
    white-space: nowrap;
    }
    .ptbl thead th:first-child { text-align: left; padding-left: 24px; }
    .ptbl thead th .col-sub {
    display: block;
    font-size: 11px; font-weight: 400; color: var(--gray-400);
    text-transform: none; letter-spacing: 0;
    margin-top: 2px;
    }

    /* Body rows */
    .ptbl tbody tr { border-bottom: 1px solid var(--gray-100); }
    .ptbl tbody tr:last-child { border-bottom: none; }
    .ptbl tbody tr:hover { background: var(--brand-50); transition: background .12s var(--ease); }
    .ptbl tbody td {
    padding: 15px 20px;
    font-size: 14px; color: var(--gray-600);
    text-align: center; vertical-align: middle;
    }
    .ptbl tbody td:first-child {
    text-align: left;
    padding-left: 24px;
    font-size: 14px; font-weight: 500; color: var(--gray-700);
    white-space: nowrap;
    }

    /* Price cell - bold blue number + lighter /mo */
    .ptbl .price-cell {
    font-size: 15px; font-weight: 700; color: var(--brand-600);
    }
    .ptbl .price-cell .mo {
    font-size: 12px; font-weight: 400; color: var(--gray-400);
    }
    .ptbl .custom-cell {
    color: var(--gray-400); font-style: italic; font-size: 13px;
    }

    /* ══════════════════════════════════════════
    SIDE INFO CARDS - Image-1 card style
    ══════════════════════════════════════════ */
    .side-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-top: 24px;
    }
    .side-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-xl);
    padding: 24px 26px 22px;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
    transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
    }
    .side-card:hover { box-shadow: var(--shadow-md); border-color: var(--brand-200); }
    .side-card-icon-wrap {
    width: 40px; height: 40px; border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; margin-bottom: 14px;
    }
    .side-card-icon-wrap.blue  { background: var(--brand-50); }
    .side-card-icon-wrap.green { background: var(--success-lt); }
    .side-card-icon-wrap.amber { background: var(--warning-lt); }
    .side-card-title {
    font-size: 14px; font-weight: 700; color: var(--gray-900);
    letter-spacing: -.01em; margin-bottom: 16px;
    }
    .side-card-rows { display: flex; flex-direction: column; gap: 0; }
    .sc-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; padding: 9px 12px; border-radius: var(--r-sm);
    }
    .sc-row:nth-child(odd) { background: var(--gray-50); }
    .sc-row-label { font-size: 13px; color: var(--gray-600); line-height: 1.4; }
    .sc-row-val { font-size: 13px; font-weight: 700; color: var(--gray-800); text-align: right; white-space: nowrap; }
    .sc-row-val.green { color: var(--success); }
    .sc-row-val.blue  { color: var(--brand-600); }
    .sc-row-val.muted { color: var(--gray-400); font-weight: 400; font-style: italic; }
    @media (max-width: 640px) { .side-cards { grid-template-columns: 1fr; } }

    /* Notes box */
    .notes-box {
    max-width: inherit;
    margin: 20px auto 24px;
    border-radius: 4px;
    border: 1px solid var(--Theme-Yellow-400, #F1C94E);
    background: var(--Theme-Yellow-50, #FDF9EB);
    padding: 10px;
    color: var(--Text-Grey-700, #344054);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.6;
    }
    .notes-box strong { font-weight: 700; }


    /* ══════════════════════════════════════════
    INFO PANELS - Turnaround + Benchmark
    ══════════════════════════════════════════ */
    .info-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
    }
    @media (max-width: 720px) { .info-panels { grid-template-columns: 1fr; } }

    .info-panel {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-xl);
    padding: 22px 22px 18px;
    box-shadow: var(--shadow-sm);
    }

    .panel-header {
    display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
    }
    .panel-icon {
    width: 36px; height: 36px; border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .panel-icon.green { background: var(--success-lt); color: var(--success); }
    .panel-icon.amber { background: var(--warning-lt); color: var(--warning); }
    .panel-label { font-size: 10px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .08em; }
    .panel-title { font-size: 14px; font-weight: 700; color: var(--gray-900); letter-spacing: -.01em; margin-top: 2px; }

    /* Turnaround bar rows */
    .turnaround-rows { display: flex; flex-direction: column; gap: 8px; }
    .ta-row { display: grid; grid-template-columns: 90px 1fr 60px; align-items: center; gap: 10px; }
    .ta-range { font-size: 12px; font-weight: 600; color: var(--gray-600); white-space: nowrap; }
    .ta-bar-wrap { height: 6px; background: var(--gray-100); border-radius: 99px; overflow: hidden; }
    .ta-bar { height: 100%; background: linear-gradient(90deg, var(--success) 0%, #34d399 100%); border-radius: 99px; }
    .ta-bar.custom { background: var(--gray-300); }
    .ta-val { font-size: 12px; font-weight: 700; color: var(--success); text-align: right; white-space: nowrap; }
    .ta-val.muted { color: var(--gray-400); font-weight: 400; font-style: italic; }

    /* Benchmark rows */
    .benchmark-rows { display: flex; flex-direction: column; gap: 0; }
    .bm-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; padding: 9px 10px; border-radius: var(--r-sm);
    }
    .bm-row:nth-child(odd) { background: var(--gray-50); }
    .bm-left { flex: 1; min-width: 0; }
    .bm-period { font-size: 11px; font-weight: 800; color: var(--gray-700); text-transform: uppercase; letter-spacing: .05em; }
    .bm-competitors { font-size: 11.5px; color: var(--gray-500); margin-top: 1px; line-height: 1.3; }
    .bm-badge {
    background: var(--success-lt); color: #047857;
    border-radius: var(--r-pill); padding: 3px 10px;
    font-size: 11px; font-weight: 800; white-space: nowrap; flex-shrink: 0;
    }
    .bm-badge.alt {
    background: var(--brand-50); color: var(--brand-700);
    }

    /* ══════════════════════════════════════════
    FOLD 4 - KEY OBSERVATIONS (slide-up hover)
    ══════════════════════════════════════════ */
    .obs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    }

    .obs-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    position: relative;
    cursor: default;
    min-height: 160px;
    transition: box-shadow .22s var(--ease), border-color .22s var(--ease);
    }
    .obs-card:hover { box-shadow: var(--shadow-lg); border-color: var(--brand-200); }

    /* Default state: number badge + title visible */
    .obs-card-default {
    padding: 22px 20px 20px;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
    }
    .obs-card:hover .obs-card-default {
    transform: translateY(-8px);
    opacity: 0;
    }

    .obs-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--brand-50); border: 1.5px solid var(--brand-200);
    font-size: 13px; font-weight: 800; color: var(--brand-600);
    margin-bottom: 12px;
    }
    .obs-title {
    font-size: 13px; font-weight: 800; color: var(--brand-800);
    line-height: 1.4;
    }

    /* Hover state: slides up from bottom */
    .obs-card-hover {
    position: absolute;
    inset: 0;
    background: var(--brand-800);
    padding: 22px 20px 20px;
    display: flex; flex-direction: column; gap: 10px;
    transform: translateY(100%);
    opacity: 0;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
    }
    .obs-card:hover .obs-card-hover {
    transform: translateY(0);
    opacity: 1;
    }
    .obs-card-hover .obs-title {
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid rgba(255,255,255,.15);
    padding-bottom: 10px;
    }
    .obs-body { font-size: 12.5px; color: rgba(255,255,255,.82); line-height: 1.6; }
    .obs-body strong { color: #fff; font-weight: 700; }

    /* ── Disclaimer ── */
    .disclaimer {
        max-width: inherit;
        margin: 20px auto 24px;
        border-radius: 4px;
        border: 1px solid var(--Theme-Yellow-400, #F1C94E);
        background: var(--Theme-Yellow-50, #FDF9EB);
        padding: 10px;
        color: var(--Text-Grey-700, #344054);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 1.6;
    }
    .disclaimer strong { font-weight: 700; }

    /* ══════════════════════════════════════════
    FEATURES / SERVICES ACCORDION
    ══════════════════════════════════════════ */
    .features-accordion {
        margin-top: 20px;
        border: 1px solid var(--gray-200);
        border-radius: var(--r-xl);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        background: #fff;
    }

    /* Column header inside features-accordion (mirrors pt-head of Table_Id1) */
    .features-accordion .pt-head {
        position: relative; /* override sticky — parent overflow:hidden prevents it */
        top: auto;
        grid-template-columns: 1fr 2fr 220px;
    }
    .features-accordion .pt-head .hd-feat + .hd-feat {
        border-left: 1px solid var(--gray-200);
    }
    .features-accordion .fa-incl-badge {
        font-size: 11px;
        font-weight: 700;
        color: var(--brand-700);
        text-transform: inherit;
        letter-spacing: .08em;
        font-size: 20px;
        font-weight: 600;
    }

    /* acc-tbl inside features-accordion — align th/td widths with pt-head columns */
    .features-accordion .acc-tbl {
        table-layout: fixed;
    }
    .features-accordion .acc-tbl thead th.col-desc,
    .features-accordion .acc-tbl td.td-desc {
        width: calc((100% - 100px) * 2 / 3);
    }
    .features-accordion .acc-tbl thead th.col-incl,
    .features-accordion .acc-tbl td.td-incl {
        width: 220px;
    }
    .features-accordion .acc-tbl td.td-service {
        min-width: auto;
        width: calc((100% - 100px) / 3);
    }

    /* Accordion item wrapper */
    .acc-item {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
    }
    .acc-item.open { box-shadow: var(--shadow-md); border-color: var(--brand-200); }

    /* Accordion header - clickable */
    .acc-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-600) 100%);
    transition: opacity .18s var(--ease);
    }
    .acc-header:hover { opacity: .92; }
    .acc-header-title {
    font-size: 13px; font-weight: 800; color: #fff;
    text-transform: uppercase; letter-spacing: .06em;
    }
    .acc-header-right {
    display: flex; align-items: center; gap: 12px;
    }
    .acc-count {
    font-size: 11px; font-weight: 600; color: rgba(255,255,255,.6);
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--r-pill); padding: 3px 12px;
    }
    .acc-chevron {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    transition: transform .3s var(--ease);
    }
    .acc-item.open .acc-chevron { transform: rotate(180deg); }
    .acc-chevron svg { width: 14px; height: 14px; color: #fff; }

    /* Accordion body - collapsible */
    .acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s var(--ease);
    }
    .acc-item.open .acc-body {
    max-height: 3000px;
    }

    /* Inner table */
    .acc-tbl { width: 100%; border-collapse: collapse; }
    .acc-tbl thead tr { border-bottom: 1px solid var(--gray-200); }
    .acc-tbl thead th {
    padding: 11px 22px;
    font-size: 14px; font-weight: 700; color: var(--gray-400);
    text-transform: uppercase; letter-spacing: .08em;
    text-align: left; background: var(--gray-50);
    }
    .acc-tbl thead th.col-desc { width: 52%; }
    .acc-tbl thead th.col-incl { text-align: center; width: 70px; }

    .acc-tbl tbody tr { border-bottom: 1px solid var(--gray-100); }
    .acc-tbl tbody tr:last-child { border-bottom: none; }
    .acc-tbl tbody tr:hover { background: var(--gray-50); transition: background .12s var(--ease); }

    .acc-tbl tbody td {
    padding: 13px 22px;
    font-size: 13px; color: var(--gray-700);
    vertical-align: top; line-height: 1.55;
    }
    .acc-tbl tbody td.td-service {
    font-weight: 600; color: var(--gray-800); font-size: 14px;
    white-space: normal; min-width: 200px;
    }
    .acc-tbl tbody td.td-desc {
    font-size: 14px; color: var(--gray-500); line-height: 1.6;
    }
    .acc-tbl tbody td.td-incl {
    text-align: center; vertical-align: middle;
    }
    .acc-tbl .check-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: #D8DEFC;;
    }
    .acc-tbl .check-icon svg { width: 11px; height: 9px; }
    .acc-tbl .check-icon svg path {
        stroke: #3A58EF;
    }
    @media (max-width: 640px) {
    .acc-header { padding: 14px 16px; }
    .acc-header-title { font-size: 11.5px; }
    .acc-tbl thead th { padding: 10px 14px; font-size: 9px; }
    .acc-tbl tbody td { padding: 11px 14px; }
    .acc-tbl tbody td.td-service { font-size: 12.5px; min-width: auto; }
    .acc-tbl tbody td.td-desc { font-size: 11.5px; }
    }

    @media (max-width: 640px) {
    .fold1-hero { flex-direction: column; }
    .onboarding-grid { grid-template-columns: 1fr; }
    .obs-grid { grid-template-columns: 1fr; }
    .side-cards { flex-direction: column; }
    }

    /* ══════════════════════════════════════════
    ADD-ON SERVICES CARDS
    ══════════════════════════════════════════ */
    .alc-section {
    margin-top: 36px;
    }
    .alc-heading {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px;
    }
    .alc-heading h2 {
    font-size: 18px; font-weight: 800; color: var(--gray-900);
    letter-spacing: -.02em;
    }
    .alc-heading p {
    font-size: 13px; color: var(--gray-500); margin-top: 3px;
    }
    .alc-sub-label {
    display: block;
    font-size: 13px; font-weight: 800; color: var(--brand-800);
    text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: 14px; margin-top: 28px;
    padding: 10px 16px;
    background: var(--brand-50);
    border-left: 4px solid var(--brand-600);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    }
    .alc-sub-label:first-of-type { margin-top: 0; }

    .alc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    }
    @media (max-width: 700px) { .alc-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 480px) { .alc-grid { grid-template-columns: 1fr; } }

    .alc-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-lg);
    padding: 20px 18px 18px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    cursor: default;
    transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
    min-height: 160px;
    display: flex;
    flex-direction: column;
    }
    .alc-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--brand-200);
    transform: translateY(-2px);
    }
    .alc-card::before {
    content: '';
    position: absolute;
    left: 0; top: 16px; bottom: 16px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--brand-400);
    opacity: 0;
    transition: opacity .2s var(--ease);
    }
    .alc-card:hover::before { opacity: 1; }

    .alc-price {
    position: absolute;
    top: 14px; right: 14px;
    background: var(--brand-800);
    color: #fff;
    border-radius: var(--r-pill);
    padding: 3px 11px;
    font-size: 12px; font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    z-index: 2;
    text-align: center;
    line-height: 1.4;
    }

    .alc-default {
    flex: 1;
    display: flex; flex-direction: column;
    justify-content: center; align-items: flex-start;
    gap: 10px;
    transition: opacity .2s var(--ease);
    }
    .alc-card:hover .alc-default { opacity: 0; pointer-events: none; }

    .alc-icon { font-size: 26px; line-height: 1; }
    .alc-title-default {
    font-size: 14px; font-weight: 700; color: var(--brand-900);
    line-height: 1.3; padding-right: 110px;
    }

    .alc-hover {
    position: absolute;
    inset: 0;
    padding: 18px;
    display: flex; flex-direction: column;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s var(--ease);
    padding-top: 16px;
    }
    .alc-card:hover .alc-hover { opacity: 1; pointer-events: auto; }

    .alc-title-hover {
    font-size: 13px; font-weight: 700; color: var(--brand-800);
    line-height: 1.3; padding-right: 110px;
    margin-top: 2px;
    }
    .alc-desc {
    font-size: 12px; font-weight: 400; color: var(--gray-600);
    line-height: 1.55; flex: 1;
    }

    .features-accordion .price-card {
        width: 220px;
    }

    .features-accordion .hd-feat:last-child {
        width: 350px;
    }

    .features-accordion .acc-tbl td.td-service {
        width: 400px;
    }

    .features-accordion .hd-feat:first-child {
        width: 400px;
    }

    .features-accordion .requirement_icn h2 {
        font-size: 18px;
    }