/* ==========================================================
   Medessence — Responsive overrides
   Loaded on all pages after medessence.css.
   Uses class-targeted media queries to handle inline styles.
   Breakpoints:
     1024px — iPad landscape
     860px  — iPad portrait
     640px  — mobile
   ========================================================== */

/* === HERO === */
@media (max-width: 860px) {
  .hero-section h1 br { display: none !important; }
}
@media (max-width: 1024px) {
  .hero-section { padding: 72px 24px 40px !important; }
  .hero-section h1 {
    font-size: 42px !important;
    letter-spacing: -0.7px !important;
    line-height: 1.08 !important;
  }
}
@media (max-width: 640px) {
  .hero-section { padding: 44px 18px 28px !important; }
  .hero-section h1 {
    font-size: 34px !important;
    letter-spacing: -0.5px !important;
    line-height: 1.1 !important;
  }
  .hero-section p {
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin-top: 16px !important;
    margin-bottom: 24px !important;
  }
  .hero-cta { flex-direction: column !important; width: 100% !important; max-width: 320px !important; margin: 0 auto 36px !important; gap: 8px !important; }
  .hero-cta > * { width: 100% !important; }
}
@media (max-width: 414px) {
  .hero-section h1 { font-size: 30px !important; }
}
@media (max-width: 360px) {
  .hero-section h1 { font-size: 28px !important; letter-spacing: -0.3px !important; }
}

/* === PRODUCT MOCK (dossier viewer) === */
@media (max-width: 720px) {
  .mock-grid { grid-template-columns: 1fr !important; }
  .mock-sidebar { border-right: none !important; border-bottom: 1px solid rgba(0,0,0,0.05) !important; }
  .mock-url { display: none !important; }
}

/* === SECTIONS — generic padding === */
@media (max-width: 1024px) {
  .section-pad { padding-top: 72px !important; padding-bottom: 72px !important; }
}
@media (max-width: 640px) {
  .section-pad { padding-top: 56px !important; padding-bottom: 56px !important; padding-left: 20px !important; padding-right: 20px !important; }
}

/* === FEATURE ROWS === */
@media (max-width: 860px) {
  .feature-row { grid-template-columns: 1fr !important; gap: 32px !important; direction: ltr !important; }
}
@media (max-width: 640px) {
  .feature-row h3 { font-size: 24px !important; letter-spacing: -0.4px !important; }
  .feature-row p { font-size: 15px !important; }
  .feature-row li { font-size: 14px !important; }
  /* tighten the inter-row gap */
  .feature-row + .feature-row,
  [class*="feature"] > .feature-row { margin-top: 0 !important; }
}

/* tighten home features container gap on mobile */
@media (max-width: 640px) {
  .home-features-container { gap: 56px !important; }
}

/* === SECTION HEADINGS (clamp min on mobile) === */
@media (max-width: 640px) {
  section h2 {
    font-size: 28px !important;
    letter-spacing: -0.5px !important;
    line-height: 1.12 !important;
  }
  section h2 + p,
  .section-sub {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
}

/* === BENEFITS GRID === */
@media (max-width: 720px) {
  .benefits-grid { grid-template-columns: 1fr !important; }
  .benefit-cell { border-right: none !important; }
  .benefit-cell:nth-last-child(2) { border-bottom: 1px solid rgba(0,0,0,0.05) !important; }
}
@media (max-width: 640px) {
  .benefit-cell { padding: 20px 22px !important; }
}

/* === SECTION HEADINGS (legacy) === */
@media (max-width: 640px) {
  .section-title {
    font-size: 28px !important;
    letter-spacing: -0.5px !important;
  }
  .section-sub { font-size: 15px !important; }
}

/* === CONTACT === */
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}
@media (max-width: 640px) {
  .contact-card { padding: 24px !important; }
  .contact-form-row { grid-template-columns: 1fr !important; }
}

/* === STORY (over-ons) === */
@media (max-width: 860px) {
  .story-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .story-grid > div:first-child { position: static !important; }
}

/* === VALUES GRID === */
@media (max-width: 720px) {
  .values-grid { grid-template-columns: 1fr !important; }
}

/* === TEAM GRID === */
@media (max-width: 860px) {
  .team-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 520px) {
  .team-grid { grid-template-columns: 1fr !important; }
}

/* === CERTS === */
@media (max-width: 720px) {
  .certs-grid { grid-template-columns: 1fr !important; }
}

/* === FOOTER === */
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr !important; }
}

/* === NAV (mobile burger) === */
@media (max-width: 860px) {
  .nav-desktop, .nav-cta { display: none !important; }
  .nav-burger { display: inline-flex !important; }
}
@media (max-width: 640px) {
  .nav-inner { padding: 12px 18px !important; }
}

/* === FINAL CTA === */
@media (max-width: 640px) {
  .final-cta { padding: 56px 20px !important; }
  .final-cta h2 { font-size: 28px !important; letter-spacing: -0.5px !important; }
  .final-cta p { font-size: 15px !important; }
}

/* === FAQ === */
@media (max-width: 640px) {
  .faq-question { font-size: 15px !important; padding: 16px 18px !important; }
  .faq-answer { padding: 0 18px 18px !important; font-size: 14px !important; }
}

/* === SAVINGS STAT === */
@media (max-width: 640px) {
  .savings-stat { padding: 64px 20px !important; }
  .savings-number { letter-spacing: -2px !important; }
  .savings-stat p { font-size: 15px !important; }
}

/* === HORIZONTAL OVERFLOW SAFETY === */
html, body { overflow-x: hidden; }
img, svg { max-width: 100%; }

/* === CARDS / GENERIC PADDING REDUCTION === */
@media (max-width: 640px) {
  .benefit-cell { padding: 18px 20px !important; }
}

/* === DOSSIER MOCK on tiny screens === */
@media (max-width: 640px) {
  .mock-sidebar { padding: 18px 16px !important; }
  .mock-sidebar > div:first-child { margin-bottom: 12px !important; }
}

/* === HERO MOCK — new clean design — tighten on mobile === */
@media (max-width: 640px) {
  .dossier-mock-body { padding: 24px 20px !important; }
  .dossier-mock-body > div:first-child > div > div:nth-child(2) { font-size: 18px !important; letter-spacing: -0.3px !important; }
}
@media (max-width: 380px) {
  .dossier-mock-body { padding: 20px 16px !important; }
}

/* === BADGES / EYEBROWS — soften letter-spacing on mobile === */
@media (max-width: 640px) {
  /* allow long badge text to wrap nicely */
  .badge-pill {
    font-size: 11px !important;
    letter-spacing: 0.4px !important;
    padding: 5px 10px !important;
  }
}

/* === VERTICAL RHYTHM — tighten outsized gaps on mobile === */
@media (max-width: 640px) {
  /* hero bottom margin to mock */
  .hero-section .product-mock-wrap { margin-top: 8px !important; }
}

/* === STORY SIDEBAR === */
@media (max-width: 860px) {
  .story-sticky { position: static !important; }
}

/* === TIMELINE / OVER PAGE TIGHTNESS === */
@media (max-width: 640px) {
  .timeline-wrap { padding-left: 24px !important; }
  .timeline-wrap h4 { font-size: 18px !important; }
  .timeline-wrap p { font-size: 14px !important; }
}

/* === BUTTONS on mobile — don't oversize === */
@media (max-width: 640px) {
  .btn-lg { padding: 14px 22px !important; font-size: 15px !important; }
}