@media (max-width: 900px) {
  :root {
    --vam-mobile-gutter: 16px;
    --vam-mobile-header: 64px;
    --vam-mobile-radius: 20px;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  body {
    min-width: 320px;
  }

  body :is(.page, .portal-page) {
    width: 100%;
    min-height: 100dvh;
    overflow-x: clip;
  }

  body :is(.page, .portal-page) > :is(.earth-canvas, .earth-fallback, .vam-space-backdrop) {
    width: 100vw !important;
    height: 100dvh !important;
  }

  body :is(.page, .portal-page) > .earth-fallback {
    position: fixed !important;
    background-position: 68% center !important;
    filter: saturate(0.92) contrast(1.08) brightness(0.78) !important;
    opacity: 0.72 !important;
  }

  body :is(.topbar, .portal-topbar, .site-header, header.topbar) {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    right: 12px !important;
    left: 12px !important;
    z-index: 100 !important;
    width: auto !important;
    height: var(--vam-mobile-header) !important;
    min-height: var(--vam-mobile-header) !important;
    margin: 0 !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    border: 1px solid rgba(150, 204, 232, 0.18) !important;
    border-radius: 20px !important;
    background: rgba(3, 13, 23, 0.86) !important;
    box-shadow: 0 16px 44px rgba(0, 4, 9, 0.24) !important;
    backdrop-filter: blur(18px) saturate(1.15) !important;
  }

  body .site-header .header-inner {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body :is(.topbar, .portal-topbar, .site-header) > a,
  body .site-header .site-brand {
    position: relative !important;
    z-index: 103 !important;
    min-width: 0 !important;
  }

  body :is(img.brand, img.portal-brand, .site-brand img) {
    display: block !important;
    width: 124px !important;
    max-width: 124px !important;
    max-height: 44px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  body :is(.site-menu-toggle, .menu-toggle) {
    position: relative !important;
    z-index: 104 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    place-content: center !important;
    border: 1px solid rgba(110, 200, 241, 0.3) !important;
    border-radius: 50% !important;
    color: #effaff !important;
    background: rgba(13, 41, 58, 0.78) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body :is(.site-menu-toggle, .menu-toggle) > span:not(.sr-only, .site-menu-label) {
    display: block !important;
    width: 18px !important;
    height: 1px !important;
    margin: 3px auto !important;
    background: currentColor !important;
  }

  body :is(.nav, .primary-nav, .portal-nav, .topbar nav) {
    position: fixed !important;
    top: calc(max(8px, env(safe-area-inset-top)) + var(--vam-mobile-header) + 8px) !important;
    right: 12px !important;
    bottom: auto !important;
    left: 12px !important;
    z-index: 102 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--vam-mobile-header) - max(28px, env(safe-area-inset-top))) !important;
    margin: 0 !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid rgba(143, 204, 233, 0.18) !important;
    border-radius: 22px !important;
    background:
      radial-gradient(circle at 86% 0%, rgba(63, 168, 218, 0.14), transparent 34%),
      rgba(3, 14, 24, 0.97) !important;
    box-shadow: 0 26px 70px rgba(0, 3, 8, 0.46) !important;
    backdrop-filter: blur(22px) saturate(1.2) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0, -10px, 0) scale(0.985) !important;
    transform-origin: top center !important;
    transition:
      opacity 180ms ease,
      visibility 180ms ease,
      transform 240ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  body :is(.nav, .primary-nav, .portal-nav, .topbar nav).is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  body :is(.primary-nav .nav-group) {
    display: contents !important;
  }

  body :is(.nav, .primary-nav, .portal-nav, .topbar nav) :is(a, button) {
    width: 100% !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(151, 197, 218, 0.12) !important;
    border-radius: 10px !important;
    color: #d6e4ec !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.74rem !important;
    font-weight: 750 !important;
    letter-spacing: 0.07em !important;
    text-align: left !important;
    text-transform: uppercase !important;
  }

  body :is(.nav, .primary-nav, .portal-nav, .topbar nav) :is(a, button):is(.active, .is-current) {
    color: #ffffff !important;
    background: rgba(75, 185, 235, 0.12) !important;
  }

  body :is(.nav, .primary-nav, .portal-nav, .topbar nav) :is(a.nav-login, a.primary),
  body .primary-nav .nav-login,
  body .portal-nav button[data-logout] {
    min-height: 48px !important;
    margin-top: 8px !important;
    justify-content: center !important;
    border: 1px solid rgba(90, 196, 241, 0.28) !important;
    color: #eaf9ff !important;
    background: rgba(52, 161, 212, 0.14) !important;
  }

  body:is(.nav-open, .inner-nav-open) {
    overflow: hidden !important;
  }

  body :is(
    .about-premium-main,
    .maintenance-main,
    .join-main,
    .rankings-main,
    .login-shell,
    .portal-shell,
    .pilot-dashboard,
    .pro-hero,
    .plans-section,
    .error-page main
  ) {
    width: calc(100% - (var(--vam-mobile-gutter) * 2)) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-top: calc(var(--vam-mobile-header) + max(34px, env(safe-area-inset-top))) !important;
    padding-bottom: max(52px, env(safe-area-inset-bottom)) !important;
  }

  body :is(
    .about-premium-main,
    .maintenance-main,
    .join-main,
    .rankings-main,
    .login-shell,
    .portal-shell,
    .pilot-dashboard,
    .pro-hero
  ) > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body :is(
    .about-premium-hero,
    .about-two-panels,
    .feature-showcase,
    .maintenance-main .page-copy,
    .join-main,
    .login-shell,
    .rankings-layout,
    .rankings-grid,
    .pro-hero-grid,
    .plan-grid,
    .brief-grid,
    .command-grid,
    .pilot-content-grid,
    .profile-account-grid,
    .profile-ops-grid,
    .friends-grid,
    .email-password-row,
    .avatar-preview-row
  ) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  body :is(.kpi-grid, .pilot-stat-grid, .profile-kpi-grid, .maintenance-mini-grid, .friends-stat-strip) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body :is(
    .feature-card,
    .portal-card,
    .hero-card,
    .maintenance-card,
    .join-card,
    .login-card,
    .rankings-panel,
    .command-card,
    .plan-card,
    .stat-card,
    .membership-card,
    .activity-card,
    .next-step-card,
    .vam-pro-card,
    .eligibility-panel,
    .not-found-card
  ) {
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 18px !important;
    border-radius: var(--vam-mobile-radius) !important;
    box-shadow: 0 14px 36px rgba(0, 4, 10, 0.16) !important;
  }

  body :is(
    .maintenance-main h1,
    .join-main h1,
    .rankings-hero h1,
    .about-premium-hero h1,
    .about-premium-copy h1,
    .pro-hero h1,
    .not-found-card h1,
    #friends-page .friends-hero h1
  ) {
    max-width: 100% !important;
    font-size: clamp(2.55rem, 12.5vw, 3.8rem) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.045em !important;
    overflow-wrap: anywhere;
  }

  body :is(h2, .section-title-row h2, .plans-heading h2) {
    font-size: clamp(1.65rem, 8vw, 2.45rem) !important;
    line-height: 1.03 !important;
  }

  body :is(p, li, label, input, select, textarea, button) {
    overflow-wrap: anywhere;
  }

  body :is(input, select, textarea) {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }

  body :is(.actions, .hero-actions, .about-hero-actions, .pro-hero-actions, .button-row, .pilot-hero-actions) {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  body :is(.actions, .hero-actions, .about-hero-actions, .pro-hero-actions, .button-row, .pilot-hero-actions) :is(.button, button, a) {
    width: 100% !important;
    min-height: 50px !important;
    justify-content: center !important;
  }

  body :is(.rankings-table-wrap, .table-wrap, .data-table-wrap, .leaderboard-table-wrap) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body :is(table) {
    min-width: 620px;
  }

  body .site-assistant-launcher {
    right: 14px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    width: 50px !important;
    height: 50px !important;
  }

  html:has(.landing-page),
  body:has(.landing-page) {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body .landing-page {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  body .landing-page .hero {
    width: calc(100% - (var(--vam-mobile-gutter) * 2)) !important;
    height: auto !important;
    min-height: 100dvh !important;
    margin: 0 auto !important;
    padding: calc(var(--vam-mobile-header) + max(52px, env(safe-area-inset-top))) 0 max(44px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
  }

  body .landing-page .hero-copy {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .landing-page .eyebrow {
    margin-bottom: 16px !important;
    font-size: 0.61rem !important;
    line-height: 1.4 !important;
  }

  body .landing-page .hero h1 {
    max-width: 520px !important;
    font-size: clamp(3rem, 14.5vw, 4.45rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.055em !important;
  }

  body .landing-page .hero-lede {
    max-width: 520px !important;
    margin-top: 22px !important;
    font-size: 0.97rem !important;
    line-height: 1.58 !important;
  }

  body .landing-page .hero-actions {
    margin-top: 24px !important;
  }

  body .landing-page .hero-note {
    margin-top: 20px !important;
    gap: 8px !important;
    font-size: 0.56rem !important;
    line-height: 1.5 !important;
  }

  body .landing-page::before {
    background:
      linear-gradient(180deg, rgba(2, 8, 18, 0.76) 0%, rgba(2, 8, 18, 0.82) 52%, rgba(2, 8, 18, 0.96) 100%),
      linear-gradient(90deg, rgba(2, 8, 18, 0.88), rgba(2, 8, 18, 0.22)) !important;
  }

  body .landing-page > .earth-fallback {
    position: absolute !important;
    height: 100dvh !important;
    background-position: 72% center !important;
    opacity: 0.62 !important;
  }

  body .subscribe-page :is(.pro-hero, .plans-section) {
    width: calc(100% - (var(--vam-mobile-gutter) * 2)) !important;
  }

  body .subscribe-page .site-header + main,
  body .subscribe-page main {
    padding-top: calc(var(--vam-mobile-header) + max(34px, env(safe-area-inset-top))) !important;
  }

  body .subscribe-page .pro-hero {
    padding-top: 24px !important;
  }

  body #friends-page .portal-shell.friends-shell.friends-clean-shell,
  body #profile-page .portal-shell.profile-clean-shell {
    width: calc(100% - (var(--vam-mobile-gutter) * 2)) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: calc(var(--vam-mobile-header) + max(34px, env(safe-area-inset-top))) !important;
    padding-bottom: max(52px, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 430px) {
  :root {
    --vam-mobile-gutter: 14px;
  }

  body :is(.topbar, .portal-topbar, .site-header, header.topbar) {
    right: 10px !important;
    left: 10px !important;
    padding-inline: 12px !important;
  }

  body :is(.nav, .primary-nav, .portal-nav, .topbar nav) {
    right: 10px !important;
    left: 10px !important;
  }

  body :is(img.brand, img.portal-brand, .site-brand img) {
    width: 116px !important;
    max-width: 116px !important;
  }

  body .landing-page .hero h1 {
    font-size: clamp(2.8rem, 14.8vw, 3.9rem) !important;
  }

  body :is(.kpi-grid, .pilot-stat-grid, .profile-kpi-grid, .maintenance-mini-grid, .friends-stat-strip) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body :is(
    .feature-card,
    .portal-card,
    .hero-card,
    .maintenance-card,
    .join-card,
    .login-card,
    .rankings-panel,
    .command-card,
    .plan-card,
    .stat-card,
    .membership-card,
    .activity-card,
    .next-step-card,
    .vam-pro-card,
    .eligibility-panel,
    .not-found-card
  ) {
    padding: 16px !important;
    border-radius: 18px !important;
  }
}

@media (max-height: 700px) and (max-width: 900px) {
  body .landing-page .hero {
    justify-content: flex-start !important;
    padding-top: calc(var(--vam-mobile-header) + max(36px, env(safe-area-inset-top))) !important;
  }

  body .landing-page .hero h1 {
    font-size: clamp(2.7rem, 12.5vw, 3.65rem) !important;
  }

  body .landing-page .hero-lede {
    margin-top: 18px !important;
  }

  body .landing-page .hero-actions {
    margin-top: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body :is(.nav, .primary-nav, .portal-nav, .topbar nav) {
    transition: none !important;
  }
}