/* ============================================================================
   POLYPEPTIDE GROUP — brand layer
   ----------------------------------------------------------------------------
   Loaded AFTER /css/polypeptide.css (which generate-identity.js regenerates and
   would overwrite). Everything hand-authored for this shop lives HERE.
   See site-factory/SCAFFOLD-RUNBOOK.md 9.3.

   Source of truth: brand-references/polypeptidegroup/colour-theme.md
     #96C100  signature lime   - the mark, rules, chips, fills   (NEVER body text)
     #709206  lime, deepened   - hover/active fills, bottom borders
     #5C7A05  --primary        - solid buttons; white text clears AA at 5.0:1
     #0095EB  secondary blue   - icon boxes only
     #161922  near-black       - dark sections, footer, top strips
     #3C3C3C  wordmark grey    - headings + nav ink
     #EBEBEB / #F7F7F7 / #F2F2F2 - light section grounds
   The generated ramp is hue-tinted olive; PolyPeptide's is a TRUE neutral grey,
   so the ramp is re-declared here rather than left tinted.
   ============================================================================ */

:root {
    /* --- Brand ------------------------------------------------------------ */
    --brand-lime: #96C100;
    --brand-lime-dark: #709206;
    --brand-blue: #0095EB;
    --brand-ink: #161922;
    --brand-wordmark: #3C3C3C;

    /* Accent tokens the generated sheet exposes (data highlights) */
    --amber: #96C100;
    --amber-dim: #709206;

    /* --- True-neutral ramp (replaces the olive-tinted one) ---------------- */
    --white: #FFFFFF;
    --paper: #F7F7F7;
    --porcelain: #FFFFFF;
    --gray-50:  #FAFAFA;
    --gray-100: #F2F2F2;
    --gray-200: #EBEBEB;
    --gray-300: #D3D3D3;
    --gray-400: #A8A8A8;
    --gray-500: #5F5F5F;   /* #747474 is the brand's own secondary grey but lands
                              at 4.0-4.4:1 as TEXT on the light grounds; deepened
                              so every role that uses it clears AA */
    --gray-600: #626262;
    --gray-700: #545454;
    --gray-800: #3C3C3C;
    --gray-900: #22252C;
    --ink: #161922;

    /* The generated brand tints are dark enough that --primary as a LINK on them
       lands at 4.33-4.47:1 (the /reports vendor links, the /wholesale email
       link). Lightened until #5C7A05 clears 4.5:1 with headroom. */
    --primary-50: #FAFCF5;
    --primary-100: #F6F9EF;

    --accent-navy: #161922;

    --border-subtle: #EBEBEB;
    --border-default: #D3D3D3;
    --hairline: 1px solid #EBEBEB;
    --surface-elevated: #FFFFFF;
    --surface-sunken: #F2F2F2;
    --grid-line: rgba(22, 25, 34, 0.045);

    /* --- Squarer geometry: the brand's cards and buttons are near-rectangular */
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --radius-xl: 6px;

    /* --- Flatter, neutral shadows ---------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(22, 25, 34, 0.06);
    --shadow-md: 0 1px 2px rgba(22, 25, 34, 0.05), 0 6px 14px -10px rgba(22, 25, 34, 0.18);
    --shadow-lg: 0 2px 4px rgba(22, 25, 34, 0.05), 0 14px 28px -16px rgba(22, 25, 34, 0.22);
    --shadow-xl: 0 4px 10px rgba(22, 25, 34, 0.06), 0 26px 48px -22px rgba(22, 25, 34, 0.26);
    --shadow-jade: 0 6px 16px -10px rgba(92, 122, 5, 0.45);

    /* --- Type: humanist sans, closest available match to the wordmark ----- */
    --font-display: 'Source Sans 3', 'Inter', 'Noto Sans SC', sans-serif;
    --font-family: 'Inter', 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
}

