/* EZPZ Trading landing page (/new-home/): page shell and design system.
   Uses the site header and footer (theme3), so the theme's global CSS is loaded
   first; the base section below keeps it out of the landing sections. Dark only.
   Order: 1 tokens, 2 reset and base, 3 shared classes (used by every landing
   stylesheet), 4 nav, 5 numbers, 6 AI, 7 ecosystem, 8 trust, 9 plans, 10 FAQ,
   11 CTA, 12 footer, 13 reduced motion.
   Colour, type size, spacing and radius come from the tokens only. Translucent
   tints are made with color-mix() from those tokens. */

/* ---------- 1. tokens ---------- */
:root {
  --lp-bg: #0c0520; --lp-bg-2: #10062a; --lp-surface: #150a36;
  --lp-surface-2: rgba(148, 103, 254, .06); --lp-surface-3: rgba(148, 103, 254, .11);
  --lp-border: rgba(148, 103, 254, .16); --lp-border-strong: rgba(148, 103, 254, .32);
  --lp-text: #f3eeff; --lp-muted: #b9aee0; --lp-faint: #8475b3; /* faint: decoration only, fails AA for text */
  --lp-primary: #9467fe; --lp-primary-2: #7c4dde; --lp-accent: #c4a3ff;
  --lp-green: #22c55e; --lp-red: #f43f5e; --lp-amber: #f59e0b;
  --lp-g-flow: #9467fe; --lp-g-analytics: #38d3ff; --lp-g-strategies: #f5b544; --lp-g-stocks: #34d399;
  --lp-g-darkpool: #f472b6; --lp-g-shorts: #fb7185; --lp-g-investing: #60a5fa; --lp-g-ai: #c4a3ff;
  --lp-title-grad: linear-gradient(140deg, #fff 0%, #e8d8ff 45%, #c4a3ff 90%);
  --lp-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --lp-font-title: 'Poppins', 'Inter', system-ui, sans-serif;
  --lp-fs-xs: 12px; --lp-fs-sm: 14px; --lp-fs-base: 16px; --lp-fs-md: 18px; --lp-fs-lg: 22px; --lp-fs-xl: 28px;
  --lp-fs-2xl: clamp(30px, 4vw, 44px); --lp-fs-3xl: clamp(38px, 6vw, 68px);
  --lp-sp-1: 4px; --lp-sp-2: 8px; --lp-sp-3: 12px; --lp-sp-4: 16px; --lp-sp-5: 24px; --lp-sp-6: 32px; --lp-sp-7: 48px; --lp-sp-8: 72px;
  --lp-section: clamp(64px, 9vw, 120px);
  --lp-r-sm: 10px; --lp-r: 14px; --lp-r-lg: 20px; --lp-r-pill: 999px;
  --lp-ease: cubic-bezier(.2, .8, .2, 1); --lp-dur: .25s;
  --lp-shadow: 0 18px 44px rgba(4, 2, 18, .55);
  --lp-container: 1320px; --lp-gutter: 20px;

  /* Height of the sticky site header (theme3/elements/header.html). */
  --lp-nav-h: 76px;
}

/* ---------- 2. reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body { margin: 0; }
body.lp-body {
  min-height: 100vh;
  background: var(--lp-bg);
  overflow-x: clip;
}

/* The site header and footer are the shared theme templates, so the theme's global
   CSS is on this page. That CSS also styles bare elements (blue headings, grey
   paragraphs, underlined links, `* { padding: 0; outline: none }`). Inside the
   landing sections those rules are undone: `all: revert` returns these elements to
   the browser defaults the landing styles were written against. Specificity is
   (0,1,0): it beats the theme's element rules and loses to every later
   single-class landing rule. The header and footer are outside .lp-main and keep
   the theme's styling exactly as on other pages. */
.lp-main :where(h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, dl, dt, dd, figure, figcaption,
  blockquote, img, label, button, input, select, textarea, details, summary, table,
  small, strong, b, dialog, fieldset, legend) { all: revert; }

.lp-main {
  display: block;
  color: var(--lp-text);
  font-family: var(--lp-font);
  font-size: var(--lp-fs-base);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.lp-main, .lp-main :where(*, *::before, *::after) { box-sizing: border-box; }
.lp-main :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
.lp-main :where(img, svg, video, canvas) { max-width: 100%; }
.lp-main :where(img) { height: auto; }
.lp-main :where(h1, h2, h3) {
  font-family: var(--lp-font-title);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.lp-main :where(a) { color: var(--lp-accent); text-decoration: none; }
.lp-main :where(a):hover { color: var(--lp-text); }
.lp-main :where(button) { font: inherit; color: inherit; }

/* Text links: one treatment. Accent, underlined on hover, with an arrow. The arrow is
   in the markup for some; the others get it here (empty alt text where supported). */
.lp-tour-open, .lp-tour-all, .lp-hero-links a, .lp-ai-link, .lp-trust-link, .lp-eco-visit {
  color: var(--lp-accent);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 3px;
}
.lp-tour-open:hover, .lp-tour-all:hover, .lp-hero-links a:hover,
.lp-ai-link:hover, .lp-trust-link:hover, .lp-eco-visit:hover {
  color: var(--lp-text);
  text-decoration: underline;
}
.lp-tour-open::after, .lp-tour-all::after, .lp-hero-links a::after {
  content: "\00a0\2192";
  content: "\00a0\2192" / "";
}

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

/* The sticky site header must not cover a heading reached through an anchor. */
.lp-body [id] { scroll-margin-top: calc(var(--lp-nav-h) + var(--lp-sp-4)); }

.lp-skip {
  position: fixed; left: var(--lp-sp-4); top: var(--lp-sp-4); z-index: 10000;   /* above the site header (9990) */
  padding: var(--lp-sp-3) var(--lp-sp-4);
  border-radius: var(--lp-r-sm);
  background: var(--lp-surface); border: 1px solid var(--lp-border-strong);
  font-size: var(--lp-fs-sm); font-weight: 600;
  transform: translateY(-200%);
}
.lp-skip:focus { transform: none; }

/* ---------- 3. shared classes ---------- */
.lp-container {
  width: 100%;
  max-width: var(--lp-container);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}

.lp-section { padding-block: var(--lp-section); }

.lp-section-head {
  display: flex; flex-direction: column; align-items: center; gap: var(--lp-sp-4);
  max-width: 62ch;
  margin: 0 auto var(--lp-sp-7);
  text-align: center;
}
.lp-section-head h2 {
  font-size: var(--lp-fs-2xl); font-weight: 700;
  background: var(--lp-title-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.lp-section-head p:not(.lp-eyebrow) { color: var(--lp-muted); font-size: var(--lp-fs-md); max-width: 62ch; }

.lp-eyebrow {
  display: inline-flex; align-items: center; gap: var(--lp-sp-2);
  padding: var(--lp-sp-1) var(--lp-sp-3);
  border-radius: var(--lp-r-pill);
  background: var(--lp-surface-3);
  border: 1px solid var(--lp-border-strong);
  color: var(--lp-accent);
  font-size: var(--lp-fs-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.6;
}

/* Buttons: work on <a> and <button>. */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--lp-sp-2);
  min-height: 48px;
  padding: var(--lp-sp-2) var(--lp-sp-5);
  border: 1px solid transparent;
  border-radius: var(--lp-r);
  font-family: var(--lp-font);
  font-size: var(--lp-fs-base); font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none;
  cursor: pointer;
  transition: transform var(--lp-dur) var(--lp-ease), box-shadow var(--lp-dur) var(--lp-ease),
              background-color var(--lp-dur) var(--lp-ease), border-color var(--lp-dur) var(--lp-ease);
}
.lp-btn--sm { min-height: 38px; padding: var(--lp-sp-1) var(--lp-sp-4); border-radius: var(--lp-r-sm); font-size: var(--lp-fs-sm); }
/* The fill starts at primary-2 and darkens so the label keeps AA contrast. */
.lp-body .lp-btn--primary, .lp-btn--primary {
  color: var(--lp-text);
  background: var(--lp-primary-2); /* fallback where color-mix() is not supported */
  background: linear-gradient(135deg, var(--lp-primary-2), color-mix(in srgb, var(--lp-primary-2) 78%, var(--lp-bg)));
  border-color: color-mix(in srgb, var(--lp-primary) 70%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--lp-primary) 32%, transparent),
              inset 0 1px 0 color-mix(in srgb, var(--lp-text) 20%, transparent);
}
.lp-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--lp-primary) 42%, transparent),
              inset 0 1px 0 color-mix(in srgb, var(--lp-text) 20%, transparent);
}
.lp-btn--primary:active { transform: none; }
.lp-body .lp-btn--ghost, .lp-btn--ghost {
  color: var(--lp-text);
  background: var(--lp-surface-2);
  border-color: var(--lp-border-strong);
}
.lp-btn--ghost:hover { background: var(--lp-surface-3); border-color: var(--lp-accent); }

