/* ==========================================================================
   Peak Compounding Pharmacy - components

   Band order mirrors the old site's shape on purpose. The client asked to keep
   the layout and add the services, so the visitor should feel the pharmacy was
   renovated, not replaced: utility bar with NAP, hero, service cards, an
   explainer band, a features band, a contact strip, a dark footer. What changes
   is that the hero carries ONE message instead of four rotating slogans, the
   card grid runs six categories instead of four, and a compliance disclosure
   sits in the first viewport where the old site had nothing.
   ========================================================================== */

/* Shared sizing for Phosphor artwork and the restored open UI arrows. */
.site-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  vertical-align: middle;
}
.ui-icon { fill: none; }
.ph-icon {
  --icon-accent: currentColor;
  --icon-accent-opacity: 0.2;
  fill: currentColor;
}
.ph-icon [opacity] {
  fill: var(--icon-accent);
  opacity: var(--icon-accent-opacity);
}

/* --- Utility bar ---------------------------------------------------------
   The retail-pharmacy discovery job. A neighbour looking for a real pharmacy
   must never have to hunt past the telehealth funnel to find the phone number. */

.utilitybar {
  /* Keep the toolbar above the isolated interior-hero artwork. Editorial
     heroes use negative-z-index masked shapes; without an explicit stacking
     context Chrome could composite those shapes over the toolbar's contents
     on mobile while still reserving the toolbar's height. */
  position: relative;
  z-index: 101;
  background: var(--ink-deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.84);
}
.utilitybar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 42px;
  padding-block: var(--sp-2);
}
.utilitybar__group { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.utilitybar__item { display: inline-flex; align-items: center; gap: 0.45em; white-space: nowrap; }
.utilitybar__item svg { width: 15px; height: 15px; color: var(--brand-green); flex: none; }
.utilitybar a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  /* The phone number is the most-tapped thing in this bar on a phone. It was
     22px tall, under the 24px target minimum. */
  display: inline-flex;
  align-items: center;
  min-height: 26px;
}
.utilitybar a:hover { color: #fff; text-decoration: underline; }

/* Language toggle. Text, never flags: a flag is a country, not a language,
   and half this audience is not Spanish from Spain or Mexico specifically. */
/* No overflow:hidden. It clipped the focus ring off the pill, which removed
   the only keyboard indicator this control has. The children round their own
   outer corners instead, so the pill still reads as one object. */
.langtoggle { display: inline-flex; align-items: center; gap: 0; border: 1px solid rgba(255, 255, 255, 0.34); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.08); }
.langtoggle a:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.langtoggle a:last-child  { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.langtoggle a {
  padding: 0.2rem 0.7rem;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.82);
}
.langtoggle a[aria-current="true"] { background: #fff; color: var(--ink); }
.langtoggle a:not([aria-current="true"]):hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

@media (max-width: 900px) {
  .utilitybar__inner { justify-content: space-between; }
  .utilitybar__group:first-child { display: none; }
  .utilitybar__group:last-child {
    width: 100%;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .utilitybar__hide-sm { display: none; }
}

/* --- Header -------------------------------------------------------------- */

/* At the top of every route the navigation occupies the opening hero or content
   band, echoing the original Peak site (Ed, 2026-09-01). The live wordmark and
   controls reverse to white there, while the actual mark keeps its green, blue
   and grey brand detail. Once the utility bar has scrolled away, JS applies
   .is-stuck and the header becomes a fixed white bar again. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck { box-shadow: 0 2px 14px rgba(3, 59, 74, 0.10); }

/* 2026-10-15 (Ed, decisions 112 and 113): the header is IN THE PAGE FLOW and
   OPAQUE. It used to be absolute at rest with a translucent gradient, so every
   hero began behind it and showed through it, then main.js promoted it to a fixed
   white bar once the utility bar had scrolled away. Ed: "make sure the header
   doesn't have anything behind it". Now it is the ordinary sticky header on every
   page: at rest it carries the utility bar's deep teal with the reversed lockup,
   the hero begins BELOW it, and when it reaches the viewport top (the same
   scroll position as before) .is-stuck turns it white. Nothing is behind it. */
.site-header--overlay:not(.is-stuck) {
  background: var(--ink-deep);
  border-bottom-color: rgba(255, 255, 255, 0.16);
}
.site-header--overlay:not(.is-stuck) .logo,
.site-header--overlay:not(.is-stuck) .nav__link,
.site-header--overlay:not(.is-stuck) .nav__toggle-sub,
.site-header--overlay:not(.is-stuck) .search-toggle {
  color: #fff;
}
.site-header--overlay:not(.is-stuck) .nav__toggle {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.site-header--overlay:not(.is-stuck) .nav__link[aria-current="page"]::after {
  background: #fff;
}
.site-header--overlay:not(.is-stuck) .nav__toggle-sub:hover,
.site-header--overlay:not(.is-stuck) .nav__toggle-sub[aria-expanded="true"],
.site-header--overlay:not(.is-stuck) .search-toggle:hover,
.site-header--overlay:not(.is-stuck) .search-toggle[aria-expanded="true"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

/* 2026-10-15 (decision 113): the header no longer overlaps the first band, so these
   rules carry only the band's own top padding. They used to add var(--header-h) (and,
   on white bands, paint a dark header-height slice) because the header sat on top of
   the band. The `~ main` form stays (decision 96: nothing may depend on `header + main`
   adjacency; the search scrim sits between them). */
.site-header--overlay ~ main > .pagehero:first-child {
  padding-top: clamp(2.75rem, 2rem + 3vw, 4.5rem);
}
.site-header--overlay ~ main > .band:first-child {
  padding-top: var(--band-y);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

/* Client-supplied final vectors. The header swaps between the full-color
   lockup on white and the colored-symbol/white-wordmark version over heroes.
   Footer and other dark surfaces use the fully reversed lockup. */

.logo {
  --lockup-w: 180px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.logo__image {
  display: block;
  width: var(--lockup-w);
  height: auto;
  flex: none;
}
.logo__image--on-dark { display: none; }
.site-header--overlay:not(.is-stuck) .logo__image--color { display: none; }
.site-header--overlay:not(.is-stuck) .logo__image--on-dark { display: block; }
.logo:focus-visible { outline-offset: 6px; }
.nav { display: flex; align-items: center; gap: var(--sp-4); position: relative; }
.nav__list { display: flex; align-items: center; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }
.nav__link {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  text-decoration: none;
  padding: var(--sp-2) 0;
  position: relative;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--brand-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }
/* The current page is not a hover state and must not look like one. It is
   thicker, it is ink rather than green, and it does not animate in. */
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  height: 3px;
  background: var(--ink);
  transition: none;
}

/* A disclosure button with no open state leaves the visitor guessing whether
   the click registered. */
.nav__toggle-sub[aria-expanded="true"],
.search-toggle[aria-expanded="true"] { background: var(--tint-deep); color: var(--ink); }
.nav__toggle-sub[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__toggle-sub svg { transition: transform var(--dur) var(--ease); }

.nav__toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--ink);
}

/* Between the mobile-nav breakpoint and roughly a 15in laptop the desktop nav,
   six dropdowns, the search button and the CTA all have to share one row.
   Reclaim width from the gaps rather than from the tap target: 44px is the
   accessibility floor and is not negotiable. */
@media (min-width: 1360px) and (max-width: 1400px) {
  .nav { gap: var(--sp-3); }
  .nav__list { gap: var(--sp-2); }
  .search-toggle { margin-left: 0; }
  .header-cta { padding-inline: var(--sp-4); }
}

@media (max-width: 1359px) {
  .logo { --lockup-w: 158px; }
  .nav__toggle { display: inline-flex; }

  /* The mobile menu itself is a white panel, so its contents return to the
     normal dark palette even while the header row above remains over the hero. */
  .site-header--overlay:not(.is-stuck) .nav__list .nav__link,
  .site-header--overlay:not(.is-stuck) .nav__list .nav__toggle-sub,
  .site-header--overlay:not(.is-stuck) .nav__list .nav__toggle-sub:hover,
  .site-header--overlay:not(.is-stuck) .nav__list .nav__toggle-sub[aria-expanded="true"] {
    color: var(--ink);
  }
  .site-header--overlay:not(.is-stuck) .nav__list .nav__toggle-sub[aria-expanded="true"] {
    background: var(--tint-deep);
  }

  /* .nav is position:relative for the DESKTOP dropdowns. At this width every
     submenu is position:static, so the relative earns nothing and actively
     hurts: it would become the containing block for the panel below and size it
     to the toggle cluster instead of the header. */
  .nav { position: static; }

  .nav__list {
    /* Anchored to .site-header, which is position:sticky and therefore a
       containing block, so top:100% is the header's REAL bottom edge at any
       scroll offset.

       It must NOT be `fixed` with `top: var(--header-h)`. --header-h is the
       header's own height, but a fixed element's top resolves against the
       VIEWPORT, and the .utilitybar above the header is not sticky, so at
       scroll 0 it pushes the header down ~49px. The panel opened INSIDE the
       header: 29px of the 46px close button was covered, and taps on its lower
       half hit a submenu toggle instead. */
    position: absolute;
    inset: auto;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--header-h));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    padding: var(--sp-4) var(--gutter) var(--sp-7);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .nav__list[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }
  .nav__list li { border-bottom: 1px solid var(--line-soft); }
  .nav__link { display: block; padding: var(--sp-4) 0; font-size: var(--step-1); }
  .nav__link::after { display: none; }

  /* The header bar has no room for the CTA at this width, so it is hidden
     there and repeated inside the panel instead. It used to be hidden and
     nowhere else, which meant the site's single most important button did not
     exist on any phone or any iPad. */
  .header-cta { display: none; }
  .nav__cta { border-bottom: 0 !important; padding-top: var(--sp-5); }
  .nav__cta .btn { width: 100%; justify-content: center; }
}
/* Only ever a mobile/tablet affordance: on desktop the real header CTA is
   visible and a second copy in the list would be a duplicate. */
.nav__cta { display: none; }
@media (max-width: 1359px) { .nav__cta { display: block; } }

/* A list separator, not a list item anyone should hear. */
.submenu__rule {
  height: 1px;
  margin: var(--sp-2) 0;
  background: var(--line-soft);
  list-style: none;
}

/* --- Hero ----------------------------------------------------------------
   One message. The old site rotated four slogans, which is four competing
   value propositions and therefore none. */

.hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(3rem, 2rem + 4vw, 5rem); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
.hero h1 { margin-bottom: var(--sp-5); }
.hero__lede { font-size: var(--step-1); color: var(--ink-70); max-width: 52ch; margin-bottom: var(--sp-6); }

.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.hero__tertiary { margin-bottom: var(--sp-6); }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__ctas .btn { flex: 1 1 240px; }
}

/* --- The disclosure ------------------------------------------------------
   This is the most important rule in the stylesheet.

   BRAND_GUIDE section 6 requires full opacity and at least 4.5:1 contrast, in
   the hero viewport and on every service interior. A disclosure at 70% opacity
   is a disclosure that fails. So: no opacity below 1, no muted grey, no small
   print, and motion.css explicitly refuses to animate this element. It must
   render identically with JavaScript disabled. */

.disclosure {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--interactive-sf);
  border-left: 4px solid var(--interactive);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink);          /* 12.1:1. Not --ink-70, not grey, not faded. */
  opacity: 1;                 /* Never override this. */
  font-size: var(--step--1);
  line-height: 1.55;
  max-width: 60ch;
}
.disclosure p { margin: 0; max-width: none; }
.disclosure strong { font-weight: 600; }
.disclosure svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--interactive); }

.band--ink .disclosure {
  background: rgba(255,255,255,0.10);
  border-left-color: #8fd3d6;
  color: #fff;
}
.band--ink .disclosure svg { color: #8fd3d6; }

/* --- Hero media ----------------------------------------------------------
   Placeholder until the photography shoot. BRAND_GUIDE section 10 wants a real
   Dr. Shea portrait, real lab process, real storefront. Stock is not an option
   here: the whole positioning is that no competitor puts a named, photographed
   pharmacist-owner front and centre, and stock would forfeit exactly that. */

.media-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--tint-deep);
  aspect-ratio: 4 / 5;
}
.media-frame--wide { aspect-ratio: 3 / 2; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }

.media-frame--placeholder {
  display: grid;
  place-content: center;
  gap: var(--sp-3);
  text-align: center;
  padding: var(--sp-6);
  border: 2px dashed var(--line);
  background:
    repeating-linear-gradient(135deg,
      var(--tint) 0 12px,
      var(--tint-deep) 12px 24px);
}
.media-frame__label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--interactive);
}
.media-frame__note { font-size: var(--step--1); color: var(--ink-70); max-width: 30ch; margin: 0 auto; }
.media-frame__peak { width: 56px; height: 56px; margin: 0 auto; color: var(--brand-green); opacity: 0.8; }

/* --- Trust strip ---------------------------------------------------------
   Replaces generic badge clip-art. Every item here is a fact the business can
   actually defend, which is the whole point: "pharmacist-owned, Dr. Shea
   Vandross" is the one thing no competitor can copy. */

.trust {
  border-block: 1px solid var(--line);
  background: var(--tint);
}
.trust__list {
  display: grid;
  /* Five items as of 2026-08-28, her Updated Web Design document. Was four.
     auto-fit with a min() floor rather than repeat(5): five equal columns at
     1100px gives 220px tracks, and "Farmacia de formulas magistrales" does not
     fit one. The min() guard is the same trap documented in site/README.md -
     a bare minmax(Npx, 1fr) has a min-content of a whole track and forces
     horizontal scroll inside the grid. */
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 0;
  list-style: none;
  margin: 0; padding: 0;
}
.trust__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5);
  margin: 0;
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.4;
  border-left: 1px solid var(--line);
}
.trust__item:first-child { border-left: 0; }
/* The row sits inside the container, but every cell also carries its own inline
   padding, so the first icon started 24px inboard of the page's own left edge
   and the row read as misaligned against every heading below it. The outer
   cells give up their outer padding.

   ONLY in the five-across layout. Below 1200 the grid wraps, so "first child"
   is no longer the only item in column one and "last child" is not in the last
   column: dropping their padding pulled the first item 24px left of every item
   stacked under it. That is what it looked like on a phone. */
@media (min-width: 1200px) {
  .trust__item:first-child { padding-left: 0; }
  .trust__item:last-child  { padding-right: 0; }
}
.trust__item svg { width: 22px; height: 22px; flex: none; color: var(--brand-green); }

/* Five is an awkward count for auto-fit: between roughly 900 and 1200 it
   resolved to four columns and stranded the fifth alone on its own row. These
   are the only two splits that read as deliberate. The rules follow the split. */
@media (min-width: 1200px) {
  .trust__list { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .trust__list { grid-template-columns: repeat(3, 1fr); }
  .trust__item:nth-child(3n+1) { border-left: 0; }
  .trust__item:nth-child(n+4) { border-top: 1px solid var(--line); }
}

@media (max-width: 900px) {
  .trust__list { grid-template-columns: repeat(2, 1fr); }
  .trust__item:nth-child(odd) { border-left: 0; }
  .trust__item:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .trust__list { grid-template-columns: 1fr; }
  .trust__item { border-left: 0; }
  .trust__item + .trust__item { border-top: 1px solid var(--line); }
}

/* --- Service card grid ---------------------------------------------------
   Order is FIXED at every breakpoint: Peptides, Weight Management, Hormone
   Therapy, Sexual Health, Health & Wellness, General Health. Peptides first.

   This component is a cross-project contract. The identical catalogue, in the
   identical order with the identical labels, appears on the TNC clinic site so
   the funnel reads as a continuation rather than a new site. Changing a label
   here means changing it there in the same commit, or not at all.

   Labels are compliance-final. "Weight Management", never "Weight Loss".
   "Sexual Health", never "Better Sex", anywhere, including ads.

   No FEATURED pill. Card order does the featuring. */

.card-grid > * { min-width: 0; }
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 1000px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .card-grid { grid-template-columns: 1fr; } }

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--tint);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease-out);
}
.service-card:hover { border-color: var(--interactive); box-shadow: var(--shadow-lg); transform: translateY(-3px); }

/* Phosphor Duotone: clear teal silhouettes with a softer green secondary fill.
   Category and pathway icons share the same family and brand treatment. */
.service-card__motif {
  box-sizing: border-box;
  width: 68px;
  height: 68px;
  padding: 10px;
  color: var(--ink);
  --icon-accent: var(--brand-green);
  --icon-accent-opacity: 0.5;
  background: var(--green-soft);
  border: 2px solid var(--brand-green);
  border-radius: 18px;
  box-shadow: 0 8px 18px rgba(3, 59, 74, 0.16);
}

.service-card h3 { margin: 0; font-size: var(--step-2); }
.service-card p { color: var(--ink); font-size: var(--step--1); margin: 0; flex: 1; }

.service-card__priority {
  display: grid;
  gap: 0.4rem;
  padding: 0.8rem 0.9rem;
  color: var(--ink);
  background: #eef7ec;
  border: 1px solid #a7cea2;
  border-left: 4px solid var(--brand-green);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
}
.service-card__priority-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  justify-content: space-between;
}
.service-card__priority strong { font-size: var(--step-0); }
.service-card__status {
  display: inline-flex;
  padding: 0.25rem 0.55rem;
  color: #fff;
  background: var(--ink);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Whole-card click target without nesting interactive elements. */
.service-card__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.service-card__link { text-decoration: none; }
.service-card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

.card-grid__after { margin-top: var(--sp-6); }
.card-grid__after--center { max-width: none; text-align: center; }
.card-grid__after--center .link-arrow { max-width: 100%; }
/* Decision 92 (Shea p.4): "Make larger". */
.card-grid__after--center .link-arrow { font-size: var(--step-1); }
.card-grid__after--center .link-arrow svg { width: 26px; height: 26px; }

/* Reference-led category layout: generous pictographs, centered reading, and
   open columns. This modifier is shared by the EN/ES catalog partials only;
   image cards, pathway links, and other service components keep their style. */
.card-grid.catalog-grid {
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.card-grid.catalog-grid > article.service-card {
  align-items: center;
  gap: var(--sp-4);
  padding: clamp(1.75rem, 2.4vw, 2.5rem) clamp(1.25rem, 2.5vw, 3rem);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  transform: none;
}
.card-grid.catalog-grid > article.service-card:not(:nth-child(3n + 1)) {
  border-inline-start: 1px solid var(--line);
}
.card-grid.catalog-grid > article.service-card:nth-child(n + 4) {
  border-top: 1px solid var(--line);
}
.catalog-grid .service-card__motif {
  width: 112px;
  height: 112px;
  padding: 0;
  margin-bottom: var(--sp-2);
  color: var(--ink);
  --icon-accent: var(--brand-green);
  --icon-accent-opacity: 0.8;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.catalog-grid .service-card h3 {
  max-width: 100%;
  font-size: clamp(1.5rem, 1.1rem + 0.85vw, 2rem);
  line-height: var(--leading-snug);
}
.catalog-grid .service-card__link { color: var(--ink); }
.catalog-grid .service-card p {
  flex: 0 1 auto;
  max-width: 38ch;
  color: var(--ink-70);
  font-size: var(--step-0);
}
.catalog-grid .service-card__priority {
  max-width: 34ch;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-70);
}
.catalog-grid .service-card__priority-head { justify-content: center; }
.catalog-grid .service-card__priority strong { color: var(--ink); }
.catalog-grid .service-card__status { margin-left: 0; }
.catalog-grid .service-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-3);
  color: var(--interactive);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.catalog-grid .service-card__cta .site-icon {
  width: 20px;
  height: 20px;
  transition: transform var(--dur) var(--ease-out);
}
.catalog-grid .service-card:is(:hover, :focus-within) .service-card__link {
  color: var(--interactive);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.catalog-grid .service-card:is(:hover, :focus-within) .service-card__cta .site-icon {
  transform: translateX(4px);
}
@media (max-width: 1000px) {
  .card-grid.catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid.catalog-grid > article.service-card:nth-child(n) { border: 0; }
  .card-grid.catalog-grid > article.service-card:nth-child(2n) {
    border-inline-start: 1px solid var(--line);
  }
  .card-grid.catalog-grid > article.service-card:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 620px) {
  .card-grid.catalog-grid { grid-template-columns: minmax(0, 1fr); }
  .card-grid.catalog-grid > article.service-card:nth-child(n) {
    padding: var(--sp-7) var(--sp-4);
    border: 0;
  }
  .card-grid.catalog-grid > article.service-card + article.service-card {
    border-top: 1px solid var(--line);
  }
  .catalog-grid .service-card__motif { width: 96px; height: 96px; }
}

/* --- Three-step strip ----------------------------------------------------
   Step three stays conditional and the disclosure states that the treating
   provider decides whether a prescription is medically appropriate. */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  counter-reset: step;
  list-style: none;
  margin: 0; padding: 0;
}
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; gap: var(--sp-5); } }

.steps__item { position: relative; margin: 0; padding-top: var(--sp-6); }
.steps__item::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--interactive);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: lining-nums;
}
.steps__item { padding-top: 56px; }
.steps__item h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.steps__item p { font-size: var(--step--1); color: var(--ink-70); margin: 0; }
.band--ink .steps__item::before { background: #8fd3d6; color: var(--ink); }
.band--ink .steps__item p { color: rgba(255,255,255,0.85); }
.steps__disclosure {
  max-width: 78ch;
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  color: var(--ink-70);
  font-size: var(--step--1);
}
.band--ink .steps__disclosure {
  border-top-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.85);
}

/* Let the homepage introduction span the process, with a quiet centered note.
   Preserve the disclosure copy and the shared treatment on other pages. */
.home-telehealth .band-head > h2 { max-width: 36ch; }
.home-telehealth .steps__disclosure {
  max-width: none;
  margin: var(--sp-7) auto 0;
  padding: 0;
  border: 0;
  text-align: center;
}

/* Connector rule between steps, desktop only. */
@media (min-width: 821px) {
  .steps__item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20px; left: 52px; right: calc(-1 * var(--sp-6) + 8px);
    height: 1px;
    background: var(--line);
  }
  .band--ink .steps__item:not(:last-child)::after { background: rgba(255,255,255,0.25); }
}

/* --- Owner band ----------------------------------------------------------
   The single biggest differentiator available. Not one Tampa compounding
   competitor puts a named, photographed pharmacist-owner front and centre, and
   the DTC telehealth players are placeless and faceless by design. */

.split > * { min-width: 0; }
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.split--reverse > *:first-child { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse > *:first-child { order: 0; }
}

.owner__credential {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35rem 0.9rem;
  background: var(--green-soft);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--sp-4);
}
.owner__credential svg { width: 16px; height: 16px; color: var(--brand-green); }

.pullquote {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  border-left: 3px solid var(--brand-green);
  padding-left: var(--sp-5);
  margin: var(--sp-5) 0;
  max-width: 34ch;
}

/* --- Compounding explainer ----------------------------------------------- */

.tile-list {
  display: grid;
  /* min() is load-bearing. Plain minmax(190px, 1fr) with auto-fit resolves its
     min-content to a whole track, so on a 320px screen this grid demanded
     392px, and because .prose is a grid item with the default min-width:auto
     it could not shrink below that. Result was a horizontally scrolling page.
     Do not drop the min(). */
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: var(--sp-3);
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
}
/* Capped at three so a five-item list splits 3+2 rather than stranding one
   card alone beside three empty cells. */
@media (min-width: 900px) {
  .tile-list { grid-template-columns: repeat(3, 1fr); }
}
.tile-list li {
  margin: 0;
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 500;
}
.tile-list li span { display: block; color: var(--ink-70); font-weight: 400; margin-top: 2px; }

/* --- Specialty band ------------------------------------------------------
   Workers' comp, DOL, auto injury and retail are real revenue heritage. They
   move under Specialty rather than being deleted. They simply stop competing
   with compounding and peptides for homepage attention. */

.spec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 900px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .spec-grid { grid-template-columns: 1fr; } }

.spec-card {
  display: block;
  padding: var(--sp-5);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius);
  text-decoration: none;
  color: #fff;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.spec-card:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.4); color: #fff; }
.spec-card strong { display: block; font-family: var(--font-ui); font-size: var(--step-1); margin-bottom: var(--sp-2); }
.spec-card span { font-size: var(--step--1); color: rgba(255,255,255,0.82); }

/* --- Local band (NAP) ----------------------------------------------------
   This name, address and phone block has been consistent for roughly seven
   years. It is real local SEO equity. Reproduce it verbatim across the site and
   preserve it through the domain move. */

.nap dl { display: grid; gap: var(--sp-4); margin: 0; }
.nap dt {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--interactive);
  margin-bottom: var(--sp-1);
}
.nap dd { margin: 0; font-size: var(--step-0); }
.nap a { color: var(--ink); }

/* 34rem, not less: at 26 and 30rem the map's address bar below wraps to two
   lines. This is the tightest width that keeps the row readable and the map bar
   on one line. The sibling selector matches only the two homepages; .mapblock
   on the contact pages is correctly full width. */
.hours-table { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
.hours-table th { text-align: left; font-weight: 500; padding: var(--sp-2) 0; }
.hours-table td { text-align: right; padding: var(--sp-2) 0; }
.hours-table tr + tr th, .hours-table tr + tr td { border-top: 1px solid var(--line); }

/* --- Footer -------------------------------------------------------------- */

.site-footer { --footer-line: rgba(255,255,255,0.16); background: var(--ink-deep); color: rgba(255,255,255,0.82); padding-block: var(--sp-8) var(--sp-6); font-size: var(--step--1); }
.site-footer h4 { color: #fff; font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.site-footer a { color: rgba(255,255,255,0.86); font-weight: 400; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--sp-3); }

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--sp-7);
}
.footer__brand { border-right: 1px solid var(--footer-line); padding-right: var(--sp-6); }
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .footer__brand { border-right: 0; padding-right: 0; }
}
@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__brand { border-bottom: 1px solid var(--footer-line); padding-bottom: var(--sp-6); }
}

.footer__legal {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--footer-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  justify-content: space-between;
  align-items: center;
  color: rgba(255,255,255,0.68);
}
.footer__logo { --lockup-w: 190px; display: inline-flex; margin-bottom: var(--sp-5); }

/* --- Build-note ribbon ---------------------------------------------------
   Local comp only. Removed before anything is shown outside the build. */
.buildnote {
  position: fixed;
  right: 12px; bottom: 12px;
  z-index: 900;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  opacity: 0.75;
  pointer-events: none;
}

/* The desktop header uses the compact label because its arrow is a separate,
   equally sized tap target inside the same link. The longer instruction stays
   in the mobile menu, where there is a full row available for it. */
.header-cta {
  white-space: nowrap;
  font-size: 0.95rem;
  padding: 0;
}

/* Primary action: a single green pill. The existing class names keep authored
   page layouts compatible; no separate circular arrow accompanies the label. */
.cta-pair {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
}
.cta-pair:hover { color: var(--ink); text-decoration: none; }
.cta-pair__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.85rem 1.55rem;
  border-radius: var(--radius-pill);
  background: var(--brand-green);
  transition:
    background var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.cta-pair:hover .cta-pair__label { background: var(--green-dk); }
.cta-pair:active .cta-pair__label { transform: translateY(1px); }
.site-header--overlay:not(.is-stuck) .cta-pair:focus-visible {
  outline-color: #ffd9a8;
}

@media (min-width: 1360px) and (max-width: 1400px) {
  .header-cta .cta-pair__label { padding-inline: 1.1rem; }
}

@media (max-width: 420px) {
  .pagehero__ctas .cta-pair { width: 100%; }
  .pagehero__ctas .cta-pair__label { flex: 1 1 auto; }
}

/* This must come after .cta-pair's display declaration. Otherwise that later
   component rule re-opens the desktop CTA at the mobile breakpoint and pushes
   the menu toggle outside the viewport. */
@media (max-width: 1359px) {
  .cta-pair.header-cta { display: none; }
}

.scroll-anchor {
  display: block;
  height: 0;
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}

/* Footer column headings are signposts, not headlines: interface type, not the
   serif. Same for the small-caps eyebrow treatment they share. */
.site-footer h4 { font-family: var(--font-ui); }

/* --- Page hero (interior pages) ------------------------------------------
   Matches the old site's interior banner: full-bleed photograph, dark overlay,
   page title left, breadcrumb right. Shallower than the homepage hero, because
   an interior page earns its space with content rather than a second
   full-height statement.

   The image is a PLACEHOLDER and is the old site's own banner photo, used as a
   treated background under a heavy overlay, which is the one use BRAND_GUIDE
   section 10 permits for stock. Real photography replaces it before launch.

   Per-section images are set on the element with --hero-image so a page can
   override without a new class. */

