/* ============================================================
   OPTION C: "Fun, playful"
   White and pale sky grounds, a brighter friendly blue, a soft
   sunny yellow as a small accent (tags, dots, one underline),
   wavy section edges, rounder corners and pill buttons.
   Red stays on buttons + "excited" only. No green.
   New for this option only (not yet in GL-003): brighter blue
   #2D74D8 (white text 4.6:1) + deep #1F5FB8 + footer #1B4C8F,
   sky tints #F2F8FF / #E3F0FF / #D6E9FF, soft yellows
   #FFF3C2 / #FFE68F. #FFD23C is the GL-003 sticker yellow.
   ============================================================ */

:root {
  --blue: #2d74d8;
  --blue-deep: #1f5fb8;
  --navy: #1b4c8f;
  --sky: #f2f8ff;
  --sky-2: #e3f0ff;
  --sky-3: #d6e9ff;
  --sun: #ffd23c;
  --sun-mid: #ffe68f;
  --sun-soft: #fff3c2;
  --cream: var(--sky);
  --cream-deep: var(--sky-2);
  --cream-soft: #f7fbff;
  --line: #d9e6f5;
  --ink-soft: #4f5b6d;
  --acc-orange: #ffd23c;
  --acc-teal: #2d74d8;
  --acc-blue: #2d74d8;
  --acc-yellow: #ffd23c;
  --radius: 18px;
  --wave-h: clamp(24px, 4vw, 56px);
}

