/* ============================================================================
   CoachedByLeoamf - LOW-TICKET PRODUCT page · "Fat Loss Blueprint" (€37)
   Mid-funnel landing. Job: watch VSL → start (Step-1 contact modal) → checkout.

   Part of the Pixelated × Pure Focus design system (v1.0). Extends styles.css
   (tokens, brand chrome, .btn/.btn-primary, .reveal, .field, proof marquee) and
   offer.css (.o-wrap/.o-hero/.o-section, .vsl, .faq, .final-cta, .micro). This
   file adds ONLY the LTP-specific components: deliverable carousel, mechanism
   band, single 37€ pricing card, and the Step-1 contact modal.

   Per spec §10.2 - the "richest" page: display-xl hero, VSL centerpiece. LEOAMF
   Mono Green & Ink brand: ink canvas, ONE green accent (#1DB954) for the single
   key highlight (the €37 price); all former-gold trim is neutral white/grey.
   ========================================================================== */

/* ── Hero tuning (display-xl, the most dramatic of the 3 pages) ───────────── */
/* Desktop: let the headline breathe across more width (fewer forced breaks,
   reads as 2 clean lines) but at a slightly smaller overall size so the
   results section rises closer to the fold. */
.lt-hero h1 {
  max-width: 26ch;
  font-size: clamp(1.95rem, 1.5rem + 2vw, 3rem);
}
.lt-hero .o-sub {
  max-width: 52ch;
}

/* eyebrow micro text - calm neutral signal (reuses .eyebrow from styles.css) */
.lt-eyebrow {
  margin-bottom: 18px;
}
.lt-eyebrow b {
  color: var(--ink);
  font-weight: 700;
}

/* ── Above-the-fold tightening (hero -> VSL -> slim gate -> CTA) ───────────
   Trim the vertical air so the locked CTA rises as high as possible. We ONLY
   touch padding/margins and the slim gate; the VSL player is never resized.
   NOTE: the VSL is an 880px / 16:9 centrepiece (~495px tall on desktop), so on
   a 768px-tall laptop the video alone fills most of the fold; we lift the whole
   stack so the CTA sits as close under the fold as the un-shrunk video allows. */
.lt-hero.o-hero {
  padding-top: clamp(14px, 2.4vw, 24px);
}
.lt-hero h1 {
  margin-bottom: 12px;
}
.lt-hero .o-sub {
  margin-bottom: 14px;
}
/* the watch-hint sits between the VSL and the slim gate; keep it but slim it */
.lt-hero .vsl-hint {
  margin-top: 9px;
  min-height: 0;
}
.lt-hero .o-cta-zone {
  margin-top: 12px;
}

/* On short desktop viewports trim the air above the VSL further still, so the
   stack rides as high as it can without ever touching the player. */
@media (min-width: 561px) and (max-height: 820px) {
  .lt-hero.o-hero { padding-top: 12px; }
  .lt-hero .lt-eyebrow { margin-bottom: 10px; }
  .lt-hero h1 { margin-bottom: 8px; }
  .lt-hero .o-sub { margin-bottom: 10px; }
  .vsl-gate { margin-top: 10px; }
  .lt-hero .o-cta-zone { margin-top: 10px; }
}

/* ── Trust strip - airy pills, leading green check (design system 7.3) ────── */
.lt-trust {
  list-style: none;
  margin: 26px auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 640px;
}
.lt-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-80);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 40px;
}
.lt-pill .ic {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(29, 185, 84, 0.16);
  color: var(--emerald-2);
}

/* ── Deliverable carousel (swipeable · 6 cards · partial next visible) ─────── */
.lt-deliver {
  /* let the track bleed to the gutter so a partial next card peeks in */
  position: relative;
}
.lt-eyebrow-center {
  text-align: center;
  margin-bottom: 14px;
}
.lt-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: clamp(16px, 5vw, 28px);
  padding: 6px clamp(16px, 5vw, 28px) 22px;
  margin: 0 calc(-1 * clamp(16px, 5vw, 28px));
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.lt-track::-webkit-scrollbar {
  display: none;
}
.lt-track.dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.lt-card {
  scroll-snap-align: start;
  flex: 0 0 clamp(258px, 78vw, 318px);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--sh-3);
  transition: transform 0.25s var(--ease-out), border-color 0.2s, box-shadow 0.25s;
}
@media (hover: hover) {
  .lt-card:hover {
    transform: translateY(-4px);
    border-color: rgba(29, 185, 84, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--sh-4);
  }
}
.lt-prev {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(90% 80% at 25% 5%, rgba(29, 185, 84, 0.22), transparent 60%),
    linear-gradient(160deg, #1A1A1A 0%, #121212 100%);
  border-bottom: 1px solid var(--line);
}
.lt-num {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--emerald-2);
  background: rgba(10, 10, 10, 0.6);
  border: 1px solid var(--line-strong);
  padding: 4px 9px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.lt-card-body {
  padding: 18px 20px 22px;
}
.lt-card-body h3 {
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.lt-card-body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-64);
}

/* ── Realistic mini product UIs inside the deliverable previews ──────────────
   Each preview is a small, believable screenshot of the actual deliverable
   (score readout, ranked bottlenecks, macro split, roadmap, habit grid, review)
   rather than abstract bars. Sized to sit inside the 16/10 preview frame. */
.ltm {
  position: absolute;
  inset: 14px 15px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink);
}
.ltm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* the "01..06" index badge sits top-left, so clear the preview title past it */
  padding-left: 30px;
}
.ltm-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ltm-chip {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.02em;
  color: var(--ink-64);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 6px;
  white-space: nowrap;
}
.ltm-chip.gold {
  color: var(--gold);
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
}
.ltm-chip.up {
  color: var(--emerald-2);
  border-color: rgba(29, 185, 84, 0.42);
  background: rgba(29, 185, 84, 0.12);
}

