/* home.css — styles specific to the Home page (desktop, static) */

.page-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: var(--color-white);
}

.page-home section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Shared bits ------------------------------------------------------------ */

.eyebrow {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-body-small-size);
  line-height: var(--font-body-small-line-height);
  color: var(--color-primary-600);
}

.text-accent {
  color: var(--color-primary-500);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 12px;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

.button--primary {
  background: var(--color-primary-600);
  color: var(--color-white);
  font-family: var(--font-body-bold-family);
  font-weight: var(--font-body-bold-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  transition: background-color var(--transition-hover), color var(--transition-hover), box-shadow var(--transition-hover);
}

/* Figma "Buttons" :hover — same treatment as the header CTA; inset shadow
   stands in for Figma's 1px INSIDE stroke so the button doesn't resize. */
.button--primary:hover,
.button--primary:focus-visible {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
  box-shadow: inset 0 0 0 1px var(--color-primary-600);
}

/* Keyboard focus ring — matches base.css (nav links, .nav-cta). */
.button:focus-visible,
.hero__link:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Hero --------------------------------------------------------------- */

.hero {
  padding: 80px 0 100px;
  background: linear-gradient(20deg, #ffffff 32%, #fefaff 54%, #fef7ff 72%, #f7eee8 89%);
}

.hero__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  max-width: 1140px;
  width: 100%;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 600px;
}

.hero__title {
  font-family: var(--font-title-family);
  font-weight: var(--font-title-weight);
  font-size: var(--font-title-size);
  line-height: var(--font-title-line-height);
  letter-spacing: var(--font-title-letter-spacing);
  color: var(--color-neutral-900);
  margin: 0;
  width: 572px;
  max-width: 100%;
}

.hero__description {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero__description p {
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  letter-spacing: var(--font-body-regular-letter-spacing);
  color: var(--color-neutral-500);
  margin: 0;
}

.hero__description-bold {
  font-family: var(--font-body-bold-family);
  font-weight: var(--font-body-bold-weight) !important;
  color: var(--color-neutral-500);
}

.hero__links {
  display: flex;
  gap: 32px;
}

.hero__link {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-body-small-size);
  color: var(--color-secondary-500);
  /* Figma arrow link: no underline at rest, underline (text only) on hover.
     Kept as an underline with a transparent color so it can fade in. */
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--transition-hover);
}

.hero__link:hover,
.hero__link:focus-visible {
  text-decoration-color: currentColor;
}

/* inline-block keeps the parent link's underline off the arrow. */
.hero__link-arrow {
  display: inline-block;
  margin-left: 3px;
}

/* Sized at ~84% of the original dimensions (width, padding, gaps, font
   sizes, radii, shadow offsets all scaled together) so the card reads as a
   smaller, better-balanced companion to the hero text rather than
   dominating it — every internal proportion below is the same ratio to its
   sibling as before, just at a smaller absolute size. Font sizes are fixed
   px here rather than the shared --font-caption-size/--font-body-small-size
   tokens, since those tokens are used site-wide and scaling them would
   affect unrelated components. */
.hero__card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: 420px;
  padding: 13px;
  border: 1px solid var(--color-neutral-250);
  border-radius: 20px;
  background: var(--color-white);
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.25);
}

.hero__card-header {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-neutral-250);
}

.hero__card-eyebrow {
  font-family: var(--font-caption-family);
  font-weight: var(--font-weight-bold);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: right;
  color: var(--color-accent1-500);
  margin: 0;
}

.hero__card-title {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-weight-semibold);
  font-size: 12px;
  color: var(--color-neutral-900);
  margin: 0;
}

.hero__card-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero__card-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px;
  border-radius: 10px;
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-250);
  font-family: var(--font-caption-family);
  font-size: 12px;
  color: var(--color-neutral-350);
  margin: 0;
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.hero__card-step--active {
  background: var(--color-white);
  border-color: var(--color-secondary-300);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
}

.hero__card-step-label {
  display: none;
  font-family: var(--font-caption-family);
  font-weight: var(--font-weight-semibold);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--color-secondary-500);
  margin: 0;
}