.pagehero {
  position: relative;
  isolation: isolate;
  /* The utility bar and the header remain in normal flow (decision 113);
     everything below them belongs to one full-screen hero stage. The vh fallback
     covers older browsers, while svh avoids a jump when mobile browser chrome
     expands or collapses. Content can still make the hero taller on a genuinely
     short screen. */
  min-height: calc(100vh - var(--utilitybar-h, 3rem) - var(--header-h));
  min-height: calc(100svh - var(--utilitybar-h, 3rem) - var(--header-h));
  display: grid;
  align-content: center;
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  color: #fff;
  background-color: var(--ink);       /* the floor if the image never loads */
  /* The fallback is what 11 pages actually render, because they set no
     --hero-image: the five compounding category pages (peptides, hormone
     therapy, weight management, skin, sexual health), the three legal pages,
     the two thank-you pages and the telehealth handoff. It used to be
     hero-interior.jpg, a stock dispensing counter holding a prescription vial
     whose directions read "TAKE 2 CAPSULES BY MOUTH ... TWICE DAILY" in the
     source file - a legible prescription, which BRAND_GUIDE section 10 bans
     regardless of source, sitting under the flagship compounding pages.
     compounding-science.jpg is abstract: no people, no premises, no vial, so
     it claims nothing about this pharmacy. INTERIM. When the real lab and
     bench photographs arrive, give those five category pages their own
     --hero-image rather than leaving them on a shared default. */
  background-image: var(--hero-image, url('/assets/img/compounding-science.jpg'));
  background-size: cover;
  background-position: center 62%;
}
.pagehero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(3,59,74,0.78) 0%, rgba(1,43,54,0.72) 100%);
}
.pagehero h1 { color: #fff; max-width: 26ch; margin-bottom: 0; text-wrap: pretty; }
/* Hero headlines carry deliberate <br> breaks that only fit on desktop. Below 1100px the copy
   column is too narrow for a whole sentence per line, so the breaks are dropped and the
   headline balances itself instead of stranding one word (Ed 2026-09-29, About hero). */
@media (max-width: 1100px) {
  .pagehero h1 br { display: none; }
  /* A hidden <br> makes Chrome size the heading's min-content to a whole sentence, and the
     hero grid then grows its only track past the viewport. min-width: 0 on the grid item
     keeps the track at the viewport width. */
  .pagehero > .container { min-width: 0; }
  /* text-wrap: balance is NOT used here: inside the hero grid Chrome inflates the container's
     intrinsic width with it (a 320px viewport got a 498px container on Shop). pretty, set
     on the base rule, avoids the one-word orphan without touching intrinsic sizes. */
}
/* Pale enough to clear 4.5:1 against the WORST case for this band, which is a
   pure-white photograph behind a 0.78 overlay (composite L=0.116). The darker
   #8fd3d6 used on solid ink bands measures 3.75:1 there and fails. The photo is
   a placeholder and the real one is unseen, so the worst case is the one to
   design against. Measured: 4.9:1. */
.pagehero .eyebrow { color: #c3e9ea; }
.pagehero__lede { font-size: var(--step-1); color: rgba(255,255,255,0.95); max-width: 58ch; margin-top: var(--sp-4); }
.pagehero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }

/* On the photographic band the disclosure becomes a SOLID light card, so its
   contrast is guaranteed by its own background rather than by whatever happens
   to be in the photograph behind it. Same rule as the homepage hero. */
.pagehero .disclosure {
  margin-top: var(--sp-6);
  background: #fff;
  border-left-color: var(--interactive);
  color: var(--ink);
  box-shadow: var(--shadow);
}

/* Title and breadcrumb share a row on desktop, as they did on the old site.

   The title block is capped so the crumbs always have somewhere to sit. Without
   the cap a long h1 pushed them onto their own line, which landed them between
   the title and the lede: the one place a breadcrumb should never be. */
.pagehero__top {
  display: flex;
  /* Baseline alignment tied the crumb's vertical position to the first line of
     an h1 whose length changes per page, so the breadcrumb sat at a different
     height on every page in the site. The crumb belongs at the top of the row. */
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  flex-wrap: wrap;
}
/* No max-width here. It was 60ch, and ch resolves against THIS element's font
   size, which is body size - so the cap came out around 510px and squeezed a
   60px headline into three short lines with half the banner empty beside it.
   The h1 sets its own measure; this block just needs to grow and be allowed to
   shrink. */
.pagehero__top > div { flex: 1 1 auto; min-width: 0; }
.pagehero__top .crumbs { flex: 0 0 auto; margin-left: auto; }

/* Below the point where they genuinely cannot share a row, the breadcrumb goes
   ABOVE the title rather than between the title and the lede. */
@media (max-width: 860px) {
  .pagehero__top { flex-direction: column; align-items: flex-start; }
  .pagehero__top > div { order: 2; }
  .pagehero__top .crumbs { order: 1; margin-left: 0; }
}

/* Breadcrumbs. Three levels deep in places, and the prescriber and patient
   paths deliberately look alike, so orientation matters. */
.crumbs { font-size: var(--step--1); color: rgba(255,255,255,0.78); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4em; margin: 0; padding: 0; }
.crumbs li { margin: 0; display: flex; align-items: center; gap: 0.4em; }
.crumbs li + li::before { content: '/'; color: rgba(255,255,255,0.45); }
.crumbs a { font-weight: 400; color: rgba(255,255,255,0.85); }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: #fff; font-weight: 600; }

/* --- Prose ---------------------------------------------------------------
   Long-form educational copy. The Sage half of the brand lives in here. */

.prose > * + * { margin-top: var(--sp-5); }
.prose h2 { margin-top: var(--sp-8); }
.prose h3 { margin-top: var(--sp-6); font-size: var(--step-1); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
/* Plain bullet and numbered lists are running text and take the measure.
   Component lists that happen to be built on <ul> - link lists, tile grids,
   step lists - are not, and were being held to reading width by this rule. */
.prose ul:not([class]), .prose ol:not([class]) { max-width: var(--measure); }
.prose li { margin-bottom: var(--sp-3); }
.prose .disclosure { margin-block: var(--sp-6); }

.layout-aside > * { min-width: 0; }
.layout-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}
@media (max-width: 940px) { .layout-aside { grid-template-columns: 1fr; } }

.aside-card {
  padding: var(--sp-6);
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
}
@media (max-width: 940px) { .aside-card { position: static; } }
.aside-card h2, .aside-card h3 { font-size: var(--step-1); margin-bottom: var(--sp-3); }
.aside-card p { font-size: var(--step--1); color: var(--ink-70); }
.aside-card .btn { width: 100%; margin-top: var(--sp-4); }

/* --- Forms ---------------------------------------------------------------
   Contact-only by design. See partials/contact-form.html for why there is no
   free-text box on the prescription, transfer and refill flows. */

.reqform { max-width: 720px; }
.reqform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 620px) { .reqform__row { grid-template-columns: 1fr; } }
.reqform > * + * { margin-top: var(--sp-5); }
.reqform__alt { margin-top: var(--sp-4); font-size: var(--step--1); color: var(--ink-70); }

.field { display: flex; flex-direction: column; gap: var(--sp-2); border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--ink);
  padding: 0;
}
.field__optional { font-weight: 400; color: var(--ink-70); }
.field__hint { font-size: var(--step--1); color: var(--ink-70); margin: 0; }
.req { color: var(--interactive); }

/* .field sets margin:0 because it is a fieldset in places and fieldsets carry a
   default margin. That rule is later in the file than `.reqform > * + *` and
   has the same specificity, so it was winning and collapsing the gap between
   stacked fields: every label sat flush on the input above it. Restated here,
   after .field, so source order settles it the right way round. */
.reqform > * + * { margin-top: var(--sp-5); }

/* Validation. The browser's own messages are switched off by main.js once it
   takes over, so these are the only error a visitor sees. */
.field__error {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--danger);
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: var(--danger); }
.reqform__alert {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--danger);
  background: #fdf2ef;
  color: var(--ink);
  font-size: var(--step--1);
}

/* Honeypot. Moved off-screen rather than display:none, because some bots skip
   fields that are display:none and fill everything else. aria-hidden and
   tabindex -1 keep it away from anyone real. */
.hp {
  /* Pinned off-canvas, not merely clipped. Clipping alone leaves the input at
     its full intrinsic width in the layout, and at 320px that pushed past the
     right edge and made the page scroll sideways. The input is sized down too,
     because a clipped element still reports its real box. */
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
  overflow: hidden;
  white-space: nowrap;
}
.hp input { width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; }

.field input, .field select, .field textarea {
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  min-height: 48px;
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field select {
  appearance: none;
  padding-right: 2.6rem;
  /* Reuse the original header chevron instead of the native closed triangle. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M1 3.2 5 7l4-3.8' stroke='%23003B4A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-position: right 1rem center;
}
@media (forced-colors: active) {
  .field select { appearance: auto; background-image: none; }
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--interactive); }

.radio-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
/* The native radio is 13px; the LABEL is the real target, so it carries the
   44px minimum rather than the input. */
.radio { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 400; min-height: 44px; cursor: pointer; }
.radio input { width: 18px; height: 18px; min-height: 0; accent-color: var(--brand-green); }

/* Optional request-follow-up consent. The website records the choice; it does
   not send text messages. Keep the complete label an accessible touch target. */
.sms-consent { margin-block: var(--sp-5); }
.sms-consent__label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: 44px;
  padding-block: var(--sp-2);
  cursor: pointer;
  font-weight: 400;
  line-height: 1.5;
}
.sms-consent__label input {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0.2em 0 0;
  accent-color: var(--brand-green);
}
.sms-consent__label input:focus-visible { outline: 2px solid var(--interactive); outline-offset: 3px; }
.sms-consent .field__hint { margin: 0; max-width: none; }
/* Decision 87: the callback forms carry a titled text-message consent plus an
   optional email consent and a required data-processing consent. */
.sms-consent__title { margin: 0 0 var(--sp-2); max-width: none; font-family: var(--font-ui); font-weight: 600; font-size: var(--step--1); color: var(--ink); }
.consent-group { display: grid; gap: var(--sp-3); margin-block: var(--sp-5) 0; }
/* Decision 115: the provider request form's "What do you need?" choices reuse the
   consent checkbox rows inside a plain fieldset. */
.reqform__choices { min-width: 0; margin: var(--sp-5) 0; padding: 0; border: 0; }
.reqform__choices legend { margin-bottom: var(--sp-3); padding: 0; font-family: var(--font-ui); font-weight: 600; color: var(--ink); }
.reqform__choices .consent-group { margin-top: 0; }
.reqform__choices .field__hint { margin: var(--sp-2) 0 0; }
.consent-group .field { margin: 0; }
.consent-group .field__hint { margin: var(--sp-1) 0 0 0; max-width: none; }

/* The do-not-type-health-information notice. Same visual weight as a
   disclosure, because it does the same job: it is the thing standing between
   this form and a HIPAA problem. Motion.css excludes it by the same rule. */
.formnote {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--green-soft);
  border-left: 4px solid var(--brand-green);
  border-radius: 0 var(--radius) var(--radius) 0;
  opacity: 1;
}
.formnote p { margin: 0; font-size: var(--step--1); max-width: none; }
.formnote svg { width: 20px; height: 20px; flex: none; color: var(--ink); margin-top: 2px; }

/* --- FAQ ----------------------------------------------------------------- */
.faq { max-width: 780px; }
.faq details {
  border-bottom: 1px solid var(--line);
}
/* The padding lives on the SUMMARY, not on the details wrapper. With it on the
   wrapper, a row looked 62px tall but only the middle 29px was the summary, so
   a tap on the visible top or bottom of a question did nothing at all. Moving
   it here makes the whole visible row the control, and min-height holds the
   44px floor for a short question. */
.faq summary {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-4) 0;
  min-height: 44px;
  box-sizing: content-box;
  transition: color var(--dur-fast) var(--ease);
}
/* An accordion with cursor:pointer and no hover feedback reads as broken. */
.faq summary:hover { color: var(--interactive-dk); }
.faq details[open] > summary { color: var(--interactive-dk); }
.faq details > *:not(summary) { padding-bottom: var(--sp-4); }
/* Group headings sat flush on the divider rule of the question above them. */
.faq h2, .faq h3 { margin-top: var(--sp-7); }
.faq > :first-child { margin-top: 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--font-ui); color: var(--interactive); font-size: 1.4em; line-height: 1; }
.faq details[open] summary::after { content: '\2013'; }
.faq details > *:not(summary) { margin-top: var(--sp-3); }
.faq p { color: var(--ink-70); }

/* --- Handoff interstitial ------------------------------------------------
   The trust-critical screen. Co-brand row is the ONLY place the two logos
   share a lockup anywhere on this site. */
.handoff { max-width: 760px; margin-inline: auto; text-align: center; }
.handoff h1 { margin-bottom: var(--sp-5); }

/* A lede for a LIGHT band.
   /telehealth/start/, /thank-you/ and /es/gracias/ used .pagehero__lede here,
   which is painted white for the dark photographic banner. On these three white
   bands that rendered white on white: the TNC separation disclosure and the
   "a pharmacist will call you back" line were both invisible.

   It is a separate class rather than a scoping of .pagehero__lede on purpose.
   Writing `.pagehero .pagehero__lede { color: ... }` would raise that selector
   to 0,2,0 and beat the `max-width: 62ch` at the .prose block below, silently
   pulling every real banner lede back to 58ch on 49 pages. Same trap the README
   already records for `a[href^="tel:"]` outranking a class.

   Full --ink, not --ink-70: on /telehealth/start/ this paragraph IS the
   disclosure, and disclosures on this site are never de-emphasised. */
.handoff__lede {
  font-size: var(--step-1);
  color: var(--ink);
  max-width: 62ch;
  margin-inline: auto;
  margin-top: var(--sp-4);
}
.handoff .disclosure { text-align: left; margin-inline: auto; margin-block: var(--sp-6); }
.handoff .btn { margin-top: var(--sp-4); }
.cobrand {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-6);
  padding: var(--sp-6); margin-block: var(--sp-7);
  background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.cobrand__peak { --lockup-w: 180px; }
.cobrand__x { color: var(--brand-grey); font-size: var(--step-2); }
.cobrand__partner {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  color: var(--ink); text-align: center;
}
.cobrand__partner-logo { display: block; width: 210px; height: auto; }
.cobrand__caption {
  display: block; font-family: var(--font-ui); font-size: var(--step--1);
  font-weight: 400; line-height: 1.3; color: var(--ink-70);
}
@media (max-width: 560px) {
  .cobrand { flex-direction: column; gap: var(--sp-4); }
  .cobrand__peak { --lockup-w: 170px; }
  .cobrand__partner-logo { width: 190px; }
}

/* --- Misc ---------------------------------------------------------------- */
.linklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.linklist li { margin: 0; }
.linklist a {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; font-family: var(--font-ui); font-weight: 600;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.linklist a:hover { border-color: var(--interactive); background: var(--tint); }
.linklist a::after { content: '\2192'; color: var(--interactive); }

/* Pathway SVGs are embedded by the shared build helper, never fetched from a CDN.
   Only data-path-icon links receive one; primary CTA labels stay icon-free. */
.linklist--icons a { justify-content: flex-start; }
.linklist--icons .path-icon {
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  color: var(--ink);
  --icon-accent: var(--brand-green);
  --icon-accent-opacity: 0.5;
  transition: transform var(--dur-fast) var(--ease);
}
.linklist--icons a::after { margin-left: auto; }
.linklist--icons a:hover .path-icon { transform: translateY(-1px) scale(1.04); }

.callout {
  padding: var(--sp-5) var(--sp-6);
  background: var(--tint); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.callout h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.callout p:last-child { margin-bottom: 0; }

/* ==========================================================================
   OLD-SITE STRUCTURE, REBUILT
   The client asked to keep the current site's shape and add the new services.
   These three components are the parts of peakrxpharma.com worth carrying:
   the full-bleed photographic hero, the two-column features checklist, and the
   green contact strip above the footer.
   ========================================================================== */

/* --- Photographic hero ---------------------------------------------------
   Matches the old site: full-bleed image, dark overlay, centred content with a
   pill eyebrow and one large headline carrying one accent word.

   What is NOT carried over: the rotating slider. Four rotating slogans is four
   competing value propositions and therefore none. One message, no carousel,
   no auto-advancing anything. The old slogans are on the do-not-migrate list
   in BRAND_GUIDE section 13 in any case. */

.hero--photo {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4rem, 3rem + 8vw, 8rem);
  color: #fff;
  text-align: center;
  background-color: var(--ink);          /* the floor if the image never loads */
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center 28%;
}

/* The overlay is what makes white text on an arbitrary photograph safe. It is
   deliberately heavy: a hero whose legibility depends on which part of a photo
   sits behind the words is a hero that fails on some screens. */
.hero--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(3,59,74,0.86) 0%, rgba(1,43,54,0.80) 55%, rgba(1,43,54,0.90) 100%);
}

.hero--photo h1 { color: #fff; max-width: 26ch; margin-inline: auto; }
.hero--photo .hero__accent { color: var(--brand-green); }
.hero--photo .hero__lede {
  color: rgba(255,255,255,0.92);
  max-width: 60ch;
  margin-inline: auto;
  font-size: var(--step-1);
}
.hero--photo .hero__ctas { justify-content: center; }

/* Pill eyebrow, straight from the old site.

   Sized off the viewport rather than the type scale. It is a label, and on a
   390px screen the old size wrapped "COMPOUNDING PEPTIDES TELEHEALTH" onto two
   lines and turned a small signpost into a green slab above the headline.
   Tracking tightens with it, because letter-spacing that flatters a label at
   15px is what pushes it onto a second line at 11px. */
.hero__badge {
  display: inline-block;
  padding: 0.34em 0.95em;
  margin-bottom: var(--sp-5);
  background: var(--brand-green);
  color: var(--ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: clamp(0.71875rem, 0.62rem + 0.33vw, 0.8125rem);
  font-weight: 600;
  letter-spacing: clamp(0.045em, 0.02em + 0.1vw, 0.12em);
  text-transform: uppercase;
  line-height: 1.35;
}

/* On the photographic hero the disclosure becomes a SOLID light card rather
   than a tint, so its contrast is guaranteed by its own background and never
   depends on what is in the photograph behind it. */
.hero--photo .disclosure {
  background: #fff;
  border-left-color: var(--interactive);
  color: var(--ink);
  text-align: left;
  margin: var(--sp-7) auto 0;
  box-shadow: var(--shadow);
}

/* --- Service cards overlapping the hero ----------------------------------
   The old site floated its four cards over the bottom edge of the hero. Same
   move, six cards. */
.band--overlap { margin-top: clamp(-4rem, -3rem - 2vw, -2rem); position: relative; z-index: 2; }
.band--overlap .card-grid .service-card { background: #fff; box-shadow: var(--shadow); }

/* --- Features checklist --------------------------------------------------
   Rebuilt from the old site's "Peak Pharmacy Features" block. Every item is a
   real, defensible claim about the business, which is exactly why they are
   worth keeping. */
.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3) var(--sp-6);
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
}
@media (max-width: 720px) { .features { grid-template-columns: 1fr; } }
.features li {
  display: flex;
  gap: 0.7em;
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.45;
}
.features svg { width: 20px; height: 20px; flex: none; color: var(--brand-green); margin-top: 3px; }

/* --- Green contact strip -------------------------------------------------
   The old site ran this immediately above the footer. It is the single best
   thing on that page: three ways to reach a real pharmacy, impossible to miss.
   Lettered in ink, never white: white on this green measures 2.6:1. */
.contactstrip { background: var(--brand-green); color: var(--ink); padding-block: var(--sp-6); }
.contactstrip__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 820px) { .contactstrip__grid { grid-template-columns: 1fr; } }
.contactstrip__item { display: flex; align-items: center; gap: var(--sp-4); }
.contactstrip__icon {
  flex: none;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 1px solid rgba(3,59,74,0.35);
  border-radius: var(--radius);
}
.contactstrip__icon svg { width: 22px; height: 22px; color: var(--ink); }
.contactstrip strong { display: block; font-size: var(--step-1); font-family: var(--font-ui); font-weight: 600; }
.contactstrip span { font-size: var(--step--1); color: var(--ink); }
.contactstrip a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.contactstrip a:hover { text-decoration: underline; }

/* --- Full-width adjustments ----------------------------------------------
   The container is now viewport-width, so a few components need a ceiling of
   their own. Reading text is the main one: a paragraph does not become more
   readable because the monitor got wider. */

/* The reading measure belongs on the RUNNING TEXT, not on the box around it.
   Paragraphs already carry --measure from base.css and so do prose lists, so
   capping .prose itself was a SECOND and tighter cap, and it applied to things
   that are not running text at all: link lists, tile grids, cards. On a wide
   screen those came out at reading width with half the column empty beside
   them. Text keeps its measure; everything else takes the column. */
.prose { max-width: none; }
.prose > h2, .prose > h3, .prose > h4 { max-width: 24ch; }
.pagehero h1, .pagehero__lede { max-width: 30ch; }
.pagehero__lede { max-width: 62ch; }
.hero--photo h1 { max-width: 24ch; }
/* Same ch trap as the banner headline. 52ch here resolved against the DIV's
   font size, which is body size, so the cap landed at about 440px and every
   section heading on the home page wrapped into a narrow stack with most of
   the band empty next to it. Cap the heading on its own font instead, and let
   the paragraph keep the --measure it already has from base.css. */
.band-head > h2 { max-width: 24ch; }
.band-head > p  { max-width: 60ch; }

/* Three columns at wide viewports, held to the container rather than centred
   inside it. The old rule capped the grid at 1500px and centred it, so on a
   1800px container the cards began 150px inboard of the section heading above
   them and the two read as sitting on different axes. Everything in a band now
   starts on the same left edge. */
@media (min-width: 1500px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .layout-aside { grid-template-columns: minmax(0, 1fr) 380px; }
}

/* Specialty cards carry the same solid pictographs as the service catalogue,
   matching the icon language the old site already used. */
.spec-card__icon { width: 40px; height: 40px; margin-bottom: var(--sp-4); color: var(--brand-green); }

/* The catalogue motifs are now solid pictographs rather than the abstract peak
   line-marks, so the hover lift moves the whole icon. */
/* Base colour is set once, above, with the two-tone rule. This later block
   only owns the transition; it used to re-declare colour and silently beat it. */
.service-card__motif { transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease); }
.service-card:hover .service-card__motif { transform: translateY(-3px); }
.band--ink .spec-card__icon { color: #8fd3d6; }

/* ==========================================================================
   HERO SLIDER

   The old site ran a four-slide rotating hero and Ed asked for it back
   (2026-08-28). The website brief argued against it, and that argument was
   sound as stated: four rotating SLOGANS is four competing value propositions
   and therefore none.

   What is built here answers that objection rather than ignoring it. Each slide
   speaks to a DIFFERENT one of the three arrivals the brief identifies - the
   first-time patient, the prescriber, and the patient who already uses the
   pharmacy - instead of three restatements of one claim. A homepage that has to
   greet three audiences in five seconds is one of the few honest uses of a
   carousel.

   Worth knowing: sarasotarx.com, the reference the client picked herself, does
   NOT use a slider. Its hero is static.

   Accessibility, because carousels are usually where it goes wrong:
   - Auto-advance stops permanently on any interaction, and never starts under
     prefers-reduced-motion.
   - It pauses on hover and on keyboard focus.
   - Real buttons, arrow-key support, and a visible focus ring.
   - Slides are not hidden from assistive tech by opacity alone; inactive slides
     get inert-style treatment via aria-hidden and removal from the tab order.
   ========================================================================== */

.slider {
  position: relative;
  isolation: isolate;
  /* decision 113: the header sits above the slider now, so it comes off the first screen too. */
  min-height: calc(100vh - var(--utilitybar-h, 3rem) - var(--header-h));
  min-height: calc(100svh - var(--utilitybar-h, 3rem) - var(--header-h));
  background-color: var(--ink);
  overflow: hidden;
}
.slider__track { display: grid; min-height: inherit; }
.slider__slide {
  grid-area: 1 / 1;
  position: relative;
  isolation: isolate;
  /* Grid + align-content so a SHORT slide centres in the track instead of
     sitting at the top of it. Every slide shares one grid cell, so the track is
     as tall as the tallest slide; slides 2 and 3 were leaving up to 275px of
     bare photograph under their buttons. */
  display: grid;
  align-content: center;
  padding-block: clamp(2.75rem, 1.75rem + 6vw, 7rem);
  color: #fff;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms var(--ease-out), visibility 0s linear 600ms;
}
/* The photograph is attached only once a slide is active or has been primed by
   the slider JS. All three used to be painted on load, so a 390px phone
   downloaded 499KB of 1920px hero art to show one frame of it. The photograph
   lives on its own layer so motion can transform it without moving the copy,
   overlay, or controls. */
.slider__slide::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  transform: scale(1.05);
  transform-origin: center center;
}
.slider__slide.is-active,
.slider__slide.is-primed { background-image: none; }
.slider__slide.is-active::after,
.slider__slide.is-primed::after { background-image: var(--img); }
/* A phone cannot use 1920px of hero art. Same frames, 900px wide, ~200KB for
   the set instead of ~499KB. */
@media (max-width: 700px) {
  .slider__slide.is-active::after,
  .slider__slide.is-primed::after { background-image: var(--img-sm, var(--img)); }

  /* decision 113: the header no longer shares the hero, so the slide needs no
     reserved row above its badge. Tighter padding keeps the dots above the fold
     on a 360x640 phone now that the header takes 84px of that screen (decision
     32's requirement): the tallest slide's copy plus 24px above and 56px below
     fits the 508px the slider has left, and 56px still clears the 44px dot row
     that sits 8px off the bottom. */
  .slider__slide { padding-top: var(--sp-5); padding-bottom: 3.5rem; }
}

/* ==========================================================================
   COMPLETE SERVICE PAGES
   Key service routes need more than an article and a contact rail. These
   modules combine real service imagery with scannable workflows, preparation
   checklists, stakeholder guidance and a clear final action. They are square,
   full-canvas compositions that match the header width and the brand system.
   ========================================================================== */

.tpl-claims > .band.service-showcase,
.tpl-claims > .band.service-intro,
.tpl-claims > .band.service-details,
.tpl-claims > .band.service-editorial,
.tpl-claims > .band.service-paths {
  background: #fff;
}
.tpl-claims > .band.service-process,
.tpl-claims > .band.service-final {
  background: var(--ink-deep);
  color: #fff;
}
.tpl-claims > .band.service-showcase::before,
.tpl-claims > .band.service-intro::before,
.tpl-claims > .band.service-details::before,
.tpl-claims > .band.service-editorial::before,
.tpl-claims > .band.service-paths::before,
.tpl-claims > .band.service-process::before,
.tpl-claims > .band.service-final::before {
  display: none;
}

.service-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.55fr);
  gap: var(--sp-5) clamp(2rem, 6vw, 7rem);
  align-items: end;
  max-width: none;
  margin-bottom: clamp(2.5rem, 4vw, 4.5rem);
}
.service-heading .eyebrow,
.service-heading h2 { grid-column: 1; }
.service-heading .eyebrow { align-self: end; }
.service-heading h2 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2.2rem, 1.65rem + 2vw, 3.75rem);
}
.service-heading > p {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  max-width: 44ch;
  margin: 0;
  color: var(--ink-70);
  font-size: var(--step-0);
}

.service-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.service-card-grid > .service-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.1fr);
  min-height: 320px;
  overflow: hidden;
  background: #f1f6f5;
  border: 1px solid var(--line);
}
.service-card-grid .service-card__media {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background: var(--ink);
}
.service-card-grid .service-card__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 5px;
  background: var(--brand-green);
}
.service-card-grid .service-card__media img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.service-card-grid > .service-card:hover .service-card__media img { transform: scale(1.035); }
.service-card-grid .service-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.5rem, 2vw + 0.5rem, 2.75rem);
}
.service-card-grid > .service-card h3 {
  max-width: 15ch;
  margin: 0 0 var(--sp-4);
  font-size: clamp(1.55rem, 1.25rem + 1vw, 2.25rem);
}
.service-card-grid > .service-card p { margin: 0 0 var(--sp-5); color: var(--ink-70); }
.service-card-grid .service-card__link {
  display: inline-flex;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  color: var(--interactive);
  font-weight: 750;
  text-decoration: none;
}
.service-card-grid .service-card__link:hover { color: var(--interactive-dk); }

.service-intro__grid,
.service-editorial__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: center;
}
.service-intro__copy h2,
.service-editorial__copy > h2,
.service-details__main > h2,
.service-callout h2 {
  max-width: 17ch;
  margin-top: var(--sp-3);
  font-size: clamp(2.1rem, 1.55rem + 1.8vw, 3.4rem);
}
.service-intro__lead {
  max-width: 48ch;
  color: var(--ink);
  font-size: clamp(1.15rem, 1.04rem + 0.35vw, 1.38rem);
  line-height: 1.55;
}
.service-intro__copy > p:not(.service-intro__lead) { max-width: 58ch; }
.service-intro__media,
.service-editorial__media {
  position: relative;
  min-width: 0;
  margin: 0;
  background: var(--ink);
  box-shadow: 18px 18px 0 #dfeeed;
}
.service-intro__media img,
.service-editorial__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.service-intro__media figcaption,
.service-editorial__media figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--sp-4) var(--sp-5);
  background: rgba(1, 43, 54, 0.92);
  color: rgba(255,255,255,0.88);
  font-size: var(--step--1);
}
.service-editorial--reverse .service-editorial__media { grid-column: 2; grid-row: 1; }
.service-editorial--reverse .service-editorial__copy { grid-column: 1; grid-row: 1; }

.service-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3.75rem);
  padding: 0;
  background: transparent;
}
.service-facts > div {
  min-height: 0;
  padding: var(--sp-4) 0 0;
  background: transparent;
  border-top: 3px solid var(--brand-green);
}
.service-facts strong,
.service-facts span { display: block; }
.service-facts strong { margin-bottom: var(--sp-3); color: var(--ink); font-size: var(--step-0); }
.service-facts span { color: var(--ink-70); font-size: var(--step--1); line-height: 1.55; }