/* Card 1 - Fat Loss Score: conic ring + labelled sub-scores */
.ltm-score {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 4px;
}
.lt-ring-wrap {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.lt-ring {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: conic-gradient(var(--emerald-2) 0%, var(--emerald) 52%, var(--gold) 72%, rgba(255, 255, 255, 0.1) 72%);
  -webkit-mask: radial-gradient(closest-side, transparent 64%, #000 65%);
  mask: radial-gradient(closest-side, transparent 64%, #000 65%);
}
.lt-ring-val {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  font-feature-settings: 'tnum' 1;
}
.lt-ring-val small {
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 600;
  color: var(--ink-46);
  margin-top: 1px;
}
.ltm-metrics {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ltm-metric {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 7px;
}
.ltm-metric .k {
  font-size: 9px;
  color: var(--ink-64);
}
.ltm-trk {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.ltm-trk i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--emerald-2), var(--emerald));
}
.ltm-trk.gold i {
  background: linear-gradient(90deg, var(--gold-2), var(--gold-deep));
}

/* Card 2 - Top 3 bottlenecks: ranked list with severity */
.ltm-rank {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ltm-rank li {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
}
.ltm-rn {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: rgba(29, 185, 84, 0.16);
  color: var(--emerald-2);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.ltm-rl {
  flex: 1;
  font-size: 10px;
  color: var(--ink-80);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ltm-sev {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.01em;
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
}
.ltm-sev.hi {
  color: #ff9485;
  background: rgba(229, 72, 77, 0.15);
}
.ltm-sev.mid {
  color: var(--gold);
  background: rgba(255, 255, 255, 0.12);
}
.ltm-sev.low {
  color: var(--emerald-2);
  background: rgba(29, 185, 84, 0.14);
}

/* Card 3 - Calories & macros: kcal headline + macro columns */
.ltm-kcal {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 2px;
}
.ltm-kcal .v {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 25px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' 1;
}
.ltm-kcal .u {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-46);
}
.ltm-macros {
  display: flex;
  gap: 9px;
  align-items: flex-end;
  margin-top: auto;
}
.ltm-macro {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ltm-mbar {
  width: 100%;
  height: 40px;
  border-radius: 5px 5px 2px 2px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.ltm-mbar i {
  display: block;
  width: 100%;
  border-radius: 5px 5px 0 0;
}
.ltm-mbar.p i {
  background: linear-gradient(180deg, var(--emerald-2), var(--emerald));
}
.ltm-mbar.c i {
  background: linear-gradient(180deg, #c9c9c9, #9a9a9a);
}
.ltm-mbar.f i {
  background: linear-gradient(180deg, var(--gold-2), var(--gold-deep));
}
.ltm-macro .g {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-80);
}
.ltm-macro .l {
  font-size: 8.5px;
  color: var(--ink-46);
}

/* Card 4 - Roadmap: phased vertical timeline */
.ltm-road {
  list-style: none;
  margin: 4px 0 0;
  padding: 0 0 0 1px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.ltm-road::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 5px;
  bottom: 6px;
  width: 2px;
  background: var(--line-strong);
}
.ltm-road li {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.ltm-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--line-strong);
  z-index: 1;
}
.ltm-road li.done .ltm-dot {
  background: var(--emerald-2);
  border-color: var(--emerald-2);
}
.ltm-road li.now .ltm-dot {
  border-color: var(--emerald-2);
  box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.2);
}
.ltm-wk {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--ink-46);
  white-space: nowrap;
}

/* Card 5 - Habit tracker: weekly grid of checked days */
.ltm-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}
.ltm-grow {
  display: grid;
  grid-template-columns: 48px repeat(7, 1fr);
  align-items: center;
  gap: 4px;
}
.ltm-grow.head b {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--ink-46);
  text-align: center;
  font-weight: 600;
}
.ltm-grow .hl {
  font-size: 8.5px;
  color: var(--ink-64);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ltm-cell {
  height: 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
}
.ltm-cell.on {
  background: rgba(29, 185, 84, 0.85);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.ltm-cell.gold {
  background: rgba(255, 255, 255, 0.85);
}

/* Card 6 - Results review: downward weight trend + 1:1 booking row */
.ltm-trend {
  flex: 1;
  min-height: 0;
  margin-top: 2px;
}
.ltm-trend svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.ltm-rev {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 6px 8px;
}
.ltm-av {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  color: #ffffff;
  background: linear-gradient(140deg, var(--emerald-2), var(--emerald));
}
/* card 6: Leo's real face instead of a green "L" initial */
.ltm-av--photo {
  width: 30px;
  height: 30px;
  background: none;
  overflow: hidden;
  box-shadow: 0 0 0 1.5px rgba(29, 185, 84, 0.55), 0 2px 6px rgba(0, 0, 0, 0.5);
}
.ltm-av--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  display: block;
}
.ltm-rev .meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ltm-rev .name {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-80);
}
.ltm-rev .sub {
  font-size: 8.5px;
  color: var(--ink-46);
}

/* carousel nav (arrows + dots) */
.lt-cnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}
.lt-cbtn {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: background 0.18s, transform 0.18s, opacity 0.18s;
}
.lt-cbtn:hover:not(:disabled) {
  background: rgba(29, 185, 84, 0.16);
  transform: scale(1.05);
}
.lt-cbtn:disabled {
  opacity: 0.32;
  cursor: default;
}
.lt-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}
.lt-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: all 0.25s var(--ease-out);
  cursor: pointer;
}
.lt-dots span.active {
  width: 22px;
  border-radius: 999px;
  background: var(--emerald-2);
}

/* ── Blueprint deliverable hero visual (real coaching dashboard mock) ──────── */
.lt-deliver-hero {
  margin: clamp(28px, 6vw, 44px) auto 0;
  max-width: 340px;
  text-align: center;
}
.lt-deliver-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--sh-4);
}
.lt-deliver-hero figcaption {
  margin: 16px auto 0;
  max-width: 38ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-64);
}

/* ── Faint ambient image behind text sections (kept dark + low-contrast) ───── */
.lt-mech-section,
.lt-finalcta-section {
  position: relative;
  isolation: isolate;
}
.lt-section-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0.3;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

/* ── Mechanism band - "Γιατί Οι Περισσότεροι Άνθρωποι Κολλάνε" ─────────────── */
.lt-mech {
  max-width: 720px;
  margin: 0 auto;
}
.lt-mech-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 18px;
  align-items: stretch;
}
@media (min-width: 760px) {
  .lt-mech-grid {
    grid-template-columns: 1.35fr 1fr;
  }
}
.lt-mech-grid .lt-mech-list {
  margin: 0;
}
.lt-mech-accent {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  min-height: 200px;
  background:
    linear-gradient(180deg, transparent 52%, rgba(5, 5, 5, 0.62) 100%),
    radial-gradient(120% 90% at 30% 0%, rgba(29, 185, 84, 0.14), transparent 60%),
    var(--panel-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--sh-3);
}
/* steady, evenly rising bars: disciplined, consistent progress, in mono green.
   Pure CSS, no image, static. Sits behind the caption (which is z-index:2). */
