/* ═══════════════════════════════════════════════════════════════════════════
   THE LANDING — clean fintech (redesign 2026-10-05, Daniel's style 2)
   Loaded only by index.html, after main.css. Tokens only — no raw colours that
   could not follow the light theme.

   MOTION CONTRACT (Daniel, 2026-10-05): interactive and premium, with no
   stutter, and text that never sticks or disappears while scrolling.
     · Every scroll effect is a CSS scroll-driven animation (animation-timeline:
       view()). It is TIED TO THE SCROLL POSITION, so scrolling up plays it back
       ("it returns to itself"), it runs on the compositor (opacity/transform
       only), and it can never be left half-way by a missed observer.
     · Where the browser lacks scroll timelines, or motion is off, nothing
       animates and everything is simply visible. The base state is ALWAYS the
       finished state; only the enhancement starts from hidden.
     · The page never takes the scroll away from the reader.
   ═══════════════════════════════════════════════════════════════════════════ */

.landing-body { background: var(--black); overflow-x: hidden; }
.lx { position: relative; z-index: 1; }

.lx-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.lx-section { padding: 112px 0; position: relative; }

.lx-kicker {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--accent, var(--moon));
  margin-bottom: 12px;
}
.lx-title {
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--pure-white);
  margin-bottom: 14px;
  text-wrap: balance;
}
.lx-sub { font-size: 1.08rem; line-height: 1.7; color: var(--gray-200); max-width: 46ch; }
.lx-fine { margin-top: 22px; font-size: 0.86rem; line-height: 1.6; color: var(--gray-300); max-width: 46ch; }
.lx-head { margin-bottom: 48px; }
.lx-sample {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 500; color: var(--gray-300);
  padding: 2px 9px; border-radius: var(--radius-pill);
  border: 1px solid var(--edge);
}

/* ─── 1 · HERO ─────────────────────────────────────────────────────────────── */

.lx-hero { padding: 128px 0 56px; }
.lx-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(36px, 4.5vw, 68px);
  align-items: center;
}
.lx-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--tint); border: 1px solid var(--edge);
  font-size: 0.8rem; font-weight: 500; color: var(--gray-100);
}
.lx-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--win); }
.lx-h1 {
  margin: 22px 0 20px;
  font-size: clamp(2.3rem, 4.1vw, 3.7rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--pure-white);
}
.lx-h1 > span { display: block; }
.lx-h1-b { color: var(--gray-300); }
.lx-lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.7; color: var(--gray-200); max-width: 40ch; }
.lx-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.lx-note { margin-top: 18px; font-size: 0.82rem; line-height: 1.6; color: var(--gray-300); max-width: 46ch; }

/* The opening: one short, orchestrated rise. With motion off it is simply there. */
@keyframes lxIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.anim-off) .lx-hero-copy > * { animation: lxIn .7s cubic-bezier(.2,.7,.2,1) both; }
  html:not(.anim-off) .lx-hero-copy > :nth-child(2) { animation-delay: .06s; }
  html:not(.anim-off) .lx-hero-copy > :nth-child(3) { animation-delay: .12s; }
  html:not(.anim-off) .lx-hero-copy > :nth-child(4) { animation-delay: .18s; }
  html:not(.anim-off) .lx-hero-copy > :nth-child(5) { animation-delay: .24s; }
  html:not(.anim-off) .lx-tour { animation: lxIn .9s cubic-bezier(.2,.7,.2,1) .15s both; }
}

/* ─── THE TOUR ──────────────────────────────────────────────────────────────
   A product frame that walks through four screens. Screens cross-fade with a
   small lift; at the end the frame "rewinds" — the screen steps back and
   softens, a hairline of gold sweeps across the top, the progress bars drain —
   and the first screen rises again. */
.lx-tour {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 22px;
  box-shadow: 0 1px 2px var(--shadow-tight), 0 40px 80px -48px var(--shadow-lg);
  overflow: hidden;
  isolation: isolate;
}
.lx-tour-bar {
  display: flex; align-items: center; gap: 12px;
  height: 46px; padding: 0 16px;
  border-bottom: 1px solid var(--edge);
}
.lx-tour-dots { display: inline-flex; gap: 6px; }
.lx-tour-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-700); }
.lx-tour-title { font-size: 0.85rem; font-weight: 700; color: var(--gray-100); letter-spacing: 0.01em; }
.lx-tour-bar .lx-sample { margin-inline-start: auto; }
.lx-tour-pause {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--edge); color: var(--gray-200);
  cursor: pointer; transition: background var(--t), color var(--t);
}
.lx-tour-pause:hover { background: var(--tint); color: var(--white); }
.lx-tour-pause:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lx-tour-pause .i-play { display: none; }
.lx-tour.is-paused .lx-tour-pause .i-play { display: block; }
.lx-tour.is-paused .lx-tour-pause .i-pause { display: none; }
.lx-tour.is-static .lx-tour-pause { display: none; }

.lx-sweep {
  position: absolute; top: 45px; left: 0; height: 1px; width: 40%;
  background: linear-gradient(90deg, transparent, var(--accent, var(--moon)), transparent);
  opacity: 0; transform: translateX(-110%);
  pointer-events: none; z-index: 3;
}
.lx-tour.is-rewind .lx-sweep { animation: lxSweep .9s cubic-bezier(.4,0,.2,1) both; }
@keyframes lxSweep {
  0%   { opacity: 0; transform: translateX(-110%); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(260%); }
}

/* All four screens share ONE grid cell, so the frame is as tall as the tallest screen in
   whichever language and width — nothing is ever clipped, and nothing jumps between screens. */
.lx-stage { position: relative; display: grid; }
.lx-scr {
  grid-area: 1 / 1;
  position: relative;
  padding: 22px 24px;
  opacity: 0;
  transform: translateY(14px) scale(.99);
  transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  visibility: hidden;
}
.lx-scr.on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
/* the one leaving drifts up rather than down, so the motion reads as a sequence */
.lx-scr.out { visibility: visible; opacity: 0; transform: translateY(-10px) scale(.99); }
.lx-tour.is-rewind .lx-scr.on {
  opacity: 0; transform: scale(.95); filter: blur(6px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.4,0,.2,1), filter .5s ease;
}
/* inside a screen, its parts arrive in order — only while it is the active one */
.lx-scr > * { transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.lx-tour.is-playing .lx-scr:not(.on) > * { opacity: 0; transform: translateY(8px); }
.lx-tour.is-playing .lx-scr.on > :nth-child(2) { transition-delay: .12s; }
.lx-tour.is-playing .lx-scr.on > :nth-child(3) { transition-delay: .24s; }
.lx-tour.is-playing .lx-scr.on > :nth-child(4) { transition-delay: .36s; }
.lx-tour.is-playing .lx-scr.on > :nth-child(5) { transition-delay: .48s; }

.lx-tour-nav {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--edge);
}
.lx-seg {
  position: relative;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  padding: 12px 14px 14px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--gray-300); font: inherit; font-size: 0.8rem; font-weight: 600;
  text-align: start;
  transition: color var(--t), background var(--t);
}
.lx-seg + .lx-seg { border-inline-start: 1px solid var(--edge); }
.lx-seg:hover { color: var(--white); background: var(--tint); }
.lx-seg.on { color: var(--pure-white); }
.lx-seg:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.lx-seg i { display: block; height: 2px; border-radius: 2px; background: var(--gray-700); overflow: hidden; }
.lx-seg b { display: block; height: 100%; width: 0; background: var(--accent, var(--moon)); }
.lx-seg.done b { width: 100%; }
.lx-tour.is-static .lx-seg.on b { width: 100%; }
.lx-tour.is-rewind .lx-seg b { width: 0 !important; transition: width .55s cubic-bezier(.4,0,.2,1); }

