/* ============================================================
   MOBILE FIXES (Jun 15) — top bar, nav CTA, section spacing,
   surface-rail overflow. Scoped to phone widths so desktop
   (and the pinned stacked-card layout) is untouched.
   ============================================================ */

/* real notched devices in standalone: keep the bar clear of the status area */
.nav { padding-top: env(safe-area-inset-top, 0px); }

/* the marketing CTA carries a short label on small screens */
.nav-cta .cta-short { display: none; }

@media (max-width: 940px) {
  /* ---- top bar: no action buttons on mobile — the burger menu carries them all ---- */
  .nav-actions { display: none !important; }
  /* DS menu button */
  .nav-burger { width: 40px; height: 40px; border-radius: 12px; }
  /* mobile chrome: bare logo over the hero at scroll 0, MORE glass once scrolled —
     translucent so the cloud bg shows through, held legible by strong blur.
     Desktop gives the brand a permanent glass box; on mobile we strip it back to
     bare until the nav frosts on scroll. */
  .nav:not(.scrolled) .brand { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav.scrolled .brand { background: rgba(245,247,250,0.48); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: 0 6px 20px rgba(16,24,40,.10), inset 0 1px 0 rgba(255,255,255,.55); }
  .nav-burger { background: rgba(255,255,255,0.42); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 6px 20px rgba(16,24,40,.10), inset 0 1px 0 rgba(255,255,255,.55); }
  /* collapsed nav menu — DS card elevation + translucent frosted glass */
  .nav-links { box-shadow: var(--shadow-selected); border: 1px solid var(--line); border-radius: 16px; background: rgba(245,247,250,0.55); -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7); }
  /* tappable feedback on menu items (DS press state) */
  .nav.menu-open .nav-links a:active { background: var(--surface-muted-2); }
  /* in-menu action buttons — shared full-width DS layout (login + primary) */
  .nav-links .menu-cta { margin-top: 6px; padding: 12px 16px; height: auto; justify-content: center;
    font-size: 15px; font-weight: 600; border-radius: 12px; }
  /* only the gradient CTA gets the white label + brand glow; the secondary
     login keeps its DS white/ink treatment (was inheriting white-on-white) */
  .nav-links .menu-cta-primary { color: #fff;
    box-shadow: 0 8px 22px rgba(255,95,52,.20), 0 8px 22px rgba(228,60,255,.13); }
  .nav-links .menu-cta-primary:active { background: var(--brand-gradient); transform: translateY(.5px); }
}
/* the in-menu CTA only exists inside the collapsed mobile menu */
.menu-cta { display: none; }
.nav.menu-open .nav-links .menu-cta { display: inline-flex; }

@media (max-width: 980px) {
  /* ---- sections hug their content: drop forced viewport-height gaps ---- */
  .testi { min-height: 0; }

  /* ---- app-surface rail: never clip; scroll with soft edge fades if it must ---- */
  .bw-tabs { max-width: 100%; overflow: hidden; scrollbar-width: none; }
  .bw-tabs::-webkit-scrollbar { display: none; }
}

/* Browser-section mobile layout (all 5 panes) is owned by site-v3.css
   @media (max-width:760px) — merged from main. No per-pane overrides here. */
@media (max-width: 600px) {
  /* single card per view — drop the edge fade, keep a clip-buffer so the card
     shadow isn't sliced by overflow:hidden */
  .testi-viewport { -webkit-mask-image: none; mask-image: none;
    box-sizing: content-box; padding-left: 24px; padding-right: 24px; margin-left: -24px; margin-right: -24px; }
}
@media (min-width: 601px) {
  /* edge fade only on the "more cards" side — no clip at the very start / very end.
     28px horizontal clip-buffer (padding + negative margin) so card box-shadows
     render fully instead of being sliced by overflow:hidden at the edges. */
  .testi-viewport { --fl: 11%; --fr: 89%;
    box-sizing: content-box; padding-left: 28px; padding-right: 28px; margin-left: -28px; margin-right: -28px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 var(--fr), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 var(--fr), transparent 100%); }
  .testi-viewport.at-start { --fl: 0%; }   /* first card flush-left  */
  .testi-viewport.at-end   { --fr: 100%; } /* last card flush-right  */
}