/* =========================================================================
   Rejuvstrip — Clean Clinical design system
   Foundation tokens, components, and layouts.
   ========================================================================= */

/* -------- Reset & base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--line-body);
  color: var(--color-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-width: 320px;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 var(--space-4); line-height: var(--line-tight); letter-spacing: -0.015em; font-weight: 600; color: var(--color-text); }
p { margin: 0 0 var(--space-4); }
ul { margin: 0; padding: 0; list-style: none; }

/* -------- Design tokens --------------------------------------------------- */
:root {
  /* Palette */
  --color-primary: #0F4C5C;
  --color-primary-ink: #0A3B47;
  --color-primary-darker: #0B3D4A;
  --color-primary-on: #E6EEF1;
  --color-secondary: #2A9D8F;
  --color-secondary-dark: #1F786D;
  --color-accent: #D97706;
  --color-accent-soft: #FEF3C7;
  --color-surface: #F1F5F9;
  --color-surface-2: #E2E8F0;
  --color-white: #FFFFFF;
  --color-text: #1F2937;
  --color-text-muted: #475569;
  --color-border: #CBD5E1;
  --color-border-muted: #E5E7EB;

  /* Typography */
  --font-sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "Menlo", monospace;
  --fs-h1: clamp(2.25rem, 1.6rem + 2.8vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  --fs-body: 1.125rem;
  --fs-body-sm: 1rem;
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.75rem;
  --fs-stat: clamp(3rem, 2.2rem + 3.8vw, 4.5rem);
  --fs-pullquote: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
  --line-tight: 1.15;
  --line-body: 1.6;
  --line-relaxed: 1.75;
  --tracking-eyebrow: 0.14em;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --section-y: clamp(72px, 8.5vw, 128px);
  --container: 1400px;
  --container-narrow: 920px;
  --gutter: clamp(16px, 3.2vw, 56px);

  /* Radii & shadow */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 76, 92, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(15, 76, 92, 0.2), 0 2px 6px -2px rgba(15, 76, 92, 0.08);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-med: 250ms;
}

/* -------- Utilities ------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); padding-inline: var(--gutter); margin-inline: auto; }
.container-narrow { width: 100%; max-width: var(--container-narrow); padding-inline: var(--gutter); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--dark { background: var(--color-primary); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--surface { background: var(--color-surface); }
.section--tight { padding-block: var(--space-12); }

.eyebrow {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  display: inline-block;
}
.section--dark .eyebrow { color: var(--color-secondary); }
.eyebrow--accent { color: var(--color-accent); }

.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.lede { font-size: 1.25rem; color: var(--color-text-muted); max-width: 60ch; }
.section--dark .lede { color: var(--color-primary-on); }

.muted { color: var(--color-text-muted); }
.center { text-align: center; }
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

/* Skip link */
.skip-link {
  position: absolute; top: -40px; left: 8px; z-index: 1000;
  background: var(--color-primary); color: #fff; padding: 8px 14px; border-radius: var(--radius-sm);
  font-weight: 600; transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 8px; text-decoration: none; }

/* Focus */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Anchor jump offset — keeps targeted sections clear of the sticky header */
:target, [id] { scroll-margin-top: clamp(80px, 10vh, 120px); }

/* =========================================================================
   Header — sticky main nav
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur-fast), border-color var(--dur-fast);
}
.site-header[data-scrolled="true"] { box-shadow: var(--shadow-sm); border-bottom-color: var(--color-border-muted); }
.nav {
  display: flex; align-items: center; gap: var(--space-6);
  padding-block: var(--space-4);
}
.nav__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.25rem; color: var(--color-primary); letter-spacing: -0.02em; }
.nav__brand:hover { text-decoration: none; }
.nav__brand-mark { width: 28px; height: 28px; }
.nav__brand-img { display: block; height: 44px; width: auto; max-width: 100%; }
.footer__brand .nav__brand-img { height: 48px; filter: brightness(0) invert(1); opacity: 0.95; }
.nav__links { display: none; gap: var(--space-6); margin-left: var(--space-6); }
.nav__links a { color: var(--color-text); font-weight: 500; font-size: var(--fs-body-sm); }
.nav__links a:hover { color: var(--color-primary); text-decoration: none; }
.nav__cta { margin-left: auto; display: none; gap: var(--space-3); align-items: center; }
.nav__toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-sm);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-lines > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-lines > span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-lines > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav__toggle-lines { display: inline-flex; flex-direction: column; gap: 4px; width: 20px; }
.nav__toggle-lines > span { display: block; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast); }

.nav__drawer {
  position: fixed; inset: 0 0 0 auto; width: min(86%, 360px); background: #fff;
  transform: translateX(100%); transition: transform var(--dur-med) var(--ease-out);
  padding: var(--space-8) var(--space-6); z-index: 60;
  box-shadow: -20px 0 40px rgba(0,0,0,0.15);
  display: flex; flex-direction: column; gap: var(--space-4);
  overflow-y: auto;
}
.nav__drawer[data-open="true"] { transform: translateX(0); }
.nav__drawer a { color: var(--color-text); font-weight: 500; padding: 10px 0; border-bottom: 1px solid var(--color-border-muted); }
.nav__drawer a:hover { text-decoration: none; color: var(--color-primary); }
.nav__drawer .btn { margin-top: var(--space-4); justify-content: center; }
.nav__drawer-close { align-self: flex-end; font-size: 1.5rem; line-height: 1; padding: 4px 8px; }
.nav__backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,0.5); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-med); z-index: 55;
}
.nav__backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
body[data-drawer-open="true"] { overflow: hidden; }

@media (min-width: 1024px) {
  .nav__links, .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .nav { padding-block: var(--space-5); }
}
/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  font-weight: 600; font-size: var(--fs-body-sm);
  border-radius: var(--radius-md);
  text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), color var(--dur-fast);
  line-height: 1;
  min-height: 44px;
}
.btn:hover { text-decoration: none; }
.btn__arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-ink); }

.btn--secondary { background: transparent; color: var(--color-secondary-dark); border: 2px solid var(--color-secondary); }
.btn--secondary:hover { background: var(--color-secondary); color: #fff; }

.btn--ghost-dark { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.5); }
.btn--ghost-dark:hover { background: #fff; color: var(--color-primary); border-color: #fff; }

.btn--on-dark { background: #fff; color: var(--color-primary); }
.btn--on-dark:hover { background: var(--color-surface); }

.btn--text {
  padding: 8px 0; color: var(--color-primary); min-height: auto;
  border-radius: 0; font-weight: 600;
}
.btn--text:hover { text-decoration: underline; text-underline-offset: 4px; }
.section--dark .btn--text { color: var(--color-secondary); }

.btn--sm { padding: 10px 16px; font-size: var(--fs-small); min-height: 38px; }
.btn--block { display: flex; width: 100%; justify-content: center; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: var(--fs-eyebrow); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft); color: var(--color-accent);
}
.pill--on-dark { background: rgba(217, 119, 6, 0.18); color: #FDD48F; }

/* =========================================================================
   Hero (home) — photo background + floating product
   ========================================================================= */
.hero {
  position: relative; isolation: isolate;
  padding-block: clamp(96px, 11vw, 160px);
  color: #fff;
  overflow: hidden;
  background: var(--color-primary);
  min-height: clamp(560px, 72vh, 760px);
  display: flex; align-items: center;
}
.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 58% 40%;
  z-index: -2;
}
.hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(11, 61, 74, 0.94) 0%,
      rgba(15, 76, 92, 0.82) 30%,
      rgba(15, 76, 92, 0.55) 58%,
      rgba(15, 76, 92, 0.25) 88%,
      rgba(15, 76, 92, 0.15) 100%),
    radial-gradient(circle at 82% 28%, rgba(217, 119, 6, 0.22), transparent 42%),
    radial-gradient(circle at 12% 92%, rgba(42, 157, 143, 0.2), transparent 55%);
}
.hero__grid {
  display: grid; gap: var(--space-16); align-items: center;
  grid-template-columns: 1fr;
  position: relative; z-index: 1;
  width: 100%;
}
.hero__copy h1 {
  font-size: var(--fs-h1);
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-5);
  text-shadow: 0 2px 24px rgba(11, 61, 74, 0.4);
}
.hero__copy p {
  font-size: 1.25rem;
  color: #F3F8FA;
  max-width: 60ch;
  margin-bottom: var(--space-8);
  text-shadow: 0 1px 12px rgba(11, 61, 74, 0.3);
}
.hero__copy .eyebrow { color: #FDD48F; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.hero__proof {
  display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-8);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.18);
}
.hero__proof li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-small); color: rgba(255,255,255,0.88);
  font-weight: 500;
}
.hero__proof svg {
  width: 16px; height: 16px;
  color: #FDD48F;
  flex: 0 0 auto;
}

.hero__visual {
  position: relative;
  aspect-ratio: 5 / 4;
  display: flex; align-items: center; justify-content: center;
  padding: 4%;
}
.hero__product-glow {
  position: absolute; inset: 12%;
  background: radial-gradient(circle at 55% 45%,
    rgba(217, 119, 6, 0.35) 0%,
    rgba(217, 119, 6, 0.14) 35%,
    transparent 65%);
  filter: blur(24px);
  z-index: 0;
  pointer-events: none;
}
.hero__visual img {
  position: relative; z-index: 1;
  width: 74%; max-width: 460px;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
  transform: rotate(-4deg);
  height: auto;
}
.hero__product-tag {
  position: absolute;
  bottom: 6%; right: 6%;
  z-index: 2;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(15, 76, 92, 0.75);
  color: #FDD48F;
  border: 1px solid rgba(253, 212, 143, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@media (max-width: 480px) {
  .hero { padding-block: clamp(80px, 14vw, 120px); min-height: 0; }
  .hero__bg { object-position: 65% 30%; }
  .hero__overlay {
    background:
      linear-gradient(180deg,
        rgba(11, 61, 74, 0.85) 0%,
        rgba(15, 76, 92, 0.75) 55%,
        rgba(15, 76, 92, 0.92) 100%),
      radial-gradient(circle at 80% 20%, rgba(217, 119, 6, 0.18), transparent 50%);
  }
  .hero__visual { aspect-ratio: 5 / 4; padding: 0; }
  .hero__visual img { width: 64%; }
  .hero__product-tag { bottom: 4%; right: 4%; font-size: 0.6875rem; }
  .hero__proof { gap: var(--space-3) var(--space-5); margin-top: var(--space-8); }
  .btn { padding: 12px 18px; font-size: var(--fs-small); min-width: 0; }
  .hero__ctas .btn, .final-cta__actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (min-width: 480px) and (max-width: 767px) {
  .hero { min-height: clamp(420px, 60vh, 560px); }
}

@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 7fr 5fr; gap: var(--space-20); }
  .hero__overlay {
    background:
      linear-gradient(100deg,
        rgba(11, 61, 74, 0.92) 0%,
        rgba(15, 76, 92, 0.74) 38%,
        rgba(15, 76, 92, 0.38) 62%,
        rgba(15, 76, 92, 0.12) 90%,
        rgba(15, 76, 92, 0.08) 100%),
      radial-gradient(circle at 85% 28%, rgba(217, 119, 6, 0.22), transparent 42%);
  }
}

/* =========================================================================
   Trust strip
   ========================================================================= */
.trust-strip { border-top: 1px solid var(--color-border-muted); border-bottom: 1px solid var(--color-border-muted); background: #fff; }
.trust-strip__row {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2);
  padding-block: var(--space-5);
}
.trust-chip {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;
  padding: 14px 18px;
  font-size: var(--fs-small); color: var(--color-text-muted);
  border-left: 1px solid var(--color-border-muted);
  min-width: 0;
}
.trust-chip:first-child { border-left: none; }
.trust-chip svg { width: 20px; height: 20px; color: var(--color-secondary); grid-row: 1 / 3; grid-column: 1; margin-top: 2px; }
.trust-chip > span { grid-column: 2; grid-row: 1; }
.trust-chip strong { color: var(--color-text); font-weight: 600; }
.trust-chip__detail {
  grid-column: 2; grid-row: 2;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.45;
  display: block;
}
@media (min-width: 1024px) {
  .trust-strip__row { grid-template-columns: repeat(5, 1fr); }
  .trust-chip { border-left: 1px solid var(--color-border-muted); }
  .trust-chip:first-child { border-left: none; }
}

/* =========================================================================
   InstaRelease delivery story (dark editorial band)
   ========================================================================= */
.delivery {
  background: var(--color-primary);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.delivery::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 12% 10%, rgba(253, 212, 143, 0.10), transparent 60%),
    radial-gradient(50% 40% at 92% 90%, rgba(217, 119, 6, 0.12), transparent 65%);
  pointer-events: none;
}
.delivery > .container { position: relative; }
.delivery__grid {
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
  grid-template-columns: 1fr;
}
.delivery__image {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55);
  position: relative;
}
.delivery__image::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), transparent 80%);
}
.delivery__image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.delivery__eyebrow { color: #FDD48F; }
.delivery__copy h2 {
  color: #fff;
  margin-bottom: var(--space-4);
}
.delivery__lede {
  color: var(--color-primary-on);
  margin: 0 0 var(--space-8);
  max-width: 60ch;
}
.delivery__steps {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}
.delivery-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.delivery-step:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(253, 212, 143, 0.35);
  transform: translateY(-1px);
}
.delivery-step__icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(217, 119, 6, 0.18);
  color: #FDD48F;
  flex-shrink: 0;
}
.delivery-step__icon svg {
  width: 22px; height: 22px;
}
.delivery-step__body { min-width: 0; }
.delivery-step__title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.delivery-step__desc {
  margin: 0;
  color: var(--color-primary-on);
  font-size: var(--fs-body-sm);
  line-height: 1.55;
}
@media (prefers-reduced-motion: reduce) {
  .delivery-step { transition: none; }
  .delivery-step:hover { transform: none; }
}
@media (min-width: 640px) {
  .delivery__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
}
@media (min-width: 1024px) {
  .delivery__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .delivery__steps { gap: var(--space-4); }
}
@media (min-width: 1280px) {
  .delivery-step { padding: var(--space-5) var(--space-5); }
}

/* =========================================================================
   Operator shelf bundles — three curated programs (Performance, Aesthetic,
   Wellness) replace the legacy 7-SKU showcase grid on the home page.
   ========================================================================= */
.shelves__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}
.shelves__head > div { max-width: 58ch; }
.shelves__head h2 { margin-bottom: var(--space-3); }
.shelves__lede {
  color: var(--color-text-muted);
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: 1.6;
}
.shelves__head-link { white-space: nowrap; }
@media (min-width: 900px) {
  .shelves__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-10);
  }
}

