/* GENERATED by tools/lift.py — do not edit.
   Styling lifted from the peptriva storefront so this site and the
   store share one visual language. Re-run the script rather than
   editing here; site-specific additions belong in site.css. */


/* ── Legal / prose pages — styles/legal.css (56 rules) ── */
/* ============================================================
   legal.css — shared styles for /legal-*.html and /waiver.html
   Uses Peptriva tokens (tokens.css?v=4) and the .lg-* prefix
   for page-local components. Light, readable, single-column
   reading layout with a sticky sidebar TOC on desktop and a
   top-of-page anchor list on mobile.
   ============================================================ */

.lg-page {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: clip;
}
.lg-nav-rule {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin: 0;
}
/* ---------- Hero ---------- */
.lg-hero {
  max-width: 1240px;
  margin: 0 auto;
  padding: 56px 40px 36px;
  box-sizing: border-box;
}
.lg-hero__eyebrow {
  font-family: var(--font-meta);
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--slate-2);
  margin: 0 0 14px;
}
.lg-hero__h {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.2vw, 54px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 18px;
  max-width: 22ch;
  text-wrap: balance;
}
.lg-hero__meta {
  font-family: var(--font-meta);
  font-size: 13px;
  color: var(--slate-2);
  letter-spacing: 0.04em;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.lg-hero__meta b { color: var(--ink); font-weight: 600; }
/* ---------- Grid: sticky sidebar TOC + content column ----------
   The content column uses `minmax(0, 1fr)` (not bare `1fr`) so wide
   children — GDPR/CCPA legal tables, callout boxes, code blocks —
   stay scrollable inside their own wrappers instead of pushing the
   whole page wider than the viewport on mobile. (CSS grid's default
   `auto` min-track expands the column to fit min-content of children,
   which broke horizontal layout on every legal page <980px.) */
.lg-grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 40px 96px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
/* Sidebar TOC — sticky on desktop, anchored to top of viewport
   below the chrome.js floating .sp-pill nav (which sits at the top
   of the page when the user scrolls down). Bumped down to 96px so
   the TOC's top edge clears the pill instead of being covered. */
.lg-toc {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.lg-toc__lbl {
  font-family: var(--font-meta);
  font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--slate-2);
  margin: 0 0 10px;
}
.lg-toc__group {
  font-family: var(--font-meta);
  font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--slate-2);
  margin: 16px 0 6px;
}
/* .lg-toc__part <details>/<summary> accordion styles live in
   styles/accordion.css (sitewide dotted-list pattern). First part
   is still rendered with [open] in the HTML so the user lands with
   at least one part visible. */
.lg-toc__link {
  display: block;
  padding: 6px 10px;
  color: var(--slate);
  text-decoration: none;
  border-radius: 4px;
  transition: background .15s, color .15s;
  line-height: 1.4;
}
.lg-toc__link:hover { background: var(--surface); color: var(--ink); }
.lg-toc__link--sub {
  padding-left: 22px;
  font-size: 12.5px;
  color: var(--slate-2);
}
/* ---------- Content column ---------- */
.lg-content {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--slate);
}
/* scroll-margin-top matches the .lg-toc top offset so anchor-link
   jumps land below the floating .sp-pill nav with breathing room. */
.lg-content > * { scroll-margin-top: 100px; }
.lg-content p {
  margin: 0 0 18px;
}
.lg-content p:first-of-type { color: var(--ink); }
.lg-content strong, .lg-content b { color: var(--ink); font-weight: 600; }
.lg-content em, .lg-content i { color: var(--ink); font-style: italic; }
.lg-content a {
  color: var(--blurple);
  text-decoration: none;
  border-bottom: 1px solid rgba(92, 77, 255, 0.35);
  transition: color .15s, border-color .15s;
}
.lg-content a:hover { color: var(--electric); border-bottom-color: var(--electric); }
.lg-content ul, .lg-content ol {
  margin: 0 0 22px;
  padding-left: 22px;
}
.lg-content li {
  margin: 0 0 8px;
  line-height: 1.65;
}
.lg-content li::marker { color: var(--slate-2); }
.lg-content hr {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin: 44px 0;
}
/* Headings */
.lg-h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.18;
  color: var(--ink);
  margin: 56px 0 18px;
  text-wrap: balance;
}
.lg-h2:first-child { margin-top: 0; }
.lg-h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.9vw, 21px);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 36px 0 14px;
}
.lg-h4 {
  font-family: var(--font-meta);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 28px 0 10px;
  text-transform: uppercase;
}
/* "Part X — Title" major dividers (used in terms + privacy multi-part docs) */
.lg-part {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 80px 0 24px;
  padding-top: 32px;
  border-top: 2px solid var(--ink);
  scroll-margin-top: 100px;
}
.lg-part:first-of-type { margin-top: 0; }
/* ---------- Callout — ALL-CAPS legal warning boxes ---------- */
.lg-callout {
  background: var(--surface);
  border-left: 3px solid var(--blurple);
  border-radius: 0 4px 4px 0;
  padding: 22px 26px;
  margin: 28px 0;
}
.lg-callout p {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.005em;
}
.lg-callout p:last-child { margin-bottom: 0; }
/* ---------- Placeholder token — yellow highlight ----------
   Wraps things like [DATE], [Peptriva US LLC], [Cayman company
   number]. Bright yellow so legal counsel can scan-find every
   token to fill in before launch. */
.lg-placeholder {
  background: #FFE15D;
  color: #6b4f00;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-weight: 500;
  letter-spacing: 0;
  /* Long sentence-style placeholders (e.g. "[Replace with actual
     processor list before launch]") need to wrap on mobile — keeping
     nowrap pushed them past the viewport edge and forced horizontal
     scroll on every legal page <500px wide. */
  white-space: normal;
  overflow-wrap: anywhere;
}
/* ---------- Tables (GDPR purpose/legal-basis matrices etc.) ---------- */
.lg-table-wrap,
.rw-table-wrap {
  margin: 0 0 24px;
  overflow-x: auto;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  -webkit-overflow-scrolling: touch;
}
.lg-table,
.rw-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.55;
}
.lg-table th, .lg-table td,
.rw-compare-table th, .rw-compare-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}
.lg-table thead th,
.rw-compare-table thead th {
  background: var(--surface);
  font-family: var(--font-meta);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-2);
}
.lg-table tbody tr:last-child th,
.lg-table tbody tr:last-child td,
.rw-compare-table tbody tr:last-child th,
.rw-compare-table tbody tr:last-child td { border-bottom: 0; }
.lg-table td,
.rw-compare-table td { color: var(--slate); }
.lg-table td strong, .lg-table th strong,
.rw-compare-table td strong, .rw-compare-table th strong { color: var(--ink); font-weight: 600; }
/* ---------- Contact / closing block ---------- */
.lg-contact {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 24px 28px;
  margin: 48px 0 0;
}
.lg-contact h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 10px;
}
.lg-contact p { font-size: 14.5px; color: var(--slate); margin: 0 0 8px; }
.lg-contact p:last-child { margin-bottom: 0; }
/* ---------- Closing meta — "Effective: ... · Last updated: ..." ---------- */
.lg-meta-row {
  margin: 48px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-meta);
  font-size: 12.5px;
  color: var(--slate-2);
  letter-spacing: 0.04em;
}
.lg-meta-row b { color: var(--ink); font-weight: 600; }
@media (max-width: 599px) {
.lg-hero { padding: 32px 20px 20px; }
.lg-grid { padding: 8px 20px 48px; }
.lg-content p { margin: 0 0 14px; }
.lg-h2 { margin: 40px 0 14px; }
.lg-h3 { margin: 28px 0 12px; }
.lg-part { margin: 56px 0 18px; padding-top: 24px; }
}

/* ── FAQ accordion — styles/accordion.css (22 rules) ── */
/* ---------- List container (bordered variant) ---------- */
.faq3-list {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
/* ---------- Item ---------- */
.faq3-item {
  border-top: 1px dotted var(--hairline-strong);
  transition: background var(--dur-micro) var(--ease-out);
}
.faq3-item:first-child { border-top: 0; }
.faq3-item.hidden { display: none; }
/* ---------- Trigger row (button) ---------- */
.faq3-q {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: color var(--dur-micro) var(--ease-out);
}
.faq3-q:hover { color: var(--blurple); }
.faq3-q:focus-visible {
  outline: 2px solid var(--blurple);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}
.faq3-item.open .faq3-q { color: var(--ink); }
/* Category-tag pill removed from FAQ questions site-wide (kept in markup for
   data attribution / filtering, hidden visually + from the a11y tree). */
.faq3-q-tag {
  display: none;
  font-family: var(--font-meta);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-2);
  padding: 4px 8px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
}
.faq3-item.open .faq3-q-tag {
  color: var(--blurple);
  border-color: rgba(92,77,255,0.3);
  background: rgba(92,77,255,0.06);
}
.faq3-q-text {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
/* Triangle indicator — CSS-drawn ▼ that rotates to ▲ on open.
   The existing SVG inside .faq3-q-icon is hidden; the triangle is
   drawn as an ::after pseudo so no markup change is needed. */
.faq3-q-icon {
  position: relative;
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink);
  background: none;
  border-radius: 0;
  transition: transform var(--dur-quick) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.faq3-q-icon::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}
.faq3-q-icon svg { display: none; }
.faq3-item.open .faq3-q-icon { transform: rotate(180deg); }
/* ---------- Answer reveal ---------- */
.faq3-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.faq3-item.open .faq3-a-wrap { grid-template-rows: 1fr; }
.faq3-a {
  overflow: hidden;
  padding: 0 20px;
  font-size: 14px;
  color: var(--slate);
  line-height: 1.65;
}
.faq3-a a {
  color: var(--blurple);
  text-decoration: none;
  border-bottom: 1px solid rgba(92,77,255,0.4);
}
.faq3-a a:hover { color: var(--electric); border-bottom-color: var(--electric); }
.faq3-item.open .faq3-a { padding: 0 20px 20px; }
/* Triangle indicator — matches .faq3-q-icon. */
.lg-toc__part summary::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform var(--dur-quick) var(--ease-out);
  flex-shrink: 0;
}

/* ── Catalog cards — catalog.html (18 rules) ── */
/* ── Product grid — horizontal cards, 2-up on desktop ───────────
     Sized off the reference: about two rows visible per viewport, so
     roughly "four cards and a bit" at 100vh. The card is a fixed
     min-height rather than content-sized, which also stops a long
     subtitle from making one row taller than its neighbour. Gaps are
     the reference's too — tighter vertically than horizontally. */
  .cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; }
.cat-card {
    min-height: min(38vh, 372px);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: var(--cat-card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--cat-r);
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: inherit;
    transition:
      border-color var(--dur-micro) var(--ease-out),
      transform var(--dur-quick) var(--ease-out),
      box-shadow var(--dur-quick) var(--ease-out);
  }
