/* ============================================================
   LP.CSS — Landing page sections
   Layered on top of the main site's design system
   (../assets/css/base.css + components.css + layout.css).
   Every token below is inherited from base.css :root — this file
   adds only what the landing page needs beyond the shared kit,
   so the LP reads as the same product, not a second template.
   ============================================================ */

:root {
  --lp-promo-h: 44px;
  --lp-header-h: 76px;
  --lp-ink: #0E1310;          /* deepest surface, shared with topbar */
  --lp-ink-soft: #161C18;
  --lp-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* The LP is a standalone funnel page: no site chrome, so it owns
   its own scroll offset for in-page anchors. */
/* Nothing is pinned to the viewport, so anchors only need a little
   breathing room above the target. */
html { scroll-padding-top: 24px; }

/* The promo bar sits in normal flow and scrolls away with everything
   else; the header is absolutely positioned over the hero photo below
   it, so `position: relative` here is what anchors it. */
.lp-body { position: relative; }

/* Pages with no hero for the header to sit over (thank-you) reserve
   the header's height and act as its positioning context. */
.lp-body-plain {
  position: relative;
  padding-top: var(--lp-header-h);
}

/* Wider gutter rhythm than the shared .container for the big
   full-bleed LP sections. `width:100%` matters: .lp-container is a
   flex item inside .lp-promo/.lp-header, where it would otherwise
   shrink-to-fit and ignore its max-width entirely. */
.lp-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) { .lp-container { padding: 0 40px; } }

.lp-section { padding: clamp(64px, 8vw, 112px) 0; }
.lp-section-tight { padding: clamp(40px, 4vw, 60px) 0; }

/* Section heading block — one rhythm used by every section so
   vertical spacing never drifts between them. */
.lp-head { max-width: 720px; margin-bottom: clamp(36px, 4vw, 56px); }
.lp-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.lp-head h2 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: 16px;
}
.lp-head p {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  line-height: 1.65;
}
.lp-head .eyebrow { margin-bottom: 14px; }

/* Accent word treatment — on light surfaces a soft highlighter swash
   under the word keeps the heading's contrast while still drawing the
   eye. On dark surfaces the swash would muddy the letterforms, so the
   colour shift alone does the work. */
.lp-accent {
  color: var(--color-accent-dark);
  background-image: linear-gradient(transparent 72%, rgba(149, 191, 71, 0.34) 72%, rgba(149, 191, 71, 0.34) 94%, transparent 94%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 2px;
  margin: 0 -2px;
}

.lp-on-dark > .lp-container .lp-accent,
.lp-dark > .lp-container .lp-accent,
.lp-cta-copy .lp-accent {
  color: #B9E06A;
  background-image: none;
}

/* Lead cards are white surfaces wherever they sit, so they always take
   the light-surface treatment — specificity matched to the dark-section
   rules above so nesting order can't flip it. */
.lp-lead-card .lp-accent {
  color: var(--color-accent-dark);
  background-image: none;
}

/* Dark section shell reused by hero / CTA / perks */
.lp-dark {
  background-color: var(--lp-ink);
  color: rgba(255, 255, 255, 0.72);
  position: relative;
  overflow: hidden;
}
.lp-dark h2, .lp-dark h3, .lp-dark h4 { color: #FFFFFF; }
.lp-dark .eyebrow { color: #B9E06A; }
.lp-dark .lp-head p { color: rgba(255, 255, 255, 0.66); }

/* Ambient aurora layer for dark sections — pure CSS gradients,
   no blur filters, so it costs nothing to paint. */
.lp-aurora::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  background:
    radial-gradient(ellipse 46% 42% at 18% 8%,  rgba(149, 191, 71, 0.22) 0%, transparent 68%),
    radial-gradient(ellipse 40% 46% at 84% 24%, rgba(90, 49, 244, 0.24) 0%, transparent 70%);
  pointer-events: none;
}
.lp-aurora > * { position: relative; z-index: 1; }

/* Fine dot grid used behind dark panels */
.lp-grid-dots::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0);
  background-size: 26px 26px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 78%);
}


/* ════════════════════════════════════════════════════════════
   1. PROMO BAR
   ═══════════════════════════════════════════════════════════ */
.lp-promo {
  position: relative;
  z-index: 2;
  height: var(--lp-promo-h);
  display: flex;
  align-items: center;
  background: var(--lp-ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 13.5px;
}

.lp-promo-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: nowrap;
}

.lp-promo-text {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-promo-text svg { color: var(--color-accent-primary); flex-shrink: 0; }
.lp-promo-text strong { color: #FFFFFF; font-weight: 700; }

/* Live countdown — mono digits so the width never jitters */
.lp-countdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: #FFFFFF;
  background: rgba(149, 191, 71, 0.16);
  border: 1px solid rgba(149, 191, 71, 0.34);
  border-radius: var(--radius-pill);
  padding: 3px 11px;
  white-space: nowrap;
}
.lp-countdown .lp-cd-sep { opacity: 0.45; }

.lp-promo-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
  white-space: nowrap;
}
.lp-promo-link:hover { color: var(--color-accent-primary); }
.lp-promo-link svg { flex-shrink: 0; }

@media (max-width: 900px) {
  .lp-promo-hide-sm { display: none; }
  .lp-promo-inner { gap: 12px; }
}
@media (max-width: 480px) {
  :root { --lp-promo-h: 40px; }
  .lp-promo { font-size: 12.5px; }
}


/* ════════════════════════════════════════════════════════════
   2. HEADER
   ═══════════════════════════════════════════════════════════ */
/* Not sticky — absolutely positioned over the top of the hero and
   scrolled away with the page. The persistent CTA job is handled by
   .lp-sticky-cta instead. */
.lp-header {
  position: absolute;
  top: var(--lp-promo-h);
  left: 0; right: 0;
  z-index: 1001;
  height: var(--lp-header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
}

/* Used by pages with no hero for the header to sit over (thankyou.php),
   where the transparent treatment would be unreadable on white. */
.lp-header.is-stuck {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--color-border);
  box-shadow: 0 8px 28px rgba(16, 21, 14, 0.06);
}

.lp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.lp-logo { display: block; flex-shrink: 0; }
.lp-logo img { height: 54px; width: auto; }
.lp-logo .lp-logo-dark { display: none; }
.lp-header.is-stuck .lp-logo-light { display: none; }
.lp-header.is-stuck .lp-logo-dark  { display: block; }

