/* Compact mobile header; desktop keeps the existing sidebar and header actions. */
@media (max-width: 640px) {
  #demo.product-demo .app-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 34px;
    min-height: 34px;
    padding: 0 15px;
  }
  #demo.product-demo .app-top .demo-mini-logo {
    order: 0;
    display: block;
    width: 72px !important;
    flex: 0 0 72px;
    margin: 0;
    animation: none;
  }
  #demo.product-demo .app-top [data-personalize] {
    order: 1;
    margin: 0 0 0 auto;
    padding: 7px 0 7px 6px;
    min-height: 32px;
    font-size: 9px;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
  }
  #demo.product-demo .app-top [data-reset] { display: none; }
  #demo.finding-brands .app-top .demo-logo { animation: none; }
}

/* Mobile phone chrome: branding stays in the website header. */
@media(max-width:640px){
 #demo.product-demo .app-top{height:20px;min-height:20px;padding:0 15px;justify-content:flex-end}
 #demo.product-demo .app-top .demo-mini-logo{display:none!important}
 #demo.product-demo .app-top [data-personalize]{min-height:20px;padding:1px 0 1px 10px;font-size:10px}
 #demo.product-demo .phone-speaker{margin-bottom:0}
}

/* Website navigation: clear hierarchy, neutral active states. */
.navlinks,.nav-menu>button{font-size:13px;font-weight:500;letter-spacing:.005em}
@media(max-width:640px){.mobile-site-nav.is-open{display:block!important;background:#0c1118;border-radius:0;padding:8px 22px 24px;max-height:calc(100dvh - 62px);overflow-y:auto;border-top:1px solid #ffffff10}.mobile-nav-group{border-bottom:1px solid #ffffff12}.mobile-nav-group summary{list-style:none;display:flex;align-items:center;justify-content:space-between;font-size:18px;font-weight:500;color:#e5eaf0;padding:19px 0;cursor:pointer}.mobile-nav-group summary::-webkit-details-marker{display:none}.mobile-nav-group summary>span{font-size:20px;font-weight:400;color:#8997a6;transition:transform .2s}.mobile-nav-group[open] summary>span{transform:rotate(45deg)}.mobile-site-nav .mobile-nav-group a{display:flex;justify-content:space-between;padding:12px 12px;margin:0;font-size:14px;color:#a9b5c1;background:transparent;border:0}.mobile-nav-group a span{opacity:.4}.mobile-nav-group>div{padding:0 0 14px 6px}.site-menu-toggle,.site-menu-toggle[aria-expanded=true]{background:transparent!important;color:#dfe5eb;border:1px solid #ffffff12}.mobile-nav-group a:hover{color:#fff;background:#ffffff04}}

.mobile-nav-group summary:after{display:none!important}

@media(max-width:640px){.mobile-site-nav details.mobile-nav-group{padding:0;margin:0;background:transparent;border-radius:0}.mobile-site-nav .mobile-nav-group summary{margin:0;padding:19px 0;min-height:62px}}

/* Expanded navigation is one continuous header surface. */
@media(max-width:640px){body.theme-dark>header.menu-expanded,header.menu-expanded{background:linear-gradient(145deg,#111c29 0%,#0b111a 70%)!important;box-shadow:none!important;border:0!important;backdrop-filter:none}header.menu-expanded .nav{background:transparent!important;border:0!important;box-shadow:none!important}header.menu-expanded .mobile-site-nav.is-open{background:transparent!important;border:0!important;box-shadow:none;padding-top:0}header.menu-expanded .mobile-nav-group{border:0!important}header.menu-expanded .site-menu-toggle{border:0!important;background:transparent!important}.mobile-site-nav .mobile-nav-group summary{min-height:58px}.mobile-site-nav .mobile-nav-group>div{padding-bottom:12px}}

/* Mobile demo: lift the action into spare phone chrome, reclaim content height. */
@media(max-width:640px){
 #demo.product-demo .app-top{height:12px;min-height:12px}
 #demo.product-demo .app-top [data-personalize]{min-height:24px;padding:4px 0 4px 10px;transform:translateY(-6px)}
 #demo.product-demo .app-content{padding-top:6px}
}