.shelves {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}
.shelves > .shelf-card { min-width: 0; }
@media (min-width: 960px) {
  .shelves { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.shelf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-6) var(--space-6);
  background: #fff;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.shelf-card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 4px;
  background: var(--shelf-accent, var(--color-primary));
}
.shelf-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--shelf-accent) 30%, var(--color-border-muted));
}
.shelf-card[data-accent="primary"] {
  --shelf-accent: var(--color-primary);
  --shelf-accent-soft: rgba(15, 76, 92, 0.08);
}
.shelf-card[data-accent="secondary"] {
  --shelf-accent: var(--color-secondary);
  --shelf-accent-soft: rgba(42, 157, 143, 0.10);
}
.shelf-card[data-accent="accent"] {
  --shelf-accent: var(--color-accent);
  --shelf-accent-soft: rgba(217, 119, 6, 0.10);
}
.shelf-card__head { display: flex; flex-direction: column; gap: var(--space-1); }
.shelf-card__pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--shelf-accent, var(--color-primary));
  background: var(--shelf-accent-soft, var(--color-surface));
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}
.shelf-card__title {
  font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem);
  margin: 0;
  letter-spacing: -0.015em;
  color: var(--color-text);
}
.shelf-card__fit {
  margin: 4px 0 0;
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.shelf-card__desc {
  margin: 0;
  font-size: var(--fs-body-sm);
  color: var(--color-text);
  line-height: 1.6;
}
.shelf-card__skus {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
}
.shelf-sku {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--color-border-muted);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.shelf-sku:hover {
  border-color: var(--shelf-accent, var(--color-border));
  text-decoration: none;
  transform: translateX(2px);
}
.shelf-sku__thumb {
  flex: 0 0 auto;
  width: 56px; height: 42px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
}
.shelf-sku__thumb img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  padding: 4px;
}
.shelf-sku__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.shelf-sku__text strong {
  font-weight: 600;
  font-size: var(--fs-body-sm);
  color: var(--color-text);
}
.shelf-sku__text em {
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.shelf-card__cta {
  margin-top: auto;
  align-self: flex-start;
  color: var(--shelf-accent, var(--color-primary));
  font-weight: 600;
  font-size: var(--fs-body-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: var(--space-2);
}
.shelf-card__cta:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .shelf-card, .shelf-sku { transition: none; }
  .shelf-card:hover, .shelf-sku:hover { transform: none; }
}

/* =========================================================================
   Dual-audience split
   ========================================================================= */
.audience { display: grid; grid-template-columns: 1fr; }
.audience__panel {
  padding: clamp(48px, 7vw, 96px) var(--gutter);
  display: flex; flex-direction: column; justify-content: center;
  min-height: 420px;
}
.audience__inner { max-width: 480px; margin-inline: auto; width: 100%; }
.audience__panel--consumer { background: var(--color-surface-2); color: var(--color-text); }
.audience__panel--pro {
  background: var(--color-primary); color: #fff;
  background-image: radial-gradient(circle at 0% 100%, rgba(217, 119, 6,0.25), transparent 55%);
}
.audience__panel--pro h2 { color: #fff; }
.audience__panel ul { display: grid; gap: var(--space-3); margin-block: var(--space-6); }
.audience__panel li {
  display: flex; gap: 10px; align-items: flex-start;
  font-weight: 500;
}
.audience__panel li::before {
  content: "✓"; flex: 0 0 auto; color: var(--color-secondary); font-weight: 700; font-size: 1.1em;
}
.audience__panel--pro li::before { color: #9BE6D4; }
@media (min-width: 1024px) { .audience { grid-template-columns: 1fr 1fr; } }

/* =========================================================================
   Science & stats band
   ========================================================================= */
.science {
  background: #fff; position: relative;
}
.science::before {
  content: ""; position: absolute; top: 0; right: 0; width: 320px; height: 320px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'><circle cx='50' cy='50' r='40' stroke='%230F4C5C' stroke-opacity='0.05' stroke-width='1'/><circle cx='50' cy='50' r='28' stroke='%230F4C5C' stroke-opacity='0.05' stroke-width='1'/><circle cx='50' cy='50' r='16' stroke='%230F4C5C' stroke-opacity='0.05' stroke-width='1'/></svg>");
  background-size: contain; background-repeat: no-repeat;
  pointer-events: none;
}
.stat-row {
  display: grid; grid-template-columns: 1fr; gap: var(--space-8);
  padding-block: var(--space-4) var(--space-16);
  border-bottom: 1px solid var(--color-border-muted);
  margin-bottom: var(--space-12);
}
.stat-block { position: relative; }
.stat-block__num {
  font-size: var(--fs-stat); line-height: 1; font-weight: 700;
  color: var(--color-primary); letter-spacing: -0.04em;
  margin-bottom: var(--space-3); font-family: var(--font-sans);
}
.stat-block__num sup { font-size: 0.4em; color: var(--color-accent); vertical-align: super; margin-left: 4px; }
.stat-block__label { font-size: var(--fs-small); color: var(--color-text-muted); max-width: 30ch; }
.science__detail { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: center; }
.science__detail img { border-radius: var(--radius-lg); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 768px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .science__detail { grid-template-columns: 5fr 6fr; gap: var(--space-12); } }

/* =========================================================================
   Testimonials — pull-quote + rail
   ========================================================================= */
.testimonials { background: var(--color-surface); }
.pull-quote {
  max-width: 880px; margin-inline: auto;
  padding-left: var(--space-6); border-left: 4px solid var(--color-accent);
  position: relative; margin-bottom: var(--space-16);
}
.pull-quote::before {
  content: "“"; position: absolute; top: -40px; left: -4px;
  font-size: 8rem; line-height: 1; color: var(--color-accent); opacity: 0.22;
  font-family: Georgia, serif; pointer-events: none;
}
.pull-quote blockquote {
  font-size: var(--fs-pullquote); line-height: 1.35; font-weight: 500;
  font-style: italic; color: var(--color-text); margin: 0 0 var(--space-5); max-width: 60ch;
}
.pull-quote cite { font-style: normal; color: var(--color-text-muted); font-size: var(--fs-small); display: flex; gap: var(--space-3); align-items: center; }
.pull-quote cite strong { color: var(--color-text); }
.pull-quote__chip {
  display: inline-flex; align-items: center;
  font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--color-accent);
  background: var(--color-accent-soft); padding: 3px 10px; border-radius: var(--radius-pill);
}
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 80%;
  overflow-x: auto; gap: var(--space-4);
  scroll-snap-type: x mandatory; padding-bottom: var(--space-4);
  scrollbar-color: var(--color-border) transparent;
}
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }
.rail-quote {
  scroll-snap-align: start;
  padding-left: var(--space-4); border-left: 4px solid var(--rail-accent, var(--color-primary));
  background: transparent;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.rail-quote[data-accent="primary"]   { --rail-accent: var(--color-primary); }
.rail-quote[data-accent="secondary"] { --rail-accent: var(--color-secondary); }
.rail-quote[data-accent="accent"]    { --rail-accent: var(--color-accent); }
.rail-quote[data-accent="deep"]      { --rail-accent: var(--color-primary-ink); }
.rail-quote blockquote { margin: 0; font-size: var(--fs-body-sm); line-height: 1.55; }
.rail-quote cite { font-style: normal; font-size: var(--fs-small); color: var(--color-text-muted); }
.rail-quote cite strong { color: var(--color-text); display: block; }
@media (min-width: 768px)  { .rail { grid-auto-columns: 45%; } }
@media (min-width: 1024px) { .rail { grid-auto-columns: 1fr; grid-auto-flow: column; overflow: visible; } }

/* =========================================================================
   Resources — asymmetric 2-tile
   ========================================================================= */
.resources-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-6);
}
.cta-tile { border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; min-height: 320px; position: relative; transition: transform var(--dur-fast) var(--ease-out); }
.cta-tile:hover { text-decoration: none; transform: translateY(-2px); }
.cta-tile--photo {
  background: linear-gradient(180deg, rgba(15,76,92,0.05), rgba(15,76,92,0.85)), url("../images/editorial/learn-peptides.webp") center/cover;
  color: #fff;
  padding: var(--space-10); justify-content: flex-end;
}
.cta-tile--photo h3 { color: #fff; font-size: 1.5rem; }
.cta-tile--photo p { color: rgba(255,255,255,0.85); max-width: 38ch; }
.cta-tile--icon {
  background: var(--color-surface); color: var(--color-text);
  padding: var(--space-8); justify-content: space-between;
  border: 1px solid var(--color-border-muted);
}
.cta-tile--icon .icon-wrap {
  width: 56px; height: 56px; border-radius: var(--radius-md);
  background: var(--color-accent-soft); color: var(--color-accent);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-5);
}
.cta-tile--icon ul { margin-block: var(--space-4); display: grid; gap: var(--space-2); }
.cta-tile--icon li { color: var(--color-text-muted); font-size: var(--fs-body-sm); padding-left: 16px; position: relative; }
.cta-tile--icon li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-secondary); }
.cta-tile__link { font-weight: 600; color: var(--color-primary); display: inline-flex; align-items: center; gap: 6px; }
.cta-tile--photo .cta-tile__link { color: #fff; }
@media (min-width: 1024px) { .resources-grid { grid-template-columns: 2fr 1fr; } }

/* =========================================================================
   Final CTA band
   ========================================================================= */
.final-cta {
  background: var(--color-primary); color: #fff; text-align: center;
  position: relative; overflow: hidden;
}
.final-cta::before {
  content: ""; position: absolute; top: -40%; left: 50%; width: 800px; height: 800px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(42,157,143,0.16), transparent 55%);
  pointer-events: none;
}
.final-cta > .container-narrow { position: relative; z-index: 1; }
.final-cta h2 { color: #fff; font-size: var(--fs-h2); max-width: 24ch; margin-inline: auto; }
.final-cta p { color: var(--color-primary-on); max-width: 52ch; margin-inline: auto; margin-bottom: var(--space-8); }
.final-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-bottom: var(--space-8); }
.final-cta__meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6);
  color: var(--color-primary-on); font-size: var(--fs-small);
  border-top: 1px solid rgba(255,255,255,0.14); padding-top: var(--space-6);
}
.final-cta__meta a { color: #fff; font-weight: 500; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
  background: var(--color-primary-darker); color: var(--color-primary-on);
}
.site-footer a { color: var(--color-primary-on); }
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-8);
  padding-block: var(--space-16) var(--space-10);
}
.footer-col h4 { color: #fff; font-size: var(--fs-body-sm); margin-bottom: var(--space-4); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-weight: 600; }
.footer-col ul { display: grid; gap: var(--space-2); }
.footer-col li a { font-size: var(--fs-body-sm); }
.footer__brand p { max-width: 32ch; font-size: var(--fs-body-sm); margin-bottom: var(--space-4); }
.footer__address { font-style: normal; font-size: var(--fs-body-sm); line-height: 1.65; }
.footer__socials { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.footer__socials a {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); transition: background var(--dur-fast);
}
.footer__socials a:hover { background: rgba(255,255,255,0.16); }
.footer__socials svg { width: 16px; height: 16px; color: #fff; }
.footer__disclaimer {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-block: var(--space-5);
  font-size: 0.8125rem; color: rgba(230,238,241,0.65); line-height: 1.55;
}
.footer__disclaimer p { margin-bottom: var(--space-2); }
.footer__disclaimer a { text-decoration: underline; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-10); } }

/* =========================================================================
   Forms
   ========================================================================= */
.form { display: grid; gap: var(--space-5); }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: var(--fs-body-sm); color: var(--color-text); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit; font-size: var(--fs-body-sm);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm); background: #fff; color: var(--color-text);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--color-secondary);
  box-shadow: 0 0 0 4px rgba(42,157,143,0.18);
}
.field__hint { font-size: var(--fs-small); color: var(--color-text-muted); }
.field__error { font-size: var(--fs-small); color: #B3261E; display: none; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #B3261E; }
.field.is-invalid .field__error { display: block; }
.field--row { display: flex; gap: var(--space-3); align-items: flex-start; }
.field--row input[type="checkbox"] { width: 22px; height: 22px; margin-top: 2px; flex: 0 0 auto; }
.field--row label { font-weight: 400; font-size: var(--fs-body-sm); color: var(--color-text-muted); }
.form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }

.form-success {
  display: none;
  padding: var(--space-6); border-radius: var(--radius-md);
  background: var(--color-accent-soft); color: var(--color-primary);
  border-left: 4px solid var(--color-secondary);
}
.form-success[data-visible="true"] { display: block; }

.form-card {
  background: #fff; padding: var(--space-8); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* =========================================================================
   FAQ accordion
   ========================================================================= */
.faq { display: grid; gap: var(--space-3); max-width: 820px; margin-inline: auto; }
.faq-row {
  background: #fff; border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md); padding: 0;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.faq-row[open] { border-color: var(--color-secondary); box-shadow: var(--shadow-sm); }
.faq-row summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-6); font-weight: 600;
  color: var(--color-text);
}
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary::after {
  content: ""; width: 14px; height: 14px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease-out);
}
.faq-row[open] summary::after { transform: rotate(-135deg); }
.faq-row__body { padding: 0 var(--space-6) var(--space-6); color: var(--color-text-muted); }
.faq-row__body p:last-child { margin-bottom: 0; }

/* =========================================================================
   Blog cards
   ========================================================================= */
