/* PUSHка landing — isolated namespace (.lp-*). Do not import into public.css / admin.css. */
/* Master-reference-led build: optical cool white ground, graphite typography, restrained vermillion,
   one dark accent band, and a compact layered Content Machine as the signature object. */

.lp-body {
  --lp-bg: #f7f7f9;
  --lp-bg-deep: #f1f2f5;
  --lp-paper: #ffffff;
  --lp-panel: #fcfcfd;
  --lp-ink: #14161a;
  --lp-ink-mid: #3a3e46;
  --lp-ink-soft: #5f636b;
  --lp-ink-faint: #878c94;
  --lp-line: #e5e7eb;
  --lp-line-soft: #ecedf1;
  --lp-line-strong: #d2d5db;
  --lp-accent: #de5a1b;
  --lp-accent-ink: #a94428;
  --lp-accent-line: #e2662a;
  --lp-accent-soft: rgba(222, 90, 27, 0.1);
  --lp-live: #2f8f68;
  --lp-dark: #181e27;
  --lp-dark-2: #0f141b;
  --lp-font: "Onest", system-ui, sans-serif;
  --lp-mono: "IBM Plex Mono", ui-monospace, monospace;
  --lp-shell: min(1240px, calc(100% - 3rem));
  --lp-header-h: 4.5rem;
  --lp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Tight radius scale (6 / 8 / 12 / 14) — the master does not mix five different corners. */
  --lp-radius: 6px;
  --lp-radius-card: 12px;
  --lp-radius-band: 14px;
  --lp-shadow-card: 0 1px 2px rgba(20, 22, 26, 0.04), 0 14px 34px rgba(20, 22, 26, 0.07);
  --lp-shadow-panel: 0 1px 2px rgba(20, 22, 26, 0.03);

  margin: 0;
  color: var(--lp-ink);
  background:
    radial-gradient(1100px 520px at 82% 2%, rgba(222, 90, 27, 0.035), transparent 62%),
    radial-gradient(860px 420px at 4% 0%, rgba(20, 22, 26, 0.028), transparent 58%),
    linear-gradient(180deg, #fbfbfc 0%, var(--lp-bg) 24%, var(--lp-bg-deep) 100%);
  font-family: var(--lp-font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lp-body[data-lp-accent="a"] {
  --lp-accent: #c24e2a;
  --lp-accent-ink: #9a3c1f;
  --lp-accent-line: #cf5a2c;
  --lp-accent-soft: rgba(194, 78, 42, 0.1);
}

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

.lp-body a { color: inherit; }

.lp-body ::selection {
  background: var(--lp-accent-soft);
  color: var(--lp-ink);
}

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

.lp-skip {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  padding: 0.55rem 0.9rem;
  background: var(--lp-ink);
  color: #fff;
  text-decoration: none;
  border-radius: var(--lp-radius);
}

.lp-skip:focus,
.lp-skip:focus-visible { top: 1rem; }

.lp-shell {
  width: var(--lp-shell);
  margin-inline: auto;
}

.lp-center { text-align: center; }

.lp-mono {
  font-family: var(--lp-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  font-size: 0.74em;
}

.lp-label {
  margin: 0 0 1rem;
  font-family: var(--lp-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--lp-ink-faint);
}

/* ——— Icons ——— */
.lp-ico {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lp-ico--xs { width: 0.9rem; height: 0.9rem; stroke-width: 1.8; }
.lp-ico--btn { width: 1rem; height: 1rem; stroke-width: 1.8; }
.lp-ico--md { width: 1.5rem; height: 1.5rem; stroke-width: 1.35; }
.lp-ico--lg { width: 1.8rem; height: 1.8rem; stroke-width: 1.25; }

/* ——— Header ——— */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(14px);
  background: rgba(250, 250, 252, 0.86);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--lp-ease), background 0.25s var(--lp-ease);
}

.lp-header.is-scrolled {
  border-bottom-color: var(--lp-line);
  background: rgba(252, 252, 253, 0.94);
}

.lp-header__inner {
  min-height: var(--lp-header-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
}

.lp-brand { text-decoration: none; }

.lp-brand__name {
  font-size: 1.28rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.lp-brand__name b { font-weight: 800; }
.lp-brand__soft { color: var(--lp-ink-soft); font-weight: 500; }

.lp-nav {
  display: flex;
  align-items: center;
  gap: 1.7rem;
}

.lp-nav a {
  text-decoration: none;
  color: var(--lp-ink-mid);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.lp-nav a:hover { color: var(--lp-accent-ink); }

.lp-body a:focus-visible,
.lp-body button:focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: 3px;
}

.lp-nav--desktop { justify-content: center; }

/* ——— Pending destination ———
   Used wherever the page names something real that has no URL yet: the future offer document,
   the social accounts. Inert on purpose — not an anchor, not focusable, and carrying the state
   in words rather than only in colour, so it cannot be mistaken for a broken link. */
.lp-pending {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: var(--lp-ink-faint);
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: default;
}

.lp-soon {
  font-family: var(--lp-mono);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lp-ink-faint);
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  padding: 0.1rem 0.34rem;
}

.lp-header__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* Header actions share one compact control: fixed height, identical box model.
   <a> and <button> otherwise pick different UA fonts/line-boxes. */
.lp-header__actions .lp-btn--compact {
  height: 2.5rem;
  min-height: 2.5rem;
  padding-block: 0;
  line-height: 1;
  font-family: inherit;
  border-width: 1px;
  box-shadow: none;
}

.lp-header__actions .lp-btn--primary,
.lp-header__actions .lp-btn--primary:hover {
  box-shadow: none;
}

.lp-header__actions .lp-btn--unavailable {
  white-space: normal;
  height: auto;
  min-height: 2.5rem;
  max-width: 13rem;
  line-height: 1.15;
  text-align: center;
  padding-block: 0.3rem;
  padding-inline: 0.7rem;
  font-size: 0.75rem;
}

.lp-nav-toggle {
  display: none;
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid var(--lp-line-strong);
  background: var(--lp-paper);
  border-radius: var(--lp-radius);
  cursor: pointer;
  padding: 0;
}

.lp-nav-toggle__bars,
.lp-nav-toggle__bars::before,
.lp-nav-toggle__bars::after {
  display: block;
  width: 1rem;
  height: 1.5px;
  margin: 0 auto;
  background: var(--lp-ink);
  position: relative;
}

.lp-nav-toggle__bars::before,
.lp-nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.lp-nav-toggle__bars::before { top: -5px; }
.lp-nav-toggle__bars::after { top: 5px; }

.lp-nav--mobile {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  padding: 0.9rem 1.5rem 1.5rem;
  border-top: 1px solid var(--lp-line);
  background: var(--lp-paper);
}

/* ——— Buttons ——— */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.7rem 1.35rem;
  border-radius: var(--lp-radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: background 0.2s var(--lp-ease), color 0.2s var(--lp-ease),
    border-color 0.2s var(--lp-ease), transform 0.2s var(--lp-ease);
}

.lp-btn:focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: 3px;
}

.lp-btn--primary {
  background: var(--lp-accent);
  color: #fffaf6;
  border-color: var(--lp-accent);
  box-shadow: 0 1px 2px rgba(169, 68, 40, 0.2), 0 10px 22px rgba(169, 68, 40, 0.16);
}

.lp-btn--primary:hover {
  background: var(--lp-accent-ink);
  border-color: var(--lp-accent-ink);
}

/* Primary CTAs rendered as <a> inherit ink from .lp-body a; keep button text/icons white. */
.lp-body a.lp-btn--primary,
.lp-body a.lp-btn--primary:link,
.lp-body a.lp-btn--primary:visited,
.lp-body a.lp-btn--primary:hover {
  color: #fffaf6;
}

.lp-btn--ghost {
  background: var(--lp-paper);
  border-color: var(--lp-line-strong);
  color: var(--lp-ink);
  box-shadow: var(--lp-shadow-panel);
}

.lp-btn--ghost:hover { border-color: var(--lp-ink-faint); }

.lp-btn--onDark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.24);
  color: #f2f3f5;
}

.lp-btn--onDark:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
}

.lp-btn--compact {
  min-height: 2.5rem;
  padding-inline: 1.05rem;
  font-size: 0.86rem;
}

.lp-btn--unavailable {
  background: var(--lp-panel);
  color: var(--lp-ink-mid);
  border-color: var(--lp-line-strong);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
  text-decoration: none;
}

.lp-btn--unavailable:hover {
  background: var(--lp-panel);
  color: var(--lp-ink-mid);
  border-color: var(--lp-line-strong);
  transform: none;
}

.lp-header__cabinet {
  flex-shrink: 0;
}

.lp-nav--mobile .lp-nav__unavailable,
.lp-nav--mobile [data-lp-entry="cabinet"] {
  margin-top: 0.2rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--lp-line);
}

.lp-nav--mobile .lp-nav__unavailable {
  color: var(--lp-ink-soft);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: default;
}

/* ——— Section shell ——— */
/* Section rhythm follows the master reference's density rather than a looser default. */
/* Master rhythm is dense-editorial rather than airy-marketing: measured against the
   reference, the page was carrying roughly twice its share of large empty bands. */
.lp-section { padding: clamp(2.1rem, 3.2vw, 2.9rem) 0; }

.lp-main { outline: none; }

#lp-main,
.lp-main > section { scroll-margin-top: 6rem; }

.lp-section__title {
  margin: 0;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  line-height: 1.16;
  letter-spacing: -0.032em;
  font-weight: 600;
}

/* Short accent rule under the centred title, as in the master reference. */
.lp-section__title--center {
  display: inline-block;
  max-width: 40ch;
}

.lp-section__title--center::after {
  content: "";
  display: block;
  width: 4rem;
  height: 2px;
  margin: 0.85rem auto 0;
  background: var(--lp-accent);
}

.lp-section__lede {
  margin: 1.15rem 0 0;
  max-width: 40rem;
  color: var(--lp-ink-soft);
  font-size: 1.02rem;
}

.lp-section__lede--center {
  margin-inline: auto;
  max-width: 46rem;
}

/* ——— HERO ——— */
.lp-hero {
  padding: clamp(2.25rem, 4vw, 3.5rem) 0 clamp(2.5rem, 4.5vw, 3.75rem);
}

.lp-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
}

.lp-hero__title {
  margin: 0;
  font-size: clamp(2.15rem, 3.4vw, 2.95rem);
  line-height: 1.11;
  letter-spacing: -0.04em;
  font-weight: 700;
}

.lp-hero__title em {
  font-style: normal;
  color: var(--lp-accent);
}

.lp-hero__lede {
  margin: 1.5rem 0 0;
  max-width: 30rem;
  color: var(--lp-ink-soft);
  font-size: 0.98rem;
  line-height: 1.65;
}

