/* ============================================================
   WAGate.app — "Circuit" landing system (v2, edgy)
   Self-contained, scoped to .lx. Deep-forest dark hero/nav/footer,
   electric green→lime accents, mono kickers, crisp light sections.
   Mobile-first: no horizontal overflow, sticky bottom CTA, big taps.
   Same class contract as v1 (markup, i18n, RTL, analytics intact).
   ============================================================ */
:root {
  --tw-accent: #12b76a;
  --tw-accent-press: #0e9f5d;
  --tw-lime: #d8f24a;
  --tw-page: #f5f7f5;
  --tw-radius: 18px;
}

.lx {
  /* Ink (light sections) */
  --ink: #0d1310;
  --ink-2: #3d4540;
  --ink-3: #5c665f;
  --ink-4: #96a09a;

  /* Surfaces */
  --paper: #ffffff;
  --page: var(--tw-page);
  --cream: #eef1ee;              /* v1 name kept — now a cool neutral band */
  --cream-2: #e6eae6;
  --line: #e2e7e2;
  --line-2: #d2d9d2;

  /* Dark ("void") surfaces — hero, nav, footer, stat band, pop card */
  --void: #0a0f0c;
  --void-2: #111813;
  --void-3: #1a231d;
  --void-line: #24302a;
  --void-ink: #eaf3ec;
  --void-ink-2: #a7b5ab;

  /* Brand */
  --primary: var(--tw-accent);
  --primary-press: var(--tw-accent-press);
  --primary-tint: color-mix(in srgb, var(--primary) 12%, #ffffff);
  --lime: var(--tw-lime);
  --glow: color-mix(in srgb, var(--primary) 55%, transparent);

  /* Soft colorful tiles (referenced by inline styles in markup) */
  --peach: #ffe3cc;     --peach-ink: #b73f07;
  --lilac: #e7e2ff;     --lilac-ink: #5f2ccc;
  --mint: #ccf2dd;      --mint-ink: #047c4a;
  --sky: #d4e8fd;       --sky-ink: #1a63d6;
  --lemon: #faedba;     --lemon-ink: #93650a;
  --rose: #ffdde4;      --rose-ink: #cc3055;

  /* Radii — tighter = sharper */
  --rc: var(--tw-radius);
  --rc-sm: 12px;
  --rc-lg: 26px;

  /* Shadows — cool + crisp */
  --sh-soft: 0 1px 2px rgba(10, 20, 14, .05), 0 8px 20px -12px rgba(10, 20, 14, .10);
  --sh-card: 0 2px 6px -2px rgba(10, 20, 14, .07), 0 20px 44px -22px rgba(10, 20, 14, .16);
  --sh-pop: 0 24px 64px -20px rgba(6, 14, 9, .45);

  --mono: 'JetBrains Mono', ui-monospace, Menlo, 'Rubik', monospace;

  font-family: 'Lexend', 'Rubik', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--page);
  color: var(--ink);
  min-height: 100%;
  overflow-x: clip;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}
.lx * { box-sizing: border-box; }
.lx img, .lx svg { max-width: 100%; }
.lx a { color: inherit; text-decoration: none; }
.lx .lx-ic { flex-shrink: 0; }