.service-process > .container {
  display: grid;
  grid-template-columns: minmax(280px, 0.6fr) minmax(0, 1.4fr);
  gap: clamp(2.5rem, 7vw, 8rem);
  align-items: start;
}
.service-process__intro {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
}
.service-process__intro .eyebrow { color: #a8e0e2; }
.service-process__intro h2 {
  max-width: 16ch;
  margin-top: var(--sp-3);
  color: #fff;
  font-size: clamp(2.15rem, 1.6rem + 1.9vw, 3.55rem);
}
.service-process__intro p { max-width: 42ch; color: rgba(255,255,255,0.76); }
.service-process__intro .btn { margin-top: var(--sp-5); border-color: rgba(255,255,255,0.72); color: #fff; }
.service-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.25rem, 4vw, 4.5rem) clamp(2rem, 4vw, 4rem);
  margin: 0;
  padding: 0;
  background: transparent;
  list-style: none;
  counter-reset: service-step;
}
.service-steps > li {
  counter-increment: service-step;
  position: relative;
  min-height: 200px;
  margin: 0;
  padding: 4.75rem 0 var(--sp-5);
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.3);
  color: #fff;
}
.service-steps > li::before {
  content: counter(service-step, decimal-leading-zero);
  position: absolute;
  top: var(--sp-4);
  left: 0;
  color: #8fd3d6;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.12em;
}
.service-steps strong,
.service-steps span { display: block; }
.service-steps strong { margin-bottom: var(--sp-3); color: #fff; font-size: var(--step-1); line-height: 1.2; }
.service-steps span { max-width: 42ch; color: rgba(255,255,255,0.76); line-height: 1.55; }
.service-steps--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* The DOL workflow uses the same editorial timeline language as the dedicated
   telehealth process page while retaining the darker claims-service palette. */
.service-process--timeline > .container {
  grid-template-columns: minmax(340px, 0.88fr) minmax(480px, 1.12fr);
  gap: clamp(4rem, 8vw, 9rem);
}
.service-process--timeline .service-process__intro {
  top: var(--header-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding-block: var(--sp-6);
}
.service-process--timeline .service-process__intro h2 {
  max-width: 12ch;
  margin: var(--sp-3) 0 var(--sp-5);
  font-size: clamp(2.75rem, 2rem + 2.6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.service-process--timeline .service-process__intro p {
  max-width: 52ch;
  font-size: var(--step-0);
}
.service-process--timeline .service-steps {
  position: relative;
  display: block;
  margin: 0;
  padding: clamp(2rem, 4vw, 4rem) 0 var(--sp-7) 5.5rem;
}
.service-process--timeline .service-steps::before {
  content: '';
  position: absolute;
  top: clamp(3rem, 5vw, 5rem);
  bottom: clamp(4rem, 6vw, 6rem);
  left: 1.5rem;
  width: 1px;
  background: rgba(255,255,255,0.3);
}
.service-process--timeline .service-steps > li {
  min-height: clamp(15rem, 24vw, 22rem);
  padding: 0 0 clamp(4rem, 7vw, 7rem);
  border: 0;
}
.service-process--timeline .service-steps > li:last-child {
  min-height: 0;
  padding-bottom: 0;
}
.service-process--timeline .service-steps > li::before {
  top: -0.5rem;
  left: -5.5rem;
  z-index: 1;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid var(--brand-green);
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--ink);
  letter-spacing: 0.04em;
}
.service-process--timeline .service-step__meta {
  max-width: none;
  margin-bottom: var(--sp-3);
  color: #8fd3d6;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}
.service-process--timeline .service-steps strong {
  max-width: 20ch;
  margin: 0 0 var(--sp-3);
  font-size: clamp(2rem, 1.55rem + 1.4vw, 3.2rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
}
.service-process--timeline .service-steps > li > span:last-child {
  max-width: 58ch;
  font-size: var(--step-0);
}

.service-details { background: #eaf3f2 !important; }
.service-details__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}
.service-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) clamp(2rem, 4vw, 4rem);
  margin: clamp(2rem, 4vw, 3.5rem) 0 0;
  padding: 0;
  background: transparent;
  list-style: none;
}
.service-checklist li {
  position: relative;
  min-height: 0;
  margin: 0;
  padding: var(--sp-5) 0 var(--sp-4) 3rem;
  border-top: 1px solid var(--line-strong);
  background: transparent;
}
.service-checklist li::before {
  content: '\2713';
  position: absolute;
  top: var(--sp-5);
  left: 0;
  display: grid;
  width: 1.9rem;
  height: 1.9rem;
  place-items: center;
  background: var(--brand-green);
  color: var(--ink-deep);
  font-weight: 900;
}
.service-checklist strong,
.service-checklist span { display: block; }
.service-checklist strong { margin-bottom: var(--sp-2); color: var(--ink); }
.service-checklist span { color: var(--ink-70); font-size: var(--step--1); }
.service-note {
  max-width: none;
  margin: var(--sp-5) 0 0;
  padding: var(--sp-5);
  border-left: 5px solid var(--brand-blue);
  background: #fff;
}
.service-callout {
  padding: clamp(2rem, 3vw, 3.5rem);
  background: var(--ink);
  color: #fff;
  border-top: 8px solid var(--brand-green);
}
.service-callout .eyebrow { color: #a8e0e2; }
.service-callout h2 { color: #fff; }
.service-callout p { color: rgba(255,255,255,0.8); }
.service-callout .btn { margin-top: var(--sp-4); border-color: rgba(255,255,255,0.72); color: #fff; }

.service-paths { background: #f4f8f7 !important; }
.service-path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.service-path-grid > article {
  padding: clamp(1.75rem, 2vw + 1rem, 3.25rem);
  background: #fff;
  border: 1px solid var(--line);
  border-top: 7px solid var(--brand-blue);
}
.service-path-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; }
.service-path-grid--four > article { border-top-color: var(--brand-green); }
.service-path-grid h3 { margin: 0 0 var(--sp-4); font-size: var(--step-2); }
.service-path-grid p { color: var(--ink-70); }
.service-path-grid ul { margin-bottom: 0; padding-left: 1.15rem; }
.service-path-grid li { margin-block: var(--sp-2); }

.service-editorial__copy > p { max-width: 58ch; }
.service-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem) clamp(2rem, 4vw, 4rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding: 0;
  background: transparent;
}
.service-info-grid article {
  min-height: 140px;
  padding: var(--sp-4) 0 var(--sp-5);
  background: transparent;
  border-top: 1px solid var(--line-strong);
}
.service-info-grid h3 { margin: 0 0 var(--sp-3); font-size: var(--step-1); }
.service-info-grid p { margin: 0; color: var(--ink-70); font-size: var(--step--1); }

.service-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: var(--line);
}
.service-action-grid a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  min-height: 180px;
  padding: var(--sp-5);
  background: #f4f8f7;
  color: var(--ink);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
/* The global click-to-call rule intentionally enlarges inline phone links.
   This phone action is already a full card, so keep it in the card grid flow. */
.service-action-grid a[href^="tel:"]:not(.btn):not(.cta-pair) {
  display: grid;
  align-items: initial;
  min-height: 180px;
}
.service-action-grid a::after {
  content: '\2192';
  position: absolute;
  right: var(--sp-5);
  bottom: var(--sp-5);
  color: var(--interactive);
  font-size: var(--step-1);
}
.service-action-grid a:hover { background: var(--ink); color: #fff; }
.service-action-grid a:hover::after { color: var(--brand-green); }
.service-action-grid strong { padding-right: 2rem; font-size: var(--step-1); }
.service-action-grid small { color: var(--ink-70); font-size: var(--step--1); }
.service-action-grid a:hover small { color: rgba(255,255,255,0.74); }

.service-final { padding-block: clamp(3.25rem, 6vw, 6rem); }
.service-final__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 7vw, 8rem);
  align-items: center;
}
.service-final .eyebrow { color: #a8e0e2; }
.service-final h2 {
  max-width: 22ch;
  margin: var(--sp-3) 0 0;
  color: #fff;
  font-size: clamp(2rem, 1.55rem + 1.5vw, 3.2rem);
}
.service-final p { max-width: 60ch; color: rgba(255,255,255,0.74); }
.service-final__actions {
  display: grid;
  min-width: min(100%, 330px);
  gap: var(--sp-3);
}
.service-final__actions .cta-pair,
.service-final__actions .btn { width: 100%; }
.service-final__actions .cta-pair__label { flex: 1 1 auto; }
.service-final__actions .btn { border-color: rgba(255,255,255,0.76); color: #fff; }

@media (max-width: 1180px) {
  .service-card-grid > .service-card { grid-template-columns: 1fr; }
  .service-card-grid .service-card__media,
  .service-card-grid .service-card__media img { min-height: 250px; }
  .service-path-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  .service-heading,
  .service-intro__grid,
  .service-editorial__grid,
  .service-details__grid,
  .service-process > .container,
  .service-final__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .service-heading > p {
    grid-column: 1;
    grid-row: auto;
    max-width: 58ch;
  }
  .service-intro__media { grid-row: 1; }
  .service-editorial--reverse .service-editorial__media,
  .service-editorial--reverse .service-editorial__copy { grid-column: 1; grid-row: auto; }
  .service-process__intro { position: static; }
  .service-process--timeline > .container {
    gap: clamp(4rem, 10vw, 7rem);
  }
  .service-process--timeline .service-process__intro {
    position: static;
    display: block;
    min-height: 0;
    padding-block: 0;
  }
  .service-process--timeline .service-process__intro h2 { max-width: 14ch; }
  .service-process--timeline .service-steps {
    max-width: 760px;
    padding-top: 0;
  }
  .service-process--timeline .service-steps::before { top: 1rem; }
  .service-process--timeline .service-steps > li {
    min-height: 0;
    padding-bottom: clamp(4rem, 10vw, 6rem);
  }
  .service-process--timeline .service-steps > li:last-child { padding-bottom: 0; }
  .service-final__actions { min-width: 0; width: min(100%, 420px); }
}

@media (max-width: 700px) {
  .service-card-grid,
  .service-steps,
  .service-steps--three,
  .service-facts,
  .service-checklist,
  .service-path-grid,
  .service-path-grid--four,
  .service-info-grid,
  .service-action-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .service-heading { margin-bottom: var(--sp-6); }
  .service-card-grid > .service-card { min-height: 0; }
  .service-card-grid .service-card__media,
  .service-card-grid .service-card__media img { min-height: 220px; }
  .service-card-grid .service-card__body { min-height: 265px; }
  .service-intro__media,
  .service-editorial__media { box-shadow: 10px 10px 0 #dfeeed; }
  .service-intro__media figcaption,
  .service-editorial__media figcaption { position: static; }
  .service-facts > div,
  .service-checklist li,
  .service-info-grid article,
  .service-action-grid a { min-height: 0; }
  .service-action-grid a[href^="tel:"]:not(.btn):not(.cta-pair) { min-height: 0; }
  .service-steps { gap: var(--sp-5); }
  .service-steps > li { min-height: 0; padding-bottom: var(--sp-4); }
  .service-process--timeline .service-process__intro h2 {
    font-size: clamp(2.55rem, 12vw, 3.75rem);
  }
  .service-process--timeline .service-steps { padding-left: 4.25rem; }
  .service-process--timeline .service-steps::before { left: 1.25rem; }
  .service-process--timeline .service-steps > li {
    padding-bottom: clamp(4rem, 14vw, 5rem);
  }
  .service-process--timeline .service-steps > li:last-child { padding-bottom: 0; }
  .service-process--timeline .service-steps > li::before {
    left: -4.25rem;
    width: 2.5rem;
    height: 2.5rem;
  }
  .service-process--timeline .service-steps strong {
    font-size: clamp(1.85rem, 8vw, 2.4rem);
  }
}

/* Service-specific visual close for the main clinical and audience gateways. */
#main > .body-spotlight {
  background: var(--ink);
}
#main > .body-spotlight::before { display: none; }
.body-spotlight__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: clamp(2.5rem, 6vw, 7.5rem);
  align-items: center;
}
.body-spotlight__media {
  min-width: 0;
  min-height: 560px;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}
.body-spotlight__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.body-spotlight:hover .body-spotlight__media img { transform: scale(1.025); }
.body-spotlight__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  padding: clamp(1rem, 2vw, 2rem) 0;
  background: transparent;
  color: #fff;
}
.body-spotlight__copy .eyebrow { color: #a8e0e2; }
.body-spotlight__copy h2 {
  max-width: 17ch;
  margin: var(--sp-3) 0 var(--sp-5);
  color: #fff;
  font-size: clamp(2.1rem, 1.55rem + 1.8vw, 3.5rem);
}
.body-spotlight__copy > p {
  max-width: 52ch;
  color: rgba(255,255,255,0.78);
  font-size: var(--step-0);
}
.body-spotlight__points {
  display: grid;
  gap: 0;
  width: 100%;
  margin: var(--sp-5) 0;
  padding: 0;
  list-style: none;
}
.body-spotlight__points li {
  position: relative;
  margin: 0;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) 2.25rem;
  border-top: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.9);
}
.body-spotlight__points li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--brand-green);
  font-weight: 900;
}
.body-spotlight__copy .btn {
  margin-top: var(--sp-2);
  border-color: rgba(255,255,255,0.76);
  color: #fff;
}
.body-spotlight--reverse .body-spotlight__media { grid-column: 2; grid-row: 1; }
.body-spotlight--reverse .body-spotlight__copy { grid-column: 1; grid-row: 1; }

@media (max-width: 900px) {
  .body-spotlight__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .body-spotlight__media,
  .body-spotlight--reverse .body-spotlight__media {
    grid-column: 1;
    grid-row: 1;
    min-height: clamp(260px, 62vw, 440px);
  }
  .body-spotlight__media img { min-height: clamp(260px, 62vw, 440px); }
  .body-spotlight__copy,
  .body-spotlight--reverse .body-spotlight__copy {
    grid-column: 1;
    grid-row: 2;
  }
}

@media (max-width: 700px) {
  #main > .body-spotlight { padding-block: 0; }
  #main > .body-spotlight > .container { width: 100%; }
  .body-spotlight__copy { padding: 2.25rem var(--gutter) 2.75rem; }
}

/* ==========================================================================
   INTERIOR BODY SYSTEMS

   The hero library already varies by page importance. These systems give the
   content below each hero the same level of intent. They are grouped by what a
   visitor is trying to do, rather than forcing every route into one article
   beside one rounded card. The homepages do not receive any of these classes.
   ========================================================================== */

#main[class*="tpl-"] > .band {
  position: relative;
  overflow: clip;
}
#main[class*="tpl-"] > .band > .container {
  position: relative;
  z-index: 1;
}
#main[class*="tpl-"] .prose > h2 {
  scroll-margin-top: calc(var(--header-h) + var(--sp-5));
}

/* Shared dark action surfaces. */
.tpl-story .aside-card,
.tpl-clinical .aside-card,
.tpl-patient .aside-card,
.tpl-knowledge .aside-card,
.tpl-contact .aside-card,
.tpl-claims .aside-card,
.tpl-shop .aside-card {
  background: var(--ink);
  border: 0;
  border-radius: 0;
  color: #fff;
  box-shadow: none;
}
.tpl-story .aside-card h2,
.tpl-clinical .aside-card h2,
.tpl-patient .aside-card h2,
.tpl-knowledge .aside-card h2,
.tpl-contact .aside-card h2,
.tpl-claims .aside-card h2,
.tpl-shop .aside-card h2,
.tpl-story .aside-card h3,
.tpl-clinical .aside-card h3,
.tpl-patient .aside-card h3,
.tpl-knowledge .aside-card h3,
.tpl-contact .aside-card h3,
.tpl-claims .aside-card h3,
.tpl-shop .aside-card h3 {
  color: #fff;
}
.tpl-story .aside-card p,
.tpl-clinical .aside-card p,
.tpl-patient .aside-card p,
.tpl-knowledge .aside-card p,
.tpl-contact .aside-card p,
.tpl-claims .aside-card p,
.tpl-shop .aside-card p {
  color: rgba(255,255,255,0.84);
}
.tpl-story .aside-card a:not(.btn),
.tpl-clinical .aside-card a:not(.btn),
.tpl-patient .aside-card a:not(.btn),
.tpl-knowledge .aside-card a:not(.btn),
.tpl-contact .aside-card a:not(.btn),
.tpl-claims .aside-card a:not(.btn),
.tpl-shop .aside-card a:not(.btn) {
  color: #a8e0e2;
}
.tpl-story .aside-card .btn--secondary,
.tpl-clinical .aside-card .btn--secondary,
.tpl-patient .aside-card .btn--secondary,
.tpl-knowledge .aside-card .btn--secondary,
.tpl-contact .aside-card .btn--secondary,
.tpl-claims .aside-card .btn--secondary,
.tpl-shop .aside-card .btn--secondary {
  border-color: rgba(255,255,255,0.72);
  color: #fff;
}
.tpl-story .aside-card .btn--secondary:hover,
.tpl-clinical .aside-card .btn--secondary:hover,
.tpl-patient .aside-card .btn--secondary:hover,
.tpl-knowledge .aside-card .btn--secondary:hover,
.tpl-contact .aside-card .btn--secondary:hover,
.tpl-claims .aside-card .btn--secondary:hover,
.tpl-shop .aside-card .btn--secondary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

/* About: an editorial history followed by a dark photographic close. */
.tpl-story > .band:not(.band--tint) {
  background: #fff;
}
.tpl-story .layout-aside {
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.55fr);
}
.tpl-story .prose > h2 {
  max-width: 28ch;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  font-size: clamp(1.7rem, 1.3rem + 1vw, 2.55rem);
}
.tpl-story .prose > h2:first-child {
  padding-top: 0;
  border-top: 0;
}
.tpl-story .aside-card {
  border-top: 8px solid var(--brand-green);
}
.tpl-story > .band--tint {
  background: var(--ink);
  color: #fff;
}
.tpl-story > .band--tint h2 { color: #fff; }
.tpl-story > .band--tint p { color: rgba(255,255,255,0.84); }
.tpl-story > .band--tint .eyebrow { color: #8fd3d6; }
.tpl-story > .band--tint .linklist a {
  border-color: rgba(255,255,255,0.24);
  color: #fff;
}
.tpl-story > .band--tint .linklist a:hover {
  background: rgba(255,255,255,0.08);
  border-color: #8fd3d6;
}
.tpl-story > .band--tint .media-frame {
  border-radius: 0;
  box-shadow: 18px 18px 0 var(--brand-green);
}

/* Compounding and clinical categories: an open reading surface with a compact
   action rail on the left and clearly separated clinical chapters on the right. */
.tpl-clinical > .band:not(.band--tint) {
  background: var(--tint);
}
.tpl-clinical .layout-aside {
  grid-template-columns: minmax(260px, 0.52fr) minmax(0, 1.48fr);
  gap: clamp(2rem, 2vw + 1rem, 4rem);
}
.tpl-clinical .layout-aside > .prose {
  grid-column: 2;
  grid-row: 1;
  padding: 0;
  background: transparent;
  border-left: 0;
  box-shadow: none;
}
.tpl-clinical .layout-aside > .aside-card {
  grid-column: 1;
  grid-row: 1;
}
.tpl-clinical .aside-card {
  border-top: 8px solid var(--brand-green);
}
.tpl-clinical .prose > h2 {
  max-width: 29ch;
  padding-top: var(--sp-7);
  border-top: 1px solid var(--line);
}
.tpl-clinical .prose > h2:first-child {
  padding-top: 0;
  border-top: 0;
}
.tpl-clinical .prose > ul:not([class]),
.tpl-clinical .prose > ol:not([class]) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) clamp(2rem, 4vw, 4.5rem);
  max-width: none;
  padding: 0;
  background: transparent;
  list-style: none;
}
.tpl-clinical .prose > ul:not([class]) > li,
.tpl-clinical .prose > ol:not([class]) > li {
  position: relative;
  margin: 0;
  padding: var(--sp-4) 0 var(--sp-3) 1.5rem;
  border-top: 1px solid var(--line);
  background: transparent;
}
.tpl-clinical .prose > ul:not([class]) > li::before,
.tpl-clinical .prose > ol:not([class]) > li::before {
  content: '';
  position: absolute;
  top: calc(var(--sp-4) + 0.45em);
  left: 0;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--brand-green);
}
.tpl-clinical > .band--tint {
  background: var(--tint-deep);
  border-top: 1px solid var(--line);
}
.tpl-clinical > .band--tint .service-card,
.tpl-clinical > .band--tint .tile-list li {
  border-radius: 0;
  border-top: 5px solid var(--brand-blue);
}

/* Telehealth: a connected journey. The first body band is a pale clinical
   field, the service selection remains bright, and the closing explanation is
   a dark handoff band. */
.tpl-journey > .band:nth-of-type(2) {
  background: var(--tint-deep);
}
.tpl-journey > .band:nth-of-type(3) {
  background: #fff;
}
.tpl-journey > .band:nth-of-type(4) {
  background: var(--ink);
  color: #fff;
}
.tpl-journey > .band:nth-of-type(4) h2,
.tpl-journey > .band:nth-of-type(4) h3 { color: #fff; }
.tpl-journey > .band:nth-of-type(4) p { color: rgba(255,255,255,0.84); }
#main.tpl-journey > .band.service-process {
  background: var(--ink-deep);
  color: #fff;
}
#main.tpl-journey > .band.service-process::before {
  display: none;
}
.tpl-journey .steps {
  gap: clamp(2rem, 4vw, 4rem);
  padding: 0;
  background: transparent;
}
.tpl-journey .steps__item {
  min-height: 220px;
  padding: 4.75rem 0 var(--sp-5);
  background: transparent;
  border-top: 1px solid var(--line-strong);
}
.tpl-journey .steps__item::before {
  top: var(--sp-4);
  left: 0;
}
.tpl-journey .steps__item::after { display: none; }
.tpl-journey .layout-aside {
  grid-template-columns: minmax(0, 1.35fr) minmax(290px, 0.65fr);
}
.tpl-journey .prose > h2 {
  max-width: 30ch;
  padding: var(--sp-7) 0 0;
  border: 0;
  border-top: 1px solid var(--line-strong);
  background: transparent;
  box-shadow: none;
}
.tpl-journey .prose > h2:first-child {
  padding-top: 0;
  border-top: 0;
}
.tpl-journey .prose > h2::before { display: none; }
.tpl-journey .aside-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 8px solid var(--brand-blue);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
}
.tpl-journey > .band:nth-of-type(4) .aside-card {
  background: var(--green-soft);
  border: 0;
  border-top: 8px solid var(--brand-green);
}
.tpl-journey > .band:nth-of-type(4) .prose > h2,
.tpl-journey > .band:nth-of-type(4) .aside-card h2,
.tpl-journey > .band:nth-of-type(4) .aside-card h3 {
  color: var(--ink);
}
.tpl-journey > .band:nth-of-type(4) .aside-card p {
  color: var(--ink-70);
}
.tpl-journey > .band:nth-of-type(4) .aside-card a:not(.btn) {
  color: var(--interactive);
}
.tpl-journey .card-grid .service-card { border-radius: 0; }

/* Telehealth clarity band: headings, next-step links, and the phone option are
   one open composition on the dark field rather than separate inset cards. */
#main.tpl-journey > .telehealth-clarity {
  background: var(--interactive-dk);
  color: #fff;
}
#main.tpl-journey > .telehealth-clarity .prose > h2 {
  max-width: 26ch;
  margin-top: var(--sp-7);
  padding: var(--sp-7) 0 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.28);
  background: transparent;
  box-shadow: none;
  color: #fff;
}
#main.tpl-journey > .telehealth-clarity .prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
#main.tpl-journey > .telehealth-clarity .prose > h2::before { display: none; }
#main.tpl-journey > .telehealth-clarity .prose > p {
  color: rgba(255,255,255,0.82);
}
#main.tpl-journey > .telehealth-clarity .linklist {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) clamp(2rem, 4vw, 4rem);
  margin-top: var(--sp-6);
}
#main.tpl-journey > .telehealth-clarity .linklist a {
  min-height: 64px;
  padding: var(--sp-4) 2rem var(--sp-4) 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.28);
  border-radius: 0;
  background: transparent;
  color: #fff;
}
#main.tpl-journey > .telehealth-clarity .linklist a:hover {
  border-color: rgba(255,255,255,0.72);
  background: transparent;
  color: #fff;
}
#main.tpl-journey > .telehealth-clarity .linklist a::after {
  color: var(--brand-green);
  transition: transform var(--dur-fast) var(--ease);
}
#main.tpl-journey > .telehealth-clarity .linklist a:hover::after {
  transform: translateX(4px);
}
#main.tpl-journey > .telehealth-clarity .aside-card {
  padding: var(--sp-5) 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.4);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
}
#main.tpl-journey > .telehealth-clarity .aside-card h2,
#main.tpl-journey > .telehealth-clarity .aside-card h3 {
  color: #fff;
}
#main.tpl-journey > .telehealth-clarity .aside-card p {
  color: rgba(255,255,255,0.78);
}
#main.tpl-journey > .telehealth-clarity .aside-card a:not(.btn) {
  color: #8fd3d6;
}
#main.tpl-journey > .telehealth-clarity .aside-card .btn--secondary {
  border-color: rgba(255,255,255,0.78);
  color: #fff;
}
#main.tpl-journey > .telehealth-clarity .aside-card .btn--secondary:hover {
  border-color: #fff;
  background: #fff;
  color: var(--ink);
}

@media (max-width: 700px) {
  #main.tpl-journey > .telehealth-clarity .linklist {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Telehealth process page: an open editorial timeline. The overview remains
   visible while the visitor moves through each real clinic-to-pharmacy
   handoff, and the timeline replaces the former stack of boxed headings. */
.telehealth-process {
  overflow: clip;
  background: var(--tint-deep);
}
.telehealth-process__grid {
  display: grid;
  grid-template-columns: minmax(340px, 0.88fr) minmax(480px, 1.12fr);
  gap: clamp(4rem, 8vw, 9rem);
  align-items: start;
}
.telehealth-process__overview {
  position: sticky;
  top: var(--header-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding-block: var(--sp-6);
}
.telehealth-process__overview > .eyebrow {
  color: var(--interactive);
}
.telehealth-process__overview > h2 {
  max-width: none;
  margin: var(--sp-3) 0 var(--sp-5);
  font-size: clamp(2.1rem, 1.8rem + 1.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
}
.telehealth-process__overview > p {
  max-width: 52ch;
  color: var(--ink-70);
  font-size: var(--step-0);
}
.telehealth-process__overview > .cta-pair {
  margin-top: var(--sp-6);
}
.telehealth-process__help {
  max-width: 52ch;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-strong);
}
.telehealth-process__help h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--step-1);
}
.telehealth-process__help p {
  margin: 0;
  color: var(--ink-70);
}
.telehealth-process__help p + p { margin-top: var(--sp-3); }
.telehealth-process__help a { font-weight: 700; }

.telehealth-process__steps {
  position: relative;
  margin: 0;
  padding: clamp(2rem, 4vw, 4rem) 0 var(--sp-7) 5.5rem;
  list-style: none;
  counter-reset: telehealth-step;
}
.telehealth-process__steps::before {
  content: '';
  position: absolute;
  top: clamp(3rem, 5vw, 5rem);
  bottom: clamp(4rem, 6vw, 6rem);
  left: 1.5rem;
  width: 1px;
  background: var(--line-strong);
}
.telehealth-process__steps > li {
  position: relative;
  min-height: clamp(15rem, 24vw, 22rem);
  margin: 0;
  padding: 0 0 clamp(4rem, 7vw, 7rem);
  counter-increment: telehealth-step;
}
.telehealth-process__steps > li:last-child {
  min-height: 0;
  padding-bottom: 0;
}
.telehealth-process__steps > li::before {
  content: counter(telehealth-step, decimal-leading-zero);
  position: absolute;
  top: -0.5rem;
  left: -5.5rem;
  z-index: 1;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--brand-green);
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.04em;
}
.telehealth-process__meta {
  display: block;
  margin-bottom: var(--sp-3);
  color: var(--interactive);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.telehealth-process__steps h3 {
  max-width: 20ch;
  margin: 0 0 var(--sp-3);
  color: var(--ink);
  font-size: clamp(2rem, 1.55rem + 1.4vw, 3.2rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
}
.telehealth-process__steps p {
  max-width: 58ch;
  margin: 0;
  color: var(--ink-70);
  font-size: var(--step-0);
}

.telehealth-process__limits {
  display: grid;
  grid-template-columns: minmax(260px, 0.55fr) minmax(0, 1.45fr);
  gap: clamp(3rem, 8vw, 8rem);
  row-gap: var(--sp-6);
  margin-top: clamp(5rem, 9vw, 9rem);
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--line-strong);
}
.telehealth-process__limits .eyebrow { color: var(--interactive); }
.telehealth-process__limits h2 {
  max-width: 12ch;
  margin-top: var(--sp-3);
  font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3.6rem);
}
.telehealth-process__limits ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) clamp(2rem, 4vw, 4.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.telehealth-process__limits li {
  position: relative;
  margin: 0;
  padding: var(--sp-4) 0 0 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-70);
}
.telehealth-process__limits li::before {
  content: '';
  position: absolute;
  top: calc(var(--sp-4) + 0.45em);
  left: 0;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--brand-green);
}

@media (max-width: 1000px) {
  .telehealth-process__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(4rem, 10vw, 7rem);
  }
  .telehealth-process__overview {
    position: static;
    display: block;
    min-height: 0;
    padding-block: 0;
  }
  .telehealth-process__overview > h2 { max-width: 14ch; }
  .telehealth-process__steps {
    max-width: 760px;
    padding-top: 0;
  }
  .telehealth-process__steps::before { top: 1rem; }
  .telehealth-process__steps > li {
    min-height: 0;
    padding-bottom: clamp(4rem, 10vw, 6rem);
  }
  .telehealth-process__limits {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
}

@media (max-width: 620px) {
  .telehealth-process__overview > h2 {
    font-size: clamp(2.55rem, 12vw, 3.75rem);
  }
  .telehealth-process__overview > .cta-pair { width: 100%; }
  .telehealth-process__overview > .cta-pair .cta-pair__label { flex: 1; }
  .telehealth-process__steps { padding-left: 4.25rem; }
  .telehealth-process__steps::before { left: 1.25rem; }
  .telehealth-process__steps > li::before {
    left: -4.25rem;
    width: 2.5rem;
    height: 2.5rem;
  }
  .telehealth-process__steps h3 {
    font-size: clamp(1.85rem, 8vw, 2.4rem);
  }
  .telehealth-process__limits ul { grid-template-columns: minmax(0, 1fr); }
}

/* Patient tasks: a clear work surface, large numbered choices and a strong
   privacy-safe contact panel. */
.tpl-patient > .band {
  background: var(--tint);
}
.tpl-patient > .band.service-process {
  background: var(--ink-deep);
  color: #fff;
}
.tpl-patient > .band.service-process::before {
  display: none;
}
.tpl-patient .layout-aside {
  grid-template-columns: minmax(0, 1.35fr) minmax(290px, 0.65fr);
}
.tpl-patient .layout-aside > :first-child:not(.aside-card) {
  padding: clamp(2rem, 2vw + 1rem, 3.75rem);
  background: #fff;
  border-top: 8px solid var(--brand-blue);
  box-shadow: var(--shadow-sm);
}
.tpl-patient .aside-card {
  border-top: 8px solid var(--brand-green);
}
.tpl-patient .prose > h2 {
  max-width: 30ch;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.tpl-patient .prose > ol:not([class]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1px;
  max-width: none;
  padding: 1px;
  background: var(--line);
  list-style: none;
  counter-reset: patient-step;
}
.tpl-patient .prose > ol:not([class]) > li {
  counter-increment: patient-step;
  position: relative;
  min-height: 190px;
  margin: 0;
  padding: 4.25rem var(--sp-5) var(--sp-5);
  background: var(--tint);
}
.tpl-patient .prose > ol:not([class]) > li::before {
  content: counter(patient-step, decimal-leading-zero);
  position: absolute;
  top: var(--sp-5);
  left: var(--sp-5);
  color: var(--interactive);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1;
}
.tpl-patient .linklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.tpl-patient .linklist a {
  min-height: 76px;
  border-radius: 0;
  border-left: 5px solid var(--brand-green);
  background: var(--tint);
}
.tpl-patient .reqform {
  max-width: none;
  margin-top: var(--sp-5);
  padding: clamp(1.5rem, 2vw, 2.5rem);
  background: var(--tint);
  border: 1px solid var(--line);
}

/* Payment checkout: the visible form is the production design shell. Stripe
   Payment Element replaces only .payment-card-slot when the merchant account
   is connected, so card data never enters an ordinary site input or the
   general request-form handler. */
.payment-hero {
  background-position: var(--hero-position, center);
}
.payment-hero.pagehero--banner > .container {
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.65fr);
}
.payment-hero::before {
  background: linear-gradient(90deg, rgba(1, 43, 54, 0.92) 0%, rgba(1, 43, 54, 0.72) 52%, rgba(1, 43, 54, 0.56) 100%);
}
.payment-hero.pagehero--banner h1 { max-width: 24ch; }

.tpl-patient > .payment-checkout {
  background: #eef6f5;
}
.payment-checkout__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: end;
  margin-bottom: clamp(2rem, 2vw + 1rem, 3.5rem);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line-strong);
}
.payment-checkout__intro h2 {
  max-width: 18ch;
  margin-bottom: 0;
}
.payment-checkout__intro > p {
  max-width: 52ch;
  margin: 0;
  color: var(--ink-70);
  font-size: var(--step-1);
}
.payment-checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(310px, 0.55fr);
  gap: clamp(2rem, 4vw, 4.75rem);
  align-items: start;
}

.payment-form {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 7px solid var(--brand-blue);
  box-shadow: var(--shadow-sm);
}
.payment-form__section {
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
}
.payment-form__section + .payment-form__section {
  border-top: 1px solid var(--line);
}
.payment-form__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.72fr);
  gap: var(--sp-5);
  align-items: end;
  margin-bottom: var(--sp-6);
}
.payment-form__heading .eyebrow { margin-bottom: var(--sp-2); }
.payment-form__heading h3 {
  margin: 0;
  font-size: clamp(1.55rem, 1.35rem + 0.75vw, 2.15rem);
}
.payment-form__heading > p {
  max-width: 42ch;
  margin: 0;
  color: var(--ink-70);
  font-size: var(--step--1);
}
.payment-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}
.payment-reference-field { grid-column: 1 / -1; }
.payment-amount-input {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding-left: var(--sp-4);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.payment-amount-input:focus-within {
  border-color: var(--interactive);
  box-shadow: 0 0 0 2px rgba(0, 137, 207, 0.12);
}
.payment-amount-input > span {
  flex: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-1);
  font-weight: 600;
}
.payment-amount-input input {
  min-height: 50px;
  padding-left: var(--sp-2);
  border: 0;
  border-radius: 0;
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums lining-nums;
}
.payment-amount-input input:focus { border-color: transparent; }