body { background: #FFFFFF; color: var(--gray-800); }
h1, h2, h3, h4, .section-heading, .section-header h2 {
    font-family: var(--font-display);
    color: var(--brand-ink);
    letter-spacing: -0.005em;
}

/* --- Header: white, hairline, real lockup -------------------------------- */
.header {
    background: #FFFFFF;
    border-bottom: 1px solid var(--gray-200);
    box-shadow: none;
}
.logo { gap: 14px; }
.logo-mark {
    width: 196px;
    height: auto;
    max-height: 38px;
    display: block;
    border-radius: 0;
    box-shadow: none;
    flex: 0 0 auto;
}
/* The lockup already carries the wordmark, so the header does not repeat the
   legal name (it overlapped the nav at 1440px and is in the footer already).
   The seal sits beside the mark as the fleet's shared identity cue. */
.logo-seal {
    font-size: 0.9rem;
    line-height: 1;
    padding: 3px 5px;
    flex: 0 0 auto;
}
/* The seal sits on white AND on the hero's tinted ground; #709206 clears neither
   at 4.5:1, so it uses the deepest brand green. */
/* .hero-title span (0,1,1) outranks a bare .cn-seal, so the hero's seal kept
   --primary and sat at 4.35:1 on the hero wash. Restate it at that specificity. */
.hero-title span.cn-seal { color: #4A6304; }
.cn-seal {
    color: #4A6304;
    border: 1px solid var(--brand-lime);
    background: transparent;
    border-radius: 2px;
}

/* products.css re-declares .nav-links/.nav-link with its own padding and font
   size, so the SAME header wrapped to two rows on /products (92px tall) and one
   everywhere else. Pin the sizing here, above every page sheet, so the header is
   identical on all pages at every desktop width. */
/* The engine swaps to the hamburger at 767px, which the template's three-letter
   wordmark could just about carry. A real 196px lockup plus eight nav items plus
   the warehouse chip and cart cannot fit a 768-1199px viewport on one row, so
   the swap happens at 1200px here and the tablet range gets the mobile menu the
   phone range already uses. Nothing is lost: .mobile-menu carries every link. */
@media (max-width: 1199px) {
    .nav-desktop { display: none; }
    .hamburger-btn { display: flex; }
}
@media (min-width: 1200px) {
    .nav-desktop .nav-links { flex-wrap: nowrap; gap: 2px; }
    .nav-desktop .nav-link {
        padding: 8px 9px;
        font-size: 0.9rem;
        white-space: nowrap;
    }
}

/* Nav: wordmark grey, lime underline on hover/active (the brand's own cue) */
.nav-link { color: var(--gray-800); font-weight: 500; border-radius: 0; }
.nav-link:hover { color: var(--brand-ink); background: transparent; box-shadow: inset 0 -3px 0 var(--brand-lime); }
.nav-link.active { color: var(--brand-ink); background: transparent; box-shadow: inset 0 -3px 0 var(--brand-lime); }
.nav-link-secondary { color: var(--primary); font-weight: 600; }
.nav-link-secondary:hover { color: var(--primary-dark); }

.header .warehouse-btn, .warehouse-btn { border-color: var(--gray-300); color: var(--gray-700); border-radius: 2px; }
.header .warehouse-btn:hover, .warehouse-btn:hover { border-color: var(--brand-lime); color: var(--brand-ink); }
.header .cart-btn, .cart-btn { border-radius: 2px; box-shadow: none; }
.header .cart-btn:hover, .cart-btn:hover { background: var(--brand-lime-dark); }

/* --- Dark strips: near-black, not olive-black ---------------------------- */
.site-flash, .sale-bar, .trust-bar, .footer, .footer-bottom {
    background-color: var(--brand-ink) !important;
    background-image: none !important;
}
.site-flash strong, .sale-bar .timer-num { color: var(--brand-lime); }
.trust-bar, .trust-bar-item { color: #FFFFFF; }
/* The stat row appears on BOTH grounds. Lime reads 8.4:1 on the ink ribbon and
   2.0:1 on the light one, so it is scoped to the dark ground only and the light
   one uses --primary (SCAFFOLD-RUNBOOK 9.4). */
.trust-stat-value { color: var(--primary); }
.trust-bar .trust-stat-value, .footer .trust-stat-value { color: var(--brand-lime); }
/* Footer copy inherits --gray-500/-600 roles that are tuned for light grounds.
   Several of those roles are written INLINE (style="color: var(--gray-500)"),
   which no class rule can outrank — so the tokens themselves are re-pointed
   for the footer's dark ground instead. --gray-800 is left alone: the mobile
   contact popup inside the footer is a LIGHT card and reads it. */
.footer, .footer-bottom {
    --gray-400: #A8ADB5;
    --gray-500: #C9CCD1;
    --gray-600: #C9CCD1;
}
.footer p, .footer-col p, .footer-bottom p, .footer-copyright { color: #C9CCD1; }

/* --- Buttons ------------------------------------------------------------- */
.btn { border-radius: 2px; letter-spacing: 0.01em; }
.btn-primary { background: var(--primary); border: 1px solid var(--primary); color: #fff; box-shadow: none; }
.btn-primary:hover { background: var(--brand-lime-dark); border-color: var(--brand-lime-dark); box-shadow: none; transform: none; }
.btn-secondary { background: #FFFFFF; color: var(--gray-800); border: 1px solid var(--gray-300); box-shadow: none; }
.btn-secondary:hover { border-color: var(--brand-ink); color: var(--brand-ink); background: #FFFFFF; }
.checkout-btn { border-radius: 2px; }
.checkout-btn:hover { background: var(--brand-lime-dark); }

/* --- Signature: the chromatogram-peak rule ------------------------------- */
/* The mark is a peak trace; every section heading gets a short lime rule that
   echoes it. Kept as a border rather than an image so it costs nothing. */
.section-heading, .section-header h2 { position: relative; padding-bottom: 14px; }
.section-heading::after, .section-header h2::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 56px; height: 4px;
    background: var(--brand-lime);
}

/* --- Cards: flat, hairline, lime on hover -------------------------------- */
.trending-card {
    background: #FFFFFF;
    border: 1px solid var(--gray-200);
    border-radius: 3px;
    box-shadow: none;
}
.trending-card:hover {
    border-color: var(--brand-lime);
    box-shadow: 0 10px 24px -18px rgba(22, 25, 34, 0.4);
    transform: none;
}
.trending-name { font-family: var(--font-display); color: var(--brand-ink); }
.trending-category { color: var(--gray-600); }
.trending-badge, .badge-tested, .badge-popular { border-radius: 2px; }

/* Alternating sections use the brand's own light grounds */
.section-alt { background: #F7F7F7; }
/* ...but the Trustpilot banner is a DARK ribbon carrying white text. It also
   carries .section-alt, so the rule above stranded its copy at ~1.1:1 until
   this higher-specificity restatement (SCAFFOLD-RUNBOOK 9.4: the floor is keyed
   on the hex, readability on the GROUND). */
.trustpilot-banner.section-alt { background: var(--brand-ink); }
.trustpilot-banner.section-alt:hover { background: #22252C; }
.trustpilot-banner .tp-banner-count { color: rgba(255, 255, 255, 0.88); }
.tp-banner-btn { border-radius: 2px; }

/* --- FAQ ----------------------------------------------------------------- */
.faq-item { border: 1px solid var(--gray-200); border-radius: 3px; background: #FFFFFF; }
.faq-item.open { border-color: var(--brand-lime); }
.faq-question { font-family: var(--font-display); color: var(--brand-ink); }
.faq-question i { color: var(--brand-lime-dark); }
.faq-answer p { color: var(--gray-700); }

/* --- Modals -------------------------------------------------------------- */
.modal-content { border-radius: 4px; border: 1px solid var(--gray-200); }
.modal-title { font-family: var(--font-display); color: var(--brand-ink); }

/* --- Footer -------------------------------------------------------------- */
.footer-col h4 { color: #FFFFFF; font-family: var(--font-display); }
.footer-col h4::after { background: var(--brand-lime); }
.footer-col a:hover { color: var(--brand-lime); }
.footer-social a:hover { background: var(--brand-lime-dark); border-color: var(--brand-lime-dark); }
.footer-logo { font-family: var(--font-display); }

/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 900px) {
    .logo-mark { width: 154px; max-height: 30px; }
    .header .logo-text small, .logo-text small { display: none; }
}
/* At 390px the row (lockup + seal + warehouse chip + cart + hamburger) ran 6px
   past the viewport and clipped the hamburger. The seal is decorative, so it is
   the first thing to go; the lockup then fits with room to spare. */
@media (max-width: 560px) {
    .logo { gap: 8px; }
    .logo-mark { width: 118px; max-height: 23px; }
    .logo-seal { display: none; }
}
/* 320px (iPhone SE 1st gen / Galaxy Fold cover) is the narrowest real viewport
   and the cart + warehouse chip alone nearly fill it. */
@media (max-width: 359px) {
    .logo { gap: 6px; }
    .logo-mark { width: 96px; max-height: 19px; }
    .header .cart-btn, .cart-btn { padding-left: 8px; padding-right: 8px; }
    .header .warehouse-btn, .warehouse-btn { padding-left: 6px; padding-right: 6px; }
}
.mobile-nav-link.active { box-shadow: inset 3px 0 0 var(--brand-lime); }
.bottom-nav-item.active, .bottom-nav-item.active i { color: var(--primary); }

/* --- Per-page contrast floor --------------------------------------------- */
/* product.css writes this spec line in the template's mid grey (re-hued to
   #73766c), which lands at 4.47:1 on the near-white similar-products card. */
.pd-similar-spec { color: var(--gray-600); }

/* --- Mobile tap targets --------------------------------------------------- */
/* The hero's PeptideMeter link is a bare <a> inside .hero-trust-item and came
   out 151x21 at 390px — under the 44px minimum. Give it its own padded hit box
   without changing how the row reads. */
@media (max-width: 900px) {
    .hero-trust-item a, .hero-trust-row a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 2px 0;
    }
}

/* ============================================================================
   HERO — rewritten 2026-08-21
   ----------------------------------------------------------------------------
   The template hero was a 50/50 grid: headline on the left, a red discount card
   on the right. Two problems. The discount card was the visual focus, which
   argues price on a brand whose whole story is documentation rigour; and three
   equally-weighted CTAs gave the eye nothing to land on, becoming a wall of
   three full-width buttons on a phone.

   The rewrite leads with the claim on the left and the PROOF on the right: a
   certificate card carrying an actual chromatogram. That is not decoration —
   the brand's own mark IS a chromatogram peak, and "the certificate reproduces
   the trace the figure was integrated from" is the one thing that separates this
   supplier from the other twenty. Volume pricing keeps its place underneath,
   restructured from four stacked rows into a 2x2 grid.

   Everything is fluid: type is clamp()ed and the grid is minmax()ed, so there is
   no 767px cliff and nothing can overflow between 320px and 1920px. No motion —
   the h1 is the LCP element (SCAFFOLD-RUNBOOK section 5).

   JS contract preserved exactly: [data-usd-threshold] spans hold a single text
   node (home.js overwrites textContent), #promoTimerCard is untouched by CSS
   layout that would break the spans global.js injects into it.
   ============================================================================ */

.pp-hero {
    /* Replaces the template's dot-grid and its inherited green radial wash. */
    background:
        radial-gradient(ellipse 70% 120% at 82% -20%, rgba(150, 193, 0, 0.13), transparent 64%),
        linear-gradient(180deg, #FFFFFF 0%, #F7F9F2 100%);
    padding: clamp(1.75rem, 5vw, 4.25rem) 0 clamp(2rem, 5vw, 4rem);
    border-bottom: 1px solid var(--gray-200);
    position: relative;
    overflow: hidden;
}
/* A single faint baseline rule across the section — the chromatogram idea at
   section scale, at an opacity that reads as texture rather than as content. */
.pp-hero::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brand-lime), transparent);
    opacity: 0.5;
    pointer-events: none;
}
.pp-hero .container { position: relative; z-index: 1; }

.pp-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 3.25rem);
    align-items: start;
}
/* minmax(0,…) is what stops a long word or a wide SVG from forcing the column
   past the track and giving the page a horizontal scrollbar. */
@media (min-width: 900px) {
    .pp-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; }
}

/* ---- left column: the claim --------------------------------------------- */
.pp-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 clamp(0.75rem, 2vw, 1.1rem);
    font-family: var(--font-mono);
    font-size: clamp(0.6875rem, 1.5vw, 0.78rem);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gray-600);
}
.pp-eyebrow-mark {
    width: 22px; height: 8px;
    flex: 0 0 auto;
    /* the mark, abstracted to a single peak */
    background:
        linear-gradient(to top right, transparent 48%, var(--brand-lime) 48%, var(--brand-lime) 52%, transparent 52%),
        linear-gradient(to top left,  transparent 48%, var(--brand-lime) 48%, var(--brand-lime) 52%, transparent 52%);
    background-size: 50% 100%;
    background-position: left bottom, right bottom;
    background-repeat: no-repeat;
}
.pp-eyebrow .cn-accent { font-family: 'Noto Sans SC', var(--font-display); letter-spacing: 0; }

.pp-h1 {
    margin: 0 0 clamp(0.75rem, 2vw, 1.15rem);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 5.2vw, 3.35rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--brand-ink);
    text-wrap: balance;
}
.pp-h1 span {
    color: var(--primary);
    font-style: normal;
    /* Underline the GLYPHS, not the inline box. A background-image rule paints
       once per line fragment, so the accent drew two mismatched bars the moment
       it wrapped at tablet width. */
    text-decoration: underline;
    text-decoration-color: var(--brand-lime);
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.14em;
    text-decoration-skip-ink: none;
}

