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

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

   Near-black + white + one electric blue. The category is full of soft
   pastel wellness brands; this is deliberately closer to a pharmacy than a
   spa, because the thing being sold is a physician's signature.

   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:      #0B0F14;
	--ink-2:    #1C242E;
	--muted:    #5B6672;
	--line:     #E4E9EF;
	--tint:     #F4F7FA;
	--paper:    #FFFFFF;

	--accent:   #0B5CFF;
	--accent-d: #0846C4;
	--go:       #0F9D6B;
	--stop:     #C6362F;

	--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 .hd-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; }

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

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

.hd-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;
}
.hd-btn:hover { background: #000; text-decoration: none; }
.hd-btn:active { transform: translateY(1px); }
.hd-btn--accent { background: var(--accent); border-color: var(--accent); }
.hd-btn--accent:hover { background: var(--accent-d); border-color: var(--accent-d); }
.hd-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.hd-btn--ghost:hover { background: var(--tint); border-color: #cfd8e2; }

/* ==========================================================================
   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. */
.hd-ribbon { background: var(--ink); color: rgba(255,255,255,.86); }
.hd-ribbon__in { display: flex; align-items: center; gap: 10px; min-height: 38px; padding-top: 8px; padding-bottom: 8px; }
.hd-ribbon__in p { margin: 0; font-family: var(--dsp); font-size: .84rem; font-weight: 500; letter-spacing: -.005em; }
.hd-ribbon__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #F0A22E;
	box-shadow: 0 0 0 3px rgba(240,162,46,.18); }
.hd-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; }
.hd-ribbon__more:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }
.hd-ribbon__detail { border-top: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.hd-ribbon__detail > .hd-wrap { padding-top: 16px; padding-bottom: 18px; }
.hd-ribbon__detail p { margin: 0 0 8px; font-size: .87rem; color: rgba(255,255,255,.72); max-width: 74ch; }
.hd-ribbon__detail p:last-child { margin-bottom: 0; }
.hd-ribbon__detail strong { color: #fff; }
.hd-ribbon__detail a { color: #7FB0FF; }

@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. */
	/* .hd-ribbon .… — the bare class loses to `.hd-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. */
	.hd-ribbon .hd-ribbon__in { gap: 8px; min-height: 0; padding-top: 9px; padding-bottom: 11px; align-items: center; }
	.hd-ribbon__in p { font-size: .78rem; line-height: 1.35; }
	.hd-ribbon__long { display: none; }
	.hd-ribbon__more { font-size: .72rem; padding: 3px 10px; flex: none; }
}

.hd-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. */
.hd-head__in { display: flex; align-items: center; gap: 28px; height: var(--head-h); }
.hd-logo { font-family: var(--dsp); font-weight: 700; font-size: 1.22rem; letter-spacing: -.03em; color: var(--ink); }
.hd-logo:hover { text-decoration: none; }
.hd-logo i { color: var(--accent); font-style: normal; }
.hd-nav { display: flex; gap: 22px; margin-left: auto; }
.hd-nav a { color: var(--ink-2); font-size: .93rem; font-weight: 500; }
.hd-nav a:hover { color: var(--accent); text-decoration: none; }
.hd-head .hd-btn { padding: 9px 16px; font-size: .88rem; }

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

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

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

.hd-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; }
.hd-trust div { background: var(--paper); padding: 18px 20px; }
.hd-trust strong { display: block; font-family: var(--dsp); font-size: 1.42rem; letter-spacing: -.02em; }
.hd-trust span { font-size: .84rem; color: var(--muted); }

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

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

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

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

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

.hd-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;
}
.hd-card:hover { border-color: #C9D4E1; box-shadow: 0 14px 34px -18px rgba(11,15,20,.28); transform: translateY(-2px); }
.hd-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;
}
.hd-card__badge:empty { display: none; }

/* THE SAME CHIP, WITHOUT THE OVERLAY POSITIONING.
   .hd-card__badge is absolutely positioned 500 lines below so it can sit ON the
   product card's image tile, which is position:relative. It was then reused on
   the PDP and in the cart, where NO ancestor is positioned — so it resolved
   against the initial containing block and rendered at the top-left corner of
   the VIEWPORT, over the demo banner, on the two highest-intent pages.
   Two different jobs, so two classes: overlay a tile, or sit inline in a
   column. */
.hd-badge {
	display: inline-block; 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;
}
.hd-badge:empty { display: none; }
.hd-card h3 { margin-bottom: .15em; font-size: 1.3rem; }
.hd-card__sub { font-family: var(--mono); font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
.hd-card__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.hd-card__price b { font-family: var(--dsp); font-size: 1.85rem; letter-spacing: -.03em; font-weight: 600; }
.hd-card__price span { color: var(--muted); font-size: .86rem; }
.hd-card__alt { font-size: .81rem; color: var(--muted); margin-bottom: 16px; }
.hd-card__ex { font-size: .9rem; color: var(--ink-2); margin: 0 0 18px; }
.hd-card .hd-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.
   ========================================================================== */

.hd-ladder { border-top: 1px solid var(--line); padding-top: 12px; margin: 0 0 16px; }
.hd-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;
}
.hd-ladder__rows { display: grid; gap: 6px; }
.hd-ladder__row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; }
.hd-ladder__wk { font-family: var(--mono); font-size: .68rem; color: var(--muted); }
.hd-ladder__bar { height: 7px; background: var(--tint); border-radius: 4px; overflow: hidden; }
.hd-ladder__bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.hd-ladder__bar.is-none { background: transparent; border-top: 1px dashed var(--line); height: 0; border-radius: 0; }
.hd-ladder__dose { font-family: var(--mono); font-size: .76rem; font-weight: 500; min-width: 46px; text-align: right; }
.hd-ladder__dose i { font-style: normal; color: var(--muted); font-size: .82em; margin-left: 1px; }
.hd-ladder.is-compact { border-top: 0; padding-top: 0; }

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

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

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

.hd-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); }
.hd-buy__plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.hd-plan { border: 1px solid var(--line); border-radius: 9px; padding: 12px; cursor: pointer; display: block; }
.hd-plan input { position: absolute; opacity: 0; pointer-events: none; }
.hd-plan span { display: block; font-size: .78rem; color: var(--muted); }
.hd-plan b { font-family: var(--dsp); font-size: 1.28rem; letter-spacing: -.02em; }
.hd-plan:has(input:checked) { border-color: var(--ink); background: var(--tint); }
.hd-buy__inc { list-style: none; margin: 16px 0 20px; padding: 0; font-size: .89rem; }
.hd-buy__inc li { padding: 7px 0 7px 22px; border-bottom: 1px solid var(--line); position: relative; }
.hd-buy__inc li:last-child { border-bottom: 0; }
.hd-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); }
.hd-buy .hd-btn { width: 100%; }
.hd-buy__fine { font-size: .78rem; color: var(--muted); margin: 12px 0 0; text-align: center; }

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

