/*
 * Patient How to Use page. Loaded after components.css and patient-shell.css.
 *
 * This is the largest page in either site and the only one whose images carry
 * regulated instruction content, so the diagram's eleven callouts ship as real
 * text rather than baked into a raster.
 */

.page {
  /* Patient CTAs are navy — same page-scoped repoint as the sibling pages. */
  --color-cta: var(--color-isi-title-bar);

  /* Same pale blue wash the home teasers and savings band use. */
  --patient-wash: #bbd3eb;

  /*
   * The step card / diagram panel surface. One unit off --color-isi-surface
   * (#f6f7f8), which is close enough to look like a mistake and far enough to
   * be one if it were "corrected" — so it is stated here as its own literal
   * rather than borrowed from the ISI token.
   */
  --htu-card-surface: #f7f8f9;

  /* The diagram callout ink — the drawn body ink, not --color-text-body. */
  --htu-callout-ink: #2b2a29;

  /*
   * The wash must carry PAST `</main>` — the ISI card sits on blue, with blue
   * to either side and below it. The gradient lives on `.savings-band`, the
   * last section in `<main>`, while `.isi` is a sibling of the whole
   * `.isi-peek-region`, so painting it there leaves the ISI on `body`'s white.
   * The ground belongs to `.page`, the one box enclosing the region, the ISI
   * and the footer; `main` takes the white back so everything above the band is
   * unchanged. Full reasoning, including why `.isi-peek-region` is the WRONG
   * box to paint, is in patient-home.css.
   */
  background-color: var(--patient-wash);
}

/* White ground above the savings band; `.page` carries the wash below it.
   See patient-home.css. */
main {
  background-color: var(--color-white);
}

/*
 * Mobile gutter, 32px, matching every sibling patient page. The header is NOT
 * overridden: this page draws the shared partial's 159px 24/24/24, like Learn
 * About and unlike Home.
 */
@media (width < 48rem) {
  main {
    --container-margin: var(--space-xl); /* 32px */
  }
}

/* ===============================================================
 * Page hero and the jump links
 * ============================================================= */

/*
 * The band is the shared GREY .page-hero surface (#eef0f2) at BOTH widths, not
 * the white --plain modifier the FAQ-family pages use: the jump cards are white
 * and disappear on white. Dropping the modifier also drops its mobile title
 * pair, restated below.
 */
.htu-hero__inner {
  display: flex;
  flex-direction: column;

  /* 56px above the title; 48px of band below the photograph. The
     copy → cards → photo rhythm is 40 / 10 and lives on each item. */
  padding-block: 3.5rem 3rem;
  gap: 0;
}

@media (width < 68rem) {
  .htu-hero .page-hero__title {
    font-size: var(--font-size-h3); /* 28px */
    line-height: var(--line-height-snug); /* 1.4 */
  }
}

.htu-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
}

.htu-hero__copy .page-hero__rule {
  margin: 0;
}

.htu-hero__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);
}

.htu-hero__lede :where(p) {
  margin: 0;
}

/* `:where()` keeps these at (0,1,0) so the savings band's own paragraph rules
   further down are not a DESCENDING specificity step past them. */
.htu-hero__lede :where(p + p) {
  margin-block-start: 0.75rem; /* 12px, the drawn paragraph gap */
}

/*
 * Full-bleed below the jump cards on mobile, 10px under the last card — and
 * CAPPED at the drawn desktop width of 641px, so the two breakpoints are the
 * endpoints of one curve rather than two unrelated states. `100vw` alone kept
 * the photograph bleeding all the way to the 68rem breakpoint.
 *
 * The `max()` hands the leading margin over at exactly a 641px viewport: the
 * full-bleed negative margin below it, an ordinary centring offset above.
 * Continuous, because at 641 the container's own margin makes the two equal.
 */
.htu-hero__figure {
  order: 3;
  inline-size: min(100vw, 40.0625rem); /* 641px */
  margin-block-start: 0.625rem;
  margin-inline-start: max(
    calc(var(--container-margin) * -1),
    (100% - 40.0625rem) / 2
  );
}

/*
 * ASPECT-LOCKED to the raster, which is what both breakpoints already draw: the
 * file is 1282x680 and the desktop frame 641x340 is exactly half of it, while
 * the mobile 430x228 is the same 1.885 ratio. A FIXED height against a fluid
 * width therefore cropped for no reason, stretching the inhaler into a
 * letterbox strip at the widths in between. `cover` stays as a belt, but with
 * the ratio stated it has nothing left to trim.
 */
.htu-hero__figure img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1282 / 680;
  object-fit: cover;
}

/* 40px below the lede, where the mobile hero section ends and the cards start
   the next section. */
.jump-nav {
  order: 2;
  margin-block-start: 2.5rem;
}

