/* ---------- Brand typeface: IBM Plex Sans (SIL Open Font License 1.1) ----------
 * Self-hosted so no third-party request is made: keeps font-src 'self' and avoids sending visitor IPs to a CDN
 * (a GDPR issue for EU visitors). Variable weight 100-700; headings set at 800 clamp to 700.
 * Subsets load on demand: latin always, latin-ext and greek only when those characters appear (e.g. Thymosin β4). */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url(/fonts/plex-sans-greek.woff2) format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url(/fonts/plex-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url(/fonts/plex-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --navy: #0b2540;                /* brand navy, taken from the logo */
  --navy-2: #17436e;
  --navy-3: #0e2c4b;
  /* Brand teal from the logo's apex node. Graphic use only — against white it sits at about 1.9:1,
     far under the 4.5:1 needed for body text, so text teal uses --signal instead. */
  --teal: #3fd0bf;
  --ink: #0f1f2e;
  --muted: #566b7d;
  --line: #dde5ec;
  --line-soft: #e9eff4;
  --bg: #f4f7fa;
  --card: #ffffff;
  --accent: #0a63e8;
  --accent-ink: #ffffff;
  --accent-hover: #0a52c2;
  --accent-soft: #eaf2fe;
  --signal: #0e8a7d;              /* scientific teal, used sparingly beside the blue */
  --ok: #0b7a3e;
  --ok-bg: #e6f5ec;
  --warn-bg: #ffd84d;
  --warn-ink: #1a1400;
  --radius: 14px;
  /* Layered shadows read as real depth; a hairline ring keeps edges crisp on light surfaces */
  --ring: 0 0 0 1px rgba(13,39,67,.07);
  --shadow: var(--ring), 0 1px 2px rgba(8,26,44,.04), 0 4px 10px -2px rgba(8,26,44,.05), 0 12px 28px -8px rgba(8,26,44,.08);
  --shadow-lg: var(--ring), 0 2px 4px rgba(8,26,44,.04), 0 10px 24px -6px rgba(8,26,44,.09), 0 28px 56px -16px rgba(8,26,44,.14);
  --font: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); line-height: 1.6; font-size: 16px;
  /* very subtle cool wash so large light areas aren't dead flat */
  background: var(--bg);
  background-image: radial-gradient(1200px 600px at 50% -200px, #ffffff 0%, rgba(255,255,255,0) 70%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1;
}
/* Numerals line up in prices, spec tables and data readouts */
.price-now, .tier-price, .co-totals, .specs dd, .data-table td, .coa-meta dd, .calc-out, .mono, .co-meta dd, .from strong
  { font-variant-numeric: tabular-nums; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid #ffb300; outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; background: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; }
/* Regulatory strip. Previously a yellow caution bar, which made a legal footnote the loudest thing on every
   page. The wording is unchanged and it still sits above the fold; it now reads as a masthead rule — 8.4:1
   contrast, so it is comfortably legible, just no longer shouting over the brand. */
.compliance { background: #061729; color: #9fb6cc; font-weight: 600; font-size: 11.5px; letter-spacing: .085em; text-transform: uppercase; text-align: center; padding: 7px 16px; min-height: 30px; box-shadow: inset 0 -1px 0 rgba(255,255,255,.07); }
.nav { color: #fff; background: linear-gradient(180deg, var(--navy-3) 0%, var(--navy) 100%); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 30px -12px rgba(8,26,44,.5); }
.nav .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.logo { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; }
.logo:hover { color: #fff; }
.logo-mark { display: block; flex: none; }
.logo-word { display: block; width: auto; height: 20px; }
/* "Peptides" is live text beside the supplied wordmark artwork, not baked into it: crisp at any size, no
   extra request, and it can drop out on very narrow screens. Tinted toward the mark's teal apex so the
   three parts read as one lockup rather than a logo with a word stuck next to it. */
.logo-suffix { align-self: center; padding-top: 2px; font-size: 16px; font-weight: 400; letter-spacing: -.005em; color: #5fd8c6; white-space: nowrap; }
.logo:hover .logo-suffix, .footer-brand:hover .logo-suffix { color: #c4e9e1; }
/* Measured, not guessed: at 390px the lockup plus the cart and menu buttons come to ~285px of the 358px
   available, so the word stays. Only genuinely small handsets drop it. */
@media (max-width: 345px) { .logo-suffix { display: none; } }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; flex: 1; }
.nav-links > li { position: relative; }
.nav-links a, .nav-links button.dd-toggle { white-space: nowrap; color: #e6eef7; text-decoration: none; font: inherit; font-size: 14.5px; font-weight: 600; background: none; border: 0; padding: 10px 12px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nav-links a:hover, .nav-links button.dd-toggle:hover, .nav-links button[aria-expanded="true"] { background: var(--navy-2); color: #fff; }
.dd-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 6px; list-style: none; margin: 0; display: none; }
.dd-menu.open { display: block; }
.dd-menu a { display: block; color: var(--ink); padding: 9px 12px; border-radius: 6px; font-weight: 500; }
.dd-menu a:hover { background: var(--bg); color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.cart-btn { position: relative; background: var(--navy-2); color: #fff; border: 0; width: 44px; height: 44px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; }
.cart-btn:hover { background: #1b4470; }
.cart-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-ink); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.site-search { display: flex; align-items: center; height: 40px; background: var(--navy-2); border: 1.5px solid #2a4f78; border-radius: 10px; overflow: hidden; }
.site-search:focus-within { border-color: #ffb300; }
.site-search input { width: 190px; height: 100%; border: 0; background: transparent; color: #fff; font: inherit; font-size: 14px; padding: 0 4px 0 12px; }
.site-search input::placeholder { color: #a9bccf; }
.site-search input:focus-visible { outline: none; }
.site-search button { width: 40px; height: 100%; border: 0; background: none; color: #e6eef7; cursor: pointer; display: grid; place-items: center; }
.site-search button:hover { color: #fff; background: #1b4470; }
.menu-btn { display: none; background: none; border: 0; color: #fff; width: 44px; height: 44px; cursor: pointer; }

/* ---------- Breadcrumb ---------- */
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 0; margin: 0; font-size: 13.5px; color: var(--muted); }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; color: #8796a6; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; color: var(--ink); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; padding-bottom: 40px; }
.card { position: relative; background: var(--card); border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
/* hairline top highlight: catches the light like a physical card edge */
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 40%); mix-blend-mode: overlay; }
.media { padding: 24px; position: sticky; top: 112px; align-self: start; }
.media-stage { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; background: radial-gradient(circle at 50% 38%, #ffffff 0%, #e9eff5 70%); display: grid; place-items: center; overflow: hidden; }
.zoom-layer { position: absolute; inset: 0; display: grid; place-items: center; transform-origin: var(--zx, 50%) var(--zy, 50%); transition: transform .3s ease; }
.zoom-layer .view { grid-area: 1 / 1; opacity: 0; transition: opacity .35s ease, transform .4s ease; pointer-events: none; }
.zoom-layer .view.active { opacity: 1; }
.view-vial { height: 88%; width: auto; transform-origin: 52% 57%; }
.view-box { width: 84%; height: auto; }
.media-stage.closeup .view-vial { transform: scale(1.9); }
.zoom-hint { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(11,31,51,.78); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px; opacity: .85; transition: opacity .2s; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .media-stage.zoomable { cursor: zoom-in; }
  .media-stage.zoomable:hover .zoom-layer { transform: scale(1.75); }
  .media-stage.zoomable:hover .zoom-hint { opacity: 0; }
}
@media (hover: none), (pointer: coarse) { .zoom-hint { display: none; } }
.purity-badge { position: absolute; z-index: 2; top: 14px; left: 14px; background: var(--ok); color: #fff; font-weight: 800; font-size: 13px; padding: 7px 12px; border-radius: 999px; display: inline-flex; gap: 6px; align-items: center; }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.thumbs button { position: relative; border: 2px solid var(--line); border-radius: 10px; background: radial-gradient(circle at 50% 40%, #fff 0%, #eaf0f6 80%); padding: 6px 6px 22px; cursor: pointer; aspect-ratio: 1 / 1; overflow: hidden; transition: border-color .15s, transform .15s, box-shadow .15s; }
.thumbs button:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(11,31,51,.1); }
.thumbs button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,108,255,.15); }
.thumbs svg { width: 100%; height: 100%; }
.thumbs span { position: absolute; left: 0; right: 0; bottom: 4px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.thumbs button[aria-pressed="true"] span { color: var(--accent); }
.coa-link { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1.5px dashed var(--ok); border-radius: 10px; color: var(--ok); font-weight: 700; text-decoration: none; background: var(--ok-bg); }
.coa-link:hover { color: #075c2e; background: #d7efe0; }

.buy { padding: 4px 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; text-transform: uppercase; font-size: 11.5px; font-weight: 800; letter-spacing: .11em; color: var(--accent); margin: 0 0 10px; }
/* Section kickers carry the brand gradient — the one place teal can run at full strength, since it is a
   graphic rule and not text (teal on white is ~1.9:1, far under the 4.5:1 body-text floor). */
.eyebrow::before { content: ""; width: 24px; height: 2.5px; border-radius: 2px; background: linear-gradient(90deg, var(--teal), var(--accent)); opacity: 1; }
h1 { font-family: var(--display); font-size: clamp(27px, 3.3vw, 38px); line-height: 1.12; margin: 0 0 12px; letter-spacing: -.028em; font-weight: 800; text-wrap: balance; }
.subtitle { font-family: var(--mono); font-size: 13.5px; color: var(--muted); background: #eaf0f6; padding: 8px 12px; border-radius: 8px; display: inline-block; margin: 0 0 18px; }
.rating { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.price-now { font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin: 0; min-height: 44px; }
.price-now small { font-size: 15px; font-weight: 600; color: var(--muted); }
.tier-matrix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 18px; }
.tier { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 14px 12px; text-align: left; font: inherit; color: var(--ink); background: #fff; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tier:hover { border-color: #9cbcf0; transform: translateY(-1px); }
.tier.active { border-color: var(--accent); background: #f2f7ff; box-shadow: 0 0 0 3px rgba(10,108,255,.14); }
.tier-label { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.tier.active .tier-label { color: var(--accent); }
.tier-price { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.tier-price small { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.tier-save { font-size: 12px; font-weight: 800; color: var(--ok); background: var(--ok-bg); padding: 2px 8px; border-radius: 999px; }
.tier-save.base { color: var(--muted); background: #eef2f6; }
.tier-sub { font-size: 12px; color: var(--muted); }
.tier-ribbon { position: absolute; top: -10px; right: 10px; background: var(--warn-bg); color: var(--warn-ink); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; }

/* Storage & purity status badges */
.status-badges { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sbadge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 999px; font-size: 13px; border: 1px solid; }
.sbadge strong { font-weight: 800; }
.sbadge svg { flex: none; }
.sb-frozen { background: #e8f2ff; border-color: #c6dcfb; color: #0b4fb3; }
.sb-fridge { background: #e6f6f4; border-color: #bfe6e1; color: #0b6b62; }
.sb-purity { background: var(--ok-bg); border-color: #bfe3cc; color: var(--ok); }
.status-badges.compact { margin-bottom: 14px; }
.status-badges.compact .sbadge { font-size: 12.5px; padding: 5px 10px 5px 8px; }
.sku-line { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.stock { display: flex; align-items: center; gap: 10px; color: var(--ok); font-weight: 700; margin: 0 0 18px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(11,122,62,.18); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(11,122,62,.05); } }
.buy-form { padding: 20px; }
.qty-row { display: flex; gap: 12px; align-items: stretch; margin-bottom: 16px; }
.qty { display: inline-flex; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; height: 52px; }
.qty button { width: 46px; border: 0; background: #f0f4f8; font-size: 22px; cursor: pointer; color: var(--ink); }
.qty button:hover { background: #e2e9f0; }
.qty input { width: 64px; border: 0; text-align: center; font: inherit; font-size: 18px; font-weight: 700; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.line-total { display: flex; flex-direction: column; justify-content: center; font-size: 13px; color: var(--muted); }
.line-total strong { font-size: 20px; color: var(--ink); min-width: 110px; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--line); border-radius: 10px; background: #fafbfc; font-size: 14px; cursor: pointer; margin-bottom: 16px; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
.check.error { border-color: #c62828; background: #fdecec; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 11px; font: inherit; font-weight: 700; letter-spacing: -.005em; cursor: pointer; text-decoration: none; transition: transform .12s ease, box-shadow .18s ease, background .15s ease, border-color .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { width: 100%; height: 56px; font-size: 17px; color: var(--accent-ink);
  background: linear-gradient(180deg, #2a7bf4 0%, var(--accent) 55%, #0a58d2 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(8,26,44,.18), 0 8px 20px -6px rgba(10,99,232,.52); }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-primary[aria-disabled="true"] { background: #5b7290; box-shadow: none; cursor: not-allowed; }
.btn-ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--line); padding: 11px 16px; box-shadow: 0 1px 2px rgba(8,26,44,.05); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.form-msg { min-height: 22px; margin: 10px 0 0; font-size: 14px; color: #c62828; font-weight: 600; }

::selection { background: #b9efe7; color: var(--ink); }

/* ---------- Sections ---------- */
section.block { padding: 48px 0; }
/* Alternating wash. Every section used to be white cards on the same grey, so nothing read as a distinct
   band and the page felt like one long scroll. A near-white panel on every other section gives the page a
   rhythm without adding borders or changing a single element's position. */
section.block:nth-of-type(even) { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.92)); box-shadow: inset 0 1px 0 var(--line-soft), inset 0 -1px 0 var(--line-soft); }
h2 { font-family: var(--display); font-size: clamp(22px, 2.4vw, 29px); margin: 0 0 8px; letter-spacing: -.02em; font-weight: 800; line-height: 1.22; text-wrap: balance; }
h3 { letter-spacing: -.012em; }
.lead { color: var(--muted); margin: 0 0 24px; font-size: 16.5px; line-height: 1.65; max-width: 72ch; }

/* COA viewer */
.coa { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; overflow: hidden; }
.coa-side { padding: 24px; background: #f2f6fa; border-right: 1px solid var(--line); }
.coa-side label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.coa-side select { width: 100%; height: 46px; font: inherit; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; }
.coa-meta { margin: 18px 0; display: grid; gap: 0; font-size: 14px; }
.coa-meta div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); }
.coa-meta dt { color: var(--muted); }
.coa-meta dd { margin: 0; font-weight: 700; font-family: var(--mono); font-size: 13.5px; }
.coa-actions { display: grid; gap: 10px; }
.btn-pdf { height: 48px; font-size: 15px; text-align: center; }
.btn-pdf.pdf-missing { background: #fff; color: var(--ink); border: 1.5px dashed #9aa9b8; box-shadow: none; }
.btn-pdf.pdf-missing:hover { border-color: var(--accent); color: var(--accent); }
.pdf-note { margin: 0; min-height: 0; font-size: 13px; color: #8a5300; }
.pdf-note:empty { display: none; }
.coa-main { padding: 24px; }
.coa-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.purity-big { font-size: 40px; font-weight: 800; color: var(--ok); line-height: 1; }
.chart-box { width: 100%; aspect-ratio: 720 / 260; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.chart-box svg { width: 100%; height: 100%; }
.coa-tests { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; }
.coa-tests th, .coa-tests td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.coa-tests th { color: var(--muted); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.pass { color: var(--ok); font-weight: 800; }

/* Tabs */
.tabs { overflow: hidden; }
.tablist { display: flex; border-bottom: 1px solid var(--line); background: #f2f6fa; overflow-x: auto; }
.tablist button { flex: none; font: inherit; font-weight: 700; font-size: 15px; color: var(--muted); background: none; border: 0; padding: 16px 22px; cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; }
.tablist button:hover { color: var(--ink); }
.tablist button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); background: #fff; }
.tabpanel { padding: 28px; }
.tabpanel[hidden] { display: none; }
.tabpanel h3 { font-size: 19px; margin: 26px 0 8px; }
.tabpanel h3:first-child { margin-top: 0; }
.tabpanel p { margin: 0 0 12px; max-width: 78ch; }
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.data-table th, .data-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table th { width: 32%; color: var(--muted); font-weight: 600; background: #fafbfc; }
.data-table th.grp { width: auto; background: #eef3f8; color: var(--ink); font-weight: 800; }
.data-table code, .mono { font-family: var(--mono); font-size: 14px; word-break: break-word; }
.ref { font-size: 13px; color: var(--muted); }
.callout { border-left: 4px solid var(--accent); background: #eef5ff; padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 16px 0; font-size: 14.5px; }
.callout.warn { border-color: #b26b00; background: #fff6e5; }
.recon-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; }
.calc { background: #f2f6fa; border-radius: 12px; padding: 20px; align-self: start; }
.calc-field { margin-top: 10px; }
.calc-field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.calc-input { display: flex; align-items: stretch; height: 44px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.calc-input:focus-within { border-color: var(--accent); }
.calc-input input { flex: 1; min-width: 0; border: 0; font: inherit; font-weight: 700; padding: 0 12px; -moz-appearance: textfield; }
.calc-input input:focus-visible { outline: none; }
.calc-input input::-webkit-outer-spin-button, .calc-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-input input[aria-invalid="true"] { background: #fdecec; }
.calc-input span { display: grid; place-items: center; min-width: 48px; padding: 0 10px; background: #eef3f8; color: var(--muted); font-size: 13.5px; font-weight: 700; border-left: 1px solid var(--line); }
.calc-out { margin-top: 16px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 10px; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; }
.co-label { grid-column: 1 / -1; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.calc-out output { font-size: 28px; font-weight: 800; letter-spacing: -.02em; min-height: 38px; }
.co-ul { font-size: 15px; font-weight: 700; color: var(--muted); }
.co-meta { grid-column: 1 / -1; margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.co-meta div { background: #f5f8fb; border-radius: 8px; padding: 8px 10px; }
.co-meta dt { font-size: 12px; color: var(--muted); }
.co-meta dd { margin: 0; font-weight: 800; font-size: 15px; }
.syringe-fig { margin: 14px 0 0; }
.syringe-fig svg { width: 100%; height: auto; display: block; }
#syrFill, #syrPlunger, #syrMark { transition: width .25s ease, transform .25s ease; }
.syringe-fig figcaption { font-size: 13.5px; color: var(--ink); margin-top: 4px; }
.calc-warn { margin: 10px 0 12px; min-height: 0; font-size: 13px; font-weight: 600; color: #8a5300; }
.calc-warn:empty { margin: 0 0 12px; }

/* Product overview ("What is …?") */
.overview { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; padding: 28px; }
.overview h2 { margin-bottom: 12px; }
.ov-text p { margin: 0 0 14px; max-width: 75ch; }
.ov-text p:last-child { margin-bottom: 0; }
.ov-facts { background: #f2f6fa; border-radius: 10px; padding: 20px; align-self: start; }
.ov-facts h3 { font-size: 16px; margin: 0 0 12px; }
.check-list { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; }
.check-list svg { color: var(--ok); flex: none; margin-top: 3px; }
.check-list:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .overview { grid-template-columns: 1fr; padding: 22px 18px; } }

/* Related */
.related { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.rel-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.rel-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(11,31,51,.12); color: var(--ink); }
.rel-card .thumb { aspect-ratio: 4 / 3; background: #eef3f8; display: grid; place-items: center; }
.rel-card .thumb svg { width: 46%; height: auto; }
.rel-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.rel-body .tag { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.rel-body h3 { font-size: 16px; margin: 0; }
.rel-body .meta { font-size: 13px; color: var(--muted); }
.rel-body .p { margin-top: auto; padding-top: 8px; font-weight: 800; font-size: 17px; }

/* Footer */
footer { background: var(--navy); color: #c5d2df; padding: 36px 0; margin-top: 40px; font-size: 13.5px; }
footer p { margin: 0 0 8px; max-width: 90ch; }
footer strong { color: #fff; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0 0 18px; margin: 0 0 18px; border-bottom: 1px solid #23415f; }
.footer-links a { color: #fff; font-weight: 600; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; color: #fff; }
.footer-ship { color: #fff; font-weight: 600; }
.footer-brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; margin: 0 0 22px; }
.footer-brand .logo-word { height: 24px; }
.footer-brand .logo-suffix { font-size: 18.5px; padding-top: 3px; }
.footer-tagline { align-self: center; padding-left: 14px; margin-left: 4px; border-left: 1px solid #2c4b6c; color: #8fa6ba; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
/* Hidden earlier than before: the lockup gained a word, so the tagline runs out of room sooner. */
@media (max-width: 820px) { .footer-tagline { display: none; } }

/* Cart drawer */
.scrim { position: fixed; inset: 0; background: rgba(5,15,25,.5); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; z-index: 80; }
.scrim.open { opacity: 1; visibility: visible; }
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100%); background: #fff; z-index: 90; transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(0,0,0,.2); }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 20px; margin: 0; }
.icon-btn { background: none; border: 0; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.icon-btn:hover { background: var(--bg); }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 20px; }
.cart-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: center; }
.cart-item .ci-thumb { --cap: #5b7290; width: 56px; height: 56px; background: #eef3f8; border-radius: 8px; display: grid; place-items: center; }
.cart-item h3 { font-size: 15px; margin: 0 0 2px; }
.cart-item .ci-meta { font-size: 13px; color: var(--muted); }
.cart-item .ci-remove { background: none; border: 0; color: #c62828; font: inherit; font-size: 13px; cursor: pointer; padding: 0; text-decoration: underline; }
.empty { text-align: center; color: var(--muted); padding: 48px 0; }
.drawer-foot { border-top: 1px solid var(--line); padding: 18px 20px; }
.drawer-foot .btn.is-disabled { background: #b8c4d0; box-shadow: none; pointer-events: none; }
.subtotal { display: flex; justify-content: space-between; font-size: 18px; font-weight: 800; margin-bottom: 12px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, calc(100% + 40px)); visibility: hidden; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 10px; font-weight: 600; z-index: 95; transition: transform .3s ease, visibility .3s; box-shadow: var(--shadow); }
.toast.show { transform: translate(-50%, 0); visibility: visible; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  /* header collapses into the menu button */
  .menu-btn { display: grid; place-items: center; }
  .nav .wrap { gap: 12px; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--navy); padding: 8px 16px 16px; border-top: 1px solid var(--navy-2); }
  .nav-links.open { display: flex; }
  .nav-links a, .nav-links button.dd-toggle { width: 100%; justify-content: space-between; }
  .dd-menu { position: static; box-shadow: none; background: var(--navy-2); }
  .dd-menu a { color: #e6eef7; }
  .dd-menu a:hover { background: #1b4470; color: #fff; }
  .nav-actions { margin-left: auto; }
  .related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coa { grid-template-columns: 1fr; }
  .coa-side { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 1100px) {
  .site-search input { width: 130px; }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .media { position: static; }
  .recon-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .nav .wrap { flex-wrap: wrap; height: auto; min-height: 64px; padding-top: 10px; padding-bottom: 10px; row-gap: 10px; }
  .nav-actions { display: contents; }
  .cart-btn { margin-left: auto; }
  .site-search { order: 3; flex: 1 0 100%; }
  .site-search input { width: 100%; }
}
@media (max-width: 520px) {
  .compliance { font-size: 11px; }
  /* related products stay two-up on phones, matching the catalog grid */
  .tier-matrix { gap: 8px; }
  .tier { padding: 12px 10px 10px; }
  .tier-price { font-size: 18px; }
  .tier-save { font-size: 11px; padding: 2px 6px; }
  .tabpanel { padding: 20px 16px; }
  .data-table th { width: 40%; }
  .qty-row { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.profile-link { margin: 14px 0 0; font-size: 14px; font-weight: 600; }

/* ---------- Signature chromatogram motif ----------
   The purity trace used as a brand element. Decorative; draws itself once on load, then holds. */
.chroma { display: block; width: 100%; height: auto; overflow: visible; }
.chroma path { fill: none; stroke: currentColor; stroke-width: 1.6; vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .chroma path { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: chroma-draw 2.4s .15s cubic-bezier(.22,.61,.36,1) forwards; }
}
@keyframes chroma-draw { to { stroke-dashoffset: 0; } }

/* ---------- Scroll reveal ----------
   Removed: this was a CSS-only reveal driven by `animation-timeline: view()`.
   Two reasons it had to go, both measured rather than assumed:

   1. It is Chromium-only, so Safari and every iPhone got no reveal at all.
   2. It fails closed. With JavaScript disabled, a Chromium visitor was left
      with four of the eight homepage cards stuck at opacity 0 until they
      happened to scroll, because the animation hid the content and only the
      scroll timeline could bring it back.

   The replacement lives in motion.css and site.js: it hides an element only
   after confirming it is rendered and below the fold, so anything it cannot
   reveal is never hidden in the first place. */

/* ---------- Analytics consent bar ----------
   Fixed to the bottom so it never pushes layout; hidden attribute controls visibility. */
.consent[hidden] { display: none; }
.consent { position: fixed; z-index: 70; left: 12px; right: 12px; bottom: 12px; margin: 0 auto; max-width: 760px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--navy); color: #d7e2ee; padding: 14px 18px; border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(2,6,23,.4); font-size: 13.5px; }
.consent-copy { margin: 0; flex: 1 1 320px; line-height: 1.5; }
.consent-copy a { color: #fff; }
.consent-actions { display: flex; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.consent-actions .btn { height: 38px; padding: 0 16px; font-size: 14px; }
.consent-actions .btn-ghost { background: transparent; color: #fff; border-color: #35557a; }
.consent-actions .btn-ghost:hover { background: var(--navy-2); color: #fff; }
@media (max-width: 560px) { .consent-actions { width: 100%; margin-left: 0; } .consent-actions .btn { flex: 1; } }
/* ============================================================================
   Motion and depth layer

   Appended to product.css, so it ships inside base.css on every page and can
   override anything declared above it.

   Three rules govern everything in here, because this is a storefront whose
   buyers are mainly worried about being sold fake material. Motion has to read
   as precision, not decoration:

   1. Animate compositor properties only -- transform, opacity, filter and
      background-position. Nothing in here animates width, height, top, margin
      or anything else that forces layout, because those are what turn a
      redesign into an INP and CLS regression.
   2. Nothing that moves may change layout. Every reveal starts at opacity 0
      with a transform, both of which are off the layout path, so the page
      measures identically with motion on or off. Cumulative Layout Shift
      stays at 0.
   3. The hero is never inside a reveal. The LCP element must paint on the
      first frame at full opacity, or the animation becomes the thing Google
      measures.

   Everything optional sits inside `prefers-reduced-motion: no-preference`, and
   the reduce branch at the top is a hard stop rather than a softer version.
   ========================================================================= */

:root {
  /* Decelerating curve for anything entering the screen; the spring is for
     things the user just pressed, where a little overshoot reads as response. */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.3, .64, 1);
  --t-fast: .18s;
  --t-mid: .32s;
  --t-slow: .62s;

  /* Two gradients, and the split matters.

     --grad-brand is decorative only: rules, edges, icon plates, glows. It runs
     through teal, which cannot carry text — #4fdcc9 against white is 1.69:1,
     where normal text needs 4.5:1 — so it must never end up behind a label.

     --grad-cta is the one that sits under white button text, so every stop is
     checked: #0f6cf5 is 4.70:1, #0a63e8 is 5.25:1, #0a4fbd is 7.3:1. The teal
     appears on a CTA only as a hover glow and a hairline, never as fill. */
  --grad-brand: linear-gradient(135deg, #4fdcc9 0%, #2aa8de 48%, var(--accent) 100%);
  --grad-cta: linear-gradient(135deg, #0f6cf5 0%, var(--accent) 52%, #0a4fbd 100%);
  --grad-deep: linear-gradient(150deg, #17436e 0%, #0b2540 55%, #061729 100%);

  /* Film grain, inline so it costs no request. Used only on the few dark
     panels, never on <body>: it is a repeating tile, and over a full page it
     buys texture at a paint cost that is not worth it on a phone. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");

  --glow-teal: 0 0 0 1px rgba(63, 208, 191, .45), 0 10px 30px -8px rgba(23, 168, 151, .35);
}

/* ---------- Reduced motion ----------
   A hard stop, not a gentler animation. Anything that reveals on scroll is
   forced visible here, so a reduced-motion visitor never meets a blank page
   because the observer has not fired. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Belt and braces. The script already declines to arm anything under reduced
     motion, so this should never have work to do -- but if a preference flips
     mid-session, nothing is left stranded at opacity 0. */
  .is-armed { opacity: 1 !important; transform: none !important; }
}

/* ---------- Scroll reveal ----------
   Replaces the `animation-timeline: view()` version that used to live in
   product.css. That one was Chromium-only and, more importantly, it failed
   closed: with JS off it left content stranded at opacity 0.

   This one is built so that it cannot strand anything. Nothing is hidden by a
   stylesheet. The script adds .is-armed, one element at a time, and only after
   checking that the element is actually rendered and currently below the fold
   -- i.e. only where there is a scroll event still to come that can reveal it.

   What that rules out, by construction:
     - no JS, or no IntersectionObserver  -> nothing is ever armed, all visible
     - prefers-reduced-motion             -> nothing is ever armed, all visible
     - element inside a closed tab panel  -> not rendered, so not armed
     - element already on screen at load  -> not below the fold, so not armed
     - a crawler, which does not scroll   -> nothing below its tall viewport */
@media (prefers-reduced-motion: no-preference) {
  .is-armed {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    will-change: opacity, transform;
  }
  .is-armed.is-in {
    opacity: 1;
    transform: none;
    /* --d is set per element by the script to stagger a row. */
    transition: opacity var(--t-slow) var(--ease-out) var(--d, 0ms),
                transform var(--t-slow) var(--ease-out) var(--d, 0ms);
  }
  /* Dropped once it has arrived: a permanent will-change across dozens of
     cards keeps compositor layers alive for the whole session. */
  .is-armed.is-done { will-change: auto; }
}

/* ---------- Header ----------
   Scrolled state changes colour, blur and shadow only. It is tempting to
   shrink the bar, but .site-header is `position: sticky` and therefore in
   flow, so animating its height would push every page down and show up
   directly as layout shift. */
.nav {
  transition: background var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  html.scrolled .nav {
    background: linear-gradient(180deg, rgba(14, 44, 75, .82), rgba(11, 37, 64, .88));
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}
html.scrolled .nav {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset,
              0 14px 34px -14px rgba(3, 14, 26, .75);
}

/* Nav links: a rule that wipes out from the centre. transform only, so it
   never reflows the bar. */
.nav-links > li > a,
.nav-links > li > button.dd-toggle { position: relative; }
.nav-links > li > a::after,
.nav-links > li > button.dd-toggle::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transition: transform var(--t-mid) var(--ease-out);
}
.nav-links > li > a:hover::after,
.nav-links > li > button.dd-toggle:hover::after,
.nav-links > li > button[aria-expanded="true"]::after { transform: scaleX(1); }

/* Dropdowns arrive instead of appearing. `display` cannot be transitioned, so
   the panel is positioned and faded while .open does the display switch. */
@media (prefers-reduced-motion: no-preference) {
  .dd-menu.open { animation: dd-in var(--t-fast) var(--ease-out) both; }
}
@keyframes dd-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* The mark's apex is the one fixed-teal element in the brand; on hover it
   pulses once, like a detector registering a peak. */
@media (prefers-reduced-motion: no-preference) {
  .logo:hover .logo-mark circle:last-of-type,
  .footer-brand:hover .logo-mark circle:last-of-type {
    animation: node-pulse 1.1s var(--ease-out);
    transform-origin: 32px 10.8px;
  }
}
@keyframes node-pulse {
  0%   { transform: scale(1); }
  32%  { transform: scale(1.32); }
  100% { transform: scale(1); }
}

/* ---------- Buttons ----------
   Teal reaches the primary CTA as a top hairline and an underglow only. Both
   are box-shadow, so neither sits behind the label and the 4.70:1 floor on the
   gradient stops being the only thing holding the contrast up. */
.btn-primary {
  background: var(--grad-cta);
  background-size: 180% 100%;
  background-position: 0% 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(130, 240, 225, .45), 0 2px 6px rgba(8, 26, 44, .14);
  transition: transform var(--t-fast) var(--ease-spring),
              box-shadow var(--t-mid) var(--ease-out),
              background-position var(--t-slow) var(--ease-out);
}
/* background-image is restated deliberately. product.css has
   `.btn-primary:hover { background: var(--accent-hover) }`, and that shorthand
   resets background-image to none -- so without this line the gradient would
   vanish the moment the pointer landed and the button would flash flat blue. */
.btn-primary:hover {
  background-image: var(--grad-cta);
  background-size: 180% 100%;
  background-position: 100% 0;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(130, 240, 225, .6),
              0 10px 26px -8px rgba(10, 99, 232, .55),
              0 4px 14px -6px rgba(23, 168, 151, .45);
}
/* Sheen. ::after is free on .btn-primary -- .card::before is the only pseudo
   the button markup could otherwise collide with, and buttons are not cards. */
@media (prefers-reduced-motion: no-preference) {
  .btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .3) 50%, transparent 62%);
    transform: translate3d(-130%, 0, 0);
    transition: transform .75s var(--ease-out);
  }
  .btn-primary:hover::after { transform: translate3d(130%, 0, 0); }
}
/* Disabled stays flat: the shorthand clears the gradient, and the sheen is
   removed outright so a button that cannot be pressed never looks live. */
.btn-primary[aria-disabled="true"] { background: #5b7290; box-shadow: none; }
.btn-primary[aria-disabled="true"]::after { content: none; }

.btn-ghost { transition: transform var(--t-fast) var(--ease-spring), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-mid); }
.btn-ghost:hover { border-color: var(--signal); color: var(--signal); box-shadow: 0 6px 18px -8px rgba(14, 138, 125, .5); }
.btn:active { transform: translateY(1px) scale(.992); }

/* ---------- Cards ----------
   .card::before already exists (the hairline top highlight), so the hover edge
   goes on box-shadow rather than a second pseudo-element -- an element only
   ever gets one ::before, and the earlier .card/.step collision in this
   codebase came from forgetting exactly that. */
.card { transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out); }

.p-card:hover, .p-card:focus-within {
  transform: translate3d(0, -6px, 0);
  box-shadow: var(--shadow-lg), var(--glow-teal);
}
.p-card .thumb { overflow: hidden; }
.p-card .thumb svg { transition: transform var(--t-slow) var(--ease-out), opacity var(--t-mid) ease; }
.p-card:hover .thumb .t-vial, .p-card:focus-within .thumb .t-vial { transform: scale(1.1); }
.p-card .badge { transition: transform var(--t-mid) var(--ease-spring); }
.p-card:hover .badge, .p-card:focus-within .badge { transform: scale(1.06); }

.trust-card .icon { transition: transform var(--t-mid) var(--ease-spring), box-shadow var(--t-mid); }
.trust-card:hover .icon {
  transform: rotate(-6deg) scale(1.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 20px -5px rgba(23, 168, 151, .65);
}

/* ---------- Section rhythm ----------
   The alternating wash from the earlier pass, now with a hairline that fades
   out at both ends so the band has an edge without a hard rule across it. */
section.block { position: relative; }
section.block:nth-of-type(even)::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1168px, calc(100% - 32px));
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* `content-visibility: auto` was tried on these grids as a paint-cost offset
   and taken back out. Every grid worth applying it to is also a reveal
   container, and a skipped subtree has no layout boxes -- so the reveal could
   not measure whether a card was below the fold, and the two features
   undercut each other. Not worth reintroducing without measuring a saving
   that actually justifies the interaction. */

/* ---------- Surfaces ---------- */
::selection { background: #b9efe7; color: var(--ink); }

/* A scrollbar that belongs to the palette rather than the OS. Firefox takes
   the two-value shorthand; Chromium and Safari need the pseudo-elements. */
html { scrollbar-color: #9fb3c6 transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #b7c6d4;
  border: 3px solid var(--bg);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: #8aa0b5; }

/* ---------- Display typography ----------
   The headline scale was conservative: 52px at the top end on a 1440px screen,
   with default tracking, read as a competent template rather than a brand. The
   ceiling goes up and the tracking tightens as the size grows, which is how
   large type is supposed to be set -- letterforms that are correctly spaced at
   16px are too loose at 60px. The floor stays where it was, so nothing changes
   on a phone and no line-length or wrapping behaviour moves. */
.home-hero h1 {
  font-size: clamp(32px, 4.9vw, 60px);
  letter-spacing: -.035em;
  line-height: 1.04;
}
.page-hero h1 { letter-spacing: -.032em; }
h2 { letter-spacing: -.025em; }

/* ---------- Form fields ----------
   The old focus state changed border-colour only, which is a 1.5px cue that is
   easy to miss. A soft ring around it reads immediately without moving layout,
   since box-shadow is painted outside the box and never reflows. */
.field input, .field select, .field textarea {
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease, background var(--t-fast) ease;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #c2cfdb; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(10, 99, 232, .14);
  outline: none;
}

/* The header search keeps its amber focus ring -- that colour is the site's
   focus signal everywhere and should not become brand blue just inside the
   nav, where the dark background already makes blue hard to pick out. */
.site-search { transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.site-search:focus-within { box-shadow: 0 0 0 4px rgba(255, 179, 0, .18); }

/* ---------- Breadcrumb ---------- */
.breadcrumb a { transition: color var(--t-fast) ease; }

/* ---------- Footer ----------
   Same grain as the hero and the CTA band, so the three dark surfaces read as
   one material rather than three different navies. footer has no pseudo
   element of its own, so ::before is free here. */
footer { position: relative; isolation: isolate; background: var(--grad-deep); }
footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: .45;
  pointer-events: none;
}
/* A brand hairline across the very top, so the footer begins with an edge
   rather than a colour change. */
footer::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-brand);
  opacity: .8;
}
.footer-links a { position: relative; transition: color var(--t-fast) ease; }
.footer-links a:hover { color: #9fd4ca; text-decoration: none; }
.footer-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast) var(--ease-out);
}
.footer-links a:hover::after { transform: scaleX(1); }

/* ---------- Indicative currency ----------
   The slot is emitted empty by the build and filled by site.js. It is display:none until the
   head script has put data-fx on <html>, which happens before first paint -- so for a visitor
   on USD it occupies nothing, and for everyone else the line is already measured when the page
   first lays out. Text arriving into an already-sized box costs no layout shift, which is the
   whole reason the currency is chosen in the head rather than at the end of the body. */
.fx { display: none; }
html[data-fx] .fx {
  display: block;
  min-height: 1.15em;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
html[data-fx] .price-now .fx { font-size: 14px; margin-top: 4px; }
.fx:empty::before { content: "\00a0"; }   /* hold the line open until the figure lands */

/* Footer control */
.fx-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  font-size: 13px;
  color: #a9bed3;
}
.fx-pick label { font-weight: 600; color: #cfdcea; }
.fx-pick select {
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1.5px solid #2c4b6c;
  background: var(--navy-2);
  color: #fff;
  cursor: pointer;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.fx-pick select:hover { border-color: #3d6c9c; }
.fx-pick select:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(63, 208, 191, .18); }
.fx-note { flex: 1 1 260px; min-width: 0; color: #8fa6ba; }
@media (max-width: 560px) { .fx-note { flex-basis: 100%; } }