/* Longiva v7 — layout system modelled on hims.com.
   CareSans and IvarSoft are commercial; Manrope (Longiva brand type) with Fraunces (soft) for accent words. */

:root {
  --ink: rgba(0, 0, 0, .88);
  --ink-2: rgba(0, 0, 0, .64);
  --ink-3: rgba(0, 0, 0, .48);
  --line: rgba(0, 0, 0, .08);
  --grey: #F0F0F0;
  --grey-2: #F7F7F7;
  --pastel: #D9E6FB;
  --pastel-light: #F1F6FF;
  --pastel-deep: #BCD3F5;
  --pastel-grad: radial-gradient(90% 70% at 70% 10%, #F1F6FF, #D9E6FB 50%, #BCD3F5);
  --navy-ink: #13254D;
  --navy-ink-2: #41587F;
  --accent: #13254D;
  --accent-ink: #fff;
  --accent-soft: #D9E6FB;
  --hl: #2F5BB8;
  --hl-light: #BFD5FA;
  --cream: #F4F1E6;
  --cream-2: #FAF8F2;
  --sand: #F2EDE5;
  --mint: #E4EEE6;
  --mint-2: #F2F9F4;
  --green: #00A76E;
  --navy: #0A2633;
  --slate: #2E3F43;
  --blue: #5C8CB5;
  --blue-soft: #DCE6EE;
  --red: #8F2B25;
  --r-panel: 32px;
  --r-card: 24px;
  --r-pill: 48px;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --arabic: "Noto Kufi Arabic", "Manrope", sans-serif;
  --serif: "Fraunces", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.45; color: var(--ink); background: var(--pastel); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ph { background: #FFF4CC; color: #6B5300; padding: 0 4px; border-radius: 3px; }
.sample { display: inline-block; background: #FFF4CC; color: #6B5300; font-size: 10px; line-height: 16px; font-weight: 700; letter-spacing: .08em; padding: 1px 6px; border-radius: 4px; }
.wrap { width: min(1312px, 100% - 64px); margin-inline: auto; }
.wrap--md { width: min(1000px, 100% - 64px); margin-inline: auto; }

/* ---------- type ---------- */
.h1 { font-size: clamp(36px, 4.2vw, 57px); line-height: 1; font-weight: 410; letter-spacing: -.01em; }
.h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.05; font-weight: 450; letter-spacing: -.01em; }
.h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.12; font-weight: 450; }
.lead { font-size: 18px; line-height: 1.45; color: var(--ink-2); font-weight: 400; }
.small { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.serif { font-family: var(--serif); font-weight: 400; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -.01em; }
.accent { color: var(--hl); }
.hcard:not(.hcard--blue) .accent { color: var(--hl-light); }
.pastel-bg { background: var(--pastel-grad); }
.on-dark { color: #fff; }
.on-dark .lead, .on-dark .small { color: rgba(255, 255, 255, .72); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: var(--r-pill); border: 0; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: transform .15s, filter .15s; }
.btn:hover { filter: brightness(.96); }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--white { background: #fff; color: #000; }
.btn--black { background: #000; color: #fff; }
.btn--glass { background: rgba(255, 255, 255, .1); color: #fff; }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); }
.btn--lg { height: 52px; padding: 0 28px; font-size: 16px; }
.btn--block { width: 100%; }
.btn .ic { width: 16px; height: 16px; }

/* ---------- promo + header (white sheet over pastel blue) ---------- */
.promo { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 12px 16px 26px; font-size: 14px; color: #fff; background: #10243F; }
.promo a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--r-pill); background: #fff; color: #10243F; font-weight: 600; }
.promo .ic { width: 15px; height: 15px; }
/* home hero ticker (12 Nov 2026): three trust lines scrolling as one loop under the hero tiles; main.js clones the set to fill the width */
.hh-ticker { margin-top: clamp(16px, 1.8vw, 24px); overflow: hidden; color: #10243F; font-size: 14px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
/* the strip closes the hero: the gap under it matches the gap above it */
.hh-hero:has(.hh-ticker) { padding-bottom: 0; }
.hh-hero:has(.hh-ticker) + .hw { margin-top: clamp(18px, 1.8vw, 24px); }
.hh-ticker__track { display: flex; width: max-content; margin: 0 auto; }
.hh-ticker__track.is-live { margin: 0; animation: hh-ticker-run var(--tick-t, 24s) linear infinite; }
.hh-ticker:hover .hh-ticker__track.is-live { animation-play-state: paused; }
.hh-ticker__set { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.hh-ticker__set li { display: flex; align-items: center; gap: 9px; padding: 0 26px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; }
.hh-ticker__set .ic { width: 18px; height: 18px; stroke-width: 1.6; color: #2F5BB8; }
@keyframes hh-ticker-run { to { transform: translateX(calc(var(--tick-w, 600px) * -1)); } }
@media (prefers-reduced-motion: reduce) { .hh-ticker__track.is-live { animation: none; margin: 0 auto; } .hh-ticker__set[aria-hidden] { display: none; } }
.sheet { background: #fff; border-radius: 28px 28px 0 0; margin-top: -16px; position: relative; overflow: clip; }
body:has(> .sheet) { background: #10243F; }
.hd { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); }
.hd__bar { height: 72px; display: flex; align-items: center; gap: 36px; }
.logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; font-family: var(--sans); font-weight: 700; font-size: 24px; letter-spacing: -.02em; line-height: 1; color: var(--navy-ink); }
.logo-ar { font-family: var(--arabic); font-size: 13px; font-weight: 500; letter-spacing: 0; opacity: .9; align-self: stretch; text-align: left; }
.hd__meta { display: none; }
.hd__nav { display: flex; gap: 4px; flex: 1; font-size: 14px; }
.hd__nav a { padding: 10px 14px; border-radius: var(--r-pill); }
.hd__nav a:hover { background: var(--grey); }
.hd__right { display: flex; gap: 10px; align-items: center; }
.burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--grey); cursor: pointer; }
.burger span { display: block; width: 18px; height: 1.6px; background: #000; margin: 4px auto; }
.drawer { position: fixed; inset: 0; z-index: 60; background: #fff; padding: 20px 24px 40px; transform: translateY(-100%); transition: transform .3s; overflow-y: auto; display: grid; align-content: start; gap: 6px; }
.drawer.is-open { transform: none; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.drawer__top button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--grey); font-size: 24px; cursor: pointer; }
.drawer a:not(.btn) { padding: 14px 4px; font-size: 22px; border-bottom: 1px solid var(--line); }
.drawer .btn { margin-top: 18px; }

/* ---------- home hero ---------- */
.hero { padding: 40px 0 24px; }
.hero h1 { margin-bottom: 32px; }
.hero__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hcard { position: relative; min-height: 460px; border-radius: var(--r-card); overflow: hidden; color: #fff; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; }
.hcard > img:not(.hcard__art) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 18, 60, .35), rgba(8, 18, 60, 0) 40%, rgba(8, 18, 60, .55)); }
.hcard--blue { background: radial-gradient(120% 90% at 30% 20%, #F1F6FF, #D9E6FB 55%, #BCD3F5); color: var(--navy-ink); }
.hcard--blue .hcard__foot { border-top-color: rgba(19, 37, 77, .15); }
.hcard--blue .hcard__art { filter: drop-shadow(0 30px 40px rgba(19, 37, 77, .3)); }
.hcard--blue::before { display: none; }
.hcard h2 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.05; font-weight: 450; max-width: 360px; }
.hcard__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .25); font-size: 17px; }
.hcard__art { position: absolute; right: 6%; bottom: 14%; height: 72%; width: auto; max-width: 52%; object-fit: contain; z-index: -1; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .4)); transform: rotate(8deg); }
.cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 12px; }
.cat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--grey-2); font-size: 15px; font-weight: 500; }
.cat:hover { background: var(--grey); }
.cat i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.cat i .ic { width: 20px; height: 20px; }

/* ---------- category panels ---------- */
.panel { border-radius: var(--r-panel); overflow: hidden; padding: 72px 64px; position: relative; }
.panel + .panel { margin-top: 12px; }
.panel--blue { background: var(--pastel-grad); color: var(--navy-ink); }
.panel--blue .lead, .panel--blue .small { color: var(--navy-ink-2); }
.panel--blue .panel__note { color: var(--navy-ink-2); opacity: 1; }
.panel--blue .btn--glass { background: rgba(255, 255, 255, .55); color: var(--navy-ink); }
.panel--blue .ptile--glass { background: rgba(255, 255, 255, .45); }
.panel--slate { background: linear-gradient(180deg, #D7E2EC, #E3E8E0); }
.panel--navy { background: radial-gradient(80% 70% at 80% 0%, #17485E, #0A2633 60%); color: #fff; }
.panel--cream { background: var(--cream-2); }
.panel--mint { background: linear-gradient(180deg, var(--mint-2), var(--mint)); }
.panel__head { display: grid; gap: 18px; justify-items: center; text-align: center; max-width: 720px; margin: 0 auto 48px; }
.panel__head--left { justify-items: start; text-align: left; margin-inline: 0; }
.panel__btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.panel__head--left .panel__btns { justify-content: flex-start; }
.tiles3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; }
.ptile { position: relative; border-radius: var(--r-card); overflow: hidden; min-height: 420px; padding: 26px; display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; }
.ptile > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ptile h3 { font-size: 24px; line-height: 1.1; font-weight: 475; max-width: 260px; }
.ptile p { font-size: 15px; opacity: .8; max-width: 300px; margin-top: 8px; }
.ptile--glass { background: rgba(255, 255, 255, .06); }
.ptile--white { background: rgba(255, 255, 255, .7); }
.ptile--photo { color: #fff; }
.ptile--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .45)); }
.ptile__render { position: absolute; right: 8%; bottom: 4%; height: 62%; width: auto; max-width: 60%; object-fit: contain; transform: rotate(10deg); z-index: -1; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .45)); }
.ptile__phone { position: absolute; left: 50%; bottom: -60px; transform: translateX(-50%); width: 200px; height: 340px; border-radius: 34px; background: #111; padding: 9px; z-index: -1; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .6); }
.ptile__phone > div { height: 100%; border-radius: 26px; background: linear-gradient(180deg, #F4F1E6, #fff); padding: 24px 14px; display: grid; gap: 10px; align-content: start; color: var(--ink); font-size: 11px; }
.ptile__phone b { font-size: 16px; }
.ptile__phone span { display: block; height: 34px; border-radius: 10px; background: var(--mint); }
.ptile__phone span:nth-child(3) { background: var(--accent-soft); }
.panel__note { margin-top: 28px; text-align: center; font-size: 12px; opacity: .6; max-width: 900px; margin-inline: auto; }

/* testosterone panel cards */
.tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tcard { border-radius: var(--r-card); background: rgba(255, 255, 255, .7); padding: 26px; display: grid; gap: 12px; align-content: start; min-height: 260px; position: relative; overflow: hidden; }
.tcard h3 { font-size: 22px; font-weight: 475; }
.tcard p { font-size: 15px; color: var(--ink-2); }
.tcard .btn { justify-self: start; margin-top: auto; }
.tcard__art { position: absolute; right: -10px; bottom: -10px; width: 140px; opacity: .95; }

/* ---------- CSS packshots (hims style: frosted vials and white bottles) ---------- */
.vial { --lab: var(--pastel); position: relative; width: 70px; height: 116px; margin-top: 30px; border-radius: 10px; background: linear-gradient(90deg, #e3e6ea, #fff 40%, #eef0f2 65%, #d2d6db); box-shadow: 0 20px 26px -16px rgba(0, 0, 0, .45); }
.vial::before { content: ""; position: absolute; left: 50%; top: -28px; width: 56px; height: 30px; transform: translateX(-50%); border-radius: 6px 6px 3px 3px; background: linear-gradient(90deg, #2b2b2b, #555 45%, #222); }
.vial b { position: absolute; inset: 30px 0 24px; background: var(--lab); display: grid; place-content: center; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-ink); text-align: center; }
.jar { --c: #F4F1E6; position: relative; width: 92px; height: 120px; margin-top: 26px; border-radius: 16px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 85%, #000), var(--c) 30%, #fff 52%, var(--c) 72%); box-shadow: 0 22px 28px -18px rgba(0, 0, 0, .45); }
.jar::before { content: ""; position: absolute; left: 50%; top: -22px; width: 80px; height: 26px; transform: translateX(-50%); border-radius: 8px 8px 4px 4px; background: #1a1a1a; }
.jar b { position: absolute; left: 0; right: 0; top: 44px; text-align: center; font-size: 15px; font-weight: 800; letter-spacing: -.04em; }
.jar b small { display: block; font-size: 8px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }

/* ---------- people (something for everyone) ---------- */
.rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.rail::-webkit-scrollbar { display: none; }
.person { flex: 0 0 300px; scroll-snap-align: start; border-radius: var(--r-card); overflow: hidden; background: var(--grey-2); }
.person__img { height: 340px; position: relative; }
.person__img img { width: 100%; height: 100%; object-fit: cover; }
.person__img .sample { position: absolute; top: 14px; left: 14px; }
.person__img b { position: absolute; left: 18px; bottom: 16px; color: #fff; font-size: 20px; font-weight: 500; text-shadow: 0 1px 12px rgba(0, 0, 0, .4); }
.person__body { padding: 18px 20px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.person__body h3 { font-size: 17px; font-weight: 500; }
.person__body span { font-size: 13px; color: var(--ink-3); display: block; }
.circle { width: 40px; height: 40px; border-radius: 50%; background: #000; color: #fff; display: grid; place-items: center; flex: none; }
.circle .ic { width: 16px; height: 16px; }
.rail-ctrl { display: flex; gap: 8px; }
.rail-ctrl button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--grey); display: grid; place-items: center; cursor: pointer; }

/* ---------- labs ---------- */
.labs__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lcard { border-radius: var(--r-card); background: rgba(255, 255, 255, .06); padding: 26px; min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.lcard h3 { font-size: 26px; line-height: 1.08; font-weight: 450; }
.lcard h3 em { display: block; }
.lcard p { font-size: 14px; color: rgba(255, 255, 255, .7); }
.biomarkers { display: flex; flex-wrap: wrap; gap: 6px; }
.biomarkers span { font-size: 12px; padding: 5px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .86); }

/* ---------- doctors ---------- */
.docs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.doc { display: grid; gap: 10px; }
.doc__img { border-radius: var(--r-card); overflow: hidden; aspect-ratio: .82 / 1; background: var(--grey); }
.doc__img img { width: 100%; height: 100%; object-fit: cover; }
.doc b { font-size: 16px; font-weight: 500; }
.doc span { font-size: 13px; color: var(--ink-3); display: block; }

/* ---------- guide signup ---------- */
.signup { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.signup form { display: flex; gap: 8px; margin-top: 22px; }
.signup input { flex: 1; min-width: 0; width: 100%; height: 52px; border-radius: var(--r-pill); border: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); padding: 0 22px; background: #fff; }
.signup__img { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 1.3 / 1; }
.signup__img img { width: 100%; height: 100%; object-fit: cover; }
.ok { margin-top: 10px; color: var(--green); font-size: 14px; }

/* ---------- footer ---------- */
.ft { background: #000; color: #fff; border-radius: var(--r-panel) var(--r-panel) 0 0; margin-top: 12px; padding: 72px 0 36px; }
.ft__big { font-size: clamp(44px, 6vw, 96px); line-height: .95; font-weight: 430; letter-spacing: -.02em; margin-bottom: 56px; }
.ft__big span { display: block; color: rgba(255, 255, 255, .45); }
.ft__cols { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.ft h3 { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .5); margin-bottom: 12px; }
.ft__cols a { display: block; padding: 4px 0; font-size: 14px; color: rgba(255, 255, 255, .9); }
.ft__cols a:hover { color: var(--hl-light); }
.ft__legal { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .5); display: grid; gap: 10px; }

/* ---------- product page ---------- */
.pp { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; padding: 40px 0 56px; }
.pp__media { position: relative; border-radius: var(--r-panel); overflow: hidden; aspect-ratio: 1 / 1; display: grid; place-items: center; }
.pp__media > img.render { width: 62%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .4)); transform: rotate(-6deg); }
.pp__media .note { position: absolute; left: 20px; bottom: 16px; right: 20px; font-size: 11px; color: rgba(255, 255, 255, .7); }
.pp__media.pastel-bg .note { color: var(--navy-ink-2); }
.pp__txt { display: grid; gap: 20px; }
.pp__eyebrow { font-size: 14px; color: var(--ink-3); }
.pp__price { display: flex; align-items: baseline; gap: 10px; }
.pp__price b { font-size: 28px; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { height: 32px; padding: 0 14px; border-radius: var(--r-pill); background: var(--grey-2); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.chips .ic { width: 14px; height: 14px; color: var(--green); }
.compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ccard { border-radius: var(--r-card); background: #fff; padding: 26px; display: grid; gap: 14px; align-content: start; }
.ccard--on { background: var(--grey-2); }
.ccard h3 { font-size: 22px; font-weight: 475; }
.ccard ul { display: grid; gap: 8px; font-size: 14px; color: var(--ink-2); }
.ccard li { display: flex; gap: 8px; }
.ccard li .ic { color: var(--green); width: 16px; height: 16px; margin-top: 1px; }
.ccard__art { height: 160px; border-radius: 18px; display: grid; place-items: center; overflow: hidden; }
.ccard__art img { height: 140px; width: auto; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .3)); }
.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.how li { border-radius: var(--r-card); background: var(--grey-2); padding: 28px; display: grid; gap: 10px; align-content: start; }
.how b { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.how h3 { font-size: 22px; font-weight: 475; }
.how p { font-size: 15px; color: var(--ink-2); }
.faq { display: grid; gap: 8px; }
.faq details { border-radius: 20px; background: var(--grey-2); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 26px; font-size: 18px; font-weight: 450; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; font-weight: 300; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 26px 22px; color: var(--ink-2); max-width: 820px; }
.isi { border-radius: 20px; background: var(--grey-2); padding: 24px 26px; font-size: 14px; color: var(--ink-2); display: grid; gap: 8px; }
.isi h3 { font-size: 16px; font-weight: 600; color: var(--ink); }
.isi ul { list-style: disc; padding-left: 18px; display: grid; gap: 4px; }

/* ---------- hub hero ---------- */
.hub { border-radius: var(--r-panel); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.hub__txt { padding: 64px; display: grid; gap: 22px; align-content: center; justify-items: start; }
.hub__media { position: relative; display: grid; place-items: center; }
.hub__media > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hub__media > img.render { position: relative; width: 58%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); transform: rotate(-8deg); }

/* ---------- labs page / bmi / blog ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat { border-radius: var(--r-card); background: rgba(255, 255, 255, .06); padding: 26px; display: grid; gap: 6px; }
.stat b { font-size: 40px; font-weight: 430; }
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
.calc form { border-radius: var(--r-card); background: var(--grey-2); padding: 32px; display: grid; gap: 18px; align-content: start; }
.seg { display: inline-flex; padding: 4px; border-radius: var(--r-pill); background: #fff; justify-self: start; box-shadow: inset 0 0 0 1px var(--line); }
.seg button { border: 0; background: none; height: 34px; padding: 0 16px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; cursor: pointer; color: var(--ink-3); }
.seg button[aria-pressed="true"] { background: #000; color: #fff; }
.field { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.field__row { display: flex; gap: 8px; }
.field input { width: 100%; height: 52px; border-radius: 16px; border: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); padding: 0 16px; font-size: 17px; background: #fff; }
.field input:focus { outline: 2px solid #000; }
.ugroup { display: grid; gap: 14px; }
.ugroup[hidden] { display: none; }
.calc__out { border-radius: var(--r-card); background: var(--pastel-grad); color: var(--navy-ink); padding: 32px; display: grid; gap: 12px; align-content: center; }
.calc__out b { font-size: 80px; line-height: 1; font-weight: 400; }
.calc__out .bandl { font-size: 22px; color: var(--hl); }
.calc__out p, .calc__out .small { font-size: 14px; color: var(--navy-ink-2); }
.bmi-chart { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 15px; }
.bmi-chart td { background: var(--grey-2); padding: 14px 18px; }
.bmi-chart td:first-child { border-radius: 14px 0 0 14px; font-weight: 500; }
.bmi-chart td:last-child { border-radius: 0 14px 14px 0; text-align: right; color: var(--ink-2); }
.prose { max-width: 760px; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.prose h2 { font-size: 28px; font-weight: 450; color: var(--ink); margin: 36px 0 10px; line-height: 1.15; }
.prose p + p { margin-top: 12px; }
.prose ul { list-style: disc; padding-left: 20px; display: grid; gap: 6px; margin: 10px 0; }
.feat-post { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.fpost { position: relative; border-radius: var(--r-card); overflow: hidden; min-height: 420px; color: #fff; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.fpost img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.fpost::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .65)); }
.fpost h2, .fpost h3 { font-weight: 450; line-height: 1.1; }
.fpost small { font-size: 13px; opacity: .8; margin-bottom: 8px; }
.posts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.post { display: grid; gap: 10px; align-content: start; }
.post__img { border-radius: 20px; overflow: hidden; aspect-ratio: 1.2 / 1; }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.post:hover .post__img img { transform: scale(1.04); }
.post small { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.post h3 { font-size: 18px; line-height: 1.25; font-weight: 450; }
.blog-sec { margin-top: 56px; }
.blog-sec > h2 { margin-bottom: 20px; }

/* ---------- misc ---------- */
.sec { padding: 64px 0; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.nf { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 80px 0; }
.nf > div { display: grid; gap: 18px; justify-items: center; }
.legal { max-width: 760px; padding: 48px 0 80px; }
.warn { border-radius: 16px; background: #FFF4CC; color: #5C4700; padding: 16px 18px; font-size: 14px; margin: 20px 0 28px; }

/* ---------- reveal ---------- */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.js .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hd__nav { display: none; }
  .burger { display: block; }
  .hd__bar { justify-content: space-between; }
  .cats { grid-template-columns: repeat(3, 1fr); }
  .docs { grid-template-columns: repeat(3, 1fr); }
  .ft__cols { grid-template-columns: repeat(3, 1fr); }
  .labs__cards, .posts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .wrap, .wrap--md { width: calc(100% - 32px); }
  .panel { padding: 48px 24px; }
  .hero__cards, .tiles3, .tcards, .signup, .pp, .compare, .how, .hub, .calc, .feat-post, .stats { grid-template-columns: 1fr; }
  .hub__txt { padding: 40px 28px; }
  .hub__media { min-height: 360px; }
  .hcard { min-height: 400px; }
  .ptile { min-height: 360px; }
  .ptile__render { height: 50%; bottom: 2%; }
  .ptile__phone { bottom: -170px; }
}
@media (max-width: 600px) {
  .wrap, .wrap--md { width: calc(100% - 24px); }
  .hd__right .btn--line { display: none; }
  .cats, .labs__cards, .posts { grid-template-columns: 1fr 1fr; }
  .docs { grid-template-columns: 1fr 1fr; }
  .ft__cols { grid-template-columns: 1fr 1fr; }
  .cat { font-size: 13px; padding: 10px; gap: 8px; }
  .cat i { width: 32px; height: 32px; }
  .promo { font-size: 13px; flex-wrap: wrap; }
  .hh-ticker { font-size: 13px; }
  .hh-ticker__set li { padding: 0 18px; }
  .signup form { flex-direction: column; }
  .person { flex-basis: 260px; }
  .calc__out b { font-size: 60px; }
}

/* =========================================================
   Category worlds: full-bleed rounded panels, as on hims.com
   (measured at 1440: panel full width, radius 24; inner column 1068;
   stacked cards 1100 wide; frosted cards 356x516, blur 37px)
   ========================================================= */
.world { position: relative; margin-top: 40px; border-radius: var(--r-card); overflow: hidden; padding-bottom: 40px; isolation: isolate; }
.world.panel--blue { background: linear-gradient(180deg, #F1F6FF 0%, #D9E6FB 32%, #C6D9F6 100%); }
.world__in { width: min(1068px, 100% - 40px); margin-inline: auto; }
.world__head { width: min(1068px, 100% - 40px); margin: 0 auto 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.world__head h3 { font-size: 28px; line-height: 1.12; font-weight: 500; letter-spacing: -.01em; }
.world__note { width: min(700px, 100% - 40px); margin: 24px auto 0; text-align: center; font-size: 12px; line-height: 1.5; color: var(--navy-ink-2); }
.world__note a { text-decoration: underline; font-weight: 600; }
.world--sex .world__note, .world--labs .world__note { color: rgba(255, 255, 255, .66); }
.h-xl { font-size: clamp(38px, 4.2vw, 57px); line-height: 1.08; font-weight: 410; letter-spacing: -.01em; }
.h-xxl { font-size: clamp(52px, 5.7vw, 82px); line-height: 1; font-weight: 410; letter-spacing: -.01em; }
.btn--pastel { background: var(--pastel); color: var(--navy-ink); }
.rail-ctrl--glass button { background: rgba(255, 255, 255, .55); color: var(--navy-ink); }
.world--sex .rail-ctrl--glass button { background: rgba(255, 255, 255, .14); color: #fff; }
.circle--xl { width: 96px; height: 96px; background: var(--navy-ink); }
.circle--xl .ic { width: 30px; height: 30px; }
.circle--glass { background: rgba(255, 255, 255, .14); }

/* weight loss world */
.wl__intro { padding: 60px 20px 0; display: grid; justify-items: center; gap: 18px; text-align: center; }
.wl__intro .lead { max-width: 520px; }
.wl__stage { display: flex; justify-content: center; margin-top: 12px; }
/* man cut-out with floating liquid-glass pills (from the Longiva design) */
.wl__stage--person { position: relative; width: min(1312px, 100% - 40px); height: clamp(460px, 44vw, 620px); margin: 20px auto 0; align-items: flex-end; }
.wl__person { position: relative; z-index: 1; height: 100%; width: auto; max-width: none; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
.lgp { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.lgp__i { position: absolute; display: inline-flex; align-items: center; height: clamp(44px, 3.6vw, 56px); padding: 0 clamp(18px, 1.8vw, 28px); border-radius: 9999px; white-space: nowrap; font-size: clamp(14px, 1.25vw, 19px); font-weight: 400; letter-spacing: -.01em; color: var(--navy-ink); }
.lgp__i.liquid-glass { position: absolute; }


.lineup { padding: 32px 0 8px; }
.grail, .frail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 max(20px, calc((100% - 1068px) / 2)) 4px; scroll-padding-inline: max(20px, calc((100% - 1068px) / 2)); }
.grail::-webkit-scrollbar, .frail::-webkit-scrollbar { display: none; }
.gcard { flex: 0 0 320px; scroll-snap-align: start; border-radius: var(--r-card); background: rgba(255, 255, 255, .55); padding: 18px 20px 22px; display: grid; grid-template-rows: auto 220px auto; gap: 14px; transition: background .2s; }
.gcard:hover { background: rgba(255, 255, 255, .75); }
.gcard__tags, .fcard__tags { display: flex; gap: 4px; flex-wrap: wrap; }
.gtag { height: 22px; padding: 0 8px; border-radius: 100px; font-size: 11px; font-weight: 600; line-height: 22px; background: rgba(19, 37, 77, .08); color: var(--navy-ink); }
.gtag--hl { background: var(--navy-ink); color: #fff; }
.gcard__img { display: grid; place-items: center; overflow: hidden; }
.gcard__img img { max-height: 200px; width: auto; max-width: 100%; filter: drop-shadow(0 18px 22px rgba(19, 37, 77, .25)); }
.gcard h4 { font-size: 22px; line-height: 1.15; font-weight: 500; }
.gcard__meta { font-size: 14px; color: var(--navy-ink-2); margin-top: 4px; }
.gcard__price { font-size: 14px; font-weight: 600; margin-top: 6px; }

/* unbranded CSS pen */
.pen3d { position: relative; width: 46px; height: 230px; border-radius: 23px; transform: rotate(24deg); background: linear-gradient(90deg, #CBD3E0, #FFFFFF 35%, #F1F4F9 62%, #BAC4D3); box-shadow: 0 26px 30px -14px rgba(19, 37, 77, .5); }
.pen3d i { position: absolute; display: block; }
.pen3d__cap { left: 0; right: 0; top: 0; height: 66px; border-radius: 23px 23px 6px 6px; background: linear-gradient(90deg, #8EA7D4, #E2EBFA 40%, #C3D3EE 70%, #7D96C7); }
.pen3d__label { left: 3px; right: 3px; top: 92px; height: 74px; border-radius: 4px; background: linear-gradient(90deg, #6F86CC, #A9B9EC 42%, #8095D6); display: grid; place-items: center; font: normal 500 24px/1 var(--serif); color: #fff; }
.pen3d__dial { left: 7px; right: 7px; bottom: -12px; height: 24px; border-radius: 6px; background: linear-gradient(90deg, #13254D, #3A4F86 45%, #13254D); }

/* stacked cards */
.stack { width: min(1100px, 100% - 32px); margin: 32px auto 0; display: grid; gap: 8px; }
.stack--page { width: 100%; margin-top: 12px; }
.scard { position: relative; display: block; border-radius: var(--r-card); overflow: hidden; min-height: 480px; isolation: isolate; color: #fff; }
.scard__top { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 40px; }
.scard__top h3 { font-size: clamp(26px, 2.4vw, 33px); line-height: 1.1; font-weight: 450; letter-spacing: -.01em; max-width: 300px; }
.scard__top p { font-size: 15px; line-height: 1.4; opacity: .76; max-width: 280px; margin-top: 10px; }
.scard--app > img.bg { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); max-width: none; object-fit: cover; filter: blur(7px) saturate(.85); z-index: -2; }
.scard--app::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(10, 20, 48, .82) 0%, rgba(10, 20, 48, .45) 55%, rgba(10, 20, 48, .6) 100%); }
.phone3d { position: absolute; left: 50%; bottom: -150px; z-index: 1; width: 280px; height: 570px; padding: 10px; border-radius: 46px; transform: translateX(-38%) rotate(26deg); background: linear-gradient(145deg, #E4ECFB, #A9C1EC 60%, #8DA8DD); box-shadow: 0 50px 70px -20px rgba(0, 0, 0, .65); }
.phone3d__screen { height: 100%; border-radius: 37px; background: #F7F9FD; color: var(--navy-ink); padding: 44px 16px 16px; display: grid; gap: 10px; align-content: start; font-size: 12px; line-height: 1.35; overflow: hidden; position: relative; }
.phone3d__screen::before { content: ""; position: absolute; top: 12px; left: 50%; width: 84px; height: 24px; border-radius: 14px; transform: translateX(-50%); background: #0c0c0c; }
.phone3d__bar { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid rgba(19, 37, 77, .1); }
.phone3d__bar b { font-size: 13px; }
.phone3d__bar span { font-size: 10px; color: #2BB673; font-weight: 600; }
.bub { background: #fff; border-radius: 14px 14px 14px 4px; padding: 9px 11px; box-shadow: 0 1px 2px rgba(19, 37, 77, .08); max-width: 92%; }
.bub--flag { background: var(--pastel); color: var(--hl); font-weight: 600; font-size: 11px; justify-self: start; border-radius: 100px; padding: 5px 10px; }
.bub--me { background: var(--navy-ink); color: #fff; justify-self: end; border-radius: 14px 14px 4px 14px; }

.scard--scale { min-height: 527px; color: var(--navy-ink); background: radial-gradient(55% 62% at 50% 40%, #F6F9FF 0%, #CFDFF8 52%, #A9C4EE 100%); }
.scale__read { position: absolute; left: 0; right: 0; top: 89px; z-index: 2; display: grid; justify-items: center; gap: 4px; pointer-events: none; }
.scale__num { font-size: clamp(56px, 5.2vw, 75px); line-height: 1; font-weight: 410; letter-spacing: -.02em; }
.scale__num small { font-size: inherit; color: rgba(19, 37, 77, .42); margin-left: 4px; }
.scale__sync { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; color: var(--navy-ink-2); }
.scale__sync i { width: 9px; height: 9px; border-radius: 50%; background: #2BB673; }
.scale::before { content: ""; position: absolute; inset: 16px; border-radius: 50px; box-shadow: inset 0 0 0 1px rgba(19, 37, 77, .07); }

/* sexual health world */
.world--sex { background: #16224A; color: #fff; }
.sex__bg { position: absolute; left: 0; right: 0; top: 0; height: 1340px; z-index: -1; }
.sex__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.sex__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 34, 74, .45) 0%, rgba(22, 34, 74, .15) 30%, rgba(22, 34, 74, .4) 62%, #16224A 86%); }
.sex__hero { padding: 96px 0 300px; }
.sex__btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.everyone { padding-bottom: 24px; }
.fcard { flex: 0 0 356px; height: 516px; scroll-snap-align: start; position: relative; display: flex; flex-direction: column; padding: 18px; border-radius: var(--r-card); color: #fff; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(37px); backdrop-filter: blur(37px); transition: background .2s; }
.fcard:hover { background: rgba(255, 255, 255, .14); }
.fcard__tags { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.ftag { height: 20px; padding: 0 7px; border-radius: 100px; font-size: 11px; font-weight: 600; line-height: 20px; background: rgba(255, 255, 255, .17); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ftag--hl { background: #5B7CD6; }
.fcard h3 { font-size: 28px; line-height: 1.1; font-weight: 500; letter-spacing: -.01em; }
.fcard__ingr { font-size: 13px; color: rgba(255, 255, 255, .58); margin-top: 6px; }
.fcard__price { font-size: 13px; margin-top: 4px; }
.fcard .pill3d, .fcard .circle { margin: auto auto 80px; }

/* CSS pills with a debossed "n" */
.pill3d { --c1: #F1EEFC; --c2: #B9B0E0; --c3: #6F63A8; width: 116px; height: 116px; border-radius: 50%; display: grid; place-items: center; flex: none; background: radial-gradient(circle at 34% 28%, var(--c1), var(--c2) 58%, var(--c3) 100%); box-shadow: inset -6px -10px 16px rgba(0, 0, 0, .2), inset 4px 6px 10px rgba(255, 255, 255, .4), 0 28px 30px -12px rgba(0, 0, 0, .6); font: 500 66px/1 var(--serif); color: var(--c2); text-shadow: -1px -1px 1px rgba(0, 0, 0, .28), 1px 1px 1px rgba(255, 255, 255, .55); user-select: none; }
.pill3d--oval { width: 156px; height: 86px; font-size: 46px; }
.pill3d--chew { border-radius: 30%; }
.pill3d--sm { width: 56px; height: 56px; font-size: 30px; box-shadow: inset -3px -5px 8px rgba(0, 0, 0, .2), inset 2px 3px 5px rgba(255, 255, 255, .4), 0 12px 14px -6px rgba(0, 0, 0, .35); }
.pill3d--sm.pill3d--oval { width: 74px; height: 42px; font-size: 22px; }
/* photoreal tablet renders (assets/img/pill-*.webp) in the CSS pills' slots: width only, height follows */
.pill-render { width: 116px; height: auto; max-height: none; flex: none; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(19, 37, 77, .25)); }
.pill-render--oval { width: 156px; }
.prow__img .pill-render, .cmp__img .pill-render, .fc__media > .pill-render { width: 116px; height: auto; max-height: none; }
.prow__img .pill-render--oval, .cmp__img .pill-render--oval, .fc__media > .pill-render--oval { width: 156px; }
.bubbles .pill-render { width: 48px; height: auto; filter: drop-shadow(0 4px 6px rgba(19, 37, 77, .28)); }
.bubbles .pill-render--oval { width: 56px; }

.duo { width: min(1100px, 100% - 32px); margin: 32px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quiz { min-height: 600px; border-radius: var(--r-card); padding: 40px; display: grid; align-content: center; justify-items: center; gap: 56px; text-align: center; background: linear-gradient(180deg, #7C9BEA 0%, #34509F 100%); }
.quiz h3 { font-size: clamp(32px, 3.1vw, 44px); line-height: 1.1; font-weight: 450; letter-spacing: -.01em; max-width: 380px; }
.quiz__opts { display: grid; gap: 8px; justify-items: center; }
.quiz__opts a { height: 54px; padding: 0 27px; border-radius: var(--r-pill); display: inline-flex; align-items: center; font-size: 18px; font-weight: 500; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: background .2s; }
.quiz__opts a:hover { background: rgba(255, 255, 255, .24); }
.tsl { position: relative; min-height: 600px; border-radius: var(--r-card); padding: 44px 24px; display: flex; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(70px); backdrop-filter: blur(70px); }
.tsl__slides { flex: 1; display: grid; }
.tsl__slide { grid-area: 1 / 1; margin: 0; padding: 0 52px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.tsl__slide.is-on { opacity: 1; visibility: visible; }
.tsl__stars { color: var(--hl-light); letter-spacing: 3px; font-size: 18px; }
.tsl blockquote { margin: 14px 0 0; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.1; letter-spacing: -.01em; }
.tsl__who { display: grid; gap: 2px; justify-items: start; }
.tsl__who .sample { margin-bottom: 6px; }
.tsl__who b { font-size: 16px; font-weight: 500; }
.tsl__who span:last-child { font-size: 14px; color: rgba(255, 255, 255, .66); }
.tsl__nav { position: absolute; left: 12px; right: 12px; top: 50%; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
.tsl__nav button { pointer-events: auto; width: 36px; height: 36px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
.tsl__dots { position: absolute; right: 76px; bottom: 50px; display: flex; gap: 6px; }
.tsl__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .32); cursor: pointer; transition: width .25s, background .25s; }
.tsl__dots button[aria-selected="true"] { width: 22px; background: #fff; }

/* testosterone world */
.world--t { background: linear-gradient(180deg, #E6E8FB 0%, #EEF3FD 45%, #F6F8FE 100%); color: var(--navy-ink); }
.t__intro { padding: 72px 20px 0; display: grid; justify-items: center; gap: 24px; text-align: center; }
.t__stage { display: flex; align-items: flex-end; justify-content: center; gap: 22px; height: 240px; padding-bottom: 10px; }
.t__stage .vial { margin-top: 0; }
.vial--lg { width: 88px; height: 150px; }
.vial--lg::before { width: 70px; }
.vial--sm { width: 30px; height: 50px; border-radius: 6px; margin-top: 12px; }
.vial--sm::before { width: 24px; height: 14px; top: -13px; }
.vial--sm b { inset: 14px 0 10px; font-size: 6px; letter-spacing: .04em; }
.tduo { width: min(1100px, 100% - 32px); margin: 40px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tcard2 { position: relative; min-height: 480px; border-radius: var(--r-card); padding: 30px; display: flex; flex-direction: column; background: linear-gradient(127deg, #FFFFFF 2%, #F1F5FD 97%); }
.tcard2 h3 { font-size: 28px; line-height: 1.12; font-weight: 460; }
.tcard2 h3 b { display: block; font-weight: inherit; }
.tcard2 h3 span { display: block; color: #7D8DB0; }
.tcard2__sub { font-size: 13px; margin-top: 14px; color: var(--navy-ink-2); }
.tcard2__sub > span:not(.ph) { color: var(--hl); }
.tcard2 > .pill3d, .tcard2__vials { margin: auto; }
.tcard2__vials { display: flex; gap: 18px; align-items: flex-end; }
.tcard2 .btn { position: absolute; right: 30px; bottom: 30px; }

/* labs world */
.world--labs { padding: 72px 0 40px; }
.labs__intro { width: min(1068px, 100% - 40px); margin: 0 auto; display: grid; justify-items: center; gap: 20px; text-align: center; }
.labs__eyebrow { font-size: 16px; font-weight: 500; letter-spacing: .02em; color: rgba(255, 255, 255, .7); }
.labs__photo { width: min(700px, 100%); aspect-ratio: 7 / 4; border-radius: var(--r-card); overflow: hidden; margin: 12px 0 4px; }
.labs__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.labs__grid { width: min(1100px, 100% - 32px); margin: 40px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.labs__grid .lcard { min-height: 360px; padding: 40px 32px; justify-content: flex-start; align-items: center; text-align: center; gap: 18px; }
.labs__grid .lcard h3 { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.05; }
.labs__grid .lcard p { max-width: 340px; font-size: 15px; }
.labs__grid .biomarkers { justify-content: center; max-width: 380px; }
.lcard__art { margin-top: auto; }
span.lcard__art { display: flex; align-items: flex-end; gap: 16px; padding-top: 20px; }
.plan-mini { width: min(280px, 100%); display: grid; gap: 8px; padding: 18px; border-radius: 18px; text-align: left; background: rgba(255, 255, 255, .92); color: var(--navy-ink); font-size: 13px; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6); }
.plan-mini b { font-size: 14px; }
.plan-mini span { display: flex; align-items: center; gap: 8px; }
.plan-mini i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--navy-ink-2); flex: none; }
.plan-mini i.done { background: var(--hl); box-shadow: none; }
.trend { width: min(300px, 100%); height: auto; overflow: visible; }
.trend__grid { stroke: rgba(255, 255, 255, .12); stroke-width: 1; fill: none; }
.trend__line { stroke: var(--hl-light); stroke-width: 3; fill: none; stroke-linecap: round; }
.trend circle { fill: #0F2533; stroke: var(--hl-light); stroke-width: 2.5; }
.trend .trend__now { fill: var(--hl-light); }

/* hero chips (two-line, product art on the right) */
.cats--duo { grid-template-columns: repeat(4, 1fr); }
.cats--duo .cat { justify-content: space-between; min-height: 96px; padding: 16px 20px; font-size: 20px; line-height: 1.15; font-weight: 450; }
.cats--duo .cat em { display: block; font-style: normal; color: var(--ink-3); }
.cat__art { display: grid; place-items: center; width: 80px; height: 64px; flex: none; }

@media (max-width: 900px) {
  .world { margin-top: 24px; }
  .duo, .tduo { grid-template-columns: 1fr; }
  .scard__top { flex-direction: column; padding: 28px; gap: 16px; }
  .scard--app { min-height: 520px; }
  .phone3d { width: 220px; height: 450px; bottom: -150px; border-radius: 38px; }
  .phone3d__screen { border-radius: 30px; font-size: 11px; }
  .scard--scale { min-height: 560px; }
  .scale__read { position: relative; top: auto; margin-top: 8px; }
  .scale { bottom: -110px; width: min(440px, 86%); }
  .sex__hero { padding: 72px 0 200px; }
  .fcard { flex-basis: 300px; height: 460px; }
  .quiz, .tsl { min-height: 480px; }
  .tsl__slide { padding: 0 36px; }
  .tsl__dots { right: 60px; bottom: 48px; }
  .cats--duo { grid-template-columns: 1fr 1fr; }
  .labs__grid { grid-template-columns: 1fr; }
  .labs__grid .lcard { min-height: 0; }
}
@media (max-width: 600px) {
  .world { border-radius: 20px; margin-top: 16px; padding-bottom: 28px; }
  .wl__intro { padding-top: 44px; }
  .wl__stage--person { height: auto; width: calc(100% - 24px); flex-direction: column; align-items: center; }
  .wl__person { height: 320px; }
  .lgp { position: relative; inset: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: -34px; }
  .lgp__i { position: relative; left: auto !important; right: auto !important; top: auto !important; height: 36px; padding: 0 14px; font-size: 13px; }
  .world__head h3 { font-size: 24px; }
  .gcard { flex-basis: 270px; grid-template-rows: auto 180px auto; }
  .gcard__img img { max-height: 170px; }
  .scard__top h3 { font-size: 26px; }
  .scale__num { font-size: 52px; }
  .scale__sync { font-size: 15px; }
  .fcard { flex-basis: 270px; height: 430px; }
  .fcard h3 { font-size: 24px; }
  .sex__hero { padding: 56px 0 160px; }
  .quiz { padding: 32px 20px; gap: 32px; }
  .tsl { padding: 28px 16px 76px; }
  .tsl__slide { padding: 0 8px; }
  .tsl__nav { top: auto; bottom: 20px; transform: none; left: auto; right: 16px; gap: 8px; justify-content: flex-end; }
  .tsl__dots { right: auto; left: 24px; bottom: 34px; }
  .t__intro { padding-top: 48px; }
  .t__stage { height: 200px; gap: 14px; }
  .tcard2 { min-height: 420px; padding: 24px; }
  .tcard2 h3 { font-size: 24px; }
  .tcard2 .btn { right: 24px; bottom: 24px; }
  .world--labs { padding: 48px 0 32px; }
  .cats--duo .cat { font-size: 16px; min-height: 80px; padding: 12px 14px; }
  .cat__art { width: 56px; transform: scale(.8); }
}

/* =========================================================
   Shop pages (hims /shop templates: weight-loss hub, drug pages, labs)
   gallery + sticky siderail, bubble headers, card rows, overlaid banners
   ========================================================= */
.shop-sec { padding: 72px 0; }
.shop-sec--tight { padding: 40px 0; }
.d-s { font-size: clamp(36px, 3.4vw, 48px); line-height: 1.05; font-weight: 410; letter-spacing: -.015em; }
.d-l { font-size: clamp(44px, 5.6vw, 80px); line-height: 1; font-weight: 410; letter-spacing: -.02em; }
.h-xl2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; font-weight: 430; letter-spacing: -.01em; }
.tag-s { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 100px; font-size: 12px; font-weight: 600; background: var(--pastel); color: var(--navy-ink); }
.tag-s--rx { background: var(--navy-ink); color: #fff; }
.tag-s--line { background: transparent; box-shadow: inset 0 0 0 1px rgba(19, 37, 77, .2); }

/* hub hero */
.wl-hero { display: grid; grid-template-columns: 1fr 1.15fr; gap: 12px; padding: 24px 0 12px; }
.wl-hero__txt { border-radius: var(--r-card); background: var(--grey-2); padding: 56px; display: grid; align-content: end; justify-items: start; gap: 20px; min-height: 560px; }
.wl-hero__txt .lead { max-width: 440px; }
.wl-hero__card { position: relative; border-radius: var(--r-card); overflow: hidden; min-height: 560px; display: grid; place-items: center; background: linear-gradient(180deg, #F1F6FF 0%, #D9E6FB 55%, #BCD3F5 100%); }
.wl-hero__card img { height: clamp(300px, 32vw, 460px); width: auto; max-width: none; transform: rotate(-8deg); filter: drop-shadow(0 40px 50px rgba(19, 37, 77, .3)); }
.wl-hero__badge { position: absolute; left: 24px; top: 24px; display: grid; gap: 2px; padding: 14px 18px; border-radius: 18px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--navy-ink); }
.wl-hero__badge small { font-size: 12px; color: var(--navy-ink-2); }
.wl-hero__badge b { font-size: 20px; font-weight: 500; }
.wl-hero__chip { position: absolute; right: 24px; bottom: 24px; display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 100px; background: var(--navy-ink); color: #fff; font-size: 14px; font-weight: 500; }

/* bubbles + heading header */
.bub-head { display: grid; justify-items: center; gap: 18px; text-align: center; margin-bottom: 40px; }
.bub-head--left { justify-items: start; text-align: left; }
.bubbles { display: flex; }
.bubbles span { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; box-shadow: 0 0 0 4px #fff; background: var(--pastel); }
.bubbles span + span { margin-left: -14px; }
.bubbles img { width: 100%; height: 100%; object-fit: cover; }
.bubbles .pill3d { transform: scale(.42); }
.bub-head .lead { max-width: 560px; }

/* product list (hub) */
.plist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.prow { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; padding: 16px; border-radius: var(--r-card); background: var(--grey-2); }
.prow__img { aspect-ratio: 1; border-radius: 18px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(180deg, #F1F6FF, #D3E2FA); }
.prow__img img { max-height: 78%; width: auto; filter: drop-shadow(0 16px 20px rgba(19, 37, 77, .25)); }
.prow__body { display: grid; gap: 6px; align-content: center; justify-items: start; }
.prow__tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.prow h3 { font-size: 24px; line-height: 1.1; font-weight: 500; }
.prow__sub { font-size: 14px; color: var(--ink-3); }
.prow__price { font-size: 15px; font-weight: 600; margin-top: 4px; }
.prow__price span { font-weight: 400; color: var(--ink-3); font-size: 13px; }
.prow__btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.isi-link { font-size: 12px; text-decoration: underline; color: var(--ink-3); }
.disclaim { max-width: 860px; margin: 28px auto 0; font-size: 12px; line-height: 1.55; color: var(--ink-3); text-align: center; }

/* membership */
.member { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.member__img { border-radius: var(--r-card); overflow: hidden; min-height: 460px; position: relative; }
.member__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.member__card { border-radius: var(--r-card); background: var(--pastel-grad); color: var(--navy-ink); padding: 48px; display: grid; align-content: center; gap: 22px; }
.ticks { display: grid; gap: 14px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.35; }
.ticks li i { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--navy-ink); color: #fff; }
.ticks li i .ic { width: 14px; height: 14px; }
.ticks li b { font-weight: 600; }
.member__card .small { color: var(--navy-ink-2); }

/* feature card row ("forever" cards) */
.frow { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 12px; }
.fc { display: grid; gap: 14px; align-content: start; }
.fc__media { aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; position: relative; display: grid; place-items: center; background: var(--grey-2); }
.fc__media > img { width: 100%; height: 100%; object-fit: cover; }
.fc__media--pastel { background: linear-gradient(180deg, #F1F6FF, #D3E2FA); }
.fc__media--navy { background: radial-gradient(80% 80% at 50% 30%, #2C3F7A, #16224A); color: #fff; }
.fc__media .big { font-size: clamp(44px, 4vw, 64px); font-weight: 410; letter-spacing: -.02em; line-height: 1; }
.fc h3 { font-size: 22px; line-height: 1.15; font-weight: 500; }
.fc p { font-size: 15px; color: var(--ink-2); }

/* gallery + siderail */
.prod { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; padding: 24px 0 56px; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gallery > li { aspect-ratio: 1; border-radius: var(--r-card); overflow: hidden; position: relative; display: grid; place-items: center; background: var(--grey-2); }
.gallery > li:first-child { grid-column: 1 / -1; aspect-ratio: 5 / 4; }
.gallery > li > img.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery .g-pastel { background: linear-gradient(180deg, #F1F6FF 0%, #D9E6FB 60%, #C2D7F5 100%); }
.gallery .g-navy { background: radial-gradient(80% 80% at 50% 30%, #2C3F7A, #16224A); color: #fff; }
.gallery .g-render { width: auto; max-width: 70%; max-height: 78%; filter: drop-shadow(0 30px 40px rgba(19, 37, 77, .3)); }
.gallery .note { position: absolute; left: 18px; right: 18px; bottom: 14px; font-size: 11px; color: var(--navy-ink-2); }
.g-info { display: grid; gap: 6px; text-align: center; padding: 24px; color: var(--navy-ink); }
.g-info b { font-size: clamp(36px, 3.4vw, 52px); font-weight: 410; line-height: 1; letter-spacing: -.02em; }
.g-info span { font-size: 14px; color: var(--navy-ink-2); }
.g-navy .g-info, .g-navy .g-info span { color: #fff; }
.g-navy .g-info span { opacity: .7; }
.siderail { position: sticky; top: 96px; display: grid; gap: 18px; align-content: start; }
.siderail__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.siderail h1 { margin-top: 2px; }
.siderail__sub { font-size: 16px; color: var(--ink-3); font-weight: 450; margin-top: -10px; }
.siderail__desc { font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.siderail__price { display: flex; align-items: baseline; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.siderail__price b { font-size: 24px; font-weight: 500; }
.siderail__price span { font-size: 13px; color: var(--ink-3); }
.siderail__ctas { display: grid; gap: 8px; }
.btn--xl { height: 56px; font-size: 16px; }
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-size: 16px; font-weight: 500; cursor: pointer; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 22px; font-weight: 300; transition: transform .2s; }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc ul { list-style: disc; padding: 0 0 18px 18px; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.acc p { padding: 0 0 18px; font-size: 14px; color: var(--ink-2); }
.fine { font-size: 12px; line-height: 1.5; color: var(--ink-3); display: grid; gap: 6px; }

/* consult steps (image + steps) */
.consult { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.consult__img { border-radius: var(--r-card); overflow: hidden; position: relative; min-height: 480px; }
.consult__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.consult__steps { display: grid; gap: 12px; }
.cstep { border-radius: var(--r-card); background: var(--grey-2); padding: 28px; display: grid; grid-template-columns: 48px 1fr; gap: 6px 18px; align-content: center; }
.cstep i { grid-row: span 2; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--pastel); color: var(--navy-ink); font-style: normal; font-weight: 600; }
.cstep h3 { font-size: 22px; font-weight: 500; }
.cstep p { font-size: 15px; color: var(--ink-2); }

/* comparison */
.cmp { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(240px, 1fr)); gap: 12px; overflow-x: auto; scrollbar-width: none; }
.cmp::-webkit-scrollbar { display: none; }
.cmp__col { border-radius: var(--r-card); background: var(--grey-2); padding: 20px; display: grid; gap: 14px; align-content: start; }
.cmp__col--on { background: var(--pastel-grad); }
.cmp__img { height: 150px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, .6); overflow: hidden; }
.cmp__img img { max-height: 130px; width: auto; filter: drop-shadow(0 14px 18px rgba(19, 37, 77, .25)); }
.cmp__col h3 { font-size: 22px; font-weight: 500; }
.cmp dl { margin: 0; display: grid; gap: 10px; }
.cmp dt { font-size: 12px; color: var(--ink-3); }
.cmp dd { margin: 0; font-size: 15px; font-weight: 500; }

/* dose steps */
.dose { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: dose; }
.dose li { border-radius: var(--r-card); background: var(--grey-2); padding: 24px; display: grid; gap: 8px; align-content: start; position: relative; }
.dose li::before { counter-increment: dose; content: "Step " counter(dose); font-size: 12px; font-weight: 600; color: var(--hl); }
.dose b { font-size: 24px; font-weight: 500; }
.dose p { font-size: 14px; color: var(--ink-2); }
.dose li:last-child { background: var(--navy-ink); color: #fff; }
.dose li:last-child::before { color: var(--hl-light); }
.dose li:last-child p { color: rgba(255, 255, 255, .72); }

/* even columns (heading left, content right) */
.evens { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; }
.evens__head { display: grid; gap: 16px; justify-items: start; position: sticky; top: 110px; }

/* overlaid image banner */
.overlaid { position: relative; border-radius: var(--r-card); overflow: hidden; min-height: 560px; display: flex; align-items: flex-end; padding: 56px; color: #fff; isolation: isolate; }
.overlaid > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.overlaid::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 20, 48, .1) 30%, rgba(10, 20, 48, .7)); }
.overlaid__in { display: grid; gap: 22px; justify-items: start; max-width: 640px; }
.overlaid .lead { color: rgba(255, 255, 255, .82); }
.overlaid--top { align-items: flex-start; }
.overlaid--top::before { background: linear-gradient(180deg, rgba(10, 20, 48, .65), rgba(10, 20, 48, .1) 70%); }

/* stories (sample, no outcome numbers) */
.stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.story { border-radius: var(--r-card); background: var(--grey-2); overflow: hidden; display: grid; grid-template-rows: 300px auto; }
.story__img { position: relative; }
.story__img img { width: 100%; height: 100%; object-fit: cover; }
.story__img .sample { position: absolute; top: 14px; left: 14px; }
.story__body { padding: 22px 24px 26px; display: grid; gap: 14px; align-content: start; }
.story blockquote { margin: 0; font-size: 19px; line-height: 1.35; }
.story__who b { display: block; font-weight: 500; }
.story__who span { font-size: 13px; color: var(--ink-3); }

/* article cards */
.arts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.art { display: grid; gap: 12px; align-content: start; }
.art__img { aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden; }
.art__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.art:hover .art__img img { transform: scale(1.03); }
.art h3 { font-size: 19px; line-height: 1.25; font-weight: 500; }
.art span { font-size: 13px; color: var(--ink-3); }

/* mobile sticky CTA */
.sticky-cta { display: none; }

@media (max-width: 1100px) {
  .plist { grid-template-columns: 1fr; }
  .dose { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .wl-hero, .member, .consult, .prod, .evens { grid-template-columns: 1fr; }
  .wl-hero__txt { min-height: 0; padding: 40px 28px; }
  .wl-hero__card { min-height: 420px; }
  .prod { gap: 28px; }
  .siderail, .evens__head { position: static; }
  .gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 8px; }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery > li, .gallery > li:first-child { flex: 0 0 88%; aspect-ratio: 1; scroll-snap-align: start; }
  .frow, .stories, .arts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .frow::-webkit-scrollbar, .stories::-webkit-scrollbar, .arts::-webkit-scrollbar { display: none; }
  .frow > *, .stories > *, .arts > * { flex: 0 0 78%; scroll-snap-align: start; }
  .consult__img { min-height: 320px; }
  .member__img { min-height: 320px; }
  .member__card { padding: 32px 24px; }
  .overlaid { min-height: 460px; padding: 32px 24px; }
  .shop-sec { padding: 48px 0; }
  .sticky-cta { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; gap: 8px; padding: 8px; border-radius: 100px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 10px 30px -10px rgba(19, 37, 77, .4); }
  .sticky-cta .btn { flex: 1; height: 48px; }
  .has-sticky { padding-bottom: 72px; }
}
@media (max-width: 600px) {
  .prow { grid-template-columns: 110px 1fr; gap: 14px; padding: 12px; }
  .prow h3 { font-size: 20px; }
  .prow__btns .btn { height: 38px; padding: 0 14px; font-size: 13px; }
  .dose { grid-template-columns: 1fr; }
  .cstep { padding: 22px; }
  .wl-hero__card { min-height: 360px; }
}
.prow__img img.cover-img { max-height: none; width: 100%; height: 100%; object-fit: cover; filter: none; }
.prow__img .pen3d, .cmp__img .pen3d { transform: rotate(24deg) scale(.6); }
.fc__media .pen3d { transform: rotate(24deg) scale(.85); }
.gallery .pen3d { transform: rotate(24deg) scale(1.35); }
.labs-hero { min-height: 620px; }
.trend--ink .trend__grid { stroke: rgba(19, 37, 77, .12); }
.trend--ink .trend__line { stroke: var(--hl); }
.trend--ink circle { fill: #fff; stroke: var(--hl); }
.trend--ink .trend__now { fill: var(--hl); }
.fc__media .trend { width: 72%; }
.cmp__col .ticks li { font-size: 15px; }
@media (max-width: 600px) {
  .prow__img .pill3d { transform: scale(.7); }
  .prow__img .pill3d--oval { transform: scale(.6); }
  .prow__img .pill-render { width: 82px; }
  .prow__img .pill-render--oval { width: 94px; }
  .prow__img .pen3d { transform: rotate(24deg) scale(.42); }
  .labs-hero { min-height: 560px; }
}
.cmp__img img[src*="pill-l"], .prow__img img[src*="pill-l"] { max-height: 58%; }
.labs-hero .overlaid__in { max-width: 860px; }

/* =========================================================
   Longiva sky hero (from the Longiva Claude Design file "World Model Hero")
   Manrope; glass cards rgba(255,255,255,.16) + blur 18px, radius 22; pill nav #1F2E4A
   ========================================================= */
.lg-stage { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px 28px 40px 40px; padding-top: 112px; color: #fff; background: #16224A; }
.lg-bg { position: absolute; inset: 0; z-index: -1; }
.lg-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.lg-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 34, 74, .62) 0%, rgba(22, 34, 74, .3) 32%, rgba(22, 34, 74, .5) 68%, rgba(22, 34, 74, .92) 100%); }
.gnav { display: flex; justify-content: center; padding: 0 16px; margin-bottom: 8px; }
.gnav-bar { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.gnav-bar::-webkit-scrollbar { display: none; }
.gnav-bar a { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; transition: background-color .2s, color .2s; }
.gnav-bar a:hover { background: rgba(255, 255, 255, .18); }
.gnav-bar a.on { background: #fff; color: var(--navy-ink); }
.wh { width: min(1312px, 100% - 64px); margin: 0 auto; padding: clamp(28px, 3vw, 48px) 0 clamp(28px, 3vw, 40px); color: #fff; }
.wh-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 44px); }
.wh-top h1 { margin: 0 0 14px; font-size: clamp(36px, 3.8vw, 54px); font-weight: 600; line-height: 1.1; letter-spacing: -.025em; color: #fff; }
.wh-top p { font-size: clamp(15px, 1.2vw, 18px); color: rgba(255, 255, 255, .82); }
.wh-perks { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .82); }
.wh-perks span { display: flex; align-items: center; gap: 8px; }
.wh-perks .ic { width: 15px; height: 15px; }
.wh-big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.wh-card { position: relative; isolation: isolate; overflow: hidden; min-height: 340px; padding: 30px 28px; border-radius: 22px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; color: #fff; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(37px); backdrop-filter: blur(37px); }
.wh-card > div, .wh-cta { position: relative; z-index: 2; }
.wh-card h2 { margin: 0 0 12px; font-size: clamp(22px, 2vw, 28px); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; max-width: 12ch; }
.wh-price { font-size: clamp(16px, 1.35vw, 19px); color: rgba(255, 255, 255, .8); }
.wh-price b { font-weight: 600; color: #fff; }
.wh-cta { display: inline-flex; align-items: center; height: 42px; padding: 0 26px; border-radius: 999px; background: #fff; color: var(--navy-ink); font-size: 14px; font-weight: 600; transition: transform .2s; }
.wh-card:hover .wh-cta { transform: translateY(-2px); }
.wh-card img { position: absolute; z-index: 1; max-width: none; object-fit: contain; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .4)); }
.wh-card--glp img { right: 2%; top: 0; height: 100%; width: 58%; transform: scale(1.12); }
.wh-card--person img { right: 3%; bottom: 0; height: 104%; width: auto; filter: drop-shadow(0 20px 30px rgba(20, 40, 70, .25)); }
.wh-small { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wh-tile { display: flex; align-items: center; gap: 12px; min-height: 104px; padding: 20px 22px; border-radius: 16px; color: #fff; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(37px); backdrop-filter: blur(37px); transition: background .2s; }
.wh-tile:hover { background: rgba(255, 255, 255, .14); }
.wh-tile > div:first-child { flex: 1; min-width: 0; }
.wh-tile b { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; }
.wh-tile span { font-size: 13px; color: rgba(255, 255, 255, .66); }
.wh-tile-img { position: relative; flex: 0 0 auto; width: 72px; height: 72px; }
.wh-tile-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(20, 40, 70, .3)); }
.wh-tile i { display: flex; }
.wh-tile i .ic { width: 14px; height: 14px; }
.wh-note { margin-top: 18px; max-width: 780px; font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, .66); }

/* header sits on the sky on the home page */
.home .hd { position: absolute; top: 0; left: 0; right: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.home .hd .logo { color: #fff; }
.home .hd__nav, .home .hd .btn--line { display: none; }
.home .hd__meta { display: flex; flex: 1; gap: clamp(24px, 3vw, 44px); margin-left: clamp(12px, 3vw, 40px); font-size: 17px; letter-spacing: -.04em; color: rgba(255, 255, 255, .88); }
.home .hd .btn--black { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75); }
.home .hd .btn--black:hover { background: #fff; color: var(--navy-ink); filter: none; }
.home .burger { background: rgba(255, 255, 255, .14); }
.home .burger span { background: #fff; }

@media (max-width: 900px) {
  .lg-stage { padding-top: 96px; border-radius: 28px 28px 32px 32px; }
  .wh { width: calc(100% - 32px); }
  .wh-big, .wh-small { grid-template-columns: 1fr; }
  .wh-card { min-height: 300px; }
  .home .hd__meta { font-size: 14px; }
  .home .hd__meta span + span { display: none; }
  .gnav { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .home .hd__meta { display: none; }
  .wh-card { min-height: 280px; padding: 24px 22px; }
  .wh-card--glp img { width: 62%; right: -4%; }
  .wh-card--person img { height: 92%; right: -6%; }
  .logo { font-size: 21px; }
  .logo-ar { font-size: 12px; }
}

/* Longiva renders and cut-outs */
.consult__img--cut, .member__img--cut { background: var(--pastel-grad); }
.consult__img--cut img, .member__img--cut img { top: 8%; height: 92%; object-fit: contain; object-position: 50% 100%; }
.fc__media > img.fit { width: auto; height: 62%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .35)); }
.gallery .g-render--lg { max-width: 46%; max-height: 64%; width: 46%; }
.gallery .g-render--side { position: absolute; right: 16%; bottom: 14%; width: 16%; max-height: 40%; }
.fcard .fcard__render { width: 150px; margin: auto auto 70px; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .55)); }
.bubbles img[src*="lg-"] { object-fit: contain; padding: 6px; }
@media (max-width: 600px) {
  .wh-card > div { max-width: 64%; }
  .wh-card--glp img { top: 12%; height: 88%; width: 54%; right: -6%; transform: none; }
}

/* =========================================================
   Dissolving product graphic (ro.co-style annotated pill, rebuilt as canvas particles)
   ========================================================= */
.dz { position: relative; overflow: hidden; border-radius: var(--r-card); margin-bottom: 40px; background: radial-gradient(55% 60% at 50% 42%, #FFFFFF 0%, #EAF1FD 45%, #D3E1F8 100%); }
.dz__stage { position: relative; height: clamp(560px, 50vw, 720px); }
.dz__floor { position: absolute; left: 28%; right: 28%; bottom: 5%; height: 10%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(19, 37, 77, .22), rgba(19, 37, 77, 0) 72%); filter: blur(6px); }
.dz__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dz__seg { position: absolute; display: block; background: var(--navy-ink); transition: transform .9s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--d, 0s); }
.dz__seg--h { height: 1.5px; transform: scaleX(0); }
.dz__seg--v { width: 1.5px; transform: scaleY(0); }
.dz.is-in .dz__seg--h { transform: scaleX(1); }
.dz.is-in .dz__seg--v { transform: scaleY(1); }
.dz__dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--navy-ink); box-shadow: 0 0 0 5px rgba(255, 255, 255, .75); transform: scale(0); transition: transform .45s cubic-bezier(.22, 1, .36, 1) .1s; }
.dz.is-in .dz__dot { transform: scale(1); }
.dz__label { position: absolute; max-width: 23%; opacity: 0; transform: translateY(12px); transition: opacity .8s, transform .8s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--d, 0s); }
.dz.is-in .dz__label { opacity: 1; transform: none; }
.dz__label h3 { font-size: clamp(24px, 2.5vw, 40px); line-height: 1.04; font-weight: 450; letter-spacing: -.02em; color: var(--navy-ink); }
.dz__label p { margin-top: 10px; font-size: 15px; line-height: 1.4; color: var(--navy-ink-2); }
@media (prefers-reduced-motion: reduce) {
  .dz__seg, .dz__dot, .dz__label { transition: none; }
}
@media (max-width: 900px) {
  .dz__stage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; padding: 0 22px 30px; }
  .dz__canvas { position: relative; inset: auto; grid-column: 1 / -1; aspect-ratio: 1; height: auto; }
  .dz__floor, .dz__seg, .dz__dot { display: none; }
  .dz__label { position: static; max-width: none; padding-left: 16px; border-left: 2px solid var(--navy-ink); }
  .dz__label h3 { font-size: 22px; }
  .dz__label p { font-size: 14px; margin-top: 6px; }
}
@media (max-width: 480px) {
  .dz__stage { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .wl__stage--person { height: auto; width: calc(100% - 24px); flex-direction: column; align-items: center; }
  .wl__person { height: 400px; }
  .lgp { position: relative; inset: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; margin: -34px auto 0; }
  .lgp__i { position: relative; left: auto !important; right: auto !important; top: auto !important; height: 38px; padding: 0 16px; font-size: 14px; }
}
@media (max-width: 600px) {
  .wl__person { height: 320px; }
  .lgp__i { height: 36px; padding: 0 14px; font-size: 13px; }
}

/* ══ Special glass (Longiva liquid-glass recipe, verbatim) ══ */
.liquid-glass{position:relative;background:rgba(255,255,255,0.01);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:inset 0 1px 1px rgba(255,255,255,.1);}
.liquid-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:linear-gradient(135deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.15) 30%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 60%,rgba(255,255,255,.15) 75%,rgba(255,255,255,.45) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}

.liquid-glass-strong{position:relative;background:rgba(255,255,255,0.01);backdrop-filter:blur(50px);-webkit-backdrop-filter:blur(50px);box-shadow:4px 4px 4px rgba(0,0,0,.05),inset 0 1px 1px rgba(255,255,255,.15);}
.liquid-glass-strong::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:linear-gradient(135deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.2) 30%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 60%,rgba(255,255,255,.2) 75%,rgba(255,255,255,.5) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}

@media (max-width: 900px) {
  .wl__person { -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
  .lgp__i.liquid-glass { position: relative; }
}

/* DarDoc colouring for the home weight-loss panel (cream #FEF9EF into DarDoc's panel gradient #F6EFE3 → #EFE5D5) */
.world.world--sand { margin-top: 0; padding-top: 72px; border-top-left-radius: 0; border-top-right-radius: 0; background: linear-gradient(180deg, #FFFFFF 0%, #FEFBF5 6%, #FEF9EF 14%, #F6EFE3 46%, #EFE5D5 100%); }

/* Smart-scale card in DarDoc colouring: cream #FEF9EF / sand #F6EFE3 → #EFE5D5, deep-teal ink #173B3D */
.scard--scale { color: #173B3D; background: radial-gradient(55% 62% at 50% 40%, #FEF9EF 0%, #F6EFE3 52%, #EFE5D5 100%); }
.scard--scale .scard__top p { color: rgba(23, 59, 61, .7); opacity: 1; }
.scard--scale .btn--accent { background: #173B3D; color: #FEF9EF; }
.scale__num small { color: rgba(23, 59, 61, .4); }
.scale__sync { color: rgba(23, 59, 61, .7); }
.scale::before { box-shadow: inset 0 0 0 1px rgba(23, 59, 61, .07); }

/* =========================================================
   DarDoc sections inside the sand panel (ported from v2: service cards + regulator logo strip)
   ========================================================= */
.dd-svc { margin-top: 72px; color: #173B3D; }
.dd-svc__title { font-size: clamp(26px, 2.25vw, 32px) !important; line-height: 1.1; font-weight: 350 !important; letter-spacing: -.02em; color: #173B3D; }
.dd-rail { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px max(20px, calc((100% - 1068px) / 2)) 4px; scroll-padding-inline: max(20px, calc((100% - 1068px) / 2)); }
.dd-rail::-webkit-scrollbar { display: none; }
.dd-card { flex: 0 0 342px; scroll-snap-align: start; }
.dd-card__img { position: relative; height: 428px; border-radius: 14px; overflow: hidden; background: #F7EEE0; }
.dd-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.dd-card:hover .dd-card__img img { transform: scale(1.03); }
.dd-pill { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 16px; border-radius: 999px; background: #fff; border: 1px solid rgba(23, 59, 61, .16); font-size: 13px; line-height: 1; font-weight: 450; letter-spacing: .005em; color: #173B3D; }
.dd-pill svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dd-card h3 { margin-top: 24px; font-size: 20.6px; line-height: 1.25; font-weight: 300; letter-spacing: .0025em; color: #173B3D; }
.dd-card p { margin-top: 10px; font-size: 15.6px; line-height: 1.5; font-weight: 350; color: rgba(23, 59, 61, .7); }
.dd-press { margin: 72px auto 0; width: min(1312px, 100% - 40px); display: flex; justify-content: center; }
.dd-press__run { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px clamp(28px, 3.4vw, 52px); }
.dd-press__run img { flex: none; width: auto; filter: grayscale(1); opacity: .55; transition: filter .3s, opacity .3s; }
.dd-press__run img:hover { filter: none; opacity: 1; }
.dd-press__run .lg-white, .dd-press__run .lg-white:hover { filter: brightness(0); opacity: .42; }
.dd-press__run .lg-white:hover { opacity: .85; }
.dd-press__run .lg-dha { height: 44px; }
.dd-press__run .lg-mohap { height: 42px; }
.dd-press__run .lg-nabidh { height: 40px; }
.dd-press__run .lg-doh, .dd-press__run .lg-dm { height: 34px; }
.dd-press__run .lg-ede { height: 26px; }
@media (max-width: 600px) {
  .dd-svc { margin-top: 48px; }
  .dd-card { flex-basis: 78vw; }
  .dd-card__img { height: auto; aspect-ratio: 342 / 428; }
  .dd-press { margin-top: 48px; }
  .dd-press__run { gap: 22px 36px; }
  .dd-press__run .lg-dha { height: 42px; }
  .dd-press__run .lg-mohap { height: 40px; }
  .dd-press__run .lg-nabidh { height: 38px; }
  .dd-press__run .lg-doh, .dd-press__run .lg-dm { height: 32px; }
  .dd-press__run .lg-ede { height: 24px; }
}

/* faded desert behind the man + liquid-glass pills (gives the glass texture to refract) */
.wl__stage--person { isolation: isolate; }
.wl__stage--person::before { content: ""; position: absolute; z-index: -1; inset: -6% -12% -2%; pointer-events: none;
  background: url("../img/dunes.webp") 50% 68% / cover no-repeat; opacity: .48; filter: saturate(.85);
  -webkit-mask-image: radial-gradient(60% 62% at 50% 52%, #000 34%, rgba(0, 0, 0, .55) 58%, transparent 80%);
  mask-image: radial-gradient(60% 62% at 50% 52%, #000 34%, rgba(0, 0, 0, .55) 58%, transparent 80%); }
@media (max-width: 900px) {
  .wl__stage--person::before { inset: -4% -20% -4%; -webkit-mask-image: radial-gradient(75% 60% at 50% 55%, #000 30%, transparent 80%); mask-image: radial-gradient(75% 60% at 50% 55%, #000 30%, transparent 80%); }
}

/* GLP-1 cards: hims's weight-loss product cards in the hero-sky grey, on the sand section */
.lineup--caramel .grail { gap: 12px; }
.lineup--caramel .gcard { position: relative; flex: 0 0 352px; height: 428px; padding: 16px; display: block; border-radius: 28px; background: linear-gradient(180deg, #A2A4AC 0%, #AEA9AD 50%, #A9A1A2 100%); color: #fff; transition: filter .2s; }
.lineup--caramel .gcard:hover { background: linear-gradient(180deg, #A2A4AC 0%, #AEA9AD 50%, #A9A1A2 100%); filter: brightness(1.04); }
.lineup--caramel .gcard__img { position: absolute; left: 16px; right: 16px; top: 0; height: 257px; display: flex; align-items: flex-end; justify-content: center; overflow: visible; }
.lineup--caramel .gcard__img::after { content: ""; position: absolute; left: 50%; top: 250px; width: var(--sw, 110px); height: 14px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(19, 37, 77, .4), rgba(19, 37, 77, 0)); }
.lineup--caramel .gcard__img--pen { --sw: 64px; }
.lineup--caramel .gcard__img img { max-height: none; width: auto; max-width: none; filter: none; }
.lineup--caramel .gcard__img--pill img { height: 122px; margin-bottom: 50px; filter: drop-shadow(0 10px 14px rgba(19, 37, 77, .2)); }
.lineup--caramel .gcard__img img.gpen { width: var(--len, 180px); height: auto; margin-bottom: var(--lift, 68px); transform: rotate(var(--tilt, 80deg)); filter: drop-shadow(6px 10px 12px rgba(19, 37, 77, .22)); }
.lineup--caramel .gcard--ask .circle--xl { margin-bottom: 44px; background: var(--navy-ink); color: #fff; }
.lineup--caramel .gcard__txt { position: absolute; left: 16px; right: 16px; bottom: 16px; }
.lineup--caramel .gcard h4 { font-size: 30px; line-height: 1.1; font-weight: 500; letter-spacing: -.01em; }
.lineup--caramel .gcard__price { font-size: 14px; font-weight: 400; margin-top: 10px; color: rgba(255, 255, 255, .82); }
.lineup--caramel .gcard__meta { font-size: 15px; color: #fff; margin-top: 8px; }
.lineup--caramel .gcard--ask .gcard__meta { font-size: 14px; line-height: 1.4; margin-top: 10px; color: rgba(255, 255, 255, .82); }
.lineup--caramel .gtag--amber { position: absolute; left: 12px; top: 12px; z-index: 2; height: 22px; line-height: 22px; padding: 0 10px; background: #fff; color: var(--navy-ink); font-size: 12px; }
.gbadge-defs { position: absolute; }
.gbadge { position: absolute; right: 18px; top: 18px; width: 60px; height: 60px; overflow: visible; }
.gbadge__ring { font: 600 5.4px/1 var(--sans); letter-spacing: .4px; fill: #fff; }
.gbadge__c { font: 600 13px/1 var(--sans); fill: #fff; }

/* warm "All-new app" card (hims's phone card) */
.scard--warm { min-height: 480px; aspect-ratio: 2.32; }
.scard--warm > img.bg { filter: blur(6px) saturate(.9); }
.scard--warm::before { background: linear-gradient(100deg, rgba(48, 32, 16, .86) 0%, rgba(48, 32, 16, .5) 55%, rgba(48, 32, 16, .62) 100%); }
.scard--warm .scard__top { padding: 48px; }
.scard--warm .scard__top h3 { font-size: clamp(28px, 2.6vw, 37px); max-width: 360px; }
.scard--warm .scard__top p { font-size: 17px; opacity: .72; max-width: 320px; }
.btn--amber { background: #FEC670; color: #2A1D10; height: 56px; padding: 0 32px; font-size: 17px; }
.scard--warm .phone3d { background: linear-gradient(145deg, #F6E7D2, #D9B58A 60%, #B88A5C); }
.scard--warm .phone3d__screen { background: #FBF6EE; color: #2A1D10; }
.scard--warm .phone3d__bar { border-bottom-color: rgba(42, 29, 16, .12); }
.scard--warm .bub { box-shadow: 0 1px 2px rgba(42, 29, 16, .1); }
.scard--warm .bub--flag { background: #FEC670; color: #3A2A17; }
.scard--warm .bub--me { background: #5A4330; }
@media (max-width: 900px) {
  .scard--warm { aspect-ratio: auto; min-height: 600px; }
  .scard--warm .scard__top { padding: 28px; }
}
@media (max-width: 600px) {
  .lineup--caramel .gcard { flex-basis: 300px; height: 380px; border-radius: 22px; }
  .lineup--caramel .gcard__img { height: 224px; }
  .lineup--caramel .gcard__img::after { top: 217px; }
  .lineup--caramel .gcard__img--pill img { height: 104px; margin-bottom: 42px; }
  .lineup--caramel .gcard__img img.gpen { --len: 150px !important; --lift: 60px !important; }
  .lineup--caramel .gcard h4 { font-size: 26px; }
  .gbadge { width: 52px; height: 52px; right: 14px; top: 14px; }
  .btn--amber { height: 48px; padding: 0 24px; font-size: 15px; }
}


/* smart-scale render in the "Effortlessly connected" card: the handle close-up, natural proportions, bleeding off the right and bottom */
.scale-img { position: absolute; left: 40%; top: -100px; z-index: 1; width: 720px; height: auto; max-width: none; filter: drop-shadow(0 30px 40px rgba(23, 59, 61, .3)); }
.scard--scale .scale__read { left: 40px; right: auto; top: 300px; justify-items: start; }
@media (min-width: 901px) { .scard--scale .scard__top .btn { position: absolute; left: 40px; top: 436px; } }
@media (max-width: 900px) {
  .scard--scale .scale__read { position: relative; left: auto; top: auto; margin: 8px 0 0 28px; }
  .scale-img { position: relative; left: auto; top: auto; display: block; width: 115%; margin: 12px 0 -42% 18%; }
}


/* photoreal tablets in the sexual-health rail: kept small, like the pills they replace */
.fcard .fcard__render--photo { width: 128px; height: auto; margin: auto auto 80px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35)); }
.fcard .fcard__render--wide { width: 176px; }

/* round tablets fill the tile slot edge to edge, so pull them in to match the thinner objects */
.wh-tile-img--sm img { inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); }

/* ---------- labs hero: warm stage with a slow 3D carousel of sample report cards ---------- */
.lab-hero { position: relative; overflow: hidden; border-radius: 28px; padding: 46px 20px 0; color: #fff; isolation: isolate; text-align: center;
  background: linear-gradient(180deg, #F2CDAE 0%, #E8B48E 46%, #D9987A 100%); }
.lab-hero__glow { position: absolute; z-index: 0; left: 50%; top: 40px; width: 980px; height: 620px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 50% at 50% 45%, rgba(255, 240, 214, .85) 0%, rgba(255, 232, 200, .4) 40%, rgba(255, 225, 190, 0) 70%); }
.lab-hero__head { position: relative; z-index: 2; display: grid; justify-items: center; gap: 14px; }
.lab-hero__logo { position: absolute; z-index: 3; top: 26px; right: 30px; color: #fff; text-shadow: 0 1px 14px rgba(120, 60, 30, .25); }
.lab-hero__eyebrow { font-size: 14px; font-weight: 500; letter-spacing: .01em; color: rgba(255, 255, 255, .86); }
.lab-hero__eyebrow b { font-weight: 700; }
.lab-hero__title { font-size: clamp(34px, 4.1vw, 56px); line-height: 1.04; font-weight: 410; letter-spacing: -.02em; max-width: 760px; text-wrap: balance; text-shadow: 0 2px 24px rgba(120, 60, 30, .18); }
/* the stage is laid out at 1312px and scaled to the panel ([data-stage] in main.js); the cards' positions come from the drift script */
.lab-stage-wrap { --s: 1; position: relative; z-index: 1; height: calc(392px * var(--s)); margin: 18px -20px 0; }
.lab-stage { position: absolute; left: 50%; top: 0; width: 1312px; height: 392px; margin-left: -656px; transform-origin: top left; transform: translateX(calc(656px - 656px * var(--s))) scale(var(--s)); }
.lab-fan { position: absolute; inset: 0; perspective: 1700px; perspective-origin: 50% 40%; }
.lab-card { position: absolute; left: 0; top: 24px; width: var(--w, 232px); padding: 16px 16px 14px; border-radius: 12px; text-align: left; font-size: 12px; line-height: 1.32; color: #fff;
  background: linear-gradient(165deg, rgba(96, 48, 28, .66) 0%, rgba(68, 30, 16, .8) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 34px 54px -30px rgba(70, 30, 14, .7);
  transform-origin: 50% 50%; transform: translateX(-50%); will-change: transform; backface-visibility: hidden; }
.lab-card h3 { font-size: 14px; line-height: 1.25; font-weight: 600; letter-spacing: -.005em; display: flex; align-items: center; gap: 6px; }
.lab-card h3 em { font-style: normal; font-size: 16px; line-height: 1; opacity: .7; }
.lab-card p { font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, .86); margin-top: 8px; }
.lab-sub { display: block; font-size: 11px; line-height: 1.3; color: rgba(255, 255, 255, .68); margin-top: 3px; }
.lab-sub--h { margin-top: 14px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.lab-card .lab-ok { color: #8FE3A8; } .lab-card .lab-warn { color: #FFD27A; } .lab-card .lab-bad { color: #FF8C7A; }
.lab-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 100px; font-size: 10px; font-weight: 600; white-space: nowrap; background: rgba(255, 255, 255, .12); }
.lab-chip.lab-ok { background: rgba(143, 227, 168, .18); }
.lab-tag { display: inline-block; height: 18px; line-height: 18px; padding: 0 8px; border-radius: 100px; background: #E5484D; color: #fff; font-size: 10px; font-weight: 600; margin-bottom: 10px; }
.lab-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.lab-rows { list-style: none; margin-top: 8px; }
.lab-rows li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.lab-rows li:first-child { border-top: 0; }
.lab-rows li > div { flex: 1; min-width: 0; display: grid; gap: 1px; }
.lab-rows li b { font-weight: 600; font-size: 12px; }
.lab-rows li span { font-size: 10.5px; }
.lab-rows li i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.lab-rows li i.lab-ok { background: #8FE3A8; } .lab-rows li i.lab-warn { background: #FFD27A; } .lab-rows li i.lab-bad { background: #FF8C7A; }
.lab-rows li em { font-style: normal; font-size: 16px; line-height: 1; opacity: .6; }
.lab-rows--plain li { padding: 7px 0; }
.lab-note { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 10px 10px; border-radius: 9px; background: rgba(255, 255, 255, .1); font-size: 10.5px; line-height: 1.35; color: rgba(255, 255, 255, .9); }
.lab-note i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--sans); font-style: normal; background: #fff; color: #C47A52; }
.lab-note em { font-style: normal; font-size: 16px; opacity: .7; margin-left: auto; }
.lab-bar { height: 5px; margin-top: 14px; border-radius: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.lab-bar i { display: block; height: 100%; border-radius: 3px; background: #8FE3A8; }
.lab-big { font-size: 60px; line-height: 1; font-weight: 300; letter-spacing: -.03em; margin: 22px 0 10px; font-variant-numeric: tabular-nums; }
.lab-big small { font-size: 13px; font-weight: 500; letter-spacing: 0; margin-left: 6px; color: rgba(255, 255, 255, .75); }
.lab-card--big { --w: 226px; padding-bottom: 20px; background: linear-gradient(180deg, rgba(96, 48, 28, .66) 0%, rgba(68, 30, 16, .74) 50%, rgba(36, 104, 72, .82) 100%); }
.lab-card--big p { margin-top: 0; }
.lab-card--list { --w: 240px; }
.lab-card--trend { --w: 224px; }
.lab-trend { display: block; width: 100%; height: auto; margin-top: 12px; }
.lab-trend__lbl { font: 500 8.5px var(--sans); fill: rgba(255, 255, 255, .78); }
.lab-axis { display: flex; justify-content: space-between; margin-top: 4px; padding-left: 36%; font-size: 9px; color: rgba(255, 255, 255, .62); }
.lab-card--heart { --w: 228px; }
.lab-card--flag { --w: 236px; }
.lab-card--stack { --w: 68px; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; display: grid; gap: 6px; }
.lab-tile { padding: 9px 8px 8px; border-radius: 9px; background: linear-gradient(165deg, rgba(96, 48, 28, .66), rgba(68, 30, 16, .8)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 24px 40px -30px rgba(70, 30, 14, .7); display: grid; gap: 6px; }
.lab-tile span { font-size: 8.5px; color: rgba(255, 255, 255, .78); white-space: nowrap; }
.lab-tile b { font-size: 18px; line-height: 1; font-weight: 500; }
.lab-hero__cta { position: relative; z-index: 6; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 0 0 40px; }
.lab-hero__cta .btn--lg { height: 56px; padding: 0 30px; font-size: 16px; }
.lab-hero__cta .btn--white { color: var(--navy-ink); }
.lab-hero__cta .btn--glass { background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.lab-hero__note { width: min(640px, 100% - 40px); margin: 18px auto 0; text-align: center; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
@media (max-width: 760px) {
  .lab-hero { border-radius: 22px; padding-top: 34px; }
  .lab-hero__title { font-size: 34px; }
  .lab-hero__logo { top: 16px; right: 16px; font-size: 18px; }
  .lab-hero__logo .logo-ar { font-size: 10px; }
  /* no stage scaling on phones: the drift script lays the cards out at .72 with a tighter pitch */
  .lab-stage-wrap { height: 290px; margin: 10px 0 0; }
  .lab-stage { left: 0; top: 0; width: 100%; height: 290px; margin: 0; transform: none; }
  .lab-fan { perspective: 1000px; }
  .lab-card { top: 10px; }
  .lab-hero__cta { padding: 6px 0 30px; }
  .lab-hero__cta .btn--lg { height: 50px; padding: 0 24px; font-size: 15px; }
  .lab-hero__glow { width: 560px; height: 420px; top: 20px; }
}

/* ---------- WhatsApp care-team panel: copy on the left, an iPhone running WhatsApp on the right ---------- */
.panel--wa { padding: 64px 64px 44px; color: #fff; isolation: isolate; background: #16224A; }
.panel--wa::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("../img/dunes-sunset.webp") 50% 55% / cover no-repeat; }
.panel--wa::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(22, 34, 74, .66) 0%, rgba(22, 34, 74, .42) 40%, rgba(22, 34, 74, .78) 100%); }
.wa { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.wa__copy { padding-bottom: 0; }
.wa__eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); margin-bottom: 14px; }
.panel--wa .lead { margin-top: 14px; max-width: 460px; color: rgba(255, 255, 255, .84); }
.wa__points { list-style: none; margin-top: 24px; display: grid; gap: 10px; max-width: 460px; }
.wa__points li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.4; }
.wa__points li i { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: rgba(255, 255, 255, .16); position: relative; }
.wa__points li i::before { content: ""; position: absolute; left: 7px; top: 5px; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.panel--wa .panel__btns { margin-top: 28px; }
.ic--wa { width: 20px; height: 20px; }
.wa__note { margin-top: 16px; font-size: 12px; color: rgba(255, 255, 255, .6); }
.wa__phone { display: flex; justify-content: center; }
/* the handset */
.wa-phone { width: 318px; height: 736px; padding: 11px; border-radius: 54px; background: #141416; box-shadow: inset 0 0 0 2px #313136, inset 0 0 0 4px #09090a, 0 60px 90px -36px rgba(0, 0, 0, .65), 0 18px 40px -20px rgba(0, 0, 0, .4); }
.wa-screen { position: relative; height: 100%; border-radius: 43px; overflow: hidden; display: flex; flex-direction: column; background: #EFE7DD; color: #111; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
.wa-status { position: relative; display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 12px 26px 0; background: #F6F6F6; font-size: 15px; font-weight: 600; }
.wa-island { position: absolute; left: 50%; top: 12px; width: 96px; height: 30px; border-radius: 18px; background: #000; transform: translateX(-50%); }
.wa-status__r { display: flex; align-items: center; gap: 6px; color: #000; }
.wa-status__r svg { fill: currentColor; }
.wa-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px 9px; background: #F6F6F6; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.wa-back { display: inline-flex; align-items: center; color: #007AFF; font-size: 17px; }
.wa-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-ink); color: #fff; font: 700 17px/1 var(--sans); flex: none; }
.wa-who { flex: 1; min-width: 0; display: grid; line-height: 1.15; }
.wa-who b { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 600; color: #000; }
.wa-who small { font-size: 12px; color: #6b6f73; }
.wa-head__icons { display: flex; align-items: center; gap: 16px; color: #007AFF; padding-right: 2px; }
.wa-chat { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 10px 11px 6px; background: #EFE7DD; }
.wa-day { align-self: center; padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, .9); color: #5b6166; font-size: 11px; font-weight: 600; margin-bottom: 2px; }
.wa-msg { position: relative; max-width: 84%; padding: 7px 9px 5px; border-radius: 11px; font-size: 13.5px; line-height: 1.32; box-shadow: 0 1px 1px rgba(0, 0, 0, .07); }
.wa-msg time { display: block; text-align: right; font-size: 10px; color: rgba(0, 0, 0, .45); margin-top: 2px; }
.wa-msg time svg { vertical-align: -1px; }
.wa-msg--in { align-self: flex-start; background: #fff; border-top-left-radius: 3px; }
.wa-msg--out { align-self: flex-end; background: #DCF8C6; border-top-right-radius: 3px; }
.wa-msg--in::before, .wa-msg--out::before { content: ""; position: absolute; top: 0; border-style: solid; }
.wa-msg--in::before { left: -7px; border-width: 0 8px 9px 0; border-color: transparent #fff transparent transparent; }
.wa-msg--out::before { right: -7px; border-width: 0 0 9px 8px; border-color: transparent transparent transparent #DCF8C6; }
.wa-emo { font-size: 13px; }
.wa-compose { display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: #F6F6F6; border-top: 1px solid rgba(0, 0, 0, .08); color: #007AFF; }
.wa-plus { font-size: 26px; line-height: 1; font-weight: 300; }
.wa-input { flex: 1; display: flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 17px; background: #fff; border: 1px solid rgba(0, 0, 0, .14); color: #111; font-size: 14px; }
.wa-caret { display: inline-block; width: 1.5px; height: 17px; margin-left: 1px; background: #007AFF; animation: wa-blink 1.1s steps(2, start) infinite; }
.wa-sticker { color: #4b5057; }
.wa-send { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #25D366; }
.wa-kbd { background: #D1D4DA; padding: 7px 4px 0; }
.wa-kbd__row { display: flex; justify-content: center; gap: 5px; margin-bottom: 9px; }
.wa-kbd__row span { flex: 0 0 27px; height: 39px; border-radius: 5px; background: #fff; box-shadow: 0 1px 0 #8d8f94; display: grid; place-items: center; font-size: 19px; color: #000; }
.wa-kbd__row .wa-key--fn { flex-basis: 38px; background: #ABB0BA; font-size: 15px; }
.wa-kbd__row .wa-key--123 { flex-basis: 46px; font-size: 14px; }
.wa-kbd__row .wa-key--space { flex: 1 1 auto; max-width: 176px; font-size: 14px; }
.wa-kbd__row .wa-key--ret { flex-basis: 70px; font-size: 14px; }
.wa-kbd__foot { display: flex; justify-content: space-between; padding: 0 14px 4px; color: #50555c; }
.wa-kbd__foot svg { fill: currentColor; }
.wa-home { width: 132px; height: 5px; border-radius: 3px; background: #000; margin: 0 auto 7px; }
@keyframes wa-blink { 50% { opacity: 0; } }
/* the conversation builds up when the panel comes into view */
.js .panel--wa .wa-msg { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.js .panel--wa.is-in .wa-msg { opacity: 1; transform: none; }
.js .panel--wa.is-in .wa-msg:nth-of-type(2) { transition-delay: .5s; }
.js .panel--wa.is-in .wa-msg:nth-of-type(3) { transition-delay: 1.2s; }
@media (prefers-reduced-motion: reduce) { .js .panel--wa .wa-msg { opacity: 1; transform: none; transition: none; } .wa-caret { animation: none; } }
@media (max-width: 900px) {
  .panel--wa { padding: 44px 24px 32px; }
  .wa { grid-template-columns: 1fr; gap: 28px; }
  .wa__copy { padding-bottom: 0; }
  .wa-phone { width: 300px; height: 732px; }
  .wa-kbd__row span { flex-basis: 25px; height: 38px; }
}

/* hero GLP-1 card: the pen in a hand, entering from the right edge */
.wh-card--glp img.wh-card__hand { right: -12%; top: 50%; height: auto; width: 72%; transform: translateY(-50%); }
@media (max-width: 900px) { .wh-card--glp img.wh-card__hand { right: -8%; width: 70%; } }
@media (max-width: 600px) { .wh-card--glp img.wh-card__hand { top: 50%; height: auto; width: 82%; right: -16%; transform: translateY(-50%); } }

/* hero GLP-1 card: the two crossed pens, tall in the card's right half */
.wh-card--glp img.wh-card__pens { right: 1%; top: -4%; height: 108%; width: auto; transform: none; }
@media (max-width: 900px) { .wh-card--glp img.wh-card__pens { right: -2%; } }
@media (max-width: 600px) { .wh-card--glp img.wh-card__pens { top: 32%; height: 70%; right: -10%; transform: none; } }

/* ---------- the app panel: five dark screens fanned out, centre one in front (Oura-style showcase) ---------- */
.panel--app { padding: 72px 64px 56px; background: var(--cream-2); color: var(--ink); }
.app-head { max-width: 720px; margin: 0 auto 40px; text-align: center; display: grid; justify-items: center; gap: 14px; }
.app-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.app-head .lead { max-width: 560px; }
.app-fan { position: relative; height: 640px; }
.app-phone { position: absolute; left: 50%; top: var(--top); z-index: var(--z); width: var(--w); height: var(--h); margin-left: calc(var(--w) / -2 + var(--x));
  padding: 16px 16px 0; border-radius: 38px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; color: #fff; font-size: 12.5px; line-height: 1.35;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 44px 70px -34px rgba(10, 16, 40, .6), 0 10px 24px -14px rgba(10, 16, 40, .35); }
/* screens: a Longiva render or photo behind glass cards, like the home hero cards */
.app-phone { isolation: isolate; }
.app-phone::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.app-phone > * { position: relative; z-index: 1; }
.app-phone--today { background: #16224A url("../img/dunes-sunset.webp") 50% 68% / cover no-repeat; }
.app-phone--today::before { background: linear-gradient(180deg, rgba(22, 34, 74, .42) 0%, rgba(22, 34, 74, .12) 34%, rgba(22, 34, 74, .62) 68%, rgba(22, 34, 74, .9) 100%); }
.app-phone--body { background: linear-gradient(180deg, #B6B6BE 0%, #A9A3A9 48%, #7F7781 100%); }
.app-phone--body::before { background: linear-gradient(180deg, rgba(20, 24, 40, 0) 40%, rgba(20, 24, 40, .35) 100%); }
.app-phone--care { background: #0E1630 url("../img/lg-doctors.webp") 60% 12% / 150% auto no-repeat; }
.app-phone--care::before { background: linear-gradient(180deg, rgba(14, 22, 48, .1) 0%, rgba(14, 22, 48, .2) 36%, rgba(14, 22, 48, .86) 62%, #0E1630 100%); }
.app-phone--labs { background: linear-gradient(180deg, #F7E6D1 0%, #EBC2A0 46%, #DDA486 100%); color: var(--navy-ink); }
.app-phone--labs::before { background: url("../img/dunes.webp") 50% 70% / cover no-repeat; opacity: .32; filter: saturate(.8); }
.app-phone--delivery { background: #F3E9DA url("../img/lg-coldbox.webp") 50% 0 / 130% auto no-repeat; color: var(--navy-ink); }
.app-phone--delivery::before { background: linear-gradient(180deg, rgba(243, 233, 218, 0) 26%, rgba(243, 233, 218, .92) 46%, #EFE5D5 100%); }
.app-phone svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ap-hero-img { position: absolute; z-index: 0; pointer-events: none; max-width: none; height: auto; }
.ap-hero-img--scale { width: 150%; right: -58%; top: -4%; }
.ap-hero-img--tube { width: 62px; right: 22px; top: 58px; transform: rotate(14deg); filter: drop-shadow(0 18px 20px rgba(60, 30, 10, .3)); }
.ap-hero-img--pill { width: 164px; right: 8px; top: 68px; transform: rotate(-16deg); filter: drop-shadow(0 24px 26px rgba(10, 16, 40, .45)); }
/* glass inside the screens needs a little more body than on the page */
.app-phone .liquid-glass { background: rgba(255, 255, 255, .09); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.app-phone--labs .liquid-glass, .app-phone--delivery .liquid-glass { background: rgba(255, 255, 255, .34); }
.ap-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; }
.ap-top svg { width: 16px; height: 16px; }
.ap-logo { font-family: var(--sans); font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.ap-spacer { flex: 1; }
.ap-circle { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.ap-circle svg { width: 18px; height: 18px; }
.ap-circle--sm { width: 34px; height: 34px; }
.ap-circle--sm svg { width: 15px; height: 15px; }
.ap-circle--white { background: #fff !important; color: var(--navy-ink); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .35); }
.ap-glass { border-radius: 18px; padding: 12px 14px; }
.ap-glass small { display: block; font-size: 10.5px; letter-spacing: .01em; opacity: .72; }
.ap-h { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; margin-top: 3px; }
.ap-stat b { display: block; font-size: 34px; font-weight: 300; line-height: 1; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ap-stat b span { font-size: 12px; font-weight: 500; margin-left: 4px; opacity: .8; }
.ap-spark { width: 100%; height: 30px; margin-top: 6px; }
.ap-spark path { stroke-width: 1.6; opacity: .9; }
.ap-spark circle { fill: currentColor; stroke: none; }
.ap-rows { display: grid; gap: 0; padding: 4px 14px; }
.ap-rows div { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, .14); }
.ap-rows div:first-child { border-top: 0; }
.ap-rows b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ap-title { display: grid; gap: 2px; padding: 0 2px; }
.ap-title span { font-size: 20px; font-weight: 300; line-height: 1.1; opacity: .78; }
.ap-title b { font-size: 22px; font-weight: 500; line-height: 1.08; letter-spacing: -.01em; }
.ap-title--lg span { font-size: 26px; }
.ap-title--lg b { font-size: 28px; }
.ap-trio { display: flex; gap: 6px; }
.ap-trio span { flex: 1; display: grid; gap: 3px; padding: 10px 8px; border-radius: 14px; font-size: 10px; line-height: 1.1; opacity: .95; }
.ap-trio b { font-size: 20px; line-height: 1; font-weight: 500; }
.ap-row-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ap-row-card > div { flex: 1; min-width: 0; }
.ap-row-card b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.ap-row-card small { display: block; font-size: 10.5px; opacity: .72; margin-top: 1px; }
.ap-plus { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; font-weight: 300; line-height: 1; opacity: .85; }
.ap-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ap-dot--bad { background: #E5484D; } .ap-dot--warn { background: #E4A11B; }
.ap-cta { display: inline-flex; align-items: center; justify-content: center; height: 42px; border-radius: 21px; background: #fff; color: var(--navy-ink); font-size: 13px; font-weight: 600; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .35); margin-bottom: 18px; }
.ap-card--dose .ap-h { font-size: 16px; }
.ap-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.ap-actions__label { flex: 1; font-size: 12.5px; font-weight: 600; }
.ap-bar { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 34px; }
.ap-bar__label { flex: 1; text-align: center; font-size: 13.5px; font-weight: 500; }
.ap-bar__more { font-size: 15px; letter-spacing: 2px; opacity: .7; padding-right: 12px; }
.ap-nav { display: flex; justify-content: space-between; padding: 6px; border-radius: 32px; margin-bottom: 14px; }
.ap-nav span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; opacity: .72; }
.ap-nav span.on { background: #fff; color: var(--navy-ink); opacity: 1; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .35); }
.ap-nav svg { width: 18px; height: 18px; }
.ap-face { position: relative; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none; }
.ap-face img { width: 100%; height: 100%; object-fit: cover; }
.ap-face i { position: absolute; right: 1px; bottom: 1px; width: 9px; height: 9px; border-radius: 50%; background: #2BB673; box-shadow: 0 0 0 2px #0E1630; }
.ap-msg p { font-size: 12px; line-height: 1.4; margin-top: 4px; }
.ap-steps { display: flex; align-items: center; gap: 0; margin-top: 12px; }
.ap-steps i { flex: 1; height: 5px; border-radius: 3px; background: rgba(19, 37, 77, .14); margin-right: 4px; }
.ap-steps i:last-child { margin-right: 0; }
.ap-steps i.done { background: #2BB673; }
.ap-steps i.now { background: var(--navy-ink); }
.ap-glass .ap-steps__lbl { display: flex; justify-content: space-between; gap: 4px; margin-top: 6px; font-size: 9px; opacity: .72; }
.ap-steps__lbl span { flex: 1; text-align: center; }
.ap-steps__lbl span:first-child { text-align: left; } .ap-steps__lbl span:last-child { text-align: right; }
/* room for the hero objects on the smaller screens */
.app-phone--body { padding-right: 32px; }
.app-phone--delivery { padding-left: 32px; }
/* the phones rise into place when the panel scrolls into view */
.js .panel--app .app-phone { opacity: 0; transform: translateY(40px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
.js .panel--app.is-in .app-phone { opacity: 1; transform: none; }
.js .panel--app.is-in .app-phone--labs, .js .panel--app.is-in .app-phone--care { transition-delay: .12s; }
.js .panel--app.is-in .app-phone--body, .js .panel--app.is-in .app-phone--delivery { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .js .panel--app .app-phone { opacity: 1; transform: none; transition: none; } }
@media (max-width: 1100px) {
  .app-phone { margin-left: calc(var(--w) / -2 + var(--x) * .78); }
}
@media (max-width: 900px) {
  .panel--app { padding: 48px 0 40px; }
  .app-head { padding: 0 24px; margin-bottom: 28px; }
  /* phones become a swipeable row */
  .app-fan { height: auto; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 24px 20px; }
  .app-fan::-webkit-scrollbar { display: none; }
  .app-phone { position: static; flex: 0 0 262px; width: 262px; height: 560px; margin: 0; scroll-snap-align: center; padding-left: 16px; padding-right: 16px; }
  .app-phone--today { order: -1; }
}

/* ---------- "The app that knows your numbers": aden.health's showcase, measured 1:1 at 1536px and scaled to the panel ---------- */
.panel--aden { padding: 56px 0 0; background: #F7F6F1; color: #111214; }
.aden-head { max-width: 760px; margin: 0 auto; text-align: center; padding: 0 24px; }
.aden-head h2 { font-size: 42px; line-height: 52.5px; font-weight: 400; letter-spacing: -.01em; color: #111214; text-wrap: balance; }
.aden-head p { max-width: 564px; margin: 14px auto 0; font-size: 16px; line-height: 22.4px; letter-spacing: .32px; color: #595E61; }
.aden-stage-wrap { --s: 1; position: relative; height: calc(819px * var(--s)); margin-top: -12px; overflow: hidden; }
.aden-stage { position: absolute; left: 50%; top: 0; width: 1536px; height: 819px; margin-left: -768px; transform-origin: top left; transform: translateX(calc(768px - 768px * var(--s))) scale(var(--s)); font-family: var(--sans); color: #111214; }
.aden-glow { position: absolute; border-radius: 50%; filter: blur(26px); opacity: .65; pointer-events: none; background: radial-gradient(closest-side, #fff 0%, rgba(255, 255, 255, .6) 45%, rgba(255, 255, 255, 0) 100%); }
.aden-glow--a { left: 154px; top: 201px; width: 1230px; height: 1230px; }
.aden-glow--b { left: 396px; top: 443px; width: 745px; height: 745px; }
/* the handset: natural-titanium frame, leaning like Aden's, fading out where the hand would be */
.aden-phone { position: absolute; z-index: 1; left: 552px; top: 112px; width: 248px; height: 530px; padding: 8px; border-radius: 44px; transform: rotate(8deg); transform-origin: 50% 0;
  background: linear-gradient(135deg, #E9E8E6 0%, #BDBCBA 30%, #F2F1EF 52%, #B9B8B6 78%, #E4E3E1 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), inset 0 0 0 3px #26272B, 0 40px 60px -30px rgba(17, 18, 20, .45);
  -webkit-mask-image: linear-gradient(180deg, #000 70%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(180deg, #000 70%, rgba(0, 0, 0, 0) 100%); overflow: hidden; }
.aden-screen { position: relative; width: 125%; height: 125%; transform: scale(.8); transform-origin: 0 0; border-radius: 46px; overflow: hidden; background: #F4F2EE; display: flex; flex-direction: column; gap: 10px; padding: 0 14px; }
.aden-status { position: relative; display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 10px 10px 0; font-size: 13px; font-weight: 600; }
.aden-island { position: absolute; left: 50%; top: 10px; width: 92px; height: 28px; border-radius: 16px; background: #000; transform: translateX(-50%); }
.aden-status__r { display: flex; gap: 5px; }
.aden-status__r svg { fill: currentColor; }
.aden-card { position: relative; border-radius: 16px; padding: 14px 16px; color: #fff; overflow: hidden; }
.aden-card--navy { height: 176px; background: linear-gradient(160deg, #1F3B72 0%, #13254D 60%, #0E1B3A 100%); display: grid; justify-items: center; align-content: end; gap: 2px; text-align: center; }
.aden-arc { position: absolute; left: 50%; top: 8px; width: 92%; transform: translateX(-50%); }
.aden-wordmark { font-size: 12px; font-weight: 700; letter-spacing: -.02em; opacity: .95; }
.aden-card__lbl { font-size: 15px; font-weight: 400; opacity: .92; }
.aden-card__lbl--lg { font-size: 19px; margin-top: 2px; }
.aden-card__num { font-size: 34px; line-height: 1; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.aden-card__num small { font-size: 12px; font-weight: 400; margin-left: 6px; opacity: .8; }
.aden-card__meta { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; opacity: .85; margin-top: 8px; }
.aden-card__meta--top { margin: 0; align-self: start; padding: 3px 8px 3px 6px; border-radius: 10px; background: rgba(255, 255, 255, .14); }
.aden-card--sand { height: 190px; background: linear-gradient(160deg, #D9987A 0%, #C9825F 100%); display: grid; align-content: start; gap: 6px; }
.aden-card__row { display: flex; align-items: flex-end; gap: 10px; }
.aden-card__side { display: grid; font-size: 9px; line-height: 1.25; opacity: .9; padding-bottom: 4px; }
.aden-card__side b { font-size: 10px; }
.aden-ruler { position: relative; height: 44px; margin-top: 10px; }
.aden-ruler i { position: absolute; left: 0; right: 0; top: 18px; height: 14px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 1px, transparent 1px 25px); background-size: 100% 8px, 100% 14px; background-position: 0 3px, 0 0; background-repeat: repeat-x; }
.aden-ruler__now { position: absolute; top: 0; transform: translateX(-50%); font-size: 9px; }
.aden-ruler__now::after { content: ""; position: absolute; left: 50%; top: 12px; width: 2px; height: 22px; margin-left: -1px; background: #fff; }
.aden-ruler__ref { position: absolute; top: 34px; transform: translateX(-50%); font-size: 8px; white-space: nowrap; opacity: .9; }
.aden-ruler__ref::before { content: ""; position: absolute; left: 50%; top: -4px; border: 4px solid transparent; border-bottom-color: #fff; margin-left: -4px; margin-top: -4px; }
.aden-card--list { background: #fff; color: #111214; display: flex; justify-content: space-between; align-items: center; height: 60px; box-shadow: 0 1px 3px rgba(17, 18, 20, .06); }
.aden-card--list span { font-size: 15px; }
.aden-card--list small { font-size: 12px; }
/* floating panels: exact Aden layer style */
.aden-p { position: absolute; padding: 19.2px 12.8px; border-radius: 13px; background: rgba(254, 253, 253, .34); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: rgba(17, 18, 20, .16) 0 3.2px 40px 0; font-size: 12px; color: #111214; }
.aden-p--marker { left: 143px; top: 136px; width: 274px; height: 99px; z-index: 1; box-shadow: none; -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px); }
.aden-p--plan { left: 255px; top: 204px; width: 274px; height: 394px; z-index: 2; }
.aden-p--bio { left: 789px; top: 66px; width: 274px; height: 558px; z-index: 0; overflow: hidden; }
.aden-p--scale { left: 1077px; top: 223px; width: 229px; height: 155px; z-index: 0; border-radius: 11px; padding: 16px 10.67px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: rgba(17, 18, 20, .16) 0 2.67px 40px 0; }
.aden-p--labs { left: 996px; top: 426px; width: 269px; height: 152px; z-index: 3; }
.aden-p--heart { left: 511px; top: 527px; width: 361px; height: 183px; z-index: 4; }
.aden-h { display: block; font-size: 16px; font-weight: 400; line-height: 22px; }
.aden-h--sm { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.aden-h--lg { font-size: 19px; line-height: 26px; }
.aden-h svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.aden-sub { display: block; font-size: 11px; color: #6E6A63; margin-top: 12px; }
.aden-t13 { display: block; font-size: 13px; font-weight: 400; line-height: 19px; }
.aden-row { display: flex; align-items: center; gap: 10px; }
.aden-row > div { flex: 1; min-width: 0; }
.aden-row--head { justify-content: space-between; align-items: flex-start; }
.aden-link { font-size: 13px; color: #111214; }
.aden-link--sm { font-size: 10px; }
.aden-link em { font-style: normal; margin-left: 4px; }
.aden-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 30px; font-size: 10px; letter-spacing: .13px; color: #595E61; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 .6px rgba(17, 18, 20, .12); white-space: nowrap; }
.aden-chip--meta { font-size: 8px; color: #6E6A63; }
.aden-hr { display: block; height: 1px; margin: 7px 0 9px; background: rgba(17, 18, 20, .1); }
.aden-dot { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: #6E6A63; margin-top: 1px; }
.aden-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #B9B6B0; }
.aden-dot.st-ok::before { background: #2E8B86; } .aden-dot.st-warn::before { background: #D9A441; } .aden-dot.st-bad::before { background: #C84B4B; }
.aden-bar { width: 3px; height: 32px; border-radius: 3px; background: #2E8B86; flex: none; }
.aden-bar.st-warn { background: #D9A441; } .aden-bar.st-bad { background: #C84B4B; }
.aden-val { font-size: 11px; color: #131415; white-space: nowrap; font-variant-numeric: tabular-nums; }
.aden-val small { font-size: 8px; color: #6E6A63; margin-left: 2px; }
.aden-val--lg { font-size: 14px; }
.aden-val--lg small { font-size: 11px; color: #71717B; margin-left: 3px; }
.aden-spark { width: 64px; height: 32px; flex: none; }
.aden-spark--sm { width: 61px; height: 19px; }
.aden-mk { display: flex; align-items: center; gap: 8px; }
.aden-mk > div { flex: 1; min-width: 0; }
.aden-mk b { display: block; font-size: 13px; font-weight: 400; line-height: 19px; }
.aden-note { margin-top: 8px; font-size: 10px; color: #2E8B86; white-space: nowrap; }
.aden-note.st-ok { margin-top: 8px; color: #2E8B86; font-size: 10px; }
.aden-tabs { display: flex; margin-top: 13px; }
.aden-tabs span { flex: 1; text-align: center; padding: 7px 0; font-size: 13px; color: #6E6A63; border-bottom: 1px solid rgba(17, 18, 20, .08); }
.aden-tabs span.on { color: #111214; border-bottom: 1.5px solid #111214; border-radius: 3px 3px 0 0; }
.aden-tabs--2 span { text-align: center; }
.aden-act { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 13px; border-radius: 13px; background: rgba(254, 253, 253, .55); min-height: 77px; }
.aden-act > div { flex: 1; min-width: 0; }
.aden-act b { display: block; font-size: 13px; font-weight: 400; line-height: 19px; }
.aden-act span { display: block; font-size: 10px; line-height: 13px; color: #6E6A63; margin-top: 3px; }
.aden-ico { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; background: radial-gradient(120% 120% at 30% 25%, #C99068 0%, #9A6A47 60%, #7B5236 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.aden-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.aden-totals { display: flex; align-items: flex-start; gap: 0; margin-top: 16px; }
.aden-total { display: grid; justify-items: start; gap: 6px; width: 51px; flex: none; }
.aden-total b { font-size: 19px; font-weight: 400; line-height: 26px; }
.aden-total span { font-size: 10px; padding: 1px 6px; border-radius: 24px; }
.aden-vline { width: 1px; height: 56px; background: rgba(17, 18, 20, .12); margin: 0 14px 0 0; flex: none; }
.aden-stat { display: grid; gap: 6px; width: 60px; flex: none; }
.aden-stat b { font-size: 19px; font-weight: 400; line-height: 26px; }
.aden-stat i { display: block; height: 3px; border-radius: 3px; }
.aden-stat span { display: inline-flex; align-items: center; gap: 4px; font-size: 8px; color: #6E6A63; padding: 1px 6px 1px 4px; border-radius: 24px; white-space: nowrap; }
.aden-stat em { width: 9px; height: 9px; border-radius: 50%; }
.aden-stat.st-ok b { color: #2E8B86; } .aden-stat.st-ok i, .aden-stat.st-ok em { background: #2E8B86; }
.aden-stat.st-warn b { color: #70428C; } .aden-stat.st-warn i, .aden-stat.st-warn em { background: #70428C; }
.aden-stat.st-bad b { color: #BF4A4A; } .aden-stat.st-bad i, .aden-stat.st-bad em { background: #BF4A4A; }
.aden-row--search { gap: 6px; margin-top: 12px; }
.aden-field { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 13px; background: rgba(255, 255, 255, .95); color: #9C9890; font-size: 13px; flex: 1; box-shadow: inset 0 0 0 .6px rgba(17, 18, 20, .08); }
.aden-field svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.aden-field--select { justify-content: space-between; flex: 1.12; }
.aden-bm { display: flex; align-items: center; gap: 9px; height: 58px; margin-top: 6px; padding: 0 0 0 0; border-radius: 13px; }
.aden-bm:first-of-type { margin-top: 10px; }
.aden-bm > div { flex: 1; min-width: 0; }
.aden-bm b { display: block; font-size: 11px; font-weight: 400; line-height: 16px; }
.aden-bm--empty { background: rgba(254, 253, 253, .55); padding: 0 12px; margin-top: 8px; }
.aden-bm--empty .aden-bar { display: none; }
.aden-tile { width: 32px; height: 32px; border-radius: 8px; flex: none; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg, #2E8B86, #13254D); }
.aden-tile img { height: 26px; width: auto; }
.aden-btn { display: inline-flex; align-items: center; justify-content: center; width: 110px; height: 32px; border-radius: 799px; font-size: 13px; color: #111214; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 .6px rgba(17, 18, 20, .14); flex: none; }
.aden-row--spark { gap: 14px; margin-top: 6px; }
.aden-wave { width: 138px; height: 37px; margin-left: auto; }
.aden-heart { display: flex; gap: 25px; align-items: flex-start; margin-top: 14px; }
.aden-ring-wrap { position: relative; width: 77px; display: grid; justify-items: center; gap: 10px; }
.aden-ring { width: 77px; height: 77px; }
.aden-ring-wrap > b { position: absolute; top: 24px; font-size: 26px; font-weight: 300; color: #2E8B86; line-height: 1; }
.aden-ring-wrap .aden-chip { font-size: 8px; }
.aden-heart__txt { flex: 1; min-width: 0; }
.aden-heart__txt p { font-size: 10px; line-height: 16px; color: #6E6A63; }
.aden-tick { display: block; width: 70px; height: 8px; margin: 8px 0 6px; }
@media (max-width: 760px) {
  .panel--aden { padding-top: 40px; border-radius: 22px; }
  .aden-head h2 { font-size: 30px; line-height: 36px; }
  .aden-head p { font-size: 15px; line-height: 21px; }
  .aden-stage-wrap { margin-top: 0; }
}

/* ---------- protocol pages: hero, glass rows, loop, systems, tiers, proof, biological age, infusions ---------- */
.pg-hero { position: relative; overflow: hidden; border-radius: 28px; min-height: 560px; display: grid; align-items: center; padding: 56px; color: #fff; isolation: isolate; background: #16224A; }
.pg-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.pg-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(22, 34, 74, .84) 0%, rgba(22, 34, 74, .55) 50%, rgba(22, 34, 74, .28) 100%), linear-gradient(180deg, rgba(22, 34, 74, .15), rgba(22, 34, 74, .6)); }
.pg-hero__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.pg-hero__eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .8; margin-bottom: 14px; }
.pg-hero .lead { color: rgba(255, 255, 255, .84); margin-top: 16px; max-width: 520px; }
.pg-hero__ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.pg-hero .btn--white { color: var(--navy-ink); }
.pg-hero .btn--glass, .world--protocol .btn--glass { background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.pg-hero__media { display: grid; justify-items: center; }
.pg-hero__render { width: 220px; height: auto; max-width: none; transform: rotate(8deg); filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .45)); }
.sample--inline { position: static; background: rgba(255, 255, 255, .22); color: #fff; font-size: 9px; line-height: 14px; padding: 1px 6px; border-radius: 6px; vertical-align: middle; }
.gr { width: min(440px, 100%); border-radius: 22px; padding: 18px 20px; color: #fff; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.gr__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.gr__head b { font-size: 16px; font-weight: 600; }
.gr__head small { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; opacity: .8; }
.gr ul { list-style: none; }
.gr li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.gr li:first-child { border-top: 0; }
.gr__k { font-size: 12px; opacity: .75; }
.gr li b { font-size: 15px; font-weight: 600; line-height: 1.25; }
.gr__a { font-size: 12px; color: #9FC3FF; }
/* the six-step loop */
.loop { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.loop li { position: relative; border-radius: var(--r-card); background: var(--grey-2); padding: 24px 20px 22px; display: grid; gap: 10px; align-content: start; }
.loop li i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-ink); color: #fff; font-style: normal; font-weight: 600; font-size: 14px; }
.loop li::after { content: ""; position: absolute; right: -9px; top: 36px; width: 8px; height: 8px; border-right: 1.5px solid rgba(19, 37, 77, .35); border-top: 1.5px solid rgba(19, 37, 77, .35); transform: rotate(45deg); }
.loop li:last-child::after { display: none; }
.loop h3 { font-size: 18px; font-weight: 600; line-height: 1.15; }
.loop p { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.loop--dark li { background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.loop--dark li i { background: #fff; color: var(--navy-ink); }
.loop--dark h3 { color: #fff; }
.loop--dark p { color: rgba(255, 255, 255, .72); }
.loop--dark li::after { border-color: rgba(255, 255, 255, .4); }
/* the eight systems plus the scale */
.sys-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sys { border-radius: var(--r-card); background: var(--grey-2); padding: 24px; display: grid; gap: 12px; align-content: start; }
.sys h3 { font-size: 20px; font-weight: 600; }
.sys .biomarkers span { background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.sys--scale { position: relative; overflow: hidden; background: var(--pastel-grad); color: var(--navy-ink); min-height: 240px; }
.sys--scale img { position: absolute; right: -16%; top: -4%; width: 66%; height: auto; max-width: none; opacity: .95; filter: drop-shadow(0 20px 24px rgba(19, 37, 77, .3)); }
.sys--scale h3, .sys--scale .biomarkers, .sys--scale small { position: relative; }
.sys--scale small { font-size: 12px; color: var(--navy-ink-2); }
/* memberships */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: start; }
.tier { border-radius: var(--r-card); background: var(--grey-2); padding: 28px 24px; display: grid; gap: 14px; align-content: start; }
.tier--on { background: var(--navy-ink); color: #fff; }
.tier__name { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.tier__price { font-size: 34px; font-weight: 410; letter-spacing: -.02em; line-height: 1; }
.tier__price small { font-size: 14px; font-weight: 500; letter-spacing: 0; opacity: .7; }
.tier p { font-size: 15px; color: var(--ink-2); }
.tier--on p { color: rgba(255, 255, 255, .75); }
.tier .ticks { gap: 10px; }
.tier .ticks li { font-size: 14px; line-height: 1.35; }
.tier .ticks li i { width: 22px; height: 22px; }
.tier .ticks li i .ic { width: 12px; height: 12px; }
.tier--on .ticks li i { background: #fff; color: var(--navy-ink); }
.tier--on .btn--black { background: #fff; color: var(--navy-ink); }
.tier .btn { margin-top: 6px; }
/* biological age */
.bio-strip { position: relative; overflow: hidden; border-radius: var(--r-panel); padding: 56px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; color: #fff; isolation: isolate; background: #16224A url("../img/dunes-sunset.webp") 50% 70% / cover no-repeat; }
.bio-strip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(22, 34, 74, .86), rgba(22, 34, 74, .5) 60%, rgba(22, 34, 74, .35)); }
.bio-strip .lead { color: rgba(255, 255, 255, .84); margin: 14px 0 24px; max-width: 520px; }
.bio-strip__txt .btn--black { background: #fff; color: var(--navy-ink); }
.bio-card { width: min(360px, 100%); justify-self: center; border-radius: 24px; padding: 24px 26px; color: #fff; display: grid; gap: 6px; background: rgba(255, 255, 255, .1); }
.bio-card small { font-size: 12px; opacity: .85; display: flex; gap: 8px; align-items: center; }
.bio-card__num { font-size: 64px; line-height: 1; font-weight: 300; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.bio-card__sub { font-size: 14px; opacity: .8; }
.bio-card__drivers { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.bio-card__drivers li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 10px; border-radius: 100px; background: rgba(255, 255, 255, .14); }
.bio-card__drivers i { width: 7px; height: 7px; border-radius: 50%; background: #FFD27A; }
.bio-card__note { font-size: 11px; opacity: .7; margin-top: 8px; }
.bio-card .trend { width: 100%; margin: 8px 0 2px; }
.bio-card .trend--ink .trend__grid { stroke: rgba(255, 255, 255, .14); }
.bio-card .trend--ink .trend__line { stroke: #fff; }
.bio-card .trend--ink circle { fill: #16224A; stroke: #fff; }
.bio-card .trend--ink .trend__now { fill: #fff; }
.bio-card--hero { width: min(400px, 100%); }
.bio-how { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.bio-how__cap { margin-top: 16px; font-size: 13px; opacity: .75; text-align: center; }
/* proof */
.prove { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.prove__card { border-radius: var(--r-card); background: var(--navy-ink); color: #fff; padding: 28px; }
.prove__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.prove__head b { font-size: 20px; font-weight: 600; }
.prove__head small { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; opacity: .75; }
.prove__card ul { list-style: none; }
.prove__card li { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.prove__card li span { flex: 1; font-size: 15px; }
.prove__card li em { font-style: normal; font-size: 18px; font-variant-numeric: tabular-nums; }
.prove__card li em small { font-size: 12px; opacity: .7; margin-left: 4px; }
.prove__card li i { position: relative; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .12); flex: none; }
.prove__card li i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid #8FE3A8; border-top: 1.5px solid #8FE3A8; transform: translate(-50%, -30%) rotate(-45deg); }
.prove__card li i.down::after { transform: translate(-50%, -70%) rotate(135deg); }
.prove__card p { margin-top: 14px; font-size: 12px; opacity: .65; }
/* infusions, described by contents */
.inf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.inf { position: relative; overflow: hidden; border-radius: var(--r-card); padding: 26px 24px 22px 104px; min-height: 230px; display: grid; gap: 10px; align-content: start; background: var(--grey-2); --bag: #D9A6B0; }
.inf__bag { position: absolute; left: 24px; top: 30px; width: 56px; height: 84px; border-radius: 14px 14px 18px 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--bag) 50%, #fff) 0%, var(--bag) 70%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .65), inset 0 -10px 16px rgba(0, 0, 0, .08), 0 12px 22px -10px rgba(0, 0, 0, .3); }
.inf__bag::before { content: ""; position: absolute; left: 50%; top: -9px; width: 18px; height: 12px; margin-left: -9px; border-radius: 6px 6px 0 0; background: rgba(255, 255, 255, .85); }
.inf__bag::after { content: ""; position: absolute; left: 50%; bottom: -13px; width: 10px; height: 15px; margin-left: -5px; border-radius: 0 0 4px 4px; background: #C9CDD6; }
.inf h3 { font-size: 19px; font-weight: 600; line-height: 1.15; }
.inf p { font-size: 14px; color: var(--ink-2); }
.inf .biomarkers span { background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.inf small { font-size: 11px; line-height: 1.4; color: var(--ink-3); margin-top: 4px; }
.inf--rose { --bag: #E58FA0; } .inf--sky { --bag: #7FB3E6; } .inf--lime { --bag: #9CCB5A; } .inf--amber { --bag: #F0A34A; } .inf--sand { --bag: #D9B37A; } .inf--white { --bag: #E6E8EE; } .inf--navy { --bag: #3F5BA9; }
/* TRT panel (testosterone page): sky-to-sand gradient, floating vial, glass callouts */
.trtp { position: relative; overflow: hidden; isolation: isolate; border-radius: 32px; padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 48px) 36px; display: grid; justify-items: center; text-align: center; background: linear-gradient(180deg, #D0E0FC 0%, #D0E0FC 34%, #D7E1F3 50%, #DEE2ED 61%, #E5E4E6 71%, #E9E4DD 81%, #EDE1CF 100%); }
.trtp__badge { display: inline-block; padding: 14px 30px; border-radius: 999px; background: var(--navy-ink); color: #D9E6FB; font-size: clamp(15px, 1.5vw, 19px); font-weight: 500; letter-spacing: -.005em; }
.trtp__h { margin-top: 26px; font-size: clamp(38px, 6.2vw, 84px); line-height: .98; letter-spacing: -.04em; font-weight: 500; color: var(--navy-ink); text-wrap: balance; }
.trtp__h span { color: #4F7DAE; }
.trtp__stage { position: relative; width: min(100%, 820px); height: clamp(380px, 46vw, 600px); }
/* the full render, not a cut-out, so the glass shows its real backdrop; a soft mask melts the image edge into the panel */
.trtp__vial { position: absolute; left: 50%; top: 50%; height: 108%; width: auto; max-width: none; transform: translate(-50%, -50%); -webkit-mask-image: radial-gradient(ellipse 44% 48% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 44% 48% at 50% 50%, #000 62%, transparent 100%); animation: trtp-float 7s ease-in-out infinite; }
@keyframes trtp-float { 0%, 100% { transform: translate(-50%, -50%) rotate(0deg); } 50% { transform: translate(-50%, -52.5%) rotate(-1.5deg); } }
.trtp__chip { position: absolute; z-index: 1; display: inline-flex; align-items: center; padding: 16px 28px; border-radius: 999px; font-size: clamp(15px, 1.7vw, 22px); font-weight: 500; color: var(--navy-ink); white-space: nowrap; background: rgba(255, 255, 255, .34); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65), inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 30px rgba(19, 37, 77, .1); }
.trtp__chip--r { right: 11%; top: 30%; }
.trtp__chip--l { left: 10%; top: 60%; flex-direction: row-reverse; }
.trtp__fine { max-width: 78ch; margin-top: 18px; font-size: 13px; line-height: 1.5; color: var(--navy-ink-2); text-wrap: balance; }
.trtp__fine b { color: var(--navy-ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .trtp__vial { animation: none; } }
@media (max-width: 600px) {
  .trtp { border-radius: 24px; }
  .trtp__badge { padding: 11px 20px; }
  .trtp__stage { height: 400px; }
  .trtp__chip { padding: 12px 18px; gap: 10px; }
  .trtp__chip--r { right: 0; top: 16%; }
  .trtp__chip--l { left: 0; top: 72%; }
}
/* Vial product tiles (infusions page): render on its own backdrop, text below */
.vtile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vtile { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-card); overflow: hidden; background: var(--grey-2); color: var(--navy-ink); }
/* each tile continues its render's backdrop (sampled from the bottom row of the image) */
.vtile--blue { background: linear-gradient(180deg, #A8C8FD 0%, #BCD3F5 100%); }
.vtile--teal { background: linear-gradient(180deg, #BCE5E4 0%, #CFEAE6 100%); }
.vtile__media { aspect-ratio: 5 / 4; overflow: hidden; display: grid; place-items: center; }
.vtile--blue .vtile__media { background: linear-gradient(180deg, #E6EFFD 0%, #A8C8FD 100%); }
.vtile--teal .vtile__media { background: linear-gradient(180deg, #EDF6F4 0%, #BCE5E4 100%); }
.vtile__media img { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.vtile:hover .vtile__media img { transform: scale(1.03); }
.vtile__body { display: grid; gap: 10px; align-content: start; padding: 22px 28px 24px; }
.vtile__body .pro-eyebrow { margin-bottom: 0; }
.vtile h3 { font-size: 26px; line-height: 1.1; font-weight: 450; letter-spacing: -.01em; }
.vtile p { font-size: 15px; color: var(--navy-ink-2); max-width: 46ch; }
.vtile .pro-eyebrow { color: var(--navy-ink-2); }
.vtile .biomarkers span { background: rgba(255, 255, 255, .55); color: var(--navy-ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.vtile small { font-size: 11px; line-height: 1.4; color: var(--navy-ink-2); }
@media (prefers-reduced-motion: reduce) { .vtile__media img { transition: none; } .vtile:hover .vtile__media img { transform: none; } }
.member__card .pg-hero__eyebrow { color: var(--navy-ink-2); opacity: 1; margin-bottom: 0; }
/* home-page protocol world */
.world--protocol { background: radial-gradient(80% 60% at 50% 0%, #1F3B72 0%, #0E1630 70%); color: #fff; padding: 72px 0 40px; }
.world--protocol .labs__intro .lead { color: rgba(255, 255, 255, .8); max-width: 600px; }
.world--protocol .btn--white { color: var(--navy-ink); }
.pro-in { width: min(1312px, 100% - 40px); margin: 40px auto 0; }
.pro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.pro-card { position: relative; overflow: hidden; border-radius: var(--r-card); min-height: 380px; padding: 36px; display: grid; align-content: end; gap: 12px; color: #fff; isolation: isolate; text-decoration: none; }
.pro-card--inf { background: #16224A url("../img/dunes-sunset.webp") 60% 60% / cover no-repeat; }
.pro-card--inf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(22, 34, 74, .15), rgba(22, 34, 74, .88) 75%); }
.pro-card__render { position: absolute; right: 8%; top: -2%; width: 150px; height: auto; max-width: none; transform: rotate(10deg); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); z-index: 0; }
.pro-card--bio { background: linear-gradient(160deg, #2C3F7A 0%, #16224A 60%, #0E1630 100%); }
.pro-card__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.pro-card h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; font-weight: 450; max-width: 420px; }
.pro-card p { font-size: 15px; opacity: .8; max-width: 420px; }
.pro-card .btn { justify-self: start; color: var(--navy-ink); }
.pro-card--bio { padding-right: 320px; }
.pro-card--bio .bio-card { position: absolute; right: 36px; top: 36px; width: 250px; padding: 18px 20px; }
.pro-card--bio .bio-card small { font-size: 11px; white-space: nowrap; }
.pro-card--bio .bio-card__num { font-size: 48px; }
@media (max-width: 1100px) {
  .loop { grid-template-columns: repeat(3, 1fr); }
  .loop li:nth-child(3)::after { display: none; }
  .tiers, .inf-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .pg-hero { padding: 32px 24px; min-height: 0; }
  .pg-hero__in { grid-template-columns: 1fr; gap: 28px; }
  .pg-hero__render { width: 150px; }
  .sys-grid { grid-template-columns: 1fr 1fr; }
  .bio-strip { grid-template-columns: 1fr; padding: 36px 24px; }
  .bio-how, .prove, .pro-grid { grid-template-columns: 1fr; }
  .pro-card { min-height: 320px; padding: 28px; }
  .pro-card--bio { padding-right: 28px; }
  .pro-card--bio .bio-card { position: static; width: 100%; margin-bottom: 8px; }
  .pro-card__render { width: 110px; }
}
@media (max-width: 600px) {
  .loop { grid-template-columns: 1fr 1fr; }
  .loop li::after { display: none; }
  .loop li { padding: 18px 16px; }
  .sys-grid, .tiers, .inf-grid { grid-template-columns: 1fr; }
  .vtile-grid { grid-template-columns: 1fr; }
  .vtile__body { padding: 22px 20px; }
  .inf { padding-left: 96px; }
}

/* ---------- Protocol section, editorial: headline, the 90-day timeline, three product columns, the age chart ---------- */
.pro-sec { padding: 96px 0 72px; }
.pro-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: end; margin-bottom: 36px; }
.pro-eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.pro-h { font-size: clamp(40px, 4.4vw, 64px); line-height: .98; font-weight: 410; letter-spacing: -.025em; text-wrap: balance; }
.pro-head__side { display: grid; gap: 20px; padding-bottom: 6px; }
.pro-head__side .lead { font-size: 19px; max-width: 460px; }
.pro-head__ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.tl { border-radius: 28px; background: #fff; border: 1px solid rgba(19, 37, 77, .08); box-shadow: 0 30px 60px -40px rgba(19, 37, 77, .28); padding: 30px 36px 26px; }
.tl__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.tl__label { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.tl__label .sample--inline { background: rgba(19, 37, 77, .08); color: var(--navy-ink); }
.tl__legend { list-style: none; display: flex; gap: 18px; font-size: 12px; color: var(--ink-2); }
.tl__legend li { display: inline-flex; align-items: center; gap: 6px; }
.tl__legend i { width: 9px; height: 9px; border-radius: 50%; }
.k-draw { background: #13254D; } .k-doc { background: #2F5BB8; } .k-inf { background: #2E8B86; } .k-dose { background: #E4A11B; } .k-scale { background: rgba(19, 37, 77, .3); }
.tl__stage { position: relative; height: 330px; margin: 0 24px 0 8px; }
.tl__track { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(19, 37, 77, .14); transform-origin: left; transform: scaleX(0); transition: transform 1.4s cubic-bezier(.22, 1, .36, 1) .1s; }
.tl.is-in .tl__track { transform: scaleX(1); }
.tl__scale { position: absolute; left: 0; width: 100%; top: 74%; height: 64px; opacity: 0; transition: opacity .9s ease .9s; }
.tl.is-in .tl__scale { opacity: 1; }
.tl__ev { position: absolute; left: var(--x); top: 50%; width: 0; opacity: 0; transition: opacity .6s ease var(--d); }
.tl.is-in .tl__ev { opacity: 1; }
.tl__ev > i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #13254D; box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(19, 37, 77, .14); }
.tl__ev--doc > i { background: #2F5BB8; } .tl__ev--inf > i { background: #2E8B86; } .tl__ev--dose > i { background: #E4A11B; }
.tl__ev > div { position: absolute; left: -1px; width: var(--w, 188px); padding-left: 14px; border-left: 1.5px solid rgba(19, 37, 77, .18); }
.tl__ev--up > div { bottom: 20px; }
.tl__ev--lift > div { bottom: 96px; }
.tl__ev--down > div { top: 20px; }
.tl__ev b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tl__ev span { display: block; font-size: 14px; line-height: 1.3; margin-top: 3px; }
.tl__ev--end > div { left: auto; right: -1px; border-left: 0; border-right: 1.5px solid rgba(19, 37, 77, .18); padding-left: 0; padding-right: 14px; text-align: right; }
.tl__ticks { position: absolute; left: 0; right: 0; bottom: -6px; }
.tl__ticks span { position: absolute; left: var(--x); transform: translateX(-50%); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.tl__ticks span:first-child { transform: none; } .tl__ticks span:last-child { transform: translateX(-100%); }
.tl__foot { display: flex; gap: 32px; align-items: center; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(19, 37, 77, .08); font-size: 13px; color: var(--ink-2); }
.tl__foot b { display: block; font-size: 22px; font-weight: 410; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tl__foot b small { font-size: 12px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.tl__foot .note { margin-left: auto; max-width: 300px; text-align: right; font-size: 12px; color: var(--ink-3); }
.steps6 { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(19, 37, 77, .1); }
.steps6 li { display: grid; gap: 8px; align-content: start; }
.steps6 i { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); }
.steps6 h3 { font-size: 17px; font-weight: 600; line-height: 1.15; }
.steps6 p { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.pcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.pcol { position: relative; overflow: hidden; border-radius: 28px; min-height: 540px; padding: 32px; display: grid; align-content: end; color: var(--navy-ink); text-decoration: none; isolation: isolate; }
.pcol--sky { background: radial-gradient(120% 90% at 30% 20%, #F1F6FF 0%, #D9E6FB 55%, #BCD3F5 100%); }
.pcol--sand { background: radial-gradient(120% 90% at 30% 20%, #FEF9EF 0%, #F3E7D3 55%, #E6D3B6 100%); }
.pcol--mint { background: radial-gradient(120% 90% at 30% 20%, #F2F9F4 0%, #DDEFE2 55%, #C5E0CD 100%); }
.pcol > img { position: absolute; z-index: -1; left: 50%; top: 36px; transform: translateX(-50%); height: 270px; width: auto; max-width: none; filter: drop-shadow(0 30px 36px rgba(19, 37, 77, .25)); transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.pcol:hover > img { transform: translateX(-50%) translateY(-6px); }
.pcol--sand > img { height: 210px; top: 64px; }
.pcol--mint > img { height: 300px; top: 22px; left: 58%; }
.pcol h3 { font-size: 26px; line-height: 1.1; font-weight: 450; letter-spacing: -.01em; }
.pcol p { font-size: 15px; line-height: 1.45; color: var(--navy-ink-2); margin-top: 8px; max-width: 330px; }
.pcol .pro-eyebrow { color: var(--navy-ink-2); margin-bottom: 10px; }
.pro-link { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 600; }
.bio-row { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; margin-top: 72px; }
.pro-h3 { font-size: clamp(30px, 3vw, 44px); line-height: 1.05; font-weight: 430; letter-spacing: -.015em; margin-bottom: 16px; text-wrap: balance; }
.bio-row__txt .lead { max-width: 460px; margin-bottom: 24px; }
.bio-chart { margin: 0; border-radius: 28px; background: #fff; border: 1px solid rgba(19, 37, 77, .08); box-shadow: 0 30px 60px -40px rgba(19, 37, 77, .28); padding: 28px 28px 18px; }
.bio-chart svg { width: 100%; height: auto; display: block; }
.bio-chart figcaption { margin-top: 12px; font-size: 12px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bio-chart .sample--inline { background: rgba(19, 37, 77, .08); color: var(--navy-ink); }
.chart-axis { font: 500 11px var(--sans); fill: var(--ink-3); }
.chart-grid { stroke: rgba(19, 37, 77, .08); stroke-width: 1; }
.chart-est { fill: none; stroke: #13254D; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-chrono { fill: none; stroke: #2F5BB8; stroke-width: 1.5; stroke-dasharray: 4 5; }
.chart-area { fill: url(#bioArea); }
.chart-dot { fill: #fff; stroke: #13254D; stroke-width: 2.5; }
.chart-val { font: 600 12px var(--sans); fill: #13254D; }
@media (max-width: 1100px) { .steps6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .pro-head, .bio-row { grid-template-columns: 1fr; gap: 24px; } .pcols { grid-template-columns: 1fr; } .tl__stage { height: 360px; } .tl__legend { display: none; } .steps6 { grid-template-columns: 1fr 1fr; } }

/* ---------- the Longiva app screen, in the warm mauve-to-peach UI (Olva reference) ---------- */
.aden-screen.ol-screen { gap: 0; padding: 0 16px; color: #fff;
  background: linear-gradient(180deg, #A6829C 0%, #B98A9C 18%, #D29A95 38%, #E6AE98 54%, #F0CDBC 68%, #F6E8E1 80%, #F9F5F3 90%); }
.ol-status { color: #fff; padding-inline: 6px; }
.ol-head { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 16px; }
.ol-head small { display: block; font-size: 12px; opacity: .85; }
.ol-head b { display: block; margin-top: 4px; font-size: 20px; font-weight: 500; letter-spacing: -.015em; }
.ol-bell { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38); }
.ol-bell i { position: absolute; top: 10px; right: 11px; width: 6px; height: 6px; border-radius: 50%; background: #E5484D; }
.ol-gauge { position: relative; height: 236px; margin: 4px -16px 0; text-align: center; }
.ol-gauge__svg { position: absolute; left: 0; top: 0; width: 290px; height: 172px; overflow: visible; }
.ol-knob { filter: drop-shadow(0 2px 4px rgba(90, 40, 60, .35)); }
.ol-gauge__end { position: absolute; top: 140px; font-size: 11px; opacity: .85; }
.ol-gauge__end--l { left: 22px; } .ol-gauge__end--r { right: 24px; }
.ol-gauge__num { position: absolute; left: 0; right: 0; top: 84px; font-size: 52px; line-height: 1; font-weight: 300; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ol-gauge__num small { font-size: 30px; font-weight: 300; margin-left: 1px; }
.ol-gauge p { position: absolute; left: 0; right: 0; top: 146px; font-size: 10.5px; line-height: 1.4; opacity: .92; }
.ol-pill { position: absolute; left: 50%; top: 186px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px 0 15px; border-radius: 15px; background: #fff; color: #1B1B1F; font-size: 11.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 6px 14px -8px rgba(90, 40, 60, .4); }
.ol-h { display: block; margin: 6px 2px 10px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.ol-card { margin-bottom: 8px; padding: 13px 14px 12px; border-radius: 16px; background: #fff; color: #1B1B1F; box-shadow: 0 10px 24px -14px rgba(110, 60, 70, .35); }
.ol-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ol-card__top b { display: block; font-size: 14px; font-weight: 600; }
.ol-card__top small { display: block; margin-top: 2px; font-size: 10.5px; color: #6E6A72; }
.ol-num { font-size: 28px; font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ol-num small { margin-left: 2px; font-size: 10px; color: #6E6A72; letter-spacing: 0; }
.ol-bar { height: 5px; margin: 13px 0 7px; border-radius: 3px; background: #EFEAEA; }
.ol-bar i { position: relative; display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #EFC3AA, #A6829C); }
.ol-bar i::after { content: ""; position: absolute; right: -5px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #A6829C; }
.ol-card__row { display: flex; justify-content: space-between; margin-top: 3px; font-size: 9.5px; color: #8A8590; }
.ol-card__row--dark { color: #4C4852; margin-top: 6px; }
.ol-card p { margin-top: 8px; font-size: 9.5px; line-height: 1.45; color: #6E6A72; }
.ol-nav { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding: 8px 2px 24px; }
.ol-nav span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #F2EDEB; color: #8B8590; }
.ol-nav .on { width: auto; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; background: #fff; color: #1B1B1F; font-size: 12px; font-weight: 600; box-shadow: 0 6px 16px -8px rgba(60, 30, 40, .3); }
.ol-nav .ol-fab { width: 46px; height: 46px; background: radial-gradient(circle at 34% 30%, #F4CDBD 0%, #DB9E9C 45%, #A07C99 100%); box-shadow: 0 10px 20px -8px rgba(120, 70, 90, .55); }
.ol-screen > * { flex: none; }

/* the hidden attribute always wins over component display rules */
[hidden] { display: none !important; }

/* ---------- Labs: "What we test" render cards (DarDoc-style catalogue, 18 Oct 2026) ---------- */
.trow + .trow { margin-top: 56px; }
.trow__h { margin: 0 0 20px; font-size: 30px; line-height: 1.15; font-weight: 400; letter-spacing: -.015em; }
.tgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.tcard { position: relative; isolation: isolate; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 24px; color: #fff; background: linear-gradient(170deg, var(--g1), var(--g2)); box-shadow: 0 24px 40px -30px rgba(40, 20, 30, .55); outline: none; }
.tcard__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .4s; }
.tcard__img--ph { display: block; background: radial-gradient(60% 45% at 55% 66%, rgba(255, 255, 255, .28), transparent 70%), linear-gradient(170deg, var(--g1), var(--g2)); }
.tcard__ph { position: absolute; left: 20px; bottom: 74px; font-size: 12px; }
.tcard::before, .tcard::after { content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; }
.tcard::before { top: 0; height: 46%; background: linear-gradient(180deg, rgba(20, 8, 14, .38), rgba(20, 8, 14, 0)); }
.tcard::after { bottom: 0; height: 40%; background: linear-gradient(0deg, rgba(20, 8, 14, .42), rgba(20, 8, 14, 0)); }
.tcard__top { position: absolute; z-index: 2; left: 20px; right: 20px; top: 18px; }
.tcard h3 { font-size: 27px; line-height: 1.12; font-weight: 400; letter-spacing: -.015em; text-wrap: balance; text-shadow: 0 1px 16px rgba(30, 10, 20, .25); }
.tcard__n { display: inline-flex; align-items: center; gap: 4px; height: 24px; margin-top: 10px; padding: 0 9px 0 6px; border-radius: 12px; font-size: 12px; font-weight: 600; background: rgba(20, 8, 14, .22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.tcard__n svg { width: 14px; height: 14px; }
.tcard__foot { position: absolute; left: 20px; right: 16px; bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; }
.tcard__foot > span:first-child { opacity: .92; white-space: nowrap; transition: opacity .3s; }
.tcard__btn { flex: none; height: 40px; padding: 0 18px; display: inline-flex; align-items: center; border-radius: 20px; font-size: 14px; font-weight: 500; color: #1B1B1F; background: #fff; box-shadow: 0 8px 18px -10px rgba(20, 8, 14, .5); }
.tcard__list { position: absolute; left: 10px; right: 10px; bottom: 10px; top: 100px; padding: 14px 14px 62px; border-radius: 18px; color: #fff; background: rgba(30, 14, 22, .42); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .45s cubic-bezier(.2, .7, .2, 1); pointer-events: none; overflow: hidden; }
.tcard__list b { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.tcard__list ul { list-style: none; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.6; }
.tcard__list li { display: inline; }
.tcard__list li:not(:last-child)::after { content: " \00B7 "; opacity: .6; }
.tcard:hover .tcard__img, .tcard:focus-visible .tcard__img, .tcard.is-open .tcard__img { transform: scale(1.05); filter: blur(2px) brightness(.9); }
.tcard:hover .tcard__list, .tcard:focus-visible .tcard__list, .tcard.is-open .tcard__list { opacity: 1; transform: none; }
.tcard:hover .tcard__foot > span:first-child, .tcard:focus-visible .tcard__foot > span:first-child, .tcard.is-open .tcard__foot > span:first-child { opacity: 0; }
.tcard:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--navy-ink, #13254D); }
@media (max-width: 1100px) { .tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tcard { min-height: 0; width: auto; padding: 16px; border-radius: 18px; } .tcard h3 { font-size: 19px; } .tcard p, .tcard__list li { font-size: 12.5px; } .tcard__top { left: 14px; right: 14px; top: 14px; } .tcard__foot { left: 12px; right: 12px; bottom: 12px; font-size: 12px; } .tcard__foot > span:first-child { display: none; } .tcard__btn { height: 34px; padding: 0 14px; font-size: 13px; } .tcard__list { top: 84px; padding: 12px 12px 54px; } }

/* Smart scale in its own section on the white page (moved out of the weight-loss panel) */
.scale-sec { margin-top: 40px; }
.scale-sec .stack { margin-top: 0; }

/* App + newsletter band above the footer (home). Mirrors the SkinnyRx footer cards:
   40px radius, 32px padding, 20px/500 titles, 14px body at 65% white, glass email field. */
.bnd-sec { padding: 24px 0; font-family: "Figtree", "Sofia Pro", "Helvetica Neue", Arial, sans-serif; }
.bnd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.bnd-app, .bnd-news { position: relative; overflow: hidden; border-radius: 40px; padding: 32px; color: #fff; }
.bnd h3 { margin: 0; font-family: inherit; font-size: 20px; font-weight: 500; line-height: 1; color: #fff; }
.bnd-app { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; background: #2B2D5E url("../img/band/app-bg.webp") center / cover no-repeat; }
.bnd-app__copy { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.bnd-app h3 { letter-spacing: -.04em; }
.bnd-app p { margin: 8px 0 0; max-width: 268px; font-size: 14px; line-height: 20px; letter-spacing: -.04em; color: rgba(255, 255, 255, .65); }
.bnd-dl { position: relative; z-index: 20; display: none; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 32px; border-radius: 48px; background: #fff; color: #40336E; font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: -.04em; text-decoration: none; }
.bnd-dl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bnd-os { font-size: 12px; line-height: 24px; letter-spacing: -.04em; color: rgba(255, 255, 255, .65); }
.bnd-os--sm { display: none; font-size: 10px; line-height: 1.4; }
.bnd-qrw { position: relative; }
.bnd-ph-note { position: absolute; left: calc(100% + 10px); bottom: 4px; white-space: nowrap; font-size: 10px; }
.bnd-qrw { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.bnd-qr { position: relative; display: block; width: 90px; height: 90px; padding: 6px; border-radius: 8px; background: #fff; }
.bnd-qr img { display: block; width: 100%; height: 100%; }
.bnd-qr i { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: #13254D; box-shadow: 0 0 0 2px #fff; transform: translate(-50%, -50%); color: #fff; font: italic 500 13px/1 "Fraunces", Georgia, serif; }
/* two phones, skewed like the source render, cropped by the card edge */
.bnd-phones { position: absolute; right: 12px; bottom: 0; width: 290px; height: 246px; pointer-events: none; clip-path: inset(-200px -200px 0 -200px); }
.bnd-ph { position: absolute; padding: 4px; border-radius: 30px; background: #0B0B10; box-shadow: 0 0 0 1.5px #D9D6DE, 0 0 0 3px #8F8C97, 0 26px 44px -12px rgba(4, 7, 28, .6); transform: skewY(-6deg); }
.bnd-ph--back { left: 12px; bottom: -70px; width: 136px; height: 284px; }
.bnd-ph--front { right: 10px; bottom: -86px; width: 160px; height: 334px; }
.bnd-ph__scr { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 26px; padding-top: 18px; background: #13254D; }
.bnd-ph__scr--light { background: #F4F6FA; }
.bnd-ph__scr img { display: block; width: 100%; height: auto; }
.bnd-ph__scr::before { content: ""; position: absolute; z-index: 2; top: 6px; left: 50%; width: 36%; height: 11px; border-radius: 8px; background: #000; transform: translateX(-50%); }
.bnd-ph__scr::after { content: "9:41"; position: absolute; z-index: 2; top: 7px; left: 13%; font: 600 7.5px/1 "Figtree", Arial, sans-serif; color: #fff; }
.bnd-ph__scr--light::after { color: #13254D; }
/* newsletter: rose base under a photo that carries its own mauve-to-peach field */
.bnd-news { display: flex; flex-direction: column; background: #C78199 url("../img/band/newsletter.webp") right center / cover no-repeat; }
.bnd-news h3 { letter-spacing: -.06em; }
.bnd-news > p { margin: 16px 0 0; font-size: 14px; line-height: 1.4; letter-spacing: -.04em; color: rgba(255, 255, 255, .65); }
.bnd-news__body { margin-top: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.bnd-form { position: relative; display: flex; align-items: center; gap: 4px; width: 100%; max-width: 342px; margin-top: 24px; padding-left: 16px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 48px; background: rgba(255, 255, 255, .15); -webkit-backdrop-filter: blur(60px); backdrop-filter: blur(60px); font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: -.56px; }
.bnd-form input { flex: 1; min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; letter-spacing: inherit; }
.bnd-form input::placeholder { color: #fff; opacity: 1; }
.bnd-form button { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 140px; min-height: 48px; padding: 12px; border: 1px solid transparent; border-radius: 48px; background: #fff; color: #40336E; font: inherit; letter-spacing: inherit; cursor: pointer; transition: background-color .3s, border-color .3s; }
.bnd-form button:hover { border-color: rgba(64, 51, 110, .4); background: #E5E3F2; }
.bnd-form button:focus-visible, .bnd-dl:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bnd-ok { margin: -16px 0 0; font-size: 13px; color: #fff; }
.bnd-terms { max-width: 300px; font-size: 12px; line-height: 1.4; letter-spacing: -.48px; color: #fff; }
.bnd-terms a { color: inherit; text-decoration: underline; }
/* below 1280: a Download button instead of the QR, as on the source */
@media (max-width: 1279px) {
  .bnd-qrw { display: none; }
  .bnd-dl { display: inline-flex; }
  .bnd-news > p { max-width: 240px; }
  .bnd-os--sm { display: block; margin-top: -8px; }
  .bnd-phones { width: 222px; height: 196px; }
  .bnd-ph--back { left: 8px; bottom: -58px; width: 106px; height: 222px; border-radius: 24px; }
  .bnd-ph--front { right: 6px; bottom: -66px; width: 124px; height: 260px; border-radius: 24px; }
  .bnd-ph__scr { border-radius: 20px; padding-top: 14px; }
}
@media (min-width: 1536px) {
  .bnd-phones { width: 326px; height: 276px; }
  .bnd-ph--back { width: 152px; height: 318px; bottom: -78px; }
  .bnd-ph--front { width: 180px; height: 376px; bottom: -96px; }
}
/* phones and narrow tablets: stacked cards in the source's mobile layout */
@media (max-width: 999px) {
  .bnd { gap: 20px; }
  .bnd-app, .bnd-news { min-height: 322px; padding: 24px; }
  .bnd h3 { font-size: 32px; }
  .bnd-app p, .bnd-news > p { font-size: 16px; line-height: 1.4; max-width: none; }
  .bnd-app { align-items: center; }
  .bnd-app__copy { width: 100%; }
  .bnd-dl { margin: 225px auto 0; }
  .bnd-os--sm { margin: -8px auto 0; }
  .bnd-phones { left: 50%; right: auto; bottom: 56px; width: min(100%, 300px); height: 250px; transform: translateX(-50%); }
  .bnd-ph--back { left: 10px; bottom: -40px; width: 130px; height: 272px; }
  .bnd-ph--front { right: 10px; bottom: -52px; width: 150px; height: 314px; }
  .bnd-news { background-position: 75% center; }
  .bnd-news__body { flex: 1; justify-content: space-between; }
}
@media (max-width: 767px) { .bnd { grid-template-columns: 1fr; } }

/* Home hero: testosterone card. Same frosted-glass card as the GLP-1 one, with the screen-printed amber vial cut out on it */
.wh-card.wh-card--trt img { right: 4%; top: 50%; height: 118%; width: auto; transform: translateY(-50%) rotate(14deg); filter: drop-shadow(0 24px 34px rgba(10, 20, 50, .45)); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.wh-card--trt:hover img { transform: translateY(-52%) rotate(12deg); }
.wh-card--trt h2 { max-width: none; margin: 0; font-size: clamp(24px, 2.3vw, 32px); font-weight: 500; line-height: 1.12; letter-spacing: -.015em; }
.wh-card--trt h2 span { display: block; color: rgba(255, 255, 255, .72); }
.wh-trt__foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; font-size: clamp(18px, 1.6vw, 22px); font-weight: 400; letter-spacing: -.01em; }
.wh-trt__foot .ic { flex: none; width: 22px; height: 22px; stroke-width: 2.4; transition: transform .2s; }
.wh-card--trt:hover .wh-trt__foot .ic { transform: translateX(3px); }
@media (max-width: 700px) { .wh-card.wh-card--trt img { right: -6%; height: 104%; } }

/* hims-style home hero (8 Nov 2026): white page, two-tone headline, two photo cards, four cream tiles.
   Sizes scaled from the hims hero at our 1312px container. The previous glass hero is parked (scripts/parked/hero-glass.html). */
/* The white page (.sheet) is the hero background; headline, cards and tiles are layers on it. */
.hh-hero { position: relative; padding: clamp(14px, 1.6vw, 22px) 0 24px; font-family: "Figtree", "Sofia Pro", "Helvetica Neue", Arial, sans-serif; color: #1A1B1E; }.hh-h { margin: 0 0 clamp(14px, 1.6vw, 22px); font-size: clamp(34px, 3.75vw, 52px); font-weight: 500; line-height: 1.05; letter-spacing: -.035em; color: #1A1B1E; text-wrap: balance; }
.hh-h span { color: #7B3B3B; }
.hh-big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.hh-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: clamp(168px, 14.6vw, 200px); padding: 22px 22px 20px; border-radius: 22px; overflow: hidden; color: #fff; text-decoration: none; background-color: #3A3A3A; background-size: cover; background-position: center; isolation: isolate; }
.hh-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 55%); }
.hh-card__t { font-size: clamp(17px, 1.3vw, 19px); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.hh-card__t em { font-style: normal; font-weight: 400; }
.hh-card--glp { background: #4A3215 url(../img/hero/glp1-editorial-c.webp) 100% 40% / cover no-repeat; }
.hh-card--trt { background: linear-gradient(180deg, #3C6CA8 0%, #7FA6CE 48%, #DCE3E6 78%, #E9D9BF 100%); }
.hh-card__obj { position: absolute; z-index: 0; pointer-events: none; height: auto; max-width: none; filter: drop-shadow(0 18px 22px rgba(12, 30, 60, .28)); }
.hh-card__obj--vial { width: clamp(118px, 10.2vw, 140px); left: 50%; top: -14%; transform: translateX(-56%) rotate(-14deg); }
.hh-card__obj--pen { width: clamp(340px, 36vw, 500px); right: -5%; top: 50%; transform: translateY(-50%) rotate(-22deg); filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .35)); }
.hh-card__obj--cluster { height: 176%; width: auto; right: 10%; top: -74%; transform: rotate(6deg); filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .35)); }
.hh-card__obj--wide { height: 114%; width: auto; right: 2%; top: -7%; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .35)); }
.hh-card__t, .hh-card__f { position: relative; z-index: 1; }
.hh-card--glp .hh-card__t em { color: #E8B04E; }
.hh-card__obj--glp { display: none; }
.hh-card--trt .hh-card__t em { color: #BFD9E8; }
.hh-card--pep { background: linear-gradient(180deg, #3C6CA8 0%, #7FA6CE 48%, #DCE3E6 78%, #E9D9BF 100%); }
.hh-card__obj--pep { height: 150%; width: auto; right: 8%; top: 6%; filter: drop-shadow(0 18px 22px rgba(12, 30, 60, .22)); }
.hh-card--pep .hh-card__t em { color: #BFD9E8; }
.hh-card__f { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: clamp(14px, 1.1vw, 16px); font-weight: 400; letter-spacing: -.01em; }
.hh-card .ic { width: 18px; height: 18px; stroke-width: 2.2; transition: transform .2s; }
.hh-card:hover .ic, .hh-tile:hover .ic { transform: translateX(3px); }
.hh-small { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.hh-tile { position: relative; display: flex; align-items: center; gap: 10px; height: clamp(84px, 7.3vw, 100px); padding: 0 18px 0 20px; border-radius: 22px; background: #FAF8F2; color: #1A1B1E; text-decoration: none; transition: background .2s; }
.hh-tile:hover { background: #F3F0E7; }
.hh-tile__t { flex: 1; min-width: 0; font-size: clamp(16px, 1.3vw, 19px); font-weight: 400; letter-spacing: -.02em; line-height: 1.15; }
.hh-tile__t em { font-style: normal; }
.c-blue { color: #3F6E9B; } .c-rose { color: #7B3B3B; } .c-steel { color: #3F6E9B; } .c-gold { color: #9A6B2E; }
.hh-tile__img { position: relative; flex: none; display: grid; place-items: center; width: 64px; height: 64px; margin-right: 8px; }
.hh-tile__img::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 46px; height: 10px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(20, 30, 60, .26), rgba(20, 30, 60, 0) 70%); transform: translateX(-50%); }
.hh-tile__img img { position: relative; z-index: 1; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(20, 40, 70, .18)); }
.hh-tile__img--tall img { max-height: 68px; transform: rotate(12deg) translateY(-3px); }
.hh-tile__img--tall::after { width: 34px; }
.hh-tile__img--ring { border-radius: 50%; background: conic-gradient(#5C8CB5 0 38%, #2E8B86 38% 62%, #E0B250 62% 80%, #C84B4B 80% 100%); }
.hh-tile__img--ring::before { content: ""; position: absolute; width: 54px; height: 54px; border-radius: 50%; background: #FAF8F2; }
.hh-tile__img--ring img { max-height: 46px; transform: rotate(-32deg); }
.hh-tile__img--ring::after { display: none; }
.hh-tile__img:not(.hh-tile__img--tall):not(.hh-tile__img--ring):not(.hh-tile__img--photo) img { max-height: 50px; }
.hh-tile .ic { flex: none; width: 16px; height: 16px; stroke-width: 2.2; color: #1A1B1E; transition: transform .2s; }
/* eden.health-style tiles (Ardy, 10 Nov 2026): tinted gradient per tile, white two-tone title, product pushed to the
   right edge; the tall spray/vial show their top half and are cropped by the tile's bottom edge. Same grid, same size. */
.hh-tile--eden { overflow: hidden; color: #fff; padding-right: 16px; }
.hh-tile--eden:hover { filter: brightness(1.06); }
.hh-tile--eden .hh-tile__t { font-weight: 500; color: #fff; }
.hh-tile--eden .hh-tile__t em { color: rgba(255, 255, 255, .78); font-weight: 400; }
.hh-tile--eden .ic { color: #fff; }
.hh-tile--eden .hh-tile__img::after { display: none; }
.hh-tile--eden .hh-tile__img img { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .28)); }
.hh-tile--blue, .hh-tile--blue:hover { background: linear-gradient(120deg, #1E4A7C 0%, #3A78B8 55%, #6FA6DA 100%); }
.hh-tile--sage, .hh-tile--sage:hover { background: linear-gradient(120deg, #2F4A37 0%, #5E8A66 55%, #93BA98 100%); }
.hh-tile--amber, .hh-tile--amber:hover { background: linear-gradient(120deg, #6B3E1F 0%, #A86B3C 55%, #D39A66 100%); }
.hh-tile--navy, .hh-tile--navy:hover { background: linear-gradient(120deg, #14304F 0%, #2C5A86 55%, #5A8CBE 100%); }
/* tall products: top half visible, bottom cropped by the tile */
.hh-tile--eden .hh-tile__img--tall { width: 72px; height: 100%; margin-right: 6px; overflow: visible; }
.hh-tile--eden .hh-tile__img--tall img { position: absolute; left: 50%; top: 10px; height: 182%; max-height: none; width: auto; transform: translateX(-50%); }
/* pill: a touch bigger, lifted */
.hh-tile--eden .hh-tile__img:not(.hh-tile__img--tall):not(.hh-tile__img--ring):not(.hh-tile__img--photo) img { max-height: 58px; }
/* cream swirl (sexual health): wider than the slot, lifted, slight tilt */
.hh-tile--eden .hh-tile__img--cream { width: 92px; margin-right: 0; }
.hh-tile--eden .hh-tile__img--cream img { max-height: none; max-width: none; height: 56px; width: auto; transform: rotate(-6deg) translateY(-2px); filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .3)); }
/* lab ring: dark glass centre instead of the cream */
.hh-tile--eden .hh-tile__img--ring::before { background: rgba(10, 25, 45, .55); }
/* lab panel: labs-page photo bleeding in from the right, fading into the navy */
.hh-tile--eden .hh-tile__img--photo { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; height: 100%; margin: 0; display: block; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%); mask-image: linear-gradient(90deg, transparent 0%, #000 42%); }
.hh-tile--eden .hh-tile__img--photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 55% 48%; transform: scale(1.15); transform-origin: 60% 50%; filter: none; }
.hh-tile--eden .hh-tile__img--photo::after { display: none; }
.hh-tile--navy .hh-tile__t, .hh-tile--navy .ic { position: relative; z-index: 1; }
@media (max-width: 560px) { .hh-tile--eden .hh-tile__img--tall img { top: 8px; height: 170%; } }
.hh-note { margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: #6B6F76; }
@media (max-width: 900px) {
  .hh-card { height: 180px; }
  .hh-small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hh-tile { height: 88px; }
}
@media (max-width: 560px) {
  /* labs page: the data-to-plan trio is desktop only */
  #markers { display: none; }
  /* labs page (11 Nov 2026): phone skips the What we test heading, the first panel row follows the hero note */
  #tests > .wrap > .bub-head { display: none; }
  #tests.shop-sec { padding-top: 28px; }
  /* phone only: pull How Longiva works up under the hero tiles */
  .hh-home .hh-hero { padding-bottom: 8px; }
  .hh-home .hw { margin-top: 10px; padding-top: 26px; }
  .hh-home .hh-hero:has(.hh-ticker) + .hw { margin-top: 8px; }
  .hh-h { font-size: 32px; }
  .hh-card { height: 212px; padding: 14px 14px 12px; }
  .hh-card__t { font-size: 15.5px; }
  .hh-card__f { font-size: 12.5px; }
  .hh-card__f .ic { width: 14px; height: 14px; }
  /* phone: blue gradient like the peptide card + one hand holding both pens */
  .hh-card--glp { background: linear-gradient(150deg, #D6B48C 0%, #78502C 52%, #402410 100%); }
  .hh-card--glp::before { content: none; }
  .hh-card--glp .hh-card__t em { color: #E8B04E; }
  /* two pens stacked, entering from the right edge, no hand */
  .hh-card__obj--glp { display: block; width: 78%; height: auto; right: -3%; left: auto; top: auto; bottom: -9%; transform: none; filter: drop-shadow(0 10px 14px rgba(12, 30, 60, .28)); }
  .hh-stack .hh-card__obj--glp { width: 70%; right: -2%; bottom: -10%; }
  .hh-card--pep::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(30, 60, 100, .35) 0%, rgba(30, 60, 100, 0) 45%); }
  .hh-card__obj--pep { height: 68%; width: auto; right: -8%; top: auto; bottom: 0; filter: drop-shadow(0 10px 14px rgba(12, 30, 60, .22)); }
  .hh-card--pep .hh-card__f { justify-content: flex-start; }
  .hh-card--pep .hh-card__f > span:first-child { display: none; }
  /* stacked variant (body.hh-stack): big cards one per row, hand still small and on the bottom edge */
  .hh-stack .hh-big { grid-template-columns: 1fr; }
  .hh-stack .hh-card { height: 176px; padding: 18px 18px 16px; }
  .hh-stack .hh-card__t { font-size: 17px; }
  .hh-stack .hh-card__obj--pep { height: 80%; right: 2%; }
  .hh-stack .hh-card--pep .hh-card__f { justify-content: space-between; }
  .hh-stack .hh-card--pep .hh-card__f > span:first-child { display: inline; }
  .hh-small { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .hh-tile { height: 84px; padding: 0 10px 0 14px; gap: 6px; }
  .hh-tile--eden { padding-right: 8px; }
  .hh-tile__t { font-size: 14.5px; }
  .hh-tile__img { width: 46px; height: 46px; margin-right: 0; }
  .hh-tile--eden .hh-tile__img--tall { width: 48px; margin-right: 0; }
  .hh-tile--eden .hh-tile__img--cream { width: 74px; }
  .hh-tile--eden .hh-tile__img--cream img { height: 46px; }
  .hh-tile--eden .hh-tile__img--tall img { top: 6px; height: 160%; }
  .hh-tile--eden .hh-tile__img:not(.hh-tile__img--tall):not(.hh-tile__img--ring):not(.hh-tile__img--photo) img { max-height: 44px; }
  .hh-tile .ic { width: 14px; height: 14px; }
}



/* Weight tools band (eden.health three tiles) */
.wt { padding: 8px 0 40px; font-family: "Figtree", "Sofia Pro", "Helvetica Neue", Arial, sans-serif; color: #1A1B1E; }
.wt__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wt__tile { min-width: 0; box-sizing: border-box; min-height: 26rem; border-radius: 32px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(20, 30, 60, .06); }
.wt__t { font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: #1A1B1E; }
.wt__s { font-size: 15px; font-weight: 500; color: #3A3B40; margin-top: 4px; }
.wt-bmi { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 32px; }
.wt-bmi__num { font-size: 86px; line-height: 1.05; font-weight: 600; letter-spacing: -.03em; color: #1A1B1E; }
.wt-bmi__status { font-size: 14px; font-weight: 500; margin-top: 6px; } .wt-bmi__status:empty { display: none; }
.wt-bmi__form { display: flex; flex-direction: column; gap: 16px; }
.wt-bmi__form label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 8px; color: #1A1B1E; }
.wt-field { display: flex; align-items: center; height: 56px; padding: 0 16px 0 20px; border: 1px solid rgba(0, 0, 0, .12); border-radius: 12px; background: #fff; }
.wt-field input { width: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: #1A1B1E; -moz-appearance: textfield; }
.wt-field input::-webkit-outer-spin-button, .wt-field input::-webkit-inner-spin-button { -webkit-appearance: none; }
.wt-field input::placeholder { color: rgba(0, 0, 0, .45); }
.wt-field span { font-size: 14px; font-weight: 600; color: #1A1B1E; }
.wt-grad { align-self: center; position: relative; padding: 2px; border: 0; border-radius: 999px; background: linear-gradient(90deg, #F7A4C4, #F6B98A, #C9A6F2, #8EC5F5); cursor: pointer; font: inherit; }
.wt-grad span { display: block; padding: 14px 32px; border-radius: 999px; background: #fff; font-size: 17px; font-weight: 600; color: #1A1B1E; }
.wt-img { position: relative; overflow: clip; } .wt-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wt-lose { display: flex; flex-direction: column; justify-content: space-between; padding: 32px 0; text-align: center; }
.wt-lose__top { display: flex; flex-direction: column; gap: 10px; }
.wt-lose__num { font-size: 80px; line-height: 1; font-weight: 600; letter-spacing: -.03em; color: #1A1B1E; }
.wt-lose__num small { font-size: 44px; font-weight: 500; margin-left: 2px; }
.wt-lose__dial { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.wt-lose__needle { position: relative; height: 28px; }
.wt-lose__needle svg { position: absolute; top: 0; left: var(--x, 50%); width: 26px; height: 28px; transform: translateX(-50%); fill: #9BC878; transition: left .25s ease-out; }
.wt-lose__ticks { display: flex; align-items: center; justify-content: center; gap: clamp(5px, .65vw, 9px); height: 132px; overflow: hidden; }
.wt-lose__ticks i { display: block; flex: 1 1 0; min-width: 7px; max-width: 13px; border-radius: 7px; background: #9BC878; height: var(--h); transform-origin: center; animation: wt-eq 1.8s ease-in-out infinite; animation-delay: var(--d); }
.wt-lose__ticks i { transition: background-color .35s ease; }
.wt-lose__ticks i.is-dim { background: #D6E7C8; }
@keyframes wt-eq { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
.wt-lose__bottom { display: flex; flex-direction: column; gap: 22px; padding: 0 32px; }
.wt-lose__start { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wt-lose__badge { padding: 12px 18px; border-radius: 6px; background: #0F7A4F; color: #fff; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.wt-lose__badge small { font-size: 13px; font-weight: 600; margin-left: 1px; }
.wt-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #F7A4C4, #C9A6F2 45%, #8EC5F5 70%, #B6E3C9); outline: 0; cursor: pointer; }
.wt-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid #9BC878; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.wt-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid #9BC878; }
.wt__fine { margin: 24px auto 0; max-width: 72ch; text-align: center; font-size: 13px; line-height: 1.5; color: rgba(0, 0, 0, .6); }
@media (max-width: 1100px) { .wt-bmi { padding: 24px; } .wt-bmi__num { font-size: 68px; } .wt-lose__num { font-size: 64px; } .wt-lose__num small { font-size: 36px; } .wt-lose__bottom { padding: 0 20px; } }
@media (max-width: 700px) { .wt__row { grid-template-columns: 1fr; } .wt__tile { min-height: 0; } .wt-img { min-height: 20rem; } .wt-bmi__num { font-size: 72px; } .wt-lose__num { font-size: 68px; } .wt-lose__num small { font-size: 38px; } }


/* Peptides page: goal grid (hims/hers style) */
.pg-sec { padding-top: 24px; font-family: "Figtree", "Sofia Pro", "Helvetica Neue", Arial, sans-serif; } .pg-sec--top { padding-top: 40px; }
.pg-sec h2, .pg-sec h3 { font-family: inherit; letter-spacing: -.03em; }
.pg-accent { color: #BFD9E8; font-weight: 400; }
.pg-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.pg-herocard { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: 24px; min-height: 340px; padding: 40px 48px; border-radius: 28px; overflow: hidden; background: linear-gradient(180deg, #3C6CA8 0%, #7FA6CE 48%, #DCE3E6 78%, #E9D9BF 100%); color: #fff; }
.pg-herocard .pg-eyebrow { color: rgba(255, 255, 255, .8); }
.pg-herocard h2 { color: #fff; font-size: clamp(34px, 3.75vw, 52px); font-weight: 500; line-height: 1.05; }
.pg-herocard .pg-sub { color: rgba(255, 255, 255, .85); max-width: 44ch; margin-top: 14px; }
.pg-herocard__img { position: absolute; right: 4%; bottom: 0; width: min(38%, 392px); height: auto; filter: drop-shadow(0 18px 24px rgba(12, 30, 60, .25)); }
.pg-herocard__txt { position: relative; z-index: 1; }
/* Runner banner (9 Nov): long-exposure athlete on deep blue, full-bleed behind the text. Swap -m for -f for the female runner. */
.pg-herocard--runner { grid-template-columns: minmax(0, 1fr); background: #17365C url(../img/peptides/banner-runner-m.webp) 72% 50% / cover no-repeat; min-height: 360px; }
.pg-herocard--runner .pg-sub { color: rgba(255, 255, 255, .8); }
.pg-herocard--runner .pg-accent { color: #9FC3E8; }
/* DHA mark, top-right of the runner banner (9 Nov): bare white logo, no pill (the liquid-glass pill was tried and removed). */
.pg-stamp { position: absolute; top: 26px; right: 30px; z-index: 2; display: block; }
.pg-stamp img { display: block; height: 56px; width: auto; }
@media (max-width: 820px) { .pg-stamp { top: 16px; right: 18px; } .pg-stamp img { height: 38px; } .pg-herocard--runner .pg-herocard__txt { padding-top: 48px; } }
/* GrowPro-style product film tile (9 Nov): square, muted autoplay loop, poster = end pose still. */
.pg-herocard__media { justify-self: end; width: min(100%, 300px); aspect-ratio: 1 / 1; border-radius: 22px; overflow: hidden; background: #DCE3E6; box-shadow: 0 18px 32px rgba(12, 30, 60, .22); }
.pg-herocard__film { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .pg-herocard { grid-template-columns: 1fr; padding: 28px 24px; } .pg-herocard--runner { background-position: 78% 50%; min-height: 300px; } .pg-herocard__img { right: 50%; transform: translateX(50%); width: min(70%, 300px); } .pg-herocard__media { justify-self: center; width: min(100%, 320px); } }
.pg-eyebrow { display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--navy-ink-2); margin-bottom: 8px; }
.pg-sub { max-width: 34ch; font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.pg-tools { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.pg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-chip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(19, 37, 77, .16); background: #fff; color: var(--navy-ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.pg-chip .ic { width: 15px; height: 15px; stroke-width: 1.8; }
.pg-chip b { font-weight: 600; opacity: .7; margin-left: 2px; }
.pg-chip:hover { border-color: rgba(19, 37, 77, .4); }
.pg-chip.is-on { background: var(--navy-ink); color: #fff; border-color: var(--navy-ink); }
.pg-chip.is-on b { opacity: .8; }
.pg-right { display: flex; align-items: center; gap: 10px; }
.pg-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: #EEF1F6; }
.pg-seg__b { height: 32px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--navy-ink); cursor: pointer; }
.pg-seg__b.is-on { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.pg-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(19, 37, 77, .16); background: #fff; color: var(--ink-3); }
.pg-search .ic { width: 15px; height: 15px; flex: none; }
.pg-search input { width: 150px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--navy-ink); }
.pg-search input::placeholder { color: var(--ink-3); }
.pg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; margin-top: 28px; }
.pcard { display: flex; flex-direction: column; min-width: 0; }
.pcard.is-hidden { display: none; }
.pcard__media { position: relative; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, #3C6CA8 0%, #7FA6CE 48%, #DCE3E6 78%, #E9D9BF 100%); }
.pcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .25s; }
.pcard__img--cover { object-fit: contain; }
.pcard__img--pen { object-fit: contain; object-position: right center; padding: 26% 0 26% 6%; filter: drop-shadow(0 14px 18px rgba(12, 30, 60, .22)); }
.pcard:hover .pcard__img { transform: scale(1.03); }
.pcard__img.is-swapping { opacity: 0; }
.pcard__form { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--navy-ink); font-size: 12px; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); white-space: nowrap; }
.pcard__form .ic { width: 13px; height: 13px; stroke-width: 1.9; }
.pcard__t { margin: 16px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -.015em; color: var(--navy-ink); }
.pcard__goals { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }
.pcard__meta { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-3); }
.pcard__ev { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(19, 37, 77, .1); }
.pcard__ev b { display: block; font-size: 13px; font-weight: 600; color: var(--navy-ink); }
.pcard__ev span { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.pcard__plus { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(19, 37, 77, .2); background: #fff; color: var(--navy-ink); font-size: 18px; line-height: 1; cursor: pointer; }
.pcard__cta { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(19, 37, 77, .22); color: var(--navy-ink); font-size: 14px; font-weight: 500; text-decoration: none; transition: background .2s, color .2s; }
.pcard__cta .ic { width: 16px; height: 16px; stroke-width: 2; transition: transform .2s; }
.pcard__cta:hover { background: var(--navy-ink); color: #fff; border-color: var(--navy-ink); }
.pcard__cta:hover .ic { transform: translateX(3px); }
/* Coming-soon cards (9 Nov): internationally authorised peptides, one card each in their real dosage form. */
.pcard__soon { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--navy-ink); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.pcard--soon .pcard__img { opacity: .92; }
.pcard__stamp { position: absolute; top: 12px; right: 12px; width: 66px; height: 66px; z-index: 2; filter: drop-shadow(0 2px 6px rgba(12, 30, 60, .18)); pointer-events: none; }
@media (max-width: 480px) { .pcard__stamp { top: 8px; right: 8px; width: 50px; height: 50px; } }
.pcard__cta--soon { cursor: default; border-style: dashed; color: var(--ink-2); justify-content: center; }
.pcard__cta--soon:hover { background: transparent; color: var(--ink-2); border-color: rgba(19, 37, 77, .22); }
.pcard--soon .pcard__meta .ph { display: block; margin-top: 4px; }
.pg-empty { margin: 32px 0; text-align: center; color: var(--ink-2); }
.pg-fine { margin-top: 40px; max-width: 90ch; }
@media (max-width: 1100px) { .pg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; } .pg-tools { align-items: flex-start; } .pg-right { width: 100%; justify-content: space-between; } .pg-search input { width: 120px; } }
@media (max-width: 480px) {
  .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 10px; }
  .pcard__media { border-radius: 18px; }
  .pcard__form { height: 26px; padding: 0 10px; font-size: 11px; bottom: 10px; }
  .pcard__t { margin-top: 12px; font-size: 15px; }
  .pcard__goals { font-size: 12px; }
  .pcard__meta { font-size: 11.5px; }
  .pcard__ev { margin-top: 12px; padding-top: 10px; gap: 8px; }
  .pcard__ev b { font-size: 12px; } .pcard__ev span { font-size: 11.5px; }
  .pcard__plus { width: 26px; height: 26px; font-size: 16px; }
  .pcard__cta { height: 40px; padding: 0 14px; margin-top: 12px; font-size: 13px; }
  .pcard__soon { top: 10px; left: 10px; height: 24px; padding: 0 9px; font-size: 10.5px; }
}

/* ---------- Medical advisory board (home, after How it works; 10 Nov 2026) ---------- */
      .brd { padding: 72px 0 64px; font-family: "Figtree", "Sofia Pro", "Helvetica Neue", Arial, sans-serif; color: #1A1B1E; }
      .brd__head { text-align: center; max-width: 640px; margin: 0 auto; }
      .brd__eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #41587F; }
      .brd__title { margin-top: 12px; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; font-weight: 500; letter-spacing: -.025em; text-wrap: balance; }
      .brd__sub { margin: 12px auto 0; max-width: 52ch; font-size: 15.5px; line-height: 1.5; color: rgba(0, 0, 0, .62); }
      .brd__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
      .brd-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: start; padding: 24px; border-radius: 22px; background: #FAF8F2; }
      .brd-card__face { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: #DCE6EE; color: #13254D; font-size: 20px; font-weight: 600; letter-spacing: .02em; overflow: hidden; }
      .brd-card__face img { width: 100%; height: 100%; object-fit: cover; }
      .brd-card h3 { font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
      .brd-card h3 small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: rgba(0, 0, 0, .55); letter-spacing: 0; }
      .brd-card__role { margin-top: 10px; font-size: 14px; line-height: 1.45; color: rgba(0, 0, 0, .72); }
      .brd-card__inst { margin-top: 10px; font-size: 13px; font-weight: 600; color: #41587F; }
      .brd__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 64px; margin-top: 44px; padding-top: 36px; border-top: 1px solid rgba(0, 0, 0, .08); }
      .brd__logos img { height: 40px; width: auto; opacity: .78; }
      .brd__logos img.brd__logo--wide { height: 30px; }
      .brd__note { margin: 26px auto 0; max-width: 78ch; text-align: center; font-size: 12px; line-height: 1.55; color: rgba(0, 0, 0, .5); }
      @media (max-width: 960px) { .brd__grid { grid-template-columns: 1fr; } .brd { padding: 56px 0 48px; } .brd__logos { gap: 20px 36px; } .brd__logos img { height: 32px; } .brd__logos img.brd__logo--wide { height: 24px; } }

/* ---------- Our skincare targets (home, after the care plan; ilikhealth.com pattern, 10 Nov 2026) ---------- */
.skn { padding: 56px 0 24px; font-family: "Figtree", "Sofia Pro", "Helvetica Neue", Arial, sans-serif; color: #13254D; }
.skn__head { text-align: center; }
.skn__title { font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.skn__sub { margin: 10px auto 0; max-width: 56ch; font-size: 15.5px; line-height: 1.5; color: rgba(0, 0, 0, .62); }
.skn__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
.skn-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 168px; padding: 22px 22px 20px; border-radius: 14px; background: #E8F0F4; color: #13254D; overflow: hidden; isolation: isolate; transition: background .2s, transform .2s; }
.skn-card:hover { background: #DFEAF0; transform: translateY(-2px); }
.skn-card h3 { position: relative; z-index: 1; max-width: 62%; font-size: 15px; line-height: 1.25; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.skn-card__go { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; background: #A9BFC8; color: #fff; display: grid; place-items: center; }
.skn-card__go .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.skn-card__img { position: absolute; right: -6%; bottom: -8%; width: 62%; height: auto; z-index: 0; pointer-events: none; }
.skn-card--acne .skn-card__img { width: 58%; right: -4%; bottom: -6%; }
.skn-card--pigment .skn-card__img { width: 60%; right: -8%; bottom: -10%; }
.skn-card--sun .skn-card__img { width: 68%; right: -10%; bottom: -4%; }
.skn-card--pores .skn-card__img { width: 64%; right: -8%; bottom: -8%; }
.skn__note { margin: 22px auto 0; max-width: 78ch; text-align: center; font-size: 12px; line-height: 1.55; color: rgba(0, 0, 0, .5); }
@media (max-width: 1100px) { .skn__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .skn { padding: 44px 0 16px; } .skn__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 26px; } .skn-card { min-height: 150px; padding: 16px 16px 14px; } .skn-card h3 { font-size: 13.5px; max-width: 70%; } .skn-card:last-child { grid-column: 1 / -1; min-height: 132px; } .skn-card:last-child h3 { max-width: 55%; } .skn-card:last-child .skn-card__img { width: 40%; right: 2%; bottom: -14%; } }

/* ---------- Get started chooser (10 Nov 2026): full-screen split into two gradient cards, copy only ---------- */
.start { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; background: #10243F; font-family: "Figtree", "Sofia Pro", "Helvetica Neue", Arial, sans-serif; opacity: 0; transition: opacity .25s ease; }
.start.is-open { opacity: 1; }
.start[hidden] { display: none; }
.start__close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: #10243F; font-size: 26px; line-height: 1; cursor: pointer; }
.start__card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px, 5vw, 64px); border-radius: 24px; overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; transform: translateY(12px); opacity: 0; transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .45s, filter .3s; }
.start.is-open .start__card { transform: none; opacity: 1; }
.start.is-open .start__card--pep { transition-delay: .08s; }
.start__card:hover { filter: brightness(1.05); }
.start__card--glp { background: radial-gradient(90% 70% at 70% 20%, #5A3A18, #260F03 70%); }
.start__card--pep { background: linear-gradient(180deg, #3C6CA8 0%, #7FA6CE 48%, #DCE3E6 78%, #E9D9BF 100%); color: #10243F; }
.start__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.start__t { margin-top: 14px; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.04; font-weight: 500; letter-spacing: -.03em; text-wrap: balance; }
.start__s { margin-top: 14px; max-width: 36ch; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.45; opacity: .85; }
.start__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; height: 48px; padding: 0 22px; border-radius: 999px; background: #fff; color: #10243F; font-size: 15px; font-weight: 600; width: max-content; }
.start__card--glp .start__cta { color: #3B2510; }
.start__cta .ic { width: 16px; height: 16px; stroke-width: 2.2; }
body.start-open { overflow: hidden; }
@media (max-width: 760px) {
  .start { grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .start__card { padding: 22px 20px; border-radius: 20px; }
  .start__t { font-size: 28px; margin-top: 8px; }
  .start__s { font-size: 13.5px; max-width: 32ch; margin-top: 8px; }
  .start__cta { margin-top: 16px; height: 42px; padding: 0 18px; font-size: 14px; }
  .start__close { top: 12px; right: 12px; width: 40px; height: 40px; }
}

/* ---------- Testosterone range page (11 Nov 2026): hims line-up as Longiva compounded forms, all coming soon ---------- */
.pg-herocard--trt { min-height: 380px; padding-right: min(36%, 380px); }
.pg-herocard--trt .pg-sub { max-width: 46ch; }
.pg-herocard__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pg-herocard__ctas .btn--white { color: var(--navy-ink); }
.btn--onblue { color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn--onblue:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.pg-herocard__img--trt { right: 3%; bottom: -6%; width: min(34%, 330px); transform: rotate(6deg); }
.pcard__media--ask { background: #17365C; }
.pcard__media--ask .pcard__img { object-fit: cover; object-position: 55% 48%; transform: scale(1.12); opacity: .95; }
.pcard__soon--ask { background: #fff; color: var(--navy-ink); }
.pcard--ask .pcard__ev { min-height: 58px; }
.sx-btn--wide { width: auto; padding: 0 28px; font-size: 19px; }
@media (max-width: 820px) {
  /* phone (11 Nov 2026): no vial in the hero card, so the range grid shows above the fold */
  .pg-herocard--trt { padding-right: 24px; padding-bottom: 26px; min-height: 0; }
  .pg-herocard__img--trt { display: none; }
  .pg-herocard--trt .h-xl2 { font-size: 28px; }
  .pg-herocard--trt .pg-sub { font-size: 13.5px; line-height: 1.45; margin-top: 10px; }
  .pg-herocard--trt .pg-sub__long { display: none; }
  .pg-herocard--trt .pg-sub__short { display: inline; }
  .pg-herocard--trt .pg-herocard__ctas { margin-top: 16px; }
}
.pg-sub__short { display: none; }
.pcard__soon--now { background: #3F8E63; }

/* ---------- Labs test cards (11 Nov 2026): biomarker count pill + See markers button in the Longiva liquid-glass recipe ---------- */
.tcard__n { position: relative; height: 26px; padding: 0 10px 0 7px; border-radius: 13px; color: #fff; background: rgba(255, 255, 255, .01); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1); }
.tcard__n::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient(135deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, .15) 30%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .15) 75%, rgba(255, 255, 255, .45) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.tcard__btn { position: relative; color: #fff; background: rgba(255, 255, 255, .01); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); box-shadow: 4px 4px 4px rgba(0, 0, 0, .05), inset 0 1px 1px rgba(255, 255, 255, .15); }
.tcard__btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient(135deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .2) 30%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .2) 75%, rgba(255, 255, 255, .5) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

/* ---------- Weight-loss hub (11 Nov 2026): hims.com/weight-loss mobile layers measured 1:1 at 375px, Longiva colours ----------
   Swap the four tokens below to go back to hims's sand world (#D7C4A3 hero, #F0E5D2 cards, #CF9358 accent, #FFC671 gold). */
.wl2 { --wl2-page: #F7F7F7; --wl2-hero-b: #C9D8F0; --wl2-card: #EEF2F8; --wl2-accent: #2F5BB8; --wl2-gold: #E8B04E; --wl2-gold-ink: #3B2E12;
  --wl2-ink: rgba(0, 0, 0, .81); --wl2-ink-2: rgba(0, 0, 0, .5); --wl2-ink-3: rgba(0, 0, 0, .37); --wl2-hcard-a: #DCE6F6; --wl2-hcard-b: #5F7FB0;
  --wl2-dark-a: #2B4F86; --wl2-dark-b: #0E1F3B; --wl2-gut: 22px; --wl2-in: 331px;
  position: relative; background: var(--wl2-page); font-family: "Figtree", "Sofia Pro", "Helvetica Neue", Arial, sans-serif; color: var(--wl2-ink); -webkit-font-smoothing: antialiased; }
.wl2 h1, .wl2 h2, .wl2 h3, .wl2 p { margin: 0; }
.wl2 em { font-style: normal; color: var(--wl2-accent); }
.wl2 sup { font-size: .6em; vertical-align: top; position: relative; top: .1em; }
.wl2 .ph { background: #FBF0C2; color: #6B5600; padding: 0 4px; border-radius: 4px; font-size: .92em; }
.wl2-h4 { font-size: 28px; line-height: 32px; font-weight: 460; letter-spacing: -.2px; color: var(--wl2-ink); text-wrap: balance; }
.wl2-h4--center { text-align: center; }
.wl2-h5 { font-size: 25px; line-height: 28.5px; font-weight: 467; letter-spacing: -.15px; color: var(--wl2-ink); text-wrap: balance; }
.wl2-lead { margin-top: 10px; font-size: 16px; line-height: 20px; color: var(--wl2-ink-2); }
.wl2-fine { margin-top: 32px; font-size: 12px; line-height: 14.6px; font-weight: 490; color: var(--wl2-ink-3); }
.wl2-fine p + p { margin-top: 10px; }
.wl2-fine--tight { margin-top: 24px; }
.wl2-fine--center { text-align: center; }
.wl2-fine b { font-weight: 600; }

/* buttons: 48px pills, full width on phones (hims mobile) */
.wl2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 24px; border-radius: 9999px; border: 1px solid transparent; font-size: 16px; line-height: 24px; font-weight: 400; color: rgba(0, 0, 0, .89); text-decoration: none; cursor: pointer; transition: transform .15s, filter .15s; }
.wl2-btn:hover { filter: brightness(.94); }
.wl2-btn:active { transform: scale(.985); }
.wl2-btn--black { background: #000; color: #fff; }
.wl2-btn--white { background: #fff; color: rgba(0, 0, 0, .89); }
.wl2-btn--soft { background: rgba(0, 0, 0, .06); }
.wl2-btn--ghost { background: rgba(255, 255, 255, .01); border-color: rgba(0, 0, 0, .19); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wl2-btn--hero { width: auto; min-height: 64px; padding: 0 24px; border-radius: 100px; background: #fff; font-size: 18px; font-weight: 480; color: #313630; }
.wl2-btn--gold { width: auto; min-height: 58px; padding: 0 24px 0 17px; border-radius: 100px; background: var(--wl2-gold); font-size: 14px; font-weight: 490; color: #000; }
.wl2-btn--gold img { width: 30px; height: 30px; object-fit: contain; }
.wl2-link { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 8px 24px; font-size: 16px; line-height: 24px; color: rgba(0, 0, 0, .65); text-decoration: underline; text-underline-offset: 3px; }
.wl2-tag { display: inline-flex; align-items: center; padding: 5.5px 8px; border-radius: 46px; background: rgba(0, 0, 0, .12); font-size: 12px; line-height: 13px; font-weight: 500; color: rgba(0, 0, 0, .89); }
.wl2-tag--new { background: var(--wl2-gold); color: var(--wl2-gold-ink); }
.wl2-tag--hi { background: #D4E1F6; color: var(--wl2-accent); }
.wl2-chip { display: inline-flex; align-items: center; padding: 5.5px 8px; border-radius: 46px; background: var(--wl2-gold); font-size: 12px; line-height: 13px; font-weight: 500; color: var(--wl2-gold-ink); }

/* 1 · hero: gradient, 93px top, text column, swipe row of 279x464 cards with 130px above them */
.wl2-hero { position: relative; padding: 93px 0 0; background: linear-gradient(180deg, #fff 0, var(--wl2-hero-b) 40%); overflow: hidden; }
.wl2-hero__txt { width: min(var(--wl2-in), 100% - var(--wl2-gut) * 2); margin-inline: auto; }
.wl2-hero__h { max-width: none; font-size: 38px; line-height: 42px; font-weight: 430; letter-spacing: -.6px; white-space: nowrap; background: linear-gradient(68deg, #13254D 34%, #2F5BB8 54%, #6F93CF 90%); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; }
.wl2-hero__copy { margin-top: 28px; }
.wl2-hero__copy > p:first-child { font-size: 20px; line-height: 24px; font-weight: 477; color: #313630; }
.wl2-hero__copy .wl2-btn--hero { margin-top: 16px; }
.wl2-hero__terms { margin-top: 14px; font-size: 13px; line-height: 17px; font-weight: 500; color: #313630; }
.wl2-hero__terms span { font-weight: 400; color: rgba(49, 54, 48, .7); }
.wl2-hero__rail { padding: 130px 20px 0; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wl2-hero__rail::-webkit-scrollbar { display: none; }
.wl2-hero__grid { display: flex; gap: 8px; width: max-content; padding-bottom: 24px; }
.wl2-hcard { position: relative; display: block; flex: none; width: 279px; height: 464px; border-radius: 35px; overflow: visible; scroll-snap-align: start; color: #fff; text-decoration: none; }
.wl2-hcard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.wl2-hcard--pill::before { background: linear-gradient(180deg, var(--wl2-hcard-a), var(--wl2-hcard-b)); }
.wl2-hcard__badge { position: absolute; z-index: 3; left: 25px; top: 25px; display: inline-flex; align-items: center; padding: 10px 16px 9px; border-radius: 80px; border: 2px solid #fff; background: rgba(255, 255, 255, .04); -webkit-backdrop-filter: blur(64px); backdrop-filter: blur(64px); font-size: 24px; line-height: 38px; font-weight: 400; color: #fff; white-space: nowrap; }
.wl2-hcard__label { position: absolute; z-index: 3; left: 25px; bottom: 25px; padding: 10px 16px 9px; border-radius: 80px; font-size: 29px; line-height: 44px; font-weight: 400; color: #fff; white-space: nowrap; }
.wl2-hcard__label--sm { font-size: 24px; }
.wl2-hcard__pill { position: absolute; z-index: 2; pointer-events: none; filter: drop-shadow(0 18px 24px rgba(12, 30, 60, .28)); }
.wl2-hcard__pill--a { width: 104%; left: -2%; top: 6px; transform: none; filter: drop-shadow(0 24px 28px rgba(12, 30, 60, .3)); }
.wl2-hcard--photo { overflow: hidden; background: #2A2A2E; }
.wl2-hcard__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.wl2-hcard--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 31, 59, 0) 0, rgba(14, 31, 59, .25) 42%, rgba(14, 31, 59, .96) 100%); }
.wl2-hcard--photo::before { z-index: 2; inset: auto -80px -140px auto; width: 264px; height: 264px; border-radius: 50%; background: var(--wl2-gold); filter: blur(60px); opacity: .55; }
.wl2-hcard__stat { position: absolute; z-index: 3; left: 25px; bottom: 25px; display: grid; gap: 8px; color: var(--wl2-gold); }
.wl2-hcard__stat svg { width: 73px; height: 38px; }
.wl2-hcard__stat b { font-size: 29px; line-height: 29px; font-weight: 400; }
.wl2-hcard__stat i { font-style: normal; font-size: 22px; margin-right: 2px; }
.wl2-hcard__stat sup { font-size: 16px; top: 0; }
.wl2-hcard--pen { width: 184px; overflow: hidden; background: #E7EEF8; }
.wl2-hcard__pen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.wl2-hcard--pen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 31, 59, 0) 55%, rgba(14, 31, 59, .7) 100%); }

/* white layers on the grey page: 24px radius, 32px padding, 8px gaps, first one tucks 24px under the panel above */
.wl2-layer { position: relative; z-index: 1; margin: 0 0; padding: 32px 0; border-radius: 24px; background: #fff; }
.wl2-layer--tuck { margin-top: -24px; }
.wl2-layer--gap { margin-top: 8px; }
.wl2-layer--flat { border-radius: 0; }
.wl2-layer--flat-b { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.wl2-layer--flat-t { border-top-left-radius: 0; border-top-right-radius: 0; }
.wl2-layer--faq { padding-bottom: 80px; }
.wl2-layer > *, .wl2-split, .wl2-faqgrid { width: min(var(--wl2-in), 100% - var(--wl2-gut) * 2); margin-inline: auto; }
.wl2-layer > .wl2-rail, .wl2-layer > .wl2-blob { width: auto; margin-inline: 0; }
.wl2-head { text-align: center; }
.wl2-head--left { text-align: left; }
.wl2-actions { margin-top: 32px; }

/* product rail: 299x621 cards, 20px padding, 12px gap, figure in the middle, three stacked actions at the foot */
.wl2-rail { margin-top: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wl2-rail::-webkit-scrollbar { display: none; }
.wl2-cards { display: flex; gap: 12px; width: max-content; padding: 0 var(--wl2-gut); }
.wl2-pcard { display: flex; flex-direction: column; flex: none; width: 299px; height: 621px; padding: 20px; border-radius: 16px; background: var(--wl2-card); scroll-snap-align: start; }
.wl2-pcard header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wl2-pcard header h3 { width: 100%; margin-top: 4px; font-size: 20px; line-height: 24px; font-weight: 500; color: var(--wl2-ink); }
.wl2-pcard__meta { margin-top: 8px; display: grid; gap: 10px; font-size: 14px; line-height: 18px; color: var(--wl2-ink-2); }
.wl2-pcard__fig { flex: 1; display: grid; place-items: center; margin: 24px 0 16px; border-radius: 16px; overflow: hidden; }
.wl2-pcard__fig img { max-width: 100%; max-height: 220px; object-fit: contain; }
.wl2-pcard__fig--pen img { max-height: 250px; }
.wl2-pcard__fig--photo { background: #DDE6F3; }
.wl2-pcard__fig--photo img { width: 100%; height: 100%; max-height: none; object-fit: cover; filter: none; }
.wl2-pcard__ctas { display: grid; gap: 14px; }
.wl2-blob { display: block; width: 100%; height: 36px; margin-top: 28px; padding: 0; border: 0; background: #EFEFEF; cursor: default; }
.wl2-blob span { display: block; height: 100%; width: 22%; background: rgba(0, 0, 0, .12); transition: transform .2s; transform-origin: left; }

/* 3 · membership: figure first on phones, ticks with gold check discs */
.wl2-split { display: grid; gap: 28px; }
.wl2-split__fig { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 331 / 441; background: #EEF2F8; }
.wl2-split__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl2-split--imgfirst .wl2-split__fig { order: -1; }
.wl2-split--center { text-align: center; }
.wl2-split--center .wl2-chip { margin-bottom: 10px; }
.wl2-split .wl2-btn { margin-top: 28px; }
.wl2-ticks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.wl2-ticks li { position: relative; padding-left: 30px; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--wl2-ink); }
.wl2-ticks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--wl2-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B2E12' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.wl2-ticks + .wl2-btn { margin-top: 28px; }

/* 4 · complete support: banner, centred head, rounded list rows with a check on the right */
.wl2-banner { margin: 0 auto; }
.wl2-banner img { width: 100%; height: auto; display: block; }
.wl2-banner + .wl2-head { margin-top: 20px; }
.wl2-list { list-style: none; margin: 20px auto 0; padding: 0; display: grid; gap: 16px; }
.wl2-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; border-radius: 24px; background: rgba(0, 0, 0, .03); font-size: 16px; line-height: 20px; color: var(--wl2-ink); }
.wl2-check { flex: none; width: 18px; height: 18px; background: 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px no-repeat; }

/* 5 · dark panel: radial navy, floating tablet art, badge, 32px heading, gold pill. Next layer tucks 24px into its foot */
.wl2-dark { position: relative; z-index: 0; margin-top: -24px; padding: 36px 0 170px; border-radius: 0 0 24px 24px; overflow: hidden; text-align: center; color: #fff; background: radial-gradient(112% 112% at 50% 0, var(--wl2-dark-a) 0, var(--wl2-dark-b) 100%); }
.wl2-dark__art { position: absolute; z-index: 0; pointer-events: none; opacity: .92; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
.wl2-dark__art--a { width: 330px; left: 50%; top: 70px; transform: translateX(-50%); }
/* side-effect support cards (12 Nov 2026): three gold tiles, as on the reference */
.wl2-se { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wl2-se li { display: grid; gap: 6px; padding: 22px 24px; border-radius: 20px; background: var(--wl2-gold); color: var(--wl2-gold-ink); text-align: center; }
.wl2-se b { font-size: 18px; line-height: 22px; font-weight: 600; }
.wl2-se span { font-size: 13px; line-height: 17px; opacity: .85; }
.wl2-dark__in { position: relative; z-index: 1; width: min(var(--wl2-in), 100% - var(--wl2-gut) * 2); margin: 400px auto 0; display: grid; justify-items: center; }
.wl2-dark__badge { display: inline-flex; padding: 6px 10px 8px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .24); font-size: 12px; line-height: 17px; font-weight: 490; color: rgba(255, 255, 255, .64); }
.wl2-dark__h { margin-top: 16px; font-size: 32px; line-height: 35px; font-weight: 450; letter-spacing: -.1px; color: rgba(255, 255, 255, .96); }
.wl2-dark .wl2-btn--gold { margin-top: 25px; }

/* 8 · steps */
.wl2-steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.wl2-steps li { display: grid; gap: 4px; padding: 14px 0 0; border-top: 1px solid rgba(0, 0, 0, .08); font-size: 15px; line-height: 20px; color: var(--wl2-ink-2); }
.wl2-steps b { font-size: 12px; line-height: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--wl2-accent); }
.wl2-steps strong { font-weight: 500; color: var(--wl2-ink); }

/* 10 · reviews: 299x594 soft cards */
.wl2-reviews { display: flex; gap: 12px; width: max-content; padding: 0 var(--wl2-gut); }
.wl2-review { display: flex; flex-direction: column; align-items: center; flex: none; width: 299px; min-height: 360px; padding: 24px 18px; border-radius: 16px; background: rgba(0, 0, 0, .03); text-align: center; scroll-snap-align: start; }
.wl2-review p { flex: 1; margin-top: 36px; max-width: 263px; font-size: 16px; line-height: 20.5px; color: var(--wl2-ink-2); }
.wl2-review footer { margin-top: 32px; display: grid; gap: 2px; }
.wl2-review footer b { font-size: 16px; line-height: 24px; font-weight: 500; color: #000; }
.wl2-review footer span { font-size: 12px; line-height: 16px; font-weight: 490; color: var(--wl2-ink-2); }

/* 11 · FAQ: heading + button, then accordion rows */
.wl2-faqgrid { display: grid; gap: 28px; }
.wl2-faqgrid > div:first-child .wl2-btn { margin-top: 28px; }
.wl2-faq details { border-bottom: 1px solid rgba(0, 0, 0, .1); }
.wl2-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: 16px; line-height: 20px; font-weight: 500; color: var(--wl2-ink); cursor: pointer; }
.wl2-faq summary::-webkit-details-marker { display: none; }
.wl2-faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: 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 / 14px no-repeat; transition: transform .2s; }
.wl2-faq details[open] summary::after { transform: rotate(180deg); }
.wl2-faq details p { padding: 0 0 20px; font-size: 15px; line-height: 21px; color: var(--wl2-ink-2); }
.wl2-isi { margin-top: 40px; padding: 20px; border-radius: 16px; background: rgba(0, 0, 0, .03); font-size: 12px; line-height: 16px; font-weight: 490; color: var(--wl2-ink-3); }
.wl2-isi h3 { margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--wl2-ink); }
.wl2-isi a { color: inherit; text-decoration: underline; }

/* 12 · closing black panel, 667 tall, heading top-left and bottom-left, white pill */
.wl2-close { position: relative; margin-top: -24px; min-height: 667px; padding: 44px var(--wl2-gut) 48px; border-radius: 24px; overflow: hidden; background: #000; color: #fff; display: flex; flex-direction: column; }
.wl2-close__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: .85; }
.wl2-close__h { position: relative; z-index: 1; font-size: 32px; line-height: 35px; font-weight: 450; letter-spacing: -.1px; color: #fff; }
.wl2 .wl2-close__h--b { margin-top: auto; }
.wl2-close .wl2-btn--white { position: relative; z-index: 1; margin-top: 28px; }

/* desktop: the same layers, two-column splits, cards in a grid instead of a swipe row */
@media (min-width: 821px) {
  .wl2 { --wl2-in: 1068px; --wl2-gut: 40px; }
  .wl2-hero { padding-top: 110px; }
  .wl2-hero__txt { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 40px; }
  .wl2-hero__h { max-width: none; font-size: clamp(56px, 5.6vw, 76px); line-height: 1; letter-spacing: -.02em; }
  .wl2-hero__copy { margin-top: 0; max-width: 440px; }
  .wl2-hero__copy > p:first-child { font-size: 22px; line-height: 1.3; }
  .wl2-hero__rail { padding: 120px 20px 0; overflow: visible; }
  .wl2-hero__grid { width: min(1312px, 100%); margin-inline: auto; gap: 12px; }
  .wl2-hcard { flex: 1 1 0; width: auto; height: clamp(440px, 46vw, 680px); }
  .wl2-hcard--pen { flex: .66 1 0; }
  .wl2-hcard__pill--a { width: 90%; left: 5%; top: 4%; }
  .wl2-layer { padding: 56px 0; }
  .wl2-head--left { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 24px; }
  .wl2-head--left .wl2-lead { margin: 0; max-width: 420px; justify-self: end; }
  .wl2-h4 { font-size: 40px; line-height: 44px; }
  .wl2-h5 { font-size: 34px; line-height: 38px; }
  .wl2-lead { font-size: 18px; line-height: 24px; }
  .wl2-rail { overflow: visible; }
  .wl2-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: auto; padding: 0; }
  .wl2-pcard { width: auto; height: auto; min-height: 560px; }
  .wl2-blob { display: none; }
  .wl2-actions { display: flex; justify-content: center; }
  .wl2-actions .wl2-btn, .wl2-split .wl2-btn, .wl2-faqgrid .wl2-btn, .wl2-close .wl2-btn--white { width: auto; }
  .wl2-fine { max-width: 860px; }
  .wl2-split { grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; }
  .wl2-split--imgfirst .wl2-split__fig { order: 0; }
  .wl2-split--rev .wl2-split__fig { order: -1; }
  .wl2-split--center { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .wl2-split--center .wl2-split__fig { width: min(640px, 100%); aspect-ratio: 640 / 400; }
  .wl2-split--center .wl2-fine { max-width: 640px; }
  .wl2-split__fig { aspect-ratio: 4 / 5; }
  .wl2-banner { width: min(640px, 100%); }
  .wl2-list { width: min(640px, 100%); }
  .wl2-dark { padding-bottom: 200px; }
  .wl2-dark__art--a { width: 460px; top: 20px; transform: translateX(-50%); }
  .wl2-se { max-width: 331px; }
  .wl2-dark__in { margin-top: 420px; }
  .wl2-dark__h { font-size: 56px; line-height: 1.05; }
  .wl2-reviews { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: auto; padding: 0; }
  .wl2-review { width: auto; }
  .wl2-faqgrid { grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
  .wl2-faqgrid > div:first-child { position: sticky; top: 100px; }
  .wl2-close { min-height: 720px; padding: 72px 64px; align-items: center; text-align: center; }
  .wl2-close__h { font-size: 64px; line-height: 1; }
}
@media (max-width: 820px) {
  .wl2-layer--flat-b { padding-bottom: 32px; }
}