/* ==========================================================================
   QUANTUM PHARMACY — shared stylesheet
   Every page loads this file and nothing else. If a page needs a component,
   it goes here; no page-level <style> blocks.

   Palette is taken from the logomark: the dark slate ground (#0E1C26), the
   capsule blue (#2C7FDA, deepened to #0F63C4 so small text clears AA), and
   the cool off-white the orbits sit against. One warm band (--warm) is kept
   as punctuation — it appears exactly once, behind the testimonial, so the
   page has a human beat in an otherwise clinical run of greys.

   Bronze appears in exactly one place: the retail side of a price
   comparison, so "the expensive way" reads as a colour, not a label.
   ========================================================================== */
:root{
  --paper:      #F1F1EF;   /* page ground */
  --tint:       #E4EAEE;   /* section band */
  --warm:       #FBF8F0;   /* the single warm band */
  --white:      #FFFFFF;

  --ink:        #0E1C26;   /* logomark ground: text, CTA band, formula header */
  --ink-soft:   #4C6472;   /* secondary text — 5.1:1 on --tint */
  --slate:      #9FB6C3;   /* secondary text on dark grounds */

  --blue:       #0F63C4;   /* accent, links, primary button */
  --blue-dark:  #0A4894;   /* primary button hover */
  --blue-light: #4A9BEE;   /* links and accents on dark grounds */

  --bronze:     #8A6440;   /* ONLY the retail side of a price comparison */

  --line:        rgba(14,28,38,.14);
  --line-strong: rgba(14,28,38,.26);

  --display:"Literata", Georgia, serif;
  --body:"DM Sans", system-ui, -apple-system, sans-serif;
  --mono:"DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap:1160px;
  --radius:20px;
  --radius-sm:12px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }

/* Literata. Fraunces came first, but it ends the f's hook in a ball that
   curls toward the next letter, it ships no alternate for that glyph, and the
   WONK axis leaves the outline byte-identical at 0 and 1 — so it could only be
   patched by borrowing one glyph from another face, which cost ligatures
   sitewide. Literata is the face those borrowed letterforms came from: one
   drawing throughout, ligatures intact, nothing to explain. */
h1,h2,h3,h4{
  font-family:var(--display);
 
  font-weight:500; line-height:1.12; letter-spacing:-.015em;
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.5rem,6vw,4.1rem); }
h2{ font-size:clamp(1.9rem,3.8vw,2.85rem); }
h3{ font-size:1.32rem; letter-spacing:-.01em; }
h4{ font-size:1.05rem; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
a{ color:var(--blue); }

:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--white);
  padding:12px 20px; border-radius:0 0 10px 0; z-index:200; text-decoration:none; font-weight:700;
}
.skip-link:focus{ left:0; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 28px; }

.eyebrow{
  font-size:.73rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue); margin:0 0 1.1em;
}
.lede{ font-size:1.15rem; color:var(--ink-soft); max-width:56ch; }
.lede--stacked{ margin-top:1em; }
.nowrap{ white-space:nowrap; }

/* Sections own vertical rhythm; the ground modifiers own colour only, so
   the two never fight over spacing. */
.section{ padding:clamp(64px,9vw,118px) 0; }
.section--tint{ background:var(--tint); }
.section--white{ background:var(--white); }
.section--warm{ background:var(--warm); }
.section-head{ max-width:62ch; margin:0 auto clamp(38px,5vw,60px); text-align:center; }
.section-head h2, .cta-band h2, .quote blockquote{ text-wrap:balance; }
.section-head .lede{ margin-inline:auto; text-wrap:pretty; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--body); font-size:.95rem; font-weight:700; letter-spacing:.01em;
  padding:15px 30px; border-radius:999px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--blue); color:var(--white); }
