/* Design tokens — the only place raw colour/size values live. Component CSS uses var(--hbd-*). */
:root {
  /* colour (from live site CSS + Figma) */
  --hbd-ink: #1D1718;  --hbd-navy: #243456;  --hbd-blue: #007AA6;  --hbd-teal: #30A6A6;  --hbd-teal-2: #00A8A8;
  --hbd-sky: #DCF0F9;  --hbd-sky-2: #E3F1F1; --hbd-sky-3: #E8F4F8; --hbd-cream: #FFF9F3; --hbd-peach: #F5E8D8;
  /* The deeper sky the /our-story/ injection-model section is painted in, and the fill of its
     portrait card (measured 2026-09-17). */
  --hbd-sky-deep: #B4D9EA;
  --hbd-orange: #EA772D; --hbd-orange-2: #E07A5F; --hbd-pink: #F8B4E7; --hbd-lavender: #EDE4F5; --hbd-slate: #456C8F;
  /* The tick blue of the HRT comparison columns — a brighter, bluer blue than --hbd-blue (#007AA6),
     sampled off both live sections (docs/audit/widgets/comparison-list.md §2.4). Both glyph colours
     draw their dashed ring in the same colour at 40%. */
  --hbd-blue-bright: #0075DD;
  --hbd-blue-bright-a40: rgba(0, 117, 221, .4); --hbd-orange-a40: rgba(234, 119, 45, .4);
  --hbd-grey-100: #F7F7F7; --hbd-grey-200: #E5E5E5; --hbd-grey-300: #CCCCCC; --hbd-grey-500: #8B8178; --hbd-white: #FFFFFF;
  /* The dashed outline of the blog header's inactive category pills — a flat #999, not an ink alpha
     (measured: `rgb(153, 153, 153)`, docs/audit/widgets/page-title.md §3.3). */
  --hbd-grey-400: #999999;
  /* The hairline above each HRT comparison section: a flat grey between --hbd-grey-200 and
     --hbd-grey-300, measured identically at all four widths (comparison-list.md §3.2). */
  --hbd-grey-250: #D2D1D1;
  --hbd-danger: #B42318; --hbd-danger-bg: #F1B6B0;
  --hbd-text: var(--hbd-ink); --hbd-text-muted: #5B5657; --hbd-link: var(--hbd-blue);
  --hbd-ink-a60: rgba(29, 23, 24, .6); --hbd-ink-a55: rgba(29, 23, 24, .55); --hbd-ink-a50: rgba(29, 23, 24, .5);
  --hbd-ink-a40: rgba(29, 23, 24, .4); --hbd-ink-a20: rgba(29, 23, 24, .2); --hbd-ink-a16: rgba(29, 23, 24, .16);
  /* The membership "What We Test" closing note is ink at 80% — live's own oklab(.2123 …/.8)
     (docs/audit/widgets/biomarker-tabs.md §4.1). */
  --hbd-ink-a80: rgba(29, 23, 24, .8); --hbd-ink-a70: rgba(29, 23, 24, .7);
  /* The split-content secondary card is pink at 40%; its rule is navy at 10% (home, measured). */
  --hbd-pink-a40: rgba(248, 180, 231, .4); --hbd-navy-a10: rgba(36, 52, 86, .1);
  /* The unearned stars in a Google review card: live outlines them, we ghost them (measured
     rgb(164,183,200) where live's outline falls). */
  --hbd-navy-a20: rgba(36, 52, 86, .2);
  /* The gold of the Google rating stars — live's own starColored.svg, sampled off both review
     sections. Nothing else on the site is this colour. */
  --hbd-gold: #D4A853;
  --hbd-white-a40: rgba(255, 255, 255, .4); --hbd-white-a70: rgba(255, 255, 255, .7); --hbd-white-a90: rgba(255, 255, 255, .9); --hbd-orange-a50: rgba(234, 119, 45, .5);
  --hbd-white-a80: rgba(255, 255, 255, .8);
  /* The clinic carousel's idle dots (measured white at 45% on /location/austin/). */
  --hbd-white-a05: rgba(255, 255, 255, .05); --hbd-white-a45: rgba(255, 255, 255, .45);
  /* Three greys the clinic card's arrival panel brings in and nothing else on the site uses: its border
     (#EDEDEE, lighter than --hbd-grey-200), its body copy and its row titles. */
  --hbd-grey-150: #EDEDEE; --hbd-grey-600: #4B5563; --hbd-grey-700: #1F2937;
  /* Pure black + its alphas: the live Locations drawer draws its group headings, rules and dashed
     pills on black, not on ink. */
  --hbd-black: #000000; --hbd-black-a10: rgba(0, 0, 0, .1); --hbd-black-a15: rgba(0, 0, 0, .15); --hbd-black-a20: rgba(0, 0, 0, .2); --hbd-black-a24: rgba(0, 0, 0, .24); --hbd-black-a25: rgba(0, 0, 0, .25); --hbd-black-a30: rgba(0, 0, 0, .3); --hbd-black-a40: rgba(0, 0, 0, .4); --hbd-black-a50: rgba(0, 0, 0, .5);
  /* Mega-menu link descriptions on live are Tailwind gray-600 (oklch(.446 .03 256.802)), a cool slate. */
  --hbd-gray-600: #4A5565;
  /* The mobile off-canvas accordion is drawn on Tailwind gray-900 text with a gray-50 row hover (measured
     on production's mobile sheet, round 4). */
  --hbd-gray-900: #101828; --hbd-gray-50: #F9FAFB;
  /* Tailwind slate-600. The membership biomarker cards' description copy and their inactive tab
     labels are both this cool grey, measured rgb(71, 85, 105) at all four widths
     (docs/audit/widgets/biomarker-tabs.md §4.1). */
  --hbd-slate-600: #475569;
  /* Tailwind slate-200 and slate-800 — the hairline and the type of the PINCC marquee's Pause pill,
     measured rgb(226, 232, 240) and rgb(30, 41, 59) (docs/audit/widgets/stat-cards-marquee.md §3.5).
     The pill's own fill is white at 80% (live's oklab(1 0 0 / .8)). */
  --hbd-slate-200: #E2E8F0; --hbd-slate-800: #1E293B;
  /* type */
  --hbd-font-display: 'Loretta', Georgia, 'Times New Roman', serif;
  --hbd-font-serif-2: 'EK Notice Classic', Georgia, serif;
  --hbd-font-body: 'Neue Haas Grotesk Text Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --hbd-font-mono: 'Founders Grotesk Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --hbd-fs-h1: clamp(2.5rem, 1.6rem + 3.2vw, 4.5rem);
  --hbd-fs-h2: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  --hbd-fs-h3: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  /* Body is 16px to match the live site (Astra 'font-size-body' desktop is 16 too, so 1rem === 16px). */
  --hbd-fs-h4: 1.375rem; --hbd-fs-body: 1rem; --hbd-fs-small: 0.9375rem; --hbd-fs-mono: 0.75rem;
  /* 14px: buttons/pills (live LOGIN, REQUEST APPOINTMENT) and secondary text (menu descriptions, legal links). */
  --hbd-fs-btn: 0.875rem; --hbd-fs-meta: 0.875rem;
  --hbd-lh-tight: 1.1; --hbd-lh-snug: 1.25; --hbd-lh-body: 1.55; --hbd-lh-btn: 1.4286;
  /* 28px: every row of the mobile off-canvas accordion, parents (16px) and children (14px) alike, so both
     land on the same 44px row / 52px pitch as production. */
  --hbd-lh-mmenu: 1.75rem;
  --hbd-tracking-mono: 0.06em;
  /* layout */
  --hbd-container: 1280px; --hbd-gutter: clamp(1rem, 5.5vw, 5rem);
  --hbd-space-1: .25rem; --hbd-space-2: .5rem; --hbd-space-3: .75rem; --hbd-space-4: 1rem; --hbd-space-5: 1.5rem;
  --hbd-space-6: 2rem; --hbd-space-7: 3rem; --hbd-space-8: 5rem; --hbd-space-9: 7.5rem;
  --hbd-radius-xs: 8px; --hbd-radius-card: 10px; --hbd-radius-s: 12px; --hbd-radius-m: 16px; --hbd-radius-l: 24px;
  --hbd-radius-pill: 999px;
  /* Stars (the shared hbd_stars() component): live's Google rating row is five 20px stars 2px apart.
     The glyph is scaled inside its own box because the theme's star carries more padding in its
     24 × 24 viewBox than live's art does — ×1.17 turns our 15.87px of ink into live's 18.57. A caller
     with a different measurement (the clinic card's 14px row) passes its own size and gap. */
  --hbd-star-size: 20px; --hbd-star-gap: 2px; --hbd-star-scale: 1.17;
  --hbd-hairline: 1px solid var(--hbd-grey-200);
  --hbd-shadow-card: 0 10px 30px rgba(36, 52, 86, .08);
  /* Live mega-menu panel shadow (two layers, measured on hormonesbydesign.com). */
  --hbd-shadow-menu: 0 -10px 10px -5px rgba(0, 0, 0, .06), 0 10px 15px -5px rgba(0, 0, 0, .12);
  /* Live Locations drawer shadow (Tailwind shadow-lg). */
  --hbd-shadow-drawer: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  /* Header metrics (live: 68px bar, 20px gutters, 170/120px logo, 800px mega panel). */
  --hbd-header-h: 68px; --hbd-header-gutter: 20px; --hbd-header-max: 1440px;
  --hbd-menu-panel-w: 800px; --hbd-menu-panel-col: 318px;
  /* Locations drawer: 400px from 640px up, full viewport width below (see assets/css/drawer.css). */
  --hbd-drawer-w: 400px;
  --hbd-ease: cubic-bezier(.4, 0, .2, 1); --hbd-dur: .2s;
  /* gradients */
  --hbd-grad-peach-sky: linear-gradient(135deg, #F5E8D8 0%, #FFF9F3 45%, #DCF0F9 100%);
  --hbd-grad-orange: radial-gradient(120% 80% at 50% 0%, #F7A65C 0%, #EA772D 55%, #F09A55 100%);
  --hbd-grad-sky-rings: radial-gradient(circle at 50% 50%, #FFFFFF 0 18%, #DCF0F9 19% 36%, #E8F4F8 37% 54%, #DCF0F9 55% 72%, #F6FBFD 73%);
  --hbd-grad-blue-dark: linear-gradient(180deg, #7B9DC6 0%, #4C6C93 60%, #243456 100%);
  --hbd-grad-teal-orange: linear-gradient(180deg, #6FC2D8 0%, #F0A36A 55%, #E86A2A 100%);
  /* /treatment/hormone-replacement-therapy/ `#section-whyInjections` — a four-corner wash live paints
     behind that section. There is no file to side-load (it is not an <img>, so it is not in the
     crawl), so it is a gradient stack here, the way --hbd-grad-contact-art already is. The fit is the
     four corners and the two mid-edges read off docs/audit/pages/shots/hrt/1440.png at the section's
     own box: TL #498FAE · TR #D8CDCC · BL #C06546 · BR #F9A262, with the top edge running light blue
     through cream and the bottom through a brighter orange (docs/audit/widgets/split-content.md §12.2).
     Base = the right-hand column; the two radial layers bring the blue and rust corners back. */
  --hbd-grad-bhrt-wash:
    radial-gradient(125% 115% at 0% 0%, #498FAE 0%, rgba(73, 143, 174, .55) 34%, rgba(73, 143, 174, 0) 72%),
    radial-gradient(125% 115% at 0% 100%, #C06546 0%, rgba(192, 101, 70, .55) 34%, rgba(192, 101, 70, 0) 72%),
    radial-gradient(90% 70% at 30% 100%, rgba(250, 136, 81, .55) 0%, rgba(250, 136, 81, 0) 70%),
    radial-gradient(85% 60% at 28% 0%, rgba(139, 197, 218, .6) 0%, rgba(139, 197, 218, 0) 70%),
    linear-gradient(180deg, #D8CDCC 0%, #F6D9C6 45%, #F9A262 100%);
  /* Forum Health card at the bottom of the Locations drawer (measured live). */
  /* /our-story/'s pull-quote block: sky-3 at the top, peach at the bottom (measured). */
  --hbd-grad-sky-peach: linear-gradient(180deg, #E8F4F8 0%, #F5E8D8 100%);
  /* The bottom-weighted ink wash /our-story/'s age-phase cards carry: clear photograph above, solid
     ground under the title and the pills (docs/audit/widgets/image-cards.md §12.1). */
  --hbd-grad-card-ink: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .55) 100%);
  --hbd-grad-forum-drawer: linear-gradient(105.09deg, #F7C87A -2.72%, #EA772D 95.63%);
}

/* Hero (hbd-hero) — the page-hero scale. Every value measured on hormonesbydesign.com 2026-09-17 at
   1440/1024/768/390; the page each number came from is named inline. Tables: docs/audit/widgets/hero.md.
   The scale is a set of discrete steps, not a clamp(): live jumps between authored sizes rather than
   interpolating, and matching that is what makes the delta table zero. */
:root {
  /* Hero gutter: 20px ≤767 · 60px 768–1279 · 80px ≥1280 (measured on home, HRT, virtual-care, austin).
     Deliberately *not* --hbd-gutter, whose clamp() lands on 56.32px at 1024 and 42.24px at 768. */
  --hbd-hero-gutter: 20px;
  /* /our-story/ (centered) keeps a 16px gutter at every width. */
  --hbd-hero-gutter-centered: 16px;
  /* H1: 40/44 ≤767 · 48/52.8 768–1023 · 64/70.4 ≥1024 (home + treatment/hormone-replacement-therapy). */
  --hbd-hero-h1: 40px; --hbd-hero-h1-lh: 44px;
  /* The 48px step on its own — /service/membership/ and every /location/* page hold it at all widths. */
  --hbd-hero-h1-md: 48px; --hbd-hero-h1-md-lh: 52.8px;
  /* /our-story/: 28/30.8 ≤767 · 40/44 768–1023 · 56/61.6 ≥1024, and weight 400 rather than 300. */
  --hbd-hero-h1-centered: 28px; --hbd-hero-h1-centered-lh: 30.8px;
  /* Eyebrow: EK Notice Classic 20/22 (membership, virtual-care); the location hero uses 16/19.2. */
  --hbd-hero-eyebrow: 20px; --hbd-hero-eyebrow-lh: 22px;
  --hbd-hero-eyebrow-loc: 16px; --hbd-hero-eyebrow-loc-lh: 19.2px;
  /* Subheading: home's h2, EK Notice Classic 18/25.2 weight 500. */
  --hbd-hero-sub: 18px; --hbd-hero-sub-lh: 25.2px;
  /* The same slot as a dashed pill — `/service/digital-thermography/`'s `<h4>` under the H1
     (docs/audit/widgets/hero.md §4.2). Measured off the live 1440 screenshot: the outline box is
     x 80–508 × y 362–400, i.e. **428 × 38**, and 38 = 20 (line) + 2 × 8 (padding) + 2 × 1 (border).
     The width pins the type: the 46-character label's ink spans 384px, which is 46 × 8.4 — the mono
     face at **14px with letter-spacing: normal**, not .hbd-pill's 12px on 6% tracking (that would be
     364 and 425 respectively). */
  --hbd-hero-pill: 14px; --hbd-hero-pill-lh: 20px; --hbd-hero-pill-pad: 8px 20px;
  /* Body text: 16/22.4 + 2.5% tracking (home, HRT); 14/21 on the split hero; 18/21.6 → 14/16.8 on a
     location hero; 18/28 for the centered intro. */
  --hbd-hero-text: 16px; --hbd-hero-text-lh: 22.4px; --hbd-hero-text-ls: .025em;
  --hbd-hero-text-s: 14px; --hbd-hero-text-s-lh: 21px;
  /* The service banners' own steps (hero.md §8.4): virtual-care's 14/21 becomes 16/24 on the phone;
     thermography's body is 18/27 in a 580px column; both banners keep the H1 at 64 from 768 and put
     32px between the copy's groups. The pill is capped at 73vw on the phone. */
  --hbd-hero-text-sm-phone: 16px; --hbd-hero-text-sm-phone-lh: 24px;
  --hbd-hero-text-l: 18px; --hbd-hero-text-l-lh: 27px; --hbd-hero-text-col-l: 580px;
  --hbd-hero-banner-h1: 64px; --hbd-hero-banner-h1-lh: 70.4px; --hbd-hero-banner-gap: 32px;
  --hbd-hero-pill-max-sm: 73vw;
  --hbd-hero-text-loc: 18px; --hbd-hero-text-loc-lh: 21.6px;
  /* The same location paragraph drops to 14/16.8 below 1280. */
  --hbd-hero-text-loc-s: 14px; --hbd-hero-text-loc-s-lh: 16.8px;
  --hbd-hero-intro: 18px; --hbd-hero-intro-lh: 28px;
  /* Vertical rhythm between content blocks: 24px everywhere except the location hero's 20px, which
     then leaves 70px before its button. */
  --hbd-hero-gap: 24px; --hbd-hero-gap-loc: 20px; --hbd-hero-gap-loc-actions: 70px;
  /* Buttons sit 20px apart on home, 8px apart on the split hero. */
  --hbd-hero-actions-gap: 20px; --hbd-hero-actions-gap-s: 8px;
  /* Column widths: location text column 638.34 → 640 (live uses a percentage of the 1280 box);
     paragraph max-widths 500 (home/HRT), 530 (membership), 620 (austin ≥1280); centered 768/672. */
  --hbd-hero-col: 640px; --hbd-hero-col-md: 500px; --hbd-hero-col-sm: 480px;
  --hbd-hero-text-col: 500px; --hbd-hero-text-col-split: 530px; --hbd-hero-text-col-loc: 620px;
  --hbd-hero-head-col-centered: 768px; --hbd-hero-intro-col-centered: 672px;
  /* Vertical padding, per layout: home 122px (content vertically centred inside it) / 72px on phones;
     location 200/100 (top-aligned); split 120/60; centered 128/80 with no bottom padding. */
  --hbd-hero-pad-sm: 72px;
  /* From 768 the cover hero's vertical padding is only a floor under copy taller than the box — live's
     own 122px is inert there (widget stylesheet, §5) — so it is the smallest gap the copy may have. */
  --hbd-hero-pad-min: 40px;
  --hbd-hero-pad-loc: 200px; --hbd-hero-pad-loc-sm: 100px;
  --hbd-hero-pad-split: 120px; --hbd-hero-pad-split-sm: 60px;
  --hbd-hero-pad-centered: 128px; --hbd-hero-pad-centered-sm: 80px;
  /* 547 ÷ 700 — the step live takes between 1280 and 1024 on home and on HRT. Written as the division
     rather than as `.78`, which is 546 and left `/treatment/hormone-replacement-therapy/`'s hero 1px
     short of live at 768 (docs/audit/widgets/hero.md §7). It only binds where the min-height wins over
     the padding, so home's and thermography's padding-driven boxes are untouched. */
  --hbd-hero-scale-md: calc(547 / 700);
  /* Split hero image: 708×472 at 1440 → 3/2, 8px radius; 680px wide while stacked at 768; the two
     columns are separated by 10px (447 + 10 + 447 = 904 at 1024). */
  --hbd-hero-media-ratio: 3 / 2;
  --hbd-hero-media-w: 708px; --hbd-hero-media-w-md: 680px; --hbd-hero-split-gap: 10px;
  /* …except on the one live split hero whose photo is on the LEFT — /service/virtual-care/'s
     `#section-consultationSection`, measured 2026-09-20 (docs/audit/widgets/hero.md §4.1): its
     columns are 610 + 60 + 610 at 1440 and 422 + 60 + 422 at 1024, and the stacked gap below 1024 is
     the same 60 (the text starts 60px under the photo at 768 and 390). One number, two axes. */
  --hbd-hero-split-gap-wide: 60px;
  /* The details card's top edge is 79px above the media's bottom edge at 768+ (location/austin:
     media 760, card top 681) and 110px above it on a phone (media 923, card top 813). The same page
     grows its media band by 923 ÷ 760 below 768. */
  --hbd-hero-details-lift: 79px; --hbd-hero-details-lift-sm: 110px;
  --hbd-hero-scale-sm: 1.215;
  /* The numbered list on the split hero: 32px marker, 16px gaps (utilities.css ships 28/14/12). */
  --hbd-hero-marker: 32px; --hbd-hero-marker-gap: 16px;

  /* ------------------------------------------------------------------ hero: the /our-story/ strip
     The two auto-scrolling image rows under the centred heading on /our-story/ #section-ourStoryBanner.
     Measured 2026-09-21 (Plan 5 Task 6, docs/audit/widgets/hero.md §4.3): the cards are flush — the
     pitch IS the card width at every width — and only the two rows are separated, by 6px. The bottom
     inset is what live's pinned section height leaves under row 2; at 1024 and 390 live leaves a
     negative one (its strip overflows the box it pins), which is §7's standing divergence and is why
     those two steps are 0 here rather than a negative number we cannot draw. */
  --hbd-hero-strip-card-w: 144px; --hbd-hero-strip-card-h: 96.33px;
  --hbd-hero-strip-row-gap: 6px; --hbd-hero-strip-top: 48px; --hbd-hero-strip-bottom: -15.05px;
  /* The pitch is flush (card width == pitch, measured), so the gutter between two photographs is drawn
     inside the pitch: 4px either side leaves the 8px of ground production shows between them, and the
     photo keeps its measured width minus that. The row gap above is production's own 6px and is
     horizontal-only here — production insets nothing vertically. */
  --hbd-hero-strip-inset: 0px; --hbd-hero-strip-radius: var(--hbd-radius-s);
  /* Live drives its two tracks with an 8s linear transform transition per step (an embla autoplay),
     so a loop duration cannot be read off one frame — this is the rate that matches the capture and
     is the one number in this block that is chosen rather than measured (§4.3). */
  --hbd-hero-strip-speed: 60s;

  /* ------------------------------------------------- hero: the `cover-column` layout (/pincc/)
     #section-pinccSection — the logo/heading/buttons column that sits on the hero photograph beside
     the stat-cards marquee. Measured 2026-09-21 (docs/audit/widgets/hero.md §4.4). The column's own
     gutter is the shared --hbd-hero-gutter (20/60/60/80 — live's exactly); these are the parts that
     are this layout's own. */
  --hbd-hero-cc-logo-w: 212px; --hbd-hero-cc-logo-h: 120px;
  --hbd-hero-cc-h1: 32px; --hbd-hero-cc-h1-lh: 32px;
  --hbd-hero-cc-sub: 24px; --hbd-hero-cc-sub-lh: 24px;
  --hbd-hero-cc-gap: 24px;          /* heading → sub-line, at every width */
  --hbd-hero-cc-actions-gap: 40px;  /* sub-line → buttons */
  --hbd-hero-cc-pad: 58px;          /* top padding while the column is stacked above the marquee */
  /* …and what the row itself adds while the two are stacked: the distance from the buttons to the
     first card, and the space under the rail (docs/audit/pages/pincc.md §3.1). */
  --hbd-page-hero-gap-sm: 73px; --hbd-page-hero-pad-b: 0px; --hbd-page-hero-h-sm: 881px;
}
@media (min-width: 768px) { :root {
  --hbd-hero-gutter: 60px; --hbd-hero-h1: 48px; --hbd-hero-h1-lh: 52.8px; --hbd-hero-h1-centered: 40px; --hbd-hero-h1-centered-lh: 44px;
  --hbd-hero-strip-card-w: 164px; --hbd-hero-strip-card-h: 110.5px; --hbd-hero-strip-bottom: 25px; --hbd-hero-strip-inset: 4px;
  --hbd-hero-cc-pad: 80px;
  /* …and the stacked /pincc/ row's own three, beside their base declarations above. */
  --hbd-page-hero-gap-sm: 100px; --hbd-page-hero-pad-b: 39px; --hbd-page-hero-h-sm: 0px;
} }
@media (min-width: 1024px) { :root {
  /* The /pincc/ hero row: two equal columns, live's 58px gutter and its 700px band, with the 8px the
     marquee leaves at the right edge (docs/audit/pages/pincc.md §3.1). */
  --hbd-page-hero-gap: 58px; --hbd-page-hero-h: 700px; --hbd-page-hero-edge: 8px;
  /* Production's `max-w-[1440px] mx-auto` on the band's content layer: above this the window's extra
     width becomes outer margin, not a wider hero. The photograph behind it still spans the window. */
  --hbd-page-hero-max: 1440px;
  --hbd-hero-h1: 64px; --hbd-hero-h1-lh: 70.4px; --hbd-hero-h1-centered: 56px; --hbd-hero-h1-centered-lh: 61.6px;
  --hbd-hero-strip-card-w: 284px; --hbd-hero-strip-card-h: 195.5px; --hbd-hero-strip-top: 96px; --hbd-hero-strip-bottom: -6.19px;
  --hbd-hero-cc-actions-gap: 36px;
} }
@media (min-width: 1280px) { :root {
  --hbd-page-hero-gap: 42px; --hbd-page-hero-edge: 14px;
  --hbd-hero-gutter: 80px;
  /* The strip card is a proportion of the viewport on production, not a fixed box: the crawl measured
     313 × 216.03 at 1440, and the client reports ~417 × 289 on a 1920 window — 313 ÷ 1440 × 1920 = 417.3
     and 216.03 ÷ 1440 × 1920 = 288.0, the same card on a wider screen (QC, 2026-09-21). So the width is
     expressed as that proportion, which reproduces the measured pair exactly at 1440 and grows with the
     window above it. The `max()` floor holds every width at or below 1440 at the measured value, because
     1440 is the narrowest point in this band production was actually measured at — a card that shrank
     towards 1280 would be a guess, and this one is not. */
  --hbd-hero-strip-card-w: max(313px, calc(100vw * 313 / 1440)); --hbd-hero-strip-card-h: max(216.03px, calc(100vw * 216.03 / 1440)); --hbd-hero-strip-bottom: 2.75px;
  /* The gutter rides the same proportion: 4px either side at 1440 is the 8px measured off production's
     own screenshot, and 10.7px at 1920 is the "about 10px" the client read there. */
  --hbd-hero-strip-inset: max(4px, calc(100vw * 4 / 1440));
  --hbd-hero-cc-h1: 48px; --hbd-hero-cc-h1-lh: 48px; --hbd-hero-cc-actions-gap: 40px;
} }

/* Testimonials (hbd-testimonials) — the patient-quote carousel. Every value measured on
   hormonesbydesign.com 2026-09-17 at 1440/1024/768/390 on `/` and re-measured identically on
   `/location/austin/`. Tables: docs/audit/widgets/testimonials.md. */
:root {
  /* The section gutter live uses on every measured section: 20 ≤767 · 60 768–1279 · 80 ≥1280. It is the
     same scale Task 2 shipped as --hbd-hero-gutter; this is the shared name later widgets use, and the
     hero's own token should be folded into it in a follow-up. */
  --hbd-row-gutter: 20px;
  /* Vertical padding: 80px top and bottom ≥768, 40px below. */
  --hbd-testimonials-pad: 40px;
  /* Heading: Loretta Light 300, 48/52.8 at *every* width (it does not step down on a phone). */
  --hbd-testimonials-heading: 48px; --hbd-testimonials-heading-lh: 52.8px;
  /* 31px under the heading to the rule, and 31px again from the rule to the first card. */
  --hbd-testimonials-head-gap: 31px;
  /* Arrows: two 40px navy circles 8px apart, glyph 14px, right edge 40px inside the content box, and
     the pair's bottom edge 64px above the first card (16px on a phone, where they wrap under the heading). */
  --hbd-testimonials-nav-size: 40px; --hbd-testimonials-nav-gap: 8px; --hbd-testimonials-nav-inset: 40px;
  /* Glyph: live draws 13.33 × 12.96 of ink in *both* buttons (its prev <svg> box is 14 and its next
     one 20, but the path inside each is the same size). `arrow-right-bold` — the production filled
     path — puts 12.714 × 12.721 of its 14-unit viewBox in ink, so a 14.5px box renders 13.17 × 13.17:
     within 0.21px of live in both directions, where the stroked 24-unit `arrow-right` managed 9.33 × 8.17. */
  --hbd-testimonials-nav-icon: 14.5px; --hbd-testimonials-nav-lift: 16px;
  /* Card pitch = content ÷ cards-per-view; the 10px gutter lives inside it (417 + 10 = 427 at 1440).
     Below 768 the single card fills the content box and there is no gutter at all. */
  --hbd-testimonials-gap: 0px;
  /* The patient photo floats centred on the art background, inset 64px ≥1024 and 32px below it. */
  --hbd-testimonials-photo-inset: 32px;
  /* ≤768 live serves square crops of both images; from 1024 each takes its own aspect ratio, stated
     per card as --hbd-tst-art / --hbd-tst-photo. */
  --hbd-testimonials-art-ratio: 1;
  /* Quote: Neue Haas 18/27 with 20px of padding above and below. */
  --hbd-testimonials-quote: 18px; --hbd-testimonials-quote-lh: 27px; --hbd-testimonials-quote-pad: 20px;
  /* Name + label: EK Notice Classic 14/20, uppercase, 8px apart. */
  --hbd-testimonials-meta: 14px; --hbd-testimonials-meta-lh: 20px; --hbd-testimonials-meta-gap: 8px;
}
@media (min-width: 768px) { :root { --hbd-row-gutter: 60px; --hbd-testimonials-pad: 80px; --hbd-testimonials-gap: 10px; --hbd-testimonials-nav-lift: 64px; } }
@media (min-width: 1024px) { :root { --hbd-testimonials-photo-inset: 64px; } }
@media (min-width: 1280px) { :root { --hbd-row-gutter: 80px; } }

/* FAQ (hbd-faq) — the accordion. Every value measured on hormonesbydesign.com 2026-09-17 at
   1440/1024/768/390 on `/faq/` and `/` (and byte-compared against the six location pages and
   /treatment/thyroid-balancing/, which render the same component and the same copy).
   Tables: docs/audit/widgets/faq.md. */
:root {
  /* Row: 16px above and below the question, 24px from the question to its answer — and that 24px is
     there whether the panel is open or closed, which is what makes a closed row 95px tall. */
  --hbd-faq-row-pad: 16px; --hbd-faq-row-gap: 24px;
  /* The hairline between rows is drawn on pure black at 20%, not on ink. */
  --hbd-faq-rule: 1px solid var(--hbd-black-a20);
  /* Question: Neue Haas 20/20 on a 38px-minimum row (a two-line question makes it 40). */
  --hbd-faq-q: 20px; --hbd-faq-q-lh: 20px; --hbd-faq-q-min-h: 38px;
  /* Icon: a 38px dashed circle, 8px of padding around a 20px plus/minus. The circle's border is ink
     at 40% while the row is closed and full ink while it is open. */
  --hbd-faq-icon: 38px; --hbd-faq-icon-pad: 8px; --hbd-faq-icon-glyph: 20px;
  --hbd-faq-icon-border: var(--hbd-ink-a40); --hbd-faq-icon-border-open: var(--hbd-ink);
  /* Answer: 16/22.4 in pure black (the question above it is ink). */
  --hbd-faq-answer: 16px; --hbd-faq-answer-lh: 22.4px; --hbd-faq-answer-color: var(--hbd-black);
  /* Between two answer paragraphs: live's own blank line, i.e. one line-height (see the widget CSS). */
  --hbd-faq-answer-gap: 22.4px;
  /* The panel's height and opacity animate together over 0.3s on the shared easing curve. */
  --hbd-faq-dur: .3s;
  /* Heading above the list: Loretta 40/48 at every width, 40px clear of the list (the 41px measured
     between them is this plus the 1px rule above the first row). */
  --hbd-faq-heading: 40px; --hbd-faq-heading-lh: 48px; --hbd-faq-head-gap: 40px;
  /* The /faq/ side panel: the heading inside it is 40/60 on a phone and at 768, 56/84 from 1024 up. */
  --hbd-faq-aside-heading: 40px; --hbd-faq-aside-heading-lh: 60px;
  /* Column gap: 40px while stacked, 80px once the two columns sit side by side at 1280. */
  --hbd-faq-aside-gap: 40px;
  /* Panel height while stacked: 350 on a phone, 300 at 768, 519 at 1024; from 1280 it is a column and
     takes the taller of its content and 800px. */
  --hbd-faq-aside-h: 350px; --hbd-faq-aside-min-h: 800px;
  /* Footer: 16px between the sentence and the button; the sentence is 16/24 ink. */
  --hbd-faq-footer-gap: 16px; --hbd-faq-footer-text: 16px; --hbd-faq-footer-text-lh: 24px;
}
@media (min-width: 768px) { :root { --hbd-faq-aside-h: 300px; } }
@media (min-width: 1024px) { :root { --hbd-faq-aside-h: 519px; --hbd-faq-aside-heading: 56px; --hbd-faq-aside-heading-lh: 84px; } }
@media (min-width: 1280px) { :root { --hbd-faq-aside-gap: 80px; } }

/* Offerings (hbd-offerings) — the "Our offerings:" tile row and /location/austin/'s image cards.
   Every value measured on hormonesbydesign.com 2026-09-17 at 1440/1280/1024/768/640/390 on `/` and
   `/location/austin/` (the six other location pages render the same icon tiles as home, byte for byte
   apart from the copy). Tables: docs/audit/widgets/offerings.md §2–§3. */
:root {
  /* Both variants put 20px between the heading and the row — live's own section flex gap. */
  --hbd-offerings-head-gap: 20px;

  /* --- icon-tiles ------------------------------------------------------------------------ */
  /* Section padding: 40px top and bottom below 1280, 80px from it (the gutter is --hbd-row-gutter). */
  --hbd-offerings-pad: 40px;
  /* Heading: EK Notice Classic 20/30 weight 500 in navy, at *every* width. */
  --hbd-offerings-heading: 20px; --hbd-offerings-heading-lh: 30px;
  /* 8px between tiles, in a row and while stacked. */
  --hbd-offerings-gap: 8px;
  /* A 150px pill with a 10px radius; each tile is 1fr capped at 417px, which is why three of them
     leave 13px unused at 1440 rather than filling the 1280 box. */
  --hbd-offerings-tile-h: 150px; --hbd-offerings-tile-max: 417px;
  /* 32px of side padding everywhere except the 1024–1279 band, where live drops it to 16. */
  --hbd-offerings-tile-pad: 32px;
  /* Gap inside the tile: 4px on a phone, 8px from 640. */
  --hbd-offerings-tile-gap: 4px;
  /* Title: Loretta Light 300, 20/28 below 768 and 24/32 from it, in a box capped at 72px (96 ≥1280). */
  --hbd-offerings-title: 20px; --hbd-offerings-title-lh: 28px; --hbd-offerings-title-max: 72px;
  /* Icon: 90px on a phone, 135px from 640, object-fit: contain. */
  --hbd-offerings-icon: 90px;
  /* Arrow: a 38px navy circle, 12px of padding around a 14px glyph — arrow-right-bold puts
     12.714 × 12.721 of its 14-unit viewBox in ink, which is live's measured 12.71 × 12.72. */
  --hbd-offerings-arrow: 38px; --hbd-offerings-arrow-pad: 12px; --hbd-offerings-arrow-glyph: 14px;

  /* --- image-cards ----------------------------------------------------------------------- */
  /* Heading: EK Notice Classic 40/40 weight 400 in navy (32/32 ≤640), tracking 0.5% of the size.
     Live reports `0.5%`; .005em is the same 0.2px at 40px (docs/audit/widgets/offerings.md §5.3). */
  --hbd-offerings-cards-heading: 32px; --hbd-offerings-cards-heading-lh: 32px;
  --hbd-offerings-cards-heading-ls: .005em;
  /* Grid: 20px gap, one column below 1280 and three from it. */
  --hbd-offerings-cards-gap: 20px;
  /* Card: 24px of padding on a 10px sky radius; 8px between photo, text and button block. */
  --hbd-offerings-card-pad: 24px; --hbd-offerings-card-gap: 8px;
  /* Photo: an 8px-radius crop, 170px tall on a phone, 300px 768–1279, 200px from 1280. */
  --hbd-offerings-media-h: 170px; --hbd-offerings-media-radius: var(--hbd-radius-xs);
  /* Card title: Loretta Light 30/36 weight 300 — it does not step at any width. */
  --hbd-offerings-card-title: 30px; --hbd-offerings-card-title-lh: 36px;
  /* Description: Neue Haas 14/19.6, 24px under the title. */
  --hbd-offerings-card-text: 14px; --hbd-offerings-card-text-lh: 19.6px; --hbd-offerings-card-text-gap: 24px;
  /* 24px above the button, which is pinned to the bottom of the card. */
  --hbd-offerings-card-action-pad: 24px;
}
@media (min-width: 640px) { :root { --hbd-offerings-tile-gap: 8px; --hbd-offerings-icon: 135px; } }
@media (min-width: 768px) { :root { --hbd-offerings-title: 24px; --hbd-offerings-title-lh: 32px; --hbd-offerings-cards-heading: 40px; --hbd-offerings-cards-heading-lh: 40px; --hbd-offerings-media-h: 300px; } }
@media (min-width: 1024px) { :root { --hbd-offerings-tile-pad: 16px; } }
@media (min-width: 1280px) { :root { --hbd-offerings-pad: 80px; --hbd-offerings-tile-pad: 32px; --hbd-offerings-title-max: 96px; --hbd-offerings-media-h: 200px; } }

/* CTA banner (hbd-cta-banner) — the full-bleed closing CTA. Every value measured on
   hormonesbydesign.com 2026-09-17 at 1440/1280/1024/768/640/390 on a blog post,
   /treatment/thyroid-balancing/ and /treatment/hormone-replacement-therapy/ — 46 live instances of
   one component, which agree row for row on everything the copy does not decide.
   Tables: docs/audit/widgets/cta-banner.md §2-§4. */
:root {
  /* The content box is exactly 650px tall from 768 up; below that it sizes from its content and only
     the section's own 612px floor applies. The 650 is per-instance (the Minimum height field). */
  --hbd-cta-min-h: 650px; --hbd-cta-min-h-sm: 612px;
  /* The `split` composition — /pincc/ #section-impactSection. Measured 2026-09-21
     (docs/audit/widgets/cta-banner.md §7): the photo half is 396 tall on a phone and 496 at 768, the
     copy panel a flat 400 under it, and from 1024 the two are halves of a 603px band with a 4px seam.
     The copy block is vertically centred inside the panel's padding at every width. */
  --hbd-cta-split-photo-h: 396px; --hbd-cta-split-panel-h: 400px;
  --hbd-cta-split-pad: 40px 20px; --hbd-cta-split-gap: 24px; --hbd-cta-split-actions-gap: 16px;
  --hbd-cta-split-seam: 4px; --hbd-cta-split-h-min: 603px;
  /* The seam is a pink rule on production, sampled #F8B4E7 off its own screenshot. */
  --hbd-cta-split-seam-color: var(--hbd-pink);
  /* The copy box is centred in the panel and stops growing at the panel's own design width (720 at
     1440, the measured 500 plus its 110 either side), so above 1440 the extra width becomes margin
     rather than a wider column. Inert at 1440 and below, where the panel is already this wide or
     narrower (512 at 1024). */
  --hbd-cta-split-content-max: 720px;
  --hbd-cta-split-h: 40px; --hbd-cta-split-h-lh: 44px;
  --hbd-cta-split-text: 20px; --hbd-cta-split-text-lh: 28px;
  /* Vertical padding. Live declares 221px from 1024 up, but it is inert: live also fixes the box at
     650px, so its own children overflow the padding box and justify-content re-centres them. 131px
     everywhere reproduces every measured y to the hundredth — docs/audit/widgets/cta-banner.md §5.1. */
  --hbd-cta-pad: 131px;
  /* The content box caps at 1440, wider than the 1280 the rest of the site uses, and keeps the
     site-wide 20/60/80 gutter scale (--hbd-row-gutter) inside it. */
  --hbd-cta-max: 1440px;
  /* One rhythm: 24px between the heading, the paragraph and the buttons, and between the buttons. */
  --hbd-cta-gap: 24px;
  /* Heading: Loretta Light 300, 48/52.8 at *every* width — it does not step down on a phone. */
  --hbd-cta-heading: 48px; --hbd-cta-heading-lh: 52.8px;
  /* Paragraph (the Hormone Therapy banner): Neue Haas 16/20.8 on a phone, 18/23.4 from 768 — both
     exactly 1.3 — in a column capped at 420px at 768 and 550px from 1024. Its first line sits 4px
     under the block's top edge. */
  --hbd-cta-text: 16px; --hbd-cta-text-lh: 20.8px; --hbd-cta-text-col: 100%; --hbd-cta-text-gap: 4px;
  /* The outline pill is padded 12px 16px where .hbd-btn ships 12px 24px, and bordered white at 90%. */
  --hbd-cta-btn-pad-2: 16px;
}
@media (min-width: 768px) { :root { --hbd-cta-text: 18px; --hbd-cta-text-lh: 23.4px; --hbd-cta-text-col: 420px; --hbd-cta-split-photo-h: 496px; --hbd-cta-split-pad: 60px; } }
@media (min-width: 1024px) { :root { --hbd-cta-split-pad: 80px 60px; } }
/* 110px inside the panel, not 80: production's copy starts at x=830 with the panel's edge at 720. */
@media (min-width: 1280px) { :root { --hbd-cta-split-pad: 80px 110px; } }
@media (min-width: 1024px) { :root { --hbd-cta-text-col: 550px; } }

/* Image cards (hbd-image-cards) — the overlay photo-card sections. Every value measured on
   hormonesbydesign.com 2026-09-17 at 1440/1280/1024/768/640/390 on /treatment/thyroid-balancing/
   (the slider and the tall cards), /location/austin/ (the 2 × 2 grid) and /service/virtual-care/
   (the 4-up). Tables: docs/audit/widgets/image-cards.md §2–§4. */
:root {
  /* 40px between the head block and the cards in all three variants that have a head. */
  --hbd-cards-head-gap: 40px;

  /* --- slider -------------------------------------------------------------------------- */
  /* Full-bleed: 40px of vertical padding and a *left* gutter only — 30 ≤767 · 60 768–1279 · 80 ≥1280.
     Deliberately not --hbd-row-gutter, whose phone step is 20, not 30. */
  --hbd-cards-slider-pad: 40px; --hbd-cards-slider-gutter: 30px;
  /* Track: flex, 20px between cards, sized to its content (2460 at 1440 = 4 × 600 + 3 × 20). */
  --hbd-cards-slider-gap: 20px;
  /* Card: 353 × 350 below 1024, 600 × 350 from it; 10px radius, photo cropped from the right. */
  --hbd-cards-slider-card-w: 353px; --hbd-cards-slider-card-h: 350px;
  --hbd-cards-slider-radius: var(--hbd-radius-card);
  /* The copy block is inset 24px and shrink-to-fit, so it is as wide as the pill row (421.05 at 1440). */
  --hbd-cards-slider-inset: 24px; --hbd-cards-slider-body-gap: 16px;
  /* Title: Loretta Light 24/32 below 1024, 34/45.3333 from it; computed weight 400. */
  --hbd-cards-slider-title: 24px; --hbd-cards-slider-title-lh: 32px;
  /* Label: Founders Grotesk Mono 14/20, uppercase, no tracking, 12px above the pills. */
  --hbd-cards-slider-label: 14px; --hbd-cards-slider-label-lh: 20px; --hbd-cards-slider-label-gap: 12px;
  /* Pill: 14/20 mono in a 1px dashed 40%-white outline, padded 8px 12px — 38px tall. */
  --hbd-cards-slider-pill: 14px; --hbd-cards-slider-pill-lh: 20px;
  --hbd-cards-slider-pill-pad-y: 8px; --hbd-cards-slider-pill-pad-x: 12px;
  /* Scroll control: live's 80 × 102 SVG is a 34px white disc with a 10 × 10 ink arrow in empty space.
     The disc's right edge is 12px inside the viewport and its top edge 154px below the track's. */
  --hbd-cards-slider-nav: 34px; --hbd-cards-slider-nav-glyph: 14px;
  --hbd-cards-slider-nav-inset: 12px; --hbd-cards-slider-nav-top: 154px;

  /* --- tall-overlay --------------------------------------------------------------------- */
  /* 80px of vertical padding under a 1px hairline on black at 20%, drawn inside the gutter. */
  --hbd-cards-tall-pad: 80px;
  --hbd-cards-tall-head-gap: 20px;
  /* Heading: Loretta Light 48/52.8 weight 300, ink. Intro: Neue Haas 16/24, capped at 470 from 1024. */
  --hbd-cards-tall-heading: 48px; --hbd-cards-tall-heading-lh: 52.8px;
  --hbd-cards-tall-intro: 16px; --hbd-cards-tall-intro-lh: 24px; --hbd-cards-tall-intro-max: 100%;
  /* Grid: 40px gap, three columns from 1024. Card: 600px tall at every width, 12px radius. */
  /* The scrolling benefits track shows its bar on production — a plain grey rule, not the hidden
     scroller the other carousels use (client QC, 2026-09-21). */
  --hbd-cards-scroll-bar: var(--hbd-grey-300); --hbd-cards-scroll-bar-h: 8px;
  /* Space between the cards and the bar, inside the scroller so it scrolls with them. */
  --hbd-cards-scroll-gap: 20px;
  --hbd-split-panel-max: 1440px;
  --hbd-cards-slider-nav-shadow: 0 2px 8px rgba(29, 23, 24, .16);
  --hbd-cards-tall-gap: 40px; --hbd-cards-tall-h: 600px; --hbd-cards-tall-radius: var(--hbd-radius-s);
  /* Scrim: a flat 20% black with its own 10px radius (live draws it 2px tighter than the photo). */
  --hbd-cards-tall-scrim-radius: var(--hbd-radius-card);
  /* Copy inset 30px, title 32/32 capitalised, caption 14/16.8 — none of them step at any width. */
  --hbd-cards-tall-inset: 30px;
  --hbd-cards-tall-title: 32px; --hbd-cards-tall-title-lh: 32px;
  --hbd-cards-tall-caption: 14px; --hbd-cards-tall-caption-lh: 16.8px;

  /* --- tall-overlay-scroll ---------------------------------------------------------------- */
  /* /treatment/hormone-replacement-therapy/ `#section-serviceBenefitsSection2`, measured 2026-09-20
     off that page's single production load (docs/audit/pages/shots/hrt/, widget doc §11). It is
     `tall-overlay`'s own card, head and padding — the section is 8px of scrollbar away from
     /treatment/thyroid-balancing/'s at 1440 and 1024 — in a track that scrolls instead of a
     three-column grid. The card is a fixed width from 1024 and the gutter-to-gutter column below it,
     which is why there is exactly one token here. */
  --hbd-cards-tscroll-card-w: 420px;

  /* --- tall-overlay-pair ----------------------------------------------------------------- */
  /* /location/austin/ and /location/san-antonio/ "Thermal Imaging", measured 2026-09-19 at
     1440/1024/768/390 (docs/audit/widgets/image-cards.md §9). 80px of vertical padding at every
     width; the copy column is a fixed 400px beside the cards from 1280 and above them below it. */
  --hbd-cards-pair-pad: 80px;
  --hbd-cards-pair-copy-w: 100%; --hbd-cards-pair-copy-gap: 40px;
  /* Copy column: eyebrow 8px above the heading, then 32px to the paragraph and 32px to the buttons,
     which are 16px apart (and stack below 768, where live gives them 16px too). */
  --hbd-cards-pair-eyebrow-gap: 8px; --hbd-cards-pair-block-gap: 32px; --hbd-cards-pair-btn-gap: 16px;
  /* Eyebrow: EK Notice Classic 20/24 ink, capitalised. Heading: Loretta Light 48/57.6 (120%) weight
     300. Paragraph: Neue Haas 18/27. None of the three steps at any width. */
  --hbd-cards-pair-eyebrow: 20px; --hbd-cards-pair-eyebrow-lh: 24px;
  --hbd-cards-pair-heading: 48px; --hbd-cards-pair-heading-lh: 57.6px;
  --hbd-cards-pair-intro: 18px; --hbd-cards-pair-intro-lh: 27px;
  /* The pair: 28px apart, one column below 768 and two from it; 600px tall on an 8px radius — not
     tall-overlay's 12 — and with no scrim at all. */
  --hbd-cards-pair-gap: 28px; --hbd-cards-pair-h: 600px; --hbd-cards-pair-radius: var(--hbd-radius-xs);
  /* Copy inset 24px top and bottom, nothing at the sides: the title is centred at the top and the
     caption is a 306px block centred 24px off the floor. Title Loretta 32/35.2 (110%) weight 300,
     caption Neue Haas 16/22.4 (140%), both white. */
  --hbd-cards-pair-inset: 24px 0;
  --hbd-cards-pair-title: 32px; --hbd-cards-pair-title-lh: 35.2px;
  --hbd-cards-pair-caption: 16px; --hbd-cards-pair-caption-lh: 22.4px; --hbd-cards-pair-caption-max: 306px;

  /* --- grid-2x2-overlay ------------------------------------------------------------------ */
  /* No top padding at all; 80px below. */
  --hbd-cards-2x2-pad: 80px;
  /* Head: 30px stacked, a 40px space-between row from 1024. Heading 48/48; intro 16/19.2. */
  --hbd-cards-2x2-head-gap: 30px;
  --hbd-cards-2x2-heading: 48px; --hbd-cards-2x2-heading-lh: 48px; --hbd-cards-2x2-heading-max: 100%;
  --hbd-cards-2x2-intro: 16px; --hbd-cards-2x2-intro-lh: 19.2px; --hbd-cards-2x2-intro-max: 100%;
  /* The lead-in line sits 40px under the head and 20px above the grid. */
  --hbd-cards-2x2-label-gap: 20px;
  /* Grid: 20px gap on a phone, 32px from 768; two columns from 1024. */
  --hbd-cards-2x2-gap: 20px;
  /* Card: 280px tall ≤767 · 320 768–1023 · 360 ≥1024, on a 16px radius. */
  --hbd-cards-2x2-h: 280px; --hbd-cards-2x2-radius: var(--hbd-radius-m);
  --hbd-cards-2x2-scrim: linear-gradient(rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, .65) 100%);
  --hbd-cards-2x2-pad-block: 32px; --hbd-cards-2x2-pad-inline: 24px;
  /* Caption: Loretta 22/26.4 ≤767 · 26/31.2 768–1023 · 28/33.6 ≥1024 (all 120%), computed weight 400,
     centred, capped at 70% of the padded box on a phone, its own width at 768, 300px from 1024. */
  --hbd-cards-2x2-caption: 22px; --hbd-cards-2x2-caption-lh: 26.4px; --hbd-cards-2x2-caption-max: 70%;

  /* --- four-up-side-caption --------------------------------------------------------------- */
  --hbd-cards-4up-pad: 80px;
  /* Head: 50px, stacked below 1024 and a space-between row aligned on its baseline edge above it.
     The two caps are absolute at both steps — 407/430 at 1024–1279, 530/550 from 1280. */
  --hbd-cards-4up-head-gap: 50px;
  --hbd-cards-4up-heading-max: 100%; --hbd-cards-4up-intro-max: 100%;
  /* Grid: 40px gap at every width, two columns from 1024. Card: 360px tall everywhere, 10px radius. */
  --hbd-cards-4up-gap: 40px; --hbd-cards-4up-h: 360px; --hbd-cards-4up-radius: var(--hbd-radius-card);
  --hbd-cards-4up-scrim: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .1));
  /* Copy inset 30px; title and caption stack 20px apart below 1280 and sit side by side above it. */
  --hbd-cards-4up-inset: 30px; --hbd-cards-4up-body-gap: 20px;
  /* Title: Loretta 32/35.2, dropping to 30/33 from 1280 — it gets smaller on a wider screen. */
  --hbd-cards-4up-title: 32px; --hbd-cards-4up-title-lh: 35.2px;
  --hbd-cards-4up-caption: 16px; --hbd-cards-4up-caption-lh: 19.2px; --hbd-cards-4up-caption-max: 240px;

  /* --- overlay-caption ------------------------------------------------------------------- */
  /* /service/membership/ "Our Patients Report", measured 2026-09-18 at 1440/1366/1280/1279/1100/
     1024/768/390 (docs/audit/widgets/image-cards.md §7). 40px of vertical padding at every width and
     24px between the head and the cards; the gutter is live's own 30 ≤767 · 60 768–1279 · 40 ≥1280 —
     neither --hbd-row-gutter (20/60/80) nor the slider's (30/60/80). */
  --hbd-cards-oc-pad: 40px; --hbd-cards-oc-gutter: 30px; --hbd-cards-oc-head-gap: 24px;
  --hbd-cards-oc-max: 1440px;
  /* Heading: EK Notice Classic 24/24 weight 400 in navy, tracking 0.5% of the size, at every width. */
  --hbd-cards-oc-heading: 24px; --hbd-cards-oc-heading-lh: 24px; --hbd-cards-oc-heading-track: .005em;
  /* Cards 20px apart at every width. Below 1280 a fixed 353 × 350 scroller card cropped from the
     right (the slider's own card); from 1280 a four-column 1fr grid 346 tall, cropped centred. */
  --hbd-cards-oc-gap: 20px; --hbd-cards-oc-card-w: 353px; --hbd-cards-oc-card-h: 350px;
  --hbd-cards-oc-radius: var(--hbd-radius-card); --hbd-cards-oc-crop: right;
  /* Caption block: inset 24px, bottom-centred and shrink-to-fit, with 20px more under the text. */
  --hbd-cards-oc-inset: 24px; --hbd-cards-oc-caption-pad: 20px;
  /* Caption: Loretta Light 24/26.4 (110%) weight 300 in cream, tracking -5% of the size (live's
     `tracking-[-5%]`, which is the -.05em written here). No scrim anywhere in this composition —
     the caption is lifted off the photo by Tailwind 4's drop-shadow-sm (0 1px 2px #00000026). */
  --hbd-cards-oc-caption: 24px; --hbd-cards-oc-caption-lh: 26.4px; --hbd-cards-oc-caption-track: -.05em;
  --hbd-cards-oc-caption-shadow: drop-shadow(0 1px 2px var(--hbd-black-a15));

  /* `phase-cards` — /our-story/'s Peri-/Meno-/Post-menopause row. Measured 2026-09-21
     (docs/audit/widgets/image-cards.md §12). The card is the same 427 × 350 at every width; what
     changes is whether the three sit in a grid or in a track that scrolls. */
  --hbd-cards-phase-pad: 48px;
  --hbd-cards-phase-card-w: 427px; --hbd-cards-phase-card-h: 350px; --hbd-cards-phase-radius: var(--hbd-radius-s);
  --hbd-cards-phase-gap: 20px; --hbd-cards-phase-gutter: 16px;
  --hbd-cards-phase-inset: 20px 8px; --hbd-cards-phase-body-gap: 15px;
  --hbd-cards-phase-title: 32px; --hbd-cards-phase-title-lh: 35.2px;
  --hbd-cards-phase-pill: 14px; --hbd-cards-phase-pill-lh: 21px;
  --hbd-cards-phase-pill-pad: 8px 20px; --hbd-cards-phase-pill-gap: 8px;
  /* 32px of column gap plus the 40px the text block pads itself by. */
  --hbd-cards-phase-head-top: 72px; --hbd-cards-phase-head-gap: 32px;
  --hbd-cards-phase-eyebrow: 20px; --hbd-cards-phase-eyebrow-lh: 20px; --hbd-cards-phase-eyebrow-pad: 8px 20px;
  --hbd-cards-phase-intro: 24px; --hbd-cards-phase-intro-lh: 33.6px; --hbd-cards-phase-intro-ls: .025em; --hbd-cards-phase-intro-max: 85vw; /* live's `max-w-[85%] md:max-w-[90%] lg:max-w-[850px]` of the full-bleed section, i.e. of the viewport: 332 at 390, 810 at 900, the 850px cap from 1024 (2026-09-23 pass) */
}
@media (min-width: 768px) {
  :root {
    --hbd-cards-slider-gutter: 60px;
    --hbd-cards-oc-gutter: 60px;
    --hbd-cards-phase-intro: 32px; --hbd-cards-phase-intro-lh: 44.8px; --hbd-cards-phase-intro-max: 90vw;
    --hbd-cards-2x2-gap: 32px; --hbd-cards-2x2-h: 320px;
    --hbd-cards-2x2-caption: 26px; --hbd-cards-2x2-caption-lh: 31.2px; --hbd-cards-2x2-caption-max: 100%;
  }
}
@media (min-width: 1024px) {
  :root {
    --hbd-cards-phase-pad: 80px;
    --hbd-cards-slider-card-w: 600px;
    --hbd-cards-slider-title: 34px; --hbd-cards-slider-title-lh: 45.3333px;
    --hbd-cards-tall-intro-max: 470px;
    --hbd-cards-2x2-head-gap: 40px; --hbd-cards-2x2-heading-max: 55%; --hbd-cards-2x2-intro-max: 45%;
    --hbd-cards-2x2-h: 360px;
    --hbd-cards-2x2-caption: 28px; --hbd-cards-2x2-caption-lh: 33.6px; --hbd-cards-2x2-caption-max: 300px;
    --hbd-cards-4up-heading-max: 407px; --hbd-cards-4up-intro-max: 430px;
  }
}
@media (min-width: 1280px) {
  :root {
    /* The copy stops being a head block and becomes a 400px column beside the pair, 40px away. */
    --hbd-cards-pair-copy-w: 400px;
    --hbd-cards-phase-gap: 15.5px; --hbd-cards-phase-gutter: 64px;
    /* Production caps this row at 1440 and lets the window's extra width become outer margin, so the
       card stays the 427 × 350 the crawl measured however wide the screen is (client QC, 2026-09-21:
       ours stretched to 587 at 1920 while the height stayed pinned, which distorted the crop). The cap
       includes the 64px padding either side — 1440 − 128 = 1312, and 3 × 427 + 2 × 15.5 is exactly
       that — and it is inert at 1440 and below, where the row already fills the viewport. */
    --hbd-cards-phase-max: 1440px; --hbd-cards-phase-intro-max: 850px;
    --hbd-cards-slider-gutter: 80px;
    /* 460 at 1440 — measured 80 + 460 + 40 + 460 + 40 = 1080, where live's third card starts. */
    --hbd-cards-tscroll-card-w: 460px;
    /* The grid takes over from the scroller: a 40px gutter, a 346px cell, a centred crop. */
    --hbd-cards-oc-gutter: 40px; --hbd-cards-oc-card-h: 346px; --hbd-cards-oc-crop: 50% 50%;
    --hbd-cards-2x2-heading-max: 600px; --hbd-cards-2x2-intro-max: 550px;
    --hbd-cards-4up-heading-max: 530px; --hbd-cards-4up-intro-max: 550px;
    --hbd-cards-4up-title: 30px; --hbd-cards-4up-title-lh: 33px;
  }
}

/* hbd-split-content, composition 6: `clinic-photo` — `#section-clinicContentSection` on all seven
   /location/* pages. Measured on hormonesbydesign.com 2026-09-19 at 1440/1024/768/390
   (docs/audit/widgets/split-content.md §9). It shares the `photo` composition's *shape* and none of
   its numbers: the eyebrow is EK Notice 20/24 rather than 14px mono, the heading is a flat 48/57.6 at
   every width, the copy is 18/27, the columns are equal halves rather than 50/auto, and the photo is a
   fixed height per breakpoint on an 8px radius. */
:root {
  /* 40px of vertical padding below 1024, 80 from it — and a 120px floor at 1024-1279, which live
     really does have (80 + 753 + 120 = the measured 953). */
  --hbd-split-clinic-pad: 40px; --hbd-split-clinic-pad-bottom: 40px;
  /* The gap between the columns, and between the text and the photo once they stack. */
  --hbd-split-clinic-row-gap: 60px;
  /* Photo height: 350 on a phone, 400 at 768, 753 at 1024, 574 from 1280. Live art-directs a square
     Sanity original into four crops; one <img> with a height and `object-fit: cover` lands on them. */
  --hbd-split-clinic-photo-h: 350px;
  /* Eyebrow EK Notice 20/24 ink (capitalised, as live sets it); heading Loretta 48/57.6 weight 300 at
     every width; copy Neue Haas 18/27. */
  --hbd-split-clinic-eyebrow: 20px; --hbd-split-clinic-eyebrow-lh: 24px;
  --hbd-split-clinic-heading: 48px; --hbd-split-clinic-heading-lh: 57.6px;
  --hbd-split-clinic-text: 18px; --hbd-split-clinic-text-lh: 27px;
  /* 8px eyebrow -> heading, 36px heading -> copy and copy -> buttons, 24px between the buttons. */
  --hbd-split-clinic-head-gap: 8px; --hbd-split-clinic-block-gap: 36px; --hbd-split-clinic-btn-gap: 24px;
  /* A bulleted list in the copy: 16px inset, 4px between items (measured on /location/waco-lab/). */
  --hbd-split-clinic-list-indent: 16px; --hbd-split-clinic-list-gap: 4px; --hbd-split-clinic-list-top: 3px; --hbd-split-clinic-list-bottom: -4px;
}
@media (min-width: 768px) { :root { --hbd-split-clinic-photo-h: 400px; } }
@media (min-width: 1024px) { :root { --hbd-split-clinic-pad: 80px; --hbd-split-clinic-pad-bottom: 120px; --hbd-split-clinic-photo-h: 753px; } }
@media (min-width: 1280px) { :root { --hbd-split-clinic-pad-bottom: 80px; --hbd-split-clinic-row-gap: 120px; --hbd-split-clinic-photo-h: 574px; } }

/* Latest posts (hbd-latest-posts) — the "Our latest updates and more" / "Read next" card row. Every
   value measured on hormonesbydesign.com 2026-09-17 at 1440/1280/1024/768/640/390, on
   /treatment/hormone-replacement-therapy/, /providers/ and a blog post. All 47 live instances are the
   same component; only the copy differs. Tables: docs/audit/widgets/latest-posts.md §2–§5. */
:root {
  /* 80px of vertical padding at every width, on a transparent background. The gutter is the
     site-wide 20/60/80 scale (--hbd-row-gutter) inside --hbd-container. */
  --hbd-latest-pad: 80px;
  /* Head: a flex row 16px apart, 40px of padding above a 1px rule on black at 20%, 40px of margin
     below it. Column-and-centred below 640; bottom-aligned from 768. */
  --hbd-latest-head-gap: 16px; --hbd-latest-head-pad: 40px; --hbd-latest-head-margin: 40px;
  --hbd-latest-rule: 1px solid var(--hbd-black-a20);
  /* Heading: Loretta Light, computed weight 400, ink. 30/36 below 768, 48/57.6 from it. The box is
     shrink-to-fit, capped at 454px from 768 (the treatments render exactly 454, /providers/ 396.58). */
  --hbd-latest-heading: 30px; --hbd-latest-heading-lh: 36px; --hbd-latest-heading-max: 100%;
  /* Grid: 12 columns, 16px gap, cards top-aligned. The lead card is span 6 from 1024, span 4 at
     768–1023, span 12 below — the spans live in the widget stylesheet, with the 640 step (the head
     turns into a centred row) and the 1280 step (which is only the shared --hbd-row-gutter, 60 → 80). */
  --hbd-latest-gap: 16px;
  /* Card body: a flex column with 16px between the photo, the title and the excerpt. */
  --hbd-latest-card-gap: 16px;
  /* Photo: 6px radius (not --hbd-radius-m, which is what hbd-img--rounded would have given), cropped
     with object-fit and a per-slot aspect ratio. Live serves three hand-cropped files per card and
     hides two; one <img> plus these ratios is the same geometry. */
  --hbd-latest-photo-radius: 6px;
  --hbd-latest-ratio-1: 780 / 475; --hbd-latest-ratio-2: 780 / 405; --hbd-latest-ratio-3: 1 / 1;
  /* Title: Loretta Light, computed weight 400, pure black (not ink), capped at 512px.
     20/28 below 1024, 24/32 from it. */
  --hbd-latest-title: 20px; --hbd-latest-title-lh: 28px; --hbd-latest-title-max: 512px;
  /* Excerpt: Neue Haas, ink. 16/24 below 1024, 18/28 from it. */
  --hbd-latest-excerpt: 16px; --hbd-latest-excerpt-lh: 24px;
  /* The only hover: the hovered card's photo scales 2% over .3s — live's own duration, which is
     longer than the theme's shared --hbd-dur (.2s), on the theme's shared easing. */
  --hbd-latest-zoom: 1.02; --hbd-latest-zoom-dur: .3s;
}
@media (min-width: 768px) {
  :root {
    --hbd-latest-heading: 48px; --hbd-latest-heading-lh: 57.6px; --hbd-latest-heading-max: 454px;
    --hbd-latest-ratio-1: 1 / 1; --hbd-latest-ratio-2: 1 / 1;
  }
}
@media (min-width: 1024px) {
  :root {
    --hbd-latest-ratio-1: 700 / 415; --hbd-latest-ratio-2: 360 / 250;
    --hbd-latest-title: 24px; --hbd-latest-title-lh: 32px;
    --hbd-latest-excerpt: 18px; --hbd-latest-excerpt-lh: 28px;
  }
}

/* Split content (hbd-split-content) — the two-column text/media section. Every value measured on
   hormonesbydesign.com 2026-09-17 at 1440/1280/1024/768/640/390 on `/`, `/our-story/` and `/pincc/`;
   the composition each number came from is named inline. Tables: docs/audit/widgets/split-content.md.
   Production is a Tailwind build, so the breakpoints below are its own (sm 640 · md 768 · lg 1024 ·
   xl 1280) read off the live class attributes, not interpolated between sample widths. */
:root {
  /* Section gutter: 20px ≤767 · 60px 768–1279 · 80px ≥1280 on home and both PINCC sections; the two
     /our-story/ blocks use 16px instead of 20 below 768 and are otherwise identical. */
  --hbd-split-gutter: 20px; --hbd-split-gutter-narrow: 16px;
  /* Vertical padding, per composition (each is one live section, §2). */
  --hbd-split-pad-avatar: 40px;          /* → 80 from 1024 */
  --hbd-split-pad-quote: 60px;           /* → 80 from 1280 */
  --hbd-split-pad-photo: 40px;           /* → 60 from 768, 80 from 1280 */
  --hbd-split-pad-framed: 40px;          /* → 80 from 768; 104/98 from 1280 */
  --hbd-split-pad-framed-bottom: 40px;
  --hbd-split-pad-artwork: 40px;         /* → 80 from 768 */
  /* Row: where each composition stops stacking, and the gaps on either side of that step. */
  --hbd-split-row-gap-avatar: 24px;
  --hbd-split-row-gap-quote: 80px;       /* → 40 from 1024 */
  --hbd-split-row-gap-photo: 40px;       /* → 30 from 1024, 60 from 1280 */
  --hbd-split-row-gap-framed: 40px;      /* → 80 from 1280 */
  --hbd-split-row-gap-artwork: 40px;     /* → 80 from 1024 */
  /* Column gaps inside the text column: head ↔ checklist ↔ actions, eyebrow ↔ group, heading ↔ text. */
  --hbd-split-body-gap-quote: 24px;      /* → 32 from 1024 */
  --hbd-split-group-gap-quote: 24px;     /* → 40 from 768 */
  --hbd-split-body-gap-photo: 40px;
  --hbd-split-body-gap-framed: 32px;
  --hbd-split-body-gap-artwork: 24px;
  /* Body text: 18/25.2 with 2.5% tracking everywhere except the injection model, which is 18/27 on a
     phone and 20/30 from 768 with no tracking. */
  --hbd-split-text: 18px; --hbd-split-text-lh: 25.2px; --hbd-split-ls: .025em;
  --hbd-split-text-photo: 18px; --hbd-split-text-photo-lh: 27px;
  --hbd-split-text-gap: 16px;
  /* Headings, per composition. The pull quote's zig-zag (32 → 48 → 42 → 48) is live's own. */
  --hbd-split-h-avatar: 36px; --hbd-split-h-avatar-lh: 43.2px; --hbd-split-h-avatar-gap: 24px;
  --hbd-split-h-quote: 32px;
  --hbd-split-h-framed: 40px;        /* → 48 from 768 */
  --hbd-split-h-artwork: 40px; --hbd-split-h-artwork-lh: 44px;
  /* Eyebrows. Plain: Founders Grotesk Mono 14/16.8 uppercase. Pill: 8px/20px padding, a dashed 40%
     black border, filled — sky-deep on the pull quote, sky on the injection model. */
  --hbd-split-eyebrow: 14px; --hbd-split-eyebrow-lh: 16.8px;
  --hbd-split-pill-quote: 14px;          /* → 20 from 768 */
  --hbd-split-pill-photo: 16px;          /* → 18 from 768, 20 from 1280 */
  --hbd-split-pill-pad: 8px 20px; --hbd-split-pill-border: 1px dashed var(--hbd-black-a40);
  /* Avatar (home): a 160 × 168 round portrait with a 2px white ring, 20px from the text, top-aligned. */
  --hbd-split-avatar-w: 160px; --hbd-split-avatar-h: 168px; --hbd-split-avatar-gap: 20px;
  --hbd-split-avatar-ring: 2px solid var(--hbd-white);
  --hbd-split-avatar-col-gap: 24px; --hbd-split-avatar-head-gap: 8px; --hbd-split-avatar-col-max: 100%;
  /* The rule above the checklist, and the checklist itself. */
  --hbd-split-rule: 1px solid var(--hbd-navy-a10); --hbd-split-rule-space: 40px;
  --hbd-split-checklist-gap: 32px; --hbd-split-item-gap: 24px; --hbd-split-item-icon-gap: 16px;
  --hbd-split-item-icon: 32px;
  --hbd-split-item: 16px; --hbd-split-item-lh: 22.4px; --hbd-split-item-max: 278px;
  /* Live pads every item's text 27px at the bottom, which is what sets the checklist row's height. */
  --hbd-split-item-pad: 27px;
  /* EK Notice Classic headings — the checklist heading and the card heading. Computed weight 400. */
  --hbd-split-serif-h: 24px; --hbd-split-serif-h-lh: 32px; --hbd-split-checklist-h-ls: .005em;
  /* Secondary card (home): pink at 40% behind a solid pink hairline, 7px radius, 469px wide from 1280. */
  --hbd-split-card-w: 469px; --hbd-split-card-gap: 32px; --hbd-split-card-radius: 7px;
  --hbd-split-card-pad: 48px 20px;
  --hbd-split-card-bg: var(--hbd-pink-a40); --hbd-split-card-border: 1px solid var(--hbd-pink);
  --hbd-split-card-eyebrow-lh: 16px; --hbd-split-card-text-lh: 27px; --hbd-split-card-head-gap: 8px;
  /* Portrait card (our-story): a sky-deep card, 400px wide from 768, photo 380 tall (480 from 1024). */
  --hbd-split-portrait-max: none; --hbd-split-portrait-photo-h: 380px;
  --hbd-split-portrait-name: 24px; --hbd-split-portrait-name-lh: 28.8px; --hbd-split-portrait-name-ls: -.05em;
  --hbd-split-portrait-title: 14px; --hbd-split-portrait-title-lh: 14px; --hbd-split-portrait-title-block: 24px;
  /* The pull quote's text column is capped at 840 and its paragraphs become two columns from 1280. */
  --hbd-split-quote-col: 840px; --hbd-split-quote-cols: 1;
  /* Injection-model photo: one <img> with the crop ratio live serves at each width. */
  --hbd-split-photo-ratio: 348 / 294; --hbd-split-photo-h: auto; --hbd-split-photo-w: 100%;
  /* Framed photo (PINCC About): 552px tall at every width, a 6px pink frame, a 10px-rounded photo and
     a quote card that hangs half outside the frame's bottom edge. */
  --hbd-split-frame-h: 552px; --hbd-split-frame-border: 6px solid var(--hbd-pink);
  --hbd-split-frame-radius: 16px; --hbd-split-frame-photo-radius: 10px;
  --hbd-split-quote-card-w: 100%; --hbd-split-quote-card-pad: 24px 16px;
  /* …which is why the stacked text column needs a big top margin to clear it. */
  --hbd-split-framed-body-top: 160px; --hbd-split-framed-media-bottom: 0px;
  /* Artwork (PINCC Mission): a letterboxed illustration, 936px tall until 1280 and 700 from it. */
  --hbd-split-artwork-min-h: 936px;
  --hbd-split-artwork-body-w: 100%; --hbd-split-artwork-media-w: 100%; --hbd-split-artwork-body-max: 524px;
}
@media (min-width: 768px) {
  :root {
    --hbd-split-gutter: 60px; --hbd-split-gutter-narrow: 60px;
    --hbd-split-pad-photo: 60px; --hbd-split-pad-framed: 80px; --hbd-split-pad-framed-bottom: 80px;
    --hbd-split-pad-artwork: 80px;
    --hbd-split-group-gap-quote: 40px;
    --hbd-split-text-photo: 20px; --hbd-split-text-photo-lh: 30px;
    --hbd-split-h-quote: 48px; --hbd-split-h-framed: 48px; --hbd-split-h-artwork: 48px; --hbd-split-h-artwork-lh: 52.8px;
    --hbd-split-pill-quote: 20px; --hbd-split-pill-photo: 18px;
    --hbd-split-avatar-col-max: 576px; --hbd-split-item-max: 317px;
    --hbd-split-card-pad: 48px 40px;
    --hbd-split-portrait-max: 400px;
    --hbd-split-photo-h: 509px; --hbd-split-photo-ratio: auto;
    --hbd-split-quote-card-w: 75%; --hbd-split-quote-card-pad: 24px 40px;
    --hbd-split-framed-body-top: 120px;
    --hbd-split-artwork-body-w: 60%; --hbd-split-artwork-media-w: 40%;
  }
}
@media (min-width: 1024px) {
  :root {
    --hbd-split-pad-avatar: 80px;
    --hbd-split-row-gap-quote: 40px; --hbd-split-row-gap-photo: 30px; --hbd-split-row-gap-artwork: 80px;
    --hbd-split-body-gap-quote: 32px;
    --hbd-split-h-quote: 42px;
    --hbd-split-portrait-photo-h: 480px;
    --hbd-split-photo-h: auto; --hbd-split-photo-ratio: 348 / 294;
    --hbd-split-framed-body-top: 100px;
    --hbd-split-card-pad: 48px;
  }
}
@media (min-width: 1280px) {
  :root {
    --hbd-split-gutter: 80px; --hbd-split-gutter-narrow: 80px;
    --hbd-split-pad-quote: 80px; --hbd-split-pad-photo: 80px;
    --hbd-split-pad-framed: 104px; --hbd-split-pad-framed-bottom: 98px;
    --hbd-split-row-gap-photo: 60px; --hbd-split-row-gap-framed: 80px;
    --hbd-split-h-quote: 48px;
    --hbd-split-pill-photo: 20px;
    --hbd-split-quote-cols: 2;
    --hbd-split-photo-ratio: 631 / 502; --hbd-split-photo-h: 502px; --hbd-split-photo-w: auto;
    --hbd-split-quote-card-w: 80%;
    --hbd-split-framed-body-top: 0px; --hbd-split-framed-media-bottom: 125px;
    --hbd-split-artwork-min-h: 700px;
  }
}

/* Care options (hbd-care-options) — the two-card "select your care" section. Every value measured on
   hormonesbydesign.com 2026-09-17 at 1440/1280/1024/768/640/390 on `/` and `/service/virtual-care/`,
   which render the same component with different data. Tables: docs/audit/widgets/care-options.md.
   Breakpoints are production's own Tailwind scale, read off the live class attributes: 768 / 1024 /
   1280. Like the hero and split-content scales this is a set of discrete steps, not a clamp(). */
:root {
  /* Shell: a flat 1440px wrapper with the gutter inside it, 80px of vertical padding at every width. */
  --hbd-care-max: 1440px; --hbd-care-gutter: 20px;   /* → 60 from 768, 80 from 1280 */
  --hbd-care-pad: 80px; --hbd-care-gap: 40px;

  /* Head row: heading left, intro right, bottom-aligned from 1024; stacked below it. */
  --hbd-care-head-gap: 20px;
  --hbd-care-h: 48px; --hbd-care-h-lh: 52.8px;       /* the same at every width */
  --hbd-care-intro: 16px; --hbd-care-intro-lh: 24px; --hbd-care-intro-max: 100%;  /* → 505px from 1024 */

  /* The card grid: one column, two from 1024. */
  --hbd-care-cards-gap: 20px; --hbd-care-cards-cols: 1;

  --hbd-care-card-pad-top: 40px;                     /* → 60 from 1280 */
  --hbd-care-card-pad-x: 40px;
  --hbd-care-card-radius: 10px; --hbd-care-card-bg: var(--hbd-sky);

  --hbd-care-label: 20px; --hbd-care-label-lh: 20px; --hbd-care-label-ls: .005em; --hbd-care-label-space: 16px;
  --hbd-care-card-head-gap: 24px; --hbd-care-card-head-space: 32px;
  --hbd-care-card-h: 40px; --hbd-care-card-h-lh: 44px;
  --hbd-care-card-text: 16px; --hbd-care-card-text-lh: 22.4px; --hbd-care-card-text-max: 336px;
  --hbd-care-ls: .025em;

  /* The dashed checklist box. Its 60px bottom margin is the card's floor when there is no mockup. */
  --hbd-care-check-pad: 24px; --hbd-care-check-radius: 7px;
  --hbd-care-check-border: 1px dashed var(--hbd-black-a50);
  --hbd-care-check-max: 100%;                        /* → 464px from 1280 */
  --hbd-care-check-space: 60px;
  --hbd-care-item-gap: 12px; --hbd-care-item-icon-gap: 8px;
  --hbd-care-item-icon: 32px; --hbd-care-item-tick: 18px;
  --hbd-care-item: 16px; --hbd-care-item-lh: 22.4px;

  /* The device mockup, pinned to the card's bottom edge. */
  --hbd-care-media-gap: 40px; --hbd-care-media-max: 298px;  /* → 287 at 768–1023, 620 from 1024 */
}

@media (min-width: 768px) {
  :root {
    --hbd-care-gutter: 60px;
    --hbd-care-media-max: 287px;
  }
}

@media (min-width: 1024px) {
  :root {
    --hbd-care-cards-cols: 2;
    --hbd-care-intro-max: 505px;
    --hbd-care-media-max: 620px;
  }
}

@media (min-width: 1280px) {
  :root {
    --hbd-care-gutter: 80px;
    --hbd-care-card-pad-top: 60px;
    --hbd-care-check-max: 464px;
  }
}

/* CTA card (hbd-cta-card) — the card in the FAQ row's first cell. Every value measured on
   hormonesbydesign.com 2026-09-17 at 1440 and 1280 on `/`, `/treatment/hormone-replacement-therapy/`
   and `/service/membership/` (the three content shapes), and byte-compared against the seven location
   pages, `/treatment/thyroid-balancing/` and `/service/digital-thermography/`, which render the same
   component. Tables: docs/audit/widgets/cta-card.md. Live's column is `hidden xl:block`, so there are
   no values below 1280 — the card does not exist there. */
:root {
  /* Panel: 600px tall at both widths, on an 8px radius, no padding and no border. Live also declares
     h-[422px] / md:h-[215px], which never apply because the column is hidden below 1280. */
  --hbd-cta-card-h: 600px; --hbd-cta-card-radius: var(--hbd-radius-xs);
  /* Head block: 38px in from the top, 32px between the heading and the pill. */
  --hbd-cta-card-pad-top: 38px; --hbd-cta-card-gap: 32px;
  /* Heading: EK Notice Classic 40/44 (live's leading-[110%]) weight 400 in cream, tracking 0.5% of
     the size. Live reports `0.5%`; .005em is the same 0.2px at 40px (docs/audit/widgets/offerings.md §5.3). */
  --hbd-cta-card-heading: 40px; --hbd-cta-card-heading-lh: 44px; --hbd-cta-card-heading-ls: .005em;
  /* Closing line: EK Notice Classic 24/24 (leading-[100%]), 300px wide, 12px off the card's bottom. */
  --hbd-cta-card-footer: 24px; --hbd-cta-card-footer-lh: 24px;
  --hbd-cta-card-footer-max: 300px; --hbd-cta-card-footer-gap: 12px;
  /* The FAQ row this card is the first cell of: `gap: 80px`, the card `w-2/5` of what is left. Only
     the .hbd-w-cta-card--beside-faq stand-in uses it (see widgets/hbd-cta-card/assets/style.css). */
  --hbd-cta-card-row-gap: 80px; --hbd-cta-card-col: .4;
}

/* Page title (hbd-page-title) — the header block a page opens with when it opens with words. Every
   value measured on hormonesbydesign.com 2026-09-17 at 1440 / 1024 / 768 / 390 plus the breakpoint
   probes at 639/640/767/768, 800/900/1000, 1023/1024, 1279/1280 on `/blog/`
   (#section-blogPageSection) and `/providers/` (#section-meetOurProvidersPageSection). Tables:
   docs/audit/widgets/page-title.md. The two blocks are two live components and do not share a type
   scale, so the centred one carries its own (§1, §6.4). */
:root {
  /* 40px from the section's top edge to the first line of type on both blocks; nothing below them
     except the hairline's own 40px (§2, §3.2). */
  --hbd-page-title-pad: 40px;
  /* Every gap in the block is 20 — title → intro → filters — except the title → filters row from
     1280 up, which is 36 (§3.2). */
  --hbd-page-title-gap: 20px; --hbd-page-title-gap-xl: 36px;
  /* Left (the blog header): Loretta 30/36 → 48/57.6 from 768, ink, no tracking. */
  --hbd-page-title-heading: 30px; --hbd-page-title-heading-lh: 36px;
  /* Centred (the providers title): Loretta 40/40.8 → 56/57.12 from 1024, black, in a 384px column. */
  --hbd-page-title-heading-c: 40px; --hbd-page-title-heading-c-lh: 40.8px;
  --hbd-page-title-center-max: 384px;
  /* Intro: Haas 16/24 in ink. Its 384px cap is both the 768–1023 flex basis and the 1280+ column
     (§3.4) — the same number on both sides of the layout. */
  --hbd-page-title-intro: 16px; --hbd-page-title-intro-lh: 24px;
  --hbd-page-title-intro-max: 384px;
  /* The heading's flex basis in the 768–1023 title row: 50% of the container, shrinking against the
     intro's 384px basis. Predicts all four measured widths exactly (§3.4). */
  --hbd-page-title-title-basis: 50%;
  /* Filters: the "Categories:" lead-in is EK Notice Classic 18/28 → 20/28 from 768, 16px from the
     pill list, which is 10px between pills in both axes (§3.2). */
  --hbd-page-title-label: 18px; --hbd-page-title-label-lh: 28px;
  --hbd-page-title-filters-gap: 16px; --hbd-page-title-pill-gap: 10px;
  /* Pills: Founders Grotesk Mono 14/20 uppercase with *no* tracking, 8/16 padding on a 1px border —
     38px tall, and 8.596px per character wide (§3.3). The inactive dash is #999, not an ink alpha. */
  --hbd-page-title-pill: 14px; --hbd-page-title-pill-lh: 20px;
  --hbd-page-title-pill-pad: 8px 16px;
  --hbd-page-title-pill-border: 1px dashed var(--hbd-grey-400);
  --hbd-page-title-pill-active-border: 1px solid var(--hbd-ink);
  /* The hairline: ink at 20%, 40px under the last box (§3.2) — and, *below* the rule, 40px above
     whatever follows it from 768 up and **nothing at 390**, where live's blog grid starts on the rule
     itself (Plan 4 Task 6's whole-page run: hairline and first card both at document y 463;
     docs/audit/templates/blog-index.md §1.1). §3.2 measured the 40 at 1440 only. */
  --hbd-page-title-rule: 1px solid var(--hbd-ink-a20);
  --hbd-page-title-rule-space: 40px; --hbd-page-title-rule-after: 0px;
}

@media (min-width: 768px) {
  :root {
    --hbd-page-title-heading: 48px; --hbd-page-title-heading-lh: 57.6px;
    --hbd-page-title-label: 20px;
    --hbd-page-title-rule-after: 40px;
  }
}

@media (min-width: 1024px) {
  :root {
    --hbd-page-title-heading-c: 56px; --hbd-page-title-heading-c-lh: 57.12px;
  }
}

/* Location details (hbd-location-details) — the clinic detail card under the hero on all seven
   /location/* pages. Every value measured on hormonesbydesign.com/location/austin/ 2026-09-18 at
   1440/1024/768/390 (one page load, arrival accordion opened at each width).
   Tables: docs/audit/widgets/location-details.md. */
:root {
  /* The card: white, 32px of padding, 20px on a phone. Its bands are separated by the same #E5E5E5
     hairline live draws between the band-2 columns and under the landmark note. */
  --hbd-loc-pad: 20px;
  /* The detail card is a rounded white panel on a soft shadow, lifted off the hero it overlaps. */
  --hbd-loc-card-radius: var(--hbd-radius-xs); --hbd-loc-card-shadow: var(--hbd-shadow-card);
  --hbd-loc-rule: 1px solid var(--hbd-grey-200);
  /* Band 1's own top/bottom padding, and the 36px between band 2's stacked columns. */
  --hbd-loc-band-pad: 32px;
  --hbd-loc-band-gap: 36px;
  /* Inside band 1 while it is stacked: 24px from the rating to the address, then the hairline with
     20px of air each side on a phone and 32px from 768 up. */
  --hbd-loc-identity-gap: 24px;
  --hbd-loc-phone-rule-gap: 20px;
  /* Band 2's vertical rules sit centred in a 57px gutter: 28px of clearance, the 1px rule, 28px again
     (measured 322 → 350 → 379 and 760 → 788 → 817 at 1440). Band 1's three columns are 32px apart. */
  --hbd-loc-col-gap: 28px;
  --hbd-loc-band-col-gap: 32px;
  /* Clinic name: EK Notice Classic Regular 24/28.8 at every width, ls 0.5%. Weight 400 — live loads the
     single Regular face, so a declared 500 would paint heavier than production (decisions log,
     2026-09-17, Plan 2 Task 3). */
  --hbd-loc-name: 24px; --hbd-loc-name-lh: 28.8px; --hbd-loc-name-ls: .005em;
  /* Neue Haas everywhere else, all of it on live's 2.5% tracking. */
  --hbd-loc-ls: .025em;
  /* Rating: five 14px stars on a 16px pitch, then 14/16.8 Medium and 12/14.4 Roman. */
  /* 8px from the last star to the score and again to the review count (measured 110 → 118 → 148.2). */
  --hbd-loc-star: 14px; --hbd-loc-star-gap: 2px; --hbd-loc-rating-gap: 8px; --hbd-loc-rating: 14px; --hbd-loc-rating-lh: 16.8px;
  --hbd-loc-meta: 12px; --hbd-loc-meta-lh: 14.4px;
  /* Address block: a 16px pin, 10px to a 270px column of 14/19.6. */
  --hbd-loc-icon: 16px; --hbd-loc-icon-gap: 10px; --hbd-loc-address: 14px; --hbd-loc-address-lh: 19.6px;
  --hbd-loc-address-col: 270px;
  /* Get Directions: 12/14.4 Medium in the orange the live card uses, underlined, 4px under the address. */
  --hbd-loc-link: var(--hbd-orange-2); --hbd-loc-link-gap: 4px;
  /* Fax sits 12px under the link. */
  --hbd-loc-fax-gap: 12px;
  /* Phone rows: label 12/14.4 at 60% ink over a 14/19.6 navy number, 20px apart while stacked (a 58px
     pitch on a phone), and the rule between them is 36px tall once they sit side by side. */
  --hbd-loc-phone-gap: 20px; --hbd-loc-phone-rule-h: 36px; --hbd-loc-phone-num: 14px; --hbd-loc-phone-num-lh: 19.6px;
  /* Side by side from 1024 up, 20px between the two blocks. */
  --hbd-loc-phone-row-gap: 20px;
  /* Hours: a 16px clock 8px from a 12/14.4 Medium heading, 23.5px clear of a 33.8px row pitch. */
  --hbd-loc-hours-head-gap: 8px;
  /* 31px under the hours header on a phone, 23.5px from 768 up — live's header is taller below 768
     (its clock sits 7px lower than the label rather than centred on it). */
  --hbd-loc-hours-gap: 31px; --hbd-loc-hours-row: 33.8px; --hbd-loc-hours-day: 14px;
  /* The 33.8px row is a 16.8px line with half of the remainder above and below it. Stated as padding
     rather than as a min-height so the *last* row can drop its half — live's hours table ends on its
     last line, not 8.5px under it (Task 4 measured it at 1024/768/390, where that 8.5px pushed the
     whole rest of the card down). */
  --hbd-loc-hours-pad: calc((var(--hbd-loc-hours-row) - var(--hbd-loc-hours-lh) - 1px) / 2);
  --hbd-loc-hours-lh: 16.8px; --hbd-loc-hours-closed: var(--hbd-ink-a50);
  /* The two-tab hours header on Waco and Waco Lab: 12px labels, 16px apart. */
  --hbd-loc-tab-gap: 16px;
  /* Landmark + amenities: the note 12px under the map, the hairline 12px under that, the grid 13px
     under the hairline with 32px rows and a 12px label beside a 16px icon. */
  --hbd-loc-note-gap: 12px; --hbd-loc-amenity-row: 32px; --hbd-loc-amenity-gap: 4px;
  --hbd-loc-amenity-col-gap: 16px;
  /* The 32px pitch is a 16px row plus a 16px gap *between* rows — there is no trailing 16px under the
     last one (live's last amenity icon ends the middle column at 536.41 @1440, not 552.41, which is
     also where the photo column stops). Task 4 measured it; see location-details.md §6. */
  --hbd-loc-amenity-row-gap: calc(var(--hbd-loc-amenity-row) - var(--hbd-loc-icon));
  /* Gallery: a photo that fills its column (300px tall while the card is stacked, 4:3 on a phone),
     8px radius, 40px arrow circles inset 8px, 8px dots on a 14px pitch 18px above the bottom edge. */
  --hbd-loc-photo-h: 232.5px; --hbd-loc-photo-radius: var(--hbd-radius-xs);
  /* From 1280 the photo fills the row rather than setting it (live's 431 × 355.41 is the height of the
     tallest column beside it), so it needs a floor of its own in case those columns are short. */
  --hbd-loc-photo-min: 300px;
  --hbd-loc-nav: 40px; --hbd-loc-nav-inset: 8px; --hbd-loc-nav-glyph: 16px;
  --hbd-loc-dot: 8px; --hbd-loc-dot-active: 8.8px; --hbd-loc-dot-gap: 6px; --hbd-loc-dot-inset: 18px;
  /* The capsule behind the dot group — black at 35%, so the dots read on any photograph. */
  --hbd-loc-dots-bg: rgba(0, 0, 0, .35); --hbd-loc-dots-pad: 6px 10px;
  --hbd-loc-dot-idle: var(--hbd-white-a45); --hbd-loc-dot-ring: 0 0 0 1px var(--hbd-black-a20), 0 1px 3px var(--hbd-black-a10);
  /* Arrival row: an 18px navigation glyph, a 14/19.6 navy label, a 12/14.4 uppercase state label at 60%
     ink and a 21px chevron. The panel under it is a 10px-radius box with a #EDEDEE border. */
  --hbd-loc-arrival-icon: 18px; --hbd-loc-arrival-chevron: 21px; --hbd-loc-arrival-icon-gap: 10px;
  --hbd-loc-arrival-pad: 24px;
  /* live's `px-[32px] py-[28px]` at every width. */
  --hbd-loc-arrival-panel-pad: 32px; --hbd-loc-arrival-panel-pad-y: 28px; --hbd-loc-arrival-panel-radius: var(--hbd-radius-card);
  --hbd-loc-arrival-border: 1px solid var(--hbd-grey-150);
  /* The arrival panel's own scale — live's is the one place on the card that leaves the navy/ink greys.
     Intro and row body: 14 / 22.8 in #4B5563. Row title: 16 / 24.5 in #1F2937. The footer line (the one
     beside the phone glyph) drops to 12 / 17.5 above a hairline. Rows are 32px apart, each a 20px glyph
     16px from its text; the whole panel sits 24px under the toggle and 24px from its photo. */
  --hbd-loc-arrival-text: var(--hbd-grey-600); --hbd-loc-arrival-lh: 22.8px;
  --hbd-loc-arrival-title: 16px; --hbd-loc-arrival-title-lh: 24.5px; --hbd-loc-arrival-title-color: var(--hbd-grey-700);
  --hbd-loc-arrival-note: 12px; --hbd-loc-arrival-note-lh: 17.5px;
  --hbd-loc-arrival-row-gap: 32px; --hbd-loc-arrival-row-icon: 20px; --hbd-loc-arrival-row-icon-gap: 16px;
  /* The footer row sits closer to its glyph than a titled row does (live's `gap-3` against `gap-4`). */
  --hbd-loc-arrival-title-gap: 8px; --hbd-loc-arrival-note-pad: 20px; --hbd-loc-arrival-note-icon-gap: 12px;
  --hbd-loc-arrival-col-gap: 24px;
  /* The photo: 8px radius, its caption laid over the bottom-left corner in white on the image. */
  /* 500px while the panel is one column (live's `h-[500px]`); from 1280 it is `xl:h-full` — the height
     of the copy beside it (486.4 on Austin at 1440). */
  --hbd-loc-arrival-photo-radius: var(--hbd-radius-xs); --hbd-loc-arrival-photo-h: 500px;
  --hbd-loc-arrival-caption-inset: 20px; --hbd-loc-arrival-caption: 14px; --hbd-loc-arrival-caption-lh: 21px;
  --hbd-loc-arrival-caption-icon: 17.5px;
  /* Live animates the panel open over 0.3s, the same curve as the FAQ accordion. */
  --hbd-loc-dur: .3s;
}
@media (min-width: 768px) {
  :root { --hbd-loc-pad: 32px; --hbd-loc-photo-h: 300px; --hbd-loc-phone-rule-gap: 32px; --hbd-loc-hours-gap: 23.5px; }
}
@media (min-width: 1280px) {
  /* Only at 1280 do both bands become three columns; the photo then fills the row's height instead of
     a fixed one (431 × 355.41 on Austin at 1440). */
  :root { --hbd-loc-photo-h: 100%; }
}

/* Location cards (hbd-location-cards) — the clinic-card row. Every value measured on
   hormonesbydesign.com/service/digital-thermography/ (#section-clinicLocationsSection) 2026-09-18 at
   1440/1024/768/390, one page load, the button hovered at each width.
   Tables: docs/audit/widgets/location-cards.md. */
:root {
  /* The section: sky, 120px of padding top and bottom at *every* width — including 390, where
     .hbd-row--pad-l would drop to 80. --hbd-space-9 is that 120px. */
  --hbd-loc-cards-pad: var(--hbd-space-9);
  /* Head beside cards from 1280: a 5fr / 11fr grid with a 60px gutter (1280 − 60 = 1220; 5/16 of that
     is 381.25 against the measured 381.2, 11/16 is 838.75 against 838.8). Stacked below 1280, the
     same 60px becomes the space above the cards. */
  --hbd-loc-cards-head-col: 5fr; --hbd-loc-cards-body-col: 11fr; --hbd-loc-cards-head-gap: 60px;
  /* Head copy: a 14/15.4 sentence-case eyebrow (not the mono pill), then the display face at 32/35.2
     — 48/52.8 from 1280 — then a 16/22.4 paragraph. Live tracks none of it. */
  --hbd-loc-cards-eyebrow: 14px; --hbd-loc-cards-eyebrow-lh: 15.4px; --hbd-loc-cards-eyebrow-gap: 24px;
  --hbd-loc-cards-heading: 32px; --hbd-loc-cards-heading-lh: 35.2px; --hbd-loc-cards-heading-gap: 32px;
  --hbd-loc-cards-text: 16px; --hbd-loc-cards-text-lh: 22.4px;
  /* The cards: white, 10px radius, 20px of padding, 16px apart, no shadow and no border. Two across
     from 768 and one below it; the grid stretches them to equal height (measured at 768, where a
     wrapped address makes one card's content 19.3px taller but both boxes end on the same row). */
  --hbd-loc-cards-gap: 16px; --hbd-loc-cards-card-pad: 20px;
  /* Cards across from 1280. Live's one instance is two, which stays the default; the Locations index
     (Plan 4 Task 7, the one page production has not) asks for three, where the 1280 content box gives
     a 416px card against the measured 411.4 of live's own — the same card, 4.6px wider.
     docs/audit/templates/locations-index.md §3. */
  --hbd-loc-cards-cols: 2;
  /* The photo is 157px tall at every width and fills the card's content box. */
  --hbd-loc-cards-photo-h: 157px; --hbd-loc-cards-photo-radius: 5px; --hbd-loc-cards-photo-gap: 20px;
  /* Clinic name: the display face in *italic* at 32/38.4, at every width. Weight 300 — live declares
     400 but only the Light Italic face exists, so a declared 400 would paint synthetically bolder
     (the same trap as the detail card's clinic name; decisions log, 2026-09-17). */
  --hbd-loc-cards-name: 32px; --hbd-loc-cards-name-lh: 38.4px; --hbd-loc-cards-name-gap: 9px;
  /* Address and phone: 16/19.2 behind a 16px glyph 9px to their left; the phone 21px under the
     address, the pills 20px under the phone, the button 20px under the last pill. */
  --hbd-loc-cards-line: 16px; --hbd-loc-cards-line-lh: 19.2px;
  --hbd-loc-cards-icon: 16px; --hbd-loc-cards-icon-gap: 9px;
  --hbd-loc-cards-phone-gap: 21px; --hbd-loc-cards-services-gap: 20px; --hbd-loc-cards-action-gap: 20px;
  /* Today's hours, when the line is switched on: no live card prints it, so it takes the card's own
     icon-line pitch — the same 21px that sits between the address and the phone. */
  --hbd-loc-cards-hours-gap: 21px;
  /* Treatment pills: 14/20 body face, uppercase, a 1px *solid* ink border, padding 8px 20px (38px
     tall), stacked 8px apart — not the theme's 12px dashed mono pill. */
  --hbd-loc-cards-service: 14px; --hbd-loc-cards-service-lh: 20px;
  --hbd-loc-cards-service-pad: 8px 20px; --hbd-loc-cards-service-border: 1px solid var(--hbd-ink);
  --hbd-loc-cards-service-gap: 8px;
  /* The button is 44px tall, which .hbd-btn's 12px padding only reaches without its 1px border. */
  --hbd-loc-cards-btn-pad: 12px 24px;
}
@media (min-width: 1280px) {
  :root { --hbd-loc-cards-heading: 48px; --hbd-loc-cards-heading-lh: 52.8px; }
}

/* ------------------------------------------------------------- locations index (Plan 4 Task 7)
   The one page production does not have. It is four built widgets stacked, so it needs a single
   number of its own: the vertical padding the page-title section takes when the optional header photo
   is behind it — the site's standard 80px section padding, the same step hbd-locations-map opens with
   directly below it. docs/audit/templates/locations-index.md §2. */
:root { --hbd-locations-index-photo-pad: var(--hbd-space-8); }

/* --------------------------------------------------------------- locations map (Plan 3 Task 4)
   The full-bleed "Find Expert Hormone Care Across Texas" map on home and six of the seven clinic
   pages — plus the single-clinic ?cid= embed inside the detail card.
   Tables: docs/audit/widgets/locations-map.md §2, §3, §5. */
:root {
  /* The section carries 80px above the map and no background of its own; the map is 710px tall at
     *every* width and rounded 12px even where its corners fall off-screen. */
  --hbd-map-pad-top: 80px; --hbd-map-h: 710px; --hbd-map-radius: var(--hbd-radius-s);
  /* The grey Maps paints before the tiles arrive (Tailwind gray-100) — and the keyless placeholder. */
  --hbd-map-placeholder: #F3F4F6;
  /* The floating panel: white, 10px radius, 24px/16px of padding. 350 wide and inset 16/31 at 768;
     from 1024 it is 40 in from the map's right edge and 20 clear of its top and bottom; 460 wide from
     1280. (The panel is not rendered at all below 768 — the head card below replaces it.) */
  --hbd-map-panel-w: 350px; --hbd-map-panel-inset: 16px; --hbd-map-panel-inset-block: 31px;
  /* The /locations/ panel's search row (measured on production 2026-09-21): a 38px field and pill
     either side of an 8px gap, inside the panel's 20px gutter, under a hairline. */
  /* The /locations/ panel is a 445px column at 1440, its heading padded 20px inside it. */
  --hbd-lmap-col-w: 445px; --hbd-lmap-col-head-pad: 20px;
  /* The column panel's clinic list (production's /locations/, measured 2026-09-21; rows fixed 2026-09-23 —
     they had run flush to both panel edges on the floating card's 16/12/8 values): the list is inset 20,
     each row card is 20px padded with a 7px radius, 8px between rows. */
  --hbd-lmap-col-list-pad: 20px; --hbd-lmap-col-row-pad: 20px; --hbd-lmap-col-row-gap: 8px; --hbd-lmap-col-row-radius: 7px;
  /* …and its row name is 20/22 with 10px under it (the floating card's is 18/19.8 over 8) — the last 4.2px of
     production's 107.59px row (146.39 on the two-line Alamo Heights row), border included. */
  --hbd-lmap-col-row-name: 20px; --hbd-lmap-col-row-name-lh: 22px; --hbd-lmap-col-row-name-gap: 10px;
  --hbd-lmap-col-heading: 24px; --hbd-lmap-col-heading-lh: 29px;
  --hbd-lmap-search-h: 38px; --hbd-lmap-search-gap: 8px; --hbd-lmap-search-pad: 13px 20px;
  --hbd-lmap-search-fs: 14px; --hbd-lmap-search-input-pad: 12px;
  --hbd-map-panel-pad: 24px 16px;
  --hbd-map-panel-shadow: 0 1px 3px var(--hbd-black-a10), 0 1px 2px -1px var(--hbd-black-a10);
  /* The panel's inner column never exceeds 600px — the list takes whatever the copy leaves. */
  --hbd-map-panel-inner-h: 600px;
  /* Heading: the display face in *italic* at 24/32, 40/53.33 from 1024. Weight 300 — only the Light
     Italic face exists, so a declared 400 would paint synthetically bolder (the same trap as the
     clinic name in hbd-location-cards; decisions log, 2026-09-17). */
  --hbd-map-heading: 24px; --hbd-map-heading-lh: 32px; --hbd-map-heading-gap: 12px;
  --hbd-map-text: 16px; --hbd-map-text-lh: 24px; --hbd-map-text-gap: 16px;
  /* Rows: 16px of padding inside an 8px-rounded 1px ink@20% box, 12px apart, 16px under the last. */
  --hbd-map-row-gap: 12px; --hbd-map-row-pad: 16px; --hbd-map-row-radius: var(--hbd-radius-xs);
  --hbd-map-row-border: 1px solid var(--hbd-ink-a20); --hbd-map-list-pad: 16px;
  --hbd-map-row-name: 18px; --hbd-map-row-name-lh: 19.8px; --hbd-map-row-name-ls: .005em;
  --hbd-map-row-name-gap: 8px;
  --hbd-map-row-address: 14px; --hbd-map-row-address-lh: 16.8px; --hbd-map-row-address-ls: .025em;
  /* Nudge arrow: a 120px box centred on the list, sticky 20px above its bottom, holding a 40px white
     disc with a 6px-offset 40px-blur black@25% shadow and a 13px ink arrow. It bounces ±30px. */
  --hbd-map-nudge: 120px; --hbd-map-nudge-inset: 20px; --hbd-map-nudge-disc: 40px;
  --hbd-map-nudge-glyph: 13px; --hbd-map-nudge-shadow: 0 6px 40px rgba(0, 0, 0, .25);
  --hbd-map-nudge-travel: -30px;
  /* The mobile head card below 768: 16px in from both edges, 20px below the section's top, 24px/20px
     of padding and a heavier shadow than the panel's. The map is pushed 120px down to make room and
     the card overlaps it. */
  --hbd-map-card-inset: 16px; --hbd-map-card-pad: 24px 20px; --hbd-map-card-top: 20px;
  --hbd-map-card-pull: 120px;
  --hbd-map-card-shadow: 0 10px 15px -3px var(--hbd-black-a10), 0 4px 6px -4px var(--hbd-black-a10);
  --hbd-map-card-heading: 24px; --hbd-map-card-heading-lh: 26.4px; --hbd-map-card-heading-gap: 16px;
  --hbd-map-card-text: 14px; --hbd-map-card-text-lh: 16.8px;
  /* The clinic card a row click opens: a 150px photo (200 from 1024) with no radius, the name at
     24/32, then 20px icon rows 44px apart, the pills, and two buttons pinned to the panel's floor. */
  --hbd-map-detail-photo-h: 150px; --hbd-map-detail-photo-gap: 16px;
  --hbd-map-detail-name: 24px; --hbd-map-detail-name-lh: 32px; --hbd-map-detail-name-gap: 12px;
  --hbd-map-detail-icon: 20px; --hbd-map-detail-icon-gap: 8px;
  --hbd-map-detail-line: 16px; --hbd-map-detail-line-lh: 24px; --hbd-map-detail-row-gap: 12px;
  --hbd-map-detail-address-lh: 19.2px;
  --hbd-map-detail-label: 14px; --hbd-map-detail-label-lh: 16.8px; --hbd-map-detail-label-gap: 16px;
  --hbd-map-detail-pill: 12px; --hbd-map-detail-pill-lh: 13.2px; --hbd-map-detail-pill-pad: 12px 16px;
  --hbd-map-detail-pill-gap: 8px;
  --hbd-map-detail-btn-pad: 12px 24px; --hbd-map-detail-btn-gap: 8px;
  --hbd-map-detail-close: 72px; --hbd-map-detail-close-glyph: 20px; --hbd-map-detail-close-inset: -36px;
  /* The white disc behind the ✕ (client QC 2026-09-23 — live draws a bare glyph): the nudge's 40px disc
     on the card's own shadow. */
  --hbd-map-detail-close-disc: 40px; --hbd-map-detail-close-disc-shadow: var(--hbd-map-card-shadow);
  /* The single-clinic ?cid= embed in the detail card: full column width, 224px tall, 8px radius. */
  --hbd-map-embed-h: 224px; --hbd-map-embed-radius: var(--hbd-radius-xs);

  /* -------------------------------------------------------- google-reviews */
  /* The "<City> Google Reviews" slider: docs/audit/widgets/google-reviews.md. The section has no
     background of its own and uses the site-wide 20/60/80 gutter (--hbd-row-gutter); its padding
     steps 40 → 64 at 768, where the heading also steps 32 → 48. */
  --hbd-reviews-pad: 40px;
  --hbd-reviews-heading: 32px; --hbd-reviews-heading-lh: 35.2px;
  --hbd-reviews-head-gap: 8px; --hbd-reviews-head-pad: 24px; --hbd-reviews-head-space: 32px;
  --hbd-reviews-head-col-gap: 16px;
  --hbd-reviews-rule: 1px solid var(--hbd-black-a20);
  /* The aggregate line uses the theme's default star (20px, 2px apart — 5 × 20 + 4 × 2 = live's own
     108), then 8px to the score and again to the count. */
  --hbd-reviews-rating-gap: 8px;
  --hbd-reviews-score: 14px; --hbd-reviews-score-lh: 16.8px;
  --hbd-reviews-count: 12px; --hbd-reviews-count-lh: 14.4px; --hbd-reviews-count-color: #5A524E;
  --hbd-reviews-ls: .025em;
  /* The arrows are hbd-testimonials' to the pixel — 40px navy discs with a 13.33 × 12.96 glyph —
     but 16px apart here rather than 8. */
  --hbd-reviews-nav-size: 40px; --hbd-reviews-nav-gap: 16px; --hbd-reviews-nav-icon: 14.5px;
  /* The card: 320px tall whatever it holds, three across from 1024 and two from 640. */
  --hbd-reviews-cols: 1; --hbd-reviews-gap: 24px;
  --hbd-reviews-card-h: 320px; --hbd-reviews-card-pad: 24px; --hbd-reviews-card-radius: var(--hbd-radius-s);
  --hbd-reviews-avatar: 32px; --hbd-reviews-avatar-gap: 8px; --hbd-reviews-avatar-initial: 14px;
  /* The same star in a card, 4px apart rather than 2 (5 × 20 + 4 × 4 = 116, live's own). */
  --hbd-reviews-card-star-gap: 4px;
  --hbd-reviews-date: 12px; --hbd-reviews-date-lh: 16px; --hbd-reviews-date-color: #4F4849;
  --hbd-reviews-date-top: 12px; --hbd-reviews-date-bottom: 8px;
  --hbd-reviews-text: 16px; --hbd-reviews-text-lh: 22.4px;
  --hbd-reviews-name: 14px; --hbd-reviews-name-lh: 20px; --hbd-reviews-name-top: 16px;
}
@media (min-width: 640px) {
  :root { --hbd-reviews-cols: 2; }
}
@media (min-width: 768px) {
  :root { --hbd-reviews-pad: 64px; --hbd-reviews-heading: 48px; --hbd-reviews-heading-lh: 52.8px; --hbd-reviews-head-space: 40px; }
}
@media (min-width: 1024px) {
  :root {
    --hbd-reviews-cols: 3;
    --hbd-map-heading: 40px; --hbd-map-heading-lh: 53.33px;
    --hbd-map-panel-inset: 40px; --hbd-map-panel-inset-block: 20px;
    --hbd-map-detail-photo-h: 200px; --hbd-map-detail-photo-gap: 20px;
  }
}
@media (min-width: 1280px) {
  :root { --hbd-map-panel-w: 460px; }
}

/* Forms (assets/css/forms.css) — the Gravity Forms field box. Measured off the Figma "FAQs" comp,
   which is the contact page's form: every text control is 259 × 40 at 1440 with a hairline border and
   its 12px mono label 8px above it, and the message box is 142px tall. (Production's own numbers are
   unusable here — live's form is a Steer Health iframe, an outgoing vendor whose styling is not the
   brand's; see docs/audit/widgets/contact-split.md §6.) */
:root {
  --hbd-field-h: 40px; --hbd-field-textarea-h: 142px;
}

/* Contact split (hbd-contact-split) — /contact/'s art panel + form (`#section-contactPromptSection`)
   and the "Contact <City> Hormones By Design" photo + form at the bottom of every /location/* page
   (`#section-contactUsFormLocation`). Measured on hormonesbydesign.com 2026-09-18 at
   1440/1280/1279/1152/1100/1024/768/390. Tables: docs/audit/widgets/contact-split.md. */
:root {
  /* The art panel is the *same live component* as /faq/'s side panel — identical 350 / 300 / 519
     stacked heights and the same 800px floor once it becomes a column — so it is aliased here rather
     than re-measured under a second set of numbers. Plan 6's token pass should fold the two names
     together under one neutral name. */
  --hbd-contact-art-h: var(--hbd-faq-aside-h);
  --hbd-contact-art-min-h: var(--hbd-faq-aside-min-h);
  /* Column gap. Both compositions stack with 40px between the media and the form; side by side from
     1280 the art panel keeps 48 and the clinic photo 40 (measured at both 1280 and 1440). */
  --hbd-contact-gap: 40px; --hbd-contact-art-gap: 40px;
  /* The form column is padded off the top of the band rather than pinned to it: production's first
     label sits 49px below the section's top edge (client QC, 2026-09-21). */
  --hbd-contact-form-pad: 48px;
  --hbd-contact-submit-arrow: 14px;
  /* Production runs the fields flush to the window edge at 1440 (its input border is the last pixel),
     which means the band is capped rather than padded: above 1440 the extra width becomes margin, so
     the form stops touching the browser edge. Same `max-w-[1440px] mx-auto` the hero and the donate
     band use (client QC, 2026-09-21). Inert at 1440 and below. */
  --hbd-contact-max: 1440px;
  /* The one Yes/No question is a segmented pill at the right end of its own label row — a 40px capsule
     on #F9F7F5, sampled off production's screenshot, with the chosen segment reversed out in white. */
  --hbd-contact-toggle-bg: #F9F7F5; --hbd-contact-toggle-h: 40px; --hbd-contact-toggle-seg: 67px;
  /* /contact/ heading: Loretta 400, 34/37.4 on a phone, 40/44 at 768, 56/61.6 from 1024 — and it is
     drawn in pure black, not in ink like every other heading on the site. */
  --hbd-contact-art-heading: 34px; --hbd-contact-art-heading-lh: 37.4px;
  /* 24px under the heading, then Neue Haas 16/24 (18/27 from 1024) in ink, centred and capped. */
  --hbd-contact-art-head-gap: 24px;
  --hbd-contact-art-text: 16px; --hbd-contact-art-text-lh: 24px; --hbd-contact-art-text-max: 350px;
  /* The artwork: sky with a deep-blue wash falling from the top-left corner, a second wash rising out
     of the bottom-right one, and two families of very faint concentric rings over both. Live renders
     it in the page (there is no image file to side-load), so it is a gradient stack here too; the
     colour fit is recorded in docs/audit/widgets/contact-split.md §4. */
  --hbd-contact-art-ring: rgba(36, 52, 86, .022);
  --hbd-grad-contact-art:
    repeating-radial-gradient(circle at 44% 132%, transparent 0 60px, var(--hbd-contact-art-ring) 60px 62px),
    repeating-radial-gradient(circle at 78% -32%, transparent 0 60px, var(--hbd-contact-art-ring) 60px 62px),
    radial-gradient(ellipse 66% 88% at 46% 128%, rgba(91, 165, 194, .10) 0 56%, rgba(91, 165, 194, .26) 99%, transparent 100%),
    radial-gradient(152% 212% at -10% 0%, #96C1D4 0%, #AED3E3 24%, #C8E4EF 50%, rgba(220, 240, 249, 0) 74%),
    var(--hbd-sky);
  /* /location/* heading: Loretta 300, 32/38.4 at *every* width, ink, capped at 620px and centred in
     its column; 30px clear of the form side by side, 10px while stacked. */
  --hbd-contact-heading: 32px; --hbd-contact-heading-lh: 38.4px; --hbd-contact-heading-max: 620px;
  --hbd-contact-head-gap: 10px;
  /* The clinic photo: 860px tall, cropped to fill its column — and not rendered below 1280. */
  --hbd-contact-photo-h: 860px;
  /* Section padding above the clinic composition: 60 on a phone, 120 from 768, 80 from 1280. There is
     no padding below it — live's section ends exactly where the form does. */
  --hbd-contact-pad-top: 60px;
}
@media (min-width: 768px) {
  :root { --hbd-contact-art-heading: 40px; --hbd-contact-art-heading-lh: 44px; --hbd-contact-pad-top: 120px; }
}
@media (min-width: 1024px) {
  :root {
    --hbd-contact-art-heading: 56px; --hbd-contact-art-heading-lh: 61.6px;
    --hbd-contact-art-text: 18px; --hbd-contact-art-text-lh: 27px; --hbd-contact-art-text-max: 380px;
    /* From 1024 up the panel is tall enough that live's artwork reads as a different crop of itself:
       the wash falls off *inside* the panel instead of covering it, and the rim of the bottom circle
       comes into view. Same composition, geometry re-fitted — the phone/tablet band above shows the
       middle of the artwork, this shows its corner. */
    --hbd-grad-contact-art:
      repeating-radial-gradient(circle at 44% 121%, transparent 0 60px, var(--hbd-contact-art-ring) 60px 62px),
      repeating-radial-gradient(circle at 78% -20%, transparent 0 60px, var(--hbd-contact-art-ring) 60px 62px),
      radial-gradient(ellipse 60% 52% at 44% 121%, rgba(91, 165, 194, .10) 0 56%, rgba(91, 165, 194, .26) 99%, transparent 100%),
      radial-gradient(112% 88% at -10% 0%, #96C1D4 0%, #AED3E3 24%, #C8E4EF 50%, rgba(220, 240, 249, 0) 74%),
      var(--hbd-sky);
  }
}
@media (min-width: 1280px) {
  :root { --hbd-contact-art-gap: 48px; --hbd-contact-head-gap: 30px; --hbd-contact-pad-top: 80px; }
}

/* ------------------------------------------------------------------------------------------------
   hbd-split-content — photo-compact (Plan 5 Task 5, 2026-09-20), measured off
   /treatment/hormone-replacement-therapy/ `#section-whyInjections` (split-content.md §12.2).
   ------------------------------------------------------------------------------------------------ */
:root {
  /* Re-read off production's markup in the 2026-09-23 tablet/phone pass (split-content.md §12.4):
     `md:py-[120px] py-[60px]`, a 20px stacked gap, the copy stacked ABOVE the 540 × 600 photograph
     below 1024 (`lg:order-first order-last`), the copy column `lg:max-w-[450px] xl:max-w-[550px]`,
     paragraphs in EK Notice 20/22 on 0.5% tracking with 20px between them, the heading and the
     candidate line 32px under, the list 16/19.2 on 2.5% tracking with 8px rows. */
  --hbd-split-pad-compact: 60px;
  --hbd-split-row-gap-compact: 20px;
  --hbd-split-compact-photo-w: 540px; --hbd-split-compact-photo-h: 600px;
  --hbd-split-compact-copy-w: none;
  --hbd-split-compact-block-gap: 32px;
  --hbd-split-compact-heading: 40px; --hbd-split-compact-heading-lh: 44px;
  --hbd-split-compact-text: 20px; --hbd-split-compact-text-lh: 22px; --hbd-split-compact-text-ls: .005em;
  --hbd-split-compact-para-gap: 20px;
  --hbd-split-compact-list: 16px; --hbd-split-compact-list-lh: 19.2px; --hbd-split-compact-list-gap: 8px;
  --hbd-split-compact-list-indent: 20px;
}
@media (min-width: 768px) {
  :root { --hbd-split-pad-compact: 120px; }
}
@media (min-width: 1024px) {
  :root { --hbd-split-compact-copy-w: 450px; }
}
@media (min-width: 1280px) {
  :root { --hbd-split-compact-copy-w: 550px; }
}

/* ------------------------------------------------------------------------------------------------
   hbd-split-content — panel-photo (Plan 5 Task 5, 2026-09-20), measured off
   /treatment/hormone-replacement-therapy/ `#section-whyChooseHormonesSection` at 1440/1024/768/390
   from that page's single production load (docs/audit/widgets/split-content.md §11).
   ------------------------------------------------------------------------------------------------ */
:root {
  /* 40px of vertical padding while the photograph is inside the container; none from 1024, where the
     photograph *is* the section's box (603px at both 1440 and 1024). */
  --hbd-split-panel-pad: 40px;
  /* Stacked, the copy follows the photograph by 40px; side by side the columns touch (768–1023) and
     from 1024 the gap is the section gutter. */
  --hbd-split-panel-row-gap: 24px; /* live's `gap-[24px]` (2026-09-23 pass; was 40) */
  /* 445 stacked · 558 at 768–1023 · 603 from 1024 — three read boxes, not one ratio. The copy column
     is 52% of the 768 row (live's 366 against its 342px photograph) and a fixed 495 from 1024. */
  --hbd-split-panel-photo-h: 445px;
  --hbd-split-panel-radius: var(--hbd-radius-xs);
  --hbd-split-panel-copy-w: 100%;
  /* The section's own gutter, **below 1024 only**: the theme's 20 on a phone, and **30** at
     768–1023, where live insets this row by half the site-wide value (§11.2). It is deliberately not
     reset at 1024 — from there the inner drops `padding-inline` and its cap so the photograph can
     run off the section edge, and the copy column carries `--hbd-row-gutter` instead, so this token
     is read by nothing above 1023 (`widgets/hbd-split-content/assets/style.css`, the 1024 block). */
  --hbd-split-panel-gutter: var(--hbd-row-gutter);
  /* Loretta Light 40/45 and Neue Haas 18/25.2, neither of which steps at any width. */
  --hbd-split-panel-heading: 40px; --hbd-split-panel-heading-lh: 44px; /* live's `leading-[110%]` (2026-09-23 pass; was 45) */
  --hbd-split-panel-copy-pad-top: 0px;
  --hbd-split-panel-text: 18px; --hbd-split-panel-text-lh: 25.2px;
  /* Below 1024 live's stacked/two-column markup spaces the copy `mb-6` (24) and puts 30 above the
     button; the ≥1024 composition keeps the 20 / 16 measured at 1440 (2026-09-23 pass). */
  --hbd-split-panel-head-gap: 24px;
  --hbd-split-panel-block-gap: 30px;
}
@media (min-width: 768px) {
  :root { --hbd-split-panel-photo-h: 480px; --hbd-split-panel-copy-w: 50%; --hbd-split-panel-gutter: 30px; --hbd-split-panel-copy-pad-top: 8px; } /* live: `md:w-1/2` columns, 24px gap, the photo `md:min-h-[480px]` stretched to the row (2026-09-23 pass) */
}
@media (min-width: 1024px) {
  /* The photograph leaves the container and takes the section's own height; the copy column is the
     fixed 495px live gives it at both 1440 and 1024 (80 + 495 + 80 = 655, 60 + 495 + 60 = 615 — the
     two x positions its photograph starts at). */
  :root { --hbd-split-panel-photo-h: 603px; --hbd-split-panel-copy-w: 495px; --hbd-split-panel-head-gap: 20px; --hbd-split-panel-block-gap: 16px; --hbd-split-panel-copy-pad-top: 0px; }
}

/* ------------------------------------------------------------------------------------------------
   hbd-provider-grid (Plan 3 Task 7) — measured on /providers/ and /location/austin/ at
   1440/1280/1279/1100/1024/768/390; every number's source is named in
   docs/audit/widgets/provider-grid.md §2. Two cards share one grid: `index` (the /providers/ card)
   and `clinic` (the location-page card); the `-c-` tokens are the clinic card's.
   Breakpoints are live's own three: 768 (two cards → four), 1024 (the index heading grows) and
   1280 (the clinic card's type scale grows) — the same steps --hbd-row-gutter already switches at.
   ------------------------------------------------------------------------------------------------ */
:root {
  /* Grid: four cards across the content box from 768, two below it, 20px apart at every width. */
  --hbd-prov-col-gap: 20px; --hbd-prov-row-gap: 33px; --hbd-prov-trained-row-gap: 48px;
  /* Section box: the /providers/ section is 40px of air above the H1 and 80px below the last card;
     the location-page section is 80 / 96. */
  --hbd-prov-pad-top: 40px; --hbd-prov-pad-bottom: 80px;
  --hbd-prov-c-pad-top: 80px; --hbd-prov-c-pad-bottom: 96px;
  /* Index head: the H1 is centred on its own longest line and clears the first clinic by 85px. */
  --hbd-prov-heading: 40px; --hbd-prov-heading-lh: 40.8px; --hbd-prov-heading-color: var(--hbd-black);
  --hbd-prov-heading-max: 384px; --hbd-prov-head-gap: 60px;
  /* Clinic group head: an italic 32/38.4 clinic name, the address 11px under it, the pill button
     bottom-aligned beside them, and 40px of air before the cards. 118px to the next group. */
  --hbd-prov-clinic-name: 32px; --hbd-prov-clinic-name-lh: 38.4px;
  --hbd-prov-clinic-addr: 24px; --hbd-prov-clinic-addr-lh: 28.8px; --hbd-prov-clinic-addr-gap: 12px;
  --hbd-prov-clinic-addr-track: 0.005em;
  --hbd-prov-clinic-gap: 40px; --hbd-prov-clinic-stack-gap: 17px;
  /* Each group — and the trained group's heading — sits under a 1px rule with 24px of air below it;
     93px of air above it separates it from the group before. (Together with the rule and that padding
     the measured card-bottom → next-clinic-name distance is 118px.) */
  --hbd-prov-rule: 1px solid rgba(0, 0, 0, .4); --hbd-prov-rule-gap: 24px; --hbd-prov-group-gap: 93px;
  /* Live's button is 44px tall because it carries no border; .hbd-btn's 1px transparent one makes 46. */
  --hbd-prov-btn-pad: 12px 24px;
  /* Index card: a 343:390 portrait, an 8px gap to each of the two lines, 5px to the pills. */
  --hbd-prov-photo-ratio: 343 / 390; --hbd-prov-photo-radius: var(--hbd-radius-card);
  --hbd-prov-eyebrow: 14px; --hbd-prov-eyebrow-lh: 20px; --hbd-prov-eyebrow-color: #141414;
  --hbd-prov-eyebrow-gap: 8px; --hbd-prov-name-gap: 8px; --hbd-prov-pills-gap: 5px;
  --hbd-prov-name: 24px; --hbd-prov-name-lh: 32px;
  /* Index pills: the mono face at 14/20 with *no* tracking, 6/16 inside a solid-ink dashed hairline. */
  --hbd-prov-pill: 14px; --hbd-prov-pill-lh: 20px; --hbd-prov-pill-pad: 6px 16px;
  --hbd-prov-pill-radius: 16px; --hbd-prov-pill-border: 1px dashed var(--hbd-ink);
  --hbd-prov-pill-col-gap: 16px; --hbd-prov-pill-row-gap: 6px;
  /* Clinic card: the photo keeps its own 343:380 shape below 768 and is cropped to a fixed height
     from it; the heading is 48/52.8 at every width, the intro navy. */
  --hbd-prov-c-photo-ratio: 343 / 380; --hbd-prov-c-photo-h: auto;
  --hbd-prov-c-heading: 48px; --hbd-prov-c-heading-lh: 52.8px;
  --hbd-prov-c-text: 16px; --hbd-prov-c-text-lh: 24px; --hbd-prov-c-text-gap: 24px;
  --hbd-prov-c-head-gap: 40px;
  --hbd-prov-c-eyebrow: 16px; --hbd-prov-c-eyebrow-lh: 17.6px;
  --hbd-prov-c-name: 18px; --hbd-prov-c-name-lh: 21.6px; --hbd-prov-c-name-gap: 12px;
  /* Clinic pills: the body face, a full pill outline, 8/20, and 16px under the name. */
  --hbd-prov-c-pill: 12px; --hbd-prov-c-pill-lh: 18px; --hbd-prov-c-pill-pad: 8px 20px;
  --hbd-prov-c-pills-gap: 16px; --hbd-prov-c-pill-gap: 8px;
  /* ---- The featured row ("Meet Our Providers", Plan 4 Task 3) -----------------------------------
     Measured on /provider/paige-price/ #section-meetOurProvidersSection at 1440/1024/768/390
     (docs/audit/widgets/provider-grid.md §7). It draws the index card with its own metrics: a
     780:870 photo at a 6px radius, no gap between photo, eyebrow and name, and the provider page's
     own 38px pill. The head is a two-column row from 1024 — heading left, intro + two buttons right,
     the right column capped at 512px — and stacks below it. */
  --hbd-prov-f-pad-top: 20px; --hbd-prov-f-pad-bottom: 60px;
  --hbd-prov-f-heading: 32px; --hbd-prov-f-heading-lh: 48px;
  --hbd-prov-f-intro-gap: 16px; --hbd-prov-f-btns-gap: 32px; --hbd-prov-f-btn-gap: 16px;
  /* The intro is the body face at 16/24 here — not the location grid's 18/27. */
  --hbd-prov-f-text: 16px; --hbd-prov-f-text-lh: 24px;
  /* The intro's own width: the column below 768, 450 while the head is still stacked at 768–1023,
     512 once the head is a row. */
  --hbd-prov-f-intro-max: none; --hbd-prov-f-head-col-gap: 16px;
  --hbd-prov-f-head-gap: 40px;
  --hbd-prov-f-col-gap: 16px; --hbd-prov-f-row-gap: 24px;
  /* Below 768 the four cards are a horizontal scroll track of fixed 304px cards, 12px apart, inset
     4px so the first card's edge lands where live's does (24px at 390). */
  --hbd-prov-f-card-w: 304px; --hbd-prov-f-track-gap: 12px; --hbd-prov-f-track-pad: 4px;
  --hbd-prov-f-photo-ratio: 780 / 870; --hbd-prov-f-photo-max: 304px;
  --hbd-prov-f-photo-radius: 6px;
  --hbd-prov-f-eyebrow-gap: 0px; --hbd-prov-f-name-gap: 0px; --hbd-prov-f-pills-gap: 12px;
  --hbd-prov-f-name: 20px; --hbd-prov-f-name-lh: 28px;
  /* 38px tall on a 14/20 line, so 8 above and below; 16 each side, which is what makes live's
     PAY-AS-YOU-GO pill 145.75 wide. */
  --hbd-prov-f-pill-pad: 8px 16px; --hbd-prov-f-pill-border: 1px dashed var(--hbd-black-a40);
  /* The pills are 12px apart below 1024 and 16 from it, across and down. */
  --hbd-prov-f-pill-gap: 12px;
}
@media (min-width: 768px) {
  :root { --hbd-prov-c-photo-ratio: auto; --hbd-prov-c-photo-h: 147px; --hbd-prov-c-name: 20px; --hbd-prov-c-name-lh: 24px; --hbd-prov-c-pill: 14px; --hbd-prov-c-pill-lh: 21px; --hbd-prov-c-text: 18px; --hbd-prov-c-text-lh: 27px; }
  /* 80px above the heading and 128 below the last pill at 768 — 136 once the head is a row. */
  :root { --hbd-prov-f-pad-top: 80px; --hbd-prov-f-pad-bottom: 128px; --hbd-prov-f-intro-max: 450px; }
}
@media (min-width: 1024px) {
  :root { --hbd-prov-heading: 56px; --hbd-prov-heading-lh: 57.12px; --hbd-prov-c-photo-h: 211px; }
  :root { --hbd-prov-f-pad-bottom: 136px; --hbd-prov-f-heading: 48px; --hbd-prov-f-heading-lh: 48px; --hbd-prov-f-name: 24px; --hbd-prov-f-name-lh: 32px; --hbd-prov-f-pill-gap: 16px; }
}
@media (min-width: 1280px) {
  :root { --hbd-prov-c-photo-h: 305px; --hbd-prov-c-eyebrow: 20px; --hbd-prov-c-eyebrow-lh: 22px; --hbd-prov-c-name: 24px; --hbd-prov-c-name-lh: 28.8px; }
  :root { --hbd-prov-f-intro-max: 512px; }
}

/* Video facade (hbd_video_facade()) — the shared lite embed. The box is live's (16/9, a 16px radius,
   docs/audit/widgets/stats.md §2.4); the play control is ours, because live never draws one (§6).
   A caller that needs a different ratio passes `aspect` and overrides --hbd-video-aspect per
   instance; everything else is set here. */
:root {
  --hbd-video-aspect: 16 / 9;
  --hbd-video-radius: var(--hbd-radius-m);
  /* Shown through a poster that has not loaded, and the whole box when there is no poster at all. */
  --hbd-video-bg: var(--hbd-ink);
  --hbd-video-play: 56px; --hbd-video-play-glyph: 22px;
  /* The glyph is a triangle in a square viewBox, so its optical centre is left of its box centre. */
  --hbd-video-play-glyph-nudge: 2px;
  --hbd-video-play-bg: var(--hbd-white); --hbd-video-play-color: var(--hbd-navy);
  --hbd-video-play-bg-hover: var(--hbd-navy); --hbd-video-play-color-hover: var(--hbd-white);
  --hbd-video-play-shadow: 0 10px 30px var(--hbd-black-a20);
}
@media (min-width: 768px) {
  :root { --hbd-video-play: 80px; --hbd-video-play-glyph: 30px; --hbd-video-play-glyph-nudge: 3px; }
}

/* Steps (hbd-steps) — "Our Process" on /service/membership/ and "How it Works" on
   /service/virtual-care/. Every value measured on hormonesbydesign.com 2026-09-18 at
   1440/1024/768/390; tables and the class attributes they were read off are in
   docs/audit/widgets/steps.md. Breakpoints are live's own Tailwind scale: md 768, lg 1024, xl 1280.
   `--hbd-steps-*` is the `process` composition and everything the two share; `--hbd-steps-hiw-*` is
   only what `how-it-works` measures differently (doc §5). */
:root {
  /* Shell, shared: a 1440px box with a discrete 20 / 60 / 80 gutter and 80px of top padding at every
     width — live's own px values, not the theme's clamp()ed --hbd-gutter. */
  --hbd-steps-max: 1440px;
  --hbd-steps-gutter: 20px;
  --hbd-steps-pad-top: 80px;
  /* process: py-[80px] md:pb-[60px]. how-it-works: py-20 at every width. */
  --hbd-steps-pad-bottom: 80px;
  --hbd-steps-hiw-pad-bottom: 80px;
  /* process alone is separated from the section above it by a hairline (border-t border-black/20). */
  --hbd-steps-border-top: 1px solid var(--hbd-black-a20);
  /* Heading → grid: process is the section's flex gap (20, 60 from 1280); how-it-works is the
     heading's own mb-8 and never changes. */
  --hbd-steps-head-gap: 20px;
  --hbd-steps-hiw-head-gap: 32px;
  /* Heading. process: two families (see the widget's tpl), 38/38 → 48/57.6 from 1280, navy, uncapped.
     how-it-works: the display face alone, 32/48 → 48/48 from 1024, ink, capped at Tailwind's max-w-lg.
     Weight 300 in both: live declares 400 on the how-it-works heading but only the Loretta Light face
     exists, so a declared 400 would paint synthetically bolder (the same trap as hbd-location-cards'
     clinic name and hbd-locations-map's heading; decisions log, 2026-09-17). */
  --hbd-steps-h: 38px; --hbd-steps-h-lh: 38px;
  --hbd-steps-h-color: var(--hbd-navy);
  --hbd-steps-hiw-h: 32px; --hbd-steps-hiw-h-lh: 48px;
  --hbd-steps-hiw-h-color: var(--hbd-ink);
  --hbd-steps-hiw-h-max: 512px;
  /* Grid, shared: one column, four from 1024, 20px apart. */
  --hbd-steps-cols: 1;
  --hbd-steps-gap: 20px;
  /* Card. Sky and the 60 → 55 label gap are shared; the radius, the padding, the floor and whether
     the children stretch are not. */
  --hbd-steps-card-bg: var(--hbd-sky);
  --hbd-steps-card-gap: 60px;
  --hbd-steps-card-radius: var(--hbd-radius-card);
  --hbd-steps-card-pad: 20px 24px;
  --hbd-steps-hiw-card-radius: 20px;
  --hbd-steps-hiw-card-pad: 32px;
  --hbd-steps-hiw-card-min-h: 250px;
  /* Label pill: one dashed capsule, two copies (doc §4). Only the line-height — which is what makes
     it 42px tall against how-it-works' 38 — and the text colour differ. */
  --hbd-steps-label: 14px; --hbd-steps-label-lh: 24px;
  --hbd-steps-label-pad: 8px 20px;
  --hbd-steps-label-border: 1px dashed var(--hbd-black-a40);
  --hbd-steps-label-color: var(--hbd-ink);
  --hbd-steps-hiw-label-lh: 20px;
  --hbd-steps-hiw-label-color: var(--hbd-black);
  /* Body: 16px between the title and the paragraph in both. */
  --hbd-steps-body-gap: 16px;
  /* Title: EK Notice Classic 400 in ink. process steps 18/19.8 → 24/26.4 at 1280; how-it-works holds
     24/26.4 at every width. */
  --hbd-steps-title: 18px; --hbd-steps-title-lh: 19.8px;
  --hbd-steps-hiw-title: 24px; --hbd-steps-hiw-title-lh: 26.4px;
  /* Text: 16/19.2 in ink in both, but set in the second serif on process and in the body face on
     how-it-works; process also caps it at 230px from 1280 (live's xl:w-[230px], which is 15px inside
     the card's 245px content box). */
  --hbd-steps-text: 16px; --hbd-steps-text-lh: 19.2px;
  --hbd-steps-text-family: var(--hbd-font-serif-2);
  --hbd-steps-text-max: none;
  --hbd-steps-hiw-text-family: var(--hbd-font-body);
}
@media (min-width: 768px) {
  :root { --hbd-steps-gutter: 60px; --hbd-steps-pad-bottom: 60px; }
}
@media (min-width: 1024px) {
  :root { --hbd-steps-cols: 4; --hbd-steps-hiw-h: 48px; --hbd-steps-hiw-h-lh: 48px; }
}
@media (min-width: 1280px) {
  :root {
    --hbd-steps-gutter: 80px; --hbd-steps-head-gap: 60px;
    --hbd-steps-h: 48px; --hbd-steps-h-lh: 57.6px;
    --hbd-steps-card-gap: 55px; --hbd-steps-card-pad: 30px;
    --hbd-steps-title: 24px; --hbd-steps-title-lh: 26.4px;
    --hbd-steps-text-max: 230px;
  }
}

/* Stats (hbd-stats) — the documentary section on /our-story/ and /pincc/. Every value measured on
   hormonesbydesign.com 2026-09-18 at 1440/1024/768/390; tables in docs/audit/widgets/stats.md. The two
   live instances measure identically, so there is one family of tokens and no variant. Breakpoints are
   live's own Tailwind scale: md 768, lg 1024, xl 1280. */
:root {
  /* Shell: a 1440px box with the site-wide 20 / 60 / 80 gutter inside it and its own 40 / 80 / 100
     vertical padding, so a dropped-in instance matches production without Design → Vertical padding. */
  --hbd-stats-max: 1440px;
  --hbd-stats-gutter: 20px;
  --hbd-stats-pad: 40px;
  /* Head: a centred column. Live spends 24px of flex gap *plus* 24px of margin under the eyebrow
     capsule; one 48px gap is the same two boxes. The space under the head is 60 / 75 / 80. */
  --hbd-stats-head-gap: 48px;
  --hbd-stats-head-space: 60px;
  /* Eyebrow: a filled white capsule on a 1px **pink** hairline, where .hbd-eyebrow--pill is a
     transparent dashed one at 12px. The 24px line box is live's inherited body leading, and it is what
     makes the capsule 42px tall rather than 32 — i.e. what puts every box below it on live's y. */
  --hbd-stats-eyebrow: 16px; --hbd-stats-eyebrow-lh: 24px;
  --hbd-stats-eyebrow-pad: 8px 16px;
  --hbd-stats-eyebrow-bg: var(--hbd-white);
  --hbd-stats-eyebrow-border: 1px solid var(--hbd-pink);
  /* Two tracking values, neither of them the shared --hbd-tracking-mono (6%): the mono runs are at
     2.5% and the serif numbers at 0.5% (doc §4). */
  --hbd-stats-tracking: 0.025em;
  --hbd-stats-num-tracking: 0.005em;
  /* Statement: Loretta Light 300, centred, shrink-to-fit; 32 → 38 at 768 → 40 at 1024. */
  --hbd-stats-h: 32px; --hbd-stats-h-lh: 32px;
  /* Video: capped at 896, 16/9, a 16px radius and live's shadow-2xl + ring-4 white/5. The space under
     it is the one gap that gets *smaller* at the top width (89 → 60 at 1280). */
  --hbd-stats-video-max: 896px;
  --hbd-stats-video-space: 89px;
  --hbd-stats-video-shadow: 0 25px 50px -12px var(--hbd-black-a25), 0 0 0 4px var(--hbd-white-a05);
  /* Stats grid: one column 24px apart, three 42px apart from 768. */
  --hbd-stats-cols: 1;
  --hbd-stats-gap: 24px;
  --hbd-stats-item-gap: 8px;
  --hbd-stats-num: 42px; --hbd-stats-num-lh: 42px;
  /* The label is 16/16 above *and* below the 768–1023 band, where it is 14/14 (live's
     text-base md:text-sm lg:text-base), and never wider than 220px. */
  --hbd-stats-label: 16px; --hbd-stats-label-lh: 16px;
  --hbd-stats-label-max: 220px;
  --hbd-stats-btn-space: 40px;
}
@media (min-width: 768px) {
  :root {
    --hbd-stats-gutter: 60px; --hbd-stats-pad: 80px;
    --hbd-stats-head-space: 75px;
    --hbd-stats-h: 38px; --hbd-stats-h-lh: 38px;
    --hbd-stats-cols: 3; --hbd-stats-gap: 42px;
    --hbd-stats-label: 14px; --hbd-stats-label-lh: 14px;
    --hbd-stats-btn-space: 48px;
  }
}
@media (min-width: 1024px) {
  :root {
    --hbd-stats-h: 40px; --hbd-stats-h-lh: 40px;
    --hbd-stats-label: 16px; --hbd-stats-label-lh: 16px;
  }
}
@media (min-width: 1280px) {
  :root {
    --hbd-stats-gutter: 80px; --hbd-stats-pad: 100px;
    --hbd-stats-head-space: 80px;
    --hbd-stats-video-space: 60px;
  }
}

/* Accordion media (hbd-accordion-media) — "How it Works" on both /treatment/* pages and "Care to Meet
   the Needs of your Day" on /service/membership/. Every value measured on hormonesbydesign.com
   2026-09-18 at 1440/1024/768/390; tables, the rule scan the box model was read off and the eleven
   deltas that earn the variant are in docs/audit/widgets/accordion-media.md. Breakpoints are live's own
   Tailwind scale: md 768, lg 1024, xl 1280. `--hbd-am-*` is the `how-it-works` composition and
   everything the two share; `--hbd-am-cn-*` is only what `care-needs` measures differently (doc §5.2). */
:root {
  /* Shell, shared: a 1440px box with the site-wide discrete 20 / 60 / 80 gutter and 80px of vertical
     padding at every width — except that `care-needs` has **none at the top**: live's membership
     section reports `padding: 0px` and opens flush with its head (doc §3.2, §7). */
  --hbd-am-max: 1440px;
  --hbd-am-gutter: 20px;
  --hbd-am-pad: 80px;
  --hbd-am-cn-pad-top: 0px;
  /* Heading: Loretta 48/48 at every width in both, ink on the treatments and navy on membership.
     Weight 300, as everywhere else: only the Loretta Light face exists, so a declared 400 would paint
     synthetically bolder (decisions log, 2026-09-17). */
  --hbd-am-h: 48px; --hbd-am-h-lh: 48px;
  --hbd-am-h-color: var(--hbd-ink);
  /* Intro copy: Neue Haas 16/24 — live's own leading, not the theme's 1.55 body rhythm, which would
     be 24.8 and put every box under a two-paragraph intro 2.8px low. */
  --hbd-am-intro: 16px; --hbd-am-intro-lh: 24px;
  /* how-it-works head: 32px from the heading to the button, then 40px to the list's first rule. */
  --hbd-am-head-gap: 32px;
  --hbd-am-head-space: 40px;
  /* Columns: one while stacked; 20px apart at 768 and 80px from 1024, where the photo also rises to
     the top of the section and the head moves into the text column. */
  --hbd-am-col-gap: 20px;
  /* Row: 16 above and below the trigger and 24 from the trigger to its answer — and that 24 is there
     whether the panel is open or closed, which is what makes a closed row 95px tall (doc §3.1). The
     rule is drawn above each row, on pure black at 20%, the same hairline as hbd-faq's. */
  --hbd-am-row-pad: 16px; --hbd-am-row-gap: 24px;
  --hbd-am-rule: 1px solid var(--hbd-black-a20);
  /* Trigger: Neue Haas 20/20 on a 38px-minimum row — hbd-faq's question row exactly. */
  --hbd-am-title: 20px; --hbd-am-title-lh: 20px; --hbd-am-title-family: var(--hbd-font-body);
  --hbd-am-title-color: var(--hbd-ink); --hbd-am-row-min-h: 38px;
  /* Icon: the same 38px dashed circle, 8px of padding, 20px glyph and ink-at-40% → ink border swap the
     FAQ rows measure (doc §3.3). */
  --hbd-am-icon: 38px; --hbd-am-icon-pad: 8px; --hbd-am-icon-glyph: 20px;
  --hbd-am-icon-border: var(--hbd-ink-a40); --hbd-am-icon-border-open: var(--hbd-ink);
  /* Answer: 16/22.4 in pure black. */
  --hbd-am-answer: 16px; --hbd-am-answer-lh: 22.4px; --hbd-am-answer-color: var(--hbd-black);
  /* The panel's height and opacity animate together over 0.3s on the shared easing curve. */
  --hbd-am-dur: .3s;
  /* Photo: a fixed height per breakpoint, `object-fit: cover`, 12px radius; 40px clear of the button
     and 20px clear of the list when it is stacked between them at ≤767. */
  --hbd-am-media-h: 350px;
  --hbd-am-media-radius: var(--hbd-radius-s);
  --hbd-am-media-gap: 20px;

  /* --------------------------------------------------------------------- care-needs (membership) */
  /* Head: heading and intro are two columns from 1024, centred against each other, with the heading
     capped and the intro column a measured width; stacked 20px apart below that. */
  --hbd-am-cn-h-color: var(--hbd-navy);
  --hbd-am-cn-h-max: none;
  --hbd-am-cn-intro-w: auto;
  --hbd-am-cn-head-gap: 20px;
  /* 28px from the last paragraph to the button, 40px from the button to the hairline, then 40px from
     the hairline to the photo/list row. (28, not the 26 a first reading gives: live's second paragraph
     opens with a `<br>`, whose own 20px box sits 2px inside its 24px line box — so the paragraph starts
     where the one above it ends and there is no gap between them.) The hairline is ink at 20% — a hair
     lighter than the black-20% rules inside the list, and measured as such (210,209,209 vs 204,204,204). */
  --hbd-am-cn-intro-gap: 28px;
  --hbd-am-cn-head-space: 40px;
  --hbd-am-cn-rule: 1px solid var(--hbd-ink-a20);
  --hbd-am-cn-row-space: 40px;
  /* Row: 20 above and below, 16 from the trigger to its answer, 20 between rows and the rule *below*
     each one — 20 + 38 + 16 + 0 + 20 + 1 + 20 = the 115px closed pitch (doc §3.2). */
  --hbd-am-cn-row-pad: 20px; --hbd-am-cn-row-gap: 16px; --hbd-am-cn-item-gap: 20px;
  /* Trigger: EK Notice Classic, 16/19.2 up to 768 and 24/28.8 from 1024. Answer: 18/21.6, and from
     1024 it stops at 480px rather than filling its column — live's own cap, and what makes the first
     answer three lines instead of two. */
  --hbd-am-cn-title: 16px; --hbd-am-cn-title-lh: 19.2px; --hbd-am-cn-title-family: var(--hbd-font-serif-2);
  --hbd-am-cn-answer: 18px; --hbd-am-cn-answer-lh: 21.6px; --hbd-am-cn-answer-max: none;
  /* The intro column never runs wider than Tailwind's max-w-xl, which is what makes live's two
     paragraphs wrap at 551px inside the 648px content box at 768. Above 1024 the column is already
     narrower than this, so it only binds on a tablet. */
  --hbd-am-cn-intro-max: 576px;
  /* Photo: a measured width *and* height per breakpoint, not a ratio — live's are Tailwind arbitrary
     values (54.5 / 35.5 / 55.9% of the content box), so the four measurements are carried as they are. */
  --hbd-am-cn-media-w: 100%;
  --hbd-am-cn-media-h: 280px;
  --hbd-am-cn-media-radius: var(--hbd-radius-card);
  --hbd-am-cn-col-gap: 40px;
}
@media (min-width: 768px) {
  :root {
    --hbd-am-gutter: 60px;
    --hbd-am-cn-media-w: 362px; --hbd-am-cn-media-h: 570px;
  }
}
@media (min-width: 1024px) {
  :root {
    --hbd-am-col-gap: 80px;
    --hbd-am-media-h: 512px;
    --hbd-am-cn-h-max: 450px; --hbd-am-cn-intro-w: 434px;
    --hbd-am-cn-media-w: 321px; --hbd-am-cn-media-h: 505px;
    --hbd-am-cn-title: 24px; --hbd-am-cn-title-lh: 28.8px;
    --hbd-am-cn-answer-max: 480px;
  }
}
@media (min-width: 1280px) {
  :root {
    --hbd-am-gutter: 80px;
    --hbd-am-cn-h-max: 500px; --hbd-am-cn-intro-w: 570px;
    --hbd-am-cn-media-w: 697px; --hbd-am-cn-col-gap: 60px;
  }
}

/* hbd-feature-cards (Plan 3 Task 11) — docs/audit/widgets/feature-cards.md. Breakpoints are
   production's own Tailwind scale: md 768, lg 1024, xl 1280. `--hbd-fc-*` is the `panel` composition
   (membership) and everything the two share; `--hbd-fc-ph-*` is only what `photo` (home) measures
   differently (doc §5.2). */
:root {
  /* Shell — the site's flat 1440 box with the discrete 20 / 60 / 80 gutter inside it. `panel` steps to
     80 at lg, `photo` not until xl, which is one of the sixteen deltas. */
  --hbd-fc-max: 1440px;
  --hbd-fc-gutter: 20px;
  --hbd-fc-pad: 80px;
  --hbd-fc-block-gap: 40px;

  /* Head — heading beside the intro from lg on `panel`, from md on `photo`. */
  --hbd-fc-head-gap: 20px;
  --hbd-fc-h: 48px; --hbd-fc-h-lh: 52.8px; --hbd-fc-h-max: none;
  --hbd-fc-intro: 16px; --hbd-fc-intro-lh: 22.4px; --hbd-fc-intro-w: 100%;
  --hbd-fc-ls: .025em;

  /* Grid — one column until xl on `panel`, until md on `photo`. */
  --hbd-fc-cols: minmax(0, 1fr);
  --hbd-fc-gap: 20px;

  /* Card — the sky tint is the existing --hbd-sky (measured rgb(220, 240, 249)). 453px is live's own
     minimum below md: three of the four cards measure exactly 453 with 442–444 of content in them,
     and the fourth (whose copy runs to five lines) is taller. */
  --hbd-fc-card-bg: var(--hbd-sky);
  --hbd-fc-card-radius: var(--hbd-radius-card);
  --hbd-fc-card-pad: 20px;
  --hbd-fc-card-min-h: 453px;
  --hbd-fc-card-gap: 30px;

  /* Card type. */
  --hbd-fc-title: 32px; --hbd-fc-title-lh: 35.2px; --hbd-fc-title-max: none;
  --hbd-fc-title-color: var(--hbd-ink);
  --hbd-fc-body-gap: 24px;
  --hbd-fc-text: 16px; --hbd-fc-text-lh: 19.2px; --hbd-fc-text-max: 220px;
  --hbd-fc-text-color: var(--hbd-ink);

  /* Card image — `contain`, at a measured size per breakpoint, centred below md and right-aligned
     above it. */
  --hbd-fc-img-w: 280px; --hbd-fc-img-h: 220px;
  --hbd-fc-media-justify: center;

  /* ---- photo (home) ---- */
  --hbd-fc-ph-pad: 40px;
  --hbd-fc-ph-gutter: 20px;
  --hbd-fc-ph-head-gap: 10px;
  --hbd-fc-ph-intro: 20px; --hbd-fc-ph-intro-lh: 28px; --hbd-fc-ph-intro-w: 100%;
  --hbd-fc-ph-cols: minmax(0, 1fr);
  --hbd-fc-ph-gap: 26px;
  --hbd-fc-ph-card-h: 350px;
  /* The two absolute blocks: 32 from the top of the card, 27 from the bottom, at every width. */
  --hbd-fc-ph-inset-top: 32px; --hbd-fc-ph-inset-bottom: 27px;
  --hbd-fc-ph-title: 24px; --hbd-fc-ph-title-lh: 28.8px; --hbd-fc-ph-title-track: -.05em;
  --hbd-fc-ph-text: 14px; --hbd-fc-ph-text-lh: 19.6px; --hbd-fc-ph-text-max: none;
  --hbd-fc-ph-color: var(--hbd-cream);
}
@media (min-width: 768px) {
  :root {
    --hbd-fc-gutter: 60px;
    --hbd-fc-card-min-h: 0px;
    --hbd-fc-img-w: 290px; --hbd-fc-img-h: 240px;
    --hbd-fc-media-justify: flex-end;
    --hbd-fc-text-max: 265px;
    --hbd-fc-ph-pad: 80px;
    --hbd-fc-ph-gutter: 60px;
    --hbd-fc-ph-intro-w: 380px;
    --hbd-fc-ph-cols: repeat(3, minmax(0, 1fr));
    --hbd-fc-ph-card-h: 400px;
  }
}
@media (min-width: 1024px) {
  :root {
    --hbd-fc-gutter: 80px;
    --hbd-fc-h-max: 340px;
    --hbd-fc-intro-w: 450px;
    --hbd-fc-title-max: 195px;
    --hbd-fc-ph-intro-w: 441px;
    --hbd-fc-ph-card-h: 600px;
    --hbd-fc-ph-text-max: 220px;
  }
}
@media (min-width: 1280px) {
  :root {
    --hbd-fc-cols: repeat(2, minmax(0, 1fr));
    --hbd-fc-gap: 40px;
    --hbd-fc-text-max: 220px;
    --hbd-fc-ph-gutter: 80px;
    --hbd-fc-ph-title: 32px; --hbd-fc-ph-title-lh: 38.4px;
    --hbd-fc-ph-text: 16px; --hbd-fc-ph-text-lh: 22.4px; --hbd-fc-ph-text-max: 312px;
  }
}

/* hbd-conditions (Plan 3 Task 12) — docs/audit/widgets/conditions.md. Breakpoints are production's own
   Tailwind scale: md 768, xl 1280. The two live sections (`/treatment/hormone-replacement-therapy/` and
   `/treatment/thyroid-balancing/`) measure identically at every width, so there is one family here and
   no variant. */
:root {
  /* Shell — the site's flat 1440 box with the discrete 20 / 60 / 80 gutter inside it, and 40px of
     vertical padding at every width (doc §3.1). Not Design → Vertical padding, so a dropped-in instance
     matches production. */
  --hbd-cond-max: 1440px;
  --hbd-cond-gutter: 20px;
  --hbd-cond-pad: 40px;
  /* Label: Loretta 20/30, ink, no tracking, and a full-width hairline under it drawn on pure black at
     **30%** — one step darker than the 20% rules between the rows (doc §3.2, §3.6: sampled 178,178,178
     under the label against 204,204,204 under a row). Nothing between the rule and the first trigger. */
  --hbd-cond-label: 20px; --hbd-cond-label-lh: 30px;
  --hbd-cond-label-rule: 1px solid var(--hbd-black-a30);
  /* Row: 32 above and below the head row, 20 between the head row, the symptom pills and the copy, and
     the rule *below* each row including the last (doc §3.3, §3.6). */
  --hbd-cond-row-pad: 32px;
  /* How far the open panel's content is lifted so it sits 20px under the head row while the trigger
     keeps its own 32px: the clip box is relaxed by exactly this much so nothing is cut off the top. */
  --hbd-cond-panel-lift: 12px; --hbd-cond-row-gap: 20px;
  --hbd-cond-rule: 1px solid var(--hbd-black-a20);
  /* Head row: the 38px circle, 24 to the title, and at least 16 from the title to the audience pills —
     the gap that caps the title column on a phone (doc §3.3). */
  --hbd-cond-head-gap: 24px; --hbd-cond-aud-space: 16px;
  /* Title: Loretta 16/24, stepping to 32/48 at xl. The switch was measured between 1024 (16) and
     1440 (32); 1280 is production's own xl step and is taken as the breakpoint (doc §2.2). */
  --hbd-cond-title: 16px; --hbd-cond-title-lh: 24px;
  --hbd-cond-title-family: var(--hbd-font-display); --hbd-cond-title-color: var(--hbd-ink);
  /* Icon: the same 38px dashed circle, 8px of padding and 20px glyph box as hbd-faq and
     hbd-accordion-media — but drawn on **pure black**: the closed circle samples 156 (black at 40% is
     153; ink at 40% would be 165) and the open one samples 8, so the swap is black-a40 → black. The
     glyph itself is black too, inherited from live's <button> colour. */
  --hbd-cond-icon: 38px; --hbd-cond-icon-pad: 8px; --hbd-cond-icon-glyph: 20px;
  --hbd-cond-icon-border: var(--hbd-black-a40); --hbd-cond-icon-border-open: var(--hbd-black);
  --hbd-cond-glyph-color: var(--hbd-black);
  /* Pills (doc §3.4). Both are 12/16 with 4px 12px of padding and a pill radius, both at
     `letter-spacing: normal` — *not* the theme's --hbd-tracking-mono, which .hbd-pill would apply.
     Audience: the body face, black on Tailwind blue-100, no border, and the data is already upper-case
     on live. Symptom: the mono face, ink, a 1px dashed hairline on pure black at 40%, upper-cased by
     this stylesheet so the field can hold whatever the editor types. */
  --hbd-cond-pill-pad: 4px 12px; --hbd-cond-pill: 12px; --hbd-cond-pill-lh: 16px;
  --hbd-cond-pill-gap: 8px;
  --hbd-cond-aud-bg: #DBEAFE; --hbd-cond-aud-color: var(--hbd-black);
  --hbd-cond-sym-border: 1px dashed var(--hbd-black-a40); --hbd-cond-sym-color: var(--hbd-ink);
  /* The "+" between two audience pills: the body face at 16/24 in black, live's own <p>. */
  --hbd-cond-plus: 16px; --hbd-cond-plus-lh: 24px; --hbd-cond-plus-color: var(--hbd-black);
  /* Panel: indented 60px from the row's left edge at **every** width — measured at 1440 (140 = 80 + 60),
     1024 and 768 (120 = 60 + 60) and 390 (80 = 20 + 60). Body copy is 16/24 ink. */
  --hbd-cond-panel-indent: 60px;
  --hbd-cond-body: 16px; --hbd-cond-body-lh: 24px; --hbd-cond-body-color: var(--hbd-ink);
  /* The panel's height and opacity animate together over 0.3s on the shared easing curve, as in the
     theme's other two accordions. */
  --hbd-cond-dur: .3s;
}
@media (min-width: 768px) {
  :root {
    --hbd-cond-gutter: 60px;
  }
}
@media (min-width: 1280px) {
  :root {
    --hbd-cond-gutter: 80px;
    --hbd-cond-title: 32px; --hbd-cond-title-lh: 48px;
  }
}

/* hbd-icon-tiles (Plan 3 Task 14) — docs/audit/widgets/icon-tiles.md. Three live instances, **one
   composition**: every measured value matches on all three pages at every width (§1, §2.3), so there
   is one family of tokens and no variant. The only breakpoint is production's md, 768px — run 4 read
   767 / 640 / 639 / 540 and found all four identical to 390, and nothing steps at 1024 or 1280 except
   the site-wide page gutter, which is --hbd-row-gutter (20 / 60 / 80) and is not restated here. */
:root {
  /* Shell: live's flat 1440 box, 80px of block padding at every width, and a single 40px gap that
     serves both heading → grid and grid → button (§3.1). */
  --hbd-it-max: 1440px;
  --hbd-it-pad: 80px;
  --hbd-it-block-gap: 40px;
  /* Heading: Loretta 300 at 48 / 57.6 with no tracking. A heading *with* an <em> measures 60.59 tall
     rather than 57.59 — the italic face's own inline box, not a margin (§1.1) — and nothing here
     compensates for it, because live does not either. */
  --hbd-it-h: 48px; --hbd-it-h-lh: 57.6px;
  /* Grid: one column below md, three equal ones from it; 26px on both axes at every width (§3.2). */
  --hbd-it-cols: 1fr;
  --hbd-it-gap: 26px;
  /* Tile: the photo box is the column's width by a fixed 300px, cropped, at the card radius. The sky
     ground is in the photographs themselves, so no background is drawn behind them (§3.3). */
  --hbd-it-media-h: 300px;
  --hbd-it-media-radius: var(--hbd-radius-card);
  --hbd-it-title-gap: 24px;
  --hbd-it-text-gap: 20px;
  --hbd-it-title: 26px; --hbd-it-title-lh: 31.2px;
  --hbd-it-text: 16px; --hbd-it-text-lh: 19.2px;
  /* The one state live has: the tile link fades to 90% on hover, and nothing else changes (§4). */
  --hbd-it-hover-opacity: .9;
  /* The button under the row is left-aligned on a phone and centred from md — live's own
     inconsistency, measured at 390 / 540 / 639 / 640 / 767 against 768 / 1024 / 1440 (§3.4). */
  --hbd-it-action-justify: flex-start;
}
@media (min-width: 768px) {
  :root {
    --hbd-it-cols: repeat(3, 1fr);
    --hbd-it-title: 32px; --hbd-it-title-lh: 38.4px;
    --hbd-it-action-justify: center;
  }
}

/* ------------------------------------------------------------ comparison-list
   The ✓ vs ✕ columns — both `#section-comparisonsSection` sections on
   /treatment/hormone-replacement-therapy/. Every number is a measurement in
   docs/audit/widgets/comparison-list.md; the section reference is in brackets. One composition, two
   breakpoints: 1024 (the columns go 2-up and the heading steps 32 → 48) and 1280 (the heading moves
   beside the columns). The page gutter is the site-wide --hbd-row-gutter and is not restated. */
:root {
  /* Shell: a flat 1440px box, 40px of block padding under a 1px rule drawn across the *content* box
     — not across the padded shell, which is why the widget renders its own grid element (§3.1, §3.2). */
  --hbd-cl-max: 1440px;
  --hbd-cl-pad: 40px;
  --hbd-cl-rule: 1px solid var(--hbd-grey-250);
  /* Below 1280 the heading is a full-width block 40px above the columns; from 1280 it is a fixed
     270px column 130px to their left — the same gap token, used as a row gap and then a column gap,
     because only one of the two axes exists at a time (§3.1). */
  --hbd-cl-cols: minmax(0, 1fr);
  --hbd-cl-head-gap: 40px;
  --hbd-cl-h: 32px; --hbd-cl-h-lh: 35.2px;
  /* The columns: one up below 1024, two from it, 20px apart on whichever axis applies (§2.3). */
  --hbd-cl-col-cols: minmax(0, 1fr);
  --hbd-cl-col-gap: 20px;
  /* Label: Neue Haas medium *italic* — live's own `_66MediumItalic` cut, a real face — in pure black
     where the rest of the page is ink, 32px above its first row (§3.4). */
  --hbd-cl-label: 20px; --hbd-cl-label-lh: 28px;
  --hbd-cl-label-gap: 32px;
  /* Rows: 16 apart, 8 under the last one (the 8 is what closes the arithmetic on the section height
     and on the 28px gap between stacked columns — §3.3). */
  --hbd-cl-row-gap: 16px;
  --hbd-cl-list-after: 8px;
  /* Marker: a 31px dashed ring centred in a 32px column, 16px from the text. The 32 is also the row's
     minimum height, which is what makes a one-line row 32 and not 24 tall (§3.3). */
  --hbd-cl-marker: 32px;
  --hbd-cl-ring: 31px;
  --hbd-cl-marker-gap: 16px;
  /* Glyph boxes sized so the measured path box matches live's. What the tool reads is the *geometry*
     box, stroke excluded (verified against our own render), and live's is 11.31 × 8.01 for the tick
     and 8.49 square for the cross. The theme's check.svg draws 14 × 9.5 units of its 24-unit viewBox
     and x.svg 12 × 12, so the cross lands exactly at 16.98px while the tick — live's is very slightly
     deeper, 14 × 9.9 in the same units — is sized to live's *width* and comes out 0.33px shallower
     (§2.4, §7.3). */
  --hbd-cl-check: 19.4px;
  --hbd-cl-cross: 16.98px;
  --hbd-cl-text: 16px; --hbd-cl-text-lh: 24px;
}
@media (min-width: 1024px) {
  :root {
    --hbd-cl-h: 48px; --hbd-cl-h-lh: 52.8px;
    --hbd-cl-col-cols: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  :root {
    --hbd-cl-cols: 270px minmax(0, 1fr);
    --hbd-cl-head-gap: 130px;
  }
}

/* hbd-biomarker-tabs (Plan 3 Task 16) — docs/audit/widgets/biomarker-tabs.md. One live instance,
   `/service/membership/` `#section-whatWeTestCardsSection`, measured at 1440 / 1024 / 768 / 390 in a
   single run. Breakpoints are production's own Tailwind scale: md 768, lg 1024, xl 1280 — all three
   are load-bearing here, because the card grid steps 1 → 2 → 3 → 4 across them (doc §5.5). */
:root {
  /* Shell — the site's flat 1440 box with the discrete 20 / 60 / 80 gutter inside it, and 80px of
     vertical padding at every width: content starts at y 80 and ends 80 short of the section box at
     all four widths (doc §5.1). Not Design → Vertical padding, so a dropped-in instance matches
     production. */
  --hbd-bio-max: 1440px;
  --hbd-bio-gutter: 20px;
  --hbd-bio-pad: 80px;
  /* Vertical stack (doc §5.2). One step in the whole section, at xl, and it is only the gap between
     the intro and the photo: 40 below 1280, 80 from it. */
  --hbd-bio-head-gap: 24px;
  --hbd-bio-photo-gap: 40px;
  --hbd-bio-tabs-gap: 60px;
  --hbd-bio-cards-gap: 40px;
  --hbd-bio-note-gap: 60px;
  /* Heading: Loretta Light 300 in navy at `letter-spacing: normal` — base.css tracks headings at
     -0.01em, which live does not. 32/32 below 768, 48/48 from it (doc §5.3). */
  --hbd-bio-h: 32px; --hbd-bio-h-lh: 32px;
  --hbd-bio-h-color: var(--hbd-navy);
  /* Intro: EK Notice Classic in navy, centred, tracked at 0.5% of the size. Capped at 548px below
     1280 and **uncapped** from it — verified in both directions: one line at 1440, two at 1024. */
  --hbd-bio-intro: 20px; --hbd-bio-intro-lh: 24px;
  --hbd-bio-intro-max: 548px;
  --hbd-bio-intro-color: var(--hbd-navy);
  /* Photo: a fixed-height box, 340 below 768 and 400 from it, with the crop `contain`ed and centred
     inside it. 768 is what settles `contain`: the 722-wide crop is scaled *down* to the 648 container
     and the box keeps its 400px height, leaving 20.5px empty above and below (doc §1.1). The ~6px
     radius follows the painted edge, so it is on the image, not on the box. */
  --hbd-bio-photo-h: 340px;
  --hbd-bio-photo-radius: 6px;
  /* Tabs: centred and wrapping, 8px apart on both axes (at 390 they wrap 3 + 3 with the same 8px
     between the rows). Each button is 40 tall with 20px of side padding on a pill radius, in the mono
     face at 12/12 tracked 2.5%. Derived and checked against the measured widths: ALL = 3 × 7.67 + 40
     + 2 = 65.01 against 65.02, GENERAL = 7 × 7.67 + 40 + 2 = 95.7 against 95.69 (doc §5.4). The
     active button drops the 1px border, which is exactly the 2px it is narrower. */
  --hbd-bio-tab-gap: 8px;
  --hbd-bio-tab-h: 40px;
  --hbd-bio-tab-pad: 20px;
  --hbd-bio-tab: 12px; --hbd-bio-tab-lh: 12px;
  --hbd-bio-tab-tracking: 0.025em;
  --hbd-bio-tab-color: var(--hbd-slate-600);
  --hbd-bio-tab-bg: var(--hbd-white);
  --hbd-bio-tab-border: 1px solid var(--hbd-black-a24);
  --hbd-bio-tab-on-color: var(--hbd-white);
  --hbd-bio-tab-on-bg: var(--hbd-navy);
  /* Cards: 1 / 2 / 3 / 4 across, 16px apart on both axes at every width (324 − 308, 306.67 − 290.66,
     332 − 316; rows 202 − 186). 186 is a floor, not a ceiling: every row pitch is 202 at every width,
     and the tallest measured card content is 173.39 (doc §5.5). */
  --hbd-bio-cols: 1;
  --hbd-bio-card-gap: 16px;
  --hbd-bio-card-min-h: 186px;
  --hbd-bio-card-pad: 24px;
  --hbd-bio-card-radius: 12px;
  --hbd-bio-card-bg: var(--hbd-sky);
  /* Chip: 8px of padding around 12/15 mono on a 7px radius — 31px tall, and 8 + 7.87·chars + 8 wide,
     confirmed by GENERAL 71.08 and HORMONES 78.95. Upper-cased by the stylesheet, so the field can
     hold whatever the editor types; tracked a flat 0.5px, not a percentage. */
  --hbd-bio-chip-pad: 8px;
  --hbd-bio-chip: 12px; --hbd-bio-chip-lh: 15px;
  --hbd-bio-chip-tracking: 0.5px;
  --hbd-bio-chip-radius: 7px;
  --hbd-bio-chip-bg: var(--hbd-white);
  --hbd-bio-chip-color: var(--hbd-navy);
  --hbd-bio-chip-gap: 16px;
  /* Name: EK Notice Classic 20/20 in ink, tracked 0.5%, 8px above the description. Description: the
     body face at 12/16.8 in Tailwind slate-600, tracked 2.5%. */
  --hbd-bio-name: 20px; --hbd-bio-name-lh: 20px;
  --hbd-bio-name-gap: 8px;
  --hbd-bio-desc: 12px; --hbd-bio-desc-lh: 16.8px;
  --hbd-bio-desc-color: var(--hbd-slate-600);
  /* Pager (≤767 only, doc §1.3 / §5.6): centred 40px circles 8px apart at 16/16, the current one navy
     with cream type and the rest outlined in ink at 40%. Six cards a page. */
  --hbd-bio-page: 40px;
  --hbd-bio-page-gap: 8px;
  --hbd-bio-page-fs: 16px;
  --hbd-bio-page-border: 1px solid var(--hbd-ink-a40);
  --hbd-bio-page-on-bg: var(--hbd-navy);
  --hbd-bio-page-on-color: var(--hbd-cream);
  /* Closing note: the body face in ink at 80%, centred, tracked 0.5%. 16/22.4 below 768, 18/25.2 from
     it; capped at 450px below 1280 and uncapped from it, like the intro. */
  --hbd-bio-note: 16px; --hbd-bio-note-lh: 22.4px;
  --hbd-bio-note-max: 450px;
  --hbd-bio-note-color: var(--hbd-ink-a80);
}
@media (min-width: 768px) {
  :root {
    --hbd-bio-gutter: 60px;
    --hbd-bio-cols: 2;
    --hbd-bio-h: 48px; --hbd-bio-h-lh: 48px;
    --hbd-bio-intro: 24px; --hbd-bio-intro-lh: 28.8px;
    --hbd-bio-photo-h: 400px;
    --hbd-bio-note: 18px; --hbd-bio-note-lh: 25.2px;
  }
}
@media (min-width: 1024px) {
  :root {
    --hbd-bio-cols: 3;
  }
}
@media (min-width: 1280px) {
  :root {
    --hbd-bio-gutter: 80px;
    --hbd-bio-cols: 4;
    --hbd-bio-photo-gap: 80px;
    /* Live lifts both caps at xl and lets the two centred blocks run the full 1280 container. */
    --hbd-bio-intro-max: none;
    --hbd-bio-note-max: none;
  }
}

/* ---------------------------------------------- stat-cards-marquee (spec #27)
   The moving stat cards in the /pincc/ hero, measured in one run at 1440 / 1024 / 768 / 390
   (docs/audit/widgets/stat-cards-marquee.md). Two layouts of one instance: two vertical lanes from
   1024, one horizontal rail below it. Live's own steps are 1024 (layout) and 1280 (type + block
   width); the gutter is the hero's discrete 20 / 60 / 80, not the theme's clamp()ed --hbd-gutter. */
:root {
  /* Shell. The block bleeds past the right gutter by live's measured amount (§3.4): to the viewport
     edge below 1024, 8px short of it at 1024, 14px short from 1280. */
  --hbd-scm-max: 1440px;
  --hbd-scm-gutter: 20px;
  --hbd-scm-edge: 0px;
  --hbd-scm-w: none;          /* ≥1024: the measured two-lane block width */
  --hbd-scm-h: auto;          /* ≥1024: the *fallback* clip height — the column's own wins */
  --hbd-scm-pad-top: 0px;     /* ≥1024: the lanes' natural 50px top inside that clip */
  /* Card. The two numbers are the *photo* box, as the element tables read them; the 4px pink ring is
     a border the stylesheet adds on top, which is what puts the card's own edge on the page gutter
     (§3.1). Gaps: 24 between rail cards and between the two lanes, 16 down a lane — the same pixels
     either way (pitch 364 across, 374 down). */
  --hbd-scm-card-w: 332px; --hbd-scm-card-h: 350px;
  --hbd-scm-ring: 4px; --hbd-scm-ring-color: var(--hbd-pink);
  --hbd-scm-radius: 10px;
  --hbd-scm-col-gap: 24px; --hbd-scm-row-gap: 16px;
  /* Inside a card: 32px all round, and the copy sits on a 40px floor (photo) or a 48px one (sky
     panel, which also puts 8px between icon, number and label) — §3.2. */
  --hbd-scm-pad: 32px;
  --hbd-scm-pad-bottom: 40px; --hbd-scm-pad-bottom-icon: 48px;
  --hbd-scm-icon: 40px; --hbd-scm-icon-gap: 8px;
  /* Type: the body face at 40/48 and 18/21.6, both tracked 2.5%. The 1024–1279 band is the one step,
     and it steps *down* — the phone rail is back at the widest desktop's sizes (§3.3). */
  --hbd-scm-num: 40px; --hbd-scm-num-lh: 48px;
  --hbd-scm-label: 18px; --hbd-scm-label-lh: 21.6px;
  --hbd-scm-tracking: 0.025em;
  /* Palette: the photo card is live's ink at 20% over the photograph with white copy; the sky panel
     is sky-3 with ink copy (§3.2). */
  --hbd-scm-scrim: var(--hbd-ink-a20);
  --hbd-scm-photo-color: var(--hbd-white);
  --hbd-scm-sky-bg: var(--hbd-sky-3); --hbd-scm-sky-color: var(--hbd-ink);
  /* The loop: live's authored 40s, linear, infinite (§4.1). The widget overrides it per instance from
     the Seconds-per-loop field, which means seconds per *lane* loop. The phone rail derives its own
     duration from that, so it travels at the same pixels per second rather than merely sharing the
     number — distance ÷ distance splits into two unitless factors:
       • --hbd-scm-card-ratio  = cards ÷ lane cards. Only PHP knows the count, so the widget writes it
         on the instance; the 2 here is live's six cards in two lanes of three.
       • --hbd-scm-pitch-ratio = rail pitch ÷ lane pitch = (332 + 8 + 24) ÷ (350 + 8 + 16) = 364 ÷ 374.
         calc() cannot divide a length by a length, so it is authored here beside the tokens it comes
         from, and tests/test-widget-stat-cards-marquee.php recomputes it from those four tokens so the
         two cannot drift. */
  --hbd-scm-speed: 40s;
  --hbd-scm-card-ratio: 2;
  --hbd-scm-pitch-ratio: 0.973262;
  /* Pause / Play pill: a fixed 90 × 40 capsule, white at 80% on a slate hairline with Tailwind's
     two-layer md shadow, a 20px glyph 8px from a 14/16.8 label (§3.5). It sits 16px inside the top
     of the rail below 1024 and 16px inside the bottom of the block above it. */
  --hbd-scm-btn-w: 90px; --hbd-scm-btn-h: 40px;
  --hbd-scm-btn-gap: 8px; --hbd-scm-btn-glyph: 20px;
  --hbd-scm-btn-fs: 14px; --hbd-scm-btn-lh: 16.8px;
  --hbd-scm-btn-bg: var(--hbd-white-a80);
  --hbd-scm-btn-border: 1px solid var(--hbd-slate-200);
  --hbd-scm-btn-color: var(--hbd-slate-800);
  --hbd-scm-btn-shadow: 0 4px 6px -1px var(--hbd-black-a10), 0 2px 4px -2px var(--hbd-black-a10);
  --hbd-scm-btn-inset: 16px; --hbd-scm-btn-top: 16px;
}
@media (min-width: 768px) {
  :root {
    --hbd-scm-gutter: 60px;
  }
}
@media (min-width: 1024px) {
  :root {
    /* The two lanes: 449px of block, 8px short of the viewport edge, clipped to the column's height —
       live's 700px hero being the fallback when the column has none — with the lanes starting 50px
       down it. Live's own lanes are an unequal 192.5 / 216.5 here; ours are
       1fr each (§2.2, §5.2). */
    --hbd-scm-w: 449px; --hbd-scm-h: 700px; --hbd-scm-pad-top: 50px; --hbd-scm-edge: 8px;
    --hbd-scm-num: 34px; --hbd-scm-num-lh: 40.8px;
    --hbd-scm-label: 16px; --hbd-scm-label-lh: 19.2px;
  }
}
@media (min-width: 1280px) {
  :root {
    --hbd-scm-gutter: 80px;
    --hbd-scm-w: 652px; --hbd-scm-edge: 14px;
    --hbd-scm-num: 40px; --hbd-scm-num-lh: 48px;
    --hbd-scm-label: 18px; --hbd-scm-label-lh: 21.6px;
  }
}

/* mixed-cards (hbd-mixed-cards) — the four text/image cards on `/pincc/`
   (`#section-pinccFeaturesSection`). Every value measured 2026-09-19 at 1440/1024/768/390; the
   section it came from in docs/audit/widgets/mixed-cards.md is named inline. The four dumps are the
   same layout: only the gutter (40 → 20) and the vertical padding (80 → 40) move, so there are just
   two steps here — both *inferred* breakpoints, because the run has no width between the two states
   (§3.4). */
:root {
  /* The wrapper is live's flat 1440px box; the gutter is the *track's* inline padding rather than the
     port's, which is what makes the row scroll below 1440 and still leave 40px to the right of card 4
     at 1440 (§3.4). */
  --hbd-mxc-max: 1440px;
  --hbd-mxc-gutter: 20px;
  --hbd-mxc-pad: 40px;
  /* The card: a fixed 324 × 568 with a 20px gap, at every width (§3.1). The height is a floor, not a
     height — live's tallest card fills 551.1 of it and the flexible spacer absorbs the rest; longer
     client copy grows the card instead of overflowing it. */
  --hbd-mxc-card-w: 324px;
  --hbd-mxc-card-h: 568px;
  --hbd-mxc-gap: 20px;
  --hbd-mxc-card-bg: var(--hbd-sky);
  /* 13px outside = the photo's measured 10px radius plus the 3px frame (§3.1). */
  --hbd-mxc-radius: 13px;
  --hbd-mxc-photo-radius: var(--hbd-radius-card);
  /* The pink frame around the photo: 3px, the full card width, flush with the card's top or bottom
     edge (§3.1). */
  --hbd-mxc-frame: 3px;
  --hbd-mxc-frame-color: var(--hbd-pink);
  --hbd-mxc-photo-h: 205px;
  /* Inside a card (§3.2). */
  --hbd-mxc-card-pad: 24px;
  --hbd-mxc-title-gap: 12px;
  --hbd-mxc-text-gap: 16px;
  /* Type (§3.3): EK Notice Classic 24/26.4 tracked 0.5 %, the body face 16/19.2 tracked 2.5 %. Neither
     changes at any width. */
  --hbd-mxc-title: 24px; --hbd-mxc-title-lh: 26.4px; --hbd-mxc-title-track: .005em;
  --hbd-mxc-text: 16px; --hbd-mxc-text-lh: 19.2px; --hbd-mxc-text-track: .025em;
  /* The next arrow: a 34px white circle with a ~16px ink glyph and Tailwind's shadow-lg — the shadow
     is inferred from the tint it leaves on the screenshot, the only thing about it that cannot be
     read exactly (§3.5). */
  --hbd-mxc-arrow: 34px;
  --hbd-mxc-arrow-glyph: 16px;
  --hbd-mxc-arrow-shadow: var(--hbd-shadow-drawer);
}
@media (min-width: 768px) {
  :root {
    --hbd-mxc-pad: 80px;
  }
}
@media (min-width: 1280px) {
  :root {
    --hbd-mxc-gutter: 40px;
  }
}

/* link-accordion (hbd-link-accordion) — the New Patient Forms section on `/new-patient-forms/`
   (`#section-patientsFormSection`). One live composition: a heading centred on an art panel, and the
   two-row accordion beside it from 1280 / under it below that. The section of
   docs/audit/widgets/link-accordion.md each number came from is named inline. The shell is the one
   `hbd-faq --aside` draws — live even points both at `…/backgrounds/faq_desktop.webp` — but the panel
   heights below 1024 are this section's own, so they are tokens here rather than --hbd-faq-aside-*. */
:root {
  /* The section carries no padding of its own: the art panel's height and the accordion column's
     padding-top are live's whole vertical rhythm, and the last row's 16px margin is its bottom edge
     (§3.1). Declared so a dropped-in instance matches production rather than taking the Design
     section's default `m`. */
  --hbd-la-pad: 0px;
  /* The art panel (§3.2): 480 below 1024, 519 from it, and a 800px floor from 1280 where it becomes a
     column of the grid and stretches to the accordion beside it. */
  --hbd-la-art-h: 480px;
  --hbd-la-art-min-h: 800px;
  /* The heading (§3.3): Loretta 40/44 tracked 0.5 %, 56/61.6 from 1024, centred on the panel. */
  --hbd-la-heading: 40px; --hbd-la-heading-lh: 44px; --hbd-la-heading-track: .005em;
  /* The space under the heading when there is no art panel — no live instance; the site's own 40px. */
  --hbd-la-head-space: 40px;
  /* A row (§2.1): 16px of padding top and bottom, 16px to the next row, and a 20 %-black hairline
     under every row but the last. */
  --hbd-la-row-pad: 16px;
  --hbd-la-row-gap: 16px;
  --hbd-la-rule: 1px solid var(--hbd-black-a20);
  /* The trigger (§3.4): the text column, then 24px, then the 38px circle. Title 18/28 at weight 500,
     description 14/20, 12px apart. */
  --hbd-la-head-gap: 24px;
  --hbd-la-title: 18px; --hbd-la-title-lh: 28px; --hbd-la-title-weight: 500;
  --hbd-la-desc: 14px; --hbd-la-desc-lh: 20px;
  --hbd-la-title-gap: 12px;
  /* The glyph: the same 38px dashed circle / 8px padding / 20px plus-minus as hbd-faq,
     hbd-accordion-media and hbd-conditions, and the same darkening of the circle when the row opens. */
  --hbd-la-icon: 38px; --hbd-la-icon-pad: 8px; --hbd-la-icon-glyph: 20px;
  --hbd-la-icon-border: var(--hbd-ink-a40); --hbd-la-icon-border-open: var(--hbd-ink);
  /* The panel (§3.5): 24px above the first link, 16 around the rest — both inside the clipped box, so
     a closed row is exactly live's 112px. */
  --hbd-la-panel-top: 24px; --hbd-la-panel-pad: 16px;
  /* A link row (§3.5): 48 tall (12px of padding on a 24px line), 8px apart, 6px radius; a 16px cell
     for the clipboard, 12px to the label, label 16/24. */
  --hbd-la-link-gap: 8px; --hbd-la-link-pad: 12px; --hbd-la-link-radius: 6px;
  --hbd-la-link-icon: 16px; --hbd-la-link-icon-gap: 12px;
  /* The theme's clipboard is a *stroked* drawing in a 24 viewBox where live's is a filled path, so it
     is drawn at 20px inside the 16px cell — 10 × 15 of geometry, 11.33 × 16.33 once its 1.33px stroke
     is counted, against live's filled 12 × 16, on the same centre. The trick the stars use with
     --hbd-star-scale. */
  --hbd-la-link-glyph: 20px;
  --hbd-la-link: 16px; --hbd-la-link-lh: 24px;
  /* Tailwind's gray-400, which is what live's clipboard computes to — not --hbd-grey-400 (#999). */
  --hbd-la-link-icon-color: #9CA3AF;
  /* Hover (§3.6): the label and the clipboard go blue and the row is painted white. The white is
     invisible on live's white page; it is what live declares, and what makes the row read as a target
     on a tinted background. */
  --hbd-la-link-hover: var(--hbd-blue);
  --hbd-la-link-hover-bg: var(--hbd-white);
  --hbd-la-dur: .3s;
}
@media (min-width: 1024px) {
  :root {
    --hbd-la-art-h: 519px;
    --hbd-la-heading: 56px; --hbd-la-heading-lh: 61.6px;
  }
}

/* lab-tests (hbd-lab-tests) — the list on `/service/lab-tests/` (`#section-labTestsSection`), the one
   live instance. Every number is a measurement in docs/audit/widgets/lab-tests.md, named inline. The
   three row layouts (§3.4) differ only in where the name goes, so most of these are shared; the two
   that are genuinely per-band are the name column and the gutter. */
:root {
  /* Shell (§3.1): the site's discrete gutter, a 1440 cap, and the section's own 40px top and bottom —
     live's section reports `padding: 0px`, so this is the inner wrapper's, not Design → padding. */
  --hbd-lt-max: 1440px;
  --hbd-lt-gutter: 20px;
  --hbd-lt-pad: 40px;
  /* Head (§3.2): heading 30/36 centred below 768, 48/57.6 on the pills' row from it; 16px under it
     while it is stacked. */
  --hbd-lt-heading: 30px; --hbd-lt-heading-lh: 36px;
  --hbd-lt-head-gap: 16px;
  /* The sort pills (§3.5): 1px dashed **black** (not ink), white, 8/20 padding on a 20px line, 14px
     body text — not hbd_pill()'s mono uppercase. 16px apart, and a 16px chevron 8px after the label. */
  --hbd-lt-pill: 14px; --hbd-lt-pill-lh: 20px;
  --hbd-lt-pill-pad-y: 8px; --hbd-lt-pill-pad-x: 20px;
  /* 38 = a 20px line with 8px above and below inside a 1px border. Declared rather than left to the
     padding because a <select> takes its height from the platform, not from its line box. */
  --hbd-lt-pill-h: 38px;
  --hbd-lt-pill-gap: 16px;
  --hbd-lt-pill-color: var(--hbd-black);
  --hbd-lt-pill-border-color: var(--hbd-black);
  --hbd-lt-pill-border: 1px dashed var(--hbd-lt-pill-border-color);
  --hbd-lt-chev: 16px; --hbd-lt-chev-gap: 8px;
  /* The list (§3.3): 20px under the head, a 20 %-ink rule above every row and under the last, 20px of
     padding inside each — the constant 41px between one row's content and the next. */
  --hbd-lt-list-top: 20px;
  --hbd-lt-row-pad: 20px;
  --hbd-lt-rule: 1px solid var(--hbd-ink-a20);
  /* A row (§2): an 80px round icon, 16px to the name below 768 and 24 from it; name 24/32 (Loretta),
     description 14/20 (body), price 24/32 in an inline span. */
  --hbd-lt-icon: 80px;
  --hbd-lt-icon-gap: 16px;
  --hbd-lt-name-fs: 24px; --hbd-lt-name-lh: 32px;
  --hbd-lt-desc: 14px; --hbd-lt-desc-lh: 20px;
  /* 42rem — the cap that makes 1440's 672 and 1024's 515.19 one rule (§3.4). */
  --hbd-lt-desc-max: 672px;
  /* Vertical rhythm in the stacked row (§2.4): 32px under the icon line, 24px under the description. */
  --hbd-lt-desc-gap: 32px;
  --hbd-lt-price-gap: 24px;
  /* Name → description in the 768 band, and the 4px between the name column and the description from
     1024. The description cell's 8px of top padding is the ≥1024 band's alone (§3.4). */
  --hbd-lt-name-gap: 12px;
  --hbd-lt-text-gap: 4px;
  --hbd-lt-desc-pad: 0px;
  --hbd-lt-cost-gap: 24px;
  /* The Load more block (client QC 2026-09-23, docs/decisions.md — it replaces live's pager, §3.7):
     48px under the list's closing rule (live put its pager 112px down; the client asked for the button
     closer to the table, 2026-09-23); a count line in the pager's 16/24 at ink 60 %, a 16px gap, then
     the outline pill. An in-flight button is 40 % of itself — live's own `disabled:opacity-40` on a
     spent pager arrow. */
  --hbd-lt-pager-top: 48px;
  --hbd-lt-foot-gap: 16px;
  --hbd-lt-page-fs: 16px; --hbd-lt-page-lh: 24px;
  --hbd-lt-page-idle: var(--hbd-ink-a60);
  --hbd-lt-page-off: .4;
}
@media (min-width: 768px) {
  :root {
    --hbd-lt-gutter: 60px;
    --hbd-lt-heading: 48px; --hbd-lt-heading-lh: 57.6px;
    --hbd-lt-icon-gap: 24px;
  }
}
@media (min-width: 1024px) {
  :root {
    /* The fixed name column (§3.4). Neither width reduces to a percentage, a fraction or an `fr`
       split of the content, so both measured values are pinned; widths inside each band are ours. */
    --hbd-lt-name: 222.5px;
    --hbd-lt-desc-pad: 8px;
  }
}
@media (min-width: 1280px) {
  :root {
    --hbd-lt-gutter: 80px;
    --hbd-lt-name: 279.42px;
  }
}

/* ---------------------------------------------------------------------------
   hotspot-image (#34) — the body map on /service/digital-thermography/.
   Every value is a measurement in docs/audit/widgets/hotspot-image.md.
   --------------------------------------------------------------------------- */
:root {
  /* Shell (§3): the content box is capped at 1228 and left-aligned at the gutter; 120px of vertical
     padding, 16 at ≤767, and the site's discrete 32 / 60 / 80 gutter. */
  --hbd-hs-max: 1228px;
  /* Production centres this section inside the site's 1440 container and left-aligns the 1228 content
     box against the gutter inside it. At 1440 and 1280 — the widths the widget was measured at — the
     two are indistinguishable, which is why it shipped left-aligned to the viewport; above 1440 they
     diverge and the section hugged the left edge (client QC, 2026-09-21). */
  --hbd-hs-container: 1440px;
  --hbd-hs-gutter: 32px;
  --hbd-hs-pad: 16px;
  --hbd-hs-map: 620px;
  --hbd-hs-gap: 52px;
  /* The dot (§2.5): a 32px white disc with an 8px navy core, 48/12 in orange when it is the chosen
     one. Live grows the button itself by 1.5 ×; the -50 % translate keeps it on its percentage. */
  --hbd-hs-dot: 32px; --hbd-hs-dot-core: 8px;
  --hbd-hs-dot-on: 48px; --hbd-hs-dot-core-on: 12px;
  --hbd-hs-dot-bg: var(--hbd-white);
  --hbd-hs-dot-core-color: var(--hbd-navy);
  --hbd-hs-dot-core-on-color: var(--hbd-orange);
  /* The hint (§2.3): Loretta 20/24 at a fraction of the image box, 240 wide, gone below 768. */
  --hbd-hs-hint: 20px; --hbd-hs-hint-lh: 24px; --hbd-hs-hint-w: 240px;
  --hbd-hs-hint-x: 64.52%; --hbd-hs-hint-y: 26.43%;
  /* The footnote (§2.1): 12/16.8 in ink at 70 %, 16px under the image; centred below 1280. */
  --hbd-hs-note: 12px; --hbd-hs-note-lh: 16.8px;
  --hbd-hs-note-color: var(--hbd-ink-a70);
  --hbd-hs-note-gap: 16px;
  --hbd-hs-note-align: center;
  /* The card (§3): white, 16px radius, 30px of padding, 16px between blocks and 8 between items;
     the photo is 400 × 200 at a 7px radius. */
  --hbd-hs-card-max: 460px;
  --hbd-hs-card-pad: 30px;
  --hbd-hs-card-radius: var(--hbd-radius-m);
  --hbd-hs-card-bg: var(--hbd-white);
  --hbd-hs-block: 16px;
  --hbd-hs-item-gap: 8px;
  --hbd-hs-media-radius: 7px;
  --hbd-hs-media-ratio: 2 / 1;
  --hbd-hs-title: 32px; --hbd-hs-title-lh: 38.4px;
  --hbd-hs-intro: 14px; --hbd-hs-intro-lh: 16.8px;
  --hbd-hs-item: 14px; --hbd-hs-item-lh: 21px;
  /* The pills (§2.2): 14px mono in navy on white with a 20 %-ink dash — bigger than .hbd-pill's 12px
     on a 55 % dash. */
  --hbd-hs-pill-fs: 14px; --hbd-hs-pill-lh: 16.8px;
  --hbd-hs-pill-pad-y: 9px; --hbd-hs-pill-pad-x: 16px;
  --hbd-hs-pill-border: var(--hbd-ink-a20);
  /* The modal (§1.1, §2.4): 32px of padding at ≥768 and 16 in the bottom sheet, which sits 16px in
     from the edges with a 24px rounded top; a half-black backdrop and a 32px ✕. */
  --hbd-hs-sheet-pad: 32px;
  --hbd-hs-sheet-inset: 16px;
  --hbd-hs-sheet-radius: var(--hbd-radius-l);
  --hbd-hs-backdrop: var(--hbd-black-a50);
  --hbd-hs-close: 32px; --hbd-hs-close-glyph: 12px; --hbd-hs-close-inset: 8px;
  --hbd-hs-close-bg: var(--hbd-black-a20);
}
@media (max-width: 767px) {
  :root {
    --hbd-hs-sheet-pad: 16px;
  }
}
@media (min-width: 768px) {
  :root {
    --hbd-hs-gutter: 60px;
    --hbd-hs-pad: 120px;
  }
}
@media (min-width: 1280px) {
  :root {
    --hbd-hs-gutter: 80px;
    --hbd-hs-hint-w: 252px;
    --hbd-hs-hint-x: 67.74%; --hbd-hs-hint-y: 29.37%;
    --hbd-hs-note-align: left;
  }
}

/* Reviews slider (hbd-reviews-slider) — the full-bleed patient quote on /service/virtual-care/.
   Every value measured on hormonesbydesign.com 2026-09-19 at 1440/1024/768/390 in one measure.mjs
   run; tables: docs/audit/widgets/reviews-slider.md §2. The gutter is the site-wide 20/60/80
   (--hbd-row-gutter) inside --hbd-container. */
:root {
  /* 80px above the eyebrow at every width. Below the attribution live steps 98 / 103 / 108 (base /
     ≥768 / ≥1024) and replaces the lot with 80 at ≥1280, where the arrows move into the flow's
     bottom-left corner (doc §2.1). */
  --hbd-rsl-pad-top: 80px;
  --hbd-rsl-pad-bottom: 98px;
  /* The eyebrow column is exactly 25 % of the content box at all four widths — 320 / 226 / 162 / 87.5
     — which is also what puts the quote's left edge at 400 on the desktop layout (doc §2.2). */
  --hbd-rsl-aside: 25%;
  /* The header row is max(eyebrow, the arrows' own 40px) tall, and the quote starts 60px under it:
     180 = 80 + 40 + 60 at 1024 and 768, 200 = 80 + 60 + 60 at 390 (doc §2.4). */
  --hbd-rsl-head-min: 40px;
  --hbd-rsl-head-gap: 60px;
  /* Quote → attribution: 24px below 1280, 60px on the desktop layout (doc §2.5). */
  --hbd-rsl-quote-gap: 24px;
  /* Live reserves a fixed box for the quote at each width — 430 / 300 / 200 / 250 — taller than the
     text it holds, so the attribution does not move when the slide changes (doc §2.4). Ours is a
     *min*-height: the same geometry for every live quote, and a longer one grows instead of being
     clipped. */
  --hbd-rsl-quote-min-h: 430px;
  /* ≥1280 only: the two columns' row is 530px tall (arrows at y 570 + 40 + 80 of padding = live's
     690px section). 0 below, where the section is its content's height (doc §6.1). */
  --hbd-rsl-body-min-h: 0px;
  /* Eyebrow: Neue Haas 20/20, uppercase, white. Quote: the real Loretta italic cut, 40/48 at every
     width. Name: Loretta 24/28.8 tracked -5 %. Role: Founders mono 14/14, uppercase. */
  --hbd-rsl-eyebrow: 20px; --hbd-rsl-eyebrow-lh: 20px;
  --hbd-rsl-quote: 40px; --hbd-rsl-quote-lh: 48px;
  --hbd-rsl-name: 24px; --hbd-rsl-name-lh: 28.8px; --hbd-rsl-name-ls: -0.05em;
  --hbd-rsl-role: 14px; --hbd-rsl-role-lh: 14px;
  /* Attribution: a 68px disc, 20px of gap before a name/role block that is centred on it, 8px
     between the two lines (doc §2.5). */
  --hbd-rsl-avatar: 68px; --hbd-rsl-avatar-gap: 20px; --hbd-rsl-who-gap: 8px;
  /* Arrows: 40 × 40 white discs 16px apart, black ink, no shadow. 14.5px is the glyph box that makes
     arrow-right-bold render live's 13.33 × 12.96 ink — the same number hbd-testimonials measured. */
  --hbd-rsl-nav-size: 40px; --hbd-rsl-nav-gap: 16px; --hbd-rsl-nav-icon: 14.5px;
  --hbd-rsl-nav-bg: var(--hbd-white); --hbd-rsl-nav-ink: var(--hbd-black);
  --hbd-rsl-nav-bg-hover: var(--hbd-sky);
}
@media (min-width: 768px) { :root { --hbd-rsl-pad-bottom: 103px; --hbd-rsl-quote-min-h: 300px; } }
@media (min-width: 1024px) { :root { --hbd-rsl-pad-bottom: 108px; --hbd-rsl-quote-min-h: 200px; } }
@media (min-width: 1280px) {
  :root {
    --hbd-rsl-pad-bottom: 80px;
    --hbd-rsl-quote-gap: 60px;
    --hbd-rsl-quote-min-h: 250px;
    --hbd-rsl-body-min-h: 530px;
  }
}

/* ------------------------------------------------------------------------------------------------
   templates/single-hbd_provider.php (Plan 4 Task 3) — the provider hero, measured on
   /provider/paige-price/ and /provider/jocelyn-segal/ at 1440 / 1024 / 768 / 390; every number's
   source is a table in docs/audit/templates/provider.md §2–§6. The page's own near-black (#1E1E1E) is
   a shade off the site ink (#1D1718) and is live's, not ours — it is kept here so the two cannot be
   confused. Breakpoints are the page's own two: 768 (the text column becomes a 900px scroller) and
   1024 (the panel and the column sit side by side and the H1 grows).
   ------------------------------------------------------------------------------------------------ */
:root {
  --hbd-tprov-ink: #1E1E1E;
  --hbd-tprov-label: rgba(30, 30, 30, .8); --hbd-tprov-muted: rgba(30, 30, 30, .5);
  --hbd-tprov-navy-a04: rgba(36, 52, 86, .04);
  /* The hero: a media panel and a text column, stacked below 1024 and 40/60 from it. The column's
     padding is the site gutter exactly (20 / 60 / 80), so it is not restated here. */
  --hbd-tprov-media-w: 40%; --hbd-tprov-col-w: 60%;
  --hbd-tprov-media-pad: 20px 0; --hbd-tprov-media-gap: 20px;
  --hbd-tprov-col-gap: 40px; --hbd-tprov-col-rule: 1px solid var(--hbd-ink-a20);
  /* §3: from 768 up the column is a fixed 900px box that scrolls its own content. */
  --hbd-tprov-col-h: none; --hbd-tprov-col-overflow: visible;
  /* The portrait is art-directed: live serves a different crop at every width, so the frame carries
     a width and a ratio per band rather than one shape (§4). */
  --hbd-tprov-portrait-w: 91.8%; --hbd-tprov-portrait-ratio: 357.95 / 395.63;
  --hbd-tprov-portrait-radius: var(--hbd-radius-xs);
  /* The CTA pill is 211.33 × 44 at every width — shrink-to-fit around a fixed label, and 44 rather
     than 46 because live's carries no border. */
  --hbd-tprov-cta-pad: 12px 24px;
  /* Back link: a 40px dashed circle, the label 16px from it. */
  --hbd-tprov-back-size: 40px; --hbd-tprov-back-gap: 16px; --hbd-tprov-back-icon: 20px;
  --hbd-tprov-back-border: 1px dashed var(--hbd-navy);
  --hbd-tprov-back-label: 16px; --hbd-tprov-back-label-lh: 24px;
  --hbd-tprov-h1: 32px; --hbd-tprov-h1-lh: 48px;
  /* At 1280 and up — and only there — live insets the bio and the credentials block 32px from the
     column's text edge while the hairlines and the other two headings stay full width (§5: the bio
     paragraph is 672 inside a 704 column at 1440, and the column's full width at 1024, 768 and 390). */
  --hbd-tprov-block-inset: 0px;
  --hbd-tprov-bio: 16px; --hbd-tprov-bio-lh: 22.4px; --hbd-tprov-bio-gap: 24px;
  --hbd-tprov-rule: 1px solid var(--hbd-navy-a20);
  --hbd-tprov-heading: 24px; --hbd-tprov-heading-lh: 28.8px;
  --hbd-tprov-creds-gap: 32px; --hbd-tprov-creds-indent: 28px; --hbd-tprov-creds-row-gap: 8px;
  --hbd-tprov-creds-end: 24px; --hbd-tprov-creds: 16px; --hbd-tprov-creds-lh: 19.2px;
  --hbd-tprov-pills-gap: 24px; --hbd-tprov-pill-gap: 16px;
  --hbd-tprov-pill: 14px; --hbd-tprov-pill-lh: 20px; --hbd-tprov-pill-pad: 8px 20px;
  --hbd-tprov-pill-border: 1px dashed var(--hbd-black-a40);
  /* The Locations accordion: cards 40px apart, a 72px header at 20/24, a 32/24 body with a 32px gap,
     and a hairline between the two. */
  --hbd-tprov-acc-gap: 40px; --hbd-tprov-card-radius: var(--hbd-radius-card);
  --hbd-tprov-card-border: 1px solid rgba(36, 52, 86, .4);
  --hbd-tprov-head-pad: 20px 24px; --hbd-tprov-head-h: 72px;
  --hbd-tprov-clinic-name: 18px; --hbd-tprov-clinic-name-lh: 18px;
  --hbd-tprov-glyph: 32px;
  --hbd-tprov-body-pad: 32px 24px; --hbd-tprov-body-gap: 32px; --hbd-tprov-cols-gap: 24px;
  --hbd-tprov-cols: minmax(0, 1fr);
  --hbd-tprov-field-gap: 12px; --hbd-tprov-fields-gap: 32px;
  --hbd-tprov-label-size: 14px; --hbd-tprov-label-lh: 16.8px;
  --hbd-tprov-address: 14px; --hbd-tprov-address-lh: 19.6px;
  --hbd-tprov-phone-gap: 8px; --hbd-tprov-phone-label-w: 105px; --hbd-tprov-phone-col-gap: 24px;
  --hbd-tprov-phone-label: 12px; --hbd-tprov-phone: 14px;
  --hbd-tprov-hours-pad: 24px 8px; --hbd-tprov-hours-radius: 7px; --hbd-tprov-hours-row-gap: 8px;
  --hbd-tprov-hours: 14px; --hbd-tprov-hours-lh: 16.8px;
  --hbd-tprov-hours-bg: var(--hbd-tprov-navy-a04); --hbd-tprov-hours-border: 1px solid var(--hbd-navy-a10);
  --hbd-tprov-details-pad: 24px; --hbd-tprov-details-gap: 4px;
  --hbd-tprov-details-border: 1px solid var(--hbd-navy-a20);
  --hbd-tprov-details-link: 12px; --hbd-tprov-details-link-lh: 13.2px; --hbd-tprov-details-glyph: 32px;
  --hbd-tprov-panel-dur: .3s;
}
@media (min-width: 768px) {
  :root {
    --hbd-tprov-media-pad: 40px 0;
    --hbd-tprov-col-h: 900px; --hbd-tprov-col-overflow: auto;
    --hbd-tprov-portrait-w: 42.45%; --hbd-tprov-portrait-ratio: 326 / 282;
    --hbd-tprov-hours-pad: 24px;
  }
}
@media (min-width: 1024px) {
  :root {
    --hbd-tprov-media-pad: 0;
    --hbd-tprov-portrait-w: 82.52%; --hbd-tprov-portrait-ratio: 338 / 416;
    --hbd-tprov-h1: 56px; --hbd-tprov-h1-lh: 84px;
  }
}
@media (min-width: 1280px) {
  :root {
    --hbd-tprov-portrait-w: 84.375%; --hbd-tprov-portrait-ratio: 486 / 481;
    --hbd-tprov-block-inset: 32px;
    /* §6.1: the address column and the hours block become two equal columns 32px apart. Grid, not
       flex, because a flex item's `flex-basis: 0` floors at its own padding — which made the hours
       block 25px wider than the column beside it. */
    --hbd-tprov-cols: repeat(2, minmax(0, 1fr)); --hbd-tprov-cols-gap: 32px;
  }
}

/* ------------------------------------------------------------------------------------------------
   templates/single.php (Plan 4 Task 5) — the blog post's hero and article column, measured on
   /blog/high-blood-pressure-in-menopause-causes-prevention-and-treatment/ at 1440 / 1024 / 768 / 390;
   every number's source is a table in docs/audit/templates/blog-single.md §3–§4.

   The hero is **two compositions** (§3): from 1024 a full-bleed cover photo under a 60% ink scrim
   with white type, and at 768 and below no cover at all — a 200px round crop of the same photo on
   the sky panel with dark type. Both are centred, so only the type scale, the scrim and the photo's
   role change across the switch.

   The article column is full width (§4): its gutter is the site's own 20 / 60 / 80, so it is not
   restated here; only the vertical padding (40 / 60 / 80 — the phone step is 40, not 20) is.
   Live's own near-black #1E1E1E — the pill's ink below 1024, a shade off the site ink — and its
   #333399 links are kept here so they cannot be mistaken for theme colours.
   ------------------------------------------------------------------------------------------------ */
:root {
  --hbd-tpost-ink: #1E1E1E;
  /* Hero. The block is 700 tall at 390 and 600 from 768; its padding is the gutter scale plus its
     own vertical step (20 / 60 / 80), and its content box is centred in what is left. */
  --hbd-tpost-hero-h: 700px; --hbd-tpost-hero-pad-y: 20px;
  --hbd-tpost-hero-bg: var(--hbd-sky); --hbd-tpost-hero-ink: var(--hbd-ink);
  --hbd-tpost-scrim: var(--hbd-ink-a60);
  --hbd-tpost-date: 14px; --hbd-tpost-date-lh: 14px;
  /* The ≤768 composition's photo: a 200px circle 16px under the date. From 1024 the same <img> is
     the full-bleed cover instead, which is why there is one image element and not two. */
  --hbd-tpost-photo: 200px; --hbd-tpost-photo-gap: 16px;
  --hbd-tpost-h1: 32px; --hbd-tpost-h1-lh: 35.2px; --hbd-tpost-h1-gap: 24px;
  /* The pill's row: 32 under the H1 from 1024, 16 below it, over the wrapper's own 4px. */
  --hbd-tpost-cat-gap: 16px; --hbd-tpost-cat-pad: 4px;
  --hbd-tpost-pill: 14px; --hbd-tpost-pill-lh: 14px; --hbd-tpost-pill-pad: 8px 20px;
  --hbd-tpost-pill-ink: var(--hbd-tpost-ink);
  --hbd-tpost-pill-border: 1px dashed var(--hbd-tpost-ink);
  /* Article (§4.1). 24px between blocks at every width; the list is 36px in with 8px between items.
     `letter-spacing` is live's own: 2.5% on body text, 0.5% on the EK Notice headings, and nothing
     at all on the H1, the date, the pill and the list — reproduced here in em, which is what a
     percentage of the font size is. */
  --hbd-tpost-article-pad: 40px;
  --hbd-tpost-text: 18px; --hbd-tpost-text-lh: 27px; --hbd-tpost-text-track: 0.025em;
  --hbd-tpost-gap: 24px;
  /* **Not measured**: the measured post has no `h2` (40 of live's 43 do). The face is the spec's
     (§196, "H2 in Neue Haas, not serif") and the size is the measured `h3` step, so the one claim
     without a table behind it is the face. Confirmed or corrected by Plan 5's import — or by one
     production measurement of a post that has an `h2`. */
  --hbd-tpost-h2: 28px; --hbd-tpost-h2-lh: 30.8px;
  --hbd-tpost-h3: 28px; --hbd-tpost-h3-lh: 30.8px;
  --hbd-tpost-h4: 24px; --hbd-tpost-h4-lh: 26.4px;
  --hbd-tpost-head-track: 0.005em;
  --hbd-tpost-li: 18px; --hbd-tpost-li-lh: 25.2px; --hbd-tpost-li-gap: 8px; --hbd-tpost-li-indent: 36px;
  --hbd-tpost-li-font: var(--hbd-font-display);
  --hbd-tpost-link: #333399;
  --hbd-tpost-strong: 500;
  /* Not measured — no seeded body has an image, a figure or a caption in it, and the two live posts
     that do (`blog__fda-…`, `blog__thyroid-disorder-…`) were not the measured page. 12px is the
     spec's own figure (§196); the caption scale is the article's small step. Plan 5's import is
     where these get a measurement (docs/audit/templates/blog-single.md §7). */
  --hbd-tpost-img-radius: var(--hbd-radius-s);
  --hbd-tpost-figure-gap: 16px;
  --hbd-tpost-caption: 14px; --hbd-tpost-caption-lh: 19.6px; --hbd-tpost-caption-ink: var(--hbd-ink-a70);
}
@media (min-width: 768px) {
  :root {
    --hbd-tpost-hero-h: 600px; --hbd-tpost-hero-pad-y: 60px;
    --hbd-tpost-article-pad: 60px;
    --hbd-tpost-h2: 32px; --hbd-tpost-h2-lh: 35.2px; /* not measured — see the base block */
    --hbd-tpost-h3: 32px; --hbd-tpost-h3-lh: 35.2px;
    --hbd-tpost-h4: 32px; --hbd-tpost-h4-lh: 35.2px;
  }
}
@media (min-width: 1024px) {
  :root {
    /* The switch: the cover photo and the scrim appear, and the type turns white. */
    --hbd-tpost-hero-pad-y: 80px;
    --hbd-tpost-hero-ink: var(--hbd-white);
    --hbd-tpost-h1: 48px; --hbd-tpost-h1-lh: 52.8px;
    --hbd-tpost-cat-gap: 32px;
    --hbd-tpost-pill-ink: var(--hbd-white);
    --hbd-tpost-pill-border: 1px dashed var(--hbd-white-a40);
  }
}
@media (min-width: 1280px) {
  :root {
    --hbd-tpost-h1: 56px; --hbd-tpost-h1-lh: 61.6px;
    --hbd-tpost-article-pad: 80px;
  }
}

/* Blog index (templates/home.php + templates/category.php) — the grid under `hbd-page-title`'s header
   block and the pill pager under that. Tables: docs/audit/templates/blog-index.md §1.1, §2, §4. The
   card's own numbers are the --hbd-latest-* block above: it is the same card, and the three
   `--hbd-latest-ratio-*` tokens already step 780/475 · 780/405 · 1:1 → 1:1 all three at 768 → 700/415 ·
   360/250 · 1:1 from 1024, which is exactly what the index's slots measure. */
:root {
  /* The 12-column grid: 16px in both axes at every width, columns 92 / 60.66 / 39.33 (§2). */
  --hbd-blog-grid-gap: 16px;
  /* The section closes 40px under the pager, which sits 80px under the grid (§1.1). The 40 above the
     first line of type is the page-title widget's own padding. */
  --hbd-blog-pager-space: 80px; --hbd-blog-pad-bottom: 40px;
  /* Six 40 × 40 pills, 8px apart, centred; Neue Haas 16/24, not the mono the filters use (§4). */
  --hbd-blog-pager-size: 40px; --hbd-blog-pager-gap: 8px;
  --hbd-blog-pager-type: 16px; --hbd-blog-pager-lh: 24px;
  /* Dashed in every state: ink at 40% by default and for the disabled slot, solid ink for the current
     page and on hover. Nothing else moves — no background, no transform (§4, the states table). */
  --hbd-blog-pager-border: 1px dashed var(--hbd-ink-a40);
  --hbd-blog-pager-border-strong: 1px dashed var(--hbd-ink);
  --hbd-blog-pager-ink: var(--hbd-ink); --hbd-blog-pager-ink-current: var(--hbd-black);
  /* Live's arrow glyph, which the crawl stripped: the box it draws in is 10.67 × 10.37. */
  --hbd-blog-pager-arrow-w: 10.67px; --hbd-blog-pager-arrow-h: 10.37px;
}

/* ------------------------------------------------------------------------------------------------
   Footer copyright line (2026-09-23 tablet/phone pass) — measured on production's /faq/ footer:
   12/18 Neue Haas 65 Medium, 40px under the columns, 15px inset on a phone (w320 in the 350 box).
   ------------------------------------------------------------------------------------------------ */
:root {
  --hbd-footer-copyright-gap: 40px; --hbd-footer-copyright-fs: 12px; --hbd-footer-copyright-lh: 18px;
  --hbd-footer-copyright-inset: 15px;
}
@media (min-width: 768px) {
  :root { --hbd-footer-copyright-inset: 0px; }
}

/* ------------------------------------------------------------------------------------------------
   Landing template (templates/page-landing.php): the floating logo bar is 87px tall from 768 (16 +
   55 + 16), so the hero under it reserves that much before centring its copy (2026-09-23 pass —
   at 900 the eyebrow sat at 40 under the logo).
   ------------------------------------------------------------------------------------------------ */
:root { --hbd-tpl-landing-logo-clear: 88px; }

/* ------------------------------------------------------------------------------------------------
   Legal pages (templates/page-legal.php) — measured on production 2026-09-23 (pages.css has the map).
   ------------------------------------------------------------------------------------------------ */
:root {
  --hbd-legal-pad-top: 64px; --hbd-legal-pad-bottom: 88px; --hbd-legal-gutter: 16px; --hbd-legal-col: 896px;
  --hbd-legal-h1: 28px; --hbd-legal-h1-lh: 35px; --hbd-legal-h1-gap: 16px; /* 16 under the H1 below 1024, 32 from it */
  --hbd-legal-text: 18px; --hbd-legal-text-lh: 29.25px; --hbd-legal-para-gap: 24px;
  --hbd-legal-strong: 20px; --hbd-legal-strong-lh: 28px;
  --hbd-legal-h3: 20px; --hbd-legal-h3-lh: 28px; --hbd-legal-h3-gap: 16px;
  --hbd-legal-em: 20px; --hbd-legal-em-lh: 28px;
  --hbd-legal-li: 16px; --hbd-legal-li-lh: 24px;
}
@media (min-width: 768px) {
  :root { --hbd-legal-h1: 32px; --hbd-legal-h1-lh: 40px; }
}
@media (min-width: 1024px) {
  :root { --hbd-legal-gutter: 40px; --hbd-legal-h1: 48px; --hbd-legal-h1-lh: 60px; --hbd-legal-h1-gap: 32px; --hbd-legal-strong: 24px; --hbd-legal-strong-lh: 32px; --hbd-legal-em: 24px; --hbd-legal-em-lh: 32px; }
}