.payment-card-slot {
  padding: var(--sp-5);
  background: var(--tint);
  border: 1px solid var(--line-strong);
}
.payment-card-slot__status {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.payment-card-slot__status > svg {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--interactive);
}
.payment-card-slot__status > div {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.payment-card-slot__status strong {
  font-family: var(--font-ui);
  font-size: var(--step-0);
}
.payment-card-slot__status > div span {
  color: var(--ink-70);
  font-size: var(--step--1);
}
.payment-card-slot__badge {
  flex: none;
  padding: 0.35rem 0.7rem;
  background: #fff7e8;
  border: 1px solid #d5a44e;
  border-radius: var(--radius-pill);
  color: #72531d;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.payment-card-slot__preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 64px;
  margin-top: var(--sp-5);
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-70);
  font-size: var(--step--1);
}
.payment-card-slot__preview span {
  min-width: 0;
  padding: 0.8rem var(--sp-3);
}
.payment-card-slot__preview span + span { border-left: 1px solid var(--line); }
.payment-confirmation {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  color: var(--ink-70);
  font-size: var(--step--1);
}
.payment-confirmation input {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0.15rem 0 0;
  accent-color: var(--brand-green);
}
.payment-submit {
  width: 100%;
  margin-top: var(--sp-5);
}
.payment-submit svg { width: 19px; height: 19px; }
.payment-submit:disabled,
.payment-submit:disabled:hover,
.payment-submit:disabled:active {
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: var(--ink);
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}
.payment-form__pending {
  max-width: none;
  margin: var(--sp-3) 0 0;
  color: var(--ink-70);
  font-size: var(--step--1);
  text-align: center;
}

.payment-summary {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
  min-width: 0;
  padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.75rem);
  background: var(--ink-deep);
  border-top: 7px solid var(--brand-green);
  color: #fff;
  box-shadow: var(--shadow);
}
.payment-summary .eyebrow { color: #a8e0e2; }
.payment-summary > h2 {
  margin-bottom: var(--sp-6);
  color: #fff;
  font-size: clamp(2.75rem, 2.1rem + 2.4vw, 4.6rem);
  font-variant-numeric: tabular-nums lining-nums;
}
.payment-summary__list { margin: 0; }
.payment-summary__list > div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.2);
}
.payment-summary__list dt {
  color: rgba(255,255,255,0.68);
  font-size: var(--step--1);
}
.payment-summary__list dd {
  max-width: 58%;
  margin: 0;
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}
.payment-summary__secure {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: rgba(255,255,255,0.08);
  border-left: 4px solid var(--brand-green);
}
.payment-summary__secure strong {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-ui);
}
.payment-summary__secure p,
.payment-summary__help p {
  max-width: none;
  margin: 0;
  color: rgba(255,255,255,0.78);
  font-size: var(--step--1);
}
.payment-summary__help {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255,255,255,0.2);
}
.payment-summary__help h3 {
  margin-bottom: var(--sp-3);
  color: #fff;
  font-size: var(--step-1);
}
.payment-summary__help a {
  margin-top: var(--sp-3);
  color: #a8e0e2;
}
.payment-summary__help > span {
  display: block;
  margin-top: var(--sp-1);
  color: rgba(255,255,255,0.68);
  font-size: var(--step--1);
}

.tpl-patient > .payment-assurance {
  background: #fff;
  border-top: 1px solid var(--line);
}
.payment-assurance .band-head h2 { max-width: 18ch; }
.payment-assurance__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3.75rem);
}
.payment-assurance__grid article {
  padding-top: var(--sp-5);
  border-top: 5px solid var(--brand-blue);
}
.payment-assurance__grid article:nth-child(2) { border-top-color: var(--brand-green); }
.payment-assurance__grid article:nth-child(3) { border-top-color: var(--brand-grey); }
.payment-assurance__grid article > span {
  display: block;
  margin-bottom: var(--sp-3);
  color: var(--interactive);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.payment-assurance__grid h3 {
  max-width: 22ch;
  font-size: var(--step-2);
}
.payment-assurance__grid p {
  max-width: 42ch;
  margin: 0;
  color: var(--ink-70);
}

@media (max-width: 1050px) {
  .payment-checkout__grid { grid-template-columns: minmax(0, 1fr); }
  .payment-summary { position: static; }
}
@media (max-width: 800px) {
  .payment-checkout__intro,
  .payment-form__heading { grid-template-columns: minmax(0, 1fr); }
  .payment-assurance__grid { grid-template-columns: minmax(0, 1fr); }
  .payment-assurance__grid article { max-width: 680px; }
}
@media (max-width: 620px) {
  .payment-fields { grid-template-columns: minmax(0, 1fr); }
  .payment-reference-field { grid-column: auto; }
  .payment-card-slot { padding: var(--sp-4); }
  .payment-card-slot__status { flex-wrap: wrap; }
  .payment-card-slot__badge { margin-left: 38px; }
  .payment-card-slot__preview { grid-template-columns: minmax(0, 1fr) 76px 58px; }
  .payment-card-slot__preview span { padding-inline: var(--sp-2); }
}

/* Provider pages: a clean practice workspace with document-like navigation,
   alternating sections and an office detail rail. */
.tpl-provider > .band:nth-of-type(even) { background: var(--tint); }
.tpl-provider > .band:nth-of-type(odd) { background: #fff; }
.tpl-provider .layout-aside {
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr);
}
.tpl-provider .prose > h2 {
  max-width: 32ch;
  padding: 0 0 var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.tpl-provider .prose > h3 {
  color: var(--interactive-dk);
  font-family: var(--font-ui);
  font-size: var(--step-1);
  font-weight: 700;
}
.tpl-provider .aside-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 7px solid var(--brand-blue);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
}
.tpl-provider .linklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.tpl-provider .linklist a {
  min-height: 72px;
  border-radius: 0;
  background: #fff;
}
.tpl-provider > .band:nth-of-type(odd) .linklist a { background: var(--tint); }
.tpl-provider .reqform,
.tpl-provider > .band > .container > .reqform {
  width: 100%;
  max-width: 980px;
  padding: clamp(1.75rem, 2vw + 1rem, 3.5rem);
  background: #fff;
  border: 1px solid var(--line);
  border-top: 8px solid var(--brand-blue);
  box-shadow: var(--shadow-sm);
}
.tpl-provider > .band > .container > h2 {
  max-width: 24ch;
  margin-bottom: var(--sp-6);
}
.tpl-provider > .band > .container > .prose {
  max-width: 1100px;
  padding-left: clamp(1.5rem, 3vw, 3.5rem);
  border-left: 1px solid var(--line);
}

/* Claim and specialty pages: the action card becomes a horizontal service
   desk, with the article arranged below as numbered claim notes. */
.tpl-claims > .band {
  background: #f1f6f5;
}
.tpl-claims > .band::before {
  content: '';
  position: absolute;
  right: -5rem;
  bottom: -6rem;
  width: clamp(12rem, 25vw, 25rem);
  aspect-ratio: 1;
  border: clamp(2rem, 5vw, 5rem) solid rgba(0,149,218,0.06);
  pointer-events: none;
}
.tpl-claims .layout-aside {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 3vw, 4rem);
}
.tpl-claims .layout-aside > .aside-card {
  grid-row: 1;
}
.tpl-claims .layout-aside > .prose {
  grid-row: 2;
  max-width: 1120px;
}
.tpl-claims .aside-card {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-6);
  align-items: center;
  padding: clamp(1.75rem, 2vw + 1rem, 3rem);
  border-left: 8px solid var(--brand-green);
}
.tpl-claims .aside-card h2 {
  flex: 1 1 230px;
  margin: 0;
  font-size: var(--step-2);
}
.tpl-claims .aside-card p {
  flex: 1 1 230px;
  margin: 0;
}
.tpl-claims .aside-card .btn {
  flex: 0 1 240px;
  width: auto;
  margin: 0;
}
.tpl-claims .prose > h2 {
  max-width: 32ch;
  padding-top: var(--sp-7);
  border-top: 1px solid var(--line);
}
.tpl-claims .prose > h2:first-child {
  padding-top: 0;
  border-top: 0;
}
.tpl-claims .linklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  max-width: none;
  padding: 1px;
  background: var(--line);
}
.tpl-claims .linklist a {
  min-height: 92px;
  border: 0;
  border-radius: 0;
  background: #fff;
}

/* Education and FAQ: a reference-library layout. Topic links become shelves,
   reading lists become compact cards, and FAQ groups use a two-column index. */
.tpl-knowledge > .band {
  background: #f8faf8;
}
.tpl-knowledge .layout-aside {
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.5fr);
}
.tpl-knowledge .aside-card {
  border-top: 8px solid var(--brand-blue);
}
.tpl-knowledge .prose > h2 {
  max-width: 30ch;
}
.tpl-knowledge .prose > ul:not([class]),
.tpl-knowledge .prose > ol:not([class]) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  max-width: none;
  padding: 0;
  list-style: none;
}
.tpl-knowledge .prose > ul:not([class]) > li,
.tpl-knowledge .prose > ol:not([class]) > li {
  position: relative;
  margin: 0;
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand-green);
}
.tpl-knowledge .linklist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}
.tpl-knowledge .linklist a {
  min-height: 92px;
  border-radius: 0;
  border-top: 5px solid var(--brand-green);
  background: #fff;
}
.tpl-knowledge .faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  max-width: none;
}
.tpl-knowledge .faq > h2,
.tpl-knowledge .faq > h3 {
  grid-column: 1 / -1;
  margin: var(--sp-6) 0 0;
}
.tpl-knowledge .faq > :first-child { margin-top: 0; }
.tpl-knowledge .faq details {
  align-self: start;
  padding-inline: var(--sp-5);
  background: #fff;
  border: 1px solid var(--line);
}

/* Contact: location information, map and message form read as one service
   desk rather than another article page. */
.tpl-contact > .band {
  background: #fbfcfd;
}
.tpl-contact .layout-aside {
  grid-template-columns: minmax(0, 1.4fr) minmax(290px, 0.6fr);
}
.tpl-contact .layout-aside > :first-child:not(.aside-card) {
  min-width: 0;
}
.tpl-contact .nap dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(2rem, 4vw, 4.5rem);
  padding: 0;
  background: transparent;
}
.tpl-contact .nap dl > div {
  min-height: 130px;
  padding: var(--sp-5) 0 var(--sp-6);
  background: transparent;
  border-top: 1px solid var(--line);
}
.tpl-contact .mapblock {
  margin-top: var(--sp-5);
  border-radius: 0;
  box-shadow: none;
}
.tpl-contact .prose {
  margin-top: var(--sp-8);
  padding: var(--sp-6) var(--sp-6) 0;
  background: #fff;
  border-top: 8px solid var(--brand-blue);
}
.tpl-contact .reqform {
  max-width: none;
  padding: 0 var(--sp-6) var(--sp-6);
  background: #fff;
}
.tpl-contact .aside-card {
  border-top: 8px solid var(--brand-green);
}
.tpl-contact .aside-card .linklist a {
  color: var(--interactive);
}
.tpl-contact .aside-card .linklist a:hover {
  color: var(--interactive-dk);
  background: var(--interactive-sf);
}
.tpl-contact .aside-card .linklist a::after {
  color: currentColor;
}

/* Shop: legacy support-layout rules remain scoped to their original classes.
   The current storefront uses a short hero handoff and an open help section. */
.tpl-shop > .band { background: var(--tint-deep); }
.tpl-shop .layout-aside {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7);
}
.tpl-shop .layout-aside > .aside-card {
  grid-row: 1;
  position: static;
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(260px, 1fr) auto;
  gap: var(--sp-5) var(--sp-6);
  align-items: center;
  border-left: 8px solid var(--brand-green);
}
.tpl-shop .aside-card h2,
.tpl-shop .aside-card p { margin: 0; }
.tpl-shop .aside-card .btn {
  width: auto;
  margin: 0;
}
.tpl-shop .prose {
  max-width: 1180px;
  padding: clamp(2rem, 3vw, 4rem);
  background: #fff;
}
.tpl-shop .prose > h2 {
  max-width: 32ch;
  padding-top: var(--sp-7);
  border-top: 1px solid var(--line);
}
.tpl-shop .prose > h2:first-child {
  padding-top: 0;
  border-top: 0;
}
.tpl-shop .linklist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}
.tpl-shop .linklist a {
  min-height: 78px;
  border-radius: 0;
  border-left: 5px solid var(--brand-green);
}
.tpl-shop .shop-handoff {
  margin-top: var(--sp-4);
  font-size: 0.875rem;
  line-height: 1.6;
}
.tpl-shop .shop-help h2 { max-width: 30ch; }
.shop-catalog .info-section-head { margin-bottom: var(--sp-5); }
.shop-catalog .info-section-head h2 { max-width: none; }
.shop-catalog .info-section-head > p { max-width: 78ch; }
.shop-catalog .shop-notice { margin: 0 0 var(--sp-7); padding: var(--sp-5); border-radius: var(--radius); background: var(--tint); }
.shop-products { align-items: start; }
.shop-products .shop-product { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.shop-product__image { display: block; width: 100%; height: 220px; object-fit: contain; margin: 0 auto var(--sp-5); background: #fff; }
.shop-product h3 { max-width: none; font-size: var(--step-2); }
.shop-product__size { color: var(--ink-70); font-size: var(--step--1); }
.shop-product .eyebrow { font-size: .8125rem; letter-spacing: .08em; }
.shop-product__details { margin-block: var(--sp-3) var(--sp-5); border-block: 1px solid var(--line); }
.shop-product__details summary { display: list-item; min-height: 44px; padding-block: var(--sp-3); color: var(--interactive); font-weight: 600; cursor: pointer; }
.shop-product__details > p, .shop-product__details li { font-size: var(--step--1); line-height: 1.7; }
.shop-product > .info-link { margin-top: auto; min-height: 44px; display: inline-flex; align-items: center; }
.telehealth-process__limits > p:last-child { grid-column: 1 / -1; max-width: 85ch; margin: 0; }
.tpl-shop .shop-help p { max-width: 64ch; }
.tpl-shop .shop-help .linklist {
  max-width: 1040px;
  margin-top: var(--sp-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 700px) {
  .tpl-shop .shop-help .linklist { grid-template-columns: 1fr; }
}

/* Legal: a quiet document sheet with a strong top rule. Inline legacy width
   values are intentionally superseded here. */
.tpl-legal > .band { background: var(--tint); }
.tpl-legal > .band .prose {
  width: 100%;
  max-width: 980px !important;
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 5rem);
  background: #fff;
  border-top: 8px solid var(--ink);
  box-shadow: var(--shadow-sm);
}
.tpl-legal .prose > h2 {
  max-width: 32ch;
  padding-top: var(--sp-7);
  border-top: 1px solid var(--line);
}
.tpl-legal .prose > h2:first-child {
  padding-top: 0;
  border-top: 0;
}
/* Handoffs and confirmations: one focused sheet on a dark field. */
.tpl-handoff > .band {
  display: grid;
  min-height: calc(100svh - var(--utilitybar-h) - var(--header-h));
  align-items: center;
  background: var(--ink);
}
.tpl-handoff > .band > .container { min-width: 0; }
.tpl-handoff .handoff {
  max-width: 980px;
  padding: clamp(2rem, 4vw, 5rem);
  background: #fff;
  border-top: 9px solid var(--brand-green);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow-lg);
}
.tpl-handoff .handoff h1 { max-width: 22ch; }
.tpl-handoff .handoff__lede {
  max-width: 62ch;
  margin-inline: 0;
}
.tpl-handoff .cobrand {
  border-radius: 0;
  border-left: 6px solid var(--brand-blue);
}

/* Fallback for a future interior route that has not been assigned yet. */
.tpl-general > .band { background: var(--tint); }

@media (max-width: 1100px) {
  .tpl-contact .nap dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tpl-knowledge .linklist,
  .tpl-shop .linklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 940px) {
  .tpl-story .layout-aside,
  .tpl-clinical .layout-aside,
  .tpl-journey .layout-aside,
  .tpl-patient .layout-aside,
  .tpl-provider .layout-aside,
  .tpl-knowledge .layout-aside,
  .tpl-contact .layout-aside {
    grid-template-columns: minmax(0, 1fr);
  }
  .tpl-clinical .layout-aside > .prose {
    grid-column: 1;
    grid-row: 1;
  }
  .tpl-clinical .layout-aside > .aside-card {
    grid-column: 1;
    grid-row: 2;
  }
  .tpl-provider > .band > .container > .prose {
    padding-left: 0;
    border-left: 0;
  }
  .tpl-shop .layout-aside > .aside-card {
    display: flex;
    flex-wrap: wrap;
  }
  .tpl-shop .aside-card h2,
  .tpl-shop .aside-card p { flex: 1 1 260px; }
  .tpl-shop .aside-card .btn { flex: 0 1 240px; }
}

@media (max-width: 700px) {
  .tpl-story > .band--tint .media-frame { box-shadow: 10px 10px 0 var(--brand-green); }
  .tpl-patient .layout-aside > :first-child:not(.aside-card),
  .tpl-shop .prose,
  .tpl-legal > .band .prose,
  .tpl-handoff .handoff {
    padding: var(--sp-6) var(--sp-5);
  }
  .tpl-clinical .prose > ul:not([class]),
  .tpl-clinical .prose > ol:not([class]),
  .tpl-knowledge .prose > ul:not([class]),
  .tpl-knowledge .prose > ol:not([class]),
  .tpl-knowledge .linklist,
  .tpl-patient .linklist,
  .tpl-provider .linklist,
  .tpl-claims .linklist,
  .tpl-shop .linklist,
  .tpl-knowledge .faq,
  .tpl-contact .nap dl {
    grid-template-columns: minmax(0, 1fr);
  }
  .tpl-journey .steps { gap: var(--sp-5); }
  .tpl-journey .steps__item { min-height: 0; padding-bottom: var(--sp-4); }
  .tpl-claims .aside-card,
  .tpl-shop .layout-aside > .aside-card {
    display: block;
  }
  .tpl-claims .aside-card > * + *,
  .tpl-shop .aside-card > * + * { margin-top: var(--sp-4); }
  .tpl-claims .aside-card .btn,
  .tpl-shop .aside-card .btn { width: 100%; }
  .tpl-contact .nap dl > div { min-height: 0; }
  .tpl-contact .prose {
    padding: var(--sp-5) var(--sp-5) 0;
  }
  .tpl-contact .reqform {
    padding: 0 var(--sp-5) var(--sp-5);
  }
  .tpl-handoff > .band {
    min-height: auto;
    padding-block: var(--sp-6);
  }
}
.slider__slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s, 0s; z-index: 1; }
.slider__slide::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(3,59,74,0.86) 0%, rgba(1,43,54,0.80) 55%, rgba(1,43,54,0.90) 100%);
}

/* The words cross-fade FASTER than the picture. With one 600ms fade on the
   whole slide, both headlines were legible at once through the middle of the
   transition and the two stacked overlays washed the photo to flat teal. The
   background still cross-fades; the text does not overlap. */
.slider__slide > .container {
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
}
.slider__slide.is-active > .container { opacity: 1; transition-delay: 100ms; }

.slider__slide h1, .slider__slide h2 {
  color: #fff; max-width: 30ch; margin: 0 auto var(--sp-5);
  /* The old floor was 2.375rem. On a 390px phone this headline set six lines
     at 38px, 250px of type, which pushed both CTAs below the fold on a 667px
     screen before the carousel rotated away from them. */
  font-size: clamp(1.75rem, 1.05rem + 2.95vw, 3.75rem);
  line-height: 1.1;
  text-wrap: balance;
}
.slider__accent, .slider__slide .hero__accent { color: var(--brand-green); }
.slider__lede { color: rgba(255,255,255,0.95); max-width: 68ch; margin: 0 auto var(--sp-6); font-size: var(--step-1); }
.slider__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }
@media (max-width: 620px) {
  .slider__ctas .btn { flex: 1 1 240px; }
  .slider__lede { font-size: var(--step-0); margin-bottom: var(--sp-5); }
}
/* Short phones. A 640px-tall viewport still pushed the second CTA and the dots
   under the fold, and the dots are what tell a visitor there are two more
   slides. Height, not width, is the constraint being solved here. */
@media (max-width: 700px) and (max-height: 700px) {
  /* The controls occupy 44px plus their inset. A 48px bottom pad left the
     first slide's stacked CTAs 4px inside that control row at 320x568. */
  /* decision 113: 24px above and 56px below. With the header above the slider, the
     tallest slide plus this padding is what fits a 360x640 screen with the dots in view. */
  .slider__slide { padding-block: var(--sp-5) 3.5rem; }
  .slider__slide h1, .slider__slide h2 {
    font-size: clamp(1.5rem, 1.15rem + 1.6vw, 1.9rem);
    margin-bottom: var(--sp-3);
  }
  .slider__slide .hero__badge { margin-bottom: var(--sp-3); }
  .slider__lede { margin-bottom: var(--sp-3); }
  .slider__ctas { gap: var(--sp-3); }
}

/* Controls */
.slider__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: rgba(1,43,54,0.55); border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%; color: #fff; cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.slider__nav:hover { background: rgba(1,43,54,0.85); }
.slider__nav svg { width: 18px; height: 18px; }
.slider__nav--prev { left: clamp(0.5rem, 0.2rem + 1.4vw, 2rem); }
.slider__nav--next { right: clamp(0.5rem, 0.2rem + 1.4vw, 2rem); }
@media (max-width: 620px) { .slider__nav { display: none; } }

/* Keep the text column clear of the arrows. The headline is capped at 30ch and
   the arrows are absolutely positioned, so between roughly 945px and 1055px the
   two met and the arrow sat on top of the words. 78px is the 46px control plus
   a 32px gap. */
@media (min-width: 621px) {
  .slider__slide > .container { padding-inline: max(var(--gutter), 78px); }
}

.slider__dots {
  position: absolute; left: 0; right: 0; bottom: clamp(0.5rem, 0.3rem + 0.7vw, 1.25rem);
  z-index: 3; display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  list-style: none; margin: 0; padding: 0;
}
.slider__dots li { margin: 0; }
.slider__dot {
  /* 44px is the tap-target floor. The visible dot stays 10px; the button around
     it is what the finger has to hit, and it used to be 30px. */
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
}

/* Pause control. An auto-advancing carousel needs a way to stop it that does
   not depend on hovering or on tabbing into it (WCAG 2.2.2). The slider already
   stops on any interaction, but "click something and hope" is not a mechanism.
   Hidden until the JS takes over, because with scripting off nothing moves and
   a pause button would be a lie. */
.slider__pause {
  width: 44px; height: 44px; display: none; place-items: center;
  background: none; border: 0; color: #fff; cursor: pointer; opacity: 0.75;
  transition: opacity var(--dur-fast) var(--ease);
}
html.js-slider .slider__pause { display: grid; }
.slider__pause:hover { opacity: 1; }
.slider__pause svg { width: 14px; height: 14px; }
.slider__pause .i-play { display: none; }
.slider__pause[data-paused="true"] .i-play { display: block; }
.slider__pause[data-paused="true"] .i-pause { display: none; }
.slider__dot::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.45);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.slider__dot[aria-current="true"]::before { background: var(--brand-green); transform: scale(1.35); }
.slider__dot:hover::before { background: rgba(255,255,255,0.8); }

/* ==========================================================================
   NAVIGATION WITH DROPDOWNS AND A MEGA MENU

   Every page in the site is now reachable from the header, grouped the way the
   client's own outline groups them (SCOPE section 2, WEBSITE-BRIEF section 4.1):
   Compounding Pharmacy, Telehealth, Specialty Pharmacy Services, For Patients,
   For Providers, About.

   Compounding, Patients and Providers use mega menus because their task lists
   need grouping and descriptions. Shorter sections stay as plain dropdowns,
   because a wide panel holding three or four links adds space without clarity.

   THE PATTERN, and why it is a link PLUS a button rather than one or the other:
   a parent that is only a button strands the section's own landing page, and a
   parent that is only a link cannot be opened from a keyboard without
   navigating away. So each parent is a real link to its landing page with a
   small adjacent toggle. Mouse users get hover, keyboard users get the toggle,
   and nobody is trapped.
   ========================================================================== */

.nav__item { position: relative; }
.nav__parent { display: flex; align-items: center; gap: 2px; }

.nav__toggle-sub {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-70); border-radius: var(--radius-sm);
}
.nav__toggle-sub svg { width: 10px; height: 10px; transition: transform var(--dur) var(--ease); }
.nav__item.is-open > .nav__parent .nav__toggle-sub svg { transform: rotate(180deg); }
.nav__toggle-sub:hover { color: var(--ink); }

.submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: -14px;
  z-index: 120;
  min-width: 264px;
  padding: var(--sp-3);
  margin: 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
}
/* A small bridge so the pointer can cross the gap without the menu closing. */
.submenu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }

.nav__item.is-open > .submenu,
.nav__item:hover > .submenu,
.nav__item:focus-within > .submenu {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s, 0s, 0s;
}

.submenu li { margin: 0; }
.submenu a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.3;
}
.submenu a:hover { background: var(--tint); color: var(--interactive-dk); }
.submenu a span { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--ink-70); margin-top: 3px; }
.submenu__head {
  margin: 0;
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
  font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--interactive);
}
.submenu__rule { height: 1px; background: var(--line-soft); margin: var(--sp-2) var(--sp-3); }

/* The mega menu. Anchored to the header rather than to its parent item, so it
   can be wide without hanging off the edge of the viewport. */
/* The mega panel is anchored to .nav rather than to its own list item. Keep
   its right edge aligned with the header: after simplifying the navigation,
   .nav is narrower than the grouped panels, so centring a 1040px panel on it
   extended hidden and open menus beyond laptop viewports. Its item therefore
   has to be position:static, which is what .nav__item--mega does.

   It is ABSOLUTE, not fixed. With position:fixed the inherited
   "top: calc(100% + 10px)" resolves against the viewport rather than the
   parent, which put the panel a full screen height below the fold. */
.submenu--mega {
  position: absolute;
  top: calc(100% + 10px);
  left: auto;
  right: 0;
  transform: translateY(-6px);
  width: min(920px, calc(100vw - 2 * var(--gutter)));
  padding: var(--sp-5);
}
.nav__item--mega { position: static; }
.nav__item.is-open > .submenu--mega,
.nav__item:hover > .submenu--mega,
.nav__item:focus-within > .submenu--mega { transform: none; }
.submenu--mega .submenu__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2) var(--sp-4);
  list-style: none; margin: 0; padding: 0;
}
.submenu--mega .submenu__foot {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center;
  margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line-soft);
}
.submenu--mega .submenu__foot a { padding-inline: var(--sp-3); }

/* Dense task menus are grouped into labelled columns. The column rules make
   the groups scannable without turning each one into another closed card. */
.submenu--grouped {
  width: min(1040px, calc(100vw - 2 * var(--gutter)));
}
.submenu--grouped .submenu__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.submenu--grouped .submenu__columns--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.submenu--grouped .submenu__group {
  min-width: 0;
  padding-inline: var(--sp-4);
  border-left: 1px solid var(--line-soft);
}
.submenu--grouped .submenu__group:first-child {
  padding-left: 0;
  border-left: 0;
}
.submenu--grouped .submenu__group:last-child { padding-right: 0; }
.submenu--grouped .submenu__group-title,
.submenu--mega > .submenu__group-title {
  margin: 0 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.submenu--mega > .submenu__group-title { margin-top: var(--sp-3); }
.submenu--grouped .submenu__group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Mobile: the whole thing becomes an accordion ------------------------ */
@media (max-width: 1359px) {
  .nav__item { position: static; }
  .nav__parent { justify-content: space-between; width: 100%; }
  .nav__toggle-sub { width: 44px; height: 44px; color: var(--ink); }
  .nav__toggle-sub svg { width: 13px; height: 13px; }

  .submenu, .submenu--mega {
    position: static; transform: none; width: auto; min-width: 0;
    border: 0; box-shadow: none; background: var(--tint);
    border-radius: var(--radius);
    padding: var(--sp-2);
    margin: 0 0 var(--sp-3);
    display: none; opacity: 1; visibility: visible;
  }
  /* Hover must NOT open these on touch: only the explicit toggle does. */
  .nav__item:hover > .submenu, .nav__item:focus-within > .submenu { display: none; }
  .nav__item.is-open > .submenu { display: block; }
  .submenu--mega .submenu__grid { grid-template-columns: 1fr; }
  .submenu--mega .submenu__foot { margin-top: var(--sp-2); padding-top: var(--sp-3); }
  .submenu--grouped .submenu__columns { grid-template-columns: 1fr; }
  .submenu--grouped .submenu__group,
  .submenu--grouped .submenu__group:first-child,
  .submenu--grouped .submenu__group:last-child {
    padding: var(--sp-2) 0;
    border-left: 0;
  }
  .submenu--grouped .submenu__group + .submenu__group {
    margin-top: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line-soft);
  }
  .submenu a span { display: none; }   /* descriptions are desktop affordance */

  /* The mobile accordion participates in normal flow. Clear desktop panel
     positioning at the same specificity as the open-state rules. */
  .nav__item.is-open > .submenu--mega,
  .nav__item:hover > .submenu--mega,
  .nav__item:focus-within > .submenu--mega { transform: none; left: auto; right: auto; }
}


/* --- Site search ----------------------------------------------------------
   Static site, so search is a generated JSON index (build.js) filtered in the
   browser. The index is fetched on FIRST OPEN, never on page load, so a visitor
   who does not search pays nothing for it.

   Colour notes, because this row sits on white: the toggle uses --ink at
   12.1:1, never Peak Grey, which is 2.4:1 and is rules-only. The focus ring is
   the same one the rest of the site uses rather than a bespoke one. */

