/*
Theme Name: Whealth
Description: Storefront theme for the Whealth sample site. Built for iCare Sites — no page builder, no framework.
Version: 4.0.5
Author: iCare Sites
*/

/* ==========================================================================
   Tokens

   Graphite + white + one acid lime. The category is full of soft pastel
   wellness brands and of blue telehealth; this is a strength gym under
   north light — closer to a lab than a spa, because the thing being sold
   is a physician's signature over something you are already doing.

   Two accents, and the split is deliberate. Acid lime (--acid) is the brand
   colour, but at 15:1 against white it is unreadable as type, so it only
   ever appears ON DARK or as a rule. Anything that has to carry text on
   white uses --accent, a deep lime-green from the same hue family that
   clears AA. Never swap one for the other to "keep it consistent"; they are
   consistent, in the only way that survives a contrast check.

   The dose ladder is the one place colour escalates — bars run from muted
   to full accent as the dose climbs, which is the actual shape of therapy.
   ========================================================================== */

:root {
	--ink:      #0B0F10;
	--ink-2:    #1A2124;
	--muted:    #667077;
	--line:     #E3E7E9;
	--tint:     #F2F5F6;
	--paper:    #FFFFFF;

	--acid:     #C8FF2E;
	--accent:   #2F6B00;
	--accent-d: #244F00;
	--go:       #2F6B00;
	--stop:     #B4322A;

	--dsp: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
	--bdy: "Inter", "Helvetica Neue", Arial, sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--wrap: 1180px;
	--r: 12px;

	/* Height of everything above the hero. The hero subtracts these to reach the
	   fold exactly, so they must stay in sync with the elements themselves —
	   which is why they are tokens and not numbers typed in two places. The
	   header height changed from 64 to 54 and the hero did not follow, which is
	   what left a white sliver of the next section showing under the fold. */
	--ribbon-h: 42px;
	--head-h: 54px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Any rule that sets `display` outranks the UA sheet's [hidden]{display:none},
   so a class like .wh-btn (inline-flex) silently defeats the hidden attribute.
   Restore it once, globally, rather than per component. */
[hidden] { display: none !important; }

body {
	margin: 0;
	font-family: var(--bdy);
	font-size: 16px;
	line-height: 1.55;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--dsp);
	font-weight: 600;
	letter-spacing: -0.022em;
	line-height: 1.08;
	margin: 0 0 .5em;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.12rem; letter-spacing: -0.012em; }

