/* Pricing UI shared by the pricing page and the homepage. Uses tokens from index.css. Link it AFTER seo.css */
.pp-offer {
    background: var(--navy);
    color: #fff;
    text-align: center;
    padding: 10px 16px;
    font-size: 14px;
    min-height: 42px;
    margin-top: var(--nav)
}

.pp-offer b {
    color: var(--green)
}

.pp-offer+.page {
    padding-top: 40px
}

#offer {
    display: inline-block;
    transition: opacity .25s
}

.pz-hero {
    text-align: center;
    max-width: 860px;
    margin: 0 auto
}

.pz-pill {
    display: inline-block;
    background: var(--alt);
    border: 1px solid var(--border);
    color: var(--teal);
    font-weight: 600;
    font-size: 14px;
    padding: 8px 20px;
    border-radius: 100px;
    margin-bottom: 18px
}

.page .pz-hero h1 {
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    letter-spacing: -.03em;
    margin-bottom: 12px
}

.page .pz-hero p {
    font-size: 1.1rem;
    margin: 0
}

.pz-ctl {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 34px 0 46px
}

.pz-toggle {
    display: inline-flex;
    background: #EEF3F1;
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 5px
}

.pz-toggle button {
    padding: 10px 22px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 15px;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: .2s
}

.pz-toggle button[aria-pressed="true"] {
    background: #fff;
    color: var(--navy);
    box-shadow: 0 2px 8px rgba(0, 17, 63, .1)
}

.pz-toggle.sm button {
    padding: 8px 16px;
    font-size: 14px
}

.pz-save {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--teal);
    background: rgba(37, 211, 102, .14);
    padding: 2px 8px;
    border-radius: 100px;
    white-space: nowrap
}

.pz-compare {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--green);
    color: var(--navy);
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 100px;
    background: #fff;
    transition: .2s
}

.pz-compare:hover {
    background: var(--alt)
}

.pz-compare svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--green);
    stroke-width: 2.4;
    stroke-linecap: round
}

.pz-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch
}

.pz-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px 26px
}

.pz-card.pop {
    border: 2px solid var(--green);
    box-shadow: 0 12px 36px rgba(37, 211, 102, .16)
}

.pz-flag {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--grad);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 5px 16px;
    border-radius: 100px;
    white-space: nowrap
}

.pz-card h3 {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 4px
}

.pz-card .pz-tag {
    color: var(--teal);
    font-weight: 600;
    font-size: 15px;
    margin: 0 0 22px;
    min-height: 1.5em
}

.pz-amt {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--navy)
}

.pz-amt small {
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0
}

.pz-bill {
    font-size: 14px;
    color: var(--muted);
    margin: 8px 0 22px;
    min-height: 3em;
    line-height: 1.5
}

.pz-bill s {
    color: #94A3B8
}

.pz-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #1DB954;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    padding: 14px;
    border-radius: 10px;
    transition: .2s
}

.pz-cta:hover {
    background: #17a349;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, .3)
}

.pz-cta.ghost {
    background: #fff;
    color: var(--navy);
    border: 1.5px solid var(--border)
}

.pz-cta.ghost:hover {
    border-color: var(--green)
}

.pz-card .pz-note {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 16px 0 0
}

.pz-card .pz-lbl {
    border-top: 1px solid var(--border);
    margin: 22px 0 10px;
    padding-top: 18px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted)
}

.pz-card ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.pz-card li {
    position: relative;
    margin: 0;
    padding: 6px 0 6px 28px;
    font-size: 14px;
    color: var(--navy)
}

.pz-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 7px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(37, 211, 102, .16);
    color: var(--teal);
    font-size: 11px;
    font-weight: 800;
    display: grid;
    place-items: center
}

.ptable td small {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted)
}

.ptable td[data-p] {
    color: var(--navy);
    font-weight: 700
}

.yes {
    color: var(--teal) !important;
    font-weight: 700
}

.no {
    color: #94A3B8 !important
}

.page .grid.int {
    margin-bottom: 12px
}

.page .grid.int .card h3 {
    margin-bottom: 4px
}

@media(max-width:1100px) {
    .pz-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

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

    .pz-toggle button {
        padding: 9px 16px
    }

    .pz-ctl {
        margin: 26px 0 38px
    }
}

/* prices stay hidden until the visitor country is known (pricing.js adds/removes this class) */
.pz-wait [data-p],
.pz-wait [data-b] {
    visibility: hidden
}

.pz-toggle.sm {
    display: none
}