:root {
  --rb-pin-final-url: "assets/roaming-bean-pin-mark.svg?v=10";
  --rb-pin-final: url("assets/roaming-bean-pin-mark.svg?v=10");
  --rb-schedule-overlay: url("assets/schedule-overlay-today.webp");
}

.rb-visual-search-disabled {
  -webkit-user-drag: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  pointer-events: none !important;
  touch-action: none !important;
}

#results[data-schedule-art="today"], .results[data-schedule-art="today"] { --rb-schedule-overlay: url("assets/schedule-overlay-today.webp"); }
#results[data-schedule-art="tomorrow"], .results[data-schedule-art="tomorrow"] { --rb-schedule-overlay: url("assets/schedule-overlay-tomorrow.webp"); }
#results[data-schedule-art="monday"], .results[data-schedule-art="monday"] { --rb-schedule-overlay: url("assets/schedule-overlay-monday.webp"); }
#results[data-schedule-art="tuesday"], .results[data-schedule-art="tuesday"] { --rb-schedule-overlay: url("assets/schedule-overlay-tuesday.webp"); }
#results[data-schedule-art="wednesday"], .results[data-schedule-art="wednesday"] { --rb-schedule-overlay: url("assets/schedule-overlay-wednesday.webp"); }
#results[data-schedule-art="thursday"], .results[data-schedule-art="thursday"] { --rb-schedule-overlay: url("assets/schedule-overlay-thursday.webp"); }
#results[data-schedule-art="friday"], .results[data-schedule-art="friday"] { --rb-schedule-overlay: url("assets/schedule-overlay-friday.webp"); }
#results[data-schedule-art="saturday"], .results[data-schedule-art="saturday"] { --rb-schedule-overlay: url("assets/schedule-overlay-saturday.webp"); }
#results[data-schedule-art="sunday"], .results[data-schedule-art="sunday"] { --rb-schedule-overlay: url("assets/schedule-overlay-sunday.webp"); }

/* Correct selected-day box: one transparent schedule overlay asset per day over the wavy card background. */
#results,
.results {
  position: relative !important;
  isolation: isolate !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  padding-top: 0 !important;
}

#results::before,
.results::before {
  content: "" !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
  width: 100% !important;
  aspect-ratio: 2508 / 627 !important;
  min-height: 82px !important;
  max-height: 156px !important;
  margin: 0 auto 12px !important;
  padding: 0 !important;
  border: 2px solid rgba(91, 149, 215, .58) !important;
  border-radius: 24px !important;
  box-shadow: 0 14px 34px rgba(34, 20, 6, .22), inset 0 1px 0 rgba(255,255,255,.74) !important;
  background:
    var(--rb-schedule-overlay) center center / contain no-repeat,
    url("assets/schedule-wavy-stripes.webp") center center / cover no-repeat !important;
  background-color: #fff4dc !important;
  pointer-events: none !important;
}

#results::after,
.results::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Stop cards remain normal. The selected-day box must not alter their layout. */
#results .rb-stop-route-pin,
.results .rb-stop-route-pin {
  display: none !important;
  content: none !important;
}
#results .stop-card,
.results .stop-card {
  padding-left: 16px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 88% 6%, rgba(18,150,223,.10), transparent 12rem),
    linear-gradient(145deg, rgba(255,250,242,.93), rgba(247,235,222,.88)) !important;
  border-color: rgba(213,167,102,.48) !important;
  box-shadow: 0 18px 36px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.60) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#results .stop-card > *,
