/* ==========================================================================
   Twinkling Tree — Post-purchase upsell (mobile)
   Palette, type and card treatment follow the LP 10 reference.
   ========================================================================== */

:root {
  --col: 430px;                    /* the phone column width */

  --cream:      #F8F1E3;
  --cream-warm: #FCF6E9;
  --card:       #FDFAF2;
  --card-line:  rgba(160, 132, 78, .28);

  --green:      #16311F;
  --green-mid:  #1E4429;
  --green-btn1: #275934;
  --green-btn2: #12301C;
  --gold:       #B98E2E;
  --gold-lt:    #E7C377;
  --gold-soft:  rgba(185, 142, 46, .3);
  --red:        #8E2323;
  --red-lt:     #A93030;

  --ink:        #3D392F;
  --muted:      #6B6456;

  --shadow-card: 0 1px 2px rgba(90, 70, 35, .05), 0 8px 26px rgba(90, 70, 35, .07);

  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Lora", Georgia, serif;
  --font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }

/* `clip` (not `hidden`) so no horizontal scroll container is created — fixed
   elements size to the initial containing block, which includes the desktop
   scrollbar gutter and would otherwise let the page drift sideways. */
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  position: relative;             /* containing block for the decor layer */
}

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

/* --------------------------------------------------------------------------
   Decorative layer — warm glow, twinkles, Norfolk Pine branches at the edges.
   Anchored to the document, not the viewport, so the foliage frames the top
   and bottom of the page the way LP 10 does — instead of sitting in the
   corners of every screen for the whole scroll. */
.decor {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--col), 100%);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.glow { position: absolute; border-radius: 50%; }

.glow--top {
  top: -320px;
  left: 50%;
  translate: -50% 0;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle,
    rgba(255, 236, 194, .95) 0%,
    rgba(252, 232, 196, .55) 34%,
    rgba(248, 241, 227, 0) 68%);
}

.glow--mid {
  bottom: -280px;
  left: 50%;
  translate: -50% 0;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle,
    rgba(255, 228, 178, .5) 0%,
    rgba(248, 241, 227, 0) 65%);
}

/* bokeh runs the full height, hugging the left and right edges */
.twinkles { position: absolute; inset: 0; }
.twinkle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8e2 0%, #ffdc95 45%, rgba(255, 200, 100, 0) 72%);
  animation: twinkle var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: .18; transform: scale(.8); }
  50%      { opacity: .95; transform: scale(1.15); }
}

/* Sized and pushed outward so the foliage bleeds in from the corners and
   frames the content, rather than sitting on top of the logo or headline. */
/* Deliberately understated: pushed well past the edges so only the outer tips
   of the foliage reach into the page, at low opacity. It should frame the
   content, never compete with it. */
/* Individual sprigs radiating in from each corner — two per corner, at
   different sizes and angles, mostly hanging off the edge. Sparse by design. */
.frond {
  position: absolute;
  height: auto;
  opacity: .62;
}

.frond--tl-a { top: 92px;    left: -64px;  width: 124px; transform: rotate(-14deg); }
.frond--tl-b { top: 176px;   left: -70px;  width: 94px;  transform: rotate(168deg); }

.frond--tr-a { top: 100px;   right: -66px; width: 120px; transform: rotate(14deg) scaleX(-1); }
.frond--tr-b { top: 186px;   right: -68px; width: 92px;  transform: rotate(-168deg) scaleX(-1); }

/* sit in the cream band above the white footer, so nothing overlaps the
   closing text and the page closes with the same framing it opened with */
.frond--bl-a { bottom: 262px; left: -58px;  width: 104px; transform: rotate(20deg); }
.frond--bl-b { bottom: 300px; left: -66px;  width: 84px;  transform: rotate(-10deg); }

