/* Real controls replace the controls painted into the desktop mockup. */
[hidden] { display: none !important; }
.sr-only, .mobile-heading, .live-brand > span, .hotspot > span {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hero-showcase { container-type: inline-size; }
.live-brand { position: absolute; left: 3%; top: 1%; width: 27%; height: 12%; z-index: 2; }
.live-menu {
  position: absolute; top: 0; right: 0; width: 68%; height: 9.5%; z-index: 2;
  display: flex; align-items: center; justify-content: space-evenly; gap: 1cqw;
  padding: 0 2cqw; background: #0c3149; line-height: 1.3;
}
.live-menu a { color: #fff; font-size: 1.15cqw; padding: 1cqw .6cqw; border-radius: 8px; }
.live-menu a:hover { color: #83d8ff; background: #154762; }
.live-search {
  position: absolute; z-index: 2; left: 24.8%; top: 44.9%; width: 30%; height: 6.05%;
  display: flex; align-items: stretch; gap: .4cqw; margin: 0; padding: .36cqw;
  background: #fff; border: 1px solid #d6e7ef; border-radius: 99px; line-height: normal;
}
.live-search input { width: 0; flex: 1; border: 0; border-radius: 99px; padding: 0 1cqw; font: inherit; font-size: 1cqw; color: #183448; min-width: 0; }
.live-search button { border: 0; border-radius: 99px; background: #009ff0; color: #fff; padding: 0 1.7cqw; font: inherit; font-size: 1.05cqw; cursor: pointer; }
.live-shortcuts {
  position: absolute; z-index: 2; top: 52.5%; left: 24.8%; width: 35.2%; height: 3.7%;
  display: flex; gap: .35cqw; align-items: stretch; line-height: 1.1;
  border-radius: 99px; background: #082c40;
}
.live-shortcuts a { display: flex; align-items: center; justify-content: center; flex: 1; white-space: nowrap; padding: 0 .4cqw; border: 1px solid #80afc4; border-radius: 99px; font-size: .75cqw; background: #082c40; color: #fff; }
.live-explore { position: absolute; z-index: 2; left: 81%; top: 92.4%; width: 16.8%; height: 4.7%; display: flex; align-items: center; justify-content: center; border-radius: 99px; background: #009ff0; color: #fff; font-size: .9cqw; line-height: 1.2; text-decoration: none; }
.live-explore:hover, .live-search button:hover { background: #067ab9; }
.live-shortcuts a:hover { background: #165579; color: #fff; }
.hero-showcase :focus-visible { outline: 3px solid #ffdf70; outline-offset: 2px; }
.category-hotspots .hotspot { top: 70.8%; height: 17.9%; }
.proof-grid { margin-top: 24px; }
.search-feedback { margin-bottom: 22px; }
.search-feedback button { padding: 12px 18px; border: 1px solid #1463ff; background: white; color: #164da6; border-radius: 10px; cursor: pointer; font: inherit; }
.category-card:focus { outline: 3px solid #009ff0; outline-offset: 4px; }
@media (max-width: 900px) {
  .hero-showcase { padding: 24px 20px 30px; line-height: 1.5; }
  .hero-showcase > img { display: none; }
  .live-brand, .live-menu, .live-search, .live-shortcuts, .live-explore, .category-hotspots {
    position: static; width: auto; height: auto; inset: auto;
  }
  .live-brand { display: block; color: white; text-decoration: none; }
  .live-brand > span, .mobile-heading, .hotspot > span {
    position: static; width: auto; height: auto; clip-path: none; overflow: visible;
    margin: 0; white-space: normal;
  }
  .live-brand > span { font-size: 30px; font-weight: 800; }
  .live-brand small { display: block; font-size: 11px; letter-spacing: .3em; color: #a7d9ed; }
  .live-menu { display: flex; flex-wrap: wrap; justify-content: flex-start; background: none; padding: 18px 0; gap: 8px; }
  .live-menu a { font-size: 14px; padding: 8px; }
  .mobile-heading { display: block; font-size: clamp(30px, 6vw, 48px); line-height: 1.08; color: white; margin: 20px 0; }
  .mobile-heading em { color: #30b7fb; font-style: normal; }
  .live-search { height: 52px; width: 100%; padding: 5px; gap: 4px; }
  .live-search input { font-size: 16px; padding: 0 10px; }
  .live-search button { font-size: 15px; padding: 0 16px; }
  .live-shortcuts { display: flex; flex-wrap: wrap; border-radius: 0; gap: 8px; margin: 18px 0; background: none; }
  .live-shortcuts a { flex: 0 1 auto; font-size: 13px; padding: 9px 12px; }
  .live-explore { font-size: 15px; padding: 12px; margin-bottom: 20px; }
  .category-hotspots { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .category-hotspots .hotspot { position: static; width: auto; height: auto; display: flex; align-items: center; min-height: 62px; padding: 12px; border: 1px solid #457487; border-radius: 12px; background: #0c3149; color: white; font-size: 14px; }
  .proof-grid { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }