/* Arcus — landing page
   Marcellus (headlines) + Plus Jakarta Sans (text) */

/* Fonts are served from this site, not Google: they arrive with the page (the two Latin files are preloaded in each
   page's head), so text doesn't paint in a stand-in font and then switch, and no visitor's address goes to a third
   party. Same files the app uses (next/font). Jakarta is variable; 400 to 600 keeps bold at 600 as before. If a font
   is ever slow, the fallbacks are Times and Arial resized to the same metrics, so the switch doesn't move the text. */
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/marcellus-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/marcellus-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/jakarta-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/jakarta-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Marcellus Fallback"; src: local("Times New Roman"); ascent-override: 86.59%; descent-override: 24.87%; line-gap-override: 0%; size-adjust: 112.5%; }
@font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Arial"); ascent-override: 98.88%; descent-override: 21.15%; line-gap-override: 0%; size-adjust: 104.98%; }

:root {
  --ink: #111111;
  --ink-2: #555555;
  --ink-3: #8C8C8C;
  --bg: #FFFFFF;
  --gray: #F5F5F7;        /* cards and panels: a clean neutral gray with a faint cool tint */
  --gray-hover: #EBEBEF;
  --ok: #1E7F4F;
  --r: 44px;        /* the one corner radius: hero, tiles, CTA. Short things (buttons, rows) clamp to a pill */

  --serif: "Marcellus", "Marcellus Fallback", Georgia, serif;
  --sans: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ios: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-tap-highlight-color: transparent; }   /* no gray flash on tap (iOS) */
/* the rail on the right shows scroll position, so the browser's own scrollbar is hidden (Chrome, Safari, Firefox, Edge) */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
figure { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }

.word {
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: 0;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;   /* the arch stands on the wordmark's baseline */
  gap: .3em;
}
/* The Arcus mark: an arch of three stones, in the wordmark's color, a little under its capital height */
.word .mark { width: 1.17em; height: .65em; flex-shrink: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r);
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: opacity .2s;
}
.btn:hover { opacity: .85; }
.btn-light { background: #fff; color: var(--ink); }
/* Secondary button: outline in the text color around it (white on the video, ink on light sections) */
.btn-ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn .icon { width: 16px; height: 16px; transition: transform .2s; }
.btn:hover .icon, .tile:hover .btn .icon { transform: translateX(3px); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color .35s ease; }
/* Over the hero video: transparent with white type */
.nav.over:not(.open) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav.over:not(.open) .word, .nav.over:not(.open) .menu { color: #fff; }
.nav.over:not(.open) .links a, .nav.over:not(.open) .signin { color: rgba(255, 255, 255, .88); }
.nav.over:not(.open) .links a:hover, .nav.over:not(.open) .signin:hover { color: #fff; }
.nav.over:not(.open) .btn { background: #fff; color: var(--ink); }
.nav .word, .nav .links a, .nav .signin, .nav .menu, .nav .btn { transition: color .35s ease, background-color .35s ease, opacity .2s; }
.nav.settling, .nav.settling * { transition: none !important; }   /* while a reload restores the scroll position */
.nav-in { height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; }   /* equal side columns keep the links on the page's center line */
.nav-in > .word { justify-self: start; }
.links { display: flex; gap: 36px; }
.links a, .signin { font-size: 15px; color: var(--ink-2); transition: color .2s; }
.links a:hover, .signin:hover { color: var(--ink); }
.nav-r { display: flex; align-items: center; justify-content: flex-end; gap: 28px; grid-column: 3; }
.nav-r .btn { padding: 11px 18px; font-size: 14px; }
.menu { display: none; width: 40px; height: 40px; place-items: center; }
.menu .icon { width: 24px; height: 24px; stroke-width: 1.8; }
.mobile { display: none; }

/* ---------- Hero ---------- */
/* First view: full-screen video, slides under the sticky nav, smooth rounded bottom corners */
.hv {
  position: relative;
  isolation: isolate;
  margin-top: -72px;
  min-height: max(620px, 100svh);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 140px 0 72px;
  overflow: hidden;
  border-radius: 0 0 var(--r) var(--r);
  background: #44512F url("assets/video/hero-poster.jpg") center / cover no-repeat;
  color: #fff;
}
.hv-media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* iPhone Low Power Mode blocks autoplay and puts a big play button on the video: hide it, the still frame stands in */
.hv-media::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.hv-media::-webkit-media-controls { display: none !important; }
.hv-shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .55) 100%), rgba(0, 0, 0, .1);
}
.hv h1 { color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, .18); }
.hv .trust li { color: rgba(255, 255, 255, .92); }
.hv .trust .icon { color: #fff; }

/* Hero copy is centered: headline, one supporting line, the two buttons, then the ticks in a row */
.hero-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hv h1 { font-size: clamp(2.8rem, 6vw, 5.4rem); max-width: 10.5em; letter-spacing: -0.02em; }
.hero-sub { margin-top: 20px; max-width: 32em; font-size: 19px; color: rgba(255, 255, 255, .9); text-wrap: balance; }
.hero-head .actions { justify-content: center; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 40px; }
.trust li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); }
.trust .icon { width: 16px; height: 16px; color: var(--ink); }

.hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 16px; }

/* ---------- Image tiles ---------- */
.tile { position: relative; display: block; overflow: hidden; isolation: isolate; border-radius: var(--r); background: var(--gray); color: #fff; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.tile:hover img { transform: scale(1.03); }

.tile-hero { height: clamp(420px, 44vw, 620px); }
.pos-clin img { object-position: 8% 30%; }   /* she sits right of center, clear of the headline */
.pos-clin .tile-text { background: linear-gradient(180deg, rgba(0, 0, 0, .46) 0%, rgba(0, 0, 0, 0) 52%); }   /* bright curtain behind white text */
.tile-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 36px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .36) 0%, rgba(0, 0, 0, 0) 45%);
}
.tile-text h2 { color: #fff; font-size: clamp(2rem, 3vw, 2.75rem); max-width: 9em; }
.tile-sub { margin-top: 12px; font-size: 16px; color: rgba(255, 255, 255, .92); max-width: 22em; }

/* ---------- Sections ---------- */
.section { padding: 160px 0 0; }
.head { max-width: 700px; }
.head h2, .copy h2 { font-size: clamp(2.3rem, 4.4vw, 3.8rem); letter-spacing: -0.015em; }
.head p, .copy > p { font-size: 18px; color: var(--ink-2); margin-top: 20px; max-width: 34em; }

/* ---------- Barrier stats ---------- */

/* ---------- Coordinator ---------- */
/* Copy on the left half; the phone stands on its own gray panel in the right half, out to the page's edge, the way
   the labs' two panels fill the page further down. The panel never gets narrower than the phone. */
.rep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(max-content, 1fr); align-items: center; column-gap: clamp(48px, 6vw, 96px); }
.copy > p.rep-note { margin-top: 16px; font-size: 15px; color: var(--ink-3); }

