/* ============================================================================
   PEPPIES ATELIER — shared.css
   Design system: "Data-Luxe Members Club" — Aesop × Whoop × Linear
   Dark, hushed, precise. Hairlines, not shadows. Data IS the luxury.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ----------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------------- */

:root {
  /* ====================================================================
     LIGHT EDITION — "Atelier, in daylight". Warm ivory ground, espresso
     ink text, antique-gold accent. The token NAMES are kept (ink = surface
     ramp, bone = text/hairline alphas, brass = accent) so the whole system
     and every page inverts from these values alone. "ink" now reads light;
     "bone" now reads as warm near-black. Same hushed luxury, in daylight.
     ==================================================================== */

  /* Color — ink → surface ramp (aged manila stock; fresher sheets raise up) */
  --ink-0: #E7DDC2;            /* page ground — aged manila / newsprint stock */
  --ink-1: #F0E8D4;            /* raised surface — footer, inputs, panels */
  --ink-2: #F6EFDE;            /* card surface — a fresh clipping on the page */
  --ink-3: #FCF7EB;            /* hover surface / inset — warm near-white */

  /* Color — bone → warm sepia press-ink, as alphas (text + hairlines) */
  --bone: #241B10;             /* primary text — warm sepia near-black */
  --bone-70: rgba(36, 27, 16, 0.74);   /* secondary text */
  --bone-50: rgba(36, 27, 16, 0.62);   /* muted text */
  --bone-32: rgba(36, 27, 16, 0.50);   /* faint text, placeholders */
  --bone-18: rgba(36, 27, 16, 0.22);   /* disabled-control hairline — one step above THE hairline */
  --bone-14: rgba(36, 27, 16, 0.17);   /* THE hairline */
  --bone-08: rgba(36, 27, 16, 0.09);   /* whisper hairline / fills */
  --bone-04: rgba(36, 27, 16, 0.05);   /* surface tint */

  /* Color — accents (antique gold → faded terracotta press-red, one rare ink) */
  --brass: #A64B29;            /* faded terracotta ink: CTAs, keylines, ritual moments */
  --brass-bright: #8B3A1D;     /* deeper on hover — pressed harder into the sheet */
  --brass-dim: rgba(166, 75, 41, 0.45);
  --brass-14: rgba(166, 75, 41, 0.16);
  --brass-08: rgba(166, 75, 41, 0.09);
  --data: #4F6B34;             /* faded printed field-green: CHARTS & LIVE METRICS ONLY */
  --data-dim: rgba(79, 107, 52, 0.34);
  --data-08: rgba(79, 107, 52, 0.10);
  --alert: #A32819;            /* errors — cooler true red, distinct from the accent */
  --on-brass: #F6EFDE;         /* text/glyphs on a terracotta fill (light cream) */

  /* Hairlines */
  --hairline: 1px solid var(--bone-14);
  --hairline-soft: 1px solid var(--bone-08);
  --hairline-brass: 1px solid var(--brass-dim);

  /* ── GLASS — the three museum-vitrine grades (VITRINE DESIGN_SPEC §2.0).
     THE ONLY place web glass numbers live: tint α over the --ink hexes,
     bevel/lens/shadow α over --bone. Grade 1 vitrine = specimen/hero showpiece,
     2 case = a surface holding a live object or number, 3 plate = chrome
     (nav, sticky bars, sheets). Paper stays paper — LAW 1. Shadows are warm
     sepia (bone), never black. Same α as Vitrine.swift / AtelierGlass.kt. */
  --glass-blur: 18px;                                  /* case / vitrine */
  --glass-blur-plate: 14px;                            /* chrome */
  --glass-blur-hud: 8px;                               /* PDP capture-HUD chip (scan) over media */
  --glass-blur-hud-lg: 10px;                           /* PDP AR result chip over media */

  /* grade 1 · vitrineGlass — ink-3 @ .38 */
  --glass-vitrine-tint: rgba(252, 247, 235, 0.38);
  --glass-vitrine-vellum: rgba(252, 247, 235, 0.85);   /* no-blur floor */
  --glass-vitrine-radius: 16px;
  /* grade 2 · caseGlass — ink-2 @ .55 */
  --glass-case-tint: rgba(246, 239, 222, 0.55);
  --glass-case-vellum: rgba(246, 239, 222, 0.92);
  --glass-case-radius: 12px;
  /* grade 3 · plateGlass — ink-1 @ .62 */
  --glass-plate-tint: rgba(240, 232, 212, 0.62);
  --glass-plate-vellum: rgba(240, 232, 212, 0.94);
  --glass-plate-radius: 22px;

  /* edge-lit bevels (white specular top → bone edge) + warm lensing rim */
  --glass-bevel-hi: rgba(255, 255, 255, 0.55);         /* vitrine top specular */
  --glass-bevel-lo: rgba(36, 27, 16, 0.14);            /* vitrine bottom-trailing edge */
  --glass-bevel-case: rgba(255, 255, 255, 0.40);       /* case top hairline */
  --glass-bevel-plate: rgba(255, 255, 255, 0.60);      /* plate top edge — brightest hairline */
  --glass-lens: rgba(36, 27, 16, 0.10);                /* 1–2px inner bottom lensing shade */
  /* paired warm shadows */
  --glass-shadow-vitrine: 0 8px 18px rgba(36, 27, 16, 0.10), 0 1px 2px rgba(36, 27, 16, 0.07);
  --glass-shadow-case: 0 4px 10px rgba(36, 27, 16, 0.08);
  --glass-shadow-plate: 0 10px 24px rgba(36, 27, 16, 0.14);
  --glass-shadow-plate-up: 0 -10px 24px rgba(36, 27, 16, 0.14);  /* bottom-anchored chrome */

  /* Type */
  --font-display: 'Fraunces', 'Instrument Serif', Georgia, serif;
  --font-body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type scale (minor-third-ish, clamped) */
  --text-2xs: 0.625rem;                            /* 10 — micro labels */
  --text-xs: 0.6875rem;                            /* 11 — mono labels */
  --text-sm: 0.8125rem;                            /* 13 — captions, table data */
  --text-base: 0.9375rem;                          /* 15 — body */
  --text-md: 1.0625rem;                            /* 17 — lede body */
  --text-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);     /* 20–24 — h4/serif sub */
  --text-xl: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);       /* 24–32 — h3 */
  --text-2xl: clamp(2rem, 1.6rem + 2vw, 3rem);           /* 32–48 — h2 */
  --text-3xl: clamp(2.75rem, 2rem + 3.5vw, 4.5rem);      /* 44–72 — h1 */
  --text-4xl: clamp(3.25rem, 2.2rem + 5.5vw, 6rem);      /* 52–96 — hero stat / display */

  --leading-tight: 1.04;
  --leading-snug: 1.2;
  --leading-body: 1.65;
  --tracking-mono: 0.08em;
  --tracking-wide: 0.18em;

  /* Spacing — strict 8px rhythm */
  --s-1: 0.25rem;   /* 4  */
  --s-2: 0.5rem;    /* 8  */
  --s-3: 1rem;      /* 16 */
  --s-4: 1.5rem;    /* 24 */
  --s-5: 2rem;      /* 32 */
  --s-6: 3rem;      /* 48 */
  --s-7: 4rem;      /* 64 */
  --s-8: 6rem;      /* 96 */
  --s-9: 8rem;      /* 128 */
  --s-10: 10rem;    /* 160 */

  /* Radii — near-architectural; nothing bubbly */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* Motion — precise, never bouncy */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* arrivals, reveals */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);    /* state changes */
  --ease-linear: linear;                            /* progress, draws */
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 600ms;
  --dur-reveal: 900ms;

  /* Z-index registers */
  --z-header: 100;
  --z-orb: 150;
  --z-modal: 200;

  /* Layout */
  --container: 76rem;          /* 1216 */
  --container-narrow: 47rem;   /* 752  */
  --container-wide: 90rem;     /* 1440 */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 4.5rem;
}

/* ----------------------------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  background-color: var(--ink-0);
  /* uneven aging — a faintly brighter head, a tea-warm foot; fixed so it holds on scroll */
  background-image:
    radial-gradient(118% 82% at 12% -6%, rgba(255, 252, 242, 0.55), rgba(255, 252, 242, 0) 55%),
    radial-gradient(125% 120% at 108% 114%, rgba(120, 92, 48, 0.12), rgba(120, 92, 48, 0) 55%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--bone);
  overflow-x: clip;            /* contain scroll-reveal translateX(±24px) — no mobile horizontal jiggle */
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Paper grain — one fixed press of newsprint tooth over the whole sheet.
   Multiply keeps it as texture (never tint); pointer-events:none so it never blocks. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.52'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: multiply;
  opacity: 0.72;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
svg { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul[class], ol[class] { list-style: none; }
::selection { background: var(--brass); color: var(--on-brass); }

:focus-visible {
  outline: 1px solid var(--brass);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------------------------
   3. TYPOGRAPHY
   ---------------------------------------------------------------------------- */

h1, h2, h3, .display-1, .display-2, .display-3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.005em;
}

.display-1 { font-size: var(--text-4xl); line-height: var(--leading-tight); }
.display-2, h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); }
.display-3, h2 { font-size: var(--text-2xl); line-height: 1.1; }
h3 { font-size: var(--text-xl); line-height: var(--leading-snug); }
h4 { font-family: var(--font-body); font-weight: 500; font-size: var(--text-lg); line-height: var(--leading-snug); }

.serif { font-family: var(--font-display); font-weight: 400; }
.serif-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; }

/* Mono register — ALL numbers, prices, labels, biomarker data wear this */
.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brass);
}

.eyebrow--bone { color: var(--bone-50); }

.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--bone-50);
}

.lede {
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--bone-70);
  max-width: 38rem;
}

.small { font-size: var(--text-sm); }
.micro { font-size: var(--text-2xs); font-family: var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; }

.muted { color: var(--bone-50); }
.soft { color: var(--bone-70); }
.faint { color: var(--bone-32); }
.brass { color: var(--brass); }
.data-color { color: var(--data); }  /* charts & live metrics only */

.measure { max-width: 38rem; }
.center { text-align: center; }
.center-x { margin-left: auto; margin-right: auto; }

/* Index numerals — "01 / 02 / 03" section markers */
.index-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--bone-32);
  letter-spacing: var(--tracking-mono);
}

/* ----------------------------------------------------------------------------
   4. LAYOUT — containers, grid, section, rules
   ---------------------------------------------------------------------------- */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--s-8); }
.section--tight { padding-block: var(--s-6); }
.section--vast { padding-block: var(--s-9); }
.section--lined { border-top: var(--hairline); }

.section-head { margin-bottom: var(--s-6); }
.section-head .eyebrow { display: block; margin-bottom: var(--s-3); }

.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--gap-tight { gap: 1px; }   /* hairline-gap grids: give parent background var(--bone-14) */
.grid--gap-loose { gap: var(--s-6); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: center; }
.split--40-60 { grid-template-columns: 2fr 3fr; }
.split--60-40 { grid-template-columns: 3fr 2fr; }

.stack > * + * { margin-top: var(--s-3); }
.stack--tight > * + * { margin-top: var(--s-2); }
.stack--loose > * + * { margin-top: var(--s-5); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }
.row { display: flex; align-items: center; gap: var(--s-3); }
.row--between { justify-content: space-between; }

.rule { border: none; border-top: var(--hairline); }
.rule--brass { border-top-color: var(--brass-dim); }
.rule--soft { border-top: var(--hairline-soft); }

/* ----------------------------------------------------------------------------
   5. HEADER / NAV
   ---------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  background: rgba(231, 221, 194, 0);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-inout),
              border-color var(--dur-base) var(--ease-inout);
}

/* plateGlass chrome (GB-12): specular top edge + warm lift shadow so the nav
   reads as glass, not opaque ink0. DEFAULT is the vellum-opaque floor (GB-11a:
   opaque-when-blur-unproven). Only when the runtime rasterization probe in
   shared.js confirms backdrop-filter actually paints (canvas readback) does the
   <html> gain .glass-live and the pane drop to tint+blur — so no environment
   (incl. a capture renderer that ignores backdrop-filter) ever shows sharp
   ghost-through. @supports alone was insufficient: it reports support the
   raster pass may not honour. */
.site-header.is-scrolled {
  background: rgba(231, 221, 194, 0.98);   /* vellum floor — opaque until blur is proven */
  border-bottom-color: var(--bone-14);
  box-shadow: inset 0 1px 0 var(--glass-bevel-plate), var(--glass-shadow-plate);
}
.glass-live .site-header.is-scrolled {
  background: var(--glass-plate-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur-plate));
          backdrop-filter: blur(var(--glass-blur-plate));
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

/* Page content must clear the fixed header */
.page-offset { padding-top: var(--header-h); }

.logotype {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--bone);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
}

.logotype-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brass);
  display: inline-block;
  transform: translateY(-1px);
}

/* Inline Peppies brand mark — chip/row/tag scale variant of .logotype.
   BRAND doctrine: wherever "Peppies" stands as a brand label beside partner-lab
   names (vendor seg chip, BUY FROM source row, card brand tag) it wears the
   logo mark — lowercase display serif + the brass dot — never plain text.
   Sized in em so it inherits each context; the wordmark rides currentColor so
   it stays legible on the inactive chip (bone-50 ink), the ACTIVE brass-filled
   chip (on-brass ink), inside .on-dark islands, and under any token theme
   (light/dark both resolve through the same custom properties, so no separate
   prefers-color-scheme / [data-theme] rules are needed — the tokens carry it). */
.pp-logomark {
  font-family: var(--font-display);
  font-size: 1.2em;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: none;        /* the wordmark stays lowercase inside uppercase chips */
  color: currentColor;
  display: inline-flex;
  align-items: baseline;
  gap: 0.09em;
  vertical-align: -0.02em;
}

.pp-logomark__dot {
  width: 0.22em; height: 0.22em;
  border-radius: 50%;
  background: var(--brass);
  display: inline-block;
  transform: translateY(-1px);
  flex: none;
}

/* seg chips are tiny tracked mono caps — the serif mark needs its own optical
   size to weigh the same as its uppercase neighbours (line box stays ≤ theirs,
   so the chip row keeps one height) */
.seg__opt .pp-logomark { font-size: 1.5em; }

/* on the filled/active chip the ink inverts to on-brass — the dot follows the
   ink so it never drowns in the brass ground */
.seg__opt.is-active .pp-logomark__dot,
.seg__opt[aria-pressed="true"] .pp-logomark__dot { background: currentColor; }

.site-nav { display: flex; align-items: center; gap: var(--s-5); }

.nav-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--bone-50);
  position: relative;
  padding-block: var(--s-1);
  transition: color var(--dur-fast) var(--ease-inout);
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.nav-link:hover { color: var(--bone); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--bone); }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: var(--s-3); }

.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: var(--hairline);
  border-radius: var(--r-2);
  color: var(--bone-70);
  transition: border-color var(--dur-fast) var(--ease-inout), color var(--dur-fast) var(--ease-inout);
}

.cart-link:hover { border-color: var(--brass-dim); color: var(--bone); }
.cart-link svg { width: 16px; height: 16px; }

.cart-count {
  position: absolute;
  top: -7px; right: -7px;
  min-width: 17px; height: 17px;
  padding-inline: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  color: var(--on-brass);
  background: var(--brass);
  border-radius: var(--r-pill);
  transition: transform var(--dur-fast) var(--ease-out);
}

.cart-count.is-empty { transform: scale(0); }
.cart-count.is-ticked { transform: scale(1.25); }

/* Mobile nav toggle — two hairlines */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 40px; height: 40px;
  border: var(--hairline);
  border-radius: var(--r-2);
  padding-inline: 11px;
}

.nav-toggle span {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--bone);
  transition: transform var(--dur-base) var(--ease-inout), opacity var(--dur-base) var(--ease-inout);
}

.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ----------------------------------------------------------------------------
   6. FOOTER
   ---------------------------------------------------------------------------- */

.site-footer {
  border-top: var(--hairline);
  margin-top: var(--s-9);
  padding-block: var(--s-7) var(--s-5);
  background: var(--ink-1);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-6);
  margin-bottom: var(--s-7);
}

.footer-brand .logotype { font-size: 1.75rem; }
.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--bone-50);
  margin-top: var(--s-2);
  font-size: var(--text-lg);
  line-height: 1.3;
}

.footer-col h5 {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--bone-32);
  margin-bottom: var(--s-3);
}

.footer-col a {
  display: block;
  font-size: var(--text-sm);
  color: var(--bone-50);
  padding-block: var(--s-1);
  transition: color var(--dur-fast) var(--ease-inout);
}

.footer-col a:hover { color: var(--brass); }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  border: var(--hairline);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--bone-14);
  margin-bottom: var(--s-5);
}

.trust-badge {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3);
  background: var(--ink-1);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--bone-50);
  white-space: nowrap;
}

.trust-badge::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brass);
  flex: none;
}

.compliance {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--bone-50);
  border-left: 1px solid var(--brass-dim);
  padding-left: var(--s-4);
  max-width: 56rem;
  margin-bottom: var(--s-5);
}

.footer-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: var(--hairline-soft);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--bone-32);
}

/* ----------------------------------------------------------------------------
   7. BUTTONS
   ---------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.875rem 1.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--r-1);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-inout),
              border-color var(--dur-fast) var(--ease-inout),
              color var(--dur-fast) var(--ease-inout);
}

.btn:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

.btn--primary {
  background: var(--brass);
  color: var(--on-brass);
  border-color: var(--brass);
}

.btn--primary:hover { background: var(--brass-bright); border-color: var(--brass-bright); }
.btn--primary:active { background: var(--brass); }

/* Dormant / not-yet-live CTA (GB-06c): a built-but-off control reads as a
   designed-quiet paper placard — brass label on a faint brass-tint fill with a
   brass hairline (brass #A64B29 on manila = 4.25:1, ≥3:1) — NEVER the washed
   white-on-terracotta at ~1.8:1 that .btn--primary:disabled would give. Placed
   after .btn--primary so it wins the equal-specificity cascade, and it neutralises
   the .btn:disabled opacity wash. */
