/*
 * Affordability page. Loaded after components.css, before print.css.
 *
 * Mobile-first, with the desktop arrangement added at 68rem — the breakpoint
 * the shell already uses.
 *
 * Only genuinely page-specific rules belong here: the hero photo bleed, the
 * offer block, the benefit cards and the bullet block. `.page-hero`,
 * `.page-hero__title` and `.page-hero__rule` live in components.css — this
 * page and Efficacy are its two consumers.
 */

/*
 * Mobile gutter. This page's content sits at 32px against the shared 24px
 * token, the same as Efficacy. Scoped to <main> so the shared header, ISI
 * and footer keep the shell's own gutter.
 */
@media (width < 48rem) {
  main {
    --container-margin: var(--space-xl); /* 32px */
  }
}

/*
 * Both `.prose` usages on this page (the hero lede and the offer copay
 * lines) and the bullet list step down to 16px on mobile. `.prose` keeps its
 * 20px default for every other page; this file only ever loads here.
 */
@media (width < 68rem) {
  .prose {
    font-size: var(--font-size-body);
  }

  /* 28px/1.4 mobile headline. Page-scoped, not shared: Efficacy keeps 40px
     at this breakpoint. */
  .page-hero__title {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-snug);
  }

  /* 28px — the "Affordable Options" heading steps down from
     .section__title's shared 40px on mobile. */
  .offer .section__title {
    font-size: var(--font-size-h3);
  }

  /* 56 from the section's top to the eyebrow, against the shared
     section's 48. */
  .section:has(> .offer) {
    padding-block-start: 3.5rem;
  }
}

/* ===============================================================
 * Page hero
 *
 * Same solid-navy header as Efficacy sits above this band — `.page-hero`
 * supplies the shared grey band and title treatment. This page adds a
 * two-column desktop layout and a photo that bleeds off the right edge at
 * both breakpoints.
 * ============================================================= */

.page-hero {
  /* `hidden` first as a fallback for pre-clip engines, `clip` second so it
     wins where supported. Clip, not hidden, because a scroll container would
     break position:sticky descendants and accept programmatic horizontal
     scroll; this band has neither, but the distinction is cheap insurance. */
  overflow-x: hidden;
  overflow-x: clip;
}

.page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
}

/* 642px, close enough to the lede's own 632px that both wrap consistently
   under one shared measure. */
.page-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
  max-inline-size: 40.125rem;
  text-align: center;
}

/*
 * The photo bleeds past the true viewport edge at both breakpoints, by the
 * amount in `--hero-bleed`. `.page-hero` is 100vw already clipped, so this
 * reaches for the viewport edge the same way the shared
 * `.affordability__media` left-bleed does, then goes `--hero-bleed`
 * further — expressed relative to the container rather than as a fixed
 * number that only works at one width.
 */
.page-hero__media {
  --hero-bleed: 5.4375rem; /* 87px on mobile */

  margin-inline-end: calc(
    -1 *
      (
        max(
            var(--container-margin),
            (100vw - var(--container-max)) / 2 + var(--container-margin)
          ) +
          var(--hero-bleed)
      )
  );
}

.page-hero__media img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* A rule at the hero's bottom edge on mobile only: a 2px #E6E6E6 stroke the
   full viewport width, not the darker content-width rule token. Against the
   hero's #EEF0F2 it is barely there, which is intended. */
.affordability__hero-divider {
  inline-size: 100%;
  max-inline-size: none;
  margin-block: 0;
  border-block-start: 2px solid oklch(92.5% 0 0deg); /* #e6e6e6 */
}

@media (width >= 68rem) {
  /* The inner KEEPS .container's --container-max cap. Uncapping it makes
     this one band track the raw viewport while the header, ISI and every
     section below stay at the container position: the hero copy slides out
     to the viewport edge and the photo inflates well past its box. The clip
     absorbs the overflow, so nothing else reports it. */
  .page-hero__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter);
    padding-block: 6.5rem;
  }

  /* The title and lede inherit their alignment from the intro — centred on
     mobile, start-aligned here. */
  .page-hero__intro {
    align-items: flex-start;
    text-align: start;
  }

  /*
   * The photo is capped at its own 739px box, so above 1440 it stops growing
   * and the bleed stays a constant 68px.
   */
  .page-hero__media {
    --hero-bleed: 4.25rem; /* 68px on desktop */

    flex: 1 0 0;
    max-inline-size: 46.1875rem; /* 739px photo box */
  }

  /* No rule below the hero on desktop. */
  .affordability__hero-divider {
    display: none;
  }
}

/* ===============================================================
 * Affordable Options — offer block, benefit cards, bullet list
 * ============================================================= */

.offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 24px from the heading to the copay lines on mobile; desktop uses 20. */
.offer .section__title {
  margin-block-end: var(--space-l);
}

.offer__lede {
  max-inline-size: 51.25rem; /* 820px */
}

/* 12px between the two copay lines at both breakpoints. */
.offer__lede p + p {
  margin-block-start: 0.75rem;
}

/* 64px from the copay lines to the button on mobile (24 + 16 + 24);
   desktop is 20 + 16 + 20 = 56. */
.offer .button {
  margin-block-start: 4rem;
}

/*
 * The card frame: a 12px radius, the diagonal wash, and a CROP — the frame
 * scales the raster to 107.21% x 106.8% and offsets it -3.42% / -2.41%,
 * trimming the photo's own margin off every edge. The raster ships
 * uncropped, so the crop happens here. On mobile the frame runs 3px past the
 * content edge on both sides. 56 above it (24 + 8 + 24); desktop
 * 20 + 8 + 20 = 48.
 */
