/* Momordica funnel — sales page
   Mobile-first. The single breakpoint is 768px (--breakpoint-md).
   Everything the prototype did with JS viewport detection is a real
   @media (min-width: 768px) block here. */

/* ============================================================
   Base
   ============================================================ */

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

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--c-bg);
  color: var(--c-text);
}

a { color: var(--c-teal); text-decoration: none; }
a:hover { color: var(--c-teal-dark); }

input, select, textarea { font-size: 16px; font-family: inherit; }

img { max-width: 100%; display: block; }

h1, h2, h3, p { margin: 0; }

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

@keyframes bumpGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14, 124, 119, .35); }
  50%      { box-shadow: 0 0 0 8px rgba(14, 124, 119, 0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   Accessibility primitives
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Visible focus ring on every interactive element. */
:focus-visible {
  outline: 3px solid var(--c-teal-dark);
  outline-offset: 2px;
}

.section--dark :focus-visible,
.section--plum :focus-visible,
.urgency :focus-visible {
  outline-color: var(--c-text-invert);
}

.btn:focus-visible {
  outline: 3px solid var(--c-text);
  outline-offset: 3px;
}

/* ============================================================
   Layout primitives
   ============================================================ */

.section { padding: var(--section-pad-y) var(--section-pad-x); }
.section--tight { padding: 48px var(--section-pad-x); }
.section--loose { padding: var(--sp-13) var(--section-pad-x); }
.section--alt  { background: var(--c-bg-alt); }
.section--dark { background: var(--c-dark); }
.section--plum { background: var(--c-plum); }

.wrap        { max-width: var(--w-wide); margin-inline: auto; }
.wrap--full  { max-width: var(--w-full); }
.wrap--mid   { max-width: var(--w-mid); }
.wrap--narrow{ max-width: var(--w-narrow); }
.wrap--820   { max-width: 820px; }
.wrap--960   { max-width: 960px; }
.wrap--1100  { max-width: 1100px; }

.center { text-align: center; }

.grid { display: grid; gap: var(--sp-6); }
.grid--auto-130 { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.grid--auto-150 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.grid--auto-170 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-4); }
.grid--auto-220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--auto-240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }

/* ============================================================
   Typography
   ============================================================ */

.h1 {
  font: 800 var(--fs-h1)/var(--lh-tight) var(--font-heading);
  color: var(--c-text);
  margin-bottom: var(--sp-6);
  text-wrap: pretty;
}

.h2 {
  font: 800 var(--fs-h2) var(--font-heading);
  color: var(--c-text);
  text-wrap: pretty;
}
.h2--lg { font-size: var(--fs-h2-lg); }
.h2--sm { font-size: var(--fs-h2-sm); }
.h2--invert { color: var(--c-text-invert); }

.lead {
  font: 400 var(--fs-lead)/var(--lh-loose) var(--font-body);
  color: var(--c-text-muted);
  max-width: 520px;
}

.body { font: 400 var(--fs-body)/var(--lh-loose) var(--font-body); color: var(--c-text-muted); }
.body--sm { font-size: var(--fs-sm); }

.eyebrow {
  display: inline-block;
  background: rgba(36, 15, 42, .08);
  color: var(--c-text);
  font: 700 var(--fs-2xs) var(--font-body);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px var(--sp-4);
  border-radius: var(--r-pill);
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--sp-4) 38px;
  border: 0;
  border-radius: var(--r-md);
  font: 700 var(--fs-lead) var(--font-body);
  color: var(--c-text-invert);
  cursor: pointer;
  text-align: center;
}

.btn--cta { background: var(--c-cta); box-shadow: var(--shadow-cta); }
.btn--cta:hover { color: var(--c-text-invert); filter: brightness(1.05); }
.btn--success { background: var(--c-success); }
.btn--success:hover { color: var(--c-text-invert); filter: brightness(1.05); }
.btn--lg { font-size: 19px; padding-inline: 48px; }
.btn--pulse { animation: pulse 2.2s infinite; }
.btn--block { display: flex; width: 100%; max-width: 420px; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--sp-6);
  border: 1px solid var(--c-teal);
  border-radius: var(--r-md);
  font: 700 var(--fs-xs) var(--font-body);
  color: var(--c-teal);
}