.search-toggle {
  flex: 0 0 auto;
  width: 44px; height: 44px;        /* 44px: the tap-target floor the audit enforces */
  display: grid; place-items: center;
  margin-left: var(--sp-2);
  background: none; border: 0; border-radius: 50%;
  color: var(--ink); cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.search-toggle svg { width: 20px; height: 20px; }
.search-toggle:hover { background: rgba(3, 59, 74, 0.07); }

.search {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 60;
  padding: var(--sp-4) var(--gutter) 0;
}
.search[hidden] { display: none; }

/* The page behind the dialog. It lives OUTSIDE the header (see layout.html),
   one layer beneath it, so the header stays bright and the dialog reads as
   dropping out of the search button rather than floating in a void. A click
   on it closes the search; the document-level click handler does that. While
   the dialog is open the page does not scroll behind it, and the scrollbar
   gutter is kept so nothing shifts sideways when the scrollbar disappears. */
.search-scrim {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(1, 43, 54, 0.46);
}
.search-scrim[hidden] { display: none; }
html.search-open { overflow: hidden; scrollbar-gutter: stable; }

/* One card, three bands: the field, a scrolling body, a keyboard hint. Only
   the body scrolls, so the field never leaves the top of the card. */
.search__dialog {
  max-width: 860px;
  margin-inline: auto;
  display: flex; flex-direction: column;
  max-height: min(640px, calc(100vh - var(--header-h) - 5rem));
  max-height: min(640px, calc(100dvh - var(--header-h) - 5rem));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(3, 59, 74, 0.22), 0 2px 8px rgba(3, 59, 74, 0.08);
  overflow: hidden;
}
html.js-motion .search__dialog { animation: search-in var(--dur) var(--ease-out) both; }
html.js-motion .search-scrim { animation: search-scrim-in var(--dur) var(--ease) both; }
@keyframes search-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes search-scrim-in { from { opacity: 0; } to { opacity: 1; } }

.search__form {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--line);
}

/* The label is read, not seen: the input has a placeholder and an icon, and a
   floating label above a single search field is noise. It is NOT display:none,
   which would take it out of the accessibility tree entirely. */
.search__label {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.search__row {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 0 var(--sp-4);
  background: var(--tint);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.search__row:focus-within {
  border-color: var(--interactive); background: #fff;
  box-shadow: 0 0 0 3px var(--interactive-sf);
}
.search__icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--ink-70); }
.search__row:focus-within .search__icon { color: var(--interactive); }

.search__input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; outline: none;
  font: inherit; font-size: var(--step-1); color: var(--ink);
  padding-block: var(--sp-3);
}
.search__input::placeholder { color: var(--ink-70); }
.search__input::-webkit-search-cancel-button { display: none; }

.search__close {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%;
  color: var(--ink); cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.search__close svg { width: 18px; height: 18px; }
.search__close:hover { background: var(--tint-deep); }

.search__body {
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--sp-4);
}

/* Empty state. The eight things people actually open the search to do, so the
   dialog is useful before a single letter is typed. JS hides them the moment
   there is a query and brings them back when it is cleared. */
.search__quick[hidden] { display: none; }
.search__quick-title,
.search__hit-section {
  font-family: var(--font-ui); font-weight: 600; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-70);
}
.search__quick-title { margin: 0 0 var(--sp-3); max-width: none; }
.search__chips {
  list-style: none; margin: 0; padding: 0; max-width: none;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.search__chips li { margin: 0; }
.search__chip {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: #fff; color: var(--ink);
  font-family: var(--font-ui); font-weight: 600; font-size: var(--step--1);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.search__chip:hover, .search__chip:focus-visible {
  border-color: var(--interactive); background: var(--interactive-sf); color: var(--interactive-dk);
}

.search__status {
  margin: 0 0 var(--sp-2); max-width: none;
  font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-70);
}
.search__status:empty { display: none; }

/* Results. Section eyebrow, title, a two-line excerpt, and an arrow that
   nudges on hover. The whole row is the link; focus moves between rows with
   the arrow keys because they are real links, not simulated options. */
.search__results { list-style: none; margin: 0; padding: 0; max-width: none; }
.search__results li { margin: 0; }
.search__results li + li { border-top: 1px solid var(--line-soft); }
.search__hit {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--sp-4); align-items: center;
  padding: var(--sp-3);
  border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
.search__hit-main { min-width: 0; }
.search__hit-section { display: block; margin-bottom: 2px; }
.search__hit-title {
  display: block; font-family: var(--font-ui); font-weight: 600;
  font-size: var(--step-0); color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}
.search__hit-text {
  margin-top: 2px; color: var(--ink-70); font-size: var(--step--1); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.search__hit-text mark { background: rgba(110, 178, 97, 0.35); color: var(--ink); padding: 0 2px; border-radius: 2px; }
.search__hit .search__hit-arrow {
  width: 18px; height: 18px; color: var(--ink-70);
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.search__hit:hover, .search__hit:focus-visible { background: var(--tint); }
.search__hit:hover .search__hit-title, .search__hit:focus-visible .search__hit-title { color: var(--interactive); }
.search__hit:hover .search__hit-arrow, .search__hit:focus-visible .search__hit-arrow { color: var(--interactive); transform: translateX(3px); }
.search__hit-lang {
  display: inline-block; margin-left: var(--sp-2);
  font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-70);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
  vertical-align: middle;
}

.search__hint {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  margin: 0; padding: var(--sp-2) var(--sp-4); max-width: none;
  border-top: 1px solid var(--line); background: var(--tint);
  font-family: var(--font-ui); font-size: 12px; color: var(--ink-70);
}
.search__hint span { display: inline-flex; align-items: center; gap: 4px; }
.search__hint kbd {
  font-family: var(--font-ui); font-size: 11px; line-height: 1;
  padding: 3px 6px;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px;
  background: #fff; color: var(--ink);
}

@media (max-width: 860px) {
  .search-toggle { margin-left: auto; }
}
@media (max-width: 700px) {
  .search { padding: var(--sp-3) var(--sp-3) 0; }
  .search__dialog {
    border-radius: var(--radius);
    /* 6.5rem: the utility bar above the header at rest, the card's own top
       offset, and a little air below it. */
    max-height: calc(100vh - var(--header-h) - 6.5rem);
    max-height: calc(100dvh - var(--header-h) - 6.5rem);
  }
  .search__form { padding: var(--sp-3); }
  .search__body { padding: var(--sp-3); }
  .search__hint { display: none; }   /* keyboard hints on a phone are noise */
}


/* --- The two pathways ------------------------------------------------------
   Her Updated Web Design document: "The site should have two very clear
   pathways: 1. PATIENTS ... 2. PROVIDERS ...". Two cards, equal weight, each
   with its own link list and its own primary action.

   min-width: 0 on the children because a grid item defaults to min-width:auto,
   which is the trap that has bitten this codebase twice; see site/README.md. */

.pathways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--sp-5);
}
.pathway {
  min-width: 0;
  background: var(--green-soft);
  border: 2px solid var(--line);
  border-top: 5px solid var(--brand-green);
  border-radius: var(--radius);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.pathway:nth-child(2) { background: var(--tint-deep); border-top-color: var(--brand-blue); }
.pathway__label {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--interactive);
  margin-bottom: var(--sp-3);
}
.pathway h3 { margin: 0 0 var(--sp-3); max-width: 24ch; }
.pathway p { color: var(--ink-70); }
.pathway .linklist { margin-block: var(--sp-4); width: 100%; }
.pathway .linklist--icons a {
  min-height: 78px;
  padding: 14px 18px;
  gap: 24px;
  border: 2px solid var(--line);
  background: linear-gradient(90deg, var(--green-soft) 0 72px, #fff 72px);
  color: var(--ink);
}
.pathway:nth-child(2) .linklist--icons a {
  background: linear-gradient(90deg, var(--tint-deep) 0 72px, #fff 72px);
}
.pathway .linklist--icons .path-icon {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
  color: var(--ink);
}
.pathway .linklist--icons a:hover,
.pathway .linklist--icons a:focus-visible { border-color: var(--interactive); }
.pathway .btn { margin-top: auto; }

/* Secondary services remain a brief, open acknowledgement, not a second catalog. */
.additional-services { background: var(--green-soft); padding-block: var(--sp-7); }
.additional-services__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}
.additional-services__inner h2 { max-width: 28ch; font-size: var(--step-3); }
.additional-services__inner p { max-width: 65ch; margin-bottom: 0; }
.additional-services__inner > .btn { flex-shrink: 0; }
@media (max-width: 820px) {
  .additional-services__inner { flex-direction: column; align-items: flex-start; }
}

.retail-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  margin-top: var(--sp-7);
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.retail-feature__media { min-height: 340px; }
.retail-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.retail-feature__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 4.5rem);
}
.retail-feature__content h2 { max-width: 18ch; color: #fff; }
.retail-feature__content p { color: rgba(255,255,255,0.86); }
.retail-feature__content .link-arrow {
  color: #fff;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
}
@media (max-width: 820px) {
  .retail-feature { grid-template-columns: 1fr; }
  .retail-feature__media { min-height: 260px; }
}

/* Shared catalog introduction: compact headline beside a short invitation. */
.catalog-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
}
.catalog-intro__title h2 { margin-bottom: 0; max-width: 24ch; }
.catalog-intro > .catalog-intro__description {
  max-width: 40ch;
  margin: 0;
  justify-self: end;
}
.catalog-context {
  max-width: 80ch;
  margin: calc(-1 * var(--sp-4)) 0 var(--sp-7);
  color: var(--ink-70);
}
@media (max-width: 760px) {
  .catalog-intro { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .catalog-intro > .catalog-intro__description { justify-self: start; }
}


/* --- Map ------------------------------------------------------------------
   Shown by default (Ed, 2026-08-30). The address bar above it is plain HTML,
   so the useful information does not depend on the iframe loading. The embed
   keeps loading="lazy" and a strict referrer policy, which mitigates the
   privacy cost without removing it. See partials/map.html. */

.mapblock {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}
.mapblock__bar {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: var(--tint);
}
.mapblock__pin { flex: 0 0 auto; width: 22px; height: 22px; color: var(--brand-green); }
.mapblock__addr { margin: 0; max-width: none; flex: 1 1 auto; min-width: 0; font-size: var(--step--1); }
.mapblock__addr strong { font-family: var(--font-ui); color: var(--ink); }
.mapblock__dir {
  flex: 0 0 auto;
  /* min-height plus padding, not just line-height: at --step--1 the link came
     out 22px tall and the responsive gate failed it against the 24px tap-target
     floor. Negative inline margin keeps it optically aligned with the address
     despite the added padding. */
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 32px; padding-block: var(--sp-2); margin-inline: calc(var(--sp-2) * -1);
  padding-inline: var(--sp-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-weight: 600; font-size: var(--step--1);
  color: var(--interactive); text-decoration: none;
}
.mapblock__dir svg { width: 15px; height: 15px; }
.mapblock__dir:hover { text-decoration: underline; }
.mapblock iframe { display: block; width: 100%; height: 380px; border: 0; }

@media (max-width: 620px) {
  .mapblock iframe { height: 300px; }
  .mapblock__dir { width: 100%; }
}

/* --- The brand mark on every section eyebrow -------------------------------
   35 eyebrows across the site had no mark at all, so each section header read
   as plain text and nothing tied them together. A small peak, the shape the
   business is named for, now sits before every one of them.

   Done as a mask rather than a background-image so the mark inherits
   currentColor: the eyebrow is Peak Blue on light bands and white on the ink
   bands, and the mark follows it without a second rule. Purely decorative, so
   it is a pseudo-element and never reaches the accessibility tree. */

/* No glyph in front of the eyebrow (Ed, 2026-08-30). It is a label, and it
   reads as one without a mark leading it. */
.eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); }



/* --- Background peak motif -------------------------------------------------
   Ed, 2026-08-30: put the brand mark behind a section, "careful where we add it
   and not too many on the site that it feels weird".

   ONE band, the dark telehealth step band, at 4% white. It reads as texture,
   not as a logo stamped on the page. If you can consciously see it, it is too
   strong.

   Rules that keep it from feeling weird:
     - ONE class, applied by hand, never a default on .band--ink.
     - Behind the content, never over it.
     - No animation. A drifting background behind body copy is a readability
       problem, not a flourish.
     - A pseudo-element, so it never reaches the accessibility tree.
     - Bottom-right, bleeding off the corner, so no text competes with the
       densest part of it. */

.band--motif { position: relative; overflow: hidden; }
.band--motif::before {
  content: "";
  position: absolute;
  right: -3%;
  bottom: -26%;
  width: min(420px, 30%);
  aspect-ratio: 200 / 275;
  background-color: rgba(255, 255, 255, 0.05);
  -webkit-mask: url('/assets/brand/mark-mask.png') center / contain no-repeat;
          mask: url('/assets/brand/mark-mask.png') center / contain no-repeat;
  pointer-events: none;
  z-index: 0;
}
.band--motif > .container { position: relative; z-index: 1; }
.band--motif.band--tint::before { background-color: rgba(3, 59, 74, 0.045); }

@media (max-width: 720px) {
  .band--motif::before { width: 78%; bottom: -26%; opacity: 0.7; }
}

/* The footer's fax number is not a link and should not read like the tappable
   phone number above it. */
.footer__fax { color: rgba(255,255,255,0.68); }
/* Social and WhatsApp links (decision 87). Icon plus a visible label; 44px targets. */
.footer__social { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-5); }
.site-footer .footer__social li { margin: 0; }
.site-footer .footer__social a { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; color: #fff; font-weight: 600; }
.footer__social svg { width: 22px; height: 22px; flex: none; --icon-accent: var(--brand-green); --icon-accent-opacity: 0.55; }

/* Quiet status marker for individual items that are not currently orderable.
   It belongs beside the item name, never on the entire peptide category. */
.service-card__status {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.15em 0.55em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--tint);
  color: var(--ink-70);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

/* Open product-status rows for the focused Health & Wellness offering and the
   select peptide launch group. The highlighted BPC-157 row keeps its status in
   the same visual unit so emphasis cannot imply that it is orderable. */
.therapy-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  max-width: none;
  margin: var(--sp-5) 0 var(--sp-7);
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--line-strong);
}
.therapy-list > li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 108px;
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.therapy-list > li:nth-child(odd) { border-right: 1px solid var(--line); }
.therapy-list strong { color: var(--ink); font-family: var(--font-ui); font-size: var(--step-1); }
.therapy-list > li > span,
.therapy-list > li > small { margin-top: var(--sp-1); color: var(--ink-70); font-size: var(--step--1); }
.therapy-list__item--featured {
  grid-column: 1 / -1;
  background: #eef7ec;
  border-left: 7px solid var(--brand-green);
}
.therapy-list__item--featured > span { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.therapy-list__badge {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.availability-status {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: none;
  padding: var(--sp-4) 0;
  border-block: 1px solid var(--line-strong);
  color: var(--ink-70);
}
.availability-status strong { color: var(--interactive); font-family: var(--font-ui); }
@media (max-width: 640px) {
  .therapy-list { grid-template-columns: 1fr; }
  .therapy-list > li:nth-child(odd) { border-right: 0; }
  .therapy-list__item--featured { grid-column: auto; }
}

/* Peptides: photography-led care options, a visibly separate future lineup,
   and an open prescription path. No product ordering or sidebar treatment. */
.tpl-clinical > .band.peptide-options,
.tpl-clinical > .band.peptide-prescription { background: #fff; }
.tpl-clinical > .band.peptide-planned { background: var(--tint); }
.peptide-options__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--sp-7);
  margin-bottom: var(--sp-7);
}
.peptide-options__intro h2,
.peptide-planned__content h2,
.peptide-prescription h2 { max-width: none; }
.peptide-options__intro > p {
  max-width: 38ch;
  justify-self: end;
  padding-bottom: var(--sp-1);
  color: var(--ink-70);
  font-size: var(--step-1);
}
.peptide-options__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}
.peptide-option {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}
.peptide-option > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: 60% center;
}
.peptide-option__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: clamp(1.5rem, 2.2vw, 2.5rem);
}
.peptide-option__content .eyebrow { font-size: var(--step--1); letter-spacing: .1em; }
.peptide-option h3 { max-width: none; font-size: var(--step-3); line-height: 1.15; }
.peptide-option__name { white-space: nowrap; }
.peptide-option .link-arrow {
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  margin-top: var(--sp-5);
  padding-block: var(--sp-2);
  border: 0;
}
.peptide-options__disclosure {
  max-width: 100ch;
  margin-top: var(--sp-5);
  color: var(--ink-70);
  font-size: .875rem;
  line-height: 1.6;
}
.peptide-options__image-note {
  max-width: none;
  margin-top: var(--sp-2);
  color: var(--ink-70);
  font-size: .8125rem;
}
.peptide-planned__layout {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  align-items: stretch;
  gap: clamp(2rem, 4vw, 4.5rem);
}
.peptide-planned__layout > * { min-width: 0; }
.peptide-planned__media {
  min-height: 360px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--line);
}
.peptide-planned__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.peptide-planned__content > p { max-width: 68ch; color: var(--ink-70); }
.peptide-planned__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}
.peptide-planned__list > li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-2);
  min-width: 0;
  margin: 0;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.peptide-planned__list > .peptide-planned__featured {
  background: var(--interactive-sf);
  border-color: #b7d5e3;
}
.peptide-planned__status {
  color: var(--ink-70);
  font-family: var(--font-ui);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.peptide-planned__list strong { font-family: var(--font-display); font-size: var(--step-2); }
.peptide-planned__list small { color: var(--ink-70); font-size: var(--step--1); line-height: 1.45; }
.peptide-planned__requirements { margin-top: var(--sp-4); font-size: var(--step--1); }
.peptide-prescription__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-7);
}
.peptide-prescription__layout > div > p { max-width: 60ch; color: var(--ink-70); }
.peptide-prescription__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  justify-self: end;
}
.peptide-prescription__actions > p { font-size: var(--step--1); }
.peptide-prescription__actions a[href^="tel:"] { color: var(--interactive); }
@media (max-width: 1100px) {
  .peptide-option { grid-template-columns: 1fr; }
  .peptide-option > img { height: auto; min-height: 0; aspect-ratio: 1.7; }
  .peptide-option__content { justify-content: flex-start; }
  .peptide-option .link-arrow { margin-top: auto; padding-top: var(--sp-5); }
  .peptide-planned__layout { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); }
  .peptide-planned__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .peptide-planned__list > li { padding: var(--sp-4); }
}
@media (max-width: 760px) {
  .peptide-options__intro { grid-template-columns: 1fr; gap: var(--sp-4); margin-bottom: var(--sp-6); }
  .peptide-options__intro > p { justify-self: start; padding: 0; }
  .peptide-options__grid { gap: var(--sp-5); }
  .peptide-planned__layout { grid-template-columns: 1fr; gap: var(--sp-6); }
  .peptide-planned__media { min-height: 0; height: 220px; }
  .peptide-planned__media img { object-position: center 40%; }
  .peptide-prescription__layout { grid-template-columns: 1fr; gap: var(--sp-5); }
  .peptide-prescription__actions { justify-self: stretch; }
}
@media (max-width: 600px) {
  .peptide-options__grid { grid-template-columns: 1fr; }
  .peptide-option > img { aspect-ratio: 1.65; }
  .peptide-option h3 { font-size: var(--step-3); }
  .peptide-planned__content h2 { font-size: var(--step-4); }
  .peptide-planned__content h2 br { display: none; }
  .peptide-planned__list > .peptide-planned__featured { grid-column: 1 / -1; }
  .peptide-prescription__actions > .btn { width: 100%; }
}

/* On the reading template the container is 1180px and an interior h1 usually
   needs most of it, so the breadcrumb no longer fits beside the title: it
   wrapped onto its own line and stranded itself right-aligned under the
   headline, which read as a floating fragment rather than as navigation.
   Use the treatment the narrow breakpoint already uses, at every width: crumb
   above the title, left-aligned with it and with everything below it. */
.tpl-reading .pagehero__top { flex-direction: column; align-items: flex-start; }
.tpl-reading .pagehero__top > div { order: 2; }
.tpl-reading .pagehero__top .crumbs { order: 1; margin-left: 0; }

/* Homepage visit band: open contact groups beside a full-sized map. Keep all
   map overrides here scoped so the shared Contact-page embed is unchanged. */
.home-visit__layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch;
}
.home-visit__layout > * { min-width: 0; }
.home-visit__content { padding-block: var(--sp-2); }
.home-visit__content h2 { max-width: none; }
.home-visit .home-visit__details {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-6);
  margin-top: var(--sp-6);
}
.home-visit__address { grid-column: 1 / -1; }
.home-visit .home-visit__address dd { font-size: var(--step-1); }
.home-visit__secondary {
  display: block;
  margin-top: var(--sp-1);
  color: var(--ink-70);
  font-size: var(--step--1);
}
/* Her after-hours paragraph (decision 87), under the hours, above the actions. */
.home-visit__note { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); color: var(--ink-70); font-size: var(--step--1); }
.home-visit__note p { max-width: 60ch; margin-bottom: var(--sp-2); }
.home-visit__note p:last-child { margin-bottom: 0; color: var(--ink); }
.home-visit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.home-visit__map { display: flex; }
.home-visit__map .mapblock {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.home-visit__map .mapblock iframe {
  flex: 1 1 auto;
  height: 420px;
  min-height: 420px;
}
@media (max-width: 960px) {
  .home-visit__layout { grid-template-columns: 1fr; }
  .home-visit__map .mapblock iframe { height: 340px; min-height: 340px; }
}
@media (max-width: 520px) {
  .home-visit .home-visit__details { grid-template-columns: 1fr; gap: var(--sp-5); }
  .home-visit__actions > .btn { width: 100%; }
}

/* ========================================================================
   INTERIOR HERO FAMILIES

   The homepage carousel is intentionally excluded. Interior routes use seven
   compositions chosen by purpose: panorama, split, card, editorial, banner,
   action, and minimal. The route groups and importance tiers are intentionally
   independent, so related pages stay recognisable without forcing every first
   screen into the same height or composition.
   ======================================================================== */

.pagehero:is(.pagehero--panorama, .pagehero--split, .pagehero--card, .pagehero--editorial, .pagehero--banner, .pagehero--action, .pagehero--minimal) {
  overflow: hidden;
}
.pagehero:is(.pagehero--panorama, .pagehero--split, .pagehero--card, .pagehero--editorial, .pagehero--banner, .pagehero--action, .pagehero--minimal) > .container {
  position: relative;
  z-index: 1;
}
.pagehero:is(.pagehero--panorama, .pagehero--split, .pagehero--card, .pagehero--editorial, .pagehero--banner, .pagehero--action, .pagehero--minimal) .pagehero__top {
  flex-direction: column;
  align-items: flex-start;
}
.pagehero:is(.pagehero--panorama, .pagehero--split, .pagehero--card, .pagehero--editorial, .pagehero--banner, .pagehero--action, .pagehero--minimal) .pagehero__top > div {
  order: 2;
  width: 100%;
}
.pagehero:is(.pagehero--panorama, .pagehero--split, .pagehero--card, .pagehero--editorial, .pagehero--banner, .pagehero--action, .pagehero--minimal) .pagehero__top .crumbs {
  order: 1;
  margin-left: 0;
}

/* 1. Panorama: a cinematic statement for the site's main gateways. Content is
   centered in the visible stage below the overlay header; bottom alignment made
   shorter content blocks appear to sag toward the next section. */
.pagehero--panorama {
  align-content: center;
  padding-bottom: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  background-position: center;
}
.pagehero--panorama::before {
  background: rgba(1, 43, 54, 0.68);
}
/* Ed 2026-09-29 (About hero at 1920): the copy box was 860px and the 68px h1 wrapped
   "care." onto its own line; 920px holds the longest panorama first line with room. */
.pagehero--panorama .pagehero__top,
.pagehero--panorama .pagehero__lede,
.pagehero--panorama .pagehero__ctas,
.pagehero--panorama > .container > .disclosure {
  width: min(100%, 920px);
}
.pagehero--panorama h1 {
  max-width: none;
  font-size: clamp(2.2rem, 1.4rem + 2.7vw, 4.25rem);
  line-height: 1.1;
  letter-spacing: -.025em;
}
.pagehero--panorama .pagehero__lede {
  max-width: 55ch;
}
.pagehero--panorama.pagehero--reverse {
  background-position: left center;
}
.pagehero--panorama.pagehero--reverse > .container > * {
  margin-left: auto;
}
.pagehero--panorama.pagehero--reverse .pagehero__top,
.pagehero--panorama.pagehero--reverse .pagehero__lede,
.pagehero--panorama.pagehero--reverse .pagehero__ctas,
.pagehero--panorama.pagehero--reverse > .container > .disclosure {
  width: min(100%, 760px);
  max-width: 760px;
}

/* 2. Split: generous copy over a photograph that covers the whole band. A deep-teal
   veil darkens it toward the copy and clears toward the far edge, so there is no
   boundary in the middle (Ed, 2026-10-21, option A, replacing the 44% feathered
   column of decisions 60 and 98). Reverse layouts turn the veil round. */
.pagehero.pagehero--split {
  /* decision 113: the header is no longer inside this box, so its height comes off the
     minimum to keep the first screen the same size Ed approved. */
  min-height: calc(clamp(640px, 80svh, 820px) - var(--header-h));
  align-content: center;
  background-color: var(--ink-deep);
  background-image: none;
}
.site-header--overlay ~ main > .pagehero.pagehero--split:first-child {
  padding-top: clamp(2.25rem, 3vw, 3rem);
  padding-bottom: clamp(2.25rem, 3vw, 3rem);
}
.pagehero--split::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image:
    linear-gradient(90deg, rgba(1,43,54,.97) 0%, rgba(1,43,54,.93) 36%, rgba(1,43,54,.62) 54%, rgba(1,43,54,.18) 74%, rgba(1,43,54,0) 90%),
    var(--hero-image, url('/assets/img/compounding-science.jpg'));
  /* 2026-09-29: pages set --hero-position per image; it now crops the full-width photo. */
  background-position: center, var(--hero-position, center);
  background-size: cover, cover;
  background-blend-mode: normal;
  box-shadow: none;
  pointer-events: none;
}
.pagehero--split::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: -4%;
  bottom: -24%;
  width: min(29vw, 430px);
  aspect-ratio: 200 / 275;
  background-color: rgba(110, 178, 97, 0.08);
  -webkit-mask: url('/assets/brand/mark-mask.png') center / contain no-repeat;
          mask: url('/assets/brand/mark-mask.png') center / contain no-repeat;
  pointer-events: none;
}
.pagehero--split > .container {
  display: grid;
  grid-template-columns: minmax(0, 54%) minmax(0, 46%);
}
.pagehero--split > .container > * {
  grid-column: 1;
  width: 100%;
}
.pagehero--split h1 {
  max-width: none;
  font-size: clamp(2.2rem, 1.45rem + 2.4vw, 4rem);
  line-height: 1.1;
  letter-spacing: -.025em;
}
.pagehero--split .pagehero__lede {
  width: min(100%, 58ch);
  max-width: 58ch;
  margin-top: var(--sp-5);
  font-size: var(--step-1);
}
.pagehero--split .pagehero__ctas { margin-top: var(--sp-5); }
/* Reverse copy is left-aligned, so every line STARTS at the light end of the veil; the
   eyebrow measured 4.4:1 there over a bright sky. The veil holds .8 across the copy's
   first edge (54%) and clears faster over the photo instead. */
.pagehero--split.pagehero--reverse::before {
  background-image:
    linear-gradient(270deg, rgba(1,43,54,.97) 0%, rgba(1,43,54,.93) 36%, rgba(1,43,54,.8) 54%, rgba(1,43,54,.3) 70%, rgba(1,43,54,0) 88%),
    var(--hero-image, url('/assets/img/compounding-science.jpg'));
}
.pagehero--split.pagehero--reverse::after {
  right: -4%;
  left: auto;
}
.pagehero--split.pagehero--reverse > .container {
  grid-template-columns: minmax(0, 46%) minmax(0, 54%);
}
.pagehero--split.pagehero--reverse > .container > * {
  grid-column: 2;
  margin-left: 0;
}

/* 3. Card: task-oriented content sits on an opaque paper card, while the
   photograph still gives the route a distinct sense of place. */
.pagehero--card {
  align-content: center;
  background-position: center;
}
.pagehero--card::before {
  background: rgba(1, 43, 54, 0.48);
}
.pagehero--card > .container {
  min-width: 0;
  width: min(740px, calc(100% - var(--gutter) - var(--gutter)));
  margin-right: auto;
  margin-left: var(--gutter);
  padding: clamp(1.6rem, 1.15rem + 1.8vw, 3rem);
  border: 1px solid rgba(3, 59, 74, 0.12);
  border-top: 5px solid var(--brand-green);
  border-radius: 0;
  background: #fff;
  box-shadow: 0 20px 52px rgba(1, 29, 37, 0.24);
  color: var(--ink);
}
.pagehero--card.pagehero--reverse > .container {
  margin-right: var(--gutter);
  margin-left: auto;
}
.pagehero--card h1 {
  max-width: 17ch;
  color: var(--ink);
  font-size: clamp(2.35rem, 1.85rem + 2vw, 3.8rem);
}
.pagehero--card .eyebrow { color: var(--interactive); }
.pagehero--card .pagehero__lede {
  max-width: 54ch;
  color: var(--ink-70);
}
.pagehero--card .crumbs { color: var(--ink-70); }
.pagehero--card .crumbs li + li::before { color: var(--brand-grey); }
.pagehero--card .crumbs a { color: var(--interactive); }
.pagehero--card .crumbs a:hover { color: var(--interactive-dk); }
.pagehero--card .crumbs [aria-current] { color: var(--ink); }
.pagehero--card .btn--secondary { border-color: var(--ink); color: var(--ink); }
.pagehero--card .btn--secondary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* 4. Editorial: image-free and intentionally graphic for pages where a stock
   photograph would imply authority it cannot provide. The real mark supplies
   the large background geometry. */
.pagehero--editorial {
  align-content: center;
  background-color: var(--ink-deep);
  background-image: none;
}
.pagehero--editorial::before {
  content: '';
  position: absolute;
  z-index: 0;
  right: -3%;
  left: auto;
  bottom: -30%;
  width: min(50vw, 760px);
  aspect-ratio: 200 / 275;
  background-color: rgba(255, 255, 255, 0.055);
  -webkit-mask: url('/assets/brand/mark-mask.png') center / contain no-repeat;
          mask: url('/assets/brand/mark-mask.png') center / contain no-repeat;
  pointer-events: none;
}
.pagehero--editorial::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: calc(var(--header-h) + 6%);
  right: 8%;
  width: min(28vw, 430px);
  aspect-ratio: 1;
  /* Preserve the original decorative layer and its composition, but make only
     the thin circular outline invisible. */
  border: 1px solid transparent;
  border-radius: 50%;
  pointer-events: none;
}
.pagehero--editorial > .container > * {
  width: min(100%, 900px);
}
.pagehero--editorial h1 {
  max-width: 18ch;
  font-size: clamp(2.65rem, 2rem + 2.7vw, 4.6rem);
}
.tpl-shop .pagehero--editorial h1 { max-width: none; }
.pagehero--editorial .pagehero__lede {
  max-width: 58ch;
  padding-left: var(--sp-5);
  border-left: 4px solid var(--brand-green);
}
.pagehero--editorial.pagehero--reverse::before {
  right: auto;
  left: -3%;
}
.pagehero--editorial.pagehero--reverse::after {
  right: auto;
  left: 8%;
}
.pagehero--editorial.pagehero--reverse > .container > * {
  margin-left: auto;
}
.pagehero--editorial.pagehero--no-orbit::after {
  display: none;
}

/* 5. Banner: a photographic, horizontal opening that gets visitors into the
   page faster than a cinematic gateway while still giving account and payment
   routes a clear visual identity. */