.lt-mech-motif {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(9px, 2.6vw, 13px);
  padding: 30px 24px 42px;
  pointer-events: none;
}
.lt-mech-motif span {
  display: block;
  width: clamp(11px, 3vw, 16px);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--emerald-2), var(--green-deep));
}
.lt-mech-motif span:nth-child(1) { height: 26%; opacity: 0.34; }
.lt-mech-motif span:nth-child(2) { height: 40%; opacity: 0.46; }
.lt-mech-motif span:nth-child(3) { height: 54%; opacity: 0.58; }
.lt-mech-motif span:nth-child(4) { height: 68%; opacity: 0.7; }
.lt-mech-motif span:nth-child(5) { height: 82%; opacity: 0.84; }
.lt-mech-motif span:nth-child(6) { height: 96%; opacity: 0.98; }
.lt-mech-accent figcaption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.lt-mech-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lt-mech-list li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 17px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink-80);
}
.lt-mech-list .mk {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--emerald-2);
}
.lt-mech-punch {
  text-align: center;
  margin-top: 8px;
  padding: clamp(24px, 5vw, 34px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(29, 185, 84, 0.14), transparent 62%),
    var(--panel-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--sh-3);
}
.lt-mech-punch p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-64);
  margin: 0;
  max-width: 48ch;
  margin-inline: auto;
}
.lt-mech-punch strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-1);
  color: var(--ink);
  margin-top: 14px;
  letter-spacing: -0.01em;
}

/* ── Stat row (reuses .trust-row from styles.css; just centers copy) ───────── */
.lt-stats {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

/* ── Testimonials placeholder grid ────────────────────────────────────────── */
.lt-testi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}
@media (min-width: 760px) {
  .lt-testi-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
.lt-testi {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--sh-2);
}
.lt-testi .stars {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 2px;
}
.lt-testi q {
  quotes: none;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-80);
}
.lt-testi .who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.lt-testi .av {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(140deg, var(--emerald-2), var(--emerald));
}
.lt-testi .who b {
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 700;
}
.lt-testi .who small {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-46);
  letter-spacing: 0.04em;
}
.lt-ph-note {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-46);
  letter-spacing: 0.04em;
  margin: 24px 0 0;
}

/* ── Pricing card (single 37€ · highlighted · design system 7.7) ──────────── */
.lt-price-card {
  max-width: 540px;
  margin: 0 auto;
  position: relative;
  background: var(--panel);
  border: 1.5px solid var(--border-gold, rgba(255, 255, 255, 0.16));
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--glow-gold), var(--sh-4);
}
.lt-price-top {
  position: relative;
  text-align: center;
  padding: clamp(28px, 5vw, 36px) clamp(22px, 4vw, 32px) 26px;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, 0.06), transparent 60%);
}
.lt-price-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink-64);
  margin: 0 0 16px;
}
.lt-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}
.lt-amount .v {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.4rem, 2.6rem + 3vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-feature-settings: 'tnum' 1;
}
.lt-amount .c {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.2rem);
  color: var(--emerald-2);
}
.lt-terms {
  font-size: 13.5px;
  color: var(--ink-64);
  margin: 14px 0 0;
}
.lt-terms b {
  color: var(--ink);
  font-weight: 700;
}
.lt-price-body {
  padding: 26px clamp(22px, 4vw, 32px) clamp(28px, 5vw, 34px);
}
.lt-incl {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lt-incl li {
  position: relative;
  padding-left: 30px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-80);
}
.lt-incl li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(29, 185, 84, 0.16);
  border: 1px solid rgba(29, 185, 84, 0.4);
}
.lt-incl li::after {
  content: '';
  position: absolute;
  left: 6.5px;
  top: 4px;
  width: 6px;
  height: 10px;
  border: solid var(--emerald-2);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.lt-buy-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lt-buy-zone .btn-primary {
  width: 100%;
}
.lt-secure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink-46);
}
.lt-secure svg {
  color: var(--emerald);
}
.lt-cards-mini {
  display: flex;
  gap: 7px;
}
.lt-cards-mini span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-46);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 9px;
}

/* ── Step-1 contact modal (CTA opens this, NOT straight to checkout) ───────── */
.lt-modal-root {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lt-modal-root.open {
  display: flex;
}
.lt-scrim {
  position: absolute;
  inset: 0;
  background: var(--bg-overlay, rgba(10, 10, 10, 0.74));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.lt-modal-root.open .lt-scrim {
  opacity: 1;
}
.lt-modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: linear-gradient(170deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: clamp(26px, 5vw, 32px) clamp(22px, 4vw, 30px);
  box-shadow: var(--sh-4);
  transform: translateY(18px) scale(0.97);
  opacity: 0;
  transition: transform 0.34s var(--ease-out), opacity 0.28s;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}
.lt-modal-root.open .lt-modal {
  transform: none;
  opacity: 1;
}
.lt-modal .step {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--emerald-2);
  margin-bottom: 12px;
}
.lt-modal h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-2);
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.lt-modal .msub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-64);
  margin: 0 0 22px;
}
.lt-modal .btn-next {
  margin-top: 6px;
  width: 100%;
}
.lt-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  color: var(--ink-64);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.lt-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
}
.lt-modal .privacy-note {
  margin-top: 16px;
}
.lt-success {
  text-align: center;
  padding: 8px 0 4px;
}
.lt-success .ok {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(29, 185, 84, 0.14);
  border: 1px solid rgba(29, 185, 84, 0.4);
  color: var(--emerald-2);
  box-shadow: 0 0 30px rgba(29, 185, 84, 0.25);
}
.lt-success h3 {
  margin-bottom: 8px;
}
.lt-success p {
  font-size: 14px;
  color: var(--ink-64);
  margin: 0;
  line-height: 1.55;
}

