/* YOUR EXISTING CSS — UNCHANGED */
/* CanonProof PI Hero — scoped (2026 split + readable everywhere) */
.cp-hero2 {
    position: relative;
    padding: 86px 0 78px;
    color: #fff;
    overflow: hidden;
    background: transparent;
    isolation: isolate;
}

    .cp-hero2:before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: radial-gradient(900px 600px at 18% 18%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%), radial-gradient(700px 520px at 86% 44%, rgba(87,188,226,.16), rgba(255,255,255,0) 62%), linear-gradient(135deg, #14252b 0%, #123543 45%, #0a5a74 100%);
    }

    .cp-hero2:after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 70%, rgba(245,248,250,.88) 70%, rgba(245,248,250,.94) 100%);
        clip-path: polygon(0 82%, 100% 66%, 100% 100%, 0 100%);
    }

    .cp-hero2 .cp-noise {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        opacity: .03;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
        mix-blend-mode: overlay;
    }

    .cp-hero2 .container {
        position: relative;
        z-index: 2;
    }

    .cp-hero2 .kicker {
        font-size: 12px;
        letter-spacing: .18em;
        text-transform: uppercase;
        opacity: .88;
        margin-bottom: 14px;
    }

    .cp-hero2 h1 {
        font-size: 54px;
        line-height: 1.02;
        font-weight: 850;
        margin: 0 0 14px;
        letter-spacing: -.025em;
        color: #F6FAFC;
    }

        .cp-hero2 h1 .hl {
            color: #6FD6A2;
            text-shadow: 0 10px 30px rgba(0,0,0,.22);
        }

    .cp-hero2 .lead {
        font-size: 18px;
        line-height: 1.65;
        color: rgba(240,246,250,.92);
        max-width: 560px;
        margin-bottom: 18px;
    }

    .cp-hero2 .sublead {
        font-size: 14px;
        color: rgba(240,246,250,.72);
        max-width: 560px;
        margin: 0 0 22px;
    }

    .cp-hero2 .points {
        margin: 0 0 26px;
        padding: 0;
        list-style: none;
        max-width: 580px;
    }

        .cp-hero2 .points li {
            display: flex;
            gap: 12px;
            margin: 12px 0;
            color: rgba(240,246,250,.88);
        }

        .cp-hero2 .points .dot {
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: linear-gradient(180deg, #6FD6A2, #2FAE79);
            margin-top: 7px;
            flex: 0 0 10px;
            box-shadow: 0 0 0 2px rgba(15,23,42,.45), 0 10px 24px rgba(0,0,0,.18);
        }

        .cp-hero2 .points strong {
            color: #fff;
            font-weight: 800;
        }

    .cp-hero2 .cta-row {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        margin-top: 65px;
    }

.btn-primary2 {
    background: #3FA6CC;
    border: 1px solid rgba(255,255,255,.16);
    color: #fff;
    padding: 14px 20px;
    border-radius: 14px;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 18px 54px rgba(0,0,0,.32);
    transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}

.cp-hero2 .btn-primary2:hover {
    opacity: .96;
    transform: translateY(-1px);
    box-shadow: 0 22px 70px rgba(0,0,0,.36);
}

.cp-hero2 .btn-ghost2 {
    background: rgba(15,23,42,.26);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(240,246,250,.92);
    opacity: 1;
    padding: 14px 18px;
    border-radius: 14px;
    font-weight: 750;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease, opacity .15s ease;
    backdrop-filter: blur(10px);
}

    .cp-hero2 .btn-ghost2:hover {
        background: rgba(15,23,42,.34);
        transform: translateY(-1px);
    }

.cp-hero2 .cp-cta-reassure {
    margin-top: 10px;
    font-size: 12px;
    color: #687377;
    letter-spacing: .02em;
}

.cp-hero2 .artifact {
    background: rgba(15,23,42,.86);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 34px 110px rgba(0,0,0,.48), 0 1px 0 rgba(255,255,255,.05) inset;
    backdrop-filter: blur(14px);
    transform: translateY(6px);
}

    .cp-hero2 .artifact .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

    .cp-hero2 .artifact .title {
        font-weight: 900;
        font-size: 16px;
        margin: 0;
    }

.cp-hero2 .badge-ok {
    background: rgba(230,244,234,.96);
    color: #2FAE79;
    border: 1px solid rgba(183,225,193,.95);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    padding: 7px 11px;
    white-space: nowrap;
}

.cp-hero2 .sheet {
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 12px;
}

.cp-hero2 .section-label {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .78;
    margin: 0 0 10px;
}

.cp-hero2 .rowline {
    margin: 9px 0;
    opacity: .93;
    font-size: 14px;
    line-height: 1.45;
}

    .cp-hero2 .rowline strong {
        color: #fff;
    }

.cp-hero2 .meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.10);
    font-size: 13px;
    opacity: .86;
}

    .cp-hero2 .meta div strong {
        color: rgba(255,255,255,.95);
    }

