/* BLUE8: reference-style responsive MOBILE masthead (not desktop). */
@media screen and (max-width:767px) {
  .site-shell{width:100%;max-width:480px;margin-inline:auto}
  .site-shell .appbar{background:#fff!important}
  .site-shell .appbar-inner{box-sizing:border-box;height:58px!important;min-height:58px!important;max-width:480px;padding:4px 13px!important;gap:8px!important;display:flex;align-items:center}
  .site-shell .appbar-inner>.close{flex:0 0 auto;padding:3px!important;color:#a3abba}
  .site-shell .appbar-inner>.brand-icon{flex:0 0 42px;width:42px!important;height:42px!important;min-width:42px;border-radius:10px;font-size:19px!important}
  .site-shell .appbar-text{display:flex;flex:1 1 auto;min-width:0;gap:1px!important}
  .site-shell .appbar-text b{font-size:clamp(14px,4vw,18px)!important;line-height:1.18!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--portal-text,#263750)!important}
  .site-shell .appbar-text span{font-size:clamp(9px,2.55vw,11px)!important;line-height:1.2!important;color:var(--portal-muted,#64748b)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .site-shell .appbar-inner>.blue-button{flex:0 0 auto;margin-left:auto;padding:8px 12px!important;font-size:clamp(10px,2.8vw,12px)!important;line-height:1.3;border-radius:25px}
  /* Compact pale-blue brand stripe matches the second stripe in mobile reference. */
  .site-shell>header{display:block!important;position:relative!important;top:auto!important;box-shadow:none!important;backdrop-filter:none!important;background:linear-gradient(90deg,#d9f4ff,#adeaff)!important}
  .site-shell .header-inner{height:46px!important;max-width:480px;padding:0 15px!important;display:flex;align-items:center;gap:0}
  .site-shell .header-inner .logo{display:flex;gap:4px;align-items:center;font-size:clamp(13px,3.8vw,17px)!important;letter-spacing:0;color:var(--portal-text,#263750)!important;white-space:nowrap}
  .site-shell .header-inner .logo small{font-size:.9em}
  .site-shell .header-inner .mini-logo{width:21px!important;height:24px!important;font-size:11px!important;border-radius:5px}
  .site-shell .header-inner .brand-logo-image{max-height:27px!important;max-width:32px!important;object-fit:contain}
  .site-shell .header-inner nav,.site-shell .header-inner .header-actions{display:none!important}
  /* Reference visual: carousel about 2.65:1; proportional across 320–480px phones. */
  .site-shell main{max-width:480px;width:100%;margin:0 auto!important}
  .site-shell .stable-carousel{box-sizing:border-box;position:relative!important;aspect-ratio: 2.65 / 1!important;height:auto!important;min-height:0!important;padding:0!important;margin:0!important;border-radius:0!important;overflow:hidden!important;background:#e5f4ff}
  .site-shell .stable-carousel .hero-image-link{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important}
  .site-shell .stable-carousel .hero-img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;object-position:center!important}
  .site-shell .stable-carousel .dots{bottom:5px!important}
  .site-shell .stable-carousel .hero-arrow{width:23px;height:34px;top:50%}
  /* Notice area: pale strip around compact rounded ticker, single-line smooth crawl. */
  .site-shell .scrolling-announcement{box-sizing:border-box;display:flex!important;align-items:center!important;gap:5px!important;height:40px!important;min-height:40px!important;max-height:40px!important;margin:0!important;padding:7px 12px!important;border-radius:0!important;background:#e6f2ff!important;overflow:hidden!important;line-height:1.2!important;font-size:clamp(11px,3vw,13px)!important}
  .site-shell .scrolling-announcement>svg{width:16px!important;height:16px!important;flex:0 0 auto!important;color:#279fff}
  .site-shell .scrolling-announcement .ticker-window{box-sizing:border-box;min-width:0!important;flex:1 1 auto!important;display:block!important;overflow:hidden!important;white-space:nowrap!important;text-align:left!important;padding:0!important;line-height:22px!important;border-radius:15px;background:#edf4ff66!important;color:inherit!important}
  .site-shell .scrolling-announcement .ticker-window span{display:inline-block;max-width:none;white-space:nowrap;font-size:inherit!important;font-weight:500!important;line-height:22px!important;color:inherit!important}
}
@media screen and (max-width:359px) {
  .site-shell .appbar-inner{gap:5px!important;padding-inline:8px!important}
  .site-shell .appbar-inner>.brand-icon{width:36px!important;height:36px!important;min-width:36px!important;flex-basis:36px!important}
  .site-shell .appbar-inner>.blue-button{padding:7px 9px!important}
  .site-shell .header-inner{padding-inline:11px!important}
}