.frond--br-a { bottom: 266px; right: -60px; width: 106px; transform: rotate(-20deg) scaleX(-1); }
.frond--br-b { bottom: 306px; right: -64px; width: 86px;  transform: rotate(10deg) scaleX(-1); }

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */
.page {
  position: relative;
  z-index: 1;
  width: min(var(--col), 100%);
  margin: 0 auto;
  padding: 0 20px;              /* the footer carries the sticky-bar clearance */
}

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(20px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */
/* Solid white bar, bled to the edges of the phone column, so the logo sits on
   its own surface and reads clearly against the cream page and the foliage. */
.masthead {
  position: relative;
  margin: 0 -20px 22px;
  padding: 18px 20px 16px;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(160, 132, 78, .18);
  box-shadow: 0 2px 10px rgba(90, 70, 35, .06);
  text-align: center;
}
.logo { position: relative; width: 208px; height: auto; }

.confirmed {
  margin: 0 auto 26px;
  padding: 10px 18px;
  max-width: 300px;
  border: 1px solid rgba(30, 68, 41, .22);
  border-radius: 999px;
  background: #FFFDF7;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--green-mid);
  text-align: center;
}
.confirmed__tick { color: #2C7A45; font-weight: 700; margin-right: 4px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { text-align: center; }

.eyebrow {
  margin: 0 0 16px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--red);
}
.eyebrow__spark { color: var(--gold); font-size: 14px; }

/* "Limited Edition" — a gold-bordered badge so it reads as a stamp on the
   product, not just another line of small caps above the headline. */
.limited-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 20px;
  padding: 12px 26px;
  border: 1.5px solid rgba(185, 142, 46, .6);
  border-radius: 999px;
  background: linear-gradient(180deg, #FFF9EA, #F7E9CB);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .26em;
  text-indent: .26em;               /* balances the trailing letter-spacing */
  text-transform: uppercase;
  color: #8F6A18;
  box-shadow: 0 0 0 5px rgba(185, 142, 46, .1), 0 5px 18px rgba(150, 112, 32, .18);
}
.limited-badge__rule {
  width: 16px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(143, 106, 24, .8), transparent);
}

.hero__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(25px, 7.5vw, 33px);   /* longer headline than LP 10's */
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.012em;
  text-wrap: balance;
  color: var(--green);
}