/* screen 0 — the journal with the coach's reading */
.lx-j-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--edge); }
.lx-j-month { font-size: 1rem; font-weight: 700; color: var(--pure-white); }
.lx-j-chips { display: flex; gap: 6px; margin-top: 6px; }
.lx-chip { font-size: 0.7rem; font-weight: 600; padding: 2px 7px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.lx-chip.w { background: var(--win-bg); color: var(--win-text); }
.lx-chip.l { background: var(--loss-bg); color: var(--loss-text); }
.lx-j-rates { display: flex; gap: 22px; }
.lx-rate { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lx-rate b { font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--pure-white); }
.lx-rate span { font-size: 0.66rem; font-weight: 600; color: var(--gray-300); letter-spacing: 0.04em; }
.lx-rate--gold b { color: var(--accent, var(--moon)); }
.lx-j-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.lx-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.lx-cal span {
  aspect-ratio: 1; border-radius: 6px;
  display: grid; place-items: center;
  font-size: 0.6rem; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--surface-sunk); border: 1px solid var(--edge); color: var(--gray-400);
  direction: ltr;   /* "-85", never "85-" inside the RTL frame */
}
.lx-cal span.w { background: color-mix(in srgb, var(--win) 14%, var(--surface-sunk)); border-color: color-mix(in srgb, var(--win) 30%, transparent); color: var(--win-text); }
.lx-cal span.l { background: color-mix(in srgb, var(--loss) 14%, var(--surface-sunk)); border-color: color-mix(in srgb, var(--loss) 30%, transparent); color: var(--loss-text); }
.lx-cal span.hot { box-shadow: 0 0 0 2px var(--accent, var(--moon)); }
.lx-read { background: var(--surface-sunk); border: 1px solid var(--edge); border-radius: 14px; padding: 14px 14px 12px; }
.lx-read-tag { font-size: 0.68rem; font-weight: 600; color: var(--accent, var(--moon)); margin-bottom: 8px; }
.lx-read-day { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lx-read-day > b { font-size: 1.15rem; font-weight: 700; }
.lx-read-day .w { color: var(--win-text); }
.lx-read-sep { width: 1px; height: 18px; background: var(--edge-hi); }
.lx-read-g { font-size: 0.74rem; color: var(--gray-200); display: inline-flex; align-items: center; gap: 6px; }
.lx-read-g b.L { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--loss-bg); color: var(--loss-text); font-size: 0.78rem; }
.lx-read-q { font-size: 0.86rem; line-height: 1.55; color: var(--white); margin-bottom: 8px; }
.lx-read-fb { font-size: 0.78rem; line-height: 1.55; color: var(--gray-200); padding-top: 8px; border-top: 1px solid var(--edge); }

/* chat bubbles (tour screen 1 and the coach panel) */
.lx-msg { max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: 0.9rem; line-height: 1.6; margin-bottom: 12px; }
.lx-msg--me { margin-inline-start: auto; background: var(--surface-2); border: 1px solid var(--edge); color: var(--white); border-start-end-radius: 6px; }
.lx-msg--coach { background: var(--surface-sunk); border: 1px solid var(--edge); color: var(--gray-100); border-start-start-radius: 6px; }
.lx-msg--coach p + p { margin-top: 6px; }
.lx-msg-who { display: block; font-size: 0.7rem; font-weight: 700; color: var(--accent, var(--moon)); margin-bottom: 4px; }
.lx-insight { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--gray-100); padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent, var(--moon)) 30%, transparent); background: var(--moon-soft); }
.lx-insight-chip { flex: none; font-size: 0.7rem; font-weight: 700; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--accent, var(--moon)); color: var(--on-accent); }

/* screen 2 — analytics */
.lx-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.lx-kpi { background: var(--surface-sunk); border: 1px solid var(--edge); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.lx-kpi span { font-size: 0.7rem; color: var(--gray-300); }
.lx-kpi b { font-size: 1.35rem; font-weight: 700; color: var(--pure-white); line-height: 1.15; }
.lx-kpi b.gold { color: var(--accent, var(--moon)); }
.lx-kpi b.w { color: var(--win-text); }
.lx-kpi i { font-style: normal; font-size: 0.68rem; color: var(--win-text); }
.lx-mini-chart { width: 100%; height: 150px; display: block; }
.lx-bars rect.p { fill: color-mix(in srgb, var(--win) 45%, transparent); }
.lx-bars rect.n { fill: color-mix(in srgb, var(--loss) 45%, transparent); }
.lx-line { fill: none; stroke: var(--accent, var(--moon)); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.lx-scr-cap { margin-top: 10px; font-size: 0.74rem; color: var(--gray-300); }

/* screen 3 + the News+ panel */
.lx-n-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.lx-n-kicker { font-size: 0.74rem; font-weight: 600; color: var(--gray-300); }
.lx-impact { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; font-weight: 600; color: var(--loss-text); padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--loss) 45%, transparent); }
.lx-impact i { width: 5px; height: 5px; border-radius: 50%; background: var(--loss-text); }
.lx-impact span { margin-inline-start: 4px; }
.lx-n-name { font-size: 1.45rem; font-weight: 800; line-height: 1.25; color: var(--pure-white); }
.lx-n-when { margin-top: 4px; font-size: 0.86rem; color: var(--accent, var(--moon)); }
.lx-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; max-width: 360px; }
.lx-count > div { background: var(--surface-sunk); border: 1px solid var(--edge); border-radius: 12px; padding: 10px 4px 8px; text-align: center; }
.lx-count b { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--pure-white); font-variant-numeric: tabular-nums; }
.lx-count span { display: block; margin-top: 6px; font-size: 0.66rem; color: var(--gray-300); }
.lx-n-why { margin-top: 14px; font-size: 0.84rem; line-height: 1.6; color: var(--gray-200); }
.lx-n-sub { margin: 18px 0 8px; font-size: 0.78rem; font-weight: 600; color: var(--gray-300); }

