/* ═══════════════════════════════════════════════════════════════════════════
   TabsRx — application stylesheet. One system for every page.

   Mobile-first throughout. Most traffic arrives from a creator Reel, on a
   phone, in portrait, one-handed. Every tap target is >= 48px and the primary
   action is always within thumb reach.

   The register: a white page, one sentence-case sans, indigo pill buttons,
   rounded panels, hairline rules and a lot of air (the premium medical
   register Hims, Ro and Manual share). The home page, the sexual-health
   page, the intake, the plan, the account and the legal pages all draw on
   the primitives in the first half of this file; the page-specific blocks
   in the second half only arrange them.

   Tokens live in tokens.css. Nothing here names a colour or a face directly.
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv05';
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--accent-soft); color: var(--ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: var(--s-sm) var(--s-md);
}
.skip:focus { left: 0; }

/* ═══ TYPE PRIMITIVES ════════════════════════════════════════════════════ */

/* Display lines. Sentence case, tight leading, the optical axis does the
   rest. `.display` + `.d-*` is the older naming and `.h2` the newer; they
   resolve to the same scale so a heading reads the same on every page. */
.display, .h2 {
  font-family: var(--display); font-weight: 700;
  line-height: 1.02; letter-spacing: -0.025em; margin: 0; text-wrap: balance;
}
.h2 { font-size: var(--t-h2); max-width: 18ch; }
.d-l { font-size: clamp(2.5rem, 1.8rem + 3vw, 4.25rem); letter-spacing: -0.03em; line-height: 1; }
.d-m { font-size: var(--t-h2); }
.d-s { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); line-height: 1.1; letter-spacing: -0.02em; }

.eyebrow {
  font-family: var(--body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s-sm);
}

.lead { font-size: var(--t-lead); line-height: 1.5; max-width: var(--measure); }
.lead-p { font-size: var(--t-lead); line-height: 1.5; color: var(--muted); max-width: 52ch; margin: var(--s-md) 0 0; }
.lead-p b, .lead-p strong { color: var(--ink); font-weight: 600; }
.prose-lead p { font-size: var(--t-lead); line-height: 1.5; color: var(--muted); max-width: 52ch; margin: 0 0 var(--s-md); }
.prose-lead p:last-child { margin-bottom: 0; }
.small { font-size: var(--t-small); }
.micro { font-size: var(--t-micro); line-height: 1.5; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 var(--s-md); }
.prose ul { max-width: var(--measure); padding-left: 1.1em; }
.prose li { margin-bottom: var(--s-xs); }

/* ═══ BUTTONS ════════════════════════════════════════════════════════════ */

.btn, .btn-p, .btn-s {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: var(--r-pill);
  font-family: var(--body); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out), transform 80ms var(--ease-out);
}
.btn, .btn-p { background: var(--accent); color: var(--paper); }
.btn:hover, .btn-p:hover { background: var(--accent-deep); color: var(--paper); }
.btn:active, .btn-p:active { transform: translateY(1px); }
.btn[disabled], .btn-p[disabled] { opacity: 0.32; pointer-events: none; }
.btn-lg { min-height: 56px; }
.btn-block { width: 100%; }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 0.9375rem; }

.btn-ghost, .btn-s { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-firm); }
.btn-ghost:hover, .btn-s:hover { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

.btn-price { flex-direction: column; gap: 2px; line-height: 1.15; }
.btn-price .btn-price-sub { font-size: 0.75rem; font-weight: 500; opacity: 0.78; }

.ctas { display: flex; flex-wrap: wrap; gap: var(--s-sm); margin-top: var(--s-xl); }
.micro-cta { font-size: var(--t-micro); color: var(--muted); margin: var(--s-sm) 0 0; }

.linky { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.linky:hover { color: var(--accent); }

/* ═══ CHROME ═════════════════════════════════════════════════════════════ */

/* Announcement bar: one line, one link, on every selling page. */
.announce {
  display: block; min-height: var(--announce-h); padding: 12px var(--gutter);
  line-height: 16px; background: var(--accent); color: var(--paper); text-decoration: none; text-align: center;
  font-size: 0.875rem; font-weight: 500;
  transition: background var(--t-fast) var(--ease-out);
}
.announce b { font-weight: 700; }
.announce:hover { background: var(--accent-deep); }

.site-head {
  display: flex; flex-wrap: wrap; row-gap: 0; align-items: center; justify-content: space-between; gap: var(--s-md);
  padding: 12px var(--gutter);
  border-bottom: 1px solid transparent;
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--paper) 90%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
}
.site-head:has(#nav-toggle:checked) { border-bottom-color: var(--line); }

/* The lockup: the Tabs wordmark with "Rx" set in the display face. */
.lockup { display: flex; align-items: center; gap: 6px; text-decoration: none; }
.lockup img { width: 62px; height: auto; }
.lockup-rx {
  font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1;
  letter-spacing: -0.02em; color: var(--ink);
}

.head-actions { display: flex; align-items: center; gap: var(--s-sm); margin-left: auto; }
.head-login { font-size: 0.9375rem; font-weight: 600; color: var(--ink); text-decoration: none; padding: 8px 4px; }
.head-login:hover { color: var(--accent); }
.head-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 16px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper); text-decoration: none;
  font-size: 0.9375rem; font-weight: 600; white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out);
}
.head-cta:hover { background: var(--accent); color: var(--paper); }

/* Primary nav. Phone: a toggle in the chrome, the nav drops below as a ruled
   list. The checkbox + :has() pair means it works with JavaScript off. */
.site-nav { display: none; }
.site-nav a {
  font-size: 0.9375rem; font-weight: 500; line-height: 1; text-decoration: none; color: var(--muted);
  transition: color var(--t-fast) var(--ease-out);
}
.site-nav a:hover { color: var(--accent); }
.nav-toggle {
  margin-left: 0; width: 44px; height: 44px; margin-right: -10px;
  display: grid; place-content: center; gap: 6px; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--ink);
  transition: transform var(--t-mid) var(--ease-out), opacity var(--t-fast);
}
.site-head:has(#nav-toggle:checked) .nav-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
.site-head:has(#nav-toggle:checked) .nav-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }
.site-head:has(#nav-toggle:checked) .site-nav {
  display: grid; width: 100%; margin-top: var(--s-md); padding-top: var(--s-xs);
  border-top: 1px solid var(--line);
}
.site-head:has(#nav-toggle:checked) .site-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1.0625rem; }
.site-head:has(#nav-toggle:checked) .site-nav a:last-child { border-bottom: 0; }
.site-head:has(#nav-toggle:checked) .site-nav .nav-sep { margin-top: var(--s-sm); border-top: 1px solid var(--line-firm); }
.nav-toggle-input:focus-visible + .nav-toggle { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

@media (min-width: 1040px) {
  .nav-toggle { display: none; }
  .site-nav { display: flex; align-items: center; gap: var(--s-lg); order: 1; margin-left: auto; }
  .site-nav .nav-sep { margin-left: var(--s-md); padding-left: var(--s-lg); border-left: 1px solid var(--line-firm); }
  .head-actions { order: 2; margin-left: var(--s-lg); }
}

/* ═══ LAYOUT ═════════════════════════════════════════════════════════════ */

.wrap { padding-inline: var(--gutter); max-width: 1180px; margin-inline: auto; }
.section, .cat, .how, .care, .offer, .proof, .faq { padding-block: clamp(56px, 9vw, 112px); }
.rule-top, .how, .care, .proof, .faq { border-top: 1px solid var(--line); }

/* Heading column left, content column right. Stacked on a phone. */
.split { display: grid; gap: var(--s-xl); }
.split > * { min-width: 0; }   /* a scrolling row inside must not widen the page */
@media (min-width: 980px) {
  .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .split-wide { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
}

/* ═══ SHARED COMPONENTS (home + sexual-health) ═══════════════════════════ */

/* Check bullets. */
.checks { list-style: none; margin: var(--s-lg) 0 0; padding: 0; display: grid; gap: 10px; font-size: var(--t-lead); color: var(--ink); }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.checks li::before {
  content: ''; width: 22px; height: 22px; border-radius: 50%; margin-top: 2px;
  background: var(--accent-soft) no-repeat center / 12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d2fcf' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}

/* The render: a rounded panel with the caption under it. */
.render { margin: 0; }
.render img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%;
  border-radius: var(--r-panel); background: oklch(18% 0.06 272);
}
.render figcaption { font-size: 0.75rem; line-height: 1.4; color: var(--faint); margin-top: 10px; max-width: 48ch; }
@media (min-width: 880px) { .render img { aspect-ratio: 5 / 6; } }
/* Wide product shots above the price panel. */
.render-wide { margin-bottom: 24px; }
.render-wide img { aspect-ratio: 3 / 2; background: #f4f4f7; }
@media (min-width: 880px) { .render-wide { max-width: 880px; margin-inline: auto; } .render-wide img { aspect-ratio: 3 / 2; object-position: 50% 50%; } }

/* The compounding disclosure under a selling block. */
.disclosure { font-size: var(--t-micro); line-height: 1.5; color: var(--muted); max-width: 78ch; margin: var(--s-2xl) 0 0; padding-top: var(--s-lg); border-top: 1px solid var(--line); }

/* Three steps. */
.steps3 { list-style: none; margin: var(--s-xl) 0 0; padding: 0; display: grid; gap: var(--s-lg); }
.steps3 li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-md); align-items: start; padding-top: var(--s-md); border-top: 1px solid var(--line); }
.steps3 .n { font-family: var(--display); font-weight: 700; font-size: 1.75rem; line-height: 1; letter-spacing: -0.03em; color: var(--accent); }
.steps3 h3 { font-size: var(--t-h3); font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; }
.steps3 p { margin: 0; color: var(--muted); max-width: 36ch; }
@media (min-width: 880px) {
  .steps3 { grid-template-columns: repeat(3, 1fr); gap: var(--s-2xl); margin-top: var(--s-2xl); }
  .steps3 li { grid-template-columns: 1fr; gap: var(--s-sm); }
}

/* Credential list. */
.care-grid { display: grid; gap: var(--s-xl); }
.cred, .trustlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cred li, .trustlist li { padding: 14px 0; border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--muted); line-height: 1.5; }
.cred li:last-child, .trustlist li:last-child { border-bottom: 1px solid var(--line); }
.cred b { color: var(--ink); font-weight: 600; }
.trustlist b { display: block; color: var(--ink); font-weight: 600; font-size: 1rem; margin-bottom: 2px; }
@media (min-width: 880px) {
  .care-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
}

/* The offer panel. */
.offer { padding-top: 0; }
.offer-panel { background: var(--accent-soft); border-radius: var(--r-panel); padding: clamp(28px, 5vw, 56px); display: grid; gap: var(--s-xl); }
.offer-panel .lead-p { color: var(--ink); }
.offer-act { display: grid; gap: var(--s-xs); justify-items: start; }
@media (min-width: 880px) {
  .offer-panel { grid-template-columns: minmax(0, 1.2fr) auto; align-items: center; gap: var(--s-3xl); }
  .offer-act { justify-items: end; text-align: right; }
}

/* Questions. */
.qa, .qa2 { margin-top: var(--s-xl); border-top: 1px solid var(--line); max-width: 760px; }
.split .qa, .split .qa2 { margin-top: 0; }
.qa details, .qa2 details { border-bottom: 1px solid var(--line); }
.qa summary, .qa2 summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-md);
  padding: 18px 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.005em;
}
.qa summary::-webkit-details-marker, .qa2 summary::-webkit-details-marker { display: none; }
.qa summary::after, .qa2 summary::after {
  content: ''; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft) no-repeat center / 12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d2fcf' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition: transform var(--t-mid) var(--ease-out);
}
.qa details[open] summary::after, .qa2 details[open] summary::after { transform: rotate(45deg); }
.qa details > div, .qa2 details > div { padding: 0 0 20px; color: var(--muted); max-width: 62ch; }
.qa details > div p, .qa2 details > div p { margin: 0; }

/* Coming-soon cards: a scrolling row on the phone, a grid on desktop. */
.soon { padding-top: var(--s-md); }
.soon-row {
  list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
.soon-row::-webkit-scrollbar { display: none; }
.soon-c {
  flex: 0 0 auto; min-width: 150px; scroll-snap-align: start;
  border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; background: var(--paper-sunk);
  display: grid; gap: 2px; color: inherit; text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out);
}
a.soon-c:hover { border-color: var(--ink); }
.soon-n { font-size: 0.9375rem; font-weight: 600; }
.soon-s { font-size: 0.75rem; color: var(--muted); font-weight: 500; }
.soon-a { font-size: 0.75rem; font-weight: 600; color: var(--accent); text-decoration: none; margin-top: 6px; }
.soon-a:hover { text-decoration: underline; text-underline-offset: 3px; }
.soon-note { font-size: 0.75rem; color: var(--faint); margin: var(--s-sm) 0 0; }
.more-row { display: grid; gap: var(--s-xs); }
@media (min-width: 620px) { .more-row { grid-template-columns: repeat(3, 1fr); gap: var(--s-sm); } }
@media (min-width: 880px) {
  .soon-row { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); overflow: visible; }
  .soon-c { min-width: 0; padding: 14px 16px; }
}

/* Trust strip. */
.trust {
  list-style: none; margin: var(--s-lg) 0 0; padding: 14px var(--gutter);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; white-space: nowrap;
  font-size: 0.8125rem; font-weight: 600; color: var(--muted);
}
.trust::-webkit-scrollbar { display: none; }
.trust li { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }
.trust li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (min-width: 880px) {
  .trust { justify-content: center; gap: 48px; margin-top: var(--s-2xl); padding-block: 16px; font-size: 0.875rem; }
}

/* Three ruled claims (the format; the women's indication). */
.claims { display: grid; gap: var(--s-lg); }
/* The format section: the headline on three lines, the claims beside the
   in-hand render. */
.h2-lines span { display: block; }
.format-grid { display: grid; gap: var(--s-xl); }
@media (min-width: 760px) {
  .format-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
  .format-notes { grid-column: 1 / -1; }
}
.render-hand img { aspect-ratio: 4 / 5; border-radius: var(--r-panel); object-fit: cover; }
@media (min-width: 880px) { .render-hand img { aspect-ratio: 4 / 5; } }
.format-notes { margin-top: 0; }
.claim { padding-top: var(--s-md); border-top: 1px solid var(--line); }
.claim h3 { font-size: var(--t-h3); font-weight: 600; margin: 0 0 var(--s-2xs); letter-spacing: -0.01em; }
.claim p { margin: 0; color: var(--muted); max-width: 44ch; }

/* The older three-step block (women's page). */
.steps { display: grid; gap: var(--s-lg); }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-2xl); } }
.step { padding-top: var(--s-md); border-top: 1px solid var(--line); }
.step .n { font-family: var(--display); font-weight: 700; font-size: 1.75rem; line-height: 1; letter-spacing: -0.03em; color: var(--accent); margin: 0 0 var(--s-xs); }
.step h3 { font-size: var(--t-h3); font-weight: 600; margin: 0 0 var(--s-2xs); letter-spacing: -0.01em; }
.step p { margin: 0; color: var(--muted); }

