/* SYLON — responsive overrides (mobile/tablet). Overrides inline desktop styles via !important. */
@media (max-width: 900px) {
  header .sylon-desktop-nav, header .sylon-desktop-cta { display: none !important; }
  header .sylon-hamburger { display: flex !important; }
  header { padding: 0 20px !important; }
}
@media (min-width: 901px) {
  header .sylon-hamburger { display: none !important; }
}

html, body { max-width: 100%; overflow-x: hidden; }
* { box-sizing: border-box; }
img { max-width: 100%; }

@media (max-width: 768px) {
  section, footer > div, main { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box; }
  section > div, section > div > div { min-width: 0 !important; }
  h1, h2, p, div { overflow-wrap: break-word; word-break: break-word; }
  section[data-screen-label="Hero"] form { flex-wrap: wrap !important; }
  section[data-screen-label="Hero"] input[type="email"] { width: 100% !important; border-right: 1px solid rgba(255,255,255,0.12) !important; border-radius: 2px !important; margin-bottom: 8px; }
  section[data-screen-label="Hero"] button[type="submit"] { width: 100% !important; border-radius: 2px !important; padding: 14px !important; }

  /* Home */
  section[data-screen-label="Hero"] { flex-direction: column !important; padding-top: 110px !important; padding-bottom: 60px !important; min-height: auto !important; gap: 40px !important; }
  section[data-screen-label="Hero"] h1 { font-size: 32px !important; }
  section[data-screen-label="Hero"] > div { min-width: 0 !important; width: 100% !important; }
  section[data-screen-label="Hero"] { padding: 110px 20px 60px !important; }
  section[data-screen-label="Hero"] div[style*="width:380px"] { width: 240px !important; }
  section[data-screen-label="Problem"] p { font-size: 19px !important; }
  section[data-screen-label="Measure vs Influence"] > div:last-child { grid-template-columns: 1fr !important; }
  section[data-screen-label="Measure vs Influence"] h2 { font-size: 26px !important; }
  section[data-screen-label="Loop teaser"] > div:nth-of-type(2) { grid-template-columns: 1fr 1fr !important; row-gap: 40px !important; }
  section[data-screen-label="Loop teaser"] h2 { font-size: 26px !important; }
  section[data-screen-label="Device teaser"] { flex-direction: column !important; }
  section[data-screen-label="Device teaser"] > div { min-width: 0 !important; }
  section[data-screen-label="Credibility"] { padding: 56px 20px !important; }
  section[data-screen-label="Credibility"] > div > div:last-child { grid-template-columns: 1fr !important; row-gap: 40px !important; }
  section[data-screen-label="Credibility"] > div > div:last-child > div { border-right: none !important; }
  section[data-screen-label="Closing CTA"] h2 { font-size: 28px !important; }

  /* Technology */
  section[data-screen-label="Tech Hero"] h1 { font-size: 30px !important; }
  section[data-screen-label="Loop Diagram"] > div:nth-of-type(2) { grid-template-columns: 1fr 1fr !important; row-gap: 32px !important; }
  section[data-screen-label="Loop Diagram"] > div:nth-of-type(2) > div:before { display: none !important; }
  section[data-screen-label="Four Verbs"] > div { flex-direction: column !important; gap: 12px !important; }
  section[data-screen-label="Four Verbs"] > div > div:first-child { width: auto !important; }
  section[data-screen-label="Architecture"] > div:last-child { grid-template-columns: 1fr !important; }

  /* Device */
  section[data-screen-label="Device Hero"] { flex-direction: column !important; }
  section[data-screen-label="Device Hero"] > div { min-width: 0 !important; }
  section[data-screen-label="Device Hero"] h1 { font-size: 32px !important; }
  section[data-screen-label="Turnaround"] > div { grid-template-columns: 1fr !important; }
  section[data-screen-label="Why feet"] { grid-template-columns: 1fr !important; }
  section[data-screen-label="Zone Map"] { flex-direction: column !important; }
  section[data-screen-label="Zone Map"] > div:first-child { flex: none !important; width: 100% !important; }
  section[data-screen-label="App Teaser"] { flex-direction: column !important; }
  section[data-screen-label="Specs"] > div:nth-of-type(2) { grid-template-columns: 1fr !important; }

  /* App page phone/text rows */
  section[data-screen-label="Home Screen"],
  section[data-screen-label="Therapy Screen"],
  section[data-screen-label="Manual Screen"],
  section[data-screen-label="History Screen"] { flex-direction: column !important; margin: 40px auto !important; }

  /* Vision */
  section[data-screen-label="Vision Hero"] h1 { font-size: 28px !important; }
  section[data-screen-label="Reframe"] { grid-template-columns: 1fr !important; }
  section[data-screen-label="Mission statement"] h2 { font-size: 24px !important; }

  /* Story */
  section[data-screen-label="Story Hero"] h1 { font-size: 26px !important; }
  section[data-screen-label="Story Body"] div[style*="align-items:center;margin-top:40px"] { flex-wrap: wrap !important; }
  section[data-screen-label="Story Body"] a[href*="linkedin"] { margin-left: 0 !important; }

  /* Join */
  section[data-screen-label="Join Hero + Form"] h1 { font-size: 28px !important; }
  section[data-screen-label="What happens next"] > div:last-child { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Footer */
  footer > div:first-child { grid-template-columns: 1fr !important; gap: 40px !important; }
}

@media (max-width: 480px) {
  section[data-screen-label="Hero"] h1 { font-size: 26px !important; }
  section[data-screen-label="Tech Hero"] h1,
  section[data-screen-label="Device Hero"] h1 { font-size: 26px !important; }
  section[data-screen-label="Loop Diagram"] > div:nth-of-type(2) { grid-template-columns: 1fr !important; }
  header a[href="Join.dc.html"] span, header a[href="Join.dc.html"] { font-size: 12px !important; }
}