/* ============================================================
   lp.css — direct-response funnel stylesheet (yellows.one)
   Requires tokens.css + base.css. Funnels only. No chrome.
   Tokens only (var() from tokens.css + --lp-* funnel tokens).
   Mobile-first: base = mobile, @media (min-width:769px) = desktop.
   ============================================================ */

/* ── FUNNEL TOKENS (global to all funnels; accent stays per-funnel) ─ */
.lp {
  /* Reading column rhythm */
  --lp-section-pad:     var(--sp-12);   /* 48px — tighter DR rhythm vs site --sp-20 */
  --lp-section-pad-sm:  var(--sp-8);    /* 32px mobile */
  --lp-prose-size:      var(--text-lg); /* body prose */
  --lp-prose-gap:       var(--sp-5);    /* paragraph spacing */
  --lp-title-size:      var(--text-3xl);/* section headings (mobile) */
  --lp-title-size-lg:   var(--text-4xl);/* section headings (desktop) */

  /* Emphasis colour — brand blue (replaces the old DR red). All emphasis
     (eyebrow, ВНИМАНИЕ, СУММАРНАЯ ЦЕННОСТЬ, price reveal) is brand blue;
     struck-through standard prices use the muted token. */
  --lp-emphasis: var(--c-primary);

  /* Accent fallback. Canonical per-funnel home is lp/<funnel>/<funnel>.css (loaded last); these defaults keep shared rules (e.g. .lp-bonus border) resolving to brand accent if a page omits its per-funnel file. */
  --lp-accent:      var(--c-accent);
  --lp-accent-dark: var(--c-accent-dark);
  --lp-accent-text: var(--c-accent-text);
}

/* Per-funnel accent + overrides live in lp/<funnel>/<funnel>.css (loaded LAST, after lp.css). See AGENTS.md §12. */

/* ── SKIP LINK (replicated from site.css — funnels don't load it) ─ */
.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: calc(-1 * var(--sp-20));
  z-index: 100;
  background: var(--c-primary);
  color: var(--c-text-inv);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  font-weight: var(--fw-semibold);
  transition: top var(--ease-fast);
}
.skip-link:focus {
  top: var(--sp-2);
  color: var(--c-text-inv);
}

/* ── EMPHASIS UTILITIES ──────────────────────────────────── */
/* Brand emphasis = brand blue (--lp-emphasis = --c-primary), NOT red.
   --c-primary is 4.63:1 on --c-surface-blue and 5.9:1 on white — AA at all
   copy sizes here. The pasav flagship uses the brand-neutral `.lp-emph`. */
.lp .lp-emph { color: var(--lp-emphasis); }
/* LEGACY ALIASES — DO NOT reintroduce red. `.accent-red`/`.accent-dred` are
   stale red-named classes still used by the OTHER funnels (ma5d, aioffer,
   pasav/reg). Kept (mapped to brand blue) so those pages aren't churned by
   this pasav-only pass; new markup should use `.lp-emph`. */
.lp .accent-red  { color: var(--lp-emphasis); }
.lp .accent-dred { color: var(--lp-emphasis); }

/* ============================================================
   SECTION RHYTHM
   Tight DR vertical rhythm — copy flows continuously, headings
   and bodies are separate sections in the source order.
   ============================================================ */
.lp-section {
  padding-block: var(--lp-section-pad-sm);
}
/* Heading section directly followed by its body: pull body up */
.lp-section--head {
  padding-bottom: var(--sp-2);
}
/* #2: surface band — sets a section apart from its white neighbours for clean
   alternating rhythm (used on the testimonials block so it doesn't blend into
   the preceding CTA and flows into the following blue ВНИМАНИЕ section). When a
   head + body section share the band, the head keeps its own padding-bottom and
   the body's top padding is pulled in so the band reads as one continuous block. */
.lp-section--surface { background: var(--c-surface); }
.lp-section--surface.lp-section--head { padding-bottom: var(--sp-2); }
.lp-section--surface + .lp-section--surface { padding-top: var(--sp-2); }

/* ── TIMER BAR (AutomateHero embed) ──────────────────────── */
/* #8: top timer is a COMPACT strip — tight padding so it doesn't overpower
   the H1 that follows. Brand-blue tinted surface, no loud colours. */
