/* ===== Mobile / tablet ===== */
@media (max-width: 900px) {
  /* dc-runtime sets height:100% which fights long pages + sticky nav */
  html, body {
    height: auto !important;
    min-height: 100% !important;
    /* do NOT set overflow-x here — in RTL it clips the logo side of the nav */
    overflow-x: visible;
  }
  #dc-root,
  #dc-root > .sc-host {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
  }
  img, video { max-width: 100%; height: auto; }

  /* Contain horizontal bleed in content sections only */
  #hero, #calendar, #learns, #organic, #ads, #landing,
  #cta-band, #testimonials, #about, #faq, #contact,
  footer[data-screen-label="Footer"],
  [data-screen-label="Product block"] {
    overflow-x: hidden;
  }

  header[data-screen-label="Nav"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 100 !important;
    padding-top: env(safe-area-inset-top, 0px);
    overflow: visible !important;
  }
  [data-nav-spacer] {
    height: calc(60px + env(safe-area-inset-top, 0px)) !important;
  }
  header[data-screen-label="Nav"] nav {
    display: flex !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  header[data-screen-label="Nav"] [data-nav-links],
  header[data-screen-label="Nav"] [data-nav-links] a {
    display: none !important;
  }
  header[data-screen-label="Nav"] nav > div[style*="flex: 1"] { display: none !important; }
  header[data-screen-label="Nav"] a[href="#hero"] {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  header[data-screen-label="Nav"] a[href="#hero"] img {
    height: 28px !important;
    width: auto !important;
    max-width: 64px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  [data-nav-actions] {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
  }
  [data-nav-actions] a {
    padding: 8px 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    flex: 0 0 auto !important;
  }

  #hero > div {
    padding: 56px 18px 56px !important;
    min-height: auto !important;
    justify-items: center !important;
    gap: 28px !important;
  }
  #hero [style*="margin-inline-start: 4%"] {
    margin-inline-start: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  #hero img[alt="Campy"] {
    height: 72px !important;
    width: auto !important;
    max-width: 180px !important;
  }
  #hero h1 {
    font-size: clamp(28px, 8.2vw, 40px) !important;
    text-align: center !important;
  }
  #hero a[href="/register"] {
    font-size: 16px !important;
    padding: 14px 28px !important;
  }
  #hero [style*="grid-column: 1 / -1"] {
    gap: 10px !important;
    margin-top: 24px !important;
  }
  #hero [style*="grid-column: 1 / -1"] > span {
    width: 44px !important;
    height: 44px !important;
  }
  #hero [style*="grid-column: 1 / -1"] svg {
    width: 28px !important;
    height: 28px !important;
  }

  #calendar {
    padding: 72px 18px !important;
  }
  #calendar > div[style*="width: 489px"],
  #calendar > div[style*="height: 266px"] {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }
  #calendar [style*="position: absolute"][style*="left: -405px"],
  #calendar [style*="left: -405px"] {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
  }
  #calendar h2 {
    width: 100% !important;
    height: auto !important;
    font-size: clamp(28px, 9vw, 42px) !important;
  }
  #calendar p {
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    max-width: 100% !important;
    font-size: 16px !important;
  }

  #learns, #organic, #ads, #landing, #cta-band, #testimonials, #about, #faq, #contact {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  #learns, #organic, #ads { padding-top: 64px !important; padding-bottom: 64px !important; }
  #cta-band { padding: 80px 18px !important; }
  #testimonials { padding: 72px 18px !important; }
  [data-testimonials-grid] {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    justify-items: center !important;
  }
  #testimonials [data-testimonial] {
    width: min(100%, 340px) !important;
  }
  #testimonials video,
  #testimonials img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
  }
  #about { padding: 72px 18px 48px !important; }
  #pricing { padding: 0 18px 72px !important; }
  #faq { padding: 0 18px 72px !important; }
  #contact { padding: 72px 18px !important; }
  footer[data-screen-label="Footer"] { padding: 48px 18px 24px !important; }

  #learns > div,
  #organic > div,
  #ads > div,
  #landing > div,
  #about > div,
  #contact > div,
  [style*="grid-template-columns: repeat(3"],
  footer[data-screen-label="Footer"] > div {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  #about h2 {
    width: 100% !important;
    height: auto !important;
  }
  #about img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    top: auto !important;
  }

  #learns [style*="order: 1"],
  #learns [style*="order: 2"],
  #organic [style*="order: 1"],
  #organic [style*="order: 2"],
  #landing [style*="order: 1"],
  #landing [style*="order: 2"] {
    order: unset !important;
  }

  #learns [style*="order: 1"] {
    display: grid !important;
    justify-items: center !important;
    text-align: center !important;
  }
  #learns h2, #organic h2, #ads h2, #landing h2 {
    width: 100% !important;
    height: auto !important;
    font-size: clamp(26px, 7vw, 36px) !important;
    text-align: center !important;
  }
  #learns p, #organic p, #ads p {
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    max-width: 100% !important;
    font-size: 16px !important;
    text-align: center !important;
  }
  #learns [data-campy-green-logo],
  #learns span[role="img"] {
    width: min(200px, 64vw) !important;
    height: 62px !important;
    left: auto !important;
    top: auto !important;
    margin: 0 auto 8px !important;
    position: static !important;
  }
  #learns img, #organic img, #ads img, #landing img,
  #learns video, #ads video, #landing video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  #cta-band a[href="/register"] {
    font-size: 16px !important;
    padding: 14px 28px !important;
  }

  #faq [aria-hidden="true"] > span { display: none !important; }
  #faq > div { padding-top: 48px !important; }

  #contact [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  footer[data-screen-label="Footer"] {
    text-align: center;
  }
}

@media (max-width: 480px) {
  [data-nav-actions] a[href="#contact"],
  [data-nav-actions] a[href="/login"] {
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
  #hero img[alt="Campy"] {
    height: 56px !important;
    max-width: 140px !important;
  }
}