/* A flood section uses the same token contract as the interstitials. */
section[data-flood] { background: var(--flood); color: var(--flood-ink); }
section[data-flood] .muted, section[data-flood] .faint, section[data-flood] .claim p { color: inherit; opacity: 0.78; }
section[data-flood] .claim { border-top-color: color-mix(in oklab, currentColor 22%, transparent); }
section[data-flood] .btn { background: var(--flood-ink); color: var(--flood); }
section[data-flood] .btn:hover { background: var(--ink); color: var(--paper); }

/* ═══ HOME PAGE ══════════════════════════════════════════════════════════ */

/* Hero: copy left, the live tile right. */
.hh { padding-block: clamp(28px, 5vw, 64px) 0; display: grid; gap: clamp(20px, 4vw, 40px); }
.hh-title {
  font-family: var(--display); font-weight: 700; font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4.25rem);
  line-height: 1; letter-spacing: -0.03em; margin: 0; max-width: 14ch; text-wrap: balance;
}
.hh-sub { margin: var(--s-md) 0 0; font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.3125rem); line-height: 1.45; color: var(--muted); max-width: 38ch; font-weight: 500; }
.hh-sub b { color: var(--ink); font-weight: 600; }

.tile {
  position: relative; display: flex; overflow: hidden; isolation: isolate;
  min-height: 236px; border-radius: var(--r-panel); text-decoration: none; color: inherit;
  background: linear-gradient(160deg, var(--tile-a) 0%, var(--tile-b) 58%, var(--tile-c) 100%);
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.tile:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -24px oklch(40% 0.12 275 / 0.5); }
.tile-txt { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-lg); width: 62%; padding: 20px 18px; }
.tile-eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0; }
.tile-h { font-family: var(--display); font-weight: 700; font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1.02; letter-spacing: -0.025em; margin: 6px 0 0; }
.tile-p { font-size: 0.875rem; line-height: 1.4; color: var(--muted); font-weight: 500; margin: 8px 0 0; max-width: 20ch; }
.tile-cta {
  display: inline-flex; align-items: center; gap: 6px; width: max-content;
  background: var(--accent); color: var(--paper); border-radius: var(--r-pill); padding: 11px 16px;
  font-size: 0.9375rem; font-weight: 600;
}
.tile-cta span { transition: transform var(--t-mid) var(--ease-out); }
.tile:hover .tile-cta span { transform: translateX(4px); }
.tile-img {
  position: absolute; right: 0; bottom: 0; top: 0; height: 100%; width: auto; max-width: none;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%);
  mask-image: linear-gradient(to right, transparent 0, #000 30%);
}
@media (min-width: 880px) {
  .hh { grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr); align-items: center; gap: clamp(40px, 6vw, 96px); padding-block: clamp(40px, 6vw, 88px) 0; }
  .hh-sub { margin-top: var(--s-lg); }
  .tile { min-height: 400px; }
  .tile-txt { width: 58%; padding: 32px 28px; }
  .tile-p { font-size: 1rem; }
}

/* Category block. */
.cat-grid { display: grid; gap: var(--s-xl); }
@media (min-width: 880px) {
  .cat-grid { grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
}
.how .btn-p { margin-top: var(--s-xl); }

/* Proof. */
.proof { display: grid; gap: var(--s-lg); }
.proof-fig {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.04em; line-height: 0.9;
  font-size: clamp(3.5rem, 2.5rem + 6vw, 7rem); margin: 0; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 880px) {
  .proof { grid-template-columns: auto minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
}

/* ═══ SEXUAL-HEALTH PAGE ═════════════════════════════════════════════════ */

/* The step up: heading + lead + the split image, then the comparison table
   full width beneath them. */
.up-top { display: grid; gap: var(--s-xl); }
@media (min-width: 980px) {
  .up-top { grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
}
/* Chocolate left (smaller, a little desaturated), treatment right (bigger,
   brighter): two panels in one rounded tile so the eye lands on the vial.
   The render's lavender is the tile hue, so the chocolate panel is a tint
   of the same hue and the halves read as one object. */
.duo { position: relative; margin: 0; }
.duo-frame { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); border-radius: var(--r-panel); overflow: hidden; aspect-ratio: 5 / 4; background: var(--tile-a); }
.duo-choc { position: relative; display: grid; place-items: center; padding: 14% 10% 12%; background: linear-gradient(180deg, oklch(97% 0.012 282) 0%, oklch(93% 0.03 280) 100%); }
.duo-choc img { width: 100%; height: 100%; min-width: 0; object-fit: contain; filter: saturate(0.55) brightness(1.02); opacity: 0.88; transform: scale(0.74); }
.duo-max { position: relative; min-width: 0; }
.duo-max img { width: 100%; height: 100%; min-width: 0; object-fit: cover; object-position: 50% 50%; display: block; }
.duo-chip {
  position: absolute; z-index: 2; top: 12px; left: 12px;
  padding: 5px 10px; border-radius: var(--r-pill); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em;
  background: color-mix(in oklab, var(--paper) 70%, transparent); color: var(--muted); backdrop-filter: blur(6px);
}
.duo-max .duo-chip { background: var(--ink); color: var(--paper); }
.duo figcaption { font-size: 0.75rem; line-height: 1.4; color: var(--faint); margin-top: 10px; max-width: 48ch; }

.cmp-wrap { margin-top: var(--s-2xl); }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-small); line-height: 1.3; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 12px 14px; border-top: 1px solid var(--line); }
.cmp thead th { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--muted); border-top: 0; padding-top: 0; padding-bottom: 12px; vertical-align: bottom; }
.cmp thead th:first-child { padding-left: 0; }
.cmp tbody th { font-weight: 600; color: var(--ink); padding-left: 0; padding-top: 16px; width: 22%; }
.cmp td { color: var(--ink); width: 26%; }
.cmp td.is-rx { background: var(--accent-soft); font-weight: 600; }
.cmp thead th.is-rx { color: var(--accent); background: var(--accent-soft); border-radius: var(--r-control) var(--r-control) 0 0; padding-top: 14px; }
.cmp tbody tr:last-child td.is-rx { border-radius: 0 0 var(--r-control) var(--r-control); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td:not(.is-rx) { border-bottom: 1px solid var(--line-firm); }
.cmp-chip { display: inline-block; vertical-align: middle; margin-right: 10px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--accent); color: var(--paper); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: none; }
.cmp sup { font-size: 0.7em; }
/* Each cell: a mark (check / cross / dash on a soft disc), then a short
   label and an optional faint second line. The mark is what gets scanned;
   the words confirm it. */
