/* ═══════════════════════════════════════════════════════════
   SHOWERENVY PDP v4 — BUILT FOR WOMEN 45+
   
   DESIGN FIRST PRINCIPLES:
   1. Base font 17px (not 16) — post-40 eye comfort
   2. Line-height 1.7 baseline — generous breathing room
   3. Serif for headlines (Cormorant) — warmth, editorial
   4. Sans for body (Inter) — clinical clarity
   5. Warm palette (ivory/terracotta/sage) — not tech-bro blue
   6. 48px minimum tap targets — Apple HIG for accessibility
   7. Max 65 chars per line — readability research
   8. Smooth scrolling with momentum on iOS
   9. Progressive disclosure — never wall of text
  10. Real customer voice, not marketing speak
═══════════════════════════════════════════════════════════ */

:root {
  /* Warm Editorial Palette — tested with 45+ focus groups */
  --ink: #1E1610;
  /* primary text */
  --ink-2: #3D2E28;
  /* warm dark */
  --ink-3: #5C4A42;
  /* warm medium */
  --ink-4: #8A7568;
  /* warm muted */

  --paper: #FBF8F4;
  /* main background — warm ivory */
  --paper-2: #F4EFE7;
  /* subtle section change */
  --paper-3: #EAE2D6;
  /* deeper section */
  --paper-4: #D9CFC0;
  /* darkest neutral */
  --white: #FFFFFF;

  --accent: #B8634A;
  /* warm terracotta — primary CTA */
  --accent-dk: #994F3A;
  /* CTA hover */
  --accent-lt: #D89280;
  /* light variant */
  --accent-pale: #F7E4DB;
  /* soft wash */

  --sage: #6B8764;
  /* secondary — nature, calm */
  --sage-dk: #4A6244;
  --sage-lt: #A8C49E;
  --sage-pale: #E4EEDD;

  --gold: #B8954E;
  /* tertiary accent — premium */
  --gold-lt: #D4B571;
  --gold-pale: #F4E8CD;

  --danger: #A64545;
  /* used for struck-through products */

  /* Typography */
  --serif: 'Cormorant Garamond', 'Garamond', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* Shadow system — warm, soft, natural */
  --shadow-1: 0 1px 2px rgba(61, 46, 40, .04), 0 2px 8px rgba(61, 46, 40, .06);
  --shadow-2: 0 2px 6px rgba(61, 46, 40, .06), 0 6px 20px rgba(61, 46, 40, .10);
  --shadow-3: 0 4px 12px rgba(61, 46, 40, .08), 0 14px 40px rgba(61, 46, 40, .15);
  --shadow-4: 0 10px 24px rgba(61, 46, 40, .12), 0 28px 64px rgba(61, 46, 40, .22);
  --shadow-glow: 0 0 0 4px rgba(184, 99, 74, .18);
}

/* ═══════════════════════════════════════════════════════════
   RESET & FOUNDATIONS
═══════════════════════════════════════════════════════════ */
.d-none {
  display: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  scroll-padding-top: 80px;
  /* for sticky header */
}

body {
  font-family: var(--sans);
  font-size: 17px;
  /* 45+ baseline */
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* iOS momentum scrolling */
body {
  -webkit-overflow-scrolling: touch;
}

/* Remove all default image behavior */
img {
  max-width: 100%;
  width: 100%;
  display: block;
  height: auto;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: var(--sans);
  cursor: pointer;
  border: 0;
  background: none;
  font-size: inherit;
}

ul,
ol {
  list-style: none;
}

input,
select,
textarea {
  font-family: var(--sans);
  font-size: 16px;
  /* iOS won't zoom on focus if 16+ */
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vid-d {
  display: block;
}

.vid-m {
  display: none;
}

@media (max-width: 767px) {
  .vid-d {
    display: none;
  }

  .vid-m {
    display: block;
  }
}

/* Grid child overflow protection — prevents CSS Grid blowout */
[class*="grid"]>*,
[class*="row"]>*,
[class*="cols"]>* {
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT CONTAINERS
═══════════════════════════════════════════════════════════ */
.wrap {
  max-width: 1160px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

.wrap-md {
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

.wrap-sm {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

.wrap-xs {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY SYSTEM
   Scaled for 45+ readability: larger, warmer, clearer
═══════════════════════════════════════════════════════════ */
.serif {
  font-family: var(--serif);
  font-weight: 400;
}

.serif em {
  font-style: italic;
  font-weight: 500;
}

/* Display — editorial serif headlines */
.h-display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-size: clamp(42px, 7vw, 84px);
}

.h-1 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-size: clamp(34px, 5.5vw, 60px);
}

.h-2 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-size: clamp(28px, 4.5vw, 46px);
}

.h-3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-size: clamp(22px, 3.2vw, 32px);
}

.h-4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.25;
  font-size: clamp(19px, 2.5vw, 24px);
}

.h-display em,
.h-1 em,
.h-2 em,
.h-3 em,
.h-4 em {
  font-style: italic;
  font-weight: 500;
}

/* Body — Inter, sized for post-40 eyes */
.body-xl {
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.75;
  color: var(--ink-3);
  font-weight: 400;
}

.body-lg {
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.75;
  color: var(--ink-3);
  font-weight: 400;
}

.body-md {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-3);
  font-weight: 400;
}

.body-sm {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-4);
  font-weight: 500;
}

.body-xs {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-4);
  font-weight: 500;
}

/* Eyebrow labels — above headlines */
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.eyebrow-sage {
  color: var(--sage-dk);
}

.eyebrow-lt {
  color: var(--accent-lt);
}

/* Colors */
.t-paper {
  color: var(--paper);
}

.t-paper2 {
  color: rgba(251, 248, 244, .75);
}

.t-paper3 {
  color: rgba(251, 248, 244, .55);
}

.t-ink {
  color: var(--ink);
}

.t-ink3 {
  color: var(--ink-3);
}

.t-accent {
  color: var(--accent);
}

.t-sage {
  color: var(--sage-dk);
}

.t-gold {
  color: var(--gold);
}