.btn--dormant,
.btn--dormant:hover,
.btn--dormant:disabled,
.btn--dormant[aria-disabled="true"] {
  background: var(--brass-08);
  border-color: var(--brass-dim);
  color: var(--brass);
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
}

/* .btn honours [hidden]: the base rule sets display:inline-flex, which (author >
   UA, equal specificity) was overriding the browser's [hidden]{display:none},
   leaving hidden buttons visible — e.g. Resume + Reactivate both showing on an
   ACTIVE subscription. Higher-specificity restore. */
.btn[hidden] { display: none; }

/* [hidden] is a semantic promise sitewide: any author display rule (flex/grid on
   summary rows, import banners, voucher rows, ...) must never resurrect a hidden
   element. This is the systemic form of the .btn[hidden] fix above - without it
   checkout painted ghost rows ("Member pricing" with no value, a zero-value
   voucher line, an empty import banner reading as a broken progress bar). */
[hidden] { display: none !important; }

.btn--secondary {
  background: transparent;
  color: var(--bone);
  border-color: var(--bone-14);
}

.btn--secondary:hover { border-color: var(--brass); color: var(--brass); }

.btn--ghost {
  background: transparent;
  color: var(--bone-70);
  border-color: transparent;
  padding-inline: var(--s-2);
  position: relative;
}

.btn--ghost::after {
  content: '';
  position: absolute;
  left: var(--s-2); right: var(--s-2); bottom: 6px;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.btn--ghost:hover { color: var(--bone); }
.btn--ghost:hover::after { transform: scaleX(1); }

.btn--lg { padding: 1.125rem 2.5rem; font-size: var(--text-sm); }
.btn--sm { padding: 0.625rem 1.125rem; font-size: var(--text-2xs); }
.btn--full { width: 100%; }

/* Arrow affordance inside buttons / links */
.btn .arrow, .text-link .arrow { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .arrow, .text-link:hover .arrow { transform: translateX(4px); }

.text-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  border-bottom: 1px solid var(--brass-dim);
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) var(--ease-inout);
}

.text-link:hover { border-color: var(--brass); }

/* ----------------------------------------------------------------------------
   8. CARDS
   ---------------------------------------------------------------------------- */

.card {
  background: var(--ink-2);
  border: var(--hairline);
  border-radius: var(--r-3);
  padding: var(--s-5);
  transition: border-color var(--dur-base) var(--ease-inout),
              background var(--dur-base) var(--ease-inout);
}

.card:hover { border-color: rgba(34, 30, 24, 0.26); }
.card--flat { background: transparent; }
.card--brass { border-color: var(--brass-dim); }
.card--brass:hover { border-color: var(--brass); }
.card--pad-tight { padding: var(--s-4); }
.card--pad-loose { padding: var(--s-6); }

.card-kicker { margin-bottom: var(--s-3); display: flex; justify-content: space-between; align-items: baseline; }

/* ----------------------------------------------------------------------------
   8b. GLASS — the vitrine material, over paper. Three utility grades that route
   ONLY through the --glass-* tokens (no page hard-codes a blur/tint/bevel/
   shadow). Reserved for chrome + specimen/live-number cases; paper content
   keeps the flat clipping idiom. No-blur floor → frosted vellum α (@supports).
   Host borders (incl. brass accents) are preserved — the utility adds the tint,
   the top specular, the lensing rim, and the paired warm shadow only.
   ---------------------------------------------------------------------------- */
.glass-vitrine, .glass-case, .glass-plate { position: relative; }

/* grade 1 · vitrineGlass — specimen cases, hero showpiece */
.glass-vitrine {
  background: var(--glass-vitrine-vellum);
  border-radius: var(--glass-vitrine-radius);
  box-shadow: var(--glass-shadow-vitrine),
              inset 0 1px 0 var(--glass-bevel-hi),
              inset 0 -2px 3px -1px var(--glass-lens);
}
/* the 1px gradient bevel stroke: white .55 (top-leading) → bone .14 (bottom-trailing) */
.glass-vitrine::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--glass-bevel-hi), var(--glass-bevel-lo));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* grade 2 · caseGlass — a surface holding a live object or number */
.glass-case {
  background: var(--glass-case-vellum);
  border-radius: var(--glass-case-radius);
  box-shadow: var(--glass-shadow-case),
              inset 0 1px 0 var(--glass-bevel-case),
              inset 0 -2px 3px -1px var(--glass-lens);
}

/* grade 3 · plateGlass — chrome panes */
.glass-plate {
  background: var(--glass-plate-vellum);
  border-radius: var(--glass-plate-radius);
  box-shadow: var(--glass-shadow-plate),
              inset 0 1px 0 var(--glass-bevel-plate),
              inset 0 -2px 3px -1px var(--glass-lens);
}

/* Blur floor (GB-11a occlusion proof): the DEFAULT is the vellum-opaque floor
   above. Only once shared.js proves — by canvas readback — that this renderer
   actually rasterizes backdrop-filter does <html> gain .glass-live and the pane
   drop to the translucent tint α, so content visibly SOFTENS under the pane
   instead of ghosting through sharp. @supports is not trusted here: a renderer
   can report support yet flatten the blur, which is exactly the anti-proof we
   are killing. */
.glass-live .glass-vitrine {
  background: var(--glass-vitrine-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur));
          backdrop-filter: blur(var(--glass-blur));
}
.glass-live .glass-case {
  background: var(--glass-case-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur));
          backdrop-filter: blur(var(--glass-blur));
}
.glass-live .glass-plate {
  background: var(--glass-plate-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur-plate));
          backdrop-filter: blur(var(--glass-blur-plate));
}

/* Membership prospectus card — clubs presented like a private members' club */
.prospectus-card {
  background: var(--ink-1);
  border: var(--hairline);
  border-radius: var(--r-3);
  padding: var(--s-6) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-inout);
}

.prospectus-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--brass), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-inout);
}

.prospectus-card:hover { border-color: var(--brass-dim); }
.prospectus-card:hover::before { opacity: 1; }
.prospectus-card .serif { font-size: var(--text-xl); line-height: var(--leading-snug); }

/* ----------------------------------------------------------------------------
   9. PRODUCT CARD
   ---------------------------------------------------------------------------- */

.product-card {
  background: var(--ink-2);
  border: var(--hairline);
  border-radius: var(--r-3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-base) var(--ease-inout);
}

.product-card:hover { border-color: rgba(34, 30, 24, 0.30); }

.product-card__media {
  aspect-ratio: 4 / 3;
  background: var(--ink-1);
  border-bottom: var(--hairline-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  position: relative;
}

.product-card__media svg { max-height: 100%; transition: transform var(--dur-slow) var(--ease-out); }
.product-card:hover .product-card__media svg { transform: translateY(-4px); }

.product-card__goal {
  position: absolute;
  top: var(--s-3); left: var(--s-3); right: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  z-index: 1; /* badges stay legible above the (transform-animated) vial art when they wrap */
}

.product-card__body {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
}

.product-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere; /* long unbroken compound names (e.g. blends) must not overflow the card */
}

.product-card__desc {
  font-size: var(--text-sm);
  color: var(--bone-50);
  flex: 1;
}

.product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: var(--hairline-soft);
  margin-top: var(--s-2);
  /* Never let price + wishlist + two buy buttons overlap in a two-up grid:
     the price block takes its own full row, controls flow beneath it. */
  flex-wrap: wrap;
  row-gap: var(--s-2);
}
.product-card__foot .shop-price { flex: 1 1 100%; }

/* PepCode ring dot — set --pep-core / --pep-outer per SKU (registry hexes only) */
.pepcode-dot {
  width: 18px; height: 18px;
  flex: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 26%),
    radial-gradient(circle, var(--pep-core) 0 38%, var(--pep-outer) 38% 78%, var(--bone-14) 78% 100%);
  box-shadow: 0 0 0 1px var(--bone-14);
}

.pepcode-dot--lg { width: 28px; height: 28px; }

/* ----------------------------------------------------------------------------
   10. PRICE DISPLAY
   ---------------------------------------------------------------------------- */

.price {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1;
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--bone);
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-1);
}

.price--lg { font-size: var(--text-xl); }
.price--xl { font-size: var(--text-2xl); font-weight: 400; }

.price__period {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--bone-50);
  letter-spacing: var(--tracking-mono);
}

.price__strike {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--bone-32);
  text-decoration: line-through;
}

.price-note {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--brass);
}

/* The subscribed price is the best deal on the shelf - let it read that way:
   brass line + a small SAVE n% chip beside it (detail panels only, grid stays calm). */
.pp-price-sub {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.pp-save-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border: 1px solid var(--brass-dim);
  border-radius: var(--r-pill);
  background: var(--brass-08);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--brass);
  white-space: nowrap;
}

/* ----------------------------------------------------------------------------
   11. BADGE / CHIP
   ---------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.25rem 0.625rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--bone-70);
  border: var(--hairline);
  border-radius: var(--r-pill);
  background: var(--ink-1);
  white-space: nowrap;
}

.badge--brass { color: var(--brass); border-color: var(--brass-dim); background: var(--brass-08); }
.badge--data { color: var(--data); border-color: var(--data-dim); background: var(--data-08); }  /* metrics only */
.badge--solid { background: var(--brass); color: var(--on-brass); border-color: var(--brass); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.5rem 0.875rem;
  font-size: var(--text-sm);
  color: var(--bone-70);
  border: var(--hairline);
  border-radius: var(--r-pill);
  background: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-inout), color var(--dur-fast) var(--ease-inout);
}

.chip:hover { border-color: var(--brass-dim); }
.chip.is-active, .chip[aria-pressed="true"] {
  border-color: var(--brass);
  color: var(--brass);
  background: var(--brass-08);
}

/* ----------------------------------------------------------------------------
   12. STATS, COUNT-UPS & CHART PRIMITIVES — the centerpiece
   ---------------------------------------------------------------------------- */

.stat { display: flex; flex-direction: column; gap: var(--s-1); }

.stat__value {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1, 'zero' 1;
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1;
  color: var(--bone);
}

.stat__value--display { font-size: var(--text-4xl); }
.stat__value--data { color: var(--data); }

.stat__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--bone-32);
}

.stat__delta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--data);
}

.stat__delta--down { color: var(--data); }   /* "down" is usually good here (weight, nausea) */
.stat__delta--warn { color: var(--alert); }

/* Stat strips: hairline-divided rows of stats */
.stat-strip {
  display: flex;
  flex-wrap: wrap;
  border-block: var(--hairline);
}

.stat-strip .stat { flex: 1 1 9rem; min-width: 0; padding: var(--s-4); border-left: var(--hairline-soft); }
.stat-strip .stat:first-child { border-left: none; }

/* Inline SVG chart conventions (emerald is reserved for these) */
.chart-line { stroke: var(--data); stroke-width: 1.5; fill: none; }
.chart-area { fill: url(#chartFade); }     /* define gradient per-page if used */
.chart-grid { stroke: var(--bone-08); stroke-width: 1; }
.chart-axis-label { font-family: var(--font-mono); font-size: 9px; fill: var(--bone-32); letter-spacing: 0.08em; }
.chart-dot { fill: var(--data); }
.chart-bar { fill: var(--data-dim); }
.chart-bar--active { fill: var(--data); }

/* Biomarker trend chip (labs panel) */
.marker-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: var(--hairline);
  border-radius: var(--r-2);
  background: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.marker-chip__name { color: var(--bone-50); text-transform: uppercase; letter-spacing: var(--tracking-mono); }
.marker-chip__value { color: var(--bone); font-weight: 500; }
.marker-chip__trend { color: var(--data); }

/* Progress hairline */
.progress {
  height: 2px;
  background: var(--bone-08);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  background: var(--brass);
  border-radius: var(--r-pill);
  transition: width var(--dur-slow) var(--ease-out);
}

.progress__fill--data { background: var(--data); }

/* ----------------------------------------------------------------------------
   12b. HEALTH TREND CARDS — the clinician console's shared-health view
        (wearable metric trends + the blood-report ledger). Token-only, so the
        .on-dark island and any future theme carry it for free. DATAVIZ LAW:
        --data emerald lives ONLY on the latest value, the trend stroke and its
        terminal dot; every other element is brass/ink/hairline.
   ---------------------------------------------------------------------------- */

.health-head { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
/* The load-bearing RUO caption — prominent, editorial, never fine print. */
.health-caption { max-width: 60ch; font-size: var(--text-md); font-style: italic; color: var(--bone-70); }

/* Client strip — mono ledger chips; accountRef is the only identity shown. */
.health-clients { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.health-client {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: var(--s-3) var(--s-4); text-align: left;
  border: var(--hairline); border-radius: var(--r-2); background: var(--ink-1);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-inout), background var(--dur-fast) var(--ease-inout);
}
.health-client:hover { border-color: var(--brass-dim); }
.health-client.is-active { border-color: var(--brass); background: var(--brass-08); }
.health-client__ref { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: .04em; color: var(--bone); }
.health-client.is-active .health-client__ref { color: var(--brass); }
.health-client__meta, .health-client__upd { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--bone-50); }

.health-placard { margin-top: var(--s-4); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--bone-50); }

/* Selected client head — ref · consent fact · updated stamp, hairline-ruled. */
.health-detail__head { margin-top: var(--s-5); padding-bottom: var(--s-3); border-bottom: var(--hairline); display: flex; flex-direction: column; gap: var(--s-1); }
.health-detail__ref { font-family: var(--font-mono); font-size: var(--text-md); letter-spacing: .04em; color: var(--bone); }
.health-detail__consent, .health-detail__updated { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--bone-50); }

/* Metric trend cards — one per metric that has points; 1-col on mobile. */
.health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.health-grid > * { min-width: 0; }
.health-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4) var(--s-5); border: var(--hairline); border-radius: var(--r-2); background: var(--ink-2); }
.health-card__label { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--bone-50); }
.health-card__reading { display: flex; align-items: baseline; gap: var(--s-2); }
.health-card__value {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1, 'zero' 1;
  font-size: var(--text-2xl); line-height: 1;
  color: var(--data);                 /* the ONE emerald number — a live metric */
}
.health-card__unit { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--bone-32); }
.health-spark { width: 100%; height: auto; display: block; }
.health-spark__line { stroke: var(--data); stroke-width: 1.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.health-spark__dot { fill: var(--data); }
.health-spark__floor { stroke: var(--bone-08); stroke-width: 1; }
.health-card__meta { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--bone-50); }
.health-card__sources { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Blood-report ledger — metadata rows only; the document itself never renders here. */
.health-blood__head { margin-top: var(--s-6); padding-top: var(--s-4); border-top: var(--hairline); }
.health-blood { margin-top: var(--s-3); display: flex; flex-direction: column; }
.health-blood__row { display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: var(--hairline-soft); }
.health-blood__date { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--bone-50); min-width: 7rem; }
.health-blood__mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.health-blood__sub { color: var(--bone); }
.health-blood__panels { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--bone-50); overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .health-grid { grid-template-columns: 1fr; }
  .health-clients { flex-direction: column; align-items: stretch; }
  .health-blood__row { flex-wrap: wrap; }
  .health-blood__date { min-width: 0; }
}

/* ----------------------------------------------------------------------------
   13. TABLES — data tables + the index listing (signature pattern)
   ---------------------------------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; }

.table th {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--bone-32);
  text-align: left;
  padding: var(--s-3) var(--s-3);
  border-bottom: var(--hairline);
}

.table td {
  padding: var(--s-3) var(--s-3);
  border-bottom: var(--hairline-soft);
  font-size: var(--text-sm);
  color: var(--bone-70);
  vertical-align: middle;
}

.table td.num, .table th.num {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1;
  text-align: right;
  color: var(--bone);
}

.table tr:hover td { background: var(--bone-04); }

.table--compact th, .table--compact td { padding: var(--s-2) var(--s-3); }

/* Index listing — table-of-contents style product rows (use alongside cards) */
.index-list { border-top: var(--hairline); }

.index-row {
  display: grid;
  grid-template-columns: 3rem 18px 1fr auto auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-2);
  border-bottom: var(--hairline);
  color: inherit;
  transition: background var(--dur-fast) var(--ease-inout), padding-left var(--dur-base) var(--ease-out);
}

.index-row:hover { background: var(--bone-04); padding-left: var(--s-3); }
.index-row__num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--bone-32); }
.index-row__name { font-family: var(--font-display); font-size: var(--text-lg); }
.index-row__meta { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--bone-32); }
.index-row__price { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--bone); text-align: right; }

/* ----------------------------------------------------------------------------
   14. TIKTOK RAIL — 9:16 cards, horizontal scroll-snap
   ---------------------------------------------------------------------------- */

.tiktok-rail {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: var(--s-2) var(--s-4);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--bone-14) transparent;
  -webkit-overflow-scrolling: touch;
}

.tiktok-rail::-webkit-scrollbar { height: 4px; }
.tiktok-rail::-webkit-scrollbar-thumb { background: var(--bone-14); border-radius: var(--r-pill); }
.tiktok-rail::-webkit-scrollbar-track { background: transparent; }

.tiktok-card {
  flex: 0 0 auto;
  width: clamp(180px, 22vw, 230px);
  aspect-ratio: 9 / 16;
  scroll-snap-align: start;
  border: var(--hairline);
  border-radius: var(--r-3);
  background: var(--ink-2);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: border-color var(--dur-base) var(--ease-inout);
  cursor: pointer;
}

.tiktok-card:hover { border-color: rgba(34, 30, 24, 0.30); }

.tiktok-card__thumb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-1);
}

.tiktok-card__thumb svg { width: 100%; height: 100%; object-fit: cover; }

.tiktok-card__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -62%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: var(--hairline);
  background: rgba(246, 239, 222, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-fast) var(--ease-inout), transform var(--dur-base) var(--ease-out);
}

.tiktok-card:hover .tiktok-card__play { border-color: var(--brass); transform: translate(-50%, -62%) scale(1.06); }