@media (hover: hover) and (pointer: fine) {
.cat-card:hover {
      border-color: var(--ink);
      transform: translateY(-2px);
      box-shadow: 0 14px 34px rgba(0,0,0,.09);
    }
}
.cat-card.is-out { opacity: 0.55; }
@media (hover: hover) and (pointer: fine) {
.cat-card.is-out:hover { transform: none; box-shadow: none; }
}
@media (hover: hover) and (pointer: fine) {
.cat-card:hover .cat-card__photo img { transform: scale(1.07); }
}
.cat-card h3 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.018em;
    margin: 0;
    line-height: 1.15;
    color: var(--ink);
  }
@media (max-width: 880px) {
.cat-grid { grid-template-columns: 1fr; gap: 12px; }
.cat-card { min-height: 262px; }
.cat-card h3 { font-size: 19px; }
}
@media (max-width: 400px) {
.cat-grid { gap: 10px; }
.cat-card { min-height: 244px; }
.cat-card h3 { font-size: 17px; }
}

/* ── Category chips — catalog.html (5 rules) ── */
.cat-cats { display: none !important; }
.cat-cats-select,
  .cat-sort select {
    width: 100%;
    padding: 11px 34px 11px 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7C93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 14px center / 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
  }
.cat-sort select:focus,
  .cat-cats-select:focus { outline: 0; border-color: var(--blurple); }
@media (max-width: 880px) {
.cat-cats-select,
    .cat-sort select { font-size: 13.5px; padding-top: 11px; padding-bottom: 11px; }
}

/* ── Homepage card track + blend card — index.html (32 rules) ── */
.hp-blends-track-wrap{position:relative;margin:24px -40px 0}
.hp-blends-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:40px;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:4px 40px 24px;-webkit-mask-image:linear-gradient(to right,transparent 0,black 32px,black calc(100% - 32px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,black 32px,black calc(100% - 32px),transparent 100%)}
.hp-blends-track::-webkit-scrollbar{display:none}
.hp-blends-track .hp-blend-card{flex:0 0 calc((100% - 80px - 44px)/ 3);scroll-snap-align:start}
.hp-blends-dots{display:flex;justify-content:center;gap:8px;margin-top:8px}
.hp-blends-dot{appearance:none;-webkit-appearance:none;display:block;width:8px;height:8px;min-height:0!important;min-width:0!important;flex-shrink:0;border-radius:999px;background:var(--hairline-strong);border:0;padding:0;margin:0;font-size:0;line-height:0;cursor:pointer;transition:width .3s var(--ease),background .3s var(--ease)}
.hp-blends-dot:hover{background:var(--slate-2)}
.hp-blends-dot.is-active{width:28px;background:var(--ink)}
@media (min-width:881px) and (max-width:1100px) {
.hp-blends-track .hp-blend-card{flex:0 0 calc((100% - 80px - 22px)/ 2)}
}
@media (min-width:600px) and (max-width:880px) {
.hp-blends-track .hp-blend-card{flex:0 0 56%}
}
.hp-blend-card{display:flex;flex-direction:column;border:1px solid var(--card-border);border-radius:4px;background:#fff;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s;position:relative;container-type:inline-size;text-decoration:none;color:inherit}
.hp-blend-card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.1)}
.hp-blend-card__photo{position:relative;aspect-ratio:1/1;overflow:hidden;background:linear-gradient(135deg,#f1efff 0,#e2dcff 60%,#d4ccff 100%);border-bottom:1px solid var(--hairline)}
.hp-blend-card__photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.hp-blend-card:hover .hp-blend-card__photo img{transform:scale(1.04)}
.hp-blend-card__photo-tag{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(255,255,255,.85);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.9);border-radius:999px;font-family:var(--font-meta);font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);box-shadow:0 4px 16px rgba(0,0,0,.06)}
.hp-blend-card__body{padding:22px 18px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.hp-blend-card h3{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:0;line-height:1.2;color:var(--ink)}
/* Homepage opacity: the product name is a pre-baked image, not text (see
   scripts/build-homepage-opacity.mjs). Heights are the exact line-boxes the
   text occupied — 19px x 1.2 = 22.8px for a card, 22px x 1.55 = 34.1px for the
   COA heading — so the swap is invisible. Images are rendered at 4x and scaled
   down here, which keeps them crisp on retina. */
.hp-blend-card__name{display:block}
.hp-blend-card__name img{display:block;height:22.8px;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.hp-blend-card__sub{font-size:13.5px;color:var(--slate);line-height:1.5;margin:0}
.hp-blend-card__tags{display:flex;flex-wrap:wrap;gap:6px}
.hp-blend-card__tag-pill{display:inline-flex;align-items:center;padding:4px 9px;border:1px solid var(--card-border);border-radius:4px;font-family:var(--font-meta);font-weight:600;font-size:10.5px;letter-spacing:.04em;color:var(--slate);background:#fff}
.hp-blend-card__footer{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:6px}
@media (max-width:980px) {
.hp-blends-track-wrap{margin:20px -20px 0}
.hp-blends-track{padding:4px 20px 24px;scroll-padding-left:20px;-webkit-mask-image:linear-gradient(to right,transparent 0,black 20px,black calc(100% - 20px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,black 20px,black calc(100% - 20px),transparent 100%)}
.hp-blends-track .hp-blend-card{flex-basis:80%}
}
@media (min-width:600px) and (max-width:880px) {
.hp-blends-track .hp-blend-card{flex-basis:56%}
}

/* ── COA document — chrome.js (33 rules) ── */
.coa-doc .coa-doc__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  border-bottom: 2px solid var(--blurple);
  padding-bottom: 18px; margin-bottom: 24px;
  gap: 24px;
}
.coa-doc__brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: #000;
  line-height: 1;
}
.coa-doc__cap {
  font-family: var(--font-meta); font-weight: 600;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--slate-2);
  margin-top: 6px;
  text-transform: uppercase;
}
.coa-doc__meta { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--slate); }
.coa-doc__meta span { color: var(--slate-2); margin-right: 6px; }
.coa-doc__meta div + div { margin-top: 4px; }
.coa-doc__section { margin-bottom: 24px; }
.coa-doc__section h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.coa-doc__section h4 {
  font-family: var(--font-meta); font-weight: 600;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-2);
  margin: 0 0 12px;
}
.coa-doc__section p { margin: 0; color: var(--slate); font-size: 14px; line-height: 1.55; }
.coa-doc__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.coa-doc__table tr { border-bottom: 1px solid var(--hairline); }
.coa-doc__table tr:last-child { border-bottom: 0; }
.coa-doc__table td { padding: 12px 0; color: var(--slate); }
.coa-doc__table td:last-child { text-align: right; color: #000; }
.coa-doc__table strong { font-weight: 600; }
.coa-doc__table strong.pass {
  color: #1aa86b;
  font-family: var(--font-meta); font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
}
/* 3-section COA matrix inside the modal (mirrors the homepage COA stage) */
.coa-doc .coa-doc-section + .coa-doc-section { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.coa-doc .coa-doc-section-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); margin-bottom: 4px; }
.coa-doc .coa-doc-section-label { font-family: var(--font-meta); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.coa-doc .coa-doc-section-meta { font-family: var(--font-meta); font-weight: 600; font-size: 10.5px; letter-spacing: .04em; color: var(--slate-2); }
.coa-doc .coa-row { display: grid; grid-template-columns: 1.3fr 1fr auto; align-items: center; padding: 11px 0; gap: 16px; }
.coa-doc .coa-row + .coa-row { border-top: 1px solid var(--hairline); }
.coa-doc .coa-row-test { font-size: 13px; color: var(--ink); font-weight: 500; }
.coa-doc .coa-row-test small { display: block; font-family: var(--font-meta); font-weight: 400; font-size: 10px; color: var(--slate-2); letter-spacing: .04em; margin-top: 3px; }
.coa-doc .coa-row-result { font-family: var(--font-mono); font-size: 12px; color: var(--ink); font-weight: 500; letter-spacing: .02em; }
.coa-doc .coa-row-pass { font-family: var(--font-meta); font-weight: 600; font-size: 9.5px; letter-spacing: .1em; padding: 4px 10px; border-radius: 999px; background: rgba(10,125,62,.12); color: #0a7d3e; min-width: 50px; text-align: center; }
.coa-doc .coa-row-pass--fail { background: rgba(200,30,30,.12); color: #c81e1e; }
.coa-doc__foot {
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--font-meta); font-weight: 600;
  font-size: 11px;
  color: var(--slate-2);
  border-top: 1px solid var(--hairline);
  padding-top: 18px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.coa-doc__foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 720px) {
.coa-doc__head { flex-direction: column; }
.coa-doc__meta { text-align: left; }
}

/* ── COA lookup form controls — coa.html (28 rules) ── */
.cm-card {
    max-width: 1240px;
    margin: 0 auto;
    border: 1px solid var(--card-border);
    border-radius: var(--r-md);
    background: #fff;
    overflow: hidden;
  }
.cm-card__top {
    padding: 26px 28px 22px;
    border-bottom: 1px solid var(--hairline);
  }
.cm-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 24px; flex-wrap: wrap;
  }
.cm-head__id { min-width: 0; }
.cm-card__eyebrow {
    font-family: var(--font-meta);
    font-weight: 600; font-size: 11px;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--blurple);
    margin: 0 0 8px;
  }
