/* ════════════════════════════════════════════════════════════════
   MOBILE — site-wide responsive overrides.
   Loaded LAST in _includes/head.html so these rules win the cascade
   at small widths. Desktop (> 768px) is intentionally untouched
   except for elements that must be hidden at all desktop widths
   (e.g. .nav-toggle, #mobileMenu).
   ════════════════════════════════════════════════════════════════ */

/* ── Global guardrails (all widths) ── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  overflow-x: hidden;
}
body {
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; height: auto; }
svg, video, iframe, canvas { max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   HAMBURGER BUTTON — hidden on desktop, shown <=768px
   ═══════════════════════════════════════════════════════════════ */
.nav-toggle {
  display: none;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  margin-left: 12px;
  z-index: 10;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle.open .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE MENU OVERLAY — hidden on desktop, shown <=768px
   ═══════════════════════════════════════════════════════════════ */
.mobile-menu {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   TOUCH-DEVICE GUARD — prevent hover states from sticking
   ═══════════════════════════════════════════════════════════════ */
@media (hover: none) {
  .convergence-icon:hover { transform: none !important; }
  .hub-btn:hover,
  .btn-primary:hover,
  .btn-secondary:hover { transform: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
                      <= 768px  (TABLET + PHONE)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Nav: safe-area padding for notched phones ── */
  nav {
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
  }
  .nav-container {
    padding: 0 16px !important;
  }

  /* ── Nav: hide inline links + desktop CTA, show hamburger ── */
  .nav-links { display: none !important; }
  .nav-container > .nav-cta { display: none !important; }
  .nav-toggle { display: flex; }

  /* ── Nav: hide the desktop mega-dropdown on mobile ── */
  .mega-dropdown { display: none !important; }

  /* ── Mobile menu overlay ── */
  .mobile-menu {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(11, 12, 14, 0.92);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    backdrop-filter: blur(24px) saturate(1.4);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 72px 24px 40px;
    padding-top: calc(72px + env(safe-area-inset-top));
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .mobile-menu.open {
    opacity: 1;
    visibility: visible;
  }
  .mobile-menu-inner {
    display: flex;
    flex-direction: column;
    gap: 36px;
    width: 100%;
    max-width: 320px;
  }
  .mobile-menu-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .mobile-menu-label {
    font-family: var(--font-ui, 'Inter', sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    padding: 0 0 8px;
  }
  .mobile-menu-link {
    display: flex;
    align-items: center;
    font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #fff;
    text-decoration: none;
    padding: 12px 0;
    min-height: 44px;
    transition: opacity 0.2s ease;
  }
  .mobile-menu-link:active {
    opacity: 0.6;
  }
  .mobile-menu-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui, 'Inter', sans-serif);
    font-size: 15px;
    font-weight: 600;
    color: #0B0C0E;
    background: #fff;
    text-decoration: none;
    padding: 16px 24px;
    border-radius: 12px;
    min-height: 50px;
    transition: opacity 0.2s ease;
    margin-top: 12px;
  }
  .mobile-menu-cta:active {
    opacity: 0.8;
  }

  /* ── Footer: ensure tap targets are >=44px ── */
  .footer-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* ── The Map: peak cards hidden, cinematic iframe hidden ── */
  .peak-card { display: none !important; }
  .section-cinematic .cinematic-frame { display: none !important; }
  .frost-range, .frost-hero {
    transition: none !important;
    animation: none !important;
  }

  /* ═══════ HOMEPAGE OVERRIDES ═══════ */

  /* Hero: allow wrapping so "Gathers your [word]" reflows */
  .hero-headline {
    white-space: normal !important;
    font-size: clamp(32px, 8.5vw, 44px) !important;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .hero-content {
    padding: 0 20px !important;
  }
  .hero-roll {
    display: inline-block;
    max-width: 100%;
  }

  /* Feature stack (FSC): fix the right-side bleed the <=900px
     breakpoint in v111 missed (width/margin not reset). */
  .fsc-right {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: auto !important;
    min-height: 300px;
    max-height: 420px;
  }
  .fsc-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .section-features {
    padding: 60px 20px 80px !important;
  }
  .section-features::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .fsc-stage::before,
  .fsc-stage::after {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  /* Integrations: single row like desktop, smaller icons to fit */
  .convergence-icons {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding: 0 8px !important;
  }
  .convergence-icon {
    width: 36px !important;
    height: 36px !important;
  }
  .convergence-icon img {
    width: 18px !important;
    height: 18px !important;
  }

  /* Ledger section: reduce oversized vertical padding */
  .section-ledger {
    padding: var(--space-20, 80px) var(--space-6, 24px) 80px !important;
  }

  /* Case studies: already handled by v111, just tighten image */
  .testimonial-media {
    min-height: 260px !important;
  }

  /* CTA: padding already handled by v111; ensure headline fits */
  .cta-section {
    padding: 80px 20px !important;
  }

  /* ═══════ COLLECTIONS PAGE OVERRIDES ═══════ */

  /* Hero stage: cap height, shrink gutters */
  .rah {
    padding: 80px 16px 0 !important;
  }
  .rah .rah-head {
    padding: 0 16px !important;
  }
  .rah-tabs {
    padding: 0 16px !important;
    margin-top: 24px !important;
  }
  .rah-stage {
    height: 340px !important;
    width: 100% !important;
    margin-top: 32px !important;
  }

  /* Content sections: reduce gutters + tighten vertical padding */
  .ra-shift {
    padding: 56px 0 40px !important;
  }
  .ra-shift-in,
  .ra-how-in {
    padding: 0 20px !important;
  }
  .ra-how {
    padding: 40px 0 48px !important;
  }
  .ra-part {
    padding: 48px 0 !important;
  }
  .ra-part-inner {
    padding: 0 20px !important;
  }
  .feat-section.cap-section {
    padding: 56px 0 !important;
  }
  .cap-block {
    padding: 0 20px !important;
  }
  .feat-section.feat-proof-cta {
    padding: 56px 0 !important;
  }

  /* ═══════ THE MAP PAGE OVERRIDES ═══════ */

  /* Frost hero: reduce head offset for shorter screens */
  .frost-tree-head {
    top: 100px !important;
    left: 24px !important;
    max-width: calc(100% - 48px) !important;
  }
  .frost-tree-card {
    padding: 32px 20px 24px !important;
  }
  .frost-title {
    font-size: clamp(28px, 7vw, 44px) !important;
  }

  /* Content sections: reduce 48px padding */
  section.section-problem {
    padding: 80px 20px !important;
  }
  section.section-unlocks {
    padding: 80px 20px !important;
  }
  section.section-closer {
    padding: 80px 20px 100px !important;
  }

  /* ═══════ ABOUT / TERMS / PRIVACY ═══════ */

  .about-hero {
    padding: 140px 0 64px !important;
  }
  .about-section {
    padding: 64px 0 !important;
  }
  .about-container {
    padding: 0 20px !important;
  }
  .page-terms .hero,
  .page-privacy .hero {
    padding: var(--space-16, 64px) 20px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
                      <= 480px  (SMALL PHONES)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Nav: hide wordmark, keep the G icon */
  .logo-text, .logo-divider { display: none !important; }

  /* Hero: tighter headline for narrow phones */
  .hero-headline {
    font-size: clamp(28px, 8vw, 36px) !important;
  }
  .hero-subtext {
    font-size: 13px !important;
  }

  /* FSC stage: cap smaller */
  .fsc-right {
    max-height: 320px !important;
  }

  /* Convergence icons: smaller on tiny phones */
  .convergence-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 6px !important;
  }
  .convergence-icon img {
    width: 15px !important;
    height: 15px !important;
  }
  .convergence-icons {
    padding: 0 4px !important;
  }

  /* Collections hero: shorter stage */
  .rah-stage {
    height: 280px !important;
  }

  /* The Map frost hero: smaller headline + tighter offset */
  .frost-tree-head {
    top: 80px !important;
  }
  .frost-title {
    font-size: clamp(24px, 6.5vw, 32px) !important;
  }
}