/** Shopify CDN: Minification failed

Line 2131:0 Expected "}" to go with "{"

**/
/* SleepKarma — Nose Tape PDP shared styles.
   Ported verbatim from the designer's V1 build; 2 CSS bg images point at
   Shopify Files via file_url; Wonder-theme override block appended (mirrors
   the live sleep-karma-pdp.css) so button hover/focus states survive. */
/* ============================================
   SLEEP KARMA — NOSE TAPE PDP
   V1: Forked from Mouth Tape V4. Single SKU (no style
       selector), nose-tape content, Skio plans 30/45/50.
   ============================================ */
:root {
  --teal: #004345;
  --teal-light: #0a5a5c;
  --gold: #FEC400;
  --gold-light: #fed740;
  --cream: #FFFAF6;
  --cream-dark: #f5ede4;
  --gold-bg: #e5c36e;
  --white: #ffffff;
  --black: #111111;
  --gray-600: #555555;
  --gray-400: #999999;
  --gray-200: #e5e5e5;
  --green: #22c55e;
  --red-soft: #dc2626;
  --ann-bar-gold: #DFB357;
  --font-heading: Helvetica, Arial, sans-serif;
  --font-body: Helvetica, Arial, sans-serif;
  --max-width: 1200px;
  --section-pad: 80px 24px; --section-pad-x: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--teal); background: var(--cream); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* height:auto is load-bearing. Every [img] carries width/height attributes so
   the browser can reserve space and avoid layout shift, but without this the
   attribute height wins wherever CSS sets only a width, and the image stretches
   to its intrinsic pixel height. Class-scoped height rules (.gallery-main img
   etc.) out-specify this and still apply. */
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
.mobile-only { display: none; }

/* Mobile stand-ins for the two SVG overlays. Both overlays size their type in
   viewBox units, so the type scales with the artwork — fine on desktop, ~5px on
   a phone. These carry the same words in real CSS pixels and are hidden until
   the breakpoint where the SVG type stops being legible. */

/* ============================================ KEYFRAME ANIMATIONS ============================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(254, 196, 0, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(254, 196, 0, 0); }
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes floatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes countUp {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* ============================================ SCROLL REVEAL SYSTEM ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* ============================================ ANNOUNCEMENT BAR ============================================ */
.announcement-bar {
  background: var(--ann-bar-gold);
  color: #004345;
  text-align: center;
  padding: 7px 16px;
  font-size: 13px;
  letter-spacing: 0.5px;
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  animation: fadeIn 0.6s ease;
}
.announcement-bar span { display: inline-flex; align-items: center; gap: 6px; transition: transform 0.2s ease; }
.announcement-bar span:hover { transform: translateY(-1px); }
.announcement-bar .divider { opacity: 0.3; }

/* ============================================ NAVIGATION ============================================ */
.nav {
  background: #004345;
  border-bottom: none;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  transition: transform 0.3s ease;
}
.nav.nav-hidden { transform: translateY(-100%); }
.nav-logo {
  font-family: var(--font-heading);
  font-size: 24px;
  color: var(--teal);
  letter-spacing: 1px;
  transition: opacity 0.2s;
}
.nav-logo:hover { opacity: 0.7; }

/* ============================================ HERO / BUY BOX ============================================ */
.hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px 24px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* Image Gallery */
.gallery { position: sticky; top: 80px; min-width: 0; }
.gallery-main {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream);
  margin-bottom: 12px;
  position: relative;
  cursor: grab;
}
.gallery-main:active { cursor: grabbing; }
.gallery-main img {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity 0.4s ease;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
.gallery-badge {
  position: absolute; top: 16px; left: 16px;
  background: var(--gold); color: var(--teal);
  font-size: 11px; font-weight: 700; padding: 6px 12px;
  border-radius: 4px; letter-spacing: 0.5px; text-transform: uppercase;
  z-index: 2;
  animation: badgePulse 2s ease-in-out infinite;
}
.gallery-counter { display: none; }
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 44px;
  background: rgba(255,255,255,0.3);
  border: none;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: rgba(0,67,69,0.4);
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.gallery-main:hover .gallery-arrow:not(.hidden) { opacity: 1; }
.gallery-arrow:hover { background: rgba(255,255,255,0.65); color: rgba(0,67,69,0.8); }
.gallery-arrow.hidden { display: none; }
.gallery-arrow.prev { left: 0; border-radius: 0 20px 20px 0; }
.gallery-arrow.next { right: 0; border-radius: 20px 0 0 20px; }
.gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.gallery-thumb {
  width: 72px; height: 72px; border-radius: 10px; overflow: hidden;
  border: 2px solid transparent; cursor: pointer;
  background: var(--cream); flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery-thumb:hover { border-color: var(--gray-400); transform: translateY(-2px); }
.gallery-thumb.active { border-color: var(--teal); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Buy Box */
.buy-box { padding-top: 8px; max-width: 480px; min-width: 0; animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }

/* Press bar */
.press-bar {
  display: flex; align-items: center; justify-content: flex-start; gap: 16px;
  margin-bottom: 12px; padding: 0 0 10px;
  border-bottom: 1px solid var(--gray-200);
}
.press-bar-label { font-size: 11px; color: var(--gray-400); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; }
.press-logos { display: flex; gap: 12px; align-items: center; flex-wrap: nowrap; }
.press-logos img {
  height: 26px; width: auto; object-fit: contain; opacity: 0.45;
  transition: opacity 0.2s ease;
}
.press-logos img:hover { opacity: 0.7; }

/* Rating */
.rating-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.stars { color: var(--gold); font-size: 22px; letter-spacing: 3px; text-shadow: 0 1px 3px rgba(254,196,0,0.4); }
.rating-text { font-size: 14px; color: var(--gray-600); }
.rating-text strong { color: var(--teal); }
.recommend-badge { font-size: 12px; color: var(--green); font-weight: 600; margin-left: 4px; display: inline-flex; align-items: center; gap: 5px; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.5); } 50% { opacity: 0.7; box-shadow: 0 0 0 5px rgba(34,197,94,0); } }

/* Product title & headline */
.product-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--gray-400); margin-bottom: 6px;
}
.product-title { font-family: var(--font-heading); font-size: 32px; color: var(--teal); margin-bottom: 4px; line-height: 1.2; letter-spacing: -0.03em; }
.product-headline { font-size: 17px; color: var(--gray-600); margin-bottom: 16px; line-height: 1.5; }
/* inline-flex so the label and chevron wrap as one unit rather than the arrow
   orphaning onto its own line */
.headline-link {
  display: inline-flex; align-items: center; gap: 4px;
  /* inherit, so it stays the same grey as the paragraph it sits in */
  color: inherit; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: rgba(85,85,85,0.4);
  transition: text-decoration-color 0.25s ease;
}
.headline-link svg {
  width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.headline-link:hover { text-decoration-color: currentColor; }
.headline-link:hover svg { transform: translateY(2px); }
.headline-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }

/* Quick benefits */
/* Benefits + credibility — unified block (Option 2) */
.quick-benefits {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 14px 16px; margin-bottom: 20px;
  background: #f5ede3; border-radius: 12px; border: none;
}
.quick-benefit {
  display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--teal); font-weight: 500;
}
.quick-benefit br { display: none; }
.quick-benefit .icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.quick-benefit.cred-row {
  grid-column: 1 / -1;
  padding-top: 8px;
  margin-top: 2px;
  border-top: 1px solid rgba(0, 67, 69, 0.08);
  font-size: 13px;
  font-weight: 600;
}
.quick-benefit.cred-row .icon { font-size: 13px; }

/* Variant selector — Slim Cards (V3) */

/* ============================================
   PACK SELECTOR (v6 — pack-first layout)
   ============================================ */
.pack-section { margin-bottom: 20px; }
.pack-header {
  margin-bottom: 10px;
}
.pack-header-line { display: none; }
.pack-header-text { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--teal); }
.pack-cards { display: flex; flex-direction: column; gap: 8px; }
.pack-card {
  border: 2px solid var(--gray-200); border-radius: 12px;
  padding: 14px 16px; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); position: relative;
  background: transparent;
}
.pack-cards.compact .pack-card { padding: 10px 16px; }
.pack-card:hover { border-color: var(--gray-400); transform: translateX(4px); box-shadow: 0 4px 16px rgba(0,0,0,0.04); }
.pack-card.selected { background: var(--white); border-color: var(--teal); transform: translateX(0); box-shadow: 0 4px 20px rgba(0, 67, 69, 0.1); }
.pack-radio {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--gray-400); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.pack-card.selected .pack-radio { border-color: var(--teal); background: var(--teal); transform: scale(1.1); }
.pack-card.selected .pack-radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--white); }
.pack-info { flex: 1; min-width: 0; }
.pack-name { font-weight: 700; font-size: 15px; color: var(--teal); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pack-discount {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.3px;
  background: #dcfce7; color: #166534;
  transition: transform 0.2s ease;
}
.pack-card:hover .pack-discount { transform: scale(1.05); }
.pack-desc { font-size: 14px; color: var(--gray-400); margin-top: 2px; }
.pack-deliver { font-size: 12px; color: var(--gray-400); margin-top: 1px; display: none; }
.pack-deliver.visible { display: block; }
.pack-price { text-align: right; flex-shrink: 0; }
.pack-price-permonth { font-weight: 700; font-size: 20px; color: var(--teal); transition: transform 0.2s; }
.pack-card.selected .pack-price-permonth { transform: scale(1.05); }
.pack-price-permonth-label { font-size: 11px; color: var(--gray-400); font-weight: 400; }
.pack-price-orig { font-size: 12px; color: var(--gray-400); text-decoration: line-through; }
.pack-price-total { font-size: 11px; color: var(--gray-400); margin-top: 1px; }
.pack-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap;
}
.pack-badge.popular { background: var(--teal); color: var(--white); }
.pack-badge.best-deal { background: var(--ann-bar-gold); color: var(--white); }