.pagehero--banner {
  align-content: end;
  background-position: center;
}
.pagehero--banner::before {
  background: linear-gradient(180deg, rgba(1, 43, 54, 0.5), rgba(1, 43, 54, 0.92));
}
.pagehero--banner > .container {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
  grid-template-rows: auto auto;
  column-gap: clamp(3rem, 8vw, 8rem);
  align-items: end;
}
.pagehero--banner .pagehero__top {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: end;
}
.pagehero--banner .pagehero__lede {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin-top: 0;
}
.pagehero--banner .pagehero__ctas {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin-top: var(--sp-5);
}
.pagehero--banner h1 {
  max-width: 14ch;
  font-size: clamp(2.6rem, 2rem + 2.45vw, 4.25rem);
}
.pagehero--banner.pagehero--reverse .pagehero__top {
  grid-column: 2;
}
.pagehero--banner.pagehero--reverse .pagehero__lede,
.pagehero--banner.pagehero--reverse .pagehero__ctas {
  grid-column: 1;
}

/* 6. Action: a light task opening paired with a dedicated next-step panel.
   The panel receives each page's own CTA during the build, preserving the
   destination while making the workflow much easier to scan. */
.pagehero--action {
  align-content: center;
  background-color: #eef6f5;
  background-image: none;
  color: var(--ink);
}
.pagehero--action::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 43%;
  background-color: rgba(238, 246, 245, 0.72);
  background-image: var(--hero-image, url('/assets/img/compounding-science.jpg'));
  background-position: center;
  background-size: cover;
  background-blend-mode: screen;
  opacity: 0.34;
}
.pagehero--action::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background-color: #eef6f5;
  /* decision 113: the dark header-height slice is gone; the header is above this band. */
  background-image: linear-gradient(90deg, #eef6f5 0%, #eef6f5 57%, rgba(238, 246, 245, 0.72) 78%, rgba(238, 246, 245, 0.38) 100%);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.pagehero--action > .container {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.75fr);
  grid-template-rows: auto auto;
  gap: var(--sp-4) clamp(3rem, 7vw, 7.5rem);
  align-items: center;
}
.pagehero--action .pagehero__top {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
}
.pagehero--action .pagehero__lede {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin-top: 0;
}
.pagehero--action .pagehero__actionbox {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  min-width: 0;
  padding: clamp(2rem, 2vw + 1rem, 3.5rem);
  border: 1px solid rgba(3, 59, 74, 0.12);
  border-top: 5px solid var(--brand-green);
  background: #fff;
  box-shadow: 0 18px 48px rgba(1, 43, 54, 0.1);
  color: var(--ink);
}
.pagehero--action h1 {
  max-width: 16ch;
  color: var(--ink);
  font-size: clamp(2.35rem, 1.85rem + 2vw, 3.9rem);
}
.pagehero--action .eyebrow { color: var(--interactive); }
.pagehero--action .pagehero__lede,
.pagehero--action .crumbs { color: var(--ink-70); }
.pagehero--action .crumbs li + li::before { color: var(--brand-grey); }
.pagehero--action .crumbs a { color: var(--interactive); }
.pagehero--action .crumbs a:hover { color: var(--interactive-dk); }
.pagehero--action .crumbs [aria-current] { color: var(--ink); }
.pagehero__action-eyebrow {
  margin: 0 0 var(--sp-3);
  color: var(--interactive);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pagehero__actionbox h2 {
  max-width: 15ch;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.25vw, 2.45rem);
  line-height: 1.12;
}
.pagehero__actionbox ol {
  margin: var(--sp-5) 0;
  padding: 0;
  list-style: none;
  counter-reset: hero-action;
}
.pagehero__actionbox li {
  counter-increment: hero-action;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  margin: 0;
  padding-block: var(--sp-3);
  border-top: 1px solid rgba(3, 59, 74, 0.14);
  color: var(--ink-70);
}
.pagehero__actionbox li::before {
  content: counter(hero-action, decimal-leading-zero);
  color: var(--brand-green);
  font-family: var(--font-ui);
  font-weight: 700;
}
.pagehero__actionbox .pagehero__ctas {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.pagehero__actionbox .cta-pair,
.pagehero__actionbox .btn {
  width: 100%;
}
.pagehero__actionbox .cta-pair__label { flex: 1 1 auto; }
.pagehero__actionbox .btn--secondary {
  border-color: var(--ink);
  color: var(--ink);
}
.pagehero__actionbox .btn--secondary:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.pagehero--action.pagehero--reverse::before {
  right: auto;
  left: 0;
}
.pagehero--action.pagehero--reverse::after {
  transform: scaleX(-1);
}
.pagehero--action.pagehero--reverse .pagehero__top,
.pagehero--action.pagehero--reverse .pagehero__lede {
  grid-column: 2;
}
.pagehero--action.pagehero--reverse .pagehero__actionbox {
  grid-column: 1;
}

/* 7. Minimal: a quiet, light title band for audience gateways. (Until decision
   113 its ::before painted a deep-teal header-height slice for the overlay
   navigation; the header is above the band now, so that slice is switched off.) */
.pagehero--minimal {
  align-content: center;
  background-color: #f2f8f6;
  background-image: linear-gradient(112deg, #f8fbfa 0%, #f8fbfa 48%, #e7f2f0 100%);
  color: var(--ink);
}
.pagehero--minimal.pagehero--reverse {
  background-image: linear-gradient(248deg, #f8fbfa 0%, #f8fbfa 48%, #e7f2f0 100%);
}
.pagehero--minimal::before { display: none; }
.pagehero--minimal::after {
  content: '';
  position: absolute;
  z-index: 0;
  right: -3%;
  bottom: -38%;
  width: min(38vw, 560px);
  aspect-ratio: 200 / 275;
  background-color: rgba(3, 59, 74, 0.065);
  -webkit-mask: url('/assets/brand/mark-mask.png') center / contain no-repeat;
          mask: url('/assets/brand/mark-mask.png') center / contain no-repeat;
  pointer-events: none;
}
.pagehero--minimal > .container {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.75fr);
  grid-template-rows: auto auto;
  column-gap: clamp(3rem, 9vw, 9rem);
  align-items: end;
}
.pagehero--minimal .pagehero__top {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.pagehero--minimal .pagehero__lede {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin-top: 0;
}
.pagehero--minimal .pagehero__ctas {
  grid-column: 2;
  grid-row: 2;
  margin-top: var(--sp-5);
}
.pagehero--minimal h1 {
  max-width: 16ch;
  color: var(--ink);
  font-size: clamp(2.4rem, 1.9rem + 2vw, 4rem);
}
.pagehero--minimal .eyebrow { color: var(--interactive); }
.pagehero--minimal .pagehero__lede,
.pagehero--minimal .crumbs { color: var(--ink-70); }
.pagehero--minimal .crumbs li + li::before { color: var(--brand-grey); }
.pagehero--minimal .crumbs a { color: var(--interactive); }
.pagehero--minimal .crumbs a:hover { color: var(--interactive-dk); }
.pagehero--minimal .crumbs [aria-current] { color: var(--ink); }
.pagehero--minimal .btn--secondary {
  border-color: var(--ink);
  color: var(--ink);
}
.pagehero--minimal .btn--secondary:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.pagehero--minimal.pagehero--reverse .pagehero__top {
  grid-column: 2;
}
.pagehero--minimal.pagehero--reverse .pagehero__lede,
.pagehero--minimal.pagehero--reverse .pagehero__ctas {
  grid-column: 1;
}
.pagehero--minimal.pagehero--reverse::after {
  right: auto;
  left: -3%;
}
/* Importance controls height independently from visual family. Only the main
   audience and service gateways earn a full viewport; reference and task pages
   should reveal the beginning of their useful content sooner. Content is
   always allowed to make a hero taller than these minimums. */
.pagehero--major {
  /* decision 113: the header is above the hero, so its height comes off the first screen. */
  min-height: calc(100vh - var(--utilitybar-h, 3rem) - var(--header-h));
  min-height: calc(100svh - var(--utilitybar-h, 3rem) - var(--header-h));
}
/* Shared photographic gateways reveal the following content sooner, while
   longer copy remains free to increase the height. */
.pagehero.pagehero--panorama { min-height: calc(clamp(640px, 80svh, 820px) - var(--header-h)); } /* decision 113: header no longer inside */
/* decision 113: every minimum below used to include the header, which sat inside the hero;
   subtracting it keeps each hero the size Ed approved on screen. */
.pagehero--standard { min-height: calc(clamp(620px, 74svh, 760px) - var(--header-h)); }
.pagehero--compact  { min-height: calc(clamp(500px, 58svh, 610px) - var(--header-h)); }
.pagehero--banner.pagehero--major {
  min-height: min(calc(760px - var(--header-h)), calc(100svh - var(--utilitybar-h, 3rem) - var(--header-h)));
}
.pagehero--minimal.pagehero--compact { min-height: calc(430px - var(--header-h)); }

.site-header--overlay ~ main > .pagehero.pagehero--compact:first-child {
  padding-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
.pagehero--compact h1 {
  font-size: clamp(2.25rem, 1.85rem + 1.75vw, 3.45rem);
}
.pagehero--compact .pagehero__lede { font-size: var(--step-0); }
.pagehero--compact .pagehero__ctas { margin-top: var(--sp-5); }

/* Availability groups remain specific to the EN/ES peptide heroes. Layout,
   typography and photo feathering belong to the shared split family above. */
.pagehero--split.pagehero--notice .disclosure {
  display: block;
  max-width: 680px;
  margin-top: var(--sp-6);
  padding: var(--sp-5) 0 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.24);
  border-radius: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
  opacity: 1;
  font-size: var(--step-0);
  line-height: 1.5;
}
.peptide-availability__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}
.peptide-availability__label {
  display: block;
  margin-bottom: var(--sp-2);
}
.peptide-availability .peptide-availability__note { margin-top: var(--sp-5); }

/* Full-bleed photographic heroes. The text still follows the shared content
   container, but the image and its overlay meet both viewport edges and the
   next section without an outer frame or rounded corners. */
.pagehero--framed {
  background-color: #fff;
  background-image: none;
}
.pagehero--framed::before,
.pagehero--framed::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 0;
  pointer-events: none;
}
.pagehero--framed::before {
  z-index: 0;
  border: 0;
  background-image: var(--hero-image, url('/assets/img/compounding-science.jpg'));
  background-position: var(--hero-position, center);
  background-size: cover;
  box-shadow: none;
}
.pagehero--framed::after {
  z-index: 0;
  background: rgba(1, 43, 54, 0.54);
}
.pagehero--panorama.pagehero--framed::after {
  background: linear-gradient(90deg, rgba(1,43,54,.94) 0%, rgba(1,43,54,.88) 35%, rgba(1,43,54,.64) 65%, rgba(1,43,54,.3) 100%);
}
.pagehero--panorama.pagehero--framed.pagehero--reverse::after {
  background: linear-gradient(270deg, rgba(1,43,54,.94) 0%, rgba(1,43,54,.88) 35%, rgba(1,43,54,.64) 65%, rgba(1,43,54,.3) 100%);
}
.pagehero--panorama.pagehero--framed.pagehero--reverse::before { background-position: var(--hero-position, left center); }
.pagehero--card.pagehero--framed::after { background: rgba(1, 43, 54, 0.4); }

@media (min-width: 701px) {
  .pagehero--card.pagehero--framed > .container {
    width: min(740px, calc(100% - var(--gutter) - var(--gutter) - var(--sp-6) - var(--sp-6)));
    margin-left: calc(var(--gutter) + var(--sp-6));
  }
  .pagehero--card.pagehero--framed.pagehero--reverse > .container {
    margin-right: calc(var(--gutter) + var(--sp-6));
    margin-left: auto;
  }
}

/* Below 980px the split hero drops its photograph (Ed, 2026-10-15, decision 111:
   the strip above the copy cropped every subject under the header and he did
   not like it on phones or iPads). The copy sits on the deep-teal band with
   the mark as texture; the page's body photos carry the imagery. */
@media (max-width: 980px) {
  .site-header--overlay ~ main > .pagehero.pagehero--split:first-child {
    min-height: auto;
    align-content: start;
    padding-top: var(--sp-7);
    padding-bottom: var(--sp-7);
  }
  .pagehero--split::before,
  .pagehero--split.pagehero--reverse::before { display: none; }
  .pagehero--split::after,
  .pagehero--split.pagehero--reverse::after {
    right: -10%;
    bottom: -16%;
    left: auto;
    width: min(70vw, 340px);
  }
  .pagehero--split > .container > *,
  .pagehero--split.pagehero--reverse > .container > * {
    width: 100%;
    margin-left: 0;
  }
  .pagehero--split > .container,
  .pagehero--split.pagehero--reverse > .container {
    display: block;
  }

}

@media (max-width: 600px) {
  .pagehero--split .pagehero__ctas { gap: var(--sp-3); }
  .pagehero--split .pagehero__ctas > .btn { width: 100%; }
  .peptide-availability__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
}

@media (max-width: 900px) {
  .pagehero--banner > .container,
  .pagehero--banner.pagehero--reverse > .container,
  .pagehero--minimal > .container,
  .pagehero--minimal.pagehero--reverse > .container {
    display: block;
  }
  .pagehero--banner .pagehero__lede,
  .pagehero--banner.pagehero--reverse .pagehero__lede,
  .pagehero--minimal .pagehero__lede,
  .pagehero--minimal.pagehero--reverse .pagehero__lede {
    margin-top: var(--sp-5);
  }
  .pagehero--banner.pagehero--major { min-height: 650px; }

  .site-header--overlay ~ main > .pagehero.pagehero--action:first-child {
    padding-bottom: 0;
  }
  .pagehero--action::before { display: none; }
  .pagehero--action::after,
  .pagehero--action.pagehero--reverse::after {
    background-color: #eef6f5;
    background-image:
      linear-gradient(var(--ink-deep), var(--ink-deep)),
      linear-gradient(#eef6f5, #eef6f5);
    transform: none;
  }
  .pagehero--action > .container,
  .pagehero--action.pagehero--reverse > .container {
    display: block;
  }
  .pagehero--action .pagehero__lede,
  .pagehero--action.pagehero--reverse .pagehero__lede {
    margin-top: var(--sp-4);
  }
  .pagehero--action .pagehero__actionbox,
  .pagehero--action.pagehero--reverse .pagehero__actionbox {
    margin-top: var(--sp-6);
    margin-inline: calc(var(--gutter) * -1);
    padding: clamp(2rem, 1.4rem + 3vw, 3rem) var(--gutter) clamp(2.5rem, 2rem + 2vw, 3.25rem);
    border-right: 0;
    border-bottom: 0;
    box-shadow: none;
  }

  .pagehero--minimal,
  .pagehero--minimal.pagehero--compact {
    min-height: auto;
  }
}

@media (max-width: 1100px) {
  /* Tablet copy reaches farther across a photo, so its contrast veil is even.
     This never replaces the ::before photograph or affects framed-card heroes. */
  .pagehero--panorama.pagehero--framed::after,
  .pagehero--panorama.pagehero--framed.pagehero--reverse::after { background: rgba(1,43,54,.82); }
}

@media (max-width: 700px) {
  .pagehero.pagehero--panorama { min-height: auto; }
  .pagehero--panorama {
    padding-bottom: clamp(3rem, 2rem + 7vw, 4.5rem);
    background-position: center;
  }
  .pagehero--panorama .pagehero__ctas { gap: var(--sp-3); }
  .pagehero--panorama .pagehero__ctas > :is(.btn, .cta-pair) { width: 100%; }
  .pagehero--card h1,
  .pagehero--editorial h1,
  .pagehero--banner h1,
  .pagehero--action h1,
  .pagehero--minimal h1 {
    max-width: 18ch;
    font-size: clamp(2.25rem, 1.8rem + 2.5vw, 2.75rem);
  }
  .pagehero--card > .container,
  .pagehero--card.pagehero--reverse > .container {
    width: calc(100% - var(--gutter) - var(--gutter));
    margin-right: var(--gutter);
    margin-left: var(--gutter);
  }
  .pagehero--editorial::before,
  .pagehero--editorial.pagehero--reverse::before {
    right: -15%;
    bottom: -18%;
    left: auto;
    width: 88vw;
  }
  .pagehero--editorial::after,
  .pagehero--editorial.pagehero--reverse::after {
    top: calc(var(--header-h) + 3rem);
    right: -22%;
    left: auto;
    width: 76vw;
  }
  .pagehero--minimal::after,
  .pagehero--minimal.pagehero--reverse::after {
    right: -18%;
    bottom: -32%;
    left: auto;
    width: 88vw;
  }
}

/* The compounding gateway's extra prescription route is content-specific;
   photographic hero sizing and contrast are shared by the whole family above. */
.compounding-hero__prescription {
  margin: var(--sp-5) 0 0;
  font-size: var(--step-0);
}
.compounding-hero__prescription a {
  display: inline-block;
  color: #fff;
  text-underline-offset: .25em;
  padding-block: var(--sp-1);
}
.compounding-hero__prescription a:hover { text-decoration-thickness: 2px; }
/* The document already reserves the sticky header via scroll-padding-top. */
#compounding-categories { scroll-margin-top: var(--sp-2); }

/* Photo-led compounding bodies. Shared by the gateway and its care categories;
   no hero, approved peptide body, or other main-section template is changed. */
.tpl-clinical > .band.care-section,
.tpl-clinical > .band.care-next { background: #fff; }
.tpl-clinical > .band.care-section--tint { background: var(--tint); }
/* Continue the preceding surface behind related actions, without a white seam. */
.tpl-clinical > .band.care-section--tint + .band.care-next { background: var(--tint); }
.tpl-clinical > .band.band--tint + .band.care-next { background: var(--tint-deep); }
.care-section__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: end;
  gap: var(--sp-6) clamp(2rem, 4vw, 5rem);
  margin-bottom: var(--sp-7);
}
.care-section__intro > p { margin: 0; color: var(--ink-70); font-size: var(--step-1); }
.care-section__intro h2 { max-width: 26ch; margin-bottom: 0; }
.care-section__intro > :only-child { grid-column: 1 / -1; max-width: 32ch; }
.care-feature {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 4.5vw, 5rem);
}
.care-feature > *, .care-section__intro > *, .care-next__layout > * { min-width: 0; }
.care-feature--reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.care-feature--reverse .care-feature__media { order: 2; }
.care-feature__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #fff;
}
.care-feature__media > img {
  display: block;
  width: 100%;
  height: clamp(340px, 32vw, 540px);
  object-fit: cover;
}
.care-feature__media--contain > img { object-fit: contain; padding: 0; }
.care-feature__media > figcaption {
  padding: var(--sp-3) var(--sp-4);
  color: var(--ink-70);
  font-size: var(--step--1);
  line-height: 1.5;
}
.care-feature__content h2 { max-width: 25ch; }
.care-feature__content > p { color: var(--ink-70); }
.care-feature__content > :last-child { margin-bottom: 0; }
.care-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0;
  max-width: none;
}
/* Ed 2026-09-28: an odd last card spans both columns instead of sitting beside an empty slot
   (Weight Management showed Liraglutide and B12 stranded). Three-column lists are untouched. */
.care-list:not(.care-list--three):not(.care-list--single) > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.care-list--single { grid-template-columns: 1fr; }
.care-list--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.care-list > li {
  min-width: 0;
  margin: 0;
  padding: clamp(1.25rem, 2vw, 2rem);
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.care-section--tint .care-list > li { background: #fff; }
.care-list > li > strong { display: block; margin-bottom: var(--sp-2); font-size: var(--step-1); }
.care-list h3 { font-size: var(--step-2); }
.care-list p { color: var(--ink-70); }
.care-list > li > :last-child { margin-bottom: 0; }
.care-disclosure {
  max-width: 90ch;
  margin: var(--sp-5) 0 0;
  color: var(--ink-70);
  font-size: var(--step-0);
  opacity: 1;
}
/* Keep the wellness-list context open on the section surface, above its options.
   Scoped to this EN/ES note; other disclosures retain their existing layout. */
.wellness-guidance {
  display: grid;
  grid-template-columns: minmax(180px, .6fr) minmax(0, 2fr);
  align-items: start;
  gap: var(--sp-3) clamp(1.5rem, 3vw, 3rem);
  margin-block: var(--sp-5) var(--sp-6);
}
.wellness-guidance h3 {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.4;
}
.wellness-guidance .care-disclosure { margin: 0; max-width: 90ch; }
@media (max-width: 700px) {
  .wellness-guidance { grid-template-columns: 1fr; }
}
.care-note {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--radius);
  background: var(--green-soft);
  color: var(--ink);
}
.care-note > :last-child { margin-bottom: 0; }
/* Weight Management: an open tablet-options row and readable safety columns.
   Keep .disclosure for the existing motion/visibility safeguards. */
.weight-tablet-option,
.disclosure.weight-guidance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--sp-4) clamp(2rem, 4vw, 4rem);
}
.weight-tablet-option { margin-top: var(--sp-7); }
.weight-tablet-option h3 { margin: 0; }
.weight-tablet-option p { margin: 0; max-width: 68ch; color: var(--ink-70); }
.disclosure.weight-guidance {
  max-width: none;
  margin-top: var(--sp-7);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-70);
}
.weight-guidance__column { min-width: 0; }
.weight-guidance__column h3 { font-size: var(--step-1); margin-bottom: var(--sp-3); }
.weight-guidance__column p { max-width: 76ch; }
@media (max-width: 900px) {
  .weight-tablet-option,
  .disclosure.weight-guidance { grid-template-columns: 1fr; }
  .disclosure.weight-guidance { gap: var(--sp-6); }
}
.care-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
/* Decision 87 (Shea, 09/17): quieter disclaimers, a photo-led tablet note on
   Weight Management, the wellness descriptions note under the products, and
   a message link in the compounding hub's contact card. Every disclaimer
   stays fully opaque and visible; only size and chrome change. */
.pagehero .disclosure.disclosure--quiet { background: none; border: 0; box-shadow: none; padding: 0; margin-top: var(--sp-4); max-width: 62ch; color: #fff; font-size: var(--step--1); opacity: 1; }
.pagehero .disclosure.disclosure--quiet p { color: #fff; font-size: var(--step--1); }
.care-disclosure--small { font-size: var(--step--1); }
.care-feature__media .care-feature__caption { margin: var(--sp-2) 0 0; max-width: none; }
.wellness-guidance--after { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.wellness-guidance--after h3 { font-size: var(--step--1); }
.weight-fineprint { padding-block: var(--sp-6) var(--sp-7); }
.weight-fineprint__title { font-size: var(--step-1); margin-bottom: var(--sp-3); }
.disclosure.weight-guidance--small, .disclosure.weight-guidance--small p { font-size: var(--step--1); }
.weight-guidance--small .weight-guidance__column h3 { font-size: var(--step-0); margin-bottom: var(--sp-2); }
.weight-tablet-option--feature { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sp-6); align-items: center; margin-top: var(--sp-7); padding: clamp(1.5rem, 2.4vw, 2.5rem); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.weight-tablet-option--feature > img { display: block; width: 100%; height: clamp(220px, 24vw, 320px); object-fit: cover; border-radius: var(--radius); }
.weight-tablet-option--feature h3 { font-size: var(--step-2); margin: 0 0 var(--sp-3); }
.weight-tablet-option__lead { max-width: 40ch; margin: 0; color: var(--ink); font-size: var(--step-1); }
.weight-tablet-option__link { font-weight: 700; font-size: var(--step-2); }
.care-contact__message { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.care-note--bottom { margin-top: var(--sp-5); }
@media (max-width: 800px) { .weight-tablet-option--feature { grid-template-columns: 1fr; } }
.care-next { padding-block: var(--sp-8) var(--sp-8); }
.care-next__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  width: calc(100% - var(--gutter) - var(--gutter));
  max-width: calc(var(--container-max) - var(--gutter) - var(--gutter));
  padding: clamp(1.5rem, 3.5vw, 4rem);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(115deg, #edf5f2, var(--tint));
}
.care-next__main h2 { max-width: 28ch; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.care-next__main h3 { margin-top: var(--sp-5); font-size: var(--step-1); }
.care-next__main p { color: var(--ink-70); }
.care-next__main > :last-child { margin-bottom: 0; }
.care-next__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.care-next__actions > .btn { width: 100%; }
.care-next__actions p { margin: 0; }
.care-next__actions > p { text-align: center; }
.care-next__actions .care-contact { margin-top: var(--sp-3); text-align: center; }
.care-next__actions a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; }
/* Short next steps read as one invitation, without a detached action column. */
.care-next--compact .care-next__layout { grid-template-columns: 1fr; gap: var(--sp-5); text-align: center; }
.care-next--compact .care-next__main { width: 100%; max-width: 720px; margin-inline: auto; }
.care-next--compact .care-next__main h2,
.care-next--compact .care-next__main p { margin-inline: auto; }
.care-next--compact .care-next__actions { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
.care-next--compact .care-next__actions > .btn { width: auto; }
.care-next--compact .care-next__actions > p { flex-basis: 100%; max-width: none; }
.care-related { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5); margin-top: var(--sp-7); }
.care-related p { margin-bottom: 0; color: var(--ink-70); }
.band.care-related { margin-top: 0; padding-bottom: 0; }
.care-section .link-arrow, .care-next .link-arrow { width: fit-content; border-bottom: 0; min-height: 44px; }
.care-checks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
  max-width: none;
  list-style: none;
  counter-reset: care-check;
  padding: 0;
  margin: var(--sp-7) 0 0;
}
.care-checks > li { counter-increment: care-check; min-width: 0; margin: 0; }
.care-checks > li::before { content: "0" counter(care-check); display: block; margin-bottom: var(--sp-4); color: var(--interactive); font-size: var(--step-2); font-weight: 600; }
.care-checks strong { display: block; margin-bottom: var(--sp-3); font-size: var(--step-1); }
.care-checks span { color: var(--ink-70); }
.care-contact { margin-top: var(--sp-6); color: var(--ink-70); }
.care-contact strong { display: block; color: var(--ink); }
.care-contact a { display: inline-flex; align-items: center; min-height: 44px; }
.compounding-overview__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7); margin-top: var(--sp-7); }
.compounding-overview__details h3 { font-size: var(--step-2); }
.compounding-overview__details p { color: var(--ink-70); }
.compounding-overview__link { display: inline-flex; align-items: center; min-height: 44px; }
.compounding-overview__timing { font-size: var(--step-0); }
.compounding-overview__timing strong { display: block; margin-bottom: var(--sp-2); }

/* A dedicated clinical process, without altering the homepage step strip.
   The two services remain distinct, and its consolidated notice is never hidden. */
.care-process__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: end;
  gap: var(--sp-7);
  margin-bottom: var(--sp-6);
}
.care-process__intro h2 { max-width: 32ch; margin-bottom: 0; }
.care-process__intro > p { margin-bottom: 0; max-width: 48ch; color: var(--ink-70); font-size: var(--step-1); }
.care-process__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.care-process__step {
  min-width: 0;
  margin: 0;
  padding: clamp(1.5rem, 2.2vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}
.care-process__step-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.care-process__number { font-family: var(--font-display); font-size: 2.75rem; font-weight: 600; line-height: 1; color: #447a3b; }
.care-process__step-meta > span:last-child { max-width: 17ch; color: var(--ink-70); font-size: var(--step--1); text-align: right; }
.care-process__step h3 { font-size: var(--step-1); line-height: 1.3; margin-bottom: var(--sp-3); }
.care-process__step p { margin-bottom: 0; color: var(--ink-70); font-size: var(--step-0); }
.care-process__notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-5); margin-top: var(--sp-6); opacity: 1; }
.care-process__notice > strong { color: var(--ink); font-size: var(--step-0); }
.care-process__notice > p { margin: 0; max-width: 110ch; color: var(--ink-70); font-size: var(--step-0); }
@media (max-width: 1100px) {
  .care-feature { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sp-6); }
  .care-feature--reverse { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .care-list:not(.care-list--three) { grid-template-columns: 1fr; }
  .care-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .care-process__intro { grid-template-columns: 1fr; gap: var(--sp-5); }
  .care-process__intro > p { max-width: 70ch; }
}
@media (max-width: 800px) {
  .care-feature, .care-feature--reverse, .care-section__intro, .care-next__layout { grid-template-columns: 1fr; }
  .care-feature--reverse .care-feature__media { order: 0; }
  .care-feature__media > img { height: clamp(260px, 55vw, 440px); }
  .care-feature__media--contain > img { height: 340px; }
  .care-section__intro { align-items: start; gap: var(--sp-5); margin-bottom: var(--sp-6); }
  .care-list--three { grid-template-columns: 1fr; }
  .compounding-overview__details { gap: var(--sp-6); }
  .care-process__steps { grid-template-columns: 1fr; gap: var(--sp-4); }
  .care-process__step-meta { margin-bottom: var(--sp-5); }
  .care-process__notice { grid-template-columns: 1fr; gap: var(--sp-2); }
}
@media (max-width: 600px) {
  .care-checks, .compounding-overview__details { grid-template-columns: 1fr; }
  .care-actions > .btn, .care-next__actions, .care-next__actions > .btn { width: 100%; }
  .care-next__layout { gap: var(--sp-5); }
  .care-next { padding-block: var(--sp-7) var(--sp-7); }
  .care-next--compact .care-next__actions { flex-direction: column; align-items: stretch; }
  .care-next--compact .care-next__actions > .btn { width: 100%; }
  .care-note { padding: var(--sp-4); }
}