/* ─── 2 · THE COACH ──────────────────────────────────────────────────────── */

.lx-coach-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.lx-flow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  min-height: 360px;
}
.lx-flow-col { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; z-index: 1; }
.lx-node {
  background: var(--surface); border: 1px solid var(--edge); border-radius: 14px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 2px;
}
.lx-node b { font-size: 0.92rem; font-weight: 700; color: var(--pure-white); }
.lx-node span { font-size: 0.78rem; color: var(--gray-300); }
.lx-node--out { border-color: color-mix(in srgb, var(--accent, var(--moon)) 28%, var(--edge)); }
.lx-node--out b { font-weight: 600; color: var(--white); }
.lx-flow-core {
  position: relative; z-index: 1;
  width: 112px; height: 112px; border-radius: 50%;
  display: grid; place-items: center; align-content: center; gap: 6px;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent, var(--moon)) 45%, var(--edge));
  color: var(--pure-white); font-size: 0.82rem; font-weight: 700;
}
.lx-flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }
.lx-flow-lines path { fill: none; stroke: var(--edge-hi); stroke-width: 1.2; vector-effect: non-scaling-stroke; }

/* ─── 3 · TOOLS ─────────────────────────────────────────────────────────── */

.lx-tabs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  margin-bottom: 22px;
}
.lx-tab {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px;
  align-items: center; text-align: start;
  padding: 14px 16px; border-radius: 16px;
  background: transparent; border: 1px solid var(--edge);
  color: var(--gray-200); font: inherit; cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.lx-tab svg { grid-row: 1 / 3; width: 22px; height: 22px; color: var(--gray-300); }
.lx-tab-name { font-size: 0.95rem; font-weight: 700; color: var(--white); }
.lx-tab-line { font-size: 0.78rem; color: var(--gray-300); }
.lx-tab:hover { background: var(--tint); }
.lx-tab.on { background: var(--surface); border-color: color-mix(in srgb, var(--accent, var(--moon)) 50%, var(--edge)); }
.lx-tab.on svg { color: var(--accent, var(--moon)); }
.lx-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.lx-panel {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 56px);
  align-items: center;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 22px;
  padding: clamp(24px, 3.5vw, 44px);
}
.lx-panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.anim-off) .lx-panel.on { animation: lxPanelIn .5s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes lxPanelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lx-panel-title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.015em; color: var(--pure-white); margin-bottom: 12px; text-wrap: balance; }
.lx-panel-text { font-size: 1rem; line-height: 1.7; color: var(--gray-200); margin-bottom: 24px; max-width: 42ch; }
.lx-demo { background: var(--surface-sunk); border: 1px solid var(--edge); border-radius: 18px; padding: 18px; min-width: 0; }
.lx-demo-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

.lx-qchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lx-qchip, .lx-seg2 button, .lx-jsteps button, .lx-ev {
  font: inherit; cursor: pointer;
}
.lx-qchip { min-height: 36px; font-size: 0.8rem; padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--edge-hi); background: transparent; color: var(--gray-100); transition: background var(--t), border-color var(--t); }
.lx-qchip:hover { background: var(--tint); }
.lx-qchip.on { border-color: var(--accent, var(--moon)); color: var(--pure-white); background: var(--moon-soft); }
.lx-qchip:focus-visible, .lx-seg2 button:focus-visible, .lx-jsteps button:focus-visible, .lx-ev:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lx-qa > * { transition: opacity .35s ease, transform .35s ease; }
.lx-qa.swap > * { opacity: 0; transform: translateY(6px); }