.t-center {
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   IMAGE PLACEHOLDER SYSTEM
   CSS-only realistic images. No SVG. Warm gradients
   that suggest the actual photo for creative team.
═══════════════════════════════════════════════════════════ */
.img-ph {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 20px;
}

/* Themed background gradients */
.img-ph.theme-product {
  background: linear-gradient(155deg, #1E1610 0%, #3D2E28 45%, #1E1610 100%);
}

.img-ph.theme-product-2 {
  background: linear-gradient(160deg, #3D2E28 0%, #5C4A42 50%, #2A1E18 100%);
  padding: 0;
}

.img-ph.theme-home {
  background: linear-gradient(145deg, #E8D8C4 0%, #D4BFA8 40%, #B89880 100%);
}

.img-ph.theme-vacation {
  background: linear-gradient(140deg, #F4E8D4 0%, #E4D5BC 40%, #D4BFA8 100%);
}

.img-ph.theme-bathroom {
  background: linear-gradient(150deg, #EFE4D4 0%, #D8C8B4 50%, #B8A088 100%);
}

.img-ph.theme-pipe {
  background: linear-gradient(155deg, #7A4A28 0%, #5A3418 50%, #3A2010 100%);
}

.img-ph.theme-filter-new {
  background: linear-gradient(160deg, #F8F0E4 0%, #EAE2D6 55%, #D4C8B8 100%);
}

.img-ph.theme-filter-old {
  background: linear-gradient(155deg, #8A5A2E 0%, #5C3818 50%, #3C2410 100%);
}

.img-ph.theme-steam {
  background: linear-gradient(145deg, #D4DCE4 0%, #A8B8C4 45%, #7A8C9C 100%);
}

.img-ph.theme-skin {
  background: linear-gradient(145deg, #F8E8D8 0%, #E8D0B8 50%, #D0B49C 100%);
}

.img-ph.theme-woman {
  background: linear-gradient(145deg, #E4D4C4 0%, #C8B4A4 50%, #A88C7C 100%);
}

.img-ph.theme-mirror {
  background: linear-gradient(150deg, #D0C0B0 0%, #A89484 50%, #7C6858 100%);
}

.img-ph.theme-drain {
  background: linear-gradient(155deg, #484038 0%, #2A2420 60%, #181410 100%);
}

.img-ph.theme-glow {
  background: linear-gradient(145deg, #F4E4D0 0%, #E8D0B4 40%, #D4AC88 100%);
  max-width: 500px;
  margin: 0 auto 44px;
  padding: 0;
}

@media (max-width: 960px) {
  .img-ph.theme-glow.ar-32 {
    aspect-ratio: 4 / 4;
  }
}

.img-ph.theme-sage {
  background: linear-gradient(145deg, #E4EEDD 0%, #C4D8BC 50%, #8AA878 100%);
}

.img-ph.theme-cabinet {
  background: linear-gradient(160deg, #EDE4D4 0%, #D4C4B4 45%, #B49C8C 100%);
}

.img-ph.theme-morning {
  background: linear-gradient(145deg, #F8E8D0 0%, #E4C8A8 50%, #C8A480 100%);
}

.img-ph.theme-hands {
  background: linear-gradient(150deg, #E4D0BC 0%, #CCB498 50%, #AC9476 100%);
}

/* Subtle noise overlay for realism */
.img-ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .08) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(0, 0, 0, .15) 0%, transparent 55%);
  pointer-events: none;
}

/* Dark gradient overlay for text readability on image */
.img-ph::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(30, 22, 16, .75) 0%,
      rgba(30, 22, 16, .35) 35%,
      rgba(30, 22, 16, .05) 65%,
      transparent 100%);
  pointer-events: none;
}

.img-ph>* {
  position: relative;
  z-index: 1;
}

.img-ph__tag {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(0, 0, 0, .55);
  color: var(--paper);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
}

.img-ph__tag.accent {
  background: var(--accent);
}

.img-ph__tag.gold {
  background: var(--gold);
  color: var(--ink);
}

.img-ph__tag.sage {
  background: var(--sage-dk);
}

.img-ph__icon {
  font-size: 46px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3));
  line-height: 1;
}

.img-ph__title {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--paper);
  line-height: 1.3;
  margin-bottom: 6px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
  text-align: center;
}

.img-ph__brief {
  font-size: 11px;
  color: rgba(251, 248, 244, .72);
  line-height: 1.55;
  font-style: italic;
  max-width: 280px;
  text-align: center;
}

.img-ph__brief strong {
  font-style: normal;
  color: rgba(251, 248, 244, .9);
  font-weight: 600;
}

/* Aspect ratios */
.ar-sq {
  aspect-ratio: 1/1;
}

.ar-43 {
  aspect-ratio: 4/3;
}

.ar-32 {
  aspect-ratio: 3/2;
}

.ar-169 {
  aspect-ratio: 16/9;
}

.ar-34 {
  aspect-ratio: 3/4;
}

.ar-45 {
  aspect-ratio: 4/5;
}

.ar-23 {
  aspect-ratio: 2/3;
}

/* ═══════════════════════════════════════════════════════════
   BUTTON SYSTEM — 48px+ tap targets for accessibility
═══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 700;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  white-space: nowrap;
  text-align: center;
  border: 0;
  line-height: 1.2;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--accent);
  color: var(--white);
  padding: 20px 38px;
  font-size: 17px;
  letter-spacing: 0.005em;
  box-shadow: 0 4px 20px rgba(184, 99, 74, .32), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.btn-primary:hover {
  background: var(--accent-dk);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(184, 99, 74, .42), inset 0 1px 0 rgba(255, 255, 255, .15);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-lg {
  padding: 22px 44px;
  font-size: 18px;
}

.btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
  padding: 18px 36px;
  font-size: 16px;
}

.btn-secondary:hover {
  background: var(--accent-pale);
}

.btn-dark {
  background: var(--ink-2);
  color: var(--paper);
  padding: 18px 34px;
  font-size: 16px;
}

.btn-dark:hover {
  background: var(--ink);
}

.btn-full {
  width: 100%;
  display: flex;
}

/* ═══════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR
═══════════════════════════════════════════════════════════ */
.announcement {
  background: var(--ink-2);
  color: var(--paper);
  text-align: center;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.announcement strong {
  color: var(--gold-lt);
  font-weight: 700;
}

.announcement .sep {
  opacity: 0.35;
  margin: 0 10px;
}

.announcement__timer {
  display: inline-block;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  color: var(--gold-lt);
  font-size: 15px;
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════ */
.header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(251, 248, 244, .94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(61, 46, 40, .08);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: padding 0.3s;
}

.header__logo {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.header__logo em {
  color: var(--accent);
  font-style: italic;
  font-weight: 500;
}

.header__center {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 600;
}

.header__stars {
  color: var(--gold);
  letter-spacing: 0.02em;
}

.header__sep {
  width: 1px;
  height: 18px;
  background: rgba(61, 46, 40, .15);
}

.header__cta {
  background: var(--accent);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
  transition: background 0.2s;
  letter-spacing: 0.01em;
}

.header__cta:hover {
  background: var(--accent-dk);
  color: var(--white);
}

/* ═══════════════════════════════════════════════════════════
   TICKER — scrolling social proof
═══════════════════════════════════════════════════════════ */
.ticker-wrap {
  background: var(--paper-2);
  border-bottom: 1px solid rgba(61, 46, 40, .06);
  padding: 12px 0;
  overflow: hidden;
}

.ticker-inner {
  display: flex;
  white-space: nowrap;
  animation: tickerScroll 20s linear infinite;
}

.ticker-inner:hover {
  animation-play-state: paused;
}

@keyframes tickerScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 32px;
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 500;
  flex-shrink: 0;
}

.ticker-stars {
  color: var(--gold);
  font-size: 12px;
  flex-shrink: 0;
}

.ticker-item::after {
  content: '·';
  color: var(--accent);
  font-size: 22px;
  margin-left: 32px;
  font-weight: 300;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════
   SECTIONS
═══════════════════════════════════════════════════════════ */
.section {
  position: relative;
  overflow-x: clip;
  padding: 96px 0;
}

.section--sm {
  padding: 64px 0;
}

.section--paper {
  background: var(--paper);
}

.section--paper-2 {
  background: var(--paper-2);
}

.section--paper-3 {
  background: var(--paper-3);
}

.section--dark {
  background: var(--ink-2);
  color: var(--paper);
}

.section--ink {
  background: var(--ink);
  color: var(--paper);
}

.section-intro {
  max-width: 680px;
  width: 100%;
  margin: 0 auto 64px;
  text-align: center;
}

.section-intro p {
  max-width: 580px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  background: linear-gradient(165deg, #2A1E18 0%, #3D2E28 35%, #2A1E18 100%);
  color: var(--paper);
  padding: 80px 0 100px;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 80% 30%, rgba(184, 99, 74, .15) 0%, transparent 60%),
    radial-gradient(ellipse 45% 50% at 10% 80%, rgba(107, 135, 100, .10) 0%, transparent 55%);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero__eyebrow-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.hero__pill {
  background: rgba(184, 99, 74, .2);
  border: 1px solid rgba(216, 146, 128, .35);
  color: var(--accent-lt);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero__stars-sm {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.hero__count {
  font-size: 13px;
  color: rgba(251, 248, 244, .55);
  font-weight: 600;
}

.hero__headline {
  color: var(--paper);
  margin-bottom: 28px;
}

.hero__sub {
  max-width: 520px;
  color: rgba(251, 248, 244, .78);
  margin-bottom: 36px;
}

/* Face stack */
.faces {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
}

.faces__stack {
  display: flex;
}

.faces__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid var(--ink-2);
  margin-left: -12px;
  background: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  overflow: hidden;
  flex-shrink: 0;
}

.faces__avatar:first-child {
  margin-left: 0;
}

.faces__avatar--plus {
  background: var(--accent);
  color: var(--paper);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.faces__text {
  font-size: 14px;
  color: rgba(251, 248, 244, .6);
  line-height: 1.45;
}

.faces__text strong {
  color: var(--paper);
  font-weight: 700;
}

.faces__stars {
  display: block;
  color: var(--gold);
  font-size: 13px;
  margin-bottom: 3px;
}

/* Hero CTA cluster */
.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 28px;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13px;
  color: rgba(251, 248, 244, .55);
  font-weight: 500;
}

.hero__meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero__meta-item::before {
  content: '✓';
  color: var(--sage-lt);
  font-weight: 800;
}

.hero__image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__image .img-ph {
  max-width: 500px;
  width: 100%;
  box-shadow: var(--shadow-4);
}

.img-ph.video {
  padding: 0;
}

.img-ph.video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-d {
  display: flex;
}

.video-m {
  display: none;
}

@media (max-width:767px) {
  .video-d {
    display: none;
  }

  .video-m {
    display: flex;
  }
}

/* Hero floating accent badge */
.hero__badge {
  position: absolute;
  top: 22px;
  left: 22px;
  background: var(--gold);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(184, 149, 78, .3);
}

/* ═══════════════════════════════════════════════════════════
   TRUST STRIP — below hero
═══════════════════════════════════════════════════════════ */
.trust-strip {
  background: var(--paper-2);
  border-bottom: 1px solid rgba(61, 46, 40, .08);
  padding: 20px 0;
}

.trust-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

.trust-strip__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 28px;
  border-right: 1px solid rgba(61, 46, 40, .1);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}

.trust-strip__item:last-child {
  border-right: 0;
}

.trust-strip__icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}

.trust-strip__item strong {
  color: var(--ink);
  font-weight: 700;
}

/* Mobile version stacks vertically, hidden on desktop */
.trust-strip-mobile {
  display: none;
  background: var(--paper-2);
  border-bottom: 1px solid rgba(61, 46, 40, .08);
  padding: 14px 20px;
  flex-direction: column;
}

.trust-strip-mobile__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(61, 46, 40, .07);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
}

.trust-strip-mobile__item:last-child {
  border-bottom: 0;
}

.trust-strip-mobile__icon {
  font-size: 22px;
  flex-shrink: 0;
}

.trust-strip-mobile__item strong {
  color: var(--ink);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   VILLAIN SECTION (Liquid Sandpaper)
═══════════════════════════════════════════════════════════ */
.villain__lede {
  max-width: 100%;
  padding-left: 24px;
  border-left: 3px solid var(--accent);
  margin-bottom: 56px;
}

.villain__lede .h-2 {
  color: var(--paper);
  margin-bottom: 20px;
}

.villain__lede p {
  color: rgba(251, 248, 244, .78);
  font-size: 18px;
  line-height: 1.75;
}

.grits-grid {
  display: grid;
  grid-template-columns: repeat(1, .67fr);
  gap: 20px;
  justify-content: center;
}

.grit {
  background: rgba(251, 248, 244, .05);
  border: 1px solid rgba(251, 248, 244, .1);
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  transition: border-color 0.3s;
}

.grit::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.grit--1::before {
  background: var(--accent);
}

.grit--2::before {
  background: var(--sage);
}

.grit--3::before {
  background: #7890AA;
}

.grit__image {
  aspect-ratio: 4/3;
  width: 100%;
}

.grit__image .img-ph {
  height: 100%;
  aspect-ratio: unset;
  border-radius: 0;
  box-shadow: none;
}

.grit__body {
  padding: 26px 22px 28px;
}

.grit__num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}

.grit--1 .grit__num {
  color: var(--accent-lt);
}

.grit--2 .grit__num {
  color: var(--sage-lt);
}

.grit--3 .grit__num {
  color: #A0B4C8;
}

.grit__name {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--paper);
  margin-bottom: 6px;
  line-height: 1.15;
}

.grit__sub {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
  opacity: 0.6;
}

.grit--1 .grit__sub {
  color: var(--accent-lt);
}

.grit--2 .grit__sub {
  color: var(--sage-lt);
}

.grit--3 .grit__sub {
  color: #A0B4C8;
}

.grit__body p {
  font-size: 15px;
  color: rgba(251, 248, 244, .7);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════
   VACATION CONTRAST — split image layout
═══════════════════════════════════════════════════════════ */
.vacation {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 72px;
  align-items: center;
}

.vacation__images {
  display: grid;
  grid-template-columns: 1, 1fr;
  gap: 14px;
}

.vacation__images img {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}

.vacation__card {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}

.vacation__image {
  aspect-ratio: 4/5;
}

.vacation__image .img-ph {
  aspect-ratio: unset;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}

.vacation__label {
  padding: 16px 18px 18px;
  text-align: center;
}

.vacation__card--home .vacation__label {
  background: var(--paper-3);
}

.vacation__card--away .vacation__label {
  background: var(--sage-pale);
}

.vacation__tag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.vacation__card--home .vacation__tag {
  color: var(--ink-4);
}

.vacation__card--away .vacation__tag {
  color: var(--sage-dk);
}

.vacation__title {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.3;
}

.vacation__caption {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.5;
}

.vacation__reveal {
  grid-column: 1 / -1;
  background: var(--ink-2);
  border-radius: var(--r-md);
  padding: 14px 18px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--gold-lt);
  letter-spacing: 0.01em;
}

/* Pull quote */
.pullquote {
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: 22px 26px;
  box-shadow: var(--shadow-1);
  margin-top: 20px;
}

.pullquote p {
  font-family: var(--serif);
  font-size: 19px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 12px;
  font-weight: 500;
}

.pullquote cite {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-4);
  font-style: normal;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════
   DIRTY FILTER PROOF
═══════════════════════════════════════════════════════════ */
.filter-proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 640px;
  margin: 48px auto 0;
}

.filter-proof__card {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-3);
  background: var(--ink-2);
}

.filter-proof__image .img-ph {
  aspect-ratio: unset;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.filter-proof__label {
  padding: 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.filter-proof__card--new .filter-proof__label {
  background: var(--sage-pale);
  color: var(--sage-dk);
}

.filter-proof__card--old .filter-proof__label {
  background: var(--accent-pale);
  color: var(--accent-dk);
}

/* ═══════════════════════════════════════════════════════════
   MECHANISM / STAGES
═══════════════════════════════════════════════════════════ */
.mechanism-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.stages {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 36px;
}

.stage {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  align-items: flex-start;
}

.stage__num {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--ink-2);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  flex-shrink: 0;
  border: 2px solid rgba(184, 99, 74, .3);
  box-shadow: 0 4px 16px rgba(61, 46, 40, .15);
}

.stage__name {
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 4px;
}

.stage__removes {
  font-size: 12px;
  font-weight: 800;
  color: var(--sage-dk);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.stage__desc {
  font-size: 15px;
  color: var(--ink-3);
  line-height: 1.7;
}

.mechanism-upgrade {
  margin-top: 20px;
  background: var(--ink-2);
  border-radius: var(--r-lg);
  padding: 22px 26px;
  color: var(--paper);
}

.mechanism-upgrade__kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-lt);
  margin-bottom: 10px;
}

.mechanism-upgrade__title {
  font-family: var(--serif);
  font-size: 19px;
  margin-bottom: 10px;
  line-height: 1.3;
}

.mechanism-upgrade p {
  font-size: 14.5px;
  color: rgba(251, 248, 244, .7);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT GRAVEYARD
═══════════════════════════════════════════════════════════ */
.graveyard-intro {
  max-width: 680px;
  margin-bottom: 48px;
}

.graveyard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.graveyard__card {
  background: var(--paper-2);
  border: 1px solid rgba(61, 46, 40, .08);
  border-radius: var(--r-lg);
  padding: 24px 22px;
}

.graveyard__icon {
  font-size: 30px;
  margin-bottom: 14px;
}

.graveyard__title {
  font-weight: 800;
  font-size: 15.5px;
  color: var(--ink);
  margin-bottom: 6px;
  text-decoration: line-through;
  text-decoration-color: rgba(166, 69, 69, .55);
  text-decoration-thickness: 1.5px;
}

.graveyard__cat {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  margin-bottom: 10px;
}

.graveyard__why {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.7;
  margin-bottom: 0.25rem;
}

.graveyard__name {
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 6px;
}

.graveyard__reframe {
  grid-column: 1 / -1;
  background: linear-gradient(145deg, var(--ink-2) 0%, var(--ink) 100%);
  border-radius: var(--r-xl);
  padding: 36px 40px;
  text-align: center;
  color: var(--paper);
  margin-top: 12px;
  box-shadow: var(--shadow-3);
  position: relative;
  overflow: hidden;
}

.graveyard__reframe::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 60% at 70% 30%, rgba(184, 99, 74, .1) 0%, transparent 60%);
  pointer-events: none;
}

.graveyard__reframe .h-3 {
  color: var(--paper);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.graveyard__reframe p {
  color: rgba(251, 248, 244, .8);
  font-size: 16px;
  line-height: 1.7;
  position: relative;
  z-index: 1;
  max-width: 580px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════
   COMPARISON TABLE
═══════════════════════════════════════════════════════════ */
.cmp-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  margin-top: 48px;
}

.cmp {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  min-width: 640px;
}

.cmp thead th {
  padding: 18px 20px;
  text-align: left;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--paper-3);
}

.cmp thead th.cmp__us {
  background: var(--ink-2);
  color: var(--paper);
}

.cmp thead th.cmp__competitor {
  color: var(--ink-4);
  background: var(--paper-2);
}

.cmp thead th small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.65;
  margin-top: 4px;
}

.cmp td {
  padding: 16px 20px;
  font-size: 14.5px;
  border-bottom: 1px solid rgba(61, 46, 40, .06);
  vertical-align: middle;
  color: var(--ink-2);
}

.cmp td.cmp__us-col {
  background: rgba(251, 248, 244, .55);
  font-weight: 600;
  color: var(--ink);
}

.cmp tr:last-child td {
  border-bottom: 0;
}

.cmp__label {
  font-weight: 700;
  color: var(--ink);
}

.cmp__yes {
  color: var(--sage-dk);
  font-weight: 800;
}

.cmp__no {
  color: var(--ink-4);
  font-style: italic;
  font-size: 13.5px;
}

.cmp-scroll-hint {
  text-align: center;
  font-size: 12px;
  color: var(--ink-4);
  margin-top: 12px;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════════════════════ */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 56px;
}

.testimonial {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: 30px 26px;
  border: 1px solid rgba(61, 46, 40, .08);
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.testimonial::before {
  content: '"';
  position: absolute;
  top: -12px;
  left: 16px;
  font-family: var(--serif);
  font-size: 120px;
  color: rgba(184, 99, 74, .06);
  line-height: 1;
  pointer-events: none;
}

.testimonial__stars {
  color: var(--gold);
  font-size: 15px;
  margin-bottom: 14px;
  position: relative;
}

.testimonial__text {
  font-size: 16px;
  color: var(--ink);
  line-height: 1.72;
  margin-bottom: 22px;
  position: relative;
  flex: 1;
  font-style: italic;
  font-family: var(--serif);
  font-weight: 500;
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}

.testimonial__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--paper-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.testimonial__name {
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
}

.testimonial__meta {
  font-size: 12.5px;
  color: var(--ink-4);
  margin-top: 2px;
}

.testimonial__verified {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--sage-dk);
  margin-top: 3px;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════
   JOURNEY TIMELINE — properly built for mobile + desktop
═══════════════════════════════════════════════════════════ */
.journey {
  position: relative;
  margin-top: 56px;
}

.journey__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.journey__line {
  position: absolute;
  top: 32px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(to right, var(--accent) 0%, var(--gold) 50%, var(--sage) 100%);
  z-index: 0;
  border-radius: 2px;
}

.journey__step {
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0 12px;
}

.journey__dot {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 26px;
  box-shadow: 0 4px 16px rgba(184, 99, 74, .15);
}

.journey__dot--last {
  border-color: var(--sage-dk);
  background: var(--sage-pale);
}

.journey__when {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 6px;
}

.journey__step--last .journey__when {
  color: var(--sage-dk);
}

.journey__headline {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.25;
  font-weight: 500;
}

.journey__body {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════════
   OFFER SECTION — Two offers, Bundle is hero
═══════════════════════════════════════════════════════════ */
.offer-section {
  background: linear-gradient(160deg, #2A1E18 0%, #3D2E28 45%, #1E1610 100%);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}

.offer-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 55% at 80% 20%, rgba(184, 99, 74, .12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 10% 80%, rgba(107, 135, 100, .08) 0%, transparent 55%);
}

.bundle-callout {
  max-width: 760px;
  margin: 0 auto 48px;
  background: linear-gradient(135deg, rgba(184, 99, 74, .15) 0%, rgba(184, 149, 78, .12) 100%);
  border: 1.5px solid rgba(212, 181, 113, .3);
  border-radius: var(--r-xl);
  padding: 28px 32px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.bundle-callout__kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 10px;
}

.bundle-callout__title {
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 28px);
  color: var(--paper);
  line-height: 1.25;
  margin-bottom: 12px;
}

.bundle-callout__sub {
  font-size: 15px;
  color: rgba(251, 248, 244, .72);
  line-height: 1.7;
  max-width: 580px;
  margin: 0 auto 18px;
}

.bundle-callout__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.bundle-callout__pill {
  background: rgba(251, 248, 244, .1);
  border: 1px solid rgba(251, 248, 244, .18);
  color: var(--paper);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: var(--r-pill);
}

.bundle-callout__pill--gold {
  background: rgba(184, 149, 78, .25);
  border-color: rgba(212, 181, 113, .4);
  color: var(--gold-lt);
}

.offers {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 20px;
  align-items: start;
  position: relative;
  z-index: 1;
}

.offer-card:has(input[name="prodType"]:checked) {
  opacity: 1;
}

.offer-card {
  cursor: pointer;
  height: 100%;
  opacity: 0.65;
}

.offer-card:has(input[name="prodType"]:checked) {
  opacity: 1;
}

.offer-card input {
  display: none;
}

.offer-card__inner {
  background: rgba(250, 248, 245, .06);
  border: 2px solid rgba(250, 248, 245, .12);
  border-radius: var(--r-xl);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.offer-card input:checked+.offer-card__inner {
  border-color: var(--accent);
  background: rgba(196, 112, 88, .1);
  box-shadow: var(--shadow-glow);
}

.offer-card--hero .offer-card__inner {
  background: rgba(250, 248, 245, .09);
  border-color: rgba(232, 201, 106, .35);
}

.offer-card--hero input:checked+.offer-card__inner {
  border-color: var(--accent-lt);
  background: rgba(196, 112, 88, .13);
}

.offer-card__recurring {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(250, 248, 245, .5);
  margin-top: 4px;
  margin-bottom: 15px;
  padding: 8px 0px;
  border-radius: var(--r-sm);
  line-height: 1.45;
  text-transform: none;
}

.offer-card__recurring strong {
  color: var(--paper);
  font-weight: 700;
}

.offer-card--hero .offer-card__recurring {
  color: rgba(250, 248, 245, .65);
}

.offer-card--hero .offer-card__recurring strong {
  color: var(--gold-lt);
}

.offer-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 20px;
  border-radius: 0 0 var(--r-md) var(--r-md);
}

.offer-card__check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(250, 248, 245, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: transparent;
  margin-bottom: 18px;
  margin-top: 8px;
  transition: all 0.22s;
  margin: 8px 5px 8px 0;
}

.offer-card input:checked+.offer-card__inner .offer-card__check {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.offer-card__input {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(250, 248, 245, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: transparent;
  margin-bottom: 18px;
  margin-top: 8px;
  transition: all 0.22s;
  margin: 8px 5px 8px 0;
}

.offer-card__value-box input:checked+.offer-card__value-row .offer-card__input {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.offer-card__type {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, .4);
  margin-bottom: 8px;
}

.offer-card input:checked+.offer-card__inner .offer-card__type {
  color: var(--accent-lt);
}

.offer-card__value-box {
  background: rgba(232, 201, 106, .1);
  border: 1px solid rgba(232, 201, 106, .22);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 20px;
  position: relative;
}

.offer-card__value-box:has(input:checked) {
  background: var(--ink-4);
  border-color: var(--ink-2);
  color: var(--white);
}

.offer-card__value-row {
  display: flex;
  align-items: center;
  padding: 5px 0;
  font-size: 13.5px;
}

.offer-card__value-label {
  color: rgba(250, 248, 245, .65);
  font-weight: 600;
  display: flex;
  line-height: normal;
  flex-direction: column;
}

.offer-card__value-val {
  font-weight: 700;
  color: var(--paper);
  margin-left: auto;
}

.offer-card__value-row--total .offer-card__value-label {
  color: var(--gold-lt);
  font-weight: 700;
}

.offer-card__value-row--total .offer-card__value-val {
  color: var(--gold-lt);
  font-size: 15px;
}

.offer-card__type {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 248, 244, .4);
  margin-bottom: 8px;
}

.offer-card input:checked+.offer-card__inner .offer-card__type {
  color: var(--accent-lt);
}

.offer-card__name {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 28px);
  color: var(--paper);
  margin-bottom: 8px;
  line-height: 1.2;
}

.offer-card__tagline {
  font-size: 14px;
  color: rgba(251, 248, 244, .6);
  line-height: 1.65;
  margin-bottom: 24px;
}

.offer-card__price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}

.offer-card__price {
  font-family: var(--serif);
  font-size: clamp(40px, 4.5vw, 54px);
  color: var(--paper);
  line-height: 1;
  font-weight: 500;
}

.offer-card__was {
  font-size: 18px;
  color: rgba(251, 248, 244, .4);
  text-decoration: line-through;
}

.offer-card__save {
  font-size: 11px;
  font-weight: 800;
  color: var(--white);
  background: var(--accent);
  padding: 4px 11px;
  border-radius: var(--r-pill);
  letter-spacing: 0.04em;
}

.offer-card__per-day {
  font-size: 13.5px;
  color: rgba(251, 248, 244, .45);
  margin-bottom: 22px;
  font-weight: 500;
}

.offer-card__value-box {
  background: rgba(212, 181, 113, .1);
  border: 1px solid rgba(212, 181, 113, .22);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 20px;
}

.offer-card__value-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 13.5px;
}

.offer-card__value-row--total {
  border-top: 1px solid rgba(212, 181, 113, .2);
  padding-top: 10px;
  margin-top: 6px;
}

.offer-card__value-label {
  color: rgba(251, 248, 244, .65);
}

.offer-card__value-val {
  font-weight: 700;
  color: var(--paper);
}

.offer-card__value-row--total .offer-card__value-label {
  color: var(--gold-lt);
  font-weight: 700;
}

.offer-card__value-row--total .offer-card__value-val {
  color: var(--gold-lt);
  font-size: 15px;
}

.offer-card__divider {
  height: 1px;
  background: rgba(251, 248, 244, .1);
  margin: 18px 0;
}

.offer-card__inc-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(251, 248, 244, .35);
  margin-bottom: 14px;
}

.offer-card__list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}

.offer-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14.5px;
  color: rgba(251, 248, 244, .78);
  line-height: 1.55;
}

.offer-card__list li::before {
  content: '✓';
  color: var(--sage-lt);
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.offer-card__note {
  background: rgba(251, 248, 244, .06);
  border: 1px solid rgba(251, 248, 244, .1);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin-top: 18px;
  font-size: 13px;
  color: rgba(251, 248, 244, .55);
  line-height: 1.6;
}

.offer-card__note--hero {
  background: rgba(107, 135, 100, .14);
  border-color: rgba(168, 196, 158, .25);
  color: var(--sage-lt);
}

.offer-card__cta {
  background: var(--accent);
  color: var(--white);
  font-size: 17px;
  font-weight: 800;
  padding: 19px 24px;
  border-radius: var(--r-md);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  cursor: pointer;
  border: 0;
  transition: background 0.2s, transform 0.2s;
  letter-spacing: 0.005em;
}

.offer-card__cta:hover {
  background: var(--accent-dk);
  transform: translateY(-1px);
}

.offer-card__cta--secondary {
  background: rgba(251, 248, 244, .12);
  color: var(--paper);
  border: 1.5px solid rgba(251, 248, 244, .2);
}

.offer-card__cta--secondary:hover {
  background: rgba(251, 248, 244, .18);
}

.offer-card__cta-sub {
  text-align: center;
  font-size: 12.5px;
  color: rgba(251, 248, 244, .45);
  margin-top: 10px;
  font-weight: 600;
}

.offer-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 40px;
  position: relative;
  z-index: 1;
}

.offer-trust__item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: rgba(251, 248, 244, .55);
  font-weight: 500;
}

.offer-trust__item strong {
  color: rgba(251, 248, 244, .82);
  font-weight: 700;
}

.offer-trust__icon {
  font-size: 18px;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   CHECKOUT
═══════════════════════════════════════════════════════════ */
.checkout {
  background: var(--ink);
  padding: 72px 0;
  color: var(--paper);
}

.checkout-intro {
  text-align: center;
  max-width: 580px;
  margin: 0 auto 36px;
}

.checkout-intro .h-2 {
  color: var(--paper);
  margin-bottom: 14px;
}

.checkout-intro p {
  color: rgba(251, 248, 244, .72);
}

.checkout__box {
  background: var(--paper);
  border-radius: var(--r-2xl);
  padding: 44px 40px;
  color: var(--ink);
  box-shadow: var(--shadow-4);
}

.checkout__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 32px;
}

.checkout__summary {
  background: var(--ink-2);
  border-radius: var(--r-xl);
  padding: 26px 24px;
  color: var(--paper);
}

.checkout__summary-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251, 248, 244, .4);
  margin-bottom: 12px;
}

.checkout__summary-title {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--paper);
  margin-bottom: 6px;
  line-height: 1.25;
}

.checkout__summary-desc {
  font-size: 13.5px;
  color: rgba(251, 248, 244, .55);
  margin-bottom: 16px;
  line-height: 1.55;
}

.checkout__summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid rgba(251, 248, 244, .07);
  font-size: 14px;
  color: rgba(251, 248, 244, .65);
}

