.voice-page {
  background:
    radial-gradient(circle at 12% 9%, rgb(255 236 159 / 28%), transparent 24rem),
    linear-gradient(180deg, #f7f4e1, #edf4e5);
}

.voice-page h1 {
  max-width: 12ch;
  font-size: clamp(3.6rem, 7vw, 7.3rem);
}

.voice-hero {
  position: relative;
  display: grid;
  min-height: 96svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 34%, rgb(255 232 142 / 48%), transparent 24rem),
    radial-gradient(circle at 10% 2%, rgb(170 215 187 / 52%), transparent 32rem),
    linear-gradient(140deg, #eef5df, #fff8dc 55%, #d9edd2);
  place-items: center;
}

.voice-hero::before,
.voice-hero::after {
  position: absolute;
  bottom: -13rem;
  width: 60rem;
  height: 31rem;
  border-radius: 50%;
  background: rgb(54 105 65 / 9%);
  content: "";
}

.voice-hero::before { left: -19rem; transform: rotate(10deg); }
.voice-hero::after { right: -18rem; transform: rotate(-9deg); }

.voice-hero__glow {
  position: absolute;
  top: 12%;
  right: 13%;
  width: 25rem;
  aspect-ratio: 1;
  border: 1px solid rgb(212 159 41 / 20%);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgb(248 215 113 / 6%), 0 0 0 8rem rgb(248 215 113 / 3%);
}

.voice-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  padding-block: clamp(5rem, 10vw, 8rem);
  gap: clamp(3rem, 8vw, 8rem);
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.65fr);
}

.voice-hero__lead {
  max-width: 27ch;
  color: var(--purple);
  font-size: clamp(1.45rem, 2.6vw, 2.45rem);
  font-style: italic;
  font-weight: 700;
  line-height: 1.3;
}

.voice-hero__explanation {
  max-width: 43rem;
  margin-bottom: 1.25rem;
  color: var(--ink-soft);
  font-size: clamp(1.08rem, 1.55vw, 1.25rem);
}

.voice-hero__cta p {
  margin-bottom: 1.6rem;
}

