/* =========================================================
   LUV AFTER DARK — PREMIUM OFFER PAGE
   Matches the actual product packaging aesthetic
   Fraunces (display serif) + Inter (body)
   Mahogany / Copper / Gold palette from box
   ========================================================= */

:root {
  /* COLORS — from product packaging */
  --bg-deep: #1a0f08;
  --bg-warm: #2a1812;
  --bg-card-dark: #3d2418;
  --bg-cream: #fbf6ec;
  --bg-ivory: #f5ede0;
  --bg-blush: #f7e8d8;
  --copper: #b8521a;
  --copper-light: #d4753a;
  --gold: #d4a574;
  --gold-bright: #f0c98a;
  --cream-text: #f5e6d3;
  --ink: #1a0f08;
  --ink-soft: #4a3a26;
  --ink-mute: #8a7864;
  --border-soft: #e8d8c0;
  --border-warm: #d4b598;
  --success: #2e6b3a;
  --alert: #9a3a1a;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg-cream);
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--copper); text-decoration: none; }
p { margin: 0 0 1em; }

h1, h2, h3, h4, h5 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--ink);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.015em;
}
h1 { font-size: 38px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 19px; }

.serif { font-family: 'Fraunces', Georgia, serif; }
.eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 12px;
  display: block;
}
.container { max-width: 1100px; margin: 0 auto; padding: 0 22px; }
.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 22px; }

/* =========================================================
   TOP NAV
   ========================================================= */
.top-nav {
  background: var(--bg-cream);
  border-bottom: 1px solid var(--border-soft);
  padding: 16px 0;
  /* position: sticky;
  top: 0; */
  z-index: 50;
}
.top-nav .row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1100px; margin: 0 auto; padding: 0 22px;
}
.brand {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 4px;
  width: 75px;
}
.brand .luv-mark {
  color: var(--copper);
  font-size: 18px;
  font-weight: 800;
  display: inline-block;
  margin-right: 3px;
}
.brand sup { font-size: 9px; color: var(--ink-mute); font-weight: 400; }
.nav-right { display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.nav-right a { color: var(--ink-soft); }
.nav-right .stars-mini { color: var(--gold); font-size: 12px; letter-spacing: 1px; }

/* =========================================================
   ANNOUNCEMENT BAR — soft, premium (no flashing red)
   ========================================================= */
.announce {
  background: var(--bg-deep);
  color: var(--cream-text);
  text-align: center;
  padding: 10px 16px;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.announce strong { color: var(--gold-bright); font-weight: 600; }

/* =========================================================
   HERO BLOCK
   ========================================================= */
.hero {
  background: linear-gradient(180deg, var(--bg-cream) 0%, var(--bg-blush) 100%);
  padding: 56px 0 64px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
.hero-copy { order: 2; }
.hero-image { order: 1; }
.hero-image img {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  border-radius: 12px;
}
.hero h1 {
  font-size: 38px;
  line-height: 1.05;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.hero h1 em {
  font-style: italic;
  color: var(--copper);
}
.hero .lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 24px;
  max-width: 540px;
}
.hero .stars-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
  font-size: 13px; color: var(--ink-soft);
}
.hero .stars { color: var(--gold); letter-spacing: 2px; font-size: 16px; }

/* Hero bundle preview */
.hero-bundle {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(58, 28, 12, 0.06);
}
.hero-bundle .preview-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 10px;
}
.hero-bundle .price-row {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px;
}
.hero-bundle .price-now {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 38px;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.hero-bundle .price-now .per { font-size: 16px; color: var(--ink-mute); font-weight: 500; }
.hero-bundle .price-was {
  font-size: 16px; color: var(--ink-mute); text-decoration: line-through;
}
.hero-bundle .price-badge {
  background: var(--copper);
  color: #fff;
  padding: 3px 10px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.hero-bundle .deal-summary {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 6px;
}
.hero-bundle .deal-summary strong { color: var(--ink); }

/* =========================================================
   CTA BUTTONS — premium copper-gold
   ========================================================= */
.btn {
  display: inline-block;
  background: linear-gradient(180deg, var(--copper-light) 0%, var(--copper) 100%);
  color: #fff !important;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  padding: 18px 28px;
  border-radius: 999px;
  min-height: 56px;
  box-shadow: 0 6px 20px rgba(184, 82, 26, 0.32), inset 0 1px 0 rgba(255,255,255,0.15);
  border: none;
  cursor: pointer;
  width: 100%;
  text-transform: uppercase;
  transition: all 0.15s ease;
}
.btn:hover, .btn:active {
  transform: translateY(1px);
  box-shadow: 0 3px 12px rgba(184, 82, 26, 0.32), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn.btn-ghost {
  background: transparent;
  color: var(--cream-text) !important;
  border: 1px solid var(--gold);
  box-shadow: none;
}
.btn.btn-dark {
  background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg-deep) 100%);
  color: var(--cream-text) !important;
  box-shadow: 0 6px 20px rgba(26, 15, 8, 0.28);
}
.btn-meta {
  text-align: center;
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 10px;
  font-weight: 500;
}
.btn-meta strong { color: var(--ink-soft); }
.btn-meta .dot { color: var(--success); font-size: 14px; vertical-align: middle; }

/* =========================================================
   TRUST STRIP
   ========================================================= */
.trust-strip {
  background: #fff;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 20px 0;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  text-align: center;
}
.trust-item {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.trust-item .ti-emoji { display: block; font-size: 20px; margin-bottom: 4px; }

/* =========================================================
   SECTIONS
   ========================================================= */
.section { padding: 72px 0; }
.section-tight { padding: 48px 0; }
.section-cream { background: var(--bg-cream); }
.section-ivory {background: #f5ede0;}
.section-blush { background: var(--bg-blush); }
.section-dark { background: var(--bg-deep); color: var(--cream-text); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--cream-text); }
.section-dark .eyebrow { color: var(--gold-bright); }
.section-dark a { color: var(--gold-bright); }
.section h2 { text-align: center; margin-bottom: 16px; }
.section .section-lede {
  text-align: center;
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 auto 36px;
  line-height: 1.55;
}
.section-dark .section-lede { color: var(--cream-text); opacity: 0.85; }
.section-eyebrow-wrap { text-align: center; }

/* =========================================================
   FEATURED PRESS / AS SEEN IN
   ========================================================= */
.press {
  padding: 28px 0;
  background: #fff;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.press .label {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.press .logos {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  opacity: 0.7;
}

/* =========================================================
   FEATURE TESTIMONIAL — editorial pull-quote
   ========================================================= */
.feature-quote {
  background: var(--bg-blush);
  padding: 56px 0;
  text-align: center;
}
.feature-quote .stars { color: var(--gold); font-size: 18px; letter-spacing: 3px; margin-bottom: 16px; }
.feature-quote blockquote {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.45;
  color: var(--ink);
  max-width: 760px;
  margin: 0 auto 18px;
  letter-spacing: -0.01em;
}
.feature-quote .attr {
  font-size: 13px;
  color: var(--ink-mute);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.feature-quote .attr strong { color: var(--ink); font-weight: 700; }

/* =========================================================
   PROBLEM SECTION (editorial style, not bullets)
   ========================================================= */
.problem-section h2 { font-size: 36px; max-width: 760px; margin: 0 auto 20px; line-height: 1.12; }
.problem-section .problem-body {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 auto;
}
.problem-section .problem-body em { color: var(--copper); font-style: italic; font-weight: 500; }
.problem-thoughts {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 32px 28px;
  margin: 32px auto;
  max-width: 620px;
  box-shadow: 0 4px 18px rgba(58, 28, 12, 0.04);
}
.problem-thought {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
  letter-spacing: -0.005em;
}
.problem-thought:last-child { border-bottom: none; }
.problem-thought::before { content: "\201C"; color: var(--copper); margin-right: 6px; font-size: 22px; vertical-align: -4px; }
.problem-conclusion {
  text-align: center;
  font-family: 'Fraunces', serif;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink);
  max-width: 600px;
  margin: 32px auto 0;
  letter-spacing: -0.01em;
}
.problem-conclusion strong { color: var(--copper); font-weight: 700; }

/* =========================================================
   FOUNDER SECTION — editorial style
   ========================================================= */
.founder-section { background: var(--bg-deep); color: var(--cream-text); padding: 80px 0; }
.founder-section h2 { color: var(--cream-text); text-align: left; max-width: 760px; margin: 0 0 24px; font-size: 36px; line-height: 1.12; }
.founder-grid {
  display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start;
}
.founder-photo-wrap { text-align: center; }
.founder-photo {
  width: 100%; max-width: 320px; margin: 0 auto;
  border-radius: 12px; aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--bg-card-dark) 0%, var(--bg-warm) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-mute); font-size: 13px; font-style: italic;
  overflow: hidden;
}
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-photo-caption { text-align: center; font-size: 13px; color: var(--gold-bright); margin-top: 14px; font-family: 'Fraunces', serif; font-style: italic; }
.founder-photo-caption strong { font-style: normal; font-weight: 700; display: block; font-size: 16px; color: var(--cream-text); margin-bottom: 2px; }
.founder-text { font-size: 17px; line-height: 1.7; color: var(--cream-text); opacity: 0.92; }
.founder-text p { margin-bottom: 1em; }
.founder-text strong { color: var(--gold-bright); font-weight: 600; }
.founder-text em { color: var(--gold); font-style: italic; }
.founder-pull {
  border-left: 3px solid var(--gold);
  padding: 4px 0 4px 20px;
  margin: 24px 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--cream-text);
  letter-spacing: -0.005em;
}
.founder-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 36px 0;
  padding: 24px 0;
  border-top: 1px solid rgba(212, 165, 116, 0.2);
  border-bottom: 1px solid rgba(212, 165, 116, 0.2);
}
.founder-stat { text-align: center; }
.founder-stat .num {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--gold-bright);
  letter-spacing: -0.02em;
  display: block;
}
.founder-stat .lbl { font-size: 11px; color: var(--cream-text); opacity: 0.7; letter-spacing: 0.06em; }
.founder-sig {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--gold-bright);
  margin-top: 24px;
}
.founder-sig .role { display: block; font-style: normal; font-size: 13px; color: var(--cream-text); opacity: 0.7; letter-spacing: 0.04em; margin-top: 4px; font-family: 'Inter', sans-serif; }

/* =========================================================
   PRODUCT SHOWCASE
   ========================================================= */
.showcase {
  background: var(--bg-ivory);
  padding: 72px 0;
}
.showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}
.showcase-image img { width: 100%; max-width: 580px; margin: 0 auto; border-radius: 12px; }
.showcase-copy h2 { text-align: left; font-size: 32px; }
.showcase-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 24px 0;
}
.showcase-stat {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px 18px;
}
.showcase-stat .num {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--copper);
  display: block;
  letter-spacing: -0.02em;
}
.showcase-stat .lbl { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }

/* =========================================================
   INGREDIENT GRID
   ========================================================= */
.ingredients-section { padding: 80px 0; }
.ingredient-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 36px;
}
.ingredient-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(58, 28, 12, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ingredient-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(58, 28, 12, 0.1); }
.ingredient-img {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--bg-ivory) 0%, var(--bg-blush) 100%);
  overflow: hidden;
  position: relative;
}
.ingredient-img img { width: 100%; height: 100%; object-fit: cover; }
.ingredient-img .placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--ink-mute); font-style: italic; padding: 16px; text-align: center;
}
.ingredient-body { padding: 22px 22px 24px; }
.ingredient-name {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.ingredient-latin {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.ingredient-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.ingredient-hero-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--bg-deep);
  color: var(--gold-bright);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 30px;
  z-index: 2;
}

/* =========================================================
   HOW IT WORKS
   ========================================================= */
.howto-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 36px 0;
}
.howto-step {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 24px;
  position: relative;
}
.howto-step .step-num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 14px;
  color: var(--copper);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  display: block;
}
.howto-step h4 { margin-bottom: 6px; font-size: 19px; }
.howto-step p { font-size: 15px; color: var(--ink-soft); margin: 0; line-height: 1.55; }

/* =========================================================
   SCIENCE / PATHWAYS
   ========================================================= */
.pathway-list { list-style: none; padding: 0; margin: 24px 0; max-width: 620px; margin-left: auto; margin-right: auto; }
.pathway-list li {
  padding: 16px 0;
  border-bottom: 1px solid rgba(212, 165, 116, 0.18);
  font-size: 16px;
  line-height: 1.5;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: baseline;
}
.pathway-list li:last-child { border-bottom: none; }
.pathway-list .path-label {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--gold-bright);
  letter-spacing: -0.01em;
  min-width: 180px;
}
.pathway-list .path-mech { color: var(--cream-text); opacity: 0.85; font-size: 15px; }

/* =========================================================
   TESTIMONIALS GRID
   ========================================================= */
.testi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 36px 0;
}
.testi-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 26px 24px;
}
.testi-card .stars { color: var(--gold); font-size: 14px; letter-spacing: 2px; margin-bottom: 12px; }
.testi-card .quote {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 16px;
  letter-spacing: -0.005em;
}
.testi-card .attr {
  font-size: 13px;
  color: var(--ink-mute);
  font-weight: 500;
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
}
.testi-card .attr strong { color: var(--ink); display: block; font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.testi-card .verified { color: var(--success); font-size: 11px; font-weight: 600; }

/* =========================================================
   COMPARISON TABLE
   ========================================================= */
.compare-wrap {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(58, 28, 12, 0.06);
  margin: 36px 0;
}
.compare-header {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  background: var(--bg-deep);
  color: var(--cream-text);
  padding: 16px 12px;
  text-align: center;
  font-size: 12px;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.compare-header .head-product.featured { color: var(--gold-bright); font-size: 14px; }
.compare-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  border-bottom: 1px solid var(--border-soft);
  padding: 12px 12px;
  align-items: center;
  font-size: 13px;
}
.compare-row:last-child { border-bottom: none; }
.compare-row.featured-row { background: var(--bg-blush); }
.compare-row .cell-feature { font-weight: 500; color: var(--ink); }
.compare-row .cell { text-align: center; font-size: 13px; color: var(--ink-soft); }
.compare-row .cell.yes { color: var(--success); font-weight: 700; font-size: 18px; }
.compare-row .cell.no { color: var(--alert); font-weight: 700; font-size: 18px; }
.compare-row .cell.featured { font-weight: 700; color: var(--copper); }

/* =========================================================
   BUNDLE PICKER (the heart of the offer)
   ========================================================= */
.bundle-section { background: var(--bg-cream); padding: 80px 0; }
.bundle-section h2 { font-size: 36px; margin-bottom: 8px; }
.bundle-section .section-lede { margin-bottom: 32px; }

.bundle-picker {
  background: #fff;
  border-radius: 20px;
  padding: 28px 24px;
  max-width: 580px;
  margin: 0 auto;
  box-shadow: 0 12px 40px rgba(58, 28, 12, 0.1);
}
.bundle-tile {
  background: #fff;
  border: 2px solid var(--border-soft);
  border-radius: 14px;
  padding: 18px 18px 18px 56px;
  margin-bottom: 12px;
  cursor: pointer;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  transition: all 0.15s ease;
}
.bundle-tile:hover { border-color: var(--copper-light); }
.bundle-tile::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border-warm);
  background: #fff;
  transition: all 0.15s ease;
}
.bundle-tile.selected {
  border-color: var(--copper);
  background: var(--bg-blush);
  box-shadow: 0 6px 20px rgba(184, 82, 26, 0.15);
}
.bundle-tile.selected::before {
  background: var(--copper);
  border-color: var(--copper);
  box-shadow: inset 0 0 0 4px #fff;
}
.bundle-tile .tile-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--copper);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 30px;
  text-transform: uppercase;
}
.bundle-tile .tile-badge.best { background: var(--bg-deep); color: var(--gold-bright); }
.bundle-tile .tile-title {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 2px;
}
.bundle-tile .tile-meta {
  font-size: 12px;
  color: var(--ink-mute);
  font-weight: 500;
}
.bundle-tile .tile-pricing { text-align: right; }
.bundle-tile .tile-pricing .was {
  font-size: 12px;
  color: var(--ink-mute);
  text-decoration: line-through;
  display: block;
}
.bundle-tile .tile-pricing .now {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.02em;
  display: block;
}
.bundle-tile .tile-pricing .now .per { font-size: 11px; color: var(--ink-mute); font-weight: 500; }
.bundle-tile .tile-pricing .save {
  font-size: 11px;
  color: var(--copper);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.subscribe-toggle {
  background: var(--bg-ivory);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 16px 0 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.subscribe-toggle .sub-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 16px; color: var(--ink); }
.subscribe-toggle .sub-sub { font-size: 12px; color: var(--ink-mute); }
.subscribe-toggle .sub-save {
  background: var(--success);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 30px;
  letter-spacing: 0.05em;
}

.bundle-included {
  background: var(--bg-ivory);
  border-radius: 12px;
  padding: 18px;
  margin: 20px 0;
}
.bundle-included h5 {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 10px;
}
.bundle-included ul { list-style: none; padding: 0; }
.bundle-included li {
  font-size: 14px;
  color: var(--ink-soft);
  padding: 5px 0 5px 24px;
  position: relative;
  line-height: 1.5;
}
.bundle-included li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 5px;
  color: var(--success);
  font-weight: 700;
}

/* =========================================================
   GUARANTEE BLOCK
   ========================================================= */
.guarantee {
  background: var(--bg-deep);
  color: var(--cream-text);
  padding: 64px 0;
  text-align: center;
}
.guarantee .guarantee-badge {
  width: 90px;
  height: 90px;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
  border-radius: 50%;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--bg-deep);
  text-align: center;
  line-height: 1.1;
  letter-spacing: -0.02em;
  box-shadow: 0 8px 24px rgba(212, 165, 116, 0.2);
}
.guarantee .guarantee-badge .badge-num { display: block; font-size: 28px; font-weight: 800; }
.guarantee h2 { color: var(--cream-text); margin-bottom: 16px; }
.guarantee p {
  font-size: 17px;
  color: var(--cream-text);
  opacity: 0.85;
  max-width: 620px;
  margin: 0 auto 12px;
  line-height: 1.6;
}
.guarantee p strong { color: var(--gold-bright); font-weight: 600; }

/* =========================================================
   FAQ
   ========================================================= */
.faq { max-width: 720px; margin: 36px auto 0; }
.faq-item {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.faq-item.open { border-color: var(--copper-light); }
.faq-q {
  padding: 20px 22px;
  cursor: pointer;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 56px;
  letter-spacing: -0.01em;
}
.faq-q::after {
  content: "+";
  font-size: 24px;
  color: var(--copper);
  font-weight: 400;
  flex-shrink: 0;
  margin-left: 12px;
  font-family: 'Inter', sans-serif;
}
.faq-item.open .faq-q::after { content: "\2212"; }
.faq-a { display: none; padding: 0 22px 22px; font-size: 15px; color: var(--ink-soft); line-height: 1.65; }
.faq-item.open .faq-a { display: block; }
.faq-a strong { color: var(--ink); }
/* =========================================================
   LIFESTYLE ANCHOR — full-bleed emotional image before CTA
   ========================================================= */
.lifestyle-anchor {
  position: relative;
  overflow: hidden;
  background: var(--bg-deep);
}
.lifestyle-anchor img {
  width: 100%;
  max-height: 580px;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}
.lifestyle-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(26, 15, 8, 0.85) 0%,
    rgba(26, 15, 8, 0.15) 55%,
    transparent 100%
  );
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 24px 40px;
}
.lifestyle-stats {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.lifestyle-stat-block { text-align: center; }
.lifestyle-stat-block .ls-num {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--gold-bright);
  letter-spacing: -0.02em;
  display: block;
  line-height: 1;
}
.lifestyle-stat-block .ls-lbl {
  font-size: 11px;
  color: var(--cream-text);
  opacity: 0.8;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.lifestyle-divider {
  color: var(--gold);
  opacity: 0.4;
  font-size: 20px;
  line-height: 1;
  align-self: center;
}
@media (min-width: 720px) {
  .lifestyle-anchor img { max-height: 680px; }
  .lifestyle-stat-block .ls-num { font-size: 36px; }
}
/* =========================================================
   CLOSER SECTION
   ========================================================= */
.closer { padding: 72px 0; text-align: center; }
.closer h2 { max-width: 600px; margin: 0 auto 16px; }
.closer p { font-size: 17px; color: var(--ink-soft); max-width: 580px; margin: 0 auto 24px; line-height: 1.6; }

/* =========================================================
   FOOTER
   ========================================================= */
footer {
  background: var(--bg-deep);
  color: var(--cream-text);
  padding: 48px 0 80px;
  text-align: center;
  font-size: 13px;
}
footer .foot-brand {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 6px;
  color: var(--cream-text);
  width: 70px;
  text-align: center;
  margin: 0 auto 20px;
}
footer .foot-brand .luv-mark { color: var(--gold-bright); margin-right: 2px; }
footer .foot-rating {
  font-size: 13px;
  opacity: 0.75;
  margin-bottom: 24px;
}
footer .foot-rating .stars { color: var(--gold); letter-spacing: 2px; }
footer a { color: var(--cream-text); text-decoration: none; opacity: 0.7; margin: 0 8px; font-weight: 500; }
footer .links { margin: 18px 0; }
footer .disc {
  font-size: 11px;
  opacity: 0.5;
  margin-top: 20px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  font-style: italic;
  line-height: 1.5;
}

/* =========================================================
   STICKY MOBILE CTA
   ========================================================= */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--border-soft);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 -6px 24px rgba(26, 15, 8, 0.08);
  z-index: 90;
  transform: translateY(110%);
  transition: transform 0.25s ease;
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .stick-info { flex: 1; font-size: 12px; line-height: 1.3; }
.sticky-cta .stick-info strong { color: var(--ink); font-weight: 700; display: block; font-size: 14px; font-family: 'Fraunces', serif; letter-spacing: -0.01em; }
.sticky-cta .stick-info .sub { color: var(--ink-mute); font-size: 11px; }
.sticky-cta .btn { width: auto; padding: 14px 22px; font-size: 13px; margin: 0; min-height: 48px; }

/* =========================================================
   DESKTOP BREAKPOINTS
   ========================================================= */
@media (min-width: 991px) {
  body { font-size: 18px; }
  h1 { font-size: 52px; }
  h2 { font-size: 40px; }
  h3 { font-size: 28px; }
  .hero { padding: 80px 0; }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 60px; }
  .hero-copy { order: 1; }
  .hero-image { order: 2; }
  .hero h1 { font-size: 52px; }
  .section { padding: 96px 0; }
  .section-tight { padding: 64px 0; }
  .feature-quote blockquote { font-size: 30px; }
  .problem-section h2 { font-size: 44px; }
  .founder-grid { grid-template-columns: 320px 1fr; gap: 48px; }
  .founder-section h2 { font-size: 44px; }
  .showcase-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
  .ingredient-grid { grid-template-columns: 1fr 1fr; }
  .howto-grid { grid-template-columns: 1fr 1fr 1fr; }
  .testi-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid { grid-template-columns: repeat(4, 1fr); }
  .bundle-section h2 { font-size: 44px; }
  .closer h2 { font-size: 40px; }
  .ingredient-grid { grid-template-columns: 1fr 1fr 1fr; }
}



.ugc-sec {
    width: 100%;
    padding: 60px 0;
    background: #f5ede0;
}

.testimonials-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .testimonials-header {
            text-align: center;
            margin-bottom: 60px;
            /* max-width: 900px; */
        }

        .testimonials-header h1 {
            font-size: 40px;
            font-weight: 700;
            line-height: 1.2;
            color: #1a1a1a;
            letter-spacing: -0.5px;
            text-align: center;
        }

        .testimonials-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            width: 100%;
            justify-content: center;
        }

        .testimonial-card {
            flex: 1;
            /* min-width: 255px; */
            max-width: 319px;
            background-color: #ffffff;
            border-radius: 12px;
            padding: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            border: 1px solid #f0f0f0;
            display: flex;
            flex-direction: column;
            
        }

        

        .testimonial-image-wrapper {
            display: flex;
            justify-content: center;
            margin-bottom: 12px;
        }

        .testimonial-image {
            width: 220px;
            height: 220px;
            border-radius: 8px;
            object-fit: cover;
            display: block;
            object-position: top center;
        }

        .testimonial-quote {
            font-size: 13px;
            line-height: 1.6;
            color: #666666;
            margin-bottom: 24px;
            font-weight: 500;
            flex-grow: 1;
            display: flex;
            /* align-items: center; */
        }

        .testimonial-quote::before {
            content: '"';
            font-size: 32px;
            color: #e0e0e0;
            margin-right: 4px;
            line-height: 0.8;
            display: none;
        }

        .testimonial-rating {
            display: flex;
            align-items: center;
            gap: 0px;
            
        }

        .ratting-new {
    display: flex;
    align-items: center;
    gap: 10px;
}

        .star {
            color: #ffc107;
            font-size: 18px;
            line-height: 1;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .testimonial-author-name {
            font-size: 13px;
            font-weight: 600;
            color: #565656;
            letter-spacing: 0.3px;
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .testimonials-header h1 {
                font-size: 40px;
            }

            .testimonials-grid {
                gap: 24px;
            }

            .testimonial-card {
                max-width: 100%;
                flex: 0 1 calc(50% - 12px);
            }
        }

        @media (max-width: 767px) {
            body {
                padding: 40px 16px;
            }

            .testimonials-header {
                margin-bottom: 40px;
            }

            .testimonials-header h1 {
                font-size: 32px;
                line-height: 1.3;
            }

            .testimonials-grid {
                gap: 20px;
                flex-direction: column;
            }

            .testimonial-card {
                flex: 1;
                max-width: 100%;
                padding: 28px 24px;
            }

            .testimonial-image {
                /* width: 180px; */
                /* height: 180px; */
            }

            .testimonial-quote {
                font-size: 15px;
                margin-bottom: 20px;
            }
            .founder-grid {
                    grid-template-columns: minmax(0, 1fr);
            }
        }

        @media (max-width: 480px) {
            body {
                padding: 30px 12px;
            }

            .testimonials-header h1 {
                font-size: 26px;
            }

            .testimonial-card {
                padding: 24px 20px;
            }

            .testimonial-image {
                /* width: 160px; */
                /* height: 160px; */
            }

            .testimonial-quote {
                font-size: 14px;
                margin-bottom: 18px;
            }

            .testimonial-quote::before {
                font-size: 24px;
            }
            .hero-bundle .price-now {
                    font-size: 30px;
            }
            .hero-grid {
                grid-template-columns: minmax(0, 1fr);
            }
            .founder-stats {
                    grid-template-columns: repeat(1, 1fr);
            }
        }
        @media(max-width:400px) {
            .hero-bundle .price-now {
                font-size: 26px;
            }
            .hero .stars {
                    font-size: 14px;
            }
            .hero .stars-row {
                gap: 6px;
                font-size: 12px;
            }
        }
        @media(max-width:360px) {
            .hero-bundle .price-row {
                    gap: 0px;
    flex-flow: column;
            }
        }

        .lft-box{
          transform: rotate(-1deg);
    transition: transform 0.2s;
        }

         .lft-box{
          transform: rotate(-1deg);
    transition: transform 0.2s;
        }
        .rht-box{
          transform: rotate(1deg);
    transition: transform 0.2s;
        }