/* ==========================================================================
   Bature Digital — Mobile Responsiveness Fixes
   Site-wide adjustments layered on top of page styles.
   ========================================================================== */

/* Prevent any element from causing horizontal overflow.
   IMPORTANT: do NOT set overflow-x:hidden on html/body — it breaks position:sticky
   on the header. Use overflow-x:clip on body instead, which doesn't establish a
   scroll container. */
html { /* no overflow constraint here so sticky works */ }
body { max-width: 100%; overflow-x: clip; }

/* iOS form-input zoom prevention — needs >=16px */
input, select, textarea { font-size: 16px; }

/* ============================
   Tablet breakpoint (≤ 920px)
   ============================ */
@media (max-width: 920px) {
  /* Header / nav */
  .nav-row { padding: 12px 0; gap: 12px; }
  .nav-logo { height: 36px; }
  .nav-bar .btn { padding: 10px 18px; font-size: 14px; }

  /* Utility bar — keep contact left, hide socials right */
  .utility-row { padding: 8px 0; }
  .utility-left { font-size: 12px; gap: 10px; flex-wrap: wrap; row-gap: 4px; }

  /* Section heads */
  .section-head { margin-bottom: var(--space-9); }

  /* About page — story stat strip becomes 2x2 grid on tablet */
  .story-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .story-stat { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
  .story-stat:nth-child(2n) { border-right: 0; }
  .story-stat:nth-last-child(-n+2) { border-bottom: 0; }
  .story-stat-num { font-size: 36px; }

  /* Plans — comparison table simplified */
  .compare-plans-table { font-size: 14px; }

  /* Footer compact */
  .footer-main { gap: 32px; padding: var(--space-10) 0 var(--space-8); }
}

/* ============================
   Mobile breakpoint (≤ 700px)
   ============================ */
@media (max-width: 700px) {
  /* Hide desktop nav links — keep logo + CTA */
  .nav-links { display: none; }
  .nav-row { gap: 10px; }
  .nav-bar .btn {
    padding: 9px 14px; font-size: 13px;
    border-radius: 999px;
  }

  /* Utility bar — drop socials entirely */
  .utility-right { display: none; }
  .utility-row { justify-content: center; }
  .utility-left { justify-content: center; font-size: 11.5px; }

  /* Hero text caps */
  .hero h1, .about-hero h1, .plans-hero h1, .contact-hero h1 {
    font-size: clamp(32px, 8vw, 44px) !important;
    line-height: 1.05;
  }
  .hero-sub, .about-hero-sub, .plans-hero .lead, .contact-hero .lead {
    font-size: 16px;
  }
  .section-head h2 { font-size: clamp(26px, 6.6vw, 36px); }
  .section-head p { font-size: 16px; }

  /* Buttons stack and full-width */
  .hero-cta, .final-cta-row, .plans-cta-row, .form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta .btn,
  .final-cta-row .btn,
  .plans-cta-row .btn {
    width: 100%;
    justify-content: center;
  }
  .btn-lg { padding: 14px 22px; font-size: 15px; }
  .btn-xl { padding: 16px 24px; font-size: 16px; }

  /* Hero meta + badges */
  .hero-badge, .hero-meta {
    font-size: 12px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
  .hero-badge .sep { display: none; }
  .hero-badge { gap: 4px 10px; }

  /* About hero glyphs hidden — they overflow */
  .about-hero-glyph { display: none; }

  /* About — story drop cap smaller */
  .story-copy p:first-of-type::first-letter {
    font-size: 44px; padding: 4px 10px 0 0;
  }

  /* About — beliefs single column */
  .beliefs-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .belief-card { min-height: auto; padding: 26px 22px; }

  /* About — team / track / how single column */
  .team-grid, .track-grid, .how-steps {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .how-steps::before { display: none; }
  .role-card, .track-card, .how-step { padding: 24px 22px; }
  .track-metric { font-size: 30px; }

  /* About — stack list */
  .stack-row { padding: 18px 20px !important; }
  .stack-channel { font-size: 15px; }
  .stack-tools { font-size: 14px; }
  .stack-tools .sep { margin: 0 6px; }

  /* About — where map */
  .where-map { display: none !important; }
  .where-trust { flex-direction: column; align-items: stretch; gap: 8px; }
  .where-trust span { justify-content: center; }

  /* Story stats — single column on phones */
  .story-stats { grid-template-columns: 1fr !important; }
  .story-stat { border-right: 0 !important; padding: 22px 24px; }
  .story-stat:not(:last-child) { border-bottom: 1px solid var(--border) !important; }

  /* Plans — billing toggle pill text smaller */
  .billing-toggle button { padding: 9px 14px; font-size: 12.5px; }
  .billing-toggle .save-pill { display: none; }
  .pl-card { padding: 28px 22px; border-radius: 20px; }
  .pl-card.popular { padding-top: 36px; }
  .pl-card.popular::before { right: 50%; transform: translateX(50%); }
  .pl-price .num { font-size: 44px; }

  /* Plans — channel item */
  .channel-head { padding: 16px 18px; gap: 12px; }
  .channel-icon { width: 40px; height: 40px; }
  .channel-name { font-size: 15px; }
  .channel-body-inner { padding: 0 18px 22px 18px !important; }

  /* Plans — disclosures */
  .disclosure { padding: 24px 20px; }
  .addon-note p { padding: 18px 22px; font-size: 15px; }

  /* Compare-plans table — horizontal scroll if it remains side-by-side */
  .compare-plans-table { font-size: 13px; }
  .cmp-cell { padding: 14px 16px; }
  .cmp-cell.head { padding: 22px 16px; }
  .cmp-cell.head .h-name { font-size: 18px; }
  .cmp-cell.head .h-price { font-size: 22px; }

  /* FAQ */
  .faq-q { font-size: 15px; padding: 18px 4px; gap: 12px; }
  .faq-a-inner { font-size: 14px; padding: 0 4px 20px; }

  /* Contact form */
  .form-wrap { padding: 22px 18px; border-radius: 14px; }
  .form-step h3 { font-size: 19px; }
  .channel-grid { grid-template-columns: 1fr 1fr; }
  .form-actions { gap: 10px; }
  .form-back { order: 2; align-self: center; }
  .form-actions .btn { width: 100%; }
  .form-progress-row { flex-wrap: wrap; gap: 8px; }
  .phone-wrap { grid-template-columns: 90px 1fr; }

  /* Direct contact strip */
  .direct-strip { padding: 28px 22px; }
  .direct-value { font-size: 16px; word-break: break-word; }

  /* Calendly */
  .calendly-frame { padding: 6px; border-radius: 12px; }

  /* Final CTA */
  .final-cta h2 br { display: none; }
  .final-cta-trust { flex-direction: column; gap: 8px; }
  .final-cta-trust span { justify-content: center; }

  /* Process */
  .process-steps { grid-template-columns: 1fr; gap: 28px; }
  .process-steps::before { display: none; }
  .step { padding: 0; }

  /* Why pillars */
  .why-pillars { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .pillar { padding: 22px 18px; }
  .pillar-num { font-size: 28px; margin-bottom: 12px; }

  /* Plans grid — proof stats become 2x2 */
  .proof-stats { grid-template-columns: 1fr 1fr; gap: 4px; }
  .proof-stat { padding: 18px 8px; }
  .proof-stat::after { display: none !important; }
  .proof-stat-num { font-size: 38px; }

  /* MaaS modules / compare */
  .modules-grid { grid-template-columns: 1fr !important; }
  .module-card { padding: 26px 22px; }
  .compare-table {
    grid-template-columns: 1fr !important;
  }

  /* Footer cleanup */
  .footer-main { grid-template-columns: 1fr !important; gap: 28px; padding: 56px 0 32px; }
  .footer-legal-row { flex-direction: column; gap: 8px; align-items: flex-start; }
  .footer-legal-row a { margin-left: 0; margin-right: 14px; }
  .footer-brand p { max-width: none; }

  /* Generic — give containers a touch more breathing room from edge */
  .container { padding-left: 18px; padding-right: 18px; }

  /* Reduce hero padding aggressively */
  .hero, .about-hero, .plans-hero, .contact-hero {
    padding-top: 48px !important;
    padding-bottom: 56px !important;
  }
  .story, .beliefs, .team, .track, .how, .stack, .where,
  .services, .results, .why, .process, .final-cta,
  .channels-section, .disclosures, .compare-plans, .faq,
  .contact-section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* Hero art / media — ensure it sizes down */
  .hero-art { max-width: 100%; aspect-ratio: 1/1; }
  .hero-bubble { display: none; }
}

/* ============================
   Tiny phones (≤ 380px)
   ============================ */
@media (max-width: 380px) {
  .container { padding-left: 14px; padding-right: 14px; }
  .nav-bar .btn span,
  .nav-bar .btn { font-size: 12px; padding: 8px 12px; }
  .hero h1, .about-hero h1, .plans-hero h1, .contact-hero h1 {
    font-size: 28px !important;
  }
  .pl-price .num { font-size: 36px; }
  .channel-grid { grid-template-columns: 1fr; }
  .why-pillars { grid-template-columns: 1fr !important; }
}

/* ============================
   Tap target hygiene — anywhere
   ============================ */
@media (hover: none) and (pointer: coarse) {
  .btn, .nav-links a, .footer-col a, .channel-head, .faq-q,
  .pl-cta, .billing-toggle button, .copy-btn {
    min-height: 44px;
  }
}