.lx-seg2 { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--edge); }
.lx-seg2 button { min-height: 34px; font-size: 0.78rem; font-weight: 600; padding: 5px 13px; border-radius: var(--radius-pill); border: 0; background: transparent; color: var(--gray-300); transition: background var(--t), color var(--t); }
.lx-seg2 button.on { background: var(--surface-2); color: var(--pure-white); box-shadow: inset 0 0 0 1px var(--edge-hi); }
.lx-chart-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.lx-chart-kpis > div { display: flex; flex-direction: column; gap: 2px; }
.lx-chart-kpis span { font-size: 0.72rem; color: var(--gray-300); }
.lx-chart-kpis b { font-size: 1.25rem; font-weight: 700; color: var(--pure-white); }
.lx-chart { width: 100%; height: auto; display: block; }
.lx-zero { stroke: var(--grid-line); stroke-width: 1; stroke-dasharray: 3 4; }
.lx-area { fill: color-mix(in srgb, var(--accent, var(--moon)) 7%, transparent); stroke: none; }
.lx-demo--chart.is-pnl .lx-line { stroke: var(--win-text); }
.lx-demo--chart.is-pnl .lx-area { fill: color-mix(in srgb, var(--win) 14%, transparent); }

.lx-evlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lx-ev { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--edge); background: var(--surface); color: var(--white); text-align: start; transition: background var(--t), border-color var(--t); }
.lx-ev:hover { background: var(--surface-2); }
.lx-ev-dots { display: inline-flex; gap: 3px; }
.lx-ev-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--gray-600); }
.lx-ev-dots i.on { background: var(--accent, var(--moon)); }
.lx-ev-dots.i3 i.on { background: var(--loss-text); }
.lx-ev-name { font-size: 0.86rem; font-weight: 600; min-width: 0; }
.lx-ev-when { font-size: 0.76rem; color: var(--gray-300); white-space: nowrap; }
.lx-ev-why { grid-column: 1 / -1; font-size: 0.8rem; line-height: 1.55; color: var(--gray-200); display: none; padding-top: 4px; }
.lx-ev[aria-expanded="true"] { border-color: var(--edge-hi); }
.lx-ev[aria-expanded="true"] .lx-ev-why { display: block; }

.lx-jsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.lx-jsteps button { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 2px; text-align: start; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--edge); background: var(--surface); color: var(--gray-200); transition: border-color var(--t), background var(--t); }
.lx-jsteps i { grid-row: 1 / 3; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 0.72rem; font-weight: 700; background: var(--surface-sunk); border: 1px solid var(--edge-hi); color: var(--gray-200); }
.lx-jsteps b { font-size: 0.86rem; color: var(--white); }
.lx-jsteps span { font-size: 0.72rem; color: var(--gray-300); line-height: 1.4; }
.lx-jsteps button.on { border-color: color-mix(in srgb, var(--accent, var(--moon)) 50%, var(--edge)); background: var(--surface-2); }
.lx-jsteps button.on i { background: var(--accent, var(--moon)); color: var(--on-accent); border-color: transparent; }
.lx-jview { position: relative; min-height: 168px; }
.lx-jpane { display: none; }
.lx-jpane.on { display: grid; gap: 10px; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.anim-off) .lx-jpane.on { animation: lxPanelIn .4s cubic-bezier(.2,.7,.2,1) both; }
}
.lx-jrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lx-jlabel { width: 74px; font-size: 0.74rem; color: var(--gray-300); }
.lx-pill, .lx-check { font-size: 0.76rem; padding: 4px 11px; border-radius: var(--radius-pill); border: 1px solid var(--edge); color: var(--gray-200); background: var(--surface); }
.lx-pill.on { border-color: var(--edge-hi); color: var(--pure-white); background: var(--surface-2); }
.lx-check::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--edge-hi); margin-inline-end: 6px; vertical-align: -1px; }
.lx-check.on::before { background: var(--win); border-color: var(--win); }
.lx-wl { width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; font-size: 0.8rem; font-weight: 700; border: 1px solid var(--edge); color: var(--gray-300); }
.lx-wl.on-l { background: var(--loss-bg); color: var(--loss-text); border-color: color-mix(in srgb, var(--loss) 45%, transparent); }
.lx-jhint { font-size: 0.72rem; color: var(--gray-300); }
.lx-jq { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--edge); font-size: 0.86rem; line-height: 1.55; color: var(--white); }
.lx-jq i { font-style: normal; font-size: 0.74rem; font-weight: 700; color: var(--accent, var(--moon)); }
.lx-fb { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--edge); border-inline-start: 3px solid var(--win); font-size: 0.86rem; line-height: 1.55; color: var(--white); }
.lx-fb b { font-size: 0.74rem; color: var(--win-text); }
.lx-fb--fix { border-inline-start-color: var(--accent, var(--moon)); }
.lx-fb--fix b { color: var(--accent, var(--moon)); }

