/*
 * Savings Program (page-savings-program.php)
 * Section styles for template-parts/savings/*. Loaded after style.css, which
 * owns the tokens, base, buttons, tag, header and footer.
 *
 * Lengths are the Figma values converted to the theme's fluid scale
 * (px / 1920 * 100 = vw), so the page tracks the 1920px design canvas.
 *
 * Two inner measures sit inside .container--wide (1686px of content):
 *   .savings-hero__inner / .savings-promise__inner — 1584px (168px page margins)
 *   .savings-priorauth__inner                      — 1584px (168px page margins)
 *   .savings-steps__inner                          — 1370px (275px page margins)
 *   .savings-videos__inner                         — 1368px (276px page margins)
 */

/* ==========================================================================
   Hero
   ========================================================================== */
.savings-hero {
  background: var(--c-white);
  padding-block: clamp(2.25rem, calc(5.73 * var(--vw)), 6.876rem) clamp(2.5rem, calc(6.3 * var(--vw)), 7.56rem);
}
/* The redrawn artboard is 685px wide, so it no longer runs to the right edge of
   the 1584px measure: 789px of copy, then 685px of art, then 110px of slack.
   Percentages (not fr) keep that trailing slack instead of stretching the art. */
.savings-hero__inner {
  max-width: var(--measure-wide);
  margin-inline: auto;
  display: grid;
  /* The remaining 6.94% is the gap between the two columns, not trailing slack
     after them — declared, the art column ends on the container edge like every
     other hero and the shared illustration inset lands where the comp puts it. */
  grid-template-columns: 49.81% 43.25%;
  column-gap: 6.94%;
  align-items: center;
}

/* Rule + label lockup, used in place of the .tag ribbon on this page */
.savings-eyebrow {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, calc(0.57 * var(--vw)), 0.6875rem);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.283;
  color: var(--c-charcoal);
}
.savings-eyebrow__rule {
  flex: 0 0 auto;
  width: clamp(34px, calc(3.23 * var(--vw)), 62px);
  height: 2px;
  background: currentColor;
}

.savings-hero__title {
  margin-top: clamp(1.25rem, calc(1.82 * var(--vw)), 2.1875rem);
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.3;
  color: var(--c-charcoal);
}
.savings-hero__line {
  display: block;
}
.savings-hero__title .accent {
  color: var(--c-orange);
}
.savings-hero__btn {
  margin-top: clamp(1.5rem, calc(2.24 * var(--vw)), 2.6875rem);
  text-transform: uppercase;
  font-weight: 600;
}
.savings-hero__art {
  --hero-art-w: 685;
}

/* ==========================================================================
   Promise — photo + "every cent counts"
   ========================================================================== */
.savings-promise {
  background: var(--c-ice);
  padding-block: clamp(2.75rem, calc(6.875 * var(--vw)), 8.25rem) /* 132 */
    clamp(2.5rem, calc(6.5104 * var(--vw)), 7.8125rem); /* 125 */
}
.savings-promise__inner {
  max-width: var(--measure-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 685fr) minmax(0, 791fr);
  column-gap: 6.82%; /* 108 of 1584 */
  align-items: start;
}
.savings-promise__figure {
  margin: 0;
  overflow: hidden;
  border-radius: min(20px, calc(1.0417 * var(--vw-inset)));
}
.savings-promise__figure img {
  width: 100%;
  aspect-ratio: 685 / 440;
  object-fit: cover;
  border-radius: min(20px, calc(1.0417 * var(--vw-inset)));
  transition: transform 0.5s var(--ease-out);
}
.savings-promise__figure:hover img {
  transform: scale(1.03);
}
.savings-promise__copy {
  position: relative;
}
.savings-promise__heading {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.2;
  color: var(--c-charcoal);
}
.savings-promise__heading .accent {
  color: var(--c-orange);
}
/* Opening quote hangs in the gutter to the left of the heading */
.savings-promise__mark {
  position: absolute;
  right: 100%;
  top: 0;
  margin-right: 0.02em;
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: var(--fs-hero);
  line-height: 1;
  color: var(--c-orange);
}
.savings-promise__body {
  margin-top: clamp(1rem, calc(1.56 * var(--vw)), 1.875rem);
  font-size: var(--fs-body);
  line-height: 1.8;
}

