/* pylotstudio home: Kids Zone section (full-test kz1). Builds on styles.css tokens. Bright kids accents; text on bright fills is ink.
   All motion is off under prefers-reduced-motion. */
.kz-section { --kz-sun: #ffd23f; --kz-sky: #4cc3ff; --kz-pink: #ff7eb6; --kz-grape: #a98bff; --kz-mint: #5fe0b0; --kz-round: ui-rounded, "SF Pro Rounded", "Nunito", var(--sans); --kz-bounce: cubic-bezier(.34,1.56,.64,1); }
.kz-panel { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: clamp(24px, 4vw, 44px); padding: clamp(28px, 5vw, 64px); border-radius: 32px; background: var(--kz-sun); color: var(--ink); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
@media (min-width: 960px) { .kz-panel { grid-template-columns: 1.1fr 1fr; align-items: center; } .kz-teasers { grid-column: 1 / -1; } }
.kz-blob { position: absolute; z-index: -1; border-radius: 50%; }
.kz-blob-1 { width: 320px; height: 320px; right: -90px; top: -110px; background: var(--kz-sky); opacity: .55; }
.kz-blob-2 { width: 160px; height: 160px; left: 38%; bottom: -70px; background: var(--kz-pink); opacity: .45; }
.kz-blob-3 { width: 70px; height: 70px; left: -20px; top: 40%; background: var(--lime); }
.kz-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 800 .82rem/1 var(--kz-round); letter-spacing: .12em; text-transform: uppercase; }
.kz-badge { display: inline-flex; padding: .38em .8em; border-radius: 999px; background: var(--ink); color: var(--lime); letter-spacing: .08em; }
.kz-section h2 { font-family: var(--kz-round); font-weight: 900; font-size: clamp(2.2rem, 5.2vw, 4rem); line-height: .98; letter-spacing: -0.03em; margin: 0 0 16px; color: var(--ink); }
.kz-section h2 em { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -0.01em; }
.kz-lede { font-size: clamp(1.02rem, 1.5vw, 1.15rem); max-width: 34em; margin: 0 0 24px; color: var(--ink); }
.kz-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.kz-btn-ink { background: var(--ink); color: var(--lime); border: 2px solid var(--ink); }
.kz-btn-ink:hover { background: #22261f; color: var(--lime); }
.kz-btn-cream { background: #fffdf8; color: var(--ink); border: 2px solid var(--ink); }
.kz-btn-cream:hover { background: #fff; color: var(--ink); }
.kz-section .btn:focus-visible, .kz-pylo:focus-visible, .kz-crew-btn:focus-visible, .kz-teaser a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px #fffdf8; }

/* Stage: Pylo + crew */
.kz-stage { position: relative; display: grid; justify-items: center; gap: 10px; }
.kz-bubble { position: relative; margin: 0; max-width: 92%; padding: 10px 16px; border-radius: 18px; background: #fffdf8; border: 2px solid var(--ink); font: 850 1.05rem/1.25 var(--kz-round); text-align: center; color: var(--ink); }
.kz-bubble::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 16px; height: 16px; background: #fffdf8; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateX(-50%) rotate(45deg); }
.kz-pylo, .kz-crew-btn { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kz-pylo { display: block; width: min(260px, 64vw); aspect-ratio: 1; border-radius: 50%; }
.kz-art { display: block; width: 100%; height: 100%; overflow: visible; }
.kz-crew { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.kz-crew-btn { display: flex; flex-direction: column; align-items: center; width: 76px; padding: 6px 4px 4px; border-radius: 18px; background: #fffdf8; border: 2px solid var(--ink); }
.kz-crew-btn .kz-art { width: 56px; height: 56px; }
.kz-crew-name { font: 800 .74rem/1.1 var(--kz-round); margin-top: 2px; color: var(--ink); }
.kz-crew-btn[aria-pressed="true"], .kz-crew-btn.is-hi { background: var(--lime); }

/* Teasers */
.kz-teasers { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .kz-teasers { grid-template-columns: repeat(3, 1fr); } }
.kz-teaser a { position: relative; display: flex; flex-direction: column; height: 100%; padding: 18px 18px 16px 18px; padding-right: 96px; border-radius: 22px; background: #fffdf8; border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); color: var(--ink); text-decoration: none; }
.kz-teaser-art { position: absolute; right: 8px; top: 10px; width: 82px; height: 82px; border-radius: 50%; }
.kz-t-lime .kz-teaser-art { background: rgba(200,240,75,.5); } .kz-t-sky .kz-teaser-art { background: rgba(76,195,255,.35); } .kz-t-pink .kz-teaser-art { background: rgba(255,126,182,.35); }
.kz-tag { align-self: flex-start; padding: .3em .7em; border-radius: 999px; background: var(--ink); color: var(--lime); font: 800 .68rem/1 var(--kz-round); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.kz-teaser-name { font: 900 1.2rem/1.1 var(--kz-round); letter-spacing: -0.015em; margin-bottom: 6px; }
.kz-teaser-line { font-size: .9rem; color: var(--text-dark); margin-bottom: 14px; flex: 1; }
.kz-teaser-price b { font: 900 1.4rem/1 var(--kz-round); }
.kz-teaser-price small { display: block; margin-top: 4px; font-size: .78rem; color: var(--muted-dark); }

@media (prefers-reduced-motion: no-preference) {
  .kz-pylo-art { animation: kz-float 4.5s ease-in-out infinite; transform-origin: 50% 85%; }
  .kz-pylo.is-hi .kz-pylo-art { animation: kz-flap .9s var(--kz-bounce); }
  .kz-crew-btn { transition: transform .35s var(--kz-bounce); }
  .kz-crew-btn:hover { transform: translateY(-4px) rotate(-3deg); }
  .kz-crew-btn.is-hi .kz-art { animation: kz-hop .7s var(--kz-bounce); }
  .kz-bubble.is-new { animation: kz-pop .45s var(--kz-bounce); }
  .kz-teaser a { transition: transform .4s var(--kz-bounce), box-shadow .4s var(--kz-bounce); }
  .kz-teaser a:hover { transform: translate(-2px, -4px) rotate(-.6deg); box-shadow: 8px 9px 0 var(--ink); }
  .kz-teaser a:hover .kz-teaser-art { animation: kz-hop .7s var(--kz-bounce); }
  .kz-section .btn:active, .kz-crew-btn:active { transform: scale(.95); }
}
@keyframes kz-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes kz-flap { 0% { transform: none; } 25% { transform: translateY(-16px) rotate(-8deg); } 50% { transform: translateY(-20px) rotate(7deg); } 75% { transform: translateY(2px) scale(1.04, .96); } 100% { transform: none; } }
@keyframes kz-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-8px) rotate(-6deg); } 70% { transform: translateY(1px) rotate(4deg); } }
@keyframes kz-pop { 0% { transform: scale(.85); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .kz-section * { animation: none !important; transition: none !important; } }

/* full-test kzv1 (Ena 21 Oct 4:49pm, test only): hero video in a CSS phone frame (README option C), replaces the big Pylo + bubble.
   Alpha WebM (Chrome/Edge/Firefox) or MP4 (Safari) set by kids-zone.js. Reduced motion: still image, no video download, no sound. */
.kz-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kz-phone-stage { position: relative; width: min(440px, 100%); aspect-ratio: 1; display: grid; place-items: center; }
/* Desktop: keep the phone (and Safari's solid-yellow MP4) clear of the panel's sky-blue circle (.kz-blob-1, top right). */
@media (min-width: 960px) { .kz-phone-stage { margin-top: 120px; translate: -28px 0; } }
.kz-phone { position: relative; width: 44%; aspect-ratio: 9 / 16; background: var(--kz-sun, #ffd23f);
  border: clamp(8px, 2.2vw, 12px) solid var(--ink, #0e100d); border-radius: clamp(28px, 7vw, 40px);
  box-shadow: 8px 8px 0 var(--ink, #0e100d); overflow: hidden; transform: rotate(-5deg); }
.kz-phone::before { content: ""; position: absolute; z-index: 2; top: 8px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--ink, #0e100d); }
.kz-phone-video, .kz-phone-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kz-phone-still { display: none; }
.kz-phone-pal { position: absolute; overflow: visible; }
.kz-pp-pylo { width: 36%; left: 0; bottom: 2%; }  .kz-pp-hoopsy { width: 23%; right: 2%; top: 6%; }
.kz-pp-duvetta { width: 20%; right: 0; bottom: 12%; }  .kz-pp-blipsy { width: 16%; left: 6%; top: 10%; }
@media (prefers-reduced-motion: no-preference) {
  .kz-phone-pal { animation: kz-float 4.5s ease-in-out infinite; }
  .kz-pp-hoopsy { animation-delay: -1.2s; } .kz-pp-duvetta { animation-delay: -2.4s; } .kz-pp-blipsy { animation-delay: -3.3s; }
}
@media (prefers-reduced-motion: reduce) { .kz-phone-video { display: none; } .kz-phone-still { display: block; } }
.kz-sound { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-top: -4px; padding: 0; border-radius: 999px;
  background: #fffdf8; color: var(--ink, #0e100d); border: 2px solid var(--ink, #0e100d); cursor: pointer; }
.kz-sound[hidden] { display: none; }
.kz-sound svg { width: 22px; height: 22px; }
.kz-sound[aria-pressed="false"] .kz-sound-waves, .kz-sound[aria-pressed="true"] .kz-sound-x { display: none; }
.kz-sound:focus-visible { outline: 3px solid var(--ink, #0e100d); outline-offset: 3px; box-shadow: 0 0 0 6px #fffdf8; }
@media (max-width: 599px) { .kz-phone { width: 52%; } }