.jump-nav__list {
  display: grid;
  gap: var(--space-m); /* 16px */
  padding: 0;
  list-style: none;
}

/*
 * WHITE cards on the hero's tinted band, not the step cards' #f7f8f9 — the two
 * card families on this page are deliberately different surfaces.
 */
.jump-card {
  display: flex;
  align-items: center;

  /* 24px at BOTH widths. At 16 the copy measures 302 and "How to Clean Your
     Xopenex HFA Inhaler" fits one line where it is drawn wrapped. */
  gap: var(--space-l);
  block-size: 100%;
  padding: var(--space-m); /* 16px mobile */
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  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);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--easing-standard);
}

/*
 * The design draws no hover state for these, but they are links and every other
 * link-shaped control on the site has one. A tint of the page's own card
 * surface is the reading that cannot be mistaken for a different control.
 */
.jump-card:hover {
  background-color: var(--htu-card-surface);
}

.jump-card__icon {
  flex: 0 0 auto;
  inline-size: 1rem; /* 16px mobile */
  block-size: auto;
  margin-inline-start: auto;
}

@media (width >= 68rem) {
  .htu-hero__inner {
    display: grid;

    /*
     * Copy 670 wide and the photograph 641 beside it: a 640px first track puts
     * the photograph on its drawn left edge, and the second track is FLUID so
     * the jump row beneath can span the whole 1344 container (the
     * photograph's 63px of slack is drawn that way).
     *
     * `minmax(0, …)`, not a fixed track: the breakpoint is 68rem (1088px), so
     * between there and ~1380 a fixed 640 plus the photograph pushes 1329px of
     * content through a 1088px viewport.
     */
    grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
    padding-block: 6.5rem 4rem; /* 104px above the copy, 64px below the row */

    /* 80px from the LEDE's last line to the jump row. The row is sized by the
       copy, not the taller photograph — see .htu-hero__figure. */
    gap: 5rem 0;
  }

  .htu-hero__copy {
    grid-column: 1;
    align-self: start;
    max-inline-size: 41.875rem; /* 670px */
  }

  /*
   * Beside the copy, and 23px ABOVE the title's top edge. It spans BOTH rows so
   * its 340px never sizes the copy row: with a single-row placement the row
   * grows to the photograph and the jump row lands well below where it belongs.
   * Its bottom 18px sit behind the white cards, exactly as drawn.
   */
  .htu-hero__figure {
    grid-column: 2;
    grid-row: 1 / 3;
    order: 0;
    place-self: start;
    inline-size: 40.0625rem; /* 641px */
    max-inline-size: 100%;
    margin-block-start: -1.4375rem;
    margin-inline-start: 0;
  }

  /* No `block-size` here: the aspect-ratio above resolves the 641px frame to
     the drawn 340 exactly, and letting it govern means a column narrower than
     641 at the low end of this range scales rather than crops. */
  .htu-hero__figure img {
    border-radius: var(--radius-sm);
  }

  .htu-hero__lede {
    max-inline-size: 37.6875rem; /* 603px */
    font-size: var(--font-size-body-lg); /* 20px */
    letter-spacing: var(--tracking-body-lg);
  }

  /* 1319 wide — five 251px cards and four 16px gaps — inside the 1344
     container, so the cards land on their drawn width. */
  .jump-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    order: 0;
    max-inline-size: 82.4375rem;
    margin-block-start: 0;
  }

  /* Five equal cards across, 16px apart. */
  .jump-nav__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .jump-card {
    padding: var(--space-m) var(--space-l); /* 16px 24px */
    font-size: var(--font-size-lead); /* 18px */
    letter-spacing: var(--tracking-body-lg);
  }

  .jump-card__icon {
    inline-size: 1.5rem; /* 24px */
  }
}

/* ===============================================================
 * Section shell — a headline column beside the steps on desktop,
 * stacked on mobile
 * ============================================================= */

.htu-section__inner {
  display: grid;
  gap: var(--space-l); /* 24px between the head and the steps on mobile */
}

.htu-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-m); /* 16px */
}

/*
 * PER-BREAKPOINT PAIR — 24px/1.1 mobile / 32px/1.1 desktop. 32px is NOT on this
 * site's type scale, which steps 28 -> 40, so it is a page value rather than a
 * token.
 */
.htu-section__title {
  margin: 0;
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-h4); /* 24px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight); /* 1.1 */
  letter-spacing: var(--tracking-display);
}

/* PER-BREAKPOINT PAIR — 16px mobile / 20px desktop. */
.htu-section__lede {
  margin: 0;
  color: var(--color-text-body);
  font-family: var(--font-heading);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: var(--tracking-isi-text);
}

.htu-section__lede :where(p) {
  margin: 0;
}

/* Clean's lede is two paragraphs, 12px apart. */
.htu-section__lede :where(p + p) {
  margin-block-start: 0.75rem;
}