.lp-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lp-header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  padding: 9px 4px;
}
.lp-header-phone svg { color: var(--color-accent-primary); flex-shrink: 0; }
.lp-header-phone:hover { color: #FFFFFF; }
.lp-header.is-stuck .lp-header-phone { color: var(--color-text-primary); }
.lp-header.is-stuck .lp-header-phone:hover { color: var(--color-accent-dark); }

@media (max-width: 767px) {
  :root { --lp-header-h: 72px; }
  .lp-logo img { height: 42px; }
  .lp-header-phone span { display: none; }
}


/* ════════════════════════════════════════════════════════════
   3. HERO
   ═══════════════════════════════════════════════════════════ */
.lp-hero {
  position: relative;
  min-height: min(94vh, 900px);
  display: flex;
  align-items: center;
  padding: calc(var(--lp-header-h) + clamp(40px, 5vw, 80px)) 0 clamp(96px, 9vw, 128px);
  background-color: var(--lp-ink);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

.lp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(104deg, rgba(10, 15, 12, 0.94) 0%, rgba(10, 15, 12, 0.82) 42%, rgba(10, 15, 12, 0.5) 100%),
    radial-gradient(ellipse 50% 60% at 88% 30%, rgba(90, 49, 244, 0.28) 0%, transparent 70%);
}

/* Top hairline that ties the LP hero to every hero-banner on the
   main site. */
.lp-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 1;
  background: linear-gradient(90deg, transparent, var(--color-accent-primary), transparent);
  opacity: 0.75;
}

.lp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.lp-hero-copy { max-width: 620px; }

.lp-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px 7px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 22px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lp-hero-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-accent-primary);
  color: var(--color-accent-text);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}

.lp-hero-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent-text);
  animation: lp-pulse-dot 1.8s ease-in-out infinite;
}

@keyframes lp-pulse-dot {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

.lp-hero h1 {
  font-size: clamp(38px, 5.4vw, 66px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.042em;
  color: #FFFFFF;
  margin-bottom: 20px;
}

.lp-hero-sub {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.74);
  margin-bottom: 28px;
  max-width: 54ch;
}

/* Proof bullets — checkmark tiles rather than bare list dashes */
.lp-hero-points {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-bottom: 32px;
}

.lp-hero-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--text-base);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.45;
}

.lp-hero-points li > span:first-child {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(149, 191, 71, 0.18);
  border: 1px solid rgba(149, 191, 71, 0.42);
  color: var(--color-accent-primary);
  margin-top: 2px;
}

.lp-hero-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

/* Ghost button tuned for dark backgrounds — the shared
   .btn-secondary is calibrated for light surfaces. */
.lp-btn-ghost-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  padding: 14px 26px;
  border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.24);
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--lp-ease-spring);
}
.lp-btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
  transform: scale(1.03);
}

/* Rating strip */
.lp-hero-rating {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.lp-avatar-stack { display: flex; }
.lp-avatar-stack img {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--lp-ink);
  margin-left: -11px;
  background: #2A322A;
}
.lp-avatar-stack img:first-child { margin-left: 0; }

.lp-hero-rating-text {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.4;
}
.lp-hero-rating-text strong { color: #FFFFFF; font-weight: 700; }
.lp-hero-stars { color: #F5B942; display: inline-flex; gap: 1px; vertical-align: -2px; }

/* ── Hero visual — a real store in browser chrome ──────────
   Sits where the lead form used to. Everything here is transform
   and opacity so the hero still composites on one layer. */
.lp-hero-visual {
  position: relative;
  perspective: 1400px;
}

/* Violet bloom behind the window, picking up the same accent the hero
   overlay already washes across this corner. */
.lp-hero-glow {
  position: absolute;
  inset: -18% -12% -12% -6%;
  z-index: 0;
  background: radial-gradient(ellipse at 55% 45%, rgba(90, 49, 244, 0.42) 0%, rgba(149, 191, 71, 0.16) 45%, transparent 72%);
  filter: blur(28px);
  opacity: 0.85;
}

.lp-hero-window {
  position: relative;
  z-index: 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  /* A few degrees of yaw reads as a screen sitting in space rather
     than a screenshot pasted on the page. */
  transform: rotateY(-7deg) rotateX(2deg) translateZ(0);
  transition: transform 0.6s var(--lp-ease);
}

.lp-hero-visual:hover .lp-hero-window {
  transform: rotateY(-3deg) rotateX(1deg);
}

.lp-hero-window-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  background: #F4F6F3;
  border-bottom: 1px solid var(--color-border);
}

.lp-hero-window-dots { display: flex; gap: 5px; flex-shrink: 0; }
.lp-hero-window-dots i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #D7DDD5;
}

.lp-hero-window-url {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--color-text-muted);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Height is capped rather than left to the image's 3:2 ratio: a full
   storefront screenshot is taller than the copy beside it, and a hero
   that grows past the fold buries the CTA. */
.lp-hero-window img {
  display: block;
  width: 100%;
  height: clamp(300px, 34vw, 420px);
  object-fit: cover;
  object-position: top center;
}

/* Floating proof chips. Positioned off the window's corners so they
   read as annotations on the screen, not captions under it. */
.lp-hero-chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border-radius: var(--radius-pill);
  background: rgba(16, 22, 18, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42);
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.lp-hero-chip strong { color: #FFFFFF; font-weight: 800; }
.lp-hero-chip svg { color: var(--color-accent-primary); flex-shrink: 0; }

.lp-hero-chip-lift {
  top: 8%;
  left: -6%;
  animation: lp-chip-float 5.2s ease-in-out infinite;
}

.lp-hero-chip-ship {
  bottom: 9%;
  right: -4%;
  animation: lp-chip-float 5.2s ease-in-out 1.4s infinite;
}

@keyframes lp-chip-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

@media (max-width: 1279px) {
  .lp-hero-chip-lift { left: -2%; }
  .lp-hero-chip-ship { right: -1%; }
}

@media (max-width: 1023px) {
  .lp-hero-grid { grid-template-columns: 1fr; }
  .lp-hero-copy { max-width: 100%; }
  .lp-hero { min-height: 0; }
  /* Flat once it's below the copy: the yaw only makes sense when the
     window sits to one side of the text. */
  .lp-hero-window { transform: none; }
  .lp-hero-window img { height: clamp(240px, 40vw, 340px); }
}

/* Below the tablet break the chips have nowhere to hang and the window
   is just page weight between the headline and the CTA. */
@media (max-width: 767px) {
  .lp-hero-visual { display: none; }
}


/* ── Premium scroll indicator ──────────────────────────────
   Replaces the old orange arrow button: a floating capsule with
   a lit track, a dot that falls through it, and a label that
   expands on hover. Transform/opacity only — no layout work. */
.lp-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 4vw, 40px);
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 9px 9px 18px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease,
              transform 0.4s var(--lp-ease), opacity 0.4s ease;
  animation: lp-cue-float 3.4s ease-in-out infinite;
}

.lp-scroll-cue:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(149, 191, 71, 0.55);
  color: #FFFFFF;
}

/* Fades itself out once the hero is scrolled past (class set in lp.js) */
.lp-scroll-cue.is-gone {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(14px);
}

@keyframes lp-cue-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-7px); }
}

/* The track: a rounded rail with a dot that drops and recycles */
.lp-scroll-track {
  position: relative;
  width: 26px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  overflow: hidden;
  flex-shrink: 0;
}