/* ── Small-phone tightening (keep VSL dominant above the fold) ────────────── */
@media (max-width: 560px) {
  .lt-hero.o-hero {
    padding-top: 10px;
  }
  /* Eyebrow: much smaller + forced onto ONE line so the hero lifts the
     results section toward the fold. Size + letter-spacing scale with the
     viewport so the (longer) Greek string still fits one line at 390px. */
  .lt-eyebrow {
    font-size: clamp(7px, 2.05vw, 9px);
    letter-spacing: 0.015em;
    padding: 5px 9px;
    margin-bottom: 12px;
    gap: 5px;
    max-width: calc(100vw - 24px);
    white-space: nowrap;
  }
  .lt-eyebrow .dot {
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
  }
  /* Headline: smaller so results clear the fold; still bold and readable. */
  .lt-hero h1 {
    font-size: clamp(1.55rem, 1.2rem + 3.4vw, 1.95rem);
    line-height: 1.1;
    margin: 0 auto 10px;
    max-width: 19ch;
  }
  .lt-hero .o-sub {
    font-size: 0.95rem;
    margin-bottom: 12px;
  }
  /* hint + slim gate + CTA all hug the VSL so the button clears the fold
     (does NOT touch the VSL itself) */
  .lt-hero .vsl-hint {
    margin-top: 8px;
  }
  .vsl-gate {
    margin-top: 11px;
  }
  .lt-hero .o-cta-zone {
    margin-top: 12px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   ADDED · premium tracker card · interactive mechanism · real proof + lightbox
   ════════════════════════════════════════════════════════════════════════════ */

/* (the deliverable preview's app-window chrome is defined in the DELIVERABLE
   CARDS block further down: single source, no duplicate ::after overlay here) */
/* ── Card 5 · Fat Loss Tracker (premium, representative) ────────────────────── */
.ltm-streak {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.ltm-streak svg {
  flex: 0 0 auto;
}
.ltm-tracker .ltm-tk {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 6px;
  flex: 1;
  min-height: 0;
}
.ltm-tk-ring {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ltm-tk-arc {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: conic-gradient(var(--emerald-2) calc(var(--p) * 1%), rgba(255, 255, 255, 0.1) 0);
  -webkit-mask: radial-gradient(closest-side, transparent 64%, #000 65%);
  mask: radial-gradient(closest-side, transparent 64%, #000 65%);
}
.ltm-tk-pct {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  font-feature-settings: 'tnum' 1;
}
.ltm-tk-pct small {
  font-size: 9px;
  color: var(--ink-46);
}
.ltm-tk-cap {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-46);
}
.ltm-tk-habits {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ltm-th {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ltm-th-l {
  font-size: 9px;
  color: var(--ink-64);
  width: 50px;
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ltm-th-dots {
  display: flex;
  gap: 3px;
  flex: 1;
}
.ltm-th-dots i {
  flex: 1;
  height: 9px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
}
.ltm-th-dots i.on {
  background: var(--emerald-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* ── Interactive mechanism stage (synced to the problem list) ───────────────── */
.lt-mech-list li {
  cursor: pointer;
  /* clean, reliable taps on iOS Safari: no grey flash, no text selection, no
     gesture interception on the tab. */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  transition: border-color 0.32s var(--ease-out), background 0.32s, box-shadow 0.32s,
    transform 0.32s;
}
.lt-mech-list li:focus-visible {
  outline: 2px solid var(--emerald-2);
  outline-offset: 2px;
}
.lt-mech-list li.is-active {
  border-color: rgba(29, 185, 84, 0.55);
  background:
    linear-gradient(90deg, rgba(29, 185, 84, 0.16), rgba(29, 185, 84, 0.05) 70%),
    rgba(255, 255, 255, 0.02);
  box-shadow: inset 3px 0 0 var(--emerald-2);
  color: var(--ink);
  transform: translateX(2px);
}

/* ══ Why-no-results stage · each scene is a believable app screen ════════════
   The right-hand stage shows the SAME data a real client tracker would: a daily
   food-log card, a weight-trend chart, a weekly intake bar chart, a habit
   calendar. No floating toy dots, no decorative glow, just real depicted
   content that crossfades. The auto-cycle (JS) toggles .is-active; CSS only. */
.lt-mech-stage {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  min-height: 250px;
  background: #0d0d0d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--sh-3);
}
/* photoreal scene behind the cycling data card (TASK 3: real studio image, not
   an AI-software panel). */
.lt-ms-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* brighter than the card bgs so the studio scene is clearly visible AROUND
     the floating data card (the photo is the point of TASK 3). */
  filter: saturate(0.95) contrast(1.06) brightness(0.92);
}
.lt-ms-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* lighter centre so the photo reads through, darker top/bottom for framing */
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.5), rgba(10, 10, 10, 0.16) 42%, rgba(10, 10, 10, 0.66)),
    radial-gradient(120% 90% at 50% 48%, rgba(10, 10, 10, 0.12), rgba(10, 10, 10, 0.62));
}
.lt-mech-stage .lt-ms-scene { z-index: 2; }
/* give the stage room so the photo frames the floating card, not gets covered */
.lt-mech-stage {
  min-height: 300px;
}
.lt-mech-stage .lt-ms-scene {
  padding: 26px 22px;
}
.lt-ms-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transform: translateY(6px);
  /* premium crossfade: the outgoing scene fades fast, the incoming one eases in
     a touch slower so the panels dissolve into each other (no hard cut, no
     bouncy scale). */
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
  pointer-events: none;
  will-change: opacity, transform;
}
.lt-ms-scene.is-active {
  opacity: 1;
  transform: none;
  transition-duration: 0.7s;
}

/* the believable app-screen card every scene lives inside: a frosted glass
   panel floating over the photoreal scene behind it (Cal AI / MyFitnessPal
   grade), legible on any background. */
.lt-ms-card {
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  padding: 15px 16px;
  border-radius: 16px;
  background: linear-gradient(170deg, rgba(20, 20, 22, 0.74), rgba(12, 12, 14, 0.72));
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 44px -20px rgba(0, 0, 0, 0.85);
}
.lt-ms-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.lt-ms-cap {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--ink-64);
}
/* a real "over target" status chip, not a floating red dot */
.lt-ms-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.lt-ms-tag.over {
  color: #ff9485;
  background: rgba(229, 72, 77, 0.14);
  border: 1px solid rgba(229, 72, 77, 0.3);
}

/* shared big read-out (scene 0) */
.lt-ms-read {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.lt-ms-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' 1;
}
.lt-ms-unit {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-46);
}

/* ── scene 0 · daily food-log card: intake bar overshoots + 2 logged items ── */
.lt-ms-gauge {
  position: relative;
  height: 12px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.lt-ms-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 99px;
  width: 60%;
  background: linear-gradient(90deg, var(--emerald-2) 0%, var(--emerald-2) 48%, #e5a04d 70%, #e5484d 100%);
  animation: msGauge 2.6s var(--ease-out) infinite;
}
.lt-ms-goal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 73%;
  width: 2px;
  background: rgba(255, 255, 255, 0.5);
  z-index: 2;
}
.lt-ms-log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lt-ms-log li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.lt-ms-log-n {
  font-size: 11px;
  color: var(--ink-80);
}
.lt-ms-log-k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
}
.lt-ms-log-k.over {
  color: #ff9485;
}

/* ── scene 1 · weight-trend chart panel that drifts up ─────────────────────── */
.lt-ms-chart {
  position: relative;
  width: 100%;
}
.lt-ms-line {
  display: block;
  width: 100%;
  height: 96px;
  color: var(--emerald-2);
  overflow: visible;
}
.lt-ms-axis {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.lt-ms-axis.dash {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-dasharray: 4 4;
}
.lt-ms-area {
  fill: rgba(29, 185, 84, 0.14);
}
.lt-ms-path {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: msDraw 2.8s var(--ease-out) infinite;
}
.lt-ms-d {
  fill: #ff9485;
  opacity: 0;
}
.lt-ms-d.d1 { animation: msDot 2.8s ease infinite 0.7s; }
.lt-ms-d.d2 { animation: msDot 2.8s ease infinite 1.0s; }
.lt-ms-d.d3 { animation: msDot 2.8s ease infinite 1.3s; }
.lt-ms-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-46);
}
.lt-ms-foot-v {
  color: #ff9485;
}

/* ── scene 2 · weekly intake bar chart with axis + goal line ───────────────── */
.lt-ms-week {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 7px;
  height: 110px;
  padding-top: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.lt-ms-week .bar {
  flex: 1;
  height: var(--h);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--emerald-2), var(--green-deep, #0c7a37));
  transform-origin: bottom;
  animation: msGrow 2.8s var(--ease-out) infinite;
}
.lt-ms-week .bar.over {
  background: linear-gradient(180deg, #f08a6e, #e5484d);
}
.lt-ms-week .bar:nth-child(3) { animation-delay: 0.08s; }
.lt-ms-week .bar:nth-child(4) { animation-delay: 0.16s; }
.lt-ms-week .bar:nth-child(5) { animation-delay: 0.24s; }
.lt-ms-week .bar:nth-child(6) { animation-delay: 0.32s; }
.lt-ms-week .bar:nth-child(7) { animation-delay: 0.40s; }
.lt-ms-week .bar:nth-child(8) { animation-delay: 0.48s; }
.lt-ms-goalline {
  position: absolute;
  left: 0;
  right: 0;
  top: 46%;
  height: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.28);
  z-index: 2;
}
.lt-ms-goalline b {
  position: absolute;
  right: 2px;
  top: -13px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(13, 13, 13, 0.8);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-64);
}
.lt-ms-days {
  display: flex;
  justify-content: space-between;
  gap: 7px;
  margin-top: 7px;
}
.lt-ms-days b {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-46);
}
.lt-ms-days b.hot {
  color: #ff9485;
}