.blog-featured {
  display: grid; grid-template-columns: 1fr; gap: var(--space-6);
  margin-bottom: var(--space-16);
}
.blog-featured img { border-radius: var(--radius-lg); width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.blog-featured h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: var(--space-3); }
.blog-featured p { color: var(--color-text-muted); max-width: 52ch; }
.blog-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.blog-card {
  background: #fff; border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.blog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.blog-card__img { aspect-ratio: 16 / 10; background: var(--color-surface); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.blog-card__meta { font-size: var(--fs-small); color: var(--color-text-muted); display: flex; gap: var(--space-3); }
.blog-card h3 { font-size: 1.25rem; margin-bottom: 0; color: var(--color-text); }
.blog-card p { color: var(--color-text-muted); margin-bottom: 0; flex: 1; }
.blog-card__read { color: var(--color-primary); font-weight: 600; margin-top: auto; }
.category-chip {
  display: inline-flex; align-items: center;
  font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); padding: 3px 10px;
  border-radius: var(--radius-pill); color: var(--color-primary); background: var(--color-surface-2);
}
.category-chip--science { color: var(--color-accent); background: var(--color-accent-soft); }
.category-chip--howto { color: var(--color-secondary-dark); background: #DCF0ED; }
@media (min-width: 768px) {
  .blog-featured { grid-template-columns: 6fr 5fr; align-items: center; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Article page styles */
.article { max-width: 720px; margin-inline: auto; padding-block: var(--space-16); }
.article h1 { font-size: var(--fs-h1); margin-bottom: var(--space-4); }
.article__meta { color: var(--color-text-muted); font-size: var(--fs-small); margin-bottom: var(--space-8); }
.article h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); margin-top: var(--space-12); margin-bottom: var(--space-4); }
.article h3 { font-size: 1.25rem; margin-top: var(--space-8); margin-bottom: var(--space-3); }
.article p, .article li { font-size: 1.125rem; line-height: var(--line-relaxed); }
.article ul { list-style: disc; padding-left: var(--space-6); margin-block: var(--space-4); }
.article ul li { margin-bottom: var(--space-2); }
.article blockquote {
  margin: var(--space-8) 0; padding-left: var(--space-6);
  border-left: 4px solid var(--color-accent);
  font-style: italic; color: var(--color-text-muted);
}

/* =========================================================================
   Product page (individual)
   ========================================================================= */
.product-hero { padding-block: clamp(64px, 9vw, 128px); background: var(--color-surface); }
.product-hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center; }
.product-hero__img {
  background: #fff; border-radius: var(--radius-lg); padding: var(--space-10);
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-md);
}
.product-hero__img img { max-height: 100%; max-width: 100%; object-fit: contain; }
.product-hero h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); margin-bottom: var(--space-3); }
.product-hero__peptide { color: var(--color-accent); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: var(--fs-small); }
.product-hero__tagline { font-size: 1.25rem; color: var(--color-text-muted); max-width: 48ch; margin-bottom: var(--space-8); }
@media (min-width: 1024px) {
  .product-hero__grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
  .product-hero[data-layout="image-left"] .product-hero__img { order: -1; }
}

.benefits {
  display: grid; grid-template-columns: 1fr; gap: var(--space-6);
}
.benefit-item {
  padding: var(--space-5); border-left: 3px solid var(--color-secondary);
  background: #fff;
}
.benefit-item h3 { font-size: 1.125rem; margin-bottom: var(--space-2); }
.benefit-item p { margin: 0; color: var(--color-text-muted); font-size: var(--fs-body-sm); }
@media (min-width: 768px) { .benefits { grid-template-columns: repeat(2, 1fr); } }

.suppfacts { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: center; }
.suppfacts img { max-width: 100%; background: #fff; padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border-muted); }
.suppfacts__disclaimer {
  font-size: var(--fs-small); color: var(--color-text-muted); padding: var(--space-4);
  background: var(--color-surface); border-radius: var(--radius-sm);
}
@media (min-width: 768px) { .suppfacts { grid-template-columns: 1fr 1.3fr; } }

/* =========================================================================
   Services / About page helpers
   ========================================================================= */
.product-row {
  display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: center;
  padding: var(--space-10) 0; border-top: 1px solid var(--color-border-muted);
}
.product-row:first-child { border-top: none; }
.product-row__media {
  background: transparent;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 480px) {
  .product-row__media { padding: var(--space-4); }
}
.product-row h3 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); margin-bottom: var(--space-2); }
.product-row__peptide { color: var(--color-accent); font-weight: 600; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); }
.product-row__benefits { display: grid; gap: var(--space-2); margin-block: var(--space-4); }
.product-row__benefits li { padding-left: 22px; position: relative; color: var(--color-text); }
.product-row__benefits li::before { content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 2px; background: var(--color-secondary); }
.product-row .btn { margin-top: var(--space-2); }
.product-row .btn + .btn { margin-left: 0 !important; }
@media (min-width: 480px) { .product-row .btn + .btn { margin-left: 8px !important; } }
@media (min-width: 1024px) {
  .product-row { grid-template-columns: 1fr 1fr; gap: var(--space-12); padding: var(--space-12) 0; }
  .product-row:nth-child(even) .product-row__media { order: 2; }
}

/* Page hero (non-home) */
.page-hero {
  background: linear-gradient(160deg, var(--color-primary) 0%, #123a47 100%);
  color: #fff; padding-block: clamp(80px, 9vw, 128px) clamp(64px, 7vw, 96px);
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 85% 25%, rgba(217, 119, 6,0.18), transparent 40%);
  pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-size: var(--fs-h1); max-width: 24ch; margin-bottom: var(--space-4); }
.page-hero p { color: var(--color-primary-on); max-width: 56ch; font-size: 1.25rem; }
.page-hero .eyebrow { color: #FDD48F; }

/* Process steps (used on about, services, science) */
.process {
  display: grid; grid-template-columns: 1fr; gap: var(--space-6);
  counter-reset: step;
}
.process-step {
  background: #fff; border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md); padding: var(--space-6);
  position: relative; padding-top: calc(var(--space-6) + 20px);
}
.process-step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: var(--space-5); left: var(--space-6);
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--color-accent); font-weight: 600;
}
.process-step h3 { font-size: 1.125rem; margin-bottom: var(--space-2); }
.process-step p { color: var(--color-text-muted); font-size: var(--fs-body-sm); margin: 0; }
@media (min-width: 768px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .process { grid-template-columns: repeat(4, 1fr); } }

/* Contact page: two-column content + sidebar */
.contact-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-10); }
.contact-info { display: grid; gap: var(--space-5); align-content: start; }
.contact-info__card {
  background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-6);
  border: 1px solid var(--color-border-muted);
}
.contact-info__card h4 { font-size: var(--fs-body-sm); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.contact-info__card p, .contact-info__card a { font-size: 1.0625rem; }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: 1.6fr 1fr; gap: var(--space-16); } }

/* Category nav pills — horizontal scroll on narrow screens */
.category-nav {
  display: flex; align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-10);
  flex-wrap: wrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.category-nav::-webkit-scrollbar { display: none; }
.category-nav__label {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: 600;
  color: var(--color-text-muted);
  padding-right: var(--space-4);
  border-right: 1px solid var(--color-border-muted);
  white-space: nowrap; flex-shrink: 0;
  line-height: 1;
}
.category-nav__pills {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-width: 0;
}
.category-nav__pills::-webkit-scrollbar { display: none; }
.category-nav a {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: #fff; border: 1px solid var(--color-border);
  font-size: var(--fs-small); font-weight: 500; color: var(--color-text);
  white-space: nowrap; flex-shrink: 0;
  letter-spacing: -0.005em;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.category-nav a:hover {
  background: #fff; text-decoration: none;
  border-color: var(--color-primary); color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.category-nav a:focus-visible {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(15, 76, 92, 0.18);
}
@media (max-width: 640px) {
  .category-nav { flex-wrap: nowrap; gap: var(--space-2) var(--space-3); }
  .category-nav__label { display: none; }
  .category-nav__pills { flex-wrap: nowrap; }
}

/* Values grid (about) */
.values { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.section--surface .values .value-card { background: #fff; }
.value-card {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.value-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-border-muted));
}
.value-card__icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface); color: var(--color-primary); margin-bottom: var(--space-4);
  border: 1px solid var(--color-border-muted);
}
.value-card__icon svg { width: 22px; height: 22px; }
.value-card h3 { font-size: 1.125rem; margin-bottom: var(--space-2); }
.value-card p { margin: 0; font-size: var(--fs-body-sm); color: var(--color-text-muted); line-height: 1.55; }
@media (prefers-reduced-motion: reduce) {
  .value-card { transition: none; }
  .value-card:hover { transform: none; }
}
@media (min-width: 768px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .values { grid-template-columns: repeat(4, 1fr); } }

/* =========================================================================
   About — Manufacturing flow (horizontal stepper, replaces .process cards)
   ========================================================================= */
.flow-header {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
  margin-bottom: var(--space-12);
  align-items: end;
}
.flow-header__lede {
  margin: 0; color: var(--color-text-muted);
  max-width: 44ch;
}
@media (min-width: 900px) {
  .flow-header { grid-template-columns: 1.1fr 1fr; gap: var(--space-10); }
  .flow-header__lede { justify-self: end; text-align: left; }
}

.flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: var(--space-8);
  position: relative;
  counter-reset: flowstep;
}
.flow__step {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4);
  align-items: start;
  transition: transform var(--dur-med) var(--ease-out);
}
.flow__node {
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--color-border);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative; z-index: 1;
  transition: background var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.flow__num {
  font-family: var(--font-mono); font-size: 1rem;
  font-weight: 600; color: var(--color-primary);
  letter-spacing: -0.01em;
}
.flow__kicker {
  display: inline-block; font-family: var(--font-mono);
  font-size: 0.75rem; color: var(--color-accent);
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  margin-bottom: 4px;
}
.flow__copy h3 {
  font-size: 1.25rem; margin-bottom: var(--space-2);
  letter-spacing: -0.015em;
}
.flow__copy p {
  margin: 0; color: var(--color-text-muted);
  font-size: var(--fs-body-sm); line-height: var(--line-relaxed);
  max-width: 36ch;
}
.flow__step:hover .flow__node {
  background: var(--color-primary); border-color: var(--color-primary);
  box-shadow: 0 6px 20px -8px rgba(15, 76, 92, 0.45);
}
.flow__step:hover .flow__num { color: #fff; }

/* Vertical connecting line between mobile nodes */
@media (max-width: 899px) {
  .flow__step:not(:last-child)::before {
    content: ""; position: absolute;
    left: 27px; top: 56px; bottom: calc(-1 * var(--space-8));
    width: 2px;
    background-image: linear-gradient(to bottom, var(--color-border) 50%, transparent 50%);
    background-size: 2px 8px;
    background-repeat: repeat-y;
  }
}

/* Horizontal flow on wider screens */
@media (min-width: 900px) {
  .flow { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
  .flow__step {
    grid-template-columns: 1fr; grid-template-rows: auto auto;
    gap: var(--space-4); justify-items: start;
    padding-top: 0;
  }
  .flow__step::before {
    content: ""; position: absolute;
    top: 27px; left: 56px; right: calc(-1 * var(--space-6));
    height: 2px;
    background-image: linear-gradient(to right, var(--color-border) 50%, transparent 50%);
    background-size: 8px 2px;
    background-repeat: repeat-x;
  }
  .flow__step:last-child::before { display: none; }
  .flow__copy { padding-right: var(--space-4); }
}

/* =========================================================================
   About — Manifesto rules (editorial values list, replaces .values cards)
   ========================================================================= */
.manifesto-header {
  max-width: 720px; margin-bottom: var(--space-10);
}
.manifesto-header__accent {
  font-family: var(--font-mono); font-style: normal;
  color: var(--color-accent); font-weight: 600;
  letter-spacing: -0.02em;
}

.manifesto {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--color-border-muted);
}
.manifesto__rule {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: start; gap: var(--space-5);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border-muted);
  position: relative;
  transition: padding var(--dur-med) var(--ease-out);
}
.manifesto__rule::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(15, 76, 92, 0.04), transparent 60%);
  opacity: 0; transition: opacity var(--dur-med) var(--ease-out);
  pointer-events: none;
}
.manifesto__rule:hover::before { opacity: 1; }
.manifesto__rule:hover { padding-inline: var(--space-3); }

.manifesto__index {
  font-family: var(--font-mono); font-size: 0.875rem;
  color: var(--color-text-muted); font-weight: 600;
  letter-spacing: 0.04em; padding-top: 6px;
  min-width: 28px;
}
.manifesto__body {
  min-width: 0;
}
.manifesto__title {
  font-size: clamp(1.375rem, 1.05rem + 1vw, 1.875rem);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.02em; line-height: 1.2;
}
.manifesto__no {
  font-style: italic;
  color: var(--color-accent);
  font-weight: 600;
  margin-right: 4px;
}
.manifesto__body p {
  margin: 0; color: var(--color-text-muted);
  font-size: var(--fs-body-sm); max-width: 60ch;
}
.manifesto__mark {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface); color: var(--color-text-muted);
  flex-shrink: 0; margin-top: 2px;
  transition: background var(--dur-med) var(--ease-out),
              color var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
}
.manifesto__rule:hover .manifesto__mark {
  background: var(--color-accent); color: #fff;
  transform: rotate(90deg);
}
@media (max-width: 600px) {
  .manifesto__rule { gap: var(--space-3); padding: var(--space-5) 0; }
  .manifesto__rule:hover { padding-inline: var(--space-2); }
  .manifesto__mark { display: none; }
}

/* Breadcrumb */
.crumbs { font-size: var(--fs-small); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.crumbs a { color: var(--color-primary-on); }
.section--dark .crumbs { color: var(--color-primary-on); }

/* 2-col generic (used by science page, wholesale, etc.) */
.two-col { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center; }
.two-col img { border-radius: var(--radius-lg); width: 100%; }
@media (min-width: 1024px) { .two-col { grid-template-columns: 1fr 1fr; gap: var(--space-16); } .two-col[data-reverse="true"] > :first-child { order: 2; } }

/* =========================================================================
   About — Quality spotlight (lab/cGMP image + bullet copy)
   ========================================================================= */
.quality-spotlight { background: var(--color-surface); }
.quality-spotlight__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
}
.quality-spotlight__media {
  margin: 0;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(15, 23, 42, 0.35);
  aspect-ratio: 4 / 5;
  isolation: isolate;
}
.quality-spotlight__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quality-spotlight__media::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), transparent 80%);
}
.quality-spotlight__badge {
  position: absolute;
  left: var(--space-5); top: var(--space-5);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  backdrop-filter: blur(4px);
  z-index: 1;
}
.quality-spotlight__badge svg { width: 14px; height: 14px; }
.quality-spotlight__copy h2 {
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
  letter-spacing: -0.02em;
  max-width: 24ch;
  margin-bottom: var(--space-4);
}
.quality-spotlight__lede {
  margin: 0 0 var(--space-6);
  font-size: var(--fs-body);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 56ch;
}
.quality-spotlight__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
.quality-spotlight__list li {
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8);
  background: #fff;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}
.quality-spotlight__list li strong {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--color-text);
}
.quality-spotlight__list li::before {
  content: "";
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}
@media (min-width: 900px) {
  .quality-spotlight__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(var(--space-10), 5vw, var(--space-16));
  }
}

/* Inline note box */
.note {
  padding: var(--space-5); border-radius: var(--radius-md);
  background: var(--color-accent-soft); border-left: 4px solid var(--color-accent);
  color: var(--color-text); font-size: var(--fs-body-sm);
}
.note p:last-child { margin: 0; }