/* The first section follows the jump band directly and carries its own 48px;
   the rest are spaced by the dividers. */
#parts .htu-section__inner {
  padding-block-start: var(--space-2xl); /* 48px */
}

@media (width >= 68rem) {
  .htu-section__inner {
    /*
     * The headline column is a fixed 336.5px and the steps start at 440.5 —
     * a 104px gutter.
     */
    grid-template-columns: 21.0313rem minmax(0, 1fr);
    column-gap: 6.5rem; /* 104px */
    padding-block: 4rem; /* 64px either side on every section */
  }

  #parts .htu-section__inner {
    padding-block-start: 4rem;
  }

  .htu-section__title {
    font-size: 2rem; /* 32px */
  }

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

/* ===============================================================
 * Numbered steps
 * ============================================================= */

.steps {
  display: grid;
  gap: var(--space-m); /* 16px */
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-m); /* 16px mobile */
  align-items: start;
  padding: var(--space-m); /* 16px mobile */
  border-radius: var(--radius-sm);
  background-color: var(--htu-card-surface);
}

/*
 * PER-BREAKPOINT PAIR, and it steps INDEPENDENTLY of the step copy: the number
 * is 14px mobile / 20px desktop where the copy is 14 / 18.
 */
.step__num {
  color: var(--color-text-body);
  font-family: var(--font-heading);
  font-size: var(--font-size-ui); /* 14px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
  font-variant-numeric: tabular-nums;
}

.step__text {
  margin: 0;
  color: var(--color-text-body);
  font-family: var(--font-heading);
  font-size: var(--font-size-ui); /* 14px mobile */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body); /* 1.45 */
  letter-spacing: 0.015em;
}

/* The part NAME is bold and the "Do not" semibold in the Parts list — both
   carry meaning (a term, and a prohibition), so they are real elements. */
.step__text b {
  font-weight: var(--font-weight-bold);
}

.step__text strong,
.htu-caution strong {
  font-weight: var(--font-weight-semibold);
}

/*
 * Prime's three steps put the photograph ABOVE the number and copy, so the card
 * becomes a single column with the image spanning it.
 */
.step--illustrated {
  grid-template-columns: auto minmax(0, 1fr);

  /* 16px from the photograph down to the number row, 24px from the number to
     its copy — wider than the plain cards' 16. */
  gap: var(--space-m) var(--space-l);

  /*
   * PACK THE ROWS TO THE TOP. Three-up, these cards stretch to a common height
   * while their copy runs to different lengths, and a grid's default
   * `align-content: normal` STRETCHES — so the leftover height is shared out
   * BETWEEN the photograph row and the copy row rather than left at the foot of
   * the card. Each card then pushes its own copy down by half its own slack, so
   * the more copy a card has the higher its text sits, against a design that
   * draws all three on one line.
   *
   * `align-items: start` (on `.step`) is not enough: that governs each item
   * INSIDE its row, not where the rows themselves sit.
   */
  align-content: start;
}

/* These three cards set their copy at 1.6, not the steps' 1.45, and without
   tracking, at both widths. */
.step--illustrated .step__text {
  line-height: var(--line-height-loose);
  letter-spacing: 0;
}

/*
 * CAPPED at the mobile drawn width of 334px. Nothing draws them larger —
 * desktop puts them at 225 in the three-up row — and the 640px they reached on
 * a tablet was our own scaling, which is what makes them look soft: the files
 * are 597-678px wide, so at 640 CSS px they are already at 1:1 and a DPR-2
 * screen is upscaling them twofold. Held at 334 the same files have roughly a
 * 2x reserve, which is what the screen actually asks for.
 *
 * This does NOT make them sharp on a 3x phone; that needs a re-export at
 * 1280-1920px. It removes the upscale we were adding ourselves.
 */
.step__figure {
  grid-column: 1 / -1;
  inline-size: 100%;
  max-inline-size: 20.875rem; /* 334px */
  block-size: auto;
  border-radius: var(--radius-sm);
}

/*
 * Use steps 3/4 and Clean steps 1/3 put a photograph beside the copy on
 * desktop and below it on mobile.
 */

/*
 * Below the desktop step this card stays the GRID `.step` already gives it —
 * numeral in column 1, copy in column 2, photograph spanning both underneath —
 * which is exactly the stacked arrangement. A wrapping flex row cannot hold it
 * once the photograph is capped at 334px: a max size clamps a flex item's
 * HYPOTHETICAL size, and the hypothetical size is what line breaking is decided
 * on, so the photograph starts sharing the copy's line and squeezes it. A grid
 * says the arrangement outright instead of inferring it from a basis, so a cap
 * cannot undo it.
 *
 * The flex row is still right on desktop, where the photograph sits BESIDE the
 * copy — see the 68rem block.
 */