.hero__sub {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* The product name is the hero of the offer — sized up, warmer gold, and
   underscored so the eye lands on it after the headline. */
.product-name {
  display: inline-block;
  margin-top: 6px;
  padding-bottom: 7px;
  font-family: var(--font-display);
  font-size: 2.05em;                /* set over two lines, so it can go bigger */
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.005em;
  color: #A8791E;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 0 26px rgba(231, 195, 119, .5);
  border-bottom: 2px solid rgba(185, 142, 46, .35);
}
/* inside body copy it should read as emphasis, not as a second headline */
.product-name--inline {
  margin-top: 0;
  padding-bottom: 0;
  font-size: 1.14em;
  font-weight: 600;
  text-shadow: none;
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   Video
   -------------------------------------------------------------------------- */
.video { margin: 26px 0 0; }

.video__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #16120C;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(70, 52, 22, .14), 0 20px 44px rgba(70, 52, 22, .2);
  -webkit-tap-highlight-color: transparent;
}
.video__thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Ring pulses out from the play button already present in the artwork */
.video__pulse {
  position: absolute;
  top: 49%; left: 50%;
  width: 19%; aspect-ratio: 1;
  translate: -50% -50%;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  animation: playPulse 2.4s ease-out infinite;
}
@keyframes playPulse {
  0%   { transform: scale(1);   opacity: .85; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

.video__caption {
  position: absolute;
  left: 50%; bottom: 18px;
  translate: -50% 0;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(18, 14, 8, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-body);
  font-size: 15px;
  color: #FFF6E4;
  white-space: nowrap;
}
.video__dot { opacity: .6; margin: 0 2px; }

/* --------------------------------------------------------------------------
   Scarcity — the block the eye should land on
   -------------------------------------------------------------------------- */
.scarcity {
  margin: 22px 0 0;
  padding: 22px 20px 20px;
  border: 1.5px solid rgba(142, 35, 35, .3);
  border-radius: 16px;
  background: linear-gradient(180deg, #FFF6EC, #FCEEE2);
  box-shadow: var(--shadow-card), 0 0 0 5px rgba(142, 35, 35, .05);
  text-align: center;
}

.scarcity__headline {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
  color: var(--green);
}
.scarcity__headline em {
  font-style: normal;
  color: var(--red);
  border-bottom: 2px solid rgba(142, 35, 35, .28);
}
.scarcity__flame { font-size: 21px; }

.scarcity__count {
  margin: 0 0 16px;
  font-size: 19px;
  color: var(--ink);
}
.scarcity__num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: -.01em;
}

.stockbar { margin: 0 0 14px; }
.stockbar__track {
  height: 9px;
  border-radius: 999px;
  background: rgba(142, 35, 35, .13);
  overflow: hidden;
}
.stockbar__fill {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #A93030, #8E2323 62%, #C0912F);
  transition: width 1.5s cubic-bezier(.16, 1, .3, 1);
}
.stockbar__legend {
  display: flex;
  justify-content: space-between;
  margin: 7px 0 0;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}
.stockbar__left { color: var(--red); font-weight: 700; }

.scarcity__note {
  margin: 0;
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Countdown
   -------------------------------------------------------------------------- */
.countdown {
  margin: 16px 0 0;
  padding: 20px;
  border: 1px solid var(--card-line);
  border-radius: 16px;
  background: linear-gradient(180deg, #183822, #102818);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.countdown__label {
  margin: 0 0 10px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-lt);
}
.countdown__clock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin: 0 0 10px;
}
.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 76px;
  padding: 8px 6px 6px;
  border: 1px solid rgba(231, 195, 119, .3);
  border-radius: 10px;
  background: rgba(255, 246, 226, .06);
}
.countdown__digits {
  font-family: var(--font-ui);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #FFF6E4;
}
.countdown__cap {
  margin-top: 5px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(231, 195, 119, .8);
}
.countdown__sep {
  font-family: var(--font-ui);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
  color: rgba(231, 195, 119, .55);
}
.countdown__note {
  margin: 0;
  font-size: 13.5px;
  color: rgba(248, 241, 227, .72);
}
.countdown.is-urgent .countdown__digits { color: #FFC9C9; }
.countdown.is-urgent { animation: urgentPulse 1s ease-in-out infinite; }
@keyframes urgentPulse {
  0%, 100% { box-shadow: var(--shadow-card); }
  50%      { box-shadow: var(--shadow-card), 0 0 0 4px rgba(169, 48, 48, .22); }
}

/* --------------------------------------------------------------------------
   Offer + CTA
   -------------------------------------------------------------------------- */
.offer {
  margin: 16px 0 0;
  padding: 24px 20px 22px;
  border: 1px solid var(--card-line);
  border-radius: 16px;
  background: linear-gradient(180deg, #FFFDF7, #FBF3E4);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.offer__kicker {
  margin: 0 0 10px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}
.offer__prices {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
}
.offer__was {
  position: relative;
  font-family: var(--font-body);
  font-size: 26px;
  color: #A29A8B;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.offer__now {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--green);
}
.offer__now--sm { font-size: 44px; }
.offer__save {
  margin: 8px 0 0;
  font-size: 16px;
  color: var(--red);
}
.offer__save strong { font-weight: 700; }
.offer__pill {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--red);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #FFF3E2;
  vertical-align: 2px;
}
.offer__line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 18px;
  font-family: var(--font-display);
  font-size: 19px;
  font-style: italic;
  color: var(--gold);
}
.offer__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

/* Primary CTA */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 19px 16px;
  border: 1.5px solid var(--gold-lt);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--green-btn1), var(--green-btn2));
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #FFF6E4;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  box-shadow: 0 3px 10px rgba(22, 49, 31, .26), 0 12px 30px rgba(22, 49, 31, .22),
              inset 0 1px 0 rgba(255, 246, 228, .18);
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), box-shadow .18s ease;
}
.cta::after {                       /* slow gold sweep */
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 240, 200, .3), transparent);
  animation: sweep 4.5s ease-in-out 1.2s infinite;
}
@keyframes sweep {
  0%        { transform: translateX(0); }
  55%, 100% { transform: translateX(420%); }
}
.cta:active { transform: scale(.985); box-shadow: 0 2px 8px rgba(22, 49, 31, .26); }
.cta__tree { display: flex; width: 22px; color: var(--gold-lt); }
.cta__tree svg { width: 100%; height: auto; }