/* Pack subscription benefits (shown in selected card when refill is on) */
.pack-benefits {
  display: none; flex-wrap: wrap; gap: 3px 16px;
  width: 100%; margin-top: -4px;
}
.pack-card.selected .pack-benefits.visible { display: flex; }
.pack-benefit {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--teal); line-height: 1.6;
  white-space: nowrap;
}
.pack-benefit svg { width: 14px; height: 14px; flex-shrink: 0; stroke: var(--teal); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* Refill / Subscribe toggle */
.refill-row {
  margin-top: 12px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0;
}
.refill-toggle {
  border: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px; flex: 1;
  background: transparent; transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.refill-toggle:hover { opacity: 0.8; }
.refill-toggle.active { background: transparent; }
.refill-checkbox {
  width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid var(--gray-400); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); font-size: 13px; color: var(--white);
}
.refill-toggle.active .refill-checkbox { background: var(--teal); border-color: var(--teal); transform: scale(1.1); }
.refill-info { flex: 1; }
.refill-title { font-weight: 700; font-size: 14px; color: var(--teal); }
.refill-sub { font-size: 13px; color: var(--gray-400); margin-top: 2px; }
.refill-save-box {
  background: #dcfce7; color: #166534;
  font-size: 13px; font-weight: 700;
  padding: 6px 12px; border-radius: 8px;
  flex-shrink: 0; white-space: nowrap; display: none;
}
.refill-row.active .refill-save-box { display: block; }

/* CTA Button — with shimmer */
.cta-button {
  width: 100%; padding: 22px 32px;
  background: var(--gold); color: var(--teal); border: none; border-radius: 12px;
  font-size: 18px; font-weight: 900; cursor: pointer; letter-spacing: 1.87px;
  text-transform: uppercase;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 12px; font-family: var(--font-body);
  position: relative; overflow: hidden;
  animation: pulseGlow 3s ease-in-out infinite;
}
.cta-button::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation: shimmer 3s ease-in-out infinite;
}
.cta-button:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(254, 196, 0, 0.45); }
.cta-button:active { transform: translateY(0); }
.cta-button.loading { opacity: 0.7; pointer-events: none; animation: none; }
.cta-button.loading::before { display: none; }
.cta-price { font-size: 18px; }
.cta-original { font-size: 14px; text-decoration: line-through; opacity: 0.7; }

