/* terminal lift landing page.
 *
 * Builds on terminal.css tokens. The app's surfaces stay flat and 1px-bordered;
 * the one web liberty is light: amber glow, as if the page were a CRT. Every
 * motion here has a prefers-reduced-motion exit at the bottom of the file.
 */

.lift-page main { overflow: clip; }
.lift-page [id] { scroll-margin-top: 64px; }

/* ── beta banner ───────────────────────────────────────────────────────── */
.beta-banner {
  padding: 11px max(var(--edge), env(safe-area-inset-left)) 11px max(var(--edge), env(safe-area-inset-right));
  border-bottom: var(--bw) solid var(--border-active);
  background: var(--tag-bg-active);
  color: var(--amber-1);
  text-align: center;
  font-size: var(--fs-small);
}
.beta-banner p { max-width: var(--measure); margin-inline: auto; }
.beta-banner a { color: inherit; border-bottom-color: var(--border-active); }
.beta-banner a:hover { color: inherit; border-bottom-color: var(--amber-1); }

/* ── topbar ────────────────────────────────────────────────────────────── */
.lift-page .topbar {
  background: rgba(14, 11, 6, .78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.lx-nav { display: none; gap: 28px; margin-left: auto; font-size: var(--fs-small); }
.lx-nav a { color: var(--amber-3); border: 0; }
.lx-nav a:hover { color: var(--amber-1); }
.lx-nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: var(--bw) solid var(--amber-1);
  border-radius: var(--r-control);
  background: var(--amber-1);
  color: var(--bg-primary);
  font-size: var(--fs-small);
  font-weight: 700;
}
.lx-nav__cta:hover { background: #ffc466; color: var(--bg-primary); border-color: #ffc466; }
@media (min-width: 760px) { .lx-nav { display: flex; } }

/* ── phone frame ───────────────────────────────────────────────────────── */
/* Real simulator captures inside the supplied hardware outline. */
.phone-shot {
  position: relative;
  display: block;
  aspect-ratio: 2451 / 4990;
  isolation: isolate;
}
.phone-shot__viewport {
  position: absolute;
  z-index: 1;
  top: 1.35%;
  left: 4.55%;
  width: 90.9%;
  height: 96.9%;
  overflow: hidden;
  /* Follows the display opening so screenshot pixels never leak under the
     frame's anti-aliased edge. */
  border-radius: 10.5% / 4.85%;
}
.phone-shot__screen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.phone-shot::after {
  position: absolute;
  z-index: 2;
  top: 2.9%;
  left: 50%;
  width: 20.5%;
  height: 2.8%;
  border-radius: 999px;
  transform: translateX(-50%);
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .13);
  content: '';
}
.phone-shot__frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* ── hero ──────────────────────────────────────────────────────────────── */
.lx-hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 92px);
  padding-block: clamp(40px, 7vw, 96px) clamp(72px, 9vw, 120px);
}
/* CRT scanlines + vignette over the dot field, under the content. */
.lx-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 70% 45%, rgba(255, 184, 77, .10), transparent 55%),
    radial-gradient(ellipse at center, transparent 45%, var(--bg-primary) 95%);
  content: '';
}
.lx-field {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}
.lx-hero__grid {
  display: grid;
  grid-template-areas: 'copy' 'product' 'signup';
  gap: clamp(32px, 6vw, 48px);
  align-items: center;
}
.lx-hero__grid > * { min-width: 0; }
.lx-hero__copy { grid-area: copy; }
.lx-hero h1 {
  max-width: 14ch;
  margin-bottom: 24px;
  color: var(--amber-1);
  font-size: clamp(42px, min(6.2vw, 9.5vh), 88px);
  line-height: 1;
  letter-spacing: -.045em;
  text-shadow: 0 0 32px rgba(255, 184, 77, .3);
}
.lx-hero__lead {
  max-width: 35em;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
}
.lx-hero__lead span { display: block; }
.lx-hero__lead b { color: var(--amber-2); font-weight: 500; }