.btn--primary:hover{ background:var(--blue-dark); }
.btn--ghost{ border-color:var(--line-strong); color:var(--ink); background:transparent; }
.btn--ghost:hover{ background:var(--white); }
.btn--sm{ padding:11px 22px; font-size:.87rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.btn-row--center{ justify-content:center; }

/* ---------- header ---------- */
/* Scroll-reactive header. A 1px sentinel sits above it; once that scrolls
   out of view the header is pinned, and IntersectionObserver flips
   .is-stuck — no scroll listener, so nothing runs per frame. Over the hero
   it stays transparent; pinned it becomes Deep Field and the lockup,
   links and toggle all swap to their knocked-out colourway. */
.site-header{
  position:sticky; top:0; z-index:50;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.header-sentinel{ height:1px; margin-bottom:-1px; }
/* The header is pinned at every width now, so anything deep-linked has to
   clear it rather than land underneath it. */
section[id], .faq details[id]{ scroll-margin-top:108px; }
.site-header.is-stuck{
  background:rgba(14,28,38,.92); backdrop-filter:blur(10px);
  border-bottom-color:rgba(241,241,239,.14);
}
.site-header.is-stuck .brand-lockup--light{ display:none; }
.site-header.is-stuck .brand-lockup--dark{ display:block; }
.site-header.is-stuck .nav a:not(.btn){ color:var(--paper); }
.site-header.is-stuck .nav a:not(.btn):hover{ border-bottom-color:var(--blue-light); }
.site-header.is-stuck .header-phone{ color:var(--paper); }
.site-header.is-stuck .header-phone:hover{ color:var(--blue-light); }
.site-header.is-stuck .nav-toggle{ color:var(--paper); }
.site-header.is-stuck :focus-visible{ outline-color:var(--blue-light); }
.header-inner{ display:flex; align-items:center; gap:28px; min-height:100px; }
.brand{ display:flex; align-items:center; text-decoration:none; flex:none; }
/* Horizontal lockup composed from the V2 master (a square stacked mark) —
   the mark and the QUANTUM/PHARMACY block set side by side, artwork
   untouched. Two colourways: ink for the light header, knocked out for the
   dark scrolled state. */
.brand-lockup{ height:66px; width:auto; display:block; }
.brand-lockup--dark{ display:none; }
.footer-brand .brand-lockup{ height:78px; }
.nav{ display:flex; gap:26px; margin-left:auto; align-items:center; }
.nav > *{ flex:none; white-space:nowrap; }
.nav a:not(.btn){ font-size:.94rem; font-weight:500; color:var(--ink); text-decoration:none; padding:6px 0; border-bottom:2px solid transparent; }
.nav a:not(.btn):hover{ border-bottom-color:var(--blue); }
.nav a:not(.btn)[aria-current="page"]{ border-bottom-color:var(--blue); }
.header-phone{ font-size:.9rem; font-weight:700; color:var(--ink); text-decoration:none; white-space:nowrap; }
.header-phone:hover{ color:var(--blue); }
/* Three bars closed, the logomark open. The mark used to be the *closed*
   state, drawn from the 260x299 master at 30px, where it read as a smudge —
   here it's the favicon tile instead, which is artwork already drawn to
   survive 16px, and it only appears at the size the menu is open at. Bars
   stay currentColor so they follow the header's colourway. */
.nav-toggle{
  display:none; margin-left:auto; background:none; border:0;
  width:44px; height:44px; padding:0; font:inherit; cursor:pointer;
  color:var(--ink); align-items:center; justify-content:center; flex:none;
  border-radius:8px;
  /* With no outline the 44px hit area is all padding, which left the bars
     floating ~10px inside the gutter while the lockup sat on it. Pull the
     box out by that padding so the bars line up with the lockup edge. */
  margin-right:-10px;
}
.nav-toggle:hover{ color:var(--blue); }
.nav-toggle:active{ transform:scale(.94); }
.nav-toggle-icon{ position:relative; display:block; width:24px; height:24px; }
.nti-bar{
  position:absolute; left:1px; width:22px; height:2px; border-radius:2px;
  background:currentColor; display:block; transform-origin:center;
  transition:transform .34s cubic-bezier(.55,.06,.2,1), opacity .2s ease;
}
.nti-bar:nth-child(1){ top:4px; }
.nti-bar:nth-child(2){ top:11px; }
.nti-bar:nth-child(3){ top:18px; }
/* The mark rotates in as the bars fold away — one gesture, not a swap.
   The bare logomark rather than the favicon tile: no square tile behind it,
   in whichever cut matches the ground the sheet is painting (see the mobile
   block). It sits larger than the 24px bar box, so a negative inset overhangs
   it, and object-fit keeps the 260x299 artwork from stretching square. */
.nti-mark{
  position:absolute; inset:-6px; width:36px; height:36px; display:block;
  object-fit:contain;
  opacity:0; transform:rotate(-90deg) scale(.55);
  transition:transform .44s cubic-bezier(.55,.06,.2,1), opacity .24s ease;
}
.nav-toggle[aria-expanded="true"] .nti-bar{ opacity:0; }
.nav-toggle[aria-expanded="true"] .nti-bar:nth-child(1){ transform:translateY(7px) scaleX(.3); }
.nav-toggle[aria-expanded="true"] .nti-bar:nth-child(2){ transform:scaleX(.3); }
.nav-toggle[aria-expanded="true"] .nti-bar:nth-child(3){ transform:translateY(-7px) scaleX(.3); }
.nav-toggle[aria-expanded="true"] .nti-mark{ opacity:1; transform:rotate(0) scale(1); }
/* The accessible name has to say what the button does next, and it changes. */
.nt-label-close{ display:none; }
.nav-toggle[aria-expanded="true"] .nt-label-open{ display:none; }
.nav-toggle[aria-expanded="true"] .nt-label-close{ display:inline; }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding:clamp(56px,8vw,104px) 0 clamp(64px,9vw,112px); }
/* Three crossed ellipses, straight off the logomark — the same orbit motif
   at poster scale, faint enough to read as texture. */
.hero-orbit{
  position:absolute; top:-14%; right:-14%; width:min(760px,78vw);
  color:var(--ink); opacity:.07; pointer-events:none;
}
.hero-grid{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,76px); align-items:center; }
.hero h1{ margin-bottom:.42em; }
.hero .lede{ font-size:1.2rem; }
.hero-trust{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:40px; padding-top:26px;
  border-top:1px solid var(--line); font-size:.85rem; color:var(--ink-soft);
}
.hero-trust span{ display:flex; align-items:center; gap:8px; }
.hero-trust span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--blue); flex:none; }
.hero-illo{ max-width:none; width:100%; margin-inline:auto; }

