/* ==================================================================
   Guided — "if Apple made an AI tutor"  (LOCAL PREVIEW ONLY)

   The moves that actually make Apple pages feel like Apple pages:
     · one idea per screen, enormous vertical air
     · huge headline, semibold (never black), tracking pulled tight
     · body copy grey, short, centred, capped measure
     · product sits on white — no cards, no borders, no shadows
     · a single blue accent, used only for links and the primary action
     · colour comes from the product, never from decoration
   ================================================================== */

:root {
  --ap-ink:   #1D1D1F;   /* Apple's near-black — never pure #000 for type */
  --ap-grey:  #6E6E73;   /* secondary copy */
  --ap-blue:  #0071E3;   /* the one accent */
  --ap-hair:  #D2D2D7;   /* hairline */
  --ap-wash:  #F5F5F7;   /* the off-white band */
}

/* ---------- canvas ---------- */
body { background: #FFFFFF !important; }

section[style*="background: rgb(255, 255, 255)"],
section[style*="background: rgb(241, 237, 226)"],
section[style*="background: rgb(247, 244, 236)"] {
  background: #FFFFFF !important;
}
/* alternate one band in the off-white so the page breathes in blocks */
#families { background: var(--ap-wash) !important; }

/* ---------- rhythm ---------- */
section { padding: 130px 24px !important; }
section > div { max-width: 980px !important; margin: 0 auto !important; }

/* ---------- type ---------- */
body, section, section * {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

section h2 {
  font-size: clamp(40px, 5.2vw, 80px) !important;
  line-height: 1.05 !important;
  font-weight: 600 !important;      /* Apple is semibold, not black */
  letter-spacing: -0.022em !important;
  color: var(--ap-ink) !important;
  text-align: center !important;
  max-width: 16ch !important;
  margin: 0 auto !important;
}

section h3, section h4 {
  font-weight: 600 !important;
  letter-spacing: -0.012em !important;
  color: var(--ap-ink) !important;
}

section p {
  font-size: 21px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  letter-spacing: 0.004em !important;
  color: var(--ap-grey) !important;
  text-align: center !important;
  max-width: 660px !important;
  margin: 22px auto 0 !important;
}

/* eyebrows become a quiet accent label rather than a tracked-out rule */
section span[style*="letter-spacing: 0.18em"],
section span[style*="letter-spacing: 0.16em"],
section span[style*="text-transform: uppercase"] {
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ap-blue) !important;
  text-align: center !important;
  display: block !important;
}

/* ---------- layout: stop the two-column marketing grids ---------- */
section > div > div[style*="grid-template-columns"] {
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  text-align: center !important;
}

/* ---------- product imagery: no frame, no shadow ---------- */
section img {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 18px !important;
  margin: 56px auto 0 !important;
  display: block !important;
}

/* ---------- the one accent ---------- */
a[style*="border-radius: 999px"],
button[type="submit"] {
  background: var(--ap-blue) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 980px !important;      /* Apple's pill */
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  padding: 13px 26px !important;
}

/* ---------- "Built for children": colour blocks become quiet cards ---------- */
#families [style*="min-height: 150px"] {
  background: #FFFFFF !important;
  border-radius: 18px !important;
  min-height: 0 !important;
  border: 0 !important;
}
#families [style*="min-height: 150px"] h4 {
  color: var(--ap-ink) !important;
  font-size: 19px !important;
}
#families [style*="min-height: 150px"] > div[style*="position: absolute"] {
  position: static !important;
  opacity: 1 !important;
  background: transparent !important;
  padding-top: 0 !important;
}
#families [style*="min-height: 150px"] p {
  color: var(--ap-grey) !important;
  font-size: 15px !important;
  text-align: left !important;
  margin: 6px 0 0 !important;
}
#families [style*="min-height: 150px"] svg { stroke: var(--ap-blue) !important; }
#families [style*="grid-template-columns"] {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}

/* ---------- hairlines, not borders ---------- */
[style*="border-top: 1px solid"] { border-top-color: var(--ap-hair) !important; }
[style*="border: 1px solid"]     { border-color: var(--ap-hair) !important; }
[style*="border: 1.5px solid"]   { border-width: 1px !important; border-color: var(--ap-hair) !important; }