.hero-signup {
  grid-area: signup;
  max-width: 560px;
  padding: var(--gap-card);
  border: var(--bw) solid var(--border-active);
  border-radius: var(--r-card);
  background: rgba(18, 13, 4, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(255, 184, 77, .04), 0 0 60px rgba(212, 148, 26, .12);
}
.hero-signup > p:first-child { margin-bottom: 12px; color: var(--amber-2); }
.hero-signup strong { color: var(--amber-1); font-weight: 700; }
.hero-signup__note { margin-top: var(--gap-card-half); color: var(--amber-4); font-size: var(--fs-small); }

/* The stage keeps .product-stage so page-intro.js waits on its images and the
   shared entrance animation plays. Pointer parallax is flat 2D translation
   only: any 3D transform or scale moves the screenshots onto a GPU layer
   that downsamples them badly, which reads as pixelated text. */
.lx-stage {
  grid-area: product;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}
/* The shared entrance animation fills both ways, which keeps the stage on a
   GPU layer forever. Its end state is no transform, so let it go. */
html.page-ready .lx-stage { animation-fill-mode: backwards; }
.lx-tilt {
  --px: 0;
  --py: 0;
  position: relative;
  display: grid;
}
.lx-shot { grid-area: 1 / 1; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.lx-shot--front {
  z-index: 2;
  width: 64%;
  justify-self: start;
  transform: translate(round(calc(var(--px) * 14px), 1px), round(calc(var(--py) * 10px), 1px));
  filter: drop-shadow(0 0 22px rgba(212, 148, 26, .22)) drop-shadow(0 30px 60px rgba(0, 0, 0, .6));
}
.lx-shot--back {
  z-index: 1;
  width: 56%;
  justify-self: end;
  align-self: center;
  opacity: .75;
  transform: translate(round(calc(var(--px) * -8px), 1px), round(calc(var(--py) * -6px), 1px));
  filter: drop-shadow(0 0 18px rgba(212, 148, 26, .12));
}

.lx-chip {
  position: absolute;
  z-index: 3;
  padding: 8px 12px;
  border: var(--bw) solid var(--border-active);
  border-radius: var(--r-control);
  background: rgba(18, 13, 4, .9);
  color: var(--amber-2);
  font-size: clamp(11px, 1.2vw, 14px);
  white-space: nowrap;
  box-shadow: 0 0 24px rgba(212, 148, 26, .18);
  transform: translate(round(calc(var(--px) * 26px), 1px), round(calc(var(--py) * 20px), 1px));
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.lx-chip b { color: var(--amber-1); }
.lx-chip i { font-style: normal; color: var(--bg-primary); background: var(--amber-1); border-radius: 3px; padding: 0 3px; }
.lx-chip--rest {
  top: 14%;
  right: -2%;
  background: var(--amber-1);
  border-color: var(--amber-1);
  color: var(--bg-primary);
}
.lx-chip--rest b { color: var(--bg-primary); font-size: 1.35em; font-variant-numeric: tabular-nums; }
.lx-chip--set { bottom: 22%; left: -4%; }
.lx-chip--pr { bottom: 6%; right: 4%; }

.lx-scrollhint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  translate: -50% 0;
  border: 0;
  color: var(--amber-4);
  font-size: 11px;
}
.lx-scrollhint i {
  width: 1px;
  height: 36px;
  background: linear-gradient(var(--amber-1), transparent);
  animation: lx-drip 1.8s ease-in-out infinite;
  transform-origin: top;
}
@keyframes lx-drip {
  0% { transform: scaleY(0); opacity: 1; }
  70% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

@media (min-width: 900px) {
  .lx-hero { display: grid; align-items: center; }
  .lx-hero__grid {
    grid-template-areas: 'copy product' 'signup product';
    grid-template-columns: minmax(0, 1.15fr) minmax(400px, .85fr);
    column-gap: clamp(32px, 4vw, 64px);
    row-gap: 28px;
  }
  .lx-hero__copy { align-self: end; }
  .hero-signup { align-self: start; }
  .lx-scrollhint { display: flex; }
}

/* ── ticker ────────────────────────────────────────────────────────────── */
.lx-ticker {
  overflow: hidden;
  border-block: var(--bw) solid var(--amber-1);
  background: var(--amber-1);
  color: var(--bg-primary);
  font-weight: 700;
  font-size: clamp(14px, 1.6vw, 18px);
  box-shadow: 0 0 40px rgba(255, 184, 77, .25);
}
.lx-ticker__track {
  display: flex;
  width: max-content;
  animation: lx-marquee 38s linear infinite;
}
.lx-ticker span { padding: 14px 0; white-space: nowrap; }
.lx-ticker span::after { content: '/'; margin: 0 28px; opacity: .45; }
@keyframes lx-marquee { to { transform: translateX(-50%); } }

/* ── shared section rhythm ─────────────────────────────────────────────── */
.lx-block { margin-top: clamp(80px, 12vw, 160px); }
.lx-block h2,
.lx-work__intro h2 {
  max-width: 20ch;
  color: var(--amber-2);
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

/* ── drawn glyphs ──────────────────────────────────────────────────────── */
/* The tick and clock are drawn, not typed: ✓ and ◷ sit outside the
   self-hosted font's unicode-range and would fall back to a system face.
   The tick is exactly one character wide, so [ ] and [✓] never shift. */
.lx-tick {
  position: relative;
  display: inline-block;
  width: 1ch;
  height: 1em;
  vertical-align: -.12em;
}
.lx-tick::after {
  position: absolute;
  left: .14em;
  top: .24em;
  width: .5em;
  height: .26em;
  border-left: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0;
  content: '';
}
.is-done .lx-tick::after,
.lx-chip .lx-tick::after { opacity: 1; }
.lx-clock {
  position: relative;
  display: inline-block;
  width: .82em;
  height: .82em;
  border: 1.3px solid currentColor;
  border-radius: 50%;
  vertical-align: -.08em;
}
.lx-clock::after {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 28%;
  height: 34%;
  border-left: 1.3px solid currentColor;
  border-bottom: 1.3px solid currentColor;
  translate: -1px 0;
  content: '';
}

/* ── features: a workout played by scrolling ───────────────────────────── */
/* Without .is-scrub (no JS, or reduced motion) this is a plain two-column
   layout: every caption visible beside a still phone. lift.js adds .is-scrub
   and drives everything from one scroll progress value, so scrolling back
   plays the workout in reverse. */
.lx-work { margin-top: clamp(80px, 12vw, 160px); }
.lx-work__layout {
  display: grid;
  gap: 40px;
  align-items: center;
  margin-top: clamp(32px, 5vw, 56px);
}
.lx-work__captions { display: grid; gap: 40px; }
.lx-cap__n { margin-bottom: 8px; color: var(--amber-4); font-size: var(--fs-small); }
.lx-cap h3 {
  margin-bottom: 14px;
  color: var(--amber-1);
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -.045em;
  text-shadow: 0 0 32px rgba(255, 184, 77, .3);
}
.lx-cap > p:not(.lx-cap__n) { max-width: 36ch; font-size: clamp(15px, 1.35vw, 18px); }
.lx-cap__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.lx-cap__tags span {
  padding: 3px 8px;
  border: var(--bw) solid var(--tag-border-default);
  border-radius: var(--r-tag);
  background: var(--tag-bg-default);
  color: var(--amber-2);
  font-size: 12px;
}
.lx-work__stage { display: grid; place-items: center; }
/* The camera zooms by changing the phone's real width, never by scale().
   The UI inside is sized in cqw, so every frame is laid out and painted at
   its true size: text stays sharp mid-zoom instead of blurring until the
   browser re-rasterises. The glow is a gradient, not a filter, for the same
   reason. */
.lx-work__cam { position: relative; isolation: isolate; }
.lx-work__cam::before {
  position: absolute;
  inset: -12% -30%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(212, 148, 26, .2), transparent);
  content: '';
}
.lx-work__phone { --base: min(80vw, 330px); width: calc(var(--base) * var(--s, 1)); }
.lx-work__rail { display: none; }

@media (min-width: 900px) {
  .lx-work__layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) 2px; gap: 56px; }
}

/* scrub mode */
.lx-work.is-scrub .lx-work__track { height: 620vh; }
.lx-work.is-scrub .lx-work__sticky {
  position: sticky;
  top: 0;
  /* dvh follows mobile Safari's toolbar, so the panel always fills the
     visible screen; svh left a black strip once the toolbar hid. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  align-items: center;
}
.lx-work.is-scrub .lx-work__layout {
  margin-top: 0;
  height: 100%;
  padding-top: 44px;
  padding-bottom: env(safe-area-inset-bottom);
}
/* The phone is sized from the space its stage actually has (cqh), not from
   a guess at the viewport, so it fits under any caption on any screen. */
.lx-work.is-scrub .lx-work__stage { position: relative; align-self: stretch; container-type: size; }
.lx-work.is-scrub .lx-work__cam {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + var(--ty, 0%)));
}
.lx-work.is-scrub .lx-work__captions { display: grid; }
.lx-work.is-scrub .lx-cap {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.lx-work.is-scrub .lx-cap.is-active { opacity: 1; transform: none; pointer-events: auto; }
.lx-work.is-scrub .lx-cap.is-past { transform: translateY(-28px); }
.lx-work.is-scrub .lx-work__phone { --base: min(330px, 44cqh, 90cqw); }
.lx-work.is-scrub .lx-work__rail {
  display: block;
  align-self: center;
  width: 2px;
  height: 46vh;
  background: var(--border-default);
}
.lx-work__rail i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--amber-1);
  box-shadow: 0 0 12px var(--amber-1);
  transform: scaleY(var(--p, 0));
  transform-origin: top;
}
@media (max-width: 899px) {
  .lx-work.is-scrub .lx-work__layout {
    grid-template-rows: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding-top: 64px;
  }
  .lx-work.is-scrub .lx-cap h3 { font-size: clamp(30px, 8vw, 44px); margin-bottom: 8px; }
  .lx-work.is-scrub .lx-cap > p:not(.lx-cap__n) { font-size: 14px; }
  .lx-work.is-scrub .lx-cap__tags { display: none; }
  .lx-work.is-scrub .lx-work__stage { align-self: stretch; }
  /* No side room for the progress line; as a grid item it would steal the
     phone's row. */
  .lx-work.is-scrub .lx-work__rail { display: none; }
  /* A zoomed phone slides under the caption, never over its text. */
  .lx-work.is-scrub .lx-work__captions {
    position: relative;
    z-index: 2;
    margin-inline: calc(-1 * max(var(--edge), env(safe-area-inset-left)));
    padding: 0 max(var(--edge), env(safe-area-inset-left)) 20px;
    background: linear-gradient(var(--bg-primary) 75%, transparent);
  }
  .lx-work.is-scrub .lx-work__phone { --base: min(80cqw, 43cqh); }
}