/* Decline — present and easy to find, deliberately quieter */
.decline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;                 /* keeps it a comfortable tap target */
  margin: 12px 0 0;
  padding: 10px;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(107, 100, 86, .45);
  cursor: pointer;
}
.decline:active { color: var(--ink); }

/* Trust row */
.trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--card-line);
  list-style: none;
}
.trust__item {
  display: flex;
  gap: 9px;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.trust__item span { display: block; }
.trust__item strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--green-mid);
}
.trust__icon { flex: 0 0 25px; width: 25px; color: var(--gold); }

/* --------------------------------------------------------------------------
   Content sections
   -------------------------------------------------------------------------- */
.section { margin: 42px 0 0; text-align: center; }

.section__eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}
.section__eyebrow--gold { color: var(--gold); }

.section__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.012em;
  color: var(--green);
}
.section__title em { font-style: italic; color: var(--gold); }

.section__lead {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.62;
  color: var(--muted);
}

/* Feature list */
.features { margin: 0; padding: 0; list-style: none; text-align: left; }
.feature {
  display: flex;
  gap: 14px;
  padding: 17px 0;
  border-top: 1px solid var(--card-line);
}
.feature:last-child { border-bottom: 1px solid var(--card-line); }
.feature__mark {
  flex: 0 0 9px;
  width: 9px; height: 9px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(185, 142, 46, .16), 0 0 14px rgba(231, 195, 119, .8);
}
.feature h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--green);
}
.feature p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* Comparison table */
.compare {
  width: 100%;
  margin: 4px 0 0;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13.5px;
  text-align: left;
}
.compare th, .compare td { padding: 12px 10px; border-bottom: 1px solid var(--card-line); }
.compare thead th {
  padding-bottom: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.compare tbody th {
  font-weight: 600;
  color: var(--green-mid);
}
.compare td { color: var(--muted); }
.compare .compare__ours {
  background: rgba(185, 142, 46, .09);
  font-weight: 700;
  color: var(--green);
}
.compare thead .compare__ours { color: var(--gold); }
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }
.compare tr:last-child .compare__ours { border-radius: 0 0 8px 8px; }
.compare thead .compare__ours { border-radius: 8px 8px 0 0; }

/* Reviews */
.reviews { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.review {
  padding: 17px 18px;
  border: 1px solid var(--card-line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-card);
  text-align: left;
}
.review__stars { margin: 0 0 7px; font-size: 14px; letter-spacing: .18em; color: var(--gold); }
.review__body {
  margin: 0 0 10px;
  font-size: 15.5px;
  line-height: 1.55;
  font-style: italic;
  color: var(--ink);
}
.review__by {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--green-mid);
}
.review__by span {
  margin-left: 7px;
  font-weight: 500;
  color: var(--muted);
}
.reviews__aggregate {
  margin: 14px 0 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--muted);
}
.reviews__aggregate strong { color: var(--green); font-weight: 700; }