/* Announce card — distinct teal-accent treatment for "coming soon" callouts */
.announce-card {
  position: relative;
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(42, 157, 143, 0.10), rgba(42, 157, 143, 0.02) 60%, transparent 75%),
    #fff;
  border: 1px solid rgba(42, 157, 143, 0.28);
  box-shadow: 0 1px 2px rgba(15, 76, 92, 0.05);
  overflow: hidden;
}
.announce-card::after {
  content: ""; position: absolute;
  right: -28px; top: -28px; width: 96px; height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(42, 157, 143, 0.22), transparent 70%);
  pointer-events: none;
}
.announce-card__pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 8px; border-radius: var(--radius-pill);
  background: rgba(42, 157, 143, 0.12);
  color: var(--color-secondary-dark);
  font-family: var(--font-mono); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  font-weight: 600; margin-bottom: var(--space-3);
}
.announce-card__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-secondary);
  position: relative; flex-shrink: 0;
}
.announce-card__dot::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; background: var(--color-secondary);
  animation: announce-pulse 2.4s var(--ease-out) infinite;
}
@keyframes announce-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(2.4); opacity: 0;   }
  100% { transform: scale(2.4); opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
  .announce-card__dot::before { animation: none; }
}
.announce-card__title {
  font-size: 1.25rem; margin: 0 0 var(--space-2);
  letter-spacing: -0.015em;
}
.announce-card__body {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
  max-width: 48ch;
}
.announce-card__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: var(--fs-body-sm);
  color: var(--color-secondary-dark);
  border-bottom: 1px solid rgba(42, 157, 143, 0.35);
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              gap var(--dur-fast) var(--ease-out);
}
.announce-card__cta:hover {
  text-decoration: none;
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  gap: 10px;
}
.announce-card__cta .btn__arrow { transition: transform var(--dur-fast) var(--ease-out); }
.announce-card__cta:hover .btn__arrow { transform: translateX(2px); }

/* Visually hidden */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =========================================================================
   CTA promise chip — small reassurance under primary CTA
   ========================================================================= */
.cta-promise {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--space-3);
  font-size: var(--fs-small); color: var(--color-text-muted);
}
.cta-promise::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-secondary); flex: 0 0 auto;
}
.section--dark .cta-promise,
.hero .cta-promise,
.final-cta .cta-promise,
.audience__panel--pro .cta-promise { color: rgba(255,255,255,0.78); }
.section--dark .cta-promise::before,
.hero .cta-promise::before,
.final-cta .cta-promise::before,
.audience__panel--pro .cta-promise::before { background: #FDD48F; }

/* =========================================================================
   Mobile CTA bar — fixed-bottom thumb-reach action on long pages
   ========================================================================= */
.mobile-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: var(--space-2);
  padding: var(--space-3) var(--gutter);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border-muted);
  box-shadow: 0 -4px 24px rgba(15, 76, 92, 0.08);
  transform: translateY(110%);
  transition: transform var(--dur-med) var(--ease-out);
  pointer-events: none;
}
.mobile-cta-bar[data-visible="true"] { transform: translateY(0); pointer-events: auto; }
.mobile-cta-bar .btn {
  flex: 1 1 auto; min-width: 0;
  padding: 12px 16px; min-height: 44px;
  font-size: var(--fs-small);
}
.mobile-cta-bar .btn--call {
  flex: 0 0 52px; padding: 0; justify-content: center;
}
.mobile-cta-bar .btn--call svg { width: 20px; height: 20px; }
@media (min-width: 768px) { .mobile-cta-bar { display: none !important; } }
body[data-cta-bar="active"] { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) { body[data-cta-bar="active"] { padding-bottom: 0; } }

/* =========================================================================
   Scroll-reveal — opt-in via [data-reveal], gated by reduced-motion
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0; transform: translateY(18px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
    will-change: opacity, transform;
  }
  [data-reveal][data-revealed="true"] { opacity: 1; transform: none; }
  [data-reveal="fade-right"] { transform: translateX(-18px); }
  [data-reveal="fade-right"][data-revealed="true"] { transform: none; }
  [data-reveal="fade-left"] { transform: translateX(18px); }
  [data-reveal="fade-left"][data-revealed="true"] { transform: none; }
}

/* =========================================================================
   Form button loading state
   ========================================================================= */
.btn[data-loading="true"] {
  pointer-events: none;
  position: relative;
  color: transparent;
}
.btn[data-loading="true"] .btn__arrow,
.btn[data-loading="true"] span { color: transparent; }
.btn[data-loading="true"]::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: #fff;
  animation: btn-spin 700ms linear infinite;
}
.btn--secondary[data-loading="true"]::after,
.btn--text[data-loading="true"]::after { color: var(--color-primary); }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* =========================================================================
   Form error banner — server-side error reporting
   ========================================================================= */
.form-error {
  display: none;
  padding: var(--space-4) var(--space-5);
  background: #FFE4E1; color: #7F1D1D;
  border-radius: var(--radius-md);
  border-left: 4px solid #B3261E;
  font-size: var(--fs-body-sm);
}
.form-error[data-visible="true"] { display: block; }

/* =========================================================================
   Image-pair — front/back strip toggle (services.html, product pages)
   ========================================================================= */
.image-pair {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}
.image-pair__stage {
  position: relative;
  width: 100%;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.image-pair__stage img {
  position: absolute; inset: var(--space-5);
  width: calc(100% - 2 * var(--space-5));
  height: calc(100% - 2 * var(--space-5));
  object-fit: contain;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.image-pair__back { opacity: 0; transform: scale(0.94); }
.image-pair[data-flipped="true"] .image-pair__front { opacity: 0; transform: scale(0.94); }
.image-pair[data-flipped="true"] .image-pair__back { opacity: 1; transform: none; }
.image-pair__toggle {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 0;
  font-size: var(--fs-small); font-weight: 600;
  color: var(--color-primary); cursor: pointer;
  border: 0; background: none;
}
.image-pair__toggle:hover { text-decoration: underline; text-underline-offset: 4px; }
.image-pair__toggle::before {
  content: ""; width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-radius: 50%;
  display: inline-block;
  background: radial-gradient(currentColor 35%, transparent 36%);
  flex: 0 0 auto;
  transition: transform var(--dur-fast);
}
.image-pair[data-flipped="true"] .image-pair__toggle::before { transform: rotate(180deg); background: radial-gradient(transparent 60%, currentColor 61%, currentColor 75%, transparent 76%); }

/* =========================================================================
   Compare table — responsive matrix (collapses to labeled cells on mobile)
   ========================================================================= */
.compare-table {
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
}
.compare-row { display: grid; grid-template-columns: 1fr; }
.compare-row + .compare-row { border-top: 1px solid var(--color-border-muted); }
.compare-row--head { display: none; }
.compare-row > div { padding: var(--space-4) var(--space-5); }
.compare-row__label {
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-muted);
  background: var(--color-surface);
}
.compare-cell {
  display: flex; align-items: baseline; gap: var(--space-3);
  font-size: var(--fs-body-sm);
}
.compare-cell::before {
  content: attr(data-col);
  font-weight: 700;
  color: var(--color-text);
  flex: 0 0 max(120px, 30%);
  font-size: var(--fs-small);
}
.compare-cell[data-cell="yes"] { color: var(--color-secondary-dark); font-weight: 600; }
.compare-cell[data-cell="no"] { color: var(--color-text-muted); }
.compare-cell[data-cell="partial"] { color: var(--color-accent); font-weight: 600; }

@media (min-width: 768px) {
  .compare-row--head {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    background: var(--color-primary); color: #fff;
  }
  .compare-row--head > div {
    font-size: var(--fs-small); font-weight: 600;
    border-right: 1px solid rgba(255,255,255,0.1);
  }
  .compare-row--head > div:last-child { border-right: none; }
  .compare-row:not(.compare-row--head) {
    grid-template-columns: 1.6fr repeat(3, 1fr);
    align-items: center;
  }
  .compare-row:not(.compare-row--head) > div {
    border-right: 1px solid var(--color-border-muted);
  }
  .compare-row:not(.compare-row--head) > div:last-child { border-right: none; }
  .compare-row__label {
    background: transparent;
    text-transform: none; letter-spacing: normal;
    font-size: var(--fs-body-sm); font-weight: 600;
    color: var(--color-text);
  }
  .compare-cell::before { content: none; }
  .compare-cell { display: block; font-size: var(--fs-body-sm); }
}

/* =========================================================================
   Above-form trust row (contact + wholesale)
   ========================================================================= */
.form-trust {
  display: grid; grid-template-columns: 1fr; gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.form-trust__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
}
.form-trust__chip {
  display: inline-flex; gap: 8px; align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-small); color: var(--color-text);
  border-left: 1px solid var(--color-border-muted);
  border-top: 1px solid var(--color-border-muted);
}
.form-trust__chip svg { width: 18px; height: 18px; color: var(--color-secondary); flex: 0 0 auto; margin-top: 1px; }
.form-trust__chip:nth-child(odd) { border-left: none; }
.form-trust__chip:nth-child(-n+2) { border-top: none; }
@media (min-width: 768px) {
  .form-trust__row { grid-template-columns: repeat(4, 1fr); }
  .form-trust__chip { border-top: none; border-left: 1px solid var(--color-border-muted); }
  .form-trust__chip:first-child { border-left: none; }
}

/* =========================================================================
   Strip Finder UI (find-your-strip.html)
   ========================================================================= */
.stripfinder { background: #fff; border-radius: var(--radius-lg); padding: clamp(var(--space-6), 4vw, var(--space-10)); border: 1px solid var(--color-border-muted); box-shadow: var(--shadow-sm); }
.stripfinder__progress {
  display: flex; gap: var(--space-2); justify-content: center; align-items: center;
  margin-bottom: var(--space-8);
}
.stripfinder__progress-dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-small);
  background: var(--color-surface-2); color: var(--color-text-muted);
  transition: all var(--dur-fast) var(--ease-out);
}
.stripfinder__progress-dot[data-state="active"] { background: var(--color-primary); color: #fff; transform: scale(1.1); }
.stripfinder__progress-dot[data-state="done"] { background: var(--color-secondary); color: #fff; }
.stripfinder__progress-line {
  width: 32px; height: 2px; background: var(--color-border-muted);
}
.stripfinder__progress-line[data-state="done"] { background: var(--color-secondary); }
.stripfinder__step { display: none; }
.stripfinder__step[data-active="true"] { display: block; }
.stripfinder__step-eyebrow { display: block; text-align: center; margin-bottom: var(--space-3); }
.stripfinder__step-title { text-align: center; font-size: var(--fs-h3); margin-bottom: var(--space-6); }
.stripfinder__chips {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-8);
}
.stripfinder__chip {
  display: inline-flex; align-items: center;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-border);
  background: #fff;
  font-weight: 500; font-size: var(--fs-body-sm);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  min-height: 44px;
}
.stripfinder__chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.stripfinder__chip[data-selected="true"] {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}
.stripfinder__nav { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-4); }
.stripfinder__result { animation: result-fade 500ms var(--ease-out); }
@keyframes result-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.stripfinder__result h2 { text-align: center; }
.stripfinder__rationale { max-width: 60ch; margin: 0 auto var(--space-8); text-align: center; color: var(--color-text-muted); font-size: 1.0625rem; }
.stripfinder__cards {
  display: grid; gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-8);
}
@media (min-width: 768px) { .stripfinder__cards[data-cards="2"] { grid-template-columns: 1fr 1fr; } }
.stripfinder__card-role { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-weight: 700; color: var(--color-accent); margin-bottom: var(--space-2); }
.stripfinder__stack-note {
  background: var(--color-surface); border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5);
  font-size: var(--fs-body-sm); color: var(--color-text);
  max-width: 60ch; margin: 0 auto var(--space-6);
}
.stripfinder__cta { text-align: center; margin-bottom: var(--space-6); }
.stripfinder__compliance {
  font-size: var(--fs-small); color: var(--color-text-muted);
  border-top: 1px solid var(--color-border-muted);
  padding-top: var(--space-5); margin-top: var(--space-6);
  text-align: center;
}

/* =========================================================================
   Stack cards (stacks.html)
   ========================================================================= */
.stack-grid {
  display: grid; gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .stack-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .stack-grid { grid-template-columns: repeat(3, 1fr); } }
.stack-card {
  background: #fff; border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
  border-top: 4px solid var(--stack-accent, var(--color-primary));
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.stack-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stack-card[data-accent="primary"]   { --stack-accent: var(--color-primary); }
.stack-card[data-accent="secondary"] { --stack-accent: var(--color-secondary); }
.stack-card[data-accent="accent"]    { --stack-accent: var(--color-accent); }
.stack-card[data-accent="deep"]      { --stack-accent: var(--color-primary-ink); }
.stack-card__peptides { display: flex; flex-wrap: wrap; gap: 6px; }
.stack-card__peptide {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  font-size: var(--fs-eyebrow); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft); color: var(--color-accent);
}
.stack-card h3 { font-size: 1.25rem; margin-bottom: 0; }
.stack-card__cadence {
  font-family: var(--font-mono); font-size: var(--fs-small); color: var(--color-text-muted);
}
.stack-card__discussion { color: var(--color-text-muted); font-size: var(--fs-body-sm); flex: 1; }
.stack-card__warning {
  font-size: var(--fs-small); color: var(--color-text);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-accent);
}
.stack-card .btn { margin-top: var(--space-2); align-self: flex-start; }

/* =========================================================================
   Blog "Related strip" callout (under-lede card)
   ========================================================================= */