/* Cart success message */
.cart-success {
  display: none;
  background: #f0fdf4; border: 1px solid #86efac;
  border-radius: 12px; padding: 16px 20px;
  margin-bottom: 12px; text-align: center;
}
.cart-success.show { display: block; animation: fadeIn 0.3s ease; }
.cart-success-text { font-size: 14px; color: #166534; font-weight: 600; margin-bottom: 8px; }
.cart-success a {
  display: inline-block; background: var(--teal); color: var(--white);
  padding: 10px 24px; border-radius: 8px; font-weight: 600; font-size: 14px;
  transition: all 0.3s ease;
}
.cart-success a:hover { background: var(--teal-light); transform: translateY(-1px); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* Buy module wrapper */
.buy-module { margin-bottom: 12px; }
.cta-lock { display: inline-flex; align-items: center; }
.cta-lock svg { width: 16px; height: 16px; fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* Trust strip — fused bar above button */
.trust-strip {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  padding: 10px 0;
  background: transparent;
}
.trust-item { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.trust-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trust-icon svg { width: 12px; height: 12px; fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trust-text { font-size: 13px; color: var(--teal); font-weight: 500; }
.trust-sep { width: auto; height: auto; background: none; font-size: 8px; color: var(--gray-400); line-height: 1; }

/* Savings line below button */

/* Mini testimonial */
.mini-testimonial {
  background: #f5ede3; border-radius: 12px; padding: 12px 16px; margin-top: 16px; border: none;
  position: relative;
}
/* These five are written into the DOM by showReview() at runtime, so a
   static scan of the markup does not see them. Do not "clean" them out. */
.mini-testimonial-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.mini-testimonial-stars { color: var(--ann-bar-gold); font-size: 13px; letter-spacing: 1px; }
.mini-testimonial-name { font-size: 14px; font-weight: 600; color: var(--black); }
.mini-testimonial-text { font-size: 14px; color: var(--gray-600); line-height: 1.5; }
.mini-testimonial-text strong { color: var(--black); }
.verified-badge { color: var(--green); font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.mini-testimonial #review-content { transition: opacity 0.25s ease; }
.review-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: rgba(0,67,69,0.08); color: var(--teal);
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s ease;
}
.mini-testimonial:hover .review-arrow { opacity: 1; }
.review-arrow:hover { background: rgba(0,67,69,0.15); }
.review-arrow.prev { left: -14px; }
.review-arrow.next { right: -14px; }
.review-arrow.hidden { display: none; }

/* ============================================ SOCIAL PROOF BAR ============================================ */
.social-proof-bar {
  background: var(--teal); color: var(--white); padding: 80px 24px; text-align: center;
  position: relative; overflow: hidden;
}
.social-proof-bar::before {
  content: ''; position: absolute; top: -50%; left: -20%; width: 140%; height: 200%;
  background: radial-gradient(ellipse at 30% 50%, rgba(254, 196, 0, 0.06) 0%, transparent 70%);
  pointer-events: none;
}
.social-proof-eyebrow { font-size: 13px; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); font-weight: 700; margin-bottom: 12px; }
.social-proof-bar h2 { font-family: var(--font-heading); font-size: 36px; margin-bottom: 8px; font-weight: 700; line-height: 1.3; }
.social-proof-sub { font-size: 16px; opacity: 0.6; margin-bottom: 36px; }
.proof-quotes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: calc(var(--max-width) - 48px); margin: 0 auto; }
.proof-quote {
  font-size: 15px; line-height: 1.6;
  background: rgba(255,255,255,0.06); border-radius: 16px; padding: 28px;
  text-align: left; border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  min-width: 0;
  /* Column flex so the author row can be pushed to the bottom. The grid
     already stretches all four cards to the tallest, so bottom-aligning the
     rows inside them puts every avatar on one line regardless of quote length. */
  display: flex; flex-direction: column;
}
.proof-quote:hover { background: rgba(255,255,255,0.1); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.15); }
.proof-quote .quote-stars { color: var(--ann-bar-gold); font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; }
.proof-quote .quote-tag {
  /* align-self, not just inline-block. The card is a column flex container so
     it can bottom-align the author row; that makes every child a flex item,
     and flex items stretch across the cross axis by default — which blew the
     pill out to the full card width regardless of its display value. */
  align-self: flex-start;
  display: inline-block; background: rgba(255,255,255,0.1); color: var(--white);
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 4px;
  margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px;
  border: 1px solid rgba(255,255,255,0.12);
}
.proof-quote .quote-author {
  /* auto, not 16px — takes up the slack so the row sits on the card floor.
     padding-top keeps a minimum gap when a quote runs long. */
  margin-top: auto; padding-top: 18px;
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
}
.proof-quote .quote-avatar {
  width: 48px; height: 48px; border-radius: 50%; background: var(--ann-bar-gold); color: var(--teal);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
  flex-shrink: 0; overflow: hidden;
}
/* The frames are 144px square; without cover they letterbox inside the circle. */
.proof-quote .quote-avatar img { width: 100%; height: 100%; object-fit: cover; }

.proof-quote .quote-name { font-size: 14px; font-weight: 600; opacity: 0.9; white-space: nowrap; }
.proof-quote .quote-verified { color: var(--ann-bar-gold); font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 4px; white-space: nowrap; }

/* ============================================ SECTION WRAPPERS (alternating bg) ============================================ */

/* ============================================ PROBLEM / SOLUTION — Banner + Pairs (Variant A) ============================================ */
.section-eyebrow {
  font-size: 13px; text-transform: uppercase; letter-spacing: 2px; color: #B89A4A;
  font-weight: 700; margin-bottom: 12px;
  display: inline-block; position: relative;
}
.section-heading { font-family: var(--font-heading); font-size: 36px; color: var(--teal); line-height: 1.2; margin-bottom: 20px; }
.section-body { font-size: 16px; color: var(--gray-600); line-height: 1.7; max-width: 700px; margin: 0 auto 40px; }

/* ============================================ THE SCIENCE — full-bleed portrait ============================================
   The photograph is shot with deliberate extra headroom so the copy can sit
   above the subject. aspect-ratio keeps that headroom intact instead of letting
   `cover` crop it away; object-position: center top means any crop that does
   happen is taken off the bottom (chest), never off the space the type needs. */
.problem-wrapper {
  position: relative;
  width: 100%;
  /* The nav is position:sticky, so an anchor jump would land the eyebrow
     underneath it. This is the nav's own height plus a little air. */
  scroll-margin-top: 92px;
  /* 4938, not 5253. The photo carried ~36% of its height as empty wall above
     his head; 315px of that is now cropped out of the file itself, so the
     panel is shorter by exactly the amount he moved up and nothing is lost at
     the bottom. The SVG viewBox y-origin is offset to match. */
  aspect-ratio: 7123 / 4938;
  min-height: 620px;
  /* 1040 = 1500 / (7123/4938). Paired with the 1500px cap on .problem-media so
     that above 1500px viewport BOTH the width and the height stop growing —
     the photo freezes and his head sits at a fixed 333px instead of sliding
     down to 449px and dragging the copy with it. */
  max-height: 1040px;   /* any lower re-crops the shoulders we just revealed */
  overflow: hidden;
  background: #F3E5DC;   /* sampled from the wall in the photograph */           /* matches the photo, so no flash before load */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.problem-media {
  /* Capped at 1700 and centred. Left uncapped, the photo scales with the
     viewport, so on a wide screen his head keeps sliding down the frame and the
     copy has to be pushed down to meet it — which is where all that dead space
     above the eyebrow came from. Capping the photo stops the head running away
     and lets the copy sit at a fixed, deliberate distance from the top.
     The bands either side fall back to the wrapper's background, which is
     within 2 values per channel of the wall in the photograph, so the join
     does not read. The SVG overlay is inside this box, so it caps with it and
     the arrows stay welded to the face. */
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: min(100%, 1500px);
  z-index: 0;
  /* The mechanism's clock and palette. These sit here, not on .fx, because the
     phone labels are HTML siblings of the SVG — on .fx they were unreachable
     and the labels sat there permanently lit while the arrows cycled. */
  --lift: #A8761B;      /* gold  */
  --air:  #0F6E70;      /* teal  */
  --speed: 1.45;
  --intensity: 1.4;
}
.problem-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ---------- mechanism overlay: locked to the photograph ---------- */
.problem-media .fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.fx .lift { fill: var(--lift) }
.fx .lbl {
  font-family: var(--font-heading);
  font-weight: 700; font-size: 96px; letter-spacing: 6px; text-transform: uppercase;
}
.fx .lbl-lift { fill: var(--lift) }
.fx .lbl-air  { fill: var(--air) }
/* Two label sets live in the overlay; the phone set is off until 860px. */

/* Phone labels for the science panel. Off until the stacked layout. */
.fx-lbl {
  display: none;
  position: absolute;
  z-index: 3;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(10px, 3.1vw, 16px);
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
}
/* Each phone label runs its own arrow's keyframes, not the staggered label
   ones the desktop set uses. fadeLL/fadeLA put the label 1.2-1.5s behind its
   arrow and took it away 0.15s early — barely noticeable on a small desktop
   annotation, obvious when the label is this size. Sharing the keyframe name
   means the pair cannot drift: same clock, same curve, same in and out. */
.fx-lbl-lift { color: var(--lift); left: 63%; right: 1%;  top: 44%;
  animation: fadeLift calc(11s / var(--speed)) linear infinite; }
.fx-lbl-air  { color: var(--air);  left: 1%;  right: 60%; top: 70%; text-align: right;
  animation: fadeAir calc(11s / var(--speed)) linear infinite; }
.wipe, .bounce { transform-box: view-box }
.wl { transform-origin: 3330px 3300px }
.wr { transform-origin: 3880px 3300px }
.wa { transform-origin: 3600px 4700px }

/* One out-and-back leg on `alternate` with a sine-like ease: velocity matches
   itself at every turnaround, so the sway never stalls or hitches at the loop. */
.bounce { animation: sway calc(1.7s / var(--speed)) cubic-bezier(.45,.05,.55,.95) infinite alternate }
.br { animation-name: swayR }
@keyframes sway  { from{transform:translateX(0)} to{transform:translateX(-62px)} }
@keyframes swayR { from{transform:translateX(0)} to{transform:translateX(62px)} }

/* The reveal mask sits on the outer [g], the sway on the inner one — on a
   single element the arrow slides out from under its own mask mid-travel. */
.problem-media .wl, .problem-media .wr { animation: wipeX calc(11s / var(--speed)) cubic-bezier(.3,0,.18,1) infinite }
.problem-media .wa { animation: wipeY calc(11s / var(--speed)) cubic-bezier(.32,0,.2,1) infinite }
@keyframes wipeX { 0%,8%{transform:scaleX(0)} 26%,100%{transform:scaleX(1)} }
@keyframes wipeY { 0%,30%{transform:scaleY(0)} 52%,100%{transform:scaleY(1)} }
.fx .lift { animation: fadeLift calc(11s / var(--speed)) linear infinite }
@keyframes fadeLift { 0%,6%{opacity:0} 12%,80%{opacity:calc(.94*var(--intensity))} 92%,100%{opacity:0} }
.fx .air { animation: fadeAir calc(11s / var(--speed)) linear infinite }
@keyframes fadeAir { 0%,28%{opacity:0} 34%,80%{opacity:calc(.95*var(--intensity))} 92%,100%{opacity:0} }
.fx .lbl-lift { animation: fadeLL calc(11s / var(--speed)) ease-out infinite }
@keyframes fadeLL { 0%,20%{opacity:0} 28%,80%{opacity:calc(.9*var(--intensity))} 90%,100%{opacity:0} }
.fx .lbl-air { animation: fadeLA calc(11s / var(--speed)) ease-out infinite }
@keyframes fadeLA { 0%,46%{opacity:0} 54%,80%{opacity:calc(.9*var(--intensity))} 90%,100%{opacity:0} }

@media (prefers-reduced-motion: reduce) {
  .fx * { animation: none !important }
  .bounce { transform: none !important }
  .wipe { transform: scaleX(1) scaleY(1) !important }
  .fx-lbl { animation: none !important }
  .fx .lift, .fx .air, .fx .lbl, .fx-lbl { opacity: .85 !important }
}
.problem-header {
  position: relative;
  z-index: 2;
  text-align: center;
  /* head = min(22.22% of viewport width, 333px). The copy block is 178px
     (one-line heading + three body lines), so 22.22% - 233px holds a constant
     55px gap beneath it, and the cap lands exactly where the photo freezes. */
  padding: clamp(20px, calc(22.22% - 233px), 100px) 24px 0;
  max-width: 860px;
  width: 100%;
}
.problem-header .section-body { margin-bottom: 0; }

/* Narrow desktop / tablet: the panel is short here and the heading is at risk
   of wrapping to a third line, which would push the copy onto his forehead.
   Tighten the type so the block stays clear of the 40% hairline. */

/* Stack only below 1100, where the copy genuinely cannot fit in the headroom.
   Above that the photo runs continuously behind the copy — splitting them puts
   a visible seam across the panel, because the page cream (255,250,246) and the
   wall in the photograph (243,229,220) are twelve values apart. */
@media (max-width: 1100px) {
  /* Stack rather than overlay — a landscape frame cropped to a phone viewport
     cannot hold both the copy and the subject without them colliding. */
  .problem-wrapper {
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    display: block;
    /* Sampled from the top of hero-wall-fill.jpg, so the flat area above the
       fill and the fill itself are the same colour. The old #F3E5DC was 2/3/3
       darker than the photograph's wall, which is half of why the crop line
       read as a hard edge. */
    background: #F5E8DF;
  }
  /* The photo carries ~36% of its height as empty wall above the head — that
     headroom exists so the copy can sit in it when the two overlap. Stacked,
     the copy is above the photo instead, so all that wall just becomes dead
     space. So the media box is shortened and clips the photo, which now hangs
     from its bottom edge. The head lands ~14% down instead of 36%.

     Both the [img] and the SVG overlay get identical geometry and are bottom-
     aligned inside the clip, so they stay welded to each other. That is why
     this crops with a container rather than with object-position: there is no
     CSS equivalent of preserveAspectRatio, so the two would drift apart. */
  .problem-media {
    position: relative;
    inset: auto;
    /* transform:none is load-bearing. The base rule centres the capped photo
       with left:50% + translateX(-50%); `inset:auto` cancels the left, but the
       transform survives and drags the photo half its own width off-screen. */
    transform: none;
    width: 100%;
    aspect-ratio: 7123 / 3900;
    overflow: hidden;
  }
  .problem-media .problem-bg,
  .problem-media .fx {
    position: absolute;
    top: auto; bottom: 0; left: 0;
    width: 100%; height: auto;
    aspect-ratio: 7123 / 4938;
    object-fit: fill;
  }
  .problem-wrapper::after { display: none; }

  /* The copy block carries the wall texture up behind itself, so there is no
     line where flat colour meets the photograph.

     hero-wall-fill.jpg is built from the 124 rows of clean wall sitting at and
     just below the crop line, ping-ponged upward — the band has no vertical
     structure (under 1.1/255 of drift), only grain and a fixed horizontal
     vignette, so mirroring it is undetectable and every pixel is real photo
     data. Its bottom row IS the photo's first visible row, to within JPEG
     noise. Toward the top the vignette and the grain fade to #F5E8DF, which is
     the wrapper's background, so a header taller than the fill has nothing to
     step against either.

     Anchored bottom-centre at 100% width: the header's bottom edge is the
     photo's top edge, and both are full-bleed, so the texture lines up
     horizontally as well as vertically. */
  .problem-header {
    padding: 56px 22px 30px;
    max-width: none;
    background-image: url("//sleepkarma.co/cdn/shop/t/29/assets/sk-nose-hero-wall-fill.jpg?v=101961836971662555701785900575");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
  }
}

/* ============================================ CLINICAL PROOF — Split Hero B4 (Sand + Gold) ============================================ */
.clinical-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
  padding: 0;
  background: #ebe1d3;
}
/* Auto-advancing image slider. A real track, not a crossfade: both frames
   translate together, so the outgoing photo leaves as the incoming one
   arrives. The last slide is a clone of the first, which is what makes the
   wrap seamless — the animation ends at -66.667% showing the clone, then
   restarts at 0% showing the original. Same pixels, so the reset is
   invisible and the hold reads as continuous across the loop. */
.clinical-img {
  position: relative;
  overflow: hidden;
  background: #ebe1d3;   /* matches the section, so no flash before load */
}
.clinical-img::after { display: none; }
.ci-track {
  position: absolute; inset: 0;
  display: flex;
  width: 300%;                                  /* 2 slides + 1 clone */
  animation: ciSlide 13s linear infinite;
  will-change: transform;
}
.ci-track img {
  width: 33.3333%; height: 100%; flex: none;
  object-fit: cover; object-position: 50% center;
  display: block;
}
/* 41% hold, 9% travel, twice — 5.3s on each image and a 1.17s slide. The
   easing lives on the keyframes that *start* a move, because a timing function
   applies to the segment following its keyframe; declaring it once on the
   element would re-apply it to the holds and to the loop seam. */
@keyframes ciSlide {
  0%   { transform: translateX(0); }
  41%  { transform: translateX(0);              animation-timing-function: cubic-bezier(.65,0,.35,1); }
  50%  { transform: translateX(-33.3333%); }
  91%  { transform: translateX(-33.3333%);      animation-timing-function: cubic-bezier(.65,0,.35,1); }
  100% { transform: translateX(-66.6667%); }
}
@media (prefers-reduced-motion: reduce) {
  .ci-track { animation: none; }
}
.clinical-inner {
  padding: 60px 72px;
  display: flex; flex-direction: column; justify-content: center;
  text-align: left;
}
.clinical-inner .section-eyebrow { color: #B89A4A; }
.clinical-inner .section-heading { color: var(--teal); font-size: 36px; margin-bottom: 8px; }
.clinical-sub { font-size: 16px; color: var(--gray-600); margin-bottom: 36px; }
.clinical-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 0; }
.clinical-stat {
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(254,196,0,0.2);
  border-radius: 12px; padding: 17px 18px 15px;
  transition: all 0.3s ease;
  position: relative; overflow: hidden;
}
.clinical-stat::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--ann-bar-gold));
  opacity: 0; transition: opacity 0.3s ease;
}
.clinical-stat:hover {
  background: rgba(255,255,255,0.8);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,67,69,0.06);
}
.clinical-stat:hover::before { opacity: 1; }
.stat-number {
  font-family: var(--font-heading); font-size: 34px; font-weight: 700;
  color: #b8940a; line-height: 1; margin-bottom: 4px;
  transition: transform 0.3s ease;
}
.clinical-stat:hover .stat-number { transform: scale(1.05); }
.stat-label { font-size: 13px; color: var(--gray-600); line-height: 1.35; }
/* Attribution sits with the number it belongs to, not pooled in a footnote —
   a stat is only as good as the reader's ability to see where it came from. */