.tiktok-card__play::after {
  content: '';
  width: 0; height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--bone);
  margin-left: 3px;
}

.tiktok-card__meta {
  position: relative;
  padding: var(--s-3);
  background: linear-gradient(180deg, rgba(246, 239, 222, 0) 0%, rgba(246, 239, 222, 0.94) 45%);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.tiktok-card__handle { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--brass); letter-spacing: var(--tracking-mono); }
.tiktok-card__caption { font-size: var(--text-sm); line-height: 1.4; color: var(--bone); }
.tiktok-card__views { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--bone-50); }
.tiktok-card__tag { position: absolute; top: var(--s-3); left: var(--s-3); }

.rail-disclosure {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--bone-32);
}

/* ----------------------------------------------------------------------------
   15. FORMS
   ---------------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--s-2); }

.field__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--bone-50);
}

.field__hint { font-size: var(--text-sm); color: var(--bone-32); }
.field__error { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--alert); }

.input, .select, .textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--ink-1);
  border: var(--hairline);
  border-radius: var(--r-2);
  color: var(--bone);
  font-size: var(--text-base);
  transition: border-color var(--dur-fast) var(--ease-inout), background var(--dur-fast) var(--ease-inout);
}

.input::placeholder, .textarea::placeholder { color: var(--bone-32); }
.input:hover, .select:hover, .textarea:hover { border-color: rgba(34, 30, 24, 0.26); }

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brass);
  background: var(--ink-2);
}

.input--mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }
.textarea { min-height: 7.5rem; resize: vertical; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23221E18' stroke-opacity='.55' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* Check / radio — square-precise */
.check, .radio {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--bone-70);
}

.check input, .radio input {
  appearance: none;
  flex: none;
  width: 16px; height: 16px;
  margin-top: 2px;
  border: var(--hairline);
  background: var(--ink-1);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-inout), background var(--dur-fast) var(--ease-inout);
}

.check input { border-radius: var(--r-1); }
.radio input { border-radius: 50%; }

.check input:checked, .radio input:checked { border-color: var(--brass); background: var(--brass); }

.check input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%230A0B0D' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.radio input:checked { box-shadow: inset 0 0 0 4px var(--ink-0); }

/* Switch — pause/skip/discreet toggles */
.switch { display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; font-size: var(--text-sm); color: var(--bone-70); }

.switch input {
  appearance: none;
  width: 38px; height: 20px;
  border-radius: var(--r-pill);
  border: var(--hairline);
  background: var(--ink-1);
  position: relative;
  cursor: pointer;
  flex: none;
  transition: background var(--dur-base) var(--ease-inout), border-color var(--dur-base) var(--ease-inout);
}

.switch input::after {
  content: '';
  position: absolute;
  top: 2.5px; left: 3px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--bone-50);
  transition: transform var(--dur-base) var(--ease-inout), background var(--dur-base) var(--ease-inout);
}

.switch input:checked { background: var(--brass-14); border-color: var(--brass); }
.switch input:checked::after { transform: translateX(17px); background: var(--brass); }

/* Segmented toggle — one-time vs subscribe */
.seg {
  display: inline-flex;
  border: var(--hairline);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--ink-1);
}

.seg__opt {
  padding: 0.625rem 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--bone-50);
  border-left: var(--hairline-soft);
  transition: background var(--dur-fast) var(--ease-inout), color var(--dur-fast) var(--ease-inout);
}

.seg__opt:first-child { border-left: none; }
.seg__opt:hover { color: var(--bone); }
.seg__opt.is-active, .seg__opt[aria-pressed="true"] { background: var(--brass); color: var(--on-brass); }

/* Quantity stepper */
.qty {
  display: inline-flex;
  align-items: center;
  border: var(--hairline);
  border-radius: var(--r-2);
  overflow: hidden;
}

.qty button {
  width: 36px; height: 36px;
  font-family: var(--font-mono);
  color: var(--bone-50);
  transition: color var(--dur-fast) var(--ease-inout), background var(--dur-fast) var(--ease-inout);
}

.qty button:hover { color: var(--bone); background: var(--bone-04); }

.qty__num {
  min-width: 36px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-feature-settings: 'tnum' 1;
}

/* ----------------------------------------------------------------------------
   16. ACCORDION (native details/summary)
   ---------------------------------------------------------------------------- */

.accordion { border-top: var(--hairline); }

.accordion details { border-bottom: var(--hairline); }

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-1);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--bone-70);
  transition: color var(--dur-fast) var(--ease-inout);
}

.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--bone); }

.accordion summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--brass);
  flex: none;
  transition: transform var(--dur-base) var(--ease-inout);
}

.accordion details[open] summary { color: var(--bone); }
.accordion details[open] summary::after { transform: rotate(45deg); }

.accordion__body {
  padding: 0 var(--s-1) var(--s-4);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--bone-50);
  max-width: 42rem;
}

/* ----------------------------------------------------------------------------
   17. MODAL
   ---------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
}

.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 24, 18, 0.48);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 30rem;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--ink-1);
  border: var(--hairline);
  border-radius: var(--r-3);
  padding: var(--s-6) var(--s-5);
  animation: modal-in var(--dur-base) var(--ease-out);
}

.modal__panel--wide { max-width: 44rem; }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal__close {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--hairline);
  border-radius: var(--r-2);
  color: var(--bone-50);
  font-family: var(--font-mono);
  transition: color var(--dur-fast) var(--ease-inout), border-color var(--dur-fast) var(--ease-inout);
}

.modal__close:hover { color: var(--bone); border-color: var(--brass-dim); }

body.modal-open { overflow: hidden; }

/* ----------------------------------------------------------------------------
   18. SCROLL REVEAL — [data-reveal]
   ---------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal].revealed { opacity: 1; transform: translateY(0); }

[data-reveal="fade"] { transform: none; }

[data-reveal="left"] { transform: translateX(-24px); }
[data-reveal="left"].revealed { transform: translateX(0); }

[data-reveal="right"] { transform: translateX(24px); }
[data-reveal="right"].revealed { transform: translateX(0); }
/* On mobile, horizontal reveals would push past the viewport — slide vertically instead (no horizontal overflow) */
@media (max-width: 768px) {
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(16px); }
  [data-reveal="left"].revealed, [data-reveal="right"].revealed { transform: none; }
}

/* Hairline that draws itself across — signature reveal */
[data-reveal="line"] {
  transform: none;
  opacity: 1;
  position: relative;
  border: none !important;
  height: 1px;
  background: transparent;
  overflow: hidden;
}

[data-reveal="line"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bone-14);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1200ms var(--ease-out);
}

[data-reveal="line"].revealed::after { transform: scaleX(1); }

[data-reveal="line-brass"] {
  transform: none;
  opacity: 1;
  height: 1px;
  position: relative;
  overflow: hidden;
}

[data-reveal="line-brass"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--brass), var(--brass-dim));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1200ms var(--ease-out);
}

[data-reveal="line-brass"].revealed::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-reveal="line"]::after, [data-reveal="line-brass"]::after { transform: scaleX(1) !important; }
}

/* ----------------------------------------------------------------------------
   19. VOICE ORB — "Hey Peppy" (markup injected by shared.js)
   ---------------------------------------------------------------------------- */

.peppy {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-orb);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
  transition: bottom var(--dur-base) var(--ease-out);
}

/* On narrow screens the fixed purchase sticky-bar (~86px, bottom:0) collides with
   the orb over the ADD TO CART control. When such a bar is visible, lift the orb
   clear of it (GB-10/craft, mobile overflow fix). */
@media (max-width: 600px) {
  body:has(.sticky-bar.is-visible) .peppy { bottom: calc(86px + 1rem); }
}

.peppy__chip {
  max-width: 17rem;
  padding: var(--s-2) var(--s-3);
  background: var(--ink-1);
  border: var(--hairline);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--bone-70);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}

.peppy__chip.is-visible { opacity: 1; transform: translateY(0); }
.peppy__chip strong { color: var(--brass); font-weight: 500; }

.peppy__orb {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--brass-dim);
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle at 50% 60%, rgba(166, 75, 41, 0.30) 0%, rgba(166, 75, 41, 0.08) 60%),
    var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-inout), transform var(--dur-base) var(--ease-out);
}

.peppy__orb:hover { border-color: var(--brass); transform: translateY(-2px); }
.peppy__orb:focus-visible { outline: 1px solid var(--brass); outline-offset: 4px; }

.peppy__core {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 14px rgba(166, 75, 41, 0.45);
  transition: transform var(--dur-base) var(--ease-inout);
}

.peppy__ring {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--brass);
  opacity: 0;
  pointer-events: none;
}

.peppy__orb.is-listening { border-color: var(--brass); }
.peppy__orb.is-listening .peppy__core { transform: scale(1.5); }
.peppy__orb.is-listening .peppy__ring { animation: peppy-pulse 1.8s var(--ease-out) infinite; }

.peppy__orb.is-speaking .peppy__core { animation: peppy-breathe 1.2s var(--ease-inout) infinite alternate; }

@keyframes peppy-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.65); opacity: 0; }
}

@keyframes peppy-breathe {
  from { transform: scale(1); }
  to { transform: scale(1.4); }
}

.peppy__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--bone-32);
  user-select: none;
}

/* ----------------------------------------------------------------------------
   20. UTILITIES
   ---------------------------------------------------------------------------- */

.mt-1 { margin-top: var(--s-1); }  .mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }  .mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }  .mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }  .mt-8 { margin-top: var(--s-8); }
.mb-1 { margin-bottom: var(--s-1); } .mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); }

.hidden { display: none !important; }
.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;
}

.surface { background: var(--ink-1); }
.surface-2 { background: var(--ink-2); }
.bordered { border: var(--hairline); border-radius: var(--r-3); }

/* Dark island — for device/scan mockups that are rendered as dark scenes.
   Re-declares the original dark palette in this subtree so token-based overlays
   (AR readouts, scan status) read light-on-dark, presented as a deliberate dark
   "plate" within the daylight page. */
.on-dark {
  --ink-0: #17120B;            /* warm espresso — a dark printed plate, not digital black */
  --ink-1: #1E180F;
  --ink-2: #251E13;
  --ink-3: #2E2616;
  --bone: #F0E7D4;             /* warm paper-white ink on the dark plate */
  --bone-70: rgba(240, 231, 212, 0.72);
  --bone-50: rgba(240, 231, 212, 0.52);
  --bone-32: rgba(240, 231, 212, 0.34);
  --bone-18: rgba(240, 231, 212, 0.20);
  --bone-14: rgba(240, 231, 212, 0.16);
  --bone-08: rgba(240, 231, 212, 0.09);
  --bone-04: rgba(240, 231, 212, 0.05);
  --brass: #D98A5A;            /* terracotta, lifted so it glows on espresso */
  --brass-bright: #E9A879;
  --brass-dim: rgba(217, 138, 90, 0.42);
  --brass-14: rgba(217, 138, 90, 0.16);
  --brass-08: rgba(217, 138, 90, 0.09);
  --data: #93B36B;             /* printed field-green, lifted for the dark plate */
  --data-dim: rgba(147, 179, 107, 0.34);
  --data-08: rgba(147, 179, 107, 0.12);
  --alert: #E0704E;
  --on-brass: #17120B;
  color: var(--bone);
}

/* Sticky purchase bar (PDP) — plateGlass chrome. Bright top edge is the
   specular; the warm upward shadow lifts it above the page; under @supports it
   drops to the plate tint so the rows beneath visibly blur (GB-11 occlusion
   proof) instead of ghosting through a near-opaque plate. */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: calc(var(--z-orb) - 10);
  background: var(--glass-plate-vellum);   /* vellum floor — opaque until blur is proven */
  border-top: 1px solid var(--glass-bevel-plate);
  box-shadow: var(--glass-shadow-plate-up), inset 0 -2px 3px -1px var(--glass-lens);
  padding: var(--s-3) 0;
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
}
/* Occlusion proof (GB-11a): blur only behind the runtime rasterization probe. */
.glass-live .sticky-bar {
  background: var(--glass-plate-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur-plate));
          backdrop-filter: blur(var(--glass-blur-plate));
}

.sticky-bar.is-visible { transform: translateY(0); }

/* ----------------------------------------------------------------------------
   20b. PROTOCOL RAILS — catalogue / cause-finder / builder / subscriptions
        (protocol.js renders into these; all token-based, hairline depth)
   ---------------------------------------------------------------------------- */

.input--lg { font-size: var(--text-md); padding: var(--s-3) var(--s-4); }

/* Systemic: grid children must be allowed to shrink below content min-size so 1fr
   tracks never force horizontal overflow on narrow viewports. */
.grid > * { min-width: 0; }

/* Account gate */
.pp-gate { border: var(--hairline); border-radius: var(--r-2); padding: var(--s-4); background: var(--ink-1); }
.pp-gate.is-verified { border-color: var(--brass-14); background: var(--brass-08); }
.pp-gate__head { display: flex; align-items: baseline; gap: var(--s-3); justify-content: space-between; flex-wrap: wrap; }
.pp-gate__status { font-family: var(--font-mono); font-size: var(--text-sm); }
.pp-gate__types { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0; }

/* SKU card */
.pp-sku, .pp-sub, .pp-cf__card { min-width: 0; }   /* let 1fr grid tracks shrink below content */
.pp-sku { display: flex; flex-direction: column; gap: var(--s-2); }
.pp-sku .row--between, .pp-cf__meta { flex-wrap: wrap; gap: var(--s-2); }
/* break-word + hyphens, never `anywhere`: `anywhere` split mid-word with no
   hyphen ("Recompositio / n") on the subscription card titles. */