/* ---------- SIGNATURE: the formula card ---------- */
.formula{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 22px 50px -28px rgba(14,28,38,.42); overflow:hidden; max-width:430px;
}
.formula-head{
  background:var(--ink); color:var(--white); padding:16px 24px;
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
}
.formula-head .rx{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; opacity:.72; }
.formula-head .who{ font-size:.86rem; font-weight:500; }
.formula-body{ padding:22px 24px 8px; }
.formula-title{
  font-family:var(--body); font-size:.7rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 14px;
}
.formula-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:10px 0; border-bottom:1px dashed var(--line); font-size:.96rem;
}
.formula-row:last-of-type{ border-bottom:none; }
.formula-row .pct{ font-family:var(--mono); font-size:.9rem; color:var(--blue); font-weight:500; }
.formula-row .base{ color:var(--ink-soft); font-style:italic; }
.formula-foot{
  border-top:1px solid var(--line); padding:18px 24px 22px; background:var(--paper);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.formula-foot .size{ font-size:.86rem; color:var(--ink-soft); }
.formula-foot .price{
  font-family:var(--display); font-size:1.85rem; line-height:1;
}
.formula-note{ font-size:.82rem; color:var(--ink-soft); padding:0 24px 20px; background:var(--paper); margin:0; }

/* The tilt is the one piece of levity on an otherwise clinical page —
   it reads as a sheet of paper set down, not a UI panel. */
.hero .formula{ margin-left:auto; transform:rotate(-1.2deg); }
.formula-band{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(36px,5vw,68px); align-items:center; }
.formula-band .formula{ margin:0; }

/* ---------- cards ---------- */
.grid{ display:grid; gap:22px; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:34px 30px; }
.card h3{ margin-bottom:.5em; }
.card p{ color:var(--ink-soft); font-size:.97rem; }
.card-orbit{ width:46px; height:46px; color:var(--blue); margin-bottom:20px; }

/* ---------- steps ---------- */
.step{ position:relative; text-align:center; }
.step-illo{ width:100%; max-width:320px; height:auto; margin:0 auto 14px; display:block; }
.step-medal{ position:relative; width:92px; height:92px; margin:0 auto 22px; display:grid; place-items:center; }
.step-medal svg{ position:absolute; inset:0; width:100%; height:100%; color:var(--blue); opacity:.5; }
.step-medal b{
  font-family:var(--display); font-weight:500; font-size:1.7rem; color:var(--ink);
}
.step .num{ font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; color:var(--blue); display:block; margin-bottom:8px; }
.step h3{ font-size:1.18rem; }
.step p{ color:var(--ink-soft); font-size:.96rem; }

/* ---------- compare table ---------- */
.compare{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:auto; max-width:900px; margin:0 auto; }
.compare table{ width:100%; border-collapse:collapse; }
.compare th, .compare td{ padding:16px 20px; text-align:center; font-size:.95rem; }
.compare th:first-child, .compare td:first-child{ text-align:left; }
.compare thead th{
  font-family:var(--body); font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); border-bottom:1px solid var(--line); padding-top:24px;
}
.compare thead th.ours{ color:var(--blue); }
.compare tbody tr:nth-child(even){ background:var(--paper); }
.compare td.retail{ color:var(--bronze); }
.compare td.ours{ color:var(--blue); font-weight:700; }
.compare tr.total td{ font-size:1.05rem; font-weight:700; border-top:1px solid var(--line); }
.compare-note{ text-align:center; font-size:.8rem; color:var(--ink-soft); margin-top:18px; }
/* Only shown once the table starts scrolling, where the Quantum column
   would otherwise begin off-screen with no cue that it exists. */