.lp-timer {
  padding-block: var(--sp-2);
  background: var(--c-surface-blue);
  border-bottom: 1px solid var(--c-border);
}
.lp-timer__embed {
  display: flex;
  justify-content: center;
  width: 100%;
  /* The AutomateHero countdown lays out at a ~471px natural width but
     self-scales to fit its container: it measures .lp-timer__embed and writes
     an inline transform: scale(<1) on its .ah-envelope (e.g. ~0.66 at 360px),
     so the FULL widget stays visible and centered — it is NOT clipped. The
     overflow-x:hidden below is only a defensive safety net for the brief
     pre-scale frame / older widget builds, so a transient 471px box can never
     leak page-level horizontal scroll at 360/375/390. Verified on preview:
     countdown fits inside the embed at 360px with no h-scroll. */
  overflow-x: hidden;
}
/* #1 brand-colour: the AutomateHero widget hard-codes its bracket glyphs ([ ])
   and unit labels (Дни/Часы/Минуты/Секунды) to red #E14141 via its OWN injected
   <style>. We can't edit the verbatim vendor embed, so re-tint them to brand
   blue here. Each selector prefixes the vendor's own selector with .lp-timer to
   out-specify it (vendor: .ah-countdown li.ah-unit span.ah-label and
   .ah-countdown .ah-flex-section.timer-section::before/::after). Applies to BOTH
   the top timer and the integrated timer #2 (both live under .lp-timer).
   Keeps the funnel 100% on the brand palette — zero red. */
.lp-timer .ah-countdown li.ah-unit span.ah-label {
  color: var(--c-primary);
}
.lp-timer .ah-countdown .ah-flex-section.timer-section::before,
.lp-timer .ah-countdown .ah-flex-section.timer-section::after {
  color: var(--c-primary);
}

/* #7: reason-to-respond-now section — heading, copy and timer #2 live on ONE
   blue-tinted surface so the countdown is part of the section, not a detached
   band. The contained timer drops its own surface/border/padding entirely. */
.lp-rtr {
  background: var(--c-surface-blue);
  text-align: center;
}
/* #4: the ВНИМАНИЕ heading sat too close to its body — open the gap to the
   first copy block (margin under the heading + margin over the copy). */
.lp-rtr .lp-title { margin-bottom: var(--sp-8); }
.lp-rtr__copy { text-align: left; }
.lp-rtr .lp-title + .lp-rtr__copy { margin-top: var(--sp-8); }
.lp-rtr .lp-timer {
  margin-block: var(--sp-6);
  padding: 0;
  background: transparent;
  border: 0;
}

/* ============================================================
   HERO / HOOK
   ============================================================ */
.lp-hero {
  position: relative;
  overflow: hidden;
  background: var(--c-surface-blue);
  text-align: center;
  padding-block: var(--sp-10);
}
.lp-hero__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 18%, color-mix(in srgb, var(--c-primary) 16%, transparent), transparent 70%),
    radial-gradient(40% 40% at 82% 8%, color-mix(in srgb, var(--c-accent) 14%, transparent), transparent 70%);
}
.lp-hero__inner {
  position: relative;
  z-index: 1;
}
.lp-hero__eyebrow {
  margin: 0 auto var(--sp-6);
  max-width: var(--max-width-narrow);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--c-text-2);
}
.lp-hero__title {
  margin: 0 auto;
  max-width: 30ch;   /* mobile: near full container width -> fewer lines; desktop caps at 22ch */
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  text-wrap: balance;
  letter-spacing: -0.02em;
}
.lp-hero__lead {
  margin: var(--sp-6) auto 0;
  max-width: var(--max-width-narrow);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-wrap: balance;
  color: var(--c-text);
}

/* REG page: hero is the entire page (hook + bullets + CTA, no other sections).
   Unify as one clean block — no standalone blue band, tighter rhythm, fits one screen. */
.lp--reg .lp-hero { background: transparent; padding-block: var(--sp-8) var(--sp-4); }
.lp--reg .lp-hero__glow { display: none; }
.lp--reg .lp-section { padding-block: var(--sp-4); }
/* Sticky footer on EVERY funnel page — short pages (reg/confirm/success/thank-you)
   pin the footer to the viewport bottom so it never 'hangs' with white below it.
   <main> grows to fill, and its LAST section stretches so the leftover space takes
   that section's OWN background (e.g. the blue intro on paai fills down to the
   footer) — never a blank white strip between the content and the footer. On long
   pages it's a no-op. 100dvh accounts for mobile browser chrome. */
