/* Bean Kids: the whimsy universe (owner, Oct 2026). Fairy garden: mushrooms, butterflies, flower houses, soft pastel light.
   Loaded after each kids page's own <style> and site.css, so everything here is scoped to body.kids. Palette from the owner's inspo pin. */
body.kids {
  --bg: #FFFBF5;
  --ink: #3E2F48;
  --muted: #6E5E78;
  --pink: #F8B8B9; --pink-soft: #FCE3E2; --pink-deep: #E58C93;
  --lilac: #CCB5D5; --lilac-soft: #F0E7F4;
  --peri: #A0AEDF; --peri-soft: #E5E9F8;
  --leaf: #90AD6B; --leaf-deep: #5F7D45;
  --lime: #D2DB98; --lime-soft: #F1F4DC;
  --sun: #F6DB86; --sun-soft: #FCF3D3;
  --plum: #5B4566;
  /* map the page's old variable names onto the fairy palette */
  --coral: #E58C93; --coral-soft: #FCE3E2;
  --sky: #A0AEDF; --sky-soft: #E5E9F8;
  --mint: #90AD6B; --mint-soft: #F1F4DC;
  --grape: #B396C2; --grape-soft: #F0E7F4;
  --line: #EEE3EA;
  --display: "Fredoka", "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
}
body.kids h1, body.kids h2, body.kids h3 { color: var(--plum); font-family: var(--display); font-weight: 600; letter-spacing: 0; }
body.kids h1 { font-weight: 600; }