/* Card. Add data-lp-spot for the cursor spotlight (landing.js sets --mx / --my). */
.lp-card {
  position: relative;
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-r-lg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--lp-text) 4%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .lp-card[data-lp-spot] { transition: border-color var(--lp-dur) var(--lp-ease); }
  .lp-card[data-lp-spot]:hover { border-color: var(--lp-border-strong); }
  .lp-card[data-lp-spot]::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%),
                color-mix(in srgb, var(--lp-primary) 14%, transparent), transparent 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--lp-dur) var(--lp-ease);
  }
  .lp-card[data-lp-spot]:hover::after { opacity: 1; }
}

/* Chip: pill toggle button. Selected state is [aria-pressed="true"]. */
.lp-chip {
  display: inline-flex; align-items: center; gap: var(--lp-sp-2);
  min-height: 38px;
  padding: var(--lp-sp-2) var(--lp-sp-4);
  border: 1px solid var(--lp-border-strong);
  border-radius: var(--lp-r-pill);
  background: var(--lp-surface-2);
  color: var(--lp-muted);
  font-family: var(--lp-font);
  font-size: var(--lp-fs-sm); font-weight: 500; line-height: 1.2;
  cursor: pointer;
  transition: color var(--lp-dur) var(--lp-ease), background-color var(--lp-dur) var(--lp-ease),
              border-color var(--lp-dur) var(--lp-ease), box-shadow var(--lp-dur) var(--lp-ease);
}
.lp-chip:hover { color: var(--lp-text); border-color: var(--lp-accent); }
.lp-body .lp-chip[aria-pressed="true"], .lp-chip[aria-pressed="true"] {
  color: var(--lp-text);
  background: color-mix(in srgb, var(--lp-primary) 26%, transparent);
  border-color: var(--lp-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-primary) 16%, transparent);
}

