/*
 * Patient home page. Loaded after components.css and patient-shell.css.
 * Layout is mobile-first, matching every other page here.
 *
 * Home has no video section — the video belongs to Learn About. Do not add one
 * here.
 */

.page {
  /*
   * Patient CTAs are navy, not HCP's dark red — the same value the design
   * system already gives the ISI title bar, which is why this repoints the
   * existing token rather than restating `.button`. Page-scoped: keep it here
   * until a second patient page is confirmed to agree.
   */
  --color-cta: var(--color-isi-title-bar);

  /*
   * The pale blue that washes up from the bottom of the teaser cards and the
   * savings band. A literal with no upstream token to inherit.
   */
  --patient-wash: #bbd3eb;

  /*
   * The wash must carry past `</main>` — the ISI card sits on blue, with blue
   * to either side of it and below it. `.page` is the one box that encloses the
   * peek region, the ISI and the footer, so the ground belongs here; `main`
   * takes the white back so everything above the band is unchanged, and the
   * band's own white -> wash gradient hands off seamlessly because its 0% stop
   * is this exact colour.
   *
   * NOT `.isi-peek-region`: it runs 148px past `<main>` (the sticky peek's own
   * height), so painting that white leaks a 148px white band either side of the
   * ISI's top.
   */
  background-color: var(--patient-wash);
}

/*
 * White ground for everything above the savings band. The hero band paints its
 * own navy over this, and the band's gradient its own white -> wash.
 */
main {
  background-color: var(--color-white);
}

/*
 * Mobile gutter. This page sets its content at 32px against the shared 24px
 * default. `.hero` needs its own copy: it sits in `.hero-band` alongside the
 * header, not inside <main>, and the header keeps its own 24px.
 */
@media (width < 48rem) {
  main {
    --container-margin: var(--space-xl); /* 32px */
  }

  .hero {
    --container-margin: var(--space-xl); /* 32px */
  }
}

/* ===============================================================
 * Hero
 * ============================================================= */

/*
 * The band's navy is a soft vignette, not a flat fill: lit at the upper left,
 * falling to #003e7e along the bottom and #00366e in the bottom-right corner.
 * The design holds it as a gradient fill, so there is no raster to export and
 * these three stops reproduce it.
 *
 * Painted by a pseudo-element rather than on the band itself so that where it
 * STOPS is independent of how tall the band's content is — mobile needs the
 * navy to end above the savings promo so the promo lands on the white section.
 */
.hero-band {
  position: relative;
  overflow: hidden;

  /*
   * White under the navy, explicitly. On mobile the `::before` stops above the
   * savings promo so the promo lands on white, and the band sits OUTSIDE
   * `main`, so without this the page's pale blue would show through. Desktop
   * never sees it: there the navy covers the whole band.
   */
  background-color: var(--color-white);
}

.hero-band::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 100%;
  background-color: #003e7e;
  background-image:
    radial-gradient(
      ellipse 78% 95% at 20% 25%,
      #165394 0%,
      rgb(0 62 126 / 0%) 100%
    ),
    linear-gradient(to right, rgb(0 62 126 / 0%) 55%, #00366e 100%);
}

/*
 * `position: relative` only up to the desktop breakpoint. Above it the
 * photograph and the promo are both anchored to the BAND — the photo starts
 * above the nav row's baseline — so `.hero` must not become their containing
 * block. `.hero__copy` takes the stacking job instead.
 */
.hero {
  position: relative;
  color: var(--color-white);
}

/*
 * No bottom padding: on mobile the savings promo IS the band's last row and the
 * band ends on the promo's own bottom edge. The 24px before the first teaser
 * card belongs to the teaser section, not to the hero.
 */
.hero__inner {
  padding-block: var(--space-s) 0;
}

.hero__eyebrow {
  margin-block-end: 0;
  color: var(--color-brand-tertiary);

  /* 16px line box at 13px, not the 1.45 default. */
  line-height: 1.25;
}

.hero__rule {
  inline-size: 100%;
  margin-block: var(--space-m);
  border: 0;
  border-block-start: var(--border-width) solid currentcolor;
  opacity: 0.5;
}

.hero__title {
  margin-block: 0;
  color: var(--color-white);
  font-family: var(--font-heading);

  /*
   * --font-size-display-3's clamp already lands on both patient endpoints
   * exactly — 32px mobile, 56px desktop — so no size override is needed here.
   */
  font-size: var(--font-size-display-3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-display);
}

/*
 * Mobile: the copy is centred with a 16px gap and the photograph sits BELOW it,
 * bleeding both edges. The navy stops before the promo so the promo lands on
 * the white section.
 */
@media (width < 68rem) {
  /*
   * This page's header is taller than the shared partial's: 32/24/32 padding
   * here (175px) against the partial's 24/24/24 (159px). Page-scoped — the
   * other patient pages match the partial.
   */
  .hero-band .site-header__inner {
    padding-block: var(--space-xl);
  }

  .hero__copy {
    text-align: center;
  }

  /*
   * ...ending under the PHOTOGRAPH's bottom edge, not 8.5px above it. The photo
   * overhangs the navy by 8.5px, and the `+ 0.5313rem` adds that back so the
   * navy stops exactly where the photo does. Without it, once the photo stops
   * bleeding (it is capped at 800px) those 8.5px show as a detached pale bar of
   * the image's bottom rows floating on the white below the band. It changes
   * no geometry, only where the paint stops.
   */
  .hero-band::before {
    block-size: calc(100% - (2.5rem + var(--savings-promo-height)) + 0.5313rem);
  }

  /*
   * The photograph starts 4.6px below the title and overhangs the navy's end
   * by 8.5px. The negative end margin stops that overhang pushing the promo
   * down, so the promo still starts 40px after the navy ends.
   */
  .hero__figure {
    margin-block: 0.2875rem -0.5313rem; /* 4.6px / -8.5px */
  }

  /*
   * PERCENTAGES RESOLVE AGAINST `.hero__figure`, which is the container's 366px
   * content box — not the 430 viewport the design measures from.
   */
  .hero__photo {
    inline-size: 165.574%; /* 606 / 366 */

    /*
     * CEILING: the photo is never larger stacked than it is on desktop. The
     * 165.574% is the mobile ratio and uncapped it keeps scaling, reaching
     * near-native size on a tablet. 800px is the desktop width.
     */
    max-inline-size: 50rem; /* 800px */

    /*
     * The bleed goes with the cap. -21.749% is the mobile left overhang and it
     * holds while the photo is WIDER than its column: it overflows both edges
     * and reads as centred on the subject. Once the cap holds and the column
     * grows past 800, that percentage would shove an 800px photo off the left
     * edge, so `max()` hands over to an ordinary centring margin. Continuous at
     * the crossover, where both terms are 0, so nothing snaps.
     */
    margin-inline-start: max(-21.749%, (100% - 50rem) / 2);
  }

  .savings-promo {
    margin-block-start: 2.5rem; /* 40px, the drawn section padding */

    /*
     * A CARD, not a bar. The stacked layout runs all the way up to the 68rem
     * desktop breakpoint, so uncapped this box stretched to a full-width strip
     * with one button at the far left. Capped at the mobile card's 366px and
     * centred under the photograph. `inline-size: 100%` alongside the cap so it
     * still fills at 366 and does not collapse to the button's width under an
     * auto inline margin.
     */
    inline-size: 100%;
    max-inline-size: 22.875rem; /* 366px */
    margin-inline: auto;
  }
}

/*
 * Desktop: the photograph is NOT in the hero's flow — it starts above the
 * header's baseline, so it runs up behind the nav row. Anchoring it to the band
 * rather than to a grid column is what lets it do that; the copy column is then
 * the only thing the hero lays out.
 */

/*
 * The `height` attribute is a presentational hint that stays in force unless it
 * is cancelled, so constraining inline-size alone leaves the intrinsic height
 * applied.
 *
 * ORDER MATTERS: this must stay ABOVE the desktop block below. At equal
 * specificity, placed after it, it silently beats the desktop `block-size` and
 * the photo scales instead of cropping.
 */
.hero__photo {
  block-size: auto;
}

@media (width >= 68rem) {
  .hero {
    position: static;
  }

  /* 110px above the copy and 158px below it — the two paddings that make the
     band 615px tall (97 header + 110 + 250 + 158). */
  .hero__inner {
    padding-block: 6.875rem 9.875rem;
  }

  /* The copy's own gap is 24px here against mobile's 16. */
  .hero__rule {
    margin-block: var(--space-l);
  }

  /*
   * The copy starts 25px inside the container's content edge as a MARGIN, not
   * padding, so the box itself starts there and the 586px column still measures
   * 586. The 25px belongs to the copy alone; the photograph and the promo are
   * anchored to the viewport.
   *
   * `relative` here, not on `.hero`: it lifts the copy over
   * `.hero-band::before` without making `.hero` a containing block for the two
   * absolute children.
   */
  .hero__copy {
    position: relative;
    z-index: 1;
    margin-inline-start: 1.5625rem; /* 25px */

    /*
     * 586px as a CEILING. Below ~1340 the photo's 606px floor is what holds and
     * this column is the complement: container content width, less the 72px of
     * gutter/margin/tuck between the two boxes, less the photo
     * (42.375rem = 72 + 606). The title reflows to more lines there — the copy
     * yields to the product photograph.
     */
    max-inline-size: min(36.625rem, 100% - 42.375rem);
  }

  /*
   * The photo is anchored to the BAND (the viewport), the copy to the centred
   * container, so the WIDTH has to carry the relationship between them.
   * Otherwise the copy's right edge stops moving once the container hits its
   * 1440 cap while the photo's left edge keeps sliding left with the viewport,
   * and the headline ends up sitting over the photograph.
   *
   * With the width carrying it, the left edge holds 10px behind the copy
   * at every width — the drawn offset, kept:
   *
   *   45.875rem = 734px = 85 (the end inset) + 649 (the copy's right edge
   *               measured from the container's left: 48 gutter + 25 margin
   *               + 586 column, less the drawn 10px tuck)
   *   90rem     = 1440px = --container-max, so the `max()` term is the
   *               container's own left offset once it stops filling the band
   *
   * Percentages, never `vw`: the band IS the containing block and the container
   * centres inside that same box, so both resolve against a width that already
   * excludes the scrollbar. `vw` does not, and the two would drift apart by the
   * scrollbar's width on exactly the platforms that have one.
   *
   * At the design width the `min()` floor is 800 and nothing moves.
   */
  .hero__figure {
    position: absolute;
    inset-inline-end: 5.3125rem; /* 85px */

    /*
     * ...with a FLOOR of 606px, the mobile photo width, so the two breakpoints
     * are the endpoints of one curve. Without it the photo falls 1:1 with the
     * viewport. Below ~1340 the floor is what holds and the COPY yields instead
     * (see .hero__copy).
     */
    inline-size: min(
      50rem,
      max(37.875rem, 100% - 45.875rem - max(0px, (100% - 90rem) / 2))
    );

    /*
     * Hung from the band's BOTTOM, not its top. The width constraint above
     * shrinks the photo below the design width, and which edge holds decides
     * what the shrinkage costs: at the top it opens a blue gap along the
     * band's bottom edge, while at the bottom the band's own edge stays
     * clean and the gap moves above the photo, reading as the navy simply
     * being taller behind the nav.
     *
     * `object-fit: cover` at a held height is not an alternative: it keeps the
     * full bleed but slices subject matter — the hand and inhaler sit in the
     * left quarter and the child's clothing runs to the right edge. This is a
     * product image on a regulated page, so it ships whole.
     */
    inset-block-end: -0.375rem; /* -6px, the drawn overhang */
  }

  .hero__photo {
    inline-size: 100%;
    block-size: auto;
  }
}

/* ---------------------------------------------------------------
 * Savings-card call-out
 * ------------------------------------------------------------- */

.savings-promo {
  position: relative;
  min-block-size: var(--savings-promo-height); /* 117px */
  border-radius: var(--radius-sm);
  background-color: var(--color-accent); /* #5a94ce */
}

/*
 * The promo's own button is the one button on this page that is not 44px tall:
 * it is drawn 178x42 with a 14px label. Built as drawn; `.button--sm` already
 * supplies the 14px.
 */
.savings-promo .button--sm {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--space-m); /* 16px */
  min-block-size: 2.625rem; /* 42px */
  translate: 0 -50%;
}

/*
 * The card cluster is clipped by its own frame, flush with the box's right and
 * bottom edges but starting 45px ABOVE its top, so the card pops out over the
 * box while the hand is cut at the box's own edge. Desktop 193x162 and mobile
 * 171.556x144 are the same 1.1914 aspect, so one raster serves both and only
 * the box changes.
 */
.savings-promo__clip {
  position: absolute;
  inset-block-start: -1.6875rem; /* -27px, the mobile frame's own offset */
  inset-inline-end: 0;
  inline-size: 10.7222rem; /* 171.556px */
  block-size: 9rem; /* 144px */
  overflow: hidden;
  border-radius: var(--radius-sm);
  pointer-events: none;
}

/*
 * Pre-composed, pre-clipped export rather than three layers rebuilt in CSS: the
 * design stacks a hand photograph, a rotated savings-card raster and two radial
 * gradient overlays inside the clip frame. The shipped file is the 3x export
 * with the 1x render's alpha channel transferred onto it, so the RGB is full
 * resolution and the silhouette is correct. Re-export the same way.
 */
.savings-promo__card {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

@media (width >= 68rem) {
  .savings-promo {
    position: absolute;

    /* Aligned to the NAV's gutter, not to `.container`: the nav row and this
       box share the same right edge. */
    inset-block-end: var(--space-l); /* 24px */
    inset-inline-end: var(--space-l);
    inline-size: 20.875rem; /* 334px */
  }

  .savings-promo__clip {
    inset-block-start: -2.8125rem; /* -45px */
    inline-size: 12.0625rem; /* 193px */
    block-size: 10.125rem; /* 162px */
  }
}

/* ===============================================================
 * Overview / How to Use teasers
 * ============================================================= */

/*
 * Section rhythm, not the shared `.section` 48px: 80px either side of the row
 * on desktop; on mobile the cards sit 24px below the savings promo and run
 * flush to the divider section's own top edge.
 */
.teasers-section {
  padding-block: var(--space-l) 0;
}

.teasers {
  display: grid;
  gap: var(--space-l); /* 24px */
}

/*
 * The two-up row starts at 48rem, well below the 68rem desktop type/padding
 * step: between the two the cards keep mobile type and rhythm in a row whose
 * cards run 324..508px, straddling the 366 the mobile design draws.
 *
 * Two columns from this width rather than from 68rem because single-column a
 * card reaches 984px wide at the top of that range — a shape neither photograph
 * works in.
 */
@media (width >= 48rem) {
  .teasers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * Below the row, the card is capped and centred rather than filling a 767px
 * viewport. Everything in it is proportional to its width, so an unbounded
 * card is an unboundedly TALL one; 480px holds the stacked card near the mobile
 * proportions. `.teasers` IS the container, so the cap adds the container's own
 * padding back — the CARD lands on 480, not the padding box.
 */
@media (width < 48rem) {
  .teasers {
    max-inline-size: calc(30rem + var(--container-margin) * 2); /* 480px card */
  }
}

/*
 * Both cards: #eef0f2 with the pale blue washing up from the bottom to 56.6%,
 * the same gradient on all four instances. The photograph is absolutely placed
 * and the card clips it.
 */
.teaser {
  display: flex;
  position: relative;
  flex-direction: column;
  padding: var(--space-xl) var(--space-l); /* 32px 24px, the mobile card */
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--color-card-surface);
  background-image: linear-gradient(
    to top,
    var(--patient-wash) 0%,
    /* The SAME token at alpha 0, derived rather than retyped: as a literal
       it is a silent twin, and repointing --patient-wash would leave the fade
       running to the old hue with nothing to catch it. */
    rgb(from var(--patient-wash) r g b / 0%) 56.601%
  );
}

.teaser__body {
  display: flex;
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-l); /* 24px — see the note on the 8px/20px split below */
}

.teaser__body .eyebrow {
  margin-block-end: 0;
}

/*
 * PER-BREAKPOINT PAIR — 24px/1.4 mobile against 28px/1.1 desktop. Both the size
 * and the leading step.
 */
.teaser__title {
  margin: 0;
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug); /* 1.4 */
  letter-spacing: var(--tracking-display);
}

/*
 * The teaser copy is #000 at both widths, where every other body run on the
 * site is --color-text-body #3a3a3a. Built as drawn. Do not "correct" it to the
 * site default.
 */
.teaser__lede {
  margin: 0;
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-loose); /* 1.6 */
  letter-spacing: var(--tracking-isi-text); /* 0.24px at 16px */
}

.teaser__media {
  position: absolute;
  inset-inline: 0;
  z-index: 0;
}

.teaser__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/*
 * Card 2 only — its one img. Her HEAD must survive the crop: the media box
 * is aspect ~1.05 against a portrait source at 0.90, so `cover` fills the width
 * and trims 14.3% of the source's HEIGHT. Split evenly it cuts through the top
 * of her head; anchoring to the top spends the whole 14.3% at the BOTTOM
 * instead, where the box already hangs below the card's edge and is clipped
 * anyway.
 *
 * `.teaser--how-to-use img`, not `... .teaser__media img`: the card holds
 * exactly one image, and matching `.teaser__media img`'s own (0,1,1) keeps this
 * from ordering ahead of `.savings-band__media img` lower down
 * (stylelint no-descending-specificity).
 */
.teaser--how-to-use img {
  object-position: top;
}

/*
 * Card 1's photograph fills the card's width and sits flush with its bottom
 * edge.
 *
 * PROPORTIONAL, not a fixed height. Both breakpoints are drawn at one ratio
 * (630/434 and 366/251, 1.1px apart at 366 wide), so one ratio serves every
 * width and the crop is identical at all of them. Held as a fixed height while
 * only the width moved, `cover` had to make up the difference by cropping —
 * badly at the widths between the two designs.
 */
.teaser--overview .teaser__media {
  inset-block-end: 0;
  aspect-ratio: 630 / 434;
}

/*
 * Card 2's photograph is narrower than its frame and offset, and the card cuts
 * it off at the bottom: ~85% of the card's width at ~20% from its left edge,
 * with 56.7px of the photo below the card's edge.
 */
.teaser--how-to-use .teaser__media {
  /*
   * THE BOX'S ASPECT MUST MATCH THE SOURCE'S, or `cover` eats her head.
   * `how-to-use-inhaler.webp` is portrait 1689x1869 — aspect 0.904 — so a box
   * 345 tall has to be 312 wide. At the frame's own aspect the box was 1.06 and
   * `cover` trimmed 14.6% of the source's height, taking the top of her head
   * with it. The desktop pair below carries the same correction.
   */

  /*
   * PROPORTIONAL to the card, as the desktop pair below is. Every number
   * here is the mobile box expressed as a fraction of its 366px card, and the
   * card itself is aspect-locked in this range (see the min-block-size block
   * below), so a percentage of the card's HEIGHT and a percentage of its WIDTH
   * scale together:
   *
   *   inline-size       311.8 / 366 = 85.191%
   *   inset-inline-end  -19.75 / 366 = -5.396%   (the drawn bleed past the
   *                     card's right edge)
   *   inset-block-end   -56.7 / 576 = -9.844%    (of the card's height)
   *
   * A fixed box does not work here: at the top of this range the card is ~700px
   * wide and a stamp-sized photograph reads as a mistake, while a percentage
   * width against a pinned card height either overflows the card or stretches
   * the aspect until `cover` crops the sides. Locking the card's own aspect is
   * what makes a proportional photograph possible here at all.
   */
  inset-inline: auto -5.396%;
  inset-block-end: -9.844%;
  inline-size: 85.191%;
  block-size: auto;
  aspect-ratio: 1689 / 1869; /* the raster's own w/h — so nothing is cropped */
}

/*
 * The photograph is absolutely placed, so it contributes no height — the cards
 * are as tall as they are drawn rather than as tall as their copy. Scoped below
 * the breakpoint so the shared 644 above it is not outranked by these more
 * specific selectors.
 *
 * Below the desktop step the height is a RATIO, not a fixed 543/576: both
 * photographs are proportional to the card, so the card has to be proportional
 * too or they run out of room in it. At 366 wide the ratios resolve to 543 and
 * 576 exactly.
 */

/*
 * The drawn height is KEPT, as a floor under the ratio, and not redundant:
 * an `aspect-ratio` alone sizes the card to width x ratio, and `.teaser`
 * clips (`overflow: hidden`), so a card narrower than 366 is a card that eats
 * its own button. No content keyword substitutes for it — `max-content`,
 * `fit-content` and `min-content` all leave this flex container at the ratio's
 * height. The px floor is what grows it.
 */

/*
 * `inline-size: 100%` is REQUIRED alongside every aspect-ratio + min-block-size
 * pair below, and the mechanism runs BACKWARDS from the intent: once the height
 * floor beats the ratio at a narrow column, the card has a DEFINITE height —
 * and a box with a definite size in one axis plus an aspect-ratio derives the
 * other axis from the ratio instead of stretching. So the floor re-derives the
 * WIDTH, the card stops shrinking below 366 and the document scrolls sideways
 * on every viewport under 430. Stating the inline size makes the WIDTH the
 * definite axis, which is the direction the ratio was meant to run.
 * `min-inline-size: 0` alone does not fix it.
 */
@media (width < 68rem) {
  .teaser--overview {
    aspect-ratio: 366 / 543;
    inline-size: 100%;
    min-block-size: 33.9375rem; /* 543px */
  }

  .teaser--how-to-use {
    aspect-ratio: 366 / 576;
    inline-size: 100%;
    min-block-size: 36rem; /* 576px */
  }
}

/*
 * ...except that the two cards' ratios differ, and once they SHARE a row that
 * reads as a mistake. The difference is drawn only where the cards are STACKED
 * (543 and 576); side by side both are 644. So card 1 takes card 2's ratio and
 * floor for exactly the range where they sit side by side below the desktop
 * step.
 *
 * `align-items: stretch` cannot do this: an aspect-ratio gives a grid item a
 * definite height, and an item with a definite height does not stretch. Stating
 * the shared ratio is what equalises the row.
 */
@media (48rem <= width < 68rem) {
  .teaser--overview {
    aspect-ratio: 366 / 576;
    inline-size: 100%;
    min-block-size: 36rem; /* 576px */
  }
}

@media (width >= 68rem) {
  .teasers-section {
    padding-block: 5rem; /* 80px either side of the row */
  }

  /*
   * The card row's content is inset 30px inside the container's content box.
   * The cap adds the container's own padding back so the cards, not the padding
   * box, land on that inset.
   */
  .teasers {
    max-inline-size: calc(80.25rem + var(--container-margin) * 2);
  }

  .teaser {
    /* 48px inline / 40px block, and the drawn 644px card height. */
    min-block-size: 40.25rem; /* 644px */
    padding: 2.5rem var(--gutter); /* 40px 48px */
  }

  .teaser__body {
    gap: 1.25rem; /* 20px */
  }

  .teaser__title {
    font-size: var(--font-size-h3); /* 28px */
    line-height: var(--line-height-tight); /* 1.1 */
  }

  .teaser--how-to-use .teaser__media {
    /*
     * 500 wide against 554 tall = aspect 0.903, the source's own 0.904 — so
     * `cover` crops essentially nothing and her head arrives whole. At the
     * frame's own aspect the box was 1.05 and cost 14.3% of the source's height
     * off the top.
     */
    inset-inline: 27.3% -6.665%;
    inset-block-end: -6.3rem; /* -100.8px */

    /* Release the stacked layout's fixed box; height derives from the ratio. */
    inline-size: auto;
    block-size: auto;
    aspect-ratio: 1689 / 1869; /* the raster's own w/h — so nothing is cropped */
  }
}

/*
 * The mobile Overview card draws its four children 8px apart where the mobile
 * How to Use card and both desktop cards draw them 20px apart. Built at the
 * consistent 20px rather than shipping two structurally identical cards with
 * different internal rhythm.
 */

/* ===============================================================
 * Divider
 * ============================================================= */

/*
 * Content-width on desktop (the container's own content box) and FULL-BLEED on
 * mobile. `.section__rule` already gives the desktop form.
 */
.patient-divider {
  /* Its own section at both widths: 20px either side on desktop, 56px on
     mobile. */
  margin-block: 3.5rem; /* 56px */
}

@media (width < 68rem) {
  .patient-divider {
    inline-size: 100%;
    max-inline-size: none;
  }
}

@media (width >= 68rem) {
  .patient-divider {
    margin-block: 1.25rem; /* 20px */
  }
}

/* ===============================================================
 * Savings card band
 * ============================================================= */

/*
 * The photo bleeds off the trailing edge and below the band at both widths,
 * so the band clips it.
 */
.savings-band {
  position: relative;
  overflow: hidden;

  /*
   * The band's own rhythm, not the shared `.section` 48px.
   *
   * TOP ONLY. The mobile design states a top padding and none for the bottom,
   * and `padding-block` with one value sets both. The extra 48px showed as a
   * band of empty wash between the savings card and the ISI.
   */
  padding-block: var(--space-2xl) 0; /* 48px, top only */
  background-image: linear-gradient(
    to top,
    var(--patient-wash) 0%,
    var(--color-white) 56.601%
  );
}

.savings-band__inner {
  display: grid;
  gap: var(--space-l);
}

.savings-band__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m); /* 16px */
  text-align: center;
}

.savings-band__body .eyebrow {
  margin-block-end: 0;
}

/*
 * The eyebrow's COPY differs by breakpoint — "Affordability" wide, "SAVINGS
 * CARD" narrow. Both halves ship and one is hidden per breakpoint, so it is
 * `display` that decides which one a reader gets.
 */
.savings-band__eyebrow--wide {
  display: none;
}

.savings-band__eyebrow--narrow {
  display: inline;
}

/*
 * PER-BREAKPOINT PAIR — 28px/1.4 centred mobile against 40px/1.1 left-aligned
 * desktop.
 */
.savings-band__title {
  margin: 0;
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-h3); /* 28px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug); /* 1.4 */
  letter-spacing: var(--tracking-display);
}

.savings-band__rule {
  inline-size: 5rem; /* 80px */
  margin: 0;
  border: 0;
  border-block-start: var(--border-width) solid var(--color-rule);
}

.savings-band__lede {
  margin: 0;
  color: var(--color-text-body);
  font-family: var(--font-heading);
  font-size: var(--font-size-body); /* 16px mobile */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body); /* 1.45 */
  letter-spacing: var(--tracking-isi-text);
}

.savings-band__lede p {
  margin: 0;
}

.savings-band__lede p + p {
  margin-block-start: 0.75rem; /* 12px, the drawn paragraph gap */
}

/*
 * The design puts two unfilled 79x1 rectangles either side of the button. They
 * render as nothing, so the gap they produce (16 + 1 + 16 = 33px) is reproduced
 * as spacing rather than as empty markup.
 */
.savings-band__body .button {
  margin-block: 1.0625rem; /* 17px, making 16+17 = 33 either side */
}

/*
 * This page's footnote is Inter at 12px desktop / 10px mobile, not the site's
 * Manrope --font-size-footnote, which is an HCP-only value. Its own class for
 * exactly that reason.
 */
.savings-band__footnote {
  margin: 0;
  color: var(--color-text-body);
  font-family: var(--font-support);
  font-size: var(--font-size-legal); /* 10px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-snug); /* 1.4 */
  letter-spacing: var(--tracking-isi-text);
}

.savings-band__media img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/*
 * Mobile: the design nests TWO boxes here — a full-bleed 770x307 clip frame and
 * a 433x357 image box inside it — so the raster is 433 wide, not 770, and the
 * clip frame's shorter height trims 50px off the box's top. The raster is then
 * cropped again by its own box, which the offset below folds in: box top
 * -50, raster top within the box -16.7, so -66.7 from the clip. Sizing the
 * raster to the outer box instead renders it 1.78x too large and crops the card
 * off the left edge.
 *
 * Percentages resolve against the container's 366px content box, not the 430
 * viewport the design measures from.
 */
@media (width < 68rem) {
  /*
   * FULL-BLEED, which is what the clip frame is: 770 wide on a 430 board,
   * running off BOTH edges of the screen. Sized to the container's 366px
   * content column instead, and since it clips, the savings card is cut at the
   * text edge, with a gap to the page edge of exactly `--container-margin`. The
   * card is meant to run off the page.
   *
   * The negative margins cancel the container's own padding, so the box spans
   * the band — the whole viewport here, since `.container` caps at 1440
   * and this range ends at 1087. `overflow: hidden` has to stay: it is what
   * trims the raster to the frame's height, now at the page edge, not the
   * text column's.
   */
  .savings-band__media {
    position: relative;

    /*
     * 275px, not the clip frame's 307: the artwork does not fill the frame, and
     * the box's last ~34px were empty wash between the card and the ISI.
     * The 307 belongs to the 770-wide clip, not to the 433-wide image actually
     * rendered inside it.
     */
    block-size: 17.1875rem; /* 275px — ends where the artwork does */
    margin-inline: calc(var(--container-margin) * -1);
    overflow: hidden;
  }

  .savings-band__media img {
    position: absolute;
    inset-block-start: -4.1688rem; /* -66.7px */

    /*
     * CEILING at the drawn 433px, anchored to the TRAILING edge. Both
     * percentages resolve against the full-bleed box above, so both are stated
     * against the 430 board's VIEWPORT rather than its 366 content column: the
     * card is 433 wide (100.698% of 430) and its right edge lands 94px past the
     * screen.
     *
     * The cap is what this range needs. The ratios were right while it ended at
     * a phone; it runs to 1087px, and uncapped they take the raster to four
     * times its drawn size inside a clip box that has not grown. `min()` and
     * `max()` hand over at exactly 430, so nothing snaps: below it the card and
     * its bleed scale with the page, at and above it both freeze and only the
     * page grows around them. The block offset is fixed px, so above 430
     * the whole box is frozen.
     */
    inset-inline: auto max(-21.86%, -5.875rem); /* -94 / 430, then -94px */
    inline-size: min(100.698%, 27.0625rem); /* 433 / 430, capped at 433px */
    max-inline-size: none;
  }
}

