/* ============================================================
   dueto — Mobile Responsive Overrides
   Loaded AFTER style.css and Tailwind CDN.
   All rules are scoped to @media queries → desktop unchanged.
   ============================================================ */


/* ============================================================
   BASE — applies at ALL viewport widths
   Ensures injected mobile-only elements stay hidden on desktop.
   ============================================================ */
.mobile-nav-dropdown { display: none !important; }
.mobile-hamburger { display: none !important; }


/* ============================================================
   SECTION A — TABLET (≤1024px)
   Light adjustments so tablets feel polished, not just mobile.
   ============================================================ */
@media (max-width: 1024px) {
  /* Stitch hero: pad less */
  .pt-40 { padding-top: 7rem; }
  .pb-24 { padding-bottom: 5rem; }
  .py-24 { padding-top: 5rem; padding-bottom: 5rem; }
  .py-20 { padding-top: 4rem; padding-bottom: 4rem; }

  /* Stitch hero gap */
  .gap-16 { gap: 2.5rem; }
}


/* ============================================================
   SECTION B — MOBILE (≤768px)
   ============================================================ */
@media (max-width: 768px) {

  /* ---------- 1. Body / global ---------- */
  html, body { overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }
  img, video { max-width: 100%; height: auto; }

  /* ---------- 2. Main page (style.css) extras ---------- */

  /* Container tighter on phone */
  .container { padding: 0 16px; }

  /* Navbar */
  .navbar { padding: 6px 0; }
  .logo-img { height: 40px !important; }
  .navbar .container { gap: 8px; }
  .nav-cta { padding: 8px 16px !important; font-size: 0.8rem !important; }

  /* Hero — already stacks on mobile via style.css; tighten further */
  .hero { min-height: auto; padding-bottom: 40px; }
  .hero .container { padding-top: 88px; gap: 28px; }
  .hero h1 { font-size: 2rem; line-height: 1.15; }
  .hero-desc { font-size: 1rem; line-height: 1.6; margin-bottom: 24px; }
  .hero-badge { font-size: 0.75rem; padding: 6px 14px; margin-bottom: 16px; }
  .hero-ctas { flex-direction: column; gap: 12px; }
  .hero-ctas .btn { width: 100%; justify-content: center; padding: 14px 24px; }
  .hero-mascot-row { flex-direction: column; gap: 24px; align-items: center; }
  .hero-mascot { width: 80px; }
  .hero-stats { gap: 20px; flex-wrap: wrap; justify-content: center; }
  .hero-stat .number { font-size: 1.6rem; }
  .hero-stat .label { font-size: 0.7rem; }

  /* Hero form card — tighter padding */
  .hero-form-card { padding: 24px 20px; border-radius: 16px; }
  .form-header { margin-bottom: 20px; }
  .form-header h3 { font-size: 1.2rem; }
  .form-header p { font-size: 0.85rem; }
  .form-group { margin-bottom: 12px; }
  .form-group label { font-size: 0.8rem; margin-bottom: 4px; }
  .form-group input { padding: 11px 14px; font-size: 0.9rem; }
  .form-submit { padding: 13px; font-size: 1rem; }

  /* Section padding shrink globally */
  .features, .how-it-works, .benefits, .testimonials, .cta-section, .video-showcase {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .video-showcase { padding-bottom: 0 !important; }

  /* Section headers tighter */
  .section-desc { font-size: 0.95rem; margin-bottom: 32px; padding: 0 8px; }
  .section-title { font-size: 1.6rem !important; }

  /* Feature card */
  .feature-card { padding: 24px; }
  .feature-card h3 { font-size: 1.1rem; }
  .feature-card p { font-size: 0.9rem; }
  .feature-icon { width: 48px; height: 48px; font-size: 20px; margin-bottom: 16px; }

  /* How it works steps */
  .steps { gap: 32px; }
  .step-number { width: 64px; height: 64px; font-size: 1.3rem; margin-bottom: 16px; }
  .step h3 { font-size: 1.05rem; }
  .step p { font-size: 0.85rem; padding: 0 8px; }

  /* Benefits */
  .benefit-item { padding: 20px; gap: 14px; }
  .benefit-item h4 { font-size: 1rem; }
  .benefit-item p { font-size: 0.85rem; }
  .benefit-check { width: 36px; height: 36px; min-width: 36px; font-size: 16px; }

  /* Video showcase */
  .video-browser-wrap { padding: 0 16px; margin-bottom: 56px; }
  .video-browser { border-radius: 10px; }
  .video-tabs { gap: 6px; padding: 0 12px; margin-bottom: 28px; }

  /* Social proof logos */
  .logos-bar { gap: 24px 32px; margin-bottom: 40px; }
  .logos-bar img { height: 32px !important; max-width: 110px !important; }
  .logos-bar img[alt="FINQ"] { height: 44px !important; }
  .logos-bar img[alt="Neema"] { height: 38px !important; }
  .logos-bar img[alt="Creomagic"] { height: 38px !important; }
  .logos-bar img[alt="Yad2"] { height: 30px !important; }
  .logos-bar img[alt="Ramon Space"] { height: 26px !important; }
  .logos-bar img[alt="nsKnox"] { height: 22px !important; }
  .logos-bar img[alt="ShipIn"] { height: 32px !important; }
  .logos-bar img[alt="CaPow"] { height: 26px !important; }

  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .stat-item .stat-number { font-size: 2rem; }
  .stat-item .stat-label { font-size: 0.8rem; }

  /* CTA section */
  .cta-section h2 { font-size: 1.7rem; }
  .cta-section p { font-size: 1rem; padding: 0 8px; margin-bottom: 24px; }
  .cta-section .btn { font-size: 1rem; padding: 13px 28px; width: 100%; max-width: 320px; justify-content: center; }

  /* Footer */
  .footer { padding: 32px 0 20px; }
  .footer-content { gap: 20px; }
  .footer .logo-img { height: 44px !important; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .footer-links a { font-size: 0.8rem; }
  .footer-bottom { font-size: 0.75rem; }

  /* Privacy / Terms pages */
  .legal-page { padding: 96px 0 56px; }
  .legal-header { margin-bottom: 32px; padding-bottom: 20px; }
  .legal-body { padding: 28px 20px; border-radius: 16px; }
  .legal-body h2 { font-size: 1.1rem; margin-top: 24px; }
  .legal-body p, .legal-body ul li { font-size: 0.9rem; line-height: 1.7; }


  /* ============================================================
     SECTION C — STITCH PAGES (Tailwind overrides)
     Affects comparison, hr-teams, small-business, enterprise.
     ============================================================ */

  /* Nav: shrink */
  nav.fixed > div { padding: 10px 16px !important; gap: 8px; }
  nav.fixed img[alt="dueto"] { height: 40px !important; }

  /* Nav buttons (Sign In / Get Started) */
  nav.fixed button { padding: 8px 14px !important; font-size: 0.75rem !important; border-radius: 8px !important; }
  /* Hide "Sign In" (anchor or button) on mobile — kept accessible via hamburger menu */
  nav.fixed .flex.items-center.gap-4 > *:first-child,
  nav.sticky .flex.items-center.gap-4 > *:first-child { display: none; }

  /* Hamburger button (injected by mobile-menu.js) */
  .mobile-hamburger { display: flex !important; }

  /* Mobile nav dropdown (injected) */
  .mobile-nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(252, 248, 255, 0.98);
    backdrop-filter: blur(16px);
    padding: 16px;
    border-bottom: 1px solid rgba(199, 196, 216, 0.3);
    box-shadow: 0 12px 32px rgba(24, 20, 69, 0.08);
    flex-direction: column;
    gap: 4px;
  }
  .mobile-nav-dropdown.open { display: flex !important; }
  .mobile-nav-dropdown a {
    padding: 12px 16px;
    color: #181445;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    text-decoration: none;
  }
  .mobile-nav-dropdown a:hover { background: rgba(53, 37, 205, 0.08); }

  /* Hero padding tighter */
  section.pt-40, header.pt-32 { padding-top: 96px !important; }
  .pb-24, .pb-20 { padding-bottom: 48px !important; }
  .py-24 { padding-top: 56px !important; padding-bottom: 56px !important; }
  .py-20 { padding-top: 48px !important; padding-bottom: 48px !important; }
  .py-16, .py-14 { padding-top: 40px !important; padding-bottom: 40px !important; }
  .px-8 { padding-left: 16px !important; padding-right: 16px !important; }

  /* Hero typography */
  section h1, header h1 {
    font-size: 2.1rem !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em;
  }
  h1.text-5xl, h1.text-6xl, h1.text-7xl { font-size: 2.1rem !important; }
  .text-7xl { font-size: 2.1rem !important; }
  .text-6xl { font-size: 1.9rem !important; }
  .text-5xl { font-size: 1.85rem !important; }
  .text-4xl { font-size: 1.55rem !important; }
  .text-3xl { font-size: 1.35rem !important; }
  .text-2xl { font-size: 1.15rem !important; }
  .text-xl { font-size: 1.05rem !important; }

  /* Hero descriptions */
  section p.text-xl, header p.text-xl,
  section p.text-lg, header p.text-lg {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  /* Hero CTAs — full width on small */
  .flex.flex-wrap.gap-4 { flex-direction: column !important; gap: 12px !important; }
  .flex.flex-col.sm\:flex-row.gap-4 { gap: 12px !important; }
  section button.px-8, section button.px-6, header button.px-8 {
    width: 100%;
    padding: 14px 20px !important;
    font-size: 1rem !important;
    justify-content: center;
  }
  /* Buttons that aren't navbar */
  section .flex.flex-wrap.gap-4 > button,
  section .flex.flex-col.gap-4 > button,
  header .flex.flex-col.gap-4 > button,
  header .flex.flex-wrap.gap-4 > button {
    width: 100%;
    font-size: 1rem !important;
  }

  /* Hero stats row — wrap & center */
  .flex.items-center.gap-8.pt-8 { flex-wrap: wrap; gap: 20px !important; justify-content: flex-start; }
  .flex.items-center.gap-8 .text-2xl { font-size: 1.4rem !important; }
  .flex.items-center.gap-8 .text-xs { font-size: 0.7rem !important; }

  /* Hero grid: max gap reduction */
  .gap-16 { gap: 28px !important; }
  .gap-12 { gap: 24px !important; }
  .gap-10 { gap: 18px !important; }
  .gap-8 { gap: 16px !important; }

  /* Cards / boxes shrink padding */
  .p-16 { padding: 20px !important; }
  .p-12 { padding: 20px !important; }
  .p-10 { padding: 20px !important; }
  .p-8 { padding: 20px !important; }

  /* Bento grid — col-spans collapse to full width */
  .md\:col-span-2 { grid-column: span 1 / span 1 !important; }

  /* Comparison page: comparison table — keep 3 cols but tighter */
  section .grid.grid-cols-3 { font-size: 0.8rem; }
  section .grid.grid-cols-3 > .p-6 { padding: 14px 10px !important; }
  section .grid.grid-cols-3 .font-semibold { font-size: 0.8rem; }
  section .grid.grid-cols-3 .col-span-1 { font-size: 0.85rem; }

  /* Logos grids on Stitch */
  .flex.flex-wrap.justify-center.items-center.gap-10 { gap: 18px 24px !important; }
  .flex.flex-wrap.justify-center.items-center.gap-12 { gap: 18px 24px !important; }
  .flex.flex-wrap.justify-center.items-center.gap-12.md\:gap-20 { gap: 16px 22px !important; }
  .flex.flex-wrap.justify-center.items-center img { max-width: 100px !important; }
  .flex.flex-wrap.justify-center.items-center img[alt="FINQ"] { height: 42px !important; }
  .flex.flex-wrap.justify-center.items-center img[alt="Neema"] { height: 38px !important; }
  .flex.flex-wrap.justify-center.items-center img[alt="Creomagic"] { height: 38px !important; }
  .flex.flex-wrap.justify-center.items-center img[alt="Yad2"] { height: 32px !important; }
  .flex.flex-wrap.justify-center.items-center img[alt="Ramon Space"] { height: 28px !important; }
  .flex.flex-wrap.justify-center.items-center img[alt="nsKnox"] { height: 22px !important; }
  .flex.flex-wrap.justify-center.items-center img[alt="ShipIn"] { height: 32px !important; }
  .flex.flex-wrap.justify-center.items-center img[alt="CaPow"] { height: 26px !important; }

  /* Integration stack labels (Stitch comparison page) */
  .flex.flex-wrap.justify-center.items-center.gap-12.md\:gap-20 .text-xl { font-size: 0.95rem !important; }

  /* Stitch testimonials */
  .v2t { padding: 22px !important; }
  .v2t-q { font-size: 0.9rem !important; }
  .v2t::before { font-size: 3rem !important; top: 4px; right: 14px; }

  /* Lead form section in Stitch pages */
  section .grid.lg\:grid-cols-2 input,
  section form input { padding: 14px !important; font-size: 0.95rem !important; }
  section form button { padding: 14px !important; font-size: 1rem !important; }
  section form .grid.grid-cols-2 { grid-template-columns: 1fr !important; gap: 12px !important; }
  section form .col-span-2 { grid-column: span 1 / span 1 !important; }

  /* Footer (Stitch) */
  footer .flex.flex-col.md\:flex-row { gap: 20px !important; padding: 32px 16px !important; }
  footer .flex.gap-8 { flex-wrap: wrap; gap: 14px !important; justify-content: center; }
  footer .text-xs { font-size: 0.72rem !important; }

  /* Bento dashboard: shrink large number */
  .text-6xl.font-extrabold { font-size: 3rem !important; }

  /* Source effectiveness bars — readable */
  .grid.grid-cols-4.gap-4.h-32 { height: 100px !important; }

  /* Hero video / image card */
  .relative .aspect-square,
  .relative .lg\:aspect-video { aspect-ratio: 16 / 10 !important; }

  /* Float card on hero image (match-score badge) */
  .absolute.-bottom-6.-left-6 { width: 130px !important; bottom: -10px !important; left: -10px !important; }
}


/* ============================================================
   SECTION D — SMALL MOBILE (≤480px)
   Extra-tight for iPhone SE / older phones.
   ============================================================ */
@media (max-width: 480px) {
  .container { padding: 0 14px; }

  /* Even smaller h1 on tiny screens */
  .hero h1 { font-size: 1.75rem; }
  section h1, header h1 { font-size: 1.8rem !important; }
  .h1.text-5xl, .h1.text-6xl, .h1.text-7xl { font-size: 1.8rem !important; }

  /* Tighten px-8 even more */
  .px-8 { padding-left: 14px !important; padding-right: 14px !important; }

  /* Stats: 1 col on very small */
  .stats-row { grid-template-columns: 1fr !important; gap: 16px; }
  .hero-stats { gap: 14px; }

  /* Section padding shrink */
  .features, .how-it-works, .benefits, .testimonials, .cta-section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  /* Stitch sections */
  .py-24 { padding-top: 44px !important; padding-bottom: 44px !important; }
  .py-20 { padding-top: 40px !important; padding-bottom: 40px !important; }

  /* Lead form card padding */
  .hero-form-card { padding: 20px 16px; }

  /* Compact buttons */
  .nav-cta { display: none; }   /* Hamburger sufficient on tiny screens */
}