/* Veedma Women: the stylesheet both pages share (the home page and the lab panels page). Fonts are self-hosted (the site's CSP allows font-src 'self' only, and the privacy policy promises no Google requests without analytics consent): Newsreader roman and italic, variable (opsz 6-72, wght 400-600), and Arimo, variable (wght 400-700), latin subsets from Google Fonts, SIL Open Font License 1.1. The pages use Newsreader 400 and 500 (italic 500 for the gold accent word) and Arimo 400 and 600, plus Arimo 700 in the "Veedma" wordmark. */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 600;font-display:swap;src:url("../fonts/newsreader-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400 600;font-display:swap;src:url("../fonts/newsreader-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Arimo";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/arimo-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Guard against the site's Tailwind preflight. veedma-landing loads output.css on every page, and its preflight (in @layer base) resets elements these pages were designed on with the browser's defaults: buttons inherit line height (Learn more and Show all grow 6 to 8 px), ::before and ::after turn border-box (the symptom toggle's chevron shrinks), sup loses its raise, svg and img align to the middle. These rules are unlayered, so they beat any layered rule, and have zero specificity, so every rule below still wins: inside the women's header, main and footer they put the browser's defaults back. SVG and images keep their attributes (an "all" reset would override their width, height, fill and stroke). Without output.css they change nothing: checked 2026-10-15 with and without the site's output.css on both pages. */
:where(nav.nav, main, footer#footer, nav.nav *:not(svg, svg *, img), main *:not(svg, svg *, img), footer#footer *:not(svg, svg *, img)){all:revert}
:where(nav.nav, main, footer#footer) *::before, :where(nav.nav, main, footer#footer) *::after{all:revert}
:where(nav.nav, main, footer#footer) :is(svg, img){display:inline;vertical-align:baseline;max-width:none;border-style:none}
  /* Layout: warm paper page cut by full-bleed forest photo bands (hero, chart intro, safety, close); lime is the one action and highlight color */
  /* the page is light only (founder decision 2026-10-09): no dark theme, whatever the device or host asks for */
  :root{
    color-scheme:light only;
    --page:#f4f7f2; --paper:#ffffff; --sand:#eceeea; --mint:#e6ece2;
    --forest:#536f4a; --forest-2:#6b8862; --forest-3:#43593c;
    --ink:#1d1d44; --ink-2:#4a4a69; --muted:#6e6e88; --line:rgba(29,29,68,.12); --line-strong:rgba(29,29,68,.24);
    --lime:#ead79c; --lime-ink:#1d1d44; --lime-soft:rgba(234,215,156,.5);
    --rose:#b8456d; --teal:#536f4a; --gold:#c9a24f; --olive:#5f7656;
    --on-dark:#ffffff; --on-dark-2:rgba(255,255,255,.84); --on-dark-3:rgba(255,255,255,.64); --glass:rgba(255,255,255,.1); --glass-line:rgba(255,255,255,.24);
    --hl-bg:var(--lime); --hl-fg:var(--forest-3);
    --btn-bg:#536f4a; --btn-fg:#ffffff;
    --amber:#8a5d00; --amber-soft:#fff3d2; --amber-line:#e8c66f;
    --ok-bg:#e3eedc; --ok-fg:#3d5634;
    --h-e:#b8456d; --h-p:#1d1d44; --h-t:#536f4a;
    --display:"Newsreader", Georgia, "Times New Roman", serif;
    --body:"Arimo", Arial, Helvetica, sans-serif;
    --mono:"Arimo", Arial, Helvetica, sans-serif;
    /* section titles share the hero title's size: 36.7 px at 375, 48 px wide */
    --title:min(3rem,calc((100vw - 48px) / 8.9));
  }
  /* desktop (2026-10-12): the hero title and every section title grow together, 48 px at 1024, 56 at 1280, 64 from 1440; 900 px and under unchanged */
  @media (min-width:901px){:root{--title:clamp(3rem,4.4vw,4rem)}}
  /* type audit (2026-10-14): the medicine "Learn more" text and the footer promise moved to Newsreader, the symptom panel's sources to Arimo like every source line, the symptom count upright */
  /* type roles (2026-10-14, after design feedback): Newsreader for everything the brand says (titles, the gold accent word, names, quotes, card and accordion text): 400, 500 for names and card titles, italic 500 only for the gold accent word. Arimo for long reading and controls (FAQ answers, legal text, menu, Sign in, small labels, sources, the price): 400 and 600 only. The "Veedma Women" wordmark is a logo and keeps its own setting. Manrope is gone */
  *{box-sizing:border-box}
  /* the hidden attribute must win over component display rules (toggles, lists, FAQ entries); the artifact host adds this too, production must keep it */
  [hidden]{display:none!important}
  html{scroll-padding-top:calc(4.5rem + env(safe-area-inset-top,0px))}
  body{margin:0;background:var(--page);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:inherit}
  p{margin:0}
  h1,h2,h3{font-family:var(--display);font-weight:400;font-variation-settings:"opsz" 48;letter-spacing:-.015em;text-wrap:balance;margin:0}
  h1{font-size:clamp(3.1rem,7.6vw,6.2rem);line-height:.98}
  h2{font-size:clamp(2.1rem,4.8vw,3.6rem);line-height:1.04}
  h3{font-size:1.3rem;line-height:1.25}
  em{font-style:italic}
  .hl{font-style:italic;color:var(--hl-fg);background:linear-gradient(transparent 42%,var(--hl-bg) 42%,var(--hl-bg) 94%,transparent 94%);padding-inline:.06em}
  .wrap{width:min(100%,74rem);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}
  .sec{padding-block:clamp(3.5rem,8vw,6.5rem)}
  .lead{font-size:clamp(1.08rem,1.6vw,1.22rem);line-height:1.55;color:var(--ink-2);max-width:42rem}
  .small{font-size:.8rem;line-height:1.5;color:var(--muted)}
  .small a{color:inherit}
  .stack{display:flex;flex-direction:column;gap:1rem}
  /* one button across the page (2026-10-09, from the symptom map): a dark green pill, Newsreader 400 in white, an arrow; 1.3rem wide, 1.2rem on phones */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.4rem;padding:.7rem 1.6rem;border-radius:999px;background:linear-gradient(180deg,#27503f,#1a4234);color:#fff;font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:400;font-size:1.42rem;letter-spacing:0;line-height:1.2;text-decoration:none;border:0;cursor:pointer;box-shadow:0 10px 22px rgba(26,66,52,.22);transition:filter .2s}
  .btn:hover{filter:brightness(1.1)}
  .btn svg{width:22px;height:22px;flex:none}
  /* buttons carry no arrows and a larger type (2026-10-12): 1.42rem wide, 1.32rem under 561 px, 1.25rem under 421 px, 1.16rem under 371 px */
  @media (max-width:560px){.btn{font-size:1.32rem;padding-inline:1.1rem}}
  @media (max-width:420px){.btn{font-size:1.25rem;padding-inline:.9rem;gap:.5rem}}
  @media (max-width:370px){.btn{font-size:1.16rem;padding-inline:.7rem;gap:.4rem}}
  .btn:focus-visible,.sx:focus-visible,.opt:focus-within,summary:focus-visible,input[type=range]:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

  /* nav */
  .nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--page);background:color-mix(in srgb,var(--page) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .nav .wrap{display:flex;align-items:center;gap:1.6rem;padding-block:.75rem}
  .brand{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:1.2rem;text-decoration:none;letter-spacing:-.01em}
  /* the women's mark (2026-10-12): a green leaf and a gold crescent in a circle, cut out of its cream ground so it sits on the header colour; production serves images/veedma-women-mark.png (512 px) or the 96 px WebP */
  .brand-mark{display:block;flex:none;width:30px;height:30px}
  /* the header wordmark in the dark green of the mark and the buttons (2026-10-12; was navy) */
  .nav .brand{color:#1f4d36}
  /* the women's line in the lockup (2026-10-12): "Veedma" bold, "Women" in the upright serif of the step titles (Newsreader 500) in gold, a touch larger so its capitals meet the sans (the gold italic serif stood apart) */
  .brand-w{white-space:nowrap}
  .brand-w em{font-family:var(--display);font-variation-settings:"opsz" 48;font-style:normal;font-weight:500;font-size:1.16em;letter-spacing:-.005em;color:#ab874a}
  footer .brand-w em{color:#e2cfa5}
  .nav .signin{white-space:nowrap}
  @media (max-width:359px){.nav .wrap{gap:.55rem}.nav .wrap .right{gap:.6rem}.nav .brand{gap:.45rem;font-size:1.04rem}}
  /* the footer wears the mark on a small cream disc, its own ground: straight on the dark green band the leaf disappears into it (images/veedma-women-mark-badge.png) */
  footer .brand-badge{width:32px;height:32px}
  /* the footer promise is the hero's line, so it takes the brand's serif (2026-10-14 type audit) */
  footer .ftag{font-family:var(--display);font-size:1.12rem;line-height:1.35}
  .navlinks{display:flex;gap:1.4rem;font-size:.95rem;color:var(--ink-2)}
  .navlinks a{text-decoration:none}
  .navlinks a:hover{color:var(--ink)}
  .nav .right{margin-left:auto;display:flex;align-items:center;gap:1.1rem}
  .nav .signin{font-size:.95rem;color:var(--ink-2);text-decoration:none}
  .nav .btn{min-height:2.6rem;padding:.4rem 1.2rem;font-size:1.15rem;white-space:nowrap;box-shadow:0 6px 14px rgba(26,66,52,.18)}
  @media (max-width:1099px){.navlinks{display:none}}
  @media (max-width:420px){.nav .wrap{gap:.75rem}.brand{font-size:1.1rem}}
  /* phones and tablets (under 901 px), as on the men's site (2026-10-12): the brand, "Sign in" and a menu button; the menu drops under the header with every section and page, the one button at its foot; the header's own button shows from 1100 px */
  /* the desktop header lists all six menu entries (2026-10-12, Medications and Lab panels added); they fit on one line from 1100 px, so 901 to 1099 px keeps the phone header and its menu */
  .nav-tg,.navmenu{display:none}
  @media (max-width:1099px){
    .nav .nav-cta{display:none}
    .nav .right{gap:.9rem}
    .nav .signin{font-family:var(--body);font-size:1rem;font-weight:600;color:#1f4d36}
    .nav-tg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:42px;height:42px;padding:0;border:1px solid #c9cdbf;border-radius:12px;background:transparent;color:#1f4d36;cursor:pointer}
    .nav-tg span{display:block;width:20px;height:1.8px;border-radius:2px;background:currentColor;transition:transform .25s,opacity .2s}
    .nav-tg[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
    .nav-tg[aria-expanded="true"] span:nth-child(2){opacity:0}
    .nav-tg[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}
    .nav-tg:focus-visible{outline:3px solid #43593c;outline-offset:2px}
    .navmenu{display:block;border-top:1px solid #dddcd8;background:#f5f8ef;max-height:calc(100vh - 4.5rem);overflow-y:auto}
    .navmenu .wrap{display:block;padding-block:0}
    .navmenu ul{list-style:none;margin:0;padding:.2rem 0 0}
    .navmenu li{border-bottom:1px solid #dddcd8}
    .navmenu li a{display:block;padding:.85rem .1rem;font-family:var(--display);font-variation-settings:"opsz" 48;font-size:1.3rem;line-height:1.2;color:#102f29;text-decoration:none}
    .navmenu .btn{width:100%;min-height:3.4rem;margin:1.1rem 0 1.25rem;font-size:1.32rem}
  }
  @media (prefers-reduced-motion: reduce){.nav-tg span{transition:none}}

  /* dark photo bands */
  .band{position:relative;isolation:isolate;color:var(--on-dark);background:linear-gradient(165deg,var(--forest-2) 0%,var(--forest) 48%,var(--forest-3) 100%);overflow:hidden}
  .band,.panel,.rxsec,footer{--btn-bg:#ffffff;--btn-fg:#1d1d44}
  .band .lead{color:var(--on-dark-2)}
  .band .small{color:var(--on-dark-3)}

  /* hero */
  .hero{padding-block:clamp(3.5rem,8vw,6.5rem) clamp(3rem,6vw,5rem)}
  /* hero: the photo is the background. Its plain studio wall carries the rotating title at the top; the lead and the action follow under it on the same warm wall colour. Wide screens put the photo on the right half, faded into the wall on its left edge. */
  /* hero colours from the user's layout spec, the same in both themes: white; on phones the sofa under her hands dissolves into the white where the rotating title begins, title #102F29, rotating word #668269, promise #183B39, path #26413D, quote #305C49, button #204B3C; the photo fades into the cream */
  .hero.hero-photo{background:#ffffff;color:#102f29;--btn-bg:#204b3c;--btn-fg:#ffffff}
  .hero-photo h1{color:#102f29}
  /* the rotating word in the mockup's gold (#AB874A, 3.3:1 on white, large text) */
  .hero-photo h1 .rot{color:#ab874a;font-style:italic}
  /* soft sage satin waves at the foot of the hero, behind the quote and the button (user's mockup, 2026-10-09); first in the section, so on wide screens the photo on the right covers them */
  .hero-waves{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(230px,64vw,300px);z-index:0;pointer-events:none;display:block}
  @media (min-width:901px){.hero-waves{height:clamp(150px,15vw,230px)}}
  /* phones: the button sits 28 px under the quote and 40 px above the trust line */
  @media (max-width:900px){.hero.hero-photo{padding-bottom:2.5rem}.hero.hero-photo .ctas{margin-top:28px}}
  .hero-photo .lead{color:#4a4a69}
  .hero-photo .small{color:#4a4a69}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"t ." "l ." "c .";align-items:start;position:static}
  .hero-grid > :not(.hero-ph){position:relative;z-index:1}
  .hero-t{grid-area:t;container-type:inline-size}
  /* the title is one line, "Get your [word] back", sized so the longest, "Get your energy back" (8.67em), fits the column with room to spare: 37 px at 375, 3rem at most */
  .hero h1{font-size:min(3rem,calc(100cqi / 8.9));line-height:1.05;white-space:normal}
  .hero h1 .rot{font-weight:500}
  .hero-ph{position:absolute;top:0;right:0;bottom:0;width:min(52%,46rem);margin:0;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%);mask-image:linear-gradient(90deg,transparent 0%,#000 30%)}
  .hero-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
  .hero .lead{grid-area:l;margin-top:14px;font-size:clamp(1.12rem,1.8vw,1.3rem)}
  /* the lead tells the whole service in three steps of emphasis: the promise in the serif, the path in plain dark text, and her own words as the payoff in large green italic */
  .hero-lead{max-width:34rem}
  .hero-lead > span{display:block}
  .hero-lead .nw{white-space:nowrap}
  /* phones break the promise after "care"; wide screens let it run */
  @media (max-width:560px){.hero-lead .br-m{display:inline}}
  /* matched to the user's reference mockup: the promise and the path in Arimo at reading sizes (24 and 21 px on phones), only the title and her quote in the serif; tight steps between them */
  /* the promise and the path in Newsreader at optical size 48, the closest free match to Agency's Larken (licensed, Adobe Fonts), regular weight */
  .hero-photo .hero-lead .hl1{font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:400;font-size:clamp(1.32rem,1.85vw,1.5rem);line-height:1.2;letter-spacing:-.01em;color:#183b39}
  /* the path: weight 500, -.02em, three lines from 360 px up (1.2rem under 370 px) */
  @media (max-width:369px){.hero-photo .hero-lead .hl2{font-size:1.06rem!important}.hero-photo .hero-lead .hl1{font-size:1.24rem}}
  .hero-photo .hero-lead .hl2{font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:500;letter-spacing:-.02em;font-size:clamp(1.1rem,1.5vw,1.2rem);line-height:1.4;color:#26413d}
  .hero-photo .hero-lead .hl2::before{content:"";display:block;width:65px;height:1px;margin:12px 0 10px;background:rgba(110,80,50,.4)}
  .hero-photo .hero-lead .hl3{margin-top:14px;font-family:var(--display);font-variation-settings:"opsz" 48;font-style:italic;font-weight:500;font-size:clamp(1.63rem,2.3vw,1.85rem);line-height:1.15;letter-spacing:-.01em;color:#305c49}
  /* the button sits right under the lead (the 70 biomarkers card left the hero on 2026-10-09); full width on phones, one line down to a 360 px screen */
  .hero .ctas{grid-area:c;display:flex;margin-top:16px}
  @media (max-width:560px){.hero .ctas .btn{width:100%}}
  @media (max-width:900px){
    .hero.hero-photo{padding-top:0}
    /* phones, top to bottom: her photo, the rotating title, the lead, the button */
    .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"ph" "t" "l" "c"}
    /* the title starts on the sofa under her hands and runs on below the photo */
    .hero-t{grid-area:t;padding-top:0}
    .hero > .wrap{padding-inline:24px}
    .hero-ph{position:relative;grid-area:ph;width:auto;margin-inline:-24px;aspect-ratio:1536/1024;margin-bottom:-5.33vw;-webkit-mask-image:linear-gradient(to bottom,#000 90%,transparent 100%);mask-image:linear-gradient(to bottom,#000 90%,transparent 100%)}
    /* the whole landscape photo, so her arms and both elbows stay in the frame; the title starts on the last strip of sofa */
    .hero-ph img{object-position:50% 50%}
  }
  /* desktop hero (2026-10-12): her photo whole, at its own 3:2, never cropped or enlarged: 55% of the screen wide, on the right from under the header, its left edge and its foot fading into the white; the hero is at least as tall as the photo, the text centred in its height. The title and the lead a step larger than on phones, with more air between title, promise, path, quote and button (the phone spacing stays tight); 900 px and under keep their layout */
  @media (min-width:901px){
    /* the text block sits 32 px above the centre (2026-10-12): 2rem moved from the top padding to the bottom, so the hero keeps its height */
    .hero.hero-photo{min-height:calc(55vw / 1.5);display:flex;flex-direction:column;justify-content:center;padding-block:2.5rem 7rem}
    .hero h1{font-size:min(var(--title),calc(100cqi / 8.9))}
    .hero-ph{bottom:auto;width:55%;aspect-ratio:1536/1024;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%),linear-gradient(to bottom,#000 86%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,#000 30%),linear-gradient(to bottom,#000 86%,transparent 100%);mask-composite:intersect}
    .hero-ph img{object-position:50% 50%}
    .hero .lead{margin-top:30px}
    .hero-lead{max-width:36rem}
    .hero-photo .hero-lead .hl1{font-size:1.65rem;line-height:1.25}
    .hero-photo .hero-lead .hl2{font-size:1.3rem;line-height:1.45}
    .hero-photo .hero-lead .hl2::before{margin:24px 0 20px}
    /* the path always reads as two lines on desktop, "Comprehensive blood work, a dedicated doctor," / "and care we fine-tune until you say:" (2026-10-12): the first line is 19.9em wide and "and" would take it to 21.7em, so a 20.8em measure breaks it after "doctor," with no markup change (a <br> or span there moved the anti-aliasing of "care" on phones) */
    .hero-photo .hero-lead .hl2{max-width:20.8em}
    .hero-photo .hero-lead .hl3{margin-top:24px;font-size:2.1rem}
    .hero .ctas{margin-top:44px}
    /* the hero button at the shared desktop button width, 25.7rem, like "Join Veedma", "Get started" and the lab panels pill (user, 2026-10-15: it was the narrowest button on the page) */
    .hero .ctas .btn{width:25.7rem;max-width:100%}
  }

  /* noble emerald surfaces, taken from the How it works photos: deep emerald to near black-green, a green glow top-left, a warm gold glint bottom-right, a gold hairline */
  /* trust line (2026-10-14, after design feedback): four standing points, no motion (the running line moved on its own with no pause, WCAG 2.2.2, and its bold sans stood apart from the page); gold line icons, the page's serif. Phones: four columns, the icon above two short lines; wide screens: one row across the column */
  .trust{background:#fff;border-block:1px solid #e3e6dd}
  .tq{list-style:none;margin:0 auto;max-width:74rem;padding:1.1rem clamp(1rem,4vw,2.5rem);display:flex;justify-content:space-between;gap:1.5rem}
  .tq li{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-variation-settings:"opsz" 48;font-size:1.08rem;line-height:1.2;color:#102f29}
  .tq b{font-weight:500}
  .tq svg{flex:none;width:24px;height:24px;color:#ab874a}
  @media (max-width:720px){
    .tq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,4rem),1fr));gap:.4rem;padding:1rem .75rem 1.05rem}
    .tq li{min-width:0;flex-direction:column;gap:.45rem;text-align:center;font-size:.86rem}
    .tq li > span{display:flex;flex-direction:column;min-width:0;max-width:100%;overflow-wrap:anywhere}
    .tq svg{width:26px;height:26px}
  }
  @media (max-width:359px){.tq li{font-size:.8rem}}

  /* symptom map, from the user's mockup (2026-10-09): a warm white-sage section with soft silk folds at the top right, the left edge and the foot; the title in dark green with "telling" in the hero's gold; symptoms as light serif pills; the panel a warm white card, the count and the figures in gold, hairlines between rows, a dark green pill button with the sources under it. Picked symptoms turn the button's green */
  .check{position:relative;isolation:isolate;overflow:hidden;background:#f5f8ef}
  .check-silk{position:absolute;z-index:-1;pointer-events:none;display:block}
  .check-silk.tr{top:0;right:0;width:min(66%,560px);height:auto}
  .check-silk.lf{left:0;top:36%;width:min(15%,96px);height:auto}
  /* the foot folds dissolve into the section colour before its lower edge, so it runs into the age chart without a seam */
  .check-silk.bt{left:0;right:0;bottom:0;width:100%;height:clamp(150px,34vw,260px);-webkit-mask-image:linear-gradient(to bottom,#000 35%,transparent 92%);mask-image:linear-gradient(to bottom,#000 35%,transparent 92%)}
  /* the title matches the hero title: weight 400, #102F29, line-height 1.05; the gold word weight 500 like the hero's rotating word */
  .check h2{font-size:var(--title);line-height:1.05;color:#102f29;font-weight:400}
  .check h2 .hl{background:none;padding:0;font-weight:500;color:#ab874a}
  /* the lead under the title in the type of the hero's "Comprehensive blood work" line */
  .check .check-lead{font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:500;font-size:clamp(1.1rem,1.5vw,1.2rem);line-height:1.4;letter-spacing:-.02em;color:#111;max-width:36rem}
  /* the lead reads as the instruction for the chips: set apart from the title, close to the chips */
  /* the instruction is set like the panel's "Same symptoms, different cause.": Newsreader 400, 1.28rem on phones, 1.6rem wide, line-height 1.2, #0F2A22 */
  .check .check-lead{margin-top:1.2rem;font-variation-settings:normal;font-weight:400;font-size:1.45rem;line-height:1.2;letter-spacing:normal;color:#0f2a22;text-wrap:balance}
  @media (max-width:560px){.check .check-lead{font-size:1.18rem}}
  .check .check-lead + .check-grid{margin-top:.35rem!important}
  /* desktop (2026-10-12): the section starts 32 px closer to the trust line, so the title sits higher; phones and tablets keep their padding */
  @media (min-width:901px){.check.sec{padding-top:calc(clamp(3.5rem,8vw,6.5rem) - 2rem)}}
  /* desktop (2026-10-12, the user): the panel on the left, the symptoms on the right with their instruction right above them; the title spans both. The section's column becomes a grid and the symptom grid dissolves into it (display: contents); the panel's top meets the instruction's */
  @media (min-width:901px){
    .check > .wrap.stack{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-areas:"h h" "p l" "p c";grid-template-rows:auto auto 1fr;column-gap:clamp(1.5rem,4vw,3.5rem)!important;row-gap:0!important;align-items:start}
    .check > .wrap > h2{grid-area:h}
    .check .check-lead{grid-area:l}
    .check .check-grid{display:contents}
    .check .chips{grid-area:c;margin-top:.9rem}
    .check .panel{grid-area:p;margin-top:1.2rem}
  }
  .check-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start;margin-top:2rem}
  @media (max-width:900px){.check-grid{grid-template-columns:minmax(0,1fr)}}
  .chips{display:flex;flex-wrap:wrap;gap:.6rem}
  .sx{display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-variation-settings:"opsz" 48;font-size:1.06rem;padding:.62rem 1.1rem;border-radius:999px;border:1px solid #d4d6cc;background:#f1f2ec;color:#0f2a22;cursor:pointer;line-height:1.2;transition:background .2s,border-color .2s,color .2s}
  .sx:hover{border-color:#b9bdb0}
  .sx[aria-pressed="true"]{background:#1f4636;border-color:#1f4636;color:#fff}
  .sx[aria-pressed="true"]::before{content:"\2713\00a0";color:#e2c88f}
  .sx:focus-visible{outline:3px solid #43593c;outline-offset:3px}
  .chips .sx.sx-h{display:none}
  .sx-tgw{flex-basis:100%;display:flex;margin-top:.1rem}
  .sx-tg{display:inline-flex;align-items:center;gap:.75rem;font-family:var(--display);font-variation-settings:"opsz" 48;font-size:1.06rem;font-weight:400;padding:.62rem 1.45rem;border-radius:999px;border:1px solid #a3a796;background:#f7f7f2;color:#0f2a22;cursor:pointer;line-height:1.2}
  .sx-tg::after{content:"";width:.42em;height:.42em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.15em) rotate(45deg);transition:transform .2s}
  .sx-tg[aria-expanded="true"]::after{transform:translateY(.1em) rotate(-135deg)}
  .sx-tg:hover{background:#ecede4}
  .sx-tg:focus-visible{outline:3px solid #43593c;outline-offset:3px}
  .panel{background:#f9f8f2;color:#0f2a22;border:1px solid rgba(15,42,34,.07);border-radius:22px;box-shadow:0 18px 40px rgba(40,60,45,.08);padding:clamp(1.35rem,3vw,1.9rem);display:flex;flex-direction:column;gap:1rem;position:sticky;top:5.5rem}
  @media (max-width:900px){.panel{position:static}}
  .ph-head{display:flex;align-items:center;gap:.9rem}
  .ph-head .n{font-family:var(--display);font-style:normal;font-weight:500;font-size:3.1rem;line-height:.9;color:#ab874a;font-variant-numeric:tabular-nums}
  .ph-head p{font-family:var(--display);color:#0f2a22;font-size:1.75rem;line-height:1.2}
  @media (max-width:370px){.ph-head p{font-size:1.45rem}.panel .stats > div{gap:.7rem}.panel .stats span{font-size:1.06rem!important}}
  .sys{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
  .sys li{border:1px solid #e3e1d6;border-radius:12px;padding:.65rem .85rem;background:#fff;transition:opacity .25s}
  .sys .top{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
  .sys .nm{display:flex;align-items:center;gap:.55rem;font-family:var(--display);font-variation-settings:"opsz" 48;font-size:1.15rem;font-weight:500;color:#0f2a22}
  .sys .nm i{width:9px;height:9px;border-radius:50%;flex:none}
  .sys .cnt{font-size:.74rem;font-weight:600;letter-spacing:.03em;color:#86672f;white-space:nowrap}
  .sys .wt{font-size:.84rem;color:#4f5a52;margin-top:.25rem;line-height:1.4}
  .sys .wt2{font-size:.8rem;color:#6b746c;margin-top:.15rem;line-height:1.4}
  .panel .txt{font-family:var(--display);font-size:1.6rem;line-height:1.2;color:#0f2a22;padding-top:1.05rem;border-top:1px solid #e6e3d9}
  .panel .txt sup{font-size:.5em}
  .panel .stats{display:flex;flex-direction:column;margin-top:-.4rem}
  .panel .stats > div{display:flex;align-items:center;gap:.75rem;padding:.55rem 0;border-bottom:1px solid #e6e3d9;min-width:0}
  .panel .stats > div:last-child{border-bottom:0}
  .panel .stats b{flex:none;width:4.45rem;font-family:var(--display);font-weight:400;font-size:1.85rem;line-height:1.05;color:#ab874a;white-space:nowrap}
  .panel .stats span{font-family:var(--display);font-size:1.2rem;line-height:1.3;color:#14342c}
  .panel .btn{width:100%}
  .panel .small{font-family:var(--body);font-size:.8rem;line-height:1.5;color:#687068;margin-top:-.25rem}
  @media (max-width:560px){
    .check.sec{padding-block:2.75rem 3.25rem}
    .check-grid{margin-top:1.4rem;gap:1.6rem}
    .chips{gap:.5rem}
    .chips .sx{flex:1 1 auto;font-size:.95rem;padding:.58rem .7rem}
    .sx-tg{font-size:.95rem;padding:.58rem 1.25rem}
    .panel{padding:1.35rem 1.15rem 1.15rem;gap:.9rem}
    .ph-head .n{font-size:2.75rem}
    .ph-head p{font-size:1.6rem}
    .sys li{padding:.6rem .8rem}
    .sys .wt{font-size:.8rem}
    /* phones: the "Complete panel adds" lines are dropped to keep the panel short */
    .sys .wt2{display:none}
    .panel .txt{font-size:1.28rem;padding-top:.9rem}
    .panel .stats b{width:4rem;font-size:1.68rem}
    .panel .stats span{font-size:1.12rem}
    .panel .small{font-size:.76rem}
  }
  @media (prefers-reduced-motion: reduce){.sys li{transition:none}}

  /* chart palette (2026-10-14, after design feedback): the page's colours and serif replace the mockup's pink, indigo and navy sans: estrogen gold #AB874A (its label a deeper #9A7638), progesterone dark green #1F4D36, testosterone sage #6E8F78 dashed; axis labels Newsreader in green-grey #5D6B60, warm white plot card #FCFCF8 like the medicine cards; every line keeps its own label on the curve, and testosterone its dashes */
  /* age chart, copied from the user's mockup (2026-10-09): a pale mint section; the title in black serif with "change" in green italic, a serif lead; the chart in a near-white card (estrogen pink, progesterone indigo, testosterone dashed green, lavender axes and labels); a flat green card holds "You're 38", the gold slider and the message for her age; satin mint waves close the section and fade into the white section below. Text lines up with the green card's inner edge */
  .chart{--ins:1.25rem;background:#f5f8ef;isolation:isolate;color:#0b0b0b;--ink:#0b0b0b;--h-e:#ab874a;--h-p:#1f4d36;--h-t:#6e8f78;padding-bottom:0!important;position:relative}
  .chart .wrap{width:min(100%,58rem);display:flex;flex-direction:column}
  /* the mockup's soft background: blurred greenery at the left and right edges, a white glow behind the title */
  .chart::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#f5f8ef 0,rgba(245,248,239,0) 110px),radial-gradient(40% 18% at 50% 11%,rgba(255,255,255,.95),transparent 70%),radial-gradient(22% 9% at 2% 8%,rgba(158,186,140,0.57),transparent 70%),radial-gradient(14% 12% at 9% 24%,rgba(176,200,160,0.51),transparent 70%),radial-gradient(18% 7% at 0% 40%,rgba(150,180,135,0.41),transparent 70%),radial-gradient(20% 10% at 100% 12%,rgba(166,192,150,0.54),transparent 70%),radial-gradient(16% 14% at 94% 30%,rgba(184,206,168,0.49),transparent 70%),radial-gradient(12% 8% at 100% 46%,rgba(160,188,146,0.38),transparent 70%),radial-gradient(10% 5% at 22% 14%,rgba(214,196,150,0.34),transparent 70%)}
  /* the title takes the hero title's size: min(3rem, column / 8.9), 36.7 px at 375, 48 px wide; the lead takes the size and weight of the hero's "Comprehensive blood work" line */
  /* the title matches the hero title: Newsreader 400, #102F29, line-height 1.05; "change" in the hero's gold, weight 500 */
  .chart .ch-h{padding-inline:var(--ins);font-size:var(--title);font-weight:400;line-height:1.05;color:#102f29;max-width:none}
  .chart .ch-h .hl{background:none;padding:0;font-weight:500;color:#ab874a}
  .ch-lead{padding-inline:var(--ins);margin-top:1rem;font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:500;font-size:clamp(1.1rem,1.5vw,1.2rem);line-height:1.4;letter-spacing:-.02em;color:#111;max-width:36rem;box-sizing:content-box;text-wrap:pretty}
  @media (max-width:369px){.ch-lead{font-size:1.06rem}}
  /* the lead takes the shared lead style of the medicines and symptom sections (2026-10-14): Newsreader 400, 1.18rem on phones, 1.45rem wide, line-height 1.2, #0F2A22 (was 500, tight tracking, #111, which stood out) */
  #chart .ch-lead{font-variation-settings:normal;font-weight:400;font-size:1.45rem;line-height:1.2;letter-spacing:normal;color:#0f2a22;max-width:40rem;text-wrap:balance}
  @media (max-width:560px){#chart .ch-lead{font-size:1.18rem}}
  .ch-plot{margin-top:1.4rem;background:#fcfcf8;border:1px solid rgba(15,42,34,.07);border-radius:22px;box-shadow:0 10px 30px rgba(30,84,60,.06);padding:.45rem .5rem .3rem .2rem}
  .chart .grid-l{stroke:#e8ece3}
  .chart .axl{stroke:#c3cabd}
  .chart .ax{font-family:var(--display);font-variation-settings:"opsz" 48;font-size:20px;font-weight:400;fill:#5d6b60}
  .chart .ax-t{font-weight:500;letter-spacing:0;fill:#3c4a40}
  .chart .mk{stroke:#a9b3a6;stroke-opacity:1}
  .chart .ln-e,.chart .ln-p{stroke-width:3.2}
  .chart .ln-t{stroke-width:2.6}
  .chart .ln-e{filter:none}
  .chart .hlab text{font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:500}
  .chart .hlab.e text{fill:#9a7638}
  .chart .hlab line{stroke-width:1.4;stroke-opacity:.9}
  .chart .hlab.t circle{fill:#6e8f78}
  /* green card: flat mockup green, no hairline; the gold slider and the gold age stay */
  /* the age card wears the comparison's green turned around: deep green at the lower left under the message, lightening toward the top right where there is least text; a thin gold border; its faint silk lines in the top right */
  .chartcard{position:relative;z-index:1;margin-top:.9rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 170' fill='none' stroke='%23ffffff' stroke-linecap='round'%3E%3Cpath d='M298 6 C 240 30, 200 10, 140 2' stroke-opacity='.16' stroke-width='1.1'/%3E%3Cpath d='M298 30 C 230 40, 190 18, 110 2' stroke-opacity='.2' stroke-width='1.3'/%3E%3Cpath d='M298 54 C 240 52, 210 30, 170 2' stroke-opacity='.14' stroke-width='1'/%3E%3Cpath d='M298 80 C 256 70, 236 40, 214 2' stroke-opacity='.18' stroke-width='1.2'/%3E%3Cpath d='M298 14 C 270 12, 236 4, 200 2' stroke-opacity='.12' stroke-width='.9'/%3E%3C/svg%3E") right top/70% auto no-repeat,linear-gradient(45deg,#1d4134 0%,#2a5242 45%,#3b6751 78%,#4d7a5f 100%);border:1.5px solid #cfae6e;color:#f3fbf6;border-radius:22px;padding:1.2rem calc(var(--ins) - 1.5px) 1rem;display:flex;flex-direction:column;gap:.55rem;min-width:0;box-shadow:0 10px 22px rgba(20,60,40,.18)}
  .chartcard .slide input::-webkit-slider-runnable-track{background:linear-gradient(90deg,#e9c96a calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--f)),rgba(133,210,175,.75) 0)}
  .chartcard .slide input::-moz-range-track{background:rgba(133,210,175,.75)}
  .chartcard .ticks button{color:#cdeedd;font-size:.9rem}
  /* a smaller thumb (20 px, 2.5 px gold ring, 4 px glow) and a tighter scale under it */
  .chartcard .slide{--thumb:20px}
  .chartcard .slide input::-webkit-slider-thumb{border-width:2.5px;box-shadow:0 0 0 4px rgba(233,201,106,.18),0 3px 8px rgba(0,0,0,.3)}
  .chartcard .slide input::-moz-range-thumb{width:16px;height:16px;border-width:2.5px;box-shadow:0 0 0 4px rgba(233,201,106,.18),0 3px 8px rgba(0,0,0,.3)}
  .chartcard .ticks{margin-top:.3rem;height:1.35rem}
  .chartcard .ticks button::before{background:rgba(205,238,221,.5)}
  /* satin waves at the foot: they rise over the card's lower corners and fade into the white section below */
  .ch-waves{position:relative;z-index:2;display:block;width:100%;height:clamp(96px,16vw,200px);margin-top:calc(-.36 * clamp(96px,16vw,200px))}
  @media (max-width:560px){.chart.sec{padding-top:2.75rem}.chart .ax{font-size:28px}.chart .hlab text{font-size:34px}.chart .ln-e,.chart .ln-p{stroke-width:4.6}.chart .ln-t{stroke-width:3.6}.ch-plot{padding:.35rem .35rem .15rem 0;border-radius:18px}.chartcard{border-radius:20px}}
  /* phones (2026-10-12, the user's call): the symptom panel ends as far above "Sex hormones change with age" as the trust line ends above "What is your body telling you?" (44 px up to 560 px wide, 56 px above): the symptom section's bottom padding equals its top padding and the chart section adds none above its title */
  @media (max-width:720px){.chart.sec{padding-top:0}}
  @media (max-width:560px){.check.sec{padding-bottom:2.75rem}}
  @media (min-width:900px){.chart{--ins:1.8rem}.chartcard{padding-bottom:2.1rem}.ch-waves{margin-top:calc(-.36 * clamp(96px,16vw,200px))}}
  /* desktop (2026-10-12): the section takes the page's full column on the shared left edge (it was a 58rem column centred, inset from every other section), the chart and the green card stacked as on phones, so the chart's labels stay large; the title runs on one line, "Sex hormones change with age" (its line break is hidden here and a space put before "change", since the markup, the phones', has none) */
  @media (min-width:901px){.chart .wrap{width:min(100%,74rem)}.chart .ch-h br{display:none}.chart .ch-h .hl::before{content:" "}}
  /* desktop (2026-10-12): the symptom panel ends as far above this title as the trust line ends above the symptom title (72 px at 1440, was 208), as on phones. The section fits one screen with no empty right half (the user's pick of the side-by-side layout): the lead runs on one line, the chart on the left edge takes the column less the green card, the card stands beside it at the chart's height (16 to 19rem wide) with its content centred in its height; the chart was first full-column, then sized to the screen height on the left with the right side empty */
  @media (min-width:901px){
    .chart.sec{padding-top:0}
    .check.sec{padding-bottom:calc(clamp(3.5rem,8vw,6.5rem) - 2rem)}
    .chart .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,19rem);grid-template-areas:"h h" "l l" "p c";column-gap:1.25rem;align-items:start}
    .chart .ch-h{grid-area:h}
    .ch-lead{grid-area:l;max-width:none;white-space:nowrap}
    .chart .ch-plot{grid-area:p;margin-top:1.4rem}
    .chart .chartcard{grid-area:c;margin-top:1.4rem;align-self:stretch;justify-content:center;gap:.9rem}
    .chartcard .agemsg{padding-top:1rem}
  }
  /* desktop (2026-10-12): the satin waves under the age chart are lower (at most 120 px, were 200), so the medicines title comes about 75 px after the green card, as the other sections follow each other */
  @media (min-width:901px){.ch-waves{height:clamp(80px,8vw,120px);margin-top:calc(-.36 * clamp(80px,8vw,120px))}}
  .swing{width:100%;height:auto;display:block}
  .ax{font-family:var(--body);font-size:20px;font-weight:500;fill:var(--ink-2)}
  .grid-l{stroke:var(--line)}
  .ax-t{font-weight:600;letter-spacing:.04em;fill:var(--ink)}
  .ln-e{stroke:var(--h-e);filter:drop-shadow(0 0 4px rgba(140,40,88,.22))} .ln-p{stroke:var(--h-p)} .ln-t{stroke:var(--h-t)}
  .hlab text{font-family:var(--body);font-size:23px;font-weight:600}
  .hlab line{stroke-width:1.5;stroke-opacity:.8}
  .hlab.e text,.hlab.e circle{fill:var(--h-e)} .hlab.e line{stroke:var(--h-e)}
  .hlab.p text,.hlab.p circle{fill:var(--h-p)} .hlab.p line{stroke:var(--h-p)}
  .hlab.t text,.hlab.t circle{fill:var(--h-t)} .hlab.t line{stroke:var(--h-t)}
  .mk{stroke:var(--ink);stroke-opacity:.45}
  .swing{cursor:pointer}
  /* "You're 38" in the serif, her age in cream; the message for her age range sits under the slider, the card keeps the height of the longest message so nothing jumps while she drags */
  .agebig{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.8vw,1.85rem);line-height:1;letter-spacing:-.015em;color:#f3fbf6}
  .agebig strong{font-weight:400;color:var(--lime);font-variant-numeric:tabular-nums}
  .agemsg{padding-top:.75rem;border-top:1px solid rgba(255,255,255,.18);font-family:var(--display);font-size:clamp(1.1rem,1.8vw,1.25rem);line-height:1.36;color:#e0f5ea;text-wrap:pretty}
  /* slider: 6px track, gold fill up to the thumb, white thumb with a gold ring; --f (0 to 1) is set by the script */
  .slide{--thumb:26px}
  .slide input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:var(--thumb);margin:0;background:transparent;cursor:pointer;--f:0}
  .slide input::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(90deg,#e9c96a calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--f)),rgba(255,255,255,.16) 0)}
  .slide input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--thumb);height:var(--thumb);margin-top:calc(3px - var(--thumb) / 2);border-radius:50%;background:#fff;border:3px solid #e9c96a;box-shadow:0 0 0 6px rgba(233,201,106,.18),0 4px 10px rgba(0,0,0,.35)}
  .slide input::-moz-range-track{height:6px;border-radius:99px;background:rgba(255,255,255,.16)}
  .slide input::-moz-range-progress{height:6px;border-radius:99px;background:#e9c96a}
  .slide input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #e9c96a;box-shadow:0 0 0 6px rgba(233,201,106,.18),0 4px 10px rgba(0,0,0,.35)}
  .slide input:focus-visible{outline:2px solid var(--lime);outline-offset:6px;border-radius:99px}
  .ticks{position:relative;height:1.5rem;margin-top:.55rem}
  .ticks button{position:absolute;top:0;left:calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--f));transform:translateX(-50%);padding:.15rem .25rem;border:0;background:none;font:600 .8rem/1 var(--body);font-variant-numeric:tabular-nums;color:var(--on-dark-3);cursor:pointer}
  .ticks button::before{content:"";position:absolute;left:50%;top:-.45rem;width:1px;height:.3rem;background:rgba(255,255,255,.28)}
  /* her age under the thumb, bold cream; a tick number it would touch hides its number and keeps its mark */
  .ticks .tk-age{position:absolute;top:-.05rem;left:calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--f));transform:translateX(-50%);font:600 .98rem/1 var(--body);font-variant-numeric:tabular-nums;color:var(--lime);pointer-events:none;white-space:nowrap}
  .ticks button.off{color:transparent}

  /* comparison: Apple-style carousel, one slide per point; the next slide peeks in from the right; auto-advances every 5 s while on screen, a tap on a slide stops it, dots show progress, a button pauses or resumes */
  /* comparison, set like the hero (2026-10-11): a white section with soft sage waves at its foot; no photo (removed 2026-10-11); the section opens with the title. Title in the hero's style with "you deserve" in gold. The typical-care block is a neutral light grey (#e4e3e0), text navy, dots and pause on the same grey */
  .compare{position:relative;isolation:isolate;overflow-x:clip;background:linear-gradient(#f5f8ef 0,#fff 140px);color:#1d1d44;--sand:#e4e3e0;--ink:#1d1d44;--ink-2:#4a4a69;--muted:#4a4a69;--page:#ffffff;--line:rgba(29,29,68,.14);--line-strong:rgba(29,29,68,.28);--teal:#43593c}
  .cmp-waves{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(150px,15vw,230px);z-index:-1;pointer-events:none;display:block}
  .cmp-top{position:relative;color:#102f29}
  .cmp-txt{position:relative;z-index:1;gap:.9rem;padding-block:clamp(3.5rem,8vw,6.5rem) 0}
  .cmp-txt h2{font-size:var(--title);font-weight:400;line-height:1.05;color:#102f29;max-width:13ch}
  .cmp-txt .hl{background:none;padding:0;font-weight:500;color:#ab874a}
  .cmp-body{position:relative;z-index:1;padding-block:2.4rem 3rem}
  .cmp-body .cs{margin-top:0}
  @media (max-width:720px){
    /* phones: the photo first, a 4:5 crop from just above her arms down, its last fifth dissolving into white; the title starts on the white edge */
    .cmp-txt{padding-block:2.75rem 0;gap:.6rem}
    .cmp-txt h2{max-width:none}
    .cmp-body{padding-block:1.4rem 2rem}
    .cmp-waves{height:clamp(150px,44vw,190px)}
  }
  .cs{--gut:calc(max(0px,(100vw - 74rem) / 2) + clamp(1rem,4vw,2.5rem));margin-top:1.8rem;margin-inline:calc(50% - 50vw)}
  .cs-track{position:relative;display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:.4rem var(--gut) 1.6rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .cs-track::-webkit-scrollbar{display:none}
  /* comparison slide: no card frame and no title on screen (the point name stays for screen readers), just the two answers as blocks with large text; every slide is as tall as the tallest, so the pairs start and end on one line, and a shorter slide shares the extra height between its two blocks */
  .compare .cs-track{align-items:stretch;gap:3rem;padding-bottom:2rem}
  @media (max-width:720px){.compare .cs-track{gap:1rem}}
  .cs-s{flex:0 0 min(46rem,72vw);scroll-snap-align:start;display:flex;flex-direction:column;background:none;border:0;padding:0;cursor:auto;min-width:0}
  .cs-n{display:none}
  .cs-k{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .cs-p{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:.75rem;align-items:stretch}
  .cs-typ,.cs-ved{display:flex;flex-direction:column;gap:.6rem;border-radius:18px;padding:1.25rem 1.35rem 1.4rem}
  .cs-typ{background:var(--sand);color:var(--ink-2)}
  .cs-s .cs-ved{border-radius:18px;box-shadow:0 8px 18px rgba(6,14,9,.16)}
  .cs-ved{background:var(--forest);color:var(--on-dark)}
  .cs-cap{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
  .cs-typ .cs-cap{color:var(--muted)}
  .cs-ved .cs-cap{color:var(--lime)}
  .cs-ic{width:1.35rem;height:1.35rem;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:var(--body);font-weight:700;font-size:.7rem;letter-spacing:0;line-height:1}
  .cs-typ .cs-ic{background:var(--page);color:var(--muted)}
  .cs-typ .cs-ic::before{content:"✕"}
  .cs-ved .cs-ic{background:var(--lime);color:var(--forest)}
  .cs-ved .cs-ic::before{content:"✓";font-size:.8rem}
  .cs-p p{font-size:1.2rem;line-height:1.45}
  .cs-ved p{font-weight:500}
  /* the Veedma block is set like the age chart's green card: flat #1E543C, 22 px corners, soft shadow, no hairline frame; "Veedma" in the serif at the "You're X" size in cream, a hairline under it, the answer in the card's serif message type */
  .cs-s .cs-ved{background:#1e543c;border:0;border-radius:22px;box-shadow:0 8px 16px rgba(20,60,40,.14);color:#e0f5ea;gap:.75rem;padding:1.2rem 1.4rem 1.35rem}
  .cs-ved .cs-cap{display:flex;align-items:center;gap:.65rem;padding-bottom:.75rem;border-bottom:1px solid rgba(255,255,255,.18);font-family:var(--display);font-variation-settings:"opsz" 48;font-size:clamp(1.5rem,2.8vw,1.85rem);font-weight:400;line-height:1;letter-spacing:-.015em;text-transform:none;color:#f3fbf6}
  /* a gold check circle before "Veedma" answers the cross before "Typical care", the same check as on the medicine cards */
  .cs-ved .cs-ic{display:block;flex:none;width:1.5rem;height:1.5rem;border-radius:50%;background:#ab874a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/.85rem no-repeat}
  .cs-ved .cs-ic::before{content:none}
  /* the Treatment slide's two dictated lines stay two lines: each line never wraps, and the type shrinks with the block's width only as far as the first line needs */
  .cs-typ{container-type:inline-size}
  .cs-p .cs-typ p.cs-fit{font-size:min(clamp(1.1rem,1.8vw,1.25rem),6.45cqi)}
  .cs-typ p.cs-fit span{white-space:nowrap}
  /* the typical-care block mirrors the Veedma block: "Typical care" in the serif at the same size, a cross circle the size of the check, a hairline under it, and the answer in the same serif type, in navy grey */
  .cs-typ{gap:.75rem;padding:1.2rem 1.4rem 1.35rem;border-radius:22px}
  .cs-typ .cs-cap{padding-bottom:.75rem;border-bottom:1px solid rgba(29,29,68,.14);gap:.65rem;font-family:var(--display);font-variation-settings:"opsz" 48;font-size:clamp(1.5rem,2.8vw,1.85rem);font-weight:400;line-height:1;letter-spacing:-.015em;text-transform:none;color:#4a4a69}
  .cs-typ .cs-ic{flex:none;width:1.5rem;height:1.5rem;font-size:.8rem;background:#fff;color:#4a4a69}
  .cs-p .cs-typ p{font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:400;font-size:clamp(1.1rem,1.8vw,1.25rem);line-height:1.36;color:#3f4060;text-wrap:pretty}
  .cs-p .cs-ved p{font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:400;font-size:clamp(1.1rem,1.8vw,1.25rem);line-height:1.36;color:#e0f5ea;text-wrap:pretty}
  .cs-ctl{display:flex;align-items:center;justify-content:center;gap:1rem;padding-inline:var(--gut)}
  .cs-dots{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;min-width:0;gap:.2rem;background:var(--sand);border-radius:999px;padding:.55rem .8rem}
  .cs-dot{position:relative;flex:none;width:24px;height:24px;border-radius:999px;border:0;padding:0;background:transparent;cursor:pointer;overflow:hidden;transition:width .3s}
  .cs-dot::before{content:"";position:absolute;top:calc(50% - .275rem);bottom:calc(50% - .275rem);left:50%;width:.55rem;transform:translateX(-50%);background:var(--line-strong);border-radius:999px}
  .cs-dot.on::before{width:100%}
  .cs-dot.on{width:2.2rem}
  .cs-dot span{position:absolute;inset:calc(50% - .275rem) 0;width:0;background:var(--ink);border-radius:inherit}
  .cs-dot.on span{width:100%}
  .cs.playing .cs-dot.on span{width:0;animation:csfill var(--cs-ms,5000ms) linear forwards}
  @keyframes csfill{to{width:100%}}
  .cs-play{flex:none;width:2.4rem;height:2.4rem;border-radius:50%;border:0;background:var(--sand);color:var(--ink);display:grid;place-items:center;cursor:pointer}
  .cs-play:disabled{cursor:default}
  .cs-play svg{width:15px;height:15px;fill:currentColor}
  .cs-play .i-play{display:none}
  .cs:not(.rotation-enabled) .cs-play .i-play{display:block}
  .cs:not(.rotation-enabled) .cs-play .i-pause{display:none}
  .cs-dot:focus-visible,.cs-play:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
  @media (max-width:720px){
    .cs-s{flex-basis:84vw}
    .cs-p{display:flex;flex-direction:column;gap:.55rem}
    /* phones: the grey block hugs its text; the green block takes the height the slide needs to line up with the others */
    .cs-typ{flex:0 0 auto}
    .cs-s .cs-ved{flex:1 1 auto}
    .cs-p p{font-size:1.12rem}
  }
  @media (prefers-reduced-motion: reduce){.cs-dot{transition:none}.cs-track{scroll-behavior:auto}}
  /* how it works (2026-10-11): the page's white-sage with waves at the foot (was the beige wall); a portrait opens the section, full width on phones, with a clean top edge under the comparison's waves, fading out at her legs, where "Steps to feel like yourself again" begins; the title in the shared title style */
  .how{position:relative;isolation:isolate;background:#f5f8ef!important}
  .how-waves{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(140px,30vw,220px);z-index:-1;pointer-events:none;display:block}
  .how-ph{position:relative;z-index:0;margin:0;width:min(100%,30rem);-webkit-mask-image:linear-gradient(to bottom,#000 76%,transparent 95%);mask-image:linear-gradient(to bottom,#000 76%,transparent 95%);margin-bottom:-9rem}
  .how-ph img{display:block;width:100%;height:auto}
  .how .zz-h.st-title{font-size:var(--title);font-weight:400;line-height:1.05;color:#102f29}
  .how .zz-h.st-title .hl{color:#ab874a;font-weight:500}
  /* what to expect, from the user's mockup (2026-10-11): the title in the section-title style with "and when" on its own line in gold, a silk fold at the top right running to the screen edge; the open stage a warm white card with a thin beige border, the page's gold check and the text in the sans; the closed stages light rows with a hairline, a muted sage check circle and a chevron */
  .how{overflow-x:clip}
  .tlx{position:relative}
  .tl-silk{position:absolute;z-index:-1;pointer-events:none;display:block;top:-1.5rem;right:calc((100% - 100vw) / 2);width:min(64%,460px);height:auto}
  .how .zz-h.tl-title{font-size:var(--title);font-weight:400;line-height:1.05;color:#102f29;max-width:none}
  .how .zz-h.tl-title .hl{color:#ab874a;font-weight:500}
  .how .tl{max-width:42rem;margin:.9rem 0 0;gap:.6rem}
  .how .tl-i{background:rgba(255,255,255,.4)!important;border:1px solid #d8d8d0;border-radius:18px;box-shadow:none}
  .how .tl-i.on{background:#fcfbf6!important;border-color:#cfccbd;box-shadow:0 10px 24px rgba(40,60,45,.07)}
  .how .tl-h{gap:1rem;padding:.5rem 1.25rem .5rem .95rem;border-radius:18px}
  .how .tl-i.on .tl-h{padding:.8rem 1.25rem .45rem .95rem}
  .how .tl-ok{width:2.1rem;height:2.1rem;background:#e2e3d4;color:#2a3a2e}
  .how .tl-ok svg{width:.95rem;height:.95rem}
  .how .tl-i.on .tl-ok{width:2.6rem;height:2.6rem;box-sizing:border-box;border:1.5px solid #ecd9a8;background:radial-gradient(circle at 35% 30%,#f4e1b6 0%,#d4b27a 55%,#b48d4f 100%);color:#1f4d36;box-shadow:0 2px 6px rgba(0,0,0,.16)}
  .how .tl-i.on .tl-ok svg{width:1.2rem;height:1.2rem}
  /* the period names in the button's dark green, weight 500, so they read as headings (2026-10-11) */
  .how .tl-w{font-family:var(--display);font-weight:500;font-size:1.08rem;line-height:1.25;color:#1f4d36}
  .how .tl-i.on .tl-w{font-size:1.3rem}
  .how .tl-cv{width:1.15rem;height:1.15rem;color:#5d6b60}
  .how .tl-p p{padding:0 1.3rem 1rem;font-family:var(--display);font-size:1.08rem;line-height:1.42;color:#2c3a34}
  @media (min-width:721px){.how .tl-w{font-size:1.2rem}.how .tl-i.on .tl-w{font-size:1.5rem}.how .tl-p p{font-size:1.2rem;padding-left:calc(.95rem + 2.6rem + 1rem)}}
  /* wide screens: the portrait sits on the left and fades on its sides as well, so it has no hard edge */
  @media (min-width:721px){.how-ph{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 76%,transparent 95%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 76%,transparent 95%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}}
  @media (max-width:720px){
    .how.sec{padding-top:0!important}
    /* the title starts at about 92% of the portrait (83% until 2026-10-11); the photo fades out sooner, from her hips (62%) to nothing at 90%, so little of her legs shows above the title */
    .how-ph{width:auto;margin-inline:calc(-1 * clamp(1rem,4vw,2.5rem));margin-bottom:calc(-.10 * (100vw * 1.5));-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 90%);mask-image:linear-gradient(to bottom,#000 62%,transparent 90%)}
  }
  /* every section title starts on the page's left edge, as in a book (2026-10-11) */
  #check h2,#chart .ch-h,#rx h2,#compare h2,#how .zz-h,#pricing h2,#faq h2{text-align:left!important}
  /* phones (2026-10-12, the user's call): "Membership" is centred over the card, the one title on phones off the shared left edge; it takes the card's 28rem so it stays over the card where the column is wider */
  @media (max-width:720px){#pricing h2{text-align:center!important;max-width:28rem}}
  /* the age chart's title and lead start on the same edge as the cards, not inset to the green card's text */
  #chart .ch-h,#chart .ch-lead{padding-inline:0}
  /* comparison from the user's mockup (2026-10-11): ivory background with pale sage leaves at the top left, a silk fold on the right and waves at the foot; the title on the left edge; each slide one full-width pair: a light grey card with a hairline border and a grey cross, a green card with a gradient (deep at the top left under the text, lighter toward the lower right), a gold border, silk lines and a gold check; small-caps labels; the answers in the serif at 21.6 px; every grey card and every green card the same height (script) */
  .compare{background:linear-gradient(#f5f8ef 0,#f7f6f0 140px)}
  .cmp-deco{position:absolute;z-index:-1;pointer-events:none;display:block}
  /* the page's one button under the comparison slides (2026-10-12): "Join Veedma", on the left edge, full width on phones like the hero's */
  .cmp-cta{display:flex;margin-top:.2rem}
  @media (max-width:560px){.cmp-cta .btn{width:100%}}
  .cmp-deco.lf{left:0;top:0;width:min(34%,220px);height:auto}
  .cmp-deco.rt{right:0;top:30%;width:min(26%,180px);height:auto}
  .compare .cmp-txt h2{max-width:none}
  .compare .cmp-txt .hl{display:block}
  .compare .cs-s .cs-typ,.compare .cs-s .cs-ved{border-radius:14px;padding:1.15rem 1.3rem 1.3rem;gap:.7rem}
  .compare .cs-s .cs-typ{background:#ecece8;border:1px solid #b9b9b1;box-shadow:none;color:#3a3a36}
  .compare .cs-s .cs-ved{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 170' fill='none' stroke='%23ffffff' stroke-linecap='round'%3E%3Cpath d='M10 168 C 90 150, 170 120, 298 20' stroke-opacity='.22' stroke-width='1.2'/%3E%3Cpath d='M30 168 C 110 148, 190 112, 298 40' stroke-opacity='.18' stroke-width='1'/%3E%3Cpath d='M60 168 C 140 140, 210 100, 298 64' stroke-opacity='.2' stroke-width='1.4'/%3E%3Cpath d='M0 150 C 80 140, 150 150, 298 92' stroke-opacity='.14' stroke-width='1'/%3E%3Cpath d='M100 168 C 170 138, 230 112, 298 104' stroke-opacity='.16' stroke-width='1'/%3E%3Cpath d='M0 128 C 70 126, 140 140, 230 124 C 260 118, 280 110, 298 100' stroke-opacity='.12' stroke-width='.9'/%3E%3C/svg%3E") right bottom/85% auto no-repeat,linear-gradient(140deg,#1d4134 0%,#2a5242 45%,#3b6751 78%,#4d7a5f 100%);border:1.5px solid #cfae6e;box-shadow:0 10px 22px rgba(20,60,40,.18);color:#fbfdfb}
  .compare .cs-cap{display:flex;align-items:center;gap:.85rem;padding-bottom:0;border-bottom:0;font-family:var(--display);font-variation-settings:"opsz" 48;font-size:.82rem;font-weight:500;line-height:1;letter-spacing:.24em;text-transform:uppercase}
  .compare .cs-typ .cs-cap{color:#30302c}
  /* gold small caps on green read smaller than dark ones on grey: "VEEDMA" is set a step larger and a touch brighter */
  .compare .cs-ved .cs-cap{color:#e2cfa5;font-size:.95rem;letter-spacing:.22em}
  .compare .cs-typ .cs-ic{display:grid;place-items:center;flex:none;width:2.1rem;height:2.1rem;border-radius:50%;background:#d2cec9;border:1.5px solid #b4b0aa;color:#2e2e2b;font-size:.95rem;font-weight:400}
  .compare .cs-ved .cs-ic{display:block;flex:none;width:2.1rem;height:2.1rem;border-radius:50%;border:1.5px solid #ecd9a8;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4d36' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/1.05rem no-repeat,radial-gradient(circle at 35% 30%,#f4e1b6 0%,#d4b27a 55%,#b48d4f 100%);box-shadow:0 2px 6px rgba(0,0,0,.18)}
  .compare .cs-p .cs-typ p,.compare .cs-p .cs-ved p{font-size:1.3rem;line-height:1.25;letter-spacing:-.01em}
  .compare .cs-p .cs-typ p{color:#3a3a36}
  .compare .cs-p .cs-ved p{color:#fbfdfb}
  .compare .cs-p .cs-typ p.cs-fit{font-size:min(1.3rem,6.45cqi)}
  .compare .cs-dots{background:rgba(255,255,255,.75)}
  .compare .cs-dot::before{background:#d6c8aa}
  .compare .cs-dot span{background:#1f4d36}
  .compare .cs-play{background:#fff;border:1.5px solid #c9a96a;color:#1f2d28}
  @media (max-width:720px){
    .compare .cs{--gut:16px}
    /* every horizontal carousel shows the edge of the next card, as the medicines do: 84vw cards, 16 px apart */
    .compare .cs-s{flex-basis:84vw}
    .compare .cs-track{gap:16px}
    .compare .cs-p .cs-typ p,.compare .cs-p .cs-ved p{font-size:1.2rem}
    .compare .cs-p .cs-typ p.cs-fit{font-size:min(1.2rem,6.45cqi)}
  }
  /* desktop (2026-10-12, the user: one table, a "Typical care" column against a "Veedma" column, not two separate cards): from 901 px the seven slides become the rows of one table, every point visible at once and the section on one laptop screen. The title runs on one line and starts higher. The slides and their pairs dissolve into one grid (display: contents); the table's warm grey ground and hairline frame are the track's ::before across both columns, the Veedma column is the green card (gradient, silk lines, gold border) as its ::after over the right column; "Typical care" with the cross and "Veedma" with the gold check head the columns once, over a hairline; hairlines run across each row; a short answer sits centred against a two-line one; dots and pause are hidden (the phones keep the carousel) */
  @media (min-width:901px){
    /* the title sits as far below the medicines dots as every section title sits below the section before it: the symptom title's space, clamp(3.5rem,8vw,6.5rem) less 2rem (72 px at 1440), less the medicines section's own bottom padding (2026-10-12) */
    .compare .cmp-txt{padding-block:calc(clamp(3.5rem,8vw,6.5rem) - 2rem - clamp(1rem,3vw,2.5rem)) 0}
    .compare .cmp-txt .hl{display:inline}
    .compare .cmp-body{padding-block:1.6rem 2.5rem;gap:.7rem!important}
    .compare .cs{margin-inline:0;--gut:0px}
    .compare .cs-track{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:repeat(7,auto);gap:0;overflow:visible;padding:0;margin-bottom:.5rem;scroll-snap-type:none}
    .compare .cs-track::before{content:"";grid-column:1 / -1;grid-row:1 / -1;background:#efeee9;border:1px solid #c8c4b6;border-radius:18px;box-shadow:0 12px 28px rgba(40,60,45,.09)}
    .compare .cs-track::after{content:"";grid-column:2;grid-row:1 / -1;margin:-1px -1px -1px 0;border:1.5px solid #cfae6e;border-radius:0 18px 18px 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 170' fill='none' stroke='%23ffffff' stroke-linecap='round'%3E%3Cpath d='M10 168 C 90 150, 170 120, 298 20' stroke-opacity='.2' stroke-width='1.2'/%3E%3Cpath d='M30 168 C 110 148, 190 112, 298 40' stroke-opacity='.16' stroke-width='1'/%3E%3Cpath d='M60 168 C 140 140, 210 100, 298 64' stroke-opacity='.18' stroke-width='1.4'/%3E%3C/svg%3E") right bottom/70% auto no-repeat,linear-gradient(150deg,#1d4134 0%,#2a5242 45%,#3b6751 78%,#4d7a5f 100%)}
    .compare .cs-s,.compare .cs-p{display:contents}
    .compare .cs-s{cursor:auto}
    .compare .cs-s .cs-typ,.compare .cs-s .cs-ved{position:relative;z-index:1;justify-content:center;background:none;border:0;box-shadow:none;border-radius:0;padding:.66rem 1.6rem;gap:.5rem;min-height:0!important}
    .compare .cs-typ{grid-column:1}
    .compare .cs-ved{grid-column:2}
    .compare .cs-s:nth-child(1) .cs-p > *{grid-row:1}
    .compare .cs-s:nth-child(2) .cs-p > *{grid-row:2}
    .compare .cs-s:nth-child(3) .cs-p > *{grid-row:3}
    .compare .cs-s:nth-child(4) .cs-p > *{grid-row:4}
    .compare .cs-s:nth-child(5) .cs-p > *{grid-row:5}
    .compare .cs-s:nth-child(6) .cs-p > *{grid-row:6}
    .compare .cs-s:nth-child(7) .cs-p > *{grid-row:7}
    .compare .cs-s:first-child .cs-typ,.compare .cs-s:first-child .cs-ved{justify-content:flex-start;padding-top:1rem}
    .compare .cs-s:first-child .cs-cap{margin:0 -1.6rem .45rem;padding:0 1.6rem .85rem}
    .compare .cs-s:first-child .cs-typ .cs-cap{border-bottom:1px solid rgba(58,58,54,.16)}
    .compare .cs-s:first-child .cs-ved .cs-cap{border-bottom:1px solid rgba(255,255,255,.2)}
    .compare .cs-s:last-child .cs-typ,.compare .cs-s:last-child .cs-ved{padding-bottom:1.05rem}
    .compare .cs-s:not(:first-child) .cs-cap{display:none}
    .compare .cs-s:not(:first-child) .cs-typ{background:linear-gradient(rgba(58,58,54,.13),rgba(58,58,54,.13)) left top/100% 1px no-repeat}
    .compare .cs-s:not(:first-child) .cs-ved{background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)) left top/100% 1px no-repeat}
    .compare .cs-p .cs-typ p,.compare .cs-p .cs-ved p,.compare .cs-p .cs-typ p.cs-fit{font-size:1.08rem;line-height:1.3}
    /* the Treatment row reads "Poor sleep? Irritability? Low mood? Anxiety?" / "Antidepressant!!!" (2026-10-12): the phones' <br> after "Low mood?" is hidden, a space put back before "Anxiety?", and a 19.6em measure (the first line is 18.8em, with "Antidepressant!!!" 26.1em) breaks it after "Anxiety?"; the markup stays the phones' */
    .compare p.cs-fit br{display:none}
    .compare p.cs-fit span:last-child::before{content:" "}
    .compare .cs-typ p.cs-fit span{white-space:normal}
    .compare .cs-typ p.cs-fit{max-width:19.6em}
    .compare .cs-ctl{display:none}
    /* "Join Veedma" (2026-10-12, the user: too small and off to the left): centred under the table, as wide as the Membership card's "Get started" (25.7rem, 411 px), so every main button on the desktop page has one size */
    .compare .cmp-cta{justify-content:center;margin-top:1.1rem}
    .compare .cmp-cta .btn{width:25.7rem}
    .compare .cmp-body > .small{margin-top:.5rem}
  }

  /* medicines, from the user's mockup (2026-10-09): the section on the page's sage white with silk folds; each card warm white with the product photo full bleed at the top, fading into the card; small-caps category, the name in bold serif, three benefits with gold check circles, a hairline, how you take it with a dark line icon, the price with the amount large in gold, and a full-width outlined Details pill. Spacing on one rhythm: 1.4rem sides, about 1rem between blocks */
  .rxsec{position:relative;isolation:isolate;overflow:hidden;background:#f5f8ef;color:#0f2a22;--ink:#0f2a22}
  .rx-silk{position:absolute;z-index:-1;pointer-events:none;display:block}
  .rx-silk.lf{left:0;top:44%;width:min(16%,100px);height:auto}
  .rx-silk.bt{left:0;right:0;bottom:0;width:100%;height:clamp(150px,34vw,260px);-webkit-mask-image:linear-gradient(to bottom,#000 35%,transparent 100%);mask-image:linear-gradient(to bottom,#000 35%,transparent 100%)}
  /* title like the hero title (size, Newsreader 400, #102F29, line-height 1.05) with "prescribe" in the hero's gold; the lead in the type of the hero's "Comprehensive blood work" line */
  .rxsec .hl{background:none;padding:0;font-weight:500;color:#ab874a}
  .rxsec h2{font-size:var(--title)!important;font-weight:400;color:#102f29;line-height:1.05!important}
  /* the lead is set like the symptom map's instruction: Newsreader 400, 1.18rem on phones, 1.45rem wide, line-height 1.2, #0F2A22 */
  .rxsec .lead{font-family:var(--display);font-variation-settings:normal;font-weight:400;font-size:1.45rem;line-height:1.2;letter-spacing:normal;color:#0f2a22;max-width:40rem;text-wrap:balance}
  @media (max-width:560px){.rxsec .lead{font-size:1.18rem}}
  /* the medicines section ends close under its dots, so the gap from the dots to the comparison title matches the gap from the age chart's waves to the medicines title */
  .rxsec.sec{padding-bottom:clamp(1rem,3vw,2.5rem)}
  @media (max-width:560px){.rxsec.sec{padding-block:2.75rem 1rem}}
  /* the card's lower half is set tighter (2026-10-12): the photo stays square so every bottle shows whole, the gaps under the photo, between the benefits, above the price and around the Learn more pill are smaller */
  /* the carousel: one card per phone screen with the next peeking, equal heights, dots and pause under it */
  .rxcs{margin-top:1.2rem}
  .rxcs .cs-track > .rxc{flex:0 0 min(26rem,84vw);scroll-snap-align:start;cursor:auto}
  .rxcs .cs-track{padding-top:.8rem;padding-bottom:2rem;align-items:flex-start}
  .rxc{position:relative;display:flex;flex-direction:column;background:#fcfcf8;border:1px solid rgba(15,42,34,.07);border-radius:26px;padding:0 0 1.1rem;min-width:0;overflow:hidden;color:#0f2a22;box-shadow:0 14px 32px rgba(40,60,45,.1)}
  .rxc > :not(.rxc-v){margin-inline:1.4rem}
  /* the product: a photo fills the top edge to edge; the drawn placeholders sit on a warm plate; both fade into the card */
  .rxc-v{position:relative;display:grid;place-items:center;aspect-ratio:1/1;overflow:hidden;background:radial-gradient(90% 90% at 50% 30%,#efe3d4 0%,#e3d1bc 60%,#d8c1a8 100%);-webkit-mask-image:linear-gradient(to bottom,#000 90%,transparent 100%);mask-image:linear-gradient(to bottom,#000 90%,transparent 100%)}
  .rxc-v svg{height:56%;width:auto;display:block}
  /* the photo is pinned to the frame so object-position frames it: the products sit high, the patch shows above the fade */
  .rxc-v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 72%;display:block}
  /* names stay on one line; the script shrinks a name only when it does not fit (Levothyroxine or liothyronine on phones), down to 1.15rem */
  /* the name sits under the photo; its row keeps the full name height even when the script shrinks a long name, so every card lines up */
  /* spacing rhythm: the name 1.2rem under the photo, the benefits 1.35rem under the name, the hairline 1.2rem under the benefits; a card shorter than the tallest shares its spare height equally between these three gaps (auto margins), so no single gap opens up */
  .rxc-t{margin-top:auto;padding-top:.85rem;min-height:calc(clamp(2.05rem,2.8vw,2.4rem) * 1.05 + .85rem);display:flex;align-items:flex-end;font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:500;font-size:clamp(2.05rem,2.8vw,2.4rem);line-height:1.05;letter-spacing:-.02em;color:#0d2620;white-space:nowrap}
  .rxc-ben{list-style:none;margin-top:auto;margin-bottom:0;padding:.85rem 0 .9rem;display:flex;flex-direction:column;gap:.5rem}
  /* a benefit that wraps keeps its check on the first line */
  .rxc-ben li{display:flex;align-items:flex-start;gap:.8rem;font-family:var(--display);font-variation-settings:"opsz" 48;font-size:1.18rem;line-height:1.25;color:#0f2a22}
  .rxc-ben .nw{white-space:nowrap}
  /* the benefit check is the comparison's gold check: a gold gradient circle with a cream ring and a dark green check, at the benefits' size */
  .rxc-ben li::before{content:"";flex:none;margin-top:-.05rem;width:1.55rem;height:1.55rem;border-radius:50%;box-sizing:border-box;border:1.2px solid #ecd9a8;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4d36' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/.8rem no-repeat,radial-gradient(circle at 35% 30%,#f4e1b6 0%,#d4b27a 55%,#b48d4f 100%);box-shadow:0 1px 4px rgba(0,0,0,.14)}
  .rxc-foot{display:flex;flex-direction:column;align-items:stretch;gap:.7rem;margin-top:auto;padding-top:.8rem;border-top:1px solid #dcd6cb}
  .rxc-p{display:flex;align-items:baseline;gap:0;font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:400;font-size:1.15rem;line-height:1;color:#0f2a22;white-space:nowrap}
  .rxc-p b{margin-left:.45rem;font-weight:500;font-size:2.05rem;line-height:1;letter-spacing:-.02em;color:#ab874a}
  .rxc-p small{margin-left:.12rem;font-size:1.15rem;color:#0f2a22}
  .rxc-more{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:100%;min-height:2.7rem;padding:.45rem 1.2rem;border-radius:999px;border:1px solid #c4a56c;background:transparent;color:#0f2a22;font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:400;font-size:1.28rem;letter-spacing:0;cursor:pointer;transition:background .2s}
  .rxc-more:hover{background:rgba(171,135,74,.08)}
  .rxc-more[aria-expanded="true"]{background:rgba(171,135,74,.12)}
  .rxc-more:focus-visible{outline:3px solid #43593c;outline-offset:3px}
  .rxc-d{margin-top:1rem;display:flex;flex-direction:column;gap:.6rem;font-family:var(--display);font-size:1.05rem;line-height:1.45;color:#3f4a44}
  @media (max-width:369px){.rxc > :not(.rxc-v){margin-inline:1.15rem}.rxc-ben li{font-size:1.1rem}.rxc-p b{font-size:1.85rem}}
  /* desktop (2026-10-12): the medicines section fits one laptop screen (a MacBook Air 13, about 1440 x 800 inside the browser) and reads compact, not oversized: it starts 28 px under the age chart's waves (lower on desktop, below), the lead runs on one line, the cards are sized to the screen height (the screen height less 33.5rem, between 15rem and 20rem: 264 px on an 800 px high window, 320 from 856) with the type and spacing inside a step smaller; the photo stays square so every bottle shows whole */
  @media (min-width:901px){
    /* a little air above the title under the waves (2026-10-12, the user: it sat too close): 28 px, so the title comes about 102 px after the green age card at 1440 */
    .rxsec.sec{padding-top:1.75rem}
    .rxsec .lead{max-width:none;text-wrap:wrap}
    .rxcs{margin-top:.6rem}
    .rxcs .cs-track{padding-top:.6rem;padding-bottom:1.4rem}
    .rxcs .cs-track > .rxc{flex-basis:clamp(15rem,calc(100vh - 33.5rem),20rem)}
    .rxc{border-radius:22px;padding-bottom:.95rem}
    .rxc > :not(.rxc-v){margin-inline:1.1rem}
    .rxc-t{padding-top:.7rem;min-height:calc(1.7rem * 1.05 + .7rem);font-size:1.7rem}
    .rxc-ben{padding:.65rem 0 .7rem;gap:.38rem}
    .rxc-ben li{gap:.6rem;font-size:1.02rem}
    .rxc-ben li::before{width:1.3rem;height:1.3rem;background-size:.68rem,auto}
    .rxc-foot{gap:.55rem;padding-top:.65rem}
    .rxc-p{font-size:1rem}
    .rxc-p b{margin-left:.35rem;font-size:1.65rem}
    .rxc-p small{font-size:1rem}
    .rxc-more{min-height:2.35rem;padding:.3rem 1rem;font-size:1.1rem}
    .rxc-d{margin-top:.8rem;font-size:1rem}
  }

  /* how it works: zigzag timeline */
  /* how it works: the hero's warm wall colour (radial on wide screens, flat #d3bda5 on phones, the same in both themes), local colours fixed for the beige */
  .how{background:radial-gradient(120% 90% at 50% 15%,#d6c0a8 0%,#c9ae92 60%,#bfa286 100%);color:#1d1d44;--page:#ffffff;--paper:#ffffff;--sand:#e4e3e0;--ink:#1d1d44;--ink-2:#4a4a69;--muted:#4a4a69;--line:rgba(29,29,68,.16);--line-strong:rgba(29,29,68,.28);--lime:#ead79c;--lime-ink:#1d1d44;--teal:#43593c;--hl-fg:#43593c}
  @media (max-width:900px){.how{background:#d3bda5}}
  .how .tl-i{background:rgba(255,255,255,.38)}
  .how .tl-i.on{background:#fff}
  .how .small{color:#4a4a69}
  @media (max-width:760px){
  }
  /* feel like yourself again: accordion; one stage is always open as a card, the others are rows showing the period and the title */
  .tl{display:flex;flex-direction:column;gap:.55rem;max-width:42rem;width:100%;margin:1.4rem auto 0}
  .tl-i{border:1px solid var(--line);border-radius:18px;background:transparent;transition:background .3s,box-shadow .3s,border-color .3s}
  .tl-i.on{background:var(--page);border-color:var(--line-strong);box-shadow:0 14px 32px rgba(24,43,40,.1)}
  .tl-hd{margin:0;font:inherit}
  .tl-h{width:100%;display:flex;align-items:center;gap:.9rem;padding:1rem 1.15rem;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:18px}
  .tl-i.on .tl-h{cursor:default}
  .tl-h:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
  .tl-ok{flex:none;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:var(--sand);color:var(--muted);transition:background .3s,color .3s}
  .tl-ok svg{width:1rem;height:1rem}
  .tl-i.on .tl-ok{background:var(--lime);color:var(--lime-ink);width:2.6rem;height:2.6rem}
  .tl-i.on .tl-ok svg{width:1.25rem;height:1.25rem}
  .tl-x{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
  .tl-w{font-family:var(--display);font-weight:500;font-size:1.15rem;line-height:1.25;color:var(--ink)}
  .tl-i.on .tl-w{font-size:clamp(1.35rem,2.6vw,1.75rem)}
  .tl-cv{flex:none;width:1.2rem;height:1.2rem;color:var(--muted);transition:transform .3s}
  .tl-i.on .tl-cv{transform:rotate(180deg);opacity:0}
  .tl-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
  .tl-i.on .tl-p{grid-template-rows:1fr}
  .tl-p > div{overflow:hidden}
  .tl-p p{padding:0 1.15rem 1.25rem calc(1.15rem + 2.6rem + .9rem);font-size:.98rem;line-height:1.55;color:var(--ink-2)}
  @media (max-width:560px){.tl-p p{padding-left:1.15rem}.tl-t{font-size:1.05rem}}
  @media (prefers-reduced-motion: reduce){.tl-p,.tl-i,.tl-cv,.tl-ok{transition:none}}
  /* how it works, steps (2026-10-11): five light photo cards in a carousel, set like the medicine cards: a small gold "STEP N OF 5", the step name in the serif, the text, and the photo at the foot edge to edge, fading into the card at its top. Every card is as tall as the tallest; the photo takes the spare height (never shorter than 16:9, so the cards stay compact) and the photos end on one line; steps 1 to 4 share the height of step 3's photo (script) */
  .how .zz-h.st-title{position:relative;z-index:1;margin:0;padding-top:.25rem}
  .stcs{margin-top:.6rem}
  .stcs .cs-track{padding-top:.8rem;padding-bottom:2rem;align-items:stretch}
  /* the whole card scales with its width, like a picture, so no line ever re-wraps: every size is in --u, one pixel of the card as drawn at 338 px wide (the 402 px phone where step 3 reads "A report based on your labs, symptoms, / and medical history, with clear / explanations and treatment options.") */
  .stp{--u:calc(100cqi / 338);--pad:calc(22.4 * var(--u));container-type:inline-size;flex:0 0 min(26rem,84vw);scroll-snap-align:start;cursor:auto;position:relative;display:flex;flex-direction:column;min-width:0;background:#fcfcf8;border:1px solid rgba(15,42,34,.07);border-radius:26px;overflow:hidden;color:#0f2a22;box-shadow:0 14px 32px rgba(40,60,45,.1)}
  .stp-n{margin:calc(24 * var(--u)) var(--pad) 0;font-family:var(--display);font-variation-settings:"opsz" 48;font-size:calc(13.6 * var(--u));font-weight:500;line-height:1;letter-spacing:.22em;text-transform:uppercase;color:#86672f}
  /* every step name stays on one line, all at one size: the longest, "Start treatment & ongoing care", is 13.27em wide, so the size is the text width / 13.6 (21.6 px on a 338 px card) */
  .stp h3{margin:calc(10.4 * var(--u)) var(--pad) 0;font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:500;font-size:calc((100cqi - 2 * var(--pad)) / 13.6);white-space:nowrap;line-height:1.12;letter-spacing:-.01em;color:#102f29}
  /* the step text in the type of the age card's message ("Your baseline, before the shift..."): Newsreader 400, line-height 1.36, dark on the light card; 17.6 px on a 338 px card, scaling with it, and its optical size fixed at 18 so the letters keep their width at every size */
  .stp-x{margin:calc(11.2 * var(--u)) var(--pad) 0;font-family:var(--display);font-variation-settings:"opsz" 18;font-size:calc(17.6 * var(--u));line-height:1.36;color:#2c3a34;text-wrap:pretty}
  .stp .nw{white-space:nowrap}
  .stp-v{position:relative;flex:1 0 auto;aspect-ratio:16/9;margin-top:calc(4.8 * var(--u));overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%);mask-image:linear-gradient(to bottom,transparent 0,#000 24%)}
  .stp-v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  /* dots and pause as in the comparison (the user's mockup): a white tray, beige dots, the active one dark green, the pause white with a gold ring */
  .stcs .cs-dots{background:rgba(255,255,255,.75)}
  .stcs .cs-dot::before{background:#d6c8aa}
  .stcs .cs-dot span{background:#1f4d36}
  .stcs .cs-play{background:#fff;border:1.5px solid #c9a96a;color:#1f2d28}
  .zz-h{font-size:clamp(2.1rem,4.8vw,3.6rem);line-height:1.1;margin-top:3rem}
  .zz-h .hl{background:none;padding:0;font-weight:500}
  @media (min-width:561px){.zz-h{text-align:center}}
  @media (max-width:560px){.zz-h{font-size:2.6rem;margin-top:2.6rem}.how.sec{padding-block:1.75rem 3.25rem}.how .center .btn{width:100%}}

  /* desktop How it works (2026-10-12, the user's pick of variant V1): the section fits laptop screens in two parts and leaves no empty half. The steps title comes first, the standard distance under the comparison (clamp(3.5rem,8vw,6.5rem) less 2rem, less the comparison's 2.5rem bottom padding: 72 px at 1440), then the five step cards across the full width at 20rem (were 26rem; the card scales as drawn, its text about 16 px); the timeline title the same distance under the dots, then the list on the left (42rem) with her portrait on the right, as tall as the list, cropped from her face to her waist and fading on every side (on phones the portrait stays at the top); the sources line on the left edge. The wrap becomes a grid; the timeline block dissolves into it (display: contents) so its title spans both columns */
  @media (min-width:901px){
    .how.sec{padding-top:calc(clamp(3.5rem,8vw,6.5rem) - 2rem - 2.5rem)}
    .how > .wrap.stack{display:grid;grid-template-columns:minmax(0,42rem) minmax(0,1fr);grid-template-areas:"st st" "cs cs" "tt tt" "tl ph" "src src";column-gap:clamp(2rem,4vw,3.5rem);row-gap:.9rem;align-items:start}
    /* the steps title on one line, "Steps to feel like yourself again" (2026-10-12): the phones' <br> hidden and a space put back before the gold words */
    .how .st-title{grid-area:st;padding-top:0}
    .how .st-title br{display:none}
    .how .st-title .hl::before{content:" "}
    .how .stcs{grid-area:cs;margin-top:0}
    .how .stp{flex-basis:20rem}
    .how .tlx{display:contents}
    .how .tl-silk{display:none}
    .how .tl-title{grid-area:tt;margin-top:calc(clamp(3.5rem,8vw,6.5rem) - 2rem - .9rem)}
    .how .tl{grid-area:tl;max-width:none;margin:0}
    .how-ph{grid-area:ph;align-self:stretch;position:relative;width:auto;margin:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 80%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 80%,transparent 100%);mask-composite:intersect}
    .how-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
    .how > .wrap > .small{grid-area:src;text-align:left!important;margin-top:.6rem}
  }

  /* clinicians */
  .team{background:var(--paper)}
  /* the team as a carousel (2026-10-12), set like the medicine cards: warm white, 26 px corners, the photo on the top half edge to edge, fading into the card, then the name in the serif, the role in bronze capitals and a first-person quote (2026-10-12, after Agency's clinician quotes: each names one strength of the approach); Irina first, then the clinicians, every name bare with the license type spelled out on the role line; all four photos in place (Irina's 2026-10-12, images/team-irina-kotlova.webp, the initials placeholder removed) */
  .tmcs{margin-top:.6rem}
  .tmcs .cs-track{padding-top:.8rem;padding-bottom:2rem;align-items:stretch}
  .tmc{flex:0 0 min(26rem,84vw);scroll-snap-align:start;cursor:auto;display:flex;flex-direction:column;min-width:0;background:#fcfcf8;border:1px solid rgba(15,42,34,.07);border-radius:26px;overflow:hidden;box-shadow:0 14px 32px rgba(40,60,45,.1)}
  .tmc-v{position:relative;aspect-ratio:1/1;overflow:hidden;background:radial-gradient(90% 90% at 50% 30%,#eef1e8 0%,#e2e8db 60%,#d6dfce 100%);-webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);mask-image:linear-gradient(to bottom,#000 88%,transparent 100%)}
  .tmc-v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
  .tmc-b{display:flex;flex-direction:column;padding:.9rem 1.4rem 1.5rem}
  .tmc h3{font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:500;font-size:1.6rem;line-height:1.1;letter-spacing:-.01em;color:#102f29}
  .tmc-r{margin-top:.5rem;font-family:var(--display);font-variation-settings:"opsz" 48;font-size:.85rem;font-weight:500;line-height:1.2;letter-spacing:.18em;text-transform:uppercase;color:#86672f}
  .tmc-x{margin-top:.75rem;font-family:var(--display);font-size:clamp(1.1rem,1.8vw,1.25rem);line-height:1.36;color:#2c3a34;text-wrap:pretty}
  .tmcs .cs-dots{background:rgba(255,255,255,.75)}
  .tmcs .cs-dot::before{background:#d6c8aa}
  .tmcs .cs-dot span{background:#1f4d36}
  .tmcs .cs-play{background:#fff;border:1.5px solid #c9a96a;color:#1f2d28}
  /* the team title in the shared section-title style, "medical team" in gold (2026-10-12; was a small navy h3) */
  /* the team title runs three set lines, "The best care by" / "experts in" / "women's health" in gold (2026-10-12), at the shared title size */
  .team h2{font-size:var(--title);white-space:nowrap;font-weight:400;line-height:1.05;color:#102f29;max-width:none;text-align:left}
  .team h2 .hl{background:none;padding:0;font-weight:500;color:#ab874a}
  /* desktop team (2026-10-12): the title on one line, "The best care by experts in women's health" (the phones' line breaks hidden; the spaces before them in the markup collapse at a phone line's end), the standard distance under the How it works sources (72 px at 1440); the cards a step smaller: from 1100 px all four sit side by side across the column (264 px at 1440, were 416 with two showing), the dots and pause hidden as nothing scrolls; at 901 to 1099 px a carousel of 15rem cards; inside, the name 1.35rem, the role in smaller capitals on one line, the quote 1rem */
  @media (min-width:901px){
    .how.sec{padding-bottom:calc(clamp(3.5rem,8vw,6.5rem) - 2rem)}
    .team.sec{padding-top:0}
    .team h2 br{display:none}
    .tmcs{margin-top:.2rem}
    .tmcs .cs-track{padding-top:.6rem;padding-bottom:1.4rem}
    .tmc{flex-basis:15rem;border-radius:22px}
    .tmc-b{padding:.75rem 1.1rem 1.15rem}
    .tmc h3{font-size:1.35rem}
    .tmc-r{margin-top:.4rem;font-size:.7rem;letter-spacing:.12em}
    .tmc-x{margin-top:.6rem;font-size:1rem;line-height:1.4}
  }
  @media (min-width:1100px){
    .tmc{flex-basis:calc((min(100vw,74rem) - 5rem - 3rem) / 4)}
    .tmcs .cs-ctl{display:none}
    /* nothing scrolls here, so the track does not clip the cards' soft shadows into a hard line under them */
    .tmcs .cs-track{overflow:visible}
  }

  /* pricing, from the user's mockup (2026-10-11): one membership (Diamond retired; labs are sold separately) on the mockup's light green. A warm white card with the page's 1.5 px gold border and a soft shadow; the price centred in a bold sans, dark green, "/month" and the 90-day billing under it in grey; a hairline; "WHAT'S INCLUDED" in muted gold capitals; five points in the sans, each with the page's gold check; a hairline, the one button and "HSA/FSA eligible" */
  .pricing{background:#ecf1eb}
  /* the title is the one word "Membership" (2026-10-12; was "Membership & pricing"), the price on the card says the rest */
  .pricing h2{font-size:var(--title);white-space:nowrap;font-weight:400;line-height:1.05;color:#102f29;max-width:none}
  .pricing h2 .hl{background:none;padding:0;font-weight:500;color:#ab874a}
  .plan1{width:100%;max-width:28rem;margin-top:.6rem}
  .pc{position:relative;background:#fefdf9;border:1.5px solid #cfae6e;border-radius:24px;box-shadow:0 14px 32px rgba(40,60,45,.1);padding:1.75rem 1.1rem 1.3rem;display:flex;flex-direction:column;align-items:center;text-align:center}
  .pc-price{line-height:1;white-space:nowrap}
  .pc-price strong{font-family:var(--body);font-weight:600;font-size:2.1rem;letter-spacing:-.01em;color:#1c3a2a}
  .pc-price span{font-family:var(--body);font-size:1.1rem;color:#3e423e;margin-left:.3rem}
  .pc-billing{margin-top:.75rem;font-family:var(--body);font-size:1rem;color:#61625d}
  .pc-rule{align-self:stretch;height:1px;margin:1.4rem 0 0;border:0;background:#e2e1d8}
  .pc-label{margin-top:1.4rem;align-self:flex-start;font-family:var(--body);font-size:.84rem;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:#71653e}
  .pc ul{list-style:none;margin:.95rem 0 0;padding:0;width:100%;display:flex;flex-direction:column;gap:1rem;text-align:left;font-family:var(--body);font-size:1.1rem;line-height:1.42;color:#252724}
  .pc li{display:flex;gap:1rem;align-items:flex-start}
  .pc li::before{content:"";flex:none;margin-top:.1rem;width:1.3rem;height:1.3rem;border-radius:50%;box-sizing:border-box;border:1.2px solid #ecd9a8;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4d36' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/.72rem no-repeat,radial-gradient(circle at 35% 30%,#f4e1b6 0%,#d4b27a 55%,#b48d4f 100%);box-shadow:0 1px 4px rgba(0,0,0,.14)}
  .pc .pc-rule-b{margin-top:1.5rem}
  .pc .pc-btn{margin-top:1.4rem;width:100%}
  .pc-elig{display:inline-flex;align-items:center;gap:.35rem;margin-top:.75rem;font-family:var(--body);font-size:.88rem;color:#61625d}
  .pc-elig svg{width:16px;height:16px;stroke:#1f4d36}
  .pnote{margin-top:.4rem;text-align:center;width:100%;max-width:28rem;color:var(--ink-2)}
  /* desktop Membership (2026-10-12, the user: just centre it): the title, the card and the note under it centred on the page; the title the standard distance under the team cards (the team section ends at its cards; 72 px at 1440, was 230), and the band's light green fades in from the white above instead of starting on a hard line (light sections meet without a visible line) */
  @media (min-width:901px){
    .team.sec{padding-bottom:0}
    .pricing.sec{padding-top:calc(clamp(3.5rem,8vw,6.5rem) - 2rem);background:linear-gradient(var(--paper) 0,#ecf1eb 3.5rem)}
    .pricing > .wrap.stack{align-items:center}
    #pricing h2{text-align:center!important}
    .plan1{margin-inline:auto}
  }
  @media (min-width:1100px){.pricing.sec{padding-top:calc(clamp(3.5rem,8vw,6.5rem) - 2rem - 1.4rem)}}
  /* the one secondary link keeps the pill and the font, outlined */
  .btn-line{background:transparent;color:#1f4636;border:1px solid #a3a796;box-shadow:none}
  .btn-line:hover{border-color:#1f4636;filter:none}

  /* lab panels link, from the user's mockup (2026-10-12): a short pale sage band with white silk folds between pricing and the FAQ, its foot fading into the FAQ's off-white; the title in the shared style, "blood work?" in gold; the outlined pill on near-white; no eyebrow and no lead (the user dropped them) */
  .labsec{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(170deg,#eceee6 0%,#e5e8dd 60%,#e2e5d8 100%);padding-block:2.75rem 3.25rem}
  .labsec::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18px;background:linear-gradient(rgba(248,247,243,0),#f8f7f3);z-index:-1;pointer-events:none}
  .lab-silk{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}
  .labsec h2{font-size:var(--title);font-weight:400;line-height:1.05;color:#102f29;max-width:none}
  .labsec h2 .hl{background:none;padding:0;font-weight:500;color:#ab874a}
  .labsec .lab-btn{align-self:flex-start;margin-top:1.6rem;background:#f8f7f3;border:1px solid #7e8075;color:#102f29;gap:2rem;padding-inline:1.5rem 1.3rem}
  @media (min-width:561px){.labsec{padding-block:4rem 4.5rem}}
  #labs h2{text-align:left}
  /* desktop lab panels band (2026-10-12, the user's pick of variant A): one short row, the title on one line on the shared left edge ("What's in your blood work?", the phones' line break hidden and a space put back) and the outlined pill on the right edge at the shared button width (25.7rem, narrower only where the row is short of room); the title the standard distance under the Membership note (72 px at 1440: the pricing band keeps 1.5rem under the note, this band the rest), the band as tall again under its row, so the FAQ comes the same distance below; the band's top fades in from the pricing green instead of meeting it on a line */
  @media (min-width:901px){
    .pricing.sec{padding-bottom:1.5rem}
    .labsec{padding-block:calc(clamp(3.5rem,8vw,6.5rem) - 2rem - 1.5rem);background:linear-gradient(#ecf1eb 0,rgba(236,241,235,0) 3.5rem),linear-gradient(170deg,#eceee6 0%,#e5e8dd 60%,#e2e5d8 100%)}
    .labsec > .wrap.stack{flex-direction:row;align-items:center;justify-content:space-between;gap:2rem!important}
    .labsec h2{white-space:nowrap}
    .labsec h2 br{display:none}
    .labsec h2 .hl::before{content:" "}
    .labsec .lab-btn{align-self:center;margin-top:0;flex:0 1 25.7rem;min-width:16rem}
    /* the FAQ title gets 28 px more air under the band's edge (2026-10-12, the user: a little more), as the medicines title has under the waves: about 100 px under the lab panels button at 1440 */
    .faqsec.sec{padding-top:2.875rem}
  }

  /* faq, from the user's mockup (2026-10-12): warm off-white; "Questions, answered." in the shared title style, "answered" in gold (the small "FAQ" capitals over it removed on 2026-10-12, the title takes their place); the questions in the sans between hairlines, a thin grey plus at the right */
  .faqsec{background:#f8f7f3}
  @media (max-width:560px){.faqsec.sec{padding-top:2.25rem}}
  .faqsec .faq-side{gap:.6rem}
  .faqsec h2{font-size:var(--title);font-weight:400;line-height:1.05;color:#102f29;max-width:none}
  .faqsec h2 .hl{background:none;padding:0;font-weight:500;color:#ab874a}
  .faqsec .faq{border-top:1px solid #dddcd8}
  .faqsec .faq details{border-bottom:1px solid #dddcd8}
  .faqsec .faq summary{align-items:center;gap:1.25rem;padding:.7rem .15rem .7rem 0;font-family:var(--body);font-weight:400;font-size:.97rem;line-height:1.25;color:#1f2420}
  .faqsec .faq summary::after{content:"";flex:none;width:.9rem;height:.9rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565754' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E") center/contain no-repeat}
  .faqsec .faq details[open] summary::after{content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565754' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M4 12h16'/%3E%3C/svg%3E")}
  .faqsec .faq .a{color:#4a4d47;font-size:.97rem;line-height:1.55}
  .faqsec .faq .a b{font-weight:600}
  .faqsec .more{border:1px solid #c9c8c0;border-radius:999px;font-weight:600;color:#1f2420;padding:.7rem 1.3rem}
  /* faq */
  .faqsec{background:var(--paper)}
  .faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(1.5rem,5vw,4rem);align-items:start}
  @media (max-width:860px){.faq-grid{grid-template-columns:minmax(0,1fr)}}
  .faq-side{position:sticky;top:6rem;display:flex;flex-direction:column;gap:1rem}
  @media (max-width:860px){.faq-side{position:static}}
  .faq{border-top:1px solid var(--line)}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;padding:1.05rem 0;font-weight:600;font-size:1rem}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font-weight:400;color:var(--muted);font-size:1.2rem;line-height:1}
  .faq details[open] summary::after{content:"–"}
  .faq .a{padding:0 0 1.2rem;color:var(--ink-2);font-size:.97rem;max-width:44rem}
  .more{margin-top:1.2rem;background:transparent;border:1.5px solid var(--line-strong);color:var(--ink);font-family:var(--body);font-weight:600;font-size:.95rem;padding:.75rem 1.1rem;border-radius:10px;cursor:pointer}
  /* desktop FAQ (2026-10-12, the user's pick of the one-column layout): the title on one line on the shared left edge, the questions under it across the full column from the same edge, as on phones (they were a second column beside the title, starting off the edge); the questions and answers a step larger (17 px, were 15.5) with a little more height per row */
  @media (min-width:901px){
    .faq-grid{grid-template-columns:minmax(0,1fr);gap:1.4rem}
    .faq-side{position:static}
    .faqsec .faq summary{font-size:1.06rem;padding:.78rem .15rem .78rem 0}
    .faqsec .faq .a{font-size:1.02rem;max-width:46rem}
    .faqsec .more{font-size:1rem}
  }

  /* footer */
  /* the footer wears the green cards' look (2026-10-12): the deep green gradient, darkest at the top left under the brand and lightening toward the lower right, with faint white silk lines sweeping up across its lower 300 px */
  footer{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none' fill='none' stroke='%23ffffff' stroke-linecap='round'%3E%3Cpath d='M0 300 C 120 270, 230 220, 400 90' stroke-opacity='.16' stroke-width='1.2'/%3E%3Cpath d='M30 300 C 150 266, 250 210, 400 122' stroke-opacity='.12' stroke-width='1'/%3E%3Cpath d='M80 300 C 190 262, 280 214, 400 160' stroke-opacity='.15' stroke-width='1.4'/%3E%3Cpath d='M0 262 C 100 248, 200 262, 400 186' stroke-opacity='.1' stroke-width='1'/%3E%3Cpath d='M150 300 C 240 266, 320 234, 400 222' stroke-opacity='.12' stroke-width='1'/%3E%3C/svg%3E") right bottom/100% 300px no-repeat,linear-gradient(150deg,#1a3a2f 0%,#1d4134 30%,#2a5242 65%,#3b6751 100%);color:var(--on-dark-2);padding-block:3rem 6rem;font-size:.9rem}
  .fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:2rem}
  @media (max-width:760px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.fgrid > div:first-child{grid-column:1 / -1}}
  footer .brand{color:var(--on-dark)}
  footer h4{margin:0 0 .7rem;font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-3)}
  footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
  footer a{text-decoration:none}
  footer a:hover{color:var(--on-dark)}
  .legal{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--glass-line);font-size:.8rem;line-height:1.6;color:var(--on-dark-3);display:flex;flex-direction:column;gap:.6rem}
  /* the LegitScript seal and the HIPAA compliant badge under the promise, as on the men's footer (user, 2026-10-18): the seal exactly as LegitScript issued it to veedma.com, linked to its verification page, with the men's footer's title and alt text; the HIPAA badge's dark grey artwork on a warm white plate (card-warm #fcfcf8, 12 px corners like the menu button), as the men's footer backs it on a dark ground. 88 + 16 + 134 px in one row, the men's pairing (110 and 167 px) at the size of their landing page's seal; where the brand column is narrower than that (761 to about 905 px) the pair shrinks with it instead of wrapping. The plain px widths are the fallback for browsers without container units */
  footer .fseals{container-type:inline-size;display:flex;align-items:center;gap:16px;margin-top:.4rem}
  footer .fseals a{display:block;flex:none}
  footer .fseals img{display:block;height:auto}
  footer .fseals a img{width:88px;width:min(88px,calc((100cqi - 16px) * 88 / 222))}
  footer .fseals .fhipaa{flex:none;width:134px;width:min(134px,calc((100cqi - 16px) * 134 / 222));padding:7px 9px;border-radius:12px;background:#fcfcf8}
  /* desktop footer polish (2026-10-12, the user approved): it starts the standard distance under the FAQ's last button (72 px at 1440, was 104); links and the brand line 15.5 px (were 14.4); the telehealth disclaimer kept to 58rem so its lines read (they ran 180 characters across the column) at 13.6 px (was 12.8); 56 px under the copyright (was 96) */
  @media (min-width:901px){
    .faqsec.sec{padding-bottom:calc(clamp(3.5rem,8vw,6.5rem) - 2rem)}
    footer{padding-block:3.5rem;font-size:.97rem}
    footer h4{font-size:.7rem}
    footer ul{gap:.55rem}
    .legal{font-size:.85rem}
    .legal p:first-child{max-width:58rem}
  }