/* RxAccess -- generated by scripts/build-css.sh. Do not hand-edit.
Source: resources/css/design-system/. Regenerate with:
./scripts/build-css.sh */
/* ---- Self-hosted fonts (OFL), inlined from fonts/fonts.css ---- */
/* RxAccess · Fonts (app copy)
* PRODUCTION: OFL stand-ins only. Source Serif 4 (display) + Public Sans (UI/body),
* both self-hosted from public/fonts/, per ROLLOUT-PLAN.md section 3 option 2.
*
* The comp-stage reference faces (Tiempos Headline, Flama -- both commercial,
* extracted from a competitor rip for comp review only) are NOT copied into this app
* and must never ship here. See tokens/typography.css for the swap-block comment that
* documents how to move to a licensed pair later.
*/
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/PlusJakartaSans-Variable.woff2") format("woff2-variations"), url("/fonts/PlusJakartaSans-Variable.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/PlusJakartaSans-Variable-Italic.woff2") format("woff2-variations"), url("/fonts/PlusJakartaSans-Variable-Italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/SourceSerif4-Variable.woff2") format("woff2-variations"), url("/fonts/SourceSerif4-Variable.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/fonts/PublicSans-Variable.woff2") format("woff2-variations"), url("/fonts/PublicSans-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* ---- tokens/base.css ---- */
/* RxAccess · Base. Reset + the accessibility floor for a 60+ audience on phones.
* Rules: 18px body, 16px minimum anywhere, 1.55 body leading, visible focus, 48px taps,
* no motion required to read anything, reduced-motion honored, print keeps receipts. */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
margin: 0; background: var(--bg); color: var(--ink);
font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body);
font-weight: var(--fw-regular); letter-spacing: 0.005em;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
overflow-x: hidden; /* P1-6: .rx-tablewrap and the top strip clip instead of pushing the document at 200% zoom */
}
img, svg, video { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
dd, td, p { overflow-wrap: anywhere; }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
h1, h2, h3, h4 { margin: 0 0 var(--space-4); font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--ink); letter-spacing: var(--tracking-display); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: 20px; line-height: 1.3; }
p { margin: 0 0 var(--space-4); max-width: var(--measure); }
small, .rx-small { font-size: var(--fs-small); line-height: var(--lh-small); }
strong { font-weight: var(--fw-semibold); }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; vertical-align: top; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.rx-skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--radius-sm); z-index: 100; }
.rx-skip:focus { left: 8px; }
@media (max-width: 599px) {
h1 { font-size: 34px; } h2 { font-size: 35px; } h3 { font-size: 24px; }
}
@media print { .rx-nostrip, .rx-cookie, .rx-header-cta, .rx-sticky-cta, #mobile-nav { display: none !important; } a { color: inherit; } }
/* ---- tokens/colors.css ---- */
/* RxAccess · Color tokens
* Derived from the PillPack reference (pillpack.com, ripped 2026-09-02) and adjusted for a
* YMYL audience that includes 60+ readers: every text/background pair below meets WCAG AA
* at body size. The reference's bright #00AAFF is kept as an accent only (hover, rules,
* decorative), never as text on white.
*/
:root {
/* ---------- Ink (PillPack navy) ---------- */
--ink: #00334D; /* headings, body on light surfaces (11.7:1 on white) */
--ink-soft: #535C61; /* secondary text (6.9:1) */
--ink-muted: #6B7479; /* meta, captions (4.9:1) , minimum for text */
--ink-on-dark: #FFFFFF;
/* ---------- Blue (one committed brand color) ---------- */
--blue-900: #1A4160; /* CTA band, deep surfaces */
--blue-800: #1479AC; /* callout band */
--blue-700: #0077B3; /* PRIMARY: buttons, links (4.6:1 on white) */
--blue-600: #0A8FD1; /* hover on white surfaces */
--blue-500: #00AAFF; /* accent: rules, focus ring, arrows on dark (not body text) */
--blue-100: #E6F7FF; /* soft chip / highlight */
--blue-50: #F3FBFF; /* pale band ("wavy" section in the reference) */
--primary: var(--blue-700);
--primary-hover: #005E8F;
--primary-active: #004C74;
--link: var(--blue-700);
--link-hover: var(--primary-hover);
--focus: var(--blue-500);
/* ---------- Surfaces ---------- */
--bg: #FFFFFF;
--bg-warm: #F7F5F3; /* reference off-white */
--bg-pale: var(--blue-50);
--bg-mint: #F3F8F5; /* reference transition band */
--bg-dark: var(--blue-900);
--bg-band: var(--blue-800);
/* ---------- Lines ---------- */
--line: #DCDCDC;
--line-soft: #ECECEC;
--line-strong: #B5B5B5;
/* ---------- Status (the registry's verification vocabulary) ---------- */
--status-verified-fg: #1B6B3A; --status-verified-bg: #E6F4EA;
--status-checking-fg: #7A4E00; --status-checking-bg: #FFF4DD; /* being verified */
--status-none-fg: #535C61; --status-none-bg: #F1F1F1; /* no program exists */
--status-generic-fg: #535C61; --status-generic-bg: #F7F5F3; /* generic, no PAP applies */
--status-pending-fg: #1A4160; --status-pending-bg: #E6F7FF; /* not yet verified */
--status-moved-fg: #7A4E00; --status-moved-bg: #FFF4DD;
/* ---------- Money moments ---------- */
--price-was: #5F6A70; /* struck pharmacy price (4.9:1 on white) */
--price-free: #1B6B3A; /* the $0 */
--danger: #B3261E;
}
/* ---- tokens/typography.css ---- */
/* RxAccess · Typography tokens
* Reference pairing: Tiempos Headline (serif display) + Flama (sans UI), both commercial.
* Production ships the OFL stand-ins (Source Serif 4, Public Sans), self-hosted from
* public/fonts/, per ROLLOUT-PLAN.md section 3 option 2. Font-face rules are inlined into
* site.css directly (see scripts/build-css.sh); this file only sets the family tokens.
* Scale is the reference scale, lifted one step for a 60+ audience: body 18px minimum on
* reading surfaces, 16px floor for any text, line-height 1.5 on body.
*/
:root {
/* PRODUCTION FONT SWAP: the two lines below are the OFL production pair.
To switch to the licensed reference faces once Tiempos Headline (Klim) and Flama
(Feliciano) are purchased, replace the two lines with the pair below (commented)
and add matching self-hosted @font-face rules under public/fonts/. */
--font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* @kind font */
--font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* @kind font */
/* --font-display: "Tiempos Headline", "Source Serif 4", Georgia, "Times New Roman", serif; */
/* --font-sans: "Flama", "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif; */
--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* @kind font */
/* Display (serif). H1 and section-h match the PillPack reference measurement exactly
(H1 55px/500, 0.01em tracking; section-h 47px desktop / 35px mobile). */
--fs-hero: 55px; --lh-hero: 1.08; /* @kind font */ /* 40px under 600px */
--fs-h1: 46px; --lh-h1: 1.12; /* @kind font */ /* 34px under 600px */
--fs-h2: 47px; --lh-h2: 1.15; /* @kind font */ /* section-h; 35px mobile, PillPack-measured */
--fs-h3: 26px; --lh-h3: 1.25; /* @kind font */
--fs-callout: 44px; --lh-callout: 1.2; /* @kind font */ /* the blue band claim */
/* UI (sans). Body stays at our 18px accessibility floor but drops to Flama 300 (PillPack's
lightness comes from weight, not size, per the brief). Lede matches PillPack: 22px/300. */
--fs-lede: 22px; --lh-lede: 1.45; /* @kind font */ /* hero-p */
--fs-body: 18px; --lh-body: 1.55; /* @kind font */ /* reading floor */
--fs-ui: 17px; --lh-ui: 1.4; /* @kind font */ /* nav, buttons, table cells */
--fs-small: 16px; --lh-small: 1.45; /* @kind font */ /* meta, captions: the floor */
--fs-kicker: 14px; --lh-kicker:1.2; /* @kind font */ /* uppercase, +0.15em tracking, ink */
--fs-figure: 40px; --lh-figure:1.05; /* @kind font */ /* stat tiles, the $0 */
--fw-light: 300; /* @kind font */ /* PillPack body weight: Flama 300 */
--fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
--tracking-kicker: 0.15em;
--tracking-display: 0.005em;
--measure: 640px; /* was 62ch; ch is font-relative and drifted to 85ch in wide faces */
}
@media (max-width: 599px) {
:root { --fs-h2: 35px; }
}
/* ---- tokens/spacing.css ---- */
/* RxAccess · Spacing, sizing, radius tokens (reference: PillPack section rhythm) */
:root {
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
--space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
/* Section height tiers (PillPack measured: 16 to 252px, nine distinct values). Assign by content weight; never the same tier twice in a row. */
--section-y-compact: 64px;
--section-y-default: 96px;
--section-y-roomy: 128px;
--section-y-generous: 160px;
--section-y-expansive: 200px; /* PillPack's own top tier (measured up to 252px); the
heaviest-content or image-carrying band on a page */
--section-y-band: 104px; /* callout and CTA bands, PillPack's own value */
--section-y: var(--section-y-default);
--section-y-mobile: var(--space-8);
--section-x: 6.5%; /* reference gutter */
--container: 1160px; /* wide surfaces (tables, listings) */
--container-text: 968px; /* reference .section-inner */
--container-narrow: 700px; /* callout copy */
--tap: 48px; /* minimum interactive height (WCAG 2.5.8 + the audience) */
--control-h: 56px; /* inputs and primary buttons */
--radius-pill: 50px; /* reference CTA buttons */
--radius-card: 16px; /* reference question tiles (1em) */
--radius-sm: 5px; /* reference .pp-btn */
--radius-secondary: 14px; /* reference secondary control (13.3px): tertiary buttons, utility chips */
--radius-chip: 30px;
}
/* ---- tokens/elevation.css ---- */
/* RxAccess · Elevation. The reference is flat: hairlines and tone, one soft shadow for the
* floating object (the packet) and hover on tiles. */
:root {
--shadow-object: 0 18px 40px rgba(0, 51, 77, 0.14), 0 2px 6px rgba(0, 51, 77, 0.06);
--shadow-tile: 0 6px 18px rgba(0, 51, 77, 0.08);
--shadow-none: none;
--ring: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--focus);
}
/* ---- components.css ---- */
/* RxAccess Design System · components (prefix rx-)
* Anatomy lifted from the PillPack reference (pillpack.com, 2026-09-02): pill buttons, serif
* section headings with an uppercase kicker, the full-width blue callout band, the navy CTA
* band, the three-up question tiles, the checklist steps, the split FAQ, the four-column
* footer. Extended with the registry's own components (status chips, receipts, price
* contrast, program cards, listing tables, letter index, record history) because the
* reference is a product page and RxAccess is a record.
* Every interactive element is at least 48px tall. Nothing depends on hover or motion.
*/
/* ---------- Layout ---------- */
.rx-section { padding: var(--section-y) var(--section-x); position: relative; }
.rx-section--tight, .rx-section--compact { padding-top: var(--section-y-compact); padding-bottom: var(--section-y-compact); }
.rx-section--roomy { padding-top: var(--section-y-roomy); padding-bottom: var(--section-y-roomy); }
.rx-section--generous { padding-top: var(--section-y-generous); padding-bottom: var(--section-y-generous); }
.rx-section--expansive { padding-top: var(--section-y-expansive); padding-bottom: var(--section-y-expansive); }
.rx-section--compact + .rx-section:not(.rx-section--pale):not(.rx-section--warm):not(.rx-section--mint) { padding-top: var(--space-4); }
.rx-section--flush-top { padding-top: 0; }
.rx-section--flush-bottom { padding-bottom: 0; }
@media (max-width: 599px) { .rx-section--roomy, .rx-section--generous, .rx-section--expansive { padding-top: 80px; padding-bottom: 80px; } }
.rx-section--pale { background: var(--bg-pale); }
.rx-section--warm { background: var(--bg-warm); }
.rx-section--mint { background: var(--bg-mint); }
.rx-inner { max-width: var(--container); margin: 0 auto; position: relative; } /* one left edge site-wide (owner, 2026-09-03); reading measure comes from --measure on text, not from a narrower centered column */
.rx-inner--wide { max-width: var(--container); }
.rx-inner--narrow { max-width: var(--container-narrow); }
.rx-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.rx-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.rx-grid-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
@media (min-width: 768px) {
.rx-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-8); }
.rx-split--object-left { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.rx-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rx-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) { .rx-section { padding: var(--section-y-mobile) 5%; } }
/* ---------- Type helpers ---------- */
.rx-kicker { display: block; margin: 0 0 1.2em; color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-kicker); font-weight: var(--fw-medium); letter-spacing: var(--tracking-kicker); text-transform: uppercase; }
.rx-h { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-medium); color: var(--ink); }
.rx-hero-h { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: var(--fs-hero); line-height: var(--lh-hero); font-weight: var(--fw-medium); color: var(--ink); letter-spacing: 0.01em; }
.rx-lede { font-size: var(--fs-lede); line-height: var(--lh-lede); font-weight: var(--fw-light); color: var(--ink); max-width: 30ch; margin: 0 0 var(--space-5); }
.rx-p { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-light); color: var(--ink); }
.rx-p--large { font-size: 20px; line-height: 1.5; font-weight: var(--fw-light); }
.rx-list-h { font-family: var(--font-sans); font-size: 20px; font-weight: var(--fw-semibold); line-height: 1.25; margin: 0 0 0.4em; color: var(--ink); }
.rx-list-p { font-size: var(--fs-body); line-height: 1.5; font-weight: var(--fw-light); color: var(--ink-soft); margin: 0 0 1.2em; max-width: 40ch; }
.rx-figure { font-family: var(--font-display); font-size: var(--fs-figure); line-height: var(--lh-figure); font-weight: var(--fw-medium); color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.rx-meta { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); }
.rx-mark { background: linear-gradient(transparent 62%, var(--blue-100) 62%); padding: 0 0.08em; }
.rx-center { text-align: center; }
.rx-center .rx-p, .rx-center .rx-lede { margin-left: auto; margin-right: auto; }
@media (max-width: 599px) { .rx-hero-h { font-size: 40px; } .rx-h { font-size: 35px; } .rx-lede { font-size: 20px; } .rx-figure { font-size: 34px; } }
/* ---------- Top strip (registry counts) ---------- */
.rx-topstrip { background: var(--bg-warm); border-bottom: 1px solid var(--line-soft); font-size: var(--fs-small); color: var(--ink-soft); }
.rx-topstrip .rx-inner--wide { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px var(--space-4); min-height: 44px; padding: 6px 0; }
.rx-topstrip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px var(--space-5); min-width: 0; }
.rx-topstrip li + li::before { content: "·"; margin-right: var(--space-3); color: var(--ink-muted); }
.rx-topstrip strong { color: var(--ink); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.rx-topstrip a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-soft); text-decoration: none; padding: 10px 0; flex: none; }
@media (max-width: 767px) { .rx-topstrip ul { display: none; } }
/* ---------- Header ---------- */
.rx-header { background: var(--bg); border-bottom: 1px solid var(--line-soft); position: relative; z-index: 60; }
.rx-header .rx-inner--wide { display: flex; align-items: center; gap: var(--space-5); min-height: 84px; }
.rx-wordmark { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); text-decoration: none; color: var(--ink); }
.rx-nav { margin-left: auto; }
.rx-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.rx-nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; color: var(--blue-900); font-size: 16px; white-space: nowrap; text-decoration: none; border-bottom: 2px solid transparent; }
.rx-header-cta .rx-btn { white-space: nowrap; min-height: var(--tap); padding: 10px 22px 12px; font-size: 16px; }
@media (min-width: 960px) and (max-width: 1199px) { .rx-nav a { padding: 0 8px; font-size: 15px; } }
.rx-nav a:hover, .rx-nav a[aria-current="page"] { border-bottom-color: var(--blue-500); color: var(--ink); }
.rx-header-cta { display: inline-flex; align-items: center; gap: var(--space-3); }
.rx-menu-btn { display: none; min-height: var(--tap); min-width: var(--tap); border: 1px solid var(--line); border-radius: var(--radius-secondary); background: #fff; padding: 0 16px; font-size: var(--fs-ui); }
@media (max-width: 959px) { .rx-nav { display: none; } .rx-menu-btn { display: inline-flex; align-items: center; margin-left: auto; } .rx-header .rx-inner--wide { min-height: 72px; } }
@media (max-width: 599px) { .rx-header-cta { display: none; } .rx-search { flex-wrap: wrap; border-radius: 28px; } .rx-search button { flex: 1 1 100%; } .rx-search input { flex: 1 1 100%; } }
/* ---------- Mobile nav drawer (P0-3): the disclosure panel .rx-menu-btn promises via
aria-controls="mobile-nav". Full-height panel, 56px rows, opened/closed with focus
handling in the shared drawer script (_shell.html and every page, end of body). ---------- */
#mobile-nav { display: none; }
@media (max-width: 959px) {
#mobile-nav {
display: block; position: fixed; inset: 0; z-index: 80; visibility: hidden;
}
#mobile-nav[data-open="true"] { visibility: visible; }
.rx-mobile-nav-scrim {
position: absolute; inset: 0; background: rgba(10,26,38,0.4); opacity: 0; transition: opacity .18s;
}
#mobile-nav[data-open="true"] .rx-mobile-nav-scrim { opacity: 1; }
.rx-mobile-nav-panel {
position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 380px);
background: #fff; box-shadow: -8px 0 24px rgba(0,51,77,0.16);
display: flex; flex-direction: column;
transform: translateX(100%); transition: transform .2s ease;
overflow-y: auto;
}
#mobile-nav[data-open="true"] .rx-mobile-nav-panel { transform: translateX(0); }
.rx-mobile-nav-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 5%; border-bottom: 1px solid var(--line-soft); min-height: 72px; }
.rx-mobile-nav-head .rx-logo { height: 28px; }
.rx-mobile-nav-close { min-height: var(--tap); min-width: var(--tap); border: 1px solid var(--line); border-radius: var(--radius-secondary); background: #fff; padding: 0 16px; font-size: var(--fs-ui); }
.rx-mobile-nav-links { list-style: none; margin: 0; padding: 8px 0; }
.rx-mobile-nav-links a { display: flex; align-items: center; min-height: 56px; padding: 0 5%; color: var(--ink); font-size: 18px; text-decoration: none; border-bottom: 1px solid var(--line-soft); }
.rx-mobile-nav-links a:hover, .rx-mobile-nav-links a[aria-current="page"] { background: var(--bg-pale); color: var(--link); }
.rx-mobile-nav-actions { margin-top: auto; padding: var(--space-5) 5% calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line-soft); display: grid; gap: var(--space-3); }
.rx-mobile-nav-actions .rx-btn { width: 100%; }
.rx-mobile-nav-lang { display: flex; align-items: center; justify-content: center; min-height: 44px; color: var(--ink-soft); text-decoration: none; font-size: var(--fs-ui); }
}
/* ---------- Persistent mobile CTA (P0-3): keeps "Check if I qualify" reachable under
960px. Hidden for as long as the cookie bar is up (the shared script sets [hidden]),
so it never stacks with the bar; reachable the moment the bar is dismissed. ---------- */
.rx-sticky-cta { display: none; }
.rx-sticky-cta[hidden] { display: none !important; }
@media (max-width: 959px) {
.rx-sticky-cta:not([hidden]) {
display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0,51,77,0.08);
padding: 10px 5% calc(10px + env(safe-area-inset-bottom, 0px));
}
.rx-sticky-cta .rx-btn { width: 100%; min-height: 48px; }
body.rx-has-sticky-cta { padding-bottom: 76px; }
}
/* ---------- Buttons and links ---------- */
.rx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--control-h); padding: 14px 30px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: #fff; color: var(--ink); font-family: var(--font-sans); font-size: 18px; font-weight: var(--fw-regular); line-height: 1.1; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.rx-btn:hover { border-color: var(--ink); color: var(--ink); }
.rx-btn--fill { background: var(--primary); border-color: var(--primary); color: #fff; }
.rx-btn--fill:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.rx-btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.rx-btn--outline-light { border-color: rgba(255,255,255,0.45); color: #fff; background: transparent; }
.rx-btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.08); color: #fff; }
.rx-btn--large { min-height: 64px; padding: 17px 40px 20px; font-size: 22px; }
.rx-btn--secondary { border-radius: var(--radius-secondary); border-color: var(--line); background: #fff; color: var(--ink); font-weight: var(--fw-regular); }
.rx-btn--text { border: 0; background: transparent; padding-left: 0; padding-right: 0; color: var(--link); border-radius: 0; }
.rx-btn--block { width: 100%; }
.rx-featured { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); color: var(--link); font-size: var(--fs-body); font-weight: var(--fw-medium); text-decoration: none; }
.rx-featured::after { content: ""; width: 12px; height: 12px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.rx-featured:hover::after { transform: translateX(3px) rotate(45deg); }
.rx-on-dark .rx-featured, .rx-on-dark .rx-featured:hover, .rx-cta .rx-featured, .rx-cta .rx-btn--text, .rx-cta a { color: #fff; }
/* ---------- Search and income controls ---------- */
.rx-search-wrap { position: relative; width: 100%; max-width: 640px; }
.rx-search { display: flex; gap: 0; width: 100%; max-width: 640px; border: 2px solid var(--ink); border-radius: var(--radius-pill); background: #fff; overflow: hidden; }
.rx-search input { flex: 1; min-width: 0; min-height: var(--control-h); border: 0; padding: 0 22px; font-size: 20px; color: var(--ink); background: transparent; }
.rx-search input::placeholder { color: var(--ink-muted); }
.rx-search input:focus { outline: none; }
.rx-search:focus-within { box-shadow: var(--ring); }
.rx-search button { min-height: var(--control-h); border: 0; padding: 0 28px; background: var(--primary); color: #fff; font-size: var(--fs-ui); font-weight: var(--fw-medium); cursor: pointer; }
.rx-search button:hover { background: var(--primary-hover); }
/* P0-1: absolute-positioned, z-index above the cookie bar (50) and the sticky mobile CTA
(55), so the list is never occluded and its rows are always reachable. .rx-suggest--up
anchors upward when the field sits in the lower half of the viewport. */
.rx-suggest {
list-style: none; margin: 8px 0 0; padding: 6px 0; border: 1px solid var(--line);
border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-tile);
position: absolute; top: 100%; left: 0; right: 0; width: 100%; max-width: 640px;
z-index: 90; max-height: min(60vh, 420px); overflow-y: auto;
}
.rx-suggest.rx-suggest--up { top: auto; bottom: 100%; margin: 0 0 8px; }
.rx-suggest li a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 48px; padding: 8px 20px; text-decoration: none; color: var(--ink); font-size: var(--fs-ui); }
.rx-suggest li a:hover, .rx-suggest li a:focus, .rx-suggest li a[aria-selected="true"] { background: var(--bg-pale); }
.rx-suggest li a > span:first-child { min-width: 0; display: block; }
.rx-suggest li a .rx-meta { display: block; white-space: normal; }
.rx-suggest li a .rx-chip { flex: none; }
.rx-field { display: block; margin: 0 0 var(--space-5); }
.rx-field > span { display: block; font-size: var(--fs-small); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.rx-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.rx-seg button { min-width: var(--tap); min-height: var(--tap); padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: #fff; font-size: var(--fs-ui); color: var(--ink); cursor: pointer; }
.rx-seg button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.rx-range { display: grid; gap: 6px; }
.rx-range output { font-family: var(--font-display); font-size: 34px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.rx-range input[type=range] { width: 100%; height: 44px; accent-color: var(--primary); }
.rx-range .rx-range-ticks { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--ink-muted); }
.rx-input { display: block; width: 100%; min-height: var(--control-h); padding: 0 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-size: var(--fs-ui); color: var(--ink); background: #fff; }
/* ---------- Status chips (the verification vocabulary) ---------- */
.rx-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 3px 12px 4px; border-radius: var(--radius-chip); font-size: var(--fs-small); font-weight: var(--fw-semibold); line-height: 1; white-space: nowrap; letter-spacing: 0.01em; }
.rx-chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.rx-chip--verified { color: var(--status-verified-fg); background: var(--status-verified-bg); }
.rx-chip--checking { color: var(--status-checking-fg); background: var(--status-checking-bg); }
.rx-chip--none { color: var(--status-none-fg); background: var(--status-none-bg); }
.rx-chip--generic { color: var(--status-generic-fg); background: var(--status-generic-bg); }
.rx-chip--generic::before { background: transparent; border: 2px solid currentColor; width: 7px; height: 7px; }
.rx-chip--pending { color: var(--status-pending-fg); background: var(--status-pending-bg); }
.rx-chip--pending::before { background: transparent; border: 2px solid currentColor; width: 7px; height: 7px; }
.rx-chip--moved { color: var(--status-moved-fg); background: var(--status-moved-bg); }
.rx-chip--lg { min-height: 40px; padding: 6px 16px 7px; font-size: var(--fs-ui); }
/* ---------- Filter chips (toggle) ---------- */
.rx-filters { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.rx-filter { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 18px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: #fff; color: var(--ink); font-size: var(--fs-ui); cursor: pointer; text-decoration: none; }
/* P1-7: aria-pressed is invalid on an ; filter pills that ARE links use
aria-current="page" (valid, and matches .rx-nav/.rx-pager's own convention). A
button-based filter (not currently used on any page) would still use aria-pressed. */
.rx-filter[aria-pressed="true"], .rx-filter[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.rx-filter .rx-count { font-variant-numeric: tabular-nums; color: inherit; opacity: .75; }
/* ---------- Receipt (value + verified date + source) ---------- */
.rx-receipt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-soft); }
.rx-receipt .rx-stamp { display: inline-flex; align-items: center; gap: 6px; color: var(--status-verified-fg); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; font-size: 14px; }
.rx-receipt .rx-stamp::before { content: "✓"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--status-verified-bg); font-size: 12px; }
.rx-receipt .rx-stamp--pending { color: var(--status-pending-fg); }
.rx-receipt .rx-stamp--pending::before { content: "…"; background: var(--status-pending-bg); }
.rx-receipt time { font-variant-numeric: tabular-nums; }
.rx-receipt a { color: var(--ink-soft); }
/* ---------- Price contrast (the money moment) ---------- */
.rx-price { display: flex; align-items: baseline; gap: 14px 22px; flex-wrap: wrap; }
.rx-price > div { display: grid; gap: 4px; }
.rx-price .rx-price-label { font-size: var(--fs-small); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.rx-price-was { font-family: var(--font-display); font-size: var(--fs-figure); line-height: 1.05; color: var(--price-was); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rx-price-free { font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--price-free); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.rx-price-unit { display: inline-block; font-family: var(--font-sans); font-size: var(--fs-body); color: var(--ink-soft); text-decoration: none; margin-left: 2px; }
.rx-price--inline .rx-price-was, .rx-price--inline .rx-price-free { font-size: 22px; }
/* ---------- Stat tiles ---------- */
.rx-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.rx-stat { background: #fff; padding: var(--space-5) var(--space-5) var(--space-6); min-width: 0; }
.rx-stat .rx-figure { display: block; margin-bottom: 6px; overflow-wrap: anywhere; }
.rx-stat .rx-stat-label { display: block; font-size: var(--fs-body); color: var(--ink-soft); max-width: 22ch; overflow-wrap: anywhere; }
.rx-stats--3 { grid-template-columns: 1fr; }
.rx-stats--5 { grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .rx-stats--3 { grid-template-columns: repeat(3, 1fr); } .rx-stats--5 { grid-template-columns: repeat(5, 1fr); } }
/* P1-5-pattern target size: the whole tile is the tap target (was just the number).
The link fills the tile via negative-margin/padding so it does not double the
.rx-stat padding already applied above (plain, non-linked .rx-stat tiles keep that
padding as-is). */
.rx-stat { position: relative; }
.rx-stat a { display: block; margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) calc(var(--space-6) * -1); padding: var(--space-5) var(--space-5) var(--space-6); color: inherit; text-decoration: none; }
.rx-stat a .rx-figure { text-decoration: underline; text-decoration-color: var(--blue-500); text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (min-width: 768px) { .rx-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rx-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rx-stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* ---------- Question tiles (reference "I visit the pharmacy…") ---------- */
.rx-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.rx-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 150px; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; color: var(--ink); text-decoration: none; text-align: center; font-size: var(--fs-ui); font-weight: var(--fw-medium); cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.rx-tile:hover, .rx-tile:focus-visible { box-shadow: var(--shadow-tile); border-color: var(--blue-500); }
.rx-tile svg { width: 44px; height: 44px; color: var(--primary); }
.rx-tile .rx-meta { font-weight: var(--fw-regular); }
@media (min-width: 600px) { .rx-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rx-tile { min-height: 220px; } }
/* ---------- Trust strip: one quiet line, not an uppercase-tracked chip row (T-0627
declutter -- was 6 tracked uppercase chips, a device PillPack has no equivalent of). ---------- */
.rx-trust { list-style: none; margin: 0; padding: 14px 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); font-size: var(--fs-small); font-weight: var(--fw-light); color: var(--ink-soft); text-align: center; }
.rx-trust li + li::before { content: "·"; margin: 0 10px; color: var(--ink-muted); }
/* ---------- Feature list with object (reference "A new kind of care") ---------- */
.rx-features { list-style: none; margin: 0; padding: 0; }
.rx-features li { padding: 0 0 var(--space-4); }
.rx-object { display: block; width: 100%; margin: 0; border-radius: 14px; box-shadow: var(--shadow-object); background: #fff; overflow: hidden; }
.rx-object img { display: block; width: 100%; }
/* T-0627: a split section's object column fills the full row height (PillPack's own
photo bands run the section's full height, not center-cropped to the shorter text
column) -- used on the "why" and "entry paths" bands carrying the new stills. */
.rx-split--object-fill { align-items: stretch; }
.rx-split--object-fill .rx-object { height: 100%; }
.rx-split--object-fill .rx-object img { height: 100%; object-fit: cover; }
.rx-object--tilt { transform: rotate(-3deg); }
/* ---------- Steps / checklist (reference how-it-works) ---------- */
.rx-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.rx-step { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-4); align-items: start; }
.rx-step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--blue-100); color: var(--primary); font-family: var(--font-display); font-size: 26px; font-weight: var(--fw-semibold); }
.rx-step h3, .rx-step h4 { margin: 8px 0 4px; }
.rx-step p { margin: 0; color: var(--ink-soft); }
.rx-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rx-checklist li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: center; font-size: 20px; color: var(--ink); }
.rx-checklist li::before { content: "✓"; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 18px; font-weight: 700; }
/* ---------- Split FAQ (reference "You may be wondering") ---------- */
.rx-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--space-8); }
.rx-faq details { border-top: 1px solid var(--line); }
.rx-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 64px; padding: 14px 0; font-size: 20px; font-weight: var(--fw-medium); color: var(--ink); }
.rx-faq summary::-webkit-details-marker { display: none; }
.rx-faq summary::after { content: "+"; font-size: 30px; color: var(--primary); line-height: 1; flex: none; }
.rx-faq details[open] summary::after { content: "–"; }
.rx-faq details > p { margin: 0 0 var(--space-5); color: var(--ink-soft); }
@media (min-width: 768px) { .rx-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---------- Callout band (reference "Our service is free…") ---------- */
.rx-callout { background: var(--bg-band); color: #fff; text-align: center; padding: var(--section-y-band) var(--section-x); }
.rx-callout .rx-callout-h { margin: 0 auto 0.6em; max-width: 18ch; font-family: var(--font-display); font-size: var(--fs-callout); line-height: var(--lh-callout); font-weight: var(--fw-medium); color: #fff; letter-spacing: 0.01em; }
.rx-callout .rx-p { color: rgba(255,255,255,0.92); margin-left: auto; margin-right: auto; }
@media (max-width: 599px) { .rx-callout .rx-callout-h { font-size: 32px; } }
/* ---------- CTA band (reference "Switch to a simpler pharmacy today") ---------- */
.rx-cta { background: var(--bg-dark); color: #fff; text-align: center; padding: var(--section-y-band) var(--section-x); }
.rx-cta .rx-h { color: #fff; margin-bottom: 0.7em; }
.rx-cta .rx-p, .rx-cta .rx-meta { color: rgba(255,255,255,0.85); margin-left: auto; margin-right: auto; }
.rx-cta .rx-cta-alt { margin-top: var(--space-5); font-size: var(--fs-body); color: rgba(255,255,255,0.85); }
/* ---------- Provenance band ("How we know this") ---------- */
.rx-how { background: var(--bg-pale); border-top: 1px solid var(--line-soft); }
.rx-how .rx-grid-3 > div h3 { font-family: var(--font-sans); font-size: 15px; font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.rx-how .rx-grid-3 > div p { color: var(--ink); }
.rx-how .rx-links { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--fs-small); }
.rx-how .rx-links a { display: inline-flex; align-items: center; min-height: 44px; }
/* ---------- Answer box (medication page) ---------- */
.rx-answer { background: var(--bg-pale); border: 1px solid var(--line-soft); border-radius: var(--radius-card); padding: var(--space-6); display: grid; gap: var(--space-5); }
.rx-answer .rx-answer-claim { font-family: var(--font-display); font-size: 32px; line-height: 1.2; color: var(--ink); margin: 0 0 var(--space-4); max-width: 26ch; }
@media (min-width: 768px) { .rx-answer { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; padding: var(--space-7); } .rx-answer .rx-answer-claim { font-size: 38px; } }
.rx-answer:not(:has(.rx-answer-price-block)) { grid-template-columns: minmax(0, 1fr); }
.rx-answer:not(:has(.rx-answer-price-block)) .rx-answer-claim { max-width: 34ch; }
.rx-answer .rx-answer-claim.rx-answer-claim--long, .rx-answer:not(:has(.rx-answer-price-block)) .rx-answer-claim.rx-answer-claim--long { max-width: 48ch; }
.rx-answer .rx-answer-claim--long { font-size: 24px; line-height: 1.3; max-width: 44ch; }
@media (min-width: 768px) { .rx-answer .rx-answer-claim--long { font-size: 28px; } }
/* ---------- Program option card ---------- */
.rx-program { border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; overflow: hidden; }
.rx-program-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); padding: var(--space-5) var(--space-5) var(--space-4); border-bottom: 1px solid var(--line-soft); }
.rx-program-head h3 { margin: 0; font-family: var(--font-display); font-size: 26px; }
.rx-program-head .rx-meta { width: 100%; }
.rx-program-body { padding: var(--space-4) var(--space-5) var(--space-5); display: grid; gap: var(--space-4); }
.rx-program-body p { margin: 0; }
.rx-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.rx-facts div { display: grid; gap: 4px; }
.rx-facts dt { font-size: 14px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.rx-facts dd { margin: 0; font-size: var(--fs-body); color: var(--ink); overflow-wrap: anywhere; }
.rx-facts dd.rx-figure { font-size: 30px; }
/* P1-5: the same target-size fix as table row-name links, applied to phone/URL links
inside a facts list (e.g. Program.html "How to apply"). */
.rx-facts dd a { display: inline-flex; align-items: center; min-height: 44px; }
.rx-program-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); padding: var(--space-4) var(--space-5); background: var(--bg-warm); border-top: 1px solid var(--line-soft); }
.rx-program--first { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.rx-program--first .rx-program-head { background: var(--blue-50); }
@media (min-width: 768px) { .rx-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ---------- Tables (listing + comparison) ---------- */
.rx-tablewrap { max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
.rx-table { min-width: 640px; }
.rx-table th { position: sticky; top: 0; background: var(--bg-warm); font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); padding: 14px 18px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rx-table td { padding: 16px 18px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-ui); line-height: 1.4; color: var(--ink); vertical-align: middle; }
.rx-table tr:last-child td { border-bottom: 0; }
.rx-table tbody tr:hover td { background: var(--bg-pale); }
/* P1-5 (same WCAG SC 2.5.8 target-size violation as the named footer/cookie/wordmark
controls, same fix): the row-name link is a 44px block target, not just its text
line, since the surrounding | padding is not itself clickable. */
.rx-table .rx-cell-name a { display: inline-flex; align-items: center; min-height: 44px; font-weight: var(--fw-semibold); color: var(--ink); text-decoration: none; font-size: 18px; }
.rx-table .rx-cell-name a:hover { color: var(--link); text-decoration: underline; }
.rx-table .rx-cell-name .rx-meta { display: block; margin-top: 2px; }
.rx-table--compact .rx-cell-name a { min-height: 36px; }
.rx-table .rx-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rx-table .rx-num-free { color: var(--price-free); font-weight: var(--fw-semibold); }
.rx-table .rx-num-was { color: var(--price-was); text-decoration: line-through; }
.rx-table time { white-space: nowrap; color: var(--ink-soft); }
.rx-table--compact td { padding: 12px 16px; }
/* ---------- Toolbar, pager, breadcrumb, letter index ---------- */
.rx-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin: 0 0 var(--space-5); }
.rx-toolbar .rx-result-count { font-size: var(--fs-body); color: var(--ink-soft); }
.rx-toolbar .rx-result-count strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.rx-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.rx-pager a, .rx-pager span { display: inline-grid; place-items: center; min-width: var(--tap); min-height: var(--tap); padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-secondary); text-decoration: none; color: var(--ink); font-size: var(--fs-ui); }
.rx-pager [aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.rx-crumbs { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-small); color: var(--ink-muted); }
.rx-crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--line-strong); }
.rx-crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--ink-soft); text-decoration: none; padding: 0 2px; }
.rx-crumbs a:hover { text-decoration: underline; }
.rx-letters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.rx-letters a { display: grid; place-items: center; gap: 2px; min-height: 64px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-size: 26px; }
.rx-letters a .rx-meta { font-family: var(--font-sans); font-size: 14px; }
.rx-letters a:hover, .rx-letters a[aria-current="page"] { border-color: var(--primary); background: var(--blue-50); }
/* ---------- Record history (changes on the record) ---------- */
.rx-history { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.rx-history li { position: relative; padding: 0 0 var(--space-5) var(--space-5); }
.rx-history li::before { content: ""; position: absolute; left: -7px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); }
.rx-history time { display: block; font-size: var(--fs-small); color: var(--ink-muted); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.rx-history p { margin: 0; }
/* ---------- Notice (calm, not a warning) ---------- */
.rx-notice { display: flex; gap: 14px; align-items: flex-start; padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-left: 4px solid var(--blue-500); border-radius: var(--radius-sm); background: #fff; font-size: var(--fs-body); color: var(--ink); }
.rx-notice p { margin: 0; }
/* axe link-in-text-block: an inline link inside notice prose needs its own
distinguishing style (not just color) and enough contrast against the surrounding
ink color, not only against the background. */
.rx-notice p a.rx-btn--text { text-decoration: underline; text-underline-offset: 0.16em; }
/* ---------- Footer (reference four-column) ---------- */
.rx-footer { border-top: 1px solid var(--line); background: #fff; padding: var(--space-8) var(--section-x) var(--space-9); font-size: var(--fs-small); color: var(--ink-soft); }
.rx-footer .rx-inner--wide { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
.rx-footer-brand p { margin: var(--space-4) 0 0; max-width: 34ch; }
.rx-footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5); }
.rx-footer-cols h3 { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--ink); margin: 0 0 10px; }
.rx-footer-cols ul { list-style: none; margin: 0; padding: 0; }
.rx-footer-cols a { display: flex; align-items: center; min-height: 44px; padding: 0; color: var(--ink-soft); text-decoration: none; }
.rx-footer-cols a:hover { color: var(--link); text-decoration: underline; }
.rx-footer-legal { grid-column: 1 / -1; padding-top: var(--space-5); border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-5); }
@media (min-width: 768px) { .rx-footer .rx-inner--wide { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); } .rx-footer-cols { grid-template-columns: repeat(4, 1fr); } }
/* ---------- Cookie bar (compact: one line on desktop, two equal small buttons) ---------- */
/* P0-2: hidden by default in markup; the shared script shows it only when no session
choice exists yet, and hides it (with the body's reserved padding) the moment either
button is pressed. z-index 50 keeps it below the suggestion list (90) and the mobile
nav drawer (80) so it can never occlude either. */
.rx-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0,51,77,0.06); padding: 10px var(--section-x); }
.rx-cookie[hidden] { display: none; }
.rx-cookie .rx-inner--wide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.rx-cookie p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink-soft); max-width: 92ch; }
.rx-cookie p a { color: var(--ink-soft); }
.rx-cookie .rx-cookie-actions { display: flex; gap: 8px; flex: none; }
.rx-cookie .rx-btn { min-height: 44px; padding: 10px 16px 11px; font-size: 14px; }
@media (max-width: 599px) { .rx-cookie { padding: 10px 5%; } .rx-cookie p { font-size: 13px; } }
/* Reserved bottom padding only while the bar is showing; removed with the bar itself
(P0-2) so dismissal actually reclaims the space rather than leaving a dead gap. The
sticky mobile CTA is hidden for as long as the cookie bar is up (P0-3, never stacked
on it), so only the bar's own height needs reserving -- never both. */
body.rx-has-cookie-bar { padding-bottom: 138px; }
@media (min-width: 700px) { body.rx-has-cookie-bar { padding-bottom: 64px; } }
/* ---------- Hero ---------- */
.rx-hero { padding: var(--space-8) var(--section-x) var(--space-9); background: #fff; }
.rx-hero .rx-inner--wide { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.rx-hero .rx-hero-copy .rx-kicker { color: var(--ink-soft); }
.rx-hero .rx-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; margin-top: var(--space-6); }
.rx-hero .rx-lede { margin-bottom: var(--space-6); }
.rx-hero .rx-search-wrap { margin: 0 0 var(--space-6); }
.rx-hero .rx-price--inline { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; column-gap: var(--space-4); row-gap: var(--space-3); margin: 0; }
@media (min-width: 768px) { .rx-hero .rx-inner--wide { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-8); } .rx-hero { padding-top: var(--space-9); } }
/* P0-1/P0-2 (mobile only): the hero's own vertical rhythm, trimmed so the search field
clears the fixed cookie-bar footprint at initial load on a 390px phone -- spacing
only, no text changed. */
@media (max-width: 599px) {
.rx-hero { padding-top: var(--space-4); padding-bottom: var(--space-6); }
.rx-hero .rx-hero-copy .rx-kicker { margin-bottom: 0.5em; }
.rx-hero-h { margin-bottom: var(--space-3); }
.rx-lede { margin-bottom: var(--space-3); }
}
/* ---------- Hero video (PillPack's looping object film; see motion/HERO-VIDEO-BRIEF.md) ---------- */
.rx-hero-video { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--shadow-object); }
.rx-hero-video video, .rx-hero-video img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rx-hero-video .rx-hero-video-fallback { position: absolute; inset: auto 16px 16px 16px; }
@media (prefers-reduced-motion: reduce) { .rx-hero-video video { display: none; } .rx-hero-video img { display: block; } }
/* ---------- Logo (T-0627: outlined SVG, Plus Jakarta Sans wordmark + Flama descriptor) ---------- */
.rx-logo { height: 38px; width: 147px; flex: none; display: block; }
.rx-header .rx-logo { width: 147px; height: 38px; }
.rx-mobile-nav-head .rx-logo { width: 108px; height: 28px; }
.rx-footer .rx-logo { height: 30px; width: 116px; }
@media (max-width: 599px) { .rx-logo, .rx-header .rx-logo { height: 30px; width: 116px; } }
/* Usability: list links and in-table buttons meet the 44px target (full-site crawl, T-0627) */
main li > a:only-child, .rx-sources a, .rx-related-links a { display: inline-flex; align-items: center; min-height: 44px; }
.rx-table .rx-btn { min-height: 44px; }
.rx-answer-actions a, .rx-notice a, .rx-callout a { min-height: 44px; display: inline-flex; align-items: center; }
/* Usability round 2 (full-site crawl): every remaining sub-44px target */
.rx-table .rx-cell-name a, .rx-program-head a, .rx-program-head h3 a { display: inline-flex; align-items: center; min-height: 44px; }
.sidelinks a, .sidehelp .sidelinks a { display: flex; align-items: center; min-height: 44px; }
.rx-receipt a, .rx-facts dd a, main p > a, main dd > a { display: inline-block; padding: 11px 0; margin: -11px 0; }
.save-list .save-go, a.save-go { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--radius-secondary); color: var(--ink); text-decoration: none; font-size: var(--fs-ui); white-space: nowrap; }
.save-list .save-go:hover, a.save-go:hover { border-color: var(--primary); color: var(--link); }
/* Other ways to save (partials/other-ways-to-save): legacy module on the design system's card idiom */
.save-mod .save-list { display: grid; gap: var(--space-4); }
.save-mod .save-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-7); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
@media (min-width: 768px) { .save-mod .save-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); } }
.save-mod .save-row-k { font-family: var(--font-display); font-size: 24px; line-height: 1.25; color: var(--ink); margin: 0 0 var(--space-2); }
.save-mod .save-row-main p { margin: 0 0 var(--space-3); }
.save-mod .save-caveat { font-size: var(--fs-small); color: var(--ink-soft); }
.save-mod .chipline { display: inline-block; font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; color: var(--ink-soft); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 4px 10px; }
.save-mod .save-row-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-content: start; }
.save-mod .save-row-dl dt { font-size: 14px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.save-mod .save-row-dl dd { margin: 0; color: var(--ink); }
.save-mod .save-row-side .asof { font-size: var(--fs-small); color: var(--ink-soft); }
.save-mod .save-nonprofit { margin-top: var(--space-7); padding: var(--space-6); border-radius: var(--radius-card); background: var(--bg-pale); }
.save-mod .save-nonprofit h3 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: 24px; }
.save-mod .save-nonprofit ul { margin: var(--space-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.save-mod .save-nonprofit li { display: grid; gap: 2px; }
.save-mod .save-nonprofit li a { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; }
.rx-letters li > a:only-child { display: grid; width: 100%; }
.rx-table .rx-cell-name a { min-width: 44px; }
main a[href$="/api"] { display: inline-block; min-width: 44px; text-align: center; }
/* Header budget with the shipped sans (wider than the comp face): nav and CTA fit 1160 at 16px+ */
.rx-header .rx-inner--wide { gap: var(--space-4); }
.rx-nav ul { gap: 0; flex-wrap: nowrap; }
.rx-nav a { padding: 0 9px; font-size: 15px; }
.rx-header-cta .rx-btn { padding: 10px 16px 12px; }
html[lang="es"] .rx-nav a { padding: 0 6px; font-size: 14px; }
@media (max-width: 1240px) { html[lang="es"] .rx-header-cta { display: none; } }
/* Medication side rail sits in the same column as the page content */
.rx-medication-side { box-sizing: content-box; max-width: var(--container); margin-left: auto; margin-right: auto; padding-left: var(--section-x); padding-right: var(--section-x); }
/* ---- type-system.css (Plus Jakarta Sans scale) ---- */
/* RxAccess type system: Plus Jakarta Sans throughout (owner pick 2026-09-03; was variant C — Geometric axis matched to the Plus Jakarta Sans wordmark.
* Token overrides only: no new colors, same components, same content.
* Grid: everything below is a multiple of 8px. Five type sizes on the page:
* 50 / 32 / 20 / 18 / 16 (component-named exceptions: 40 callout, 17 buttons/table
* cells, 15 kickers/table headers — called out explicitly in the brief). */
:root {
/* ---------- Faces ---------- */
--font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
/* ---------- Tracking ---------- */
--tracking-display: -0.01em;
--tracking-kicker: 0;
/* ---------- Sizes: five on the page, plus the named component exceptions ---------- */
--fs-hero: 50px; --lh-hero: 1.1;
--fs-h1: 32px; --lh-h1: 1.2;
--fs-h2: 32px; --lh-h2: 1.2;
--fs-h3: 20px; --lh-h3: 1.3;
--fs-callout: 40px; --lh-callout: 1.15;
--fs-lede: 20px; --lh-lede: 1.5;
--fs-body: 18px; --lh-body: 1.6;
--fs-ui: 17px; --lh-ui: 1.4;
--fs-small: 16px; --lh-small: 1.5;
--fs-kicker: 15px; --lh-kicker: 1.3;
--fs-figure: 32px; --lh-figure: 1.1;
--fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
}
/* ============ GRID: 8px inner gaps + 64/96/128 section tiers only ============ */
.rx-split, .rx-grid-2, .rx-grid-3, .rx-hero .rx-inner--wide { gap: 24px; }
@media (min-width: 768px) { .rx-split, .rx-hero .rx-inner--wide { gap: 48px; } }
.rx-features li { margin-bottom: 24px; }
.rx-features li:last-child { margin-bottom: 0; }
.rx-section, .rx-section--tight, .rx-section--compact { padding-top: var(--section-y-compact); padding-bottom: var(--section-y-compact); }
.rx-section--roomy { padding-top: var(--section-y-default); padding-bottom: var(--section-y-default); }
.rx-section--generous { padding-top: var(--section-y-roomy); padding-bottom: var(--section-y-roomy); }
.rx-callout { padding-top: var(--section-y-compact); padding-bottom: var(--section-y-compact); }
@media (max-width: 599px) { .rx-section--roomy, .rx-section--generous { padding-top: var(--section-y-compact); padding-bottom: var(--section-y-compact); } }
/* ============ TYPE: display is Plus Jakarta Sans 700, tight tracking ============ */
h1, h2, h3, h4, .rx-hero-h, .rx-h, .rx-callout-h, .rx-figure {
font-family: var(--font-display);
font-weight: var(--fw-bold);
letter-spacing: var(--tracking-display);
}
.rx-figure { font-variant-numeric: tabular-nums lining-nums; }
/* Hero copy: capped measure, five-size scale */
.rx-hero-h { max-width: 32ch; }
.rx-lede { max-width: 32ch; font-size: var(--fs-lede); line-height: var(--lh-lede); }
/* Kickers: 15px 600 sentence case, ink-soft, no uppercase, no tracking */
.rx-kicker, .rx-trust {
text-transform: none;
letter-spacing: 0;
font-weight: var(--fw-semibold);
font-size: var(--fs-kicker);
color: var(--ink-soft);
}
.rx-hero .rx-hero-copy .rx-kicker { color: var(--ink-soft); }
.rx-trust li::before { content: none; }
.rx-trust { justify-content: flex-start; gap: 8px 32px; }
/* Body / UI faces */
body { font-family: var(--font-sans); font-weight: var(--fw-regular); }
.rx-p, .rx-list-p, p { font-size: var(--fs-body); line-height: var(--lh-body); }
.rx-list-h { font-size: var(--fs-h3); font-weight: var(--fw-semibold); font-family: var(--font-sans); }
.rx-meta, .rx-small, small { font-size: var(--fs-small); line-height: var(--lh-small); }
.rx-featured { font-size: var(--fs-small); font-weight: var(--fw-semibold); }
/* ============ BUTTONS: 17px 600, pill primary, 12px radius secondary ============ */
.rx-btn {
font-family: var(--font-sans);
font-size: var(--fs-ui);
font-weight: var(--fw-semibold);
letter-spacing: 0;
border-radius: var(--radius-pill);
}
.rx-btn--secondary, .rx-btn--outline { border-radius: 12px; }
.rx-btn--large { font-size: var(--fs-h3); }
/* ============ CHIPS: text-only, 600 weight, no dots, 14px radius ============ */
.rx-chip {
font-size: var(--fs-small);
font-weight: var(--fw-semibold);
border-radius: 14px;
padding: 4px 12px;
}
.rx-chip::before { content: none; }
/* ============ TABLE: headers 15px 600 sentence case; cells 17px ============ */
.rx-table th {
font-family: var(--font-sans);
font-size: var(--fs-kicker);
font-weight: var(--fw-semibold);
text-transform: none;
letter-spacing: 0;
}
.rx-table td { font-size: var(--fs-ui); }
.rx-table .rx-cell-name a { font-size: var(--fs-ui); }
/* ============ PRICE CONTRAST under the search: right-aligned two-column dl ============ */
.rx-price.rx-price--inline {
display: grid;
grid-template-columns: max-content max-content;
column-gap: 24px;
row-gap: 8px;
align-items: baseline;
justify-content: start;
}
.rx-price.rx-price--inline .rx-price-label {
grid-column: 1;
text-align: left;
text-transform: none;
letter-spacing: 0;
font-size: var(--fs-small);
font-weight: var(--fw-semibold);
color: var(--ink-soft);
align-self: center;
}
.rx-price.rx-price--inline .rx-price-was,
.rx-price.rx-price--inline .rx-price-free {
grid-column: 2;
justify-self: end;
text-align: right;
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums lining-nums;
}
.rx-object-pad .rx-price.rx-price--inline .rx-price-was,
.rx-object-pad .rx-price.rx-price--inline .rx-price-free { font-size: var(--fs-h3); }
/* The mini "if a program takes you" rows keep their own inline (name + price) shape;
only right-align the price side to match the definition-list read. */
.rx-mini-list li { justify-content: space-between; }
.rx-mini-list .rx-price--inline { display: flex; column-gap: 12px; }
/* ============ "Not sure where you fit": vertical list, 56px rows, no icons ============ */
.rx-fit-list { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--line-soft); }
.rx-fit-list li { background: transparent; }
.rx-fit-list a {
height: 56px;
min-height: 56px;
padding: 0 4px;
background: var(--bg);
gap: 16px;
line-height: 1;
}
.rx-fit-list svg { display: none; }
.rx-fit-list a span { font-size: var(--fs-body); font-weight: var(--fw-medium); }
/* ============ Misc alignment / consistency on the 8px grid ============ */
.rx-price-unit { font-size: var(--fs-small); }
.rx-price--inline .rx-price-was, .rx-price--inline .rx-price-free { font-size: var(--fs-h3); }
.rx-income-figure .rx-figure { font-size: var(--fs-hero); }
.rx-range output { font-size: var(--fs-h3); font-family: var(--font-display); font-weight: var(--fw-bold); }
@media (max-width: 599px) {
.rx-hero-h { font-size: 32px; }
.rx-h { font-size: 24px; }
.rx-lede { font-size: 18px; }
.rx-figure { font-size: 24px; }
.rx-callout .rx-callout-h { font-size: 32px; }
}
/* ============ Page-level inline |