/* Layout: a high-end product catalog in the Apple / Tesla idiom. Design system from the ui-ux-pro-max skill
   (style "Minimalism & Swiss Style", palette "Monochrome + blue accent", type "Inter" as the SF Pro stand-in,
   with the real SF Pro on Apple devices). White pages with #F5F5F7 tiles, a full-bleed black hero with
   one lit chain of matte spheres and a Tesla-style stats row, oversized two-tone headlines, pill buttons,
   an Apple-style sticky local nav and a Specs table. Each peptide's own molecule, drawn as matte spheres in
   its own finish, is the product photography. */
:root{
  --bg:#FFFFFF; --bg-2:#F5F5F7; --card:#F5F5F7; --card-2:#E8E8ED; --field:#F5F5F7; --field-hover:#E8E8ED;
  --ink:#1D1D1F; --ink-2:#5E5E63; --ink-3:#6E6E73; /* --ink-3: the gray half of a two-tone headline (4.6:1 on both white and #F5F5F7) */ --line:#D2D2D7; --hair:#E8E8ED; --pop-bg:#FFFFFF;
  --link:#0066CC; --accent:#0071E3; --accent-hover:#0077ED; --on-accent:#FFFFFF; --ring:#0071E3;
  --warn:#B64400;
  --nav-bg:rgba(255,255,255,.94);
  --scrim:rgba(0,0,0,.28); /* the dimming behind an open dropdown */
  --tile-dark:#000000;
  /* the tile that holds an answer (the calculator's, the planner's headline): black on a white page; in dark, a step lighter than the cards, so it stands out from them */
  --tile-answer:#000000;
  /* a tile that sits on a gray band (the home page's goals): white on #F5F5F7 (light), the card gray on a near-black band (dark) */
  --band:#F5F5F7; --band-tile:#FFFFFF;
  /* the wash behind a molecule: a finish over these two, at these strengths (the product shot, the catalog card) */
  --art-hi:#FFFFFF; --art-lo:#F0F0F3; --art-k1:10%; --art-k2:20%; --shot-k:16%;
  /* a goal's icon tile: its tint over these, at this strength, with the icon a step deeper (light) or lighter (dark) so it is 3:1 against its tile (tools/imagery.test.js) */
  --chip-hi:#FFFFFF; --chip-k:14%; --chip-ink:#000000; --chip-ink-k:30%;
  /* evidence levels, strongest (1) to weakest (6); text-safe on --card */
  --e1:#1D7A34; --e2:#0B7285; --e3:#0066CC; --e4:#8A6100; --e5:#B64400; --e6:#6E6E73;
  /* what backs a listed benefit */
  --b-proven:#1D7A34; --b-early:#0066CC; --b-animal:#B64400; --b-claimed:#6E6E73;
  /* molecule "product shot": chemistry colors in a muted matte finish (one lightness, a gentle chroma: a soft sage, not a lime), so a drawing reads as a calm object, not a diagram (the drawing adds the light) */
  --aa-np:#B9BBC1; --aa-ar:#B698DA; --aa-pos:#7AABE9; --aa-neg:#EC928B; --aa-pol:#88CE97; --aa-cu:#CB8A5D; --aa-cap:#D1D1D6; --bead-ink:#111113;
  /* the bars of a dose ramp (the dose to stay on is the accent); drawn on a --card tile */
  --bar:#A1A1A6;
  --f-display:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Tight", "Inter", "Segoe UI", system-ui, sans-serif;
  --f-text:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --f-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease:cubic-bezier(.25,.1,.25,1);
  --r-lg:28px; --r:20px; --r-sm:12px;
  --gnav-h:52px; --lnav-h:52px; --bar-h:127px;
  --gut:clamp(20px,5vw,48px); /* the page's side gutter: .wrap's padding, and where a scrolling row of chips starts */
  /* Tracking by size, the way SF Pro does it: a little tight at display sizes, hardly at all in small headings. The display face on
     Windows and Android is Inter Tight, which is already a tight cut, so nothing here is tracked tighter than -0.012em (it was -0.028em,
     and the letter pairs of "Clearly explained." touched). */
  --tr-xl:-.012em; --tr-l:-.01em; --tr-m:-.008em; --tr-s:-.005em;
  /* small text (13, 14, 15px): every one of these becomes 16px on phones, see the phone block near the end */
  --fs-2xs:.8125rem; --fs-xs:.875rem; --fs-sm:.9375rem;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#000000; --bg-2:#0B0B0C; --card:#1C1C1E; --card-2:#2C2C2E; --field:#2C2C2E; --field-hover:#3A3A3C;
  --ink:#F5F5F7; --ink-2:#AEAEB3; --ink-3:#98989D; --line:#424245; --hair:#262628; --pop-bg:#1C1C1E;
  --link:#2997FF; --accent:#0071E3; --accent-hover:#0077ED; --on-accent:#FFFFFF; --ring:#2997FF;
  --warn:#FF9F0A;
  --nav-bg:rgba(22,22,23,.94);
  --scrim:rgba(0,0,0,.55);
  --tile-dark:#1C1C1E;
  --tile-answer:#2C2C2E;
  --band:#0B0B0C; --band-tile:#1C1C1E;
  --art-hi:#2C2C2E; --art-lo:#151517; --art-k1:17%; --art-k2:8%; --shot-k:22%;
  --chip-hi:#2C2C2E; --chip-k:14%; --chip-ink:#FFFFFF; --chip-ink-k:50%;
  --e1:#30D158; --e2:#40C8E0; --e3:#2997FF; --e4:#FFD60A; --e5:#FF9F0A; --e6:#98989D;
  --b-proven:#30D158; --b-early:#2997FF; --b-animal:#FF9F0A; --b-claimed:#98989D;
  --aa-np:#B4B6BA; --aa-ar:#BB9CDF; --aa-pos:#7EAFEE; --aa-neg:#F1968F; --aa-pol:#8DD39B; --aa-cu:#D08F62; --aa-cap:#48484A; --bead-ink:#111113;
  --bar:#636366;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#000000; --bg-2:#0B0B0C; --card:#1C1C1E; --card-2:#2C2C2E; --field:#2C2C2E; --field-hover:#3A3A3C;
  --ink:#F5F5F7; --ink-2:#AEAEB3; --ink-3:#98989D; --line:#424245; --hair:#262628; --pop-bg:#1C1C1E;
  --link:#2997FF; --accent:#0071E3; --accent-hover:#0077ED; --on-accent:#FFFFFF; --ring:#2997FF;
  --warn:#FF9F0A;
  --nav-bg:rgba(22,22,23,.94);
  --scrim:rgba(0,0,0,.55);
  --tile-dark:#1C1C1E;
  --tile-answer:#2C2C2E;
  --band:#0B0B0C; --band-tile:#1C1C1E;
  --art-hi:#2C2C2E; --art-lo:#151517; --art-k1:17%; --art-k2:8%; --shot-k:22%;
  --chip-hi:#2C2C2E; --chip-k:14%; --chip-ink:#FFFFFF; --chip-ink-k:50%;
  --e1:#30D158; --e2:#40C8E0; --e3:#2997FF; --e4:#FFD60A; --e5:#FF9F0A; --e6:#98989D;
  --b-proven:#30D158; --b-early:#2997FF; --b-animal:#FF9F0A; --b-claimed:#98989D;
  --aa-np:#B4B6BA; --aa-ar:#BB9CDF; --aa-pos:#7EAFEE; --aa-neg:#F1968F; --aa-pol:#8DD39B; --aa-cu:#D08F62; --aa-cap:#48484A; --bead-ink:#111113;
  --bar:#636366;
  color-scheme:dark}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{font-size:calc(100% * var(--dyn,1));scroll-padding-top:calc(var(--gnav-h) + 40px);-webkit-text-size-adjust:100%}
