/* Mailgun-pricing-page structural pattern: a dark banner behind the intro,
   tall enough that the card row visually rises up out of it -- but using
   Kisoma's own dark green (the same tone as the homepage hero), never
   Mailgun's black, and the cards themselves stay white/light (only the
   banner is dark), never a full green card face. */
.kisoma-pricing-section {
    position: relative;
    overflow: hidden;
    background: #fff;
    padding: clamp(3.25rem, 6vw, 4.75rem) 0 clamp(3.25rem, 6vw, 4.75rem);
}

.kisoma-pricing-section::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0 0 auto;
    height: clamp(21rem, 30vw, 27rem);
    background: #063b2c;
}

.kisoma-pricing-section > .container {
    position: relative;
    z-index: 1;
}

/* The shared card section now provides the pricing-page hero. */
body .kisoma-pricing-hero {
    display: none;
}

.kisoma-pricing--sales {
    padding-bottom: clamp(3.25rem, 6vw, 4.75rem);
}

.kisoma-pricing--sales .kisoma-pricing-header {
    margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
    max-width: 620px;
    text-align: center;
}

/* Size/weight/tracking/case owned centrally by public-typography.css's
   eyebrow selector group; only the pill container styling and color stay
   here. Light-on-dark since the header sits on the banner above. */
.kisoma-pricing--sales .kisoma-pricing-eyebrow {
    display: inline-flex;
    min-height: 28px;
    padding: 0.4rem 0.85rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #9ee4bd;
}

/* Typography (size/line-height/letter-spacing) owned centrally by
   public-typography.css's H2 selector group; only color/layout stay here. */
.kisoma-pricing--sales .kisoma-pricing-title {
    color: #fff;
    margin-bottom: 0.75rem;
}

.kisoma-pricing--sales .kisoma-pricing-subtitle {
    color: rgba(255, 255, 255, 0.76);
    margin-inline: auto;
    max-width: 520px;
}

.kisoma-pricing--sales .kisoma-pricing-grid {
    position: relative;
    z-index: 1;
}

/* A restrained public-facing radius (task target: 10-14px) without touching
   the shared base card's 18px, which the authenticated subscription page
   also relies on. Shadow override removed entirely -- the base card's own
   subtle shadow (0 6px 24px, 5.5% opacity) is enough; no large shadow. Cards
   stay white/light regardless of sitting partly on the dark banner. */
.kisoma-pricing--sales .kisoma-pricing-card {
    padding: 1.5rem;
    border-radius: 12px;
}

/* Recommended-plan ribbon: a small full-width band naming the plan
   "Recommended" -- contained inside the card (the shared base card has
   overflow:hidden, so this never overlaps the dark banner like Mailgun's
   ribbon literally does), which keeps it a light, one-line accent instead
   of a heavier applied effect. */