.cp-hero2 .verify-line {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(11,95,255,.13);
    border: 1px solid rgba(11,95,255,.23);
    font-size: 13px;
    line-height: 1.4;
    opacity: .96;
}

.cp-hero2 .micro {
    font-size: 12px;
    opacity: .78;
    line-height: 1.45;
    margin: 12px 0 0;
}

@media (max-width: 992px) {
    .cp-hero2 {
        padding: 60px 0;
    }

        .cp-hero2 h1 {
            font-size: 40px;
        }

        .cp-hero2 .artifact {
            margin-top: 22px;
            transform: none;
        }

        .cp-hero2:after {
            clip-path: polygon(0 86%, 100% 76%, 100% 100%, 0 100%);
        }
}

@supports not (clip-path: polygon(0 82%, 100% 66%, 100% 100%, 0 100%)) {
    .cp-hero2:after {
        clip-path: none;
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255,255,255,.95) 85%);
    }
}

.cp-scrutiny {
    padding: 84px 0;
    background: #fff;
}

    .cp-scrutiny .head-block {
        text-align: center;
        margin-bottom: 40px;
    }

        .cp-scrutiny .head-block h2 {
            font-weight: 900;
            letter-spacing: -0.02em;
            margin-bottom: 14px;
            color: #0f172a;
        }

            .cp-scrutiny .head-block h2 span {
                color: #0a5a74;
            }

        .cp-scrutiny .head-block p {
            max-width: 820px;
            margin: 0 auto;
            color: #526074;
            line-height: 1.7;
            font-size: 16px;
        }

    .cp-scrutiny .cp-cards {
        margin-top: 34px;
    }
    /* <-- no gap */

    .cp-scrutiny .cp-card {
        height: 100%;
        border-radius: 18px;
        border: 1px solid rgba(15, 23, 42, 0.10);
        background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
        padding: 26px 22px;
        transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }

        .cp-scrutiny .cp-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 24px 55px rgba(15, 23, 42, 0.10);
            border-color: rgba(10, 90, 116, 0.22);
        }

    .cp-scrutiny .cp-icon {
        width: 52px;
        height: 52px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(10, 90, 116, 0.08);
        border: 1px solid rgba(10, 90, 116, 0.18);
        margin-bottom: 14px;
    }

        .cp-scrutiny .cp-icon img {
            width: 26px;
            height: 26px;
            opacity: 0.95;
        }

    .cp-scrutiny .cp-micro {
        font-size: 12px;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: rgba(10, 90, 116, 0.78);
        font-weight: 800;
        margin-bottom: 10px;
    }

    .cp-scrutiny h3 {
        font-size: 20px;
        line-height: 1.25;
        letter-spacing: -0.015em;
        margin: 0 0 10px;
        font-weight: 900;
        color: #0f172a;
    }

    .cp-scrutiny p {
        margin: 0;
        color: #55657a;
        line-height: 1.7;
        font-size: 15px;
    }

    .cp-scrutiny .cp-bullets {
        margin-top: 14px;
        padding-left: 18px;
        color: #56667b;
        font-size: 14px;
        line-height: 1.7;
    }

        .cp-scrutiny .cp-bullets li {
            margin: 6px 0;
        }

@media (max-width: 992px) {
    .cp-scrutiny {
        padding: 64px 0;
    }

        .cp-scrutiny .head-block {
            margin-bottom: 28px;
        }
}