.lp-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.9rem;
}

.lp-hero__trust {
  display: grid;
  grid-template-columns: 0.9rem 1fr;
  align-items: start;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  color: var(--lp-ink-faint);
  font-size: 0.82rem;
  line-height: 1.45;
}

.lp-hero__trust .lp-ico { margin-top: 0.2rem; }

/* ——— Hero story cards ———
   Baseline is the mobile one-column stack; the 2x3 snake is layered on at ≥760px. Cards stay
   light surfaces rather than SaaS tiles: one hairline, no shadow, no fill. */
.lp-herocards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  counter-reset: none;
}

.lp-herocard {
  position: relative;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-card);
  padding: 0.95rem 1.05rem 1rem;
}

.lp-herocard__num {
  display: block;
  font-family: var(--lp-mono);
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  color: var(--lp-accent);
  margin-bottom: 0.45rem;
}

.lp-herocard__title {
  margin: 0 0 0.4rem;
  font-size: 0.92rem;
  line-height: 1.28;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.lp-herocard__body {
  margin: 0;
  color: var(--lp-ink-soft);
  font-size: 0.8rem;
  line-height: 1.5;
}

.lp-machine { margin: 0; }

/* ——— Content Machine: generated raster body + SVG overlay ———
   The body is the approved generated reproduction; every piece of product copy is overlaid in the
   DOM instead of being baked in, so wording can change without regenerating art. Overlay user
   units equal asset pixels, and the anchor points were measured off the assets by
   scripts/cm_asset_measure.py. The renders ship with their studio backdrop and contact shadow
   removed, so the shadow is reapplied here where it can follow the section background. */
.lp-cm { position: relative; margin: 0; }

.lp-cm__body {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 24px rgba(22, 26, 32, 0.16));
}

/* The image box, and the coordinate space the overlay is measured against. The inside figure also
   carries the mobile bay rail, so anchoring the overlay to the figure would stretch its viewBox
   over the rail as well. */
.lp-cm__frame { position: relative; display: block; }

.lp-cm__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* Stage marks land on the blank tiles the render deliberately left inside each bay. */
.lp-cm__tiles { stroke: #f2a563; }

.lp-cm__wordmark {
  font-family: var(--lp-mono);
  font-size: 44px;
  letter-spacing: 5px;
  fill: #6c7178;
}

.lp-cm__wordmark--inside { font-size: 15px; letter-spacing: 3.2px; }

/* The bay rail belongs to the mobile layout, where the step list sits above the machine instead of
   beside the bays. On desktop each callout is already aligned to its own compartment and its leader
   line lands on it, so numbering the bays again would only add noise. */
.lp-cm__bayrail { display: none; }

/* Decorative only: the raster already shows the lit conveyor, this just moves along it. */
.lp-cm__flow { display: none; }
.lp-cm__pulse { fill: #ffdcae; }

.lp-cm__bay { fill: #e2762c; opacity: 0; }

/* ——— Visual Content Machine section ———
   The chain the Hero promises, shown once as one object: intake → machine → prepared material →
   channels. Baseline is a single stacked column; the three-track run is layered on at ≥900px. */
.lp-cmv {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

.lp-cmv__sources {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.lp-cmv__sources li {
  position: relative;
  padding-left: 0.85rem;
  color: var(--lp-ink-mid);
  font-size: 0.82rem;
  line-height: 1.4;
}

.lp-cmv__sources li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--lp-accent);
}

.lp-cmv__result {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(160px 72px at 100% 110%, rgba(222, 90, 27, 0.2), transparent 64%),
    linear-gradient(155deg, var(--lp-dark) 0%, var(--lp-dark-2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--lp-radius-card);
  padding: 0.95rem 1.05rem 1rem 1.2rem;
  box-shadow: none;
  color: #f7f8f9;
}

.lp-cmv__result::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85rem;
  bottom: 0.85rem;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--lp-accent);
}

.lp-cmv__result-title {
  margin: 0 0 0.35rem;
  font-size: 0.94rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #f7f8f9;
}

.lp-cmv__result-body {
  margin: 0;
  color: #b9bec5;
  font-size: 0.8rem;
  line-height: 1.5;
}

.lp-cmv__chan-label { margin-top: 1.15rem; }

.lp-cmv__channels {
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.lp-cmv__channels li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.6rem;
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  background: var(--lp-paper);
  color: var(--lp-ink-mid);
  font-size: 0.78rem;
}

.lp-cmv__channel--live {
  border-color: var(--lp-accent-line);
  background: var(--lp-accent-soft);
  color: var(--lp-accent-ink);
}

.lp-cmv__channel--pending {
  color: var(--lp-ink-faint);
  border-style: dashed;
  background: var(--lp-panel);
}

.lp-cmv__channel--pending .lp-chan__mark {
  opacity: 0.55;
}

.lp-cmv__channels .lp-chan__mark { width: 1.05rem; height: 1.05rem; }

.lp-cmv__honesty {
  margin: clamp(1.3rem, 2.4vw, 1.9rem) 0 0;
  max-width: 52rem;
  color: var(--lp-ink-faint);
  font-size: 0.78rem;
  line-height: 1.55;
}

/* Channel marks. The pill/list/status rules that used to sit here belonged to the retired
   #readiness panel — it was their only consumer. The Visual Content Machine's channel row uses
   its own .lp-cmv__channels layout and needs nothing but the mark. */
.lp-chan__mark {
  grid-row: 1 / span 2;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 5px;
}

/* ——— Light strip panels (trust strip) ——— */
/* One continuous panel with hairline dividers — not four detached cards. */
.lp-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border: 1px solid var(--lp-line-soft);
  border-radius: var(--lp-radius-card);
  box-shadow: 0 1px 2px rgba(15, 20, 28, 0.03);
  overflow: hidden;
}

.lp-strip--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.lp-strip li {
  padding: 1.5rem 1.35rem 1.55rem;
  border-left: 1px solid var(--lp-line-soft);
  text-align: center;
}

.lp-strip li:first-child { border-left: 0; }

.lp-strip .lp-ico {
  color: var(--lp-ink);
  margin-bottom: 0.85rem;
}

.lp-strip h3 {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.lp-strip p {
  margin: 0;
  color: var(--lp-ink-soft);
  font-size: 0.8rem;
  line-height: 1.55;
}

.lp-strip--four { margin-top: clamp(1.5rem, 2.5vw, 2.1rem); }

/* Icon sits beside the title on one line, as in the master, so the strip stays a low
   panel rather than growing into a deck of stacked cards. */
.lp-strip--four li {
  text-align: left;
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  grid-template-areas:
    "icon head"
    "body body";
  column-gap: 0.55rem;
}

.lp-strip--four h3 { grid-area: head; margin-top: 0; }
.lp-strip--four p { grid-area: body; }

.lp-strip--four .lp-ico {
  grid-area: icon;
  margin-bottom: 0;
  width: 1.15rem;
  height: 1.15rem;
  align-self: center;
}

/* ——— Problem wrapper ——— */
.lp-problem__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}

.lp-problem__note {
  margin: 1.1rem 0 0;
  color: var(--lp-ink-faint);
  font-size: 0.86rem;
}

/* Seven statements, one track. The frame, the fade mask and the clipping all belong to the
   animated state only — without JS, or with reduced motion, the stream is a plain complete list,
   so no approved statement is cut off and no half-faded edge makes the static state look broken. */
.lp-stream { display: grid; }

.lp-stream__col { overflow: hidden; }

.lp-stream__track {
  display: flex;
  flex-direction: column;
}

.lp-stream__set {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-bottom: 0.85rem;
}

.lp-stream__set[data-lp-stream-dup] { display: none; }

.lp-note {
  margin: 0;
  padding: 0.95rem 1.15rem;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: 8px;
  box-shadow: var(--lp-shadow-panel);
  color: var(--lp-ink-mid);
  font-size: 0.9rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* ——— Pricing ——— */
.lp-pricing__head { margin-bottom: clamp(2rem, 3.4vw, 2.9rem); }

/* Subgrid aligns name, price, offer, each comparison row, note and CTA across all three
   plans so the section reads as a comparison, not three unrelated cards. */
.lp-plans {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto repeat(5, auto) auto auto;
  gap: 1rem;
}

.lp-plan {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  gap: 0.85rem;
  padding: 1.5rem 1.4rem 1.6rem;
  background: var(--lp-panel);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-card);
  box-shadow: var(--lp-shadow-panel);
}

/* Recommended plan: one step up in paper, border and elevation. The 3px accent is a
   background layer clipped to the card radius, so it follows the rounded top corners.
   A 3px ::before with a 12px radius cannot, and overflow:hidden would clip the shadow. */
.lp-plan--main {
  position: relative;
  background:
    linear-gradient(var(--lp-accent), var(--lp-accent)) 0 0 / 100% 3px no-repeat,
    var(--lp-paper);
  border-color: var(--lp-line-strong);
  box-shadow: var(--lp-shadow-card);
}

.lp-plan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.lp-plan__name {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--lp-ink);
}

.lp-plan__flag {
  flex: 0 1 auto;
  max-width: 100%;
  font-family: var(--lp-font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--lp-accent-ink);
  background: var(--lp-accent-soft);
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  white-space: nowrap;
}

.lp-plan__price {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--lp-ink);
}

.lp-plan__offer {
  margin: 0;
  color: var(--lp-ink-soft);
  font-size: 0.88rem;
  line-height: 1.55;
}

.lp-plan__compare {
  display: contents;
}

.lp-plan__row {
  margin: 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--lp-line-soft);
  display: grid;
  gap: 0.18rem;
  align-content: start;
}

.lp-plan__row:first-child {
  padding-top: 0.9rem;
}

.lp-plan__row-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--lp-ink);
}

.lp-plan__row-value {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.45rem;
  align-items: start;
}

.lp-plan__row-value:has(.lp-plan__row-text:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.lp-plan__row-text {
  color: var(--lp-ink-mid);
  font-size: 0.84rem;
  line-height: 1.42;
  letter-spacing: -0.005em;
}

.lp-plan__row-main {
  display: block;
  color: var(--lp-ink-mid);
}

.lp-plan__row-hint {
  display: block;
  margin-top: 0.08rem;
  color: var(--lp-ink-faint);
  font-size: 0.76rem;
  line-height: 1.4;
}

.lp-plan__mark {
  margin-top: 0.14rem;
}

.lp-plan__mark--yes {
  color: var(--lp-accent);
}

.lp-plan__mark--no {
  color: var(--lp-ink-faint);
}

.lp-plan__note {
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--lp-line-soft);
  color: var(--lp-ink-faint);
  font-size: 0.78rem;
  line-height: 1.55;
}

