/* ============================================
   MOBILE-FIRST MARKETING OVERRIDES
   Scoped to landing page on screens ≤768px
   ============================================ */

/* --- Hero: Make it PUNCHY --- */
@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 0;
  }

  .hero::before {
    background:
      radial-gradient(
        300px 250px at 20% 15%,
        rgba(234, 193, 25, 0.18),
        transparent 65%
      ),
      radial-gradient(
        350px 300px at 80% 10%,
        rgba(158, 214, 223, 0.12),
        transparent 60%
      ),
      radial-gradient(
        250px 200px at 50% 85%,
        rgba(234, 167, 200, 0.1),
        transparent 50%
      );
  }

  .hero-content {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
    padding: 2rem 1.25rem 1.75rem !important;
    text-align: center;
    width: 100% !important;
  }

  .hero-text {
    text-align: center !important;
    order: 1;
  }

  /* [FIX #1] Benefit kicker above H1 */
  .hero-kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.75rem;
  }

  .hero h1 {
    font-size: clamp(2rem, 8vw, 2.75rem) !important;
    line-height: 1.08 !important;
    margin-bottom: 0.75rem !important;
    letter-spacing: -0.02em;
  }

  /* [FIX #2] Tighter hero body text on mobile */
  .hero p {
    font-size: 0.975rem !important;
    line-height: 1.45 !important;
    margin-bottom: 1.5rem !important;
    max-width: none !important;
    color: var(--text-secondary);
  }

  .hero-cta-group {
    flex-direction: column !important;
    gap: 0.625rem !important;
    justify-content: center;
    align-items: center;
  }

  .hero-cta-group .btn {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 1.1rem !important;
    padding: 1rem 1.5rem !important;
    min-height: 52px;
    border-radius: var(--radius-md);
    font-weight: 700;
  }

  /* [FIX #3] Secondary CTA — ghost/outline style */
  .hero-cta-group .btn-secondary,
  .hero-cta-group .btn:nth-child(2) {
    background: transparent !important;
    border: 1.5px solid var(--border-dark) !important;
    color: var(--cream) !important;
    font-weight: 600 !important;
  }

  /* Trust badges under CTA */
  .hero-text > div[style*="margin-top"] {
    margin-top: 1rem !important;
    gap: 0.5rem !important;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .hero-text > div[style*="margin-top"] > div {
    font-size: 0.85rem;
  }

  /* [FIX #7] Social proof line */
  .hero-social-proof {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.02em;
  }

  /* Hero image — compact on mobile */
  .hero-image-container {
    order: 2;
    max-width: 85% !important;
    margin: 0 auto !important;
    aspect-ratio: 16/10 !important;
    border-radius: 16px !important;
  }
}

/* Hide kicker and social proof on desktop, show on mobile */
.hero-kicker,
.hero-social-proof {
  display: none;
}

@media (max-width: 768px) {
  .hero-kicker,
  .hero-social-proof {
    display: block !important;
  }
}

/* --- Sections: Uniform padding --- */
@media (max-width: 768px) {
  .section {
    padding: 2.5rem 0 !important;
  }

  .section-title {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    margin-bottom: 0.6em !important;
    padding: 0;
  }

  /* Section subtitle paragraphs */
  .section > .container > p {
    font-size: 0.975rem !important;
    line-height: 1.55 !important;
    margin-bottom: 1.75rem !important;
    padding: 0;
  }

  /* Uniform container padding across all sections */
  .container {
    width: 100% !important;
    padding: 0 1.25rem !important;
  }
}

/* --- Bento Grid: Single column, full width --- */
@media (max-width: 640px) {
  .bento-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .bento-cell,
  [class*="bento-span-"] {
    grid-column: span 1 !important;
    padding: 1.5rem 1.25rem !important;
    border-radius: var(--radius-lg) !important;
  }

  .bento-cell h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }

  .bento-cell p {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .bento-cell ul {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .bento-cell ul li {
    padding: 0.25rem 0;
  }

  /* [FIX #8] Lottie step images — bigger */
  .step-image {
    height: 220px !important;
    margin-bottom: 1.25rem !important;
  }

  /* [FIX #6] Step number badges — larger and bolder */
  .step-number {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
  }

  /* Target audience images */
  .bento-cell img[loading="lazy"] {
    height: 180px !important;
    margin-bottom: 1rem !important;
  }
}

/* --- Keyword Parallax Sections --- */
@media (max-width: 768px) {
  .keyword-parallax {
    background-attachment: scroll !important;
    padding: 2.5rem 0 !important;
  }

  /* [FIX #5] Increase overlay for better text legibility */
  .keyword-parallax::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(29, 29, 27, 0.15);
    z-index: 0;
  }

  .keyword-parallax {
    position: relative;
  }

  .keyword-parallax .container {
    position: relative;
    z-index: 1;
  }

  .keyword-parallax h2 {
    font-size: clamp(1.4rem, 5.5vw, 1.8rem) !important;
    margin-bottom: 0.5rem !important;
    padding: 0;
  }

  .keyword-parallax p {
    font-size: 0.975rem !important;
    line-height: 1.5 !important;
    padding: 0;
  }
}