/* ==========================================================================
   About Prior Authorization — copy + illustration
   ========================================================================== */
.savings-priorauth {
  background: var(--c-cream);
  padding-block: clamp(3rem, calc(8.6458 * var(--vw)), 10.375rem) /* 166 */
    clamp(3rem, calc(8.5938 * var(--vw)), 10.3125rem); /* 165 */
}
.savings-priorauth__inner {
  max-width: var(--measure-wide);
  margin-inline: auto;
  display: grid;
  /* 792 of copy, 118 of gutter, 563 of art, then 111 of slack, on the 1584px
     measure. Percentages (not fr) keep that trailing slack instead of
     stretching the illustration, the same way the hero does. */
  grid-template-columns: 50% 35.54%;
  column-gap: 7.45%;
  align-items: center;
}
.savings-priorauth__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.26;
  color: var(--c-charcoal);
}
.savings-priorauth__body {
  margin-top: clamp(1rem, calc(2.24 * var(--vw)), 2.6875rem);
  font-size: var(--fs-body);
  line-height: 1.8;
}
.savings-priorauth__body p + p {
  margin-top: clamp(1rem, calc(1.67 * var(--vw)), 2rem);
}
.savings-priorauth__link {
  margin-top: clamp(1.5rem, calc(2.08 * var(--vw)), 2.5rem);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.8;
  color: var(--c-blue);
}
.savings-priorauth__link a:hover {
  text-decoration: underline;
}
.savings-priorauth__art {
  margin: 0;
}
.savings-priorauth__art img {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   How the Savings Program works — three pathway bands
   ========================================================================== */
.savings-steps__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
}

.savings-steps__intro-band {
  background: var(--c-white);
  padding-top: clamp(2.5rem, calc(4.74 * var(--vw)), 5.6875rem);
}
.savings-steps__heading {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.283;
  text-align: center;
  color: var(--c-charcoal);
}
.savings-steps__intro {
  margin-top: clamp(0.5rem, calc(0.68 * var(--vw)), 0.8125rem);
  margin-inline: auto;
  max-width: min(1139px, calc(59.3229 * var(--vw-inset)));
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.8;
  text-align: center;
}

/* Taken in from 94/126 to 71/94 at the client's request: with the gaps between
   the 01/02/03 sub-headers tightened below, the bands were left with more air
   than they had content. */
.savings-step {
  background: var(--c-white);
  padding-block: clamp(1.5rem, calc(3.7 * var(--vw)), 4.44rem) clamp(1.875rem, calc(4.9 * var(--vw)), 5.88rem);
}
.savings-step--blue {
  background: var(--c-blue);
  color: var(--c-white);
}
.savings-step__grid {
  display: grid;
  grid-template-columns: minmax(0, 641fr) minmax(0, 684fr);
  column-gap: 3.14%; /* 43 of 1370 */
  align-items: center;
}
.savings-step__media img {
  width: 100%;
  max-width: 350px;
  height: auto;
}
.savings-step--blue .savings-step__media img {
  max-width: none;
}

.savings-step__number {
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(3rem, calc(5.2083 * var(--vw)), 6.25rem); /* 100 */
  line-height: 1.3;
  color: var(--c-orange);
}
.savings-step__title {
  margin-top: clamp(0.75rem, calc(1.35 * var(--vw)), 1.625rem);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.3;
}
.savings-step__lead {
  margin-top: clamp(0.75rem, calc(1.41 * var(--vw)), 1.6875rem);
  font-size: var(--fs-body);
  line-height: 1.8;
}

.savings-step__list {
  margin: clamp(1.5rem, calc(2.4 * var(--vw)), 2.875rem) 0 0;
  padding-left: clamp(1rem, calc(1.72 * var(--vw)), 2.0625rem);
  border-left: 3px solid var(--c-orange);
  list-style: none;
  font-size: var(--fs-ui);
  line-height: 1.8;
}
/* 70 on the canvas, taken down to 38: the client read the original spacing as
   the three sub-headers drifting apart rather than as one list. */