.lp-plan__note--empty {
  border-top-color: transparent;
  min-height: 0.01px;
}

.lp-plan__cta {
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  margin-top: 0.15rem;
  min-width: 0;
}

/* Trial CTA is an <a>; .lp-body a { color: inherit } would otherwise force ink text. */
.lp-pricing {
  --lp-pricing-cta-bg: #d45518;
  --lp-pricing-cta-ink: #ffffff;
}

.lp-pricing .lp-plan__cta.lp-btn--primary,
.lp-pricing .lp-plan__cta.lp-btn--primary:link,
.lp-pricing .lp-plan__cta.lp-btn--primary:visited {
  background: var(--lp-pricing-cta-bg);
  border-color: var(--lp-pricing-cta-bg);
  color: var(--lp-pricing-cta-ink);
}

.lp-pricing .lp-plan__cta.lp-btn--primary:hover {
  background: var(--lp-accent-ink);
  border-color: var(--lp-accent-ink);
  color: var(--lp-pricing-cta-ink);
}

.lp-pricing .lp-plan__cta.lp-btn--primary:focus-visible {
  outline: 2px solid var(--lp-accent-ink);
  outline-offset: 3px;
}

.lp-pricing__foot {
  margin-top: clamp(1.6rem, 2.6vw, 2.2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  text-align: center;
}

.lp-pricing__honesty {
  margin: 0;
  max-width: 36rem;
  color: var(--lp-ink-faint);
  font-size: 0.82rem;
  line-height: 1.55;
}

/* Mobile pricing carousel shell — controls hidden on desktop via min-width rule below. */
.lp-pricing__carousel {
  position: relative;
}

.lp-pricing__nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.lp-pricing__nav:not([hidden]) {
  display: flex;
}

.lp-pricing__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--lp-line-strong);
  border-radius: var(--lp-radius);
  background: var(--lp-paper);
  color: var(--lp-ink-mid);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s var(--lp-ease), color 0.2s var(--lp-ease);
}

.lp-pricing__btn:hover:not(:disabled) {
  border-color: var(--lp-ink-faint);
  color: var(--lp-ink);
}

.lp-pricing__btn:disabled {
  opacity: 0.38;
  cursor: default;
}

.lp-pricing__btn-icon {
  font-size: 1.05rem;
  line-height: 1;
}

.lp-pricing__position {
  margin: 0;
  min-width: 6.5rem;
  text-align: center;
  font-family: var(--lp-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lp-ink-faint);
}

/* ——— Process line ——— */
.lp-process {
  list-style: none;
  margin: clamp(2.5rem, 4.5vw, 3.75rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 1rem;
}

.lp-process__step {
  position: relative;
  text-align: center;
  padding-inline: 0.25rem;
}

.lp-process__num {
  display: block;
  font-family: var(--lp-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--lp-ink-faint);
  margin-bottom: 1.1rem;
}

.lp-process__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--lp-ink);
  position: relative;
  z-index: 1;
  background: transparent;
}

.lp-process__icon .lp-ico { width: 1.65rem; height: 1.65rem; stroke-width: 1.3; }

.lp-process__step h3 {
  margin: 1.05rem 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.018em;
}

/* Two-line step titles must not push their own body copy below its neighbours', or the rail
   loses its two-tier alignment. Only reserved in the band where the five columns are actually
   narrow enough to wrap a title — at full desktop width none of them do, and reserving the
   second line there just opens a gap under every heading. */
@media (min-width: 900px) and (max-width: 1299px) {
  .lp-process__step h3 { min-height: 2.4em; }
}

.lp-process__step p {
  margin: 0;
  color: var(--lp-ink-soft);
  font-size: 0.775rem;
  line-height: 1.5;
}

/* The dotted run has to reach the NEXT step's icon, whose centre sits one column plus one grid
   gap away — so the gap has to come out of the `right` offset, not be ignored as it was when the
   row still had seven tight columns. */
.lp-process__step::after {
  content: "";
  position: absolute;
  top: calc(1.66rem + 1.25rem);
  left: calc(50% + 1.55rem);
  right: calc(-50% - 1rem + 2rem);
  height: 6px;
  background-image: radial-gradient(circle, var(--lp-accent-line) 1.1px, transparent 1.3px);
  background-size: 7px 6px;
  background-repeat: repeat-x;
  background-position: left center;
}

.lp-process__step:last-child::after { display: none; }

.lp-process__step::before {
  content: "";
  position: absolute;
  top: calc(1.66rem + 1.25rem + 0.5px);
  right: calc(-50% - 1rem + 1.5rem);
  width: 0;
  height: 0;
  border-left: 5px solid var(--lp-accent);
  border-top: 3.2px solid transparent;
  border-bottom: 3.2px solid transparent;
}

.lp-process__step:last-child::before { display: none; }

.lp-process__step--gate .lp-process__icon { color: var(--lp-accent-ink); }
.lp-process__step--gate h3 { color: var(--lp-accent-ink); }

/* ——— Inside the machine ——— */
.lp-deep__head { margin-bottom: clamp(1.4rem, 2.2vw, 1.85rem); }

/* Six stages above the machine, six outcomes below, exactly as in the approved inside reference.
   Below 1000px the accepted mobile treatment applies (numbered list + rail + one machine). The
   six-column alignment to the physical bays only makes sense once the figure is wide enough to
   show them, so it starts at 1000px. */
.lp-inside {
  display: grid;
  gap: clamp(1.5rem, 2.6vw, 2.1rem);
}

.lp-inside__stages,
.lp-inside__outcomes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

.lp-instage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.lp-instage__no {
  margin: 0 0 0.3rem;
  font-family: var(--lp-mono);
  font-size: 0.72rem;
  color: var(--lp-accent);
}

.lp-instage__name {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0 0 0.34rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.018em;
}

.lp-instage__name .lp-ico {
  color: var(--lp-ink);
  transform: translateY(0.1em);
}

.lp-instage__desc {
  margin: 0;
  color: var(--lp-ink-soft);
  font-size: 0.79rem;
  line-height: 1.5;
}

.lp-instage--gate .lp-instage__name { color: var(--lp-accent-ink); }
.lp-instage--gate .lp-instage__name .lp-ico { color: var(--lp-accent); }

.lp-outcome {
  position: relative;
  margin: 0;
  color: var(--lp-ink-faint);
  font-size: 0.76rem;
  line-height: 1.5;
}

/* ———————————————————————————————————————————————————————————————————————
   PRODUCT PROOF

   Landing-owned reconstruction. --ed-*/--pk-* never appear here, and nothing
   is imported from editorial.css. Status colour follows the editor principle
   (pending = accent, accepted/planned = live) without copying editorial classes.

   Default rules describe the FINISHED State C. `.is-running` rewinds the desktop
   pass. Mobile stages rewind only while `.is-playing` is on the active slide.

   Gap between intro and demonstration uses padding on the figure, not a collapsing
   margin on the header: production measured the previous margin-bottom as 0 px.
   ——————————————————————————————————————————————————————————————————————— */
.lp-proof__head { margin-bottom: 0; }

.lp-proof {
  padding-bottom: clamp(2.4rem, 4vw, 3.25rem);
}

.lp-proof__figure {
  margin: 0;
  padding-top: clamp(1.75rem, 2.2vw, 2rem);
}

.lp-proof__board {
  display: grid;
  grid-template-columns: minmax(0, 0.56fr) minmax(0, 0.44fr);
  gap: clamp(1rem, 1.8vw, 1.6rem);
  align-items: stretch;
}

.lp-proof.is-running:not(.is-delivery) .lp-proof__board {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.02fr);
}

.lp-proof__app {
  min-width: 0;
  position: relative;
}

.lp-proof__mobile { display: none; }

/* ——— The application window ——— */
.lp-ed {
  --lp-ed-fs: 0.75rem;
  overflow: hidden;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line-strong);
  border-radius: var(--lp-radius-card);
  box-shadow: var(--lp-shadow-card);
  font-size: var(--lp-ed-fs);
  line-height: 1.4;
  color: var(--lp-ink-mid);
}

.lp-ed--review,
.lp-ed--plan { min-height: 22rem; }

.lp-ed--plan { display: block; }
.lp-proof.is-running:not(.is-planning):not(.is-assigning):not(.is-slotting):not(.is-planned):not(.is-delivery) .lp-ed--plan {
  display: none;
}

.lp-proof.is-running:not(.is-planning):not(.is-assigning):not(.is-slotting):not(.is-planned):not(.is-delivery) .lp-ed--review {
  display: block;
}

.lp-proof:not(.is-running) .lp-ed--review,
.lp-proof.is-running.is-planning .lp-ed--review,
.lp-proof.is-running.is-assigning .lp-ed--review,
.lp-proof.is-running.is-slotting .lp-ed--review,
.lp-proof.is-running.is-planned .lp-ed--review,
.lp-proof.is-running.is-delivery .lp-ed--review {
  display: none;
}

.lp-ed__bar {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 0 0.95rem;
  height: 2.7rem;
  background: var(--lp-panel);
  border-bottom: 1px solid var(--lp-line);
}

.lp-ed__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.8rem;
  letter-spacing: -0.01em;
  color: var(--lp-ink);
  white-space: nowrap;
}

.lp-ed__brand b { font-weight: 750; }
.lp-ed__brand-soft { color: var(--lp-accent); font-weight: 650; }

.lp-ed__brand-space {
  padding-left: 0.4rem;
  border-left: 1px solid var(--lp-line-strong);
  color: var(--lp-ink-faint);
  font-size: 0.68rem;
}

.lp-ed__nav {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
  overflow: hidden;
}

.lp-ed__navitem {
  position: relative;
  padding: 0.15rem 0;
  color: var(--lp-ink-faint);
  font-size: 0.72rem;
  white-space: nowrap;
}

.lp-ed__menu,
.lp-ed__mctx,
.lp-ed__mtools { display: none; }

.lp-ed__menu { color: var(--lp-ink-faint); font-size: 0.72rem; }

.lp-ed__mctx {
  margin: 0;
  padding: 0.45rem 0.95rem;
  background: var(--lp-bg);
  border-bottom: 1px solid var(--lp-line);
  color: var(--lp-ink-faint);
  font-size: 0.7rem;
}

.lp-ed__navitem.is-active { color: var(--lp-accent-ink); font-weight: 600; }

.lp-ed__navitem.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.62rem;
  height: 2px;
  background: var(--lp-accent);
}

.lp-ed__body {
  display: grid;
  grid-template-columns: minmax(0, 26fr) minmax(0, 46fr) minmax(0, 28fr);
  min-height: 22rem;
}

.lp-ed__pane {
  padding: 0.85rem 0.8rem;
  min-width: 0;
}