body { background: #fff; }
.pcard, .split__media { --panel: var(--blue) !important; }

/* ---------- buttons: friendly pills ---------- */
.btn { border-radius: 100px; }
.btn--outline { border: 2.5px solid var(--blue); color: var(--blue); }
.btn--outline:hover { background: var(--blue); color: #fff; }

/* eyebrows get a little sunny dot */
.eyebrow::before, .chero__eyebrow::before {
  content: ""; display: inline-block; width: .6em; height: .6em; border-radius: 50%;
  background: var(--sun); margin-right: .5em; vertical-align: .08em;
}

/* ---------- NAV ---------- */
.nav { border-radius: 22px; box-shadow: 0 8px 28px rgba(45,116,216,.12); }
.nav__pill { border-radius: 100px; }
.nav__icon { border-radius: 50%; background: var(--sky-2); color: var(--blue); }

/* ---------- HERO: soft sky, yellow wavy underline on "excited" ---------- */
.chero {
  background: radial-gradient(120% 90% at 50% 15%, #ffffff 0%, var(--sky) 50%, var(--sky-2) 80%);
  background-color: var(--sky-2);
}
/* two small doodle shapes, kept in the text column so they never sit behind Sunny or Moody */
/* left: never closer than 24px to Moody's frame (fixes the touch around 820-1000px wide) */
.chero::before {
  width: 64px; height: 64px; top: 17%;
  left: min(calc(50% + 190px), calc(100% - clamp(-28px, 0.5vw, 40px) - clamp(190px, 23vw, 330px) - 88px));
  background: var(--sun-mid); box-shadow: none; opacity: .9;
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
}
.chero::after {
  width: 40px; height: 40px; top: auto; bottom: 22%; right: auto;
  left: max(calc(50% - 250px), calc(clamp(-28px, 0.5vw, 40px) + clamp(190px, 23vw, 330px) + 24px));
  background: transparent; border: 6px solid var(--sky-3); box-shadow: none; opacity: 1;
}
.chero h1 .hl {
  text-decoration: underline wavy var(--sun);
  text-decoration-thickness: .075em; text-underline-offset: .14em; text-decoration-skip-ink: none;
}
@media (max-width: 820px) {
  .chero::before { width: 40px; height: 40px; top: 12%; left: calc(50% + 70px); }
  .chero::after { display: none; }
}
@media (max-width: 540px) {
  .chero__inner { background: radial-gradient(80% 60% at 50% 46%, rgba(247,251,255,.95) 40%, transparent 72%); border-radius: 28px; }
}

/* wave 1: hero into white trust */
.chero + .wave { background: var(--sky-2) !important; margin-bottom: -1px; }
.chero + .wave path { fill: #fff; }

/* ---------- shared wave helpers (bottom edge, fill = next section) ---------- */
.trust, .programs--grid, .problem2, section[data-screen-label="For parents"], .wall { position: relative; }
.trust::after, .programs--grid::after, .problem2::after, section[data-screen-label="For parents"]::after, .wall::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--wave-h);
  pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%;
}
.trust { padding-bottom: calc(clamp(2rem, 1.5rem + 2vw, 3.25rem) + var(--wave-h)); }
.trust::after, .problem2::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,90 L0,40 C240,90 480,90 720,55 C960,20 1200,20 1440,55 L1440,90 Z' fill='%23f2f8ff'/%3E%3C/svg%3E"); }
.programs--grid::after, .wall::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,90 L0,50 C200,15 440,10 700,45 C960,80 1220,70 1440,35 L1440,90 Z' fill='%23ffffff'/%3E%3C/svg%3E"); }
section[data-screen-label="For parents"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,90 L0,40 C240,90 480,90 720,55 C960,20 1200,20 1440,55 L1440,90 Z' fill='%23e3f0ff'/%3E%3C/svg%3E"); }
.programs--grid { padding-bottom: calc(clamp(2rem, 1.5rem + 2vw, 3rem) + var(--wave-h)); }
.problem2 { padding-bottom: calc(var(--pad-y) + var(--wave-h)); }
section[data-screen-label="For parents"] { padding-bottom: calc(var(--pad-y) + var(--wave-h)); }

/* ---------- TRUST: white, chips with round icon badges ---------- */
.trust { background: #fff; }
.trust__chip { border: 2px solid var(--line); }
.trust__chip svg {
  width: 1.75em; height: 1.75em; padding: .3em; border-radius: 50%;
  background: var(--sky-2); color: var(--blue);
}
.trust__chip.c-teal svg { background: var(--sky-2); color: var(--blue); }
.trust__chip.c-orange svg { background: var(--sun); color: var(--ink); }
.trust__chip { padding: .45rem 1.1rem .45rem .5rem; }
.trust__divider { background: var(--line); }
.reviews-head .count {
  display: inline-block; font-family: var(--cond); font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; font-size: .85rem; color: var(--blue); background: var(--sky-2);
  padding: .4rem 1rem; border-radius: 100px;
}

/* ---------- PROGRAMS: pale sky ground, round cards, yellow tags ---------- */
.pcard { border: none; border-radius: 24px; box-shadow: 0 10px 30px rgba(45,116,216,.12); }
.pcard:hover { box-shadow: 0 18px 40px rgba(45,116,216,.18); }
.pcard__media { margin: 10px 10px 0; border-radius: 16px; height: 186px; }
.pcard__lvl {
  align-self: center; background: var(--sun-soft); color: var(--ink);
  padding: .3rem .75rem; border-radius: 100px; margin-bottom: .55rem; font-weight: 700;
}
.pcard__badge { background: var(--sun); color: var(--ink); border-radius: 100px; transform: rotate(-5deg); top: .9rem; left: .9rem; }

/* ---------- PROBLEM: white ---------- */

/* ---------- SOLUTION: pale sky, photo in a white frame with a sunny offset ---------- */
#about .split__body h2 > span:first-child { color: var(--ink) !important; }
#about .split__body h2 > span:last-child { color: var(--blue) !important; }
.split__media { border-radius: 28px; box-shadow: 0 0 0 8px #fff, 18px 18px 0 8px var(--sun-mid); }

/* wave 2: solution into white how-it-works */
#about + .wave { background: var(--sky) !important; margin-bottom: -1px; }
#about + .wave path { fill: #fff; }

/* ---------- HOW IT WORKS: white, blob numbers in blue / sun / sky ---------- */
.how { background: #fff !important; }
.how::before {
  content: ""; position: absolute; top: 8%; right: 5%; width: 120px; height: 120px; pointer-events: none;
  background-image: radial-gradient(var(--sky-3) 3px, transparent 3.5px); background-size: 20px 20px; opacity: .9;
}
.how__num { border-radius: 46% 54% 56% 44% / 52% 46% 54% 48%; box-shadow: 0 8px 0 rgba(45,116,216,.12); }
.how__step:nth-child(1) .how__num { background: var(--blue) !important; color: #fff; }
.how__step:nth-child(2) .how__num { background: var(--sun) !important; color: var(--ink); }
.how__step:nth-child(3) .how__num { background: var(--sky-3) !important; color: var(--blue); }

/* ---------- BIGGER PICTURE: bright blue with a wavy top and soft dots ---------- */
.wall {
  background:
    radial-gradient(circle at 7% 22%, rgba(255,255,255,.10) 0 40px, transparent 41px),
    radial-gradient(circle at 93% 70%, rgba(255,210,60,.22) 0 56px, transparent 57px),
    radial-gradient(circle at 86% 20%, rgba(255,255,255,.12) 0 12px, transparent 13px),
    radial-gradient(circle at 16% 80%, rgba(255,210,60,.22) 0 10px, transparent 11px),
    var(--blue);
  padding-bottom: calc(clamp(2.5rem, 2rem + 3vw, 4.5rem) + var(--wave-h)) !important;
}
.wall::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--wave-h) + 1px); height: var(--wave-h); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L0,30 C240,0 480,0 720,25 C960,50 1200,50 1440,20 L1440,60 Z' fill='%232d74d8'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}
.wall__head .count {
  display: inline-block; font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  font-size: .85rem; background: var(--sun); color: var(--ink); padding: .4rem 1rem; border-radius: 100px; opacity: 1;
}
.wall__head h2 span { color: var(--sun) !important; }

/* ---------- PARENTS: white, rounder card, soft yellow photo panel ---------- */
section[data-screen-label="For parents"] { background: #fff; }
.parents__card { border-radius: 28px; box-shadow: 0 14px 40px rgba(45,116,216,.14); }
.parents__media { background: var(--sun-soft); }
.parents__photo img { border-radius: 20px; }
.gift-badge { background: var(--sun); border: none; }
.parents__form input { border-radius: 100px; background: var(--sky); padding-inline: 1.3rem; }
.parents__form input:focus { border-color: var(--blue); }

/* ---------- FAQ: sky ground, each question a white rounded card ---------- */
.bg-cream-deep { background: var(--sky-2); }
.faq .acc__item {
  background: #fff; border-bottom: none !important; border-radius: 16px;
  margin-bottom: .65rem; padding-inline: 1.1rem; box-shadow: 0 4px 14px rgba(45,116,216,.07);
}
.faq .acc__q { padding-block: 1.05rem; }

/* ---------- ENQUIRY: blue with a wavy top ---------- */
.enquiry::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--wave-h) + 1px); height: var(--wave-h); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L0,30 C240,0 480,0 720,25 C960,50 1200,50 1440,20 L1440,60 Z' fill='%232d74d8'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}
#contact h2 { color: var(--sun-soft) !important; }
.scar .dot { background: var(--sun); }
.form-card { border-radius: 28px; }
.field input, .field textarea { border-radius: 14px; background: var(--sky); }
.form-success .tk { background: var(--blue); }

/* ---------- FOOTER: deep blue with a wavy top ---------- */
.footer { position: relative; background: var(--navy); color: #e3edfb; }
.footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--wave-h) + 1px); height: var(--wave-h); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L0,25 C260,55 520,55 760,30 C1000,5 1240,5 1440,30 L1440,60 Z' fill='%231b4c8f'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}
.footer p { color: rgba(255,255,255,.84); }
.footer a { color: #fff; }
.footer a:hover { color: var(--sun); }
.footer__logo { border-radius: 18px; }
.footer__bottom { color: rgba(255,255,255,.72); border-top-color: rgba(255,255,255,.2); }

/* floating bits */
.sidetab { border-radius: 0 14px 14px 0; }
.mobilebar__btn--alt { background: var(--blue); }

@media (max-width: 600px) {
  .split__media { box-shadow: 0 0 0 6px #fff, 10px 10px 0 6px var(--sun-mid); margin-right: 10px; }
  .how::before { width: 80px; height: 80px; }
}

/* ---------- NAV on phones: logo shows small but legible ----------
   The logo PNG has wide transparent margins, so on phones it is cropped to
   the lettering inside a fixed box. The nav phone icon hides on phones only,
   because the sticky Call / Text bar at the bottom already covers calling. */
@media (max-width: 600px) {
  .nav__right .nav__icon { display: none; }
  .nav__pill { padding: .8rem .9rem; gap: .4rem; }
  .nav__right { padding-right: .25rem; }
  .nav__right .btn { padding: .8rem 1rem; }
  .nav__logo {
    --lh: 64px;
    position: relative; overflow: hidden; flex: none;
    width: calc(var(--lh) * 1.185); height: calc(var(--lh) * .735);
  }
  .nav__logo img {
    position: absolute; max-width: none; width: auto; height: var(--lh);
    left: calc(var(--lh) * -.225); top: calc(var(--lh) * -.117);
  }
}
@media (max-width: 370px) {
  .nav__logo { --lh: 54px; }
  .nav__pill { padding: .75rem .7rem; font-size: .88rem; }
  .nav__right .btn { padding: .75rem .8rem; font-size: .86rem; }
}

/* ---------- HERO: key the clips' white backdrop onto the sky ----------
   .chero__char has a z-index, so it isolates the video's own "darken" blend
   and the clip's near-white box showed as a rectangle on the sky gradient.
   Blending the whole character layer against the hero fixes that. */
.chero__char { mix-blend-mode: darken; }

/* tablet / small laptop: stack the two hero buttons so they sit between
   Sunny and Moody instead of running into Moody's arm */
@media (min-width: 821px) and (max-width: 1080px) {
  .chero__cta { flex-direction: column; align-items: center; }
}

/* ---------- PROMO BAR on phones: wrap long messages inside the arrows ---------- */
@media (max-width: 600px) {
  .promo__track { padding-inline: 42px; max-width: 100%; }
  .promo__msg {
    white-space: normal; text-align: center; justify-content: center;
    font-size: .76rem; line-height: 1.2; letter-spacing: .03em;
  }
}

/* ---------- PROBLEM: drop-cap "M" box now matches the letter, so the eyebrow
   above and the paragraph below no longer run under it (was on the live site too) */
.problem2__m { line-height: .8; margin: .1em .09em 0 0; }
/* same isolation issue as the hero: blend the whole Sunny column so her clip's
   off-white box disappears into the white section */
.problem2__charcol { mix-blend-mode: darken; }
.problem2__sunny { filter: brightness(1.12) contrast(1.1) saturate(1.02); }

/* ---------- PARENTS card on phones: stop the long gift button from forcing
   the card wider than the screen (text was being cut off on the right) ---------- */
@media (max-width: 900px) {
  .parents__card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .parents__form input { min-width: 0; flex-basis: 100%; }
  .parents__form .btn { width: 100%; white-space: normal; justify-content: center; text-align: center; }
}