.checkout__summary-line:last-of-type {
  border-bottom: 0;
}

.checkout__summary-line--total {
  color: var(--paper);
  font-weight: 700;
  font-size: 17px;
  padding-top: 14px;
  border-top: 1px solid rgba(251, 248, 244, .12);
  border-bottom: 0 !important;
  margin-top: 4px;
}

.checkout__urgency {
  background: rgba(212, 181, 113, .1);
  border: 1px solid rgba(212, 181, 113, .22);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gold-lt);
}

.checkout__timer {
  font-family: 'Courier New', monospace;
  font-size: 17px;
  font-weight: 800;
}

.checkout__selector {}

.checkout__selector-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 12px;
}

.checkout__plan-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.checkout__plan-option {
  cursor: pointer;
}

.checkout__plan-option input {
  display: none;
}

.checkout__plan-row {
  padding: 13px 16px;
  border: 1.5px solid var(--paper-3);
  border-radius: var(--r-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: all 0.2s;
}

.checkout__plan-option input:checked+.checkout__plan-row {
  border: 2px solid var(--accent);
  background: var(--accent-pale);
}

.checkout__plan-name {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
}

.checkout__plan-desc {
  font-size: 12.5px;
  color: var(--ink-4);
  margin-top: 2px;
}

.checkout__plan-price {
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  text-align: right;
}

.checkout__plan-option input:checked+.checkout__plan-row .checkout__plan-price {
  color: var(--accent);
}

.checkout__plan-was {
  font-size: 12px;
  color: var(--ink-4);
  text-decoration: line-through;
  display: block;
  margin-top: 2px;
}

.checkout__section-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 18px 0 10px;
  border-top: 1px solid var(--paper-3);
  margin-top: 8px;
}

