/* Phone shell only. Keep opacity on the surface, so icons and text remain solid. */
@media (max-width: 767px) {
  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body #candao-primary-nav[data-mobile-offer-nav] > a.feed-join-as-mobile {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #7047d9 !important;
  }
  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body #candao-primary-nav[data-mobile-offer-nav] > a.feed-join-as-mobile :is(span, .material-icons) {
    color: #7047d9 !important;
    background: transparent !important;
  }
  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body.mobile-offer-nav nav.bottom-nav[data-mobile-offer-nav] a.feed-join-as-mobile,
  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body.mobile-offer-nav nav.bottom-nav[data-mobile-offer-nav] a.feed-join-as-mobile.active {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #7047d9;
  }
  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body.mobile-offer-nav nav.bottom-nav[data-mobile-offer-nav] a.feed-join-as-mobile span,
  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body.mobile-offer-nav nav.bottom-nav[data-mobile-offer-nav] a.feed-join-as-mobile i.material-icons,
  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body.mobile-offer-nav nav.bottom-nav[data-mobile-offer-nav] a.feed-join-as-mobile.active i.material-icons {
    color: #7047d9;
    background: transparent;
  }
  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body.mobile-offer-nav nav.bottom-nav[data-mobile-offer-nav] a.feed-join-as-mobile:focus-visible {
    outline: 2px solid #7047d9;
    outline-offset: -2px;
  }
  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body[data-mobile-navigation-translucent] > #mobile-offer-topbar,
  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body[data-mobile-navigation-translucent] > #candao-primary-nav[data-mobile-offer-nav],
  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body[data-mobile-navigation-translucent] > nav.bottom-nav[data-mobile-offer-nav] {
    background-color: rgba(255, 255, 255, .72) !important;
    background-color: color-mix(in srgb, var(--mobile-navigation-surface, #fff) 72%, transparent) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  @media (prefers-reduced-motion: no-preference) {
    html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body > #mobile-offer-topbar,
    html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body > nav.bottom-nav[data-mobile-offer-nav] { transition: background-color 160ms ease; }
  }
}