.compare-hint{ display:none; }

/* ---------- what we make: forms + specialties ---------- */
.forms{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:900px; margin:0 auto; }
.form-chip{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:18px 20px; text-align:center;
  display:grid; align-content:center;
}
.form-chip b{ display:block; font-weight:500; font-size:.98rem; }
.form-chip span{ display:block; font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); margin-top:5px; }
.specialties{
  max-width:760px; margin:clamp(34px,4vw,48px) auto 0; text-align:center;
  font-size:.97rem; color:var(--ink-soft); text-wrap:pretty;
}
.specialties strong{ color:var(--ink); font-weight:500; }

/* ---------- labelled list (timings, what sets a price) ---------- */
.ingredients{ list-style:none; margin:26px 0 0; padding:0; max-width:640px; }
.ingredients li{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:6px 22px; padding:13px 0; border-bottom:1px solid var(--line);
}
.ingredients li:first-child{ border-top:1px solid var(--line); }
.ingredients b{ font-weight:500; font-size:.98rem; }
.ingredients .role{
  font-family:var(--mono); font-size:.76rem; color:var(--ink-soft); text-align:right;
}

/* Flush-left cuts of the centred blocks. The centred versions belong to the
   home page's marketing bands; on a subpage they sit under a left .page-head,
   where a centred body reads as a mistake. */
.forms--flush{ margin-inline:0; }
.specialties--flush{ margin-inline:0 auto; text-align:left; }
.compare--flush{ margin-inline:0; }
.compare-note--flush, .compare-hint--flush{ text-align:left; }

/* ---------- split rows ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,68px); align-items:center; }
.split--flip .split-media{ order:1; }
.split h2{ margin-bottom:.45em; }

/* ---------- trust strip ---------- */
.trust-strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0; background:var(--white); }
.trust-strip ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:14px 44px; }
.trust-strip li{
  font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); display:flex; align-items:center; gap:9px;
}
.trust-strip li svg{ width:19px; height:19px; color:var(--blue); flex:none; }

