.mobile-language-button { display: none; }
/* Owner/user login lives inside <nav>, which collapses behind the ☰
   button below 800px - so on a phone the single most important link on
   the site was invisible until you opened the menu. This is a second
   copy that sits directly in the header and is shown ONLY on mobile;
   the desktop layout is left exactly as it was. */
.mobile-login-link { display: none; }
.language-menu { background: var(--white); border: 1px solid var(--line); box-shadow: 0 12px 30px #1b332022; display: none; padding: 8px; position: fixed; right: 145px; top: 64px; z-index: 20; }
.language-menu.open { display: grid; }
.language-menu button { background: none; border: 0; cursor: pointer; font-size: .75rem; padding: 9px 14px; text-align: left; }
.language-menu button:hover { background: #edf2e8; }
@media screen and (max-width: 800px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .site-header { min-width: 0; padding: 20px 22px; position: relative; }
  .site-header > .mobile-language-button { display: flex; }
  /* Upper right, the place people look for a login. Flex order is used
     rather than moving the markup, so the DOM stays the same on every
     page: brand on the left, then login, language, and the menu button
     furthest right. */
  .site-header > .mobile-login-link {
    background: var(--ink); border-radius: 999px; color: #fff;
    display: inline-flex; font-size: .72rem; font-weight: 700;
    margin-left: auto; margin-right: 8px; order: 2; padding: 9px 14px;
    white-space: nowrap;
  }
  .site-header > .mobile-language-button { order: 3; }
  .site-header > .menu-button { order: 4; }
  .menu-button { display: block; }
  nav { background: var(--white); border-bottom: 1px solid var(--line); display: none; gap: 18px; left: 0; padding: 18px 22px 24px; position: absolute; right: 0; top: 67px; width: 100%; z-index: 8; }
  nav.open { display: grid; }
  .login-link { text-align: center; }
  /* Three CTAs in the hero (owner login, contact, explore) must wrap
     rather than overflow once the viewport narrows. */
  .actions { display: flex; flex-wrap: wrap; gap: 14px; }
  .actions .button { flex: 1 1 auto; justify-content: center; }
  .site-header > .language-button { display: flex; }
  .shell { max-width: 100%; min-width: 0; padding-left: 22px; padding-right: 22px; }
  .hero { display: block; min-height: 0; padding-bottom: 76px; padding-top: 55px; }
  .hero-copy, .hero-visual { min-width: 0; width: 100%; }
  h1 { font-size: clamp(3.1rem, 14vw, 5rem); }
  .hero-visual { margin-top: 60px; min-height: 465px; }
  .map-card { margin-left: 0; max-width: 100%; width: 100%; }
  .map { height: 255px; width: 100%; }
  .map-footer { flex-wrap: wrap; }
  .route { max-width: 130%; }
  .machine { bottom: 28px; max-width: 52%; right: -5px; }
  .stamp { height: 90px; right: -2px; width: 90px; }
  .platform-availability { align-items: flex-start; flex-wrap: wrap; }
  .platform-availability span { width: 100%; }
  .dark-band, .section, .pale-band, .owner-portal { padding-bottom: 80px; padding-top: 80px; }
  .three-col, .workflow, .services, .app-detail, .portal-layout { display: block; }
  .three-col h2 { margin-bottom: 30px; }
  .intro { display: block; }
  .cards { grid-template-columns: 1fr; margin-top: 35px; }
  .card { min-height: 300px; }
  .app-detail .detail-list { margin-top: 50px; }
  .steps { margin-top: 50px; }
  .service-card { margin-top: 50px; }
  .portal-copy { margin-top: 60px; }
  .portal-window { transform: none; }
  .field-satellite { padding: 0 22px 80px; }
  .satellite-image { min-height: 540px; }
  .satellite-caption { left: 24px; right: 24px; top: 20%; }
  .seed-grid { transform: rotate(-4deg) scale(1.5); }
  .contact-inner { align-items: start; display: block; }
  .contact-inner > div:last-child { margin-top: 40px; }
  .footer { align-items: start; flex-wrap: wrap; gap: 15px; }
  .language-menu { left: 22px; right: auto; top: 67px; }
}