.lp-scroll-track::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 8px;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--color-accent-primary);
  box-shadow: 0 0 10px rgba(149, 191, 71, 0.9);
  animation: lp-cue-dot 1.9s var(--lp-ease) infinite;
}

@keyframes lp-cue-dot {
  0%   { transform: translateY(0);    opacity: 0; }
  22%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { transform: translateY(19px); opacity: 0; }
}

@media (max-width: 767px) {
  .lp-scroll-cue { display: none; }
}


/* ════════════════════════════════════════════════════════════
   4. LEAD CAPTURE CARD (Classic form + OTP)
   ═══════════════════════════════════════════════════════════ */
.lp-lead-card {
  position: relative;
  background: #FFFFFF;
  border-radius: 20px;
  padding: clamp(24px, 2.4vw, 32px);
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

/* Green→violet hairline across the top, matching .pricing-card::before */
.lp-lead-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-accent-primary), var(--color-violet));
}

/* Only a direct child when the LeadCapture embed supplies its own
   headline; inside .lp-lead-head the head's margin already spaces it. */
.lp-lead-card > .lp-lead-offer { margin-bottom: 18px; }

.lp-lead-offer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--color-accent-subtle);
  border: 1px solid var(--color-border-accent);
  color: var(--color-accent-dark);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 14px;
}

.lp-lead-card h2 {
  font-size: clamp(21px, 2vw, 25px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

/* Small label above the headline, inside the h2 so the dialog keeps a
   single accessible name. Block + its own letter-spacing so it reads as
   a kicker rather than as the first words of the heading. */
.lp-lead-kicker {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}

/* ── Lead form fields ─────────────────────────────────────
   Inputs themselves come from the shared components.css
   (.form-input / .form-textarea / .checkbox-row); only the label
   rhythm, messaging and button busy-state are LP-specific. */
.lp-lead-head { margin-bottom: 20px; }

.lp-lead-card .lp-lead-sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
}

.lp-field { margin-bottom: 13px; }

.lp-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

.lp-field .form-input,
.lp-field .form-textarea { padding: 12px 15px; }
.lp-field .form-textarea { min-height: 84px; }

.lp-consent {
  margin: 4px 0 16px;
  font-size: 12.5px;
  line-height: 1.5;
}

/* Form-level messaging. Hidden until it has something to say, so an
   empty <p role="alert"> never reserves space or announces itself. */
.lp-msg {
  display: none;
  align-items: flex-start;
  gap: 9px;
  border-radius: var(--radius-btn);
  padding: 11px 13px;
  font-size: 13.5px;
  line-height: 1.45;
  margin-bottom: 13px;
}
.lp-msg.is-shown { display: flex; }
.lp-msg-error {
  background: #FDECEA;
  border: 1px solid #F5C2BC;
  color: #A5281B;
}
.lp-msg-ok {
  background: var(--color-accent-subtle);
  border: 1px solid var(--color-border-accent);
  color: #3E6A25;
}

/* Submit button spinner */
.lp-btn-busy { position: relative; color: transparent !important; pointer-events: none; }
.lp-btn-busy::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 17px; height: 17px;
  margin: -8.5px 0 0 -8.5px;
  border: 2px solid rgba(26, 31, 28, 0.28);
  border-top-color: var(--color-accent-text);
  border-radius: 50%;
  animation: lp-spin 0.65s linear infinite;
}
@keyframes lp-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .lp-btn-busy::after { animation-duration: 1.6s; }
}

/* Reassurance line under the submit button. Deliberately NOT a flex
   row: the copy wraps to two lines in the narrower closing-section
   card, and a flex icon would sit orphaned on its own line above the
   text. Inline-aligned SVG keeps it attached to the first word. */
.lp-lead-trust {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  text-align: center;
}

.lp-lead-trust svg {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 6px;
  color: var(--color-accent-primary);
}

/* ── LeadCapture embed ────────────────────────────────────
   embed.min.js renders inline (no iframe) and injects its own
   <style id="lc-styles"> that hard-codes a system font stack on
   .lc-form-container. Because it's in our DOM we can override it —
   without this the funnel would sit in the page in a completely
   different typeface to everything around it. */
.lp-lead-embed { min-height: 320px; }

.lc-form-container,
.lc-form-container * {
  font-family: var(--font-body) !important;
}

.lc-form-container {
  max-width: 100% !important;
  color: var(--color-text-primary);
}

/* The funnel wraps itself in its own white .lc-card, which inside our
   white .lp-lead-card reads as a card in a card. Flatten it so the
   two become one surface. The values are inline styles set by the
   embed at runtime, so !important is the only way to reach them. */
.lp-lead-embed .lc-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.lp-lead-embed .lc-content { padding: 0 !important; }

/* Its headline block carries the card's own top padding, which we
   don't need now that the offer pill sits above it. */
.lp-lead-embed .lc-header { margin-bottom: 18px; }
.lp-lead-embed .lc-headline { letter-spacing: -0.03em; line-height: 1.2; }

/* Match the funnel's inputs to the site's .form-input focus ring. */
.lp-lead-embed .lc-input:focus,
.lp-lead-embed .lc-input:focus-visible,
.lp-lead-embed select:focus,
.lp-lead-embed textarea:focus {
  border-color: var(--color-accent-primary) !important;
  box-shadow: 0 0 0 3px rgba(149, 191, 71, 0.18) !important;
  outline: none !important;
}

/* LeadCapture renders .lc-suspended when the funnel is unavailable
   (paused, unpublished, or rate-limited). Unstyled it's a bare ⚠ and
   a line of text floating in a tall white card, which reads as a
   broken page — give it a real empty state so the visitor still has
   somewhere to go. */
.lp-lead-embed .lc-suspended {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 260px;
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: 14px;
  background: var(--color-bg-surface);
}
.lp-lead-embed .lc-suspended-icon { font-size: 26px; line-height: 1; }
.lp-lead-embed .lc-suspended-message {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
}
.lp-lead-embed .lc-suspended::after {
  content: 'Please call us on ' attr(data-fallback-phone) ' and we\'ll take your details directly.';
  font-size: 13px;
  color: var(--color-text-muted);
  max-width: 34ch;
  line-height: 1.5;
}

.lp-lead-embed .lc-powered-by {
  margin-top: 14px;
  text-align: center;
  font-size: 11px;
  opacity: 0.6;
}

/* Placeholder while the 335KB bundle downloads, so the card doesn't
   sit as an empty white box on a slow connection. */