/* Tier badge. The text is the tier; colour comes from data-tier. */
.lp-tier {
  --lp-tier-c: var(--lp-muted);
  display: inline-flex; align-items: center;
  padding: 0 var(--lp-sp-2);
  border: 1px solid color-mix(in srgb, var(--lp-tier-c) 40%, transparent);
  border-radius: var(--lp-r-pill);
  background: color-mix(in srgb, var(--lp-tier-c) 12%, transparent);
  color: var(--lp-tier-c);
  font-family: var(--lp-font);
  font-size: var(--lp-fs-xs); font-weight: 600; line-height: 1.7;
  letter-spacing: .03em;
  white-space: nowrap;
}
.lp-tier[data-tier="Free"] { --lp-tier-c: var(--lp-muted); }
.lp-tier[data-tier="Pro"] { --lp-tier-c: color-mix(in srgb, var(--lp-primary) 62%, var(--lp-text)); }
.lp-tier[data-tier="Premium"] { --lp-tier-c: var(--lp-amber); }
.lp-tier[data-tier="Elite"] { --lp-tier-c: var(--lp-accent); }

/* Screenshot frame wrapping an <img>. */
.lp-shot {
  display: block;
  overflow: hidden;
  border: 1px solid var(--lp-border-strong);
  border-radius: var(--lp-r);
  background: var(--lp-bg-2);
  box-shadow: var(--lp-shadow), inset 0 1px 0 color-mix(in srgb, var(--lp-text) 5%, transparent);
}
.lp-shot img { display: block; width: 100%; height: auto; }

/* "Sample data" / "Illustrative" label. */
.lp-sample {
  display: inline-flex; align-items: center; gap: var(--lp-sp-1);
  padding: 0 var(--lp-sp-2);
  border: 1px dashed color-mix(in srgb, var(--lp-amber) 55%, transparent);
  border-radius: var(--lp-r-pill);
  color: var(--lp-amber);
  font-size: var(--lp-fs-xs); font-weight: 600; line-height: 1.7;
  letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}

/* Visually hidden. .visually-hidden is used by the included personalize partials. */
.lp-sr, .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Reveal: hidden only when JS runs (html.js) and motion is allowed. landing.js adds .is-in. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-lp-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s var(--lp-ease), transform .6s var(--lp-ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  html.js [data-lp-reveal].is-in { opacity: 1; transform: none; }
}

/* ---------- 4. nav ---------- */
.lp-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--lp-bg); /* fallback where color-mix() is not supported */
  background: color-mix(in srgb, var(--lp-bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--lp-dur) var(--lp-ease), background-color var(--lp-dur) var(--lp-ease);
}
.lp-nav.is-scrolled, .lp-nav.is-open {
  background: var(--lp-bg);
  background: color-mix(in srgb, var(--lp-bg) 90%, transparent);
  border-bottom-color: var(--lp-border);
}
.lp-nav-inner {
  display: flex; align-items: center; gap: var(--lp-sp-5);
  min-height: var(--lp-nav-h);
}
.lp-nav-logo { display: inline-flex; align-items: center; flex: none; }
.lp-nav-logo img { display: block; width: auto; height: auto; max-height: 40px; }

