/* ==================================================================
   Guided — section banding + button feel  (LOCAL PREVIEW ONLY)

   Loaded LAST, after apple.css, whose banding rules are !important.

   The top of the page ran white → white → white → white before the
   black homework panel, so six screens of scrolling had no change of
   ground at all. This alternates white and the off-white wash, keeping
   #homework as the single dark anchor.
   ================================================================== */

/* NB: `section.x` not `.x`. apple.css bands with
   `section[style*="background: rgb(255, 255, 255)"]`, which is (0,1,1) —
   a bare class is (0,1,0) and loses even with !important on both. */
section.gs-value      { background: #FFFFFF !important; }
section.gs-subjects   { background: #F5F5F7 !important; }
section#how           { background: #FFFFFF !important; }
section#homework      { background: #000000 !important; }  /* the dark band */
section#research      { background: #FFFFFF !important; }
section.gs-retention  { background: #F5F5F7 !important; }
section.gs-reviews    { background: #FFFFFF !important; }
section#ages          { background: #F5F5F7 !important; }
section.gs-values     { background: #FFFFFF !important; }
section#families      { background: #F5F5F7 !important; }
section#signup        { background: #FFFFFF !important; }

/* The tiles and the photograph sit ON the wash now. The photograph is a
   white-cyc studio shot, so without an edge it reads as a hole in the
   section rather than a picture — give it the same card treatment as the
   tiles so the two separate from the ground and match each other. */
.gs-retention .gs-ret-tile,
.gs-retention .gs-ret-photo {
  background-color: #FFFFFF !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
              0 8px 24px rgba(0, 0, 0, 0.05);
}

/* ==================================================================
   Buttons — more defined, and they answer when touched
   ================================================================== */

a.scp0,
button.scp0 {
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10),
              0 6px 18px rgba(0, 0, 0, 0.10) !important;
  transition: transform 0.16s cubic-bezier(0.22, 0.9, 0.3, 1),
              box-shadow 0.16s ease,
              filter 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}

a.scp0:hover,
button.scp0:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
              0 12px 28px rgba(0, 0, 0, 0.16) !important;
}

a.scp0:active,
button.scp0:active {
  transform: translateY(0) scale(0.985);
  filter: brightness(0.97);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14) !important;
}

a.scp0:focus-visible,
button.scp0:focus-visible {
  outline: 2px solid #0071E3;
  outline-offset: 3px;
}

/* the white "Get started" on the hero photograph needs a hairline to
   hold its edge against a light part of the picture */
section[style*="hero-bg.png"] a.scp0 {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06),
              0 2px 6px rgba(0, 0, 0, 0.18),
              0 10px 30px rgba(0, 0, 0, 0.22) !important;
}

/* ---- the segmented control and subject tabs ---- */

.gs-seg-btn {
  -webkit-tap-highlight-color: transparent;
}

.gs-seg-btn:hover:not(.is-on) { color: #1D1D1F; }
.gs-seg-btn:active { transform: scale(0.98); }

.gs-seg-btn.is-on {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
              0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

.gs-seg-btn:focus-visible,
.gs-tab:focus-visible {
  outline: 2px solid #0071E3;
  outline-offset: 2px;
  border-radius: 999px;
}

.gs-tab:hover:not(.is-on) { color: #1D1D1F; }
.gs-tab::after { transition: opacity 0.2s ease, transform 0.2s ease; }
.gs-tab:not(.is-on)::after { transform: scaleX(0.4); }
.gs-tab.is-on::after { transform: scaleX(1); }

@media (max-width: 1024px) {
  /* no hover on touch — leave the resting state alone */
  a.scp0:hover,
  button.scp0:hover { transform: none; filter: none; }
}