.hero__card-step--active .hero__card-step-label {
  display: block;
}

.hero__card-step-text {
  font-family: var(--font-caption-family);
  font-weight: var(--font-weight-regular);
  font-size: 12px;
  color: var(--color-neutral-350);
  margin: 0;
  transition: color 0.4s ease;
}

.hero__card-step--active .hero__card-step-text {
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-900);
}

.hero__card-progress {
  display: flex;
  justify-content: center;
  gap: 17px;
  padding: 13px 0;
}

.progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 13px;
  background: var(--color-secondary-50);
  transition: width 0.4s ease, background-color 0.4s ease;
}

.progress-dot--active {
  width: 24px;
  background: var(--color-secondary-500);
}

@media (prefers-reduced-motion: reduce) {
  .hero__card-step,
  .hero__card-step-text,
  .progress-dot {
    transition: none;
  }
}

/* Gap section ---------------------------------------------------------- */

.gap-section {
  border-top: 1px solid var(--color-neutral-250);
}

.gap-section__inner {
  display: flex;
  gap: 80px;
  align-items: flex-start;
  max-width: 1140px;
  width: 100%;
  padding: 100px 0;
}

.gap-section__steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 500px;
  padding: 0 32px;
}

.steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--color-white);
  border-radius: 16px;
  overflow: hidden;
}

.steps-list__item {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-neutral-200);
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}

.steps-list__item:last-child {
  border-bottom: none;
}

.steps-list__item.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fixed per-item delay so steps that cross the reveal threshold in the same
   scroll frame cascade in with a subtle stagger instead of popping in at
   once; a step revealed on its own just gets a small, barely-felt pause. */
.steps-list__item:nth-child(1) { transition-delay: 0ms; }
.steps-list__item:nth-child(2) { transition-delay: 70ms; }
.steps-list__item:nth-child(3) { transition-delay: 140ms; }
.steps-list__item:nth-child(4) { transition-delay: 210ms; }
.steps-list__item:nth-child(5) { transition-delay: 280ms; }
.steps-list__item:nth-child(6) { transition-delay: 350ms; }

@media (prefers-reduced-motion: reduce) {
  .steps-list__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.steps-list__number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-primary-50);
  border: 1px solid var(--color-neutral-200);
  font-family: var(--font-caption-family);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-body-small-size);
  color: var(--color-primary-600);
}

.steps-list__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.steps-list__content h3 {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-body-small-size);
  color: var(--color-neutral-900);
  margin: 0;
}

.steps-list__content p {
  font-family: var(--font-caption-family);
  font-size: 13px;
  color: var(--color-neutral-500);
  margin: 0;
}

.gap-section__copy {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex: 1;
  max-width: 572px;
}

.gap-section__copy h2 {
  font-family: var(--font-h1-family);
  font-weight: var(--font-h1-weight);
  font-size: var(--font-h1-size);
  line-height: var(--font-h1-line-height);
  color: var(--color-neutral-900);
  margin: 0 0 16px;
}

.gap-section__copy > p {
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  color: var(--color-neutral-500);
  margin: 0;
}

.stat-cards {
  display: flex;
  gap: 16px;
  width: 100%;
}

.stat-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 16px;
  background: var(--color-primary-50);
  border: 1px solid var(--color-neutral-200);
}

.stat-card__value {
  font-family: var(--font-h1-family);
  font-weight: var(--font-h1-weight);
  font-size: var(--font-stat-size);
  color: var(--color-secondary-500);
  margin: 0;
}

.stat-card__value sup {
  font-size: 20px;
  color: var(--color-neutral-350);
}

.stat-card__label {
  font-family: var(--font-caption-family);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-body-small-size);
  line-height: 20px;
  color: var(--color-neutral-350);
  margin: 0;
}

/* Care loop / Carrie for you -------------------------------------------- */

.care-loop {
  background: var(--color-primary-25);
  border-top: 1px solid var(--color-neutral-250);
  border-bottom: 1px solid var(--color-neutral-250);
}

.care-loop__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1140px;
  width: 100%;
  padding: 100px 80px 50px;
}

.care-loop__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
}

