/* ============================================================
   MoonAI — responsive.css
   Mobile-specific overrides. Loaded last so it wins all cascades.
   Breakpoints:
     ≤ 1024px — tablet & smaller
     ≤  768px — landscape phones / small tablets
     ≤  480px — phones
     ≤  360px — very small phones (Galaxy Fold, older iPhones)
   ============================================================ */

/* ----------------------------------------------------------------
   GLOBAL: page-wide guardrails
   ---------------------------------------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* ----------------------------------------------------------------
   ≤ 1024px — tighten oversized things on tablets
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .container { padding: 0 20px; }
}

/* ----------------------------------------------------------------
   ≤ 768px — primary mobile breakpoint
   ---------------------------------------------------------------- */
@media (max-width: 768px) {

  /* Container & section rhythm */
  .container { padding: 0 18px; }
  section { padding: 64px 0; }

  /* Typography — tighter on phones */
  h1 { font-size: clamp(32px, 9vw, 44px); line-height: 1.04; letter-spacing: -0.03em; }
  h2 { font-size: clamp(26px, 7.2vw, 36px); line-height: 1.08; letter-spacing: -0.022em; }
  h3 { font-size: 19px; }
  h4 { font-size: 16px; }
  p  { font-size: 16px; line-height: 1.55; }
  .lead { font-size: 16px; }

  .section-head { margin-bottom: 36px; }
  .section-head .lead { margin-top: 12px; }

  /* Buttons — tighter, but still tappable (≥44px) */
  .btn {
    padding: 14px 20px;
    font-size: 14.5px;
    gap: 4px;
  }
  .btn .ms { font-size: 18px; }

  /* Header */
  header.nav { border-bottom: 1px solid rgba(230,231,226,.7); }
  .nav-inner { padding: 12px 0; gap: 12px; }
  .logo { font-size: 17px; gap: 8px; }
  .logo-mark { width: 26px; height: 26px; }
  .nav-cta .btn-primary {
    padding: 10px 16px;
    font-size: 13.5px;
  }
  .nav-cta .btn-primary .ms { display: none; } /* save space on small viewports */

  /* HERO */
  .hero { padding-top: 28px; padding-bottom: 56px; }
  .hero h1 { margin-bottom: 18px; }
  .hero .lead { margin-bottom: 24px; }
  .hero-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
  .hero-cta .btn { width: 100%; }
  .hero-cta .btn .ms { display: inline-flex; }
  .hero-microcopy {
    display: flex;
    gap: 8px 14px;
    margin-top: 18px;
    font-size: 13px;
    justify-content: center;
  }

  /* Hero canvas + grid */
  .hero-media { margin-top: 40px; }
  .hero-canvas { padding: 18px; border-radius: 24px; }
  .hero-grid { gap: 16px; }
  .phone, .dash { padding: 14px; border-radius: 22px; }
  .chat-stream { min-height: 280px; }
  .msg { max-width: 86%; font-size: 13.5px; padding: 9px 12px; }
  .dash-row { grid-template-columns: 1fr; gap: 8px; }
  .dash-side { flex-direction: row; flex-wrap: wrap; }
  .dash-side .kpi { flex: 1 1 calc(50% - 5px); min-width: 0; }

  /* Channel marquee */
  .channels { padding: 28px 0 48px; }
  .channels p { font-size: 12px; margin-bottom: 16px; }
  .marquee-track { gap: 32px; }
  .marquee-track .item { font-size: 15px; padding: 10px 14px; gap: 8px; }
  .marquee-track .item .ic { width: 30px; height: 30px; font-size: 11px; border-radius: 8px; }

  /* Stats row */
  .stats { padding-bottom: 56px; }
  .stats-row .cell { padding: 24px 22px; }
  .stats-row .num { font-size: clamp(34px, 11vw, 48px); }
  .stats-row .lbl { font-size: 14px; max-width: none; }

  /* Tag */
  .tag { font-size: 12px; margin-bottom: 16px; }

  /* Feature / solution grids */
  .feature-card { padding: 22px; }

  /* If-you blocks */
  .ifyou-block { gap: 24px; margin-bottom: 56px; }
  .ifyou-text h2 { margin-bottom: 12px; }
  .ifyou-text p { font-size: 16px; margin-bottom: 18px; }
  .ifyou-features { gap: 12px 18px; margin-top: 14px; }
  .ifyou-features .feat { font-size: 14.5px; }

  /* Consequences grid */
  .conseq-card { padding: 18px; }
  .conseq-card h3 { font-size: 17px; }
  .conseq-card p { font-size: 14px; }

  /* Showcase cards */
  .showcase-card { padding: 22px; }

  /* Calculator */
  .calc-card { padding: 32px 22px; border-radius: 28px; }
  .calc-card::before { width: 360px; height: 360px; right: -120px; top: -120px; }
  .calc-card::after  { width: 280px; height: 280px; left: -100px; bottom: -120px; }
  .calc-grid { gap: 28px; }
  .calc-result-big { font-size: clamp(40px, 13vw, 64px); }

  /* Three steps cards */
  .ts-card { padding: 22px; }
  .ts-card h3 { margin: 12px 0 6px; }

  /* Timeline */
  .tl-item { gap: 14px; }
  .tl-num { width: 48px; height: 48px; font-size: 20px; }
  .tl-content h3 { font-size: 18px; }
  .tl-content p { font-size: 14.5px; }

  /* Automate cards */
  .auto-card { padding: 18px; gap: 8px; }

  /* Integrations */
  .int-grid { gap: 14px; margin-top: 24px; }
  .int-circle { width: 72px; height: 72px; }
  .int-circle .ms { font-size: 26px; }
  .int-circle .label { font-size: 11px; }
  .int-footer { font-size: 14.5px; margin-top: 24px; }

  /* Dialog grid */
  .dialog-grid { gap: 28px; }

  /* Final CTA */
  .final { padding-bottom: 48px; }
  .final-card { padding: 48px 22px; border-radius: 28px; }
  .final-card::before { width: 380px; height: 380px; right: -160px; top: -160px; }
  .final-card::after  { width: 320px; height: 320px; left: -140px; bottom: -180px; }
  .final-card .cta-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    gap: 10px;
  }
  .final-card .cta-row .btn { width: 100%; }

  /* Footer */
  footer.foot { padding: 56px 0 24px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  footer.foot .desc { max-width: none; }
  footer.foot h4 { font-size: 12px; margin-bottom: 10px; }
  footer.foot a { font-size: 14px; }
  footer.foot ul { gap: 9px; }
  .foot-trust { margin-top: 36px; padding-top: 28px; gap: 22px; }
  .ratings { gap: 14px; }
  .rating-pill { font-size: 12.5px; }
  .badges { gap: 10px; }
  .badge-tile { padding: 8px 12px; font-size: 11.5px; }
  .foot-bottom { gap: 8px; font-size: 12.5px; }

  /* Lead modal — already responsive, just refine */
  .lead-modal__dialog { padding: 24px 20px; }
  .lead-modal__title { font-size: 20px; }
  .lead-modal__subtitle { font-size: 13.5px; margin-bottom: 18px; }
  .lead-form { gap: 12px; }
  .lead-form__input,
  .lead-form__select { height: 46px; font-size: 16px; } /* 16px prevents iOS zoom on focus */
  .lead-form__submit { height: 50px; font-size: 14.5px; }
}