.lp-lead-embed:not(:has(.lc-form-container))::after,
.lp-lead-embed:has(.lc-form-container:empty)::after {
  content: 'Loading your form…';
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ════════════════════════════════════════════════════════════
   4b. LEAD POPUP
   The shell the lead card sits in. main.js ships a modal too, but
   its styling lives in pages/nav.css which this page doesn't load,
   so the LP carries its own — same tokens, same card inside.
   ═══════════════════════════════════════════════════════════ */
.lp-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;              /* over the sticky CTA (100) and header */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 2.4vh, 28px) clamp(16px, 4vw, 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lp-modal[hidden] { display: none; }

.lp-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 12, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.lp-modal.is-open .lp-modal-backdrop { opacity: 1; }

.lp-modal-box {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin: auto;               /* centres it, but lets a tall form scroll */
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition: opacity 0.28s ease, transform 0.28s var(--lp-ease);
}

/* Two panels behind one radius: the dark value rail and the white form
   read as a single object rather than two stacked cards. */
.lp-modal-panels {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* The card inside supplies its own radius, hairline and shadow for the
   inline instance above the footer; inside the popup the panel wrapper
   owns all three. */
.lp-modal-panels .lp-lead-card {
  border-radius: 0;
  box-shadow: none;
}
.lp-modal-panels .lp-lead-card::before { display: none; }

/* ── Value rail ─────────────────────────────────────────── */
.lp-modal-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  background:
    radial-gradient(ellipse 80% 60% at 12% 0%, rgba(90, 49, 244, 0.34) 0%, transparent 62%),
    linear-gradient(168deg, #16201A 0%, #0C120E 100%);
  color: rgba(255, 255, 255, 0.72);
}

/* Green→violet hairline, the same one the pricing cards and the inline
   lead card wear — it just runs across both panels here. */
.lp-modal-panels::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 3;
  background: linear-gradient(90deg, var(--color-accent-primary), var(--color-violet));
}

/* An eyebrow rather than a second pill — the form panel opposite
   already wears the offer badge, and two pills side by side read as
   two competing headlines. */
.lp-modal-aside-eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
  margin-bottom: 12px;
}

.lp-modal-aside h3 {
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin-bottom: 16px;
}

.lp-modal-aside-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 22px;
}

.lp-modal-aside-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
}
.lp-modal-aside-list strong { color: #FFFFFF; font-weight: 700; }
.lp-modal-aside-list svg {
  color: var(--color-accent-primary);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Numbered next-steps rail. The connector is drawn on the list itself
   rather than per-item, so it can't drift out of line with the dots. */
.lp-modal-aside-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding: 20px 0 0;
  margin-bottom: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  list-style: none;
  counter-reset: none;
}

.lp-modal-aside-steps::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 30px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, rgba(149, 191, 71, 0.5), rgba(255, 255, 255, 0.08));
}

.lp-modal-aside-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.66);
}

.lp-modal-step-n {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(149, 191, 71, 0.14);
  border: 1px solid rgba(149, 191, 71, 0.42);
  color: var(--color-accent-primary);
  font-size: 11.5px;
  font-weight: 800;
}

/* The quote takes the slack between the steps and the proof block, so
   the rail fills its height with something worth reading instead of a
   stretch of empty ink. */
.lp-modal-aside-quote {
  margin: auto 0 0;
  padding: 17px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.lp-modal-aside-quote blockquote {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.74);
  border-left: 2px solid rgba(149, 191, 71, 0.55);
  padding-left: 13px;
  margin-bottom: 13px;
}

.lp-modal-aside-quote figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #FFFFFF;
}

.lp-modal-aside-quote figcaption small {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

.lp-modal-aside-quote .testimonial-avatar {
  width: 32px;
  height: 32px;
  font-size: 11.5px;
  flex-shrink: 0;
}

/* Sits under the quote at the foot of the rail, level with the submit
   button on the form side. */
.lp-modal-aside-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.lp-modal-aside-proof p {
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}
.lp-modal-aside-proof strong { color: #FFFFFF; font-weight: 700; }
.lp-modal-aside-proof .lp-avatar-stack img { width: 34px; height: 34px; }

.lp-modal-aside-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.2s ease;
}
.lp-modal-aside-call strong {
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-weight: 500;
}
.lp-modal-aside-call svg { color: var(--color-accent-primary); flex-shrink: 0; }
.lp-modal-aside-call:hover { color: #FFFFFF; }
.lp-modal-aside-call:hover strong { color: var(--color-accent-primary); }

.lp-modal.is-open .lp-modal-box {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* It only takes focus programmatically, as a fallback target — a ring
   around the whole popup would read as an error state. */
.lp-modal-box:focus { outline: none; }

.lp-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #FFFFFF;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.lp-modal-close:hover {
  color: var(--color-text-primary);
  border-color: var(--color-accent-primary);
  background: var(--color-accent-subtle);
}

/* The close button sits where the offer pill starts, so pull the head
   in on narrow cards to keep them off each other. */
.lp-modal-box .lp-lead-head { padding-right: 34px; }

/* A popup has to fit the viewport it floats in, where the inline card
   only has to fit the page — so the same card runs tighter here. Even
   trimmed it can outgrow a short laptop viewport, which is what the
   scrollable overlay above is for. */
.lp-modal-box .lp-lead-card { padding: 26px; }
.lp-modal-box .lp-lead-head { margin-bottom: 16px; }
.lp-modal-box .lp-field { margin-bottom: 11px; }
.lp-modal-box .lp-field .form-textarea { min-height: 62px; }

/* Locks the page behind the popup without the layout shift a plain
   overflow:hidden causes on desktop scrollbars. */
body.lp-modal-lock {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* Below this the two panels would each be too narrow to read, so the
   rail steps aside and the form takes the full width — it still
   carries the offer, the headline and the trust line on its own. */
@media (max-width: 859px) {
  .lp-modal-box { max-width: 520px; }
  .lp-modal-panels { grid-template-columns: minmax(0, 1fr); }
  .lp-modal-aside { display: none; }
}

@media (max-width: 767px) {
  .lp-modal { padding: 14px; align-items: flex-start; }
  .lp-modal-box { max-width: 100%; }
  .lp-modal-box .lp-lead-card { padding: 22px 18px; }
  .lp-modal-box .lp-field { margin-bottom: 10px; }
}


/* ════════════════════════════════════════════════════════════
   5. TRUSTED BY
   ═══════════════════════════════════════════════════════════ */
.lp-trusted {
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
  padding: clamp(36px, 4vw, 52px) 0;
}

.lp-trusted-label {
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 28px;
}

.lp-logo-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

/* Brand-style placeholder marks: a monogram tile + wordmark, all
   rendered in one muted ink so the row reads as a balanced band
   instead of a rainbow of mismatched client logos. */
.lp-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: #7C8A79;
  transition: color 0.25s ease, border-color 0.25s ease,
              background 0.25s ease, transform 0.35s var(--lp-ease);
}

.lp-brand:hover {
  color: var(--color-text-primary);
  background: #FFFFFF;
  border-color: var(--color-border);
  transform: translateY(-3px);
}

.lp-brand-mark {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: currentColor;
  color: inherit;
}
.lp-brand-mark svg { color: var(--color-bg-surface); }
.lp-brand:hover .lp-brand-mark svg { color: #FFFFFF; }

.lp-brand-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: inherit;
}
.lp-brand-name small {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: -1px;
}

@media (max-width: 1023px) { .lp-logo-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .lp-logo-row { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .lp-brand { padding: 12px 6px; gap: 8px; }
  .lp-brand-name { font-size: 14px; }
  .lp-brand-mark { width: 28px; height: 28px; border-radius: 8px; }
}


/* ════════════════════════════════════════════════════════════
   6. STATS BAND
   ═══════════════════════════════════════════════════════════ */
.lp-stats-panel {
  position: relative;
  border-radius: 24px;
  padding: clamp(28px, 3.4vw, 44px) clamp(20px, 3vw, 44px);
  background-color: var(--lp-ink);
  overflow: hidden;
}

.lp-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.lp-stat {
  position: relative;
  text-align: center;
  padding: 8px 16px;
}
.lp-stat + .lp-stat::before {
  content: '';
  position: absolute;
  left: 0; top: 14%;
  width: 1px; height: 72%;
  background: rgba(255, 255, 255, 0.12);
}

.lp-stat-value {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--color-accent-primary);
  line-height: 1;
}

.lp-stat-label {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
}

@media (max-width: 767px) {
  .lp-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 8px; }
  .lp-stat:nth-child(odd)::before { display: none; }
}


/* ════════════════════════════════════════════════════════════
   7. PORTFOLIO GALLERY
   ═══════════════════════════════════════════════════════════ */
.lp-gallery-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.lp-gallery-top .lp-head { margin-bottom: 0; }

.lp-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lp-filter {
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.lp-filter:hover { border-color: var(--color-border-accent); color: var(--color-text-primary); }
.lp-filter.is-active {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-text);
}

.lp-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.lp-shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: #FFFFFF;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.4s var(--lp-ease), box-shadow 0.4s ease, border-color 0.3s ease;
}