.care-loop__header h2 {
  font-family: var(--font-h1-family);
  font-weight: var(--font-h1-weight);
  font-size: var(--font-h1-size);
  line-height: var(--font-h1-line-height);
  color: var(--color-neutral-900);
  margin: 0;
}

.care-loop__header p {
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  color: var(--color-neutral-500);
  margin: 0;
  max-width: 900px;
}

.triptych {
  display: flex;
  gap: 14px;
  width: 100%;
}

.triptych__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-250);
  border-radius: 16px;
  box-shadow: 0 2px 4px rgba(59, 22, 120, 0.06);
}

.triptych__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-primary-50);
  border: 1px solid var(--color-neutral-200);
}

.triptych__icon img {
  width: 22px;
  height: 22px;
}

.triptych__card h3 {
  font-family: var(--font-h4-family);
  font-weight: var(--font-h4-weight);
  font-size: var(--font-h4-size);
  color: var(--color-neutral-900);
  margin: 10px 0 0;
}

.triptych__list,
.triptych__list ul {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-weight-medium);
  font-size: 13.5px;
  color: var(--color-neutral-500);
  margin: 3px 0 0;
  padding-left: 20px;
}

.triptych__list ul {
  margin-top: 0;
}

.programs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.programs__title {
  font-family: var(--font-h2-family);
  font-weight: var(--font-h2-weight);
  font-size: var(--font-h2-size);
  line-height: var(--font-h2-line-height);
  color: var(--color-neutral-900);
  margin: 0;
}

.programs__content {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.programs__copy {
  width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.programs__copy p {
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  color: var(--color-neutral-500);
  margin: 0;
}

.programs-strip {
  flex: 1;
  border: 1px solid var(--color-secondary-500);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(59, 22, 120, 0.06);
}

.programs-strip__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 22px 14px;
  background: var(--color-secondary-100);
}

.programs-strip__title {
  font-family: var(--font-h4-family);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-h4-size);
  color: var(--color-neutral-900);
}

.programs-strip__subtitle {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-weight-medium);
  font-size: 13.5px;
  color: var(--color-neutral-500);
}

.programs-strip__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 20px 22px;
  background: var(--color-white);
}

.programs-strip__group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.programs-strip__group-title {
  font-family: var(--font-body-bold-family);
  font-weight: var(--font-body-bold-weight);
  font-size: var(--font-body-regular-size);
  color: var(--color-secondary-500);
  margin: 0;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 27px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--color-white);
  border: 1px solid var(--color-secondary-300);
  font-family: var(--font-caption-family);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-body-small-size);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-neutral-900);
  text-decoration: none;
}

.chip--more {
  background: var(--color-secondary-50);
  cursor: pointer;
}

.chip--more:focus-visible {
  outline: 2px solid var(--color-secondary-500);
  outline-offset: 2px;
}

.chip--more img {
  width: 18px;
  height: 18px;
}

.programs__disclaimer {
  font-family: var(--font-body-bold-family);
  font-weight: var(--font-body-bold-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  letter-spacing: var(--font-body-bold-letter-spacing);
  color: var(--color-neutral-500);
  text-align: center;
  margin: 0;
}

.programs__cta {
  display: flex;
  justify-content: center;
  padding: 32px 0;
}

/* Hear Carrie ------------------------------------------------------------ */

.hear-carrie {
  background: var(--color-primary-25);
  padding: 100px 0;
}

.hear-carrie__card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1140px;
  width: 100%;
  padding: 30px 40px 40px;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-250);
  border-radius: 16px;
}

.hear-carrie__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hear-carrie__header h2 {
  font-family: var(--font-h1-family);
  font-weight: var(--font-h1-weight);
  font-size: var(--font-h1-size);
  line-height: var(--font-h1-line-height);
  color: var(--color-neutral-900);
  margin: 0;
}

.hear-carrie__header p {
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  color: var(--color-neutral-500);
  margin: 0;
}

/* Groups the player with its disclaimer note so they read as one unit,
   separate from the card's larger gap around the header and transcript. */
.hear-carrie__player-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.audio-player {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px 22px;
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--color-neutral-200);
}