.link-quiet {
  display: inline-block;
  font: 600 var(--fs-xs) var(--font-body);
  color: var(--c-text-muted);
}

/* Decline ("Не, благодаря") links on dark/plum backgrounds:
   visually subordinate to the green button but still readable. */
.link-quiet--invert,
.section--dark .link-quiet,
.section--plum .link-quiet {
  color: var(--c-text-muted-invert);
}
.link-quiet--invert:hover,
.section--dark .link-quiet:hover,
.section--plum .link-quiet:hover {
  color: var(--c-text-invert);
}

/* ============================================================
   Cards & chips
   ============================================================ */

.card {
  background: var(--c-surface);
  border-radius: var(--r-xl);
  padding: 22px;
}
.card--bordered { border: 1px solid var(--c-border); }
.card--raised { background: var(--c-dark-raised); border-radius: var(--r-lg); padding: 26px; }

.chip {
  display: inline-block;
  font: 700 var(--fs-3xs) var(--font-body);
  padding: 4px var(--sp-3);
  border-radius: var(--r-sm);
}
.chip--teal { background: var(--c-teal-tint); color: var(--c-teal-dark); font-size: var(--fs-2xs); }
.chip--verified { background: var(--c-success-tint); color: var(--c-success-text); }
.chip--pill { background: var(--c-teal); color: var(--c-text-invert); border-radius: var(--r-pill); padding: 4px var(--sp-3); }
.chip--discount { background: var(--c-cta); color: var(--c-text-invert); font-size: var(--fs-2xs); font-weight: 800; }

.badge-ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-cta);
  color: var(--c-text-invert);
  font: 700 var(--fs-3xs) var(--font-body);
  padding: 5px var(--sp-4);
  border-radius: var(--r-pill);
  white-space: nowrap;
}

/* ============================================================
   Urgency bar
   ============================================================ */

.urgency {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--c-cta);
  color: var(--c-text-invert);
  text-align: center;
  padding: var(--sp-3) var(--sp-5);
  font: 700 var(--fs-sm) var(--font-body);
  letter-spacing: .3px;
}
.urgency b, .urgency .mono { font-weight: 800; }
.urgency .mono { font-family: ui-monospace, monospace; }

.urgency__long { display: none; }
.urgency__short { display: inline; }

@media (min-width: 768px) {
  .urgency__long { display: inline; }
  .urgency__short { display: none; }
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  background-image:
    linear-gradient(
      rgba(250, 243, 236, .18) 0%,
      rgba(250, 243, 236, .32) 26%,
      rgba(250, 243, 236, .86) 46%,
      var(--c-bg) 56%,
      var(--c-bg) 100%),
    url('../img/hero-bg-1.webp');
  background-size: cover, cover;
  background-position: center, center 22%;
}

.hero__inner {
  max-width: var(--w-full);
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Mobile order: imagery, CTA, then copy. */
.hero__media { order: 1; }
.hero__cta-mobile { order: 2; }
.hero__copy { order: 3; }

.hero__media {
  flex: 1 1 300px;
  min-width: 240px;
  display: flex;
  justify-content: center;
  position: relative;
}

.hero__glow {
  position: absolute;
  width: min(380px, 90%);
  height: min(380px, 90%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 124, 119, .18), transparent 70%);
}

.hero__bottle {
  height: 34vh;
  max-width: 58%;
  object-fit: contain;
  order: -1;               /* bottle sits left of the model */
  margin-right: -10%;      /* deliberate overlap */
  position: static;
  z-index: 1;
  filter: var(--shadow-img);
}