/* ---------- quote / callout / path box ---------- */
.quote{ max-width:760px; margin:0 auto; text-align:center; }
.quote blockquote{
  font-family:var(--display); font-size:clamp(1.35rem,2.6vw,1.85rem); line-height:1.35; margin:0 0 22px;
}
.quote cite{ font-style:normal; font-size:.9rem; color:var(--ink-soft); }
.path-box{
  background:var(--white); border:1px solid var(--line); border-left:4px solid var(--blue);
  border-radius:var(--radius-sm); padding:26px 28px; margin-top:30px;
}
.path-box h3{ font-size:1.1rem; margin-bottom:.4em; }
.path-box p{ font-size:.95rem; color:var(--ink-soft); margin-bottom:0; }

/* ---------- FAQ ---------- */
.faq{ max-width:780px; margin:0 auto; }
.faq--flush{ margin-inline:0; }
/* Group heads between accordions on the FAQ page. */
.faq-group{ max-width:780px; margin:clamp(46px,5vw,68px) 0 4px; scroll-margin-top:112px; }
.faq-group:first-of-type{ margin-top:0; }
.faq-group{ font-size:clamp(1.5rem,3vw,2rem); }
.faq details{ border-bottom:1px solid var(--line); padding:4px 0; }
.faq summary{
  cursor:pointer; list-style:none; padding:20px 44px 20px 0; position:relative;
  font-family:var(--display); font-size:1.16rem; line-height:1.35;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-family:var(--body); font-size:1.5rem; color:var(--blue); line-height:1;
}
.faq details[open] summary::after{ content:"–"; }
.faq details p{ padding:0 44px 22px 0; color:var(--ink-soft); font-size:.97rem; }

/* ---------- form (contact) ---------- */
.contact-split{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,5vw,68px); align-items:start; }
.form-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(28px,4vw,40px); }
.form-card .btn{ width:100%; }
.field{ margin-bottom:20px; }
.field label{
  display:block; font-size:.78rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--ink); background:var(--white);
  border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:13px 15px;
}
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ border-color:var(--blue); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
/* Fax numbers are deliberately not links: tel: dials a fax line, and the fax:
   URI is deprecated with no mobile OS support. Matches link weight so the
   number still reads as a contact detail rather than body prose. */
.fax-number{ font-weight:500; white-space:nowrap; }
.note-small{ font-size:.86rem; color:var(--ink-soft); }
.contact-aside{ font-size:.97rem; }
.contact-aside h2{ font-size:1.32rem; margin-bottom:.2em; }
.contact-aside dd em{ font-size:.85rem; color:var(--ink-soft); }
.contact-aside dl{ margin:0; }
.contact-aside dt{
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:24px;
}
.contact-aside dd{ margin:6px 0 0; }
/* These were ink-coloured with no underline, which rendered the pharmacy's
   phone number as plain body text - the most important action on the site with
   no affordance at all, and colour-only would not have been enough either
   (WCAG 1.4.1). Underline plus colour so it reads as a link without AT. */
.contact-aside dd a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.contact-aside dd a:hover{ color:var(--ink); }

/* Left-aligned page heading for subpages — .section-head is centred and
   sized for marketing bands, which is wrong for a form or a policy. */
.page-head{ max-width:62ch; margin:0 0 clamp(34px,4vw,52px); }
/* Later heads on a page are h2s for document order, and keep the h1 size. */
.page-head h1, .page-head h2{ font-size:clamp(2.2rem,5vw,3.4rem); margin-top:0; }

.prose-toc{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:22px 26px; margin:0 0 clamp(34px,4vw,52px); max-width:62ch;
}
.prose-toc h2{
  font-family:var(--body); font-variation-settings:normal;
  font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 12px;
}
.prose-toc ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 26px; }
.prose-toc a{ font-size:.95rem; }

.crumbs{ font-size:.85rem; color:var(--ink-soft); margin:0 0 18px; }
.crumbs a{ color:var(--ink-soft); text-decoration:none; }
.crumbs a:hover{ color:var(--blue); text-decoration:underline; }
.crumbs span{ margin:0 .5em; opacity:.5; }

.article-meta{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 14px;
}
.cond .article-meta{ margin-bottom:10px; }