/* The three things Arcus does, as one gray panel of rows; blue thumbnails match the medication cards */
.offer { margin-top: 32px; background: var(--gray); border-radius: var(--r); padding: 6px 0; }
.offer a { display: flex; align-items: center; gap: 16px; margin: 0 24px; padding: 16px 0; }
.offer li + li a { border-top: 1px solid rgba(17, 17, 17, .08); }
.offer-img { flex-shrink: 0; width: 56px; height: 56px; border-radius: 30%; overflow: hidden; background: var(--gray-hover); }   /* a rounded square everywhere: the shared radius would turn a tile this small into a circle in Safari */
.offer-img img { width: 100%; height: 100%; object-fit: cover; }
.offer-img.blue { background: var(--rx-blue); }
.offer-img.blue img { object-fit: contain; padding: 8%; }
.offer-img img.vial { transform: translateX(-2.9%); }   /* the tube sits 3.5% right of center in its file; this centers it in the square */
.offer-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.offer-text b { font-weight: 500; font-size: 17px; line-height: 1.3; }
.offer-text span { font-size: 14px; line-height: 1.4; color: var(--ink-3); }
.offer .icon { width: 18px; height: 18px; color: var(--ink-3); transition: transform .2s, color .2s; }
.offer a:hover .icon { transform: translateX(3px); color: var(--ink); }
.offer a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 8px; }
@media (max-width: 1000px) {
  .rep { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
}
@media (max-width: 600px) {
  .offer { margin-top: 24px; }
  .offer a { margin: 0 22px; gap: 14px; padding: 14px 0; }
  .offer-img { width: 48px; height: 48px; }
}
.list { margin-top: 36px; display: grid; gap: 16px; }
.list li { display: flex; align-items: center; gap: 14px; font-size: 16px; }
.list .icon { width: 16px; height: 16px; }

.rep-visual { display: flex; align-items: center; justify-content: center; }
/* the panel only beside the copy; stacked under it (tablets, phones), the phone stands on the page itself */
@media (min-width: 1001px) {
  .rep-visual { align-self: stretch; padding: 56px 40px; background: var(--gray); border-radius: var(--r); }
}

/* iPhone 18 Pro — built like Gridlync's display frame: aluminum band, glass bezel, screen.
   The screen is authored in real iOS points (402 x 874) and scaled with --s. */
.iphone {
  --s: .8;          /* screen scale: 1 = 402pt wide */
  --band: 5px;      /* aluminum edge */
  --bez: 7.5px;     /* black glass border */
  --rad: calc(62px * var(--s));
  position: relative;
  z-index: 2;
  isolation: isolate;
  padding: var(--band);
  border-radius: calc(var(--rad) + var(--bez) + var(--band));
  /* Dark graphite frame. Background layers only show on the band (the bezel covers the rest):
     antenna lines, corner highlights, then polished metal that catches light unevenly. */
  background:
    linear-gradient(180deg, transparent 0 11.2%, rgba(0, 0, 0, .6) 11.2% 11.5%, transparent 11.5% 88.4%, rgba(0, 0, 0, .6) 88.4% 88.7%, transparent 88.7%),
    linear-gradient(135deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 16%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, .26) 100%),
    conic-gradient(from 200deg at 50% 50%, #3C3E43, #6E7177 7%, #2B2C30 18%, #1D1E21 42%, #33353A 58%, #63666C 67%, #25262A 80%, #3C3E43);
  box-shadow:
    0 0 0 .5px rgba(0, 0, 0, .6),
    inset 0 0 0 1px rgba(255, 255, 255, .28),
    inset 0 0 0 2.2px rgba(0, 0, 0, .3),
    0 30px 60px -28px rgba(0, 0, 0, .28),
    0 10px 22px -12px rgba(0, 0, 0, .16);
}
.bezel {
  position: relative;
  padding: var(--bez);
  border-radius: calc(var(--rad) + var(--bez));
  background: #050506;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .8);
}

/* Hardware buttons (front view): Action, volume up/down on the left; side button and Camera Control on the right */
.hw { position: absolute; z-index: -1; width: 3px; background: linear-gradient(90deg, #17181B, #74777D 50%, #26272A); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .5); }
.hw-action, .hw-vol-up, .hw-vol-down { left: -2.5px; border-radius: 2px 0 0 2px; }
.hw-side, .hw-cam { right: -2.5px; border-radius: 0 2px 2px 0; }
.hw-action   { top: 17%;   height: 4.6%; }
.hw-vol-up   { top: 25.5%; height: 8.6%; }
.hw-vol-down { top: 36%;   height: 8.6%; }
.hw-side     { top: 28%;   height: 13%; }
.hw-cam      { top: 59%;   height: 8.4%; width: 2px; right: -1.5px; background: linear-gradient(90deg, #16171A, #3E4044); }

.screen {
  position: relative;
  width: 402px;
  height: 874px;
  zoom: var(--s);
  overflow: hidden;
  border-radius: 62px;
  background: #fff;
  color: #000;
  font-family: var(--ios);
  -webkit-font-smoothing: antialiased;
  --im-blue: #2AA1FD;   /* iOS 26 bubble blue, sampled from Apple's screenshots */
  --im-gray: #E9E9EB;
}

/* Dynamic Island (smaller on iPhone 18 Pro), with a faint front-camera lens */
.island {
  position: absolute; top: 11px; left: 50%; translate: -50% 0; z-index: 6;
  width: 98px; height: 34px; border-radius: 17px;
  background: radial-gradient(circle at 79% 50%, #1B1E26 0 4px, rgba(27, 30, 38, 0) 5.5px), #000;
}

/* ---- Inside the phone: iOS 26 Messages ----
   Every size below was measured from Apple's own iOS 26 screenshots (1pt = 1px on this 402pt screen).
   Icons are Apple's SF Symbols, rendered from macOS and used as masks so they take any color. */
.sf {
  display: block;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--m) center / 100% 100% no-repeat;
  mask: var(--m) center / 100% 100% no-repeat;
}
.sf-cell  { --m: url("assets/img/sf/cellular.png");      width: 18px;   height: 12px; }
.sf-wifi  { --m: url("assets/img/sf/wifi.png");          width: 16.6px; height: 11.2px; }
.sf-batt  { --m: url("assets/img/sf/battery.png");       width: 26.3px; height: 12px; }
.sf-back  { --m: url("assets/img/sf/chevron-left.png");  width: 10.6px; height: 17.5px; }
.sf-video { --m: url("assets/img/sf/video.png");         width: 26px;   height: 17.3px; }
.sf-more  { --m: url("assets/img/sf/chevron-right.png"); width: 5.8px;  height: 10px; }
.sf-plus  { --m: url("assets/img/sf/plus.png");          width: 15px;   height: 15px; }
.sf-mic   { --m: url("assets/img/sf/mic.png");           width: 12.1px; height: 17.2px; }
.sf-send  { --m: url("assets/img/sf/send.png");          width: 30px;   height: 30px; }

/* Status bar */
.status { position: absolute; top: 0; left: 0; right: 0; height: 56px; z-index: 5; }
.st-time {
  position: absolute; left: 20.7px; top: 20.5px; width: 104px;
  text-align: center; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: .2px;
}
.st-icons { position: absolute; right: 40px; top: 26px; display: flex; align-items: center; gap: 6.5px; }

/* Liquid Glass controls */
.glass {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(14px) saturate(1.8);
  backdrop-filter: blur(14px) saturate(1.8);
  box-shadow:
    0 0 0 .5px rgba(0, 0, 0, .07),
    0 6px 20px rgba(0, 0, 0, .08),
    inset 0 1px 1.5px rgba(255, 255, 255, .95),
    inset 0 -1px 1px rgba(0, 0, 0, .03);
}

/* Header: glass back button, avatar + name pill, FaceTime button */
.im-head { position: absolute; top: 0; left: 0; right: 0; z-index: 4; }
.im-btn { position: absolute; top: 62px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #000; }
.im-back { left: 16px; }
.im-back .sf { margin-right: 1.5px; }
.im-video { right: 16px; }
.im-contact { position: absolute; top: 62px; left: 50%; translate: -50% 0; display: flex; flex-direction: column; align-items: center; }
.im-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; display: block; }
.im-name {
  margin-top: -5px;
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 11.5px 0 13.5px; border-radius: 17px;
  font-size: 17px; font-weight: 600; white-space: nowrap; color: #000;
}
.im-name .sf { color: #A3A3A8; }

/* Conversation */
.thread {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 160px 15.5px calc(79px + var(--grow, 0px));
  overflow: hidden;
  /* Older messages fade out cleanly before they reach the header; new ones rise out from behind the field */
  --fade: linear-gradient(180deg, transparent 154px, #000 226px, #000 calc(100% - 72px - var(--grow, 0px)), transparent calc(100% - 40px - var(--grow, 0px)));
  -webkit-mask-image: var(--fade);
  mask-image: var(--fade);
}
/* Nothing in the conversation may shrink. Once it fills the screen (a few texts in), a flex column squeezes whatever
   can give: the typing bubble, the one item with a set height, was crushed to a gray strip behind the text field.
   Older messages go up and out of view instead. */
.thread > * { flex-shrink: 0; }
.stamp { align-self: center; text-align: center; font-size: 12px; line-height: 15px; color: #8A8A8E; margin-bottom: 4px; }
.stamp b { font-weight: 600; }

/* Bubbles: 17pt text on its natural 20.3pt line, 40.2pt tall on one line, 20pt corners.
   10.3pt between people, 4.6pt between messages in a run. */
.b {
  position: relative;
  max-width: 296px;
  margin-top: 10.3px;
  padding: 9.6px 14.8px 10.3px;
  border-radius: 20px;
  font-size: 17px;
  line-height: 20.3px;
  overflow-wrap: anywhere;
  text-wrap: wrap;   /* fill each line like iMessage does. The site-wide `pretty` makes Safari even out every line, breaking early and leaving gaps */
  transform-origin: 0 100%;
}
.b.cont { margin-top: 4.6px; }
.b.out { align-self: flex-end; background: var(--im-blue); color: #fff; transform-origin: 100% 100%; }
.b.in  { align-self: flex-start; background: var(--im-gray); color: #000; }

/* Tail, only on the last bubble of a run. Traced from iOS 26: the corner drops
   into a small foot that hangs 7.5pt below the bubble, its tip turned slightly out. */
.b.tail::after {
  content: "";
  position: absolute; bottom: -8px; width: 22px; height: 14px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-22 -6 22 14'%3E%3Cpath d='M-22 -6H-5.7C-7.6 -4 -10.3 -2.2 -10.3 0V2.6C-10.3 4.3 -9 5.8 -7.9 7.1C-8.1 7.6 -8.8 7.9 -9.4 7.7C-13.6 6.5 -17.6 3.7 -21.4 0H-22Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-22 -6 22 14'%3E%3Cpath d='M-22 -6H-5.7C-7.6 -4 -10.3 -2.2 -10.3 0V2.6C-10.3 4.3 -9 5.8 -7.9 7.1C-8.1 7.6 -8.8 7.9 -9.4 7.7C-13.6 6.5 -17.6 3.7 -21.4 0H-22Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.b.out.tail::after { right: 0; background: var(--im-blue); }
.b.in.tail::after  { left: 0; background: var(--im-gray); transform: scaleX(-1); }

/* Typing indicator */
.b.typing { display: none; width: 62px; height: 40.2px; padding: 0; align-items: center; justify-content: center; gap: 5px; }
.b.typing.on { display: inline-flex; }
.b.typing::before, .b.typing::after { content: ""; position: absolute; border-radius: 50%; background: var(--im-gray); }
.b.typing::before { left: -2px; bottom: -2px; width: 14px; height: 14px; }
.b.typing::after  { left: -7.5px; bottom: -8.5px; width: 6.5px; height: 6.5px; }
.b.typing i { width: 8.5px; height: 8.5px; border-radius: 50%; background: #8E8E93; animation: dot 1.35s infinite ease-in-out; }
.b.typing i:nth-child(2) { animation-delay: .18s; }
.b.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes dot { 0%, 55%, 100% { opacity: .3; } 25% { opacity: .85; } }

/* "Delivered" / "Read 9:12 AM" under Sofia's latest message */
.rcpt { display: none; align-self: flex-end; margin: 9px 2px 0 0; font-size: 11.5px; line-height: 14px; color: #8A8A8E; }
.rcpt.on { display: block; }
.rcpt b { font-weight: 600; }

.js .thread .b[data-d]:not(.show) { display: none; }

/* Input bar (keyboard down): "+" and the field, 39.5pt tall, 28pt from the sides */
.im-input { position: absolute; left: 28px; right: 28px; bottom: 27.4px; z-index: 4; display: flex; align-items: flex-end; gap: 12.3px; }
.im-plus { flex-shrink: 0; width: 39.5px; height: 39.5px; border-radius: 50%; display: grid; place-items: center; color: #000; }
.im-field {
  position: relative; flex: 1;
  min-height: 39.5px; border-radius: 19.75px;
  padding: 9.6px 46px 9.6px 16px;
  background: rgba(243, 243, 245, .88);
  font-size: 17px; line-height: 20.3px; color: #000;
  overflow-wrap: anywhere;
}
.im-ph { color: #8B8B90; }
.im-text:empty, .im-field.has-text .im-ph { display: none; }
.im-field .sf-mic { position: absolute; right: 15.5px; bottom: 11.15px; color: #8E8E93; transition: opacity .15s; }
.im-field .sf-send { position: absolute; right: 4.75px; bottom: 4.75px; color: var(--im-blue); opacity: 0; transform: scale(.4); transition: opacity .15s, transform .4s cubic-bezier(.2, .9, .3, 1.25); }
.im-field.has-text .sf-mic { opacity: 0; }
.im-field.has-text .sf-send { opacity: 1; transform: none; }
.home-bar { position: absolute; bottom: 8px; left: 50%; translate: -50% 0; z-index: 5; width: 134px; height: 5px; border-radius: 3px; background: #000; }

/* ---------- Access matrix ---------- */
.matrix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
.mcol h3 { font-size: 28px; }
.msub { font-size: 14px; color: var(--ink-3); margin: 6px 0 18px; }
/* One soft card per category, rows split by hairlines. Type only: no pills, no dots. */
.mcol ul { background: var(--gray); border-radius: var(--r); padding: 10px 0; }
.mcol li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 24px;
  padding: 15px 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}
.mcol li + li { border-top: 1px solid rgba(17, 17, 17, .08); }
.mcol li span { flex-shrink: 0; font-size: 14px; font-weight: 400; color: var(--ink-3); white-space: nowrap; }
.mcol li span.now { color: var(--ok); }
.matrix-note { margin-top: 28px; font-size: 14px; color: var(--ink-3); }
/* ---------- Pharmacy + labs ----------
   Medication cutouts sit on the same blue as the pills tile up top. */
:root { --rx-blue: #4897E8; }
.rx-rows {
  margin-top: 56px;
  display: grid; gap: 28px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.rx-row { display: flex; width: max-content; }
/* Under the medications: the rest of what clinicians can prescribe, like the labs' "+ 3,000 more" */
.rx-more { margin-top: 28px; font-size: 16px; color: var(--ink-2); }
.rx-track { display: flex; gap: 16px; padding-right: 16px; }
.rx { width: 200px; flex-shrink: 0; }
.rx-img { display: block; aspect-ratio: 1; border-radius: var(--r); background: var(--rx-blue); overflow: hidden; }
.rx-img img { width: 100%; height: 100%; object-fit: contain; padding: 12%; }
.rx b { display: block; margin-top: 14px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.rx > span:last-child { display: block; font-size: 14px; color: var(--ink-3); line-height: 1.4; margin-top: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .rx-a { animation: rx-scroll 110s linear infinite; }
  .rx-b { animation: rx-scroll 120s linear infinite reverse; }
}
@keyframes rx-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .rx-rows { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .rx-track[aria-hidden] { display: none; }
  .rx-row { padding-inline: max(24px, (100vw - 1240px) / 2); }
}

.labs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 96px; align-items: stretch; }
.labs-visual { background: var(--rx-blue); border-radius: var(--r); display: grid; place-items: center; padding: 48px 32px; overflow: hidden; }
.labs-tubes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 4px; width: min(100%, 420px); }
.labs-tubes img { width: 100%; height: auto; }
.labs-panel { background: var(--gray); border-radius: var(--r); padding: 40px 0 10px; }
.labs-panel h3 { font-size: 30px; margin: 0 32px; }
.labs-panel > p { margin: 10px 32px 16px; color: var(--ink-2); max-width: 30em; }
.labs-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  margin: 0 32px; padding: 15px 0;
  font-size: 15px;
}
.labs-list li + li, .labs-list li:first-child { border-top: 1px solid rgba(17, 17, 17, .08); }
/* Phones: the list starts with five tests and opens to the rest */
.labs-more { display: none; }
@media (max-width: 600px) {
  .labs-panel:not(.open) .labs-list li:nth-child(n+6) { display: none; }
  .labs-more {
    display: flex; align-items: center; gap: 8px; width: calc(100% - 44px);
    margin: 0 22px; padding: 15px 0 14px; border-top: 1px solid rgba(17, 17, 17, .08);
    font: inherit; font-size: 15px; font-weight: 500; color: var(--ink); background: none; text-align: left; cursor: pointer;
  }
  .labs-more::after {
    content: ""; width: 18px; height: 18px; background: var(--ink-3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: rotate .25s;
  }
  .labs-panel.open .labs-more::after { rotate: 180deg; }
}
.labs-list b { font-weight: 500; }
.labs-list span { font-size: 14px; color: var(--ink-3); text-align: right; }
/* The rest of what the labs run, quiet like the pharmacies' "+ most others" */
.labs-list .labs-rest b { color: var(--ink-3); }

@media (max-width: 1000px) {
  .labs { grid-template-columns: 1fr; margin-top: 72px; }
  .labs-visual { padding: 40px 24px; }
  .labs-tubes { width: min(100%, 360px); }
}
@media (max-width: 600px) {
  .rx-rows { gap: 20px; }
  .rx { width: 150px; }
  .rx-track { gap: 12px; padding-right: 12px; }
  .rx b { font-size: 14px; margin-top: 10px; }
  .rx > span:last-child { font-size: 13px; }
  .labs { gap: 12px; }
  .labs-panel { padding-top: 28px; }
  .labs-panel h3 { font-size: 24px; margin: 0 22px; }
  .labs-panel > p { margin: 8px 22px 12px; }
  .labs-list li { margin: 0 22px; flex-direction: column; gap: 2px; padding: 13px 0; }
  .labs-list span { text-align: left; }
}

/* Labs and pharmacies: each group's label sits above its logos, logos in a single gray, sized to look equally heavy */
.partners { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px 80px; margin-top: 40px; }
.pgroup { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.plabel { font-size: 13px; line-height: 1; color: var(--ink-3); }
.partner-list { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; min-height: 22px; }
.partner-list li { display: flex; align-items: center; }
.partner-list img { height: var(--h); width: auto; filter: brightness(0); opacity: .5; }
.partner-list img.knockout { filter: grayscale(1); }   /* dark letters on their own white outline */
.partner-list .pmore { font-size: 14px; color: var(--ink-3); }
/* Phones: one endless line instead, running edge to edge and fading out at both sides */
.partners-m { display: none; }
.pm-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.pm-rail { display: flex; width: max-content; }
.pm-track { display: flex; align-items: center; gap: 36px; padding-right: 36px; height: 32px; }
.pm-track li { display: flex; align-items: center; flex-shrink: 0; }
.pm-track img { height: var(--h); width: auto; filter: brightness(0); opacity: .5; }
.pm-track img.knockout { filter: grayscale(1); }
@media (max-width: 600px) {
  .partners { display: none; }
  .partners-m { display: block; margin-top: 32px; }
  .pm-row { margin: 14px -16px 0; }   /* out to the screen edges, past the page gutter */
}
@media (prefers-reduced-motion: no-preference) {
  .pm-rail { animation: rx-scroll 38s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .pm-track[aria-hidden] { display: none; }
  .pm-rail { padding-inline: 16px; }
}

/* ---------- Questions: one gray panel, each question opens in place ---------- */
.faq-list { margin-top: 56px; background: var(--gray); border-radius: var(--r); padding: 10px 0; }
.faq-list details { margin: 0 32px; }
.faq-list details + details { border-top: 1px solid rgba(17, 17, 17, .08); }
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0;
  font-family: var(--serif); font-size: 26px; line-height: 1.2; text-wrap: balance;
  list-style: none; cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
/* Chevron (same stroke style as the other icons): points down, flips up when the answer is open */
.faq-list summary::after {
  content: ""; flex-shrink: 0; width: 22px; height: 22px;
  background: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: rotate .25s;
}
.faq-list details[open] summary::after { rotate: 180deg; }
.faq-list summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 8px; }
.faq-list details p { padding: 0 0 26px; max-width: 40em; color: var(--ink-2); }
@media (max-width: 600px) {
  .faq-list { margin-top: 36px; }
  .faq-list details { margin: 0 22px; }
  .faq-list summary { padding: 20px 0; font-size: 19px; }
}

/* ---------- Why Arcus: two gray cards, what it isn't ---------- */
.anywhere { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; }
.any { background: var(--gray); border-radius: var(--r); padding: 36px 32px; }
.any h3 { font-size: 30px; }
.any p { margin-top: 10px; color: var(--ink-2); max-width: 26em; }

@media (max-width: 600px) {
  .anywhere { grid-template-columns: 1fr; gap: 12px; }
  .any { padding: 28px 22px; }
  .any h3 { font-size: 24px; }
}

/* ---------- CTA + footer ---------- */
.cta { margin-top: 160px; background: var(--ink); color: #fff; padding: 140px 0 120px; border-radius: var(--r) var(--r) 0 0; }
.cta h2 { font-size: clamp(2.8rem, 6.4vw, 5.6rem); letter-spacing: -0.02em; max-width: 10em; }
.cta p { color: rgba(255, 255, 255, .65); font-size: 18px; margin: 20px 0 40px; }

.footer { background: var(--ink); color: rgba(255, 255, 255, .55); padding: 40px 0 48px; font-size: 14px; }
.footer .word { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer h4 { font-family: var(--sans); font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 12px; }
.foot-grid a { display: block; padding: 6px 0; line-height: 1.3; transition: color .2s; }   /* tight lines, so a link that wraps still reads as one */
.foot-grid a:hover { color: #fff; }
/* bottom bar, right side: the HIPAA notice link, then the copyright */
.foot-meta { display: flex; align-items: center; gap: 28px; }
.hipaa { display: inline-flex; align-items: center; gap: 7px; transition: color .2s; }
.hipaa:hover { color: #fff; }
.hipaa .icon { width: 15px; height: 15px; stroke-width: 1.6; }
.foot-legal { margin-top: 80px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px; line-height: 1.7; color: rgba(255, 255, 255, .42); }
.foot-bottom { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 28px; font-size: 13px; }

/* ---------- Scroll rail: thin lines on the right, one per section ---------- */
.rail { position: fixed; right: 18px; top: 50%; translate: 0 -50%; z-index: 19; display: flex; flex-direction: column; align-items: flex-end; --c: 17, 17, 17; --pill: 255, 255, 255; }
.rail.on-dark { --c: 255, 255, 255; --pill: 17, 17, 17; }
.rail a { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 34px; height: 14px; }
.rail a::after { content: ''; width: 12px; height: 1.5px; border-radius: 1px; background: rgb(var(--c)); opacity: .22; transition: width .45s cubic-bezier(.2, .7, .2, 1), opacity .3s ease, background-color .3s ease; }
.rail a.past::after { opacity: .5; }
.rail a[aria-current]::after { width: 26px; opacity: 1; }
.rail a:hover::after { opacity: .85; }
.rail span { position: absolute; right: 42px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; font-size: 12px; color: rgb(var(--c)); background: rgba(var(--pill), .88); opacity: 0; translate: 6px 0; transition: opacity .2s ease, translate .2s ease; pointer-events: none; }
.rail a:hover span, .rail a:focus-visible span { opacity: 1; translate: 0 0; }
@media (hover: none) { .rail span { display: none; } }
/* the rail lives in the page margin; below 1340px the margin is too narrow and it would sit on top of cards and text */
@media (max-width: 1339px) {
  .rail { display: none; }   /* on a phone the edge is for the thumb, and the rail sat on top of the content */
}

/* ---------- Responsive ---------- */
/* 4 columns only when every row fits on one line; 2 below that */
@media (max-width: 1240px) {
  .matrix { grid-template-columns: 1fr 1fr; row-gap: 48px; }
}

@media (max-width: 1100px) {
}

@media (max-width: 1000px) {
  .links, .signin { display: none; }
  .menu { display: grid; }
  .nav-r { gap: 12px; }
  .menu { margin-right: -8px; }   /* the icon's visible edge lines up with the page gutter, like the wordmark on the left */
  .nav.open .mobile { display: block; }
  .mobile { padding: 8px 0 24px; }
  .mobile a { display: block; padding: 12px 0; font-size: 18px; }
  .mobile .btn { display: flex; justify-content: center; margin-top: 12px; padding: 15px 22px; font-size: 15px; }

  .hero-grid { grid-template-columns: 1fr; }
  .tile-hero { height: 460px; }

  .section { padding-top: 120px; }
  .cta { margin-top: 120px; }
}

@media (max-width: 600px) {
  .wrap { width: calc(100% - 32px); }
  .nav-in { height: 64px; }
  .nav-r .btn { display: none; }
  .hv { margin-top: -64px; min-height: max(560px, 100svh); padding: 120px 0 48px; }
  /* the headline sits higher on a phone, over the brightest part of the video: a little more shade there */
  .hv-shade { background: linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .16) 26%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .6) 100%), rgba(0, 0, 0, .1); }
  .hv h1 { font-size: min(2.8rem, 11.2vw); }   /* two lines on every phone, 360px included */
  .hero-sub { font-size: 17px; }
  /* ticks stack as a left-aligned list, centered as a block, so the checks line up */
  .trust { display: grid; justify-content: center; justify-items: start; gap: 8px; margin-top: 32px; text-align: left; }
  /* buttons stack full width on phones: same size, easy to hit with a thumb */
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { justify-content: center; }
  .hero-head .actions { width: 100%; }
  .tile-hero { height: 400px; }
  .tile-text { padding: 22px; }
  .head p, .copy > p { font-size: 17px; }

  /* Phone grid: 16px page gutter, 22px inside every panel and tile,
     36px from a section's heading to its content, 96px between sections */
  .matrix, .rx-rows, .anywhere { margin-top: 36px; }
  .labs { margin-top: 48px; }
  .matrix-note { margin-top: 20px; }

  .iphone { --s: .72; --band: 4.5px; --bez: 7px; }

  /* How it works: the four cards become one row you swipe, with the next card peeking in */
  .matrix { display: flex; gap: 12px; margin-inline: -16px; padding: 0 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .matrix::-webkit-scrollbar { display: none; }
  .mcol { flex: 0 0 84%; scroll-snap-align: start; }
  .mcol h3 { font-size: 22px; }
  .msub { font-size: 13px; margin-bottom: 12px; }
  .mcol li { margin: 0 22px; }


  .section { padding-top: 96px; }
  .cta { margin-top: 96px; padding: 96px 0 80px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid .word { grid-column: 1 / -1; }
}

/* ---------- Inner pages: about, BMI calculator, help, privacy, terms, clinicians ----------
   Same type, grays, radius and spacing as the home page: 56px from a heading to its content, 160px between sections. */
.page-head { padding-top: 112px; }
.page-head h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); letter-spacing: -0.02em; max-width: 13em; }
.page-head > p { font-size: 18px; color: var(--ink-2); margin-top: 20px; max-width: 34em; }
.page-head > p.page-note { font-size: 14px; color: var(--ink-3); margin-top: 16px; }
.page-empty { min-height: 36vh; }

/* pages that end without the dark call to action: the footer gets the rounded top instead */
.footer.footer-solo { margin-top: 160px; padding-top: 72px; border-radius: var(--r) var(--r) 0 0; }

/* Privacy and terms: one readable column */
.prose { margin-top: 56px; }
.prose h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); max-width: 22em; margin-top: 56px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: 14px; max-width: 40em; font-size: 17px; color: var(--ink-2); }

/* Help: questions grouped by topic, each group in the FAQ card */
.help { display: grid; gap: 96px; margin-top: 56px; }
.help-group h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.help-group .faq-list { margin-top: 24px; }

/* Privacy policy, terms and the HIPAA notice: contents on the left, the document on the right */
.legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 80px; align-items: start; margin-top: 56px; }
.legal .prose { margin-top: 0; }
.toc { position: sticky; top: 104px; max-height: calc(100vh - 128px); overflow-y: auto; scrollbar-width: none; }
.toc::-webkit-scrollbar { display: none; }
.toc-title { margin-bottom: 10px; font-size: 13px; color: var(--ink-3); }
.toc ol, .toc-m ol { list-style: none; }
.toc a { display: block; padding: 5px 0; font-size: 14px; line-height: 1.4; color: var(--ink-3); transition: color .2s; }
.toc a:hover, .toc a[aria-current] { color: var(--ink); }
.toc-m { display: none; }
.legal-summary { background: var(--gray); border-radius: var(--r); padding: 36px 32px; }
.legal-summary h2 { font-size: 28px; margin: 0; }
.legal-summary ul { margin-top: 8px; }
.prose .legal-summary li { display: flex; gap: 12px; padding: 0; margin-top: 14px; color: var(--ink-2); }
.prose .legal-summary li::before { content: none; }
.legal-summary .icon { width: 16px; height: 16px; margin-top: .3em; color: var(--ink); }
.legal .prose > h2 { scroll-margin-top: 24px; }
.legal .prose > h2:first-of-type { margin-top: 72px; }
.prose h3 { font-size: 22px; margin-top: 32px; }
.prose ul { margin-top: 14px; }
.prose li { position: relative; max-width: 40em; margin-top: 10px; padding-left: 20px; font-size: 17px; color: var(--ink-2); }
.prose li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose p a, .prose li a { text-decoration: underline; text-decoration-color: rgba(17, 17, 17, .3); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.prose p a:hover, .prose li a:hover { text-decoration-color: currentColor; }
.faq-list details p a { text-decoration: underline; text-underline-offset: 3px; }

/* BMI calculator: the calculator card on the left, what the number means on the right */
.bmi { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: start; margin-top: 56px; }
.bmi-card { background: var(--gray); border-radius: var(--r); padding: 40px; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r); background: var(--gray-hover); }
.seg button { padding: 10px 18px; border-radius: var(--r); font-size: 14px; font-weight: 600; line-height: 1; color: var(--ink-2); transition: background-color .2s, color .2s; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(17, 17, 17, .06); }
.bmi-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; margin-top: 28px; }
.field[hidden] { display: none; }
.field-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.inputs { display: flex; gap: 8px; }
.unit-input { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 20px; border-radius: var(--r); background: #fff; cursor: text; transition: box-shadow .2s; }
.unit-input:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink); }
.unit-input input { flex: 1; width: 0; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 20px; font-weight: 500; color: var(--ink); -moz-appearance: textfield; appearance: textfield; }
.unit-input input::placeholder { color: #C4C4C8; }
.unit-input input::-webkit-outer-spin-button, .unit-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.unit-input span { font-size: 15px; color: var(--ink-3); }
.bmi-result { margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(17, 17, 17, .08); }
.bmi-label { font-size: 14px; color: var(--ink-3); }
.bmi-num { margin-top: 6px; font-family: var(--serif); font-size: 72px; line-height: 1; color: var(--ink-3); transition: color .2s; }
.bmi-card.has .bmi-num { color: var(--ink); }
.bmi-cat { margin-top: 10px; font-size: 17px; font-weight: 500; }
.bmi-range { margin-top: 2px; font-size: 15px; color: var(--ink-2); }
.bmi-range:empty { display: none; }
/* the bar is drawn to scale, BMI 15 to 40, so the dot lands where the number is */
.bmi-scale { position: relative; display: grid; grid-template-columns: 3.5fr 6.5fr 5fr 10fr; height: 8px; margin-top: 24px; }
.bmi-scale i { background: rgba(17, 17, 17, .1); transition: background-color .25s; }
.bmi-scale i + i { border-left: 3px solid var(--gray); }
.bmi-scale i:first-of-type { border-radius: 4px 0 0 4px; }
.bmi-scale i:last-of-type { border-radius: 0 4px 4px 0; }
.bmi-scale i.on { background: var(--ink); }
.bmi-dot { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; translate: -50% -50%; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--gray); opacity: 0; transition: left .45s cubic-bezier(.2, .7, .2, 1), opacity .2s; }
.bmi-card.has .bmi-dot { opacity: 1; }
.bmi-side .mcol ul { padding: 10px 0; }
#bmiRanges.has li { color: var(--ink-3); }
#bmiRanges li { transition: color .2s; }
#bmiRanges li.on, #bmiRanges li.on span { color: var(--ink); }
.bmi-side .matrix-note { margin-top: 20px; }
.bmi-side .actions { margin-top: 24px; }

@media (max-width: 1000px) {
  /* phones and tablets: the contents fold into one card above the document */
  .legal { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { display: none; }
  .toc-m { display: block; margin-bottom: 16px; background: var(--gray); border-radius: var(--r); padding: 0 28px; }
  .toc-m summary { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; font-size: 16px; font-weight: 500; list-style: none; cursor: pointer; }
  .toc-m summary::-webkit-details-marker { display: none; }
  .toc-m summary::after { content: ""; width: 20px; height: 20px; background: var(--ink-3); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: rotate .25s; }
  .toc-m[open] summary::after { rotate: 180deg; }
  .toc-m ol { padding-bottom: 16px; border-top: 1px solid rgba(17, 17, 17, .08); padding-top: 8px; }
  .prose .toc-m li { padding: 0; margin: 0; font-size: 15px; }
  .prose .toc-m li::before { content: none; }
  .prose .toc-m a { display: block; padding: 8px 0; color: var(--ink-2); text-decoration: none; }
  .bmi { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .footer.footer-solo { margin-top: 120px; }
}

@media (max-width: 600px) {
  .page-head { padding-top: 56px; }
  .page-head h1 { font-size: min(2.6rem, 10.5vw); }
  .page-head > p { font-size: 17px; }
  .prose, .help, .bmi { margin-top: 36px; }
  .prose h2 { margin-top: 40px; }
  .prose p, .prose li { font-size: 16px; }
  .legal { margin-top: 36px; }
  .legal .prose > h2:first-of-type { margin-top: 56px; }
  .legal-summary { padding: 28px 22px; }
  .legal-summary h2 { font-size: 24px; }
  .toc-m { padding: 0 22px; }
  .prose h3 { font-size: 20px; margin-top: 28px; }
  .help { gap: 64px; }
  .help-group .faq-list { margin-top: 20px; }
  .bmi-card { padding: 22px; }
  .bmi-fields { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 22px; }
  .bmi-num { font-size: 60px; }
  .bmi { gap: 40px; }
  .footer.footer-solo { margin-top: 96px; padding-top: 40px; }
}

/* ---------- Landing pages (weight loss first) ----------
   The home page's parts (copy beside the phone, gray cards, price rows, questions), plus medicine cards and steps.
   The quiet gray is a shade darker here, so fine print about prices and safety still reads at 4.5:1 on white and gray. */
.lp { --ink-3: #6E6E73; --alert: #D70015; }   /* a real red that still reads as text on white */
.lp-hero { padding-top: 40px; }
.lp-hero h1 { font-size: clamp(2.5rem, 4.4vw, 3.9rem); letter-spacing: -0.02em; }
.lp-hero .iphone { --s: .74; }
.copy > p.lp-safety { margin-top: 28px; font-size: 16px; color: var(--ink-2); }
.lp-safety a, .lp-link a, .lp-sources a, .med-links a, .isi-body > p a { text-decoration: underline; text-decoration-color: rgba(17, 17, 17, .3); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.lp-safety a:hover, .lp-link a:hover, .lp-sources a:hover, .med-links a:hover, .isi-body > p a:hover { text-decoration-color: currentColor; }
.lp-safety a { color: var(--ink); white-space: nowrap; }
.lp-safety b { font-weight: 600; color: var(--ink); }
/* Three reasons under the headline, each with a check */
.lp-points { display: grid; gap: 10px; margin-top: 24px; }
.lp-points li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; line-height: 1.45; color: var(--ink); }
.lp-points .icon { width: 20px; height: 20px; margin-top: 1px; stroke-width: 2.4; }

/* The first step of the visit form, in the hero: two dropdowns and a button */
.lp-form { max-width: 34em; margin-top: 32px; }
.lp-fields { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Dropdowns, the same as the app's forms (components/dropdown.tsx, the "form" look): a gray field that opens a white
   list under it, with a search box when the list is long. The pick turns the app's blue, with a check. */
.lp { --pick: #2E89EA; --placeholder: #C4C4C8; }
.dd { position: relative; min-width: 0; }
.dd-trigger { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; height: 56px; padding: 0 24px; border-radius: var(--r); background: var(--gray); font-size: 18px; font-weight: 500; color: var(--ink); text-align: left; -webkit-user-select: none; user-select: none; transition: background-color .2s, box-shadow .2s; }
@media (hover: hover) { .dd-trigger:hover { background: var(--gray-hover); } .dd-list li:hover { background: var(--gray); } }
.dd-trigger:focus-visible { outline: 0; box-shadow: inset 0 0 0 1.5px var(--ink); }
.dd-trigger[aria-expanded="true"] { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.dd-trigger[data-invalid] { box-shadow: inset 0 0 0 1.5px var(--alert); }
.dd-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-value.is-empty { font-weight: 400; color: var(--placeholder); }
.dd-trigger .icon { width: 22px; height: 22px; stroke-width: 2.5; transition: transform .2s; }
.dd-trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
/* corners follow what's inside: the pill rows plus the 8px around them */
.dd-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: 8px; padding: 0 8px 8px; overflow-y: auto; overscroll-behavior: contain; border-radius: 32px; background: #fff; box-shadow: 0 16px 48px rgba(17, 17, 17, .14), 0 0 0 1px rgba(17, 17, 17, .05); }
.dd-panel.no-search { padding-top: 8px; }
.dd-panel[hidden] { display: none; }
/* the search stays put while the list scrolls under it; white covers down to the middle of the search box only */
.dd-head { position: sticky; top: 0; z-index: 1; padding-top: 8px; }
.dd-head::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 32px; background: #fff; }
.dd-find { position: relative; }
.dd-search { width: 100%; height: 48px; padding: 0 20px 0 48px; border: 0; border-radius: var(--r); outline: 0; background: var(--gray); font: inherit; font-size: 16px; font-weight: 500; color: var(--ink); -webkit-appearance: none; appearance: none; }
.dd-search::placeholder { font-weight: 400; color: var(--placeholder); }
.dd-search::-webkit-search-cancel-button { display: none; }
.dd-find .icon { position: absolute; top: 15px; left: 20px; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.dd-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.no-search .dd-list { margin-top: 0; }
.dd-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 20px; border-radius: var(--r); font-size: 16px; font-weight: 500; line-height: 1.375; cursor: pointer; -webkit-user-select: none; user-select: none; }
.dd-list li[hidden] { display: none; }
.dd-list li.is-active { background: var(--gray); }
.dd-list li[aria-selected="true"] { background: var(--pick); color: #fff; }
.dd-end { display: flex; flex-shrink: 0; align-items: center; gap: 10px; }
.dd-hint { width: 28px; text-align: center; font-size: 14px; color: var(--ink-3); }
.dd-list li[aria-selected="true"] .dd-hint { color: rgba(255, 255, 255, .8); }
.dd-check { display: none; width: 18px; height: 18px; }
.dd-list li[aria-selected="true"] .dd-check { display: block; }
.dd-list li.dd-empty { justify-content: center; font-size: 15px; font-weight: 400; color: var(--ink-2); cursor: default; }
.dd-list li.dd-empty, .dd-list li.dd-empty:hover { background: none; }
.lp-form .btn { margin-top: 12px; padding: 17px 26px; }
.lp-form-msg { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.lp-form-error { color: var(--alert); }

/* The medicines: one gray card each, the facts in rows, the price and the label at the bottom */
.meds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.med { display: flex; flex-direction: column; overflow: hidden; padding: 32px 28px 28px; background: var(--gray); border-radius: var(--r); }
/* the product on the home page's medication blue, across the top of the card; tablets are drawn smaller, so a pill
   doesn't read bigger than a pen */
.med-img { position: relative; display: block; margin: -32px -28px 28px; aspect-ratio: 5 / 4; background: var(--rx-blue); }
/* top and height are both shares of the panel's height, so the product keeps its size at every width */
.med-img img { position: absolute; left: 0; top: 7%; width: 100%; height: 86%; object-fit: contain; }
.med-img.pill img { top: 21%; height: 58%; }
.med-form { font-size: 14px; color: var(--ink-3); }
.med h3 { margin-top: 8px; font-size: 30px; }
.med-gen { margin-top: 6px; font-size: 14px; color: var(--ink-3); }
.med-stat { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(17, 17, 17, .08); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.med-stat b { display: block; margin-bottom: 8px; font-family: var(--serif); font-size: 56px; font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.med dl { flex: 1; margin-top: 18px; }
.med dl div { padding: 14px 0; border-top: 1px solid rgba(17, 17, 17, .08); }
.med dt { font-size: 13px; color: var(--ink-3); }
.med dd { margin-top: 4px; font-size: 15px; line-height: 1.5; }
.med-price { padding-top: 16px; border-top: 1px solid rgba(17, 17, 17, .08); font-size: 15px; color: var(--ink-2); }
.med-price b { font-weight: 600; color: var(--ink); }
.med-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.lp .matrix-note { max-width: 52em; }   /* notes keep a readable line length instead of running the full page width */

/* From first text to first dose: four numbered cards */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 56px; list-style: none; }
.steps li { padding: 32px 28px; background: var(--gray); border-radius: var(--r); }
.step-n { display: block; font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--ink-3); }
.steps h3 { margin-top: 32px; font-size: 24px; }
.steps p { margin-top: 10px; font-size: 15px; color: var(--ink-2); }

/* Prices: the home page's rows, with each medicine's conditions under its card */
.mnote { margin-top: 14px; font-size: 13px; line-height: 1.55; color: var(--ink-3); }

/* Lists inside the gray cards: who it's for, dose steps, urgent care */
.lp-list, .lp-rows { margin-top: 16px; }
.lp-list li, .lp-rows li { padding: 12px 0; border-top: 1px solid rgba(17, 17, 17, .08); font-size: 15px; line-height: 1.5; }
.lp-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.lp-rows b { flex-shrink: 0; font-weight: 500; }
.lp-rows span { color: var(--ink-2); text-align: right; }
.lp .any > p + ul, .lp .any > ul + p { margin-top: 16px; }
.lp-link { margin-top: 14px; font-size: 15px; font-weight: 500; }
.lp .any > p.lp-911 { margin-top: 20px; font-weight: 600; color: var(--ink); }
/* Urgent care: a health-guidance care card, the way the NHS design system does it. The red is a band behind the
   heading, not red text on gray, so it reads as a deliberate warning rather than an error message. */
.lp-urgent { overflow: hidden; }
.lp-urgent h3 { margin: -36px -32px 0; padding: 32px 32px 28px; background: var(--alert); color: #fff; }
.lp-urgent .lp-list { margin-top: 8px; }
.lp-urgent .lp-list li:first-child { border-top: 0; }
.lp .anywhere + .matrix-note { margin-top: 28px; }

/* Important safety information, set like a document: a label column and a text column, hairline rows, and the
   boxed warning in an actual bordered box, the way the prescribing information prints it. The box's columns line up
   with the rows below it. Text stays at the size of the benefit copy above. */
.isi { --isi-l: 340px; --isi-gap: 48px; --isi-pad: 44px; margin-top: 56px; }
.isi h3 { font-family: var(--sans); font-size: 19px; font-weight: 600; line-height: 1.4; letter-spacing: -0.005em; color: var(--ink); }
.isi-body { max-width: 42em; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.isi-body > p + p, .isi-body > p + ul, .isi-body > ul + p { margin-top: 14px; }

.isi-boxed { display: grid; grid-template-columns: calc(var(--isi-l) - var(--isi-pad) - 2px) minmax(0, 1fr); gap: 20px var(--isi-gap); padding: var(--isi-pad); border: 2px solid var(--ink); border-radius: var(--r); }
.isi-kicker { margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--alert); }
.isi-boxed h3 { font-size: 22px; }
.isi-boxed .isi-body { color: var(--ink); }

.isi-row { display: grid; grid-template-columns: var(--isi-l) minmax(0, 1fr); gap: 16px var(--isi-gap); padding: 44px 0; border-top: 1px solid rgba(17, 17, 17, .1); }
.isi-boxed + .isi-row { margin-top: 32px; border-top: 0; }

.isi-dots li { position: relative; padding-left: 22px; }
.isi-dots li + li { margin-top: 8px; }
.isi-dots li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }

.isi-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 4px; }
.isi-terms li { padding: 14px 0; border-top: 1px solid rgba(17, 17, 17, .08); font-size: 16px; line-height: 1.55; }
.isi-terms b { display: block; margin-bottom: 2px; font-weight: 600; color: var(--ink); }
.isi-body .isi-pi { margin-top: 24px; }

.isi-contacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.isi-contacts li { display: flex; flex-direction: column; padding-top: 16px; border-top: 1px solid rgba(17, 17, 17, .1); }
.isi-contacts span { font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.isi-contacts a { margin-top: 6px; font-size: 18px; font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.isi-contacts a.isi-web { margin-top: 2px; padding-top: 0; font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: underline; text-decoration-color: rgba(17, 17, 17, .3); text-underline-offset: 3px; }

/* Sources, the review date and the trademark line: the same two columns, in small print */
.isi-row.lp-sources { padding-bottom: 0; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.lp-sources h3 { font-size: 14px; }
.lp-sources h3 + p { margin-top: 4px; }
.lp-sources .isi-body { font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.lp-sources li { padding: 3px 0; }
.lp-sources .isi-body p { margin-top: 14px; }

@media (max-width: 1000px) {
  .isi-boxed, .isi-row { grid-template-columns: minmax(0, 1fr); }
  .isi-contacts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .isi-contacts li { padding: 14px 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
  .isi-contacts span { flex: 1 1 100%; }
  .isi-contacts a, .isi-contacts a.isi-web { margin-top: 0; }
}
@media (max-width: 1240px) {
  .meds, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .med-img { aspect-ratio: 16 / 10; }
}
@media (max-width: 600px) {
  .lp-hero { padding-top: 32px; }
  .lp-hero h1 { font-size: min(2.6rem, 10.5vw); }
  .copy > p.lp-safety { margin-top: 24px; font-size: 15px; }
  /* the medicines: one row you swipe, with the next card peeking in, like the price tables below and the home page.
     Stacked, the four cards took four and a half screens. */
  .meds { display: flex; gap: 12px; margin: 36px -16px 0; padding: 0 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .meds::-webkit-scrollbar { display: none; }
  .med { flex: 0 0 84%; padding: 28px 22px 24px; scroll-snap-align: start; }
  .med-img { margin: -28px -22px 24px; aspect-ratio: 2 / 1; }   /* a whole card fits between the menu and the bottom bar */
  .med-img.pill img { top: 18%; height: 64%; }
  .med h3 { font-size: 26px; }
  /* the four steps: one panel, read top to bottom, each number level with its title */
  .steps { display: block; margin-top: 36px; padding: 4px 22px; background: var(--gray); border-radius: var(--r); corner-shape: squircle; }
  .steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 24px 0; background: none; border-radius: 0; }
  .steps li + li { border-top: 1px solid rgba(17, 17, 17, .08); }
  .step-n { grid-column: 1; grid-row: 1; font-size: 28px; }
  .steps h3, .steps p { grid-column: 2; }
  .steps h3 { margin-top: 0; font-size: 21px; }
  .steps p { margin-top: 6px; }
  /* the prices: the same swipe row, each medicine one whole card (name, doses, note) so short and long ones line up
     as equal cards instead of leaving a gap under the short ones */
  .lp .mcol { display: flex; flex-direction: column; padding: 26px 22px 18px; background: var(--gray); border-radius: var(--r); corner-shape: squircle; }
  .lp .msub { margin-bottom: 8px; }
  .lp .mcol ul { padding: 0; background: none; border-radius: 0; }
  .lp .mcol li { margin: 0; }
  .lp .mnote { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(17, 17, 17, .08); }
  .lp-rows li { flex-direction: column; gap: 2px; }
  .lp-rows span { text-align: left; }
  .lp-urgent h3 { margin: -28px -22px 0; padding: 26px 22px 22px; }
  .isi { --isi-pad: 24px; margin-top: 36px; }
  .isi-boxed { padding: 26px 22px; gap: 14px; }
  .isi-boxed h3 { font-size: 20px; }
  .isi h3 { font-size: 18px; }
  .isi-body { font-size: 16px; }
  .isi-row { gap: 12px; padding: 32px 0; }
  .isi-terms { grid-template-columns: minmax(0, 1fr); }
  .dd { position: static; }   /* the open list spans both fields, so state names fit */
  .dd-trigger { gap: 8px; padding: 0 16px 0 20px; font-size: 16px; }
  .dd-trigger .icon { width: 18px; height: 18px; }
  /* centered on a phone: the hero, section headings and short notes. Cards, lists and the safety text stay
     left-aligned, so longer reading lines start in the same place. */
  .lp-hero .copy, .lp .head, .lp .matrix-note, .lp-medicare, .lp .cta .wrap { text-align: center; }
  .lp .head, .lp .head p, .lp-hero .copy > p, .lp .cta h2 { margin-inline: auto; }
  .lp-points { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
  .lp-form-msg { text-align: center; }
  .lp-points { gap: 8px; margin-top: 20px; }
  .lp-form { margin-top: 28px; }
  .lp-points li { font-size: 16px; }
  .med-stat b { font-size: 48px; }
  .lp-form .btn { display: flex; justify-content: center; width: 100%; }
}

/* Landing pages: the bottom bar on a phone (script.js shows it once the form at the top has scrolled away) */
.lp-sticky { display: none; }
@media (max-width: 600px) {
  .lp-sticky {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -1px 0 rgba(17, 17, 17, .06);
    translate: 0 100%; visibility: hidden; transition: translate .3s ease, visibility 0s linear .3s;
  }
  .lp-sticky.in { translate: 0 0; visibility: visible; transition: translate .3s ease; }
  .lp-sticky .btn { display: flex; justify-content: center; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .lp-sticky, .lp-sticky.in { transition: none; } }
@media print { .lp-sticky { display: none; } }

/* ---------- Test pages: result ranges (a1c-test.html) ----------
   One scale in three colored parts, each with its name in words, its range and what it means, so the color is never
   the only signal. Side by side down to a small tablet, with the scale across the top; stacked on a phone, with the
   scale down the left. The same names, in the same colors, label the next steps further down. */
.lp-range.is-ok, .lp-status.is-ok { --c: var(--ok); }
.lp-range.is-warn, .lp-status.is-warn { --c: #C2410C; }   /* a real orange, not mustard: 4.8:1 on the gray, so it reads as text */
.lp-range.is-high, .lp-status.is-high { --c: var(--alert); }
.lp-status { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--c, var(--ink)); }
.lp-ranges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 4px; margin-top: 56px; padding: 44px 40px 40px; background: var(--gray); border-radius: var(--r); list-style: none; }
.lp-range { position: relative; padding: 34px 32px 0 0; }
.lp-range::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px; background: var(--c); }
.lp-range:first-child::before { border-radius: 5px 0 0 5px; }
.lp-range:last-child::before { border-radius: 0 5px 5px 0; }
.lp-range-value { margin-top: 8px; font-family: var(--serif); font-size: clamp(2.1rem, 3.3vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; }
.lp-range-text { margin-top: 14px; max-width: 19em; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.lp-ranges + .matrix-note { margin-top: 28px; }
.lp-list .lp-status { display: block; margin-bottom: 2px; }
@media (max-width: 1000px) {
  .lp-ranges { padding: 36px 32px 32px; }
  .lp-range { padding-right: 24px; }
  .lp-range-value { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }   /* "6.5% or higher" stays on one line */
}
@media (max-width: 700px) {
  .lp-ranges { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 28px 32px; }
  .lp-range { padding: 18px 0 18px 32px; }
  .lp-range::before { top: 0; bottom: 0; right: auto; width: 8px; height: auto; }
  .lp-range:first-child::before { border-radius: 4px 4px 0 0; }
  .lp-range:last-child::before { border-radius: 0 0 4px 4px; }
  .lp-range-value { font-size: 2.1rem; }
  .lp-range-text { margin-top: 8px; max-width: 30em; }
}
@media (max-width: 600px) {
  .lp-ranges { margin-top: 36px; padding: 22px; }
  .lp-range { padding: 14px 0 14px 24px; }
  .lp-range::before { width: 6px; }
  .lp-range-value { margin-top: 4px; font-size: 30px; }
  .lp-range-text { margin-top: 6px; }
}

/* "A1c" in a serif heading or question: Marcellus draws its 1 like a lowercase l, so it read "Alc". The digit alone
   takes the text face, whose 1 has a clear flag. */
.digit-sans { font-family: var(--sans); font-weight: 400; }

/* ---------- Test pages: levels in the price-row cards (cholesterol-test.html) ----------
   A status beside each range, always written out; the color only repeats it: real green in range, real red out of
   range, plain gray in between. Both reach 4.5:1 on the gray card. */
.lp-levels li span.in-range { color: var(--ok); font-weight: 500; }
.lp-levels li span.out-of-range { color: var(--alert); font-weight: 500; }

/* ---------- Test pages: test cards (std-testing.html) ----------
   The medicine cards (.med) without a photo, one per infection. On a computer or tablet each card's four parts line
   up with the cards beside it, even when one name runs to two lines, so the big figures sit level. On a phone they're
   the usual swipe row. */
@media (min-width: 601px) {
  @supports (grid-template-rows: subgrid) {
    .lp-tests .med { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  }
}

/* ---------- A later day in the example conversation (test pages) ----------
   Messages puts a time stamp between days. A second stamp waits, hidden, until that day starts: the typing bubble or
   a message after it appears (script.js adds .on and .show). #typing by its id, because script.js briefly appends a
   copy of the typing bubble at the end of the thread. Without the animation, everything is on screen from the start. */
.thread .stamp ~ .stamp { margin-top: 16px; }
.js .thread .stamp ~ .stamp:not(:has(~ .b.show, ~ #typing.on)) { display: none; }

/* ---------- Single-pill pages (propranolol.html) ----------
   A product page, not a long condition page: the tablet on one side, and beside it the name, what it's for, the
   whole price (visit plus pharmacy) and one button, with the off-label and safety lines right under it. */
/* the tablet on the left, top-aligned with the text: its top edge level with the first line on the right */
.pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "media head" "media body"; align-items: start; column-gap: clamp(48px, 6vw, 96px); }
.pdp-media { grid-area: media; }
.buy-head { grid-area: head; }
.buy-body { grid-area: body; }
/* optical alignment: the first line's letters, not its line box, start level with the top of the tile */
@media (min-width: 1001px) { .buy-head { margin-top: -6px; } }
.pdp-media { margin: 0; }
.pdp-img { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: var(--r); background: var(--rx-blue); }
.pdp-img img { width: 38%; height: auto; }   /* a real photo, cut out, shown as it is */
.pdp-media figcaption { margin-top: 12px; font-size: 13px; color: var(--ink-3); text-align: center; }
.buy h1 { font-size: clamp(2.4rem, 3.9vw, 3.5rem); text-wrap: balance; }
.buy-kind { margin-bottom: 14px; font-size: 15px; color: var(--ink-3); }
.buy-sub { margin-top: 20px; max-width: 32em; font-size: 18px; color: var(--ink-2); }
.buy-price { margin-top: 32px; padding: 4px 28px; background: var(--gray); border-radius: var(--r); }
.buy-price li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0; font-size: 16px; line-height: 1.4; color: var(--ink-2); }
.buy-price li + li { border-top: 1px solid rgba(17, 17, 17, .08); }
.buy-price b { flex-shrink: 0; font-size: 18px; font-weight: 600; color: var(--ink); }
.buy-price small { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-3); }   /* how many tablets the price buys */
.buy-fine { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.buy .btn { margin-top: 24px; padding: 17px 26px; }
.buy .lp-safety { margin-top: 28px; font-size: 16px; color: var(--ink-2); }
.buy .rep-note { margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  /* one column: the name first, then the tablet, then the price and the button */
  .pdp { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "media" "body"; row-gap: 32px; }
  .buy-body > :first-child { margin-top: 0; }
  .pdp-img { aspect-ratio: 2 / 1; }
  .pdp-img img { width: 28%; }   /* the tile is half as tall here, so the tablet takes a smaller share of its width */
  .buy { max-width: 640px; }
}
@media (max-width: 700px) {
  .steps-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .pdp { row-gap: 24px; }
  .pdp-img { aspect-ratio: 2 / 1; }   /* shorter on a phone, so the price and the button still reach the first screen */
  .pdp-media figcaption { margin-top: 10px; font-size: 12px; }
  .buy { text-align: center; }
  .buy h1 { font-size: min(2.6rem, 10vw); }
  .buy-kind { margin-bottom: 10px; font-size: 14px; }
  .buy-sub { margin-top: 14px; margin-inline: auto; font-size: 16px; }
  .buy-price { margin-top: 22px; }
  .buy-fine { font-size: 13px; }
  .buy .btn { margin-top: 18px; }
  .buy-price { padding: 2px 22px; text-align: left; }
  .buy-price li { font-size: 15px; }
  .buy-price b { font-size: 17px; }
  .buy-price small { font-size: 13px; }
  .buy .btn { display: flex; justify-content: center; width: 100%; }
  .buy .lp-safety { font-size: 15px; }
}

/* Product photos with their own margin (varenicline, oseltamivir, nitrofurantoin): General Medicine's shots and the
   C3PI cut-outs keep about 13% of empty space on each side, where propranolol's fills its file, so they're drawn
   larger to show the pill at the same size. A capsule is long and thin, so it's drawn wider again. */
.pdp-img.padded img { width: 49%; }
.pdp-img.capsule img { width: 68%; }
@media (max-width: 1000px) {
  .pdp-img.padded img { width: 36%; }
  .pdp-img.capsule img { width: 50%; }
}

/* ---------- Photo opening (propranolol) ----------
   The home page's full-screen opening with a still photo instead of the video, and one line in the middle */
.hv-photo { min-height: max(540px, 80svh); justify-content: center; padding: 96px 0; background: #0d0b09; }   /* 80% of the screen, not full: the product peeks from below. Even padding: the line sits in the true middle */
.hv-photo .hv-media { object-position: 50% 50%; }
/* a crowd of faces behind white words: an even shade, more at the top for the nav, and a deeper soft pool where the line sits */
.hv-photo .hv-shade {
  background:
    radial-gradient(ellipse 52% 34% at 50% 50%, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 72%),
    linear-gradient(180deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .05) 24%, rgba(0, 0, 0, .05) 70%, rgba(0, 0, 0, .3) 100%),
    rgba(0, 0, 0, .2);
}
.hv-title { font-family: var(--serif); font-size: clamp(3rem, 5.4vw, 5.4rem); line-height: 1.04; letter-spacing: -0.02em; max-width: 12em; color: #fff; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .3); }
/* under the photo the product needs more room than under the nav (the weight-loss page's 40px): one step of the
   site's spacing (96px on desktop, the gap between sections on phones), less than a full section gap so its heading
   still shows at the bottom of the first screen */
.hv-photo + .pdp { padding-top: 96px; }
/* the two plain facts under the product's description: ticks in a row, left-aligned with the copy */
.buy-trust { display: grid; justify-content: start; justify-items: start; gap: 10px; margin-top: 24px; }   /* one tick per line: three side by side wrapped unevenly */
.buy-trust li { font-size: 16px; color: var(--ink); }
.buy-trust .icon { color: var(--ink); }
@media (max-width: 600px) {
  .hv-photo { min-height: max(500px, 80svh); padding: 88px 0; }
  .hv-photo .hv-media { object-position: 50% 50%; }
  .hv-title { font-size: min(3.1rem, 12.4vw); }
  .hv-photo + .pdp { padding-top: 56px; }
  .buy-trust { justify-content: center; margin-top: 18px; }   /* the home page's phone ticks: a left-aligned list, centered as a block */
  .buy-trust li { font-size: 15px; }
}

/* ---------- Photo opening with the coverage check (varenicline) ----------
   The same opening, with the state and insurance form under the line: frosted fields on the photo and a white button,
   like the nav's over the photo. The fields' lists open below the photo's edge, so the opening doesn't clip them; the
   photo and its shade round their own corners instead, and the opening sits above the product (the nav stays on top). */
.hv-form { overflow: visible; z-index: 2; }
.hv-form .hv-media, .hv-form .hv-shade { border-radius: 0 0 var(--r) var(--r); }
.hv-form .dd-panel { color: var(--ink); }   /* the opening's text is white; its lists are white panels */
.hv-form .hv-shade {
  background:
    radial-gradient(ellipse 58% 46% at 50% 52%, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 74%),
    linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .08) 24%, rgba(0, 0, 0, .08) 70%, rgba(0, 0, 0, .32) 100%),
    rgba(0, 0, 0, .26);
}
.hv-form .hero-sub { text-shadow: 0 1px 16px rgba(0, 0, 0, .45); }   /* what the page is for, under the line: readable over the leaves */
.hv-form .lp-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; width: 100%; max-width: 46em; margin-top: 44px; text-align: left; }
.hv-form .lp-fields { grid-column: 1; grid-row: 1; }
.hv-form .lp-form .btn { grid-column: 2; grid-row: 1; height: 56px; margin-top: 0; padding: 0 28px; background: #fff; color: var(--ink); }
.hv-form .lp-form-msg { grid-column: 1 / -1; margin-top: 4px; text-align: center; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .4); }
.hv-form .lp-form-error { font-weight: 600; }
.hv-form .dd-trigger { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); color: #fff; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.hv-form .dd-value.is-empty { color: rgba(255, 255, 255, .82); }
@media (hover: hover) { .hv-form .dd-trigger:hover { background: rgba(255, 255, 255, .24); } }
.hv-form .dd-trigger:focus-visible { box-shadow: inset 0 0 0 2px #fff; }
.hv-form .dd-trigger[aria-expanded="true"] { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.hv-form .dd-trigger[aria-expanded="true"] .dd-value.is-empty { color: var(--placeholder); }
.hv-form .dd-trigger[data-invalid] { box-shadow: inset 0 0 0 2px var(--alert); }
@media (max-width: 600px) {
  .hv-form .lp-form { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .hv-form .lp-form .btn { grid-column: 1; grid-row: 2; }
  .hv-form .dd-trigger { padding: 0 20px; font-size: 17px; }
}
@supports (corner-shape: squircle) {
  .hv-form .hv-media, .hv-form .hv-shade { corner-shape: squircle; }
}

/* ---------- One corner radius everywhere ----------
   Smooth (squircle) corners where the browser supports them; a squircle needs a larger value to look as round. */
@media (max-width: 600px) {
  /* closing call to action and footer: shorter, links in three tidy columns */
  .cta { margin-top: 96px; padding: 64px 0 56px; }
  .cta h2 { font-size: 40px; }
  .cta p { font-size: 16px; margin: 20px 0 32px; }
  .cta .btn { display: flex; justify-content: center; }
  .footer { padding: 32px 0 40px; }
  .foot-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 16px; }
  .foot-grid .word { grid-column: 1 / -1; }
  .footer h4 { margin-bottom: 8px; }
  .foot-grid a { padding: 5px 0; }
  .foot-legal { margin-top: 36px; padding-top: 20px; font-size: 11.5px; line-height: 1.6; }
  .foot-bottom { flex-direction: column; gap: 6px; margin-top: 20px; font-size: 12px; }
  .foot-meta { justify-content: space-between; margin-top: 6px; }
}

@media (max-width: 600px) { :root { --r: 28px; } }
@supports (corner-shape: squircle) {
  :root { --r: 96px; }
  .hv, .tile, .cta, .mcol ul, .any, .faq-list, .offer, .offer-img, .rx-img, .labs-visual, .labs-panel, .rep-visual, .bmi-card, .footer-solo, .legal-summary, .toc-m, .med, .steps li, .isi-boxed, .pdp-img, .buy-price, .lp-ranges { corner-shape: squircle; }
  .offer-img { border-radius: var(--r); }   /* squircle browsers: the full smooth corner, same as before */
  @media (max-width: 600px) { :root { --r: 60px; } }
}

/* Cookie choice (script.js): a small card in the bottom corner on a computer, along the bottom edge on a phone.
   Nothing behind it is dimmed or blocked, and it never takes focus. Both answers look the same on purpose. */
.consent {
  position: fixed; left: 24px; bottom: 24px; z-index: 30;
  width: min(392px, calc(100% - 48px)); padding: 22px 22px 20px;
  border-radius: 32px; background: #fff; color: var(--ink);
  box-shadow: 0 16px 48px rgba(17, 17, 17, .14), 0 0 0 1px rgba(17, 17, 17, .05);
  opacity: 0; translate: 0 12px; transition: opacity .25s ease, translate .35s cubic-bezier(.2, .8, .2, 1);
}
.consent.in { opacity: 1; translate: 0 0; }
.consent[hidden] { display: none; }
.consent p { padding: 0 4px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.consent p a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(17, 17, 17, .3); text-underline-offset: 3px; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.consent-actions button { height: 46px; border-radius: 23px; background: var(--gray); font-size: 15px; font-weight: 600; color: var(--ink); transition: background-color .2s; }
@media (hover: hover) { .consent-actions button:hover { background: var(--gray-hover); } }
.consent-actions button:focus-visible { outline: 0; box-shadow: inset 0 0 0 1.5px var(--ink); }
.foot-btn { display: block; padding: 6px 0; line-height: 1.3; font-size: inherit; color: inherit; text-align: left; transition: color .2s; }
.foot-btn:hover { color: #fff; }
@media (max-width: 600px) {
  .consent { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 20px 18px 18px; border-radius: 28px; }
}
@media print { .consent { display: none; } }

/* Touch screens: iOS keeps :hover on after a tap, so a button would stay dimmed and a photo stay zoomed.
   Hover effects are for mice; a press gets its own quick feedback instead. */
@media (hover: none) {
  .btn:hover { opacity: 1; }
  .btn:hover .icon, .tile:hover .btn .icon, .offer a:hover .icon { transform: none; }
  .tile:hover img { transform: none; }
  .btn:active { opacity: .7; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}