/* ── scene 3 · 3-week habit calendar with a broken-streak read-out ─────────── */
.lt-ms-streak {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.lt-ms-streak i {
  aspect-ratio: 1;
  max-height: 20px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.lt-ms-streak i.on {
  background: rgba(29, 185, 84, 0.9);
  border-color: rgba(29, 185, 84, 0.9);
}
.lt-ms-streak i.off {
  background: rgba(229, 72, 77, 0.16);
  border-color: rgba(229, 72, 77, 0.28);
}
.lt-ms-broke {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 9px;
  margin-top: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.lt-ms-broke-l {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-46);
}
.lt-ms-broke-v {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: #ff9485;
  font-feature-settings: 'tnum' 1;
}
.lt-ms-broke-v small {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 400;
  color: var(--ink-46);
  margin-left: 3px;
}

@keyframes msGauge {
  0% { width: 52%; }
  55% { width: 92%; }
  100% { width: 52%; }
}
@keyframes msDraw {
  0% { stroke-dashoffset: 320; }
  45%, 100% { stroke-dashoffset: 0; }
}
@keyframes msDot {
  0%, 40% { opacity: 0; }
  55% { opacity: 1; }
  100% { opacity: 0.5; }
}
@keyframes msGrow {
  0% { transform: scaleY(0.15); }
  40%, 100% { transform: scaleY(1); }
}

/* ── Real before/after marquee (replaces the fake split cards) ──────────────── */
.ba-track {
  align-items: stretch;
  /* noticeably quicker scroll so more results pass the eye (was 64s) */
  animation-duration: 44s;
}
.ba-card {
  position: relative;
  flex: 0 0 auto;
  height: clamp(220px, 46vw, 300px);
  aspect-ratio: var(--ar);
  margin-right: 14px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: #0a0a0a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--sh-3);
}
.ba-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ba-stars {
  position: absolute;
  left: 10px;
  bottom: 10px;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 2px;
  background: rgba(10, 10, 10, 0.6);
  padding: 3px 9px;
  border-radius: 99px;
  backdrop-filter: blur(4px);
}

/* ── Real WhatsApp testimonials ─────────────────────────────────────────────
   Each card is a clean, cropped screenshot of ONLY the client's own message
   (no phone status bar, no header, no coach replies, no stars, no pulled quote).
   The cards live in an auto-scrolling carousel that shows ~3 at a time and runs
   left to right continuously. It PAUSES while the pointer hovers it and RESUMES
   when the pointer leaves; a click only opens the full chat (it never freezes
   the scroll). `--wa-win` is the fixed screenshot-window height that keeps every
   card the same size regardless of how tall the underlying crop is.
   `--wa-card-w` is the fixed card width the marquee loop is measured against. */
.wa-rail {
  --wa-win: 230px;
  --wa-card-w: 74vw;
  position: relative;
  overflow: hidden;
  margin: clamp(28px, 6vw, 44px) calc(-1 * clamp(16px, 5vw, 28px)) 0;
  padding: 6px 0 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
/* the moving track: two identical sets of cards sit side by side and the track
   translates by exactly -50% for a seamless loop. Spacing lives on each card
   (margin-right), NOT flex gap, so one full set is exactly 50% of the track and
   the -50% loop has no visible jump (same technique as the before/after rail). */
.wa-marquee {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee 38s linear infinite;
}
@media (hover: hover) {
  .wa-rail:hover .wa-marquee { animation-play-state: paused; }
}
.wa-card {
  flex: 0 0 var(--wa-card-w);
  max-width: 300px;
  margin: 0 16px 0 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--sh-2);
  transition: transform 0.22s var(--ease-out), border-color 0.2s, box-shadow 0.22s;
}
/* three cards in view on tablet, with a partial fourth peeking */
@media (min-width: 620px) {
  .wa-rail { --wa-win: 240px; --wa-card-w: 300px; }
}
@media (min-width: 920px) {
  .wa-rail { --wa-win: 250px; --wa-card-w: 320px; }
  .wa-card { max-width: 320px; }
}
/* cards are static, non-interactive proof now: no hover lift, no click target. */
/* reduced motion: stop the auto-scroll and let the rail be swiped manually */
@media (prefers-reduced-motion: reduce) {
  .wa-rail {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .wa-rail::-webkit-scrollbar { display: none; }
  .wa-marquee {
    animation: none;
    width: max-content;
  }
  .wa-marquee > [aria-hidden='true'] { display: none; }
}
/* the cropped-screenshot window: WhatsApp dark canvas, crop anchored top, a soft
   fade at the bottom so a tall crop that overflows the window reads as "more". */
.wa-crop {
  position: relative;
  display: block;
  width: 100%;
  height: var(--wa-win);
  margin: 0;
  padding: 0;
  border: 0;
  background: #0b141a;
  cursor: default;
  overflow: hidden;
  pointer-events: none;
}
.wa-crop img {
  width: 100%;
  height: auto;
  display: block;
}
.wa-crop::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 74%, rgba(11, 20, 26, 0.9));
}
/* the enlarge / fullscreen affordance is removed: cards are plain proof now. */
.wa-open { display: none !important; }
.wa-card-name {
  padding: 12px 16px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

/* lightbox: full WhatsApp conversation */
.wa-lb {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px 40px;
  background: rgba(5, 8, 10, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: auto;
}
/* lightbox disabled: the enlarge overlay never opens any more. */
.wa-lb.open {
  display: none !important;
}
.wa-lb-scroll {
  width: 100%;
  max-width: 420px;
}
.wa-lb-scroll img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--sh-4);
}
.wa-lb-close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 121;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background 0.18s;
}
.wa-lb-close:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ════════════════════════════════════════════════════════════════════════════
   DELIVERABLE CARDS · real studio scene behind the data
   Each preview is a photoreal, studio-grade background image (a real meal, gym,
   athlete, track, lifestyle flatlay, coaching scene) with the deliverable's
   actual data UI (score ring, ranked obstacles, macro split, roadmap, habit
   grid, review with Leo's real face) laid in front on a frosted-glass scrim,
   Cal AI / MyFitnessPal grade. The PREMIUM is the depicted photo + the legible
   real data, NOT a CSS glow and NOT fake window chrome. Zero light-sweep, zero
   shimmer, zero pulsing surface motion, zero traffic-light dots (all removed on
   purpose: the product behind the glass is what sells, not a shiny pane).
   Overrides the base .lt-card / .ltm rules above (loaded later in the sheet).
   ════════════════════════════════════════════════════════════════════════════ */
.lt-card {
  border-radius: 22px;
  border-color: rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 18%),
    linear-gradient(165deg, #171717 0%, #101010 60%, #0d0d0d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.015),
    0 18px 44px -22px rgba(0, 0, 0, 0.9),
    0 4px 14px -6px rgba(0, 0, 0, 0.6);
}
@media (hover: hover) {
  .lt-card:hover {
    transform: translateY(-5px);
    border-color: rgba(29, 185, 84, 0.45);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 26px 60px -26px rgba(0, 0, 0, 0.92),
      0 0 0 1px rgba(29, 185, 84, 0.16);
  }
}

/* Preview = a real, studio-grade scene. A photoreal background image sits
   behind a contrast scrim, and the deliverable's actual data UI is laid in
   front, Cal AI / MyFitnessPal grade. NO fake window chrome (no traffic-light
   dots), NO empty glow panel: the polish is the real photo + legible data. */
.lt-prev {
  aspect-ratio: 16 / 10.6;
  background: #0d0d0d;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 0;
}
/* the photoreal scene, full-bleed behind everything */
.lt-prev-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* settle the photo into the dark brand palette so 6 different shots read as
     one cohesive set, not a stock collage. */
  filter: saturate(0.92) contrast(1.04) brightness(0.82);
}
/* contrast scrim: darker at the bottom where the data sits, so the overlay UI
   stays crisp and legible over any photo (the readability guarantee). */
