/* =============================================================
   Noundesign — Mobile safety fixes (v1)
   Loaded on every page to prevent horizontal scroll,
   force grid stacking, size down oversized headings.
   Non-destructive: only applies at <= 768px, respects existing
   responsive CSS (uses lower specificity + specific selectors).
   ============================================================= */

/* Global overflow lock — kills any horizontal scroll caused by
   overflow elements (testimonial carousels, break-out sections). */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Force all media to respect container width */
img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

/* ─── Mobile phone (≤ 480px) ─── */
@media (max-width: 480px) {
  /* Kill oversized page padding */
  .shell, .full, .read, .nd-footer-inner {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Nav bar: wrap gracefully */
  nav.nav, nav.top, nav.topnav {
    flex-wrap: wrap;
    gap: 12px !important;
    padding: 12px 0;
  }
  .nav-r, .nav-links, .topnav .right {
    gap: 12px !important;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .nav-r a:not(.cta), .nav-links a:not(.btn-pri), .topnav .right a:not(.cta) {
    font-size: 10.5px !important;
  }

  /* Headlines — pull down oversized clamps */
  h1, .hero h1, .caps-head h2, .final-head .final-h,
  .talkfaq-h, .tsx-h, h1.combined-h {
    font-size: clamp(1.8rem, 8.5vw, 2.4rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
  }

  /* Two-column grids → single column */
  .caps-grid, .calc-grid, .final-grid, .talkfaq-grid,
  .footer-top, .icp-grid, .answer-grid, .pain-grid,
  .how-grid, .final-grid.has-faq, .rel-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Testimonial cards: sane width on tiny screens */
  .t-card {
    flex: 0 0 88vw !important;
    padding: 24px !important;
    min-height: auto !important;
  }
  .t-card blockquote {
    font-size: 15px !important;
    margin-bottom: 20px !important;
  }
  .t-attr .brand-logo {
    max-width: 60px !important;
    max-height: 30px !important;
  }

  /* Rating badges — wrap to 2×2 */
  .ratings-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .ratings-row .rating-card {
    flex: initial !important;
    padding: 10px 12px !important;
    min-height: 60px !important;
  }
  .rating-card .rc-brand svg { height: 24px !important; }
  .rating-card .rc-score { font-size: 13px !important; }
  .rating-card .rc-stars svg { width: 8px !important; height: 8px !important; }

  /* Capabilities cards & tabs */
  .cap {
    padding: 22px 20px !important;
  }
  .cap-title h3 { font-size: 17px !important; }
  .caps-tabs {
    gap: 6px !important;
  }
  .caps-tab {
    font-size: 11px !important;
    padding: 7px 12px !important;
  }

  /* Cost calculator */
  .calc {
    padding: 28px 20px !important;
  }
  .calc-head h2 { font-size: 24px !important; }
  .calc-stats { grid-template-columns: 1fr !important; }
  .calc-chip { font-size: 11px !important; padding: 8px 12px !important; }

  /* FAQ items */
  .faq-q, .home-faq-q { font-size: 14px !important; padding: 16px 18px !important; }
  .faq-a-inner, .home-faq-a-inner { padding: 0 18px 16px !important; font-size: 13.5px !important; }

  /* Talk-to-Jibon head */
  .talkfaq-head, .final-head { padding: 0 4px !important; margin-bottom: 24px !important; }
  .talkfaq-sub, .final-sub { font-size: 13.5px !important; }

  /* Contact card — full-width on mobile */
  .cta-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 26px 22px !important;
  }
  .cta-avatar { width: 72px !important; height: 72px !important; }
  .cta-form-wrap { padding: 0 !important; }
  .cta-input, .cta-select-trigger {
    font-size: 15px !important;  /* prevent iOS zoom on focus */
    padding: 12px 14px !important;
  }

  /* Buttons — comfortable tap target */
  .btn-primary, .btn-secondary, .btn-pri, .btn-sec,
  .cta-submit, .cta-alt-link, .cta {
    min-height: 44px;
    padding: 12px 20px !important;
    font-size: 12.5px !important;
  }
  .btn-primary, .btn-secondary { padding: 14px 22px !important; }

  /* Case study cards */
  .case-card { padding: 20px !important; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-brand .fb-word, .footer-brand .brand-word { font-size: 1.1rem !important; }
  .footer-col h5 { margin-bottom: 12px !important; }
  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Hello-video (Jibon) widget — smaller on phones */
  .hv-widget { right: 12px !important; bottom: 12px !important; }
  .hv-thumb { width: 76px !important; }
  .hv-bubble { font-size: 12px !important; padding: 9px 14px !important; }

  /* Modal (Lock Quote on /capabilities) */
  .qm {
    width: calc(100vw - 20px) !important;
    padding: 24px 20px !important;
    max-height: calc(100vh - 40px) !important;
  }
  .qm h3 { font-size: 20px !important; }

  /* Prevent 100vw sections from causing overflow with scrollbar */
  .tsx, .t-stage {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}

/* ─── Tablet portrait (481–768px) ─── */
@media (min-width: 481px) and (max-width: 768px) {
  .caps-grid, .footer-top {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .talkfaq-grid, .final-grid.has-faq { grid-template-columns: 1fr !important; }
  .ratings-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .t-card { flex: 0 0 460px !important; }
  h1, .hero h1, h1.combined-h {
    font-size: clamp(2.2rem, 6vw, 3rem) !important;
  }
  .calc-grid { grid-template-columns: 1fr !important; }
  .cta-card { width: 100% !important; }
}