.lp-ed__pane--queue,
.lp-ed__pane--materials { background: var(--lp-bg); border-right: 1px solid var(--lp-line); }
.lp-ed__pane--reader { background: var(--lp-paper); }
.lp-ed__pane--decision,
.lp-ed__pane--assign { background: var(--lp-bg); border-left: 1px solid var(--lp-line); }

.lp-ed__panetitle {
  margin: 0 0 0.15rem;
  color: var(--lp-ink);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.lp-ed__panesub,
.lp-ed__ctx {
  margin: 0.1rem 0 0;
  color: var(--lp-ink-faint);
  font-size: 0.68rem;
}

.lp-ed__ctx b { color: var(--lp-ink-soft); font-weight: 600; }

.lp-ed__queue {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.lp-ed__row {
  display: grid;
  gap: 0.22rem;
  padding: 0.5rem 0.55rem;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
}

.lp-ed__row--main,
.lp-ed__row--plan {
  position: relative;
  background: var(--lp-accent-soft);
  border-color: var(--lp-accent-line);
}

.lp-ed__row--main::before,
.lp-ed__row--plan::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: var(--lp-radius) 0 0 var(--lp-radius);
  background: var(--lp-accent);
}

.lp-ed__rowtitle {
  color: var(--lp-ink);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.3;
}

.lp-ed__status {
  justify-self: start;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--lp-ink);
}

.lp-ed__status--pending { color: var(--lp-accent-ink); }

.lp-ed__row--main .lp-ed__status--pending,
.lp-ed--mobile .lp-ed__status--pending { display: none; }

.lp-ed__status--done,
.lp-ed__status--accepted,
.lp-ed__status--planned,
.lp-ed__status--queued {
  color: var(--lp-live);
  font-weight: 600;
}

.lp-ed__facet {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  color: var(--lp-ink-faint);
  font-size: 0.64rem;
}

.lp-ed__type {
  padding: 0.05rem 0.3rem;
  background: var(--lp-bg-deep);
  border-radius: 3px;
}

.lp-ed__stream {
  color: var(--lp-ink-faint);
  font-size: 0.64rem;
}

.lp-ed__pane--reader {
  display: grid;
  grid-template-areas: "reader";
  align-content: start;
}

.lp-ed__empty,
.lp-ed__article { grid-area: reader; }

.lp-ed__empty { display: none; }

.lp-ed__emptytitle {
  margin: 0;
  color: var(--lp-ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
}

.lp-ed__emptyhint {
  margin: 0.3rem 0 0;
  max-width: 16rem;
  color: var(--lp-ink-faint);
  font-size: 0.7rem;
}

.lp-ed__article { display: block; }

.lp-ed__kicker {
  margin: 0;
  color: var(--lp-ink-faint);
  font-size: 0.62rem;
  font-weight: 500;
}

.lp-ed__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.4rem 0 0;
}

.lp-ed__chip {
  padding: 0.12rem 0.42rem;
  border: 1px solid var(--lp-line-strong);
  border-radius: 999px;
  color: var(--lp-ink-soft);
  font-size: 0.62rem;
}

.lp-ed__chip:first-child {
  border-color: var(--lp-accent-line);
  color: var(--lp-accent-ink);
  background: var(--lp-accent-soft);
}

.lp-ed__title {
  margin: 0.55rem 0 0;
  color: var(--lp-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.lp-ed__dek {
  margin: 0.3rem 0 0;
  color: var(--lp-ink-soft);
  font-size: 0.76rem;
  line-height: 1.45;
}

.lp-ed__byline {
  margin: 0.45rem 0 0;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--lp-line-soft);
  color: var(--lp-ink-faint);
  font-size: 0.66rem;
}

.lp-ed__media {
  margin: 0.7rem 0 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--lp-radius);
  background: var(--lp-bg-deep);
}

.lp-ed__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-ed__text {
  margin: 0.6rem 0 0;
  color: var(--lp-ink-mid);
  font-size: 0.73rem;
  line-height: 1.55;
}

.lp-ed__decide { margin-top: 0.7rem; }
.lp-ed__decide--idle,
.lp-ed__decide--pending { display: none; }

.lp-ed__decide--pending,
.lp-ed__decide--done {
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}

.lp-ed__decide--done { display: flex; }
.lp-ed__decide--idle { color: var(--lp-ink-faint); }
.lp-ed__idlehint { margin: 0; font-size: 0.7rem; }

.lp-ed__btn {
  padding: 0.36rem 0.6rem;
  border: 1px solid var(--lp-line-strong);
  border-radius: var(--lp-radius);
  background: var(--lp-paper);
  color: var(--lp-ink-mid);
  font-size: 0.7rem;
  text-align: center;
}

.lp-ed__btn--primary {
  background: var(--lp-accent);
  border-color: var(--lp-accent);
  color: #fff;
  font-weight: 600;
}

.lp-ed__btn--sm {
  justify-self: start;
  margin-top: 0.25rem;
  padding: 0.22rem 0.5rem;
  font-size: 0.64rem;
}

.lp-ed__verdict {
  margin: 0 0 0.15rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid rgba(47, 143, 104, 0.35);
  border-radius: var(--lp-radius);
  background: rgba(47, 143, 104, 0.08);
  color: var(--lp-ink-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}

.lp-ed__verdict b {
  display: inline-block;
  margin-top: 0.15rem;
  color: var(--lp-live);
  font-size: 0.95rem;
  font-weight: 700;
}

.lp-ed__planbody {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
  min-height: 22rem;
}

.lp-ed__field {
  display: grid;
  gap: 0.2rem;
  margin: 0.7rem 0 0;
}

.lp-ed__fieldlabel {
  color: var(--lp-ink-faint);
  font-size: 0.66rem;
}

.lp-ed__fieldvalue {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--lp-line-strong);
  border-radius: var(--lp-radius);
  background: var(--lp-paper);
  color: var(--lp-ink);
  font-size: 0.74rem;
}

.lp-ed__assign .lp-ed__btn--primary { margin-top: 0.85rem; display: inline-flex; }

.lp-ed__slot {
  margin-top: 1rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--lp-line-strong);
  border-radius: var(--lp-radius);
  background: var(--lp-paper);
}

.lp-ed__slottitle,
.lp-proof__slottitle {
  margin: 0.25rem 0 0;
  color: var(--lp-ink);
  font-size: 0.82rem;
  font-weight: 650;
}

.lp-ed__slotmeta,
.lp-proof__slotmeta,
.lp-proof__pubstatus {
  margin: 0.2rem 0 0;
  color: var(--lp-ink-faint);
  font-size: 0.7rem;
}

.lp-proof.is-running:not(.is-assigning):not(.is-slotting):not(.is-planned):not(.is-delivery) .lp-ed__assign,
.lp-proof.is-running:not(.is-planned):not(.is-delivery) .lp-ed__slot {
  opacity: 0;
  transform: translateY(0.4rem);
}

.lp-proof__dest {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.15rem 1.2rem 1.25rem;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line-strong);
  border-radius: var(--lp-radius-card);
  box-shadow: var(--lp-shadow-card);
}

.lp-proof.is-running:not(.is-delivery) .lp-proof__dest {
  opacity: 0;
  transform: translateX(0.6rem);
  pointer-events: none;
  overflow: hidden;
  max-height: 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
}

.lp-proof__desttitle {
  margin: 0;
  color: var(--lp-ink);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.lp-proof__destlead {
  margin: 0;
  color: var(--lp-ink-soft);
  font-size: 0.82rem;
  line-height: 1.5;
}

.lp-proof__slotcard {
  padding: 0.8rem 0.85rem;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  background: var(--lp-bg);
}

.lp-proof__channels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.lp-proof__channel {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  font-size: 0.78rem;
}

.lp-proof__channel a {
  color: var(--lp-accent-ink);
  font-weight: 650;
  text-decoration: none;
}

.lp-proof__channel a:hover { text-decoration: underline; }

.lp-proof__channel--live span:last-child { color: var(--lp-live); }
.lp-proof__channel--pending {
  color: var(--lp-ink-faint);
  background: var(--lp-bg);
}

.lp-proof__desthonesty {
  margin: 0;
  color: var(--lp-ink-faint);
  font-size: 0.74rem;
  line-height: 1.5;
}

.lp-proof__caption {
  margin: clamp(1rem, 1.8vw, 1.4rem) auto 0;
  max-width: 58rem;
  color: var(--lp-ink-faint);
  font-size: 0.8rem;
  line-height: 1.6;
  text-align: center;
}

.lp-proof__foot {
  margin-top: clamp(1.4rem, 2.4vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
}

.lp-proof__replay {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--lp-line-strong);
  border-radius: var(--lp-radius);
  background: transparent;
  color: var(--lp-ink-soft);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.lp-proof__replay:hover { border-color: var(--lp-ink-faint); color: var(--lp-ink); }
.lp-proof__replay[hidden] { display: none; }

.lp-proof__mnav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.lp-proof__mnav:not([hidden]) { display: flex; }

.lp-proof__mbtn {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--lp-line-strong);
  border-radius: var(--lp-radius);
  background: var(--lp-paper);
  color: var(--lp-ink-mid);
  font: inherit;
  cursor: pointer;
}

.lp-proof__mbtn:disabled { opacity: 0.4; cursor: default; }

.lp-proof__mpos {
  margin: 0;
  color: var(--lp-ink-soft);
  font-size: 0.8rem;
}

/* ———————————————————————————————————————————————————————————————————————
   PRODUCT PROOF — the single animated pass.
   Scoped to .is-running (desktop) or .is-playing (mobile stage).
   Only opacity/transform animate. Grid proportions change only at State C.
   ——————————————————————————————————————————————————————————————————————— */
.lp-proof.is-running .lp-ed--review .lp-ed__row,
.lp-proof.is-running .lp-ed--review .lp-ed__article,
.lp-proof.is-running .lp-ed--plan,
.lp-proof.is-running .lp-proof__dest,
.lp-proof.is-running .lp-ed__assign,
.lp-proof.is-running .lp-ed__slot {
  transition: opacity 0.5s var(--lp-ease), transform 0.5s var(--lp-ease);
}

.lp-proof.is-running .lp-ed--review .lp-ed__row {
  opacity: 0;
  transform: translateY(0.5rem);
}

.lp-proof.is-running.is-queued .lp-ed--review .lp-ed__row {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 0.16s);
}

.lp-proof.is-running:not(.is-selected) .lp-ed__row--main {
  background: var(--lp-paper);
  border-color: var(--lp-line);
}

.lp-proof.is-running:not(.is-selected) .lp-ed__row--main::before { opacity: 0; }
.lp-proof.is-running .lp-ed__row--main,
.lp-proof.is-running .lp-ed__row--main::before {
  transition: background 0.45s var(--lp-ease), border-color 0.45s var(--lp-ease), opacity 0.45s var(--lp-ease);
}

