/* Bonyel Beats — independent Pricing page */
body.page-pricing{background:#000;color:#fff}
.bb-pricing{width:min(1440px,calc(100% - 44px));margin:0 auto;padding:66px 0 100px;font-family:Inter,Arial,sans-serif;color:#fff}
.bb-pricing *{box-sizing:border-box}
.bb-pricing-intro{text-align:center;margin-bottom:55px}
.bb-pricing-eyebrow{display:block;font-size:10px;letter-spacing:.17em;font-weight:800;color:#7296ff}
.bb-pricing-intro h1{font-size:clamp(34px,4.2vw,58px);letter-spacing:-.055em;line-height:1.08;margin:15px 0 12px;font-weight:800}
.bb-pricing-intro p{color:#a5aec0;font-size:14px;margin:0}
.bb-pricing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;align-items:start}
.bb-pricing-card{position:relative;display:flex;flex-direction:column;min-height:330px;background:#080a0e;border:1px solid #303540;border-radius:15px;padding:24px 16px 17px}
.bb-pricing-popular{border-color:#376dff;box-shadow:0 0 0 1px rgba(55,109,255,.16)}
.bb-pricing-ribbon{position:absolute;left:50%;top:-13px;transform:translateX(-50%);background:#376dff;color:#fff;border-radius:30px;padding:7px 14px;font-size:10px;font-weight:800;white-space:nowrap}
.bb-pricing-card-head{display:flex;align-items:center;gap:12px;min-height:58px}
.bb-pricing-icon{display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:12px;background:#181e29;font-size:25px}
.bb-pricing-free{font-size:12px;font-weight:900;background:#16e56c;color:#07160c;border-radius:5px;padding:5px 3px;white-space:nowrap}
.bb-pricing-name-price{min-width:0;display:flex;flex-direction:column;gap:3px}
.bb-pricing-name{font-size:11px;font-weight:850;line-height:1.2}
.bb-pricing-price{font-size:clamp(17px,1.55vw,24px);font-weight:900;line-height:1.1;letter-spacing:-.04em;white-space:nowrap}
.bb-pricing-card:first-child .bb-pricing-price{color:#17e86e}
.bb-pricing-popular .bb-pricing-price{color:#527fff}
.bb-pricing-features{list-style:none;padding:0;margin:24px 0 20px;display:flex;flex-direction:column;gap:11px}
.bb-pricing-features li{display:flex;gap:12px;align-items:flex-start;font-size:11px;line-height:1.5;color:#e7eaf1}
.bb-pricing-features li span{color:#376dff;font-weight:900;font-size:14px;line-height:1.2;flex:none}
.bb-pricing-features .bb-no,.bb-pricing-features .bb-no span{color:#606773}
.bb-pricing-action{margin-top:auto;min-height:39px;display:flex;align-items:center;justify-content:center;border:1px solid #376dff;border-radius:8px;color:#fff;text-decoration:none;font-size:10px;font-weight:850;transition:background .2s}
.bb-pricing-action:hover{background:#376dff;color:#fff}
.bb-pricing-popular .bb-pricing-action{background:#376dff}
.bb-pricing-popular .bb-pricing-action:hover{background:#2259e8}
.bb-pricing-disclaimer{text-align:center;color:#788295;font-size:11px;margin:22px 0 0}
.bb-pricing-promo{display:flex;justify-content:space-between;align-items:center;gap:24px;border:1px solid #262d3b;border-radius:16px;padding:28px 32px;margin-top:58px;background:linear-gradient(115deg,#0b1020,#07080c)}
.bb-pricing-promo h2{font-size:25px;letter-spacing:-.04em;margin:7px 0}
.bb-pricing-promo p{color:#aab2c1;font-size:12px;line-height:1.6;margin:0}
.bb-pricing-promo>a{flex:none;padding:13px 20px;border:1px solid #376dff;border-radius:8px;color:#fff;text-decoration:none;font-size:10px;font-weight:850}
.bb-pricing-promo>a:hover{background:#376dff}
@media(max-width:1100px){.bb-pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}.bb-pricing-price{font-size:23px}}
@media(max-width:620px){.bb-pricing{width:calc(100% - 28px);padding:46px 0 70px}.bb-pricing-intro{margin-bottom:42px}.bb-pricing-grid{grid-template-columns:1fr;gap:27px}.bb-pricing-card{min-height:0;padding:24px 19px 18px}.bb-pricing-price{font-size:23px}.bb-pricing-promo{flex-direction:column;align-items:stretch;padding:24px 20px;margin-top:40px}.bb-pricing-promo>a{text-align:center}}

/* Pricing page: force the site's dark canvas even when a page template
   or WordPress page-specific style sets a white background. */
html:has(.bb-pricing),
body:has(.bb-pricing),
body:has(.bb-pricing) #page,
body:has(.bb-pricing) .site,
body:has(.bb-pricing) .site-content,
body:has(.bb-pricing) #content,
body:has(.bb-pricing) .content-area,
body:has(.bb-pricing) main.bb-pricing {
    background-color: #000 !important;
    color: #fff !important;
}
body:has(.bb-pricing) .bb-pricing-intro h1,
body:has(.bb-pricing) .bb-pricing-promo h2 {
    color: #fff !important;
}