/* ==========================================================================
   NEUTRON AI — UI SYSTEM (dark glass, product-first)
   One stylesheet for the marketing site, auth pages and demo pages.
   See docs/ui.md. Prefixes: hx- (shell: header, footer), lx- (page blocks).
   ========================================================================== */

:root {
  --bg: #08090a;
  --panel: #0f1011;
  --panel-2: #141516;
  --panel-3: #1b1c1e;
  --border: rgb(255 255 255 / 8%);
  --border-2: rgb(255 255 255 / 14%);
  --text: #f7f8f8;
  --text-2: #d0d6e0;
  --muted: #8a8f98;
  --dim: #62666d;

  /* Neutron gold (from the logo, #e3b76b) */
  --b1: #9a7420;
  --b2: #d4af37;
  --b3: #e3b76b;
  --b4: #f5d58a;
  --b1-rgb: 154 116 32;
  --b2-rgb: 212 175 55;
  --b3-rgb: 227 183 107;
  --b4-rgb: 245 213 138;
  --ink-rgb: 30 22 6;      /* hairlines on light bands */
  --shade-rgb: 60 40 10;   /* shadows on light bands */
  --grad: linear-gradient(100deg, var(--b2), var(--b4));
  --on-grad: #1a1200;
  --accent: var(--b4);

  --ok: #4cb782;
  --warn: #f2be5a;
  --bad: #eb5757;

  --max: 1600px;
  --gutter: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(.25, .46, .45, .94);
  --out: cubic-bezier(.16, 1, .3, 1);
  --sans: Inter, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --hx-h: 72px;
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hx-h) + 16px); }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg); color: var(--text);
  font: 400 15px/1.6 var(--sans); letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv01", "ss03";
  overflow-x: clip;
}
h1, h2, h3, h4, h5, p, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-weight: 600; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
::selection { background: rgb(var(--b2-rgb) / 40%); color: #fff; }
:focus-visible { outline: 2px solid var(--b3); outline-offset: 2px; border-radius: 4px; }
.i { width: 16px; height: 16px; flex: none; }
.mono { font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.is-muted { color: var(--muted); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.wrap--narrow { max-width: 1040px; }
.wrap--prose { max-width: 820px; }

/* ---------------------------------------------------------------- header */

.hx-head {
  position: sticky; top: 0; z-index: 50; height: var(--hx-h);
  display: flex; align-items: center; gap: 28px;
  padding: 0 max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  background: rgb(8 9 10 / 86%);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.hx-head.is-scrolled { border-bottom-color: var(--border); }
.hx-logo { display: flex; align-items: center; gap: 10px; width: auto; min-width: 96px; flex: none; }
.hx-logo img { width: 28px; height: 28px; }
.hx-logo span { font: 700 13px/1 Orbitron, var(--sans); letter-spacing: .18em; color: var(--text); white-space: nowrap; }
.hx-nav { display: flex; align-items: center; gap: 2px; }
.hx-nav > a, .hx-drop > button {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 12px; border-radius: 8px;
  font-size: 15.5px; font-weight: 500; color: var(--muted);
  transition: color .2s var(--ease);
}
.hx-nav > a:hover, .hx-nav > a.is-active, .hx-drop > button:hover, .hx-drop.is-open > button, .hx-drop.is-active > button { color: var(--text); }
.hx-drop { position: relative; }
.hx-drop > button .i { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.hx-drop.is-open > button .i { transform: rotate(180deg); }
.hx-menu {
  position: absolute; top: calc(100% + 10px); left: 0; width: 280px; padding: 6px;
  border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border-2);
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 70%), 0 0 0 1px rgb(0 0 0 / 30%);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.hx-drop.is-open .hx-menu { opacity: 1; transform: none; pointer-events: auto; }
.hx-menu a {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px;
  border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text-2);
}
.hx-menu a:hover { background: rgb(255 255 255 / 5%); color: var(--text); }
.hx-menu a > .i:first-child { color: var(--accent); }
.hx-menu a em { font-style: normal; font-size: 11px; color: var(--accent); }
.hx-menu a .i:last-child { margin-left: auto; width: 14px; height: 14px; color: var(--dim); }
.hx-menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 6px; }
.hx-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hx-lang { padding: 8px 10px; font-size: 14px; font-weight: 500; color: var(--muted); border-radius: 8px; }
.hx-lang:hover { color: var(--text); }
.hx-signin { padding: 8px 10px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.hx-signin:hover { color: var(--text); }
.hx-burger { display: none; width: 40px; height: 40px; position: relative; border-radius: 8px; }
.hx-burger i { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform .3s var(--out), top .3s var(--out); }
.hx-burger i:first-child { top: 16px; }
.hx-burger i:last-child { top: 23px; }
.hx-burger.is-open i:first-child { top: 19.5px; transform: rotate(45deg); }
.hx-burger.is-open i:last-child { top: 19.5px; transform: rotate(-45deg); }
.hx-sheet {
  position: fixed; inset: var(--hx-h) 0 0; z-index: 49; overflow-y: auto;
  padding: 12px var(--gutter) 40px; background: rgb(8 9 10 / 97%);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease);
}
.hx-sheet.is-open { opacity: 1; pointer-events: auto; }
.hx-sheet a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-size: 18px; font-weight: 500; border-bottom: 1px solid var(--border); color: var(--text-2); }
.hx-sheet a.is-sub { padding-left: 16px; font-size: 16px; color: var(--muted); }
.hx-sheet .lx-actions { margin-top: 24px; }

@media (max-width: 1023px) {
  .hx-nav, .hx-signin, .hx-right .lx-btn { display: none; }
  .hx-burger { display: block; }
}

/* ---------------------------------------------------------------- footer */

.hx-foot { border-top: 1px solid var(--border); padding: 72px 0 32px; background: var(--bg); position: relative; z-index: 1; }
.hx-foot__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; }
.hx-foot__brand { grid-column: 1 / -1; }
.hx-foot__brand p { margin-top: 14px; color: var(--muted); font-size: 14px; max-width: 340px; }
.hx-foot h4 { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 14px; }
.hx-foot__col a { display: block; font-size: 14px; color: var(--muted); padding: 4px 0; transition: color .2s var(--ease); }
.hx-foot__col a:hover { color: var(--text); }
.hx-foot__legal {
  margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--dim);
}
.hx-foot__legal a:hover { color: var(--text-2); }
.hx-foot__slogan { text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; }
@media (min-width: 760px) {
  .hx-foot__grid { grid-template-columns: 1.6fr repeat(4, 1fr); }
  .hx-foot__brand { grid-column: auto; }
}

/* ---------------------------------------------------------------- bands */

.band { position: relative; overflow: clip; padding: clamp(104px, 12vw, 176px) 0; isolation: isolate; background: var(--bg); }
.band + .band { border-top: 1px solid var(--border); }
.band--tall { display: flex; min-height: 100vh; align-items: center; padding: clamp(120px, 14vw, 200px) 0; }
.band--tall > .wrap { flex: 1; }