.cm-card__h {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.08;
    color: var(--ink);
    margin: 0 0 5px;
  }
.cm-card__sub { font-size: 14px; color: var(--slate); margin: 0; }
.cm-select { min-width: 240px; }
.cm-find__field { position: relative; flex: 1 1 280px; min-width: 0; }
.cm-find__field::before {
    content: ''; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; pointer-events: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C4DFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1'/><rect x='14' y='3' width='7' height='7' rx='1'/><rect x='3' y='14' width='7' height='7' rx='1'/><path d='M14 14h3v3'/><path d='M21 14v.01'/><path d='M14 21h.01'/><path d='M21 17v4'/></svg>") no-repeat center / contain;
  }
.cm-find__input {
    width: 100%; padding: 11px 14px 11px 38px;
    border: 1px solid var(--hairline-strong); border-radius: var(--r-md);
    background: #fff; color: var(--ink);
    font-family: var(--font-meta); font-size: 14px; letter-spacing: 0.02em;
    box-sizing: border-box; transition: border-color .15s, box-shadow .15s;
  }
.cm-find__input::placeholder { font-family: var(--font-body); letter-spacing: 0; color: var(--slate-2); }
.cm-find__input:focus { outline: 0; border-color: var(--blurple); box-shadow: 0 0 0 3px rgba(92,77,255,.14); }
.cm-find__paste {
    padding: 11px 16px; border: 1px solid var(--hairline-strong); border-radius: var(--r-md);
    background: #fff; color: var(--ink);
    font-family: var(--font-meta); font-weight: 600; font-size: 12.5px; letter-spacing: 0.04em;
    cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s;
  }
.cm-find__paste:hover { border-color: var(--ink); background: var(--surface); }
.cm-find__submit {
    padding: 11px 20px; border: 1px solid var(--blurple); border-radius: var(--r-md);
    background: var(--blurple); color: #fff;
    font-family: var(--font-body); font-weight: 700; font-size: 13.5px;
    cursor: pointer; white-space: nowrap; transition: background .2s, transform .12s;
  }