.hd-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) { .hd-intake { grid-template-columns: 1fr; } .hd-intake__aside { order: -1; } }

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

.hd-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. */
.hd-step__q { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 22px; }
.hd-step__q:focus { outline: none; }
.hd-step { border: 0; padding: 0; margin: 0; }

.hd-opts { display: grid; gap: 9px; max-width: 520px; }
.hd-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; }
.hd-opt:hover { border-color: #C9D4E1; background: var(--tint); }
.hd-opt input { accent-color: var(--accent); width: 17px; height: 17px; }
.hd-opt:has(input:checked) { border-color: var(--ink); background: var(--tint); }
.hd-opt span { font-size: .98rem; }

.hd-input, .hd-pair input, .hd-fields input, .hd-fields select, .hd-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);
}
.hd-input:focus, .hd-fields input:focus, .hd-fields select:focus { border-color: var(--accent); outline: none; }
.hd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 520px; }
.hd-fields { display: grid; gap: 10px; max-width: 520px; }
.hd-hint { font-size: .85rem; color: var(--muted); margin-top: 12px; max-width: 52ch; }
.hd-step__nav { display: flex; gap: 10px; margin-top: 26px; }

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

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

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

.hd-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); }
.hd-note--stop { border-left-color: var(--stop); }
.hd-note p { margin: 4px 0 0; font-size: .93rem; }
/* A NOTE'S TITLE IS ITS OWN LINE.
   Without this, `<strong>Title</strong>Body text` renders as one run and reads
   as "A clinician reviews part of this orderAfter you place it..." — which is
   exactly what shipped. Fixed here rather than by adding a <br> or a space to
   each note, because there are several and the next one written would have the
   same bug. */
.hd-note strong { display: block; margin-bottom: 4px; }

/* Inline card fields. Deliberately identical to every other field on the page —
   a payment section that looks like a different application is the one people
   hesitate at. */
.hd-card { display: grid; gap: 14px; }
.hd-card__err { margin: 0; color: #b42318; font-size: .93rem; }
.hd-mono { font-family: var(--mono); font-size: .88rem; }

.hd-panel { border-top: 1px solid var(--line); padding-top: 26px; }
.hd-panel__sub { color: var(--muted); font-size: .89rem; margin-bottom: 18px; }
.hd-mailitem { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.hd-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); }
.hd-mailitem time { font-family: var(--mono); font-size: .72rem; color: var(--muted); flex: none; }
.hd-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.
   ========================================================================== */

.hd-console { max-width: 1040px; margin: 0 auto; padding: 40px 24px 80px; }
.hd-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; }
.hd-console__head h1 { font-size: 2rem; margin: 0; }
.hd-console__count { font-size: .9rem; color: var(--muted); margin: 0; }
.hd-console__count strong { font-family: var(--dsp); font-size: 1.5rem; color: var(--ink); }
.hd-empty { color: var(--muted); padding: 40px 0; }

.hd-case { border-bottom: 1px solid var(--line); }
.hd-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; }
.hd-case summary::-webkit-details-marker { display: none; }
.hd-case summary:hover { background: var(--tint); }
.hd-case__who strong { display: block; font-size: .98rem; }
.hd-case__who span { font-size: .8rem; color: var(--muted); }
.hd-case__rx { font-size: .92rem; color: var(--ink-2); }
.hd-case summary time { font-family: var(--mono); font-size: .72rem; color: var(--muted); }

.hd-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; }
.hd-pill--review, .hd-pill--submitted { border-color: var(--accent); color: var(--accent); }
.hd-pill--approved { border-color: var(--go); color: var(--go); }
.hd-pill--shipped { border-color: var(--go); background: var(--go); color: #fff; }
.hd-pill--declined { border-color: var(--stop); color: var(--stop); }

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

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

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

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

.hd-foot { border-top: 1px solid var(--line); background: var(--tint); padding: 44px 0 30px; margin-top: 40px; }
.hd-foot__in { display: flex; gap: 30px; justify-content: space-between; flex-wrap: wrap; }
.hd-foot a { color: var(--ink-2); font-size: .9rem; display: block; padding: 3px 0; }
.hd-foot__fine { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 18px; font-size: .8rem; color: var(--muted); }
.hd-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. */
	.hd-hero__h1 span, .hd-hero__lead, .hd-hero__cta, .hd-hero__fine,
	.hd-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.
   ========================================================================== */

.hd-rx-head { background: var(--ink); border-bottom: 1px solid #232B36; position: sticky; top: 0; z-index: 60; }
.hd-rx-head__in { display: flex; align-items: center; gap: 16px; height: 58px; }
.hd-rx-head__mark { font-family: var(--dsp); font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em; color: #fff; }
.hd-rx-head__mark i { font-style: normal; color: #7FB0FF; font-weight: 500; }
.hd-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; }
.hd-rx-head__who { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.hd-rx-head__who span { font-size: .85rem; color: #B9C3CF; }
.hd-rx-head__who a { font-size: .85rem; color: #7FB0FF; }

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

.hd-lede { font-size: 1.14rem; color: var(--ink-2); max-width: 54ch; }
.hd-lede--light { color: rgba(255,255,255,.72); }
.hd-eyebrow--light { color: rgba(255,255,255,.5); }
.hd-fineprint { font-size: .78rem; color: var(--muted); }
.hd-fineprint--light { color: rgba(255,255,255,.45); }
.hd-i { width: 1em; height: 1em; flex: none; }
.hd-btn .hd-i { width: 1.05em; height: 1.05em; transition: transform .18s ease; }
.hd-btn:hover .hd-i { transform: translateX(3px); }
.hd-btn--lg { padding: 15px 26px; font-size: 1.02rem; border-radius: 11px; }
.hd-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); }
.hd-btn--glass:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); }
.hd-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-family: var(--dsp); }
.hd-link .hd-i { transition: transform .18s ease; }
.hd-link:hover { text-decoration: none; }
.hd-link:hover .hd-i { transform: translateX(4px); }
.hd-crumb { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 18px; }
.hd-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. */
.hd-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; }
.hd-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. */
	/* Absolute, because this file is served at /theme.css — a relative
	   "assets/…" resolved against the site root and 404ed on every homepage
	   load, so this fallback layer never painted (the <video poster>, which
	   points at the right file, masked it). */
	background-image: url("/theme/hellodoc/hero-poster.webp");
	background-size: cover; background-position: center; background-color: var(--ink); }