.blog-related {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
  align-items: center;
  padding: var(--space-5);
  margin-block: var(--space-6);
  background: var(--color-surface);
  border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius-sm);
}
.blog-related__img {
  background: #fff; border-radius: var(--radius-sm);
  padding: var(--space-3);
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
}
.blog-related__img img { max-height: 100%; max-width: 100%; object-fit: contain; }
.blog-related__chip {
  display: inline-block;
  font-size: var(--fs-eyebrow); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--color-secondary-dark); margin-bottom: var(--space-2);
}
.blog-related h4 { font-size: 1.125rem; margin-bottom: var(--space-1); }
.blog-related p { font-size: var(--fs-body-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.blog-related .btn--text { padding-top: 0; }
@media (min-width: 640px) { .blog-related { grid-template-columns: 140px 1fr; gap: var(--space-5); } }

/* =========================================================================
   Footer certification rail
   ========================================================================= */
.cert-rail {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-small);
  color: rgba(230, 238, 241, 0.75);
}
.cert-rail__item {
  display: inline-flex; align-items: center; gap: 6px;
}
.cert-rail__item::before {
  content: ""; width: 5px; height: 5px;
  border-radius: 50%; background: var(--color-secondary);
  flex: 0 0 auto;
}

/* =========================================================================
   Style guide (style-guide.html) — viewport demonstration scaffolding
   ========================================================================= */
.sg-section { padding-block: var(--space-12); border-top: 1px solid var(--color-border-muted); }
.sg-section h2 { font-size: 1.5rem; margin-bottom: var(--space-6); }
.sg-grid { display: grid; gap: var(--space-6); }
@media (min-width: 1100px) { .sg-grid--3 { grid-template-columns: 375px 768px 1fr; align-items: start; } }
.sg-frame {
  background: var(--color-surface);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  position: relative;
  overflow: hidden;
}
.sg-frame__label {
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--color-text-muted); margin-bottom: var(--space-3);
  display: inline-flex; gap: 8px; align-items: center;
}
.sg-frame__label::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-secondary);
}
.sg-frame__inner {
  background: #fff; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-muted);
  padding: var(--space-4);
  overflow: auto;
}
.sg-frame--375 .sg-frame__inner { max-width: 375px; margin-inline: auto; }
.sg-frame--768 .sg-frame__inner { max-width: 768px; margin-inline: auto; }
.sg-swatch {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--space-3);
  border-radius: var(--radius-sm); background: #fff;
  border: 1px solid var(--color-border-muted);
  font-size: var(--fs-small);
}
.sg-swatch__chip { width: 100%; height: 56px; border-radius: var(--radius-sm); }
.sg-swatch__name { font-weight: 600; color: var(--color-text); }
.sg-swatch__hex { font-family: var(--font-mono); color: var(--color-text-muted); }
.sg-tokens-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); }

/* =========================================================================
   Per-product testimonial rail (single rail-quote on product pages)
   ========================================================================= */
.product-testimonial {
  max-width: 720px; margin-inline: auto;
  padding: var(--space-6) var(--space-8);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--rail-accent, var(--color-secondary));
}
.product-testimonial blockquote {
  margin: 0 0 var(--space-3);
  font-size: 1.125rem; line-height: 1.55;
  font-style: italic; color: var(--color-text);
}
.product-testimonial cite {
  font-style: normal; font-size: var(--fs-small); color: var(--color-text-muted);
}
.product-testimonial cite strong { color: var(--color-text); }
.product-testimonial[data-accent="primary"]   { --rail-accent: var(--color-primary); }
.product-testimonial[data-accent="secondary"] { --rail-accent: var(--color-secondary); }
.product-testimonial[data-accent="accent"]    { --rail-accent: var(--color-accent); }
.product-testimonial[data-accent="deep"]      { --rail-accent: var(--color-primary-ink); }
.product-testimonial--placeholder {
  background: transparent;
  border-left-color: var(--color-border);
  border: 1px dashed var(--color-border);
  border-left: 4px dashed var(--color-border);
}
.product-testimonial--placeholder cite { color: var(--color-text-muted); font-style: italic; }

/* =========================================================================
   Sticky category-nav active state (services.html, blog.html)
   ========================================================================= */
.category-nav--sticky {
  position: sticky;
  top: clamp(72px, 9vh, 110px);
  z-index: 5;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  padding: 10px 14px;
  margin-block-end: var(--space-10);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.category-nav a[data-active="true"] {
  background: var(--color-primary); color: #fff; border-color: var(--color-primary);
  box-shadow: 0 1px 2px rgba(15, 76, 92, 0.18);
}
.category-nav a[data-active="true"]:hover {
  background: var(--color-primary-ink); color: #fff; border-color: var(--color-primary-ink);
}
@media (max-width: 640px) {
  .category-nav--sticky { padding: 8px 10px; border-radius: var(--radius-sm); }
}

/* =========================================================================
   Newsletter form (blog.html) — promote inline-styled form to component
   ========================================================================= */
.newsletter-form {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  align-items: stretch;
  max-width: 520px;
}
.newsletter-form input[type="email"] {
  flex: 1 1 240px; min-width: 0;
  padding: 12px 14px;
  font: inherit; font-size: var(--fs-body-sm);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm); background: #fff; color: var(--color-text);
}
.newsletter-form input[type="email"]:focus {
  outline: none; border-color: var(--color-secondary);
  box-shadow: 0 0 0 4px rgba(42,157,143,0.18);
}
.newsletter-form .btn { flex: 0 0 auto; }

/* =========================================================================
   Stat counter — visual cue when count finishes (no layout shift)
   ========================================================================= */
.stat-block__num[data-counter] { font-variant-numeric: tabular-nums; }

/* =========================================================================
   Animated nav underline (CSS-only, no JS)
   ========================================================================= */
.nav__links a, .footer-col li a {
  position: relative; display: inline-block;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav__links a:hover::after,
.nav__links a:focus-visible::after { transform: scaleX(1); }

/* =========================================================================
   Product tile image hover zoom
   ========================================================================= */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .product-tile__img { overflow: hidden; }
  .product-tile__img img { transition: transform 350ms var(--ease-out); }
  .product-tile:hover .product-tile__img img { transform: scale(1.04); }
  .showcase__featured-img { overflow: hidden; }
  .showcase__featured-img img { transition: transform 350ms var(--ease-out); }
  .showcase__featured:hover .showcase__featured-img img { transform: scale(1.04); }
}

/* =========================================================================
   Condition page — tighter mobile padding
   ========================================================================= */
@media (max-width: 767px) {
  .product-hero__img { padding: var(--space-6); }
}

/* =========================================================================
   Notify-team band (about.html) — promoted "team coming soon"
   ========================================================================= */
.notify-band {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-8), 5vw, var(--space-12));
  text-align: center;
  border: 1px solid var(--color-border-muted);
}
.notify-band h3 { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.notify-band p { color: var(--color-text-muted); max-width: 50ch; margin-inline: auto; margin-bottom: var(--space-5); }
.notify-band form {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  justify-content: center;
  max-width: 480px; margin-inline: auto;
}
.notify-band input { flex: 1 1 240px; min-width: 0; padding: 12px 14px; font: inherit; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); }

/* =========================================================================
   Zero-row — minimal editorial stat ribbon (wholesale ROI)
   No card backgrounds, no accent stripes — just numerals + labels with thin
   dividers, anchored by a top/bottom rule. Reads like a print-style stat strip.
   ========================================================================= */
.zero-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-block: var(--space-10) var(--space-8);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border-muted);
  border-bottom: 1px solid var(--color-border-muted);
  list-style: none;
}
.zero-row__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-left: 1px solid var(--color-border-muted);
}
.zero-row__item:first-child { border-left: none; }
.zero-row__num {
  font-size: clamp(2.25rem, 1.7rem + 1.6vw, 3rem);
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.zero-row__label {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: 1.4;
  max-width: 22ch;
}
@media (max-width: 700px) {
  .zero-row__item:nth-child(3) { border-left: none; }
  .zero-row__item:nth-child(n+3) {
    padding-top: var(--space-5);
    margin-top: var(--space-3);
    border-top: 1px solid var(--color-border-muted);
  }
}
@media (max-width: 380px) {
  .zero-row { grid-template-columns: 1fr; padding: var(--space-4) 0; }
  .zero-row__item {
    border-left: none;
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-border-muted);
    margin-top: 0;
  }
  .zero-row__item:first-child { border-top: none; padding-top: 0; }
  .zero-row__item:nth-child(n+3) { margin-top: 0; }
}
@media (min-width: 900px) {
  .zero-row { grid-template-columns: repeat(4, 1fr); padding: var(--space-7) 0; }
  .zero-row__item { padding-block: var(--space-2); }
}

/* =========================================================================
   Cases — editorial practitioner playbook entries (wholesale page)
   Vertical stack, numbered, no card backgrounds. Reads like a magazine
   feature: number + label, headline, narrative paragraph, pull-quote
   outcome. Thin hairline divides entries.
   ========================================================================= */
.cases {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}
.case + .case {
  margin-top: clamp(var(--space-10), 6vw, var(--space-16));
  padding-top: clamp(var(--space-10), 6vw, var(--space-16));
  border-top: 1px solid var(--color-border-muted);
}
.case__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.case__num {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: 0.08em;
  line-height: 1;
}
.case__chip {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: 700;
  color: var(--color-text-muted);
  line-height: 1;
}
.case h3 {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-5);
  color: var(--color-text);
}
.case__lead {
  font-size: 1.0625rem;
  line-height: var(--line-relaxed);
  color: var(--color-text);
  margin: 0 0 var(--space-6);
  max-width: 60ch;
}
.case__quote {
  font-size: clamp(1.125rem, 0.95rem + 0.55vw, 1.375rem);
  line-height: 1.45;
  color: var(--color-primary);
  font-style: italic;
  border-left: 2px solid var(--color-accent);
  padding: 4px 0 4px var(--space-5);
  margin: 0;
  max-width: 50ch;
}
.case__quote cite {
  display: block;
  margin-top: var(--space-3);
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* =========================================================================
   Wholesale-specific tightening — process steps less cramped at 1024-1199,
   tighter mobile rhythm
   ========================================================================= */
@media (min-width: 1024px) and (max-width: 1199px) {
  .process { grid-template-columns: repeat(2, 1fr); }
}
/* Bottom-align the wholesale application sidebar with the form's bottom edge
   so the "What you unlock" / partnerships / privacy stack reads as a related
   panel rather than floating above empty space. */
@media (min-width: 1024px) {
  #apply .contact-info { align-self: end; }
}
@media (max-width: 640px) {
  .page-hero { padding-block: clamp(60px, 9vw, 96px) clamp(40px, 6vw, 64px); }
  .page-hero h1 { font-size: clamp(2rem, 1.6rem + 2vw, 2.5rem); }
  .page-hero p { font-size: 1.0625rem; }
}

/* =========================================================================
   Consultation flow (consultation.html) — multi-step booking experience
   ========================================================================= */
.page-hero--tight { padding-block: clamp(48px, 6vw, 80px) clamp(24px, 3vw, 40px); }

.consult {
  display: grid; grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}
@media (min-width: 1024px) {
  .consult { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-12); }
}

/* ---- Stepper ------------------------------------------------------------ */
.stepper {
  list-style: none; margin: 0 0 var(--space-8); padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  position: relative;
}
.stepper__item {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-2);
  position: relative;
  cursor: default;
  padding-top: 4px;
}
.stepper__item:not(:last-child)::after {
  content: ""; position: absolute;
  top: 18px; left: calc(50% + 22px); right: calc(-50% + 22px);
  height: 2px; background: var(--color-border-muted);
  transition: background var(--dur-med) var(--ease-out);
}
.stepper__item[data-state="done"]:not(:last-child)::after,
.stepper__item[data-state="active"]:not(:last-child)::after {
  background: linear-gradient(to right, var(--color-secondary) 0%, var(--color-secondary) 50%, var(--color-border-muted) 50%);
}
.stepper__item[data-state="done"]:not(:last-child)::after {
  background: var(--color-secondary);
}
.stepper__node {
  position: relative;
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--color-border);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: 0.875rem;
  font-weight: 600; color: var(--color-text-muted);
  transition: all var(--dur-med) var(--ease-out);
  z-index: 1;
}
.stepper__check {
  display: none; color: #fff; font-weight: 700; font-size: 1rem;
}
.stepper__item[data-state="active"] .stepper__node {
  background: var(--color-primary); border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(15, 76, 92, 0.12);
}
.stepper__item[data-state="done"] .stepper__node {
  background: var(--color-secondary); border-color: var(--color-secondary);
  color: #fff;
}
.stepper__item[data-state="done"] .stepper__num { display: none; }
.stepper__item[data-state="done"] .stepper__check { display: inline; }
.stepper__item[data-state="done"] { cursor: pointer; }
.stepper__label {
  font-size: var(--fs-small); color: var(--color-text-muted);
  font-weight: 500; text-align: center;
  letter-spacing: -0.005em;
}
.stepper__item[data-state="active"] .stepper__label {
  color: var(--color-primary); font-weight: 600;
}
.stepper__item[data-state="done"] .stepper__label { color: var(--color-text); }
@media (max-width: 600px) {
  .stepper { gap: 0; }
  .stepper__label { font-size: 0.8125rem; }
  .stepper__node { width: 32px; height: 32px; font-size: 0.8125rem; }
  .stepper__item:not(:last-child)::after { top: 16px; }
}

/* ---- Steps -------------------------------------------------------------- */
.consult__form {
  background: #fff; border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 36px);
  box-shadow: var(--shadow-sm);
  display: grid; gap: var(--space-6);
  position: relative;
}
.consult-step {
  display: grid; gap: var(--space-6);
  animation: consult-step-in var(--dur-med) var(--ease-out);
}
.consult-step[data-active="false"] { display: none; }
@keyframes consult-step-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@media (prefers-reduced-motion: reduce) {
  .consult-step { animation: none; }
}
.consult-step__head { display: grid; gap: var(--space-2); }
.consult-step__count {
  font-family: var(--font-mono); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--color-accent); font-weight: 600;
}
.consult-step__title {
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2rem);
  margin: 0; letter-spacing: -0.02em;
}
.consult-step__lede {
  margin: 0; color: var(--color-text-muted);
  font-size: var(--fs-body-sm); max-width: 60ch;
}
.consult-step__sub { display: grid; gap: var(--space-3); }
.consult-step__sub-label {
  font-size: var(--fs-body-sm); font-weight: 600;
  color: var(--color-text);
}
.consult-step__sub--row {
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) {
  .consult-step__sub--row { grid-template-columns: 1fr 1fr; }
}
.consult-step__error {
  margin: 0; font-size: var(--fs-small);
  color: #B3261E; font-weight: 500;
}

/* ---- Choice cards (goal grid) ------------------------------------------- */
.choice-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-3);
}
@media (min-width: 540px) { .choice-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .choice-grid { grid-template-columns: repeat(4, 1fr); } }

.choice-card {
  position: relative; text-align: left;
  padding: var(--space-4) var(--space-5);
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.choice-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.choice-card:focus-visible {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(15, 76, 92, 0.18);
}
.choice-card__peptide {
  font-family: var(--font-mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--color-accent); font-weight: 600;
}
.choice-card__name {
  font-size: 1.125rem; margin: 0;
  letter-spacing: -0.015em;
}
.choice-card__hint {
  margin: 2px 0 0; font-size: var(--fs-small);
  color: var(--color-text-muted); line-height: 1.4;
}
.choice-card__check {
  position: absolute; top: 10px; right: 10px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-secondary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.6);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.choice-card__check svg { width: 14px; height: 14px; }
.choice-card[data-selected="true"] {
  border-color: var(--color-secondary);
  background: rgba(42, 157, 143, 0.06);
  box-shadow: 0 0 0 1px var(--color-secondary), 0 4px 14px -8px rgba(42, 157, 143, 0.5);
}
.choice-card[data-selected="true"] .choice-card__check {
  opacity: 1; transform: scale(1);
}
.choice-card--guide {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.05), rgba(217, 119, 6, 0));
  border-style: dashed;
}
.choice-card--guide .choice-card__peptide { color: var(--color-primary); }

