/* Mobile hero CTA fix: two side-by-side buttons overflow the viewport.
   These <a> tags carry .btn-outline-white / .btn-secondary-dark, not .btn. */
@media(max-width:749px){
  .mobile-banner-section{position:relative;width:100%;max-width:100%;overflow:hidden}
  .mobile-banner-section picture,
  .mobile-banner-section picture img{width:100%;max-width:100%;height:auto;display:block}

  /* Keep the CTAs inside the hero so the following mobile row cannot cover them. */
  .banner-buttons{
    position:absolute;
    left:0;
    right:0;
    bottom:56px;
    transform:none;
    width:100%;
    max-width:100%;
    padding:0 12px;
    gap:8px;
    display:flex;
    box-sizing:border-box;
    justify-content:center;
    z-index:5
  }

  /* Target the actual anchor tags inside banner-buttons. */
  .banner-buttons > a.btn-outline-white,
  .banner-buttons > a.btn-secondary-dark{
    flex:1 1 0;width:auto;min-width:0;max-width:none;
    height:48px;padding:6px 8px;
    font-size:15px;line-height:1.2;
    border-radius:8px;
    box-sizing:border-box;
    text-align:center;white-space:normal;overflow-wrap:anywhere;
    display:inline-flex;align-items:center;justify-content:center;
  }
}

.private-blends-header p{transition:opacity .22s ease,transform .22s ease}
.private-blends-header p.is-changing{opacity:0;transform:translateY(4px)}