/* PeptidesBySwomp — shared design system */
/*
  Dark mode philosophy:
  - Light theme = paper-white scientific document.
  - Dark theme = pro lab terminal: NOT inverted. Cooler, deeper background (#0A0E14, near-black w/ blue cast),
    lower-saturation accent (#4A8EFF), warmer body text (#D6DEEB), softer mint/orange.
    Dark hero stays as the brand "ink slab" but lifts to a lighter near-black so it still reads
    as a distinct surface against the page. Brand mark inverts. Drawer/cards lift one elevation step.
*/
:root{
  /* Light — unchanged */
  --paper:#F4F5F7;
  --paper-2:#FAFAF7;
  --paper-3:#FFFFFF;          /* highest elevation card */
  --ink:#0B1220;
  --ink-2:#1A2332;            /* hero slab */
  --ink-soft:#2a3344;
  --on-ink:#FFFFFF;           /* text/icon color on .ink-2 surfaces */
  --steel:#8A94A6;
  --steel-2:#6b7689;
  --rule:#e3e6eb;
  --rule-strong:#cfd5dc;
  --accent:#1F50C8;
  --accent-2:#1F50C8;         /* accent on dark hero — same in light */
  --accent-soft:rgba(31,80,200,0.10);
  --accent-glow:rgba(31,80,200,0.32);
  --mint:#3DDC97;
  --orange:#FF4D1A;
  --violet:#7C5CFF;
  --mercury:#C0C0C8;
  --row-hover:rgba(31,80,200,0.05);
  --group-bg:var(--paper);
  --hero-grid:rgba(255,255,255,0.025);
  --code-bg:#0E1726;
  --shadow-pop:0 12px 40px rgba(11,18,32,0.12);
  --display:'Inter Tight',-apple-system,BlinkMacSystemFont,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --serif:'GT Sectra','Tiempos Headline',Georgia,serif;
}
html[data-theme="dark"]{
  /* Dark — purposefully NOT a flip. Surfaces step UP in lightness as elevation increases. */
  --paper:#0A0E14;            /* page bg — near-black, slight blue */
  --paper-2:#10151E;           /* primary surface (cards, tables, inputs) */
  --paper-3:#161C28;           /* highest elevation (drawers, popovers) */
  --ink:#E6ECF5;               /* primary body/headings */
  --ink-2:#161C28;             /* hero slab — lifted, not pure black, so it reads as a surface */
  --ink-soft:#C8D2E0;          /* secondary body (long-form prose, status pill text, etc.); ~11.5:1 on --paper */
  --on-ink:#E6ECF5;            /* hero text stays light-on-darker */
  --steel:#6E7B92;             /* muted but readable on near-black */
  --steel-2:#9AA6BD;
  --rule:#1B2230;
  --rule-strong:#283044;
  --accent:#4A8EFF;            /* desaturated, less retina-burn at night */
  --accent-2:#4A8EFF;
  --accent-soft:rgba(74,142,255,0.12);
  --accent-glow:rgba(74,142,255,0.30);
  --mint:#3DDC97;              /* unchanged — works in both */
  --orange:#FF6A3D;            /* slightly softer */
  --violet:#9B85FF;
  --mercury:#8A93A8;
  --row-hover:rgba(74,142,255,0.06);
  --group-bg:#0D1219;          /* slightly darker than table to read as a header band */
  --hero-grid:rgba(255,255,255,0.02);
  --code-bg:#080C12;
  --shadow-pop:0 12px 40px rgba(0,0,0,0.5);
}
html,body{transition:background-color .25s ease,color .25s ease}
html[data-theme="dark"] img{filter:brightness(0.92) contrast(1.02)}
/* The brand mark: in light it's a black diamond on white; in dark it should NOT invert
   to white-on-black inside the nav (already dark) — we keep the diamond visible by
   recoloring its parts. */
html[data-theme="dark"] .nav-mark{background:transparent;border-color:var(--steel-2)}
html[data-theme="dark"] .nav-mark::before{background:var(--ink)}

/* Theme toggle — minimalist sun/moon, lives in nav */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:1px solid var(--rule);border-radius:3px;cursor:pointer;color:var(--steel-2);transition:color .15s ease,border-color .15s ease,background .15s ease;flex-shrink:0;padding:0}
@media(min-width:768px){.theme-toggle{width:34px;height:32px}}
.theme-toggle:hover{color:var(--ink);border-color:var(--rule-strong)}
.theme-toggle svg{width:15px;height:15px;display:block;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.theme-toggle:hover svg{transform:rotate(-12deg)}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
html[data-theme="dark"] .theme-toggle{color:var(--steel-2);border-color:var(--rule-strong)}
html[data-theme="dark"] .theme-toggle:hover{color:var(--ink)}
html[data-theme="dark"] .theme-toggle .icon-sun{display:block}
html[data-theme="dark"] .theme-toggle .icon-moon{display:none}
html[data-theme="dark"] .theme-toggle:hover svg{transform:rotate(15deg) scale(1.05)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}

/* Focus-ring system: keyboard-only ring, painted outside the element so it never
   overlaps content. Form fields keep their own existing soft halo (set per-field
   via box-shadow); we suppress the global outline for them. */
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.btn:focus-visible{outline-offset:3px}
.theme-toggle:focus-visible{outline-offset:2px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,
.field-dark input:focus-visible,.field-dark select:focus-visible,.field-dark textarea:focus-visible{outline:none}

/* ── typography helpers ── */
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.eyebrow-dark{color:#9aa5ba}
.h1{font-family:var(--display);font-weight:600;font-size:clamp(36px,5vw,56px);line-height:1.02;letter-spacing:-0.025em;margin:0}
.h2{font-family:var(--display);font-weight:600;font-size:clamp(28px,3.5vw,40px);line-height:1.05;letter-spacing:-0.022em;margin:0}
.h3{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.2;letter-spacing:-0.015em;margin:0}
.sub{color:var(--steel-2);font-size:18px;line-height:1.55;font-weight:400}
.sub-dark{color:#b4bdcc}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.mono-num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── layout ── */
.container{max-width:1280px;margin:0 auto;padding:0 32px}
.section{padding:96px 0;border-top:1px solid var(--rule)}
.section-dark{padding:96px 0;background:var(--ink-2);color:#fff}
.section-dark .sub{color:#b4bdcc}

/* ── header ── */
#site-header{display:contents}
html.drawer-open{overflow:hidden}
.nav{position:sticky;top:0;z-index:50;background:var(--paper);background:color-mix(in srgb, var(--paper) 85%, transparent);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--rule)}
.nav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 32px;gap:24px}
.nav-brand{display:flex;align-items:center;gap:12px}
.nav-mark{width:32px;height:32px;border:1px solid var(--ink);display:grid;place-items:center;background:var(--paper-2)}
.nav-mark::before{content:'';width:10px;height:10px;background:var(--ink);transform:rotate(45deg)}
.nav-wordmark{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-0.02em;color:var(--ink)}
.nav-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--steel);text-transform:uppercase;margin-top:1px}
.nav-links{display:flex;align-items:center;gap:22px;flex-wrap:nowrap;white-space:nowrap}
.nav-links a{font-size:14px;color:var(--steel-2);position:relative;padding:6px 0}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{content:'';position:absolute;left:0;right:0;bottom:-15px;height:1px;background:var(--ink)}
.nav-right{display:flex;align-items:center;gap:12px}
.saved-pill{display:inline-flex;align-items:center;gap:6px;padding:12px 14px;border:1px solid var(--ink);border-radius:99px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--paper-2);white-space:nowrap;flex-shrink:0;color:var(--ink);min-height:44px}
@media(min-width:768px){.saved-pill{padding:6px 10px;min-height:0}}
.saved-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.acct{display:inline-flex;align-items:center;gap:6px;padding:12px 14px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;flex-shrink:0;min-height:44px}
@media(min-width:768px){.acct{padding:6px 10px;min-height:0}}
html[data-theme="dark"] .acct{background:var(--paper-3);color:var(--ink);border:1px solid var(--rule-strong)}

/* ── mobile hamburger + drawer (Phase 1) ── */
/* Hamburger button — hidden by default (desktop), revealed at <1024px in the media query at the bottom of this file. */
.nav-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:1px solid var(--rule);border-radius:3px;color:var(--ink);cursor:pointer;padding:0;flex-shrink:0;transition:color .15s ease,border-color .15s ease,background .15s ease}
.nav-burger:hover{border-color:var(--rule-strong)}
.nav-burger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav-burger svg{display:block;width:24px;height:24px}

/* Backdrop — full viewport overlay, fades in/out. Opacity 0 + pointer-events:none when closed. */
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.4);opacity:0;pointer-events:none;z-index:90;transition:opacity 240ms ease-out}
.drawer-backdrop.open{opacity:1;pointer-events:auto}

/* Drawer — right-slide, full-height, theme-aware via vars. */
.drawer-mobile{position:fixed;top:0;right:0;bottom:0;width:min(320px,85vw);background:var(--paper-2);border-left:1px solid var(--rule);box-shadow:-12px 0 32px rgba(0,0,0,0.12);transform:translateX(100%);transition:transform 240ms ease-out;z-index:100;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
.drawer-mobile.open{transform:translateX(0)}
html[data-theme="dark"] .drawer-mobile{box-shadow:-12px 0 32px rgba(0,0,0,0.5)}

/* Close-X button — top-right inside drawer */
.drawer-mobile-close{position:absolute;top:8px;right:8px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;color:var(--ink);cursor:pointer;padding:0;border-radius:3px;transition:background .15s ease}
.drawer-mobile-close:hover{background:var(--paper-3)}
.drawer-mobile-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.drawer-mobile-close svg{width:24px;height:24px;display:block}

/* Drawer nav list — vertical stack, padded for close-X clearance at top */
.drawer-mobile-list{display:flex;flex-direction:column;padding:64px 0 24px;flex:1}

/* Drawer rows — 56px tappable, theme-flipping, accent left-border on active */
.drawer-mobile-row{display:flex;align-items:center;min-height:56px;padding:0 24px;font-family:var(--body);font-size:18px;font-weight:500;color:var(--ink);border-left:2px solid transparent;transition:background .15s ease,border-color .15s ease;text-decoration:none;text-align:left;width:100%}
.drawer-mobile-row:hover{background:var(--paper-3)}
.drawer-mobile-row.active{border-left-color:var(--accent)}
.drawer-mobile-row.active:hover{background:var(--paper-3)}
.drawer-mobile-row:focus-visible{outline:none;background:var(--accent-soft);border-left-color:var(--accent)}

/* Divider between primary nav and account row */
.drawer-mobile-divider{height:0;border:0;border-top:1px solid var(--rule);margin:8px 24px}

/* Account row — same treatment as primary rows; copy stays a stub per CONTEXT.md (no supplier identity) */
.drawer-mobile-account{color:var(--ink-soft)}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:-0.01em;border-radius:3px;transition:all .15s ease;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-link{padding:0;background:none;color:var(--ink);font-weight:500;border-bottom:1px solid transparent;border-radius:0}
.btn-link:hover{border-bottom-color:var(--accent);color:var(--accent)}
.btn-dark-primary{background:var(--accent);color:#fff}
.btn-dark-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.3)}
.btn-dark-ghost:hover{background:#fff;color:var(--ink-2)}
.btn-sm{padding:12px 14px;font-size:13px;min-height:44px}
@media(min-width:768px){.btn-sm{padding:7px 12px;min-height:0}}

/* ── form fields ── */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.field input,.field select,.field textarea{height:44px;padding:0 14px;border:1px solid var(--rule);background:var(--paper-2);font-family:var(--mono);font-size:16px;color:var(--ink);border-radius:3px;transition:border .15s ease,box-shadow .15s ease;width:100%}
@media(min-width:768px){.field input,.field select,.field textarea{font-size:13px}}
.field textarea{height:auto;padding:12px 14px;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* fields-on-dark-section keep their elevated look across themes */
.field-dark input,.field-dark select,.field-dark textarea{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.18);color:#fff}
.field-dark input::placeholder{color:#6b7689}
.field-dark input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}

/* ── card primitives ── */
.card{background:var(--paper-2);border:1px solid var(--rule);border-radius:4px;padding:24px}
.tile{background:var(--paper-2);border:1px solid var(--rule);border-left:2px solid var(--rule);padding:24px;transition:border-left-color .2s ease,transform .2s ease}
.tile:hover{border-left-color:var(--accent);transform:translateY(-2px)}
.tile-num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:36px;font-weight:500;letter-spacing:-0.02em;color:var(--ink);line-height:1}
.tile-label{margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}

/* ── footer ── */
.footer{border-top:1px solid var(--rule);padding:48px 0 24px;background:var(--paper)}
.footer-cols{display:grid;grid-template-columns:1.4fr 2fr 1.2fr;gap:48px}
.footer h4{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);font-weight:500;margin:0 0 14px}
.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;font-size:14px}
.footer-links a{color:var(--steel-2)}
.footer-links a:hover{color:var(--ink)}
.footer-status{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--steel);text-transform:uppercase;line-height:1.9}
.footer-status .ok{color:var(--mint)}
.footer-bottom{margin-top:36px;padding-top:20px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--steel);line-height:1.7}