/* ---- Chip group --------------------------------------------------------- */
.chip-group {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: #fff; border: 1.5px solid var(--color-border);
  font-size: var(--fs-small); font-weight: 500; color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.chip:focus-visible {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(15, 76, 92, 0.18);
}
.chip__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-border); flex-shrink: 0;
  transition: background var(--dur-fast);
}
.chip[data-selected="true"] {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}
.chip[data-selected="true"] .chip__dot { background: var(--color-secondary); }
.chip[data-selected="true"] .muted { color: rgba(255,255,255,0.75); }

/* ---- Format cards (phone/video) ----------------------------------------- */
.format-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-3);
}
@media (min-width: 540px) { .format-grid { grid-template-columns: 1fr 1fr; } }
.format-card {
  display: grid; grid-template-columns: auto 1fr; row-gap: 4px; column-gap: var(--space-3);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: left; cursor: pointer;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.format-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.format-card:focus-visible {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(15, 76, 92, 0.18);
}
.format-card strong { font-size: 1rem; grid-column: 2; }
.format-card__hint {
  grid-column: 2; font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.format-card__icon {
  grid-row: 1 / span 2;
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.format-card__icon svg { width: 20px; height: 20px; }
.format-card[data-selected="true"] {
  border-color: var(--color-secondary); background: rgba(42, 157, 143, 0.06);
  box-shadow: 0 0 0 1px var(--color-secondary);
}
.format-card[data-selected="true"] .format-card__icon {
  background: var(--color-secondary); color: #fff;
}

/* ---- Review summary ----------------------------------------------------- */
.review {
  margin: 0; padding: 0;
  border-top: 1px solid var(--color-border-muted);
}
.review__row {
  display: grid; grid-template-columns: 140px 1fr auto;
  gap: var(--space-4); align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-muted);
}
.review__row dt {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
}
.review__row dd {
  margin: 0; font-size: var(--fs-body-sm);
  color: var(--color-text); word-break: break-word;
}
.review__edit {
  font-size: var(--fs-small); color: var(--color-secondary-dark);
  font-weight: 600; padding: 4px 10px; border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.review__edit:hover {
  background: var(--color-surface); border-color: var(--color-border-muted);
  text-decoration: none;
}
@media (max-width: 600px) {
  .review__row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .review__row dt { grid-column: 1; }
  .review__row dd { grid-column: 1 / span 2; }
  .review__row .review__edit { grid-column: 2; grid-row: 1; }
}

/* ---- Action bar --------------------------------------------------------- */
.consult-actions {
  display: flex; gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-muted);
}
.consult-actions__spacer { flex: 1; }
.consult-actions .btn { white-space: nowrap; }
@media (max-width: 540px) {
  .consult-actions {
    position: sticky; bottom: 0;
    margin-inline: calc(-1 * clamp(20px, 3vw, 36px));
    margin-bottom: calc(-1 * clamp(20px, 3vw, 36px));
    padding: var(--space-4) var(--space-5);
    background: rgba(255,255,255,0.95);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-top: 1px solid var(--color-border-muted);
  }
}

/* ---- Aside panel -------------------------------------------------------- */
.consult-aside {
  display: grid; gap: var(--space-4);
  align-content: start;
  position: sticky; top: clamp(80px, 10vh, 120px);
}
.consult-aside__card {
  background: #fff;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.consult-aside__card--muted {
  background: var(--color-surface);
  border-color: transparent;
}
.consult-aside__card h3 {
  font-size: 1rem; margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}
.consult-aside__card p {
  margin: 0 0 6px; font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
}
.consult-aside__card a { color: var(--color-primary); font-weight: 500; }
.consult-aside__list {
  margin: 0; padding: 0; counter-reset: aside;
  display: grid; gap: var(--space-3);
  list-style: none;
}
.consult-aside__list li {
  position: relative; padding-left: 30px;
  font-size: var(--fs-body-sm); line-height: 1.5;
  color: var(--color-text-muted);
  counter-increment: aside;
}
.consult-aside__list li::before {
  content: counter(aside);
  position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.consult-aside__list strong { color: var(--color-text); }
.consult-aside__chips {
  display: grid; gap: var(--space-2);
}
.consult-aside__chips .form-trust__chip {
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: var(--fs-small);
}
@media (max-width: 1023px) {
  .consult-aside { position: static; }
}

/* =========================================================================
   FAQ page — sticky combobox search, category sections, help card
   ========================================================================= */

/* Anchor offset that accounts for sticky header + sticky search bar
   (FAQ page only — keeps deep-linked targets visible below both bars) */
.faq-section [id] { scroll-margin-top: clamp(160px, 22vh, 220px); }

/* The wrapper that contains the search control and the floating dropdown.
   Sticky pinning happens here so the input + listbox move together. */
.faq-search {
  position: sticky;
  top: clamp(72px, 9vh, 110px);
  z-index: 8;
  max-width: 720px;
  margin: 0 auto var(--space-6);
  padding: var(--space-3) 0;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-radius: var(--radius-md);
}
.faq-search__label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.faq-search__input-wrap {
  position: relative;
  display: flex; align-items: center;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.faq-search__input-wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(15, 76, 92, 0.12), var(--shadow-sm);
}
.faq-search__icon {
  width: 20px; height: 20px;
  margin-inline: 18px 0;
  color: var(--color-text-muted);
  flex: 0 0 auto;
}
.faq-search__input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  padding: 16px 12px;
  font: inherit; font-size: var(--fs-body-sm);
  color: var(--color-text);
}
.faq-search__input::placeholder { color: var(--color-text-muted); }
.faq-search__input:focus { outline: none; }
.faq-search__input::-webkit-search-decoration,
.faq-search__input::-webkit-search-cancel-button,
.faq-search__input::-webkit-search-results-button,
.faq-search__input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; }
.faq-search__clear {
  margin-inline: 6px 12px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--color-text-muted);
  flex: 0 0 auto;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast);
}
.faq-search__clear:hover { background: var(--color-surface); color: var(--color-text); }
.faq-search__clear svg { width: 16px; height: 16px; }
.faq-search__clear[hidden] { display: none; }

/* Live suggestion dropdown */
.faq-search__listbox {
  position: absolute;
  top: calc(100% - var(--space-2));
  left: 0; right: 0;
  max-height: min(60vh, 480px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 40px -12px rgba(15, 76, 92, 0.22),
              0 4px 12px -4px rgba(15, 76, 92, 0.08);
  list-style: none;
  margin: 0; padding: var(--space-2);
  animation: faq-search-pop var(--dur-med) var(--ease-out);
  z-index: 9;
}
@keyframes faq-search-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.faq-suggestion {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.faq-suggestion + .faq-suggestion { margin-top: 2px; }
.faq-suggestion:hover,
.faq-suggestion[aria-selected="true"] {
  background: var(--color-surface);
}
.faq-suggestion[aria-selected="true"] {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.faq-suggestion__head {
  display: flex; align-items: baseline;
  gap: var(--space-3);
  margin-bottom: 4px;
}
.faq-suggestion__question {
  font-weight: 600; font-size: var(--fs-body-sm);
  color: var(--color-text);
  line-height: 1.35;
  flex: 1; min-width: 0;
}
.faq-suggestion__category {
  flex: 0 0 auto;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-surface);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.faq-suggestion__snippet {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.faq-suggestion mark {
  background: rgba(124, 58, 237, 0.14);
  color: #6D28D9; /* Accent ink, WCAG AA on this bg */
  padding: 0 2px;
  border-radius: 3px;
  font-weight: 600;
}

/* Empty state */
.faq-search__empty {
  position: absolute;
  top: calc(100% - var(--space-2));
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 40px -12px rgba(15, 76, 92, 0.18);
  padding: var(--space-5) var(--space-6);
  z-index: 9;
}
.faq-search__empty p { margin: 0 0 var(--space-2); font-size: var(--fs-body-sm); color: var(--color-text); }
.faq-search__empty p:last-child { margin: 0; }
.faq-search__empty-contacts { font-size: var(--fs-small); color: var(--color-text-muted); }
.faq-search__empty-contacts a { color: var(--color-primary); font-weight: 500; }

/* Sit the category nav directly below the sticky search */
.faq-categories {
  top: calc(clamp(72px, 9vh, 110px) + 64px);
  z-index: 7;
}

/* Per-category section heading rhythm */
.faq-block { margin-top: var(--space-12); }
.faq-block:first-of-type { margin-top: var(--space-6); }
.faq-block__head {
  max-width: 820px;
  margin: 0 auto var(--space-5);
}
.faq-block__head h2 { margin: 0; }
.faq-block__head .eyebrow { margin-bottom: var(--space-2); }

/* Inline meta/disclaimer/related lines inside answers */
.faq-row__related {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border-muted);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.faq-row__related a { color: var(--color-primary); font-weight: 500; }
.faq-row__disclaimer {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.faq-row__disclaimer em { font-style: italic; }

/* Hover lift on accordion items + flash highlight on deep-link / search jump */
.faq-row { transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-med); }
.faq-row:hover { border-color: var(--color-secondary); }
.faq-row[data-flash="true"] {
  animation: faq-row-flash 1500ms var(--ease-out);
}
@keyframes faq-row-flash {
  0%   { background: rgba(42, 157, 143, 0.18); box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.18); }
  100% { background: #fff; box-shadow: var(--shadow-sm); }
}
@media (prefers-reduced-motion: reduce) {
  .faq-row[data-flash="true"] { animation: none; }
}

/* "Still have a question?" Surface card */
.faq-help {
  max-width: 820px;
  margin: var(--space-16) auto 0;
  padding: var(--space-8) var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
}
.faq-help h2 { margin-top: var(--space-2); }
.faq-help p { color: var(--color-text-muted); max-width: 60ch; }
.faq-help__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin: var(--space-5) 0;
}
.faq-help__contacts {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.faq-help__contacts a { color: var(--color-primary); font-weight: 500; }

@media (max-width: 640px) {
  .faq-search { padding: var(--space-2) 0; }
  .faq-search__icon { margin-inline: 14px 0; }
  .faq-search__input { padding: 14px 8px; font-size: 1rem; }
  .faq-suggestion__head { flex-wrap: wrap; gap: 4px; }
  .faq-categories { top: calc(clamp(72px, 9vh, 110px) + 56px); }
  .faq-help { padding: var(--space-6); border-radius: var(--radius-md); }
}

/* =========================================================================
   B2B overhaul layer — partner-first information architecture
   ========================================================================= */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.b2b-hero {
  padding-block: clamp(32px, 4vw, 64px);
  min-height: calc(100vh - 116px);
  min-height: calc(100svh - 116px);
}
.b2b-hero .hero__grid { gap: var(--space-8); align-items: center; }
@media (max-width: 640px) {
  .b2b-hero {
    min-height: calc(100vh - 96px);
    min-height: calc(100svh - 96px);
  }
}
.b2b-hero .hero__overlay {
  background:
    linear-gradient(100deg,
      rgba(7, 42, 51, 0.78) 0%,
      rgba(15, 76, 92, 0.66) 42%,
      rgba(15, 76, 92, 0.32) 72%,
      rgba(15, 76, 92, 0.12) 100%),
    radial-gradient(circle at 74% 22%, rgba(217, 119, 6, 0.22), transparent 34%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 18px);
}
.b2b-hero .hero__copy .pill { margin-bottom: var(--space-3); }
.b2b-hero .hero__copy h1 {
  max-width: 36ch;
  font-weight: 800;
  font-size: clamp(2.875rem, 2rem + 3.35vw, 4.2rem);
  line-height: 1.05;
  margin-bottom: var(--space-3);
}
.b2b-hero .hero__copy p {
  font-size: 1.0625rem;
  margin-bottom: var(--space-5);
  max-width: 56ch;
}
.b2b-hero .hero__proof {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  gap: var(--space-3) var(--space-6);
}
.hero-partner-card {
  align-self: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08)),
    rgba(7, 42, 51, 0.64);
  border: 1px solid rgba(255,255,255,0.22);
  border-top: 4px solid #FDD48F;
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 2vw, var(--space-8));
  color: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.hero-partner-card h2 {
  color: #fff;
  font-size: clamp(1.125rem, 0.9rem + 0.7vw, 1.375rem);
  margin-top: var(--space-2);
  margin-bottom: 0;
}
.hero-partner-card p,
.hero-partner-card .field label {
  color: rgba(255,255,255,0.84);
}
.hero-partner-card .field {
  gap: 6px;
}
.hero-partner-card .field input,
.hero-partner-card .field textarea {
  border-color: rgba(255,255,255,0.22);
  background: #EEF2F4;
  padding: 11px 12px;
  font-size: var(--fs-body-sm);
}
.hero-partner-card .field label {
  font-size: var(--fs-small);
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  margin-bottom: 0;
}
.hero-partner-card .form-success {
  background: rgba(253, 212, 143, 0.16);
  color: #fff;
  border-left-color: #FDD48F;
}

.mini-partner-form {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.mini-partner-form__row {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr 1fr;
}
.mini-partner-form textarea {
  min-height: 76px;
}
.mini-partner-form .btn {
  padding: 13px 18px;
  min-height: 48px;
  margin-top: var(--space-2);
}

.hero-partner-card__guarantee {
  margin: var(--space-2) 0 0;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.7);
  text-align: center;
}

.split-heading {
  display: grid;
  gap: var(--space-6);
  align-items: end;
  margin-bottom: var(--space-10);
}
.split-heading .lede {
  margin: 0;
}
@media (min-width: 900px) {
  .split-heading {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-16);
  }
}

.operator-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.operator-card,
.eligibility-card,
.insight-panel {
  background: #fff;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.operator-card,
.eligibility-card {
  position: relative;
  overflow: hidden;
}
.operator-card::before,
.eligibility-card::before {
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
}
.operator-card h3,
.eligibility-card h3,
.insight-panel h3 {
  font-size: 1.2rem;
  margin-bottom: var(--space-2);
}
.operator-card p,
.eligibility-card p,
.insight-panel p {
  color: var(--color-text-muted);
  font-size: var(--fs-body-sm);
  margin: 0;
}
.eligibility-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 700px) {
  .operator-grid,
  .eligibility-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .operator-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .eligibility-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.check-list {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.check-list li {
  position: relative;
  padding-left: 22px;
  color: var(--color-text-muted);
  font-size: var(--fs-body-sm);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 11px;
  height: 2px;
  background: var(--color-secondary);
}

.product-line-list {
  display: grid;
  gap: var(--space-8);
}
.product-line-list .product-row {
  background: #fff;
  border: 1px solid var(--color-border-muted);
  border-top: 5px solid var(--color-primary);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 5vw, var(--space-10));
  box-shadow: var(--shadow-sm);
}

.b2b-conversion {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}
.b2b-conversion > :first-child {
  position: sticky;
  top: 112px;
}
@media (max-width: 1023px) {
  .b2b-conversion > :first-child {
    position: static;
  }
}
@media (min-width: 1024px) {
  .b2b-conversion {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-16);
  }
}

.partner-hero {
  background:
    radial-gradient(circle at 85% 10%, rgba(217,119,6,0.24), transparent 34%),
    linear-gradient(160deg, #082f39 0%, var(--color-primary) 58%, #123a47 100%);
}
.partner-hero::after {
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 20px),
    radial-gradient(circle at 85% 25%, rgba(217, 119, 6,0.18), transparent 40%);
}

.partner-proof {
  background: #fff;
  border-bottom: 1px solid var(--color-border-muted);
}
.partner-proof__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding-block: var(--space-10);
}
.partner-proof__stat,
.partner-proof__quote {
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: linear-gradient(180deg, #fff, var(--color-surface));
}
.partner-proof__stat span {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(2.4rem, 2rem + 2vw, 3.8rem);
  line-height: 1;
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: -0.06em;
  margin-bottom: var(--space-3);
}
.partner-proof__stat p,
.partner-proof__quote p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-body-sm);
}
.partner-proof__quote {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.partner-proof__quote p {
  color: rgba(255,255,255,0.88);
  font-size: 1.05rem;
}
.partner-proof__quote strong {
  display: block;
  color: #FDD48F;
  margin-top: var(--space-4);
  font-size: var(--fs-small);
}
.section-image-card,
.inline-image-card {
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-muted);
  background: #fff;
  box-shadow: var(--shadow-md);
}
.section-image-card {
  margin: 0 0 var(--space-8);
}
.inline-image-card {
  margin: var(--space-6) 0;
  border-radius: var(--radius-lg);
}
.section-image-card img,
.inline-image-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.inline-image-card img {
  aspect-ratio: 16 / 10;
}
@media (min-width: 900px) {
  .partner-proof__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr);
    gap: var(--space-6);
    align-items: stretch;
  }
}