.stat-cite {
  margin-top: 8px; padding-top: 6px;
  border-top: 1px solid rgba(90,74,46,0.13);
  font-size: 10px; letter-spacing: 0.3px;
  color: var(--gray-400);
}
.clinical-citation { margin-top: 22px; font-size: 11.5px; color: var(--gray-400); }

@media (max-width: 768px) {
  .clinical-sub { margin-bottom: 16px; }
  .stat-cite { font-size: 10px; }
}

/* ============================================ BAMBOO / CERTIFICATION PANEL ============================================ */
.bamboo-panel {
  position: relative; overflow: hidden;
  width: 100%;
  min-height: 357px; display: flex; align-items: center; justify-content: center;
}
.bamboo-panel .bamboo-bg {
  position: absolute; inset: 0;
  background: url("//sleepkarma.co/cdn/shop/t/29/assets/sk-nose-bamboo-forest.webp?v=71830268419675447831785900570") center/cover no-repeat;
}
.bamboo-panel .bamboo-bg::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,0.18);
}
.bamboo-panel .bamboo-content {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 40px;
  max-width: 900px; margin: 0 auto;
  padding: 56px 64px;
  width: 100%;
}
.bamboo-seal {
  flex-shrink: 0; width: 110px; height: 110px;
  border-radius: 50%;
  border: 2px solid var(--ann-bar-gold);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative;
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.bamboo-seal::before {
  content: ''; position: absolute; inset: 5px;
  border-radius: 50%;
  border: 1px solid rgba(212,168,67,0.3);
}
.bamboo-seal-std {
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ann-bar-gold); opacity: 0.7;
  margin-bottom: 2px;
}
.bamboo-seal-num {
  font-size: 20px; font-weight: 700; color: var(--ann-bar-gold);
  letter-spacing: -0.5px; line-height: 1;
}
.bamboo-seal-year {
  font-size: 9px; color: rgba(212,168,67,0.6); margin-top: 3px;
  letter-spacing: 0.5px;
}
.bamboo-seal-check {
  position: absolute; bottom: -4px; right: -4px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ann-bar-gold); color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.bamboo-panel .bamboo-text h3 {
  font-size: 24px; font-weight: 700; color: var(--white);
  margin-bottom: 10px; line-height: 1.3;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
}
.bamboo-panel .bamboo-text p {
  font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.7;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
  max-width: 580px;
}
.bamboo-badges {
  display: flex; gap: 20px; margin-top: 18px;
}
.bamboo-badge {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--ann-bar-gold);
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.bamboo-badge::before {
  content: '✓'; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(212,168,67,0.2); color: var(--ann-bar-gold);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; text-shadow: none;
}

/* ============================================ MATERIALS — Anatomy Panel ============================================ */
/* Option B — Toasted Clay. Warm earthenware ground so the matte black
   product cutout reads at full strength (it was disappearing on the teal). */