.savings-step__list li + li {
  margin-top: clamp(1rem, calc(1.98 * var(--vw)), 2.375rem);
}
.savings-step__label {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c-orange);
}
.savings-step--blue .savings-step__list {
  border-left-color: var(--c-white);
}
.savings-step--blue .savings-step__label {
  color: var(--c-white);
}
.savings-step__text {
  display: block;
}

.savings-step__note {
  margin-top: clamp(1.5rem, calc(3.07 * var(--vw)), 3.6875rem);
  /* The band hugs its one line of copy — 540px of the 684px column at 1920. */
  width: fit-content;
  max-width: 100%;
  background: var(--c-ice);
  padding: clamp(0.75rem, calc(0.83 * var(--vw)), 1rem) clamp(1rem, calc(1.88 * var(--vw)), 2.25rem);
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: italic;
  font-size: var(--fs-ui);
  line-height: 1.8;
  color: var(--c-blue);
}

/* Step 02 reverses the columns and lets the map bleed toward the wide edge.
   The comp bleeds 157 of 1370 into a 275px page margin. Below 1920 the inner
   fills the container and that margin shrinks faster than the bleed, so the
   bleed is capped at whatever room is actually left — (100vw - 100%) / 2 is
   the gap between this box and the viewport edge. The map then stops at the
   edge instead of forcing the page sideways. */
.savings-step--blue .savings-step__grid {
  grid-template-columns: minmax(0, 685fr) minmax(0, 792fr);
  column-gap: 3.21%; /* 49 of the 1527 the bled grid spans */
  margin-right: calc(-1 * min(11.46%, (100vw - 100%) / 2)); /* 157 of 1370 */
}
.savings-step--blue .savings-step__media {
  order: 2;
  position: relative;
}

/* The new map names Canada, Australia and New Zealand in the artwork itself,
   so nothing is pinned over it any more. What the artwork can't do is move:
   the orange dot where the pathway starts gets a halo that breathes and two
   rings half a cycle apart washing out of it, so the map reads as live rather
   than printed. Everything is placed and sized by percentage of the image box
   — the dot sits at 21.14% / 24.84% and measures 8 of the 771 — so the pulse
   stays on it at any width.

   The three layers are siblings inside a box that only ever positions them:
   an animation on the box would take the layers inside it with it, and the
   rings fade to nothing. Centring uses `translate` so `transform` stays free
   for the scale each layer animates. */
.savings-map__pulse {
  position: absolute;
  left: 21.14%;
  top: 24.84%;
  width: 1.04%;
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
}
.savings-map__pulse::before,
.savings-map__pulse::after,
.savings-map__ring {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
/* The glow. Scaled off the dot's own size, so it swells with the artwork. */
.savings-map__pulse::before {
  background: radial-gradient(
    circle closest-side,
    rgba(241, 89, 43, 0.55) 0%,
    rgba(241, 89, 43, 0.3) 36%,
    rgba(241, 89, 43, 0) 70%
  );
  animation: savings-map-glow 2.8s ease-in-out infinite;
}
/* Two waves out of the dot, the second half a cycle behind the first. */
.savings-map__pulse::after,
.savings-map__ring {
  border: 1px solid rgba(241, 89, 43, 0.9);
  animation: savings-map-ring 2.8s var(--ease-out) infinite;
}
.savings-map__ring {
  animation-delay: -1.4s;
}
@keyframes savings-map-glow {
  0%,
  100% {
    transform: scale(4);
    opacity: 0.55;
  }
  50% {
    transform: scale(8);
    opacity: 1;
  }
}
@keyframes savings-map-ring {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  80%,
  100% {
    transform: scale(8);
    opacity: 0;
  }
}

.savings-step--blue .savings-step__body {
  order: 1;
}

/* Two sourcing pathways: 310px cards, 19px apart, of the 684px column at 1920. */
.savings-step__regions {
  margin: clamp(1.5rem, calc(2.14 * var(--vw)), 2.5625rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, clamp(150px, calc(16.15 * var(--vw)), 19.375rem)));
  gap: clamp(0.625rem, calc(0.99 * var(--vw)), 1.1875rem);
}
.savings-region {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(64px, calc(5.1 * var(--vw)), 6.125rem);
  padding: clamp(0.5rem, calc(0.68 * var(--vw)), 0.8125rem) clamp(0.5rem, calc(0.99 * var(--vw)), 1.1875rem);
  border: 1px solid var(--c-white);
  border-radius: min(10px, calc(0.5208 * var(--vw-inset)));
  background: rgba(233, 250, 255, 0.15);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.8;
}