.band--hero {
  padding: clamp(72px, 10vw, 140px) 0 0;
  background: radial-gradient(1200px 640px at 50% -10%, rgb(var(--b2-rgb) / 16%), transparent 60%), var(--bg);
}
.band--glass {
  padding: 48px 0;
  background: linear-gradient(180deg, rgb(255 255 255 / 3%), rgb(255 255 255 / 1%));
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.band--charcoal { background: linear-gradient(180deg, #0d0e10, #121417); }
.band--glow {
  background:
    radial-gradient(900px 600px at 100% 0%, rgb(var(--b2-rgb) / 12%), transparent 60%),
    radial-gradient(800px 600px at 0% 100%, rgb(var(--b3-rgb) / 9%), transparent 60%),
    #0a0a09;
}
.band--grid {
  background:
    linear-gradient(180deg, transparent 55%, rgb(var(--b2-rgb) / 9%)),
    linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--bg);
}
.band--deep {
  --text-2: rgb(246 236 214 / 86%);
  --muted: rgb(246 236 214 / 66%);
  --border: rgb(255 230 170 / 12%);
  background:
    radial-gradient(1000px 500px at 50% 115%, rgb(var(--b4-rgb) / 26%), transparent 65%),
    linear-gradient(180deg, #120d03, #22180a 55%, #33240c);
}
.band--deep .lx-text, .band--deep .lx-head p { color: rgb(246 236 214 / 78%); }
.band--noise { background: radial-gradient(700px 500px at 0% 0%, rgb(var(--b2-rgb) / 10%), transparent 60%), #0b0b0c; }
.band--noise::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .06; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.band--finale { background: var(--bg); text-align: center; }

/* Light bands: redefine the tokens, every component adapts. */
.band--light, .band--soft {
  --bg: #f7f6f2; --panel: rgb(255 255 255 / 72%); --panel-2: rgb(255 255 255 / 90%); --panel-3: #fff;
  --border: rgb(var(--ink-rgb) / 9%); --border-2: rgb(var(--ink-rgb) / 15%);
  --text: #121009; --text-2: #2f2a1f; --muted: #6a6352; --dim: #978f7c;
  --accent: var(--b1);
  color: var(--text);
  background:
    radial-gradient(900px 500px at 15% 0%, rgb(var(--b4-rgb) / 30%), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgb(var(--b2-rgb) / 16%), transparent 60%),
    linear-gradient(180deg, #faf9f6, #f1eee6);
}
.band--soft { background: radial-gradient(1000px 600px at 50% 0%, rgb(var(--b4-rgb) / 26%), transparent 65%), linear-gradient(180deg, #f6f4ee, #fbfaf7); }
.band--light + .band, .band + .band--light, .band--soft + .band, .band + .band--soft { border-top-color: transparent; }

/* Aurora */
.lx-aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.lx-aurora i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; animation: lx-drift 18s ease-in-out infinite alternate; }
.lx-aurora i:nth-child(1) { width: 46vw; height: 46vw; left: 6%; top: -30%; background: rgb(var(--b2-rgb) / 34%); }
.lx-aurora i:nth-child(2) { width: 38vw; height: 38vw; right: 4%; top: -18%; background: rgb(var(--b1-rgb) / 40%); animation-duration: 22s; animation-direction: alternate-reverse; }
.lx-aurora i:nth-child(3) { width: 30vw; height: 30vw; left: 38%; top: 6%; background: rgb(var(--b4-rgb) / 18%); animation-duration: 26s; }
.lx-aurora--low i:nth-child(1) { top: auto; bottom: -40%; }
.lx-aurora--low i:nth-child(2) { top: auto; bottom: -34%; }
.lx-aurora--low i:nth-child(3) { top: auto; bottom: -20%; }
@keyframes lx-drift { to { transform: translate(6vw, 4vw) scale(1.15); } }

/* ---------------------------------------------------------------- glass */

.glass {
  border: 1px solid rgb(255 255 255 / 10%);
  background: linear-gradient(160deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 2%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 20px 50px -30px rgb(0 0 0 / 60%);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
}
.band--light .glass, .band--soft .glass {
  border-color: rgb(255 255 255 / 80%);
  background: linear-gradient(160deg, rgb(255 255 255 / 85%), rgb(255 255 255 / 55%));
  box-shadow: inset 0 1px 0 #fff, 0 24px 50px -30px rgb(var(--shade-rgb) / 25%);
}

/* ---------------------------------------------------------------- type */

.lx-h1 { font-size: clamp(42px, 6.4vw, 88px); line-height: 1.06; letter-spacing: -.034em; font-weight: 600; }
.lx-h2 { font-size: clamp(36px, 5.2vw, 72px); line-height: 1.06; letter-spacing: -.034em; font-weight: 600; }
.lx-h2--split { font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -.035em; }
.lx-h1 span, .lx-h2 span.l2, .lx-h2 > .l2 { display: block; }
.l2 { color: var(--muted); }
.lx-lead { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; color: var(--text-2); }
.lx-text { font-size: 17px; line-height: 1.6; color: var(--muted); }
.lx-eyebrow { display: inline-block; font-size: clamp(16px, 1.4vw, 20px); font-weight: 600; letter-spacing: -.01em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.band--light .lx-eyebrow, .band--soft .lx-eyebrow { background: linear-gradient(100deg, var(--b1), var(--b2)); -webkit-background-clip: text; background-clip: text; }

/* Centred head */
.lx-head { text-align: center; max-width: 1100px; margin: 0 auto clamp(56px, 7vw, 96px); }
.lx-head > p { max-width: 640px; margin: 22px auto 0; font-size: 17px; color: var(--muted); }
.lx-label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.lx-label .i { width: 14px; height: 14px; color: var(--accent); }
a.lx-label:hover { color: var(--text); }
a.lx-label .i:last-child { color: var(--muted); }

/* ---------------------------------------------------------------- buttons, small parts */

.lx-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lx-head .lx-actions, .lx-center .lx-actions { justify-content: center; }
.lx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid transparent;
  font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), filter .2s var(--ease);
}
.lx-btn .i { width: 14px; height: 14px; }
.lx-btn--primary { background: var(--grad); color: var(--on-grad); box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%); }
.lx-btn--primary:hover { filter: brightness(1.08); }
.lx-btn--ghost { border-color: var(--border-2); background: rgb(255 255 255 / 3%); color: var(--text); }
.lx-btn--ghost:hover { background: rgb(255 255 255 / 7%); border-color: rgb(255 255 255 / 22%); }
.band--light .lx-btn--ghost, .band--soft .lx-btn--ghost { background: rgb(255 255 255 / 60%); }
.lx-btn--lg { height: 46px; padding: 0 20px; font-size: 15px; }
.lx-btn--sm { height: 34px; padding: 0 12px; font-size: 13px; }
.lx-btn--block { width: 100%; }
.lx-btn[disabled] { opacity: .55; pointer-events: none; }

.lx-more { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--text-2); transition: color .2s var(--ease); }
.lx-more .i { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.lx-more:hover { color: var(--text); }
.lx-more:hover .i { transform: translateX(2px); }

.lx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lx-center .lx-chips, .lx-head .lx-chips { justify-content: center; }
.lx-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 980px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.lx-chip .i { width: 14px; height: 14px; color: var(--accent); }
.lx-chip em { font-style: normal; font-size: 11px; color: var(--accent); }
a.lx-chip { transition: border-color .2s var(--ease), color .2s var(--ease); }
a.lx-chip:hover { color: var(--text); border-color: rgb(255 255 255 / 22%); }

.lx-badges { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.lx-badge { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 980px; font-size: 15px; color: var(--text-2); }
.lx-badge .i { width: 18px; height: 18px; color: var(--accent); }

.lx-tiles { display: grid; gap: 20px; grid-template-columns: 1fr; }
.lx-tile { padding: 36px 28px; border-radius: 20px; text-align: center; transition: transform .4s var(--out), border-color .3s var(--ease); }
.lx-tile:hover { transform: translateY(-4px); border-color: rgb(255 255 255 / 20%); }
.lx-ico {
  width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 22px;
  display: grid; place-items: center; color: var(--accent);
  background: linear-gradient(140deg, rgb(var(--b2-rgb) / 25%), rgb(var(--b4-rgb) / 8%));
  border: 1px solid rgb(var(--b4-rgb) / 18%);
}
.lx-ico .i { width: 26px; height: 26px; }
.lx-ico--sm { width: 44px; height: 44px; border-radius: 12px; margin: 0 0 18px; }
.lx-ico--sm .i { width: 20px; height: 20px; }
.lx-tile h3, .lx-card h3 { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.lx-tile p, .lx-card p { margin-top: 8px; font-size: 14.5px; color: var(--muted); }
@media (min-width: 700px) { .lx-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .lx-tiles--3 { grid-template-columns: repeat(3, 1fr); } .lx-tiles--4 { grid-template-columns: repeat(4, 1fr); } }

.lx-cards { display: grid; gap: 20px; grid-template-columns: 1fr; }
.lx-card { padding: 32px; border-radius: 20px; transition: transform .4s var(--out), border-color .3s var(--ease); }
a.lx-card:hover { transform: translateY(-3px); border-color: rgb(255 255 255 / 20%); }
.lx-card .lx-more { margin-top: 20px; }
@media (min-width: 760px) { .lx-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .lx-cards--3 { grid-template-columns: repeat(3, 1fr); } }

.lx-stats { display: grid; grid-template-columns: repeat(2, 1fr); }
.lx-stat { padding: 8px 24px; text-align: center; border-left: 1px solid var(--border); }
.lx-stat:nth-child(2n+1) { border-left: 0; }
.lx-stat b { display: block; font-size: clamp(36px, 4.4vw, 60px); line-height: 1; font-weight: 600; letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.band--light .lx-stat b, .band--soft .lx-stat b { background: linear-gradient(100deg, var(--b1), var(--b2)); -webkit-background-clip: text; background-clip: text; }
.lx-stat span { display: block; margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.lx-stats--left .lx-stat { text-align: left; padding-left: 0; padding-right: 24px; border: 0 !important; margin-top: 0 !important; }
@media (max-width: 899px) { .lx-stats > .lx-stat:nth-child(n+3) { margin-top: 28px; } }
@media (min-width: 900px) {
  .lx-stats { grid-template-columns: repeat(4, 1fr); }
  .lx-stat:nth-child(2n+1) { border-left: 1px solid var(--border); }
  .lx-stat:first-child { border-left: 0; }
}

.lx-ticks { display: grid; gap: 12px; }
.lx-ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-2); font-size: 15.5px; }
.lx-ticks .i { width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }

.lx-know { max-width: 760px; margin: 48px auto 0; border-radius: 16px; }
.lx-know summary { list-style: none; cursor: pointer; padding: 18px 24px; text-align: center; font-size: 15px; font-weight: 500; color: var(--text-2); }
.lx-know summary::-webkit-details-marker { display: none; }
.lx-know summary::after { content: " +"; color: var(--muted); }
.lx-know[open] summary::after { content: " –"; }
.lx-know ul { padding: 0 28px 24px; display: grid; gap: 10px; }
.lx-know li { position: relative; padding-left: 18px; font-size: 14.5px; color: var(--muted); }
.lx-know li::before { content: "–"; position: absolute; left: 0; color: var(--dim); }

/* FAQ (details list) */
.lx-faq { max-width: 880px; margin: 0 auto; display: grid; gap: 10px; }
.lx-faq details { border-radius: 14px; }
.lx-faq summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; justify-content: space-between; gap: 16px; font-size: 16px; font-weight: 500; }
.lx-faq summary::-webkit-details-marker { display: none; }
.lx-faq summary .i { color: var(--muted); transition: transform .3s var(--out); margin-top: 3px; }
.lx-faq details[open] summary .i { transform: rotate(180deg); }
.lx-faq details p { padding: 0 24px 22px; color: var(--muted); font-size: 15px; }

/* ---------------------------------------------------------------- layouts */

.lx-center { text-align: center; }
.lx-split { display: grid; gap: 56px; align-items: center; }
.lx-split > * { min-width: 0; }
@media (min-width: 1000px) {
  .lx-split { grid-template-columns: .8fr 1.2fr; gap: 72px; }
  .lx-split.is-flip { grid-template-columns: 1.2fr .8fr; }
  .lx-split.is-flip > :first-child { order: 2; }
}
.lx-copy > * + * { margin-top: 24px; }
.lx-copy .lx-actions, .lx-copy .lx-chips { margin-top: 32px; }

/* ---------------------------------------------------------------- hero */

.lx-hero { text-align: center; }
.lx-hero .lx-eyebrow { margin-bottom: 18px; }
.lx-hero .lx-chips { justify-content: center; margin-top: 32px; }
.lx-hero .lx-lead { max-width: 620px; margin: 22px auto 0; }
.lx-hero .lx-actions { justify-content: center; margin-top: 32px; }
.lx-back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; margin-bottom: 26px; border-radius: 980px; font-size: 13px; color: var(--text-2); }
.lx-back .i { width: 14px; height: 14px; }
.lx-back:hover { color: var(--text); }
.lx-stage { position: relative; margin-top: clamp(56px, 7vw, 88px); perspective: 1600px; }
.lx-stage::before {
  content: ""; position: absolute; inset: 8% 10% auto; height: 70%; z-index: -1;
  background: radial-gradient(closest-side, rgb(var(--b2-rgb) / 30%), transparent);
  filter: blur(40px);
}
.lx-stage--fade { -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); }
.lx-tilt {
  --p: 0;
  transform: rotateX(calc((1 - var(--p)) * 22deg)) translateY(calc((1 - var(--p)) * 60px)) scale(calc(.9 + var(--p) * .1));
  transform-origin: 50% 0; will-change: transform;
}

/* ---------------------------------------------------------------- marquee */

.lx-marquee-cap { text-align: center; font-size: 13.5px; color: var(--muted); margin-bottom: 22px; }
.lx-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.lx-marquee__track { display: flex; width: max-content; animation: lx-marquee 40s linear infinite; }
.lx-marquee__track span { padding: 0 clamp(24px, 3vw, 44px); font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; letter-spacing: -.02em; color: var(--dim); white-space: nowrap; }
@keyframes lx-marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- pipeline */

.lx-pipe { --p: 0; position: relative; display: grid; gap: 28px; padding-left: 36px; max-width: 1240px; margin: 0 auto; }
.lx-pipe::before, .lx-pipe::after { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; }
.lx-pipe::before { background: var(--border-2); }
.lx-pipe::after { background: var(--grad); transform-origin: top; transform: scaleY(var(--p)); }
.lx-pipe__step { position: relative; }
.lx-pipe__dot {
  position: absolute; left: -36px; top: 2px; width: 24px; height: 24px; border-radius: 50%; z-index: 1;
  display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--border-2);
  transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.lx-pipe__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); transition: background .4s var(--ease); }
.lx-pipe__step.is-lit .lx-pipe__dot { border-color: var(--b3); box-shadow: 0 0 0 5px rgb(var(--b2-rgb) / 16%), 0 0 22px rgb(var(--b4-rgb) / 45%); }
.lx-pipe__step.is-lit .lx-pipe__dot::after { background: var(--b4); }
.band--light .lx-pipe__step.is-lit .lx-pipe__dot::after, .band--soft .lx-pipe__step.is-lit .lx-pipe__dot::after { background: var(--b2); }
.lx-pipe__step h3 { font-size: 17px; font-weight: 600; transition: color .4s var(--ease); }
.lx-pipe__step p { margin-top: 6px; font-size: 14px; color: var(--muted); }
.lx-pipe__step:not(.is-lit) h3 { color: var(--muted); }
@media (min-width: 900px) {
  .lx-pipe { grid-auto-flow: column; grid-auto-columns: 1fr; padding: 40px 0 0; gap: 24px; text-align: center; }
  .lx-pipe::before, .lx-pipe::after { left: 10%; right: 10%; top: 11px; bottom: auto; width: auto; height: 2px; }
  .lx-pipe::after { transform-origin: left; transform: scaleX(var(--p)); }
  .lx-pipe__dot { left: 50%; top: -40px; margin-left: -12px; }
  .lx-pipe--loop::before { border-radius: 2px; }
}

/* ---------------------------------------------------------------- app window */

.lx-win {
  --wr: 14px;
  position: relative; display: flex; overflow: hidden; text-align: left;
  border-radius: var(--wr); border: 1px solid rgb(255 255 255 / 10%);
  background: linear-gradient(160deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 2%)), rgb(15 16 17 / 72%);
  -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), 0 50px 100px -30px rgb(0 0 0 / 70%);
  color: #f7f8f8; font-size: 13px; line-height: 1.45; letter-spacing: -.005em;
  min-height: 420px;
  /* Windows always use dark tokens, even on light bands. */
  --text: #f7f8f8; --text-2: #d0d6e0; --muted: #8a8f98; --dim: #62666d;
  --border: rgb(255 255 255 / 8%); --border-2: rgb(255 255 255 / 14%); --accent: var(--b4);
}
.band--light .lx-win, .band--soft .lx-win { background: linear-gradient(160deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 1%)), rgb(14 14 13 / 94%); box-shadow: 0 50px 100px -40px rgb(var(--shade-rgb) / 45%); }
.lx-win--sm { min-height: 340px; }
.lx-win--tall { min-height: 540px; }
.lx-win__live {
  position: absolute; top: 10px; right: 12px; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 980px;
  background: rgb(8 9 10 / 72%); border: 1px solid rgb(255 255 255 / 10%);
  font-size: 12px; font-weight: 500; color: var(--text-2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lx-win__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); animation: lx-blink 1.4s ease-in-out infinite; }