.pp-sku__name, .pp-sub__name, .pp-cf__name { overflow-wrap: break-word; hyphens: auto; }
.pp-sku__name { font-family: var(--font-display); font-size: var(--text-md); line-height: 1.1; }
.pp-sku__price { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.pp-sku__foot { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: auto; padding-top: var(--s-2); }
.pp-sku[data-tier="research-institution-only"] { border-color: var(--alert); }
.pp-sku[data-tier="cosmetic-consumer"] { border-color: var(--brass-14); }
.pp-flash { color: var(--brass); font-family: var(--font-mono); }

/* Compound cards — rich "smart vial" product-card + pick concentration(s) (r-phase style) */
.pp-cmpd { min-width: 0; }   /* layout governed by .product-card */
.pp-cmpd .pp-cmpd__lbl { margin-top: var(--s-2); }
.pp-cmpd .pp-buy { border-top: var(--hairline-soft); }
/* price + PepCode disc inline (used by all renderer-driven pages, not only the homepage) */
.home-shop__price { display: inline-flex; align-items: center; gap: var(--s-2); }
/* cap the vial so tiles are short + scannable (more above the fold) */
.pp-cmpd .product-card__media { height: 184px; min-height: 0; display: flex; align-items: center; justify-content: center; padding: var(--s-3) 0; overflow: hidden; }
.pp-cmpd .product-card__media svg { height: 100%; width: auto; max-width: 100%; }
/* clean clickable tile */
.pp-cmpd--tile { cursor: pointer; transition: border-color var(--dur-base) var(--ease-out); }
.pp-cmpd--tile:hover, .pp-cmpd--tile:focus-visible { border-color: var(--brass); outline: none; }
.pp-cmpd--tile .pp-cmpd__why { color: var(--bone-50); font-size: var(--text-sm); }
.pp-cmpd__tilefoot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-3); }
.pp-cmpd__go { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-mono); color: var(--brass); white-space: nowrap; }
/* focused compound detail (in the modal) */
.pp-cdetail { display: flex; flex-direction: column; gap: var(--s-5); }
.pp-cdetail__top { display: grid; grid-template-columns: 168px 1fr; gap: var(--s-5); align-items: start; }
.pp-cdetail__media { display: flex; align-items: flex-start; justify-content: center; }
.pp-cdetail__media svg { width: 100%; height: auto; max-height: 300px; }
.pp-cdetail__body { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.pp-cdetail__name { margin: var(--s-1) 0 0; }
.pp-cdetail__class { color: var(--bone-70); }
/* full peptidebase research profile (r-phase style) */
.pp-cdetail__research { display: flex; flex-direction: column; gap: var(--s-4); border-top: var(--hairline); padding-top: var(--s-5); }
.pp-rsec { display: flex; flex-direction: column; gap: var(--s-2); }
.pp-rsec__h { margin: 0; }
.pp-rsec p { margin: 0; color: var(--bone-70); }
.pp-rspecs { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.pp-rspec { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-rlist { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 4px; color: var(--bone-70); }
.pp-rstacks { display: grid; gap: var(--s-2); }
.pp-rstack { display: flex; flex-direction: column; gap: 2px; border: var(--hairline); border-radius: var(--r-2); padding: var(--s-2) var(--s-3); }
.pp-rfaq { display: flex; flex-direction: column; }
.pp-rfaq__item { border-bottom: var(--hairline-soft); padding: var(--s-2) 0; }
.pp-rfaq__item summary { cursor: pointer; color: var(--bone); }
.pp-rfaq__item p { margin: var(--s-2) 0 0; }
.pp-rcite { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; color: var(--bone-50); }
.pp-rnote { margin: var(--s-2) 0 0; }
@media (max-width: 540px) { .pp-cdetail__top { grid-template-columns: 1fr; } .pp-cdetail__media { max-width: 150px; margin: 0 auto; } }
/* colourful vial "shelf" — brand hero imagery */
.pp-shelf { display: flex; align-items: center; justify-content: center; }
.pp-shelf__v { width: 104px; flex: 0 0 auto; margin-left: -16px; }
.pp-shelf__v:first-child { margin-left: 0; }
.pp-shelf__v svg { width: 100%; height: auto; display: block; }
.pp-shelf__v:nth-child(1) { transform: translateY(10px) rotate(-2.5deg); }
.pp-shelf__v:nth-child(2) { transform: translateY(-16px) rotate(1deg); z-index: 2; }
.pp-shelf__v:nth-child(3) { transform: translateY(4px) rotate(-1deg); }
.pp-shelf__v:nth-child(4) { transform: translateY(-12px) rotate(2deg); z-index: 2; }
.pp-shelf__v:nth-child(5) { transform: translateY(8px) rotate(-1.5deg); }
.pp-shelf__v:nth-child(6) { transform: translateY(-6px) rotate(2.5deg); }
@media (max-width: 900px) { .pp-shelf__v { width: 78px; margin-left: -12px; } }
@media (max-width: 480px) { .pp-shelf__v { width: 58px; margin-left: -8px; } }
.pp-cmpd[data-tier="research-institution-only"] { border-color: var(--alert); }
.pp-cmpd[data-tier="cosmetic-consumer"] { border-color: var(--brass-14); }
/* the alert border alone read as an error state - the tier badge names WHY the
   card is marked (Institution-only / RUO restricted), same strings as the modal */
.badge--tier { color: var(--alert); border-color: currentColor; opacity: .9; }
.pp-cmpd__concs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-1) 0 var(--s-2); }
.pp-conc { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
  padding: 5px 11px; border: var(--hairline); border-radius: 999px; background: transparent; color: var(--bone-70);
  cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.pp-conc:hover { border-color: var(--brass-14); color: var(--bone); }
.pp-conc.is-active { border-color: var(--brass); color: var(--brass); background: var(--brass-08); }

/* ═══ ORDER AS — the ONE unit choice (vial / 10-box / subscribe) ══════════
   Drives the ONE hero price and the ONE buy action (the old three-price block
   + three-button footer are retired). Same pill grammar as the concentration
   chips so the two choices read as one system; the subscribe pill carries its
   live −n% as a quiet brass hint. Uppercased mono, brass only when chosen. */
.pp-mode { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-1) 0 var(--s-2); }
.pp-mode__opt {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 7px 14px; border: var(--hairline); border-radius: 999px; background: transparent; color: var(--bone-70);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.pp-mode__opt:hover { border-color: var(--brass-14); color: var(--bone); }
.pp-mode__opt:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }
.pp-mode__opt.is-active { border-color: var(--brass); color: var(--brass); background: var(--brass-08); }
.pp-mode__save { font-size: 10px; letter-spacing: .06em; color: var(--brass); }

/* detail-panel HERO price — ONE figure that follows the chosen mode + source,
   with its quiet mono arithmetic subline (box→per-vial equiv · lab→all-in math) */
.pp-cmpd__price { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pp-cmpd__pricenote {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .02em;
  color: var(--bone-50); font-variant-numeric: tabular-nums;
}
.pp-cmpd__tier { margin-top: calc(-1 * var(--s-1)); }

/* Common buy footer (peptides + subscriptions): RUO items show a required acknowledgement checkbox */
.pp-buy { display: flex; flex-direction: column; gap: var(--s-2); margin-top: auto; padding-top: var(--s-3); border-top: var(--hairline-soft); }
.pp-buy .cluster { flex-wrap: wrap; gap: var(--s-2); }
.pp-ack { display: flex; align-items: flex-start; gap: var(--s-2); cursor: pointer; }
.pp-ack > input { margin-top: 2px; flex-shrink: 0; }
.pp-ack > span { color: var(--bone-70); line-height: 1.35; }

/* Progressive disclosure — collapse verbose explainers; show only on demand */
details.pp-more { border: var(--hairline); border-radius: var(--r-2); margin-top: var(--s-4); }
details.pp-more > summary { list-style: none; cursor: pointer; padding: var(--s-3) var(--s-4);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--bone-70); display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
details.pp-more > summary::-webkit-details-marker { display: none; }
details.pp-more > summary::after { content: '+'; font-family: var(--font-mono); color: var(--brass); }
details.pp-more[open] > summary::after { content: '\2212'; }
details.pp-more > summary:hover { color: var(--bone); }
details.pp-more__body, details.pp-more > .pp-more__body { padding: 0 var(--s-4) var(--s-4); }

/* Full-screen concierge — dedicated find-your-protocol screen (matches the Atelier system) */
body.pp-finder-open { overflow: hidden; }
.pp-finder { position: fixed; inset: 0; z-index: 2000; background: var(--ink-0); display: flex; flex-direction: column; }
.pp-finder__bar { border-bottom: var(--hairline); flex-shrink: 0; }
.pp-finder__barinner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: var(--s-3); }
.pp-finder__title { display: flex; align-items: baseline; gap: var(--s-3); }
.pp-finder__close { background: none; border: none; font-size: 26px; line-height: 1; color: var(--bone-50); cursor: pointer; padding: 0 var(--s-1); }
.pp-finder__close:hover { color: var(--bone); }
.pp-finder__scroll { flex: 1; overflow-y: auto; padding: var(--s-6) 0 var(--s-8); }
.pp-finder__inner { display: flex; flex-direction: column; gap: var(--s-6); }
.pp-finder__greet { padding-top: var(--s-4); }
.pp-finder__h { margin: var(--s-2) 0; }
.pp-finder__examples { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.pp-finder__user { display: flex; justify-content: flex-end; }
.pp-finder__bubble { background: var(--brass-08); border: 1px solid var(--brass-14); border-radius: var(--r-2);
  padding: var(--s-2) var(--s-4); font-family: var(--font-mono); font-size: var(--text-sm); max-width: 80%; overflow-wrap: anywhere; }
.pp-finder__answer { display: flex; flex-direction: column; gap: var(--s-5); border-top: var(--hairline-soft); padding-top: var(--s-6); }
.pp-finder__disclaimer { border: var(--hairline); border-left: 2px solid var(--brass); border-radius: var(--r-2); padding: var(--s-3) var(--s-4); }
.pp-finder__disclaimer p { margin: 0; color: var(--bone-50); text-transform: none; }
.pp-finder__lead { margin: 0; color: var(--bone); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.25; max-width: 26ch; }
.pp-finder__subhead { margin: var(--s-1) 0 0; color: var(--bone-70); font-size: var(--text-sm); max-width: 56ch; }
.pp-finder__trust { margin: var(--s-3) 0 0; color: var(--bone-50); font-size: var(--text-2xs); font-family: var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; }
.pp-finder__sec { font-size: var(--text-lg); margin: var(--s-3) 0 0; }
/* roomy 2-up result grid (hims-calm: fewer, larger, more breathing room) */
.pp-finder__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--s-5); }
/* subscription "kit": the compounds inside, shown as floating mini vials */
.pp-vkit { display: flex; align-items: flex-end; padding: var(--s-1) 0 var(--s-3); min-height: 92px; }
.pp-mvial { width: 38px; height: auto; margin-left: -10px; }
.pp-mvial:first-child { margin-left: 0; }
.pp-vkit__more { align-self: center; margin-left: var(--s-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--bone-50); }
/* end-of-results "Information" block — required text kept out of the way */
.pp-finder__info { border-top: var(--hairline); padding-top: var(--s-4); margin-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); }
.pp-finder__info p { margin: 0; color: var(--bone-50); max-width: 70ch; }
/* compound card: "studied for" match reason + compact session-level RUO ack */
.pp-cmpd__why { margin: 0; color: var(--bone-70); font-size: var(--text-sm); }
.pp-ack-line { display: flex; align-items: center; min-height: 1.4em; }
.pp-ack-done { color: var(--brass); }
.pp-finder__compose { border-top: var(--hairline); padding: var(--s-3) 0; background: var(--ink-0); flex-shrink: 0; }
.pp-finder__composerow { display: flex; gap: var(--s-3); }
.pp-finder__input { flex: 1; min-width: 0; }
@media (max-width: 540px) { .pp-finder__bubble { max-width: 100%; } .pp-finder__compose .btn { padding-inline: var(--s-3); } }

/* Subscription "what ships & when" detail + modal */
.pp-sub__namebtn { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.pp-sub__namebtn:hover { color: var(--brass); }
.pp-sub__view { align-self: flex-start; background: none; border: none; cursor: pointer; padding: 0; margin-top: var(--s-1); }
.pp-modal { position: fixed; inset: 0; z-index: 2100; background: rgba(28, 24, 18, .55); display: flex; align-items: flex-start; justify-content: center; padding: var(--s-6) var(--s-4); overflow-y: auto; }
body.pp-modal-open { overflow: hidden; }
.pp-modal__sheet { position: relative; width: 100%; max-width: 640px; background: var(--ink-0); border: var(--hairline); border-radius: var(--r-2); padding: var(--s-6); }
.pp-modal__sheet:has(.pp-cdetail) { max-width: 760px; }
.pp-modal__sheet:has(.pp-builder) { max-width: 940px; }
.pp-modal__close { position: absolute; top: var(--s-3); right: var(--s-4); background: none; border: none; font-size: 26px; line-height: 1; color: var(--bone-50); cursor: pointer; }
.pp-modal__close:hover { color: var(--bone); }
.pp-subdetail { display: flex; flex-direction: column; gap: var(--s-3); }
.pp-subdetail__name { margin: var(--s-1) 0 0; }
.pp-subdetail__h { font-size: var(--text-lg); margin: var(--s-3) 0 0; }
.pp-sched { display: flex; flex-direction: column; }
.pp-sched__row { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s-3); padding: var(--s-3) 0; border-top: var(--hairline-soft); }
.pp-sched__row:first-child { border-top: none; }
.pp-sched__when { display: flex; flex-direction: column; gap: 1px; font-family: var(--font-mono); letter-spacing: var(--tracking-wide); }
.pp-sched__wk { font-size: var(--text-xs); color: var(--brass); }
.pp-sched__date { font-size: var(--text-2xs); color: var(--bone-50); }
.pp-sched__more { padding: var(--s-2) 0; border-top: var(--hairline-soft); }
/* segmented cadence control */
.pp-seg { display: inline-flex; border: var(--hairline); border-radius: var(--r-2); overflow: hidden; margin: var(--s-2) 0 var(--s-1); }
.pp-seg__btn { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: var(--s-2) var(--s-4); background: none; border: none; border-left: var(--hairline); cursor: pointer; color: var(--bone-50); transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.pp-seg__btn:first-child { border-left: none; }
.pp-seg__btn:hover { color: var(--ink-0); }
.pp-seg__btn.is-active { background: var(--brass); color: var(--on-brass); }
.pp-sched__what { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.pp-sched__line { display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; }
.pp-sched__tag { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--bone-50); border: var(--hairline); border-radius: 999px; padding: 1px 8px; flex-shrink: 0; }
.pp-sched__tag--draw { color: var(--data); border-color: var(--data); }
@media (max-width: 540px) { .pp-modal { padding: var(--s-3); } .pp-modal__sheet { padding: var(--s-4); } .pp-sched__row { grid-template-columns: 1fr; gap: var(--s-1); } }

/* Catalogue controls */
.pp-cat__controls { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-4); }
.pp-cat__grid { margin-top: var(--s-3); }
/* Compound selector (0,2,0) wins over .grid--3 at every width — fully fluid, no overflow */
.pp-cat__grid.grid--3, .pp-subs__grid.grid--3 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}

/* Subscription cards */
.pp-sub { display: flex; flex-direction: column; gap: var(--s-2); }
.pp-sub__name { margin: 0; font-size: var(--text-lg); }
.pp-sub__meta { margin: var(--s-2) 0; }
/* Compact, full-width stat rows (label left, value right) — fits "12 weeks"/"€1817.27" in narrow cards */
.pp-sub__meta .stat { flex: 1 1 100%; flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  border-left: none; border-top: var(--hairline-soft); padding: var(--s-2) 0; }
.pp-sub__meta .stat:first-child { border-top: none; }
.pp-sub__meta .stat__value { font-size: var(--text-md); order: 2; }
.pp-sub__meta .stat__label { order: 1; }
.pp-sub__foot { margin-top: auto; padding-top: var(--s-3); }

/* ---- fixed-price presentation (owner model 2026-07-09): ONE printed number +
   an "Included in the price" manifest. Mono tabular numerals carry the ledger;
   brass appears only on the counts and the section kicker — data as luxury. ---- */
.pp-sub__price { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-1); }
.pp-sub__price-num {
  font-family: var(--font-mono); font-weight: 500; font-size: 1.625rem; line-height: 1;
  color: var(--bone); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.pp-sub__price-num--lg { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); }
.pp-sub__price-cap {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--bone-50);
}
.pp-sub__inc { margin-top: var(--s-2); }
.pp-sub__inc-h {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--brass); padding: var(--s-2) 0 var(--s-1);
  border-top: var(--hairline-soft);
}
.pp-sub__row { display: flex; gap: var(--s-3); align-items: baseline; padding: var(--s-2) 0; border-top: var(--hairline-soft); }
.pp-sub__n {
  flex: none; min-width: 1.6ch; text-align: right;
  font-family: var(--font-mono); font-weight: 500; font-size: var(--text-md);
  color: var(--brass); font-variant-numeric: tabular-nums;
}
.pp-sub__what { min-width: 0; }
.pp-sub__k { font-size: var(--text-sm); color: var(--bone); line-height: 1.35; }
/* the caption under a manifest line: quiet body serif — never mono caps (too loud in a 4-line wrap) */
.pp-sub__d { font-family: var(--font-body); font-size: var(--text-sm); font-style: italic; color: var(--bone-50); margin-top: 1px; line-height: 1.4; }
/* detail modal: the fixed number printed large between two hairlines, facts in mono under it */
.pp-subdetail__price {
  display: flex; flex-direction: column; gap: var(--s-1);
  margin-top: var(--s-2); padding: var(--s-3) 0;
  border-top: var(--hairline-soft); border-bottom: var(--hairline-soft);
}
.pp-subdetail__facts {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--bone-70); margin: var(--s-1) 0 0;
}

/* Cause-finder */
.pp-cf__form { display: flex; gap: var(--s-3); margin-bottom: var(--s-3); }
.pp-cf__form .input { flex: 1; }
.pp-cf__examples { margin-bottom: var(--s-5); }
.pp-cf__card { display: flex; flex-direction: column; gap: var(--s-2); }
.pp-cf__name { font-family: var(--font-display); font-size: var(--text-md); }
.pp-cf__meta { align-items: baseline; }
.pp-cf__disc { margin-top: var(--s-4); padding-top: var(--s-3); border-top: var(--hairline-soft); }

/* Builder */
/* ---- subscription builder (two-pane: config + live quote) ---- */
.pp-builder { display: flex; flex-direction: column; gap: var(--s-5); }
.pp-builder__rails { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--s-2); }
.pp-railbtn { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; padding: var(--s-3); background: none; border: var(--hairline); border-radius: var(--r-2); cursor: pointer; transition: border-color var(--dur-base) var(--ease-out); }
.pp-railbtn:hover { border-color: var(--brass); }
.pp-railbtn.is-active { border-color: var(--brass); }
.pp-railbtn.is-active .pp-railbtn__name { color: var(--brass); }
.pp-railbtn__name { font-family: var(--font-display); font-size: var(--text-md); color: var(--bone); line-height: 1.1; }
.pp-railbtn__ent { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--bone-50); }
.pp-builder__main { display: grid; grid-template-columns: 1fr 20rem; gap: var(--s-5); align-items: start; }
.pp-builder__config { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.pp-builder__summary { position: sticky; top: var(--s-5); }
.pp-builder__search { width: 100%; }
.pp-builder__results { display: flex; flex-direction: column; border: var(--hairline); border-radius: var(--r-2); overflow: hidden; }
.pp-pickrow { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-bottom: var(--hairline-soft); }
.pp-pickrow:last-child { border-bottom: none; }
.pp-pickrow__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pp-pickrow__name { color: var(--bone); }
.pp-pickrow__act { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.pp-builder__lbl { margin-top: var(--s-2); }
.pp-builder__lines { display: flex; flex-direction: column; }
.pp-linerow { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: var(--hairline-soft); }
.pp-linerow__v { width: 24px; flex: none; }
.pp-linerow__info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.pp-linerow__name { color: var(--bone); }
.pp-linerow__rsch { flex: none; }
.pp-linerow__rm { flex: none; background: none; border: none; color: var(--bone-50); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 var(--s-1); }
.pp-linerow__rm:hover { color: var(--bone); }
.pp-qty { display: inline-flex; align-items: center; border: var(--hairline); border-radius: var(--r-2); overflow: hidden; flex: none; }
.pp-qty__b { width: 28px; height: 28px; background: none; border: none; cursor: pointer; color: var(--bone); font-size: 16px; line-height: 1; }
.pp-qty__b:hover { background: var(--ink-1); }
.pp-qty__n { min-width: 2ch; text-align: center; font-family: var(--font-mono); font-size: var(--text-sm); }
.pp-builder__cadence { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-2); }
.pp-builder__plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s-3); }
.pp-quote__price { display: flex; align-items: baseline; gap: var(--s-2); margin: var(--s-2) 0 var(--s-1); }
.pp-quote__num { font-family: var(--font-display); font-size: 2.25rem; line-height: 1; color: var(--bone); }
.pp-quote__per { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--bone-70); }
.pp-quote__stats { margin: var(--s-3) 0; }
.pp-quote__add { width: 100%; margin-top: var(--s-2); }
/* "+" create-your-own tile in the prebuilt grid */
.pp-build-tile { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; text-align: left; padding: var(--s-5); border: 1px dashed rgba(34,30,24,.28); border-radius: var(--r-2); background: none; cursor: pointer; justify-content: center; transition: border-color var(--dur-base) var(--ease-out); }
.pp-build-tile:hover { border-color: var(--brass); }
.pp-build-tile__plus { font-family: var(--font-display); font-size: 3rem; line-height: .8; color: var(--brass); }
.pp-build-tile__t { font-family: var(--font-display); font-size: var(--text-lg); color: var(--bone); }
.pp-build-tile__d { font-size: var(--text-sm); color: var(--bone-70); }
.pp-build-tile__cta { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--brass); margin-top: var(--s-1); }
@media (max-width: 768px) { .pp-builder__main { grid-template-columns: 1fr; } .pp-builder__summary { position: static; } .pp-builder__cadence { flex-direction: column; gap: var(--s-3); } }
/* cosmetic shop: balanced 2-up grid + editorial pricing toolbar (restores the original shop's catalog authority) */
.shop-grid { max-width: 760px; margin-inline: auto; }
.pp-cos-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); max-width: 760px; margin: 0 auto var(--s-5); padding-bottom: var(--s-3); border-bottom: var(--hairline); }
.pp-cosmeta { margin: 0; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--bone-50); }
.pp-cosmeta::before { content: "✓"; color: var(--brass); margin-right: .5ch; }
/* slow turntable rotation on shown vials (respects reduced-motion) */
@keyframes pp-vial-turn { 0%, 100% { transform: rotateY(-20deg); } 50% { transform: rotateY(20deg); } }
@media (prefers-reduced-motion: no-preference) {
  .pp-cmpd .product-card__media, .pp-cdetail__media { perspective: 900px; }
  .pp-cmpd .product-card__media svg, .pp-cdetail__media svg { animation: pp-vial-turn 7s ease-in-out infinite; transform-origin: 50% 55%; will-change: transform; }
}
/* builder: bloodwork module + structured quote + legal split */
.pp-blood { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.pp-blood__packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--s-2); }
.pp-blood__pack { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; padding: var(--s-2) var(--s-3); border: var(--hairline); border-radius: var(--r-2); background: none; cursor: pointer; transition: border-color var(--dur-base) var(--ease-out); }
.pp-blood__pack:hover, .pp-blood__pack.is-active { border-color: var(--brass); }
.pp-blood__lbl { color: var(--bone); font-size: var(--text-sm); }
.pp-blood__pack.is-active .pp-blood__lbl { color: var(--brass); }
/* single bloodwork model — RUO device + lab report, explained as steps */
.pp-blood__how { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); padding: var(--s-3); border: var(--hairline); border-radius: var(--r-2); }
.pp-blood__step { display: flex; gap: var(--s-2); align-items: baseline; }
.pp-blood__stepn { flex: none; width: 18px; height: 18px; border-radius: 999px; background: var(--brass); color: var(--on-brass); font-family: var(--font-mono); font-size: var(--text-2xs); display: inline-flex; align-items: center; justify-content: center; }
/* live stock badge (from the Inventory Sheet) — out-of-stock shows "Ships in 7 days", never blocks */
.pp-stock { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: var(--hairline); margin-top: var(--s-2); }
.pp-stock::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; }
.pp-stock--ok { color: var(--data); border-color: color-mix(in srgb, var(--data) 40%, transparent); }
.pp-stock--low { color: var(--brass); border-color: color-mix(in srgb, var(--brass) 45%, transparent); }
.pp-stock--back { color: var(--bone-70); border-color: var(--bone-14); }
.pp-quote__rows { display: flex; flex-direction: column; gap: 4px; margin: var(--s-2) 0; }
.pp-quote__row { display: flex; justify-content: space-between; gap: var(--s-3); }
.pp-quote__legal { border-top: var(--hairline-soft); margin-top: var(--s-2); padding-top: var(--s-2); display: flex; flex-direction: column; gap: 3px; }
.pp-rule { margin: 0; color: var(--bone-70); }
/* one accent per card: the bloodwork line reads quiet, a brass tick carries the
   scent instead of a full brass sentence (colour restraint, same copy). */