.results .stop-card > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Accurate Roaming Bean pin everywhere pins are actually shown. */
.inline-brand-logo.hero-brand-logo::before { background-image: var(--rb-pin-final), url("assets/roaming-bean-ring-mark.svg?v=1") !important; }
.btn-map-all .btn-spark.pin-spark { background: transparent !important; border: 0 !important; box-shadow: none !important; display: inline-grid !important; place-items: center !important; width: 42px !important; height: 48px !important; min-width: 42px !important; }
.btn-map-all .btn-spark.pin-spark img, .rb-pin-ui-icon, .rb-map-pin-wrap img { display: block !important; object-fit: contain !important; visibility: visible !important; opacity: 1 !important; }
.btn-map-all .btn-spark.pin-spark img { width: 34px !important; height: 47px !important; }
.closest-medallion.rb-pin-medallion, .closest-loading-badge.rb-pin-loading-badge { background: transparent !important; border: 0 !important; box-shadow: none !important; display: inline-grid !important; place-items: center !important; overflow: visible !important; }
.closest-medallion.rb-pin-medallion::before, .closest-medallion.rb-pin-medallion::after, .closest-loading-badge.rb-pin-loading-badge::before, .closest-loading-badge.rb-pin-loading-badge::after { content: none !important; display: none !important; }
.closest-medallion.rb-pin-medallion .rb-pin-ui-icon { width: 54px !important; height: 75px !important; }
.closest-loading-badge.rb-pin-loading-badge .rb-pin-ui-icon { width: 50px !important; height: 69px !important; }
.rb-map-pin-icon { width: 46px !important; height: 64px !important; background: transparent !important; border: 0 !important; }
.rb-map-pin-wrap { position: relative !important; display: block !important; width: 46px !important; height: 64px !important; transform: none !important; filter: drop-shadow(0 7px 9px rgba(5,22,39,.34)) !important; }
.rb-map-pin-wrap img { display: block !important; width: 46px !important; height: 64px !important; object-fit: fill !important; }
.rb-map-pin-number, .all-map-marker.stop-marker > span { position: absolute !important; left: 50% !important; top: 38px !important; width: 24px !important; min-width: 0 !important; height: 18px !important; padding: 0 !important; border-radius: 0 !important; display: inline-grid !important; place-items: center !important; color: #fff !important; background: transparent !important; border: 0 !important; box-shadow: none !important; text-shadow: 0 1px 2px rgba(0,0,0,.58), 0 0 5px rgba(5,22,39,.55) !important; font-size: 12px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: -.03em !important; transform: translate(-50%, -50%) !important; pointer-events: none !important; }
.all-map-marker.stop-marker { width: 46px !important; height: 64px !important; border: 0 !important; background: var(--rb-pin-final) center / 46px 64px no-repeat !important; box-shadow: none !important; transform: translate(-50%, -55px) !important; filter: drop-shadow(0 7px 9px rgba(5,22,39,.34)) !important; }
.all-map-marker.stop-marker::before, .all-map-marker.stop-marker::after { content: none !important; display: none !important; }
.all-map-preview .leaflet-control-attribution, .all-pins-leaflet-map .leaflet-control-attribution { display: block !important; visibility: visible !important; pointer-events: auto !important; margin: 0 !important; padding: 3px 7px !important; border-radius: 8px 0 0 0 !important; background: rgba(255,248,232,.92) !important; color: #0c2239 !important; font-size: 10px !important; line-height: 1.2 !important; font-weight: 800 !important; box-shadow: 0 4px 10px rgba(5,22,39,.18) !important; }
.all-map-preview .leaflet-control-attribution a, .all-pins-leaflet-map .leaflet-control-attribution a { color: #075fae !important; text-decoration: underline !important; text-underline-offset: 2px !important; }
.rb-map-user-icon { width: 42px !important; height: 42px !important; background: transparent !important; border: 0 !important; }
.rb-map-user-wrap { position: relative !important; display: block !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; background: rgba(255,248,232,.94) !important; border: 2px solid #27b3ea !important; box-shadow: 0 8px 14px rgba(5,22,39,.28), inset 0 1px 0 rgba(255,255,255,.82) !important; overflow: visible !important; }
.rb-map-user-wrap img { display: block !important; width: 31px !important; height: 31px !important; margin: 9px auto 0 !important; object-fit: contain !important; filter: drop-shadow(0 3px 4px rgba(5,22,39,.22)) !important; }
.rb-map-user-label, .coffee-user-marker-label { position: absolute !important; left: 50% !important; top: 3px !important; width: 34px !important; transform: translateX(-50%) !important; display: block !important; color: #0c2239 !important; font-size: 10px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: -.02em !important; text-align: center !important; text-shadow: 0 1px 0 rgba(255,255,255,.76) !important; pointer-events: none !important; }
.coffee-user-marker { width: 42px !important; height: 42px !important; border: 2px solid #27b3ea !important; border-radius: 50% !important; background: rgba(255,248,232,.94) url("assets/mug-logo.svg?v=1") center 10px / 31px 31px no-repeat !important; box-shadow: 0 8px 14px rgba(5,22,39,.28), inset 0 1px 0 rgba(255,255,255,.82) !important; transform: translate(-50%, -50%) !important; }
.coffee-user-marker::before, .coffee-user-marker::after { content: none !important; display: none !important; }
.coffee-user-marker .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.all-map-stops.rb-route-timeline { position: relative !important; isolation: isolate !important; }
.all-map-stops.rb-route-timeline::after { content: "" !important; position: absolute !important; left: 22px !important; top: 28px !important; bottom: 28px !important; width: 3px !important; border-radius: 999px !important; background: repeating-linear-gradient(to bottom, rgba(8,119,217,.52) 0 8px, transparent 8px 18px) !important; z-index: 0 !important; pointer-events: none !important; }
.all-map-stops.rb-route-timeline .all-map-stop { position: relative !important; z-index: 1 !important; padding-left: 58px !important; min-height: 66px !important; }
.rb-list-route-pin { position: absolute !important; left: 8px !important; top: 10px !important; width: 30px !important; height: 42px !important; background: var(--rb-pin-final) center / contain no-repeat !important; filter: drop-shadow(0 5px 7px rgba(5,22,39,.24)) !important; pointer-events: none !important; }

/* Hero redesign: official assets layered inside the tracker card. */
.app-shell,
.hero-card {
  overflow: visible !important;
}
.hero-card {
  z-index: 40 !important;
}
.inline-brand-logo.hero-brand-logo {
  width: min(100%, 380px) !important;
  margin-top: -4px !important;
  margin-bottom: 2px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: visible !important;
}
.hero-card .inline-brand-logo > img,
body .hero-card > img.hero-award-badge {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
  touch-action: none !important;
}
.inline-brand-logo.hero-brand-logo::after {
  content: none !important;
  display: none !important;
  background: none !important;
  pointer-events: none !important;
}
.inline-brand-logo.hero-brand-logo::before {
  content: none !important;
  display: none !important;
  background: none !important;
  pointer-events: none !important;
}
.hero-brand-logo .inline-brand-mark { margin-top: 0 !important; }
.hero-brand-logo .inline-brand-mark {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
  touch-action: none !important;
}
.hero-brand-logo .inline-brand-ring,
.hero-brand-logo .inline-brand-pin,
.hero-brand-logo .inline-brand-inner-wordmark,
.hero-brand-logo .inline-brand-tracker-pill {
  position: absolute !important;
  left: 50% !important;
  display: block !important;
  pointer-events: none !important;
  user-select: none !important;
}
.hero-brand-logo .inline-brand-ring {
  z-index: 3 !important;
  top: 47.2% !important;
  width: min(62vw, 250px) !important;
  height: auto !important;
  opacity: .96 !important;
  transform: translate(-50%, -50%) !important;
}
.hero-brand-logo .inline-brand-pin {
  z-index: 6 !important;
  top: 50.2% !important;
  width: min(28vw, 109px) !important;
  height: auto !important;
  filter: drop-shadow(0 8px 9px rgba(6, 35, 70, .24)) !important;
  transform: translate(-50%, -100%) !important;
}
.hero-brand-logo .inline-brand-inner-wordmark {
  z-index: 7 !important;
  top: 50.8% !important;
  width: min(64vw, 232px) !important;
  height: auto !important;
  max-height: 44px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 2px rgba(255, 255, 255, .58)) drop-shadow(0 5px 7px rgba(21, 87, 142, .16)) !important;
  transform: translate(-50%, -50%) !important;
}
.hero-brand-logo .inline-brand-tracker-pill {
  z-index: 8 !important;
  top: 62.0% !important;
  min-width: min(48vw, 190px) !important;
  padding: 7px 18px 8px !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: linear-gradient(90deg, #123a9d 0%, #078be7 54%, #034fae 100%) !important;
  box-shadow: 0 10px 18px rgba(5, 40, 94, .22) !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: clamp(1.06rem, 4.1vw, 1.58rem) !important;
  font-weight: 950 !important;
  letter-spacing: .2em !important;
  line-height: .9 !important;
  text-align: center !important;
  transform: translate(-50%, -50%) !important;
}
.inline-brand-logo.hero-brand-logo::before {
  content: none !important;
  display: none !important;
  background: none !important;
}
.hero-lockup-zone {
  width: min(100%, 448px) !important;
  max-width: 448px !important;
  margin: -3px auto 12px !important;
  position: relative !important;
  overflow: visible !important;
  z-index: 17 !important;
}
.hero-card h1 {
  width: 100% !important;
  margin: -3px auto 12px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  position: relative !important;
  z-index: 6 !important;
}
.hero-lockup-zone > .hero-lockup {
  margin: 0 auto !important;
}
.hero-card h1::before,
.hero-card h1::after {
  display: block !important;
  width: 100% !important;
  background: none !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 950 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-shadow:
    0 2px 2px rgba(2, 15, 31, .78),
    0 10px 22px rgba(0, 0, 0, .34) !important;
  -webkit-text-fill-color: currentColor !important;
}
.hero-card h1::before {
  content: "WHERE THE\A GRIND" !important;
  white-space: pre-line !important;
  color: var(--cream) !important;
  font-size: clamp(1.72rem, 5.9vw, 2.86rem) !important;
  letter-spacing: .015em !important;
  line-height: .82 !important;
}
.hero-card h1::after {
  content: "NEVER STOPS" !important;
  color: #4cc0f0 !important;
  font-size: clamp(1.42rem, 4.8vw, 2.16rem) !important;
  letter-spacing: .015em !important;
  line-height: .9 !important;
}
.hero-card h1.hero-lockup:has(> .hero-lockup-kicker)::before,
.hero-card h1.hero-lockup:has(> .hero-lockup-kicker)::after {
  content: none !important;
  display: none !important;
}
.hero-card h1.hero-lockup {
  white-space: nowrap !important;
}
.hero-card h1.hero-lockup > span {
  display: block !important;
  width: 100% !important;
  background: none !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 950 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-shadow:
    0 2px 2px rgba(2, 15, 31, .78),
    0 10px 22px rgba(0, 0, 0, .34) !important;
  -webkit-text-fill-color: currentColor !important;
}
.hero-card h1.hero-lockup > .hero-lockup-kicker {
  display: inline-block !important;
  width: auto !important;
  margin-right: .34em !important;
  color: var(--cream) !important;
  font-size: clamp(1.08rem, 3.2vw, 1.42rem) !important;
  letter-spacing: .02em !important;
  line-height: .82 !important;
  vertical-align: baseline !important;
  transform: translateY(-.28em) !important;
}
.hero-card h1.hero-lockup > .hero-lockup-main {
  display: inline-block !important;
  width: auto !important;
  color: var(--cream) !important;
  font-size: calc(clamp(2.42rem, 7.8vw, 3.45rem) - .25rem) !important;
  letter-spacing: .015em !important;
  line-height: .78 !important;
  vertical-align: baseline !important;
}
.hero-card h1.hero-lockup > .hero-lockup-accent {
  display: block !important;
  width: 100% !important;
  margin-top: .01em !important;
  color: #4cc0f0 !important;
  font-size: clamp(1.42rem, 4.8vw, 2.16rem) !important;
  letter-spacing: .015em !important;
  line-height: .9 !important;
}

.hero-info-control {
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding-right: 0 !important;
  display: block !important;
  position: absolute !important;
  top: 43% !important;
  right: 10px !important;
  z-index: 20 !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  transform: translateY(-50%) !important;
}
.hero-info-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(91, 190, 246, .42) !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: linear-gradient(145deg, rgba(21, 58, 88, .88), rgba(11, 32, 51, .92)) !important;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, .20),
    inset 0 1px 0 rgba(255, 255, 255, .14) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  transition: transform .14s ease, border-color .14s ease, filter .14s ease !important;
}
.hero-info-button:active {
  transform: translateY(1px) scale(.98) !important;
}
.hero-info-button:focus-visible {
  outline: 3px solid rgba(76, 192, 240, .46) !important;
  outline-offset: 3px !important;
}
.hero-info-button[aria-expanded="true"] {
  border-color: rgba(255, 226, 181, .58) !important;
  filter: brightness(1.07) !important;
}
.hero-info-button .disclaimer-icon {
  width: 25px !important;
  height: 25px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #26b7f4 0%, #0784d9 100%) !important;
  box-shadow: 0 7px 13px rgba(0, 102, 184, .32) !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: .92rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}
.hero-info-panel {
  position: absolute !important;
  z-index: 100 !important;
  left: auto !important;
  right: -2px !important;
  top: calc(100% + 10px) !important;
  bottom: auto !important;
  width: min(326px, calc(100vw - 44px)) !important;
  min-height: 0 !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  text-align: left !important;
  color: rgba(255, 246, 234, .88) !important;
  border: 1px solid rgba(91, 190, 246, .30) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(22, 45, 67, .90), rgba(11, 27, 43, .92)) !important;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, .20),
    inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  font-size: .86rem !important;
  font-weight: 790 !important;
  line-height: 1.34 !important;
  pointer-events: auto !important;
  transform: none !important;
}
.hero-info-panel > span {
  display: block !important;
}
.hero-info-panel::after {
  content: "" !important;
  position: absolute !important;
  left: auto !important;
  right: 10px !important;
  top: -7px !important;
  bottom: auto !important;
  width: 14px !important;
  height: 14px !important;
  border-left: 1px solid rgba(91, 190, 246, .30) !important;
  border-top: 1px solid rgba(91, 190, 246, .30) !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  background: rgba(11, 27, 43, .92) !important;
  transform: rotate(45deg) !important;
}
.hero-info-panel[hidden] {
  display: none !important;
}
.hero-info-location-tools {
  display: grid !important;
  gap: 9px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(91, 190, 246, .18) !important;
}
.hero-info-location-tools[hidden] {
  display: none !important;
}
.hero-info-refresh-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 30px !important;
  margin: 0 auto !important;
  padding: 1px 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  color: #4cc0f0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font: inherit !important;
  font-weight: 900 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}
.hero-info-refresh-btn:disabled {
  opacity: .62 !important;
  cursor: wait !important;
}
.hero-info-location-status {
  margin: 0 !important;
  color: rgba(255, 246, 234, .82) !important;
  font-size: .78rem !important;
  font-weight: 820 !important;
  line-height: 1.3 !important;
}
.hero-info-location-status::before {
  content: "◇" !important;
  margin-right: 6px !important;
  color: #4cc0f0 !important;
}
body.rb-info-location-ready .hero-card > .status-text {
  display: none !important;
}
body.rb-info-location-ready .hero-actions #locateBtn.is-location-refresh {
  display: none !important;
}