.checkout__section-title:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.field-row-1 {
  margin-bottom: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
}

.field__input {
  border: 1.5px solid var(--paper-3);
  border-radius: var(--r-md);
  padding: 15px 16px;
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: 0;
  width: 100%;
  min-height: 52px;
  /* 48px+ tap target */
}

.field__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(184, 99, 74, .14);
}

.field__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238A7568' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  padding-right: 40px;
  cursor: pointer;
}

.bill-ship-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  padding: 14px 16px;
  background: var(--paper-2);
  border-radius: var(--r-md);
  cursor: pointer;
}

.bill-ship-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.bill-ship-label {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}

.card-brands {
  display: flex;
  gap: 7px;
  margin-bottom: 14px;
}

.card-brand {
  background: var(--paper-2);
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-4);
  letter-spacing: 0.05em;
}

.card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.expiry-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.submit-btn {
  background: var(--accent);
  color: var(--white);
  font-size: 18px;
  font-weight: 800;
  padding: 22px 24px;
  border-radius: var(--r-md);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  cursor: pointer;
  border: 0;
  transition: background 0.2s;
  letter-spacing: 0.01em;
}

.submit-btn:hover {
  background: var(--accent-dk);
}

.submit-note {
  text-align: center;
  font-size: 13px;
  color: var(--ink-4);
  margin-top: 11px;
  font-weight: 600;
}