/* Between 900 and 1199px the headline sits in a half-width column, where a
   viewport-driven clamp is the wrong ruler — it stayed at its maximum and ran
   to four lines. Cap it for the band. */
@media (min-width: 900px) and (max-width: 1199px) {
    .pp-h1 { font-size: clamp(1.85rem, 3.3vw, 2.45rem); }
    .pp-sub { font-size: clamp(0.9rem, 1.3vw, 1rem); }
}

.pp-sub {
    margin: 0 0 clamp(1.15rem, 3vw, 1.75rem);
    max-width: 54ch;
    font-size: clamp(0.95rem, 1.6vw, 1.075rem);
    line-height: 1.62;
    color: var(--gray-700);
}

.pp-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin: 0 0 clamp(1.25rem, 3vw, 1.9rem);
}
.pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 50px;
    padding: 0.8rem 1.4rem;
    border-radius: 2px;
    font-family: var(--font-family);
    font-size: clamp(0.9rem, 1.4vw, 0.975rem);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pp-btn i { font-size: 0.9em; }
.pp-btn-primary {
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #FFFFFF;
}
.pp-btn-primary:hover,
.pp-btn-primary:focus-visible {
    background: var(--brand-lime-dark);
    border-color: var(--brand-lime-dark);
    color: #FFFFFF;
}
.pp-btn-ghost {
    background: #FFFFFF;
    border: 1px solid var(--gray-300);
    color: var(--gray-800);
}
.pp-btn-ghost:hover,
.pp-btn-ghost:focus-visible {
    border-color: var(--brand-ink);
    color: var(--brand-ink);
}