@media (width >= 68rem) {
  /*
   * TOP IS A KNOWING DEPARTURE FROM THE DESIGN, matching the HCP site: 72px
   * rather than the drawn 177.5, which is the same spacing the HCP pages give
   * this band.
   *
   * The BOTTOM keeps the drawn 227.5. It borders the sticky-ISI handover, the
   * same reason the HCP home page leaves its own band's bottom on the shared
   * value.
   */
  .savings-band {
    padding-block: 4.5rem 14.2188rem; /* 72px / 227.5px */
  }

  .savings-band__inner {
    grid-template-columns: minmax(0, 40.125rem) minmax(0, 1fr); /* 642px */
    align-items: center;
  }

  .savings-band__body {
    align-items: flex-start;
    text-align: start;
  }

  .savings-band__eyebrow--wide {
    display: inline;
  }

  .savings-band__eyebrow--narrow {
    display: none;
  }

  .savings-band__title {
    font-size: var(--font-size-h1); /* 40px */
    line-height: var(--line-height-tight); /* 1.1 */
  }

  .savings-band__lede {
    font-size: var(--font-size-body-lg); /* 20px */
    letter-spacing: var(--tracking-body-lg);
  }

  .savings-band__footnote {
    max-inline-size: 33.6875rem; /* 539px */
    font-size: var(--font-size-caption); /* 12px */
  }

  /*
   * The card is drawn 852px wide, but the WIDTH must carry its relationship to
   * the copy column: the card is pinned to the band's trailing edge while the
   * copy is pinned to the centred container, so at a fixed width its left
   * edge slides across the copy as the viewport narrows. Yielding the width
   * holds the drawn 40px clearance behind the copy at every width:
   *
   *   42.625rem = 682px = 642 (the body column) + 40 (the drawn gap)
   *   90rem     = 1440px = --container-max, so the `max()` term is the
   *               container's own left offset once it stops filling the band
   *   53.25rem  = 852px, the drawn width, which the `min()` restores at and
   *               above the design width — there the two terms are equal
   *
   * Percentages, never `vw`: the band is the containing block and the container
   * centres inside that same box, so both already exclude the scrollbar.
   */

  /*
   * THE PHOTOGRAPH IS NEVER CROPPED, and two rules keep it that way.
   *
   * THE RASTER IS MOSTLY BLANK AT THE TOP — 20.7% of the file above the hand,
   * 10.1% below it. So `inset-block-start: 0` does not put the CARD at the top
   * of the band, it puts empty pixels there and pushes the card down; the
   * band's own height, which comes from its padding and copy rather than from
   * the image, then takes the difference out of the bottom of the hand.
   * Lifting the image by its own blank top margin costs nothing and buys all
   * of it: the CARD, not the file, sits at the band's padding edge, and the
   * only thing still clipped is blank pixels. The 23% is the measured 20.71%
   * plus ~2.3% of clearance.
   *
   * THE RIGHT INSET MUST STAY 0. The design bleeds the photo 48px past the
   * band's trailing edge, but this raster's content runs to its right edge —
   * no blank margin there to spend — so any bleed cuts HAND rather than margin.
   * At 0 the clearance behind the copy is also exactly the drawn 40px at every
   * width.
   */
  .savings-band__media {
    position: absolute;
    inset-block-start: 4.5rem; /* 72px — the band's own top padding edge */
    inset-inline-end: 0;
    inline-size: min(53.25rem, 100% - 42.625rem - max(0px, (100% - 90rem) / 2));
  }

  .savings-band__media img {
    transform: translateY(-23%);
  }
}