.pp-sub__blood { margin: 0; color: var(--bone-70); }
.pp-sub__blood::before { content: '+ '; color: var(--brass); font-family: var(--font-mono); }
/* subscription card foot: wishlist + CTA share one row, CTA carries the width */
.pp-sub__foot .cluster { flex-wrap: nowrap; }
.pp-sub__foot .cluster .btn--primary { flex: 1 1 auto; }
.pp-sub__foot .cluster .wish-btn { flex: none; }
/* builder: plain header + numbered steps */
.pp-builder__title { margin: 0; font-size: var(--text-xl); }
.pp-builder__intro { margin: var(--s-1) 0 var(--s-2); max-width: 48ch; }
.pp-step { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0 var(--s-1); }
.pp-step__n { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--brass); color: var(--on-brass, #fff); font-family: var(--font-mono); font-size: var(--text-xs); flex: none; }
.pp-step__t { font-family: var(--font-display); font-size: var(--text-lg); color: var(--bone); }
.pp-subdetail__block { display: flex; flex-direction: column; gap: 4px; margin-top: var(--s-3); }
/* legal split block on the subscriptions page */
.subs-legal { border: var(--hairline); border-radius: var(--r-2); padding: var(--s-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-3); }
.subs-legal__row { display: flex; flex-direction: column; gap: 2px; }
.subs-legal__k { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--brass); }
.subs-legal__v { font-size: var(--text-sm); color: var(--bone-70); }
/* homepage: choose-your-rail + build-your-way */
.grid--4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.home-rail { display: flex; flex-direction: column; gap: var(--s-2); text-decoration: none; transition: border-color var(--dur-base) var(--ease-out); }
.home-rail:hover { border-color: var(--brass); }
.home-rail .text-link { margin-top: auto; }
.home-build__steps { list-style: none; margin: var(--s-3) 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2) var(--s-4); }
.home-build__steps li { display: flex; align-items: baseline; gap: var(--s-2); color: var(--bone-70); font-size: var(--text-sm); }
.home-build__n { font-family: var(--font-mono); color: var(--brass); font-size: var(--text-xs); flex: none; }
@media (max-width: 960px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--4 { grid-template-columns: 1fr; } .home-build__steps { grid-template-columns: 1fr; } }

.pp-placement { margin-top: var(--s-4); }
.pp-placement, .pp-placement p, .pp-gate, .pp-gate p { overflow-wrap: anywhere; }
.pp-ent__name { font-family: var(--font-mono); font-size: var(--text-sm); }

/* Rail hero / audience cards (homepage + rail pages) */
.rail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--s-4); }
.rail-card { border: var(--hairline); border-radius: var(--r-2); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); transition: border-color var(--dur-base) var(--ease-out); }
.rail-card:hover { border-color: var(--brass-14); }
.rail-card__entity { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--bone-50); text-transform: uppercase; letter-spacing: .06em; }

/* ----------------------------------------------------------------------------
   21. RESPONSIVE — 1100 / 1024 / 768 / 390
   ---------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  :root { --header-h: 4rem; }

  .grid--4 { grid-template-columns: repeat(3, 1fr); }
  .split, .split--40-60, .split--60-40 { gap: var(--s-6); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .section { padding-block: var(--s-7); }
  .section--vast { padding-block: var(--s-8); }
}

/* Tablet landscape */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .pp-cat__controls { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .split, .split--40-60, .split--60-40 { grid-template-columns: 1fr; gap: var(--s-5); }
  .stat-strip .stat { border-left: none; border-top: var(--hairline-soft); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .pp-cat__controls { grid-template-columns: 1fr; }
  .pp-cf__form { flex-direction: column; }
  .pp-builder__opts { flex-direction: column; gap: var(--s-3); }
  /* Tables fit + wrap on mobile (no horizontal overflow) */
  .table { table-layout: fixed; }
  .table th, .table td { overflow-wrap: anywhere; }
  .footer-base { flex-direction: column; align-items: flex-start; }
  .index-row { grid-template-columns: 2rem 18px 1fr auto; }
  .index-row__meta { display: none; }
  .trust-row { flex-direction: column; }
  .trust-badge { justify-content: flex-start; }

  /* Mobile nav: panel under header */
  .nav-toggle { display: flex; }

  .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(240, 232, 212, 0.97);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: var(--hairline);
    padding: var(--s-3) var(--gutter) var(--s-5);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }

  .site-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

  .site-nav .nav-link {
    padding: var(--s-3) 0;
    border-bottom: var(--hairline-soft);
    font-size: var(--text-sm);
  }

  .site-nav .nav-link::after { display: none; }
}

@media (max-width: 480px) {
  /* Fraunces sets wider than the prior display face, so a long single hero word
     (e.g. "transformation.") overran the line box on phones. Ease the display
     size down on small screens and allow an extreme-narrow break as a safety net. */
  .display-1 { font-size: clamp(2.5rem, 4vw + 1.9rem, 3.5rem); overflow-wrap: break-word; }
}

@media (max-width: 390px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .section { padding-block: var(--s-6); }
  .section--vast { padding-block: var(--s-7); }
  .btn { width: 100%; }
  .btn--sm, .seg__opt { width: auto; }
  .tiktok-card { width: 72vw; }
  .peppy__chip { max-width: calc(100vw - 6rem); }
}

/* ============================================================================
   ORDER-COMMS ADDITIVE BLOCK — "Dispatched in 24 hours." trust line + wishlist
   Fable law: DESIGN_PEPPIES_COMMS §3 (trust line) + §4 (wishlist). Additive only.
   Lives entirely in bone + brass; the trust string is verbatim SENTENCE CASE, so
   nothing here applies text-transform:uppercase to it. --data green is never used.
   ============================================================================ */
.dispatch-line {                       /* inline variant — rows, card feet, bars */
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);          /* 10px */
  letter-spacing: 0.04em;
  text-transform: none;                /* the signed promise stays sentence case */
  color: var(--brass);                 /* #A64B29 — the ritual-moment ink */
}
.dispatch-line--chip {                 /* chip variant — hero, PDP, checkout */
  font-size: var(--text-xs);           /* 11px */
  padding: 4px 10px;
  background: var(--brass-08);
  border: 1px solid var(--brass-dim);
  border-radius: var(--r-1);           /* 2px — press-stamp, not pill */
}
.dispatch-line svg { width: 12px; height: 12px; flex: none; }
.dispatch-line__companion {            /* honest RUO micro line under the chip */
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--bone-50);
}
/* sticky purchase bar: hide the inline line under 900px so the 74–86px bar never wraps */
@media (max-width: 900px) { .dispatch-line--bar { display: none; } }
/* footer trust-badge carrying the fixed string keeps sentence case (badge default uppercases) */
.trust-badge--dispatch { text-transform: none; }

/* Add-to-wishlist — a quiet press-mark button: hairline + mono, never brass-filled. */
.wish-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; min-width: 44px; padding: 10px 14px;
  border: 1px solid var(--bone-14); border-radius: var(--r-2);   /* 4px */
  background: transparent; color: var(--bone-70);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-inout), color var(--dur-fast) var(--ease-inout);
}
.wish-btn:hover, .wish-btn:focus-visible { border-color: var(--brass); color: var(--brass); }
.wish-btn:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; }
.wish-btn.is-busy { opacity: .7; cursor: progress; }
.wish-btn.is-listed { border-color: var(--brass-dim); background: var(--brass-08); color: var(--brass); }
.wish-btn--icon { padding: 0; width: 44px; }                      /* icon-only variant */
.wish-btn__glyph { flex: none; }
/* PDP cta-row fit (Fable fix §4 #2): the labelled '+ Wishlist' control keeps its
   full ≥44×44 hit target at every width. Letting the row wrap drops the visually
   subordinate wish button to its own line when qty + primary buy leave it no room,
   so its right edge never crosses the viewport or the .pdp-buy column. Additive:
   product.html only sets display/align/gap on .pdp-cta-row, never flex-wrap. */
.pdp-cta-row { flex-wrap: wrap; }
/* checkout cart-line "Save to wishlist": a real button in a text-link register,
   still a ≥44px hit target, sentence case (never brass fill). */
.wish-btn--link {
  min-width: 0; padding: 6px 2px; border: none; background: none;
  color: var(--brass); text-transform: none; letter-spacing: 0.04em;
  justify-content: flex-start;
}
.wish-btn--link:hover, .wish-btn--link:focus-visible { color: var(--brass-bright); border: none; }
/* honest failure / dormant / re-count flash under a wishlist control */
.wish-flash {
  display: block; margin-top: 6px;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.04em; text-transform: none; color: var(--brass);
}

/* ============================================================================
   PEPTIDE → SUBSCRIPTIONS panel — DESIGN_PEPTIDE_SUBSCRIPTIONS §2 (paper edition)
   Tokens are law: ground --ink-1, rows --ink-2 / hover --ink-3, text --bone /
   --bone-50, hairline --bone-14, accent --brass, :target ring --brass-dim.
   ============================================================================ */
.pp-libs {
  background: var(--ink-1);
  border-radius: var(--r-2);
  padding: var(--s-5, 24px);
  margin-block: var(--s-5, 24px);
}
.pp-libs__rule {
  width: 24px; height: 2px; background: var(--brass);
  border-radius: var(--r-1); margin-bottom: var(--s-3, 12px);
}
.pp-libs__kicker {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--brass); margin: 0;
}
.pp-libs__intro {
  font-family: var(--font-body); color: var(--bone-50);
  font-size: var(--text-sm); line-height: 1.5; margin: 8px 0 0;
}
.pp-libs__count {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--bone-50); margin: 10px 0 0;
}
.pp-libs__list { margin-top: 14px; display: flex; flex-direction: column; gap: 1px; background: var(--bone-14); border-radius: var(--r-2); overflow: hidden; }
/* folded remainder of a long roster */
.pp-libs__morewrap { margin-top: 10px; }
.pp-libs__more {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--brass); padding: 6px 0;
}
.pp-libs__more::-webkit-details-marker { display: none; }
.pp-libs__more::after { content: '+'; font-size: var(--text-sm); line-height: 1; }
.pp-libs__morewrap[open] .pp-libs__more::after { content: '\2212'; }
.pp-libs__morewrap[open] .pp-libs__more { color: var(--bone-50); }
.pp-libs__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--ink-2); padding: 14px 16px; text-decoration: none;
  transition: background var(--dur-base, 240ms) var(--ease-out);
}
.pp-libs__row:hover, .pp-libs__row:focus-visible { background: var(--ink-3); outline: none; }
.pp-libs__row:focus-visible { box-shadow: inset 0 0 0 2px var(--brass-dim); }
.pp-libs__main { min-width: 0; }
.pp-libs__name { font-family: var(--font-display); font-size: var(--text-md); color: var(--bone); line-height: 1.2; }
.pp-libs__sub {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--bone-50); margin-top: 5px;
}
.pp-libs__side { text-align: right; flex: none; }
.pp-libs__price { font-family: var(--font-mono); font-size: var(--text-md); color: var(--brass); font-variant-numeric: tabular-nums; }
.pp-libs__cap {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--bone-50); margin-top: 3px;
}
.pp-libs__view {
  display: inline-block; margin-top: 6px;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--brass);
}
.pp-libs__view .arrow { display: inline-block; transition: transform var(--dur-base, 240ms) var(--ease-out); }
.pp-libs__row:hover .pp-libs__view .arrow, .pp-libs__row:focus-visible .pp-libs__view .arrow { transform: translateX(2px); }
.pp-libs__foot {
  font-family: var(--font-body); font-size: var(--text-2xs);
  color: var(--bone-50); line-height: 1.5; margin: 14px 0 0;
}
.pp-libs__empty-h { font-family: var(--font-display); font-size: var(--text-md); color: var(--bone); margin: 10px 0 0; }
.pp-libs__empty { font-family: var(--font-body); font-size: var(--text-sm); color: var(--bone-50); line-height: 1.5; margin: 8px 0 0; }
@media (max-width: 720px) {
  .pp-libs__row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pp-libs__side { text-align: left; align-self: stretch; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .pp-libs__cap { margin-top: 0; }
  .pp-libs__view { margin-top: 0; margin-left: auto; }
}
/* deep-link arrival: one-shot ring on the targeted subscription card (§1.6 / §6) */
.pp-sub:target { box-shadow: 0 0 0 2px var(--brass-dim); animation: pp-sub-target var(--dur-slow) var(--ease-out); }
@keyframes pp-sub-target {
  from { box-shadow: 0 0 0 6px var(--brass-dim); }
  to   { box-shadow: 0 0 0 2px var(--brass-dim); }
}
@media (prefers-reduced-motion: reduce) {
  .pp-sub:target { animation: none; }
}

/* ============================================================================
   F1/F2 · REPORTED OUTCOMES panel (DESIGN_EFFECT_REPORTS §2 — web)
   Tokens only; donut colors legislated in §2.2 (improved --data · mixed
   --data-dim · none --bone-32 · worse --alert; --alert appears NOWHERE else
   on the card). glass-case grade container, printed hierarchy.
   ============================================================================ */
.pp-reports { padding: 26px 26px 22px; border-radius: var(--r-2); margin-top: 26px; }
.pp-reports__kicker {
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500;
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--brass); margin: 12px 0 0;
}
.pp-reports__title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--bone); margin: 8px 0 0; }
.pp-reports__sub { font-family: var(--font-body); font-size: var(--text-sm); color: var(--bone-50); line-height: 1.55; margin: 6px 0 0; max-width: 58ch; }
.pp-reports__frame { font-family: var(--font-body); font-size: var(--text-sm); color: var(--bone-50); line-height: 1.55; margin: 6px 0 0; max-width: 58ch; font-style: italic; }
.pp-reports__stamps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pp-reports__stamp {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--bone-70);
  border: 1px solid var(--bone-14); border-radius: var(--r-1); padding: 3px 8px;
}
.pp-reports__stamp--stale { color: var(--brass); border-color: var(--brass-dim); }
.pp-reports__filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pp-reports__chip {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--bone-70); background: none; cursor: pointer;
  border: 1px solid var(--bone-14); border-radius: var(--r-1); padding: 5px 10px;
  display: inline-flex; align-items: center; gap: 6px;
}
.pp-reports__chip.is-active { background: var(--bone-08); border: var(--hairline-brass); color: var(--bone); }
.pp-reports__chip.is-dormant { cursor: default; color: var(--bone-32); }
.pp-reports__chip--sm { padding: 3px 8px; }
.pp-reports__chart { display: flex; align-items: center; gap: 22px; margin-top: 18px; }
.pp-reports__donut { flex: 0 0 120px; }
.pp-reports__legend { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; }
.pp-reports__lrow { display: flex; align-items: baseline; gap: 10px; }
.pp-reports__swatch { width: 8px; height: 8px; border-radius: var(--r-1); flex: 0 0 8px; display: inline-block; }
.pp-reports__llabel { font-family: var(--font-body); font-size: var(--text-sm); color: var(--bone-70); }
.pp-reports__lnum { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--bone); margin-left: auto; white-space: nowrap; }
.pp-reports__early { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.pp-reports__earlyrow { display: flex; align-items: baseline; gap: 10px; }
.pp-reports__earlylbl { font-family: var(--font-body); font-size: var(--text-sm); color: var(--bone-70); }
.pp-reports__earlyn { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--bone); margin-left: auto; }
.pp-reports__earlyline { font-family: var(--font-body); font-size: var(--text-sm); color: var(--bone-50); margin: 10px 0 0; }
.pp-reports__seclabel {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--bone-50); margin-top: 20px;
}
.pp-reports__bars { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pp-reports__brow { display: flex; align-items: center; gap: 10px; }
.pp-reports__blabel { font-family: var(--font-body); font-size: var(--text-sm); color: var(--bone-70); flex: 0 0 38%; min-width: 0; }
.pp-reports__track {
  flex: 1 1 auto; height: 8px; background: var(--bone-08);
  border: 1px solid var(--bone-14); border-radius: var(--r-1); overflow: hidden;
}
.pp-reports__fill { display: block; height: 100%; background: var(--data); }
.pp-reports__fill--se { background: var(--bone-32); }
.pp-reports__bnum { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--bone-70); white-space: nowrap; }
.pp-reports__sezero { font-family: var(--font-body); font-size: var(--text-sm); color: var(--bone-50); margin: 8px 0 0; }
.pp-reports__more { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--bone-50); margin: 6px 0 0; }
.pp-reports__attr {
  background: var(--ink-1); border-left: 3px solid var(--brass-dim); border-radius: var(--r-1);
  padding: 12px 14px; margin-top: 20px;
}
.pp-reports__attr p { font-family: var(--font-body); font-size: var(--text-sm); color: var(--bone-70); line-height: 1.55; margin: 0; }
.pp-reports__cta { margin-top: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pp-reports__caption { font-family: var(--font-body); font-size: var(--text-2xs); color: var(--bone-50); margin: 0; }
.pp-reports__ownchip {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--bone-70);
  border: 1px solid var(--bone-14); border-radius: var(--r-1); padding: 3px 8px;
}
.pp-reports__ownlinks { display: flex; gap: 14px; }
.pp-reports__locked { font-family: var(--font-body); font-size: var(--text-sm); color: var(--bone-50); line-height: 1.55; margin: 0; max-width: 58ch; }
.pp-reports__lockpre {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--bone-70);
}
.pp-reports__empty { margin-top: 18px; }
.pp-reports__empty-h { font-family: var(--font-display); font-size: var(--text-md); color: var(--bone); margin: 0; }
.pp-reports__empty-p { font-family: var(--font-body); font-size: var(--text-sm); color: var(--bone-50); line-height: 1.55; margin: 6px 0 0; max-width: 52ch; }
.pp-reports__offline { font-family: var(--font-body); font-size: var(--text-sm); color: var(--bone-50); margin: 10px 0 0; }
.pp-reports__loading { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--bone-50); margin: 16px 0 0; }
.pp-reports__foot { font-family: var(--font-body); font-size: var(--text-2xs); color: var(--bone-50); line-height: 1.5; margin: 18px 0 0; }
.pp-reports__confirm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.pp-reports__goals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.pp-reports__goalrow { display: flex; align-items: center; gap: 8px; }
.pp-reports__goalpair { display: inline-flex; gap: 6px; }
.pp-reportform .textarea, .pp-reportform .select, .pp-reportform .input { margin-top: 8px; }
@media (max-width: 720px) {
  .pp-reports__chart { flex-direction: column; align-items: center; }
  .pp-reports__legend { align-self: stretch; }
  .pp-reports__blabel { flex-basis: 45%; }
}