@keyframes lx-blink { 50% { opacity: .25; } }
.lx-win__side { width: 196px; flex: none; padding: 14px 10px; border-right: 1px solid var(--border); background: rgb(0 0 0 / 18%); display: flex; flex-direction: column; gap: 2px; }
.lx-win__ws { display: flex; align-items: center; gap: 8px; padding: 4px 8px 14px; font-weight: 600; font-size: 13px; }
.lx-win__ws b { width: 20px; height: 20px; border-radius: 6px; background: var(--grad); flex: none; }
.lx-win__nav { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 7px; color: var(--muted); font-size: 13px; }
.lx-win__nav .i { width: 15px; height: 15px; }
.lx-win__nav em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--dim); }
.lx-win__nav.is-on { background: rgb(255 255 255 / 6%); color: var(--text); }
.lx-win__nav.is-on .i { color: var(--accent); }
.lx-win__sec { padding: 14px 8px 6px; font-size: 11px; color: var(--dim); }
.lx-win__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lx-win__head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; padding-right: 120px; border-bottom: 1px solid var(--border); color: var(--text-2); font-weight: 500; min-height: 46px; }
.lx-win__head .i { width: 15px; height: 15px; color: var(--muted); }
.lx-win__head small { color: var(--dim); font-weight: 400; font-size: 12px; }
.lx-win__body { flex: 1; min-height: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.lx-win__cols { display: grid; grid-template-columns: 1fr 1fr; flex: 1; min-height: 0; }
.lx-win__cols > * { min-width: 0; }
.lx-win__cols > * + * { border-left: 1px solid var(--border); }
@media (max-width: 760px) {
  .lx-win__side { display: none; }
  .lx-win__cols { grid-template-columns: 1fr; }
  .lx-win__cols > .lx-hide-sm { display: none; }
}

/* Inner parts */
.lx-row { display: grid; grid-template-columns: var(--cols, 1.4fr 1fr .8fr); gap: 12px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.lx-row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-row > .lx-pill, .lx-row > .swap { justify-self: start; }
.lx-row--head { padding-top: 0; font-size: 11.5px; color: var(--dim); }
.lx-row b { font-weight: 500; color: var(--text); }
.lx-row small { display: block; font-size: 11.5px; color: var(--dim); }
.lx-id { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.lx-pill { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px; border-radius: 980px; font-size: 11.5px; font-weight: 500; white-space: nowrap; background: rgb(255 255 255 / 7%); color: var(--text-2); transition: background .4s var(--ease), color .4s var(--ease); }
.lx-pill--brand { background: rgb(var(--b2-rgb) / 16%); color: var(--b4); }
.lx-pill--green { background: rgb(76 183 130 / 16%); color: #7fd6a9; }
.lx-pill--amber { background: rgb(242 190 90 / 16%); color: var(--warn); }
.lx-pill--red { background: rgb(235 87 87 / 16%); color: #f28b8b; }
.lx-fit { height: 4px; border-radius: 4px; background: rgb(255 255 255 / 8%); overflow: hidden; }
.lx-fit i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: 4px; transition: width .9s var(--out); }
.lx-fit.is-in i, .is-in > .lx-fit i, .is-in .lx-fit i { width: var(--w, 70%); }
.lx-msg { max-width: 86%; padding: 10px 13px; border-radius: 12px; font-size: 13px; }
.lx-msg--in { align-self: flex-start; background: rgb(var(--b2-rgb) / 13%); border: 1px solid rgb(var(--b2-rgb) / 16%); color: var(--text); border-bottom-left-radius: 4px; }
.lx-msg--out { align-self: flex-end; background: rgb(255 255 255 / 8%); color: var(--text); border-bottom-right-radius: 4px; }
.lx-msg--ai { align-self: flex-start; background: rgb(255 255 255 / 3%); border: 1px solid var(--border-2); color: var(--text-2); }
.lx-msg__by { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 11.5px; font-weight: 600; color: var(--b4); }
.lx-msg__by .i { width: 12px; height: 12px; }
.lx-srcs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lx-src { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; background: rgb(255 255 255 / 5%); border: 1px solid var(--border); font-size: 11.5px; color: var(--muted); }
.lx-src .i { width: 12px; height: 12px; }
.lx-prods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.lx-prod { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: rgb(255 255 255 / 3%); }
.lx-prod__img { height: 64px; background: linear-gradient(135deg, rgb(var(--b2-rgb) / 30%), rgb(255 255 255 / 4%)); display: grid; place-items: center; color: rgb(var(--b4-rgb) / 70%); }
.lx-prod__img .i { width: 22px; height: 22px; }
.lx-prod__bd { padding: 8px 10px; }
.lx-prod__bd b { display: block; font-size: 12.5px; font-weight: 600; }
.lx-prod__bd span { font-size: 11.5px; color: var(--muted); }
.lx-typing { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.lx-typing i { display: inline-flex; gap: 3px; }
.lx-typing i::before, .lx-typing i::after, .lx-typing b { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--b4); animation: lx-dot 1.2s infinite; }
.lx-typing b { animation-delay: .15s; }
.lx-typing i::after { animation-delay: .3s; }
@keyframes lx-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.lx-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--b4); animation: lx-caret 1s steps(1) infinite; }
@keyframes lx-caret { 50% { opacity: 0; } }
.lx-skel { height: 8px; border-radius: 4px; background: rgb(255 255 255 / 9%); transform-origin: left; transform: scaleX(0); transition: transform .7s var(--out); }
.lx-skel.is-in { transform: scaleX(1); }
.lx-field { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 8px; background: rgb(255 255 255 / 4%); border: 1px solid var(--border-2); color: var(--text); font-size: 13px; }
.lx-field .i { width: 14px; height: 14px; color: var(--muted); }
.lx-field small { color: var(--dim); margin-right: 4px; }
.lx-kv { display: grid; grid-template-columns: 96px 1fr; gap: 6px 12px; font-size: 12.5px; }
.lx-kv dt { color: var(--dim); }
.lx-kv dd { margin: 0; color: var(--text); min-height: 1.4em; }
.lx-ui-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 7px; background: var(--grad); color: var(--on-grad); font-size: 12.5px; font-weight: 600; transition: transform .2s var(--ease), box-shadow .2s var(--ease); align-self: flex-start; }
.lx-ui-btn .i { width: 13px; height: 13px; }
.lx-ui-btn--ghost { background: rgb(255 255 255 / 7%); color: var(--text); border: 1px solid var(--border-2); }
.lx-ui-btn.is-press { transform: scale(.94); box-shadow: 0 0 0 4px rgb(var(--b2-rgb) / 35%); }
.lx-event { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgb(76 183 130 / 10%); border: 1px solid rgb(76 183 130 / 24%); font-size: 12.5px; color: #a6e3c4; }
.lx-event .i { width: 15px; height: 15px; color: var(--ok); }
.lx-event--brand { background: rgb(var(--b2-rgb) / 10%); border-color: rgb(var(--b2-rgb) / 26%); color: var(--b4); }
.lx-event--brand .i { color: var(--b4); }
.lx-event--bad { background: rgb(235 87 87 / 10%); border-color: rgb(235 87 87 / 26%); color: #f4a6a6; }
.lx-event--bad .i { color: var(--bad); }
.lx-toast { position: absolute; right: 16px; bottom: 16px; z-index: 4; }
.lx-stamp {
  position: absolute; z-index: 4; padding: 6px 14px; border: 2px solid var(--ok); border-radius: 8px;
  color: var(--ok); font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
  background: rgb(8 9 10 / 70%); transform: rotate(-10deg) scale(1.8); opacity: 0;
  transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), opacity .2s var(--ease);
}
.lx-stamp.is-in { opacity: 1; transform: rotate(-10deg) scale(1); }
.lx-ring { --v: 0; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--b3) calc(var(--v) * 1%), rgb(255 255 255 / 8%) 0); transition: --v 1s var(--out); position: relative; flex: none; }
.lx-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #121212; }
.lx-ring b { position: relative; font-size: 20px; font-weight: 600; }
@property --v { syntax: "<number>"; inherits: true; initial-value: 0; }
.lx-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dim); transition: color .4s var(--ease); }
.lx-check .i { width: 14px; height: 14px; }
.lx-check.is-in { color: var(--text-2); }
.lx-check.is-in .i { color: var(--ok); }
.lx-bar { display: flex; align-items: flex-end; gap: 6px; height: 90px; }
.lx-bar i { flex: 1; height: 0; border-radius: 4px 4px 0 0; background: rgb(255 255 255 / 10%); transition: height .9s var(--out); }
.lx-bar i.b { background: var(--grad); }
.lx-bar.is-in i { height: var(--h, 50%); }
.lx-prog { height: 6px; border-radius: 6px; background: rgb(255 255 255 / 8%); overflow: hidden; }
.lx-prog i { display: block; height: 100%; width: var(--pw, 0%); background: var(--grad); transition: width .7s var(--out); }
.lx-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 11.5px; font-weight: 600; background: rgb(255 255 255 / 10%); color: var(--text); }
.lx-avatar--brand { background: var(--grad); color: var(--on-grad); }
.lx-flex { display: flex; align-items: center; gap: 10px; }
.lx-flex--between { justify-content: space-between; }
.lx-grow-1 { flex: 1; min-width: 0; }
.lx-sm { font-size: 11.5px; color: var(--dim); }

