/*
 * Homepage Growing-Up Roadmap.
 *
 * The route is part of the milestone composition rather than a decoration
 * above it. Desktop uses a 3 + 3 serpentine journey and mobile becomes a
 * simple vertical trail.
 */

.browse-age {
  position: relative;
  overflow: hidden;
  padding-block: clamp(68px, 7vw, 92px) clamp(76px, 7vw, 96px);
  border: 0;
  background: var(--isp-home-surface-sky, #f2f9fd);
}

.age-panel {
  width: 100%;
  margin: 0;
  padding: 0;
}

.browse-age .home-section-head {
  justify-content: center;
  margin-bottom: clamp(38px, 4vw, 52px);
  text-align: center;
}

.browse-age .home-section-head--center {
  justify-content: center;
  text-align: center;
}

.browse-age .home-section-head > div {
  width: min(100%, 760px);
  margin-inline: auto;
}

.browse-age .section-kicker {
  margin-bottom: 10px;
  color: #347da8;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.browse-age .home-section-head h2 {
  margin: 0 0 12px;
  color: var(--isp-ink, #444);
  font-size: clamp(2.25rem, 4vw, 3.45rem);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1.04;
  text-wrap: balance;
}

.browse-age .home-section-head p {
  max-width: 660px;
  margin-inline: auto;
  color: #666366;
  line-height: 1.6;
}

.age-roadmap__question,
.age-roadmap__support {
  display: block;
}

.age-roadmap__question {
  margin-bottom: 5px;
  color: #c95887;
  font-size: clamp(1.08rem, 1.8vw, 1.38rem);
  font-weight: 850;
  letter-spacing: -.018em;
}

.age-roadmap__support {
  color: #696568;
  font-size: .98rem;
}

.age-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 78px 32px;
  padding: 44px 44px 38px;
  isolation: isolate;
}

/* The road runs through both rows and turns at the right edge. */
.age-grid::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 650' preserveAspectRatio='none'%3E%3Cpath d='M32 175 C120 175 120 175 185 175 L585 175 L1010 175 C1110 175 1140 205 1140 290 C1140 390 1110 475 1010 475 L585 475 L185 475 C120 475 120 475 32 475' fill='none' stroke='%23f0dcc0' stroke-width='28' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M32 175 C120 175 120 175 185 175 L585 175 L1010 175 C1110 175 1140 205 1140 290 C1140 390 1110 475 1010 475 L585 475 L185 475 C120 475 120 475 32 475' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-dasharray='11 13' opacity='.95'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.age-card {
  --age-accent: #3f8fbc;
  --age-soft: #edf8fe;
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 218px;
  padding: 22px 22px 20px;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: 20px;
  align-items: center;
  border: 1px solid rgba(68, 68, 68, .08);
  border-radius: 24px;
  background: rgba(255, 255, 255, .97);
  color: var(--isp-ink, #444);
  text-align: left;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(68, 68, 68, .06), inset 0 -4px 0 var(--age-accent);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.age-card:nth-child(3n + 1) {
  --age-accent: #d45f8f;
  --age-soft: #fff0f6;
}

.age-card:nth-child(3n + 2) {
  --age-accent: #348fc5;
  --age-soft: #edf8fe;
}

.age-card:nth-child(3n) {
  --age-accent: #ad7927;
  --age-soft: #fff5df;
}

/* Continue the route naturally after stop 3. */
.age-card:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
}

.age-card:nth-child(5) {
  grid-column: 2;
  grid-row: 2;
}

.age-card:nth-child(6) {
  grid-column: 1;
  grid-row: 2;
}

.age-card:hover,
.age-card:focus-visible {
  border-color: rgba(68, 68, 68, .14);
  box-shadow: 0 17px 36px rgba(68, 68, 68, .09), inset 0 -4px 0 var(--age-accent);
  transform: translateY(-3px);
}

.age-card:focus-visible {
  outline: 3px solid rgba(115, 192, 238, .38);
  outline-offset: 4px;
}

.age-card__stop {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: -22px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--age-accent);
  color: #fff;
  box-shadow: 0 5px 14px rgba(68, 68, 68, .13);
  font-size: .86rem;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-50%);
}

.age-card:nth-child(n + 4) .age-card__stop {
  right: -22px;
  left: auto;
}

.age-card__character {
  grid-column: 1;
  grid-row: 1 / 5;
  width: 112px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--age-soft);
}

.age-card__character svg {
  width: 108px;
  height: 108px;
  display: block;
  transform-origin: 50% 82%;
  animation: isp-age-character-life 5.8s ease-in-out infinite;
}

/* Stagger characters so the section feels alive without moving as one unit. */
.age-card:nth-child(2) .age-card__character svg {
  animation-delay: -1.1s;
}

.age-card:nth-child(3) .age-card__character svg {
  animation-delay: -2.3s;
}

.age-card:nth-child(4) .age-card__character svg {
  animation-delay: -3.4s;
}

.age-card:nth-child(5) .age-card__character svg {
  animation-delay: -4.5s;
}

.age-card:nth-child(6) .age-card__character svg {
  animation-delay: -5.2s;
}