.lt-prev-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.34) 0%, rgba(10, 10, 10, 0.12) 34%, rgba(10, 10, 10, 0.62) 78%, rgba(10, 10, 10, 0.86) 100%),
    radial-gradient(120% 90% at 50% 110%, rgba(10, 10, 10, 0.5), transparent 60%);
}
.lt-prev .ltm,
.lt-prev .lt-num {
  z-index: 2;
}
.lt-prev .ltm > * {
  position: relative;
  z-index: 1;
}

/* index badge: glassy chip, top-right, sits over the photo */
.lt-num {
  top: 11px;
  left: auto;
  right: 12px;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  background: rgba(8, 8, 8, 0.55);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ltm {
  inset: 14px 15px 14px;
}
.ltm-head {
  padding-left: 0;
}
.ltm-title {
  font-size: 11.5px;
  letter-spacing: -0.005em;
}
/* ── Legibility over the photo: the data clusters float in a frosted-glass
   panel anchored to the bottom of the card, the way Cal AI / MyFitnessPal lay
   live numbers over a backdrop. The title row stays as a glass chip up top.
   This is the readability scrim for the UI itself (separate from the photo
   scrim) so every number stays crisp on any background. */
.lt-prev .ltm {
  justify-content: space-between;
}
/* the title bar reads as a floating glass chip */
.lt-prev .ltm-head {
  background: rgba(10, 10, 10, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 7px 10px;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.7);
}
/* index badge would collide with the floating head chip; nudge head past it */
.lt-prev .ltm-head {
  margin-right: 38px;
}
.ltm-title {
  font-size: 11.5px;
  letter-spacing: -0.005em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.ltm-chip {
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* the main data cluster (everything after the head) sits on a frosted panel */
.lt-prev .ltm-score,
.lt-prev .ltm-rank,
.lt-prev .ltm-kcal,
.lt-prev .ltm-road,
.lt-prev .ltm-tk,
.lt-prev .ltm-trend,
.lt-prev .ltm-rev,
.lt-prev .ltm-macros {
  position: relative;
}
/* a single shared frosted backdrop drawn behind the lower data zone */
.lt-prev .ltm::after {
  content: '';
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: -6px;
  height: 68%;
  z-index: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(12, 12, 12, 0.18) 0%, rgba(12, 12, 12, 0.66) 60%, rgba(12, 12, 12, 0.82) 100%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 24%);
  mask: linear-gradient(180deg, transparent 0%, #000 24%);
  pointer-events: none;
}
.lt-prev .ltm > *:not(.ltm-head) {
  position: relative;
  z-index: 1;
}

/* ── Card 1 · Fat Loss Score gauge: real instrument ring (static, no shine) ── */
.lt-ring {
  width: 62px;
  height: 62px;
  /* faint full track behind + emerald progress arc on top */
  background:
    conic-gradient(from -90deg, var(--emerald-2) 0deg, var(--emerald) 200deg, var(--green-deep) 259deg, rgba(255, 255, 255, 0.08) 259deg);
  -webkit-mask: radial-gradient(closest-side, transparent 67%, #000 68%);
  mask: radial-gradient(closest-side, transparent 67%, #000 68%);
  position: relative;
}
.lt-ring-wrap::before {
  /* faint full track ring under the arc for depth (static, not a glow) */
  content: '';
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: conic-gradient(rgba(255, 255, 255, 0.07) 0 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 67%, #000 68%);
  mask: radial-gradient(closest-side, transparent 67%, #000 68%);
}
.lt-ring-val {
  font-size: 19px;
}

/* progress tracks (sub-scores) with real inner depth, no glow halo */
.ltm-trk {
  height: 5.5px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 1.5px rgba(0, 0, 0, 0.4);
}

/* macro bars: glassy wells, flat fill (no glow) */
.ltm-mbar {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* ranked obstacle rows + roadmap + review rows: raised glass that holds up
   over the photo (a touch more opaque + a real blur). */
.lt-prev .ltm-rank li,
.lt-prev .ltm-rev {
  background: rgba(14, 14, 14, 0.5);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* review row text: bump contrast so name/sub read over the bokeh photo */
.lt-prev .ltm-rev .name { color: #fff; }
.lt-prev .ltm-rev .sub { color: var(--ink-64); }
/* kcal big number + macro labels stay punchy over the photo */
.lt-prev .ltm-kcal .v,
.lt-prev .ltm-ring-val,
.lt-prev .lt-ring-val,
.lt-prev .ltm-tk-pct {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.lt-prev .ltm-macro .l,
.lt-prev .ltm-metric .k,
.lt-prev .ltm-th-l,
.lt-prev .ltm-tk-cap,
.lt-prev .ltm-wk { color: var(--ink-80); }

/* card body: a touch more air + crisper heading */
.lt-card-body {
  padding: 18px 20px 22px;
}
.lt-card-body h3 {
  font-size: 16.5px;
}

@media (prefers-reduced-motion: reduce) {
  .lt-card,
  .lt-scrim,
  .lt-modal,
  .lt-cbtn,
  .lt-dots span {
    transition-duration: 0.001ms !important;
  }
  .ba-track { animation: none !important; }
  .lt-ms-fill,
  .lt-ms-path,
  .lt-ms-d,
  .lt-ms-week .bar { animation: none !important; }
  .lt-ms-scene { transition: opacity 0.2s linear; }
}

/* ── Keep the social-proof rails AUTO-SCROLLING even under reduced motion ──────
   Mirrors the proof.css fix, for the low-ticket pages that load this sheet (the
   Fat-Loss Blueprint index + checkout). iOS Low Power Mode reports reduced motion,
   which otherwise froze the before/after + WhatsApp carousels into static, manually
   swiped strips on a phone. Loaded last so it wins; rails stay overflow-hidden and
   the duplicate card set is re-shown so the -50% loop stays seamless. */
@media (prefers-reduced-motion: reduce) {
  .proof-strip { overflow: hidden !important; }
  .marquee-track { animation: marquee 34s linear infinite !important; transform: none; }
  .marquee-track.ba-track { animation: marquee 44s linear infinite !important; }
  .wa-rail { overflow: hidden !important; }
  .wa-marquee { animation: marquee 38s linear infinite !important; }
  .wa-marquee > [aria-hidden='true'] { display: flex !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   VSL WATCH-GATE  ·  progress bar + locked->unlocked CTA (vsl-gate.js)
   Additive block. Sits under the VSL, above the .o-cta-zone CTA. The CTA is
   the page's existing .btn.btn-primary; we layer a LOCKED skin on it and a
   one-shot unlock nudge. Greek default + English handled in HTML/JS.
   ════════════════════════════════════════════════════════════════════════ */
/* ── Premium watch-gate · SLIM single-row bar ─────────────────────────────
   Super-slim by request: NO frosted card, NO big header, NO oversized number.
   One refined inline row = a deep inset track with the precision 85% unlock
   marker + a well-shaped fill, and a compact tabular percentage to its right.
   A tiny lock/check helper line sits below. Polish lives in the geometry, the
   tabular type and the clean lock -> check state swap. */
.vsl-gate {
  width: 100%;
  max-width: 520px;
  margin: 14px auto 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
/* the single slim row: track stretches, percentage sits flush right */
.vslg-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.vslg-readout {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  flex: 0 0 auto;
  min-width: 34px;
  justify-content: flex-end;
}
.vslg-pct {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink, #fff);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  /* the JS swaps textContent so the value is always exact; we transition only
     colour for the unlock state change. */
  transition: color 0.3s var(--ease-out, ease);
}
.vslg-pct-sym {
  font-family: var(--font-mono, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  color: var(--ink-46, rgba(255, 255, 255, 0.46));
  margin-left: 1px;
}
.vslg-bar {
  position: relative;
  flex: 1 1 auto;
  width: auto;
  height: 7px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.03);
}
/* the precise 85% unlock marker engraved into the track */
.vslg-mark {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 85%;
  width: 1.5px;
  background: rgba(255, 255, 255, 0.22);
  z-index: 2;
  transition: opacity 0.4s var(--ease-out, ease), background 0.4s var(--ease-out, ease);
}
.vslg-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--green-deep, #117536) 0%, var(--emerald, #1DB954) 62%, var(--emerald-2, #1db954) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  /* smooth catch-up between timeupdate ticks; freezes naturally when no new
     value arrives (i.e. when the video is paused). */
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
/* a defined, slightly brighter leading edge so the fill reads as a precision
   instrument, not a flat block. */
.vslg-fill-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45));
  opacity: 0.9;
}
/* warm-up state once past 70%: the marker brightens to signal the unlock is
   close (a discrete state change, not an ambient pulse). */
.vsl-gate.is-near .vslg-mark {
  background: rgba(29, 185, 84, 0.7);
}
.vslg-help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: var(--font-mono, 'Poppins', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-46, rgba(255, 255, 255, 0.46));
  transition: color 0.3s var(--ease-out, ease);
}
/* the lock/check glyph lives in a small chip that swaps state cleanly */
.vslg-help-ic {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--ink-46, rgba(255, 255, 255, 0.46));
  transition: background 0.35s var(--ease-out, ease), border-color 0.35s var(--ease-out, ease), color 0.35s var(--ease-out, ease);
}
.vslg-help-ic svg {
  position: absolute;
  transition: opacity 0.3s var(--ease-out, ease), transform 0.35s var(--ease-out, ease);
}
.vslg-check-ic {
  opacity: 0;
  transform: scale(0.6);
}
/* unlocked: the lock fades out, the check pops in, the chip + text go emerald */
.vsl-gate.is-unlocked .vslg-help,
.vslg-help.is-unlocked {
  color: var(--emerald-2, #1db954);
}
.vsl-gate.is-unlocked .vslg-pct {
  color: var(--emerald-2, #1db954);
}
.vsl-gate.is-unlocked .vslg-help-ic {
  background: rgba(29, 185, 84, 0.16);
  border-color: rgba(29, 185, 84, 0.42);
  color: var(--emerald-2, #1db954);
}
.vsl-gate.is-unlocked .vslg-lock-ic {
  opacity: 0;
  transform: scale(0.6);
}
.vsl-gate.is-unlocked .vslg-check-ic {
  opacity: 1;
  transform: scale(1);
}
.vsl-gate.is-unlocked .vslg-mark {
  opacity: 0;
}

/* ── LOCKED CTA skin ──────────────────────────────────────────────────────
   The button stays fully VISIBLE (so the viewer anticipates it) but reads as
   inert: desaturated, dimmed, no hover lift, lock glyph showing, not-allowed
   cursor. JS blocks the actual click while locked. */
.btn.vsl-cta-locked {
  filter: grayscale(0.85) brightness(0.7);
  opacity: 0.72;
  cursor: not-allowed;
  box-shadow: none;
}
.btn.vsl-cta-locked:hover {
  transform: none;
  box-shadow: none;
}
.btn.vsl-cta-locked:hover::after {
  /* kill the sheen sweep while locked */
  transform: translateX(-130%);
  transition: none;
}
.vsl-cta-lock {
  display: inline-grid;
  place-items: center;
  margin-right: 2px;
  color: currentColor;
  opacity: 0.92;
}
/* hide the lock glyph once unlocked */
.btn.vsl-cta-unlocked .vsl-cta-lock {
  display: none;
}

/* ── UNLOCK transition + one-shot nudge ───────────────────────────────────
   When the latch fires we restore the live button look and play a single
   rise + glow + pulse so the eye is pulled to the click. */
.btn.vsl-cta-unlocked {
  filter: none;
  opacity: 1;
  cursor: pointer;
  transition: filter 0.4s var(--ease-out, ease), opacity 0.4s var(--ease-out, ease),
    transform 0.2s var(--ease-out, ease), box-shadow 0.25s var(--ease-out, ease);
}
.btn.vsl-cta-justUnlocked {
  animation: vslCtaUnlock 1.25s cubic-bezier(0.22, 1, 0.36, 1) 1;
}
@keyframes vslCtaUnlock {
  0% {
    transform: translateY(6px) scale(0.98);
    box-shadow: 0 0 0 rgba(29, 185, 84, 0);
  }
  35% {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 14px 38px -8px rgba(29, 185, 84, 0.7), 0 0 0 6px rgba(29, 185, 84, 0.18);
  }
  55% {
    transform: translateY(0) scale(0.99);
  }
  72% {
    transform: translateY(-2px) scale(1.025);
    box-shadow: 0 10px 30px -10px rgba(29, 185, 84, 0.6), 0 0 0 3px rgba(29, 185, 84, 0.12);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: var(--btn-rest, 0 8px 24px -10px rgba(0, 0, 0, 0.6));
  }
}

/* ── locked-CTA "shake" hint when a viewer clicks too early ────────────────
   Plays on the gate (bar + helper) so the reason is obvious without moving
   the still-locked button itself. */
.vslg-shake {
  animation: vslgShake 0.45s ease 1;
}
@keyframes vslgShake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-6px); }
  38% { transform: translateX(5px); }
  58% { transform: translateX(-4px); }
  78% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .vslg-fill { transition: width 0.2s linear; }
  .vslg-help-ic svg,
  .vslg-mark,
  .vslg-pct { transition: opacity 0.2s linear; }
  .btn.vsl-cta-justUnlocked { animation: none; }
  .vslg-shake { animation: none; }
}