.step--aside {
  gap: var(--space-m);
}

.step--aside .step__num {
  flex: 0 0 auto;
}

/*
 * NUMBER LEFT, COPY RIGHT — on one line at every width, which is what is drawn.
 * In a wrapping flex container the BASIS is what the wrap decision is made
 * against, BEFORE any shrinking, so a 15rem basis dropped the copy onto its own
 * row the moment the space fell a hair under 240px — which a 360px viewport
 * does, by less than a pixel.
 *
 * A zero basis takes the wrap trigger away entirely: the copy shares the
 * numeral's line and shrinks into whatever is left. `min-inline-size: 0` lets
 * it shrink past its longest word, without which the flex minimum would put the
 * wrap back. Desktop is unchanged — the copy already took the remaining space
 * there through `flex-grow`, not through its basis.
 */
.step--aside .step__text {
  flex: 1 1 0;
  min-inline-size: 0;
}

/* Capped at the same 334px, and for the same reason — see `.step__figure`.
   Desktop replaces this with the drawn 199px beside the copy. */
.step__aside {
  grid-column: 1 / -1;
  flex: 1 0 100%;
  inline-size: 100%;
  max-inline-size: 20.875rem; /* 334px */
  block-size: auto;
  border-radius: var(--radius-sm);
}

/*
 * Special Cases: a SemiBold question on the number row and a BULLETED answer
 * below it — the answers are drawn as lists, not paragraphs — indented 20px
 * past the question's edge. base.css strips the markers from every classed
 * list, so the disc is asked for here.
 */
.step--qa .step__answer {
  grid-column: 2;
  margin: 0;
  padding-inline-start: 1.25rem;
  color: var(--color-text-body);
  font-family: var(--font-heading);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: 0.015em;
  list-style: disc;
}

/* The closing "Repeat steps 1 through 7" bullet is SemiBold on desktop and
   regular on mobile; built to the desktop treatment. */
.step--qa .step__answer strong {
  font-weight: var(--font-weight-semibold);
}

.step--qa .step__text {
  font-weight: var(--font-weight-semibold);
}

/*
 * The priming caution: the warning-triangle icon beside a two-bullet list with
 * SemiBold lead-ins. 16px/1.5 at BOTH widths — it does not take the step copy's
 * 14/18 pair.
 */
.htu-caution {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s); /* 8px, clear of the 32px icon */
  margin-block: var(--space-l) 0;
  color: var(--color-text-body);
  font-family: var(--font-heading);
  font-size: var(--font-size-body); /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-caption); /* 1.5 */
  letter-spacing: var(--tracking-isi-text);
}

.htu-caution__icon {
  flex: 0 0 auto;
  inline-size: 2rem;
  block-size: 2rem;
}

.htu-caution__list {
  margin: 0;
  padding-inline-start: var(--space-l); /* 24px, the drawn list indent */
  list-style: disc;
}

@media (width >= 68rem) {
  .step {
    /* Number at x=30, copy at x=63, 32px above and below. */
    gap: var(--space-l); /* 24px */
    padding: var(--space-xl) 1.875rem; /* 32px 30px */
  }

  .step__num {
    font-size: var(--font-size-body-lg); /* 20px */
  }

  .step__text {
    font-size: var(--font-size-lead); /* 18px */
  }

  /* Desktop is the one arrangement that IS a row: the photograph sits beside
     the copy rather than under it. */
  .step--aside {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-l);
  }

  /* 199px beside the copy, not full width. */
  .step__aside {
    flex: 0 0 12.4375rem; /* 199px */
    inline-size: 12.4375rem;
  }

  /* 32px from the question row to the first bullet, with the 24px row gap. */
  .step--qa .step__answer {
    margin-block-start: var(--space-s);
    font-size: var(--font-size-lead);
  }

  /*
   * 40px below the cards, the icon centred on the two lines, 14px to the list.
   *
   * The extra 96px of space the design leaves under the caution is dropped
   * deliberately: it comes from the caution row being a copy of the row above
   * with its headline column left empty, and reproducing it made this the only
   * uneven section boundary on the page. Desktop only — the mobile design never
   * had the space.
   */
  .htu-caution {
    align-items: center;
    gap: 0.875rem;
    margin-block: 2.5rem 0;
  }

  /* Three cards across, 24px apart, each with its photograph 225x207 inset
     30/32 and 24px above the number row. */
  .steps--illustrated {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-l);
  }

  .step--illustrated {
    gap: var(--space-l);
  }

  /* PER-BREAKPOINT PAIR — 14px mobile / 16px desktop, where the plain step copy
     steps 14 / 18. */
  .step--illustrated .step__text {
    font-size: var(--font-size-body);
  }
}