.hero__model {
  height: 34vh;
  max-width: 50%;
  object-fit: contain;
  position: relative;
  z-index: 3;              /* model in front of the bottle on mobile */
  transform: scaleX(-1);   /* she faces the product */
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .15));
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, rgba(0, 0, 0, .35) 93%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 78%, rgba(0, 0, 0, .35) 93%, transparent 100%);
}

/* max-width caps the fit-content sizing from the centered column flex —
   without it long single-line children (rating bar, trust row) push the
   whole column past the viewport on mobile. */
.hero__copy { flex: 1 1 400px; min-width: 260px; max-width: 100%; }

.hero__checklist { display: flex; flex-direction: column; gap: var(--sp-3); }

.hero__check {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font: 600 15px var(--font-body);
  color: var(--c-text);
}
.hero__check-icon {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c-teal);
  color: var(--c-text-invert);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs);
}

.hero__trust { display: flex; gap: 22px; flex-wrap: wrap; }
.hero__trust span { font: 600 var(--fs-xs) var(--font-body); color: var(--c-text-muted); }

.hero__cta-mobile {
  flex: 1 1 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.hero__cta-mobile span { text-align: center; }
.hero__cta-mobile .btn { animation: pulse 1.8s ease-in-out infinite; }
.hero__cta-mobile span { font: 600 var(--fs-2xs) var(--font-body); color: var(--c-text-muted); }

.hero__cta-desktop { display: none; }

.rating-bar {
  margin-top: var(--sp-8);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-5) 18px;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.rating-bar__score { font: 800 22px var(--font-heading); color: var(--c-text); }
.rating-bar__score small { font: 400 var(--fs-sm) var(--font-body); color: var(--c-text-muted); }
.rating-bar__meta { font: 600 var(--fs-xs) var(--font-body); color: var(--c-text-muted); }

@media (min-width: 768px) {
  .hero {
    background-image:
      linear-gradient(rgba(250, 243, 236, .9), rgba(250, 243, 236, .86)),
      url('../img/hero-bg-1.webp');
    background-position: center, center 40%;
  }

  .hero__inner {
    flex-direction: row;
    padding: 48px var(--sp-6) var(--sp-9);
    gap: 40px;
  }

  .hero__copy  { order: 1; }
  .hero__media { order: 2; }

  .hero__bottle {
    position: absolute;
    top: 8%;
    left: 2%;
    height: 460px;
    margin-right: 0;
    z-index: 2;
  }

  .hero__model { height: 500px; z-index: 1; }

  .hero__cta-mobile { display: none; }
  .hero__cta-desktop { display: inline-flex; }
}

/* ============================================================
   Pain points
   ============================================================ */

.pain__icon { margin-bottom: var(--sp-3); color: var(--c-text-invert); }
.pain__text { font: 600 15px/var(--lh-normal) var(--font-body); color: var(--c-text-invert); }

/* ============================================================
   Ingredients
   ============================================================ */

.ingredient {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 22px var(--sp-5);
  text-align: center;
}
.ingredient__icon {
  width: 64px; height: 64px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  background: var(--c-teal-tint);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
}
.ingredient__name { font: 700 15px var(--font-heading); color: var(--c-text); margin-bottom: var(--sp-1); }
.ingredient__desc { font: 400 var(--fs-xs) var(--font-body); color: var(--c-text-muted); }

/* ============================================================
   Benefits
   ============================================================ */

.benefit {
  background: var(--c-surface);
  padding: var(--sp-8) var(--sp-6);
  border-radius: var(--r-xl);
  text-align: center;
}
.benefit__icon { margin-bottom: var(--sp-3); color: var(--c-teal); display: flex; justify-content: center; }
.benefit__name { font: 700 var(--fs-body) var(--font-heading); color: var(--c-text); margin-bottom: 6px; }
.benefit__desc { font: 400 var(--fs-xs)/var(--lh-normal) var(--font-body); color: var(--c-text-muted); }

/* ============================================================
   How to use
   ============================================================ */

.steps { display: flex; gap: var(--sp-7); flex-wrap: wrap; justify-content: center; }
.step { flex: 1 1 220px; }
.step__num {
  width: 52px; height: 52px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  background: var(--c-plum);
  color: var(--c-text-invert);
  display: flex; align-items: center; justify-content: center;
  font: 800 var(--sp-6) var(--font-heading);
}
.step__text { font: 600 var(--fs-sm)/var(--lh-normal) var(--font-body); color: var(--c-text); }

/* ============================================================
   Testimonials
   ============================================================ */

.rating-breakdown {
  display: flex; justify-content: center; gap: var(--sp-5);
  margin-bottom: var(--sp-10); flex-wrap: wrap;
}
.rating-row {
  display: flex; align-items: center; gap: var(--sp-2);
  font: 600 var(--fs-2xs) var(--font-body); color: var(--c-text-muted);
}
.rating-row__track {
  width: 90px; height: 6px;
  background: var(--c-border);
  border-radius: var(--r-sm);
  overflow: hidden;
  display: inline-block;
}
.rating-row__fill { display: block; height: 100%; background: var(--c-teal); }

.testimonial__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.testimonial__avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  background-color: var(--c-bg-alt);
  object-fit: cover;
}
.testimonial__name { font: 700 var(--fs-xs) var(--font-body); color: var(--c-text); }
.testimonial__stars { color: var(--c-star); font-size: var(--fs-xs); }
.testimonial__quote { font: 400 var(--fs-sm)/var(--lh-loose) var(--font-body); color: var(--c-text); margin-bottom: var(--sp-3); }
.testimonial__tags { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ============================================================
   Trust strip
   ============================================================ */

.trust {
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  padding: 18px var(--sp-4);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
}
.trust__title { font: 700 var(--fs-xs) var(--font-body); color: var(--c-text); }
.trust__sub { font: 400 var(--fs-3xs)/1.4 var(--font-body); color: var(--c-text-muted); }

/* ============================================================
   Before / after
   ============================================================ */

.ba { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: var(--sp-4); }
.ba__name {
  text-align: center;
  font: 800 19px var(--font-heading);
  color: var(--c-teal-dark);
  margin: 2px 0 var(--sp-4);
  text-shadow: 0 1px 2px rgba(10, 92, 88, .18);
}
.ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.ba__frame { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; }
.ba__frame img { width: 100%; height: 100%; object-fit: cover; }
/* Placeholder until the real photos are supplied — replace .ba__slot with an <img>. */
.ba__slot { width: 100%; height: 100%; background: var(--c-bg-alt); }
.ba__label { text-align: center; font: 700 var(--fs-3xs) var(--font-body); color: var(--c-text-muted); margin-top: 6px; }
.ba__label--after { color: var(--c-teal-dark); }

.disclaimer { background: var(--c-bg-alt); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6); }
.disclaimer p { font: 400 var(--fs-2xs)/var(--lh-loose) var(--font-body); color: var(--c-text-muted); }