/* ═══ COLLAPSED LANE — the calm progressive-disclosure hierarchy ══════════════
   ONE shared vocabulary for the two SECONDARY buy lanes (partner labs in
   suppliers.js, third-party sellers in smartsource.js). Peppies stays the
   expanded default above; each of these folds its many rows into a single
   tappable summary — kicker + the live fact + a chevron — and reveals the full
   panel only on demand. A real disclosure (button + aria-expanded/aria-controls).
   Paper/Atelier: a calm ink-1 row on hairlines (no shadow), brass ONLY on hover
   and the open state; a subtle 280ms chevron turn. Both lanes look identical. */
/* NOTE (buying-options release): .pp-lane* is RETIRED from the compound modal —
   the modal now renders the featured solo box + the See-all panel (.pp-optpanel).
   These rules stay LIVE on the PDP (product.html keeps the inline lanes). */
.pp-lane { margin-top: 12px; }
.pp-lane__sum {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; min-height: 44px;                        /* ≥44px tap target */
  padding: 11px var(--s-3); margin: 0;
  background: var(--ink-1); border: var(--hairline); border-radius: var(--r-2);
  cursor: pointer; text-align: left;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.pp-lane__sum:hover { border-color: var(--brass-14); background: var(--ink-2); }
.pp-lane__sum:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }
.pp-lane__sum[aria-expanded="true"] {
  border-color: var(--brass-dim);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
/* the lane's name — a quiet mono kicker */
.pp-lane__kicker {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--bone-50);
}
/* the live one-line fact (N labs · from €X all-in) — mono tabular, full ink */
.pp-lane__fact {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .02em;
  color: var(--bone-70); font-variant-numeric: tabular-nums;
}
/* the chevron — a CSS glyph (no asset), points down when closed, turns up on open */
.pp-lane__chev {
  flex: 0 0 auto; width: 9px; height: 9px; margin-right: 2px;
  border-right: 1.5px solid var(--bone-50); border-bottom: 1.5px solid var(--bone-50);
  transform: rotate(45deg); transform-origin: 55% 55%;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.pp-lane__sum:hover .pp-lane__chev { border-color: var(--brass); }
.pp-lane__sum[aria-expanded="true"] .pp-lane__chev { transform: rotate(-135deg); border-color: var(--brass); }
@media (prefers-reduced-motion: reduce) { .pp-lane__chev { transition: none; } }
/* the revealed panel — one calm inset continuous with the summary above it */
.pp-lane__panel {
  padding: 4px var(--s-3) var(--s-3);
  background: var(--ink-1); border: var(--hairline); border-top: 0;
  border-bottom-left-radius: var(--r-2); border-bottom-right-radius: var(--r-2);
}
.pp-lane__panel[hidden] { display: none; }
/* inside the labs panel the box-only sub-label already carries its own top rule,
   so drop its extra top hairline (the panel edge is the separator now) */
.pp-lane--labs .pp-lane__panel > .pp-buyfrom__lablabel:first-child {
  margin-top: 0; padding-top: 6px; border-top: 0;
}

/* ============================================================================
   F6/A4 · "BUY FROM" — the ONE supplier list (owner-approved). A single
   radiogroup where each row is both the comparison AND the selector: Peppies
   (vial + box, from stock, checked by default) above a hairline, then the quiet
   lab sub-label and one row per lab with its all-in figure. Mono tabular
   numerals for every figure; hairlines, not boxes; brass ONLY for the checked
   radio, the open "i" and a live volume discount — NO winner coloring, the
   list never scores which is cheaper. ======================================= */
.pp-source { margin-top: 14px; }
.pp-source__subnote { margin-top: 8px; }
.pp-buyfrom {
  background: var(--ink-1); border: var(--hairline); border-radius: var(--r-2);
  padding: var(--s-3); margin-top: 12px;
}
.pp-buyfrom__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding-bottom: 10px; border-bottom: var(--hairline);
}
.pp-buyfrom__kicker {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--bone-50);
}

/* rows — quiet, clickable, keyboard-selectable (roving tabindex) */
.pp-buyfrom__row { padding: 9px 0 8px; cursor: pointer; }
.pp-buyfrom__row:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; border-radius: var(--r-1); }
.pp-buyfrom__row--lab + .pp-buyfrom__row--lab { border-top: var(--hairline); }

.pp-buyfrom__main { display: flex; align-items: baseline; gap: 8px; }
/* the radio itself — an empty ring; brass-filled ONLY when checked */
.pp-buyfrom__dot {
  flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid var(--bone-32); align-self: center; transition: border-color .15s, background .15s;
}
.pp-buyfrom__row.is-checked .pp-buyfrom__dot {
  border-color: var(--brass); background: var(--brass); box-shadow: inset 0 0 0 2.5px var(--ink-1);
}
.pp-buyfrom__src { font-family: var(--font-body); font-size: var(--text-sm); color: var(--bone); }
.pp-buyfrom__main .pp-stock { margin-top: 0; }
.pp-buyfrom__num {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: .01em;
  color: var(--bone); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.pp-buyfrom__allin {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--bone-50);
}
/* the Peppies vial + box ladder — the ONLY per-vial figures anywhere */
.pp-buyfrom__units {
  margin-top: 3px; padding-left: 20px; font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: .02em; color: var(--bone-70); font-variant-numeric: tabular-nums;
}
/* a LIVE volume discount is the one other brass moment */
.pp-buyfrom__volume { color: var(--brass); }
.pp-buyfrom__eta {
  margin-top: 5px; padding-left: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .02em; color: var(--bone-50);
}
.pp-buyfrom__eta .pp-stock { margin-top: 0; }
/* the hairline + the quiet lab sub-label — box-only + live fee, stated ONCE */
.pp-buyfrom__lablabel {
  margin-top: 4px; padding: 9px 0 3px; border-top: var(--hairline);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--bone-50);
}
/* the labs' ONE shared delivery clock — a single line under the whole lab group */
.pp-buyfrom__foot {
  margin-top: 8px; padding-top: 8px; border-top: var(--hairline);
  font-variant-numeric: tabular-nums;
}
/* sub mode — the labs collapse to one quiet line (never disabled furniture) */
.pp-buyfrom__sub { margin-top: 8px; }
/* A4 — the "i" INFO affordance: a quiet ringed serif i; brass only when open */
.pp-source-info { margin-top: 6px; }
.pp-source-info__btn {
  width: 16px; height: 16px; padding: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bone-32); border-radius: 50%; background: none;
  font-family: var(--font-display); font-style: italic; font-size: 11px; line-height: 1;
  color: var(--bone-50); cursor: pointer;
}
.pp-source-info__btn:hover { border-color: var(--bone-70); color: var(--bone-70); }
.pp-source-info__btn[aria-expanded="true"] { border-color: var(--brass); color: var(--brass); }
.pp-source-info__panel {
  margin-top: 8px; padding: 10px 12px;
  border: var(--hairline); border-left: 2px solid var(--brass); border-radius: var(--r-1);
  background: var(--ink-1); color: var(--bone-70);
}
.pp-source-info__panel .micro + .micro { margin-top: 6px; }

/* ═══ DELIVERY SPEED — the Amazon-style chooser (.pp-speed) ═══════════════
   Lives in two hosts with ONE class vocabulary:
   1. inside .pp-buyfrom, replacing the labs' shared clock foot (the old
      'Every lab: Leaves … · arrives ≈ …' line);
   2. at checkout, once above the supplier groups.
   Grammar mirrors .pp-buyfrom exactly: hairlines not boxes, mono tabular
   numerals for every date and figure, brass ONLY on the checked radio dot
   (+ its name lifting from muted to full ink). No hardcoded colors —
   every value is a paper/Atelier token. */
.pp-speed {
  margin-top: 8px;
  padding-top: 8px;
  border-top: var(--hairline);
}
/* checkout host: the chooser sits alone above the groups — give it the
   panel treatment the buy-from card already uses */
.pp-speed--panel {
  margin-top: 12px;
  padding: var(--s-3);
  background: var(--ink-1);
  border: var(--hairline);
  border-radius: var(--r-2);
}

.pp-speed__kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--bone-50);
  padding-bottom: 6px;
  border-bottom: var(--hairline);
}

/* ── one option row = one selectable radio ─────────────────────────── */
.pp-speed__opt {
  padding: 10px 0 9px;
  cursor: pointer;
}
.pp-speed__opt + .pp-speed__opt { border-top: var(--hairline); }
.pp-speed__opt:focus-visible {
  outline: 1px solid var(--brass);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* main line: (dot) NAME · Delivered 27 – 31 Jul ......... +€52.47 / supplier */
.pp-speed__main {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
/* the radio ring — empty until checked; brass fill is the ONLY selected mark */
.pp-speed__dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--bone-32);
  align-self: center;
  transition: border-color .15s, background .15s;
}
.pp-speed__opt.is-checked .pp-speed__dot {
  border-color: var(--brass);
  background: var(--brass);
  box-shadow: inset 0 0 0 2.5px var(--ink-1);
}
.pp-speed--panel .pp-speed__opt.is-checked .pp-speed__dot {
  box-shadow: inset 0 0 0 2.5px var(--ink-1);
}

/* the speed name — a quiet mono label; full ink only when chosen */
.pp-speed__name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--bone-70);
}
.pp-speed__opt.is-checked .pp-speed__name { color: var(--bone); }

/* the headline fact — the Delivered range, always full ink, tabular */
.pp-speed__delivered {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: .01em;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* the per-supplier fee, right-aligned like .pp-buyfrom__num */
.pp-speed__fee {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: .02em;
  color: var(--bone-70);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pp-speed__opt.is-checked .pp-speed__fee { color: var(--bone); }

/* the dispatch subline, indented past the dot (same 20px gutter as
   .pp-buyfrom__units / __eta) */
.pp-speed__sub {
  margin-top: 3px;
  padding-left: 20px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: .02em;
  color: var(--bone-50);
}
.pp-speed__opt.is-checked .pp-speed__sub { color: var(--bone-70); }

/* the per-supplier arithmetic note — one quiet line under both options;
   at checkout it spells the live total (n labs × fee) */
.pp-speed__note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: .02em;
  color: var(--bone-50);
  font-variant-numeric: tabular-nums;
}

/* narrow screens: let the main line wrap; the fee drops under the range,
   keeping the 20px gutter so nothing collides with the dot column */
@media (max-width: 480px) {
  .pp-speed__main { flex-wrap: wrap; }
  .pp-speed__fee {
    margin-left: 0;
    flex-basis: 100%;
    padding-left: 20px;
  }
}

/* ── SmartSource · MANAGED SOURCING (third-party crypto sellers within the radar band) ──
   The CLASSIFIEDS lane. Peppies stock above is the house listing; below a newspaper
   DOUBLE RULE (the classic section-change separator) sit third-party notices: seller
   names in plain body serif (never the Peppies mark), landed EUR in mono tabular,
   an italic ships-direct notice line, and one ghost CTA. Brass appears only on the
   Peppies acts — the Order-via-Peppies button and the open (i). Hairlines, no shadows. */
.pp-managed {
  margin-top: var(--s-3);
  padding-top: 12px;
  border-top: 3px double var(--bone-32);   /* the print double rule — a different section begins */
}
.pp-managed__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.pp-managed__kicker {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--bone-50);
}
/* the third-party (i) stays findable in the lane — a shade darker ring than the default */
.pp-managed .pp-source-info__btn { border-color: var(--bone-50); color: var(--bone-70); }
.pp-managed .pp-source-info__btn:hover { border-color: var(--bone-70); color: var(--bone); }
.pp-managed .pp-source-info__btn[aria-expanded="true"] { border-color: var(--brass); color: var(--brass); }
/* the lane's own disclosure panel — neutral bone keyline, NOT brass (this is not a Peppies notice) */
.pp-managed .pp-source-info__panel { border-left: 2px solid var(--bone-32); }

/* the intro reads as a small printed notice — italic Newsreader, measured line */
.pp-managed__intro {
  margin: 6px 0 2px; max-width: 44ch;
  font-family: var(--font-body); font-style: italic;
  color: var(--bone-50); line-height: var(--leading-snug);
}

/* rows — one classified per seller */
.pp-managed__row { padding: 11px 0 10px; }
.pp-managed__row + .pp-managed__row { border-top: var(--hairline); }
.pp-managed__main { display: flex; align-items: baseline; gap: var(--s-2); }
.pp-managed__seller {
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--bone);
  min-width: 0; overflow-wrap: anywhere;   /* long seller names wrap, never shove the figure */
}
.pp-managed__num {
  margin-left: auto; flex: 0 0 auto;
  font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: .01em;
  color: var(--bone); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.pp-managed__allin {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--bone-50);
}
/* the crypto / ships-direct notice — calm serif italic, not 10px mono shouting */
.pp-managed__ships {
  margin-top: 4px;
  font-family: var(--font-body); font-style: italic; font-size: var(--text-sm);
  color: var(--bone-50); line-height: var(--leading-snug); max-width: 52ch;
}
/* HOISTED once for the whole lane (progressive disclosure): the ships-direct /
   pay-in-crypto notice is stated a SINGLE time here — never repeated per seller
   row — and closed by a hairline before the classifieds begin. */
.pp-managed__ships--lead {
  margin: 8px 0 0; padding-bottom: 10px; border-bottom: var(--hairline);
}
/* the CTA — the one Peppies act in the row, so it may earn brass on hover */
.pp-managed__btn {
  margin-top: 9px; display: inline-flex; align-items: center; padding: 7px 14px;
  border: 1px solid var(--bone-32); border-radius: var(--r-1); background: none;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--bone-70); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pp-managed__btn:hover { border-color: var(--brass); color: var(--brass); }
.pp-managed__btn:disabled { opacity: .58; cursor: not-allowed; border-color: var(--bone-18); color: var(--bone-50); }
.pp-managed__btn:disabled:hover { border-color: var(--bone-18); color: var(--bone-50); }
.pp-managed__btn:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }

/* ── SmartSource capture modal — ship form → seller crypto coupon → I've paid ──
   A fresh clipping (ink-2) lifted off the page on the system's warm plate shadow;
   the scrim is sepia press-ink, never cold black. Arrives in one calm 280ms rise. */