.hd-hero__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease-in-out; }
.hd-hero__vid.is-on { opacity: 1; }
.hd-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%); }
.hd-hero__in { position: relative; z-index: 2; color: #fff; }
.hd-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); }
.hd-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 3px rgba(74,222,128,.25); animation: hd-pulse 2.4s ease-in-out infinite; }
@keyframes hd-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); } }
.hd-hero__h1 { font-size: clamp(3rem, 8vw, 6.4rem); line-height: .95; letter-spacing: -.04em; margin: 0 0 .3em; color: #fff; }
.hd-hero__h1 span { display: block; opacity: 0; transform: translateY(24px); animation: hd-rise .9s cubic-bezier(.22,1,.36,1) forwards; }
.hd-hero__h1 span:nth-child(2) { animation-delay: .12s; }
@keyframes hd-rise { to { opacity: 1; transform: none; } }
.hd-hero__lead { font-size: 1.16rem; color: rgba(255,255,255,.82); max-width: 48ch; margin-bottom: 30px;
  opacity: 0; animation: hd-rise .9s .22s cubic-bezier(.22,1,.36,1) forwards; }
.hd-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; opacity: 0; animation: hd-rise .9s .34s cubic-bezier(.22,1,.36,1) forwards; }
.hd-hero__fine { margin-top: 22px; font-size: .82rem; color: rgba(255,255,255,.55); opacity: 0; animation: hd-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. */
.hd-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. */
.hd-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); }
.hd-tick .hd-i { width: 16px; height: 16px; flex: none; margin-top: 1px; color: #7FB0FF; opacity: .9; }

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

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

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

/* --- About ---------------------------------------------------------------- */
.hd-about__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; }
@media (max-width: 940px) { .hd-about__grid { grid-template-columns: 1fr; gap: 40px; } }
.hd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.hd-stat { background: var(--paper); padding: 26px 22px; }
.hd-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; }
.hd-stat__i .hd-i { width: 18px; height: 18px; }
.hd-stat strong { display: block; font-family: var(--dsp); font-size: 2rem; letter-spacing: -.03em; line-height: 1; }
.hd-stat__l { font-size: .84rem; color: var(--muted); }

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

/* --- Card tokenizer ------------------------------------------------------- */
/* The card fields themselves are inside the provider's iframe and cannot be
   styled from here — that is the point of using the hosted form. What is styled
   is the button that opens it and the confirmation that comes back. */