/* ===============================================================
 * The annotated inhaler diagram
 *
 * Every callout is REAL TEXT over the photograph. Each panel is its own
 * container and the annotations are sized in CONTAINER units, so the whole set
 * scales with the panel exactly as the design scales it between its 446.67px
 * desktop panel and its 366px mobile one — 12px at 446.67 is 2.6866cqw.
 *
 * The font-size floor below is ours, not the design's: at the mobile panel
 * width the drawn labels compute to ~9.8px, which is below a readable size for
 * regulated instruction content.
 * ============================================================= */

.diagrams {
  display: grid;
  gap: var(--space-m);
  margin-block-start: var(--space-m);
}

/*
 * CAPPED at the drawn desktop panel width. The aspect and the callouts were
 * always right — the callouts are percentages inside an `inline-size`
 * container, so they track the panel — but nothing bounded the panel itself,
 * and single-column it reached 984px wide against a drawn 443.8.
 * `inline-size: 100%` alongside the cap so it still fills at the narrow width
 * rather than collapsing to content width under the auto margins.
 */
.diagram {
  container-type: inline-size;
  position: relative;
  inline-size: 100%;
  max-inline-size: 27.9166rem; /* 446.6656px, the drawn panel */
  aspect-ratio: 446.6656 / 374.5793;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--htu-card-surface);
}

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

/*
 * THE TOP-VIEW FRAME CROPS ITS IMAGE FILL, AND THE EXPORT IS THE UNCROPPED
 * SOURCE. Shown at 100% the photograph is ~13% smaller than the drawn one, and
 * because every callout is a percentage of the PANEL, a smaller photograph
 * means every leader line falls short of the part it names — most visibly on
 * "dose indicator display window" and "press here". The side-view panel is
 * unaffected: its inhaler and all four callouts already land where they should.
 *
 * These four numbers are MEASURED FROM THE SHIPPED RASTER, not the design's own
 * fill percentages — those describe the bitmap the design file holds, not the
 * asset we ship, and transferring them is the trap the savings card already
 * paid for. Derived by locating the inhaler as the largest connected region of
 * its own saturated blue in both renders, then solving for the transform that
 * maps ours onto the target: width 25.06%, height 30.91%, left 40.80%, top
 * 29.55% of the panel.
 *
 * Re-measure the blue box if inhaler-top-view.webp is ever re-exported; these
 * numbers describe the FILE, not the design, and a new export moves them.
 */
.diagram--top .diagram__photo {
  position: absolute;
  inset-block-start: 2.12%;
  inset-inline-start: -12.89%;
  inline-size: 113.32%;
  block-size: auto;
  max-inline-size: none;
}

/*
 * THE DOSE-INDICATOR POINTER, DRAWN RATHER THAN PHOTOGRAPHED. It is a separate
 * vector in the design, so the photograph's own export does not carry it —
 * `inhaler-top-view.webp` has nothing under the dose window at all. Without
 * this rule the "pointer" callout names a part which is not in the picture,
 * which on a page of regulated operating instructions is the one kind of gap
 * that matters.
 *
 * An 11 x 10px triangle, apex up, centred on x=238 with its base at y=146 in a
 * 447 x 375 panel, filled rgb(0, 48, 108) — which is already
 * --color-brand-primary, so the token is used rather than the literal.
 *
 * BOTH axes are cqw so the triangle keeps its shape: a percentage block-size
 * would resolve against the panel's height and skew it if that aspect ever
 * changes. Re-measure if the raster is re-exported with the pointer included,
 * and delete this rule if it ever is.
 */
