@font-face {
  font-family: "Barlow";
  src: url("/fonts/barlow-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("/fonts/barlow-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/barlow-condensed-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --measure: 44rem;
  --space-block: clamp(5.5rem, 11vw, 9.5rem);
  --navy: #18236d;
  --navy-deep: #101847;
  --coral: #ff7048;
  --coral-dark: #b72d0b;
  --yellow: #ffd768;
  --sky: #edf3ff;
  --mint: #e8f6eb;
  --garden: #439f84;
  --garden-deep: #26745f;
  --cream: #fff8e8;
  --paper: #fffefa;
  --ink: #222941;
  --muted: #626981;
  --line: #dce1ef;
  --container: min(calc(100% - 2.5rem), 75rem);
  --radius: 1.25rem;
  --shadow: 0 24px 60px rgba(24, 35, 109, 0.12);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Required by Lenis. Native smooth scrolling has to yield while Lenis owns the
   scroll position, otherwise the two animate against each other. */
html.lenis,
html.lenis body {
  height: auto;
}

/* Keyed off the class the enhancement script sets, because Lenis only applies
   its own `lenis-smooth` class in some configurations. */
.has-enhanced-motion,
.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Barlow", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--yellow);
  color: var(--navy-deep);
}

a {
  color: inherit;
  text-underline-offset: 0.22em;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 4px;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--yellow);
  color: var(--navy-deep);
  font-weight: 600;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 254, 250, 0.96);
}

/* On the homepage the nav belongs to the hero banner rather than sitting above
   it, so it floats over the scene. The scene's top gradient is what keeps the
   navy nav readable against the sky underneath. */