/* ==========================================================================
   Video Gallery — two of a three-up track, so the tiles keep the design's
   428px width instead of stretching to fill the row
   ========================================================================== */
.savings-videos {
  background: var(--c-cream);
  padding-block: clamp(2.25rem, calc(5.47 * var(--vw)), 6.564rem);
}
.savings-videos__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
}
.savings-videos__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-charcoal);
}
.savings-videos__grid {
  margin: clamp(2rem, calc(3.33 * var(--vw)), 4rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 428fr));
  column-gap: 3.07%; /* 42 of 1368 */
  row-gap: clamp(2rem, calc(4 * var(--vw)), 3.5rem);
}
.savings-video__thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 428 / 269;
  background: #d9d9d9;
  border-radius: min(25px, calc(1.3021 * var(--vw-inset)));
  overflow: hidden;
}
.savings-video__media,
.savings-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.savings-video__thumb:hover .savings-video__media,
.savings-video__thumb:hover .savings-video__poster {
  transform: scale(1.04);
}
.savings-video__play {
  position: relative;
  width: clamp(52px, calc(4.27 * var(--vw)), 82px);
  height: auto;
  transition: transform 0.2s ease;
}
.savings-video__thumb:hover .savings-video__play {
  transform: scale(1.06);
}
/* Reveal target too — see .audience-card in front-page.css. */
.savings-video {
  transition: transform var(--motion) ease;
}
.savings-video:hover {
  transform: translateY(calc(var(--lift) * -1));
}
.savings-video__title a:hover {
  color: var(--c-blue);
}
.savings-video__title {
  margin-top: clamp(0.5rem, calc(0.83 * var(--vw)), 1rem);
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-charcoal);
}
.savings-video__status {
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}
/* ==========================================================================
   Savings Advocates
   ========================================================================== */
.savings-advocates {
  background: var(--c-ice);
  padding-block: clamp(2.5rem, calc(6.5625 * var(--vw)), 7.875rem) /* 126 */
    clamp(3rem, calc(8.2813 * var(--vw)), 9.9375rem); /* 159 */
}
.savings-advocates__grid {
  display: grid;
  grid-template-columns: minmax(0, 640fr) minmax(0, 684fr);
  column-gap: 3.28%; /* 45 of 1370 */
  align-items: start;
}
.savings-advocates__figure {
  margin: clamp(0.5rem, calc(1.09 * var(--vw)), 1.3125rem) 0 0;
}
/* Direct child only: the still and the play badge inside a video tile size
   themselves, and this rule outranks theirs. */
.savings-advocates__figure > img {
  width: 100%;
  height: auto;
}
/* A gallery tile at the design's 640×415 frame: the still fills it, the play
   badge sits on top, and both keep the rounded corner of the illustration
   they replace. */
.savings-advocates__thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 640 / 415;
  background: #d9d9d9;
  border-radius: min(25px, calc(1.3021 * var(--vw-inset)));
  overflow: hidden;
}
.savings-advocates__media,
.savings-advocates__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.savings-advocates__thumb:hover .savings-advocates__media,
.savings-advocates__thumb:hover .savings-advocates__poster {
  transform: scale(1.04);
}
.savings-advocates__play {
  position: relative;
  width: clamp(64px, calc(5.73 * var(--vw)), 110px);
  height: auto;
  transition: transform 0.2s ease;
}
.savings-advocates__thumb:hover .savings-advocates__play {
  transform: scale(1.06);
}
.savings-advocates__caption {
  display: block;
  margin-top: clamp(0.75rem, calc(1.2 * var(--vw)), 1.4375rem);
  margin-left: calc(0.4 * var(--vw));
  font-size: var(--fs-ui);
  line-height: 1.79;
  color: var(--c-charcoal);
}
.savings-advocates__caption-lead {
  display: block;
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
}
.savings-advocates__caption-note {
  display: block;
}
.savings-advocates__heading {
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.03;
  color: var(--c-orange);
}
.savings-advocates__body {
  margin-top: clamp(1.5rem, calc(3.85 * var(--vw)), 4.625rem);
  font-size: var(--fs-body);
  line-height: 1.79;
}
.savings-advocates__body p + p {
  margin-top: 1.79em;
}

