/* Service tabs and plan cards inside the public Plans page. */
.wmp-shell .wup-hero h1 {
    max-width: 940px;
    margin-inline: auto;
    text-wrap: balance;
}

.wmp-shell :is(.wup-hero, .wup-smm-plans):lang(bn) {
    font-family: "Noto Sans Bengali", system-ui, sans-serif;
}

.wmp-shell .wup-hero:lang(bn) h1 {
    letter-spacing: normal;
    line-height: 1.28;
}

.wmp-shell .wup-hero > p {
    max-width: 56ch;
    margin-inline: auto;
    color: #566580;
    text-wrap: balance;
}

.wmp-shell .wup-hero > .wpp-eyebrow {
    text-transform: uppercase;
}

.wmp-shell .wup-hero:lang(bn) > .wpp-eyebrow {
    letter-spacing: normal;
    font-size: 12px;
}

.wmp-shell .wup-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    max-width: 620px;
    margin: 24px auto 0;
    padding: 6px;
    border: 1px solid #dce1f6;
    border-radius: 16px;
    background: #eeeffa;
}

.wmp-shell .wup-tab {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #4b5875;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.25;
    word-break: normal;
    overflow-wrap: normal;
    text-decoration: none;
}

.wmp-shell .wup-tab:hover {
    background: #f7f7ff;
    color: #3e47b6;
}

.wmp-shell .wup-tab[aria-current="page"] {
    border-color: #d9dff6;
    background: #fff;
    color: #3e47b6;
    box-shadow: 0 2px 9px #24336713;
}

.wmp-shell .wup-tab > span {
    word-break: normal;
    overflow-wrap: normal;
}

.wmp-shell .wup-tab > svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}

.wmp-shell .wup-hero .wpp-hero-actions {
    color: #526483;
}

.wmp-shell :is(.wup-smm-plans, .wup-shop-plans) {
    scroll-margin-top: 110px;
}

.wmp-shell .wup-smm-plans {
    margin-bottom: 30px;
}

.wmp-shell .wup-smm-plans :is(.ah-plan-grid, .wb-plan-grid, .wb-plans-grid, :has(> article)) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    align-items: stretch;
    gap: 16px;
}

.wmp-shell .wup-smm-plans :has(> :is(article, .ah-plan-card, .wb-plan-card, .plan-card):only-child) {
    grid-template-columns: minmax(0, 540px);
    justify-content: center;
}

.wmp-shell .wup-smm-plans :is(article, .ah-plan-card, .wb-plan-card, .plan-card),
.wmp-shell .wup-shop-plans .sm-subscription-section .sm-plan-card {
    min-width: 0;
    border: 1px solid #dbe2f3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 27px #2236710d;
}

.wmp-shell .wup-smm-plans :is(article, .ah-plan-card, .wb-plan-card, .plan-card) {
    padding: clamp(20px, 4vw, 28px);
    color: #172544;
    overflow-wrap: anywhere;
}

.wmp-shell .wup-smm-plans :is(.is-featured, .is-popular, .featured) {
    border-color: #aaaef0;
}

.wmp-shell .wup-smm-plans :is(.ah-button, .wb-button):not(.wb-button-light),
.wmp-shell .wup-shop-plans .sm-button:not(.sm-secondary) {
    border-color: #4353d4;
    background: #4353d4;
    color: #fff;
}

.wmp-shell .wup-smm-plans :is(.ah-button, .wb-button):not(.wb-button-light):hover,
.wmp-shell .wup-shop-plans .sm-button:not(.sm-secondary):hover {
    border-color: #3544b9;
    background: #3544b9;
    color: #fff;
}

.wmp-shell .wup-shop-plans {
    background: transparent;
}

.wmp-shell .wup-shop-plans .sm-subscription-section {
    padding-top: 0;
}

.wmp-shell .wup-shop-plans .sm-section-title h2 {
    color: #172544;
    font-size: clamp(22px, 3vw, 28px);
}

.wmp-shell .wup-shop-plans .sm-plan-intro,
.wmp-shell .wup-shop-plans .sm-plan-inclusions {
    background: #f6f7fe;
}

.wmp-shell .wup-shop-plans .sm-plan-symbol {
    background: #4353d4;
    box-shadow: none;
}

.wmp-shell .wup-shop-plans :is(.sm-plan-heading h3, .sm-plan-inclusions h4, .sm-plan-limits dd) {
    color: #172544;
}

.wmp-shell .wup-shop-plans :is(.sm-plan-kicker, .sm-eyebrow, .sm-billing-link) {
    color: #4353b7;
}

.wmp-shell .wup-shop-plans .sm-secondary {
    border-color: #d9e0f7;
    background: #eef1ff;
    color: #3544b9;
}

.wmp-shell .wup-shop-plans .sm-secondary:hover {
    background: #e0e7ff;
    color: #28369d;
}

@media (max-width: 560px) {
    .wmp-shell .wup-tabs {
        max-width: min(100%, 430px);
    }

    .wmp-shell .wup-tab {
        flex-direction: column;
        gap: 4px;
        padding: 7px 5px;
        font-size: 12px;
    }
}

@media (max-width: 340px) {
    .wmp-shell .wup-tabs {
        grid-template-columns: minmax(0, 1fr);
        max-width: 250px;
    }

    .wmp-shell .wup-tab {
        flex-direction: row;
        gap: 8px;
    }
}