.submit-guarantee {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--paper-2);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-top: 18px;
}

.submit-guarantee__icon {
  font-size: 30px;
  flex-shrink: 0;
  line-height: 1;
}

.submit-guarantee__text {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.6;
}

.submit-guarantee__text strong {
  color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════
   GUARANTEE
═══════════════════════════════════════════════════════════ */
.guarantee {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 44px;
  align-items: center;
  max-width: 860px;
  margin: 0 auto;
}

.guarantee__seal {
  width: 140px;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.guarantee__seal-lbl {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--accent-lt);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 2px;
}

.guarantee__copy .h-3 {
  color: var(--ink);
  margin-bottom: 16px;
}

.guarantee__copy p {
  font-size: 17px;
  color: var(--ink-3);
  line-height: 1.75;
}

/* ═══════════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════════ */
.faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  margin-top: 48px;
}

.faq__item {
  border-bottom: 1px solid rgba(61, 46, 40, .1);
  padding: 20px 0;
}

.faq__q {
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  line-height: 1.4;
  user-select: none;
}

.faq__toggle {
  font-size: 26px;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.3s;
  line-height: 1;
  font-weight: 300;
}

.faq__item.open .faq__toggle {
  transform: rotate(45deg);
}

.faq__a {
  font-size: 14.5px;
  color: var(--ink-3);
  line-height: 1.8;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding-top 0.2s;
}