.mat-wrapper {
  --tex-form: 0.08;
  --tex-grain: 0.045;
  --tex-fleck: 0.015;
  --bloom: 0.68;
  background: linear-gradient(163deg, #DEC3A4 0%, #D7B896 34%, #CFAD88 66%, #C6A17B 100%);
  padding: 80px 24px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Light stays flat and wide — a tight highlight with fast falloff reads as gloss. */
.mat-wrapper::before {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(95% 85% at 38% 26%, rgba(255,247,235,0.30) 0%, transparent 72%),
    radial-gradient(85% 70% at 62% 108%, rgba(74,44,16,0.13) 0%, transparent 70%);
  opacity: var(--bloom);
  pointer-events: none;
  z-index: 0;
}
/* Paper character, three non-directional layers. No stretched turbulence —
   aligned striations read as brushed metal. soft-light/overlay vary the tone
   in both directions the way real fibre does; multiply alone looks like film. */
.mat-tex { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.mat-tex span { position: absolute; inset: 0; display: block; }
.mat-tex .l-form  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='f' x='0%25' y='0%25' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.032' numOctaves='5' seed='13' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23f)'/%3E%3C/svg%3E"); background-size: 520px 520px; opacity: var(--tex-form);  mix-blend-mode: soft-light; }
.mat-tex .l-grain { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f' x='0%25' y='0%25' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='discrete' tableValues='0 0.42 0.72 1'/%3E%3CfeFuncG type='discrete' tableValues='0 0.42 0.72 1'/%3E%3CfeFuncB type='discrete' tableValues='0 0.42 0.72 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23f)'/%3E%3C/svg%3E"); background-size: 190px 190px; opacity: var(--tex-grain); mix-blend-mode: overlay; }
.mat-tex .l-fleck { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f' x='0%25' y='0%25' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.55' numOctaves='1' seed='29' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23f)'/%3E%3C/svg%3E"); background-size: 400px 400px; opacity: var(--tex-fleck); mix-blend-mode: multiply; }
.mat-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.mat-header {
  text-align: center;
  /* 40 here and 40 on .mat-features: the tape reads as centred between the
     intro copy and the feature cards only if those two gaps match. They were
     48 above and 29 below, which sat the tape ~10px low. */
  margin-bottom: 40px;
}
.mat-header .section-eyebrow { color: #6E4A18; }
.mat-header .section-heading { color: #02302F; font-size: 36px; }
.mat-header p { color: rgba(46,32,18,0.68); font-size: 16px; max-width: 720px; margin: 0 auto; }

/* Anatomy image with hotspot pins */
.mat-anatomy {
  position: relative;
  /* 1000 not 860: the reveal's labels need the width. Below ~900px of stage
     the two lower callouts collide at the size that matches the science
     panel. The feature strip shares the measure so the two stay aligned. */
  max-width: 1000px;
  margin: 0 auto;
}

/* ======================= TAPE LAYER REVEAL =======================
   Hover separates the bamboo silk shell from the reinforcing strip hidden
   inside it. The band is a second image sitting *behind* the shell in
   z-order, so at rest it is concealed by the tape's own silhouette — no
   masks, no clipping. Verified against the alpha channel: zero band pixels
   fall outside the shell at rest, so nothing peeks out before you hover.
   The band's shadow animates up from fully transparent rather than
   switching on; at rest it would otherwise spill past the tape's lower
   edge, which sits only ~7px below the band at the right end. */
.tl-stage {
  /* Full separation. The two pieces stop overlapping at 43.0% of combined
     travel — measured column by column, the worst column (the shell's left
     lobe) needs 349px. 44% clears it: ~4px of daylight at the tightest point,
     ~24px across the rest. The split is lopsided on purpose; it holds the
     artwork's centre of mass identical open or closed, so nothing lurches. */
  --tl-shellX:-1.6%; --tl-shellY:-9.25%; --tl-bandX:2.2%; --tl-bandY:34.75%;
  --tl-ink:#3B2C18; --tl-lead:rgba(59,44,24,0.46);
  /* ONE clock. Every element that appears or disappears uses exactly these
     two values and no delay, in or out, so they arrive and leave together. */
  --tl-dur:0.72s; --tl-ease:cubic-bezier(.22,.9,.24,1);
  /* Label size, in viewBox units — the stage is 1600 units in a 1000px box, so
     rendered px = fs x 0.625. Fluid between the two ends:
        26 units (16.3px) below ~1368px  ->  30 units (18.8px) above ~1579px
     The 30 cap is geometry, not taste. The two lower labels sit at x=540 and
     x=1235, so the gap between them is 695 - 17.97*fs units: at 30 that is a
     comfortable 156, at 34 it is 84, and by 38 it is 12 and they read as one
     run-on line. Do not raise this without also re-breaking that copy. */
  --tl-fs: clamp(26px, 1.9vw, 30px);
  position: relative; width: 100%; max-width: 1000px; margin: 0 auto;
  /* 950 to hold the full separation. The layer box is no longer centred — it
     is pinned at 19.47% so the open state is framed, since the strip travels
     much further down than the shell travels up. */
  aspect-ratio: 1600 / 950;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* The tape occupies 72% of the stage, not all of it, which puts it back at the
   720px it rendered at as a static image. The stage itself stays 1000px wide
   because that is what the callouts need — see --tl-fs. Because this is a
   uniform 0.72 scale about the stage centre, and the separation offsets are
   percentages of this box, the whole mechanism scales with it and the callout
   anchors stay welded to the silhouette. */
.tl-layers { position: absolute; left: 14%; right: 14%; top: 19.47%; aspect-ratio: 1600/812; }
.tl-layers img { position: absolute; inset: 0; width: 100%; height: auto; display: block; }
.tl-band { z-index: 1; filter: drop-shadow(0 0 0 rgba(74,44,16,0));
  transition: transform var(--tl-dur) var(--tl-ease), filter var(--tl-dur) var(--tl-ease); }
.tl-shellwrap { position: absolute; inset: 0; z-index: 2;
  transition: transform var(--tl-dur) var(--tl-ease); }
/* Shadow radii are scaled by the same 0.72 — left at full size they read as
   too heavy for the smaller object. */
.tl-shell {
  filter: drop-shadow(0 1.5px 2px rgba(48,30,12,0.30)) drop-shadow(0 10px 17px rgba(48,30,12,0.26));
  transition: filter var(--tl-dur) var(--tl-ease);
}
.tl-stage.open .tl-shellwrap { transform: translate(var(--tl-shellX), var(--tl-shellY)); }
.tl-stage.open .tl-shell { filter: drop-shadow(0 2px 3px rgba(48,30,12,0.32)) drop-shadow(0 22px 29px rgba(48,30,12,0.34)); }
.tl-stage.open .tl-band  { transform: translate(var(--tl-bandX), var(--tl-bandY)); filter: drop-shadow(0 12px 19px rgba(74,44,16,0.34)); }

/* the socket: where the strip sits under the shell */
.tl-socket { position: absolute; inset: 0; width: 100%; height: auto;
  aspect-ratio: 1600/812; pointer-events: none; z-index: 3; overflow: visible; }
.tl-socket .tl-cut {
  fill: none; stroke: rgba(214,211,205,0.68); stroke-width: 3;
  stroke-dasharray: 17 14; stroke-linecap: round;
  opacity: 0; transition: opacity var(--tl-dur) var(--tl-ease);
  animation: tlMarch 16s linear infinite;   /* always marching; only opacity toggles */
}
.tl-stage.open .tl-socket .tl-cut { opacity: 1; }
@keyframes tlMarch { to { stroke-dashoffset: -350; } }

/* callouts, drawn in stage space so the anchors land on measured edges */
.tl-callouts { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 8; overflow: visible; }
.tl-callouts text {
  font-family: var(--font-heading); font-weight: 800;
  font-size: var(--tl-fs); letter-spacing: 0.1em;
  text-transform: uppercase; fill: var(--tl-ink);
  opacity: 0; transition: opacity var(--tl-dur) var(--tl-ease);
}
/* White, with a hairline in the leader colour. Pure white alone vanishes where
   the adhesive dot straddles the shell's edge and sits half on the pale clay. */
.tl-callouts .tl-dot {
  fill: #fff; stroke: rgba(59,44,24,0.42); stroke-width: 1.1;
  opacity: 0; transition: opacity var(--tl-dur) var(--tl-ease);
}
.tl-callouts .tl-lead {
  /* 1.7 at the stage's 0.625 scale is a ~1.06px hairline. 2.4 rendered at 1.5px
     and read as drawn rather than as an annotation. */
  stroke: var(--tl-lead); stroke-width: 1.7; fill: none; stroke-linecap: round;
  stroke-dasharray: 400; stroke-dashoffset: 400; opacity: 0;
  transition: stroke-dashoffset var(--tl-dur) var(--tl-ease), opacity var(--tl-dur) var(--tl-ease);
}
.tl-stage.open .tl-callouts text, .tl-stage.open .tl-callouts .tl-dot { opacity: 1; }
.tl-stage.open .tl-callouts .tl-lead { stroke-dashoffset: 0; opacity: 1; }
/* Two callout sets share the stage. The phone one is off until 768px. */
.tl-callouts-m { display: none; }

/* Phone labels. Off on desktop; the SVG set handles that breakpoint. */
.tl-lbl {
  display: none;
  position: absolute;
  z-index: 9;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(11px, 3.4vw, 20px);
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tl-ink);
  opacity: 0;
  transition: opacity var(--tl-dur) var(--tl-ease);
  pointer-events: none;
}
.tl-stage.open .tl-lbl { opacity: 1; }
/* x/y are the old viewBox coordinates over 1600 and 1450. A sits above the
   tape and is anchored by its baseline edge; B and C hang from their leader
   apexes. Each gets a 95%-wide box so a long line wraps rather than spills. */
.tl-lbl-a { left: 34%; bottom: 87.172%; transform: translateX(-50%); max-width: 95%; text-align: center; }
.tl-lbl-b { left: 2.5%;  top: 68.276%; max-width: 95%; }
.tl-lbl-c { right: 2.5%; top: 85.5%;   max-width: 95%; text-align: right; }

.tl-hint {
  position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%);
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  color: rgba(58,42,22,0.52); transition: opacity var(--tl-dur) var(--tl-ease); z-index: 9;
}
.tl-stage.open .tl-hint { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .tl-band, .tl-shellwrap, .tl-shell, .tl-callouts *, .tl-socket .tl-cut { transition-duration: .001s !important; }
  .tl-socket .tl-cut { animation: none; }
}

/* Hotspot dots & pin labels — removed */

/* Feature strip below image */
.mat-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;   /* matches .mat-header's margin-bottom — see note there */
}
.mat-feat {
  text-align: center;
  padding: 24px 16px;
  border-radius: 16px;
  background: rgba(255,249,239,0.40);
  border: 1px solid rgba(90,62,30,0.18);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: default;
}
.mat-feat:hover { background: rgba(255,249,239,0.72); border-color: #02302F; transform: translateY(-4px); }
.mat-feat-icon { font-size: 28px; margin-bottom: 10px; }
.mat-feat h3 {
  font-size: 13px; font-weight: 700; color: #6E4A18;
  margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px;
}
.mat-feat p { font-size: 13px; color: rgba(46,32,18,0.70); line-height: 1.5; }

/* Trust badges */
.mat-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.mat-trust-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(46,32,18,0.66);
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid rgba(90,62,30,0.26);
  background: none;
  transition: all 0.2s;
}
.mat-trust-pill:hover { border-color: #02302F; color: #02302F; }

/* Variant Switcher — Pill Toggle */

/* ============================================ COMPARISON — Weighted Cards ============================================
   The two cards are deliberately not equals. Ours is raised, warm and full
   contrast; theirs sits recessed, cool and desaturated. The hierarchy carries
   the argument, so the copy does not have to raise its voice. */
.comparison-section { background: #FFFAF6; padding: var(--section-pad); }
.comparison-inner { max-width: 960px; margin: 0 auto; }
.cmp-grid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 20px; align-items: start; }
.cmp-card { border-radius: 22px; padding: 30px 28px 26px; position: relative; overflow: hidden; }
.cmp-ours {
  background: linear-gradient(163deg, #DEC3A4 0%, #D7B896 40%, #C6A17B 100%);
  box-shadow: 0 18px 44px rgba(58,42,22,0.18), 0 3px 8px rgba(58,42,22,0.10);
  transform: translateY(-8px);
}
.cmp-them {
  background: #efeae3;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
}
.cmp-tag {
  position: absolute; top: 0; right: 26px;
  background: var(--teal); color: var(--white);
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  padding: 7px 12px 6px; border-radius: 0 0 7px 7px;
}
.cmp-shot { height: 158px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
/* Shadows layered contact -> mid -> ambient, tinted to the clay beneath. */
.cmp-ours .cmp-shot img {
  width: 238px;
  filter: drop-shadow(0 1px 1px rgba(48,30,12,0.42)) drop-shadow(0 6px 10px rgba(48,30,12,0.26)) drop-shadow(0 18px 28px rgba(48,30,12,0.20));
}
.cmp-them .cmp-shot img {
  width: 212px;
  /* The strip photographs at luminance 229 against a 235 card — six values
     apart — so at 0.7 opacity it dissolved into the background entirely.
     Full opacity plus a layered contact -> mid -> ambient shadow gives it an
     edge to read against. Dropped the grayscale: the strip is already
     achromatic (233,229,225), so it was costing a filter pass for nothing.
     The hierarchy is still carried by size and by the recessed card. */
  filter:
    drop-shadow(0 1px 1px rgba(44,34,22,0.26))
    drop-shadow(0 4px 8px rgba(44,34,22,0.18))
    drop-shadow(0 13px 22px rgba(44,34,22,0.14));
  opacity: 0.95;
}
.cmp-title { text-align: center; margin-bottom: 20px; }
.cmp-ours .cmp-title img { width: 172px; margin: 0 auto; }
.cmp-them .cmp-title { font-size: 19px; font-weight: 700; color: var(--gray-400); padding: 6px 0 4px; }
.cmp-list { display: flex; flex-direction: column; gap: 1px; }
.cmp-li { display: flex; gap: 11px; align-items: flex-start; padding: 10px 2px; font-size: 14.5px; line-height: 1.34; }
.cmp-ours .cmp-li { color: #26401F; font-weight: 700; border-top: 1px solid rgba(58,42,22,0.13); }
.cmp-them .cmp-li { color: var(--gray-600); font-weight: 500; border-top: 1px solid rgba(0,0,0,0.06); }
.cmp-li:first-child { border-top: none; }
.cmp-dot {
  flex: none; width: 21px; height: 21px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; margin-top: 1px;
}
.cmp-ours .cmp-dot { background: #4E7A52; color: var(--white); }
.cmp-them .cmp-dot { background: rgba(0,0,0,0.07); color: var(--gray-400); }
.cmp-note { margin-top: 18px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; color: rgba(58,42,22,0.62); }

/* ============================================ HOW TO USE ============================================ */
.howto-wrapper { background: #f5ede4; }
.howto-section { padding: var(--section-pad); max-width: var(--max-width); margin: 0 auto; text-align: center; }
.howto-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 48px; }
.howto-step {
  text-align: center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.howto-step:hover { transform: translateY(-6px); }
.howto-step-img {
  width: 100%; aspect-ratio: 4/3; border-radius: 16px; overflow: hidden;
  margin-bottom: 16px; background: var(--cream);
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.howto-step:hover .howto-step-img { box-shadow: 0 16px 48px rgba(0,0,0,0.1); }
.howto-step-img img { width: 100%; height: 100%; object-fit: cover; }
.step-number {
  width: 36px; height: 36px; background: var(--teal); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--white);
  margin: 0 auto 12px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 67, 69, 0.2);
  pointer-events: none; user-select: none; cursor: default;
}
.howto-step:hover .step-number { background: var(--gold); color: var(--teal); transform: scale(1.15); }
.howto-step h3 { font-size: 18px; font-weight: 700; color: var(--teal); margin-bottom: 8px; }
.howto-step p { font-size: 14px; color: var(--gray-600); line-height: 1.6; max-width: 280px; margin: 0 auto; }

/* ============================================ TESTIMONIALS ============================================ */

/* ============================================ FAQ ============================================ */
.faq-wrapper { background: #ebe3d9; }
.faq-section { padding: var(--section-pad); max-width: 800px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--gray-200);
}
.faq-question {
  width: 100%; background: none; border: none; padding: 20px 0; font-size: 16px;
  font-weight: 600; color: var(--teal); text-align: left; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; font-family: var(--font-body);
}

.faq-question::after {
  content: '+'; font-size: 22px; font-weight: 300; color: var(--gray-400);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); flex-shrink: 0; margin-left: 16px;
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--cream); text-align: center;
  line-height: 1; padding-bottom: 1px;
}
.faq-item.open .faq-question::after { content: '−'; background: var(--teal); color: var(--white); padding-bottom: 2px; }
.faq-answer {
  max-height: 0; overflow: hidden; padding: 0;
  font-size: 15px; color: var(--gray-600); line-height: 1.7;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), padding 0.4s ease;
}
.faq-item.open .faq-answer { max-height: 300px; padding: 0 0 32px; }

/* ============================================ SOCIAL PROOF — Editorial Grid ============================================ */
.sp-section {
  background: linear-gradient(180deg, var(--teal) 0%, #003233 100%);
  padding: 80px 0;
  overflow: hidden;
}
.sp-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.sp-section .sp-header {
  text-align: center;
  margin-bottom: 48px;
}
.sp-section .sp-eyebrow {
  font-size: 13px; text-transform: uppercase; letter-spacing: 2.5px;
  font-weight: 700; color: var(--gold); margin-bottom: 14px;
}
.sp-section .sp-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700; color: var(--white);
  line-height: 1.12; margin-bottom: 10px;
}
.sp-section .sp-subtitle {
  font-size: 16px; color: rgba(255,255,255,0.5);
}

.sp-grid {
  columns: 3;
  column-gap: 16px;
}
.sp-item {
  break-inside: avoid;
  margin-bottom: 16px;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.sp-item:hover {
  transform: translateY(-4px);
}

/* Photo card */
.sp-photo {
  position: relative;
  cursor: pointer;
}
.sp-photo .sp-video-thumb {
  width: 100%; border-radius: 16px; overflow: hidden; position: relative;
}
.sp-photo .sp-video-thumb img {
  width: 100%; height: 100%; display: block; border-radius: 16px;
  object-fit: cover;
}
.sp-photo .sp-play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s ease; z-index: 3;
}
.sp-photo:hover .sp-play-btn {
  background: rgba(0,0,0,0.6); transform: translate(-50%, -50%) scale(1.08);
}
.sp-photo .sp-play-btn::after {
  content: ''; width: 0; height: 0;
  border-top: 10px solid transparent; border-bottom: 10px solid transparent;
  border-left: 16px solid rgba(255,255,255,0.9);
  margin-left: 3px;
}
.sp-photo-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.5));
  border-radius: 0 0 16px 16px;
  display: flex; align-items: center; gap: 8px;
  z-index: 2;
}
.sp-photo-name {
  color: white; font-size: 13px; font-weight: 700;
}
.sp-photo-stars {
  color: var(--gold); font-size: 12px;
}

/* Video Modal */
.video-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.92);
  display: none; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s ease;
}
.video-modal.active { display: flex; opacity: 1; }
.video-modal video {
  max-height: 85vh; max-width: 90vw; border-radius: 16px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}
