/* Responsive corrections for the cloned marketing pages.
 *
 * Kept in a separate file, and linked from the pages, because index.html /
 * login.html / signup.html and lp.css are copied verbatim from the CALL build —
 * anything written into those would be lost the next time they are re-copied.
 *
 * The header needed ~1044px to lay out (nav links + theme + language + log-in +
 * two CTAs) but the nav only collapsed to the hamburger below 900px. Between
 * 768px and ~1080px the row overflowed, and because html carries
 * overflow-x: clip the excess was not scrollable — it was cut off. The primary
 * "Start free" button, the main conversion action, was unreachable on every
 * tablet and small laptop.
 */

/* Collapse the inline nav while the action cluster still needs the room. */
@media (max-width: 1080px) {
  .site-header .nav:not(.open) { display: none; }
  .site-header .nav-toggle { display: inline-flex; }
}

/* Below the tablet break, drop the secondary CTA rather than the primary one:
   if only one action survives the squeeze it should be the one people came for. */
@media (max-width: 900px) {
  .site-header .head-right .btn-outline { display: none; }
}

@media (max-width: 720px) {
  .site-header .head-right .link-quiet { display: none; }
  .site-header .head-right .lang-btn span { display: none; }
}

/* The action cluster must never be the thing that widens the bar. */
.site-header .bar { flex-wrap: nowrap; gap: 12px; }
.site-header .head-right { min-width: 0; flex-shrink: 0; }
.site-header .logo { min-width: 0; flex-shrink: 1; }

/* Decorative backdrop is positioned well past the viewport on narrow screens.
   Clipped rather than scrollable, so it costs nothing functionally — but an
   element painting 650px outside the fold is wasted compositing on a phone. */
@media (max-width: 900px) {
  .bg-grid, .orb { max-width: 100vw; }
  .orb-b { right: -30vw; }
}

/* The collapsed menu listed only section links, leaving no sign-in path on a
   phone. These two appear only while the inline nav is collapsed. */
.nav-auth-mobile { display: none; }
@media (max-width: 1080px) {
  .site-header .nav.open .nav-auth-mobile { display: block; margin-top: 4px; }
  .site-header .nav.open .nav-auth-cta { color: var(--txt); font-weight: 700; }
}