/* ONEPERCENT PEPTIDES — shared stylesheet
   Minimal black-on-white. Display: League Spartan. Body: Inter. */


:root {
  /* ---- Category accents · DEFINED, NOT FOR UI ------------------------------
     Brand Pack (bible) §06. These five values exist so that anything needing a
     category colour uses the same one as the printed packaging, instead of
     inventing a near-miss. They are deliberately NOT applied to any UI chrome.

     DECISION 2026-07-19 — the accents' digital role is carried by the PRODUCT
     PHOTOGRAPHY (vial cap + label pattern field), not by interface elements.
     The UI stays monochrome, per §06 "colour carries no meaning in the digital
     brand" and §09 "objects, material and light carry the lifestyle".
     Do not use these for chips, buttons, borders, text or backgrounds.        */
  --cat-lean:    #2E5BEA;
  --cat-build:   #E8391F;
  --cat-recover: #33B6DA;
  --cat-glow:    #C48CD9;
  --cat-ageless: #7B3FD4;

  --ink: #0a0a0a;
  --ink-soft: #2b2b2b;   /* Bible §06 supporting tint. Solid buttons sit here, not on pure black. */
  --gray: #565656;
  --line: #e6e6e6;
  --line-soft: #f0f0f0;
  --paper: #ffffff;
  --paper-2: #fafafa;
  --paper-3: #f5f5f5;
  --max: 1200px;
  --display: 'League Spartan', -apple-system, sans-serif;
  --body: 'Inter', -apple-system, system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* accessibility: keyboard focus + skip link */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.hero-full a:focus-visible, .hero-full button:focus-visible, .band a:focus-visible, .cart-drawer .cd-close:focus-visible, .site-footer a:focus-visible { outline-color: #ffffff; }
.skip-link { position: fixed; top: -60px; left: 12px; z-index: 500; background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 8px; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; transition: top .2s var(--ease); }
.skip-link:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; }
/* height:auto is required now that every <img> carries real width/height
   attributes. The attributes give the browser an aspect ratio so it can
   reserve the right box before the image decodes (no layout shift on
   mobile); height:auto stops those same attributes forcing the intrinsic
   pixel height once max-width kicks in. Components that need a fixed height
   set it themselves and win on specificity. */
img, svg { display: block; max-width: 100%; }
img { height: auto; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }

/* ---------- Display type ---------- */
.display {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 0.98;
  text-transform: uppercase;
}
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; }
.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gray);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.brand {
  font-family: var(--display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  display: flex; align-items: baseline; gap: 0;
}
.brand .pct { font-weight: 400; }
.brand { color: var(--brand-col, var(--ink)); transition: color .2s var(--ease); }
.brand-logo { display: inline-block; height: 24px; width: 82px; background: currentColor; -webkit-mask: url(images/logo-mask.png?v=2026080303) left center/contain no-repeat; mask: url(images/logo-mask.png?v=2026080303) left center/contain no-repeat; }
@media (max-width: 760px){ .brand-logo { height: 21px; width: 72px; } }
.tm { font-size: 0.68em; font-weight: 800; position: relative; top: -0.62em; left: 1.5px; letter-spacing: 0; line-height: 0; }
.foot-brand .display .tm { font-size: 0.3em; top: -1.28em; }
.nav-links { display: flex; gap: 34px; align-items: center; }
.nav-links a {
  font-family: var(--display);
  font-weight: 600; font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
  transition: color .2s var(--ease); position: relative; padding: 4px 0;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1.5px; background: var(--ink); transition: width .3s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after { width: 100%; }
.nav-cta {
  border: 1.5px solid var(--ink); border-radius: 100px;
  padding: 9px 20px !important;
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--ink-soft); color: var(--paper) !important; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--ink); padding: 4px; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.nav-toggle svg { display: block; stroke: var(--ink); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 15px 30px; border-radius: 100px; cursor: pointer;
  transition: all .28s var(--ease); border: 1.5px solid var(--ink);
}
.btn-solid { background: var(--ink-soft); color: var(--paper); box-shadow: 0 8px 22px -12px rgba(0,0,0,0.5); }
.btn-solid:hover { background: var(--paper); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink-soft); color: var(--paper); }
.btn .arw { transition: transform .28s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

/* ---------- Hero ---------- */
.hero { padding: 90px 0 70px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(52px, 8.5vw, 118px); line-height: 0.9; }
.hero h1 .thin { font-weight: 400; }
.hero-sub { font-size: 18px; color: var(--gray); max-width: 440px; margin: 26px 0 34px; line-height: 1.65; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-badge-row { display: flex; gap: 28px; margin-top: 44px; flex-wrap: wrap; }
.hero-badge { display: flex; flex-direction: column; }
.hero-badge b { font-family: var(--display); font-size: 26px; font-weight: 800; }
.hero-badge span { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); }

/* Hero vial art */
.hero-art { display: flex; align-items: center; justify-content: center; }
.vial-stage {
  width: 100%; aspect-ratio: 1/1; max-width: 420px;
  border: 1px solid var(--line); border-radius: 28px;
  background: #ffffff;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.vial-stage::before {
  content: '1%'; position: absolute; top: 22px; left: 24px;
  font-family: var(--display); font-weight: 900; font-size: 15px; letter-spacing: 0.1em;
}
.vial-stage::after {
  content: 'RESEARCH GRADE'; position: absolute; bottom: 22px; right: 24px;
  font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: 0.24em; color: var(--gray);
}

/* ---------- Marquee strip ---------- */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ink); color: var(--paper); overflow: hidden; }
.strip-track { display: flex; gap: 48px; padding: 16px 0; white-space: nowrap; animation: scroll 32s linear infinite; }
.strip-track span { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.9; display: inline-flex; align-items: center; gap: 48px; }
.strip-track span::after { content: '●'; font-size: 8px; opacity: 0.5; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- Section ---------- */
.section { padding: 96px 0; }
.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(34px, 5vw, 60px); line-height: 0.98; margin: 14px 0 18px; }
.section-head p { color: var(--gray); font-size: 17px; }
.section-alt { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------- Product grid ---------- */
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.prod-card {
  background: var(--paper); padding: 34px 30px 30px; position: relative;
  transition: background .3s var(--ease); min-height: 320px;
  display: flex; flex-direction: column;
}
.prod-card:hover { background: var(--paper-2); }
.prod-card .cat { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray); }
.prod-card .pname { font-family: var(--display); font-weight: 800; font-size: 30px; text-transform: uppercase; line-height: 1; margin: 12px 0 10px; }
.prod-card .pdesc { font-size: 14px; color: var(--gray); line-height: 1.55; }
.prod-icon { margin: 18px 0 auto; height: 88px; display: flex; align-items: center; }
.prod-card .go {
  margin-top: 20px; font-family: var(--display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; display: inline-flex; gap: 8px; align-items: center;
}
.prod-card .go .arw { transition: transform .28s var(--ease); }
.prod-card:hover .go .arw { transform: translateX(5px); }
.prod-card .num { position: absolute; top: 26px; right: 28px; font-family: var(--display); font-weight: 700; font-size: 12px; color: var(--line); }
.prod-card:hover .num { color: var(--gray); }

/* ---------- Feature / trust ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.feat { }
.feat .fnum { font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: 0.1em; padding-bottom: 16px; border-bottom: 2px solid var(--ink); display: inline-block; margin-bottom: 20px; }
.feat h3 { font-size: 22px; margin-bottom: 10px; }
.feat p { color: var(--gray); font-size: 15px; }

/* ---------- Split band ---------- */
.band { background: var(--ink); color: var(--paper); }
.band .wrap { padding-top: 100px; padding-bottom: 100px; }
.band h2 { font-size: clamp(36px, 5.5vw, 68px); line-height: 0.95; }
.band p { color: #b9b9b9; font-size: 17px; max-width: 520px; margin: 22px 0 34px; }
.band .btn { border-color: var(--paper); color: var(--paper); }
.band .btn.btn-solid { background: var(--paper); color: var(--ink); }
.band .btn.btn-solid:hover { background: transparent; color: var(--paper); }
.band .btn-ghost:hover { background: var(--paper); color: var(--ink); }

/* ---------- Product detail page ---------- */
.pd-hero { padding: 60px 0 40px; border-bottom: 1px solid var(--line); }
.breadcrumb { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); margin-bottom: 34px; }
.breadcrumb a:hover { color: var(--ink); }
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.pd-visual { aspect-ratio: 4/5; border: 1px solid var(--line); border-radius: 24px; background: #ffffff; display: flex; align-items: center; justify-content: center; position: relative; }
.pd-visual .tagchip { position: absolute; top: 22px; left: 22px; font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid var(--ink); border-radius: 100px; padding: 6px 12px; }
.pd-cat { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray); }
.pd-title { font-size: clamp(44px, 6vw, 76px); line-height: 0.92; margin: 14px 0 8px; }
.pd-alias { font-family: var(--body); font-weight: 400; text-transform: none; font-size: 15px; color: var(--gray); letter-spacing: 0; }
.pd-lead { font-size: 17px; color: var(--ink-soft); margin: 24px 0 28px; line-height: 1.7; }
.spec-table { border-top: 1px solid var(--line); margin: 8px 0 30px; }
.spec-row { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.spec-row .k { font-family: var(--display); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px; color: var(--gray); }
.spec-row .v { font-weight: 500; text-align: right; }

/* what's-in-the-box note */
.kit-note { display: flex; gap: 12px; align-items: flex-start; background: var(--paper-3); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0 0 22px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.kit-ico { width: 20px; height: 20px; flex-shrink: 0; color: var(--ink); }
.kit-note b { font-family: var(--display); letter-spacing: 0.03em; }

/* product -> journal deep-dive card */
.journal-cta { display: flex; gap: 34px; align-items: center; border: 1px solid var(--line); border-radius: 22px; padding: 32px 36px; transition: background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.journal-cta:hover { background: var(--paper-2); box-shadow: 0 24px 56px -32px rgba(0,0,0,0.4); transform: translateY(-3px); }
.journal-cta-sym { width: 104px; height: 104px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(130% 110% at 50% 15%, #ffffff, #eef3f4 60%, #e1e9ea); display: flex; align-items: center; justify-content: center; padding: 26px; }
.journal-cta-sym .jsym { width: 100%; height: 100%; }
.journal-cta-body h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -0.01em; line-height: 1.05; margin: 8px 0 10px; }
.journal-cta-body p { color: var(--gray); font-size: 15px; line-height: 1.55; max-width: 640px; margin-bottom: 14px; }
.journal-cta .post-go .arw { transition: transform .3s var(--ease); }
.journal-cta:hover .post-go .arw { transform: translateX(5px); }
@media (max-width: 640px) { .journal-cta { flex-direction: column; align-items: flex-start; gap: 22px; padding: 26px; } }

/* product body: bold lead + mechanism callout */
.pd-cols .lead-p { font-size: 19px; line-height: 1.62; color: var(--ink); font-weight: 500; }
.mech-callout { background: var(--ink); color: var(--paper); border-radius: 18px; padding: 28px 30px; margin-top: 34px; }
.mech-callout .eyebrow { color: #8a8a8a; margin-bottom: 10px; }
.mech-callout p:last-child { color: #e6e6e6; font-size: 16px; line-height: 1.62; margin: 0; }

/* long-form product body */
.pd-body { padding: 80px 0; }
.pd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.pd-cols h3 { font-size: 15px; letter-spacing: 0.14em; margin-bottom: 14px; }
/* research section headers — made to stand out */
.pd-cols h3.eyebrow { color: var(--ink); font-size: 17px; font-weight: 800; letter-spacing: 0.14em; line-height: 1.15; padding-bottom: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--line); position: relative; }
.pd-cols h3.eyebrow::before { content: ''; position: absolute; left: 0; bottom: -1px; width: 46px; height: 3px; background: var(--ink); }
.pd-cols p { color: var(--gray); font-size: 15px; margin-bottom: 14px; }
.pd-cols ul { list-style: none; }
.pd-cols li { font-size: 15px; color: var(--ink-soft); padding: 11px 0 11px 24px; border-bottom: 1px solid var(--line-soft); position: relative; }
.pd-cols li::before { content: ''; position: absolute; left: 0; top: 20px; width: 9px; height: 1.5px; background: var(--ink); }

/* related */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }

/* ---------- Disclaimer ---------- */
.disclaimer { background: var(--paper-3); border: 1px solid var(--line); border-radius: 16px; padding: 28px 30px; }
.disclaimer .eyebrow { margin-bottom: 10px; }
.disclaimer p { font-size: 13px; color: var(--gray); line-height: 1.65; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--paper); padding: 80px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.foot-brand .display { font-size: 34px; }
.foot-brand p { color: #9a9a9a; font-size: 14px; margin-top: 16px; max-width: 300px; }
.foot-col h4 { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #8a8a8a; margin-bottom: 18px; }
.foot-col a { display: block; color: #d4d4d4; font-size: 14px; padding: 6px 0; transition: color .2s var(--ease); }
.foot-col a:hover { color: var(--paper); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 64px; padding-top: 28px; border-top: 1px solid #262626; flex-wrap: wrap; }
.foot-bottom p { color: #7a7a7a; font-size: 12.5px; }
.foot-slogan { font-family: var(--display); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; }

/* ---------- Lab gallery ---------- */
.lab-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.lab-card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.lab-card:hover { transform: translateY(-4px); box-shadow: 0 18px 50px -26px rgba(0,0,0,0.35); }
.lab-viz { aspect-ratio: 4/3; background: radial-gradient(130% 110% at 50% 10%, #ffffff 0%, #f5f6f7 55%, #edeef0 100%); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 22px; }
.lab-viz svg { width: 100%; height: 100%; }
.lab-cap { padding: 20px 22px 22px; }
.lab-cap b { font-family: var(--display); font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: 0.02em; display: block; margin-bottom: 5px; }
.lab-cap span { font-size: 13px; color: var(--gray); line-height: 1.5; }
@media (max-width: 900px) { .lab-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lab-grid { grid-template-columns: 1fr; } }

/* ---------- About redesign ---------- */
.about-lead { max-width: 920px; margin-bottom: 34px; }
.about-statement { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.0; font-size: clamp(30px, 4.4vw, 58px); margin-top: 14px; }
.about-body { columns: 2; column-gap: 52px; max-width: 940px; margin-bottom: 84px; }
.about-body p { break-inside: avoid; margin-bottom: 16px; color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
@media (max-width: 700px) { .about-body { columns: 1; } }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.principle { background: var(--paper); padding: 34px 30px; min-height: 210px; transition: background .3s var(--ease); }
.principle:hover { background: var(--paper-2); }
.principle .pn { font-family: var(--display); font-weight: 900; font-size: 14px; letter-spacing: 0.1em; padding-bottom: 14px; border-bottom: 2px solid var(--ink); display: inline-block; margin-bottom: 18px; }
.principle h4 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 19px; letter-spacing: -0.01em; margin-bottom: 10px; }
.principle p { color: var(--gray); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 900px) { .principle-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .principle-grid { grid-template-columns: 1fr; } }

/* ---------- Hero right-side drawing ---------- */
/* Category range hero — cinematic image band (scoped to the 5 category pages) */
/* Full plate shown (height:auto) so the vial is never cropped; copy overlays the dark left. */
.pd-hero.cat-hero { position: relative; overflow: hidden; background: #0a0a0a; border-bottom: none; padding: 0; }
.pd-hero.cat-hero .cat-hero-photo { display: block; width: 100%; }
.pd-hero.cat-hero .cat-hero-photo img { display: block; width: 100%; height: auto; }
.pd-hero.cat-hero .cat-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(9,10,12,0.92) 0%, rgba(9,10,12,0.66) 32%, rgba(9,10,12,0.12) 58%, rgba(9,10,12,0) 76%); }
.pd-hero.cat-hero > .wrap { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; }
.pd-hero.cat-hero .breadcrumb, .pd-hero.cat-hero .breadcrumb a { color: #aeb3ba; }
.pd-hero.cat-hero .eyebrow { color: #9aa2aa; }
.pd-hero.cat-hero .pd-title { color: #fff; }
.pd-hero.cat-hero .pd-lead { color: #c7ccd2; }
@media (max-width: 768px) {
  /* stacked: full plate banner on top, copy on solid black below */
  .pd-hero.cat-hero .cat-scrim { display: none; }
  .pd-hero.cat-hero > .wrap { position: static; display: block; background: #0a0a0a; padding-top: 24px; padding-bottom: 30px; }
}

.has-hero-deco { position: relative; overflow: hidden; }
.has-hero-deco > .wrap { position: relative; z-index: 1; }
.hero-deco { position: absolute; right: -2%; top: 50%; transform: translateY(-50%); width: 40%; max-width: 500px; z-index: 0; opacity: 0.92; }
.hero-deco svg { width: 100%; height: auto; }
@media (max-width: 940px) { .hero-deco { display: none; } }

/* ---------- Lab Testing: CoA + handling redesign ---------- */
.coa-split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; }
.coa-visual { aspect-ratio: 4/3; border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(130% 110% at 50% 12%, #fff 0%, #eef3f4 55%, #e1e9ea 100%); display: flex; align-items: center; justify-content: center; padding: 34px; }
.coa-visual svg { width: 76%; height: auto; }
.coa-text p { color: var(--gray); font-size: 16px; line-height: 1.7; margin-bottom: 14px; }
.handling-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.handling-card { background: var(--paper); padding: 28px 24px; transition: background .3s var(--ease); }
.handling-card:hover { background: var(--paper-2); }
.handling-card.hc-slogan { background: var(--ink); display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.handling-card.hc-slogan:hover { background: var(--ink); box-shadow: none; transform: none; }
.handling-card.hc-slogan .hc-eyebrow { color: var(--accent-bright); font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 11px; letter-spacing: 0.14em; }
.handling-card.hc-slogan b { color: #fff; font-family: var(--display); font-weight: 900; text-transform: none; letter-spacing: -0.01em; font-size: 21px; line-height: 1.05; margin: 0; }
.handling-card .h-ico { width: 24px; height: 24px; margin-bottom: 16px; }
.handling-card b { display: block; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 13.5px; letter-spacing: 0.03em; margin-bottom: 6px; }
.handling-card span { color: var(--gray); font-size: 13px; line-height: 1.5; }
@media (max-width: 900px) { .coa-split { grid-template-columns: 1fr; } .handling-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .handling-grid { grid-template-columns: 1fr; } }

/* ---------- Scattered molecule background decoration ---------- */
.has-deco { position: relative; overflow: hidden; }
.has-deco > .wrap { position: relative; z-index: 1; }
.mol-deco { position: absolute; z-index: 0; pointer-events: none; aspect-ratio: 1 / 1; }
.mol-deco svg, .mol-deco canvas { width: 100%; height: 100%; display: block; }
.mol-deco line { stroke: var(--ink); stroke-width: 1; }
.mol-deco circle { fill: var(--ink); }
.hero-deco { aspect-ratio: 1 / 1; pointer-events: none; }
.hero-deco svg, .hero-deco canvas { width: 100%; height: 100%; display: block; }

/* ---------- Extra dynamism: hovers, shadows, motion ---------- */
.btn { transition: transform .26s var(--ease), background .26s var(--ease), color .26s var(--ease), box-shadow .26s var(--ease); }
.btn-solid:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0,0,0,0.45); }
.btn-ghost:hover { transform: translateY(-2px); }
.pcard:hover { box-shadow: 0 28px 64px -30px rgba(0,0,0,0.45); }
.pcard:hover .pcard-vial { filter: saturate(1.04); }
.lab-card, .principle, .handling-card, .trust-cell, .feat, .step { transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease); }
.lab-card:hover, .principle:hover, .handling-card:hover { box-shadow: 0 22px 54px -30px rgba(0,0,0,0.4); }
.feat:hover, .step:hover { transform: translateY(-3px); }
.spec-row { transition: background .2s var(--ease); }
.spec-row:hover { background: var(--paper-2); }
.pd-cols a:not(.btn):hover, .about-body a:not(.btn):hover, .pd-lead a:not(.btn):hover, .disclaimer a:hover { color: var(--ink); }
.cat-cell, .pcard, .lab-card { will-change: transform; }

/* big-text scroll reveal + hover glow */
.dyn-head { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.dyn-head.dyn-in { opacity: 1; transform: none; }
.dyn-head.dyn-instant { transition: none !important; }
@media (max-width: 768px) { .dyn-head { transform: none; transition-duration: .4s; } }
h1, h2, .pd-title { transition: text-shadow .35s var(--ease); }
h1:hover, h2:hover, .pd-title:hover { text-shadow: 0 12px 32px rgba(0,0,0,0.16); }
.band h2:hover, .hero-full h1:hover, .quote-lg:hover, .band .display:hover { text-shadow: 0 12px 34px rgba(255,255,255,0.22); }

/* selection + anchor offset */
::selection { background: #0a0a0a; color: #ffffff; }
::-moz-selection { background: #0a0a0a; color: #ffffff; }
[id] { scroll-margin-top: 90px; }

/* header reacts to scroll */
.site-header { transition: box-shadow .3s var(--ease), background .3s var(--ease); }
.site-header.scrolled { box-shadow: 0 10px 34px -20px rgba(0,0,0,0.4); }

/* staggered children reveal — content flows in as you scroll */
.stagger > * { opacity: 0; transform: translateY(26px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.stagger.in > * { opacity: 1; transform: none; }
/* Phones: a shorter, translate-free fade. The 26px rise costs a layout pass per
   card and on a long grid it reads as jank rather than polish. */

@media (min-width: 480px) and (max-width: 768px) {
  .hero-full { min-height: min(68svh, 520px) !important; }
  .hero-vials { width: 66%; }
}

@media (max-width: 768px) {
  .reveal { transform: none; transition-duration: .38s; }
  .stagger > * { transform: none; transition-duration: .38s; }
  .stagger > * { transition-delay: 0ms !important; }
}
@media (prefers-reduced-motion: reduce) { .stagger > * { opacity: 1 !important; transform: none !important; } }

/* dynamic web behind dark bands */
.band { position: relative; overflow: hidden; }
.band > .wrap { position: relative; z-index: 1; }
.band-web { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.38; }
.band-web canvas { width: 100%; height: 100%; display: block; }

/* full-width black web behind a light hero */
.pd-hero.has-web { position: relative; overflow: hidden; }
.pd-hero.has-web > .wrap { position: relative; z-index: 1; }
.pd-hero.has-web .band-web { opacity: 0.3; }

/* enquiry band (every page) */
.enquiry-band { border-top: none; }
.enquiry-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; max-width: 1120px; margin: 0 auto; }
.enquiry-copy h2 { font-size: clamp(34px, 4.6vw, 58px); line-height: 0.98; margin: 14px 0 18px; }
.enquiry-copy p { color: var(--gray); font-size: 16px; max-width: 400px; line-height: 1.65; }
.enquiry-mail { display: inline-block; margin-top: 20px; font-family: var(--display); font-weight: 700; letter-spacing: 0.02em; border-bottom: 2px solid var(--ink); padding-bottom: 2px; transition: opacity .2s var(--ease); }
.enquiry-mail:hover { opacity: 0.6; }
.enquiry-form { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 34px; box-shadow: 0 34px 80px -46px rgba(0,0,0,0.4); }
.enquiry-form .ef-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ef-field { margin-bottom: 16px; }
.ef-field label { display: block; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); margin-bottom: 8px; }
.ef-field input, .ef-field textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; font-family: var(--body); font-size: 15px; background: var(--paper-2); transition: border-color .2s var(--ease), background .2s var(--ease); }
.ef-field input:focus, .ef-field textarea:focus { outline: none; border-color: var(--ink); background: #fff; }
.ef-field textarea { resize: vertical; }
.ef-msg { margin-top: 14px; font-size: 13.5px; color: var(--gray); }
@media (max-width: 820px) { .enquiry-inner { grid-template-columns: 1fr; gap: 34px; } .enquiry-form .ef-row { grid-template-columns: 1fr; } .enquiry-form { padding: 26px; } }

/* footer newsletter feature band + brand trust */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.foot-news-band { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding-bottom: 46px; margin-bottom: 52px; border-bottom: 1px solid #262626; flex-wrap: wrap; }

/* Newsletter band product shot.
   Sits on a ::before so the existing flex layout is untouched. The vials live in
   the right third of the image and the left is empty steel, so background-position
   pins it right and the copy always lands on the dark side. The gradient is part
   of the same layer: without it the headline crosses the glass and loses contrast. */
.foot-news-band {
  position: relative; isolation: isolate;
  /* The band was a ~110px form strip. A product shot needs vertical room or the
     vials get sliced through the middle and read as an accident. */
  min-height: 286px; padding-top: 26px;
  /* Reserve the right edge for the photograph so the form stops before it. Without
     this the band is space-between, the form lands at the far right, and the
     Subscribe button sits on top of the vials. */
  padding-right: 340px;
}
.foot-news-band::before {
  content: ''; position: absolute; z-index: -1;
  /* Sized to the PHOTO, not to the band. The band is ~4.8:1; the product cluster
     is ~1.9:1. Stretching the image across the whole band meant either contain
     (which shrank it into a small visible box) or cover (which sliced it). Giving
     the ::before its own ~2:1 area on the right lets cover fill it properly, so
     the vials render large and bleed off the edges instead of floating in a frame. */
  /* Full-bleed to the VIEWPORT edge, not the content edge. .wrap is capped at
     1200px and centred, so on a wide monitor an image pinned to the wrap stopped
     ~340px short of the screen and read as a floating panel with black beside it.
     `right: calc(50% - 50vw)` walks it out of the wrap to the true screen edge, so
     the photograph always reaches the end of the band whatever the display width.
     Height is the band's, and the asset carries long fades on every side so
     whatever cover trims at a given width, a fade always survives. */
  top: -20px; bottom: -16px;
  right: calc(50% - 50vw);
  left: auto;
  /* Bleeds right to the screen, but the WIDTH is capped. Letting it stretch from
     mid-band to the viewport edge made the box ~3.7:1 against a 2.4:1 photo, and
     cover then cropped ~150px out of the middle — straight through the vials.
     Capping the width keeps the box near the photo's own ratio at every size. */
  width: min(780px, 58vw); max-width: none;
  background-image: url('images/vials-bench.webp?v=2026080302ba');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  pointer-events: none;
}
/* The form sits directly over the vials; without its own backing the input and
   its placeholder lose contrast against the glass. */
.foot-news-band .foot-news { position: relative; }
.foot-news-band .news-row input { background: rgba(8,8,8,.82); backdrop-filter: blur(3px); }
/* Stack below 980, not 760. Between those widths the band was still side-by-side
   but there was no longer room to reserve for the photo, so the form landed back on
   top of the vials — the exact collision the desktop padding-right exists to stop.
   Tablets get the stacked treatment instead. */
@media (max-width: 980px) {
  .foot-news-band { padding-right: 0; }
  /* room for the stacked photo above the copy */
  .foot-news-band { min-height: 0; padding-top: 226px; }
  /* Stacked on mobile: the band gets tall, so the shot moves behind the whole
     block and the scrim goes vertical to protect the copy AND the input field. */
  .foot-news-band::before {
    /* Stacked, not layered. On a phone the band is tall and the copy sits in the
       middle of it, so a background photo lands directly under the headline and the
       input — legibility loses every time. The shot becomes its own full-width
       block at the top of the band and the text sits cleanly beneath it.
       cover, not contain: contain shrank the photo into a small floating box with
       visible edges. The asset is cropped to ~1.9:1 which is close to this strip's
       ratio, so cover fills it edge to edge and crops almost nothing. */
    /* Phone: full-bleed strip across the top of the band. Same viewport-edge trick
       so it never stops short of the screen. */
    top: 0; bottom: auto;
    left: calc(50% - 50vw); right: calc(50% - 50vw);
    width: auto; max-width: none; height: 200px;
    background-image: url('images/vials-bench.webp?v=2026080302ba');
    background-size: cover;
    background-position: center;
    opacity: 1;
  }
}
.foot-news-h { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(24px, 2.6vw, 36px); color: #fff; line-height: 1.02; margin-top: 8px; }
.foot-news { min-width: 380px; }
.foot-brand .display { font-size: 46px; }
.foot-brand-slogan { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(22px, 2.2vw, 28px); color: #fff; margin-top: 20px; line-height: 0.98; }
.foot-brand .foot-trust { flex-direction: column; gap: 12px; margin-top: 30px; }
.foot-brand .foot-trust span { color: #b4b4b4; font-size: 13.5px; }
.foot-col h4 { color: #9a9a9a; letter-spacing: 0.2em; }
/* footer organisation: dividers + readability */
.foot-grid { padding-top: 8px; margin-top: 6px; align-items: stretch; }
.foot-brand p { color: #aeaeae; }
.foot-col a { color: #e2e2e2; }
.foot-col a:hover { color: #ffffff; }
.foot-brand .foot-trust span { color: #c2c2c2; }
@media (min-width: 901px) { .foot-col { border-left: 1px solid #242424; padding-left: 36px; } }
.foot-col a[href^="mailto:"] { display: inline-block; margin-top: 12px; border: 1px solid #333; border-radius: 100px; padding: 9px 16px; color: #fff; font-size: 13px; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.foot-col a[href^="mailto:"]:hover { background: #fff; color: var(--ink); border-color: #fff; transform: none; }
.foot-bottom { align-items: center; }
.foot-slogan { font-family: var(--display); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 13px; color: #cfcfcf; }
@media (max-width: 760px) { .foot-news { min-width: 100%; } .foot-news-band { gap: 24px; } }

/* footer: live web + polish */
.site-footer { position: relative; overflow: hidden; }
.site-footer > .wrap { position: relative; z-index: 1; }
.foot-web { opacity: 0.24; }
.foot-col a { transition: color .2s var(--ease), transform .2s var(--ease); }
.foot-col a:hover { transform: translateX(4px); }
.news-row input { transition: border-color .25s var(--ease), background .25s var(--ease); }
.news-row input:focus { outline: none; border-color: #6a6a6a; background: #1c1c1c; }
.foot-news label { font-size: 14px; }

/* explainer cards (How Peptides Work) */
.explain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.explain-card { background: var(--paper); padding: 40px 34px; transition: background .3s var(--ease), box-shadow .35s var(--ease); }
.explain-card:hover { background: var(--paper-2); box-shadow: 0 22px 54px -30px rgba(0,0,0,0.4); }
.explain-card .ex-ico { width: 34px; height: 34px; display: block; margin-bottom: 22px; }
.explain-card h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 22px; letter-spacing: -0.01em; margin-bottom: 14px; }
.explain-card p { color: var(--gray); font-size: 15px; line-height: 1.65; margin-bottom: 12px; }
@media (max-width: 860px) { .explain-grid { grid-template-columns: 1fr; } }
/* images focus + fade in as they enter the viewport */
.img-in { opacity: 0; filter: blur(10px); clip-path: inset(8% 0 8% 0); }
.img-in.in { opacity: 1; filter: blur(0); clip-path: inset(0 0 0 0); transition: opacity .8s var(--ease), filter .9s var(--ease), clip-path .95s var(--ease); }
@media (prefers-reduced-motion: reduce) { .img-in { opacity: 1; filter: none; clip-path: none; } }
/* lighter image reveal on phones — opacity only, no GPU blur/clip */
@media (max-width: 640px) {
  .img-in { filter: none; clip-path: none; }
  .img-in.in { transition: opacity .6s var(--ease); }
}

/* explain-grid statement panel — fills the empty cells */
.explain-cta { background: var(--ink); color: #fff; padding: 46px 40px; display: flex; flex-direction: column; justify-content: center; grid-column: span 2; position: relative; overflow: hidden; }
.explain-cta .cta-web { position: absolute; inset: 0; z-index: 0; opacity: .5; }
.explain-cta > * { position: relative; z-index: 1; }
.explain-cta .eyebrow { color: rgba(255,255,255,.55); margin-bottom: 14px; }
.explain-cta h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(28px, 3.3vw, 42px); line-height: .96; letter-spacing: -.01em; margin-bottom: 22px; color: #fff; }
.explain-cta .btn { align-self: flex-start; border-color: #fff; color: #fff; }
.explain-cta .btn.btn-solid { background: #fff; color: var(--ink); }
.explain-cta .btn.btn-solid:hover { background: transparent; color: #fff; }
@media (max-width: 860px) { .explain-cta { grid-column: span 1; } }

/* ---------- Polish: focus, progress, back-to-top ---------- */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--ink); z-index: 200; transition: width .1s linear; }
.back-to-top {
  position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); color: var(--paper); border: none; cursor: pointer; z-index: 150;
  display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(14px);
  pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); box-shadow: 0 14px 34px -14px rgba(0,0,0,0.5);
}
.back-to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top:hover { background: var(--ink-soft); }

/* quantity stepper */
.qty-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--ink); border-radius: 100px; overflow: hidden; height: 50px; }
.qty-stepper button { width: 42px; height: 100%; border: none; background: var(--paper); cursor: pointer; font-size: 18px; line-height: 1; transition: background .2s var(--ease); }
.qty-stepper button:hover { background: var(--paper-3); }
.qty-val { min-width: 34px; text-align: center; font-family: var(--display); font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }

/* footer top: trust + newsletter */
.foot-trust { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.foot-trust span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #c8c8c8; }
.foot-trust svg { width: 17px; height: 17px; color: #8a8a8a; }
.foot-news { min-width: 320px; }
.foot-news label { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; display: block; margin-bottom: 10px; }
.news-row { display: flex; gap: 8px; }
.news-row input { flex: 1; padding: 12px 14px; border-radius: 100px; border: 1px solid #333; background: #161616; color: #fff; font-family: var(--body); font-size: 14px; }
.news-row input::placeholder { color: #777; }
.news-row .btn { border-color: #fff; color: #fff; padding: 12px 18px; }
.news-row .btn:hover { background: #fff; color: var(--ink); }
.news-msg { color: #9a9a9a; font-size: 12.5px; margin-top: 10px; }
@media (max-width: 700px) { .foot-news { min-width: 100%; } }

/* ---------- Trust signals ---------- */
.trust-bar { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--paper); }
.trust-cell { padding: 26px 22px; display: flex; gap: 14px; align-items: flex-start; border-right: 1px solid var(--line-soft); transition: background .3s var(--ease); }
.trust-cell:last-child { border-right: none; }
.trust-cell:hover { background: var(--paper-2); }
.trust-ico { width: 26px; height: 26px; flex-shrink: 0; }
.trust-cell b { display: block; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 4px; }
.trust-cell span { font-size: 12px; color: var(--gray); line-height: 1.45; }
@media (max-width: 1000px) { .trust-bar { grid-template-columns: repeat(2, 1fr); } .trust-cell:nth-child(2n) { border-right: none; } .trust-cell { border-bottom: 1px solid var(--line-soft); } }
@media (max-width: 560px) { .trust-bar { grid-template-columns: 1fr; } .trust-cell { border-right: none; } }

/* product page mini trust row */
.trust-mini { display: flex; flex-wrap: wrap; gap: 11px 22px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.trust-mini span { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.trust-mini .trust-ico { width: 17px; height: 17px; }

/* checkout secure badges */
.secure-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 20px; padding: 16px 18px; background: var(--paper-3); border-radius: 12px; }
.secure-badges span { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.secure-badges .trust-ico { width: 17px; height: 17px; }
.pay-cards { margin-left: auto; display: inline-flex; gap: 5px; }
.pay-cards i { width: 30px; height: 20px; border: 1px solid #cfcfcf; border-radius: 4px; background: linear-gradient(180deg, #fff, #f0f0f0); display: block; }

/* ---------- Cart / commerce ---------- */
.nav-cart { font-variant-numeric: tabular-nums; }
.nav-cart.has-items { color: var(--ink); font-weight: 700; }

.quick-add {
  font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 9px 16px; border-radius: 100px; cursor: pointer;
  border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink);
  transition: all .22s var(--ease);
}
.quick-add:hover { background: var(--ink); color: var(--paper); }

/* toast */
.cart-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 30px);
  background: var(--ink); color: var(--paper); padding: 14px 22px; border-radius: 100px;
  font-family: var(--body); font-size: 14px; z-index: 300; opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease); box-shadow: 0 20px 50px -20px rgba(0,0,0,0.5);
  display: flex; gap: 14px; align-items: center;
}
.cart-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cart-toast a { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* cart table */
.cart-table { border-top: 2px solid var(--ink); }
.cart-head, .cart-row {
  display: grid; grid-template-columns: 1fr 110px 140px 110px 40px; align-items: center; gap: 16px;
}
.cart-head { padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray); }
.cart-head span:nth-child(2), .cart-head span:nth-child(3), .cart-head span:nth-child(4) { text-align: center; }
.cart-row { padding: 22px 0; border-bottom: 1px solid var(--line); position: relative; }
.cart-name { font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; display: block; }
.cart-sub { font-size: 12.5px; color: var(--gray); }
.cart-unit, .cart-line { text-align: center; font-family: var(--display); font-weight: 700; font-size: 16px; }
.cart-line { font-size: 18px; }
.cart-qty { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.qbtn { width: 30px; height: 30px; border: 1px solid var(--line); background: var(--paper); border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; transition: all .2s var(--ease); }
.qbtn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.qval { min-width: 24px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.cart-remove { background: none; border: none; cursor: pointer; font-size: 22px; color: var(--gray); line-height: 1; transition: color .2s var(--ease); }
.cart-remove:hover { color: var(--ink); }

.cart-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-top: 40px; flex-wrap: wrap; }
.cart-continue { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); padding-top: 14px; }
.cart-continue:hover { color: var(--ink); }
.cart-totals { min-width: 320px; margin-left: auto; }
.cart-subline { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.cart-subline b { font-family: var(--display); font-size: 22px; }
.cart-subline.muted { color: var(--gray); font-size: 13px; }
.cart-checkout { width: 100%; justify-content: center; margin-top: 22px; }
.cart-empty { text-align: center; padding: 60px 0 40px; }
.cart-info { display: flex; align-items: center; gap: 16px; }
.cart-thumb { width: 64px; height: 64px; border-radius: 12px; background: #f0f0f0; border: 1px solid var(--line); overflow: hidden; flex-shrink: 0; }
.cart-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* ===== slide-out cart drawer ===== */
body.cart-open { overflow: hidden; }
.cart-overlay { position: fixed; inset: 0; background: rgba(10,10,10,0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; z-index: 300; }
.cart-overlay.open { opacity: 1; visibility: visible; }
.cart-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 420px; max-width: 92vw; background: var(--paper); z-index: 301; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .42s var(--ease); box-shadow: -30px 0 80px -34px rgba(0,0,0,0.5); }
.cart-drawer.open { transform: none; }
.cd-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 26px; border-bottom: 1px solid var(--line); }
.cd-title { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 18px; }
.cd-count { color: var(--gray); font-weight: 600; }
.cd-close { background: none; border: none; font-size: 30px; line-height: 1; cursor: pointer; color: var(--ink-soft); width: 40px; height: 40px; border-radius: 50%; transition: background .2s var(--ease); }
.cd-close:hover { background: var(--paper-3); }
.cd-body { flex: 1; overflow-y: auto; padding: 4px 26px; }
.ci-row { display: flex; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line-soft); position: relative; }
.ci-thumb { width: 66px; height: 66px; border-radius: 12px; background: #f0f0f0; border: 1px solid var(--line); overflow: hidden; flex-shrink: 0; }
.ci-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ci-main { flex: 1; min-width: 0; }
.ci-name { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 15px; letter-spacing: .01em; display: block; }
.ci-meta { font-size: 12px; color: var(--gray); display: block; margin-top: 2px; }
.ci-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.ci-qty { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 100px; padding: 3px; }
.ci-qty button { width: 26px; height: 26px; border: none; background: none; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; transition: background .2s var(--ease); }
.ci-qty button:hover { background: var(--paper-3); }
.ci-qty span { min-width: 22px; text-align: center; font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.ci-price { font-family: var(--display); font-weight: 700; font-size: 15px; }
.ci-remove { position: absolute; top: 16px; right: 0; background: none; border: none; font-size: 19px; color: var(--gray); cursor: pointer; line-height: 1; transition: color .2s var(--ease); }
.ci-remove:hover { color: var(--ink); }
.cd-empty { text-align: center; padding: 66px 20px; }
.cd-empty h3 { font-family: var(--display); text-transform: uppercase; font-size: 22px; color: var(--ink); margin: 8px 0 20px; }
.cd-foot { border-top: 1px solid var(--line); padding: 20px 26px 24px; background: var(--paper-2); }
.cd-sub { display: flex; justify-content: space-between; align-items: baseline; }
.cd-sub span { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--gray); }
.cd-sub b { font-family: var(--display); font-weight: 800; font-size: 24px; }
.cd-ship { font-size: 12px; color: var(--gray); margin: 4px 0 16px; }
.cd-checkout { width: 100%; justify-content: center; }
.cd-viewcart { display: block; text-align: center; margin-top: 12px; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.cd-viewcart:hover { color: var(--ink); }
.cd-trust { display: flex; gap: 16px; justify-content: center; margin-top: 18px; flex-wrap: wrap; font-size: 11px; color: var(--gray); }
.cd-trust span { display: inline-flex; align-items: center; gap: 5px; }
.cd-trust svg { width: 13px; height: 13px; }
@media (max-width: 440px) { .cart-drawer { width: 100%; } }

/* checkout summary items with thumbnails */
.sum-item { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sum-thumb { width: 50px; height: 50px; border-radius: 10px; background: #f0f0f0; border: 1px solid var(--line); overflow: hidden; flex-shrink: 0; }
.sum-thumb img { width: 100%; height: 100%; object-fit: contain; }
.sum-item-main { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.35; }
.sum-item-main b { display: block; font-weight: 600; }
.sum-item-main em { font-style: normal; color: var(--gray); font-size: 12px; }
.sum-item-price { font-family: var(--display); font-weight: 700; font-size: 14px; white-space: nowrap; }

/* delivery options on checkout */
.ship-opts { display: grid; gap: 12px; }
.ship-opt { position: relative; display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.ship-opt:hover { border-color: #cfcfcf; }
.ship-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ship-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; transition: border-color .2s var(--ease); position: relative; }
.ship-opt input:checked ~ .ship-dot { border-color: var(--ink); }
.ship-opt input:checked ~ .ship-dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--ink); }
.ship-opt input:checked + .ship-dot, .ship-opt:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10,10,10,0.05); }
.ship-body { flex: 1; }
.ship-body b { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 14px; display: block; }
.ship-body span { font-size: 13px; color: var(--gray); }
.ship-price { font-family: var(--display); font-weight: 800; font-size: 17px; }

/* confirmation items with thumbnails */
.oc-thumb { width: 46px; height: 46px; border-radius: 10px; background: #f0f0f0; border: 1px solid var(--line); overflow: hidden; flex-shrink: 0; }
.oc-thumb img { width: 100%; height: 100%; object-fit: contain; }
.oc-line { flex: 1; min-width: 0; text-align: left; }
.oc-line b { display: block; font-weight: 600; font-size: 14.5px; }
.oc-line em { font-style: normal; color: var(--gray); font-size: 12.5px; }
.oc-price { font-family: var(--display); font-weight: 700; white-space: nowrap; }

/* checkout */
.checkout-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 56px; align-items: start; }
/* premium checkout form */
.checkout-trust { display: flex; flex-wrap: wrap; gap: 14px 28px; padding: 16px 22px; margin-bottom: 34px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2); }
.checkout-trust span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.checkout-trust svg { width: 17px; height: 17px; color: var(--ink); }
.co-sec { margin-bottom: 36px; }
.co-sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.co-num { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--display); font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.co-sec-head h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 18px; letter-spacing: -0.01em; }
.co-secure { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); }
.co-secure svg { width: 14px; height: 14px; }
.pay-card { border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--paper-2); }
.pay-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); }
.pay-brands { display: inline-flex; gap: 5px; }
.pay-brands i { width: 30px; height: 20px; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(180deg, #fff, #eee); display: block; }
.pay-mock { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; font-size: 15px; color: #9aa2a4; }
.pay-mock-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.pay-mock span { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); margin-bottom: 5px; }
.pay-soon { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.pay-soon svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink); margin-top: 1px; }
.co-reassure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--gray); }
.co-reassure svg { width: 15px; height: 15px; }
.sum-slogan { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; font-size: 16px; color: var(--ink); margin-top: 18px; }
.oc-slogan { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 14px; color: var(--gray); margin: -6px 0 16px; }

.checkout-form .fld { margin-bottom: 16px; }
.checkout-form .fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.checkout-form label { display: block; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); margin: 0 0 7px; }
.checkout-form .opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.checkout-form input, .checkout-form select { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; font-family: var(--body); font-size: 15px; background: #fff; }
.checkout-form input:focus, .checkout-form select:focus { outline: none; border-color: var(--ink); }
.pay-placeholder { display: flex; gap: 14px; align-items: flex-start; background: var(--paper-3); border: 1px dashed #cfcfcf; border-radius: 14px; padding: 20px 22px; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.pay-ico { font-size: 22px; line-height: 1; }
.pay-consent { display: flex; gap: 10px; align-items: flex-start; font-family: var(--body) !important; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--gray) !important; margin-top: 20px; font-weight: 400 !important; }
.pay-consent input { width: auto !important; margin-top: 3px; }

/* checkout step indicator */
.checkout-steps { display: flex; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.checkout-steps .cs { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); }
.checkout-steps .cs i { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; }
.checkout-steps .cs-on { color: var(--ink); }
.checkout-steps .cs-on i { border-color: var(--ink); background: var(--ink); color: #fff; }
.checkout-steps .cs-done i { border-color: var(--ink); color: var(--ink); }
.checkout-steps .cs-sep { flex: 0 0 26px; height: 1.5px; background: var(--line); }
.checkout-steps.done .cs { color: var(--gray); }
.checkout-steps.done .cs:last-child { color: var(--ink); }
.checkout-steps.done .cs:last-child i { border-color: var(--ink); background: var(--ink); color: #fff; }

/* order summary polish */
.sum-head { display: flex; justify-content: space-between; align-items: center; }
.sum-edit { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); border-bottom: 1px solid var(--line); }
.sum-edit:hover { color: var(--ink); border-color: var(--ink); }
.sum-row.sum-muted { color: var(--gray); font-size: 13px; }
.sum-trust { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.sum-trust span { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); }
.sum-trust svg { width: 15px; height: 15px; color: var(--ink); }

/* order confirmation */
.order-confirm { max-width: 760px; }
.oc-badge { width: 66px; height: 66px; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.oc-badge svg { width: 34px; height: 34px; }
.oc-title { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(38px, 5vw, 56px); line-height: 0.95; margin: 12px 0 16px; }
.oc-lead { color: var(--gray); font-size: 17px; line-height: 1.6; max-width: 560px; margin-bottom: 30px; }
.oc-summary { border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px; margin-bottom: 30px; max-width: 560px; }
.oc-item { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.oc-item em { font-style: normal; color: var(--gray); font-size: 12.5px; }
.oc-item.oc-total { border-bottom: none; padding-top: 14px; font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.oc-item.oc-total b { font-size: 22px; }
.oc-steps { margin-bottom: 32px; }
.oc-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 18px; }
.oc-step { border-top: 2px solid var(--ink); padding-top: 16px; }
.oc-step .oc-n { font-family: var(--display); font-weight: 900; font-size: 14px; display: block; margin-bottom: 8px; }
.oc-step b { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 15px; display: block; margin-bottom: 6px; }
.oc-step span:not(.oc-n) { color: var(--gray); font-size: 13.5px; line-height: 1.5; }
.oc-cta { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 640px) { .oc-steps-grid { grid-template-columns: 1fr; gap: 18px; } }

.checkout-summary { background: var(--paper-2); border: 1px solid var(--line); border-radius: 18px; padding: 30px 28px; position: sticky; top: 96px; }
.sum-items { margin: 16px 0 6px; }
.sum-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.sum-row em { font-style: normal; color: var(--gray); font-size: 12px; }
.sum-total { border-bottom: none; padding-top: 16px; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; }
.sum-total b { font-size: 24px; }
.sum-note { font-size: 11.5px; color: var(--gray); margin-top: 14px; line-height: 1.5; }
.order-done { padding: 30px 0 40px; }

@media (max-width: 820px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-summary { position: static; }
  .cart-head { display: none; }
  .cart-row { grid-template-columns: 1fr auto; grid-template-areas: 'info line' 'unit qty'; row-gap: 12px; }
  .cart-info { grid-area: info; } .cart-line { grid-area: line; text-align: right; }
  .cart-unit { grid-area: unit; text-align: left; } .cart-qty { grid-area: qty; justify-content: flex-end; }
  .cart-remove { position: absolute; top: 22px; right: 0; }
  .cart-totals { min-width: 100%; }
}

/* ---------- Bolder + more dynamic ---------- */
h1, h2 { font-weight: 900; }
.hero-full h1 { font-weight: 900; letter-spacing: -0.025em; }
.section-head h2, .band h2, .split-body h2, .duo-body h2, .pd-title { font-weight: 900; letter-spacing: -0.02em; }
.pcard-name, .prod-card .pname { font-weight: 900; }
.btn { font-weight: 800; }
.reveal { transform: translateY(30px); }

.hero-kicker {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: clamp(13px, 1.5vw, 17px); color: #e8e8e8;
  margin: 20px 0 4px; max-width: 560px; line-height: 1.25;
}
.hero-full .hero-kicker { color: #e8e8e8; }

/* motivational credo band */
.band.credo h2 { font-size: clamp(40px, 6vw, 78px); }
.band.credo p { font-size: 18px; }

/* pull quote */
.pullquote {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 1.02; font-size: clamp(28px, 4.4vw, 54px);
  max-width: 900px; margin: 0 auto;
}

/* cooler studio backdrop to match product mockups */
.vialbox, .pcard-vial, .pd-visual.novial {
  /* Studio vials are lifted to a pure-white ground; white card = clean float, no tile. */
  background: #ffffff !important;
}

/* ---------- Blog / Journal ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.post-card { background: var(--paper); padding: 34px 30px 30px; display: flex; flex-direction: column; min-height: 280px; position: relative; transition: background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.post-card:hover { background: var(--paper-2); z-index: 2; transform: translateY(-2px); box-shadow: 0 26px 54px -30px rgba(0,0,0,0.42); }
/* slogan panel that fills empty cells in a 4-card journal grid */
.post-slogan { grid-column: span 2; background: var(--ink); color: #fff; padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.post-slogan .eyebrow { color: rgba(255,255,255,.55); margin-bottom: 14px; }
.post-slogan h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(28px, 3.2vw, 44px); line-height: .95; letter-spacing: -.01em; margin-bottom: 22px; color: #fff; }
.post-slogan-link { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #fff; display: inline-flex; gap: 8px; align-items: center; align-self: flex-start; }
.post-slogan-link .arw { transition: transform .3s var(--ease); }
.post-slogan-link:hover .arw { transform: translateX(4px); }
@media (max-width: 560px) { .post-slogan { grid-column: span 1; padding: 34px 26px; } }
.post-cat { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray); }
.post-title { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.05; text-transform: uppercase; letter-spacing: -0.01em; margin: 12px 0 12px; }
.post-dek { font-size: 14px; color: var(--gray); line-height: 1.55; flex: 1; }
.post-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; font-size: 12px; color: var(--gray); }
.post-go { font-family: var(--display); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; display: inline-flex; gap: 7px; align-items: center; color: var(--ink); }
.post-card:hover .post-go .arw, .post-feature:hover .post-go .arw { transform: translateX(4px); }
.post-go .arw { transition: transform .3s var(--ease); }

.post-feature { display: grid; grid-template-columns: 1.4fr 0.6fr; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.post-feature-body { padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; }
.post-feature-title { font-size: clamp(30px, 4vw, 50px); line-height: 0.98; text-transform: uppercase; letter-spacing: -0.02em; margin: 14px 0 16px; }
.post-feature-body .post-dek { flex: none; font-size: 16px; max-width: 560px; margin-bottom: 22px; }
.post-feature-art { background: var(--ink); display: flex; align-items: center; justify-content: center; }
.pf-mark { font-family: var(--display); font-weight: 900; font-size: clamp(48px, 7vw, 96px); color: #fff; }
@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr 1fr; } .post-feature { grid-template-columns: 1fr; } .post-feature-art { min-height: 160px; } }
@media (max-width: 560px) { .post-grid { grid-template-columns: 1fr; } }

/* article page */
.jsym { width: 100%; height: auto; display: block; }
.art-hero-inner { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 44px; align-items: center; }
.art-hero-sym { aspect-ratio: 1 / 1; max-width: 260px; width: 100%; margin-left: auto; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(130% 110% at 50% 15%, #ffffff, #eef3f4 60%, #e1e9ea); display: flex; align-items: center; justify-content: center; padding: 46px; }
@media (max-width: 780px) { .art-hero-inner { grid-template-columns: 1fr; } .art-hero-sym { display: none; } }
.post-sym { width: 54px; height: 54px; margin-bottom: 20px; }
.post-sym .jsym { width: 100%; height: 100%; }
.art-hero { padding: 60px 0 46px; border-bottom: 1px solid var(--line); }
.art-title { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.98; font-size: clamp(34px, 5.2vw, 66px); max-width: 15ch; margin: 14px 0 20px; }
.art-dek { font-size: clamp(17px, 2vw, 21px); color: var(--ink-soft); max-width: 640px; line-height: 1.5; }
.art-meta { display: flex; gap: 12px; align-items: center; margin-top: 26px; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); }
.art-body-sec { padding: 60px 0 76px; }
.art-body { max-width: 720px; margin: 0 auto; }
.art-body .art-lead { font-size: 20px; line-height: 1.6; color: var(--ink); font-weight: 500; margin-bottom: 30px; }
.art-body h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(24px, 3vw, 32px); margin: 40px 0 16px; }
.art-body p { font-size: 17px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 18px; }
.art-body blockquote { margin: 34px 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--ink); font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.12; }
.art-disc { margin-top: 38px; padding: 22px 24px; background: var(--paper-3); border: 1px solid var(--line); border-radius: 14px; font-size: 13px; color: var(--gray); line-height: 1.6; }
.art-cta { max-width: 720px; margin: 46px auto 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; background: var(--ink); color: var(--paper); border-radius: 20px; padding: 30px 34px; flex-wrap: wrap; }
.art-cta .eyebrow { color: #8a8a8a; }
.art-cta h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 30px; margin-top: 6px; }
.art-cta .btn { border-color: var(--paper); color: var(--paper); }
.art-cta .btn-solid { background: var(--paper); color: var(--ink); }
.art-cta .btn-solid:hover { background: transparent; color: var(--paper); }

/* ---------- Utility ---------- */
.center { text-align: center; }
.mono-rule { height: 1px; background: var(--line); margin: 0; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
/* Content that was already on screen at load. No transition at all — see main.js. */
.reveal.instant, .stagger.instant > * { transition: none !important; transform: none !important; opacity: 1 !important; }

/* ================= uu.life-style additions ================= */

/* Animated vial */
.vialbox {
  position: relative; overflow: hidden; border-radius: 18px;
  background: radial-gradient(120% 120% at 62% 22%, #ffffff 40%, #ffffff 100%);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
}
.vialbox .coa {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  font-family: var(--display); font-weight: 700; font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink);
  border: 1px solid var(--ink); border-radius: 100px; padding: 5px 10px 4px;
  display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.7);
}
.vialbox .coa::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
/* limited-supply badge on product cards */
.vialbox .limited {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  font-family: var(--display); font-weight: 700; font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #fff; background: var(--ink);
  border-radius: 100px; padding: 5px 10px 4px; display: inline-flex; align-items: center; gap: 6px;
}
.vialbox .limited::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: limPulse 2.2s ease-in-out infinite; }
@keyframes limPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vialbox .limited::before { animation: none; } }

/* product page — limited-supply pill + both shipping options */
.limited-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--ink); border-radius: 100px; padding: 7px 14px; margin-bottom: 14px; }
.limited-badge svg { width: 14px; height: 14px; }
.ship-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 10px; }
.ship-choice { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; background: #fff; transition: border-color .2s var(--ease); }
.ship-choice:hover { border-color: #cfcfcf; }
.ship-choice.is-fast { border-color: var(--ink); }
.ship-choice .sc-ico { width: 22px; height: 22px; flex-shrink: 0; color: var(--ink); }
.ship-choice b { font-family: var(--display); font-weight: 800; font-size: 13.5px; letter-spacing: .02em; display: block; }
.ship-choice span { font-size: 12.5px; color: var(--gray); line-height: 1.45; }
.ship-choice span b { display: inline; font-size: 12.5px; color: var(--ink); font-weight: 700; letter-spacing: 0; }
.ship-note { font-size: 12.5px; color: var(--gray); margin-bottom: 4px; }
@media (max-width: 560px) { .ship-choices { grid-template-columns: 1fr; } }
/* COA badge on the larger product-page image */
.pd-visual .coa { position: absolute; top: 20px; left: 20px; z-index: 5; font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--ink); border-radius: 100px; padding: 7px 14px 6px; display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.78); backdrop-filter: blur(2px); }
.pd-visual .coa::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
/* delivery warranty note */
.delivery-note b { color: var(--ink); }
.vial-svg { animation: vfloat 6s ease-in-out infinite; will-change: transform; z-index: 2; }
/* photographic product renders — layer over the SVG, auto-fallback if missing */
.vial-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10px 0 14px; z-index: 2; animation: vfloat 6s ease-in-out infinite; will-change: transform; pointer-events: none; }
/* photos are the primary render; hide the SVG placeholder (restored by JS only if a photo fails to load) */
.vial-svg { display: none; }
/* on the product hero the format views fill the whole visual so the render is large */
.pd-visual .fmt-view { position: absolute; inset: 0; }
@keyframes vfloat { 0%,100% { transform: translateY(6px); } 50% { transform: translateY(-6px); } }
.vial-shine {
  position: absolute; top: -60%; left: -40%; width: 40%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.85), transparent);
  transform: rotate(18deg); animation: vshine 5.5s ease-in-out infinite; z-index: 4; pointer-events: none;
}
@keyframes vshine { 0% { left: -50%; } 55% { left: 130%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .vial-svg, .vial-shine { animation: none; } }

/* Product card with vial */
.pcard { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 8px 24px -20px rgba(0,0,0,0.35); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.pcard:hover { transform: translateY(-5px); box-shadow: 0 26px 56px -26px rgba(0,0,0,0.42); }
.pcard .pcard-vial { aspect-ratio: 1/1; border: none; border-bottom: 1px solid var(--line); border-radius: 0; }
.pcard-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.pcard-cat { font-family: var(--display); font-weight: 700; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray); }
.pcard-name { font-family: var(--display); font-weight: 800; font-size: 26px; text-transform: uppercase; line-height: 1; margin: 8px 0 8px; }
.pcard-desc { font-size: 13.5px; color: var(--gray); line-height: 1.55; flex: 1; }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.pcard-view { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; display: inline-flex; gap: 7px; align-items: center; }
.pcard:hover .pcard-view .arw { transform: translateX(4px); }
.pcard-view .arw { transition: transform .3s var(--ease); }
.pcard-tag { font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); border: 1px solid var(--line); border-radius: 100px; padding: 5px 10px; }

.pcard-price { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: 0.01em; color: var(--ink); display: inline-flex; align-items: baseline; gap: 7px; }

/* product-page price block */
.price-block { margin: 4px 0 22px; display: flex; flex-direction: column; gap: 4px; }
.price { font-family: var(--display); font-weight: 900; font-size: 40px; line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
.price-meta { font-size: 13px; color: var(--gray); letter-spacing: 0.01em; }
.price-meta span { font-family: var(--display); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }

.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* Category selector (Find your starting point) */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cat-cell { background: var(--paper); padding: 34px 30px; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; transition: background .3s var(--ease); position: relative; }
.cat-cell:hover { background: var(--ink); color: var(--paper); }
.cat-cell:hover .cat-sub, .cat-cell:hover .cat-tag { color: #b8b8b8; }
.cat-code { font-family: var(--display); font-weight: 900; font-size: 40px; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; }
.cat-sub { font-size: 15px; color: var(--ink-soft); font-weight: 500; margin-top: 6px; }
.cat-tag { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); margin-top: 4px; }
.cat-go { position: absolute; top: 30px; right: 30px; font-size: 18px; transition: transform .3s var(--ease); }
.cat-cell:hover .cat-go { transform: translate(3px,-3px); }

/* Hero image band (uu.life style) */
.hero-full { position: relative; min-height: 78vh; display: flex; align-items: flex-end; color: var(--paper); overflow: hidden; background: var(--ink); }
.hero-full .hero-bg { position: absolute; inset: 0; z-index: 0; opacity: 0.9; }
/* Rendered molecule. Mobile-only hero visual — see the max-width:768px block
   for why the canvas does not run there. The render is composed with its glowing
   helix on the right and empty black on the left, so it slots behind the copy
   without a scrim fighting the headline. Feathered on the left edge so it melts
   into the flat black background instead of showing a seam. */
/* Mobile hero mark. "1%" assembled out of atoms and bonds — the site's own
   molecular technique, recovered from a deleted module (see main.js). Drawn on a
   canvas rather than shipped as an image: sharp at any pixel density, exactly
   monochrome, ~5KB of code instead of ~110KB of WebP. */
/* Photoreal vial cluster, mobile hero bottom-right. Sits under the copy layer and
   the 1% canvas mark (which occupies the upper-right); the two share the right
   column as top-and-bottom bookends with the headline on the left. The asset
   carries its own top+left alpha feather so it emerges from the black hero. */
.hero-vials {
  display: none;
  position: absolute; right: -3%; bottom: 0; z-index: 0;
  width: 70%; max-width: none; height: auto;
  /* Bottom-right and tall enough to climb up under the 1% mark, so the right
     column is not a black void. The asset carries a SHORT top feather (fade stops
     high), so the caps stay visible instead of dissolving into black. Badge text
     is capped at 54% on the left so the words stay off the glass. */
  opacity: .82;
  pointer-events: none;
}
/* Mobile hero 1% mark — now a STATIC IMAGE, not a canvas.
   The canvas version assembled over 1.4s and, worse, rebuilt on every resize. On
   mobile Safari, scrolling toggles the URL bar which changes the viewport height,
   which resized the hero, which made the canvas blank out — that was the "1%
   disappears" bug. A pre-rendered image (the exact League Spartan glyph sampled
   into atoms) simply never moves. */
.hero-mol {
  display: none;
  position: absolute; top: 3%; right: 2%; z-index: 0;
  width: 45%; max-width: 260px; height: auto;
  opacity: .9;
  pointer-events: none;
}
.hero-full .hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%); }

/* --- Photo hero (cinematic reconstitution plate) --- */
.hero-full.has-photo .hero-canvas,
.hero-full.has-photo .hero-mol,
.hero-full.has-photo .hero-vials,
.hero-full.has-photo .hero-aura { display: none !important; }
.hero-photo { position: absolute; inset: 0; z-index: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; display: block; }
/* copy sits in the right-hand negative space on desktop; scrim darkens that side */
.hero-full.has-photo .hero-scrim {
  background: linear-gradient(90deg, rgba(9,10,12,0) 26%, rgba(9,10,12,0.5) 58%, rgba(9,10,12,0.92) 100%),
              linear-gradient(180deg, rgba(9,10,12,0.35) 0%, rgba(9,10,12,0) 30%);
}
.hero-full.has-photo .hero-content { max-width: 560px; margin-left: auto; }
@media (max-width: 768px) {
  /* stacked: vial banner on top, copy on solid black below */
  .hero-full.has-photo { display: block; height: auto; min-height: 0 !important; }
  .hero-full.has-photo .hero-photo { position: relative; height: 46vh; max-height: 400px; }
  .hero-full.has-photo .hero-photo img { object-position: center 42%; }
  .hero-full.has-photo .hero-scrim {
    position: absolute; inset: auto 0 0 0; height: 40%;
    background: linear-gradient(180deg, rgba(9,10,12,0) 0%, rgba(9,10,12,0.95) 100%);
  }
  .hero-full.has-photo .wrap { position: relative; z-index: 2; background: #0a0a0a; padding-top: 30px; padding-bottom: 44px; }
  .hero-full.has-photo .hero-content { max-width: none; margin-left: 0; }
}
.hero-full .wrap { position: relative; z-index: 2; padding-top: 90px; padding-bottom: 74px; width: 100%; }
.hero-full .eyebrow { color: #cfcfcf; }
.hero-full h1 { font-size: clamp(50px, 9vw, 128px); line-height: 0.9; color: var(--paper); text-shadow: 0 2px 30px rgba(0,0,0,0.35); }
.hero-full h1 .thin { font-weight: 400; }
.hero-full .hero-sub { color: #e2e2e2; }
.hero-badge-row .hero-badge b { color: var(--paper); }
.hero-full .hero-badge span { color: #b5b5b5; }
.hero-full .btn { border-color: var(--paper); color: var(--paper); }
.hero-full .btn-solid { background: var(--paper); color: var(--ink); }
.hero-full .btn-solid:hover { background: transparent; color: var(--paper); }
.hero-full .btn-ghost:hover { background: var(--paper); color: var(--ink); }

/* animated hero backdrop of drifting molecules */
.mol-field line { stroke: rgba(255,255,255,0.16); }
.mol-field circle { fill: rgba(255,255,255,0.5); }
.mol-drift { animation: drift 18s ease-in-out infinite alternate; transform-origin: center; }
@keyframes drift { to { transform: translate(-24px, 18px); } }

/* live molecular network canvas */
.hero-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }
.hero-aura {
  position: absolute; inset: -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 42% at 22% 28%, rgba(255,255,255,0.14), transparent 62%),
    radial-gradient(34% 38% at 82% 18%, rgba(255,255,255,0.09), transparent 60%),
    radial-gradient(46% 50% at 65% 88%, rgba(255,255,255,0.07), transparent 64%);
  animation: aura 16s ease-in-out infinite alternate; will-change: transform, opacity;
}
@keyframes aura {
  0%   { transform: translate(0,0) scale(1); opacity: 0.9; }
  50%  { opacity: 1; }
  100% { transform: translate(-5%, 4%) scale(1.12); opacity: 0.85; }
}
.hero-full.is-charged .hero-aura { filter: brightness(1.5); transition: filter .5s var(--ease); }
.hero-canvas { transition: opacity .4s var(--ease); }
.hero-full.is-charged .hero-canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-aura { animation: none; } }
/* phones: drop the DNA/web canvas (doesn't render well small); keep the clean dark hero + aura glow */
@media (max-width: 768px) {
  /* Mobile hero, rebuilt 2026-07-19.
     Three attempts, in order:
       1. hid the canvas AND the badges -> a flat black box with nothing in it
       2. re-enabled the canvas -> the particle net is too fine and too sparse to
          read at 375px; it renders as noise on black, which is what it looked like
       3. a line-art SVG helix -> correct idea, but flat and cheap-looking
     So: the canvas is a DESKTOP visual. Mobile gets a real rendered molecule
     image instead. 50KB, no rAF loop, no canvas sizing, always renders. Simpler
     is the point here, not a smaller version of the desktop treatment. */
  .hero-canvas { display: none; }
  .hero-mol { display: block; }
  /* Mobile: drop the vials image — it reads cluttered small. Keep just the 1% molecular hero. */
  .hero-vials { display: none; }
  /* Copy left, illustration right — so no vertical space needs reserving and the
     hero fits one screen again.
     svh, not vh: on iOS Safari 100vh is the height WITH the browser chrome
     retracted, so it is taller than what you can actually see and the bottom of the
     hero hides behind the URL bar. svh is the always-visible height. */
  /* Cap the height so the hero stays COMPACT on tall/wide viewports (big phones,
     foldables, small tablets). At a plain 82svh a 1090px-tall screen gave an ~894px
     hero and the top half was empty black. min() keeps normal phones full-height
     but stops the stretch. */
  .hero-full { align-items: flex-end; min-height: min(84vh, 600px); min-height: min(84svh, 600px); }
  /* Wide mobile (big phones, foldables, small tablets ~480-768px): the hero would
     otherwise stretch tall with the content bottom-anchored, leaving a big empty
     black band up top. Shorter cap + a larger vial cluster fill that space so it
     stays compact. */
  .hero-full .wrap { padding-top: 30px; padding-bottom: 34px; }
  .hero-full .hero-scrim {
    /* The mark now lives top-right, so the scrim can NOT sit on the top — that is
       exactly where it would smother it. Feather the LEFT instead, to hold the
       headline off the atoms, and leave the upper-right clear for the mark. */
    background: linear-gradient(90deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,.35) 45%, rgba(10,10,10,0) 72%);
  }
  .hero-aura { opacity: .9; }
  /* NOTE: a stale `min-height: 76vh` and `padding-bottom: 42px` used to sit here,
     AFTER the rules above, silently overriding them — the hero kept collapsing to
     76vh and the badges landed on the product. Same-specificity duplicates in one
     block are decided by source order; keep hero sizing in one place only. */
  .hero-full .hero-sub { display: none; }
  .hero-full .eyebrow { margin-bottom: 14px; }
  .hero-full h1 { font-size: clamp(29px, 8vw, 40px); line-height: 0.98; letter-spacing: -0.02em; margin: 0 0 14px; }
  /* Back on: the side-by-side layout no longer needs its ~90px for a product shot.
     Width-capped so it never runs under the illustration. */
  .hero-full .hero-kicker { display: block; font-size: 13px; line-height: 1.45; margin: 0 0 16px; max-width: 21ch; }
  .hero-full h1 { max-width: 10ch; }
  .hero-full .hero-actions { flex-direction: column; align-items: stretch; gap: 8px; max-width: 78%; }
  .hero-full .hero-actions .btn { width: 100%; justify-content: center; padding: 12px 24px; font-size: 12px; }
  .hero-full .hero-badge-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; max-width: 54%;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16);
  }
  .hero-full .hero-badge b { font-size: 17px; line-height: 1.15; }
  .hero-full .hero-badge span { font-size: 9px; letter-spacing: .06em; color: #b8b8b8; white-space: nowrap; }
}

/* COA / standard split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.split-visual { background: var(--ink); color: var(--paper); min-height: 360px; display: flex; align-items: center; justify-content: center; position: relative; }
.split-body { padding: 56px 52px; display: flex; flex-direction: column; justify-content: center; }
.split-body h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1; margin: 14px 0 18px; }
.split-body p { color: var(--gray); font-size: 16px; margin-bottom: 14px; }
.quote-lg { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(22px,2.6vw,30px); line-height: 1.08; color: var(--paper); padding: 0 40px; text-align: center; }

/* FAQ accordion */
.faq { max-width: 860px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 26px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: var(--display); font-weight: 700; font-size: 19px; text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink); }
.faq-q .plus { font-weight: 400; font-size: 26px; transition: transform .3s var(--ease); flex-shrink: 0; }
.faq-item.open .faq-q .plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-a p { color: var(--gray); font-size: 15.5px; padding: 0 0 26px; max-width: 680px; }

/* Steps (how it works) */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.step { }
.step .snum { font-family: var(--display); font-weight: 900; font-size: 56px; line-height: 1; color: var(--line); }
.step h3 { font-size: 20px; margin: 8px 0 10px; }
.step p { color: var(--gray); font-size: 15px; }

/* section head centered variant */
.center .section-head { margin-left: auto; margin-right: auto; }

/* store toolbar */
.store-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
.chip { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 10px 18px; border: 1.5px solid var(--line); border-radius: 100px; color: var(--ink-soft); transition: all .25s var(--ease); cursor: pointer; }
.chip:hover, .chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* pd visual uses vial */
.pd-visual.novial { padding: 0; overflow: hidden; }

/* format switcher (vial / pen) */
.fmt-flag { display: inline-flex; align-items: center; gap: 6px; }

/* pen callout / two-format section */
.duo { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 0; align-items: stretch; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.duo-visual { background: #ffffff; position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; overflow: hidden; }
.duo-pair { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 100%; }
.duo-item { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; }
.duo-item + .duo-item::before { content: ''; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: rgba(0,0,0,0.08); }
.duo-item img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 20px 14px; animation: vfloat 6s ease-in-out infinite; will-change: transform; }
.duo-item:last-child img { animation-delay: -3s; }
.duo-item figcaption { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); background: rgba(255,255,255,0.82); backdrop-filter: blur(2px); border: 1px solid var(--line); border-radius: 100px; padding: 6px 16px; z-index: 4; }
.duo-item .coa { position: absolute; top: 18px; left: 18px; z-index: 5; font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--ink); border-radius: 100px; padding: 7px 14px 6px; display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.82); backdrop-filter: blur(2px); }
.duo-item .coa::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .duo-item img { animation: none; } }
.duo-body { padding: 60px 56px; display: flex; flex-direction: column; justify-content: center; }
.duo-body h2 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1; margin: 14px 0 18px; }
.duo-body p { color: var(--gray); font-size: 16px; margin-bottom: 14px; }
.duo-list { list-style: none; margin: 8px 0 24px; }
.duo-list li { font-size: 15px; color: var(--ink-soft); padding: 12px 0 12px 26px; border-bottom: 1px solid var(--line-soft); position: relative; }
.duo-list li::before { content: ''; position: absolute; left: 0; top: 21px; width: 11px; height: 1.5px; background: var(--ink); }
.duo-list li b { font-family: var(--display); letter-spacing: .04em; }

/* wholesale — MOQ callout */
.moq-callout { display: flex; align-items: center; gap: 30px; border: 1.5px solid var(--ink); border-radius: 20px; padding: 28px 36px; background: #fff; position: relative; overflow: hidden; }
.moq-callout::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--ink); }
.moq-callout .moq-num { font-family: var(--display); font-weight: 900; font-size: 66px; line-height: 1; letter-spacing: -0.02em; flex-shrink: 0; }
.moq-callout .moq-num small { font-size: 20px; font-weight: 700; vertical-align: super; }
.moq-callout h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 18px; margin-bottom: 6px; }
.moq-callout p { color: var(--gray); font-size: 14.5px; line-height: 1.55; max-width: 620px; }
@media (max-width: 600px) { .moq-callout { flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 24px 24px 30px; } .moq-callout .moq-num { font-size: 54px; } }

/* wholesale — volume tiers */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tier { border: 1px solid var(--line); border-radius: 20px; padding: 30px 28px; background: #fff; display: flex; flex-direction: column; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.tier:hover { transform: translateY(-4px); box-shadow: 0 28px 54px -34px rgba(0,0,0,0.42); }
.tier.is-featured { background: var(--ink); color: #fff; border-color: var(--ink); }
.tier-badge { align-self: flex-start; font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; background: #fff; color: var(--ink); border-radius: 100px; padding: 5px 12px; margin-bottom: 16px; }
.tier-name { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; color: var(--gray); }
.tier.is-featured .tier-name { color: rgba(255,255,255,.6); }
.tier-moq { font-family: var(--display); font-weight: 900; font-size: 34px; margin: 8px 0 4px; letter-spacing: -.01em; line-height: 1; }
.tier-moq span { font-size: 14px; font-weight: 600; color: var(--gray); letter-spacing: 0; }
.tier.is-featured .tier-moq span { color: rgba(255,255,255,.6); }
.tier-sub { font-size: 13.5px; color: var(--gray); margin-bottom: 22px; }
.tier.is-featured .tier-sub { color: rgba(255,255,255,.72); }
.tier ul { list-style: none; margin: 0 0 24px; flex: 1; }
.tier li { font-size: 14px; padding: 9px 0 9px 22px; position: relative; border-bottom: 1px solid var(--line-soft); }
.tier.is-featured li { border-color: rgba(255,255,255,.12); }
.tier li:last-child { border-bottom: none; }
.tier li::before { content: ''; position: absolute; left: 0; top: 16px; width: 9px; height: 1.5px; background: currentColor; opacity: .55; }
.tier .btn { width: 100%; justify-content: center; margin-top: auto; }
.tier.is-featured .btn-solid { background: #fff; color: var(--ink); }
.tier.is-featured .btn-solid:hover { background: transparent; color: #fff; }
@media (max-width: 900px) { .tier-grid { grid-template-columns: 1fr; } }

/* collection pages — guarantee grid */
.guarantee-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 8px; }
.gcard { border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px 24px; background: #fff; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.gcard:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -34px rgba(0,0,0,0.4); border-color: #d8d8d8; }
.gcard .gico { width: 42px; height: 42px; border-radius: 11px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.gcard .gico svg { width: 22px; height: 22px; }
.gcard h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 15px; margin-bottom: 9px; }
.gcard p { color: var(--gray); font-size: 13.5px; line-height: 1.55; }
@media (max-width: 900px) { .guarantee-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .guarantee-grid { grid-template-columns: 1fr; } }

/* work-with-us — hover colour-cycle headings + dark hero crumb */
.dna-hover { cursor: default; transition: color .25s var(--ease), text-shadow .25s var(--ease); }
.dna-hover:hover { text-shadow: 0 8px 30px rgba(0,0,0,0.14); }
.whu-hero .dna-hover:hover { text-shadow: 0 10px 34px rgba(255,255,255,0.22); }
.hero-trust { margin-top: 24px; color: var(--gray); font-size: 13.5px; letter-spacing: .02em; }
.whu-crumb { color: rgba(255,255,255,0.6); }
.whu-crumb a { color: rgba(255,255,255,0.85); }
.whu-hero .hero-kicker { color: #e8e8e8; }

/* work-with-us — redesigned enquiry form */
.wf-card { position: relative; background: linear-gradient(180deg, #fff 0%, #fafafa 100%); border: 1px solid var(--line); border-radius: 24px; padding: 10px 30px 30px; box-shadow: 0 30px 70px -40px rgba(0,0,0,0.35); overflow: hidden; }
.wf-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #1CE31C, #1C5EE3, #901CE3, #E31C1C); opacity: .9; }
.wf-topbar { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gray); padding: 22px 0 20px; border-bottom: 1px solid var(--line-soft); margin-bottom: 24px; }
.wf-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,0.16); }
.wf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wf-field { margin-bottom: 18px; }
.wf-lab { display: block; font-family: var(--display); font-weight: 600; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; }
.wf-lab i { font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--gray); font-family: var(--body); font-size: 12px; margin-left: 4px; }
.wf-in { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; font-family: var(--body); font-size: 15px; background: #fff; color: var(--ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.wf-in::placeholder { color: #b0b0b0; }
.wf-in:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(10,10,10,0.06); }
.wf-in:hover:not(:focus) { border-color: #cfcfcf; }
.wf-select { position: relative; }
.wf-select select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px; }
.wf-select::after { content: ''; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.wf-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-pills input { position: absolute; opacity: 0; pointer-events: none; }
.wf-pills label { font-family: var(--display); font-weight: 600; font-size: 12.5px; letter-spacing: .04em; padding: 9px 16px; border: 1px solid var(--line); border-radius: 100px; cursor: pointer; color: var(--ink-soft); transition: all .18s var(--ease); user-select: none; }
.wf-pills label:hover { border-color: var(--ink); }
.wf-pills input:checked + label { background: var(--ink); color: #fff; border-color: var(--ink); }
.wf-pills input:focus-visible + label { box-shadow: 0 0 0 4px rgba(10,10,10,0.12); }
.wf-consent { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; color: var(--gray); line-height: 1.55; margin: 4px 0 0; cursor: pointer; }
.wf-consent input { margin-top: 2px; width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--ink); cursor: pointer; }
.wf-foot { margin-top: 24px; }
.wf-submit { width: 100%; justify-content: center; padding: 15px 24px; font-size: 14px; }
.wf-secure { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; font-size: 12.5px; color: var(--gray); }
.wf-secure svg { width: 15px; height: 15px; }
.wf-success { display: none; flex-direction: column; align-items: center; text-align: center; padding: 30px 10px 18px; }
.wf-success.show { display: flex; animation: wfpop .5s var(--ease); }
.wf-check { width: 58px; height: 58px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.wf-check svg { width: 28px; height: 28px; }
.wf-success h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; font-size: 22px; margin-bottom: 10px; }
.wf-success p { color: var(--gray); font-size: 14.5px; line-height: 1.6; max-width: 340px; }
.wf-success a { text-decoration: underline; color: var(--ink); }
@keyframes wfpop { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) { .wf-row { grid-template-columns: 1fr; gap: 0; } .wf-card { padding: 10px 22px 26px; } }

/* shipping cards */
.ship-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ship-cell { background: var(--paper); padding: 34px 28px; min-height: 190px; }
.ship-ico { width: 30px; height: 30px; margin-bottom: 20px; }
.ship-cell h3 { font-size: 17px; margin-bottom: 8px; }
.ship-cell p { color: var(--gray); font-size: 14px; line-height: 1.55; }

@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; }
  .ship-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .ship-grid { grid-template-columns: 1fr; }
  .duo-body { padding: 40px 28px; }
}

/* Responsive */
@media (max-width: 900px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid-3, .steps { grid-template-columns: 1fr 1fr; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid, .pd-grid, .pd-cols { grid-template-columns: 1fr; }
  .prod-grid, .feat-grid, .related { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .hero-art { order: -1; }
  .hero { padding: 50px 0; }
}
@media (max-width: 620px) {
  .wrap { padding: 0 20px; }
  .prod-grid, .feat-grid, .related, .foot-grid { grid-template-columns: 1fr; }
  .card-grid, .card-grid-3, .cat-grid, .steps { grid-template-columns: 1fr; }
  .split-body { padding: 40px 28px; }
  .section { padding: 64px 0; }
  .hero-badge-row { gap: 20px; }
}

/* ============================================================
   MOBILE OPTIMISATION
   ============================================================ */

/* hamburger nav + mobile cart icon (switch earlier so the 9-item nav never crowds) */
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); flex-direction: column; gap: 0;
    padding: 8px 20px 20px; border-bottom: 1px solid var(--line);
    box-shadow: 0 26px 44px -26px rgba(0,0,0,0.45);
    max-height: calc(100vh - 72px); overflow-y: auto;
  }
  .nav-links.open a { padding: 15px 2px; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
  .nav-links.open a::after { display: none; }
  .nav-links.open .nav-cta { background: none; color: var(--ink); border: none; border-radius: 0; padding: 15px 2px; text-align: left; }
  .nav-links.open .nav-cta:hover { background: none; color: var(--ink) !important; }
  .nav-toggle { display: block; order: 3; }
  .nav-cart-m { display: inline-flex; }
}

/* persistent mobile cart button (injected by cart.js) */
.nav-cart-m { display: none; align-items: center; position: relative; background: none; border: none; cursor: pointer; color: var(--ink); padding: 6px; margin-left: auto; margin-right: 6px; }
.nav-cart-m svg { width: 24px; height: 24px; }
.nav-cart-m .cart-count { display: none; position: absolute; top: -3px; right: -5px; background: var(--ink); color: #fff; font-family: var(--display); font-weight: 700; font-size: 10px; min-width: 17px; height: 17px; border-radius: 9px; align-items: center; justify-content: center; padding: 0 4px; }
.nav-cart-m.has .cart-count { display: inline-flex; }

/* tablet / phone layout + touch + typography refinements */
@media (max-width: 900px) {
  .duo-item + .duo-item::before { display: none; }
}
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px; }   /* prevents iOS zoom-on-focus */
  .section { padding: 56px 0; }
  .pd-hero { padding: 40px 0 30px; }
  .pd-body { padding: 54px 0; }
  .duo-item { min-height: 300px; }
  .duo-item img { padding: 26px 22px; }
  .hero-badge-row { gap: 16px 24px; margin-top: 30px; }
  .hero-badge b { font-size: 22px; }
  .checkout-trust { flex-wrap: wrap; gap: 10px 18px; }
  .cart-drawer { width: 400px; }
  .co-sec { padding-top: 4px; }
  .oc-cta { flex-wrap: wrap; }
  .oc-cta .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 460px) {
  .wrap { padding: 0 18px; }
  .section { padding: 46px 0; }
  /* Buy box on phones: the stepper is a small adjustment, the CTA is the action.
     They previously both stretched to 100% and stacked, which gave a quantity
     control the same visual weight as Add to cart. Now they share one row and the
     CTA takes all the remaining space. */
  .hero-actions { gap: 10px; align-items: stretch; }
  .hero-actions > .btn { width: 100%; justify-content: center; }
  .qty-stepper { width: auto; flex: 0 0 auto; justify-content: center; }
  .hero-actions:has(> .qty-stepper) { flex-wrap: nowrap; }
  .hero-actions > .qty-stepper + .btn { width: auto; flex: 1 1 auto; min-width: 0; }
  .btn { padding: 13px 20px; font-size: 13px; }
  .breadcrumb { font-size: 12px; }
  .cart-subline b { font-size: 20px; }
}

/* honeypot spam trap (visually hidden) */
.hp-wrap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* cookie consent banner */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 250; max-width: 580px; margin: 0 auto; background: var(--ink); color: #fff; border-radius: 16px; padding: 20px 22px; box-shadow: 0 24px 60px -24px rgba(0,0,0,.6); display: flex; gap: 18px; align-items: center; flex-wrap: wrap; transform: translateY(160%); opacity: 0; transition: transform .45s var(--ease), opacity .45s var(--ease); }
.cookie-banner.show { transform: none; opacity: 1; }
.cookie-banner p { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.85); flex: 1; min-width: 220px; margin: 0; }
.cookie-banner a { color: #fff; text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; }
.cookie-banner .btn { padding: 10px 18px; font-size: 12px; }
.cookie-banner .btn-ghost { border-color: rgba(255,255,255,.4); color: #fff; }
.cookie-banner .btn-ghost:hover { background: rgba(255,255,255,.12); }
.cookie-banner .btn-solid { background: #fff; color: var(--ink); }
@media (max-width: 560px) { .cookie-banner { flex-direction: column; align-items: stretch; } .cookie-actions { justify-content: flex-end; } }

/* reviews / social proof */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.review-card { border: 1px solid var(--line); border-radius: 18px; padding: 28px 26px; background: #fff; display: flex; flex-direction: column; box-shadow: 0 8px 24px -20px rgba(0,0,0,.35); }
.review-stars { display: flex; gap: 3px; margin-bottom: 14px; color: var(--ink); }
.review-stars svg { width: 16px; height: 16px; }
.review-text { color: var(--ink-soft); font-size: 15px; line-height: 1.62; flex: 1; }
.review-who { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.review-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 13px; flex-shrink: 0; }
.review-meta b { font-family: var(--display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; display: block; }
.review-meta span { font-size: 12px; color: var(--gray); }
.review-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--gray); margin-left: auto; }
.review-verified svg { width: 13px; height: 13px; }
.sample-note { border: 1px dashed #c9a94a; background: #fdf9ee; border-radius: 10px; padding: 14px 18px; margin: 0 0 26px; font-size: 13.5px; color: #7a5c12; line-height: 1.55; }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .reviews-grid { grid-template-columns: 1fr; } }

/* legal pages */
.legal-body { max-width: 800px; }
.legal-body h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; font-size: 22px; margin: 42px 0 14px; }
.legal-body > h2:first-child { margin-top: 0; }
.legal-body h3 { font-family: var(--display); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; margin: 26px 0 10px; }
.legal-body p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; margin-bottom: 14px; }
.legal-body ul { margin: 0 0 16px; padding: 0; list-style: none; }
.legal-body li { color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; padding: 8px 0 8px 24px; position: relative; border-bottom: 1px solid var(--line-soft); }
.legal-body li::before { content: ''; position: absolute; left: 0; top: 16px; width: 10px; height: 1.5px; background: var(--ink); }
.legal-body a { text-decoration: underline; text-underline-offset: 2px; }
.legal-meta { color: var(--gray); font-size: 13px; margin-bottom: 6px; }
.legal-note { border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: 10px; padding: 18px 20px; margin: 34px 0 0; background: var(--paper-2); font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.foot-legal { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; }
.foot-legal a { color: #8a8a8a; font-size: 12.5px; }
.foot-legal a:hover { color: #fff; }

/* product page: sticky add-to-cart bar */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: rgba(255,255,255,0.96); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-top: 1px solid var(--line); box-shadow: 0 -12px 34px -22px rgba(0,0,0,0.4); transform: translateY(105%); transition: transform .38s var(--ease); }
.buybar.show { transform: none; }
.buybar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.buybar-info { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.buybar-name { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar-price { font-size: 13.5px; color: var(--ink-soft); font-weight: 600; }
.buybar-add { padding: 12px 24px; white-space: nowrap; }
body:has(.buybar.show) .back-to-top { bottom: 84px; }
@media (max-width: 480px) { .buybar-add { padding: 12px 18px; font-size: 13px; } .buybar-name { font-size: 13.5px; } .buybar-price { font-size: 12.5px; } }

/* batch verify tool */
.verify-box { max-width: 620px; margin: 0 auto; }
.verify-form { display: flex; gap: 12px; }
.verify-form input { flex: 1; padding: 15px 18px; border: 1px solid var(--line); border-radius: 100px; font-family: var(--body); font-size: 16px; text-transform: uppercase; letter-spacing: .04em; background: #fff; color: var(--ink); }
.verify-form input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(10,10,10,.05); }
.verify-result { margin-top: 26px; }
.vr-card { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; animation: wfpop .4s var(--ease); box-shadow: 0 26px 54px -34px rgba(0,0,0,.4); }
.vr-head { display: flex; align-items: center; gap: 13px; padding: 20px 24px; background: var(--ink); color: #fff; }
.vr-head.fail { background: #7a1414; }
.vr-badge { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vr-badge svg { width: 19px; height: 19px; }
.vr-head b { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-size: 16px; display: block; }
.vr-head small { font-size: 12px; color: rgba(255,255,255,.72); }
.vr-body { padding: 20px 24px 24px; }
.vr-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.vr-row:last-of-type { border-bottom: none; }
.vr-row span { color: var(--gray); }
.vr-row b { font-weight: 600; }
.vr-actions { margin-top: 18px; }
.verify-hint { text-align: center; margin-top: 16px; font-size: 13px; color: var(--gray); }
.verify-hint code { background: var(--paper-3); padding: 2px 8px; border-radius: 6px; font-family: ui-monospace, monospace; cursor: pointer; }
@media (max-width: 520px) { .verify-form { flex-direction: column; } .verify-form .btn { width: 100%; justify-content: center; } }

/* store search + sort toolbar */
.store-tools { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 22px 0 30px; }
.store-search { position: relative; flex: 1; min-width: 220px; max-width: 420px; }
.store-search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--gray); pointer-events: none; }
.store-search input { width: 100%; padding: 12px 16px 12px 42px; border: 1px solid var(--line); border-radius: 100px; font-family: var(--body); font-size: 15px; background: #fff; color: var(--ink); }
.store-search input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(10,10,10,0.05); }
.store-sort { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); }
.store-sort select { font-family: var(--body); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink); padding: 10px 36px 10px 15px; border: 1px solid var(--line); border-radius: 100px; background-color: #fff; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23555' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 11px; }
.store-sort select:focus { outline: none; border-color: var(--ink); }
.store-noresults { text-align: center; color: var(--gray); padding: 44px 0; font-size: 15px; }
@media (max-width: 520px) { .store-tools { flex-direction: column; align-items: stretch; } .store-search { max-width: none; } .store-sort { justify-content: space-between; } }

/* ---- extra-large screens: a touch more canvas ---- */
@media (min-width: 1600px) { :root { --max: 1280px; } }

/* ---- laptop / tablet band (901–1000px): keep dense grids breathable ---- */
@media (min-width: 901px) and (max-width: 1000px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .guarantee-grid { grid-template-columns: repeat(2, 1fr); }
  .lab-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ---- smoother explain-grid scaling (3 → 2 → 1) ---- */
@media (min-width: 601px) and (max-width: 1000px) {
  .explain-grid { grid-template-columns: repeat(2, 1fr); }
  .explain-cta { grid-column: span 2; }
}
@media (max-width: 600px) {
  .explain-grid { grid-template-columns: 1fr; }
  .explain-cta { grid-column: span 1; }
}

/* ---- deeper mobile tuning ---- */
@media (max-width: 640px) {
  .ci-qty button { width: 30px; height: 30px; font-size: 16px; }
  .qbtn { width: 34px; height: 34px; }
  .checkout-steps { flex-wrap: wrap; gap: 8px 4px; }
  .sum-trust, .cd-trust { flex-wrap: wrap; }
  .foot-grid { gap: 30px 24px; }
  .strip-track span { font-size: 12px; letter-spacing: 0.16em; }
}
/* ---- small phones (≤400px) ---- */
@media (max-width: 400px) {
  .wrap { padding: 0 16px; }
  .hero h1 { font-size: 44px; }
  .hero-full h1 { font-size: 46px; }
  .pd-title { font-size: 38px; }
  .section-head h2 { font-size: 30px; line-height: 1.02; }
  .duo-body h2 { font-size: 32px; }
  .hero-badge-row { gap: 14px 20px; }
  .cd-body, .cd-head, .cd-foot { padding-left: 20px; padding-right: 20px; }
  .pd-cols { gap: 40px; }
}

/* ============================================================
   PARTNER PORTAL (B2B) — login + gated portal
   ============================================================ */

/* login screen */
.plogin-body { min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(180deg, #fff 0%, #f6f6f6 100%); }
.plogin-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.plogin-card { width: 100%; max-width: 460px; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 44px 42px 38px; box-shadow: 0 40px 90px -50px rgba(0,0,0,.5); text-align: center; position: relative; overflow: hidden; }
.plogin-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #1CE31C, #1C5EE3, #901CE3, #E31C1C); }
.plock { width: 54px; height: 54px; border-radius: 15px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.plock svg { width: 26px; height: 26px; }
.plogin-h { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(30px, 6vw, 40px); line-height: 1; margin: 6px 0 14px; }
.plogin-sub { color: var(--gray); font-size: 14.5px; line-height: 1.6; margin: 0 auto 26px; max-width: 360px; }
.plogin-form { text-align: left; }
.plogin-row { display: flex; gap: 10px; }
.plogin-row input { flex: 1; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; font-family: var(--body); font-size: 15px; background: #fff; color: var(--ink); }
.plogin-row input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(10,10,10,.06); }
.plogin-row .btn { padding: 14px 22px; white-space: nowrap; }
.plogin-err { min-height: 18px; margin: 12px 2px 0; font-size: 13px; color: #b42318; }
.plogin-foot { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-soft); font-size: 13.5px; color: var(--gray); }
.plogin-foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.plogin-legal { padding: 24px 20px 30px; text-align: center; }
.plogin-legal p { font-size: 12px; color: var(--gray); }
@media (max-width: 480px) { .plogin-card { padding: 36px 26px 30px; } .plogin-row { flex-direction: column; } .plogin-row .btn { justify-content: center; } }

/* partner account pill */
.ppill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--line); border-radius: 100px; padding: 6px 14px; }
.ppill-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.16); }

/* draft / design note banner */
.pnote { border: 1px dashed #c9a94a; background: #fdf9ee; border-radius: 12px; padding: 14px 18px; font-size: 13.5px; color: #7a5c12; line-height: 1.55; }

/* partner pricing table */
.ptable-wrap { border: 1px solid var(--line); border-radius: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ptable { width: 100%; border-collapse: collapse; min-width: 640px; }
.ptable thead th { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--gray); text-align: right; padding: 20px 24px; background: var(--paper-2); border-bottom: 1.5px solid var(--ink); }
.ptable thead th span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #9a9a9a; margin-top: 3px; }
.ptable thead th.pt-sku { text-align: left; }
.ptable thead th.pt-hi, .ptable td.pt-hi { background: rgba(10,10,10,.045); }
.ptable tbody td { text-align: right; padding: 18px 24px; font-size: 19px; font-weight: 700; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; transition: background .18s var(--ease); }
.ptable tbody tr:last-child td { border-bottom: none; }
.ptable tbody tr { transition: background .18s var(--ease); }
.ptable tbody tr:hover td { background: rgba(10,10,10,.05); }
.ptable tbody tr:hover td.pt-hi { background: rgba(10,10,10,.10); }
.ptable td.pt-sku { text-align: left; font-weight: 400; }
.ptable td.pt-sku b { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 17px; display: block; }
.ptable td.pt-sku span { font-size: 12.5px; color: var(--gray); letter-spacing: .02em; }
.ptable td { color: var(--ink); }
.ptable td.pt-rrp { color: var(--gray); font-weight: 500; text-decoration: line-through; text-decoration-color: rgba(0,0,0,.28); }
.ptable td.pt-hi { font-weight: 800; font-size: 20px; }
.ptable-note { margin-top: 14px; font-size: 12.5px; color: var(--gray); line-height: 1.55; }

/* wholesale shop — product cards + order builder */
.wshop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wcard { border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.wcard:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -36px rgba(0,0,0,.4); }
.wcard-img { background: #ffffff; height: 176px; display: flex; align-items: center; justify-content: center; }
.wcard-img img { max-height: 100%; max-width: 100%; object-fit: contain; padding: 16px; }
.wcard-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.wcard-cat { font-family: var(--display); font-weight: 800; font-size: 10px; letter-spacing: .14em; color: var(--gray); text-transform: uppercase; }
.wcard-body h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 18px; margin: 6px 0 2px; }
.wcard-dose { font-size: 12px; color: var(--gray); margin-bottom: 14px; }
.wcard-fmt { display: inline-flex; border: 1px solid var(--line); border-radius: 100px; padding: 3px; margin-bottom: 14px; align-self: flex-start; }
.wcard-fmt button { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .04em; padding: 6px 16px; border: none; background: none; border-radius: 100px; cursor: pointer; color: var(--gray); transition: all .16s var(--ease); }
.wcard-fmt button.wf-on { background: var(--ink); color: #fff; }
.wcard-price { display: flex; align-items: baseline; gap: 5px; margin-bottom: 14px; }
.wcard-price b { font-family: var(--display); font-weight: 800; font-size: 25px; }
.wcard-price span { font-size: 12px; color: var(--gray); }
.wcard-qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 100px; overflow: hidden; width: fit-content; margin-bottom: 7px; }
.wcard-qty button { width: 38px; height: 38px; border: none; background: #fff; font-size: 18px; cursor: pointer; color: var(--ink); line-height: 1; }
.wcard-qty button:hover { background: var(--paper-3); }
.wcard-qty input { width: 62px; text-align: center; border: none; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); -moz-appearance: textfield; }
.wcard-qty input::-webkit-outer-spin-button, .wcard-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wcard-moq { font-size: 11px; color: var(--gray); margin-bottom: 12px; }
.wcard-line { font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; }
.wcard-line b { font-family: var(--display); font-weight: 800; }
.wcard-add { width: 100%; justify-content: center; margin-top: auto; }
.wcard-add.added { background: #1a7f37; border-color: #1a7f37; color: #fff; }
@media (max-width: 900px) { .wshop { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wshop { grid-template-columns: 1fr; } }

.worder { margin-top: 24px; border: 1.5px solid var(--ink); border-radius: 20px; background: #fff; padding: 24px 28px; scroll-margin-top: 90px; }
.worder-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: 15px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.worder-head span { font-family: var(--body); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--gray); }
.worder-lines { padding: 4px 0; }
.worder-empty { font-size: 14px; color: var(--gray); padding: 16px 0; }
.wo-line { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.wo-line:last-child { border-bottom: none; }
.wo-thumb { width: 42px; height: 42px; border-radius: 8px; background: #ffffff; object-fit: contain; padding: 3px; flex-shrink: 0; }
.wo-nm { flex: 1; min-width: 0; font-size: 14px; }
.wo-nm b { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .02em; display: block; }
.wo-nm span { font-size: 12px; color: var(--gray); }
.wo-lt { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; }
.wo-rm { border: none; background: none; cursor: pointer; color: var(--gray); font-size: 20px; line-height: 1; padding: 2px 4px; }
.wo-rm:hover { color: var(--ink); }
.worder-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); margin-top: 4px; flex-wrap: wrap; }
.worder-total { font-size: 14px; color: var(--gray); }
.worder-total b { font-family: var(--display); font-weight: 900; font-size: 26px; color: var(--ink); margin-left: 8px; font-variant-numeric: tabular-nums; }
.worder-foot .btn { padding: 14px 26px; }
.worder-note { font-size: 12px; color: var(--gray); margin-top: 12px; line-height: 1.55; }
.worder-success { display: none; text-align: center; padding: 20px 0 8px; }
.worder.done .worder-lines, .worder.done .worder-foot, .worder.done .worder-note { display: none; }
.worder.done .worder-success { display: block; }
.worder-success h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 20px; margin-bottom: 8px; }
.worder-success p { color: var(--gray); font-size: 14px; max-width: 420px; margin: 0 auto; }
.worder-success a { text-decoration: underline; color: var(--ink); }

/* ===== partner product pages ===== */
.pp-hero { padding-top: 40px; }
.pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; margin-top: 18px; }
.pp-photo { background: #ffffff; border-radius: 22px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pp-photo img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 40px; }
.pp-sku { font-size: 13px; color: var(--gray); letter-spacing: .02em; margin-bottom: 14px; }
.pp-blurb { font-size: 16px; color: var(--ink-soft); line-height: 1.62; max-width: 460px; margin-bottom: 22px; }
.pbuy { border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; background: #fff; }
.pb-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.pb-price b { font-family: var(--display); font-weight: 900; font-size: 34px; }
.pb-price span { font-size: 13px; color: var(--gray); }
.pb-fmt { display: inline-flex; border: 1px solid var(--line); border-radius: 100px; padding: 3px; margin-bottom: 16px; }
.pb-fmt button { font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .04em; padding: 8px 20px; border: none; background: none; border-radius: 100px; cursor: pointer; color: var(--gray); transition: all .16s var(--ease); }
.pb-fmt button.is-on { background: var(--ink); color: #fff; }
.pb-controls { display: flex; gap: 12px; align-items: center; }
.pb-qtybox { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 100px; overflow: hidden; }
.pb-qtybox button { width: 42px; height: 46px; border: none; background: #fff; font-size: 19px; cursor: pointer; color: var(--ink); }
.pb-qtybox button:hover { background: var(--paper-3); }
.pb-qty { width: 64px; text-align: center; border: none; font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); -moz-appearance: textfield; }
.pb-qty::-webkit-outer-spin-button, .pb-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pb-add { flex: 1; justify-content: center; }
.pb-add.added { background: #1a7f37; border-color: #1a7f37; color: #fff; }
.pb-line-note { font-size: 13px; color: var(--gray); margin-top: 14px; }
.pb-line-note .pb-line { color: var(--ink-soft); font-weight: 600; }
.pp-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; }
.pp-trust span { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--gray); position: relative; padding-left: 15px; }
.pp-trust span::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.pp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.pp-h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(24px, 3vw, 34px); margin-top: 8px; }
.pp-list { list-style: none; margin: 18px 0 0; }
.pp-list li { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--line-soft); position: relative; }
.pp-list li::before { content: ''; position: absolute; left: 0; top: 20px; width: 10px; height: 1.5px; background: var(--ink); }
.pp-list b { font-family: var(--display); font-weight: 700; letter-spacing: .01em; }
@media (max-width: 820px) { .pp-grid, .pp-cols { grid-template-columns: 1fr; gap: 30px; } }

.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.rel-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.rel-card:hover { transform: translateY(-3px); box-shadow: 0 24px 46px -34px rgba(0,0,0,.4); }
.rel-img { background: #ffffff; height: 150px; display: flex; align-items: center; justify-content: center; }
.rel-img img { max-height: 100%; max-width: 100%; object-fit: contain; padding: 14px; }
.rel-b { padding: 14px 16px 16px; }
.rel-b span { font-family: var(--display); font-weight: 800; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
.rel-b b { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 15px; display: block; margin: 4px 0 2px; }
.rel-b em { font-style: normal; font-size: 12.5px; color: var(--gray); }
@media (max-width: 820px) { .rel-grid { grid-template-columns: 1fr; } }

/* ===== order page ===== */
.of-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1.5px solid var(--ink); margin-bottom: 6px; }
.of-head .eyebrow { margin: 0; }
.of-head span:last-child { font-size: 13px; color: var(--gray); }
.of-line { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.of-thumb { width: 64px; height: 64px; border-radius: 10px; background: #ffffff; object-fit: contain; padding: 6px; flex-shrink: 0; }
.of-info { flex: 1; min-width: 0; }
.of-info a b { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 15px; letter-spacing: .02em; }
.of-info span { display: block; font-size: 12.5px; color: var(--gray); margin-top: 3px; }
.of-qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 100px; overflow: hidden; flex-shrink: 0; }
.of-qty button { width: 34px; height: 38px; border: none; background: #fff; font-size: 17px; cursor: pointer; color: var(--ink); }
.of-qty button:hover { background: var(--paper-3); }
.of-qty input { width: 54px; text-align: center; border: none; font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--ink); -moz-appearance: textfield; }
.of-qty input::-webkit-outer-spin-button, .of-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.of-lt { font-family: var(--display); font-weight: 800; font-size: 16px; min-width: 78px; text-align: right; font-variant-numeric: tabular-nums; }
.of-rm { border: none; background: none; cursor: pointer; color: var(--gray); font-size: 22px; line-height: 1; padding: 2px 4px; }
.of-rm:hover { color: var(--ink); }
.of-empty { text-align: center; padding: 54px 0; }
.of-empty p { color: var(--gray); font-size: 16px; margin-bottom: 18px; }
.of-summary { margin-top: 26px; border: 1.5px solid var(--ink); border-radius: 20px; padding: 26px 28px; max-width: 460px; margin-left: auto; }
.of-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; font-size: 15px; }
.of-row b { font-family: var(--display); font-weight: 900; font-size: 26px; }
.of-row.of-muted { color: var(--gray); font-size: 13px; }
.of-place { width: 100%; justify-content: center; margin-top: 16px; padding: 15px; }
.of-note { font-size: 12px; color: var(--gray); line-height: 1.55; margin-top: 12px; }
.of-done { text-align: center; padding: 10px 0 4px; margin-top: 12px; border-top: 1px solid var(--line); }
.of-done .wf-check { width: 52px; height: 52px; margin: 16px auto 14px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; }
.of-done .wf-check svg { width: 26px; height: 26px; }
.of-done h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 19px; margin-bottom: 8px; }
.of-done p { font-size: 13.5px; color: var(--gray); margin-bottom: 14px; }
.of-done p a { text-decoration: underline; }
@media (max-width: 560px) { .of-summary { max-width: none; } .of-line { flex-wrap: wrap; } .of-info { flex-basis: 55%; } .of-lt { min-width: 0; } }

/* ===== floating order bar + nav badge ===== */
#pOrderBar { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 520px; margin: 0 auto; z-index: 200; background: var(--ink); color: #fff; border-radius: 100px; padding: 11px 12px 11px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; box-shadow: 0 20px 50px -18px rgba(0,0,0,.55); transform: translateY(180%); opacity: 0; transition: transform .4s var(--ease), opacity .4s var(--ease); }
#pOrderBar.show { transform: none; opacity: 1; }
#pOrderBar .pob-l { display: flex; flex-direction: column; line-height: 1.15; }
#pOrderBar .pob-u { font-family: var(--display); font-weight: 800; font-size: 15px; }
#pOrderBar .pob-l span { font-size: 10.5px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .1em; }
#pOrderBar .pob-r { display: flex; align-items: center; gap: 14px; }
#pOrderBar .pob-t { font-family: var(--display); font-weight: 900; font-size: 18px; }
#pOrderBar .pob-cta { background: #fff; color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .03em; padding: 10px 18px; border-radius: 100px; white-space: nowrap; }
.nav-order-count { font-variant-numeric: tabular-nums; }
@media (max-width: 460px) { #pOrderBar { padding-left: 20px; } #pOrderBar .pob-t { font-size: 16px; } }
@media (max-width: 560px) {
  .ptable thead th { padding: 15px 16px; font-size: 12px; }
  .ptable tbody td { padding: 15px 16px; font-size: 17px; }
  .ptable td.pt-hi { font-size: 18px; }
  .ptable td.pt-sku b { font-size: 15px; }
}

/* partner document links */
.pdocs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pdoc { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; background: #fff; transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.pdoc:hover { transform: translateY(-3px); box-shadow: 0 24px 46px -34px rgba(0,0,0,.4); border-color: #d8d8d8; }
.pdoc-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pdoc-ic svg { width: 20px; height: 20px; }
.pdoc-t { flex: 1; min-width: 0; }
.pdoc-t b { font-family: var(--display); font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: .02em; display: block; }
.pdoc-t small { font-size: 12px; color: var(--gray); }
.pdoc .arw { font-size: 18px; color: var(--ink); }
@media (max-width: 820px) { .pdocs { grid-template-columns: 1fr; } }

/* partner hero pill on dark */
.partners-hero .ppill { color: #fff; border-color: rgba(255,255,255,.4); }
.partners-hero .hero-kicker { color: #eaeaea; }
/* keep hero copy off the globe + readable */
.partners-hero .hero-scrim { background:
  linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.5) 46%, rgba(0,0,0,0.12) 100%),
  linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.5) 100%); }
.partners-hero .hero-kicker, .partners-hero .hero-sub, .partners-hero .hero-actions, .partners-hero .hero-badge-row { max-width: 560px; }
.partners-hero h1 { font-size: clamp(34px, 5vw, 72px); line-height: 0.9; max-width: 460px; word-break: normal; overflow-wrap: break-word; }
.partners-hero .hero-kicker { margin-top: 18px; }
.partners-hero .invite-line { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; font-size: 13px; color: #cfcfcf; letter-spacing: .01em; }
.partners-hero .invite-line svg { width: 15px; height: 15px; flex-shrink: 0; }

/* how-it-works — 7-molecule geometric element */
#how .wrap { position: relative; }
.how-deco { position: absolute; top: 4px; right: 8px; width: 210px; height: 210px; pointer-events: none; z-index: 0; }
.how-deco .hd-spin { transform-origin: 100px 100px; animation: hdspin 46s linear infinite; }
.how-deco line { stroke: rgba(10,10,10,.16); stroke-width: 1.4; }
.how-deco circle { fill: var(--ink); }
.how-deco .hd-node { transform-box: fill-box; transform-origin: center; animation: hdpulse 3.2s var(--ease) infinite; }
@keyframes hdspin { to { transform: rotate(360deg); } }
@keyframes hdpulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (max-width: 900px) { .how-deco { width: 160px; height: 160px; opacity: .6; } }
@media (max-width: 680px) { .how-deco { display: none; } }
@media (prefers-reduced-motion: reduce) { .how-deco .hd-spin, .how-deco .hd-node { animation: none; } }

/* AI assistants feature banner */
.ai-feature { background: var(--ink); color: #fff; border-radius: 22px; padding: 40px 44px; margin-bottom: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; position: relative; overflow: hidden; }
.ai-feature::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #1CE31C, #1C5EE3, #901CE3, #E31C1C); }
.ai-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #cfcfcf; border: 1px solid rgba(255,255,255,.24); border-radius: 100px; padding: 6px 13px; margin-bottom: 16px; }
.ai-tag svg { width: 14px; height: 14px; }
.ai-copy h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.02; margin-bottom: 12px; }
.ai-copy p { color: rgba(255,255,255,.76); font-size: 14.5px; line-height: 1.62; max-width: 470px; }
.ai-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.ai-feat { border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 17px 17px; transition: border-color .2s var(--ease), background .2s var(--ease); }
.ai-feat:hover { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.04); }
.ai-feat svg { width: 21px; height: 21px; color: #fff; margin-bottom: 10px; display: block; }
.ai-feat b { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 12.5px; display: block; margin-bottom: 4px; }
.ai-feat span { font-size: 12.5px; color: rgba(255,255,255,.66); line-height: 1.5; }
@media (max-width: 820px) { .ai-feature { grid-template-columns: 1fr; padding: 32px 26px; gap: 24px; } }
@media (max-width: 440px) { .ai-feats { grid-template-columns: 1fr; } }

/* solutions grid — payments / advertising / covered */
.sol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sol-card { border: 1px solid var(--line); border-radius: 18px; padding: 30px 28px; background: #fff; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.sol-card:hover { transform: translateY(-4px); box-shadow: 0 28px 54px -36px rgba(0,0,0,.42); border-color: #d8d8d8; }
.sol-card .sol-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.sol-card .sol-ico svg { width: 23px; height: 23px; }
.sol-card h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 16px; margin-bottom: 9px; }
.sol-card p { color: var(--gray); font-size: 14px; line-height: 1.58; }
@media (max-width: 900px) { .sol-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sol-grid { grid-template-columns: 1fr; } }

/* invite / selected-partners band */
.invite-band { position: relative; border: 1.5px solid var(--ink); border-radius: 24px; padding: 48px 52px; background: #fff; overflow: hidden; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.invite-band .eyebrow { margin-bottom: 12px; }
.invite-band h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(30px, 4vw, 46px); line-height: .98; margin-bottom: 14px; }
.invite-band p { color: var(--gray); font-size: 15px; line-height: 1.65; max-width: 520px; }
.invite-band .invite-cta { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.invite-band .invite-cta .btn { width: 100%; justify-content: center; }
.invite-band .invite-note { margin-top: 6px; font-size: 12.5px; color: var(--gray); text-align: center; line-height: 1.5; }
@media (max-width: 820px) { .invite-band { grid-template-columns: 1fr; padding: 36px 26px; gap: 26px; } .invite-band .invite-cta { max-width: 380px; margin: 0 auto; } }

/* two supply models: wholesale + private-label dropshipping */
.pmodels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pmodel { border: 1px solid var(--line); border-radius: 20px; padding: 34px 32px; background: #fff; display: flex; flex-direction: column; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.pmodel:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -38px rgba(0,0,0,.42); }
.pmodel.is-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.pmodel-tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: var(--display); font-weight: 700; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); border: 1px solid var(--line); border-radius: 100px; padding: 6px 13px; margin-bottom: 18px; }
.pmodel.is-dark .pmodel-tag { color: #cfcfcf; border-color: rgba(255,255,255,.24); }
.pmodel h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; font-size: 24px; line-height: 1.02; margin-bottom: 12px; }
.pmodel > p { color: var(--gray); font-size: 14.5px; line-height: 1.6; margin-bottom: 18px; }
.pmodel.is-dark > p { color: rgba(255,255,255,.74); }
.pmodel ul { list-style: none; margin: 0 0 24px; flex: 1; }
.pmodel li { font-size: 14px; padding: 10px 0 10px 24px; position: relative; border-bottom: 1px solid var(--line-soft); }
.pmodel.is-dark li { border-color: rgba(255,255,255,.12); }
.pmodel li:last-child { border-bottom: none; }
.pmodel li::before { content: ''; position: absolute; left: 0; top: 17px; width: 10px; height: 1.5px; background: currentColor; opacity: .5; }
.pmodel .pmodel-price { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .01em; margin-bottom: 20px; display: flex; align-items: center; gap: 9px; }
.pmodel .pmodel-price svg { width: 17px; height: 17px; flex-shrink: 0; }
.pmodel .btn { width: 100%; justify-content: center; margin-top: auto; }
.pmodel.is-dark .btn-solid { background: #fff; color: var(--ink); }
.pmodel.is-dark .btn-solid:hover { background: transparent; color: #fff; }
@media (max-width: 820px) { .pmodels { grid-template-columns: 1fr; } }

/* meeting / consultation band */
.meet-band { background: var(--ink); color: #fff; border-radius: 24px; padding: 46px 48px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 34px; align-items: center; position: relative; overflow: hidden; }
.meet-band::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #1CE31C, #1C5EE3, #901CE3, #E31C1C); }
.meet-band h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(28px, 3.4vw, 40px); line-height: 1; margin-bottom: 14px; }
.meet-band p { color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.65; margin-bottom: 12px; }
.meet-steps { display: flex; flex-direction: column; gap: 12px; }
.meet-step { display: flex; gap: 14px; align-items: flex-start; }
.meet-step .mn { font-family: var(--display); font-weight: 800; font-size: 13px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.meet-step b { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 13px; display: block; margin-bottom: 2px; }
.meet-step span { font-size: 13px; color: rgba(255,255,255,.72); line-height: 1.5; }
@media (max-width: 820px) { .meet-band { grid-template-columns: 1fr; padding: 36px 28px; gap: 26px; } }

/* ===== partner login — molecular lock ===== */
.plgn-body { background: #050506; color: #fff; min-height: 100vh; overflow: hidden; }
.plgn-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.plgn-vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(130% 100% at 66% 50%, rgba(5,5,6,0) 42%, rgba(5,5,6,.35) 72%, rgba(5,5,6,.85) 100%),
              linear-gradient(90deg, rgba(5,5,6,.82) 0%, rgba(5,5,6,.3) 34%, rgba(5,5,6,0) 60%); }
.plgn-brand { position: fixed; top: 24px; left: 30px; z-index: 6; font-family: var(--display); font-weight: 900; font-size: 20px; letter-spacing: .02em; color: #fff; display: flex; align-items: center; gap: 9px; }
.plgn-brand .mark { width: 12px; height: 12px; border-radius: 50%; background: #fff; display: inline-block; }
.plgn-brand .tm { font-size: .5em; vertical-align: super; font-weight: 700; }
.plgn { position: relative; z-index: 2; min-height: 100vh; display: flex; align-items: center; }
.plgn-inner { max-width: 460px; margin-left: 8%; padding: 24px; }
.plgn-eye { color: #9aa0a6; }
.plgn-h { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(46px, 7vw, 94px); line-height: .88; letter-spacing: -.02em; margin: 12px 0 18px; text-shadow: 0 10px 46px rgba(0,0,0,.7); }
.plgn-sub { color: #c7c9cc; font-size: 15px; line-height: 1.62; max-width: 430px; margin-bottom: 26px; text-shadow: 0 2px 22px rgba(0,0,0,.7); }
.plgn-form { max-width: 440px; }
.plgn-row { display: flex; gap: 10px; }
.plgn-row input { flex: 1; padding: 15px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(255,255,255,.06); color: #fff; font-family: var(--body); font-size: 15px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.plgn-row input::placeholder { color: rgba(255,255,255,.45); }
.plgn-row input:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.1); }
.plgn-row .btn { padding: 15px 24px; white-space: nowrap; }
.plgn-body .btn-solid { background: #fff; color: var(--ink); border-color: #fff; }
.plgn-body .btn-solid:hover { background: transparent; color: #fff; }
.plgn-err { min-height: 18px; margin: 12px 2px 0; font-size: 13px; color: #ff8a80; }
.plgn-foot { margin-top: 24px; font-size: 13px; color: #9aa0a6; }
.plgn-foot a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
/* the copy recedes as the lock opens, then a dark wash carries into the portal */
.plgn-back { position: fixed; top: 24px; right: 30px; z-index: 6; display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #cfd2d6; border: 1px solid rgba(255,255,255,.22); border-radius: 100px; padding: 9px 17px; background: rgba(255,255,255,.05); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); }
.plgn-back:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.12); }
.plgn-back .arw { transition: transform .18s var(--ease); }
.plgn-back:hover .arw { transform: translateX(-3px); }
.plgn-body.is-unlocking .plgn-inner, .plgn-body.is-unlocking .plgn-brand, .plgn-body.is-unlocking .plgn-back { transition: opacity .5s var(--ease), transform .5s var(--ease); opacity: 0; transform: translateY(-10px); }
@media (max-width: 560px) { .plgn-back { top: 18px; right: 18px; padding: 8px 14px; font-size: 11px; } }
.plgn-flash { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 60% at 66% 50%, rgba(30,30,34,1) 0%, #0a0a0a 60%);
  transition: opacity .52s var(--ease); }
.plgn-flash.show { opacity: 1; pointer-events: auto; }

/* partner portal — fade in from the same dark on arrival */
.portal-intro { position: fixed; inset: 0; z-index: 9999; background: #0a0a0a; pointer-events: none; animation: portalIntroFade .9s var(--ease) .05s forwards; }
@keyframes portalIntroFade { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .portal-intro { animation-duration: .25s; } }
.foot-contact { font-size: 13px; color: #8a8a8a; margin-bottom: 6px; }
.foot-contact a { color: #d6d6d6; text-decoration: underline; text-underline-offset: 2px; }
.foot-contact a:hover { color: #fff; }

/* ===== partner AI assistant + forecaster ===== */
.ai-wrap { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: stretch; margin-top: 8px; }
.chat { background: #0c0c0e; color: #fff; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; position: relative; min-height: 470px; box-shadow: 0 36px 84px -52px rgba(0,0,0,.75); }
.chat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #1CE31C, #1C5EE3, #901CE3, #E31C1C); z-index: 3; }
.chat-top { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
.chat-orb { width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(from 0deg, #1CE31C, #1C5EE3, #901CE3, #E31C1C, #1CE31C); animation: orbspin 6s linear infinite; box-shadow: 0 0 20px rgba(120,120,255,.45); flex-shrink: 0; position: relative; }
.chat-orb::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #0c0c0e; }
@keyframes orbspin { to { transform: rotate(360deg); } }
.chat-top b { font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; display: block; }
.chat-top em { font-style: normal; font-size: 11.5px; color: #7fd88f; letter-spacing: .02em; }
.chat-log { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; max-height: 430px; }
.chat-log::-webkit-scrollbar { width: 7px; } .chat-log::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }
.msg { max-width: 84%; font-size: 14px; line-height: 1.56; padding: 12px 15px; border-radius: 15px; animation: wfpop .32s var(--ease); }
.msg.bot { align-self: flex-start; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09); border-bottom-left-radius: 4px; }
.msg.me { align-self: flex-end; background: #fff; color: var(--ink); border-bottom-right-radius: 4px; font-weight: 500; }
.msg a { color: #9ecbff; text-decoration: underline; }
.msg.me a { color: var(--ink); }
.typing { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); animation: typ 1s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typ { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 14px; }
.chip { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .02em; color: #dcdcdc; border: 1px solid rgba(255,255,255,.2); border-radius: 100px; padding: 8px 14px; cursor: pointer; background: rgba(255,255,255,.04); transition: color .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease); }
.chip:hover { background: #fff; color: var(--ink); border-color: #fff; }
.chat-input { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.08); }
.chat-input input { flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 100px; padding: 12px 18px; color: #fff; font-family: var(--body); font-size: 14px; }
.chat-input input::placeholder { color: rgba(255,255,255,.4); }
.chat-input input:focus { outline: none; border-color: #fff; }
.chat-send { width: 44px; height: 44px; border-radius: 50%; border: none; background: #fff; color: var(--ink); font-size: 18px; cursor: pointer; flex-shrink: 0; transition: transform .16s var(--ease); }
.chat-send:hover { transform: translateY(-1px); }

.forecaster { border: 1px solid var(--line); border-radius: 22px; background: #fff; padding: 26px; display: flex; flex-direction: column; }
.fc-eye { font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
.forecaster h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 20px; margin: 6px 0 4px; }
.forecaster label { display: block; font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 16px 0 7px; }
.forecaster select { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; font-family: var(--body); font-size: 14px; background: #fff; color: var(--ink); cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23555' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 11px; }
.forecaster select:focus { outline: none; border-color: var(--ink); }
.fc-fmt { display: inline-flex; border: 1px solid var(--line); border-radius: 100px; padding: 3px; }
.fc-fmt button { font-family: var(--display); font-weight: 700; font-size: 12px; padding: 7px 18px; border: none; background: none; border-radius: 100px; cursor: pointer; color: var(--gray); }
.fc-fmt button.on { background: var(--ink); color: #fff; }
.fc-qtybox { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 100px; overflow: hidden; width: fit-content; }
.fc-qtybox button { width: 40px; height: 44px; border: none; background: #fff; font-size: 18px; cursor: pointer; color: var(--ink); }
.fc-qtybox button:hover { background: var(--paper-3); }
.fc-qtybox input { width: 72px; text-align: center; border: none; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); -moz-appearance: textfield; }
.fc-qtybox input::-webkit-outer-spin-button, .fc-qtybox input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fc-run { width: 100%; justify-content: center; margin-top: 20px; }
.fc-out { margin-top: 16px; }
.fc-card { border: 1px solid var(--line); border-radius: 14px; padding: 8px 18px 16px; background: var(--paper-2); }
.fc-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 14px; border-bottom: 1px solid var(--line-soft); }
.fc-row:last-of-type { border-bottom: none; }
.fc-row b { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; }
.fc-big { font-size: 24px; }
.fc-tier { display: inline-block; font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: #fff; border-radius: 100px; padding: 5px 12px; }
.fc-note { font-size: 11.5px; color: var(--gray); margin-top: 12px; line-height: 1.5; }
@media (max-width: 900px) { .ai-wrap { grid-template-columns: 1fr; } }

/* partner pages — higher-contrast, more readable sub text */
.ptr .section-head p, .ptr .pd-lead { color: var(--ink-soft); font-size: 16.5px; line-height: 1.65; }
.ptr .pnote, .ptr .ptable-note { color: #6a6a6a; }
.partners-hero .hero-kicker { color: #f4f4f4; font-size: clamp(14px, 1.5vw, 17px); }
.partners-hero .hero-sub { color: #eaeaea; font-size: 16.5px; }
.partners-hero .hero-login { margin-top: 16px; font-size: 14px; color: #cfcfcf; }
.partners-hero .hero-login a { color: #fff; text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }

/* dashboard — connect existing customer account banner */
.connect-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border: 1px solid var(--ink); border-radius: 14px; background: #fff; padding: 14px 18px; margin-bottom: 22px; }
.connect-banner .cb-copy { font-size: 13.5px; color: var(--ink-soft); }
.connect-banner .cb-copy b { font-family: var(--display); font-weight: 700; }
.cb-actions { display: flex; align-items: center; gap: 8px; }
.cb-x { border: none; background: none; font-size: 22px; line-height: 1; color: var(--gray); cursor: pointer; padding: 2px 6px; }
.cb-x:hover { color: var(--ink); }

/* about — manifesto section */
.about-manifesto { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.am-head { position: relative; }
.am-head .eyebrow { position: relative; z-index: 1; }
.am-deco { position: absolute; top: -34px; right: 6px; width: 190px; height: 190px; z-index: 0; pointer-events: none; }
.am-deco .hd-spin { transform-origin: 100px 100px; animation: hdspin 46s linear infinite; }
.am-deco line { stroke: rgba(10,10,10,.13); stroke-width: 1.4; }
.am-deco circle { fill: var(--ink); }
.am-deco .hd-node { transform-box: fill-box; transform-origin: center; animation: hdpulse 3.2s var(--ease) infinite; }
.am-title { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(34px, 4.6vw, 58px); line-height: .94; margin: 14px 0 0; position: relative; z-index: 1; }
.am-title::before { content: ''; position: absolute; left: -18px; top: -14px; width: 200px; height: 200px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(28,94,227,.10) 0%, rgba(144,28,227,.06) 40%, rgba(0,0,0,0) 70%); filter: blur(6px); animation: amAura 6s ease-in-out infinite; }
@keyframes amAura { 0%,100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.am-accent { display: block; width: 74px; height: 4px; border-radius: 3px; margin-top: 24px; background: linear-gradient(90deg, #1CE31C, #1C5EE3, #901CE3, #E31C1C); background-size: 200% 100%; animation: amAccent 5s linear infinite; }
@keyframes amAccent { to { background-position: 200% 0; } }
.am-body p { color: #1a1a1a; font-size: 17.5px; line-height: 1.78; max-width: 560px; }
.am-body p + p { margin-top: 20px; }
@media (prefers-reduced-motion: reduce) { .am-deco .hd-spin, .am-deco .hd-node, .am-title::before, .am-accent { animation: none; } }
@media (max-width: 820px) { .about-manifesto { grid-template-columns: 1fr; gap: 28px; } .am-deco { width: 140px; height: 140px; top: -20px; opacity: .5; } .am-body p { font-size: 16.5px; } }

/* home — research assistant (educational) */
#learn { padding-top: 58px; padding-bottom: 58px; }
#learn .section-head { margin-bottom: 24px !important; }
#learn .section-head h2 { font-size: clamp(24px, 2.8vw, 34px); }
#learn .section-head p { font-size: 15px; }
.edu-wrap { max-width: 620px; margin: 0 auto; }
.edu-chat { border: 1px solid var(--line); border-radius: 24px; background: #fff; overflow: hidden; box-shadow: 0 32px 74px -48px rgba(0,0,0,.38); position: relative; display: flex; flex-direction: column; }
.edu-chat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #1CE31C, #1C5EE3, #901CE3, #E31C1C); z-index: 2; }
.edu-top { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line-soft); }
.edu-orb { width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(from 0deg, #1CE31C, #1C5EE3, #901CE3, #E31C1C, #1CE31C); animation: orbspin 6s linear infinite; flex-shrink: 0; position: relative; box-shadow: 0 0 18px rgba(120,120,255,.35); }
.edu-orb::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.edu-top b { font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; display: block; }
.edu-top em { font-style: normal; font-size: 11.5px; color: var(--gray); }
.edu-log { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; max-height: 290px; overflow-y: auto; }
.edu-msg { max-width: 88%; font-size: 14px; line-height: 1.52; padding: 11px 14px; border-radius: 14px; animation: wfpop .3s var(--ease); }
.edu-msg.bot { align-self: flex-start; background: var(--paper-3); border: 1px solid var(--line-soft); border-bottom-left-radius: 4px; color: var(--ink-soft); }
.edu-msg.bot b { color: var(--ink); }
.edu-msg.me { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px; font-weight: 500; }
.edu-msg a { color: inherit; text-decoration: underline; font-weight: 600; }
.edu-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 14px; }
.edu-chip { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .02em; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 100px; padding: 8px 14px; cursor: pointer; background: #fff; transition: color .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease); }
.edu-chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.edu-input { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line-soft); }
.edu-input input { flex: 1; border: 1px solid var(--line); border-radius: 100px; padding: 12px 18px; font-family: var(--body); font-size: 14px; color: var(--ink); background: var(--paper-2); }
.edu-input input:focus { outline: none; border-color: var(--ink); }
.edu-send { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--ink); color: #fff; font-size: 18px; cursor: pointer; flex-shrink: 0; transition: transform .16s var(--ease); }
.edu-send:hover { transform: translateY(-1px); }
.edu-typing { display: inline-flex; gap: 4px; align-items: center; }
.edu-typing span { width: 6px; height: 6px; border-radius: 50%; background: #bbb; animation: typ 1s infinite; }
.edu-typing span:nth-child(2) { animation-delay: .15s; } .edu-typing span:nth-child(3) { animation-delay: .3s; }
.edu-disc { text-align: center; font-size: 12px; color: var(--gray); margin-top: 16px; max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.5; }

/* ============================================================
   PARTNER DASHBOARD (app shell)
   ============================================================ */
.dash { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; background: var(--paper-2); }
.dash-side { background: #0a0a0a; color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.dash-brand { display: flex; align-items: center; gap: 9px; padding: 22px 24px 20px; font-family: var(--display); font-weight: 900; font-size: 19px; letter-spacing: .02em; border-bottom: 1px solid rgba(255,255,255,.09); }
.dash-brand .mark { width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.dash-brand .tm { font-size: .5em; vertical-align: super; font-weight: 700; }
.dash-nav { flex: 1; padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.dash-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; color: rgba(255,255,255,.68); font-size: 14px; font-weight: 500; transition: background .15s var(--ease), color .15s var(--ease); }
.dash-nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.dash-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.dash-nav a.is-on { background: #fff; color: #0a0a0a; font-weight: 600; }
.dash-nav a .badge { margin-left: auto; background: #fff; color: #0a0a0a; font-family: var(--display); font-weight: 800; font-size: 10px; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.dash-nav a.is-on .badge { background: #0a0a0a; color: #fff; }
.dash-foot { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.09); display: flex; align-items: center; gap: 11px; }
.dash-foot .av { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 12px; }
.dash-foot .who { flex: 1; min-width: 0; line-height: 1.2; }
.dash-foot .who b { font-family: var(--display); font-weight: 700; font-size: 12.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-foot .who span { font-size: 11px; color: rgba(255,255,255,.5); }
.dash-foot .out { color: rgba(255,255,255,.55); font-size: 12px; }
.dash-foot .out:hover { color: #fff; }

.dash-main { min-width: 0; display: flex; flex-direction: column; }
.dash-top { position: sticky; top: 0; z-index: 6; background: rgba(250,250,250,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dash-top h1 { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; font-size: 21px; }
.dash-top .sub { font-size: 12.5px; color: var(--gray); margin-top: 1px; }
.dash-top-actions { display: flex; align-items: center; gap: 10px; }
.dash-mode { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); border: 1px solid var(--line); border-radius: 100px; padding: 6px 12px; background: #fff; }
.dash-mode .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.dash-body { padding: 28px 32px 60px; }
.dash-note { border: 1px dashed #c9a94a; background: #fdf9ee; border-radius: 12px; padding: 12px 16px; font-size: 12.5px; color: #7a5c12; line-height: 1.5; margin-bottom: 22px; }

/* KPI cards */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.kpi { border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; background: #fff; }
.kpi .k-lab { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); }
.kpi .k-lab svg { width: 15px; height: 15px; }
.kpi b { display: block; font-family: var(--display); font-weight: 900; font-size: 30px; letter-spacing: -.01em; margin: 9px 0 3px; font-variant-numeric: tabular-nums; }
.kpi b i { font-style: normal; font-size: 14px; font-weight: 700; color: var(--gray); }
.kpi small { font-size: 12px; color: var(--gray); }
.kpi.alert { border-color: var(--ink); }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: 1fr 1fr; } }

/* panels + section titles inside dashboard */
.dash-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .dash-cols { grid-template-columns: 1fr; } }
.panel { border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.panel-h h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: 13px; }
.panel-h a { font-family: var(--display); font-weight: 600; font-size: 12px; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.panel-b { padding: 6px 20px 14px; }
.dash-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.qbtn2 { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fff; cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .01em; color: var(--ink); transition: border-color .18s var(--ease), transform .18s var(--ease); }
.qbtn2:hover { border-color: var(--ink); transform: translateY(-2px); }
.qbtn2 svg { width: 20px; height: 20px; }

/* mode pill (order A/B) + stock bars */
.mpill { font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; border-radius: 100px; padding: 3px 9px; }
.mpill.a { background: #eef0f0; color: var(--ink); }
.mpill.b { background: #0a0a0a; color: #fff; }
.stockbar { width: 90px; height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; display: inline-block; vertical-align: middle; }
.stockbar > i { display: block; height: 100%; background: var(--ink); }
.stockbar.low > i { background: #c98a12; }
.stockbar.out > i { background: #a11c1c; }

/* dashboard mobile: sidebar -> top bar */
@media (max-width: 900px) {
  .dash { grid-template-columns: 1fr; }
  .dash-side { position: sticky; height: auto; flex-direction: row; align-items: center; top: 0; z-index: 20; padding: 0 6px; overflow-x: auto; }
  .dash-brand { border-bottom: none; border-right: 1px solid rgba(255,255,255,.09); padding: 14px 16px; white-space: nowrap; }
  .dash-nav { flex-direction: row; padding: 8px; gap: 4px; }
  .dash-nav a { padding: 9px 12px; white-space: nowrap; }
  .dash-nav a span.lbl { display: none; }
  .dash-nav a.is-on span.lbl { display: inline; }
  .dash-foot { display: none; }
  .dash-body { padding: 20px 18px 50px; }
  .dash-top { padding: 14px 18px; }
}

/* support contact form (messages) */
.sup-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.sup-form .pay-field { margin-bottom: 14px; }
@media (max-width: 640px) { .sup-row { grid-template-columns: 1fr; } }

/* order detail */
.od-grid { display: grid; grid-template-columns: 1.55fr 0.85fr; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .od-grid { grid-template-columns: 1fr; } }
.od-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.od-head h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; font-size: 26px; }
.od-sub { font-size: 13px; color: var(--gray); margin-bottom: 22px; }
.otl-wrap { overflow-x: auto; padding: 6px 2px 2px; }
.otl { display: flex; align-items: flex-start; min-width: 460px; }
.otl .ostep { flex: 1; text-align: center; position: relative; }
.otl .ostep::before { content: ''; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.otl .ostep:first-child::before { display: none; }
.otl .ostep.done::before, .otl .ostep.cur::before { background: var(--ink); }
.otl .odot { width: 14px; height: 14px; border-radius: 50%; background: var(--line); margin: 0 auto 8px; position: relative; z-index: 1; }
.otl .ostep.done .odot { background: var(--ink); }
.otl .ostep.cur .odot { background: var(--ink); box-shadow: 0 0 0 4px rgba(10,10,10,.14); }
.otl .olab { font-family: var(--display); font-weight: 700; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--gray); }
.otl .ostep.done .olab, .otl .ostep.cur .olab { color: var(--ink); }
.od-kv { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 13.5px; border-bottom: 1px solid var(--line-soft); }
.od-kv:last-child { border-bottom: none; }
.od-kv .k { color: var(--gray); }
.od-kv .v { text-align: right; font-weight: 500; color: var(--ink); }
.od-kv .v.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.od-tot { display: flex; justify-content: space-between; align-items: baseline; border-top: 1.5px solid var(--ink); margin-top: 8px; padding-top: 14px; }
.od-tot b { font-family: var(--display); font-weight: 900; font-size: 24px; font-variant-numeric: tabular-nums; }
.od-tot b i { font-style: normal; font-size: 13px; color: var(--gray); }
.od-actions { display: flex; flex-direction: column; gap: 9px; }
.od-actions .btn { width: 100%; justify-content: center; }

/* ===== admin (operator) extras ===== */
.dash-brand .ops { font-family: var(--display); font-weight: 800; font-size: 9px; letter-spacing: .14em; background: rgba(255,255,255,.16); color: #fff; border-radius: 4px; padding: 2px 6px; margin-left: 7px; }
.op-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); border: 1px solid var(--line); border-radius: 100px; padding: 6px 12px; background: #fff; }
.op-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: #c98a12; }
/* clickable list row */
.row-link { cursor: pointer; }
.row-link:hover td { background: rgba(10,10,10,.03); }
/* inline queue actions */
.qa { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .03em; padding: 6px 12px; border-radius: 100px; border: 1px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer; white-space: nowrap; }
.qa.ghost { background: #fff; color: var(--ink); }
.qa:hover { opacity: .88; }
.qa + .qa { margin-left: 6px; }
/* support inbox */
.inbox { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; }
.inbox-item { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.inbox-item:last-child { border-bottom: none; }
.inbox-item:hover { background: rgba(10,10,10,.02); }
.inbox-item .iav { width: 34px; height: 34px; border-radius: 50%; background: var(--paper-3); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 12px; flex-shrink: 0; }
.inbox-item .ib { flex: 1; min-width: 0; }
.inbox-item .ib b { font-family: var(--display); font-weight: 700; font-size: 13.5px; }
.inbox-item .ib p { font-size: 12.5px; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.inbox-item .it { font-size: 11.5px; color: var(--gray); white-space: nowrap; flex-shrink: 0; }
.inbox-item.unread .ib b::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); margin-left: 7px; vertical-align: middle; }
/* mini stat inline */
.mini-list p { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 13px; border-bottom: 1px solid var(--line-soft); }
.mini-list p:last-child { border-bottom: none; }
.mini-list p b { font-family: var(--display); font-weight: 800; }

/* account menu (sidebar foot) */
.dash-foot { position: relative; }
.dash-acct-btn { width: 100%; display: flex; align-items: center; gap: 11px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; color: #fff; }
.acct-caret { width: 16px; height: 16px; color: rgba(255,255,255,.45); transition: transform .2s var(--ease); flex-shrink: 0; }
.dash-acct-btn[aria-expanded="true"] .acct-caret { transform: rotate(180deg); }
.dash-acct-menu { position: absolute; left: 12px; right: 12px; bottom: 66px; background: #161618; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 6px; box-shadow: 0 22px 54px -22px rgba(0,0,0,.8); display: none; z-index: 40; }
.dash-acct-menu.show { display: block; animation: wfpop .18s var(--ease); }
.dash-acct-menu a { display: block; padding: 10px 12px; border-radius: 8px; color: rgba(255,255,255,.82); font-size: 13.5px; }
.dash-acct-menu a:hover { background: rgba(255,255,255,.08); color: #fff; }
.acct-sep { height: 1px; background: rgba(255,255,255,.1); margin: 5px 4px; }

/* settings switches */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .track { position: absolute; inset: 0; background: var(--line); border-radius: 100px; cursor: pointer; transition: background .2s var(--ease); }
.switch .track::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + .track { background: var(--ink); }
.switch input:checked + .track::before { transform: translateX(18px); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.set-row:last-child { border-bottom: none; }
.set-row .st-t b { font-family: var(--display); font-weight: 700; display: block; font-size: 13.5px; }
.set-row .st-t span { font-size: 12.5px; color: var(--gray); }

/* new-order builder */
.no-mode { display: inline-flex; border: 1px solid var(--line); border-radius: 100px; padding: 4px; background: #fff; margin-bottom: 20px; }
.no-mode button { font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .03em; padding: 9px 20px; border: none; background: none; border-radius: 100px; cursor: pointer; color: var(--gray); }
.no-mode button.is-on { background: var(--ink); color: #fff; }
.no-grid { display: grid; grid-template-columns: 1.6fr 0.9fr; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .no-grid { grid-template-columns: 1fr; } }
.no-rows { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; }
.no-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 14px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--line-soft); }
.no-row:last-child { border-bottom: none; }
.no-row .np-name b { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 13.5px; letter-spacing: .02em; display: block; }
.no-row .np-name span { font-size: 12px; color: var(--gray); }
.no-row .np-unit { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.no-qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 100px; overflow: hidden; }
.no-qty button { width: 32px; height: 34px; border: none; background: #fff; font-size: 16px; cursor: pointer; color: var(--ink); }
.no-qty button:hover { background: var(--paper-3); }
.no-qty input { width: 52px; text-align: center; border: none; font-family: var(--display); font-weight: 700; font-size: 14px; -moz-appearance: textfield; }
.no-qty input::-webkit-outer-spin-button, .no-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.no-row .np-line { font-family: var(--display); font-weight: 800; font-size: 14px; min-width: 82px; text-align: right; font-variant-numeric: tabular-nums; }
.no-sum { border: 1.5px solid var(--ink); border-radius: 18px; background: #fff; padding: 24px 24px 22px; position: sticky; top: 90px; }
.no-sum h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: .03em; margin-bottom: 4px; }
.no-sum .no-mode-note { font-size: 12px; color: var(--gray); margin-bottom: 16px; }
.no-line { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; color: var(--ink-soft); }
.no-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 14px; }
.no-total b { font-family: var(--display); font-weight: 900; font-size: 26px; font-variant-numeric: tabular-nums; }
.no-total b i { font-style: normal; font-size: 14px; color: var(--gray); }
.no-create { width: 100%; justify-content: center; margin-top: 18px; padding: 14px; }
.no-mini { font-size: 11.5px; color: var(--gray); margin-top: 12px; line-height: 1.5; }
.no-empty { text-align: center; color: var(--gray); font-size: 13px; padding: 14px 0; }
/* order-created card */
.oc-card { display: none; border: 1.5px solid var(--ink); border-radius: 20px; background: #fff; overflow: hidden; margin-top: 6px; }
.oc-card.show { display: block; animation: wfpop .3s var(--ease); }
.oc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; background: var(--ink); color: #fff; }
.oc-head b { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: 15px; }
.oc-head .st { background: #fdf2e6; color: #9a5a12; }
.oc-body { padding: 22px 24px; }

@media (max-width: 900px) {
  .dash-foot { display: flex; margin-left: auto; padding: 8px 12px; border-top: none; }
  .dash-acct-btn .who { display: none; }
  .dash-acct-menu { bottom: auto; top: 54px; left: auto; right: 6px; width: 210px; }
}

/* ===== partner payments ===== */
.pay-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pay-card { border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; background: #fff; }
.pay-card span { font-family: var(--display); font-weight: 700; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
.pay-card b { display: block; font-family: var(--display); font-weight: 900; font-size: 30px; letter-spacing: -.01em; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.pay-card b i { font-style: normal; font-size: 14px; font-weight: 700; color: var(--gray); }
.pay-card small { font-size: 12px; color: var(--gray); }
.pay-card.is-due { border-color: var(--ink); }
.pay-card.is-due b { color: var(--ink); }
@media (max-width: 820px) { .pay-summary { grid-template-columns: 1fr 1fr; } }

.pay-grid { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 18px; align-items: start; }
.pay-box { border: 1px solid var(--line); border-radius: 20px; background: #fff; padding: 26px 28px; }
.pay-lab { display: block; font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; }
.pay-box .pay-lab:not(:first-child) { margin-top: 20px; }
.net-toggle { display: inline-flex; flex-wrap: wrap; gap: 6px; border: 1px solid var(--line); border-radius: 100px; padding: 4px; }
.net-toggle button { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .03em; padding: 8px 15px; border: none; background: none; border-radius: 100px; cursor: pointer; color: var(--gray); }
.net-toggle button.is-on { background: var(--ink); color: #fff; }
.addr-row { display: flex; align-items: stretch; gap: 8px; }
.addr { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--ink); background: var(--paper-3); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.copy-btn { flex-shrink: 0; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--ink); border: none; border-radius: 10px; padding: 0 16px; cursor: pointer; }
.copy-btn:hover { opacity: .88; }
.pay-warn { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: #7a1f1f; background: #fdf2f2; border: 1px solid #f3d6d6; border-radius: 12px; padding: 12px 14px; }
.pay-warn svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.pay-form { margin-top: 22px; border-top: 1px solid var(--line-soft); padding-top: 20px; }
.pay-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pay-field { margin-bottom: 4px; }
.pay-in { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; font-family: var(--body); font-size: 15px; background: #fff; color: var(--ink); }
.pay-in:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(10,10,10,.05); }
.pay-submit { margin-top: 16px; }
.pay-done { display: none; margin-top: 14px; font-size: 13.5px; color: #1a7f37; }
.pay-done.show { display: block; }
.pay-side { border: 1px solid var(--line); border-radius: 20px; background: #fff; padding: 24px; text-align: center; }
.pay-qr { width: 150px; height: 150px; margin: 4px auto 12px; border-radius: 12px; background:
  repeating-conic-gradient(#0a0a0a 0% 25%, #fff 0% 50%) 0 0 / 20px 20px, #fff;
  border: 6px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.pay-qr-cap { font-size: 12.5px; color: var(--gray); margin-bottom: 18px; }
.pay-qr-cap b { color: var(--ink); font-family: var(--display); }
.pay-steps { text-align: left; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line-soft); padding-top: 18px; }
.pay-step { display: flex; gap: 11px; align-items: flex-start; }
.pay-step span { font-family: var(--display); font-weight: 800; font-size: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pay-step p { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
@media (max-width: 820px) { .pay-grid { grid-template-columns: 1fr; } .pay-row { grid-template-columns: 1fr; } }

.ledger-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ledger-tabs button { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .04em; padding: 8px 15px; border: 1px solid var(--line); border-radius: 100px; background: #fff; color: var(--ink-soft); cursor: pointer; transition: all .16s var(--ease); }
.ledger-tabs button.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.ledger-wrap { border: 1px solid var(--line); border-radius: 16px; overflow-x: auto; }
.ledger { width: 100%; border-collapse: collapse; min-width: 780px; }
.ledger thead th { font-family: var(--display); font-weight: 700; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); text-align: left; padding: 15px 18px; background: var(--paper-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.ledger th.r, .ledger td.r { text-align: right; }
.ledger tbody td { padding: 15px 18px; font-size: 13.5px; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); white-space: nowrap; }
.ledger tbody tr:last-child td { border-bottom: none; }
.ledger tbody tr:hover td { background: rgba(10,10,10,.02); }
.ledger td.l { white-space: normal; color: var(--ink); }
.ledger td.r { font-family: var(--display); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.ledger td.r.pos { color: #1a7f37; }
.ledger td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--gray); }
.ledger .ldl { font-family: var(--display); font-weight: 700; font-size: 12px; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.st { font-family: var(--display); font-weight: 700; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; border-radius: 100px; padding: 4px 10px; white-space: nowrap; }
.st-ok { background: #e9f6ee; color: #1a7f37; }
.st-paid { background: #eef0f0; color: var(--ink); }
.st-due { background: #fdf2e6; color: #9a5a12; }
.st-overdue { background: #fdecec; color: #a11c1c; }
.ledger-note { font-size: 12px; color: var(--gray); margin-top: 12px; line-height: 1.55; }

/* work-with-us — "1%" in moving molecules */
#wwuHero .wrap, #eduHero .wrap { position: relative; }

/* education — slogan cell filling the empty grid slot */
.edu-slogan { background: var(--ink); color: #fff; padding: 34px 30px; display: flex; flex-direction: column; justify-content: center; }
.edu-slogan .es-eye { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 12px; }
.edu-slogan h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(26px, 3vw, 34px); line-height: .98; margin-bottom: 12px; }
.edu-slogan p { color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.55; }
.whu-emblem { position: absolute; top: 50%; right: 1%; transform: translateY(-50%); width: 460px; height: 360px; pointer-events: none; z-index: 0; }
@media (max-width: 1200px) { .whu-emblem { width: 380px; height: 300px; } }
@media (max-width: 1040px) { .whu-emblem { display: none; } }
@media (max-width: 820px) {
  .plgn { align-items: flex-end; }
  .plgn-inner { margin: 0 auto; text-align: center; padding: 0 22px 9vh; }
  .plgn-sub { margin-left: auto; margin-right: auto; }
  .plgn-row { flex-direction: column; }
  .plgn-row .btn { justify-content: center; }
  .plgn-vignette { background: radial-gradient(120% 80% at 50% 38%, rgba(5,5,6,0) 40%, rgba(5,5,6,.6) 100%), linear-gradient(180deg, rgba(5,5,6,0) 42%, rgba(5,5,6,.9) 100%); }
}

/* ---- pen upsell (product pages) ------------------------------------------ */
.pen-upsell { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 16px;
  margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: #fafafa; transition: border-color .25s var(--ease), background .25s var(--ease); }
.pen-upsell:hover { border-color: #d2d2d2; background: #fff; }
.pen-upsell-img { width: 56px; height: 76px; object-fit: contain; display: block; }
.pen-upsell-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pen-upsell-eyebrow { font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gray); }
.pen-upsell-name { font-family: var(--display); font-weight: 900; font-size: 16px; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none; }
.pen-upsell-name:hover { text-decoration: underline; }
.pen-upsell-desc { font-size: 12.5px; line-height: 1.45; color: var(--gray); }
.pen-upsell-act { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.pen-upsell-price { font-family: var(--display); font-weight: 900; font-size: 17px; color: var(--ink); }
.pen-upsell-add { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 9px 18px; border: none; border-radius: 100px; cursor: pointer;
  background: var(--ink-soft); color: #fff; transition: opacity .25s var(--ease); }
.pen-upsell-add:hover { opacity: .82; }
@media (max-width: 560px) {
  .pen-upsell { grid-template-columns: 46px 1fr; gap: 13px; }
  .pen-upsell-img { width: 46px; height: 62px; }
  .pen-upsell-act { grid-column: 1 / -1; flex-direction: row; align-items: center;
    justify-content: space-between; padding-top: 4px; border-top: 1px solid var(--line); }
}

/* ---- band headline sheen -------------------------------------------------
   Dark bands only. A slow light sweep across the headline, the same "light on
   material" language as .vial-shine — monochrome, no colour introduced (§06).
   Falls back to plain white text where background-clip:text is unsupported,
   and stops entirely under prefers-reduced-motion.                          */
.band h2 { position: relative; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .band h2 {
    background-image: linear-gradient(100deg,
      #ffffff 0%, #ffffff 42%,
      rgba(255,255,255,0.62) 50%,
      #ffffff 58%, #ffffff 100%);
    background-size: 260% 100%;
    background-position: 120% 0;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: bandSheen 7.5s ease-in-out infinite;
  }
  .band h2::selection { -webkit-text-fill-color: #0a0a0a; }
}
@keyframes bandSheen {
  0%   { background-position: 120% 0; }
  55%  { background-position: -40% 0; }
  100% { background-position: -40% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .band h2 { animation: none; background-image: none; color: #fff; -webkit-text-fill-color: #fff; }
}

/* ---- shipping choice: now selectable, persists to the cart ---------------- */
.ship-choice { cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.ship-choice:hover { border-color: #c9c9c9; }
.ship-choice:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ship-choice.is-on { border-color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
.ship-choice.is-on .sc-ico { color: var(--ink); }
.ship-choice.is-on > div > b::after {
  content: '✓'; margin-left: 8px; font-size: 12px; vertical-align: middle;
}
.cd-sub-ship { font-size: 13.5px; color: var(--gray); }
.cd-sub-ship b { font-weight: 600; color: var(--ink); }

/* ---- Research Overview card ----------------------------------------------
   §08: structure from rules, not shadows — so the resting state is a hairline
   card on the alternate ground, and the hover does the work: the rule draws
   itself down the left edge and the card lifts a hair. Monochrome throughout. */
.ro-card {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: 20px; padding: 34px 34px 30px 38px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.ro-card .ro-rule {
  position: absolute; left: 0; top: 22px; bottom: 22px; width: 2px;
  background: var(--ink); border-radius: 2px;
  transform: scaleY(0); transform-origin: top;
  transition: transform .45s var(--ease);
}
.ro-card:hover { transform: translateY(-3px); border-color: #d8d8d8; box-shadow: 0 26px 60px -34px rgba(0,0,0,0.32); }
.ro-card:hover .ro-rule { transform: scaleY(1); }
.ro-card .eyebrow { margin-bottom: 14px; }
.ro-card .lead-p { font-size: 17.5px; line-height: 1.62; }
.ro-card .mech-callout { margin-top: 26px; }
@media (max-width: 720px) { .ro-card { padding: 26px 22px 24px 26px; border-radius: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .ro-card, .ro-card .ro-rule { transition: none; }
  .ro-card .ro-rule { transform: scaleY(1); }
}

/* ---- footer refined · brand bible §07 type, §08 rhythm --------------------
   Column heads now match the defined eyebrow (League Spartan 900, 12px, +0.26em,
   grey) instead of a one-off 700/0.18em. Links get real line-height and a
   left-edge rule on hover rather than a colour-only change, so structure comes
   from rules, not decoration (§08).                                          */
.site-footer { padding: 92px 0 44px; }
.foot-col h4 {
  font-family: var(--display); font-weight: 900; font-size: 12px;
  letter-spacing: 0.26em; text-transform: uppercase; color: #8a8a8a;
  margin-bottom: 22px;
}
.foot-col a {
  position: relative; display: block; color: #cfcfcf;
  font-family: var(--body); font-size: 14.5px; line-height: 1.5;
  padding: 7px 0 7px 0; letter-spacing: 0;
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.foot-col a::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 1px;
  background: #fff; transform: translateY(-50%);
  transition: width .22s var(--ease);
}
.foot-col a:hover { color: #fff; padding-left: 16px; }
.foot-col a:hover::before { width: 10px; }
.foot-brand p { color: #9a9a9a; font-size: 14.5px; line-height: 1.6; }
.foot-brand-slogan { letter-spacing: -0.02em; }
.foot-bottom { margin-top: 72px; }
.foot-bottom p, .foot-legal a { font-size: 13px; }
.foot-legal a { color: #8a8a8a; transition: color .2s var(--ease); }
.foot-legal a:hover { color: #fff; }
@media (max-width: 860px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .foot-brand { grid-column: 1 / -1; }
}

/* ---- sticky buy bar: full-width CTA on mobile --------------------------
   The name/price and the button were competing for one row and the CTA was
   getting clipped on a phone. Stack them and let the button own its line.  */
@media (max-width: 640px) {
  .buybar-inner { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 0 14px; }
  .buybar-info { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; }
  .buybar-name { font-size: 14px; }
  .buybar-add { width: 100%; justify-content: center; text-align: center; padding: 15px 24px; }
}
.buybar-add { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* ===================================================================
   Email capture — first-order voucher
   Injected by main.js so it exists on every page without touching 55
   HTML files. Mobile-first: full-width sheet on phones, centred card on
   desktop. Never shown on the cart or checkout, where it would interrupt
   someone already buying.
   =================================================================== */
.ec-scrim {
  position: fixed; inset: 0; z-index: 400; background: rgba(10,10,10,.62);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ec-scrim.open { opacity: 1; pointer-events: auto; }
.ec-card {
  position: relative; width: 100%; max-width: 460px; background: var(--ink);
  color: #fff; padding: 44px 36px 36px; border-radius: 4px;
  transform: translateY(18px) scale(.985); transition: transform .38s var(--ease);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9);
}
.ec-scrim.open .ec-card { transform: none; }
.ec-close {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px;
  background: none; border: 0; color: #8c8c8c; font-size: 26px; line-height: 1;
  cursor: pointer; border-radius: 50%; transition: color .2s var(--ease);
}
.ec-close:hover { color: #fff; }
/* Monochrome on purpose. There is no --accent token: Brand Pack §06 keeps the
   digital UI colourless and lets the product photography carry category colour. */
.ec-eyebrow {
  font-family: var(--display); font-weight: 800; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: #8f8f8f; margin: 0 0 14px;
}
.ec-card h2 {
  font-family: var(--display); font-weight: 900; font-size: clamp(30px, 8vw, 40px);
  line-height: .98; letter-spacing: -.02em; margin: 0 0 14px; color: #fff;
}
.ec-card h2 em { font-style: normal; display: block; }
.ec-sub { font-size: 14.5px; line-height: 1.55; color: #b5b5b5; margin: 0 0 24px; }
.ec-form { display: flex; flex-direction: column; gap: 10px; }
.ec-form input[type="email"] {
  width: 100%; padding: 15px 16px; font: inherit; font-size: 16px; /* 16px stops iOS zooming on focus */
  color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  border-radius: 3px; transition: border-color .2s var(--ease);
}
.ec-form input[type="email"]::placeholder { color: #7d7d7d; }
.ec-form input[type="email"]:focus { outline: none; border-color: #fff; }
.ec-form button {
  width: 100%; padding: 16px; font-family: var(--display); font-weight: 800;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: #fff; border: 0; border-radius: 3px; cursor: pointer;
  transition: background .2s var(--ease);
}
.ec-form button:hover { background: #e2e2e2; }
.ec-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ec-fine { font-size: 11.5px; line-height: 1.5; color: #767676; margin: 16px 0 0; }
.ec-fine a { color: #a5a5a5; text-decoration: underline; }
.ec-err { font-size: 12.5px; color: #ff8a7a; margin: 8px 0 0; }
.ec-code {
  display: block; font-family: var(--display); font-weight: 900; font-size: 30px;
  letter-spacing: .1em; color: #fff; background: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.28); border-radius: 3px;
  padding: 16px; text-align: center; margin: 4px 0 18px;
}
@media (max-width: 560px) {
  .ec-scrim { align-items: flex-end; padding: 0; }
  .ec-card { max-width: none; border-radius: 14px 14px 0 0; padding: 38px 22px 28px; }
  .ec-scrim.open .ec-card { transform: none; }
  .ec-scrim .ec-card { transform: translateY(100%); }
}

/* ===================================================================
   ONE% Pen — the full product-page feature section.
   The compact .pen-upsell row still exists in the buy-box for people who
   already know what it is; this is the section that has to sell it to
   someone who does not. Copy is kept in step with product-pen.html.
   =================================================================== */
.pen-feature-sec { padding-top: 0; }
.pen-feature {
  display: grid; grid-template-columns: 340px 1fr; gap: 0;
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--paper);
}
.pen-feature-media {
  position: relative; background: var(--paper-2);
  display: flex; align-items: center; justify-content: center;
  padding: 30px 26px; border-right: 1px solid var(--line); min-height: 380px;
}
.pen-feature-media img { width: 100%; max-width: 260px; height: auto; object-fit: contain; }
.pen-feature-tag {
  position: absolute; top: 20px; left: 20px;
  font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gray);
  background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 7px 14px;
}
.pen-feature-body { padding: 46px 48px; display: flex; flex-direction: column; justify-content: center; }
.pen-feature-body h2 {
  font-family: var(--display); font-weight: 900; font-size: clamp(30px, 4vw, 42px);
  letter-spacing: -.02em; line-height: .98; margin: 10px 0 16px;
}
.pen-feature-lead { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 22px; max-width: 52ch; }
.pen-feature-specs {
  list-style: none; padding: 0; margin: 0 0 26px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px;
}
.pen-feature-specs li {
  font-size: 13.5px; line-height: 1.45; color: var(--ink-soft);
  padding-left: 20px; position: relative;
}
.pen-feature-specs li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
}
.pen-feature-buy { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pen-feature-price { font-family: var(--display); font-weight: 900; font-size: 30px; letter-spacing: -.02em; }
.pen-feature-price em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--gray); display: block; letter-spacing: .04em; }
.pen-feature-buy .btn { padding: 15px 30px; }
.pen-feature-link { font-size: 13px; color: var(--gray); text-decoration: underline; text-underline-offset: 3px; }
.pen-feature-link:hover { color: var(--ink); }

@media (max-width: 860px) {
  .pen-feature { grid-template-columns: 1fr; }
  /* extra top padding so the absolutely-positioned tag clears the pen, which
     is centred and nearly meets it once the column goes full width */
  .pen-feature-media { border-right: 0; border-bottom: 1px solid var(--line); padding: 62px 24px 20px; min-height: 0; }
  .pen-feature-media img { max-width: 168px; }
  .pen-feature-body { padding: 30px 22px 32px; }
  .pen-feature-specs { grid-template-columns: 1fr; gap: 10px; }
  .pen-feature-buy { gap: 14px; }
  .pen-feature-buy .btn { flex: 1 1 100%; justify-content: center; }
}

/* -------------------------------------------------------------------
   Pen reminder — shown in the drawer, the cart page and the checkout
   summary, but ONLY when the pen is not already in the basket. One
   component, three sizes, so the ask reads the same everywhere.
   ------------------------------------------------------------------- */
.pen-nudge {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 13px;
  border: 1px dashed var(--line); border-radius: 12px; background: var(--paper-2);
  padding: 13px 14px; margin: 16px 0 0;
}
.pen-nudge img { width: 44px; height: 60px; object-fit: contain; display: block; }
.pen-nudge-txt { min-width: 0; }
.pen-nudge-txt b {
  display: block; font-family: var(--display); font-weight: 900; font-size: 14px;
  letter-spacing: -.01em; color: var(--ink);
}
.pen-nudge-txt span { display: block; font-size: 12px; line-height: 1.4; color: var(--gray); margin-top: 2px; }
.pen-nudge-add {
  font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; background: var(--ink-soft);
  border: 0; border-radius: 100px; padding: 10px 16px; cursor: pointer; white-space: nowrap;
  transition: opacity .18s var(--ease);
}
.pen-nudge-add:hover { opacity: .82; }
.pen-nudge-price { font-family: var(--display); font-weight: 900; font-size: 13px; color: var(--gray); display: block; text-align: center; margin-top: 5px; }
@media (max-width: 420px) {
  .pen-nudge { grid-template-columns: 38px 1fr; row-gap: 11px; }
  .pen-nudge img { width: 38px; height: 52px; }
  .pen-nudge-act { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
  .pen-nudge-act .pen-nudge-add { flex: 1; }
  .pen-nudge-price { margin-top: 0; }
}

/* The checkout summary column is ~230px wide regardless of viewport, so the
   three-column nudge crams there even on a large screen. Scoped to the summary
   rather than handled with a media query, because the constraint is the
   container's width, not the device's. */
#checkout-summary .pen-nudge { grid-template-columns: 38px 1fr; row-gap: 10px; padding: 12px; }
#checkout-summary .pen-nudge img { width: 38px; height: 52px; }
#checkout-summary .pen-nudge-act { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
#checkout-summary .pen-nudge-act .pen-nudge-add { flex: 1; }
#checkout-summary .pen-nudge-price { margin-top: 0; }
/* new-logo brand marks (footer) */
.foot-brand .brand-logo { height: 40px; width: 136px; }
@media (max-width: 760px){ .foot-brand .brand-logo { height: 32px; width: 109px; } }


/* ===== Redesign 2026-08: human bands, cinematic feature bands, material grounds ===== */
.imgband{position:relative;min-height:520px;display:flex;align-items:center;overflow:hidden;background:#000}
.imgband>picture,.imgband>img{position:absolute;inset:0;z-index:0}
.imgband img{width:100%;height:100%;object-fit:cover;display:block}
.imgband .ibscrim{position:absolute;inset:0;z-index:1}
.imgband.left .ibscrim{background:linear-gradient(90deg,rgba(8,8,9,.96) 0%,rgba(8,8,9,.7) 40%,rgba(8,8,9,.2) 70%,rgba(8,8,9,0) 100%)}
.imgband.right .ibscrim{background:linear-gradient(270deg,rgba(8,8,9,.96) 0%,rgba(8,8,9,.7) 40%,rgba(8,8,9,.2) 70%,rgba(8,8,9,0) 100%)}
.imgband .wrap{position:relative;z-index:2;width:100%}
.imgband .ib{max-width:540px;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.imgband.right .ib{margin-left:auto}
.imgband .ib .eyebrow{color:#c9ccd1}
.imgband .ib h2{font-family:"League Spartan",sans-serif;font-weight:800;text-transform:uppercase;line-height:.9;font-size:clamp(38px,6vw,74px);margin:12px 0 0;color:#fff}
.imgband .ib p{color:#dfe1e5;margin-top:16px;font-size:16px;max-width:44ch}
.imgband.mani{min-height:600px}
.imgband.mani .ib h2{font-size:clamp(32px,4.8vw,66px);max-width:15ch}
.imgband.credo img{object-position:center center}
.imgband .sig{font-family:"League Spartan",sans-serif;font-weight:800;text-transform:uppercase;color:#fff;opacity:.85;margin-top:20px;font-size:15px;letter-spacing:.03em}
@media(max-width:768px){.imgband{min-height:0;display:block}.imgband img{position:relative;height:64vh;max-height:520px}.imgband .ibscrim{background:linear-gradient(0deg,rgba(8,8,9,.96),rgba(8,8,9,0) 58%)}.imgband .wrap{position:absolute;bottom:0;left:0;right:0;padding-bottom:28px}.imgband .ib{max-width:none}}
.cineband{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.cineband .cim{background:#000;min-height:440px}
.cineband .cim img{width:100%;height:100%;object-fit:cover;display:block}
.cineband .ctx{padding:52px 46px;display:flex;flex-direction:column;justify-content:center;background:#101012}
.cineband h2{font-family:"League Spartan",sans-serif;font-weight:800;text-transform:uppercase;line-height:.9;font-size:clamp(30px,4.2vw,50px);color:#fff;margin:8px 0 0}
.cineband p{color:#c9ccd1;margin-top:14px}
.cineband .cine-actions{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.cineband .cine-actions .btn{border:1px solid rgba(255,255,255,.32);color:#fff;background:transparent}
.cineband .cine-actions .btn:hover{background:#fff;color:#0a0a0a;border-color:#fff}
/* Pen kit "in the box" split */
.kit-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.kit-media{background:var(--paper-2);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.kit-media img{width:100%;height:100%;object-fit:cover;display:block}
.kit-body h2{font-family:"League Spartan",sans-serif;font-weight:800;text-transform:uppercase;line-height:.92;font-size:clamp(30px,4vw,48px);margin:6px 0 14px}
.kit-body>p{color:var(--gray);font-size:16px;max-width:440px}
.kit-list{list-style:none;margin:26px 0 30px;padding:0;display:grid;gap:0}
.kit-list li{display:flex;flex-direction:column;padding:15px 0;border-top:1px solid var(--line)}
.kit-list li:last-child{border-bottom:1px solid var(--line)}
.kit-list li b{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:13.5px;letter-spacing:.03em}
.kit-list li span{color:var(--gray);font-size:13.5px;margin-top:3px}
@media(max-width:820px){.kit-split{grid-template-columns:1fr;gap:28px}}
/* Bold standalone education band (product pages) */
.edu-band{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;background:var(--ink);color:#fff;border-radius:22px;padding:44px 48px;position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.edu-band:hover{transform:translateY(-3px);box-shadow:0 34px 74px -34px rgba(0,0,0,.62)}
.edu-band::after{content:"";position:absolute;top:0;right:0;width:340px;height:100%;background:radial-gradient(120% 120% at 100% 0,rgba(18,181,142,.24),transparent 62%);pointer-events:none}
.edu-icon{width:88px;height:88px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;color:var(--accent-bright);flex-shrink:0;position:relative;z-index:1}
.edu-icon svg{width:42px;height:42px}
.edu-band-body{position:relative;z-index:1}
.edu-kicker{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--accent-bright);display:flex;align-items:center;gap:9px;margin:0 0 12px}
.edu-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-bright);box-shadow:0 0 0 4px rgba(18,181,142,.18)}
.edu-band h3{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1.02;font-size:clamp(23px,3vw,37px);color:#fff;margin:0 0 12px}
.edu-band-body>p{color:#b7b9bd;font-size:15.5px;line-height:1.55;max-width:660px;margin:0 0 22px}
.edu-cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.09em;font-size:13px;color:#0a0a0a;background:var(--accent-bright);padding:13px 24px;border-radius:999px;transition:gap .25s var(--ease),background .25s var(--ease)}
.edu-cta .arw{transition:transform .25s var(--ease)}
.edu-band:hover .edu-cta{background:#fff}
.edu-band:hover .edu-cta .arw{transform:translateX(5px)}
@media(max-width:720px){.edu-band{grid-template-columns:1fr;gap:20px;padding:32px 26px}.edu-icon{width:64px;height:64px}.edu-icon svg{width:32px;height:32px}}
@media(max-width:768px){.cineband{grid-template-columns:1fr}.cineband .cim{min-height:320px}.cineband .ctx{padding:34px 26px}}
.post-photo{aspect-ratio:1/1;overflow:hidden}
.post-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);display:block}
.coa-seal{width:118px;height:118px}
@media(max-width:768px){.coa-seal{width:88px;height:88px;left:14px;bottom:14px}}

.band.has-photo{position:relative;overflow:hidden}
.band.has-photo .band-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.32;z-index:0}
.band.has-photo .band-photo-scrim{position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(8,8,9,.9),rgba(8,8,9,.58) 52%,rgba(8,8,9,.86))}
/* Lab-studio band: dark left for the white headline, glassware readable on the right */
.band.has-photo.band-lab .band-photo{opacity:1;object-position:right center}
.band.has-photo.band-lab .band-photo-scrim{background:linear-gradient(90deg,rgba(8,9,10,.95) 0%,rgba(8,9,10,.82) 34%,rgba(8,9,10,.34) 66%,rgba(8,9,10,.5) 100%)}
@media(max-width:820px){
  .band.has-photo.band-lab .band-photo{object-position:right center;opacity:.6}
  .band.has-photo.band-lab .band-photo-scrim{background:linear-gradient(180deg,rgba(8,9,10,.92) 0%,rgba(8,9,10,.8) 55%,rgba(8,9,10,.7) 100%)}
}
/* Training hero band: dark left for the headline, let the athlete breathe on the right */
.band.has-photo.band-train .band-photo{opacity:.9;object-position:right top}
.band.has-photo.band-train .band-photo-scrim{background:linear-gradient(90deg,rgba(8,8,9,.96) 0%,rgba(8,8,9,.9) 34%,rgba(8,8,9,.4) 60%,rgba(8,8,9,.28) 100%)}
@media (max-width:820px){
  .band.has-photo.band-train .band-photo{object-position:right center;opacity:.6}
  .band.has-photo.band-train .band-photo-scrim{background:linear-gradient(180deg,rgba(8,8,9,.92) 0%,rgba(8,8,9,.8) 55%,rgba(8,8,9,.7) 100%)}
}
.band.has-photo>.wrap{position:relative;z-index:1}

/* ---- Verification / proof section ---- */
.proof-sec .proof-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;margin-top:40px}
.coa-card{position:relative;background:#0c0c0d;border:1px solid #1e1e20;border-radius:20px;padding:28px 28px 24px;color:#fff;box-shadow:0 34px 80px -46px rgba(0,0,0,.7)}
.coa-card .coa-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:11px;color:#c9ccd1}
.coa-card .coa-batch{color:#7f8790;font-size:9.5px;border:1px solid #26262a;border-radius:100px;padding:4px 10px;letter-spacing:.1em}
.hplc{width:100%;height:auto;margin:16px 0 6px;display:block}
.coa-rows{border-top:1px solid #1e1e20;margin-top:6px}
.coa-rows .cr{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid #161618;font-size:13.5px}
.coa-rows .cr .m{color:#aeb3ba}
.coa-rows .cr .r{font-family:var(--display);font-weight:700;color:#fff;display:inline-flex;align-items:center;gap:8px}
.coa-rows .cr .r .tick{color:#19c79b;font-weight:800}
.coa-foot{margin-top:14px;font-size:11px;color:#7f8790;letter-spacing:.03em;line-height:1.5}
.coa-card .coa-seal{position:absolute;top:16px;right:16px}
.proof-side .proof-list{list-style:none;margin:18px 0 24px}
.proof-side .proof-list li{position:relative;padding:11px 0 11px 30px;border-bottom:1px solid var(--line-soft);font-size:15px;color:var(--ink-soft)}
.proof-side .proof-list li::before{content:'';position:absolute;left:2px;top:15px;width:15px;height:15px;border-radius:50%;background:#19c79b}
.proof-side .proof-list li::after{content:'';position:absolute;left:6.5px;top:19px;width:4px;height:7px;border-right:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(45deg)}
.proof-badges{margin-top:36px;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;align-items:center;border-top:1px solid var(--line);padding-top:26px}
.proof-badges span{font-family:var(--display);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:11px;color:var(--gray)}
.proof-badges .dot{color:var(--line)}
@media(max-width:820px){.proof-sec .proof-grid{grid-template-columns:1fr;gap:30px}.coa-card .coa-seal{width:64px;height:64px;top:12px;right:12px}}

/* ---- Retire all molecule / atom / constellation vector art sitewide ---- */
.band-web,.hero-deco,.art-hero-sym,.post-sym,.whu-emblem,.jsym{display:none!important}
.art-hero-inner{grid-template-columns:1fr!important}
.has-hero-deco>.wrap{max-width:none}

/* ---- Mobile: downsize hero/band imagery to friendlier banners ---- */
@media(max-width:768px){
  .hero-full.has-photo .hero-photo{height:38vh;max-height:300px}
  .pd-hero.cat-hero .cat-hero-photo img{height:180px;object-fit:cover;object-position:center 42%}
  .imgband img{height:44vh!important;max-height:340px!important}
  .imgband.mani img{height:50vh!important;max-height:400px!important}
  .imgband .ib h2{font-size:clamp(28px,8.5vw,40px)}
  .imgband.mani .ib h2{font-size:clamp(26px,8vw,38px)}
  .cineband{gap:18px}
  .coa-card{padding:22px 20px 20px}
  .proof-badges{gap:6px 12px}
  .proof-badges span{font-size:10px}
}

/* ---- Mobile: newsletter popup as a friendly bottom-sheet, not a takeover ---- */
@media(max-width:768px){
  .ec-scrim{align-items:flex-end;padding:0}
  .ec-card{max-width:none;width:100%;border-radius:18px 18px 0 0;padding:26px 22px 24px;transform:translateY(100%) scale(1)}
  .ec-scrim.open .ec-card{transform:none}
  .ec-card h2{font-size:25px}
  .ec-sub{font-size:13px;margin-bottom:16px}
  .ec-fine{font-size:10.5px;margin-top:12px}
  .ec-close{top:10px;right:10px;width:36px;height:36px}
}

/* ---- Seal sits below the card header (no overlap) ---- */
.coa-card .coa-seal{top:52px;bottom:auto;right:16px;width:72px;height:72px}
@media(max-width:820px){.coa-card .coa-seal{bottom:auto;top:14px;right:12px;width:60px;height:60px}}

/* ---- Green accent threaded through details (the verified signal) ---- */
:root{--accent:#12b58e;--accent-bright:#19c79b}
.arw{color:var(--accent)}
.btn-solid .arw,.btn.btn-solid .arw{color:inherit}
.cat-go{color:var(--accent)}
.vialbox .coa::before,.duo-item .coa::before{background:var(--accent)}
.foot-trust svg{stroke:var(--accent)}
.faq-q .plus{color:var(--accent)}
.pd-lead a:not(.btn),.about-body a:not(.btn){color:var(--accent)}
.enquiry-copy .eyebrow{color:#aeb3ba}
.enquiry-mail{color:var(--accent)!important}
.enquiry-form .btn-solid{background:var(--accent);color:#fff;box-shadow:0 10px 26px -14px rgba(18,181,142,.7)}
.enquiry-form .btn-solid:hover{background:var(--accent-bright);color:#fff}
.enquiry-band{background:#0c0c0d}

/* ---- Fix enquiry text on solid dark bg + brighter, larger hero sub-text everywhere ---- */
.enquiry-copy h2{color:#fff}
.enquiry-copy p{color:#c7ccd2}
.enquiry-copy .eyebrow{color:#aeb3ba}
.pd-hero.cat-hero .pd-lead{font-size:19px;line-height:1.6;color:#e4e8ec;max-width:600px;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.pd-hero.cat-hero .eyebrow{color:#c2cad2}
.imgband .ib p{font-size:17px;line-height:1.6;color:#e8eaed}
.imgband .ib .eyebrow{color:#cfd3d8}
@media(max-width:768px){.pd-hero.cat-hero .pd-lead{font-size:16.5px}}

/* ---- Accessories catalogue + kit upsell ---- */
.acc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:36px}
.acc-card{background:var(--paper);display:flex;flex-direction:column;transition:background .3s var(--ease)}
.acc-card:hover{background:var(--paper-2)}
.acc-media{aspect-ratio:1/1;background:#f0f0f0;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.acc-media img{width:100%;height:100%;object-fit:contain;padding:14px;mix-blend-mode:multiply}
.acc-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:3px;flex:1}
.acc-name{font-family:var(--display);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:-.01em}
.acc-sub{font-size:12px;color:var(--gray)}
.acc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px}
.acc-price{font-family:var(--display);font-weight:800;font-size:17px}
.acc-add{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--ink);border:0;border-radius:100px;padding:8px 16px;cursor:pointer;transition:background .2s var(--ease)}
.acc-add:hover{background:var(--accent)}
@media(max-width:900px){.acc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.acc-grid{grid-template-columns:repeat(2,1fr)}.acc-name{font-size:13.5px}}

/* ---- Light hero variant (real vials on a light studio ground, dark text) ---- */
.pd-hero.cat-hero.light .cat-scrim{background:linear-gradient(90deg,rgba(244,245,247,.92) 0%,rgba(244,245,247,.55) 34%,rgba(244,245,247,0) 60%)}
.pd-hero.cat-hero.light .eyebrow{color:#6a7078}
.pd-hero.cat-hero.light .pd-title{color:#0a0a0a}
.pd-hero.cat-hero.light .pd-lead{color:#40454b;text-shadow:none}
@media(max-width:768px){.pd-hero.cat-hero.light > .wrap{background:#f2f3f5}.pd-hero.cat-hero.light .pd-title{color:#0a0a0a}.pd-hero.cat-hero.light .pd-lead{color:#40454b}}

.pd-hero.cat-hero.light .pd-lead{max-width:420px}
@media(max-width:768px){.pd-hero.cat-hero.light .pd-lead{max-width:none}}

/* ---- Janoshik "independently tested by" trust badge ---- */
.jano-badge{display:inline-flex;align-items:center;gap:12px;padding:9px 18px 9px 10px;border:1px solid var(--line);border-radius:100px;background:var(--paper);text-decoration:none;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);width:max-content}
.jano-badge:hover{border-color:var(--accent);box-shadow:0 10px 24px -14px rgba(18,181,142,.55)}
.jano-check{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;flex:none}
.jano-check svg{width:16px;height:16px}
.jano-txt{display:flex;flex-direction:column;line-height:1.12}
.jano-top{font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray)}
.jano-name{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--ink)}
.jano-badge.on-dark{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
.jano-badge.on-dark:hover{border-color:var(--accent-bright)}
.jano-badge.on-dark .jano-name{color:#fff}
.jano-badge.on-dark .jano-top{color:#aeb3ba}

/* ---- Footer trust bar (full-width, horizontal) ---- */
.foot-trustbar{display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center;padding:26px 0 8px;margin-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.foot-trustbar span{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:#c7ccd2;font-weight:500}
.foot-trustbar svg{width:17px;height:17px;stroke:var(--accent);flex:none}
.site-footer .foot-brand .jano-badge{margin-top:22px}
@media(max-width:640px){.foot-trustbar{gap:12px 20px}.foot-trustbar span{font-size:12px}}

/* ================= Unified accent system (green = interactive + verified detail; buttons stay one ink system) ================= */
/* Buttons: revert the one-off green enquiry button + accessory hover to the standard ink system so ALL buttons behave the same */
.enquiry-form .btn-solid{background:var(--ink-soft);color:var(--paper);box-shadow:0 8px 22px -12px rgba(0,0,0,.5)}
.enquiry-form .btn-solid:hover{background:var(--paper);color:var(--ink)}
.acc-add:hover{background:var(--ink-soft)}
/* Text-link hovers -> green (consistent across nav, breadcrumb, footer, body, cart nav) */
.nav-links a:hover,.breadcrumb a:hover,.foot-col a:hover,.cart-continue:hover,.cd-viewcart:hover,
.pd-cols a:not(.btn):hover,.about-body a:not(.btn):hover,.pd-lead a:not(.btn):hover,.disclaimer a:hover{color:var(--accent)}
/* Active nav state -> green (was ink) */
.nav-links a.active{color:var(--accent)}
.nav-links a.active::after{background:var(--accent)}
/* Form focus -> consistent green ring across every form */
.ef-field input:focus,.ef-field textarea:focus,.checkout-form input:focus,.checkout-form select:focus,
.store-search input:focus,.store-sort select:focus,.verify-form input:focus,.wf-in:focus,.news-row input:focus{border-color:var(--accent)}
.verify-form input:focus,.store-search input:focus,.wf-in:focus{box-shadow:0 0 0 4px rgba(18,181,142,.10)}

/* Unify ALL trust / verified icons to green (match the footer) — content/explainer icons stay neutral */
.trust-mini .trust-ico,.checkout-trust span svg,.trust-bar .trust-ico,.secure-badges .trust-ico{stroke:var(--accent)}

/* ---- Featured products: horizontal scroll carousel ---- */
.card-carousel{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 20px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#d0d0d0 transparent}
.card-carousel .pcard{flex:0 0 300px;scroll-snap-align:start}
.card-carousel::-webkit-scrollbar{height:6px}
.card-carousel::-webkit-scrollbar-thumb{background:#d0d0d0;border-radius:100px}
.card-carousel::-webkit-scrollbar-thumb:hover{background:var(--accent)}
.card-carousel::-webkit-scrollbar-track{background:transparent}
@media(max-width:640px){.card-carousel{gap:14px}.card-carousel .pcard{flex:0 0 80vw}}

/* ---- Quick-add on product cards (stretched link + add button) ---- */
.pcard{position:relative}
.pcard-stretch{position:absolute;inset:0;z-index:1;border-radius:inherit}
.pcard .vialbox,.pcard .pcard-body{position:relative;z-index:0}
.pcard-foot{position:relative;z-index:2}
.pcard-add{position:relative;z-index:2;font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:#fff;background:var(--ink);border:0;border-radius:100px;padding:9px 18px;cursor:pointer;transition:background .2s var(--ease),transform .15s var(--ease)}
.pcard-add:hover{background:var(--accent)}
.pcard-add:active{transform:scale(.96)}
.acc-add:hover{background:var(--accent)}

/* ---- Cart free-shipping progress nudge ---- */
.cd-freeship{display:flex;flex-direction:column;gap:8px;padding:11px 14px;margin:0 0 14px;background:rgba(18,181,142,.08);border:1px solid rgba(18,181,142,.28);border-radius:12px}
.cd-freeship.done{background:rgba(18,181,142,.13)}
.cd-fs-txt{font-size:12.5px;color:var(--ink-soft);font-weight:500}
.cd-fs-txt b{color:var(--ink);font-weight:700}
.cd-fs-check{color:var(--accent);font-weight:800}
.cd-fs-bar{display:block;height:5px;background:rgba(0,0,0,.09);border-radius:100px;overflow:hidden}
.cd-fs-bar>span{display:block;height:100%;background:var(--accent);border-radius:100px;transition:width .4s var(--ease)}

/* ================= Conversion components ================= */
/* Announcement bar */
.announce-bar{background:#0a0a0b;color:#e8eaed;font-size:12.5px;border-bottom:1px solid rgba(255,255,255,.08)}
.announce-in{max-width:1240px;margin:0 auto;padding:8px 24px;display:flex;align-items:center;justify-content:center;gap:14px;position:relative}
.announce-track{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px;font-family:var(--display);font-weight:600;letter-spacing:.02em}
.announce-track b{color:var(--accent-bright);font-weight:800}
.announce-track i{color:#4a4a4e;font-style:normal}
.announce-x{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:0;color:#7a7a7e;font-size:20px;line-height:1;cursor:pointer;padding:2px 6px}
.announce-x:hover{color:#fff}
@media(max-width:640px){.announce-track span:nth-child(n+5),.announce-track i:nth-child(n+5){display:none}.announce-in{padding:8px 34px 8px 16px}}

/* Scarcity + guarantee near the buy button */
.pd-scarcity{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#b06a1e;margin:0 0 14px}
.pd-scarcity b{color:#8a4e12}
.pd-stock-dot{width:8px;height:8px;border-radius:50%;background:#d9822b;box-shadow:0 0 0 4px rgba(217,130,43,.16);animation:limPulse 2s ease-in-out infinite}
.buy-guarantee{display:flex;flex-wrap:wrap;gap:8px 18px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.buy-guarantee span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-soft);font-weight:500}
.buy-guarantee svg{width:15px;height:15px;stroke:var(--accent);flex:none}

/* Frequently bought together */
.fbt-sec{background:var(--paper-2);border-top:1px solid var(--line)}
.fbt-head{max-width:640px;margin-bottom:30px}
.fbt-row{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.fbt-item{flex:1 1 160px;max-width:220px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 14px;display:flex;flex-direction:column;align-items:center;gap:4px}
.fbt-thumb{width:100%;aspect-ratio:1/1;background:#ffffff;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.fbt-thumb img{width:100%;height:100%;object-fit:contain;padding:12px}
.fbt-name{font-family:var(--display);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.02em}
.fbt-price{font-size:13px;color:var(--gray)}
.fbt-plus{align-self:center;font-family:var(--display);font-weight:700;font-size:22px;color:var(--gray)}
.fbt-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.fbt-total{font-family:var(--display);font-size:17px}.fbt-total b{font-weight:800;font-size:20px}
.fbt-hidden{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
@media(max-width:620px){.fbt-plus{display:none}.fbt-item{flex:1 1 100%;max-width:none;flex-direction:row;text-align:left;gap:14px}.fbt-thumb{width:64px;height:64px;margin-bottom:0}}

/* Sticky mobile buy bar */
.sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-top:1px solid var(--line);box-shadow:0 -10px 30px -20px rgba(0,0,0,.4);transform:translateY(110%);transition:transform .3s var(--ease)}
.sticky-buy.show{transform:none}
.sb-info{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.sb-name{font-family:var(--display);font-weight:800;font-size:14px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-price{font-size:13px;color:var(--gray)}
.sb-add{flex:none;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--ink);border:0;border-radius:100px;padding:13px 26px;cursor:pointer}
.sb-add:active{transform:scale(.97)}
@media(max-width:768px){.sticky-buy{display:flex}}

/* Why researchers choose us (social proof / credibility) */
.whyus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.whyus-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 26px}
.whyus-ico{width:44px;height:44px;border-radius:12px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.whyus-ico svg{width:22px;height:22px}
.whyus-card h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:17px;letter-spacing:-.01em;margin-bottom:10px}
.whyus-card p{font-size:14px;color:var(--gray);line-height:1.6}
.whyus-cred{display:flex;flex-wrap:wrap;align-items:center;gap:16px 34px;margin-top:36px;padding-top:30px;border-top:1px solid var(--line)}
.whyus-cred span{font-size:13px;color:var(--ink-soft)}
.whyus-cred b{font-family:var(--display);font-weight:800;font-size:20px;margin-right:6px;color:var(--ink)}
.whyus-cred .jano-badge{margin-left:auto}
@media(max-width:820px){.whyus-grid{grid-template-columns:1fr}.whyus-cred .jano-badge{margin-left:0}}

/* accessories grid flows for the extra kit card */
.acc-grid{grid-template-columns:repeat(auto-fill,minmax(184px,1fr))!important}
.acc-kit{outline:1.5px solid var(--accent);outline-offset:-1px}

/* How-peptides: 3-step mechanism */
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-top:8px}
.how-step{background:#fff;padding:36px 32px 34px;position:relative}
.how-num{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.14em;color:var(--accent)}
.how-step h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:22px;letter-spacing:-.01em;margin:14px 0 12px}
.how-step p{font-size:15px;color:var(--gray);line-height:1.65}
@media(max-width:820px){.how-steps{grid-template-columns:1fr}}

/* Light CTA band variant (shows real vials clean, dark text) */
.band.has-photo.light{background:#eceef0;color:var(--ink)}
.band.has-photo.light .band-photo{opacity:1}
.band.has-photo.light .band-photo-scrim{background:linear-gradient(90deg,rgba(236,238,240,.97) 0%,rgba(236,238,240,.62) 36%,rgba(236,238,240,0) 64%)}
.band.has-photo.light h2{color:var(--ink)}
.band.has-photo.light .eyebrow{color:#6a7078!important}
.band.has-photo.light p{color:var(--ink-soft)}
.band.has-photo.light .btn-ghost{border-color:var(--ink);color:var(--ink)}
.band.has-photo.light .btn-ghost:hover{background:var(--ink);color:#fff}
.band.has-photo.light .btn-solid{background:var(--ink);color:#fff}
/* Range CTA: keep copy in a clean left column, vials only clear on the far right */
.band.has-photo.light.band-range .band-photo{object-position:right center}
.band.has-photo.light.band-range .band-photo-scrim{background:linear-gradient(90deg,#eceef0 0%,#eceef0 48%,rgba(236,238,240,.72) 62%,rgba(236,238,240,0) 84%)}
.band.has-photo.light.band-range .wrap>*{max-width:600px}
@media (max-width:820px){
  .band.has-photo.light.band-range .band-photo{object-position:right bottom;opacity:.5}
  .band.has-photo.light.band-range .band-photo-scrim{background:linear-gradient(180deg,#eceef0 0%,#eceef0 55%,rgba(236,238,240,.6) 100%)}
  .band.has-photo.light.band-range .wrap>*{max-width:none}
}

/* ---- Article: key-takeaways + FAQ + richer reading ---- */
.art-takeaways{background:var(--paper-3);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:22px 26px;margin:32px 0}
.art-takeaways .eyebrow{color:var(--accent);margin-bottom:12px}
.art-takeaways ul{list-style:none;margin:0;padding:0}
.art-takeaways li{position:relative;padding:7px 0 7px 28px;font-size:15.5px;color:var(--ink-soft);line-height:1.55}
.art-takeaways li::before{content:'';position:absolute;left:2px;top:12px;width:14px;height:14px;border-radius:50%;background:var(--accent)}
.art-takeaways li::after{content:'';position:absolute;left:6.5px;top:15px;width:4px;height:7px;border-right:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(45deg)}
.art-faq{margin:22px 0 10px}
.art-faq details{border-bottom:1px solid var(--line)}
.art-faq summary{cursor:pointer;list-style:none;font-family:var(--display);font-weight:700;font-size:17px;padding:17px 34px 17px 0;position:relative}
.art-faq summary::-webkit-details-marker{display:none}
.art-faq summary::after{content:'+';position:absolute;right:4px;top:13px;font-size:24px;line-height:1;color:var(--accent)}
.art-faq details[open] summary::after{content:'\2212'}
.art-faq details>p{padding:0 0 18px;color:var(--ink-soft);font-size:15.5px;line-height:1.7;margin:0}
.art-body h3{font-family:var(--display);font-weight:800;text-transform:none;letter-spacing:-.01em;font-size:clamp(19px,2.3vw,23px);margin:30px 0 12px}

/* ---- Carousel arrows (green) ---- */
.carousel-wrap{position:relative}
.carousel-arrow{position:absolute;top:36%;transform:translateY(-50%);z-index:6;width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 14px 32px -12px rgba(18,181,142,.75);transition:background .2s var(--ease),transform .2s var(--ease),opacity .2s var(--ease)}
.carousel-arrow:hover{background:var(--accent-bright);transform:translateY(-50%) scale(1.08)}
.carousel-arrow:active{transform:translateY(-50%) scale(.95)}
.carousel-arrow svg{width:22px;height:22px}
.carousel-arrow.prev{left:-10px}
.carousel-arrow.next{right:-10px}
.carousel-arrow.disabled{opacity:0;pointer-events:none}
@media(max-width:768px){.carousel-arrow{display:none}}