.cp-how {
    padding: 96px 0;
    background: linear-gradient(180deg, #f9fbfd 0%, #ffffff 100%);
}

    .cp-how .cnt-block h2 {
        font-weight: 900;
        letter-spacing: -0.02em;
        margin-bottom: 16px;
        color: #0f172a;
    }

    .cp-how .cnt-block p {
        color: #526074;
        line-height: 1.7;
        font-size: 16px;
        margin-bottom: 22px;
        max-width: 480px;
    }

    .cp-how .flow {
        list-style: none;
        padding: 0;
        margin: 0 0 26px;
    }

        .cp-how .flow li {
            display: flex;
            gap: 14px;
            margin: 14px 0;
            align-items: flex-start;
        }

    .cp-how .step {
        width: 28px;
        height: 28px;
        border-radius: 999px;
        background: rgba(63,166,204,.12);
        border: 1px solid rgba(63,166,204,.35);
        color: #3FA6CC;
        font-weight: 900;
        font-size: 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 28px;
        margin-top: 2px;
    }

    .cp-how .flow strong {
        color: #0f172a;
        font-weight: 800;
    }

    .cp-how .flow span {
        color: #55657a;
        font-size: 15px;
        line-height: 1.6;
    }

    .cp-how .link-primary {
        color: #3FA6CC;
        font-weight: 800;
        text-decoration: none;
        border-bottom: 1px solid rgba(63,166,204,.35);
        padding-bottom: 2px;
    }

        .cp-how .link-primary:hover {
            opacity: .85;
        }

    .cp-how figure {
        background: #ffffff;
        border-radius: 22px;
        border: 1px solid rgba(15,23,42,.10);
        box-shadow: 0 30px 80px rgba(15,23,42,.10);
        padding: 22px;
    }

        .cp-how figure img {
            width: 100%;
            border-radius: 14px;
        }

@media (max-width: 992px) {
    .cp-how {
        padding: 72px 0;
    }
}
/* CanonProof — Explainable Reasons section (homepage) */
.cp-reasons {
    /* Fix the "too much top, nothing bottom" problem */
    padding-top: 0 !important;
    padding-bottom: 96px !important;
    background: #fff;
}

@media (max-width: 992px) {
    .cp-reasons {
        padding-top: 46px !important;
        padding-bottom: 72px !important;
    }
}

.cp-reasons .cnt-block h2 {
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    color: #0f172a;
}

.cp-reasons .cnt-block p {
    color: #526074;
    line-height: 1.7;
    font-size: 16px;
    margin-bottom: 18px;
    max-width: 520px;
}

.cp-reasons .link-primary {
    color: #3FA6CC;
    font-weight: 850;
    text-decoration: none;
    border-bottom: 1px solid rgba(63,166,204,.35);
    padding-bottom: 2px;
}

    .cp-reasons .link-primary:hover {
        opacity: .85;
    }

/* Artifact container */
.cp-reasons .artifact {
    border-radius: 22px;
    border: 1px solid rgba(15,23,42,.10);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 34px 90px rgba(15,23,42,.12);
    padding: 20px;
}

.cp-reasons .artifact-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(15,23,42,.08);
    margin-bottom: 14px;
}

.cp-reasons .artifact-title {
    margin: 0;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.01em;
    font-size: 15px;
}

.cp-reasons .badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    padding: 7px 11px;
    border: 1px solid rgba(47,174,121,.35);
    background: rgba(230,244,234,.95);
    color: #2FAE79;
    white-space: nowrap;
}

.cp-reasons .scoregrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin: 12px 0 14px;
    font-size: 13px;
    color: #55657a;
}

    .cp-reasons .scoregrid strong {
        color: #0f172a;
    }

/* Split panels: Indicators + Reasoning */
.cp-reasons .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

@media (max-width: 992px) {
    .cp-reasons .split {
        grid-template-columns: 1fr;
    }
}

.cp-reasons .panel {
    border-radius: 16px;
    background: rgba(15,23,42,.03);
    border: 1px solid rgba(15,23,42,.08);
    padding: 14px;
    height: 100%;
}

    .cp-reasons .panel .label {
        font-size: 12px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: rgba(10, 90, 116, .85);
        font-weight: 900;
        margin-bottom: 10px;
    }

.cp-reasons .table {
    width: 100%;
    margin: 0;
    font-size: 13px;
    border-collapse: collapse;
}

    .cp-reasons .table td {
        padding: 8px 0;
        border-top: 1px dashed rgba(15,23,42,.12);
        vertical-align: top;
    }

    .cp-reasons .table tr:first-child td {
        border-top: none;
    }