.audio-player__audio {
  display: none;
}

.audio-player__play {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-primary-500);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.audio-player__play:hover {
  background-color: color-mix(in srgb, var(--color-primary-500) 14%, transparent);
}

.audio-player__play:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 4px;
}

/* Play glyph is a CSS triangle by default; toggling .is-playing on the
   button swaps it to two bars (the second drawn via box-shadow so a
   single element can flip shape instead of swapping markup). */
.audio-player__play-glyph {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-left: 11px solid var(--color-primary-600);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

/* Two bars, each 3px wide with a 4px gap (10px total). The element itself
   is grid-centered on its own 3px box, which would put the visual midpoint
   of the two-bar glyph 3.5px right of center once the second bar is added
   via box-shadow — shift left by that same 3.5px so the pair is centered
   as a whole. */
.audio-player__play.is-playing .audio-player__play-glyph {
  width: 3px;
  height: 14px;
  margin-left: 0;
  border: none;
  background: var(--color-primary-600);
  box-shadow: 7px 0 0 var(--color-primary-600);
  transform: translateX(-3.5px);
}

.audio-player__waveform {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 96px;
  cursor: pointer;
  touch-action: none; /* required, or mobile scroll steals the seek drag */
}

.audio-player__waveform:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 4px;
}

/* Center axis; fades out over its outer 48px so it reads as a track rather
   than a hard-edged rule. */
.audio-player__waveform-axis {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--color-neutral-200) 48px,
    var(--color-neutral-200) calc(100% - 48px),
    transparent
  );
}

/* One <span> per peak. Because this container is align-items:center, each
   bar grows from the middle in both directions, producing the mirrored
   waveform shape from a single row of elements (no separate top/bottom
   halves). Width is set inline (in js/pages/index.js) to an exact pixel
   value shared by every bar — flex-grow distribution can round individual
   flex items to different pixel widths, which reads as uneven bar
   thickness. */
.audio-player__waveform-bars {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1px;
}

/* Background is a two-stop gradient set inline per frame (in
   js/pages/index.js) rather than a class toggle: it splits at the exact
   fraction of this bar that's been played, so the boundary bar fills
   left-to-right as playback moves through its time range instead of
   snapping fully lit/unlit — no CSS transition, since animating that many
   elements' backgrounds under a transition would smear instead of read as
   continuous. */
.audio-player__waveform-bars span {
  flex: none;
  min-height: 3px;
  border-radius: 999px; /* larger than half the bar's width, so ends read as fully rounded pill caps */
  background: var(--color-neutral-200);
}

.audio-player__time {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-weight-medium);
  font-size: 13px;
  font-variant-numeric: tabular-nums; /* stops elapsed-time digits jittering */
  color: var(--color-neutral-900);
}

.audio-player__time .audio-player__time-sep {
  color: var(--color-neutral-350);
}

.audio-player__time .audio-player__time-total {
  color: var(--color-neutral-600);
}

@media (prefers-reduced-motion: reduce) {
  .audio-player__play {
    transition: none;
  }
}

.hear-carrie__note {
  font-family: var(--font-body-regular-family);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-neutral-500);
  margin: 0;
}

.transcript {
  margin: 0;
}

.transcript__toggle {
  display: inline-block;
  font-family: var(--font-body-regular-family);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-primary-600);
  text-decoration: underline;
  cursor: pointer;
  list-style: none;
}

.transcript__toggle::-webkit-details-marker {
  display: none;
}

.transcript__body {
  margin-top: 16px;
  padding: 16px 20px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--color-neutral-200);
  border-radius: 12px;
  background: var(--color-neutral-25);
}

.transcript__body p {
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-small-size);
  line-height: var(--font-body-regular-line-height);
  color: var(--color-neutral-500);
  margin: 0 0 8px;
  padding: 3px 8px;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

.transcript__body p:last-child {
  margin-bottom: 0;
}

.transcript__body p strong {
  font-weight: var(--font-body-bold-weight);
  color: var(--color-neutral-900);
}

/* Highlights whichever line is currently being spoken, kept in sync with
   audio.currentTime by index.js (both natural playback and waveform
   seeking funnel through the same update path). */