/* Three claims with a number attached, rather than three adjectives. */
.pp-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.5rem, 2vw, 1.25rem);
    margin: 0 0 clamp(1rem, 2.5vw, 1.4rem);
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    padding-block: clamp(0.85rem, 2vw, 1.1rem);
}
.pp-proof li { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pp-proof strong {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.4vw, 1.4rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--brand-ink);
}
.pp-proof span {
    font-size: clamp(0.7rem, 1.4vw, 0.8rem);
    line-height: 1.35;
    color: var(--gray-600);
}

.pp-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.15rem;
    margin: 0;
    font-size: clamp(0.78rem, 1.4vw, 0.85rem);
}
.pp-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;          /* tap target, not decoration */
    color: var(--gray-700);
    text-decoration: none;
}
.pp-trust-item i { color: var(--brand-lime-dark); font-size: 0.9em; }
a.pp-trust-item:hover, a.pp-trust-item:focus-visible { color: var(--primary); text-decoration: underline; }

/* ---- right column: the proof -------------------------------------------- */
.pp-hero-proof {
    display: flex;
    flex-direction: column;
    gap: clamp(0.85rem, 2vw, 1.15rem);
    min-width: 0;
}

.pp-coa {
    margin: 0;
    background: #FFFFFF;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    box-shadow: 0 18px 40px -28px rgba(22, 25, 34, 0.45);
    overflow: hidden;
}
.pp-coa-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}
.pp-coa-title {
    font-family: var(--font-display);
    font-size: clamp(0.78rem, 1.5vw, 0.875rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--brand-ink);
}
.pp-coa-lot {
    font-family: var(--font-mono);
    font-size: clamp(0.6875rem, 1.3vw, 0.78rem);
    color: var(--gray-600);
}