.cm-find__submit:hover { background: #4A3FE6; transform: translateY(-1px); }
.cm-find__msg { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--slate-2); line-height: 1.4; }
.cm-find__msg:empty { display: none; }
.cm-find__msg.is-error { color: #b42318; }
.cm-select {
    appearance: none; -webkit-appearance: none;
    min-height: 44px; box-sizing: border-box;
    padding: 10px 38px 10px 16px;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--r-md);
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C4DFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 14px center / 13px 13px;
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 600; font-size: 14.5px;
    cursor: pointer;
    max-width: 320px;
    transition: border-color .15s, box-shadow .15s;
  }
.cm-select:hover { border-color: var(--ink); }
.cm-select:focus { outline: 0; border-color: var(--blurple); box-shadow: 0 0 0 3px rgba(92,77,255,.14); }
@media (max-width: 599px) {
.cm-card__top { padding: 24px 18px 20px; }
/* Phone: batch input goes full-width so the placeholder stays legible,
       Paste + Find share the row below it, and the peptide filter drops to
       full width under the finder. */
    .cm-find__field { flex: 1 1 100%; }
.cm-find__paste, .cm-find__submit { flex: 1 1 auto; }
.cm-select { width: 100%; min-width: 0; }
}

/* ── Header / footer / buttons — chrome.js (148 rules) ── */
.site-header {
  position: relative;
  z-index: 30;
  background: white;
  border-bottom: 1px solid var(--hairline);
}
.site-header--dark { background: var(--midnight); border-bottom-color: rgba(255,255,255,.08); color: white; }
.site-header--floating {
  position: absolute; top: 32px; left: 0; right: 0; background: transparent; border: 0;
  color: white;
}
.site-header--floating .site-header__inner {
  background: rgba(5,8,20,.32);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 8px 8px 8px 22px;
}
.site-header__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.site-header__logo { display: inline-flex; align-items: center; }
.site-header__nav {
  display: flex;
  gap: 28px;
  justify-self: center;
  font-size: 14px;
  font-weight: 500;
}
.site-header__nav a { opacity: .85; transition: opacity .15s; }
.site-header__nav a:hover { opacity: 1; }
.site-header--floating .site-header__nav a,
.site-header--dark .site-header__nav a { color: white; }
.site-header__actions { display: flex; align-items: center; gap: 12px; }
.site-header__login,
.site-header__refer { font-size: 14px; font-weight: 500; opacity: .85; text-decoration: none; color: inherit; }
.site-header__login:hover,
.site-header__refer:hover { opacity: 1; }
.site-header--floating .site-header__login,
.site-header--floating .site-header__refer { color: white; }
.site-header__refer[hidden] { display: none; }
.site-header__apps {
  width: 36px; height: 36px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--card-border);
}
.site-header--floating .site-header__apps { border-color: rgba(255,255,255,.24); }
.site-header--floating .site-header__apps:hover { background: rgba(255,255,255,.08); }
/* Superpower-style header: 3-col grid with centered wordmark, sits inside the dark hero */
.site-header--sp {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 24px 36px;
  background: transparent;
  border: 0;
  color: white;
  position: relative;
  z-index: 5;
}
/* Collapse-on-scroll: in-hero header fades out smoothly as the pill takes over */
.site-header--sp .site-header__nav--left,
.site-header--sp .site-header__logo--center,
.site-header--sp .site-header__actions {
  transition: opacity .5s cubic-bezier(.4,0,.2,1);
}
.site-header--sp.is-collapsing .site-header__nav--left,
.site-header--sp.is-collapsing .site-header__logo--center,
.site-header--sp.is-collapsing .site-header__actions {
  opacity: 0;
  pointer-events: none;
}
.site-header--sp .site-header__nav--left {
  justify-self: start;
  gap: 26px;
  font-size: 14px;
  font-weight: 500;
}
.site-header--sp .site-header__nav--left a { color: white; opacity: .92; }
.site-header--sp .site-header__nav--left a:hover { opacity: 1; }
.site-header--sp .site-header__logo--center { justify-self: center; }
.site-header--sp .site-header__actions { justify-self: end; gap: 14px; align-items: center; }
.site-header--sp .site-header__login { color: white; font-size: 14px; font-weight: 500; }
.site-header--sp .site-header__pill {
  background: white; color: #000000;
  padding: 9px 18px; font-size: 13.5px; font-weight: 700;
  border-radius: 999px;
}
/* Cart-active flip: the same pill becomes an icon-only square with a
   small numeric badge. Selectors are scoped under the wrapping
   .site-header--sp / .sp-pill__actions so they out-specificity the
   per-breakpoint min-width / padding rules. */
.site-header--sp .site-header__pill.is-cart-active,
.sp-pill__actions .sp-pill__cta.is-cart-active {
  position: relative;
  padding: 0;
  width: 40px;
  height: 40px;
  min-width: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 880px) {
.site-header--sp .site-header__pill.is-cart-active,
  .sp-pill__actions .sp-pill__cta.is-cart-active {
    width: 44px;
    height: 44px;
  }
}
/* Product pages: the empty-state "Shop now" nav pill is redundant (you're
   already on the shopping surface), so hide it — but KEEP the cart glyph,
   which appears once an item is in the cart (updateCartCta adds .is-cart-active).
   So the pill is hidden only while NOT cart-active. */