/* ==========================================================================
   Real members, real numbers
   ========================================================================== */
.savings-results {
  /* No global token for this band; it is only used here. */
  --savings-mist: #f0f0f0;
  background: var(--savings-mist);
  padding-block: clamp(2.75rem, calc(7.2917 * var(--vw)), 8.75rem); /* 140/139 */
}
.savings-results__eyebrow {
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.283;
  text-transform: uppercase;
  color: var(--c-orange);
}
.savings-results__heading {
  margin-top: clamp(1.5rem, calc(3.02 * var(--vw)), 3.625rem);
  max-width: min(748px, calc(38.9583 * var(--vw-inset)));
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.283;
  color: var(--c-charcoal);
}
.savings-results__grid {
  margin-top: clamp(2rem, calc(2.6 * var(--vw)), 3.125rem);
  display: grid;
  grid-template-columns: minmax(0, 830fr) minmax(0, 663fr); /* 830 / 663, not 50/50 */
  column-gap: 3.05%; /* 47 of 1540 */
  align-items: stretch;
}

/* Member story card */
.savings-story {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 323fr) minmax(0, 521fr);
  background: var(--c-white);
  border-radius: min(35px, calc(1.8229 * var(--vw-inset)));
  overflow: hidden;
  /* Reveal target too — see .audience-card in front-page.css. */
  transition:
    var(--reveal-transition),
    transform var(--motion) ease,
    box-shadow var(--motion) ease;
}
.savings-story:hover {
  transform: translateY(calc(var(--lift) * -1));
  box-shadow: 0 calc(var(--lift) * 2) calc(var(--lift) * 4) rgba(20, 42, 56, 0.15);
}
.savings-story::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: min(10px, calc(0.5208 * var(--vw-inset)));
  background: var(--c-orange);
  z-index: 2;
}
.savings-story__photo {
  position: relative;
}
/* The comp masks this photo into the card rather than sizing the card to it.
   In flow, height:100% has no row height to resolve against, so the image
   falls back to its intrinsic ratio and drags the whole row to match. Taking
   it out of flow puts the copy column back in charge of the height, and the
   photo covers whatever that leaves. The comp's mask starts at the photo's top
   edge, so the crop is anchored there and gives back what it trims at the
   bottom, where there is only coat. */
.savings-story__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
.savings-story__photo-caption {
  position: absolute;
  left: clamp(1rem, calc(1.25 * var(--vw)), 1.5rem);
  right: clamp(0.5rem, calc(0.8 * var(--vw)), 1rem);
  bottom: clamp(1rem, calc(1.93 * var(--vw)), 2.3125rem);
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: italic;
  font-size: var(--fs-body);
  line-height: 1.283;
  color: var(--c-charcoal);
}
.savings-story__copy {
  padding: clamp(1.5rem, calc(3.7 * var(--vw)), 4.4375rem) clamp(1.25rem, calc(2.81 * var(--vw)), 3.375rem)
    clamp(1.5rem, calc(2.76 * var(--vw)), 3.3125rem) clamp(1.25rem, calc(2.14 * var(--vw)), 2.5625rem);
}
.savings-story__eyebrow {
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.283;
  text-transform: uppercase;
  color: var(--c-orange);
}
.savings-story__headline {
  margin-top: clamp(0.75rem, calc(1.51 * var(--vw)), 1.8125rem);
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.283;
  color: var(--c-charcoal);
}
.savings-story__body {
  margin-top: clamp(1rem, calc(1.67 * var(--vw)), 2rem);
  font-size: var(--fs-body);
  line-height: 1.79;
  color: var(--c-charcoal);
}
.savings-story__note {
  margin-top: clamp(1rem, calc(1.3 * var(--vw)), 1.5625rem);
  border-top: 1px solid rgba(57, 57, 57, 0.35);
  padding-top: clamp(1rem, calc(1.67 * var(--vw)), 2rem);
  font-size: var(--fs-ui);
  line-height: 1.79;
  color: var(--c-charcoal);
}