.cmp td { display: table-cell; }
.cmp td > .mk { float: left; margin-right: 10px; }
.mk { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; }
.mk svg { width: 18px; height: 18px; display: block; }
.mk-yes { background: var(--ok-soft); color: var(--ok); }
.mk-no { background: var(--no-soft); color: var(--no); }
.mk-part { background: var(--part-soft); color: var(--part); }
.cmp td.is-rx .mk-yes { background: var(--ok); color: #fff; }
.mk-text { display: block; overflow: hidden; padding-top: 3px; }
.mk-label { display: block; font-weight: 600; }
.cmp td:not(.is-rx) .mk-label { font-weight: 500; }
.mk-sub { display: block; margin-top: 2px; font-size: 0.75rem; line-height: 1.35; font-weight: 400; color: var(--muted); }
.cmp-short, .mk-short { display: none; }
@media (max-width: 759px) {
  /* Phone: the classic four-column comparison (Hims / Ro / BlueChew): the
     feature label on the left, one icon per column, one line per row, the
     MAX column a single tinted band from the header to the last row. The
     per-cell words are desktop-only, except a tiny second line under the two
     footnoted MAX figures so the claims keep their markers. */
  .cmp { table-layout: fixed; font-size: 0.8125rem; }
  .cmp thead th:first-child { display: table-cell; width: 37%; padding: 0; }
  .cmp thead th { font-size: 0.625rem; letter-spacing: 0.06em; padding: 0 4px 8px; text-align: center; vertical-align: bottom; line-height: 1.2; }
  .cmp thead th.is-rx { padding: 10px 4px 8px; border-radius: var(--r-control) var(--r-control) 0 0; }
  .cmp-long { display: none; }
  .cmp-short { display: block; }
  .cmp-chip { display: block; width: max-content; margin: 0 auto 5px; padding: 2px 7px; font-size: 0.625rem; }
  .cmp tbody th { width: auto; padding: 0 6px 0 0; font-size: 0.8125rem; line-height: 1.2; vertical-align: middle; height: 44px; }
  .cmp tbody td { width: 21%; padding: 0 2px; text-align: center; vertical-align: middle; height: 44px; }
  .cmp td > .mk { float: none; margin: 0 auto; }
  .mk { width: 24px; height: 24px; }
  .mk svg { width: 16px; height: 16px; }
  .mk-text { display: none; }
  .cmp td.is-rx .mk-short { display: block; margin-top: 2px; font-size: 0.625rem; line-height: 1.1; font-weight: 600; color: var(--accent-deep); }
  .cmp td.is-rx .mk-short sup { font-size: 0.8em; }
  /* The band: no row rule inside it, a hairline round the outside, rounded ends. */
  .cmp td.is-rx, .cmp thead th.is-rx { border-top: 0; border-inline: 1px solid var(--line-firm); }
  .cmp thead th.is-rx { border-top: 1px solid var(--line-firm); }
  .cmp tbody tr:last-child td.is-rx { border-bottom: 1px solid var(--line-firm); border-radius: 0 0 var(--r-control) var(--r-control); }
  .cmp tbody tr:last-child th, .cmp tbody tr:last-child td:not(.is-rx) { border-bottom: 1px solid var(--line-firm); }
}
.pcard sup, .footnotes sup { font-size: 0.7em; }
.ptile-frame {
  position: relative; overflow: hidden; border-radius: var(--r-panel);
  background: linear-gradient(180deg, oklch(10% 0.02 275) 0%, oklch(14% 0.08 272) 55%, oklch(20% 0.11 270) 100%);
  aspect-ratio: 4 / 5;
}
.ptile-frame img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; display: block; border-radius: 0; }
.ptile-chip {
  position: absolute; z-index: 2; left: 14px; top: 14px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--paper) 16%, transparent); backdrop-filter: blur(6px);
  color: var(--paper); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
}
@media (min-width: 980px) { .ptile-frame { aspect-ratio: 5 / 6; } }
.footnotes { margin: var(--s-lg) 0 0; max-width: 72ch; font-size: 0.75rem; line-height: 1.5; color: var(--faint); }
.footnotes p { margin: 0 0 var(--s-xs); }

/* Segmentation pills. */
/* The goal buttons: three big pills under "What do you want?", one
   selected at a time, each highlighting the matching product card below.
   Emoji by request (Ryan, 2026-10-16). Stacked on a phone, a row on wide. */
.goal { margin-top: var(--s-lg); }
.goal-q { font-size: var(--t-lead); font-weight: 600; margin: 0 0 var(--s-sm); color: var(--ink); }
.goal-row { display: grid; gap: var(--s-xs); }
.goal-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px;
  padding: 12px 18px; border-radius: var(--r-pill); border: 2px solid var(--line-firm); background: var(--paper);
  font: inherit; font-size: 1.0625rem; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.goal-btn:hover { border-color: var(--ink); }
.goal-btn:active { transform: scale(0.985); }
.goal-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.goal-btn[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.goal-emoji { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); font-size: 1.25rem; line-height: 1; }
.goal-btn[aria-pressed='true'] .goal-emoji { background: color-mix(in oklab, var(--paper) 18%, transparent); }
@media (min-width: 760px) {
  .goal-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-sm); }
  .goal-btn { font-size: 1.125rem; min-height: 64px; padding: 12px 20px; }
}
.fit-note { font-size: var(--t-micro); color: var(--muted); margin: var(--s-md) 0 0; max-width: 48ch; }

/* Product cards. */
.pcards { display: grid; gap: var(--s-sm); margin-top: var(--s-xl); }
@media (min-width: 820px) { .pcards { grid-template-columns: repeat(3, 1fr); gap: var(--s-md); } }
.pcard {
  display: grid; grid-template-rows: auto auto 1fr auto auto; gap: var(--s-sm);
  padding: var(--s-lg); border-radius: var(--r-panel); background: var(--paper-sunk);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow var(--t-mid) var(--ease-out), background var(--t-mid) var(--ease-out);
}
.pcard.is-fit { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.pcard-kind { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0; }
.pcard-name { font-family: var(--display); font-weight: 700; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); line-height: 1; letter-spacing: -0.025em; margin: 0; }
.pcard-name small { display: block; font-family: var(--body); font-weight: 500; font-size: 0.5em; letter-spacing: 0; color: var(--muted); margin-bottom: 4px; }
.pcard p { margin: 0; color: var(--muted); font-size: var(--t-small); }
.pcard-price { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 0; padding-top: var(--s-sm); border-top: 1px solid var(--line-firm); }
.pcard-act { display: flex; align-items: center; gap: var(--s-md); flex-wrap: wrap; }
.pcard-isi { font-size: var(--t-micro); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.pcard-isi:hover { color: var(--accent); }

/* ═══ ISI + FOOTER (on every page) ═══════════════════════════════════════ */

.isi {
  background: var(--paper-sunk); border-top: 1px solid var(--line);
  padding-block: var(--s-2xl); font-size: 0.8125rem; line-height: 1.6;
}
.isi h2 { font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); margin: 0 0 var(--s-md); }
.isi h3 { font-size: 0.8125rem; font-weight: 700; margin: var(--s-lg) 0 var(--s-2xs); }
.isi p, .isi li { color: var(--muted); max-width: 78ch; }
.isi p { margin: 0 0 var(--s-sm); }
.isi ul { margin: 0 0 var(--s-sm); padding-left: 1.1em; }
.isi .emphatic { color: var(--ink); }
.isi-key-head { max-width: 78ch; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2xs) var(--s-lg); margin-bottom: var(--s-md); }
.isi-key-head h2 { margin: 0; }
.isi-key-head a, [data-isi="key"] a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.isi-key-head a { display: inline-block; padding-block: 4px; }
[data-isi="key"] .isi-key-compounding { border-top: 1px solid var(--line); margin-top: var(--s-md); padding-top: var(--s-md); }

.site-foot { padding-block: var(--s-xl) var(--s-2xl); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s-md); margin-bottom: var(--s-md); }
.foot-links a { color: var(--muted); text-decoration: none; font-size: var(--t-small); }
.foot-links a:hover { color: var(--accent); }

/* ═══ VIDEO HERO ═════════════════════════════════════════════════════════
   The one element kept from the earlier design: a full-bleed film with
   the type seated at the foot of the frame. The film is graded dark with a
   hard luma ceiling, so paper type sits on it with only a weak lift at the
   bottom; a global scrim would muddy the shot. The base rules serve the
   women's hero (two bottom-aligned columns); .vhero-night is the men's
   hero (one left stack). */

.vhero {
  position: relative;
  min-height: min(86dvh, 760px);
  color: var(--paper);
  display: grid;
  grid-template-rows: 1fr auto;
  isolation: isolate;
  background: var(--ink);
  overflow: hidden;
}
.vhero-media { position: absolute; inset: 0; z-index: 0; background: var(--ink) 50% 40% / cover no-repeat; }
@media (min-width: 760px) {
  .vhero-media { background-position: 62% 50%; }
}
.vhero-video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 40%; }
@media (min-width: 900px) {
  .vhero { min-height: min(94dvh, 900px); }
  .vhero-video { object-position: 50% 42%; }
}
.vhero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top,
      color-mix(in oklab, var(--ink) 72%, transparent) 0%,
      color-mix(in oklab, var(--ink) 34%, transparent) 26%,
      transparent 58%);
}
@media (min-width: 900px) {
  .vhero-media::after {
    background: linear-gradient(to top,
        color-mix(in oklab, var(--ink) 62%, transparent) 0%,
        color-mix(in oklab, var(--ink) 22%, transparent) 28%,
        transparent 56%);
  }
}
.vhero-inner { position: relative; z-index: 1; display: flex; align-items: flex-end; padding: var(--s-4xl) var(--gutter) var(--s-xl); }
.vhero-grid { width: 100%; max-width: 1180px; margin-inline: auto; display: grid; gap: var(--s-xl); }
@media (min-width: 900px) {
  .vhero-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.78fr); gap: var(--s-4xl); align-items: end; }
}
.vhero-lead, .vhero-tail, .vhero-stack { position: relative; }
.vhero-lead::before, .vhero-tail::before, .vhero-stack::before {
  content: ''; position: absolute; inset: -15vh -12vw -12vh -12vw; pointer-events: none; z-index: -1;
  background: radial-gradient(70% 55% at 30% 62%,
    color-mix(in oklab, var(--ink) 34%, transparent) 0%,
    color-mix(in oklab, var(--ink) 14%, transparent) 45%,
    transparent 72%);
}
.vhero-trust { font-size: var(--t-micro); font-weight: 600; color: var(--paper); opacity: 0.8; margin: 0 0 var(--s-xs); }
.vhero-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper); opacity: 0.78; margin: 0 0 var(--s-md); }
.vhero-title {
  font-family: var(--display); font-weight: 700; font-size: var(--t-h1);
  line-height: 0.98; letter-spacing: -0.035em; margin: 0; max-width: 11ch; text-wrap: balance; color: var(--paper);
}
.vhero-tail { display: grid; gap: var(--s-md); justify-items: start; }
.vhero-sub {
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.25rem); line-height: 1.5; font-weight: 500;
  max-width: 38ch; margin: 0; color: color-mix(in oklab, var(--paper) 86%, var(--ink));
}
.vhero-tail .btn { width: 100%; max-width: 340px; background: var(--paper); color: var(--ink); }
.vhero-tail .btn:hover { background: var(--accent); color: var(--paper); }
.vhero-price { margin: 0; display: flex; align-items: baseline; gap: var(--s-xs); max-width: 340px; }
.vhero-price-fig { font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1; letter-spacing: -0.03em; }
.vhero-price-unit { font-size: 0.75rem; font-weight: 500; line-height: 1.5; color: color-mix(in oklab, var(--paper) 70%, var(--ink)); }