p { margin: 0 0 1rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

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

.wh-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wh-narrow { width: 100%; max-width: 720px; margin: 0 auto; padding: 56px 24px 80px; }
.wh-eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.wh-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	font-family: var(--dsp); font-size: .97rem; font-weight: 600; letter-spacing: -.01em;
	padding: 13px 22px; border: 1px solid var(--ink); border-radius: 10px;
	background: var(--ink); color: #fff; cursor: pointer;
	transition: background .15s ease, border-color .15s ease, transform .06s ease;
}
.wh-btn:hover { background: #000; text-decoration: none; }
.wh-btn:active { transform: translateY(1px); }
.wh-btn--accent { background: var(--accent); border-color: var(--accent); }
.wh-btn--accent:hover { background: var(--accent-d); border-color: var(--accent-d); }
.wh-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.wh-btn--ghost:hover { background: var(--tint); border-color: #C6CDD0; }

/* ==========================================================================
   Demo ribbon + header
   ========================================================================== */

/* Disclosure notice — sentence case in the display face, not mono caps.
   Quiet enough to read as a real company's notice, permanent enough that it
   can never be mistaken for a live pharmacy. */
.wh-ribbon { background: var(--ink); color: rgba(255,255,255,.86); }
.wh-ribbon__in { display: flex; align-items: center; gap: 10px; min-height: 38px; padding-top: 8px; padding-bottom: 8px; }
.wh-ribbon__in p { margin: 0; font-family: var(--dsp); font-size: .84rem; font-weight: 500; letter-spacing: -.005em; }
.wh-ribbon__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #F0A22E;
	box-shadow: 0 0 0 3px rgba(240,162,46,.18); }
.wh-ribbon__more { margin-left: auto; flex: none; appearance: none; background: transparent;
	border: 1px solid rgba(255,255,255,.22); border-radius: 100px; color: #fff;
	font-family: var(--dsp); font-size: .78rem; font-weight: 600; padding: 4px 12px; cursor: pointer;
	transition: background .15s ease, border-color .15s ease; }
.wh-ribbon__more:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }
.wh-ribbon__detail { border-top: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.wh-ribbon__detail > .wh-wrap { padding-top: 16px; padding-bottom: 18px; }
.wh-ribbon__detail p { margin: 0 0 8px; font-size: .87rem; color: rgba(255,255,255,.72); max-width: 74ch; }
.wh-ribbon__detail p:last-child { margin-bottom: 0; }
.wh-ribbon__detail strong { color: #fff; }
.wh-ribbon__detail a { color: var(--acid); }

@media (max-width: 640px) {
	/* The notice wrapped to two lines inside a 38px centred row, so the second
	   line was cropped on a phone. Let the bar size to its content and drop the
	   trailing sentence — the popover carries the detail anyway. */
	/* .wh-ribbon .… — the bare class loses to `.wh-wrap { padding: 0 18px }`
	   further down this file, whose SHORTHAND zeroes the vertical padding.
	   That collision is what cropped the notice in the first place. */
	.wh-ribbon .wh-ribbon__in { gap: 8px; min-height: 0; padding-top: 9px; padding-bottom: 11px; align-items: center; }
	.wh-ribbon__in p { font-size: .78rem; line-height: 1.35; }
	.wh-ribbon__long { display: none; }
	.wh-ribbon__more { font-size: .72rem; padding: 3px 10px; flex: none; }
}

.wh-head {
	position: sticky; top: 0; z-index: 60;
	background: rgba(255,255,255,.86);
	-webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
	border-bottom: 1px solid var(--line);
}
/* 54px, not 64: the tallest thing in the bar is the 42px CTA (and the 42px
   burger on phones), so 64 left 11px of dead white above and below it. At 54
   the button effectively sets the bar's height with 6px of breathing room,
   which is the point — the bar should hug its contents, not float in them. */
.wh-head__in { display: flex; align-items: center; gap: 28px; height: var(--head-h); }
.wh-logo { font-family: var(--dsp); font-weight: 700; font-size: 1.22rem; letter-spacing: -.03em; color: var(--ink); }
.wh-logo:hover { text-decoration: none; }
.wh-logo i { color: var(--accent); font-style: normal; }

/* The wordmark. The "h" drops to a muted grey so the eye reads "Wealth"
   first and "Whealth" a beat later — the pun is the mark, so it must never
   be flattened to one colour. Kept at a real grey rather than an opacity so
   it holds up on the dark hero as well as on white. */
.wh-mark { font-family: var(--dsp); font-weight: 700; letter-spacing: -.035em; }
.wh-mark__dim { color: var(--muted); }
.wh-hero .wh-mark__dim,
.wh-foot .wh-mark__dim { color: #7A848A; }

/* A product published to be read, not bought. Reads as a statement, not as a
   disabled control — a greyed-out button invites people to look for the
   enabled one. */
.wh-buy__no { border: 1px solid var(--line); border-top: 3px solid var(--ink); border-radius: var(--r); padding: 22px 22px 24px; background: var(--tint); }
.wh-buy__no-tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--stop); margin: 0 0 10px; }
.wh-buy__no-lead { font-family: var(--dsp); font-weight: 600; font-size: 1.16rem; letter-spacing: -.02em; color: var(--ink); margin: 0 0 8px; }
.wh-buy__no-body { font-size: .92rem; color: var(--ink-2); margin: 0 0 18px; }
.wh-buy__no .wh-btn { width: 100%; justify-content: center; }
.wh-nav { display: flex; gap: 22px; margin-left: auto; }
.wh-nav a { color: var(--ink-2); font-size: .93rem; font-weight: 500; }
.wh-nav a:hover { color: var(--accent); text-decoration: none; }
.wh-head .wh-btn { padding: 9px 16px; font-size: .88rem; }

@media (max-width: 720px) {
	.wh-nav { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.wh-hero { padding: 76px 0 48px; border-bottom: 1px solid var(--line); }
.wh-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.wh-hero h1 { max-width: 12ch; margin-bottom: .35em; }
.wh-hero__lead { font-size: 1.14rem; color: var(--ink-2); max-width: 46ch; }
.wh-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

.wh-trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.wh-trust div { background: var(--paper); padding: 18px 20px; }
.wh-trust strong { display: block; font-family: var(--dsp); font-size: 1.42rem; letter-spacing: -.02em; }
.wh-trust span { font-size: .84rem; color: var(--muted); }

@media (max-width: 900px) {
	.wh-hero__grid { grid-template-columns: 1fr; gap: 36px; align-items: start; }
	.wh-hero { padding: 48px 0 36px; }
}

/* ==========================================================================
   Section furniture
   ========================================================================== */

.wh-sec { padding: 68px 0; }
.wh-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.wh-sec__head p { color: var(--muted); margin: 0; font-size: .93rem; }

/* ==========================================================================
   Treatment cards
   ========================================================================== */

.wh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1040px) { .wh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .wh-grid { grid-template-columns: 1fr; } }

.wh-card {
	display: flex; flex-direction: column;
	border: 1px solid var(--line); border-radius: var(--r);
	padding: 22px 20px 20px; background: var(--paper);
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.wh-card:hover { border-color: #C9D4E1; box-shadow: 0 14px 34px -18px rgba(11,15,20,.28); transform: translateY(-2px); }
.wh-card__badge {
	align-self: flex-start; font-family: var(--mono); font-size: .64rem; letter-spacing: .07em; text-transform: uppercase;
	background: var(--ink); color: #fff; padding: 4px 8px; border-radius: 5px; margin-bottom: 12px;
}
.wh-card__badge:empty { display: none; }
.wh-card h3 { margin-bottom: .15em; font-size: 1.3rem; }
.wh-card__sub { font-family: var(--mono); font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
.wh-card__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.wh-card__price b { font-family: var(--dsp); font-size: 1.85rem; letter-spacing: -.03em; font-weight: 600; }
.wh-card__price span { color: var(--muted); font-size: .86rem; }
.wh-card__alt { font-size: .81rem; color: var(--muted); margin-bottom: 16px; }
.wh-card__ex { font-size: .9rem; color: var(--ink-2); margin: 0 0 18px; }
.wh-card .wh-btn { width: 100%; margin-top: auto; }

/* ==========================================================================
   The dose ladder — signature element

   Therapy here is a titration, so the schedule is the product. Bars grow
   with the dose and gain colour as they climb.
   ========================================================================== */

.wh-ladder { border-top: 1px solid var(--line); padding-top: 12px; margin: 0 0 16px; }
.wh-ladder__head {
	display: flex; justify-content: space-between;
	font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .07em;
	color: var(--muted); margin-bottom: 10px;
}
.wh-ladder__rows { display: grid; gap: 6px; }
.wh-ladder__row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; }
.wh-ladder__wk { font-family: var(--mono); font-size: .68rem; color: var(--muted); }
.wh-ladder__bar { height: 7px; background: var(--tint); border-radius: 4px; overflow: hidden; }
.wh-ladder__bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.wh-ladder__bar.is-none { background: transparent; border-top: 1px dashed var(--line); height: 0; border-radius: 0; }
.wh-ladder__dose { font-family: var(--mono); font-size: .76rem; font-weight: 500; min-width: 46px; text-align: right; }
.wh-ladder__dose i { font-style: normal; color: var(--muted); font-size: .82em; margin-left: 1px; }
.wh-ladder.is-compact { border-top: 0; padding-top: 0; }

/* ==========================================================================
   Product detail
   ========================================================================== */

.wh-pdp { display: grid; grid-template-columns: 1.25fr .75fr; gap: 52px; padding: 44px 0 80px; align-items: start; }
@media (max-width: 940px) { .wh-pdp { grid-template-columns: 1fr; gap: 32px; } }

.wh-pdp__body { font-size: 1.03rem; color: var(--ink-2); }
.wh-pdp__body h1 { margin-bottom: .1em; }
.wh-pdp__sub { font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 26px; }

.wh-buy { position: sticky; top: 88px; border: 1px solid var(--line); border-radius: var(--r); padding: 22px; background: var(--paper); box-shadow: 0 18px 44px -26px rgba(11,15,20,.3); }
.wh-buy__plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.wh-plan { border: 1px solid var(--line); border-radius: 9px; padding: 12px; cursor: pointer; display: block; }
.wh-plan input { position: absolute; opacity: 0; pointer-events: none; }
.wh-plan span { display: block; font-size: .78rem; color: var(--muted); }
.wh-plan b { font-family: var(--dsp); font-size: 1.28rem; letter-spacing: -.02em; }
.wh-plan:has(input:checked) { border-color: var(--ink); background: var(--tint); }
.wh-buy__inc { list-style: none; margin: 16px 0 20px; padding: 0; font-size: .89rem; }
.wh-buy__inc li { padding: 7px 0 7px 22px; border-bottom: 1px solid var(--line); position: relative; }
.wh-buy__inc li:last-child { border-bottom: 0; }
.wh-buy__inc li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 9px; height: 5px; border-left: 2px solid var(--go); border-bottom: 2px solid var(--go); transform: rotate(-45deg); }
.wh-buy .wh-btn { width: 100%; }
.wh-buy__fine { font-size: .78rem; color: var(--muted); margin: 12px 0 0; text-align: center; }

/* ==========================================================================
   Intake
   ========================================================================== */

.wh-intake { display: grid; grid-template-columns: 1fr 320px; gap: 44px; max-width: var(--wrap); margin: 0 auto; padding: 44px 24px 80px; align-items: start; }
@media (max-width: 900px) { .wh-intake { grid-template-columns: 1fr; } .wh-intake__aside { order: -1; } }

.wh-intake__bar { grid-column: 1 / -1; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.wh-intake__bar i { display: block; height: 100%; width: 20%; background: var(--accent); transition: width .3s cubic-bezier(.4,0,.2,1); }

.wh-step__count { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 26px 0 10px; }
/* Each step takes focus so screen readers announce the new question. That is
   a programmatic move, not a keyboard one, so it must not paint a ring. */
.wh-step__q { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 22px; }
.wh-step__q:focus { outline: none; }
.wh-step { border: 0; padding: 0; margin: 0; }

.wh-opts { display: grid; gap: 9px; max-width: 520px; }
.wh-opt { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.wh-opt:hover { border-color: #C9D4E1; background: var(--tint); }
.wh-opt input { accent-color: var(--accent); width: 17px; height: 17px; }
.wh-opt:has(input:checked) { border-color: var(--ink); background: var(--tint); }
.wh-opt span { font-size: .98rem; }

.wh-input, .wh-pair input, .wh-fields input, .wh-fields select, .wh-case__act textarea {
	width: 100%; font-family: var(--bdy); font-size: 1rem; color: var(--ink);
	padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
}
.wh-input:focus, .wh-fields input:focus, .wh-fields select:focus { border-color: var(--accent); outline: none; }
.wh-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 520px; }
.wh-fields { display: grid; gap: 10px; max-width: 520px; }
.wh-hint { font-size: .85rem; color: var(--muted); margin-top: 12px; max-width: 52ch; }
.wh-step__nav { display: flex; gap: 10px; margin-top: 26px; }

.wh-intake__aside { border: 1px solid var(--line); border-radius: var(--r); padding: 20px; background: var(--tint); }
.wh-aside__label { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 8px; }
.wh-intake__aside h3 { margin-bottom: .1em; }
.wh-aside__sub { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; color: var(--muted); letter-spacing: .05em; }
.wh-aside__price { font-family: var(--dsp); font-size: 1.7rem; font-weight: 600; letter-spacing: -.03em; margin: 10px 0 16px; }
.wh-aside__price span { font-family: var(--bdy); font-size: .82rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }

/* ==========================================================================
   Status tracker
   ========================================================================== */

.wh-status h1 { margin-bottom: 24px; }
.wh-track { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 0; }
.wh-track li { display: flex; align-items: center; gap: 14px; padding: 0 0 22px; position: relative; }
.wh-track li:not(:last-child)::before { content: ""; position: absolute; left: 8px; top: 20px; bottom: 2px; width: 2px; background: var(--line); }
.wh-track li.is-done:not(:last-child)::before { background: var(--go); }
.wh-track__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); background: var(--paper); flex: none; z-index: 1; }
.wh-track li.is-done .wh-track__dot { background: var(--go); border-color: var(--go); }
.wh-track li.is-now .wh-track__dot { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(11,92,255,.16); }
.wh-track__label { font-size: .98rem; color: var(--muted); }
.wh-track li.is-done .wh-track__label, .wh-track li.is-now .wh-track__label { color: var(--ink); font-weight: 500; }

.wh-note { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; padding: 14px 16px; margin: 0 0 24px; background: var(--tint); }
.wh-note--stop { border-left-color: var(--stop); }
.wh-note p { margin: 4px 0 0; font-size: .93rem; }
.wh-mono { font-family: var(--mono); font-size: .88rem; }

.wh-panel { border-top: 1px solid var(--line); padding-top: 26px; }
.wh-panel__sub { color: var(--muted); font-size: .89rem; margin-bottom: 18px; }
.wh-mailitem { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.wh-mailitem header { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 12px 15px; background: var(--tint); border-bottom: 1px solid var(--line); }
.wh-mailitem time { font-family: var(--mono); font-size: .72rem; color: var(--muted); flex: none; }
.wh-mailitem pre { margin: 0; padding: 15px; font-family: var(--bdy); font-size: .9rem; line-height: 1.6; white-space: pre-wrap; color: var(--ink-2); }

/* ==========================================================================
   Clinician console — deliberately utilitarian. This is the back office,
   not the storefront, and it should feel like a tool.
   ========================================================================== */

.wh-console { max-width: 1040px; margin: 0 auto; padding: 40px 24px 80px; }
.wh-console__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 4px; }
.wh-console__head h1 { font-size: 2rem; margin: 0; }
.wh-console__count { font-size: .9rem; color: var(--muted); margin: 0; }
.wh-console__count strong { font-family: var(--dsp); font-size: 1.5rem; color: var(--ink); }
.wh-empty { color: var(--muted); padding: 40px 0; }

.wh-case { border-bottom: 1px solid var(--line); }
.wh-case summary { display: grid; grid-template-columns: 1.4fr 1.2fr auto auto; gap: 16px; align-items: center; padding: 15px 4px; cursor: pointer; list-style: none; }
.wh-case summary::-webkit-details-marker { display: none; }
.wh-case summary:hover { background: var(--tint); }
.wh-case__who strong { display: block; font-size: .98rem; }
.wh-case__who span { font-size: .8rem; color: var(--muted); }
.wh-case__rx { font-size: .92rem; color: var(--ink-2); }
.wh-case summary time { font-family: var(--mono); font-size: .72rem; color: var(--muted); }

.wh-pill { font-family: var(--mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; padding: 4px 9px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.wh-pill--review, .wh-pill--submitted { border-color: var(--accent); color: var(--accent); }
.wh-pill--approved { border-color: var(--go); color: var(--go); }
.wh-pill--shipped { border-color: var(--go); background: var(--go); color: #fff; }
.wh-pill--declined { border-color: var(--stop); color: var(--stop); }

.wh-case__body { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 8px 4px 28px; }
@media (max-width: 820px) { .wh-case__body { grid-template-columns: 1fr; } .wh-case summary { grid-template-columns: 1fr auto; } .wh-case__rx { display: none; } }
.wh-case__body h3 { font-size: .8rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 500; margin-bottom: 12px; }
.wh-case__answers dl { margin: 0 0 18px; }
.wh-case__answers dl div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.wh-case__answers dt { font-size: .82rem; color: var(--muted); }
.wh-case__answers dd { margin: 0; font-size: .9rem; }
.wh-case__act textarea { font-family: var(--bdy); resize: vertical; margin-bottom: 12px; }
.wh-case__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.wh-case__logh { margin-top: 26px; }
.wh-log { list-style: none; margin: 0; padding: 0; font-size: .84rem; }
.wh-log li { display: grid; grid-template-columns: 108px 1fr; gap: 10px; padding: 5px 0; color: var(--ink-2); }
.wh-log time { font-family: var(--mono); font-size: .72rem; color: var(--muted); }

/* ==========================================================================
   How it works
   ========================================================================== */

.wh-how { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 2px; }
.wh-how li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); }
.wh-how__n { font-family: var(--dsp); font-size: 1.7rem; font-weight: 600; color: var(--line); letter-spacing: -.03em; }
.wh-how h3 { margin-bottom: .25em; }
.wh-how p { margin: 0; color: var(--ink-2); font-size: .96rem; }

/* ==========================================================================
   Footer
   ========================================================================== */

.wh-foot { border-top: 1px solid var(--line); background: var(--tint); padding: 44px 0 30px; margin-top: 40px; }
.wh-foot__in { display: flex; gap: 30px; justify-content: space-between; flex-wrap: wrap; }
.wh-foot a { color: var(--ink-2); font-size: .9rem; display: block; padding: 3px 0; }
.wh-foot__fine { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 18px; font-size: .8rem; color: var(--muted); }
.wh-foot__fine strong { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
	/* Content that animates IN must land visible when animation is disabled. */
	.wh-hero__h1 span, .wh-hero__lead, .wh-hero__cta, .wh-hero__fine,
	.wh-reveal { opacity: 1 !important; transform: none !important; }
}


/* ==========================================================================
   Prescriber chrome

   The console is the other half of the pitch — the doctor's tool, not the
   store. It gets its own dark bar so a room watching the demo can see the
   moment the story crosses from patient to clinician.
   ========================================================================== */

.wh-rx-head { background: var(--ink); border-bottom: 1px solid #232B36; position: sticky; top: 0; z-index: 60; }
.wh-rx-head__in { display: flex; align-items: center; gap: 16px; height: 58px; }
.wh-rx-head__mark { font-family: var(--dsp); font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em; color: #fff; }
.wh-rx-head__mark i { font-style: normal; color: var(--acid); font-weight: 500; }
.wh-rx-head__env { font-family: var(--mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: #8B97A6; border: 1px solid #2C3542; border-radius: 4px; padding: 3px 7px; }
.wh-rx-head__who { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.wh-rx-head__who span { font-size: .85rem; color: #B9C3CF; }
.wh-rx-head__who a { font-size: .85rem; color: var(--acid); }

/* ==========================================================================
   v2 — full storefront
   ========================================================================== */

.wh-lede { font-size: 1.14rem; color: var(--ink-2); max-width: 54ch; }
.wh-lede--light { color: rgba(255,255,255,.72); }
.wh-eyebrow--light { color: rgba(255,255,255,.5); }
.wh-fineprint { font-size: .78rem; color: var(--muted); }
.wh-fineprint--light { color: rgba(255,255,255,.45); }
.wh-i { width: 1em; height: 1em; flex: none; }
.wh-btn .wh-i { width: 1.05em; height: 1.05em; transition: transform .18s ease; }
.wh-btn:hover .wh-i { transform: translateX(3px); }
.wh-btn--lg { padding: 15px 26px; font-size: 1.02rem; border-radius: 11px; }
.wh-btn--glass { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wh-btn--glass:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); }
.wh-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-family: var(--dsp); }
.wh-link .wh-i { transition: transform .18s ease; }
.wh-link:hover { text-decoration: none; }
.wh-link:hover .wh-i { transform: translateX(4px); }
.wh-crumb { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 18px; }
.wh-crumb span { opacity: .5; }

/* --- Hero film ------------------------------------------------------------
   Two clips stacked; app.js cross-dissolves between them so the background
   runs continuously instead of cutting every five seconds. */
/* Fill exactly to the fold. `88vh` left a shortfall of (0.12 x vh - 96px):
   flush at an 800px-tall window, and a widening strip of the next section on
   anything taller. The 2px is deliberate slack — the notice bar's height is
   text-dependent and sub-pixel rounding should never be able to expose white.
   svh, not vh, so a mobile browser's collapsing toolbar does not overshoot. */
.wh-hero { position: relative; min-height: calc(100svh - var(--ribbon-h) - var(--head-h) + 2px);
	display: flex; align-items: center; overflow: hidden; padding: 120px 0 96px; border: 0; }
.wh-hero__film { position: absolute; inset: 0; z-index: 0;
	/* The still is painted by the hero itself, not only by the <video poster>:
	   Safari renders no poster when preload is none, and a browser that refuses
	   to autoplay would otherwise leave this area empty. The film plays over it. */
	background-image: url("assets/hero-poster.webp");
	background-size: cover; background-position: center; background-color: var(--ink); }
.wh-hero__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease-in-out; }
.wh-hero__vid.is-on { opacity: 1; }
.wh-hero__scrim { position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(8,11,15,.92) 0%, rgba(8,11,15,.72) 42%, rgba(8,11,15,.35) 100%),
    linear-gradient(to top, rgba(8,11,15,.95) 0%, rgba(8,11,15,0) 45%); }
.wh-hero__in { position: relative; z-index: 2; color: #fff; }
.wh-hero__eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--mono); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.2); border-radius: 100px; padding: 6px 14px; margin-bottom: 26px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgba(255,255,255,.06); }
.wh-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 3px rgba(74,222,128,.25); animation: wh-pulse 2.4s ease-in-out infinite; }
@keyframes wh-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(74,222,128,.25); } 50% { box-shadow: 0 0 0 6px rgba(74,222,128,0); } }
.wh-hero__h1 { font-size: clamp(3rem, 8vw, 6.4rem); line-height: .95; letter-spacing: -.04em; margin: 0 0 .3em; color: #fff; }
.wh-hero__h1 span { display: block; opacity: 0; transform: translateY(24px); animation: wh-rise .9s cubic-bezier(.22,1,.36,1) forwards; }
.wh-hero__h1 span:nth-child(2) { animation-delay: .12s; }
@keyframes wh-rise { to { opacity: 1; transform: none; } }
.wh-hero__lead { font-size: 1.16rem; color: rgba(255,255,255,.82); max-width: 48ch; margin-bottom: 30px;
  opacity: 0; animation: wh-rise .9s .22s cubic-bezier(.22,1,.36,1) forwards; }
.wh-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; opacity: 0; animation: wh-rise .9s .34s cubic-bezier(.22,1,.36,1) forwards; }
.wh-hero__fine { margin-top: 22px; font-size: .82rem; color: rgba(255,255,255,.55); opacity: 0; animation: wh-rise .9s .46s cubic-bezier(.22,1,.36,1) forwards; }

/* Centred as a group, not stretched across four equal columns. Equal columns
   left-align each label inside its own quarter, so all the text mass collects
   on the left of the bar and the right half reads as empty — the bar looked
   shoved left even though its box was symmetric. */
.wh-hero__proof {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: 8px 46px; padding: 15px 24px;
	border-top: 1px solid rgba(255,255,255,.12); background: rgba(8,11,15,.5);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* Display sans in sentence case, not mono caps — the uppercase-tracked
   treatment is the single fastest way to make a trust bar look generated. */
/* Top-aligned, not centred: on a phone "US compounding pharmacy" wraps to two
   lines, and centring dropped its icon half a line below the item beside it. */
.wh-tick { display: inline-flex; align-items: flex-start; gap: .5rem; min-width: 0;
	font-family: var(--dsp); font-size: .88rem; font-weight: 500; letter-spacing: -.01em;
	line-height: 1.35; text-transform: none; color: rgba(255,255,255,.78); }
.wh-tick .wh-i { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--acid); opacity: .95; }

@media (max-width: 900px) {
  .wh-hero { min-height: calc(100svh - var(--ribbon-h) - var(--head-h) + 2px); padding: 92px 0 78px; }
}

/* --- Scroll reveal -------------------------------------------------------- */
.wh-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.wh-reveal.is-in { opacity: 1; transform: none; }

/* --- Sections ------------------------------------------------------------- */
.wh-sec--tint { background: var(--tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wh-sec--tight { padding-top: 34px; }
.wh-dark { background: var(--ink); color: #fff; }
.wh-dark h2, .wh-dark h3 { color: #fff; }
.wh-dark .wh-how li { border-top-color: rgba(255,255,255,.12); }
.wh-dark .wh-how__n { color: rgba(255,255,255,.22); }
.wh-dark .wh-how p { color: rgba(255,255,255,.66); }

/* --- About ---------------------------------------------------------------- */
.wh-about__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; }
@media (max-width: 940px) { .wh-about__grid { grid-template-columns: 1fr; gap: 40px; } }
.wh-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.wh-stat { background: var(--paper); padding: 26px 22px; }
.wh-stat__i { display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 9px; background: var(--tint); color: var(--accent); margin-bottom: 14px; }
.wh-stat__i .wh-i { width: 18px; height: 18px; }
.wh-stat strong { display: block; font-family: var(--dsp); font-size: 2rem; letter-spacing: -.03em; line-height: 1; }
.wh-stat__l { font-size: .84rem; color: var(--muted); }

/* --- Cards with photography ---------------------------------------------- */
.wh-card { padding: 0; overflow: hidden; }
.wh-card__media { display: block; position: relative; background: #EDF0F0; aspect-ratio: 1 / 1; overflow: hidden; }
.wh-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,1,.36,1); display: block; }
.wh-card:hover .wh-card__media img { transform: scale(1.05); }
.wh-card__badge { position: absolute; top: 14px; left: 14px; align-self: auto; margin: 0; }
.wh-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.wh-card__body h3 a { color: inherit; }
.wh-card__body h3 a:hover { color: var(--accent); text-decoration: none; }
.wh-card__cta { width: 100%; margin-top: auto; }
.wh-grid--shop { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .wh-grid--shop { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .wh-grid--shop { grid-template-columns: 1fr; } }

/* --- Shop / about heads --------------------------------------------------- */
.wh-shophead, .wh-abouthead { padding: 62px 0 34px; border-bottom: 1px solid var(--line); }
.wh-shophead h1, .wh-abouthead h1 { max-width: 18ch; }
.wh-abouthead h1 { max-width: 20ch; }
.wh-shophead__marks { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 0; margin: 26px 0 0; }
.wh-shophead__marks li { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--ink-2); }
.wh-shophead__marks .wh-i { color: var(--accent); width: 17px; height: 17px; }

/* --- Prose ---------------------------------------------------------------- */
.wh-prose { max-width: 66ch; font-size: 1.03rem; color: var(--ink-2); }
.wh-prose p { margin-bottom: 1.15rem; }
.wh-pull { border-left: 3px solid var(--accent); margin: 28px 0; padding: 4px 0 4px 22px;
  font-family: var(--dsp); font-size: 1.42rem; line-height: 1.25; letter-spacing: -.02em; color: var(--ink); }

/* --- Features ------------------------------------------------------------- */
.wh-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
@media (max-width: 940px) { .wh-feat { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .wh-feat { grid-template-columns: 1fr; } }
.wh-feat__item { background: var(--paper); padding: 28px 24px; }
.wh-feat__i { display: flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 10px;
  background: var(--tint); color: var(--accent); margin-bottom: 16px; }
.wh-feat__i .wh-i { width: 19px; height: 19px; }
.wh-feat__item h3 { margin-bottom: .4em; }
.wh-feat__item p { margin: 0; font-size: .93rem; color: var(--muted); }

/* --- Quotes --------------------------------------------------------------- */
.wh-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 940px) { .wh-quotes { grid-template-columns: 1fr; } }
.wh-quote { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.wh-quote__stars { display: flex; gap: 2px; color: #F0A22E; margin-bottom: 14px; }
.wh-quote__stars .wh-i { width: 15px; height: 15px; fill: #F0A22E; }
.wh-quote blockquote { margin: 0 0 18px; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.wh-quote figcaption strong { display: block; font-size: .9rem; }
.wh-quote figcaption span { font-size: .82rem; color: var(--muted); }

/* --- FAQ ------------------------------------------------------------------ */
.wh-faq__wrap { max-width: 820px; }
.wh-faq { margin-top: 28px; border-top: 1px solid var(--line); }
.wh-faq__item { border-bottom: 1px solid var(--line); }
.wh-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer;
  list-style: none; padding: 20px 0; font-family: var(--dsp); font-size: 1.08rem; font-weight: 600; letter-spacing: -.015em; }
.wh-faq__item summary::-webkit-details-marker { display: none; }
.wh-faq__x { position: relative; width: 15px; height: 15px; flex: none; }
.wh-faq__x::before, .wh-faq__x::after { content: ""; position: absolute; background: var(--muted); transition: transform .22s ease; }
.wh-faq__x::before { left: 0; top: 6.5px; width: 15px; height: 2px; }
.wh-faq__x::after  { left: 6.5px; top: 0; width: 2px; height: 15px; }
.wh-faq__item[open] .wh-faq__x::after { transform: rotate(90deg); }
.wh-faq__a { padding: 0 0 22px; max-width: 66ch; color: var(--ink-2); font-size: .98rem; }
.wh-faq__a p { margin: 0; }

/* --- Team ----------------------------------------------------------------- */
.wh-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
@media (max-width: 900px) { .wh-team { grid-template-columns: 1fr; } }
.wh-team__member { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); padding: 24px; }
.wh-team__member p { color: rgba(255,255,255,.66); font-size: .93rem; margin: 0; }
.wh-team__avatar { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,.08); color: var(--acid); margin-bottom: 16px; }
.wh-team__role { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--acid) !important; margin-bottom: 10px !important; }

/* --- CTA band ------------------------------------------------------------- */
.wh-cta { background: var(--accent); color: #fff; padding: 76px 0; }
.wh-cta__in { text-align: center; }
.wh-cta h2 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: .3em; }
.wh-cta p { color: rgba(255,255,255,.82); margin-bottom: 26px; }
/* On DARK grounds the primary action is acid, not --accent: a deep green
   button on a dark film is barely a button. Both are the same brand colour
   at the two ends it has to work at. */
.wh-hero .wh-btn--accent,
.wh-cta .wh-btn--accent { background: var(--acid); color: var(--ink); border-color: var(--acid); }
.wh-hero .wh-btn--accent:hover { background: #D6FF5C; border-color: #D6FF5C; }
.wh-cta .wh-btn--accent:hover { background: #D6FF5C; border-color: #D6FF5C; }

/* --- PDP media ------------------------------------------------------------ */
.wh-pdp__media { position: relative; margin: 0 0 30px; border-radius: var(--r); overflow: hidden; background: #EDF0F0; border: 1px solid var(--line); }
.wh-pdp__media img { display: block; width: 100%; height: auto; }
.wh-pdp__ladder { margin-top: 34px; max-width: 430px; }
.wh-pdp__marks { display: grid; gap: 10px; margin-top: 30px; }
.wh-pdp__marks div { display: flex; align-items: center; gap: .7rem; font-size: .92rem; color: var(--ink-2); }
.wh-pdp__marks .wh-i { color: var(--go); width: 18px; height: 18px; }

/* --- Checkout ------------------------------------------------------------- */
.wh-checkout { display: grid; grid-template-columns: 1fr 360px; gap: 52px; max-width: var(--wrap); margin: 0 auto; padding: 48px 24px 90px; align-items: start; }
@media (max-width: 940px) { .wh-checkout { grid-template-columns: 1fr; } .wh-summary { order: -1; } }
.wh-form__h { font-size: .8rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 500; margin: 30px 0 12px; }
.wh-form .wh-fields { max-width: none; }
.wh-form .wh-btn { width: 100%; margin-top: 24px; }
.wh-card-note { display: flex; gap: .7rem; align-items: flex-start; background: var(--tint); border: 1px solid var(--line);
  border-radius: 10px; padding: 13px 15px; font-size: .87rem; color: var(--ink-2); margin-bottom: 14px; }
.wh-card-note .wh-i { color: var(--go); margin-top: 2px; }
.wh-summary { border: 1px solid var(--line); border-radius: var(--r); padding: 22px; background: var(--paper); position: sticky; top: 88px;
  box-shadow: 0 18px 44px -26px rgba(11,15,20,.3); }
.wh-summary h2 { font-size: 1.02rem; margin-bottom: 16px; }
.wh-summary__item { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.wh-summary__thumb { width: 56px; height: 56px; border-radius: 9px; overflow: hidden; background: var(--tint); flex: none; }
.wh-summary__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wh-summary__item strong { display: block; font-size: .96rem; }
.wh-summary__item em { font-style: normal; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.wh-summary__lines { margin: 16px 0; }
.wh-summary__lines div { display: flex; justify-content: space-between; padding: 7px 0; font-size: .92rem; }
.wh-summary__lines dt { color: var(--muted); }
.wh-summary__lines dd { margin: 0; }
.wh-summary__total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px !important; font-family: var(--dsp); font-size: 1.2rem; font-weight: 600; }
.wh-summary__total dt { color: var(--ink) !important; }
.wh-summary__note { font-size: .8rem; color: var(--muted); margin-bottom: 18px; }

/* --- Success -------------------------------------------------------------- */
.wh-success { max-width: 720px; margin: 0 auto; padding: 66px 24px 90px; text-align: center; }
.wh-success__mark { width: 66px; height: 66px; border-radius: 50%; background: var(--go); color: #fff;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 26px;
  animation: wh-pop .55s cubic-bezier(.34,1.56,.64,1) both; }
.wh-success__mark .wh-i { width: 32px; height: 32px; stroke-width: 2.4; }
@keyframes wh-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.wh-success h1 { font-size: clamp(2rem, 4.6vw, 3rem); }
.wh-success .wh-lede { margin: 0 auto 34px; }
.wh-success__next { text-align: left; border: 1px solid var(--line); border-radius: var(--r); padding: 24px; background: var(--tint); }
.wh-success__next h2 { font-size: 1rem; margin-bottom: 16px; }
.wh-success__next ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.wh-success__next li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; }
.wh-success__next li span { display: flex; width: 38px; height: 38px; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--paper); border: 1px solid var(--line); color: var(--accent); }
.wh-success__next strong { display: block; font-size: .96rem; }
.wh-success__next p { margin: 2px 0 0; font-size: .88rem; color: var(--muted); }
.wh-success__cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* --- Mobile nav ----------------------------------------------------------- */
.wh-burger { display: none; margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--line);
  background: var(--paper); border-radius: 10px; cursor: pointer; position: relative; }
.wh-burger span { position: absolute; left: 11px; width: 18px; height: 2px; background: var(--ink); transition: transform .22s ease, opacity .22s ease; }
.wh-burger span:nth-child(1) { top: 15px; }
.wh-burger span:nth-child(2) { top: 20px; }
.wh-burger span:nth-child(3) { top: 25px; }
body.wh-navopen .wh-burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.wh-navopen .wh-burger span:nth-child(2) { opacity: 0; }
body.wh-navopen .wh-burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 860px) {
  .wh-burger { display: block; }
  .wh-head .wh-btn { display: none; }
  /* The closed panel used to be parked with translateY(-102%) — a percentage of
     its OWN height, which assumes it starts at viewport top. It doesn't: its
     containing block begins below the notice bar, so 36px of white panel sat on
     top of that notice and cropped it. visibility is the guarantee; the
     transform stays for the slide. */
  /* The panel hangs BELOW the header (top:100%), it does not start at the
     top of it. .wh-head sets a backdrop-filter, which makes it the containing
     block for this fixed panel — so the old `top:0` plus a big padding-top put
     an opaque white sheet directly over the header. That hid the logo and,
     worse, the burger itself: with the menu open there was no visible control
     to close it (elementFromPoint at the burger's centre returned .wh-nav).
     A descendant can never paint beneath its own ancestor, so sliding it up
     behind the header is not available — it reveals with a clip instead, which
     keeps the slide-down feel and never crosses the header. */
  .wh-nav { position: fixed; inset: auto 0 auto 0; top: 100%; padding: 14px 24px 30px; flex-direction: column; gap: 4px;
    background: var(--paper); border-bottom: 1px solid var(--line);
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path .34s cubic-bezier(.22,1,.36,1), visibility 0s linear .34s;
    z-index: 55; display: flex; margin: 0; }
  body.wh-navopen .wh-nav { clip-path: inset(0 0 0 0); visibility: visible;
    transition: clip-path .34s cubic-bezier(.22,1,.36,1), visibility 0s; }
  .wh-nav a { padding: 14px 0; font-size: 1.15rem; font-family: var(--dsp); font-weight: 600; border-bottom: 1px solid var(--line); }
}

/* ==========================================================================
   Mobile pass

   Everything below 720px, tuned on a 390px viewport. The hero headline is
   the main offender — clamp() alone let it run to three tight lines against
   the edge of the screen.
   ========================================================================== */

@media (max-width: 720px) {
	.wh-wrap { padding: 0 18px; }
	.wh-narrow { padding: 40px 18px 60px; }

	.wh-hero { min-height: 0; padding: 64px 0 84px; }
	.wh-hero__h1 { font-size: clamp(2.6rem, 12.5vw, 3.6rem); line-height: .98; }
	.wh-hero__lead { font-size: 1.02rem; max-width: none; }
	.wh-hero__cta { gap: 10px; }
	.wh-hero__cta .wh-btn { width: 100%; justify-content: center; }
	.wh-hero__fine { font-size: .78rem; }
	.wh-hero__scrim { background:
		linear-gradient(to top, rgba(8,11,15,.96) 0%, rgba(8,11,15,.72) 45%, rgba(8,11,15,.55) 100%); }
	/* Two by two on a phone: four across turns each claim into two cramped
	   lines, which is harder to read than a second row. */
	/* Back to two fixed columns on a phone: centred wrapping puts two items on
	   one row and a lone third on the next, which is worse than a tidy 2x2. */
	/* align-items:start matters here: the container's centring placed the
	   one-line "Cold-chain shipped" against the vertical middle of its
	   two-line row-mate, so the two labels in a row did not share a baseline. */
	.wh-hero__proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start; gap: 9px 18px; padding: 12px 20px; }
	.wh-tick { font-size: .8rem; }

	.wh-sec { padding: 46px 0; }
	.wh-sec__head { flex-direction: column; align-items: flex-start; gap: 14px; }
	h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
	h2 { font-size: clamp(1.55rem, 6.6vw, 2rem); }
	.wh-lede { font-size: 1.02rem; }

	.wh-stats { grid-template-columns: 1fr 1fr; }
	.wh-stat { padding: 18px 16px; }
	.wh-stat strong { font-size: 1.55rem; }
	.wh-stat__l { font-size: .78rem; }

	.wh-shophead, .wh-abouthead { padding: 40px 0 26px; }
	.wh-shophead__marks { gap: 8px 18px; }
	.wh-shophead__marks li { font-size: .82rem; }

	.wh-pdp { padding: 26px 0 60px; gap: 26px; }
	.wh-buy { position: static; }
	.wh-pdp__ladder { max-width: none; }

	.wh-intake { padding: 26px 18px 60px; gap: 26px; }
	.wh-step__q { font-size: clamp(1.35rem, 6.4vw, 1.8rem); }
	.wh-step__nav { position: sticky; bottom: 0; background: var(--paper);
		padding: 12px 0 14px; margin-top: 20px; border-top: 1px solid var(--line); }
	.wh-step__nav .wh-btn { flex: 1; justify-content: center; }
	.wh-pair { grid-template-columns: 1fr; }

	.wh-checkout { padding: 26px 18px 60px; gap: 26px; }
	.wh-summary { position: static; }

	.wh-success { padding: 42px 18px 60px; }
	.wh-success__cta .wh-btn { width: 100%; justify-content: center; }

	.wh-console { padding: 24px 18px 60px; }
	.wh-console__head { flex-direction: column; align-items: flex-start; gap: 8px; }
	.wh-case summary { grid-template-columns: 1fr auto; gap: 8px 12px; padding: 14px 2px; }
	.wh-case summary time { grid-column: 1 / -1; }
	.wh-case__answers dl div { grid-template-columns: 104px 1fr; }
	.wh-case__btns .wh-btn { flex: 1; justify-content: center; }

	.wh-cta { padding: 52px 0; }
	.wh-foot__in { gap: 22px; }

	.wh-quote blockquote { font-size: .95rem; }
	.wh-faq__item summary { font-size: 1rem; padding: 17px 0; }
	.wh-pull { font-size: 1.2rem; padding-left: 16px; }
	.wh-team { gap: 12px; }
}

@media (max-width: 400px) {
	.wh-hero__h1 { font-size: 2.5rem; }
}

/* A phone hero should be readable in one glance: headline, one line of promise,
   the buttons. The supporting argument stays for wider screens. */
@media (max-width: 820px) {
	.wh-hero__lead-more { display: none; }
}

/* ==========================================================================
   Selects

   A native <select> is the one control that refuses to match everything
   around it — OS chevron, OS metrics, OS focus ring. Strip the appearance
   and draw our own chevron so it sits in the same family as the inputs.
   The chevron is an inline data URI rather than a pseudo-element because
   ::after does not render on a <select>.
   ========================================================================== */

select.wh-input {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6672' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px 18px;
	cursor: pointer;
	line-height: 1.3;
}
select.wh-input::-ms-expand { display: none; }

/* Until a real state is picked, the placeholder option should read as a
   placeholder rather than as an answer. */
select.wh-input:required:invalid { color: var(--muted); }
select.wh-input option { color: var(--ink); }
select.wh-input option[value=""] { color: var(--muted); }

select.wh-input:hover { border-color: #C9D4E1; }
select.wh-input:focus {
	border-color: var(--accent); outline: none;
	box-shadow: 0 0 0 3px rgba(11,92,255,.14);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5CFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
}

/* Match the focus treatment on the text inputs so the form reads as one set. */
.wh-input:focus, .wh-form input:focus, .wh-case__act textarea:focus {
	box-shadow: 0 0 0 3px rgba(11,92,255,.14);
	outline: none;
}

/* ==========================================================================
   Treatment education

   The evidence grade is stated before any statistic, and it is colour-coded,
   because "preclinical only" next to a big number is the whole point — a
   reader should know how much weight a figure carries before they read it.
   ========================================================================== */

.wh-edu { margin-top: 52px; padding-top: 40px; border-top: 1px solid var(--line); }
.wh-edu h2 { font-size: 1.22rem; margin-bottom: .5em; }
.wh-edu__h { margin-top: 44px; }

.wh-edu__grade { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.wh-edu__grade p { margin: 0; font-size: .89rem; color: var(--muted); max-width: 62ch; }
.wh-grade { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
	font-family: var(--dsp); font-size: .82rem; font-weight: 600; letter-spacing: -.01em;
	padding: 6px 12px; border-radius: 100px; border: 1px solid; }
.wh-grade .wh-i { width: 15px; height: 15px; }
.wh-grade--strong      { color: #0B7A55; border-color: rgba(15,157,107,.35); background: rgba(15,157,107,.08); }
.wh-grade--moderate    { color: #9A6100; border-color: rgba(200,138,20,.35); background: rgba(240,162,46,.1); }
.wh-grade--preclinical { color: #A3352E; border-color: rgba(198,54,47,.3);  background: rgba(198,54,47,.07); }

.wh-edu__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line);
	border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 40px; }
@media (max-width: 760px) { .wh-edu__stats { grid-template-columns: 1fr; } }
.wh-estat { background: var(--paper); padding: 22px 20px; }
.wh-estat strong { display: block; font-family: var(--dsp); font-size: 2rem; letter-spacing: -.035em; line-height: 1; margin-bottom: 10px; }
.wh-estat p { margin: 0 0 10px; font-size: .87rem; color: var(--ink-2); line-height: 1.45; }
.wh-estat cite { font-family: var(--mono); font-style: normal; font-size: .68rem; color: var(--muted); letter-spacing: .02em; }

.wh-edu__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-bottom: 8px; }
.wh-edu__cols--wide { margin-top: 44px; gap: 44px; }
@media (max-width: 760px) { .wh-edu__cols, .wh-edu__cols--wide { grid-template-columns: 1fr; gap: 28px; } }
.wh-edu__cols p { color: var(--ink-2); font-size: .97rem; margin: 0; }

/* Trial timeline */
.wh-trials { list-style: none; margin: 20px 0 0; padding: 0; }
.wh-trials li { display: grid; grid-template-columns: 76px 1fr; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.wh-trials li:last-child { border-bottom: 1px solid var(--line); }
.wh-trials__yr { font-family: var(--mono); font-size: .78rem; color: var(--accent); padding-top: 3px; }
.wh-trials h3 { font-size: 1rem; margin-bottom: .3em; }
.wh-trials p { margin: 0; font-size: .93rem; color: var(--ink-2); }
@media (max-width: 560px) { .wh-trials li { grid-template-columns: 1fr; gap: 6px; } }

/* Timeline + contraindications */
.wh-timeline { list-style: none; margin: 0; padding: 0; }
.wh-timeline li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.wh-timeline li:last-child { border-bottom: 0; }
.wh-timeline strong { display: block; font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
	letter-spacing: .06em; color: var(--muted); margin-bottom: 5px; }
.wh-timeline span { font-size: .93rem; color: var(--ink-2); }

.wh-notfor { list-style: none; margin: 0; padding: 0; }
.wh-notfor li { display: grid; grid-template-columns: 20px 1fr; gap: 11px; padding: 11px 0; align-items: start;
	border-bottom: 1px solid var(--line); font-size: .93rem; color: var(--ink-2); }
.wh-notfor li:last-child { border-bottom: 0; }
.wh-notfor .wh-i { width: 17px; height: 17px; color: var(--stop); margin-top: 2px; }

/* The caveat block — deliberately the loudest thing on the page after the
   price, because it is the part a real prescriber would lead with. */
.wh-honest { margin-top: 44px; padding: 24px 26px; border-radius: var(--r);
	background: var(--ink); color: #fff; }
.wh-honest h2 { color: #fff; margin-bottom: .45em; }
.wh-honest p { margin: 0; color: rgba(255,255,255,.78); font-size: .97rem; }

.wh-sources { margin-top: 26px; border-top: 1px solid var(--line); }
.wh-sources summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer;
	list-style: none; padding: 16px 0; font-family: var(--dsp); font-weight: 600; font-size: .95rem; }
.wh-sources summary::-webkit-details-marker { display: none; }
.wh-sources[open] .wh-faq__x::after { transform: rotate(90deg); }
.wh-sources ol { margin: 0 0 12px; padding-left: 20px; font-size: .86rem; color: var(--muted); }
.wh-sources li { padding: 5px 0; }
.wh-sources a { color: var(--ink-2); }

/* ==========================================================================
   How it works
   ========================================================================== */

.wh-howhead { padding: 64px 0 44px; border-bottom: 1px solid var(--line); }
.wh-howhead h1 { max-width: 17ch; }
.wh-howhead .wh-lede { margin-top: 14px; }
.wh-howhead__marks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line);
	border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: 34px; }
.wh-howhead__marks div { background: var(--paper); padding: 20px 22px; }
.wh-howhead__marks .wh-i { color: var(--accent); width: 18px; height: 18px; margin-bottom: 10px; display: block; }
.wh-howhead__marks strong { display: block; font-family: var(--dsp); font-size: 1.6rem; letter-spacing: -.03em; line-height: 1; }
.wh-howhead__marks span { font-size: .84rem; color: var(--muted); }
@media (max-width: 720px) { .wh-howhead__marks { grid-template-columns: 1fr; } }

/* Alternating photo / copy rows. The flip is done with grid order rather
   than direction:rtl so the reading order stays correct for screen readers. */
.wh-step-row { padding: 60px 0; border-bottom: 1px solid var(--line); }
.wh-step-row__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.wh-step-row.is-flipped .wh-step-row__media { order: 2; }
@media (max-width: 880px) {
	.wh-step-row { padding: 40px 0; }
	.wh-step-row__grid { grid-template-columns: 1fr; gap: 26px; }
	.wh-step-row.is-flipped .wh-step-row__media { order: 0; }
}

.wh-step-row__media { position: relative; margin: 0; border-radius: 16px; overflow: hidden;
	background: var(--tint); border: 1px solid var(--line); }
.wh-step-row__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.wh-step-row__media figcaption { position: absolute; left: 16px; bottom: 16px;
	width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
	border-radius: 12px; background: rgba(255,255,255,.92); color: var(--accent);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: 0 6px 18px -6px rgba(11,15,20,.3); }
.wh-step-row__media figcaption .wh-i { width: 22px; height: 22px; }

.wh-step-row__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.wh-step-row__n { font-family: var(--dsp); font-size: 2.6rem; font-weight: 700; letter-spacing: -.045em;
	line-height: 1; color: var(--line); }
.wh-step-row__time { display: inline-flex; align-items: center; gap: .4rem;
	font-family: var(--dsp); font-size: .8rem; font-weight: 600; color: var(--accent);
	background: rgba(11,92,255,.08); border-radius: 100px; padding: 5px 12px; }
.wh-step-row__time .wh-i { width: 14px; height: 14px; }
.wh-step-row__body h2 { margin-bottom: .35em; }
.wh-step-row__body p:last-child { margin: 14px 0 0; color: var(--ink-2); font-size: .97rem; }

/* Decline path */
.wh-decline__list { list-style: none; margin: 34px 0 0; padding: 0; display: grid;
	grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.12); border-radius: var(--r); overflow: hidden; }
@media (max-width: 800px) { .wh-decline__list { grid-template-columns: 1fr; } }
.wh-decline__list li { background: var(--ink); padding: 24px; display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; }
.wh-decline__list .wh-i { width: 20px; height: 20px; color: var(--acid); margin-top: 2px; }
.wh-decline__list strong { display: block; color: #fff; font-family: var(--dsp); font-size: 1rem; margin-bottom: .3em; }
.wh-decline__list p { margin: 0; color: rgba(255,255,255,.66); font-size: .91rem; }

/* Comparison */
.wh-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .wh-compare { grid-template-columns: 1fr; } }
.wh-compare__col { border: 1px solid var(--line); border-radius: var(--r); padding: 26px; background: var(--paper); }
.wh-compare__col h3 { font-size: 1.05rem; margin-bottom: 16px; }
.wh-compare__col ul { list-style: none; margin: 0; padding: 0; }
.wh-compare__col li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .94rem; color: var(--muted); }
.wh-compare__col li:last-child { border-bottom: 0; }
.wh-compare__col--ours { border-color: var(--ink); box-shadow: 0 18px 44px -28px rgba(11,15,20,.4); }
.wh-compare__col--ours li { color: var(--ink); display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.wh-compare__col--ours .wh-i { width: 17px; height: 17px; color: var(--go); margin-top: 3px; }

/* ==========================================================================
   Speed strip

   Directly under the hero, because "how long will this take" is the first
   question and every hour it goes unanswered is a visitor who leaves. Times
   are the loudest thing in each step.
   ========================================================================== */

.wh-speed { padding: 44px 0 48px; border-bottom: 1px solid var(--line); }
.wh-speed__grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 22px; align-items: start; }
.wh-speed__arrow { display: flex; align-items: center; justify-content: center; color: var(--line); padding-top: 34px; }
.wh-speed__arrow .wh-i { width: 24px; height: 24px; }
.wh-speed__t { display: block; font-family: var(--dsp); font-size: 1.72rem; font-weight: 700;
	letter-spacing: -.035em; line-height: 1; color: var(--accent); margin-bottom: 12px; }
/* The icon is the step's anchor, so it gets weight: a tinted tile in the brand
   blue rather than an 18px grey glyph riding along inside the heading. */
.wh-speed__ico { display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 13px; margin-bottom: 14px;
	background: rgba(11, 92, 255, .10); color: var(--accent); }
.wh-speed__ico .wh-i { width: 22px; height: 22px; }
.wh-speed__step h3 { font-size: 1.04rem; margin-bottom: .35em; }
.wh-speed__step p { margin: 0; font-size: .93rem; color: var(--muted); }
.wh-speed__note { max-width: 66ch; margin: 34px auto 0; padding-top: 22px; border-top: 1px solid var(--line);
	text-align: center; font-size: .95rem; color: var(--ink-2); }

@media (max-width: 860px) {
	.wh-speed { padding: 34px 0 36px; }
	/* Stacked, the arrows can't sit between columns — but the ORDER is real
	   information (two minutes, then same day, then two days), so the sequence
	   is redrawn as a vertical run: icon nodes joined by a rule. Without it the
	   three steps read as three unrelated paragraphs. */
	.wh-speed__grid { grid-template-columns: 1fr; gap: 0; }
	.wh-speed__arrow { display: none; }
	.wh-speed__step { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px;
		position: relative; padding-bottom: 28px; }
	.wh-speed__step:last-child { padding-bottom: 0; }
	.wh-speed__ico { grid-row: 1 / span 3; margin-bottom: 0; }
	.wh-speed__step::before { content: ''; position: absolute; left: 21px; top: 52px; bottom: 4px;
		width: 2px; border-radius: 2px; background: var(--line); }
	.wh-speed__step:last-child::before { display: none; }
	.wh-speed__t { font-size: 1.45rem; margin-bottom: 4px; align-self: center; }
	.wh-speed__note { margin-top: 24px; text-align: left; }
}

/* --- Brand footer --------------------------------------------------------- */
.wh-foot__top { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 48px; }
.wh-foot__brand p { font-size: .9rem; color: var(--muted); margin: 12px 0 16px; max-width: 34ch; }
.wh-foot__marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.wh-foot__marks li { display: flex; align-items: center; gap: .55rem; font-size: .84rem; color: var(--ink-2); }
.wh-foot__marks .wh-i { width: 16px; height: 16px; color: var(--go); }
.wh-foot__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.wh-foot__cols h2 { font-size: .82rem; font-family: var(--dsp); font-weight: 700; letter-spacing: -.01em;
	margin-bottom: 10px; color: var(--ink); }
.wh-foot__legal { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
	align-items: baseline; border-top: 1px solid var(--line); margin-top: 34px; padding-top: 18px;
	font-size: .8rem; color: var(--muted); }
.wh-foot__legal p { margin: 0; max-width: 70ch; }
.wh-foot__links { display: flex; gap: 18px; }
.wh-foot__links a { padding: 0; font-size: .8rem; }
.wh-foot__disclosure { margin: 14px 0 0; font-size: .76rem; color: var(--muted); opacity: .85; max-width: 78ch; }

@media (max-width: 860px) {
	.wh-foot__top { grid-template-columns: 1fr; gap: 30px; }
	.wh-foot__cols { grid-template-columns: 1fr 1fr; gap: 22px; }
}

/* The single iCare attribution in the footer disclosure — readable but quiet,
   so it reads as a credit line rather than an ad inside the storefront. */
.wh-foot__disclosure a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.wh-foot__disclosure a:hover { color: var(--accent); }

/* ==========================================================================
   icare-commerce's floating "Powered by iCare" credit

   The stock badge is a 55%-opacity white pill with slate text — on this
   brand's dark hero and trust bar it reads as an illegible grey smudge.
   It carries inline styles, so the override lives here with !important.
   ========================================================================== */
/* The platform badge now lives in the footer (see .wh-foot__powered). This
   stays as a guard: if a plugin update ever renders the floating pill again,
   it must not reappear as an overlay on the storefront. */
#icare-platform-badge { display: none !important; }

.wh-foot__powered { margin: 0; }
.wh-foot__powered a {
	display: inline-flex; align-items: center; gap: .5rem;
	font-size: .82rem; color: var(--muted); text-decoration: none;
	transition: color .18s ease;
}
.wh-foot__powered a:hover, .wh-foot__powered a:focus-visible { color: var(--accent); }
.wh-foot__powered strong { font-weight: 600; color: var(--ink-2); }
.wh-foot__powered a:hover strong { color: var(--accent); }
.wh-foot__powered .wh-i { width: 15px; height: 15px; color: var(--go); }

/* ==========================================================================
   Assessment result (/start/?r=…)
   ========================================================================== */
.wh-matchr h1 { margin-bottom: 22px; }
.wh-matchr__pick { display: grid; gap: 16px; }
.wh-matchr__pick .wh-summary__item { border: 0; padding: 0; }
.wh-matchr__pick .wh-btn { justify-self: start; }
.wh-matchr__alt { margin-top: 18px; color: var(--wh-mut, #64748b); }
.wh-intake--match .wh-intake__aside h3 { margin-bottom: 8px; }

/* ==========================================================================
   Account

   The signed-in area was a single narrow column of headings with a lot of air
   between them, which read as unfinished rather than calm. It is now a photo
   band that answers "where do I stand" before any reading happens, then two
   columns: what the order is doing on the left, who you are and what you can
   change on the right.

   No floating cards — the divisions are rules and a single column edge, the
   same vocabulary the rest of the storefront uses.
   ========================================================================== */

/* --- nav: account as a glyph ---------------------------------------------- */

/* A peer of the text links, not a bolted-on control. The bordered circle
   introduced a shape nothing else in the nav had, which read as an accident
   rather than a decision. Bare glyph, same colour and hover as its siblings. */
.wh-nav__me {
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--ink); flex: none;
	transition: color .18s ease;
}
.wh-nav__me .wh-i { width: 21px; height: 21px; }
.wh-nav__me:hover, .wh-nav__me:focus-visible { color: var(--accent); }
.wh-nav__melabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- header band ---------------------------------------------------------- */

.wh-acct-hero { position: relative; overflow: hidden; background: var(--ink); isolation: isolate; }
.wh-acct-hero__img {
	position: absolute; inset: 0; z-index: -2;
	background-size: cover; background-position: 72% 38%;
}
/* The photograph's left third is empty wall. The scrim deepens it just enough
   to hold white type without hiding the room. */
.wh-acct-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(100deg, rgba(11,15,20,.94) 0%, rgba(11,15,20,.86) 34%, rgba(11,15,20,.42) 62%, rgba(11,15,20,.20) 100%);
}
.wh-acct-hero__in { padding: 60px 24px 34px; color: #fff; }
.wh-acct-hero h1 {
	font-family: var(--dsp); font-weight: 600;
	font-size: clamp(1.9rem, 4.2vw, 2.9rem); letter-spacing: -.035em;
	line-height: 1.04; margin: 0 0 6px; color: #fff; max-width: 16ch;
	text-wrap: balance;
}
.wh-acct-hero__mail { margin: 0; font-size: .95rem; color: rgba(255,255,255,.72); }

.wh-acct-hero__stats {
	display: flex; flex-wrap: wrap; gap: 0; margin: 30px 0 0;
	border-top: 1px solid rgba(255,255,255,.18);
	max-width: 620px;
}
.wh-acct-hero__stats > div {
	padding: 16px 26px 2px 0; margin-right: 26px;
	border-right: 1px solid rgba(255,255,255,.14);
}
.wh-acct-hero__stats > div:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.wh-acct-hero__stats dt {
	font-size: .74rem; letter-spacing: .01em; color: rgba(255,255,255,.6);
	margin-bottom: 3px;
}
.wh-acct-hero__stats dd {
	margin: 0; font-family: var(--dsp); font-weight: 600;
	font-size: 1.18rem; letter-spacing: -.02em; color: #fff;
	font-variant-numeric: tabular-nums;
}
.wh-acct-hero__stats .is-wide dd { font-size: 1.02rem; }

/* --- body ----------------------------------------------------------------- */

.wh-acct { padding: 0 24px 90px; }
.wh-acct__verify { margin: 34px 0 0; max-width: 720px; }
.wh-acct__verify .wh-btn { margin-top: 12px; }

.wh-acct__grid {
	display: grid; grid-template-columns: minmax(0, 1fr) 320px;
	gap: 0 60px; align-items: start; padding-top: 8px;
}
.wh-acct__side { border-left: 1px solid var(--line); padding-left: 54px; }

.wh-acct__block { padding-top: 34px; margin-top: 34px; border-top: 1px solid var(--line); }
.wh-acct__grid > main > .wh-acct__block:first-child,
.wh-acct__side > .wh-acct__block:first-child,
.wh-acct__side > section:first-child { border-top: none; margin-top: 0; }
.wh-acct__block--last { border-top: none; padding-top: 0; margin-top: 26px; }
.wh-acct__block h2 {
	font-family: var(--dsp); font-weight: 600; font-size: 1.25rem;
	letter-spacing: -.025em; margin: 0 0 16px;
}
.wh-acct__side .wh-acct__block h2 { font-size: 1.05rem; }
.wh-acct__lede { color: var(--muted); font-size: .93rem; margin: -4px 0 20px; max-width: 54ch; }
.wh-acct__block .wh-fields { max-width: 100%; }
.wh-acct__block .wh-btn { margin-top: 14px; }

/* --- orders --------------------------------------------------------------- */

.wh-acct__orders { list-style: none; margin: 0; padding: 0; }
.wh-acct__orders li + li { border-top: 1px solid var(--line); }
.wh-acct__orders a {
	display: flex; gap: 16px; align-items: center;
	padding: 14px 0; text-decoration: none; color: inherit;
}
.wh-acct__thumb {
	width: 58px; height: 58px; flex: none; border-radius: 10px;
	background: var(--tint); overflow: hidden;
	display: flex; align-items: center; justify-content: center;
}
.wh-acct__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.wh-acct__ordbody { display: block; min-width: 0; flex: 1; }
.wh-acct__ordh { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.wh-acct__ordh strong {
	font-family: var(--dsp); font-size: 1rem; font-weight: 600; letter-spacing: -.015em;
}
.wh-acct__orders a:hover .wh-acct__ordh strong { color: var(--accent); }
.wh-acct__meta { display: block; margin-top: 2px; font-size: .84rem; color: var(--muted); }

/* --- empty state: the catalogue --------------------------------------------- */

.wh-acct__treatments {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px;
}
.wh-acct__treatments a { display: block; text-decoration: none; color: inherit; }
.wh-acct__tmedia {
	display: block; aspect-ratio: 1; border-radius: 12px; background: var(--tint);
	overflow: hidden; margin-bottom: 10px;
}
.wh-acct__tmedia img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply;
	transition: transform .3s cubic-bezier(.22,1,.36,1); }
.wh-acct__treatments a:hover .wh-acct__tmedia img { transform: scale(1.05); }
.wh-acct__treatments strong {
	display: block; font-family: var(--dsp); font-size: .95rem; font-weight: 600; letter-spacing: -.015em;
}
.wh-acct__treatments a:hover strong { color: var(--accent); }
.wh-acct__tsub { display: block; font-size: .78rem; color: var(--muted); margin-top: 1px; }
.wh-acct__tprice {
	display: block; margin-top: 6px; font-family: var(--dsp);
	font-weight: 600; font-size: .95rem; letter-spacing: -.02em;
}
.wh-acct__tprice span { font-family: var(--bdy); font-weight: 400; font-size: .76rem; color: var(--muted); }

/* --- details list --------------------------------------------------------- */

.wh-acct__dl { margin: 0; }
.wh-acct__dl > div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.wh-acct__dl > div:last-child { border-bottom: none; }
.wh-acct__dl dt { font-size: .78rem; color: var(--muted); margin-bottom: 2px; }
.wh-acct__dl dd { margin: 0; font-size: .92rem; overflow-wrap: break-word; }
.wh-ok { color: var(--go); font-weight: 500; }
.wh-pending { color: var(--stop); font-weight: 500; }

/* --- signed-out page ------------------------------------------------------ */

.wh-acct-signin { width: 100%; max-width: 460px; margin: 0 auto; padding: 64px 24px 90px; }
.wh-acct-signin h1 {
	font-family: var(--dsp); font-weight: 600; letter-spacing: -.035em;
	font-size: clamp(1.9rem, 4.4vw, 2.5rem); line-height: 1.05; margin: 0 0 8px;
}
.wh-acct-signin .wh-lede { margin-bottom: 26px; font-size: .98rem; }
.wh-acct-signin .wh-fields { max-width: 100%; }
.wh-acct-signin .wh-btn { margin-top: 16px; width: 100%; }
.wh-acct-signin .wh-hint a { font-weight: 500; }
.wh-acct__guest { margin-top: 40px; }
.wh-acct__guest h2 { font-size: 1.02rem; }
.wh-acct__guest .wh-panel__sub { margin-bottom: 0; }

@media (max-width: 980px) {
	.wh-acct__grid { grid-template-columns: 1fr; gap: 0; }
	.wh-acct__side { border-left: none; padding-left: 0; }
	.wh-acct__side > section:first-child { border-top: 1px solid var(--line); margin-top: 34px; padding-top: 34px; }
	.wh-acct__treatments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
	/* In the burger menu a lone glyph among words reads as a broken item, so
	   the label comes back. justify-content must be reset too: the menu items
	   are full-width rows, so the desktop centring left "Sign in" floating in
	   the middle while every other item sat hard left. */
	.wh-nav__me { justify-content: flex-start; gap: 10px; }
	.wh-nav__melabel { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
	.wh-acct-hero__in { padding: 40px 20px 26px; }
	.wh-acct-hero__img { background-position: 76% 34%; }
	.wh-acct-hero__stats > div { padding-right: 18px; margin-right: 18px; }
	.wh-acct { padding: 0 20px 70px; }
}

@media (max-width: 520px) {
	.wh-acct__treatments { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.wh-acct-hero__stats { max-width: none; }
	.wh-acct-hero__stats > div { border-right: none; padding: 12px 0 0; margin-right: 0; width: 50%; }
	.wh-acct-hero__stats .is-wide { width: 100%; }
	.wh-acct__ordh { flex-wrap: wrap; gap: 4px 10px; }
}

/* "What we are not claiming" — hanging-indent rows on the dark band, no cards
   and no bullets. Dense, and the bold lead does the scanning work. */
.wh-plainlist { list-style: none; margin: 26px 0 0; padding: 0; }
.wh-plainlist li {
	padding: 15px 0 15px 0;
	border-top: 1px solid rgba(255,255,255,.14);
	color: rgba(255,255,255,.76);
	font-size: .97rem;
	line-height: 1.55;
	max-width: 62ch;
}
.wh-plainlist li:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.wh-plainlist strong { color: #fff; font-weight: 600; }

/* "Not dispensed" where a price would be. Set in the display face at body
   size, not as a big number — it is a statement, not a figure. */
.wh-card__price--no b { font-family: var(--dsp); font-size: 1.02rem; font-weight: 600; color: var(--stop); letter-spacing: -.01em; }