.lp-shot:hover {
  transform: translateY(-6px);
  border-color: var(--color-border-accent);
  box-shadow: 0 20px 44px rgba(16, 21, 14, 0.14);
}

/* Browser chrome so each thumbnail reads as a real website preview */
.lp-shot-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-surface);
}

.lp-shot-dots { display: flex; gap: 5px; flex-shrink: 0; }
.lp-shot-dots i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #D7DDD5;
}

.lp-shot-url {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--color-text-muted);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Explicit `display:block` — the markup uses <span> elements inside a
   <button> (a <div> there would be invalid), and an inline box ignores
   aspect-ratio and overflow. */
.lp-shot-frame {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-bg-elevated);
}

.lp-shot-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s var(--lp-ease);
}
.lp-shot:hover .lp-shot-frame img { transform: scale(1.05); }

.lp-shot-veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 18px;
  background: linear-gradient(to top, rgba(10, 15, 12, 0.94) 0%, rgba(10, 15, 12, 0.35) 55%, transparent 100%);
  opacity: 0;
  transition: opacity 0.32s ease;
}
.lp-shot:hover .lp-shot-veil,
.lp-shot:focus-visible .lp-shot-veil { opacity: 1; }

.lp-shot-tag {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  background: var(--color-accent-primary);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}

.lp-shot-name {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

/* Touch devices have no hover, so the overlay would never appear —
   show it permanently instead of hiding the store names on phones. */
@media (hover: none) {
  .lp-shot-veil { opacity: 1; }
  .lp-shot-zoom { opacity: 1; transform: none; }
}

/* Expand affordance — tells the user the click opens a lightbox */
.lp-shot-zoom {
  position: absolute;
  top: 14px; right: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #FFFFFF;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.3s ease, transform 0.35s var(--lp-ease-spring);
}
.lp-shot:hover .lp-shot-zoom,
.lp-shot:focus-visible .lp-shot-zoom { opacity: 1; transform: scale(1); }

.lp-shot.is-hidden { display: none; }

@media (max-width: 1023px) { .lp-gallery { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 560px)  { .lp-gallery { grid-template-columns: 1fr; } }

/* Lightbox — extends the shared #lightbox from nav.css with a
   scale-in transition, a counter, and a caption chip. */
#lightbox .lb-content {
  transform: scale(0.94);
  transition: transform 0.32s var(--lp-ease);
}
#lightbox.lb-active .lb-content { transform: scale(1); }

#lightbox .lb-img {
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.lb-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.lb-meta-title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  color: #FFFFFF;
}

.lb-meta-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
  border: 1px solid rgba(149, 191, 71, 0.4);
  background: rgba(149, 191, 71, 0.12);
  border-radius: var(--radius-pill);
  padding: 4px 11px;
}

.lb-counter {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 767px) {
  .lb-prev, .lb-next { top: auto; bottom: 22px; transform: none; }
  .lb-prev { left: calc(50% - 56px); }
  .lb-next { right: calc(50% - 56px); }
  #lightbox .lb-content { max-height: 76vh; }
}


/* ════════════════════════════════════════════════════════════
   8. PROCESS RAIL
   ═══════════════════════════════════════════════════════════ */
.lp-process { position: relative; }

.lp-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding-top: 62px;
}

/* The rail line lives behind the nodes; the fill is driven by
   scroll progress from lp.js via --lp-progress (0→1). */
.lp-rail::before,
.lp-rail::after {
  content: '';
  position: absolute;
  top: 25px;
  left: 10%;
  right: 10%;
  height: 2px;
  border-radius: 2px;
}
.lp-rail::before { background: var(--color-border); }
.lp-rail::after {
  background: linear-gradient(90deg, var(--color-accent-primary), var(--color-violet));
  transform: scaleX(var(--lp-progress, 0));
  transform-origin: left center;
  transition: transform 0.5s linear;
}

/* Flex column, not a block: the stage is stretched to the grid row
   height, and a card with `height:100%` inside it would measure 100%
   of the stage *on top of* the 72px node above it — overflowing the
   cell and colliding with whatever follows the rail. */
.lp-stage {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.lp-stage-node {
  position: relative;
  z-index: 1;
  width: 52px; height: 52px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 2px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.4s ease, color 0.4s ease,
              background 0.4s ease, transform 0.45s var(--lp-ease-spring),
              box-shadow 0.4s ease;
}

.lp-stage.is-reached .lp-stage-node {
  border-color: var(--color-accent-primary);
  background: var(--color-accent-primary);
  color: var(--color-accent-text);
  transform: scale(1.08);
  box-shadow: 0 10px 26px rgba(149, 191, 71, 0.4);
}

/* Flex column so the duration chip pins to the card's bottom edge —
   without it the chips sit at five different heights across the row
   because each stage's copy runs a different length. */
.lp-stage-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 24px 20px 22px;
  text-align: left;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.35s var(--lp-ease), border-color 0.3s ease, box-shadow 0.3s ease;
}
.lp-stage-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-border-accent);
  box-shadow: 0 16px 34px rgba(16, 21, 14, 0.1);
}

.lp-stage-icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-subtle);
  color: var(--color-accent-dark);
  margin-bottom: 14px;
}

.lp-stage-card h3 {
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.lp-stage-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-bottom: 14px;
}

.lp-stage-when {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-accent-dark);
  background: var(--color-accent-subtle);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-pill);
  padding: 3px 11px;
}

.lp-process-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 48px;
}

/* Tablet: 3-up then 2-up. Rail line only makes sense on one row,
   so it's dropped below the desktop breakpoint and each stage
   becomes a self-contained card with its number inline. */
@media (max-width: 1100px) {
  .lp-rail { grid-template-columns: repeat(2, 1fr); gap: 18px; padding-top: 0; }
  .lp-rail::before, .lp-rail::after { display: none; }
  .lp-stage { flex-direction: row; gap: 16px; text-align: left; }
  .lp-stage-node { margin: 0; flex-shrink: 0; width: 44px; height: 44px; }
  .lp-stage-card { flex: 1; }
}
@media (max-width: 639px) {
  .lp-rail { grid-template-columns: 1fr; }
  .lp-stage { gap: 12px; }
}


/* ════════════════════════════════════════════════════════════
   9. PRICING
   ═══════════════════════════════════════════════════════════ */
.lp-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* The feature list keeps the shared .pricing-features treatment from
   components.css — capped height with its own scrollbar. This used to
   be overridden to let the card grow to its full list, which worked
   while only three plans showed; with all six on the page Premier's 22
   points made its row twice the height of the one above it. Scrolling
   inside the card keeps every plan the same height instead. */

.lp-plan-more {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.lp-plan-slim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg-surface);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.3s var(--lp-ease);
}
.lp-plan-slim:hover {
  border-color: var(--color-border-accent);
  background: #FFFFFF;
  transform: translateY(-3px);
}

.lp-plan-slim-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-primary);
  display: block;
}
.lp-plan-slim-meta {
  font-size: 12.5px;
  color: var(--color-text-muted);
}
.lp-plan-slim-price {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-accent-dark);
  white-space: nowrap;
}

.lp-pricing-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding: 20px 24px;
  border: 1px dashed var(--color-border-accent);
  border-radius: 16px;
  background: var(--color-accent-subtle);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-align: center;
}

@media (max-width: 1023px) {
  .lp-pricing-grid { grid-template-columns: repeat(2, 1fr); max-width: none; margin: 0 auto; }
}

@media (max-width: 720px) {
  .lp-pricing-grid { grid-template-columns: 1fr; max-width: 520px; }
}


/* ════════════════════════════════════════════════════════════
   10. WHY CHOOSE US — bento
   ═══════════════════════════════════════════════════════════ */
.lp-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  gap: 20px;
}

.lp-tile {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: #FFFFFF;
  padding: 28px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.4s var(--lp-ease), border-color 0.3s ease, box-shadow 0.3s ease;
}
.lp-tile:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-accent);
  box-shadow: 0 18px 40px rgba(16, 21, 14, 0.1);
}

.lp-tile h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}
.lp-tile p {
  font-size: 15px;
  line-height: 1.62;
  color: var(--color-text-secondary);
}

/* Spans two rows, so it is taller than its own copy — flex column
   with the widget pushed down keeps the extra height from pooling as
   dead space at the bottom of the tile. */
.lp-tile-lead {
  grid-column: span 2;
  grid-row: span 2;
  padding: 34px;
  display: flex;
  flex-direction: column;
}
.lp-tile-lead .lp-liftbox { margin-top: auto; }
.lp-tile-lead h3 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 12px; }
.lp-tile-lead > p { font-size: var(--text-md); max-width: 46ch; }

.lp-tile-dark {
  background: var(--lp-ink);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
.lp-tile-dark h3 { color: #FFFFFF; }
.lp-tile-dark p  { color: rgba(255, 255, 255, 0.66); }
.lp-tile-dark:hover { border-color: rgba(149, 191, 71, 0.42); }

/* Live "conversion lift" widget inside the lead tile — a small
   piece of product UI rather than a stock illustration. */
.lp-liftbox {
  margin-top: 26px;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  padding: 20px;
}

.lp-liftbox-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.lp-liftbox-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.lp-liftbox-delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-accent-dark);
  background: var(--color-accent-subtle);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}

.lp-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 150px;
}

.lp-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  height: 100%;
}

.lp-bar-fill {
  width: 100%;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, #D7E5BF, #B5D083);
  height: var(--h, 20%);
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.8s var(--lp-ease);
}
.lp-liftbox.is-live .lp-bar-fill { transform: scaleY(1); }
.lp-bar:last-child .lp-bar-fill {
  background: linear-gradient(180deg, var(--color-accent-primary), var(--color-accent-dark));
  box-shadow: 0 8px 20px rgba(149, 191, 71, 0.34);
}

.lp-bar-cap {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
}
.lp-bar:last-child .lp-bar-cap { color: var(--color-accent-dark); font-weight: 500; }

/* Us-vs-them comparison tile */
.lp-versus { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

.lp-versus-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 14px;
}
.lp-versus-row:last-child { border-bottom: none; }
.lp-versus-row > span:first-child { color: rgba(255, 255, 255, 0.78); }

.lp-vs-yes, .lp-vs-no {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lp-vs-yes { background: rgba(149, 191, 71, 0.2); color: var(--color-accent-primary); }
.lp-vs-no  { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.34); }

.lp-versus-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  padding-bottom: 6px;
}
.lp-versus-head span:not(:first-child) { width: 24px; text-align: center; }

/* Metric tile */
.lp-tile-metric { display: flex; flex-direction: column; justify-content: center; }
.lp-metric-value {
  font-family: var(--font-mono);
  font-size: clamp(38px, 4.6vw, 54px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--color-accent-dark);
}
.lp-metric-label {
  margin-top: 12px;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* Team tile — full-width band across the bottom of the bento. The
   lead tile occupies cols 1-2 across both rows and the dark/metric
   tiles stack in col 3, so a 3-col span here closes the grid off
   instead of leaving two empty cells on the last row. */
.lp-tile-team {
  grid-column: span 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.lp-tile-team > div:first-child { max-width: 58ch; }
.lp-tile-team .lp-avatar-stack { margin-top: 0; flex-shrink: 0; }

.lp-tile-team .lp-avatar-stack img {
  border-color: #FFFFFF;
  width: 40px; height: 40px;
}
.lp-team-more {
  width: 40px; height: 40px;
  margin-left: -11px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  background: var(--color-accent-primary);
  color: var(--color-accent-text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1023px) {
  .lp-bento { grid-template-columns: repeat(2, 1fr); }
  .lp-tile-lead { grid-column: span 2; grid-row: auto; }
  .lp-tile-team { grid-column: span 2; }
}
@media (max-width: 639px) {
  .lp-bento { grid-template-columns: 1fr; }
  .lp-tile-lead { grid-column: auto; padding: 26px; }
  .lp-tile-team { grid-column: auto; }
  .lp-tile { padding: 24px; }
}


/* ════════════════════════════════════════════════════════════
   11. FEATURE SHOWCASE (Boost conversions)
   ═══════════════════════════════════════════════════════════ */
.lp-showcase {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
}

.lp-showcase-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.lp-showcase-item {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* The clickable row is its own <button> so the body copy can stay a
   real <p> outside it — a paragraph inside a button is invalid and
   breaks the collapse. */
.lp-showcase-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: none;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.lp-showcase-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.38);
  transition: color 0.3s ease;
  flex-shrink: 0;
}

.lp-showcase-title {
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.3s ease;
}

.lp-showcase-head:hover .lp-showcase-title { color: rgba(255, 255, 255, 0.82); }

.lp-showcase-item.is-active .lp-showcase-title { color: #FFFFFF; }
.lp-showcase-item.is-active .lp-showcase-num   { color: var(--color-accent-primary); }

/* 0fr → 1fr collapse. The inner wrapper needs both overflow:hidden
   and min-height:0, otherwise its automatic minimum size keeps the
   row open at content height and nothing ever collapses. */
.lp-showcase-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--lp-ease);
}
.lp-showcase-item.is-active .lp-showcase-body { grid-template-rows: 1fr; }
.lp-showcase-body > * { overflow: hidden; min-height: 0; }
.lp-showcase-body p {
  padding: 0 0 20px 30px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
  max-width: 46ch;
  margin: 0;
}

/* Auto-advance progress line under the active item */
.lp-showcase-progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--color-accent-primary);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}
.lp-showcase-item.is-active .lp-showcase-progress {
  opacity: 1;
  animation: lp-showcase-fill var(--lp-showcase-dur, 6s) linear forwards;
}
@keyframes lp-showcase-fill { to { transform: scaleX(1); } }

/* Preview panel — a stylised app frame that swaps per feature.
   Flex column so the stage fills whatever height the feature list
   ends up at, keeping the two columns visually balanced. */
.lp-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  overflow: hidden;
  min-height: 420px;
}

.lp-preview-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}
.lp-preview-bar i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.lp-preview-bar span {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

/* Panels stack in a single grid cell rather than being absolutely
   positioned. Absolute panels are sized by the frame, so any panel
   taller than it spilled over the chrome bar and out through the
   rounded bottom edge; stacked in-flow, the stage grows to the
   tallest panel and the frame always contains its content. */
.lp-preview-stage {
  position: relative;
  flex: 1;
  display: grid;
  min-height: 372px;
}

.lp-preview-panel {
  grid-area: 1 / 1;
  padding: clamp(20px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  /* Exit faster than enter, and hold the incoming panel back slightly,
     so the two never sit legible on top of each other mid-swap. */
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.lp-preview-panel.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.42s var(--lp-ease) 0.14s, transform 0.42s var(--lp-ease) 0.14s;
}

/* Small mock UI primitives shared by every preview panel */
.lp-mock {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 18px;
}
.lp-mock + .lp-mock { margin-top: 0; }

.lp-mock-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 10px;
}

.lp-mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
}
.lp-mock-row:last-child { border-bottom: none; }
.lp-mock-row b { font-family: var(--font-mono); font-weight: 500; color: #FFFFFF; }
.lp-mock-row .lp-up { color: var(--color-accent-primary); font-family: var(--font-mono); font-size: 12.5px; }

.lp-mock-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  background: var(--color-accent-primary);
  color: var(--color-accent-text);
  font-weight: 700;
  font-size: 14px;
  padding: 12px;
}

.lp-mock-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-mock-pill {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
}
.lp-mock-pill.is-on {
  color: var(--color-accent-text);
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}

.lp-mock-bars { display: flex; align-items: flex-end; gap: 8px; height: 92px; }
.lp-mock-bars i {
  flex: 1;
  border-radius: 6px 6px 2px 2px;
  background: rgba(149, 191, 71, 0.32);
  height: var(--h, 40%);
}
.lp-mock-bars i:last-child { background: var(--color-accent-primary); }

.lp-mock-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.lp-mock-stat b {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: #FFFFFF;
}
.lp-mock-stat span { font-size: 13px; color: rgba(255, 255, 255, 0.5); }

@media (max-width: 900px) {
  .lp-showcase { grid-template-columns: 1fr; }
  .lp-preview { order: -1; min-height: 0; }
  .lp-preview-stage { min-height: 320px; }
}


/* ════════════════════════════════════════════════════════════
   12. PERKS — editorial storytelling
   ═══════════════════════════════════════════════════════════ */
.lp-perks {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

.lp-perks-aside { position: sticky; top: calc(var(--lp-promo-h) + var(--lp-header-h) + 32px); }

.lp-perks-count {
  font-family: var(--font-mono);
  font-size: clamp(60px, 8vw, 96px);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--color-accent-primary);
  display: block;
  margin-bottom: 14px;
}

.lp-perks-list { display: flex; flex-direction: column; }

.lp-perk {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 34px);
  padding: clamp(26px, 3vw, 38px) 0;
  border-top: 1px solid var(--color-border);
}
.lp-perk:last-child { border-bottom: 1px solid var(--color-border); }

/* Offset every other row so the column reads as an editorial
   stagger rather than a four-up card grid. */
.lp-perk:nth-child(even) { padding-left: clamp(0px, 4vw, 56px); }

.lp-perk-index {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  padding-top: 6px;
  transition: color 0.3s ease;
}

.lp-perk-icon {
  position: absolute;
  right: 0;
  top: clamp(26px, 3vw, 38px);
  width: 54px; height: 54px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: background 0.35s ease, color 0.35s ease,
              border-color 0.35s ease, transform 0.45s var(--lp-ease-spring);
}

.lp-perk-body { padding-right: 78px; }

.lp-perk h3 {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin-bottom: 10px;
  transition: color 0.3s ease;
}

.lp-perk p {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-secondary);
  max-width: 52ch;
  margin-bottom: 14px;
}

.lp-perk-proof {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent-dark);
}
.lp-perk-proof svg { flex-shrink: 0; }

.lp-perk:hover .lp-perk-icon {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-text);
  transform: rotate(-6deg) scale(1.06);
}
.lp-perk:hover .lp-perk-index { color: var(--color-accent-dark); }

@media (max-width: 900px) {
  .lp-perks { grid-template-columns: 1fr; }
  .lp-perks-aside { position: static; }
}
@media (max-width: 560px) {
  .lp-perk-icon { position: static; margin-bottom: 14px; width: 46px; height: 46px; }
  .lp-perk-body { padding-right: 0; }
  .lp-perk:nth-child(even) { padding-left: 0; }
}