/* The rail under the women's film: a trust strip on white. */
.vhero-rail {
  position: relative; z-index: 1; margin: 0; padding: 14px var(--gutter); list-style: none;
  display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; white-space: nowrap;
  border-top: 1px solid var(--line); background: var(--paper);
  font-size: 0.8125rem; font-weight: 600; color: var(--muted);
}
.vhero-rail::-webkit-scrollbar { display: none; }
.vhero-rail li { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }
.vhero-rail li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.vhero-rail sup { font-size: 0.8em; }
@media (min-width: 900px) { .vhero-rail { justify-content: center; gap: 48px; flex-wrap: wrap; white-space: normal; overflow: visible; } }

@media (prefers-reduced-motion: reduce) { .vhero-video { display: none; } }

/* ── The men's hero ──────────────────────────────────────────────────── */
.vhero-night {
  --film-ink: #04070f;                 /* the black in the footage: cold, blue-black */
  background: var(--film-ink);
  min-height: calc(100svh - var(--announce-h) - 56px);
  grid-template-rows: 1fr auto;
}
@media (min-width: 900px) { .vhero-night { min-height: min(100svh - var(--announce-h), 880px); } }

.vhero-night .vhero-video { object-position: 50% 30%; }
/* On wide screens the film is run wider than the frame and anchored right, so
   the couple sit in the right two-thirds and the stack lands on the dark
   left third. */
@media (min-width: 900px) {
  .vhero-night .vhero-video { width: 118%; left: auto; right: 0; position: absolute; top: 0; object-position: 60% 40%; }
  .vhero-night .vhero-media { background-position: 100% 40%; background-size: 118% auto; }
}
.vhero-night .vhero-media::after {
  background: linear-gradient(to top,
      color-mix(in oklab, var(--film-ink) 84%, transparent) 0%,
      color-mix(in oklab, var(--film-ink) 44%, transparent) 30%,
      transparent 62%);
}
@media (min-width: 900px) {
  .vhero-night .vhero-media::after {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--film-ink) 76%, transparent) 0%,
      color-mix(in oklab, var(--film-ink) 30%, transparent) 32%,
      transparent 60%);
  }
}

/* Room for the floating header at the top; the stack at the foot. */
.vhero-night .vhero-inner { padding-top: calc(var(--s-4xl) + 48px); padding-bottom: var(--s-xl); }
@media (min-width: 900px) { .vhero-night .vhero-inner { padding-bottom: var(--s-2xl); } }
.vhero-stack { width: 100%; max-width: 1180px; margin-inline: auto; display: grid; gap: var(--s-md); justify-items: start; }
.vhero-stack > * { max-width: 640px; }
.vhero-stack::before { inset: -14vh -10vw -14vh -14vw; background: radial-gradient(60% 60% at 24% 70%,
    color-mix(in oklab, var(--film-ink) 46%, transparent) 0%,
    color-mix(in oklab, var(--film-ink) 18%, transparent) 50%,
    transparent 76%); }

/* The social-proof pill: white, dark text, gold stars inline before the
   line, one line always (Ryan, 2026-10-16). On the film it shares its width
   with the yellow button below it (--hero-w); on a phone both run the full
   content width and the type steps down with the viewport rather than wrap. */
.vhero-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 var(--s-xs);
  padding: 9px 16px; border-radius: var(--r-pill); line-height: 1.3; white-space: nowrap;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.05), 0 12px 28px -14px rgb(0 0 0 / 0.5);
  font-size: var(--t-micro); font-weight: 600;
}
.vhero-pill b { font-weight: 800; }
.pill-stars { color: oklch(76% 0.165 82); letter-spacing: 0.03em; font-size: 1em; line-height: 1; }
.hh-pill { box-shadow: inset 0 0 0 1px var(--line-firm), 0 10px 24px -18px rgb(0 0 0 / 0.35); }
@media (max-width: 759px) {
  /* The line is ~32em of Schibsted; the font is sized to the viewport so it
     never wraps and never overflows (10px at 390, 9px at 360). */
  .vhero-pill { width: 100%; padding: 8px 9px; gap: 5px; font-size: clamp(0.5625rem, calc((100vw - 64px) / 32.4), 0.8125rem); }
  .vhero-pill .pill-stars { font-size: 0.85em; letter-spacing: 0; }
}
.vhero-pill::before { content: none; }
.vhero-night .vhero-title { max-width: 12ch; }
.vhero-support {
  font-family: var(--display); font-weight: 500; font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2rem);
  line-height: 1.1; letter-spacing: -0.015em; margin: 0; color: var(--paper); opacity: 0.94;
}
.vhero-night .vhero-sub { margin-top: var(--s-xs); }
/* The hero button is the yellow the pill used to be, and exactly the pill's
   width: both are capped at --hero-w so they read as one column. */
.vhero-night { --hero-w: 480px; }
.vhero-night .vhero-pill { width: 100%; max-width: var(--hero-w); }
.vhero-cta { width: 100%; max-width: var(--hero-w, 360px); margin-top: var(--s-xs); background: #ffd84d; color: #17130a; min-height: 56px; }
.vhero-cta:hover { background: #f2c800; color: #17130a; }
.vhero-micro { margin: 0; width: 100%; max-width: var(--hero-w, 360px); text-align: center; font-size: var(--t-micro); font-weight: 500; color: color-mix(in oklab, var(--paper) 74%, var(--ink)); }

/* ── The four actives, in the hero ───────────────────────────────────
   Between the support line and the button (Ryan, 2026-10-16). Translucent
   rows straight on the film: a tinted circular icon chip, a two-word
   headline, one line naming the molecule and what it does, hairline
   dividers. Two columns on a wide screen so the stack stays inside the
   film's height. The tints are soft hues that sit with the indigo accent;
   the stroke is a darker cut of the same hue so the chip reads at 18px. */
.vhero-actives { list-style: none; margin: var(--s-xs) 0 0; padding: 0; width: 100%; max-width: 560px; display: grid; }
.vhero-actives li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid color-mix(in oklab, var(--paper) 18%, transparent); }
.vhero-actives li:first-child { border-top: 0; padding-top: 0; }
.vhero-actives h2 { font-family: var(--body); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 1px; color: var(--paper); }
.vhero-actives p { margin: 0; font-size: 0.875rem; line-height: 1.4; color: color-mix(in oklab, var(--paper) 78%, var(--ink)); max-width: 40ch; }
.vhero-actives p b { font-weight: 600; color: var(--paper); }
.vhero-actives sup { font-size: 0.7em; }
.actives-chip {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--chip); color: var(--chip-ink);
}
.actives-chip svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.actives-chip.is-brain { --chip: oklch(93% 0.05 300); --chip-ink: oklch(46% 0.2 300); }
.actives-chip.is-bolt  { --chip: oklch(94% 0.06 155); --chip-ink: oklch(45% 0.14 155); }
.actives-chip.is-drop  { --chip: oklch(94% 0.045 20); --chip-ink: oklch(52% 0.19 22); }
.actives-chip.is-clock { --chip: oklch(94% 0.04 245); --chip-ink: oklch(46% 0.17 255); }
.vhero-foot { margin: 0; width: 100%; max-width: var(--hero-w, 360px); text-align: center; font-size: 0.6875rem; color: color-mix(in oklab, var(--paper) 60%, var(--ink)); }
.vhero-foot sup { font-size: 0.8em; }
.vhero-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 900px) {
  .vhero-actives { max-width: 640px; grid-template-columns: 1fr 1fr; column-gap: var(--s-xl); margin-top: var(--s-xs); }
  .vhero-actives li { padding: 8px 0; }
  .vhero-actives li:nth-child(2) { border-top: 0; padding-top: 0; }
  .vhero-actives h2 { font-size: 1.0625rem; }
}
/* The hero stack has more in it on this page; a touch less air at the top. */
@media (max-width: 899px) {
  .vhero-night .vhero-inner { padding-top: calc(var(--s-4xl) + 24px); }
  .vhero-night .vhero-sub { font-size: 1rem; }
}

/* Three icon lines on white under the film. */
.vhero-icons {
  position: relative; z-index: 1; list-style: none; margin: 0;
  padding: 14px var(--gutter);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-sm);
  border-top: 1px solid var(--line); background: var(--paper);
  font-size: 0.8125rem; font-weight: 600; color: var(--ink);
}
.vhero-icons li { display: flex; align-items: center; gap: 8px; line-height: 1.25; }
.vhero-icons svg { flex: 0 0 auto; width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) {
  .vhero-icons { justify-content: center; grid-template-columns: repeat(3, auto); gap: var(--s-3xl); font-size: 0.875rem; padding-block: 16px; }
}

/* The header floats over the film on this page only. Sticky is given up
   here on purpose: a translucent bar tracking a dark film is a frame, and a
   hero with a frame is a card. */
