/* =====================================================================
   KayScience — Parents page CSS  (matches KS_Parents.pdf)
   Depends on ks-common.css (tokens) + ks-home.css (shared section classes).
   Only the Parents-specific Hero + "What Your Child Gets" live here; every
   other section reuses the homepage classes verbatim.
   ===================================================================== */

.ks-parents { overflow-x: hidden; }

/* The hero is full-bleed and must sit UNDER the floating (absolute) header,
   exactly like the homepage hero. ks-common only opts .ks-hero out of the
   92px top padding, so opt .kp-hero out here too. */
.ks-scope main:has(.kp-hero) { padding-top: 0; }

/* =====================================================================
   1. HERO
   ===================================================================== */
.kp-hero {
  position: relative;
  /* white top-left (behind the logo) fading into the lavender→blue→mint band,
     sampled from the PDF. A soft white bottom fade meets the white body. */
  background:
    linear-gradient(to bottom, rgba(255,255,255,0) 88%, #ffffff 100%),
    linear-gradient(105deg, #f6f4fd 0%, #ece9fb 16%, #cfe1f2 52%, #a7e6d6 100%);
  overflow: hidden;
}
.kp-hero::before {                       /* faint large glow toward the centre */
  content: ""; position: absolute; top: -30%; left: 4%;
  width: 1040px; height: 1040px; border-radius: 50%;
  background: radial-gradient(circle at 42% 42%, rgba(255,255,255,.45), rgba(200,230,245,.10) 55%, transparent 68%);
  pointer-events: none;
}
.kp-hero__inner {
  position: relative; z-index: 1;
  max-width: 1320px; margin: 0 auto;
  padding: 132px 26px 0;                 /* top clears the floating header pill */
  display: grid; grid-template-columns: 1.02fr 1.15fr; align-items: end; gap: 24px;
}
.kp-hero__content { max-width: 560px; padding: 34px 0 76px; }
.kp-hero h1 {
  font-weight: 600;
  font-size: clamp(34px, 3.9vw, 50px);
  line-height: 1.16;
  color: var(--ks-navy);
  margin: 0 0 22px;
}
.kp-hero h1 .a-teal   { color: var(--ks-teal); }
.kp-hero h1 .a-purple { color: var(--ks-purple); }
.kp-hero__sub {
  font-weight: 600; color: var(--ks-navy);
  font-size: 20px; line-height: 1.45; margin: 0 0 16px;
}
.kp-hero__desc { color: var(--ks-navy-soft); font-size: 16.5px; line-height: 1.6; margin: 0 0 32px; max-width: 500px; }

/* ticks under the CTA — "No Credit Card Required   Cancel Anytime" */
.kp-hero__ticks {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; gap: 34px; flex-wrap: wrap;
}
.kp-hero__ticks li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .045em;
  text-transform: uppercase; color: var(--ks-navy-soft);
}
.kp-hero__ticks img.ks-tick { width: 16px; height: 16px; flex: 0 0 auto; }

/* ----- media (students photo bleeds to the bottom) + floating cards ----- */
.kp-hero__media { position: relative; align-self: end; }
.kp-hero__media img { width: 100%; height: auto; display: block; margin-left: auto; }

/* shared floating-card look */
.kp-card {
  position: absolute; z-index: 3;
  background: #fff; border-radius: 20px;
  box-shadow: 0 18px 40px rgba(72, 72, 168, .16);
  padding: 18px 22px;
}
/* Confidence — top right */
.kp-card--confidence { top: 8%; right: -18px; text-align: center; width: 168px; }
.kp-card__label { color: var(--ks-navy-soft); font-size: 14px; font-weight: 500; margin: 0 0 10px; }
.kp-ring {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 12px;
  background: conic-gradient(var(--ks-teal) 0 76%, #e4f1ee 76% 100%);
  display: flex; align-items: center; justify-content: center;
}
.kp-ring__hole {
  width: 72px; height: 72px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 22px; color: var(--ks-navy);
}
.kp-card__trend { color: var(--ks-teal); font-size: 13.5px; font-weight: 600; }
.kp-card__trend span { color: var(--ks-navy-soft); font-weight: 500; }

/* Mock Score — lower right */
.kp-card--mock { bottom: 16%; right: -8px; width: 176px; }
.kp-card--mock .kp-card__label { text-align: left; margin-bottom: 6px; line-height: 1.3; }
.kp-card__mockrow { display: flex; align-items: center; gap: 10px; }
.kp-card__big { font-weight: 700; font-size: 30px; color: var(--ks-navy); margin: 0; }
.kp-card__squiggle { width: 46px; height: 18px; color: var(--ks-teal); flex: 0 0 auto; }

/* =====================================================================
   2. WHAT YOUR CHILD GETS  (dashboard image left, 2-col tick list right)
   ===================================================================== */
.kp-gets { padding: 60px 0 70px; }
.kp-gets__inner {
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 54px;
}
.kp-gets__media {
  background: linear-gradient(150deg, #e9f7f2 0%, #eef1fb 100%);
  border-radius: 26px; padding: 30px;
}
.kp-gets__media img { width: 100%; height: auto; border-radius: 12px; }
.kp-gets__content .ks-eyebrow { margin-bottom: 12px; }
.kp-gets__content h2 { margin-bottom: 26px; }
.kp-gets__checks {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; margin-bottom: 30px;
}
.kp-gets__checks ul { list-style: none; margin: 0; padding: 0; }
.kp-gets__checks li {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 18px; color: var(--ks-navy-soft); font-size: 16px;
}
.kp-gets__checks li img.ks-tick { width: 20px; height: 20px; margin-top: 3px; flex: 0 0 auto; }

/* =====================================================================
   7. FEATURE SECTION HEADING  (above the reused .ks-features grid)
   ===================================================================== */
.kp-manage__head { text-align: center; max-width: 900px; margin: 0 auto 46px; padding: 30px 0 0; }
.kp-manage__head h2 { margin: 0; }
.kp-manage__head h2 .a-teal { color: var(--ks-teal); }

/* The parents-* banner icons are a very light teal that washes out against the
   equally light banner gradient. Darken + saturate them (scoped to Parents only,
   so the homepage feature icons are untouched) so they read like the PDF. */
.ks-parents .ks-feature__banner img { filter: brightness(.78) saturate(1.55) contrast(1.08); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 992px) {
  .kp-hero__inner { grid-template-columns: 1fr; padding-top: 118px; }
  .kp-hero__content { padding-bottom: 20px; max-width: 620px; }
  .kp-hero__media { max-width: 560px; margin: 0 auto; }
  .kp-card--confidence { right: 4px; }
  .kp-card--mock { right: 8px; }
  .kp-gets__inner { grid-template-columns: 1fr; gap: 34px; }
  .kp-gets__media { order: -1; }
}
@media (max-width: 620px) {
  .kp-gets__checks { grid-template-columns: 1fr; gap: 0; }
  .kp-card { transform: scale(.86); }
  .kp-card--confidence { top: 2%; right: -6px; }
  .kp-card--mock { bottom: 8%; right: -4px; }
  .kp-hero h1 { font-size: 32px; }
}