.offer__card {
  position: relative;
  overflow: hidden;
  inline-size: calc(100% + 0.375rem);
  max-inline-size: 33.25rem; /* 532px, desktop card measure */
  aspect-ratio: 1496 / 866; /* the raster's own ratio */
  margin-block-start: 3.5rem;
  margin-inline: -0.1875rem;
  border-radius: 0.75rem;
}

.offer__card img {
  position: absolute;
  inset-block-start: -2.41%;
  inset-inline-start: -3.42%;
  inline-size: 107.21%;
  max-inline-size: none;
  block-size: 106.8%;
}

.offer__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    203deg,
    rgb(0 0 0 / 10%) 19%,
    rgb(255 255 255 / 10%) 97%
  );
  pointer-events: none;
}

/* 64 above the footnote on mobile (24 + 16 + 24); desktop
   20 + 16 + 20 = 56. */
.offer .footnote {
  max-inline-size: 40.625rem; /* 650px */
  margin-block-start: 4rem;
}

/* The divider strip under the footnote is 112 tall with the line centred:
   56 either side. Below the line the rule's own 8px UA margin plus
   .benefit-cards' 48 already make 56 — this column is flex, so the two do
   not collapse. Desktop's strip is 40 tall between two 104px section
   paddings: 124 either side. */
.offer .section__rule {
  margin-block-start: 3.5rem;
}

/* ---------------------------------------------------------------
 * Benefit cards
 * ------------------------------------------------------------- */

.benefit-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  inline-size: 100%;
  padding: 0;
  margin-block-start: var(--space-2xl);
  list-style: none;
}

.benefit-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-2xl);
  border-radius: var(--radius-sm);
  background-color: var(--color-card-surface);
  text-align: center;
}

.benefit-card__icon {
  flex-shrink: 0;
  inline-size: 4.5rem; /* 72px */
  block-size: 4.5rem;
}

/* Duplicated per card rather than reused from `.page-hero__rule` — that
   class is the hero's, and a third consumer here would tie two unrelated
   components together for one shared declaration. */
.benefit-card__rule {
  inline-size: 5rem; /* 80px */
  margin: 0;
  border: 0;
  border-block-start: var(--border-width) solid var(--color-rule);
}

.benefit-card__text {
  margin: 0;
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-body-lg); /* 20px on mobile */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
  letter-spacing: var(--tracking-display);
}

/* ---------------------------------------------------------------
 * Bullet list
 * ------------------------------------------------------------- */

.affordability-bullets-intro {
  inline-size: 100%;
  margin-block-start: var(--space-2xl);
}

.affordability-bullets__lede {
  margin: 0 0 var(--space-m);
  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 on mobile */
  letter-spacing: var(--tracking-display);
  text-align: center;
}

/*
 * Each item centres as ONE run — marker in the line box with its text, not
 * hanging outside it, at both breakpoints. An outside marker would sit at a
 * fixed left edge while the text centred away from it, which reads as two
 * columns.
 */
.affordability-bullets {
  margin: 0 auto;
  max-inline-size: 40.625rem;
  list-style: disc inside;
  text-align: center;
}

/* Separate the items; set flush they read as one block. */
.affordability-bullets > li + li {
  margin-block-start: var(--space-s); /* 8px */
}

@media (width >= 68rem) {
  /*
   * No cap on desktop, so each item sets on a single line — the longest run
   * measures 689px of text plus its marker against a 1344px content column.
   * Centring is unaffected by the wider box: `text-align` centres each line,
   * not the box.
   */
  .affordability-bullets {
    max-inline-size: none;
  }
}

@media (width >= 68rem) {
  /* 26px, one step off the 24px spacing token. */
  .benefit-cards {
    flex-direction: row;
    gap: 1.625rem;

    /* 116: with the rule's 8px UA margin, 124 below the divider. */
    margin-block-start: 7.25rem;
  }

  .benefit-card {
    flex: 1 0 0;
  }

  .benefit-card__text {
    font-size: var(--font-size-h4); /* 24px */
  }

  /* 20px heading-to-copay on desktop against mobile's 24 — and the same 20px
     gap around each spacer below: 56 to the button, 48 to the card, 56 to
     the footnote. */
  .offer .section__title {
    margin-block-end: 1.25rem;
  }

  .offer .button {
    margin-block-start: 3.5rem;
  }

  .offer__card {
    margin-block-start: 3rem;
  }

  .offer .footnote {
    margin-block-start: 3.5rem;
  }

  /* 104 from the section's top to the eyebrow, against the shared
     section's 72. */
  .section:has(> .offer) {
    padding-block-start: 6.5rem;
  }

  /* 124 above the divider; the 124 below it is .benefit-cards' margin plus
     the rule's own 8. */
  .offer .section__rule {
    margin-block-start: 7.75rem;
  }

  /* 28px/1.2 on desktop, same step as the H1 and .benefit-card__text: the
     base rule carries the 24px/1.4 mobile values, desktop steps up to
     --font-size-h3 and tightens the leading. */
  .affordability-bullets__lede {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h1);
  }

  /* Deliberate 1.65; mobile uses `.prose`'s own 1.45. */
  .affordability-bullets {
    line-height: 1.65;
  }
}