/* sticker art helper */
body.kids .art { display: block; filter: drop-shadow(0 8px 10px rgba(91,69,102,.22)); pointer-events: none; }
body.kids .float { position: absolute; z-index: 1; animation: kfloat 7s ease-in-out infinite; }
body.kids .flutter { position: absolute; z-index: 2; animation: kflutter 9s ease-in-out infinite; }
@keyframes kfloat { 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
@keyframes kflutter { 0%,100% { transform: translate(0,0) rotate(-6deg); } 25% { transform: translate(14px,-12px) rotate(4deg); } 50% { transform: translate(-6px,-22px) rotate(-2deg); } 75% { transform: translate(-14px,-6px) rotate(6deg); } }
body.kids .twinkle { position: absolute; animation: ktwinkle 3.4s ease-in-out infinite; }
@keyframes ktwinkle { 50% { transform: scale(.7) rotate(20deg); opacity: .6; } }

/* buttons */
body.kids .btn { font-family: var(--body); font-weight: 800; }
body.kids .btn-main { background: var(--pink); color: var(--plum); box-shadow: 0 5px 0 var(--pink-deep); border: 2.5px solid var(--plum); }
body.kids .btn-main:hover { background: #FBC9CA; }
body.kids .btn-soft { background: #fff; color: var(--plum); border: 2.5px solid var(--plum); }

/* nav + logo */
body.kids .nav { background: rgba(255,251,245,.92); }
body.kids .logo { font-family: var(--display); font-weight: 600; color: var(--plum); }
body.kids .logo-mark { width: 34px; height: 40px; background: none; border-radius: 0; }
body.kids .logo-mark img { width: 34px; height: 40px; display: block; }
body.kids .logo small { background: var(--lilac); color: var(--plum); font-family: var(--body); }
body.kids .nav-links a:hover { color: var(--pink-deep); }
body.kids .lang-switch [aria-current] { background: var(--plum); color: #fff; }

/* hero: dreamy sky over a meadow */
body.kids .hero { background: linear-gradient(180deg, #E8EEFB 0%, #F4ECF8 55%, #FFFBF5 100%); padding-block: 48px 110px; overflow: visible; }
body.kids .hero::before { width: 520px; height: 520px; right: -120px; top: -140px; background: radial-gradient(circle, rgba(246,219,134,.55) 0%, rgba(246,219,134,0) 70%); }
body.kids .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 70px; background: url("/img/kids/meadow.svg") repeat-x bottom / auto 70px; z-index: 0; }
body.kids .hero .wrap { position: relative; z-index: 2; }
body.kids .sticker { background: #fff; color: var(--plum); border: 2px solid var(--lilac); }
body.kids .hero h1 .hl::after { background: var(--pink); opacity: .75; }
body.kids .hero .sub { color: var(--muted); }
body.kids .bubble-photo { border-color: #fff; background: var(--peri-soft); box-shadow: 0 24px 50px -24px rgba(91,69,102,.45); }
body.kids .say { font-family: var(--display); font-weight: 600; color: var(--plum); border: 2.5px solid var(--plum); }
body.kids .say.s1 { background: var(--peri); color: var(--plum); }
body.kids .say.s2 { background: var(--pink); color: var(--plum); }
body.kids .say.s3 { background: var(--sun); color: var(--plum); }
body.kids .say::after { border-right: 2.5px solid var(--plum); border-bottom: 2.5px solid var(--plum); }
body.kids .star { color: var(--sun); }

/* why speaking: soft lilac garden instead of the dark band */
body.kids .promise { background: linear-gradient(180deg, var(--lilac-soft), #F7F1F9); color: var(--ink); }
body.kids .promise h2 { color: var(--plum); }
body.kids .promise h2 em { color: var(--pink-deep); }
body.kids .promise .head p { color: var(--muted); }
body.kids .col.no { background: #fff; border: 2.5px dashed var(--lilac); }
body.kids .col.no li { color: var(--muted); }
body.kids .col.no li::before { color: var(--pink-deep); }
body.kids .col.yes { background: var(--lime-soft); border: 2.5px solid var(--leaf); }
body.kids .col.yes li::before { content: "✿"; color: var(--leaf-deep); }

/* feature cards with a sticker hanging over the corner */
body.kids .feats { gap: 44px 24px; padding-top: 26px; }
body.kids .feat { border-radius: 32px 32px 32px 10px; padding-top: 34px; }
body.kids .feat h3 { padding-right: 70px; }
body.kids .feat .ico { position: absolute; top: -34px; right: -12px; width: 96px; height: 96px; background: none; border-radius: 0; margin: 0; transform: rotate(8deg); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
body.kids .feat:nth-child(even) .ico { transform: rotate(-8deg); }
body.kids .feat:hover .ico { transform: rotate(0) scale(1.08) translateY(-3px); }
body.kids .feat .ico img { width: 100%; height: 100%; }
body.kids .feat p { color: var(--muted); }
body.kids .f1 { background: var(--peri-soft); } body.kids .f2 { background: var(--pink-soft); } body.kids .f3 { background: var(--lime-soft); }
body.kids .f4 { background: var(--lilac-soft); } body.kids .f5 { background: var(--sun-soft); } body.kids .f6 { background: #FBEDE3; }

/* lesson peek */
body.kids .peek { background: var(--peri-soft); }
body.kids .wave path { fill: var(--peri-soft); }
body.kids .peek-photo { border-color: #fff; }
body.kids .timeline li { border: 2px solid #fff; }
body.kids .timeline .min { background: var(--pink); color: var(--plum); border: 2.5px solid var(--plum); box-shadow: 0 4px 0 var(--pink-deep); border-radius: 50% 50% 14px 14px; min-width: 46px; text-align: center; }

/* reviews */
body.kids #reviews { background: var(--pink-soft) !important; }
body.kids .review { border-color: #fff; border-radius: 32px 32px 32px 10px; }
body.kids .who .av { font-family: var(--display); }

/* price */
body.kids .price { background: linear-gradient(180deg, var(--lime-soft), var(--sun-soft)); }
body.kids .price-box { border-color: var(--plum); box-shadow: 0 8px 0 var(--plum); border-radius: 44px; position: relative; overflow: visible; }
body.kids .ticket { background: var(--lilac-soft); }
body.kids .ticket .credit { background: #fff; color: var(--leaf-deep); }
body.kids .tag { font-family: var(--body); }

/* faq */
body.kids .faq details { border-color: var(--line); }
body.kids .faq summary::after { background: var(--pink); color: var(--plum); font-family: var(--display); }

/* closing */
body.kids .closing-box { background: linear-gradient(160deg, var(--peri-soft) 0%, var(--lilac-soft) 55%, var(--pink-soft) 100%); border: 2.5px solid var(--lilac); overflow: visible; }
body.kids .closing-box h2 { color: var(--plum); }
body.kids .closing-box p, body.kids .wa-num { color: var(--muted); }
body.kids .wa-num b { color: var(--plum); }
body.kids .copy { background: #fff; color: var(--plum); }
body.kids .closing-box .btn-main { background: var(--pink); color: var(--plum); box-shadow: 0 5px 0 var(--pink-deep); }
body.kids .closing-box .btn-soft { color: var(--plum); border-color: var(--plum); background: #fff; }
body.kids .closing-box .dot { display: none; }

/* sticky phone button */
body.kids .mobile-cta { background: rgba(255,251,245,.96); }

/* ===== Kids hub (/kids/): every language ===== */
body.kids .klangs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 20px; padding-top: 24px; }
body.kids .klang { position: relative; display: grid; gap: 6px; justify-items: start; padding: 26px 22px 22px; border-radius: 30px 30px 30px 10px; background: #fff; border: 2.5px solid var(--line); color: var(--ink); transition: transform .2s, border-color .2s; min-width: 0; }
body.kids .klang:hover { transform: translateY(-4px) rotate(-.6deg); border-color: var(--lilac); }
body.kids .klang .kflag { position: absolute; top: -18px; right: 14px; width: 58px; height: 43px; object-fit: cover; border-radius: 9px; border: 4px solid #fff; box-shadow: 0 10px 18px -10px rgba(91,69,102,.6); transform: rotate(7deg); }
body.kids .klang:nth-child(even) .kflag { transform: rotate(-6deg); }
body.kids .klang .hi { font-family: var(--display); font-size: 1.7rem; font-weight: 600; color: var(--plum); line-height: 1.1; padding-right: 54px; }
body.kids .klang b { font-size: 1.05rem; }
body.kids .klang .go { margin-top: 6px; font-weight: 800; font-size: .9rem; color: var(--pink-deep); }
body.kids .klang:nth-child(4n+1) { background: var(--pink-soft); border-color: var(--pink-soft); }
body.kids .klang:nth-child(4n+2) { background: var(--lilac-soft); border-color: var(--lilac-soft); }
body.kids .klang:nth-child(4n+3) { background: var(--peri-soft); border-color: var(--peri-soft); }
body.kids .klang:nth-child(4n+4) { background: var(--lime-soft); border-color: var(--lime-soft); }
body.kids .klangs-note { text-align: center; margin-top: 30px; color: var(--muted); font-weight: 700; }
body.kids .klangs-note a { color: var(--pink-deep); text-decoration: underline; text-underline-offset: 3px; }
body.kids .garden { background: linear-gradient(180deg, #FFFBF5, var(--lime-soft)); }

@media (max-width: 920px) {
  body.kids .klangs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.kids .float, body.kids .flutter { transform: scale(.75); }
}
@media (max-width: 600px) {
  body.kids .feat .ico { width: 78px; height: 78px; top: -28px; right: -4px; }
  body.kids .feats { gap: 40px; }
  body.kids .klang { padding: 24px 16px 18px; }
  body.kids .klang .hi { font-size: 1.25rem; padding-right: 0; margin-top: 8px; }
  body.kids .klang .go { font-size: .82rem; white-space: nowrap; }
  body.kids .klang .kflag { width: 48px; height: 36px; right: 10px; }
  body.kids .hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.kids .float, body.kids .flutter, body.kids .twinkle { animation: none; }
}
body.kids main { overflow-x: clip; }

/* footer, fairy style */
body.kids .site-foot { background: var(--lilac-soft); border-top: 0; color: var(--muted); }
body.kids .site-foot .sf-logo, body.kids .site-foot h4 { color: var(--plum); font-family: var(--display); }
body.kids .site-foot .sf-logo span { background: none; width: auto; height: auto; }
body.kids .site-foot .sf-bottom { border-top-color: rgba(91,69,102,.15); }

/* ===== Animated friends: a walking baby dinosaur and a flying baby dragon ===== */
body.kids .dino-walk { position: absolute; left: 0; bottom: 30px; z-index: 3; width: 150px; animation: dino-path 30s linear infinite; pointer-events: none; }
body.kids .dino-bob { animation: dino-bob .5s ease-in-out infinite alternate; }
body.kids .dino { display: block; width: 150px; height: auto; filter: drop-shadow(0 8px 6px rgba(91,69,102,.18)); overflow: visible; }
body.kids .dino .leg { transform-box: fill-box; transform-origin: 50% 0; animation: dino-step .5s ease-in-out infinite alternate; }
body.kids .dino .back-near, body.kids .dino .front-far { animation-direction: alternate-reverse; }
body.kids .dino .tail { transform-box: fill-box; transform-origin: 100% 60%; animation: dino-tail 1s ease-in-out infinite alternate; }
body.kids .dino .eye, body.kids .dragon .eye { transform-box: fill-box; transform-origin: center; animation: blink 4.5s infinite; }
@keyframes dino-path {
  0% { transform: translateX(-170px) scaleX(1); }
  47% { transform: translateX(calc(100vw + 10px)) scaleX(1); }
  50% { transform: translateX(calc(100vw + 10px)) scaleX(-1); }
  97% { transform: translateX(-170px) scaleX(-1); }
  100% { transform: translateX(-170px) scaleX(1); }
}
@keyframes dino-bob { to { transform: translateY(-4px); } }
@keyframes dino-step { from { transform: rotate(16deg); } to { transform: rotate(-16deg); } }
@keyframes dino-tail { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

body.kids .dragon-fly { position: absolute; left: 0; top: -58px; z-index: 3; width: 130px; animation: dragon-path 34s linear infinite; pointer-events: none; }
body.kids .dragon-bob { animation: dragon-bob 2.4s ease-in-out infinite alternate; }
body.kids .dragon { display: block; width: 130px; height: auto; filter: drop-shadow(0 12px 10px rgba(91,69,102,.18)); overflow: visible; }
body.kids .dragon .wing { transform-box: fill-box; transform-origin: 30% 100%; animation: flap .4s ease-in-out infinite alternate; }
body.kids .dragon .wing.far { animation-delay: -.08s; }
@keyframes dragon-path {
  0% { transform: translateX(calc(100vw + 20px)) scaleX(-1); }
  48% { transform: translateX(-160px) scaleX(-1); }
  50% { transform: translateX(-160px) scaleX(1); }
  98% { transform: translateX(calc(100vw + 20px)) scaleX(1); }
  100% { transform: translateX(calc(100vw + 20px)) scaleX(-1); }
}
@keyframes dragon-bob { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(26px) rotate(3deg); } }
@keyframes flap { from { transform: scaleY(1) rotate(0); } to { transform: scaleY(.45) rotate(-8deg); } }
@media (max-width: 600px) {
  body.kids .dino-walk, body.kids .dino { width: 110px; }
  body.kids .dragon-fly, body.kids .dragon { width: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  body.kids .dino-walk { animation: none; left: 6%; }
  body.kids .dragon-fly { animation: none; left: auto; right: 6%; }
  body.kids .dino-bob, body.kids .dragon-bob, body.kids .dino .leg, body.kids .dino .tail, body.kids .dragon .wing, body.kids .dino .eye, body.kids .dragon .eye { animation: none; }
}