/* Plan-sponsor result card */
.savings-result {
  display: flex;
  flex-direction: column;
  background: var(--c-navy);
  color: var(--c-white);
  border-radius: min(31px, calc(1.6146 * var(--vw-inset)));
  padding: clamp(1.5rem, calc(3.2292 * var(--vw)), 3.875rem) clamp(1.5rem, calc(3.2292 * var(--vw)), 3.875rem)
    clamp(2rem, calc(4.2708 * var(--vw)), 5.125rem); /* 62 62 82 */
  /* Reveal target too — see .audience-card in front-page.css. */
  transition:
    var(--reveal-transition),
    transform var(--motion) ease,
    box-shadow var(--motion) ease;
}
.savings-result:hover {
  transform: translateY(calc(var(--lift) * -1));
  box-shadow: 0 calc(var(--lift) * 2) calc(var(--lift) * 4) rgba(20, 42, 56, 0.28);
}
.savings-result__chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: clamp(0.5rem, calc(0.73 * var(--vw)), 0.875rem);
  /* The old 36px floor sat above what the scale ever reaches (2.2396 x 14.4 =
     32.25), so the pill was frozen at 48 of canvas instead of the comp's 43. */
  min-height: clamp(32px, calc(2.2396 * var(--vw)), 43px); /* 43 */
  padding-inline: clamp(0.75rem, calc(0.94 * var(--vw)), 1.125rem);
  border: 1px solid var(--c-white);
  border-radius: min(10px, calc(0.5208 * var(--vw-inset)));
  background: rgba(233, 250, 255, 0.15);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.8;
}
.savings-result__dot {
  flex: 0 0 auto;
  width: min(10px, calc(0.5208 * var(--vw-inset)));
  height: min(10px, calc(0.5208 * var(--vw-inset)));
  border-radius: 50%;
  background: var(--c-orange);
}
.savings-result__value {
  margin-top: clamp(1.25rem, calc(2.0313 * var(--vw)), 2.4375rem); /* 39 */
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.26;
}
.savings-result__value .accent {
  color: var(--c-orange);
}
.savings-result__body {
  margin-top: clamp(1rem, calc(1.3021 * var(--vw)), 1.5625rem); /* 25 */
  max-width: min(648px, calc(33.75 * var(--vw-inset)));
  font-size: var(--fs-body);
  line-height: 1.8;
}
.savings-result__body p + p {
  margin-top: 1.8em;
}
.savings-result__link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: clamp(2rem, calc(4.6875 * var(--vw)), 5.625rem); /* 90 */
  display: inline-flex;
  align-items: center;
  gap: clamp(0.75rem, calc(1.4 * var(--vw)), 1.6875rem);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--c-orange);
  transition: filter 0.2s ease;
}
.savings-result__link:hover {
  filter: brightness(1.15);
}
.savings-result__link img {
  flex: 0 0 auto;
  width: clamp(26px, calc(1.93 * var(--vw)), 37px);
  height: auto;
}

/* ==========================================================================
   Closing CTA
   ========================================================================== */
.savings-cta {
  background: var(--c-navy);
  color: var(--c-white);
  /* 146 above the heading, 130 under the last line — the comp's 145/145 around
     the copy block, less the leading the browser adds that Figma's box does not. */
  padding-block: clamp(3rem, calc(7.5521 * var(--vw)), 9.0625rem); /* 145 */
}
.savings-cta__grid {
  max-width: var(--measure-narrow);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 750fr) minmax(0, 412fr);
  column-gap: 14.31%; /* 194 of 1356 */
  align-items: center;
}
.savings-cta__heading {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.48;
}
.savings-cta__heading .accent {
  font-family: var(--font-serif);
  font-weight: 700;
  font-style: italic;
  color: var(--c-orange);
}
.savings-cta__body {
  margin-top: clamp(0.75rem, calc(0.94 * var(--vw)), 1.125rem);
  font-size: var(--fs-body);
  line-height: 1.79;
}
.savings-cta__actions {
  padding-top: 0;
}
.savings-cta__btn {
  width: 100%;
  text-transform: uppercase;
}
.savings-cta__contact {
  margin-top: clamp(1rem, calc(1.41 * var(--vw)), 1.6875rem);
  font-size: var(--fs-body);
  line-height: 1.81;
}
.savings-cta__contact a {
  font-weight: 700;
  text-decoration: underline;
}
.savings-cta__contact a:hover {
  color: var(--c-sky);
}
.savings-cta__email {
  display: block;
}
/* Sits under the address as a second line of the same block, so the margin is
   the line gap rather than the paragraph gap above. */