/* ============================================================
   Comparison
   ============================================================ */

.compare-cards { display: flex; flex-direction: column; gap: var(--sp-4); }
.compare-card { background: var(--c-surface); border-radius: var(--r-lg); padding: var(--sp-4); }
.compare-card__feature { font: 700 var(--fs-xs) var(--font-body); color: var(--c-text); margin-bottom: var(--sp-3); }
.compare-card__grid { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.compare-card__cell { flex: 1 1 40%; text-align: center; padding: var(--sp-2); }
.compare-card__cell--own { background: rgba(14, 124, 119, .08); border-radius: var(--r-md); }
.compare-card__cell-label { font: 600 var(--fs-3xs) var(--font-body); color: var(--c-text-muted); margin-bottom: 2px; }
.compare-card__cell--own .compare-card__cell-label { font-weight: 700; color: var(--c-teal-dark); }
.compare-card__cell-value { font: 600 var(--fs-sm) var(--font-body); color: var(--c-text-muted); }
.compare-card__cell--own .compare-card__cell-value { font-weight: 700; color: var(--c-text); }

.compare-table { display: none; }

@media (min-width: 768px) {
  .compare-cards { display: none; }

  .compare-table {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    background: var(--c-surface);
    border-radius: var(--r-xl);
    overflow: hidden;
  }
  .compare-table > * { padding: 12px var(--sp-4); }
  .compare-table__head { text-align: center; font: 700 var(--fs-xs) var(--font-body); color: var(--c-text-muted); padding: var(--sp-4); }
  .compare-table__head--own { background: var(--c-teal); color: var(--c-text-invert); font: 800 var(--fs-xs) var(--font-heading); }
  .compare-table__feature { border-top: 1px solid var(--c-bg-alt); font: 600 var(--fs-xs) var(--font-body); color: var(--c-text); }
  .compare-table__cell { border-top: 1px solid var(--c-bg-alt); text-align: center; font: 400 var(--fs-xs) var(--font-body); color: var(--c-text-muted); }
  .compare-table__cell--own { background: var(--c-teal-tint-soft); font-weight: 700; color: var(--c-text); }
}

/* ============================================================
   Pricing
   ============================================================ */

/* The cards are a real radio group: <fieldset> wraps sr-only
   <input type="radio"> + <label class="pkg"> pairs. */
.pricing__group {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.pkg {
  display: block;
  background: var(--c-surface);
  border-radius: var(--r-2xl);
  padding: var(--sp-8) var(--sp-7);
  border: 3px solid var(--c-border);
  position: relative;
  cursor: pointer;
  text-align: center;
}
.pkg__input:checked + .pkg { border-color: var(--c-teal); box-shadow: 0 10px 26px rgba(14, 124, 119, .18); }
.pkg__input:focus-visible + .pkg { outline: 3px solid var(--c-teal-dark); outline-offset: 3px; }

.pkg__img { height: 120px; width: auto; margin: var(--sp-2) auto var(--sp-4); object-fit: contain; }
.pkg__label { font: 700 var(--fs-body) var(--font-heading); color: var(--c-text); margin: var(--sp-2) 0 2px; }
.pkg__duration { font: 600 var(--fs-2xs) var(--font-body); color: var(--c-teal-dark); margin-bottom: var(--sp-1); }
.pkg__per { font: 400 var(--fs-2xs) var(--font-body); color: var(--c-text-muted); margin-bottom: var(--sp-5); }
.pkg__prices { margin-bottom: var(--sp-3); }
.pkg__compare { font: 400 15px var(--font-body); color: var(--c-text-faint); text-decoration: line-through; margin-right: var(--sp-2); }
.pkg__price { font: 800 var(--sp-8) var(--font-heading); color: var(--c-text); }
.pkg__radio { width: 22px; height: 22px; margin: 0 auto; border-radius: 50%; border: 2px solid var(--c-border); }
.pkg__input:checked + .pkg .pkg__radio { border-color: var(--c-teal); background: var(--c-teal); }

/* ============================================================
   Guarantee
   ============================================================ */

.guarantee-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-5);
  background: var(--c-surface);
  color: var(--c-plum);
  padding: var(--sp-6) var(--sp-9);
  border-radius: var(--r-2xl);
  margin: 0 auto var(--sp-6);
  box-shadow: var(--shadow-card);
}
.guarantee-badge__days { display: block; font: 800 30px var(--font-heading); }
.guarantee-badge__label { display: block; font: 700 var(--fs-sm) var(--font-body); letter-spacing: .5px; text-transform: uppercase; }