@media (max-width: 520px) {
  #results::before,
  .results::before {
    min-height: 78px !important;
    max-height: 126px !important;
  }
  .inline-brand-logo.hero-brand-logo {
    width: min(100%, 362px) !important;
    margin-top: -9px !important;
    margin-bottom: -3px !important;
  }
  .inline-brand-logo.hero-brand-logo::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }
  .inline-brand-logo.hero-brand-logo::before {
    top: 56px !important;
    background-size: min(23vw, 86px) auto, min(62vw, 242px) auto !important;
    background-position: center min(27vw, 100px), center min(15vw, 52px) !important;
  }
  .hero-brand-logo .inline-brand-mark {
    width: min(96vw, 374px) !important;
    max-width: 374px !important;
  }
  .hero-brand-logo .inline-brand-ring {
    width: min(77vw, 300px) !important;
    top: 49.6% !important;
  }
  .hero-brand-logo .inline-brand-pin {
    width: min(35.5vw, 130px) !important;
    top: 52.6% !important;
  }
  .hero-brand-logo .inline-brand-inner-wordmark {
    top: 53.2% !important;
    width: min(78vw, 282px) !important;
    max-height: 44px !important;
  }
  .hero-brand-logo .inline-brand-tracker-pill {
    top: 64.4% !important;
    min-width: min(62vw, 224px) !important;
    padding: 8px 18px 9px !important;
    font-size: clamp(1.12rem, 5.9vw, 1.58rem) !important;
    letter-spacing: .19em !important;
  }
  .hero-card h1 {
    margin-top: 4px !important;
    margin-bottom: 11px !important;
  }
  .hero-lockup-zone {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    margin: 4px auto 11px !important;
  }
  .hero-lockup-zone > .hero-lockup {
    margin: 0 auto !important;
  }
  .hero-info-control {
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-right: 0 !important;
    top: 43% !important;
    right: 6px !important;
  }
  .hero-info-button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
  .hero-info-button .disclaimer-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: .9rem !important;
  }
  .hero-info-panel {
    left: auto !important;
    right: -2px !important;
    top: calc(100% + 9px) !important;
    bottom: auto !important;
    width: min(286px, calc(100vw - 54px)) !important;
    padding: 11px 12px !important;
    font-size: .78rem !important;
    line-height: 1.28 !important;
  }
  .hero-card h1.hero-lockup > .hero-lockup-kicker {
    font-size: clamp(.82rem, 4.35vw, 1.02rem) !important;
    line-height: .82 !important;
  }
  .hero-card h1.hero-lockup > .hero-lockup-main {
    font-size: calc(clamp(2.24rem, 11.6vw, 2.82rem) - .25rem) !important;
    line-height: .78 !important;
  }
  .hero-card h1.hero-lockup > .hero-lockup-accent {
    font-size: clamp(1.34rem, 6.9vw, 1.66rem) !important;
    line-height: .9 !important;
  }
}

/* Use only the real badge image; the older pseudo badge duplicates on phones. */
body .hero-card::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
}

/* v46: anchor the Burgh badge farther right for the smaller single-image hero mark. */
body .hero-card > img.hero-award-badge {
  top: 16px !important;
  right: calc(50% - 230px) !important;
  width: clamp(62px, 8.4vw, 76px) !important;
  min-width: 62px !important;
  clip-path: circle(49% at 50% 50%) !important;
  filter: drop-shadow(0 9px 12px rgba(0, 0, 0, .30)) !important;
}

@media (max-width: 520px) {
  body .hero-card > img.hero-award-badge {
    top: 14px !important;
    right: clamp(12px, calc(50% - 210px), 34px) !important;
    width: clamp(54px, 15.8vw, 62px) !important;
    min-width: 54px !important;
  }
}