/* ----------------------------------------------------------------
   ≤ 480px — phones
   ---------------------------------------------------------------- */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  section { padding: 56px 0; }

  h1 { font-size: clamp(28px, 9.5vw, 38px); }
  h2 { font-size: clamp(24px, 7.5vw, 32px); }

  /* Nav: ultra-compact button */
  .nav-cta .btn-primary {
    padding: 9px 14px;
    font-size: 13px;
    letter-spacing: -0.01em;
  }
  .logo { font-size: 16px; }

  /* Hero canvas: tighter still */
  .hero-canvas { padding: 14px; border-radius: 22px; }
  .hero-media::before { inset: 20px -20px -20px; }

  /* Stats row split */
  .stats-row .cell { padding: 22px 18px; }
  .stats-row .num { font-size: clamp(32px, 11vw, 44px); }

  /* Calculator */
  .calc-card { padding: 28px 18px; }

  /* Final CTA */
  .final-card { padding: 40px 18px; }

  /* Footer — single column at narrow */
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  footer.foot .col-brand { grid-column: 1 / -1; }

  /* Hero microcopy: stack on very small screens */
  .hero-microcopy {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .final-card .hero-microcopy {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  /* Step list cards & timeline */
  .step-list .si { padding: 18px; }
  .tl-num { width: 44px; height: 44px; font-size: 18px; }
}

/* ----------------------------------------------------------------
   ≤ 360px — very small phones (Fold-front, older iPhone SE)
   ---------------------------------------------------------------- */
@media (max-width: 360px) {
  .container { padding: 0 14px; }
  h1 { font-size: 26px; }
  h2 { font-size: 22px; }
  .nav-cta .btn-primary { padding: 9px 12px; font-size: 12.5px; }
  .btn { padding: 12px 16px; font-size: 14px; }
  .foot-grid { grid-template-columns: 1fr; }
  footer.foot .col-brand { grid-column: 1; }
}

/* ----------------------------------------------------------------
   iOS quirks
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Prevent iOS Safari auto-zoom on focus when input font-size < 16px */
  input, select, textarea { font-size: 16px; }
}

/* ----------------------------------------------------------------
   Landscape orientation on phones — shorten hero
   ---------------------------------------------------------------- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .hero { padding-top: 24px; padding-bottom: 36px; }
  .hero-media { margin-top: 24px; }
}