/* ── rebuilt app UI inside the phone ─────────────────────────────────────── */
/* Sized in em against the phone's own width (cqw), so 1em is the app's 12pt
   body at any phone size and the camera can zoom without blurring pixels. */
.lx-screen { container-type: size; background: var(--bg-deep); }
.lx-ui {
  position: absolute;
  inset: 0;
  font-size: 3.1cqw;
  line-height: 1.4;
  color: var(--amber-3);
  text-transform: none;
  transition: opacity .5s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}
.lx-ui p, .lx-ui li { text-transform: none; }
.lx-ui--progress, .lx-ui--import { opacity: 0; transform: translateX(12%); }
.lx-screen[data-work-screen="1"] .lx-ui--workout,
.lx-screen[data-work-screen="2"] .lx-ui--workout,
.lx-screen[data-work-screen="2"] .lx-ui--progress { opacity: 0; transform: translateX(-12%); }
.lx-screen[data-work-screen="1"] .lx-ui--progress,
.lx-screen[data-work-screen="2"] .lx-ui--import { opacity: 1; transform: none; }
.lx-ui--import { width: 100%; height: 100%; object-fit: cover; }

.lx-ui__status { display: flex; justify-content: space-between; align-items: center; padding: 1.6em 2.4em .9em 3em; color: #fff; font-weight: 700; font-size: 1.25em; }
.lx-ui__batt { padding: 0 .35em; border-radius: .35em; background: #fff; color: #000; font-size: .75em; }
.lx-ui__head { display: flex; justify-content: space-between; align-items: center; padding: .6em 1.2em 1em; border-bottom: 1px solid var(--border-default); }
.lx-ui__path { color: var(--amber-2); font-size: 1.3em; }
.lx-ui__elapsed { color: var(--amber-2); font-size: 1em; }
.lx-ui__end { padding: .5em 1em; border: 1px solid var(--border-active); border-radius: .5em; color: var(--amber-2); }
.lx-ui__rest {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5em;
  height: 0;
  padding: 0 1.2em;
  overflow: hidden;
  background: var(--amber-1);
  color: var(--bg-primary);
  transition: height .45s cubic-bezier(.2, .8, .2, 1);
}
.lx-ui__rest.is-on { height: 4.4em; }
.lx-ui__rest p { margin-right: auto; }
.lx-ui__rest b { font-size: 2em; font-variant-numeric: tabular-nums; }
.lx-ui__pill { padding: .2em .6em; border: 1px solid var(--bg-primary); border-radius: 1em; font-size: .9em; }
.lx-ui__rest i { position: absolute; left: 0; bottom: 0; width: 100%; height: .3em; background: rgba(14, 11, 6, .55); transform-origin: left; transform: scaleX(var(--rest, 1)); }
.lx-ui__label { padding: 1.2em 1.2em .8em; color: var(--amber-3); font-size: 1.1em; }
.lx-ui__label--row { display: flex; justify-content: space-between; align-items: center; }
.lx-ui__card { margin: 0 1.2em 1em; border: 1px solid var(--border-default); border-radius: 1em; overflow: hidden; }
.lx-ui__title { padding: 1em 1.1em .3em; color: var(--amber-2); font-weight: 700; font-size: 1.25em; }
.lx-ui__meta { display: flex; align-items: center; gap: .4em; padding: 0 1.3em .8em; font-size: 1em; }
.lx-ui__chip { padding: .2em .6em; border: 1px solid var(--border-default); border-radius: .5em; color: var(--amber-2); font-size: .9em; }
.lx-ui__notes { margin: 0 1.3em .8em; padding: .5em .8em; border: 1px solid var(--border-default); border-radius: .5em; color: var(--amber-4); }
.lx-ui__sets li {
  display: grid;
  grid-template-columns: 3.2em 1fr auto 1fr auto 3.4em;
  align-items: center;
  gap: .4em;
  padding: .3em 1.3em;
  transition: background .3s;
}
.lx-ui__sets li > span, .lx-ui__sets b {
  display: grid;
  place-items: center;
  height: 2.2em;
  border: 1px solid var(--border-default);
  border-radius: .45em;
  color: var(--amber-2);
  font-weight: 400;
  font-size: 1.1em;
  font-variant-numeric: tabular-nums;
}
.lx-ui__sets li > span:first-child { place-items: center start; padding-left: .5em; font-size: 1em; }
.lx-ui__sets b { display: flex; justify-content: center; align-items: center; white-space: nowrap; font-weight: 700; transition: background .2s, color .2s; }
.lx-ui__sets b .lx-tick { height: 1em; }
.lx-ui__sets em { font-style: normal; font-size: .85em; }
.lx-ui__sets li.is-done { background: var(--tag-bg-default); }
.lx-ui__sets li.is-done > span { border-color: var(--border-active); background: var(--tag-bg-active); color: var(--amber-1); }
.lx-ui__sets li.is-done b { border-color: var(--amber-1); background: var(--amber-1); color: var(--bg-primary); }
.lx-ui__sets li.is-done .lx-tick::after { opacity: 1; }
.lx-ui__add { padding: .7em; border-top: 1px solid var(--border-default); text-align: center; font-size: .95em; }
.lx-ui__toast {
  position: absolute;
  top: 5.6em;
  left: 1.2em;
  right: 1.2em;
  padding: 1em 1.2em;
  border: 1px solid var(--amber-1);
  border-radius: 1em;
  background: var(--bg-secondary);
  color: var(--amber-2);
  box-shadow: 0 0 3em rgba(255, 184, 77, .35);
  opacity: 0;
  transform: translateY(-120%) scale(.9);
  transition: opacity .35s, transform .55s cubic-bezier(.3, 1.4, .5, 1);
}
.lx-ui__toast.is-on { opacity: 1; transform: none; }
.lx-ui__toast p:first-child { color: var(--amber-1); font-weight: 700; font-size: 1.1em; }
.lx-ui__toast b { color: var(--amber-1); font-size: 2.2em; letter-spacing: -.03em; }

.lx-ui__nav { position: relative; display: flex; align-items: center; justify-content: center; padding: 1em 1.2em; }
.lx-ui__nav p { color: var(--amber-2); font-size: 1.35em; }
.lx-ui__back { position: absolute; left: 1.2em; display: grid; place-items: center; width: 2.4em; height: 2.4em; border: 1px solid var(--border-default); border-radius: .5em; color: var(--amber-2); }
.lx-ui__tabs { display: flex; margin: 0 1.2em; border-bottom: 1px solid var(--border-default); }
.lx-ui__tabs span { flex: 1; padding: .7em 0; text-align: center; color: var(--amber-4); font-size: 1.1em; }
.lx-ui__tabs .is-on { color: var(--amber-2); border-bottom: 1px solid var(--amber-2); }
.lx-ui__pr { display: grid; grid-template-columns: 1fr auto; margin: 0 1.2em .8em; padding: .9em 1.1em; border: 1px solid var(--border-default); border-radius: .8em; }
.lx-ui__pr p { grid-column: 1; }
.lx-ui__pr b { grid-column: 1; color: var(--amber-2); font-size: 2.3em; letter-spacing: -.02em; line-height: 1.15; }
.lx-ui__pr time { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--amber-3); }
.lx-ui__pr i { margin-left: .4em; padding: 0 .4em; border-radius: .2em; background: var(--amber-1); color: var(--bg-primary); font-style: normal; font-weight: 700; font-size: .85em; }
.lx-ui__pr.is-new { border-color: var(--amber-1); box-shadow: 0 0 2.4em rgba(255, 184, 77, .18); }
.lx-ui__pr.is-new b { color: var(--amber-1); }
.lx-ui__chart { margin: 0 1.2em; padding: 1em .6em; border: 1px solid var(--border-default); border-radius: .8em; }
.lx-ui__chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.lx-ui__chart .grid { fill: var(--border-default); }
.lx-ui__chart .pt, .lx-ui__chart .tr { fill: var(--amber-2); transition: opacity .25s; }
.lx-ui__chart .pt.last { fill: var(--amber-1); }
.lx-ui__chart text { fill: var(--amber-3); font-family: inherit; font-size: 11px; }
.lx-ui__seg { display: flex; justify-content: space-around; padding: 1.2em; color: var(--amber-3); font-size: 1.1em; }
.lx-ui__seg .is-on { color: var(--amber-2); }

/* ── beta ──────────────────────────────────────────────────────────────── */
.lx-beta { display: grid; gap: 40px; }
.lx-beta__steps { display: grid; gap: 16px; counter-reset: step; }
.lx-beta__steps li {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px;
  border: var(--bw) solid var(--border-default);
  border-radius: var(--r-card);
  background: var(--bg-primary);
  transition: border-color .4s, background .4s;
}
.lx-beta__steps li.is-in { border-color: var(--border-active); background: var(--bg-secondary); }
.lx-beta__number {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: var(--bw) solid var(--border-active);
  border-radius: 50%;
  color: var(--amber-1);
  font-size: var(--fs-small);
  font-weight: 700;
}
.lx-beta__steps strong { display: block; margin-bottom: 4px; color: var(--amber-2); font-weight: 500; }
@media (min-width: 900px) {
  .lx-beta { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; }
  .lx-beta__steps li:not(:last-child)::after {
    position: absolute;
    left: 42px;
    top: 100%;
    width: 1px;
    height: 16px;
    background: var(--border-active);
    content: '';
  }
}

/* ── join finale ───────────────────────────────────────────────────────── */
.lx-join {
  position: relative;
  margin-top: clamp(96px, 14vw, 180px);
  padding-block: clamp(80px, 12vw, 160px);
  border-top: var(--bw) solid var(--border-default);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.lx-join::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(255, 184, 77, .16), transparent 60%),
    radial-gradient(circle, var(--border-default) 1px, transparent 1.5px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  content: '';
}
.lx-join .section-label { display: inline-block; }
.lx-join__title {
  max-width: none;
  margin: 8px 0 16px;
  color: var(--amber-1);
  font-size: clamp(56px, 12vw, 168px);
  line-height: .95;
  letter-spacing: -.06em;
  text-shadow: 0 0 60px rgba(255, 184, 77, .45), 0 0 4px rgba(255, 184, 77, .7);
}
.lx-join__lede { max-width: 44ch; margin: 0 auto; color: var(--amber-2); font-size: var(--fs-lead); }
.lx-join__form { max-width: 560px; margin: 36px auto 0; text-align: left; }
.lx-join__form .field { box-shadow: 0 0 40px rgba(212, 148, 26, .12); }

/* ── scroll reveal ─────────────────────────────────────────────────────── */
.js-reveal .lx-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1);
}
.js-reveal .lx-reveal.is-in { opacity: 1; transform: none; }

/* ── reduced motion: everything lands in its final state ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .lx-ticker__track, .lx-scrollhint i { animation: none !important; }
  .lx-ticker__track { flex-wrap: wrap; width: auto; justify-content: center; }
  .lx-ticker__track span:nth-child(n+8) { display: none; }
  .lx-shot, .lx-chip { transition: none; }
}