.site-header__pill[data-pdp-cart]:not(.is-cart-active),
.sp-pill__cta[data-pdp-cart]:not(.is-cart-active) {
  display: none;
}
.site-header--sp .site-header__apps,
.site-header--sp .site-header__ai {
  width: 36px; height: 36px;
  border: 0; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: inherit;
  padding: 0;
}
.site-header--sp .site-header__apps:hover,
.site-header--sp .site-header__ai:hover { opacity: .8; }
/* Internal-page wide nav: same .site-header--sp layout but on a white
   surface, so links/logo flip to ink. Hosted by .sp-page-header which
   sits at the top of the page and matches page-content width. The
   collapse-on-scroll animation is inherited from .site-header--sp. */
.sp-page-header {
  width: 100%;
  background: transparent;
}
.sp-page-header .site-header--sp {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 40px;
  color: var(--ink);
}
.site-header--sp-light .site-header__nav--left a,
.site-header--sp-light .site-header__login {
  color: var(--ink);
  opacity: 1;
}
.site-header--sp-light .site-header__nav--left a:hover,
.site-header--sp-light .site-header__login:hover { color: var(--blurple); opacity: 1; }
.site-header--sp-light .site-header__pill {
  background: #000000;
  color: #ffffff;
  transition: background .15s var(--ease);
}
.site-header--sp-light .site-header__pill:hover { background: var(--blurple); }
.site-header--sp-light .site-header__apps,
.site-header--sp-light .site-header__ai { color: var(--ink); }
@media (max-width: 880px) {
.sp-page-header .site-header--sp { padding: 14px 24px; }
/* On mobile the centered logo column collapses (left nav is hidden),
     so center-justify pushes the wordmark visually right. Pin it
     flush-left so it aligns with the page content's left edge. */
  .sp-page-header .site-header--sp .site-header__logo--center { justify-self: start; }
}
@media (max-width: 599px) {
.sp-page-header .site-header--sp { padding: 14px 20px; }
}
@media (max-width: 360px) {
.sp-page-header .site-header--sp { padding: 14px 16px; }
}
@media (max-width: 880px) {
/* Mobile/tablet: switch to flex so the logo can be flush-left
     without nav-left's content forcing the grid uneven. Actions sit
     absolute on the right. */
  .site-header--sp {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    grid-template-columns: none;
    /* Top + bottom padding bumped (was 14px each) so the "Shop now"
       pill doesn't crowd the rounded hero top edge on phones. Logo +
       actions both sit inside the new padding box; the actions block
       uses top:50%-centering, so a taller header pushes the pill
       further down. Right padding reserves space for the wider
       "Shop now" pill + 44px apps icon + 12px gap + 14px right margin.
       Left padding bumped 16→22 so the wordmark gets visible breathing
       room from the rounded hero left edge. */
    padding: 40px 170px 24px 22px;
  }
.site-header--sp .site-header__nav--left { display: none; }
.site-header--sp .site-header__login { display: none; }
/* Primary commerce CTA — widened on mobile so "Shop now" reads as
     the clear conversion target. Per WCAG 2.5.5 + iOS HIG the pill
     stays ≥44px tall; horizontal padding bumped to 22px so the label
     gets visual breathing room and the button no longer reads as a
     compact "secondary" pill. */
  .site-header--sp .site-header__pill {
    padding: 12px 22px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    min-height: 44px;
    min-width: 104px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
.site-header--sp .site-header__apps,
  .site-header--sp .site-header__ai { width: 44px; height: 44px; }
.site-header--sp .site-header__logo--center { justify-self: auto; }
/* Shrink the wordmark so it doesn't dominate the small viewport. */
  .site-header--sp .site-header__logo--center svg { width: auto; height: 18px; }
.site-header--sp .site-header__actions {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    /* 8px between two 44px-wide targets is fat-finger territory —
       bump to 12px so the Shop pill and apps icon don't get
       cross-tapped on phones. */
    gap: 12px;
    align-items: center;
  }
}
/* Announcement bar — Superpower style: white bg, dark text, thin */
.announcement-bar {
  background: white;
  color: #000000;
  font-size: 13px;
  border-bottom: 0;
  padding: 9px 24px;
}
.announcement-bar__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.announcement-bar__main {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-weight: 400;
  color: #000000;
}
.announcement-bar__loader {
  display: inline-flex; align-items: center;
  color: #000000;
  animation: ann-truck 3.6s ease-in-out infinite;
}
.announcement-bar__cta {
  grid-column: 3;
  justify-self: end;
  font-size: 13px;
  font-weight: 600;
  color: #000000;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity .15s var(--ease);
}
.announcement-bar__cta:hover { opacity: .65; }
/* Inverted variant — dark surface for pages with a white hero so the
   bar visually separates from the page beneath. Auto-applied to
   every non-homepage surface in chrome.js (see renderAnnouncement
   call site); pages can override with data-announcement-variant
   ("light" | "dark") on the data-chrome-top container. */
.announcement-bar--inverted {
  background: var(--ink);
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.announcement-bar--inverted .announcement-bar__main { color: #ffffff; }
.announcement-bar--inverted .announcement-bar__loader { color: #ffffff; }
.announcement-bar--inverted .announcement-bar__cta { color: #ffffff; }
.announcement-bar--inverted .announcement-bar__cta:hover { opacity: .75; }
@media (max-width: 880px) {
/* Mobile/tablet — center the value-prop message. The "Shop now"
     CTA on the right is redundant with the in-hero "Shop now" pill
     below, so hide it and let the whole bar read as a single
     centered promo. */
  .announcement-bar__inner {
    grid-template-columns: 1fr;
    justify-items: center;
  }
.announcement-bar__main { grid-column: 1; font-size: 12px; justify-content: center; }
.announcement-bar__cta { display: none; }
}
@media (max-width: 600px) {
/* Drop the trailing COA tagline on small screens so the free-
     shipping headline stays fully legible without ellipsing. */
  .announcement-bar__rest { display: none; }
}
@media (max-width: 480px) {
/* The RUO bar must NEVER wrap to two lines (owner rule), and its text
     is a verbatim compliance string (owner, 2026-08-08) so no word may be
     dropped to make it fit. Shrink the type instead: 11px clears ~400px
     of string on standard phones. The announcement-bar__main rule stays
     white-space:nowrap, so it can only ever shrink, never wrap. */
  .announcement-bar__main { font-size: 11px; }
}
@media (max-width: 374px) {
/* ≤iPhone SE width: shrink again and drop the flask icon so the full
     verbatim line still fits a 320px viewport on one row. */
  .announcement-bar__main { font-size: 10px; letter-spacing: 0; }
.announcement-bar__loader { display: none; }
}
@media (max-width: 880px) {
.site-header__nav { display: none; }
.site-header__inner { grid-template-columns: auto 1fr; }
}
/* ===== Sitewide painterly footer (pf-*) =====
   Minerva-style hairline grid card on the painterly paint texture,
   with the final-CTA moment inside the stage. Desktop alignment
   contract: fixed 232px LEFT column (logo / tagline / location) and
   fixed 232px RIGHT column (Log in+X / About / Contact / copyright)
   so vertical hairlines run continuously through every row. */
.pf-stage {
  position: relative;
  background: #2f47c0 url("/assets/footer-painterly-bg.webp") center / cover no-repeat;
  /* top padding matches the CTA's bottom margin so the space above and
     below the CTA moment is symmetric */
  padding: clamp(80px, 11vw, 150px) clamp(16px, 3vw, 40px) clamp(16px, 2.5vw, 28px);
  overflow: hidden;
}
.pf-mesh {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 140px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 140px), transparent 100%);
}
.pf-mesh path { fill: none; stroke: rgba(255,255,255,.045); stroke-width: 1; }
.pf-stage > :not(.pf-mesh) { position: relative; z-index: 1; }
/* mobile-only / desktop-only cells (scoped to beat .pf-cell's display) */
.pf-card .pf-only-m { display: none; }
.pf-cta { text-align: center; margin: 0 auto clamp(80px, 11vw, 150px); max-width: 980px; }
.pf-cta__h {
  margin: 0 0 clamp(28px, 4vw, 42px);
  font: 600 clamp(30px, 3.6vw, 48px)/1.15 var(--font-display);
  letter-spacing: -0.015em; color: #fff;
  text-wrap: balance;
}
.pf-cta__btns { display: flex; gap: 18px; justify-content: center; }
.pf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: #0a0a14; text-decoration: none;
  font: 600 15.5px/1 var(--font-meta);
  padding: 16px 48px; border-radius: 3px;
  transition: transform .15s ease, background .15s ease;
}
.pf-btn:hover { background: #eef0ff; transform: translateY(-1px); }
.pf-card {
  max-width: 1360px; margin: 0 auto;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 4px;
  background: rgba(10, 14, 50, .08);
  color: #fff;
  font-family: var(--font-meta);
}
.pf-row { display: flex; }
.pf-row + .pf-row, .pf-mid, .pf-ruo, .pf-row--bottom { border-top: 1px solid rgba(255,255,255,.32); }
.pf-cell {
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  padding: 0 14px; min-height: 54px;
  font-size: 13px; font-weight: 500; letter-spacing: .01em;
  color: #fff; text-decoration: none; text-align: center;
}
.pf-cell + .pf-cell { border-left: 1px solid rgba(255,255,255,.32); }
.pf-cell--muted { color: rgba(255,255,255,.6); font-size: 12px; font-weight: 400; }
.pf-cell--spacer { flex: 1 1 0; }
/* fixed outer columns — these make the verticals line up */
.pf-cell--coll { flex: 0 0 232px; }
.pf-cell--colr { flex: 0 0 232px; }
.pf-row--head .pf-cell { min-height: 64px; }
.pf-cell--login { flex: 0 0 116px; }
.pf-cell--icon { flex: 0 0 116px; }
/* Phone number — sits beside the logo in the footer head row. */
.pf-cell--phone { flex: 0 0 auto; gap: 8px; white-space: nowrap; }
.pf-cell--phone svg { width: 14px; height: 14px; flex: none; opacity: .9; }
.pf-cell--icon svg { display: block; width: 16px; height: 16px; }
/* middle block: grid — tagline spans nav + links rows on desktop */
.pf-mid {
  display: grid;
  grid-template-columns: 232px 1fr;
  grid-template-rows: auto auto;
}
.pf-cell--tag {
  grid-column: 1; grid-row: 1 / 3;
  border-right: 1px solid rgba(255,255,255,.32);
  color: rgba(255,255,255,.6); font-size: 12.5px; font-weight: 400;
  gap: 7px;
}
.pf-flag { width: 18px; height: auto; flex: none; opacity: .85; }
.pf-row--nav, .pf-row--links { display: flex; grid-column: 2; min-width: 0; }
.pf-row--nav { grid-row: 1; border-bottom: 1px solid rgba(255,255,255,.32); }
.pf-row--links { grid-row: 2; }
.pf-row--nav .pf-cell, .pf-row--links .pf-cell { flex: 1 1 0; min-height: 54px; }
.pf-row--nav .pf-cell--colr, .pf-row--links .pf-cell--colr { flex: 0 0 232px; }
.pf-row--links .pf-cell { font-size: 12.5px; font-weight: 400; color: rgba(255,255,255,.88); }
.pf-row--nav .pf-cell:first-child, .pf-row--links .pf-cell:first-child { border-left: 0; }
.pf-ruo { padding: 22px 32px; }
.pf-ruo p {
  margin: 0;
  font-size: 11.5px; line-height: 1.7; font-weight: 400;
  color: rgba(255,255,255,.55);
}
.pf-ruo p strong { color: rgba(255,255,255,.75); font-weight: 600; }
.pf-row--bottom .pf-cell { min-height: 52px; }
@media (max-width: 880px) {
.pf-cta__btns { flex-direction: column; gap: 14px; }
.pf-btn { width: 100%; padding: 16px 20px; box-sizing: border-box; font-size: 14.5px; }
/* primary (catalog) button is the biggest on mobile */
  .pf-cta__btns .pf-btn:first-child { padding: 21px 20px; font-size: 17px; }
.pf-card .pf-only-m { display: flex; }
.pf-card .pf-only-d { display: none !important; }
.pf-cell--spacer { display: none; }
/* head row: centered logo only */
  .pf-cell--logo { flex: 1 1 100%; justify-content: center; padding: 0; border-left: 0 !important; min-height: 58px !important; }
/* middle stack: nav strip / tagline / legal grid */
  .pf-mid { display: flex; flex-direction: column; }
.pf-row--nav { order: 1; border-bottom: 0; }
.pf-cell--tag { order: 2; border-right: 0; border-top: 1px solid rgba(255,255,255,.32); min-height: 44px; font-size: 11.5px; }
.pf-row--links { order: 3; border-top: 1px solid rgba(255,255,255,.32); flex-wrap: wrap; }
.pf-row--nav .pf-cell { flex: 1 1 0; min-height: 44px; font-size: 11.5px; font-weight: 500; padding: 0 4px; }
.pf-row--nav .pf-cell--colr { flex: 1 1 0; }
.pf-row--links .pf-cell,
  .pf-row--links .pf-cell--colr {
    flex: 1 1 33.333%; box-sizing: border-box; min-height: 44px;
    font-size: 11.5px; font-weight: 400; color: rgba(255,255,255,.8);
  }
.pf-row--links .pf-cell:nth-child(4) { border-left: 0; }
.pf-row--links .pf-cell:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,.32); }
.pf-ruo { padding: 18px 20px; }
.pf-ruo p { font-size: 10.5px; }
/* bottom row: location · copyright · Log in · X */
  .pf-row--bottom .pf-cell { min-height: 44px; }
.pf-cell--loc { flex: 1 1 auto; border-left: 0 !important; font-size: 10px; padding: 0 8px; }
.pf-cell--copy { flex: 1.5 1 auto; padding: 0 8px; font-size: 10px; }
.pf-cell--login-m { flex: 0 0 58px; font-size: 10px; font-weight: 500; padding: 0 4px; color: #fff; }
.pf-cell--icon-m { flex: 0 0 50px; padding: 0 4px; }
.pf-cell--icon-m svg { width: 13px; height: 13px; }
}
/* Trigger button: slight rotate on hover hint at "open" */
.site-header__apps,
.sp-pill__apps {
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), opacity .2s;
}
.site-header__apps:hover,
.sp-pill__apps:hover {
  transform: rotate(90deg);
  opacity: 1;
}

/* The comparison tables carry a first column that is the row's subject — a
   vendor or a compound — so it gets the emphasis the legal tables don't need,
   and a floor so a name never wraps to one word per line on mobile. Everything
   else above is the lg-table component, co-scoped rather than restated: this
   file is the only place these rules live, and .rw-compare-table pages were
   rendering on browser defaults until 2026-08-13 because nothing defined it. */
.rw-compare-table { margin: 0; }
.rw-compare-table td:first-child { color: var(--ink); font-weight: 600; min-width: 8.5em; }
/* The first column is the row's subject and is set in ink — which silently
   swallowed the vendor links, since link_vendors.py puts the anchor exactly
   there. An invisible link is a broken one: the whole argument for linking
   competitors is that the claims are checkable, and a reader who cannot see
   the affordance never checks. Underline rather than colour, so the column
   keeps reading as a heading column and the row stays scannable. */
.rw-compare-table a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--blurple);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.rw-compare-table a:hover { color: var(--blurple); }
.rw-compare-table + p { font-size: 13px; color: var(--slate-2); margin-top: 10px; }

/* ── The store's row in a comparison table ───────────────────────────────
   One row in each table is the one the reader is meant to act on. It gets a
   blurple hairline on all four sides and a tinted ground so it reads as a
   distinct cell block rather than another row, plus a pill on the brand.

   The border is drawn with box-shadow rather than `border`, because the
   table is border-collapse: collapse — a real border on a <tr> is dropped by
   every engine, and putting it on the cells leaves gaps at the joins. */
.rw-compare-table tr.rw-row--featured > td {
  background: #F2F3FF;
  box-shadow: inset 0 1px 0 var(--blurple), inset 0 -1px 0 var(--blurple);
  position: relative;
}
.rw-compare-table tr.rw-row--featured > td:first-child {
  box-shadow: inset 1px 1px 0 var(--blurple), inset 0 -1px 0 var(--blurple);
}
.rw-compare-table tr.rw-row--featured > td:last-child {
  box-shadow: inset -1px 1px 0 var(--blurple), inset 0 -1px 0 var(--blurple);
}
.rw-compare-table tr.rw-row--featured a { text-decoration-color: var(--blurple); }

.rw-brand-pill {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blurple);
  color: #fff;
  font-family: var(--font-meta);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}