.lp { min-height: 100dvh; display: flex; flex-direction: column; }
.lp > #main { flex: 1 0 auto; display: flex; flex-direction: column; }
/* The last section grows to fill leftover space AND owns the gap before the
   footer (as its OWN background — blue on paai, white elsewhere) instead of a
   blank white footer margin. */
.lp > #main > :last-child { flex: 1 0 auto; padding-bottom: var(--sp-12); }
.lp > .lp-footer { flex-shrink: 0; }
/* Desktop-only line-break helper (e.g. push the eyebrow's 2nd sentence to its own line) */
.lp-hero__eyebrow-br { display: none; }

/* ============================================================
   LOGO HEADER (logo-only funnel header — NO nav / NO chrome)
   Compact brand bar for terminal/confirmation funnel pages that
   need a brand mark but no navigation. Centered logo on a light
   surface with a hairline rule below.
   ============================================================ */
.lp-header {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  padding-block: var(--sp-5);
}
.lp-header__inner {
  display: flex;
  justify-content: center;     /* centered logo, no nav */
  align-items: center;
}
/* Split layout — logo left, single post-conversion SUPPORT contact («Связь»)
   right. NOT site exit-nav: only the one support link sits here. Used on the
   thank-you/confirmation pages whose body copy points to a «Связь» control "в
   правом верхнем углу". */
.lp-header__inner--split { justify-content: space-between; }
.lp-logo {
  display: inline-flex;
  align-items: center;
}
.lp-logo img {
  display: block;
  width: auto;
  height: var(--sp-8);          /* 32px — compact brand mark, scales with token */
}

/* ============================================================
   SECTION TITLES + BODY PROSE
   ============================================================ */
.lp-title {
  margin: 0 auto;
  max-width: var(--max-width-narrow);
  font-size: var(--lp-title-size);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-align: center;
  text-wrap: balance;
}

.lp-prose {
  font-size: var(--lp-prose-size);
  line-height: var(--lh-relaxed);
  color: var(--c-text);
  overflow-wrap: break-word;   /* long URLs/tokens can't overflow the 360px column */
  text-wrap: pretty;
}
.lp-prose p { margin-block: 0; }
.lp-prose p + p { margin-top: var(--lp-prose-gap); }
.lp-prose ul,
.lp-prose ol {
  margin-block: var(--lp-prose-gap);
  padding-left: var(--sp-6);
}
.lp-prose li { margin-bottom: var(--sp-2); }
.lp-prose li::marker { color: var(--c-primary); }
.lp-prose a { color: var(--c-primary); text-decoration: underline; }
.lp-prose a:hover { color: var(--c-primary-dark); }

/* ── LEGAL DOCUMENT (оферта / public-offer pages) ─────────────
   Long-form legal prose in a narrow reading column. `.lp-prose`
   deliberately doesn't style nested headings, so the document
   title, section headings and the place/date meta get their own
   tokens-only rules layered on top of the prose column. */
.lp-legal__title {
  margin: 0 0 var(--sp-10);
  font-size: var(--lp-title-size);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-align: center;
}
.lp-legal__meta {
  margin-bottom: var(--sp-10);
  color: var(--c-text-muted);
  text-align: right;
}
.lp-legal__h {
  margin: var(--sp-10) 0 var(--sp-4);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

/* ── VALUE SUMMARY (right-aligned emphasis line) ─────────── */
.lp-value {
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  text-align: right;
}

/* ============================================================
   CTA BUTTON (.btn--lp) — large/bold funnel SIZE modifier layered on
   the base brand-yellow .btn--cta (#111 on #fcd214). No own colours, so
   the funnel CTA stays 100% on the brand palette. Used as
   `btn btn--cta btn--lp btn--full`.
   ============================================================ */
.btn--lp {
  font-size: var(--text-xl);   /* 20px */
  font-weight: var(--fw-bold);  /* 700 */
  line-height: var(--lh-snug);
  padding: var(--sp-4) var(--sp-6);
  white-space: normal;
  text-align: center;
}

/* CTA section wrapper — generous breathing room around the click.
   #3: full-width on mobile, constrained + centered on desktop (≥769px). */
.lp-cta {
  padding-block: var(--sp-12);
  text-align: center;
}
.lp-cta .btn--full {
  margin-inline: auto;
}

/* Dual-CTA row — two choices (e.g. e-mail vs Telegram) presented side by side.
   Mobile-first: the buttons stack full-width (each its own .btn--full), one
   tap target per row; from ≥769px they sit on one centered row, each capped so
   the pair reads as a balanced choice. Tokens-only; reuses the base buttons. */
.lp-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}
/* Always clear the click above — whether buttons are wrapped in .lp-actions
   (pasav/paai) or a single bare .btn (aioffer reg) — so the note never sticks. */
.lp-cta__note { margin-top: var(--sp-8); }
@media (min-width: 769px) {
  .lp-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .lp-actions .btn {
    flex: 1 1 0;
    max-width: 320px;
  }
}

/* ============================================================
   FIGURE (inline proof image — e.g. report screenshot)
   ============================================================ */
/* Centered inside the narrow reading column; rounded + bordered to read as
   a framed screenshot. base.css already makes <img> fluid (max-width:100%). */
.lp-figure {
  max-width: var(--max-width-narrow);
  margin-inline: auto;
  margin-block: var(--sp-8);   /* breathing room from the text above/below */
}
.lp-figure img {
  margin-inline: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

/* ============================================================
   BONUS BLOCK
   ============================================================ */
.lp-bonus {
  max-width: var(--max-width-narrow);
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--lp-accent);
  border-radius: var(--r-lg);
}
/* #1: consistent bonus heading — the "БОНУС N:" prefix stays regular weight,
   the title (wrapped in <strong> in the markup) is bold. So the heading element
   itself is normal weight and only the <strong> title carries the bold. */
.lp-bonus__title {
  margin-bottom: var(--sp-5);
  font-size: var(--text-2xl);
  font-weight: var(--fw-normal);
  line-height: var(--lh-snug);
  text-wrap: balance;
}
.lp-bonus__title strong { font-weight: var(--fw-bold); }

/* ============================================================
   VALUE STACK (the "what you get" striped table)
   ============================================================ */
/* #4: constrained to the narrow reading column + centered, so the table
   sits inside the design instead of stretching the full container width. */
.lp-stack {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--max-width-narrow);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-bg);
}
.lp-stack__row {
  display: grid;
  grid-template-columns: 1fr;  /* mobile: name then price stacked, full panel width */
  row-gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
}
.lp-stack__row:nth-child(even) { background: var(--c-surface); }
.lp-stack__name {
  font-weight: var(--fw-semibold);
  text-align: left;            /* #3a */
  overflow-wrap: break-word;   /* match defensive guard on .lp-prose / .lp-footer__email */
}
/* Decorative checkmark (was a literal ✅ in the source copy) — pseudo-element
   so screen readers don't announce "white heavy check mark" before each row. */
.lp-stack__name::before {
  content: "\2705";            /* ✅ */
  margin-right: var(--sp-2);
}
/* #3a/#3b: standard price is plain muted text (NOT struck). Mobile = its own
   left-aligned sub-line under the item (prices are long phrases, e.g.
   "Стандартная цена: Отдельно не продается." — never force them onto the name
   row or they overflow 360px). Desktop pulls them right into a 2nd column. */
.lp-stack__price {
  color: var(--c-text-muted);
  font-size: var(--text-sm);
  text-align: left;
}

/* ── P.S. block ──────────────────────────────────────────── */
.lp-ps {
  max-width: var(--max-width-narrow);
  margin-inline: auto;
}

/* ============================================================
   PRICE-REVEAL PANEL (#1) — the offer moment at CTA #1.
   Reveal copy + anchor + price + CTA wrapped in ONE distinct surface
   card so it clearly stands out as THE offer. Mirrors the .lp-offer
   panel idiom (surface bg / border / radius / centered), tokens only.
   ============================================================ */
.lp-price-reveal {
  max-width: var(--max-width-narrow);
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-6);
  background: var(--c-surface-blue);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  text-align: center;
}
.lp-price-reveal > * + * { margin-top: var(--sp-5); }
.lp-price-reveal__copy { text-align: center; }
/* sub-section heading introducing the offer */
.lp-price-reveal__head {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-wrap: balance;
}
/* anchor price — muted strikethrough (legit discount reveal, kept) */
.lp-price-reveal__anchor {
  font-size: var(--text-2xl);
  color: var(--c-text-muted);
}
.lp-price-reveal__anchor s { color: var(--c-text-muted); }
/* the actual price — large + brand blue, the visual hero of the block */
.lp-price-reveal__price {
  font-size: var(--text-5xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
}
.lp-price-reveal .lp-cta { padding-block: 0; }

/* ============================================================
   OFFER PANEL (#5) — value-stack → price-reveal → CTA as ONE block
   A single cohesive card so the summary, the price and the click read as
   one offer instead of scattered sections. The contained sections drop
   their own block padding; the panel owns the rhythm.
   ============================================================ */
.lp-offer {
  max-width: var(--max-width-narrow);
  margin-inline: auto;
  /* #3: tighter horizontal padding on mobile so the value-stack table can use
     more of the screen width (desktop padding is restored in the ≥769px block). */
  padding: var(--sp-8) var(--sp-3);
  background: var(--c-surface-blue);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  text-align: center;
}
.lp-offer > * + * { margin-top: var(--sp-6); }
/* #3: on mobile the stack breaks out to the panel's inner edge (negative margin
   == the panel's horizontal padding) so the table spans the full panel width
   instead of sitting cramped inside it. The breakout exactly cancels the panel
   padding, so the stack never extends past the panel border — no h-scroll at
   360/375/390. Reset to flush (margin 0) on desktop in the ≥769px block. */
.lp-offer .lp-stack {
  max-width: none;   /* fill the full breakout width SYMMETRICALLY (100% capped it
                        to the padded content box, so the negative margin pulled the
                        table left and left a gap on the right = looked crooked) */
  margin-inline: calc(-1 * var(--sp-3));
}
/* the panel's intro heading + closing price heading */
.lp-offer__head {
  margin: 0;
  font-size: var(--lp-title-size);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-wrap: balance;
}
/* summary total — single right-aligned line on tablet/desktop (consistent with
   the price column), keeping the brand-blue emphasis. On narrow phones the long
   string would overflow on one line, so it is allowed to wrap (still right-aligned)
   to protect the no-horizontal-scroll rule. */
.lp-offer .lp-value {
  text-align: right;
  white-space: nowrap;
  font-size: var(--text-2xl);
}
@media (max-width: 768px) {
  .lp-offer .lp-value {
    white-space: normal;
    font-size: var(--text-xl);
  }
}
.lp-offer__note {
  font-size: var(--lp-prose-size);
  line-height: var(--lh-relaxed);
  color: var(--c-text-2);
  text-wrap: pretty;
}
/* Standard: the СУММАРНАЯ ЦЕННОСТЬ total always gets generous space below it,
   whatever follows (the "Но сегодня…" note in the 1st block, or the "Заберите…"
   head directly in the 2nd block) — consistent on every details page. */
.lp-offer .lp-value + * { margin-top: var(--sp-10); }
/* The closing "Заберите всё это…" CTA heading (the panel's 2nd head) always gets
   generous space above it — so it never sticks to the preceding "Но сегодня…" note
   (1st block) or the total (2nd block). The intro head is :first-child = exempt. */
.lp-offer__head:not(:first-child) { margin-top: var(--sp-10); }
.lp-offer .lp-cta { padding-block: 0; }

/* ============================================================
   GUARANTEE PANEL (#6) — badge + copy as ONE cohesive block
   ============================================================ */
.lp-guarantee {
  max-width: var(--max-width-narrow);
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-primary);
  border-radius: var(--r-lg);
}
.lp-guarantee__badge {
  display: block;
  margin: 0 auto var(--sp-5);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-align: center;
  color: var(--lp-emphasis);
}

/* ============================================================
   TESTIMONIALS (#11) — compact proof cards + see-all button
   Reuses the brand .card; minimal local layout (quote + thumb + cite).
   ============================================================ */
.lp-testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  max-width: var(--max-width-mid);
  margin-inline: auto;
}
.lp-tst {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* #11 a11y: the card itself isn't a link (only the thumb is), so suppress the
   base .card:hover lift/shadow — it falsely implies the whole card is clickable. */
.lp-tst:hover {
  box-shadow: none;
  transform: none;
}
.lp-tst .card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1 1 auto;
}
.lp-tst__thumb {
  display: block;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}
/* #11: no forced wrapper ratio — each proof keeps its intrinsic ratio so
   portrait screenshots (the numbers/quote that build trust) aren't cropped.
   The width/height attrs on each <img> reserve space, so still no CLS. */
.lp-tst__thumb img {
  display: block;
  width: 100%;
  height: auto;
}
.lp-tst__quote {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--c-text);
  overflow-wrap: break-word;
}
.lp-tst__quote::before { content: "\201C"; }
.lp-tst__quote::after  { content: "\201D"; }
.lp-tst__cite {
  margin-top: auto;
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--c-text-muted);
  line-height: var(--lh-snug);
}
.lp-tst__name {
  display: block;
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  font-size: var(--text-base);
}
/* see-all button — full-width brand-blue, centered, capped on desktop */
.lp-testimonials-all {
  max-width: var(--max-width-mid);
  margin: var(--sp-8) auto 0;
  text-align: center;
}
.lp-testimonials-all .btn { margin-inline: auto; }

/* ============================================================
   SCROLL-REVEAL (#2) — fade + small translateY on sections.
   No-JS = visible (only .js-reveal elements, set by the script, hide).
   prefers-reduced-motion = no animation, fully visible (below).
   No CLS: the element keeps its box; only opacity/transform animate.
   ============================================================ */
.js-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--ease-base), transform var(--ease-base);
}
/* will-change is transient: hint the compositor only while the element is
   still waiting to reveal, so it self-clears once revealed (no persistent
   compositor layers held on ~35 elements after they've animated in). */
.js-reveal:not(.is-revealed) {
  will-change: opacity, transform;
}
.js-reveal.is-revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   FUNNEL FOOTER (no site nav / no exit menu)
   #9: small, light-gray, low-emphasis legal footer (NOT the dark site
   footer). Muted text on a light surface so it doesn't pull attention.
   #5: compact two-sided layout — legal links on one side, the ИП block +
   email on the other. Row on desktop, stacks on narrow mobile. Reduced
   vertical padding/margin so the footer stays short.
   ============================================================ */
.lp-footer {
  background: var(--c-surface);
  color: var(--c-text-muted);
  border-top: 1px solid var(--c-border);
  /* No top margin: the gap above the footer is owned by the last content
     section's padding (its own background), never a blank white strip. */
  padding-block: var(--sp-5);
}
/* Two-sided + compact: ИП block on the LEFT, legal links on the RIGHT. DOM order
   is legal→company, so row-reverse renders company(ИП) left / legal(links) right.
   The links stack tightly (no oversized rows) so the links block height ≈ the ИП
   block height and the two sides read as even. */
.lp-footer__inner {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-6);
}
.lp-footer__legal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;       /* links right-aligned on the right side */
  gap: 0;                      /* tight — block height ≈ the ИП block */
  text-align: right;
  font-size: var(--text-xs);
}
.lp-footer__legal a {
  display: inline-block;
  padding-block: var(--sp-1);  /* compact tap padding (no 44px row that bloats the block) */
  color: var(--c-text-muted);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  transition: color var(--ease-fast);
}
.lp-footer__legal a:hover { color: var(--c-primary); }
/* #5: ИП identity + email share one compact block (inline, dot-separated copy) */
.lp-footer__company {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--sp-1);
  font-size: var(--text-xs);
  color: var(--c-text-muted);
  line-height: var(--lh-normal);
}
.lp-footer__email {
  color: var(--c-text-muted);
  text-decoration: underline;
  overflow-wrap: break-word;   /* long addresses can't overflow the narrow column */
  transition: color var(--ease-fast);
}
.lp-footer__email:hover { color: var(--c-primary); }

/* ============================================================
   PAYMENT POPUP (native <dialog>)
   ============================================================ */
/* #12 (revenue-critical): the iDX form is ~860px tall. The DIALOG itself owns
   the height clamp; the form lives in a SCROLLABLE inner container so the user
   can reach the pay button + checkboxes at the bottom of the form. The close
   (×) button sits on the dialog, OUTSIDE the scroll area, so it is always
   visible. Works at 360px (90dvh accounts for mobile browser chrome). */
.lp-popup {
  position: fixed;          /* now a fixed, viewport-centered modal (top-layer centering preserved) */
  inset: 0;
  display: flex;            /* applied only when [open] (below) */
  flex-direction: column;
  width: calc(100% - var(--sp-8));   /* mobile gutter: 16px each side */
  max-width: 640px;
  min-height: 40dvh;        /* guard: visible centered box even before the iDX iframe posts its height */
  max-height: 90vh;
  max-height: 90dvh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--c-bg);
  color: var(--c-text);
  box-shadow: var(--shadow-xl);
  overflow: hidden;         /* clip the rounded corners; the inner scrolls */
}
.lp-popup:not([open]) { display: none; }
.lp-popup::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
/* scroll container — only this scrolls; the × stays put */
.lp-popup__inner {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;            /* allow the flex child to shrink + scroll */
  padding: var(--sp-12) var(--sp-6) var(--sp-6);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* #12 guard: the iDX widget writes INLINE overflow + a fixed height onto its
   OWN parent (.lp-popup__form) when the iframe posts its measured height. An
   inline declaration beats a normal stylesheet rule, so the guard MUST use
   !important to win — otherwise the widget could pin the form to a fixed
   height + overflow:auto/hidden and create a nested scroll that traps the pay
   button. Forcing height:auto + overflow:visible makes the form always grow to
   its content, so .lp-popup__inner stays the single scroll owner and the pay
   button + consent checkboxes remain reachable on small phones. (The iframe
   keeps its own inline height — only the wrapper is neutralised.) */
.lp-popup__form {
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}
.lp-popup__close {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 1;              /* above the scrolling form */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;               /* WCAG 2.5.5 tap target */
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: var(--c-bg);   /* opaque so it never blends into the form */
  color: var(--c-text-2);
  font-size: var(--text-3xl);
  line-height: 1;
  cursor: pointer;
  transition: color var(--ease-fast), background var(--ease-fast);
}
.lp-popup__close:hover {
  color: var(--c-text);
  background: var(--c-surface);
}
.lp-popup__close:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

/* ============================================================
   DESKTOP (≥769px)
   ============================================================ */
@media (min-width: 769px) {
  .lp-section { padding-block: var(--lp-section-pad); }

  .lp-hero { padding-block: var(--sp-16); }
  .lp-hero__eyebrow { font-size: var(--text-xl); margin-bottom: var(--sp-8); }
  .lp-hero__title { font-size: var(--text-5xl); max-width: 26ch; }
  .lp-hero__lead { font-size: var(--text-3xl); margin-top: var(--sp-8); }
  .lp-hero__eyebrow-br { display: inline; }
  .lp-figure { margin-block: var(--sp-10); }

  .lp--reg .lp-hero { padding-block: var(--sp-12) var(--sp-6); }
  .lp--reg .lp-section { padding-block: var(--sp-6); }

  .lp-title { font-size: var(--lp-title-size-lg); }
  .lp-legal__title { font-size: var(--lp-title-size-lg); }
  .lp-prose { font-size: var(--text-xl); }

  .lp-bonus { padding: var(--sp-10) var(--sp-10); }

  .btn--lp { padding: var(--sp-4) var(--sp-10); }

  /* #3: top-level CTA is NOT full-bleed on desktop — constrain + center the
     click. Scoped to standalone .lp-section.lp-cta + the see-all button only,
     NOT the CTA nested inside an .lp-offer panel: that one fills the panel
     content width so the click spans the offer card edge-to-edge.
     Mobile keeps the 100% width from .btn--full. */
  .lp-section.lp-cta .btn--full,
  .lp-testimonials-all .btn--full { max-width: 480px; }

  .lp-price-reveal { padding: var(--sp-12) var(--sp-10); }
  .lp-price-reveal__price { font-size: var(--text-6xl); }

  .lp-offer { padding: var(--sp-12) var(--sp-10); }
  /* #3: desktop keeps the stack flush inside the roomier panel (no breakout) */
  .lp-offer .lp-stack { margin-inline: 0; }
  /* desktop has room: name + price share one baseline row, price pulled right */
  .lp-stack__row { grid-template-columns: 1fr auto; column-gap: var(--sp-4); align-items: baseline; }
  .lp-stack__price { text-align: right; }
  .lp-guarantee { padding: var(--sp-10) var(--sp-10); }

  /* #11: 2-up then 3-up testimonial grid on wider viewports */
  .lp-testimonials { grid-template-columns: repeat(3, 1fr); }

  /* #5: footer is two-sided (ИП left / links right) at every width — see base rules. */
}