.hd-card-tok { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.hd-card-tok__hint { margin: 0; color: var(--muted); font-size: .92rem; }
.hd-card-tok__ok {
  margin: 0; font-weight: 600;
  /* Not the accent: a shopper needs to tell "your card is in" apart from every
     other accented thing on the page. */
  color: #0f7a4a;
}
.hd-card-tok__err { margin: 0; color: #b42318; font-size: .95rem; }

/* --- Collections ---------------------------------------------------------- */
/* The shop's navigation. Reuses the card's surface, border and lift so a
   collection tile and a product tile read as the same family — they sit one
   click apart and a second visual language between them would say they are two
   different kinds of thing. Wider tracks because a collection carries a name
   and a count, not a photograph. */
.hd-grid--collections { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .hd-grid--collections { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hd-grid--collections { grid-template-columns: 1fr; } }

.hd-coll {
  display: block; padding: 26px 24px;
  background: var(--surface, #fff);
  border: 1px solid var(--line); border-radius: 14px;
  color: inherit; text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hd-coll:hover {
  border-color: #C9D4E1;
  box-shadow: 0 14px 34px -18px rgba(11, 15, 20, .28);
  transform: translateY(-2px);
  text-decoration: none;
}
.hd-coll h3 { margin: 0 0 .3em; font-size: 1.25rem; }
.hd-coll:hover h3 { color: var(--accent); }
.hd-coll__count { margin: 0; color: var(--muted); font-size: .92rem; }

/* Paging is a link, never an infinite scroll: the cursor is opaque and belongs
   to the platform, and a page that cannot be linked to is a page nobody can
   send anyone. */
.hd-more { margin-top: 34px; text-align: center; }

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

/* --- Prose ---------------------------------------------------------------- */
.hd-prose { max-width: 66ch; font-size: 1.03rem; color: var(--ink-2); }
/* On its own, .hd-prose is a 66ch column. Combined with .hd-wrap on the SAME
   element it also inherits `margin: 0 auto`, so the text centred in the
   viewport while the h1 above it — a plain .hd-wrap — stayed at the left edge
   of the 1180 column. Two different left edges on one page, which reads as a
   mistake because it is one. Keep the container at wrap width so the edges
   line up, and hold the measure on the children instead. */
.hd-wrap.hd-prose { max-width: var(--wrap); }
.hd-wrap.hd-prose > * { max-width: 66ch; }
.hd-prose p { margin-bottom: 1.15rem; }
.hd-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 ------------------------------------------------------------- */
.hd-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) { .hd-feat { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .hd-feat { grid-template-columns: 1fr; } }
.hd-feat__item { background: var(--paper); padding: 28px 24px; }
.hd-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; }
.hd-feat__i .hd-i { width: 19px; height: 19px; }
.hd-feat__item h3 { margin-bottom: .4em; }
.hd-feat__item p { margin: 0; font-size: .93rem; color: var(--muted); }

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

/* --- FAQ ------------------------------------------------------------------ */
.hd-faq__wrap { max-width: 820px; }
.hd-faq { margin-top: 28px; border-top: 1px solid var(--line); }
.hd-faq__item { border-bottom: 1px solid var(--line); }
.hd-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; }
.hd-faq__item summary::-webkit-details-marker { display: none; }
.hd-faq__x { position: relative; width: 15px; height: 15px; flex: none; }
.hd-faq__x::before, .hd-faq__x::after { content: ""; position: absolute; background: var(--muted); transition: transform .22s ease; }
.hd-faq__x::before { left: 0; top: 6.5px; width: 15px; height: 2px; }
.hd-faq__x::after  { left: 6.5px; top: 0; width: 2px; height: 15px; }
.hd-faq__item[open] .hd-faq__x::after { transform: rotate(90deg); }
.hd-faq__a { padding: 0 0 22px; max-width: 66ch; color: var(--ink-2); font-size: .98rem; }
.hd-faq__a p { margin: 0; }

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

/* --- CTA band ------------------------------------------------------------- */
.hd-cta { background: var(--accent); color: #fff; padding: 76px 0; }
.hd-cta__in { text-align: center; }
.hd-cta h2 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: .3em; }
.hd-cta p { color: rgba(255,255,255,.82); margin-bottom: 26px; }
.hd-cta .hd-btn--accent { background: #fff; color: var(--accent); border-color: #fff; }
.hd-cta .hd-btn--accent:hover { background: #EAF0FF; border-color: #EAF0FF; }

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

/* --- Checkout ------------------------------------------------------------- */
.hd-checkout { display: grid; grid-template-columns: 1fr 360px; gap: 52px; max-width: var(--wrap); margin: 0 auto; padding: 48px 24px 90px; align-items: start; }
/* THE SUMMARY NO LONGER JUMPS ABOVE THE FORM ON MOBILE.
   `order: -1` put the summary AND the Place order button above all eight
   fields, so the flow was: see the button, scroll past it to fill the form,
   scroll back up to press it. Both Thorne and AG1 do the opposite — a
   collapsed summary at the top and the CTA at the end of the form. The summary
   stays where it reads (after the fields) and the button is reachable from the
   bottom of the form, which is where a thumb already is. */
@media (max-width: 940px) {
	.hd-checkout { grid-template-columns: 1fr; }
	.hd-summary { position: static; }
}
.hd-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; }
.hd-form .hd-fields { max-width: none; }
.hd-form .hd-btn { width: 100%; margin-top: 24px; }
.hd-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; }
.hd-card-note .hd-i { color: var(--go); margin-top: 2px; }
.hd-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); }
.hd-summary h2 { font-size: 1.02rem; margin-bottom: 16px; }
.hd-summary__item { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.hd-summary__thumb { width: 56px; height: 56px; border-radius: 9px; overflow: hidden; background: var(--tint); flex: none; }
.hd-summary__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd-summary__items { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; }
.hd-summary__detail { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hd-summary__title { font-weight: 600; }
.hd-summary__meta { font-family: var(--mono); font-size: .7rem; letter-spacing: .04em;
	text-transform: uppercase; color: var(--muted); }
.hd-summary__price { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.hd-summary__price em { font-style: normal; font-weight: 400; color: var(--muted); font-size: .85em; }
.hd-checkout__per { font-style: normal; font-weight: 400; color: var(--muted); font-size: .8em; }
.hd-checkout__meta { color: var(--muted); font-size: .92rem; display: grid; gap: 6px; margin-bottom: 10px; }
.hd-checkout__meta > div { display: flex; justify-content: space-between; }

/* ── the card fields ──────────────────────────────────────────────────────
   A plain region, not a card. This block was written as .hd-card, which is the
   PRODUCT CARD five hundred lines above — bordered, 22px of padding, and a
   hover that lifts it two pixels with a shadow. The payment section inherited
   every bit of that, so the card-number input sat in a tight box that animated
   when the mouse passed over it.

   Deliberately borderless: on the page where somebody types a card number, a
   box that moves is a box that looks like it is not part of the site. */
.hd-paycard { display: grid; gap: 14px; margin-top: 4px; }
.hd-paycard .hd-field { margin: 0; }
/* ── end owned block ── */

/* ── checkout reassurances ────────────────────────────────────────────────
   First-party only. /checkout carries card fields inline, so it is in PCI
   scope and must stay free of third-party scripts and images — which rules out
   every trust-badge widget and is no loss: a sentence the business can stand
   behind beats a padlock graphic on a prescription purchase.

   NAMED hd-assure AND NOT hd-trust, WHICH IS ALREADY TAKEN. .hd-trust is the
   home page's statistics panel five hundred lines above — a two-column grid of
   bordered cards on a --line background. This list only set display and gap,
   so the panel's grid-template-columns, background, border and border-radius
   all still applied and the four reassurances rendered as a boxed two-column
   slab in the order summary. It read as unstyled; it was styled by a namesake.
   Third collision of this kind on the project, after .st-check and
   .hd-intake. */
/* Bottom margin, not just top: the Place order button sat directly under the
   last claim with nothing between them, so the two read as one block and the
   claim looked like a label on the button. */
.hd-assure { list-style: none; margin: 16px 0 22px; padding: 0; display: grid; gap: 7px; }
.hd-assure li { position: relative; padding-left: 20px; font-size: .88rem; color: var(--muted); }
.hd-assure li::before {
	content: ""; position: absolute; left: 3px; top: .42em; width: 5px; height: 9px;
	border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* ── end owned block ── */

/* Native validation scrolls a field to the very top, where the sticky header
   sits on top of it — so the shopper arrives at a field they cannot fully see. */
.hd-input, .hd-field { scroll-margin-top: 110px; }
.hd-summary__item strong { display: block; font-size: .96rem; }
.hd-summary__item em { font-style: normal; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.hd-summary__lines { margin: 16px 0; }
.hd-summary__lines div { display: flex; justify-content: space-between; padding: 7px 0; font-size: .92rem; }
.hd-summary__lines dt { color: var(--muted); }
.hd-summary__lines dd { margin: 0; }
.hd-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; }
.hd-summary__total dt { color: var(--ink) !important; }
.hd-summary__note { font-size: .8rem; color: var(--muted); margin-bottom: 18px; }

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

/* --- Mobile nav ----------------------------------------------------------- */
.hd-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; }
.hd-burger span { position: absolute; left: 11px; width: 18px; height: 2px; background: var(--ink); transition: transform .22s ease, opacity .22s ease; }
.hd-burger span:nth-child(1) { top: 15px; }
.hd-burger span:nth-child(2) { top: 20px; }
.hd-burger span:nth-child(3) { top: 25px; }
body.hd-navopen .hd-burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.hd-navopen .hd-burger span:nth-child(2) { opacity: 0; }
body.hd-navopen .hd-burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 860px) {
  .hd-burger { display: block; }
  .hd-head .hd-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. .hd-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 .hd-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. */
  .hd-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.hd-navopen .hd-nav { clip-path: inset(0 0 0 0); visibility: visible;
    transition: clip-path .34s cubic-bezier(.22,1,.36,1), visibility 0s; }
  .hd-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) {
	.hd-wrap { padding: 0 18px; }
	.hd-narrow { padding: 40px 18px 60px; }

	.hd-hero { min-height: 0; padding: 64px 0 84px; }
	.hd-hero__h1 { font-size: clamp(2.6rem, 12.5vw, 3.6rem); line-height: .98; }
	.hd-hero__lead { font-size: 1.02rem; max-width: none; }
	.hd-hero__cta { gap: 10px; }
	.hd-hero__cta .hd-btn { width: 100%; justify-content: center; }
	.hd-hero__fine { font-size: .78rem; }
	.hd-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. */
	.hd-hero__proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start; gap: 9px 18px; padding: 12px 20px; }
	.hd-tick { font-size: .8rem; }

	.hd-sec { padding: 46px 0; }
	.hd-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); }
	.hd-lede { font-size: 1.02rem; }

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

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

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

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

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

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

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

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

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

@media (max-width: 400px) {
	.hd-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) {
	.hd-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.hd-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.hd-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.hd-input:required:invalid { color: var(--muted); }
select.hd-input option { color: var(--ink); }
select.hd-input option[value=""] { color: var(--muted); }

select.hd-input:hover { border-color: #C9D4E1; }
select.hd-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. */
.hd-input:focus, .hd-form input:focus, .hd-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.
   ========================================================================== */

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

.hd-edu__grade { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.hd-edu__grade p { margin: 0; font-size: .89rem; color: var(--muted); max-width: 62ch; }
.hd-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; }
.hd-grade .hd-i { width: 15px; height: 15px; }
.hd-grade--strong      { color: #0B7A55; border-color: rgba(15,157,107,.35); background: rgba(15,157,107,.08); }
.hd-grade--moderate    { color: #9A6100; border-color: rgba(200,138,20,.35); background: rgba(240,162,46,.1); }
.hd-grade--preclinical { color: #A3352E; border-color: rgba(198,54,47,.3);  background: rgba(198,54,47,.07); }

.hd-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) { .hd-edu__stats { grid-template-columns: 1fr; } }
.hd-estat { background: var(--paper); padding: 22px 20px; }
.hd-estat strong { display: block; font-family: var(--dsp); font-size: 2rem; letter-spacing: -.035em; line-height: 1; margin-bottom: 10px; }
.hd-estat p { margin: 0 0 10px; font-size: .87rem; color: var(--ink-2); line-height: 1.45; }
.hd-estat cite { font-family: var(--mono); font-style: normal; font-size: .68rem; color: var(--muted); letter-spacing: .02em; }

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

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

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

.hd-notfor { list-style: none; margin: 0; padding: 0; }
.hd-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); }
.hd-notfor li:last-child { border-bottom: 0; }
.hd-notfor .hd-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. */
.hd-honest { margin-top: 44px; padding: 24px 26px; border-radius: var(--r);
	background: var(--ink); color: #fff; }
.hd-honest h2 { color: #fff; margin-bottom: .45em; }
.hd-honest p { margin: 0; color: rgba(255,255,255,.78); font-size: .97rem; }

.hd-sources { margin-top: 26px; border-top: 1px solid var(--line); }
.hd-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; }
.hd-sources summary::-webkit-details-marker { display: none; }
.hd-sources[open] .hd-faq__x::after { transform: rotate(90deg); }
.hd-sources ol { margin: 0 0 12px; padding-left: 20px; font-size: .86rem; color: var(--muted); }
.hd-sources li { padding: 5px 0; }
.hd-sources a { color: var(--ink-2); }

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

.hd-howhead { padding: 64px 0 44px; border-bottom: 1px solid var(--line); }
.hd-howhead h1 { max-width: 17ch; }
.hd-howhead .hd-lede { margin-top: 14px; }
.hd-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; }
.hd-howhead__marks div { background: var(--paper); padding: 20px 22px; }
.hd-howhead__marks .hd-i { color: var(--accent); width: 18px; height: 18px; margin-bottom: 10px; display: block; }
.hd-howhead__marks strong { display: block; font-family: var(--dsp); font-size: 1.6rem; letter-spacing: -.03em; line-height: 1; }
.hd-howhead__marks span { font-size: .84rem; color: var(--muted); }
@media (max-width: 720px) { .hd-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. */
.hd-step-row { padding: 60px 0; border-bottom: 1px solid var(--line); }
.hd-step-row__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hd-step-row.is-flipped .hd-step-row__media { order: 2; }
@media (max-width: 880px) {
	.hd-step-row { padding: 40px 0; }
	.hd-step-row__grid { grid-template-columns: 1fr; gap: 26px; }
	.hd-step-row.is-flipped .hd-step-row__media { order: 0; }
}

.hd-step-row__media { position: relative; margin: 0; border-radius: 16px; overflow: hidden;
	background: var(--tint); border: 1px solid var(--line); }
.hd-step-row__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.hd-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); }
.hd-step-row__media figcaption .hd-i { width: 22px; height: 22px; }

.hd-step-row__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hd-step-row__n { font-family: var(--dsp); font-size: 2.6rem; font-weight: 700; letter-spacing: -.045em;
	line-height: 1; color: var(--line); }
.hd-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; }
.hd-step-row__time .hd-i { width: 14px; height: 14px; }
.hd-step-row__body h2 { margin-bottom: .35em; }
.hd-step-row__body p:last-child { margin: 14px 0 0; color: var(--ink-2); font-size: .97rem; }

/* Decline path */
.hd-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) { .hd-decline__list { grid-template-columns: 1fr; } }
.hd-decline__list li { background: var(--ink); padding: 24px; display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; }
.hd-decline__list .hd-i { width: 20px; height: 20px; color: #7FB0FF; margin-top: 2px; }
.hd-decline__list strong { display: block; color: #fff; font-family: var(--dsp); font-size: 1rem; margin-bottom: .3em; }
.hd-decline__list p { margin: 0; color: rgba(255,255,255,.66); font-size: .91rem; }

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

.hd-speed { padding: 44px 0 48px; border-bottom: 1px solid var(--line); }
.hd-speed__grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 22px; align-items: start; }
.hd-speed__arrow { display: flex; align-items: center; justify-content: center; color: var(--line); padding-top: 34px; }
.hd-speed__arrow .hd-i { width: 24px; height: 24px; }
.hd-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. */
.hd-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); }
.hd-speed__ico .hd-i { width: 22px; height: 22px; }
.hd-speed__step h3 { font-size: 1.04rem; margin-bottom: .35em; }
.hd-speed__step p { margin: 0; font-size: .93rem; color: var(--muted); }
.hd-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) {
	.hd-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. */
	.hd-speed__grid { grid-template-columns: 1fr; gap: 0; }
	.hd-speed__arrow { display: none; }
	.hd-speed__step { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px;
		position: relative; padding-bottom: 28px; }
	.hd-speed__step:last-child { padding-bottom: 0; }
	.hd-speed__ico { grid-row: 1 / span 3; margin-bottom: 0; }
	.hd-speed__step::before { content: ''; position: absolute; left: 21px; top: 52px; bottom: 4px;
		width: 2px; border-radius: 2px; background: var(--line); }
	.hd-speed__step:last-child::before { display: none; }
	.hd-speed__t { font-size: 1.45rem; margin-bottom: 4px; align-self: center; }
	.hd-speed__note { margin-top: 24px; text-align: left; }
}

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