.lp-proof.is-running:not(.is-open) .lp-ed--review .lp-ed__empty { display: block; }
.lp-proof.is-running:not(.is-open) .lp-ed--review .lp-ed__article {
  opacity: 0;
  transform: translateY(0.4rem);
}

.lp-proof.is-running:not(.is-selected) .lp-ed--review .lp-ed__decide--idle { display: block; }
.lp-proof.is-running.is-selected:not(.is-decided) .lp-ed--review .lp-ed__decide--pending { display: flex; }
.lp-proof.is-running:not(.is-decided) .lp-ed--review .lp-ed__decide--done { display: none; }
.lp-proof.is-running:not(.is-decided) .lp-ed--review .lp-ed__status--done { display: none; }
.lp-proof.is-running:not(.is-decided) .lp-ed--review .lp-ed__row--main .lp-ed__status--pending { display: block; }

.lp-proof.is-running.is-assigning .lp-ed__assign,
.lp-proof.is-running.is-slotting .lp-ed__assign,
.lp-proof.is-running.is-planned .lp-ed__assign,
.lp-proof.is-running.is-delivery .lp-ed__assign {
  opacity: 1;
  transform: none;
}

.lp-proof.is-running.is-planned .lp-ed__slot,
.lp-proof.is-running.is-delivery .lp-ed__slot {
  opacity: 1;
  transform: none;
}

.lp-proof.is-running.is-delivery .lp-proof__dest {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ———————————————————————————————————————————————————————————————————————
   PRODUCT PROOF — responsive.
   ——————————————————————————————————————————————————————————————————————— */
@media (max-width: 1180px) {
  .lp-proof:not(.is-running) .lp-proof__board,
  .lp-proof.is-running.is-delivery .lp-proof__board {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-proof.is-running:not(.is-delivery) .lp-proof__dest { display: none; }
}

@media (max-width: 999px) {
  .lp-ed__body { grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); min-height: 0; }

  .lp-ed__pane--decision {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--lp-line);
    min-height: 7rem;
  }

  .lp-ed__planbody { grid-template-columns: 1fr; min-height: 0; }
  .lp-ed__pane--assign { border-left: 0; border-top: 1px solid var(--lp-line); }
  .lp-ed__decide { margin-top: 0.5rem; }

  .lp-ed__decide--pending,
  .lp-ed__decide--done {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
  }

  .lp-ed__verdict { margin: 0; }
  .lp-ed__verdict b { margin: 0 0 0 0.3rem; }
  .lp-proof__caption { text-align: left; }
}

@media (max-width: 767px) {
  .lp-proof__figure { padding-top: clamp(1.25rem, 3.5vw, 1.5rem); }
  .lp-proof__board { display: none; }
  .lp-proof__mobile { display: block; }

  .lp-proof__mtrack {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    padding-inline: 6%;
    scroll-padding-inline: 6%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .lp-proof__mtrack::-webkit-scrollbar { display: none; }

  .lp-proof__mstage {
    flex: 0 0 88%;
    max-width: 24rem;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    min-width: 0;
  }

  .lp-ed--mobile { min-height: 0; }
  .lp-ed { --lp-ed-fs: 0.8rem; }
  .lp-ed__bar { justify-content: space-between; gap: 0.6rem; }
  .lp-ed__nav { display: none; }
  .lp-ed__menu { display: inline; }

  .lp-ed__mtools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.3rem;
    padding: 0.55rem 0.7rem 0;
  }

  .lp-ed__mtool {
    padding: 0.35rem 0.2rem;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    background: var(--lp-bg);
    color: var(--lp-ink-soft);
    font-size: 0.68rem;
    text-align: center;
  }

  .lp-ed__mtool.is-active {
    border-color: var(--lp-accent-line);
    color: var(--lp-accent-ink);
    background: var(--lp-accent-soft);
  }

  .lp-ed__mctx--done { display: block; }
  .lp-ed__mpane { padding: 0.75rem 0.8rem 0.9rem; }

  .lp-ed__title { font-size: 1.05rem; }
  .lp-ed__dek { font-size: 0.82rem; }
  .lp-ed__text { font-size: 0.8rem; }
  .lp-ed__btn { font-size: 0.75rem; }
  .lp-proof__caption { font-size: 0.82rem; text-align: left; }
  .lp-proof__foot { flex-direction: column; align-items: stretch; }
  .lp-proof__foot .lp-btn { width: 100%; }

  .lp-proof__mdest {
    padding: 0.95rem 1rem 1.05rem;
    background: var(--lp-paper);
    border: 1px solid var(--lp-line-strong);
    border-radius: var(--lp-radius-card);
  }

  .lp-proof--enhanced .lp-proof__mstage:not(.is-active) .lp-ed__decide--done,
  .lp-proof--enhanced .lp-proof__mstage:not(.is-active) .lp-ed__status--done,
  .lp-proof--enhanced .lp-proof__mstage:not(.is-active) .lp-ed__slot,
  .lp-proof--enhanced .lp-proof__mstage:not(.is-active) .lp-ed__assign {
    display: none;
  }

  .lp-proof--enhanced .lp-proof__mstage[data-lp-proof-stage="review"]:not(.is-active) .lp-ed__mctx--done { display: none; }
  .lp-proof--enhanced .lp-proof__mstage[data-lp-proof-stage="review"]:not(.is-active) .lp-ed__mctx--idle { display: block; }
  .lp-proof--enhanced .lp-proof__mstage[data-lp-proof-stage="review"]:not(.is-active) .lp-ed__status--pending { display: block; }
  .lp-proof--enhanced .lp-proof__mstage[data-lp-proof-stage="review"]:not(.is-active) .lp-ed__decide--pending { display: flex; }

  .lp-proof__mstage.is-playing .lp-ed__row,
  .lp-proof__mstage.is-playing .lp-ed__article,
  .lp-proof__mstage.is-playing .lp-ed__assign,
  .lp-proof__mstage.is-playing .lp-ed__slot,
  .lp-proof__mstage.is-playing .lp-proof__slotcard,
  .lp-proof__mstage.is-playing .lp-proof__channels {
    transition: opacity 0.45s var(--lp-ease), transform 0.45s var(--lp-ease);
  }

  .lp-proof__mstage[data-lp-proof-stage="review"].is-playing:not(.is-decided) .lp-ed__decide--done,
  .lp-proof__mstage[data-lp-proof-stage="review"].is-playing:not(.is-decided) .lp-ed__status--done,
  .lp-proof__mstage[data-lp-proof-stage="review"].is-playing:not(.is-decided) .lp-ed__mctx--done { display: none; }

  .lp-proof__mstage[data-lp-proof-stage="review"].is-playing:not(.is-decided) .lp-ed__status--pending,
  .lp-proof__mstage[data-lp-proof-stage="review"].is-playing:not(.is-decided) .lp-ed__mctx--idle { display: block; }

  .lp-proof__mstage[data-lp-proof-stage="review"].is-playing:not(.is-decided) .lp-ed__decide--pending { display: flex; }
  .lp-proof__mstage[data-lp-proof-stage="review"].is-playing.is-decided .lp-ed__decide--pending { display: none; }

  .lp-proof__mstage[data-lp-proof-stage="planning"].is-playing:not(.is-assigning):not(.is-planned) .lp-ed__assign { opacity: 0; }
  .lp-proof__mstage[data-lp-proof-stage="planning"].is-playing:not(.is-planned) .lp-ed__slot { display: none; }

  .lp-proof__mstage[data-lp-proof-stage="queue"].is-playing:not(.is-delivery) .lp-proof__channels {
    opacity: 0;
    transform: translateY(0.4rem);
  }
}

@media (max-width: 420px) {
  .lp-ed__pane,
  .lp-ed__mpane { padding: 0.7rem 0.65rem; }
  .lp-ed__bar { padding-inline: 0.7rem; }
  .lp-ed__decide--pending,
  .lp-ed__decide--done { flex-direction: column; align-items: stretch; }
  .lp-ed__verdict b { display: block; margin: 0.15rem 0 0; }
}

/* ——— Dark CTA band ——— */
.lp-ctaband-section {
  padding: clamp(2.2rem, 3.8vw, 3.25rem) 0 clamp(1rem, 2vw, 1.5rem);
}

.lp-ctaband {
  position: relative;
  overflow: hidden;
  border-radius: var(--lp-radius-band);
  background:
    radial-gradient(700px 340px at 88% 84%, rgba(222, 90, 27, 0.16), transparent 62%),
    linear-gradient(140deg, var(--lp-dark) 0%, var(--lp-dark-2) 68%, #0b0f15 100%);
  color: #eceef1;
  padding: clamp(2rem, 3.4vw, 2.85rem) clamp(1.75rem, 3.5vw, 3.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  box-shadow: 0 24px 60px rgba(15, 20, 27, 0.24);
}

.lp-ctaband__flow {
  position: absolute;
  inset: 0 0 0 34%;
  pointer-events: none;
}

.lp-flow { display: block; width: 100%; height: 100%; }

.lp-ctaband__copy,
.lp-ctaband__action { position: relative; z-index: 1; }

.lp-ctaband__title {
  margin: 0;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: #f7f8f9;
}

.lp-ctaband__title em {
  font-style: normal;
  color: #f08a45;
}

.lp-ctaband__points {
  list-style: none;
  margin: 2.1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}

.lp-ctaband__points li {
  display: grid;
  grid-template-columns: 1.2rem 1fr;
  align-items: start;
  gap: 0.6rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #c7cbd1;
}

.lp-ctaband__points .lp-ico {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.02rem;
  color: var(--lp-accent);
}

.lp-ctaband__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.lp-ctaband__lede {
  margin: 1.5rem 0 0;
  color: #b9bec5;
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 26rem;
}

.lp-ctaband__checks {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.lp-ctaband__checks li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: #d3d7dd;
  font-size: 0.84rem;
}

.lp-ctaband__checks .lp-ico { color: var(--lp-accent); }

/* ——— Как начинается работа ———
   Three registers in one section: a numbered path, a two-column split of who does what, and a
   quiet operational footnote. They are separated by weight rather than by boxes, so the section
   stays lighter than the tariffs table it follows. */
.lp-conditions__head { margin-bottom: clamp(1.6rem, 2.8vw, 2.2rem); }

.lp-conditions__setup {
  max-width: 44rem;
  margin: 0 auto clamp(1.6rem, 2.8vw, 2.2rem);
  padding: 1rem 1.15rem 1.05rem;
  border: 1px solid var(--lp-line-soft);
  border-radius: var(--lp-radius-card);
  background: var(--lp-panel);
}

.lp-conditions__setup-lead {
  margin: 0;
  color: var(--lp-ink-soft);
  font-size: 0.84rem;
  line-height: 1.5;
}

.lp-conditions__setup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.lp-conditions__setup-list li {
  position: relative;
  padding-left: 0.85rem;
  color: var(--lp-ink-mid);
  font-size: 0.82rem;
  line-height: 1.45;
}

.lp-conditions__setup-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: var(--lp-accent);
}

/* Six steps read as a chain, not as six cards: the connector rule and the number carry the
   sequence, and only a hairline separates the members. */
.lp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--lp-line-soft);
  border: 1px solid var(--lp-line-soft);
  border-radius: var(--lp-radius-card);
  overflow: hidden;
}

