/* Lexington Compounding Pharmacy: site styles.
   Concept 1, "Evolution", in the colours of the LCP Brand Guide v1.0 (media/brand/, docs/brand.md): the deep teal
   navy #144154 carries the type, buttons and dark bands, the logo's blues (#6EA0D9, #5186C8, #D0E4FF) the accents,
   #151F2C the text. Each care area adds its own three colours (src/data/care.json). One typeface, Outfit
   (self-hosted, OFL), stands in for the current site's Sofia Pro until the brand guide's faces are confirmed. */

@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* the brand guide's palette (page 12), with two shades derived for text that has to pass WCAG AA */
  --ink: #151F2C;            /* brand near-black */
  --ink-2: #33404D;
  --muted: #4B5664;
  --line: #E1E7EC;           /* between the guide's #E3E3E3 and #D4DEE5 */
  --line-2: #C9D6DF;
  --navy: #144154;           /* brand deep teal navy */
  --navy-2: #0E3140;
  --blue: #2A65A0;           /* the brand blue #6EA0D9, deepened for links (6.1 : 1 on white) */
  --blue-hover: #1F5285;
  --brand: #5186C8;          /* a logo blue: accents, focus ring (3.8 : 1) */
  --brand-light: #6EA0D9;    /* brand blue, for marks and fills (never text) */
  --sky: #D0E4FF;            /* the logo's palest bowl */
  --tint: #EEF4F8;
  --tint-2: #F5F8FA;
  --mist: #D4DEE5;           /* brand mist */
  --white: #FFFFFF;
  --ok: #1F7A4D;
  --warn: #9A5B0C;
  --warn-bg: #FDF3E4;

  --font: 'Outfit', 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 48px);
  --r-sm: 12px;
  --r: 20px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow: 0 1px 2px rgba(21, 31, 44, .04), 0 10px 24px -18px rgba(20, 65, 84, .22);
  --shadow-lg: 0 1px 2px rgba(21, 31, 44, .04), 0 22px 44px -28px rgba(20, 65, 84, .3);
  --head-h: 76px;
  --util-h: 37px;   /* the top line, which stays at the top with the header (0 on phones, where it scrolls away) */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* hidden means hidden, whatever display a class gives (the formulary filter hides cards that are display: grid) */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + var(--util-h) + 16px); }   /* every #link lands just below the sticky header */
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--white); font-feature-settings: 'ss01'; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg, video, canvas { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--blue); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-hover); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; }
button { font: inherit; }
main p a, main li a, main dd a { overflow-wrap: anywhere; }   /* a long address as link text wraps instead of widening the page on phones */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; color: #fff; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: .92em; }

