@font-face {
  font-family: Baloo;
  src: url("../fonts/baloo-2-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Baloo;
  src: url("../fonts/baloo-2-latin-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Baloo;
  src: url("../fonts/baloo-2-latin-800-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}
:root {
  --yellow: #ffbf00;
  --cream: #fdf6ec;
  --ink: #574a42;
  --coral: #ef5f3e;
  --button-red: #c7472c;
  --white: #fff;
  --gutter: clamp(22px, 5.5vw, 48px);
  --content: 1120px;
  --radius: 26px;
  --shadow: 0 2px 4px #574a4208;
  --focus: #30306b;
  --rail-gap: 24px;

  --rail-edge: max(var(--gutter), calc((100% - var(--content)) / 2));
}
* {
  box-sizing: border-box;
}
html {
  background: var(--yellow);
  scroll-behavior: smooth;
  scroll-padding-top: 28px;
}
body {
  margin: 0;
  background: var(--yellow);
  color: var(--ink);
  font:
    16px/1.55 Arial,
    Helvetica,
    sans-serif;
  -webkit-text-size-adjust: 100%;
}
body,
h1,
h2,
h3,
p,
dl,
dd {
  margin: 0;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button {
  font: inherit;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 5px;
}
::selection {
  background: var(--ink);
  color: #fff;
}
h1,
h2,
h3,
.button,
.eyebrow,
.header-login,
.main-nav,
.stats,
.footer-nav {
  font-family: Baloo, Arial, sans-serif;
}
h2 {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h3 {
  font-size: 25px;
  font-weight: 800;
  line-height: 1.15;
}
p {
  line-height: 1.55;
}
.container {
  width: min(var(--content), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 12px;
  background: #fff;
  font-weight: bold;
  transform: translateY(-180%);
}
.skip-link:focus {
  transform: translateY(0);
}
.eyebrow {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.035em;
  margin-bottom: 12px;
}
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 11px 24px 10px;
  border: 2px solid transparent;
  border-radius: 100px;
  background: var(--button-red);
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}
.button:active {
  transform: scale(0.97);
}
.button-white {
  background: #fff;
  color: var(--ink);
}

/* Header artwork: parallax lives on outer layers, finite animation on the images. */
.hero {
  position: relative;
  isolation: isolate;
  height: 450px;
  background: var(--yellow);
  overflow: hidden;
}
.site-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 32px;
  height: 98px;
}
.brand-mark {
  display: flex;
  align-items: center;
  min-width: 50px;
  min-height: 48px;
  margin-right: auto;
}
.brand-mark img {
  width: 50px;
  object-fit: contain;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 18px;
  font-weight: 700;
}
.main-nav a,
.header-login {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.main-nav a:hover,
.header-login:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.header-login {
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
}
.menu-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 0 #d49e0014;
}
.menu-toggle span {
  height: 3px;
  width: 24px;
  border-radius: 8px;
  background: #c5482b;
  transition:
    transform 0.2s,
    opacity 0.2s;
}
.menu-toggle span:nth-child(2) {
  width: 18px;
  align-self: flex-start;
  margin-left: 14px;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
.hero-art {
  position: relative;
  height: 320px;
  width: min(850px, 100%);
  margin: auto;
  display: grid;
  place-items: center;
  z-index: 1;
}
[data-parallax] {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
}
.hero-circle-layer {
  position: absolute;
  width: 330px;
  height: 330px;
  top: -15px;
  left: calc(50% - 165px);
}
.hero-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fbd76c;
  animation: sun-arrive 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-logo-layer {
  position: relative;
  width: 370px;
  margin-top: -22px;
}
.hero-logo {
  width: 100%;
  transform: rotate(-5deg);
  animation: logo-arrive 1s 0.12s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-plane-layer {
  position: absolute;
  width: 170px;
  left: 15px;
  top: 30px;
}
.hero-plane {
  width: 100%;
  transform: rotate(-12deg);
  animation: plane-arrive 2.6s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
.hero-balloon-layer {
  position: absolute;
  width: 85px;
  right: 32px;
  top: 90px;
}
.hero-balloon {
  width: 100%;
  transform: rotate(8deg);
  animation: balloon-arrive 3.4s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
.hero-dot {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #fbd76c;
}
.dot-one {
  width: 40px;
  height: 40px;
  left: 135px;
  top: 192px;
}
.dot-two {
  width: 16px;
  height: 16px;
  right: 165px;
  top: 66px;
}
.wave-crop {
  overflow: hidden;
  pointer-events: none;
}
.wave-crop > .wave-art {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-wave {
  position: absolute;
  z-index: 2;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 115px;
  pointer-events: none;
}

/* Native scroll rails preserve iOS momentum, vertical page gestures and pinch zoom. */
.slider-track {
  display: flex;
  gap: var(--rail-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-edge);
  padding-inline: var(--rail-edge);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;
}
.slider-track::-webkit-scrollbar {
  display: none;
}
.slider-tail {
  flex: 0 0 var(--slider-tail-extra, 0px);
  margin-left: calc(-1 * var(--rail-gap));
  pointer-events: none;
}
.slider-track.is-dragging,
.slider-track.is-settling {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.slider-track.is-dragging {
  user-select: none;
  -webkit-user-select: none;
}
.slider-track.is-dragging,
.slider-track.is-dragging * {
  cursor: grabbing !important;
}
@media (hover: hover) and (pointer: fine) {
  .has-overflow .slider-track {
    cursor: grab;
  }
}
.slider-track > [data-slide] {
  flex-shrink: 0;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.slider-track:focus-visible {
  outline-offset: -4px;
  border-radius: 12px;
}
.slider-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  margin-top: 2px;
}
.slider-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 30px;
  padding: 0 7px;
  border: 1px solid #eadcc9;
  border-radius: 999px;
  background: #fffaf2;
  box-shadow: 0 2px 3px #574a4205;
}
.slider-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
}
.slider-dot:before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 12px;
  background: #9d8267;
  transition:
    width 0.25s,
    background 0.25s;
}
.slider-dot.is-active:before {
  width: 16px;
  background: var(--button-red);
}
.slider-dot:focus-visible {
  outline-offset: -3px;
}
.welcome-section {
  padding-top: 16px;
}
.welcome-track {
  padding-top: 8px;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}
.welcome-card {
  position: relative;
  display: flex;
  align-items: center;
  flex-basis: 100%;
  min-height: 370px;
  border: 1px solid #ede9e4;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  isolation: isolate;
}
.welcome-copy {
  position: relative;
  z-index: 1;
  width: 65%;
  max-width: 680px;
  padding: 44px 60px;
}
.welcome-copy h2 {
  font-size: clamp(30px, 3.8vw, 48px);
  margin-bottom: 18px;
}
.welcome-copy p:not(.eyebrow) {
  max-width: 390px;
  margin-bottom: 28px;
  font-size: 18px;
}
.welcome-elmo {
  position: absolute;
  right: 38px;
  bottom: -105px;
  width: 330px;
  transform: scaleX(-1);
}
.welcome-robot {
  position: absolute;
  right: 50px;
  bottom: -76px;
  width: 270px;
}
.welcome-card-second {
  background: #fffdf8;
}

/* Compact topic bento: illustrations deliberately extend beyond the rounded surfaces. */
.section-space {
  padding-top: 60px;
  padding-bottom: 65px;
}
.section-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 50px;
  margin-bottom: 32px;
}
.section-intro > p {
  width: 380px;
  max-width: 45%;
  font-size: 17px;
}
.learning-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.topic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 218px;
  padding: 28px 26px 46px;
  border-radius: var(--radius);
  isolation: isolate;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.topic-math {
  background: linear-gradient(110deg, #2996a2, #30bbcb);
  color: #fff;
}
.topic-reading {
  background: linear-gradient(110deg, #f26142, #ff785c);
  color: #fff;
}
.topic-feelings {
  background: linear-gradient(110deg, #ffbf00, #fbd76c);
  color: #574018;
}
.topic-card h3 {
  margin-bottom: 16px;
  max-width: 100%;
}
.topic-card p {
  max-width: 88%;
  font-size: 16px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.topic-card > img {
  position: absolute;
  right: -12px;
  bottom: 17px;
  width: 64px;
  height: 64px;
  object-fit: contain;
  pointer-events: none;
}
.topic-reading > img {
  right: -17px;
  bottom: 18px;
}
.topic-feelings > img {
  right: -15px;
  bottom: -7px;
}
.stats-slider {
  margin-top: 30px;
}
.stats-note {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
@media (max-width: 759px) {
  .stats-note {
    text-align: left;
  }
}
.stats {
  padding-top: 8px;
  padding-bottom: 8px;
}
.stats > [data-slide] {
  flex-basis: calc((100% - var(--rail-gap) * 2) / 3);
  padding: 24px 30px 17px;
  border: 1px solid #ede9e4;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.stats dt {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
}
.stats dd {
  font-size: clamp(54px, 6vw, 76px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.stats dd span {
  font-size: 0.85em;
  margin-left: 2px;
}
.stat-coral {
  color: #c7472c;
}
.stat-yellow {
  color: #9a6900;
}
.stat-teal {
  color: #207e88;
}

/* Upright costume backgrounds; heads sit above their surfaces, wave overlaps below. */
.rewards-section {
  position: relative;
  padding-top: 55px;
  padding-bottom: 75px;
}
.costume-parade {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 28px;
  height: 420px;
  max-width: 920px;
  padding-inline: 20px;
}
.costume {
  position: relative;
  width: 23%;
  height: 365px;
  isolation: isolate;
}
.costume:before {
  content: "";
  position: absolute;
  inset: 32px 0 0;
  border-radius: 130px 130px 0 0;
  z-index: -1;
}
.costume img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 105%;
  max-width: none;
  top: 0;
}
.costume-robot,
.costume-dino {
  height: 325px;
}
.costume-robot:before {
  background: #29b0bc;
}
.costume-lion:before {
  background: #f8bd43;
}
.costume-wizard:before {
  background: #d25998;
}
.costume-dino:before {
  background: #afd398;
}
.rewards-content {
  position: relative;
  z-index: 1;
  background: #fff;
  margin-top: -48px;
  padding-top: 58px;
  padding-bottom: 90px;
}
.rewards-content:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -62px;
  left: 0;
  right: 0;
  height: 140px;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  background: #fff;
}
.rewards-intro {
  text-align: center;
  position: relative;
}
.rewards-intro > p:not(.eyebrow) {
  max-width: 550px;
  margin: 22px auto 28px;
  font-size: 17px;
}
.reward-slider {
  margin-top: 40px;
}
.reward-grid {
  padding-top: 30px;
  padding-bottom: 32px;
}
.reward-card {
  position: relative;
  display: flex;
  flex-basis: calc((100% - var(--rail-gap) * 2) / 3);
  min-height: 205px;
  padding: 28px 24px;
  border-radius: var(--radius);
  isolation: isolate;
}
.reward-card h3 {
  margin-bottom: 14px;
}
.reward-card p {
  font-size: 16px;
  line-height: 1.45;
  max-width: 170px;
}
.reward-card > div:first-child {
  position: relative;
  z-index: 1;
  width: 63%;
}
.reward-games {
  background: linear-gradient(110deg, #7566c9, #7867cf);
  color: #fff;
}
.reward-companions {
  background: linear-gradient(110deg, #f26142, #ff785c);
  color: #fff;
}
.reward-badges {
  background: linear-gradient(110deg, #633c83, #bd428e);
  color: #fff;
}
.reward-card .fox {
  position: absolute;
  top: auto;
  bottom: -12px;
  right: -14px;
  width: 150px;
  max-width: 40%;
  pointer-events: none;
}
.badge {
  position: absolute;
  right: -20px;
  bottom: -16px;
  width: 115px;
  max-width: 44%;
  height: auto;
  transform: rotate(12deg);
  pointer-events: none;
}
.game-icons {
  position: absolute;
  right: 14px;
  top: 26px;
  bottom: 22px;
  width: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.game-icons img:first-child {
  transform: rotate(15deg);
}
.game-icons img:last-child {
  transform: rotate(-10deg);
  align-self: flex-end;
}
.game-icons span {
  color: #e6c0ff;
  font-size: 32px;
  line-height: 1;
}
.section-wave {
  position: absolute;
  bottom: 74px;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 2;
  pointer-events: none;
}

.parents-section {
  max-width: 960px;
  padding: 16px 0 150px;
}
.parents-banner {
  display: grid;
  grid-template-columns: 0.75fr 1fr;
  align-items: center;
  gap: 45px;
  padding: 42px 55px;
  background: linear-gradient(110deg, #fbd76c, #ffbf00 68%);
  border-radius: var(--radius);
}
.stars-layer {
  display: grid;
  place-items: center;
  width: 100%;
}
.parents-banner .stars {
  width: 230px;
  height: auto;
  justify-self: center;
}
.parents-banner h3 {
  font-size: clamp(28px, 3vw, 36px);
}
.parents-banner p:not(.eyebrow) {
  margin: 16px 0 22px;
  max-width: 380px;
}
.no-ads {
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  align-items: center;
  gap: 50px;
  margin-top: 28px;
  background: #fff;
  border: 1px solid #ede9e4;
  border-radius: var(--radius);
  padding: 36px 55px;
  box-shadow: var(--shadow);
}
.no-ads h3 {
  font-size: 30px;
}
.no-ads p {
  margin-top: 12px;
  max-width: 390px;
}
.ad-illustration {
  position: relative;
  width: 230px;
  max-width: 100%;
  justify-self: center;
  display: grid;
  gap: 8px;
  padding-block: 8px;
}
.ad-illustration span {
  display: block;
  width: 100%;
  height: 30px;
  border: 2px solid #efefef;
  border-radius: 5px;
}
.ad-illustration span:nth-child(2) {
  background: #f4afb3;
  border-color: #f4afb3;
}
.ad-illustration svg {
  position: absolute;
  top: 35px;
  left: 18px;
}
.site-footer {
  position: relative;
  background: var(--yellow);
  padding-top: 44px;
}
.footer-wave {
  position: absolute;
  left: 0;
  top: -89px;
  width: 100%;
  height: 90px;
  pointer-events: none;
}
.footer-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-brand {
  position: relative;
  display: grid;
  place-items: center;
  width: 320px;
  height: 260px;
  max-width: 100%;
  isolation: isolate;
  margin-bottom: 24px;
}
.footer-brand > span {
  position: absolute;
  background: #fbd76c;
  z-index: -1;
  width: 260px;
  height: 260px;
  border-radius: 50%;
}
.footer-brand img {
  width: 300px;
  transform: rotate(-5deg);
}
.footer-nav {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 21px;
  font-weight: 800;
  margin-bottom: 18px;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.footer-note {
  font-size: 14px;
}
.footer-elmo-layer {
  width: 390px;
  max-width: 90%;
  margin-top: 36px;
}
.footer-elmo {
  width: 100%;
}
.footer-inner small {
  position: relative;
  z-index: 1;
  display: block;
  align-self: stretch;
  padding: 14px 0 18px;
  background: var(--yellow);
  font-size: 12px;
}

/* Progressive motion: content is visible without JS, and all motion is optional. */
.motion-ready [data-reveal] {
  opacity: 0;
  --reveal-y: 22px;
  transform: translate3d(0, calc(var(--reveal-y, 0px) + var(--lift, 0px)), 0);
  transition:
    opacity 0.65s ease,
    transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.motion-ready [data-reveal].is-revealed {
  opacity: 1;
  --reveal-y: 0px;
}
.learning-grid > [data-reveal]:nth-child(2) {
  transition-delay: 0.06s;
}
.learning-grid > [data-reveal]:nth-child(3) {
  transition-delay: 0.12s;
}
@keyframes sun-arrive {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes logo-arrive {
  from {
    opacity: 0;
    transform: translateY(14px) rotate(-8deg) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(-5deg) scale(1);
  }
}
@keyframes plane-arrive {
  from {
    opacity: 0;
    transform: translate(-36px, 14px) rotate(-20deg);
  }
  35% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translate(0, 0) rotate(-12deg);
  }
}
@keyframes balloon-arrive {
  from {
    opacity: 0;
    transform: translateY(22px) rotate(-4deg);
  }
  35% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(8deg);
  }
}
@media (hover: hover) and (pointer: fine) {
  .button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 0 #b83d241f;
  }
  a.topic-card[href]:hover {
    --lift: -5px;
    transform: translateY(-5px);
    box-shadow: 0 8px 0 #574a420e;
  }
  .motion-ready a.topic-card[href].is-revealed:hover {
    transform: translate3d(0, -5px, 0);
  }
  .stars {
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .slider-dot:hover:before {
    background: var(--button-red);
  }
}

/* Legal pages share the same typography and branding. */
.legal-header {
  background: var(--yellow);
}
.legal-header .site-header {
  height: 90px;
}
.legal-wordmark {
  width: 100px;
  margin-left: 12px;
}
.back-link {
  font-family: Baloo, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.legal-content {
  max-width: 800px;
  padding-top: 65px;
  padding-bottom: 145px;
}
.legal-content h1 {
  font-family: Baloo, Arial, sans-serif;
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: 24px;
}
.legal-content h2 {
  font-size: 26px;
  margin-top: 36px;
  margin-bottom: 12px;
}
.legal-content p + p {
  margin-top: 16px;
}
.legal-content ul {
  padding-left: 22px;
}
.legal-content li + li {
  margin-top: 8px;
}
.legal-content a {
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.draft-notice {
  border: 2px solid #a66b00;
  border-radius: 16px;
  padding: 20px 24px;
  background: #fff4d5;
  margin-bottom: 30px;
}
.draft-notice strong {
  display: block;
  font-family: Baloo, Arial, sans-serif;
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 8px;
}
.legal-footer {
  padding-top: 0;
}
.legal-footer .footer-inner {
  padding-block: 24px;
}
.legal-footer .footer-nav {
  margin-bottom: 0;
}

@media (min-width: 1600px) {
  .hero-wave {
    height: 145px;
  }
  .hero {
    height: 480px;
  }
  .hero-art {
    height: 345px;
  }
}
@media (max-width: 1050px) {
  .welcome-copy {
    padding: 36px 40px;
    width: 64%;
  }
  .welcome-elmo {
    right: 12px;
    width: 290px;
    bottom: -85px;
  }
  .welcome-robot {
    right: 20px;
    width: 230px;
  }
  .topic-card {
    padding: 25px 22px 44px;
  }
  .topic-card h3 {
    font-size: 23px;
  }
  .topic-card > img {
    width: 58px;
    height: 58px;
  }
  .reward-card {
    padding: 26px 22px;
  }
  .reward-card h3 {
    font-size: 23px;
  }
  .reward-card p {
    font-size: 15px;
  }
  .reward-card .fox {
    width: 130px;
  }
  .parents-banner {
    padding: 36px 40px;
  }
  .costume-parade {
    height: 370px;
  }
  .costume {
    height: 315px;
  }
  .costume-robot,
  .costume-dino {
    height: 275px;
  }
}
@media (min-width: 760px) {
  .section-intro {
    display: block;
    text-align: center;
  }
  .section-intro > p {
    width: 100%;
    max-width: 550px;
    margin: 22px auto 0;
  }
  .welcome-card {
    flex-basis: clamp(560px, 72%, 800px);
    min-height: 350px;
  }
  .welcome-copy {
    width: 66%;
    padding: 36px 40px;
  }
  .welcome-copy h2 {
    font-size: clamp(32px, 3vw, 42px);
  }
  .welcome-copy p:not(.eyebrow) {
    font-size: 17px;
    max-width: 340px;
  }
  .welcome-elmo {
    width: 280px;
    right: 0;
    bottom: -90px;
  }
  .welcome-robot {
    width: 230px;
    right: 12px;
    bottom: -70px;
  }
}
@media (min-width: 760px) and (max-width: 1050px) {
  .welcome-copy {
    width: 68%;
    padding: 32px;
  }
  .welcome-elmo {
    width: 230px;
    right: -24px;
    bottom: -62px;
  }
  .welcome-robot {
    width: 195px;
    right: -14px;
    bottom: -48px;
  }
}
@media (min-width: 760px) and (max-width: 999px) {
  .reward-card {
    flex-basis: clamp(250px, 37vw, 330px);
  }
}
@media (max-width: 759px) {
  :root {
    --radius: 24px;
    --gutter: clamp(22px, 6vw, 36px);
    --rail-gap: 20px;
  }
  .hero {
    height: 340px;
  }
  .site-header {
    height: 84px;
    gap: 22px;
  }
  .brand-mark img {
    width: 47px;
  }
  .header-login {
    font-size: 18px;
  }
  .main-nav {
    position: absolute;
    top: 76px;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 22px;
    background: #fff;
    border: 1px solid #ede4d7;
    box-shadow: 0 12px 25px #574a421a;
    border-radius: 20px;
    z-index: 5;
  }
  .main-nav a {
    padding: 8px 5px;
    min-height: 48px;
  }
  .hero-art {
    height: 235px;
    max-width: 590px;
  }
  .hero-circle-layer {
    height: 255px;
    width: 255px;
    top: -21px;
    left: calc(50% - 127.5px);
  }
  .hero-logo-layer {
    width: 300px;
    max-width: 58%;
    margin-top: -17px;
  }
  .hero-plane-layer {
    width: clamp(100px, 23vw, 145px);
    left: -16px;
    top: 12px;
  }
  .hero-balloon-layer {
    width: clamp(59px, 12vw, 75px);
    right: 18px;
    top: 62px;
  }
  .dot-one {
    width: 37px;
    height: 37px;
    left: 15%;
    top: 110px;
  }
  .dot-two {
    width: 14px;
    height: 14px;
    right: 21%;
    top: 26px;
  }
  .hero-wave {
    height: 86px;
  }
  .welcome-section {
    padding-top: 14px;
  }
  .welcome-card {
    min-height: 300px;
    flex-basis: calc(100% - 18px);
  }
  .welcome-copy {
    width: 72%;
    padding: 32px;
  }
  .welcome-copy .eyebrow {
    display: none;
  }
  .welcome-copy h2 {
    font-size: 31px;
    max-width: 270px;
    margin-bottom: 18px;
  }
  .welcome-copy h2 br {
    display: none;
  }
  .welcome-copy p:not(.eyebrow) {
    font-size: 16px;
    max-width: 250px;
    margin-bottom: 24px;
  }
  .welcome-elmo {
    width: 240px;
    right: -70px;
    bottom: -42px;
    z-index: 0;
  }
  .welcome-robot {
    width: 190px;
    right: -30px;
    bottom: -40px;
  }
  .welcome-card-second .welcome-copy {
    width: 75%;
  }
  .welcome-card-second .button {
    font-size: 16px;
  }
  .section-space {
    padding-top: 34px;
    padding-bottom: 26px;
  }
  .section-intro {
    display: block;
    margin-bottom: 26px;
  }
  .section-intro .eyebrow {
    display: none;
  }
  .section-intro > p {
    max-width: 400px;
    width: 100%;
    margin-top: 18px;
    font-size: 16px;
  }
  .learning-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 22px;
    padding-right: 9px;
  }
  .topic-card {
    min-height: 205px;
    padding: 25px 24px 42px;
  }
  .topic-card h3 {
    font-size: 23px;
    margin-bottom: 14px;
  }
  .topic-card p {
    font-size: 15px;
    max-width: 100%;
  }
  .topic-card > img {
    width: 55px;
    height: 55px;
    bottom: 12px;
    right: -12px;
  }
  .topic-reading > img {
    right: -17px;
  }
  .topic-feelings > img {
    right: -15px;
    bottom: -7px;
  }
  .stats-slider {
    margin-top: 26px;
  }
  .stats > [data-slide] {
    flex-basis: clamp(165px, 42vw, 275px);
    padding: 23px 24px 16px;
  }
  .stats dt {
    font-size: 18px;
  }
  .stats dd {
    font-size: 60px;
  }
  .rewards-section {
    padding-top: 45px;
    padding-bottom: 70px;
  }
  .costume-parade {
    height: 210px;
    gap: 14px;
    padding-inline: 2px;
  }
  .costume {
    height: 180px;
    width: 25%;
  }
  .costume:before {
    inset: 20px 0 0;
  }
  .costume-robot,
  .costume-dino {
    height: 148px;
  }
  .costume img {
    width: 112%;
  }
  .rewards-content {
    margin-top: -34px;
    padding-top: 34px;
    padding-bottom: 85px;
  }
  .rewards-content:before {
    top: -37px;
    height: 85px;
  }
  .rewards-intro > .eyebrow {
    display: none;
  }
  .rewards-intro > p:not(.eyebrow) {
    max-width: 420px;
    font-size: 16px;
    margin: 22px auto 28px;
  }
  .reward-slider {
    margin-top: 28px;
  }
  .reward-grid {
    padding-top: 30px;
    padding-bottom: 28px;
  }
  .reward-card {
    flex-basis: clamp(225px, 42vw, 315px);
    min-height: 190px;
    padding: 26px 24px;
  }
  .reward-card h3 {
    font-size: 25px;
    margin-bottom: 12px;
  }
  .reward-card p {
    max-width: 170px;
    font-size: 15px;
  }
  .reward-card > div:first-child {
    width: 67%;
  }
  .reward-card .fox {
    width: 115px;
    max-width: 40%;
    right: -14px;
    top: auto;
    bottom: -12px;
  }
  .game-icons {
    right: 10px;
    top: 26px;
    bottom: 22px;
    width: 58px;
  }
  .game-icons img:first-child {
    width: 55px;
  }
  .game-icons img:last-child {
    width: 36px;
  }
  .badge {
    right: -20px;
    bottom: -14px;
    width: 105px;
    max-width: 46%;
  }
  .section-wave {
    height: 58px;
    bottom: 69px;
  }
  .parents-section {
    padding-top: 20px;
    padding-bottom: 145px;
  }
  .parents-banner {
    gap: 26px;
    padding: 30px;
    grid-template-columns: 0.65fr 1fr;
  }
  .parents-banner h3 {
    font-size: 27px;
  }
  .parents-banner .eyebrow {
    display: none;
  }
  .parents-banner p:not(.eyebrow) {
    font-size: 15px;
    margin: 12px 0 18px;
  }
  .no-ads {
    gap: 20px;
    margin-top: 24px;
    padding: 28px 30px;
    grid-template-columns: 1fr 0.75fr;
  }
  .no-ads h3 {
    font-size: 26px;
  }
  .no-ads p {
    font-size: 15px;
  }
  .ad-illustration {
    width: 180px;
    gap: 6px;
  }
  .ad-illustration span {
    height: 24px;
  }
  .ad-illustration svg {
    width: 48px;
    top: 27px;
    left: 10px;
  }
  .site-footer {
    padding-top: 30px;
  }
  .footer-brand {
    height: 250px;
    margin-bottom: 20px;
  }
  .footer-brand > span {
    height: 250px;
    width: 250px;
  }
  .footer-nav {
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-size: 23px;
  }
  .footer-note {
    max-width: 250px;
  }
  .footer-elmo-layer {
    margin-top: 30px;
    width: 350px;
  }
  .legal-content {
    padding-top: 40px;
    padding-bottom: 120px;
  }
  .legal-footer {
    padding-top: 0;
  }
  .legal-footer .footer-nav {
    flex-direction: row;
    gap: 12px 24px;
    font-size: 18px;
  }
}
@media (max-width: 759px) {
  /* Keep the wide wave canvases and crop their sides instead of compressing the curves. */
  .hero-wave {
    height: 108px;
  }
  .section-wave,
  .footer-wave {
    height: 110px;
  }
  .footer-wave {
    top: -109px;
  }
  .wave-crop > .wave-art {
    position: absolute;
    left: 50%;
    bottom: 0;
    max-width: none;
    transform: translateX(-50%);
    height: auto;
  }
  .hero-wave > .wave-art {
    width: max(740px, 100%);
  }
  .section-wave > .wave-art,
  .footer-wave > .wave-art {
    width: max(1440px, 100%);
    aspect-ratio: 1440/100;
  }
}
@media (max-width: 479px) {
  .hero {
    height: 300px;
  }
  .site-header {
    height: 76px;
    gap: 18px;
  }
  .menu-toggle {
    width: 48px;
    height: 48px;
  }
  .brand-mark img {
    width: 44px;
  }
  .hero-art {
    height: 215px;
  }
  .hero-circle-layer {
    width: 230px;
    height: 230px;
    top: -13px;
    left: calc(50% - 115px);
  }
  .hero-logo-layer {
    max-width: 61%;
    margin-top: -8px;
  }
  .hero-plane-layer {
    top: 12px;
    left: -18px;
  }
  .hero-balloon-layer {
    right: 9px;
    top: 60px;
  }
  .hero-wave {
    height: 108px;
  }
  .dot-one {
    left: 14%;
    top: 100px;
    width: 28px;
    height: 28px;
  }
  .dot-two {
    right: 18%;
    top: 27px;
    width: 12px;
    height: 12px;
  }
  .welcome-card {
    min-height: 286px;
  }
  .welcome-copy {
    padding: 28px 24px;
    width: 75%;
  }
  .welcome-copy h2 {
    font-size: 27px;
    max-width: 180px;
  }
  .welcome-copy p:not(.eyebrow) {
    max-width: 165px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 24px;
  }
  .welcome-elmo {
    width: 206px;
    right: -85px;
    bottom: -10px;
  }
  .welcome-robot {
    width: 175px;
    right: -72px;
    bottom: -22px;
  }
  .welcome-card-second .welcome-copy {
    width: 80%;
  }
  .welcome-card-second .button {
    font-size: 15px;
    padding-inline: 13px;
    max-width: 100%;
    text-align: center;
  }
  .button {
    font-size: 17px;
    min-height: 46px;
    padding: 11px 20px;
  }
  .welcome-card .button {
    font-size: 16px;
    padding-inline: 18px;
  }
  h2 {
    font-size: 28px;
  }
  .section-intro > p {
    font-size: 15px;
    max-width: 310px;
  }
  .learning-grid {
    gap: 22px 20px;
    padding-right: 9px;
  }
  .topic-card {
    padding: 22px 18px 42px;
    min-height: 215px;
    border-radius: 22px;
  }
  .topic-card h3 {
    font-size: 21px;
  }
  .topic-card p {
    font-size: 14px;
    line-height: 1.45;
  }
  .topic-card > img {
    width: 50px;
    height: 50px;
    right: -12px;
    bottom: 10px;
  }
  .topic-reading > img {
    right: -17px;
  }
  .topic-feelings > img {
    right: -15px;
    bottom: -7px;
  }
  .stats > [data-slide] {
    flex-basis: clamp(160px, 43vw, 200px);
    padding: 21px 20px 15px;
    border-radius: 22px;
  }
  .stats dt {
    font-size: 17px;
  }
  .stats dd {
    font-size: 54px;
  }
  .costume-parade {
    height: 175px;
    gap: 9px;
  }
  .costume {
    height: 153px;
  }
  .costume-robot,
  .costume-dino {
    height: 125px;
  }
  .costume:before {
    inset: 18px 0 0;
  }
  .rewards-intro > p:not(.eyebrow) {
    font-size: 15px;
  }
  .reward-card {
    padding: 24px 22px;
    min-height: 188px;
  }
  .reward-card h3 {
    font-size: 24px;
  }
  .parents-banner {
    padding: 28px 24px;
    gap: 18px;
    grid-template-columns: 0.6fr 1fr;
  }
  .parents-banner .stars {
    width: 120px;
    max-width: 130%;
    margin-left: -6px;
  }
  .parents-banner h3 {
    font-size: 24px;
  }
  .parents-banner p:not(.eyebrow) {
    font-size: 14px;
  }
  .parents-banner .button {
    font-size: 16px;
    padding-inline: 18px;
  }
  .no-ads {
    padding: 28px 24px;
    gap: 16px;
    grid-template-columns: 1.2fr 0.8fr;
  }
  .no-ads h3 {
    font-size: 24px;
  }
  .no-ads p {
    font-size: 14px;
  }
  .ad-illustration {
    width: 126px;
  }
  .ad-illustration span {
    height: 22px;
  }
  .ad-illustration svg {
    width: 42px;
    top: 27px;
  }
  .footer-brand {
    width: 280px;
    height: 240px;
  }
  .footer-brand > span {
    height: 240px;
    width: 240px;
  }
  .footer-brand img {
    width: 270px;
  }
  .footer-elmo-layer {
    max-width: 96%;
  }
  .footer-note {
    font-size: 13px;
  }
  .footer-nav {
    font-size: 22px;
  }
}
@media (max-width: 359px) {
  .header-login {
    font-size: 16px;
  }
  .site-header {
    gap: 13px;
  }
  .welcome-copy {
    padding: 24px 20px;
    width: 77%;
  }
  .welcome-copy h2 {
    font-size: 25px;
    max-width: 145px;
  }
  .welcome-copy p:not(.eyebrow) {
    max-width: 142px;
  }
  .welcome-elmo {
    right: -115px;
  }
  .topic-card {
    padding: 20px 14px 42px;
    min-height: 215px;
  }
  .topic-card h3 {
    font-size: 19px;
  }
  .parents-banner {
    grid-template-columns: 1fr;
  }
  .parents-banner .stars {
    width: 120px;
    margin: 0 auto;
  }
  .no-ads {
    grid-template-columns: 1fr;
  }
  .ad-illustration {
    width: 180px;
  }
  .parents-section {
    padding-bottom: 130px;
  }
}

/* Small phones get full-width text panels instead of squeezed columns. */
@media (max-width: 540px) {
  .welcome-card {
    display: block;
    min-height: 0;
    padding-bottom: 130px;
  }
  .welcome-copy,
  .welcome-card-second .welcome-copy {
    width: 100%;
    max-width: none;
    padding: 28px 26px 24px;
  }
  .welcome-copy h2 {
    font-size: 28px;
    max-width: none;
    margin-bottom: 16px;
  }
  .welcome-copy p:not(.eyebrow) {
    font-size: 16px;
    line-height: 1.5;
    max-width: none;
    margin-bottom: 22px;
  }
  .welcome-card .button,
  .welcome-card-second .button {
    font-size: 17px;
    padding-inline: 21px;
  }
  .welcome-elmo {
    width: 184px;
    right: 2px;
    bottom: -69px;
  }
  .welcome-robot {
    width: 160px;
    right: 10px;
    bottom: -70px;
  }
  .learning-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding-right: 10px;
  }
  .topic-card {
    min-height: 158px;
    padding: 26px 28px;
    border-radius: 24px;
  }
  .topic-card h3 {
    font-size: 24px;
    max-width: 100%;
    margin-bottom: 12px;
  }
  .topic-card p {
    font-size: 16px;
    line-height: 1.5;
    max-width: calc(100% - 44px);
  }
  .topic-card > img {
    width: 64px;
    height: 64px;
    right: -12px;
    bottom: 15px;
  }
  .topic-reading > img {
    right: -17px;
  }
  .topic-feelings > img {
    right: -15px;
    bottom: -6px;
  }
  .stats > [data-slide] {
    flex-basis: clamp(190px, 58vw, 250px);
    padding: 24px 24px 18px;
  }
  .stats dt {
    font-size: 18px;
  }
  .stats dd {
    font-size: 62px;
  }
  .reward-card {
    flex-basis: calc(100% - 34px);
    min-height: 205px;
    padding: 26px 24px;
  }
  .reward-card > div:first-child {
    width: 70%;
  }
  .reward-card p {
    font-size: 16px;
  }
  .parents-banner,
  .no-ads {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 28px;
  }
  .parents-banner .stars {
    width: 110px;
    max-width: 100%;
    margin: 0;
  }
  .parents-banner h3 {
    font-size: 28px;
  }
  .parents-banner p:not(.eyebrow),
  .no-ads p {
    font-size: 16px;
  }
  .no-ads h3 {
    font-size: 28px;
  }
  .ad-illustration {
    width: 185px;
  }
}
@media (max-width: 359px) {
  .welcome-copy,
  .welcome-card-second .welcome-copy {
    padding-inline: 24px;
  }
  .welcome-copy h2 {
    font-size: 27px;
  }
  .topic-card {
    padding: 24px;
  }
  .topic-card h3 {
    font-size: 22px;
  }
  .topic-card p {
    max-width: calc(100% - 38px);
  }
}

/* Larger opening scene; artwork grows with the available space. */
.hero {
  height: 560px;
}
.hero-art {
  height: 420px;
  width: min(1040px, 100%);
}
.hero-circle-layer {
  width: 410px;
  height: 410px;
  left: calc(50% - 205px);
  top: -8px;
}
.hero-logo-layer {
  width: 460px;
}
.hero-plane-layer {
  width: 210px;
  top: 45px;
}
.hero-balloon-layer {
  width: 105px;
  top: 110px;
}
@media (min-width: 1600px) {
  .hero {
    height: 610px;
  }
  .hero-art {
    height: 460px;
  }
}
@media (max-width: 759px) {
  .hero {
    height: 425px;
  }
  .hero-art {
    height: 325px;
    max-width: 650px;
  }
  .hero-circle-layer {
    width: 315px;
    height: 315px;
    left: calc(50% - 157.5px);
    top: -8px;
  }
  .hero-logo-layer {
    width: 370px;
    max-width: 65%;
    margin-top: -10px;
  }
  .hero-plane-layer {
    width: clamp(110px, 24vw, 165px);
    top: 40px;
    left: -12px;
  }
  .hero-balloon-layer {
    width: clamp(66px, 13vw, 90px);
    top: 110px;
    right: 14px;
  }
}
@media (max-width: 479px) {
  .hero {
    height: 385px;
  }
  .hero-art {
    height: 300px;
  }
  .hero-circle-layer {
    width: 280px;
    height: 280px;
    left: calc(50% - 140px);
  }
  .hero-logo-layer {
    max-width: 68%;
  }
  .hero-plane-layer {
    top: 35px;
    left: -18px;
  }
  .hero-balloon-layer {
    top: 105px;
    right: 10px;
  }
}
/* Freestanding circular indicators, with generous invisible touch targets. */
.slider-pagination {
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.slider-dot {
  width: 32px;
  height: 44px;
  border-radius: 50%;
}
.slider-dot:before {
  width: 8px;
  height: 8px;
  background: var(--ink);
  opacity: 0.32;
  transition:
    width 0.2s,
    height 0.2s,
    opacity 0.2s,
    background 0.2s;
}
.slider-dot[data-distance="1"]:before {
  width: 10px;
  height: 10px;
  opacity: 0.4;
}
.slider-dot.is-active:before {
  width: 12px;
  height: 12px;
  background: var(--button-red);
  opacity: 1;
}
.parents-intro {
  text-align: center;
  margin: 0 auto 36px;
}
.parents-intro > p {
  max-width: 550px;
  margin: 22px auto 0;
  font-size: 17px;
}
@media (max-width: 759px) {
  .parents-intro > p {
    font-size: 16px;
  }
}
/* Equal-height sticky slots keep the exposed edges together even when leaving. */
.learning-stack-slot{display:contents}
.learning-grid.is-stack{--stack-card-height:250px;--stack-slot-height:calc(var(--stack-card-height) + 36px);display:grid;grid-template-columns:minmax(0,1fr);gap:38svh;max-width:760px;height:auto;padding:20px 14px 22svh;isolation:isolate}
.is-stack .learning-stack-slot{display:block;position:sticky;top:23svh;align-self:start;z-index:var(--stack-index);padding-top:calc(var(--stack-index)*18px);padding-bottom:calc(var(--stack-depth)*18px)}
.learning-grid.is-stack .topic-card{position:relative;inset:auto;min-height:var(--stack-card-height);padding:40px 44px;transform:scale(calc(1 - var(--stack-depth)*.04));transform-origin:center top;transition:none;box-shadow:0 5px 14px #574a420c}
.learning-grid.is-stack .topic-card h3{font-size:clamp(26px,3vw,36px)}
.learning-grid.is-stack .topic-card p{font-size:18px;max-width:80%}
.learning-grid.is-stack .topic-card>img{width:88px;height:88px;bottom:24px}
@media(max-width:759px){
  .learning-grid.is-stack{--stack-card-height:225px;gap:38svh}
  .learning-grid.is-stack .topic-card{padding:30px 28px;box-shadow:none}
  .learning-grid.is-stack .topic-card p{font-size:16px;max-width:calc(100% - 38px)}
  .learning-grid.is-stack .topic-card>img{width:64px;height:64px}
}
/* Progressive enhancement: only native timelines add the small scale change. */
@supports (animation-timeline: --learning-progress) and (animation-range: contain 0% contain 100%) {
  @media(prefers-reduced-motion:no-preference){
    .learning-grid.is-stack{view-timeline:--learning-progress block;view-timeline-inset:23svh calc(100% - 23svh - var(--stack-slot-height))}
    .learning-grid.is-stack .topic-card{animation:learning-card-depth 1s linear both;animation-timeline:--learning-progress;animation-range:contain 0% contain 100%}
    .is-stack .learning-stack-slot:nth-child(2) .topic-card{animation-range:contain 45% contain 100%}
    .is-stack .learning-stack-slot:last-child .topic-card{animation:none;transform:none}
  }
}
@keyframes learning-card-depth{from{transform:scale(1)}to{transform:scale(calc(1 - var(--stack-depth)*.04))}}
@media print{.learning-grid.is-stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:0;max-width:none}.is-stack .learning-stack-slot{display:contents}.learning-grid.is-stack .topic-card{position:relative;transform:none!important;animation:none!important}}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important;
  }
  [data-parallax] {
    transform: none !important;
  }
  .motion-ready [data-reveal] {
    opacity: 1;
    transform: none !important;
  }
  .slider-track {
    scroll-behavior: auto;
  }
}
@media (forced-colors: active) {
  .topic-card,
  .reward-card,
  .button,
  .menu-toggle,
  .stats > [data-slide],
  .welcome-card {
    border: 2px solid ButtonText;
  }
  .slider-dot:before {
    background: ButtonText;
  }
  .hero-logo,
  .footer-brand img {
    background: #574a42;
  }
  .hero-circle,
  .hero-dot {
    display: none;
  }
}
@media print {
  .slider-tail {
    display: none;
  }
  .hero-art {
    height: 170px;
  }
  .hero {
    height: 230px;
  }
  .site-header {
    height: 60px;
  }
  .menu-toggle,
  .slider-controls,
  .hero-plane-layer,
  .hero-balloon-layer,
  .hero-wave,
  .costume-parade,
  .footer-elmo-layer,
  .footer-wave,
  .section-wave {
    display: none !important;
  }
  .slider-track {
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    padding: 8px var(--gutter);
  }
  .slider-track > [data-slide] {
    flex-basis: 30%;
    min-height: 0;
  }
  .welcome-track {
    display: block;
  }
  .welcome-card {
    min-height: 260px;
  }
  .welcome-card-second {
    display: none;
  }
  .welcome-copy {
    padding: 25px;
  }
  .section-space {
    padding-block: 30px;
  }
  .rewards-content {
    padding-block: 30px;
  }
  .parents-section {
    padding-bottom: 30px;
  }
  .site-footer {
    padding: 20px;
  }
  .footer-brand {
    height: 160px;
    margin: 0;
  }
  .footer-brand img {
    width: 200px;
  }
  .footer-brand > span {
    width: 160px;
    height: 160px;
  }
  .topic-card,
  .reward-card,
  .stats > [data-slide],
  .parents-banner,
  .no-ads {
    break-inside: avoid;
  }
  .motion-ready [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .hero-art [data-parallax] {
    transform: none;
  }
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Yellow canvas also covers Safari's overscroll and iPhone safe areas. */
main, .legal-surface { background: var(--cream); }
.hero, .legal-header { padding-top: env(safe-area-inset-top, 0px); }
.site-footer { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Quiet text-link feedback with no decorative lines or shapes. */
.main-nav a, .header-login, .footer-nav a, .back-link {
  transition: color .25s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
:is(.main-nav a,.header-login,.footer-nav a,.back-link):focus-visible {
  color: var(--button-red);
  text-decoration: none;
}
.button {position:relative;isolation:isolate;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,background .25s ease}
.button::before {content:"";position:absolute;z-index:-1;inset:-50% -30%;background:linear-gradient(110deg,transparent 30%,#ffffff30 48%,transparent 66%);transform:translateX(-110%);transition:transform .65s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.button:focus-visible::before {transform:translateX(110%)}
.topic-card h3 {transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.topic-card>img {transition:transform .45s cubic-bezier(.2,.8,.2,1)}
a.topic-card[href]:focus-visible h3 {transform:translateX(4px)}
a.topic-card[href]:focus-visible>img {transform:rotate(7deg) scale(1.08)}
@media (hover:hover) and (pointer:fine) {
  :is(.main-nav a,.header-login,.footer-nav a,.back-link):hover {text-decoration:none;color:var(--button-red);transform:translateY(-2px)}
  .button:hover {transform:translateY(-3px) rotate(-1deg);box-shadow:0 7px 0 #9b351e20,0 12px 22px #574a4212}
  .button:hover::before {transform:translateX(110%)}
  .button:active {transform:translateY(0) scale(.97);box-shadow:none}
  a.topic-card[href]:hover h3 {transform:translateX(4px)}
  a.topic-card[href]:hover>img {transform:rotate(7deg) scale(1.08)}
}

/* Editorial benefit rows, with original two-tone SVG illustrations. */
.benefits-panel{margin:44px 0 48px;padding:16px 0;background:transparent;border:0;border-radius:0}
.benefits-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 34px;list-style:none;padding:0;margin:0}
.benefit{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:20px;min-width:0}
.benefit-art{display:grid;place-items:center;width:112px;height:120px;position:relative;isolation:isolate}
.benefit-art:before{content:"";position:absolute;inset:12px 2px 6px;border-radius:44% 56% 54% 46% / 55% 41% 59% 45%;z-index:-1;transform:rotate(-8deg)}
.benefit-art-mint:before{background:#d9eee6}.benefit-art-peach:before{background:#ffe2d4}.benefit-art-lilac:before{background:#eee4f3}.benefit-art-yellow:before{background:#ffedb4}
.benefit-art img{width:112px;height:112px;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.benefit h3{font-size:23px;font-weight:700;line-height:1.2;letter-spacing:-.015em;margin:0 0 12px}
.benefit h3 strong{font-weight:800}
.benefit p{font-size:14px;line-height:1.55;max-width:270px;color:#6b5b50}
@media(max-width:900px){.benefits-grid{column-gap:24px}.benefit{grid-template-columns:88px minmax(0,1fr);gap:14px}.benefit-art{width:88px;height:106px}.benefit-art img{width:96px;max-width:none;height:96px}.benefit h3{font-size:21px}}
@media(max-width:650px){.benefits-panel{padding:8px 0;margin:36px 0 40px}.benefits-grid{grid-template-columns:minmax(0,1fr);gap:36px}.benefit{grid-template-columns:98px minmax(0,1fr);gap:20px}.benefit-art{width:98px;height:112px}.benefit-art img{width:108px;height:108px}.benefit h3{font-size:24px;margin-bottom:10px}.benefit p{font-size:15px}}
@media(max-width:390px){.benefits-panel{padding:8px 0}.benefit{grid-template-columns:78px minmax(0,1fr);gap:14px}.benefit-art{width:78px;height:98px}.benefit-art img{width:90px;height:90px}.benefit h3{font-size:21px}.benefit p{font-size:14px}}
@media print{.benefit{break-inside:avoid}.benefits-panel{padding:0}.benefits-grid{gap:24px}}

/* Benefit icons share the flat fills and light interior details of the topic icons. */
.benefit-art::before{content:none}

/* Fixed app entry with room for the iPhone home indicator. */
.app-banner{position:fixed;z-index:50;inset:auto 0 0;background:#e5ddf5;padding:12px 0;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));color:var(--ink);box-shadow:0 -4px 24px #574a4212}
.app-banner-inner{display:grid;grid-template-columns:auto 52px minmax(0,1fr) auto;align-items:center;gap:18px}
.app-banner-close{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;color:var(--ink);background:transparent;transition:background .2s}
.app-banner-close:hover{background:#ffffff70}
.app-banner-icon{width:52px;height:52px;border-radius:13px}
.app-banner-copy p{font-family:Baloo,Arial,sans-serif;font-size:21px;line-height:1.2;font-weight:800}
.app-banner-copy span{display:block;margin-top:3px;font-size:14px;line-height:1.4}
.app-banner-link{white-space:nowrap;font-size:18px;padding-inline:25px;min-height:44px}
body:has(>.app-banner:not([hidden])){padding-bottom:var(--app-banner-height,calc(80px + env(safe-area-inset-bottom,0px)))}
html:has(.app-banner:not([hidden])){scroll-padding-bottom:calc(var(--app-banner-height,80px) + 16px)}
@media(max-width:540px){
  .app-banner{padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .app-banner-inner{width:calc(100% - 24px);grid-template-columns:30px 44px minmax(0,1fr) auto;gap:10px}
  .app-banner-close{width:30px;height:44px}
  .app-banner-icon{width:44px;height:44px;border-radius:11px}
  .app-banner-copy p{font-size:16px;line-height:1.15}
  .app-banner-copy span{display:none}
  .app-banner-link{font-size:16px;padding:10px 16px;min-height:44px}
}
@media print{.app-banner{display:none!important}}

.app-banner-close{grid-column:1;grid-row:1}.app-banner-icon{grid-column:2;grid-row:1}.app-banner-copy{grid-column:3;grid-row:1}.app-banner-link{grid-column:4;grid-row:1}

@media print{body:has(>.app-banner){padding-bottom:0}}

@media(min-width:760px){.app-banner-inner{max-width:760px;gap:14px}}

/* A quiet, floating navigation appears when returning up the page. */
.site-header-slot{height:98px}
.scroll-navigation{position:absolute;top:env(safe-area-inset-top,0px);left:50%;margin:0;transform:translateX(-50%);z-index:60}
.scroll-navigation.is-floating{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));width:min(920px,calc(100% - 40px));height:74px;padding:0 24px;gap:26px;border:1px solid #e9dfce;border-radius:999px;background:#fffaf2;box-shadow:0 8px 30px #574a421a;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,calc(-100% - 30px - env(safe-area-inset-top,0px)));transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility .3s}
.scroll-navigation.is-floating.is-visible,.scroll-navigation.is-floating:focus-within{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.scroll-navigation.is-floating .brand-mark img{width:44px}
html:has(.scroll-navigation){scroll-padding-top:calc(110px + env(safe-area-inset-top,0px))}
@media(max-width:759px){
  .site-header-slot{height:84px}
  .scroll-navigation.is-floating{top:calc(10px + env(safe-area-inset-top,0px));width:calc(100% - 28px);height:66px;padding:0 10px 0 18px;gap:20px}
  .scroll-navigation.is-floating .brand-mark{min-width:40px}
  .scroll-navigation.is-floating .brand-mark img{width:40px}
  .scroll-navigation.is-floating .menu-toggle{width:46px;height:46px}
  .scroll-navigation.is-floating .main-nav{top:76px;border-radius:24px}
}
@media(max-width:479px){.site-header-slot{height:76px}}
@media print{.scroll-navigation{display:none}.site-header-slot{height:60px}}

.scroll-navigation.is-floating .brand-mark{justify-content:center;min-width:48px;width:48px;height:48px;flex:none;border-radius:50%;background:var(--yellow)}
.scroll-navigation.is-floating .brand-mark img{width:34px}
@media(max-width:759px){.scroll-navigation.is-floating .brand-mark{min-width:44px;width:44px;min-height:44px;height:44px}.scroll-navigation.is-floating .brand-mark img{width:32px}}

/* Align the round logo with the rounded end of the floating navigation. */
.scroll-navigation.is-floating{padding-inline:12px}
.scroll-navigation.is-floating .brand-mark{display:grid;place-items:center;padding:0}
.scroll-navigation.is-floating .brand-mark img{display:block;margin:0}
.scroll-navigation .header-login{justify-content:center;min-height:44px;padding:11px 22px;border-radius:999px;background:var(--button-red);color:#fff;line-height:1.2;text-decoration:none;transition:background .25s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.scroll-navigation .header-login:focus-visible{color:#fff}
@media(hover:hover) and (pointer:fine){.scroll-navigation .header-login:hover{color:#fff;background:#b83c24;text-decoration:none;transform:translateY(-2px)}}
@media(max-width:759px){.scroll-navigation.is-floating{padding-inline:10px}.scroll-navigation .header-login{padding-inline:18px}}
@media(max-width:359px){.scroll-navigation.is-floating{gap:12px}.scroll-navigation .header-login{padding-inline:15px}}

.scroll-navigation.is-floating{background:#fffaf2;border-color:#e9dfce}

.benefit-art img{width:96px;height:96px}
@media(max-width:900px){.benefit-art img{width:82px;height:82px}}
@media(max-width:650px){.benefit-art img{width:92px;height:92px}}
@media(max-width:390px){.benefit-art img{width:76px;height:76px}}

.scroll-navigation.is-floating.is-positioning{transition:none!important}



/* Open learning stages echo the typography and flat illustrations used throughout. */
.grade-section{padding:28px 0 48px}
.grade-intro{text-align:center;max-width:650px;margin:0 auto 44px}
.grade-intro>p{max-width:570px;margin:22px auto 0;font-size:17px}
.grade-path{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;list-style:none;margin:0;padding:0}
.grade-card{--grade-color:#2996a2;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;min-width:0;padding:0;background:none;border:0;border-radius:0}
.grade-one{--grade-color:#ef694b}.grade-two{--grade-color:#8b7bd8}.grade-three{--grade-color:#dfa100}.grade-four{--grade-color:#dc6788}
.grade-symbol{display:grid;place-items:center;flex:none;width:100px;height:112px;background:none;color:var(--grade-color);font:800 100px/1 Baloo,Arial,sans-serif;letter-spacing:-.04em}
.grade-symbol svg{width:94px;height:94px}
.grade-card h3{font-size:26px;line-height:1.2;margin:0 0 10px}
.grade-card p{font-size:16px;line-height:1.45;max-width:175px}
.grade-note{text-align:center;font-size:14px;margin:36px auto 0;color:#6b5b50}
@media(max-width:1050px) and (min-width:760px){.grade-path{gap:18px}.grade-symbol{width:88px;height:100px;font-size:88px}.grade-symbol svg{width:84px;height:84px}.grade-card h3{font-size:23px}.grade-card p{font-size:15px}}
@media(max-width:759px){
  .grade-section{padding:24px 0 32px}
  .grade-intro{margin-bottom:32px}.grade-intro>p{font-size:16px}
  .grade-path{grid-template-columns:minmax(0,1fr);gap:26px;max-width:430px;margin-inline:auto}
  .grade-card{flex-direction:row;align-items:center;gap:24px;text-align:left}
  .grade-symbol{width:80px;height:86px;font-size:82px}
  .grade-symbol svg{width:78px;height:78px}
  .grade-card h3{font-size:26px;margin-bottom:7px}.grade-card p{font-size:16px;max-width:none}
  .grade-note{max-width:300px;font-size:14px;margin-top:30px}
}
@media(max-width:359px){.grade-card{gap:18px}.grade-symbol{width:70px;height:80px;font-size:76px}.grade-symbol svg{width:70px;height:70px}.grade-card h3{font-size:24px}}
@media print{.grade-section{padding-block:24px}.grade-path{grid-template-columns:repeat(5,minmax(0,1fr))}.grade-card{flex-direction:column;text-align:center;break-inside:avoid}}