.starter-case {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
  padding: clamp(var(--space-6), 5vw, var(--space-10));
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(15,76,92,0.06), rgba(42,157,143,0.08)),
    #fff;
  border: 1px solid var(--color-border-muted);
}
.starter-case__grid {
  display: grid;
  gap: var(--space-4);
}
.starter-case__grid > div,
.next-steps-card {
  background: #fff;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.starter-case__grid h3,
.next-steps-card h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-2);
}
.starter-case__grid p {
  color: var(--color-text-muted);
  font-size: var(--fs-body-sm);
  margin: 0;
}
.next-steps-card {
  margin-top: var(--space-6);
}
.next-steps-card ol {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--color-text-muted);
  font-size: var(--fs-body-sm);
}
.next-steps-card li + li {
  margin-top: var(--space-2);
}
@media (min-width: 900px) {
  .starter-case {
    grid-template-columns: 0.85fr 1.15fr;
  }
  .starter-case__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.comparison-layout {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}
.comparison-layout__image {
  margin: 0;
}
@media (min-width: 1100px) {
  .comparison-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
    gap: var(--space-12);
  }
  .comparison-layout__image {
    position: sticky;
    top: 112px;
  }
}

.compare-cell:not([data-col])::before {
  display: none;
}

@media (max-width: 767px) {
  .compare-cell {
    display: block;
  }
  .compare-cell + .compare-cell {
    border-top: 1px solid var(--color-border-muted);
  }
}

@media (max-width: 640px) {
  .b2b-hero .hero__copy h1 {
    max-width: none;
    font-size: clamp(2.3625rem, 1.73rem + 4.1vw, 3.15rem);
  }
  .hero-partner-card {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }
  .operator-card,
  .eligibility-card,
  .insight-panel,
  .form-card {
    padding: var(--space-5);
  }
  .mini-partner-form__row {
    grid-template-columns: 1fr;
  }
  .hero-partner-card p {
    font-size: var(--fs-body-sm);
  }
  .product-line-list .product-row {
    padding: var(--space-5);
  }
}

/* =========================================================================
   Operator tabs — homepage "Built for operators" section
   Replaces the old 4-card .operator-grid with a tabbed panel.
   ========================================================================= */
.operator-tabs { margin-top: var(--space-8); }
.operator-tabs__list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border-muted);
  margin-bottom: var(--space-10);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.operator-tabs__list::-webkit-scrollbar { display: none; }
.operator-tabs__list [role="tab"] {
  padding: var(--space-3) var(--space-5);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast), background var(--dur-fast);
}
.operator-tabs__list [role="tab"]:hover {
  color: var(--color-primary);
  background: var(--color-surface);
}
.operator-tabs__list [role="tab"][aria-selected="true"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}
.operator-tabs__list [role="tab"]:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}
[data-operator-panel] {
  animation: opTabFade 240ms var(--ease-out);
}
[data-operator-panel][hidden] { display: none; }
.operator-tabs__panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 900px) {
  .operator-tabs__panel-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--space-12);
  }
}
.operator-tabs__copy h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-3);
}
.operator-tabs__copy > p {
  color: var(--color-text-muted);
  max-width: 56ch;
  margin-bottom: var(--space-5);
}
.operator-tabs__skus {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 540px) {
  .operator-tabs__skus { grid-template-columns: repeat(3, 1fr); }
}
.operator-tabs__sku {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--color-border-muted);
  color: var(--color-text);
  transition: transform var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
@media (min-width: 540px) {
  .operator-tabs__sku {
    flex-direction: column;
    text-align: center;
    padding: var(--space-4);
  }
}
.operator-tabs__sku:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.operator-tabs__sku img {
  width: 96px;
  height: auto;
  object-fit: contain;
  flex: 0 0 auto;
}
.operator-tabs__sku span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.operator-tabs__sku strong {
  font-weight: 600;
  color: var(--color-text);
}
.operator-tabs__sku em {
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
@keyframes opTabFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-operator-panel] { animation: none; }
}

/* =========================================================================
   Apply stepper — homepage "Who can apply" section
   3-step partner-journey rail with eligibility caption strip beneath.
   ========================================================================= */
.apply-stepper {
  display: grid;
  gap: var(--space-12);
}
.apply-stepper__rail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  position: relative;
  margin: 0;
  padding: 0;
}
@media (min-width: 900px) {
  .apply-stepper__rail {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
  .apply-stepper__rail::before {
    content: "";
    position: absolute;
    top: 30px;
    left: calc(16.66% + 28px);
    right: calc(16.66% + 28px);
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-secondary) 50%, var(--color-primary) 100%);
    z-index: 0;
    border-radius: 1px;
  }
}
.apply-stepper__node {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.apply-stepper__node:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.apply-stepper__num {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #fff;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  box-shadow: 0 0 0 6px var(--color-surface);
  margin-bottom: var(--space-3);
}
.apply-stepper__node h3 {
  font-size: 1.15rem;
  margin-bottom: var(--space-2);
}
.apply-stepper__node p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: var(--fs-body-sm);
}
.apply-stepper__eligibility {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  border-top: 1px solid var(--color-border-muted);
  padding-top: var(--space-6);
  font-size: var(--fs-body-sm);
}
.apply-stepper__eligibility li {
  color: var(--color-text-muted);
  display: grid;
  gap: 4px;
}
.apply-stepper__eligibility strong {
  color: var(--color-text);
  font-weight: 600;
  display: block;
}
@media (min-width: 700px) {
  .apply-stepper__eligibility {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}
@media (prefers-reduced-motion: reduce) {
  .apply-stepper__node { transition: none; }
}

/* =========================================================================
   Floating "Get Started" CTA
   ========================================================================= */
.sticky-cta {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background: rgba(11, 61, 74, 0.78);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-body-sm);
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 28px rgba(11, 61, 74, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.sticky-cta:hover,
.sticky-cta:focus-visible {
  background: rgba(11, 61, 74, 0.94);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(11, 61, 74, 0.36), 0 2px 6px rgba(0, 0, 0, 0.14);
}
.sticky-cta:focus-visible {
  outline: 2px solid #FDD48F;
  outline-offset: 3px;
}
@media (max-width: 480px) {
  .sticky-cta { padding: 10px 18px; font-size: var(--fs-small); }
}

/* =========================================================================
   Wholesale page (.wholesale-page) — full editorial overhaul
   ========================================================================= */

/* HERO ---------------------------------------------------------- */
.wholesale-page .ws-hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  padding-block: clamp(56px, 7vw, 112px);
  background:
    radial-gradient(circle at 18% 12%, rgba(217,119,6,0.16), transparent 38%),
    radial-gradient(circle at 88% 88%, rgba(42,157,143,0.18), transparent 42%),
    linear-gradient(160deg, #082f39 0%, #0F4C5C 60%, #123a47 100%);
  overflow: hidden;
}
.wholesale-page .ws-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 22px);
  z-index: -1;
  pointer-events: none;
}
.wholesale-page .ws-hero__grid {
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 980px) {
  .wholesale-page .ws-hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}
.wholesale-page .ws-hero__copy h1 {
  color: #fff;
  font-weight: 800;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 22ch;
  margin: var(--space-4) 0 var(--space-5);
  text-shadow: 0 2px 24px rgba(7, 42, 51, 0.45);
}
.wholesale-page .ws-hero__copy p {
  color: rgba(255,255,255,0.86);
  font-size: 1.125rem;
  max-width: 56ch;
  margin: 0 0 var(--space-6);
}
.wholesale-page .ws-hero__ctas {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.wholesale-page .ws-hero__chips {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.16);
}
.wholesale-page .ws-hero__chips li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-small); color: rgba(255,255,255,0.86); font-weight: 500;
}
.wholesale-page .ws-hero__chips svg { width: 16px; height: 16px; color: #FDD48F; flex: 0 0 auto; }

.wholesale-page .ws-hero__visual {
  position: relative;
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 32px 80px rgba(0,0,0,0.42);
  transform: rotate(-0.6deg);
  background: rgba(7,42,51,0.4);
}
.wholesale-page .ws-hero__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
.wholesale-page .ws-hero__visual-meta {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  display: inline-flex; gap: 6px; flex-wrap: wrap;
}
.wholesale-page .ws-hero__visual-pill {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(7, 42, 51, 0.78);
  color: #FDD48F;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  border: 1px solid rgba(253, 212, 143, 0.36);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* TIMELINE ---------------------------------------------------------- */
.wholesale-page .ws-timeline {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  position: relative;
}
.wholesale-page .ws-timeline__step {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.wholesale-page .ws-timeline__step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(15,76,92,0.22);
}
.wholesale-page .ws-timeline__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-primary), #156376);
  color: #FDD48F;
  font-family: var(--font-mono);
  font-size: 0.95rem; font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 16px rgba(15,76,92,0.22);
}
.wholesale-page .ws-timeline__step h3 {
  font-size: 1.2rem;
  margin: 0 0 var(--space-2);
}
.wholesale-page .ws-timeline__step p {
  color: var(--color-text-muted);
  font-size: var(--fs-body-sm);
  margin: 0;
}
@media (min-width: 720px) {
  .wholesale-page .ws-timeline { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .wholesale-page .ws-timeline { grid-template-columns: repeat(4, 1fr); }
  .wholesale-page .ws-timeline::before {
    content: "";
    position: absolute;
    top: calc(var(--space-6) + 22px);
    left: 8%;
    right: 8%;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(15,76,92,0.18) 0 6px, transparent 6px 12px);
    z-index: 0;
    pointer-events: none;
  }
  .wholesale-page .ws-timeline__step { z-index: 1; }
}

/* ELIGIBILITY (FIT) ---------------------------------------------------------- */
.wholesale-page .ws-fit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 720px) {
  .wholesale-page .ws-fit-grid { grid-template-columns: repeat(3, 1fr); }
}
.wholesale-page .ws-fit-card {
  background: #fff;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 2vw, var(--space-7));
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.wholesale-page .ws-fit-card::after {
  content: "";
  position: absolute;
  inset: auto -40% -50% auto;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(42,157,143,0.16), transparent 60%);
  z-index: 0;
  pointer-events: none;
}
.wholesale-page .ws-fit-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(15,76,92,0.22);
}
.wholesale-page .ws-fit-card > * { position: relative; z-index: 1; }
.wholesale-page .ws-fit-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(15,76,92,0.08), rgba(42,157,143,0.16));
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  border: 1px solid rgba(15,76,92,0.12);
}
.wholesale-page .ws-fit-card__icon svg { width: 24px; height: 24px; }
.wholesale-page .ws-fit-card h3 {
  font-size: 1.2rem; margin: 0 0 var(--space-2);
}
.wholesale-page .ws-fit-card p {
  color: var(--color-text-muted); font-size: var(--fs-body-sm); margin: 0;
}

/* STARTER CASE ---------------------------------------------------------- */
.wholesale-page .ws-starter {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-6), 4vw, var(--space-12));
  align-items: center;
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  border-radius: var(--radius-xl);
  background:
    linear-gradient(140deg, rgba(15,76,92,0.05), rgba(42,157,143,0.08)),
    #fff;
  border: 1px solid var(--color-border-muted);
  box-shadow: var(--shadow-sm);
}
.wholesale-page .ws-starter__visual {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-muted);
  box-shadow: var(--shadow-md);
  background: #fff;
}
.wholesale-page .ws-starter__visual img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.wholesale-page .ws-starter__content h2 { margin-bottom: var(--space-3); }
.wholesale-page .ws-starter__content .lede { margin-bottom: var(--space-6); }
.wholesale-page .ws-starter__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--space-4);
}
.wholesale-page .ws-starter__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-muted);
  border-left: 3px solid var(--color-accent);
}
.wholesale-page .ws-starter__list li strong {
  grid-row: 1 / span 1;
  grid-column: 1 / span 2;
  font-size: 1rem;
  color: var(--color-text);
}
.wholesale-page .ws-starter__list li span {
  grid-column: 1 / span 2;
  color: var(--color-text-muted);
  font-size: var(--fs-body-sm);
}
@media (min-width: 900px) {
  .wholesale-page .ws-starter { grid-template-columns: 0.95fr 1.05fr; }
}