.pp-ss-modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-4); overflow-y: auto;
  background: var(--bone-50);                       /* warm sepia scrim over the manila page */
  animation: pp-ss-scrim var(--dur-fast) var(--ease-out);
}
.pp-ss-modal__panel {
  position: relative; width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto;
  background: var(--surface, var(--ink-2));         /* a fresh clipping on the sheet */
  border: var(--hairline); border-radius: var(--r-2); padding: var(--s-4);
  box-shadow: var(--glass-shadow-plate);            /* the ONE sanctioned warm elevation */
  animation: pp-ss-rise var(--dur-base) var(--ease-out);
}
@keyframes pp-ss-scrim { from { opacity: 0; } to { opacity: 1; } }
@keyframes pp-ss-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pp-ss-modal, .pp-ss-modal__panel { animation: none; }
}
.pp-ss-modal__close {
  position: absolute; top: 10px; right: 12px; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: var(--r-1);
  font-family: var(--font-body); font-size: 22px; line-height: 1;
  color: var(--bone-50); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.pp-ss-modal__close:hover { color: var(--bone); }
.pp-ss-modal__close:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }
.pp-ss-modal__kicker {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--bone-50);
}
.pp-ss-modal__title {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500;
  color: var(--bone); line-height: var(--leading-snug); margin: 4px 0 2px;
}
/* the third-party byline — plain text seller, closed by a hairline before the form */
.pp-ss-modal__seller {
  color: var(--bone-70); font-variant-numeric: tabular-nums;
  margin: 0 0 var(--s-3); padding-bottom: 10px; border-bottom: var(--hairline);
}

/* shipping form — labels in press mono, fields on the freshest sheet */
.pp-ss-form { display: grid; gap: 10px; margin: var(--s-3) 0; }
.pp-ss-field { display: grid; gap: 4px; }
.pp-ss-field__label {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--bone-50);
}
.pp-ss-field__input {
  width: 100%; padding: 9px 10px;
  background: var(--ink-3);                          /* near-white sheet — clearly writable */
  border: var(--hairline); border-radius: var(--r-1);
  color: var(--bone); font-family: var(--font-body); font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.pp-ss-field__input::placeholder { color: var(--bone-32); }
.pp-ss-field__input:focus { outline: 1px solid var(--brass); outline-offset: 0; border-color: var(--brass); }
.pp-ss-field__input[aria-invalid="true"] { border-color: var(--alert); }

/* Explicit third-party / direct-payment consent. The checkbox remains a native,
   keyboard-operable control; the copy is sentence case because it must be read. */
.pp-ss-ack {
  display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start;
  margin: 2px 0 var(--s-3); padding: 11px 12px;
  border: var(--hairline); border-left: 2px solid var(--brass); border-radius: var(--r-1);
  background: var(--ink-1); cursor: pointer;
}
.pp-ss-ack__input {
  width: 16px; height: 16px; margin-top: 2px;
  accent-color: var(--brass); cursor: pointer;
}
.pp-ss-ack__copy {
  font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.45;
  color: var(--bone-70);
}

/* the Peppies act — solid terracotta, cream glyphs, pressed harder on hover */
.pp-ss-modal__place {
  width: 100%; margin-top: 6px; padding: 12px 16px;
  border: 1px solid var(--brass); border-radius: var(--r-1);
  background: var(--brass); color: var(--on-brass);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pp-ss-modal__place:hover:not(:disabled) { background: var(--brass-bright); border-color: var(--brass-bright); }
.pp-ss-modal__place:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }
.pp-ss-modal__place:disabled { opacity: .5; cursor: default; }
/* handoff: an <a> using the place-button chrome renders as a block CTA; the ghost variant is the
   secondary "I've paid" beneath the primary "Complete at seller" link. */
a.pp-ss-modal__place { display: block; text-align: center; text-decoration: none; }
.pp-ss-modal__place--ghost { background: transparent; color: var(--brass); }
.pp-ss-modal__place--ghost:hover:not(:disabled) { background: transparent; border-color: var(--brass-bright); color: var(--brass-bright); }
.pp-ss-modal__msg { color: var(--bone-70); margin-top: var(--s-2); line-height: var(--leading-snug); }
.pp-ss-modal__dormant { color: var(--bone-50); font-style: italic; }

/* Briefly visible before the automatic same-tab vendor-payment handoff. The
   ordinary anchor is intentionally retained as a resilient same-tab fallback. */
.pp-ss-payment-ready {
  margin: 10px 0; padding: var(--s-3);
  border: var(--hairline); border-left: 2px solid var(--brass); border-radius: var(--r-1);
  background: var(--ink-1);
}
.pp-ss-payment-ready__title {
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--bone);
}

/* the payment coupon — a dashed clip-out remittance slip; the address is the artefact */
.pp-ss-pay {
  margin: 10px 0; padding: var(--s-3);
  border: 1px dashed var(--bone-32);                 /* cut along the dotted line */
  border-radius: var(--r-1); background: var(--ink-1);
}
.pp-ss-pay__lead { color: var(--bone-70); line-height: var(--leading-snug); }
.pp-ss-pay__asset {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--brass);
}
.pp-ss-pay__addr {
  margin-top: 6px; padding: 8px 10px;
  background: var(--ink-3); border: var(--hairline); border-radius: var(--r-1);
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--bone);
  word-break: break-all; line-height: var(--leading-snug);
  -webkit-user-select: all; user-select: all;        /* one tap selects the whole address */
}
.pp-ss-pay__amt {
  margin-top: 6px; font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--bone); font-variant-numeric: tabular-nums;
}

/* ── SmartSource · MANAGED SOURCING — your third-party orders (ordersView) ─────
   Sits beside .pp-managed / .pp-ss-modal in shared.css. Paper/Atelier rules:
   hairlines not shadows; mono tabular numerals for money; brass is the ONE
   accent (= the awaiting-payment action); --data field-green appears ONLY on
   the single positive terminal state ("placed"). A third-party SELLER name is
   PLAIN TEXT — the seller is not Peppies, so it never gets the logo mark.
   Child hooks are data-role attributes so the class family stays exactly six. */

.pp-ss-orders { margin-top: var(--s-4); }
.pp-ss-orders [data-role="kicker"] {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--bone-50);
}
.pp-ss-orders [data-role="disclosure"] {
  margin-top: 6px; padding-bottom: 10px; border-bottom: var(--hairline);
  font-family: var(--font-body); font-size: var(--text-2xs); line-height: 1.5; color: var(--bone-50);
}
.pp-ss-orders [data-role="error"] { margin-top: 10px; font-family: var(--font-body); font-size: var(--text-sm); color: var(--bone-70); }
.pp-ss-orders [data-role="error"] button {
  border: none; background: none; padding: 0; margin-left: 6px; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--brass); text-decoration: underline; text-underline-offset: 3px;
}

/* One order = one hairline-separated row. Two columns: facts left, money/status right. */
.pp-ss-orders__row {
  display: grid; grid-template-columns: 1fr auto; gap: 3px var(--s-3);
  align-items: baseline; padding: var(--s-3) 0;
}
.pp-ss-orders__row + .pp-ss-orders__row { border-top: var(--hairline); }
.pp-ss-orders__row [data-role="meta"] {
  grid-column: 1 / -1;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--bone-32);
  font-variant-numeric: tabular-nums;
}
.pp-ss-orders__row [data-role="price"] {
  justify-self: end;
  font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums;
  letter-spacing: .01em; color: var(--bone); white-space: nowrap;
}
.pp-ss-orders__row [data-role="price"] small {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--bone-50); margin-left: 4px;
}
.pp-ss-orders__row [data-role="note"] {
  grid-column: 1 / -1; margin-top: 2px;
  font-family: var(--font-body); font-size: var(--text-2xs); line-height: 1.5; color: var(--bone-50);
}

/* Seller — PLAIN TEXT by standing rule (never the Peppies mark: it is not Peppies). */
.pp-ss-orders__seller { font-family: var(--font-body); font-size: var(--text-sm); color: var(--bone); }

/* Status chip — quiet mono pill; color is state, border is a tinted hairline.
   Default (queued / sourcing) is muted press-ink. */
.pp-ss-orders__status {
  justify-self: end; align-self: center; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--bone-50);
  border: var(--hairline); border-radius: 999px; padding: 3px 10px;
}
.pp-ss-orders__status[data-status="awaiting_payment"] { color: var(--brass); border-color: color-mix(in srgb, var(--brass) 45%, transparent); }
.pp-ss-orders__status[data-status="paid_pending"]     { color: var(--bone-70); }
.pp-ss-orders__status[data-status="placed"]           { color: var(--data); border-color: color-mix(in srgb, var(--data) 40%, transparent); } /* the ONE positive metric */
.pp-ss-orders__status[data-status="failed"]           { color: var(--alert, var(--brass)); border-color: color-mix(in srgb, var(--alert, var(--brass)) 40%, transparent); }
.pp-ss-orders__status[data-status="cancelled"]        { color: var(--bone-32); }
.pp-ss-orders__status[data-status="handoff"]          { color: var(--brass); border-color: color-mix(in srgb, var(--brass) 45%, transparent); } /* action required (brass), like awaiting_payment */
.pp-ss-orders__status[data-status="attention_required"] { color: var(--alert, var(--brass)); border-color: color-mix(in srgb, var(--alert, var(--brass)) 40%, transparent); }
.pp-ss-orders__status[data-status="expired"]          { color: var(--bone-32); }

/* Awaiting-payment block — the seller's own crypto address + "I've paid".
   Terracotta keyline (same grammar as .pp-ss-pay / .pp-source-info__panel). */
.pp-ss-orders__pay {
  grid-column: 1 / -1; margin-top: 8px; padding: 12px;
  border: var(--hairline); border-left: 2px solid var(--brass); border-radius: var(--r-1);
  background: var(--surface, var(--ink-1));
}
.pp-ss-orders__pay [data-role="lead"] { font-family: var(--font-body); font-size: var(--text-2xs); line-height: 1.5; color: var(--bone-70); margin: 0 0 8px; }
.pp-ss-orders__pay [data-role="asset"] {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--brass);
}
.pp-ss-orders__pay [data-role="address"] {
  margin-top: 4px; font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--bone); word-break: break-all; user-select: all;
}
.pp-ss-orders__pay [data-role="amount"] {
  margin-top: 4px; font-family: var(--font-mono); font-size: var(--text-sm);
  font-variant-numeric: tabular-nums; color: var(--bone-70);
}
.pp-ss-orders__pay [data-role="paid-btn"] {
  margin-top: 10px; display: inline-flex; align-items: center; padding: 8px 14px;
  border: 1px solid var(--brass); border-radius: var(--r-1); background: none;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--brass); cursor: pointer;
  transition: background .15s, color .15s;
}
.pp-ss-orders__pay [data-role="paid-btn"]:hover { background: var(--brass); color: var(--ink-1); }
.pp-ss-orders__pay [data-role="paid-btn"]:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }
.pp-ss-orders__pay [data-role="paid-btn"]:disabled { opacity: .5; cursor: default; }
.pp-ss-orders__pay [data-role="pay-msg"] { margin-top: 8px; font-family: var(--font-body); font-size: var(--text-2xs); color: var(--bone-50); }
/* handoff CTA in the orders view: a link to complete the order at the seller, styled as the primary act. */
.pp-ss-orders__pay [data-role="handoff-link"] {
  display: block; text-align: center; text-decoration: none;
  margin-top: 4px; padding: 10px 14px;
  border: 1px solid var(--brass); border-radius: var(--r-1);
  background: var(--brass); color: var(--on-brass);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono); text-transform: uppercase;
}
.pp-ss-orders__pay [data-role="handoff-link"]:hover { background: var(--brass-bright); border-color: var(--brass-bright); }
.pp-ss-orders__pay [data-role="handoff-link"] + [data-role="paid-btn"] { margin-top: 8px; }

/* Calm empty / dormant state — one quiet framed note, no illustration, no CTA push. */
.pp-ss-orders__empty {
  margin-top: var(--s-3); padding: var(--s-4); text-align: center;
  border: var(--hairline); border-radius: var(--r-2);
}
.pp-ss-orders__empty [data-role="title"] { font-family: var(--font-display); font-size: var(--text-sm); color: var(--bone-70); margin: 0; }
.pp-ss-orders__empty [data-role="body"]  { font-family: var(--font-body); font-size: var(--text-2xs); line-height: 1.6; color: var(--bone-50); margin: 6px auto 0; max-width: 42ch; }

@media (max-width: 480px) {
  .pp-ss-orders__row { grid-template-columns: 1fr; }
  .pp-ss-orders__row [data-role="price"], .pp-ss-orders__status { justify-self: start; }
}
.pdp-sticky__leaves { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .04em; color: var(--bone-50); }
/* Checkout supplier group + lead-time */
.checkout-group__head--supplier { }
.checkout-group__eta { font-size: var(--text-2xs); color: var(--bone-70); letter-spacing: .02em; margin: 6px 0 0; }
.checkout-group__fee { font-family: var(--font-body); font-size: var(--text-2xs); color: var(--bone-50); margin: 4px 0 0; }
.checkout-group__compare {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  background: var(--ink-1); border: 1px solid var(--bone-14); border-radius: var(--r-1);
  padding: 10px 12px; margin-top: 8px; font-size: var(--text-sm); color: var(--bone-70);
}
.checkout-group__compare .pp-stock { margin-top: 0; }
.checkout-lead__line { display: block; }
.checkout-lead__supplier { display: block; font-size: var(--text-2xs); letter-spacing: .04em; color: var(--bone-50); }
/* A4 — per-group volume discount + the honest all-in arithmetic line */
.checkout-group__discount { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .02em; color: var(--brass); margin: 4px 0 0; }
.checkout-group__allin { font-size: var(--text-2xs); letter-spacing: .02em; color: var(--bone-70); margin: 4px 0 0; font-variant-numeric: tabular-nums; }
/* A1.2 — per-group dispatch-tier toggle (seg grammar, quiet) */
.checkout-group__tier { margin-top: 8px; flex-wrap: wrap; }
.checkout-group__tier .seg__opt { font-size: var(--text-2xs); letter-spacing: .04em; }
/* A1.2/A1.3 — per-line supplier ETA + switching affordances */
.checkout-line__eta { font-size: var(--text-2xs); letter-spacing: .02em; color: var(--bone-50); }
.checkout-line__switch { margin-top: 2px; }
.checkout-line__source { display: inline-flex; align-items: baseline; gap: 6px; margin-top: 6px; color: var(--bone-50); }
.checkout-line__source select {
  background: var(--ink-1); color: var(--bone); border: 1px solid var(--bone-14);
  border-radius: var(--r-1); font: inherit; font-size: var(--text-2xs); padding: 2px 6px;
}
/* A1.4 — source/vendor filter atop catalogue surfaces + vendor ETA badge on cards */
.pp-vendor-seg { flex-wrap: wrap; margin-bottom: var(--s-3); }
.pp-vendor-eta { margin-top: 6px; letter-spacing: .02em; }

/* ============================================================================
   F5 · Blood provider chooser (DESIGN_BLOOD_PROVIDERS §4)
   ============================================================================ */
.pp-blood__labs { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* ============================================================================
   F3/F4 · Experience profiles + web booking (DESIGN_EXPERIENCE_PROFILES §5)
   Badge material law: CLINICIAN = .badge--brass, EXPERIENCE = plain .badge;
   verified identity = brass, unverified = bone. --data is FORBIDDEN here.
   ============================================================================ */
.clinicians-card__kindline, .profile-kindline, .visit-kindline {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--bone-50);
}
.profile-story__kicker {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--bone-50);
}
.profile-story__text { font-family: var(--font-body); font-size: var(--text-base); color: var(--bone); line-height: 1.65; margin-top: var(--s-3); white-space: pre-wrap; }
.profile-socials { list-style: none; margin-top: var(--s-4); padding: 0; }
.profile-socials__row { display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--bone-14); }
.profile-socials__platform { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--bone-50); flex: 0 0 6rem; }
.profile-socials__handle { font-family: var(--font-display); font-size: var(--text-md); color: var(--bone); text-decoration: none; }
.profile-identity-state { margin-top: var(--s-3); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--bone-50); }
/* web booking panel */
.bookpanel__price { font-family: var(--font-mono); font-size: var(--text-lg); color: var(--brass); }
.bookpanel__days { display: flex; flex-wrap: wrap; gap: 6px; }
.bookpanel__slots { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; overflow-x: auto; }
.bookpanel__slot {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .04em;
  border: 1px solid var(--bone-14); border-radius: var(--r-1); background: none;
  color: var(--bone-70); padding: 5px 9px; cursor: pointer;
}
.bookpanel__slot[aria-pressed="true"] { background: var(--bone-08); border: var(--hairline-brass); color: var(--bone); }
.bookpanel__slot:disabled { color: var(--bone-32); cursor: default; text-decoration: line-through; }
.bookpanel__consent { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-sm); color: var(--bone-70); }
.bookpanel__consent input { margin-top: 3px; accent-color: var(--brass); }
.bookpanel__kindline { font-family: var(--font-body); font-size: var(--text-2xs); color: var(--bone-50); margin: 0; }
.bookpanel__balance { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--bone-70); }
.bookpanel__stamp {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--brass); border: var(--hairline-brass); border-radius: var(--r-1);
  background: var(--brass-08); padding: 6px 10px;
}
.bookpanel__short { font-size: var(--text-sm); color: var(--bone-70); margin: 0; }
/* console experience cards */
.console-idcard__token {
  font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: .06em;
  border: 1px dashed var(--bone-14); border-radius: var(--r-1); padding: 6px 10px;
  background: var(--ink-1); cursor: pointer; color: var(--bone);
}
.console-idcard__status { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--bone-50); }

