/* ---------- Supporting pages: about, how-to-order, coa-verification, contact (appended after product.css) ---------- */
.page-hero { padding: 20px 0 8px; }
.page-hero h1 { font-size: clamp(30px, 4.2vw, 44px); max-width: 24ch; margin-bottom: 14px; }
.page-hero .lead { font-size: 17px; max-width: 70ch; margin: 0; }
.prose { max-width: 78ch; }
.prose p { margin: 0 0 14px; }
.prose h3 { font-size: 19px; margin: 24px 0 8px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.panel { padding: 24px; }
.panel h2, .panel h3 { margin-top: 0; }

/* Trust grid (about) */
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
/* Icon sits on the heading's row rather than stacked above it: the headings vary from two words to five, so
   stacking left a ragged band of empty card between the icon and the copy. Grid, not flex, so the paragraph
   can span back to the full width underneath. */
.trust-card { padding: 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px 13px; align-items: center; align-content: start; }
.trust-card { transition: transform .16s ease, box-shadow .2s ease; }
.trust-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
/* Brand teal, dark-on-light: the stroke icons take .icon's colour, and deep teal on the pale tint clears
   contrast easily — the blue squircles read as stock UI and fought the navy-and-teal palette. */
.trust-card .icon { width: 40px; height: 40px; border-radius: 11px; color: #04332e; display: grid; place-items: center;
  background: linear-gradient(160deg, #7fe8da, var(--teal) 48%, #19ad9b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 5px 12px -4px rgba(23,168,151,.5); }
.trust-card .icon svg { width: 21px; height: 21px; }
.trust-card h3 { font-size: 16.5px; margin: 0; align-self: center; line-height: 1.3; }
.trust-card p { margin: 0; font-size: 14.5px; color: var(--muted); grid-column: 1 / -1; }
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.stat { padding: 18px 20px; }
.stat strong { display: block; font-size: 30px; letter-spacing: -.02em; color: var(--navy); }
.stat span { font-size: 14px; color: var(--muted); }

/* Steps (how to order) */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 18px; }
.step { counter-increment: step; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 22px; }
/* .step sits on a .card, and an element has only one ::before — so this rule and .card::before (the absolutely
   positioned gloss highlight) are the same box. position/inset/mix-blend-mode must be reset here, or the counter
   is taken out of the grid and the step's text collapses into the 56px number column. */
.step::before { content: counter(step); position: static; inset: auto; mix-blend-mode: normal;
  width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 22px; font-weight: 800; display: grid; place-items: center; }
.step h3 { font-size: 19px; margin: 4px 0 8px; }
.step p { margin: 0 0 10px; }
.step p:last-child { margin-bottom: 0; }
.pay-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.pay { border: 1.5px solid var(--line); border-radius: 10px; padding: 12px; background: #fafbfc; font-size: 14px; }
.pay strong { display: block; font-size: 15px; }
.pay span { color: var(--muted); font-size: 13px; }

/* FAQ accordion (native <details>) */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.faq summary { list-style: none; cursor: pointer; padding: 16px 48px 16px 18px; font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px; border-right: 2.5px solid var(--muted); border-bottom: 2.5px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { color: var(--accent); }
.faq .answer { padding: 0 18px 16px; color: var(--ink); }
.faq .answer p { margin: 0 0 10px; }
.faq .answer p:last-child { margin: 0; }

/* COA hub */
.batch-search { margin-top: 24px; padding: 22px; }
.batch-search label { display: block; font-weight: 800; margin-bottom: 8px; }
.batch-search .row { display: flex; gap: 10px; }
.batch-search .cat-search { max-width: none; flex: 1; }
.batch-search .cat-search input { height: 54px; font-size: 17px; }
.batch-search .btn-primary { width: auto; height: 54px; padding: 0 26px; font-size: 16px; }
.batch-status { margin: 12px 0 0; min-height: 24px; font-size: 15px; }
.batch-status.found { color: var(--ok); font-weight: 700; }
.batch-status.miss { color: #b3261e; font-weight: 600; }
.coa-grid { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.coa-grid > li[hidden] { display: none; }
.coa-card { padding: 20px; display: flex; flex-direction: column; gap: 12px; height: 100%; }
.coa-card.match { outline: 3px solid var(--ok); outline-offset: -1px; }
.coa-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.coa-card h3 { font-size: 18px; margin: 0; }
.coa-card h3 a { color: var(--ink); text-decoration: none; }
.coa-card h3 a:hover { color: var(--accent); text-decoration: underline; }
.coa-card .cas { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.coa-card .pur { font-size: 24px; font-weight: 800; color: var(--ok); white-space: nowrap; }
.coa-card select { width: 100%; height: 44px; font: inherit; padding: 0 10px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; }
.coa-card .chart-box { aspect-ratio: 720 / 260; }
.coa-card .coa-meta { margin: 0; }
.coa-card .coa-meta div { padding: 6px 0; }
.coa-card .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.coa-card .btns .btn { height: 46px; font-size: 14px; padding: 0 10px; text-align: center; line-height: 1.15; }
.coa-card .btns .pdf-note { grid-column: 1 / -1; }

/* Contact */
.form-grid { display: grid; gap: 16px; }
.field label { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }
.field .req { color: #b3261e; }
.field input, .field select, .field textarea { width: 100%; font: inherit; padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.field input, .field select { height: 48px; padding-top: 0; padding-bottom: 0; }
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--accent); }
.field [aria-invalid="true"] { border-color: #b3261e; background: #fdecec; }
.field .hint { font-size: 13px; color: var(--muted); margin: 6px 0 0; min-height: 18px; }
.field .hint.warn { color: #8a5300; }
.field .err { font-size: 13px; color: #b3261e; font-weight: 600; margin: 6px 0 0; min-height: 18px; }
/* display:none, not an off-screen position: Chrome's autofill fills fields it cannot see as long as they
   are rendered, which is how a hidden honeypot ate real orders. A removed box is never filled. */
.hp { display: none; }
.sla dl { margin: 0; display: grid; gap: 0; }
.sla dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.sla dt { color: var(--muted); }
.sla dd { margin: 0; font-weight: 700; text-align: right; }
.sla .badge-time { display: inline-flex; align-items: center; gap: 8px; background: var(--ok-bg); color: var(--ok); font-weight: 800; padding: 8px 12px; border-radius: 999px; margin-bottom: 14px; }

/* Legal / policy pages */
.effective { margin: 14px 0 0; font-size: 14px; color: var(--muted); font-weight: 600; }
.legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.toc { position: sticky; top: 112px; padding: 18px 20px; }
.toc h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 10px; }
.toc ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }
.legal-doc { padding: 28px 32px; max-width: 860px; }
.legal-doc section + section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.legal-doc h2 { font-size: 21px; margin: 0 0 10px; scroll-margin-top: 120px; }
.legal-doc p, .legal-doc li { max-width: 75ch; }
.legal-doc p { margin: 0 0 12px; }
.legal-doc ul { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; }
.legal-doc p:last-child, .legal-doc ul:last-child { margin-bottom: 0; }
.notice-box { border-left: 4px solid #b26b00; background: #fff6e5; padding: 12px 16px; border-radius: 0 8px 8px 0; }
.table-scroll { overflow-x: auto; margin-top: 4px; }
.table-scroll .data-table { min-width: 560px; }
.table-scroll .data-table th { width: auto; }
main > .callout { margin: 20px 0 0; }
@media (max-width: 860px) {
  .legal { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
  .legal-doc { padding: 22px 18px; }
  .legal-doc h2 { scroll-margin-top: 170px; }
}

/* Checkout */
.checkout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.checkout [hidden] { display: none !important; }
.co-form fieldset { border: 0; margin: 0 0 22px; padding: 0 0 22px; border-bottom: 1px solid var(--line); min-width: 0; }
.co-form fieldset:last-of-type { border-bottom: 0; padding-bottom: 0; }
.co-form legend { font-size: 18px; font-weight: 800; margin-bottom: 14px; padding: 0; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.field .opt { font-weight: 500; color: var(--muted); font-size: 13px; }
.field .err:empty, .field .hint:empty { min-height: 0; }
.co-form .err { font-size: 13px; color: #b3261e; font-weight: 600; margin: 4px 0 0; }
.co-form .check { margin-bottom: 4px; }
.co-form .check.error, .field.error input, .field.error select { border-color: #b3261e; }
.pay-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.pay-option { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; background: #fff; }
.pay-option:has(input:checked) { border-color: var(--accent); background: #f2f7ff; box-shadow: 0 0 0 3px rgba(10,108,255,.12); }
.pay-option input { margin-top: 3px; accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.pay-option strong { display: block; font-size: 15px; }
.pay-option small { color: var(--muted); font-size: 13px; }
.co-form .btn-primary { margin-top: 18px; }
.co-fail { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: #b3261e; }
.co-fail:empty { display: none; }
.co-summary { position: sticky; top: 112px; }
.co-summary h2 { font-size: 20px; margin: 0 0 12px; }
.co-items { list-style: none; margin: 0; padding: 0; }
.co-items li { --cap: #5b7290; display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.co-items strong { display: block; font-size: 14.5px; }
.co-items span { font-size: 13px; color: var(--muted); }
.co-items em { font-style: normal; color: var(--ok); font-weight: 700; }
.co-items b { font-size: 15px; }
.co-loading { color: var(--muted); }
.co-totals { margin: 12px 0 0; }
.co-totals div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14.5px; }
.co-totals dt { color: var(--muted); }
.co-totals dd { margin: 0; font-weight: 700; text-align: right; }
.co-totals .co-total { border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 12px; font-size: 18px; }
.co-totals .co-total dt { color: var(--ink); font-weight: 800; }
.co-edit { width: 100%; height: 44px; margin-top: 14px; }
.co-empty, .co-success { grid-column: 1 / -1; text-align: center; padding: 44px 24px; }
.co-success { border: 2px solid var(--ok); }
.co-success-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); margin-bottom: 12px; }
.co-success-icon svg { width: 30px; height: 30px; }
[tabindex="-1"]:focus { outline: none; }
.co-success h2 { font-size: 30px; margin: 0 0 10px; color: var(--ok); }
.co-success-msg { font-size: 17px; max-width: 62ch; margin: 0 auto 20px; }
.co-ref { display: inline-grid; grid-template-columns: repeat(3, auto); gap: 8px 28px; margin: 0 auto 18px; padding: 16px 22px; background: #f5f8fb; border-radius: 10px; text-align: left; }
.co-ref dt { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.co-ref dd { margin: 2px 0 0; font-weight: 800; font-family: var(--mono); font-size: 14.5px; }
.co-success .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.co-success .cta-row .btn { height: 48px; }
@media (max-width: 1000px) {
  .checkout { grid-template-columns: 1fr; }
  .co-summary { position: static; order: -1; }
}
@media (max-width: 640px) {
  .form-grid.two, .pay-options { grid-template-columns: 1fr; }
  .co-ref { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .coa-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .trust-grid, .stat-row { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 10px; }
  .step::before { width: 44px; height: 44px; font-size: 18px; }
  .batch-search .row { flex-direction: column; }
  .batch-search .btn-primary { width: 100%; }
}

/* Research blog */
.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.post-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s; }
.post-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 28px rgba(11,31,51,.12); }
.post-cat { margin: 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); }
.post-title { font-size: 21px; line-height: 1.25; margin: 0; }
.post-title a { color: var(--ink); text-decoration: none; }
.post-title a::after { content: ""; position: absolute; inset: 0; }   /* whole card is clickable */
.post-title a:focus-visible { outline: none; }
.post-card:focus-within { outline: 3px solid #ffb300; outline-offset: 2px; }
.post-summary { margin: 0; color: var(--muted); }
.post-more { margin-top: auto; font-weight: 800; text-decoration: none; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 13.5px; color: var(--muted); }
.post-head .post-meta { margin-top: 16px; font-size: 14.5px; }
.author-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--ok-bg); color: var(--ok); font-weight: 700; padding: 3px 10px 3px 7px; border-radius: 999px; }
.author-tag svg { width: 13px; height: 13px; }
.post-head + .callout { margin: 20px 0 0; }
.post-body h2 { font-size: 23px; }
.post-body p, .post-body li { font-size: 16.5px; line-height: 1.7; }
.post-body ol { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 8px; }
.post-body .formula { font-family: var(--mono); font-size: 15px; background: #eef3f8; border-left: 4px solid var(--accent); padding: 12px 16px; border-radius: 0 8px 8px 0; }
.post-body .data-table caption { caption-side: top; text-align: left; font-weight: 700; font-size: 14px; color: var(--muted); padding-bottom: 8px; }
.post-body a { font-weight: 600; }
.check-list-plain { list-style: none; padding: 0 !important; }
.check-list-plain li { padding-left: 26px; position: relative; }
.check-list-plain li::before { content: "✓"; position: absolute; left: 4px; color: var(--ok); font-weight: 800; }
.author-box { display: flex; gap: 14px; align-items: flex-start; margin-top: 28px; padding: 18px; background: #f2f6fa; border-radius: 12px; }
.author-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; }
.author-name { margin: 0 0 4px !important; font-weight: 800; }
.author-box p { font-size: 14.5px !important; margin: 0; }
@media (max-width: 760px) { .post-grid { grid-template-columns: 1fr; } }

/* Compound library & reviews */
.profile-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-link { display: inline-flex; align-items: center; padding: 9px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; text-decoration: none; }
.chip-link:hover { border-color: var(--accent); color: var(--accent); }
a.auto-link { text-decoration-style: dotted; text-underline-offset: 3px; }
.stars { margin: 0; color: #c98a00; font-size: 18px; letter-spacing: 2px; }
.post-card blockquote { margin: 0; }
.post-card figcaption { font-size: 13px; color: var(--muted); }

/* Standalone reconstitution calculator */
.calc-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
.calc-page .calc { padding: 24px; border: 1px solid var(--line); box-shadow: var(--shadow); background: #f7fafc; }
.calc-page .calc h2 { font-size: 22px; }
.calc-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.calc-chip { font: inherit; font-size: 13px; font-weight: 700; padding: 5px 11px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; }
.calc-chip:hover { border-color: var(--accent); color: var(--accent); }
.calc-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.calc-explain h2 { font-size: 22px; margin-top: 0; }
.calc-explain .formula { font-family: var(--mono); font-size: 14.5px; background: #eef3f8; border-left: 4px solid var(--accent); padding: 10px 14px; border-radius: 0 8px 8px 0; }
/* minmax(0, 1fr), not 1fr: a bare 1fr track is minmax(auto, 1fr) and refuses to shrink below its content,
   so the 560px-wide .table-scroll table stretched the column and gave the whole page horizontal scroll. */
@media (max-width: 1000px) { .calc-page { grid-template-columns: minmax(0, 1fr); } }

/* Alternative designations list (compound profiles).
   display:block is deliberate and must stay: the .legal-doc ul rule sets display:grid, which silently
   cancels "columns" and collapses this to one auto-sized track. That track grows to its widest item — on
   TB-500 that is the 45-residue sequence Ac-SDKPDMAE…, a single unbreakable token measuring 431px inside a
   322px list, which gave the whole page 95px of horizontal scroll on a 390px phone.
   overflow-wrap: anywhere lets a sequence that long break mid-string, which is normal for peptide notation. */
.designations { display: block; columns: 2; column-gap: 28px; }
.designations li { break-inside: avoid; margin-bottom: 6px; overflow-wrap: anywhere; }
@media (max-width: 640px) { .designations { columns: 1; } }
/* Safety net for every other list and paragraph in a profile or policy page: CAS strings, sequences and
   long URLs should wrap rather than widen the page. */
.legal-doc ul { grid-template-columns: minmax(0, 1fr); }
.legal-doc li, .legal-doc p { overflow-wrap: break-word; }

/* Author photos */
.author-photo { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.prose .author-photo { width: 96px; height: 96px; float: right; margin: 0 0 12px 16px; }
a.author-tag { text-decoration: none; }
a.author-tag:hover { text-decoration: underline; }

/* Laboratory photography */
.lab-hero { margin: 8px 0 0; }
.lab-hero picture, .lab-figure picture { display: block; }
.lab-hero img, .lab-figure img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-lg); object-fit: cover; }
.lab-hero figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); max-width: 70ch; }
.lab-figure { margin: 0; }
.lab-split { align-items: center; }
@media (max-width: 1000px) { .lab-split .lab-figure { order: -1; } }

/* ---------- Certificate links ----------
   "View COA" is the primary button; "Download PDF" sits under it as a quieter secondary link, because
   most people want to read the certificate rather than file it. site.js hides the download link when
   the PDF is not in place, so it is never offered for a file that would 404. */
.pdf-dl { display: inline-block; margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.pdf-dl:hover, .pdf-dl:focus-visible { color: var(--accent); }
.pdf-dl[hidden] { display: none; }

/* Pre-order products: the first batch is still in QC, so the stock line must not read as green "in stock".
   #8a5300 on the card background clears 4.5:1, unlike a mid-amber. */
.stock.pre { color: #8a5300; }
.stock.pre .dot { background: #8a5300; box-shadow: 0 0 0 4px rgba(138, 83, 0, .18); animation: none; }

/* ---------- COA additions: verification link, chromatogram caveat, conformity table, pending list ---------- */
.coa-verify { margin: 12px 0 0; }
.chart-note { margin: 6px 0 16px; }
.coa-sub { margin: 22px 0 10px; font-size: 17px; }

/* Compounds whose first certificate has not been released yet. Two columns on desktop so a list of
   twenty does not become a long scroll; one column on phones. */
.pending-list { list-style: none; margin: 14px 0 0; padding: 0; columns: 2; column-gap: 28px; }
.pending-list li { break-inside: avoid; padding: 5px 0; }
@media (max-width: 640px) { .pending-list { columns: 1; } }

/* Product with no published certificate yet: a short explanation and a way to ask, in place of the viewer. */
.coa-pending h2 { margin-top: 0; font-size: 22px; }
.coa-pending p:last-child { margin-bottom: 0; }