.savings-cta__vcard {
  margin-top: clamp(0.25rem, calc(0.42 * var(--vw)), 0.5rem);
  font-size: var(--fs-body);
  line-height: 1.81;
  /* The comp runs this on one line in a 453px box, wider than the 412px
     button column it sits under, so it is allowed to overhang rather than
     wrap to a second line. */
  white-space: nowrap;
}
.savings-cta__vcard a {
  font-weight: 700;
  text-decoration: underline;
  color: var(--c-orange);
}
.savings-cta__vcard a:hover {
  color: var(--c-sky);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199px) {
  .savings-results__grid {
    grid-template-columns: 1fr;
    row-gap: clamp(2rem, calc(4 * var(--vw)), 3rem);
  }
  .savings-result__link {
    padding-top: clamp(2rem, calc(4 * var(--vw)), 3rem);
  }
}

@media (max-width: 991px) {
  .savings-hero__inner,
  .savings-promise__inner,
  .savings-priorauth__inner,
  .savings-step__grid,
  .savings-step--blue .savings-step__grid,
  .savings-advocates__grid,
  .savings-cta__grid {
    grid-template-columns: 1fr;
    row-gap: clamp(1.75rem, calc(4 * var(--vw)), 3rem);
  }
  /* The reversed step and the map bleed only make sense side by side */
  .savings-step--blue .savings-step__grid {
    margin-right: 0;
  }
  .savings-step--blue .savings-step__media,
  .savings-step--blue .savings-step__body {
    order: 0;
  }
  /* Artwork reads as support, so it follows the copy once stacked */
  .savings-step__media,
  .savings-advocates__figure,
  .savings-priorauth__art {
    order: 2;
  }
  .savings-priorauth__art img {
    max-width: 563px;
  }
  .savings-advocates__figure {
    margin-top: 0;
  }
  .savings-hero__art {
    max-width: 560px;
  }
  .savings-promise__mark {
    position: static;
    display: inline;
    margin-right: 0.1em;
  }
  .savings-step__note {
    max-width: none;
  }
  .savings-cta__actions {
    padding-top: 0;
  }
  .savings-cta__btn {
    width: auto;
  }
  .savings-story {
    grid-template-columns: 1fr;
  }
  .savings-story__photo {
    aspect-ratio: 4 / 3;
  }
  .savings-story__photo img {
    object-position: 50% 22%;
  }
  .savings-story__photo-caption {
    left: clamp(1.25rem, calc(3 * var(--vw)), 2rem);
  }
}

@media (max-width: 575px) {
  .savings-videos__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .savings-step__regions {
    grid-template-columns: minmax(0, 1fr);
  }
  .savings-step__list {
    padding-left: 1rem;
  }
  .savings-results__heading {
    max-width: none;
  }
  /* Narrower than the line itself — wrapping beats running off the screen. */
  .savings-cta__vcard {
    white-space: normal;
  }
}

/* A visitor who has asked for reduced motion still gets the feedback, just not
   the movement: the colour and shadow changes stay, and only the parts that
   travel or scale are dropped. See the matching block in front-page.css. */
@media (prefers-reduced-motion: reduce) {
  .savings-story:hover,
  .savings-result:hover,
  .savings-video:hover,
  .savings-promise__figure:hover img,
  .savings-video__thumb:hover .savings-video__media,
  .savings-video__thumb:hover .savings-video__poster,
  .savings-advocates__thumb:hover .savings-advocates__media,
  .savings-advocates__thumb:hover .savings-advocates__poster {
    transform: none;
  }
  /* The dot keeps its halo, it just stops breathing. */
  .savings-map__pulse::before {
    animation: none;
    transform: scale(6);
  }
  .savings-map__pulse::after,
  .savings-map__ring {
    animation: none;
    opacity: 0;
  }
}