/* --- Chrome Extension Section --- */
@media (max-width: 768px) {
  #homeView .section[aria-labelledby="extension-title"] {
    margin: 0 1.25rem 0.5rem !important;
    padding: 2rem 1.25rem !important;
  }

  /* [FIX #9] Hide second image, make first full-width */
  .ext-screenshot-secondary {
    display: none !important;
  }

  .ext-screenshot-primary {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --- FAQ Section --- */
@media (max-width: 640px) {
  .bento-cell[style*="padding: 4rem"] {
    padding: 2.5rem 1.25rem !important;
  }
}

/* --- CTA Sections (inline between content) --- */
.mobile-cta-strip {
  display: none;
}

@media (max-width: 768px) {
  /* [FIX #4] CTA strips with accent border and distinct background */
  .mobile-cta-strip {
    display: block;
    text-align: center;
    padding: 1.75rem 1.25rem;
    background: var(--bg-tertiary);
    border-top: 2px solid var(--accent);
    border-radius: var(--radius-lg);
    margin: 0.5rem 1.25rem;
  }

  .mobile-cta-strip .btn {
    width: 100%;
    max-width: 100%;
    font-size: 1rem;
    padding: 0.875rem 1.5rem;
    min-height: 48px;
    font-weight: 700;
    border-radius: var(--radius-md);
  }

  .mobile-cta-strip p {
    margin-top: 0.625rem;
    font-size: 0.8rem;
    color: var(--text-muted);
  }
}

/* --- Final CTA Section --- */
@media (max-width: 768px) {
  .bento-cell.bento-span-12.bento-yellow {
    padding: 2.5rem 1.5rem !important;
  }

  .bento-cell.bento-span-12.bento-yellow h2 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }

  .bento-cell.bento-span-12.bento-yellow p {
    font-size: 1rem !important;
  }

  .bento-cell.bento-span-12.bento-yellow .btn {
    width: 100%;
    font-size: 1.05rem !important;
    padding: 1rem 1.5rem !important;
  }
}

/* --- Footer: Clean mobile layout --- */
@media (max-width: 768px) {
  .footer {
    padding: 2.5rem 0 1.5rem !important;
    margin-top: 2rem !important;
  }

  .footer-content {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center !important;
    margin-bottom: 2rem !important;
  }

  .footer-brand {
    max-width: none !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  .footer-logo img {
    margin: 0 auto;
    display: block;
  }

  .footer-tagline {
    margin: 0 auto;
    max-width: 280px;
  }

  .footer-nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem 2rem !important;
    text-align: left !important;
  }

  .footer-nav-group {
    text-align: left !important;
  }

  .footer-nav-group h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
  }

  .footer-nav-group a {
    font-size: 0.9rem;
    padding: 0.2rem 0;
    display: block;
  }

  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1rem !important;
    padding-top: 1.5rem !important;
  }

  .footer-bottom p {
    font-size: 0.8rem !important;
  }

  .footer-platforms {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .platform-badge {
    font-size: 0.75rem !important;
    padding: 0.3rem 0.6rem !important;
  }
}

/* --- Global mobile fixes --- */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .header-content {
    padding: 0.75rem 1.25rem !important;
  }

  .footer-nav-group a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* --- Animation containers on mobile --- */
@media (max-width: 768px) {
  .step-image {
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .hero-image-container #hero-animation svg {
    width: 100% !important;
    height: 100% !important;
  }
}

/* --- Parallax: desktop only (iOS breaks with fixed attachment) --- */
@media (min-width: 769px) {
  .keyword-parallax {
    background-attachment: fixed !important;
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .mobile-cta-strip,
  .bento-cell {
    transition: none !important;
  }
}