/* ─── 4 · THREE STEPS ─────────────────────────────────────────────────────── */

.lx-steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lx-step { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--edge); border-radius: 18px; padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 8px; }
.lx-step i { font-style: normal; font-size: 0.78rem; font-weight: 700; color: var(--accent, var(--moon)); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sunk); border: 1px solid var(--edge-hi); margin-bottom: 6px; }
.lx-step b { font-size: 1.15rem; font-weight: 800; color: var(--pure-white); }
.lx-step span { font-size: 0.92rem; line-height: 1.65; color: var(--gray-200); }
.lx-steps-line { position: absolute; z-index: 0; top: 43px; inset-inline: 40px; height: 1px; background: var(--edge); }
.lx-steps-line span { display: block; height: 100%; background: var(--accent, var(--moon)); transform-origin: right; transform: scaleX(1); }
:root[data-lang="en"] .lx-steps-line span { transform-origin: left; }

/* ─── 5 · THE SIMULATOR (restyled; logic in js/landing.js) ────────────────── */

.sim .sim-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px);
  background: var(--surface); border: 1px solid var(--edge); border-radius: 22px;
  padding: clamp(22px, 3.5vw, 40px);
  box-shadow: none;
}
.sim .sim-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label out" "range range"; gap: 8px 12px; margin-bottom: 20px; }
.sim .sim-label { grid-area: label; font-size: 0.9rem; font-weight: 600; color: var(--white); }
.sim .sim-out { grid-area: out; font-size: 0.95rem; font-weight: 700; color: var(--pure-white); }
.sim .sim-range { grid-area: range; width: 100%; accent-color: var(--accent, var(--moon)); height: 28px; }
.sim .sim-behave-label { margin: 10px 0 10px; font-size: 0.9rem; font-weight: 600; color: var(--white); }
.sim .sim-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sim .sim-toggle {
  min-height: 48px; padding: 10px 14px; border-radius: 14px;
  border: 1px solid var(--edge-hi); background: var(--surface-sunk); color: var(--gray-100);
  font: inherit; font-size: 0.86rem; text-align: start; cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.sim .sim-toggle:hover { background: var(--tint); }
.sim .sim-toggle.on { border-color: color-mix(in srgb, var(--loss) 60%, transparent); background: var(--loss-bg); color: var(--loss-text); }
.sim .sim-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sim .sim-readout { background: var(--surface-sunk); border: 1px solid var(--edge); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 16px; box-shadow: none; }
.sim-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sim-fact { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--edge); border-radius: 14px; padding: 12px 14px; }
.sim-fact-label { font-size: 0.74rem; color: var(--gray-300); }
.sim-fact-val { font-size: 1.45rem; font-weight: 800; color: var(--pure-white); }
.sim-fact-val.w { color: var(--win-text); }
.sim-fact-note { font-size: 0.7rem; color: var(--gray-300); line-height: 1.4; }
.sim .sim-note { font-size: 0.82rem; color: var(--gray-300); line-height: 1.6; }