/* v45: preserve the new hero art as a true square and give the slogan breathing room. */
.inline-brand-logo.hero-brand-logo {
  width: min(100%, 370px) !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

.hero-brand-logo .inline-brand-mark {
  display: block !important;
  width: min(78vw, 360px) !important;
  max-width: 360px !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 34px !important;
  clip-path: inset(0 round 34px) !important;
  box-shadow: 0 18px 34px rgba(0,0,0,.18) !important;
}

@media (max-width: 520px) {
  .inline-brand-logo.hero-brand-logo {
    width: min(100%, 336px) !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }

  .hero-brand-logo .inline-brand-mark {
    width: min(78vw, 328px) !important;
    max-width: 328px !important;
    border-radius: 31px !important;
    clip-path: inset(0 round 31px) !important;
  }
}

/* v47: hero save/info stack and new cup user marker. */
.hero-info-control {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  top: 55% !important;
  right: 10px !important;
}

.hero-save-button {
  position: relative !important;
}

.hero-save-icon {
  width: 25px !important;
  height: 25px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #26b7f4 0%, #0784d9 100%) !important;
  box-shadow: 0 7px 13px rgba(0, 102, 184, .32) !important;
}

.hero-save-icon svg {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.hero-save-count {
  position: absolute !important;
  right: -5px !important;
  top: -6px !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 4px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #32160b !important;
  background: linear-gradient(135deg, #fff0bf, #d5a766) !important;
  border: 1px solid rgba(255,255,255,.62) !important;
  font-size: .62rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  box-shadow: 0 6px 12px rgba(0,0,0,.18) !important;
}

.hero-save-count[hidden] {
  display: none !important;
}

.hero-save-button.has-saved-stops {
  border-color: rgba(255, 226, 181, .70) !important;
}

.hero-save-panel {
  top: auto !important;
  bottom: calc(100% + 10px) !important;
  width: min(352px, calc(100vw - 44px)) !important;
  max-height: min(52vh, 340px) !important;
  overflow: auto !important;
}

.hero-save-panel::after {
  top: auto !important;
  bottom: -7px !important;
  border-left: 0 !important;
  border-top: 0 !important;
  border-right: 1px solid rgba(91, 190, 246, .30) !important;
  border-bottom: 1px solid rgba(91, 190, 246, .30) !important;
}

.hero-save-panel > strong {
  display: block !important;
  color: #fffaf2 !important;
  font-size: .88rem !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.saved-stops-list {
  display: grid !important;
  gap: 9px !important;
}

.saved-stops-empty {
  margin: 0 !important;
  color: rgba(255,246,234,.78) !important;
  font-size: .8rem !important;
  line-height: 1.32 !important;
  font-weight: 780 !important;
}

.saved-stop-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

.saved-stop-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

.saved-stop-copy strong,
.saved-stop-copy small,
.saved-stop-copy span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.saved-stop-copy strong {
  color: #fffaf2 !important;
  font-size: .9rem !important;
  line-height: 1.06 !important;
  font-weight: 900 !important;
}

.saved-stop-copy small,
.saved-stop-copy span {
  color: rgba(255,246,234,.70) !important;
  font-size: .72rem !important;
  line-height: 1.15 !important;
  font-weight: 760 !important;
}

.saved-stop-actions {
  display: grid !important;
  gap: 6px !important;
}

.saved-stop-actions button {
  appearance: none !important;
  -webkit-appearance: none !important;
  min-height: 28px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #26b7f4 0%, #0784d9 100%) !important;
  font-size: .7rem !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.saved-stop-actions button[data-saved-remove] {
  color: rgba(255,246,234,.78) !important;
  background: rgba(255,255,255,.08) !important;
}

.rb-map-user-icon {
  width: 56px !important;
  height: 56px !important;
  background: transparent !important;
  border: 0 !important;
}

.rb-map-user-wrap {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: rgba(255,248,232,.96) !important;
  border: 2px solid #27b3ea !important;
  box-shadow: 0 9px 16px rgba(5,22,39,.30), inset 0 1px 0 rgba(255,255,255,.86) !important;
}

.rb-map-user-wrap img {
  width: 43px !important;
  height: 43px !important;
  margin: 12px auto 0 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 5px rgba(5,22,39,.22)) !important;
}

.rb-map-user-label,
.coffee-user-marker-label {
  top: 4px !important;
  width: 48px !important;
  color: #0c2239 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
}

.coffee-user-marker {
  width: 56px !important;
  height: 56px !important;
  border: 2px solid #27b3ea !important;
  background: rgba(255,248,232,.96) url("assets/you-coffee-cup-heart.webp?v=1") center 12px / 43px 43px no-repeat !important;
}

@media (max-width: 520px) {
  .hero-info-control {
    top: 56% !important;
    right: 7px !important;
    gap: 7px !important;
  }

  .hero-save-icon {
    width: 24px !important;
    height: 24px !important;
  }

  .hero-save-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  .hero-save-panel {
    width: min(292px, calc(100vw - 54px)) !important;
    max-height: min(50vh, 320px) !important;
    padding: 11px 12px !important;
  }

  .saved-stop-item {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .saved-stop-actions {
    grid-template-columns: 1fr 1fr !important;
  }
}

.closest-card .closest-route .closest-pin-mark-medallion,
.closest-card .closest-route .closest-medallion.closest-pin-mark-medallion {
  width: 104px !important;
  height: 104px !important;
  min-width: 104px !important;
  display: inline-grid !important;
  place-items: center !important;
  justify-self: center !important;
  align-self: center !important;
  overflow: visible !important;
}

.closest-card .closest-route .closest-pin-mark-medallion::before,
.closest-card .closest-route .closest-pin-mark-medallion::after,
.closest-card .closest-route .closest-medallion.closest-pin-mark-medallion::before,
.closest-card .closest-route .closest-medallion.closest-pin-mark-medallion::after {
  content: none !important;
  display: none !important;
}

.closest-card .closest-route .closest-pin-mark-medallion .closest-pin-mark-icon,
.closest-card .closest-route .closest-medallion.closest-pin-mark-medallion img {
  width: 104px !important;
  height: 104px !important;
  max-width: none !important;
  display: block !important;
  object-fit: contain !important;
  transform: translateX(-3px) scale(1.08) !important;
  transform-origin: center bottom !important;
  filter: drop-shadow(0 13px 14px rgba(8, 74, 128, .26)) !important;
}

.closest-card .closest-loading-route {
  min-height: 126px !important;
  grid-template-columns: 116px minmax(0, 1fr) !important;
  grid-template-areas: "icon copy" !important;
}

.closest-card .closest-loading-route .closest-loading-badge.closest-pin-mark-medallion .closest-pin-mark-icon {
  width: 96px !important;
  height: 96px !important;
  transform: translateX(-3px) scale(1.04) !important;
}

.closest-card .closest-loading-route .closest-loading-copy {
  align-self: center !important;
}

.closest-card .closest-loading-meter {
  width: min(100%, 320px) !important;
  height: 10px !important;
}

@media (min-width: 641px) {
  .closest-card .closest-route {
    grid-template-columns: 116px minmax(0, 1fr) minmax(126px, 164px) !important;
  }

  .closest-card .closest-route.closest-loading-route {
    grid-template-columns: 116px minmax(0, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .closest-card .closest-route {
    grid-template-columns: 92px minmax(0, 1fr) !important;
  }

  .closest-card .closest-route .closest-pin-mark-medallion,
  .closest-card .closest-route .closest-medallion.closest-pin-mark-medallion {
    width: 86px !important;
    height: 86px !important;
    min-width: 86px !important;
  }

  .closest-card .closest-route .closest-pin-mark-medallion .closest-pin-mark-icon,
  .closest-card .closest-route .closest-medallion.closest-pin-mark-medallion img,
  .closest-card .closest-loading-route .closest-loading-badge.closest-pin-mark-medallion .closest-pin-mark-icon {
    width: 86px !important;
    height: 86px !important;
    transform: translateX(-2px) scale(1.04) !important;
  }

  .closest-card .closest-loading-route {
    min-height: 112px !important;
  }
}

/* v49: location loading must stay visible even while the schedule skeleton is active. */
body.is-closest-loading #closestStop .closest-loading-route {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.is-closest-loading #closestStop .closest-loading-copy h2,
body.is-closest-loading.is-loading-schedule #closestStop .closest-loading-copy h2 {
  color: var(--brand-ink, #0c2239) !important;
  user-select: auto !important;
}

body.is-closest-loading #closestStop .closest-loading-copy h2::before,
body.is-closest-loading #closestStop .closest-loading-copy h2::after,
body.is-closest-loading.is-loading-schedule #closestStop .closest-loading-copy h2::before,
body.is-closest-loading.is-loading-schedule #closestStop .closest-loading-copy h2::after {
  content: none !important;
  display: none !important;
}

body.is-closest-loading #closestStop .closest-loading-copy,
body.is-closest-loading #closestStop .closest-chip-row,
body.is-closest-loading #closestStop .closest-chip-row span,
body.is-closest-loading #closestStop .closest-loading-meter {
  opacity: 1 !important;
  visibility: visible !important;
}

body.is-closest-loading #closestStop .closest-loading-meter {
  display: block !important;
}

.closest-card .closest-route-premium {
  overflow: hidden !important;
  clip-path: inset(0 round 22px) !important;
}

.closest-card .closest-route-premium .closest-pin-mark-medallion,
.closest-card .closest-route-premium .closest-medallion.closest-pin-mark-medallion {
  overflow: visible !important;
}

.closest-card .closest-route-premium .closest-coffee-cluster {
  overflow: visible !important;
}

/* v50: hard fallback loader for the closest card while the browser location prompt is active. */
.closest-card .closest-location-loader {
  display: none !important;
}

body.is-closest-loading .closest-card #closestStop {
  display: none !important;
}

body.is-closest-loading .closest-card .closest-location-loader {
  display: grid !important;
  grid-template-columns: 116px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 16px !important;
  min-height: 126px !important;
  padding: 8px 10px 10px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.closest-location-loader-icon {
  width: 104px !important;
  height: 104px !important;
  display: inline-grid !important;
  place-items: center !important;
  justify-self: center !important;
  overflow: visible !important;
}

.closest-location-loader-icon img {
  width: 98px !important;
  height: 98px !important;
  display: block !important;
  object-fit: contain !important;
  transform: translateX(-3px) scale(1.05) !important;
  transform-origin: center bottom !important;
  filter: drop-shadow(0 13px 14px rgba(8, 74, 128, .26)) !important;
}

.closest-location-loader-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 7px !important;
  align-content: center !important;
  color: var(--brand-ink, #0c2239) !important;
}

.closest-location-loader-copy strong {
  display: block !important;
  color: var(--brand-ink, #0c2239) !important;
  font-size: clamp(1.45rem, 5vw, 2.15rem) !important;
  line-height: 1.02 !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
}

.closest-location-loader-copy > span:not(.closest-location-loader-meter) {
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  color: rgba(12,34,57,.78) !important;
  background: rgba(12,34,57,.10) !important;
  border: 1px solid rgba(12,34,57,.08) !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
}

.closest-location-loader-meter {
  display: block !important;
  width: min(100%, 320px) !important;
  height: 10px !important;
  margin-top: 2px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(12,34,57,.10) !important;
  border: 1px solid rgba(12,34,57,.08) !important;
  box-shadow: inset 0 1px 2px rgba(12,34,57,.08) !important;
}

.closest-location-loader-meter > span {
  display: block !important;
  width: 42% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #2ec6ff, #0877d9, #2ec6ff) !important;
  box-shadow: 0 0 14px rgba(46,198,255,.40) !important;
  animation: rbClosestMeter 1.18s ease-in-out infinite !important;
}

body.is-loading-schedule.is-closest-loading .closest-card .closest-location-loader strong::before,
body.is-loading-schedule.is-closest-loading .closest-card .closest-location-loader strong::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 640px) {
  body.is-closest-loading .closest-card .closest-location-loader {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    min-height: 112px !important;
    padding: 6px 4px 8px !important;
  }

  .closest-location-loader-icon,
  .closest-location-loader-icon img {
    width: 86px !important;
    height: 86px !important;
  }

  .closest-location-loader-copy strong {
    font-size: clamp(1.28rem, 6vw, 1.82rem) !important;
  }
}

/* v51: keep saved-stops panel above hero art and rebalance mobile stop actions. */
.hero-info-control {
  z-index: 3000 !important;
}

.hero-save-panel {
  z-index: 12000 !important;
  isolation: isolate !important;
}

.saved-stops-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 8px 9px !important;
  border-radius: 13px !important;
  color: rgba(255,246,234,.86) !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

.saved-stops-toolbar span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
}

.saved-stops-toolbar button {
  appearance: none !important;
  -webkit-appearance: none !important;
  min-height: 28px !important;
  padding: 5px 10px !important;
  border: 1px solid rgba(255,226,181,.36) !important;
  border-radius: 999px !important;
  color: #32160b !important;
  background: linear-gradient(135deg, #fff0bf, #d5a766) !important;
  font-size: .68rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

@media (max-width: 720px) {
  .stop-actions {
    grid-template-columns: minmax(116px, .68fr) minmax(0, 1.52fr) !important;
    gap: 9px !important;
  }

  .save-stop-btn {
    min-width: 0 !important;
    padding: 8px !important;
    gap: 7px !important;
  }

  .save-stop-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  .save-stop-copy strong {
    font-size: clamp(.73rem, 2.7vw, .88rem) !important;
  }

  .save-stop-copy small {
    font-size: clamp(.56rem, 2.15vw, .66rem) !important;
  }

  .stop-actions .route-main {
    display: grid !important;
    grid-template-columns: 34px minmax(62px, .84fr) minmax(54px, 1fr) 17px !important;
    column-gap: 7px !important;
    align-items: center !important;
    justify-items: start !important;
    min-width: 0 !important;
    padding: 8px 12px 8px 10px !important;
    overflow: hidden !important;
  }

  .stop-actions .route-icon {
    width: 34px !important;
    min-width: 34px !important;
    justify-self: center !important;
  }

  .stop-actions .route-text,
  .stop-actions .route-provider {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  .stop-actions .route-text {
    justify-self: center !important;
    text-align: center !important;
    line-height: 1.02 !important;
    font-size: clamp(.82rem, 3.1vw, 1rem) !important;
  }

  .stop-actions .route-provider {
    margin-left: 0 !important;
    text-align: left !important;
    line-height: 1.05 !important;
    font-size: clamp(.56rem, 2.25vw, .68rem) !important;
  }

  .stop-actions .route-main::after {
    margin-left: 0 !important;
    justify-self: end !important;
    align-self: center !important;
    flex: 0 0 auto !important;
    width: 8px !important;
    height: 8px !important;
    border-right-width: 3px !important;
    border-bottom-width: 3px !important;
  }
}

@media (max-width: 380px) {
  .stop-actions {
    grid-template-columns: minmax(96px, .56fr) minmax(0, 1.7fr) !important;
    gap: 8px !important;
  }

  .save-stop-btn {
    padding-inline: 7px !important;
  }

  .save-stop-icon {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
  }

  .save-stop-copy small {
    display: none !important;
  }

  .stop-actions .route-main {
    grid-template-columns: 30px minmax(0, 1fr) 14px !important;
    column-gap: 7px !important;
    padding-inline: 9px !important;
  }

  .stop-actions .route-provider {
    display: none !important;
  }

  .stop-actions .route-text {
    white-space: normal !important;
    font-size: clamp(.78rem, 3.8vw, .94rem) !important;
  }
}

/* v52: featured menu control, cleaner saved popout stacking, and single-line save buttons. */
.hero-lockup-zone {
  z-index: 2500 !important;
}

body .hero-card > img.hero-award-badge {
  z-index: 50 !important;
}

.hero-info-control {
  z-index: 6000 !important;
}

.hero-info-panel,
.hero-save-panel,
.hero-menu-panel {
  z-index: 30000 !important;
}

.hero-menu-button {
  width: 52px !important;
  min-width: 52px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #fff0bf 0%, #d5a766 100%) !important;
  color: #32160b !important;
  border-color: rgba(255, 246, 234, .54) !important;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, .20),
    inset 0 1px 0 rgba(255,255,255,.50) !important;
}

.hero-menu-icon {
  display: inline-grid !important;
  place-items: center !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: .68rem !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;
}

.hero-menu-panel {
  top: auto !important;
  bottom: calc(100% + 10px) !important;
  width: min(390px, calc(100vw - 34px)) !important;
  max-height: min(70vh, 520px) !important;
  overflow: auto !important;
  padding: 14px !important;
}

.hero-menu-panel::after {
  top: auto !important;
  bottom: -7px !important;
  border-left: 0 !important;
  border-top: 0 !important;
  border-right: 1px solid rgba(91, 190, 246, .30) !important;
  border-bottom: 1px solid rgba(91, 190, 246, .30) !important;
}

.hero-menu-panel > strong {
  display: block !important;
  color: #fffaf2 !important;
  font-size: .92rem !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.hero-menu-list {
  display: grid !important;
  gap: 9px !important;
}

.hero-menu-item {
  padding: 10px 11px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

.hero-menu-item strong {
  display: block !important;
  color: #fffaf2 !important;
  font-size: .9rem !important;
  line-height: 1.08 !important;
  font-weight: 930 !important;
}

.hero-menu-item p {
  margin: 5px 0 0 !important;
  color: rgba(255,246,234,.74) !important;
  font-size: .76rem !important;
  line-height: 1.28 !important;
  font-weight: 760 !important;
}

.save-stop-copy {
  gap: 0 !important;
  align-content: center !important;
}

.save-stop-copy small {
  display: none !important;
}

@media (max-width: 720px) {
  .save-stop-btn {
    min-height: 50px !important;
  }

  .hero-menu-button {
    width: 50px !important;
    min-width: 50px !important;
    height: 32px !important;
  }
}

@media (max-width: 520px) {
  .hero-menu-panel {
    width: min(318px, calc(100vw - 42px)) !important;
    max-height: min(68vh, 470px) !important;
    padding: 12px !important;
  }

  .hero-menu-item {
    padding: 9px 10px !important;
  }

  .hero-menu-item strong {
    font-size: .84rem !important;
  }

  .hero-menu-item p {
    font-size: .72rem !important;
  }
}

/* v53: smaller hero mark, left/down menu, and narrow-phone dashboard guards. */
.inline-brand-logo.hero-brand-logo {
  width: min(100%, 293px) !important;
  margin-bottom: 16px !important;
}

.hero-brand-logo .inline-brand-mark {
  width: min(61vw, 284px) !important;
  max-width: 284px !important;
  border-radius: 27px !important;
  clip-path: inset(0 round 27px) !important;
  box-shadow: 0 14px 27px rgba(0,0,0,.17) !important;
}

body .hero-card > img.hero-award-badge {
  top: 12px !important;
  right: calc(50% - 178px) !important;
  width: clamp(52px, 6.9vw, 63px) !important;
  min-width: 52px !important;
}

.hero-info-control {
  top: 49% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 0 !important;
  display: block !important;
  transform: translateY(-50%) !important;
}

.hero-menu-button,
.hero-save-button,
#heroInfoButton {
  position: absolute !important;
  pointer-events: auto !important;
}

.hero-menu-button {
  left: 4px !important;
  top: -2px !important;
}

.hero-save-button {
  right: 0 !important;
  top: -32px !important;
}

#heroInfoButton {
  right: 0 !important;
  top: 4px !important;
}

.hero-menu-panel {
  left: 0 !important;
  right: auto !important;
  top: 42px !important;
  bottom: auto !important;
  width: min(390px, calc(100vw - 42px)) !important;
}

.hero-menu-panel::after {
  left: 18px !important;
  right: auto !important;
  top: -7px !important;
  bottom: auto !important;
  border-left: 1px solid rgba(91, 190, 246, .30) !important;
  border-top: 1px solid rgba(91, 190, 246, .30) !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
}

.hero-save-panel {
  right: 0 !important;
  left: auto !important;
  bottom: 48px !important;
  top: auto !important;
}

.hero-info-panel:not(.hero-save-panel):not(.hero-menu-panel) {
  right: 0 !important;
  left: auto !important;
  top: 76px !important;
  bottom: auto !important;
}

@media (max-width: 520px) {
  .inline-brand-logo.hero-brand-logo {
    width: min(100%, 266px) !important;
    margin-bottom: 14px !important;
  }

  .hero-brand-logo .inline-brand-mark {
    width: min(63vw, 261px) !important;
    max-width: 261px !important;
    border-radius: 25px !important;
    clip-path: inset(0 round 25px) !important;
  }

  body .hero-card > img.hero-award-badge {
    top: 9px !important;
    right: clamp(33px, calc(50% - 147px), 55px) !important;
    width: clamp(45px, 12.6vw, 52px) !important;
    min-width: 45px !important;
  }

  .hero-info-control {
    top: 48% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  .hero-menu-button {
    left: 2px !important;
    top: -3px !important;
  }

  .hero-save-button {
    right: 0 !important;
    top: -32px !important;
  }

  #heroInfoButton {
    right: 0 !important;
    top: 2px !important;
  }

  .hero-menu-panel {
    left: 0 !important;
    right: auto !important;
    top: 40px !important;
    bottom: auto !important;
    width: min(318px, calc(100vw - 36px)) !important;
    max-height: min(64vh, 450px) !important;
  }

  .hero-save-panel {
    right: 0 !important;
    bottom: 44px !important;
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .summary-schedule,
  .summary-stops,
  .summary-status {
    grid-column: auto !important;
    min-width: 0 !important;
    min-height: 104px !important;
    padding: 10px 6px !important;
    border-radius: 19px !important;
  }

  .summary-schedule {
    grid-column: 1 / -1 !important;
  }

  .summary-stops,
  .summary-status {
    grid-column: auto !important;
  }

  .summary-card .summary-icon {
    width: 24px !important;
    height: 24px !important;
    top: 8px !important;
    right: 8px !important;
    border-radius: 10px !important;
  }

  .summary-card .summary-icon svg {
    width: 12px !important;
    height: 12px !important;
  }

  .summary-card .mini-label {
    font-size: clamp(.50rem, 2.1vw, .60rem) !important;
    letter-spacing: .12em !important;
    line-height: 1.05 !important;
    max-width: calc(100% - 22px) !important;
  }

  .summary-schedule h2 {
    font-size: clamp(1.08rem, 4.7vw, 1.32rem) !important;
    line-height: .98 !important;
  }

  .summary-stops h2 {
    font-size: clamp(1.78rem, 8.8vw, 2.18rem) !important;
    line-height: .95 !important;
  }

  .summary-status h2 {
    font-size: clamp(.92rem, 4.1vw, 1.15rem) !important;
    line-height: 1.02 !important;
    max-width: 8ch !important;
  }

  .summary-date {
    font-size: .66rem !important;
    line-height: 1.05 !important;
  }

  .schedule-picker-hint {
    padding: 6px 9px !important;
    font-size: clamp(.56rem, 2.3vw, .66rem) !important;
    max-width: 100% !important;
  }
}

@media (max-width: 360px) {
  .summary-grid {
    gap: 5px !important;
  }

  .summary-schedule {
    grid-column: 1 / -1 !important;
  }

  .summary-schedule,
  .summary-stops,
  .summary-status {
    min-height: 98px !important;
    padding: 9px 5px !important;
    border-radius: 17px !important;
  }

  .summary-card .summary-icon {
    width: 22px !important;
    height: 22px !important;
    top: 7px !important;
    right: 7px !important;
  }

  .summary-card .mini-label {
    font-size: .48rem !important;
    letter-spacing: .10em !important;
  }

  .summary-schedule h2 {
    font-size: 1.02rem !important;
  }

  .summary-status h2 {
    font-size: .88rem !important;
  }

  .schedule-picker-hint {
    padding: 5px 7px !important;
  }
}

/* v54: refresher menu section and tighter hero side controls. */
.hero-menu-section-title {
  display: block !important;
  color: #fffaf2 !important;
  font-size: .92rem !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;
}

.hero-menu-section-title-refreshers {
  margin-top: 2px !important;
  color: #76d9ff !important;
}

.hero-menu-refreshers {
  gap: 7px !important;
}

.hero-menu-refreshers .hero-menu-item {
  padding: 9px 11px !important;
}

/* v55: move the day chip off the crowded mobile top row. */
@media (max-width: 520px) {
  #results .stop-card:not(.cancelled-card) .card-topline {
    gap: 6px !important;
    align-items: center !important;
  }

  #results .stop-card:not(.cancelled-card) .card-topline .day-chip {
    display: none !important;
  }

  #results .stop-card:not(.cancelled-card) .card-topline .distance-chip {
    max-width: calc(100% - 112px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #results .stop-card:not(.cancelled-card) .stop-time[data-day] {
    position: relative !important;
    margin-right: 58px !important;
    overflow: visible !important;
  }

  #results .stop-card:not(.cancelled-card) .stop-time[data-day]::after {
    content: attr(data-day) !important;
    position: absolute !important;
    left: calc(100% + 8px) !important;
    top: 50% !important;
    min-height: 25px !important;
    padding: 5px 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    color: #5a2e12 !important;
    background: linear-gradient(135deg, #fff8e9 0%, #f2cf96 58%, #d49a4f 100%) !important;
    border: 1px solid rgba(129, 73, 24, .28) !important;
    box-shadow:
      0 7px 14px rgba(112, 63, 18, .13),
      inset 0 1px 0 rgba(255,255,255,.72) !important;
    font-size: .68rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.62) !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
  }
}

/* v56: reduce the hero white artwork 10% and nudge the saved/info controls left. */
.inline-brand-logo.hero-brand-logo {
  width: min(100%, 264px) !important;
}

.hero-brand-logo .inline-brand-mark {
  width: min(55vw, 256px) !important;
  max-width: 256px !important;
  border-radius: 24px !important;
  clip-path: inset(0 round 24px) !important;
}

.hero-save-button,
#heroInfoButton,
.hero-save-panel,
.hero-info-panel:not(.hero-save-panel):not(.hero-menu-panel) {
  right: 12px !important;
}

@media (max-width: 520px) {
  .inline-brand-logo.hero-brand-logo {
    width: min(100%, 240px) !important;
  }

  .hero-brand-logo .inline-brand-mark {
    width: min(57vw, 235px) !important;
    max-width: 235px !important;
    border-radius: 23px !important;
    clip-path: inset(0 round 23px) !important;
  }

  .hero-save-button,
  #heroInfoButton,
  .hero-save-panel,
  .hero-info-panel:not(.hero-save-panel):not(.hero-menu-panel) {
    right: 12px !important;
  }
}

/* v57: make normal stop-card whitespace feel composed by integrating the drink art. */
#results .stop-card.coffee-art-card:not(.cancelled-card),
.results .stop-card.coffee-art-card:not(.cancelled-card) {
  --rb-stop-drink-w: clamp(104px, 16vw, 138px);
  --rb-stop-drink-h: clamp(138px, 22vw, 178px);
  isolation: isolate !important;
}

#results .stop-card.coffee-art-card:not(.cancelled-card)::before,
.results .stop-card.coffee-art-card:not(.cancelled-card)::before {
  content: "" !important;
  position: absolute !important;
  inset: auto -42px 46px auto !important;
  display: block !important;
  width: clamp(150px, 27vw, 230px) !important;
  height: clamp(138px, 22vw, 190px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .92 !important;
  background:
    radial-gradient(ellipse at 54% 60%, rgba(255,255,255,.76) 0%, rgba(255,255,255,.42) 35%, rgba(255,224,163,.22) 56%, rgba(255,224,163,0) 76%),
    linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.20) 45%, rgba(255,255,255,0)) !important;
  filter: blur(.2px) !important;
}

#results .stop-card.coffee-art-card:not(.cancelled-card)::after,
.results .stop-card.coffee-art-card:not(.cancelled-card)::after {
  top: auto !important;
  bottom: clamp(36px, 4.4vw, 54px) !important;
  right: clamp(2px, 1.9vw, 16px) !important;
  width: var(--rb-stop-drink-w) !important;
  height: var(--rb-stop-drink-h) !important;
  background-position: center bottom !important;
  background-size: contain !important;
  opacity: .98 !important;
  filter: drop-shadow(0 14px 16px rgba(74, 42, 12, .22)) drop-shadow(0 2px 1px rgba(255,255,255,.42)) !important;
  transform: translateY(4px) rotate(1deg) !important;
  transform-origin: 50% 100% !important;
  z-index: 1 !important;
}

#results .stop-card.coffee-art-card:not(.cancelled-card) > *,
.results .stop-card.coffee-art-card:not(.cancelled-card) > * {
  position: relative !important;
  z-index: 2 !important;
}

#results .stop-card.coffee-art-card:not(.cancelled-card) .stop-actions,
.results .stop-card.coffee-art-card:not(.cancelled-card) .stop-actions {
  position: relative !important;
  z-index: 4 !important;
}

@media (max-width: 640px) {
  #results .stop-card.coffee-art-card:not(.cancelled-card),
  .results .stop-card.coffee-art-card:not(.cancelled-card) {
    --rb-stop-drink-w: min(25vw, 108px);
    --rb-stop-drink-h: min(36vw, 148px);
  }

  #results .stop-card.coffee-art-card:not(.cancelled-card)::before,
  .results .stop-card.coffee-art-card:not(.cancelled-card)::before {
    right: -42px !important;
    bottom: 42px !important;
    width: 152px !important;
    height: 134px !important;
    opacity: .76 !important;
  }

  #results .stop-card.coffee-art-card:not(.cancelled-card)::after,
  .results .stop-card.coffee-art-card:not(.cancelled-card)::after {
    bottom: 43px !important;
    right: 5px !important;
    transform: translateY(5px) rotate(.8deg) !important;
  }
}

@media (max-width: 430px) {
  #results .stop-card.coffee-art-card:not(.cancelled-card),
  .results .stop-card.coffee-art-card:not(.cancelled-card) {
    --rb-stop-drink-w: min(23.5vw, 96px);
    --rb-stop-drink-h: min(33vw, 132px);
  }

  #results .stop-card.coffee-art-card:not(.cancelled-card)::before,
  .results .stop-card.coffee-art-card:not(.cancelled-card)::before {
    right: -48px !important;
    bottom: 42px !important;
    width: 144px !important;
    height: 126px !important;
    opacity: .68 !important;
  }

  #results .stop-card.coffee-art-card:not(.cancelled-card)::after,
  .results .stop-card.coffee-art-card:not(.cancelled-card)::after {
    bottom: 44px !important;
    right: 4px !important;
  }
}

/* v58: one-line premium tagline treatment. */
.hero-lockup-zone {
  width: min(100%, 478px) !important;
  max-width: 478px !important;
  margin: 4px auto 14px !important;
}

.hero-card h1.hero-lockup {
  width: 100% !important;
  margin: 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .34rem !important;
  white-space: nowrap !important;
  overflow: visible !important;
  line-height: 1 !important;
  text-align: center !important;
}

.hero-card h1.hero-lockup > span {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
  transform: none !important;
  vertical-align: middle !important;
  text-align: center !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 2px rgba(2, 15, 31, .62), 0 8px 16px rgba(0, 0, 0, .30) !important;
}

.hero-card h1.hero-lockup > .hero-lockup-kicker {
  color: var(--cream) !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 1.08rem !important;
  font-weight: 950 !important;
}

.hero-card h1.hero-lockup > .hero-lockup-main {
  color: var(--cream) !important;
  font-family: Allura, "Brush Script MT", cursive !important;
  font-size: 1.52rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  line-height: .86 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.22), 0 5px 12px rgba(0,0,0,.38) !important;
  transform: translateY(.05em) !important;
}

.hero-card h1.hero-lockup > .hero-lockup-accent {
  color: #1265c8 !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 1.08rem !important;
  font-weight: 950 !important;
}

@media (max-width: 520px) {
  .hero-lockup-zone {
    width: min(100%, 360px) !important;
    max-width: 360px !important;
    margin: 2px auto 13px !important;
  }

  .hero-card h1.hero-lockup {
    gap: .24rem !important;
  }

  .hero-card h1.hero-lockup > .hero-lockup-kicker,
  .hero-card h1.hero-lockup > .hero-lockup-accent {
    font-size: .76rem !important;
  }

  .hero-card h1.hero-lockup > .hero-lockup-main {
    font-size: 1.12rem !important;
  }
}

@media (max-width: 360px) {
  .hero-card h1.hero-lockup {
    gap: .18rem !important;
  }

  .hero-card h1.hero-lockup > .hero-lockup-kicker,
  .hero-card h1.hero-lockup > .hero-lockup-accent {
    font-size: .68rem !important;
  }

  .hero-card h1.hero-lockup > .hero-lockup-main {
    font-size: 1rem !important;
  }
}

/* v59: clean one-line tagline and labeled Menu / Info / Saved row. */
.hero-card h1.hero-lockup {
  width: min(100%, 438px) !important;
  margin: 3px auto 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(.18rem, 1vw, .42rem) !important;
  white-space: nowrap !important;
  overflow: visible !important;
  line-height: 1 !important;
}

.hero-card h1.hero-lockup > span {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  letter-spacing: .005em !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 2px rgba(2, 15, 31, .60), 0 8px 16px rgba(0, 0, 0, .28) !important;
}

.hero-card h1.hero-lockup > .hero-lockup-kicker,
.hero-card h1.hero-lockup > .hero-lockup-accent {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: clamp(.78rem, 2.4vw, 1.05rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.hero-card h1.hero-lockup > .hero-lockup-kicker {
  color: #fff5df !important;
}

.hero-card h1.hero-lockup > .hero-lockup-main {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  position: relative !important;
  color: #fff5df !important;
  font-family: Allura, "Segoe Script", "Snell Roundhand", "Brush Script MT", cursive !important;
  font-size: clamp(1.34rem, 4vw, 1.78rem) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  line-height: .72 !important;
  padding: 0 .46em !important;
  transform: translateY(.04em) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.22), 0 5px 12px rgba(0,0,0,.42) !important;
}

.hero-card h1.hero-lockup > .hero-lockup-main::before,
.hero-card h1.hero-lockup > .hero-lockup-main::after {
  content: "" !important;
  position: absolute !important;
  top: 52% !important;
  width: .86em !important;
  height: .36em !important;
  border-top: 2px solid rgba(255, 245, 223, .92) !important;
  pointer-events: none !important;
}

.hero-card h1.hero-lockup > .hero-lockup-main::before {
  right: calc(100% - .32em) !important;
  border-radius: 100% 0 0 0 !important;
  transform: translateY(-50%) rotate(7deg) !important;
}

.hero-card h1.hero-lockup > .hero-lockup-main::after {
  left: calc(100% - .32em) !important;
  border-radius: 0 100% 0 0 !important;
  transform: translateY(-50%) rotate(-7deg) !important;
}

.hero-card h1.hero-lockup > .hero-lockup-accent {
  color: #1265c8 !important;
}

.hero-info-control {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: min(100%, 328px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 10px auto 12px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: 40 !important;
}

.hero-menu-button,
.hero-save-button,
#heroInfoButton,
.hero-info-button {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  height: 34px !important;
  min-width: 0 !important;
  padding: 4px 11px 4px 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 226, 181, .74) !important;
  color: #10233b !important;
  background: linear-gradient(145deg, #fff2ce 0%, #ffd98f 100%) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.72) !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: .70rem !important;
  font-weight: 950 !important;
  letter-spacing: .005em !important;
  line-height: 1 !important;
  text-transform: none !important;
  pointer-events: auto !important;
}

.hero-info-control > .hero-info-button {
  flex: 0 0 auto !important;
}

.hero-info-control > .hero-info-panel[hidden] {
  display: none !important;
}

.hero-info-button .hero-pill-label {
  display: inline-block !important;
  color: inherit !important;
  font: inherit !important;
  line-height: 1 !important;
}

.hero-info-button .hero-pill-icon,
.hero-info-button .disclaimer-icon,
.hero-info-button .hero-save-icon,
.hero-info-button .hero-menu-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #26b7f4 0%, #0784d9 100%) !important;
  box-shadow: 0 5px 10px rgba(0, 102, 184, .28) !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: .76rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.hero-info-button svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.25 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.hero-info-button[aria-expanded="true"] {
  border-color: rgba(255, 246, 230, .92) !important;
  filter: brightness(1.03) !important;
}

.hero-save-count {
  position: absolute !important;
  top: -6px !important;
  right: -5px !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 4px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #10233b !important;
  background: #ffe0a0 !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  font-size: .58rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  box-shadow: 0 5px 10px rgba(0,0,0,.22) !important;
}

.hero-save-count[hidden] {
  display: none !important;
}

.hero-info-panel,
.hero-menu-panel,
.hero-save-panel,
.hero-info-panel:not(.hero-save-panel):not(.hero-menu-panel) {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: calc(100% + 10px) !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: min(390px, calc(100vw - 34px)) !important;
  z-index: 1200 !important;
}

.hero-info-panel::after,
.hero-menu-panel::after,
.hero-save-panel::after {
  left: 50% !important;
  right: auto !important;
  top: -7px !important;
  bottom: auto !important;
  transform: translateX(-50%) rotate(45deg) !important;
}

.hero-actions {
  margin-top: 0 !important;
}

@media (max-width: 520px) {
  .hero-card h1.hero-lockup {
    width: min(100%, 306px) !important;
    gap: .12rem !important;
  }

  .hero-card h1.hero-lockup > .hero-lockup-kicker,
  .hero-card h1.hero-lockup > .hero-lockup-accent {
    font-size: clamp(.58rem, 2.45vw, .72rem) !important;
  }

  .hero-card h1.hero-lockup > .hero-lockup-main {
    font-size: clamp(.98rem, 4.15vw, 1.16rem) !important;
    padding: 0 .28em !important;
  }

  .hero-card h1.hero-lockup > .hero-lockup-main::before,
  .hero-card h1.hero-lockup > .hero-lockup-main::after {
    width: .40em !important;
    border-top-width: 1.5px !important;
  }

  .hero-info-control {
    width: min(100%, 292px) !important;
    gap: 6px !important;
    margin: 8px auto 11px !important;
  }

  .hero-info-button {
    height: 32px !important;
    padding: 4px 8px 4px 5px !important;
    gap: 5px !important;
    font-size: .66rem !important;
  }

  .hero-info-button .hero-pill-icon,
  .hero-info-button .disclaimer-icon,
  .hero-info-button .hero-save-icon,
  .hero-info-button .hero-menu-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    font-size: .70rem !important;
  }
}

@media (max-width: 360px) {
  .hero-card h1.hero-lockup {
    width: min(100%, 270px) !important;
    gap: .08rem !important;
  }

  .hero-card h1.hero-lockup > .hero-lockup-kicker,
  .hero-card h1.hero-lockup > .hero-lockup-accent {
    font-size: .52rem !important;
  }

  .hero-card h1.hero-lockup > .hero-lockup-main {
    font-size: .88rem !important;
    padding: 0 .22em !important;
  }

  .hero-info-control {
    width: min(100%, 262px) !important;
    gap: 5px !important;
  }

  .hero-info-button {
    padding-right: 7px !important;
    font-size: .62rem !important;
  }
}

/* v60: match the full-page card rhythm to the current stop-card spacing. */
:root {
  --rb-card-stack-gap: 12px;
  --rb-card-stack-gap-tight: 12px;
}

.app-shell > .hero-card,
.app-shell > .summary-grid,
.app-shell > .map-panel,
.app-shell > .rb-map-picker-slot,
.app-shell > .notice:not(.hidden),
.app-shell > .results,
.app-shell > .install-footer {
  margin-top: 0 !important;
  margin-bottom: var(--rb-card-stack-gap) !important;
}

.summary-grid,
.install-footer,
.results {
  gap: var(--rb-card-stack-gap) !important;
}

.summary-grid > .closest-card {
  margin-bottom: 0 !important;
}

#results::before,
#results[data-schedule-art]::before,
.results::before,
.results[data-schedule-art]::before {
  margin: 0 !important;
}

.developer-support-footer {
  margin-top: 0 !important;
  margin-bottom: calc(var(--rb-card-stack-gap) * 2) !important;
}

@media (max-width: 520px) {
  .app-shell > .hero-card,
  .app-shell > .summary-grid,
  .app-shell > .map-panel,
  .app-shell > .rb-map-picker-slot,
  .app-shell > .notice:not(.hidden),
  .app-shell > .results,
  .app-shell > .install-footer {
    margin-bottom: var(--rb-card-stack-gap-tight) !important;
  }

  .summary-grid,
  .install-footer,
  .results {
    gap: var(--rb-card-stack-gap-tight) !important;
  }

  .developer-support-footer {
    margin-bottom: calc(var(--rb-card-stack-gap-tight) * 2) !important;
  }
}

/* v61: make Menu, Info, and Saved popouts match the day/map picker modal finish. */
.hero-info-panel,
.hero-menu-panel,
.hero-save-panel,
.hero-info-panel:not(.hero-save-panel):not(.hero-menu-panel) {
  width: min(430px, calc(100vw - 28px)) !important;
  max-height: min(72dvh, 620px) !important;
  padding: 18px 16px 16px !important;
  overflow: auto !important;
  border-radius: 30px !important;
  text-align: center !important;
  color: #fffaf2 !important;
  background:
    radial-gradient(circle at 82% 8%, rgba(46,198,255,.16), transparent 7rem),
    radial-gradient(circle at 8% 92%, rgba(213,167,102,.14), transparent 8rem),
    linear-gradient(155deg, rgba(5,25,48,.96), rgba(3,12,24,.94) 62%, rgba(21,14,10,.92)) !important;
  border: 1px solid rgba(213,167,102,.52) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,207,131,.55) rgba(255,255,255,.06) !important;
}

.hero-info-panel::after,
.hero-menu-panel::after,
.hero-save-panel::after {
  width: 16px !important;
  height: 16px !important;
  border-left: 1px solid rgba(213,167,102,.52) !important;
  border-top: 1px solid rgba(213,167,102,.52) !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  background: linear-gradient(135deg, rgba(5,25,48,.98), rgba(3,12,24,.96)) !important;
}

.hero-menu-panel {
  top: calc(100% + 12px) !important;
  bottom: auto !important;
}

.hero-menu-panel::after {
  top: -8px !important;
  bottom: auto !important;
  transform: translateX(-50%) rotate(45deg) !important;
}

.hero-menu-panel > strong,
.hero-save-panel > strong {
  display: block !important;
  width: 100% !important;
  margin: 0 auto 12px !important;
  color: #57d7ff !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: .70rem !important;
  font-weight: 950 !important;
  letter-spacing: .13em !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.hero-menu-section-title-refreshers {
  margin-top: 14px !important;
}

.hero-menu-list,
.saved-stops-list {
  display: grid !important;
  gap: 10px !important;
}

.hero-menu-item,
.saved-stop-item,
.saved-stops-toolbar,
.saved-stops-empty {
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 20px !important;
  color: #fffaf2 !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(46,198,255,.12), transparent 4rem),
    rgba(255,255,255,.075) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.hero-menu-item {
  padding: 13px 14px !important;
  text-align: left !important;
}

.hero-menu-item strong,
.saved-stop-copy strong {
  color: #fffaf2 !important;
  font-size: 1.02rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.hero-menu-item p,
.saved-stop-copy small,
.saved-stop-copy span,
.saved-stops-empty,
.hero-info-panel > span,
.hero-info-location-status {
  color: rgba(255,250,242,.72) !important;
  font-size: .88rem !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

.hero-info-panel > span {
  max-width: 330px !important;
  margin: 0 auto !important;
  display: block !important;
  text-align: center !important;
}

.hero-info-location-tools {
  width: 100% !important;
  max-width: 330px !important;
  margin: 2px auto 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,.14) !important;
}

.hero-info-refresh-btn,
.saved-stops-toolbar button,
.saved-stop-actions button {
  min-height: 34px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  color: #09223a !important;
  background: linear-gradient(135deg, #fff0bf, #d5a766) !important;
  border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 8px 16px rgba(0,0,0,.18) !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: .76rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  text-decoration: none !important;
}

.saved-stops-toolbar {
  min-height: 52px !important;
  padding: 10px 12px !important;
  align-items: center !important;
}

.saved-stops-toolbar span {
  color: rgba(255,250,242,.82) !important;
  font-size: .82rem !important;
  font-weight: 950 !important;
}

.saved-stop-item {
  padding: 12px !important;
  text-align: left !important;
}

.saved-stop-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.saved-stops-empty {
  margin: 0 !important;
  padding: 14px !important;
  text-align: center !important;
}

@media (max-width: 520px) {
  .hero-info-panel,
  .hero-menu-panel,
  .hero-save-panel,
  .hero-info-panel:not(.hero-save-panel):not(.hero-menu-panel) {
    width: min(360px, calc(100vw - 30px)) !important;
    max-height: min(68dvh, 500px) !important;
    padding: 16px 12px 12px !important;
    border-radius: 26px !important;
  }

  .hero-menu-item,
  .saved-stop-item {
    padding: 12px !important;
  }
}

/* v62: prevent transparent hero-art corners from reading as black over the dark hero card. */
.hero-brand-logo .inline-brand-mark {
  background: #f8fbff !important;
}

/* v63: prevent stale glass layers from painting as empty cards during resize/scroll. */
.hero-actions .btn,
.summary-schedule,
.summary-stops,
.summary-status,
.rb-map-picker-slot {
  backface-visibility: visible !important;
  transform: none !important;
  will-change: auto !important;
  isolation: isolate !important;
}

.hero-actions .btn,
.summary-schedule,
.summary-stops,
.summary-status {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.hero-actions .btn > *,
.summary-card > *,
.rb-map-picker-slot > * {
  position: relative !important;
  z-index: 1 !important;
}

.map-panel[data-rb-map-panel-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* v64: desktop-only cup rail. Mobile cup placement is intentionally untouched. */
@media (min-width: 641px) {
  #results .stop-card.coffee-art-card:not(.cancelled-card),
  .results .stop-card.coffee-art-card:not(.cancelled-card) {
    --rb-stop-drink-w: clamp(104px, 13.6vw, 126px);
    --rb-stop-drink-h: clamp(138px, 18vw, 162px);
  }

  #results .stop-card.coffee-art-card:not(.cancelled-card)::before,
  .results .stop-card.coffee-art-card:not(.cancelled-card)::before {
    inset: clamp(72px, 8vw, 90px) -36px auto auto !important;
    width: clamp(160px, 25vw, 218px) !important;
    height: clamp(150px, 20vw, 188px) !important;
    opacity: .84 !important;
  }

  #results .stop-card.coffee-art-card:not(.cancelled-card)::after,
  .results .stop-card.coffee-art-card:not(.cancelled-card)::after {
    top: clamp(66px, 7.2vw, 84px) !important;
    bottom: auto !important;
    right: clamp(20px, 3.1vw, 32px) !important;
    width: var(--rb-stop-drink-w) !important;
    height: var(--rb-stop-drink-h) !important;
    background-position: center bottom !important;
    background-size: contain !important;
    transform: none !important;
    filter: drop-shadow(0 14px 18px rgba(74, 42, 12, .18)) drop-shadow(0 2px 1px rgba(255,255,255,.42)) !important;
  }
}

/* v65: give the cursive tagline word room and scale the whole line up slightly. */
.hero-card h1.hero-lockup {
  width: min(100%, 492px) !important;
  gap: clamp(.30rem, 1.25vw, .68rem) !important;
}

.hero-card h1.hero-lockup > .hero-lockup-kicker,
.hero-card h1.hero-lockup > .hero-lockup-accent {
  font-size: clamp(.84rem, 2.55vw, 1.16rem) !important;
}

.hero-card h1.hero-lockup > .hero-lockup-main {
  margin-inline: clamp(.16rem, .85vw, .42rem) !important;
  padding-inline: .32em !important;
  font-size: clamp(1.48rem, 4.25vw, 1.96rem) !important;
}

.hero-card h1.hero-lockup > .hero-lockup-main::before,
.hero-card h1.hero-lockup > .hero-lockup-main::after {
  width: .68em !important;
}

.hero-card h1.hero-lockup > .hero-lockup-main::before {
  right: calc(100% - .08em) !important;
}

.hero-card h1.hero-lockup > .hero-lockup-main::after {
  left: calc(100% - .08em) !important;
}

@media (max-width: 520px) {
  .hero-card h1.hero-lockup {
    width: min(100%, 328px) !important;
    gap: clamp(.16rem, 1.25vw, .26rem) !important;
  }

  .hero-card h1.hero-lockup > .hero-lockup-kicker,
  .hero-card h1.hero-lockup > .hero-lockup-accent {
    font-size: clamp(.62rem, 2.58vw, .78rem) !important;
  }

  .hero-card h1.hero-lockup > .hero-lockup-main {
    margin-inline: .10rem !important;
    padding-inline: .24em !important;
    font-size: clamp(1.06rem, 4.35vw, 1.24rem) !important;
  }

  .hero-card h1.hero-lockup > .hero-lockup-main::before,
  .hero-card h1.hero-lockup > .hero-lockup-main::after {
    width: .34em !important;
  }
}

@media (max-width: 360px) {
  .hero-card h1.hero-lockup {
    width: min(100%, 286px) !important;
    gap: .10rem !important;
  }

  .hero-card h1.hero-lockup > .hero-lockup-kicker,
  .hero-card h1.hero-lockup > .hero-lockup-accent {
    font-size: .55rem !important;
  }

  .hero-card h1.hero-lockup > .hero-lockup-main {
    margin-inline: .06rem !important;
    font-size: .94rem !important;
  }
}

/* v66: fit longer official Roaming Bean footer-link titles on phone and desktop. */
.install-footer .bean-footer-link {
  grid-template-columns: clamp(34px, 6vw, 42px) minmax(0, 1fr) !important;
  gap: clamp(8px, 1.35vw, 12px) !important;
}

.install-footer .bean-footer-link > span:last-child {
  min-width: 0 !important;
}

.install-footer .bean-footer-link strong,
.install-footer .bean-footer-link small {
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.install-footer .bean-footer-link strong {
  font-size: clamp(.82rem, 2vw, .98rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.005em !important;
}

.install-footer .bean-footer-link small {
  margin-top: 4px !important;
  font-size: clamp(.68rem, 1.65vw, .82rem) !important;
  line-height: 1.16 !important;
}

@media (max-width: 430px) {
  .install-footer .bean-footer-link {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding-inline: 8px !important;
  }

  .install-footer .bean-footer-link strong {
    font-size: clamp(.68rem, 3.2vw, .80rem) !important;
    line-height: 1.04 !important;
  }

  .install-footer .bean-footer-link small {
    font-size: clamp(.59rem, 2.82vw, .70rem) !important;
    line-height: 1.14 !important;
  }
}

/* v67: Menu, Info, and Saved now open as standalone picker-style dialogs. */
.hero-info-panel[role="dialog"],
.hero-menu-panel[role="dialog"],
.hero-save-panel[role="dialog"],
.hero-info-panel[role="dialog"]:not(.hero-save-panel):not(.hero-menu-panel) {
  position: fixed !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(calc(100vw - 22px), 430px) !important;
  max-height: min(88dvh, 680px) !important;
  padding: 22px 16px 16px !important;
  overflow: auto !important;
  z-index: 5000 !important;
  border-radius: 30px !important;
  text-align: center !important;
  box-shadow:
    0 0 0 100vmax rgba(9, 4, 3, .68),
    0 24px 70px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  overscroll-behavior: contain !important;
}

.hero-info-panel[role="dialog"][hidden] {
  display: none !important;
}

.hero-info-panel[role="dialog"]::after,
.hero-menu-panel[role="dialog"]::after,
.hero-save-panel[role="dialog"]::after {
  content: none !important;
  display: none !important;
}

.hero-info-panel[role="dialog"] .hero-panel-close {
  top: 12px !important;
  right: 12px !important;
}

.hero-info-panel[role="dialog"] .mini-label {
  display: block !important;
  margin: 4px auto 8px !important;
  color: #57d7ff !important;
}

.hero-panel-title {
  margin: 0 auto 14px !important;
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: clamp(2rem, 8vw, 2.55rem) !important;
  line-height: .92 !important;
  letter-spacing: -.06em !important;
  color: #fffaf2 !important;
}

.hero-info-panel[role="dialog"]:focus {
  outline: none !important;
}

@media (max-width: 520px) {
  .hero-info-panel[role="dialog"],
  .hero-menu-panel[role="dialog"],
  .hero-save-panel[role="dialog"],
  .hero-info-panel[role="dialog"]:not(.hero-save-panel):not(.hero-menu-panel) {
    width: min(calc(100vw - 22px), 390px) !important;
    max-height: min(86dvh, 620px) !important;
    padding: 20px 12px 12px !important;
  }
}

/* v68: normalize hero, dashboard, and closest-stop spacing to the stop-card rhythm. */
.app-shell > .hero-card,
.app-shell > .summary-grid,
.app-shell > .map-panel,
.app-shell > .rb-map-picker-slot,
.app-shell > .notice:not(.hidden),
.app-shell > .results,
.app-shell > .install-footer {
  margin-top: 0 !important;
  margin-bottom: var(--rb-card-stack-gap) !important;
}

.summary-grid {
  column-gap: var(--rb-card-stack-gap) !important;
  row-gap: var(--rb-card-stack-gap) !important;
  margin-top: 0 !important;
  margin-bottom: var(--rb-card-stack-gap) !important;
}

.summary-grid > .closest-card {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 520px) {
  .app-shell > .hero-card,
  .app-shell > .summary-grid,
  .app-shell > .map-panel,
  .app-shell > .rb-map-picker-slot,
  .app-shell > .notice:not(.hidden),
  .app-shell > .results,
  .app-shell > .install-footer {
    margin-bottom: var(--rb-card-stack-gap-tight) !important;
  }

  .summary-grid {
    column-gap: var(--rb-card-stack-gap-tight) !important;
    row-gap: var(--rb-card-stack-gap-tight) !important;
    margin-bottom: var(--rb-card-stack-gap-tight) !important;
  }
}

/* v69: trim stop, closest-stop, and map-picker title typography by roughly 2pt. */
.rb-map-picker-copy strong,
#results .stop-card:not(.cancelled-card) .stop-name,
#results .stop-card:not(.cancelled-card) h3,
.results .stop-card:not(.cancelled-card) .stop-name,
.results .stop-card:not(.cancelled-card) h3,
.stop-card:not(.cancelled-card) .stop-name,
.stop-card:not(.cancelled-card) h3,
.closest-card .closest-copy h2,
.closest-copy h2 {
  font-size: clamp(1.38rem, 3.45vw, 1.88rem) !important;
  line-height: 1.02 !important;
}

@media (max-width: 640px) {
  .closest-card .closest-copy h2,
  .closest-copy h2 {
    font-size: clamp(1.28rem, 6.2vw, 1.83rem) !important;
  }
}

@media (max-width: 430px) {
  .closest-card .closest-copy h2,
  .closest-copy h2 {
    font-size: clamp(1.19rem, 6vw, 1.65rem) !important;
  }
}