/* CSS wordmark keeps the logo sharp at every size without an image dependency. */
.site-logo { position: relative; display: flex; width: fit-content; justify-content: center; align-items: baseline; margin: 0 auto 14px; font-family: ui-sans-serif, system-ui, sans-serif; font-size: clamp(32px, 5vw, 44px); line-height: 1.2; font-weight: 800; letter-spacing: -.8px; text-decoration: none; isolation: isolate;  }
.site-logo, body.recharge-flow .hero #page-title { background: linear-gradient(110deg, #e63964, #d86d13, #ac8500, #15945e, #167fca, #514ad5, #b437c8, #e63964); background-size: 300% 100%; background-clip: text; -webkit-background-clip: text; animation: brand-rainbow 10s ease-in-out infinite; }
body.recharge-flow .hero #page-title { width: fit-content; max-width: 100%; margin: 0 auto; color: transparent; -webkit-text-fill-color: transparent; }
.site-logo:hover { text-decoration: none; }
.site-logo .logo-face { position: relative; z-index: 1; background: inherit; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@keyframes brand-rainbow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.recharge-page .header-inner { justify-content: space-between; }
.recharge-page .header-controls { margin-left: auto; }
.home-page .header-inner { justify-content: flex-end; }
.home-page .hero .site-logo { margin-bottom: 8px; }
header nav .back.home-nav { margin-left: 0; margin-right: auto; }
.recharge-page .header-control, header nav .header-control { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 13px; border: 1px solid #cbd8eb; border-radius: 10px; background: #ffffffd9; box-shadow: 0 2px 5px #3347780c; color: #41577b; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 600; line-height: 22px; text-decoration: none; }
.header-control svg { width: 18px; height: 18px; flex: none; color: #4d75ba; }
body.recharge-page .header-control select { min-height: 22px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; font: inherit; cursor: pointer; }
body.recharge-page .header-control select:focus, body.recharge-page .header-control select:focus-visible { outline: none; box-shadow: none; }
.header-control:focus-within, a.header-control:focus-visible { outline: 3px solid #a4befa; outline-offset: 3px; }
a.header-control:hover { background: #eef5ff; border-color: #98b5e0; }
@media (max-width: 360px) {
  .site-logo { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { .site-logo, body.recharge-flow .hero #page-title { animation: none; background-position: 50% 50%; } }