:root {
  --concept-entry-gold: #e8c45c;
  --concept-entry-gold-soft: #f6df96;
  --concept-entry-ink: #f6f2e8;
  --concept-entry-muted: #92938b;
  --concept-entry-ease: cubic-bezier(.2, .78, .18, 1);
  --concept-entry-page: min(92vw, 1420px);
}

/* The new home page owns top-level navigation. Legacy route switchers are retired. */
.experience-mode-switcher,
.mobile-page-switcher {
  display: none !important;
}

.concept-route-header {
  position: fixed !important;
  z-index: 1000 !important;
  top: 18px !important;
  left: 50% !important;
  right: auto !important;
  width: var(--concept-entry-page) !important;
  min-height: 70px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 9px 10px 9px 15px !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 26px !important;
  border: 1px solid transparent !important;
  border-radius: 24px !important;
  color: var(--concept-entry-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: Inter, Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  transition: background .5s var(--concept-entry-ease), border-color .5s var(--concept-entry-ease), box-shadow .5s var(--concept-entry-ease) !important;
}

.concept-route-header.is-scrolled {
  border-color: rgba(255, 255, 255, .12) !important;
  background: rgba(10, 11, 8, .82) !important;
  box-shadow: 0 15px 55px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.concept-route-header::before,
.concept-route-header::after {
  content: none !important;
  display: none !important;
}

.concept-route-brand {
  min-width: 0;
  display: flex !important;
  align-items: center !important;
  justify-self: start !important;
  gap: 12px !important;
  color: inherit !important;
  text-decoration: none !important;
}

.concept-route-brand-mark {
  width: 44px !important;
  aspect-ratio: 1 !important;
  flex: 0 0 44px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  color: #17150c !important;
  background: linear-gradient(135deg, var(--concept-entry-gold-soft), #c9982f) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 8px 25px rgba(224,181,56,.16) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.concept-route-brand-copy {
  display: grid !important;
  line-height: 1 !important;
}

.concept-route-brand-copy b {
  color: var(--concept-entry-ink) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  white-space: nowrap !important;
}

.concept-route-brand-copy small {
  margin-top: 5px !important;
  color: #77786f !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.concept-route-nav {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  color: #9a9b93 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}

.concept-route-nav a {
  position: static !important;
  padding: 0 !important;
  border: 0 !important;
  color: inherit !important;
  background: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: color .25s ease !important;
}

.concept-route-nav a::before,
.concept-route-nav a::after {
  content: none !important;
  display: none !important;
}

.concept-route-nav a:hover { color: var(--concept-entry-ink) !important; }

.concept-route-platforms {
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.concept-route-platform {
  min-height: 50px !important;
  padding: 0 15px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  color: var(--concept-entry-ink) !important;
  background: rgba(12,13,10,.76) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.04) !important;
  text-decoration: none !important;
  transition: transform .35s var(--concept-entry-ease), border-color .35s ease, box-shadow .35s ease !important;
}

.concept-route-platform:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(232,196,92,.42) !important;
  box-shadow: 0 13px 36px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.06) !important;
}

.concept-route-platform > span { display: grid !important; line-height: 1 !important; }
.concept-route-platform small { margin-bottom: 5px !important; color: #707169 !important; font-size: 6px !important; font-weight: 950 !important; letter-spacing: .18em !important; }
.concept-route-platform b { color: inherit !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: .1em !important; }
.concept-route-platform i { color: var(--concept-entry-gold) !important; font-size: 18px !important; font-style: normal !important; }
.concept-route-max { color: #17150c !important; border-color: rgba(255,222,131,.56) !important; background: linear-gradient(135deg,var(--concept-entry-gold-soft),#d0a13a) !important; }
.concept-route-max small,
.concept-route-max i { color: #51441e !important; }

@media (max-width: 980px) {
  :root { --concept-entry-page: calc(100vw - 34px); }

  .concept-route-header {
    top: 9px !important;
    grid-template-columns: 1fr auto !important;
  }

  .concept-route-nav { display: none !important; }
  .concept-route-brand-copy small { display: none !important; }

  .experience-product-hero {
    padding-top: 0 !important;
  }

  .concept-route-shell main.page {
    padding-top: 98px !important;
  }
}

@media (max-width: 560px) {
  .concept-route-brand-copy { display: none !important; }
  .concept-route-header { gap: 8px !important; }
  .concept-route-platform { min-height: 44px !important; padding: 0 11px !important; gap: 13px !important; border-radius: 14px !important; }
  .concept-route-platform small { display: none !important; }
  .concept-route-platform b { font-size: 8px !important; }
  .concept-route-platform i { font-size: 15px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .concept-route-header,
  .concept-route-platform { transition: none !important; }
}