.transcript__body p.is-active {
  background: var(--color-primary-100);
  color: var(--color-neutral-900);
}

/* Testimonials ------------------------------------------------------------ */

.testimonials {
  padding: 100px 0 50px;
}

.testimonials__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1140px;
  width: 100%;
}

.testimonials h2 {
  font-family: var(--font-h1-family);
  font-weight: var(--font-h1-weight);
  font-size: var(--font-h1-size);
  line-height: var(--font-h1-line-height);
  color: var(--color-neutral-900);
  margin: 0;
}

.testimonials__subtitle {
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  color: var(--color-neutral-500);
  margin: 0;
}

/* The viewport clips the track to the section width; the track holds the
   real 5 cards plus one aria-hidden duplicate set back-to-back, animated by
   exactly the width of those 5 cards (plus their gaps) so the loop point is
   invisible — the duplicate set is pixel-identical to the real one, so the
   instant it finishes translating, what's on screen is indistinguishable
   from the start position, and the infinite iteration just keeps going.
   That distance is expressed as -5 * (card width + gap) rather than -50%:
   with 10 cards there are 9 gaps between them, an odd number that -50%
   would split down the middle of, landing 12px short of the actual seam. */
.testimonials__viewport {
  overflow: hidden;
  width: 100%;
}

.testimonials__viewport:focus-visible {
  outline: 2px solid var(--color-secondary-500);
  outline-offset: 4px;
}

.testimonials__grid {
  --testimonial-card-width: 300px;
  --testimonial-gap: 24px;
  display: flex;
  gap: var(--testimonial-gap);
  width: max-content;
  animation: testimonials-marquee 40s linear infinite;
}

.testimonials__viewport:hover .testimonials__grid,
.testimonials__viewport:focus .testimonials__grid,
.testimonials__viewport:focus-within .testimonials__grid {
  animation-play-state: paused;
}

@keyframes testimonials-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-5 * (var(--testimonial-card-width) + var(--testimonial-gap))));
  }
}

.testimonial-card {
  flex: 0 0 var(--testimonial-card-width);
  width: var(--testimonial-card-width);
  margin: 0;
  padding: 21px 24px 22px;
  background: var(--color-white);
  border: 1px solid var(--color-tertiary-400);
  border-radius: 16px;
  box-shadow: 3px 3px 6px var(--color-neutral-200);
  font-family: var(--font-body-bold-family);
  font-weight: var(--font-body-bold-weight);
  font-style: italic;
  font-size: var(--font-body-regular-size);
  line-height: 1.45;
  text-align: center;
  color: var(--color-neutral-900);
}

/* Reduced motion: fall back to the original static, readable grid — the
   auto-scroll stops entirely rather than just slowing down, and the
   duplicate set (only ever there to make the loop seamless) is hidden. */
@media (prefers-reduced-motion: reduce) {
  .testimonials__viewport {
    overflow: visible;
  }

  .testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: auto;
    animation: none;
    transform: none;
  }

  .testimonial-card {
    flex: initial;
    width: auto;
  }

  .testimonial-card--duplicate {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  .testimonials__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 480px) {
  .testimonials__grid {
    grid-template-columns: 1fr;
  }
}

/* Results ------------------------------------------------------------ */

.results {
  padding: 100px 0 200px;
}

.results__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1140px;
  width: 100%;
}

.results h2 {
  font-family: var(--font-h1-family);
  font-weight: var(--font-h1-weight);
  font-size: var(--font-h1-size);
  line-height: var(--font-h1-line-height);
  color: var(--color-neutral-900);
  margin: 0 0 12px;
}

.results__subtitle {
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  color: var(--color-neutral-500);
  margin: 0;
}

.results__subtitle sup {
  font-family: var(--font-body-bold-family);
  font-size: 12px;
  color: var(--color-neutral-350);
}

.results__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.stat-card--bordered {
  background: var(--color-white);
  border: 1px solid var(--color-neutral-250);
}

.stat-card--bordered .stat-card__value {
  font-size: var(--font-h1-size);
}