.diagram--top::after {
  content: "";
  position: absolute;
  inset-block-start: 36.27%;
  inset-inline-start: 52.01%;
  inline-size: 2.46cqw;
  block-size: 2.24cqw;
  background-color: var(--color-brand-primary);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* "Side view" / "Top view" — 10.537px mono at the drawn panel width. */
.diagram__view {
  position: absolute;
  inset-block-start: 7.73%;
  inset-inline-start: 6.26%;
  color: var(--color-text-eyebrow);
  font-family: var(--font-mono);
  font-size: max(0.5625rem, 2.3591cqw);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
}

/*
 * The pill's HEIGHT is padding + line box, where the drawn pill is padding +
 * trimmed text — so reproducing its padding verbatim ships a taller pill, and
 * that is what left "dose indicator display window" hanging below where it
 * belongs.
 *
 * The leading and the block padding are solved together to land the SINGLE-line
 * pill on the drawn 26px; 1.1 is also the drawn internal leading (~13px at
 * 12px), so the two lines sit as they should.
 *
 * THE TWO-LINE PILL STILL LANDS AT ~39px AGAINST A DRAWN 34, and that gap
 * cannot be closed here: trimming the half-leading above the first line and
 * below the last needs `text-box-trim` — Chromium 133+ / Safari 18.2+ only, so
 * it would make the pill a different height per engine. Closing it by leading
 * alone needs ~8px per line, which collapses the two lines into each other.
 * Left as the honest residual rather than traded for either.
 */
.diagram__label {
  position: absolute;
  padding: 0.5149em 1.0253em 0.5663em;
  border: 1px solid #f5f5f5;
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
  color: var(--htu-callout-ink);
  font-family: var(--font-heading);

  /*
   * The FLOOR is what breaks this layout when it engages, so it is set low
   * enough never to engage at a supported width. Each label's width is a share
   * of the panel (`25.5cqw`) while the floor holds its text still, so the two
   * diverge and the copy is forced onto extra lines — the pills then grow into
   * each other and over the artwork.
   *
   * The ratio that decides the wrap is width/font = 9.49, and it holds as long
   * as the cqw term wins. 0.5rem keeps it winning down to a 298px panel; the
   * full-bleed rule below keeps the panel at least the viewport's width, so on
   * the narrowest supported phone (320) the panel is 320 and the label 8.6px.
   */
  font-size: max(0.5rem, 2.6866cqw);
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  white-space: nowrap;
}

/*
 * Leader lines. Every one is a ZERO-HEIGHT vector in the design — a straight
 * rule — so each is an empty box carrying a top border, rotated where the
 * design rotates it, rather than eleven more SVG files. The box is the drawn
 * outer frame and the rule is centred inside it.
 */
.diagram__line {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
}

.diagram__line::before {
  content: "";
  display: block;
  inline-size: var(--len);
  block-size: 0;
  border-block-start: 1px solid var(--htu-callout-ink);
  rotate: var(--rot, 0deg);
}

/*
 * Each leader finishes with a small filled dot where it meets the part.
 * `--dot` says which end that is: 0% for the leading edge, 100% for the
 * trailing one.
 */
.diagram__line::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--dot, 100%);
  inline-size: 0.9cqw;
  block-size: 0.9cqw;
  border-radius: 50%;
  background-color: var(--htu-callout-ink);

  /*
   * ...placed on the ROTATED rule's real endpoint, not on the box's horizontal
   * centreline. `--dot` alone puts it at 0% or 100% of the box width at half
   * its height, which is exactly where an UNROTATED leader ends — right for the
   * five leaders that carry no `--rot`, and quietly wrong for the four that
   * turn. The rule is rotated about the box's CENTRE, so both of its ends swing
   * off that centreline by half the length, leaving the dot detached from the
   * line it belongs to.
   *
   * Both terms fall to zero at 0deg, so the five straight leaders are
   * untouched and need none of the properties below.
   *
   * `--w` is the box's own inline-size restated in cqw. The panel IS the
   * container, so it is the same number — it has to be a cqw length rather
   * than the percentage already on the rule because the BLOCK term would
   * otherwise resolve against this box's height, which is zero.
   *
   * `--sign` is +1 where the dot is the leading end and -1 where it is the
   * trailing one; it flips both offsets together.
   */
  --half: calc(var(--w, 0cqw) / 2);

  translate: calc(
      -50% + var(--sign, 1) * var(--half) * (1 - cos(var(--rot, 0deg)))
    )
    calc(-50% - var(--sign, 1) * var(--half) * sin(var(--rot, 0deg)));
}

/* ---------------------------------------------------------------
 * Callout and leader-line positions.
 *
 * EVERY value below was MEASURED off a rendered export of the panel, not
 * derived from the design's node tree. The side view's coordinates happen to
 * agree with the tree; the top view's do NOT — its callouts sit inside a group
 * that is both translated and centre-anchored, and the arithmetic puts all four
 * on the wrong side of the panel. Re-measure from a render before changing any
 * number here.
 *
 * Percentages are of the 447x375 panel the export was taken at.
 * ------------------------------------------------------------- */

/* --- Side view --- */

.diagram__label--canister {
  inset-block-start: 20.53%;
  inset-inline-start: 31.54%;
}

.diagram__label--actuator {
  inset-block-start: 45.07%;
  inset-inline-start: 19.02%;
}

.diagram__label--cap {
  inset-block-start: 72.53%;
  inset-inline-start: 6.49%;
}

/*
 * Anchored by its TRAILING edge. Every other callout is positioned from the
 * leading edge as the design measures it, but this one sits closest to the
 * panel's right edge, and once the font-size floor stops it shrinking (below
 * ~360px) a leading-anchored label keeps sliding right and crops.
 */
.diagram__label--dose {
  inset-block-start: 14.67%;
  inset-inline-end: 9.17%;
}

.diagram__label--mouthpiece {
  inset-block-start: 74.67%;
  inset-inline-start: 56.6%;
}

.diagram__line--canister {
  inset-block-start: 23.95%;
  inset-inline-start: 46.46%;
  inline-size: 5.93%;

  --len: 100%;

  --dot: 100%;
}