/* ---------- long-form prose (policies) ---------- */
/* The brief said 90ch, but DM Sans has a wide "0" advance, so 90ch computes
   to ~1047px — about 105 characters a line. 68ch lands near 80, which is
   readable for legal prose. Revert to 90ch here if the literal spec matters. */
.prose{ max-width:68ch; }
.prose h2{ margin-top:2em; scroll-margin-top:112px; }
.prose h2:first-of-type{ margin-top:0; }
.prose h3{ margin-top:1.6em; }
.prose p, .prose li{ color:var(--ink-soft); }
.prose li{ margin-bottom:.5em; }
.prose .updated{ font-size:.85rem; color:var(--ink-soft); }

/* ---------- CTA band + footer ---------- */
.cta-band{ background:var(--ink); color:var(--paper); text-align:center; }
.cta-band h2{ color:var(--white); max-width:18ch; margin-inline:auto; }
.cta-band p{ color:var(--slate); max-width:50ch; margin-inline:auto; }
.cta-band .btn-row{ justify-content:center; }
.cta-band .btn--ghost{ color:var(--paper); border-color:rgba(241,241,239,.4); }
.cta-band .btn--ghost:hover{ background:rgba(241,241,239,.1); }

.site-footer{ background:var(--tint); padding:68px 0 40px; font-size:.9rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; padding-bottom:40px; border-bottom:1px solid var(--line); }
.footer-grid h3{
  font-family:var(--body); font-variation-settings:normal;
  font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px;
}
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:9px; }
.footer-grid a{ color:var(--ink); text-decoration:none; }
.footer-grid a:hover{ text-decoration:underline; }
.footer-grid p{ color:var(--ink-soft); font-size:.87rem; }
.footer-brand{ margin-bottom:16px; }
.footer-phone{ margin-top:10px; }
.legal{ padding-top:28px; color:var(--ink-soft); font-size:.82rem; }
.legal p{ max-width:90ch; margin-bottom:.8em; }

/* ==========================================================================
   ILLUSTRATION SLOTS — swap each .illo-slot for your own artwork:
   <img class="illo" src="assets/illustrations/NAME.webp" alt="...">
   Ratios are locked so nothing shifts when the art drops in.
   ========================================================================== */
/* Illustrations sit straight on the paper: transparent RGBA, no frame. That
   only works while the artwork keeps a clear margin on all four sides; art
   that bleeds off its own frame reads as a broken image here. */
.illo{ width:100%; height:auto; display:block; margin-inline:auto; }
.illo-slot{
  border:1.5px dashed var(--line-strong); border-radius:var(--radius-sm);
  display:grid; place-items:center; text-align:center; padding:20px;
  color:var(--ink-soft); font-size:.85rem; background:var(--white);
}
.illo-slot[data-ratio="4:3"]{ aspect-ratio:4/3; }
.illo-slot[data-ratio="1:1"]{ aspect-ratio:1/1; }
.illo-slot[data-ratio="5:4"]{ aspect-ratio:5/4; }
.illo-slot b{ display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); }
.illo-slot em{ display:block; font-style:normal; font-size:.75rem; opacity:.7; margin-top:6px; }

/* ---------- reveal on scroll ---------- */
/* .reveal-ready is set by site.js, so the hidden state only ever exists where
   the script is running and motion is wanted. */