.site-header--overlay {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 0;
  background: transparent;
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  min-height: 4.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  width: max-content;
  color: var(--navy);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.brand svg {
  width: 1.85rem;
  height: 1.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-inner nav {
  display: flex;
  justify-content: center;
  gap: clamp(1.2rem, 3vw, 2.5rem);
}

.header-inner nav a,
.site-footer nav a {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.header-inner nav a:hover,
.site-footer nav a:hover {
  color: var(--navy);
  text-decoration: underline;
}

.header-inner nav a[aria-current="page"] {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 3.25rem;
  padding: 0.8rem 1.25rem;
  border: 2px solid var(--navy);
  border-radius: 0.7rem;
  background: var(--navy);
  color: white;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 7px 0 var(--navy-deep);
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.button:hover {
  transform: translateY(2px);
  box-shadow: 0 4px 0 var(--navy-deep);
}

.button--small {
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  font-size: 0.88rem;
  box-shadow: none;
}

.button--yellow {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--navy-deep);
  box-shadow: 0 7px 0 #c9a52f;
}

.button--yellow:hover {
  box-shadow: 0 4px 0 #c9a52f;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.2rem;
  color: var(--coral-dark);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.eyebrow span {
  width: 1.8rem;
  height: 2px;
  background: currentColor;
}

.eyebrow--light {
  color: var(--yellow);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.text-link {
  color: var(--navy);
  font-weight: 600;
}

.activity-label {
  margin-bottom: 0.35rem;
  color: var(--coral-dark);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.section {
  padding: clamp(5rem, 10vw, 8.5rem) 0;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.65fr);
  align-items: end;
  gap: clamp(2rem, 8vw, 8rem);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.section-heading .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: -1rem;
}

.section-heading h2 {
  margin-bottom: 0;
  color: var(--navy);
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.section-heading > p:last-child {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.section-heading--compact {
  display: block;
  max-width: 48rem;
}

.section-heading--compact .eyebrow {
  margin-bottom: 1.2rem;
}

.section--aspects {
  border-top: 1px solid var(--line);
  background: white;
}

.aspects-layout {
  display: grid;
  grid-template-columns: minmax(20rem, 0.8fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(3rem, 9vw, 9rem);
}

.aspects-layout .section-heading {
  margin-bottom: 0;
}

.aspects-layout .section-heading > p:last-child {
  margin-top: 1.4rem;
}

.aspects-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--navy);
  list-style: none;
}

.aspects-list li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}

.aspects-list li > span {
  color: var(--coral-dark);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
}

.aspects-list h3 {
  margin-bottom: 0.15rem;
  color: var(--navy);
  font-size: 1.1rem;
}

.aspects-list p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.section--age {
  background: var(--sky);
}

.age-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid #cfd8f0;
}

.age-grid article {
  min-width: 0;
  padding: 2rem 1.5rem;
}

.age-grid article + article {
  border-left: 1px solid #cfd8f0;
}

.age-grid article > p:first-child {
  margin-bottom: 3rem;
  color: var(--coral-dark);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
}

.age-grid h3 {
  margin-bottom: 0.5rem;
  color: var(--navy);
  font-size: 1.35rem;
  line-height: 1.1;
}

.age-grid article > p:last-of-type {
  min-height: 5rem;
  color: var(--muted);
}

.age-grid a {
  color: var(--navy);
  font-weight: 600;
}

.old-price {
  margin-bottom: 0;
  color: var(--muted);
}

.price {
  display: block;
  margin-bottom: 1rem;
  color: var(--navy);
  font-size: clamp(2.7rem, 5vw, 4rem);
  letter-spacing: -0.04em;
  line-height: 1;
}

.guarantee {
  margin-bottom: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.guarantee strong {
  color: var(--ink);
}

.section--about {
  background: var(--mint);
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(18rem, 0.65fr) minmax(0, 1fr);
  gap: clamp(3rem, 8vw, 8rem);
}

.faq-list {
  border-top: 1px solid var(--navy);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  position: relative;
  padding: 1.35rem 3rem 1.35rem 0;
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 0.2rem;
  color: var(--coral-dark);
  font-size: 1.4rem;
  transform: translateY(-50%);
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-list details p {
  max-width: 45rem;
  padding: 0 3rem 1.35rem 0;
  color: var(--muted);
}

.guide-hero {
  overflow: hidden;
  padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(4rem, 8vw, 7rem);
  background: var(--sky);
}

.guide-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(24rem, 0.85fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 7rem);
}

.guide-hero h1 {
  max-width: 12ch;
  margin-bottom: 1.5rem;
  color: var(--navy);
  font-size: clamp(3.3rem, 6.5vw, 6.25rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.94;
}

.guide-hero__lede {
  max-width: 42rem;
  margin-bottom: 2rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
}

.guide-hero__media {
  margin: 0;
  padding: clamp(1.4rem, 4vw, 2.5rem);
  border-radius: var(--radius);
  background: var(--navy);
  box-shadow: var(--shadow);
}

.guide-hero__media img {
  width: 100%;
  min-height: 19rem;
  object-fit: contain;
}

.guide-hero__media figcaption {
  max-width: 27rem;
  margin-top: 1.25rem;
  color: #e1e5ff;
  font-size: 0.88rem;
}

.guide-summary {
  border-block: 1px solid var(--line);
  background: white;
}

.guide-summary .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.guide-summary p {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 1.5rem clamp(1rem, 3vw, 2rem);
}

.guide-summary p + p {
  border-left: 1px solid var(--line);
}

.guide-summary strong {
  color: var(--navy);
  font-size: 1.3rem;
}

.guide-summary span {
  color: var(--muted);
  font-size: 0.85rem;
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--line);
}

.audience-grid article {
  padding: 2rem 1.5rem;
}

.audience-grid article + article {
  border-left: 1px solid var(--line);
}

.audience-grid h3 {
  margin-bottom: 0.55rem;
  color: var(--navy);
  font-size: 1.2rem;
}

.audience-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.guide-method {
  background: var(--navy);
  color: white;
}

.guide-method__grid {
  display: grid;
  grid-template-columns: minmax(24rem, 0.9fr) minmax(0, 0.75fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 8rem);
}

.guide-method figure {
  margin: 0;
}

.guide-method figure img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(6, 11, 49, 0.35);
}

.guide-method figcaption {
  margin-top: 0.8rem;
  color: #cdd2ee;
  font-size: 0.82rem;
}

.guide-method .eyebrow {
  color: var(--yellow);
}

.guide-method h2 {
  margin-bottom: 2rem;
  color: white;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.method-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  list-style: none;
}

.method-list li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.method-list li > span {
  color: var(--yellow);
  font-weight: 600;
}

.method-list h3 {
  margin-bottom: 0.2rem;
  font-size: 1.05rem;
}

.method-list p {
  margin: 0;
  color: #cdd2ee;
  font-size: 0.88rem;
}

.guide-aspects {
  border-top: 0;
}

.product-library {
  background: white;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.product-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--paper);
}

.product-card__image {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #f2f2f2;
}

.product-card__image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 240ms ease;
}

.product-card:hover .product-card__image img {
  transform: scale(1.025);
}

.product-card__copy {
  padding: 1.4rem;
}

.product-card__copy > p:first-child {
  margin-bottom: 0.45rem;
  color: var(--coral-dark);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.product-card h3 {
  margin-bottom: 0.5rem;
  color: var(--navy);
  font-size: 1.35rem;
  line-height: 1.1;
}

.product-card__copy > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.guide-offers {
  background: var(--sky);
}

.offer-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.offer-comparison article {
  padding: clamp(1.7rem, 4vw, 3rem);
  border: 1px solid #cfd8f0;
  border-radius: var(--radius);
  background: white;
}

.offer-comparison__primary {
  background: var(--navy) !important;
  color: white;
}

.offer-comparison h3 {
  margin-bottom: 0.75rem;
  color: var(--navy);
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.05;
}

.offer-comparison__primary h3,
.offer-comparison__primary .price {
  color: white;
}

.offer-comparison article > p:not(.activity-label,
.old-price,
.guarantee) {
  max-width: 35rem;
  color: var(--muted);
}

.offer-comparison__primary > p:not(.activity-label,
.old-price,
.guarantee) {
  color: #d3d8f4;
}

.offer-comparison .button {
  margin: 1rem 0 1.5rem;
}

.offer-comparison__primary .guarantee {
  border-color: rgba(255, 255, 255, 0.25);
  color: #d3d8f4;
}

.offer-comparison__primary .guarantee strong {
  color: white;
}

.founder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.founder-grid article {
  display: grid;
  grid-template-columns: 9rem 1fr;
  overflow: hidden;
  border: 1px solid #bdd7c2;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.55);
}

.founder-grid img {
  width: 100%;
  height: 100%;
  min-height: 12rem;
  object-fit: cover;
}

.founder-grid article > div {
  padding: 1.4rem;
}

.founder-grid h3 {
  margin-bottom: 0.15rem;
  color: var(--navy);
  font-size: 1.35rem;
}

.founder-grid article > div > p:first-of-type {
  margin-bottom: 0.8rem;
  color: var(--coral-dark);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
}

.founder-grid article > div > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.affiliate-band {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  border-top: 1px solid #ead18a;
  background: #fff7d9;
}

.affiliate-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.65fr);
  gap: clamp(3rem, 8vw, 8rem);
}

.affiliate-band h2 {
  max-width: 16ch;
  margin: 0;
  color: var(--navy);
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -0.035em;
  line-height: 1;
}

.affiliate-band__inner > div:last-child p {
  color: var(--muted);
}

/* Panduan Stimulasi body; the existing hero stays unchanged until phase two. */
.editorial-opening { overflow: hidden; background: var(--cream); }
.editorial-opening__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(32rem, 1.18fr); align-items: center; gap: clamp(3rem, 8vw, 8rem); }
.editorial-opening__copy h2,
.credential-intro h2,
.activity-method h2,
.immersive-cta h2 { margin-bottom: 1.25rem; color: var(--navy); font-size: clamp(2.8rem, 5.5vw, 5.5rem); font-weight: 600; letter-spacing: -.05em; line-height: .96; }
.editorial-opening__lede,
.activity-method__lede { max-width: 38rem; color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.audience-notes { margin-top: 2.5rem; border-top: 1px solid #e3d5b5; }
.audience-notes p { display: grid; grid-template-columns: minmax(8rem, .6fr) 1fr; gap: 1rem; margin: 0; padding: 1rem 0; border-bottom: 1px solid #e3d5b5; }
.audience-notes strong { color: var(--navy); }
.audience-notes span { color: var(--muted); }
.editorial-opening__media { position: relative; min-height: 43rem; }
.media-frame { margin: 0; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame figcaption { padding-top: .75rem; color: var(--muted); font-size: .82rem; }
.media-frame--portrait { width: min(72%, 28rem); }
.media-frame--portrait img { aspect-ratio: 3 / 4; border-radius: 12rem 12rem 1rem 1rem; box-shadow: var(--shadow); }
.product-note { position: absolute; right: 0; bottom: 0; width: min(62%, 25rem); padding: 1rem; border: 1px solid #d8dded; border-radius: 1.1rem; background: white; box-shadow: var(--shadow); transform: rotate(3deg); }
.product-note img { aspect-ratio: 3 / 2; object-fit: contain; background: var(--sky); }

.credential-section { background: var(--navy); color: white; }
.credential-intro { display: grid; grid-template-columns: 10rem minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); max-width: 62rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.credential-intro > img { width: 10rem; height: 10rem; aspect-ratio: 1; border: .55rem solid rgba(255,255,255,.12); border-radius: 50%; object-fit: cover; }
.credential-intro .eyebrow { color: var(--yellow); }
.credential-intro h2 { max-width: 15ch; color: white; }
.credential-intro > div > p:last-child { max-width: 50rem; margin: 0; color: #d6daf4; }
.credential-gallery { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.credential-card { margin: 0; }
.credential-card > a { position: relative; display: block; overflow: hidden; padding: clamp(.7rem, 2vw, 1.2rem); border: 1px solid rgba(255,255,255,.24); border-radius: 1rem; background: rgba(255,255,255,.08); text-decoration: none; }
.credential-card__media { display: grid; min-height: 20rem; overflow: hidden; border-radius: .45rem; background: #eceae2; place-items: center; }
.credential-card__media img { width: 100%; height: auto; max-height: 38rem; object-fit: contain; }
.credential-card__action { position: absolute; right: 1.5rem; bottom: 1.5rem; padding: .55rem .8rem; border-radius: 999px; background: var(--yellow); color: var(--navy-deep); font-size: .8rem; font-weight: 600; }
.credential-card figcaption { display: grid; gap: .15rem; padding-top: 1rem; }
.credential-card figcaption strong { color: white; font-size: 1.15rem; }
.credential-card figcaption span,
.credential-card figcaption small { color: #cfd4f2; }
.credential-card > a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }

.activity-method { overflow: hidden; background: var(--paper); }
.activity-method__grid { display: grid; grid-template-columns: minmax(23rem, .8fr) minmax(34rem, 1.2fr); align-items: center; gap: clamp(4rem, 9vw, 9rem); }
.activity-method .method-list { margin-top: 2.5rem; border-color: var(--line); }
.activity-method .method-list li { grid-template-columns: 2.6rem 1fr; border-color: var(--line); }
.activity-method .method-list li > span { display: grid; width: 2rem; height: 2rem; border-radius: 50%; background: var(--yellow); color: var(--navy); place-items: center; }
.activity-method .method-list h3 { color: var(--navy); font-size: 1.1rem; }
.activity-method .method-list p { max-width: 34rem; color: var(--muted); }
.activity-page-stack { position: relative; min-height: 46rem; }
.activity-page { position: absolute; top: 2rem; left: 50%; width: min(55%, 21rem); margin: 0; overflow: hidden; border: .7rem solid white; border-radius: .55rem; background: white; box-shadow: 0 24px 60px rgba(24,35,109,.18); transform-origin: 50% 100%; }
.activity-page img { width: 100%; height: auto; aspect-ratio: 700 / 990; object-fit: contain; }
.activity-page--1 { transform: translateX(-105%) rotate(-8deg); }
.activity-page--2 { z-index: 2; transform: translateX(-50%) translateY(-1rem); }
.activity-page--3 { transform: translateX(5%) rotate(8deg); }
.activity-page-stack > p { position: absolute; right: 0; bottom: 0; max-width: 31rem; margin: 0; padding: 1rem 1.2rem; border-left: 4px solid var(--coral); background: var(--cream); color: var(--muted); font-size: .88rem; }

.product-feature { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); margin-bottom: 2rem; padding: clamp(1.5rem, 4vw, 3.25rem); border-radius: var(--radius); background: var(--navy); color: white; }
.product-feature img { width: 100%; max-height: 28rem; object-fit: contain; }
.product-feature h3 { margin-bottom: .75rem; color: white; font-size: clamp(2rem, 4vw, 3.6rem); line-height: .98; }
.product-feature > div > p:last-child { margin: 0; color: #d6daf4; }

.parent-stories { background: var(--cream); }
.parent-stories__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.25rem; }
.parent-story { display: grid; grid-template-columns: minmax(10rem, .75fr) minmax(0, 1.25fr); min-height: 20rem; margin: 0; overflow: hidden; border: 1px solid #e7d7b7; border-radius: var(--radius); background: white; }
.parent-story--feature { grid-row: span 2; grid-template-columns: 1fr; }
.parent-story__media { overflow: hidden; background: #ece7dc; }
.parent-story__media img { width: 100%; height: 20rem; object-fit: cover; }
.parent-story--feature .parent-story__media img { height: 34rem; min-height: 34rem; object-position: center; }
.parent-story__copy { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.3rem, 3vw, 2.2rem); }
.parent-story blockquote { margin: 0 0 2rem; color: var(--navy); font-size: clamp(1.15rem, 2vw, 1.65rem); font-weight: 600; line-height: 1.35; }
.parent-story figcaption { color: var(--coral-dark); font-weight: 600; }
.affiliate-inline { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.affiliate-inline p { margin-bottom: .65rem; color: var(--muted); font-size: .88rem; }
.affiliate-inline a { color: var(--navy); font-size: .88rem; font-weight: 600; }

.immersive-cta { position: relative; min-height: clamp(48rem, 68vw, 62rem); overflow: hidden; padding: clamp(5rem, 9vw, 8rem) 0 0; background: var(--garden); color: white; isolation: isolate; }
.immersive-cta::before { content: ""; position: absolute; z-index: -1; inset: auto -10% -32% 42%; aspect-ratio: 1; border: clamp(3rem, 8vw, 8rem) solid rgba(255,255,255,.08); border-radius: 50%; }
.immersive-cta__content { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .55fr); align-items: end; gap: 3rem; }
.immersive-cta .eyebrow { grid-column: 1 / -1; margin-bottom: -1rem; }
.immersive-cta h2 { max-width: 12ch; margin: 0; color: white; }
.immersive-cta__content > p:not(.eyebrow) { max-width: 35rem; margin-bottom: 1rem; color: #effff9; font-size: 1.05rem; }
.immersive-cta__action { grid-column: 2; }
.immersive-cta__action .button { width: 100%; }
.immersive-cta__action p { position: relative; z-index: 4; display: flex; align-items: baseline; justify-content: flex-end; gap: .8rem; width: max-content; margin: 1rem 0 0 auto; padding: .3rem .65rem; border-radius: 999px; background: rgba(38,116,95,.92); color: white; }
.immersive-cta__action strong { font-size: 1.6rem; }
.immersive-cta__word { position: absolute; z-index: 0; right: -.02em; bottom: 5.5rem; left: -.02em; margin: 0; color: rgba(255,255,255,.95); font-family: "Barlow Condensed", sans-serif; font-size: clamp(8rem, 22vw, 25rem); font-weight: 700; letter-spacing: -.055em; line-height: .62; text-align: center; white-space: nowrap; }
.immersive-cta__products { position: absolute; z-index: 2; right: 50%; bottom: 0; width: min(88rem, 84vw); max-width: none; max-height: 29rem; object-fit: contain; transform: translateX(50%); filter: drop-shadow(0 2.5rem 2rem rgba(14,70,55,.28)); }

.site-footer {
  padding: 2rem 0;
  background: var(--navy-deep);
  color: white;
}

.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 2rem;
}

.brand--light {
  color: white;
}

.site-footer p {
  margin: 0;
  color: #c9cde6;
  font-size: 0.84rem;
}

.site-footer nav {
  display: flex;
  gap: 1rem;
}

.site-footer nav a {
  color: #f2f3ff;
}

.not-found {
  display: grid;
  min-height: 100vh;
  padding: 1.25rem;
  place-items: center;
  background: var(--sky);
}

.not-found__card {
  width: min(100%, 43rem);
  padding: clamp(2rem, 7vw, 5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  box-shadow: var(--shadow);
}

.not-found__card .brand {
  margin-bottom: 5rem;
}

.not-found__card h1 {
  max-width: 10ch;
  margin-bottom: 1rem;
  color: var(--navy);
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.not-found__card > p:not(.eyebrow) {
  max-width: 34rem;
  margin-bottom: 2rem;
  color: var(--muted);
}

@media (max-width: 900px) {
  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .header-inner nav {
    display: none;
  }

  .aspects-layout,
.faq-grid,
.guide-hero__grid,
.guide-method__grid,
.affiliate-band__inner,
.editorial-opening__grid,
.activity-method__grid,
.product-feature,
.immersive-cta__content {
    grid-template-columns: 1fr;
  }

  .section-heading {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .section-heading .eyebrow {
    margin-bottom: 0;
  }

  .age-grid {
    grid-template-columns: 1fr 1fr;
  }

  .audience-grid,
.product-grid {
    grid-template-columns: 1fr 1fr;
  }

  .audience-grid article:nth-child(3) {
    border-left: 0;
  }

  .audience-grid article:nth-child(n+3) {
    border-top: 1px solid var(--line);
  }

  .offer-comparison,
.founder-grid {
    grid-template-columns: 1fr;
  }

  .editorial-opening__media {
    width: min(100%, 42rem);
    margin-inline: auto;
  }

  .credential-gallery,
.parent-stories__grid {
    grid-template-columns: 1fr 1fr;
  }

  .parent-story,
.parent-story--feature {
    grid-row: auto;
    grid-template-columns: 1fr;
  }

  .parent-story__media img,
.parent-story--feature .parent-story__media img {
    aspect-ratio: 4 / 5;
    min-height: 25rem;
  }

  .immersive-cta__action {
    grid-column: auto;
    max-width: 28rem;
  }

  .immersive-cta__action p {
    justify-content: flex-start;
    margin-left: 0;
  }

  .age-grid article:nth-child(3) {
    border-left: 0;
  }

  .age-grid article:nth-child(n+3) {
    border-top: 1px solid #cfd8f0;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  :root {
    --container: min(calc(100% - 1.5rem), 75rem);
  }

  .header-inner {
    min-height: 4.25rem;
  }

  .brand {
    font-size: 1.2rem;
  }

  .brand svg {
    width: 1.6rem;
    height: 1.6rem;
  }

  .button--small {
    min-height: 2.75rem;
    padding-inline: 0.8rem;
    font-size: 0.8rem;
  }

  .hero-actions {
    display: grid;
  }

  .hero-actions .button {
    width: 100%;
  }

  .text-link {
    min-height: 2.75rem;
    text-align: center;
  }

  .age-grid,
.guide-summary .container,
.audience-grid,
.product-grid {
    grid-template-columns: 1fr;
  }

  .credential-gallery,
.parent-stories__grid {
    grid-template-columns: 1fr;
  }

  .editorial-opening__copy h2,
.credential-intro h2,
.activity-method h2,
.immersive-cta h2 {
    font-size: clamp(2.7rem, 13vw, 4rem);
  }

  .audience-notes p {
    grid-template-columns: 1fr;
    gap: .15rem;
  }

  .editorial-opening__media {
    min-height: 36rem;
  }

  .media-frame--portrait {
    width: 82%;
  }

  .product-note {
    width: 72%;
  }

  .credential-intro {
    grid-template-columns: 1fr;
  }

  .credential-intro > img {
    width: 7.5rem;
    height: 7.5rem;
  }

  .credential-card__media {
    min-height: 14rem;
  }

  .activity-page-stack {
    min-height: 34rem;
    margin-inline: -.5rem;
  }

  .activity-page {
    top: 1rem;
    width: 58%;
    border-width: .4rem;
  }

  .activity-page-stack > p {
    right: .5rem;
    left: .5rem;
  }

  .parent-story__media img,
.parent-story--feature .parent-story__media img {
    min-height: auto;
  }

  .immersive-cta {
    min-height: 46rem;
    padding-top: 4.5rem;
  }

  .immersive-cta__content {
    gap: 1.5rem;
  }

  .immersive-cta__action {
    width: 100%;
  }

  .immersive-cta__word {
    bottom: 10rem;
    font-size: 31vw;
  }

  .immersive-cta__products {
    bottom: 2rem;
    width: 135vw;
    max-height: 18rem;
  }

  .guide-summary p + p,
.audience-grid article + article {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .guide-hero {
    padding-top: 3.8rem;
  }

  .guide-hero h1 {
    font-size: clamp(3rem, 14.5vw, 4.25rem);
  }

  .guide-hero__media {
    padding: 1rem;
  }

  .guide-hero__media img {
    min-height: 14rem;
  }

  .founder-grid article {
    grid-template-columns: 6.5rem 1fr;
  }

  .founder-grid img {
    min-height: 100%;
  }

  .age-grid article + article {
    border-top: 1px solid #cfd8f0;
    border-left: 0;
  }

  .age-grid article > p:first-child {
    margin-bottom: 1.5rem;
  }

  .age-grid article > p:last-of-type {
    min-height: auto;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .site-footer nav {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
*::before,
*::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Homepage v2: one message per screen, centred, generous white space. */
.home {
  background: var(--paper);
}

.home .measure {
  width: min(calc(100% - 2.5rem), var(--measure));
  margin-inline: auto;
  text-align: center;
}

.home h1,
.home h2,
.home h3 {
  color: var(--navy);
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.home .button {
  border-radius: 999px;
  box-shadow: none;
}

.home .button:hover {
  transform: none;
  box-shadow: none;
  background: var(--navy-deep);
}

.home .button--yellow:hover {
  background: #ffc93f;
}

.home .text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding-inline: 0.25rem;
}

.home-label {
  margin-bottom: 0.9rem;
  color: var(--coral-dark);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Top padding clears the overlaid nav, which is 4.75rem tall. */
.home-hero__content {
  position: relative;
  z-index: 5;
  padding: calc(4.75rem + clamp(0.5rem, 2vw, 1.5rem)) 0 clamp(3rem, 8vw, 6rem);
}

.home-hero h1 {
  max-width: 15ch;
  margin: 0 auto 1.5rem;
  font-size: clamp(2.5rem, 6.4vw, 4.25rem);
  line-height: 1.06;
}

.home-hero__lede {
  max-width: 32rem;
  margin: 0 auto 1.75rem;
  color: var(--navy);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* Measured against the photograph behind it: without its own surface this link
   sits on the dark driftwood and drops to 1:1 contrast over a tenth of its
   area. A carried surface fixes that without putting a wash behind the copy. */
.home-hero__actions .text-link {
  padding-inline: 1.1rem;
  border-radius: 999px;
  background: rgba(255, 254, 250, 0.94);
}

/* Layered hero banner. The three exports share one 6008x4000 canvas, so the
   layers stay in register as long as they keep identical box geometry. */
/* The hero copy and the parallax scene are one unit: the scene fills the hero
   and the copy sits on the sky above the horizon, so the two read as a single
   surface rather than a text block stacked on a picture. */
.home-hero {
  position: relative;
  isolation: isolate;
  min-height: min(100svh, 58rem);
  overflow: hidden;
  view-timeline-name: --hero-scene;
  view-timeline-axis: block;
}

.hero-scene {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: var(--sky);
}

/* Radial rather than a straight horizontal band, so the paper meets the sky as
   an arc. It sits on the scene only; the hero copy above keeps a flat surface. */
.hero-scene::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  background: radial-gradient(150% 22% at 50% -6%, var(--paper) 25%, rgba(255, 254, 250, 0) 75%);
  pointer-events: none;
}

/* Anchored high rather than centred, which pushes the horizon and the child
   down the frame and leaves the sky clear for the hero copy. Only the sea layer
   is opaque, so only its drift has to stay inside the 4% of headroom; the child
   and cloud layers are transparent where they would otherwise show an edge. */
.hero-scene__layer {
  position: absolute;
  top: -4%;
  right: 0;
  left: 0;
  height: 148%;
  display: block;
}

.hero-scene__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-scene__layer--sea {
  z-index: 1;
}

.hero-scene__layer--child {
  z-index: 2;
}

.hero-scene__layer--clouds {
  z-index: 3;
}

/* CSS fallback for browsers without GSAP available, and for Safari and Firefox
   which do not ship scroll-driven animations. GSAP takes over on `.is-enhanced`
   and drives the same layers with the same drift values. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-scene:not(.is-enhanced) .hero-scene__layer {
      animation: hero-drift linear both;
      animation-timeline: --hero-scene;
      animation-range: entry 0% exit 100%;
    }

    /* Mirrors the values in src/scripts/motion.ts. The sky lags, the ground
       leads, and the child stays close to the sand it runs on. */
    .hero-scene__layer--clouds {
      --drift: 12.5%;
    }

    .hero-scene__layer--sea {
      --drift: -2.5%;
    }

    .hero-scene__layer--child {
      --drift: -11%;
    }
  }
}

@keyframes hero-drift {
  from {
    transform: translateY(calc(var(--drift) * -1));
  }

  to {
    transform: translateY(var(--drift));
  }
}

.home-statement {
  padding: clamp(5rem, 10vw, 8.5rem) 0;
  background: var(--cream);
}

.home-statement h2 {
  max-width: 18ch;
  margin: 0 auto 1.25rem;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.12;
}

.home-statement p {
  max-width: 38rem;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
}

.home-block {
  padding: var(--space-block) 0;
}

.home-block__heading {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.home-block__heading h2 {
  max-width: 20ch;
  margin: 0 auto;
  font-size: clamp(1.8rem, 3.8vw, 2.7rem);
  line-height: 1.15;
}

.home-block__more {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  text-align: center;
}

.value-cards,
.story-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.value-card {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: 1.5rem;
}

.value-card--cream {
  background: var(--cream);
}

.value-card--sky {
  background: var(--sky);
}

.value-card--mint {
  background: var(--mint);
}

.value-card h3 {
  margin-bottom: 0.6rem;
  font-size: 1.3rem;
  line-height: 1.2;
}

.value-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

.home-kit {
  background: var(--cream);
}

.kit-marquee {
  position: relative;
}

.kit-marquee__viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 5rem, black calc(100% - 5rem), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 5rem, black calc(100% - 5rem), transparent);
}

.kit-marquee__track {
  display: flex;
  width: max-content;
  animation: kit-marquee 60s linear infinite;
}

.kit-group {
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 0 1.25rem 0 0;
  list-style: none;
}

@keyframes kit-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (hover: hover) {
  .kit-marquee:hover .kit-marquee__track {
    animation-play-state: paused;
  }
}

.marquee-pause {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.marquee-pause__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
  padding: 0 1.1rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.kit-marquee .marquee-pause__label {
  display: flex;
  width: max-content;
}

.marquee-pause:focus-visible + .marquee-pause__label {
  outline: 3px solid var(--coral);
  outline-offset: 4px;
}

.marquee-pause:not(:checked) ~ .marquee-pause__label .marquee-pause__paused,
.marquee-pause:checked ~ .marquee-pause__label .marquee-pause__playing {
  display: none;
}

.marquee-pause:checked ~ .kit-marquee__viewport .kit-marquee__track {
  animation-play-state: paused;
}

.kit-card {
  width: clamp(11.5rem, 20vw, 15rem);
  flex: 0 0 auto;
  text-align: center;
}

.kit-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin-bottom: 1.25rem;
  border-radius: 1.5rem;
  object-fit: cover;
}

.kit-card__meta {
  margin-bottom: 0.35rem;
  color: var(--coral-dark);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kit-card h3 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.25;
}

.story-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  border-radius: 1.5rem;
  background: var(--sky);
}

.story-card blockquote {
  flex: 1;
  margin: 0;
  color: var(--navy);
  font-size: 1.02rem;
  line-height: 1.6;
}

.story-card__person {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.story-card__person img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
}

.story-card__person span {
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 600;
}

.home-offer {
  padding: var(--space-block) 0;
  background: var(--navy);
  color: white;
}

.home-offer .home-label {
  color: var(--yellow);
}

.home-offer h2 {
  max-width: 18ch;
  margin: 0 auto 1.75rem;
  color: white;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.14;
}

.home-offer__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.home-offer__price s {
  color: #aeb6e4;
  font-size: 1.05rem;
}

.home-offer__price strong {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 600;
}

.home-offer__note {
  max-width: 30rem;
  margin: 1.75rem auto 0;
  color: #cdd3f0;
  font-size: 0.9rem;
}

.home-offer__alt {
  margin: 1.25rem 0 0;
  color: #cdd3f0;
  font-size: 0.9rem;
}

.home-offer__alt a {
  color: white;
}

@media (max-width: 860px) {
  .value-cards,
  .story-cards {
    grid-template-columns: 1fr 1fr;
  }

  .value-cards > :last-child,
  .story-cards > :last-child {
    grid-column: span 2;
  }
}

@media (max-width: 620px) {
  .value-cards,
  .story-cards {
    grid-template-columns: 1fr;
  }

  .value-cards > :last-child,
  .story-cards > :last-child {
    grid-column: auto;
  }

  .home-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .home-hero__actions .button {
    width: 100%;
  }

  .kit-marquee__viewport {
    mask-image: linear-gradient(90deg, transparent, black 2rem, black calc(100% - 2rem), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 2rem, black calc(100% - 2rem), transparent);
  }

  .home-hero {
    min-height: min(100svh, 44rem);
  }

  .kit-card {
    width: clamp(10.5rem, 46vw, 13rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kit-marquee__track {
    width: auto;
    animation: none;
  }

  .kit-marquee__viewport {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .kit-group[aria-hidden="true"] {
    display: none;
  }

  .kit-marquee .marquee-pause__label {
    display: none;
  }

  .kit-group {
    padding-inline: 1.25rem;
  }
}