.lx-thread { justify-content: flex-end; }
.lx-conv { display: flex; gap: 10px; padding: 10px; border-radius: 8px; transition: background .4s var(--ease); }
.lx-conv.is-on { background: rgb(255 255 255 / 6%); }
.lx-conv > div { min-width: 0; flex: 1; }
.lx-conv b { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 500; }
.lx-conv b small { font-weight: 400; color: var(--dim); font-size: 11px; }
.lx-conv > div > span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-cal { display: grid; grid-template-columns: repeat(var(--days, 7), minmax(0, 1fr)); gap: 6px; flex: 1; }
.lx-cal__day { display: flex; flex-direction: column; gap: 6px; padding: 8px 6px; border-radius: 8px; background: rgb(255 255 255 / 3%); border: 1px solid var(--border); min-height: 150px; }
.lx-cal__day > small { font-size: 11px; color: var(--dim); }
.lx-post { padding: 7px; border-radius: 7px; background: rgb(255 255 255 / 6%); border: 1px solid var(--border); font-size: 11px; line-height: 1.35; }
.lx-post b { display: block; font-weight: 500; color: var(--text-2); margin-bottom: 5px; }
.lx-post .lx-pill { height: 18px; font-size: 10.5px; padding: 0 6px; }
.lx-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; margin-top: 8px; }
.lx-gallery i { aspect-ratio: 1; border-radius: 7px; background: linear-gradient(135deg, rgb(var(--b2-rgb) / 35%), rgb(255 255 255 / 5%)); }
.lx-gallery i:nth-child(2) { background: linear-gradient(200deg, rgb(var(--b1-rgb) / 50%), rgb(255 255 255 / 4%)); }
.lx-gallery i:nth-child(3) { background: linear-gradient(20deg, rgb(var(--b4-rgb) / 30%), rgb(255 255 255 / 4%)); }
.lx-opts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.lx-opts span { padding: 4px 9px; border-radius: 980px; border: 1px solid var(--border-2); font-size: 11.5px; color: var(--muted); transition: all .3s var(--ease); }
.lx-opts span.is-on { border-color: var(--b3); color: var(--b4); background: rgb(var(--b2-rgb) / 12%); }
.lx-hbar { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-size: 12px; color: var(--text-2); }
.lx-hbar .lx-fit { grid-column: 1 / -1; }
.lx-counters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.lx-counters div { padding: 12px; border-radius: 10px; background: rgb(255 255 255 / 4%); border: 1px solid var(--border); }
.lx-counters b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.lx-counters span { font-size: 11.5px; color: var(--dim); }

/* Demo engine states: elements with data-at get .is-in once step >= data-at. */
.pop { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .55s var(--out); }
.pop.is-in { opacity: 1; transform: none; }
.grow { opacity: 0; max-height: 0; overflow: hidden; transition: opacity .45s var(--ease), max-height .55s var(--out), padding .55s var(--out), margin .55s var(--out); }
.grow.is-in { opacity: 1; max-height: 240px; }
.grow:not(.is-in) { padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important; border-width: 0 !important; }
.fade { opacity: 0; transition: opacity .45s var(--ease); }
.fade.is-in { opacity: 1; }
.swap > * { display: none; }
.swap > .is-in:not(.is-out) { display: inline-flex; }
.is-out.pop, .is-out.fade, .is-out.grow { opacity: 0; }
.is-out.grow { max-height: 0; }
.is-reset, .is-reset * { transition: none !important; }

/* ---------------------------------------------------------------- sticky modules */

.lx-sticky { display: grid; gap: 64px; }
.lx-sticky > * { min-width: 0; }
.lx-sticky__copy > * + * { margin-top: 24px; }
.lx-mods { margin-top: 40px !important; display: grid; gap: 4px; }
.lx-mod { position: relative; display: block; padding: 14px 0 14px 22px; opacity: .55; transition: opacity .4s var(--ease); cursor: pointer; text-align: left; width: 100%; }
.lx-mod::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--border-2); transition: background .4s var(--ease); }
.lx-mod b { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; color: var(--text); }
.lx-mod b .i { width: 18px; height: 18px; color: var(--accent); }
.lx-mod b em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--accent); }
.lx-mod p { max-height: 0; overflow: hidden; margin-top: 0; font-size: 15px; color: var(--muted); transition: max-height .5s var(--out), margin .5s var(--out); }
.lx-mod.is-active { opacity: 1; }
.lx-mod.is-active::before { background: var(--grad); }
.lx-mod.is-active p { max-height: 120px; margin-top: 8px; }
.lx-sticky__wins { display: grid; gap: 14vh; }
.lx-sticky__wins > * { opacity: .35; transform: scale(.94); transition: opacity .6s var(--ease), transform .8s var(--out); }
.lx-sticky__wins > .is-active { opacity: 1; transform: none; }
@media (min-width: 1000px) {
  .lx-sticky { grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
  .lx-sticky__copy { position: sticky; top: 12vh; }
  .lx-sticky__wins { padding: 6vh 0 10vh; }
}

/* ---------------------------------------------------------------- layered art (phone + dashboard) */

.lx-layers { position: relative; min-height: 560px; }
.lx-layers > .lx-win { position: absolute; left: 0; top: 0; width: 86%; }
.lx-phone {
  position: absolute; right: 2%; bottom: 0; width: 248px; height: 500px; z-index: 2;
  border-radius: 40px; padding: 10px; background: #0d0d0c; border: 1px solid rgb(255 255 255 / 14%);
  box-shadow: 0 50px 90px -30px rgb(30 20 0 / 55%), inset 0 0 0 1px rgb(255 255 255 / 4%);
  color: #f7f8f8; --text: #f7f8f8; --text-2: #d0d6e0; --muted: #8a8f98; --dim: #62666d; --border: rgb(255 255 255 / 8%); --border-2: rgb(255 255 255 / 14%); --accent: var(--b4);
}
.lx-phone__screen { height: 100%; border-radius: 31px; overflow: hidden; background: #121211; display: flex; flex-direction: column; font-size: 12.5px; position: relative; }
.lx-phone__notch { position: absolute; top: 8px; left: 50%; width: 76px; height: 20px; margin-left: -38px; border-radius: 20px; background: #000; z-index: 3; }
.lx-phone__bar { display: flex; align-items: center; gap: 8px; padding: 38px 14px 12px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; }
.lx-phone__body { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.lx-phone .lx-msg { font-size: 12px; max-width: 92%; }
.lx-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; font-size: 13.5px; font-weight: 500; color: var(--text); animation: lx-bob 6s ease-in-out infinite; }
.lx-float .i { width: 18px; height: 18px; color: var(--accent); }
.lx-float:nth-of-type(2) { animation-delay: -2s; }
.lx-float:nth-of-type(3) { animation-delay: -4s; }
@keyframes lx-bob { 50% { transform: translateY(-10px); } }
.lx-parallax { --p: .5; transform: translateY(calc((.5 - var(--p)) * 80px)); }
@media (max-width: 760px) {
  .lx-layers { min-height: 0; display: flex; justify-content: center; }
  .lx-layers > .lx-win, .lx-float { display: none; }
  .lx-phone { position: relative; right: auto; }
}

/* ---------------------------------------------------------------- data-flow diagram */

.lx-flow { position: relative; padding: 56px clamp(16px, 3vw, 40px) 80px; border: 1.5px dashed rgb(var(--b4-rgb) / 32%); border-radius: 28px; }
.lx-flow__tag { position: absolute; top: -13px; left: 32px; padding: 2px 12px; font-size: 13px; font-weight: 500; color: var(--b4); background: #1a1306; border-radius: 980px; }
.band:not(.band--deep) .lx-flow__tag { background: var(--bg); }
.lx-flow__grid { display: grid; gap: 28px; justify-items: center; }
.lx-flow__col { display: grid; gap: 12px; width: 100%; max-width: 300px; }
.lx-flow__node { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 14px; color: var(--text-2); }
.lx-flow__node .i { width: 16px; height: 16px; color: var(--accent); }
.lx-flow__cap { font-size: 12px; color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: .08em; }
.lx-gate { position: relative; overflow: hidden; }
.lx-gate::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%; background: linear-gradient(90deg, transparent, rgb(var(--b4-rgb) / 22%), transparent); animation: lx-sweep 3.2s var(--ease) infinite; animation-delay: var(--d, 0s); }
@keyframes lx-sweep { 0%, 30% { left: -40%; } 70%, 100% { left: 110%; } }
.lx-gate__light { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 8px var(--warn); animation: lx-gate 3.2s steps(1) infinite; animation-delay: var(--d, 0s); }
@keyframes lx-gate { 0% { background: var(--warn); box-shadow: 0 0 8px var(--warn); } 55% { background: var(--ok); box-shadow: 0 0 10px var(--ok); } }
.lx-core { position: relative; width: 130px; height: 130px; display: grid; place-items: center; margin: 12px 0; }
.lx-core__orb { width: 82px; height: 82px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3cf, var(--b3) 45%, var(--b1)); box-shadow: 0 0 60px rgb(var(--b4-rgb) / 50%); display: grid; place-items: center; }
.lx-core__orb img { width: 40px; height: 40px; filter: brightness(0) saturate(0) opacity(.75); }
.lx-core::before, .lx-core::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgb(var(--b4-rgb) / 45%); animation: lx-spin 18s linear infinite; }
.lx-core::after { inset: 14px; animation-direction: reverse; animation-duration: 12s; }
@keyframes lx-spin { to { transform: rotate(360deg); } }
.lx-core__cap { text-align: center; font-size: 14px; font-weight: 600; }
.lx-wire { position: relative; width: 2px; height: 40px; background: rgb(var(--b4-rgb) / 22%); }
.lx-wire i { position: absolute; left: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--b4); box-shadow: 0 0 10px var(--b4); animation: lx-packet-y 2.4s linear infinite; }
.lx-wire i:nth-child(2) { animation-delay: -1.2s; }
@keyframes lx-packet-y { from { top: -3px; } to { top: calc(100% - 3px); } }
.lx-flow__deny { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 980px; font-size: 13px; color: #f4a6a6; background: rgb(235 87 87 / 12%); border: 1px solid rgb(235 87 87 / 30%); white-space: nowrap; }
.lx-flow__deny::before { content: ""; position: absolute; left: -26px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 10px var(--bad); animation: lx-bounce 2.2s var(--ease) infinite; }
@keyframes lx-bounce { 0% { transform: translateX(-60px); opacity: 0; } 40% { transform: translateX(0); opacity: 1; } 55% { transform: translateX(-14px); } 100% { transform: translateX(-60px); opacity: 0; } }
@media (min-width: 1000px) {
  .lx-flow__grid { grid-template-columns: 1fr 70px 1fr 70px auto 70px 1fr; align-items: center; gap: 0; }
  .lx-wire { width: 100%; height: 2px; }
  .lx-wire i { top: -2px; left: auto; animation-name: lx-packet-x; }
  @keyframes lx-packet-x { from { left: -3px; } to { left: calc(100% - 3px); } }
}

/* ---------------------------------------------------------------- timeline */

.lx-time { --p: 0; position: relative; max-width: 1100px; margin: 0 auto; display: grid; gap: 32px; padding-left: 40px; }
.lx-time::before, .lx-time::after { content: ""; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; border-radius: 2px; }
.lx-time::before { background: var(--border-2); }
.lx-time::after { background: var(--grad); transform-origin: top; transform: scaleY(var(--p)); }
.lx-time__item { position: relative; }
.lx-time__dot { position: absolute; left: -40px; top: 28px; width: 24px; height: 24px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--border-2); z-index: 1; transition: all .4s var(--ease); }
.lx-time__item.is-lit .lx-time__dot { border-color: var(--b3); background: radial-gradient(circle, var(--b4) 30%, transparent 34%), var(--panel-2); box-shadow: 0 0 0 5px rgb(var(--b2-rgb) / 14%), 0 0 22px rgb(var(--b4-rgb) / 40%); }
.lx-time__card { padding: 26px 28px; border-radius: 18px; }
.lx-time__when { font-size: 13px; font-weight: 500; color: var(--accent); }
.lx-time__card h3 { margin-top: 6px; font-size: 19px; }
.lx-time__card p { margin-top: 6px; font-size: 14.5px; color: var(--muted); }
@media (min-width: 900px) {
  .lx-time { padding-left: 0; gap: 0; }
  .lx-time::before, .lx-time::after { left: 50%; margin-left: -1px; }
  .lx-time__item { width: 50%; padding: 0 56px 56px 0; }
  .lx-time__item:nth-child(even) { margin-left: 50%; padding: 0 0 56px 56px; }
  .lx-time__dot { left: auto; right: -12px; }
  .lx-time__item:nth-child(even) .lx-time__dot { right: auto; left: -12px; }
}