.diagram__line--actuator {
  inset-block-start: 48.44%;
  inset-inline-start: 34.85%;
  inline-size: 8.17%;

  --len: 100%;

  --dot: 0%;
}

.diagram__line--cap {
  inset-block-start: 76.08%;
  inset-inline-start: 16.37%;
  inline-size: 6.18%;

  --len: 100%;

  --dot: 100%;
}

.diagram__line--dose {
  inset-block-start: 18.15%;
  inset-inline-start: 63.97%;
  inline-size: 3.36%;

  --len: 100%;

  --dot: 0%;
}

.diagram__line--mouthpiece {
  inset-block-start: 78.24%;
  inset-inline-start: 32.81%;
  inline-size: 23.68%;

  --len: 100%;

  --dot: 0%;
}

/* --- Top view --- */

/* Trailing-edge anchored, same reason as `--dose` above. */
.diagram__label--window {
  inset-block-start: 21.87%;
  inset-inline-end: 9.84%;
  inline-size: 25.5cqw; /* 114 / 447 */
  text-align: center;
  white-space: normal;
}

.diagram__label--pointer {
  inset-block-start: 35.2%;
  inset-inline-start: 18.12%;
}

/* Trailing-edge anchored, same reason as `--dose` above. */
.diagram__label--press {
  inset-block-start: 50.4%;
  inset-inline-end: 10.29%;
}

.diagram__label--rings {
  inset-block-start: 59.47%;
  inset-inline-start: 5.82%;
}

/*
 * The four top-view leaders are diagonals, so each is stated as the chord
 * between the pill's edge and the part it points at: the box is the chord's
 * bounding centre, the rule inside it is the chord's length, and the rotation
 * is its slope. Endpoints measured from the render, in panel pixels:
 *   window  (289,105) -> (248,128)   pointer (145,145) -> (238,143)
 *   press   (316,201) -> (247,178)   rings   (132,236) -> (216,186)
 */

/*
 * This leader ends at the dose window's RIGHT END, clear of the numerals, so
 * "80 200" stays readable. The dot belongs ON the lozenge's right tip, level
 * with the numerals — not beside them and not above them — and the tolerance
 * is a couple of pixels: further right the dot clears the white and reads as
 * sitting on the blue, further up it climbs off the arc. 259 centres a 4px dot
 * inside white that ends at 262.
 *
 * From the pill's own edge (286.94, 101.93) to that point, the box is the
 * line's midpoint and half its length: a 36.88px rule at -40.74deg centred on
 * (272.97, 113.97) puts its ends exactly on them, with the pill end unmoved.
 */
.diagram__line--window {
  inset-block-start: 30.63%;
  inset-inline-start: 57.36%;
  inline-size: 8.31%;

  --len: 100%;
  --rot: -40.74deg;

  --dot: 0%;

  /* the rotated rule's endpoint offset — see .diagram__line::after */
  --w: 8.31cqw;
  --sign: 1;
}

/*
 * Stops SHORT of the triangle it names, as drawn: the dot sits at (224, 143)
 * against a triangle whose left edge is x=233 — a 9px gap. An 80.03px rule at
 * -0.62deg centred on (183.99, 143.44) lands there with the pill end unmoved
 * at (143.97, 143.87). The rotation barely changes because this leader is all
 * but horizontal; the length is what moves the dot.
 */
.diagram__line--pointer {
  inset-block-start: 38.55%;
  inset-inline-start: 32.44%;
  inline-size: 18.04%;

  --len: 100%;
  --rot: -0.62deg;

  --dot: 100%;

  /* the rotated rule's endpoint offset — see .diagram__line::after */
  --w: 18.04cqw;
  --sign: -1;
}

.diagram__line--press {
  inset-block-start: 50.53%;
  inset-inline-start: 54.84%;
  inline-size: 16.26%;

  --len: 100%;
  --rot: 18.4deg;

  --dot: 0%;

  /* the rotated rule's endpoint offset — see .diagram__line::after */
  --w: 16.26cqw;
  --sign: 1;
}

.diagram__line--rings {
  inset-block-start: 56.27%;
  inset-inline-start: 27.99%;
  inline-size: 21.88%;

  --len: 100%;
  --rot: -30.8deg;

  --dot: 100%;

  /* the rotated rule's endpoint offset — see .diagram__line::after */
  --w: 21.88cqw;
  --sign: -1;
}

/* SIDE view first on mobile, TOP view first on desktop — the DOM keeps
   desktop's order. */
@media (width < 68rem) {
  .diagram--side {
    order: -1;
  }
}