/* Footnotes ------------------------------------------------------------ */

.page-footnotes {
  max-width: 1140px;
  width: 100%;
  padding: 0 0 40px;
  font-family: var(--font-body-regular-family);
  font-size: 11px;
  line-height: 1.6;
  color: var(--color-neutral-500);
}

/* ==========================================================================
   RESPONSIVE — tablet (≤768px) and mobile (≤480px).
   Desktop-first cascade: the 768px block covers both tablet and mobile;
   the 480px block layers mobile-only refinements on top of it. Heading
   and stat-number sizes shrink automatically via the --font-*-size tokens
   redefined in tokens.css — nothing to override here for those. This
   section only handles what tokens can't: layout direction, fixed-width
   columns that would otherwise overflow, grid column counts, gutters,
   and touch-target sizing.
   ========================================================================== */

@media (max-width: 768px) {
  /* Hero ------------------------------------------------------------ */
  .hero {
    padding: 56px var(--space-lg) 64px;
  }

  .hero__inner {
    flex-direction: column;
    gap: var(--space-xl);
  }

  .hero__content,
  .hero__title,
  .hero__card {
    width: 100%;
  }

  /* Gap section ------------------------------------------------------ */
  .gap-section__inner {
    flex-direction: column;
    gap: var(--space-xl);
    padding: 64px var(--space-lg);
  }

  .gap-section__steps {
    width: 100%;
    padding: 0;
  }

  .gap-section__copy {
    max-width: 100%;
  }

  .stat-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  /* Care loop / triptych / programs ----------------------------------- */
  .care-loop__inner {
    padding: 64px var(--space-lg) 40px;
  }

  .triptych {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .programs__content {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .programs__copy {
    width: 100%;
  }

  /* Hear Carrie -------------------------------------------------------- */
  .hear-carrie {
    padding: 64px var(--space-lg);
  }

  .hear-carrie__card {
    padding: var(--space-lg);
  }

  /* Testimonials --------------------------------------------------------- */
  .testimonials {
    padding: 64px var(--space-lg) 40px;
  }

  /* Results ------------------------------------------------------------ */
  .results {
    padding: 64px var(--space-lg) 80px;
  }

  .results__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footnotes ------------------------------------------------------------ */
  .page-footnotes {
    padding: 0 var(--space-lg) 40px;
  }

  /* Touch targets — text-only links get breathing room so the tappable
     area is comfortably larger than the visible underline. */
  .hero__link,
  .transcript__toggle {
    display: inline-block;
    padding: var(--space-sm) 0;
  }
}

@media (max-width: 480px) {
  /* Hero ------------------------------------------------------------ */
  .hero {
    padding: 40px var(--space-md) 48px;
  }

  .hero__inner {
    gap: var(--space-lg);
  }

  .hero__links {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .hero__card {
    padding: var(--space-md);
  }

  /* Gap section ------------------------------------------------------ */
  .gap-section__inner {
    padding: 48px var(--space-md);
    gap: var(--space-lg);
  }

  .stat-cards {
    grid-template-columns: 1fr;
  }

  /* Care loop / triptych / programs ----------------------------------- */
  .care-loop__inner {
    padding: 48px var(--space-md) 32px;
    gap: var(--space-lg);
  }

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

  .programs-strip__head {
    flex-wrap: wrap;
  }

  /* Hear Carrie -------------------------------------------------------- */
  .hear-carrie {
    padding: 48px var(--space-md);
  }

  .hear-carrie__card {
    padding: var(--space-md);
    gap: var(--space-lg);
  }

  .audio-player {
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-md);
  }

  .audio-player__waveform {
    order: 3;
    flex-basis: 100%;
    min-width: 0;
    height: 64px;
    overflow: hidden;
  }

  /* Testimonials --------------------------------------------------------- */
  .testimonials {
    padding: 48px var(--space-md) 32px;
  }

  /* Results ------------------------------------------------------------ */
  .results {
    padding: 48px var(--space-md) 64px;
  }

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

  /* Footnotes ------------------------------------------------------------ */
  .page-footnotes {
    padding: 0 var(--space-md) 32px;
  }
}