.lx-wrap { max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
.lx-chrome-wrap { display: contents; }

/* ---------- Reveal-on-scroll (contract with landing.js) ---------- */
.lx-rev { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.lx-rev.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .lx-rev { opacity: 1; transform: none; transition: none; } }

/* ---------- Buttons ---------- */
.lx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 640; font-size: 15px; letter-spacing: -.01em;
  padding: 13px 22px; border-radius: 13px; border: 1px solid transparent;
  cursor: pointer; transition: transform .14s ease, background .14s ease, box-shadow .14s ease, border-color .14s;
  min-height: 46px;
}
.lx-btn:active { transform: translateY(1px) scale(.99); }
.lx-btn.lx-btn--primary { background: var(--primary); color: #04160c; box-shadow: 0 10px 26px -10px var(--glow); }
.lx-btn.lx-btn--primary:hover { background: #17cd79; }
.lx-btn.lx-btn--dark { background: var(--void); color: var(--void-ink); }
.lx-btn.lx-btn--dark:hover { background: #182019; }
.lx-btn.lx-btn--lime { background: var(--lime); color: #131a03; }
.lx-btn.lx-btn--lime:hover { background: #e3fa5f; }
.lx-btn.lx-btn--white { background: var(--paper); color: var(--ink); border-color: var(--line-2); }
.lx-btn.lx-btn--white:hover { border-color: var(--ink-3); }
.lx-btn.lx-btn--ghost { background: transparent; color: inherit; border-color: transparent; }
.lx-btn--sm { padding: 9px 15px; font-size: 13.5px; min-height: 38px; border-radius: 11px; }
.lx-btn--lg { padding: 16px 30px; font-size: 16.5px; border-radius: 15px; }

/* ---------- Nav (dark glass, sticky) ---------- */
.lx-nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--void) 86%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--void-line);
  color: var(--void-ink);
}
.lx-nav-inner { display: flex; align-items: center; gap: 26px; height: 66px; }
.lx-logo { display: inline-flex; align-items: center; }
.lx-logo-img { height: 26px; width: auto; filter: brightness(0) invert(1); }
.lx-nav-links { display: flex; align-items: center; gap: 4px; margin-inline-start: 8px; }
.lx-nav-link {
  font-size: 13.5px; font-weight: 560; color: var(--void-ink-2);
  padding: 9px 13px; border-radius: 10px; transition: color .13s, background .13s;
}
.lx-nav-link:hover { color: var(--void-ink); background: rgba(255,255,255,.06); }
.lx-nav-right { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.lx-nav-right .lx-btn.lx-btn--ghost { color: var(--void-ink-2); }
.lx-nav-right .lx-btn.lx-btn--ghost:hover { color: var(--void-ink); }
/* Language flag dropdown (shared .lang-dd from styles.css) on dark chrome */
.lx-nav-right .lang-dd-btn { padding: 6px; gap: 0; background: transparent; border-color: var(--void-line); }
.lx-nav-right .lang-dd-btn .lang-dd-caret { display: none; }
.lx-nav-right .lang-dd-btn .lang-dd-name { display: none; }
@media (max-width: 860px) {
  .lx-nav-links { display: none; }
  .lx-nav-inner { height: 60px; gap: 12px; }
}

/* ---------- Hero (dark, glow, grid) ---------- */
.lx-hero {
  position: relative; overflow: clip;
  background:
    radial-gradient(900px 480px at 50% -160px, rgba(18, 183, 106, .34), transparent 62%),
    radial-gradient(600px 380px at 88% 8%, rgba(216, 242, 74, .10), transparent 60%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    var(--void);
  background-size: auto, auto, 44px 44px, 44px 44px, auto;
  color: var(--void-ink);
  padding: 72px 0 90px;
  border-bottom: 1px solid var(--void-line);
}
.lx-blob { display: none; }
.lx-star { position: absolute; color: var(--lime); opacity: .8; z-index: 1; }
.lx-hero-inner { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.lx-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #b8f7d4; background: rgba(18, 183, 106, .12);
  border: 1px solid rgba(18, 183, 106, .38); border-radius: 999px; padding: 8px 15px;
}
.lx-chip-dot { display: inline-flex; color: var(--lime); }
.lx-h1 {
  margin: 0; font-size: clamp(38px, 6.6vw, 74px); line-height: 1.04; letter-spacing: -.035em; font-weight: 750;
  max-width: 15ch;
  background: linear-gradient(115deg, #ffffff 30%, #7ef0b3 68%, var(--lime) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .08em; /* keep descenders inside the clip */
}
.lx-hero-sub { margin: 0; max-width: 620px; font-size: clamp(15.5px, 2.2vw, 18px); line-height: 1.65; color: var(--void-ink-2); }
.lx-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.lx-hero-cta .lx-btn.lx-btn--primary { background: var(--lime); color: #131a03; box-shadow: 0 14px 40px -12px rgba(216, 242, 74, .45); }
.lx-hero-cta .lx-btn.lx-btn--primary:hover { background: #e6fb69; }

/* Hero product shot */
.lx-hero-shot { position: relative; margin-top: 58px; z-index: 2; }
.lx-float-tile {
  position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 16px; box-shadow: var(--sh-pop);
  border: 1px solid rgba(255,255,255,.16);
}
.lx-float-tile.t1 { background: var(--lime); color: #131a03; top: -26px; inset-inline-start: 6%; transform: rotate(-7deg); }
.lx-float-tile.t2 { background: var(--void-3); color: #8ef0b8; top: 34%; inset-inline-end: -12px; transform: rotate(6deg); }
.lx-float-tile.t3 { background: var(--primary); color: #04160c; bottom: -18px; inset-inline-start: 12%; transform: rotate(5deg); }

.lx-shot-card {
  background: var(--void-2); border: 1px solid var(--void-line); border-radius: var(--rc-lg);
  box-shadow: var(--sh-pop); overflow: hidden;
}
.lx-shot-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--void-line); }
.lx-dots { display: flex; gap: 6px; }
.lx-dots span { width: 10px; height: 10px; border-radius: 50%; background: #2c3830; }
.lx-dots span:first-child { background: #ff5f57; } .lx-dots span:nth-child(2) { background: #febc2e; } .lx-dots span:nth-child(3) { background: #28c840; }
.lx-shot-url {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 auto;
  font-family: var(--mono); font-size: 11.5px; color: var(--void-ink-2);
  background: rgba(255,255,255,.05); border: 1px solid var(--void-line); border-radius: 8px; padding: 5px 40px;
  max-width: 100%; white-space: nowrap;
}
.lx-shot-body { display: grid; grid-template-columns: 210px 1fr; background: var(--page); }
.lx-shot-side { background: var(--paper); border-inline-end: 1px solid var(--line); padding: 16px 12px; }
.lx-shot-brand { padding: 4px 8px 14px; }
.lx-shot-nav { display: flex; flex-direction: column; gap: 2px; }
.lx-shot-nav-item {
  display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 540; color: var(--ink-3);
  padding: 9px 10px; border-radius: 10px;
}
.lx-shot-nav-item.on { background: var(--primary-tint); color: var(--primary-press); font-weight: 640; }
.lx-shot-main { padding: 18px 20px; min-width: 0; }
.lx-shot-h { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 12px; }
.lx-shot-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lx-shot-stat { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.lx-shot-stat-l { font-size: 11px; font-weight: 560; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-shot-stat-v { font-family: var(--mono); font-size: clamp(16px, 2.2vw, 22px); font-weight: 640; letter-spacing: -.02em; margin-top: 3px; }
.lx-shot-stat-d { font-size: 11px; font-weight: 600; color: var(--primary-press); margin-top: 2px; }
.lx-shot-chart { margin-top: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.lx-shot-bars { display: flex; align-items: flex-end; gap: 5px; height: 92px; margin-top: 10px; }
.lx-shot-bars span { flex: 1; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #fff)); min-width: 0; }
.lx-shot-bars span:last-child { background: linear-gradient(180deg, var(--lime), var(--primary)); }

/* Floating phone */
.lx-hero-phone { position: absolute; z-index: 4; inset-inline-end: -8px; bottom: -46px; width: 250px; transform: rotate(3deg); filter: drop-shadow(0 30px 50px rgba(4, 10, 6, .5)); }
.lxp { background: #0c120e; border-radius: 34px; padding: 9px; border: 1px solid #26332b; }
.lxp-screen { background: #e5ddd3; border-radius: 26px; overflow: hidden; }
.lxp-head { display: flex; align-items: center; gap: 8px; background: #075e54; color: #fff; padding: 10px 12px; }
.lxp-ava { width: 28px; height: 28px; border-radius: 50%; background: var(--lime); color: #131a03; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.lxp-name { font-size: 12.5px; font-weight: 650; line-height: 1.15; }
.lxp-presence { font-size: 10px; opacity: .85; }
.lxp-chat { padding: 12px 10px 16px; display: flex; flex-direction: column; gap: 8px; }
.lxp-bubble { background: #fff; border-radius: 12px; padding: 9px 11px; box-shadow: 0 1px 1px rgba(0,0,0,.08); max-width: 100%; }
.lxp-bubble .bt { font-size: 11.5px; font-weight: 700; }
.lxp-bubble .bb { font-size: 10.5px; line-height: 1.5; color: #3c4340; margin-top: 3px; }
.lxp-bubble .bm { font-size: 9px; color: #9aa39d; margin-top: 4px; text-align: end; }
.lxp-btn { text-align: center; background: #fff; color: #128c7e; font-size: 11.5px; font-weight: 650; padding: 8px; border-radius: 10px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }

/* ---------- Sections ---------- */
.lx-sec { padding: 84px 0; }
.lx-sec.cream { background: var(--cream); border-block: 1px solid var(--line); }
.lx-sec-head { text-align: center; max-width: 680px; margin: 0 auto 48px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.lx-kicker {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--primary-press);
  display: inline-flex; align-items: center; gap: 8px;
}
.lx-kicker::before { content: "//"; color: var(--primary); opacity: .55; }
.lx-h2 { margin: 0; font-size: clamp(27px, 4vw, 42px); line-height: 1.08; letter-spacing: -.03em; font-weight: 730; }
.lx-sec-sub { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-3); }

/* ---------- Features split ---------- */
.lx-feat-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.lx-feat-checks { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.lx-check { display: flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 550; }
.lx-check-ic {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 8px; background: var(--primary); color: #04160c;
}
.lx-feat-visual { position: relative; }
.lx-feat-imgcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--rc-lg); padding: 22px; box-shadow: var(--sh-card); }
.lx-feat-imgcard-head { margin-bottom: 14px; }
.lx-tplrow { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); margin-bottom: 8px; background: var(--paper); }
.lx-tplrow.sel { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.lx-tplrow-ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lx-tplrow-name { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.lx-tplrow-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.lx-mini-badge { font-size: 11px; font-weight: 650; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }

/* ---------- Coexistence ---------- */
/* Two cards ("your phone" / "WAGate") joined by a connector that reads as one
   shared number. Desktop = side by side with a horizontal link; phones stack
   and the link flips vertical (see the ≤980 block at the bottom). */
/* The middle track is a FIXED width (not auto) so the checks grid below can reuse
   the exact same tracks and line its two columns up with the two cards. */
.lx-coex { display: grid; grid-template-columns: 1fr 210px 1fr; align-items: stretch; gap: 18px; }
.lx-coex-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--rc-lg);
  padding: 26px 24px; box-shadow: var(--sh-card); min-width: 0;
}
.lx-coex-ic { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; }
.lx-coex-t { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-top: 15px; }
.lx-coex-d { margin: 9px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-3); }
.lx-coex-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.lx-coex-tag {
  font-family: var(--mono); font-size: 11px; font-weight: 550; color: var(--ink-2);
  background: var(--cream); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px;
}
/* Connector — the "one number" spine between the two cards. The lines flex so the
   pill can grow with the translation without widening the track. */
.lx-coex-link { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; }
.lx-coex-line { flex: 1 1 10px; min-width: 8px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--line-2), var(--primary)); }
.lx-coex-link .lx-coex-line:last-child { background: linear-gradient(90deg, var(--primary), var(--line-2)); }
.lx-coex-pill {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--primary-press); background: var(--primary-tint);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 999px; padding: 8px 14px;
}
/* Same three tracks as .lx-coex — items skip the middle one, so each check column
   sits flush with the card above it (holds in RTL: track 1 is the right-hand one). */
.lx-coex-checks { display: grid; grid-template-columns: 1fr 210px 1fr; gap: 13px 18px; margin-top: 34px; }
.lx-coex-checks > :nth-child(odd)  { grid-column: 1; }
.lx-coex-checks > :nth-child(even) { grid-column: 3; }
.lx-coex-cta { display: flex; justify-content: center; margin-top: 32px; }

/* ---------- AI section ---------- */
/* Illustration sits on the RIGHT (copy first), so the page alternates
   right / left / right down the feature sections. The visual is first in
   the DOM, so reorder rather than move the markup. Columns are swapped to
   1.1fr 1fr so the copy keeps the wider track. */
.lx-ai-split { grid-template-columns: 1.1fr 1fr; }
.lx-ai-split .lx-feat-visual { order: 2; }
.lx-ai-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--rc-lg); padding: 20px; box-shadow: var(--sh-card); }
.lx-ai-card-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.lx-ai-avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--void); color: var(--lime); }
.lx-ai-name { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.lx-ai-presence { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); }
.lx-ai-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.lx-ai-chat { display: flex; flex-direction: column; gap: 9px; padding: 16px 0; }
.lx-ai-bubble { max-width: 88%; font-size: 13px; line-height: 1.55; padding: 10px 13px; border-radius: 14px; }
.lx-ai-bubble.in { align-self: flex-start; background: var(--cream); border: 1px solid var(--line); border-start-start-radius: 4px; }
.lx-ai-bubble.bot { align-self: flex-end; background: var(--void); color: var(--void-ink); border-start-end-radius: 4px; }
.lx-ai-btnrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.lx-ai-bubble .lx-ai-kb-chip { background: rgba(216, 242, 74, .14); border: 1px solid rgba(216, 242, 74, .5); color: var(--lime); font-family: var(--mono); }
.lx-ai-kb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.lx-ai-kb-lbl { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lx-ai-kb-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 580; color: var(--primary-press); background: var(--primary-tint); padding: 5px 11px; border-radius: 8px; }
.lx-ai-kb-chip svg { width: 12px; height: 12px; }
.lx-ai-powered { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.lx-ai-gemini { height: 15px; width: auto; }
.lx-ai-cta { display: flex; align-items: center; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.lx-ai-price { font-size: 14px; color: var(--ink-3); }
.lx-ai-price b { font-family: var(--mono); font-size: 19px; color: var(--ink); font-weight: 700; }

/* ---------- Integrations ---------- */
.lx-int-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lx-int-card {
  display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--rc);
  padding: 22px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s;
}
.lx-int-card:hover { transform: translateY(-3px); box-shadow: var(--sh-card); border-color: var(--line-2); }
.lx-int-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.lx-int-ic { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.lx-int-cat { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 10px; }
.lx-int-name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.lx-int-desc { font-size: 13.5px; line-height: 1.6; color: var(--ink-3); margin-top: 6px; }
.lx-int-more { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 640; color: var(--primary-press); margin-top: 14px; }

/* ---------- Values + stat band ---------- */
.lx-val-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lx-val { background: var(--paper); border: 1px solid var(--line); border-radius: var(--rc); padding: 26px 22px; }
.lx-val-ic { width: 54px; height: 54px; border-radius: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.lx-val-t { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.lx-val-d { font-size: 13.5px; line-height: 1.6; color: var(--ink-3); margin-top: 6px; }
.lx-statband {
  margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  background:
    radial-gradient(480px 220px at 12% -40%, rgba(18, 183, 106, .28), transparent 60%),
    var(--void);
  border: 1px solid var(--void-line); border-radius: var(--rc-lg); padding: 34px 30px; color: var(--void-ink);
}
.lx-stat-c { text-align: center; }
.lx-stat-n { font-family: var(--mono); font-size: clamp(28px, 4vw, 42px); font-weight: 640; letter-spacing: -.03em; color: var(--lime); }
.lx-stat-n .u { color: var(--void-ink-2); }
.lx-stat-cap { font-size: 12.5px; color: var(--void-ink-2); margin-top: 6px; }

/* ---------- Pricing ---------- */
.lx-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.lx-plan { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--rc-lg); padding: 28px 26px; display: flex; flex-direction: column; }
.lx-plan.pop { background: var(--void); color: var(--void-ink); border-color: var(--void-line); box-shadow: var(--sh-pop); }
.lx-plan-pop-tag {
  position: absolute; top: -13px; inset-inline-start: 26px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--lime); color: #131a03; border-radius: 999px; padding: 6px 12px;
}
.lx-plan-name { font-size: 18px; font-weight: 730; letter-spacing: -.01em; }
.lx-plan-desc { font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.lx-plan.pop .lx-plan-desc { color: var(--void-ink-2); }
.lx-plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.lx-plan-amt { font-family: var(--mono); font-size: 44px; font-weight: 650; letter-spacing: -.04em; line-height: 1; }
.lx-plan.pop .lx-plan-amt { color: var(--lime); }
.lx-plan-per { font-size: 14px; color: var(--ink-3); }
.lx-plan.pop .lx-plan-per { color: var(--void-ink-2); }
.lx-plan-cta { margin-top: 20px; }
.lx-plan-cta .lx-btn { width: 100%; }
.lx-plan-feats { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.lx-pf { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.45; }
.lx-pf.head { font-weight: 680; font-size: 12.5px; margin-top: 2px; }
.lx-pf-ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; height: 18px; border-radius: 6px; background: var(--primary-tint); color: var(--primary-press); margin-top: 1px; }
.lx-plan.pop .lx-pf-ic { background: rgba(216, 242, 74, .16); color: var(--lime); }
.lx-vat-il { text-align: center; font-size: 12px; color: var(--ink-4); margin-top: 8px; }

/* ---------- Testimonials (section currently hidden) ---------- */
.lx-tst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lx-tst { background: var(--paper); border: 1px solid var(--line); border-radius: var(--rc); padding: 24px; }
.lx-tst-stars { display: flex; gap: 3px; color: #f5b40a; margin-bottom: 12px; }
.lx-tst-stars svg { width: 15px; height: 15px; }
.lx-tst-quote { font-size: 14px; line-height: 1.65; }
.lx-tst-who { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.lx-tst-av { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.lx-tst-name { font-size: 13.5px; font-weight: 680; }
.lx-tst-role { font-size: 12px; color: var(--ink-3); }

/* ---------- FAQ ---------- */
.lx-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.lx-faq-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--rc); overflow: hidden; transition: border-color .15s; }
.lx-faq-item[open] { border-color: var(--primary); }
.lx-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  list-style: none; cursor: pointer; padding: 18px 20px;
  font-size: 15.5px; font-weight: 640; letter-spacing: -.01em;
}
.lx-faq-q::-webkit-details-marker { display: none; }
.lx-faq-ic { display: inline-flex; color: var(--ink-4); transition: transform .18s ease; flex-shrink: 0; }
.lx-faq-item[open] .lx-faq-ic { transform: rotate(90deg); color: var(--primary); }
html[dir="rtl"] .lx-faq-item[open] .lx-faq-ic { transform: rotate(-90deg); }
.lx-faq-a { padding: 0 20px 18px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }

/* ---------- CTA band ---------- */
.lx-cta { padding: 40px 0 90px; }
.lx-cta-card {
  position: relative; overflow: clip; text-align: center;
  background:
    radial-gradient(720px 340px at 50% -120px, rgba(18, 183, 106, .4), transparent 62%),
    radial-gradient(420px 260px at 90% 110%, rgba(216, 242, 74, .14), transparent 60%),
    var(--void);
  color: var(--void-ink); border: 1px solid var(--void-line); border-radius: var(--rc-lg);
  padding: 72px 26px;
}
.lx-cta-card .lx-star { color: var(--lime); }
.lx-cta-h { font-size: clamp(26px, 4vw, 40px); font-weight: 740; letter-spacing: -.03em; line-height: 1.1; }
.lx-cta-sub { font-size: 15px; color: var(--void-ink-2); margin-top: 12px; }
.lx-cta-row { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

/* ---------- Footer (dark) ---------- */
.lx-foot { background: var(--void); color: var(--void-ink-2); border-top: 1px solid var(--void-line); padding: 56px 0 28px; }
.lx-foot-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; }
.lx-foot-logo { display: inline-flex; }
.lx-foot-logo-img { height: 24px; width: auto; filter: brightness(0) invert(1); }
.lx-foot-tag { font-size: 13px; line-height: 1.65; margin-top: 12px; max-width: 260px; }
.lx-foot-col-t { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--void-ink); margin-bottom: 14px; }
.lx-foot-links { display: flex; flex-direction: column; gap: 9px; }
.lx-foot-link { font-size: 13.5px; color: var(--void-ink-2); transition: color .13s; }
.lx-foot-link:hover { color: var(--lime); }
.lx-foot-badge-row { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.lx-foot-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; border: 1px solid var(--void-line); border-radius: 999px; padding: 5px 11px; }
.lx-foot-badge-name { font-weight: 620; color: var(--void-ink); }
.lx-foot-badge-sep { opacity: .4; }
.lx-foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--void-line); margin-top: 40px; padding-top: 22px; }
.lx-foot-copy { font-size: 12.5px; }
.lx-foot-built { font-size: 12.5px; }
.lx-foot-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; }
.lx-foot-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px rgba(18, 183, 106, .25); }

/* ---------- Sticky mobile CTA ---------- */
.lx-mcta {
  display: none; position: fixed; z-index: 70; inset-inline: 0; bottom: 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--void) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--void-line);
}
.lx-mcta .lx-btn { width: 100%; }

[dir="rtl"] .lx-rtl-flip { transform: scaleX(-1); }

/* RTL: `.ltr` isolates Latin runs (brand names, IDs, prices) so they read
   correctly — but its `direction: ltr` also drags `text-align: start` to the LEFT
   inside an RTL page, so Latin headings drift away from their card. Pin the
   block-level ones back to the RTL edge. Deliberately NOT applied to `.ltr` inside
   centered blocks (`.lx-stat-n`) or to flex/inline uses, where it would fight the
   layout instead of helping it. */
[dir="rtl"] .lx-coex-t.ltr,
[dir="rtl"] .lx-int-name.ltr,
[dir="rtl"] .lx-ai-name.ltr,
[dir="rtl"] .lx-tplrow-name.ltr,
[dir="rtl"] .lx-tst-name.ltr,
[dir="rtl"] .lxp-name.ltr,
[dir="rtl"] .lx-plan-amt.ltr,
[dir="rtl"] .lx-shot-stat-v.ltr,
[dir="rtl"] .lx-shot-stat-d.ltr { text-align: right; }

/* ---------- Hebrew-only note ---------- */
.he-only { display: none; }
html[lang="he"] .he-only { display: block; }

/* ============================================================
   Mobile — the primary audience. No horizontal overflow, ever.
   ============================================================ */
@media (max-width: 980px) {
  .lx-feat-split { grid-template-columns: 1fr; gap: 40px; }
  .lx-ai-split .lx-feat-visual { order: 2; }
  .lx-int-grid, .lx-val-grid, .lx-tst-grid { grid-template-columns: repeat(2, 1fr); }
  .lx-price-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .lx-plan.pop { order: -1; }
  .lx-hero-phone { display: none; }
  /* Coexistence: cards stack, so the connector turns into a vertical spine and
     the checks collapse to one column with them. */
  .lx-coex { grid-template-columns: 1fr; gap: 14px; }
  .lx-coex-checks { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .lx-coex-checks > :nth-child(odd), .lx-coex-checks > :nth-child(even) { grid-column: 1; }
  .lx-coex-link { flex-direction: column; gap: 8px; }
  /* flex/min-width come from the horizontal variant — reset both or the line
     renders as an 8px stub instead of a hairline spine. */
  .lx-coex-line { flex: none; min-width: 0; width: 2px; height: 16px; background: linear-gradient(var(--line-2), var(--primary)); }
  .lx-coex-link .lx-coex-line:last-child { background: linear-gradient(var(--primary), var(--line-2)); }
}
@media (max-width: 720px) {
  .lx-sec { padding: 58px 0; }
  .lx-hero { padding: 46px 0 64px; }
  .lx-hero-shot { margin-top: 40px; }
  .lx-shot-body { grid-template-columns: 1fr; }
  .lx-shot-side { display: none; }
  .lx-shot-stats { gap: 7px; }
  .lx-shot-stat { padding: 9px 10px; border-radius: 11px; }
  .lx-shot-url { padding: 5px 12px; overflow: hidden; text-overflow: ellipsis; }
  .lx-float-tile { width: 46px; height: 46px; border-radius: 13px; }
  .lx-float-tile.t2 { inset-inline-end: -6px; }
  .lx-int-grid, .lx-val-grid, .lx-tst-grid { grid-template-columns: 1fr; }
  .lx-coex-card { padding: 22px 18px; }
  .lx-coex-cta .lx-btn { width: 100%; max-width: 340px; justify-content: center; }
  .lx-statband { grid-template-columns: 1fr; gap: 24px; padding: 30px 22px; }
  .lx-cta-card { padding: 54px 20px; }
  .lx-mcta { display: block; }
  .lx { padding-bottom: 0; }
  /* Footer: the multi-column grid overflows the viewport on phones — collapse it. */
  .lx-foot { padding: 44px 0 96px; }
  /* Single centered column — all link groups stack symmetrically on phones. */
  .lx-foot-top { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .lx-foot-tag { max-width: none; }
  /* Centered layout reads cleaner on phones. */
  .lx-foot-links { align-items: center; }
  .lx-foot-badge-row { justify-content: center; }
  .lx-foot-bottom { flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-top: 32px; }
  .lx-hero-cta .lx-btn { width: 100%; max-width: 340px; }
  .lx-ai-cta .lx-btn { width: 100%; }
  .lx-btn--lg { padding: 15px 24px; }
}
@media (max-width: 400px) {
  .lx-wrap { padding-inline: 16px; }
  .lx-shot-stat-v { font-size: 15px; }
  .lx-chip { font-size: 10px; padding: 7px 12px; }
}