/*
 * Calm storybook background for the Growing-Up Roadmap.
 *
 * Personality now comes from the child characters and the trail. The section
 * background stays intentionally quiet so it remains consistent with the rest
 * of the homepage.
 */

.browse-age {
  isolation: isolate;
  background: linear-gradient(180deg, #fbfdff 0%, #f5fbfe 58%, #fdfbf5 100%);
}

.browse-age .isp-container {
  position: relative;
  z-index: 2;
}

.browse-age .isp-container::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: -92px;
  left: 0;
  height: 150px;
  pointer-events: none;
  border-radius: 36px 36px 0 0;
  background:
    radial-gradient(65% 125% at 18% 100%, rgba(181, 222, 242, .38) 0 46%, transparent 46.5%),
    radial-gradient(68% 120% at 78% 100%, rgba(238, 246, 221, .48) 0 44%, transparent 44.5%);
}

/* Keep every roadmap CTA label and arrow completely static. */
.age-card__arrow,
.age-card__arrow svg,
.age-card:hover .age-card__arrow svg,
.age-card:focus-visible .age-card__arrow svg {
  animation: none;
  transition: none;
  transform: none;
}

/*
 * Static first-paint CTA fallback.
 * Some performance setups delay deferred JavaScript until the first user
 * interaction. These labels keep the CTA visible immediately. Once JavaScript
 * adds the editable CTA span, :has() removes the fallback automatically.
 */
.age-card:nth-child(1) .age-card__arrow:not(:has(.age-card__cta-label))::before {
  content: "Find their next little win";
}

.age-card:nth-child(2) .age-card__arrow:not(:has(.age-card__cta-label))::before {
  content: "Feed their curiosity";
}

.age-card:nth-child(3) .age-card__arrow:not(:has(.age-card__cta-label))::before {
  content: "Build school confidence";
}

.age-card:nth-child(4) .age-card__arrow:not(:has(.age-card__cta-label))::before {
  content: "Challenge their thinking";
}

.age-card:nth-child(5) .age-card__arrow:not(:has(.age-card__cta-label))::before {
  content: "Discover independent ideas";
}

.age-card:nth-child(6) .age-card__arrow:not(:has(.age-card__cta-label))::before {
  content: "Grow their big ideas";
}

@media (max-width: 700px) {
  .browse-age .isp-container::before {
    bottom: -58px;
    height: 94px;
    border-radius: 24px 24px 0 0;
  }
}