/* =============================================================================
   PepRally storefront — Carbon canvas, Ember Orange single accent, Sora only.
   PepRally Website Brief §2 (Design System).
   =============================================================================
   The brief's design directive is monochromatic — there is one accent color
   (Ember Orange) and zero category color variation. Every product card on the
   shop grid looks identical except for text. The site reads like a Whoop /
   Oura dashboard, not a supplement store. This stylesheet enforces that.
   ============================================================================= */

/* Brief §2.1 — Color tokens. CSS variables so every component pulls from one
   place; if the operator decides Ember Orange should shift one notch redder,
   it's a single edit at --color-accent. */
.peprally {
  /* Header text, as RGB channels — consumed via rgb(var(--header-text-color)).
     Header rules referenced this token and nothing defined it, so rgb()
     received an empty value, the whole declaration was dropped, and the
     header text fell back to whatever it inherited. Matches --color-text
     (#FFFFFF) because this brand is light-on-dark. */
  --header-text-color: 255, 255, 255;
  --color-bg: #111116;
  --color-surface: #1A1A22;
  --color-accent: #E8550F;
  --color-text: #FFFFFF;
  --color-muted: #64748B;
  --color-subtle: #E2E8F0;
  --color-border: #1E1E26;
  --checkout-accent: #E8550F;

  /* CTA background, deliberately darker than --color-accent.
     #E8550F carries white text at only 3.66:1 — below WCAG AA (4.5:1).
     The button's own rule already WINS the cascade (that was the
     separate 2026-08-29 specificity defect); it was simply winning with
     colours that are hard to read together, on the one brand that has
     never taken an order.
     #C1470C is the same hue at 83% and carries white at 5.03:1 —
     margin over the threshold rather than sitting on it, so browser
     rounding cannot drop it under. Confined to the CTA so the brand
     accent is unchanged everywhere else.
     Guarded by cta_legibility_guard_test. */
  --cta-accent: #C1470C;

  /* ── The ink that lives on the ACCENT, not on the page ────────────
     Anything painted --cta-accent — the homepage Rally CTA and save
     chip, the Rally page's deal button — is not the page, so the page's
     own inks are the wrong answer for it. Measured, --color-subtle
     (#E2E8F0) on --cta-accent is 4.08:1 and FAILS AA, which is exactly
     the kind of near-miss that reads as "fine" by eye.

     Pure white on --cta-accent is 5.03:1. Named rather than written
     inline so that colour is a decision in the token block, where the
     next person looking for it will be — the sixteen copies of
     mail_from_address, arriving in a stylesheet.

     The three light-chip tokens that stood here (--rally-band-cta-bg,
     -hover and -ink) went with `.peprally-rally-band`. A token whose
     component no longer exists is an invitation to reach for it for a
     reason nobody measured. */
  --rally-band-ink: #FFFFFF;

  --checkout-accent-hover: #D04A0A;
  --checkout-accent-glow: rgba(232, 85, 15, 0.2);
  --brand-accent: #E8550F;
  --checkout-bg: #1A1A22;
  --checkout-text: #FFFFFF;
  --checkout-muted: #94a3b8;
  --checkout-border: #2a2a35;
  --checkout-summary-bg: #1E1E28;
  --checkout-input-bg: #22222e;
  --checkout-card-bg: #1c1c26;
  --checkout-card-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 8px 32px rgba(0,0,0,0.25);
  --checkout-font-display: "Sora", -apple-system, BlinkMacSystemFont, sans-serif;
  --checkout-font-body: "Sora", -apple-system, BlinkMacSystemFont, sans-serif;

  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "tnum" on, "lnum" on;
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page-level scrollbar — dark track, ember thumb. Kills the default
   bright-white chrome scrollbar that clashes with Carbon canvas. */
body.peprally {
  scrollbar-color: rgba(232, 85, 15, 0.45) #111116;
  scrollbar-width: thin;
}
body.peprally::-webkit-scrollbar {
  width: 8px;
}
body.peprally::-webkit-scrollbar-track {
  background: #111116;
}
body.peprally::-webkit-scrollbar-thumb {
  background: rgba(232, 85, 15, 0.45);
  border-radius: 4px;
}
body.peprally::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 85, 15, 0.7);
}

.peprally main {
  display: block;
}

.peprally a {
  color: var(--color-accent);
  text-decoration: none;
}

.peprally a:hover {
  text-decoration: underline;
}

/* Brief §2.2 — Typography. Sora at five weights (300 / 400 / 600 / 700 / 800)
   and a clear hierarchy. Body text is white or slate depending on hierarchy
   per the brief. */
.peprally h1,
.peprally h2,
.peprally h3,
.peprally h4 {
  margin: 0 0 0.5em;
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.peprally h1 { font-size: clamp(40px, 6vw, 56px); }
.peprally h2 { font-size: clamp(28px, 4vw, 36px); font-weight: 600; }
.peprally h3 { font-size: clamp(20px, 3vw, 24px); font-weight: 600; }

.peprally p {
  margin: 0 0 1em;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
}

.peprally p.muted {
  color: var(--color-muted);
}

/* =============================================================================
   3.1 Age gate (modal overlay) — brief §3.1
   =============================================================================
   First-visit modal. Cannot interact with anything until confirmed.
   Background: Carbon with 85% opacity blur per spec. Two buttons (Ember
   Orange fill primary, outlined Slate ghost). PepRally.bio logo (text-only
   here — SVG asset comes later).
   ============================================================================= */
.peprally-age-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Chained-class selector intentionally — Nutreko base.css ships a
   `div:empty { display: none }` rule. The scrim is an empty <div>
   styled as a backdrop, so without this override the scrim is
   hidden and the dim never paints (operator-reported 2026-05-07
   "the 21 age gate doesn't dim the rest of the page"). Specificity
   (0,2,0) beats Nutreko's (0,1,1). */
.peprally-age-gate .peprally-age-gate__scrim {
  display: block;
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 22, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.peprally-age-gate__card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  max-width: 480px;
  width: calc(100% - 48px);
  padding: 40px 32px;
  text-align: center;
}

.peprally-age-gate__wordmark {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.peprally-age-gate__wordmark .accent {
  color: var(--color-accent);
}

.peprally-age-gate__heading {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.peprally-age-gate__body {
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.peprally-age-gate__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 20px;
}

.peprally-age-gate__btn {
  display: block;
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.15s, opacity 0.15s;
}

.peprally-age-gate__btn--primary {
  background: var(--color-accent);
  color: var(--color-text);
}

.peprally-age-gate__btn--primary:hover {
  opacity: 0.9;
}

.peprally-age-gate__btn--ghost {
  background: transparent;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}

.peprally-age-gate__btn--ghost:hover {
  border-color: var(--color-muted);
  color: var(--color-text);
}

.peprally-age-gate__legal {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0;
}

/* =============================================================================
   Age-blocked page — brief §3.1 exit path
   ============================================================================= */
.peprally-age-blocked {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
}

.peprally-age-blocked__card {
  max-width: 480px;
}

.peprally-age-blocked__heading {
  font-size: 28px;
  margin-bottom: 12px;
}

.peprally-age-blocked__body {
  color: var(--color-muted);
}

/* =============================================================================
   Trust strip — brief §3.2
   =============================================================================
   Horizontal strip with Ember Orange icons + white text:
   "Batch-Specific COAs" | "Third-Party Tested" | "COA on Every Batch" |
   "Free Shipping $150+". On Carbon background. Sparse. Data-forward.

   Slot 3 carried an unqualified US-origin claim until 2026-08-13. The
   supply chain is mixed domestic/imported, so it failed the FTC's
   all-or-virtually-all standard. Do not restore it here or in the
   markup — origin_claim_guard_test.rb scans this file for that reason,
   and it will fail on the phrase appearing even in a comment.
   ============================================================================= */
.peprally-trust-strip {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 32px 24px;
}

.peprally-trust-strip__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
}

.peprally-trust-strip__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.peprally-trust-strip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  flex: 0 0 auto;
}

/* =============================================================================
   Protocol callout — brief §3.2
   =============================================================================
   Section with heading "Built for your protocol." Brief copy. Optional
   small grid of product names in oversized Sora 800 (data-readout feel).
   ============================================================================= */
.peprally-protocol {
  padding: 80px 24px;
  background: var(--color-bg);
}

.peprally-protocol__inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.peprally-protocol__heading {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.peprally-protocol__heading .accent {
  color: var(--color-accent);
}

.peprally-protocol__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-muted);
  /* Operator (2026-05-05): "the footer tagline is not centered and it
     wraps 2 lines when it shouldn't ... Guesswork is on line 2 and it
     looks stupid". The 600px max-width was clipping
     "Every batch independently tested. COAs on every product page.
     No guesswork." onto two lines on desktop, with "No guesswork."
     orphaned on the second line. Bump to 760px so the full sentence
     fits one line on desktop; on mobile (max-width: 760px viewport)
     the natural wrap still kicks in via flexbox-default behavior. */
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* =============================================================================
   Brand-footer compliance overrides — shared partial uses .brand-footer*
   classes; we map them to the Carbon palette here.
   ============================================================================= */
.peprally .brand-footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: 48px 24px 32px;
  color: var(--color-muted);
}

.peprally .brand-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.peprally .brand-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