.lp-step {
  position: relative;
  padding: 1.35rem 1.4rem 1.5rem;
  background: var(--lp-panel);
}

.lp-step__num {
  display: inline-block;
  margin-bottom: 0.65rem;
  font-family: var(--lp-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--lp-accent);
}

.lp-step__title {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.35;
}

.lp-step__desc {
  margin: 0;
  color: var(--lp-ink-soft);
  font-size: 0.84rem;
  line-height: 1.55;
}

.lp-resp {
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
}

.lp-resp__col {
  padding-left: 1.3rem;
  border-left: 2px solid var(--lp-line);
}

.lp-resp__col:last-child { border-left-color: var(--lp-accent-line); }

.lp-resp__title {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-ink-mid);
}

.lp-resp__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.42rem;
  color: var(--lp-ink-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}

.lp-resp__list li { padding-left: 0.95rem; position: relative; }

.lp-resp__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lp-line-strong);
}

/* The one sentence the plan fixes verbatim. Given weight as a statement, not as a disclaimer. */
.lp-resp__key {
  margin: 1rem 0 0;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.014em;
  color: var(--lp-ink);
}

.lp-conditions__foot {
  margin-top: clamp(1.6rem, 2.8vw, 2.2rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--lp-line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.9rem 2rem;
}

.lp-conditions__honesty {
  margin: 0;
  max-width: 62ch;
  color: var(--lp-ink-soft);
  font-size: 0.84rem;
  line-height: 1.55;
}

.lp-conditions__foot .lp-pending { font-size: 0.86rem; }

.lp-conditions__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.15rem;
  margin: 0;
  min-width: 0;
}

.lp-conditions__legal a {
  color: var(--lp-ink-soft);
  text-decoration: none;
  font-size: 0.86rem;
}

.lp-conditions__legal a:hover {
  color: var(--lp-ink);
}

.lp-conditions__legal a:focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: 3px;
}

/* ——— Final close ———
   A line and a quiet button. Kept visually subordinate to the dark band above: no panel, no
   background, ghost CTA. */
.lp-final {
  padding: clamp(2.4rem, 4.5vw, 3.6rem) 0 clamp(2.8rem, 5vw, 4rem);
}

.lp-final__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.8rem;
  text-align: center;
}

.lp-final__title {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.35;
  color: var(--lp-ink-mid);
}

/* ——— Footer ———
   Graphite-tinted close: a shade below the page ground so the document ends, without turning
   into a dark slab. */
.lp-footer {
  border-top: 1px solid var(--lp-line);
  background: linear-gradient(180deg, #eeeff3 0%, #e8eaef 100%);
  padding: clamp(2.2rem, 4vw, 3.1rem) 0 1.6rem;
  color: var(--lp-ink-soft);
  font-size: 0.85rem;
}

.lp-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 0.9fr));
  gap: 1.8rem 2rem;
  align-items: start;
}

.lp-footer__about { max-width: 30ch; }

.lp-footer__brand {
  margin: 0 0 0.55rem;
  color: var(--lp-ink);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lp-footer__brand b { font-weight: 800; }

.lp-footer__desc {
  margin: 0;
  color: var(--lp-ink-soft);
  font-size: 0.82rem;
  line-height: 1.55;
}

.lp-footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.lp-footer__coltitle {
  margin: 0 0 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--lp-ink-mid);
}

.lp-footer__col a {
  color: var(--lp-ink-soft);
  text-decoration: none;
  transition: color 0.18s var(--lp-ease);
}

.lp-footer__col a:hover { color: var(--lp-accent-ink); }

.lp-footer__col .lp-pending {
  flex-wrap: wrap;
  max-width: 100%;
}

.lp-footer__col .lp-pending { font-size: 0.85rem; }

.lp-footer__col .lp-pending[data-lp-entry="demo"] {
  color: var(--lp-ink-soft);
}

.lp-footer__colnote {
  margin: 0.2rem 0 0;
  color: var(--lp-ink-faint);
  font-size: 0.76rem;
  line-height: 1.45;
}

.lp-footer__bottom {
  margin-top: clamp(1.8rem, 3.2vw, 2.6rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--lp-line-strong);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  color: var(--lp-ink-faint);
  font-size: 0.78rem;
}

.lp-footer__copy { margin: 0; }
.lp-footer__copy b { color: var(--lp-ink-mid); font-weight: 800; }
.lp-footer__note { margin: 0; }

.lp-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  min-width: 0;
}

.lp-footer__legal a {
  color: var(--lp-ink-soft);
  text-decoration: none;
}

.lp-footer__legal a:hover {
  color: var(--lp-ink-mid);
}

.lp-footer__legal a:focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: 3px;
}

/* ——— Plan dialog ———
   Native <dialog>. No library. Information only: no checkout, no fake submit. */
.lp-dialog {
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(90vh, 42rem);
  margin: auto;
  padding: 1.5rem 1.4rem 1.45rem;
  overflow: auto;
  border: 1px solid var(--lp-line-strong);
  border-radius: var(--lp-radius-card);
  background: var(--lp-paper);
  box-shadow: var(--lp-shadow-card);
  color: var(--lp-ink);
}

.lp-dialog::backdrop {
  background: rgba(20, 22, 26, 0.46);
}

.lp-dialog__close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  background: var(--lp-panel);
  color: var(--lp-ink-mid);
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.lp-dialog__close:hover { border-color: var(--lp-ink-faint); color: var(--lp-ink); }

.lp-dialog {
  position: fixed;
}

.lp-dialog__title {
  margin: 0 2.4rem 0.7rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.lp-dialog__price {
  margin: 0 0 0.85rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.lp-dialog__lede {
  margin: 0 0 0.85rem;
  color: var(--lp-ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}

.lp-dialog__steps {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  color: var(--lp-ink-mid);
  font-size: 0.88rem;
  line-height: 1.5;
}

.lp-dialog__steps li + li { margin-top: 0.28rem; }

.lp-dialog__note {
  margin: 0 0 1.1rem;
  color: var(--lp-ink-faint);
  font-size: 0.82rem;
  line-height: 1.5;
}

.lp-dialog__choices {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.lp-dialog__choice {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  padding: 0.95rem 1rem;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-card);
  background: var(--lp-panel);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lp-dialog__choice:hover {
  border-color: var(--lp-line-strong);
  background: var(--lp-paper);
}

.lp-dialog__choice-name {
  font-weight: 700;
  letter-spacing: -0.015em;
}

.lp-dialog__choice-price {
  font-size: 0.92rem;
  font-weight: 600;
}

.lp-dialog__choice-hint {
  color: var(--lp-ink-faint);
  font-size: 0.8rem;
  line-height: 1.4;
}

.lp-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}

.lp-dialog__demo { display: inline-flex; }

@keyframes lp-dialog-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ——— Hero card grid: two columns from tablet up ———
   Reading order stays row-major and matches the DOM, so the story is still 01..06 here even
   though the snake itself only appears once there is room for it. */
@media (min-width: 600px) {
  .lp-herocards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }
}

/* ——— Hero: 34 / 66 with the snake (≥1000px) ———
   The connector is five dotted segments living in the grid gaps: one per hop of the approved
   path. Segments are sized from the same custom properties as the gaps, so the line cannot come
   adrift from the cards when the gap is retuned, and no segment overlaps card text because the
   gap is the only place it is ever drawn. */
@media (min-width: 1000px) {
  .lp-hero { padding: clamp(2rem, 3.4vw, 3rem) 0 clamp(2.5rem, 4vw, 3.5rem); }

  .lp-hero__grid {
    grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
    gap: clamp(2rem, 3.6vw, 3.25rem);
    align-items: start;
  }

  /* Optical alignment: the H1's cap height sits above the first card's top rule otherwise. */
  .lp-hero__copy { padding-top: 0.35rem; }

  .lp-hero__title { font-size: clamp(1.95rem, 2.5vw, 2.4rem); }
  .lp-hero__lede { font-size: 0.93rem; max-width: none; }

  .lp-herocards {
    --lp-hc-gap-x: 2.5rem;
    --lp-hc-gap-y: 1.35rem;
    gap: var(--lp-hc-gap-y) var(--lp-hc-gap-x);
  }

  /* 01 02 / 04 03 / 05 06 — the DOM stays 01..06 and CSS does the folding. */
  .lp-herocard:nth-child(1) { grid-area: 1 / 1; }
  .lp-herocard:nth-child(2) { grid-area: 1 / 2; }
  .lp-herocard:nth-child(3) { grid-area: 2 / 2; }
  .lp-herocard:nth-child(4) { grid-area: 2 / 1; }
  .lp-herocard:nth-child(5) { grid-area: 3 / 1; }
  .lp-herocard:nth-child(6) { grid-area: 3 / 2; }

  .lp-herocard::before,
  .lp-herocard::after {
    content: "";
    position: absolute;
    background-image: radial-gradient(circle, var(--lp-accent-line) 1.1px, transparent 1.3px);
  }

  /* Horizontal hops: 01→02, 03→04, 05→06. */
  .lp-herocard:nth-child(1)::after,
  .lp-herocard:nth-child(4)::after,
  .lp-herocard:nth-child(5)::after {
    top: 50%;
    left: 100%;
    width: var(--lp-hc-gap-x);
    height: 6px;
    margin-top: -3px;
    background-size: 7px 6px;
    background-repeat: repeat-x;
  }

  /* Vertical hops: 02↓03 in the right column, 04↓05 in the left one. */
  .lp-herocard:nth-child(2)::before,
  .lp-herocard:nth-child(4)::before {
    top: 100%;
    left: 50%;
    width: 6px;
    height: var(--lp-hc-gap-y);
    margin-left: -3px;
    background-size: 6px 7px;
    background-repeat: repeat-y;
  }
}

/* ——— Visual Content Machine: the chain as one horizontal run (≥900px) ———
   The machine keeps the middle and the most width; intake and output are supporting rails, so
   they are narrower than it and read as what feeds and leaves it. */
@media (min-width: 900px) {
  .lp-cmv {
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.6fr) minmax(0, 0.78fr);
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
    align-items: center;
  }

  .lp-cmv__intake,
  .lp-cmv__out { position: relative; }

  /* Dotted feed marks in the two gaps — inset from both rails so the right run does not
     collide with the prepared-material block. */
  .lp-cmv__intake::after,
  .lp-cmv__stage::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 0.35rem);
    width: calc(clamp(1.25rem, 2.6vw, 2.25rem) - 0.7rem);
    height: 6px;
    margin-top: -3px;
    background-image: radial-gradient(circle, var(--lp-accent-line) 1.1px, transparent 1.3px);
    background-size: 7px 6px;
    background-repeat: repeat-x;
    background-position: 0 center;
  }

  .lp-cmv__out { padding-left: 0.15rem; }

  .lp-cmv__stage { position: relative; }

  .lp-cmv__honesty { margin-inline: auto; text-align: center; }

  /* Pricing carousel controls are mobile-only; desktop keeps the three-column grid below. */
  .lp-pricing__nav { display: none; }
  .lp-pricing__carousel { overflow: visible; }
}

