/*
 * Jiggly Kids homepage polish layer.
 * Keep this file last in the bundle so the CMS content and older visual
 * layers remain compatible while spacing and hierarchy stay predictable.
 */

:root {
  --jk-shell: min(1180px, calc(100% - 40px));
  --jk-section-space: clamp(78px, 8vw, 112px);
  --jk-card-radius: 28px;
}

body {
  text-rendering: optimizeLegibility;
}

section[id] {
  scroll-margin-top: 24px;
}

.page-shell {
  width: var(--jk-shell);
}

/* Make the first screen feel intentional instead of vertically oversized. */
.hero {
  min-height: 0;
  padding-bottom: 24px;
}

.hero-grid {
  min-height: clamp(560px, calc(100svh - 174px), 720px);
  padding-block: 22px 30px;
}

.hero-copy {
  max-width: 570px;
}

.hero h1 {
  max-width: 620px;
  margin-bottom: 20px;
}

.hero-lead {
  max-width: 540px;
}

.hero-actions {
  margin-top: 24px;
}

.proof-grid {
  gap: 12px;
  padding-bottom: 56px;
}

.proof-grid article {
  min-height: 86px;
  padding: 14px 16px;
  border-radius: 22px;
}

.proof-icon {
  flex-basis: 44px;
  width: 44px;
  height: 44px;
  font-size: 24px;
}

/* One spacing rhythm across every major section. */
.method-preview,
.journey-section,
.games-section,
.sample-section,
.parents-section,
.faq-section {
  padding-block: var(--jk-section-space);
}

.method-preview h2,
.section-heading h2,
.sample-heading h2,
.parents-copy h2,
.faq-heading h2,
.final-copy h2 {
  text-wrap: balance;
}

.method-mini-grid,
.journey-grid,
.sample-stages-grid,
.parent-benefits,
.faq-list {
  margin-top: 38px;
}

.method-mini-grid article,
.journey-card,
.sample-stage-card,
.parent-benefits article,
.faq-list details {
  border-radius: var(--jk-card-radius);
}

.journey-card {
  min-height: 330px;
}

.sample-stage-card {
  min-height: 260px;
}

.games-heading {
  margin-bottom: 34px;
}

.game-feature {
  border-radius: 34px;
  min-height: 500px;
}

.games-roadmap {
  margin-top: 16px;
}

.parents-grid,
.faq-grid {
  gap: clamp(38px, 6vw, 76px);
}

.parent-dashboard {
  border-radius: var(--jk-card-radius);
}

.faq-heading {
  top: 28px;
}

.final-cta {
  padding-block: clamp(70px, 7vw, 92px);
}

.final-cta-card {
  border-radius: 30px;
}

.site-footer {
  padding-top: 58px;
}

/* Keep the navigation calm when the CMS contains several links. */
.desktop-nav {
  gap: clamp(16px, 2.2vw, 32px);
}

.desktop-nav a {
  white-space: nowrap;
}

.header-cta {
  white-space: nowrap;
}

@media (width <= 920px) {
  .hero-grid {
    min-height: 0;
  }

  .portal-wrap {
    min-height: 500px;
  }

  .method-mini-grid,
  .journey-grid,
  .sample-stages-grid {
    gap: 13px;
  }
}

@media (width <= 620px) {
  :root {
    --jk-shell: min(100% - 28px, 1180px);
    --jk-section-space: 78px;
    --jk-card-radius: 24px;
  }

  .hero {
    padding-bottom: 8px;
  }

  .hero-grid {
    padding-block: 20px 12px;
  }

  .hero-actions {
    gap: 10px;
    margin-top: 20px;
  }

  .proof-grid {
    gap: 9px;
    padding-bottom: 68px;
  }

  .proof-grid article {
    min-height: 76px;
  }

  .portal-wrap {
    min-height: 390px;
  }

  .method-mini-grid,
  .journey-grid,
  .sample-stages-grid,
  .parent-benefits,
  .faq-list {
    margin-top: 28px;
  }

  .game-feature {
    border-radius: 27px;
  }

  .site-footer {
    padding-top: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-parallax-layer] {
    transition: none;
  }
}