/* ─── 8 · CLOSE ──────────────────────────────────────────────────────────── */
.lx-close { padding: 96px 0 104px; }
/* The last screen is one card: the line, the question, two actions. */
.lx-close-card {
  max-width: 860px; margin: 0 auto; text-align: center;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 28px;
  padding: clamp(36px, 6vw, 64px) clamp(20px, 5vw, 56px);
  position: relative; overflow: hidden;
}
.lx-close-card::before {   /* a hairline of gold along the top edge — the page's one accent here */
  content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent, var(--moon)), transparent); opacity: .7;
}
.lx-close-card .close-quote { font-size: 1rem; line-height: 1.75; color: var(--gray-200); max-width: 52ch; margin: 0 auto 26px; }
.lx-close-card .close-title { font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 800; letter-spacing: -0.02em; color: var(--pure-white); margin-bottom: 12px; }
.lx-close-card .close-sub { font-size: 1.05rem; line-height: 1.7; color: var(--gray-200); max-width: 46ch; margin: 0 auto 28px; }
.lx-close-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 18px; }
.lx-close-card .close-alt { font-size: 0.88rem; margin-bottom: 8px; }
.lx-close-card .close-alt a { color: var(--gray-100); text-decoration: underline; text-underline-offset: 3px; }
.lx-close-card .close-fine { font-size: 0.8rem; color: var(--gray-300); }
@media (max-width: 760px) { .lx-close-actions .btn { flex: 1 1 100%; } }

/* ═══ SCROLL-LINKED MOTION — reversible, compositor-only, enhancement only ═══ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.anim-off) .lx-rise {
      animation: lxRise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    html:not(.anim-off) .lx-flow-lines path {
      stroke-dasharray: 1;
      animation: lxDraw linear both;
      animation-timeline: --lxflow;
      animation-range: entry 30% cover 55%;
    }
    html:not(.anim-off) .lx-flow { view-timeline: --lxflow block; }
    html:not(.anim-off) .lx-steps { view-timeline: --lxsteps block; }
    html:not(.anim-off) .lx-steps-line span {
      animation: lxGrow linear both;
      animation-timeline: --lxsteps;
      animation-range: entry 40% cover 60%;
    }
  }
}
@keyframes lxRise {
  from { opacity: 0; transform: translateY(32px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes lxDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lxGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ═══ WIDTHS ═════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .lx-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .lx-hero-copy { max-width: 640px; }
  .lx-coach-grid { grid-template-columns: minmax(0, 1fr); }
  .lx-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .lx-wrap { padding: 0 16px; }
  .lx-section { padding: 76px 0; }
  .lx-hero { padding: 96px 0 56px; }
  .lx-actions .btn { flex: 1 1 100%; }
  .lx-scr--coach .lx-msg { font-size: 0.84rem; padding: 9px 12px; margin-bottom: 10px; }
  .lx-scr--coach .lx-insight { font-size: 0.78rem; }
  .lx-scr { padding: 16px; }
  .lx-j-body { grid-template-columns: minmax(0, 1fr); }
  .lx-cal { display: none; }
  .lx-seg { padding: 10px 8px 12px; font-size: 0.72rem; }
  /* The flow stacks: inputs, the coach, outputs. The lines would only cross. */
  .lx-flow { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 18px; justify-items: stretch; }
  .lx-flow-core { margin: 0 auto; width: 96px; height: 96px; }
  .lx-flow-lines { display: none; }
  /* Phones: the four tools stand one under the other — nothing hides behind a tab.
     The pills stay as a scrollable row and jump to their card. */
  .lx-tabs { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 4px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .lx-tabs::-webkit-scrollbar { display: none; }
  .lx-tab { flex: none; grid-template-columns: auto auto; padding: 8px 14px; border-radius: var(--radius-pill); }
  .lx-tab svg { grid-row: auto; width: 18px; height: 18px; }
  .lx-tab-line { display: none; }
  .lx-panel, .lx-panel[hidden] { display: grid; margin-bottom: 16px; padding: 20px 16px; scroll-margin-top: 80px; }
  .lx-panel-copy .btn { width: 100%; }
  .lx-steps { grid-template-columns: minmax(0, 1fr); }
  .lx-steps-line { display: none; }
  .sim .sim-card { grid-template-columns: minmax(0, 1fr); }
  .sim .sim-toggles { grid-template-columns: minmax(0, 1fr); }
  .lx-jsteps { grid-template-columns: minmax(0, 1fr); }
  .lx-jsteps span { display: none; }
}
@media (max-width: 400px) {
  .lx-count b { font-size: 1.35rem; }
  .lx-rate b { font-size: 1.4rem; }
  .lx-kpi b { font-size: 1.1rem; }
}