.cp-reasons .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color: rgba(15,23,42,.80);
}

.cp-reasons .muted {
    color: rgba(15,23,42,.62);
}

.cp-reasons .reason {
    line-height: 1.55;
    color: rgba(15,23,42,.78);
}

.cp-reasons .note {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(63,166,204,.18);
    background: rgba(63,166,204,.08);
    color: rgba(15,23,42,.78);
    font-size: 13px;
    line-height: 1.55;
}

    .cp-reasons .note strong {
        color: #0f172a;
    }

/* Small “tabs” hint (static) */
.cp-reasons .tabs {
    display: inline-flex;
    gap: 8px;
    margin-bottom: 8px;
}

.cp-reasons .tab {
    font-size: 12px;
    font-weight: 900;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.10);
    background: #fff;
    color: rgba(15,23,42,.72);
}

    .cp-reasons .tab.active {
        border-color: rgba(63,166,204,.30);
        color: #0a5a74;
        background: rgba(63,166,204,.08);
    }
/* CanonProof: pricing section overrides (keep template layout, fix colors) */
.choose-pack.cp-pricing .get-started {
    background: #3FA6CC !important;
    border: 1px solid rgba(63,166,204,.35) !important;
    color: #fff !important;
    border-radius: 14px !important;
    font-weight: 850 !important;
    padding: 14px 20px !important;
    text-decoration: none !important;
    box-shadow: 0 18px 54px rgba(0,0,0,.12) !important;
    transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
    display: inline-block;
}

    .choose-pack.cp-pricing .get-started:hover {
        opacity: .96;
        transform: translateY(-1px);
        box-shadow: 0 22px 70px rgba(0,0,0,.16) !important;
    }

/* Remove orange accents in the little "graph" */
.choose-pack.cp-pricing .price .graph span.org {
    background: #3FA6CC !important;
}

/* Make the "active" plan feel premium (without changing structure) */
.choose-pack.cp-pricing ul.row > li.active .inner {
    border: 1px solid rgba(63,166,204,.35);
    box-shadow: 0 30px 90px rgba(15,23,42,.12);
    transform: translateY(-4px);
}

/* Small badge text styling */
.choose-pack.cp-pricing .you-choose {
    display: inline-block;
    margin-top: 10px;
    color: #0a5a74;
    font-weight: 800;
}

/* Price number polish */
.choose-pack.cp-pricing .amt {
    font-weight: 900;
    color: #0f172a;
}
/* Pricing toggle UI */
.cp-billing-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 18px 0 10px;
    flex-wrap: wrap;
}

    .cp-billing-toggle .lbl {
        font-weight: 850;
        color: #0f172a;
        font-size: 14px;
    }

.cp-switch {
    position: relative;
    width: 62px;
    height: 34px;
    border-radius: 999px;
    background: rgba(15,23,42,.10);
    border: 1px solid rgba(15,23,42,.12);
    cursor: pointer;
    padding: 3px;
    transition: background .15s ease, border-color .15s ease;
}

    .cp-switch .knob {
        width: 28px;
        height: 28px;
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 8px 20px rgba(15,23,42,.18);
        transform: translateX(0);
        transition: transform .18s ease;
    }

    .cp-switch[aria-checked="true"] {
        background: rgba(63,166,204,.18);
        border-color: rgba(63,166,204,.40);
    }

        .cp-switch[aria-checked="true"] .knob {
            transform: translateX(28px);
        }

.cp-save-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(63,166,204,.10);
    border: 1px solid rgba(63,166,204,.25);
    color: #0a5a74;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .01em;
}

/* ============================
       Pricing toggle: make it visible
       ============================ */