.video-modal-close {
  position: absolute; top: 24px; right: 32px;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  color: white; font-size: 24px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.video-modal-close:hover { background: rgba(255,255,255,0.2); }

/* Quote card */
.sp-quote {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 28px 24px;
  cursor: pointer;
  transition: background 0.3s;
}
.sp-quote:hover {
  background: rgba(255,255,255,0.1);
}
.sp-quote-stars {
  color: var(--gold); font-size: 14px; margin-bottom: 12px;
}
.sp-quote-text {
  color: rgba(255,255,255,0.85); font-size: 15px; line-height: 1.6;
  font-style: italic;
}
.sp-quote-meta {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.sp-quote-name {
  color: rgba(255,255,255,0.7); font-size: 13px; font-weight: 700;
}
.sp-quote-badge {
  color: var(--gold); font-size: 11px;
}

/* Photo placeholder colors */

/* Bottom */
/* Hidden extra review items */
.sp-more-item {
  display: none;
}
.sp-grid.sp-expanded .sp-more-item {
  display: block;
  animation: fadeInUp 0.5s ease both;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Show More */
.sp-show-more-wrap {
  text-align: center; margin-top: 32px;
}
.sp-show-more-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 36px; border-radius: 60px; width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8); font-size: 14px; font-weight: 600;
  letter-spacing: 0.5px; cursor: pointer;
  transition: all 0.3s ease; font-family: var(--font-body);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sp-show-more-btn:hover {
  background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.25);
  color: white; transform: translateY(-2px);
}
.sp-show-more-btn svg {
  transition: transform 0.3s ease;
}
.sp-show-more-btn.expanded svg {
  transform: rotate(180deg);
}

.sp-bottom {
  text-align: center; margin-top: 48px;
  padding-top: 32px;
}
.sp-rating {
  display: inline-flex; align-items: center; gap: 12px;
}
.sp-rating-stars { color: var(--gold); font-size: 22px; }
.sp-rating-num { font-size: 20px; font-weight: 800; color: var(--white); }
.sp-rating-count { font-size: 14px; color: rgba(255,255,255,0.4); }

@media (max-width: 768px) {
  .sp-grid { columns: 2; }
  .sp-rating { flex-direction: column; gap: 4px; align-items: center; }
  .sp-rating-stars { font-size: 24px; letter-spacing: 2px; }
  .sp-rating-num { font-size: 18px; }
  .sp-rating-count { font-size: 13px; }
}
@media (max-width: 480px) { .sp-grid { columns: 1; } }

/* ============================================ FINAL CTA ============================================ */
.final-cta-section {
  background: var(--teal); color: var(--white); padding: 80px 24px 160px; text-align: center;
  position: relative; overflow: hidden;
}
.final-cta-section::before {
  content: ''; position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  width: 120%; height: 180%;
  background: radial-gradient(ellipse at center, rgba(254, 196, 0, 0.08) 0%, transparent 60%);
  pointer-events: none;
}
.final-cta-inner { max-width: 600px; margin: 0 auto; position: relative; }
.final-cta-section h2 { font-family: var(--font-heading); font-size: 36px; margin-bottom: 16px; line-height: 1.2; }
.final-cta-section p { font-size: 16px; opacity: 0.85; line-height: 1.6; margin-bottom: 32px; }
.final-cta-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--gold); color: var(--teal); padding: 22px 48px; border-radius: 12px;
  font-size: 18px; font-weight: 900; letter-spacing: 1.87px; text-transform: uppercase;
  border: none; cursor: pointer; transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--font-body);
  position: relative; overflow: hidden;
  animation: pulseGlow 3s ease-in-out infinite;
  min-width: 380px;
}
.final-cta-button::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation: shimmer 3s ease-in-out infinite;
}
.final-cta-button:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(254, 196, 0, 0.45); }
.final-cta-lock { display: inline-flex; align-items: center; }
.final-cta-lock svg { width: 16px; height: 16px; fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.final-trust-strip {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  padding: 14px 0 0;
}
.final-trust-item { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.final-trust-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.final-trust-icon svg { width: 12px; height: 12px; fill: none; stroke: rgba(255,255,255,0.6); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.final-trust-text { font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 500; }
.final-trust-sep { font-size: 8px; color: rgba(255,255,255,0.3); line-height: 1; }

/* ============================================ STICKY BAR ============================================ */
.sticky-bar {
  position: fixed; bottom: -140px; left: 0; right: 0;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(12px);
  border-top: 1px solid var(--gray-200);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.1);
  z-index: 1000; padding: 12px 24px;
  transition: bottom 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.sticky-bar.visible { bottom: 0; }
.sticky-bar-inner { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sticky-bar-info { display: flex; align-items: center; gap: 16px; }
.sticky-bar-title { font-weight: 700; font-size: 15px; }
.sticky-bar-price { font-size: 15px; color: var(--teal); font-weight: 700; }
.sticky-bar-rating { color: var(--ann-bar-gold); font-size: 13px; }
.sticky-bar .cta-button { width: auto; padding: 14px 32px; font-size: 15px; margin: 0; animation: none; }
.sticky-bar .cta-button::before { display: none; }

/* ============================================ RESPONSIVE ============================================ */
@media (max-width: 768px) {
  /* Utility: hide desktop-only, show mobile-only */
  .desktop-only,
  .announcement-bar .desktop-only { display: none; }
  .mobile-only { display: inline; }

  /* Announcement bar */
  .announcement-bar { font-size: 11px; }

  /* Disable nav hide/show on mobile */
  .nav { transition: none; }
  .nav.nav-hidden { transform: none; }

  /* Hero & buy box */
  .hero { grid-template-columns: 1fr; gap: 12px; padding: 16px 16px 32px; }
  .buy-box { max-width: none; display: flex; flex-direction: column; }
  .buy-box .press-bar { order: 98; overflow-anchor: none; }
  .buy-box .mini-testimonial { order: 99; overflow-anchor: none; }
  .buy-box > * { min-width: 0; }
  .bb-faq ~ * { overflow-anchor: none; }
  .gallery { position: static; }
  .product-title { font-size: 26px; word-wrap: break-word; }
  .product-headline { font-size: 15px; }
  .rating-row { flex-wrap: nowrap; gap: 6px; }
  .stars { font-size: 16px; letter-spacing: 1px; }
  .rating-text { font-size: 12px; }
  .recommend-badge { font-size: 11px; margin-left: 2px; }
  .headline-tail { display: none; }

  /* Press bar */
  .press-bar { flex-direction: row; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; padding: 12px 0; border-top: 1px solid var(--gray-200); }
  .press-bar-label { display: none; }
  .press-logos { flex-wrap: wrap; }

  /* Sections */
  .section-heading { font-size: 28px; }
  .section-body { font-size: 15px; }
  .clinical-section { grid-template-columns: 1fr; }
  .clinical-img { min-height: 260px; }
  .clinical-img::after { background: linear-gradient(180deg, transparent 50%, #ebe1d3 100%); }
  .clinical-inner { padding: 40px 24px; }
  .clinical-inner .section-heading { font-size: 28px; }
  .clinical-stats { grid-template-columns: 1fr 1fr; }
  .mat-wrapper { padding: 48px 16px; }
  .mat-header { margin-bottom: 24px; }
  .mat-header .section-heading { font-size: 28px; }
  /* One intro scale on mobile too. .clinical-sub and .sp-subtitle previously
     had no override at all and sat at full size while every other intro
     dropped to 15px; .mat-header p was the only one at 14px. */
  .mat-header p,
  .clinical-sub,
  .sp-subtitle { font-size: 15px; }
  .mat-features { grid-template-columns: 1fr 1fr; margin-top: 16px; gap: 10px; }
  .mat-feat { padding: 16px 12px; }
  .mat-feat-icon { font-size: 24px; margin-bottom: 6px; }
  .mat-feat h3 { font-size: 11px; margin-bottom: 2px; }
  .mat-feat p { font-size: 12px; }
  .mat-trust {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px;
  }
  .mat-trust-pill { justify-content: center; white-space: nowrap; font-size: 10px; padding: 7px 10px; }
  .mat-trust-pill:nth-child(1),
  .mat-trust-pill:nth-child(4) { display: none; }

  /* Bamboo / Certification panel */
  .bamboo-panel .bamboo-content {
    flex-direction: column; text-align: center;
    padding: 40px 24px; gap: 20px;
  }
  .bamboo-seal { width: 80px; height: 80px; }
  .bamboo-seal-num { font-size: 18px; }
  .bamboo-seal-check { width: 22px; height: 22px; font-size: 11px; }
  .bamboo-panel .bamboo-text h3 { font-size: 20px; }
  .bamboo-panel .bamboo-text p { font-size: 13px; }
  .bamboo-badges { justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
  .bamboo-badge { font-size: 10px; }

  /* Comparison table */
  .comparison-section { padding: 48px 16px; }
  /* Stacked, so the lift that creates the hierarchy on desktop is dropped —
     vertical order does that job instead. */
  .cmp-grid { grid-template-columns: 1fr; gap: 14px; }
  .cmp-ours { transform: none; }
  .cmp-card { padding: 22px 18px 20px; }
  .cmp-shot { height: 120px; }
  .cmp-ours .cmp-shot img, .cmp-them .cmp-shot img { width: 72%; }
  .cmp-ours .cmp-title img { width: 138px; }
  .cmp-them .cmp-title { font-size: 16px; }
  .cmp-li { font-size: 13px; padding: 9px 2px; gap: 9px; }
  .cmp-dot { width: 19px; height: 19px; font-size: 10px; }

  /* Variants */

  

  

  /* Content grids */
  .howto-steps {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 12px;
    padding: 0 20px 30px 20px; margin-top: 32px; margin-bottom: -30px;
    scroll-padding-left: 20px;
    -ms-overflow-style: none; scrollbar-width: none;
    overscroll-behavior-x: none;
  }
  .howto-steps::-webkit-scrollbar { display: none; }
  /* Full-bleed carousel: the clip has to cancel exactly the section's own
     horizontal padding, no more. Hard-coded -24px did that on desktop but the
     mobile section only pads 16px, so the clip hung 8px past each edge of the
     viewport -- the whole document was 8px wider than the screen and a sliver
     of page background showed down the right-hand side. Derived from the same
     variable now, so it cannot drift again. */
  .howto-steps-clip { overflow: hidden; margin-left: calc(var(--section-pad-x) * -1); margin-right: calc(var(--section-pad-x) * -1); }
  .howto-section { overflow: visible; }
  .howto-step {
    width: 75vw; min-width: 75vw; flex-shrink: 0;
    scroll-snap-align: start; margin: 0;
    cursor: default; position: relative; border-radius: 16px; overflow: hidden;
  }
  .howto-step:hover { transform: none; }
  .howto-step:hover .howto-step-img { box-shadow: none; }
  .howto-step:hover .step-number { background: var(--gold); color: var(--teal); transform: none; }
  .howto-step-img { margin-bottom: 0; border-radius: 0; box-shadow: none; aspect-ratio: 3/4; }
  .howto-step .step-number {
    position: absolute; top: 16px; left: 16px; margin: 0;
    width: auto; height: auto; border-radius: 8px;
    padding: 6px 12px; font-size: 11px; font-weight: 700;
    background: rgba(255,255,255,0.92); color: var(--teal);
    box-shadow: none; text-transform: uppercase; letter-spacing: 0.5px;
  }
  .howto-step .step-number::before { content: 'Step '; }
  .howto-step h3 {
    position: absolute; bottom: 60px; left: 16px; right: 16px;
    font-size: 20px; font-weight: 800; color: var(--white);
    text-align: left; margin: 0; text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  .howto-step p {
    position: absolute; bottom: 16px; left: 16px; right: 16px;
    font-size: 14px; color: rgba(255,255,255,0.9); line-height: 1.5;
    text-align: left; margin: 0; max-width: none;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  }
  .howto-step-img::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
    pointer-events: none;
  }
  .howto-step-img { position: relative; }

  /* Social proof carousel — hide native scroll indicator via wrapper clip */
  .social-proof-bar { padding: 48px 16px; overflow: hidden; }
  
  .proof-quotes-clip { overflow: hidden; margin-left: -16px; margin-right: -16px; }
  .proof-quotes {
    display: flex; overflow-x: scroll; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 12px;
    padding: 0 16px 40px 16px; margin-bottom: -40px;
    scroll-padding-left: 16px;
    -ms-overflow-style: none; scrollbar-width: none;
    overscroll-behavior-x: none; touch-action: pan-x pan-y;
  }
  .proof-quotes::-webkit-scrollbar { display: none; }
  .proof-quote { width: 260px; min-width: 260px; flex-shrink: 0; scroll-snap-align: start; padding: 20px; font-size: 14px; }
  .quick-benefits { grid-template-columns: 1fr 1fr; }
  .quick-benefit.cred-row { grid-column: 1 / -1; }
  .quick-benefit br { display: inline; }

  /* Trust strips */
  .trust-strip { gap: 6px 16px; flex-wrap: wrap; display: grid; grid-template-columns: auto auto; justify-content: center; justify-items: center; }
  .trust-sep { display: none; }
  .final-trust-strip { gap: 8px 12px; flex-wrap: wrap; }
  .final-trust-sep { display: none; }

  /* Sticky bar & CTA */
  .pack-section { margin-bottom: 0; margin-top: 0; }
  .refill-row { margin: 16px 0; padding: 0; }
  .refill-sub { margin-top: 0; line-height: 1.2; font-size: 11px; }
  .refill-title { line-height: 1.2; font-size: 12px; }
  .buy-module { margin: 0; }
  .cta-button { font-size: 14px; letter-spacing: 1px; padding: 18px 16px; gap: 6px; white-space: nowrap; margin: 0; }
  .cta-price { font-size: 15px; }
  .cta-original { font-size: 12px; }
  .sticky-bar-inner { flex-direction: column; gap: 8px; }
  .sticky-bar-info { justify-content: center; }
  .sticky-bar-price { display: none; }
  .sticky-bar .cta-button { width: 100%; justify-content: center; }
  .final-cta-button { min-width: auto; width: 100%; }
  .final-cta-section h2 { font-size: 28px; }
  .final-cta-section p { font-size: 15px; }

  /* Misc */
  .stat-number { font-size: 30px; }
  .clinical-stat { padding: 14px 14px 13px; }
  .pack-benefit { white-space: normal; }
}

/* ============================================ BUY-BOX MICRO FAQ ============================================ */
.bb-faq {
  margin: 16px 0 0;
  overflow-anchor: none;
}
.bb-faq-item {
  border-top: 1px solid var(--gray-200);
}
.bb-faq-q {
  width: 100%;
  background: none;
  border: none;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  line-height: 1.4;
  transition: opacity 0.2s;
}
.bb-faq-q:hover { opacity: 0.7; }
.bb-faq-q::after {
  content: '+';
  font-size: 15px;
  font-weight: 400;
  color: var(--gray-400);
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.bb-faq-item.open .bb-faq-q::after { content: '−'; }
.bb-faq-a {
  max-height: 0;
  overflow: hidden;
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.6;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), padding 0.3s ease;
  padding: 0;
}
.bb-faq-item.open .bb-faq-a { max-height: 180px; padding-bottom: 12px; }

/* ============================================================================
   MOBILE CORRECTIONS
   Appended last so it wins the cascade without having to re-specify selectors.
   Everything here fixes something that was measurably wrong on a phone.
   ============================================================================ */
@media (max-width: 860px) {
  /* The science panel's labels live in a 7123-unit overlay pinned to viewport
     width, so their rendered size is font-size x (viewport / 7123). At the
     desktop 96 units that is 5.3px on a 390px phone. The phone labels are
     therefore plain HTML in CSS pixels, positioned over the same box — they
     stay welded to the face, but their size is a normal clamp with no ceiling
     and they wrap instead of overflowing if they ever run out of room. */
  .fx .lbl-d { display: none; }
  .fx-lbl { display: block; }
}

@media (max-width: 768px) {
  /* Section rhythm — this was never reduced, so FAQ/how-to/social kept 80px
     vertical and 24px horizontal padding while their neighbours had 48/16. */
  :root { --section-pad: 48px 16px; --section-pad-x: 16px; }

  /* Swap the desktop callouts for the stacked phone set. The labels keep the
     tap behaviour — same fade, same leader draw, same clock. */
  .tl-callouts-d { display: none; }
  .tl-callouts-m { display: block; }

  /* Taller stage to hold the stacked labels, and the layer box moves with it:
     330/1450 instead of 185/950. The tape itself is unchanged — same 72% of
     the stage width, same separation offsets. */
  .tl-stage { aspect-ratio: 1600 / 1450; }
  .tl-layers { top: 22.759%; }

  /* Leaders and dots still live in the SVG, because those are geometry and
     should scale with the artwork. vector-effect keeps the stroke a true
     hairline at any size, which is what the hand-tuned stroke-width used to
     be doing. The dasharray just has to exceed the longest leader (539u). */
  .tl-lbl { display: block; }
  .tl-callouts-m .tl-lead { stroke-dasharray: 700; stroke-dashoffset: 700; }
  .tl-stage.open .tl-callouts-m .tl-lead { stroke-dashoffset: 0; }

  /* The hint moves up under the tape; the floor is now label space. */
  .tl-hint { font-size: 11.5px; top: 65.4%; bottom: auto; }

  /* Scoped to the bar, not .section-heading, so the 28px reset never reaches it. */
  .social-proof-bar h2 { font-size: 26px; }
  .social-proof-sub { font-size: 15px; }

  /* Hover-only controls are unreachable on touch. The arrows were invisible
     but still tappable, sitting on top of the swipe area. */
  .gallery-arrow { display: none; }
  .gallery-counter {
    display: block; position: absolute; bottom: 10px; right: 10px; z-index: 3;
    background: rgba(0,67,69,0.72); color: #fff; font-size: 11px; font-weight: 700;
    letter-spacing: 0.5px; padding: 4px 9px; border-radius: 20px;
  }
  .review-arrow { opacity: 1; width: 44px; height: 44px; }
  .review-arrow.prev { left: -8px; }
  .review-arrow.next { right: -8px; }

  /* 48px avatar + two nowrap strings overflowed the fixed 260px quote card. */
  .proof-quote .quote-author { flex-wrap: wrap; gap: 8px; }
  .proof-quote .quote-avatar { width: 38px; height: 38px; }

  .nav { padding: 10px 16px; }
  .problem-wrapper { scroll-margin-top: 64px; }

  /* Smallest type on the page — 9px and 10px were below the legibility floor. */
  .bamboo-seal-std, .bamboo-seal-year { font-size: 11px; }
  .mat-trust-pill { font-size: 11px; }
  .stat-cite { font-size: 10.5px; }

  .video-modal-close { top: 8px; right: 8px; }
}

@media (max-width: 400px) {
  /* No tier existed below 768px, so a 320px phone was styled as a 767px one. */

  /* The stat cards stay 2x2 all the way down rather than dropping to a single
     column. At 320px that leaves each card ~139px wide, so the padding is
     pulled in on both the column and the cards to buy back horizontal room,
     and the label drops a point. Longest label ("less air needed to hit the
     same peak oxygen uptake...") then runs to 5 lines, which is the tallest
     card on the page but still shorter than the 4-in-a-row stack it replaces. */
  .clinical-inner { padding: 40px 16px; }
  .clinical-stats { gap: 10px; }
  .clinical-stat { padding: 12px 13px 11px; }
  .stat-number { font-size: 26px; }
  .stat-label { font-size: 12px; line-height: 1.3; }
  .cta-button { white-space: normal; flex-wrap: wrap; letter-spacing: 0.5px; padding: 16px 10px; }
  .final-cta-button { letter-spacing: 0.5px; padding: 16px 12px; }
  /* Benefits stay 2x2 down here too. At 320px the default 14px type and 16px
     padding put the widest line ("from congestion", 105px) into 96px of column,
     which is what forced the single column. Trimming the padding, the icon and
     a point of type gives 106px of room for a 98px line. */
  .quick-benefits { grid-template-columns: 1fr 1fr; gap: 7px; padding: 12px; }
  .quick-benefit { font-size: 13px; gap: 6px; }
  .quick-benefit .icon { width: 17px; height: 17px; font-size: 13px; }
  .quick-benefit.cred-row { font-size: 12px; }
}

/* ============================================
   SHOPIFY THEME OVERRIDE FIXES
   These !important rules prevent the Shopify theme from
   overriding our custom button/element styles.
   ============================================ */

/* CTA Button — prevent theme hover color changes */
.cta-button,
.final-cta-button,
.sticky-bar .cta-button {
  background: var(--gold) !important;
  color: var(--teal) !important;
  border: none !important;
  outline: none !important;
  text-decoration: none !important;
  box-shadow: none;
}
.cta-button:hover,
.final-cta-button:hover,
.sticky-bar .cta-button:hover {
  background: var(--gold-light) !important;
  color: var(--teal) !important;
  border: none !important;
  outline: none !important;
  text-decoration: none !important;
}
.cta-button:focus,
.final-cta-button:focus {
  color: var(--teal) !important;
  outline: none !important;
}
.cta-button:active,
.final-cta-button:active {
  color: var(--teal) !important;
}

/* BB FAQ (buy box mini-FAQ) — prevent theme button overrides */
.bb-faq-q {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--teal) !important;
  padding: 12px 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: left !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  outline: none !important;
}
.bb-faq-q:hover {
  background: none !important;
  color: var(--teal) !important;
  opacity: 0.7;
  box-shadow: none !important;
  text-decoration: none !important;
}
.bb-faq-q:focus {
  background: none !important;
  color: var(--teal) !important;
  box-shadow: none !important;
  outline: none !important;
}
.bb-faq-q::after {
  color: var(--gray-400) !important;
}

/* FAQ section buttons — also prevent theme overrides */
.faq-question {
  background: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  color: inherit !important;
  box-shadow: none !important;
  outline: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.faq-question:hover {
  background: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.faq-question:focus {
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Gallery arrow buttons */
.gallery-arrow {
  background: rgba(255,255,255,0.9) !important;
  border: none !important;
  box-shadow: none !important;
}
.gallery-arrow:hover {
  background: rgba(255,255,255,1) !important;
}
/* Review arrows */
.review-arrow {
  background: rgba(0,67,69,0.08) !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.review-arrow:hover {
  background: rgba(0,67,69,0.15) !important;
}
.variant-arrow {
  background: rgba(0,67,69,0.08) !important;
}
.variant-arrow:hover {
  background: rgba(0,67,69,0.15) !important;
}

/* Video modal close button */
.video-modal-close {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: white !important;
}
.video-modal-close:hover {
  background: rgba(255,255,255,0.2) !important;
  color: white !important;
}

/* Testimonial box — ensure visibility */
.mini-testimonial {
  background: #f5ede3 !important;
  border: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 80px;
}
.mini-testimonial #review-content {
  min-height: 50px;
}

/* ============================================
   SHOPIFY THEME OVERRIDES — DESKTOP ONLY
   Sticky gallery needs overflow:visible on ALL ancestors
   between .gallery and the viewport scroll container.
   On mobile we disable sticky entirely to avoid
   horizontal overflow and layout issues.
   ============================================ */

/* Global safety: prevent horizontal scroll — body only, NOT html.
   Setting overflow on [html] creates a new scroll context that
   breaks position:sticky throughout the page. */
body {
  overflow-x: hidden !important;
}

@media (min-width: 769px) {
  /* Shopify custom-liquid section wrapper */
  .shopify-section--custom-liquid,
  .section-custom-liquid,
  [id*="custom_liquid"] {
    overflow: visible !important;
  }

  /* Shopify block wrappers inside the section — these intermediate
     divs also need overflow:visible or they break sticky */
  .shopify-section--custom-liquid > div,
  .shopify-section--custom-liquid .shopify-block,
  .shopify-section--custom-liquid .shopify-app-block,
  [id*="custom_liquid"] > div {
    overflow: visible !important;
  }

  /* Hero section — theme may set overflow:hidden */
  section.hero,
  .hero {
    overflow: visible !important;
  }

  /* Gallery sticky — only on desktop */
  .gallery {
    position: sticky !important;
    top: 80px !important;
    align-self: start !important;
  }
}

/* Mobile: ensure gallery is NOT sticky and overflow is contained */
@media (max-width: 768px) {
  .gallery {
    position: static !important;
  }
  section.hero,
  .hero {
    overflow: hidden !important;
  }

@media (min-width: 769px) {
  .sk-nose-sec, .sk-nose-sec > div { overflow: visible !important; }
}