.lp-nav-panel { display: flex; align-items: center; gap: var(--lp-sp-5); flex: 1; min-width: 0; }
.lp-nav-links {
  display: flex; align-items: center; justify-content: center; gap: var(--lp-sp-1);
  flex: 1; list-style: none; padding: 0;
}
.lp-body .lp-nav-links a {
  display: block;
  padding: var(--lp-sp-2) var(--lp-sp-3);
  border-radius: var(--lp-r-sm);
  color: var(--lp-muted);
  font-size: var(--lp-fs-sm); font-weight: 500;
  transition: color var(--lp-dur) var(--lp-ease), background-color var(--lp-dur) var(--lp-ease);
}
.lp-body .lp-nav-links a:hover { color: var(--lp-text); background: var(--lp-surface-2); }
.lp-nav-actions { display: flex; align-items: center; gap: var(--lp-sp-2); flex: none; }

.lp-nav-burger {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-left: auto; padding: 0;
  border: 1px solid var(--lp-border-strong);
  border-radius: var(--lp-r-sm);
  background: var(--lp-surface-2);
  cursor: pointer;
}
.lp-nav-burger-bars { display: grid; gap: var(--lp-sp-1); width: 18px; }
.lp-nav-burger-bars span {
  display: block; height: 2px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-text);
  transition: transform var(--lp-dur) var(--lp-ease), opacity var(--lp-dur) var(--lp-ease);
}
.lp-nav-burger[aria-expanded="true"] .lp-nav-burger-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.lp-nav-burger[aria-expanded="true"] .lp-nav-burger-bars span:nth-child(2) { opacity: 0; }
.lp-nav-burger[aria-expanded="true"] .lp-nav-burger-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 899.98px) {
  .lp-nav-inner { flex-wrap: wrap; column-gap: var(--lp-sp-4); row-gap: 0; }
  .lp-nav-panel {
    flex: 0 0 100%;
    flex-direction: column; align-items: stretch; gap: var(--lp-sp-4);
    padding-block: var(--lp-sp-3) var(--lp-sp-5);
    border-top: 1px solid var(--lp-border);
  }
  .lp-nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .lp-body .lp-nav-links a { padding: var(--lp-sp-3) var(--lp-sp-2); font-size: var(--lp-fs-base); }
  .lp-nav-actions > .lp-btn { flex: 1; }

  /* With JS the panel is a disclosure. Without JS it stays a normal block and the header is not pinned. */
  html.js .lp-nav-burger { display: inline-flex; }
  html.js .lp-nav-panel { display: none; }
  html.js .lp-nav.is-open .lp-nav-panel {
    display: flex;
    max-height: calc(100vh - var(--lp-nav-h));
    overflow-y: auto;
    /* Room for the focus ring, which the scroll container would otherwise clip. */
    flex-basis: calc(100% + 2 * var(--lp-sp-1));
    margin-inline: calc(var(--lp-sp-1) * -1);
    padding-inline: var(--lp-sp-1);
  }
  html:not(.js) .lp-nav { position: static; }
}

/* ---------- 5. numbers ---------- */
.lp-num { padding-block: var(--lp-sp-7); }
.lp-num-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none; padding: 0;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-r-lg);
  background: var(--lp-border); /* shows through the 1px gaps as dividers */
  gap: 1px;
  overflow: hidden;
}
.lp-num-tile {
  display: flex; flex-direction: column; gap: var(--lp-sp-2);
  padding: var(--lp-sp-6) var(--lp-sp-5);
  background: var(--lp-bg-2);
}
.lp-num-value {
  font-family: var(--lp-font-title);
  font-size: var(--lp-fs-2xl); font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--lp-text);
}
.lp-num-label { color: var(--lp-muted); font-size: var(--lp-fs-sm); }
@media (max-width: 899.98px) {
  .lp-num-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 6. AI ---------- */
.lp-ai-grid {
  display: grid; gap: var(--lp-sp-5);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
.lp-ai-card {
  display: flex; flex-direction: column; gap: var(--lp-sp-4);
  padding: var(--lp-sp-6);
}
.lp-ai-card--lead { grid-row: span 2; }
.lp-ai-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lp-sp-4); }
.lp-ai-title { flex: 1; min-width: 0; }
/* Product marks, as in the site header's EZPZ AI menu: rounded app-icon squares.
   A pair (EZPZ Finn: EZPZ + TradingView) overlaps slightly, like a connector. */