/* ═══════════════════════════════════════════════════════════════════════════
   BUYING OPTIONS — the featured solo buy box (.pp-buyfrom--solo), the See-all
   trigger (.pp-seeall), and the right slide-over dialog (.pp-optpanel) holding
   the ONE ranked alternate-offer list (.pp-offers / .pp-offer).
   Appended as ONE block at the sheet's end so its .pp-offer rules win cascade
   ties against the earlier .pp-managed__* grammar the third-party rows
   dual-class. Paper/Atelier: ink surfaces on hairlines (never shadows), mono
   tabular figures, brass the SOLE accent (hover, checked speed dot, the volume
   arithmetic, buttons), transform/opacity motion on existing tokens only, no
   bounce, prefers-reduced-motion honored. No existing rule is edited.
   ═══════════════════════════════════════════════════════════════════════════ */

/* the featured buy box — the default .pp-buyfrom card minus the radio machinery:
   no dot column, so the ladder/eta lose their 20px gutter; the row isn't clickable */
.pp-buyfrom--solo .pp-buyfrom__row { cursor: default; padding-bottom: 2px; }
.pp-buyfrom--solo .pp-buyfrom__units,
.pp-buyfrom--solo .pp-buyfrom__eta { padding-left: 0; }

/* the See-all trigger — one full-width hairline-top row under the featured box;
   Newsreader body, mono figures, brass only on hover and the trailing arrow */
.pp-seeall {
  display: flex; align-items: center; gap: 6px;
  width: 100%; min-height: 44px;                        /* ≥44px tap target */
  margin-top: 10px; padding: 10px 2px 8px;
  background: none; border: 0; border-top: var(--hairline);
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--bone-70);
  text-align: left; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-inout);
}
.pp-seeall__num {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .01em;
  color: var(--bone); font-variant-numeric: tabular-nums;
}
.pp-seeall::after {
  content: '→'; margin-left: auto; color: var(--bone-50);
  transition: color var(--dur-fast) var(--ease-inout), transform var(--dur-base) var(--ease-out);
}
.pp-seeall:hover { color: var(--brass); }
.pp-seeall:hover .pp-seeall__num { color: var(--brass); }
.pp-seeall:hover::after { color: var(--brass); transform: translateX(2px); }
.pp-seeall:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; border-radius: var(--r-1); }
@media (prefers-reduced-motion: reduce) { .pp-seeall::after { transition: none; } }

/* the additional dim over the compound modal's own veil */
.pp-optpanel__scrim {
  position: fixed; inset: 0; z-index: 2290;             /* above .pp-modal (2100) */
  background: rgba(28, 24, 18, .35);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-inout);
}
.pp-optpanel__scrim.is-open { opacity: 1; }

/* the panel shell — slides from the right on the ONE axis at every breakpoint */
.pp-optpanel {
  position: fixed; top: 0; right: 0; height: 100dvh;
  width: min(440px, 100vw); z-index: 2300;
  background: var(--ink-1); border-left: var(--hairline);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-inout);
}
.pp-optpanel.is-open { transform: translateX(0); }
.pp-optpanel:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .pp-optpanel, .pp-optpanel__scrim { transition: none; }
}

/* sticky header — a calm kicker → Fraunces title → count cadence with real air
   above the kicker; the 44px close sits clear of the text column */
.pp-optpanel__head {
  position: sticky; top: 0; z-index: 1;
  background: var(--ink-1);
  padding: 22px 64px 14px var(--s-4);                   /* right gutter clears the close */
  border-bottom: var(--hairline);
}
.pp-optpanel__kicker {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--bone-50);
}
.pp-optpanel__title {
  margin: 6px 0 0;
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500;
  color: var(--bone); line-height: var(--leading-snug);
}
.pp-optpanel__count { margin-top: 4px; color: var(--bone-50); }
.pp-optpanel__close {
  position: absolute; top: 8px; right: 8px;
  width: 44px; height: 44px;                            /* ≥44px target */
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: var(--r-1);
  font-family: var(--font-body); font-size: 24px; line-height: 1;
  color: var(--bone-50); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-inout);
}
.pp-optpanel__close:hover { color: var(--bone); }
.pp-optpanel__close:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }

/* the RUO gate echo + the ONE hoisted third-party crypto notice */
.pp-optpanel__gate { padding: 10px var(--s-4); border-bottom: var(--hairline); }
.pp-optpanel__note { padding: 10px var(--s-4) 12px; border-bottom: var(--hairline); }
.pp-optpanel__notehead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.pp-optpanel__lead { color: var(--bone-50); margin: 0; }
.pp-optpanel__ships { margin-top: 4px; padding-bottom: 0; border-bottom: 0; }

/* the delivery-speed section — ONE mono kicker line ('DELIVERY SPEED · PARTNER
   LABS', suppliers.js merges the scope into it), lighter rows so the ranked
   offers surface sooner; the shared .pp-speed rules themselves are untouched */
.pp-optpanel__speed { padding: 12px var(--s-4) 0; }
.pp-optpanel__speed .pp-speed { margin-top: 0; border-top: 0; }
/* the chooser's head row when it carries the fee "i" (speedChooserEl info:true) */
.pp-speed__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding-bottom: 6px; border-bottom: var(--hairline);
}
.pp-speed__head .pp-speed__kicker { border-bottom: 0; padding-bottom: 0; }
/* the panel's speed rows (suppliers.js builds .pp-speed__row) — the same row
   grammar checkout's .pp-speed__opt carries, scoped to the panel only */
.pp-optpanel .pp-speed__row { padding: 8px 0 7px; cursor: pointer; }
.pp-optpanel .pp-speed__row + .pp-speed__row { border-top: var(--hairline); }
.pp-optpanel .pp-speed__row:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; border-radius: var(--r-1); }
.pp-optpanel .pp-speed__row.is-checked .pp-speed__dot {
  border-color: var(--brass); background: var(--brass); box-shadow: inset 0 0 0 2.5px var(--ink-1);
}
.pp-optpanel .pp-speed__row.is-checked .pp-speed__name { color: var(--bone); }
.pp-optpanel .pp-speed__row.is-checked .pp-speed__fee { color: var(--bone); }
.pp-optpanel .pp-speed__row.is-checked .pp-speed__sub { color: var(--bone-70); }

/* the ONE ranked offer list — hairline-separated rows, never boxed, never
   shadowed. Rhythm = grouping: the facts inside one offer sit on a tight 2/4px
   ladder, the action 12px below, and 16px block padding either side of each
   hairline — within-offer gaps and between-offer gaps can never be confused. */
.pp-offers { list-style: none; margin: 0; padding: 2px var(--s-4) var(--s-4); }
.pp-offer { padding: 16px 0; }
.pp-offer + .pp-offer { border-top: var(--hairline); }
/* price lockup — mono --text-md figure + the micro unit tag inside it */
.pp-offers .pp-offer__num {
  margin-left: 0; white-space: normal;
  font-family: var(--font-mono); font-size: var(--text-md); letter-spacing: .01em;
  color: var(--bone); font-variant-numeric: tabular-nums;
}
.pp-offers .pp-offer__unit {
  margin-left: 6px;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--bone-50);
}
.pp-offers .pp-offer__delivery {
  margin-top: 2px;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .02em;
  color: var(--bone-70); font-variant-numeric: tabular-nums;
}
/* seller block — the name owns the full row (wraps, never truncates); the
   fulfillment chip sits on its OWN line beneath at every width */
.pp-offers .pp-offer__seller {
  margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 8px; min-width: 0;
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--bone);
}
.pp-offers .pp-offer__soldby { flex: 1 0 100%; min-width: 0; overflow-wrap: anywhere; }
/* the fulfillment chip — hairline-bordered bone mono on BOTH kinds (grammar, not color).
   The NAME owns the whole first line (flex-basis 100%, no max-width clamp), so the
   chip wraps beneath it on every row — short and long seller names share ONE layout. */
.pp-offers .pp-offer__chip {
  flex: 0 0 auto; max-width: max-content;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .02em;
  color: var(--bone-50);
  border: var(--hairline); border-radius: 999px; padding: 2px 9px;
  white-space: nowrap;
}
/* a LIVE volume discount — the one brass arithmetic, verbatim wording */
.pp-offers .pp-offer__volume {
  margin-top: 4px;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .02em;
  color: var(--brass); font-variant-numeric: tabular-nums;
}
/* ONE button system across the interleaved list — the row label + chip already
   carry the partner/third-party difference, so the two buttons read as one
   family in two deliberate weights: partner keeps the solid brass primary
   (.btn--primary --sm, untouched); the third-party order button wears the SAME
   .btn--sm geometry as a quiet brass-tint plate (brass label on brass-08 with a
   brass-dim hairline) — never a faint bone utility outline beside a filled
   primary. Brass stays the sole accent; the capture flow is untouched. */
.pp-offers .pp-offer__btn { margin-top: 12px; min-height: 44px; }   /* ≥44px target, both kinds */
.pp-offers .pp-offer__btn.pp-managed__btn {
  padding: 0.625rem 1.125rem;                 /* .btn--sm metrics — one shared geometry */
  justify-content: center;
  background: var(--brass-08);
  border-color: var(--brass-dim);
  color: var(--brass);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.pp-offers .pp-offer__btn.pp-managed__btn:hover {
  background: var(--brass-14); border-color: var(--brass); color: var(--brass);
}
.pp-offers .pp-offer__btn.pp-managed__btn:disabled,
.pp-offers .pp-offer__btn.pp-managed__btn:disabled:hover {
  background: none; border-color: var(--bone-18); color: var(--bone-50); opacity: 1;
}
.pp-offers .pp-offer__flash { display: block; margin-top: 6px; color: var(--brass); }

/* the panel's own scroll lock — a SEPARATE class from pp-modal-open, so closing
   the panel can never unlock the modal beneath */
body.pp-optpanel-open { overflow: hidden; }

/* ≤540px — a full-width right sheet on the SAME slide axis; the chip already
   sits on its own line at every width, so only the buy button restacks */
@media (max-width: 540px) {
  .pp-optpanel { width: 100vw; }
  .pp-offers .pp-offer__btn {
    display: flex; width: 100%; align-items: center; justify-content: center;
  }
}

/* the SmartSource capture dialog is ALWAYS the top layer — openCapture (byte-
   untouched) mounts .pp-ss-modal on body, a sibling of .pp-modal (2100), the
   panel scrim (2290) and the panel (2300); its original --z-modal (200) painted
   below all three when launched from the panel path. One additive override at
   equal specificity, later in the sheet — the original rule is untouched. */
.pp-ss-modal { z-index: 2400; }

/* ≥44px hit-areas for the panel's small controls — the fee "i" stays visually
   16px (the shared .pp-source-info__btn rule is untouched); an invisible ::after
   pad extends the tap zone inside the panel only. The gate ack row rises to a
   44px touch target without moving its type. */
.pp-optpanel .pp-source-info__btn { position: relative; }
.pp-optpanel .pp-source-info__btn::after { content: ''; position: absolute; inset: -14px; }
.pp-optpanel__gate .pp-ack { min-height: 44px; align-items: center; }

/* ═══ PUO ACCESS LABELS + PDP SECTIONS + AUDIENCE CONTROLS ════════════════
   Structural-rebuild vocabulary (web spec §INTERFACE). Four families:
   1. .pp-access-chip / .pp-access-block — WHO may buy, as quiet brass-tinted
      information (badge grammar, never the alert red — access is a fact,
      not a warning). data-access replaces data-tier here on purpose: the
      checkout guard asserts zero [data-tier] nodes at checkout.
   2. .pp-pdp-sec — the five labeled product-detail sections (pp-rsec grammar:
      top hairline, mono label heading, serif body).
   3. .pp-subs-tabs — Personal/Professional tablist (seg grammar, brass fill
      when selected via aria-selected).
   4. .pp-who — builder "Who is this plan for?" choice row (pp-mode pill
      grammar: hairline pill, brass hairline + brass-08 wash when chosen). */

/* 1a. catalogue-card access chip — painted inside compoundCard so it survives
   pp:prices/pp:inventory repaints; align-self keeps it hugging its text in
   the card's flex column. Wraps (never clips) on 390px card widths. */
.pp-access-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  align-self: flex-start;
  max-width: 100%;
  padding: 2px 9px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  line-height: 1.5;
  text-align: left;
  color: var(--bone-70);
  border: var(--hairline);
  border-radius: var(--r-pill);
  background: transparent;
}
.pp-access-chip[data-access="puo"] {
  color: var(--brass);
  border-color: var(--brass-dim);
  background: var(--brass-08);
}

/* 1b. product-detail two-line access block — between eyebrow and h3 in
   .pp-cdetail__body (parent gap spaces it). Quiet keyline card, same
   grammar as .pp-finder__disclaimer but one step softer (brass-dim). */
.pp-access-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--s-2) var(--s-3);
  border: var(--hairline);
  border-left: 2px solid var(--brass-dim);
  border-radius: var(--r-1);
  font-size: var(--text-sm);
}
.pp-access-block__row { color: var(--bone); line-height: 1.5; }
.pp-access-block__k {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--bone-50);
  margin-right: 2px;
}

/* the ⓘ affordance — the glyph is its own ring, so no border; visually 24px,
   an invisible ::after pad extends the tap zone to the 44px minimum. */
.pp-access-info {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  margin-left: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  background: none;
  border: none;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  color: var(--bone-50);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-inout);
}
.pp-access-info::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; }
.pp-access-info:hover { color: var(--bone); }
.pp-access-info[aria-expanded="true"] { color: var(--brass); }

/* the disclaimer popover — hairline card with the brass keyline (same
   grammar as .pp-source-info__panel); [hidden] must win over the class. */
.pp-access-pop {
  margin-top: var(--s-2);
  padding: 10px 12px;
  border: var(--hairline);
  border-left: 2px solid var(--brass);
  border-radius: var(--r-1);
  background: var(--ink-1);
  color: var(--bone-70);
  font-size: var(--text-sm);
  line-height: 1.55;
  max-width: 60ch;
}
.pp-access-pop[hidden] { display: none; }

/* 2. product-detail sections — five labeled passes down the sheet.
   Top hairline divider + mono label heading (system label register);
   works on a div or an h4 (margin + font reset either way). */
.pp-pdp-sec {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border-top: var(--hairline);
  padding-top: var(--s-3);
}
.pp-pdp-sec__h {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--bone-50);
}
.pp-pdp-sec p { margin: 0; color: var(--bone-70); }

/* 3. subscriptions Personal/Professional tablist — the .seg grammar
   (hairline frame, mono caps, brass fill when chosen), keyed off
   aria-selected because it is a real tablist. Sits OUTSIDE the
   [data-pp-subs] mount so re-renders never clear it. */
.pp-subs-tabs {
  display: inline-flex;
  border: var(--hairline);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--ink-1);
  margin-bottom: var(--s-4);
}
.pp-subs-tabs button {
  min-height: 44px;
  padding: 0.625rem 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--bone-50);
  background: none;
  border: none;
  border-left: var(--hairline-soft);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-inout), color var(--dur-fast) var(--ease-inout);
}
.pp-subs-tabs button:first-child { border-left: none; }
.pp-subs-tabs button:hover { color: var(--bone); }
.pp-subs-tabs button[aria-selected="true"] { background: var(--brass); color: var(--on-brass); }
/* 390px: the two labels share the full gutter width instead of clipping */
@media (max-width: 480px) {
  .pp-subs-tabs { display: flex; width: 100%; }
  .pp-subs-tabs button { flex: 1 1 0; padding-inline: var(--s-2); text-align: center; }
}

/* 4. builder "Who is this plan for?" — a wrapping row of hairline pills
   (pp-mode__opt grammar); selected = brass hairline + brass-08 wash.
   Supports is-active / aria-pressed / aria-selected so the emitting
   side can use whichever state convention it prefers. */
.pp-who {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}
.pp-who button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--bone-70);
  border: var(--hairline);
  border-radius: var(--r-pill);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-inout), color var(--dur-fast) var(--ease-inout), background var(--dur-fast) var(--ease-inout);
}
.pp-who button:hover { border-color: var(--brass-dim); color: var(--bone); }
.pp-who button:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }
.pp-who button.is-active,
.pp-who button[aria-pressed="true"],
.pp-who button[aria-selected="true"] {
  border-color: var(--brass);
  color: var(--brass);
  background: var(--brass-08);
}

/* ----------------------------------------------------------------------------
   PHASE-2 ANALYTICS — footer email opt-in + magic-link account + the
   first-visit privacy notice (assets/shared.js §7d). All honest states:
   the note line carries success AND failure copy verbatim from the beacon.
   ---------------------------------------------------------------------------- */

.footer-signup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  padding-block: var(--s-4);
  margin-bottom: var(--s-5);
  border-top: var(--hairline-soft);
}

.footer-signup h5 {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--bone-32);
  margin-bottom: var(--s-3);
}

.footer-signup__form {
  display: flex;
  gap: var(--s-2);
  max-width: 26rem;
}

.footer-signup__form .input { flex: 1 1 auto; min-width: 0; }
.footer-signup__form .btn { flex: none; }

.footer-signup__note {
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--bone-32);
  margin-top: var(--s-2);
  max-width: 26rem;
}

.footer-signup__note a {
  color: var(--bone-50);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-signup__note a:hover { color: var(--brass); }
.footer-signup__note.is-ok { color: var(--brass); }

@media (max-width: 720px) {
  .footer-signup { grid-template-columns: 1fr; }
}

/* first-visit analytics disclosure — bottom-left (the Peppy orb owns bottom-right),
   below the modal layer so any open dialog always paints above it */
.pa-notice {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: calc(var(--z-orb) - 10);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: 26rem;
  padding: var(--s-3) var(--s-4);
  background: var(--ink-1);
  border: var(--hairline);
  border-radius: var(--r-2);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--bone-50);
  box-shadow: 0 8px 28px rgba(28, 24, 18, 0.18);
}

.pa-notice a {
  color: var(--brass);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pa-notice__close {
  flex: none;
  padding: 0.375rem 0.875rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--bone-70);
  border: var(--hairline);
  border-radius: var(--r-2);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-inout), color var(--dur-fast) var(--ease-inout);
}

.pa-notice__close:hover { border-color: var(--brass); color: var(--brass); }
.pa-notice__close:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }