:root {
  /* Base tones — from Navan brand deck */
  --sand: #EBDECB;
  --white: #FFFFFF;
  --off-white: #FEF9F5;
  --warm-taupe: #BFA694;
  --dark-taupe: #6A625A;
  --text-charcoal: #514C45;
  --packaging-text: #7A736A;

  /* Protein accents */
  --duck-sage: #95A77D;
  --rabbit-sky: #8FC8D4;
  --beef-terracotta: #CA8575;

  /* Buttons */
  --btn-primary: #6A625A;
  --btn-primary-hover: #59524C;
  --btn-secondary: #738063;
  --btn-secondary-hover: #8EA18F;
  --btn-disabled: #E8DDD2;

  /* Legacy aliases — mapped to brand colors so we don't have to find/replace every old reference */
  --cream: #FEF9F5;          /* off-white — primary page background */
  --cream-soft: #FEF9F5;     /* off-white */
  --cream-deep: #EBDECB;     /* sand — used for chip/pill backgrounds */
  --ink: #514C45;            /* text charcoal */
  --ink-soft: #7A736A;       /* packaging text — softer secondary text */
  --moss: #738063;           /* secondary button color (eucalyptus) */
  --moss-deep: #6A625A;      /* dark taupe — used for dark sections */
  --ochre: #BFA694;          /* warm taupe — replaces previous ochre accent */
  --ochre-deep: #6A625A;     /* dark taupe — replaces previous deep ochre */
  --terracotta: #CA8575;     /* beef terracotta */

  --border: rgba(81, 76, 69, 0.12);
  --border-strong: rgba(81, 76, 69, 0.24);
  --shadow: 0 1px 2px rgba(81, 76, 69, 0.04), 0 8px 24px -8px rgba(81, 76, 69, 0.08);
  --shadow-lg: 0 4px 12px rgba(81, 76, 69, 0.06), 0 24px 48px -12px rgba(81, 76, 69, 0.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; } /* prevent any rogue element from triggering horizontal scroll on mobile */
body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Montserrat', -apple-system, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; } /* prevent image overflow */
.serif { font-family: 'Montserrat', sans-serif; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* IMAGE PLACEHOLDER */
.img-ph {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(191, 166, 148, 0.12),
      rgba(191, 166, 148, 0.12) 12px,
      rgba(191, 166, 148, 0.20) 12px,
      rgba(191, 166, 148, 0.20) 24px
    ),
    var(--cream-deep);
  border: 1.5px dashed var(--ochre);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 20px;
  color: var(--ochre-deep);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.img-ph::before {
  content: '◷ IMAGE';
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--ochre-deep);
  background: var(--cream);
  padding: 4px 8px;
  border-radius: 99px;
}
.img-ph .ph-icon { font-size: 32px; margin-bottom: 8px; opacity: 0.6; }
.img-ph .ph-title { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600; margin-bottom: 4px; color: var(--ochre-deep); }
.img-ph .ph-desc { font-size: 11px; line-height: 1.4; color: var(--ink-soft); max-width: 240px; }
.img-ph .ph-spec { margin-top: 8px; font-size: 10px; color: var(--ochre-deep); font-weight: 600; letter-spacing: 0.04em; }

/* Announcement bar */
.announce {
  background: var(--moss-deep);
  color: var(--cream);
  padding: 10px 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.02em;
  font-weight: 500;
}

/* Nav */
nav {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
  background: rgba(254, 249, 245, 0.95);
}
nav .container { display: flex; justify-content: space-between; align-items: center; }
.logo-wrap { display: flex; align-items: center; gap: 12px; }
.logo-img-ph {
  width: 32px; height: 32px;
  background:
    repeating-linear-gradient(45deg, rgba(184, 118, 58, 0.1), rgba(184, 118, 58, 0.1) 4px, rgba(191, 166, 148, 0.28) 4px, rgba(191, 166, 148, 0.28) 8px),
    var(--cream-deep);
  border: 1px dashed var(--ochre);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 600; color: var(--ochre-deep); letter-spacing: 0.04em;
}
.logo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; font-size: 22px; letter-spacing: 0.04em;
}
.nav-links { display: flex; gap: 28px; font-size: 14px; font-weight: 500; }
.nav-links a { color: var(--ink-soft); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: var(--ink); }
.nav-cart { font-size: 14px; color: var(--ink-soft); text-decoration: none; }

/* Breadcrumb */
.breadcrumb {
  padding: 16px 0 8px;
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb-sep { margin: 0 8px; opacity: 0.5; }

/* PDP Hero */
.pdp-hero {
  padding: 8px 0 80px;
}
.pdp-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) {
  .pdp-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Image gallery (left) */
.gallery {
  position: sticky;
  top: 100px;
}
.main-image {
  aspect-ratio: 1;
  margin-bottom: 12px;
}
.thumb-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.thumb {
  aspect-ratio: 1;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.2s;
  position: relative;
}
.thumb:hover { border-color: var(--border-strong); }
.thumb.active { border-color: var(--moss); }
.thumb .img-ph {
  padding: 12px 8px;
  border-radius: 0;
  border: none;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(45deg, rgba(191, 166, 148, 0.14), rgba(191, 166, 148, 0.14) 5px, rgba(191, 166, 148, 0.22) 5px, rgba(191, 166, 148, 0.22) 10px),
    var(--cream-deep);
}
.thumb .img-ph::before { display: none; }
.thumb .img-ph .ph-icon { font-size: 18px; margin: 0; }
.thumb .img-ph .ph-title { font-size: 9px; margin: 0; letter-spacing: 0.04em; }
.thumb .img-ph .ph-desc, .thumb .img-ph .ph-spec { display: none; }

/* Right column - info */
.info { padding-top: 12px; }

.review-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.review-badge .stars {
  color: var(--ochre);
  letter-spacing: 1.5px;
  font-size: 14px;
}
.review-badge a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.product-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ochre-deep);
  margin-bottom: 8px;
}

h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(36px, 4.5vw, 48px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.subtitle {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 24px;
  max-width: 480px;
}

/* Benefits list */
.bullets {
  list-style: none;
  margin-bottom: 32px;
}
.bullets li {
  position: relative;
  padding: 9px 0 9px 24px;
  font-size: 14.5px;
  border-bottom: 1px solid var(--border);
}
.bullets li:last-child { border-bottom: none; }
.bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 6px;
  height: 6px;
  background: var(--moss);
  border-radius: 50%;
}













/* Free shipping indicator */
.ship-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 12px;
  font-weight: 500;
}
.ship-row svg { color: var(--moss); }

/* Tier cards */
.tier-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.tier {
  position: relative;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  padding: 16px 18px;
  cursor: pointer;
  transition: all 0.2s;
  background: white;
}
.tier:hover { border-color: var(--border-strong); }
.tier.selected {
  border-color: var(--moss);
  box-shadow: 0 0 0 3px rgba(115, 128, 99, 0.14);
}

.tier-best-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--cream);
  padding: 4px 14px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  z-index: 1;
}

.tier-popular-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ochre);
  color: white;
  padding: 4px 14px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  z-index: 1;
}

.tier-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 12px;
  align-items: start;
}

.tier-radio {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  position: relative;
  margin-top: 2px;
  flex-shrink: 0;
}
.tier.selected .tier-radio {
  border-color: var(--moss);
}
.tier.selected .tier-radio::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 10px; height: 10px;
  background: var(--moss);
  border-radius: 50%;
}

.tier-main { min-width: 0; }
.tier-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.tier-perks {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  font-weight: 600;
  margin-bottom: 4px;
}
.tier-detail {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}

.tier-pricing { 
  text-align: right; 
  min-width: 130px; 
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* ARRAE-style 'Save $XX' pill — much bigger and more prominent */
.tier-savings {
  display: inline-block;
  background: var(--sand);
  color: var(--text-charcoal);
  font-size: 19px;
  padding: 8px 14px;
  border-radius: 8px;
  letter-spacing: 0.01em;
  font-weight: 600;
  margin-bottom: 0;
  line-height: 1.2;
  white-space: nowrap;
}
/* When tier is selected, savings pill flips to dark — high contrast */
.tier.selected .tier-savings { 
  background: var(--dark-taupe); 
  color: var(--off-white); 
}

/* Current price — Montserrat medium, slightly larger */
.tier-price-now {
  font-family: 'Montserrat', sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--text-charcoal);
}

/* Crossed-out strike price — ARRAE makes this MUCH more prominent (almost same size as current price) */
.tier-price-strike {
  font-size: 19px;
  color: var(--packaging-text);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  margin-top: 0;
  font-weight: 500;
  letter-spacing: 0;
}

/* Per-piece pricing — highlighted with sand pill background to make it pop */
.tier-per-piece {
  display: inline-block;
  background: var(--sand);
  color: var(--text-charcoal);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  margin-top: 4px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}
/* Selected tier: per-piece pill becomes warm taupe outline so it doesn't compete with the savings pill */
.tier.selected .tier-per-piece {
  background: rgba(191, 166, 148, 0.18);
  color: var(--text-charcoal);
}

/* Separator */
.tier-separator {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}
.tier-separator::before,
.tier-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* CTA */
.atc-wrap { margin-top: 8px; }
.atc {
  display: block;
  width: 100%;
  background: var(--btn-primary);
  color: var(--off-white);
  border-radius: 99px;
  border: none;
  padding: 18px 24px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}
.atc:hover {
  background: var(--btn-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
.atc-sub {
  font-size: 11px;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 10px;
  letter-spacing: 0.04em;
}

/* Why subscribe block */
.why-sub {
  margin-top: 32px;
  padding: 20px;
  background: var(--cream-soft);
  border-radius: 4px;
  border: 1px solid var(--border);
}
.why-sub h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.why-sub h3::before {
  content: '✦';
  color: var(--ochre);
  font-size: 18px;
}
.why-sub ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.why-sub li {
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--ink-soft);
}
.why-sub li::before {
  content: '✓';
  color: var(--moss);
  font-weight: 600;
  flex-shrink: 0;
}

/* ==================== SECTIONS BELOW HERO ==================== */
.section {
  padding: 96px 0;
}
.section-cream-soft { background: var(--cream-soft); }
.section-cream-deep { background: var(--cream-deep); }
.section-moss { background: var(--moss-deep); color: var(--cream); }

.section-eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ochre-deep);
  margin-bottom: 16px;
}
.section-moss .section-eyebrow { color: var(--ochre); }

h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
h2 em { font-style: italic; color: var(--ochre-deep); font-weight: 400; }

.section-header {
  text-align: center;
  margin-bottom: 64px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.section-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.section-moss .section-sub { color: rgba(254, 249, 245, 0.8); }

/* ==================== DENTAL PROTOCOL TIMELINE ==================== */
.protocol-section {
  padding: 120px 0;
  background: var(--cream-soft);
  position: relative;
}

.protocol-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 80px;
  color: var(--ink);
}

@media (max-width: 800px) {
  .protocol-title { letter-spacing: 0.02em; font-size: 36px; }
}

.timeline-track {
  position: relative;
  max-width: 1000px;
  margin: 60px auto 0;
  padding: 40px 0;
}

/* Central vertical line — runs through the middle of the section */
.timeline-track::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 40px;
  bottom: 40px;
  width: 2px;
  background: var(--ink);
  transform: translateX(-50%);
  z-index: 1;
}

/* Stages container */
.timeline-grid {
  display: flex;
  flex-direction: column;
  gap: 56px;
  position: relative;
  z-index: 2;
}

/* Each stage: 3 columns — left content, center dot, right content */
.timeline-stage {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  gap: 0;
  align-items: start;
  position: relative;
}

/* The dot sits in the middle column, on the vertical line */
.timeline-dot {
  width: 14px;
  height: 14px;
  background: var(--ink);
  border-radius: 50%;
  margin: 12px auto 0;
  z-index: 3;
  position: relative;
}

/* Side containers */
.timeline-side {
  min-height: 1px;
}

.timeline-side.timeline-side-left {
  padding-right: 32px;
  text-align: left;
}

.timeline-side.timeline-side-right {
  padding-left: 32px;
  text-align: left;
}

/* When a side is "active" (has content), it shows. When inactive, it's empty */
.timeline-side:empty {
  /* keep the column but render nothing */
}

/* Stage header (icon + days label) */
.stage-header {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

/* On left-aligned stages (content on left), the header still reads naturally */


.stage-icon-square {
  width: 18px;
  height: 18px;
  background: var(--ink);
  border-radius: 3px;
  flex-shrink: 0;
}

.stage-days-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.118em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Pill / chip */
.stage-pill {
  display: inline-block;
  background: var(--cream-deep);
  border: 1px solid rgba(191, 166, 148, 0.4);
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: 14px;
}

/* Stage main heading */
.stage-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.042em;
  margin-bottom: 14px;
  color: var(--ink);
  text-transform: lowercase;
}

/* Benefits list — alignment respects the side */
.stage-benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stage-benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.118em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
}

.stage-benefits .bullet-icon {
  width: 18px;
  height: 18px;
  background: var(--cream-deep);
  border: 1px solid rgba(191, 166, 148, 0.48);
  border-radius: 3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--ochre-deep);
  font-weight: 600;
  letter-spacing: 0;
}

/* Mobile: collapse to single column, all stages stacked left */
@media (max-width: 780px) {
  .timeline-track::before {
    left: 24px;
    transform: none;
  }
  .timeline-stage {
    grid-template-columns: 48px 1fr;
  }
  .timeline-dot {
    margin: 12px 0 0;
  }
  .timeline-side.timeline-side-left,
  .timeline-side.timeline-side-right {
    text-align: left;
    padding-right: 0;
    padding-left: 0;
  }
  .timeline-side-left .stage-header,
  
  /* Reorder so dot is always on left */
  .timeline-stage > .timeline-side-left:first-child {
    order: 2;
  }
  .timeline-stage > .timeline-dot {
    order: 1;
  }
  .timeline-stage > .timeline-side-right:last-child {
    order: 3;
  }
  /* Hide empty side */
  .timeline-side:empty {
    display: none;
  }
}

/* ==================== INGREDIENT GALLERY ==================== */
.ing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 800px) {
  .ing-grid { grid-template-columns: 1fr; gap: 24px; }
}

.ing-card {
  text-align: left;
}
.ing-card .img-ph {
  aspect-ratio: 4/5;
  margin-bottom: 20px;
}

.ing-card .ing-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  font-weight: 600;
  margin-bottom: 8px;
}

.ing-card .ing-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 0.118em;
  text-transform: uppercase;
}

.ing-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ==================== HOW IT WORKS ==================== */
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
@media (max-width: 800px) { .how-grid { grid-template-columns: 1fr; gap: 32px; } }
.how-card .img-ph { aspect-ratio: 4/3; margin-bottom: 24px; }
.how-card .step-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 56px;
  font-style: italic;
  color: var(--ochre);
  line-height: 1;
  margin-bottom: 8px;
  font-weight: 400;
}
.how-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 8px;
}
.how-card p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }

/* ==================== REVIEW STRIP ==================== */
.review-bar {
  background: var(--cream-deep);
  padding: 32px 0;
  text-align: center;
}
.review-bar-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.review-bar-stat .review-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 40px;
  font-weight: 500;
}
.review-bar-stat .review-stars {
  color: var(--ochre);
  letter-spacing: 3px;
  font-size: 18px;
}
.review-bar-stat .review-label {
  font-size: 13px;
  color: var(--ink-soft);
}

/* ==================== TESTIMONIALS ==================== */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 800px) { .testi-grid { grid-template-columns: 1fr; } }
.testi-card {
  background: rgba(254, 249, 245, 0.06);
  border: 1px solid rgba(254, 249, 245, 0.18);
  padding: 28px;
  border-radius: 4px;
}
.testi-card .img-ph {
  width: 48px; height: 48px;
  border-radius: 50%;
  margin-bottom: 16px;
  padding: 0;
  border: 1px dashed var(--ochre);
  background:
    repeating-linear-gradient(45deg, rgba(191, 166, 148, 0.22), rgba(191, 166, 148, 0.22) 4px, rgba(191, 166, 148, 0.4) 4px, rgba(191, 166, 148, 0.4) 8px),
    rgba(245, 239, 230, 0.1);
}
.testi-card .img-ph::before { display: none; }
.testi-card .img-ph .ph-icon { font-size: 16px; margin: 0; }
.testi-card .img-ph .ph-title, .testi-card .img-ph .ph-desc, .testi-card .img-ph .ph-spec { display: none; }
.testi-card .stars { color: var(--ochre); margin-bottom: 14px; font-size: 13px; letter-spacing: 1.5px; }
.testi-card p {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-style: italic;
  margin-bottom: 14px;
}
.testi-card .author { font-size: 12px; color: rgba(254, 249, 245, 0.75); }
.testi-card .author strong { display: block; color: var(--cream); font-style: normal; margin-bottom: 2px; font-size: 13px; }

/* ==================== FAQ ==================== */
.faq-list { max-width: 760px; margin: 48px auto 0; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  padding: 24px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 19px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 28px;
  font-weight: 300;
  color: var(--ochre-deep);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item p {
  padding: 0 0 24px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ==================== CROSS-SELL ==================== */
.cross-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 48px;
}
@media (max-width: 700px) { .cross-grid { grid-template-columns: 1fr; } }
.cross-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.cross-card .img-ph {
  aspect-ratio: 16/9;
  border-radius: 0;
  border: none;
  border-bottom: 1.5px dashed var(--ochre);
}
.cross-card-body { padding: 24px 28px; }
.cross-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 6px;
}
.cross-card .meta { font-size: 12px; color: var(--ink-soft); margin-bottom: 12px; }
.cross-card p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 16px; }
.cross-card .cross-link {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Footer */
footer {
  padding: 56px 0 32px;
  background: var(--ink);
  color: rgba(254, 249, 245, 0.75);
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 13px;
}
footer .logo {
  color: var(--cream);
  margin-bottom: 12px;
  display: inline-block;
}
footer p { margin: 8px 0; }


/* ARRAE-style size selector */
.size-selector {
  margin-bottom: 20px;
}
.size-selector-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: 0.042em;
}
.size-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.size-button {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-family: inherit;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}
.size-button:hover {
  border-color: var(--border-strong);
}
.size-button.active {
  border-color: var(--ink);
  background: white;
  box-shadow: 0 0 0 2px var(--ink);
}
.size-button .size-icon-wrap {
  width: 32px;
  height: 32px;
  background:
    repeating-linear-gradient(45deg, rgba(191, 166, 148, 0.14), rgba(191, 166, 148, 0.14) 4px, rgba(191, 166, 148, 0.22) 4px, rgba(191, 166, 148, 0.22) 8px),
    var(--cream-deep);
  border: 1px dashed var(--ochre);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.size-button .size-icon-wrap .ph-icon {
  font-size: 16px;
  line-height: 1;
}
.size-button .size-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Combined name + weight range on one line */
.size-button .size-info .size-name-row {
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.042em;
  color: var(--ink);
}
.size-button .size-info .size-detail-inline {
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: 0.042em;
}
.size-button .size-info .size-name {
  font-weight: 600;
  font-size: 13px;
  display: block;
  margin-bottom: 1px;
  letter-spacing: 0.042em;
}
.size-button .size-info .size-detail {
  font-size: 11px;
  color: var(--ink-soft);
  display: block;
  letter-spacing: 0.042em;
}
.size-button .size-info .size-bundle {
  font-size: 9px;
  color: var(--ochre-deep);
  display: block;
  margin-top: 0;
  letter-spacing: 0.118em;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.2;
}
.size-quiz {
  text-align: center;
  margin-top: 8px;
}
.size-quiz a {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.042em;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.size-quiz a:hover { color: var(--ink); }


/* ==================== COMPARISON CHART ==================== */
.compare-section {
  padding: 120px 0;
  background: var(--cream);
}

.compare-table {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1fr 1fr 1fr;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.compare-row {
  display: contents;
}

.compare-cell {
  padding: 24px 16px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  display: flex;
  align-items: center;
}

.compare-cell.row-label {
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0.118em;
  text-transform: uppercase;
}

.compare-cell.center {
  justify-content: center;
}

/* Hero column (NAVAN) — dark moss background, contiguous from header to bottom */
.compare-cell.hero-col {
  background: var(--moss-deep);
  color: var(--cream);
  border-top-color: rgba(254, 249, 245, 0.1);
  position: relative;
}

/* Top hero header — give it a strong header treatment */
.compare-cell.hero-col.header-cell {
  border-top: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding-top: 40px;
  padding-bottom: 32px;
}

/* Last hero col cell — round the bottom */
.compare-cell.hero-col.last-cell {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding-bottom: 40px;
}

/* HEADER row */
.compare-header {
  display: contents;
}
.compare-header .compare-cell {
  border-top: none;
  padding-top: 0;
  padding-bottom: 24px;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.118em;
  text-transform: uppercase;
  color: var(--ink);
}
.compare-header .compare-cell.hero-col {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.118em;
  text-transform: uppercase;
  color: var(--off-white);
}

/* Check / cross icons */
.compare-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
}
.compare-icon.check {
  background: var(--duck-sage);
  color: white;
}
.compare-icon.cross {
  background: transparent;
  border: 1.5px solid var(--border-strong);
  color: var(--ink-soft);
}
.hero-col .compare-icon.check {
  background: var(--duck-sage);
  color: var(--moss-deep);
}

/* Mobile: switch to scrollable or stacked layout */
@media (max-width: 900px) {
  .compare-table-wrap {
    overflow-x: auto;
    margin: 0 -24px;
    padding: 0 24px 12px;
  }
  .compare-table {
    grid-template-columns: 180px 160px 130px 130px 130px;
    min-width: 730px;
  }
  .compare-cell {
    padding: 18px 12px;
    font-size: 13px;
  }
  .compare-cell.row-label {
    font-size: 14px;
  }
  .compare-header .compare-cell {
    font-size: 15px;
  }
  .compare-header .compare-cell.hero-col {
    font-size: 22px;
  }
}

.compare-footer {
  margin-top: 32px;
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
  max-width: 800px;
}


/* ==================== BRAND TYPOGRAPHY RULES ==================== */
/* Brand book: Montserrat only. UPPERCASE = 0.118em letter-spacing, lowercase = 0.042em */

h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  text-transform: lowercase;
  letter-spacing: 0.042em;
}

h1 em, h2 em, h3 em {
  font-style: normal;
  font-weight: 500;
}

/* Section eyebrows and labels — UPPERCASE with brand spacing */
.section-eyebrow,
.product-eyebrow,
.tier-perks,
.card-eyebrow,
.tier-best-badge,
.tier-popular-badge,
.compare-header .compare-cell,
.timeline-stage .stage-days,
.timeline-days-label {
  letter-spacing: 0.118em;
}

/* Body / paragraph copy */
p, li, .subtitle, .section-sub, .tier-detail, .stage-detail-bullet {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* The logo wordmark — slightly more spacing */
.logo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Numbers in pricing — Montserrat medium */
.tier-price-now, .tier-price-strike,
.price-final, .price-main {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}

/* Protocol title — bold caps, brand-spec letter-spacing */
.protocol-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  letter-spacing: 0.118em;
  text-transform: uppercase;
}


/* ==================== TIKTOK UGC SECTION ==================== */
.tiktok-section {
  padding: 120px 0;
  background: var(--cream);
}

.tiktok-section .section-header {
  text-align: center;
  margin-bottom: 56px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.tiktok-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .tiktok-grid { grid-template-columns: 1fr; gap: 48px; max-width: 420px; }
}

.tiktok-card {
  display: flex;
  flex-direction: column;
}

/* The video embed area — uses TikTok's blockquote markup which their script transforms into an embedded player */
.tiktok-embed-wrap {
  position: relative;
  background: var(--cream-deep);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  margin-bottom: 20px;
}

.tiktok-embed-wrap .img-ph {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  padding: 32px 16px;
  background:
    repeating-linear-gradient(45deg, rgba(191, 166, 148, 0.14), rgba(191, 166, 148, 0.14) 12px, rgba(191, 166, 148, 0.22) 12px, rgba(191, 166, 148, 0.22) 24px),
    var(--text-charcoal);
  color: rgba(245, 239, 230, 0.9);
}
.tiktok-embed-wrap .img-ph::before {
  background: rgba(81, 76, 69, 0.8);
  color: var(--ochre);
}
.tiktok-embed-wrap .img-ph .ph-icon { color: var(--ochre); font-size: 42px; }
.tiktok-embed-wrap .img-ph .ph-title { color: var(--cream); font-size: 15px; }
.tiktok-embed-wrap .img-ph .ph-desc { color: rgba(254, 249, 245, 0.65); }
.tiktok-embed-wrap .img-ph .ph-spec { color: var(--ochre); }

/* The play button overlay (visual cue this is a video) */
.tiktok-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: rgba(254, 249, 245, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}
.tiktok-play-overlay::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 18px solid var(--ink);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 4px;
}

/* Creator handle + stats bar */
.tiktok-creator-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.tiktok-creator-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.tiktok-avatar {
  width: 36px;
  height: 36px;
  background: var(--cream-deep);
  border: 1px dashed var(--ochre);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--ochre-deep);
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.tiktok-handle {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tiktok-stats {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.118em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.tiktok-stats svg { display: inline-block; vertical-align: middle; margin-right: 4px; }

/* Comments section header */
.tiktok-comments-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.118em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ochre-deep);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tiktok-comments-label::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--ochre);
}

/* Individual comments */
.tiktok-comments {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}
.tiktok-comment {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
}
.tiktok-comment-avatar {
  width: 28px;
  height: 28px;
  background: var(--cream-deep);
  border: 1px dashed rgba(191, 166, 148, 0.55);
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 8px;
  color: var(--ochre-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.tiktok-comment-body { min-width: 0; }
.tiktok-comment-handle {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  margin-bottom: 3px;
}
.tiktok-comment-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: 0.01em;
}
.tiktok-comment-meta {
  font-size: 10px;
  color: var(--ink-soft);
  margin-top: 4px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tiktok-comment-meta svg { vertical-align: middle; }

/* "View all on TikTok" link */
.tiktok-view-all {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}
.tiktok-view-all:hover {
  gap: 10px;
}

/* Bottom CTA */
.tiktok-shop-cta {
  margin-top: 56px;
  text-align: center;
}
.tiktok-shop-cta p {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.tiktok-shop-cta a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--btn-primary);
  color: var(--off-white);
  padding: 14px 32px;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s;
}
.tiktok-shop-cta a:hover {
  background: var(--moss-deep);
  transform: translateY(-1px);
}

/* TikTok-style hashtag treatment in comments */
.tt-tag { color: var(--ochre-deep); font-weight: 600; }



/* ==================== MOBILE OPTIMIZATION ==================== */
/* Comprehensive mobile pass — designed for 375–767px viewports */

@media (max-width: 768px) {

  /* === GLOBAL === */
  body { font-size: 15px; }
  .container { padding: 0 18px; }

  /* === ANNOUNCE BAR === */
  .announce {
    padding: 8px 0;
    font-size: 11px;
  }

  /* === NAV === */
  nav { padding: 14px 0; }
  nav .container {
    flex-wrap: wrap;
    gap: 10px;
  }
  .logo-wrap { gap: 8px; }
  .logo-img-ph { width: 24px; height: 24px; font-size: 7px; }
  .logo { font-size: 17px; letter-spacing: 0.14em; }
  .nav-links {
    display: none;  /* hide nav links on mobile — use hamburger pattern in production */
  }
  .nav-cart { font-size: 12px; }

  /* === BREADCRUMB === */
  .breadcrumb {
    padding: 12px 0 4px;
    font-size: 11px;
  }

  /* === PDP HERO === */
  .pdp-hero { padding: 4px 0 56px; }
  .pdp-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Image gallery: no longer sticky on mobile — sticky breaks at narrow widths */
  .gallery {
    position: static;
    top: auto;
  }
  .main-image { aspect-ratio: 1; }
  .thumb-row {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }

  /* Right column — start fresh */
  .info { padding-top: 0; }

  /* Review badge — tightened */
  .review-badge { 
    font-size: 12px; 
    margin-bottom: 4px;
  }

  /* Product eyebrow + title — tightened */
  .product-eyebrow { 
    font-size: 10px; 
    margin-bottom: 4px;
  }
  h1 { 
    font-size: 30px; 
    margin-bottom: 8px;
    line-height: 1.05;
  }
  .subtitle {
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 16px;
  }



  /* Gallery on mobile spans full width */
  .gallery {
    text-align: center;
  }
  .gallery .main-image {
    margin: 0 0 12px;
  }
  .gallery .thumb-row {
    justify-content: center;
  }

  /* Size selector — keep 2-column but tighter */
  .size-buttons { gap: 8px; }
  .size-button {
    padding: 12px 10px;
    grid-template-columns: 40px 1fr;
    gap: 10px;
  }
  .size-button .size-icon-wrap { width: 40px; height: 40px; }
  .size-button .size-icon-wrap .ph-icon { font-size: 20px; }
  .size-button .size-info .size-name { font-size: 13px; }
  .size-button .size-info .size-detail { font-size: 11px; }
  .size-button .size-info .size-bundle { font-size: 10px; }
  .size-quiz a { font-size: 11px; }

  /* Bullets list */
  .bullets li {
    padding: 8px 0 8px 20px;
    font-size: 13.5px;
  }

  /* Composition strip */
  
  
  
  
  

  /* Free shipping indicator */
  .ship-row { font-size: 11px; }

  /* === TIER CARDS — ARRAE-style 2-column mobile layout === */
  .tier {
    padding: 14px 14px;
  }
  
  /* Maintain 2-column layout on mobile: content left, pricing right */
  .tier-row {
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
  }
  
  /* Hide the standalone radio column (we render radio inline in tier-main on mobile) */
  .tier-row > .tier-radio {
    display: none;
  }
  
  /* Render a visual radio inline before the title text */
  .tier-main { 
    min-width: 0;
    display: block;
  }
  .tier-main::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--border-strong);
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    background: white;
  }
  .tier.selected .tier-main::before {
    border-color: var(--moss);
    background: radial-gradient(circle at center, var(--moss) 0%, var(--moss) 35%, white 36%);
  }
  
  /* Tier title — inline with the visual radio */
  .tier-title { 
    font-size: 15px; 
    margin-bottom: 0;
    display: inline;
    vertical-align: middle;
    line-height: 1.2;
    font-weight: 600;
  }
  
  /* Perks line below title */
  .tier-perks {
    font-size: 9.5px;
    letter-spacing: 0.08em;
    margin: 10px 0 4px;
    text-transform: uppercase;
    color: var(--ochre-deep);
  }
  
  /* Detail text */
  .tier-detail { 
    font-size: 11.5px; 
    line-height: 1.4;
    color: var(--ink-soft);
  }

  /* RIGHT PRICING COLUMN — stacked vertically, right-aligned */
  .tier-pricing {
    grid-column: auto;
    margin: 0;
    padding: 0;
    border: none;
    text-align: right;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }
  
  /* Save pill at top */
  .tier-savings {
    font-size: 11.5px;
    padding: 4px 10px;
    margin-bottom: 0;
    border-radius: 6px;
    order: 1;
    white-space: nowrap;
    line-height: 1.2;
  }
  
  /* Price (e.g. $68.85/month) */
  .tier-price-now { 
    font-size: 15px;
    order: 2;
    white-space: nowrap;
    margin-top: 4px;
  }
  
  /* Strike price */
  .tier-price-strike {
    font-size: 13px;
    margin-top: 0;
    order: 3;
    text-decoration-thickness: 1.5px;
    white-space: nowrap;
  }
  
  /* Per-piece pill spans full card width as final row */
  .tier-per-piece {
    grid-column: 1 / -1;
    font-size: 9.5px;
    padding: 4px 10px;
    margin-top: 12px;
    width: auto;
    align-self: flex-start;
    order: 99;
    letter-spacing: 0.06em;
  }

  /* Tier badges */
  .tier-best-badge, .tier-popular-badge {
    font-size: 8px;
    padding: 3px 10px;
    letter-spacing: 0.1em;
  }

  /* ATC button */
  .atc {
    padding: 16px 20px;
    font-size: 13px;
    letter-spacing: 0.06em;
  }
  .atc-sub { font-size: 10px; }

  /* Why subscribe */
  .why-sub { padding: 16px; margin-top: 24px; }
  .why-sub h3 { font-size: 14px; }
  .why-sub li { font-size: 12px; }

  /* === SECTIONS === */
  .section { padding: 56px 0; }
  h2 { font-size: 28px; margin-bottom: 16px; }
  .section-header { margin-bottom: 36px; }
  .section-eyebrow { font-size: 10px; margin-bottom: 12px; }
  .section-sub { font-size: 14px; }

  /* === REVIEW BAR === */
  .review-bar { padding: 24px 0; }
  .review-bar-stat .review-num { font-size: 30px; }
  .review-bar-stat .review-stars { font-size: 14px; }
  .review-bar-stat .review-label { font-size: 11px; }

  /* === TIKTOK SECTION — 2-up horizontal carousel on mobile (ARRAE-style) === */
  .tiktok-section { padding: 56px 0; }
  
  /* Convert grid to horizontal scroll carousel showing 2 cards at a time */
  .tiktok-grid {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    gap: 12px;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 18px 12px;
    margin: 0 -18px;
    scrollbar-width: none;
  }
  .tiktok-grid::-webkit-scrollbar { display: none; }
  
  /* Each card sized to roughly half the viewport (minus the gap) so 2 fit at a time */
  .tiktok-card { 
    flex: 0 0 90%;
    min-width: 0;
    max-width: 90%;
    scroll-snap-align: center;
  }
  
  /* Override TikTok's hardcoded min-width so the embed fits in the card on mobile */
  .tiktok-card .tiktok-embed {
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  
  /* The embed-wrap inline styles need to be respected on mobile but width should be 100% */
  .tiktok-card .tiktok-embed-wrap {
    width: 100%;
  }
  
  /* Video embed maintains 9:16 vertical aspect, no fixed max-height so it stays clean */
  .tiktok-embed-wrap { 
    aspect-ratio: 9/16; 
    max-height: none;
    margin-bottom: 12px;
  }
  
  /* Compact creator bar (avatar + handle + stats) */
  .tiktok-creator-bar { margin-bottom: 10px; gap: 8px; flex-wrap: wrap; }
  .tiktok-avatar { width: 28px; height: 28px; font-size: 8px; }
  .tiktok-handle { font-size: 11px; }
  .tiktok-stats { font-size: 9px; gap: 6px; }
  
  /* Comments compacted for narrow cards */
  .tiktok-comments-label { font-size: 9px; margin-bottom: 8px; }
  .tiktok-comments { gap: 10px; margin-bottom: 14px; }
  .tiktok-comment { gap: 8px; grid-template-columns: 22px 1fr; }
  .tiktok-comment-avatar { width: 22px; height: 22px; font-size: 7px; }
  .tiktok-comment-text { font-size: 11px; line-height: 1.4; }
  .tiktok-comment-handle { font-size: 9px; }
  .tiktok-comment-meta { font-size: 8px; }
  .tiktok-view-all { font-size: 10px; }
  
  .tiktok-shop-cta { margin-top: 36px; }
  .tiktok-shop-cta p { font-size: 12px; }
  .tiktok-shop-cta a {
    padding: 12px 24px;
    font-size: 11px;
    letter-spacing: 0.12em;
  }
  
  /* Carousel arrow navigation buttons */
  .tiktok-carousel-wrap {
    position: relative;
  }
  .tiktok-arrow {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(254, 249, 245, 0.95);
    backdrop-filter: blur(4px);
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(81, 76, 69, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: var(--text-charcoal);
    font-size: 16px;
    font-weight: 400;
    user-select: none;
  }
  .tiktok-arrow:active {
    background: var(--sand);
  }
  .tiktok-arrow.prev { left: 0; }
  .tiktok-arrow.next { right: 0; }

  /* === DENTAL PROTOCOL TIMELINE === */
  .protocol-section { padding: 56px 0; }
  .protocol-title { font-size: 28px; letter-spacing: 0.06em; margin-bottom: 32px; }
  .timeline-track::before {
    left: 20px;
    transform: none;
  }
  .timeline-stage {
    grid-template-columns: 40px 1fr;
    gap: 16px;
    padding: 0;
  }
  .timeline-dot {
    margin: 8px auto 0;
    width: 12px;
    height: 12px;
  }
  /* All content goes to right side on mobile, regardless of which side it was on desktop */
  .timeline-side-left,
  .timeline-side-right {
    text-align: left !important;
    padding: 0 !important;
  }
  .timeline-side:empty { display: none; }
  /* Reorder: dot is column 1, content is column 2 */
  .timeline-stage > .timeline-side-left:first-child { order: 2; grid-column: 2; }
  .timeline-stage > .timeline-side-right:last-child { order: 2; grid-column: 2; }
  .timeline-stage > .timeline-dot { order: 1; grid-column: 1; }
  .stage-header { margin-bottom: 12px; }
  .stage-days-label { font-size: 12px; }
  .stage-pill { font-size: 12px; padding: 4px 10px; margin-bottom: 10px; }
  .stage-heading { font-size: 16px; margin-bottom: 10px; }
  .stage-benefits li { font-size: 10px; gap: 8px; }
  .stage-benefits .bullet-icon { width: 14px; height: 14px; font-size: 8px; }

  /* === INGREDIENT GALLERY === */
  /* === Ingredient gallery — horizontal swipeable carousel on mobile === */
  .ing-grid {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: row;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 18px 16px;
    margin: 0 -18px;
    scrollbar-width: none;
  }
  .ing-grid::-webkit-scrollbar { display: none; }
  
  .ing-card {
    flex: 0 0 70%;
    min-width: 0;
    max-width: 70%;
    scroll-snap-align: center;
  }
  
  /* Constrain whole card content (image + text) so it stays aligned on mobile */
  .ing-card {
    text-align: left;
  }
  .ing-card > div[style*="aspect-ratio:4/5"],
  .ing-card .ing-label,
  .ing-card .ing-title,
  .ing-card p {
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Image keeps its own bottom margin */
  .ing-card > div[style*="aspect-ratio:4/5"] {
    width: 100%;
  }
  .ing-card .img-ph { aspect-ratio: 4/3; margin-bottom: 14px; }
  .ing-card .ing-title { font-size: 14px; letter-spacing: 0.118em; }
  .ing-card p { font-size: 13px; }

  /* === COMPARISON CHART === */
  .compare-section { padding: 56px 0; }
  .compare-section h2 { font-size: 26px; }
  .compare-table-wrap {
    overflow-x: auto;
    margin: 0 -18px;
    padding: 0 18px 16px;
    -webkit-overflow-scrolling: touch;
  }
  .compare-table {
    grid-template-columns: 140px 130px 110px 110px 110px;
    min-width: 600px;
  }
  .compare-cell { padding: 14px 8px; font-size: 12px; }
  .compare-cell.row-label { font-size: 12px; }
  .compare-header .compare-cell { font-size: 13px; padding-bottom: 16px; }
  .compare-header .compare-cell.hero-col { font-size: 18px; }
  .compare-icon { width: 22px; height: 22px; font-size: 12px; }
  .compare-cell.hero-col.header-cell { padding-top: 24px; padding-bottom: 20px; }
  .compare-cell.hero-col.last-cell { padding-bottom: 24px; }
  .compare-footer { font-size: 11px; }

  /* === HOW IT WORKS === */
  .how-grid { gap: 28px; }
  .how-card .img-ph { aspect-ratio: 4/3; margin-bottom: 16px; }
  .how-card .step-num { font-size: 42px; }
  .how-card h3 { font-size: 18px; }
  .how-card p { font-size: 13px; }

  /* === TESTIMONIALS === */
  .testi-grid { gap: 16px; margin-top: 32px; }
  .testi-card { padding: 20px; }
  .testi-card p { font-size: 14px; }
  .testi-card .author { font-size: 11px; }
  .testi-card .author strong { font-size: 12px; }

  /* === FAQ === */
  .faq-item summary {
    padding: 18px 0;
    font-size: 16px;
    gap: 16px;
  }
  .faq-item summary::after { font-size: 24px; }
  .faq-item p { font-size: 13px; line-height: 1.6; padding-bottom: 18px; }

  /* === CROSS-SELL === */
  .cross-grid { gap: 20px; margin-top: 32px; }
  .cross-card-body { padding: 18px 20px; }
  .cross-card h3 { font-size: 17px; }
  .cross-card .meta { font-size: 11px; }
  .cross-card p { font-size: 13px; }
  .cross-card .cross-link { font-size: 12px; }

  /* === FOOTER === */
  footer { padding: 40px 0 24px; font-size: 12px; }
  footer .logo { font-size: 18px; }


  /* === AGGRESSIVE: Kill the gap between title block items === */
  /* .info uses display: contents on mobile so its children become flex items of 
     .pdp-grid, which has gap: 24px. This makes the title block look spaced out. 
     Fix: reduce .pdp-grid gap on mobile, then add back small margins manually. */
  .pdp-grid {
    gap: 0 !important;
  }
  /* Restore intended spacing on items that SHOULD have gaps */
  .pdp-grid > .gallery {
    margin: 8px 0 20px;
  }
  .info .review-badge {
    margin-top: 0;
    margin-bottom: 4px !important;
  }
  .info .product-eyebrow {
    margin-bottom: 4px !important;
  }
  .info h1 {
    margin-bottom: 8px !important;
  }
  .info .subtitle {
    margin-bottom: 20px !important;
  }
  .info .size-selector {
    margin-bottom: 16px !important;
  }
  .info .ship-row {
    margin-bottom: 12px !important;
  }
  .info .tier-stack {
    margin-bottom: 16px !important;
  }
  .info .atc-wrap {
    margin-bottom: 24px !important;
  }
  .info .bullets {
    margin-bottom: 24px !important;
  }



  /* ===== FORCED OVERRIDE: Photo and ATC full-width on mobile ===== */
  /* Photo and ATC span the full mobile column */
  .pdp-grid > .gallery {
    width: 100% !important;
    max-width: 100% !important;
  }
  .atc-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }
  .atc {
    width: 100% !important;
  }

}

/* ==================== STICKY BOTTOM ATC BAR (mobile only) ==================== */
/* Appears at the bottom of the screen once the user scrolls past the hero
   so the ATC is always accessible. Hidden on desktop. */

@media (max-width: 768px) {
  .mobile-atc-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--off-white);
    border-top: 1px solid var(--border);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    z-index: 999;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    box-shadow: 0 -2px 12px rgba(81, 76, 69, 0.08);
  }
  .mobile-atc-bar.visible {
    transform: translateY(0);
  }
  .mobile-atc-info { min-width: 0; }
  .mobile-atc-tier-name {
    font-size: 10px;
    letter-spacing: 0.118em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--packaging-text);
    margin-bottom: 1px;
  }
  .mobile-atc-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-charcoal);
    letter-spacing: 0.01em;
  }
  .mobile-atc-strike {
    font-size: 12px;
    color: var(--packaging-text);
    text-decoration: line-through;
    margin-left: 6px;
    font-weight: 400;
  }
  .mobile-atc-button {
    background: var(--btn-primary);
    color: var(--off-white);
    border: none;
    padding: 14px 22px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 99px;
    cursor: pointer;
    white-space: nowrap;
  }
  /* Add bottom padding to body when bar is visible so content isn't hidden behind it */
  body.has-mobile-atc { padding-bottom: 72px; }
}

/* Hide the sticky bar entirely on desktop */
@media (min-width: 769px) {
  .mobile-atc-bar { display: none !important; }
}



/* ==================== HERO REORDER (Mobile Only) ==================== */
/* On mobile, follow the universal DTC PDP convention — photo first,
   then title block, then buy box. Order:
   1. Gallery (photo)
   2. Review badge + eyebrow + h1 (title block — no long subtitle yet)
   3. Size selector
   4. Tier stack (buy box)
   5. ATC
   6. Ship row
   7. Subtitle (long description sits below the fold)
   8. Bullets
   9. Why subscribe
*/
@media (max-width: 768px) {
  .pdp-grid {
    display: flex;
    flex-direction: column;
  }
  .pdp-grid > .gallery {
    order: 1;  /* photo first */
  }
  .pdp-grid > .info {
    display: contents; /* lets .info's children participate in the flex layout */
  }
  /* Order assignments for .info's children */
  .info .review-badge        { order: 2; }
  .info .product-eyebrow     { order: 2; }
  .info h1                   { order: 2; }
  .info .mobile-photo-anchor { display: none; } /* anchor is desktop-only or unused */
  .info .size-selector       { order: 3; }
  .info .tier-stack          { order: 4; }
  .info .atc-wrap            { order: 5; }
  .info .ship-row            { order: 6; }
  .info .subtitle            { order: 7; } /* long description moves below the fold */
  .info .bullets             { order: 8; }
  .info .why-sub             { order: 9; }
}

/* On desktop the .mobile-photo-anchor is purely a marker, hidden */
.mobile-photo-anchor { display: none; }

/* ==================== DESKTOP HERO PADDING TWEAKS ==================== */
/* Ensure ship row + tier stack flow naturally now that they sit right after size selector */
.info .size-selector { margin-bottom: 28px; }



/* /month suffix on tier prices — smaller, lower-cased, packaging-text color */
.tier-price-unit {
  font-size: 15px;
  font-weight: 500;
  color: var(--packaging-text);
  letter-spacing: 0;
  margin-left: 2px;
}

/* Strike price on the ATC button */
.atc-strike {
  color: rgba(254, 249, 245, 0.55);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  margin-left: 4px;
  font-weight: 500;
  font-size: 13px;
}

/* Mobile sizing for unit suffix */
@media (max-width: 768px) {
  .tier-price-unit { font-size: 13px; }
  .atc-strike { font-size: 11px; }
}



/* Carousel arrows are mobile-only */
.tiktok-arrow { display: none; }
@media (max-width: 768px) {
  .tiktok-arrow { display: flex; }
}


/* ==================== EXPANDED FOOTER ==================== */
footer {
  padding: 80px 0 32px;
  text-align: left;
}
footer .container { padding: 0 32px; }
.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(254, 249, 245, 0.12);
  margin-bottom: 40px;
}
.footer-brand .logo {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.footer-brand p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(254, 249, 245, 0.65);
  max-width: 380px;
  margin: 0;
}
.footer-newsletter h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 8px;
}
.footer-newsletter p {
  font-size: 13px;
  color: rgba(254, 249, 245, 0.65);
  margin-bottom: 16px;
  line-height: 1.5;
}
.footer-newsletter-form {
  display: flex;
  gap: 8px;
}
.footer-newsletter-form input[type="email"] {
  flex: 1;
  background: rgba(254, 249, 245, 0.08);
  border: 1px solid rgba(254, 249, 245, 0.18);
  color: var(--cream);
  padding: 12px 14px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}
.footer-newsletter-form input[type="email"]:focus {
  border-color: rgba(254, 249, 245, 0.4);
}
.footer-newsletter-form input[type="email"]::placeholder {
  color: rgba(254, 249, 245, 0.4);
}
.footer-newsletter-form button {
  background: var(--cream);
  color: var(--ink);
  border: none;
  padding: 12px 20px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s;
}
.footer-newsletter-form button:hover { opacity: 0.85; }
.footer-newsletter-note {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: rgba(254, 249, 245, 0.45);
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(254, 249, 245, 0.12);
}
.footer-col h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 18px;
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
}
.footer-col a {
  font-size: 14px;
  color: rgba(254, 249, 245, 0.65);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--cream); }

.footer-bottom {
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 11px;
  color: rgba(254, 249, 245, 0.45);
}
.footer-bottom .legal {
  display: flex;
  gap: 18px;
}
.footer-bottom .legal a {
  color: rgba(254, 249, 245, 0.55);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-bottom .legal a:hover { color: var(--cream); }

@media (max-width: 768px) {
  footer { padding: 56px 0 28px; }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 40px;
    margin-bottom: 32px;
  }
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
    padding-bottom: 36px;
  }
  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
}

/* ==================== HOMEPAGE ==================== */
.hero-home {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  background: var(--sand);
  overflow: hidden;
}
.hero-home-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-home-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-home-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(120deg, rgba(254, 249, 245, 0.78) 0%, rgba(254, 249, 245, 0.35) 55%, rgba(254, 249, 245, 0) 100%);
}
.hero-home-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  padding: 80px 0;
}
.hero-home-eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ochre-deep);
  margin-bottom: 20px;
}
.hero-home h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
  color: var(--ink);
}
.hero-home h1 em {
  font-style: italic;
  color: var(--moss);
  font-weight: 500;
}
.hero-home-sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 36px;
  max-width: 480px;
}
.hero-home-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn-primary, .btn-secondary {
  display: inline-block;
  padding: 16px 28px;
  border-radius: 4px;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-primary {
  background: var(--btn-primary);
  color: var(--off-white);
}
.btn-primary:hover {
  background: var(--btn-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn-secondary:hover {
  background: var(--ink);
  color: var(--off-white);
}

/* Value pillars */
.value-pillars {
  padding: 56px 0;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}
.value-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.value-pillar {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.value-pillar-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--moss);
  background: rgba(115, 128, 99, 0.12);
  border-radius: 50%;
}
.value-pillar-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.value-pillar-sub {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.45;
  max-width: 200px;
}
@media (max-width: 768px) {
  .value-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 16px;
  }
}

/* Featured bundles grid (reusing cross-card patterns) */
.featured-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 768px) {
  .featured-grid { grid-template-columns: 1fr; }
}
.featured-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
}
.featured-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.featured-card-image {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--sand);
}
.featured-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}
.featured-card:hover .featured-card-image img { transform: scale(1.04); }
.featured-card-body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.featured-card-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ochre-deep);
}
.featured-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
}
.featured-card-desc {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 4px 0 16px;
}
.featured-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.featured-card-price {
  font-size: 14px;
  color: var(--ink-soft);
}
.featured-card-price strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
}
.featured-card-cta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 99px;
  border: 1.5px solid var(--ink);
  transition: all 0.2s;
}
.featured-card-cta:hover {
  background: var(--ink);
  color: var(--off-white);
}

/* Protocol teaser */
.protocol-teaser {
  background: var(--cream-deep);
  padding: 96px 0;
}
.protocol-teaser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) {
  .protocol-teaser-grid { grid-template-columns: 1fr; gap: 36px; }
}
.protocol-teaser-image {
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 6px;
}
.protocol-teaser-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.protocol-teaser-content h2 em {
  color: var(--moss);
  font-style: italic;
}
.protocol-teaser-steps {
  list-style: none;
  margin: 28px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.protocol-teaser-steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.protocol-teaser-steps li:last-child { border-bottom: none; }
.protocol-teaser-step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--moss);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}
.protocol-teaser-step-body strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.protocol-teaser-step-body span {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Testimonial quote cards */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .quote-grid { grid-template-columns: 1fr; }
}
.quote-card {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.quote-stars {
  color: var(--ochre);
  letter-spacing: 2px;
  font-size: 15px;
}
.quote-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.quote-meta {
  margin-top: auto;
  font-size: 12px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.quote-meta strong {
  color: var(--ink);
  font-weight: 600;
}

/* Journal teaser grid */
.journal-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .journal-teaser-grid { grid-template-columns: 1fr; }
}
.journal-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s;
}
.journal-card:hover { transform: translateY(-3px); }
.journal-card-image {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 16px;
  background: var(--sand);
}
.journal-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s;
}
.journal-card:hover .journal-card-image img { transform: scale(1.04); }
.journal-card-meta {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ochre-deep);
  margin-bottom: 6px;
}
.journal-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--ink);
}
.journal-card p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

/* Section helper for centered button */
.section-cta {
  text-align: center;
  margin-top: 40px;
}

/* ==================== INNER PAGE HERO ==================== */
.page-hero {
  padding: 96px 0 64px;
  text-align: center;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}
.page-hero-eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ochre-deep);
  margin-bottom: 16px;
}
.page-hero h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
  color: var(--ink);
}
.page-hero h1 em {
  font-style: italic;
  color: var(--moss);
  font-weight: 500;
}
.page-hero-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto;
}

/* ==================== STORY / LONG-FORM ==================== */
.story-section {
  padding: 96px 0;
}
.story-section.alt { background: var(--cream-soft); }
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.story-grid.reverse { direction: rtl; }
.story-grid.reverse > * { direction: ltr; }
@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; gap: 36px; }
  .story-grid.reverse { direction: ltr; }
}
.story-image {
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 6px;
  background: var(--sand);
}
.story-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.story-content h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(28px, 3.8vw, 42px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  color: var(--ink);
}
.story-content h2 em { font-style: italic; color: var(--moss); }
.story-content p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.story-content p:last-child { margin-bottom: 0; }

/* Pull quote */
.pull-quote {
  background: var(--cream-deep);
  padding: 56px 32px;
  border-radius: 6px;
  text-align: center;
  margin: 56px auto;
  max-width: 720px;
}
.pull-quote p {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.35;
  font-weight: 400;
  color: var(--ink);
  font-style: italic;
  margin: 0 0 16px;
}
.pull-quote .attribution {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ochre-deep);
}

/* ==================== PROTOCOL PAGE ==================== */
.protocol-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 56px 0;
}
@media (max-width: 900px) {
  .protocol-pillars { grid-template-columns: 1fr; gap: 24px; }
}
.protocol-pillar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 36px 28px;
}
.protocol-pillar-num {
  display: inline-flex;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--moss);
  color: var(--cream);
  font-size: 14px;
  font-weight: 600;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.protocol-pillar h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  color: var(--ink);
}
.protocol-pillar p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Big stat row */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
  margin: 72px 0;
  padding: 56px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 768px) {
  .stat-row { grid-template-columns: 1fr; gap: 36px; padding: 40px 0; }
}
.stat-num {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 500;
  color: var(--moss);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 10px;
}
.stat-label {
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 280px;
  margin: 0 auto;
  line-height: 1.45;
}

/* ==================== JOURNAL PAGE ==================== */
.journal-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
  margin-top: 40px;
}
@media (max-width: 900px) {
  .journal-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .journal-list { grid-template-columns: 1fr; }
}
.journal-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}
.journal-pill {
  background: transparent;
  border: 1.5px solid var(--border-strong);
  color: var(--ink-soft);
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}
.journal-pill:hover, .journal-pill.active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

/* ==================== QUIZ ==================== */
.quiz-wrap {
  max-width: 640px;
  margin: 80px auto;
  padding: 56px 40px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.quiz-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 36px;
}
.quiz-progress-dot {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  transition: background 0.3s;
}
.quiz-progress-dot.done { background: var(--moss); }
.quiz-progress-dot.active { background: var(--moss); }
.quiz-step {
  display: none;
}
.quiz-step.active { display: block; }
.quiz-question {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 32px;
  color: var(--ink);
}
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.quiz-option {
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 18px 22px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}
.quiz-option:hover {
  border-color: var(--moss);
  background: var(--white);
}
.quiz-option.selected {
  border-color: var(--moss);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(115, 128, 99, 0.12);
}
.quiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
}
.quiz-back {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}
.quiz-result {
  text-align: center;
}
.quiz-result-eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--moss);
  margin-bottom: 12px;
}
.quiz-result h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: var(--ink);
}
.quiz-result p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.quiz-save-protocol {
  margin-top: 48px;
  padding: 28px 24px;
  background: var(--cream-deep);
  border-radius: 12px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.quiz-save-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ochre-deep);
  margin-bottom: 8px;
}
.quiz-save-protocol h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 16px;
}
.quiz-lead-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quiz-lead-form input[type="text"],
.quiz-lead-form input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--white);
  outline: none;
}
.quiz-lead-form input:focus { border-color: var(--ochre-deep); }
.quiz-lead-form button[type="submit"] {
  background: var(--btn-primary);
  color: var(--off-white);
  border: none;
  padding: 12px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 4px;
}
.quiz-lead-note {
  font-size: 10.5px;
  color: var(--ink-soft);
  margin-top: 6px;
  letter-spacing: 0.01em;
}
.quiz-save-success { padding: 12px 0; }
.quiz-save-success-icon {
  font-size: 32px;
  color: var(--moss);
  margin-bottom: 6px;
}
.quiz-save-success h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 8px;
}
.quiz-save-success p {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ==================== CART (stub) ==================== */
.cart-page {
  padding: 80px 0 120px;
  min-height: 60vh;
}
.cart-empty {
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}
.cart-empty-icon {
  font-size: 48px;
  margin-bottom: 20px;
  opacity: 0.5;
}
.cart-empty h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.cart-empty p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.cart-empty-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==================== 404 ==================== */
.not-found {
  padding: 120px 0;
  text-align: center;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.not-found-eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ochre-deep);
  margin-bottom: 16px;
}
.not-found h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 24px;
  color: var(--ink);
}
.not-found p {
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 32px;
}

/* ==================== SHOP COLLECTION ==================== */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 900px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .shop-grid { grid-template-columns: 1fr; }
}
.shop-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
}
.shop-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.shop-card-image {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--sand);
}
.shop-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s;
}
.shop-card:hover .shop-card-image img { transform: scale(1.04); }
.shop-card-body {
  padding: 20px 22px 24px;
}
.shop-card-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ochre-deep);
  margin-bottom: 6px;
}
.shop-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink);
}
.shop-card-desc {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 12px;
}
.shop-card-price {
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
}

.shop-category {
  margin-bottom: 64px;
}
.shop-category-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.shop-category-header h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
.shop-category-header .count {
  font-size: 13px;
  color: var(--ink-soft);
}

/* ==================== CART DRAWER ==================== */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(81, 76, 69, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 1000;
}
.drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--cream);
  z-index: 1001;
  transform: translateX(110%);
  transition: transform 0.25s ease-out;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(81, 76, 69, 0.12);
}
.cart-drawer.open { transform: translateX(0); }

.cart-drawer-header {
  padding: 22px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-drawer-header h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--ink);
  margin: 0;
}
.cart-drawer-header h3 span { font-weight: 500; color: var(--ink-soft); }
.cart-drawer-close {
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--ink-soft);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}
.cart-drawer-close:hover { background: var(--cream-deep); color: var(--ink); }

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 24px;
}
.cart-drawer-empty {
  text-align: center;
  padding: 72px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.cart-drawer-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cream-deep);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-drawer-empty p {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
  margin: 0;
}
.cart-drawer-empty-cta {
  display: inline-block;
  background: var(--btn-primary);
  color: var(--off-white);
  padding: 12px 22px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s;
}
.cart-drawer-empty-cta:hover { background: var(--btn-primary-hover); }

.cart-line {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.cart-line:last-child { border-bottom: none; }
.cart-line-image {
  width: 56px;
  height: 56px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--sand);
}
.cart-line-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cart-line-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cart-line-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.cart-line-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}
.cart-line-variant {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.cart-line-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  gap: 12px;
}
.cart-line-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  overflow: hidden;
}
.cart-line-qty button {
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-line-qty button:hover { background: var(--cream-deep); }
.cart-line-qty span {
  min-width: 26px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.cart-line-pricing {
  text-align: right;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cart-line-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.cart-line-strike {
  font-size: 12px;
  color: var(--ink-soft);
  text-decoration: line-through;
}
.cart-line-remove {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.cart-line-remove:hover { color: var(--ink); background: var(--cream-deep); }

.cart-drawer-footer {
  padding: 20px 24px 28px;
  border-top: 1px solid var(--border);
  background: var(--off-white);
}
.cart-drawer-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.cart-drawer-subtotal .label {
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.cart-drawer-subtotal .amount {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}
.cart-drawer-cta {
  display: block;
  width: 100%;
  background: var(--btn-primary);
  color: var(--off-white);
  border: none;
  padding: 16px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  text-align: center;
}
.cart-drawer-cta:hover { background: var(--btn-primary-hover); }
.cart-drawer-view {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==================== TOAST ==================== */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--ink);
  color: var(--cream);
  padding: 14px 22px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  z-index: 1100;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 12px 32px -8px rgba(81, 76, 69, 0.4);
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast-check {
  color: var(--moss);
  font-weight: 700;
  font-size: 15px;
}

/* ==================== CHECKOUT MODAL ==================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(81, 76, 69, 0.55);
  opacity: 0;
  pointer-events: none;
  z-index: 1200;
  transition: opacity 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.modal {
  background: var(--cream);
  border-radius: 8px;
  width: 560px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95);
  transition: transform 0.25s;
  box-shadow: 0 32px 80px -16px rgba(81, 76, 69, 0.35);
}
.modal-overlay.open .modal { transform: scale(1); }
.modal-header {
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-header h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.modal-close {
  background: transparent;
  border: none;
  font-size: 22px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 8px;
}
.modal-body {
  padding: 24px 28px;
}
.modal-section {
  margin-bottom: 24px;
}
.modal-section h4 {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.modal-line {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
  color: var(--ink);
}
.modal-line.total {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 14px;
  font-size: 16px;
  font-weight: 600;
}
.modal-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.modal-fields input, .modal-fields select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--white);
  outline: none;
}
.modal-fields .full { grid-column: 1 / -1; }
.modal-footer {
  padding: 20px 28px 28px;
  border-top: 1px solid var(--border);
  background: var(--off-white);
}
.modal-cta {
  display: block;
  width: 100%;
  background: var(--btn-primary);
  color: var(--off-white);
  border: none;
  padding: 16px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}
.modal-cta:hover { background: var(--btn-primary-hover); }
.modal-demo-note {
  text-align: center;
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 10px;
  font-style: italic;
}
.modal-success {
  text-align: center;
  padding: 24px 0;
}
.modal-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--moss);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 26px;
}
.modal-success h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 10px;
  color: var(--ink);
}
.modal-success p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 360px;
  margin: 0 auto 24px;
}

/* ==================== PRESS STRIP ==================== */
.press-strip {
  padding: 36px 0;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}
.press-strip-label {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.press-logos {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px 48px;
  opacity: 0.7;
}
.press-logo {
  font-family: 'Times New Roman', serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.press-logo.sans {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 15px;
}
.press-logo.script {
  font-family: 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
}

/* ==================== VET ADVISOR ==================== */
.vet-advisor {
  padding: 96px 0;
  background: var(--cream-soft);
}
.vet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 900px) {
  .vet-grid { grid-template-columns: 1fr; }
}
.vet-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px 28px;
  text-align: center;
}
.vet-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin: 0 auto 16px;
  background: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
}
.vet-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.vet-credentials {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ochre-deep);
  margin-bottom: 14px;
}
.vet-bio {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ==================== MOBILE NAV ==================== */
.nav-hamburger {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}
.nav-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.25s, opacity 0.25s;
}
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--cream);
  z-index: 999;
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1);
  display: flex;
  flex-direction: column;
  padding: 80px 32px 32px;
  overflow-y: auto;
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu-close {
  position: absolute;
  top: 22px;
  right: 24px;
  background: transparent;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--ink);
}
.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: static;
  background: transparent;
  border: none;
  backdrop-filter: none;
  padding: 0;
}
.mobile-menu-list a {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.mobile-menu-list a:hover { color: var(--moss); }
.mobile-menu-footer {
  margin-top: auto;
  padding-top: 32px;
  font-size: 12px;
  color: var(--ink-soft);
}
@media (max-width: 768px) {
  .nav-hamburger { display: flex; }
  nav .nav-links { display: none; }
  nav .nav-cart { display: none; }
  .mobile-menu-cart {
    margin-top: 24px;
    padding: 16px;
    background: var(--cream-deep);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
  }
}
@media (min-width: 769px) {
  .mobile-menu { display: none !important; }
}

/* Mobile cart drawer adjustments */
@media (max-width: 480px) {
  .cart-drawer { width: 100vw; }
}

/* ==================== ARTICLE PAGE ==================== */
.article-hero {
  padding: 56px 0 24px;
  text-align: center;
  background: var(--cream);
}
.article-meta {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ochre-deep);
  margin-bottom: 16px;
}
.article-hero h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.025em;
  margin: 0 auto 16px;
  max-width: 760px;
  color: var(--ink);
}
.article-hero h1 em { font-style: italic; color: var(--moss); }
.article-dek {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto 28px;
}
.article-byline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 40px;
}
.article-byline .author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.article-cover {
  max-width: 980px;
  margin: 0 auto 56px;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 8px;
  background: var(--sand);
}
.article-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px 80px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}
.article-body h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 56px 0 16px;
  color: var(--ink);
}
.article-body h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 600;
  margin: 36px 0 12px;
  color: var(--ink);
}
.article-body p {
  margin-bottom: 22px;
  color: var(--text-charcoal);
}
.article-body p strong { color: var(--ink); font-weight: 600; }
.article-body ul, .article-body ol {
  margin: 0 0 22px 24px;
  padding: 0;
  color: var(--text-charcoal);
}
.article-body li { margin-bottom: 10px; line-height: 1.6; }
.article-body blockquote {
  border-left: 3px solid var(--moss);
  padding: 8px 0 8px 24px;
  margin: 36px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  line-height: 1.45;
  font-style: italic;
  color: var(--ink);
}
.article-body a {
  color: var(--moss);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==================== REVIEWS PAGE ==================== */
.reviews-summary {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  align-items: start;
  padding: 56px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 56px;
}
@media (max-width: 768px) {
  .reviews-summary { grid-template-columns: 1fr; gap: 36px; }
}
.reviews-big {
  text-align: center;
}
.reviews-big-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 72px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.reviews-big-stars {
  color: var(--ochre);
  letter-spacing: 4px;
  font-size: 20px;
  margin-bottom: 8px;
}
.reviews-big-count {
  font-size: 13px;
  color: var(--ink-soft);
}
.reviews-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reviews-bar-row {
  display: grid;
  grid-template-columns: 36px 1fr 40px;
  gap: 16px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-soft);
}
.reviews-bar-track {
  height: 8px;
  background: var(--cream-deep);
  border-radius: 4px;
  overflow: hidden;
}
.reviews-bar-fill {
  height: 100%;
  background: var(--ochre);
  border-radius: 4px;
}

.reviews-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .reviews-grid { grid-template-columns: 1fr; }
}
.review-card {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.review-card-stars {
  color: var(--ochre);
  letter-spacing: 1.5px;
  font-size: 14px;
}
.review-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--moss);
}
.review-card-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.review-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.review-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--ink-soft);
}
.review-card-foot strong {
  color: var(--ink);
  font-weight: 600;
}

/* ==================== COMPARE PAGE ==================== */
.compare-grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 0;
  margin: 48px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
}
@media (max-width: 768px) {
  .compare-grid { grid-template-columns: 130px 1fr 1fr; font-size: 13px; }
  .compare-cell { padding: 14px 12px; }
  .compare-cell.header { font-size: 15px; padding-top: 18px; padding-bottom: 18px; }
  .compare-cell.header img { max-width: 80px; margin-bottom: 8px; }
}
@media (max-width: 380px) {
  .compare-grid { grid-template-columns: 110px 1fr 1fr; font-size: 12px; }
  .compare-cell { padding: 12px 8px; }
}
.compare-cell {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--ink);
}
.compare-cell.row-label {
  color: var(--ink-soft);
  font-weight: 600;
  background: var(--off-white);
}
.compare-cell.header {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  padding-top: 28px;
  padding-bottom: 28px;
}
.compare-cell.header img {
  display: block;
  width: 100%;
  max-width: 140px;
  margin: 0 auto 12px;
  border-radius: 4px;
}
.compare-cell.recommended {
  background: rgba(115, 128, 99, 0.06);
}
.compare-grid > div:nth-last-child(-n+3) { border-bottom: none; }
.compare-check {
  color: var(--moss);
  font-weight: 700;
  font-size: 16px;
}
.compare-x {
  color: var(--ink-soft);
  opacity: 0.5;
}

/* ==================== EMAIL CAPTURE POPUP ==================== */
.email-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(81, 76, 69, 0.55);
  opacity: 0;
  pointer-events: none;
  z-index: 1300;
  transition: opacity 0.35s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.email-popup-overlay.show { opacity: 1; pointer-events: auto; }