.pp-coa-chart { padding: 0.6rem 0.75rem 0.2rem; }
.pp-coa-chart svg { display: block; width: 100%; height: auto; }
.pp-trace {
    fill: none;
    stroke: var(--brand-lime);
    stroke-width: 2.4;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.pp-trace-base  { stroke: var(--gray-300); stroke-width: 1; }
.pp-trace-int   { stroke: var(--brand-lime-dark); stroke-width: 1.4; }
.pp-trace-tick  { stroke: var(--brand-lime-dark); stroke-width: 1.4; }
.pp-trace-apex  { stroke: var(--gray-400); stroke-width: 1; stroke-dasharray: 3 4; }
.pp-trace-drop  { stroke: var(--brand-lime-dark); stroke-width: 1.2; }
.pp-trace-grid  { stroke: var(--gray-200); stroke-width: 1; }
.pp-trace-axis  { fill: var(--gray-500); font-size: 9px; font-family: var(--font-mono); letter-spacing: 0.04em; }
.pp-trace-rt    { fill: var(--gray-600); font-size: 9.5px; font-family: var(--font-mono); font-weight: 600; }

.pp-coa-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
    margin: 0;
    padding: 0.35rem 1rem 0.9rem;
}
.pp-coa-figures > div { min-width: 0; }
.pp-coa-figures dt {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gray-600);
}
.pp-coa-figures dd {
    margin: 0.1rem 0 0;
    font-size: clamp(0.76rem, 1.4vw, 0.85rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--gray-800);
    overflow-wrap: anywhere;
}
.pp-coa-purity {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2vw, 1.2rem) !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
}