body:has(.vhero-night) { position: relative; }
body:has(.vhero-night) .site-head {
  position: absolute; top: var(--announce-h); left: 0; right: 0;
  background: transparent; border-bottom: 0; backdrop-filter: none; color: var(--paper);
}
body:has(.vhero-night) .site-head .lockup img { filter: invert(1) hue-rotate(180deg); }
body:has(.vhero-night) .site-head .lockup-rx,
body:has(.vhero-night) .site-head .head-login,
body:has(.vhero-night) .site-head .site-nav a { color: var(--paper); }
body:has(.vhero-night) .site-head .site-nav a { opacity: 0.84; }
body:has(.vhero-night) .site-head .site-nav a:hover { opacity: 1; }
body:has(.vhero-night) .site-head .nav-toggle span { background: var(--paper); }
body:has(.vhero-night) .site-head .head-cta { background: var(--paper); color: var(--ink); }
body:has(.vhero-night) .site-head .head-cta:hover { background: var(--accent); color: var(--paper); }
body:has(.vhero-night) .site-head:has(#nav-toggle:checked) { background: var(--ink); }
body:has(.vhero-night) .site-head:has(#nav-toggle:checked) .site-nav,
body:has(.vhero-night) .site-head:has(#nav-toggle:checked) .site-nav a {
  border-color: color-mix(in oklab, var(--paper) 22%, transparent);
}
@media (min-width: 1040px) {
  body:has(.vhero-night) .site-head .site-nav .nav-sep { border-left-color: color-mix(in oklab, var(--paper) 40%, transparent); }
}

/* ═══ VISIT (the intake) ═════════════════════════════════════════════════ */

.trustbar {
  margin: 0; padding: 8px var(--gutter);
  background: var(--paper-sunk); color: var(--muted); border-bottom: 1px solid var(--line);
  font-size: 0.75rem; font-weight: 600; text-align: center;
}

.quiz-head { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); }
.quiz-head-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-sm); padding: var(--s-xs) var(--gutter); }
.quiz-head-inner .lockup { justify-self: center; }
.quiz-count { font-size: var(--t-micro); font-weight: 600; color: var(--muted); justify-self: end; margin: 0; font-variant-numeric: tabular-nums; }
.btn-back {
  justify-self: start; background: none; border: 0; padding: var(--s-xs) var(--s-xs) var(--s-xs) 0;
  font-family: var(--body); font-size: 0.875rem; font-weight: 600; color: var(--muted); cursor: pointer; min-height: 44px;
}
.btn-back:hover { color: var(--accent); }
.btn-back[hidden] { visibility: hidden; display: block; }

.bar { height: 3px; background: var(--line); }
.bar > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width var(--t-slow) var(--ease-out); }

.screen {
  padding: var(--s-xl) var(--gutter) var(--s-2xl);
  max-width: 660px; margin-inline: auto;
  animation: rise var(--t-slow) var(--ease-out) both;
}
/* Only reserve room for the sticky action bar on screens that actually have one. */
.screen:has(.actionbar) { padding-bottom: 176px; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.q {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.5rem); line-height: 1.05;
  letter-spacing: -0.025em; margin: 0 0 var(--s-md); text-wrap: balance;
}
/* quiz.js moves focus to the question for screen readers; no ring on a heading. */
.q:focus, .q:focus-visible { outline: none; }
.q-sub { margin: 0 0 var(--s-lg); color: var(--muted); max-width: 52ch; }
.q-prompt { margin: 0 0 var(--s-md); font-size: 1.0625rem; font-weight: 500; }

.q-help {
  margin: var(--s-lg) 0 0; padding: var(--s-md);
  background: var(--accent-soft); border-radius: var(--r-control);
  font-size: var(--t-small); color: var(--muted); max-width: 54ch;
}
.q-help strong { color: var(--ink); font-weight: 600; }

/* Options: full-width rows with a hairline ring. */
.opts { display: grid; gap: var(--s-xs); }
.opt {
  display: flex; align-items: center; gap: var(--s-sm);
  min-height: 60px; padding: var(--s-sm) var(--s-md);
  border-radius: var(--r-control);
  box-shadow: inset 0 0 0 1px var(--line-firm);
  background: var(--paper); cursor: pointer;
  transition: box-shadow var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.opt:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt .mark {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px var(--line-firm);
  display: grid; place-items: center;
  transition: background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.opt[data-shape='radio'] .mark { border-radius: 50%; }
.opt .mark::after { content: ''; width: 10px; height: 10px; border-radius: inherit; background: var(--paper); transform: scale(0); transition: transform var(--t-fast) var(--ease-out); }
.opt .label { flex: 1; font-weight: 500; }
.opt .note { display: block; font-size: var(--t-micro); color: var(--accent); margin-top: 2px; font-weight: 500; }
.opt .band { font-size: var(--t-micro); font-weight: 500; color: var(--faint); white-space: nowrap; }
.opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.opt:has(input:checked) .mark { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.opt:has(input:checked) .mark::after { transform: scale(1); }
.opt:has(input:checked) .band { color: var(--muted); }
.opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

.opt-group { margin-bottom: var(--s-lg); }
.opt-group > h2 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s-xs); }

.field { display: grid; gap: var(--s-2xs); margin-bottom: var(--s-md); }
.field label { font-size: var(--t-micro); font-weight: 600; color: var(--muted); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 1.0625rem;
  padding: var(--s-sm) var(--s-md); min-height: 56px;
  border: 0; border-radius: var(--r-control);
  box-shadow: inset 0 0 0 1px var(--line-firm);
  background: var(--paper); color: var(--ink); width: 100%;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.field input:disabled, .field textarea:disabled { opacity: 0.4; }
.field-row { display: grid; gap: var(--s-md); }
@media (min-width: 520px) { .field-row { grid-template-columns: 1fr 1fr; } }

.consent {
  display: flex; gap: var(--s-sm); align-items: flex-start;
  padding: var(--s-md); border-radius: var(--r-control);
  box-shadow: inset 0 0 0 1px var(--line-firm);
  margin: var(--s-xs) 0; font-size: var(--t-small); color: var(--muted); cursor: pointer;
}
.consent input { margin: 2px 0 0; width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--accent); }
.consent:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* Sticky action bar: the primary action stays in thumb reach at all times. */
.actionbar {
  position: fixed; inset: auto 0 0 0; z-index: 35;
  padding: var(--s-md) var(--gutter) calc(var(--s-md) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--paper) 64%, transparent);
  display: grid; gap: var(--s-xs);
}
.actionbar > * { max-width: 660px; margin-inline: auto; width: 100%; }
.actionbar .hint { text-align: center; font-size: 0.75rem; font-weight: 500; color: var(--muted); margin: 0; }

/* Interstitials: a full flood. */
.interstitial {
  background: var(--flood); color: var(--flood-ink);
  min-height: calc(100dvh - 72px);
  padding: var(--s-2xl) var(--gutter) 168px;
  animation: rise var(--t-slow) var(--ease-out) both;
}
.interstitial .inner { max-width: 660px; margin-inline: auto; }
.interstitial .i-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); line-height: 1.02; letter-spacing: -0.03em;
  margin: 0 0 var(--s-lg); text-wrap: balance;
}
.interstitial p { max-width: 46ch; }
.interstitial .lead { font-size: 1.1875rem; line-height: 1.5; margin: 0 0 var(--s-md); }
.interstitial .i-tail { margin-top: var(--s-xl); font-weight: 600; }
.interstitial .foot { margin-top: var(--s-xl); font-size: var(--t-micro); opacity: 0.72; max-width: 56ch; }
.interstitial .actionbar { background: linear-gradient(to top, var(--flood) 64%, transparent); }
.interstitial .actionbar .btn { background: var(--flood-ink); color: var(--flood); }
.interstitial .actionbar .btn:hover { background: var(--ink); color: var(--paper); }

.i-stack { display: grid; gap: var(--s-sm); margin-top: var(--s-xl); }
.i-stack-row { padding-top: var(--s-sm); border-top: 1px solid color-mix(in oklab, currentColor 24%, transparent); }
.i-stack-row .k { display: block; font-weight: 600; }
.i-stack-row .v { display: block; opacity: 0.78; font-size: var(--t-small); }

.i-cards, .i-blocks { display: grid; gap: var(--s-lg); margin-top: var(--s-xl); }
@media (min-width: 680px) { .i-cards { grid-template-columns: 1fr 1fr; } }
.i-card, .i-block { padding-top: var(--s-sm); border-top: 1px solid color-mix(in oklab, currentColor 24%, transparent); }
.i-card .k { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 var(--s-2xs); opacity: 0.8; }
.i-block .k { font-family: var(--display); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 var(--s-2xs); }
.i-card .v, .i-block .v { margin: 0; opacity: 0.84; }

.i-steps { display: grid; gap: var(--s-lg); margin-top: var(--s-xl); }
.i-step { display: grid; grid-template-columns: auto 1fr; gap: var(--s-md); align-items: start; }
.i-step .n { font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1; opacity: 0.6; margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.i-step .k { font-weight: 600; margin: 0; }
.i-step .v { margin: var(--s-2xs) 0 0; opacity: 0.8; font-size: var(--t-small); }

/* Social-proof slots. The placeholder flag is deliberately loud so nobody
   ships it by accident. */
.i-quote { margin: var(--s-xl) 0 0; padding-top: var(--s-md); border-top: 1px solid color-mix(in oklab, currentColor 24%, transparent); }
.i-quote blockquote { margin: 0 0 var(--s-xs); font-size: 1.25rem; line-height: 1.45; max-width: 34ch; font-weight: 500; }
.i-quote figcaption { font-size: var(--t-micro); font-weight: 500; opacity: 0.72; }
.i-placeholder {
  display: inline-block; margin: 0 0 var(--s-sm);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--r-pill); background: var(--accent); color: var(--paper);
}

/* Disqualification. */
.dq { padding: var(--s-2xl) var(--gutter) var(--s-3xl); max-width: 640px; margin-inline: auto; }
.dq .lead { margin: 0 0 var(--s-md); }
.reason {
  margin: var(--s-xl) 0 var(--s-md); padding: var(--s-md) var(--s-lg);
  background: var(--paper-sunk); border-radius: var(--r-control); box-shadow: inset 0 0 0 1px var(--line);
}
.reason .k { font-weight: 600; margin: 0 0 var(--s-2xs); }

/* Results. */
.verdict { padding: var(--s-2xl) var(--gutter) 168px; max-width: 660px; margin-inline: auto; }
.meter { margin: var(--s-xl) 0; }
.meter-figure {
  font-family: var(--display); font-weight: 700; font-size: clamp(2.75rem, 12vw, 4.5rem);
  line-height: 1; letter-spacing: -0.035em; color: var(--accent); margin: 0; font-variant-numeric: tabular-nums;
}
.meter-hero .meter-figure { font-size: clamp(4.5rem, 22vw, 9rem); letter-spacing: -0.04em; }
.meter-track { height: 10px; background: var(--line); border-radius: var(--r-pill); overflow: hidden; margin-top: var(--s-sm); }
.meter-hero .meter-track { height: 14px; }
.meter-fill { height: 100%; background: var(--accent); border-radius: inherit; width: 0; transition: width 900ms var(--ease-out); }
.meter-note { margin-top: var(--s-xs); max-width: 56ch; }