/* Text size (the control in the phone menu and the footer, site.js): every size on the site is in rem, so the whole page follows the root. --dyn is the phone's own text size (the head script of the layout). */
html[data-text="l"]{font-size:calc(112.5% * var(--dyn,1))}
html[data-text="xl"]{font-size:calc(125% * var(--dyn,1))}
html.menu-open,html.search-open{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-text);font-size:1.0625rem;line-height:1.47;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gut)}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a,button,summary,select,label[for]{cursor:pointer}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
/* a plain link gets a softly rounded focus ring; :where() keeps this at the lowest specificity, so a tile, a pill or a button keeps its own shape while it has focus */
:where(a,summary):focus-visible{border-radius:6px}
h1,h2,h3{font-family:var(--f-display);color:var(--ink);margin:0;text-wrap:balance}
p{margin:0}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:16px;top:-60px;z-index:100;padding:10px 16px;border-radius:980px;background:var(--ink);color:var(--bg)}
.skip:focus{top:12px;text-decoration:none}
.icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* two-tone headline: bold statement, then a gray continuation. On a desktop the gray half follows on the same line (Apple's "The latest. Take a
   look at what's new."); on a phone it becomes a plain sub-line in the text face (see the phone block), so the two never run together. */
.tt{font-family:var(--f-display);font-size:clamp(1.75rem,3.4vw,2.5rem);font-weight:600;line-height:1.1;letter-spacing:var(--tr-l);max-width:44ch}
.tt > span:not(.nowrap){color:var(--ink-3)}
.tt a{color:inherit;padding-block:6px}
.tt a:hover{text-decoration:none;opacity:.75}
/* A page-level headline, one step above the section heads: "Browse by goal." and "All peptides." on the home page */
.tt-page{font-size:clamp(2.5rem,5.2vw,4rem);font-weight:600;line-height:1.05;letter-spacing:var(--tr-xl);max-width:none}
/* its gray half is a quiet line under the statement at every width (a desktop used to run the two together and break them mid-phrase): the bold half says what the section is, the line says what is in it */
.tt-page > span:not(.nowrap){display:block;margin-top:10px;font-family:var(--f-text);font-size:clamp(1.1875rem,2vw,1.5rem);font-weight:400;letter-spacing:-.011em;line-height:1.35;color:var(--ink-2)}

/* ---------- buttons & links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 22px;border:0;border-radius:980px;font-family:var(--f-text);font-size:1.0625rem;font-weight:500;letter-spacing:-.011em;white-space:nowrap;text-decoration:none;transition:background-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-outline{color:var(--link);box-shadow:inset 0 0 0 1px var(--link);background:transparent}
@media (hover:hover){.btn-outline:hover{background:var(--link);color:var(--bg)}}
.linkbtn{display:inline;min-height:0;margin:0;padding:0;border:0;background:none;color:var(--link);font:inherit;text-align:inherit}
@media (hover:hover){.linkbtn:hover{text-decoration:underline;text-underline-offset:3px}}
.more{font-weight:500;color:var(--link);white-space:nowrap}
.more::after{content:"\203A";display:inline-block;margin-left:5px;font-size:1.15em;line-height:1;transition:transform .25s var(--ease)}
a:hover .more::after,a.more:hover::after{transform:translateX(3px)}

/* ---------- global nav ---------- */
.gnav{position:sticky;top:0;z-index:30;container:gnav / inline-size;background:var(--nav-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--hair);transition:background-color .3s var(--ease),border-color .3s var(--ease)}
/* Home: the nav starts dark over the black hero, so bar and stage read as one surface, and turns light once
   the hero has scrolled away (site.js sets [data-light]). Re-pointing the tokens re-themes everything inside it. */
.has-dark-hero .gnav:not([data-light]){--ink:#F5F5F7;--ink-2:#AEAEB3;--bg:#161617;--card:#2C2C2E;--card-2:#3A3A3C;--hair:rgba(255,255,255,.08);--line:rgba(255,255,255,.18);--nav-bg:rgba(22,22,23,.8);--warn:#FF9F0A}
.gnav-inner{display:flex;align-items:center;gap:12px;min-height:var(--gnav-h)}
.brand{display:inline-flex;align-items:center;gap:9px;min-width:0;min-height:44px;font-family:var(--f-display);font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.brand-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.brand:hover{text-decoration:none;opacity:.8}
.brand .icon{width:22px;height:22px;stroke-width:1.75}
.gnav-links{flex:1;display:flex;justify-content:center;gap:2px}
.gnav-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:var(--fs-xs);color:var(--ink);opacity:.72;transition:opacity .2s var(--ease)}
.gnav-links a:hover{opacity:1;text-decoration:none}
.gnav-links a[aria-current]{opacity:1;font-weight:600}
/* Tools: the mixing guide, the vial planner (and, in a private build, its two pages) in a drop-down under the bar (site.js opens it; without scripting its links are simply in the row). On a phone it is a group in the menu sheet. */
.gnav-tools{position:relative;display:flex;align-items:center}
.gnav-tools-btn{display:inline-flex;align-items:center;gap:3px;min-height:44px;padding:0 10px 0 14px;border:0;background:none;color:var(--ink);font:inherit;font-size:var(--fs-xs);opacity:.72;transition:opacity .2s var(--ease)}
.gnav-tools-btn:hover,.gnav-tools.is-open .gnav-tools-btn{opacity:1}
.gnav-tools-btn[aria-current]{opacity:1;font-weight:600}
.gnav-tools-btn .chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.gnav-tools.is-open .chev{transform:rotate(180deg)}
.gnav-label{display:none}
/* the drop-down is the bar's own surface (--bg and --ink are re-pointed together over the black hero, so the pair always reads) */
.gnav-flyout{position:absolute;top:calc(100% + 6px);left:50%;z-index:5;display:none;width:min(380px,calc(100vw - 32px));padding:8px;border-radius:var(--r);background:var(--bg);box-shadow:0 24px 60px -16px rgba(0,0,0,.4),0 0 0 1px var(--hair);translate:-50% 0}
.js .gnav-tools.is-open .gnav-flyout{display:grid}
.gnav-flyout a{display:grid;gap:2px;min-height:0;padding:12px 14px;border-radius:12px;font-size:inherit;opacity:1;color:var(--ink)}
.gnav-flyout a:hover{background:var(--card);text-decoration:none}
.fly-name{font-size:1.0625rem;font-weight:600;letter-spacing:-.011em}
.fly-sub{font-size:var(--fs-xs);line-height:1.35;color:var(--ink-2)}
@media (min-width:761px){.gnav-flyout a[aria-current] .fly-name::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-radius:50%;background:var(--link);vertical-align:middle}}
html:not(.js) .gnav-tools-btn{display:none}
html:not(.js) .gnav-flyout{position:static;display:flex;width:auto;padding:0;border-radius:0;background:none;box-shadow:none;translate:none}
html:not(.js) .gnav-flyout a{display:inline-flex;padding:0 14px;min-height:44px;align-items:center;font-size:var(--fs-xs);opacity:.72}
html:not(.js) .fly-sub{display:none}
.gnav-actions{display:flex;flex:none;align-items:center;gap:2px;margin-left:auto}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);transition:background-color .2s var(--ease)}
@media (hover:hover){.icon-btn:hover{background:var(--card)}}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.menu-btn{display:none}
.gnav-goals,.gnav-appearance{display:none}
/* Appearance: Auto / Light / Dark. Lives in the phone menu and the footer, not in the header bar. */
.appearance{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
html:not(.js) .appearance{display:none}
.appearance-label{font-size:var(--fs-xs);font-weight:600;color:var(--ink-2)}
.seg{display:inline-flex;gap:2px;padding:2px;border-radius:980px;background:var(--card-2)}
.seg button{min-width:64px;min-height:44px;padding:0 14px;border:0;border-radius:980px;background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-xs);font-weight:500;transition:background-color .2s var(--ease),color .2s var(--ease)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.appearance + .appearance{margin-top:12px}
/* the text-size choice shows each step as the letter it makes, a little larger each time */
.seg-text button{min-width:56px;padding:0 12px;font-weight:600}
.seg-text button:nth-child(1) span{font-size:1rem}
.seg-text button:nth-child(2) span{font-size:1.1875rem}
.seg-text button:nth-child(3) span{font-size:1.375rem}
.burger{position:relative;width:18px;height:12px}
.burger i{position:absolute;left:0;right:0;height:1.5px;border-radius:1px;background:currentColor;transition:transform .3s var(--ease),top .3s var(--ease)}
.burger i:first-child{top:2px}
.burger i:last-child{top:9px}
.menu-btn[aria-expanded="true"] .burger i:first-child{top:5.5px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .burger i:last-child{top:5.5px;transform:rotate(-45deg)}
@media (max-width:760px){
  .js .menu-btn{display:grid}
  .js .gnav-links{display:none}
  html:not(.js) .gnav-inner{flex-wrap:wrap}
  html:not(.js) .gnav-links{order:3;flex-basis:100%;justify-content:flex-start;overflow-x:auto}
}
/* The bar is the phone's (a menu button in place of the links) up to 760px at the default text size, and a larger text needs a wider screen for the same bar. Every size on the site is in rem, so the page grows
   with the text size of the Reading settings (html[data-text], above; a phone's own text size too), and a media query does not: at the largest size the links and Tools needed more room than the bar had from 761px
   to 787px (902px in the private preview, whose bar holds a chip as well), so their words went onto three lines and the bar was 78px high, where everything that sticks under it (the catalog's filter bar, the
   row of reading settings on the home page) is placed for 53px. A container query measures in the page's own rem, so the bar changes at 47.5rem: 760px at the default size, 855px at A+, 950px at A++. Less 15px:
   a screen counts the scrollbar of a desktop browser and the bar, which sits beside it, does not, so that at the default size the bar still changes at 760px. A browser without container queries keeps the 760px
   above. */
@container gnav (max-width:calc(47.5rem - 15px)){
  .js .menu-btn{display:grid}
  .js .gnav-links{display:none}
}
/* The open menu is a sheet of its own, and needs neither a width nor a text size: only the menu button opens it, and the button is shown only where the bar is the phone's (site.js closes the sheet when the screen
   grows past 760px). */
.gnav[data-open]{position:fixed;inset:0;height:100dvh;overflow-y:auto;background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border:0}
.gnav[data-open] .gnav-inner{flex-wrap:wrap;align-content:flex-start}
.gnav[data-open] .menu-btn{display:grid;background:none}
.gnav[data-open] .gnav-links{order:3;flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:16px 0 8px}
.gnav[data-open] .gnav-links a{min-height:52px;padding:0;font-family:var(--f-display);font-size:1.75rem;font-weight:600;letter-spacing:var(--tr-m);opacity:1;animation:menu-in .45s var(--ease) both}
/* Every item stays at full strength (dimmed text reads as disabled on a dark sheet); the page you are on is marked by a heavier weight and a dot. */
.gnav[data-open] .gnav-links a[aria-current]{font-weight:700}
.gnav[data-open] .gnav-links a[aria-current]::after{content:"";flex:none;width:6px;height:6px;margin-left:10px;border-radius:50%;background:var(--link)}
.gnav[data-open] .gnav-links a:nth-child(2){animation-delay:.04s}
.gnav[data-open] .gnav-links a:nth-child(3){animation-delay:.08s}
.gnav[data-open] .gnav-links a:nth-child(4){animation-delay:.12s}
.gnav[data-open] .gnav-links a:nth-child(5){animation-delay:.16s}
/* Tools: its links in 24px type under their own label, between the pages and the goals */
.gnav[data-open] .gnav-tools{display:grid;width:100%;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.gnav[data-open] .gnav-tools-btn{display:none}
.gnav[data-open] .gnav-label{display:block;margin-bottom:4px;font-size:var(--fs-xs);font-weight:600;color:var(--ink-2)}
.gnav[data-open] .gnav-flyout{position:static;display:grid;width:auto;padding:0;border-radius:0;background:none;box-shadow:none;translate:none}
.gnav[data-open] .gnav-flyout a{display:flex;align-items:center;min-height:52px;padding:0;border-radius:0;font-family:var(--f-display);font-size:1.5rem;font-weight:600;letter-spacing:var(--tr-m);animation-delay:.16s}
.gnav[data-open] .gnav-flyout a:hover{background:none}
.gnav[data-open] .fly-name{font-size:inherit;font-weight:inherit;letter-spacing:inherit}
.gnav[data-open] .fly-sub{display:none}
.gnav[data-open] .gnav-goals{display:grid;gap:0;width:100%;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.gnav[data-open] .gnav-goals p{margin-bottom:4px;font-size:var(--fs-xs);font-weight:600;color:var(--ink-2)}
.gnav[data-open] .gnav-goals a{min-height:44px;font-size:1.1875rem;font-weight:500;letter-spacing:var(--tr-s);animation-delay:.2s}
.gnav[data-open] .gnav-appearance{order:4;display:block;flex-basis:100%;margin-top:8px;padding:16px 0 48px;border-top:1px solid var(--line)}
@keyframes menu-in{from{opacity:0;translate:0 -10px}to{opacity:1;translate:0 0}}
@keyframes scrim-in{from{opacity:0}to{opacity:1}}

/* ---------- home hero (always dark, like a Tesla landing page) ---------- */
/* The hero is exactly one screen tall (svh: the screen as it is with a phone's browser bars showing), so the black stage fills the first view on
   every device and the next section starts cleanly below it: nothing is sliced at the fold. (A private build's reminder is a chip in the nav, so the bar above the hero is the same height in both.) */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;background:#000;color:#F5F5F7}
/* The hero starts at the very top of the page, under the nav (as on apple.com), so a dark translucent nav is over black, never over the white page: the nav is pulled up by its own height, which takes whatever follows it
   in the flow under it. That was the row of reading settings (it follows the nav on every page), not the hero: the row went up under the nav, where nobody could see or press it, and the hero was pushed down by its height.
   So here the row is out of the flow, laid over the top of the hero right under the nav, and the hero's padding leaves room for it (45px: the row's 44px button and its hairline), so the title is where it was. */
.has-dark-hero .gnav{margin-bottom:calc(-1 * var(--gnav-h) - 1px)}
.has-dark-hero .hero{padding-top:calc(var(--gnav-h) + 1px + 45px)}
.has-dark-hero .reading-toolbar{position:absolute;top:calc(var(--gnav-h) + 1px);left:0;right:0;z-index:1}
/* The type block sits at the top, in Apple's order (title, lede, buttons, then the picture, which is the hero's next child and takes the rest of the screen). */
.hero-inner{position:relative;z-index:1;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:16px;text-align:center;padding-block:clamp(40px,8vh,96px) 0;padding-block:clamp(40px,8svh,96px) 0}
.hero-title{font-family:var(--f-display);font-size:clamp(3.25rem,8vw,6rem);font-weight:700;line-height:1.04;letter-spacing:var(--tr-xl);color:#F5F5F7}
.hero-title > span:not(.nowrap){color:#86868B}
/* the lede is one short sentence: on a phone two even lines, from 761px one line (it is about 60 characters, so it holds in a window as narrow as that and balances itself where it cannot) */
.hero-lede{max-width:36ch;font-size:clamp(1.1875rem,2.1vw,1.5rem);line-height:1.33;letter-spacing:var(--tr-m);color:#A1A1A6;text-wrap:balance}
@media (min-width:761px){.hero-lede{max-width:none}}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:10px}
/* The hero's picture is a render of an abstract chain: matte spheres in a muted spectrum on metal rods, over a glossy black floor. It is AI-generated: decoration, not a real molecule (so alt="" and
   nothing for a screen reader). It is the hero's last child, right under the buttons, in a box that takes whatever the screen leaves under them and centres the picture in it.
   On a computer the wide render is as wide as the screen up to 1400px (and no wider than 160% of the screen's height, so that a short laptop screen still holds the whole chain), pulled up over its
   own empty top so that the chain starts just under the buttons, and the hero ends where the picture does. On a phone, and on any upright screen, the tall render is used (src/index.njk): a little
   wider than the screen (115%, no more than 760px) so that the spheres are big, centred, starting right under the buttons; its lower part goes below the fold, as a product shot does on Apple's
   pages, and the hero grows with it (nothing is clipped: the hero's own overflow only cuts the black at the sides). The renders are drawn on black: their top, left and right edges are pure black,
   and the floor's reflection runs into the bottom edge (a little over 2% grey there), so the stylesheet fades the bottom (and, to be sure of the sides) into the hero's own #000, and no rectangle
   or line is seen at any width. */
.hero{--hw:min(100vw,1400px,160svh)}
.hero-art{position:relative;z-index:0;flex:1 0 auto;display:flex;align-items:center;justify-content:center;width:100%;margin-top:calc(var(--hw) * -.06);pointer-events:none;user-select:none}
.hero-art picture{position:relative;display:block;flex:none;width:var(--hw);max-width:100%}
.hero-art img{display:block;width:100%;height:auto;aspect-ratio:1916 / 821}
.hero-art picture::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 78%,#000),linear-gradient(to right,#000,rgba(0,0,0,0) 2.5%,rgba(0,0,0,0) 97.5%,#000)}
@media (max-width:760px),(max-aspect-ratio:1/1){
  .hero{--hw:min(115vw,760px)}
  .hero-art{flex:none;align-items:flex-start;margin-top:12px}
  .hero-art picture{max-width:none}
  .hero-art img{aspect-ratio:1122 / 1402}
}
.hero .btn-outline{color:#2997FF;box-shadow:inset 0 0 0 1px #2997FF}
@media (hover:hover){.hero .btn-outline:hover{background:#2997FF;color:#000}}
@media (max-width:620px){
  /* the buttons are as wide as their words and sit together, centred on one row, as on Apple's phone pages: the picture is the big thing, not two slabs (they wrap, still centred, only on a very narrow screen) */
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:none;padding:0 18px}
}

/* ---------- catalog filter bar (sticky, Apple local-nav style) ---------- */
.catalog-bar{position:sticky;top:var(--gnav-h);z-index:20;background:var(--bg);border-bottom:1px solid transparent}
/* Frosted glass only once the bar is really stuck under the nav (site.js adds .is-stuck). Until then it is just
   controls on the page, so the search field and pills stand clear of it in both themes. */
@media (min-width:761px){
  .catalog-bar.is-stuck{background:var(--nav-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom-color:var(--hair)}
}
.bar-sentinel{height:1px;margin-bottom:-1px;pointer-events:none}
.bar-inner{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);grid-template-areas:"search count" "pills pills";align-items:center;gap:10px 20px;padding-block:12px}
.search{grid-area:search;position:relative;display:block;min-width:0}
.search > svg{position:absolute;left:14px;top:50%;width:17px;height:17px;transform:translateY(-50%);fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round;pointer-events:none}
.search input{width:100%;height:44px;padding:0 44px 0 42px;border:0;border-radius:var(--r-sm);background:var(--field);color:var(--ink);font:inherit;font-size:1.0625rem;letter-spacing:-.011em;transition:box-shadow .2s var(--ease)}
.search input::placeholder{color:var(--ink-2)}
.search input::-webkit-search-cancel-button,.search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.search input:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 45%,transparent)}
.search-clear{position:absolute;right:0;top:0;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-2)}
.search-clear[hidden]{display:none}
.search-clear svg{width:20px;height:20px}
.count{grid-area:count;display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;min-width:0;font-size:var(--fs-sm);color:var(--ink-2);font-variant-numeric:tabular-nums}
.count .linkbtn{display:inline-flex;align-items:center;min-height:44px}
.count [hidden]{display:none}
/* The filter chips are ONE control, as Apple's lineup filter is: a single gray track with the chosen goal inset in black. The track holds as many chips as fit and scrolls inside itself when they do
   not (a phone, a narrow window): its ends fade, and a chevron at the right end says there is more (site.js sets .has-more and .has-less on the wrap). */
.pills-wrap{grid-area:pills;position:relative;justify-self:start;width:max-content;max-width:100%;min-width:0;border-radius:980px;background:var(--field)}
.pills{--fl:0px;--fr:0px;position:relative;display:flex;flex-wrap:nowrap;gap:0;margin:0;padding:4px;overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent calc(var(--fl) - 24px),#000 var(--fl),#000 calc(100% - var(--fr)),transparent);
  mask-image:linear-gradient(90deg,transparent 0,transparent calc(var(--fl) - 24px),#000 var(--fl),#000 calc(100% - var(--fr)),transparent)}
.pills::-webkit-scrollbar{display:none}
/* a chevron at each end that has more: a bare chevron over the track's fade, as Apple's lineup control has it (not a disc, which on a dark track was a black hole punched through it) */
.pills-wrap.has-less .pills{--fl:56px}
.pills-wrap.has-more .pills{--fr:60px}
.pills-more,.pills-less{display:none}
.pills-wrap.has-more .pills-more,.pills-wrap.has-less .pills-less{display:grid}
.pills-more,.pills-less{position:absolute;top:0;bottom:0;width:64px;padding:0;border:0;color:var(--ink)}
.pills-more{right:0;place-items:center end;padding-right:6px;border-radius:0 980px 980px 0;background:linear-gradient(90deg,transparent,var(--field) 50%)}
.pills-less{left:0;place-items:center start;padding-left:6px;border-radius:980px 0 0 980px;background:linear-gradient(270deg,transparent,var(--field) 50%)}
.pills-more svg,.pills-less svg{width:32px;height:32px;padding:9px 11px;border-radius:50%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:background-color .2s var(--ease)}
@media (hover:hover){.pills-more:hover svg,.pills-less:hover svg{background:var(--card-2)}}
/* a chip is 40px inside a 48px track, and its tap area reaches the track's edges (the ::before), so it is 48px to the finger */
.pill{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:40px;padding:0 18px;border:0;border-radius:980px;background:transparent;color:var(--ink);font:inherit;font-size:1rem;font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:background-color .2s var(--ease),color .2s var(--ease)}
.pill::before{content:"";position:absolute;inset:-4px 0}
@media (hover:hover){.pill:hover{background:color-mix(in srgb,var(--ink) 9%,transparent)}.pill[aria-pressed="true"]:hover{background:var(--ink)}}
.pill[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.pill[hidden]{display:none}
@media (max-width:760px){
  .bar-inner{grid-template-columns:minmax(0,1fr);grid-template-areas:"search" "pills" "count"}
  /* the count and the key to the labels share one line: "5 of 37 peptides ........ What the labels mean" (they wrap only on a very narrow screen) */
  .count{justify-content:space-between}
  /* The A to Z row of the glossary has only eleven short letters, and is not a track: it is a row of small round letters (see the glossary's own block). */
}

/* ---------- catalog sections and cards ---------- */
.catalog{padding-bottom:40px}
/* An anchor jump lands the section's heading 40px below the stuck bar: the margin cancels the section's own top padding. */
.cat-section{--sec-pad:clamp(56px,8vw,96px);padding-top:var(--sec-pad);scroll-margin-top:calc(var(--bar-h) - var(--sec-pad))}
.cat-section[hidden]{display:none}
/* the first section sits 40px under the filter bar it is controlled by; the big gap is only between sections */
.cat-section:first-of-type{--sec-pad:40px}
.is-filtered .section-head .tt > span:not(.nowrap){display:none}
.is-filtered .cat-section{--sec-pad:40px}
.section-head{margin-bottom:32px}
.section-head .tt{max-width:none}
/* the heading and its short tail ("Weight & metabolism. Curb appetite, burn fat.") share ONE line on a desktop, as Apple's "The latest. Take a look at what's new." does: a step smaller than the page's section heads */
@media (min-width:1000px){.section-head .tt{font-size:clamp(1.75rem,2.4vw,2.125rem)}}
/* a search names itself in the same voice as a section: "Results for "sleep"." */
.results-line{margin:0 0 28px;padding-top:40px}
.results-line[hidden],.grid[hidden]{display:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px}
.card{display:flex;flex-direction:column;min-width:0;padding:30px 28px 26px;border-radius:var(--r-lg);background:var(--card);color:var(--ink);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.card:hover{text-decoration:none;transform:scale(1.018);box-shadow:0 24px 48px -28px rgba(0,0,0,.35)}
.card[hidden]{display:none}
.card-eyebrow{display:flex;flex-wrap:wrap;align-items:center;font-size:var(--fs-xs);font-weight:600;letter-spacing:.01em;color:var(--ev)}
.card-ev{display:inline-flex;align-items:center;gap:7px}
.card-ev::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ev)}
.card-cat{display:none;color:var(--ink-2);font-weight:500}
/* a search names the goal before the strength of the evidence, on ONE line: "Brain & sleep · ● Approved abroad" (it wraps only if it must) */
.is-search .card-cat{display:inline}
.is-search .card-cat::after{content:"\00B7";margin-inline:8px;color:var(--ink-3)}
.card-title{margin-top:4px;font-size:1.75rem;font-weight:600;line-height:1.08;letter-spacing:var(--tr-l);overflow-wrap:anywhere}
.card-sub{margin-top:6px;font-size:1rem;line-height:1.4;color:var(--ink-2)}
@media (min-width:761px){.card-sub{min-height:calc(2 * 1.4em)}} /* every card reserves two lines, so the molecules line up across a row */
/* Molecule drawings (lib/chain-svg.js). Each is cropped to what it draws and carries its size (--w, --h, drawing units), so the panel
   around it (.shot-art, .card-art) sizes it. A simplified chain has no sequence to colour, so its beads are the peptide's finish
   (--cat, set by the panel) in five steps of lightness: the paints #pg-<finish>-0 to -4, below. */
/* The paint of a sphere (the .pg gradients: layout.njk defines them, and finishPaints in lib/card-art.js the finishes'): --c is the sphere's own colour, and the five stops are that colour
   lightened toward the light and deepened into a shade of the SAME hue (relative colour: its lightness and chroma move, its hue never does), so a colour stays itself in its shadow
   instead of turning to grey. A browser without relative colour paints the plain colour; the layers over it (the sheen, the shade at the edge) still make it a sphere. */
.pg stop:nth-child(1){stop-color:var(--c)}
.pg stop:nth-child(2){stop-color:var(--c)}
.pg stop:nth-child(3){stop-color:var(--c)}
.pg stop:nth-child(4){stop-color:var(--c)}
.pg stop:nth-child(5){stop-color:var(--c)}
@supports (color:oklch(from red l c h)){
  .pg stop:nth-child(1){stop-color:oklch(from var(--c) calc(l + .14) calc(c * .5) h)}
  .pg stop:nth-child(2){stop-color:oklch(from var(--c) calc(l + .06) calc(c * .85) h)}
  .pg stop:nth-child(4){stop-color:oklch(from var(--c) calc(l - .1) calc(c * 1.08) h)}
  .pg stop:nth-child(5){stop-color:oklch(from var(--c) calc(l - .21) calc(c * 1.04) h)}
}
.mol{display:block;overflow:visible}
/* The picture on a card: the peptide's molecule as an object with a silhouette of its own (lib/card-art.js), in its own finish (--fin and its steps --f0 to
   --f4, set on the card from lib/finish.js) on a soft studio wash of that finish. The drawing is cropped to what it draws and fitted to the panel, so a
   tripeptide's three big spheres and a 44-residue chain's small ones both fill it. Its spheres are tinted by depth with the finish's five steps (the .pg paints, above). */
.card-art{display:flex;align-items:center;justify-content:center;height:176px;margin:20px 0 18px;padding:14px;border-radius:18px;
  background:radial-gradient(90% 100% at 50% 38%,color-mix(in srgb,var(--fin,#8E8E93) var(--art-k1),var(--art-hi)),color-mix(in srgb,var(--fin,#8E8E93) var(--art-k2),var(--art-lo)));
  --cat:var(--fin,#8E8E93);--aa-cu:var(--cat);--bond:color-mix(in oklab,var(--cat) 44%,var(--art-hi))}
.card-art svg{flex:none;width:100%;height:100%;transition:transform .6s var(--ease)}
.mol .b{fill:none;stroke:var(--bond,var(--line));stroke-width:var(--bw);stroke-linecap:round} /* a bond in a card's picture or a simplified chain's product shot (lib/card-art.js) */
@media (hover:hover){.card:hover .card-art svg{transform:scale(1.05)}}
.card-points{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.card-points li{display:flex;align-items:flex-start;gap:9px;font-size:1rem;line-height:1.35;color:var(--ink)}
.card-points svg{flex:none;width:16px;height:16px;margin-top:1px;fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card-foot{margin-top:auto;padding-top:22px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px;font-size:var(--fs-sm)}
.card-code{font-size:var(--fs-2xs);color:var(--ink-2)}
.empty{padding:72px 16px 0;text-align:center;font-size:1.1875rem;color:var(--ink-2)}
.empty[hidden]{display:none}

/* promo tiles (Apple homepage style: one dark, one light) */
.promo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(72px,10vw,120px)}
.promo-tile{display:flex;flex-direction:column;align-items:center;gap:12px;min-height:460px;padding:56px 32px 0;overflow:hidden;border-radius:var(--r-lg);text-align:center;text-decoration:none;transition:transform .45s var(--ease)}
.promo-tile:hover{text-decoration:none;transform:scale(1.01)}
.promo-dark{background:var(--tile-dark);color:#F5F5F7}
.promo-dark .promo-title{color:#F5F5F7}
.promo-dark .promo-title > span:not(.nowrap),.promo-dark .promo-eyebrow{color:#A1A1A6}
.promo-dark .more{color:#2997FF}
.promo-light{background:var(--card);color:var(--ink)}
.promo-eyebrow{font-size:1.0625rem;font-weight:600;color:var(--ink-2)}
.promo-title{font-size:clamp(1.75rem,3.4vw,2.5rem);font-weight:700;line-height:1.08;letter-spacing:var(--tr-l);max-width:16ch}
.promo-title > span:not(.nowrap){color:var(--ink-2)}
.promo-tile .more{font-size:1.0625rem}
/* the art is drawn with its own paint in the template (finishes for the blend discs, the page's own colors for the shield) */
.promo-art{margin-top:auto;width:min(84%,300px);height:auto;padding-bottom:32px;overflow:visible}
/* Three tiles in a row on a wide screen (their titles a step smaller, so a long word like "Reconstitution." fits a third of the row); on a tablet two side by side and the
   third, as wide as both, a banner with its words beside its art; on a phone a column, the tiles a little shorter. */
@media (min-width:1100px){.promo-title{font-size:clamp(1.625rem,2.4vw,1.875rem)}}
@media (min-width:761px) and (max-width:1099px){
  .promo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promo-wide{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"eyebrow art" "title art" "more art";align-content:center;justify-items:start;gap:12px 32px;min-height:340px;padding:48px 48px 0;text-align:left}
  .promo-wide .promo-eyebrow{grid-area:eyebrow;align-self:end}
  .promo-wide .promo-title{grid-area:title;max-width:14ch}
  .promo-wide .more{grid-area:more;align-self:start;padding-bottom:48px}
  .promo-wide .promo-art{grid-area:art;align-self:end;justify-self:center;margin-top:0;padding-bottom:0;width:min(100%,300px)}
}
@media (max-width:760px){.promo{grid-template-columns:minmax(0,1fr)}.promo-tile{min-height:400px}}

/* ---------- page hero (category, blends, glossary, safety, 404) ---------- */
/* A utility page opens the way Apple's do: one short title, one gray sub-line, then the content itself, all within the first screen. */
.page-hero{display:grid;justify-items:center;gap:12px;padding-block:clamp(12px,4vw,56px) clamp(28px,4vw,48px);text-align:center}
.page-title{font-size:clamp(2.25rem,6vw,4rem);font-weight:700;line-height:1.05;letter-spacing:var(--tr-xl);max-width:16ch;overflow-wrap:anywhere;text-wrap:balance}
.page-title > span:not(.nowrap){display:block;color:var(--ink-3)} /* (the 404 page) the gray half starts its own line */
.page-sub{max-width:46ch;font-size:clamp(1.1875rem,2vw,1.5rem);line-height:1.33;letter-spacing:var(--tr-m);color:var(--ink-2);text-wrap:pretty}
.page-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 12px;font-size:var(--fs-sm);color:var(--ink-2)}
.page-meta b{font-weight:600;color:var(--ink)}
.page-meta a{display:inline-flex;align-items:center;min-height:44px}
.page-end{padding-bottom:clamp(72px,10vw,120px)}

/* ---------- peptide page ---------- */
.localnav{position:sticky;top:var(--gnav-h);z-index:20;container:localnav / inline-size;background:var(--nav-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--hair)}
.localnav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--lnav-h)}
.localnav-title{display:block;min-width:0;min-height:44px;line-height:44px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-display);font-size:1.3125rem;font-weight:600;letter-spacing:var(--tr-s);color:var(--ink)}
.localnav-title:hover{text-decoration:none}
.localnav-toggle{display:none}
.localnav-links{display:flex;flex:none}
/* a tool page's bar (the mixing guide, the vial planner, sprays and serums): its name, and one blue pill that goes straight to the tool. The pill is 36px; its tap area reaches 44. */
.localnav-cta{position:relative;flex:0 1 auto;min-width:0;min-height:36px;padding:0 16px;font-size:var(--fs-sm)}
.localnav-cta::after{content:"";position:absolute;inset:-4px -2px}
.localnav-cta > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.localnav-tool .localnav-title{flex:1 1 auto}
.localnav-links a{display:inline-flex;align-items:center;min-height:var(--lnav-h);padding:0 10px;font-size:var(--fs-sm);color:var(--ink-2);transition:color .2s var(--ease),box-shadow .2s var(--ease)}
.localnav-links a:hover{color:var(--ink);text-decoration:none}
@media (min-width:761px) and (max-width:860px){.localnav-links a{padding:0 7px}} /* the longest names ("N-Acetyl Semax Amidate") keep their room beside six links */
/* the section in view: darker text and a rule flush with the bar's bottom edge (as on Apple's local nav), so it reads at a glance without changing the link's width */
.localnav-links a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
/* up to 760px, the width at which the page's own menu becomes a button too: six links and the page's name do not fit in a row any narrower (at 601px the name was left 41px, "S...") */
@media (max-width:760px){
  .localnav-title{font-size:1.0625rem}
  /* at the top of a page its heading is right under the bar: the bar says the page's name only once the heading has gone up under it (site.js sets .is-past-hero), so it is never said twice in a few lines */
  .js .localnav-title{transition:opacity .2s var(--ease),visibility .2s}
  .js .localnav:not(.is-past-hero) .localnav-title{opacity:0;visibility:hidden}
  /* an open dropdown dims the page under it, so its edge is clear and a tap outside it (which closes it) is expected */
  .js .localnav[data-open]::before{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;height:100dvh;background:var(--scrim);animation:scrim-in .2s var(--ease)}
  html:not(.js) .localnav-inner{flex-wrap:wrap;column-gap:16px}
  /* with scripting, the sections live in a dropdown opened by a button that names the section you are in ("On this page" until you are in one) */
  .js .localnav-toggle{display:inline-flex;flex:none;align-items:center;gap:2px;min-height:44px;margin-right:-8px;padding:0 8px 0 12px;border:0;background:none;color:var(--ink);font:inherit;font-size:1rem;font-weight:500}
  .localnav-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
  .localnav[data-open] .localnav-toggle svg{transform:rotate(180deg)}
  .js .localnav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;padding:2px clamp(20px,5vw,48px) 10px;background:var(--bg);border-bottom:1px solid var(--hair);box-shadow:0 24px 32px -24px rgba(0,0,0,.35)}
  .js .localnav[data-open] .localnav-links{display:flex}
  .js .localnav-links a{min-height:52px;padding:0;border-top:1px solid var(--hair);font-size:1.1875rem;color:var(--ink)}
  .js .localnav-links a:first-child{border-top:0}
  .js .localnav-links a[aria-current]{box-shadow:none;font-weight:600}
  /* the section you are in is marked the way the page's menu marks the page you are on: a heavier weight and a dot */
  .js .localnav-links a[aria-current]::after{content:"";flex:none;width:6px;height:6px;margin-left:10px;border-radius:50%;background:var(--link)}
}
/* The same for this bar as for the global bar (above): a button for the sections in place of the six links, at 47.5rem (the width at which the page's own menu becomes a button) and not at 760px, because the text is
   larger than the pixels say. The six links are 725px wide at the default size and 876px at the largest, and above 760px they stayed in a row at every size, as far as 126px past the page at 768px, A++ (and no
   room was left for the name). The name stays in the bar here (up to 760px it is said only once the heading has gone up under it), and so does the dropdown: these are the rules of the block above. */
@container localnav (max-width:calc(47.5rem - 15px)){
  .js .localnav[data-open]::before{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;height:100dvh;background:var(--scrim);animation:scrim-in .2s var(--ease)}
  .js .localnav-toggle{display:inline-flex;flex:none;align-items:center;gap:2px;min-height:44px;margin-right:-8px;padding:0 8px 0 12px;border:0;background:none;color:var(--ink);font:inherit;font-size:1rem;font-weight:500}
  .localnav-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
  .localnav[data-open] .localnav-toggle svg{transform:rotate(180deg)}
  .js .localnav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;padding:2px clamp(20px,5vw,48px) 10px;background:var(--bg);border-bottom:1px solid var(--hair);box-shadow:0 24px 32px -24px rgba(0,0,0,.35)}
  .js .localnav[data-open] .localnav-links{display:flex}
  .js .localnav-links a{min-height:52px;padding:0;border-top:1px solid var(--hair);font-size:1.1875rem;color:var(--ink)}
  .js .localnav-links a:first-child{border-top:0}
  .js .localnav-links a[aria-current]{box-shadow:none;font-weight:600}
  .js .localnav-links a[aria-current]::after{content:"";flex:none;width:6px;height:6px;margin-left:10px;border-radius:50%;background:var(--link)}
}
/* and the links are a little closer for the 6.25rem above it, as they are from 761px to 860px (53.75rem is 860px) */
@container localnav (min-width:calc(47.5rem - 15px)) and (max-width:calc(53.75rem - 15px)){.localnav-links a{padding:0 7px}}
.p-hero{display:grid;justify-items:center;gap:10px;padding-block:clamp(8px,3vw,40px) 28px;text-align:center}
.p-title{max-width:13ch;font-size:clamp(3rem,9.5vw,7rem);font-weight:700;line-height:1.02;letter-spacing:var(--tr-xl);overflow-wrap:anywhere}
.p-title.is-long{font-size:clamp(2.25rem,7.4vw,5.25rem)} /* a name of 15 or more characters ("N-Acetyl Semax Amidate") is set smaller, so it takes two lines rather than three */
@media (max-width:600px){.p-hero{padding-top:20px}}
/* a phone's first screen holds the trail, the name, one line about it and the top of the molecule: the alias (also in Specs, "Also known as") is kept for a screen reader but not shown there */
@media (max-width:734px){.p-aka{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
/* On a wide screen the header and the molecule sit side by side, so the whole molecule is on the first screen (as Apple's product pages lead with the product). */
@media (min-width:1024px){
  .p-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:48px;padding-block:clamp(16px,3vw,40px) 0}
  .p-hero{justify-items:start;padding-block:0;text-align:left}
  .p-title{font-size:clamp(2.75rem,4.6vw,4.25rem);max-width:none}
  .p-title.is-long{font-size:clamp(2.25rem,3.6vw,3.25rem)}
  .p-cta{justify-content:flex-start}
  .badges{justify-content:flex-start}
}
.p-tagline{max-width:28ch;font-family:var(--f-display);font-size:clamp(1.375rem,3vw,2rem);font-weight:600;line-height:1.18;letter-spacing:var(--tr-l);color:var(--ink-2);text-wrap:balance}
.p-aka{font-size:1rem;color:var(--ink-2)}
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.badge{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 14px;border-radius:980px;background:var(--card);font-size:var(--fs-sm);font-weight:500;color:var(--ink)}
.badge.ev::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ev)}
.badge.warn{color:var(--warn)}
.p-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 24px;margin-top:8px}
.p-cta .more{display:inline-flex;align-items:center;min-height:44px}

/* The product shot: the molecule floating, as a product does on Apple's pages, over a soft halo of its own finish: no panel, no edge, so there is no empty band to leave over. It is
   scaled as far as the screen allows (the drawing is cropped to what it draws), so a long chain is scaled to fit and on a laptop the whole molecule is on the first screen. */
.shot{margin:0;padding:clamp(22px,3.4vw,34px) clamp(12px,4vw,24px) clamp(16px,2.2vw,22px);background:radial-gradient(ellipse 47% 49% at 50% 45%,color-mix(in srgb,var(--fin,#8E8E93) var(--shot-k),transparent) 0%,transparent 100%);display:grid;justify-items:center;gap:14px;--cat:var(--fin,#8E8E93);--bond:color-mix(in srgb,var(--cat) 26%,var(--line));--bond-deep:color-mix(in srgb,var(--cat) 38%,var(--line))}
.shot-art{width:100%;display:grid;place-items:center}
.shot-art svg{width:min(100%,calc(var(--w) * var(--z,2.8) * 1px));height:auto;max-height:clamp(240px,44vh,400px)}
/* On a phone a long chain is shown folded into a nearly square block, so its beads and letters are larger: the page carries both folds (lib/chain-svg.js, { phone: true }) and shows one by width. */
.shot-art .mol-compact{display:none}
@media (max-width:600px){.shot-art .mol-wide{display:none}.shot-art .mol-compact{display:block;max-height:none}}
/* beside the header (a laptop) the panel is nearly as tall as it is wide, so a long chain is shown folded too: the molecule is as large as the panel allows and no band is left over */
@media (min-width:1024px){.shot-art .mol-wide{display:none}.shot-art .mol-compact{display:block;width:min(100%,calc(var(--w) * 3.5px));max-height:clamp(260px,52vh,460px)}}
.shot figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 18px;font-size:var(--fs-sm);color:var(--ink-2)}
.shot .seq{font-family:var(--f-mono);letter-spacing:0;overflow-wrap:anywhere}
/* a plain sentence about the drawing (never the sequence, which is set in mono) */
.shot-note{font-family:var(--f-text);font-size:var(--fs-sm);letter-spacing:-.011em;text-align:center;text-wrap:balance}
.aa-key summary{list-style:none;color:var(--link);min-height:44px;display:inline-flex;align-items:center}
.aa-key summary::-webkit-details-marker{display:none}
.aa-key summary::after{content:"\203A";margin-left:5px;display:inline-block;transition:transform .25s var(--ease)}
.aa-key[open] summary::after{transform:rotate(90deg)}
.aa-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:6px}
.aa-legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sw{width:12px;height:12px;border-radius:50%;display:inline-block;flex:none;background:var(--c);background:radial-gradient(circle at 34% 30%,color-mix(in oklab,var(--c) 58%,#fff),var(--c) 52%,color-mix(in oklab,var(--c) 78%,#1a2250))} /* a key's dot is a tiny sphere of the colour it names, as the beads are */
.aa-legend .dash{width:12px;height:12px;border-radius:50%;border:1.5px dashed var(--ink-2)}

/* An anchor jump lands the heading about 24px below the bars: the negative margin cancels the section's top padding. */
.section{--sec-pad:clamp(72px,10vw,128px);padding-top:var(--sec-pad);scroll-margin-top:calc(32px - var(--sec-pad))}
.section > .tt{margin-bottom:clamp(28px,4vw,44px)}
/* a section heading with a line under it (the Benefits heading and its "all from the same kind of evidence" note) */
.sec-head{margin-bottom:clamp(28px,4vw,44px)}
.sec-head > .tt{margin-bottom:0}
.basis-note{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:1.0625rem;font-weight:500;line-height:1.35;color:var(--b)}
.basis-note i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--b)}
/* The Overview opens with its headline, then one lead sentence (a lead paragraph, not a second headline: a step above the body text and a long way under the section's title), then the text beside a card of key facts. */
.statement{max-width:none;margin-bottom:24px;font-family:var(--f-display);font-size:clamp(1.1875rem,1.6vw,1.375rem);font-weight:600;line-height:1.35;letter-spacing:var(--tr-m);color:var(--ink);text-wrap:pretty}
.ov-main > .tt{margin-bottom:clamp(16px,2vw,24px)}
#overview > .tt{margin-bottom:clamp(16px,2vw,24px)} /* the same gap for What it is, whose heading is the section's own child (no .ov-main around it), where only .section > .tt, 28px to 44px, reached it */
.cols{display:grid;gap:1em;max-width:68ch}
.cols p{font-size:1.1875rem;line-height:1.55;letter-spacing:-.008em;color:var(--ink)}
/* the hint comes before the text it explains, with a sample of what a dotted word looks like; "Tap" on a touch screen, "Click" with a mouse. It is the only instruction for the jargon aids, so it is the page's own 16px and
   gray, at every width, and its sample is set like the real words (a tinted chip when one is touched) */
.hint{margin:0 0 16px;font-size:1rem;line-height:1.4;color:var(--ink-2)}
.term-sample{padding:0 3px;border-radius:4px;background:color-mix(in srgb,var(--link) 10%,transparent);text-decoration:underline dotted;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--link) 70%,transparent);text-underline-offset:4px;color:var(--ink)}
.v-mouse{display:none}
@media (hover:hover) and (pointer:fine){.v-touch{display:none}.v-mouse{display:inline}}
.glance{display:none}
@media (min-width:1024px){
  /* the heading, the lead sentence and the text are the left column; the card of key facts is the right one, from the heading's top line, and stays in view while the text is read */
  .ov-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;column-gap:72px;align-items:start}
  .glance{display:block;position:sticky;top:calc(var(--lnav-h) + 20px);padding:28px;border-radius:var(--r-lg);background:var(--card)}
}
.glance h3{margin-bottom:16px;font-size:1.3125rem;font-weight:700;line-height:1.2;letter-spacing:var(--tr-m)}
.glance dl{margin:0}
.glance dl > div{padding:14px 0;border-top:1px solid var(--line)}
.glance dl > div:first-child{padding-top:0;border-top:0}
.glance dt{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.glance dd{margin:2px 0 0;font-size:1.0625rem;line-height:1.45;color:var(--ink)}
.glance-ev::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--ev);transform:translateY(-1px)}
.nowrap{white-space:nowrap}

.bento{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.tile{grid-column:span 6;display:flex;flex-direction:column;gap:10px;padding:34px 32px;border-radius:var(--r-lg);background:var(--card)} /* as tall as its text; tiles in a row stretch to match */
/* one grid for every count: two columns for two and four tiles, three for three and six, and five are two over three (a row of three and an empty cell looked like a missing card) */
@media (min-width:900px){
  .bento.n-2 .tile,.bento.n-4 .tile,.bento.n-5 .tile:nth-child(-n+2){grid-column:span 3}
  .bento.n-3 .tile,.bento.n-6 .tile,.bento.n-5 .tile:nth-child(n+3){grid-column:span 2}
}
.tile-icon{flex:none;width:48px;height:48px;margin-bottom:6px;fill:none;stroke:var(--b);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* a line icon in the tile's evidence colour: large and bold enough to anchor a tile 340px wide (24-unit drawings: 1.8 units is 3.6px here, a third heavier than before, and the crossing of a ligament still reads) */
/* the label is a quiet caption (the dot carries the evidence colour), so it never competes with the tile's heading */
.tile-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);font-weight:500;color:var(--ink-2)}
.tile-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--b)}
.tile h3{font-size:clamp(1.4375rem,2.4vw,1.75rem);font-weight:700;line-height:1.12;letter-spacing:var(--tr-l);text-wrap:balance} /* balanced, so a long title breaks in the middle ("Tendon and / ligament healing"), not with one word left alone */
/* a benefit that leads with a number shows it big (Apple's feature tiles do the same), in the tile's evidence colour */
.tile-stat{font-family:var(--f-display);font-size:clamp(2.75rem,5vw,3.5rem);font-weight:700;line-height:1;letter-spacing:var(--tr-xl);color:var(--b);font-variant-numeric:tabular-nums}
.tile-stat small{font-family:var(--f-text);font-size:1.0625rem;font-weight:500;letter-spacing:0;color:var(--ink-2)}
.tile p{font-size:1.125rem;line-height:1.5;color:var(--ink)}
/* Why people take it (partials/uses.njk): one tile per use, most common first. Smaller than the research tiles further down, so the first section reads as a short
   list of reasons, not a wall: an icon, the reason, the evidence in words beside a dot in its colour, one sentence, and the sources folded at the foot. The grid is
   the bento's: one column below 900px; above it two for two and four tiles, three for three, and five as two over three. */
.use-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.use{grid-column:span 6;display:flex;flex-direction:column;gap:8px;padding:26px 26px 6px;border-radius:var(--r-lg);background:var(--card)}
@media (min-width:900px){
  .use-list.n-2 .use,.use-list.n-4 .use,.use-list.n-5 .use:nth-child(-n+2){grid-column:span 3}
  .use-list.n-3 .use,.use-list.n-5 .use:nth-child(n+3){grid-column:span 2}
}
.use .tile-icon{width:36px;height:36px;margin-bottom:2px}
.use h3{font-size:1.375rem;font-weight:700;line-height:1.15;letter-spacing:var(--tr-l);text-wrap:balance}
.use-tag{display:inline-flex;align-items:flex-start;gap:7px;font-size:var(--fs-sm);font-weight:600;line-height:1.35;color:var(--ink-2)}
.use-tag::before{content:"";flex:none;width:8px;height:8px;margin-top:calc((1.35em - 8px) / 2);border-radius:50%;background:var(--b)} /* level with the middle of the first line (1.35em is the tag's line height), so a tag that wraps keeps its dot there instead of centring it between its lines */
.use-text{max-width:65ch;font-size:1.0625rem;line-height:1.5;color:var(--ink)} /* a lone tile is the page's whole width, and without a limit its sentence would run on one very long line */
.use-src{margin-top:auto;border-top:1px solid var(--hair)}
.use-src > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);cursor:pointer;list-style:none}
.use-src > summary::-webkit-details-marker{display:none}
.use-src > summary .icon{width:16px;height:16px;stroke-width:2;transition:transform .25s var(--ease)}
.use-src[open] > summary .icon{transform:rotate(180deg)}
.use-src ul{display:grid;gap:12px;margin:0;padding:0 0 16px;list-style:none}
.use-src-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px}
.use-src-type{flex:none;padding:0 8px;border-radius:980px;background:var(--bg);font-size:var(--fs-xs);font-weight:600;color:var(--ink-2)} /* the page's colour, not --field: in light mode --field is the tile's own colour, and the pill would not show */
.use-src-line a{flex:1 1 200px;min-width:0;min-height:44px;padding-block:10px;overflow-wrap:anywhere}
.use-src-quote,.use-src-tr{margin:0;padding-left:12px;border-left:2px solid var(--line);font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2)}
.use-src ul{max-width:70ch} /* a lone use's full-width tile: its open sources keep a readable line */
/* At a glance (partials/answers.njk): four answers under the title block, two across on a phone and four on a wide screen. Each is a card that links to its chapter:
   the question small and gray, the answer bold (with a dot in its evidence colour where it has one), and a line that qualifies it. */
.answers{margin-top:clamp(28px,4vw,44px)}
.answers-title{margin-bottom:10px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.answers-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:900px){.answers-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.answer{display:flex;flex-direction:column;gap:3px;height:100%;min-height:44px;padding:14px 16px;border-radius:var(--r-sm);background:var(--card);color:var(--ink);text-decoration:none}
.answer:hover{background:var(--card-2)}
.answer-q{font-size:var(--fs-sm);color:var(--ink-2)}
.answer-a{display:flex;align-items:flex-start;gap:7px;font-size:1.0625rem;font-weight:700;line-height:1.25}
.answer.has-dot .answer-a::before{content:"";flex:none;width:8px;height:8px;margin-top:calc((1.25em - 8px) / 2);border-radius:50%;background:var(--dot)}
.answer-sub{font-size:var(--fs-sm);line-height:1.35;color:var(--ink-2)}
/* Risks and unknowns (partials/risks.njk): the collected risks as points in the caution box, beside its icon. */
.caution > ul{grid-column:2}
.risk-points{margin:4px 0 0;padding-left:1.15em;display:grid;gap:6px;font-size:1.0625rem;line-height:1.5;color:var(--ink)}
/* What people report (the community block's cautions, moved into this chapter): the 20px gap needs the second class, since .cm-block's own 28px is set in private.css, which loads after this file;
   and the label is the block's small gray one, which a rule scoped to .community cannot give it from here. */
.cm-block.risk-reports{margin-top:20px}
.risk-reports .cm-sub{margin:0 0 8px;font-family:var(--f-text);font-size:var(--fs-sm);font-weight:600;letter-spacing:0;color:var(--ink-2)}
.risk-more,.sources-more{margin-top:14px}
/* Their links are long for a phone's width, and a .more link does not wrap by itself: they wrap as the dosing links do, and are a 44px target. */
.risk-more .more,.sources-more .more{display:inline-block;min-height:44px;padding-block:10px;line-height:1.4;white-space:normal}
.risk-more .more::after,.sources-more .more::after{display:inline}
/* Sources (partials/page-sources.njk): one line, a way to the Source library, and the original text folded. */
.sources-line{max-width:65ch;font-size:1.0625rem;line-height:1.55;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.use-src > summary .icon{transition:none}}
.footnote{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:22px;font-size:var(--fs-2xs);color:var(--ink-2)}
.footnote span{display:inline-flex;align-items:baseline;gap:7px}
.footnote i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--b);transform:translateY(-1px)}

.ev-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px 56px;padding:clamp(28px,4vw,48px);border-radius:var(--r-lg);background:var(--card)}
.ev-eyebrow{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.ev-level{margin-top:6px;font-family:var(--f-display);font-size:clamp(1.625rem,3vw,2.125rem);font-weight:700;line-height:1.12;letter-spacing:var(--tr-l);color:var(--ev)}
.ev-meter{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:18px;max-width:320px}
.ev-meter i{height:8px;border-radius:4px;background:var(--card-2)}
.ev-meter i.on{background:var(--ev)}
.ev-scale{display:flex;justify-content:space-between;max-width:320px;margin-top:8px;font-size:var(--fs-sm);color:var(--ink-2)}
.ev-panel .ev-text p{font-size:1.1875rem;line-height:1.5;letter-spacing:-.008em;color:var(--ink)}
@media (max-width:760px){.ev-panel{grid-template-columns:minmax(0,1fr)}}
.caution{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 20px;margin-top:20px;padding:clamp(28px,4vw,40px);border-radius:var(--r-lg);background:var(--card)}
.caution > .icon{grid-row:span 2;width:30px;height:30px;color:var(--warn)}
.caution h3{font-size:1.375rem;font-weight:700;letter-spacing:var(--tr-m)}
.caution p{font-size:1.0625rem;line-height:1.55;color:var(--ink);hyphens:manual}
/* Additional paragraphs stay beside the icon instead of widening its auto column. */
.caution > p{grid-column:2}
/* on a phone the warning icon sits above its heading, not in a column of its own: the text then has the card's whole width (about 30 characters a line in the narrow column made the most safety-critical text the hardest to read) */
@media (max-width:600px){
  .caution{grid-template-columns:minmax(0,1fr)}
  .caution > .icon{grid-row:auto;width:26px;height:26px;margin-bottom:4px}
  .caution > p,.caution > ul{grid-column:1}
}

/* ---------- dosing ---------- */
/* The Dosing section of a peptide page: the plans (tabs when there are several); for the plan on show, its facts, its ramp of doses, its limit, its notes and its
   source; then the caution that goes with every plan. The tiles are the page's own: the --card gray, the 28px corner, the display face for what is read first. */
.dose-plans{display:grid;gap:28px}
.dose-plan{display:grid;gap:20px;min-width:0}
.dose-plan[hidden]{display:none}
/* without scripting every plan is listed in turn, each under its own name, with a rule between them */
html:not(.js) .dose-plan + .dose-plan{padding-top:32px;border-top:1px solid var(--line)}
.dose-head{display:grid;justify-items:start;gap:6px}
.dose-for{font-size:1.0625rem;font-weight:600;letter-spacing:var(--tr-s);color:var(--ink-2)}
.dose-for.is-long{max-width:68ch;font-weight:400;letter-spacing:0;line-height:1.47;color:var(--ink);text-wrap:pretty} /* a sentence or two on who it is for reads as text, not as a label: the page's ink and its body leading, never the label's gray */
.dose-plan-name{font-size:clamp(1.75rem,3.2vw,2.25rem);font-weight:700;line-height:1.1;letter-spacing:var(--tr-l)}
.dose-tags{display:flex;flex-wrap:wrap;gap:0;margin-top:6px;font-size:var(--fs-sm);color:var(--ink-2)}
/* what the plan is and what it rests on: a plain caption ("Long-term · Approved label"), not two gray pills that look like the tabs above and do nothing */
.dose-tags .badge{display:inline;min-height:0;padding:0;border-radius:0;background:none;font-size:inherit;font-weight:400;color:inherit}
.dose-tags .badge + .badge::before{content:"\00B7";margin-inline:8px}
/* the plans as tabs (site.js): the tab says the plan's name, so the heading inside it is not said twice; the plans that are not chosen wait */
.dose-tabs{display:none;gap:2px;width:100%;padding:3px;border-radius:24px;background:var(--card-2)}
.js .dose-tabs{display:flex}
.js .is-tabbed .dose-plan:not(.is-on){display:none}
.js .is-tabbed .dose-plan-name{display:none}
.dose-tab{flex:1 1 auto;min-height:44px;padding:6px 10px;border:0;border-radius:21px;background:transparent;color:var(--ink);font:inherit;font-size:1.0625rem;font-weight:500;line-height:1.2;text-align:center;transition:background-color .2s var(--ease),color .2s var(--ease)}
.dose-tab[aria-selected="true"]{background:var(--ink);color:var(--bg)}
@media (hover:hover){.dose-tab[aria-selected="false"]:hover{background:color-mix(in srgb,var(--ink) 9%,transparent)}}
@media (min-width:700px){
  .dose-tabs{width:fit-content;max-width:100%}
  .dose-tab{flex:0 1 auto;padding:6px 28px}
}
@media (prefers-reduced-motion:no-preference){.dose-plan.is-switched{animation:dose-in .3s var(--ease)}}
@keyframes dose-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
/* how, how often, how long: a plan with one dose leads with that dose, large. On a phone the three facts are ONE grouped card, a row for each between hairlines (label on the left, value on
   the right, as in a Settings list), not three cards of their own; from 700px they are three tiles. */
.dose-facts{display:grid;gap:12px;margin:0}
.dose-fact{display:flex;flex-direction:column;gap:2px;min-width:0;padding:18px 22px;border-radius:var(--r);background:var(--card)}
.dose-fact dt{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.dose-fact dd{margin:0;font-family:var(--f-display);font-size:clamp(1.1875rem,1.9vw,1.375rem);font-weight:600;line-height:1.25;letter-spacing:var(--tr-m);color:var(--ink);text-wrap:pretty}
.dose-figure dd{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;margin-top:2px}
.dose-figure b{font-size:clamp(2.75rem,5vw,3.5rem);font-weight:700;line-height:1.05;letter-spacing:var(--tr-xl);font-variant-numeric:tabular-nums;color:var(--link)}
.dose-figure dd span{font-size:1.375rem;font-weight:500;color:var(--ink-2)}
/* a range ("200–2,000 mcg") is a little smaller, and its number and unit stay on one line, in a card of any width */
.dose-figure.is-range dd{flex-wrap:nowrap}
.dose-figure.is-range b{font-size:clamp(1.75rem,2.5vw,2.25rem);white-space:nowrap}
.dose-figure.is-range dd span{font-size:1.1875rem;white-space:nowrap}
@media (max-width:699px){
  .dose-facts{display:block}
  .dose-figure{margin-bottom:12px}
  .dose-fact:not(.dose-figure){flex-direction:column;align-items:flex-start;gap:2px;padding:14px 18px 16px;border-radius:0}
  .dose-fact:not(.dose-figure) + .dose-fact:not(.dose-figure){border-top:1px solid var(--line)}
  .dose-facts.has-figure > .dose-fact:nth-child(2),.dose-facts:not(.has-figure) > .dose-fact:first-child{border-radius:var(--r) var(--r) 0 0}
  .dose-fact:not(.dose-figure):last-child{border-radius:0 0 var(--r) var(--r)}
  .dose-fact:not(.dose-figure) dt{font-weight:500}
  /* an answer can run to three lines ("Injection under the skin (belly or thigh; ...)"): it is read from the left, under its label, in the weight of the page's own text, never right-aligned */
  .dose-fact:not(.dose-figure) dd{font-size:1.0625rem;font-weight:500;line-height:1.4;text-align:left}
}
@media (min-width:700px){
  .dose-fact{gap:6px;padding:24px 26px;border-radius:var(--r-lg)}
  .dose-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .dose-facts.has-figure .dose-figure{grid-column:1 / -1}
}
@media (min-width:1000px){
  .dose-facts.has-figure{grid-template-columns:1.25fr repeat(3,minmax(0,1fr))}
  .dose-facts.has-figure .dose-figure{grid-column:auto}
}
/* The ramp: a bar for each step, as tall as its dose is of the plan's highest. The steps are a list, so a screen reader reads them in order; the bars are
   decoration. On a phone (and for a plan of more than six steps) the steps are rows with the bar running across; on a wider screen they are columns.
   Every bar is filled, so a chart never looks unfinished. Two cues only, the same in every plan: the FILL says what a step is (gray: a step on the way, blue: a dose the approved label says a
   person can stay on) and the EDGE says whether it is needed (a step that is only if needed is the same fill, fainter, with a dashed edge at the top of its bar, or at the end of it in a row). The
   key above the bars shows each cue that the plan uses, in one row; a screen reader is told the same in words ("Can stay on", "(only if needed)"), so no meaning is in a colour alone. */
.ramp-card{padding:clamp(22px,3.5vw,36px);border-radius:var(--r-lg);background:var(--card)}
.ramp-title{margin-bottom:18px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.ramp-key{display:flex;flex-wrap:wrap;gap:8px 22px;margin:-6px 0 20px;font-size:var(--fs-sm);color:var(--ink-2)}
.ramp-key > span{display:inline-flex;align-items:center;gap:8px}
.ramp-sw{flex:none;width:28px;height:14px;border-radius:5px;background:var(--bar)}
.ramp-sw.is-keep{background:var(--accent)}
.ramp-sw.is-optional{background:linear-gradient(90deg,var(--bar) 0 5px,transparent 5px 9px) 0 0/9px 2px repeat-x,color-mix(in srgb,var(--bar) 40%,transparent)}
.ramp{--bar-max:180px;--when-h:3.75rem;list-style:none;margin:0;padding:0}
/* a row: when it is, then its bar and its dose */
.ramp-step{display:grid;grid-template-columns:6.5rem minmax(0,1fr);grid-template-areas:"when track";align-items:center;gap:0 12px;padding:8px 0;border-top:1px solid var(--line)}
.ramp-step:first-child{padding-top:0;border-top:0}
.ramp-step:last-child{padding-bottom:0}
.ramp-when{grid-area:when;font-size:var(--fs-sm);font-weight:500;color:var(--ink-2)}
.ramp-keep{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* said in words to a screen reader; seen as the blue fill */
.ramp-track{grid-area:track;display:flex;align-items:center;gap:12px;min-width:0}
.ramp-bar{--bar-c:var(--bar);order:1;flex:none;height:22px;width:max(calc(var(--h) * (100% - 6.5rem)),14px);border-radius:8px;background:var(--bar-c)}
.ramp-dose{order:2;flex:0 1 auto;min-width:0;font-family:var(--f-display);font-size:1.375rem;font-weight:700;line-height:1.1;letter-spacing:var(--tr-m);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.ramp-dose small{font-family:var(--f-text);font-size:1rem;font-weight:500;letter-spacing:0;color:var(--ink-2)}
.is-keep .ramp-bar{--bar-c:var(--accent)}
.is-keep .ramp-dose{color:var(--link)}
/* only if needed: the same fill at 40%, and a dashed edge where the bar ends */
.is-optional .ramp-bar{background:linear-gradient(0deg,var(--bar-c) 0 5px,transparent 5px 9px) 100% 0/2px 9px repeat-y,color-mix(in srgb,var(--bar-c) 40%,transparent)}
@media (min-width:680px){
  .ramp:not(.is-rows){display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:clamp(8px,1.6vw,20px);background:linear-gradient(var(--line),var(--line)) 0 calc(100% - var(--when-h))/100% 1px no-repeat}
  .ramp:not(.is-rows) .ramp-step{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr var(--when-h);grid-template-areas:none;justify-items:center;gap:0;padding:0;border-top:0;text-align:center}
  .ramp:not(.is-rows) .ramp-track{grid-area:auto;grid-row:1;grid-column:1;flex-direction:column;justify-content:flex-end;align-self:end;gap:10px;width:100%}
  .ramp:not(.is-rows) .ramp-bar{order:0;width:min(100%,88px);height:max(calc(var(--h) * var(--bar-max)),12px);border-radius:12px 12px 6px 6px}
  .ramp:not(.is-rows) .is-optional .ramp-bar{background:linear-gradient(90deg,var(--bar-c) 0 5px,transparent 5px 9px) 0 0/9px 2px repeat-x,color-mix(in srgb,var(--bar-c) 40%,transparent)}
  .ramp:not(.is-rows) .ramp-dose{order:0}
  .ramp:not(.is-rows) .ramp-when{grid-area:auto;grid-row:2;grid-column:1;padding-top:14px}
}
/* the limit: a band the eye catches before the notes */
.dose-limit{display:flex;align-items:flex-start;gap:14px;margin:0;padding:18px 22px;border-radius:18px;background:color-mix(in srgb,var(--warn) 9%,var(--card));font-size:1.125rem;line-height:1.45;color:var(--ink)}
.dose-limit .icon{width:24px;height:24px;margin-top:1px;color:var(--warn)}
.dose-limit b{font-weight:700}
.dose-notes{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:68ch}
.dose-notes li{position:relative;max-width:62ch;padding-left:20px;font-size:1.125rem;line-height:1.5;color:var(--ink)}
.dose-notes li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
.dose-source{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;margin:0;font-size:var(--fs-sm);color:var(--ink-2)}
.dose-source a{display:inline-block;max-width:100%;min-height:44px;padding-block:10px;line-height:1.4;text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){.dose-source{flex-direction:column;align-items:flex-start}.dose-source a{margin-top:-10px}}
.ext{flex:none;display:inline-block;width:14px;height:14px;margin-left:5px;vertical-align:-1px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* the cue on a link that opens a new tab, set after its last word */
/* the caution under the plans (or, for a peptide with no established dose, why) and the way on to the mixing guide */
.dose-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 20px;padding:clamp(24px,3.5vw,36px);border-radius:var(--r-lg);background:var(--card)}
.dose-verified + .dose-note{margin-top:28px}
.dose-note > .icon{align-self:start;width:30px;height:30px;color:var(--warn)}
.dose-note p{font-size:clamp(1.0625rem,2.2vw,1.1875rem);line-height:1.5;color:var(--ink)}
.dose-note p + p{margin-top:12px}
.dose-note .dose-guess{font-weight:600}
@media (max-width:600px){.dose-note{grid-template-columns:minmax(0,1fr);gap:12px}}
.dose-more{margin-top:14px}
.dose-more .more{display:inline-block;min-height:44px;padding-block:10px;line-height:1.4;white-space:normal}
.dose-links{display:flex;flex-wrap:wrap;column-gap:28px;margin-top:14px} /* the ways on: the mixing guide, and the vial planner set to this peptide */
.dose-links .dose-more{margin-top:0}

.specs{margin:0;border-top:1px solid var(--line)}
.specs > div{display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,3fr);gap:6px 40px;padding:24px 0;border-bottom:1px solid var(--line)}
.specs dt{font-family:var(--f-display);font-size:1.0625rem;font-weight:600;letter-spacing:var(--tr-s);color:var(--ink)}
.specs dd{margin:0;font-size:1.0625rem;line-height:1.5;color:var(--ink)}
.specs dd ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.specs .two-line{display:grid;gap:2px} /* a blend: its name, and under it the size of the vial */
.specs .two-line a{position:relative}
.specs .two-line a::before{content:"";position:absolute;inset:-9px 0} /* the line is 26px; its tap area is 44 */
.specs .mono{font-family:var(--f-mono);font-size:1.0625rem;letter-spacing:.02em;line-height:1.6;overflow-wrap:anywhere}
.specs .muted{font-size:var(--fs-sm);color:var(--ink-2);white-space:nowrap}
@media (max-width:600px){.specs > div{grid-template-columns:minmax(0,1fr)}}

.pager{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(72px,10vw,120px);padding-top:28px;border-top:1px solid var(--line)}
.pager a{display:grid;gap:4px;min-width:0;padding-block:6px;color:var(--ink)}
.pager a:hover{text-decoration:none}
.pager a:hover b{text-decoration:underline;text-underline-offset:4px}
.pager .dir{font-size:var(--fs-2xs);color:var(--ink-2)}
.pager b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-display);font-size:clamp(1.25rem,2.4vw,1.625rem);font-weight:600;letter-spacing:var(--tr-m);color:var(--link)}
.pager .next{text-align:right;grid-column:2}
@media (max-width:600px){.pager{grid-template-columns:minmax(0,1fr)}.pager .next{text-align:left;grid-column:1}}

/* ---------- structure ---------- */
/* The Structure section of a peptide page (partials/structure.njk): a real 3D picture on a soft gray tile, as a product is shown, with its badge, its caption and its links beside it on a wide
   screen and under it on a phone. The pictures are transparent WebP (the receptor is a translucent gray), so the same file reads on the light tile and on the dark one. Several pictures are tabs:
   the Dosing section's tablist (.dose-tabs, .dose-tab) and the same script. */
.struct{display:grid;gap:24px}
.struct-view{min-width:0}
.struct-view[hidden]{display:none}
/* without scripting every picture is listed in turn, with a rule between them */
html:not(.js) .struct-view + .struct-view{padding-top:32px;border-top:1px solid var(--line)}
.js .struct.is-tabbed .struct-view:not(.is-on){display:none}
@media (prefers-reduced-motion:no-preference){.struct-view.is-switched{animation:dose-in .3s var(--ease)}}
.struct-fig{display:grid;gap:22px;margin:0}
.struct-tile{overflow:hidden;border-radius:var(--r-lg);background:var(--card)}
/* the badge says in words what the picture is, so it is never told by color alone; a related structure has a darker outline and a computed model a dashed one, as a second cue */
.struct-badge{display:flex;flex-wrap:wrap;align-items:center;width:fit-content;max-width:calc(100% - 32px);min-height:34px;margin:16px 0 0 16px;padding:3px 14px;border:1px solid var(--line);border-radius:980px;background:var(--bg);font-size:var(--fs-sm);font-weight:600;line-height:1.3;color:var(--ink)}
.struct-badge span + span::before{content:"\00B7";margin-inline:8px;font-weight:400;color:var(--ink-3)}
.is-related .struct-badge{border-color:var(--ink-3)}
.is-computed .struct-badge{border:1.5px dashed var(--ink-3)}
/* the picture: square on a phone, wide from the width at which the page serves the wide render (lib/structures.js, WIDE_FROM: tools/structures-section.test.js checks they agree), so nothing moves when it arrives */
.struct-tile picture{display:block}
.struct-img{display:block;width:100%;height:auto;aspect-ratio:1 / 1}
@media (min-width:700px){.struct-img{aspect-ratio:8 / 5}}
.struct-text{display:grid;align-content:start;gap:16px;min-width:0}
.struct-cap{font-size:1.1875rem;line-height:1.5;letter-spacing:-.008em;color:var(--ink);text-wrap:pretty}
.struct-diff,.struct-miss{font-size:1.0625rem;line-height:1.5;color:var(--ink);text-wrap:pretty}
.struct-diff b{font-weight:600}
.struct-miss{display:grid;gap:4px}
.struct-label{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.struct-miss ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.struct-miss li{position:relative;padding-left:16px}
.struct-miss li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
.struct-links{display:flex;flex-wrap:wrap;gap:0 24px;margin:0;padding:0;list-style:none}
.struct-links a{display:inline-block;min-height:44px;padding-block:10px;font-size:1.0625rem;font-weight:500;line-height:1.4} /* inline-block, not flex: a flex container drops the space before the new-tab cue's last word */
.struct-credit{font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2)}
@media (min-width:960px){
  /* the picture is at the top of its row; a caption shorter than it sits beside its middle, and a longer one (a related structure's difference and what is missing) is the row, so the picture never floats */
  .struct-fig{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:start;gap:44px}
  .struct-text{align-self:center}
}
/* a peptide with no structure: a line and why, in a small card, not a section of empty space */
.struct-none-section{--sec-pad:clamp(48px,7vw,72px)}
.struct-none-section > .tt{margin-bottom:18px}
.struct-none{display:grid;gap:6px;max-width:68ch;padding:22px 26px;border-radius:var(--r);background:var(--card)}
.struct-none-line{font-size:1.1875rem;font-weight:600;line-height:1.35;letter-spacing:-.008em;color:var(--ink);text-wrap:pretty}
.struct-none-why{font-size:1.0625rem;line-height:1.5;color:var(--ink);text-wrap:pretty}
.struct-none-date{font-size:var(--fs-sm);color:var(--ink-2)}

/* ---------- blends ---------- */
/* the page's key caveat: a tile that stands out from the subtitle above it, left-aligned so it reads as sentences */
.callout{display:flex;align-items:flex-start;gap:14px;max-width:680px;margin:clamp(40px,6vw,64px) auto 0;padding:20px 24px;scroll-margin-top:calc(var(--gnav-h) + 24px);border-radius:18px;background:var(--card);font-size:1.0625rem;line-height:1.5;color:var(--ink);text-align:left}
.callout .icon{width:20px;height:20px;margin-top:2px;color:var(--link)}
.callout b{font-weight:600}
.blend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:20px}
.blend{display:flex;flex-direction:column;gap:18px;min-width:0;padding:34px 32px;border-radius:var(--r-lg);background:var(--card);scroll-margin-top:-16px}
.blend:target{box-shadow:0 0 0 2px var(--ring)}
.blend-eyebrow{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.blend h2{margin-top:4px;font-size:1.75rem;font-weight:700;line-height:1.1;letter-spacing:var(--tr-l)}
/* The composition bar: one segment per ingredient, each in that peptide's own finish (lib/finish.js), the same colour as its dot in the
   list below and its molecule on the catalog card. --s is the finish deep enough for white text on a light page (--on-s) and the plain tone,
   for dark text, on a dark one. */
.comp a,.comp-list li{--s:var(--fin-ink,#646468);--on-s:#FFFFFF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .comp a,:root:not([data-theme="light"]) .comp-list li{--s:var(--fin,#98989D);--on-s:#111113}}
:root[data-theme="dark"] .comp a,:root[data-theme="dark"] .comp-list li{--s:var(--fin,#98989D);--on-s:#111113}
.comp{display:flex;gap:2px;height:32px;border-radius:10px;overflow:hidden}
.comp a{display:flex;align-items:center;justify-content:center;min-width:6px;background:var(--s);color:var(--on-s);font-size:1rem;font-weight:600;letter-spacing:-.011em;font-variant-numeric:tabular-nums;transition:opacity .2s var(--ease)}
.comp a:hover{opacity:.78;text-decoration:none}
.comp-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.comp-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:48px;border-bottom:1px solid var(--line);font-size:1rem}
.comp-list i{width:12px;height:12px;border-radius:50%;background:var(--s)}
.comp-list a{display:flex;align-items:center;align-self:stretch;color:var(--ink);font-weight:500}
.comp-list .mg{color:var(--ink-2);font-variant-numeric:tabular-nums}
.blend-why{font-size:1rem;line-height:1.5;color:var(--ink-2)}

/* ---------- glossary ---------- */
/* One reading column, A to Z. The find bar above it is the catalog bar's twin (same classes, same sticky behaviour on a desktop); the title, the bar and the list share the column's left edge. */
html:has(.gloss-list){scroll-padding-top:calc(var(--gnav-h) + var(--bar-h) + 16px)}
.gloss-list{max-width:820px;margin-inline:auto}
.gloss-wrap,#glossBar .bar-inner{max-width:calc(820px + 2 * var(--gut))}
.gloss-wrap .page-hero{justify-items:start;padding-block:clamp(32px,6vw,56px) clamp(24px,2.5vw,28px);text-align:left}
.gloss-wrap .page-title,.gloss-wrap .page-sub{max-width:none}
.gloss-group{display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 16px;padding-block:22px 6px;border-top:1px solid var(--line)}
.gloss-group[hidden]{display:none}
/* the letter of the group you are in stays in view (beside its terms on a wide screen, in a band under the letters on a phone), like the index of a contact list */
.gloss-letter{position:sticky;top:calc(var(--gnav-h) + var(--bar-h) + 16px);align-self:start;font-size:2rem;font-weight:600;line-height:1.1;letter-spacing:var(--tr-l);color:var(--ink-2)}
.gloss{margin:0}
.gloss > div{padding-bottom:24px}
.gloss > div[hidden]{display:none}
.gloss dt{margin-bottom:6px;font-family:var(--f-display);font-size:1.3125rem;font-weight:600;letter-spacing:var(--tr-s)}
.gloss dd{margin:0;font-size:1.0625rem;line-height:1.55;color:var(--ink);text-wrap:pretty}
/* landing from "Full glossary" in a definition: the entry is tinted, the tint reaching a little past its text */
.gloss > div:target{border-radius:12px;background:color-mix(in srgb,var(--link) 9%,transparent);box-shadow:0 0 0 12px color-mix(in srgb,var(--link) 9%,transparent)}
/* the letters: a row of small round chips (not the filter's track). On a desktop they wrap; on a phone they are one line that scrolls, and that stays in view under the nav while the list is read. */
.az-wrap{width:auto;justify-self:stretch;border-radius:0;background:none}
.az{padding:0;gap:8px;flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
.az .pill{min-width:44px;min-height:44px;justify-content:center;padding:0 12px;background:var(--field)}
.az .pill::before{inset:0}
@media (hover:hover){.az .pill:hover{background:var(--field-hover)}}
.az-wrap .pills-more{display:none!important}
.az-wrap.has-less .pills{--fl:18px}
@media (max-width:760px){
  /* the bar's search and count are plain blocks of the page, so that the row of letters (alone) can stay under the nav the whole length of the list */
  #glossBar,#glossBar .bar-inner{display:contents}
  #glossBar .search{margin:0 var(--gut) 10px}
  #glossBar .count{margin:14px var(--gut) 0}
  .az-wrap{position:sticky;top:var(--gnav-h);z-index:15;margin:0;padding:8px var(--gut);border-bottom:1px solid var(--hair);background:var(--bg)}
  .az{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent calc(var(--fl) - 12px),#000 var(--fl),#000 calc(100% - var(--fr)),transparent);
    mask-image:linear-gradient(90deg,transparent 0,transparent calc(var(--fl) - 12px),#000 var(--fl),#000 calc(100% - var(--fr)),transparent)}
  .az .pill{min-width:36px;min-height:36px;padding:0 8px}
  .az .pill::before{inset:-4px}
  .az-wrap.has-more .pills-more{display:grid!important}
  .az-wrap .pills-more{top:8px;right:var(--gut);bottom:8px;background:linear-gradient(90deg,transparent,var(--bg) 50%)}
  .gloss-group{grid-template-columns:minmax(0,1fr)}
  .gloss-letter{top:calc(var(--gnav-h) + 53px);z-index:2;margin:0;padding:6px 0;background:var(--bg);font-size:1.0625rem;line-height:1.3;color:var(--ink-2)}
  /* a jump to a term (from "Full glossary" in a definition) lands it under BOTH sticky bands: the row of letters (53px) and the band that names the letter (about 35px) */
  html:has(.gloss-list){scroll-padding-top:calc(var(--gnav-h) + 53px + 36px + 16px)}
  .gloss > div{scroll-margin-top:8px}
  /* the first term of a group has 12px of room under its letter's band, so the tint round a term a link lands on (it reaches 12px past the text) is never cut off at its top by the band */
  .gloss{margin-top:12px}
  /* the count sits clear under the row of letters, and the first group has no rule above it (it was two rules of different widths with a cramped line between them) */
  .gloss-group:first-of-type{border-top:0;padding-top:12px}
}

/* ---------- safety ---------- */
.facts6{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:20px}
/* The six safety cards have their own class: they once shared .tile, and the bento's grid-column rule leaked in and
   broke the grid. Same look as a bento tile, none of its rules. */
.fact{display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:var(--r-lg);background:var(--card)}
.fact-icon{flex:none;width:44px;height:44px;margin-bottom:6px;fill:none;stroke:var(--link);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fact h3{font-size:1.5rem;font-weight:700;line-height:1.15;letter-spacing:var(--tr-l)}
.fact p{font-size:1.125rem;line-height:1.5;color:var(--ink)}
@media (max-width:600px){.fact{padding:22px}.fact h3{font-size:1.3125rem}}
.prose{max-width:68ch;margin:clamp(56px,8vw,96px) auto 0;display:grid;gap:14px}
.prose h2{margin-top:18px;font-size:1.75rem;font-weight:700;letter-spacing:var(--tr-l)}
.prose p{font-size:1.1875rem;line-height:1.55;letter-spacing:-.008em;color:var(--ink)}
.prose p a{text-decoration:underline;text-underline-offset:3px} /* a link inside a sentence must not rely on colour alone (in dark, link and text are under 3:1 apart) */
/* The one thing a worried reader most needs is a panel of its own, in the same dark tile as the home page's promos, with a way to see the approved medicines. */
.talk{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:14px;margin-top:clamp(56px,8vw,96px);padding:clamp(44px,7vw,80px) clamp(24px,5vw,56px);border-radius:var(--r-lg);background:var(--tile-dark);text-align:center}
.talk-eyebrow{font-size:1.0625rem;font-weight:600;color:#A1A1A6}
.talk-title{max-width:16ch;font-size:clamp(2rem,4.6vw,3.25rem);font-weight:700;line-height:1.06;letter-spacing:var(--tr-xl);color:#F5F5F7}
.talk-text{max-width:46ch;font-size:1.1875rem;line-height:1.5;letter-spacing:var(--tr-m);color:#A1A1A6}
/* the panel is as wide as its column and no wider, so its button (a line of words) wraps on a 320px screen instead of reaching out of the panel */
.talk .btn{margin-top:10px;max-width:100%;padding-block:10px;line-height:1.25;white-space:normal;text-align:center}

/* ---------- reconstitution ---------- */
/* The mixing guide (/reconstitution/) is a utility page that leads with its subject, like the blends page, then sections in the two-tone voice. Its tiles are the page's own
   (the --card gray, the 28px corner, the display face for what is read first); the answer of its calculator is a dark tile, like the home page's promos. */
.recon .section{--sec-pad:clamp(56px,7vw,88px)}
.recon-intro{display:grid;gap:20px;align-items:start}
.recon-lede{max-width:34ch;font-family:var(--f-display);font-size:clamp(1.375rem,2.5vw,1.875rem);font-weight:500;line-height:1.25;letter-spacing:var(--tr-m);text-wrap:balance;color:var(--ink)}
.recon-intro .callout{max-width:none;margin:0}
@media (min-width:900px){.recon-intro{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}}
/* tiles: a short heading and a sentence or two; the math's tiles lead with the rule itself, large */
.rt-grid{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.rt{display:flex;flex-direction:column;gap:10px;min-width:0;padding:28px 28px 30px;border-radius:var(--r-lg);background:var(--card)}
.rt h3{font-size:clamp(1.3125rem,2.2vw,1.625rem);font-weight:700;line-height:1.15;letter-spacing:var(--tr-l);text-wrap:pretty}
.rt p{font-size:1.125rem;line-height:1.5;color:var(--ink)}
.rt-icon{flex:none;width:44px;height:44px;margin-bottom:6px;fill:none;stroke:var(--link);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rt.math h3{font-size:clamp(1.75rem,3vw,2.25rem);line-height:1.1;text-wrap:balance}
@media (max-width:559px){
  .rt-grid.need .rt{display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 16px;align-items:start;padding:20px 22px}
  .rt-grid.need .rt-icon{grid-row:1 / span 2;width:36px;height:36px;margin:1px 0 0}
  .rt-grid.need .rt h3{font-size:1.3125rem}
}
@media (min-width:560px) and (max-width:899px){
  .rt-grid.need{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rt-grid.need .rt:last-child{grid-column:1 / -1}
}
@media (min-width:760px){.rt-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (min-width:900px){
  .rt-grid.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .rt-grid.need{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
  .rt-grid.need .rt{grid-column:span 2}
  .rt-grid.need .rt:nth-child(n+4){grid-column:span 3}
}
.recon-rule{display:flex;align-items:flex-start;gap:14px;margin:20px 0 0;padding:20px 24px;border-radius:18px;background:var(--card);font-size:1.125rem;line-height:1.5;color:var(--ink)}
.recon-rule .icon{width:22px;height:22px;margin-top:2px;color:var(--link)}
.recon-rule b{font-weight:600}
.worked{margin-top:20px;padding:26px 30px 28px;border-radius:var(--r-lg);background:var(--card)}
.worked-eyebrow{margin-bottom:6px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.worked p:last-child{max-width:62ch;font-size:1.25rem;line-height:1.5;color:var(--ink)}
/* the steps, numbered large in the gray of a headline's second half; the list is rows between hairlines, as the specs are */
.steps{list-style:none;margin:0;padding:0;counter-reset:step;max-width:760px;border-top:1px solid var(--line)}
.steps li{counter-increment:step;display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 16px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line);font-size:1.1875rem;line-height:1.45;color:var(--ink)}
.steps li::before{content:counter(step);font-family:var(--f-display);font-size:1.75rem;font-weight:600;line-height:1;letter-spacing:var(--tr-l);font-variant-numeric:tabular-nums;color:var(--ink-3)}
/* statements in rows: the mistakes, what is stored how, when not to use a vial, sharps */
.rows{list-style:none;margin:0;padding:0;max-width:760px;border-top:1px solid var(--line)}
.rows li{display:flex;align-items:flex-start;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.rows p{font-size:1.1875rem;line-height:1.5;color:var(--ink)}
.rows b{font-weight:600}
.rows-after{margin-top:28px}
.row-icon{flex:none;width:26px;height:26px;margin-top:1px;fill:none;stroke:var(--warn);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.recon-close{display:grid;justify-items:center;gap:6px;margin-top:clamp(56px,8vw,96px);padding-top:32px;border-top:1px solid var(--line);text-align:center}
.recon-close p{max-width:52ch;font-size:1.1875rem;line-height:1.5;color:var(--ink-2)}
.recon-close .more{display:inline-flex;align-items:center;min-height:44px}
.sources{list-style:none;margin:0;padding:0;counter-reset:src;max-width:760px;border-top:1px solid var(--line)}
.sources li{counter-increment:src;display:grid;grid-template-columns:36px minmax(0,1fr);gap:0 12px;padding:0 0 10px;border-bottom:1px solid var(--line);font-size:1.0625rem;line-height:1.4}
.sources li::before{content:counter(src);padding-top:10px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.sources li > *{grid-column:2}
.sources a{display:inline-block;min-height:44px;padding-block:10px;overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:3px}
.src-meta{display:block;margin-top:-8px;font-size:var(--fs-sm);color:var(--ink-2)}

/* The syringe calculator: the form in a gray tile, the answer in a dark one. The answer re-points the page's tokens (as the dark hero's nav does), so everything drawn
   with them, the syringe too, is right on it in both themes. */
.calc{display:grid;gap:20px}
/* a wide screen: the form and its answer side by side; the answer is as tall as its own content, not stretched to the form's height (200px of empty black), and stays in view while the form is filled in */
@media (min-width:900px){.calc{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}.calc > .calc-out{position:sticky;top:calc(var(--lnav-h) + 16px)}}
html:not(.js) .calc{display:none}
.calc-noscript{padding:18px 22px;border-radius:18px;background:var(--card);font-size:1.0625rem;color:var(--ink)}
.calc-form{display:grid;gap:22px;min-width:0;padding:clamp(22px,3.5vw,34px);border-radius:var(--r-lg);background:var(--card)}
.calc-field{display:grid;gap:8px;min-width:0;margin:0;padding:0;border:0}
.calc-field > label,.calc-field > legend{padding:0;font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.calc-field > legend{margin-bottom:8px}
/* a number and its unit: the unit always has the same 98px column (a select, or a bare "mL"), so every number in a card ends at the same place */
.calc-pair{display:grid;grid-template-columns:minmax(0,1fr) 6.125rem;gap:8px}
.calc input[type="number"],.calc select{height:52px;min-width:0;padding:0 16px;border:0;border-radius:14px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:inherit;font-size:1.1875rem;font-variant-numeric:tabular-nums}
.calc input[type="number"]{width:100%;-moz-appearance:textfield;appearance:textfield}
.calc input[type="number"]::-webkit-outer-spin-button,.calc input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--warn)}
/* a box with a message under it keeps the caution tone while it has focus (the blue ring round an orange edge was two outlines) */
.calc input[aria-invalid="true"]:focus-visible,.vp input[aria-invalid="true"]:focus-visible{outline-color:var(--warn)}
.calc-select{position:relative;display:grid}
.calc select{-webkit-appearance:none;appearance:none;padding-right:42px;cursor:pointer}
.calc-select svg{position:absolute;right:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.calc-suffix{display:grid;place-items:center start;min-width:0;padding:0 14px;font-size:1.1875rem;color:var(--ink-2)}
.calc-err{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:var(--fs-sm);font-weight:500;line-height:1.35;color:var(--warn)}
.calc-err[hidden]{display:none}
.calc-err .icon{width:18px;height:18px;margin-top:2px}
/* the syringe and its marks are each a segmented choice (radio buttons: the arrow keys move between them) */
.calc-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:18px;background:var(--card-2)}
.calc-opt{position:relative;display:grid;min-width:0}
.calc-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.calc-opt > span{display:grid;place-items:center;align-content:center;min-height:52px;padding:6px 4px;border-radius:14px;text-align:center;font-size:1rem;line-height:1.25;color:var(--ink);transition:background-color .2s var(--ease),color .2s var(--ease)}
.calc-opt b{font-size:1.0625rem;font-weight:600}
.calc-opt input:checked + span{background:var(--ink);color:var(--bg)}
.calc-opt input:focus-visible + span{outline:2px solid var(--ring);outline-offset:2px}
@media (hover:hover){.calc-opt input:not(:checked):hover + span{background:color-mix(in srgb,var(--ink) 9%,transparent)}}
.calc-hint{margin:6px 0 0;font-size:var(--fs-sm);color:var(--ink-2)}
.calc-out{--ink:#F5F5F7;--ink-2:#ABABB0;--ink-3:#86868B;--bg:#000;--line:rgba(255,255,255,.22);--link:#5AB0FF;--accent:#0A84FF;--warn:#FF9F0A;display:flex;flex-direction:column;gap:16px;min-width:0;padding:clamp(24px,4vw,40px);border-radius:var(--r-lg);background:var(--tile-answer);box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink)}
/* With a box empty or wrong there is no answer, so the tile is the page's plain gray (never a black slab that looks like the answer). It re-points the page's own colors back, for both themes. */
.calc-out.is-empty{--ink:light-dark(#1D1D1F,#F5F5F7);--ink-2:light-dark(#5E5E63,#AEAEB3);--ink-3:light-dark(#6E6E73,#98989D);--bg:light-dark(#FFFFFF,#000000);--line:light-dark(#D2D2D7,#424245);--link:light-dark(#0066CC,#2997FF);--accent:light-dark(#0071E3,#0071E3);--warn:light-dark(#B64400,#FF9F0A);background:var(--card);box-shadow:none}
html:not(.js) .calc-out{display:none}
.calc-result{display:grid;gap:4px}
.calc-result[hidden],.calc-warns[hidden],.calc-error[hidden],.calc-empty[hidden]{display:none}
.calc-draw{display:grid;gap:0;margin:0}
.calc-draw > span{font-size:1.25rem;font-weight:500;color:var(--ink-2)}
.calc-draw b{font-family:var(--f-display);font-size:clamp(3rem,8vw,4.75rem);font-weight:700;line-height:1.02;letter-spacing:var(--tr-xl);font-variant-numeric:tabular-nums}
.calc-ml{font-family:var(--f-display);font-size:clamp(1.5rem,3.4vw,2.125rem);font-weight:600;line-height:1.15;letter-spacing:var(--tr-l);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.calc-facts{display:grid;gap:2px;margin-top:10px;font-size:1.125rem;line-height:1.4;color:var(--ink)}
.calc-math{margin-top:6px;font-size:1.0625rem;line-height:1.45;font-variant-numeric:tabular-nums;color:var(--ink-2);text-wrap:balance}
.calc-syringe{min-width:0;min-height:96px;margin-top:8px;padding-top:8px}
.calc-syringe:empty{display:none} /* no answer, no drawing (the script empties it) */
.calc-warns{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.calc-warn,.calc-error,.calc-alert{display:flex;align-items:flex-start;gap:12px;margin:0;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,var(--warn) 16%,var(--tile-answer));font-size:1.0625rem;line-height:1.4;color:var(--ink)}
.calc-error{padding:18px 20px;box-shadow:inset 0 0 0 1.5px var(--warn);font-size:1.1875rem;font-weight:500}
/* a dose that is more than the syringe holds is said first, above the numbers, as plainly as the answer itself: 1.1875rem, semibold, an amber icon */
.calc-alert{padding:18px 20px;box-shadow:inset 0 0 0 1.5px var(--warn);font-size:1.1875rem;font-weight:600}
.calc-alert[hidden]{display:none}
.calc-warn .icon,.calc-error .icon,.calc-alert .icon{width:22px;height:22px;margin-top:1px;color:var(--warn)}
/* the numbers are shown as what they are, too much: the label says so, and the figure is amber, smaller and struck through (it is not something to draw) */
.is-over .calc-draw b{color:var(--warn);font-size:clamp(1.75rem,5vw,2.75rem);text-decoration:line-through;text-decoration-thickness:3px}
.is-over .calc-ml{color:var(--ink-2)}
.calc-empty{margin:0;font-size:1.1875rem;line-height:1.45;color:var(--ink-2)}
.calc-note{margin-top:18px;font-size:var(--fs-sm);color:var(--ink-2)}
.recon-next{margin-top:6px}
/* a way on that wraps keeps its chevron right after its last word (it was a flex row, which pushed the chevron to the far edge) */
.recon-next .more{display:inline-block;min-height:44px;padding-block:10px;line-height:1.4;white-space:normal}
.recon-next .more::after,.dose-more .more::after,.vp-more .more::after,.diy-link .more::after,.diy-end .more::after{display:inline}
/* the drawing: decoration made of the page's tokens (see recon-syringe.js); its numbers are real 16px text */
.syr{display:block;max-width:100%;height:auto;overflow:visible}
.syr-needle{fill:var(--ink-2)}
.syr-hub{fill:var(--line)}
.syr-barrel{fill:none;stroke:var(--ink-2);stroke-width:1.5}
.syr-fill{fill:var(--accent);fill-opacity:.5}
.syr-flange{fill:var(--ink-3)}
.syr-rod{fill:var(--ink-3);opacity:.9}
.syr-thumb{fill:var(--ink-3)}
.syr-stop{fill:var(--ink)}
.syr-tick{stroke:var(--ink-2);stroke-width:1}
.syr-mid{stroke:var(--ink)}
.syr-major{stroke:var(--ink);stroke-width:1.5}
.syr-num{fill:var(--ink-2);font-family:var(--f-text);font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums}
.syr-target{fill:var(--accent)}
.syr-target-line{stroke:var(--accent);stroke-width:2}

/* ---------- vial planner ---------- */
/* The planner (/planner/) is the syringe calculator's neighbour: its fields, selects, choices and messages are the calculator's (.calc-field, .calc-select, .calc-opt, .calc-err,
   .calc-hint), its headline is the same dark tile, and the rest of its answer is the page's gray tiles. On a wide screen the plan is a column beside the answer, whose headline
   stays in view while you edit. The rows of sizes and steps and the parts of the answer are markup from src/assets/vial-view.js, the timeline is drawn by vial-chart.js (.vc-*). */
.vp-lede{max-width:44ch;margin:0 auto clamp(40px,6vw,64px);font-size:clamp(1.1875rem,1.9vw,1.4375rem);line-height:1.4;letter-spacing:var(--tr-m);text-align:center;text-wrap:balance;color:var(--ink)}
html:not(.js) .vp{display:none}
.vp-cols{display:grid;gap:clamp(44px,6vw,64px)}
@media (min-width:1000px){.vp-cols{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,4vw,56px)}} /* (the answer's column is as tall as the plan's, so its headline can stay in view all the way down) */
.vp-in,.vp-out{min-width:0}
.vp-in{display:grid;align-content:start;justify-items:stretch}
.vp-jump{display:none}
.vp-in .vp-jump{margin-top:16px}
.vp-back{margin-top:8px;font-weight:500}
@media (max-width:999px){.vp-jump{display:inline-flex;align-items:center;justify-content:center;min-height:44px}.vp-back{justify-self:start}}
.vp-in > .tt,.vp-out > .tt{margin-bottom:clamp(20px,3vw,28px)}
.vp-form{display:grid;gap:16px}
/* a tile: a short heading, then what it holds (the plan's tiles and the answer's tiles are the same gray) */
.vp-tile{display:grid;gap:20px;align-content:start;min-width:0;margin:0;padding:clamp(22px,3.5vw,32px);border-radius:var(--r-lg);background:var(--card)}
.vp-tile[hidden],.vp .calc-field[hidden]{display:none}
.vp-tile > h3{font-size:clamp(1.3125rem,2.2vw,1.625rem);font-weight:700;line-height:1.15;letter-spacing:var(--tr-l)}
.vp-lead{margin:-10px 0 0}
.vp-opt{font-weight:400;color:var(--ink-2)}
/* the controls: the calculator's (a 52px field, a soft rule round it, the warning colour when it is wrong) */
.vp input[type="number"],.vp select{height:52px;min-width:0;padding:0 16px;border:0;border-radius:14px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:inherit;font-size:1.1875rem;font-variant-numeric:tabular-nums}
.vp input[type="number"]{width:100%;-moz-appearance:textfield;appearance:textfield}
.vp input[type="number"]::-webkit-outer-spin-button,.vp input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.vp input[type="number"]::placeholder{color:var(--ink-2);opacity:1}
.vp input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--warn)}
.vp input[type="number"]:disabled{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);cursor:not-allowed}
.vp select{-webkit-appearance:none;appearance:none;padding-right:42px;cursor:pointer}
.vp-pair{display:grid;grid-template-columns:minmax(0,1fr) 6.125rem;align-items:center;gap:8px}
.vp-suffix{display:grid;place-items:center start;min-width:0;padding-left:14px;font-size:1.1875rem;color:var(--ink-2)}
/* a price has its dollar sign inside the field, at its left, in gray (not a stray glyph outside it) */
.vp-pair.is-pre{display:block;position:relative}
.vp-pair.is-pre > .vp-suffix{position:absolute;left:14px;top:0;bottom:0;display:grid;place-items:center;padding:0;pointer-events:none}
.vp-size .vp-pair.is-pre input[type="number"]{padding-left:30px}
.vp .calc-hint{margin:0;line-height:1.4}
.vp-more{margin:-8px 0 0}
.vp-more .more{display:inline-block;min-height:44px;padding-block:10px;line-height:1.4;white-space:normal}
/* the vial sizes: a row each, separated by rules, with a way to take one away */
.vp-sizes,.vp-steps{list-style:none;margin:0;padding:0;display:grid}
.vp-size{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.3fr) 44px;gap:0 12px;align-items:start;padding:18px 0;border-top:1px solid var(--line)}
.vp-size:first-child{padding-top:0;border-top:0}
.vp-size:only-child{grid-template-columns:minmax(0,.75fr) minmax(0,1.3fr)}
.vp-size input[type="number"]{padding-inline:12px} /* a size or a price is a few digits: the room is for them */
/* on the narrowest phones the price goes under the size, and each has the width of the row */
@media (max-width:359px){
  .vp-size,.vp-size:only-child{grid-template-columns:minmax(0,1fr) 44px;row-gap:14px}
  .vp-size:only-child{grid-template-columns:minmax(0,1fr)}
  .vp-size .calc-field:nth-child(2){grid-column:1}
  .vp-size > .vp-x{grid-column:2;grid-row:1}
}
.vp-size > .vp-x{margin-top:calc(var(--fs-sm) * 1.47 + 12px)} /* level with the middle of the fields, under their one-line labels */
/* "Size (mg)" and "Price (optional)" are column heads: said over the first row, and (for a screen reader) in each row's own words after it */
.vp-size:not(:first-child) > .calc-field > label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vp-size:not(:first-child) > .vp-x{margin-top:4px}
/* the remove button is a 32px circle with a 44px tap area */
.vp-x{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--ink-2)}
.vp-x svg{width:32px;height:32px;padding:6px;border-radius:50%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;transition:background-color .2s var(--ease),color .2s var(--ease)}
@media (hover:hover){.vp-x:hover{color:var(--ink)}.vp-x:hover svg{background:var(--card-2)}}
/* the steps: a block each, the dose, how often and for how long */
.vp-step{display:grid;gap:12px;padding:18px 0;border-top:1px solid var(--line)}
.vp-step:first-child{padding-top:0;border-top:0}
.vp-step-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vp-step-head:has(.vp-x){min-height:44px;margin-block:-8px -4px}
.vp-step-title{margin:0;font-family:var(--f-text);font-size:var(--fs-sm);font-weight:600;letter-spacing:0;color:var(--ink-2)}
.vp-step-grid{display:grid;gap:16px 12px}
@media (min-width:560px) and (max-width:999px){.vp-step-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1.2fr) minmax(0,1fr);align-items:start}}
/* a phone: every field of a step has a row to itself (side by side, "Once a week" was cut to "Once a we" and "Ongoing" to "Ong"): the dose and its unit, how often, and then how long, which reads
   "For [ 4 ] weeks" on one line, with the box for "Ongoing, to the end of the plan" under it. When that box is ticked the number it replaces is put away. */
@media (max-width:559px){
  .vp-step-grid{grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
  .vp-weeks{grid-template-columns:auto minmax(0,10rem);justify-content:start;align-items:center;column-gap:12px}
  .vp-weeks > label:first-child{grid-column:1}
  .vp-weeks > .vp-pair{grid-column:2;grid-template-columns:minmax(0,1fr) auto}
  .vp-weeks > .vp-check,.vp-weeks > .calc-err{grid-column:1 / -1}
  .vp-weeks:has(.vp-check input:checked) > label:first-child,.vp-weeks:has(.vp-check input:checked) > .vp-pair{display:none}
}
.vp-pair:has(:disabled) > .vp-suffix{opacity:0}
.vp-check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:1.0625rem;color:var(--ink)}
.vp-check input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--accent);cursor:pointer}
.vp-add{justify-self:start}
.vp-add svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.vp-add:disabled{opacity:.45;cursor:not-allowed}
.vp-reset{display:inline-flex;align-items:center;justify-self:start;min-height:44px}
/* topping up: two choices, one under the other, since each is a sentence */
.vp-opts{display:grid;gap:4px;padding:4px;border-radius:18px;background:var(--card-2)}
.vp-opts .calc-opt > span{place-items:center start;padding:10px 18px;text-align:left;font-size:1.0625rem}
/* the answer: the headline in the calculator's dark tile (flat, as an Apple estimator's is), then a card for each size, the timeline and the switch points, all flowing down the page in the column beside
   the form. Nothing in that column is pinned: a card that sticks while the cards under it keep scrolling hides them (it covered the timeline and the switch points). A long form does not leave the
   answer out of sight either: the bar under the top of the screen carries it in a line, in its blue pill (planner.js keeps the words up to date), from the first scroll to the last. */
.vp-answer{position:static}
/* a phone and a tablet have one column: the plan's heading is for a screen reader only (the page's title is right above it) */
@media (max-width:999px){
  .vp-in > .tt{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
.vp-verdict{--ink:#F5F5F7;--ink-2:#ABABB0;--ink-3:#86868B;--bg:#000;--line:rgba(255,255,255,.22);--link:#5AB0FF;--accent:#0A84FF;--warn:#FF9F0A;display:grid;gap:10px;padding:clamp(24px,4vw,36px);border-radius:var(--r-lg);background:var(--tile-answer);box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink)}
.vp-eyebrow{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.vp-live{display:grid;gap:12px}
.vp-headline{font-family:var(--f-display);font-size:clamp(1.75rem,3.4vw,2.5rem);font-weight:700;line-height:1.1;letter-spacing:var(--tr-l);text-wrap:balance}
.vp-detail{max-width:56ch;font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.vp-facts-line{display:flex;flex-wrap:wrap;gap:2px 18px;margin-top:2px;font-size:1.0625rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.vp-body{display:grid;gap:16px;margin-top:16px}
.vp-body[hidden]{display:none}
.vp-plan-line{margin:0 0 -4px;font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.vp-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.vp-card{display:grid;align-content:start;gap:14px;min-width:0;padding:clamp(22px,3vw,28px);border-radius:var(--r-lg);background:var(--card)}
.vp-card.is-best{box-shadow:inset 0 0 0 2px var(--link)}
.vp-card-head{display:grid;justify-items:start;gap:8px}
.vp-card-head h3{font-size:clamp(1.4375rem,2.4vw,1.75rem);font-weight:700;line-height:1.12;letter-spacing:var(--tr-l)}
.vp-badge{display:inline-flex;align-items:center;min-height:28px;padding:0 11px;border-radius:980px;background:color-mix(in srgb,var(--link) 8%,var(--card));color:var(--link);font-size:var(--fs-sm);font-weight:600}
/* cards side by side keep their numbers level: the cards without the badge leave room where it would be */
@media (min-width:560px){.vp-cards:has(.vp-badge) .vp-card:not(:has(.vp-badge)) .vp-card-head::after{content:"";display:block;height:28px}}
.vp-count{font-size:1.125rem;color:var(--ink-2)}
.vp-count b{font-family:var(--f-display);font-size:clamp(2.5rem,4.4vw,3.25rem);font-weight:700;line-height:1;letter-spacing:var(--tr-xl);font-variant-numeric:tabular-nums;color:var(--ink)}
.vp-mixes{margin-top:-8px;font-size:var(--fs-sm);color:var(--ink-2);text-wrap:pretty}
.vp-off{font-size:1.0625rem;line-height:1.45;color:var(--ink)}
.vp-facts{margin:0}
.vp-facts > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.vp-facts dt{font-size:var(--fs-sm);font-weight:500;color:var(--ink-2)}
.vp-facts dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.vp-facts small{font-size:var(--fs-sm);font-weight:500;color:var(--ink-2)}
.vp-lasts-box{display:grid;gap:10px;padding:16px 18px;border-radius:18px;background:var(--bg)}
.vp-lasts-title{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.vp-lasts{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.vp-lasts li{display:grid;gap:2px}
.vp-lasts-h{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.vp-lasts-h span{display:block;font-weight:500;color:var(--ink-2)}
.vp-lasts-t{font-size:1.0625rem;line-height:1.4;color:var(--ink)}
.vp-lasts-u{font-size:var(--fs-sm);line-height:1.4;color:var(--ink-2)}
/* the timeline: the drawing (vial-chart.js) and what its marks mean */
.vp-chart{min-width:0}
.vc{display:block;max-width:100%;height:auto;overflow:visible}
.vc-track{fill:var(--card-2)}
.vc-step{fill:var(--bg)}
.vc-grid{stroke:var(--line);stroke-width:1;opacity:.7}
.vc-edge{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.vc-name,.vc-count,.vc-tick,.vc-axis,.vc-dose,.vc-note{font-family:var(--f-text);font-size:1rem;font-variant-numeric:tabular-nums}
.vc-name{fill:var(--ink);font-weight:600}
.vc-count,.vc-tick,.vc-axis,.vc-note{fill:var(--ink-2)}
.vc-count{font-weight:500}
.vc-dose{fill:var(--ink);font-weight:600}
.vc-used{fill:var(--link)}
.vc-thrown{stroke:var(--ink-3);stroke-width:1}
.vc-left{fill:color-mix(in srgb,var(--link) 16%,var(--card-2));stroke:var(--link);stroke-width:1.5}
.vc-hatch-bg{fill:var(--card)}
.vc-hatch-line{stroke:var(--ink-2);stroke-width:1.6}
.vp-legend{display:flex;flex-wrap:wrap;gap:6px 20px;list-style:none;margin:0;padding:0;font-size:var(--fs-sm);color:var(--ink-2)}
.vp-legend li{display:inline-flex;align-items:center;gap:8px}
.vp-sw{flex:none;width:22px;height:14px;border-radius:5px}
.vp-sw.is-used{background:var(--link)}
.vp-sw.is-thrown{background:repeating-linear-gradient(135deg,var(--ink-2) 0 1.6px,var(--card) 1.6px 5px);box-shadow:inset 0 0 0 1px var(--ink-3)}
.vp-sw.is-left{background:color-mix(in srgb,var(--link) 16%,var(--card-2));box-shadow:inset 0 0 0 1.5px var(--link)}
/* the switch points: a line for each run of steps with one best size */
.vp-switch{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vp-switch li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-height:44px}
.vp-range{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:980px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font-size:var(--fs-sm);font-weight:600;font-variant-numeric:tabular-nums}
.vp-switch b,.vp-switch-one{font-family:var(--f-display);font-size:clamp(1.25rem,2vw,1.5rem);font-weight:700;line-height:1.2;letter-spacing:var(--tr-m)}
.vp-switch-one{margin:0 0 4px;font-weight:600}
.vp-cap{margin-top:12px;font-size:var(--fs-sm);line-height:1.4;color:var(--ink-2)}
/* lists the reader can open: every step, every vial */
.vp-det{border-top:1px solid var(--line)}
.vp-det[hidden]{display:none}
.vp-det > summary{display:flex;align-items:center;min-height:44px;color:var(--link);list-style:none}
.vp-det > summary::-webkit-details-marker{display:none}
.vp-det > summary::after{content:"\203A";margin-left:6px;transition:transform .25s var(--ease)}
.vp-det[open] > summary::after{transform:rotate(90deg)}
.vp-stepdetail,.vp-vials-size ol{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.vp-stepdetail > li{display:grid;gap:8px}
.vp-stepdetail h4,.vp-vials-size h4{margin:0;font-family:var(--f-display);font-size:1.1875rem;font-weight:700;line-height:1.25;letter-spacing:var(--tr-m)}
.vp-stepdetail h4 > span:not(.nowrap),.vp-vials-size h4 > span:not(.nowrap){margin-left:10px;font-family:var(--f-text);font-size:var(--fs-sm);font-weight:500;letter-spacing:0;color:var(--ink-2)}
.vp-stepdetail ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.vp-stepdetail li li{font-size:1.0625rem;line-height:1.4;color:var(--ink)}
.vp-stepdetail li li span{color:var(--ink-2)}
.vp-stepdetail .vp-lasts-u{display:block;margin-top:2px}
.vp-best{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:980px;background:color-mix(in srgb,var(--link) 8%,var(--card));color:var(--link);font-size:var(--fs-sm);font-style:normal;font-weight:600}
.vp-vials{display:grid;gap:22px;padding-top:6px}
.vp-vials-size{display:grid;gap:8px}
.vp-vials-size li{font-size:1.0625rem;line-height:1.4;color:var(--ink)}
/* the assumptions, closed until asked for */
.vp-math{margin-top:clamp(48px,7vw,80px);border-top:1px solid var(--line)}
.vp-math > summary{display:flex;align-items:center;min-height:52px;color:var(--link);font-size:1.1875rem;font-weight:500;list-style:none}
.vp-math > summary::-webkit-details-marker{display:none}
.vp-math > summary::after{content:"\203A";margin-left:8px;transition:transform .25s var(--ease)}
.vp-math[open] > summary::after{transform:rotate(90deg)}
.vp-math .rows{margin-top:6px}

/* ---------- footer (Apple style: small, gray, orderly) ---------- */
.site-foot{background:var(--bg-2);color:var(--ink-2);font-size:var(--fs-xs);line-height:1.5;padding-block:32px 40px}
.site-foot p{max-width:none;margin-bottom:10px}
.site-foot a{color:var(--ink)}
.site-foot p a{text-decoration:underline;text-underline-offset:3px} /* a link inside a sentence must not rely on colour alone */
.foot-rule{margin:20px 0;border:0;border-top:1px solid var(--line)}
.foot-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px}
.foot-nav h2{margin-bottom:8px;font-family:var(--f-text);font-size:var(--fs-xs);font-weight:600;letter-spacing:0;color:var(--ink)}
.foot-nav a{display:block;padding-block:4px;color:var(--ink-2)}
.foot-nav a:hover{color:var(--ink)}
.foot-cols{columns:2 180px;column-gap:24px}
.site-foot .appearance{max-width:420px}
@media (pointer:coarse){.foot-nav a{padding-block:10px}}

/* ---------- navigation aids ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin-bottom:8px;padding-top:4px;font-size:var(--fs-sm);color:var(--ink-2)}
/* On a phone a peptide's own name is left off the trail: the title is right below, and a long name wrapped the trail onto two lines */
/* the full trail at the foot of a peptide's page (Apple puts it there, not above the title) */
.crumbs-end{margin-top:clamp(40px,6vw,72px);padding-block:12px clamp(56px,8vw,96px);border-top:1px solid var(--line)}
/* the trail at the top of a peptide's page: left-aligned, small, gray, its last step dark. A phone has no trail at the top: the bar under the nav and the menu say where you are, and the trail closes the page,
   so the name and the molecule are higher on the first screen. */
.crumbs-top{margin:0;padding-top:8px}
@media (max-width:734px){.crumbs-top{display:none}}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2)}
@media (hover:hover){.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}}
.crumbs [aria-current]{color:var(--ink);font-weight:500;overflow-wrap:anywhere}
/* Home "Browse by goal": a full-width band of its own (white tiles on #F5F5F7, as Apple alternates its white and gray bands), so the two big headlines of the page are never one block.
   An anchor jump lands the band's top edge right under the nav (the negative margin cancels the 40px of scroll padding). */
.goals-band{background:var(--band);scroll-margin-top:-40px}
.goals{--goals-pad:clamp(48px,6vw,80px);padding-block:var(--goals-pad)}
.goals > .tt{margin-bottom:28px}
@media (min-width:761px){.goals > .tt{margin-bottom:40px}}
.goal-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.goal{position:relative;display:flex;flex-direction:column;height:100%;min-height:196px;padding:26px 24px 22px;border-radius:var(--r-lg);background:var(--band-tile);color:var(--ink);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.goal:hover{text-decoration:none}
@media (hover:hover){.goal:hover{transform:scale(1.02);box-shadow:0 22px 40px -26px rgba(0,0,0,.32)}}
/* The icon tile carries the goal's own tint (--tint, from categories.js): a soft wash of it under a line icon in a deeper step of it. The text stays monochrome. */
.goal-icon{display:grid;place-items:center;flex:none;width:60px;height:60px;margin-bottom:16px;border-radius:16px;background:color-mix(in srgb,var(--tint,#8E8E93) var(--chip-k),var(--chip-hi));color:color-mix(in srgb,var(--chip-ink) var(--chip-ink-k),var(--tint,#8E8E93))}
.goal-icon .icon{width:32px;height:32px;stroke-width:1.6}
.goal-text{display:flex;flex:1;flex-direction:column;min-width:0}
.goal-name{font-family:var(--f-display);font-size:1.3125rem;font-weight:600;line-height:1.2;letter-spacing:-.008em}
.goal-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin-top:6px;font-size:1rem;line-height:1.35;color:var(--ink-2)}
/* The foot: the count and the chevron share one line, so they always sit on the same baseline (the chevron is a drawn shape, not a font glyph). */
.goal-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px}
.goal-count{font-size:1rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.goal-go{flex:none;width:9px;height:16px;fill:none;stroke:var(--ink-2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
@media (hover:hover){.goal:hover .goal-go{transform:translateX(3px)}}
@media (max-width:999px){.goal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.goal{min-height:0;padding:22px 20px 18px}}
/* phones: one column of list rows, which are easier to scan and tap, set the way iOS Settings sets a row: the icon, the goal and what it holds on the left, and the number of peptides
   at the right beside the chevron ("9 ›", in the gray of a detail value). The name and its line then stand alone, and a row is about 100px, not 125. The word "peptides" after the number is kept for a screen reader. */
@media (max-width:600px){
  .goal-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .goal{display:grid;grid-template-columns:52px minmax(0,1fr) auto;grid-template-areas:"icon text count";align-items:center;gap:0 14px;min-height:0;padding:16px;border-radius:var(--r)}
  .goal-icon{grid-area:icon;width:52px;height:52px;margin:0;border-radius:14px}
  .goal-icon .icon{width:28px;height:28px;stroke-width:1.75}
  .goal-text{grid-area:text;flex:none}
  .goal-desc{margin-top:2px;-webkit-line-clamp:3;text-wrap:pretty}
  .goal-foot{grid-area:count;margin:0;padding:0;gap:8px}
  .goal-count{color:var(--ink-3)}
  .goal-unit{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
.all-head{padding-top:clamp(64px,9vw,112px);padding-bottom:20px}
.mini-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
/* The row's text sits exactly on the page's left edge, like the heading above it. The hover tint is a pseudo-element
   reaching a little past the text, so it never pushes the text off that edge. */
.mini-list li{display:flex} /* in two columns the rows of a pair are as tall as the taller of them, so their rules line up */
.mini-list a{position:relative;isolation:isolate;display:flex;flex:1;align-items:flex-start;gap:16px;min-height:72px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.mini-list a::before{content:"";position:absolute;z-index:-1;inset:0 -12px;border-radius:12px;transition:background-color .2s var(--ease)}
.mini-list a:hover{text-decoration:none}
@media (hover:hover){.mini-list a:hover::before{background:var(--bg-2)}}
/* the count (or label) and the chevron sit on the name's line, however many lines the description takes */
.mini-list a::after{content:"\203A";flex:none;margin-top:2px;font-size:1.5rem;line-height:1;color:var(--ink-2);transition:transform .25s var(--ease)}
.mini-list a:hover::after{transform:translateX(3px)}
.mini-text{display:grid;gap:2px;flex:1;min-width:0}
.mini-name{font-family:var(--f-display);font-size:1.1875rem;font-weight:600;letter-spacing:var(--tr-m)}
.mini-sub{font-size:1rem;color:var(--ink-2)}
.mini-ev{flex:none;margin-top:3px;font-size:var(--fs-sm);font-weight:600;color:var(--ev)}
.mini-count{flex:none;margin-top:3px;font-size:var(--fs-sm);color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (min-width:761px){.mini-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px}}
@media (max-width:600px){.mini-ev{display:none}}
.key{margin-top:22px}
.key summary{display:inline-flex;align-items:center;min-height:44px;color:var(--link);list-style:none}
.key summary::-webkit-details-marker{display:none}
.key summary::after{content:"\203A";margin-left:6px;transition:transform .25s var(--ease)}
.key[open] summary::after{transform:rotate(90deg)}
.key ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px;max-width:62ch}
.key li{display:flex;gap:10px;font-size:1rem;line-height:1.45;color:var(--ink)}
.key i{flex:none;width:9px;height:9px;margin-top:.5em;border-radius:50%;background:var(--b)}
.to-top{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:25;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 12px;border:0;border-radius:980px;background:var(--ink);color:var(--bg);box-shadow:0 8px 24px -6px rgba(0,0,0,.4),0 0 0 1px color-mix(in srgb,var(--bg) 18%,transparent);font:inherit;font-size:var(--fs-sm);font-weight:500;transition:opacity .2s var(--ease),visibility .2s}
.to-top svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.to-top:hover{opacity:.88}}
.to-top[hidden]{display:none}
/* while the pill would sit on a segmented control or a dotted word (site.js says so), it steps aside */
.to-top.is-over{opacity:0;visibility:hidden}
/* on a phone it is a small "Top" pill (the words before "Top" are kept for a screen reader); it shows only after the reader has scrolled UP a good way, so it is there when they mean to go back */
@media (max-width:760px){
  .to-top{justify-content:center;height:44px;padding:0 18px 0 14px}
  .to-top .tt-pre{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .to-top .tt-word{display:inline-block}
  .to-top .tt-word::first-letter{text-transform:uppercase}
}

/* ---------- jargon: tap a term to read its definition ---------- */
.term{display:inline;margin:0;padding:0;border:0;border-radius:3px;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:underline dotted;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--link) 70%,transparent);text-underline-offset:4px;cursor:help}
@media (hover:hover){.term:hover{text-decoration-color:var(--link);background:color-mix(in srgb,var(--link) 10%,transparent)}}
.term.is-open{text-decoration-color:var(--link);background:color-mix(in srgb,var(--link) 24%,transparent)}
.def{width:min(440px,calc(100% - 32px));margin:auto;padding:24px;border:0;border-radius:var(--r);background:var(--pop-bg);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.5);opacity:1;translate:0 0;transition:opacity .25s var(--ease),translate .25s var(--ease),overlay .25s allow-discrete,display .25s allow-discrete}
@starting-style{.def:popover-open{opacity:0;translate:0 16px}}
.def::backdrop,.search-sheet::backdrop{background:rgba(0,0,0,.4)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .def::backdrop,:root:not([data-theme="light"]) .search-sheet::backdrop{background:rgba(0,0,0,.62)}}
:root[data-theme="dark"] .def::backdrop,:root[data-theme="dark"] .search-sheet::backdrop{background:rgba(0,0,0,.62)}
.def.is-placing{visibility:hidden}
/* a wide screen: the definition is a light note under the word (site.js places it), not a modal over the page: no dimming, it never covers the word, and a click anywhere else closes it, so
   its one action is the link to the glossary */
@media (min-width:761px){
  .def{width:min(360px,calc(100% - 24px));padding:20px 22px;overflow:visible;box-shadow:0 18px 50px -14px rgba(0,0,0,.4),0 0 0 1px var(--hair)}
  /* a pointer at the word: a small square turned on its corner, in the note's own surface, on the edge that faces the word (site.js sets --ptr and .is-above) */
  .def::before{content:"";position:absolute;top:-6px;left:var(--ptr,24px);width:12px;height:12px;background:var(--pop-bg);box-shadow:-1px -1px 0 0 var(--hair);transform:rotate(45deg)}
  .def.is-above::before{top:auto;bottom:-6px;box-shadow:1px 1px 0 0 var(--hair)}
  .def::backdrop{background:transparent!important}
  .def .def-actions .btn{display:none}
  .def-term{font-size:1.375rem}
}
.def-label{font-size:var(--fs-2xs);font-weight:600;color:var(--ink-2)}
.def-term{margin-top:2px;font-family:var(--f-display);font-size:1.625rem;font-weight:700;line-height:1.15;letter-spacing:var(--tr-l)}
.ev-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.ev-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 12px;align-items:baseline;font-size:1.0625rem;line-height:1.4}
.ev-list i{width:10px;height:10px;border-radius:50%;background:var(--ev)}
.ev-list b{display:block;font-weight:600;color:var(--ev)}
.ev-list span{color:var(--ink-2)}
.def-text{margin-top:10px;font-size:1.0625rem;line-height:1.55}
.def-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
@media (max-width:760px){
  .def{inset:auto 0 0 0;width:100%;max-width:none;margin:0;border-radius:24px 24px 0 0;padding:26px 20px calc(24px + env(safe-area-inset-bottom))}
  /* a grab handle: the sheet can be swiped down to dismiss it (site.js) */
  .def::before{content:"";display:block;width:36px;height:5px;margin:-12px auto 18px;border-radius:3px;background:var(--line)}
}

/* ---------- site search: the header magnifier opens this in place, on any page ---------- */
.search-sheet{padding:0;border:0;background:var(--bg);color:var(--ink)}
.search-sheet[open]{display:flex;flex-direction:column}
.ss-top{display:flex;flex:none;align-items:center;gap:6px;padding:8px 8px 8px 16px;border-bottom:1px solid var(--hair)}
.ss-field{position:relative;flex:1;min-width:0}
.ss-field > svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round;pointer-events:none}
.ss-field input{width:100%;height:48px;padding:0 44px 0 44px;border:0;border-radius:var(--r-sm);background:var(--field);color:var(--ink);font:inherit;font-size:1.1875rem;letter-spacing:-.011em}
.ss-field input::placeholder{color:var(--ink-2)}
.ss-field input::-webkit-search-cancel-button,.ss-field input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.ss-field input:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 45%,transparent)}
.ss-field .search-clear{height:48px}
.ss-cancel{flex:none;min-height:44px;padding:0 10px;border:0;background:none;color:var(--link);font:inherit;font-size:1.0625rem}
.ss-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 32px}
.ss-group h3{margin:18px 12px 4px;font-family:var(--f-text);font-size:var(--fs-xs);font-weight:600;letter-spacing:0;color:var(--ink-2)}
.ss-list{list-style:none;margin:0;padding:0}
.ss-item{display:flex;flex-direction:column;justify-content:center;gap:1px;min-height:56px;padding:9px 12px;border-radius:12px;color:var(--ink)}
.ss-item:hover{background:var(--card);text-decoration:none}
.ss-item:focus-visible{outline-offset:-2px;background:var(--card)}
.ss-name{font-size:1.0625rem;font-weight:600;letter-spacing:-.011em}
.ss-sub{font-size:var(--fs-sm);line-height:1.35;color:var(--ink-2)}
.ss-sub mark,.ss-name mark{background:none;color:inherit;font-weight:700}
.ss-empty{margin:28px 12px;font-size:1.0625rem;color:var(--ink-2)}
@media (max-width:760px){
  .search-sheet{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0}
}
@media (min-width:761px){
  .search-sheet{width:min(680px,calc(100% - 32px));max-height:min(640px,calc(100dvh - 120px));margin:72px auto auto;border-radius:var(--r-lg);box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
}

/* ---------- phones: compact catalog cards, static filter bar ---------- */
@media (max-width:760px){
  /* nothing people read is smaller than 16px on a phone: the three small sizes all become 16px */
  :root{--lnav-h:48px;--bar-h:0px;--fs-2xs:1rem;--fs-xs:1rem;--fs-sm:1rem}
  /* Apple's rhythm on a phone: about 40px of air over the title, 12 from the title to the line under it, 24 on to the buttons, and the picture about 48 under them */
  .hero-inner{gap:12px;padding-block:40px 0}
  .hero-cta{margin-top:12px}
  .hero-title{font-size:min(10vw,3.25rem)}
  .hero-lede{max-width:30ch;font-size:1.1875rem;line-height:1.35}
  .catalog{padding-bottom:88px}
  .catalog-bar{position:static}
  .card{display:grid;grid-template-columns:minmax(0,1fr) 112px;grid-template-areas:"eyebrow eyebrow" "title art" "sub art" ". art" "points points" "foot foot";grid-template-rows:auto auto auto 1fr auto auto;column-gap:16px;padding:22px 20px 20px;border-radius:var(--r)}
  .card-eyebrow{grid-area:eyebrow;font-weight:500} /* 16px still, but a step lighter, so the title is the one loud line on the card */
  .card-title{grid-area:title;font-size:1.5rem}
  .card-sub{grid-area:sub;align-self:start}
  .card-art{grid-area:art;align-self:start;width:112px;height:112px;margin:0;padding:4px;border-radius:18px}
  .card-points{grid-area:points;margin-top:16px}
  .card-foot{grid-area:foot;padding-top:16px}
  .cat-section{--sec-pad:56px}
  .section-head{margin-bottom:22px}
  .localnav-inner{min-height:48px}
  /* a two-tone headline keeps its gray half as a plain sub-line in the text face (regular weight, no tracking), so it reads as secondary
     instead of as a second headline in dim ink */
  .tt > span:not(.nowrap){display:block;margin-top:6px;font-family:var(--f-text);font-size:1.1875rem;font-weight:400;letter-spacing:0;line-height:1.4;color:var(--ink-2)}
}
/* A peptide page pins only its local nav, as Apple's product pages do: the global nav (and the menu button in it)
   scrolls away with the page, so the reading window is about 50px taller at every size. */
html:has(.localnav) .gnav:not([data-open]){position:relative}
html:has(.localnav) .localnav{top:0}
html:has(.localnav){scroll-padding-top:calc(var(--lnav-h) + 16px)}
/* phones and small tablets: solid bars (page text never shows through and collides with their labels; only desktop
   keeps the frosted glass) */
@media (max-width:833px){
  .gnav,.localnav,.catalog-bar,.catalog-bar.is-stuck{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* A browser without color-mix() (before 2023) would drop every color derived with it, and a value with var() in it does not fall back to an
   earlier declaration, so the imagery gets plain colors here instead: the drawings keep their bonds and caps, the panels their tint-free wash. */
@supports not (color:color-mix(in srgb,red,blue)){
  .card-art{--bond:#D2D2D7;background:var(--art-hi)}
  .shot{--bond:var(--line);--bond-deep:var(--line);background:var(--card);border-radius:var(--r-lg)}
  .goal-icon{background:var(--bg);color:var(--ink)}
  .is-optional .ramp-bar,.ramp:not(.is-rows) .is-optional .ramp-bar{background:var(--bar-c);opacity:.45}
  .ramp-sw.is-optional{background:var(--bar);opacity:.45}
}

/* ---------- motion: subtle scroll reveal where supported ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .card,.promo-tile{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
}
@keyframes rise{from{opacity:.5;translate:0 24px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ---------- catalog evidence control and benefit evidence labels ---------- */
.has-dark-hero .bar-inner{grid-template-columns:minmax(0,420px) minmax(180px,240px) minmax(0,1fr);grid-template-areas:"search evidence count" "pills pills pills"}
.has-dark-hero .evidence-filter{grid-area:evidence;display:none;align-items:center;gap:10px;min-width:0}
.js .has-dark-hero .evidence-filter{display:flex}
.has-dark-hero .evidence-filter label{flex:none;font-size:var(--fs-sm);color:var(--ink-2)}
.has-dark-hero .evidence-filter select{width:100%;min-width:0;min-height:44px;padding:0 34px 0 12px;border:0;border-radius:var(--r-sm);background:var(--field);color:var(--ink);font:inherit;font-size:var(--fs-sm)}
.has-dark-hero .evidence-filter select:focus-visible{outline:3px solid color-mix(in srgb,var(--ring) 55%,transparent);outline-offset:2px}
.card-point-marker{flex:none;width:5px;height:5px;margin:7px 2px 0;border-radius:50%;background:var(--ink-3)}
.card-point-copy{min-width:0}
.card-point-basis{display:inline-block;margin-left:5px;padding:2px 6px;border-radius:4px;background:var(--field);color:var(--ink-2);font-size:var(--fs-xs);line-height:1.35;vertical-align:baseline}
/* On a tablet the search, the evidence and the count do not fit in one row: the search (up to 420px) and the evidence (up to 240px) with their gaps are 700px, and between the margins there are 691px at 768px, so the
   count was left a column of no width and its words spilled out of it, past the right edge of the page (22px at the default text size, 37px at the largest), with the button's words one to a line. Up to 899px it
   goes under the pills, where it is on a phone, and the search takes the rest of its row; from 900px the count has a column of 110px or more and wraps its words in it, as it did. */
@media (min-width:761px) and (max-width:899px){
  .has-dark-hero .bar-inner{grid-template-columns:minmax(0,1fr) minmax(180px,240px);grid-template-areas:"search evidence" "pills pills" "count count"}
}
@media (max-width:760px){
  .has-dark-hero .bar-inner{grid-template-columns:minmax(0,1fr) minmax(180px,auto);grid-template-areas:"search evidence" "pills pills" "count count"}
  .has-dark-hero .evidence-filter label{display:none}
}
@media (max-width:440px){
  .has-dark-hero .bar-inner{grid-template-columns:minmax(0,1fr);grid-template-areas:"search" "evidence" "pills" "count"}
  .has-dark-hero .evidence-filter label{display:block}
}

/* Reading controls remain in normal flow so they do not cover sticky navigation (on the home page, where the nav is pulled up over the hero, they are laid over the top of the hero: see the hero). */
.reading-toolbar{border-bottom:1px solid var(--hair);background:var(--bg)}
.reading-toolbar .wrap{display:flex;justify-content:flex-end}
.reading-toolbar button{min-height:44px;padding:8px 0 8px 16px;color:var(--link);font:inherit;font-size:var(--fs-sm);background:none;border:0;cursor:pointer}
.reading-toolbar button span{font-weight:700;margin-right:6px}
.has-dark-hero .reading-toolbar{background:#161617;border-color:#38383a}
.has-dark-hero .reading-toolbar button{color:#a1c9ff}
.reading-sheet{box-sizing:border-box;width:min(34rem,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:24px;border:1px solid var(--hair);border-radius:var(--r);color:var(--ink);background:var(--bg)}
.reading-sheet::backdrop{background:rgb(0 0 0 / .55)}
.reading-sheet-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.reading-sheet h2{font-size:1.5rem}
.reading-sheet-head button{min-height:44px;padding:8px 16px;border:1px solid var(--hair);border-radius:8px;color:var(--link);background:var(--card);font:inherit;cursor:pointer}
.reading-sheet>p{margin:16px 0 24px;color:var(--ink-2)}
.reading-sheet .appearance{margin-top:16px}
.reading-detail{margin-block:24px;border-block:1px solid var(--hair);padding-block:8px}
.reading-detail summary{min-height:44px;padding:10px 0;cursor:pointer;font-weight:600;color:var(--link)}
.reading-detail p{margin-block:16px;line-height:1.65}
.evidence-dimensions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:24px;margin-block:24px}
.evidence-dimensions>div{background:var(--card);padding:24px;border-radius:var(--r)}
.evidence-dimensions dt{font-weight:600;margin-bottom:12px}
.evidence-dimensions dd{margin:0;color:var(--ink-2)}
.shot figcaption{min-width:0;overflow-wrap:anywhere}
.shot-schematic{white-space:normal}
@media(max-width:760px){.ramp-step{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ramp-track{flex-wrap:wrap}.ramp-dose{white-space:normal}}

/* Large reading sizes: keep grid tracks and references inside their content column. */
.prose{grid-template-columns:minmax(0,1fr)}
.prose a{overflow-wrap:anywhere}
.calc-result,.calc-draw,.calc-facts{grid-template-columns:minmax(0,1fr);min-width:0}
.calc-draw b{overflow-wrap:anywhere}
.mini-text{grid-template-columns:minmax(0,1fr);overflow-wrap:anywhere}
.stack-chips .pill{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.tile-eyebrow{min-width:0;overflow-wrap:anywhere}
.pr-page .page-hero .page-meta>span{white-space:normal}
.pr-page .page-meta>*{min-width:0;overflow-wrap:anywhere}
.diy-refs{flex-wrap:wrap;max-width:100%;white-space:normal}
.prose a .nowrap{white-space:normal;overflow-wrap:anywhere}
.page-end>p.more{white-space:normal;overflow-wrap:anywhere}
.research-hub .tt,.stack-name,.rt.math h3{overflow-wrap:anywhere}
.stack-name .nowrap,.mini-line .nowrap{white-space:normal;overflow-wrap:anywhere}
.rt-grid.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}

/* Keep the calculator's number and unit together at enlarged reading sizes. */
.calc-result{container-type:inline-size}
@supports(font-size:1cqi){.calc-out:not(.is-over) .calc-draw b{font-size:min(clamp(3rem,8vw,4.75rem),22cqi)}}

/* Beginner and dated claim-review presentation. */
.beginner-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;padding-block:32px}
.beginner-choices a{display:flex;flex-direction:column;gap:8px;padding:24px;border:1px solid var(--line,#8885);border-radius:18px;color:inherit;text-decoration:none}
.beginner-choices a:hover{background:var(--surface,#8881)}
.beginner-choices span,.review-scope{font-size:1rem;line-height:1.6}
.review-scope{margin-block:16px;max-width:75ch}
/* A blend card sticks beside its long community block on a laptop (private.css, .blend-entry): its review note stays small so the tallest card still fits a 720px-high screen (tools/qa-sticky.mjs finds that). */
.blend .review-scope{margin-block:8px;font-size:var(--fs-xs);line-height:1.45}
.beginner-page .prose{max-width:820px;margin-inline:auto}
.beginner-page .prose section{padding-block:24px;scroll-margin-top:100px}
.beginner-page dt{font-weight:600;margin-top:18px}
.beginner-page dd{margin:6px 0 18px}
.review-claims{list-style:none;padding:0;display:grid;gap:24px}
.review-claims-title{margin-top:48px;font-size:1.5rem;font-weight:700;letter-spacing:var(--tr-m)}
.review-claim{padding:28px;border:1px solid var(--line,#8885);border-radius:18px;scroll-margin-top:130px;min-width:0}
.review-claim h3,.review-claim h4{font-size:1.3rem;margin-block:12px}
.review-claim p{line-height:1.65;margin-block:14px}
.review-finding{font-size:1.15rem}
.review-sources{padding-left:20px;line-height:1.6;overflow-wrap:anywhere}
.review-original{margin-block:24px;padding:18px;border:1px solid var(--line,#8885);border-radius:12px}
.review-original summary{min-height:44px;padding-block:10px;cursor:pointer;font-weight:600;line-height:1.5}
.review-original p{line-height:1.65;margin-top:16px}
.card .review-card-note{font-size:1rem;line-height:1.5;padding:0;display:block}
.card .card-eyebrow{white-space:normal;line-height:1.5}
.card .card-sub{min-height:3em}
.review-unknown{border-left:3px solid currentColor;padding-left:14px}
.mini-ev{flex:0 1 42%;max-width:42%;white-space:normal;overflow-wrap:anywhere;text-align:right}
[data-synthesis][hidden]{display:none!important}
@media(max-width:600px){.review-claim{padding:20px}.beginner-choices{grid-template-columns:1fr}.review-original{padding:14px}}