.pp-coa-labs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0 1rem 0.85rem;
}
.pp-coa-labs span {
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--gray-200);
    border-radius: 2px;
    background: var(--primary-50);
    font-size: clamp(0.6875rem, 1.2vw, 0.72rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--gray-700);
    white-space: nowrap;
}
.pp-coa-note {
    margin: 0;
    padding: 0.55rem 1rem 0.7rem;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    font-size: clamp(0.6875rem, 1.2vw, 0.75rem);
    line-height: 1.4;
    color: var(--gray-600);
}

/* ---- volume pricing (was the deal card) --------------------------------- */
.pp-tiers {
    background: var(--brand-ink);
    border-radius: 4px;
    overflow: hidden;
}
.pp-tiers-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.pp-tiers-title {
    font-family: var(--font-display);
    font-size: clamp(0.8rem, 1.5vw, 0.9rem);
    font-weight: 700;
    color: #FFFFFF;
}
.pp-tiers-title .cn-accent { color: var(--brand-lime) !important; font-family: 'Noto Sans SC', var(--font-display); }
.pp-tiers-timer { display: inline-flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }
.pp-tiers-timer-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #C9CCD1;
}
/* The timer spans are injected by global.js; they inherit the light-ground
   colour rules from the identity layer, which read at ~1:1 on this dark card.
   Restate them here (SCAFFOLD-RUNBOOK 9.4: the floor is keyed on the hex, the
   readability on the GROUND). */