/* Telehealth overview only. Explicit surfaces avoid positional journey styles. */
#main.tpl-journey > .telehealth-overview {
  background: #fff;
  color: var(--ink);
  padding-block: var(--band-y);
}
#main.tpl-journey > .telehealth-overview h2,
#main.tpl-journey > .telehealth-overview h3 { color: var(--ink); }
#main.tpl-journey > .telehealth-overview p { color: var(--ink-70); }
.telehealth-overview__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--sp-6) clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-bottom: var(--sp-7);
}
.telehealth-overview__intro h2 { max-width: 27ch; margin: 0; }
.telehealth-overview__intro > p { max-width: 58ch; margin: 0; font-size: var(--step-1); }
.telehealth-journey__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.telehealth-journey__steps > li {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}
.telehealth-journey__photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--tint); }
.telehealth-journey__photo--delivery { object-position: 50% 35%; }
.telehealth-journey__copy { padding: clamp(1.5rem, 2vw, 2rem); }
.telehealth-journey__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); min-height: 48px; margin-bottom: var(--sp-4); }
.telehealth-journey__meta > :last-child { max-width: 19ch; color: var(--ink-70); font-size: var(--step--1); text-align: right; }
.telehealth-journey__number { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--ink); line-height: 1; }
.telehealth-journey__steps h3 { font-size: var(--step-1); }
.telehealth-journey__steps p { margin-bottom: 0; }
.telehealth-journey__note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-6); font-size: var(--step--1); }
.telehealth-journey__note p { max-width: none; margin: 0; }
.telehealth-journey__note p + p { margin-top: var(--sp-2); }
.telehealth-overview__detail { margin: var(--sp-4) 0 0; }
.telehealth-overview__detail .link-arrow { display: inline-flex; align-items: center; gap: var(--sp-2); width: fit-content; min-height: 44px; border: 0; }
#main.tpl-journey > .telehealth-categories { background: var(--tint); }
.telehealth-categories__action { max-width: none; margin: var(--sp-7) 0 0; text-align: center; }
.telehealth-support__layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.telehealth-support__layout > * { min-width: 0; }
.telehealth-support__photo { margin: 0; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4 / 5; background: var(--tint); }
.telehealth-support__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.telehealth-support__copy h2 { max-width: 24ch; }
.telehealth-support__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-5); }
.telehealth-support__links a { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); min-width: 0; min-height: 72px; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--tint); text-decoration: none; font-weight: 600; }
.telehealth-support__links a:hover { border-color: var(--ink-70); background: var(--tint-deep); }
.telehealth-support__links .icon { flex-shrink: 0; }
.telehealth-support__contact { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
.telehealth-support__contact h3 { font-size: var(--step-1); }
.telehealth-support__contact p { margin: 0; }
.telehealth-support__contact > .btn { margin-top: var(--sp-4); }
.telehealth-support__contact a.telehealth-support__phone[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--sp-2); font-weight: 700; }
.telehealth-support__utility { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); margin-top: var(--sp-3); }
.telehealth-support__utility a { display: inline-flex; align-items: center; min-height: 44px; }
#main.tpl-journey > .telehealth-ready { background: var(--ink); color: #fff; text-align: center; }
#main.tpl-journey > .telehealth-ready h2 { max-width: 32ch; margin-inline: auto; color: #fff; }
#main.tpl-journey > .telehealth-ready p { max-width: 72ch; margin-inline: auto; color: rgba(255,255,255,.88); }
#main.tpl-journey > .telehealth-ready .eyebrow { color: #a8e0e2; }
.telehealth-ready > .container > .btn { margin-top: var(--sp-3); }
.telehealth-ready p.telehealth-ready__note { margin-top: var(--sp-5); margin-bottom: 0; font-size: var(--step--1); }
.telehealth-ready .telehealth-ready__language a { display: inline-flex; align-items: center; min-height: 44px; color: #a8e0e2; }
.telehealth-ready a:focus-visible { outline-color: #fff; }
@media (max-width: 1000px) {
  .telehealth-overview__intro { grid-template-columns: 1fr; }
  .telehealth-support__layout { grid-template-columns: 1fr; }
  .telehealth-support__photo { aspect-ratio: 16 / 9; max-height: 500px; }
  .telehealth-support__photo img { object-position: 50% 30%; }
}
@media (max-width: 800px) {
  .telehealth-journey__steps { grid-template-columns: 1fr; }
  .telehealth-journey__note { grid-template-columns: 1fr; }
  .telehealth-journey__meta { margin-bottom: var(--sp-4); }
}
@media (max-width: 600px) {
  .telehealth-support__links { grid-template-columns: 1fr; }
  .telehealth-support__links a { min-height: 60px; }
  .telehealth-support__photo { aspect-ratio: 4 / 3; }
  .telehealth-ready .btn, .telehealth-categories__action .btn { width: 100%; }
}

/* Only the two TNC handoffs. Keep the thank-you sheets and other timelines intact. */
#main.tpl-handoff > .tnc-handoff,
#main.tpl-handoff > .tnc-process { display: block; min-height: 0; padding-block: var(--band-y); color: var(--ink); }
#main.tpl-handoff > .tnc-handoff {
  padding-top: var(--band-y); /* decision 113: the header no longer sits on this band */
  background-color: var(--tint);
}
#main.tpl-handoff > .tnc-process { background: #fff; }
.tnc-handoff__layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: stretch; }
.tnc-handoff__copy { min-width: 0; }
.tnc-handoff .cobrand { justify-content: flex-start; gap: var(--sp-5); margin: 0 0 var(--sp-6); padding: 0; border: 0; background: transparent; }
.tnc-handoff .cobrand__peak { --lockup-w: 170px; }
.tnc-handoff .cobrand__partner-logo { width: 190px; }
.tnc-handoff h1 { max-width: 25ch; margin-bottom: var(--sp-5); font-size: clamp(2.25rem, 3.3vw, 3.5rem); line-height: 1.12; }
.tnc-handoff .handoff__lede { margin: 0; max-width: 58ch; font-size: var(--step-1); }
.tnc-handoff__notice { margin-top: var(--sp-5); color: var(--ink); }
.tnc-handoff__notice p { max-width: 60ch; margin: 0; }
.tnc-handoff__notice p + p { margin-top: var(--sp-2); }
.tnc-handoff__continue { margin-top: var(--sp-5); }
.tnc-handoff__destination { margin: var(--sp-2) 0 0; font-size: var(--step--1); color: var(--ink-70); }
.tnc-handoff__language { max-width: 66ch; margin-top: var(--sp-5); margin-bottom: 0; color: var(--ink); }
.tnc-handoff__language a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; }
.tnc-handoff__photo { position: relative; margin: 0; min-width: 0; min-height: 480px; overflow: hidden; border-radius: var(--radius-lg); background: var(--tint-deep); }
.tnc-handoff__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
/* The four steps as cards, in the language of the care-process cards on
   Weight Management (decision 63): number, role, title, text. Three belong
   to the clinic and one to the pharmacy, and that split is the whole point
   of this page, so it is drawn twice: lane headers above the row, and a
   role label inside every card so it survives when the lanes are hidden.
   (A two-panel redraw was tried and reverted on 2026-10-15, decision 107;
   the tall pharmacy card is handled by the Read more clamp instead.) */
.tnc-process__intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: var(--sp-4) var(--sp-7); margin-bottom: var(--sp-6); }
.tnc-process__intro .eyebrow { grid-column: 1 / -1; }
.tnc-process__intro h2 { max-width: 14ch; margin-bottom: 0; }
.tnc-process__intro p { margin: 0; max-width: 46ch; color: var(--ink-70); font-size: var(--step-1); }
.tnc-process__lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); margin-bottom: var(--sp-4); }
.tnc-process__lane { grid-column: span 3; padding-bottom: var(--sp-2); border-bottom: 2px solid var(--ink); font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.tnc-process__lane--pharmacy { grid-column: span 1; border-bottom-color: var(--brand-green); }
.tnc-process__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); max-width: none; list-style: none; margin: 0; padding: 0; }
.tnc-process__steps > li { position: relative; min-width: 0; margin: 0; padding: clamp(1.5rem, 2.2vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.tnc-process__steps > li:last-child { background: var(--green-soft); border-color: rgba(87, 160, 92, 0.4); }
/* A short connector across each gap at the height of the number. The one
   into the pharmacy card is dashed and green: that is the handoff. */
.tnc-process__steps > li:not(:last-child)::after { content: ""; position: absolute; top: calc(clamp(1.5rem, 2.2vw, 2.25rem) + 1.2rem); right: calc(-1 * var(--sp-5) - 1px); width: calc(var(--sp-5) + 2px); border-top: 2px solid var(--line); }
.tnc-process__steps > li:nth-child(3)::after { border-top-style: dashed; border-top-color: var(--green-dk); }
.tnc-process__number { display: block; margin-bottom: var(--sp-4); color: #447a3b; font-family: var(--font-display); font-size: 2.5rem; font-weight: 600; line-height: 1; }
.tnc-process__role { display: inline-flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600; color: var(--ink-70); }
.tnc-process__role::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.tnc-process__steps > li:last-child .tnc-process__role::before { background: var(--green-dk); }
.tnc-process__steps h3 { font-size: var(--step-1); line-height: 1.3; margin-bottom: var(--sp-3); }
.tnc-process__steps p { margin: 0; color: var(--ink-70); }
.tnc-ready { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-6); margin-top: var(--sp-8); padding: clamp(1.5rem, 3vw, 3rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--tint); }
.tnc-ready > * { min-width: 0; }
.tnc-ready h3 { font-size: var(--step-2); }
.tnc-ready p { max-width: 72ch; color: var(--ink); }
.tnc-ready__notice { margin-bottom: 0; }
.tnc-ready__action { text-align: center; }
.tnc-ready__action p { margin: var(--sp-2) 0 0; font-size: var(--step--1); color: var(--ink-70); }
@media (max-width: 1000px) {
  .tnc-handoff__layout { grid-template-columns: 1fr; }
  .tnc-handoff h1 { max-width: none; }
  .tnc-handoff__photo { min-height: 0; }
  .tnc-handoff__photo img { position: static; height: auto; aspect-ratio: 16 / 9; object-position: 50% 50%; }
  .tnc-process__intro { grid-template-columns: 1fr; }
  .tnc-process__intro h2 { max-width: none; }
  .tnc-process__lanes { display: none; }
  .tnc-process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
  .tnc-process__steps > li::after { display: none; }
  .tnc-ready { grid-template-columns: 1fr; }
  .tnc-ready__action { text-align: left; }
}
@media (max-width: 600px) {
  .tnc-handoff .cobrand { flex-direction: row; gap: 10px; }
  .tnc-handoff .cobrand__peak { --lockup-w: 150px; }
  .tnc-handoff .cobrand__partner-logo { width: 150px; }
  .tnc-handoff .cobrand__caption { max-width: 22ch; font-size: .75rem; }
  .tnc-handoff__continue, .tnc-ready__action .btn { width: 100%; }
  .tnc-process__steps { grid-template-columns: 1fr; gap: var(--sp-4); }
  .tnc-process__steps > li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0 var(--sp-4); padding: var(--sp-5); }
  .tnc-process__number { grid-row: span 3; margin: 0; font-size: 2rem; }
  .tnc-process__role, .tnc-process__steps h3, .tnc-process__steps p { grid-column: 2; }
}
@media (max-width: 380px) {
  .tnc-handoff .cobrand { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .tnc-handoff .cobrand__x { display: none; }
  .tnc-handoff .cobrand__partner { align-items: flex-start; text-align: left; }
}

/* Refill/travel pages only: pharmacy support, then the unchanged contact form. */
#main.tpl-journey > .refill-options,
#main.tpl-journey > .refill-callback {
  padding-block: var(--band-y);
  color: var(--ink);
  background: #fff;
}
#main.tpl-journey > .refill-options { background: var(--tint); }
.refill-options__intro { margin-bottom: var(--sp-7); }
.refill-options__intro h2 { max-width: none; margin-bottom: 0; }
.refill-options__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.refill-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.5rem, 3vw, 3rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.refill-option__label { display: inline-block; margin-bottom: var(--sp-5); color: var(--ink); background: var(--green-soft); padding: .35rem .75rem; border-radius: 6px; font-weight: 600; font-size: var(--step--1); }
.refill-option:nth-child(2) .refill-option__label { background: var(--interactive-sf); }
.refill-option h3 { font-size: var(--step-2); max-width: none; }
.refill-option p { max-width: 58ch; color: var(--ink-70); }
.refill-option__detail { margin-top: var(--sp-4); }
.refill-option__detail h4 { margin-bottom: var(--sp-2); font: 600 var(--step-0)/var(--leading-snug) var(--font-body); }
.refill-option__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; padding-top: var(--sp-4); font-weight: 600; text-underline-offset: .25em; }
.refill-callback__layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
.refill-callback__layout > * { min-width: 0; }
.refill-callback__intro h2 { max-width: 20ch; }
.refill-callback__intro > p { max-width: 52ch; color: var(--ink-70); }
.refill-callback__contact { margin-block: var(--sp-5); }
.refill-callback .refill-callback__contact a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--step-2); font-weight: 600; text-underline-offset: .2em; }
.refill-callback__contact p { color: var(--ink-70); font-size: var(--step--1); margin: var(--sp-2) 0 0; }
.refill-callback__photo { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; }
.refill-callback__form { background: var(--tint); border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.5rem, 3vw, 3rem); }
.refill-callback__form h3 { margin-bottom: var(--sp-5); font-size: var(--step-2); }
.refill-callback__form .reqform { max-width: none; }
.refill-callback__form .reqform__alt a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; }
.refill-callback__form .reqform > .btn { width: 100%; }
#request-callback { scroll-margin-top: var(--sp-5); }
@media (max-width: 1000px) {
  .refill-options__grid, .refill-callback__layout { grid-template-columns: minmax(0, 1fr); }
  .refill-callback__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--sp-6); }
  .refill-callback__intro > :not(img) { grid-column: 1; }
  .refill-callback__intro .refill-callback__photo { grid-column: 2; grid-row: 1 / 5; align-self: center; }
}
@media (max-width: 600px) {
  .refill-callback__intro { display: block; }
  .refill-options__intro { margin-bottom: var(--sp-6); }
}

/* Patient overview only. Keep the shared patient forms and hero families intact. */
.patient-hero.pagehero--minimal > .container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(2rem, 6vw, 6rem); align-items: center; }
.patient-hero.pagehero--minimal .pagehero__top { grid-row: 1 / 4; }
.patient-hero.pagehero--minimal h1 { max-width: none; }
.patient-hero__notice { grid-column: 2; grid-row: 2; margin: var(--sp-3) 0 0; max-width: 60ch; font-size: var(--step--1); color: var(--ink); }
.patient-hero.pagehero--minimal .pagehero__ctas { grid-row: 3; }
#main.tpl-patient > .patient-paths,
#main.tpl-patient > .patient-tasks,
#main.tpl-patient > .patient-support { padding-block: var(--band-y); color: var(--ink); background: #fff; }
.patient-section-heading { margin-bottom: var(--sp-7); }
.patient-section-heading h2,
.patient-section-heading h1 { margin-bottom: 0; max-width: none; font-size: var(--step-4); }
.patient-paths--branded { position: relative; isolation: isolate; }
.patient-paths--branded::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto auto;
  width: min(36vw, 480px); height: min(45vw, 600px); opacity: .045;
  background: url('/assets/brand/peak-logo-icon.svg') center / contain no-repeat;
  pointer-events: none;
}
.patient-paths__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.patient-path { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--tint); }
.patient-path__photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.patient-path__copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: clamp(1.5rem, 3vw, 3rem); }
.patient-path__copy .eyebrow { min-height: 2.6em; margin-bottom: var(--sp-3); }
.patient-path__copy h2, .patient-path__copy h3 { font-size: var(--step-3); }
.patient-path__copy p { max-width: 60ch; color: var(--ink-70); }
.patient-path__copy .patient-path__notice { color: var(--ink); font-size: var(--step--1); }
.patient-path__copy .btn { margin-top: auto; }
.patient-paths__choice { max-width: none; margin: var(--sp-5) 0 0; color: var(--ink); text-align: center; font-size: var(--step-0); }
#main.tpl-patient > .patient-tasks { background: var(--tint); }
.patient-tasks__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); list-style: none; max-width: none; padding: 0; margin: 0; }
.patient-tasks__grid li { min-width: 0; margin: 0; }
.patient-tasks__grid a { display: block; height: 100%; padding: var(--sp-6); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: border-color .18s, background-color .18s; }
.patient-tasks__grid h3 { font-size: var(--step-1); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .25em; }
.patient-tasks__grid p { margin: 0; color: var(--ink-70); font-weight: 400; }
.patient-tasks__grid a:hover { border-color: var(--interactive); background: var(--interactive-sf); }
.patient-tasks__grid a:hover h3 { text-decoration-color: currentColor; }
#main.tpl-patient > .patient-support { background: var(--ink); color: #fff; }
.patient-support__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.patient-support__layout > * { min-width: 0; }
.patient-support h2 { max-width: 28ch; color: #fff; }
.patient-support .eyebrow { color: #a8e0e2; }
.patient-support p { color: #d6e7eb; max-width: 64ch; }
.patient-support__address { margin-top: var(--sp-5); margin-bottom: 0; font-size: var(--step--1); }
.patient-support__actions { display: flex; flex-direction: column; gap: var(--sp-3); }
.patient-support__actions .btn { width: 100%; }
.patient-support__actions .btn--secondary { color: #fff; border-color: #a8c9d0; }
.patient-support__actions .btn--secondary:hover { background: #fff; border-color: #fff; color: var(--ink); }
.patient-support__actions p { margin: var(--sp-2) 0 0; text-align: center; font-size: var(--step--1); }
.patient-support a:focus-visible { outline-color: #fff; }
@media (max-width: 1000px) {
  .patient-hero.pagehero--minimal > .container { display: block; }
  .patient-hero.pagehero--minimal .pagehero__lede { margin-top: var(--sp-5); }
  .patient-tasks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .patient-support__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
}
@media (max-width: 700px) {
  .patient-paths__grid, .patient-support__layout { grid-template-columns: minmax(0, 1fr); }
  .patient-path__copy .eyebrow { min-height: 0; }
  .patient-hero .pagehero__ctas .btn, .patient-path__copy .btn { width: 100%; }
  .patient-section-heading { margin-bottom: var(--sp-6); }
}
@media (max-width: 480px) {
  .patient-tasks__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .patient-tasks__grid a { padding: var(--sp-5); }
}

/* Prescription, transfer and refill tasks only, including their two ES pages.
   The shared hero and contact forms keep their existing behavior. */
.rx-hero__utility { margin: var(--sp-3) 0 0; }
.rx-hero__utility a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; }
#main.tpl-patient > .rx-guide,
#main.tpl-patient > .rx-callback { padding-block: var(--band-y); background: #fff; color: var(--ink); }
.rx-guide__intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; gap: var(--sp-6) clamp(2rem, 5vw, 5.5rem); margin-bottom: var(--sp-7); }
.rx-guide__intro h2 { max-width: none; margin-bottom: 0; }
.rx-guide__intro > p { max-width: 52ch; margin: 0; font-size: var(--step-1); color: var(--ink-70); }
.rx-guide__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); max-width: none; margin: 0; padding: 0; list-style: none; }
.rx-guide__cards--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rx-guide__card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; margin: 0; padding: clamp(1.5rem, 2.4vw, 2.5rem); background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.rx-guide__number { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: var(--sp-5); border-radius: var(--radius); background: var(--green-soft); color: var(--ink); font: 600 var(--step-2)/1 var(--font-display); }
.rx-guide__card:nth-child(even) .rx-guide__number { background: var(--interactive-sf); }
.rx-guide__card h3 { font-size: var(--step-2); }
.rx-guide__card p { color: var(--ink-70); }
.rx-guide__card p:last-child { margin-bottom: 0; }
.rx-text-link { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: .25em; }
.rx-guide__card > .rx-text-link { margin-top: auto; padding-top: var(--sp-3); }
.rx-guide__note { max-width: 110ch; margin: var(--sp-6) 0 0; color: var(--ink-70); }
.rx-guide__note strong { color: var(--ink); }
#main.tpl-patient > .rx-guide--tint { background: var(--tint); }
.rx-guide--tint .rx-guide__card { background: #fff; }
#main.tpl-patient > .rx-callback { background: var(--tint); }
.rx-callback__layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
.rx-callback__layout > * { min-width: 0; }
.rx-callback h2, .rx-callback h3 { color: var(--ink); }
.rx-callback__intro h2 { max-width: 24ch; }
.rx-callback__intro > p { max-width: 58ch; color: var(--ink-70); }
.rx-callback__photo { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; border-radius: var(--radius-lg); margin-top: var(--sp-6); }
.rx-callback__photo[src$='adobe-shipping-preview.jpg'] { object-position: 50% 35%; }
.rx-callback__detail { margin-top: var(--sp-5); }
.rx-callback__detail h3, .rx-callback__contact h3 { margin-bottom: var(--sp-2); font-size: var(--step-1); }
.rx-callback__detail p, .rx-callback__contact p { max-width: 60ch; color: var(--ink-70); }
.rx-callback__contact { margin-top: var(--sp-5); }
.rx-callback__contact p { margin-bottom: 0; }
.rx-callback .rx-callback__contact a[href^='tel:'] { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--step-2); }
.rx-callback__form { min-width: 0; padding: clamp(1.5rem, 3vw, 3rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.rx-callback__form > h3 { font-size: var(--step-2); margin-bottom: var(--sp-5); }
.tpl-patient .rx-callback__form .reqform { max-width: none; margin-top: 0; padding: 0; border: 0; background: transparent; }
.rx-callback__form .reqform > .btn { width: 100%; }
.rx-callback__form .reqform__alt a[href^='tel:'] { display: inline-flex; align-items: center; min-height: 44px; }
.rx-callback__form:focus-visible { outline-color: var(--focus); }
/* Decision 87: the prescription page is Shea's copy. The prescriber block is
   set larger so it balances the form beside it; the three-paragraph hero
   lede keeps its rhythm. */
.rx-hero .pagehero__lede + .pagehero__lede { margin-top: var(--sp-3); }
.rx-guide__address { color: var(--ink); }
.rx-guide__address strong { display: block; font-size: var(--step-0); color: var(--ink); }
.rx-callback__intro > p + .rx-callback__detail { margin-top: var(--sp-6); }
.rx-callback__detail p + p { margin-top: var(--sp-2); }
.rx-callback__contact h3 { font-size: var(--step-2); margin-bottom: var(--sp-3); }
.rx-callback__pharmacy { font-size: var(--step-1); line-height: 1.4; }
.rx-callback__pharmacy strong { display: block; margin-bottom: var(--sp-1); font-size: var(--step-2); color: var(--ink); }
.rx-callback__contact h4 { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--step-0); }
.rx-callback__contact ul { margin: 0 0 var(--sp-3); padding-left: 1.2em; color: var(--ink-70); }
.rx-callback__contact p + p, .rx-callback__contact ul + p { margin-top: var(--sp-2); }
.rx-callback__help { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
/* Decision 92 (Shea p.2) put a photo beside the prescriber details. Ed 2026-09-28: one
   panel, the photo filling the left column to the full height of the details, the details
   in two columns (pharmacy; e-prescribing lookup) with the notes and fax underneath. */
.rx-callback__prescriber { grid-column: 1 / -1; margin-top: var(--sp-4); padding-top: var(--sp-7); border-top: 1px solid var(--line); }
.rx-prescriber { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: stretch; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.rx-prescriber__media { min-width: 0; min-height: clamp(420px, 36vw, 640px); }
.rx-prescriber__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.rx-prescriber__body { min-width: 0; padding: clamp(1.5rem, 3vw, 3rem); }
.rx-prescriber__body > h3 { margin: 0 0 var(--sp-5); font-size: var(--step-3); }
.rx-prescriber__columns { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--sp-6); }
.rx-prescriber__group { min-width: 0; }
.rx-prescriber__group h4 { margin: 0 0 var(--sp-3); font: 600 var(--step--1)/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--interactive); }
.rx-prescriber__group p, .rx-prescriber__notes p { max-width: none; margin: 0 0 var(--sp-3); color: var(--ink-70); }
.rx-prescriber__group > :last-child, .rx-prescriber__notes > :last-child { margin-bottom: 0; }
.rx-prescriber__facts { display: grid; gap: var(--sp-2); margin: var(--sp-4) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.rx-prescriber__facts > div { display: grid; grid-template-columns: fit-content(6rem) minmax(0, 1fr); gap: var(--sp-3); align-items: baseline; }
.rx-prescriber__facts dt { font: 600 var(--step--1)/1.5 var(--font-ui); color: var(--ink-70); }
.rx-prescriber__facts dd { margin: 0; color: var(--ink); }
.rx-callback .rx-prescriber__facts a[href^='tel:'] { display: inline-flex; align-items: center; min-height: 44px; margin-block: -8px; font-size: var(--step-2); font-weight: 700; }
.rx-prescriber__lookup { margin: var(--sp-3) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rx-prescriber__lookup li { display: grid; grid-template-columns: fit-content(11rem) minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.rx-prescriber__lookup strong { font: 600 var(--step--1)/1.5 var(--font-ui); color: var(--ink-70); }
.rx-prescriber__notes { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.rx-prescriber__fax { font-size: var(--step-2); font-weight: 700; color: var(--ink); }
.rx-prescriber__fax strong { font: 600 var(--step-0)/1.5 var(--font-ui); color: var(--ink-70); }
@media (max-width: 1100px) {
  .rx-prescriber { grid-template-columns: minmax(0, 1fr); }
  .rx-prescriber__media { min-height: 0; aspect-ratio: 16 / 9; max-height: 420px; }
}
@media (max-width: 700px) {
  .rx-prescriber__columns { grid-template-columns: minmax(0, 1fr); }
}
.rx-callback__help h3 { margin-bottom: var(--sp-2); font-size: var(--step-1); }
.rx-callback__help p { max-width: 60ch; margin-bottom: var(--sp-2); color: var(--ink-70); }
.rx-guide #resurtidos { scroll-margin-top: var(--sp-5); }
@media (max-width: 1100px) {
  .rx-guide__cards--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .rx-guide__intro, .rx-callback__layout { grid-template-columns: minmax(0, 1fr); }
  .rx-guide__intro { align-items: start; gap: var(--sp-4); }
  .rx-guide__intro > p { max-width: 70ch; }
  .rx-callback__intro h2 { max-width: none; }
  .rx-callback__photo { max-height: 400px; }
}
@media (max-width: 700px) {
  .rx-guide__cards { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .rx-guide__intro { margin-bottom: var(--sp-6); }
  .rx-guide__number { margin-bottom: var(--sp-4); }
  .rx-guide__card > .rx-text-link { padding-top: 0; }
}

/* Remaining patient tasks: shipping, help and the inactive payment preview.
   Scoped here so completed patient pages and form behavior stay unchanged. */
#main.tpl-patient > .fulfillment-options,
#main.tpl-patient > .help-topics,
#main.tpl-patient > .payment-refresh,
#main.tpl-patient > .payment-review,
#main.tpl-patient > .fulfillment-support,
#main.tpl-patient > .help-provider { padding-block: var(--band-y); background: #fff; color: var(--ink); }
.fulfillment-intro, .help-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--sp-5) clamp(2rem, 5vw, 5.5rem); align-items: end; margin-bottom: var(--sp-7); }
.fulfillment-intro h2, .help-intro h2 { max-width: none; margin-bottom: 0; }
.fulfillment-intro > p, .help-intro > p { margin: 0; max-width: 60ch; color: var(--ink-70); font-size: var(--step-1); }
.fulfillment-options__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.fulfillment-option { min-width: 0; padding: clamp(1.5rem, 3vw, 3rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--tint); }
.fulfillment-option:nth-child(2) { background: var(--green-soft); }
.fulfillment-option h3 { max-width: none; font-size: var(--step-3); }
.fulfillment-option p, .fulfillment-option li { color: var(--ink-70); }
.fulfillment-option p.fulfillment-rates { color: var(--ink); font-size: var(--step-1); font-weight: 600; }
.fulfillment-option ul { padding-left: 1.2em; margin-bottom: 0; }
.fulfillment-option li + li { margin-top: var(--sp-3); }
.fulfillment-option .btn { margin-top: var(--sp-3); }
#main.tpl-patient > .fulfillment-support { background: var(--tint); }
.fulfillment-support__layout, .help-provider__layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.fulfillment-support__layout > *, .help-provider__layout > * { min-width: 0; }
.fulfillment-support__photo, .help-provider__photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.fulfillment-support__copy h2, .help-provider__copy h2 { max-width: 26ch; }
.fulfillment-support__copy > p { max-width: 58ch; color: var(--ink-70); }
.fulfillment-support__copy .fulfillment-support__note { color: var(--ink); font-weight: 600; }
.fulfillment-support__actions, .help-provider__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.help-topics__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.help-topic { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: clamp(1.5rem, 2.4vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--tint); }
.help-topic__number { display: block; margin-bottom: var(--sp-4); color: var(--interactive); font: 600 var(--step-2)/1 var(--font-display); }
.help-topic h3 { font-size: var(--step-2); }
.help-topic p { color: var(--ink-70); }
.help-topic > a { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; font-weight: 600; text-underline-offset: .25em; }
.help-topics .help-topic > a[href^='tel:'] { min-height: 44px; }
.help-topics__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--sp-6); margin-top: var(--sp-6); }
.help-topics__more > span { font-weight: 600; }
.help-topics__more a { display: inline-flex; align-items: center; min-height: 44px; }
#main.tpl-patient > .help-provider { background: var(--ink); color: #fff; }
.help-provider h2 { color: #fff; }
.help-provider .eyebrow { color: #a8e0e2; }
.help-provider__copy > p { max-width: 60ch; color: #d6e7eb; }
.help-provider__notice, .help-provider__language { font-size: var(--step--1); }
.help-provider__actions .btn--secondary { border-color: #a8c9d0; color: #fff; }
.help-provider__actions .btn--secondary:hover { border-color: #fff; color: var(--ink); background: #fff; }
.help-provider a:focus-visible { outline-color: #fff; }
#patient-help, #shipping-options, #secure-payment, #pago-seguro { scroll-margin-top: var(--sp-5); }
.payment-refresh-hero.pagehero--minimal > .container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(2rem, 5vw, 5.5rem); align-items: center; }
.payment-refresh-hero.pagehero--minimal .pagehero__top { grid-row: 1 / 4; }
.payment-refresh-hero.pagehero--minimal h1 { max-width: none; }
.payment-refresh-hero__notice { grid-column: 2; grid-row: 2; margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); }
.payment-refresh-hero__notice p { margin: var(--sp-2) 0 0; color: var(--ink-70); font-size: var(--step--1); }
.payment-refresh-hero.pagehero--minimal .pagehero__ctas { grid-row: 3; }
.payment-refresh-hero a:focus-visible { outline-color: var(--focus); }
#main.tpl-patient > .payment-refresh { background: var(--tint); }
.payment-refresh .payment-checkout__intro { padding-bottom: 0; border: 0; }
.payment-refresh .payment-checkout__intro h2 { max-width: none; }
.payment-refresh .payment-checkout__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr); gap: clamp(1.5rem, 3vw, 3rem); }
.payment-refresh .payment-form { border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; }
.payment-refresh .payment-form__heading { display: block; }
.payment-refresh .payment-form__heading > p { margin-top: var(--sp-3); max-width: 62ch; }
.payment-refresh__sidebar { min-width: 0; }
.payment-refresh__photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: var(--sp-5); }
.payment-refresh .payment-summary { position: static; padding: clamp(1.5rem, 2.5vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; color: var(--ink); box-shadow: none; }
.payment-refresh .payment-summary .eyebrow { color: var(--interactive); }
.payment-refresh .payment-summary > h2 { color: var(--ink); font-size: clamp(2rem, 3vw, 3.5rem); overflow-wrap: anywhere; }
.payment-refresh .payment-summary__list > div, .payment-refresh .payment-summary__help { border-color: var(--line); }
.payment-refresh .payment-summary__list dt, .payment-refresh .payment-summary__secure p,
.payment-refresh .payment-summary__help p, .payment-refresh .payment-summary__help > span { color: var(--ink-70); }
.payment-refresh .payment-summary__list dd, .payment-refresh .payment-summary__help h3 { color: var(--ink); }
.payment-refresh .payment-summary__secure { border: 0; border-radius: var(--radius); background: var(--green-soft); }
.payment-refresh .payment-summary__help a[href^='tel:'] { display: inline-flex; align-items: center; min-height: 44px; color: var(--interactive); }
.payment-refresh__boundary { margin-top: var(--sp-5); padding-inline: var(--sp-3); }
.payment-refresh__boundary p { margin: var(--sp-2) 0 0; color: var(--ink-70); font-size: var(--step--1); }
.payment-refresh .payment-card-slot { border-radius: var(--radius); }
.payment-refresh .payment-card-slot__status { flex-wrap: wrap; }
.payment-review { border-top: 0; }
.payment-review .band-head h2 { max-width: 32ch; }
.payment-review .payment-assurance__grid article { max-width: none; border: 0; padding-top: 0; }
.payment-review .payment-assurance__grid h3 { max-width: none; font-size: var(--step-1); }
/* Refund and cancellation policy (decision 116): Shea's wording, in her order. Open ruled
   items, never scroll-revealed, because she asks patients to read it before paying. */
/* Decision 121: the payment form carries .reqform only for initForms() validation. It keeps its own
   sectioned layout, so the request-form width cap and child spacing do not apply to it. */
.payment-form.reqform { max-width: none; margin-top: 0; padding: 0; background: #fff; } /* beats .tpl-patient .reqform by source order */
.payment-form.reqform > * + * { margin-top: 0; }
.payment-form.reqform > .reqform__alert { margin: var(--sp-5) clamp(1.5rem, 1.2rem + 1.5vw, 3rem) 0; }
/* Test-mode notice on the payment hero (decisions 120 and 121); deleted at launch with the notice. */
.payment-refresh-hero__notice--test { border-color: var(--brand-green); border-left-width: 4px; }
.payment-refresh__policy { margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-3) 0; border-top: 1px solid var(--line); }
.payment-refresh__policy p { margin: var(--sp-2) 0 0; color: var(--ink-70); font-size: var(--step--1); }
.payment-refresh__policy a { font-weight: 600; text-underline-offset: .2em; }
#main.tpl-patient > .payment-policy { padding-block: var(--band-y); background: var(--tint); color: var(--ink); }
#refund-policy, #politica-de-reembolso { scroll-margin-top: var(--sp-5); }
.payment-policy .band-head h2 { max-width: none; }
.payment-policy .band-head > p { max-width: 64ch; color: var(--ink-70); font-size: var(--step-1); }
.payment-policy__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) clamp(2rem, 5vw, 5.5rem); margin-top: var(--sp-6); }
.payment-policy__item { min-width: 0; padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.payment-policy__item h3 { max-width: none; font-size: var(--step-1); }
.payment-policy__item p { max-width: 64ch; margin-bottom: 0; color: var(--ink-70); }
.payment-policy__close { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5) clamp(2rem, 5vw, 5.5rem); align-items: end; margin-top: var(--sp-7); }
.payment-policy__contact { min-width: 0; padding: clamp(1.5rem, 2.5vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.payment-policy__contact h3 { font-size: var(--step-1); }
.payment-policy__contact p { color: var(--ink-70); }
.payment-policy__contact address { margin: 0; font-style: normal; line-height: 1.6; }
/* Scoped twice: the base rule a[href^="tel:"]:not(.btn):not(.cta-pair) is 0,3,1. */
.payment-policy .payment-policy__contact a[href^='tel:'] { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--interactive); }
.payment-policy__rights { max-width: 60ch; margin: 0; color: var(--ink-70); font-size: var(--step--1); }
@media (max-width: 1050px) {
  .payment-refresh .payment-checkout__grid { grid-template-columns: minmax(0, 1fr); }
  .payment-refresh__photo { max-height: 360px; }
}
@media (max-width: 1000px) {
  .fulfillment-intro, .help-intro, .fulfillment-support__layout, .help-provider__layout { grid-template-columns: minmax(0, 1fr); }
  .help-topics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fulfillment-support__photo, .help-provider__photo { aspect-ratio: 16 / 9; max-height: 460px; }
  .payment-refresh-hero.pagehero--minimal > .container { display: block; }
  .payment-refresh-hero.pagehero--minimal .pagehero__lede { margin-top: var(--sp-5); }
  .payment-policy__grid, .payment-policy__close { grid-template-columns: minmax(0, 1fr); }
  .payment-policy__close { margin-top: var(--sp-6); }
}
@media (max-width: 700px) {
  .fulfillment-options__grid, .help-topics__grid { grid-template-columns: minmax(0, 1fr); }
  .fulfillment-intro, .help-intro { margin-bottom: var(--sp-6); }
  .fulfillment-support__actions .btn, .help-provider__actions .btn, .payment-refresh-hero .pagehero__ctas .btn { width: 100%; }
  .help-topics__more { flex-direction: column; gap: var(--sp-2); }
}
@media (max-width: 400px) {
  .payment-refresh .payment-card-slot__preview { grid-template-columns: minmax(0, 1fr); }
  .payment-refresh .payment-card-slot__preview span + span { border-left: 0; border-top: 1px solid var(--line); }
  .payment-refresh .payment-card-slot__badge { margin-left: 0; }
}

/* Provider branch: concise task cards, readable medication references and
   source-owned photo/form sections. Existing prescribing/form behavior stays intact. */
#main.tpl-provider > .provider-section { padding-block: var(--band-y); background: #fff; color: var(--ink); }
#main.tpl-provider > .provider-section--tint { background: var(--tint); }
.provider-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--sp-5) clamp(2rem, 5vw, 5.5rem); align-items: end; margin-bottom: var(--sp-7); }
.provider-intro h2 { max-width: none; margin: 0; }
.provider-intro > p { max-width: 58ch; margin: 0; font-size: var(--step-1); color: var(--ink-70); }
.provider-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.provider-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.provider-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: clamp(1.5rem, 2.4vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--tint); }
.provider-section--tint .provider-card { background: #fff; }
.provider-card__number { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 52px; margin-bottom: var(--sp-5); border-radius: var(--radius); background: var(--green-soft); color: var(--ink); font: 600 var(--step-2)/1 var(--font-display); }
.provider-card:nth-child(even) .provider-card__number { background: var(--interactive-sf); }
.provider-card h3 { font-size: var(--step-2); max-width: none; }
.provider-card p { color: var(--ink-70); }
.provider-card p:last-child { margin-bottom: 0; }
.provider-section a.provider-link { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: 44px; font-weight: 600; text-underline-offset: .25em; overflow-wrap: anywhere; }
.provider-section a.provider-link[href^='tel:'] { min-height: 44px; }
.provider-card > .provider-link, .provider-card > .provider-actions { margin-top: auto; }
.provider-link .icon { width: 24px; height: 24px; flex-shrink: 0; }
.provider-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.provider-actions > * { max-width: 100%; }
.provider-actions + p { margin-top: var(--sp-4); }
.provider-feature__layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.provider-feature__layout > * { min-width: 0; }
.provider-feature__layout > figure { margin: 0; }
.provider-feature__photo { display: block; width: 100%; height: auto; margin: 0; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); overflow: hidden; }
figure.provider-feature__photo { aspect-ratio: auto; }
.provider-feature__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.provider-feature__copy h2 { max-width: 28ch; }
.provider-feature__copy > p { max-width: 60ch; color: var(--ink-70); }
.provider-feature__copy .service-checklist { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); max-width: none; margin: var(--sp-5) 0 0; }
.provider-feature__copy .service-checklist li { padding: 0 0 0 2rem; border: 0; }
.provider-feature__copy .service-checklist li::before { top: 0; width: 1.4rem; height: 1.4rem; border-radius: 4px; }
.provider-feature__copy .service-checklist strong { margin: 0; font-weight: 600; }
.provider-process { list-style: none; max-width: none; margin: var(--sp-6) 0 0; padding: 0; }
.provider-process li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--sp-4); margin: 0; }
.provider-process li + li { margin-top: var(--sp-5); }
.provider-process li > span { color: var(--interactive); font: 600 var(--step-1)/1.3 var(--font-display); }
.provider-process h3 { margin-bottom: var(--sp-2); font-size: var(--step-1); }
.provider-process p { margin: 0; color: var(--ink-70); }
.provider-contact-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-5); margin-top: var(--sp-8); padding: clamp(1.5rem, 3vw, 3rem); border-radius: var(--radius-lg); background: var(--green-soft); }
.provider-contact-row h3 { font-size: var(--step-2); }
.provider-contact-row p { margin: 0; color: var(--ink-70); }
.provider-contact-row > div { min-width: 0; }
.provider-contact-row > div:last-child { text-align: right; }
.provider-contact-row .num { font-size: var(--step-2); }
.provider-section .provider-notice { display: block; max-width: none; margin: var(--sp-6) 0 0; padding: 0; border: 0; background: transparent; color: var(--ink-70); font-size: var(--step--1); }
.provider-notice p { max-width: none; }
.provider-notice strong { color: var(--ink); }
.provider-utilities { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 var(--sp-6); margin-top: var(--sp-6); }
.provider-utilities > span { font-weight: 600; }
.provider-utilities a { display: inline-flex; align-items: center; min-height: 44px; }
.provider-contact-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); margin: var(--sp-6) 0; }
.provider-contact-details > div { min-width: 0; }
.provider-contact-details dt { color: var(--ink-70); font-size: var(--step--1); }
.provider-contact-details dd { margin: var(--sp-2) 0 0; color: var(--ink); }
/* Decision 92 (Shea p.9): one size for all four values, phone included. */
.provider-contact-details dd { font-size: var(--step-0); }
.provider-contact-details .provider-link { margin-block: -8px; font-size: var(--step-0); }
.provider-service-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.provider-service-links a { display: flex; align-items: center; min-height: 72px; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--tint); font-weight: 600; text-underline-offset: .25em; }
.provider-service-links a:hover { border-color: var(--interactive); background: var(--interactive-sf); }
.provider-form-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
.provider-form-layout > * { min-width: 0; }
.provider-form-intro h2 { max-width: 22ch; }
.provider-form-intro p { max-width: 56ch; color: var(--ink-70); }
.provider-form-intro > h3 { margin-top: var(--sp-6); }
.provider-form-intro .provider-feature__photo { margin-block: var(--sp-5); }
.provider-form-photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); margin-block: var(--sp-5); }
.provider-form-panel { min-width: 0; padding: clamp(1.5rem, 3vw, 3rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.provider-form-panel > h2, .provider-form-panel > h3 { font-size: var(--step-2); }
.tpl-provider .provider-form-panel .reqform { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.provider-form-panel .reqform__row > .field:only-child { grid-column: 1 / -1; }
.provider-form-panel .reqform > .btn { width: 100%; }
.provider-form-panel .reqform__alt a[href^='tel:'] { display: inline-flex; align-items: center; min-height: 44px; }
.provider-section[id], .provider-section [tabindex='-1'] { scroll-margin-top: var(--sp-5); }
.provider-caption { margin: var(--sp-3) 0 0; font-size: var(--step--1); color: var(--ink-70); }
.provider-medications { list-style: none; max-width: none; margin: var(--sp-5) 0 0; padding: 0; }
.provider-medications li { display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-4); border-bottom: 1px solid var(--line); margin: 0; }
.provider-medications strong { color: var(--ink); }
.provider-medications span { color: var(--ink-70); text-align: right; }
.provider-catalog .provider-grid { margin-top: 0; }
.provider-catalog .therapy-list { display: block; width: 100%; margin: 0 0 var(--sp-5); padding: 0; border: 0; }
.provider-catalog .therapy-list > li { display: block; min-height: 0; border: 0; margin: 0; padding: var(--sp-3) 0; }
.provider-catalog .therapy-list > li + li { border-top: 1px solid var(--line); }
.provider-catalog .therapy-list > li:nth-child(odd) { border-right: 0; }
.provider-catalog .therapy-list strong { font-size: var(--step-0); }
.provider-catalog .therapy-list > li > span { display: block; font-size: var(--step-0); }
.provider-planned__featured { padding: clamp(1.5rem, 3vw, 3rem); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--green-soft); }
.provider-planned__featured h3 { font-size: var(--step-3); }
.provider-planned__featured p:last-child { margin-bottom: 0; }
.provider-medications--planned { margin-top: 0; }
@media (max-width: 1100px) {
  .provider-grid:not(.provider-grid--two) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .provider-service-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .provider-contact-row { grid-template-columns: minmax(0, 1fr); }
  .provider-contact-row > div:last-child { text-align: left; }
}
@media (max-width: 1000px) {
  .provider-intro, .provider-feature__layout, .provider-form-layout { grid-template-columns: minmax(0, 1fr); }
  .provider-intro { align-items: start; }
  .provider-feature__photo, .provider-feature__photo img { aspect-ratio: 16 / 9; max-height: 460px; }
  .provider-feature__copy h2, .provider-form-intro h2 { max-width: none; }
}
@media (max-width: 700px) {
  .provider-grid, .provider-grid--two, .provider-grid:not(.provider-grid--two) { grid-template-columns: minmax(0, 1fr); }
  .provider-intro { margin-bottom: var(--sp-6); }
  .provider-actions .btn { width: 100%; }
  .provider-utilities { flex-direction: column; gap: var(--sp-2); }
  .provider-medications li { flex-direction: column; gap: var(--sp-1); }
  .provider-medications span { text-align: left; }
}
@media (max-width: 480px) {
  .provider-service-links, .provider-contact-details { grid-template-columns: minmax(0, 1fr); }
}

/* About, Contact, FAQ and brief Additional Services pages. New page-owned
   scopes preserve the completed clinical/patient/provider layouts and form logic. */
.info-hero.pagehero--card h1, .info-hero.pagehero--editorial h1 { max-width: none; }
#main > .info-section { padding-block: var(--band-y); color: var(--ink); background: #fff; }
#main > .info-section--tint { background: var(--tint); }
.info-section[id], .info-section [tabindex='-1'] { scroll-margin-top: var(--sp-5); }
.info-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: var(--sp-5) clamp(2rem, 5vw, 5.5rem); margin-bottom: var(--sp-7); }
.info-intro h2 { max-width: none; margin-bottom: 0; }
.info-intro > p { max-width: 58ch; margin: 0; font-size: var(--step-1); color: var(--ink-70); }
.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.info-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.info-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: clamp(1.5rem, 2.4vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--tint); }
.info-section--tint .info-card { background: #fff; }
.info-card__number { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: var(--sp-5); border-radius: var(--radius); background: var(--green-soft); color: var(--ink); font: 600 var(--step-2)/1 var(--font-display); }
.info-card:nth-child(even) .info-card__number { background: var(--interactive-sf); }
.info-card h3 { max-width: none; font-size: var(--step-2); }
.info-card p { max-width: 58ch; color: var(--ink-70); }
.info-section a.info-link { display: inline-flex; align-items: center; min-height: 44px; gap: var(--sp-3); font-weight: 600; text-underline-offset: .25em; overflow-wrap: anywhere; }
.info-section a.info-link[href^='tel:'] { min-height: 44px; }
.info-card > .info-link { margin-top: auto; }
.info-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); }
.info-actions > * { max-width: 100%; }
.info-actions + p { margin-top: var(--sp-4); }
.info-feature { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(2rem, 5vw, 5.5rem); }
.info-feature > *, .info-intro > * { min-width: 0; }
.info-feature > figure { margin: 0; }
.info-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.info-card > .info-photo { aspect-ratio: 16 / 9; margin-bottom: var(--sp-5); }
.info-copy h2 { max-width: 28ch; }
.info-copy > p { max-width: 60ch; color: var(--ink-70); }
.info-section .info-notice { max-width: none; margin: var(--sp-6) 0 0; padding: 0; border: 0; background: transparent; color: var(--ink-70); font-size: var(--step--1); }
.info-notice strong { color: var(--ink); }
.info-notice p { max-width: 110ch; margin: var(--sp-2) 0 0; }
.info-utilities { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 var(--sp-6); margin-top: var(--sp-6); }
.info-utilities a { display: inline-flex; align-items: center; min-height: 44px; }
.info-form-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
.info-form-layout > * { min-width: 0; }
.info-form-panel { min-width: 0; padding: clamp(1.5rem, 3vw, 3rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.info-form-panel > h2, .info-form-panel > h3 { font-size: var(--step-2); }
.info-section .info-form-panel .reqform { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.info-form-panel .reqform__row > .field:only-child { grid-column: 1 / -1; }
.info-form-panel .reqform > .btn { width: 100%; }
.info-form-panel .formnote a[href^='tel:'] { display: inline-flex; align-items: center; min-height: 44px; }
.info-form-photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); margin-block: var(--sp-5); }
.about-location { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); margin-top: var(--sp-6); }
.about-location p { margin: 0; color: var(--ink-70); }
.about-location strong { color: var(--ink); }
.about-shipping-photo { object-position: 50% 35%; }
.info-next { padding: clamp(1.5rem, 4vw, 4rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; text-align: center; }
.info-next h2 { max-width: none; }
.info-next > p { max-width: 66ch; margin-inline: auto; color: var(--ink-70); }
.info-next .info-actions { justify-content: center; margin-bottom: var(--sp-3); }
.info-next .about-expectations { display: block; max-width: 1040px; margin: var(--sp-6) auto 0; padding: var(--sp-5) clamp(1.25rem, 3vw, 3rem); border: 0; border-radius: var(--radius); background: var(--tint); color: var(--ink-70); text-align: center; }
.about-expectations h3 { max-width: none; margin: 0 0 var(--sp-2); color: var(--ink); font-size: var(--step-1); }
.about-expectations p { max-width: 100ch; margin: 0 auto; font-size: var(--step--1); line-height: 1.75; }
.contact-details__layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
.contact-details__layout > * { min-width: 0; }
.contact-details__layout .nap dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); margin: 0; }
.contact-details__layout .nap dl > div { min-height: 0; padding: 0; border: 0; }
.contact-details__layout .nap dt { margin-bottom: var(--sp-2); }
.contact-details__layout .nap a[href^='tel:'] { display: inline-flex; align-items: center; min-height: 44px; margin-block: -8px; }
.contact-details__layout .mapblock { margin: 0; border-radius: var(--radius-lg); }
/* Decision 92 (Shea p.1): "Make Larger putting emphasis on there is help outside of 9-5".
   Ed 2026-09-28: full width. Two columns on the same split and gutter as
   .contact-details__layout above, so the hours sit under the address and the
   note under the map; stacks with that layout at 1000px. */