.email-popup {
  background: var(--cream);
  border-radius: 8px;
  width: 480px;
  max-width: 100%;
  display: grid;
  grid-template-columns: 220px 1fr;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 32px 80px -16px rgba(81, 76, 69, 0.4);
}
.email-popup-overlay.show .email-popup { transform: translateY(0); }
.email-popup-image {
  background: var(--sand);
  background-image: linear-gradient(135deg, rgba(81,76,69,0.0) 50%, rgba(81,76,69,0.35) 100%), url('/img/core-bundle-hero.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.email-popup-gift {
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(81,76,69,0.35));
  animation: navan-gift-bob 3s ease-in-out infinite;
}
@keyframes navan-gift-bob {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50%     { transform: translateY(-6px) rotate(4deg); }
}
.email-popup-body {
  padding: 28px;
  position: relative;
}
.email-popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 20px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 8px;
}
.email-popup-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ochre-deep);
  margin-bottom: 10px;
}
.email-popup h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 8px;
}
.email-popup p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.email-popup form { display: flex; flex-direction: column; gap: 8px; }
.email-popup input[type="email"],
.email-popup input[type="tel"] {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--white);
  outline: none;
}
.email-popup input[type="email"]:focus,
.email-popup input[type="tel"]:focus {
  border-color: var(--ochre-deep);
}
.email-popup-sms-consent {
  font-size: 10px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 4px 0 0;
  letter-spacing: 0.01em;
}
.email-popup button[type="submit"] {
  background: var(--btn-primary);
  color: var(--off-white);
  border: none;
  padding: 12px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.email-popup .no-thanks {
  margin-top: 8px;
  background: transparent;
  border: none;
  font-size: 11px;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 540px) {
  .email-popup-overlay { padding: 16px; align-items: flex-end; }
  .email-popup {
    grid-template-columns: 1fr;
    width: 100%;
    border-radius: 12px 12px 8px 8px;
    transform: translateY(40px);
  }
  .email-popup-image { height: 120px; }
  .email-popup-gift { font-size: 52px; }
  .email-popup-body { padding: 22px 20px 18px; }
  .email-popup h3 { font-size: 19px; }
}

/* ==================== SOCIAL PROOF TICKER ==================== */
.social-proof-toast {
  position: fixed;
  bottom: 24px;
  left: 24px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 32px -8px rgba(81, 76, 69, 0.2);
  z-index: 900;
  max-width: 320px;
  transform: translateX(-120%);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.social-proof-toast.show { transform: translateX(0); }
.social-proof-img {
  width: 40px; height: 40px;
  border-radius: 6px;
  background: var(--sand);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.social-proof-content {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink);
}
.social-proof-content strong { font-weight: 600; }
.social-proof-time {
  display: block;
  font-size: 10.5px;
  color: var(--ink-soft);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
@media (max-width: 480px) {
  .social-proof-toast { left: 12px; right: 12px; max-width: none; bottom: 90px; }
}

/* ==================== SAVINGS CALCULATOR ==================== */
.savings-calc {
  margin-top: 32px;
  padding: 24px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--cream-soft);
}
.savings-calc-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ochre-deep);
  margin-bottom: 6px;
}
.savings-calc h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 16px;
}
.savings-calc-slider-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.savings-calc-label {
  font-size: 13px;
  color: var(--ink-soft);
  min-width: 95px;
}
.savings-calc-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--border-strong);
  border-radius: 4px;
  outline: none;
}
.savings-calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--moss);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.savings-calc-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--moss);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.savings-calc-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  min-width: 70px;
  text-align: right;
}
.savings-calc-results {
  margin-top: 18px;
  padding: 18px;
  background: var(--white);
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.savings-calc-result {
  text-align: center;
}
.savings-calc-result-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--moss);
  line-height: 1;
  margin-bottom: 6px;
}
.savings-calc-result-label {
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.35;
}
.savings-calc-asterisk {
  color: #b14b3a;
  font-size: 0.55em;
  font-weight: 600;
  margin-left: 2px;
  vertical-align: super;
  line-height: 0;
}
.savings-calc-footnote {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.06);
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink-soft);
  font-style: italic;
}
.savings-calc-footnote sup {
  color: #b14b3a;
  font-style: normal;
  font-weight: 600;
  margin-right: 2px;
}

/* ==================== TRUST BADGES ROW ==================== */
.trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 24px 0 8px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 600px) {
  .trust-row { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
.trust-badge {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.trust-badge-icon {
  font-size: 18px;
  color: var(--moss);
  font-weight: 700;
}
.trust-badge-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.trust-badge-sub {
  font-size: 10px;
  color: var(--ink-soft);
  line-height: 1.3;
}

/* ==================== ACCOUNT PORTAL ==================== */
.account-page {
  padding: 56px 0 96px;
  min-height: 60vh;
  background: var(--cream-soft);
}
.account-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 768px) {
  .account-grid { grid-template-columns: 1fr; }
}
.account-sidebar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 0;
  position: sticky;
  top: 100px;
}
.account-sidebar-user {
  padding: 0 20px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.account-sidebar-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.account-sidebar-email {
  font-size: 12px;
  color: var(--ink-soft);
}
.account-nav a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: all 0.15s;
}
.account-nav a:hover {
  color: var(--ink);
  background: var(--cream-soft);
}
.account-nav a.active {
  color: var(--ink);
  border-left-color: var(--moss);
  background: var(--cream-soft);
  font-weight: 600;
}
.account-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px 28px;
  margin-bottom: 20px;
}
.account-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}
.account-card-meta {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.account-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 600px) {
  .account-stat-row { grid-template-columns: 1fr; gap: 12px; }
}
.account-stat {
  padding: 16px;
  background: var(--cream-soft);
  border-radius: 6px;
  text-align: center;
}
.account-stat-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--moss);
  line-height: 1;
  margin-bottom: 6px;
}
.account-stat-label {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.account-subscription {
  border: 1.5px solid var(--moss);
  border-radius: 6px;
  padding: 20px;
  background: var(--cream);
}
.account-subscription-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.account-subscription-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.account-subscription-tier {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.account-subscription-status {
  background: var(--moss);
  color: var(--cream);
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.account-subscription-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink);
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.account-subscription-row .label { color: var(--ink-soft); }
.account-subscription-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.account-btn {
  background: transparent;
  border: 1.5px solid var(--border-strong);
  color: var(--ink);
  padding: 8px 14px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.account-btn:hover {
  border-color: var(--ink);
  background: var(--cream-soft);
}
.account-btn.primary {
  background: var(--btn-primary);
  color: var(--off-white);
  border-color: var(--btn-primary);
}

/* ==================== FOR-VETS PAGE ==================== */
.vets-hero {
  background: linear-gradient(135deg, var(--moss-deep) 0%, var(--text-charcoal) 100%);
  color: var(--cream);
  padding: 96px 0 80px;
}
.vets-hero .page-hero-eyebrow { color: var(--sand); }
.vets-hero h1 { color: var(--cream); }
.vets-hero h1 em { color: var(--sand); }
.vets-hero .page-hero-sub { color: rgba(254, 249, 245, 0.78); }
.vets-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 40px 0;
}
@media (max-width: 900px) { .vets-cards { grid-template-columns: 1fr; } }
.vets-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px;
}
.vets-card-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(115, 128, 99, 0.12);
  color: var(--moss);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}
.vets-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink);
}
.vets-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.vets-form {
  max-width: 580px;
  margin: 0 auto;
  padding: 32px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.vets-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.vets-form-row.full { grid-template-columns: 1fr; }
.vets-form input, .vets-form textarea, .vets-form select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--cream-soft);
  outline: none;
}
.vets-form textarea { min-height: 100px; resize: vertical; }
.vets-form button {
  width: 100%;
  background: var(--btn-primary);
  color: var(--off-white);
  border: none;
  padding: 14px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 8px;
}

/* ==================== REFER PAGE ==================== */
.refer-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) { .refer-hero-grid { grid-template-columns: 1fr; } }
.refer-link-box {
  background: var(--cream-soft);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 28px;
  margin-top: 24px;
}
.refer-link-box-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ochre-deep);
  margin-bottom: 10px;
}
.refer-link-field {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.refer-link-field input {
  flex: 1;
  padding: 14px 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  background: var(--white);
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
}
.refer-link-field button {
  background: var(--btn-primary);
  color: var(--off-white);
  border: none;
  padding: 0 22px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
}
.refer-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}
.refer-stat {
  text-align: center;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.refer-stat-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--moss);
  margin-bottom: 2px;
}
.refer-stat-label {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

/* ==================== PRESS PAGE ==================== */
.press-quote-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 40px 0;
}
@media (max-width: 700px) { .press-quote-grid { grid-template-columns: 1fr; } }
.press-quote-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.press-quote-outlet {
  font-family: 'Times New Roman', serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.press-quote-outlet.sans {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 15px;
}
.press-quote-body {
  font-family: 'Montserrat', sans-serif;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink);
  font-style: italic;
  margin: 0;
}
.press-quote-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--ink-soft);
}
.press-quote-meta a {
  color: var(--moss);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==================== CAREERS PAGE ==================== */
.career-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 32px 0;
}
.career-item {
  display: grid;
  grid-template-columns: 1.5fr 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
@media (max-width: 700px) {
  .career-item { grid-template-columns: 1fr; gap: 8px; }
}
.career-item:hover { background: var(--cream-soft); }
.career-role h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
}
.career-role .team {
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.career-meta { font-size: 13px; color: var(--ink-soft); }
.career-arrow {
  color: var(--moss);
  font-size: 18px;
}

/* ==================== SUSTAINABILITY ==================== */
.sus-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 48px 0;
}
@media (max-width: 700px) { .sus-pillars { grid-template-columns: 1fr; } }
.sus-pillar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
}
.sus-pillar-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--moss);
  margin-bottom: 8px;
}
.sus-pillar h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sus-pillar p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ==================== GIFT PAGE ==================== */
.gift-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 32px 0;
}
@media (max-width: 700px) { .gift-card-grid { grid-template-columns: repeat(2, 1fr); } }
.gift-card-option {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 24px 18px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.gift-card-option:hover, .gift-card-option.selected {
  border-color: var(--moss);
  background: var(--cream-soft);
}
.gift-card-amount {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.gift-card-tag {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ==================== BUNDLE CUSTOMIZER ==================== */
.builder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin: 40px 0;
}
@media (max-width: 900px) { .builder-grid { grid-template-columns: 1fr; } }
.builder-protein-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.builder-protein {
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  cursor: pointer;
  text-align: center;
  background: var(--white);
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.builder-protein:hover { border-color: var(--border-strong); }
.builder-protein.selected {
  border-color: var(--moss);
  background: var(--cream-soft);
  box-shadow: 0 0 0 3px rgba(115, 128, 99, 0.14);
}
.builder-protein-img {
  width: 80px; height: 80px;
  border-radius: 6px;
  background: var(--sand);
  background-size: cover;
  background-position: center;
}
.builder-protein-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.builder-protein-price {
  font-size: 12px;
  color: var(--ink-soft);
}
.builder-summary {
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px;
  position: sticky;
  top: 100px;
}
.builder-summary h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--ink);
}
.builder-selected-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.builder-selected-list li {
  font-size: 13.5px;
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.builder-selected-list li:last-child { border-bottom: none; }
.builder-empty {
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
}
.builder-totals {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}
.builder-totals .label { font-size: 13px; color: var(--ink-soft); }
.builder-totals .amount {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}

/* ==================== FEATURED JOURNAL POST HERO ==================== */
.journal-featured {
  background: var(--cream-deep);
  padding: 40px 0;
  margin-bottom: 24px;
}
.journal-featured-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
@media (max-width: 900px) { .journal-featured-card { grid-template-columns: 1fr; gap: 24px; } }
.journal-featured-image {
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 8px;
  background: var(--sand);
}
.journal-featured-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s;
}
.journal-featured-card:hover .journal-featured-image img { transform: scale(1.03); }
.journal-featured-content .meta {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ochre-deep);
  margin-bottom: 12px;
}
.journal-featured-content h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 16px;
  color: var(--ink);
}
.journal-featured-content h2 em { font-style: italic; color: var(--moss); }
.journal-featured-content p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.journal-featured-byline {
  font-size: 13px;
  color: var(--ink-soft);
}
.journal-featured-byline strong { color: var(--ink); }

/* ==================== STICKY PROMO BAR ==================== */
.promo-bar {
  background: var(--ink);
  color: var(--cream);
  padding: 9px 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 200;
}
.promo-bar strong { font-weight: 700; color: var(--sand); }
.promo-bar .countdown {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--sand);
  margin-left: 6px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.promo-bar .close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: rgba(254,249,245,0.5);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
}
.promo-bar .close:hover { color: var(--cream); }

