/* ══════════════════════════════════════════════
   responsive.css — Teams Plus mobile styles
   Breakpoints: 1024px | 768px | 480px

   NOTE: This file loads before each page's inline
   <style> block, so layout overrides use !important
   to ensure they take effect on mobile.
══════════════════════════════════════════════ */

/* ── Global overflow fix ─────────────────────── */
html, body { overflow-x: hidden; }


/* ── HAMBURGER BUTTON (hidden on desktop) ──── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #F0F0F5;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Animate to X when open */
.site-header.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.site-header.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ══════════════════════════════════════════════
   LARGE TABLET — ≤1024px
══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  h1                      { font-size: 56px !important; }
  .cta-close-headline     { font-size: 44px !important; }
  .section-headline-light { font-size: 38px !important; margin-bottom: 48px !important; }
  .quote-text             { font-size: 22px !important; }

  /* Two-col grids with large gaps tighten up */
  .insights-two-col,
  .infra-two-col,
  .proof-two-col,
  .mission-two-col,
  .company-two-col,
  .byoc-two-col,
  .stakes-two-col         { gap: 48px !important; }
}


/* ══════════════════════════════════════════════
   TABLET / MOBILE — ≤768px
══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Container ── */
  .container { padding: 0 20px !important; }

  /* ── Sticky nav height ── */
  body { padding-top: 72px !important; }

  /* ── Hamburger: show toggle, hide desktop nav ── */
  .nav-toggle  { display: flex; }
  .nav-cta     { display: none !important; }
  .nav-links {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(10, 10, 15, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid #1F1F2A;
    padding: 8px 20px 20px;
    flex-direction: column;
    gap: 0;
    z-index: 999;
  }
  .nav-links a {
    padding: 13px 0 !important;
    font-size: 16px !important;
    border-bottom: 1px solid #1F1F2A;
    white-space: normal !important;
  }
  .nav-links a:last-child { border-bottom: none; }
  .site-header.nav-open .nav-links { display: flex !important; }

  /* ── Hero ── */
  .hero       { padding: 56px 0 48px !important; }
  h1          { font-size: 38px !important; letter-spacing: -0.025em !important; }
  .subhead    { font-size: 17px !important; margin-bottom: 36px !important; max-width: 100% !important; }
  .cta-row    { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .btn-primary,
  .btn-secondary-dark     { width: 100% !important; text-align: center !important; box-sizing: border-box !important; }

  /* ── Why T+ strip (index only) ── */
  .why-strip       { padding: 40px 0 36px !important; }
  .why-strip-grid  { grid-template-columns: repeat(2, 1fr) !important; gap: 28px 0 !important; }
  .why-item        { border-right: none !important; padding: 0 20px 0 0 !important; }
  .why-item:nth-child(odd)  { border-right: 1px solid #1F1F2A !important; }
  .why-item:nth-child(even) { padding-left: 20px !important; padding-right: 0 !important; }

  /* ── Stats (index + about + collections) ── */
  .stats            { grid-template-columns: repeat(2, 1fr) !important; padding: 44px 0 !important; gap: 32px 0 !important; }
  .stat             { padding: 0 20px !important; border-right: none !important; }
  .stat:nth-child(odd)  { border-right: 1px solid #1F1F2A !important; padding-left: 0 !important; }
  .stat::before     { display: none !important; }
  .stat-number      { font-size: 44px !important; margin: 12px 0 10px !important; }

  /* ── Trusted by ── */
  .trusted          { padding: 48px 0 20px !important; }
  .trusted-audience { gap: 10px 20px !important; }
  .audience-item    { font-size: 15px !important; }

  /* ── Quote card ── */
  .case-study { padding: 44px 0 !important; }
  .quote-card { padding: 36px 28px !important; }
  .quote-text { font-size: 19px !important; }

  /* ── Feature cards (index) ── */
  .features              { padding: 36px 0 60px !important; }
  .section-headline-light{ font-size: 30px !important; margin-bottom: 36px !important; }
  .cards                 { grid-template-columns: 1fr !important; }

  /* ── teams-phone.html grids ── */
  .deploy-grid  { grid-template-columns: 1fr !important; }
  .under-grid   { grid-template-columns: 1fr !important; }
  .addon-grid   { grid-template-columns: 1fr !important; }

  /* ── collections.html grids ── */
  .dialer-grid   { grid-template-columns: repeat(2, 1fr) !important; }
  .pillar-grid   { grid-template-columns: 1fr !important; }
  .audience-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── platform.html grids ── */
  .connect-grid      { grid-template-columns: 1fr !important; }
  .insights-two-col  { grid-template-columns: 1fr !important; gap: 40px !important; }
  .infra-two-col     { grid-template-columns: 1fr !important; gap: 40px !important; }
  .dc-grid           { grid-template-columns: 1fr !important; }

  /* ── nrm.html grids ── */
  .pillars-grid    { grid-template-columns: 1fr !important; }
  .stakes-two-col  { grid-template-columns: 1fr !important; gap: 36px !important; }
  .coverage-grid   { grid-template-columns: 1fr !important; }
  .cap-grid        { grid-template-columns: 1fr !important; }
  .pricing-vs-grid { grid-template-columns: 1fr !important; }
  .metrics-grid    { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── insights.html grids ── */
  .ema-detail-grid { grid-template-columns: 1fr !important; }
  .sip-grid        { grid-template-columns: 1fr !important; }
  .disp-grid       { grid-template-columns: repeat(2, 1fr) !important; }
  .ios-callout     { grid-template-columns: 1fr !important; gap: 32px !important; }
  .intel-grid      { grid-template-columns: 1fr !important; }

  /* ── ai-voice.html grids ── */
  .platform-grid { grid-template-columns: 1fr !important; }
  .why-grid      { grid-template-columns: 1fr !important; }
  .proof-two-col { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* ── about.html grids ── */
  .mission-two-col  { grid-template-columns: 1fr !important; gap: 40px !important; }
  .what-grid        { grid-template-columns: 1fr !important; }
  .company-two-col  { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* ── carriers.html grids ── */
  .posture-grid  { grid-template-columns: 1fr !important; }
  .services-grid { grid-template-columns: 1fr !important; }
  .compare-band  { grid-template-columns: 1fr !important; }
  .byoc-two-col  { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* ── CTA close ── */
  .cta-close      { padding: 76px 0 60px !important; }
  .cta-close-headline { font-size: 32px !important; }
  .cta-close-sub  { font-size: 16px !important; }
  .cta-close-row  { flex-direction: column !important; align-items: center !important; gap: 12px !important; }
  .cta-close-row .btn-primary,
  .cta-close-row .btn-secondary-dark { width: 100% !important; max-width: 340px !important; text-align: center !important; }

  /* ── Footer ── */
  .footer-inner { flex-direction: column !important; gap: 28px !important; align-items: flex-start !important; }
  .footer-links { flex-wrap: wrap !important; gap: 24px !important; }
}


/* ══════════════════════════════════════════════
   SMALL PHONE — ≤480px
══════════════════════════════════════════════ */
@media (max-width: 480px) {

  h1       { font-size: 30px !important; }
  .subhead { font-size: 16px !important; }

  /* Why strip: collapse to single column */
  .why-strip-grid           { grid-template-columns: 1fr !important; gap: 0 !important; }
  .why-item                 { border-right: none !important; padding: 0 0 20px !important; border-bottom: 1px solid #1F1F2A; }
  .why-item:nth-child(odd)  { border-right: none !important; }
  .why-item:last-child      { border-bottom: none !important; padding-bottom: 0 !important; }

  /* Stats */
  .stat-number { font-size: 34px !important; }

  /* Grids that went 2-col at 768 now go 1-col */
  .dialer-grid   { grid-template-columns: 1fr !important; }
  .audience-grid { grid-template-columns: 1fr !important; }
  .disp-grid     { grid-template-columns: 1fr !important; }
  .metrics-grid  { grid-template-columns: 1fr !important; }

  /* Quote */
  .quote-card { padding: 28px 20px !important; }
  .quote-text { font-size: 17px !important; }

  /* Headlines */
  .cta-close-headline     { font-size: 26px !important; }
  .section-headline-light { font-size: 24px !important; }
}