/* ============================================================
   FAQ
   ============================================================ */

.faq { border-bottom: 1px solid var(--c-border); }
.faq__q {
  width: 100%;
  min-height: 48px;
  padding: 18px var(--sp-1);
  background: none;
  border: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  font: 700 15px var(--font-body);
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
}
.faq__a { font: 400 var(--fs-sm)/var(--lh-loose) var(--font-body); color: var(--c-text-muted); padding: 0 var(--sp-1) 18px; }
.faq[hidden], .faq__a[hidden] { display: none; }

/* ============================================================
   Sticky mobile bar
   ============================================================ */

.sticky-buy {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
  padding: var(--sp-3) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  transform: translateY(100%);
  transition: transform .25s ease;
}
.sticky-buy.is-visible { transform: translateY(0); }
/* Двете fixed ленти долу никога една върху друга: докато consent банерът
   е отворен (класът го слага consent.js), лентата стои прибрана. */
html.mmc-consent-open .sticky-buy { transform: translateY(100%); }
.sticky-buy__total { font: 800 var(--fs-body) var(--font-heading); color: var(--c-text); }
.sticky-buy__qty { font: 600 var(--fs-3xs) var(--font-body); color: var(--c-text-muted); }
.sticky-buy .btn { min-height: var(--tap-min); padding-inline: var(--sp-6); font-size: var(--fs-sm); }