/* ==================== EXPRESS CHECKOUT ==================== */
.express-checkout {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.express-checkout-btn {
  height: 44px;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity 0.15s, transform 0.15s;
}
.express-checkout-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.express-checkout-btn.apple {
  background: #000;
  color: #fff;
}
.express-checkout-btn.shop {
  background: #5A31F4;
  color: #fff;
}
.express-checkout-divider {
  display: flex;
  align-items: center;
  margin: 18px 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  gap: 12px;
}
.express-checkout-divider::before, .express-checkout-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ==================== CART CROSS-SELL ==================== */
.cart-cross-sell {
  margin-top: 16px;
  padding: 16px;
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.cart-cross-sell-title {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.cart-cross-sell-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
}
.cart-cross-sell-img {
  width: 56px;
  height: 56px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  background-color: var(--sand);
}
.cart-cross-sell-info h5 {
  font-family: 'Montserrat', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--ink);
}
.cart-cross-sell-info span {
  font-size: 11.5px;
  color: var(--ink-soft);
}
.cart-cross-sell-add {
  background: var(--white);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.cart-cross-sell-add:hover {
  background: var(--ink);
  color: var(--off-white);
}

/* ==================== SCROLL REVEAL ==================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==================== SVG ICON SYSTEM ==================== */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon.large { width: 28px; height: 28px; stroke-width: 1.4; }

.value-pillar-icon.svg-icon {
  background: rgba(115, 128, 99, 0.12);
}
.value-pillar-icon.svg-icon .icon {
  width: 22px; height: 22px;
  color: var(--moss);
}

.protocol-pillar-num.svg-icon {
  background: rgba(115, 128, 99, 0.12);
  color: var(--moss);
}
.protocol-pillar-num.svg-icon .icon {
  width: 18px; height: 18px;
}

/* ==================== TRANSFORMATIONS PAGE ==================== */
.transformation {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 96px;
}
.transformation.reverse { direction: rtl; }
.transformation.reverse > * { direction: ltr; }
@media (max-width: 900px) {
  .transformation { grid-template-columns: 1fr; gap: 36px; }
  .transformation.reverse { direction: ltr; }
}
.transformation-image-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.transformation-before, .transformation-after {
  aspect-ratio: 3/4;
  border-radius: 8px;
  overflow: hidden;
  background: var(--sand);
  position: relative;
}
.transformation-before img, .transformation-after img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.transformation-before::before {
  content: 'BEFORE';
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--ink);
  color: var(--cream);
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  z-index: 2;
}
.transformation-after::before {
  content: 'DAY 90';
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--moss);
  color: var(--cream);
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  z-index: 2;
}
.transformation-content .eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ochre-deep);
  margin-bottom: 12px;
}
.transformation-content h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.transformation-content h2 em { font-style: italic; color: var(--moss); }
.transformation-content p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.transformation-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--ink-soft);
}
.transformation-meta strong { color: var(--ink); font-weight: 600; }
.transformation-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 24px 0;
}
.transformation-stat {
  padding: 14px;
  background: var(--cream-soft);
  border-radius: 6px;
  text-align: center;
}
.transformation-stat-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--moss);
  letter-spacing: -0.01em;
}
.transformation-stat-label {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* ==================== FIND-A-VET ==================== */
.vet-map-wrap {
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  margin: 32px 0;
}
.vet-map {
  position: relative;
  aspect-ratio: 16/9;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(81, 76, 69, 0.04),
      rgba(81, 76, 69, 0.04) 1px,
      transparent 1px,
      transparent 28px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(81, 76, 69, 0.04),
      rgba(81, 76, 69, 0.04) 1px,
      transparent 1px,
      transparent 28px
    ),
    var(--cream);
  border-radius: 8px;
  overflow: hidden;
}
.vet-pin {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--moss);
  border: 3px solid var(--cream);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(115, 128, 99, 0.3);
  transition: transform 0.15s;
  z-index: 2;
}
.vet-pin:hover { transform: translate(-50%, -50%) scale(1.4); }
.vet-pin.featured {
  background: var(--terracotta);
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 4px rgba(202, 133, 117, 0.25);
}
.vet-search {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin-bottom: 24px;
}
.vet-search input {
  flex: 1;
  padding: 14px 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  background: var(--white);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
}
.vet-search button {
  background: var(--btn-primary);
  color: var(--off-white);
  border: none;
  padding: 0 22px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
}
.vet-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 40px;
}
@media (max-width: 700px) { .vet-list { grid-template-columns: 1fr; } }
.vet-list-card {
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vet-list-card h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.vet-list-card .city {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.vet-list-card .specialties {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 6px;
}
.vet-list-card .visit-link {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--moss);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

/* ==================== COOKIE CONSENT BANNER ==================== */
.cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  max-width: 720px;
  margin: 0 auto;
  background: var(--ink);
  color: rgba(254, 249, 245, 0.92);
  border-radius: 8px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  z-index: 1050;
  box-shadow: 0 16px 48px -8px rgba(81, 76, 69, 0.4);
  transform: translateY(120%);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner-text {
  font-size: 13px;
  line-height: 1.5;
}
.cookie-banner-text a {
  color: var(--sand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.cookie-banner button {
  background: transparent;
  border: 1.5px solid rgba(254, 249, 245, 0.3);
  color: var(--cream);
  padding: 9px 16px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.cookie-banner button:hover {
  border-color: var(--cream);
  background: rgba(254, 249, 245, 0.08);
}
.cookie-banner button.primary {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}
.cookie-banner button.primary:hover {
  background: var(--off-white);
  border-color: var(--off-white);
}
@media (max-width: 600px) {
  .cookie-banner {
    grid-template-columns: 1fr;
    gap: 12px;
    bottom: 12px;
    left: 12px;
    right: 12px;
    padding: 16px 18px;
  }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions button { flex: 1; }
}

/* ==================== ACCOUNT AUTH GATE ==================== */
.account-auth {
  max-width: 440px;
  margin: 80px auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 40px 36px;
  text-align: center;
  box-shadow: var(--shadow);
}
.account-auth-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ochre-deep);
  margin-bottom: 14px;
}
.account-auth h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
  color: var(--ink);
}
.account-auth p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.account-auth form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.account-auth input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--cream-soft);
  outline: none;
}
.account-auth input:focus {
  border-color: var(--moss);
  background: var(--white);
}
.account-auth button[type="submit"] {
  width: 100%;
  background: var(--btn-primary);
  color: var(--off-white);
  border: none;
  padding: 14px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.account-auth-note {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 14px;
  margin-bottom: 0;
}
.account-auth-note a { color: var(--moss); text-decoration: underline; }
.account-magic-sent {
  text-align: center;
  padding: 20px 0;
}
.account-magic-sent-icon {
  font-size: 36px;
  color: var(--moss);
  margin-bottom: 14px;
}

/* ==================== EXPRESS BUTTON DEMO LABEL ==================== */
.express-demo-label {
  display: block;
  text-align: center;
  font-size: 10px;
  color: var(--ink-soft);
  margin-top: 6px;
  letter-spacing: 0.06em;
  font-weight: 500;
  font-style: italic;
}

/* ==================== BUILD YOUR BUNDLE UI FEEDBACK ==================== */
.builder-protein.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.builder-limit-msg {
  background: rgba(202, 133, 117, 0.08);
  border: 1px solid rgba(202, 133, 117, 0.3);
  color: var(--terracotta);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  margin-top: 12px;
  text-align: center;
  font-weight: 500;
  display: none;
}
.builder-limit-msg.show { display: block; }

/* ==================== EDITORIAL BANNER SECTIONS (PDP enhancements) ==================== */
.protein-breakdown .protein-banners img {
  box-shadow: 0 8px 24px rgba(81, 76, 69, 0.06);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s;
}
.protein-breakdown .protein-banners img:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(81, 76, 69, 0.1);
}
@media (max-width: 768px) {
  .protein-breakdown { padding: 56px 0 !important; }
  .protein-breakdown .section-header h2 { font-size: 26px; }
  .protein-breakdown .protein-banners { gap: 16px !important; }
  .benefits-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .benefits-grid h2 { font-size: 26px !important; }
}

/* (Bag photos are now SQUARE 1200x1200 crops with bag at 95% height — no special CSS needed,
   default object-fit: cover displays them perfectly in square containers.) */

/* ==================== SINGLE-PROTEIN CROSS-SELL GRID ==================== */
.single-protein-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(81, 76, 69, 0.08);
}
@media (max-width: 768px) {
  .single-proteins-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .single-proteins-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ==================== GUARANTEE CALLOUT (PDP — under ATC) ==================== */
.guarantee-callout {
  margin: 18px 0 24px;
  padding: 18px 20px;
  background: linear-gradient(135deg, #f5ede0 0%, #ede4d3 100%);
  border-left: 4px solid var(--moss);
  border-radius: 4px;
}
.guarantee-callout-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  margin-bottom: 6px;
  text-transform: lowercase;
}
.guarantee-callout-body {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 768px) {
  .guarantee-callout { padding: 14px 16px; }
  .guarantee-callout-body { font-size: 12px; }
}

/* ==================== PROTEIN SWITCHER PILL BAR (single-protein PDPs) ==================== */
.protein-switcher {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  margin-bottom: 8px;
  background: var(--cream);
  border-radius: 8px;
  flex-wrap: wrap;
}
.protein-switcher-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
}
.protein-switcher-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.protein-pill {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.protein-pill:hover {
  background: var(--cream-deep);
  border-color: var(--border-strong);
}
.protein-pill.active {
  background: var(--ink);
  color: var(--off-white);
  border-color: var(--ink);
  cursor: default;
}
@media (max-width: 540px) {
  .protein-switcher { padding: 12px 16px; gap: 10px; }
  .protein-switcher-label { font-size: 9px; }
  .protein-pill { font-size: 11.5px; padding: 5px 11px; }
}

/* ===== PDP lifestyle sections (lifestyle photos moved out of gallery into scroll-down) ===== */
.pdp-lifestyle-section { padding: 72px 0; background: var(--cream); }
.pdp-lifestyle-section.alt { background: var(--cream-soft); }
.pdp-lifestyle { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.pdp-lifestyle.reverse { grid-template-columns: 1fr 1.2fr; }
.pdp-lifestyle.reverse .pdp-lifestyle-image { order: 2; }
.pdp-lifestyle-image { overflow: hidden; border-radius: 6px; background: var(--sand); }
.pdp-lifestyle-image img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.pdp-lifestyle-image.landscape img { aspect-ratio: 5/4; }
.pdp-lifestyle-copy { padding: 0 8px; }
.pdp-lifestyle-copy .section-eyebrow { margin-bottom: 12px; }
.pdp-lifestyle-copy h2 { font-family: var(--font-display, 'Montserrat'), 'Montserrat', sans-serif; font-weight: 400; font-size: 32px; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 16px; color: var(--ink); }
.pdp-lifestyle-copy h2 em { font-style: italic; color: var(--moss); }
.pdp-lifestyle-copy p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 14px; }
.pdp-lifestyle-copy p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .pdp-lifestyle-section { padding: 48px 0; }
  .pdp-lifestyle, .pdp-lifestyle.reverse { grid-template-columns: 1fr; gap: 28px; }
  .pdp-lifestyle.reverse .pdp-lifestyle-image { order: 0; }
  .pdp-lifestyle-image img { aspect-ratio: 1; }
  .pdp-lifestyle-copy h2 { font-size: 26px; }
}

/* full-width hero variant: single big photo + short caption underneath */
.pdp-lifestyle-hero { padding: 64px 0; background: var(--cream); }
.pdp-lifestyle-hero img { width: 100%; max-width: 1100px; aspect-ratio: 16/9; object-fit: cover; display: block; margin: 0 auto; border-radius: 6px; }
.pdp-lifestyle-hero-caption { text-align: center; margin-top: 20px; font-size: 13px; color: var(--ink-soft); letter-spacing: 0.04em; font-style: italic; }
@media (max-width: 760px) {
  .pdp-lifestyle-hero img { aspect-ratio: 4/5; }
}