/* Wrap container (use your real wrapper class if different) */
.cp-billing-toggle,
.choose-pack .billing-toggle,
.pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 auto 28px;
    padding: 10px 14px;
}

    /* Text labels */
    .cp-billing-toggle .lbl,
    .choose-pack .billing-toggle .lbl,
    .pricing-toggle .lbl,
    .cp-billing-toggle label,
    .choose-pack .billing-toggle label,
    .pricing-toggle label {
        font-weight: 850;
        font-size: 16px;
        color: rgba(255,255,255,.92);
        letter-spacing: -0.01em;
        user-select: none;
    }

        /* Dim inactive label if you apply .is-active to the active side */
        .cp-billing-toggle .lbl.is-muted,
        .choose-pack .billing-toggle .lbl.is-muted,
        .pricing-toggle .lbl.is-muted {
            color: rgba(255,255,255,.55);
        }

    /* Switch track */
    .cp-billing-toggle .switch,
    .choose-pack .billing-toggle .switch,
    .pricing-toggle .switch {
        position: relative;
        width: 74px;
        height: 40px;
        border-radius: 999px;
        background: rgba(255,255,255,.10);
        border: 1px solid rgba(255,255,255,.22);
        box-shadow: 0 10px 28px rgba(0,0,0,.28);
        backdrop-filter: blur(8px);
        cursor: pointer;
    }

        /* Glow ring to separate from background */
        .cp-billing-toggle .switch:before,
        .choose-pack .billing-toggle .switch:before,
        .pricing-toggle .switch:before {
            content: "";
            position: absolute;
            inset: -3px;
            border-radius: 999px;
            background: radial-gradient(60% 120% at 50% 50%, rgba(63,166,204,.28), rgba(63,166,204,0) 70%);
            pointer-events: none;
        }

        /* Knob */
        .cp-billing-toggle .switch .knob,
        .choose-pack .billing-toggle .switch .knob,
        .pricing-toggle .switch .knob {
            position: absolute;
            top: 50%;
            left: 4px;
            width: 32px;
            height: 32px;
            transform: translateY(-50%);
            border-radius: 999px;
            background: #ffffff;
            box-shadow: 0 12px 22px rgba(0,0,0,.35);
            transition: left .18s ease, background .18s ease, box-shadow .18s ease;
        }

    /* When Yearly selected: add .is-yearly on the wrapper */
    .cp-billing-toggle.is-yearly .switch,
    .choose-pack .billing-toggle.is-yearly .switch,
    .pricing-toggle.is-yearly .switch {
        background: rgba(63,166,204,.22);
        border-color: rgba(63,166,204,.55);
    }

        .cp-billing-toggle.is-yearly .switch .knob,
        .choose-pack .billing-toggle.is-yearly .switch .knob,
        .pricing-toggle.is-yearly .switch .knob {
            left: calc(100% - 36px);
            background: #eaf7fc;
            box-shadow: 0 16px 30px rgba(63,166,204,.22), 0 12px 22px rgba(0,0,0,.25);
        }

    /* “2 months free” pill */
    .cp-billing-toggle .pill,
    .choose-pack .billing-toggle .pill,
    .pricing-toggle .pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 9px 12px;
        border-radius: 999px;
        font-weight: 900;
        font-size: 13px;
        letter-spacing: .02em;
        color: #0b3a4a;
        background: rgba(63,166,204,.92);
        border: 1px solid rgba(255,255,255,.22);
        box-shadow: 0 14px 32px rgba(0,0,0,.28);
    }

        /* Make pill less “lost” if you keep it on dark bg */
        .cp-billing-toggle .pill span,
        .choose-pack .billing-toggle .pill span,
        .pricing-toggle .pill span {
            color: rgba(15,23,42,.92);
        }

/* Mobile sizing */
@media (max-width: 768px) {
    .cp-billing-toggle, .choose-pack .billing-toggle, .pricing-toggle {
        gap: 10px;
        margin-bottom: 18px;
    }

        .cp-billing-toggle .switch,
        .choose-pack .billing-toggle .switch,
        .pricing-toggle .switch {
            width: 66px;
            height: 38px;
        }

            .cp-billing-toggle .switch .knob,
            .choose-pack .billing-toggle .switch .knob,
            .pricing-toggle .switch .knob {
                width: 30px;
                height: 30px;
            }
}

/* ============================
       "2 months free" savings pill
       ============================ */
.cp-save-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .02em;
    background: #42d79e;
    color: #0b3a2a;
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 10px 22px rgba(0,0,0,.28), 0 0 0 3px rgba(66,215,158,.22);
    white-space: nowrap;
}

    /* Checkmark = instant "saving" signal */
    .cp-save-pill::before {
        content: "✓";
        font-weight: 900;
    }

    /* Slight emphasis when visible */
    .cp-save-pill[style*="inline-flex"] {
        animation: cp-pill-pop .18s ease-out;
    }

@keyframes cp-pill-pop {
    from {
        transform: scale(.92);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}