/* ════════════════════════════════════════════════════════════
   13. TESTIMONIALS
   ═══════════════════════════════════════════════════════════ */
.lp-quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.lp-quotes .testimonial-card { padding: 28px; }

.lp-quote-result {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-accent-dark);
  background: var(--color-accent-subtle);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  width: fit-content;
}

@media (max-width: 1023px) { .lp-quotes { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }


/* ════════════════════════════════════════════════════════════
   14. FINAL CTA
   ═══════════════════════════════════════════════════════════ */
.lp-cta { padding: clamp(56px, 6vw, 88px) 0; }

.lp-cta-panel {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background-color: #12100E;
  background-image:
    radial-gradient(ellipse 55% 70% at 12% 0%,  rgba(149, 191, 71, 0.3) 0%, transparent 66%),
    radial-gradient(ellipse 60% 80% at 92% 100%, rgba(90, 49, 244, 0.4) 0%, transparent 68%);
  padding: clamp(36px, 5vw, 72px);
  isolation: isolate;
}

/* Slow-drifting conic sheen — one compositor-only animation */
.lp-cta-panel::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -60%; left: -20%;
  width: 140%; height: 220%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(149, 191, 71, 0.14) 60deg, transparent 140deg, rgba(90, 49, 244, 0.16) 240deg, transparent 320deg);
  animation: lp-sheen 26s linear infinite;
  pointer-events: none;
}
@keyframes lp-sheen { to { transform: rotate(360deg); } }

.lp-cta-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 0);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000, transparent 80%);
  pointer-events: none;
}

.lp-cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

/* Scoped to .lp-cta-copy, not to the panel: the panel also contains a
   white lead card, and a bare `.lp-cta-panel h2 { color:#fff }` would
   render that card's heading and body copy invisible. */
.lp-cta-copy h2 {
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.042em;
  color: #FFFFFF;
  margin-bottom: 16px;
}

.lp-cta-copy > p {
  font-size: var(--text-md);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.lp-cta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.lp-cta-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill);
  padding: 8px 15px;
}
.lp-cta-chip svg { color: var(--color-accent-primary); flex-shrink: 0; }

/* Final-CTA action panel. The funnel is mounted once (hero), so this
   end of the page converts by sending visitors back to it. */
.lp-cta-action {
  background: #FFFFFF;
  border-radius: 20px;
  padding: clamp(26px, 3vw, 36px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.46);
  text-align: center;
}

.lp-cta-action-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--color-accent-subtle);
  border: 1px solid var(--color-border-accent);
  color: var(--color-accent-dark);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 16px;
}

.lp-cta-action h3 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 10px;
}

.lp-cta-action > p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 22px;
}

.lp-cta-action-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.lp-cta-action-call strong { color: var(--color-text-primary); font-family: var(--font-mono); font-weight: 500; }
.lp-cta-action-call svg { color: var(--color-accent-dark); flex-shrink: 0; }
.lp-cta-action-call:hover strong { color: var(--color-accent-dark); }

.lp-cta-action-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  text-align: left;
}
.lp-cta-action-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--color-text-secondary);
}
.lp-cta-action-list svg { color: var(--color-accent-primary); flex-shrink: 0; }

@media (max-width: 900px) {
  .lp-cta-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════
   15. FAQ
   ═══════════════════════════════════════════════════════════ */
.lp-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.lp-faq .lp-head { margin-bottom: 0; position: sticky; top: calc(var(--lp-promo-h) + var(--lp-header-h) + 32px); }
.lp-faq .accordion-item:first-child { border-top: 1px solid var(--color-border); }
.lp-faq .accordion-trigger { padding: 22px 0; font-size: var(--text-md); }

@media (max-width: 900px) {
  .lp-faq { grid-template-columns: 1fr; }
  .lp-faq .lp-head { position: static; }
}


/* ════════════════════════════════════════════════════════════
   16. FOOTER
   ═══════════════════════════════════════════════════════════ */
.lp-footer {
  background: var(--lp-ink);
  color: rgba(255, 255, 255, 0.56);
  padding: clamp(44px, 5vw, 64px) 0 28px;
}

.lp-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lp-footer img.lp-footer-logo { height: 64px; width: auto; }

.lp-footer-contact {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.lp-footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600;
  font-size: var(--text-sm);
}
.lp-footer-contact a:hover { color: var(--color-accent-primary); }
.lp-footer-contact svg { color: var(--color-accent-primary); flex-shrink: 0; }

.lp-footer-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 26px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.lp-footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
}
.lp-footer-badge svg { color: var(--color-accent-primary); flex-shrink: 0; }

.lp-footer-legal {
  padding-top: 24px;
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.4);
}
.lp-footer-legal a { color: rgba(255, 255, 255, 0.66); }
.lp-footer-legal a:hover { color: var(--color-accent-primary); }
.lp-footer-legal p + p { margin-top: 10px; }

.lp-footer-disclaimer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.lp-footer-disclaimer h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 8px;
}
.lp-footer-disclaimer p { margin: 0; }


/* ════════════════════════════════════════════════════════════
   17. MOBILE STICKY CTA
   ═══════════════════════════════════════════════════════════ */
.lp-sticky-cta {
  position: fixed;
  left: 12px; right: 12px;
  bottom: 12px;
  z-index: 1000;
  display: none;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(14, 19, 16, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
  transform: translateY(140%);
  transition: transform 0.45s var(--lp-ease);
}
.lp-sticky-cta.is-shown { transform: none; }
.lp-sticky-cta .btn-primary { flex: 1; justify-content: center; padding: 13px 18px; }
.lp-sticky-cta .lp-sticky-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .lp-sticky-cta { display: flex; }
  .lp-body { padding-bottom: 84px; }
}


/* ════════════════════════════════════════════════════════════
   19. MOTION PREFERENCES
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .lp-scroll-cue,
  .lp-scroll-track::after,
  .lp-cta-panel::before,
  .lp-hero-badge-dot,
  .lp-hero-chip,
  .lp-showcase-item.is-active .lp-showcase-progress { animation: none !important; }

  /* The popup still fades — an element that appears out of nowhere is
     harder to follow than one that arrives — but instantly, with no
     travel. */
  .lp-modal-backdrop,
  .lp-modal-box { transition: opacity 0.01ms; }
  .lp-modal-box { transform: none; }
  .lp-modal.is-open .lp-modal-box { transform: none; }

  .lp-bar-fill { transform: scaleY(1); transition: none; }
  .lp-rail::after { transition: none; }
  .lp-preview-panel { transition: opacity 0.01ms; }
  .lp-shot,
  .lp-tile,
  .lp-stage-card,
  .lp-plan-slim { transition: border-color 0.2s ease; }
  .lp-shot:hover,
  .lp-tile:hover,
  .lp-stage-card:hover,
  .lp-plan-slim:hover { transform: none; }
}