@media (max-width: 860px) {
	.hd-foot__top { grid-template-columns: 1fr; gap: 30px; }
	.hd-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. */
.hd-foot__disclosure a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.hd-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 .hd-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; }

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

/* ==========================================================================
   Assessment result (/start/?r=…)
   ========================================================================== */
.hd-matchr h1 { margin-bottom: 22px; }
.hd-matchr__pick { display: grid; gap: 16px; }
.hd-matchr__pick .hd-summary__item { border: 0; padding: 0; }
.hd-matchr__pick .hd-btn { justify-self: start; }
.hd-matchr__alt { margin-top: 18px; color: var(--hd-mut, #64748b); }
.hd-intake--match .hd-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. */
.hd-nav__me {
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--ink); flex: none;
	transition: color .18s ease;
}
.hd-nav__me .hd-i { width: 21px; height: 21px; }
.hd-nav__me:hover, .hd-nav__me:focus-visible { color: var(--accent); }
.hd-nav__melabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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

.hd-acct-hero { position: relative; overflow: hidden; background: var(--ink); isolation: isolate; }
.hd-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. */
.hd-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%);
}
.hd-acct-hero__in { padding: 60px 24px 34px; color: #fff; }
.hd-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;
}
.hd-acct-hero__mail { margin: 0; font-size: .95rem; color: rgba(255,255,255,.72); }