/* COMPARISON ---------------------------------------------------------- */
.wholesale-page .ws-compare {
  background: #fff;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.wholesale-page .ws-compare__row {
  display: grid;
  grid-template-columns: 1fr;
}
.wholesale-page .ws-compare__row + .ws-compare__row {
  border-top: 1px solid var(--color-border-muted);
}
.wholesale-page .ws-compare__row > div {
  padding: var(--space-4) var(--space-5);
}
.wholesale-page .ws-compare__row--head { display: none; }
.wholesale-page .ws-compare__label {
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  font-size: var(--fs-body-sm);
}
.wholesale-page .ws-compare__cell {
  font-size: var(--fs-body-sm);
  position: relative;
  padding-left: calc(var(--space-5) + 22px) !important;
}
.wholesale-page .ws-compare__cell::before {
  position: absolute;
  left: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  border-radius: 999px;
  display: inline-block;
  font-size: 11px; font-weight: 700;
  text-align: center; line-height: 16px;
}
.wholesale-page .ws-compare__cell[data-cell="yes"] {
  color: var(--color-secondary-dark); font-weight: 600;
}
.wholesale-page .ws-compare__cell[data-cell="yes"]::before {
  content: "✓"; background: rgba(42,157,143,0.14); color: var(--color-secondary-dark);
}
.wholesale-page .ws-compare__cell[data-cell="no"] {
  color: var(--color-text-muted);
}
.wholesale-page .ws-compare__cell[data-cell="no"]::before {
  content: "✕"; background: rgba(179, 38, 30, 0.1); color: #B3261E;
}
.wholesale-page .ws-compare__cell[data-cell="partial"] {
  color: var(--color-accent); font-weight: 600;
}
.wholesale-page .ws-compare__cell[data-cell="partial"]::before {
  content: "~"; background: rgba(217,119,6,0.14); color: var(--color-accent);
}
@media (min-width: 768px) {
  .wholesale-page .ws-compare__row {
    grid-template-columns: 1.1fr 1fr 1fr 1fr;
  }
  .wholesale-page .ws-compare__row--head {
    display: grid;
    background: var(--color-primary);
    color: #fff;
  }
  .wholesale-page .ws-compare__row--head > div {
    color: #fff;
    font-weight: 600;
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    padding: var(--space-5);
    border-right: 1px solid rgba(255,255,255,0.18);
  }
  .wholesale-page .ws-compare__row--head > div:last-child { border-right: none; }
  .wholesale-page .ws-compare__col--ours { color: #FDD48F !important; }
  .wholesale-page .ws-compare__row:not(.ws-compare__row--head) > div + div {
    border-left: 1px solid var(--color-border-muted);
  }
  .wholesale-page .ws-compare__cell {
    display: flex; align-items: center;
  }
}

/* =========================================================================
   Mobile audit fixes (max-width queries only — desktop untouched)
   Applied after empirical Playwright audit at 320/360/375/390/414/430 widths.
   ========================================================================= */

/* --- Hide the floating "Get Started" pill on mobile.
       The .mobile-cta-bar already provides full-width "Become a Partner" +
       a Call button at the bottom; the floating pill duplicates intent and
       overlaps body text on long pages. Desktop still keeps it. -------- */
@media (max-width: 767px) {
  .sticky-cta { display: none !important; }
}

/* --- Footer: bigger tap targets on column links and contact lines ---- */
@media (max-width: 767px) {
  .footer-grid { gap: var(--space-10); padding-block: var(--space-12) var(--space-8); }
  .footer-col ul { gap: 0; }
  .footer-col li a {
    display: inline-flex;
    align-items: center;
    padding-block: 8px;
    min-height: 36px;
  }
  .footer__address { line-height: 1.85; }
  .footer__address a {
    display: inline-flex;
    align-items: center;
    padding-block: 6px;
    min-height: 32px;
  }
  .footer__socials { gap: var(--space-4); margin-top: var(--space-4); }
  .footer__socials a { width: 40px; height: 40px; }
  .footer__socials svg { width: 18px; height: 18px; }
}

/* --- Product-page breadcrumbs: easier to tap on mobile --------------- */
@media (max-width: 640px) {
  .crumbs {
    font-size: var(--fs-body-sm);
    line-height: 1.5;
    margin-bottom: var(--space-3);
  }
  .crumbs a {
    display: inline-block;
    padding: 4px 2px;
  }
}

/* --- Mobile compare table: show "vs Injections / vs Capsules" labels.
       Stacked cells get a tiny eyebrow tag inline so readers know which
       column they're looking at. On desktop the column header row is
       visible and this label is hidden via the min-width rule that
       already sets display:flex on the cells. ----------------------- */
@media (max-width: 767px) {
  .wholesale-page .ws-compare__cell {
    padding-top: var(--space-3) !important;
    padding-bottom: var(--space-3) !important;
  }
  .wholesale-page .ws-compare__cell::after {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-text-muted);
  }
  .wholesale-page .ws-compare__cell[data-cell="yes"]::after { content: "Rejuvstrip"; color: var(--color-secondary-dark); }
  .wholesale-page .ws-compare__cell[data-cell="no"]::after { content: "Injection programs"; }
  .wholesale-page .ws-compare__cell[data-cell="partial"]::after { content: "Capsules & powders"; }
  .wholesale-page .ws-compare__label {
    padding-block: var(--space-4) !important;
  }
}

/* --- Index hero partner card: tighten spacing at small phone widths --- */
@media (max-width: 480px) {
  .hero-partner-card { padding: var(--space-4) var(--space-4); }
  .hero-partner-card h2 { font-size: 1.0625rem; }
  .mini-partner-form { gap: var(--space-3); }
  .hero-partner-card .field input,
  .hero-partner-card .field textarea {
    padding: 10px 12px;
    font-size: 0.9375rem;
  }
}

/* --- Hero & final-cta CTAs: stack full-width at 380px so labels never
       truncate or wrap mid-word. Existing 480px rule applied flex 1 1 auto
       which still leaves wraps on the narrowest devices. ---------------- */
@media (max-width: 380px) {
  .hero__ctas, .final-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero__ctas .btn, .final-cta__actions .btn {
    width: 100%;
    flex: 1 1 100%;
  }
}

/* --- Services category-nav: indicate horizontal scrollability by fading
       the right edge so users see the affordance even before scrolling.
       The pills already overflow into the scroll container; this just
       hints visually on mobile. ---------------------------------------- */
@media (max-width: 767px) {
  .category-nav.category-nav--sticky {
    position: relative;
  }
  .category-nav__pills {
    scroll-padding-inline: var(--gutter);
  }
}

/* --- Mobile CTA bar: ensure long button labels don't overflow and the
       "Become a Partner →" reads cleanly even at 320px. ---------------- */
@media (max-width: 380px) {
  .mobile-cta-bar { padding-inline: var(--space-3); gap: var(--space-2); }
  .mobile-cta-bar .btn { padding: 10px 12px; font-size: 0.8125rem; }
  .mobile-cta-bar .btn--call { flex: 0 0 44px; }
}

/* --- Operator tabs at narrow widths: a touch more padding on the SKU
       cards so the stacked layout breathes; and pull tab gutter so the
       last tab doesn't visually run off-page (still horizontally
       scrollable, but the affordance lands cleanly). -------------------- */
@media (max-width: 480px) {
  .operator-tabs__list { padding-right: var(--space-4); scroll-padding-inline-end: var(--space-4); }
  .operator-tabs__sku { padding: var(--space-3); gap: var(--space-3); }
  .operator-tabs__sku img { width: 72px; }
}

/* --- Apply-stepper at small widths: tighten card padding and stack
       neatly. ---------------------------------------------------------- */
@media (max-width: 480px) {
  .apply-stepper__node { padding: var(--space-5); }
  .apply-stepper__eligibility { padding: var(--space-5); }
}

/* --- Product hero on mobile: keep image just below copy in proper order
       (HTML order is already correct: copy first, image second). Trim
       image padding container so the box image isn't squeezed. ---------- */
@media (max-width: 767px) {
  .product-hero__img { padding: var(--space-4); }
  .product-hero__img img { max-width: 80%; margin-inline: auto; }
}

/* --- Benefits grid: ensure 3 cards stack cleanly on mobile and have a
       comfortable inter-card gap. -------------------------------------- */
@media (max-width: 767px) {
  .benefits { gap: var(--space-4); }
  .benefit-item { padding: var(--space-5); }
}

/* --- Suppfacts section on product pages: keep image proportional and
       give the disclaimer enough room. ----------------------------------- */
@media (max-width: 640px) {
  .suppfacts { gap: var(--space-6); }
  .suppfacts img { max-width: 70%; margin-inline: auto; }
}

/* --- FAQ accordion: bigger tap target on summary rows so users can
       comfortably hit them with a thumb. -------------------------------- */
@media (max-width: 640px) {
  .faq-row summary,
  .faq-row > summary {
    padding-block: var(--space-4);
    min-height: 48px;
  }
}

/* --- About / two-col image+copy: extra breathing room between blocks
       on small phones. -------------------------------------------------- */
@media (max-width: 640px) {
  .two-col { gap: var(--space-8); }
  .values { gap: var(--space-4); }
  .value-card { padding: var(--space-5); }
}

/* --- Wholesale fit-grid cards: more compact padding at narrow widths,
       and crisp left-aligned icon position. ---------------------------- */
@media (max-width: 480px) {
  .ws-fit-card { padding: var(--space-5); }
  .ws-fit-card__icon { width: 40px; height: 40px; margin-bottom: var(--space-3); }
}

/* --- Wholesale timeline: stepper cards more compact ------------------- */
@media (max-width: 480px) {
  .ws-timeline__node { padding: var(--space-5); }
}

/* --- B2B conversion section: form spacing tightened, sidebar list
       compact, keep the CTA visible. ------------------------------------ */
@media (max-width: 640px) {
  .b2b-conversion__copy h2 { margin-bottom: var(--space-3); }
  .b2b-conversion .form-card { padding: var(--space-5); }
  .partner-form { gap: var(--space-3); }
}

/* --- Blog grid cards on mobile: full-width with comfortable padding,
       image proportions retained. -------------------------------------- */
@media (max-width: 767px) {
  .blog-grid { gap: var(--space-5); }
  .blog-card { padding: var(--space-4); }
}

/* --- 404 page and redirect-stub pages: center the message, give room,
       and ensure inline anchors are tappable. -------------------------- */
@media (max-width: 640px) {
  .container-narrow.center { padding-block: var(--space-12); }
  .container-narrow.center p a {
    display: inline-block;
    padding: 4px 2px;
  }
}

/* --- Drawer close button: larger tap target on mobile (desktop uses
       the existing rule at line 211 unchanged). ----------------------- */
@media (max-width: 767px) {
  .nav__drawer-close {
    align-self: flex-end;
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-text-muted);
  }
  .nav__drawer-close:hover { background: var(--color-surface); color: var(--color-text); }
}

/* --- Drawer link tap targets and visual rhythm ----------------------- */
@media (max-width: 767px) {
  .nav__drawer a:not(.btn) {
    padding-block: var(--space-3);
    font-size: 1rem;
  }
}

/* --- Section CTAs inside b2b-conversion: form submit and sidebar links
       have comfortable tap area. ---------------------------------------- */
@media (max-width: 640px) {
  .insight-panel,
  .form-card { padding: var(--space-5); }
}

/* --- Contact-info card phone/email tap targets ---------------------- */
@media (max-width: 767px) {
  .contact-info__card a {
    display: inline-flex;
    align-items: center;
    padding-block: 6px;
    min-height: 36px;
  }
}

/* --- Wholesale sidebar contact links --------------------------------- */
@media (max-width: 767px) {
  .wholesale-page .ws-apply__contact a {
    display: inline-flex;
    align-items: center;
    padding-block: 6px;
    min-height: 36px;
    font-size: 1rem;
  }
}

/* --- Blog article inline links: ensure inline anchors aren't too tight
       to tap. The .note callouts on blog articles get a touch more
       breathing room. -------------------------------------------------- */
@media (max-width: 640px) {
  .note p a {
    display: inline-block;
    padding-block: 4px;
  }
  .article p a {
    padding-block: 2px;
  }
}


/* APPLY ---------------------------------------------------------- */
.wholesale-page .ws-apply { background: var(--color-surface); }
.wholesale-page .ws-apply__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 1024px) {
  .wholesale-page .ws-apply__layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: var(--space-12);
  }
  .wholesale-page .ws-apply__sidebar {
    position: sticky;
    top: 112px;
  }
}
.wholesale-page .ws-apply__sidebar {
  display: grid;
  gap: var(--space-5);
}
.wholesale-page .ws-apply__panel {
  background: #fff;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.wholesale-page .ws-apply__panel--hero {
  background: linear-gradient(160deg, var(--color-primary), #156376);
  color: #fff;
  border-color: transparent;
  border-top: 4px solid #FDD48F;
}
.wholesale-page .ws-apply__panel--hero .eyebrow { color: #FDD48F; }
.wholesale-page .ws-apply__panel--hero .check-list li {
  color: rgba(255,255,255,0.9);
}
.wholesale-page .ws-apply__panel--hero .check-list li::before {
  background: rgba(253,212,143,0.18);
  color: #FDD48F;
}
.wholesale-page .ws-apply__panel .eyebrow { display: block; margin-bottom: var(--space-3); }
.wholesale-page .ws-apply__steps {
  list-style: none; counter-reset: ws-step;
  padding: 0; margin: var(--space-2) 0 0;
  display: grid; gap: var(--space-3);
}
.wholesale-page .ws-apply__steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px var(--space-4);
  padding-left: 36px;
  position: relative;
}
.wholesale-page .ws-apply__steps li::before {
  counter-increment: ws-step;
  content: counter(ws-step);
  position: absolute;
  left: 0; top: 0;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-muted);
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700;
  color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.wholesale-page .ws-apply__steps li strong {
  grid-column: 1 / span 2;
  font-size: 0.95rem; color: var(--color-text);
}
.wholesale-page .ws-apply__steps li span {
  grid-column: 1 / span 2;
  color: var(--color-text-muted); font-size: var(--fs-body-sm);
}
.wholesale-page .ws-apply__contact {
  display: grid; gap: 4px;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px dashed var(--color-border);
  text-align: center;
}
.wholesale-page .ws-apply__contact p {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  font-weight: 600;
}
.wholesale-page .ws-apply__contact a {
  font-size: 0.9375rem; font-weight: 600; color: var(--color-primary);
}

/* End — last reviewed 2026-05 B2B overhaul */