.lp-ai-logos { display: flex; flex: none; }
.lp-ai-logos img {
  display: block;
  width: 48px; height: 48px;
  border-radius: var(--lp-r-sm);
  background: #000;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--lp-border-strong), var(--lp-shadow);
}
.lp-ai-logos--pair img + img { margin-left: calc(var(--lp-sp-3) * -1); }
.lp-ai-card--lead .lp-ai-logos img { width: 56px; height: 56px; }
.lp-ai-name { font-size: var(--lp-fs-lg); font-weight: 700; }
.lp-ai-card--lead .lp-ai-name { font-size: var(--lp-fs-xl); }
.lp-ai-role { margin-top: var(--lp-sp-1); color: var(--lp-accent); font-size: var(--lp-fs-sm); font-weight: 500; }
.lp-ai-summary { color: var(--lp-muted); }

.lp-ai-chat {
  display: flex; flex-direction: column; gap: var(--lp-sp-3);
  padding: var(--lp-sp-4);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-r);
  background: var(--lp-bg-2);
}
.lp-ai-chat-top { display: flex; justify-content: flex-end; }
.lp-ai-q {
  align-self: flex-end;
  max-width: 85%;
  padding: var(--lp-sp-3) var(--lp-sp-4);
  border-radius: var(--lp-r) var(--lp-r) var(--lp-sp-1) var(--lp-r);
  background: color-mix(in srgb, var(--lp-primary) 28%, transparent);
  border: 1px solid var(--lp-border-strong);
  font-size: var(--lp-fs-sm);
}
.lp-ai-answer { display: flex; align-items: flex-start; gap: var(--lp-sp-2); }
.lp-ai-a-avatar {
  flex: none;
  width: 28px; height: 28px;
  margin-top: var(--lp-sp-1);
  border-radius: var(--lp-r-pill);
  background: #000;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--lp-border-strong);
}
.lp-ai-a {
  align-self: flex-start;
  display: grid; gap: var(--lp-sp-2);
  max-width: 92%;
  padding: var(--lp-sp-3) var(--lp-sp-4);
  border-radius: var(--lp-r) var(--lp-r) var(--lp-r) var(--lp-sp-1);
  background: var(--lp-surface-2);
  border: 1px solid var(--lp-border);
  color: var(--lp-muted);
  font-size: var(--lp-fs-sm);
}
.lp-ai-link { margin-top: auto; font-size: var(--lp-fs-sm); font-weight: 600; }
.lp-ai-cta { margin-top: var(--lp-sp-6); text-align: center; }

@media (max-width: 899.98px) {
  .lp-ai-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-ai-card--lead { grid-row: auto; }
}

/* ---------- 7. ecosystem ---------- */
/* Base: hub on top, products as a card grid. The orbit keeps each product's text in a
   hover/focus popover, so it only applies from 900px with a mouse; touch keeps the cards. */
.lp-eco-lines { display: none; }

