:root {
    --bg: #F4ECE0;
    --primary: #B85C38;
    --primary-soft: rgba(184,92,56,0.08);
    --primary-line: rgba(184,92,56,0.22);
    --ink: #2D1810;
    --muted: #7A6B5C;
    --accent: #1A1A1A;
    --success: #4A6B3E;
    --card: #FBF6EE;
    --card-2: #EFE6D6;
    --rule: rgba(45,24,16,0.12);
    --rule-strong: rgba(45,24,16,0.22);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  /* never allow horizontal scrolling, at any width. overflow-x:clip clips
     overflowing/off-canvas elements (incl. position:fixed on iOS) without
     creating a scroll container, so position:sticky still works. */
  html { scroll-behavior: smooth; overflow-x: clip; }
  body { overflow-x: clip; }
  /* the off-canvas drawer + backdrop are mobile-only; remove them from layout
     above the hamburger breakpoint so they can't extend the page width */
  @media (min-width: 641px) { .cp-menu, .cp-backdrop { display: none !important; } }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
  }
  .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
  a { color: inherit; text-decoration: none; }

  /* ============ NAV ============ */
  nav.top {
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
    position: sticky; top: 0; z-index: 10;
  }
  nav.top .inner { display: flex; align-items: center; gap: 40px; padding: 22px 0; }
  .brand {
    font-family: 'Instrument Serif', serif;
    font-size: 28px;
    font-style: italic;
    color: var(--primary);
    letter-spacing: -0.01em;
  }
  .brand .pep {
    font-family: 'Instrument Serif', serif;
    font-style: normal;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-left: 2px;
  }
  nav .links { display: flex; gap: 22px; flex: 1; }
  nav .links a { font-size: 14px; color: var(--ink); }
  nav .links a:hover { color: var(--primary); }
  nav .actions { display: flex; gap: 12px; align-items: center; }
  .pill {
    font-size: 14px;
    font-weight: 600;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .15s;
  }
  .pill.primary { background: var(--accent); color: white; border-color: var(--accent); }
  .pill.primary:hover { background: var(--primary); border-color: var(--primary); }
  .pill.outline { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
  .pill.outline:hover { border-color: var(--ink); }
  .nav-search {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    width: 44px; height: 44px;
    font-size: 42px;
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
    padding: 0;
    transition: color .15s;
  }
  .nav-search:hover { color: var(--primary); }

  /* ============ HERO PROBLEM GRID ============ */
  section.hero { padding: 64px 0 24px; }
  .hero-split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
    align-items: stretch;
  }
  .hero-title-col { display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
  .hero-title-col h1 {
    font-family: 'Instrument Serif', serif;
    font-weight: 400;
    font-size: 116px;
    line-height: 0.94;
    letter-spacing: -0.035em;
    color: var(--ink);
    margin-bottom: 36px;
  }
  .hero-title-col h1 em { font-style: italic; color: var(--primary); }
  .hero-sub {
    max-width: 480px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--muted);
    margin-bottom: 36px;
  }
  /* ---- Hero photo (isolated vial + outcome callouts) ---- */
  .hero-photo {
    position: relative;
    min-height: 620px;
    background: transparent;
    border: none;
  }
  .hero-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    filter: drop-shadow(0 30px 50px rgba(45,24,16,0.10));
  }

  /* Callouts orbiting the vial */
  .callout {
    position: absolute;
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 20px;
    line-height: 1.2;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--rule);
    padding: 10px 18px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(45,24,16,0.07);
    white-space: nowrap;
    z-index: 2;
    transition: transform .2s;
  }
  .callout::before { content: '\201C'; margin-right: 1px; color: var(--primary); }
  .callout::after { content: '\201D'; margin-left: 1px; color: var(--primary); }
  .callout:hover { transform: translateY(-2px); }

  /* Positions — all four overlap the vial slightly */
  .callout.c-tl { top: 22%; left: 10%; }
  .callout.c-tr { top: 12%; right: 6%; }
  .callout.c-bl { bottom: 22%; left: 0%; }
  .callout.c-br { bottom: 30%; right: 10%; }

  .grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-bottom: 18px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .tile {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: 28px;
    position: relative;
    transition: all .15s;
    cursor: pointer;
    overflow: hidden;
  }
  .tile:hover { border-color: var(--primary-line); transform: translateY(-2px); }
  .tile .code-mini {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--primary);
    text-transform: uppercase;
    margin-bottom: 14px;
  }
  .tile h3 {
    font-family: 'Instrument Serif', serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 1.1;
    margin-bottom: 8px;
    color: var(--ink);
  }
  .tile h3 em { font-style: italic; color: var(--primary); }
  .tile .desc { font-size: 13px; color: var(--muted); margin-bottom: 18px; max-width: 280px; }
  .tile .compounds { display: flex; gap: 6px; flex-wrap: wrap; }
  .chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 4px 8px;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 6px;
    color: var(--ink);
  }

  /* ============ SMALLER TILE REFINEMENT (4-up grid) ============ */
  .tile.small {
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 280px;
  }
  .tile.small .mood-strip {
    height: 92px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--rule);
  }
  .tile.small .mood-strip::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(45,24,16,0.08) 1px, transparent 1px);
    background-size: 4px 4px;
    opacity: 0.4;
  }
  .tile.small .glyph {
    position: absolute;
    top: 18px; right: 18px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(247,242,234,0.85);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(45,24,16,0.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    z-index: 2;
  }
  .tile.small .body { padding: 22px 24px 64px; flex: 1; display: flex; flex-direction: column; }
  .tile.small h3 { font-size: 30px; margin-bottom: 4px; letter-spacing: -0.015em; }
  .tile.small .desc { font-size: 13px; margin-bottom: 14px; line-height: 1.5; }
  .tile.small .stat-row {
    display: flex; gap: 14px; align-items: center;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed var(--rule);
  }
  .tile.small .stat {
    display: flex; flex-direction: column; gap: 2px;
  }
  .tile.small .stat .n {
    font-family: 'Instrument Serif', serif;
    font-size: 18px;
    line-height: 1;
    color: var(--ink);
  }
  .tile.small .stat .l {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .tile.small .stat-divider { width: 1px; height: 24px; background: var(--rule); }
  .tile.small .arrow {
    width: 32px; height: 32px;
    bottom: 18px; right: 18px;
  }
  .tile.small .arrow.outline {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--rule-strong);
  }
  .tile.small:hover .arrow.outline {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
  }

  /* Category mood gradients — bumped opacity for more visible identity */
  .tile.longevity .mood-strip {
    background: linear-gradient(135deg, #D8C9A8 0%, rgba(74,107,62,0.55) 100%);
  }
  .tile.cognitive .mood-strip {
    background: linear-gradient(135deg, #EFE0CC 0%, rgba(184,92,56,0.55) 100%);
  }
  .tile.sleep .mood-strip {
    background: linear-gradient(135deg, #B89E80 0%, rgba(45,24,16,0.65) 100%);
  }
  .tile.sexual .mood-strip {
    background: linear-gradient(135deg, #F4D8B8 0%, rgba(244,140,110,0.78) 100%);
  }
  .tile.hair .mood-strip {
    background: linear-gradient(135deg, #E8CFA8 0%, rgba(168,110,52,0.72) 100%);
  }
  .tile.mood .mood-strip {
    background: linear-gradient(135deg, #E0D9DE 0%, rgba(120,108,140,0.62) 100%);
  }
  .tile.tanning .mood-strip {
    background: linear-gradient(135deg, #F4D098 0%, rgba(212,130,52,0.80) 100%);
  }
  .tile.gut .mood-strip {
    background: linear-gradient(135deg, #C9D3B6 0%, rgba(74,107,62,0.72) 100%);
  }
  .tile.muscle .mood-strip {
    background: linear-gradient(135deg, #DDC4A5 0%, rgba(160,80,55,0.65) 100%);
  }
  .tile.sleep .glyph { color: var(--ink); background: rgba(247,242,234,0.95); }
  .tile.sleep .glyph { color: var(--ink); }

  /* Compound chip row inside small tile body */
  .tile.small .compounds-mini {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .tile.small .compounds-mini .chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.05em;
    padding: 3px 7px;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 5px;
    color: var(--ink);
  }
  .tile.small .compounds-mini .chip.more {
    background: transparent;
    color: var(--muted);
    border-style: dashed;
  }

  .tile.big { padding: 40px 36px; min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; }
  .tile.big h3 { font-size: 48px; line-height: 1; margin-bottom: 14px; }
  .tile.big .desc { font-size: 15px; max-width: 360px; margin-bottom: 24px; }
  .tile .arrow {
    position: absolute;
    bottom: 24px; right: 28px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
  }
  .tile.featured {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
  }
  .tile.featured h3 { color: white; }
  .tile.featured h3 em { color: #F4B886; }
  .tile.featured .code-mini { color: #F4B886; }
  .tile.featured .desc { color: rgba(255,255,255,0.7); }
  .tile.featured .chip { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: white; }
  .tile.featured .arrow { background: white; color: var(--accent); }

  /* ============ TRUST KPI STRIP ============ */
  section.kpi { padding: 36px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: 56px; }
  .kpi-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; align-items: center; text-align: center; justify-items: center; }
  .kpi-item .num {
    font-family: 'Instrument Serif', serif;
    font-size: 48px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.02em;
  }
  .kpi-item .num em { font-style: italic; color: var(--primary); }
  .kpi-item .label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--muted);
    text-transform: uppercase;
    margin-top: 6px;
  }

  /* ============ SEARCH SECTION ============ */
  section.search { padding: 72px 0 56px; text-align: center; }
  section.search h2 {
    font-family: 'Instrument Serif', serif;
    font-size: 44px;
    margin-bottom: 28px;
    letter-spacing: -0.02em;
  }
  section.search h2 em { font-style: italic; color: var(--primary); }
  .search-box {
    max-width: 720px; margin: 0 auto;
    display: flex; align-items: center; gap: 14px;
    background: var(--card);
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    padding: 8px 8px 8px 28px;
    box-shadow: 0 1px 0 rgba(45,24,16,0.04);
  }
  .search-box input {
    flex: 1;
    border: none; background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    color: var(--ink);
    outline: none;
    padding: 14px 0;
  }
  .search-box input::placeholder { color: var(--muted); }
  .popular {
    display: flex; gap: 10px; justify-content: center;
    margin-top: 22px;
    flex-wrap: wrap;
  }
  .popular-label { font-size: 13px; color: var(--muted); margin-right: 4px; align-self: center; }
  .popular a {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 6px 12px;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--ink);
    transition: all .15s;
  }
  .popular a:hover { background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary); }

  /* ============ FEATURED COMPARISON ============ */
  section.featured { padding: 72px 0; }
  .section-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 32px; }
  .section-head h2 {
    font-family: 'Instrument Serif', serif;
    font-weight: 400;
    font-size: 40px;
    letter-spacing: -0.02em;
  }
  .section-head h2 em { font-style: italic; color: var(--primary); }
  .section-head .head-sub { color: var(--muted); font-size: 14px; max-width: 320px; }
  .peptide-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    align-items: center;
  }
  .peptide-tab {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 18px;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--ink);
    white-space: nowrap;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
  }
  .peptide-tab:hover {
    border-color: var(--primary-line);
    color: var(--primary);
  }
  .peptide-tab.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
  }
  .peptide-tab.active:hover { color: white; }
  .price-card {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 20px;
    padding: 0;
    display: grid;
    grid-template-columns: 360px 1fr;
    overflow: hidden;
  }
  .product-col {
    padding: 36px;
    border-right: 1px solid var(--rule);
    background: linear-gradient(180deg, var(--card) 0%, rgba(184,92,56,0.04) 100%);
    display: flex;
    flex-direction: column;
  }
  .product-col .code-mini {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--primary);
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .product-photo {
    width: 100%;
    aspect-ratio: 1.05;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 22px;
    position: relative;
    background: var(--bg);
  }
  .product-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% center;
  }
  .product-col h3 {
    font-family: 'Instrument Serif', serif;
    font-size: 44px;
    letter-spacing: -0.025em;
    line-height: 1;
    margin-bottom: 6px;
  }
  .product-col .pname {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 24px;
  }
  .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
    margin-bottom: 24px;
  }
  .stats-grid .stat-cell .num {
    font-family: 'Instrument Serif', serif;
    font-size: 24px;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .stats-grid .stat-cell .lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .savings-banner {
    margin-top: auto;
    background: var(--accent);
    color: white;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .savings-banner strong { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 20px; font-weight: 400; color: #F4B886; }

  .vendor-rows { padding: 36px; display: flex; flex-direction: column; gap: 14px; }

  /* ----- BEST row (dramatic, 2x visual weight) ----- */
  .vendor-row.best {
    background: var(--bg);
    border: 1px solid var(--primary-line);
    border-radius: 16px;
    padding: 24px 26px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items: center;
    box-shadow: 0 0 0 2px var(--primary-soft);
  }
  .best-badge {
    position: absolute;
    top: -10px; left: 22px;
    background: var(--primary);
    color: white;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 6px;
  }
  .vendor-row.best .vr-left { display: flex; gap: 16px; align-items: start; }
  .vendor-row.best .rank {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--muted);
    padding-top: 8px;
  }
  .vname-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
  .vendor-row .vname {
    font-family: 'Instrument Serif', serif;
    font-size: 28px;
    letter-spacing: -0.015em;
    line-height: 1;
  }
  .vendor-row .vdetails {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  .why-tags { display: flex; gap: 6px; flex-wrap: wrap; }
  .why {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    background: var(--card);
    border: 1px solid var(--rule);
    color: var(--ink);
    border-radius: 999px;
  }
  .why::before { content: "✓ "; color: var(--success); font-weight: 700; }
  .vr-right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
  .price-block { text-align: right; }
  .price-block .price-big {
    font-family: 'Instrument Serif', serif;
    font-size: 56px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.03em;
  }
  .price-block .price-big em { font-style: italic; color: var(--primary); }
  .price-block .price-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--success);
    margin-top: 4px;
  }
  .pill.big { padding: 14px 22px; font-size: 14px; }

  /* ----- Compact rows ----- */
  .vendor-row.compact {
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 16px 22px;
    display: grid;
    grid-template-columns: 32px 1fr 90px 1fr 100px 130px;
    align-items: center;
    gap: 20px;
  }
  .vendor-row.compact .rank {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.12em;
  }
  .vendor-row.compact .vname {
    font-family: 'Instrument Serif', serif;
    font-size: 22px;
  }
  .vendor-row.compact .vdetails {
    margin-bottom: 0;
  }
  .vendor-row.compact .price {
    font-family: 'Instrument Serif', serif;
    font-size: 28px;
    color: var(--ink);
    text-align: right;
  }
  .grade {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: white;
    border: 1px solid transparent;
    white-space: nowrap;
  }
  .grade .letter {
    font-weight: 700;
    margin-left: 4px;
  }
  .grade.A { background: var(--success); border-color: var(--success); }
  .grade.B { background: var(--primary); border-color: var(--primary); }
  .vendor-row.compact .pill { padding: 9px 16px; font-size: 12px; }

  .view-all {
    margin-top: 8px;
    text-align: center;
    padding-top: 18px;
    border-top: 1px dashed var(--rule);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary);
    cursor: pointer;
  }

  /* ============ POPULAR STACKS (reuses compound-card system) ============ */
  section.stacks { padding: 24px 0 72px; }
  .compound-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .compound-card .stack-recipe { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
  .compound-card .stack-recipe .rchip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px; letter-spacing: 0.04em;
    padding: 3px 7px; background: var(--bg);
    border: 1px solid var(--rule); border-radius: 5px; color: var(--ink);
  }
  .compound-card.flagship .stack-recipe .rchip {
    background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: white;
  }
  .compound-card .stack-recipe .plus { align-self: center; color: var(--muted); font-size: 11px; }
  .compound-card.flagship .stack-recipe .plus { color: rgba(255,255,255,0.5); }
  .compound-card {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: 0;
    cursor: pointer;
    transition: all .15s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 320px;
  }
  .compound-card:hover { border-color: var(--primary-line); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(45,24,16,0.07); }
  .compound-card.flagship { background: var(--accent); color: white; border-color: var(--accent); }

  .compound-card .c-body { padding: 24px 24px 24px; display: flex; flex-direction: column; flex: 1; }
  .compound-card .ccode {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 6px;
  }
  .compound-card.flagship .ccode { color: #F4B886; }
  .compound-card h4 {
    font-family: 'Instrument Serif', serif;
    font-weight: 400;
    font-size: 30px;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
    line-height: 1;
  }
  /* Stack info: why people run it + best-for goals */
  .compound-card .why-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted); display: block; margin-bottom: 8px;
  }
  .compound-card.flagship .why-label { color: rgba(255,255,255,0.45); }
  .compound-card .stack-why { margin-bottom: 16px; }
  .compound-card .stack-why p { font-size: 13.5px; line-height: 1.5; color: var(--ink); }
  .compound-card.flagship .stack-why p { color: rgba(255,255,255,0.78); }

  .compound-card .stack-foot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px dashed var(--rule);
  }
  .compound-card.flagship .stack-foot { border-top-color: rgba(255,255,255,0.15); }
  .compound-card .stack-goals { display: flex; flex-wrap: wrap; gap: 6px; }
  .compound-card .goal {
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 500;
    padding: 4px 10px; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary);
    border: 1px solid var(--primary-line);
  }
  .compound-card.flagship .goal {
    background: rgba(244,184,134,0.12); color: #F4B886; border-color: rgba(244,184,134,0.3);
  }

  /* ============ DOSAGE CALCULATOR TEASER ============ */
  section.calc { padding: 24px 0 72px; }
  .calc-card {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 20px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .calc-inputs {
    padding: 38px;
    border-right: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: linear-gradient(180deg, var(--card) 0%, rgba(184,92,56,0.04) 100%);
  }
  .calc-inputs .calc-intro {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--primary); margin-bottom: 4px;
  }
  .calc-field {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 13px 18px;
    cursor: pointer;
    transition: border-color .15s;
  }
  .calc-field:hover { border-color: var(--primary-line); }
  .calc-field .cf-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted);
  }
  .calc-field .cf-value {
    font-family: 'Instrument Serif', serif;
    font-size: 23px; color: var(--ink); line-height: 1;
    display: flex; align-items: baseline; gap: 5px;
  }
  .calc-field .cf-value .unit { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--muted); }
  .calc-field .cf-caret { color: var(--muted); font-size: 10px; margin-left: 12px; }

  .calc-result {
    background: var(--accent);
    color: white;
    padding: 38px;
    display: flex;
    flex-direction: column;
  }
  .calc-result .cr-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.5); margin-bottom: 12px;
  }
  .calc-draw {
    font-family: 'Instrument Serif', serif;
    font-size: 78px; line-height: 0.85; color: #F4B886;
    letter-spacing: -0.03em; margin-bottom: 8px;
  }
  .calc-draw .du { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 26px; color: white; margin-left: 8px; }
  .calc-sub { font-size: 13px; color: rgba(255,255,255,0.7); margin-bottom: 26px; }
  .calc-sub strong { color: white; font-weight: 600; }

  /* Syringe visual */
  .syringe { display: flex; align-items: center; margin-bottom: 28px; }
  .syringe .needle {
    width: 0; height: 0;
    border-top: 5px solid transparent; border-bottom: 5px solid transparent;
    border-right: 16px solid rgba(255,255,255,0.35);
  }
  .syringe .barrel {
    flex: 1; height: 24px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.22);
    border-left: none;
    position: relative; overflow: hidden;
  }
  .syringe .fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 17%;
    background: linear-gradient(90deg, rgba(244,184,134,0.45), #F4B886);
  }
  .syringe .ticks { position: absolute; inset: 0; display: flex; }
  .syringe .ticks span { flex: 1; border-right: 1px solid rgba(255,255,255,0.12); }
  .syringe .plunger { width: 7px; height: 32px; background: rgba(255,255,255,0.25); border-radius: 0 3px 3px 0; }

  .calc-readouts {
    display: flex; gap: 30px;
    padding-top: 20px; margin-top: auto;
    border-top: 1px dashed rgba(255,255,255,0.18);
    margin-bottom: 24px;
  }
  .calc-readout .n { font-family: 'Instrument Serif', serif; font-size: 24px; color: white; line-height: 1; }
  .calc-readout .l { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-top: 5px; }
  .calc-cta {
    align-self: flex-start;
    background: white; color: var(--accent);
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px;
    padding: 13px 24px; border-radius: 999px; border: none; cursor: pointer;
    transition: all .15s;
  }
  .calc-cta:hover { background: #F4B886; }

  /* ============ LEARN / GUIDES ============ */
  section.learn { padding: 72px 0; border-top: 1px solid var(--rule); }
  .learn-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 44px; align-items: start; }
  .learn-featured {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    transition: all .15s;
    display: flex; flex-direction: column;
  }
  .learn-featured:hover { border-color: var(--primary-line); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(45,24,16,0.07); }
  .learn-featured .lf-img {
    height: 210px;
    background: linear-gradient(135deg, #E8D4BC 0%, rgba(184,92,56,0.38) 100%);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--rule);
  }
  .learn-featured .lf-img img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 58%;
    display: block;
  }
  .lf-tag {
    position: absolute; top: 16px; left: 16px; z-index: 2;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--primary);
    background: rgba(247,242,234,0.92); backdrop-filter: blur(6px);
    border: 1px solid rgba(45,24,16,0.08);
    padding: 5px 11px; border-radius: 999px;
  }
  .learn-featured .lf-body { padding: 28px 30px 30px; }
  .learn-featured h3 {
    font-family: 'Instrument Serif', serif; font-weight: 400;
    font-size: 33px; line-height: 1.05; letter-spacing: -0.02em;
    margin-bottom: 12px;
  }
  .learn-featured h3 em { font-style: italic; color: var(--primary); }
  .learn-featured .lf-dek { font-size: 15px; color: var(--muted); line-height: 1.55; margin-bottom: 18px; max-width: 460px; }
  .lf-meta, .li-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  }
  .learn-list { display: flex; flex-direction: column; }
  .learn-item {
    padding: 22px 0; border-bottom: 1px solid var(--rule);
    cursor: pointer; display: block;
  }
  .learn-item:first-child { padding-top: 0; }
  .learn-item:last-child { border-bottom: none; }
  .learn-item .li-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--primary); display: block; margin-bottom: 9px;
  }
  .learn-item h4 {
    font-family: 'Instrument Serif', serif; font-weight: 400;
    font-size: 22px; line-height: 1.15; letter-spacing: -0.01em;
    margin-bottom: 9px; transition: color .15s;
  }
  .learn-item:hover h4 { color: var(--primary); }

  /* ============ NEWSLETTER ============ */
  section.newsletter { padding: 24px 0 80px; }
  .news-card {
    background: var(--accent); color: white;
    border-radius: 24px;
    padding: 64px 56px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .news-card::after {
    content: ""; position: absolute; top: -40%; right: -10%;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(184,92,56,0.28) 0%, transparent 65%);
    pointer-events: none;
  }
  .news-eyebrow {
    position: relative; z-index: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: #F4B886; margin-bottom: 18px;
  }
  .news-card h2 {
    position: relative; z-index: 1;
    font-family: 'Instrument Serif', serif; font-weight: 400;
    font-size: 52px; line-height: 1.0; letter-spacing: -0.02em;
    margin-bottom: 16px; color: white;
  }
  .news-card h2 em { font-style: italic; color: #F4B886; }
  .news-card > p {
    position: relative; z-index: 1;
    color: rgba(255,255,255,0.7); font-size: 17px; line-height: 1.55;
    max-width: 520px; margin: 0 auto 32px;
  }
  .news-form {
    position: relative; z-index: 1;
    display: flex; gap: 10px; max-width: 480px; margin: 0 auto 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px; padding: 7px 7px 7px 24px;
  }
  .news-form input {
    flex: 1; background: transparent; border: none; outline: none;
    color: white; font-family: 'Inter', sans-serif; font-size: 16px;
  }
  .news-form input::placeholder { color: rgba(255,255,255,0.45); }
  .news-form button {
    background: white; color: var(--accent); border: none;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px;
    padding: 13px 28px; border-radius: 999px; cursor: pointer;
    transition: all .15s;
  }
  .news-form button:hover { background: #F4B886; }
  .news-fine {
    position: relative; z-index: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(255,255,255,0.4);
  }

  /* ============ DISCLAIMER ============ */
  section.disclaimer { padding: 64px 0; border-top: 1px solid var(--rule-strong); }
  .disclaimer-grid { display: grid; grid-template-columns: 1fr 1.7fr; gap: 56px; align-items: start; }
  .disclaimer h2 {
    font-family: 'Instrument Serif', serif; font-weight: 400;
    font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink);
  }
  .disclaimer h2 em { font-style: italic; color: var(--primary); }
  .disclaimer-body { columns: 2; column-gap: 44px; }
  .disclaimer-body p {
    font-size: 13px; line-height: 1.6; color: var(--muted);
    margin: 0 0 16px; break-inside: avoid;
  }
  .disclaimer-body p:last-child { margin-bottom: 0; }
  .disclaimer-body strong { color: var(--ink); font-weight: 600; }
  .disclaimer-body a { color: var(--primary); text-decoration: underline; }

  /* ============ FOOTER ============ */
  footer { padding: 72px 0 48px; }
  .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--rule); margin-bottom: 24px; }
  .footer-grid h5 { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
  .footer-grid ul { list-style: none; }
  .footer-grid li { margin-bottom: 10px; font-size: 14px; color: var(--ink); }
  .footer-grid li:hover { color: var(--primary); cursor: pointer; }
  .footer-tagline {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 28px;
    color: var(--ink);
    margin-bottom: 14px;
    max-width: 380px;
    line-height: 1.2;
  }
  .footer-tagline em { color: var(--primary); }
  .footer-sub { font-size: 13px; color: var(--muted); max-width: 360px; line-height: 1.5; }
  .footer-bottom { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; }

  /* ============ CATEGORY / GOAL PAGES ============ */
  .cat-hero { padding: 56px 0 8px; }
  .cat-breadcrumb { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:26px; }
  .cat-breadcrumb a { color:var(--muted); } .cat-breadcrumb a:hover { color:var(--primary); }
  .cat-hero .cat-eyebrow { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--primary); margin-bottom:18px; display:block; }
  .cat-hero h1 { font-family:'Instrument Serif',serif; font-weight:400; font-size:80px; line-height:0.98; letter-spacing:-0.03em; color:var(--ink); margin-bottom:22px; max-width:15ch; }
  .cat-hero h1 em { font-style:italic; color:var(--primary); }
  .cat-lede { font-size:19px; line-height:1.55; color:var(--muted); max-width:620px; margin-bottom:28px; }
  .cat-hero-stats { display:flex; gap:42px; flex-wrap:wrap; margin-bottom:30px; }
  .cat-hero-stats .s .n { font-family:'Instrument Serif',serif; font-size:32px; color:var(--ink); line-height:1; }
  .cat-hero-stats .s .n em { font-style:italic; color:var(--primary); }
  .cat-hero-stats .s .l { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
  .cat-ctas { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

  .cat-section { padding: 56px 0; }
  .cat-section.alt { background:var(--card-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }

  .cat-why { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .cat-why-item { background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:28px; }
  .cat-why-item .gl { font-size:22px; margin-bottom:14px; display:block; color:var(--primary); }
  .cat-why-item h3 { font-family:'Instrument Serif',serif; font-weight:400; font-size:24px; line-height:1.1; margin-bottom:8px; color:var(--ink); }
  .cat-why-item p { font-size:14px; line-height:1.55; color:var(--muted); }

  .cat-table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--rule); border-radius:16px; overflow:hidden; }
  .cat-table th { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); text-align:left; padding:14px 20px; border-bottom:1px solid var(--rule); background:var(--card-2); }
  .cat-table td { padding:15px 20px; border-bottom:1px solid var(--rule); font-size:14px; color:var(--ink); }
  .cat-table tr:last-child td { border-bottom:none; }
  .cat-table td .pn { font-family:'Instrument Serif',serif; font-size:18px; }

  .cat-faq { max-width:780px; }
  .cat-faq-item { padding:22px 0; border-bottom:1px solid var(--rule); }
  .cat-faq-item:last-child { border-bottom:none; }
  .cat-faq-item h4 { font-family:'Instrument Serif',serif; font-weight:400; font-size:22px; margin-bottom:8px; color:var(--ink); }
  .cat-faq-item p { font-size:15px; line-height:1.6; color:var(--muted); }

  .cat-cta { background:var(--accent); color:#fff; border-radius:24px; padding:60px 56px; text-align:center; position:relative; overflow:hidden; }
  .cat-cta::after { content:""; position:absolute; top:-40%; right:-10%; width:460px; height:460px; background:radial-gradient(circle, rgba(184,92,56,0.28) 0%, transparent 65%); pointer-events:none; }
  .cat-cta > * { position:relative; z-index:1; }
  .cat-cta h2 { font-family:'Instrument Serif',serif; font-weight:400; font-size:44px; line-height:1; color:#fff; margin-bottom:14px; }
  .cat-cta h2 em { font-style:italic; color:#F4B886; }
  .cat-cta p { color:rgba(255,255,255,0.7); max-width:520px; margin:0 auto 28px; font-size:16px; line-height:1.55; }
  .cat-cta .cta-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
  .cat-cta .pill.outline { color:#fff; border-color:rgba(255,255,255,0.3); }
  .cat-cta .pill.outline:hover { border-color:#fff; background:transparent; }

  /* ----- Category full peptide list (complete menu, decision-ready rows) ----- */
  .cat-list-head { display:grid; grid-template-columns:1.2fr 1.9fr 86px 92px 1fr; gap:20px; padding:0 24px 12px; }
  .cat-list-head span { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
  .cat-list-head span:nth-child(3), .cat-list-head span:nth-child(4), .cat-list-head span:nth-child(5){ text-align:right; }
  .cat-list { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--rule); border-radius:16px; overflow:hidden; }
  .cat-list-row { display:grid; grid-template-columns:1.2fr 1.9fr 86px 92px 1fr; gap:20px; align-items:center; padding:17px 24px; border-bottom:1px solid var(--rule); transition:background .15s; }
  .cat-list-row:last-child { border-bottom:none; }
  .cat-list-row:hover { background:var(--bg); }
  .cat-list-row:hover .cl-go { color:var(--ink); }
  .cl-name { font-family:'Instrument Serif',serif; font-size:21px; line-height:1.05; color:var(--ink); letter-spacing:-0.01em; }
  .cl-use { font-size:13px; color:var(--muted); line-height:1.4; }
  .cat-list-row .grade { justify-self:end; }
  .cl-price { font-family:'Instrument Serif',serif; font-size:19px; color:var(--ink); text-align:right; white-space:nowrap; }
  .cl-price small { font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:2px; }
  .cl-vendor { text-align:right; font-size:12.5px; color:var(--ink); white-space:nowrap; line-height:1.3; }
  .cl-vendor small { font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:2px; }
  .cl-go { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--primary); margin-top:5px; display:block; }
  @media (max-width:860px){
    .cat-list-head { display:none; }
    .cat-list-row { grid-template-columns:1fr auto; row-gap:6px; }
    .cl-use { grid-column:1 / -1; order:5; }
    .cat-list-row .grade { grid-column:2; grid-row:1; }
    .cl-price { order:6; text-align:left; }
    .cl-vendor { order:7; text-align:left; }
  }

  /* ============ PRODUCT: mechanism + administration (prefix pu-) ============ */
  .pu-simple { background:var(--card); border:1px solid var(--rule); border-radius:18px; padding:30px 34px; margin-bottom:18px; }
  .pu-simple .lbl { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--primary); margin-bottom:12px; }
  .pu-simple p { font-family:'Instrument Serif',serif; font-size:27px; line-height:1.28; color:var(--ink); margin:0; max-width:24em; }
  .pu-simple p em { font-style:italic; color:var(--primary); }
  .pu-mech { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .pu-mech-card { background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:26px; }
  .pu-mech-card .gl { font-size:20px; color:var(--primary); display:block; margin-bottom:12px; }
  .pu-mech-card h4 { font-family:'Instrument Serif',serif; font-weight:400; font-size:22px; margin:0 0 8px; color:var(--ink); }
  .pu-mech-card p { font-size:14px; line-height:1.6; color:var(--muted); margin:0; }
  .pu-caveat { font-size:13px; line-height:1.6; color:var(--muted); margin:20px 0 0; max-width:48em; }
  .pd-dose-h { font-family:'Instrument Serif',serif; font-weight:400; font-size:30px; line-height:1.1; color:var(--ink); margin:6px 0 8px; }
  .pd-dose-h em { font-style:italic; color:var(--primary); }
  .pu-caveat strong { color:var(--ink); }

  .pu-use-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:24px; align-items:stretch; margin-bottom:24px; }
  .pu-route { background:var(--card); border:1px solid var(--rule); border-radius:18px; padding:30px; }
  .pu-route-badge { display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--primary); background:var(--primary-soft); border:1px solid var(--primary-line); border-radius:999px; padding:8px 15px; margin-bottom:22px; }
  .pu-steps { list-style:none; margin:0 0 22px; padding:0; counter-reset:step; }
  .pu-steps li { position:relative; padding:0 0 18px 46px; }
  .pu-steps li:last-child { padding-bottom:0; }
  .pu-steps li::before { counter-increment:step; content:counter(step); position:absolute; left:0; top:-3px; width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; font-family:'Instrument Serif',serif; font-size:16px; display:flex; align-items:center; justify-content:center; }
  .pu-steps li h5 { font-family:'Inter',sans-serif; font-size:15px; font-weight:600; color:var(--ink); margin:0 0 3px; }
  .pu-steps li p { font-size:13.5px; line-height:1.55; color:var(--muted); margin:0; }
  .pu-sites { background:var(--card-2); border:1px solid var(--rule); border-radius:18px; padding:26px; display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:center; }
  .pu-sites .ttl { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
  .pu-sites svg { width:100%; max-width:280px; height:auto; }
  .pu-sites .note { font-size:12.5px; color:var(--muted); margin-top:18px; line-height:1.55; max-width:24em; }
  .pu-sites .note strong { color:var(--ink); }
  .pu-body-shape { fill:rgba(45,24,16,0.05); stroke:var(--rule-strong); stroke-width:1.5; }
  .pu-figwrap { position:relative; width:100%; max-width:260px; margin:0 auto; }
  .pu-bodyimg { display:block; width:100%; height:auto; }
  .pu-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
  .pu-zone { fill:rgba(184,92,56,0.18); }
  .pu-dot { fill:var(--primary); }
  .pu-navel { fill:var(--rule-strong); }
  .pu-lbl line { stroke:var(--rule-strong); stroke-width:1; }
  .pu-lbl text { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.08em; text-transform:uppercase; fill:var(--muted); }
  @media (max-width:820px){ .pu-mech { grid-template-columns:1fr; } .pu-use-grid { grid-template-columns:1fr; } }

  /* ============ FOOTER responsive (collapse the 4-col grid on small screens) ============ */
  @media (max-width: 760px) {
    .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 26px 14px; }
    .footer-grid > div:first-child { grid-column: 1 / -1; margin-bottom: 4px; }
    .footer-grid h5 { margin-bottom: 12px; }
    .footer-grid li { font-size: 13px; margin-bottom: 9px; }
    .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
    .footer-bottom .footer-legal { justify-content: center; row-gap: 8px; }
  }

/* ============================================================
   MOBILE OPTIMIZATION  (hamburger nav, stacked price card,
   collapsible sections, tighter rhythm)  — added 2026-06
   ============================================================ */
.cp-burger { display:none; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--rule); border-radius:11px; background:var(--card); cursor:pointer; color:var(--ink); flex:0 0 auto; padding:0; }
.cp-burger span { display:block; width:18px; height:2px; background:var(--ink); position:relative; }
.cp-burger span::before, .cp-burger span::after { content:''; position:absolute; left:0; width:18px; height:2px; background:var(--ink); }
.cp-burger span::before { top:-6px; } .cp-burger span::after { top:6px; }
.cp-backdrop { display:none; position:fixed; inset:0; background:rgba(45,24,16,0.34); z-index:399; }
.cp-backdrop.open { display:block; }
.cp-menu { position:fixed; top:0; right:0; bottom:0; width:80%; max-width:320px; background:var(--card); border-left:1px solid var(--rule); box-shadow:-14px 0 44px rgba(45,24,16,0.2); z-index:400; padding:72px 24px 28px; overflow-y:auto; transform:translateX(100%); transition:transform .22s ease; }
.cp-menu.open { transform:translateX(0); }
.cp-menu a { display:block; font-family:'Instrument Serif',serif; font-size:21px; color:var(--ink); text-decoration:none; padding:14px 2px; border-bottom:1px solid var(--rule); }
.cp-menu a:last-child { border-bottom:none; }
.cp-menu-close { position:absolute; top:16px; right:16px; width:40px; height:40px; border:none; background:transparent; font-size:30px; line-height:1; color:var(--ink); cursor:pointer; }

@media (max-width: 640px) {
  /* the off-canvas .cp-menu drawer sits at translateX(100%); clip so it can't
     create horizontal scroll on pages whose containers don't already clip it */
  html, body { overflow-x:hidden; max-width:100%; }

  /* ---- consistent content-page hero across every template (each page's inline
     <style> sets its own size, so force one value here with !important) ---- */
  .pg-hero h1, .pep-hero h1, .cmp-hero h1, .cl-hero h1, .bl-hero h1, .ln-hero h1,
  section.cmp-hero h1 { font-size:38px !important; line-height:1.05 !important; }
  .pg-hero, section.pg-hero, .pep-hero, .cmp-hero, section.cmp-hero, .cl-hero, .bl-hero, .ln-hero { padding-top:34px !important; padding-bottom:14px !important; }
  /* in-content subheadings consistent across the prose pages */
  .pg-prose h2 { font-size:26px !important; }
  /* nav -> hamburger on the RIGHT; the search icon moves into the drawer */
  nav.top .links { display:none; }
  nav.top .actions { display:none; }
  .cp-burger { display:flex; margin-left:auto; }
  nav.top .inner { gap:12px; padding:16px 20px; }   /* breathing room from the screen edges */

  /* drawer search field (input rendered into .cp-menu by mobile.js) */
  .cp-msearch { margin-bottom:18px; }
  .cp-msearch-input { width:100%; box-sizing:border-box; font-family:'Inter',sans-serif; font-size:15px;
    padding:11px 15px; border:1px solid var(--rule); border-radius:12px; background:var(--bg); color:var(--ink); outline:none; }
  .cp-msearch-input:focus { border-color:var(--primary); }
  .cp-msearch .cp-suggest { position:static; display:none; margin-top:8px; box-shadow:none; max-height:300px; }
  .cp-msearch .cp-sg-item { padding:11px 12px; }

  /* tighter container + lower the big shared section paddings */
  .container { padding-left:18px; padding-right:18px; }
  .featured { padding:38px 0; }
  .calc { padding:38px 0; }

  /* disclaimer: stack the grid, single text column, small + tight fine print */
  section.disclaimer { padding:30px 0; }
  .disclaimer-grid { grid-template-columns:1fr; gap:12px; }
  .disclaimer-body { columns:1; column-gap:0; }
  .disclaimer-body p { font-size:11.5px; line-height:1.5; margin:0 0 9px; }

  /* best-price + product price card: stack and shrink the vial */
  .price-card { grid-template-columns:1fr; }
  .product-col { align-items:center; text-align:center; }
  .product-photo { aspect-ratio:auto; max-width:168px; margin:0 auto 8px; }
  .product-photo img { max-height:184px; }
  .vendor-rows { padding:0; }
  .vendor-row.best { grid-template-columns:1fr; gap:12px; }
  .vendor-row.best .vr-right { flex-direction:row; align-items:center; justify-content:space-between; }
  .vendor-row.compact { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
  .vendor-row.compact .rank { flex:0 0 auto; }
  .vendor-row.compact .vname { flex:1 1 auto; font-weight:600; }
  .vendor-row.compact .grade { display:none; }
  .vendor-row.compact .price { flex:0 0 auto; margin-left:auto; }
  .vendor-row.compact .pill { flex:0 0 auto; }
  .vendor-row.compact .vdetails { flex:1 0 100%; font-size:11px; order:9; opacity:0.85; }

  /* comfortable tap targets */
  .pill, .calc-cta { min-height:42px; }

  /* common multi-column blocks collapse to one */
  .pg-grid3 { grid-template-columns:1fr; }

  /* collapsible content sections (set up by mobile.js; harmless on desktop) */
  .m-acc.m-closed > *:not(.m-acc-head) { display:none; }
  .m-acc-head { cursor:pointer; position:relative; padding-right:32px; }
  .m-acc-head::after { content:'+'; position:absolute; right:2px; top:0; color:var(--primary); font-weight:400; }
  .m-acc:not(.m-closed) > .m-acc-head::after { content:'\2212'; }
}