/* ------------------------------------------------------------------
   Guided — responsive layer.

   The pages are authored entirely with INLINE styles (the DC runtime
   writes them onto each element), so every rule here needs !important
   and attribute selectors to win.

   Nothing here applies above 1024px: the desktop design is untouched.
   ------------------------------------------------------------------ */

/* The burger, its panel and the lightbox are injected into the DOM on
   mobile. Keep them hidden by default so a resize up to desktop never
   leaves them showing. */
.gs-burger, .gs-navpanel { display: none !important; }
.gs-lightbox { display: none; }
.gs-carousel { display: none; }

/* Tap-to-expand overlay (mobile only — the click handler ignores desktop). */
.gs-lightbox.gs-lb-open {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(17, 17, 17, 0.92);
  cursor: zoom-out;
}
.gs-lightbox.gs-lb-open img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 6px;
}

/* ============ TABLET AND BELOW ============ */
@media (max-width: 1024px) {

  html, body { max-width: 100% !important; overflow-x: hidden !important; }

  /* Every multi-column grid becomes a single column. This is what fixes
     the 840px-minimum grids that caused the horizontal overflow. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Big desktop gutters are far too wide on a narrow screen. */
  [style*="gap: 80px"], [style*="gap: 72px"], [style*="gap: 60px"],
  [style*="gap: 56px"], [style*="gap: 48px"], [style*="gap: 44px"],
  [style*="gap: 40px"] { gap: 28px !important; }

  /* Section rhythm: keep generous vertical air, tighten the sides. */
  section, header, footer {
    padding-left: 22px !important;
    padding-right: 22px !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  header { padding-top: 0 !important; padding-bottom: 18px !important; }

  /* Standalone padded wrappers (e.g. the Sign Up page shell). */
  [style*="padding: 56px"] { padding: 32px 22px !important; }
  [style*="padding: 48px 42px"] { padding: 30px 24px !important; }

  /* ---- HERO ------------------------------------------------------
     On desktop the copy sits in the left 460px and the photo fills the
     right. Stacked on a phone the copy landed ON TOP of the child's
     face, and any scrim strong enough to make it readable destroyed
     the photo. So: drop the background image, let the copy sit on
     clean cream, and re-introduce the photo underneath as a real
     block at its native 1672x940 ratio — nothing cropped, nothing
     washed out.
     ----------------------------------------------------------------- */
  [style*="min-height: 720px"] { min-height: 0 !important; }

  section[style*="hero-bg.png"] {
    display: block !important;
    background-image: none !important;
    padding-top: 0 !important;
    padding-bottom: 40px !important;
  }
  /* the desktop left-to-right fade has no purpose once the photo moves */
  section[style*="hero-bg.png"] > div[style*="position: absolute"] { display: none !important; }
  /* the copy column's desktop nudge */
  section[style*="hero-bg.png"] [style*="margin-left: -12px"] { margin-left: 0 !important; }

  /* Image FIRST, then the copy — and full-bleed, edge to edge. Negative
     margins cancel the section's side padding; no rounded corners, so it
     reads as a hero band rather than an inset card. */
  section[style*="hero-bg.png"]::before {
    content: "";
    display: block;
    width: calc(100% + 44px);
    margin: 0 -22px 30px;
    /* Taller than before: the header overlays roughly its first 100px, so
       the art needs room underneath or the top reads as cropped away. */
    aspect-ratio: 4 / 3;
    min-height: 440px;
    border-radius: 0;
    background-image: url("assets/hero-bg.png");
    background-size: cover;
    /* keep the child and her tablet in frame when the 16:9 art is cropped */
    background-position: 58% center;
    background-repeat: no-repeat;
  }

  /* Softer, shorter gradient — strong enough for the logo, but it stops
     hiding the top of the photo. */
  header {
    background: linear-gradient(to bottom,
      rgba(255,255,255,0.96) 0%,
      rgba(255,255,255,0.88) 38%,
      rgba(255,255,255,0.45) 72%,
      rgba(255,255,255,0) 100%) !important;
  }

  /* ---- FIXED MIN-HEIGHTS --------------------------------------------
     Desktop uses tall min-heights with align-items:center to balance a
     two-column row. Once stacked, that leaves a huge empty block with
     the content floating in the middle of it. Let content set height.
     -------------------------------------------------------------------- */
  [style*="min-height: 620px"] { min-height: 0 !important; align-items: start !important; }

  /* "Mastery before momentum": desktop is copy-left / brain-right, so
     stacked it read as text-then-image. Lead with the image instead. */
  [style*="min-height: 620px"] > svg { order: -1 !important; }

  /* That block uses a desktop gutter that left it visibly narrower than
     every other section once stacked (its copy started 36px further in
     than the hero's). NB: the browser serialises
     `min(1480px, calc(100% - 72px))` as `min(1480px, 100% - 72px)` —
     the inner calc() is dropped — so match on the min() instead. */
  [style*="min(1480px"] { width: 100% !important; max-width: 100% !important; }

  /* "Learning doesn't happen once": desktop is title|copy on one row with
     the retention diagram beneath. Stacked that read text-then-image and
     broke the image / text / image / text rhythm — lead with the image. */
  div:has(> img[src*="retention-example"]) { order: -1 !important; }

  /* Nav: wrapping onto three centred rows looked accidental. Keep it on
     one deliberate line that scrolls sideways if it runs long. */
  /* ---- HEADER OVER THE HERO -----------------------------------------
     The header sits on top of the hero image (pulled up by its own
     height) with a white gradient behind the logo and burger so both
     stay legible against the photo.
     -------------------------------------------------------------------- */
  header {
    position: relative !important;
    z-index: 5 !important;
    border-bottom: 0 !important;
    padding-bottom: 22px !important;
    margin-bottom: calc(-1 * var(--gs-header-h, 0px)) !important;
    background: linear-gradient(to bottom,
      rgba(255,255,255,0.97) 0%,
      rgba(255,255,255,0.92) 45%,
      rgba(255,255,255,0.72) 75%,
      rgba(255,255,255,0) 100%) !important;
  }
  /* the desktop "Join the waitlist" row — moved into the menu instead */
  header > div[style*="justify-content: flex-end"] { display: none !important; }
  /* the inline nav is replaced by the burger */
  header nav { display: none !important; }

  /* Logo lockup: left-aligned and sized for a phone bar, not a desktop
     masthead (desktop is a 56px mark with a 26px wordmark, centred). */
  header > div[style*="flex-direction: column"] {
    align-items: flex-start !important;
    gap: 0 !important;
    /* measured: the burger's centre sat 3px below the logo mark's centre */
    padding: 13px 0 0 !important;
  }
  header img[src*="icon.png"] {
    width: 34px !important;
    height: 34px !important;
  }
  header [style*="font-size: 26px"] { font-size: 17px !important; }
  header [style*="letter-spacing: 0.22em"] { font-size: 9.5px !important; }
  header a[style*="gap: 14px"] { gap: 9px !important; }

  .gs-burger {
    display: flex !important;
    position: absolute !important;
    top: 6px; right: 10px;
    width: 44px; height: 44px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 5px;
    background: transparent; border: 0; padding: 0;
    cursor: pointer; z-index: 6;
  }
  .gs-burger span {
    display: block; width: 22px; height: 2px;
    background: #111111; border-radius: 2px;
  }

  /* With the menu open the header stops overlaying the hero and simply
     pushes the page down, so the panel never sits on top of the copy. */
  header.gs-open {
    background: #FFFFFF !important;
    margin-bottom: 0 !important;
  }
  header.gs-open .gs-navpanel {
    display: grid !important;
    width: 100%;
    padding: 6px 4px 2px;
    text-align: left;
  }
  .gs-navpanel a {
    display: block;
    padding: 14px 2px;
    font-size: 16px; font-weight: 500;
    color: #111111; text-decoration: none;
    border-top: 1px solid #EDE7DA;
  }
  .gs-navpanel a.gs-navpanel-cta { color: #1E9E63; font-weight: 600; }

  /* Any flex row is allowed to wrap once it runs out of room. */
  div[style*="display: flex"] { flex-wrap: wrap !important; }

  /* Media never exceeds its container, and reads as tappable. */
  img { max-width: 100% !important; height: auto !important; }
  section img { cursor: zoom-in; }

  /* ---- RETENTION CARDS: SWIPEABLE ------------------------------------
     The flat four-in-one image is unreadable at phone width, so hide it
     and show the four cards as a snapping, swipeable row instead. Each
     card lands at ~82% of the viewport — big enough to read, with the
     next one peeking to signal that it scrolls.
     -------------------------------------------------------------------- */
  img[src*="retention-example"] { display: none !important; }

  .gs-carousel {
    display: flex !important;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* full-bleed so the cards get as much width as possible */
    margin-left: -18px;
    margin-right: -18px;
    padding: 2px 18px 6px;
  }
  .gs-carousel::-webkit-scrollbar { display: none; }
  .gs-carousel .gs-slide {
    flex: 0 0 82%;
    width: 82%;
    height: auto;
    scroll-snap-align: center;
    border-radius: 14px;
  }

  /* ---- CONSISTENT TEXT COLUMN ----------------------------------------
     Sections carry a mix of desktop max-widths in ch/px plus centred and
     left alignment, so on a phone each block started and ended at a
     different place. Give every body block the same full-width column
     as the hero copy.
     -------------------------------------------------------------------- */
  section p,
  section h1, section h2, section h3, section h4 {
    max-width: 100% !important;
  }
  section [style*="max-width: 34ch"],
  section [style*="max-width: 46ch"],
  section [style*="max-width: 56ch"],
  section [style*="max-width: 66ch"],
  section [style*="max-width: 44ch"],
  section [style*="max-width: 48ch"],
  section [style*="max-width: 18ch"],
  section [style*="max-width: 20ch"],
  section [style*="max-width: 440px"],
  section [style*="max-width: 460px"] {
    max-width: 100% !important;
  }

  /* Desktop centres some sections and left-aligns others. On a narrow
     column that reads as inconsistent, and centred paragraphs are harder
     to scan. One left-aligned column throughout. */
  section { text-align: left !important; }
  section [style*="text-align: center"] { text-align: left !important; }
  section [style*="justify-items: center"] { justify-items: start !important; }
  section [style*="align-items: center"] { align-items: start !important; }

  /* Fluid type — headline sizes only (42px and up). */
  [style*="font-size: 96px"] { font-size: 54px !important; line-height: 1.04 !important; }
  [style*="font-size: 84px"] { font-size: 48px !important; }
  [style*="font-size: 82px"] { font-size: 46px !important; }
  [style*="font-size: 66px"] { font-size: 42px !important; }
  [style*="font-size: 62px"] { font-size: 40px !important; }
  [style*="font-size: 60px"] { font-size: 38px !important; }
  [style*="font-size: 58px"] { font-size: 37px !important; }
  [style*="font-size: 56px"] { font-size: 36px !important; }
  [style*="font-size: 54px"] { font-size: 35px !important; }
  [style*="font-size: 52px"] { font-size: 34px !important; }
  [style*="font-size: 48px"] { font-size: 32px !important; }
  [style*="font-size: 42px"] { font-size: 30px !important; }
}

/* ============ PHONE ============ */
@media (max-width: 640px) {

  section, header, footer {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  header { padding-top: 0 !important; padding-bottom: 14px !important; }

  [style*="gap: 80px"], [style*="gap: 72px"], [style*="gap: 60px"],
  [style*="gap: 56px"], [style*="gap: 48px"], [style*="gap: 44px"],
  [style*="gap: 40px"], [style*="gap: 36px"], [style*="gap: 32px"] { gap: 22px !important; }

  [style*="padding: 56px"] { padding: 26px 18px !important; }
  [style*="padding: 48px 42px"] { padding: 26px 20px !important; }

  /* Side padding drops to 18px here, so the full-bleed hero band follows. */
  section[style*="hero-bg.png"]::before {
    width: calc(100% + 36px) !important;
    margin: 0 -18px 26px !important;
  }

  [style*="font-size: 96px"] { font-size: 38px !important; line-height: 1.06 !important; }
  [style*="font-size: 84px"] { font-size: 34px !important; }
  [style*="font-size: 82px"] { font-size: 33px !important; }
  [style*="font-size: 66px"] { font-size: 31px !important; }
  [style*="font-size: 62px"] { font-size: 30px !important; }
  [style*="font-size: 60px"] { font-size: 30px !important; }
  [style*="font-size: 58px"] { font-size: 29px !important; }
  [style*="font-size: 56px"] { font-size: 29px !important; }
  [style*="font-size: 54px"] { font-size: 28px !important; }
  [style*="font-size: 52px"] { font-size: 28px !important; }
  [style*="font-size: 48px"] { font-size: 27px !important; }
  [style*="font-size: 42px"] { font-size: 26px !important; }

  /* ---- "BUILT FOR CHILDREN" CARDS ------------------------------------
     Desktop hides each card's explanation behind a hover overlay. Touch
     has no hover, so on a phone those eight cards ate ~1200px of height
     while their content stayed unreachable. Two-up, auto-height, and the
     explanation shown outright.
     -------------------------------------------------------------------- */
  #families [style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  /* Still a reveal, as on desktop — but driven by tap, since touch has
     no hover. responsive.js toggles .gs-flip on the card. */
  #families [style*="min-height: 150px"] {
    min-height: 128px !important;
    cursor: pointer;
  }
  #families [style*="min-height: 150px"] > div { padding: 14px 13px !important; }
  #families [style*="min-height: 150px"] > div[style*="position: absolute"] {
    opacity: 0 !important;
    transition: opacity 0.18s ease !important;
  }
  #families [style*="min-height: 150px"].gs-flip > div[style*="position: absolute"] {
    opacity: 1 !important;
  }
  #families [style*="min-height: 150px"] h4 { font-size: 15px !important; }
  #families [style*="min-height: 150px"] p { font-size: 12.5px !important; line-height: 1.4 !important; }
  #families [style*="min-height: 150px"] svg { width: 16px !important; height: 16px !important; }

  /* Body copy eases down a step for comfortable line lengths. */
  [style*="font-size: 19px"] { font-size: 17px !important; }
  [style*="font-size: 18px"] { font-size: 16.5px !important; }

  /* ---- BUTTONS -------------------------------------------------------
     Inline styles serialise to rgb(), not hex, so a "#111111" selector
     matches nothing. Target the pill shape instead.

     Desktop pills are inline-flex and hug their text, which on a phone
     leaves them stranded at the left edge of a full-width column. Make
     the primary actions full-width tap targets with consistent spacing.
     -------------------------------------------------------------------- */
  a[style*="border-radius: 999px"],
  a[style*="border-radius: 12px"],
  button[type="submit"][style*="border-radius: 999px"],
  button[type="submit"][style*="border-radius: 12px"] {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    margin-top: 4px !important;
    box-sizing: border-box !important;
  }

  /* ...but not the little "Take a picture. -> Receive guidance." chips,
     which are spans, nor the logo lockup link. */
  header a[style*="border-radius: 999px"] { width: auto !important; }

  /* Inner blocks carrying the desktop 40px gutter would otherwise inset
     their button relative to every other CTA on the page. */
  [style*="padding: 0px 40px"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}