/* ——— Inside the machine: bay-aligned callouts (≥1000px) ———
   The six stage callouts and the six outcome lines are aligned to the six physical bays of the
   inside asset, not to a naive six-equal-column grid. The bay band occupies 7.94%..96.09% of the
   asset width (measured, bays 122→1476 of 1536), so the rows carry that same asymmetric inset and
   every leader line drops onto the centre of its own compartment. */
@media (min-width: 1000px) {
  .lp-inside { gap: 0; }

  /* Each track is exactly one bay wide (225.667 of 1536 = 14.691%) with no column gap, so a
     leader line at 50% of a track lands on the centre of its own compartment. Breathing room
     between callouts is padding inside the track instead of a grid gap, because a gap would
     redistribute the tracks and pull every line off its bay. */
  .lp-inside__stages,
  .lp-inside__outcomes {
    grid-template-columns: repeat(6, 1fr);
    padding-inline: 7.943% 3.906%;
    column-gap: 0;
    row-gap: 0;
  }

  .lp-instage,
  .lp-outcome { padding-inline: 0 1.15rem; }

  /* Stretch the six tracks to one shared row height so numbers, titles and
     descriptions start on a common top line. Long titles grow downward.
     Leader lines stay on the shared bottom edge, aimed at the bays. */
  .lp-instage {
    padding-bottom: 2.6rem;
    align-self: stretch;
  }

  .lp-instage::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.4rem;
    width: 0;
    height: 2rem;
    border-left: 1px dashed var(--lp-accent-line);
  }

  .lp-instage::before {
    content: "";
    position: absolute;
    left: calc(50% - 2px);
    bottom: 0.1rem;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--lp-accent);
  }

  .lp-instage__no { margin-bottom: 0.22rem; font-size: 0.7rem; }
  .lp-instage__name { font-size: 0.83rem; margin-bottom: 0.3rem; }
  .lp-instage__desc { font-size: 0.735rem; line-height: 1.45; }

  .lp-outcome {
    padding-top: 2.6rem;
    font-size: 0.72rem;
  }

  .lp-outcome::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0.4rem;
    width: 0;
    height: 2rem;
    border-left: 1px dashed var(--lp-accent-line);
  }

  .lp-outcome::before {
    content: "";
    position: absolute;
    left: calc(50% - 2px);
    top: 0.15rem;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--lp-accent);
  }
}

/* Laptop pinch: five nav entries plus the demo control. */
@media (max-width: 1180px) {
  .lp-nav { gap: 1.05rem; }
  .lp-nav--desktop a { font-size: 0.84rem; }
}

@media (min-width: 900px) and (max-width: 1180px) {
  .lp-nav--desktop { gap: 0.95rem; }
  .lp-nav--desktop a { font-size: 0.82rem; }
}

/* Two rows of three keeps the numbering scannable once three-across gets cramped. */
@media (max-width: 1120px) {
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 999px) {
  .lp-hero__grid {
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 3vw, 2.5rem);
  }

  .lp-process { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.25rem; }
  .lp-process__step:nth-child(3)::after,
  .lp-process__step:nth-child(3)::before { display: none; }
}

@media (max-width: 1180px) and (min-width: 900px) {
  .lp-nav { gap: 0.9rem; }
  .lp-nav a { font-size: 0.82rem; }
  .lp-header__actions { gap: 0.4rem; }
  .lp-header__actions .lp-btn--compact {
    padding-inline: 0.72rem;
    font-size: 0.78rem;
  }
}

@media (max-width: 1024px) {
  .lp-strip--four { grid-template-columns: 1fr 1fr; }
  .lp-strip--four li:nth-child(3) { border-left: 0; }
  .lp-strip li + li { border-top: 1px solid var(--lp-line); }
  .lp-strip--four li:nth-child(-n+2) { border-top: 0; }

  /* Two-up columns keep document names and their «скоро» badges on one line; four-up at this
     width wraps «Политика конфиденциальности» through the badge. */
  .lp-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-footer__about { grid-column: 1 / -1; max-width: 46ch; }
}

/* ——— Mobile art direction ——— */
@media (max-width: 899px) {
  .lp-body { --lp-shell: calc(100% - 2.25rem); }

  .lp-nav--desktop { display: none; }

  .lp-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Open-state display belongs to this breakpoint, same as the toggle. A global
     :not([hidden]) { display:flex } would keep a leftover panel painted after a
     desktop resize even though the hamburger is gone. */
  .lp-nav--mobile:not([hidden]) { display: flex; }

  .lp-header__inner { grid-template-columns: 1fr auto; }

  .lp-header__cabinet { display: none; }

  .lp-header__actions .lp-btn--unavailable {
    white-space: normal;
    height: auto;
    min-height: 2.5rem;
    max-width: min(14.5rem, 48vw);
    line-height: 1.15;
    text-align: center;
    padding-block: 0.28rem;
    font-size: 0.72rem;
  }

  .lp-hero { padding-top: 1.75rem; }

  .lp-hero__title { font-size: clamp(1.72rem, 6.6vw, 2.05rem); }

  .lp-hero__lede {
    max-width: none;
    font-size: 0.9rem;
    margin-top: 1.15rem;
  }

  .lp-hero__cta { margin-top: 1.5rem; }

  /* The mobile chain reads top-down: intake, then the machine, then the result and where it
     goes. The vertical spine replaces the desktop horizontal feed marks. */
  .lp-cmv__intake { position: relative; }

  .lp-cmv__intake::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1.05rem;
    width: 6px;
    height: 0.85rem;
    transform: translateX(-50%);
    background-image: radial-gradient(circle, var(--lp-accent-line) 1.1px, transparent 1.3px);
    background-size: 6px 7px;
    background-repeat: repeat-y;
  }

  .lp-strip--four { grid-template-columns: 1fr; }
  .lp-strip li { border-left: 0; text-align: left; padding: 1.4rem 1.25rem; }
  .lp-strip li + li { border-top: 1px solid var(--lp-line); }
  .lp-strip .lp-ico { margin-bottom: 0.7rem; }

  /* The pain block holds its two-part split one tier longer than the other side-by-side
     layouts: stacked, a statement stretches the full shell and reads as an empty bar rather
     than a remark, so the stream keeps a text-width measure once the copy moves above it. */
  .lp-problem__layout { grid-template-columns: 1fr; }
  .lp-stream { max-width: 33rem; }

  /* Pricing: horizontal scroll-snap instead of a three-screen vertical stack. */
  .lp-pricing__carousel {
    overflow: hidden;
  }

  .lp-plans {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: unset;
    grid-template-rows: unset;
    gap: 0.75rem;
    max-width: none;
    margin-inline: 0;
    padding-inline: 6%;
    scroll-padding-inline: 6%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .lp-plans::-webkit-scrollbar { display: none; }

  .lp-plan {
    flex: 0 0 88%;
    max-width: 22rem;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    grid-row: auto;
    grid-template-rows: none;
    display: flex;
    flex-direction: column;
  }

  .lp-plan__cta { margin-top: auto; }
  .lp-plan__row { flex-shrink: 0; }

  .lp-process { grid-template-columns: 1fr; row-gap: 0; }

  .lp-process__step {
    text-align: left;
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    grid-template-areas:
      "icon num"
      "icon head"
      "icon body";
    column-gap: 1rem;
    padding: 1.15rem 0;
    border-top: 1px solid var(--lp-line);
  }

  .lp-process__step:last-child { border-bottom: 1px solid var(--lp-line); }
  .lp-process__num { grid-area: num; margin-bottom: 0.3rem; }
  .lp-process__icon { grid-area: icon; width: 2.5rem; height: 2.5rem; }
  .lp-process__step h3 { grid-area: head; margin-top: 0; font-size: 0.95rem; min-height: 0; }
  .lp-process__step p { grid-area: body; font-size: 0.85rem; }
  .lp-process__step::after,
  .lp-process__step::before { display: none; }

  .lp-ctaband {
    grid-template-columns: 1fr;
    padding: 2rem 1.5rem 2.25rem;
  }

  /* Flow lines must stay decorative: on narrow screens they would otherwise run over the copy. */
  /* Keep the band's signature ember arcs on mobile; only lift them clear of the copy. */
  .lp-ctaband__flow { inset: auto 0 0 0; height: 62%; opacity: 0.6; }
  .lp-ctaband__points { grid-template-columns: 1fr; gap: 0.85rem; }
  .lp-ctaband__points li { max-width: none; width: 100%; }
  .lp-ctaband__buttons { flex-direction: column; align-items: stretch; }
  .lp-ctaband__buttons .lp-btn { width: 100%; }
  .lp-dialog__actions { flex-direction: column; align-items: stretch; }
  .lp-dialog__actions .lp-btn { width: 100%; }

  /* One step per row; the sequence reads through 01–06 alone. */
  .lp-steps { grid-template-columns: 1fr; }
  .lp-step { padding: 1.1rem 1.15rem 1.2rem; }

  .lp-resp { grid-template-columns: 1fr; gap: 1.5rem; }

  .lp-conditions__foot { flex-direction: column; align-items: flex-start; }

  /* Full-width so the closing button matches every other mobile CTA on the page. */
  .lp-final__row { flex-direction: column; align-items: stretch; }
  .lp-final__title { max-width: none; }
  .lp-final__row .lp-btn { width: 100%; justify-content: center; }

  .lp-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.4rem; }
  .lp-footer__bottom { flex-direction: column; }
}

/* ——— Inside the machine, through 999px ———
   Same accepted mobile treatment as below 900: six numbered steps, dashed spine, bay rail, one
   whole machine, outcomes as a stacked panel. Kept in its own query so the rest of the 899px
   mobile art direction (hero, nav, process) is not pulled up into the 900–999 band, where the
   desktop bay grid used to start leaving a gap. At 1000px the six-column desktop layout takes
   over unchanged. */