/* ---------------------------------------------------------------- principles (auto-playing statements) */

.lx-says { text-align: center; max-width: 1200px; margin: 0 auto; }
.lx-says__stage { min-height: clamp(220px, 26vw, 340px); display: grid; place-items: center; }
.lx-says__text { font-size: clamp(30px, 4.4vw, 64px); line-height: 1.12; letter-spacing: -.03em; font-weight: 600; }
.lx-says__text .w { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(14px); transition: opacity .7s var(--ease), filter .7s var(--ease), transform .7s var(--out); white-space: pre; }
.lx-says__text.is-in .w { opacity: 1; filter: none; transform: none; }
.lx-says__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 48px; }
.lx-says__tab { min-width: 140px; text-align: left; font-size: 14px; font-weight: 500; color: var(--muted); transition: color .3s var(--ease); }
.lx-says__tab.is-on { color: var(--text); }
.lx-says__tab i { display: block; height: 3px; margin-top: 10px; border-radius: 3px; background: var(--border-2); overflow: hidden; }
.lx-says__tab i::after { content: ""; display: block; height: 100%; width: 0; background: linear-gradient(100deg, var(--b1), var(--b2)); }
.lx-says__tab.is-done i::after { width: 100%; }
.lx-says__tab.is-on i::after { animation: lx-fill var(--dur, 6.5s) linear forwards; }
.lx-says.is-paused .lx-says__tab.is-on i::after { animation-play-state: paused; }
@keyframes lx-fill { from { width: 0; } to { width: 100%; } }

/* ---------------------------------------------------------------- coming-soon card, AI answer mock */

.lx-soon { display: grid; gap: 40px; padding: clamp(28px, 4vw, 56px); border-radius: 24px; margin-top: clamp(64px, 8vw, 112px); align-items: center; }
.lx-soon > * { min-width: 0; }
.lx-soon .lx-pill { margin-bottom: 18px; }
.lx-soon h3 { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.12; letter-spacing: -.03em; }
.lx-soon p { margin-top: 14px; color: var(--muted); font-size: 16px; }
@media (min-width: 1000px) { .lx-soon { grid-template-columns: .9fr 1.1fr; } }
.lx-answer { border-radius: 16px; padding: 20px; background: rgb(10 10 10 / 70%); border: 1px solid var(--border-2); font-size: 14px; color: var(--text-2); }
.lx-answer__q { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: rgb(255 255 255 / 5%); color: var(--text); margin-bottom: 16px; }
.lx-answer mark { background: rgb(var(--b2-rgb) / 22%); color: var(--text); border-radius: 4px; padding: 0 3px; }
.lx-answer__engines { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }

/* ---------------------------------------------------------------- matrix */

.lx-matrix-wrap { overflow-x: auto; border-radius: 18px; }
.lx-matrix { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14.5px; }
.lx-matrix th, .lx-matrix td { padding: 16px 20px; border-bottom: 1px solid var(--border); text-align: center; }
.lx-matrix th:first-child, .lx-matrix td:first-child { text-align: left; color: var(--text-2); }
.lx-matrix thead th { font-size: 14px; font-weight: 600; color: var(--text); }
.lx-matrix tbody tr:last-child td { border-bottom: 0; }
.lx-matrix .i { width: 18px; height: 18px; margin: 0 auto; color: var(--accent); }
.lx-matrix .no { color: var(--dim); }

/* ---------------------------------------------------------------- finale */

.lx-finale .lx-h2 { font-size: clamp(40px, 6.4vw, 88px); }
.lx-finale .lx-actions { justify-content: center; margin-top: 40px; }
.lx-finale .lx-chips { justify-content: center; margin-top: 48px; }

/* ---------------------------------------------------------------- motto, mail card */