.reveal-ready .reveal{
  opacity:0; transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.2,.6,.2,1), transform .55s cubic-bezier(.2,.6,.2,1);
  will-change:opacity, transform;
}
.reveal-ready .reveal.is-in{ opacity:1; transform:none; will-change:auto; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-grid, .formula-band, .split, .contact-split{ grid-template-columns:1fr; }
  .split--flip .split-media{ order:0; }
  .hero .formula{ margin:0 auto; transform:none; max-width:100%; }
  .hero-illo{ margin-inline:auto; max-width:460px; width:auto; }
  .step-illo{ max-width:360px; }
  .grid--3, .grid--2{ grid-template-columns:1fr; }
  .forms{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .header-phone{ display:none; }  /* it comes back inside the sheet, below */
  /* Sticky here too. It was relative so the dropdown could hang off it,
     but sticky is a positioned ancestor as well, so the absolute .nav
     still resolves against the header. The colourway is the desktop one:
     transparent over the hero, Deep Field once pinned. */
  .site-header{ position:sticky; top:0; }
  /* Open, the header paints itself solid so the sheet reads as one surface
     with it. Which surface depends on where you opened it: paper over the
     hero, Deep Field once the header has pinned and gone dark. */
  body.nav-open .site-header{ background:var(--paper); border-bottom-color:transparent; }
  body.nav-open .site-header.is-stuck{ background:var(--ink); backdrop-filter:none; }

  /* A sheet under the header rather than a strip of small links: the
     destinations set a step above body copy in the display face, with the
     number and the one action at the bottom in thumb reach. */
  .nav{
    display:none; position:absolute; top:100px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper);
    padding:8px 28px calc(26px + env(safe-area-inset-bottom));
    max-height:calc(100dvh - 100px); overflow-y:auto; overscroll-behavior:contain;
    box-shadow:0 26px 40px -28px rgba(14,28,38,.45);
  }
  .nav.open{ display:flex; }
  .nav a:not(.btn){
    font-family:var(--display); font-size:1.28rem; font-weight:400; line-height:1.2; letter-spacing:-.01em;
    padding:16px 0; border-bottom:1px solid var(--line);
  }
  .nav a:not(.btn)[aria-current="page"]{ color:var(--blue); }
  .nav a:not(.btn)[aria-current="page"]::after{
    content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
    background:var(--blue); margin-left:11px; vertical-align:middle;
  }
  .nav .header-phone{
    display:block; padding:20px 0 0; border:0;
    font-family:var(--mono); font-size:.98rem; letter-spacing:.02em;
  }
  .nav .btn{ margin-top:14px; width:100%; font-size:.98rem; padding:15px 22px; }

  /* Pinned, everything in the sheet swaps to the knocked-out colourway the
     header is already using. */
  .site-header.is-stuck .nav{ background:var(--ink); box-shadow:0 26px 40px -28px rgba(14,28,38,.7); }
  .site-header.is-stuck .nav a:not(.btn){ border-bottom-color:rgba(241,241,239,.14); }
  .site-header.is-stuck .nav a:not(.btn)[aria-current="page"]{ color:var(--blue-light); }
  .site-header.is-stuck .nav a:not(.btn)[aria-current="page"]::after{ background:var(--blue-light); }

  /* The logomark has an ink and a knocked-out cut, like the lockup; the
     sheet can now be either ground, so the toggle picks the matching one. */
  .nti-mark--dark{ display:none; }
  .site-header.is-stuck .nti-mark--light{ display:none; }
  .site-header.is-stuck .nti-mark--dark{ display:block; }

  .nav-toggle{ display:flex; }
  /* The sheet takes the screen, so the page under it shouldn't scroll too. */
  body.nav-open{ overflow:hidden; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .brand-lockup{ height:54px; }
  /* Was full-bleed here: calc(100% + 56px) against the wrap's 28px gutter,
     which overflowed nothing but left the artwork with no margin at all, so
     every illustration read as cut off at both screen edges. It keeps the
     gutter now and is framed like everything else on the page. */
  .hero-illo, .split-media .illo{ width:100%; max-width:none; margin-inline:auto; }
  .step-illo{ max-width:none; }
  /* The head stacks: side-by-side, "RX FORMULA" and the patient name each
     broke across two lines. */
  .formula-head{ flex-direction:column; align-items:flex-start; gap:5px; }
  .formula-head .rx{ white-space:nowrap; }
  .compare table{ min-width:520px; }
  .compare-hint{
    display:block; text-align:center; margin:0 0 12px;
    font-family:var(--mono); font-size:.72rem; color:var(--ink-soft);
  }
  .footer-grid{ grid-template-columns:1fr; }
  .compare th, .compare td{ padding:13px 12px; font-size:.87rem; }
  .btn-row .btn{ width:100%; }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .forms{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
  .btn:hover{ transform:none; }
  .hero .formula{ transform:none; }
  .nti-bar, .nti-mark{ transition:none; }
  .reveal-ready .reveal{ opacity:1 !important; transform:none !important; }
}