.age-card__number {
  grid-column: 2;
  grid-row: 1;
  width: fit-content;
  margin-bottom: 7px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--age-soft);
  color: var(--age-accent);
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.age-card__label {
  grid-column: 2;
  grid-row: 2;
  display: block;
  margin-bottom: 7px;
  color: #414143;
  font-size: clamp(1.08rem, 1.35vw, 1.28rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.022em;
}

.age-card__description {
  grid-column: 2;
  grid-row: 3;
  display: block;
  max-width: 30ch;
  color: #575356;
  font-size: .9rem;
  font-weight: 680;
  line-height: 1.48;
  text-wrap: balance;
}

.age-card__arrow {
  grid-column: 2;
  grid-row: 4;
  width: fit-content;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--age-accent);
  font-size: .8rem;
  font-weight: 900;
  line-height: 1.15;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.age-card__cta-label {
  white-space: normal;
}

.age-card__arrow svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: currentColor;
  animation: isp-age-cta-nudge 4.2s ease-in-out infinite;
  transition: transform .18s ease;
}

.age-card:nth-child(2) .age-card__arrow svg {
  animation-delay: -.7s;
}

.age-card:nth-child(3) .age-card__arrow svg {
  animation-delay: -1.4s;
}

.age-card:nth-child(4) .age-card__arrow svg {
  animation-delay: -2.1s;
}

.age-card:nth-child(5) .age-card__arrow svg {
  animation-delay: -2.8s;
}

.age-card:nth-child(6) .age-card__arrow svg {
  animation-delay: -3.5s;
}

.age-card:hover .age-card__arrow svg,
.age-card:focus-visible .age-card__arrow svg {
  animation: none;
  transform: translateX(4px);
}

.age-card:hover .age-card__character svg,
.age-card:focus-visible .age-card__character svg {
  animation-duration: 3.2s;
}

@keyframes isp-age-character-life {
  0%,
  62%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  72% {
    transform: translateY(-2px) rotate(-.7deg);
  }

  82% {
    transform: translateY(0) rotate(.55deg);
  }

  90% {
    transform: translateY(-1px) rotate(0deg);
  }
}

@keyframes isp-age-cta-nudge {
  0%,
  70%,
  100% {
    transform: translateX(0);
  }

  78% {
    transform: translateX(3px);
  }

  86% {
    transform: translateX(0);
  }

  92% {
    transform: translateX(2px);
  }
}

@media (max-width: 980px) {
  .age-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    padding: 20px 30px;
  }

  .age-grid::before {
    display: none;
  }

  .age-card:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }

  .age-card__stop,
  .age-card:nth-child(n + 4) .age-card__stop {
    top: -16px;
    right: auto;
    left: 22px;
    transform: none;
  }
}

@media (max-width: 700px) {
  .browse-age {
    padding-block: 56px 64px;
  }

  .browse-age .home-section-head {
    justify-content: flex-start;
    margin-bottom: 30px;
    text-align: left;
  }

  .browse-age .home-section-head--center {
    justify-content: flex-start;
    text-align: left;
  }

  .browse-age .home-section-head > div,
  .browse-age .home-section-head p {
    margin-inline: 0;
  }

  .browse-age .home-section-head h2 {
    font-size: clamp(2.05rem, 10vw, 2.8rem);
  }

  .age-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 6px 0 6px 48px;
  }

  .age-grid::before {
    display: block;
    z-index: 0;
    inset: 14px auto 14px 18px;
    width: 8px;
    height: auto;
    border-radius: 999px;
    background: linear-gradient(180deg, #f0dcc0, #f4e6d3);
  }

  .age-grid::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 20px;
    bottom: 20px;
    left: 21px;
    width: 2px;
    background: repeating-linear-gradient(to bottom, #fff 0 7px, transparent 7px 14px);
  }

  .age-card {
    min-height: 168px;
    padding: 18px;
    grid-template-columns: 86px minmax(0, 1fr);
    column-gap: 15px;
    border-radius: 21px;
  }

  .age-card__stop,
  .age-card:nth-child(n + 4) .age-card__stop {
    top: 50%;
    right: auto;
    left: -49px;
    width: 36px;
    height: 36px;
    border-width: 3px;
    transform: translateY(-50%);
  }

  .age-card__character {
    width: 82px;
    height: 82px;
  }

  .age-card__character svg {
    width: 80px;
    height: 80px;
  }

  .age-card__number {
    margin-bottom: 5px;
  }

  .age-card__label {
    font-size: 1.08rem;
  }

  .age-card__description {
    max-width: 100%;
    font-size: .88rem;
  }

  .age-card__arrow {
    margin-top: 10px;
  }
}

@media (max-width: 390px) {
  .age-grid {
    padding-left: 43px;
  }

  .age-grid::before {
    left: 15px;
  }

  .age-grid::after {
    left: 18px;
  }

  .age-card {
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 12px;
    padding: 16px 14px;
  }

  .age-card__stop,
  .age-card:nth-child(n + 4) .age-card__stop {
    left: -44px;
    width: 33px;
    height: 33px;
  }

  .age-card__character {
    width: 68px;
    height: 68px;
  }

  .age-card__character svg {
    width: 67px;
    height: 67px;
  }
}

@media (hover: none) {
  .age-card:hover {
    border-color: rgba(68, 68, 68, .08);
    box-shadow: 0 12px 30px rgba(68, 68, 68, .06), inset 0 -4px 0 var(--age-accent);
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .age-card,
  .age-card__character svg,
  .age-card__arrow svg {
    animation: none;
    transition: none;
  }
}