.contact-after-hours { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--sp-5) clamp(2rem, 5vw, 5.5rem); align-items: start; border-top: 1px solid var(--line) !important; padding-top: var(--sp-6) !important; }
.contact-after-hours > * { min-width: 0; }
.contact-after-hours h3 { margin: 0; font-size: var(--step-2); }
.contact-after-hours p { max-width: none; margin: var(--sp-2) 0 0; font-size: var(--step-0); }
.contact-after-hours__hours p { font-size: var(--step-1); }
.contact-after-hours__note p:first-child { margin-top: 0; }
.contact-after-hours__note p:last-child { margin-top: var(--sp-3); font-size: var(--step-1); font-weight: 600; color: var(--ink); }
.contact-quicklinks { display: flex; flex-wrap: wrap; gap: var(--sp-3); max-width: none; margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.contact-quicklinks li { margin: 0; }
.contact-quicklinks a { display: inline-flex; align-items: center; min-height: 48px; padding: var(--sp-3) var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--interactive); font-weight: 600; text-decoration: none; }
.contact-quicklinks a:hover { border-color: var(--interactive); background: var(--interactive-sf); }
#main > .faq-index { padding-block: var(--sp-7); }
.faq-index h2 { max-width: none; }
.faq-topic-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); }
.faq-topic-nav a { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5); min-height: 72px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--tint); font: 600 var(--step-1)/1.3 var(--font-display); text-decoration: none; }
.faq-topic-nav a > span { font-size: var(--step--1); color: var(--interactive); }
.faq-topic-nav a:hover { border-color: var(--interactive); background: var(--interactive-sf); }
.faq-topic__layout { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
.faq-topic__layout > * { min-width: 0; }
.faq-topic__intro h2 { max-width: none; font-size: var(--step-3); }
.faq-topic__intro p { max-width: 36ch; color: var(--ink-70); }
.tpl-knowledge .faq.faq-topic__questions { display: block; max-width: none; }
.tpl-knowledge .faq-topic__questions details { padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.tpl-knowledge .faq-topic__questions details + details { margin-top: var(--sp-3); }
.faq-topic__questions summary { box-sizing: border-box; min-height: 72px; padding: var(--sp-5); align-items: center; }
.faq-topic__questions summary::after { flex-shrink: 0; }
.faq-topic__questions details > p { max-width: none; margin: 0; padding: 0 var(--sp-5) var(--sp-5); }
.faq-topic__questions details[open] { border-color: var(--line-strong); }
.faq-topic__questions summary:focus-visible { outline-offset: -4px; border-radius: var(--radius); }
@media (max-width: 1000px) {
  .info-intro, .info-feature, .info-form-layout, .contact-details__layout, .contact-after-hours, .faq-topic__layout { grid-template-columns: minmax(0, 1fr); }
  .info-intro { align-items: start; gap: var(--sp-4); }
  .info-grid:not(.info-grid--two) { grid-template-columns: minmax(0, 1fr); }
  .info-photo { aspect-ratio: 16 / 9; max-height: 460px; }
  .info-copy h2 { max-width: none; }
  .faq-topic__intro p { max-width: 60ch; }
}
@media (max-width: 700px) {
  .info-grid--two, .faq-topic-nav { grid-template-columns: minmax(0, 1fr); }
  .info-intro { margin-bottom: var(--sp-6); }
  .info-actions .btn, .info-hero .pagehero__ctas > .btn { width: 100%; }
  .info-utilities { flex-direction: column; gap: var(--sp-2); }
  .contact-quicklinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-quicklinks a { width: 100%; height: 100%; }
}
@media (max-width: 480px) {
  .about-location, .contact-details__layout .nap dl, .contact-quicklinks { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Photo beside text: the photo fills its column and stands taller than the copy
   (Ed, 2026-09-28: "the image should be bigger/taller than the text content").
   Mechanism, the same in every family: the row stretches, the photo is 100%
   of the row with a desktop floor, and the copy carries block padding and
   centres itself, so the photo is always the taller of the two. Each block is
   wrapped in the family's own desktop range so the stacked layouts are untouched.
   ========================================================================== */
@media (min-width: 801px) {
  .care-feature { align-items: stretch; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .care-feature--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .care-feature__media { display: flex; flex-direction: column; }
  .care-feature__media > img { flex: 1 1 auto; height: auto; min-height: clamp(420px, 36vw, 640px); }
  /* The contain variant (portrait capsule bottle) simply scales up inside the taller box. */
  .care-feature__content { align-self: center; padding-block: var(--sp-6); }
}
@media (min-width: 901px) {
  .body-spotlight__grid { align-items: stretch; }
  .body-spotlight__media img { height: 100%; }
  .body-spotlight__copy { align-self: center; padding-block: var(--sp-7); }
  .split { align-items: stretch; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split > div:has(> .media-frame) { display: flex; }
  .split .media-frame--wide { flex: 1 1 auto; aspect-ratio: auto; min-height: clamp(420px, 36vw, 640px); }
  .split > div:not(:has(> .media-frame)) { align-self: center; padding-block: var(--sp-6); }
}
@media (min-width: 941px) {
  .layout-aside { align-items: stretch; }
  .layout-aside > aside:has(> .media-frame) { display: flex; }
  .layout-aside > aside > .media-frame { flex: 1 1 auto; aspect-ratio: auto; min-height: clamp(420px, 36vw, 640px); }
  .layout-aside > div:not(aside) { align-self: center; padding-block: var(--sp-6); }
}
@media (min-width: 1001px) {
  .info-feature { align-items: stretch; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .info-feature > figure { display: flex; }
  .info-feature > .info-photo, .info-feature > figure > .info-photo { flex: 1 1 auto; height: auto; aspect-ratio: auto; min-height: clamp(420px, 36vw, 640px); }
  .info-feature > .info-copy { align-self: center; padding-block: var(--sp-6); }
  .provider-feature__layout { align-items: stretch; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .provider-feature__layout > figure { display: flex; flex-direction: column; }
  img.provider-feature__photo, .provider-feature__layout > figure img { flex: 1 1 auto; height: auto; aspect-ratio: auto; min-height: clamp(420px, 36vw, 640px); }
  .provider-feature__copy { align-self: center; padding-block: var(--sp-6); }
  /* Copy beside a form: the copy column stretches to the form and the photo takes the room. */
  .info-form-layout, .provider-form-layout, .rx-callback__layout, .refill-callback__layout { align-items: stretch; }
  .info-form-layout > .info-copy, .provider-form-layout > .provider-form-intro, .rx-callback__layout > .rx-callback__intro, .refill-callback__layout > .refill-callback__intro { display: flex; flex-direction: column; }
  .info-form-photo, .provider-form-intro > img, .rx-callback__intro > .rx-callback__photo, .refill-callback__intro > .refill-callback__photo { flex: 1 1 auto; height: auto; aspect-ratio: auto; min-height: 360px; max-height: 720px; object-fit: cover; }
  .rx-callback__intro > .rx-callback__photo { margin-top: var(--sp-5); }
}
@media (min-width: 1051px) {
  .payment-refresh__photo { aspect-ratio: 4 / 5; max-height: none; }
}
/* Crops that would otherwise cut the subject when the photo runs tall. */
img[src$='adobe-amber-bottle-tablets-preview.jpg'] { object-position: 32% 50%; }
/* 2026-09-29, Ed's replacements (decision 98): keep faces in frame in portrait crops. The
   clinician-writing image is stored mirrored so its subject sits on the right, where every
   layout that uses it puts the photo; tall crops anchor to the top-right. */
img[src$='adobe-prescription-preview.jpg'] { object-position: 100% 0%; }
img[src$='adobe-peptide-vials-preview.jpg'] { object-position: 55% 30%; }
img[src$='adobe-capsules-bottle-preview.jpg'] { object-position: 30% 35%; }
img[src$='adobe-white-bottle-tablets-preview.jpg'] { object-position: 30% 50%; }
img[src$='adobe-pharmacist-counseling-preview.jpg'] { object-position: 50% 40%; }

/* Round six (decision 104). Estradiol's three forms sit inside one care-list card;
   the child combinator on .care-list > li keeps the nested items out of the card styling. */
.care-sublist { margin: var(--sp-3) 0 0; padding-left: 1.2em; list-style: disc; color: var(--ink-70); }
.care-sublist li { margin: 0 0 var(--sp-2); }
.care-sublist li:last-child { margin-bottom: 0; }
.care-sublist strong { color: var(--ink); }
/* Read more (Ed, 2026-10-15, decision 107): a card that stands well taller than the rest of
   its row is clamped to the row's height with a fade and a "Read more" control, instead of
   the row stretching every neighbour to match it. main.js decides per row on load and resize
   for any grid carrying data-readmore; a single-column stack never clamps anything, and
   without JS the full text simply shows. The fade colour and the control's inset follow the
   card's own background and padding through two custom properties. */
[data-readmore].is-measuring { align-items: start !important; }
[data-readmore].is-measuring > * { max-height: none !important; }
[data-readmore] > .has-readmore { position: relative; padding-bottom: calc(var(--readmore-pad, var(--sp-5)) + 2.5rem); }
[data-readmore] > .is-clamped { overflow: hidden; }
[data-readmore] > .is-clamped::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 7rem; background: linear-gradient(to bottom, transparent, var(--readmore-bg, #fff) 58%); pointer-events: none; }
.readmore__toggle { position: absolute; z-index: 2; left: var(--readmore-pad, var(--sp-5)); bottom: calc(var(--readmore-pad, var(--sp-5)) - .5rem); margin: 0; padding: .5rem 0; border: 0; background: none; font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600; line-height: 1.2; color: var(--interactive); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.readmore__toggle::after { content: ""; display: inline-block; width: .45em; height: .45em; margin-left: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15em) rotate(45deg); }
[data-readmore] > .is-open > .readmore__toggle::after { transform: translateY(.15em) rotate(-135deg); }
.readmore__toggle:hover { text-decoration-thickness: 2px; }
.readmore__toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.care-list > li { --readmore-pad: clamp(1.25rem, 2vw, 2rem); --readmore-bg: var(--tint); }
.care-section--tint .care-list > li { --readmore-bg: #fff; }
.tnc-process__steps > li { --readmore-pad: clamp(1.5rem, 2.2vw, 2.25rem); --readmore-bg: #fff; }
.tnc-process__steps > li:last-child { --readmore-bg: var(--green-soft); }
/* Provider resources, "Ready to prescribe?" (Ed, 2026-10-15, decision 108: "improve this section
   but don't change any text"). The heading used to sit bottom-aligned beside the copy with the
   actions and hours trailing under it in one narrow column, leaving the right half empty. Now
   the heading tops its own copy and actions on the left, the hours and fax sit in a contact card
   on the right, and the disclosure is ruled off underneath. Same words, same order. */
.provider-ready__layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--sp-6) clamp(2rem, 5vw, 5.5rem); align-items: center; }
.provider-ready__layout > * { min-width: 0; }
.provider-ready__main h2 { max-width: none; margin: 0 0 var(--sp-5); }
.provider-ready__main > p { max-width: 58ch; margin: 0 0 var(--sp-4); font-size: var(--step-1); color: var(--ink-70); }
.provider-ready__main > .provider-actions { margin-top: var(--sp-6); }
/* The contact card: hours, the after-hours message link, the fax number and the call button. */
.provider-ready__contact { padding: clamp(1.5rem, 2.4vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.provider-ready__contact p { margin: 0; max-width: none; line-height: 1.8; color: var(--ink-70); }
.provider-ready__contact p > span:first-child { font-weight: 600; color: var(--ink); }
.provider-ready__contact p a { font-weight: 600; }
.provider-ready__contact > .btn { margin-top: var(--sp-5); }
.provider-ready .provider-notice { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
@media (max-width: 1000px) {
  .provider-ready__layout { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 700px) {
  .provider-ready__contact > .btn { width: 100%; }
}
/* Provider reference cards: a label between two lists, and planned-peptide rows that carry a description. */
.provider-card h4 { margin: var(--sp-4) 0 var(--sp-2); font-family: var(--font-ui); font-size: var(--step-0); color: var(--ink); }
.provider-card h4 + .therapy-list { margin-top: 0; }
.provider-medications li > div { flex: 1 1 auto; min-width: 0; }
.provider-medications li > div p { margin: var(--sp-1) 0 0; font-size: var(--step--1); color: var(--ink-70); }
.provider-medications li > div + span { flex: 0 0 auto; }
/* Homepage slide 3: the second paragraph is desktop-only so the CTAs stay above the fold on phones (decision 32). */
.slider__tagline { color: #fff; font-family: var(--font-ui); font-weight: 600; margin: 0 auto var(--sp-6); font-size: var(--step-0); }
@media (max-width: 700px) {
  .slider__lede--more { display: none; }
  .slider__tagline { margin-bottom: var(--sp-4); }
}
/* Body spotlight: optional tagline and a second, text-only action beside the button. */
.body-spotlight__tagline { margin: 0 0 var(--sp-5); font-family: var(--font-ui); font-weight: 600; color: #fff; }
.body-spotlight__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-5); }
.body-spotlight__link { color: #fff; font-family: var(--font-ui); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.body-spotlight__link:hover, .body-spotlight__link:focus-visible { text-decoration-thickness: 2px; }