@media (max-width: 999px) {
  .lp-inside { gap: 1.25rem; }
  .lp-instage__name { font-size: 0.95rem; }
  .lp-instage__desc { font-size: 0.85rem; }

  .lp-inside__stages {
    position: relative;
    gap: 0;
    padding-left: 2.4rem;
  }

  .lp-instage {
    position: relative;
    padding: 0.95rem 0;
  }

  /* The spine, drawn as one segment per step rather than one line behind the whole list. A single
     continuous line would pass straight through the digits, and masking it would mean painting a
     plate in a colour that has to match the section's gradient — which it would not, at some
     scroll position. Segments start below each number and run into the next step's padding, so the
     run reads as continuous while never touching type. The last one reaches toward the machine. */
  .lp-instage::before {
    content: "";
    position: absolute;
    left: -1.625rem;
    top: 2.3rem;
    bottom: -0.75rem;
    width: 0;
    border-left: 1px dashed var(--lp-accent-line);
  }

  .lp-instage:last-child::before { bottom: -1rem; }

  .lp-instage + .lp-instage { border-top: 1px solid var(--lp-line); }

  .lp-instage__no {
    position: absolute;
    left: -2.4rem;
    top: 0.95rem;
    width: 1.55rem;
    margin: 0;
    text-align: center;
    font-size: 0.72rem;
  }

  .lp-instage__name { margin-bottom: 0.3rem; }

  /* The machine takes over the numbering. Each bay gets its step number and a short dashed tick
     landing in it, which is what pairs the list above with the compartments below. The skirt
     wordmark goes: at these widths it renders at roughly 3 CSS px per character. */
  .lp-machine--inside .lp-cm__wordmark--inside { display: none; }

  .lp-cm__bayrail {
    display: block;
    position: relative;
    height: 1.5rem;
  }

  /* The bay interiors are lit for a 1240px figure; at tablet widths they lose the contrast that
     made the funnel, the cassette and the editor's desk legible. Same correction the per-bay
     crops used before, now applied once to the whole body. Kept alongside the drop shadow, which
     the shorthand would otherwise drop. */
  .lp-machine--inside .lp-cm__body {
    filter: drop-shadow(0 16px 24px rgba(22, 26, 32, 0.16)) brightness(1.1) saturate(1.05);
  }

  .lp-cm__bayrail-no {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-family: var(--lp-mono);
    font-size: 0.68rem;
    line-height: 1;
    color: var(--lp-accent);
  }

  /* The tick, pointing down into its own compartment. Kept to a few dashes: it only has to say
     "this number belongs to the bay below". It has to end at the rail's own bottom edge — the
     machine image follows in flow and would paint over anything that ran past it. */
  .lp-cm__bayrail-no::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + 0.2rem);
    height: 0.5rem;
    border-left: 1px dashed var(--lp-accent-line);
  }

  .lp-inside__outcomes {
    gap: 0.8rem;
    padding: 1.15rem 1.2rem;
    background: var(--lp-panel);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-card);
  }

  .lp-outcome {
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: 0.55rem;
    font-size: 0.82rem;
    color: var(--lp-ink-soft);
  }

  .lp-outcome::before {
    content: counter(lp-outcome, decimal-leading-zero);
    counter-increment: lp-outcome;
    font-family: var(--lp-mono);
    font-size: 0.68rem;
    color: var(--lp-accent);
    line-height: 1.6;
  }

  .lp-inside__outcomes { counter-reset: lp-outcome; }
}

/* Only where a thumb is the pointer and the column is genuinely narrow. On tablet a full-bleed
   CTA reads as a banner rather than a button. */
@media (max-width: 599px) {
  .lp-hero__cta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .lp-hero__cta .lp-btn { width: 100%; min-height: 2.85rem; }
}

@media (max-width: 420px) {
  /* Below this width the skirt wordmark and the bay marks would be sub-legible specks; the
     object still reads without them. */
  .lp-cm__wordmark,
  .lp-cm__tiles { display: none; }

  /* «Политика конфиденциальности» plus its state badge no longer fits two-up. */
  .lp-footer__top { grid-template-columns: 1fr; }
  .lp-footer__about { max-width: none; }
}

@media (max-width: 360px) {
  .lp-body { --lp-shell: calc(100% - 1.5rem); }
  .lp-hero__title { font-size: 1.56rem; }
  .lp-section__title { font-size: 1.45rem; }
  .lp-brand__name { font-size: 1.15rem; }
  .lp-btn--compact { padding-inline: 0.8rem; font-size: 0.8rem; }
  /* Header stays logo-led: at this width a full-size CTA optically outweighs the wordmark. */
  .lp-header__actions .lp-btn--compact {
    height: 2.1rem;
    min-height: 2.1rem;
    padding-inline: 0.62rem;
    padding-block: 0;
    font-size: 0.74rem;
    line-height: 1;
  }
  .lp-header__actions .lp-btn--compact.lp-btn--unavailable {
    height: auto;
    min-height: 2.1rem;
    max-width: min(12.5rem, 52vw);
    padding-block: 0.22rem;
    font-size: 0.68rem;
    line-height: 1.15;
  }
}

/* ——— Motion ——— */
/* Baseline: everything readable and complete without JS. Motion hide states only after .lp-motion-ready. */
[data-lp-reveal] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .lp-dialog[open] {
    animation: lp-dialog-in 0.18s var(--lp-ease);
  }

  .lp-motion-ready [data-lp-reveal] {
    opacity: 1;
    transform: translateY(12px);
    transition: transform 0.75s var(--lp-ease);
  }

  .lp-motion-ready [data-lp-reveal].is-visible { transform: none; }

  /* Content Machine raster overlays. The body is a static render, so the only motion is the pulse
     travelling the conveyor and a one-shot warm wash that walks the six bays left to right when
     the section is first seen. Both are reinforcement of what the still already shows. */
  .lp-motion-ready .lp-cm__flow { display: block; }

  .lp-motion-ready .lp-cm__bay {
    transition: opacity 0.5s var(--lp-ease);
    transition-delay: calc(var(--i) * 0.11s);
  }

  .lp-motion-ready [data-lp-machine].is-open .lp-cm__bay { opacity: 0.07; }

  .lp-motion-ready .lp-instage,
  .lp-motion-ready .lp-outcome {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.5s var(--lp-ease), transform 0.5s var(--lp-ease);
    transition-delay: calc(var(--i) * 0.07s);
  }

  .lp-motion-ready [data-lp-machine].is-open .lp-instage,
  .lp-motion-ready [data-lp-machine].is-open .lp-outcome {
    opacity: 1;
    transform: none;
  }

  /* Visual Content Machine signal paths: a calm left-to-right dash travel in the connector gaps. */
  .lp-motion-ready [data-lp-scene="machine-visual"].is-open .lp-cmv__intake::after,
  .lp-motion-ready [data-lp-scene="machine-visual"].is-open .lp-cmv__stage::after {
    animation: lp-cmv-flow 2.2s linear infinite;
  }

  /* The track holds two identical sets and travels exactly one set height, so the loop has no
     seam. That only holds while one set is taller than the frame — otherwise the tail of the
     cycle shows empty space — hence the frame stays shorter than the seven-statement set at
     every width. */
  .lp-motion-ready .lp-stream {
    height: 25rem;
    overflow: hidden;
    /* Dissolve bands are deeper than one statement and fall off fast, so a statement crossing
       the frame edge is already invisible before it is cut instead of leaving half-glyphs. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.05) 6%, rgba(0, 0, 0, 0.28) 12%, rgba(0, 0, 0, 0.72) 17%, #000 22%, #000 78%, rgba(0, 0, 0, 0.72) 83%, rgba(0, 0, 0, 0.28) 88%, rgba(0, 0, 0, 0.05) 94%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.05) 6%, rgba(0, 0, 0, 0.28) 12%, rgba(0, 0, 0, 0.72) 17%, #000 22%, #000 78%, rgba(0, 0, 0, 0.72) 83%, rgba(0, 0, 0, 0.28) 88%, rgba(0, 0, 0, 0.05) 94%, transparent 100%);
  }

  .lp-motion-ready .lp-stream__set[data-lp-stream-dup] { display: flex; }

  /* ~8px/s: one statement takes about seven seconds to cross its own height. The single track
     travels roughly half of what the old paired columns did, so the duration halves to hold the
     same reading pace rather than speeding up because there is less content. */
  .lp-motion-ready .lp-stream__track {
    animation: lp-stream-up linear infinite;
    animation-duration: 64s;
    will-change: transform;
  }

  .lp-motion-ready .lp-stream:hover .lp-stream__track,
  .lp-motion-ready .lp-stream:focus-within .lp-stream__track {
    animation-play-state: paused;
  }

  .lp-btn--primary:active { transform: translateY(1px); }
}

@keyframes lp-stream-up {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@keyframes lp-cmv-flow {
  from { background-position: 0 center; }
  to { background-position: 14px center; }
}

/* Narrower viewports wrap the statements onto more lines, so one set grows taller and the same
   duration would read as a faster scroll. The frame shrinks and the cycle lengthens to hold the
   travel speed inside 7.5–8.6px/s everywhere. Compound queries rather than additions to the
   plain width tiers, because `.lp-motion-ready` is set whatever the motion preference is and the
   frame must not come back under reduced motion. */
@media (prefers-reduced-motion: no-preference) and (min-width: 600px) and (max-width: 1199px) {
  .lp-motion-ready .lp-stream__track { animation-duration: 74s; }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  .lp-motion-ready .lp-stream { height: 22rem; }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 599px) {
  .lp-motion-ready .lp-stream__track { animation-duration: 88s; }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 420px) {
  .lp-motion-ready .lp-stream { height: 20rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-header,
  .lp-btn,
  [data-lp-reveal],
  .lp-stream__track,
  .lp-instage,
  .lp-outcome,
  .lp-cm__bay {
    transition: none !important;
    animation: none !important;
  }

  [data-lp-reveal],
  .lp-instage,
  .lp-outcome {
    opacity: 1 !important;
    transform: none !important;
  }

  /* The conveyor pulse is the one overlay that only exists as motion, so it is removed outright
     rather than frozen mid-travel. */
  .lp-cm__flow { display: none !important; }

  /* No frame, no mask and no clipping outside the animated state, so the reduced-motion stream
     is simply the full list of statements rather than a cropped version of a moving one. */
  .lp-stream__set[data-lp-stream-dup] { display: none !important; }

  .lp-plans { scroll-behavior: auto; }
  .lp-proof__mtrack { scroll-behavior: auto; }
  .lp-dialog[open] { animation: none; }
}

/* The hover-emphasis block that stood here styled the retired #readiness channel pills, which
   were its only members. Hover meaning is still never load-bearing anywhere on this page. */