/* ============================================
   MOBILE OPTIMIZATION — 771Agency
   Better legibility on screens < 768px
   ============================================ */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Prevent horizontal scroll everywhere */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ============================================
   MOBILE (< 768px) — MAIN RULES
   ============================================ */
@media (max-width: 768px) {

  /* === TYPOGRAPHY BUMPS === */

  /* Tiny labels (10-11px) → 12px minimum */
  [style*="fontSize: '10px'"],
  [style*="fontSize: '11px'"],
  [style*="fontSize:10px"],
  [style*="fontSize:11px"],
  [style*="fontSize: 10,"],
  [style*="fontSize: 11,"],
  [style*="fontSize: 10}"],
  [style*="fontSize: 11}"] {
    font-size: 12px !important;
  }

  /* Body text at 13-14px → 15px for real readability */
  [style*="fontSize: '13px'"],
  [style*="fontSize: '14px'"],
  [style*="fontSize:13px"],
  [style*="fontSize:14px"],
  [style*="fontSize: 13,"],
  [style*="fontSize: 14,"],
  [style*="fontSize: 13}"],
  [style*="fontSize: 14}"] {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* Mid body text (15-17px) keeps size, better line-height */
  p[style*="fontSize: '15px'"],
  p[style*="fontSize: '16px'"],
  p[style*="fontSize: '17px'"] {
    line-height: 1.65 !important;
  }

  /* === SECTION PADDING === */
  section[style*="padding"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* First section after nav — extra top space to breathe under header */
  main > section:first-of-type,
  body > section:first-of-type,
  #root > div > section:first-of-type,
  [data-screen-label] > section:first-of-type {
    padding-top: 80px !important;
  }

  /* === BUTTONS / CTAs — tappable === */
  a[href^="https://buy.stripe.com"],
  a[href^="#pricing"],
  a[href^="#"],
  button {
    min-height: 44px;
  }

  a[style*="linear-gradient(135deg, #FFFFFF"],
  a[style*="linear-gradient(135deg,#FFFFFF"],
  button[style*="linear-gradient(135deg, #FFFFFF"] {
    font-size: 15px !important;
    padding: 14px 24px !important;
  }

  /* === FORMS — prevent iOS zoom === */
  input, textarea, select {
    font-size: 16px !important;
    padding: 12px 14px !important;
  }

  /* === IMAGES === */
  img, video {
    max-width: 100% !important;
    height: auto !important;
  }

  /* === NAV === */
  nav a {
    padding: 10px 8px !important;
  }

  /* === EYEBROW LABELS === */
  [style*="letterSpacing: '0.18em'"],
  [style*="letterSpacing: '0.16em'"],
  [style*="letterSpacing: '0.14em'"] {
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
  }
}

/* ============================================
   MOBILE (< 768px) — H1 HERO BIGGER
   ============================================ */
@media (max-width: 768px) {

  /* Hero H1 — make it IMPACT on mobile */
  h1 {
    font-size: clamp(44px, 12vw, 64px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.04em !important;
    font-weight: 800 !important;
  }

  /* Prevent text overflow on mobile — force wrapping */
  h1, h2, h3, p, span, div {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }

  /* Remove any whiteSpace: nowrap that causes overflow */
  [style*="whiteSpace: 'nowrap'"],
  [style*="whiteSpace:nowrap"],
  [style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  /* H2 "Stop chasing playlists / Start feeding the algorithm" style */
  h2 {
    font-size: clamp(32px, 9vw, 44px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
  }
}

/* ============================================
   SMALL PHONES (< 420px)
   ============================================ */
@media (max-width: 420px) {

  section[style*="padding"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* First section — breathe under nav */
  main > section:first-of-type,
  body > section:first-of-type,
  #root > div > section:first-of-type,
  [data-screen-label] > section:first-of-type {
    padding-top: 72px !important;
  }

  h1 {
    font-size: clamp(42px, 11.5vw, 56px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.04em !important;
  }

  h2 {
    font-size: clamp(30px, 8.5vw, 40px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
  }

  h3 {
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.15 !important;
  }

  /* Huge display numbers — keep impact but fit */
  [style*="fontSize: '72px'"],
  [style*="fontSize: '84px'"],
  [style*="fontSize: '96px'"],
  [style*="fontSize: 72"],
  [style*="fontSize: 84"],
  [style*="fontSize: 96"] {
    font-size: 56px !important;
  }

  [style*="padding: '40px'"],
  [style*="padding: '44px'"],
  [style*="padding: '48px'"] {
    padding: 24px !important;
  }

  [style*="padding: '36px"],
  [style*="padding: '32px"] {
    padding: 20px !important;
  }
}

/* ============================================
   REDUCED MOTION — accessibility
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}