.lx-motto { padding: clamp(40px, 5vw, 72px); border-radius: 24px; text-align: center; }
.lx-motto b { display: block; font-size: clamp(30px, 4vw, 56px); line-height: 1.1; letter-spacing: -.03em; font-weight: 600; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lx-motto p { margin-top: 16px; color: var(--muted); }
.lx-mailcard { max-width: 880px; margin: 0 auto; padding: clamp(36px, 5vw, 64px); border-radius: 24px; text-align: center; }
.lx-mailcard a.addr { display: inline-block; font-size: clamp(26px, 3.6vw, 48px); font-weight: 600; letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------------------------------------------------------- forms (contact, auth) */

.lx-form { display: grid; gap: 16px; }
.lx-form__row { display: grid; gap: 16px; }
@media (min-width: 640px) { .lx-form__row { grid-template-columns: 1fr 1fr; } }
.lx-form label { display: grid; gap: 7px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.lx-input {
  width: 100%; height: 44px; padding: 0 14px; border-radius: 10px;
  background: rgb(255 255 255 / 4%); border: 1px solid var(--border-2); color: var(--text); font-size: 15px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
textarea.lx-input { height: auto; min-height: 130px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
select.lx-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(-45deg, transparent 50%, var(--muted) 50%); background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
select.lx-input option { background: #141516; color: #f7f8f8; }
.lx-input::placeholder { color: var(--dim); }
.lx-input:focus { outline: none; border-color: var(--b3); background: rgb(255 255 255 / 6%); }
.band--light .lx-input, .band--soft .lx-input { background: #fff; }
.lx-msgline { min-height: 1.4em; font-size: 14px; color: var(--muted); }
.lx-msgline.is-err { color: #f28b8b; }
.lx-msgline.is-ok { color: #7fd6a9; }

/* Trial form (URL input + button) */
.lx-trial { display: flex; gap: 8px; max-width: 520px; margin: 32px auto 0; padding: 6px; border-radius: 12px; }
.lx-trial input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; background: transparent; border: 0; color: var(--text); font-size: 15px; }
.lx-trial input:focus { outline: none; }
.lx-trial input::placeholder { color: var(--dim); }

/* Auth pages */
.lx-auth { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; position: relative; isolation: isolate; overflow: clip; background: radial-gradient(1000px 600px at 50% -10%, rgb(var(--b2-rgb) / 14%), transparent 60%), var(--bg); }
.lx-auth__top { display: flex; align-items: center; justify-content: space-between; height: var(--hx-h); padding: 0 var(--gutter); }
.lx-auth__main { display: grid; place-items: center; padding: 32px var(--gutter) 80px; }
.lx-auth__card { width: 100%; max-width: 440px; padding: clamp(28px, 4vw, 40px); border-radius: 20px; }
.lx-auth__card--wide { max-width: 560px; }
.lx-auth__card h1 { font-size: clamp(28px, 3vw, 36px); line-height: 1.1; letter-spacing: -.03em; }
.lx-auth__card > p { margin-top: 10px; color: var(--muted); font-size: 15px; }
.lx-auth__card .lx-form { margin-top: 28px; }
.lx-auth__alt { margin-top: 18px; text-align: center; font-size: 14px; color: var(--muted); }
.lx-auth__alt a { color: var(--text-2); font-weight: 500; }
.lx-auth__alt a:hover { color: var(--text); }
.lx-pw { position: relative; }
.lx-pw .lx-input { padding-right: 64px; }
.lx-pw button { position: absolute; right: 8px; top: 8px; height: 28px; padding: 0 10px; border-radius: 6px; font-size: 12.5px; color: var(--muted); }
.lx-pw button:hover { color: var(--text); background: rgb(255 255 255 / 6%); }
.lx-shake { animation: lx-shake .4s var(--ease); }
@keyframes lx-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.lx-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgb(26 18 0 / 25%); border-top-color: currentColor; animation: lx-spin .8s linear infinite; display: inline-block; }

/* ---------------------------------------------------------------- pricing */

.lx-prices { display: grid; gap: 20px; grid-template-columns: 1fr; max-width: 1280px; margin: 0 auto; }
.lx-price { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 32px; border-radius: 20px; }
.lx-price.is-featured { border-color: rgb(var(--b4-rgb) / 40%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 0 0 1px rgb(var(--b2-rgb) / 20%), 0 40px 80px -40px rgb(var(--b2-rgb) / 35%); }
.lx-price__flag { position: absolute; top: 18px; right: 18px; }
.lx-price h3 { font-size: 19px; }
.lx-price__tag { margin-top: 6px; font-size: 14px; color: var(--muted); }
.lx-price__amt { display: flex; align-items: baseline; gap: 6px; }
.lx-price__amt b { font-size: 48px; line-height: 1; font-weight: 600; letter-spacing: -.04em; }
.lx-price__amt span { color: var(--muted); font-size: 14px; }
.lx-price ul { display: grid; gap: 10px; }
.lx-price li { display: flex; gap: 10px; font-size: 14px; color: var(--text-2); }
.lx-price li .i { width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
.lx-price li.is-off { color: var(--dim); }
.lx-price li.is-off .i { color: var(--dim); }
.lx-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 980px; margin: 0 auto 48px; }
.lx-tabs button { height: 36px; padding: 0 18px; border-radius: 980px; font-size: 14px; font-weight: 500; color: var(--muted); transition: background .2s var(--ease), color .2s var(--ease); }
.lx-tabs button.is-on { background: rgb(255 255 255 / 10%); color: var(--text); }
.band--light .lx-tabs button.is-on, .band--soft .lx-tabs button.is-on { background: #fff; }
@media (min-width: 900px) { .lx-prices { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------------- legal prose */

.lx-prose { color: var(--text-2); font-size: 16px; line-height: 1.75; }
.lx-prose h2 { margin: 48px 0 14px; font-size: 22px; letter-spacing: -.02em; color: var(--text); }
.lx-prose h3 { margin: 28px 0 10px; font-size: 17px; color: var(--text); }
.lx-prose p, .lx-prose ul, .lx-prose ol { margin: 0 0 16px; }
.lx-prose ul { list-style: disc; padding-left: 22px; }
.lx-prose ol { list-style: decimal; padding-left: 22px; }
.lx-prose li { margin-bottom: 6px; }
.lx-prose a { color: var(--b4); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(var(--b4-rgb) / 40%); }
.lx-prose strong { color: var(--text); }

/* ---------------------------------------------------------------- full-screen demo page */

.lx-demo {
  min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; position: relative; isolation: isolate; overflow: clip;
  background: radial-gradient(1200px 700px at 70% 0%, rgb(var(--b2-rgb) / 14%), transparent 60%), var(--bg);
}
.lx-demo__top { display: flex; align-items: center; gap: 16px; padding: 16px var(--gutter); }
.lx-demo__top > :first-child { flex: 1; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.lx-demo__top > :first-child .i { width: 15px; height: 15px; }
.lx-demo__top > :first-child:hover { color: var(--text); }
.lx-demo__pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 980px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.lx-demo__pill .i { width: 11px; height: 11px; color: var(--b4); }
.lx-demo__right { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.lx-demo__stage { display: grid; gap: 40px; align-items: center; padding: 24px var(--gutter); max-width: var(--max); width: 100%; margin: 0 auto; }
.lx-demo__stage > * { min-width: 0; }
.lx-demo__copy h1 { font-size: clamp(34px, 3.8vw, 60px); line-height: 1.06; letter-spacing: -.034em; margin-top: 12px; }
.lx-demo__copy > p { margin-top: 18px; font-size: 17px; color: var(--muted); max-width: 460px; }
.lx-demo__copy .lx-ticks { margin-top: 28px; }
.lx-demo__copy .lx-ticks li { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .6s var(--out); }
.lx-demo__copy .lx-ticks li.is-in { opacity: 1; transform: none; }
.lx-demo__copy.is-enter { animation: lx-enter .6s var(--out); }
.lx-demo__wins { position: relative; }
.lx-demo__wins > .lx-win { min-height: 480px; }
.lx-demo__wins > .lx-win:not(.is-on) { display: none; }
.lx-demo__wins > .lx-win.is-enter { animation: lx-zoom .7s var(--out); }
@keyframes lx-enter { from { opacity: 0; transform: translateY(14px); } }
@keyframes lx-zoom { from { opacity: 0; transform: scale(.96); filter: blur(6px); } }
.lx-demo__bar { display: flex; align-items: center; gap: 16px; padding: 16px var(--gutter) 24px; max-width: var(--max); width: 100%; margin: 0 auto; }
.lx-demo__ctrl { display: flex; gap: 6px; flex: none; }
.lx-demo__ctrl button { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); }
.lx-demo__ctrl button:hover { color: var(--text); border-color: rgb(255 255 255 / 22%); }
.lx-demo__ctrl .i { width: 15px; height: 15px; }
.lx-demo__tabs { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(130px, 1fr); gap: 12px; overflow-x: auto; scrollbar-width: none; }
.lx-demo__tabs::-webkit-scrollbar { display: none; }
.lx-demo__tab { text-align: left; font-size: 13px; font-weight: 500; color: var(--muted); padding-top: 4px; }
.lx-demo__tab:hover { color: var(--text-2); }
.lx-demo__tab.is-on { color: var(--text); }
.lx-demo__tab i { display: block; height: 3px; margin-bottom: 10px; border-radius: 3px; background: var(--border-2); overflow: hidden; }
.lx-demo__tab i b { display: block; height: 100%; width: 0; background: var(--grad); }
.lx-demo__tab.is-done i b { width: 100%; }
@media (min-width: 1000px) { .lx-demo__stage { grid-template-columns: .7fr 1.3fr; gap: 64px; } }
@media (max-width: 640px) { .lx-demo__pill { display: none; } .lx-demo__right .lx-btn--primary { display: none; } }

/* ---------------------------------------------------------------- Support AI page and demo: website mock, launcher, photo viewer, code */

/* Fixed-height windows: content scrolls off the top instead of growing the window. */
.lx-win--fixed { height: var(--wh, 540px); min-height: 0; }
.lx-win--fixed .lx-win__cols { grid-auto-rows: minmax(0, 1fr); }
/* .grow sets overflow:hidden, so flex items would shrink instead of overflowing. */
.lx-win--fixed .lx-win__body > * { flex-shrink: 0; }
.lx-demo__wins > .lx-win--fixed { min-height: 0; }

/* Rich AI replies (text + cards + sources) are taller than the 240px .grow cap. */
.lx-msg.grow.is-in { max-height: 520px; }

/* Chat column inside a window (widget header + thread) */
.lx-chat { display: flex; flex-direction: column; min-height: 0; }
.lx-chathead { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; }
.lx-chathead .lx-sm { font-weight: 400; }
.lx-chathead .lx-sm::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--ok); vertical-align: 1px; }

/* Website mock (left pane of a window, or inside the phone) */
.lx-site { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; background: rgb(255 255 255 / 2%); overflow: hidden; }
.lx-site__nav { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--text-2); }
.lx-site__nav i { width: 30px; height: 6px; border-radius: 3px; background: rgb(255 255 255 / 10%); }
.lx-site__nav i:first-of-type { margin-left: auto; }
.lx-site__hero { display: grid; gap: 8px; padding: 18px; border-radius: 12px; border: 1px solid var(--border); background: linear-gradient(135deg, rgb(var(--b2-rgb) / 22%), rgb(255 255 255 / 3%) 70%); }
.lx-site__hero small { font-size: 11px; color: var(--b4); }
.lx-site__hero strong { font-size: 19px; line-height: 1.15; letter-spacing: -.02em; font-weight: 600; color: var(--text); }
.lx-site__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lx-site__grid > div { padding: 6px; border-radius: 10px; border: 1px solid var(--border); background: rgb(255 255 255 / 3%); font-size: 11.5px; transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }
.lx-site__grid > div i { display: block; aspect-ratio: 3 / 2; margin-bottom: 6px; border-radius: 6px; background: linear-gradient(160deg, rgb(var(--b2-rgb) / 26%), rgb(255 255 255 / 4%)); }
.lx-site__grid > div b { font-weight: 600; color: var(--text-2); }
.lx-site__grid > .is-on { border-color: var(--b3); box-shadow: 0 0 0 3px rgb(var(--b2-rgb) / 18%); }

/* Chat launcher, greeting bubble and the chat panel that slides up */
.lx-launch { position: absolute; right: 16px; bottom: 16px; z-index: 3; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: var(--on-grad); box-shadow: 0 10px 30px -6px rgb(var(--b2-rgb) / 55%); }
.lx-launch .i { width: 20px; height: 20px; }
.lx-launch.pop { transform: scale(.4); }
.lx-launch.pop.is-in { transform: none; }
.lx-launch.is-in::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgb(var(--b4-rgb) / 50%); animation: lx-ping 2s var(--out) infinite; }
@keyframes lx-ping { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.lx-greet { position: absolute; right: 16px; bottom: 76px; z-index: 3; max-width: 220px; padding: 10px 12px; border-radius: 12px 12px 4px 12px; background: #1b1c1e; border: 1px solid var(--border-2); font-size: 12px; color: var(--text); box-shadow: 0 16px 30px -12px rgb(0 0 0 / 60%); }
.lx-slide { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: #141414; border: 1px solid var(--border-2); box-shadow: 0 -20px 40px -20px rgb(0 0 0 / 60%); transform: translateY(115%); transition: transform .6s var(--out); }
.lx-slide.is-in { transform: none; }

/* Full-screen photo viewer over a chat */
.lx-viewer { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgb(6 6 6 / 84%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
.lx-viewer > i { height: 72%; max-width: 86%; aspect-ratio: 4 / 3; border-radius: 12px; background: linear-gradient(200deg, rgb(var(--b1-rgb) / 60%), rgb(var(--b4-rgb) / 20%) 60%, rgb(255 255 255 / 5%)); }
.lx-viewer > small { position: absolute; top: 14px; left: 16px; font-size: 12px; color: var(--text-2); }
.lx-viewer > .i { position: absolute; top: 14px; right: 16px; width: 16px; height: 16px; color: var(--text-2); }
.lx-gallery--3 { grid-template-columns: repeat(3, 1fr); }
.lx-gallery i { transition: box-shadow .4s var(--ease); }
.lx-gallery i.is-on { box-shadow: 0 0 0 2px var(--b3); }

/* Code snippet, small panels and fields */
.lx-code { min-height: 5em; padding: 14px; border-radius: 10px; background: rgb(0 0 0 / 35%); border: 1px solid var(--border-2); font: 12px/1.6 var(--mono); color: var(--b4); white-space: pre-wrap; word-break: break-all; }
.lx-panel { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: rgb(255 255 255 / 3%); border: 1px solid var(--border); }
.lx-field--sm { height: 30px; font-size: 12px; }
.lx-field--sm small { flex: none; min-width: 64px; }

/* ---------------------------------------------------------------- Sales AI page and demo: ICP prompt, opening lines, email composer */

/* Wrapping pill row inside app windows (filters, signals, providers). */
.lx-pills { display: flex; flex-wrap: wrap; gap: 6px; }

/* Multi-line input field (ICP prompt). */
.lx-field--area { height: auto; min-height: 76px; align-items: flex-start; padding: 10px 12px; line-height: 1.5; white-space: normal; }
.lx-field--area .i { margin-top: 2px; }

/* Quoted AI opening line. */
.lx-quote { padding: 9px 12px; border-left: 2px solid var(--b3); border-radius: 0 8px 8px 0; background: rgb(var(--b2-rgb) / 8%); color: var(--text); font-size: 12.5px; min-height: 2.4em; }
.lx-quote small { display: block; margin-bottom: 3px; font-size: 11px; color: var(--b4); font-weight: 600; }

/* Email composer body. */
.lx-mail { display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.lx-mail__foot { padding-top: 10px; border-top: 1px dashed var(--border-2); font-size: 11px; color: var(--dim); }
.lx-mail__foot u { color: var(--muted); text-underline-offset: 2px; border-radius: 4px; transition: box-shadow .2s var(--ease), background .2s var(--ease); }
.lx-mail__foot u.is-press { background: rgb(var(--b2-rgb) / 18%); box-shadow: 0 0 0 4px rgb(var(--b2-rgb) / 30%); color: var(--text); }

/* A prospect row that turned red (unsubscribed / blocked). */
.lx-row.is-bad { background: rgb(235 87 87 / 9%); }
.lx-row.is-bad b { color: #f4a6a6; text-decoration: line-through; text-decoration-color: rgb(235 87 87 / 55%); }
.lx-row.is-dim { opacity: .5; }

/* Sticky walkthrough with the windows on the left. */
@media (min-width: 1000px) {
  .lx-sticky--flip { grid-template-columns: 1.2fr .8fr; }
  .lx-sticky--flip > .lx-sticky__copy { order: 2; }
}

/* Layered art: back window plus a smaller front window (no phone). */
.lx-layers--mail { min-height: 600px; }
.lx-layers--mail > .lx-win.lx-layers__front { left: auto; top: auto; right: 0; bottom: 0; width: 60%; min-height: 0; z-index: 2; }
@media (max-width: 760px) {
  .lx-layers--mail > .lx-win.lx-layers__front { display: flex; position: relative; width: 100%; }
}

/* ---------------------------------------------------------------- Social AI page and demo: post states, generated images, waitlist */

/* Hero: product eyebrow with its launch-status pill */
.lx-eyebrow-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; }
.lx-hero .lx-eyebrow-row .lx-eyebrow { margin-bottom: 0; }

/* ---------------------------------------------------------------- window parts */

.lx-dot { width: 7px; height: 7px; margin: 0 4px; border-radius: 50%; flex: none; background: var(--ok); }
.lx-row.is-on { background: rgb(255 255 255 / 5%); box-shadow: inset 2px 0 0 var(--b3); }
.lx-row { transition: background .4s var(--ease), box-shadow .4s var(--ease); }
.lx-tags { color: var(--b4); }
.lx-nets { display: flex; flex-wrap: wrap; gap: 6px; }
.lx-editor { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-2); background: rgb(255 255 255 / 3%); font-size: 13px; line-height: 1.6; color: var(--text); }
.lx-editor .lx-tags { display: block; margin-top: 8px; }
.lx-post small { display: block; margin-bottom: 3px; font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
.lx-post .lx-pill + .lx-pill, .lx-post .lx-pill + .swap { margin-left: 3px; }
.lx-counters--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 761px) { .lx-counters--4 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px) {
  .lx-cal--wk { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lx-cal--wk > :nth-child(n+5) { display: none; }
}

/* Segmented switch (e.g. Approval: Always | Auto) */
.lx-seg { display: inline-flex; padding: 3px; border-radius: 8px; background: rgb(255 255 255 / 5%); border: 1px solid var(--border); font-size: 12px; }
.lx-seg span { padding: 3px 10px; border-radius: 6px; color: var(--muted); transition: background .3s var(--ease), color .3s var(--ease); }
.lx-seg span.is-on { background: rgb(255 255 255 / 11%); color: var(--text); }

/* Status track: Draft → Waiting → Approved → Scheduled → Published */
.lx-states { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lx-states span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 980px; border: 1px solid var(--border); font-size: 11.5px; color: var(--dim); transition: color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease); }
.lx-states span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lx-states span.is-on { color: var(--b4); border-color: rgb(var(--b2-rgb) / 45%); background: rgb(var(--b2-rgb) / 12%); }
.lx-states span.is-done { color: #7fd6a9; border-color: rgb(76 183 130 / 30%); }

/* Author / voice card */
.lx-author { display: flex; gap: 12px; padding: 14px; border-radius: 12px; border: 1px solid rgb(var(--b2-rgb) / 26%); background: rgb(var(--b2-rgb) / 7%); }
.lx-author b { display: block; font-size: 13px; font-weight: 600; }
.lx-author p { margin-top: 4px; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- generated images */

.lx-gen { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 10px; border: 1px solid var(--border); background: rgb(255 255 255 / 4%); }
.lx-gen--flush { border-radius: 0; border: 0; }
.lx-shim {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(100deg, rgb(255 255 255 / 3%) 30%, rgb(var(--b4-rgb) / 16%) 50%, rgb(255 255 255 / 3%) 70%) 0 0 / 250% 100%;
  animation: lx-shim 1.4s linear infinite; transition: opacity .45s var(--ease);
}
.lx-shim.is-out { opacity: 0; }
@keyframes lx-shim { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.lx-art { position: absolute; inset: 0; opacity: 0; transform: scale(1.08); transition: opacity .6s var(--ease), transform 1.2s var(--out); }
.lx-art.is-in { opacity: 1; transform: none; }
.lx-art.is-out { opacity: 0; }
.lx-art::after { content: ""; position: absolute; }
/* Terrace at sunset, with an arched window */
.lx-art--sun { background: radial-gradient(circle at 68% 40%, #fff1c9 0 9%, rgb(255 225 160 / 45%) 9.5% 16%, transparent 17%), linear-gradient(180deg, #f4c983, #e39a5a 46%, #8a4a2c 62%, #2a1a12 63%, #1b120d); }
.lx-art--sun::after { left: 9%; bottom: 0; width: 30%; height: 60%; border-radius: 999px 999px 0 0; background: #1a110c; box-shadow: inset 0 0 0 5px #2b1c12; }
/* Rooftops */
.lx-art--roofs { background: linear-gradient(180deg, #f7dfae 0 44%, transparent 44%), linear-gradient(90deg, #d97b4a 0 18%, #ecc07a 18% 36%, #c45f3a 36% 54%, #f2d9a4 54% 72%, #b85a34 72% 88%, #e2a35e 88%); }
.lx-art--roofs::after { left: 0; right: 0; top: 44%; height: 10%; background: repeating-linear-gradient(90deg, rgb(60 30 10 / 45%) 0 2px, transparent 2px 14px); }
/* Loaf */
.lx-art--loaf { background: radial-gradient(ellipse 40% 24% at 50% 58%, #e2a85c, #b8763a 68%, transparent 70%), linear-gradient(180deg, #3d2c1d, #1d150e); }
.lx-art--loaf::after { left: 34%; top: 50%; width: 32%; height: 6%; border-radius: 50%; background: rgb(255 236 200 / 45%); transform: rotate(-12deg); }
/* Cup from above */
.lx-art--cup { background: radial-gradient(circle at 50% 54%, #b7c56f 0 17%, #ece6d4 17.5% 25%, rgb(0 0 0 / 25%) 25.5% 27%, transparent 27.5%), linear-gradient(160deg, #4a4330, #2a261b); }
.lx-art--cup::after { left: 64%; top: 46%; width: 16%; height: 7%; border-radius: 0 999px 999px 0; border: 3px solid #ece6d4; border-left: 0; }

.lx-gens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 761px) { .lx-gens { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lx-gens figure { display: grid; gap: 8px; min-width: 0; }
.lx-gens figcaption { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--muted); }
.lx-gens figcaption > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }

/* ---------------------------------------------------------------- social post in the phone */

.lx-ig__head { display: flex; align-items: center; gap: 8px; padding: 38px 12px 10px; font-size: 12.5px; font-weight: 600; }
.lx-ig__head small { display: block; font-size: 10.5px; font-weight: 400; color: var(--dim); }
.lx-ig__acts { display: flex; align-items: center; gap: 14px; padding: 10px 12px 4px; font-size: 12px; color: var(--text-2); }
.lx-ig__acts span { display: inline-flex; align-items: center; gap: 5px; }
.lx-ig__acts .i { width: 16px; height: 16px; }
.lx-ig__cap { padding: 4px 12px 12px; font-size: 12px; line-height: 1.5; color: var(--text-2); }
.lx-ig__cap b { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------------- waitlist */

.lx-wl { max-width: 560px; margin: 40px auto 0; }
.lx-wl .lx-trial { margin: 0 auto; }
.lx-wl .lx-trial input { color: var(--text); }
.lx-wl__cap { margin-top: 22px; font-size: 13.5px; color: var(--muted); }
.lx-wl__nets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.lx-wl__nets label { position: relative; cursor: pointer; }
.lx-wl__nets input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lx-wl__nets span { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 980px; border: 1px solid var(--border-2); font-size: 13.5px; color: var(--muted); transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.lx-wl__nets label:hover span { color: var(--text-2); }
.lx-wl__nets input:checked + span { color: var(--b4); border-color: var(--b3); background: rgb(var(--b2-rgb) / 12%); }
.lx-wl__nets input:focus-visible + span { outline: 2px solid var(--b3); outline-offset: 2px; }
.lx-wl .lx-msgline { margin-top: 14px; }
.lx-wl__fine { margin-top: 8px; font-size: 12.5px; color: var(--dim); }
.lx-wl__fine a { text-decoration: underline; text-underline-offset: 3px; }
.lx-wl__fine a:hover { color: var(--text-2); }
.lx-wl__done { padding: 28px; border-radius: 16px; }
.lx-wl__done h3 { font-size: 22px; letter-spacing: -.02em; }
.lx-wl__done p { margin-top: 8px; color: var(--muted); }

/* ---------------------------------------------------------------- Overview pages: solutions, use cases, company, contact, pricing */

/* Product tagline under a big product name (solutions split bands) */
.lx-tagline { font-size: clamp(20px, 2vw, 28px); line-height: 1.25; font-weight: 600; letter-spacing: -.02em; }
.lx-tagline span { display: block; }
.lx-tagline .l2 { color: var(--muted); }
html[lang="zh-CN"] .lx-tagline { letter-spacing: .03em; line-height: 1.5; }

/* Hero band that carries content below the fold-line (pricing plans) */
.band--hero.lx-pad-b { padding-bottom: clamp(104px, 12vw, 176px); }
.lx-hero .lx-tabs { margin-top: 48px; }

/* Small centred note under a grid */
.lx-note { margin-top: 28px; text-align: center; font-size: 13.5px; color: var(--muted); }
.lx-note a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-2); }

/* Price amount currency mark */
.lx-price__amt sup { font-size: 22px; font-weight: 500; vertical-align: top; position: relative; top: 6px; margin-right: 2px; color: var(--text-2); }

/* Grouped tick matrix rows (pricing detail tables) */
.lx-matrix .lx-grp td { padding-top: 28px; text-align: left; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lx-matrix thead th small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.lx-matrix td .lx-pill { vertical-align: middle; }

/* Example question bubble inside a tile (use cases) */
.lx-q {
  display: inline-block; margin-top: 18px; padding: 10px 14px; border-radius: 12px 12px 12px 4px;
  font-size: 14px; line-height: 1.45; color: var(--text); text-align: left;
  background: rgb(var(--b2-rgb) / 12%); border: 1px solid rgb(var(--b2-rgb) / 22%);
}
.band--light .lx-q, .band--soft .lx-q { background: rgb(var(--b2-rgb) / 14%); border-color: rgb(var(--b1-rgb) / 22%); }

/* Contact form card and success state */
.lx-sent { display: grid; justify-items: center; gap: 12px; padding: 48px 12px; text-align: center; }
.lx-sent .lx-ico { margin: 0 0 6px; }
.lx-sent h3 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.02em; }
.lx-sent p { color: var(--muted); max-width: 420px; }
a.lx-tile { display: block; }
a.lx-tile.is-picked { border-color: rgb(var(--b4-rgb) / 40%); }

/* Brand pills outside app windows on light bands: --b4 text is unreadable on cream. */
.band--light .lx-pill--brand, .band--soft .lx-pill--brand { background: rgb(var(--b2-rgb) / 18%); color: var(--b1); }
.band--light .lx-win .lx-pill--brand, .band--soft .lx-win .lx-pill--brand { background: rgb(var(--b2-rgb) / 16%); color: var(--b4); }

/* Pricing: plans and the coming-soon card sit inside the centred hero */
.lx-hero .lx-prices, .lx-hero .lx-soon { text-align: left; }
.lx-faq p a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--b3); }
.lx-faq p b { color: var(--text-2); font-weight: 600; }




/* ---------------------------------------------------------------- Auth, legal and opt-out pages */

/* Auth top bar, right side */
.lx-auth__nav { display: flex; align-items: center; gap: 8px; }

/* Signup: intro column beside the card */
.lx-auth__split { width: 100%; max-width: 1120px; display: grid; gap: 40px; align-items: center; }
.lx-auth__split > * { min-width: 0; }
.lx-auth__split .lx-auth__card { justify-self: center; }
.lx-auth__intro h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.03em; }
.lx-auth__intro > p { margin-top: 16px; max-width: 480px; color: var(--muted); font-size: 16px; }
.lx-auth__intro ol { margin-top: 28px; display: grid; gap: 14px; }
.lx-auth__intro li { display: flex; gap: 14px; align-items: baseline; color: var(--text-2); font-size: 15px; }
.lx-auth__intro li b { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; color: var(--accent); border: 1px solid rgb(var(--b4-rgb) / 25%); background: rgb(var(--b2-rgb) / 10%); transform: translateY(-1px); }
@media (max-width: 999px) { .lx-auth__intro ol { display: none; } .lx-auth__intro { text-align: center; } .lx-auth__intro > p { margin-inline: auto; } }
@media (min-width: 1000px) { .lx-auth__split { grid-template-columns: 1fr 1.05fr; gap: 72px; } }

/* Radio tiles (signup product + plan, opt-out scope) */
.lx-pick { display: grid; gap: 8px; grid-auto-flow: column; grid-auto-columns: 1fr; }
.lx-pick--stack { grid-auto-flow: row; }
@media (max-width: 520px) { .lx-pick--products { grid-auto-flow: row; } }
.lx-form .lx-pick label { display: block; position: relative; cursor: pointer; }
.lx-pick input { position: absolute; opacity: 0; pointer-events: none; }
.lx-pick label > span { display: grid; gap: 2px; height: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border-2); background: rgb(255 255 255 / 3%); font-weight: 400; color: var(--muted); font-size: 12.5px; line-height: 1.4; transition: border-color .2s var(--ease), background .2s var(--ease); }
.lx-pick label > span b { color: var(--text); font-size: 14px; font-weight: 600; }
.lx-pick label:hover > span { border-color: rgb(255 255 255 / 22%); }
.lx-pick input:checked + span { border-color: var(--b3); background: rgb(var(--b2-rgb) / 10%); }
.lx-pick input:focus-visible + span { outline: 2px solid var(--b3); outline-offset: 2px; }

.lx-fine { font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.lx-fine a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.lx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lx-auth__card > .lx-btn { margin-top: 28px; }
.lx-auth__card .lx-ico { margin: 0 0 20px; }
.lx-auth__card.lx-center .lx-ico { margin-inline: auto; }

/* Legal pages */
.lx-legal-hero { padding-bottom: clamp(56px, 7vw, 96px); }
.lx-legal-hero .lx-head { margin-bottom: 0; }
.lx-legal-hero .lx-zhnote:empty { display: none; }
.lx-toc { margin: 0 0 40px; padding: 24px 28px; border-radius: 16px; }
.lx-toc > b { display: block; margin-bottom: 10px; color: var(--text); }
.lx-prose .lx-toc ol { margin: 0; }
.lx-prose .lx-toc a { color: var(--text-2); text-decoration: none; }
.lx-prose .lx-toc a:hover { color: var(--text); }
@media (min-width: 700px) { .lx-toc ol { columns: 2; column-gap: 40px; } }
.lx-prose b { color: var(--text); }
.lx-prose code, .lx-faq code { font: 13.5px var(--mono); padding: 1px 6px; border-radius: 6px; background: rgb(255 255 255 / 6%); }
.lx-faq pre { margin: 0 24px 16px; padding: 14px 16px; border-radius: 10px; background: rgb(0 0 0 / 35%); border: 1px solid var(--border); font: 13px/1.6 var(--mono); color: var(--text-2); overflow-x: auto; }
.lx-faq details a { color: var(--b4); text-decoration: underline; text-underline-offset: 3px; }

/* Opt-out card */
.lx-optout { max-width: 640px; margin: 0 auto clamp(48px, 6vw, 80px); padding: clamp(24px, 4vw, 40px); border-radius: 20px; }
.lx-optout h2 { font-size: 24px; letter-spacing: -.02em; margin-bottom: 10px; }
.lx-optout > p, .lx-optout > div > p { color: var(--muted); }
.lx-optout b { color: var(--accent); }
.lx-optout > .lx-btn { margin-top: 20px; }
.lx-ico .lx-spin { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- reveal */

.reveal { opacity: 0; transition: opacity .9s var(--out), transform 1.1s var(--out); transition-delay: var(--d, 0ms); }
.reveal, .reveal--up { transform: translateY(28px); }
.reveal--left { transform: translateX(-36px); }
.reveal--scale { transform: scale(.94); }
.reveal--tilt { transform: perspective(1600px) rotateX(18deg) translateY(60px) scale(.94); transform-origin: 50% 0; }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- Chinese typography */

html[lang="zh-CN"] body { line-height: 1.85; letter-spacing: .03em; }
html[lang="zh-CN"] h1, html[lang="zh-CN"] .lx-h1, html[lang="zh-CN"] .lx-finale .lx-h2, html[lang="zh-CN"] .lx-demo__copy h1 { letter-spacing: .04em; line-height: 1.3; }
html[lang="zh-CN"] h2, html[lang="zh-CN"] .lx-h2, html[lang="zh-CN"] .lx-soon h3, html[lang="zh-CN"] .lx-motto b, html[lang="zh-CN"] .lx-says__text { letter-spacing: .03em; line-height: 1.3; }
html[lang="zh-CN"] .lx-lead, html[lang="zh-CN"] .lx-text, html[lang="zh-CN"] .lx-head > p { line-height: 1.95; letter-spacing: .04em; }
html[lang="zh-CN"] .lx-card p, html[lang="zh-CN"] .lx-tile p { line-height: 1.9; }
html[lang="zh-CN"] .lx-h2--split, html[lang="zh-CN"] .lx-sticky .lx-h2 { font-size: clamp(30px, 3vw, 46px); }
html[lang="zh-CN"] .lx-stat b, html[lang="zh-CN"] .lx-price__amt b { letter-spacing: -.02em; }
html[lang="zh-CN"] .lx-says__text .w { white-space: normal; }

/* ---------------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .lx-aurora i, .lx-marquee__track, .lx-float, .lx-core::before, .lx-core::after, .lx-wire i, .lx-gate::after, .lx-flow__deny::before { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  .lx-tilt, .lx-parallax { transform: none; }
}