.playback { border-top: 1px solid var(--line); margin: 0; }
.playback-row { display: grid; gap: 2px; padding: var(--s-sm) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 560px) { .playback-row { grid-template-columns: 210px 1fr; gap: var(--s-md); } }
.playback-row dt { font-size: var(--t-micro); font-weight: 600; color: var(--muted); }
.playback-row dd { margin: 0; }

/* Persistent visit footer, present on every screen of the intake. */
.visit-foot {
  margin: 0; padding: var(--s-md) var(--gutter) var(--s-lg);
  max-width: 660px; margin-inline: auto;
  font-size: var(--t-micro); color: var(--faint); text-align: center;
}

/* "Keep me posted" on /visit: optional, quiet, in the same column as the visit. */
.keep-posted {
  max-width: 660px; margin-inline: auto; padding: var(--s-lg) var(--gutter) 0;
}
.keep-posted-h { font-size: var(--t-small); font-weight: 600; margin: 0 0 var(--s-sm); }
.keep-posted .consent { margin-bottom: var(--s-md); }
.keep-posted-status { margin: var(--s-xs) 0 0; font-size: var(--t-small); color: var(--muted); }
/* Stays in the accessibility tree while empty (a live region that appears
   from display:none can miss its first announcement); it only collapses. */
.keep-posted-status { outline: none; }
.keep-posted-status:empty { margin: 0; }
.keep-posted-noscript {
  max-width: 660px; margin: var(--s-lg) auto 0; padding: 0 var(--gutter);
  font-size: var(--t-micro); color: var(--faint);
}

/* Flood continuity: when an interstitial is on screen the quiz chrome takes
   its colour so the sticky header and the overscroll do not break the field.
   The BODY stays paper, so the ISI and the footer are never tinted. */
body[data-flood]:not([data-flood='']) .quiz-head { background: var(--flood); border-bottom-color: color-mix(in oklab, var(--flood-ink) 18%, transparent); }
body[data-flood]:not([data-flood='']) .quiz-count,
body[data-flood]:not([data-flood='']) .btn-back { color: color-mix(in oklab, var(--flood-ink) 62%, transparent); }
body[data-flood]:not([data-flood='']) .bar { background: color-mix(in oklab, var(--flood-ink) 20%, transparent); }
body[data-flood]:not([data-flood='']) .bar > span { background: var(--flood-ink); }
body[data-flood]:not([data-flood='']) .visit-foot { color: color-mix(in oklab, var(--flood-ink) 55%, transparent); }
body[data-flood='indigo'] .lockup img, body[data-flood='flame'] .lockup img,
body[data-flood='ink'] .lockup img { filter: invert(1) hue-rotate(180deg); }
body[data-flood='indigo'] .lockup-rx, body[data-flood='flame'] .lockup-rx,
body[data-flood='ink'] .lockup-rx { color: var(--paper); }

/* OpenLoop intake, framed. Height is driven by postMessage from their origin.
   ⚠️ The :not([hidden]) is load-bearing (gate §9c greps for it at column 0).
   `#embed` is an ID selector, so a bare `display: block` here would outrank
   the UA stylesheet's `[hidden] { display: none }` and render an empty frame
   above the intake. */
#embed:not([hidden]) { width: 100%; min-height: 80dvh; border: 0; display: block; }

/* ═══ PLAN (box selection and payment) ═══════════════════════════════════ */

.offer-head { padding-block: var(--s-2xl) var(--s-lg); }

.strengths { display: grid; gap: var(--s-xs); margin-bottom: var(--s-sm); }
@media (min-width: 620px) { .strengths { grid-template-columns: 1fr 1fr; } }
.strength {
  position: relative; text-align: left; appearance: none; cursor: pointer;
  background: var(--paper); border: 0; border-radius: var(--r-control);
  box-shadow: inset 0 0 0 1px var(--line-firm);
  padding: var(--s-md); display: grid; gap: 2px; min-height: 96px;
  font-family: var(--body); color: var(--ink);
  transition: box-shadow var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.strength:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.strength[aria-pressed='true'] { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.strength .name { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: -0.025em; }
.strength .mol { font-size: var(--t-micro); color: var(--muted); }
.strength-note { font-size: var(--t-small); color: var(--muted); margin-top: var(--s-2xs); }
.strength[disabled] { opacity: 0.52; cursor: not-allowed; }
.strength[disabled] .strength-note { color: var(--accent); }

.ladder { display: grid; gap: var(--s-xs); margin-top: var(--s-md); }
.rung {
  position: relative; display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: var(--s-md);
  appearance: none; text-align: left; cursor: pointer;
  background: var(--paper); border: 0; border-radius: var(--r-control);
  box-shadow: inset 0 0 0 1px var(--line-firm);
  padding: var(--s-md); min-height: 88px;
  font-family: var(--body); color: var(--ink);
  transition: box-shadow var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.rung:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.rung[aria-pressed='true'] { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.rung .qty { display: block; font-family: var(--display); font-weight: 700; font-size: 1.375rem; line-height: 1; letter-spacing: -0.02em; }
.rung .per { display: block; font-size: var(--t-micro); color: var(--muted); margin-top: 5px; }
.rung-right { text-align: right; }
.rung .total { display: block; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; }
.rung .save { display: block; margin-top: 4px; font-size: var(--t-micro); font-weight: 600; color: var(--accent); }
.rung .flag, .strength .flag {
  position: absolute; top: -10px; left: var(--s-md);
  background: var(--ink); color: var(--paper);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: var(--r-pill);
}

/* Terms printed ON the card, above the button, at the same size as the price. */
.pricecard { padding: var(--s-lg); border-radius: var(--r-panel); background: var(--accent-soft); max-width: 560px; }
.pricecard-figure {
  font-family: var(--display); font-weight: 700; font-size: clamp(2.75rem, 10vw, 4rem);
  line-height: 1; letter-spacing: -0.035em; margin: 0;
  display: flex; align-items: baseline; gap: var(--s-sm);
}
.pricecard-figure s { font-family: var(--body); font-size: 1.25rem; font-weight: 400; color: var(--muted); }
.pricecard-then { margin: var(--s-xs) 0 var(--s-lg); font-weight: 600; }
.terms { margin: 0 0 var(--s-lg); padding-left: 1.1em; font-size: var(--t-small); color: var(--muted); }
.terms li { margin-bottom: var(--s-xs); }
.terms strong { color: var(--ink); font-weight: 600; }

.prepay { padding: var(--s-md) var(--s-lg); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--accent); border-radius: var(--r-control); max-width: 560px; }
.prepay .k { font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
.prepay .v { margin: var(--s-xs) 0 0; font-size: var(--t-small); }
.prepay .fine { color: var(--muted); }
.prepay .price { font-size: 1rem; font-weight: 600; }
.prepay-how { margin-top: var(--s-xs); font-size: var(--t-small); color: var(--muted); }
.prepay-how summary { cursor: pointer; display: inline-block; text-decoration: underline; text-underline-offset: 2px; }
.prepay-how p { margin: var(--s-xs) 0 0; }

.paypanel { padding: var(--s-lg); border-radius: var(--r-panel); box-shadow: inset 0 0 0 1.5px var(--line-firm); max-width: 560px; }

.ffgrid { display: grid; gap: var(--s-lg); }
@media (min-width: 760px) { .ffgrid { grid-template-columns: 1fr 1fr; gap: var(--s-xl); } }
.ffcard {
  display: flex; flex-direction: column; gap: var(--s-sm);
  padding: var(--s-lg); border-radius: var(--r-panel);
  background: var(--flood); color: var(--flood-ink);
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow var(--t-fast) var(--ease-out);
}
.ffcard.is-on { box-shadow: inset 0 0 0 2px var(--accent); }
.ffname { font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1; letter-spacing: -0.03em; margin: 0; }
.ffkind { margin: 0; font-size: var(--t-small); opacity: 0.78; }
.ffprice { margin: var(--s-xs) 0 0; font-size: 1.125rem; font-weight: 600; }
.fflist { margin: 0; padding-left: 1.1em; font-size: var(--t-small); flex: 1; }
.fflist li { margin-bottom: var(--s-2xs); }
.ffcard .btn { background: var(--flood-ink); color: var(--flood); margin-top: var(--s-sm); }
.ffcard .btn:hover { background: var(--ink); color: var(--paper); }
.ffcard .btn[disabled] { opacity: 1; background: transparent; color: var(--flood-ink); box-shadow: inset 0 0 0 2px var(--flood-ink); }
.ffshot {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 28%;
  border-radius: var(--r-control); margin-bottom: var(--s-xs);
}

.daily-block { display: grid; gap: var(--s-lg); padding: var(--s-xl); border-radius: var(--r-panel); background: var(--flood); color: var(--flood-ink); }
@media (min-width: 760px) { .daily-block { grid-template-columns: 1.3fr 1fr; align-items: center; gap: var(--s-2xl); } }
.daily-block .btn { background: var(--flood-ink); color: var(--flood); }
.daily-block .btn:hover { background: var(--ink); color: var(--paper); }

/* The only per-dose figure on the whole site. */
.comparison { font-size: var(--t-small); color: var(--muted); max-width: 52ch; }

.summary {
  position: sticky; bottom: 0; z-index: 20;
  background: color-mix(in oklab, var(--paper) 94%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line-firm);
  padding: var(--s-sm) var(--gutter) calc(var(--s-sm) + env(safe-area-inset-bottom));
}
.summary-inner { max-width: 1180px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-md); }
.summary-inner .what { font-size: var(--t-small); color: var(--muted); }
.summary-inner .btn { min-height: 48px; padding-inline: var(--s-lg); }

@media (min-width: 980px) {
  .plan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 0.8fr); gap: var(--s-2xl); align-items: start; }
  .plan-grid > aside { position: sticky; top: 112px; }
  .pricecard, .paypanel, .prepay { max-width: none; }
  /* The sticky summary is a phone affordance; on desktop the price card is
     already pinned beside the ladder. */
  .summary { display: none; }
}
@media (max-width: 979px) { #plan-main { padding-bottom: var(--s-xl); } }

/* The blocking ISI placeholder. Loud on purpose: it must be impossible to
   scroll past this and think the safety information is complete. */
.isi-hole {
  margin: var(--s-lg) 0; padding: var(--s-md) var(--s-lg);
  border-radius: var(--r-control);
  background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); color: var(--ink);
}
.isi-hole h3 { margin-top: 0; color: var(--ink); }
.isi-hole p { color: var(--ink); }

/* Qualified onset claim: the asterisk points at the footnote that makes the
   figure sayable at all, so the footnote never collapses into a tooltip. */
.onset-note { max-width: 70ch; }

/* Countdown. Tabular numerals so the clock does not jitter. */
.countdown {
  display: inline-flex; align-items: baseline; gap: var(--s-sm);
  margin-top: var(--s-lg); padding: var(--s-xs) var(--s-md);
  border-radius: var(--r-pill); background: var(--ink); color: var(--paper);
}
.countdown-label { font-size: 0.75rem; font-weight: 600; }
.countdown-clock { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.countdown.is-done { background: var(--paper-deep); color: var(--muted); }

/* ═══ ACCOUNT ════════════════════════════════════════════════════════════ */

/* Three buttons, all the same size, all on one screen. The cancel button is
   never visually quieter than the other two. */
.plan-actions-grid { display: grid; gap: var(--s-xs); }
@media (min-width: 720px) { .plan-actions-grid { grid-template-columns: repeat(3, 1fr); } }
.plan-explain { margin: var(--s-lg) 0; }
.plan-explain > div { padding: var(--s-sm) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 620px) { .plan-explain > div { display: grid; grid-template-columns: 200px 1fr; gap: var(--s-md); } }
.plan-explain dt { font-weight: 600; }
.plan-explain dd { margin: 0; color: var(--muted); font-size: var(--t-small); }
.plan-actions { display: flex; flex-wrap: wrap; gap: var(--s-xs); }
.plan-actions .btn { min-height: 48px; padding-inline: var(--s-md); font-size: var(--t-small); }

.notice {
  padding: var(--s-md) var(--s-lg); border-radius: var(--r-control);
  background: var(--paper-sunk); box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--t-small); margin-block: var(--s-lg); max-width: 60ch;
}
.notice p { margin: 0 0 var(--s-xs); }
.notice p:last-child { margin-bottom: 0; }
.notice .k { font-weight: 600; }
.notice strong { font-weight: 600; }
.notice.loud { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--ink); }

.stub {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent);
  padding: 2px 8px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px currentColor; display: inline-block; vertical-align: middle;
}

/* Save offer: four options, one screen, and the cancel control carries the
   same weight as the three that are not cancelling. */
.saveoffer { margin: var(--s-xl) 0; padding: var(--s-xl) var(--s-lg); border-radius: var(--r-panel); background: var(--paper-sunk); box-shadow: inset 0 0 0 1px var(--line); }
.saveopts { display: grid; gap: var(--s-xs); }
@media (min-width: 760px) { .saveopts { grid-template-columns: 1fr 1fr; } }
.saveopt {
  appearance: none; text-align: left; cursor: pointer;
  background: var(--paper); border: 0; border-radius: var(--r-control);
  box-shadow: inset 0 0 0 1px var(--line-firm);
  padding: var(--s-md); min-height: 108px;
  display: grid; gap: var(--s-2xs); align-content: start;
  font-family: var(--body); color: var(--ink);
  transition: box-shadow var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.saveopt:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.saveopt .k { font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.1; letter-spacing: -0.02em; }
.saveopt .v { font-size: var(--t-small); color: var(--muted); }
/* Same size, same weight, same prominence. Only the colour differs, and it
   is the accent, which reads as "this is the real one". */
.saveopt-out { background: var(--accent); }
.saveopt-out .k { color: var(--paper); }
.saveopt-out .v { color: color-mix(in oklab, var(--paper) 78%, var(--accent)); }
.saveopt-out:hover { background: var(--accent-deep); box-shadow: none; }

/* ═══ LEGAL ══════════════════════════════════════════════════════════════ */

.legal { padding-block: var(--s-2xl) var(--s-3xl); max-width: 860px; }
.legal h1 { font-family: var(--display); font-weight: 700; font-size: var(--t-h2); line-height: 1.02; letter-spacing: -0.025em; margin: 0 0 var(--s-lg); }
.legal h2 { font-size: var(--t-h3); font-weight: 600; margin: var(--s-xl) 0 var(--s-xs); letter-spacing: -0.01em; }
.legal p, .legal li { max-width: var(--measure); color: var(--muted); }
.legal ul { padding-left: 1.1em; }
.legal li { margin-bottom: var(--s-xs); }

/* ═══ UPSELL RUNGS ═══════════════════════════════════════════════════════
   Full flood, one offer, one button. The decline is a quiet link under it,
   still a real link that works on the first tap and advances the ladder. */

.upsell {
  background: var(--flood); color: var(--flood-ink);
  min-height: calc(100dvh - 60px);
  padding: var(--s-2xl) var(--gutter) var(--s-3xl);
  display: flex; align-items: center;
}
.upsell-inner { max-width: 620px; margin-inline: auto; width: 100%; }
.upsell .eyebrow { color: inherit; opacity: 0.7; }
.upsell-kicker { font-size: var(--t-small); font-weight: 600; opacity: 0.8; margin: 0 0 var(--s-md); }
.upsell-h {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.25rem, 1.6rem + 3.4vw, 4rem); line-height: 1.02; letter-spacing: -0.03em;
  margin: 0 0 var(--s-md); text-wrap: balance;
}
.upsell-sub { font-size: 1.125rem; line-height: 1.5; max-width: 42ch; margin: 0 0 var(--s-lg); }
.upsell-list { margin: 0 0 var(--s-xl); padding-left: 1.1em; font-size: var(--t-small); }
.upsell-list li { margin-bottom: var(--s-2xs); opacity: 0.88; }
.upsell-price { display: flex; align-items: baseline; gap: var(--s-sm); margin-bottom: var(--s-md); }
.upsell-fig { font-family: var(--display); font-weight: 700; font-size: clamp(2.75rem, 10vw, 4rem); line-height: 1; letter-spacing: -0.035em; }
.upsell-unit { font-size: var(--t-micro); font-weight: 500; opacity: 0.78; }
.upsell-actions { margin-top: var(--s-xl); display: grid; gap: var(--s-md); justify-items: center; }
.upsell-actions .btn { background: var(--flood-ink); color: var(--flood); }
.upsell-actions .btn:hover { background: var(--ink); color: var(--paper); }
.upsell-decline {
  font-size: var(--t-micro); color: color-mix(in oklab, currentColor 55%, transparent);
  text-decoration: underline; text-underline-offset: 3px;
  padding: var(--s-xs) var(--s-sm); min-height: 36px; display: inline-flex; align-items: center;
}
.upsell-decline:hover { color: currentColor; }
.upsell-fine { margin-top: var(--s-xl); opacity: 0.7; max-width: 52ch; }
.upsell .countdown { background: var(--flood-ink); color: var(--flood); }

/* ═══ UTILITIES ══════════════════════════════════════════════════════════ */

.stack-sm > * + * { margin-top: var(--s-sm); }
.mt-sm { margin-top: var(--s-sm); }
.mt-md { margin-top: var(--s-md); }
.mt-lg { margin-top: var(--s-lg); }
.mt-xl { margin-top: var(--s-xl); }
.mt-2xl { margin-top: var(--s-2xl); }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .screen, .interstitial { animation: none; }
  .tile, .tile-cta span, .qa summary::after, .qa2 summary::after { transition: none; }
}
.reg { font-size: 0.5em; vertical-align: super; line-height: 0; margin-left: 0.05em; }
.hh-pill { margin-bottom: var(--s-sm); }

/* ── Men's hero on phones: film on top, copy below on solid ink ─────────────
   Full-bleed text over the film buried the footage on a 390px screen. Below
   900px the film becomes a banner; the pill and H1 sit on its darkened foot,
   and everything else continues on the film's own black. The four actives
   collapse to a 2x2 of headline + molecule; their long lines (and the
   claims they carry) stay on desktop and in the comparison table. */
@media (max-width: 899px) {
  .vhero-night { display: block; min-height: 0; }
  .vhero-night .vhero-media { position: relative; inset: auto; height: 50svh; min-height: 320px; max-height: 500px; }
  .vhero-night .vhero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-position: 50% 30%; }
  .vhero-night .vhero-media::after {
    background: linear-gradient(to top, var(--film-ink) 0%, color-mix(in oklab, var(--film-ink) 70%, transparent) 22%, transparent 48%);
  }
  .vhero-night .vhero-inner { margin-top: -150px; padding: 0 var(--gutter) var(--s-xl); }
  .vhero-stack::before { display: none; }
  .vhero-night .vhero-stack { gap: 12px; }
  .vhero-night .vhero-sub { font-size: 0.9375rem; }
  .vhero-actives { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
  .vhero-actives li, .vhero-actives li:first-child {
    padding: 12px; border: 1px solid color-mix(in oklab, var(--paper) 14%, transparent);
    border-radius: 14px; background: color-mix(in oklab, var(--paper) 6%, transparent); gap: 10px;
  }
  .vhero-actives h2 { font-size: 0.9375rem; }
  .vhero-actives p { font-size: 0; }
  .vhero-actives p b { white-space: nowrap; font-size: 0.8125rem; font-weight: 500; color: color-mix(in oklab, var(--paper) 72%, var(--ink)); }
  .vhero-actives p sup { display: none; }
  .vhero-foot { display: none; }
  .vhero-night .vhero-pill, .vhero-cta, .vhero-micro { max-width: none; }
}

/* ═══ PHONE PASS (2026-10-16) ════════════════════════════════════════════
   What the category leaders do on a phone and this site did not: one idea
   per screen, every primary action a full-width pill under the thumb, rows
   of cards that scroll sideways with a peek of the next, trust lines that
   wrap instead of clipping, and chrome that never wraps. Copy, claims and
   the comparison marks are untouched; this is layout only. */

/* Chrome: at 360px the lockup, Log in, Get started and the menu toggle
   overran the bar and the toggle dropped to a second row. */
@media (max-width: 419px) {
  .site-head { gap: 8px; }
  .head-actions { gap: 6px; }
  .head-login { padding: 8px 2px; font-size: 0.875rem; }
  .head-cta { padding: 0 12px; font-size: 0.875rem; min-height: 38px; }
  .nav-toggle { margin-right: -8px; }
}

@media (max-width: 759px) {
  /* Every landing-page action runs the full content width. Scoped to the
     selling blocks so the intake, plan and account bars keep their own sizes. */
  .ctas { display: grid; gap: var(--s-sm); margin-top: var(--s-lg); }
  .ctas .btn-p, .ctas .btn-s, .how .btn-p, .offer-act .btn-p, .pcard-act .btn-p { width: 100%; }
  .how .btn-p { display: flex; }
  .offer-act { justify-items: stretch; }
  .micro-cta { text-align: center; }
  .pcard-act { display: grid; gap: var(--s-sm); justify-items: center; }

  /* Product cards: a snap row with a peek of the next card, not three
     screens of stacked cards. */
  .pcards {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: var(--s-lg) calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter);
  }
  .pcards::-webkit-scrollbar { display: none; }
  .pcard { flex: 0 0 min(84%, 340px); scroll-snap-align: start; padding: 20px; }
  .pcard.is-fit { box-shadow: inset 0 0 0 2px var(--accent); }

  /* "More from TabsRx": the same scrolling row the home page uses. */
  .more-row {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
  }
  .more-row::-webkit-scrollbar { display: none; }
  .more-row .soon-c { min-width: 150px; scroll-snap-align: start; }

  /* Comparison table: a touch tighter so a row is one glance. */
  .cmp thead th { font-size: 0.6875rem; padding-bottom: 8px; }
  .cmp tbody th { padding: 10px 0 2px; }
  .cmp tbody td { padding: 6px 6px 8px 0; }
  .cmp tbody td.is-rx { padding: 6px 8px 8px; }
  .cmp td > .mk { margin-bottom: 4px; }
  .mk { width: 26px; height: 26px; }
  .cmp tbody tr { padding-bottom: 4px; }

  /* Three steps: a narrower number column gives the sentence its measure. */
  .steps3 li { grid-template-columns: 36px 1fr; gap: var(--s-sm); }
  .steps3 .n { font-size: 1.5rem; }
  .steps3 p { max-width: none; }

  /* The section lead keeps a readable measure at 17px. */
  .lead-p, .prose-lead p { font-size: 1.0625rem; }
}

/* Trust lines wrap and centre instead of scrolling off the edge. */
@media (max-width: 879px) {
  .trust { flex-wrap: wrap; justify-content: center; white-space: normal; gap: 8px 18px; overflow: visible; font-size: 0.75rem; padding-block: 12px; }
  .trust li { white-space: nowrap; }
}
@media (max-width: 899px) {
  .vhero-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-size: 0.75rem; padding-block: 12px; }
  .vhero-icons li { white-space: nowrap; }
  .vhero-icons svg { width: 16px; height: 16px; }
}

/* ── Referral · "Give $20, get $20." on the post-purchase pages ──────────
   One accent-wash panel: mark, headline, body, then the share button and the
   link row side by side from 640px. The link row is a quiet input-like field
   with the copy control inside it, so the URL reads as a thing to take. */
.referral {
  display: grid; gap: var(--s-md); grid-template-columns: 44px minmax(0, 1fr); align-items: start;
  background: var(--accent-soft); border-radius: var(--r-panel); padding: clamp(24px, 5vw, 40px);
  margin-block: var(--s-xl); max-width: 640px;
}
.referral-mark {
  width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--paper);
  display: grid; place-items: center; margin-top: 2px;
}
.referral-body { min-width: 0; }
.referral-body .eyebrow { margin-bottom: var(--s-xs); }
.referral-h {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  line-height: 1.02; letter-spacing: -0.025em; margin: 0 0 var(--s-sm); color: var(--ink);
}
.referral-p { margin: 0; color: var(--muted); max-width: 46ch; font-size: var(--t-small); line-height: 1.5; }
.referral-actions { display: grid; gap: var(--s-xs); margin-top: var(--s-lg); }
.referral-actions .btn { width: 100%; }
.referral-link {
  display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 6px 0 14px; min-width: 0;
  border-radius: var(--r-control); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-firm);
}
.referral-url {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--t-small); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.referral-copy {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px; padding: 0 12px; border: 0;
  border-radius: var(--r-pill); background: transparent; color: var(--accent); font: inherit;
  font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background 120ms ease, color 120ms ease;
}
.referral-copy:hover { background: var(--accent-soft); }
.referral-copy[data-copied] { color: var(--ink); }
.referral-disclose { margin: var(--s-md) 0 0; font-size: var(--t-small); font-weight: 500; color: var(--ink); }
.referral-fine { margin: var(--s-xs) 0 0; }
.referral-fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.referral-fine a:hover { color: var(--accent); }
@media (max-width: 479px) {
  .referral { grid-template-columns: 1fr; }
  .referral-mark { width: 40px; height: 40px; }
}
@media (min-width: 640px) {
  .referral-actions { grid-template-columns: auto minmax(0, 1fr); align-items: stretch; }
  .referral-actions .btn { width: auto; }
}

/* ═══ TYPE-LED PRODUCT PRESENTATION ══════════════════════════════════════
   The vial is not the subject. The home tile sets the actives in the
   display face on its colour field; the category block carries a "one dose"
   fact card with the vial as a small thumbnail; the sexual-health page uses
   the same thumbnail for scale. */

/* Home tile, type version: copy top-left, the actives stacked bottom-right
   in the display face, cut by the tile edge like a label wrapping a jar. */
.tile-type { min-height: 340px; }
.tile-type .tile-txt { width: 100%; }
.tile-mols {
  position: absolute; right: -0.06em; bottom: 14px; z-index: 0; margin: 0; padding: 0; list-style: none;
  display: grid; justify-items: end; gap: 0;
  font-family: var(--display); font-weight: 700; letter-spacing: -0.035em; line-height: 0.92;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); color: var(--accent-deep);
}
.tile-mols li:nth-child(2) { opacity: 0.72; }
.tile-mols li:nth-child(3) { opacity: 0.5; }
.tile-mols li:nth-child(4) { opacity: 0.32; }
@media (max-width: 879px) {
  .tile-type .tile-txt { padding-bottom: 20px; }
  .tile-type .tile-cta { margin-top: auto; }
  .tile-mols { font-size: 1.5rem; bottom: 80px; right: 18px; }
}
@media (min-width: 880px) {
  .tile-type { min-height: 440px; }
  .tile-mols { bottom: 100px; right: 28px; }
}

/* The "one dose" fact card beside the home category copy. */
.dose-card {
  background: linear-gradient(160deg, var(--tile-a) 0%, var(--tile-c) 100%);
  border-radius: var(--r-panel); padding: clamp(24px, 4vw, 40px); display: grid; gap: var(--s-lg);
}
.dose-h { font-family: var(--display); font-weight: 700; font-size: var(--t-h2); line-height: 1; letter-spacing: -0.03em; margin: 0; color: var(--accent-deep); }
.dose-facts { margin: 0; display: grid; }
.dose-facts div { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid color-mix(in oklab, var(--accent) 18%, transparent); }
.dose-facts div:first-child { border-top: 0; padding-top: 0; }
.dose-facts dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.dose-facts dd { margin: 0; font-size: 1.0625rem; line-height: 1.4; font-weight: 500; color: var(--ink); }

/* A small secondary product thumbnail: a fixed-size image beside a caption. */
.thumb { margin: 0; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-md); align-items: center; }
.thumb img { width: 88px; height: 110px; object-fit: cover; border-radius: var(--r-control); background: var(--tile-a); display: block; }
.thumb figcaption { font-size: 0.75rem; line-height: 1.45; color: var(--muted); max-width: 40ch; }
.thumb figcaption b { display: block; color: var(--ink); font-size: 0.9375rem; font-weight: 600; margin-bottom: 2px; }
.thumb-row { padding-top: var(--s-md); border-top: 1px solid color-mix(in oklab, var(--accent) 18%, transparent); }
.format-grid .thumb { align-self: start; padding: var(--s-md); background: var(--paper-sunk); border-radius: var(--r-panel); }

/* The step-up block with no image: the heading block runs alone. */
.up-top-solo { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 980px) {
  /* Heading left, the pitch and its button right, so the block holds the
     width the image used to. */
  .up-top-solo > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: clamp(40px, 6vw, 96px); align-items: end; }
  .up-top-solo .eyebrow { grid-column: 1; grid-row: 1; }
  .up-top-solo .h2 { grid-column: 1; grid-row: 2 / 4; align-self: start; }
  .up-top-solo .lead-p { grid-column: 2; grid-row: 2; margin-top: 0; }
  .up-top-solo .ctas { grid-column: 2; grid-row: 3; }
}

/* ═══ CALM HERO ══════════════════════════════════════════════════════════
   The low-key sexual-health hero: white page, the copy stack left, the
   actives on a colour-field panel right. No film, no people. */
.chero { padding-block: clamp(28px, 5vw, 72px) clamp(28px, 4vw, 56px); }
.chero-inner { display: grid; gap: clamp(28px, 4vw, 48px); }
.chero-copy { display: grid; gap: var(--s-md); justify-items: start; align-content: center; }
.chero-pill { margin: 0; }
.chero-title {
  font-family: var(--display); font-weight: 700; font-size: clamp(2.75rem, 1.6rem + 3.6vw, 4.75rem);
  line-height: 0.98; letter-spacing: -0.035em; margin: var(--s-xs) 0 0; max-width: 12ch; text-wrap: balance;
}
.chero-support {
  font-family: var(--display); font-weight: 500; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  line-height: 1.1; letter-spacing: -0.015em; margin: 0; color: var(--ink);
}
.chero-sub { margin: 0; font-size: var(--t-lead); line-height: 1.5; color: var(--muted); max-width: 38ch; }
.chero-act { display: grid; gap: var(--s-xs); justify-items: start; margin-top: var(--s-sm); width: 100%; }
.chero-cta { min-height: 56px; padding-inline: 32px; }
.chero-panel {
  background: linear-gradient(165deg, var(--tile-a) 0%, var(--tile-c) 100%);
  border-radius: var(--r-panel); padding: clamp(22px, 3.6vw, 40px); display: grid; gap: var(--s-md); align-content: start;
}
.chero-panel-h { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.chero-actives { list-style: none; margin: 0; padding: 0; display: grid; }
.chero-actives li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid color-mix(in oklab, var(--accent) 16%, transparent); }
.chero-actives li:first-child { border-top: 0; padding-top: 4px; }
.chero-actives h2 { font-family: var(--display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 2px; color: var(--ink); }
.chero-actives p { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--muted); max-width: 40ch; }
.chero-actives p b { color: var(--ink); font-weight: 600; }
.chero-actives sup, .chero-foot sup { font-size: 0.7em; }
.chero .actives-chip { width: 40px; height: 40px; background: var(--paper); }
.chero-foot { margin: 0; font-size: 0.75rem; line-height: 1.5; color: var(--muted); }
.chero-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.chero-icons { border-bottom: 1px solid var(--line); }
@media (max-width: 759px) {
  .chero-pill { width: 100%; }
  .chero-cta { width: 100%; }
  .chero-act .micro-cta { width: 100%; text-align: center; }
}
@media (min-width: 900px) {
  .chero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(400px, 0.95fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
}