.pp-tiers .deal-timer { display: inline-flex; align-items: baseline; gap: 0.12rem; font-family: var(--font-mono); }
.pp-tiers .deal-timer .timer-num  { color: var(--brand-lime) !important; font-weight: 700; font-size: 0.9rem; }
.pp-tiers .deal-timer .timer-unit { color: #C9CCD1 !important; font-size: 0.6rem; margin-left: 1px; }
.pp-tiers .deal-timer .timer-sep  { color: #C9CCD1 !important; margin: 0 1px; }

.pp-tiers-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.12);
}
.pp-tier {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.9rem;
    background: var(--brand-ink);
    min-width: 0;
}
.pp-tier-label {
    font-size: clamp(0.7rem, 1.3vw, 0.78rem);
    font-weight: 600;
    color: #C9CCD1;
}
.pp-tier-value {
    font-family: var(--font-display);
    font-size: clamp(0.82rem, 1.6vw, 0.95rem);
    font-weight: 700;
    line-height: 1.2;
    color: #FFFFFF;
}
.pp-tier-top .pp-tier-value { color: var(--brand-lime); }

.pp-tiers-foot {
    display: flex;
    gap: 1px;
    background: rgba(255, 255, 255, 0.12);
}
.pp-tiers-cta, .pp-tiers-mail {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 48px;
    padding: 0.6rem 0.75rem;
    font-size: clamp(0.78rem, 1.4vw, 0.85rem);
    font-weight: 600;
    text-decoration: none;
    background: var(--brand-ink);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.pp-tiers-cta { color: var(--brand-ink); background: var(--brand-lime); }
.pp-tiers-cta:hover, .pp-tiers-cta:focus-visible { background: #A8D400; color: var(--brand-ink); }
.pp-tiers-mail { color: #FFFFFF; }
.pp-tiers-mail:hover, .pp-tiers-mail:focus-visible { background: #22252C; color: #FFFFFF; }

/* ---- phones -------------------------------------------------------------- */
@media (max-width: 899px) {
    /* Order for a thumb: claim, buttons, proof, then the commercial card last. */
    .pp-hero-proof { order: 2; }
    .pp-hero-lede  { order: 1; }
    .pp-sub { max-width: none; }
    .pp-btn { width: 100%; }
    .pp-cta { gap: 0.55rem; }
}
@media (max-width: 460px) {
    /* Three stat columns become unreadable below ~460px; two rows read better
       than three cramped columns. */
    .pp-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 1rem; }
    .pp-proof li:last-child { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 0.4rem; }
    .pp-coa-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pp-coa-figures > div:last-child { grid-column: 1 / -1; }
    .pp-trust { gap: 0 0.9rem; }
}
/* Two tier columns survive to 380px (the value simply wraps to two lines) and
   halve the card's height, so less of it scrolls under the fixed FAB cluster.
   Below that the cells get too narrow to read. */
@media (max-width: 379px) {
    .pp-tiers-grid { grid-template-columns: minmax(0, 1fr); }
}