/* ============================================================
   EcomCloud.ai mobile clean headings patch
   Goal: make phone typography comfortable, premium, and readable.
   This file only affects mobile/tablet widths and does not touch chat.
   ============================================================ */

@media (max-width: 820px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
  }

  body {
    font-size: 16px !important;
  }

  .container,
  .nav-shell {
    width: min(100% - 32px, 1180px) !important;
  }

  .section-pad,
  section.section-pad {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* Header stays clean and compact on phone. */
  .site-header {
    background: rgba(255,255,255,0.98) !important;
    border-bottom: 1px solid rgba(219,230,243,0.95) !important;
    box-shadow: 0 8px 24px rgba(15,23,42,0.04) !important;
  }

  .nav-shell {
    min-height: 64px !important;
  }

  .brand-mark {
    width: 36px !important;
    height: 36px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    flex: 0 0 auto !important;
  }

  .brand-text {
    font-size: 20px !important;
    line-height: 1 !important;
    letter-spacing: -0.05em !important;
  }

  .nav-toggle {
    width: 44px !important;
    height: 44px !important;
    border-radius: 15px !important;
    background: #0f172a !important;
    box-shadow: 0 12px 25px rgba(15,23,42,0.15) !important;
  }

  .nav-toggle span {
    background: #fff !important;
    width: 19px !important;
  }

  /* Hero: short headline, less heavy, no oversized first screen. */
  .hero,
  .hero.section-pad,
  section.hero,
  section.hero.section-pad,
  .ec-hero,
  .hero-section {
    min-height: auto !important;
    padding-top: 30px !important;
    padding-bottom: 42px !important;
    align-items: flex-start !important;
    background:
      radial-gradient(circle at 90% 0%, rgba(37, 99, 235, 0.11), transparent 34%),
      radial-gradient(circle at 0% 16%, rgba(0, 194, 255, 0.12), transparent 30%),
      linear-gradient(180deg, #f8fbff 0%, #ffffff 100%) !important;
  }

  .hero-grid,
  .ec-hero-grid,
  .hero .container,
  .hero-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-top: 0 !important;
  }

  .hero-copy {
    max-width: 100% !important;
  }

  .hero .eyebrow,
  .ec-hero .eyebrow {
    display: none !important;
  }

  .hero h1,
  .hero-title,
  h1.hero-title,
  .ec-hero h1,
  h1.hero-heading {
    max-width: 9.8em !important;
    margin: 0 0 14px !important;
    font-size: clamp(32px, 8.7vw, 39px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
    text-wrap: balance !important;
  }

  .hero-lead,
  .hero p.hero-lead,
  .ec-hero p.hero-lead {
    margin-top: 0 !important;
    max-width: 100% !important;
    font-size: 16.5px !important;
    line-height: 1.55 !important;
    color: #334155 !important;
  }

  .hero-support,
  .hero p.hero-support {
    margin-top: 14px !important;
    padding: 14px 15px !important;
    border-radius: 17px !important;
    font-size: 14.5px !important;
    line-height: 1.52 !important;
    color: #52647c !important;
    background: rgba(255,255,255,0.84) !important;
    border: 1px solid rgba(219,230,243,0.95) !important;
    box-shadow: 0 14px 34px rgba(15,23,42,0.055) !important;
  }

  .hero-actions {
    margin-top: 17px !important;
    gap: 10px !important;
  }

  .hero-actions .btn,
  .contact-form .btn,
  button.btn,
  a.btn {
    width: 100% !important;
    min-height: 50px !important;
    padding: 13px 16px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
  }

  .trust-row {
    display: none !important;
  }

  /* Section titles: smaller, left aligned, easier to scan. */
  .section-heading,
  .section-heading.narrow,
  .section-intro,
  .contact-copy {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 24px !important;
    text-align: left !important;
  }

  .section-heading .eyebrow,
  .section-intro .eyebrow,
  .contact-copy .eyebrow,
  .eyebrow.center,
  p.eyebrow.center {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .eyebrow,
  p.eyebrow,
  .section-heading .eyebrow,
  .section-intro .eyebrow,
  .contact-copy .eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.12em !important;
    color: #2563eb !important;
  }

  .section-dark .eyebrow,
  .section-dark p.eyebrow {
    color: #93c5fd !important;
  }

  .eyebrow span,
  p.eyebrow span {
    width: 20px !important;
    height: 2px !important;
  }

  section:not(.hero) h2,
  .section-heading h2,
  .section-intro h2,
  .contact-copy h2,
  h2 {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(25px, 6.4vw, 30px) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.032em !important;
    text-align: left !important;
    text-wrap: balance !important;
  }

  .section-heading p,
  .section-intro p,
  .contact-copy p,
  .section-dark p {
    margin-top: 11px !important;
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    text-align: left !important;
  }

  /* Cards: reduce heavy phone feeling. */
  .question-grid,
  .services-grid,
  .usecase-grid,
  .contact-grid,
  .two-col,
  .timeline,
  .demo-board {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .question-card,
  .service-card,
  .usecase-card,
  .timeline-item,
  .checker-card,
  .contact-form,
  .demo-side,
  .visual-card {
    border-radius: 22px !important;
    padding: 21px !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.065) !important;
  }

  .service-icon,
  .question-card span,
  .timeline-item span {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    font-size: 17px !important;
    margin-bottom: 14px !important;
  }

  .question-card h3,
  .service-card h3,
  .usecase-card h3,
  .timeline-item h3,
  .demo-side h3 {
    font-size: 22px !important;
    line-height: 1.18 !important;
    letter-spacing: -0.035em !important;
  }

  .question-card p,
  .service-card p,
  .usecase-card p,
  .timeline-item p,
  .demo-side li,
  .checker-card p {
    font-size: 15.7px !important;
    line-height: 1.55 !important;
  }

  /* Signal chips should not create an uncomfortable cut-off feeling. */
  .signal-strip {
    padding: 14px 0 !important;
    overflow: hidden !important;
  }

  .signal-grid {
    display: flex !important;
    gap: 9px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .signal-grid::-webkit-scrollbar {
    display: none !important;
  }

  .signal-card {
    flex: 0 0 auto !important;
    padding: 10px 14px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
  }

  /* Contact form: more comfortable on phone. */
  .contact-form label,
  label {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  input,
  textarea,
  select {
    min-height: 50px !important;
    border-radius: 15px !important;
    font-size: 16px !important;
  }

  textarea {
    min-height: 132px !important;
  }
}

@media (max-width: 380px) {
  .hero h1,
  .hero-title,
  h1.hero-title,
  .ec-hero h1,
  h1.hero-heading {
    font-size: 31px !important;
  }

  section:not(.hero) h2,
  .section-heading h2,
  .section-intro h2,
  .contact-copy h2,
  h2 {
    font-size: 24px !important;
  }
}