.hd-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;
}
.hd-acct-hero__stats > div {
	padding: 16px 26px 2px 0; margin-right: 26px;
	border-right: 1px solid rgba(255,255,255,.14);
}
.hd-acct-hero__stats > div:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.hd-acct-hero__stats dt {
	font-size: .74rem; letter-spacing: .01em; color: rgba(255,255,255,.6);
	margin-bottom: 3px;
}
.hd-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;
}
.hd-acct-hero__stats .is-wide dd { font-size: 1.02rem; }

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

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

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

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

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

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

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

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

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

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

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

.hd-acct-signin { width: 100%; max-width: 460px; margin: 0 auto; padding: 64px 24px 90px; }
.hd-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;
}
.hd-acct-signin .hd-lede { margin-bottom: 26px; font-size: .98rem; }
.hd-acct-signin .hd-fields { max-width: 100%; }
.hd-acct-signin .hd-btn { margin-top: 16px; width: 100%; }
.hd-acct-signin .hd-hint a { font-weight: 500; }
.hd-acct__guest { margin-top: 40px; }
.hd-acct__guest h2 { font-size: 1.02rem; }
.hd-acct__guest .hd-panel__sub { margin-bottom: 0; }

@media (max-width: 980px) {
	.hd-acct__grid { grid-template-columns: 1fr; gap: 0; }
	.hd-acct__side { border-left: none; padding-left: 0; }
	.hd-acct__side > section:first-child { border-top: 1px solid var(--line); margin-top: 34px; padding-top: 34px; }
	.hd-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. */
	.hd-nav__me { justify-content: flex-start; gap: 10px; }
	.hd-nav__melabel { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
	.hd-acct-hero__in { padding: 40px 20px 26px; }
	.hd-acct-hero__img { background-position: 76% 34%; }
	.hd-acct-hero__stats > div { padding-right: 18px; margin-right: 18px; }
	.hd-acct { padding: 0 20px 70px; }
}

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

/* ── checkout: fewer ways to leave ─────────────────────────────────────────
   Seven exits sat on the highest-intent page in the funnel — Shop,
   Collections, How it works, About, Cart, Account, Start now. Both benchmarks
   strip the header at checkout to a logo and a way back to the cart. Done with
   :has() so the header, which lives in the root layout, can respond to the page
   inside it without restructuring the layout or turning it into a client
   component. */
body:has(.hd-checkout) .hd-nav a:not(.hd-nav__me),
body:has(.hd-checkout) .hd-head .hd-btn--accent { display: none; }
body:has(.hd-checkout) .hd-nav { gap: 0; }

/* ── the pre-payment questionnaire step ────────────────────────────────────
   Deliberately plain: this is the step that decides whether somebody
   continues, and a list of things to do with a clear count of what is left is
   the whole design.

   NAMESPACED hd-qstep* AND NOT hd-intake*, WHICH IS ALREADY TAKEN. .hd-intake
   is the two-column page layout for the /start flow, four hundred lines above
   — 1fr plus a 320px aside. Reusing the name here set only margin-top, so that
   grid still applied and put this list in the narrow column with the progress
   line stranded in the aside. It looked like broken CSS; it was a name that
   already meant something.

   For the same reason nothing here redefines .hd-narrow. An earlier draft set
   it to 640px for this one page, which quietly narrowed every other page that
   uses it. A component's styles belong to the component. */
.hd-qstep { margin-top: 28px; }
.hd-qstep__list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.hd-qstep__list li {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; background: var(--paper);
}
.hd-qstep__list li.is-done { background: var(--tint); border-color: var(--tint); }
.hd-qstep__title { font-weight: 600; }
.hd-qstep__state { font-family: var(--mono); font-size: .72rem; letter-spacing: .05em;
	text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.hd-qstep__list li.is-done .hd-qstep__state { color: #0f7a4a; }
.hd-qstep__progress { margin: 0 0 20px; }
.hd-qstep__frame {
	/* NO CHROME OF ITS OWN. A border, a radius and a panel background made the
	   questionnaire look like a widget bolted into the page rather than part of
	   it — and the framed document supplies its own surface anyway, so this was
	   a second card drawn around the first.

	   min-height is gone with them. It was 620px, chosen so the first question
	   was answerable without an inner scrollbar back when the frame could not
	   report its size. It could not shrink, so a short step — "all done", one
	   question — sat in several hundred pixels of dead white. The frame now
	   posts its height and the page sets it; the floor lives in the component,
	   because a stylesheet floor would fight the measured value rather than
	   back it up. */
	width: 100%; display: block; border: 0; background: transparent;
}
.hd-qstep__go { margin-top: 22px; display: grid; gap: 12px; justify-items: start; }
/* ── end owned block ── */

/* --- Footer -------------------------------------------------------------- */

/* ONE ROW. See the note in layout.tsx for what was removed and why — the short
   version is that most of it was hardcoded claims belonging to one merchant.

   The links are the things a shopper cannot reach from the header: their own
   order, a human, and the legal pages. */
.hd-foot__in { align-items: center; }
.hd-foot__mark { font-size: 1.1rem; }
.hd-foot__mark:hover { text-decoration: none; }
.hd-foot__links { flex-wrap: wrap; gap: 10px 22px; }
.hd-foot__legal { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.hd-foot__by { color: var(--muted); white-space: nowrap; }

/* On the two pages where the only useful action is finishing, the footer drops
   to the legal line alone. Same argument as the header, which already sheds its
   navigation at checkout — and the same mechanism, so the two cannot drift into
   disagreeing about which pages count as checkout.

   Not display:none on the whole thing: the legal line and the platform
   disclosure are the parts a shopper is most entitled to on the screen where
   they are about to pay. */
body:has(.hd-checkout) .hd-foot__in,
body:has(.hd-qstep) .hd-foot__in { display: none; }
body:has(.hd-checkout) .hd-foot__legal,
body:has(.hd-qstep) .hd-foot__legal { margin-top: 0; padding-top: 0; border-top: 0; }
body:has(.hd-checkout) .hd-foot,
body:has(.hd-qstep) .hd-foot { padding: 22px 0 26px; margin-top: 24px; }

/* --- The questionnaire heading ------------------------------------------- */

/* Full size while the page is still introducing itself; compact the moment
   there are questions on screen. The questionnaire fits a viewport on its own,
   so anything above it is the difference between answering without scrolling
   and not. */
.hd-qhead h1 { margin-bottom: .35em; }
.hd-qhead--compact { margin-bottom: 14px; }
.hd-qhead--compact .hd-eyebrow { margin-bottom: 2px; }
.hd-qhead--compact h1 {
	font-size: 1.22rem;
	line-height: 1.2;
	letter-spacing: -.018em;
	margin: 0;
}

/* The shrink is animated because it happens WHILE the shopper is looking at it
   — the session resolves a beat after the page paints, so an abrupt jump reads
   as the page breaking rather than as it getting out of the way. */
@media (prefers-reduced-motion: no-preference) {
	.hd-qhead h1 {
		transition: font-size .28s cubic-bezier(.22,.61,.36,1),
		            margin .28s cubic-bezier(.22,.61,.36,1);
	}
}

/* --- Sticky footer ------------------------------------------------------- */

/* The footer belongs at the bottom of the page, and nothing was putting it
   there. It was never pinned — the old four-column footer was simply tall
   enough to fill the gap, so consolidating it did not cause this, it revealed
   it. On the empty cart, ~250px of content left the footer sitting across the
   middle of the viewport with white space under it.

   dvh, not vh: on mobile 100vh is the viewport WITHOUT the browser chrome that
   is currently covering part of it, so a vh-pinned footer sits below the fold
   on exactly the devices where the fold matters most.

   The ribbon, header and footer are flex items too and must not be squeezed —
   flex-shrink defaults to 1, and a header that loses a few pixels because a
   page is long is the sort of thing nobody attributes to this rule. */
body { min-height: 100dvh; display: flex; flex-direction: column; }
.hd-page { flex: 1 0 auto; }
.hd-ribbon, .hd-head, .hd-foot { flex: none; }

/* --- Billing "same as shipping" ------------------------------------------ */
.hd-check { display: flex; align-items: center; gap: .6rem; font-size: .95rem; color: var(--ink-2); margin: 2px 0 4px; cursor: pointer; }
.hd-check input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }

/* ── ORDER CONFIRMED ────────────────────────────────────────────────────────
   A confirmation does two jobs. It proves — a number, a total, a card, an
   address, checkable while a correction is still free. And it sets expectation,
   which on a prescription order is the one that matters: a clinician has to
   read this before anything moves, and a shopper not told that reads silence as
   a stalled order.

   Narrower than the shop. Nobody browses this page; they read it once, check
   two things and leave, and a 1180px measure makes them track across a screen
   to pair a label with its value. */
.hd-succ { max-width: 780px; margin: 0 auto; padding: 48px 24px 88px; }

.hd-succ__head { text-align: center; margin-bottom: 34px; }

.hd-succ__tick {
	width: 52px; height: 52px; margin: 0 auto 18px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: color-mix(in srgb, var(--go) 12%, transparent);
	color: var(--go);
}
.hd-succ__head h1 {
	font-family: var(--dsp);
	font-size: clamp(1.9rem, 4vw, 2.5rem);
	line-height: 1.1; margin: 0 0 8px; color: var(--ink);
}
/* The order number is what gets quoted on the phone, so it is selectable text
   at a readable size rather than fine print under a heading. */
.hd-succ__sub { color: var(--muted); font-size: 1rem; margin: 0; }
.hd-succ__sub strong { color: var(--ink); font-weight: 600; }
.hd-succ__dot { margin: 0 8px; opacity: .5; }

/* ── the steps ───────────────────────────────────────────────────────────── */

.hd-succ__steps {
	list-style: none; margin: 0 0 28px; padding: 22px 24px;
	border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
	display: grid; gap: 2px;
}
.hd-succ__step {
	display: grid; grid-template-columns: 28px 1fr; gap: 14px;
	align-items: start; padding: 10px 0; position: relative;
}
/* The rail is drawn between bullets rather than behind them, so a bullet never
   sits on a line it is meant to interrupt. */
.hd-succ__step:not(:last-child)::before {
	content: ""; position: absolute; left: 13px; top: 34px; bottom: -6px;
	width: 2px; background: var(--line);
}
.hd-succ__step.is-done:not(:last-child)::before { background: var(--go); opacity: .35; }

.hd-succ__bullet {
	width: 28px; height: 28px; border-radius: 50%;
	display: grid; place-items: center;
	font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums;
	border: 2px solid var(--line); background: var(--paper); color: var(--muted);
	position: relative; z-index: 1;
}
.hd-succ__steptext { display: grid; gap: 2px; }
.hd-succ__steptext strong { font-size: .98rem; color: var(--ink); font-weight: 600; }
.hd-succ__steptext em { font-style: normal; font-size: .88rem; color: var(--muted); }

.hd-succ__step.is-done .hd-succ__bullet {
	background: var(--go); border-color: var(--go); color: #fff;
}
/* The current step is the only ring on the page, because it is the only thing
   a reader has to find. */
.hd-succ__step.is-now .hd-succ__bullet {
	border-color: var(--accent); color: var(--accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}
.hd-succ__step.is-now .hd-succ__steptext strong { color: var(--accent); }
.hd-succ__step.is-next { opacity: .55; }

/* ── panels ──────────────────────────────────────────────────────────────── */

.hd-succ__panel {
	border: 1px solid var(--line); border-left: 3px solid var(--accent);
	border-radius: var(--r); padding: 18px 20px; margin: 0 0 28px;
	background: var(--paper);
}
.hd-succ__panel--act { border-left-color: var(--go); background: var(--tint); }
.hd-succ__panel strong { display: block; margin-bottom: 6px; color: var(--ink); }
.hd-succ__panel p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.55; }
.hd-succ__go { margin: 16px 0 0; }

/* ── the two cards ───────────────────────────────────────────────────────── */

.hd-succ__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; }
@media (max-width: 720px) { .hd-succ__grid { grid-template-columns: 1fr; } }

.hd-succ__card {
	border: 1px solid var(--line); border-radius: var(--r);
	background: var(--paper); padding: 22px 24px;
}
.hd-succ__card h2 {
	font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
	color: var(--muted); margin: 0 0 14px; font-weight: 600;
}
.hd-succ__block + .hd-succ__block {
	margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line);
}

.hd-succ__items { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.hd-succ__items li {
	display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline;
}
.hd-succ__qty { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .9rem; }
.hd-succ__title { color: var(--ink); font-size: .96rem; }
.hd-succ__price { font-variant-numeric: tabular-nums; color: var(--ink); font-size: .94rem; }

.hd-succ__totals {
	margin: 0; padding-top: 16px; border-top: 1px solid var(--line);
	display: grid; gap: 8px;
}
.hd-succ__totals > div { display: flex; justify-content: space-between; gap: 16px; }
.hd-succ__totals dt { color: var(--muted); font-size: .92rem; }
.hd-succ__totals dd {
	margin: 0; font-variant-numeric: tabular-nums; color: var(--ink); font-size: .92rem;
}
.hd-succ__total { padding-top: 10px; border-top: 1px solid var(--line); }
.hd-succ__total dt, .hd-succ__total dd { font-weight: 700; font-size: 1.05rem; color: var(--ink); }

.hd-succ__hold {
	margin: 16px 0 0; padding: 12px 14px; border-radius: 9px;
	background: var(--tint); color: var(--muted);
	font-size: .88rem; line-height: 1.5;
}

.hd-succ__addr { font-style: normal; display: grid; gap: 3px; color: var(--ink); font-size: .95rem; }
.hd-succ__card-line { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.hd-succ__brand { color: var(--ink); font-size: .95rem; text-transform: capitalize; }
.hd-succ__mask { color: var(--muted); font-family: var(--mono); font-size: .9rem; }
.hd-succ__muted { color: var(--muted); font-size: .88rem; margin: 0 0 12px; line-height: 1.5; }

.hd-succ__foot { text-align: center; margin-top: 34px; display: grid; gap: 14px; justify-items: center; }

/* ── One treatment per order: the swap prompt ──────────────────────────────
   Shown in place of the buy button when the cart already holds a different
   treatment. It replaces the button rather than opening over the page: the
   question belongs where the click happened, and a shopper on a phone should
   not have to find a dialog to answer it.

   Nothing here is destructive on its own — both answers are explicit, and the
   cart's other lines are untouched by either. */
.hd-swap {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--surface-2, #f8fafc);
  max-width: 42rem;
}
.hd-swap__msg {
  margin: 0 0 12px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.hd-swap__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* The two answers read as equals. Making "replace" the louder one would be the
   page nudging a shopper toward changing a treatment decision. */
.hd-swap__actions .hd-btn { flex: 1 1 auto; }
@media (max-width: 30rem) {
  .hd-swap__actions { flex-direction: column; }
  .hd-swap__actions .hd-btn { width: 100%; }
}

/* ==========================================================================
   Acquisition / access-list pages (tenant content)
   ========================================================================== */

.hd-learn__wrap { max-width: 760px; }
.hd-learn__h { display: flex; flex-direction: column; gap: .22em; margin: 0 0 1rem; }
.hd-learn__h span { display: block; text-wrap: balance; }
.hd-learn__form { margin: 2.4rem 0 2.8rem; }
.hd-learn__form h2 { margin-bottom: .4rem; }
.hd-learn__sec { margin: 2.2rem 0 0; }
.hd-learn__sec h2 { font-size: 1.28rem; }
.hd-learn__sec ul { margin: .6rem 0 0; padding-left: 1.2rem; }
.hd-learn__sec li { margin: 0 0 .45rem; }
.hd-learn__notes {
	margin: 2.6rem 0 0; padding: 0; list-style: none;
	font-size: .88rem; color: var(--muted); line-height: 1.55;
}
.hd-learn__notes li { margin: 0 0 .7rem; max-width: 68ch; }

.hd-eval {
	margin: 1.6rem 0 0;
	padding: 22px 24px 24px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--tint);
}
.hd-eval h2 { font-size: 1.22rem; margin: 0 0 .45rem; }
.hd-eval p { margin: 0 0 1rem; max-width: 62ch; }
.hd-eval .hd-btn { margin-top: .2rem; }

.hd-lead { display: grid; gap: 16px; max-width: 520px; margin-top: 1.2rem; }
.hd-lead__field { display: grid; gap: 6px; font-size: .92rem; font-weight: 500; }
.hd-lead__field legend { font-size: .92rem; font-weight: 500; margin-bottom: 8px; padding: 0; }
.hd-lead__hint { display: block; font-weight: 400; font-size: .84rem; color: var(--muted); line-height: 1.45; }
.hd-lead textarea.hd-input { min-height: 96px; resize: vertical; }
.hd-lead .hd-btn { justify-self: start; margin-top: 8px; }
.hd-lead__err { color: var(--stop); font-size: .92rem; margin: 0; }
.hd-lead__ok { display: grid; gap: 16px; max-width: 520px; }
.hd-lead__ok p { margin: 0; }
.hd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hd-learn__index { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 10px; }
.hd-learn__index a {
	display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
	border: 1px solid var(--line); border-radius: var(--r);
	padding: 18px 20px; color: var(--ink);
}
.hd-learn__index a:hover { border-color: var(--accent); text-decoration: none; background: var(--tint); }
.hd-learn__index strong { font-family: var(--dsp); font-size: 1.08rem; }
.hd-learn__index span { grid-column: 1; font-size: .9rem; color: var(--muted); line-height: 1.45; }
.hd-learn__index svg { grid-row: 1 / span 2; align-self: center; color: var(--muted); }