/* Subtle attention pulse, sticky button only. The global
   prefers-reduced-motion block above disables it automatically. */
@keyframes stickyPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--c-cta-shadow); }
  50%      { box-shadow: 0 0 0 9px rgba(192, 57, 43, 0); }
}
.sticky-buy .btn { animation: stickyPulse 3s ease-in-out infinite; }

@media (min-width: 768px) {
  .sticky-buy { display: none; }
}

/* ============================================================
   Footer (legal links + merchant data)
   ============================================================ */

.site-footer {
  background: var(--c-dark);
  /* extra bottom padding keeps the sticky buy bar off the links on mobile */
  padding: var(--sp-9) var(--section-pad-x) calc(var(--sp-9) + 72px);
  text-align: center;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--sp-6);
  margin-bottom: var(--sp-5);
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font: 600 var(--fs-xs) var(--font-body);
  color: var(--c-text-muted-invert);
}
.site-footer__link:hover { color: var(--c-text-invert); }

.site-footer__merchant,
.site-footer__copy {
  font: 400 var(--fs-2xs)/var(--lh-loose) var(--font-body);
  color: var(--c-text-muted-invert);
}
.site-footer__merchant { margin-bottom: var(--sp-2); }

@media (min-width: 768px) {
  .site-footer { padding-bottom: var(--sp-9); }
}

/* ============================================================
   Spacing utilities (token-driven)
   ============================================================ */

.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mt-8 { margin-top: var(--sp-8); }
.mt-9 { margin-top: var(--sp-9); }
.mt-10 { margin-top: var(--sp-10); }

.mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-7 { margin-bottom: var(--sp-7); }
.mb-8 { margin-bottom: var(--sp-8); }
.mb-9 { margin-bottom: var(--sp-9); }
.mb-10 { margin-bottom: var(--sp-10); }
.mb-11 { margin-bottom: var(--sp-11); }
.mb-12 { margin-bottom: var(--sp-12); }

.measure { max-width: 640px; margin-inline: auto; }
.measure--sm { max-width: 480px; margin-inline: auto; }

.link-inline { font: 700 var(--fs-sm) var(--font-body); }

/* ============================================================
   Component classes replacing the last inline styles
   ============================================================ */

.hero__lead { margin-bottom: 22px; }
.hero__eyebrow-gap { margin-top: 18px; }

.pkg__discount-row { margin-bottom: var(--sp-5); }
.pkg__note { font: 600 var(--fs-xs) var(--font-body); color: var(--c-text-muted); }
.pkg-grid { align-items: stretch; }

.guarantee-badge__stack { text-align: left; line-height: var(--lh-tight); }
.guarantee__title { font: 800 26px var(--font-heading); color: var(--c-text-invert); margin-bottom: 12px; }
.guarantee__text { font: 400 15px/var(--lh-loose) var(--font-body); color: var(--c-plum-soft); }

.final-cta__text { color: var(--c-plum-soft); }

.trust-grid { max-width: 820px; margin-inline: auto; }