/*
 * FULL-BLEED below the mobile design's own width. At and above 430 the panel is
 * the container's content column, which is exactly what is drawn (366 at 430),
 * so the design is untouched. Below it the gutters cost the panel 64px it
 * cannot spare: at a 360px viewport the panel falls to 296 and the callouts
 * stop fitting. Bleeding to the page edge hands those 64px back, so the panel
 * is never narrower than the screen and the labels keep their proportions all
 * the way down.
 */
@media (width < 26.875rem) {
  .diagrams {
    margin-inline: calc(var(--container-margin) * -1);
  }
}

@media (width >= 68rem) {
  .diagrams {
    margin-block-start: var(--space-l);
  }
}

/*
 * Two panels side by side — but only once there is room for a panel wide enough
 * to keep its callouts in proportion, which is NOT at the 68rem this used to
 * sit at.
 *
 * Each label's WIDTH is a share of the panel (`25.5cqw` on the window label)
 * while its FONT SIZE stops shrinking at the floor above — a floor kept
 * deliberately, because these callouts are regulated operating instructions
 * and the drawn ratio computes below a readable size on a phone. The two
 * therefore diverge once the panel falls under ~372px: the pill keeps
 * narrowing, the text does not, "dose indicator display window" is forced from
 * two lines to three, and the pill swallows the artwork.
 *
 * `.htu-section__body` runs about 536px narrower than the viewport here, so a
 * two-up panel only clears 372px from roughly 1297px of viewport. 82rem gives
 * that a margin: a 379.75px panel, a 10.21px label, and the same
 * width-to-font ratio the desktop design has (9.48 against 9.50), which is what
 * actually decides the wrap. Below it the single panel is capped at 446.67px
 * by `.diagram`, so the label lands on the drawn 12px.
 */
@media (width >= 82rem) {
  .diagrams {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.patient-divider {
  margin-block: 3.5rem; /* 56px, full-bleed on mobile */
}

@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 same component the home page carries. Its rules live in
 * patient-home.css, which this page does not load, so they are restated here.
 * They are NOT promoted to components.css: unlike the video player, this is
 * page rhythm rather than a mechanism, and per-page values stay in per-page
 * stylesheets. A third consumer is the point at which promoting it would pay
 * for the regression check across both audiences.
 * ============================================================= */

.savings-band {
  position: relative;
  overflow: hidden;

  /* TOP ONLY — the mobile design states a top padding and nothing for the
     bottom, and `padding-block` with one value sets both. The extra 48px showed
     as empty wash between the savings card and the ISI. Full measurement in
     patient-home.css. */
  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);
  text-align: center;
}

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

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

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

.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);
  letter-spacing: var(--tracking-display);
}

.savings-band__rule {
  inline-size: 5rem;
  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);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: var(--tracking-isi-text);
}

.savings-band__lede p {
  margin: 0;
}

.savings-band__lede p + p {
  margin-block-start: 0.75rem;
}

.savings-band__body .button {
  margin-block: 1.0625rem;
}

.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);
  letter-spacing: var(--tracking-isi-text);
}

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

@media (width < 68rem) {
  /* FULL-BLEED clip frame — the drawn frame is 770 wide, running off both
     edges. As the container's content column it clipped the card at the text
     edge instead, leaving a gap of exactly --container-margin at every stacked
     width. Rationale in full in patient-home.css. */
  .savings-band__media {
    position: relative;

    /*
     * 275px, not the drawn frame's 307: the artwork does not fill the frame,
     * and the box's last ~34px were empty wash sitting 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;
  }

  /* Capped at the drawn 433px and anchored to the trailing edge; both
     percentages are stated against the 430 viewport because the box above is
     now full-bleed. Uncapped these take the raster far past its drawn size
     inside a clip box that has not grown. Rationale in full in
     patient-home.css. */
  .savings-band__media img {
    position: absolute;
    inset-block-start: -4.1688rem;
    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) {
  /* 72px top, matching the HCP site's own spacing for this band rather than
     the drawn 177.5 — full reasoning in patient-home.css. Bottom keeps the
     drawn 227.5. */
  .savings-band {
    padding-block: 4.5rem 14.2188rem;
  }

  .savings-band__inner {
    grid-template-columns: minmax(0, 40.125rem) minmax(0, 1fr);
    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);
  }

  .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;
    font-size: var(--font-size-caption); /* 12px */
  }

  /* The WIDTH carries the relationship to the copy column, holding the drawn
     40px clearance at every width — pinned to the band's trailing edge at a
     fixed 852 the card overlaps the copy as the viewport narrows.
     42.625rem = 642 (body column) + 40 (the gap). Full derivation in
     patient-home.css. */

  /* Lifted by the raster's own blank top margin so the CARD, not the file,
     starts at the band's padding edge — otherwise the band's bottom clips the
     wrist. The right inset must stay 0: this raster's content runs to its own
     right edge, so any bleed cuts hand rather than margin. Full measurement
     and reasoning in patient-home.css. */
  .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%);
  }
}