.voice-hero__cta .cta-button {
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.voice-hero__cta .purchase-reassurance {
  max-width: 19rem;
}

.storybook-world {
  padding-block: clamp(7rem, 13vw, 11rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgb(244 210 102 / 19%), transparent 26rem),
    linear-gradient(160deg, #e8f1de, #fff9e3 60%, #dcebd9);
}

.storybook-world__intro {
  max-width: 58rem;
}

.storybook-world__truth {
  color: var(--purple) !important;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem) !important;
  font-style: italic;
  font-weight: 700;
}

.world-spread {
  position: relative;
  min-height: clamp(32rem, 57vw, 45rem);
}

.world-spread figure {
  position: absolute;
  overflow: hidden;
  margin: 0;
  padding: 0.55rem;
  border: 1px solid rgb(137 95 29 / 25%);
  border-radius: 2rem;
  background: #fff8df;
  box-shadow: var(--shadow);
}

.world-spread img {
  width: 100%;
  height: 100%;
  border-radius: 1.45rem;
  object-fit: cover;
}

.world-spread__landscape {
  top: 0;
  left: 0;
  width: 78%;
  aspect-ratio: 1.45;
  transform: rotate(-1.2deg);
}

.world-spread__companion {
  right: 0;
  bottom: 0;
  width: 43%;
  aspect-ratio: 1.1;
  transform: rotate(2.2deg);
}

.world-spread__spark {
  position: absolute;
  top: 15%;
  right: 8%;
  color: var(--gold);
  font-size: 3rem;
}

.wand-section {
  padding-block: clamp(7rem, 13vw, 11rem);
  background: #fffdf5;
}

.voice-wand {
  max-width: 68rem;
  margin: 0 auto;
  text-align: center;
}

.voice-wand__image {
  padding: clamp(0.55rem, 1.2vw, 0.9rem);
  border: 1px solid rgb(132 92 27 / 28%);
  border-radius: clamp(1.2rem, 3vw, 2.3rem);
  background: linear-gradient(145deg, #fff9df, #e9d39a);
  box-shadow: 0 28px 70px rgb(12 45 41 / 20%);
}

.voice-wand img {
  width: 100%;
  height: auto;
  border-radius: clamp(0.85rem, 2.2vw, 1.7rem);
}

.voice-wand figcaption {
  margin-top: 1.6rem;
  color: var(--purple);
  font-size: clamp(1.3rem, 2.35vw, 1.95rem);
  font-style: italic;
  font-weight: 700;
  line-height: 1.38;
  text-wrap: balance;
}

.voice-wand figcaption span { display: block; }

.voice-cycle {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  margin: clamp(3.5rem, 7vw, 5rem) auto 0;
  padding: 1rem 1.5rem;
  border: 1px solid rgb(165 116 31 / 27%);
  border-radius: 999px;
  background: #fff9df;
  box-shadow: 0 14px 34px rgb(55 79 54 / 10%);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  gap: clamp(0.7rem, 2vw, 1.5rem);
}

.voice-cycle b { color: var(--gold); }
.voice-cycle i { color: #ac8430; font-style: normal; }

.voice-games {
  padding-block: clamp(7rem, 13vw, 11rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 25%, rgb(211 171 58 / 13%), transparent 27rem),
    linear-gradient(150deg, #0b3537, #112b3b 57%, #241839);
}

.voice-games .eyebrow { color: #e3bd56; }
.voice-games h2 { color: #fff8dc; }

.voice-games__intro {
  max-width: 52rem;
  margin-bottom: clamp(4rem, 8vw, 7rem);
}

.voice-collage {
  display: grid;
  max-width: 70rem;
  margin-inline: auto;
  gap: clamp(0.7rem, 1.5vw, 1.2rem);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.voice-collage figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0.3rem;
  border-radius: 0.65rem;
  background: #fffbed;
  box-shadow: 0 22px 48px rgb(0 0 0 / 25%);
}

.voice-collage img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0.35rem;
  object-fit: cover;
}

.voice-collage__garden {
  z-index: 2;
  aspect-ratio: 1.45;
  grid-column: 1 / 9;
  grid-row: 1 / 7;
  transform: rotate(-1.4deg);
}

.voice-collage__lava {
  aspect-ratio: 1;
  grid-column: 9 / 13;
  grid-row: 1 / 5;
  transform: rotate(2.2deg) translate(-0.25rem, 1.4rem);
}

.voice-collage__puzzle {
  z-index: 3;
  aspect-ratio: 1;
  grid-column: 2 / 6;
  grid-row: 6 / 10;
  transform: rotate(2.7deg) translateY(-0.8rem);
}

.voice-collage__sea {
  z-index: 4;
  aspect-ratio: 1;
  grid-column: 6 / 10;
  grid-row: 6 / 10;
  transform: rotate(-2.2deg) translate(-0.4rem, 0.7rem);
}

.voice-collage__valley {
  z-index: 2;
  aspect-ratio: 1.25;
  grid-column: 9 / 13;
  grid-row: 5 / 9;
  transform: rotate(1.5deg) translate(-0.35rem, -0.5rem);
}

.voice-belief {
  max-width: 64rem;
  margin: clamp(5rem, 9vw, 8rem) auto 0;
  text-align: center;
}

.voice-belief p {
  margin-bottom: 0.8rem;
  color: #fff8dc;
  font-size: clamp(1.75rem, 4vw, 3.5rem);
  font-style: italic;
  font-weight: 700;
  line-height: 1.18;
  text-wrap: balance;
}

.voice-belief p:last-child { color: #e8c967; }

.outcomes-section {
  padding-block: clamp(6rem, 11vw, 9rem);
  background:
    radial-gradient(circle at 76% 34%, rgb(244 211 104 / 17%), transparent 24rem),
    linear-gradient(155deg, #edf4df, #fff9e4 64%, #dcebd8);
}

.outcomes-section__inner {
  display: grid;
  align-items: center;
  gap: clamp(2.5rem, 7vw, 6rem);
  grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);
}

.outcomes-section__heading h2 {
  margin-bottom: 0;
  font-size: clamp(2.6rem, 5vw, 4.8rem);
}

.outcomes-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 0.8rem;
  list-style: none;
}

.outcomes-list li {
  position: relative;
  padding: 0.85rem 1rem 0.85rem 2.8rem;
  border-bottom: 1px solid rgb(153 109 34 / 18%);
  color: #294d47;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 700;
}

.outcomes-list li::before {
  position: absolute;
  left: 0.7rem;
  color: var(--gold);
  content: "✦";
}

.voice-closing {
  padding: clamp(8rem, 15vw, 13rem) 1.5rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 25%, rgb(245 209 97 / 21%), transparent 27rem),
    linear-gradient(180deg, #f0f4df, #fff9e4 60%, #dcebd7);
  text-align: center;
}

.voice-closing__content {
  max-width: 54rem;
  margin-inline: auto;
}

.voice-closing h2 {
  max-width: 16ch;
  margin-inline: auto;
}

.voice-closing__content > p:not(.eyebrow) {
  max-width: 43rem;
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
  color: var(--ink-soft);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
}

.voice-closing .purchase-reassurance {
  max-width: 20rem;
}

.voice-closing .return-link { color: var(--purple-dark); }

@media (max-width: 900px) {
  .voice-hero__inner,
  .outcomes-section__inner {
    grid-template-columns: 1fr;
  }

  .voice-hero__cta {
    width: min(100%, 34rem);
    margin-inline: auto;
  }

  .voice-collage__garden { grid-column: 1 / span 8; }
  .voice-collage__lava { grid-column: 9 / span 4; }
  .voice-collage__puzzle { grid-column: 1 / span 5; }
  .voice-collage__sea { grid-column: 5 / span 5; }
  .voice-collage__valley { grid-column: 9 / span 4; }
}

@media (max-width: 600px) {
  .voice-page h1 {
    font-size: clamp(3.45rem, 17vw, 5.1rem);
  }

  .voice-hero__inner { padding-top: 5.5rem; }

  .world-spread {
    display: grid;
    min-height: 0;
    gap: 1.2rem;
  }

  .world-spread figure,
  .world-spread__landscape,
  .world-spread__companion {
    position: static;
    width: 100%;
    aspect-ratio: 4 / 3;
    transform: none;
  }

  .world-spread__spark { display: none; }

  .voice-cycle {
    width: 100%;
    padding-inline: 0.8rem;
    gap: 0.55rem;
  }

  .voice-cycle span { font-size: 0.9rem; }

  .voice-collage {
    min-height: 0;
    padding: 0.75rem 0.6rem;
    gap: 0;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .voice-collage figure,
  .voice-collage__garden,
  .voice-collage__lava,
  .voice-collage__puzzle,
  .voice-collage__sea,
  .voice-collage__valley {
    width: 88%;
    aspect-ratio: 4 / 3;
    margin: 0 !important;
    grid-column: 1;
    grid-row: auto;
  }

  .voice-collage__garden,
  .voice-collage__puzzle,
  .voice-collage__valley { justify-self: start; }

  .voice-collage__lava,
  .voice-collage__sea { justify-self: end; }

  .voice-collage__lava,
  .voice-collage__puzzle,
  .voice-collage__sea,
  .voice-collage__valley { margin-top: -0.65rem !important; }

  .voice-closing h2 {
    font-size: clamp(2.3rem, 11vw, 3.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .voice-page *,
  .voice-page *::before,
  .voice-page *::after {
    scroll-behavior: auto !important;
  }
}