/* Limited-edition story */
.section--edition {
  padding: 26px 20px;
  border: 1px solid var(--gold-soft);
  border-radius: 16px;
  background: linear-gradient(180deg, #FFFAEE, #FAF0DC);
  box-shadow: var(--shadow-card);
}
.edition__stamp {
  display: inline-block;
  margin: 4px 0 0;
  padding: 9px 18px;
  border: 1px dashed var(--gold-soft);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.edition__stamp strong { color: var(--red); font-weight: 800; }

/* --------------------------------------------------------------------------
   Finale
   -------------------------------------------------------------------------- */
.finale {
  margin: 42px 0 0;
  padding: 28px 20px 24px;
  border: 1.5px solid rgba(185, 142, 46, .38);
  border-radius: 18px;
  background: linear-gradient(180deg, #183822, #0E2315);
  box-shadow: 0 10px 34px rgba(22, 49, 31, .26);
  text-align: center;
  color: #F6EEDC;
}
.finale__eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-lt);
}
.finale__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 33px;
  font-weight: 500;
  line-height: 1.12;
  color: #FFF7E7;
}
.finale__body {
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(246, 238, 220, .82);
}
.finale__body strong { color: #FFD9A8; font-weight: 700; }
.finale__clock {
  margin: 0 0 16px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(231, 195, 119, .9);
}
.finale__clock strong {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: #FFF7E7;
}
.finale__prices {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin: 0 0 18px;
}
.finale .offer__was { color: rgba(246, 238, 220, .5); }
.finale .offer__now { color: #FFF7E7; }
.finale .decline { color: rgba(246, 238, 220, .68); text-decoration-color: rgba(246, 238, 220, .4); }
.finale .cta { border-color: var(--gold-lt); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
/* Solid white band bled to the column edges and run to the bottom of the page,
   mirroring the masthead. Nothing sits behind this text — no foliage, no glow —
   so the closing terms read cleanly. */
.foot {
  position: relative;
  z-index: 2;
  margin: 96px -20px 0;
  padding: 26px 22px 88px;
  background: #FFFFFF;
  border-top: 1px solid rgba(160, 132, 78, .2);
  text-align: center;
  font-size: 13.5px;
  line-height: 1.6;
  color: #5C5648;
}
.foot p { margin: 0 0 10px; }
.foot__brand {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-wrap: balance;
  color: #8F8676;
}

/* --------------------------------------------------------------------------
   Sticky bar
   -------------------------------------------------------------------------- */
.stickybar {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(var(--col), 100%);
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--card-line);
  background: rgba(250, 244, 232, .93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -6px 22px rgba(90, 70, 35, .12);
  transform: translate(-50%, 100%);
  transition: transform .38s cubic-bezier(.16, 1, .3, 1);
}
.stickybar.is-shown { transform: translate(-50%, 0); }
.stickybar__info { flex: 1; min-width: 0; font-family: var(--font-ui); line-height: 1.3; }
.stickybar__price { display: block; font-size: 15px; color: var(--muted); }
.stickybar__price s { font-size: 13px; opacity: .75; }
.stickybar__price strong { font-size: 18px; font-weight: 700; color: var(--green); }
.stickybar__timer { display: block; font-size: 11.5px; font-weight: 600; color: var(--red); }
.stickybar__timer b { font-variant-numeric: tabular-nums; }
.stickybar__cta {
  flex: 0 0 auto;
  padding: 13px 18px;
  border: 1px solid var(--gold-lt);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--green-btn1), var(--green-btn2));
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #FFF6E4;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(22, 49, 31, .25);
  -webkit-tap-highlight-color: transparent;
}
.stickybar__cta:active { transform: scale(.98); }

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .twinkle, .cta::after, .video__pulse, .countdown.is-urgent { animation: none; }
  .stockbar__fill { transition: none; }
  .stickybar { transition: none; }
}

/* Narrow phones */
@media (max-width: 360px) {
  .page { padding-left: 16px; padding-right: 16px; }
  .offer__now { font-size: 56px; }
  .countdown__unit { min-width: 66px; }
  .countdown__digits { font-size: 33px; }
}