/** Shopify CDN: Minification failed

Line 1522:0 Unexpected "="
Line 1526:79 Unterminated string token
Line 2200:0 Expected ")" to go with "("

**/
/* CACHE-BUST 1751014800 */
/* ====================================================================
   MYOTIDE LP-02 V2 (Working Copy) · Editorial Listicle · Skin/Loose-Skin
   ────────────────────────────────────────────────────────────────────
   Extracted from inline body_html on 2026-06-12
   Loaded by: sections/main-page-lp-v2.liquid → templates/page.skin-adv-2.json
   Original LP-02 (skin-adv-1) keeps its CSS inline · this V2 is isolated.
   ==================================================================== */

/* ============================================================
     MYOTIDE LP-02 · Skin · Claranova × MDI · Editorial-Listicle
     v5.0 · 2026-06-01 · Visual Overhaul · 9 new images (DK-direction: real-life realistic + before/after testimonials + replacement infographics)
        ✓ Intro: 1:1 multi-pain shocking Sarah-A (white tank, arm raised, gaunt Ozempic Face + bat-wing in one shot)
        ✓ Reason 1: 1:1 cheek-touch Sarah-B (sharp background, charcoal tee)
        ✓ Reason 2 NEW: clean medical infographic — Healthy vs Degraded Muscle Layer cross-section
        ✓ Reason 3 NEW: clean line-chart infographic — Muscle-rebuilding decline + Perimenopause-Window + Ozempic-accelerator (replaces SVG timeline)
        ✓ Reason 4 NEW: real-brand failed-solutions counter overhead (Drunk Elephant, Olay, Vital Proteins, Estée Lauder, La Mer, Botox, Restylane, Juvederm, NuFACE, SkinMedica + receipts + face-lift consultation card)
        ✓ Reason 5 NEW: clean 6-ingredient hexagonal stack graphic (HMB · Leucine · Creatine · Collagen · BHB · D3 with doses and functions)
        ✓ Jennifer BA (1:1 split with '3 MONTHS AGO' / 'TODAY' labels — Ozempic Face → fuller cheeks)
        ✓ Patricia BA (1:1 split — scarf-hiding-turkey-neck → silver necklace + firmer neck)
        ✓ Linda BA (1:1 split — long cardigan covering arms → sleeveless black tank, confident smile)
     v5.0 = realism + before/after format + replacement graphics (no Pinterest-editorial-blur · no CGI-illustration · all real-life Reddit-r/loseit aesthetic)
     v4.0 · 2026-06-01 · Research-Driven Rebuild (DK research-audit · Sarah Pain-Bucket sweep)
        ✓ H1 sub: "Brings Your Face Back" (Reclaim-frame · Identity-Loss top-Reddit-theme · less disease-claim risk)
        ✓ Alert: Cumulative $5,000/yr spend-stack anchor (broader Sarah-self-recognition · replaces single face-lift)
        ✓ Intro: Multi-pain expanded — hits Sub-Buckets B1 Ozempic Face + B2 Turkey Neck + B3 Bat Wings + B4 Deflated + B5 Crepey + "should be celebrating" frame + daughter-verbatim
        ✓ Reason 1: Diagnostic reframe "It's Not Aging. It's Not Loose Skin. It's Missing Muscle." (validates Sarah vs doctor/derm/friends)
        ✓ Reason 3: "Two-clocks-at-once" perimenopause+Ozempic frame (women-specific severity)
        ✓ Reason 4: Cumulative-spend close ($5,000/yr · "saved thousands toward surgery")
        ✓ Reason 5: Doctor-validation intro ("muscle preservation isn't standard GLP-1 protocol training yet" · Sarah's 528-doctor-mentions trigger)
        ✓ Patricia testimonial: Turkey-Neck swap (#2-B2) + dermatologist-collagen-loss-quote · replaces collagen-only frame
        ✓ CTA: "If your face doesn't look fuller in 90 days, you don't pay" risk-reversal sharpen
     v4.0 = research-fit over source-mirror · Word-count NOT bound by Claranova ±15%
     - 11 sections · Claranova source-fidelity preserved
     - v3.2 fixes (vs v3.1 audit gaps Avatar A Sarah):
        ✓ "Ozempic Face" lay-term added (title + sub-H1 + intro)
        ✓ Female Doctor-Persona (Dr. Rachel Lin · Women's Health & GLP-1 Medicine)
        ✓ Identity-Loss-Lead ("waiting to feel like yourself again" — Master-Hook A2)
        ✓ Perimenopause-frame in Reason 3 (estrogen + muscle synthesis drop)
        ✓ Husband/Partner-stakes line (Pain-Bucket #2-B6)
        ✓ "Highest combined dose" claim removed (contradicts V1.6 signal-tier)
        ✓ NLM citation replaced w/ STEP-1 + UAlberta + Park-Metabolism (real research)
     - Cross-ref: research-audit conducted 2026-06-01 (BRAIN.md · PAIN-BUCKETS.md · avatar-a-sarah.md · QUOTE-LIBRARY · HOOK-LIBRARY)
     - Trim 2026-05-30 (v3.1): Section 8 dedupe (-64w) + Section 10 CTA-pitch (-18w)
     - NO MWI-top-bar · NO Pricing-Strip · NO Trust-Strip
     - NO Author-Bio-Footer · NO Ingredient-Table
     - ADD Receipt-Failed inline · ADD 5-reasons-closer
     - ADD Bar-Chart body Stat-Hero callouts
     - Compliance-OFF: "Join 47,000+" override (DK directive)
     - 3 Testimonials Jennifer/Patricia/Linda · embedded honest-disclaimer
     - 90-Day MBG · CHECK AVAILABILITY · DEAL ENDING IN
     - MYOTIDE palette (cream/pure-black/sky-blue-deep/mustard)
     - Production-aligned Black-Button spec (.pdp-cta-primary match)
     Copy-source: _copy-drafts/v2.md
     ============================================================ */

  :root {
    /* MYOTIDE Brand Palette */
    --ink: #1a1a1a;
    --ink-soft: #3a3a3a;
    --muted: #6a6a6a;
    --alert-border: #D4A537;
    --alert-text: #6E4F0E;
    --alert-em: #8a6d1d;
    --alert-bg: #fbf5e3;
    --accent: #D4A537;
    --accent-deep: #8a6d1d;
    --cta-black: #000000;
    --cta-hover: #2a2a2a;
    --sky-blue: #5F91D5;
    --sky-blue-deep: #3D6FAE;
    --sky-blue-darker: #2c5388;
    --bg-page: #f7f5f1;
    --bg-card: #fbf9f5;
    --bg-light: #eef3fa;
    --hair: #e3dfd6;
    --rule-soft: #dcd9d0;
    --chart-primary: #000000;
    --chart-secondary: #D4A537;
    --chart-tertiary: #dde7f3;
    --risk-bg: #fbf5e3;
    /* MYOTIDE-canonical Inter (DK swap 2026-05-30 per memory/locked_typography_inter.md)
       Inter supports 100-900 incl. Black 900 for editorial-listicle H1/H2 punch */
    --head: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { scroll-behavior: smooth; height: 100%; }

  body {
    background: var(--bg-page);
    font-family: var(--body);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  /* =========================================================
     MAGAZINE HEADER (utility bar + masthead + primary nav + breadcrumb)
     ========================================================= */
  .site-header {
    background: #ffffff;
    width: 100%;
    flex: 0 0 auto;
  }

  /* --- Utility bar (date + pulsing readers-counter) --- */
  .utility-bar {
    background: #0a0a0a;
    color: rgba(255,255,255,0.62);
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .utility-inner {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 8px 26px;
    display: flex;
    justify-content: center;       /* centered readers-count */
    align-items: center;
    font-family: var(--head);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .readers-count {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--head);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.95);
    text-transform: uppercase;
  }
  .readers-count strong { color: var(--accent); font-weight: 800; letter-spacing: 0.04em; }
  .pulse-dot {
    position: relative;
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #2ecc71;
    flex-shrink: 0;
  }
  .pulse-dot::before {
    content: '';
    position: absolute;
    top: -3px; left: -3px;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: rgba(46, 204, 113, 0.35);
    animation: pulse-ring 1.6s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  }
  @keyframes pulse-ring {
    0% { transform: scale(0.4); opacity: 1; }
    100% { transform: scale(2.2); opacity: 0; }
  }

  /* --- Masthead (serif logo) --- */
  .masthead {
    background: #ffffff;
    border-bottom: 1px solid var(--hair);
  }
  .masthead-inner {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 28px 26px 22px;
    text-align: center;
  }
  .masthead .logo {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 400;
    font-size: clamp(28px, 5.4vw, 42px);
    line-height: 1;
    letter-spacing: 0.005em;
    color: var(--ink);
    text-decoration: none;
    display: inline-block;
  }
  .masthead .tagline {
    font-family: var(--head);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.36em;
    color: var(--muted);
    text-transform: uppercase;
    margin: 10px 0 0;
  }

  /* --- Primary nav (categories) --- */
  .primary-nav {
    background: #ffffff;
    border-bottom: 1px solid var(--hair);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .primary-nav-inner {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 14px 26px;
    display: flex;
    justify-content: center;
    gap: 26px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .primary-nav a {
    font-family: var(--head);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    color: var(--ink);
    text-transform: uppercase;
    text-decoration: none;
    padding: 4px 0;
    position: relative;
    transition: color 0.18s ease;
  }
  .primary-nav a:hover { color: var(--accent); }
  .primary-nav a.current {
    color: var(--accent);
  }
  .primary-nav a.current::after {
    content: '';
    position: absolute;
    bottom: -15px; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
  }

  /* --- Breadcrumb / article meta strip (subtle cream · magazine editorial) --- */
  .breadcrumb {
    background: var(--bg-page);          /* #f7f5f1 cream · matches page bg · subtle separator via hairlines */
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
  }
  .breadcrumb-inner {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 13px 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--head);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--muted);
    text-transform: uppercase;
    gap: 14px;
  }
  .breadcrumb .bc-trail { color: var(--muted); }
  .breadcrumb .bc-trail .current { color: var(--ink); }
  .breadcrumb .bc-meta { color: var(--ink-soft); }
  .breadcrumb .bc-meta .dot { margin: 0 8px; color: var(--rule-soft); }

  /* --- Mobile responsive header (≤720px) --- */
  @media (max-width: 720px) {
    /* Utility bar — centered readers-count on mobile */
    .utility-bar { padding: 0; }
    .utility-inner { padding: 6px 18px; font-size: 9.5px; letter-spacing: 0.10em; }

    /* Masthead — slightly tighter */
    .masthead-inner { padding: 20px 18px 16px; }
    .masthead .logo { font-size: 26px; }
    .masthead .tagline {
      font-size: 9px;
      letter-spacing: 0.22em;
      margin-top: 8px;
      color: var(--ink-soft);
    }

    /* Primary nav — horizontal scroll, hide scrollbar */
    .primary-nav-inner {
      justify-content: flex-start;
      padding: 12px 18px;
      gap: 20px;
    }
    .primary-nav a { font-size: 10.5px; letter-spacing: 0.14em; }
    .primary-nav { scrollbar-width: none; -ms-overflow-style: none; }
    .primary-nav::-webkit-scrollbar { display: none; }
    .primary-nav a.current::after { bottom: -13px; }

    /* Breadcrumb — single-row centered */
    .breadcrumb-inner {
      padding: 9px 18px;
      font-size: 9.5px;
      letter-spacing: 0.08em;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px 12px;
    }
    .breadcrumb .bc-meta { color: var(--muted); }
    .breadcrumb .bc-meta .dot { margin: 0 5px; }
  }
  @media (max-width: 480px) {
    .masthead-inner { padding: 18px 14px 14px; }
    .masthead .logo { font-size: 22px; }
    .masthead .tagline { font-size: 8.5px; letter-spacing: 0.18em; }
    .breadcrumb-inner { font-size: 9px; padding: 8px 14px; }
    .breadcrumb .bc-trail { display: none; }
    .breadcrumb .bc-meta { width: 100%; text-align: center; }
  }

  .page {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    background: #ffffff;
    flex: 1 0 auto;                       /* push footer to bottom · no blank-space below */
  }

  .wrap { padding: 40px 26px 0; }

  /* ---------- Typography ---------- */
  .article-cat-wrap {
    margin: 4px 0 18px;
  }
  .article-category {
    font-family: var(--head);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.20em;
    color: var(--accent);
    text-transform: uppercase;
    display: inline-block;
    padding: 0 0 5px;
    border-bottom: 2px solid var(--accent);
  }
  h1.title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: clamp(34px, 8.6vw, 52px);
    line-height: 1.06;
    letter-spacing: -0.01em;
    margin: 4px 0 14px;
    color: var(--ink);
  }
  h1.title .h1-sub {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(22px, 5.4vw, 30px);
    line-height: 1.18;
    color: var(--ink-soft);
    margin-top: 12px;
    letter-spacing: 0;
  }
  h2.reason {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: clamp(26px, 6vw, 34px);
    line-height: 1.18;
    letter-spacing: -0.005em;
    margin: 46px 0 22px;
    color: var(--ink);
  }
  p {
    font-size: 19px;
    line-height: 1.62;
    margin: 0 0 22px;
    color: var(--ink-soft);
    text-wrap: pretty;
  }
  p strong, .body strong { font-weight: 800; color: var(--ink); }
  p em { font-style: italic; }
  .lead-bold { font-weight: 800; color: var(--ink); }

  /* ---------- Byline ---------- */
  .byline {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 30px;
  }
  .byline-avatar {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--hair);
  }
  .byline-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .byline .meta { line-height: 1.35; }
  .byline .author {
    font-family: var(--head);
    font-weight: 800;
    font-size: 17px;
    color: var(--ink);
  }
  .byline .updated {
    font-size: 14.5px;
    color: var(--muted);
    margin-top: 3px;
    font-style: italic;
  }

  /* ---------- Reader Questions block (editorial FAQ · accordion) ---------- */
  .reader-questions {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 0 24px;
  }
  .reader-questions .rq-heading {
    text-align: center;
    margin: 14px 0 8px;
  }
  .reader-questions::before {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background: var(--accent);
    margin: 16px auto 0;
  }
  /* Native <details> accordion · hide default arrow */
  details.rq-item {
    border-bottom: 1px solid var(--hair);
    padding: 0;
  }
  details.rq-item:first-of-type { border-top: 1px solid var(--hair); }
  details.rq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 44px 20px 0;
    position: relative;
    outline: none;
  }
  details.rq-item summary::-webkit-details-marker { display: none; }
  details.rq-item summary h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: clamp(18px, 3.6vw, 22px);
    line-height: 1.32;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.005em;
    display: inline;
  }
  /* Custom +/− indicator */
  details.rq-item summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--body);
    font-size: 26px;
    font-weight: 300;
    color: var(--ink-soft);
    line-height: 1;
    transition: transform 0.2s ease;
  }
  details.rq-item[open] summary::after {
    content: "−";
    color: var(--ink);
  }
  details.rq-item summary:hover h3 { color: #000; }
  details.rq-item summary:hover::after { color: var(--ink); }
  details.rq-item .rq-body {
    padding: 0 44px 22px 0;
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.62;
    color: var(--ink-soft);
    margin: 0;
  }
  details.rq-item[open] .rq-body {
    animation: rq-fade-in 0.25s ease-out;
  }
  @keyframes rq-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @media (min-width: 760px) {
    details.rq-item .rq-body { font-size: 18px; line-height: 1.66; }
  }

  /* ---------- Pull-quote (low-key magazine aside) ---------- */
  .pull-quote {
    margin: 16px auto 18px;
    padding: 0;
    max-width: 640px;
    text-align: center;
    border: none;
    position: relative;
  }
  .pull-quote::before {
    content: "";
    display: block;
    width: 24px;
    height: 1px;
    background: var(--rule-soft);
    margin: 0 auto 12px;
  }
  .pull-quote p {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(17px, 3.2vw, 20px);
    line-height: 1.42;
    color: var(--ink-soft);
    margin: 0 0 8px;
    letter-spacing: 0;
  }
  .pull-quote cite {
    font-family: var(--head);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--muted);
    text-transform: uppercase;
    font-style: normal;
    display: block;
  }
  @media (min-width: 760px) {
    .pull-quote { margin: 22px auto; max-width: 600px; }
    .pull-quote p { font-size: 20px; }
  }

  /* ---------- Alert box ---------- */
  .alert {
    background: var(--alert-bg);
    border-left: 6px solid var(--alert-border);
    padding: 22px 24px;
    margin: 0 0 34px;
  }
  .alert p {
    margin: 0;
    color: var(--alert-text);
    font-family: var(--head);
    font-weight: 800;
    font-size: 21px;
    line-height: 1.4;
  }
  .alert .em { color: var(--alert-em); }

  /* ---------- Figures ---------- */
  figure { margin: 0 0 30px; }
  .figimg {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    display: block;
  }
  /* <picture> is transparent to layout — descendant selectors continue to target <img> */
  picture { display: contents; }
  .figimg img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
  .figimg.sq { aspect-ratio: 1 / 1; }
  .figimg.portrait { aspect-ratio: 4 / 5; }
  .figimg.wide { aspect-ratio: 4 / 3; }

  /* ---------- Reason 3: Lean-Mass-Decline timeline ---------- */
  .timeline {
    margin: 8px 0 30px;
    padding: 18px 6px 6px;
  }
  .tl-rings {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: end;
    gap: 0;
    margin-bottom: 6px;
  }
  .tl-ring { text-align: center; position: relative; }
  .tl-ring svg { width: 64px; height: 56px; }
  .tl-note {
    position: absolute;
    left: 6px;
    bottom: 4px;
    width: 86px;
    text-align: left;
    font-family: var(--head);
    font-weight: 800;
    font-size: 11px;
    line-height: 1.18;
    color: var(--cta-black);
  }
  .tl-track {
    position: relative;
    height: 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
  }
  .tl-line {
    position: absolute;
    left: 7%;
    right: 4%;
    top: 50%;
    height: 7px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, var(--cta-black) 0%, var(--cta-black) 55%, var(--accent) 100%);
    border-radius: 4px;
  }
  .tl-line::after {
    content: "";
    position: absolute;
    right: -10px; top: 50%;
    transform: translateY(-50%);
    border-left: 14px solid var(--accent);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
  }
  .tl-node {
    position: relative;
    z-index: 2;
    justify-self: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid var(--cta-black);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--head); font-weight: 900; font-size: 17px;
    color: var(--cta-black);
  }
  .tl-node.first { width: 58px; height: 58px; border-color: var(--accent); color: var(--accent); font-size: 22px; }
  .tl-node.last { border-color: var(--accent); color: var(--accent); }
  .tl-labels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 26px;
  }
  .tl-labels span {
    text-align: center;
    font-family: var(--head);
    font-weight: 800;
    font-size: 15px;
    color: var(--sky-blue-deep);
  }

  /* ---------- Bar chart ---------- */
  .chart-card {
    background: #fcfcfb;
    border: 1px solid var(--hair);
    border-radius: 16px;
    padding: 26px 22px 18px;
    margin: 10px 0 30px;
    box-shadow: 0 10px 30px -22px rgba(0,0,0,0.4);
  }
  .legend {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .legend span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
  .legend i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
  .sw-el { background: var(--chart-primary); }
  .sw-hy { background: var(--chart-secondary); }
  .sw-fi { background: var(--chart-tertiary); }
  .plot {
    position: relative;
    height: 240px;
    margin-left: 34px;
    border-left: 2px solid #b0b6ba;
    border-bottom: 2px solid #b0b6ba;
  }
  .ax {
    position: absolute;
    left: -34px;
    width: 30px;
    text-align: right;
    font-size: 11px;
    color: var(--muted);
    transform: translateY(-50%);
  }
  .grid-l { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--rule-soft); }
  .groups {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 0 6px;
  }
  .group { display: flex; align-items: flex-end; gap: 7px; height: 100%; }
  .bar { width: 22px; border-radius: 4px 4px 0 0; }
  .bar.el { background: var(--chart-primary); }
  .bar.hy { background: var(--chart-secondary); }
  .bar.fi { background: var(--chart-tertiary); }
  .xlabels { display: flex; justify-content: space-around; margin: 8px 0 0 34px; }
  .xlabels span { font-family: var(--head); font-weight: 800; font-size: 13px; color: var(--ink-soft); letter-spacing: 0.03em; white-space: nowrap; }
  .chart-cap { text-align: center; font-size: 11.5px; color: var(--muted); line-height: 1.45; margin: 14px 0 0; font-style: italic; }

  /* ---------- Testimonial quotes ---------- */
  .quote { margin: 0 0 24px; }
  .quote p { margin-bottom: 6px; font-style: italic; color: var(--ink-soft); }
  .quote .who { font-weight: 700; color: var(--ink); margin-bottom: 30px; font-style: normal; }

  /* ---------- MYOTIDE Product Card (v5.9 restructured) ---------- */
  .prodcard {
    position: relative;
    background: var(--sky-blue);            /* primary #5F91D5 */
    border-radius: 18px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin: 36px 0 0;
    padding: 44px 22px 28px;
    overflow: hidden;
  }
  .prodcard .pack-slot { aspect-ratio: 1 / 1; }   /* 1:1 square pack-slot */
  /* Compact trust-badges with SVG icons */
  .trust-badges {
    margin: 22px 0 6px;
    padding: 16px 4px 8px;
    border-top: 1px solid rgba(255,255,255,0.22);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    text-align: center;
  }
  .trust-badges .tb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.92);
  }
  .trust-badges .tb svg {
    width: 26px; height: 26px;
    stroke: #fff;
    fill: none;
  }
  .trust-badges .tb-label {
    font-family: var(--head);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    color: rgba(255,255,255,0.95);
  }
  @media (max-width: 460px) {
    .trust-badges { gap: 4px; padding: 14px 0 6px; }
    .trust-badges .tb svg { width: 22px; height: 22px; }
    .trust-badges .tb-label { font-size: 8px; letter-spacing: 0.06em; }
  }
  .gmp-badge {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    background: var(--sky-blue-darker);
    color: #fff;
    font-family: var(--head);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.10em;
    padding: 9px 22px;
    border-radius: 0 0 12px 12px;
    white-space: nowrap;
  }
  .prodcard .inner {
    display: block;
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
  }
  .prodcard .pack-slot {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto 24px;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }
  .prodcard .pack-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* SAVE 40% floating badge on pack image · bottom-LEFT */
  .pack-slot .save-badge {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: var(--accent);
    color: var(--ink);
    font-family: var(--head);
    font-weight: 900;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
    line-height: 1.12;
    text-align: center;
    z-index: 2;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-6deg);
  }

  /* Product Card Title */
  .prodcard .prodcard-title {
    font-family: var(--head);
    font-weight: 800;
    font-size: clamp(22px, 5.2vw, 28px);
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0 0 22px;
    text-align: center;
  }

  /* 3-Pillar Icon Row */
  .prodcard .pillars-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0 0 22px;
  }
  .prodcard .pillar {
    flex: 1 1 0;
    max-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .prodcard .pillar svg {
    width: 32px;
    height: 32px;
    stroke: var(--accent);
    fill: none;
    flex-shrink: 0;
  }
  .prodcard .pillar span {
    font-family: var(--head);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.25;
    text-align: center;
  }

  /* Section dividers inside prodcard */
  .prodcard .prodcard-divider {
    height: 1px;
    background: rgba(255,255,255,0.22);
    margin: 18px auto;
    width: 100%;
    max-width: 320px;
  }

  /* Ingredients block */
  .prodcard .prodcard-section { text-align: center; margin: 0; }
  .prodcard .prodcard-eyebrow {
    font-family: var(--head);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 8px;
  }
  .prodcard .ingredients-list {
    font-family: var(--head);
    font-weight: 600;
    font-size: 13.5px;
    color: rgba(255,255,255,0.96);
    margin: 0;
    line-height: 1.5;
    letter-spacing: 0.01em;
  }

  .prodcard .prodcard-trust {
    margin: 22px 0 0;
    padding: 14px 0 14px;                   /* bottom-padding leaves breathing room before wave */
    border-top: 1px solid rgba(255,255,255,0.22);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    position: relative;
    z-index: 2;
  }
  .prodcard .prodcard-trust span {
    font-family: var(--head);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    white-space: nowrap;
  }
  .prodcard .m-watermark {
    position: absolute;
    right: -28px; top: 30px;
    width: 160px; opacity: 0.10;
    z-index: 1;
  }
  .prodcard .wave { display: none; }       /* wave removed for flat transition into CTA */

  /* ---------- CTA cream conversion box (compact v5.5) ---------- */
  .cta {
    background: var(--bg-card);
    border: 2px dashed var(--accent);
    border-radius: 18px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin: 0 0 32px;                       /* bottom space before footer · reduced gap */
    padding: 28px 24px 26px;
    text-align: center;
  }
  .cta .cta-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 20px 0 14px;
  }
  .cta .cta-meta .timer-label {
    margin: 0;
    font-family: var(--head);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.10em;
    color: var(--ink-soft);
    text-transform: uppercase;
  }
  .cta .cta-meta .timer {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
  }
  .cta .cta-meta .timer .num {
    font-family: var(--head);
    font-weight: 900;
    font-size: 22px;
    color: var(--accent);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .cta .cta-meta .timer .colon {
    font-family: var(--head);
    font-weight: 900;
    font-size: 20px;
    color: var(--accent);
  }
  .cta .guarantee {
    font-size: 13px;
    color: var(--ink-soft);
    margin: 0;
    font-style: normal;
    letter-spacing: 0.02em;
    line-height: 1.45;
  }
  .cta .guarantee .g-line { display: block; }
  .cta .guarantee .g-line-emph { margin-top: 4px; }
  .cta .guarantee strong { color: var(--ink); font-weight: 800; }
  .cta .kicker {
    font-family: var(--head);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--ink);
    margin: 0 0 14px;
  }
  .cta h2 {
    font-family: var(--head);
    font-weight: 900;
    font-size: clamp(26px, 6.4vw, 34px);
    line-height: 1.12;
    margin: 0 0 16px;
  }
  .cta h2 .hot { color: var(--accent); display: block; }
  .cta .pitch { font-size: 18px; line-height: 1.5; color: var(--ink-soft); margin: 0 auto 24px; max-width: 92%; }
  .cta .pitch strong { color: var(--ink); font-weight: 800; }

  /* Primary CTA — matched 1:1 to MYOTIDE PDP production .pdp-cta-primary */
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--cta-black);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 17px 24px;
    font-family: var(--head);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
  }
  .btn svg { transition: transform 0.2s ease; }
  .btn:hover { opacity: 0.92; transform: scale(1.005); }
  .btn:hover svg { transform: translateX(4px); }
  .btn:active { transform: scale(1); }

  .timer-label {
    font-family: var(--head);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.06em;
    margin: 26px 0 8px;
    color: var(--ink);
  }
  .timer { display: flex; justify-content: center; align-items: baseline; gap: 6px; }
  .timer .num {
    font-family: var(--head);
    font-weight: 900;
    font-size: 42px;
    color: var(--accent);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .timer .colon { font-family: var(--head); font-weight: 900; font-size: 38px; color: var(--accent); }
  .timer-units { display: flex; justify-content: center; gap: 44px; margin-top: 6px; }
  .timer-units span { font-family: var(--head); font-weight: 800; font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }

  .risk {
    background: var(--risk-bg);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 22px 0 16px;
  }
  .risk .r1 { font-size: 17px; color: var(--ink-soft); margin: 0 0 8px; }
  .risk .r1 b { color: var(--accent-deep); font-weight: 800; }
  .risk .r2 { font-family: var(--head); font-weight: 800; font-size: 17px; color: var(--ink); margin: 0; }

  .guarantee { font-size: 15px; color: var(--muted); margin: 0; font-style: italic; }

  /* ---------- What-To-Expect Timeline block ---------- */
  .timeline-block {
    background: var(--bg-card);
    border: 1px solid var(--hair);
    border-radius: 14px;
    padding: 22px 24px 20px;
    margin: 22px auto 28px;
    max-width: 720px;
  }
  .timeline-block .timeline-eyebrow {
    font-family: var(--head);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.20em;
    color: var(--accent);
    text-transform: uppercase;
    margin: 0 0 14px;
    text-align: center;
  }
  .timeline-block .timeline-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .timeline-block .timeline-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 16px;
    align-items: baseline;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hair);
  }
  .timeline-block .timeline-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .timeline-block .t-week {
    font-family: var(--head);
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: 0.10em;
    color: var(--sky-blue-deep);
    text-transform: uppercase;
    white-space: nowrap;
  }
  .timeline-block .t-text {
    font-family: var(--body);
    font-weight: 500;
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.4;
  }
  @media (max-width: 460px) {
    .timeline-block { padding: 18px 16px 16px; }
    .timeline-block .timeline-row { grid-template-columns: 70px 1fr; gap: 10px; }
    .timeline-block .t-week { font-size: 11px; letter-spacing: 0.06em; }
    .timeline-block .t-text { font-size: 13.5px; }
  }

  /* ---------- Compact trust-line (text-only, replaces 5-badge row) ---------- */
  .trust-line {
    font-family: var(--head);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
    text-align: center;
    margin: 18px auto 4px;
    padding: 14px 0 0;
    border-top: 1px solid rgba(255,255,255,0.22);
    max-width: 480px;
    line-height: 1.6;
  }
  .trust-line .t-dot {
    color: rgba(255,255,255,0.35);
    margin: 0 4px;
  }
  @media (max-width: 460px) {
    .trust-line { font-size: 10px; letter-spacing: 0.06em; padding: 14px 8px 0; }
  }

  /* ---------- Footer (full-width charcoal · editorial frame) ---------- */
  .footer {
    background: var(--cta-black);
    padding: 44px 0 36px;
    color: #fff;
    width: 100%;
    flex: 0 0 auto;
  }
  .footer-inner {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 28px;
  }
  .footer .brand-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 6px;
  }
  .footer .m-mono {
    width: 38px; height: 38px;
    flex-shrink: 0;
  }
  .footer .brand-mark {
    font-family: var(--head);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.18em;
    color: #fff;
    text-transform: uppercase;
  }
  .footer .brand-tagline {
    text-align: center;
    font-family: var(--head);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sky-blue);                   /* sky-blue #5F91D5 */
    margin: 0 0 30px;
  }
  .footer .footer-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    padding: 16px 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    margin-bottom: 22px;
  }
  .footer .footer-trust span {
    font-family: var(--head);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
    white-space: nowrap;
  }
  .footer .footer-trust .accent { color: var(--accent); }   /* mustard for MBG */
  .footer .footer-links {
    text-align: center;
    margin-bottom: 26px;
  }
  .footer .footer-links a {
    color: rgba(255,255,255,0.78);
    font-family: var(--head);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    margin: 0 12px 6px;
    display: inline-block;
    transition: color 0.18s ease;
  }
  .footer .footer-links a:hover { color: var(--accent); }
  .footer .disc {
    font-size: 11.5px;
    line-height: 1.55;
    color: rgba(255,255,255,0.52);
    margin: 0 0 14px;
    font-style: italic;
    text-align: center;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .footer .copy {
    text-align: center;
    font-family: var(--head);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.65);
    margin: 0 0 4px;
  }
  .footer .sponsored {
    text-align: center;
    font-size: 11px;
    color: rgba(255,255,255,0.42);
    margin: 0;
    font-style: italic;
  }

  .wave-foot { display: block; width: 100%; background: var(--cta-black); }
  .endbar { display: none; }                  /* end-bar redundant on charcoal footer */

  /* =========================================================
     RESPONSIVE: Mobile-first → Tablet → Desktop magazine
     ========================================================= */

  /* ----- Default (Mobile) reason-row is single-column stacked ----- */
  .reason-row { display: block; margin: 0; }
  .reason-row .figure-col, .reason-row .text-col { display: block; }

  /* ----- Small Mobile (<460px) ----- */
  @media (max-width: 460px) {
    .wrap { padding: 32px 18px 0; }
    h1.title { font-size: clamp(30px, 9vw, 40px); }
    h1.title .h1-sub { font-size: clamp(19px, 6vw, 26px); }
    h2.reason { font-size: clamp(23px, 7vw, 30px); }
    p { font-size: 17px; }
    .alert p { font-size: 19px; }
    .alert { padding: 20px 20px; }
    .cta { padding: 28px 18px 30px; }
    .timer .num { font-size: 36px; }
    .timer .colon { font-size: 32px; }
    .timer-units { gap: 36px; }
    .btn { font-size: 13px; padding: 15px 18px; letter-spacing: 1.2px; }
    .quote p { font-size: 17px; }

    /* Mobile Product Card · stack image above copy · bigger pouch · centered */
    .prodcard { padding: 38px 18px 0; }
    .prodcard .pack-slot { max-width: 280px; }
    .prodcard .prodcard-title { font-size: 24px; }
    .prodcard .pillar svg { width: 28px; height: 28px; }
    .prodcard .pillar span { font-size: 10px; letter-spacing: 0.08em; }
    .pack-slot .save-badge { width: 64px; height: 64px; font-size: 10.5px; }
    .prodcard .prodcard-trust { gap: 6px 12px; padding: 16px 0 16px; }
    .prodcard .prodcard-trust span { font-size: 9.5px; letter-spacing: 0.08em; }
    .prodcard .m-watermark { width: 110px; opacity: 0.08; right: -18px; top: 22px; }
    .gmp-badge { font-size: 10.5px; padding: 8px 16px; letter-spacing: 0.08em; }
  }

  /* ----- Mobile-medium (461-720px) — Product Card also stacks ----- */
  @media (max-width: 720px) {
    .prodcard .pack-slot { max-width: 320px; }
  }

  /* ----- Tablet (720px+) ----- */
  @media (min-width: 720px) {
    body { background: var(--bg-page); padding: 0; }
    .page {
      max-width: 720px;
      box-shadow: 0 30px 80px -40px rgba(26,26,26,0.40), 0 4px 14px -8px rgba(0,0,0,0.12);
    }
    .wrap { padding: 56px 56px 0; }
    /* Desktop-only: 1:1 figures become 5:4 landscape (editorial spread feel) */
    .figimg.sq { aspect-ratio: 5 / 4; }
    h1.title { font-size: 54px; margin-bottom: 18px; }
    h2.reason { font-size: 36px; margin-top: 54px; }
    p { font-size: 20px; line-height: 1.66; }
    .alert p { font-size: 22px; }
    .prodcard { padding: 44px 34px 0; }
    .cta { padding: 40px 48px 40px; }
    .footer { padding: 52px 0 44px; }
    .footer-inner { padding: 0 56px; }
  }

  /* ----- Desktop (760px+) magazine single-column · all centered · uniform widths ----- */
  @media (min-width: 760px) {
    .page { max-width: 1140px; margin: 28px auto 40px; border-radius: 4px; overflow: visible; }
    .wrap { padding: 56px 72px 0; }
    h1.title { font-size: 60px; line-height: 1.06; margin-bottom: 22px; }
    h1.title .h1-sub { font-size: 32px; }
    .alert p { font-size: 24px; }
    h2.reason { font-size: 40px; margin-top: 64px; }
    p { font-size: 19px; line-height: 1.7; }

    /* === ALL ARTICLE CONTENT · UNIFORM 800PX MAX · CENTERED === */
    .article-cat-wrap,
    h1.title,
    .byline,
    .alert,
    .body,
    h2.reason,
    .reason-row,
    .reason-row .figure-col,
    .reason-row .text-col .body,
    .wrap > figure,
    .quote,
    .chart-card {
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    /* H1 + intro lead get the same treatment */
    h1.title { margin-top: 4px; margin-bottom: 22px; }
    h2.reason { margin-top: 64px; margin-bottom: 22px; }

    /* Reason rows · single-column stacked · figure same width as text */
    .reason-row {
      display: block;
      margin: 28px auto 36px;
    }
    .reason-row .figure-col,
    .reason-row .text-col { display: block; max-width: 800px; margin-left: auto; margin-right: auto; }
    .reason-row .figure-col {
      margin-bottom: 28px;
    }
    .reason-row .figimg.sq img,
    .reason-row .figimg.portrait img,
    .reason-row .figimg.wide img { border-radius: 6px; }
    .reason-row figure { margin: 0; }

    /* All standalone figures (intro shock, kitchen lifestyle, etc) same width */
    .wrap > figure {
      margin: 0 auto 30px;
    }
    figure .figimg { border-radius: 6px; overflow: hidden; }

    /* Testimonial quotes · same width as text */
    .quote { max-width: 800px; margin-left: auto; margin-right: auto; }

    /* Product card + CTA stay slightly wider for offer prominence */
    .prodcard { max-width: 920px; margin: 56px auto 0; padding: 56px 48px 0; }
    .prodcard .inner { gap: 36px; }
    .prodcard .pack-slot { flex: 0 0 38%; max-width: 320px; }
    .prodcard .copy h3 { font-size: 30px; }
    .cta { max-width: 920px; margin: 0 auto 56px; padding: 48px 64px 48px; }

    .footer-inner { max-width: 1140px; padding: 0 72px; }
  }

  /* ----- Large desktop (1200px+) ----- */
  @media (min-width: 1200px) {
    .page { max-width: 1200px; }
    .wrap { padding: 64px 88px 0; }
  }

/* ============================================================
   V2 ADDITIONS · Reserve link, Sticky CTA bar, .bb-* product card
   Added: 2026-06-27
   ============================================================ */

/* Reserve link in each Reason section (text hyperlink, NOT a button) */
.reserve-cta {
  margin: 16px 0 0;
  text-align: left;
}
a.reserve-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  color: #5F91D5;
  font-family: var(--body, 'Inter', sans-serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  padding: 0;
  border-radius: 0;
  transition: color 0.18s ease;
}
a.reserve-link:hover {
  color: #1a1a1a;
  text-decoration-thickness: 2px;
}

/* Sticky bottom CTA bar */
.cta-sticky {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #ffffff;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
  border-top: 1px solid rgba(0,0,0,0.06);
  z-index: 9999;
  padding: 12px 18px;
  display: none;
  align-items: center;
  gap: 14px;
  font-family: var(--body, 'Inter', sans-serif);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(.4,0,.2,1);
}
.cta-sticky.visible {
  display: flex;
  transform: translateY(0);
}
.cta-sticky-img {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.cta-sticky-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cta-sticky-info strong {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cta-sticky-info span {
  font-size: 12px;
  color: #5F91D5;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.cta-sticky-btn {
  background: #1a1a1a;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background 0.18s ease;
}
.cta-sticky-btn:hover { background: #333; }

@media (min-width: 720px) {
  .cta-sticky { padding: 14px 28px; max-width: 720px; margin: 0 auto; border-radius: 14px 14px 0 0; }
  .cta-sticky-img { width: 60px; height: 60px; }
  .cta-sticky-info strong { font-size: 15px; }
  .cta-sticky-info span { font-size: 13px; }
  .cta-sticky-btn { padding: 14px 26px; font-size: 15px; }
}

/* Reserve only when sticky visible: bottom space so footer not blocked */
body.cta-sticky-visible { padding-bottom: 96px; }

/* Product card section padding (.pad-sm wrapper from stairs) */
section.pad-sm { padding: 32px 0; }
@media (min-width: 720px) {
  section.pad-sm { padding: 56px 0; }
}

/* ============================================================
   .bb-* Product Card · adapted from stairs lp-muscle-stairs-1.css
   ============================================================ */

/* ============================================================
   BB Product Card — extracted from stairs LP styles.css
   ============================================================ */
/* ---- Media: hero + thumbs ---- */
/* ---- Header: rating + title ---- */
/* ---- Plans ---- */
/* ---- Gifts (compact polished design) ---- */
/* ---- CTA: Get Your Gummies → (compact: smaller text + less radius) ---- */
/* ---- Buy Once link ---- */
/* ---- Trust strip (below buy box) — single column stacked ---- */
/* ---- Accordion — compact ---- */
/* ---- Compact tier cards (savecol vertical: SAVE pill on top, $X below) ---- */
/* Grid: name+price left, savecol (badge+amount stacked) right */
/* Corner badge → top-LEFT (above radio area) */
/* ---- Dynamic total bar (under tiers) ---- */
/* Nutrition Facts 2-column table inside accordion (smaller than title) */
===============================
   MOBILE PADDING FIX v4 · 2026-06-27
   Match ORIGINAL LP-02 padding: 18px on max-460px · 26px default
   V2 structure: h2.reason + .reason-row LIVE OUTSIDE .wrap
   So pad them directly. NO double-padding (since they're not nested in .wrap).
   ============================================================ */
@media (max-width: 460px) {
  body .wrap,
  body h2.reason,
  body section.reason-row,
  body .chart-card,
  body .quote,
  body section.pad-sm > .wrap,
  body section.pad > .wrap {
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 461px) and (max-width: 760px) {
  body .wrap,
  body h2.reason,
  body section.reason-row,
  body .chart-card,
  body .quote,
  body section.pad-sm > .wrap,
  body section.pad > .wrap {
    padding-left: 26px !important;
    padding-right: 26px !important;
    box-sizing: border-box !important;
  }
}

/* Don't double-pad inside reason-row (figure-col / text-col / figure / figimg) */
@media (max-width: 760px) {
  body .reason-row .figure-col,
  body .reason-row .text-col,
  body .reason-row figure,
  body .reason-row .figimg,
  body figure,
  body .figimg {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   BB Product Card · COMPLETE extraction from LP-01 stairs
   ============================================================ */

.bb{
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 6px 24px -10px rgba(26,26,26,0.10);
}

.bb-media{ margin-bottom: 18px; }

.bb-hero{
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 14px;
  overflow: hidden;
  background: #F8F5EE;
}

.bb-hero img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.bb-thumbs{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: 8px;
}

.bb-thumb{
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  overflow: hidden;
}

.bb-thumb.is-active{ border-color: var(--coral); }

.bb-thumb img{ width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }

.bb-header{ text-align: center; margin: 4px 0 28px; }

.bb-rating{
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}

.bb-stars{
  color: #EBBC21;
  font-size: 18px;
  letter-spacing: 2px;
}

.bb-rating-text{
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.bb-title{
  font-family: var(--sans);
  font-weight: 800 !important;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -.014em;
  margin: 6px 0 0;
  color: var(--ink);
}

.bb-form{ margin: 0; }

.bb-plans{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.bb-plan{
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  padding: 14px 14px 14px 14px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.15s, background 0.15s;
}

.bb-plan.is-selected{
  border-color: var(--coral);
  background: rgba(95, 145, 213, 0.05);
}

.bb-plan-input{ position: absolute; opacity: 0; pointer-events: none; }

.bb-plan-radio{
  width: 20px; height: 20px;
  border: 2px solid #cfc7bd;
  border-radius: 50%;
  margin-top: 2px;
  position: relative;
  flex-shrink: 0;
}

.bb-plan.is-selected .bb-plan-radio{ border-color: var(--coral); }

.bb-plan.is-selected .bb-plan-radio::after{
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--coral);
  border-radius: 50%;
}

.bb-plan-corner{
  position: absolute;
  top: -10px; right: 14px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  border-radius: 999px;
}

.bb-plan-corner.bb-best{ background: var(--coral-deep); }

.bb-plan-corner.bb-popular{ background: var(--coral); }

.bb-plan-line1{
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
}

.bb-plan-name{
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}

.bb-plan-badge{
  background: #2E9E5B;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.bb-plan-desc{
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.bb-plan-price{
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap;
}

.bb-plan-pm{
  font-size: 15px;
  color: var(--ink);
}

.bb-plan-pm b{
  font-size: 20px;
  font-weight: 700;
}

.bb-plan-pm span{
  font-size: 13px;
  color: var(--ink-soft);
}

.bb-plan-strike{
  text-decoration: line-through;
  color: var(--ink-soft);
  font-size: 13px;
}

.bb-plan-save{
  color: #2E9E5B;
  font-weight: 700;
  font-size: 13px;
}

.bb-gifts{
  margin: 14px 0;
  padding: 10px 12px 12px;
  background: rgba(235, 188, 33, 0.10);
  border-radius: 12px;
}

.bb-gifts-head{
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 10px;
}

.bb-gifts-icon{ display: inline-flex; color: var(--ink-soft); flex-shrink: 0; }

.bb-gifts-title b{ font-weight: 700; }

.bb-gifts-value{
  margin-left: auto;
  background: #1A1A1A;
  color: #F4D77E;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.bb-gifts-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bb-gift{
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.bb-gift-img{
  width: 100%;
  aspect-ratio: 1/1;
  background: #fff;
  border-radius: 8px;
  border: 1px solid rgba(26,26,26,0.06);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.bb-gift-img img{ width: 100%; height: 100%; object-fit: contain; }

.bb-gift-name{
  font-size: 10px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.bb-gift-chance{
  position: relative;
}

.bb-gift-chance .bb-gift-img{
  border: 1.5px solid #EBBC21;
}

.bb-gift-badge{
  position: absolute;
  top: -8px; left: 50%; transform: translateX(-50%);
  background: #EBBC21;
  color: #1A1A1A;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 1;
}

.bb-cta{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 14px 22px;
  background: #1A1A1A;
  color: #fff;
  border: 0;
  border-radius: 14px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 4px;
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.45);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.bb-cta:hover{ transform: translateY(-1px); filter: brightness(1.05); }

.bb-cta:active{ transform: translateY(0); }

.bb-arrow{ display: inline-flex; transition: transform 0.15s; }

.bb-cta:hover .bb-arrow{ transform: translateX(4px); }

.bb-onetime-row{ text-align: center; margin-top: 12px; }

.bb-onetime{
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-size: 14px;
}

.bb-onetime:hover{ color: var(--ink); }

.bb-trust{
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}

.bb-trust li{
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.bb-trust-ico{ font-size: 14px; flex-shrink: 0; }

.bb-acc{
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

.bb-acc-item{ border-bottom: 1px solid var(--line); }

.bb-acc-q{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 4px;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.bb-acc-ic{
  width: 16px; height: 16px;
  color: var(--coral);
  flex-shrink: 0;
}

.bb-acc-item .bb-acc-cross{ display: none; }

.bb-acc-item.is-open .bb-acc-plus{ display: none; }

.bb-acc-item.is-open .bb-acc-cross{ display: block; }

.bb-acc-a{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.bb-acc-item.is-open .bb-acc-a{ max-height: 1500px; }

.bb-acc-inner{
  padding: 0 4px 14px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.bb-acc-inner p{ margin: 0 0 8px; }

.bb-acc-inner ul{ padding-left: 18px; margin: 6px 0 8px; }

.bb-acc-inner li{ margin: 2px 0; }

.bb-acc-inner b{ color: var(--ink); }

.bb-acc-foot{ font-size: 12px; color: var(--ink-soft); margin-top: 6px; }

@media (min-width:781px){
  /* Desktop: side-by-side — image LEFT, all content (header/picker/CTA/trust/accordion) RIGHT */
  .bb{
    padding: 32px;
    max-width: 1100px;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important;
    column-gap: 40px !important;
    row-gap: 0 !important;
    align-items: start !important;
  }
  .bb-media{
    grid-column: 1 !important;
    grid-row: 1 / 6 !important;
    margin-bottom: 0 !important;
    position: sticky !important;
    top: 24px !important;
    align-self: start !important;
  }
  .bb-header{ grid-column: 2 !important; grid-row: 1 !important; text-align: left !important; margin-top: 0 !important; }
  .bb-header .bb-rating{ display: inline-flex !important; }
  .bb-form{ grid-column: 2 !important; grid-row: 2 !important; }
  .bb-trust{ grid-column: 2 !important; grid-row: 3 !important; }
  .bb-acc{ grid-column: 2 !important; grid-row: 4 !important; }
  .bb-title{ font-size: 26px; }
  .bb-cta{ font-size: 17px; padding: 16px 24px; }
}

@media (max-width:480px){
  .bb-gifts{ padding: 10px 10px 12px !important; }
  .bb-gifts-head{ font-size: 12px !important; gap: 6px !important; margin-bottom: 8px !important; }
  .bb-gifts-grid{
    grid-template-columns: repeat(5, 1fr) !important;   /* 5-in-a-row even on mobile */
    gap: 4px !important;
  }
  .bb-gift{ gap: 3px !important; }
  .bb-gift-img{ padding: 4px !important; border-radius: 6px !important; }
  .bb-gift-name{ font-size: 9px !important; line-height: 1.15 !important; }
  .bb-gift-badge{ font-size: 7px !important; padding: 1.5px 4px !important; top: -6px !important; letter-spacing: 0.04em !important; }
  .bb-gifts-value{
    font-size: 8px !important;
    padding: 2px 5px !important;
    letter-spacing: 0.04em !important;
  }
  .bb-gifts-head{ font-size: 13px; }
  .bb-title{ font-size: 22px; }
}

.bb-plan{
  padding: 16px 12px 10px 12px !important;   /* tighter top padding (less space below corner badge) */
  align-items: center !important;
  grid-template-columns: 16px 1fr !important;
  gap: 10px !important;
  border-radius: 9px !important;
}

.bb-plan-radio{
  width: 14px !important; height: 14px !important;
  border-width: 1.5px !important;
  margin-top: 0 !important;
}

.bb-plan.is-selected .bb-plan-radio::after{ inset: 2px !important; }

.bb-plan-body{
  display: grid !important;
  grid-template-columns: 1fr 78px !important;
  grid-template-areas:
    "name save"
    "price save" !important;
  column-gap: 10px !important;
  row-gap: 2px !important;
  align-items: center !important;
}

.bb-plan-name{
  grid-area: name !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.bb-plan-price{
  grid-area: price !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
  margin-top: 0 !important;
}

.bb-plan-savecol{
  grid-area: save !important;
  align-self: center !important;
  justify-self: end !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
}

.bb-plan-badge{
  font-size: 9px !important;
  padding: 3px 8px !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.bb-plan .bb-plan-saveamt{
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #2E9E5B !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.bb-plan-pm{ font-size: 11px !important; }

.bb-plan-pm b{ font-size: 13px !important; }

.bb-plan-pm span{ font-size: 10px !important; }

.bb-plan-strike{ font-size: 10px !important; }

.bb-plan-corner{
  top: -8px !important;
  left: 14px !important;
  right: auto !important;
  font-size: 8.5px !important;
  padding: 2px 8px !important;
  letter-spacing: 0.03em !important;
}

.bb-total{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 4px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}

.bb-total-left{
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.bb-total-now b{
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.bb-total-was{
  font-size: 12px;
  color: var(--ink-soft);
  text-decoration: line-through;
}

.bb-total-right{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.bb-total-save{
  background: #2E9E5B;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.bb .bb-total-saveamt{
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #2E9E5B !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.bb-nf{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 14px;
  margin: 2px 0 8px;
  font-size: 11px;
}

.bb-nf dt{
  font-weight: 700;
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: 6px;
}

.bb-nf dd{
  margin: 0;
  text-align: right;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 6px;
}

.bb-nf dt:first-of-type, .bb-nf dd:first-of-type{ border-top: none; padding-top: 0; }