.peprally .brand-footer__nav a {
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.peprally .brand-footer__nav a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.peprally .brand-footer__ruo,
.peprally .brand-footer__fda {
  text-align: center;
  font-size: 12px;
  color: var(--color-muted);
  margin: 0 0 8px;
  line-height: 1.5;
}

.peprally .brand-footer__copy {
  text-align: center;
  font-size: 13px;
  color: var(--color-muted);
  margin: 24px 0 0;
}

/* =============================================================================
   Header / nav — brief §3.2 implies a minimal nav. Cart icon top right.
   ============================================================================= */
.peprally-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(17, 17, 22, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.peprally-nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.peprally-nav__brand {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.peprally-nav__brand:hover {
  text-decoration: none;
}

.peprally-nav__brand .accent {
  color: var(--color-accent);
}

.peprally-nav__links {
  display: flex;
  gap: 24px;
  align-items: center;
}

.peprally-nav__link {
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.peprally-nav__link:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.peprally-nav__cart {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 2px;
  transition: border-color 0.15s, color 0.15s;
}

.peprally-nav__cart:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* =============================================================================
   Product card (shared: homepage grid, shop grid, related products)
   =============================================================================
   Brief §3.2 / §3.3 — Carbon Light bg, identical treatment per card. Only
   text differs. Hover: subtle Ember Orange border glow.
   ============================================================================= */
.peprally-card {
  list-style: none;
  margin: 0;
}

.peprally-card__link {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 24px;
  color: var(--color-text);
  height: 100%;
  transition: border-color 0.2s, transform 0.2s;
}

.peprally-card__link:hover {
  border-color: var(--color-accent);
  text-decoration: none;
  transform: translateY(-2px);
}

.peprally-card__tagline {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.peprally-card__name {
  color: var(--color-text);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 24px);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.peprally-card__descriptor {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 400;
  margin: 0 0 16px;
  line-height: 1.4;
}

.peprally-card__dose {
  color: var(--color-text);
  font-weight: 800;
  font-size: clamp(20px, 2.5vw, 28px);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.peprally-card__price {
  color: var(--color-text);
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 16px;
}

.peprally-card__view {
  display: inline-block;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* =============================================================================
   Homepage product grid — brief §3.2 (3×4 desktop, 2×6 tablet, 1×12 mobile)
   ============================================================================= */
.peprally-grid-section {
  padding: 80px 24px;
  background: var(--color-bg);
}

.peprally-grid-section__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.peprally-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 960px) {
  .peprally-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .peprally-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   Shop / collection page — brief §3.3
   ============================================================================= */
.peprally-shop {
  padding: 64px 24px 96px;
  max-width: 1200px;
  margin: 0 auto;
}

.peprally-shop__header {
  text-align: center;
  margin-bottom: 40px;
}

.peprally-shop__heading {
  font-size: clamp(36px, 5vw, 48px);
  margin-bottom: 12px;
}

.peprally-shop__subhead {
  color: var(--color-muted);
  font-size: 14px;
  letter-spacing: 0.04em;
}

.peprally-shop__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
}

.peprally-shop__filter {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.peprally-shop__filter:hover {
  color: var(--color-text);
  border-color: var(--color-muted);
  text-decoration: none;
}

.peprally-shop__filter--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text);
}

.peprally-shop__filter--active:hover {
  color: var(--color-text);
  border-color: var(--color-accent);
}

.peprally-shop__sort {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  margin-bottom: 32px;
}

.peprally-shop__sort-label {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.peprally-shop__sort-select {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 12px;
  cursor: pointer;
}

.peprally-shop__grid {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 960px) {
  .peprally-shop__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .peprally-shop__grid { grid-template-columns: 1fr; }
}

.peprally-shop__ruo-note {
  text-align: center;
  font-size: 13px;
  color: var(--color-muted);
  max-width: 600px;
  margin: 32px auto 0;
}

/* =============================================================================
   PDP — brief §3.4
   =============================================================================
   Split layout: image left (vial mockup placeholder), data stack right.
   Below-fold tab system: Overview | COA | Shipping. Related products row.
   ============================================================================= */
.peprally-pdp {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

.peprally-pdp__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 96px;
}

@media (max-width: 800px) {
  .peprally-pdp__split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.peprally-pdp__image-frame {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Vial mockup — minimal CSS-only vial shape with the orange cap as the
   only color cue. Real photography replaces this when assets land. */
.peprally-pdp__vial {
  position: relative;
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.peprally-pdp__vial-cap {
  width: 70%;
  height: 24px;
  background: var(--color-accent);
  border-radius: 2px 2px 0 0;
}

.peprally-pdp__vial-body {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0 0 4px 4px;
  padding: 64px 12px;
  text-align: center;
}

.peprally-pdp__vial-name {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.peprally-pdp__info > * + * {
  margin-top: 16px;
}

.peprally-pdp__tagline {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
}

.peprally-pdp__name {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.peprally-pdp__descriptor {
  color: var(--color-muted);
  font-size: 14px;
  margin: 0;
}

.peprally-pdp__dose {
  color: var(--color-text);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 32px);
  margin: 0;
}

.peprally-pdp__price {
  color: var(--color-text);
  font-weight: 600;
  font-size: 22px;
  margin: 0;
}

.peprally-pdp__cart-form {
  display: flex;
  gap: 12px;
  align-items: end;
  margin-top: 24px;
}

.peprally-pdp__qty-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.peprally-pdp__qty-label span {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.peprally-pdp__qty-input {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  font-family: inherit;
  font-size: 14px;
  padding: 12px;
  width: 80px;
}

.peprally-pdp__cart-button {
  flex: 1;
  background: var(--color-accent);
  color: var(--color-text);
  border: none;
  border-radius: 2px;
  padding: 14px 24px;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s;
}

.peprally-pdp__cart-button:hover {
  opacity: 0.9;
}

.peprally-pdp__ruo-badge {
  display: inline-block;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--color-border);
  padding: 6px 12px;
  border-radius: 2px;
}

/* Tab system — brief §3.4. Vanilla JS toggles --active classes;
   without JS, all panels are visible (progressive enhancement). */
.peprally-pdp__tabs {
  border-top: 1px solid var(--color-border);
  padding-top: 48px;
}

.peprally-pdp__tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 32px;
}

.peprally-pdp__tab-trigger {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-muted);
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 24px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.peprally-pdp__tab-trigger:hover {
  color: var(--color-text);
}

.peprally-pdp__tab-trigger--active {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

.peprally-pdp__tab-panel {
  margin-bottom: 32px;
}

/* When JS is active (data-js attribute set by inline script), only
   the active panel is visible. Without JS, all panels stack — works
   without a tab interaction. */
.peprally-pdp__tabs[data-js] .peprally-pdp__tab-panel {
  display: none;
}

.peprally-pdp__tabs[data-js] .peprally-pdp__tab-panel--active {
  display: block;
}

.peprally-pdp__tab-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  max-width: 720px;
}

.peprally-pdp__tab-note {
  font-size: 13px;
  color: var(--color-muted);
  max-width: 720px;
  margin-top: 16px;
}

.peprally-pdp__tab-tagline {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 16px;
}

/* PDP layout: center product info vertically with image */
@media (min-width: 1000px) {
  body.peprally .main-product {
    align-items: center !important;
  }
}

/* Tighter spacing on PDP right column elements */
body.peprally .ap-productmeta {
  padding-top: 0 !important;
}
body.peprally .ap-productform {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.peprally .ap-productmeta__title {
  margin-bottom: 4px !important;
}
body.peprally .ap-productmeta__price-list-container {
  margin-bottom: 12px !important;
}

/* RUO policy line: tighter to trust badges */
body.peprally .policy-content {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  opacity: 0.6;
}

/* Override Nutreko's .product-content flex layout — its ap-theme.css
   forces display:flex + justify-content:space-between at ≥1000px,
   expecting .product-content__tabs + .product-content__featured-products
   inner wrappers. Our PDP uses plain tab/panel markup inside
   .product-content, so the flex creates a broken 2-column split.
   Also nuke the 1200px margin-left/right that uses unset CSS vars. */
body.peprally .product-content {
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 24px !important;
}

.peprally-pdp__related {
  margin-top: 64px;
}

.peprally-pdp__related-heading {
  font-size: 24px;
  margin-bottom: 24px;
  font-weight: 600;
}

.peprally-pdp__related-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 800px) {
  .peprally-pdp__related-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   Cart — full page (/peprally/cart) + slide-out drawer. Brief §3.9.
   ============================================================================= */

/* --- Full cart page --- */
.peprally-cart {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

.peprally-cart__header {
  margin-bottom: 32px;
}

.peprally-cart__heading {
  font-size: 36px;
  font-weight: 700;
}

.peprally-cart__layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: start;
}

@media (max-width: 800px) {
  .peprally-cart__layout {
    grid-template-columns: 1fr;
  }
}

.peprally-cart__list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.peprally-cart__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
}

.peprally-cart__row-tagline {
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.peprally-cart__row-name {
  color: var(--color-text);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
}

.peprally-cart__row-descriptor {
  color: var(--color-muted);
  font-size: 13px;
  margin: 0;
}

.peprally-cart__row-qty {
  color: var(--color-muted);
  font-size: 13px;
  margin: 0;
}

.peprally-cart__row-price {
  color: var(--color-text);
  font-weight: 600;
  font-size: 16px;
  margin: 0;
}

.peprally-cart__continue-link {
  display: inline-block;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.peprally-cart__continue-link--primary {
  color: var(--color-accent);
}

.peprally-cart__summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 24px;
}

.peprally-cart__summary-heading {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 16px;
}

.peprally-cart__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 15px;
}

.peprally-cart__summary-row strong {
  color: var(--color-text);
}

.peprally-cart__summary-row--field {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.peprally-cart__summary-row--field label {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.peprally-cart__summary-row--field input {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 10px;
  font-family: inherit;
  font-size: 13px;
}

.peprally-cart__summary-muted {
  color: var(--color-muted);
  font-size: 13px;
}

/* Carries `a` deliberately. `.peprally a { color: … }` is specificity
   (0,1,1) and a bare `.peprally-cart__checkout-btn` is (0,1,0), so the button's own
   `color` was discarded and the link colour won. Measured in a real
   browser 2026-08-29 — the CTA rendered near-black text on the
   accent background. Guarded by cta_contrast_guard_test. */
.peprally a.peprally-cart__checkout-btn,
.peprally-cart__checkout-btn {
  display: block;
  text-align: center;
  background: var(--cta-accent);
  color: var(--color-text);
  padding: 14px 24px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 16px 0 8px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.peprally-cart__checkout-btn:hover {
  opacity: 0.85;
  text-decoration: none;
}

.peprally-cart__summary-note {
  font-size: 13px;
  color: var(--color-muted);
  text-align: center;
  margin: 0;
}

.peprally-cart__empty {
  text-align: center;
  padding: 64px 24px;
}

.peprally-cart__empty-msg {
  color: var(--color-muted);
  font-size: 16px;
  margin-bottom: 24px;
}

/* --- Slide-out drawer --- */
.peprally-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 1050;
  pointer-events: none;
  visibility: hidden;
}

.peprally-cart-drawer--open {
  pointer-events: auto;
  visibility: visible;
}

/* `display` is load-bearing — Nutreko base.css ships
   `div:empty { display: none }` and this scrim is an empty <div>, so
   without it the drawer's dim never paints. FOURTH instance of this
   rule in this repo: the age-gate scrim (operator-reported 2026-05-07),
   the hero overlay, the rally progress fill (operator reported it three
   times, 2026-09-17), and this one — found by the guard written for the
   third. Specificity cannot win a property your rule never declares. */
.peprally-cart-drawer__scrim {
  display: block;
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 22, 0.5);
  opacity: 0;
  transition: opacity 0.25s;
}

.peprally-cart-drawer--open .peprally-cart-drawer__scrim {
  opacity: 1;
}

.peprally-cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 420px;
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
  display: flex;
  flex-direction: column;
}

.peprally-cart-drawer--open .peprally-cart-drawer__panel {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .peprally-cart-drawer__scrim,
  .peprally-cart-drawer__panel {
    transition: none;
  }
}

.peprally-cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid var(--color-border);
}

.peprally-cart-drawer__heading {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

.peprally-cart-drawer__close {
  background: transparent;
  border: none;
  color: var(--color-muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.peprally-cart-drawer__close:hover {
  color: var(--color-text);
}

.peprally-cart-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
}

.peprally-cart-drawer__row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border);
  align-items: start;
}

.peprally-cart-drawer__row-thumb {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
}

.peprally-cart-drawer__row-thumb-name {
  font-size: 8px;
  color: var(--color-muted);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.peprally-cart-drawer__row-tagline {
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 2px;
}

.peprally-cart-drawer__row-name {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
}

.peprally-cart-drawer__row-qty {
  color: var(--color-muted);
  font-size: 12px;
  margin: 0;
}

.peprally-cart-drawer__row-price {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.peprally-cart-drawer__footer {
  border-top: 1px solid var(--color-border);
  padding: 24px;
}

.peprally-cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 15px;
}

/* Specificity-bumped with `a` qualifier — `.peprally a { color: orange }`
   was painting Checkout text orange-on-orange via cascade. */
/* Same --cta-accent as the cart-page button. The drawer is a SECOND
   route to checkout with its own rule, and fixing only the page button
   left this one at 3.66:1 — the exact "a fix applied to one caller is
   not a fix applied to a rule" trap this codebase keeps hitting.
   Guarded for both buttons by cta_legibility_guard_test. */
.peprally a.peprally-cart-drawer__checkout,
.peprally a.peprally-cart-drawer__checkout:hover {
  display: block;
  text-align: center;
  background: var(--cta-accent);
  color: var(--color-text) !important;
  padding: 14px 24px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.peprally a.peprally-cart-drawer__checkout:hover {
  opacity: 0.85;
}

.peprally a.peprally-cart-drawer__view-cart,
.peprally a.peprally-cart-drawer__view-cart:hover {
  color: var(--color-muted) !important;
  text-decoration: none;
}

.peprally-cart-drawer__view-cart {
  display: block;
  text-align: center;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Cross-portfolio attach card. Surfaces a one-click BacWater 30 mL
   add inside the peptide-brand cart drawer (PORTFOLIO_PLAN.md §4.1).
   Brand-token palette — Ember Orange accent on Carbon canvas. */
.peprally-cart-drawer__bacwater-attach {
  border-top: 1px solid var(--color-border);
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.peprally-cart-drawer__bacwater-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.peprally-cart-drawer__bacwater-eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.peprally-cart-drawer__bacwater-name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.peprally-cart-drawer__bacwater-price {
  margin: 0;
  font-size: 14px;
  color: var(--color-text);
}

.peprally-cart-drawer__bacwater-add {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  padding: 12px 16px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}

.peprally-cart-drawer__bacwater-add:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

.peprally-cart-drawer__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 16px;
  text-align: center;
}

.peprally-cart-drawer__empty p {
  color: var(--color-muted);
  margin: 0;
}

.peprally-cart-drawer__shop-link {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* =============================================================================
   Content pages — About, FAQ, Contact, Shipping, Legal. Brief §3.5 / §3.7 /
   §3.8 / §3.10. Single shared layout: narrow column on Carbon, Sora type,
   Ember Orange accents on links + headings.
   ============================================================================= */
.peprally-content {
  padding: 64px 24px 96px;
}

.peprally-content__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.peprally-content__inner--narrow {
  max-width: 760px;
}

.peprally-content__header {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}

.peprally-content__title {
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.peprally-content__lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 600px;
  margin: 0;
}

.peprally-content__section {
  margin-bottom: 40px;
}

.peprally-content__heading {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.peprally-content__heading .accent {
  color: var(--color-accent);
}

.peprally-content__section p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 12px;
}

.peprally-content__note {
  font-size: 12px;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
  margin-top: 48px;
}

/* =============================================================================
   FAQ accordion — brief §3.7. Native <details>/<summary> with custom arrow.
   ============================================================================= */
.peprally-faq__category {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 40px 0 16px;
}

.peprally-faq__category:first-child {
  margin-top: 0;
}

.peprally-faq__item {
  border-bottom: 1px solid var(--color-border);
  padding: 18px 0;
}

.peprally-faq__item summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  list-style: none;
  position: relative;
  padding-right: 32px;
}

.peprally-faq__item summary::-webkit-details-marker {
  display: none;
}

.peprally-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-accent);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
}

.peprally-faq__item[open] summary::after {
  content: "−";
}

.peprally-faq__item p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-muted);
  margin: 12px 0 0;
}

/* =============================================================================
   COAs / Lab Results page — brief §3.6. Dark "lab dashboard" feel.
   ============================================================================= */
.peprally-coas {
  padding: 64px 24px 96px;
}

.peprally-coas__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.peprally-coas__header {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}

.peprally-coas__title {
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.peprally-coas__lede {
  font-size: 16px;
  color: var(--color-muted);
  line-height: 1.6;
  max-width: 720px;
  margin: 0;
}

.peprally-coas__stats {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.peprally-coas__stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 24px;
  text-align: center;
}

.peprally-coas__stat-value {
  display: block;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.peprally-coas__stat-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.peprally-coas__empty {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 32px;
  text-align: center;
  color: var(--color-muted);
  margin-bottom: 48px;
}

.peprally-coas__grid {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.peprally-coas__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.peprally-coas__card-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

.peprally-coas__card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 24px;
  flex: 1;
}

.peprally-coas__card-meta div {
  border-left: 2px solid var(--color-border);
  padding-left: 10px;
}

.peprally-coas__card-meta dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 4px;
}

.peprally-coas__card-meta dd {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.peprally-coas__pass {
  color: var(--color-accent) !important;
}

.peprally-coas__card-cta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.peprally-coas__note {
  font-size: 12px;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
  line-height: 1.6;
}

/* =============================================================================
   Per-product COA history — brief §3.6 detail surface.
   ============================================================================= */
.peprally-coa-history {
  padding: 64px 24px 96px;
}

.peprally-coa-history__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.peprally-coa-history__header {
  margin-bottom: 32px;
}

.peprally-coa-history__breadcrumb {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.peprally-coa-history__breadcrumb a {
  color: var(--color-muted);
}

.peprally-coa-history__breadcrumb a:hover {
  color: var(--color-accent);
}

.peprally-coa-history__title {
  font-size: clamp(32px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.peprally-coa-history__sku {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.peprally-coa-history__table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
}

.peprally-coa-history__table th,
.peprally-coa-history__table td {
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.peprally-coa-history__table th {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.peprally-coa-history__table td {
  font-size: 14px;
  color: var(--color-text);
}

.peprally-coa-history__table tbody tr {
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

.peprally-coa-history__table tbody tr:hover {
  background: rgba(232, 85, 15, 0.06);
  box-shadow: 0 0 12px rgba(232, 85, 15, 0.15);
}

.peprally-coa-history__batch-id {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--color-muted);
}

.peprally-coa-history__pass {
  color: var(--color-accent);
  font-weight: 700;
}

.peprally-coa-history__row-cta {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.peprally-coa-history__empty {
  padding: 32px;
  text-align: center;
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.peprally-coa-history__note {
  font-size: 12px;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
  margin-top: 32px;
  line-height: 1.6;
}


/* Force shop product grid to 3-col on desktop / 2-col on tablet / 1-col mobile.
   Nutreko's .ap-productlist__inner relies on --section-products-per-row CSS
   var which is never set in our load (Liquid theme settings stripped during
   ingestion). Without it the grid collapses to 1-column-on-the-right. */
.peprally .ap-productlist__inner:not(.peprally-slider__track),
.peprally .peprally-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-flow: row !important;
  gap: 24px !important;
  overflow: visible !important;
  margin: 0 !important;
}
@media (max-width: 900px) {
  .peprally .ap-productlist__inner:not(.peprally-slider__track),
  .peprally .peprally-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .peprally .ap-productlist__inner:not(.peprally-slider__track),
  .peprally .peprally-grid { grid-template-columns: 1fr !important; }
}



/* Same defensive override pattern for peprally + mypeptides. */
.peprally ap-productfacet,
.peprally .ap-productfacet { display: block !important; }
.peprally .ap-productfacet__main { width: 100% !important; }
.peprally .ap-productfacet__active-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}



/* Filter chip visibility — Nutreko's .button--primary / .button--outline
   defines its own text color via CSS vars, but our peprally a { color: orange }
   wins on specificity for <a> chips. Force chip text colors. */
.peprally a.button.button--primary,
.peprally a.button.button--primary:hover {
  color: var(--color-text) !important;
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

/* The checkout CTA, which also carries the theme's generic button
   classes.
   Measured in a real browser: the element is
     .peprally-cart__checkout-btn button button--primary button--full
   so BOTH the CTA rule and the generic button rule above match it. The
   generic one is (0,3,1) AND !important; the CTA rule is (0,2,1) with
   none — so the CTA's colour was discarded and the button rendered
   white on --color-accent at 3.66:1, below AA.
   This is the ORIGINAL 2026-08-29 specificity defect one layer deeper:
   the earlier fix qualified against `.peprally a`, and this rule beats
   that too. Carrying the button classes makes it (0,4,1); !important
   is required because the rule it must beat has it.
   No static check can see this — only resolving the cascade in a
   browser can. `BRAND=peprally node scripts/screenshot-cart.mjs` now
   prints the winning rule for exactly this reason. */
.peprally a.button.button--primary.peprally-cart__checkout-btn,
.peprally a.button.button--primary.peprally-cart__checkout-btn:hover,
.peprally a.button.button--primary.peprally-cart-drawer__checkout,
.peprally a.button.button--primary.peprally-cart-drawer__checkout:hover {
  background: var(--cta-accent) !important;
  border-color: var(--cta-accent) !important;
  color: var(--color-text) !important;
}
.peprally a.button.button--outline,
.peprally a.button.button--outline:hover {
  color: var(--color-text) !important;
  background: transparent !important;
  border-color: rgba(245, 245, 247, 0.32) !important;
}

/* Filter chips fit on one row at desktop. */
.peprally .ap-productfacet__active-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
  padding: 16px 0 !important;
  margin: 0 !important;
}
.peprally .ap-productfacet__active-list .button--small {
  padding: 0 14px !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
}



/* Card link text + name visibility on shop grid (.product-item-meta__title
   is the Nutreko shop card title link). The peprally a { color: orange }
   rule was painting these orange-on-dark — readable normally — but the
   user reported text disappearing on the active/selected state. Force
   stable text color regardless of state. */
.peprally a.product-item-meta__title,
.peprally a.product-item-meta__title:hover,
.peprally .product-item-meta__title a,
.peprally .product-item-meta__title a:hover {
  color: var(--color-text) !important;
}
.peprally .product-item .type-product,
.peprally .product-item .product-item-meta {
  color: var(--color-text) !important;
}



/* Defensive word-wrap on every brand card text — long tagline/name
   stays on word boundaries, doesn't break mid-word. */
.peprally .peprally-card__name,
.peprally .peprally-card__tagline,
.peprally .product-item-meta__title,
.peprally .product-item .type-product,
.peprally .product-item-meta p {
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
}


/* =========================================================================
   PepRally shop product card — hard overrides (2026-05-04)
   =========================================================================
   Operator: 'shopping the stack and mousing over the product grid has an
   animation that pulls up a banner from CLICK VIEW COMPOUND. WHY THE FUCK
   IS THIS SHIT STILL NOT CENTERED. CENTER THIS SHIT AND I DON'T WANT TO
   SEE THE FUCKING LEFT SIDE OF THE FUCKING BANNER. IT'S SUPPOSED TO BE IN
   THE BOUND OF THE PRODUCT BOX. fix this now. also the grid page is
   broken the way the others used to be fix.'

   Two issues fixed here:
   1. Nutreko's stripped jQuery raised the .btn-service.btn-addcart strip
      from below on hover via absolute positioning. Without the JS but with
      the CSS still in scope, the action strip rendered at static
      coordinates and bled outside the card on the left. Kill those rules
      and replace with a CSS-only static centered button at the bottom of
      each card.
   2. Meta-bar (count + sort) wrapped weirdly because the ap-productfacet
      grid layout expects sidebar siblings; without them the bar items
      collapsed onto each other. Force a flex row with space-between.
   ========================================================================= */

/* Meta-bar — count on the left, Sort by + select on the right. */
.peprally .ap-productfacet__meta-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
  padding: 12px 0 24px;
  border-bottom: 1px solid rgba(245, 245, 247, 0.08);
  margin-bottom: 24px;
}
.peprally .ap-productfacet__meta-bar-item--count {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.peprally .ap-productfacet__meta-bar-item--sort form {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.peprally .ap-productfacet__sort-by-title {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.peprally .ap-productfacet__meta-bar select {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid rgba(245, 245, 247, 0.18);
  color: var(--color-text);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

a.peprally-card-link,
a.peprally-card-link:hover,
a.peprally-card-link:focus { display: flex; flex-direction: column; color: inherit; text-decoration: none; cursor: pointer; }

/* Product card — Carbon-on-Carbon tile, ember accent, contained hover. */
.peprally .product-item-wrapper {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(232, 85, 15, 0.04) !important;
  border: 1px solid rgba(245, 245, 247, 0.08) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, border-color 0.25s ease,
              box-shadow 0.3s ease, background 0.25s ease !important;
}
.peprally .product-item-wrapper:hover,
.peprally .product-item-wrapper:focus-within {
  transform: translateY(-4px) !important;
  border-color: rgba(232, 85, 15, 0.6) !important;
  box-shadow:
    0 0 16px rgba(232, 85, 15, 0.25),
    0 0 40px rgba(232, 85, 15, 0.15),
    0 12px 48px rgba(232, 85, 15, 0.12) !important;
  background: rgba(232, 85, 15, 0.08) !important;
}

/* Hide Nutreko's icon-only .btn-service variants (quickview / wishlist
   etc.) — those depend on jQuery handlers we don't ship. The slide-up
   .service-add-cart strip below is the action we DO want. */
.peprally .product-item-wrapper .btn-service,
.peprally .product-item-wrapper .service-product {
  display: none !important;
}

/* HOVER BANNER — beautiful slide-up "View Compound" CTA per operator
   ('fix it so that it is beautiful'). The .service-add-cart block is
   absolutely positioned INSIDE the card so its bounds are the card's
   bounds (no left-bleed). Default state: translated 100% below the
   card's visible area, opacity 0. Hover/focus state: translated to 0,
   opacity 1, with an ember-fade gradient backdrop so the banner reads
   as a soft glass overlay coming UP from the card bottom. */
.peprally .service-add-cart {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-top: auto !important;
  min-height: 68px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
  z-index: 4;
}
.peprally .service-add-cart .btn-addcart {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body.peprally .service-add-cart .btn-addcart > a,
body.peprally .service-add-cart .btn-addcart > a.button.button--outline,
body.peprally a.peprally-view-compound-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(100% - 32px) !important;
  text-align: center !important;
  margin: 12px auto 16px !important;
  padding: 14px 24px !important;
  background: #E8550F !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background 0.2s ease !important;
}
.peprally .service-add-cart .btn-addcart > a:hover,
.peprally .service-add-cart .btn-addcart > a:focus {
  background: rgba(232, 85, 15, 0.88) !important;
}

/* Card meta padding — generous padding + centered text in the
   grey card boxes. Nutreko default has this near-zero. */
.peprally .product-item__info-top {
  padding: 20px 20px 8px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
.peprally .product-item__info {
  padding: 12px 20px 44px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
}
.peprally .product-item__image-wrapper {
  padding: 0 20px !important;
}
.peprally .product-item-meta,
.peprally .product-item-meta1,
.peprally .product-item-meta2 {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}
.peprally .product-item-meta__title {
  text-align: center !important;
  width: 100% !important;
}
.peprally .type-product {
  text-align: center !important;
  width: 100% !important;
}

/* Price treatment on EVERY product card on PepRally — operator
   (asked >10 times by 2026-05-05): 'center the damn prices and make
   them the orange color'. The earlier selectors required `.product-item`
   ancestor (shop grid) but the home slideshow's Nutreko slider uses
   `<product-item class="slider__item peprally-slider__item">` which
   doesn't carry `.product-item` as a class. Drop the ancestor
   requirement entirely — `body.peprally` scope is enough and won't
   leak (Glam / MyPeptides / SurfPeptides / BacWater have their own
   body classes). Match every wrapper that emits .product-price on
   PepRally. */
body.peprally .product-price,
body.peprally .product-price .price,
body.peprally .price {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  color: var(--color-accent) !important;
  font-family: 'Sora', -apple-system, sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  margin-top: 6px !important;
}
body.peprally .product-item-meta__descriptor,
body.peprally .product-item-meta__dose {
  text-align: center !important;
}

body.peprally .service-add-cart .ap-text-loaderbutton {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

/* ----------------------------------------------------------------
   Home features — featured-product slider, newsletter section.
   All scoped under body.peprally so they only apply on PepRally
   pages and don't leak into other brands' shared styles.
   ---------------------------------------------------------------- */

/* Featured-product slider — horizontal scroll track + arrow controls.
   The track is overflow-x: auto so it falls back to native swipe on
   mobile and the JS-bound arrows just call scrollBy. */
body.peprally .peprally-slider {
  display: block;
  overflow: hidden;
}
body.peprally .peprally-slider .peprally-slider__track {
  /* Operator sister-bug to surf-slider (PR #152, 2026-05-05): the
     shop-grid rule `.peprally .ap-productlist__inner { display: grid
     !important; grid-template-columns: repeat(3, 1fr) !important;
     grid-auto-flow: row !important }` was winning the cascade against
     this slider track (both share `.ap-productlist__inner` on the same
     element). Result: peprally home's 12-card slider was rendering as
     a static 3-up grid with no horizontal scroll. Bump !important on
     every grid axis the slider needs + explicit `grid-template-columns:
     unset` to undo the shop template. */
  display: grid !important;
  grid-template-columns: unset !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(240px, 1fr) !important;
  gap: 24px !important;
  overflow-x: auto !important;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 24px;
  padding: 8px 4px 24px;
  /* Visible scrollbar is noisy on a horizontal slider; hide on
     blink/webkit and let the arrows + native swipe drive it. */
  scrollbar-width: thin;
}
body.peprally .peprally-slider .peprally-slider__track::-webkit-scrollbar {
  height: 6px;
}
body.peprally .peprally-slider .peprally-slider__track::-webkit-scrollbar-thumb {
  background: rgba(232, 85, 15, 0.4);
  border-radius: 3px;
}
body.peprally .peprally-slider .peprally-slider__item {
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  body.peprally .peprally-slider .peprally-slider__track {
    grid-auto-columns: minmax(280px, 1fr);
  }
}
@media (min-width: 1100px) {
  body.peprally .peprally-slider .peprally-slider__track {
    grid-auto-columns: minmax(0, calc(25% - 18px));
  }
}
body.peprally .peprally-slider__controls {
  display: inline-flex;
  gap: 12px;
}
body.peprally .peprally-slider__arrow {
  background: transparent;
  color: var(--color-text);
  border: 1px solid rgba(255, 255, 255, 0.18);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  font-family: 'Sora', -apple-system, sans-serif;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
body.peprally .peprally-slider__arrow:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #FFFFFF;
}

/* Newsletter section — Nutreko component-newsletter.css gives us the
   form internals; the section wrapper here positions and skins the
   Carbon-themed header copy. Anchored as #newsletter so the
   controller's redirect target lands inline. */
body.peprally .brand-newsletter-section {
  background: linear-gradient(180deg, #0B0B12 0%, #18181F 100%);
  border-top: 1px solid rgba(232, 85, 15, 0.15);
  padding: 80px 24px;
}
body.peprally .brand-newsletter-section__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
body.peprally .brand-newsletter-section__heading {
  margin: 0 0 12px;
  font-family: 'Sora', -apple-system, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.01em;
  color: var(--color-text);
}
body.peprally .brand-newsletter-section__body {
  margin: 0 0 32px;
  font-family: 'Sora', -apple-system, sans-serif;
  color: var(--color-muted);
  font-size: 16px;
  line-height: 1.6;
}
body.peprally .brand-newsletter-section .field__input {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--color-text);
  border-radius: 6px;
  padding: 16px 20px;
  width: 100%;
  font-family: 'Sora', -apple-system, sans-serif;
  font-size: 15px;
  /* Center the typed-text in the input too — operator (2026-05-05):
     "center the placeholder for the newsletter on peprally". */
  text-align: center;
}

/* Newsletter floating-label override — operator (2026-05-05): "center
   the placeholder for the newsletter on peprally and make the
   placeholder text sexy and less bright it's not supposed to attract
   attention". Three changes vs Nutreko's default `.field__label`:

   1. Position centered horizontally (Nutreko default = left-aligned at
      `left: calc(border + 2rem)`). We translate the label to the
      horizontal center of the input.
   2. Color muted to ~30% white opacity (Nutreko default ~75%) so the
      label reads as supporting hint, not call-to-action.
   3. Lighter weight + wider tracking + lowercase for the editorial
      "sexy and less bright" register. */
body.peprally .brand-newsletter-section .field__label {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.30) !important;
  font-family: 'Sora', -apple-system, sans-serif !important;
  font-weight: 300 !important;
  font-size: 13px !important;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  transition: top var(--duration-short, 200ms) ease,
              font-size var(--duration-short, 200ms) ease,
              opacity var(--duration-short, 200ms) ease;
}
/* When the field is focused or the user has typed, the label drifts
   up + dims further so the typed value is the centered focal point. */
body.peprally .brand-newsletter-section .field__input:focus ~ .field__label,
body.peprally .brand-newsletter-section .field__input:not(:placeholder-shown) ~ .field__label {
  font-size: 13px !important;
  letter-spacing: 0.22em;
  opacity: 0.6;
}
body.peprally .brand-newsletter-section .newsletter-form__button {
  background: var(--color-accent);
  color: #FFFFFF;
  border: 0;
  border-radius: 6px;
  margin-top: 12px;
  padding: 16px 24px;
  font-family: 'Sora', -apple-system, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
body.peprally .brand-newsletter-section .newsletter-form__button:hover {
  filter: brightness(1.1);
}
body.peprally .brand-newsletter-section .newsletter-form__message--success {
  color: #6FD394;
  margin-top: 0;
  margin-bottom: 24px;
}
body.peprally .brand-newsletter-section .newsletter-form__message--error {
  color: #F08080;
  margin-top: 0;
  margin-bottom: 24px;
}

/* =============================================================================
   PepRally — Safety Data Sheet pages
   =============================================================================
   Per-chemistry SDS library at /peprally/sds (index) and /peprally/sds/:key
   (show). Carbon canvas + Ember Orange + Sora — single-accent monochrome,
   uppercase tracked headings, Whoop/Oura dashboard register applied to
   regulatory documents. Section dividers are Ember Orange so the eye lands
   on each OSHA section break.
   ============================================================================= */
body.peprally .peprally-sds-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}
body.peprally .peprally-sds__title,
body.peprally .peprally-sds-detail__title {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 32px;
  color: var(--color-text);
}
body.peprally .peprally-sds__lede {
  color: var(--color-subtle);
  max-width: 60ch;
  margin: 12px auto 32px;
}
body.peprally .peprally-sds__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 32px 0;
}
body.peprally .peprally-sds__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  padding: 24px 20px;
  transition: border-color 0.15s ease;
}
body.peprally .peprally-sds__card:hover {
  border-color: var(--color-accent);
}
body.peprally .peprally-sds__card-title {
  font-family: "Sora", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin-bottom: 12px;
}
body.peprally .peprally-sds__card-meta dt {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}
body.peprally .peprally-sds__card-meta dd {
  margin: 0 0 8px;
  color: var(--color-subtle);
  font-feature-settings: "tnum" on, "lnum" on;
}
body.peprally .peprally-sds__card-cta,
body.peprally .peprally-sds-detail__pdf-cta {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 18px;
  background: var(--color-accent);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
body.peprally .peprally-sds-detail__crumb {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}
body.peprally .peprally-sds-detail__meta {
  font-family: "Sora", sans-serif;
  font-feature-settings: "tnum" on, "lnum" on;
  border-top: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  padding: 8px 0;
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--color-subtle);
  margin: 16px 0;
}
body.peprally .peprally-sds-detail__body section {
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
}
body.peprally .peprally-sds-detail__body section h3 {
  font-family: "Sora", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  color: var(--color-accent);
  margin-top: 0;
  margin-bottom: 10px;
}
body.peprally .peprally-sds-detail__body p {
  color: var(--color-subtle);
  font-size: 14px;
  line-height: 1.7;
}
body.peprally .peprally-sds__note,
body.peprally .peprally-sds__empty,
body.peprally .peprally-sds-detail__note {
  color: var(--color-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Sort-by select on /peprally/shop. Operator-reported 2026-05-07:
   "the drop down for 'the stack' is white text on white bg". Browsers
   render <option> with the OS native dropdown — typically white bg —
   so dark-canvas brands need explicit option styling. The select
   itself also gets a dark bg so the closed state matches the chrome.
   `body.peprally` namespace keeps this from leaking to other brands. */
body.peprally select.select__select,
body.peprally #peprally-sort {
  background-color: rgba(13, 13, 20, 0.85);
  color: var(--color-text);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 8px 12px;
  font-family: inherit;
}
body.peprally select.select__select option,
body.peprally #peprally-sort option {
  background-color: #111116;
  color: var(--color-text);
}

/* Nutreko base.css hides empty divs via `div:empty { display: none }`.
   The hero gradient overlays are (visually) empty — force them visible.
   Same fix as the age-gate scrim (line 118). */
.peprally-hero__overlay {
  display: block !important;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

/* Product cards — entire cell clickable */
.peprally-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer;
}

/* Hero — clamp already handles mobile via 56.25vw; cap on small screens */
@media (max-width: 768px) {
  .peprally-hero-fullwidth {
    height: clamp(360px, 56.25vw, 520px) !important;
  }
}

/* =============================================================================
   Cart count badge — Nutreko's .bubble-count base has font-size: 10px but
   the PepRally body font-size (16px) and Sora can cascade into the custom
   <ap-cartcount> element on some rendering paths, making the number overtake
   the badge circle. Force the badge to stay compact regardless of cascade.
   ============================================================================= */
body.peprally .bubble-count,
body.peprally .header__ap-cartcount {
  font-size: 13px !important;
  line-height: 1 !important;
  height: 22px !important;
  min-width: 22px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-family: "Sora", -apple-system, sans-serif !important;
  background-color: var(--color-accent) !important;
  color: #FFFFFF !important;
  letter-spacing: 0 !important;
}


/* =============================================================================
   The Rally — peprally.bio/rally. Operator, 2026-09-14: "We send deals as
   'rallies'. First X people get a freedom diagnostic test well priced
   peptide." — "Like woot." — "Or Groupon." — "Every week a different Rally."

   The CTA rule this file already learned the hard way: a generic
   `.peprally a { color: var(--color-accent) }` sits at specificity (0,1,1),
   so a bare `.peprally-rally__cta` at (0,1,0) LOSES its own colour and
   inherits the link colour. When the link colour is the accent and the
   button background is also the accent, that is 1:1 contrast — invisible
   text, measured live on four brands on 2026-08-29. Carry the `a`.
   ============================================================================= */
/* ── Three rules this whole region now obeys ─────────────────────────
 *
 * 1. EVERY selector names its block root. `.peprally-rally__flag` alone
 *    is (0,1,0) and loses to `.peprally p` / `.peprally a` at (0,1,1) —
 *    and there it takes the TYPOGRAPHY with it, not only the colour.
 *    The auth page rendered a 1.9rem headline at 16px learning this,
 *    after the static guard was already green.
 *
 * 2. NO hardcoded colour. `#FFFFFF` and `#D04A0A` were written inline
 *    here while the token block three hundred lines up already held the
 *    same decision — a second copy, and always the one nobody updates.
 *
 * 3. NO alpha on a surface or an ink. Operator, 2026-09-16: "do not
 *    make everything so transparent." The second reason is the one that
 *    makes it a guard rather than a preference: a colour painted with
 *    alpha takes its value from whatever is behind it, so its contrast
 *    stops being a property of the rule and every measured ratio
 *    becomes a guess. `.peprally-rally` shipped `rgba(232,85,15,0.05)`
 *    and the band faded its own text with `opacity: .85`.
 *
 * Enforced by rally_page_contrast_guard_test, resolved for real by
 * scripts/screenshot-rally.mjs.
 * ============================================================================= */
.peprally-rally {
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  padding: 32px;
  margin-bottom: 48px;
  /* Opaque. The 5% ember wash it replaced was unmeasurable AND was the
     "too transparent" the operator objected to, in one declaration. */
  background: var(--color-surface);
}

.peprally-rally.peprally-rally--closed {
  border-color: var(--color-border);
  background: var(--color-bg);
}

.peprally-rally .peprally-rally__flag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
}

/* --color-subtle, not --color-muted. #64748B measures 3.63:1 on
   --color-surface and 3.96:1 on --color-bg — both below AA 4.5, on a
   brand whose operator's instruction was "make it fucking readable". */
.peprally-rally.peprally-rally--closed .peprally-rally__flag {
  color: var(--color-subtle);
}

.peprally-rally .peprally-rally__title {
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: var(--color-text);
}

/* `.peprally-rally__generic` is NOT redeclared here. It already exists
   further down this sheet, sized as a peer of the title rather than as
   a caption — which is the right call and was made for a stated reason:
   the mark is ours and unrecognised, the compound is the word the
   visitor actually searched for. A second copy here would sit at equal
   specificity, lose on source order, and be dead the day somebody edits
   the wrong one. */

.peprally-rally .peprally-rally__subtitle {
  font-size: 15px;
  color: var(--color-subtle);
  margin-bottom: 16px;
}

.peprally-rally .peprally-rally__pitch {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 20px;
}

.peprally-rally .peprally-rally__terms {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.peprally-rally .peprally-rally__terms li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.peprally-rally .peprally-rally__terms li:last-child { border-bottom: none; }

.peprally-rally .peprally-rally__terms code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--color-accent);
}

.peprally-rally .peprally-rally__scarcity {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 20px;
}

/* Carries the `a` deliberately — see the header comment. */
.peprally a.peprally-rally__cta,
.peprally-rally .peprally-rally__cta {
  display: inline-block;
  padding: 14px 32px;
  background: var(--cta-accent);
  color: var(--rally-band-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
}

/* Hover deliberately does NOT go to --color-accent: #E8550F carries
   white at only 3.66:1, below AA. A hover state that becomes harder to
   read than the resting state is the same defect the cta-accent token
   was minted to fix, arriving one interaction later. */
.peprally a.peprally-rally__cta:hover,
.peprally-rally .peprally-rally__cta:hover {
  background: var(--checkout-accent-hover);
  color: var(--rally-band-ink);
}

.peprally-rally .peprally-rally__radar {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.peprally-rally .peprally-rally__radar-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--checkout-muted);
  margin-bottom: 6px;
}

.peprally-rally .peprally-rally__radar p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}

/* =============================================================================
   How a Rally price is built — the four-step ladder.

   Operator, 2026-09-16: "20% is off of our price not the rally... we look
   at the entire market to price fairly and then we take another 20% and
   ensure you have the best quality by testing with a top lab."

   The page before this listed the offer and never argued for it. Step 2
   is the step that makes the discount real — it says the anchor is our
   everyday price rather than a number invented for the week — and step 4
   is what stops "cheap" reading as "cheap for a reason".
   ============================================================================= */
.peprally-ladder {
  margin: 0 0 48px;
  padding: 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.peprally-ladder .peprally-ladder__heading {
  font-size: clamp(22px, 3.2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0 0 6px;
}

.peprally-ladder .peprally-ladder__accent {
  color: var(--color-accent);
}

.peprally-ladder .peprally-ladder__lede {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-subtle);
  margin: 0 0 24px;
}

.peprally-ladder .peprally-ladder__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

/* Each step is its own opaque panel sitting on the block's surface, so
   the numbered rail reads as a sequence rather than as four paragraphs.
   --color-bg on --color-surface is a real tonal step, not a wash. */
.peprally-ladder .peprally-ladder__step {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-areas: "num body";
  gap: 16px;
  align-items: start;
  padding: 18px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

/* Step 3 is the offer. It is the one the eye should land on, so it
   carries the accent edge rather than a different background — the
   surface stays opaque and measurable either way. */
.peprally-ladder .peprally-ladder__step--hot {
  border-color: var(--color-accent);
}

.peprally-ladder .peprally-ladder__num {
  grid-area: num;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--cta-accent);
  color: var(--rally-band-ink);
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.peprally-ladder .peprally-ladder__body {
  grid-area: body;
  min-width: 0;
}

.peprally-ladder .peprally-ladder__step-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
  margin: 0 0 6px;
}

.peprally-ladder .peprally-ladder__cut {
  color: var(--color-accent);
  font-weight: 800;
}

.peprally-ladder .peprally-ladder__step-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-subtle);
  margin: 0;
}

/* The measured sentence. It is set apart from the method above it
   because it is a different KIND of statement — a dated count anyone can
   check, rather than a description of how we work. It renders only when
   `price_proof` / `verification_proof` can prove it; a nil renders
   nothing at all. */
.peprally-ladder .peprally-ladder__proof {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--color-surface);
  border-left: 2px solid var(--color-accent);
  border-radius: 0 3px 3px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text);
}

/* Single column below the fold-in point, and the rail collapses so the
   number sits above the text rather than squeezing it. Declared as an
   override of a base that already names its areas — a `grid-area` is a
   REFERENCE, and a reference to nothing evaluates to nothing rather
   than complaining, which is how the auth page stacked three children
   into row 1 at 390px. */
@media (max-width: 560px) {
  .peprally-ladder {
    padding: 22px 18px;
  }

  .peprally-ladder .peprally-ladder__step {
    grid-template-columns: 36px 1fr;
    gap: 12px;
    padding: 14px;
  }

  .peprally-ladder .peprally-ladder__num {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
}

/* ── This week's Rally, on the front page ────────────────────────────
 *
 * Operator, 2026-09-17: "the fucking live rally should be part of the
 * fucking home page. and exciting it's in the brand name. tastefully
 * add highlight it".
 *
 * This replaces `.peprally-rally-band`, a 14px ember strip that carried
 * a title and a percentage. The block it replaces it with is the SAME
 * shape as the Rally page's `.peprally-deal` — was, now, save, a clock,
 * a button — because two designs for one offer is how a fix lands on
 * one surface and the other keeps the bug.
 *
 * Every rule names the block root. `.peprally p` and `.peprally h2` are
 * both (0,1,1) and a lone class is (0,1,0), so a bare class loses the
 * TYPOGRAPHY as well as the colour — that is how a 1.9rem auth headline
 * rendered at 16px. The CTA carries the `a.` qualifier and paints
 * `--cta-accent`, never `--color-accent`: white on the raw Ember is
 * 3.66:1 and fails AA, which shipped invisible checkout text on four
 * brands. Nothing here is painted with alpha and no colour is a
 * literal — a colour mixed with its backdrop takes its value from
 * whatever is behind it, so every measured ratio becomes a guess.
 *
 * Measured in Chrome on the real response at 390px and 1280px, every
 * probe AA: eyebrow 4.72:1, title and price 17.29:1, compound name and
 * supporting copy 14.02:1, the save chip and the CTA 5.03:1, the
 * countdown 18.82:1, and neither width scrolls sideways. Re-run it
 * rather than trust it:
 *
 *   HOME_HTML_DUMP=/tmp/home bin/rails test \
 *     test/integration/peprally_home_rally_test.rb
 *   node scripts/screenshot-home-rally.mjs /tmp/home
 *
 * Guard: home_rally_contrast_guard_test.
 */
.pr-rally {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 32px 24px;
}

.pr-rally .pr-rally__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 24px;
  align-items: center;
  padding: 26px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: 12px;
}

.pr-rally .pr-rally__eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.pr-rally .pr-rally__title {
  margin: 0;
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

/* A scraped or coined compound name is an unbreakable word — the radar
   shipped `bpc-157-tb-500-ghk-cu-kpv` at 30px and pushed a phone
   sideways. */
.pr-rally .pr-rally__generic {
  margin: 8px 0 0;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  color: var(--color-subtle);
}

.pr-rally .pr-rally__prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin: 18px 0 0;
}

.pr-rally .pr-rally__was {
  font-size: 19px;
  color: var(--color-subtle);
  text-decoration: line-through;
}

.pr-rally .pr-rally__now {
  font-size: 40px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

/* A FILLED chip, not accent-coloured text. `--cta-accent` as ink on
   `--color-surface` measures 3.44:1 and fails AA; the same colour as a
   fill under `--rally-band-ink` is 5.03:1. Same two tokens, one of the
   two arrangements is readable. */
.pr-rally .pr-rally__save {
  padding: 5px 10px;
  border-radius: 3px;
  background: var(--cta-accent);
  color: var(--rally-band-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pr-rally .pr-rally__decay {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-subtle);
}

.pr-rally .pr-rally__decay strong { color: var(--color-text); }

.pr-rally .pr-rally__drop {
  font-weight: 700;
  color: var(--color-text);
}

.pr-rally .pr-rally__act {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.pr-rally .pr-rally__clock {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.pr-rally .pr-rally__clock-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-subtle);
}

.pr-rally .pr-rally__clock-value {
  padding: 5px 10px;
  font-family: Menlo, Consolas, monospace;
  font-size: 17px;
  font-weight: 700;
  border-radius: 4px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

/* `a.`-qualified, or `.peprally a { color: var(--color-accent) }` at
   (0,1,1) takes the colour and the label disappears into the fill. The
   hover changes no colour on purpose: the next darker step this brand
   declares, `--checkout-accent-hover`, carries white at 4.50:1 — sitting
   exactly on the threshold, where browser rounding decides whether the
   button passes. */
.pr-rally a.pr-rally__cta {
  display: inline-block;
  padding: 15px 30px;
  background: var(--cta-accent);
  color: var(--rally-band-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
}

.pr-rally a.pr-rally__cta:hover {
  background: var(--cta-accent);
  color: var(--rally-band-ink);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.pr-rally .pr-rally__note {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-subtle);
}

/* Mobile-first: the base rules are the phone's rules and this only
   ADDS. A max-width query hides a defect at exactly the width most of
   the traffic arrives on. */
@media (min-width: 880px) {
  .pr-rally .pr-rally__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
    padding: 32px 36px;
  }

  .pr-rally .pr-rally__act {
    align-items: flex-end;
    text-align: right;
  }
}

/* Next-Rally poll. Members only to vote; visible to everyone, because a
   stranger who wanted to vote is the best signup pitch on the site. */
.peprally-poll {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 28px;
  margin-bottom: 48px;
}

.peprally-poll__flag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 10px;
}

.peprally-poll__title {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.peprally-poll__blurb {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-muted);
  margin-bottom: 18px;
}

.peprally-poll__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.peprally-poll__option {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-text);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.peprally-poll__option:hover {
  border-color: var(--color-accent);
}

.peprally-poll__option.is-mine {
  border-color: var(--color-accent);
  background: rgba(232, 85, 15, 0.10);
}

.peprally-poll__option-label { font-weight: 600; }

.peprally-poll__option-dose {
  font-size: 12px;
  color: var(--color-muted);
}

.peprally-poll__option-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-accent);
}

.peprally-poll__list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}

.peprally-poll__list li {
  font-size: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.peprally-poll__list li:last-child { border-bottom: none; }

.peprally-poll__note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-muted);
  margin-bottom: 16px;
}

/* The generic compound name beside a Rally's trademark. Sized as a peer
   of the title, not a caption: the mark is ours and unrecognised, the
   compound is the word the visitor actually searched for. */
   The bare `.peprally-rally__generic` companion was dropped: at (0,1,0)
   it loses to `.peprally p` anyway, so it never did anything the rooted
   selector above it was not already doing. */
.peprally .peprally-rally__generic {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 4px 0 10px;
}


/* ── The Rally page: the reason, and the proof ────────────────────────
 *
 * Operator: "YOU SAY 20% WITHOUT EXPLAINING WHY THAT'S AMAZING",
 * "PUT THE FUCKING COA ON THE RALLY PAGE", "RUO RADAR CAN NOW LINK TO
 * RUO RADAR FOR THE COMPOUND."
 *
 * These live in the BRAND sheet, not in shared/rally_progress.css.
 * That file's guard requires every selector to name `.rally-progress`
 * — it is one self-contained block shared by every brand — and
 * `.peprally-rally__*` is this brand's own namespace. A shared sheet
 * carrying one brand's classes is how a "shared" widget quietly stops
 * being shared.
 *
 * No hex fallbacks either: a `var()` fallback silently hides a missing
 * token, which is exactly what `brand_css_token_definition_guard_test`
 * exists to catch. Every token used here is declared at the top of this
 * file.
 */
/* Rooted on `.peprally-rally`, and that is load-bearing rather than tidy.
 * A lone `.peprally-rally__why` is (0,1,0) and this sheet already carries
 * `.peprally p { color: var(--color-text); font-size: 16px }` at (0,1,1) —
 * so the `color` AND the `font-size` below would both be discarded, which
 * is the defect that rendered a 1.9rem auth headline at 16px. */
.peprally-rally .peprally-rally__why {
  margin: 0 0 18px;
  padding: 16px 18px;
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-subtle);
}

.peprally-rally .peprally-rally__why strong { color: var(--color-text); }

/* ── The deal band ───────────────────────────────────────────────────
 *
 * Operator, 2026-09-17: "it need to feel like a real woot/groupon like
 * site". Was, now, save, then the button — the shape every deal site
 * uses, because it answers the only two questions a visitor has before
 * they will read anything else.
 *
 * Every selector names the block root: `.peprally p` is (0,1,1) and a
 * lone class is (0,1,0), so a bare class loses the TYPOGRAPHY as well
 * as the colour — that is how a 1.9rem headline once rendered at 16px.
 * The CTA carries the `a.` qualifier and paints `--cta-accent`, not
 * `--color-accent`: white on the raw Ember measures 3.66:1 and fails
 * AA, which shipped invisible checkout text on four brands. No token
 * here is translucent. */
.peprally .peprally-deal {
  margin: 0 0 20px;
  padding: 20px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: 10px;
}

.peprally .peprally-deal__prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.peprally .peprally-deal__was {
  font-size: 19px;
  color: var(--color-subtle);
  text-decoration: line-through;
}

.peprally .peprally-deal__now {
  font-size: 40px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.peprally .peprally-deal__save {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cta-accent);
}

.peprally .peprally-deal__decay {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-subtle);
}

.peprally .peprally-deal__decay strong { color: var(--color-text); }

/* The line that reconciles "19% off" with "save 28%". Without it the
 * card appears to contradict itself. */
.peprally .peprally-deal__gift {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-subtle);
}

.peprally .peprally-deal__gift strong { color: var(--color-text); }

/* `a.`-qualified, or `.peprally a { color: var(--color-accent) }` at
 * (0,1,1) takes the colour and the text disappears into the fill. */
/* Inherits the Rally CTA's fill and ink by carrying both classes in
 * the markup; this only adds the spacing. `--rally-band-ink` is the
 * token the existing CTA already uses and is measured against
 * `--cta-accent` at 5.03:1 — inventing a second ink token here is how
 * two buttons on one page come to disagree. */
.peprally a.peprally-deal__cta {
  margin-top: 16px;
  color: var(--rally-band-ink);
}

@media (min-width: 720px) {
  .peprally .peprally-deal__now { font-size: 48px; }
}

/* ── What waiting costs ─────────────────────────────────────────────
 *
 * The urgency line. Warmer than `__why` because it is the one sentence
 * on the page asking for a decision today, and it sits directly under
 * the block that earns the right to ask.
 *
 * Every value is a brand token and none carries alpha: a colour painted
 * with opacity takes its value from whatever is behind it, so its
 * contrast stops being a property of the rule and every measured ratio
 * becomes a guess. */
/* Rooted on `.peprally-rally`, for the same reason `__why` is. This is a
 * `<p>`, and this sheet already carries
 * `.peprally p { color: var(--color-text); font-size: 16px }` at (0,1,1),
 * which beats a lone class at (0,1,0) — so BOTH the `font-size` and the
 * `color` below would be discarded and the step-down sentence would
 * render as ordinary body copy. */
.peprally-rally .peprally-rally__decay {
  margin: 0 0 18px;
  padding: 13px 18px;
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-subtle);
}

.peprally-rally .peprally-rally__decay strong { color: var(--color-text); }

/* `a`-qualified: `.brand a` is (0,1,1) and beats a lone class at
 * (0,1,0) — the trap that shipped 1:1-contrast CTAs on four brands. */
.peprally-rally .peprally-rally__why a,
.peprally-rally .peprally-rally__why a:link,
.peprally-rally .peprally-rally__why a:visited {
  color: var(--color-accent);
  text-decoration: underline;
}

.peprally-rally .peprally-rally__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.peprally-rally .peprally-rally__proof a.peprally-rally__proof-link,
.peprally-rally .peprally-rally__proof a.peprally-rally__proof-link:link,
.peprally-rally .peprally-rally__proof a.peprally-rally__proof-link:visited {
  display: inline-block;
  padding: 10px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  color: var(--color-accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/* =============================================================================
   The two doors — the homepage positioning section
   -----------------------------------------------------------------------------
   Operator, 2026-09-16: "make peprally page clear you can shop the stack or use
   rally pass to have access to the best prices for quality tested rallies that
   save."

   EVERY SELECTOR NAMES THE BLOCK ROOT, and that is not a style preference.
   This sheet already carries

     .peprally a { color: var(--color-accent) }                  (0,1,1)
     .peprally p { color: var(--color-text); font-size: 16px }   (0,1,1)

   so a lone class at (0,1,0) LOSES — silently, with the declaration present and
   correct. On an anchor that shipped invisible checkout text on four brands; on
   a <p> it took the TYPOGRAPHY too, rendering a 1.9rem headline at 16px on the
   auth page. `.pr-doors .pr-doors__x` is (0,2,0) and holds; anchors carry the
   `a` as well and reach (0,2,1).

   No literal colours: every value is a brand token, so the block cannot drift
   from the sheet around it. No `opacity` on anything painted — a colour mixed
   with its backdrop has no measurable contrast of its own. `--color-muted`
   measures 3.63:1 on the card and is deliberately confined to hairlines.

   The primary CTA paints `--cta-accent`, not `--color-accent`: white on the raw
   Ember measures 3.66:1 and fails AA, which is exactly why this brand already
   carries the darker token.

   Guards: test/integration/peprally_doors_contrast_guard_test.rb (cascade,
   tokens, alpha, the gutter, breakpoints, the arithmetic) and
   peprally_two_doors_test.rb (what a visitor is actually served).
   ========================================================================== */
.pr-doors {
  padding: 72px 24px;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.pr-doors .pr-doors__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.pr-doors .pr-doors__head {
  max-width: 760px;
  margin: 0 0 48px;
}

.pr-doors .pr-doors__eyebrow {
  margin: 0 0 14px;
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.pr-doors .pr-doors__lede {
  margin: 0 0 18px;
  color: var(--color-text);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.pr-doors .pr-doors__sub {
  margin: 0 0 28px;
  color: var(--color-subtle);
  font-size: 17px;
  line-height: 1.65;
}

.pr-doors .pr-doors__proof {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pr-doors .pr-doors__proof-item {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.pr-doors .pr-doors__proof-label {
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.pr-doors .pr-doors__proof-body {
  color: var(--color-subtle);
  font-size: 15px;
  line-height: 1.6;
}

.pr-doors .pr-doors__proof-count {
  display: block;
  margin-top: 8px;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
}

.pr-doors a.pr-doors__proof-link,
.pr-doors a.pr-doors__proof-link:link,
.pr-doors a.pr-doors__proof-link:visited {
  justify-self: start;
  color: var(--color-accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
}

.pr-doors .pr-doors__grid {
  display: grid;
  gap: 24px;
}

.pr-doors .pr-doors__door {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.pr-doors .pr-doors__door--pass {
  border-color: var(--color-accent);
}

.pr-doors .pr-doors__kicker {
  margin: 0 0 10px;
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.pr-doors .pr-doors__title {
  margin: 0 0 14px;
  color: var(--color-text);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.15;
}

.pr-doors .pr-doors__body {
  margin: 0 0 20px;
  color: var(--color-subtle);
  font-size: 16px;
  line-height: 1.65;
}

.pr-doors .pr-doors__rally {
  margin: 0 0 20px;
  padding: 10px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
}

.pr-doors .pr-doors__list {
  display: grid;
  gap: 14px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.pr-doors .pr-doors__list-item {
  color: var(--color-subtle);
  font-size: 15px;
  line-height: 1.55;
  padding-left: 18px;
  border-left: 2px solid var(--color-border);
}

.pr-doors .pr-doors__benefit-title {
  display: block;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
}

.pr-doors .pr-doors__benefit-detail {
  display: block;
  margin-top: 2px;
  color: var(--color-subtle);
  font-size: 14px;
  line-height: 1.55;
}

.pr-doors a.pr-doors__cta,
.pr-doors a.pr-doors__cta:link,
.pr-doors a.pr-doors__cta:visited {
  display: inline-block;
  margin-top: auto;
  padding: 16px 30px;
  background: var(--cta-accent);
  border: 1px solid var(--cta-accent);
  border-radius: 3px;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.pr-doors a.pr-doors__cta:hover {
  text-decoration: underline;
}

.pr-doors a.pr-doors__aside,
.pr-doors a.pr-doors__aside:link,
.pr-doors a.pr-doors__aside:visited {
  display: inline-block;
  margin-top: 14px;
  color: var(--color-accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
}

/* Mobile-first: the base rules above ARE the phone's rules and a query only
   ever adds. A max-width query hides a defect at exactly the width nobody
   tests at, and this block is two long cards — the width where they would
   collapse on top of each other is the width most of the traffic arrives on. */
@media (min-width: 860px) {
  .pr-doors .pr-doors__proof {
    grid-template-columns: 1fr 1fr;
  }

  .pr-doors .pr-doors__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

/* ── The dispatch line, at the offer ────────────────────────────────
 *
 * Operator, 2026-09-16: "make it clear fasft shipping happens as you
 * purchase we dont want until the end."
 *
 * Sits directly under the deal card because that is where somebody
 * deciding right now is looking. Styled as a peer of `__decay` — same
 * surface, same rule, same ink — because two designs for two sentences
 * that both qualify the offer reads as one being an afterthought.
 *
 * --color-subtle (#E2E8F0), never --color-muted (#64748B, 3.63:1 on
 * --color-surface). Opaque, no alpha: a colour painted with alpha takes
 * its value from whatever is behind it, and the measured ratio stops
 * being a property of the rule. */
.peprally-rally .peprally-rally__dispatch {
  margin: 0 0 18px;
  padding: 13px 18px;
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-subtle);
}

.peprally-rally .peprally-rally__dispatch strong { color: var(--color-text); }

/* ── The Rally FAQ ──────────────────────────────────────────────────
 *
 * A distinct block from `.peprally-faq`, which is the general FAQ
 * page's. Sharing the name would mean one sheet edit silently
 * re-styling two unrelated pages, which is the cart-drawer lesson
 * arriving in CSS.
 *
 * Every selector names the block root. `.peprally p` is (0,1,1) and a
 * lone class is (0,1,0), so an unrooted rule loses the TYPOGRAPHY as
 * well as the colour — how a 1.9rem headline rendered at 16px.
 *
 * The grid uses columns, never named areas: a `grid-area` name is a
 * REFERENCE, and a reference with no template at the base width
 * auto-places every child into row 1 and renders the page on top of
 * itself at 390px. */
.peprally-rally-faq {
  margin: 48px 0 40px;
  padding-top: 36px;
  border-top: 1px solid var(--color-border);
}

.peprally-rally-faq .peprally-rally-faq__heading {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  color: var(--color-text);
}

.peprally-rally-faq .peprally-rally-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.peprally-rally-faq .peprally-rally-faq__item {
  padding: 20px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.peprally-rally-faq .peprally-rally-faq__q {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--color-text);
}

/* Hierarchy from size and weight above, never from a failing colour —
 * the fix the homepage band's `opacity: .85` also needed. */
.peprally-rally-faq .peprally-rally-faq__a {
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
  color: var(--color-subtle);
}

@media (min-width: 760px) {
  .peprally-rally-faq .peprally-rally-faq__grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px 32px;
  }
}