.lp-eco-hub {
  display: flex; flex-direction: column; align-items: center; gap: var(--lp-sp-1);
  width: fit-content;
  margin: 0 auto var(--lp-sp-5);
  padding: var(--lp-sp-4) var(--lp-sp-5);
  border: 1px solid var(--lp-border-strong);
  border-radius: var(--lp-r-lg);
  background: var(--lp-surface);
  text-align: center;
}
.lp-eco-hub img { display: block; width: 28px; height: 28px; object-fit: contain; }
.lp-eco-hub-name { font-family: var(--lp-font-title); font-size: var(--lp-fs-base); font-weight: 700; }
.lp-eco-hub-here { color: var(--lp-accent); font-size: var(--lp-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.lp-eco-list {
  display: grid; gap: var(--lp-sp-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  list-style: none; padding: 0;
}
.lp-eco-item {
  display: flex; flex-direction: column; gap: var(--lp-sp-3);
  padding: var(--lp-sp-5);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-r-lg);
  background: var(--lp-surface);
}
.lp-body .lp-eco-pill, .lp-eco-pill {
  display: inline-flex; align-items: center; gap: var(--lp-sp-3);
  width: fit-content;
  color: var(--lp-text);
  font-family: var(--lp-font-title);
  font-size: var(--lp-fs-md); font-weight: 600;
}
.lp-eco-pill img { display: block; flex: none; width: 28px; height: 28px; object-fit: contain; }
.lp-eco-dot {
  flex: none; width: 8px; height: 8px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-amber);
}
.lp-eco-dot[data-status="live"] { background: var(--lp-green); }

.lp-eco-pop-card { display: grid; gap: var(--lp-sp-2); }
.lp-eco-role { color: var(--lp-accent); font-size: var(--lp-fs-sm); font-weight: 500; }
.lp-eco-summary { color: var(--lp-muted); font-size: var(--lp-fs-sm); }
.lp-eco-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--lp-sp-3); margin-top: var(--lp-sp-1); }
.lp-eco-status {
  --lp-eco-c: var(--lp-amber);
  display: inline-flex; align-items: center; gap: var(--lp-sp-2);
  padding: 0 var(--lp-sp-2);
  border: 1px solid color-mix(in srgb, var(--lp-eco-c) 40%, transparent);
  border-radius: var(--lp-r-pill);
  background: color-mix(in srgb, var(--lp-eco-c) 12%, transparent);
  color: var(--lp-eco-c);
  font-size: var(--lp-fs-xs); font-weight: 600; line-height: 1.7;
}
.lp-eco-status[data-status="live"] { --lp-eco-c: var(--lp-green); }
.lp-eco-visit { font-size: var(--lp-fs-sm); font-weight: 600; white-space: nowrap; }

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .lp-eco-stage {
    position: relative;
    width: min(100%, 620px);
    aspect-ratio: 1;
    margin-inline: auto;
  }
  .lp-eco-stage::before { /* soft glow behind the hub */
    content: "";
    position: absolute; inset: 18%;
    border-radius: var(--lp-r-pill);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--lp-primary) 22%, transparent), transparent);
    pointer-events: none;
  }
  .lp-eco-lines {
    display: block;
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    overflow: visible;
  }
  .lp-eco-lines line {
    stroke: var(--lp-border-strong);
    stroke-width: 1;
    stroke-dasharray: 3 5;
    vector-effect: non-scaling-stroke;
  }
  .lp-eco-hub {
    position: absolute; left: 50%; top: 50%; z-index: 1;
    margin: 0;
    transform: translate(-50%, -50%);
    box-shadow: var(--lp-shadow);
  }
  .lp-eco-list { display: block; position: absolute; inset: 0; }
  .lp-eco-item {
    display: block;
    position: absolute; left: calc(var(--x, 50) * 1%); top: calc(var(--y, 50) * 1%); z-index: 2;
    padding: 0; border: 0; background: none;
    transform: translate(-50%, -50%);
  }
  .lp-eco-item:hover, .lp-eco-item:focus-within { z-index: 5; }
  .lp-body .lp-eco-pill, .lp-eco-pill {
    padding: var(--lp-sp-2) var(--lp-sp-4) var(--lp-sp-2) var(--lp-sp-2);
    border: 1px solid var(--lp-border-strong);
    border-radius: var(--lp-r-pill);
    background: var(--lp-surface);
    font-family: var(--lp-font);
    font-size: var(--lp-fs-sm);
    white-space: nowrap;
    transition: border-color var(--lp-dur) var(--lp-ease), background-color var(--lp-dur) var(--lp-ease);
  }
  .lp-eco-item:hover .lp-eco-pill, .lp-eco-item:focus-within .lp-eco-pill {
    border-color: var(--lp-accent);
    background: var(--lp-bg-2);
  }
  /* Popover. It slides sideways by the pill's own x position (0% at the left edge,
     100% at the right), so it always stays inside the stage and is never clipped.
     The padding bridges the gap so the pointer can travel from pill to card. */
  .lp-eco-pop {
    position: absolute; left: 50%; top: 100%;
    width: 280px;
    padding-top: var(--lp-sp-2);
    transform: translateX(calc(var(--x, 50) * -1%));
    opacity: 0; visibility: hidden;
    transition: opacity var(--lp-dur) var(--lp-ease), visibility 0s linear var(--lp-dur);
  }
  .lp-eco-item[data-pop="up"] .lp-eco-pop {
    top: auto; bottom: 100%;
    padding-top: 0; padding-bottom: var(--lp-sp-2);
  }
  .lp-eco-item:hover .lp-eco-pop, .lp-eco-item:focus-within .lp-eco-pop {
    opacity: 1; visibility: visible;
    transition-delay: 0s;
  }
  .lp-eco-pop-card {
    padding: var(--lp-sp-4);
    border: 1px solid var(--lp-border-strong);
    border-radius: var(--lp-r);
    background: var(--lp-surface);
    box-shadow: var(--lp-shadow);
  }
}