.faq__item.open .faq__a {
  max-height: 600px;
  padding-top: 14px;
}

/* ═══════════════════════════════════════════════════════════
   TRANSPARENCY
═══════════════════════════════════════════════════════════ */
.transparency {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.transparency__col {
  background: var(--paper-2);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  border: 1px solid rgba(61, 46, 40, .08);
}

.transparency__title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
}

.transparency__col--yes .transparency__title {
  color: var(--sage-dk);
}

.transparency__col--no .transparency__title {
  color: var(--ink-4);
}

.transparency__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.transparency__list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--ink-3);
  line-height: 1.65;
}

.transparency__list li::before {
  font-weight: 800;
  flex-shrink: 0;
  font-size: 14px;
  margin-top: 1px;
}

.transparency__col--yes li::before {
  content: '✓';
  color: var(--sage-dk);
}

.transparency__col--no li::before {
  content: '–';
  color: var(--ink-4);
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════
   STICKY BAR
═══════════════════════════════════════════════════════════ */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 300;
  background: var(--ink-2);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 -8px 32px rgba(30, 22, 16, .32);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sticky-cta.visible {
  transform: translateY(0);
}

.sticky-cta__left {
  min-width: 0;
  color: var(--paper);
}

.sticky-cta__name {
  font-family: var(--serif);
  font-size: 18px;
  white-space: nowrap;
  line-height: 1.2;
}

.sticky-cta__sub {
  font-size: 13px;
  color: var(--accent-lt);
  font-weight: 600;
  white-space: nowrap;
  margin-top: 2px;
}

.sticky-cta__btn {
  background: var(--accent);
  color: var(--white);
  font-size: 15px;
  font-weight: 800;
  padding: 13px 30px;
  border-radius: var(--r-pill);
  cursor: pointer;
  border: 0;
  transition: background 0.2s;
  flex-shrink: 0;
  letter-spacing: 0.005em;
}

.sticky-cta__btn:hover {
  background: var(--accent-dk);
}

/* ═══════════════════════════════════════════════════════════
   FINAL CTA
═══════════════════════════════════════════════════════════ */
.final-cta {
  background: linear-gradient(155deg, #2A1E18 0%, #3D2E28 50%, #1E1610 100%);
  padding: 100px 0 96px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 40%, rgba(184, 99, 74, .14) 0%, transparent 60%);
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.footer {
  background: var(--ink);
  color: rgba(251, 248, 244, .5);
  padding: 44px 24px;
  text-align: center;
  font-size: 13px;
  line-height: 1.9;
}

.footer__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 26px;
  margin-bottom: 18px;
  font-weight: 700;
}

.footer__links a {
  color: rgba(251, 248, 244, .65);
  transition: color 0.2s;
}

.footer__links a:hover {
  color: var(--paper);
}

.footer__disclosure {
  max-width: 760px;
  margin: 0 auto 14px;
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════════ */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fade-up.in {
  opacity: 1;
  transform: translateY(0);
}

.fade-up-2 {
  transition-delay: 0.1s;
}

.fade-up-3 {
  transition-delay: 0.2s;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .fade-up {
    opacity: 1;
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (max-width: 960px)
═══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {

  .wrap,
  .wrap-md,
  .wrap-sm,
  .wrap-xs {
    padding: 0 20px;
  }

  /* Header */
  .header__center {
    display: none;
  }

  /* Trust strip */
  .trust-strip {
    display: none;
  }

  .trust-strip-mobile {
    display: flex;
  }

  /* Hero */
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hero__image {
    order: -1;
  }

  .hero__image .img-ph {
    max-width: 400px;
    margin: 0 auto;
  }

  .hero__badge {
    top: 18px;
    left: 18px;
  }

  /* Villain */
  .grits-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Vacation */
  .vacation {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Mechanism */
  .mechanism-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  /* Graveyard */
  .graveyard {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  /* Compare */
  .cmp-wrap {
    border-radius: var(--r-lg);
  }

  /* Testimonials */
  .testimonials {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  /* Offer */
  .offers {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* Checkout */
  .checkout__top {
    grid-template-columns: 1fr;
  }

  .checkout__box {
    padding: 32px 24px;
  }

  /* Guarantee */
  .guarantee {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 28px;
  }

  .guarantee__seal {
    margin: 0 auto;
  }

  /* FAQ */
  .faq {
    grid-template-columns: 1fr;
  }

  /* Transparency */
  .transparency {
    grid-template-columns: 1fr;
  }

  /* Form rows */
  .field-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Filter proof */
  .filter-proof {
    gap: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (max-width: 600px)
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  .wrap,
  .wrap-md,
  .wrap-sm,
  .wrap-xs {
    padding: 0 18px;
  }

  /* Section spacing — tighter on mobile */
  .section {
    padding: 60px 0;
  }

  .section--sm {
    padding: 40px 0;
  }

  .section-intro {
    margin-bottom: 40px;
  }

  /* Header */
  .header {
    padding: 12px 18px;
  }

  .header__logo {
    font-size: 22px;
  }

  /* Announcement */
  .announcement {
    font-size: 12.5px;
    padding: 10px 14px;
    line-height: 1.5;
  }

  /* Hero */
  .hero {
    padding: 48px 0 60px;
  }

  .hero__grid {
    gap: 32px;
  }

  .hero__image .img-ph {
    max-width: 400px;
  }

  .hero__eyebrow-row {
    gap: 10px;
  }

  .hero__headline {
    margin-bottom: 22px;
  }

  .hero__sub {
    margin-bottom: 28px;
  }

  .hero__cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .hero__cta-row .btn {
    width: 100%;
    padding: 18px 28px;
    font-size: 16px;
  }

  .faces {
    gap: 12px;
    margin-bottom: 28px;
  }

  /* Villain */
  .villain__lede {
    padding-left: 18px;
  }

  .grit__body {
    padding: 22px 18px;
  }

  .grit__name {
    font-size: 22px;
  }

  /* Vacation */
  .vacation__images {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .vacation__reveal {
    font-size: 13.5px;
    padding: 12px 14px;
  }

  .pullquote {
    padding: 20px 20px;
  }

  .pullquote p {
    font-size: 17px;
  }

  /* Filter proof */
  .filter-proof {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Mechanism */
  .mechanism-grid {
    gap: 36px;
  }

  .stages {
    gap: 16px;
  }

  .stage {
    grid-template-columns: 52px 1fr;
    gap: 16px;
  }

  .stage__num {
    width: 52px;
    height: 52px;
    font-size: 18px;
  }

  .mechanism-upgrade {
    padding: 20px 22px;
  }

  /* Graveyard */
  .graveyard {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .graveyard__card {
    padding: 22px 20px;
  }

  .graveyard__reframe {
    padding: 28px 24px;
  }

  /* Testimonials */
  .testimonials {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 36px;
  }

  .testimonial {
    padding: 26px 22px;
  }

  .testimonial__text {
    font-size: 16px;
  }

  /* ═════════════════════════════════════════════════
     JOURNEY TIMELINE — vertical on mobile
     Transforms from 4-column grid to vertical cards
  ═════════════════════════════════════════════════ */
  .journey {
    margin-top: 40px;
  }

  .journey__line {
    display: none;
  }

  .journey__steps {
    grid-template-columns: 1fr;
    gap: 0;
    position: relative;
  }

  /* Vertical connecting line */
  .journey__steps::before {
    content: '';
    position: absolute;
    left: 31px;
    top: 32px;
    bottom: 32px;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent) 0%, var(--gold) 50%, var(--sage) 100%);
    border-radius: 2px;
  }

  .journey__step {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 18px;
    text-align: left;
    padding: 0 0 28px 0;
    align-items: start;
  }

  .journey__step:last-child {
    padding-bottom: 0;
  }

  .journey__dot {
    margin: 0;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
  }

  .journey__content {
    padding-top: 12px;
  }

  .journey__when {
    margin-bottom: 6px;
  }

  .journey__headline {
    font-size: 20px;
    margin-bottom: 8px;
  }

  .journey__body {
    font-size: 15px;
    line-height: 1.7;
  }

  /* Offer */
  .bundle-callout {
    padding: 24px 22px;
    margin-bottom: 36px;
  }

  .bundle-callout__title {
    font-size: 22px;
  }

  .bundle-callout__pills {
    gap: 8px;
  }

  .bundle-callout__pill {
    font-size: 12.5px;
    padding: 6px 13px;
  }

  .offer-card__inner {
    padding: 26px 22px;
  }

  .offer-card__name {
    font-size: 22px;
  }

  .offer-card__price {
    font-size: 42px;
  }

  .offer-card__list li {
    font-size: 14px;
  }

  /* Offer trust */
  .offer-trust {
    gap: 8px 16px;
  }

  .offer-trust__item {
    font-size: 13px;
  }

  /* Checkout */
  .checkout__box {
    padding: 26px 20px;
    border-radius: var(--r-xl);
  }

  .checkout__summary {
    padding: 22px 20px;
  }

  .checkout__summary-title {
    font-size: 19px;
  }

  .card-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .submit-btn {
    font-size: 17px;
    padding: 20px 22px;
  }

  /* Guarantee */
  .guarantee__seal {
    width: 110px;
    height: 110px;
  }

  .guarantee__seal-num {
    font-size: 40px;
  }

  .guarantee__copy p {
    font-size: 16px;
  }

  /* FAQ */
  .faq__item {
    padding: 18px 0;
  }

  .faq__q {
    font-size: 15.5px;
  }

  .faq__a {
    font-size: 14.5px;
  }

  /* Transparency */
  .transparency__col {
    padding: 22px 20px;
  }

  .transparency__list li {
    font-size: 14px;
  }

  /* Sticky bar */
  .sticky-cta {
    padding: 11px 16px;
  }

  .sticky-cta__sub {
    display: none;
  }

  .sticky-cta__name {
    font-size: 16px;
  }

  .sticky-cta__btn {
    font-size: 14px;
    padding: 12px 22px;
  }


  /* ═════════════════════════════════════════════════
     PAYMENT — MOBILE
  ═════════════════════════════════════════════════ */
  .express-checkout__buttons {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .express-btn {
    height: 52px;
    font-size: 14px;
  }

  .pay-methods {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  .pay-method__box {
    padding: 14px 16px;
    min-height: 58px;
  }

  .pay-method__label {
    font-size: 14.5px;
  }

  .card-icon {
    width: 32px;
    height: 22px;
  }

  .trust-badges {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 7px;
  }

  .trust-badge {
    padding: 11px 6px;
  }

  .trust-badge__icon {
    font-size: 20px;
  }

  .trust-badge__label {
    font-size: 10.5px;
  }

  .trust-badge__sub {
    font-size: 9.5px;
  }

  .submit-btn__total {
    font-size: 16px;
  }

  .submit-btn__total-label {
    font-size: 14px;
  }
}

/* Ultra-small screens (≤380px) */
@media (max-width: 380px) {
  .hero__headline {
    font-size: 34px;
    line-height: 1.05;
  }

  .h-2 {
    font-size: 28px;
  }

  .offer-card__price {
    font-size: 38px;
  }
}

/* ═══════════════════════════════════════════════════════════
   EXPRESS CHECKOUT RAIL — Top of checkout box
   Pattern: Shopify, Warby Parker, Ridge, AG1
   Gives repeat customers instant checkout, reduces friction
═══════════════════════════════════════════════════════════ */
.express-checkout {
  margin-bottom: 24px;
  display: none;
}

.express-checkout__label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-4);
}

.express-checkout__label::before,
.express-checkout__label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--paper-3);
}

.express-checkout__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.express-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--paper-3);
  background: var(--white);
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 800;
  font-size: 13px;
  overflow: hidden;
  position: relative;
}

.express-btn:hover {
  border-color: var(--ink-3);
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(61, 46, 40, .12);
}

.express-btn--apple {
  background: #000;
  color: #fff;
  border-color: #000;
  font-family: -apple-system, 'SF Pro Display', BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.express-btn--apple:hover {
  background: #1a1a1a;
  border-color: #1a1a1a;
}

.express-btn--apple .apple-logo {
  font-size: 18px;
  margin-right: 4px;
  line-height: 1;
  margin-top: -2px;
}

.express-btn--shop {
  background: #5A31F4;
  color: #fff;
  border-color: #5A31F4;
  letter-spacing: 0.02em;
}

.express-btn--shop:hover {
  background: #4920E0;
  border-color: #4920E0;
}

.express-btn--gpay {
  background: #fff;
  color: #3c4043;
  border-color: var(--paper-3);
}

.express-btn--gpay:hover {
  border-color: #3c4043;
}

.express-btn__gpay-logo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

.express-btn__gpay-g {
  color: #4285F4;
  font-weight: 700;
}

.express-btn__gpay-o {
  color: #EA4335;
  font-weight: 700;
}

.express-btn__gpay-o2 {
  color: #FBBC04;
  font-weight: 700;
}

.express-btn__gpay-g2 {
  color: #4285F4;
  font-weight: 700;
}

.express-btn__gpay-l {
  color: #34A853;
  font-weight: 700;
}

.express-btn__gpay-e {
  color: #EA4335;
  font-weight: 700;
}

.or-divider {
  display: none;
  align-items: center;
  gap: 14px;
  margin: 22px 0 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-4);
}

.or-divider::before,
.or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--paper-3);
}

/* ═══════════════════════════════════════════════════════════
   PAYMENT METHOD TABS — Card vs PayPal
   Pattern: Shopify, Stripe Checkout, Glossier
   Click to switch payment method — card fields hide/show
═══════════════════════════════════════════════════════════ */
.pay-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.pay-method {
  cursor: pointer;
  position: relative;
}

.pay-method input {
  display: none;
}

.pay-method__box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1.5px solid var(--paper-3);
  border-radius: var(--r-md);
  background: var(--white);
  transition: all 0.2s;
  min-height: 62px;
}

.pay-method input:checked+.pay-method__box {
  border: 2px solid var(--accent);
  background: var(--accent-pale);
  box-shadow: 0 0 0 3px rgba(184, 99, 74, .1);
}

.pay-method__radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--paper-4);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.pay-method__radio::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.2s;
}

.pay-method input:checked+.pay-method__box .pay-method__radio {
  border-color: var(--accent);
}

.pay-method input:checked+.pay-method__box .pay-method__radio::after {
  background: var(--accent);
}

.pay-method__label {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  flex: 1;
}

.pay-method__icons {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* Card brand icons — premium SVG-like look via gradients
   NOTE: These aren't SVGs, they're styled divs matching brand colors */
.card-icon {
  width: 36px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .15);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.card-icon--visa {
  background: linear-gradient(135deg, #1a1f71 0%, #2e3192 100%);
  font-family: 'Georgia', serif;
  font-style: italic;
  letter-spacing: -0.02em;
}

.card-icon--mastercard {
  background: linear-gradient(135deg, #14213d 0%, #1a1a1a 100%);
  font-size: 0;
  padding: 0;
}

.card-icon--mastercard::before,
.card-icon--mastercard::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.card-icon--mastercard::before {
  background: #EB001B;
  left: 5px;
}

.card-icon--mastercard::after {
  background: #F79E1B;
  right: 5px;
  mix-blend-mode: multiply;
}

.card-icon--amex {
  background: linear-gradient(135deg, #006fcf 0%, #0a4d8f 100%);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  font-size: 8px;
  letter-spacing: 0;
}

.card-icon--discover {
  background: linear-gradient(90deg, #ff6000 0%, #ff6000 60%, #000 60%, #000 100%);
  font-size: 7px;
  letter-spacing: -0.02em;
}

.card-icon--paypal {
  background: linear-gradient(135deg, #003087 0%, #009cde 100%);
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 9px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.03em;
}

/* PayPal redirect notice when PayPal is selected */
.paypal-notice {
  display: none;
  background: #f5f7fa;
  border: 1.5px solid #d0dae8;
  border-radius: var(--r-md);
  padding: 20px 22px;
  margin-top: 16px;
}

.pay-method-paypal-active .paypal-notice {
  display: block;
}

.pay-method-paypal-active .card-fields {
  display: none;
}

.paypal-notice__title {
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.paypal-notice__title .card-icon {
  width: 52px;
  height: 32px;
  font-size: 11px;
}

.paypal-notice p {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.65;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   ENHANCED SUBMIT BUTTON — Shield icon, clear action
═══════════════════════════════════════════════════════════ */
.submit-btn {
  position: relative;
}

.submit-btn__shield {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .18);
  border-radius: 50%;
  font-size: 11px;
  margin-right: 4px;
}

.submit-btn__total {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 18px;
  font-weight: 800;
}

.submit-btn__total-label {
  opacity: 0.85;
  font-weight: 600;
  font-size: 15px;
}

/* ═══════════════════════════════════════════════════════════
   TRUST BADGES — Below submit button
   Pattern: Ridge, AG1, Warby Parker
═══════════════════════════════════════════════════════════ */
.trust-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.trust-badge {
  text-align: center;
  padding: 14px 10px;
  background: var(--paper-2);
  border-radius: var(--r-md);
  border: 1px solid rgba(61, 46, 40, .06);
}

.trust-badge__icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 6px;
  display: block;
}

.trust-badge__label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.trust-badge__sub {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-4);
  margin-top: 2px;
  line-height: 1.35;
}

.comparison-wrapper {
  max-width: 1200px;
  margin: auto;
  background: #f7f7f7;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 220px repeat(3, 1fr);
  align-items: stretch;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

.feature-column {
  background: #f5f5f5;
  padding-top: 200px;
  border-right: 1px solid #e3e3e3;
}

.feature-item {
  height: 85px;
  display: flex;
  align-items: center;
  padding: 0 30px;
  font-weight: 600;
  border-bottom: 1px solid #dddddd;
  font-size: 18px;
}

.feature-item.highlight {
  color: #ff5d3d;
}

.product-column {
  padding: 0 24px 24px;
  position: relative;
  border-right: 1px solid #e4e4e4;
  background: #fafafa;
}

.product-column:last-child {
  border-right: none;
}

.product-column.featured {
  background: #cfe3da;
}

.top-image {
  width: 120px;
  height: 120px;
  margin: -35px auto 15px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.top-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 500;
  margin-bottom: 28px;
  color: #111;
}

.spec-box {
  background: #fff;
  border: 1px solid #d7d7d7;
  border-radius: 6px;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.4;
}

.featured .spec-box {
  border: none;
}

.icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
}

.icon.check {
  background: #008b63;
}

.icon.cross {
  background: #9f9f9f;
}

.product-title-custom {
  margin-bottom: 60px !important;
}

@media (max-width:991px) {
  .comparison-wrapper {
    grid-template-columns: 1fr;
  }

  .feature-column {
    display: none;
  }

  .product-column {
    border-right: none;
    border-bottom: 1px solid #ddd;
  }

  .product-title {
    min-height: auto;
  }
}