/* ── catalog table ── */
.cat-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:28px 0 18px;flex-wrap:wrap}
.cat-chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:11px 16px;border:1px solid var(--rule);border-radius:99px;font-size:13px;color:var(--steel-2);background:var(--paper-2);cursor:pointer;transition:all .12s ease;font-family:var(--body);min-height:44px;display:inline-flex;align-items:center}
@media(min-width:768px){.chip{padding:6px 14px;min-height:0;display:inline-block}}
.chip:hover{border-color:var(--rule-strong);color:var(--ink)}
.chip.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
html[data-theme="dark"] .chip.active{background:var(--paper-3);color:var(--ink);border-color:var(--rule-strong)}
.cat-search{position:relative}
.cat-search input{height:44px;padding:0 14px 0 36px;border:1px solid var(--rule);background:var(--paper-2);border-radius:3px;width:100%;max-width:280px;font-size:16px;font-family:var(--body);color:var(--ink)}
@media(min-width:768px){.cat-search input{height:38px;font-size:13px}}
.cat-search::before{content:'⌕';position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--steel)}
.cat-table{width:100%;border-collapse:collapse;border:1px solid var(--rule);background:var(--paper-2);border-radius:4px;overflow:hidden}
/* Table header band: in light, ink slab w/ paper text. In dark, slightly elevated band so it doesn't blend. */
.cat-table thead th{text-align:left;padding:12px 16px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);background:var(--ink);font-weight:500;border-bottom:1px solid var(--rule)}
html[data-theme="dark"] .cat-table thead th{background:var(--paper-3);color:var(--steel-2);border-bottom:1px solid var(--rule-strong)}
.cat-table tr.cat-group td{padding:18px 16px 14px;background:var(--group-bg);font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-0.015em;color:var(--ink);text-transform:none;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);line-height:1.2}
html[data-theme="dark"] .cat-table tr.cat-group td{border-top:1px solid var(--accent);background:var(--group-bg)}
.cat-table tr.cat-group:first-child td{border-top:0}
.cat-table tbody td{padding:12px 16px;border-top:1px solid var(--rule);font-size:14px;vertical-align:middle;color:var(--ink)}
.cat-table tbody tr.row{transition:background .12s ease}
.cat-table tbody tr.row:hover{background:var(--row-hover);cursor:pointer}
.cat-table .num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.cat-table .price-tier1{font-weight:600;color:var(--ink)}
.cat-table .price-tier2,.cat-table .price-tier3{color:var(--steel-2)}
.save-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:13px 14px;border:1px solid var(--accent);background:transparent;color:var(--accent);border-radius:3px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .12s ease;white-space:nowrap;min-height:44px;min-width:44px}
@media(min-width:768px){.save-btn{padding:5px 10px;min-height:0;min-width:0}}
.save-btn:hover{background:var(--accent-soft)}
.save-btn.saved{background:var(--accent);color:#fff}
.save-btn.saved::before{content:'✓ '}

/* Floating saved drawer button */
.saved-fab{position:fixed;bottom:24px;right:24px;z-index:40;display:inline-flex;align-items:center;gap:10px;padding:14px 20px;background:var(--ink);color:var(--paper);border-radius:4px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;box-shadow:var(--shadow-pop);cursor:pointer;transition:all .15s ease;border:0}
html[data-theme="dark"] .saved-fab{background:var(--paper-3);color:var(--ink);border:1px solid var(--rule-strong)}
.saved-fab:hover{transform:translateY(-2px)}
.saved-fab.has-items{background:var(--accent);color:#fff;box-shadow:0 0 24px var(--accent-glow),var(--shadow-pop);border-color:transparent}
.saved-fab .count{background:rgba(255,255,255,0.18);padding:2px 8px;border-radius:99px;font-variant-numeric:tabular-nums}
html[data-theme="dark"] .saved-fab:not(.has-items) .count{background:rgba(255,255,255,0.06)}

/* RUO bar */
.ruo-bar{background:var(--ink);color:var(--steel);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:8px 16px;border-bottom:1px solid var(--rule)}

/* ──────────────────────────────────────────────────────────────────────────
   Dark-mode overrides for "ink slab" surfaces (heroes, page heads, dark cards).
   In light theme --ink is dark navy, so `background:var(--ink)` reads as a
   dark slab. In dark theme --ink flips to a near-white body color, which would
   turn those slabs WHITE. Force them to use --ink-2 (the lifted slab) in dark.
   These are scoped narrowly to surfaces — not text/borders — so existing
   `color:var(--ink)` / `border-color:var(--ink)` rules keep working.
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .page-head,
html[data-theme="dark"] .page-head .meta .cell,
html[data-theme="dark"] .page-head .pt-cell,
html[data-theme="dark"] .pt-cell,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .api-hero,
html[data-theme="dark"] .pulse-strip,
html[data-theme="dark"] .test-detail,
html[data-theme="dark"] .summary,
html[data-theme="dark"] .quote-cta,
html[data-theme="dark"] .agent-bar,
html[data-theme="dark"] .apply-form,
html[data-theme="dark"] .api-table thead th,
html[data-theme="dark"] .price-table thead th,
html[data-theme="dark"] .cart-table thead th,
html[data-theme="dark"] .test-table th,
html[data-theme="dark"] section.section-dark[style*="--ink"]{
  background: var(--ink-2) !important;
}
html[data-theme="dark"] .ruo-bar{background:#0D1219}
html[data-theme="dark"] .api-table thead th,
html[data-theme="dark"] .cart-table thead th,
html[data-theme="dark"] .test-table th{background:var(--paper-3) !important;color:var(--steel-2)}

/* utility */
.flex{display:flex}.between{justify-content:space-between}.center{align-items:center}.gap-12{gap:12px}.gap-24{gap:24px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:1024px){
  .nav-links{display:none}
  .nav-burger{display:inline-flex}
  .acct{display:none}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr;gap:32px}
  .container{padding:0 20px}
  .section{padding:64px 0}
  .section-dark{padding:64px 0}
}
@media(max-width:767px){
  .nav-inner{padding:14px 16px;gap:12px}
  .nav-sub{display:none}
  .nav-cart-word{display:none}
  .saved-pill{padding:8px 10px;min-height:0;font-size:10.5px}
}

/* ── Mobile catalog scan-row reflow (Phase 2.5): <768px only ── */
.row-disclosure{display:none}
@media(max-width:767px){
  .cat-wrap .table-wrap,
  section .table-wrap{overflow-x:visible;border:0;border-radius:0;-webkit-overflow-scrolling:auto;margin-top:0}
  .cat-table,.price-table{display:block;width:100%;border-collapse:collapse;border:0;background:transparent;border-radius:0;font-size:14px}
  .cat-table thead,.price-table thead{display:none}
  .cat-table tbody,.price-table tbody{display:block}
  .cat-table tr,.price-table tr{display:block}
  .cat-table tr.cat-group,.price-table tr.cat-group{position:sticky;top:0;z-index:1}
  .cat-table tr.cat-group td,.price-table tr.cat-group td{display:block;padding:14px 16px 10px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--group-bg);font-size:15px}
  .cat-table tr.cat-group:first-child td{border-top:0}
  .cat-table tr.row,.price-table tr.row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name price" "sub rfq";align-items:center;column-gap:14px;row-gap:2px;min-height:64px;padding:12px 16px;border-top:1px solid var(--rule);border-bottom:0;cursor:pointer;-webkit-tap-highlight-color:transparent;background:var(--paper-2);transition:background-color .12s ease}
  .cat-table tr.row:hover,.price-table tr.row:hover{background:var(--paper-2)}
  .cat-table tr.row:focus-visible,.price-table tr.row:focus-visible{outline:none;background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
  .cat-table tr.row[aria-expanded="true"],.price-table tr.row[aria-expanded="true"]{background:var(--paper-3)}
  .cat-table tr.row:hover td,.price-table tr.row:hover td{background:transparent}
  .cat-table tr.row > td,.price-table tr.row > td{display:none;padding:0;border:0;background:transparent;line-height:1.3}

  /* cat-table (8 cols): show 1 (name), 2 (per-vial strength), 4 (Tier 1), 8 (RFQ) */
  .cat-table tr.row > td:nth-child(1){display:block;grid-area:name;font-family:var(--body);font-weight:500;font-size:15.5px;color:var(--ink);letter-spacing:-0.005em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cat-table tr.row > td:nth-child(2){display:block;grid-area:sub;font-family:var(--mono);font-size:11.5px;color:var(--steel);letter-spacing:.02em;text-align:left}
  .cat-table tr.row > td:nth-child(4){display:flex;grid-area:price;justify-content:flex-end;align-items:center;font-family:var(--mono);font-size:14px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
  .cat-table tr.row > td:nth-child(4) .small{display:none}
  .cat-table tr.row > td:nth-child(8){display:flex;grid-area:rfq;justify-content:flex-end;align-items:center;text-align:right}

  /* price-table (main, 7 cols, NOT onreq): show 1 (name), 2 (CAS), 3 (Tier 1), 7 (RFQ) */
  .price-table:not(.onreq-table) tr.row > td:nth-child(1){display:block;grid-area:name;font-family:var(--body);font-weight:500;font-size:15.5px;color:var(--ink);letter-spacing:-0.005em;min-width:0}
  .price-table:not(.onreq-table) tr.row > td:nth-child(2){display:block;grid-area:sub;font-family:var(--mono);font-size:11.5px;color:var(--steel);letter-spacing:.02em;text-align:left}
  .price-table:not(.onreq-table) tr.row > td:nth-child(3){display:flex;grid-area:price;justify-content:flex-end;align-items:center;font-family:var(--mono);font-size:14px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
  .price-table:not(.onreq-table) tr.row > td:nth-child(7){display:flex;grid-area:rfq;justify-content:flex-end;align-items:center;text-align:right}

  /* onreq-table (4 cols): show 2 (name), 1 (code as subtitle), 4 (RFQ); no price */
  .price-table.onreq-table tr.row{grid-template-areas:"name rfq" "sub rfq"}
  .price-table.onreq-table tr.row > td:nth-child(2){display:block;grid-area:name;font-family:var(--body);font-weight:500;font-size:15.5px;color:var(--ink);letter-spacing:-0.005em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .price-table.onreq-table tr.row > td:nth-child(1){display:block;grid-area:sub;font-family:var(--mono);font-size:11.5px;color:var(--steel);letter-spacing:.06em;text-align:left;text-transform:uppercase}
  .price-table.onreq-table tr.row > td:nth-child(4){display:flex;grid-area:rfq;justify-content:flex-end;align-items:center;text-align:right}

  /* RFQ button at mobile — already outline-accent in site.css:241; just constrain to 36×36 scan-row size */
  .cat-table tr.row .save-btn,.price-table tr.row .add-btn{min-height:36px;min-width:36px;padding:8px 12px;font-size:11px}

  /* Disclosure (inline accordion) */
  .cat-table tr.row-disclosure,.price-table tr.row-disclosure{display:block;max-height:0;overflow:hidden;transition:max-height 240ms ease-out;background:var(--paper-3);border-top:0}
  .cat-table tr.row[aria-expanded="true"] + tr.row-disclosure,
  .price-table tr.row[aria-expanded="true"] + tr.row-disclosure{max-height:280px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .cat-table tr.row-disclosure td,.price-table tr.row-disclosure td{display:block;padding:12px 16px 14px;border:0}
  .scan-disclosure{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 18px;font-family:var(--mono);font-size:12px;line-height:1.5}
  .scan-disclosure dt{color:var(--steel);text-transform:uppercase;letter-spacing:.06em;font-size:10px;margin:0;font-weight:500;min-width:0}
  .scan-disclosure dd{color:var(--ink);margin:0 0 4px;font-variant-numeric:tabular-nums;font-size:13px;min-width:0;overflow-wrap:anywhere}
}

/* ── In-page anchor nav (Phase v1.2.2) ────────────────────────────────────
   Pinned strip below the global nav; auto-highlights the current section
   via IntersectionObserver. Horizontal scroll on mobile so it never wraps.
   Skips entirely if the page has no .page-toc. */
.page-toc{position:sticky;top:53px;z-index:40;background:color-mix(in srgb, var(--paper) 92%, transparent);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--rule)}
.page-toc-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:28px;padding:10px 32px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.page-toc-inner::-webkit-scrollbar{display:none}
.page-toc-link{font-family:var(--mono);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--steel);white-space:nowrap;padding:6px 0;border-bottom:1px solid transparent;transition:color .15s ease,border-color .15s ease;flex-shrink:0}
.page-toc-link:hover{color:var(--ink)}
.page-toc-link.active{color:var(--ink);border-bottom-color:var(--accent)}
.page-toc-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
@media(max-width:1024px){.page-toc-inner{padding:10px 20px;gap:20px}}
@media(max-width:767px){.page-toc-inner{padding:10px 16px;gap:16px}.page-toc-link{font-size:10.5px;letter-spacing:.08em}}

/* Anchored sections need scroll padding so they aren't hidden under the
   global nav + TOC strip when jumped to. */
:where([id]){scroll-margin-top:120px}

/* Smooth scroll honors the user's reduced-motion preference. */
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}