/* ---------- 8. trust ---------- */
.lp-trust-proof { display: grid; gap: var(--lp-sp-5); margin-bottom: var(--lp-sp-7); }
.lp-trust-proof-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--lp-sp-4) var(--lp-sp-7);
  list-style: none; padding: 0;
  color: var(--lp-muted);
}
.lp-trust-proof-stats strong {
  color: var(--lp-text);
  font-family: var(--lp-font-title); font-size: var(--lp-fs-xl); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lp-trust-quotes {
  display: grid; gap: var(--lp-sp-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  list-style: none; padding: 0;
}
.lp-trust-quote { padding: var(--lp-sp-5); }
.lp-trust-quote blockquote { color: var(--lp-text); }
.lp-trust-quote-by { margin-top: var(--lp-sp-3); color: var(--lp-muted); font-size: var(--lp-fs-sm); }

.lp-trust-grid { display: grid; gap: var(--lp-sp-5); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-trust-card {
  display: flex; flex-direction: column; gap: var(--lp-sp-3);
  padding: var(--lp-sp-5);
}
.lp-trust-card h3 { font-size: var(--lp-fs-md); font-weight: 600; }
.lp-trust-card > p { color: var(--lp-muted); font-size: var(--lp-fs-sm); }
.lp-trust-perks { display: grid; gap: var(--lp-sp-2); list-style: none; padding: 0; color: var(--lp-muted); font-size: var(--lp-fs-sm); }
.lp-trust-perks li { position: relative; padding-left: var(--lp-sp-4); }
.lp-trust-perks li::before {
  content: "";
  position: absolute; left: 0; top: .6em;
  width: 6px; height: 6px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-primary);
}
.lp-trust-link { margin-top: auto; padding-top: var(--lp-sp-2); font-size: var(--lp-fs-sm); font-weight: 600; }
.lp-trust-note {
  margin-top: var(--lp-sp-6);
  padding: var(--lp-sp-4) var(--lp-sp-5);
  border: 1px solid var(--lp-border);
  border-left: 3px solid var(--lp-border-strong);
  border-radius: var(--lp-r-sm);
  background: var(--lp-surface-2);
  color: var(--lp-muted);
  font-size: var(--lp-fs-sm);
}
.lp-trust-note strong { color: var(--lp-text); font-weight: 600; }

@media (max-width: 1199.98px) { .lp-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .lp-trust-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 9. plans ---------- */
.lp-plan-grid {
  display: grid; gap: var(--lp-sp-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  list-style: none; padding: 0;
}
@media (min-width: 560px) { .lp-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lp-plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lp-plan-card {
  display: flex; flex-direction: column; gap: var(--lp-sp-4);
  padding: var(--lp-sp-6) var(--lp-sp-5);
  transition: border-color var(--lp-dur) var(--lp-ease), box-shadow var(--lp-dur) var(--lp-ease);
}
.lp-plan-card[data-lp-suggested] {
  border-color: var(--lp-primary);
  box-shadow: 0 0 0 1px var(--lp-primary), var(--lp-shadow);
}
.lp-plan-suggested {
  align-self: flex-start;
  padding: 0 var(--lp-sp-3);
  border-radius: var(--lp-r-pill);
  background: color-mix(in srgb, var(--lp-primary) 30%, transparent);
  border: 1px solid var(--lp-primary);
  color: var(--lp-text);
  font-size: var(--lp-fs-xs); font-weight: 600; line-height: 1.9;
  letter-spacing: .04em; text-transform: uppercase;
}
.lp-plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--lp-sp-2); }
.lp-plan-name { font-size: var(--lp-fs-lg); font-weight: 700; }
.lp-plan-badge {
  padding: 0 var(--lp-sp-2);
  border: 1px solid var(--lp-border-strong);
  border-radius: var(--lp-r-pill);
  background: var(--lp-surface-3);
  color: var(--lp-accent);
  font-size: var(--lp-fs-xs); font-weight: 600; line-height: 1.7;
  white-space: nowrap;
}
.lp-plan-badge--soon {
  border-color: color-mix(in srgb, var(--lp-amber) 40%, transparent);
  background: color-mix(in srgb, var(--lp-amber) 12%, transparent);
  color: var(--lp-amber);
}
.lp-plan-price { display: flex; align-items: baseline; gap: var(--lp-sp-1); }
.lp-plan-amount {
  font-family: var(--lp-font-title);
  font-size: var(--lp-fs-2xl); font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.lp-plan-per { color: var(--lp-muted); font-size: var(--lp-fs-sm); }
.lp-plan-desc { color: var(--lp-muted); font-size: var(--lp-fs-sm); }
.lp-plan-points {
  display: grid; gap: var(--lp-sp-2);
  list-style: none;
  padding: var(--lp-sp-4) 0 0;
  border-top: 1px solid var(--lp-border);
  font-size: var(--lp-fs-sm);
}
.lp-plan-points li { position: relative; padding-left: var(--lp-sp-5); }
.lp-plan-points li::before { /* check mark drawn with borders */
  content: "";
  position: absolute; left: var(--lp-sp-1); top: .35em;
  width: 6px; height: 10px;
  border: solid var(--lp-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.lp-plan-link { margin-top: auto; }
.lp-plan-foot { margin-top: var(--lp-sp-6); color: var(--lp-muted); font-size: var(--lp-fs-sm); text-align: center; }
.lp-body .lp-plan-foot a, .lp-body .lp-faq-more a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 10. FAQ ---------- */
.lp-faq-inner { max-width: 820px; }
.lp-faq-list { border-top: 1px solid var(--lp-border); }
.lp-faq-item { border-bottom: 1px solid var(--lp-border); }
.lp-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--lp-sp-4);
  padding: var(--lp-sp-5) var(--lp-sp-1);
  font-size: var(--lp-fs-md); font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary:hover { color: var(--lp-accent); }
.lp-faq-mark { position: relative; flex: none; width: 14px; height: 14px; }
.lp-faq-mark::before, .lp-faq-mark::after {
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 14px; height: 2px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-accent);
  transition: transform var(--lp-dur) var(--lp-ease);
}
.lp-faq-mark::after { transform: rotate(90deg); }
.lp-faq-item[open] .lp-faq-mark::after { transform: none; }
.lp-faq-answer { display: grid; gap: var(--lp-sp-3); padding: 0 var(--lp-sp-1) var(--lp-sp-5); max-width: 70ch; color: var(--lp-muted); }
.lp-faq-more { margin-top: var(--lp-sp-6); color: var(--lp-muted); font-size: var(--lp-fs-sm); text-align: center; }

/* ---------- 11. CTA ---------- */
.lp-cta { padding-top: 0; }
.lp-cta-band {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--lp-sp-4);
  padding: var(--lp-sp-8) var(--lp-sp-5);
  overflow: hidden;
  border: 1px solid var(--lp-border-strong);
  border-radius: var(--lp-r-lg);
  background:
    radial-gradient(720px 360px at 50% -20%, color-mix(in srgb, var(--lp-primary) 34%, transparent), transparent 70%),
    var(--lp-bg-2);
  text-align: center;
}
.lp-cta-band h2 {
  font-size: var(--lp-fs-2xl); font-weight: 700;
  background: var(--lp-title-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.lp-cta-band p { max-width: 52ch; color: var(--lp-muted); font-size: var(--lp-fs-md); }
.lp-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--lp-sp-3); margin-top: var(--lp-sp-3); }

/* ---------- 12. footer ---------- */
.lp-footer {
  padding-block: var(--lp-sp-7) var(--lp-sp-6);
  border-top: 1px solid var(--lp-border);
  background: var(--lp-bg-2);
  color: var(--lp-muted);
  font-size: var(--lp-fs-sm);
}
.lp-footer-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--lp-sp-5) var(--lp-sp-7); }
.lp-footer-brand { display: grid; gap: var(--lp-sp-3); max-width: 36ch; }
.lp-footer-logo { display: inline-flex; width: fit-content; }
.lp-footer-logo img { display: block; width: auto; height: auto; max-height: 40px; }
.lp-footer-links, .lp-footer-eco-list {
  display: flex; flex-wrap: wrap; gap: var(--lp-sp-2) var(--lp-sp-5);
  list-style: none; padding: 0;
}
.lp-body .lp-footer a { color: var(--lp-muted); }
.lp-body .lp-footer a:hover { color: var(--lp-text); }
.lp-footer-links a { display: inline-block; padding-block: var(--lp-sp-1); font-weight: 500; }
.lp-footer-eco {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--lp-sp-2) var(--lp-sp-5);
  margin-top: var(--lp-sp-6); padding-top: var(--lp-sp-5);
  border-top: 1px solid var(--lp-border);
}
.lp-footer-eco-label { color: var(--lp-text); font-size: var(--lp-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.lp-footer-eco-list li { display: inline-flex; align-items: baseline; gap: var(--lp-sp-2); }
.lp-footer-eco-status { color: var(--lp-amber); font-size: var(--lp-fs-xs); font-weight: 500; }
.lp-footer-note { margin-top: var(--lp-sp-5); max-width: 90ch; font-size: var(--lp-fs-xs); }
.lp-footer-note strong { color: var(--lp-text); font-weight: 600; }
.lp-footer-copy { margin-top: var(--lp-sp-4); font-size: var(--lp-fs-xs); }

/* ---------- small screens ---------- */
@media (max-width: 767.98px) {
  .lp-section-head { margin-bottom: var(--lp-sp-6); }
  .lp-section-head p:not(.lp-eyebrow) { font-size: var(--lp-fs-base); }
  .lp-num-tile { padding: var(--lp-sp-5) var(--lp-sp-4); }
  .lp-ai-card { padding: var(--lp-sp-5); }
  .lp-cta-band { padding: var(--lp-sp-7) var(--lp-sp-4); }
}
@media (max-width: 479.98px) {
  :root { --lp-gutter: 16px; }
  .lp-cta-actions, .lp-cta-actions .lp-btn { width: 100%; }
  .lp-eco-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 13. reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* Wide screens: use more of the width before the side margins take over. */
@media (min-width: 1600px) { :root { --lp-container: 1440px; --lp-gutter: 32px; } }