.kisoma-pricing--sales .kisoma-pricing-card-ribbon {
    margin: -1.5rem -1.5rem 1.25rem;
    padding: 0.5rem 1.5rem;
    background: var(--pricing-green, #168447);
    color: #fff;
    font-size: var(--kisoma-font-eyebrow);
    font-weight: 600;
    letter-spacing: var(--kisoma-letter-eyebrow);
    text-align: center;
    text-transform: uppercase;
}

/* Plan/card title: reuse the public H3 token (size + line-height) instead of
   the base card's own arbitrary clamp(). */
.kisoma-pricing--sales .kisoma-pricing-card-title {
    font-size: var(--kisoma-font-h3);
    line-height: var(--kisoma-leading-h3);
}

/* Badge chips (Free/Prepaid/Postpaid/Popular/Current) and the feature-list
   micro-heading are small uppercase labels -- reuse the eyebrow token. */
.kisoma-pricing--sales .kisoma-pricing-badge {
    font-size: var(--kisoma-font-eyebrow);
    letter-spacing: var(--kisoma-letter-eyebrow);
}

.kisoma-pricing--sales .kisoma-pricing-features-title {
    font-size: var(--kisoma-font-eyebrow);
    letter-spacing: var(--kisoma-letter-eyebrow);
}

/* Feature list rows: reuse the meta token instead of the base card's own
   arbitrary size. */
.kisoma-pricing--sales .kisoma-pricing-feature {
    font-size: var(--kisoma-font-meta);
}

.kisoma-pricing--sales .kisoma-pricing-card-top,
.kisoma-pricing--sales .kisoma-pricing-price,
.kisoma-pricing--sales .kisoma-pricing-meta {
    min-height: 0;
}

.kisoma-pricing--sales .kisoma-pricing-price {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
}

.kisoma-pricing--sales .kisoma-pricing-badges {
    margin-bottom: 0.85rem;
    min-height: 0;
}

.kisoma-pricing--sales .kisoma-pricing-summary {
    margin: 1.5rem 0 1.4rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

/* Capped at the H2 token -- the same size as the section title ("Simple
   Plans for Every School") -- so the price never reads larger than the
   page's own heading. Kept visually distinct from that H2 via weight 700
   (H2 default is lighter) and normal tracking, since the price is prominent
   card content, not a heading. Also overrides the base card's non-standard
   `font-weight: 750`, which some fonts/browsers fall back on inconsistently. */
.kisoma-pricing--sales .kisoma-pricing-price-main {
    font-size: var(--kisoma-font-h2);
    font-weight: 700;
    line-height: var(--kisoma-leading-h2);
}

.kisoma-pricing--sales .kisoma-pricing-price-period {
    font-size: var(--kisoma-font-meta);
}

.kisoma-pricing--sales .kisoma-pricing-price.is-usage-based {
    align-items: stretch;
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kisoma-pricing--sales .kisoma-pricing-price-secondary {
    font-weight: 700;
}

.kisoma-pricing--sales .kisoma-pricing-price.is-usage-based .kisoma-pricing-price-main,
.kisoma-pricing--sales .kisoma-pricing-price.is-usage-based .kisoma-pricing-price-secondary {
    font-size: var(--kisoma-font-h2);
    line-height: var(--kisoma-leading-h2);
    white-space: nowrap;
}

.kisoma-pricing--sales .kisoma-pricing-meta {
    border-top: 1px solid #e3ebe6;
    gap: 0.75rem 1.25rem;
    margin: 1.25rem 0 0;
    padding-top: 1rem;
}

.kisoma-pricing--sales .kisoma-pricing-meta-item {
    font-size: var(--kisoma-font-meta);
    font-weight: 500;
}

.kisoma-pricing--sales .kisoma-pricing-actions {
    margin: 0 0 1.45rem;
}

/* Aligns to the canonical public button system (kisoma-public-buttons.css)
   -- height/radius/shadow only; kept scoped to --sales so the authenticated
   subscription page (subscription-pricing.css) is never touched. */
.kisoma-pricing--sales .kisoma-pricing-cta {
    min-height: var(--kisoma-btn-height, 48px);
    padding-inline: var(--kisoma-btn-padding-x, 24px);
    border-radius: var(--kisoma-btn-radius, 10px);
    box-shadow: none;
}

.kisoma-pricing--sales .kisoma-pricing-cta:hover,
.kisoma-pricing--sales .kisoma-pricing-cta:focus {
    box-shadow: none;
    transform: none;
}

/* A sitewide `a { color: #29363F !important; }` rule (style.css) silently
   wins over the shared --pricing-green-dark color on these <a>-tag CTAs
   without a matching !important -- scoped fix, not a new color: reuses
   the same accessible ink token every other secondary/inverse button uses. */
.kisoma-pricing--sales .kisoma-pricing-cta.is-secondary {
    color: var(--kisoma-btn-ink, #0f6b38) !important;
}

.kisoma-pricing--sales .kisoma-pricing-cta.is-secondary:hover,
.kisoma-pricing--sales .kisoma-pricing-cta.is-secondary:focus {
    color: var(--kisoma-btn-ink-hover, #0a5b2f) !important;
}

/* Gold/Recommended card's primary CTA sits on the green card background --
   this is the "inverse" variant (solid white surface, dark ink text)
   instead of the old translucent white-on-white-ish fill that read as low
   contrast. Secondary (.is-secondary) is not used on this card, only the
   primary slot, so this only ever targets the one "Get started" button. */
.kisoma-pricing--sales .kisoma-pricing-card.is-popular-postpaid .kisoma-pricing-cta {
    background: #fff;
    border-color: #fff;
    color: var(--kisoma-btn-ink, #0f6b38) !important;
}

.kisoma-pricing--sales .kisoma-pricing-card.is-popular-postpaid .kisoma-pricing-cta:hover,
.kisoma-pricing--sales .kisoma-pricing-card.is-popular-postpaid .kisoma-pricing-cta:focus {
    background: var(--kisoma-btn-surface-hover, #eef8f2);
    border-color: var(--kisoma-btn-surface-hover, #eef8f2);
    color: var(--kisoma-btn-ink-hover, #0a5b2f) !important;
    box-shadow: none;
}

.kisoma-pricing--sales .kisoma-pricing-features {
    margin-top: 0;
    padding-top: 1.35rem;
}

.kisoma-pricing--sales .kisoma-pricing-rate {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.05rem;
}

.kisoma-pricing--sales .kisoma-pricing-rate + .kisoma-pricing-rate {
    border-left: 1px solid #dce6df;
    margin-top: 0;
    padding-left: 1rem;
}

/* Recommended plan: the shared base card (subscription-pricing.css) already
   gives .is-featured a light gradient + a thin green top accent strip via
   ::before -- exactly the "small full-width top strip" treatment we want.
   That's intentionally left alone here rather than re-covered with a full
   green card face, so only a couple of small, light-theme touches remain. */
.kisoma-pricing--sales .kisoma-pricing-card.is-featured {
    border-color: rgba(22, 132, 71, 0.4);
}

.kisoma-pricing--sales .kisoma-pricing-card.is-popular-postpaid .kisoma-pricing-card-top {
    display: grid;
}

.kisoma-pricing--sales .kisoma-pricing-card.is-popular-postpaid .kisoma-pricing-card-title {
    line-height: var(--kisoma-leading-h3);
}

.kisoma-pricing--sales .kisoma-postpaid-rate-grid {
    align-items: stretch;
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kisoma-pricing--sales .kisoma-postpaid-rate {
    align-items: flex-start;
    min-width: 0;
}

.kisoma-pricing--sales .kisoma-postpaid-rate__amount {
    color: var(--pricing-ink, #1f2923);
    font-size: var(--kisoma-font-h2);
    font-weight: 700;
    letter-spacing: var(--kisoma-tracking-tight, -0.02em);
    line-height: var(--kisoma-leading-h2);
    white-space: nowrap;
}

.kisoma-pricing--sales .kisoma-postpaid-rate__label {
    color: var(--pricing-muted, #6d776f);
    font-size: var(--kisoma-font-meta);
    line-height: 1.3;
}

.kisoma-pricing--sales .kisoma-postpaid-duration {
    color: var(--pricing-muted, #6d776f);
    line-height: 1.3;
}

.kisoma-pricing--sales .kisoma-pricing-empty h3 {
    color: var(--pricing-ink);
    margin: 0;
}

@media (min-width: 1100px) {
    .kisoma-pricing--sales .kisoma-pricing-card.is-featured {
        transform: translateY(-8px);
    }

    .kisoma-pricing--sales .kisoma-pricing-card.is-featured:hover {
        transform: translateY(-11px);
    }
}

@media (max-width: 1099.98px) {
    .kisoma-pricing--sales .kisoma-pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .kisoma-pricing-section {
        padding: 3rem 0;
    }

    .kisoma-pricing--sales .kisoma-pricing-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .kisoma-pricing--sales .kisoma-pricing-header {
        margin-bottom: 1.4rem;
    }

    .kisoma-pricing--sales .kisoma-pricing-card {
        padding: 1.2rem;
    }

    .kisoma-pricing--sales .kisoma-pricing-card-ribbon {
        margin: -1.2rem -1.2rem 1.1rem;
        padding: 0.45rem 1.2rem;
    }
}

@media (max-width: 419.98px) {
    .kisoma-pricing--sales .kisoma-pricing-price.is-usage-based {
        grid-template-columns: minmax(0, 1fr);
    }

    .kisoma-pricing--sales .kisoma-pricing-rate + .kisoma-pricing-rate {
        border-left: 0;
        border-top: 1px solid #dce6df;
        padding-left: 0;
        padding-top: 0.7rem;
    }

    .kisoma-pricing--sales .kisoma-pricing-card.is-featured .kisoma-pricing-rate + .kisoma-pricing-rate {
        border-top-color: rgba(255, 255, 255, 0.2);
    }
}

/* Public pricing feature comparison */
.kisoma-pricing-compare {
    padding: 68px 0 76px;
    background: #f7f8f6;
}

.kisoma-pricing-compare__header {
    max-width: 680px;
    margin: 0 auto 32px;
    text-align: center;
}

.kisoma-pricing-compare__eyebrow {
    display: inline-flex;
    align-items: center;
    color: #087f58;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.kisoma-pricing-compare__header h2 {
    margin: 10px 0 8px;
    color: #102d2a;
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 700;
    letter-spacing: -.035em;
}

.kisoma-pricing-compare__header p {
    margin: 0;
    color: #61736f;
    font-size: 15px;
    line-height: 1.7;
}

.kisoma-pricing-compare__wrap {
    max-width: 1280px;
    margin: 0 auto;
    overflow-x: auto;
    background: #fff;
    border: 1px solid #dce4e0;
    border-radius: 14px;
    scrollbar-color: #9dcbbc #edf5f2;
    scrollbar-width: thin;
}

.kisoma-pricing-compare__wrap:focus-visible {
    outline: 3px solid rgba(10, 158, 34, .25);
    outline-offset: 4px;
}

.kisoma-pricing-compare__table {
    width: 100%;
    min-width: 820px;
    margin: 0;
    border-collapse: collapse;
    table-layout: auto;
}

.kisoma-pricing-compare__table th,
.kisoma-pricing-compare__table td {
    vertical-align: middle;
    border: 1px solid #dce4e0;
}

.kisoma-pricing-compare__table thead th {
    padding: 14px 16px;
    background: #fbfdfc;
    color: #173d38;
}

.kisoma-pricing-compare__feature-heading {
    position: sticky;
    left: 0;
    z-index: 3;
    width: 28%;
    min-width: 240px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.kisoma-pricing-compare__package-heading {
    min-width: 160px;
    text-align: center;
}

.kisoma-pricing-compare__package-heading.is-featured,
.kisoma-pricing-compare__cell.is-featured {
    background: #f1f9f4;
}

.kisoma-pricing-compare__package-heading.is-featured {
    box-shadow: inset 0 3px #087f58;
}

.kisoma-pricing-compare__package-card {
    display: flex;
    min-height: 38px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
}

.kisoma-pricing-compare__popular {
    padding: 4px 10px;
    border-radius: 999px;
    background: #087f58;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.25;
    text-transform: uppercase;
}

.kisoma-pricing-compare__row {
    transition: background-color .18s ease;
}

.kisoma-pricing-compare__row:hover {
    background: #f9fcfb;
}

.kisoma-pricing-compare__row:last-child > * {
    border-bottom-color: #dce4e0;
}

.kisoma-pricing-compare__feature {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 28%;
    min-width: 240px;
    padding: 14px 16px;
    background: #fff;
    color: #263d38;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
}

.kisoma-pricing-compare__row:hover .kisoma-pricing-compare__feature {
    background: #f9fcfb;
}

.kisoma-pricing-compare__cell {
    min-width: 160px;
    padding: 14px 16px;
    text-align: center;
}

.kisoma-pricing-compare__icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    transition: transform .18s ease;
}

.kisoma-pricing-compare__icon.is-included {
    background: #e5f5eb;
    color: #087f58;
}

.kisoma-pricing-compare__icon.is-excluded {
    background: transparent;
    color: #9aa7a3;
    font-size: 16px;
}

.kisoma-pricing-compare__row:hover .kisoma-pricing-compare__icon {
    transform: scale(1.06);
}

.kisoma-pricing-compare__row.is-collapsed-feature {
    display: none;
}

.kisoma-pricing-compare.is-expanded .kisoma-pricing-compare__row.is-collapsed-feature {
    display: table-row;
}

.kisoma-pricing-compare__toggle {
    margin-top: 20px;
    padding: 10px 18px;
    border: 1.5px solid #087f58;
    border-radius: 13px;
    background: #fff;
    color: #075b43;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    transition: background-color .16s ease, color .16s ease;
}

.kisoma-pricing-compare__toggle:hover,
.kisoma-pricing-compare__toggle:focus {
    background: #087f58;
    color: #fff;
}

.kisoma-pricing-compare__toggle:focus-visible {
    outline: 3px solid rgba(8, 127, 88, .22);
    outline-offset: 3px;
}

@media (max-width: 991px) {
    .kisoma-pricing-compare__table {
        min-width: 760px;
    }

    .kisoma-pricing-compare__feature-heading,
    .kisoma-pricing-compare__feature {
        width: 250px;
        min-width: 250px;
    }
}

@media (max-width: 767px) {
    .kisoma-pricing-compare {
        padding: 54px 0 62px;
    }

    .kisoma-pricing-compare__header {
        margin-bottom: 28px;
    }

    .kisoma-pricing-compare__wrap {
        border-radius: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kisoma-pricing-compare__row,
    .kisoma-pricing-compare__icon {
        transition: none;
    }
}
/* Public pricing hero */
.kisoma-pricing-hero {
    overflow: hidden;
    padding: 56px 0 66px;
    background: #f9fcfa;
}

.kisoma-pricing-hero__header {
    max-width: 680px;
    margin: 0 auto 28px;
    text-align: center;
}

.kisoma-pricing-hero__eyebrow {
    display: inline-flex;
    padding: 5px 12px;
    border: 1px solid #cee8dd;
    border-radius: 999px;
    background: #edf8f3;
    color: #087f58;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.kisoma-pricing-hero__title {
    max-width: 680px;
    margin: 11px auto 7px;
    color: #102d2a;
    font-size: clamp(30px, 3.2vw, 36px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.15;
}

.kisoma-pricing-hero__description {
    max-width: 620px;
    margin: 0 auto;
    color: #687a76;
    font-size: 14px;
    line-height: 1.55;
}

.kisoma-pricing-hero__visual {
    position: relative;
    width: calc(100% - 64px);
    max-width: 940px;
    margin: 0 auto;
}

.kisoma-pricing-hero__image-frame {
    position: relative;
    z-index: 1;
    overflow: hidden;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    border: 1px solid #dbe6e2;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 20px 48px rgba(17, 56, 49, .12);
}

.kisoma-pricing-hero__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
    object-fit: contain;
}

.kisoma-pricing-hero__floating-card {
    position: absolute;
    z-index: 2;
    display: flex;
    width: 148px;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 11px;
    border: 1px solid #dce7e3;
    border-radius: 14px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 10px 28px rgba(20, 61, 54, .14);
}

.kisoma-pricing-hero__floating-card--top-left {
    top: 13%;
    left: -28px;
}

.kisoma-pricing-hero__floating-card--top-right {
    top: 19%;
    right: -26px;
}

.kisoma-pricing-hero__floating-card--bottom-left {
    bottom: 14%;
    left: -28px;
}

.kisoma-pricing-hero__card-icon {
    display: inline-flex;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #e7f7ee;
    color: #087f58;
    font-size: 9px;
}

.kisoma-pricing-hero__floating-card > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.kisoma-pricing-hero__floating-card strong {
    color: #173d38;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.kisoma-pricing-hero__floating-card small {
    color: #70817d;
    font-size: 9px;
    line-height: 1.3;
}

.kisoma-pricing-hero__chips {
    position: absolute;
    right: 3%;
    bottom: 7%;
    z-index: 2;
    display: flex;
    max-width: 230px;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.kisoma-pricing-hero__chip {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border: 1px solid #d8e8e1;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 7px 18px rgba(20, 61, 54, .1);
    color: #087f58;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.kisoma-pricing-hero__chip i {
    font-size: 9px;
}

@media (max-width: 991px) {
    .kisoma-pricing-hero {
        padding: 52px 0 60px;
    }

    .kisoma-pricing-hero__visual {
        width: calc(100% - 44px);
    }

    .kisoma-pricing-hero__floating-card {
        width: 138px;
    }

    .kisoma-pricing-hero__floating-card--top-left,
    .kisoma-pricing-hero__floating-card--bottom-left {
        left: -20px;
    }

    .kisoma-pricing-hero__floating-card--top-right {
        right: -20px;
    }
}

@media (max-width: 767px) {
    .kisoma-pricing-hero {
        padding: 44px 0 50px;
    }

    .kisoma-pricing-hero__header {
        margin-bottom: 24px;
    }

    .kisoma-pricing-hero__title {
        font-size: clamp(28px, 8.5vw, 34px);
    }

    .kisoma-pricing-hero__description {
        font-size: 13px;
    }

    .kisoma-pricing-hero__visual {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .kisoma-pricing-hero__image-frame {
        order: -1;
        margin-bottom: 5px;
        border-radius: 15px;
        box-shadow: 0 12px 30px rgba(17, 56, 49, .1);
    }

    .kisoma-pricing-hero__floating-card,
    .kisoma-pricing-hero__chips {
        position: static;
        width: 100%;
        max-width: none;
    }

    .kisoma-pricing-hero__floating-card {
        align-items: center;
        box-shadow: 0 5px 16px rgba(20, 61, 54, .07);
    }

    .kisoma-pricing-hero__floating-card small {
        font-size: 10px;
    }

    .kisoma-pricing-hero__chips {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .kisoma-pricing-hero__chip {
        justify-content: center;
        padding-inline: 6px;
        font-size: 9px;
    }
}

@media (max-width: 419px) {
    .kisoma-pricing-hero__chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kisoma-pricing-hero__chip:last-child {
        grid-column: 1 / -1;
    }
}