/* ---------- reviews block picks up the same language ---------- */
.gs-reviews { background: var(--ap-wash) !important; padding: 130px 24px !important; }
.gs-reviews-inner { max-width: 980px !important; justify-items: center; }
.gs-reviews-eyebrow {
  font-size: 17px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: var(--ap-blue) !important;
}
.gs-reviews-head {
  font-size: clamp(36px, 4.6vw, 64px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.022em !important;
  color: var(--ap-ink) !important;
  text-align: center !important;
}
.gs-review { border: 0 !important; border-radius: 18px !important; }
.gs-review-quote { color: var(--ap-ink) !important; font-size: 19px !important; }

@media (max-width: 1024px) {
  section { padding: 84px 22px !important; }
  section p { font-size: 18px !important; }
  section img { margin-top: 36px !important; }
  #families [style*="grid-template-columns"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ==================================================================
   ALTERNATING BANDS
   Apple never runs white all the way down — it breaks the page into
   white / off-white / black so each section reads as its own screen.
   ================================================================== */

/* off-white breather */
#ages { background: var(--ap-wash) !important; }

/* the black panel — product imagery pops hardest here */
#homework {
  background: #000000 !important;
}
#homework h2,
#homework h3,
#homework h4,
#homework strong { color: #F5F5F7 !important; }
#homework p { color: #A1A1A6 !important; }
#homework span[style*="text-transform: uppercase"] { color: #2997FF !important; }
#homework a { color: #2997FF !important; }
/* the two little chips in that section invert too */
#homework span[style*="border-radius: 999px"][style*="rgb(17, 17, 17)"] {
  background: #F5F5F7 !important;
  color: #1D1D1F !important;
}
#homework span[style*="border-radius: 999px"][style*="rgb(241, 237, 226)"] {
  background: #1D1D1F !important;
  color: #F5F5F7 !important;
}
#homework svg { stroke: #6E6E73 !important; }

/* reviews sit on white so the black panel stays the only dark break */
.gs-reviews { background: #FFFFFF !important; }
.gs-review { background: var(--ap-wash) !important; }

/* ==================================================================
   ONE ALIGNMENT PATTERN — centred, everywhere, no exceptions

   responsive.css (line ~280) forces `text-align:left` on mobile with
   `section [style*="text-align: center"]`, specificity (0,1,1), which
   beat the plain `section p` rules above (0,0,2). That is why the page
   read left in some places and centred in others. These selectors are
   (0,1,2) so they win, and every block now follows the same rule.
   ================================================================== */

section,
section h1[style], section h2[style], section h3[style], section h4[style],
section p[style],  section span[style], section div[style],
section [style*="text-align: center"],
section [style*="text-align: left"] {
  text-align: center !important;
}

/* the blocks themselves centre too, so text and box agree */
section div[style*="display: grid"],
section div[style*="display: flex"] {
  justify-items: center !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* the hero follows the same pattern — no second layout to remember */
section[style*="hero-bg.png"] > div,
section[style*="hero-bg.png"] > div > div {
  justify-items: center !important;
  text-align: center !important;
  margin: 0 auto !important;
}
section[style*="hero-bg.png"] h1[style] { max-width: 15ch !important; margin: 0 auto !important; }
section[style*="hero-bg.png"] p[style]  { max-width: 46ch !important; margin: 20px auto 0 !important; }
section[style*="hero-bg.png"] span[style*="letter-spacing: 0.14em"] {
  display: block !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #2997FF !important;
  margin-bottom: 14px !important;
}

/* ==================================================================
   NO IMAGERY — every picture flattens to a neutral grey block

   Done in CSS, not JavaScript, so it cannot be missed by timing: the
   carousel images are built later by responsive.js and were slipping
   through. contrast(0) removes all detail, brightness sets the tone.
   ================================================================== */
section img,
.gs-carousel img,
.gs-slide {
  filter: grayscale(1) contrast(0) brightness(1.74) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  border: 0 !important;
}
#homework img { filter: grayscale(1) contrast(0) brightness(0.22) !important; }

/* the animation is imagery too */
iframe[src*="home-to-lesson"] { visibility: hidden !important; }
iframe[src*="home-to-lesson"] + *, 
div[style*="padding-top: 73.94%"] {
  background: #E8E8ED !important;
  border-radius: 18px !important;
}

/* the logo stays as it is */
header img { filter: none !important; }

/* ==================================================================
   SCOPE THE CENTRING

   Centring belongs to section headers only. Applying it to everything
   left card titles centred, card body copy left, icons stranded in the
   middle and the cards at ragged heights. Cards and forms are
   left-aligned blocks — that is the pattern Apple uses too.
   ================================================================== */

/* ---------- trust cards ---------- */
#families div[style*="grid-template-columns"] {
  align-items: stretch !important;
  gap: 14px !important;
}
#families [style*="min-height: 150px"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  height: 100% !important;
  padding: 26px 24px !important;
  gap: 0 !important;
  background: #FFFFFF !important;
  border-radius: 18px !important;
}
#families [style*="min-height: 150px"] > div {
  padding: 0 !important;
  width: 100% !important;
  display: block !important;
}
#families [style*="min-height: 150px"] *,
#families [style*="min-height: 150px"] h4,
#families [style*="min-height: 150px"] p {
  text-align: left !important;
}
#families [style*="min-height: 150px"] h4 {
  margin: 0 0 8px !important;
  font-size: 19px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: var(--ap-ink) !important;
}
#families [style*="min-height: 150px"] p {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--ap-grey) !important;
  max-width: none !important;
}
/* the decorative line icons were sitting between title and copy */
#families [style*="min-height: 150px"] svg { display: none !important; }

/* ---------- sign-up form ---------- */
#signup form,
#signup form * { text-align: left !important; }
#signup form { justify-items: stretch !important; }
#signup label { display: block !important; }
#signup input,
#signup select { width: 100% !important; }

/* ---------- review cards ---------- */
.gs-review, .gs-review * { text-align: left !important; }
.gs-reviews-grid { align-items: stretch !important; }
.gs-review { height: 100% !important; }