/* Waslolo public pricing section. Separate from main style.css. */
#pricing .pricing-grid {
    align-items: stretch;
    padding-top: 20px; /* badge clearance without moving Pro card */
    row-gap: 32px;
}
#pricing .pricing-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
    min-width: 0;
    padding: 24px;
    gap: 10px;
}
#pricing .pricing-card-popular {
    border: 2px solid #0c9995;
    background: linear-gradient(165deg, #f1fffd 0%, #fff 44%);
    box-shadow: 0 14px 38px rgba(5, 112, 115, .13);
    /* No translate / extra padding: all cards align at the top. */
}
#pricing .pricing-popular-badge {
    position: absolute;
    top: -17px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #087e80;
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .02em;
    padding: .5rem 1.15rem;
    border-radius: 999px;
    box-shadow: 0 5px 14px rgba(4, 110, 110, .18);
    white-space: nowrap;
}
#pricing .pricing-billing { font-size: .9rem; }
#pricing .pricing-list { margin-top: 8px; }
#pricing .pricing-unlimited {
    font-weight: 700;
    color: #087e80;
    display: flex;
    align-items: center;
    gap: 8px;
}
#pricing .pricing-check {
    display: inline-grid;
    place-items: center;
    flex: 0 0 21px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    color: #087e80;
    background: #e7f8f3;
    font-size: .8rem;
}
#pricing .pricing-card > .btn {
    margin-top: auto;
    align-self: stretch;
    text-align: center;
}
#pricing .pricing-card-popular .btn-primary {
    background-color: #087e80;
    border-color: #087e80;
}
@media (max-width: 800px) {
    #pricing .pricing-grid { row-gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    #pricing .pricing-card-popular { transition: none; }
}