/* type scale */
.eyebrow { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.on-dark .eyebrow { color: #A9C8EA; }
.h-display { font-size: clamp(46px, 7vw, 100px); line-height: .98; letter-spacing: -.048em; font-weight: 600; }
.h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.02; letter-spacing: -.04em; }
.h2 { font-size: clamp(32px, 4vw, 54px); letter-spacing: -.038em; line-height: 1.04; }
.h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -.015em; font-weight: 600; }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--muted); max-width: 60ch; }
.accent { color: var(--brand); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 15.5px; letter-spacing: -.005em; text-decoration: none; border: 0; cursor: pointer; transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); white-space: nowrap; }
.btn-primary { background: var(--navy); color: #fff; box-shadow: 0 10px 24px -14px rgba(20, 65, 84, .8); }
.btn-primary:hover { background: var(--navy-2); color: #fff; transform: translateY(-1px); }
.btn-line { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-line:hover { box-shadow: inset 0 0 0 1px var(--navy); color: var(--navy); }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { background: var(--tint); color: var(--navy); }
.btn-ghost-dark { background: rgba(255, 255, 255, .12); color: #fff; }
.btn-ghost-dark:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.btn .arr { transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.link-arrow { font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.link-arrow::after { content: '→'; transition: transform .2s var(--ease); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ------------------------------------------------------------------------------------------------ header */
.util { background: var(--tint-2); color: var(--muted); font-size: 13px; border-bottom: 1px solid var(--line); transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.util .util-tel { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.util-tel .ico { width: 14px; height: 14px; }
.util .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; min-height: 36px; padding-block: 5px; }
.util a, .util button { color: var(--ink); text-decoration: none; font-weight: 500; }
.util a:hover { text-decoration: underline; color: var(--navy); }
.util-links { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: center; }
.util-left { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.util .util-ls { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--navy); }
.util-ls svg { flex: none; }
.util-pause { background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted) !important; font-size: 12.5px; text-decoration: underline !important; text-underline-offset: .2em; }
.masthead { position: sticky; top: 0; z-index: 50; }
/* the top line and the header stay together at the top as the page scrolls (the owner, November 2026: the top line
   "disappears ... doesn't really stay persistent"): the top line has the LegitScript seal, the licences and hours, and
   Contact us, the phone and Pause animations; Refill and the prescriber portal are the header's buttons. On phones
   only the header stays, with Refill and Call at the foot of the screen */
.site-head { position: relative; z-index: 1; background: rgba(255, 255, 255, .8); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 20px; min-height: var(--head-h); }
.brand { display: flex; align-items: center; margin-right: auto; flex: none; }
.brand .logo { height: 42px; width: auto; overflow: visible; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; white-space: nowrap; background: none; border: 0; cursor: pointer; }
.nav-link:hover, .nav-link[aria-expanded="true"] { background: var(--tint); color: var(--navy); }
.nav-link[aria-current] { color: var(--blue); }
.nav-link .chev { flex: none; width: 10px; height: 10px; transition: transform .2s; }
.nav > .nav-item, .head-portals { flex: none; }   /* nothing in the header squeezes: the spacing steps down instead (below) */
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.menu { position: absolute; top: calc(100% + 10px); left: -12px; min-width: 300px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 10px; display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility 0s .18s; }
.menu[data-open] { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; }
.menu a { display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.menu a:hover { background: var(--tint); }
.menu a b { font-weight: 600; font-size: 16px; }
.menu a span { font-size: 14px; color: var(--muted); line-height: 1.35; }
.head-cta { flex: none; }
/* the two portals, top right on every page (the owner, November 2026: the refill and prescriber portals as "more
   permanent links on the top right ... kind of similar to our original site"); the prescriber one opens a menu: log in,
   request an account, or send a prescription */
.head-portals { display: flex; align-items: center; gap: 10px; flex: none; }
.head-portals .btn { min-height: 44px; padding: 10px 18px; font-size: 15px; gap: 8px; }
.head-portals .btn-line { background: rgba(255, 255, 255, .55); }
.head-portals .btn-line:hover { background: #fff; }
.head-portals .ico { width: 16px; height: 16px; }
.head-rx .chev { width: 10px; height: 10px; margin-left: 2px; transition: transform .2s; }
.head-rx [aria-expanded="true"] .chev { transform: rotate(180deg); }
.head-rx .btn-primary:hover { transform: none; }
.head-rx .menu { left: auto; right: 0; min-width: 290px; }
.burger { display: none; width: 48px; height: 48px; border-radius: 999px; border: 0; background: var(--tint); cursor: pointer; align-items: center; justify-content: center; }
.burger span, .burger span::before, .burger span::after { display: block; width: 20px; height: 2px; background: var(--navy); border-radius: 2px; position: relative; transition: transform .2s, background .2s; }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1080px) {
  .burger { display: inline-flex; }
  .head-cta { display: none; }
  .nav { position: absolute; inset: 100% 0 auto 0; max-height: calc(100vh - var(--head-h) - var(--util-h) - 60px); max-height: calc(100dvh - var(--head-h) - var(--util-h) - 60px); overflow-y: auto; background: #fff; flex-direction: column; align-items: stretch; padding: 12px var(--gut) 28px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); display: none; }
  .nav[data-open] { display: flex; }
  .nav-link { width: 100%; justify-content: space-between; padding: 14px 8px; font-size: 18px; border-radius: 12px; }
  .menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 8px 8px; display: none; min-width: 0; }
  .menu[data-open] { display: grid; }
  .nav .nav-cta { display: flex; margin-top: 12px; }
  /* the header's prescriber menu stays a dropdown beside the burger (the rest of the menus fold into the panel) */
  .head-rx .menu { position: absolute; top: calc(100% + 10px); padding: 10px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: grid; opacity: 0; visibility: hidden; transform: translateY(-6px); }
  .head-rx .menu[data-open] { opacity: 1; visibility: visible; transform: none; }
  /* in the panel, the portals come first: two buttons, then the account request and sending a prescription */
  .nav .nav-portals { order: -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .nav-portals .btn { min-height: 48px; padding-inline: 12px; }
  .nav-portals-more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 2px 2px 0; font-size: 15px; }
  .nav-portals-more a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
}
@media (min-width: 1081px) { .nav .nav-cta { display: none; } }
@media (min-width: 1081px) and (max-width: 1240px) {   /* the full menu and both portals, on a small laptop */
  .site-head .wrap { gap: 12px; }
  .nav-link { padding-inline: 10px; }
  .head-portals { gap: 8px; }
  .head-portals .btn { padding-inline: 14px; }
}
@media (min-width: 1081px) and (max-width: 1160px) {   /* the narrowest laptops: a little tighter still */
  .site-head .wrap { gap: 10px; }
  .nav { gap: 0; }
  .nav-link { padding-inline: 8px; font-size: 14.5px; }
  .head-portals .btn { padding-inline: 12px; font-size: 14.5px; }
  .head-portals .ico { display: none; }
}
@media (max-width: 640px) {
  .head-portals { display: none; }   /* on phones the portals open the menu panel instead */
  :root { --util-h: 0px; }
  .masthead { display: contents; }   /* the top line scrolls away; the header alone stays */
  .site-head { position: sticky; top: 0; z-index: 50; }
}
@media (max-width: 360px) { .nav .nav-portals { grid-template-columns: minmax(0, 1fr); } }

/* crumbs */
.crumbs { max-width: var(--wrap); margin: 0 auto; padding: 18px var(--gut) 0; font-size: 14px; }
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); }
.crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--line-2); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--blue); text-decoration: underline; }

/* ---------------------------------------------------------------------------------------------- sections */
.section { padding-block: clamp(72px, 9vw, 128px); }
.section-tight { padding-block: clamp(48px, 6vw, 80px); }
.section-tint { background: var(--tint-2); }
.section-navy { background: var(--navy); color: #fff; }
.section-navy .lede, .section-navy .muted { color: #C5D6DF; }
.section-navy a:not(.btn) { color: #fff; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head > div { max-width: 720px; }
.section-head .lede { margin-top: 14px; }

/* ------------------------------------------------------------------------------------------------ hero
   One studio space from the top of the page down: the band runs up under the header (which stays clear over it until
   the page scrolls, site.js), the products float on its right and feather into the same soft blue they were rendered
   on (tools/render/lcp_scenes.py cluster, a 15 s loop), and the two doors rise over its lower edge. The quick-links bar
   above takes the same gradient, so there's no seam. site.js plays the loop while it's on screen and holds its first
   frame for reduced motion and "Pause animations". */
.hero { position: relative; background: #fff; }
/* the band is one flat blue, the colour the products float on in the loop (#D6E0EC just inside its faded edges,
   tools/render/lcp_scenes.py cluster), so the loop sits in it with no visible edge (the owner, November 2026: the band
   and the 3D background should be "more homogeneous"); the top bar on the homepage matches */
.hero-band, .is-home .util { background: #D6E0EC; }
.hero-copy .accent { color: #4678B8; }   /* the brand blue a shade deeper: 3.4 : 1 on the band, for the display size */
.is-home .util { border-bottom-color: rgba(255, 255, 255, .45); }
.is-home .masthead:has(.site-head.is-scrolled) .util { background: var(--tint-2); border-bottom-color: var(--line); }
.is-home .util-pause { color: var(--ink) !important; }   /* over the deeper blue at the right of the bar */
.hero-band { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(640px, calc(100svh - 36px), 940px); margin-top: calc(-1 * var(--head-h));
  padding: calc(var(--head-h) + clamp(28px, 4vw, 56px)) 0 clamp(150px, 13vw, 196px); }
.hero-band > .wrap { width: 100%; }
/* the band fades to white at its foot, over the loop as well as the band (the owner, November 2026: under the loop the
   blue "goes from dark to light really quickly" at the bottom right), so band and loop whiten together; the copy
   stays above the fade */
.hero-band::after { content: ''; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 55%, #fff); z-index: 3; pointer-events: none; }
.hero-copy { position: relative; z-index: 4; max-width: 640px; }
.hero-copy .h-display { font-size: clamp(46px, 6.4vw, 92px); }
.hero-copy .eyebrow { color: var(--navy); }
.hero-copy .lede { margin-top: 26px; max-width: 44ch; color: #3E4A58; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-actions .btn-line { background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px rgba(20, 65, 84, .22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero-actions .btn-line:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--navy); }
.hero-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 34px; font-size: 14px; color: #3E4A58; list-style: none; padding: 0; }
.hero-trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust li::before { content: ''; width: 16px; height: 16px; background: var(--navy); -webkit-mask: url('/img/brand/icons/ui/check.svg') center / contain no-repeat; mask: url('/img/brand/icons/ui/check.svg') center / contain no-repeat; }

/* the products: no frame, just the loop with its edges feathered into the band */
.hero-visual { position: absolute; z-index: 2; top: var(--head-h); bottom: clamp(40px, 5vw, 72px); right: max(-2vw, calc((100vw - var(--wrap)) / 2 - 40px)); aspect-ratio: 4 / 5; pointer-events: none; }
.hero-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 92%, transparent);
  mask-composite: intersect; }
.hero-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: -.005em; color: var(--navy); white-space: nowrap;
  background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 14px 30px -18px rgba(20, 65, 84, .45);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
.hero-chip i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); display: grid; place-items: center; }
.hero-chip i::before { content: ''; width: 12px; height: 12px; background: #fff; -webkit-mask: url('/img/brand/icons/ui/check.svg') center / contain no-repeat; mask: url('/img/brand/icons/ui/check.svg') center / contain no-repeat; }
.hero-chip-a { left: -2%; top: 47%; }   /* in the gaps between the products, clear of their labels */
.hero-chip-b { right: 43%; top: 7%; }   /* ends left of the NAD+ vial (its cap starts at 61% across, wherever the loop is) */
@media (prefers-reduced-motion: no-preference) {
  .hero-chip { animation: chip-float 7s ease-in-out infinite; }
  .hero-chip-b { animation-delay: -3.5s; }
  .anim-paused .hero-chip { animation-play-state: paused; }
}
@keyframes chip-float { 50% { transform: translateY(-8px); } }

/* the doors rise over the band's lower edge */
.hero > .wrap { position: relative; z-index: 3; margin-top: clamp(-128px, -9vw, -72px); }
.hero .door-patient { background: #fff; border-color: rgba(20, 65, 84, .08); box-shadow: var(--shadow-lg); }
.hero .door-rx { box-shadow: 0 24px 48px -28px rgba(20, 65, 84, .6); }

/* the homepage's header sits clear on the band until the page scrolls (site.js adds .is-scrolled) */
.is-home .site-head { transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.is-home .site-head:not(.is-scrolled):not(:has(.nav[data-open])) { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.is-home .site-head:not(.is-scrolled) .burger { background: rgba(255, 255, 255, .6); }

@media (max-width: 1080px) {
  .hero-band { min-height: 0; }
  .hero-copy { max-width: min(640px, 58%); }
  .hero-visual { top: calc(var(--head-h) + 8px); bottom: auto; width: min(48vw, 500px); right: -3vw; }
  .hero-chip-a { left: 6%; top: 50%; }
  .hero-chip-b { right: 43%; top: 1%; font-size: 13px; line-height: 1.3; border-radius: 18px; padding: 8px 14px 8px 10px; }   /* on two lines, above the jar and clear of the vial */
  .hero-chip-b > span > span { display: block; }
}
@media (max-width: 760px) {
  .hero-band { flex-direction: column; align-items: stretch; min-height: 0; padding-top: var(--head-h); padding-bottom: clamp(96px, 24vw, 140px); }
  .hero-copy { max-width: none; }
  /* the whole 4:5 frame on phones, so the NAD+ vial's cap at the top and the naltrexone bottle at the bottom both show
     (the owner, November 2026: "you need to be able to see the top of the vial"); only a hairline fade at the top */
  .hero-visual { position: relative; inset: auto; width: min(94%, 440px); aspect-ratio: 4 / 5; height: auto; margin: 4px auto -6px; }
  .hero-video { object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 2.5%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 2.5%, #000 90%, transparent); }
  .hero-chip { font-size: 12.5px; padding: 7px 12px 7px 8px; gap: 7px; }
  .hero-chip i { width: 18px; height: 18px; }
  .hero-chip i::before { width: 10px; height: 10px; }
  .hero-chip-a { left: 0; top: 44%; }
  .hero-chip-b { display: none; }   /* one chip is enough on the small picture */
  .hero > .wrap { margin-top: clamp(-104px, -18vw, -64px); }
}

/* doors */
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; position: relative; z-index: 2; padding-bottom: clamp(48px, 6vw, 72px); }
.door { border-radius: var(--r-lg); padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; gap: 22px; }
.door-patient { background: var(--tint-2); border: 1px solid var(--line); }
.door-rx { background: var(--navy); color: #fff; }
.door h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; font-weight: 600; letter-spacing: -.015em; }
.door-links { display: grid; gap: 0; list-style: none; padding: 0; }
.door-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 2px; border-top: 1px solid var(--line-2); text-decoration: none; font-weight: 500; font-size: 18px; letter-spacing: -.01em; transition: color .2s, padding .25s var(--ease); }
.door-links a:hover { padding-left: 8px; }
.door-links li:last-child a { border-bottom: 1px solid var(--line-2); }
.door-patient .door-links a { color: var(--ink); }
.door-links .ico-location { width: 18px; height: 18px; color: var(--blue, #4C80C2); }
/* the address under "Directions to the pharmacy" (the owner, November 2026: "so they could pop it in"), with a copy button */
.door-links li.door-dir { border-bottom: 1px solid var(--line-2); }
.door-links li.door-dir a { border-bottom: 0 !important; padding-bottom: 6px; }
.door-addr { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 0 2px 15px; font-size: 15px; color: var(--muted); }
.door-addr-t { user-select: all; }
.door-copy { flex: none; border: 1px solid var(--line-2); background: #fff; color: var(--navy); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s; }
.door-copy:hover { background: var(--tint); }
.door-copy.is-done { border-color: #3D8A63; color: #2E6B4C; }
.ft-dir { display: inline-flex; align-items: center; gap: 6px; }
.ft-dir .ico { width: 15px; height: 15px; }
.door-patient .door-links a:hover { color: var(--navy); }
.door-rx .door-links a { color: #fff; border-color: rgba(255, 255, 255, .18) !important; }
.door-rx .door-links a:hover { color: #fff; }
.door-rx .door-links a.primary { background: #fff; color: var(--navy); border: 0 !important; border-radius: 999px; padding: 15px 22px; margin-bottom: 14px; font-weight: 600; }
.door-rx .door-links a.primary:hover { padding-left: 22px; background: var(--tint); }
.door-links small { font-weight: 500; font-size: 14px; color: var(--muted); }
.door-rx .door-links a small { color: #C5D6DF; }
.door-rx .door-links a.primary small { color: var(--muted); }
.door-foot { font-size: 15px; color: var(--muted); margin-top: auto; }
.door-rx .door-foot { color: #C5D6DF; }
.door-rx .eyebrow { color: #A9C8EA; }

/* stats */
/* the numbers row: a soft panel of equal cells, each centred (icon, number, label), parted by thin rules */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 10px; background: var(--tint-2); border: 1px solid var(--line); border-radius: var(--r-xl); }
.stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: center; gap: 6px; padding: 26px 16px 24px; text-align: center; }
.stats > div + div { border-left: 1px solid var(--line); }
.stats dd { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.stats .st-ico { display: block; width: 52px; height: 52px; }
.stats .st-n { font-size: clamp(38px, 4.4vw, 56px); font-weight: 600; letter-spacing: -.045em; color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; }
.stats dt { color: var(--muted); }

/* send-a-prescription cards */
.rx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }   /* the four ways to send, in one row on a wide screen */
.rx-card { background: #fff; border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--line); }
.rx-card h3 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.rx-card p { color: var(--muted); }
.rx-id { background: var(--tint); border-radius: 12px; padding: 12px 14px; font-size: 15px; display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.rx-id b { font-weight: 600; }
/* the send-a-prescription page's four ways (the owner, November 2026: "add cool animated icons and animations here.
   Just improve the general design of this page"): each card leads with its brand icon (e-prescribe, fax, portal,
   phone), which plays its motion as the cards rise in one after another and again on hover (site.js); what to use
   (NPI, fax, numbers) sits at the foot of every card, the NPI and fax with a copy button, and a bar fills along each
   card's foot in turn */
.rx-ways { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rx-way { --n: 0; position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 28px; border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, var(--tint-2), #fff 112px); box-shadow: 0 18px 36px -32px rgba(20, 65, 84, .5);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.rx-way:nth-child(2) { --n: 1; } .rx-way:nth-child(3) { --n: 2; } .rx-way:nth-child(4) { --n: 3; }
.rx-way:hover, .rx-way:focus-within { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 28px 48px -30px rgba(20, 65, 84, .5); }
.rx-way::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--navy), #4678B8); }
.rxw-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.rx-way .bi, .rxw-bi { flex: none; width: 60px; height: 60px; }
.rxw-tag { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; text-align: center; line-height: 1.25; }
.rx-way h3 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.rx-way > p { color: var(--muted); font-size: 16px; line-height: 1.55; margin: 0; }
.rxw-ids { margin: auto 0 0; padding: 12px 14px; background: var(--tint); border-radius: 14px; display: grid; gap: 10px; font-variant-numeric: tabular-nums; }
.rxw-ids div { display: grid; gap: 1px; }
.rxw-ids dt { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rxw-ids dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; font-size: 16px; font-weight: 600; color: var(--ink); }
.rxw-ids dd a { color: var(--navy); text-decoration: none; }
.rxw-ids dd a:hover { text-decoration: underline; }
.rxw-copy { flex: none; border: 1px solid var(--line-2); background: #fff; color: var(--navy); border-radius: 999px; padding: 3px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.rxw-copy:hover { background: var(--tint-2); border-color: var(--navy); }
.rxw-copy.is-done { border-color: #3D8A63; color: #2E6B4C; }
.rxw-act { margin-top: auto; display: grid; justify-items: start; gap: 12px; }
.rxw-act p { margin: 0; font-size: 15px; color: var(--muted); }
.rxw-act p a { font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .rx-ways.rv { opacity: 1; transform: none; }
  .js-motion .rx-ways.rv .rx-way { opacity: 0; transform: translateY(26px); transition: opacity .6s ease calc(var(--n) * .16s), transform .8s var(--ease) calc(var(--n) * .16s), box-shadow .35s var(--ease), border-color .35s var(--ease); }
  .js-motion .rx-ways.rv .rx-way::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease) calc(.35s + var(--n) * .16s); }
  .js-motion .rx-ways.rv.is-in .rx-way, .js-motion .rx-ways.rv.is-in .rx-way::after { opacity: 1; transform: none; }
  .js-motion .rx-ways.rv.is-in .rx-way:hover, .js-motion .rx-ways.rv.is-in .rx-way:focus-within { transform: translateY(-4px); transition-delay: 0s; }
}
.anim-paused .rx-ways .rx-way, .anim-paused .rx-ways .rx-way::after { opacity: 1 !important; transform: none !important; }
@media (max-width: 1080px) { .rx-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .rx-ways { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rx-way { padding: 20px 20px 24px; }
  .rx-way .bi, .rxw-bi { width: 52px; height: 52px; }
}

/* what a complete prescription includes: a checklist whose ticks pop in one after another as it scrolls into view */
.prose .rx-check { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 14px; }
.prose .rx-check li { --i: 0; position: relative; margin: 0; padding: 12px 16px 12px 52px; background: #fff; border: 1px solid var(--line); border-radius: 14px; line-height: 1.55; }
.prose .rx-check li:nth-child(2) { --i: 1; } .prose .rx-check li:nth-child(3) { --i: 2; } .prose .rx-check li:nth-child(4) { --i: 3; } .prose .rx-check li:nth-child(5) { --i: 4; }
.prose .rx-check li::before { content: ''; position: absolute; left: 14px; top: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); }
.prose .rx-check li::after { content: ''; position: absolute; left: 20px; top: 20px; width: 12px; height: 12px; background: #fff; -webkit-mask: url('/img/brand/icons/ui/check.svg') center / contain no-repeat; mask: url('/img/brand/icons/ui/check.svg') center / contain no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .rx-check.rv li { opacity: 0; transform: translateX(-10px); transition: opacity .5s ease calc(var(--i) * .12s), transform .6s var(--ease) calc(var(--i) * .12s); }
  .js-motion .rx-check.rv li::before, .js-motion .rx-check.rv li::after { transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) calc(.2s + var(--i) * .12s); }
  .js-motion .rx-check.rv.is-in li, .js-motion .rx-check.rv.is-in li::before, .js-motion .rx-check.rv.is-in li::after { opacity: 1; transform: none; }
}
.anim-paused .rx-check li, .anim-paused .rx-check li::before, .anim-paused .rx-check li::after { opacity: 1 !important; transform: none !important; }

/* the contact page's form (the owner, November 2026: "an easy place where patients or prescribers can fill out a contact
   us form"), first on the page, with the other ways to reach us beside it; who's writing is three cards with their
   brand icons, ticked when chosen */
.page-hero .lede + .ab-links { margin-top: 24px; }
.cf-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.cf-aside { position: sticky; top: calc(var(--head-h) + var(--util-h) + 20px); }
.cf-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cf-who-card { position: relative; display: grid; justify-items: center; align-content: start; gap: 10px; padding: 20px 12px 16px; border: 1.5px solid var(--line); border-radius: 18px; background: #fff;
  cursor: pointer; text-align: center; font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--ink); transition: border-color .2s, box-shadow .2s, transform .25s var(--ease), background .2s; }
.cf-who-card input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cf-who-card .bi, .cf-who-card img { width: 46px; height: 46px; }
.cf-who-card:hover { transform: translateY(-2px); border-color: var(--line-2); }
.cf-who-card:has(input:checked) { border-color: var(--navy); background: var(--tint-2); box-shadow: 0 0 0 3px rgba(20, 65, 84, .12); }
.cf-who-card:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.cf-who-card::before { content: ''; position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); transform: scale(0); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.cf-who-card::after { content: ''; position: absolute; top: 15px; right: 15px; width: 12px; height: 12px; background: #fff; -webkit-mask: url('/img/brand/icons/ui/check.svg') center / contain no-repeat; mask: url('/img/brand/icons/ui/check.svg') center / contain no-repeat; transform: scale(0); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1) .05s; }
.cf-who-card:has(input:checked)::before, .cf-who-card:has(input:checked)::after { transform: none; }
@media (max-width: 960px) { .cf-layout { grid-template-columns: minmax(0, 1fr); } .cf-aside { position: static; } }
@media (max-width: 560px) {
  .cf-who { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cf-who-card { grid-template-columns: 40px minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; padding: 12px 44px 12px 14px; }
  .cf-who-card .bi, .cf-who-card img { width: 40px; height: 40px; }
  .cf-who-card::before { top: 50%; margin-top: -11px; right: 14px; } .cf-who-card::after { top: 50%; margin-top: -6px; right: 19px; }
}

/* "message received" (tools/build.py received_art; the same scene as the contact confirmation email's GIF): an envelope
   drops into the LCP mortar, the bowl gives, a ripple runs out from the rim and a check pops up with its sparks. At rest
   it's the finished picture; .rc-play (site.js) runs it: the contact page's picture every few seconds while on screen,
   a sent form's thanks once. Still for reduced motion and "Pause animations". */
.rc-art { display: block; width: 100%; height: auto; }
.rc-glow { fill: #EEF3F8; }
.rc-ripple { fill: none; stroke: #6EA0D9; stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.rc-env { opacity: 0; }
.rc-bowl { transform-box: view-box; transform-origin: 280px 244px; }
.rc-check, .rc-spark { transform-box: fill-box; transform-origin: center; }
.rc-tick { stroke-dasharray: 40; }
@media (prefers-reduced-motion: no-preference) {
  .rc-play .rc-env { animation: rc-drop 1.05s cubic-bezier(.5, 0, .9, .4) .15s both; }
  .rc-play .rc-bowl { animation: rc-give .6s cubic-bezier(.3, 1.6, .5, 1) 1.1s both; }
  .rc-play .rc-ripple { animation: rc-ripple .9s ease-out 1.12s both; }
  .rc-play .rc-check { animation: rc-pop .55s cubic-bezier(.34, 1.7, .64, 1) 1.45s both; }
  .rc-play .rc-tick { animation: rc-draw .35s ease-out 1.75s both; }
  .rc-play .rc-spark { animation: rc-spark .7s ease-out calc(1.6s + var(--d, 0s)) both; }
}
.anim-paused .rc-art * { animation: none !important; }
@keyframes rc-drop { 0% { transform: translateY(-150px) rotate(-8deg); opacity: 0; } 12% { opacity: 1; } 85% { transform: translateY(26px) rotate(2deg); opacity: 1; } 100% { transform: translateY(44px); opacity: 0; } }
@keyframes rc-give { 0% { transform: none; } 30% { transform: scale(1.04, .94); } 100% { transform: none; } }
@keyframes rc-ripple { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes rc-pop { 0% { transform: translateY(26px) scale(0); } 100% { transform: none; } }
@keyframes rc-draw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
@keyframes rc-spark { 0% { transform: scale(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: none; opacity: 1; } }
/* a sent form's thanks */
.ir-done .rc-art { width: 100%; max-width: 440px; margin: 0 auto 4px; }
.ir.is-sent .ir-done { display: grid; justify-items: center; gap: 8px; padding: 8px 0 4px; text-align: center; background: none; border: 0; }
.ir.is-sent .ir-done b { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; letter-spacing: -.015em; color: var(--navy); }
.ir.is-sent .ir-done p { max-width: 46ch; color: var(--muted); }
.cf-panel:has(.ir.is-sent) > :not(.ir) { display: none; }   /* sent: the panel is all thanks */

/* the contact page (the owner, November 2026: "opportunities to spruce up and improve the design"): three ways to reach
   us beside the heading, each with its animated brand icon; the form in a raised white panel on the tint; the details
   on one navy card with the logo's mortar faint in its corner */
.ct-hero .wrap { align-items: center; }
.ct-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ct-ways a { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); text-decoration: none;
  box-shadow: 0 16px 34px -30px rgba(20, 65, 84, .5); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.ct-ways a::after { content: '→'; color: var(--navy); font-weight: 600; transition: transform .3s var(--ease); }
.ct-ways a:hover, .ct-ways a:focus-visible { transform: translateY(-2px); border-color: var(--line-2); box-shadow: 0 24px 44px -30px rgba(20, 65, 84, .55); }
.ct-ways a:hover::after { transform: translateX(4px); }
.ct-ways .bi { width: 52px; height: 52px; }
.ct-ways b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.005em; }
.ct-ways b + span { display: block; margin-top: 2px; font-size: 14.5px; color: var(--muted); }
.cf-section .cf-layout { align-items: start; }
.cf-panel { padding: clamp(22px, 4vw, 44px); border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: 0 40px 80px -60px rgba(20, 65, 84, .6); }
.cf-panel > .lede { margin: 10px 0 24px; }
.ct-card { position: relative; overflow: hidden; display: grid; gap: 18px; padding: clamp(24px, 3vw, 32px); border-radius: 28px; background: var(--navy); color: #C5D6DF; box-shadow: 0 40px 80px -50px rgba(20, 65, 84, .8); }
.ct-card .mark { position: absolute; right: -36px; bottom: -18px; width: 220px; height: auto; opacity: .1; pointer-events: none; }
.ct-card h2 { position: relative; margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.ct-list { position: relative; margin: 0; display: grid; }
.ct-list div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.ct-list dt { padding-top: 3px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8FB0C4; }
.ct-list dd { margin: 0; font-size: 16.5px; line-height: 1.5; color: #fff; font-variant-numeric: tabular-nums; }
.ct-list a { color: #fff; font-weight: 600; text-decoration: none; }
.ct-list a:hover { text-decoration: underline; }
.ct-list small { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: #A9BDCA; }
.ct-dir { display: flex !important; width: fit-content; align-items: center; gap: 6px; margin-top: 6px; font-size: 14.5px; color: #CFE0EE !important; }
.ct-dir .ico { width: 15px; height: 15px; }
.ct-rx { position: relative; margin: 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14.5px; }
.ct-rx a { color: #fff; font-weight: 600; }
@media (max-width: 800px) { .ct-ways { margin-top: 4px; } }
@media (max-width: 420px) { .ct-ways a { grid-template-columns: 44px minmax(0, 1fr); padding: 14px 16px; gap: 14px; } .ct-ways a::after { display: none; } .ct-ways .bi { width: 44px; height: 44px; } .ct-list div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* the homepage's ways to send, as one list: an icon, what it is, then the numbers to use (or the portal's button) */
.rx-list { list-style: none; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.rx-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 320px); gap: 24px; align-items: center; padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.8vw, 32px); }
.rx-row + .rx-row { border-top: 1px solid var(--line); }
.rx-bi { display: block; width: 56px; height: 56px; }
/* the three icons are brand icons (e-prescribe, fax, portal: media/brand/icons-extra/): each plays its own motion as
   the list comes into view, one after another, and again on hover (site.js) */
.rx-what h3 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.rx-what p { color: var(--muted); font-size: 16px; margin-top: 4px; }
.rx-ids { margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 28px; }
.rx-ids div { display: flex; flex-direction: column-reverse; align-items: flex-end; }
.rx-ids dt { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rx-ids dd { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rx-act { display: flex; justify-content: flex-end; }
@media (max-width: 760px) {
  .rx-row { grid-template-columns: 44px minmax(0, 1fr); gap: 14px 16px; }
  .rx-bi { width: 44px; height: 44px; align-self: start; grid-row: span 2; }
  .rx-ids, .rx-act { grid-column: 2; justify-content: flex-start; }
  .rx-ids div { align-items: flex-start; }
}
.ph { display: inline-block; background: var(--warn-bg); color: var(--warn); border-radius: 6px; padding: 0 6px; font-size: .92em; font-weight: 600; }

/* split feature */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split-media { position: relative; border-radius: var(--r-xl); background: var(--tint-2); border: 1px solid var(--line); aspect-ratio: 5 / 4; display: grid; place-items: center; overflow: hidden; }
.split-media img { width: 72%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(20, 65, 84, .12)); }
.split-media.stage { aspect-ratio: 1; border: 0; }   /* a product loop (@loop): square, as the loops are, so nothing is cropped */
.film-media { aspect-ratio: 1280 / 1040; border: 0; background: #E4EDF7; margin: 0; }   /* the cold-chain film, at its own shape, on its backdrop */
.film-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.split-copy { display: grid; gap: 18px; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }
.badges { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }
.badges li { border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 14px; font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; background: #fff; }
.checks { list-style: none; padding: 0; display: grid; gap: 10px; }
.checks li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
.checks li::before { content: ''; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; background: var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312357F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* ---------------------------------------------------------------------------------------------- the map */
.map-section { background: linear-gradient(180deg, #fff, var(--tint-2)); }
.map-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 960px) { .map-grid { grid-template-columns: minmax(0, 1fr); } }
/* the map stands on the section itself, no card or grid behind it (the owner, November 2026): the land lifted by a soft
   shadow over a faint pool of light */
.usmap { position: relative; margin: 0; padding: clamp(8px, 2vw, 20px) 0 0; background: radial-gradient(60% 55% at 50% 46%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); }
.usmap svg { filter: drop-shadow(0 14px 18px rgba(20, 65, 84, .14)) drop-shadow(0 2px 3px rgba(20, 65, 84, .08)); }
.usmap svg { width: 100%; height: auto; overflow: visible; }
/* each state a solid fill by its status, with white borders; pending states hatched */
.st { fill: #E3EBF3; stroke: #fff; stroke-width: 1.1; stroke-linejoin: round; transition: fill .2s, filter .2s; }
.st-licensed { fill: url(#fill-licensed); }
.st-home { fill: url(#fill-home); }
.st-pending { fill: url(#fill-pending); }
.st-link { cursor: pointer; }
.st-link:hover path, .st-link.is-on path { filter: brightness(.9) saturate(1.2); }
.st-link:hover .st-pending, .st-link.is-on .st-pending { filter: brightness(.95); }
.st-link:focus-visible { outline: none; }
.st-link:focus-visible path { stroke: var(--ink); stroke-width: 2.5; }
/* on the homepage, the states we ship to fill in west to east as the map scrolls into view */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .rv .st-link path, .js-motion .rv .st-labels, .js-motion .rv .origin { opacity: .12; }
  .js-motion .rv.is-in .st-link path { opacity: 1; transition: opacity .5s ease calc(.2s + var(--i) * 60ms), filter .2s; }
  .js-motion .rv.is-in .st-labels, .js-motion .rv.is-in .origin { opacity: 1; transition: opacity .6s ease 1.3s; }
  .anim-paused .rv .st-link path, .anim-paused .rv .st-labels, .anim-paused .rv .origin { opacity: 1 !important; }
}
/* Lexington: a crosshair on the pharmacy */
.origin { pointer-events: none; }
.origin-pulse { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; }
.origin-ring { fill: none; stroke: #fff; stroke-width: 1.8; }
.origin-ticks { stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.origin-dot { fill: #fff; }
.origin-label { font: 600 13px var(--font); fill: var(--navy); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .origin-pulse { animation: origin-pulse 2.8s ease-out infinite; }
  .anim-paused .origin-pulse { animation-play-state: paused; }
}
@keyframes origin-pulse { 0% { opacity: .5; transform: scale(.8); } 100% { opacity: 0; transform: scale(2.8); } }
.map-scale path { fill: none; stroke: var(--muted); stroke-width: 1.2; }
.map-scale text { font: 500 11px var(--font); fill: var(--muted); text-anchor: middle; }
.st-code { font: 600 12.5px var(--font); fill: #fff; paint-order: stroke; stroke: rgba(20, 65, 84, .3); stroke-width: 3.5px; stroke-linejoin: round; text-anchor: middle; dominant-baseline: central; pointer-events: none; letter-spacing: .02em; }
.st-code-pending { fill: var(--navy); stroke: #fff; stroke-width: 3px; }
.usmap-tip { position: absolute; z-index: 5; min-width: 220px; max-width: 280px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); padding: 14px 16px; font-size: 14px; pointer-events: none; transform: translate(-50%, calc(-100% - 14px)); }
.usmap-tip b { display: block; font-size: 17px; }
.usmap-tip .pill { margin: 6px 0; }
.usmap-tip dl { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.usmap-tip dt { color: var(--muted); }
.usmap-tip dd { margin: 0; font-variant-numeric: tabular-nums; }
.usmap-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: 14px; color: var(--muted); justify-content: center; }
.usmap-legend b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 2px; }
/* a state page's header: the licensure chart closed in on the state, Kentucky and the pharmacy in the frame */
.smap { width: 100%; max-width: 560px; aspect-ratio: 4 / 3; margin: 0 auto; border-radius: 30px; overflow: hidden;
  background: radial-gradient(75% 70% at 50% 45%, #fff, #E9F0F7); box-shadow: inset 0 0 0 1px rgba(20, 65, 84, .06), 0 30px 60px -36px rgba(20, 65, 84, .5); }
.smap svg { display: block; width: 100%; height: 100%; }
.sm { stroke: #fff; stroke-width: var(--sw); stroke-linejoin: round; }
.sm-other { fill: #E3EBF3; }
.sm-licensed { fill: #C9DCF1; }
.sm-pending { fill: #E6F0FA; }
.sm-home { fill: #1D5770; }
.sm-this { fill: url(#sm-fill); filter: drop-shadow(0 0 0 transparent); }
.sm-label { font-family: var(--font); font-weight: 600; fill: var(--navy); text-anchor: middle; dominant-baseline: central;
  paint-order: stroke; stroke: rgba(255, 255, 255, .92); stroke-linejoin: round; letter-spacing: .01em; }
.sm-origin circle { fill: none; stroke: #fff; }
.sm-origin .sm-dot { fill: #fff; stroke: none; }
.sm-origin text { font-family: var(--font); font-weight: 600; fill: var(--navy); paint-order: stroke; stroke: #fff; stroke-linejoin: round; }
.sp-cities { max-width: 880px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; padding: 24px 26px; border-radius: var(--r-lg); background: var(--tint); color: var(--ink-2); }
.sp-cities .bi { width: 52px; height: 52px; }
.sp-cities p { margin-top: 6px; }
/* "Across <state>": the state draws itself, then its cities pop onto it one after another, each with its name below
   (tools/build.py state_cities_art); pointing at a name lights its dot, and the other way round (site.js) */
/* "Across <state>" (tools/build.py state_cities_art, right under the hero on every state page): the state drawn in
   white on a dotted field, route arcs from the pharmacy (from the map's edge, toward Lexington; from Lexington itself
   on the Kentucky page) landing on each city in turn, and the cities beside it with their straight-line miles. A city's
   name and its dot and arc light up together on hover (site.js, [data-across]). */
.sp-across { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4.4vw, 64px); align-items: center; padding: clamp(26px, 4vw, 52px); border-radius: var(--r-xl); background: linear-gradient(155deg, #fff 0%, var(--tint-2) 38%, var(--tint) 100%); border: 1px solid var(--line); box-shadow: 0 40px 80px -60px rgba(20, 65, 84, .45); overflow: hidden; }
.sp-across-copy { position: relative; z-index: 1; display: grid; gap: 14px; justify-items: start; }
.sp-across-copy .sp-landmark { width: 72px; height: 72px; margin-bottom: 4px; }   /* the state's landmark (state-<code>), playing its own motion */
.sp-across .lede { max-width: 46ch; }
.sc-cities { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 460px; }
.sc-cities li { --n: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; color: var(--ink); cursor: default; transition: background-color .2s, color .2s, box-shadow .2s, transform .25s var(--ease); }
.sc-cities b { font-weight: 600; }
.sc-cities span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .2s; }
.sc-cities li.is-home, .sc-cities li.is-hl { background: var(--navy); color: #fff; box-shadow: none; }
.sc-cities li.is-hl { transform: translateX(3px); }
.sc-cities li.is-home span, .sc-cities li.is-hl span { color: rgba(255, 255, 255, .78); }
.sc-note { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; font-size: 14px; color: var(--muted); max-width: 460px; }
.sc-note .bi { flex: none; width: 40px; height: 40px; }
.sc-note .link-arrow { display: inline-flex; margin-left: 4px; font-size: 14px; white-space: nowrap; }
.sc-map { position: relative; margin: 0; display: grid; place-items: center; }
.sc-map::before { content: ''; position: absolute; inset: -12% -8%; background: radial-gradient(circle, rgba(20, 65, 84, .16) 1.1px, transparent 1.5px) 0 0 / 16px 16px; -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); pointer-events: none; }
.sc-map svg { position: relative; width: 100%; max-width: 540px; max-height: 460px; overflow: visible; }
.sc-shape { fill: #fff; stroke: var(--navy); stroke-linejoin: round; filter: drop-shadow(0 16px 26px rgba(20, 65, 84, .14)); }
.sc-arc { fill: none; stroke: #6EA0D9; stroke-linecap: round; transition: stroke .2s; }
.sc-arc.is-hl { stroke: var(--navy); }
.sc-dot { --n: 0; transform-box: fill-box; transform-origin: 50% 50%; transition: transform .25s var(--ease); }
.sc-dot circle:last-child { fill: var(--navy); }
.sc-ring { fill: rgba(110, 160, 217, .25); stroke: #6EA0D9; }
.sc-dot.is-home circle:last-child { fill: #fff; stroke: var(--navy); stroke-width: 2.5; }
.sc-dot.is-hl { transform: scale(1.45); }
.sc-gate { transform-box: fill-box; transform-origin: 50% 50%; }
.sc-gate circle:nth-child(2) { fill: var(--navy); stroke: #fff; }
.sc-gate text { fill: var(--navy); font-weight: 600; stroke: #fff; paint-order: stroke; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .sp-across.rv { transform: none; }
  .js-motion .sp-across.rv .sc-shape { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; transition: stroke-dashoffset 1.8s cubic-bezier(.45, 0, .25, 1) .2s, fill-opacity .7s ease 1.4s; }
  .js-motion .sp-across.rv .sc-gate { opacity: 0; transform: scale(.4); transition: opacity .4s ease 1.1s, transform .55s cubic-bezier(.34, 1.56, .64, 1) 1.1s; }
  .js-motion .sp-across.rv .sc-arc { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .75s cubic-bezier(.45, 0, .25, 1) calc(1.45s + var(--n) * .24s), stroke .2s; }
  .js-motion .sp-across.rv .sc-dot { transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) calc(2s + var(--n) * .24s); }
  .js-motion .sp-across.rv .sc-cities li { opacity: 0; transform: translateY(8px); transition: opacity .4s ease calc(2s + var(--n) * .24s), transform .5s var(--ease) calc(2s + var(--n) * .24s), background-color .2s, color .2s, box-shadow .2s; }
  .js-motion .sp-across.rv.is-in .sc-shape, .js-motion .sp-across.rv.is-in .sc-arc { stroke-dashoffset: 0; fill-opacity: 1; }
  .js-motion .sp-across.rv.is-in .sc-gate { opacity: 1; transform: none; }
  .js-motion .sp-across.rv.is-in .sc-dot, .js-motion .sp-across.rv.is-in .sc-cities li { opacity: 1; transform: none; }
  .js-motion .sp-across.rv.is-in .sc-dot.is-hl { transform: scale(1.45); transition-delay: 0s; }
  .js-motion .sp-across.rv.is-in .sc-cities li.is-hl { transform: translateX(3px); transition-delay: 0s; }
  .js-motion .sp-across.rv.is-in .sc-ring { animation: sc-ping 1.6s ease-out calc(2.15s + var(--n) * .24s) 1 backwards; }
  .js-motion .sp-across.rv.is-in .sc-dot.is-home .sc-ring, .js-motion .sp-across.rv.is-in .sc-gate .sc-ring { animation: sc-ping 2.4s ease-out 1.3s infinite; }
}
.sc-dot .sc-ring, .sc-gate .sc-ring { transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes sc-ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.anim-paused .sc-shape, .anim-paused .sc-arc { stroke-dashoffset: 0 !important; fill-opacity: 1 !important; }
.anim-paused .sc-dot, .anim-paused .sc-cities li, .anim-paused .sc-gate { opacity: 1 !important; transform: none !important; }
.anim-paused .sc-ring { animation: none !important; }
@media (max-width: 860px) { .sp-across { grid-template-columns: minmax(0, 1fr); } .sc-map { order: -1; } .sc-map svg { max-height: 320px; } }
@media (max-width: 340px) { .sc-cities { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .sc-cities li { padding: 9px 11px; font-size: 14px; } .sc-cities span { font-size: 12px; } }

/* photographs of compounding: the homepage's quality mosaic (one tall, two stacked) and captioned strips on Quality and
   About. They rise in turn as they scroll into view, and ease in a little closer on hover. */
.photo-mosaic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 1; }
.photo-mosaic figure, .photo-strip figure { --n: 0; margin: 0; overflow: hidden; border-radius: var(--r-xl); background: var(--tint); }
.photo-mosaic .pm-a { grid-row: 1 / span 2; }
.photo-mosaic .pm-b { --n: 1; } .photo-mosaic .pm-c { --n: 2; }
.photo-mosaic .pm-c img { object-position: 9% 45%; }   /* the isolator: keep the gloved hands (left of centre) in the square crop */
.photo-mosaic img, .photo-strip img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.photo-mosaic figure:hover img, .photo-strip figure:hover img { transform: scale(1.04); }
.photo-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.photo-strip.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photo-strip figure { display: grid; grid-template-rows: auto auto; background: none; border-radius: 0; overflow: visible; }
.photo-strip figure:nth-child(2) { --n: 1; } .photo-strip figure:nth-child(3) { --n: 2; }
.photo-strip img { aspect-ratio: 4 / 3; border-radius: var(--r-xl); }
.photo-strip.two img { aspect-ratio: 5 / 4; }
.photo-strip figcaption { margin-top: 10px; font-size: 14.5px; font-weight: 500; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .photo-mosaic.rv, .js-motion .photo-strip.rv { transform: none; }
  .js-motion .photo-mosaic.rv figure, .js-motion .photo-strip.rv figure { opacity: 0; transform: translateY(20px); transition: opacity .7s ease calc(var(--n) * .15s), transform .9s var(--ease) calc(var(--n) * .15s); }
  .js-motion .photo-mosaic.rv.is-in figure, .js-motion .photo-strip.rv.is-in figure { opacity: 1; transform: none; }
}
.anim-paused .photo-mosaic figure, .anim-paused .photo-strip figure { opacity: 1 !important; transform: none !important; }
@media (max-width: 860px) { .photo-strip { grid-template-columns: minmax(0, 1fr); } .photo-strip.two { grid-template-columns: minmax(0, 1fr); } }

/* a photograph of the pharmacy (About, Contact): rounded, with its address under it */
.photo-card { margin: 0; display: grid; gap: 10px; }
.photo-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-xl); box-shadow: 0 30px 60px -40px rgba(20, 65, 84, .55); }
.photo-card figcaption { font-size: 14px; color: var(--muted); }
.ab-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ab-links .btn .ico { width: 18px; height: 18px; margin-right: 6px; }

/* the license on record: its facts in a card under the certificate */
.lic-card { margin-top: 24px; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; align-items: start; padding: 22px 24px 10px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: 0 14px 30px -26px rgba(20, 65, 84, .45); }
.lic-card .bi { width: 56px; height: 56px; }
.lic-card .item-facts { margin: 0; border-top: 0; }
.lic-card .item-facts div:nth-last-child(-n+2) { border-bottom: 0; }
.sp-card .ac-pt p + p { margin-top: 8px; }
.sp-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (max-width: 520px) { .lic-card { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 18px 18px 6px; } .sp-cities { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px; } }
.sp-also { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sp-also a { display: inline-block; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; background: #fff; }
.sp-also a:hover { border-color: var(--blue, #6EA0D9); color: var(--navy); }
.sp-also li:last-child a { border-style: dashed; }
.usmap-legend span { display: inline-flex; align-items: center; gap: 8px; }
.lg { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.lg-home { background: var(--navy); } .lg-licensed { background: linear-gradient(135deg, #6EA0D9, #4C80C2); }
.lg-pending { background: repeating-linear-gradient(45deg, #6EA0D9 0 2px, #E6F0FA 2px 4.2px); }
.state-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin-top: 18px; }
.state-list li { font-family: var(--mono); font-size: 13px; padding: 4px 8px; border-radius: 6px; background: #fff; border: 1px solid var(--line); }
.state-list li.home { background: var(--navy); color: #fff; border-color: var(--navy); }

/* pills, tables */
.pill { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--tint); color: var(--navy); white-space: nowrap; }
.pill-home { background: var(--navy); color: #fff; }
.pill-licensed { background: #E2EBF1; color: var(--blue); }
.pill-pending { background: #F2F4F7; color: var(--ink-2); }
.tablebox { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }   /* relative: screen-reader text inside stays inside, or it widens the page on phones */
.tablebox table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 15.5px; }
.tablebox th, .tablebox td { text-align: left; vertical-align: top; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.tablebox thead th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; background: var(--tint-2); }
.tablebox tbody tr:last-child > * { border-bottom: 0; }
.lictable tbody tr:not(.first) th, .lictable tbody tr:not(.first) td { border-top: 0; }
.lictable tbody tr:target { background: #FFF8E6; }
.tnote { display: block; font-size: 13px; color: var(--warn); margin-top: 4px; }

/* segmented control (from the StackRx storefront's .sf-seg) */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; }
.seg button { border: 0; background: none; padding: 8px 16px; min-height: 36px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--muted); cursor: pointer; }
.seg button:hover { color: var(--navy); }
.seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }

/* state checker (the StackRx storefront's "Check your state", on the licensure data) */
.check { margin-top: 22px; display: grid; gap: 10px; max-width: 420px; }
.check label { font-weight: 600; font-size: 15px; }
.check select { font: inherit; font-size: 17px; min-height: 52px; padding: 10px 16px; border-radius: 14px; border: 1.5px solid var(--line-2); background: #fff; color: var(--ink); }
.check select:focus { border-color: var(--blue); outline: 3px solid var(--sky); outline-offset: 0; }
.check-msg { font-size: 16px; color: var(--ink-2); min-height: 1.6em; }
.check-msg b { color: var(--navy); }

/* ------------------------------------------------------------------------------------------ formulary */
.fx-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: 14px; align-items: end; }
@media (max-width: 700px) { .fx-controls { grid-template-columns: minmax(0, 1fr); } }
.fx-label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.fx-search input, .fx-select { width: 100%; font: inherit; font-size: 17px; min-height: 54px; padding: 12px 18px; border-radius: 16px; border: 1.5px solid var(--line-2); background: #fff; color: var(--ink); }
.fx-search input:focus, .fx-select:focus { border-color: var(--blue); outline: 3px solid var(--sky); outline-offset: 0; }
.fx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font-size: 14.5px; font-weight: 500; cursor: pointer; }
.chip:hover { border-color: var(--blue); }
.chip[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.fx-count { margin-top: 18px; font-size: 14px; color: var(--muted); }
.fx-list { list-style: none; padding: 0; margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.fx-item { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: grid; gap: 4px; background: #fff; }
.fx-item:target { border-color: var(--blue); box-shadow: 0 0 0 3px var(--sky); }
.fx-name { font-weight: 600; font-size: 17px; }
.fx-area { font-size: 14px; color: var(--muted); }
.fx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tag { font-size: 12.5px; padding: 3px 9px; border-radius: 999px; background: var(--tint); color: var(--navy); font-weight: 500; }
.tag-cold { background: #E6F4FF; color: #0B5394; }
.tag-vet { background: #EEF6EC; color: #2F6B2A; }
.fx-empty { margin-top: 18px; padding: 18px; border-radius: 16px; background: var(--tint); }
.fx-note { margin-top: 18px; font-size: 14px; color: var(--muted); }

/* learn cards: a cover in the category's brand tile colourway (tools/build.py LEARN_ICONS) with the category, the title
   and the category's icon drawn large off the corner over the logomark's bowls; the summary below. Cover text is navy,
   or the brand near-black on the blue (navy is only 4.0 : 1 there). */
.learn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.learn-card { display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.learn-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--ink); }
.lc-cover { --cv: var(--mist); --cv-ink: var(--navy); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 268px; padding: 22px 24px; background: var(--cv); color: var(--cv-ink); }
.cv-blue { --cv: #6EA0D9; --cv-ink: var(--ink); }   /* 6.1 : 1 */
.cv-lavender { --cv: #DADCE5; }                     /* navy 8.0 : 1 */
.cv-mist { --cv: #D4DEE5; }                         /* navy 8.0 : 1 */
.cv-sage { --cv: #C8DBD1; }                         /* navy 7.6 : 1 */
.lc-cat { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.learn-card-title { font-size: clamp(21px, 1.8vw, 24px); line-height: 1.16; letter-spacing: -.022em; font-weight: 600; text-wrap: balance; }
.lc-nb { white-space: nowrap; }   /* keeps “beyond-use” and “FDA-approved” whole */
.lc-bowls, .lc-glyph { position: absolute; z-index: -1; pointer-events: none; }
.lc-bowls { left: -6%; bottom: 0; width: 62%; height: auto; fill: #fff; fill-opacity: .2; }
.lc-bowls .lc-pestle { fill-opacity: .42; }   /* the logo's pestle across the bowls, so the motif reads as the mark */
.lc-glyph { right: -9%; bottom: -8%; width: auto; height: 64%; aspect-ratio: 1; overflow: visible; }
/* the knowledge center's header picture: an article cover, larger, turning through the six categories (site.js);
   the colourway eases over, the category's name changes and its icon cross-fades in, floating a little */
.lh-art { width: 100%; max-width: 560px; aspect-ratio: 1; margin-inline: auto; padding: 34px 36px; border-radius: 36px; gap: 14px;
  box-shadow: 0 30px 60px -36px rgba(20, 65, 84, .5); transition: background-color .9s ease, color .9s ease; }
.lh-cat { font-size: 13px; }
.lh-art .lc-bowls { width: 66%; }
.lh-gs { position: absolute; right: -7%; bottom: -7%; width: 74%; aspect-ratio: 1; z-index: -1; pointer-events: none; }
.lh-g { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.lh-g.is-on { opacity: 1; }
.lh-g .bi { width: 100%; height: 100%; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .lh-gs { animation: lh-float 6s ease-in-out infinite alternate; }
  .anim-paused .lh-gs { animation-play-state: paused; }
}
@keyframes lh-float { from { translate: 0 -6px; } to { translate: 0 6px; } }
.learn-card-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 24px 22px; }
.learn-card-dek { color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.learn-card-meta { margin-top: auto; padding-top: 4px; font-size: 13.5px; color: var(--muted); }
.cat-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.cat-nav a { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); text-decoration: none; color: var(--ink); font-weight: 500; font-size: 15px; background: #fff; }
.cat-nav a:hover { border-color: var(--blue); color: var(--blue); }
.learn-cat { padding-top: 12px; margin-top: 40px; border-top: 1px solid var(--line); }
.learn-cat h2 { font-size: 26px; margin-bottom: 18px; }

/* page hero (inner pages) */
.page-hero { padding-block: clamp(28px, 4vw, 48px) clamp(40px, 5vw, 64px); background: linear-gradient(180deg, var(--tint-2), #fff); }
.page-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 32px; align-items: center; }
.page-hero.no-media .wrap { grid-template-columns: minmax(0, 1fr); }
.page-hero h1 { font-size: clamp(38px, 5vw, 62px); line-height: 1.02; letter-spacing: -.03em; }
.page-hero .lede { margin-top: 18px; }
.page-hero-media img { width: 100%; max-width: 340px; margin-inline: auto; filter: drop-shadow(0 20px 26px rgba(20, 65, 84, .12)); }
.page-hero .hero-actions { margin-top: 26px; }
@media (max-width: 800px) { .page-hero .wrap { grid-template-columns: minmax(0, 1fr); } .page-hero-media { order: -1; max-width: 220px; } }
/* on phones a page's header picture runs the full width (the owner, November 2026: "that top image needs to be wide as
   the screen"): a state page's map, and the illustrated covers, which turn into a wide banner (the label top left, the
   icon at the right, the logomark's bowls at the bottom left) rather than a square half the width of the screen */
@media (max-width: 800px) {
  .page-hero-media:has(.smap), .page-hero-media:has(.lh-art) { max-width: none; width: 100%; }
  .smap { max-width: none; border-radius: 22px; }
  .page-hero-media .lh-art { max-width: none; aspect-ratio: 2 / 1; min-height: 0; padding: 22px 24px; border-radius: 24px; }
  .page-hero-media .lh-art .lh-gs { width: auto; height: 112%; right: 2%; bottom: -8%; }
  .page-hero-media .lh-art .lc-bowls { width: 42%; left: -4%; }
  .page-hero-media .lh-cat { max-width: 48%; font-size: 12px; }
}

/* prose (articles, legal, long pages) */
.prose { font-size: 18px; line-height: 1.7; color: var(--ink-2); max-width: 70ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(26px, 2.6vw, 32px); color: var(--ink); margin-top: 1.9em; }
/* a preparation's own content (docs/compound-pages.md) */
.item-content > h2:first-child { margin-top: 0; }
.item-content .rx-example code { display: block; font: 15px/1.6 var(--mono); background: var(--tint); border-radius: 10px; padding: 12px 16px; white-space: pre-wrap; color: var(--ink); }
.item-content .refs { font-size: 15px; padding-left: 1.2em; }
.item-content .refs li + li { margin-top: 6px; }
.item-content .reviewed { font-size: 15px; color: var(--muted); }
.prose h3 { font-size: 21px; color: var(--ink); margin-top: 1.5em; letter-spacing: -.01em; font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .4em; }
.prose strong { color: var(--ink); }
.prose-table { overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 16px; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--tint-2); font-weight: 600; color: var(--ink); }
.prose .key { background: var(--tint); border-radius: var(--r); padding: 22px 26px; }
.prose .key-h { font-weight: 700; color: var(--navy); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.prose .key ul { margin-top: 10px; }
/* a list whose items each lead with a brand icon (the icons play in turn as the list scrolls into view) */
.prose .ico-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.prose .ico-list li { margin: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: 0 14px 30px -26px rgba(20, 65, 84, .45); font-size: 17px; line-height: 1.6; }
.prose .ico-list .bi { width: 44px; height: 44px; margin-top: 2px; }
.prose .ico-list strong { display: block; margin-bottom: 2px; }
@media (max-width: 520px) { .prose .ico-list li { column-gap: 12px; padding: 14px; font-size: 16px; } .prose .ico-list .bi { width: 40px; height: 40px; } }
.note-box { border-radius: var(--r); padding: 20px 24px; background: var(--tint); color: var(--ink-2); font-size: 16px; }
.note-box.warn { background: var(--warn-bg); color: #5C3A06; }
.note-box b { color: var(--ink); }

/* article layout */
.article-head { padding-block: clamp(24px, 3vw, 40px) clamp(28px, 4vw, 48px); background: linear-gradient(180deg, var(--tint-2), #fff); }
.article-head h1 { font-size: clamp(36px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -.03em; max-width: 22ch; }
.article-head .lede { margin-top: 18px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 22px; font-size: 14.5px; color: var(--muted); }
.article-meta span + span::before { content: '·'; margin-right: 18px; color: var(--line-2); }
.article-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); padding-block: 24px clamp(64px, 8vw, 96px); }
.toc { position: sticky; top: calc(var(--head-h) + var(--util-h) + 24px); align-self: start; font-size: 15px; }
.toc b { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.toc ol { list-style: none; padding: 0; display: grid; gap: 8px; border-left: 2px solid var(--line); }
.toc a { display: block; padding-left: 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; line-height: 1.35; }
.toc a:hover, .toc a.is-on { color: var(--navy); border-left-color: var(--blue); }
@media (max-width: 900px) { .article-grid { grid-template-columns: minmax(0, 1fr); } .toc { position: static; } }
/* an article's header: its words beside its cover (the knowledge center card's cover, larger) */
.article-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(28px, 5vw, 72px); align-items: center; }
.article-cover { aspect-ratio: 5 / 4; min-height: 0; border-radius: var(--r-xl); padding: 26px 28px; box-shadow: 0 30px 60px -38px rgba(20, 65, 84, .55); }
.article-cover .lc-bowls { width: 70%; }
.article-cover .lc-glyph { height: 72%; }
.article-cover-min { font-size: 13px; font-weight: 500; opacity: .8; }
@media (max-width: 900px) { .article-head-grid { grid-template-columns: minmax(0, 1fr); } .article-cover { display: none; } }
/* an article's body: a short accent over each section heading, the summary in navy, dots and numbers for lists, and
   cards for lists of terms and for sub-headed lists */
.is-article .prose h2::before { content: ''; display: block; width: 44px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--brand), var(--sky)); margin-bottom: 16px; }
.is-article .prose .key { background: var(--navy); color: #E4EEF4; border-radius: var(--r-lg); padding: clamp(22px, 3vw, 32px); }
.is-article .prose .key-h { color: #A9C8EA; }
.is-article .prose .key a { color: #fff; }
.is-article .prose .key strong { color: #fff; }
.is-article .prose ul:not(.terms):not(.checks) { list-style: none; padding-left: 0; }
.is-article .prose ul:not(.terms):not(.checks):not(.ico-list) > li { position: relative; padding-left: 26px; }
.is-article .prose ul:not(.terms):not(.checks):not(.ico-list) > li::before { content: ''; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.is-article .prose .key ul > li::before { background: #A9C8EA; }
.is-article .prose ol:not(.steps) { list-style: none; padding-left: 0; counter-reset: n; }
.is-article .prose ol:not(.steps) > li { counter-increment: n; position: relative; padding-left: 44px; min-height: 30px; }
.is-article .prose ol:not(.steps) > li::before { content: counter(n); position: absolute; left: 0; top: .1em; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; display: grid; place-items: center; }
.is-article .prose .terms { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.is-article .prose .terms li { margin: 0; background: var(--tint-2); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; font-size: 16.5px; line-height: 1.6; }
.is-article .prose .terms li strong:first-child { display: block; font-size: 17.5px; color: var(--ink); margin-bottom: 4px; line-height: 1.35; }
.is-article .prose .sub-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.is-article .prose .sub-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; font-size: 16.5px; }
.is-article .prose .sub-card h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.is-article .prose .sub-card ul > li + li { margin-top: 6px; }
@media (max-width: 640px) { .is-article .prose .terms { grid-template-columns: minmax(0, 1fr); } }
.article-foot { margin-top: 48px; display: grid; gap: 32px; }
.sources ol { padding-left: 1.2em; font-size: 15px; display: grid; gap: 6px; color: var(--muted); }
.article-foot h2 { font-size: 24px; margin-bottom: 14px; }

/* CTA band */
.cta-band { border-radius: var(--r-xl); background: var(--navy); color: #fff; padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; position: relative; overflow: hidden; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band p { color: #C5D6DF; margin-top: 10px; }
.cta-band .eyebrow { color: #A9C8EA; }
@media (max-width: 760px) { .cta-band { grid-template-columns: minmax(0, 1fr); } }

/* people */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 22px; }
@media (max-width: 560px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }   /* two across on phones, not four screens of portraits */
.person { display: grid; gap: 12px; }
.person-photo { aspect-ratio: 1; border-radius: var(--r-lg); background: radial-gradient(circle at 50% 35%, #E1ECF3, var(--tint)); display: grid; place-items: center; color: var(--brand); font-size: 14px; font-weight: 500; }
.person b { font-size: 19px; font-weight: 600; }
.person span { color: var(--muted); font-size: 15px; }

/* contact list, steps, forms placeholder */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.info { border: 1px solid var(--line); border-radius: var(--r); padding: 22px; background: #fff; display: grid; gap: 6px; align-content: start; }
.info h2, .info h3 { font-size: 15px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.info p { font-size: 18px; }
.info a { font-weight: 600; text-decoration: none; }
/* steps: a numbered timeline, across on wide screens (each number joined to the next by a line), down on narrow ones
   and in the forms' "what happens next" aside */
.steps { list-style: none; padding: 0; counter-reset: s; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; }
.steps li { counter-increment: s; position: relative; display: grid; gap: 6px; align-content: start; }
.steps li::before { content: counter(s); width: 46px; height: 46px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 18px; font-weight: 700; display: grid; place-items: center; margin-bottom: 12px; box-shadow: 0 10px 22px -12px rgba(20, 65, 84, .7); }
.steps li:not(:last-child)::after { content: ''; position: absolute; top: 22px; left: 58px; right: -12px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand), var(--sky)); }
.steps b { font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.steps span { color: var(--muted); font-size: 16px; }
@media (max-width: 900px) {
  .steps { grid-auto-flow: row; gap: 0; }
  .steps li { grid-template-columns: 46px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; padding-bottom: 26px; }
  .steps li:last-child { padding-bottom: 0; }
  .steps li::before { grid-row: 1 / span 2; margin: 0; }
  .steps b { padding-top: 11px; }
  .steps li:not(:last-child)::after { top: 56px; bottom: 8px; left: 22px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--brand), var(--sky)); }
}

/* send a prescription: the licensure map beside the prescription rules, staying in view as they scroll */
.rx-map { display: grid; gap: 14px; position: sticky; top: calc(var(--head-h) + var(--util-h) + 24px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 2.6vw, 30px); }
.rx-map > p { font-size: 16px; color: var(--muted); }
.rx-map .usmap { margin: 0; }
@media (max-width: 900px) { .rx-map { position: static; } }

/* the pharmacy at a glance: the identifiers in a navy band, the areas and dosage forms as chips */
.ag-ids { margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-radius: var(--r-xl); background: var(--navy); color: #fff; overflow: hidden; }
.ag-ids div { padding: clamp(20px, 2.6vw, 32px); display: flex; flex-direction: column-reverse; gap: 6px; }
.ag-ids div + div { border-left: 1px solid rgba(255, 255, 255, .14); }
.ag-ids dt { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #A9C8EA; }
.ag-ids dd { margin: 0; font-size: clamp(22px, 2.3vw, 30px); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
@media (max-width: 1000px) { .ag-ids { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ag-ids div + div { border-left: 0; } .ag-ids div { border-top: 1px solid rgba(255, 255, 255, .14); } .ag-ids div:nth-child(-n+3) { border-top: 0; } }
@media (max-width: 560px) { .ag-ids { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ag-ids div:nth-child(3) { border-top: 1px solid rgba(255, 255, 255, .14); } }
.ag-who { display: grid; gap: 20px; }
.ag-who .checks { font-size: 18px; color: var(--ink-2); gap: 14px; }
.ag-note { margin-top: 22px; color: var(--muted); font-size: 16px; }
.ag-make { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 56px); }
.ag-label { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.ag-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ag-chips li { display: flex; }
.ag-chips a, .ag-chips-plain li { padding: 9px 16px; border-radius: 999px; font-size: 15.5px; font-weight: 500; }
.ag-chips a { background: var(--navy); color: #fff; text-decoration: none; transition: background .2s; }
.ag-chips a:hover { background: #1D5770; color: #fff; }
.ag-chips-plain li { background: var(--tint); color: var(--ink); }
@media (max-width: 800px) { .ag-make { grid-template-columns: minmax(0, 1fr); } }
.feat-grid.ag-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ag-list { font-size: 16.5px; color: var(--ink-2); margin: 4px 0 6px; }
@media (max-width: 760px) { .feat-grid.ag-two { grid-template-columns: minmax(0, 1fr); } }

/* the steps play in turn as they scroll into view (site.js .rv): each number pops in, then the line to the next draws
   itself. Only the numbers and lines move; the words stay put, so nothing is ever hidden. */
.steps li:nth-child(2) { --n: 1; } .steps li:nth-child(3) { --n: 2; } .steps li:nth-child(4) { --n: 3; } .steps li:nth-child(5) { --n: 4; } .steps li:nth-child(6) { --n: 5; }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .steps.rv li::before { transform: scale(.5); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) calc(.15s + var(--n, 0) * .45s); }
  .js-motion .steps.rv li:not(:last-child)::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease) calc(.45s + var(--n, 0) * .45s); }
  .js-motion .steps.rv li > * { transform: translateY(12px); transition: transform .7s var(--ease) calc(.3s + var(--n, 0) * .45s); }
  .js-motion .steps.rv.is-in li::before, .js-motion .steps.rv.is-in li:not(:last-child)::after, .js-motion .steps.rv.is-in li > * { transform: none; }
  .js-motion .steps.rv.is-in li::before { animation: step-halo 1.1s ease-out calc(.3s + var(--n, 0) * .45s) 1 backwards; }
}
@keyframes step-halo { 0% { box-shadow: 0 0 0 0 rgba(110, 160, 217, .55), 0 10px 22px -12px rgba(20, 65, 84, .7); } 100% { box-shadow: 0 0 0 16px rgba(110, 160, 217, 0), 0 10px 22px -12px rgba(20, 65, 84, .7); } }
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  .js-motion .steps.rv li:not(:last-child)::after { transform: scaleY(0); transform-origin: 50% 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .js-motion .ir-aside .steps.rv li:not(:last-child)::after { transform: scaleY(0); transform-origin: 50% 0; }
  .js-motion .ir-aside .steps.rv.is-in li:not(:last-child)::after { transform: none; }
}
.anim-paused .steps li::before, .anim-paused .steps li::after, .anim-paused .steps li > * { transform: none !important; animation: none !important; }

/* the patients page: a card for each task, and the call card */
.pt-hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pt-card, .feat { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; background: #fff; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .25s var(--ease), transform .25s var(--ease); }
.pt-card:hover, a.feat:hover { border-color: var(--line-2); box-shadow: 0 22px 40px -28px rgba(20, 65, 84, .55); transform: translateY(-2px); }
.pt-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--tint); color: var(--navy); display: grid; place-items: center; margin-bottom: 10px; transition: background .2s; }
.pt-card:hover .pt-ico { background: var(--sky); }
.pt-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pt-card h2, .pt-call h2, .feat h2 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.pt-card h2, .feat h2 { color: var(--ink); }
.pt-card p, .feat p { color: var(--muted); font-size: 16px; }
.feat p b { color: var(--ink); }
.pt-card .link-arrow, .feat .link-arrow { margin-top: auto; padding-top: 14px; color: var(--navy); font-size: 15.5px; }
.pt-call { border-radius: var(--r-lg); padding: 26px; background: var(--navy); color: #fff; display: flex; flex-direction: column; gap: 8px; }
.pt-call-ico { border-radius: 12px; margin-bottom: 10px; }
.pt-call p { color: #C5D6DF; font-size: 16px; }
.pt-call-num { margin-top: auto; padding-top: 14px; color: #fff; font-size: clamp(24px, 2.2vw, 28px); font-weight: 600; letter-spacing: -.01em; text-decoration: none; }
.pt-call-num:hover { text-decoration: underline; text-underline-offset: 4px; }
.pt-call .pt-call-hrs { font-size: 15px; }
@media (max-width: 1000px) { .pt-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pt-hub { grid-template-columns: minmax(0, 1fr); } .pt-card, .pt-call { padding: 22px; } }

/* feature cards (prescribers, partners, quality): a brand icon on its tile, a title, a sentence, a link at the foot;
   a count gets the navy card instead of an icon */
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feat-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feat-ico { border-radius: 14px; margin-bottom: 12px; }
.feat-stat { background: var(--navy); border-color: var(--navy); color: #fff; }
.feat-stat h2 { color: #fff; }
.feat-stat p { color: #C5D6DF; }
.feat-stat .link-arrow { color: #fff; }
a.feat-stat:hover { border-color: var(--navy); }
.feat-num { font-size: 64px; font-weight: 600; letter-spacing: -.05em; line-height: .9; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .feat-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .feat-grid, .feat-grid.four { grid-template-columns: minmax(0, 1fr); } .feat { padding: 22px; } }

/* the transfer page: what we need beside how to start, and the transfer rules at a glance */
.tx-start { border-radius: var(--r-lg); padding: clamp(24px, 3vw, 34px); background: var(--navy); color: #fff; display: grid; gap: 10px; }
.tx-start .eyebrow { color: #A9C8EA; }
.tx-start h2 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }
.tx-start p { color: #C5D6DF; font-size: 16.5px; }
.tx-start .btn { justify-self: start; margin-top: 8px; background: #fff; color: var(--navy); }
.tx-start .btn:hover { background: var(--tint); }
.tx-start .tx-note { margin-top: 12px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 15px; }
.tx-start .tx-note b { color: #fff; }
.tx-need { display: grid; gap: 10px; }
.tx-need h2 { font-size: clamp(26px, 2.6vw, 32px); }
.tx-need-lede { color: var(--muted); font-size: 17px; }
.tx-hero-hrs { margin-top: 14px; color: var(--muted); font-size: 15px; }
/* what to have ready: four numbered cards that slide up in turn, each number popping in (site.js .rv); the words never hide */
.tx-list { list-style: none; padding: 0; margin-top: 14px; counter-reset: t; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tx-list li { counter-increment: t; position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; padding: 22px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 14px 30px -26px rgba(20, 65, 84, .45); }
.tx-list li::before { content: counter(t); position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; display: grid; place-items: center; }
.tx-list .bi { width: 48px; height: 48px; flex: none; margin-bottom: 8px; border-radius: 12px; }
/* the designer's UI icons (home, location, phone) on the brand icons' blue tile, so all four cards match */
.tx-tile { width: 48px; height: 48px; flex: none; margin-bottom: 8px; border-radius: 12px; background: #6EA0D9; display: grid; place-items: center; color: #151F2C; }
.tx-tile .ico { width: 28px; height: 28px; }
.ico-home { --ico: url('/img/brand/icons/ui/home.svg'); }
.ico-location { --ico: url('/img/brand/icons/ui/location.svg'); }
.tx-list b { font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.tx-list span { font-size: 16px; color: var(--muted); }
.tx-list li:nth-child(2) { --n: 1; } .tx-list li:nth-child(3) { --n: 2; } .tx-list li:nth-child(4) { --n: 3; }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .tx-list.rv { transform: none; }
  .js-motion .tx-list.rv li { transform: translateY(24px); transition: transform .75s var(--ease) calc(var(--n, 0) * .14s); }
  .js-motion .tx-list.rv li::before { transform: scale(.3); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) calc(.3s + var(--n, 0) * .14s); }
  .js-motion .tx-list.rv .tx-tile .ico { transform: scale(.4) rotate(-12deg); transition: transform .55s cubic-bezier(.34, 1.56, .64, 1) calc(.35s + var(--n, 0) * .14s); }
  .js-motion .tx-list.rv.is-in li, .js-motion .tx-list.rv.is-in li::before, .js-motion .tx-list.rv.is-in .tx-tile .ico { transform: none; }
}
.anim-paused .tx-list li, .anim-paused .tx-list li::before { transform: none !important; }
@media (max-width: 560px) {
  .tx-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tx-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 16px 52px 16px 16px; }
  .tx-list .bi, .tx-list .tx-tile { grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; }
  .tx-list b { font-size: 17px; }
  .tx-list span { font-size: 15.5px; }
  .tx-list li::before { top: 16px; right: 16px; width: 26px; height: 26px; font-size: 13px; }
}
/* the header's picture: the transfer as four steps, each lit in turn, over and over (still, with all four plain, for
   reduced motion and Pause animations) */
.tx-flow { list-style: none; margin: 0 auto; padding: 14px; width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 34px 60px -42px rgba(20, 65, 84, .5); display: grid; gap: 10px; }
.tx-flow li { --n: 0; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; }
.tx-flow li:nth-child(2) { --n: 1; } .tx-flow li:nth-child(3) { --n: 2; } .tx-flow li:nth-child(4) { --n: 3; }
.tx-flow li:not(:last-child)::after { content: ''; position: absolute; left: 35px; top: calc(100% - 5px); width: 2px; height: 10px; border-radius: 2px; background: #B9CCE0; }
.tx-flow .tx-tile, .tx-flow .bi { width: 44px; height: 44px; margin: 0; border-radius: 11px; }
.tx-flow .tx-tile .ico { width: 24px; height: 24px; }
.tx-flow b { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.tx-flow small { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .tx-flow li { animation: tx-lit 8s var(--ease) calc(var(--n) * 2s) infinite backwards; }
  .tx-flow b { animation: tx-lit-b 8s var(--ease) calc(var(--n) * 2s) infinite backwards; }
  .tx-flow small { animation: tx-lit-s 8s var(--ease) calc(var(--n) * 2s) infinite backwards; }
}
@keyframes tx-lit { 0%, 27%, 100% { background: transparent; box-shadow: none; transform: none; } 4%, 23% { background: var(--navy); box-shadow: 0 18px 30px -20px rgba(20, 65, 84, .8); transform: scale(1.03); } }
@keyframes tx-lit-b { 0%, 27%, 100% { color: var(--ink); } 4%, 23% { color: #fff; } }
@keyframes tx-lit-s { 0%, 27%, 100% { color: var(--muted); } 4%, 23% { color: #C5D6DF; } }
.anim-paused .tx-flow li, .anim-paused .tx-flow b, .anim-paused .tx-flow small { animation: none !important; }
@media (max-width: 800px) { .page-hero-media.tx-hero-media { order: 0; max-width: none; width: 100%; } }
/* the call card's phone: rings twice as the card comes into view */
.tx-phone { position: relative; justify-self: start; width: 58px; height: 58px; border-radius: 16px; background: rgba(110, 160, 217, .18); box-shadow: inset 0 0 0 1px rgba(110, 160, 217, .35); display: grid; place-items: center; margin-bottom: 8px; }
.tx-phone .bi { width: 58px; height: 58px; border-radius: 16px; }
.tx-phone::before, .tx-phone::after { content: ''; position: absolute; inset: 0; border-radius: 16px; border: 2px solid rgba(141, 182, 230, .6); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .tx-start.is-in .tx-phone::before { animation: tx-ring 1.8s var(--ease) .5s 2; }
  .js-motion .tx-start.is-in .tx-phone::after { animation: tx-ring 1.8s var(--ease) 1.1s 2; }
  .js-motion .tx-start.is-in .tx-phone .ico { animation: tx-wiggle 1.8s ease .5s 2; }
}
@keyframes tx-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes tx-wiggle { 0%, 45%, 100% { transform: none; } 8%, 24% { transform: rotate(-14deg); } 16%, 32% { transform: rotate(14deg); } }
.anim-paused .tx-phone::before, .anim-paused .tx-phone::after, .anim-paused .tx-phone .ico { animation: none !important; }

/* the prescribers page's band for practices and platforms: the pitch and its button, beside three points on brand
   icons that rise in turn */
.pp-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 4.5vw, 56px); border-radius: var(--r-xl); background: var(--navy); color: #fff; box-shadow: 0 30px 60px -40px rgba(20, 65, 84, .8); }
.pp-copy { display: grid; gap: 14px; justify-items: start; }
.pp-copy .eyebrow { color: #A9C8EA; }
.pp-copy h2 { color: #fff; }
.pp-copy p { color: rgba(255, 255, 255, .8); font-size: 18px; line-height: 1.55; max-width: 40ch; }
.pp-copy .btn { margin-top: 8px; }
.pp-points { list-style: none; margin: 0; padding: 0; display: grid; }
.pp-points li { --n: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .74); font-size: 15.5px; line-height: 1.5; }
.pp-points li:first-child { border-top: 0; }
.pp-points li:nth-child(2) { --n: 1; } .pp-points li:nth-child(3) { --n: 2; }
.pp-points .bi { width: 48px; height: 48px; }
.pp-points b { display: block; margin-bottom: 2px; color: #fff; font-size: 16.5px; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .pp-band.rv li { opacity: 0; transform: translateX(18px); transition: opacity .6s ease calc(.2s + var(--n) * .16s), transform .7s var(--ease) calc(.2s + var(--n) * .16s); }
  .js-motion .pp-band.rv.is-in li { opacity: 1; transform: none; }
}
.anim-paused .pp-points li { opacity: 1 !important; transform: none !important; }
@media (max-width: 860px) { .pp-band { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------- the partners page: how we work with partners
   A navy card of four principles, each on a brand icon; the rows rise in turn as the card scrolls into view. */
.pw-card { margin-top: 8px; padding: 26px 26px 10px; border-radius: var(--r-xl); background: var(--navy); color: #fff; box-shadow: 0 30px 60px -40px rgba(20, 65, 84, .8); }
.pw-card .eyebrow { color: #A9C8EA; }
.pw-list { list-style: none; margin: 14px 0 0; padding: 0; }
.pw-list li { --n: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.pw-list li:nth-child(2) { --n: 1; } .pw-list li:nth-child(3) { --n: 2; } .pw-list li:nth-child(4) { --n: 3; }
.pw-list .bi { width: 44px; height: 44px; }
.pw-list b { display: block; margin-bottom: 2px; font-size: 16.5px; font-weight: 600; color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .pw-card.rv li { opacity: 0; transform: translateY(14px); transition: opacity .6s ease calc(.15s + var(--n) * .16s), transform .7s var(--ease) calc(.15s + var(--n) * .16s); }
  .js-motion .pw-card.rv.is-in li { opacity: 1; transform: none; }
}
.anim-paused .pw-card li { opacity: 1 !important; transform: none !important; }

/* ---------------------------------------------------------------------- the refill page
   As each scrolls into view (site.js .rv): the checklist ticks itself off, one card after another, and the supply bar
   runs down to the last week, where a pin drops and the flag says to reorder. Still, and complete, with reduced motion
   or while paused. */
.rf-split { align-items: start; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
@media (max-width: 860px) { .rf-split { grid-template-columns: minmax(0, 1fr); } }
.rf-main > h2:first-child { margin-top: 0; }
.prose .rf-sub { margin-top: .5em; font-size: 16px; color: var(--muted); }
.prose .rf-check { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 12px; }
.prose .rf-check li { --n: 0; margin: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr) 28px; column-gap: 16px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: 0 14px 30px -26px rgba(20, 65, 84, .45); font-size: 16px; line-height: 1.5; color: var(--muted); }
.rf-check li:nth-child(2) { --n: 1; } .rf-check li:nth-child(3) { --n: 2; }
.rf-check .bi, .rf-check .tx-tile { width: 48px; height: 48px; margin: 0; border-radius: 12px; }
.rf-check .tx-tile .ico { width: 26px; height: 26px; }
.rf-check b { display: block; margin-bottom: 2px; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.rf-tick { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); display: grid; place-items: center; }
.rf-tick::before { content: ''; width: 14px; height: 14px; background: #fff; -webkit-mask: url('/img/brand/icons/ui/check.svg') center / contain no-repeat; mask: url('/img/brand/icons/ui/check.svg') center / contain no-repeat; }
.rf-supply { margin-top: 18px; padding: 20px 22px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: 0 14px 30px -26px rgba(20, 65, 84, .45); font-size: 14px; line-height: 1.4; }
.rf-supply-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.rf-supply-head b { font-size: 15px; color: var(--ink); }
.rf-flag { padding: 5px 12px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 600; }
.rf-track { position: relative; height: 14px; margin-top: 16px; border-radius: 999px; background: var(--tint); }
.rf-window { position: absolute; inset: 0 auto 0 0; width: 25%; border-radius: 999px 0 0 999px; background: repeating-linear-gradient(-45deg, rgba(110, 160, 217, .28) 0 5px, transparent 5px 10px); }
.rf-fill { position: absolute; inset: 0 auto 0 0; width: 25%; border-radius: 999px; background: linear-gradient(90deg, var(--navy), #6EA0D9); }
.rf-pin { position: absolute; left: 25%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; border: 5px solid var(--navy); box-shadow: 0 6px 14px -6px rgba(20, 65, 84, .6); }
.rf-scale { position: relative; height: 18px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.rf-scale span { position: absolute; top: 0; }
.rf-scale span:nth-child(1) { left: 0; } .rf-scale span:nth-child(2) { left: 25%; transform: translateX(-50%); } .rf-scale span:nth-child(3) { right: 0; }
.rf-ask { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; align-items: start; padding: 20px 22px; border-radius: var(--r-lg); background: var(--tint-2); }
.prose .rf-ask p { margin: 0; font-size: 16px; line-height: 1.6; }
.rf-ask .bi { width: 56px; height: 56px; }
.rf-aside { position: sticky; top: calc(var(--head-h) + var(--util-h) + 24px); }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .rf-check.rv { transform: none; }
  .js-motion .rf-check.rv li { opacity: 0; transform: translateY(18px); transition: opacity .6s ease calc(var(--n) * .5s), transform .7s var(--ease) calc(var(--n) * .5s); }
  .js-motion .rf-check.rv .rf-tick { background: transparent; box-shadow: inset 0 0 0 2px #C9D6E3; transition: background-color .3s ease calc(.6s + var(--n) * .5s), box-shadow .3s ease calc(.6s + var(--n) * .5s); }
  .js-motion .rf-check.rv .rf-tick::before { transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) calc(.7s + var(--n) * .5s); }
  .js-motion .rf-check.rv.is-in li { opacity: 1; transform: none; }
  .js-motion .rf-check.rv.is-in .rf-tick { background: var(--navy); box-shadow: none; animation: step-halo 1s ease-out calc(.7s + var(--n) * .5s) 1 backwards; }
  .js-motion .rf-check.rv.is-in .rf-tick::before { transform: none; }
  .js-motion .rf-supply.rv .rf-fill { width: 100%; transition: width 2.2s cubic-bezier(.45, 0, .25, 1) .3s; }
  .js-motion .rf-supply.rv .rf-pin, .js-motion .rf-supply.rv .rf-flag { transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) 2.4s; }
  .js-motion .rf-supply.rv .rf-flag { transform-origin: 100% 50%; }
  .js-motion .rf-supply.rv.is-in .rf-fill { width: 25%; }
  .js-motion .rf-supply.rv.is-in .rf-pin, .js-motion .rf-supply.rv.is-in .rf-flag { transform: none; }
  .js-motion .rf-supply.rv.is-in .rf-pin { animation: step-halo 1.1s ease-out 2.6s 1 backwards; }
}
.anim-paused .rf-check li, .anim-paused .rf-tick, .anim-paused .rf-tick::before, .anim-paused .rf-pin, .anim-paused .rf-flag { opacity: 1 !important; transform: none !important; animation: none !important; }
.anim-paused .rf-tick { background: var(--navy) !important; box-shadow: none !important; }
.anim-paused .rf-fill { width: 25% !important; }
@media (max-width: 860px) { .rf-aside { position: static; } }
@media (max-width: 520px) {
  .prose .rf-check li { grid-template-columns: 44px minmax(0, 1fr) 24px; column-gap: 12px; padding: 14px; }
  .rf-check .bi, .rf-check .tx-tile { width: 44px; height: 44px; }
  .rf-tick { width: 24px; height: 24px; }
  .rf-ask { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; }
  .rf-ask .bi { width: 48px; height: 48px; }
}
.tx-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.tx-rule { border: 1px solid var(--line); border-radius: var(--r); padding: 22px; background: #fff; display: grid; gap: 8px; align-content: start; }
.tx-rule b { font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.tx-rule span { font-size: 16px; color: var(--muted); }
.tx-rule i { font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
@media (max-width: 1000px) { .tx-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tx-rules { grid-template-columns: minmax(0, 1fr); } }
.form-slot { border: 2px dashed var(--line-2); border-radius: var(--r); padding: 28px; display: grid; gap: 12px; background: var(--tint-2); }

/* The prescribers' information request (src/pages/prescribers/request-information.html, tools/build.py info_request):
   a tile per therapeutic category in its area's colours, ticked when chosen; then who's asking and what they'd like */
.ir-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.ir-aside { display: grid; gap: 16px; position: sticky; top: calc(var(--head-h) + var(--util-h) + 24px); }
.ir-aside .steps { grid-auto-flow: row; gap: 0; }
.ir-aside .steps li { grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding-bottom: 18px; }
.ir-aside .steps li:last-child { padding-bottom: 0; }
.ir-aside .steps li::before { grid-row: 1 / span 2; margin: 0; width: 34px; height: 34px; font-size: 15px; box-shadow: none; }
.ir-aside .steps b { font-size: 17px; padding-top: 6px; }
.ir-aside .steps span { font-size: 15px; }
.ir-aside .steps li:not(:last-child)::after { top: 42px; bottom: 6px; left: 16px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--brand), var(--sky)); }
@media (max-width: 960px) { .ir-layout { grid-template-columns: minmax(0, 1fr); } .ir-aside { position: static; } }
.ir { display: grid; gap: 34px; }
.ir-set { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }
.ir-legend { display: flex; align-items: center; gap: 12px; padding: 0; font-size: 22px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); margin-bottom: 4px; }
.ir-step { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 15px; font-weight: 700; display: grid; place-items: center; }
.ir-help { color: var(--muted); font-size: 15px; margin-top: -6px; }
.ir-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.ir-cat { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 44px 14px 14px; border-radius: 18px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.ir-cat:hover { border-color: var(--a-bd, var(--line-2)); }
.ir-cat input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ir-cat:has(input:checked) { border-color: var(--a-ink, var(--navy)); background: var(--a-tint, var(--tint)); box-shadow: inset 0 0 0 1px var(--a-ink, var(--navy)); }
.ir-cat:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.ir-chip { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; }
.ir-chip img { width: 100%; height: 100%; object-fit: cover; }
.ir-chip-more { display: grid; place-items: center; background: var(--tint); color: var(--navy); font-size: 28px; font-weight: 500; }
.ir-cat-body { display: grid; gap: 3px; min-width: 0; }
.ir-cat-name { font-weight: 600; font-size: 17px; color: var(--ink); }
.ir-cat-eg { font-size: 14px; color: var(--muted); line-height: 1.35; }
.ir-tick { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; padding: 4px; border-radius: 50%; border: 1.5px solid var(--line-2); color: transparent; background: #fff; transition: background-color .15s, border-color .15s, color .15s; }
.ir-cat:has(input:checked) .ir-tick { background: var(--a-ink, var(--navy)); border-color: var(--a-ink, var(--navy)); color: #fff; }
.ir-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
@media (max-width: 620px) { .ir-grid { grid-template-columns: minmax(0, 1fr); } }
.ir-field { display: grid; gap: 6px; }
.ir-more { display: grid; gap: 14px; margin-top: 16px; }
.ir-more-list { display: grid; gap: 14px; }
.ir-more-list:empty { display: none; }
.ir-more-row { border: 1.5px dashed var(--line-2); border-radius: 18px; padding: 18px; background: var(--tint-2); display: grid; gap: 12px; animation: ir-in .35s var(--ease); }
@keyframes ir-in { from { opacity: 0; transform: translateY(-6px); } }
.ir-more-add { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 15.5px; font-weight: 600; color: var(--navy); background: #fff;
  border: 1.5px solid var(--line-2); border-radius: 999px; padding: 10px 18px; cursor: pointer; transition: border-color .2s, background .2s; }
.ir-more-add span { font-size: 20px; line-height: 1; }
.ir-more-add:hover { border-color: var(--navy); background: var(--tint); }
.ir-more-remove { justify-self: start; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--muted); background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ir-more-remove:hover { color: var(--ink); }
.ir-wide { grid-column: 1 / -1; }
.ir-field label { font-weight: 600; font-size: 15px; color: var(--ink); }
.ir-opt { font-weight: 400; color: var(--muted); }
.ir-field input, .ir-field select, .ir-field textarea { width: 100%; font: inherit; font-size: 17px; min-height: 52px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--line-2); background: #fff; color: var(--ink); }
.ir-field textarea { min-height: 120px; resize: vertical; line-height: 1.45; }
.ir-field input:focus, .ir-field select:focus, .ir-field textarea:focus { border-color: var(--blue); outline: 3px solid var(--sky); outline-offset: 0; }
.ir-field input[aria-invalid="true"] { border-color: #B42318; }
.ir-wants { display: grid; gap: 10px; }
.ir-want { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; color: var(--ink-2); cursor: pointer; }
.ir-want input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--navy); }
.ir-phi { font-size: 15px; color: var(--ink-2); background: var(--tint-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
.ir-error { color: #B42318; font-weight: 600; font-size: 15px; }
.ir-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ir-alt { color: var(--muted); font-size: 15px; }
.ir-done { display: grid; gap: 8px; }
.ir-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* the robots' trap (tools/build.py form_open) */
.ir-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .ir-checks { grid-template-columns: minmax(0, 1fr); } }
.ir-field input[aria-invalid="true"], .ir-field select[aria-invalid="true"] { border-color: #B42318; }
.ir.is-sent > :not(.ir-done) { display: none; }   /* sent: only the thanks stay */
.ir.is-sending .btn { opacity: .6; pointer-events: none; }
.ir-done[hidden] { display: none; }


/* phones: lighter top bar, two-up care cards and numbers */
@media (max-width: 700px) {
  .util-note, .util-hide-sm { display: none; }
  .util .wrap { justify-content: center; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div + div { border-left: 0; }
  .stats > div:nth-child(even) { border-left: 1px solid var(--line); }
  .stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .door-links a { font-size: 17px; flex-wrap: wrap; }
  .door-links small { width: 100%; }
}
/* ------------------------------------------------------------------------------------------------ footer */
.site-foot { background: var(--navy); color: #C5D6DF; font-size: 15.5px; margin-top: clamp(48px, 6vw, 80px); }
.site-foot a { color: #D4DEE5; text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 32px; padding-block: 64px 40px; }
@media (max-width: 1000px) { .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot-top { grid-template-columns: minmax(0, 1fr); } }
.foot-brand img { height: 44px; width: auto; margin-bottom: 18px; }
.foot-brand p + p { margin-top: 8px; }
.foot-col h2 { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #fff; font-weight: 600; margin-bottom: 14px; }
.foot-col ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.foot-seals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; list-style: none; padding: 0; }
.foot-seals abbr { text-decoration: none; }
/* the footer's seals: LegitScript, NABP and .Pharmacy in a row, the last two on white cards so they read on the navy */
.foot-dot img { width: 136px; }
.nabp-seal { margin-top: 18px; padding: 20px; display: inline-block; }   /* NABP asks for clear space around the seal, at least 60 px wide */
.foot-seals li { border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: #fff; }
/* every licensed state's page, linked from every page */
.foot-states { border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 24px; display: grid; gap: 12px; }
.foot-states h2 { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #fff; font-weight: 600; }
.foot-states ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14.5px; }
.foot-legal { border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 24px 36px; font-size: 13.5px; color: #A9BFCB; display: grid; gap: 10px; }
.foot-legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* reveal on scroll: a short upward drift as a section arrives. Content is never hidden (screenshots, print,
   crawlers and slow observers all see it); only when JS is on and motion is allowed (site.js adds .js-motion). */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .rv { transform: translateY(16px); transition: transform .8s var(--ease); }
  .js-motion .rv.is-in { transform: none; }
}
.anim-paused .rv { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }

@media print {
  .util, .site-head, .site-foot, .hero-visual, .burger, .toc { display: none !important; }
  body { font-size: 12pt; }
  a { color: inherit; }
  .bi * { animation: none !important; }
}

/* formulary cards (the StackRx storefront's product card, sized for a list of preparations) */
.fx-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; height: 100%; padding: 12px 16px 12px 12px; border: 1px solid var(--line); border-radius: 18px; background: #fff; text-decoration: none; color: var(--ink); transition: border-color .2s, box-shadow .25s var(--ease), transform .25s var(--ease); }
.fx-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px); color: var(--ink); }
.fx-media { width: 76px; height: 76px; border-radius: 14px; background: radial-gradient(circle at 50% 40%, #E6EEF4, var(--tint-2)); display: grid; place-items: center; overflow: hidden; }
.fx-media img { width: 86%; height: 86%; object-fit: contain; transition: transform .35s var(--ease); }
.fx-card:hover .fx-media img { transform: translateY(-3px) rotate(-4deg); }
.fx-body { display: grid; gap: 3px; min-width: 0; }
.fx-item { border: 0; padding: 0; background: none; }
.fx-item:target .fx-card { border-color: var(--blue); box-shadow: 0 0 0 3px var(--sky); }

/* a preparation's page (the StackRx storefront's product page layout: the render on a tinted stage beside the facts) */
.item-hero { padding-block: clamp(24px, 3vw, 40px) clamp(40px, 5vw, 64px); background: linear-gradient(180deg, var(--tint-2), #fff); }
.item-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .item-grid { grid-template-columns: minmax(0, 1fr); } }
.item-stage { border-radius: var(--r-xl); background: radial-gradient(80% 80% at 50% 40%, #E1ECF3, #F2F6F9); aspect-ratio: 1; display: grid; place-items: center; max-width: 560px; width: 100%; }
.item-stage img { width: 74%; filter: drop-shadow(0 26px 30px rgba(20, 65, 84, .14)); }
.item-info h1 { font-size: clamp(36px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -.03em; }
.item-info .lede { margin-top: 16px; }
.item-facts { margin: 24px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.item-facts div { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); }
.item-facts dt { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.item-facts dd { margin: 3px 0 0; font-weight: 500; }
.item-note { margin-top: 18px; font-size: 14px; color: var(--muted); }
.bx-static .checks { margin-top: 18px; }

/* ------------------------------------------------------------------------------- StackRx page patterns
   Borrowed from the StackRx storefront's page design and set in LCP's type and blues: each care area has three
   colours (src/data/care.json), handed down as --a-bd (render backdrop), --a-tint (pale) and --a-ink (deep) by
   whatever element carries the area (tools/build.py area_vars). */

/* the render's stage: the area's backdrop with the Blender kit's light, darker corners and a lighter diagonal beam.
   The renders are calibrated to the same colour, so a square render sits in a taller stage without a seam. */
.stage { position: relative; display: grid; place-items: center; overflow: hidden; isolation: isolate; background-color: var(--a-bd, #A9C6EA);
  background-image: linear-gradient(118deg, transparent 30%, color-mix(in oklab, var(--a-bd, #A9C6EA) 72%, white) 50%, transparent 70%),
    radial-gradient(130% 120% at 50% 40%, var(--a-bd, #A9C6EA) 36%, color-mix(in oklab, var(--a-bd, #A9C6EA) 82%, black) 100%); }
.stage > img { width: 74%; height: auto; object-fit: contain; filter: drop-shadow(0 22px 26px rgba(17, 19, 34, .25)); }
.stage > img.f-cover { width: 100%; height: 100%; object-fit: cover; filter: none; }
/* a product loop (tools/build.py product_media) or its first frame: rendered on the area's backdrop already, so it fills
   the slot edge to edge, without the stills' drop shadow or hover tilt */
.stage > .loop.loop { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: none; transform: none; }
/* The loops are square. In a frame that isn't (the homepage panels' tall windows, the "made for one patient" card, a
   care page's header on a phone) a loop used to fill the frame and lose its edges: a vial's side, a syringe's ends
   (the owner, November 2026). There it now keeps its whole picture, centred at the frame's shorter side, its edges
   feathered into the stage's own backdrop, which carries the render's colour and light. */
.pn-win, .made-media, .cat-hero-art { container-type: size; }
.pn-win > .loop.loop, .made-media > .loop.loop, .cat-hero-art > .loop.loop { position: relative; inset: auto; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); }
@container (aspect-ratio < 1 / 1) {   /* a tall frame: the loop's top and bottom edges dissolve into the stage */
  .stage > .loop.loop { -webkit-mask-image: linear-gradient(180deg, transparent, #000 11%, #000 89%, transparent); mask-image: linear-gradient(180deg, transparent, #000 11%, #000 89%, transparent); }
}
@container (aspect-ratio > 1 / 1) {   /* a wide frame: its sides do */
  .stage > .loop.loop { -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent); mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent); }
}

/* the area's dot, before an eyebrow or a small label */
.dot-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--a-ink, var(--blue)); margin-bottom: 14px; }
.dot-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--a-ink, var(--blue)); }
.dot-eyebrow i, .dot-label i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--a-ink, var(--brand)); }
.dot-label i { width: 7px; height: 7px; }
.area-tint { background: var(--a-tint, var(--tint-2)); }
.area-note { background: var(--a-tint, var(--tint)); }

/* homepage: the care areas as opening panels (the StackRx storefront's "Start with what matters to you") */
.pns { display: flex; flex-direction: column; gap: 10px; }
.pn { position: relative; border-radius: 24px; overflow: hidden; background: var(--a-tint); color: var(--ink); }
.pn.is-open, .pns:not(.pns-js) .pn { background: var(--a-ink); color: #fff; }
.pn-tab { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "chip name chev" "chip count chev"; align-items: center; column-gap: 14px; row-gap: 2px; width: 100%; min-height: 76px; padding: 12px 18px 12px 12px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.pns:not(.pns-js) .pn-chev { display: none; }
.pn-chip { grid-area: chip; width: 52px; height: 52px; border-radius: 50%; transition: transform .4s var(--ease); }
.pn-chip img { width: 76%; filter: drop-shadow(0 4px 5px rgba(17, 19, 34, .25)); }
.pn-tab:hover .pn-chip { transform: scale(1.07); }
.pn-name { grid-area: name; align-self: end; font-weight: 600; font-size: 21px; line-height: 1.15; letter-spacing: -.015em; }
.pn-count { grid-area: count; align-self: start; font-size: 13.5px; font-weight: 500; opacity: .82; }
.pn-chev { grid-area: chev; width: 20px; height: 20px; transition: transform .3s ease; }
.pn.is-open .pn-chev { transform: rotate(180deg); }
.pns-js .pn:not(.is-open):not(.is-closing) .pn-body { display: none; }
.pns-js .pn { transition: background-color .5s ease; }
/* the panels' motion (site.js explains the choreography): content fades out first when a panel closes; when one
   opens, its window comes in and its text rises in line by line */
.pns-js .pn.is-closing .pn-body { opacity: 0; transition: opacity .2s ease; }
@media (prefers-reduced-motion: no-preference) {
  .pns-moved .pn.is-open .pn-win { animation: pn-win .9s cubic-bezier(.2, .7, .2, 1) .16s both; }
  .pns-moved .pn.is-open :is(.pn-kicker, .pn-title, .pn-blurb, .pn-go, .pn-sub, .pn-list li, .pn-cta) { animation: pn-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .pns-moved .pn.is-open .pn-kicker { animation-delay: .24s; }
  .pns-moved .pn.is-open .pn-title { animation-delay: .29s; }
  .pns-moved .pn.is-open .pn-blurb { animation-delay: .34s; }
  .pns-moved .pn.is-open .pn-go { animation-delay: .39s; }
  .pns-moved .pn.is-open .pn-sub { animation-delay: .44s; }
  .pns-moved .pn.is-open .pn-list li { animation-delay: calc(.48s + var(--n, 0) * 45ms); }
  .pns-moved .pn.is-open .pn-list li:nth-child(2) { --n: 1; }
  .pns-moved .pn.is-open .pn-list li:nth-child(3) { --n: 2; }
  .pns-moved .pn.is-open .pn-list li:nth-child(4) { --n: 3; }
  .pns-moved .pn.is-open .pn-list li:nth-child(5) { --n: 4; }
  .pns-moved .pn.is-open .pn-cta { animation-delay: .74s; }
  .anim-paused .pns-moved .pn * { animation: none !important; }
}
@keyframes pn-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes pn-win { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes pn-win-wide { from { opacity: 0; transform: translateX(36px) scale(.96); } }
.pn-body { padding: 0 14px 18px; }
.pn-win { position: relative; aspect-ratio: 1; border-radius: 16px; }
.pn-win img { width: 72%; transition: transform .8s var(--ease); }
.pn-win:hover img { transform: scale(1.04) rotate(-2deg); }
.pn-copy { display: flex; flex-direction: column; gap: 12px; padding: 16px 4px 0; }
.pn-kicker { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.pn-title { font-size: 40px; line-height: 1.02; letter-spacing: -.025em; font-weight: 700; outline: 0; }
.pn-blurb { font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.pn-go { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px; border-radius: 999px; background: #fff; color: var(--a-ink); font-weight: 600; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.pn-go:hover { color: var(--a-ink); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.pn-go svg, .pn-cta svg { width: 16px; height: 16px; flex: none; }
.pn-sub { padding-top: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.pn-list { list-style: none; padding: 0; border-top: 1px solid rgba(255, 255, 255, .24); }
.pn-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .24); color: #fff; text-decoration: none; font-size: 15px; }
.pn-list a:hover { color: #fff; }
.pn-list a:hover .pn-pname, .pn-list a.is-on .pn-pname { text-decoration: underline; text-underline-offset: 4px; }
/* the window cross-fades to a preparation pointed at in the list (site.js): a still of what was showing, laid exactly
   over it (site.js gives it the loop's own box), fading out; nothing grows or shrinks (the owner, November 2026: the
   old product "zooms in ... clunky looking": the still had filled the whole window, bigger than the square loop) */
.pns .pn-win .pn-ghost { position: absolute; z-index: 1; max-width: none; object-fit: contain; transform: none; pointer-events: none;
  transition: opacity .7s cubic-bezier(.4, 0, .2, 1);
  /* its edges feathered: a frame grabbed from a video draws a shade darker than the video, so a hard edge would show */
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent); mask-image: radial-gradient(closest-side, #000 60%, transparent); }
.pns .pn-win .pn-ghost.out { opacity: 0; }
.pn-pname { font-weight: 600; }
.pn-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: #fff; font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 5px; }
.pn-cta:hover { color: #fff; text-decoration-color: currentColor; }
.pn :focus-visible { outline-color: currentColor; }
/* the tab already names the area, so the open panel doesn't repeat it (screen readers still get the heading) */
@media (max-width: 1239px) {
  .pns-js .pn-title, .pns-js .pn-kicker { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pn-go { align-self: stretch; }
}
@media (min-width: 720px) and (max-width: 1239px) {
  .pns-js .pn.is-open .pn-body, .pns-js .pn.is-closing .pn-body, .pns:not(.pns-js) .pn-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; padding: 0 18px 22px; }
  .pn-copy { padding-top: 0; }
}
@media (min-width: 1240px) {
  .pns-js { flex-direction: row; gap: 12px; height: 620px; }
  .pns-js .pn { flex: 1 1 0; min-width: 0; border-radius: 28px; transition: flex-grow .85s cubic-bezier(.65, 0, .35, 1), background-color .5s ease; }
  .pns-js .pn.is-open { flex-grow: 14; }
  .pns-js .pn:not(.is-open):hover { background: color-mix(in srgb, var(--a-tint) 76%, var(--a-bd)); }
  .pns-js .pn-tab { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0; min-height: 0; padding: 22px 0 30px; }
  .pns-js .pn-chip { width: 44px; height: 44px; }
  .pns-js .pn-name { position: absolute; bottom: 30px; left: 50%; writing-mode: vertical-rl; text-orientation: sideways; transform: translateX(-50%) rotate(180deg); font-size: 25px; line-height: 1; white-space: nowrap; color: var(--a-ink); }   /* at the foot of the strip, on its centre line */
  .pns-js .pn-count, .pns-js .pn-chev { display: none; }
  /* a closed panel's name fades back in once it has narrowed; the opening panel's fades straight out */
  .pns-js .pn-tab { transition: opacity .3s ease .45s, visibility 0s .45s; }
  .pns-js .pn.is-open .pn-tab { visibility: hidden; opacity: 0; transition: opacity .15s ease, visibility 0s .15s; }
  /* the content is laid out at the width the panel opens to and uncovered as it widens; closed, it stays laid out
     but hidden, so closing can fade it rather than cut it */
  .pns-js .pn-body { position: absolute; inset: 0 auto 0 0; width: var(--pn-w, 100%); padding: 0; }
  .pns-js .pn:not(.is-open):not(.is-closing) .pn-body { display: block; visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility 0s .2s; }
  .pns-js .pn.is-open .pn-body { transition: opacity .3s ease .1s; }
  @media (prefers-reduced-motion: no-preference) {
    .pns-moved .pn.is-open .pn-win { animation-name: pn-win-wide; }
  }
  .pns-js .pn-win { position: absolute; top: 20px; right: 20px; bottom: 20px; width: min(460px, calc(100% - 352px)); aspect-ratio: auto; border-radius: 20px; }
  .pns-js .pn-win img { width: 88%; max-width: 420px; }
  .pns-js .pn-copy { position: absolute; top: 0; left: 0; bottom: 0; width: 332px; padding: 36px 30px 32px 36px; gap: 14px; }
  .pns-js .pn-sub { margin-top: auto; }
  .pns-js .pn-list a { min-height: 38px; padding: 4px 0; font-size: 14.5px; }
}

/* care area tiles (the StackRx storefront's category tiles): the render on its backdrop over the area's tint */
.care-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.care-card { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--a-tint, var(--tint)); text-decoration: none; color: var(--ink); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.care-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--ink); }
.care-card-media { aspect-ratio: 1; }   /* square, as the loops are, so nothing of the product is cut off */
.care-card-media img { width: 54%; transition: transform .5s var(--ease); }
.care-card:hover .care-card-media img { transform: translateY(-6px) rotate(-3deg); }
.care-card-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 22px 22px; }
.care-card-name { font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.care-card-text { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.care-card-more { background: var(--navy); color: #fff; }
.ccm-media { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 17%; background: radial-gradient(circle at 50% 38%, #22617C, var(--navy) 72%); }
.ccm-media .lc-bowls { left: 50%; bottom: -14%; width: 88%; transform: translateX(-50%); fill-opacity: .09; transition: transform .5s var(--ease); }
.ccm-media .lc-bowls .lc-pestle { fill-opacity: .2; }
.care-card-more:hover .ccm-media .lc-bowls { transform: translateX(-50%) translateY(-6px); }
.ccm-num { font-size: clamp(60px, 6.4vw, 92px); font-weight: 600; letter-spacing: -.05em; line-height: 1; color: #fff; }
.ccm-num small { font-size: .5em; color: #A9C8EA; margin-left: 3px; vertical-align: .55em; }
.ccm-unit { margin-top: 10px; font-size: 14px; color: #C5D6DF; text-align: center; padding: 0 16px; }
.care-card-more .dot-label { color: #A9C8EA; }
.care-card-more .dot-label i { background: #A9C8EA; }
.care-card-more .care-card-name, .care-card-more:hover { color: #fff; }
.care-card-more .care-card-text { color: #C5D6DF; }
.care-card-forms { margin-top: 6px; font-weight: 600; font-size: 15px; color: #fff; }
@media (max-width: 700px) {
  .care-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .care-card { border-radius: var(--r); }
  .care-card-body { padding: 12px 14px 16px; }
  .care-card-name { font-size: 17px; }
  .care-card .dot-label, .care-card-text { display: none; }
}

/* a preparation as the StackRx storefront's product card */
.pc-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 18px; }
.fx-list.pc-grid { gap: 18px; }
.pc { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; text-decoration: none; color: var(--ink); transition: box-shadow .2s ease, transform .2s var(--ease); }
.pc:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); color: var(--ink); }
.pc-media { aspect-ratio: 1; }
.pc-media img { width: 62%; transition: transform .35s var(--ease); }
.pc:hover .pc-media img { transform: translateY(-6px) rotate(-3deg); }
.pc-badge { position: absolute; top: 14px; left: 14px; z-index: 1; font-size: 12px; font-weight: 600; background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 11px; box-shadow: 0 1px 2px rgba(17, 19, 34, .08); }
.pc-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.pc-name { font-size: 19px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.pc-go { margin-top: auto; padding-top: 8px; font-size: 14.5px; font-weight: 600; color: var(--a-ink, var(--blue)); display: inline-flex; gap: 6px; }
.pc-go::after { content: '→'; transition: transform .2s var(--ease); }
.pc:hover .pc-go::after { transform: translateX(3px); }
.fx-item:target .pc { border-color: var(--blue); box-shadow: 0 0 0 3px var(--sky); }
.pc-row { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
@media (max-width: 700px) {
  .pc-grid, .fx-list.pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pc { border-radius: 18px; }
  .pc-body { padding: 12px 12px 14px; }
  .pc-name { font-size: 16px; }
  .pc-badge { font-size: 11px; padding: 4px 8px; top: 10px; left: 10px; }
  .pc .dot-label { font-size: 10.5px; letter-spacing: .06em; }
}
/* the formulary's compact cards: a small stage, and the area's dot by its name */
.fx-media.stage img { width: 80%; filter: drop-shadow(0 6px 8px rgba(17, 19, 34, .22)); }
.fx-area.dot-label { font-size: 11.5px; letter-spacing: .08em; }

/* a care area's page (the StackRx storefront's category page) */
.cat-hero { padding-block: clamp(20px, 3vw, 36px) clamp(48px, 6vw, 80px); }
.cat-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.cat-hero h1 { font-size: clamp(38px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -.03em; }
.cat-hero .lede { margin-top: 18px; }
.cat-hero-art { aspect-ratio: 1; border-radius: 32px; }
.cat-hero-art img { width: 64%; }
@media (max-width: 860px) { .cat-hero-grid { grid-template-columns: minmax(0, 1fr); } .cat-hero-art { aspect-ratio: 4 / 3; border-radius: 24px; } .cat-hero-art img { width: 48%; } }
.catsteps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.catsteps li { --n: 0; position: relative; display: grid; align-content: start; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 24px 24px 28px; overflow: hidden; }
.catsteps li:nth-child(2) { --n: 1; } .catsteps li:nth-child(3) { --n: 2; }
.cs-top { display: flex; align-items: center; justify-content: space-between; }
.catsteps .bi { width: 52px; height: 52px; }
.catsteps .n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--a-ink, var(--navy)); color: #fff; font-weight: 700; font-size: 15px; }
.catsteps h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.catsteps p { color: var(--muted); line-height: 1.55; font-size: 16px; }
/* a bar along each card's foot fills in turn, so the three read as one run from the prescription to the door */
.catsteps li::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--a-ink, var(--navy)); opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .catsteps.rv { transform: none; }
  .js-motion .catsteps.rv li { opacity: 0; transform: translateY(22px); transition: opacity .6s ease calc(var(--n) * .55s), transform .8s var(--ease) calc(var(--n) * .55s); }
  .js-motion .catsteps.rv .n { transform: scale(.3); transition: transform .55s cubic-bezier(.34, 1.56, .64, 1) calc(.25s + var(--n) * .55s); }
  .js-motion .catsteps.rv li::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease) calc(.45s + var(--n) * .55s); }
  .js-motion .catsteps.rv.is-in li, .js-motion .catsteps.rv.is-in .n, .js-motion .catsteps.rv.is-in li::after { opacity: 1; transform: none; }
  .js-motion .catsteps.rv.is-in li::after { opacity: .85; }
  .js-motion .catsteps.rv.is-in .n { animation: cs-halo 1.1s ease-out calc(.45s + var(--n) * .55s) 1 backwards; }
}
@keyframes cs-halo { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--a-ink, #144154) 45%, transparent); } to { box-shadow: 0 0 0 14px transparent; } }
.anim-paused .catsteps li, .anim-paused .catsteps .n, .anim-paused .catsteps li::after { opacity: 1 !important; transform: none !important; animation: none !important; }
.anim-paused .catsteps li::after { opacity: .85 !important; }
@media (max-width: 860px) { .catsteps { grid-template-columns: minmax(0, 1fr); } }

/* care pages: each section a card on its icon, and beside them the card for prescribers (or veterinarians) */
.ap-col { max-width: none; }
.ap-list { display: grid; gap: 14px; }
.prose .ap { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 20px; align-items: start; padding: 24px 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: 0 14px 30px -26px rgba(20, 65, 84, .45); }
.prose .ap + .ap { margin-top: 0; }
.ap .bi { width: 52px; height: 52px; }
.prose .ap h2 { margin-top: 4px; font-size: clamp(21px, 2vw, 24px); }
.ap-body { min-width: 0; font-size: 17px; }
.ap-body > * + * { margin-top: .75em; }
.ap-list > .ap:nth-child(2) { --n: 1; } .ap-list > .ap:nth-child(3) { --n: 2; } .ap-list > .ap:nth-child(4) { --n: 3; }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .ap-list.rv { transform: none; }
  .js-motion .ap-list.rv .ap { opacity: 0; transform: translateY(18px); transition: opacity .6s ease calc(var(--n, 0) * .18s), transform .75s var(--ease) calc(var(--n, 0) * .18s); }
  .js-motion .ap-list.rv.is-in .ap { opacity: 1; transform: none; }
}
.anim-paused .ap { opacity: 1 !important; transform: none !important; }
.area-card { position: sticky; top: calc(var(--head-h) + var(--util-h) + 24px); display: grid; gap: 16px; padding: 26px; border-radius: var(--r-xl); background: var(--a-tint, var(--tint)); border: 1px solid color-mix(in srgb, var(--a-bd, #AEB6C3) 45%, transparent); color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.ac-head { display: flex; align-items: center; gap: 16px; }
.ac-head .bi { width: 56px; height: 56px; flex: none; }
.ac-head .eyebrow { color: var(--a-ink, var(--navy)); }
.ac-h { margin-top: 2px; font-size: 22px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); }
.ac-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.ac-pt { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--a-bd, #AEB6C3) 50%, transparent); }
.ac-pt .bi { width: 40px; height: 40px; }
.ac-pt b { display: block; color: var(--ink); }
@media (max-width: 860px) { .area-card { position: static; } }
@media (max-width: 520px) { .prose .ap { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 20px; } .ap .bi { width: 44px; height: 44px; } .area-card { padding: 22px; } }

/* "Made to the prescription": the StackRx storefront's "Made for you, batch by batch" card */
.made { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid color-mix(in srgb, var(--a-bd, #DCE4EC) 45%, transparent); border-radius: 32px; overflow: hidden; background: var(--a-tint, #fff); }   /* one card in the colours of the loop's area */
.made-media { min-height: 440px; }
.made-media img { width: 60%; }
.made-copy { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: 22px; justify-content: center; }
.made-list { margin: 0; display: grid; border-top: 1px solid var(--line); }
.made-list div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.made-list dt { font-weight: 600; font-size: 17px; }
.made-list dd { margin: 4px 0 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
@media (max-width: 860px) { .made { grid-template-columns: minmax(0, 1fr); border-radius: 24px; } .made-media { min-height: 0; aspect-ratio: 4 / 3; } .made-media img { width: 46%; } }

/* questions: heading on the left (it stays put), the answers as ruled rows with a round plus */
.faqwrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faqwrap > div:first-child { position: sticky; top: calc(var(--head-h) + var(--util-h) + 32px); display: grid; gap: 18px; justify-items: start; }
.faqwrap > div:first-child .eyebrow { margin-bottom: -6px; }
@media (max-width: 860px) { .faqwrap { grid-template-columns: minmax(0, 1fr); } .faqwrap > div:first-child { position: static; } }
.faq { border-top: 1px solid var(--line-2); max-width: 860px; }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-item summary { list-style: none; cursor: pointer; padding: 22px 56px 22px 0; font-weight: 600; font-size: 18px; line-height: 1.4; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ''; position: absolute; right: 0; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; transition: background-color .2s;
  background: var(--a-tint, var(--tint)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312357F' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat; }
.faq-item summary:hover::after { background-color: var(--sky); }
.faq-item[open] summary::after { background-color: var(--sky); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312357F' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.faq-a { padding: 0 56px 22px 0; color: var(--ink-2); }

/* "Questions about a preparation?": the StackRx storefront's "Not sure which one?" band */
.help { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; background: var(--a-tint, var(--tint)); border-radius: 28px; padding: 24px 32px; }
.help-mark { width: 72px; height: 72px; flex: none; }
.help-h { font-size: 24px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; margin-bottom: 4px; }
.help p:not(.help-h) { color: var(--ink-2); }
.help-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.help .btn-line { background: #fff; }
@media (max-width: 860px) { .help { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 16px; } .help-mark { width: 56px; height: 56px; } }

/* a preparation's page: the StackRx storefront's product page (the render big on its backdrop, "What happens next") */
.area .item-hero { background: none; }
.item-stage.stage { border-radius: 32px; }
.item-sub { margin-top: 10px; font-size: 19px; color: var(--muted); }
.next { margin-top: 22px; border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; }
.next-h { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.next-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: n; }
.next-steps li { counter-increment: n; display: grid; align-content: start; gap: 4px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.next-steps li::before { content: counter(n); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--a-tint, var(--tint)); color: var(--a-ink, var(--navy)); font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.next-steps b { color: var(--ink); font-size: 15px; }
@media (max-width: 520px) { .next-steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------- the brand guide's icons (media/brand/)
   UI icons are single-colour and take the text colour (a mask over currentColor); the brand icons are fixed-colour
   tiles in the guide's four colourways (blue, lavender, mist, sage), inline so they can move ("brand icon motion"). */
.ico { display: inline-block; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ico-phone { --ico: url('/img/brand/icons/ui/phone.svg'); }
.ico-send { --ico: url('/img/brand/icons/ui/send.svg'); }
.ico-refill { --ico: url('/img/brand/icons/ui/refill.svg'); }

/* the phone action bar (tools/build.py action_bar): Refill (or Send a prescription) and Call, fixed to the foot of a
   phone's screen; it steps aside while the menu is open or a form field has the keyboard up */
.actionbar { display: none; }
@media (max-width: 760px) {
  .actionbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line); box-shadow: 0 -10px 28px -22px rgba(20, 65, 84, .45); transition: transform .3s var(--ease); }
  .ab-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 12px; border-radius: 999px; font-size: 15.5px; font-weight: 600;
    text-decoration: none; white-space: nowrap; color: var(--navy); background: #fff; border: 1.5px solid var(--navy); }
  .ab-btn:hover { color: var(--navy); background: var(--tint); }
  .ab-call, .ab-call:hover { background: var(--navy); color: #fff; }
  .ab-short { display: none; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  body:has(#site-nav[data-open]) .actionbar, body:has(input:focus, textarea:focus, select:focus) .actionbar { transform: translateY(110%); }
}
@media (max-width: 370px) { .ab-long { display: none; } .ab-short { display: inline; } }   /* the narrowest phones */
@media print { .actionbar { display: none; } }
.ico-search { --ico: url('/img/brand/icons/ui/search.svg'); }
.why { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.why li { display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.why .bi { width: 56px; height: 56px; flex: none; margin-bottom: 8px; }
.why b { font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.why span { color: var(--muted); font-size: 16px; line-height: 1.5; }
@media (max-width: 960px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .why { grid-template-columns: minmax(0, 1fr); } .why li { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; padding: 18px; } .why .bi { margin: 0; width: 48px; height: 48px; } .why b { flex: 1; } .why span { flex-basis: 100%; } }
.made-list dt { display: flex; align-items: center; gap: 12px; }
.made-list dt .bi { width: 40px; height: 40px; flex: none; }
.made-list dd { padding-left: 52px; }
.help-mark { border-radius: 12px; overflow: hidden; }
.help .btn .ico { margin-right: -2px; }
.fx-search { position: relative; }
.fx-search::after { content: ''; position: absolute; left: 18px; bottom: 17px; width: 20px; height: 20px; background: var(--muted); -webkit-mask: url('/img/brand/icons/ui/search.svg') center / contain no-repeat; mask: url('/img/brand/icons/ui/search.svg') center / contain no-repeat; pointer-events: none; }
.fx-search input { padding-left: 50px; }

/* the brand mark beside the quality section: the guide's mortar and pestle, inline (tools/build.py brand_svg), still */
.mark { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }
.split-mark .mark { width: 58%; }
.split-cover .lh-art { max-width: 520px; }   /* the homepage quality section: a cover turning through its standards */

/* ---------------------------------------------------------------------- the header logo's intro
   The logo is inline (tools/build.py brand_svg, @logo) so it can open like a flower: the mortar's overlapping bowls
   unfold from its base one layer at a time, darkest first, each with a soft overshoot, then the pestle drops in and
   the letters follow, about 1.4 s in all. Transforms and opacity only, inside the logo's own box, so nothing shifts.
   It plays only as a page loads: every time the homepage opens (from the stylesheet alone, so it starts with the first
   paint) and on the first page of a visit elsewhere (site.js adds .is-intro). When it has run, site.js marks the logo
   .lg-done, which retires it. Pointing at the logo afterwards stirs it instead (.lg-stir, from site.js): the pestle
   rocks once in the bowl and the bowl's layers swell a touch, one after another; nothing fades or leaves.
   Still with reduced motion or with animations paused. */
.logo .mk-mortar path { transform-box: view-box; transform-origin: 47.8px 58.7px; }   /* the mortar's base */
.logo .mk-pestle { transform-box: fill-box; transform-origin: 50% 100%; }
/* each bowl piece: its layer (--lg-i, darkest first) and how far it starts folded in toward the middle (--lg-r) */
.logo .mk-mortar-piece-04 { --lg-i: 1; --lg-r: 14deg; }
.logo .mk-mortar-piece-07 { --lg-i: 1; --lg-r: -6deg; }
.logo .mk-mortar-piece-08 { --lg-i: 1; --lg-r: -14deg; }
.logo .mk-mortar-piece-02 { --lg-i: 2; --lg-r: 22deg; }
.logo .mk-mortar-piece-05 { --lg-i: 2; }
.logo .mk-mortar-piece-09 { --lg-i: 2; --lg-r: -18deg; }
.logo .mk-mortar-piece-10 { --lg-i: 2; --lg-r: -22deg; }
.logo .mk-mortar-piece-03 { --lg-i: 3; --lg-r: 28deg; }
.logo .mk-mortar-piece-11 { --lg-i: 3; --lg-r: -28deg; }
.logo .mk-mortar-piece-12 { --lg-i: 3; --lg-r: -30deg; }
.logo .mk-mortar-piece-01 { --lg-i: 4; --lg-r: 34deg; }
.logo .mk-letter-C { --lg-i: 1; }
.logo .mk-letter-P { --lg-i: 2; }
@media (prefers-reduced-motion: no-preference) {
  .is-home .logo:not(.lg-done) .mk-mortar path, .logo.is-intro:not(.lg-done) .mk-mortar path { animation: lg-bloom .7s cubic-bezier(.3, 1.35, .55, 1) calc(var(--lg-i, 0) * 90ms) both; }
  .is-home .logo:not(.lg-done) .mk-pestle, .logo.is-intro:not(.lg-done) .mk-pestle { animation: lg-drop .63s var(--ease) .5s both; }
  .is-home .logo:not(.lg-done) .mk-logotype path, .logo.is-intro:not(.lg-done) .mk-logotype path { animation: lg-letter .5s var(--ease) calc(.7s + var(--lg-i, 0) * 80ms) both; }
  .logo.lg-stir .mk-pestle { animation: lg-stir 1s cubic-bezier(.37, 0, .22, 1); }
  .logo.lg-stir .mk-mortar path { animation: lg-swell .7s var(--ease) calc(var(--lg-i, 0) * 55ms); }
}
@keyframes lg-bloom { from { opacity: 0; transform: rotate(var(--lg-r, 0deg)) scale(.3); } 40% { opacity: 1; } }
@keyframes lg-drop { from { opacity: 0; transform: translate(4px, -16px) rotate(-6deg); } 55% { opacity: 1; transform: translate(0, 1.5px) rotate(.6deg); } }
@keyframes lg-letter { from { opacity: 0; transform: translateX(-8px); } }
@keyframes lg-stir { 26% { transform: rotate(9deg); } 56% { transform: rotate(-6deg); } 80% { transform: rotate(2deg); } }
@keyframes lg-swell { 42% { transform: scale(1.055); } }
.anim-paused .logo * { animation: none !important; }

/* ---------------------------------------------------------------------- brand icon motion
   The brand icons are inline (tools/build.py icon_svg), so their white accents and ink lines can move. Each has its
   own short motion that ends on the drawing as the guide has it. site.js holds an icon on its first frame
   (.bi-ready), plays it (.bi-play) once as it scrolls into view, the icons of one row 120 ms apart, and again when its
   card or row is hovered or focused. Without the script, with reduced motion or with animations paused, they're still. */
.bi g, .bi path { transform-box: fill-box; transform-origin: 50% 50%; }
.bi .adjusted-strength-ink-02, .bi .adjusted-strength-ink-04 { transform-origin: 0 50%; }   /* tracks stretch from their outer ends */
.bi .adjusted-strength-ink-03, .bi .adjusted-strength-ink-05 { transform-origin: 100% 50%; }
.bi-ingredient .bi-accent, .bi-ingredient .bi-ink { transform-box: view-box; transform-origin: 48.6px 56.4px; }   /* the centre ring */
.bi .interactions-accent-01, .bi .interactions-ink-02, .bi .interactions-ink-03 { transform-box: view-box; transform-origin: 49.2px 66.4px; }   /* the badge */
.bi .personalized-accent-01, .bi .personalized-ink-03 { transform-box: view-box; transform-origin: 58.4px 32.2px; }   /* the tag's eyelet */
.bi .storage-stability-ink-04, .bi .storage-stability-ink-08 { transform-box: view-box; transform-origin: 27.7px 24.6px; }   /* the clock's centre */
/* the sun and the snowflake turn with their white discs, which have them cut out */
.bi .storage-stability-accent-01, .bi .storage-stability-accent-03, .bi .storage-stability-ink-06 { transform-box: view-box; transform-origin: 72.4px 28.7px; }
.bi .storage-stability-accent-04, .bi .storage-stability-ink-15 { transform-box: view-box; transform-origin: 72.3px 63.5px; }
.bi .myth-vs-fact-accent-02 { --i: 1; } .bi .myth-vs-fact-accent-03 { --i: 2; } .bi .myth-vs-fact-accent-06 { --i: 3; }
.bi .myth-vs-fact-accent-08 { --i: 4; } .bi .myth-vs-fact-accent-09 { --i: 5; } .bi .myth-vs-fact-accent-04 { --i: 6; }
.bi .myth-vs-fact-accent-05 { --i: 7; } .bi .myth-vs-fact-accent-07 { --i: 8; }
@media (prefers-reduced-motion: no-preference) {
  .bi-ready * { animation-duration: 1.2s; animation-timing-function: var(--ease); animation-delay: var(--bi-delay, 0s); animation-fill-mode: both; animation-play-state: paused; }
  .bi-play * { animation-play-state: running; }
  /* adjusted strength: the slider knobs slide along their tracks, past their mark and back */
  .bi-ready .adjusted-strength-accent-03 { animation-name: bi-knob-1; }
  .bi-ready .adjusted-strength-ink-02 { animation-name: bi-track-1l; }
  .bi-ready .adjusted-strength-ink-03 { animation-name: bi-track-1r; }
  .bi-ready .adjusted-strength-accent-04 { animation-name: bi-knob-2; }
  .bi-ready .adjusted-strength-ink-04 { animation-name: bi-track-2l; }
  .bi-ready .adjusted-strength-ink-05 { animation-name: bi-track-2r; }
  .bi-ready .adjusted-strength-accent-04, .bi-ready .adjusted-strength-ink-04, .bi-ready .adjusted-strength-ink-05 { animation-delay: calc(var(--bi-delay, 0s) + .12s); }
  /* alternate dosage: the arrows sweep half a turn round the pills */
  .bi-ready.bi-alternate-dosage .bi-accent { animation-name: bi-sweep; animation-duration: 1.3s; }
  /* ask a pharmacist: the dots bounce in turn, like someone typing */
  .bi-ready.bi-ask-pharmacist .bi-accent path { animation-name: bi-hop; animation-duration: 1s; animation-timing-function: ease-in-out; }
  .bi-ready .ask-pharmacist-accent-02 { animation-delay: calc(var(--bi-delay, 0s) + .14s); }
  .bi-ready .ask-pharmacist-accent-03 { animation-delay: calc(var(--bi-delay, 0s) + .28s); }
  /* cold chain: the thermometer dips and comes back up */
  .bi-ready .cold-chain-accent-01 { animation-name: bi-level; animation-duration: 1.5s; animation-timing-function: ease-in-out; }
  /* ingredient: the molecule rocks on its centre ring and the white atom pulses */
  .bi-ready.bi-ingredient .bi-accent, .bi-ready.bi-ingredient .bi-ink { animation-name: bi-rock; animation-duration: 1.4s; animation-timing-function: ease-in-out; }
  .bi-ready .ingredient-accent-01 { animation-name: bi-pulse; animation-duration: .9s; animation-delay: calc(var(--bi-delay, 0s) + .3s); }
  /* interactions: the warning badge pops in, then shakes */
  .bi-ready .interactions-accent-01, .bi-ready .interactions-ink-02, .bi-ready .interactions-ink-03 { animation-name: bi-badge; animation-duration: 1.3s; }
  /* myth vs fact: the dots fly in from the left and settle into their half circle */
  .bi-ready.bi-myth-vs-fact .bi-accent path { animation-name: bi-fly; animation-duration: .75s; animation-delay: calc(var(--bi-delay, 0s) + var(--i, 0) * 60ms); }
  /* personalized: the tag swings on its string */
  .bi-ready .personalized-accent-01, .bi-ready .personalized-ink-03 { animation-name: bi-swing; animation-duration: 1.6s; animation-timing-function: ease-in-out; }
  /* storage and stability: the clock's hands go round, the sun and the snowflake turn */
  .bi-ready .storage-stability-ink-04 { animation-name: bi-turn; animation-duration: 1.5s; animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  .bi-ready .storage-stability-ink-08 { animation-name: bi-turn-hour; animation-duration: 1.5s; animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  .bi-ready .storage-stability-accent-01, .bi-ready .storage-stability-accent-03, .bi-ready .storage-stability-ink-06 { animation-name: bi-turn-sun; animation-duration: 1.3s; }
  .bi-ready .storage-stability-accent-04, .bi-ready .storage-stability-ink-15 { animation-name: bi-turn-snow; animation-duration: 1.3s; animation-delay: calc(var(--bi-delay, 0s) + .15s); }
  /* third-party tested: the dots pop in one after another */
  .bi-ready.bi-third-party-tested .bi-accent path { animation-name: bi-pop; animation-duration: .6s; }
  .bi-ready .third-party-tested-accent-02 { animation-delay: calc(var(--bi-delay, 0s) + .16s); }
  .bi-ready .third-party-tested-accent-03 { animation-delay: calc(var(--bi-delay, 0s) + .32s); }
}
/* each track stretches or shrinks from its outer end to meet its knob */
@keyframes bi-knob-1 { from { transform: translateX(9px); } 60% { transform: translateX(-2.5px); } }
@keyframes bi-track-1l { from { transform: scaleX(1.203); } 60% { transform: scaleX(.944); } }
@keyframes bi-track-1r { from { transform: scaleX(.338); } 60% { transform: scaleX(1.184); } }
@keyframes bi-knob-2 { from { transform: translateX(-14px); } 60% { transform: translateX(2.5px); } }
@keyframes bi-track-2l { from { transform: scaleX(.402); } 60% { transform: scaleX(1.107); } }
@keyframes bi-track-2r { from { transform: scaleX(1.406); } 60% { transform: scaleX(.928); } }
@keyframes bi-sweep { from { transform: rotate(180deg); } 75% { transform: rotate(-6deg); } }
@keyframes bi-hop { 22% { transform: translateY(-6px); } 50% { transform: none; } 72% { transform: translateY(-3px); } }
@keyframes bi-level { 0%, 100% { clip-path: inset(0 0 0 0); } 45% { clip-path: inset(64% 0 0 0); } }
@keyframes bi-rock { 25% { transform: rotate(-10deg); } 55% { transform: rotate(6deg); } 80% { transform: rotate(-2deg); } }
@keyframes bi-pulse { 40% { transform: scale(1.3); } }
@keyframes bi-badge { from { transform: scale(0); } 30% { transform: scale(1.14); } 44% { transform: none; } 58% { transform: rotate(-12deg); } 72% { transform: rotate(9deg); } 86% { transform: rotate(-4deg); } }
@keyframes bi-fly { from { opacity: 0; transform: translateX(-16px); } 60% { opacity: 1; } 75% { transform: translateX(1.2px); } }
@keyframes bi-swing { 18% { transform: rotate(15deg); } 42% { transform: rotate(-9deg); } 64% { transform: rotate(4.5deg); } 84% { transform: rotate(-1.5deg); } }
@keyframes bi-turn { from { transform: rotate(-360deg); } }
@keyframes bi-turn-hour { from { transform: rotate(-30deg); } }
@keyframes bi-turn-sun { from { transform: rotate(-45deg); } }
@keyframes bi-turn-snow { from { transform: rotate(60deg); } }
@keyframes bi-pop { from { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.18); } }
/* ---------------------------------------------------------------------- brand icon motion, the extended set
   The icons drawn after the guide (media/brand/icons-extra/), each with its own short one-shot motion that
   ends on the drawing, in the manner of the designer's ten in site.css ("brand icon motion"). They lean on the shared
   rules above: .bi g, .bi path take their own box as pivot; .bi-ready holds an icon on its first frame (1.2 s, --ease,
   --bi-delay, fill both, paused); .bi-play runs it; .anim-paused .bi * stops it. site.js adds the classes. Still with
   reduced motion. Keyframes are bix-, so they never
   meet the designer's bi- ones. Lines that write themselves carry pathLength="1" in their SVG. */

/* pivots */
.bi .prescription-accent-01, .bi .prescription-ink-06 { transform-box: view-box; transform-origin: 58.5px 68px; }   /* the capsule */
.bi .pill-bottle-ink-01, .bi .pill-bottle-ink-02 { transform-box: view-box; transform-origin: 50px 20.5px; }   /* the cap */
.bi .syringe-accent-01 { transform-box: view-box; transform-origin: 41.22px 56.88px; }   /* the dose, from its needle end */
.bi .syringe-accent-02 { transform-origin: 50% 0; }
.bi .compounding-ink-03 { transform-box: view-box; transform-origin: 55px 46px; }   /* the pestle, where it meets the rim */
.bi .licensed-accent-01, .bi .licensed-accent-02, .bi .licensed-ink-05 { transform-box: view-box; transform-origin: 66px 59px; }   /* the seal */
.bi .prescriber-ink-02, .bi .prescriber-ink-03, .bi .prescriber-accent-03 { transform-box: view-box; transform-origin: 40.1px 58.37px; }   /* the tube's top */
.bi .hours-ink-02, .bi .hours-ink-03 { transform-box: view-box; transform-origin: 50px 50.12px; }   /* the clock's centre */
.bi-payment .bi-accent, .bi-payment .bi-ink { transform-box: view-box; transform-origin: 50px 75px; }   /* the card's lower edge */
.bi .payment-ink-04, .bi .payment-ink-05 { transform-box: view-box; transform-origin: 67px 41.5px; }   /* the waves' source */
.bi .storefront-ink-01 { transform-origin: 50% 0; }   /* the awning hangs from its top */
.bi-lab-testing .bi-accent, .bi-lab-testing .bi-ink { transform-box: view-box; transform-origin: 50px 83px; }   /* the flask's base */
.bi .calendar-accent-02 { --i: 1; } .bi .calendar-accent-03 { --i: 2; } .bi .calendar-accent-04 { --i: 3; }
.bi .calendar-accent-05 { --i: 4; } .bi .calendar-accent-06 { --i: 5; } .bi .calendar-accent-07 { --i: 6; }
.bi .calendar-accent-08 { --i: 7; } .bi .calendar-accent-09 { --i: 8; } .bi .calendar-accent-10 { --i: 9; }
.bi .calendar-accent-11 { --i: 10; }
.bi .veterinary-ink-03 { --i: 1; } .bi .veterinary-ink-04 { --i: 2; } .bi .veterinary-ink-05 { --i: 3; }

@media (prefers-reduced-motion: no-preference) {
  /* prescription: its lines write themselves, then the capsule drops onto the pad */
  .bi-ready .prescription-ink-03, .bi-ready .prescription-ink-04, .bi-ready .prescription-ink-05 { animation-name: bix-draw; animation-duration: .55s; }
  .bi-ready .prescription-ink-04 { animation-delay: calc(var(--bi-delay, 0s) + .14s); }
  .bi-ready .prescription-ink-05 { animation-delay: calc(var(--bi-delay, 0s) + .28s); }
  .bi-ready .prescription-accent-01, .bi-ready .prescription-ink-06 { animation-name: bix-drop; animation-duration: .9s; animation-delay: calc(var(--bi-delay, 0s) + .36s); }
  /* pill bottle: the cap screws down, then the cross on the label pulses */
  .bi-ready .pill-bottle-ink-01, .bi-ready .pill-bottle-ink-02 { animation-name: bix-cap; animation-duration: 1.1s; }
  .bi-ready .pill-bottle-ink-04 { animation-name: bix-pulse; animation-duration: .7s; animation-delay: calc(var(--bi-delay, 0s) + .5s); }
  /* capsule: the two halves part, and the powder falls from the gap */
  .bi-ready .capsule-ink-01, .bi-ready .capsule-accent-01 { animation-name: bix-part-lo; animation-duration: 1s; }
  .bi-ready .capsule-ink-02 { animation-name: bix-part-up; animation-duration: 1s; }
  .bi-ready .capsule-accent-02, .bi-ready .capsule-accent-03, .bi-ready .capsule-accent-04 { animation-name: bix-fall; animation-duration: .7s; animation-delay: calc(var(--bi-delay, 0s) + .3s); }
  .bi-ready .capsule-accent-03 { animation-delay: calc(var(--bi-delay, 0s) + .42s); }
  .bi-ready .capsule-accent-04 { animation-delay: calc(var(--bi-delay, 0s) + .54s); }
  /* syringe: the plunger goes home, the dose shortens with it, and a drop forms at the tip */
  .bi-ready .syringe-ink-04 { animation-name: bix-push; animation-duration: 1.1s; animation-timing-function: cubic-bezier(.5, 0, .25, 1); }
  .bi-ready .syringe-accent-01 { animation-name: bix-dose; animation-duration: 1.1s; animation-timing-function: cubic-bezier(.5, 0, .25, 1); }
  .bi-ready .syringe-accent-02 { animation-name: bix-drip; animation-duration: .8s; animation-delay: calc(var(--bi-delay, 0s) + .6s); }
  /* mortar and pestle: the pestle grinds, and two motes of powder rise */
  .bi-ready .compounding-ink-03 { animation-name: bix-grind; animation-duration: 1.3s; animation-timing-function: ease-in-out; }
  .bi-ready .compounding-accent-02, .bi-ready .compounding-accent-03 { animation-name: bix-rise; animation-duration: .8s; animation-delay: calc(var(--bi-delay, 0s) + .3s); }
  .bi-ready .compounding-accent-03 { animation-delay: calc(var(--bi-delay, 0s) + .45s); }
  /* delivery: the van pulls in and settles, then its cross pops */
  .bi-ready.bi-delivery .bi-accent, .bi-ready.bi-delivery .bi-ink { animation-name: bix-drive; animation-duration: 1.1s; }
  .bi-ready .delivery-accent-01 { animation-name: bix-pop; animation-duration: .6s; animation-delay: calc(var(--bi-delay, 0s) + .55s); }
  /* calendar: the days pop in one after another, then one is ticked off */
  .bi-ready.bi-calendar .bi-accent path { animation-name: bix-pop; animation-duration: .5s; animation-delay: calc(var(--bi-delay, 0s) + var(--i, 0) * 45ms); }
  .bi-ready .calendar-ink-04 { animation-name: bix-draw; animation-duration: .5s; animation-delay: calc(var(--bi-delay, 0s) + .6s); }
  /* checklist: the boxes pop in, then two are ticked in turn */
  .bi-ready.bi-checklist .bi-accent path { animation-name: bix-pop; animation-duration: .5s; }
  .bi-ready .checklist-accent-02 { animation-delay: calc(var(--bi-delay, 0s) + .1s); }
  .bi-ready .checklist-accent-03 { animation-delay: calc(var(--bi-delay, 0s) + .2s); }
  .bi-ready .checklist-ink-03, .bi-ready .checklist-ink-04 { animation-name: bix-draw; animation-duration: .45s; animation-delay: calc(var(--bi-delay, 0s) + .3s); }
  .bi-ready .checklist-ink-04 { animation-delay: calc(var(--bi-delay, 0s) + .6s); }
  /* licensed: the certificate's lines write themselves, then the seal is stamped on */
  .bi-ready .licensed-ink-02, .bi-ready .licensed-ink-03, .bi-ready .licensed-ink-04 { animation-name: bix-draw; animation-duration: .55s; }
  .bi-ready .licensed-ink-03 { animation-delay: calc(var(--bi-delay, 0s) + .12s); }
  .bi-ready .licensed-ink-04 { animation-delay: calc(var(--bi-delay, 0s) + .24s); }
  .bi-ready .licensed-accent-01, .bi-ready .licensed-accent-02, .bi-ready .licensed-ink-05 { animation-name: bix-stamp; animation-duration: .8s; animation-delay: calc(var(--bi-delay, 0s) + .4s); }
  /* prescriber: the chest piece swings on its tube, and the ear tips bob */
  .bi-ready .prescriber-ink-02, .bi-ready .prescriber-ink-03, .bi-ready .prescriber-accent-03 { animation-name: bix-swing; animation-duration: 1.5s; animation-timing-function: ease-in-out; }
  .bi-ready .prescriber-accent-01, .bi-ready .prescriber-accent-02 { animation-name: bix-hop; animation-duration: .8s; animation-timing-function: ease-in-out; }
  .bi-ready .prescriber-accent-02 { animation-delay: calc(var(--bi-delay, 0s) + .12s); }
  /* support: the ear pads rise like a level, and the mic pulses as if speaking */
  .bi-ready .support-accent-01, .bi-ready .support-accent-02 { animation-name: bix-level; animation-duration: 1s; }
  .bi-ready .support-accent-02 { animation-delay: calc(var(--bi-delay, 0s) + .12s); }
  .bi-ready .support-accent-03 { animation-name: bix-beat; animation-duration: 1s; animation-delay: calc(var(--bi-delay, 0s) + .25s); }
  /* hours: the hour dots pop round the face while the hands go round an hour */
  .bi-ready.bi-hours .bi-accent path { animation-name: bix-pop; animation-duration: .5s; }
  .bi-ready .hours-accent-02 { animation-delay: calc(var(--bi-delay, 0s) + .08s); }
  .bi-ready .hours-accent-03 { animation-delay: calc(var(--bi-delay, 0s) + .16s); }
  .bi-ready .hours-accent-04 { animation-delay: calc(var(--bi-delay, 0s) + .24s); }
  .bi-ready .hours-ink-02 { animation-name: bix-turn; animation-duration: 1.5s; animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  .bi-ready .hours-ink-03 { animation-name: bix-turn-hour; animation-duration: 1.5s; animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  /* payment: the card tips forward as if tapped, its chip pops and the contactless waves go out */
  .bi-ready.bi-payment .bi-accent, .bi-ready.bi-payment .bi-ink { animation-name: bix-tap; animation-duration: 1s; }
  .bi-ready .payment-accent-01 { animation-name: bix-pop; animation-duration: .6s; animation-delay: calc(var(--bi-delay, 0s) + .2s); }
  .bi-ready .payment-ink-04, .bi-ready .payment-ink-05 { animation-name: bix-wave; animation-duration: .6s; animation-delay: calc(var(--bi-delay, 0s) + .35s); }
  .bi-ready .payment-ink-05 { animation-delay: calc(var(--bi-delay, 0s) + .5s); }
  /* storefront: the awning drops into place, then the window and its cross light up. Nothing in it scales: a shape
     grown from a sliver can stay blurry afterwards in some browsers */
  .bi-ready .storefront-ink-01 { animation-name: bix-awning; animation-duration: 1s; }
  .bi-ready .storefront-accent-01, .bi-ready .storefront-ink-04 { animation-name: bix-light; animation-duration: .7s; animation-delay: calc(var(--bi-delay, 0s) + .45s); }
  /* lab testing: the flask swirls on its base, and bubbles rise through it */
  .bi-ready.bi-lab-testing .bi-accent, .bi-ready.bi-lab-testing .bi-ink { animation-name: bix-swirl; animation-duration: 1.4s; animation-timing-function: ease-in-out; }
  .bi-ready .lab-testing-accent-02, .bi-ready .lab-testing-accent-03, .bi-ready .lab-testing-accent-04 { animation-name: bix-bubble; animation-duration: .9s; animation-delay: calc(var(--bi-delay, 0s) + .2s); }
  .bi-ready .lab-testing-accent-03 { animation-delay: calc(var(--bi-delay, 0s) + .36s); }
  .bi-ready .lab-testing-accent-04 { animation-delay: calc(var(--bi-delay, 0s) + .52s); }
  /* veterinary: the toes press down one after another, then the heart in the pad beats */
  .bi-ready .veterinary-ink-02, .bi-ready .veterinary-ink-03, .bi-ready .veterinary-ink-04, .bi-ready .veterinary-ink-05 { animation-name: bix-pop; animation-duration: .55s; animation-delay: calc(var(--bi-delay, 0s) + var(--i, 0) * 100ms); }
  .bi-ready .veterinary-accent-01 { animation-name: bix-beat; animation-duration: 1s; animation-delay: calc(var(--bi-delay, 0s) + .4s); }
}
/* a line writes itself (its path has pathLength="1"; the dash starts just past its end so no cap shows) */
@keyframes bix-draw { from { stroke-dasharray: 1 2; stroke-dashoffset: 1.02; } to { stroke-dasharray: 1 2; stroke-dashoffset: 0; } }
@keyframes bix-pop { from { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.18); } }
@keyframes bix-pulse { 40% { transform: scale(1.3); } }
@keyframes bix-beat { 18% { transform: scale(1.35); } 36% { transform: none; } 56% { transform: scale(1.22); } 76% { transform: none; } }
@keyframes bix-hop { 25% { transform: translateY(-4px); } 55% { transform: none; } 75% { transform: translateY(-1.5px); } }
@keyframes bix-drop { from { opacity: 0; transform: translateY(-14px) rotate(-28deg); } 50% { opacity: 1; transform: translateY(1.5px) rotate(4deg); } 72% { transform: translateY(-.6px) rotate(-1deg); } }
@keyframes bix-cap { from { transform: translateY(-7px) rotate(-16deg); } 45% { transform: translateY(.8px) rotate(5deg); } 70% { transform: rotate(-1.5deg); } }
@keyframes bix-part-lo { from { transform: translate(3.2px, -3.2px); } 55% { transform: translate(-.7px, .7px); } }
@keyframes bix-part-up { from { transform: translate(-3.2px, 3.2px); } 55% { transform: translate(.7px, -.7px); } }
@keyframes bix-fall { from { opacity: 0; transform: translateY(-8px) scale(.5); } 55% { opacity: 1; } 78% { transform: translateY(.8px); } }
@keyframes bix-push { from { transform: translate(4.67px, -4.67px); } 72% { transform: translate(-.4px, .4px); } }
@keyframes bix-dose { from { transform: rotate(-45deg) scaleX(1.41) rotate(45deg); } 72% { transform: rotate(-45deg) scaleX(.97) rotate(45deg); } to { transform: rotate(-45deg) scaleX(1) rotate(45deg); } }
@keyframes bix-drip { from { opacity: 0; transform: scale(.2); } 45% { opacity: 1; transform: scale(1.12); } 70% { transform: translateY(1.2px); } }
@keyframes bix-grind { 22% { transform: rotate(-14deg); } 50% { transform: rotate(9deg); } 76% { transform: rotate(-3.5deg); } }
@keyframes bix-rise { from { opacity: 0; transform: translateY(8px) scale(.3); } 60% { opacity: 1; transform: translateY(-1.2px); } }
@keyframes bix-drive { from { transform: translateX(-11px); } 30% { transform: translateX(-4px) translateY(-.8px); } 58% { transform: translateX(1.6px); } 80% { transform: translateX(-.5px); } }
@keyframes bix-stamp { from { opacity: 0; transform: scale(1.8); } 40% { opacity: 1; transform: scale(.9); } 68% { transform: scale(1.04); } }
@keyframes bix-swing { 18% { transform: rotate(16deg); } 42% { transform: rotate(-10deg); } 64% { transform: rotate(4.5deg); } 84% { transform: rotate(-1.5deg); } }
@keyframes bix-level { from { transform: scaleY(.2); } 35% { transform: scaleY(1.12); } 60% { transform: scaleY(.88); } 80% { transform: scaleY(1.03); } }
@keyframes bix-turn { from { transform: rotate(-360deg); } }
@keyframes bix-turn-hour { from { transform: rotate(-30deg); } }
@keyframes bix-tap { from { transform: translateY(4px) rotate(-5deg); } 45% { transform: translateY(-1px) rotate(1deg); } 70% { transform: none; } }
@keyframes bix-wave { from { opacity: 0; transform: scale(.5); } 60% { opacity: 1; transform: scale(1.1); } }
@keyframes bix-awning { from { opacity: 0; transform: translateY(-9px); } 40% { opacity: 1; } 65% { transform: translateY(1.2px); } 85% { transform: translateY(-.4px); } }
@keyframes bix-light { from { opacity: 0; transform: translateY(3px); } }
@keyframes bix-swirl { 25% { transform: rotate(-7deg); } 55% { transform: rotate(5deg); } 80% { transform: rotate(-2deg); } }
@keyframes bix-bubble { from { opacity: 0; transform: translateY(10px) scale(.4); } 60% { opacity: 1; } 80% { transform: translateY(-.8px); } }

/* patient and phone (the transfer page's "About you" and its call card) */
.bi .patient-accent-01, .bi .patient-accent-02 { transform-box: view-box; transform-origin: 32px 64px; }   /* the portrait's foot */
.bi .phone-accent-01, .bi .phone-ink-01, .bi .phone-ink-02, .bi .phone-ink-03 { transform-box: view-box; transform-origin: 44.5px 50px; }   /* the phone's centre */
.bi .phone-ink-04, .bi .phone-ink-05 { transform-box: view-box; transform-origin: 59.5px 30px; }   /* where the sound starts */
@media (prefers-reduced-motion: no-preference) {
  /* patient: the portrait pops onto the card, then the details write themselves */
  .bi-ready .patient-accent-01, .bi-ready .patient-accent-02 { animation-name: bix-pop; animation-duration: .6s; }
  .bi-ready .patient-ink-02, .bi-ready .patient-ink-03, .bi-ready .patient-ink-04 { animation-name: bix-draw; animation-duration: .5s; animation-delay: calc(var(--bi-delay, 0s) + .3s); }
  .bi-ready .patient-ink-03 { animation-delay: calc(var(--bi-delay, 0s) + .42s); }
  .bi-ready .patient-ink-04 { animation-delay: calc(var(--bi-delay, 0s) + .54s); }
  /* phone: it rings, shaking on its centre, and the sound goes out in two waves */
  .bi-ready .phone-accent-01, .bi-ready .phone-ink-01, .bi-ready .phone-ink-02, .bi-ready .phone-ink-03 { animation-name: bix-ring; animation-duration: 1.1s; animation-timing-function: ease-in-out; }
  .bi-ready .phone-ink-04, .bi-ready .phone-ink-05 { animation-name: bix-wave; animation-duration: .6s; animation-delay: calc(var(--bi-delay, 0s) + .25s); }
  .bi-ready .phone-ink-05 { animation-delay: calc(var(--bi-delay, 0s) + .42s); }
}
@keyframes bix-ring { 10% { transform: rotate(-9deg); } 22% { transform: rotate(8deg); } 34% { transform: rotate(-6deg); } 46% { transform: rotate(5deg); } 58% { transform: rotate(-3deg); } 70% { transform: rotate(1.5deg); } 82% { transform: none; } }

/* e-prescribe, fax and portal (the homepage's three ways to send a prescription) */
@media (prefers-reduced-motion: no-preference) {
  /* e-prescribe: the prescription comes up on screen and writes itself, then the paper plane flies in */
  .bi-ready .e-prescribe-accent-01 { animation-name: bix-light; animation-duration: .5s; }
  .bi-ready .e-prescribe-ink-04, .bi-ready .e-prescribe-ink-05, .bi-ready .e-prescribe-ink-06 { animation-name: bix-draw; animation-duration: .5s; animation-delay: calc(var(--bi-delay, 0s) + .2s); }
  .bi-ready .e-prescribe-ink-05 { animation-delay: calc(var(--bi-delay, 0s) + .32s); }
  .bi-ready .e-prescribe-ink-06 { animation-delay: calc(var(--bi-delay, 0s) + .44s); }
  .bi-ready .e-prescribe-ink-07 { animation-name: bix-fly; animation-duration: .9s; animation-delay: calc(var(--bi-delay, 0s) + .5s); }
  /* fax: the sheet feeds down into the machine, its lines writing, then the display lights and the keys pop */
  .bi-ready .fax-accent-01, .bi-ready .fax-ink-01 { animation-name: bix-feed; animation-duration: .9s; }
  .bi-ready .fax-ink-02, .bi-ready .fax-ink-03 { animation-name: bix-feed, bix-draw; animation-duration: .9s, .5s; animation-delay: var(--bi-delay, 0s), calc(var(--bi-delay, 0s) + .45s); }
  .bi-ready .fax-ink-03 { animation-delay: var(--bi-delay, 0s), calc(var(--bi-delay, 0s) + .57s); }
  .bi-ready .fax-accent-02 { animation-name: bix-light; animation-duration: .45s; animation-delay: calc(var(--bi-delay, 0s) + .35s); }
  .bi-ready .fax-ink-06, .bi-ready .fax-ink-07, .bi-ready .fax-ink-08, .bi-ready .fax-ink-09, .bi-ready .fax-ink-10, .bi-ready .fax-ink-11 { animation-name: bix-pop; animation-duration: .45s; animation-delay: calc(var(--bi-delay, 0s) + .45s + var(--i, 0) * .06s); }
  /* portal: the window's dots pop along its bar, the panel comes up, and the list fills in row by row */
  .bi-ready .portal-ink-03, .bi-ready .portal-ink-04, .bi-ready .portal-ink-05 { animation-name: bix-pop; animation-duration: .45s; animation-delay: calc(var(--bi-delay, 0s) + var(--i, 0) * .08s); }
  .bi-ready .portal-accent-01 { animation-name: bix-light; animation-duration: .5s; animation-delay: calc(var(--bi-delay, 0s) + .15s); }
  .bi-ready .portal-ink-06, .bi-ready .portal-ink-07, .bi-ready .portal-ink-08 { animation-name: bix-pop; animation-duration: .45s; animation-delay: calc(var(--bi-delay, 0s) + .3s + var(--i, 0) * .14s); }
  .bi-ready .portal-ink-09, .bi-ready .portal-ink-10, .bi-ready .portal-ink-11 { animation-name: bix-draw; animation-duration: .5s; animation-delay: calc(var(--bi-delay, 0s) + .36s + var(--i, 0) * .14s); }
}
.bi .fax-ink-07, .bi .portal-ink-04, .bi .portal-ink-07, .bi .portal-ink-10 { --i: 1; }
.bi .fax-ink-08, .bi .portal-ink-05, .bi .portal-ink-08, .bi .portal-ink-11 { --i: 2; }
.bi .fax-ink-09 { --i: 3; } .bi .fax-ink-10 { --i: 4; } .bi .fax-ink-11 { --i: 5; }
@keyframes bix-fly { from { opacity: 0; transform: translate(-12px, 8px) scale(.6); } 55% { opacity: 1; transform: translate(1.4px, -1px); } 80% { transform: translate(-.4px, .3px); } }
@keyframes bix-feed { from { opacity: 0; transform: translateY(-9px); } 45% { opacity: 1; } 70% { transform: translateY(1px); } }

/* the sixteen licensed states, a landmark each (state-<code>, the state pages): each moves the way its subject would,
   once, and ends on the drawing */
/* pivots */
.bi-state-al .bi-accent, .bi-state-al .bi-ink { transform-box: view-box; transform-origin: 50px 76px; }   /* the rocket's base */
.bi .state-al-accent-01 { transform-box: view-box; transform-origin: 50px 77.5px; }   /* the flame, from the nozzle */
.bi .state-az-ink-01 { transform-box: view-box; transform-origin: 50px 82px; }   /* the saguaro, from the ground */
.bi .state-fl-ink-02 { transform-box: view-box; transform-origin: 56px 38px; }   /* the fronds, from the crown */
.bi .state-ga-accent-01, .bi .state-ga-ink-04, .bi .state-ga-ink-05 { transform-box: view-box; transform-origin: 53px 26px; }   /* the leaf, from its stem */
.bi .state-il-ink-01, .bi .state-il-ink-02, .bi .state-il-ink-03, .bi .state-il-ink-04 { transform-box: view-box; transform-origin: 50px 82px; }   /* the buildings, from the street */
.bi .state-in-accent-01, .bi .state-in-ink-01 { transform-box: view-box; transform-origin: 30px 20px; }   /* the flag, from the top of its pole */
.bi-state-ky .bi-accent, .bi-state-ky .bi-ink { transform-box: view-box; transform-origin: 72px 84px; }   /* the neck's base */
.bi .state-mi-ink-02 { transform-box: view-box; transform-origin: 50px 62px; }   /* the towers, from the deck */
.bi .state-ny-accent-01, .bi .state-ny-ink-01 { transform-box: view-box; transform-origin: 50px 44px; }   /* the flame, from the torch */
.bi .state-oh-ink-03, .bi .state-oh-ink-04 { transform-box: view-box; transform-origin: 60px 41px; }   /* the leaflets, from the stem */
.bi .state-pa-accent-01, .bi .state-pa-ink-01, .bi .state-pa-ink-03, .bi .state-pa-ink-04, .bi .state-pa-ink-05, .bi .state-pa-ink-06 { transform-box: view-box; transform-origin: 50px 17px; }   /* the bell, from its yoke */
.bi .state-sd-ink-04 { transform-box: view-box; transform-origin: 81px 57px; }   /* the tail, from the rump */
.bi-state-tn .bi-accent, .bi-state-tn .bi-ink { transform-box: view-box; transform-origin: 35px 69.5px; }   /* the guitar's body */
.bi .state-wi-ink-04, .bi .state-wi-ink-05 { transform-box: view-box; transform-origin: 78.5px 82px; }   /* the silo, from the ground */
.bi .state-co-accent-03, .bi .state-il-ink-01, .bi .state-il-ink-02, .bi .state-tn-ink-08 { --i: 1; }
.bi .state-il-accent-01, .bi .state-tn-ink-09 { --i: 2; } .bi .state-tn-ink-10 { --i: 3; }
@media (prefers-reduced-motion: no-preference) {
  /* Alabama: the rocket lifts into place, its stages marked off, and then the flame lights below it */
  .bi-ready.bi-state-al .bi-accent, .bi-ready.bi-state-al .bi-ink { animation-name: bix-launch; animation-duration: 1s; }
  .bi-ready .state-al-ink-03, .bi-ready .state-al-ink-04 { animation-name: bix-draw; animation-duration: .45s; animation-delay: calc(var(--bi-delay, 0s) + .45s); }
  .bi-ready .state-al-ink-04 { animation-delay: calc(var(--bi-delay, 0s) + .58s); }
  .bi-ready .state-al-accent-01 { animation-name: bix-level; animation-duration: .8s; animation-delay: calc(var(--bi-delay, 0s) + .55s); }
  /* Arizona: the saguaro grows up from the desert floor, its rib draws in, and the sun comes up */
  .bi-ready .state-az-ink-01 { animation-name: bix-level; animation-duration: 1s; }
  .bi-ready .state-az-ink-03 { animation-name: bix-draw; animation-duration: .5s; animation-delay: calc(var(--bi-delay, 0s) + .45s); }
  .bi-ready .state-az-accent-01 { animation-name: bix-rise; animation-duration: .8s; animation-delay: calc(var(--bi-delay, 0s) + .3s); }
  /* Colorado: snow settles on each peak, the snow lines draw across, and the sun comes up */
  .bi-ready .state-co-accent-02, .bi-ready .state-co-accent-03 { animation-name: bix-fall; animation-duration: .7s; animation-delay: calc(var(--bi-delay, 0s) + var(--i, 0) * .16s); }
  .bi-ready .state-co-ink-02, .bi-ready .state-co-ink-03 { animation-name: bix-draw; animation-duration: .5s; animation-delay: calc(var(--bi-delay, 0s) + .3s); }
  .bi-ready .state-co-ink-03 { animation-delay: calc(var(--bi-delay, 0s) + .45s); }
  .bi-ready .state-co-accent-01 { animation-name: bix-rise; animation-duration: .8s; animation-delay: calc(var(--bi-delay, 0s) + .2s); }
  /* Florida: the fronds sway from the crown, the coconuts pop in, the waves roll in and the sun comes up */
  .bi-ready .state-fl-ink-02 { animation-name: bix-swirl; animation-duration: 1.4s; animation-timing-function: ease-in-out; }
  .bi-ready .state-fl-ink-03, .bi-ready .state-fl-ink-04 { animation-name: bix-pop; animation-duration: .5s; animation-delay: calc(var(--bi-delay, 0s) + .35s); }
  .bi-ready .state-fl-ink-04 { animation-delay: calc(var(--bi-delay, 0s) + .45s); }
  .bi-ready .state-fl-ink-06 { animation-name: bix-draw; animation-duration: .7s; animation-delay: calc(var(--bi-delay, 0s) + .2s); }
  .bi-ready .state-fl-accent-01 { animation-name: bix-rise; animation-duration: .8s; animation-delay: calc(var(--bi-delay, 0s) + .3s); }
  /* Georgia: the peach drops onto its spot, its leaf swings on the stem, the cleft and the leaf's vein draw in */
  .bi-ready .state-ga-ink-01, .bi-ready .state-ga-ink-03 { animation-name: bix-hop; animation-duration: .8s; }
  .bi-ready .state-ga-accent-02 { animation-name: bix-pop; animation-duration: .5s; animation-delay: calc(var(--bi-delay, 0s) + .3s); }
  .bi-ready .state-ga-ink-02 { animation-name: bix-draw; animation-duration: .55s; animation-delay: calc(var(--bi-delay, 0s) + .25s); }
  .bi-ready .state-ga-accent-01, .bi-ready .state-ga-ink-04 { animation-name: bix-swing; animation-duration: 1.2s; animation-delay: calc(var(--bi-delay, 0s) + .15s); }
  .bi-ready .state-ga-ink-05 { animation-name: bix-swing, bix-draw; animation-duration: 1.2s, .5s; animation-delay: calc(var(--bi-delay, 0s) + .15s), calc(var(--bi-delay, 0s) + .45s); }
  /* Illinois: the buildings rise from the street, the tall tower last, and the windows light up */
  .bi-ready .state-il-ink-01, .bi-ready .state-il-ink-02, .bi-ready .state-il-ink-03, .bi-ready .state-il-ink-04 { animation-name: bix-level; animation-duration: .9s; animation-delay: calc(var(--bi-delay, 0s) + var(--i, 0) * .16s); }
  .bi-ready .state-il-accent-01, .bi-ready .state-il-accent-02 { animation-name: bix-light; animation-duration: .5s; animation-delay: calc(var(--bi-delay, 0s) + .55s + var(--i, 0) * .12s); }
  /* Indiana: the flag waves from the top of its pole, and the knob pops on */
  .bi-ready .state-in-accent-01, .bi-ready .state-in-ink-01 { animation-name: bix-swing; animation-duration: 1.3s; }
  .bi-ready .state-in-ink-03 { animation-name: bix-pop; animation-duration: .5s; }
  /* Kentucky: the thoroughbred tosses its head, and its jaw and mane draw in */
  .bi-ready.bi-state-ky .bi-accent, .bi-ready.bi-state-ky .bi-ink { animation-name: bix-nod; animation-duration: 1.2s; animation-timing-function: ease-in-out; }
  .bi-ready .state-ky-ink-04, .bi-ready .state-ky-ink-05 { animation-name: bix-draw; animation-duration: .55s; animation-delay: calc(var(--bi-delay, 0s) + .3s); }
  .bi-ready .state-ky-ink-05 { animation-delay: calc(var(--bi-delay, 0s) + .45s); }
  /* Michigan: the towers rise from the deck, the main cable strings across, then the hangers drop, over the water */
  .bi-ready .state-mi-ink-02 { animation-name: bix-level; animation-duration: .8s; }
  .bi-ready .state-mi-ink-03 { animation-name: bix-draw; animation-duration: .8s; animation-delay: calc(var(--bi-delay, 0s) + .3s); }
  .bi-ready .state-mi-ink-04 { animation-name: bix-draw; animation-duration: .5s; animation-delay: calc(var(--bi-delay, 0s) + .75s); }
  .bi-ready .state-mi-accent-01, .bi-ready .state-mi-ink-05 { animation-name: bix-light; animation-duration: .6s; animation-delay: calc(var(--bi-delay, 0s) + .15s); }
  /* Missouri: the arch draws itself up and over, outer then inner, and its steel fills in */
  .bi-ready .state-mo-ink-01, .bi-ready .state-mo-ink-02 { animation-name: bix-draw; animation-duration: .9s; }
  .bi-ready .state-mo-ink-02 { animation-delay: calc(var(--bi-delay, 0s) + .12s); }
  .bi-ready .state-mo-accent-01 { animation-name: bix-light; animation-duration: .5s; animation-delay: calc(var(--bi-delay, 0s) + .6s); }
  /* New York: the torch's flame flickers from its cup, and its rays and the cup's band draw on */
  .bi-ready .state-ny-accent-01, .bi-ready .state-ny-ink-01 { animation-name: bix-swirl; animation-duration: 1.3s; animation-timing-function: ease-in-out; }
  .bi-ready .state-ny-ink-05 { animation-name: bix-draw; animation-duration: .45s; animation-delay: calc(var(--bi-delay, 0s) + .2s); }
  .bi-ready .state-ny-ink-06 { animation-name: bix-draw; animation-duration: .6s; animation-delay: calc(var(--bi-delay, 0s) + .4s); }
  /* Ohio: the leaflets swing from the stem, their midribs drawing, and the buckeye's eye pops on */
  .bi-ready .state-oh-ink-03 { animation-name: bix-swing; animation-duration: 1.2s; }
  .bi-ready .state-oh-ink-04 { animation-name: bix-swing, bix-draw; animation-duration: 1.2s, .5s; animation-delay: var(--bi-delay, 0s), calc(var(--bi-delay, 0s) + .35s); }
  .bi-ready .state-oh-accent-01 { animation-name: bix-pop; animation-duration: .55s; animation-delay: calc(var(--bi-delay, 0s) + .2s); }
  /* Pennsylvania: the Liberty Bell swings on its yoke, and the crack runs up from the lip */
  .bi-ready .state-pa-accent-01, .bi-ready .state-pa-ink-01, .bi-ready .state-pa-ink-03, .bi-ready .state-pa-ink-05, .bi-ready .state-pa-ink-06 { animation-name: bix-swing; animation-duration: 1.4s; }
  .bi-ready .state-pa-ink-04 { animation-name: bix-swing, bix-draw; animation-duration: 1.4s, .55s; animation-delay: var(--bi-delay, 0s), calc(var(--bi-delay, 0s) + .5s); }
  /* South Dakota: the bison ambles in, and flicks its tail */
  .bi-ready.bi-state-sd .bi-accent, .bi-ready.bi-state-sd .bi-ink { animation-name: bix-drive; animation-duration: 1.1s; }
  .bi-ready .state-sd-ink-04 { animation-name: bix-swing; animation-duration: .9s; animation-delay: calc(var(--bi-delay, 0s) + .55s); }
  /* Tennessee: the guitar rocks on its body, the string is strung, and the pegs pop on */
  .bi-ready.bi-state-tn .bi-accent, .bi-ready.bi-state-tn .bi-ink { animation-name: bix-swirl; animation-duration: 1.3s; animation-timing-function: ease-in-out; }
  .bi-ready .state-tn-ink-04 { animation-name: bix-draw; animation-duration: .55s; animation-delay: calc(var(--bi-delay, 0s) + .25s); }
  .bi-ready .state-tn-ink-07, .bi-ready .state-tn-ink-08, .bi-ready .state-tn-ink-09, .bi-ready .state-tn-ink-10 { animation-name: bix-pop; animation-duration: .4s; animation-delay: calc(var(--bi-delay, 0s) + .5s + var(--i, 0) * .08s); }
  /* Wisconsin: the silo rises beside the barn, its bands drawing, the door's brace crosses, and the windows light */
  .bi-ready .state-wi-ink-04 { animation-name: bix-level; animation-duration: .9s; }
  .bi-ready .state-wi-ink-05 { animation-name: bix-level, bix-draw; animation-duration: .9s, .45s; animation-delay: var(--bi-delay, 0s), calc(var(--bi-delay, 0s) + .5s); }
  .bi-ready .state-wi-ink-03 { animation-name: bix-draw; animation-duration: .55s; animation-delay: calc(var(--bi-delay, 0s) + .25s); }
  .bi-ready .state-wi-accent-01, .bi-ready .state-wi-accent-02 { animation-name: bix-light; animation-duration: .5s; animation-delay: calc(var(--bi-delay, 0s) + .4s); }
}
@keyframes bix-launch { from { opacity: 0; transform: translateY(10px); } 45% { opacity: 1; transform: translateY(-2.5px); } 70% { transform: translateY(.8px); } }
@keyframes bix-nod { 22% { transform: rotate(-6deg); } 48% { transform: rotate(3.5deg); } 72% { transform: rotate(-1.2deg); } }

.anim-paused .bi * { animation: none !important; }

/* ---------------------------------------------------------------------- phones: the November 2026 review at 390 px
   (the owner: "look at the whole site in mobile mode and check for visual inconsistencies") */
.nw { white-space: nowrap; }                       /* phone numbers, hours and hyphenated words in headings (tools/build.py nowrap) */
@media (max-width: 700px) {
  /* a link with an arrow that wraps keeps its arrow after the last word, not pushed to the far edge */
  .link-arrow { display: inline; }
  .link-arrow::after { display: inline-block; margin-left: 8px; }
  /* the "300+" tile: no paragraph on phones, the watermark below the words, the link on one line */
  .care-grid { align-items: start; }
  .ccm-media .lc-bowls { bottom: -34%; fill-opacity: .07; }
  .care-card-forms { white-space: nowrap; font-size: 14px; }
  .ccm-unit { font-size: 13px; padding: 0 10px; }
  /* headings: no lone short first line */
  h1, h2, .h2, .h3, .catsteps h3, .pn-name { text-wrap: balance; }
  /* a dot eyebrow on two lines keeps its dot on the first */
  .dot-eyebrow { align-items: flex-start; }
  .dot-eyebrow i { margin-top: .4em; }
  /* the map's state codes are too small to read on a phone; the legend and the list say the same */
  .st-code { display: none; }
  .usmap-legend { justify-content: flex-start; gap: 6px 16px; font-size: 13px; }
  /* the formulary's filters: one row that scrolls sideways, not six rows of chips */
  .fx-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px 6px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); }
  .fx-chips::-webkit-scrollbar { display: none; }
  .fx-chips > * { flex: none; }
  /* the form steps get room under their headings */
  .ir-legend { margin-bottom: 16px; }
  /* the arrival film's caption on the same edge as everything else */
  .pk-film figcaption { padding: 0; }
  /* a city whose note doesn't fit beside it puts the note underneath */
  .sc-cities li { flex-wrap: wrap; row-gap: 0; }
  /* a licence card's odd last fact runs the full width */
  .lic-card .item-facts div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* a manufactured product's photo (white ground) takes the card's tint, like the renders around it */
.pc-media img[src*="/img/products/"] { mix-blend-mode: multiply; width: 70%; height: auto; }
/* the licence table becomes a card per state on phones: state and status, then the licence, its number and the link */
@media (max-width: 640px) {
  .tablebox:has(.lictable) { overflow: visible; }
  .tablebox .lictable { min-width: 0; }
  .lictable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lictable tbody, .lictable tr { display: block; }
  .lictable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .lictable tbody tr:last-child { border-bottom: 0; }
  .lictable th, .lictable td { display: block; padding: 0; border: 0 !important; }
  .lictable td:nth-child(2) { grid-column: 2; grid-row: 1; max-width: 170px; text-align: right; }
  .lictable td:nth-child(3) { grid-column: 1 / -1; color: var(--ink-2); font-size: 14.5px; }
  .lictable td:nth-child(4) { grid-column: 1; font-size: 14.5px; color: var(--muted); }
  .lictable td:nth-child(4):not(:empty)::before { content: 'No. '; }
  .lictable td:nth-child(5) { grid-column: 2; justify-self: end; font-size: 14.5px; }
  .lictable td:empty { display: none; }
}
/* the footer's three seals on one white strip (the owner, November 2026: "a better way to have these logos in the
   footer that just looks better"): side by side at matching heights, parted by thin rules, each linking to where it
   can be checked */
.foot-badges { display: inline-grid; grid-template-columns: auto auto minmax(0, auto); align-items: center; max-width: 100%; margin-top: 22px; padding: 10px 6px; background: #fff; border-radius: 16px; box-shadow: 0 18px 36px -24px rgba(0, 0, 0, .55); }
.fb { display: grid; place-items: center; padding: 2px 14px; line-height: 0; transition: transform .25s var(--ease); }
.fb + .fb { border-left: 1px solid #E1E8EF; }
.fb:hover { transform: translateY(-2px); }
.fb img { display: block; height: auto; }
.fb-legit img { width: 50px; }
.fb-nabp img { width: 52px; }
.fb-dot img { width: 100%; max-width: 140px; }
@media (max-width: 380px) { .fb { padding-inline: 10px; } .fb-legit img { width: 44px; } .fb-nabp img { width: 46px; } }

/* ---------------------------------------------------------------------- Instagram (homepage, public/js/ig.js)
   a row of post tiles drifting slowly sideways, each floating a little; the track holds the row twice and moves by
   one copy, so each tile carries its own spacing (a margin, not a gap) for the two halves to match exactly */
.rv-section .section-head { align-items: end; }
/* Google reviews (js/reviews.js): the rating, then up to three reviews as cards, each crediting its author and Google */
.gr { margin-top: 8px; display: grid; gap: 22px; }
.gr-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.gr-score { font-size: 44px; line-height: 1; font-weight: 600; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.gr-stars { display: inline-flex; gap: 2px; font-size: 18px; line-height: 1; color: #C9D3DC; }
.gr-stars i { font-style: normal; }
.gr-stars i.on { color: #F2B01E; }
.gr-sum-t { color: var(--muted); font-size: 15px; }
.gr-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .gr-list { grid-template-columns: minmax(0, 1fr); } }
.gr-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; display: grid; gap: 10px; align-content: start; box-shadow: 0 18px 40px -32px rgba(20, 65, 84, .35); }
.gr-head { display: flex; align-items: center; gap: 12px; }
.gr-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--tint-2, #E6EFF7); color: var(--navy); font-weight: 600; flex: none; }
.gr-meta { display: grid; line-height: 1.3; min-width: 0; }
.gr-who { font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.gr-who:hover { text-decoration: underline; }
.gr-when { font-size: 13.5px; color: var(--muted); }
.gr-text { margin: 0; color: var(--ink); line-height: 1.55; }
.gr-text p { margin: 0; }
.gr-note { margin: 0; font-size: 14.5px; color: var(--muted); }
.gr-note a { color: var(--navy); font-weight: 600; }
.ig { margin-top: clamp(20px, 3vw, 36px); }
.ig-view { overflow: hidden; padding: 20px 0 30px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ig-track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; }
.ig-tile { flex: none; width: clamp(200px, 21vw, 280px); aspect-ratio: 1; margin-right: clamp(14px, 1.6vw, 22px); }
.ig-tile > a, .ig-tile > div { position: relative; display: block; height: 100%; border-radius: 22px; overflow: hidden; background: var(--tint-2); color: #fff;
  box-shadow: 0 18px 36px -24px rgba(20, 65, 84, .45); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.ig-tile a:hover, .ig-tile a:focus-visible { transform: translateY(-6px); box-shadow: 0 28px 46px -24px rgba(20, 65, 84, .55); }
.ig-tile a:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.ig-tile :is(a, div):hover img, .ig-tile a:focus-visible img { transform: scale(1.05); }
.ig-kind { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--navy); display: grid; place-items: center; }
.ig-kind svg { width: 15px; height: 15px; }
.ig-cap { position: absolute; inset: auto 0 0; display: grid; gap: 4px; padding: 44px 16px 14px; font-size: 14px; line-height: 1.4;
  background: linear-gradient(to top, rgba(14, 49, 64, .88), rgba(14, 49, 64, 0)); transform: translateY(101%); transition: transform .35s var(--ease); }
.ig-cap span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ig-cap time { font-size: 12.5px; opacity: .8; }
.ig-tile :is(a, div):hover .ig-cap, .ig-tile a:focus-visible .ig-cap { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .ig-track { animation: ig-drift calc(var(--n) * 5s) linear infinite; }
  .ig-tile { animation: ig-float 6s ease-in-out calc(var(--i) * -.9s) infinite alternate; }
  .ig-view:hover .ig-track, .ig-view:focus-within .ig-track, .anim-paused .ig-track, .anim-paused .ig-tile { animation-play-state: paused; }
  .anim-paused .ig-view { overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-view { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; padding-inline: 16px; }
  .ig-tile { scroll-snap-align: start; }
  .ig-tile[aria-hidden] { display: none; }
}
@keyframes ig-drift { to { transform: translateX(-50%); } }
@keyframes ig-float { from { transform: translateY(-5px); } to { transform: translateY(5px); } }

/* "Why compounding": the four reasons beside a loop of four dosage forms dropping in one at a time (tools/render/lcp_scenes.py
   drop: a cream, an injection, capsules and an ointment), on the deeper blue it was rendered on */
.why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(28px, 4vw, 64px); align-items: start; }
.why-main .why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.why-h { font-size: 13px; font-weight: 700; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
/* the loop fills its panel edge to edge (both 4:5), so the panel is the loop's own backdrop with no seam between them
   (the owner, November 2026: the animation's background and what's around it should be "more homogeneous"); on wide
   screens it stays in view beside the reasons as they scroll past ("follows them down along the right side") */
.why-media { position: sticky; top: calc(var(--head-h) + var(--util-h) + 24px); aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; display: grid; place-items: center;
  background: #A9BBD3; }   /* the loop's backdrop, under it while it loads */
.why-video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 960px) {
  .why-grid { grid-template-columns: minmax(0, 1fr); }
  .why-media { position: relative; top: auto; width: 100%; max-width: 460px; margin-inline: auto; }
}
@media (max-width: 520px) { .why-main .why { grid-template-columns: minmax(0, 1fr); } }

/* LegitScript, near the top of the homepage (the owner, November 2026: "in a more prominent place ... like we did for
   StackRx"): the official seal, which links to LegitScript's own verification page, beside what the certification means */
.ls-section { padding-block: clamp(28px, 4vw, 44px) clamp(24px, 3vw, 36px); }   /* clear of the numbers row below (the owner, November 2026: "butted up directly against each other") */
.ls-band { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3.4vw, 44px); align-items: center; padding: clamp(22px, 3vw, 32px) clamp(22px, 3.4vw, 40px); border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: 0 24px 50px -40px rgba(20, 65, 84, .45); }
/* the three seals side by side (LegitScript, NABP, .Pharmacy), each linking to where it can be checked */
.ls-seals { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 28px); list-style: none; margin: 0; padding: 0; }
.ls-seal { display: block; line-height: 0; transition: transform .3s var(--ease); }
.ls-seal:hover { transform: translateY(-2px); }
.ls-seal img { height: auto; }
.ls-legit img { width: 104px; }
.ls-nabp img { width: 88px; }
.ls-dot img { width: 164px; }
@media (max-width: 960px) { .ls-band { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .ls-legit img { width: 78px; } .ls-nabp img { width: 66px; } .ls-dot img { width: 128px; } .ls-seals { gap: 14px; } }
.ls-copy { display: grid; gap: 8px; justify-items: start; max-width: 70ch; }
.ls-copy h2 { margin: 0; }
.ls-copy p { color: var(--muted); font-size: 16.5px; margin: 0; }
@media (max-width: 560px) { .ls-band { justify-items: start; } }