/* ==========================================================================
   AxisAI — "Deep Axis" landing page layer.
   Loaded AFTER axisai.css on index.html only. Re-themes the shared tokens to
   the deep-blue / black / electric-blue brand direction and adds the landing
   sections (namespaced .lx-). Shared components (.ax-btn, .ax-form, cookie
   banner, modals, footer) keep their classes and inherit the retheme.
   ========================================================================== */

:root {
  /* Deep blue / black surfaces */
  --ax-bg:        #05070F;
  --ax-surface:   #0A0F1F;
  --ax-surface-2: #0D142B;
  --ax-border:    rgba(148, 176, 255, .10);
  --ax-border-2:  rgba(148, 176, 255, .18);

  /* Text tuned to the blue cast */
  --ax-text:   #EAF0FF;
  --ax-text-2: #9AA8CE;
  --ax-text-3: #66719A;

  /* Retheme the signature gradient: electric blue on deep blue.
     (Shared components — switches, focus rings, cookie UI — pick this up.) */
  --ax-violet: #2563EB;
  --ax-cyan:   #4DA8FF;
  --ax-grad:   linear-gradient(120deg, #2563EB, #4DA8FF);

  /* Data-mark colors (validated on --lx-panel with scripts/validate_palette):
     series #4595F5 · ordinal habit ramp #184F95 → #256ABF → #3987E5 */
  --lx-series:   #4595F5;
  --lx-panel:    #0D142B;
  --lx-grid:     rgba(154, 168, 206, .12);
  --lx-glow:     rgba(59, 130, 246, .28);

  /* Motion system — micro-interactions use --lx-ease; reveals use the
     longer cinematic curve --lx-ease-reveal */
  --lx-ease:        cubic-bezier(.16, 1, .3, 1);
  --lx-ease-reveal: cubic-bezier(.22, 1, .36, 1);
  --lx-dur-fast:    .24s;
}

/* ==========================================================================
   Scroll-triggered reveal system (landing.js owns the IntersectionObserver).
   Each [data-reveal] section stays fully hidden until ~20-30% of it enters
   the viewport, then unfolds: the section settles in while its children
   (tagged .lx-child + delay-sequenced by landing.js) cascade one after
   another. Directions alternate per section via data-reveal="left|right|
   scale". GPU transforms/opacity only — zero layout shift.
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(60px) scale(.985);
  transition: opacity .95s var(--lx-ease-reveal), transform .95s var(--lx-ease-reveal);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-56px) scale(.99); }
[data-reveal="right"] { transform: translateX(56px) scale(.99); }
[data-reveal="scale"] { transform: translateY(24px) scale(.96); }
[data-reveal].is-revealed { opacity: 1; transform: none; will-change: auto; }

/* Children reveal as an animation (not a transition) so they never fight the
   hover transitions on cards; landing.js sets each child's animation-delay
   and sweeps in .lx-child-done afterwards to hand control back to hovers. */
.lx-child { opacity: 0; }
.is-revealed .lx-child { animation: lx-child-in .8s var(--lx-ease-reveal) both; }
.lx-child.lx-child-done { opacity: 1; transform: none; animation: none; }
@keyframes lx-child-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* Hero load sequence — the hero itself is visible immediately; only its
   internal elements choreograph: headline → paragraph → buttons → trust
   line → dashboard → floating UI (floats are timed in their own rules). */
.lx-seq {
  opacity: 0;
  transform: translateY(26px);
  animation: lx-seq-in .85s var(--lx-ease-reveal) forwards;
}
.lx-seq-1 { animation-delay: .05s; }
.lx-seq-2 { animation-delay: .14s; }
.lx-seq-3 { animation-delay: .30s; }
.lx-seq-4 { animation-delay: .44s; }
.lx-seq-5 { animation-delay: .56s; }
.lx-seq-6 { animation-delay: .62s; }
@keyframes lx-seq-in { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .lx-child, .lx-seq, .lx-float {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important;
    animation-delay: 0s !important;
  }
}

/* Ambient wash: blue-only (replaces the violet/cyan aurora) */
body.lx-body::before {
  background:
    radial-gradient(58% 42% at 80% 6%,  rgba(37, 99, 235, .20), transparent 62%),
    radial-gradient(50% 38% at 8% 24%,  rgba(77, 168, 255, .10), transparent 60%),
    radial-gradient(42% 30% at 50% 100%, rgba(37, 99, 235, .10), transparent 70%);
}

/* ==========================================================================
   Navbar — grows glassier and slightly smaller once scrolled
   ========================================================================== */
.lx-body .ax-nav-inner { height: 76px; transition: height .35s var(--lx-ease); }
.lx-body .ax-nav.is-stuck .ax-nav-inner { height: 60px; }
.lx-body .ax-nav.is-stuck {
  background: rgba(5, 7, 15, .62);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border-bottom-color: var(--ax-border);
  box-shadow: 0 12px 40px rgba(2, 6, 23, .45);
}

/* ==========================================================================
   Buttons — soft elevation, slight scale, premium glow (220–280ms)
   ========================================================================== */
.lx-body .ax-btn {
  position: relative;
  transition: transform var(--lx-dur-fast) var(--lx-ease),
              box-shadow .28s var(--lx-ease),
              background .28s var(--lx-ease),
              border-color .28s var(--lx-ease),
              color .28s var(--lx-ease);
}
.lx-body .ax-btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 14px 36px rgba(37, 99, 235, .5),
    0 0 24px rgba(77, 168, 255, .25),
    inset 0 1px 0 rgba(255, 255, 255, .32);
}
.lx-body .ax-btn-ghost:hover { transform: translateY(-1px) scale(1.01); }
.lx-body .ax-btn:active { transform: translateY(0) scale(.99); }

/* Nav section links */
.lx-nav-links { display: flex; gap: var(--ax-s4); }
.lx-nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ax-text-2);
  transition: color var(--ax-t-fast);
}
.lx-nav-links a:hover { color: var(--ax-text); }
@media (max-width: 820px) { .lx-nav-links { display: none; } }

/* ==========================================================================
   Shared section scaffolding
   ========================================================================== */
.lx-section { padding: clamp(80px, 11vw, 152px) var(--ax-s3); }

.lx-section-head { max-width: 680px; margin-bottom: clamp(44px, 6vw, 80px); }
.lx-section-head h2 {
  font-family: var(--ax-display);
  font-weight: 700;
  font-size: clamp(32px, 4.8vw, 50px);
  line-height: 1.18;
  letter-spacing: -.025em;
  margin: var(--ax-s3) 0 var(--ax-s3);
}
.lx-section-head p {
  color: var(--ax-text-2);
  font-size: clamp(16.5px, 1.9vw, 19px);
  line-height: 1.7;
  max-width: 32em;
}

.lx-grad {
  background: linear-gradient(115deg, #5C9DFF, #8FC2FF 55%, #4DA8FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   1 · Hero
   ========================================================================== */
.lx-hero {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  padding-top: clamp(60px, 8vw, 112px);
  padding-bottom: clamp(48px, 6vw, 80px);
}

.lx-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ax-cyan);
  box-shadow: 0 0 0 0 rgba(77, 168, 255, .5);
  animation: lx-pulse 2.4s ease-out infinite;
}
@keyframes lx-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(77, 168, 255, .45); }
  70%  { box-shadow: 0 0 0 9px rgba(77, 168, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(77, 168, 255, 0); }
}

.lx-hero-copy h1 {
  font-family: var(--ax-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 66px);
  line-height: 1.12;
  letter-spacing: -.03em;
  margin: var(--ax-s4) 0 var(--ax-s4);
  max-width: 13em;
}
.lx-hero-sub {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.75;
  color: var(--ax-text-2);
  max-width: 29em;
  margin-bottom: clamp(32px, 4vw, 44px);
}
.lx-hero-sub strong { color: var(--ax-text); font-weight: 600; }
.lx-hero-actions { display: flex; flex-wrap: wrap; gap: var(--ax-s2); }
.lx-hero-trust {
  margin-top: var(--ax-s4);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ax-text-3);
  max-width: 30em;
}


/* --- The floating dashboard device --- */
.lx-hero-visual { position: relative; }

.lx-device {
  position: relative;
  background: linear-gradient(165deg, rgba(19, 28, 56, .92), rgba(10, 15, 31, .96));
  border: 1px solid var(--ax-border-2);
  border-radius: var(--ax-r-lg);
  padding: var(--ax-s3);
  box-shadow:
    0 30px 80px rgba(2, 6, 23, .6),
    0 0 60px rgba(37, 99, 235, .12),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: lx-float 7s ease-in-out infinite;
}
.lx-device::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(92, 157, 255, .6), transparent);
  border-radius: inherit;
}

.lx-device-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: var(--ax-s2);
  border-bottom: 1px solid var(--ax-border);
}
.lx-device-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ax-cyan); }
.lx-device-title {
  font-family: var(--ax-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ax-text-2);
}
.lx-device-live {
  margin-left: auto;
  font-family: var(--ax-mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--ax-cyan);
  border: 1px solid rgba(77, 168, 255, .35);
  border-radius: var(--ax-r-pill);
  padding: 3px 8px;
}

.lx-device-main {
  display: flex;
  align-items: center;
  gap: var(--ax-s3);
  padding: var(--ax-s3) 0;
}

.lx-ring-wrap { position: relative; flex: 0 0 140px; }
.lx-ring { width: 140px; height: 140px; transform: rotate(-90deg); }
.lx-ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.lx-ring-track { stroke: rgba(148, 176, 255, .12); }
.lx-ring-fill { transition: stroke-dashoffset 1.6s var(--ax-ease-out); }
.lx-ring-label {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
}
.lx-ring-value {
  font-family: var(--ax-display);
  font-size: 38px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em;
}
.lx-ring-caption {
  font-family: var(--ax-mono);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ax-text-2); margin-top: 4px;
}

.lx-device-stats { display: grid; gap: var(--ax-s2); flex: 1; min-width: 0; }
.lx-device-stat {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  background: rgba(148, 176, 255, .05);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-sm);
}
.lx-device-stat-label {
  font-family: var(--ax-mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ax-text-3);
}
.lx-device-stat-value { font-weight: 600; font-size: 15.5px; }
.lx-device-stat-value em { font-style: normal; color: var(--ax-text-3); font-weight: 400; }
.lx-device-stat-delta { font-size: 12px; color: var(--ax-cyan); }

.lx-device-coach {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: var(--ax-s2) 14px;
  background: rgba(37, 99, 235, .10);
  border: 1px solid rgba(77, 168, 255, .22);
  border-radius: var(--ax-r-sm);
}
.lx-device-coach-dot {
  flex: none;
  width: 8px; height: 8px; margin-top: 7px;
  border-radius: 50%;
  background: var(--ax-grad);
}
.lx-device-coach p { font-size: 13.5px; line-height: 1.55; color: var(--ax-text-2); }

/* Floating micro-cards */
.lx-float {
  position: absolute;
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  background: rgba(13, 20, 43, .82);
  border: 1px solid var(--ax-border-2);
  border-radius: var(--ax-r-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(2, 6, 23, .5);
}
.lx-float-label {
  font-family: var(--ax-mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ax-text-3);
}
.lx-float-value { font-weight: 600; font-size: 14.5px; color: var(--ax-text); }
.lx-float-a {
  top: -54px; right: -3%;
  opacity: 0;
  animation: lx-float-in .7s var(--lx-ease-reveal) 1.15s forwards,
             lx-float 6s ease-in-out 1.85s infinite reverse;
}
.lx-float-b {
  bottom: -20px; left: -4%;
  opacity: 0;
  animation: lx-float-in .7s var(--lx-ease-reveal) 1.35s forwards,
             lx-float 8s ease-in-out 2.05s infinite;
}
@keyframes lx-float-in { to { opacity: 1; } }

@keyframes lx-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ==========================================================================
   2 · Trust bar
   ========================================================================== */
.lx-trustbar {
  border-top: 1px solid var(--ax-border);
  border-bottom: 1px solid var(--ax-border);
  background: rgba(10, 15, 31, .55);
}
.lx-trustbar-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ax-s3);
  padding-top: var(--ax-s4);
  padding-bottom: var(--ax-s4);
}
.lx-trust-item { display: flex; gap: 12px; align-items: flex-start; }
.lx-trust-icon {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--ax-cyan);
  background: rgba(37, 99, 235, .12);
  border: 1px solid rgba(77, 168, 255, .2);
  border-radius: 12px;
}
.lx-trust-icon svg { width: 20px; height: 20px; }
.lx-trust-item p { display: grid; gap: 2px; font-size: 13.5px; line-height: 1.45; }
.lx-trust-item strong { font-size: 14px; color: var(--ax-text); font-weight: 600; }
.lx-trust-item span { color: var(--ax-text-3); }

/* ==========================================================================
   3 · Problem
   ========================================================================== */
.lx-problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.lx-problem-card {
  position: relative;
  padding: var(--ax-s3) var(--ax-s3) var(--ax-s3) 56px;
  background: rgba(10, 15, 31, .5);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-md);
  transition: border-color var(--ax-t-base), background var(--ax-t-base);
}
.lx-problem-card:hover { border-color: var(--ax-border-2); background: rgba(13, 20, 43, .6); }
.lx-problem-card-wide { grid-column: 1 / -1; }
.lx-problem-mark {
  position: absolute;
  left: 20px; top: 26px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  font-size: 11px;
  color: var(--ax-text-3);
  border: 1px solid var(--ax-border-2);
  border-radius: 6px;
}
.lx-problem-card h3 {
  font-family: var(--ax-display);
  font-size: 17.5px; font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.lx-problem-card p { font-size: 14.5px; color: var(--ax-text-2); line-height: 1.6; }

/* ==========================================================================
   4 · Solution — convergence diagram
   ========================================================================== */
.lx-converge {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--ax-s2);
  padding: clamp(24px, 4vw, 48px);
  background: linear-gradient(160deg, rgba(13, 20, 43, .7), rgba(8, 12, 26, .85));
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-lg);
  overflow: hidden;
}
.lx-converge-signals { display: grid; gap: 14px; }
.lx-signal {
  font-family: var(--ax-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ax-text-2);
  padding: 8px 14px;
  background: rgba(148, 176, 255, .06);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-pill);
  text-align: center;
}
.lx-converge-lines { width: 100%; height: 240px; min-width: 80px; }
.lx-converge-path {
  fill: none;
  stroke: rgba(77, 168, 255, .35);
  stroke-width: 1.5;
  stroke-dasharray: 6 8;
  animation: lx-dash 14s linear infinite;
  opacity: 0;
  transition: opacity .9s var(--lx-ease);
}
#solution.is-revealed .lx-converge-path { opacity: 1; transition-delay: 1s; }
#solution.is-revealed .lx-converge-path:nth-child(2) { transition-delay: 1.12s; }
#solution.is-revealed .lx-converge-path:nth-child(3) { transition-delay: 1.24s; }
#solution.is-revealed .lx-converge-path:nth-child(4) { transition-delay: 1.36s; }
#solution.is-revealed .lx-converge-path:nth-child(5) { transition-delay: 1.48s; }
@keyframes lx-dash { to { stroke-dashoffset: -280; } }

.lx-converge-core {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: var(--ax-s3);
}
.lx-converge-core-glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle, var(--lx-glow), transparent 70%);
  filter: blur(6px);
}
.lx-converge-core img { position: relative; }
.lx-converge-core-label {
  position: relative;
  font-family: var(--ax-mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ax-text);
}
.lx-converge-out { display: flex; align-items: center; gap: var(--ax-s2); }
.lx-converge-arrow { color: var(--ax-text-3); font-size: 20px; }
.lx-converge-plan {
  display: grid;
  gap: 2px;
  padding: 14px 18px;
  background: rgba(37, 99, 235, .12);
  border: 1px solid rgba(77, 168, 255, .3);
  border-radius: var(--ax-r-md);
  font-size: 12.5px;
  color: var(--ax-text-2);
}
.lx-converge-plan-title { font-weight: 600; font-size: 14px; color: var(--ax-text); }

.lx-solution-points {
  list-style: none;
  margin: var(--ax-s4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ax-s2) var(--ax-s4);
}
.lx-solution-points li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--ax-text-2);
}
.lx-solution-points li::before {
  content: "";
  position: absolute;
  left: 0; top: .48em;
  width: 12px; height: 12px;
  border-radius: 4px;
  background: var(--ax-grad);
  opacity: .9;
}
.lx-solution-points strong { color: var(--ax-text); font-weight: 600; }

/* ==========================================================================
   5 · Feature cards (pointer-glow microinteraction)
   ========================================================================== */
.lx-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.lx-card {
  --mx: 50%;
  --my: 0%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--ax-s4) var(--ax-s3) var(--ax-s3);
  background: rgba(10, 15, 31, .6);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-md);
  overflow: hidden;
  transition: transform .3s var(--lx-ease), border-color .3s var(--lx-ease), box-shadow .38s var(--lx-ease);
}
.lx-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(77, 168, 255, .10), transparent 65%);
  opacity: 0;
  transition: opacity var(--ax-t-base);
  pointer-events: none;
}
.lx-card:hover, .lx-card:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(77, 168, 255, .35);
  box-shadow: 0 24px 56px rgba(2, 6, 23, .5), 0 0 40px rgba(37, 99, 235, .14);
}
.lx-card:hover::before, .lx-card:focus-visible::before { opacity: 1; }

.lx-card-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--ax-cyan);
  background: rgba(37, 99, 235, .12);
  border: 1px solid rgba(77, 168, 255, .2);
  border-radius: 12px;
  margin-bottom: 4px;
}
.lx-card-icon svg { width: 22px; height: 22px; }
.lx-card h3 {
  font-family: var(--ax-display);
  font-size: 18.5px; font-weight: 600;
  letter-spacing: -.015em;
}
.lx-card-benefit { font-size: 14.5px; font-weight: 500; color: var(--ax-text); line-height: 1.55; }
.lx-card-detail  { font-size: 13.5px; color: var(--ax-text-2); line-height: 1.6; }
.lx-card-cue {
  margin-top: auto;
  padding-top: var(--ax-s2);
  font-family: var(--ax-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ax-text-3);
  transition: color var(--ax-t-base);
}
.lx-card-cue i { font-style: normal; display: inline-block; transition: transform var(--ax-t-base); }
.lx-card:hover .lx-card-cue { color: var(--ax-cyan); }
.lx-card:hover .lx-card-cue i { transform: translateX(4px); }

/* ==========================================================================
   6 · How it works
   ========================================================================== */
.lx-steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ax-s2);
  counter-reset: step;
}
.lx-step {
  position: relative;
  padding: var(--ax-s3);
  background: rgba(10, 15, 31, .5);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-md);
}
.lx-step::after {
  content: "";
  position: absolute;
  top: 34px; right: -17px;
  width: 18px; height: 1px;
  background: linear-gradient(90deg, rgba(77, 168, 255, .5), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--lx-ease);
}
.lx-step:last-child::after { display: none; }
/* connectors draw themselves after their cards have landed */
#how.is-revealed .lx-step:nth-child(1)::after { transform: scaleX(1); transition-delay: 1.05s; }
#how.is-revealed .lx-step:nth-child(2)::after { transform: scaleX(1); transition-delay: 1.2s; }
#how.is-revealed .lx-step:nth-child(3)::after { transform: scaleX(1); transition-delay: 1.35s; }
.lx-step-num {
  display: inline-block;
  font-family: var(--ax-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--ax-cyan);
  border: 1px solid rgba(77, 168, 255, .3);
  border-radius: var(--ax-r-pill);
  padding: 4px 12px;
  margin-bottom: var(--ax-s2);
}
.lx-step h3 {
  font-family: var(--ax-display);
  font-size: 17px; font-weight: 600;
  margin-bottom: 6px;
}
.lx-step p { font-size: 13.5px; color: var(--ax-text-2); line-height: 1.6; }
.lx-how-cta { margin-top: var(--ax-s4); display: flex; justify-content: center; }

/* ==========================================================================
   7 · Outcomes dashboard
   ========================================================================== */
.lx-dash {
  background: linear-gradient(170deg, rgba(16, 24, 50, .85), rgba(8, 12, 26, .92));
  border: 1px solid var(--ax-border-2);
  border-radius: var(--ax-r-lg);
  padding: clamp(20px, 3vw, 36px);
  box-shadow: 0 30px 80px rgba(2, 6, 23, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.lx-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: var(--ax-s3);
  border-bottom: 1px solid var(--ax-border);
  margin-bottom: var(--ax-s3);
}
.lx-tab {
  font-family: var(--ax-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ax-text-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ax-r-pill);
  padding: 8px 16px;
  cursor: pointer;
  transition: color var(--ax-t-fast), background var(--ax-t-base), border-color var(--ax-t-base);
}
.lx-tab:hover { color: var(--ax-text); background: rgba(148, 176, 255, .06); }
.lx-tab[aria-selected="true"] {
  color: #fff;
  background: rgba(37, 99, 235, .18);
  border-color: rgba(77, 168, 255, .35);
}

.lx-panel { display: grid; grid-template-columns: 220px 1fr; gap: var(--ax-s4); align-items: start; }
.lx-panel[hidden] { display: none; }

.lx-panel-stat { display: grid; gap: 6px; }
.lx-panel-label {
  font-family: var(--ax-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ax-text-3);
}
.lx-panel-value {
  font-family: var(--ax-display);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}
.lx-panel-delta { font-size: 13.5px; color: var(--ax-cyan); }

.lx-chart { margin: 0; }
.lx-chart svg { width: 100%; height: auto; }
.lx-chart figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ax-text-3);
}

/* Chart anatomy — hairline grid, muted ticks, 2px line, 10% area wash */
.lx-grid line { stroke: var(--lx-grid); stroke-width: 1; }
.lx-ticks text {
  font-family: var(--ax-mono);
  font-size: 11px;
  fill: var(--ax-text-3);
}
.lx-ticks-x text { text-anchor: middle; }
.lx-line {
  fill: none;
  stroke: var(--lx-series);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lx-area { fill: rgba(69, 149, 245, .10); }
.lx-dot { fill: var(--lx-series); stroke: var(--lx-panel); stroke-width: 2; }
.lx-endlabel {
  font-family: var(--ax-body);
  font-size: 13px;
  font-weight: 600;
  fill: var(--ax-text);
  text-anchor: middle;
}
.lx-annotation {
  font-family: var(--ax-mono);
  font-size: 10.5px;
  fill: var(--ax-text-2);
  text-anchor: middle;
}
.lx-bar { fill: var(--lx-series); }
.lx-bar-deload { fill: rgba(69, 149, 245, .45); }

/* Panel-activation animations (reduced-motion is neutralized globally) */
.lx-panel.is-active .lx-line {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: lx-draw 1.4s var(--ax-ease-out) forwards;
}
.lx-panel.is-active .lx-area { opacity: 0; animation: lx-fade-in .8s .5s var(--ax-ease-out) forwards; }
.lx-panel.is-active .lx-dot,
.lx-panel.is-active .lx-endlabel { opacity: 0; animation: lx-fade-in .5s 1s var(--ax-ease-out) forwards; }
.lx-panel.is-active .lx-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: lx-grow .7s var(--ax-ease-out) backwards;
}
.lx-panel.is-active .lx-bar:nth-child(2) { animation-delay: .07s; }
.lx-panel.is-active .lx-bar:nth-child(3) { animation-delay: .14s; }
.lx-panel.is-active .lx-bar:nth-child(4) { animation-delay: .21s; }
.lx-panel.is-active .lx-bar:nth-child(5) { animation-delay: .28s; }
.lx-panel.is-active .lx-bar:nth-child(6) { animation-delay: .35s; }
.lx-panel.is-active .lx-bar:nth-child(7) { animation-delay: .42s; }
.lx-panel.is-active .lx-bar:nth-child(8) { animation-delay: .49s; }
@keyframes lx-draw   { to { stroke-dashoffset: 0; } }
@keyframes lx-fade-in{ to { opacity: 1; } }
@keyframes lx-grow   { from { transform: scaleY(0); } }

/* Macro meters — fill carries the value; track is a darker step of the ramp */
.lx-meters { display: grid; gap: var(--ax-s3); max-width: 560px; }
.lx-meter { display: grid; gap: 8px; }
.lx-meter-head {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ax-text-2);
}
.lx-meter-value { font-weight: 600; color: var(--ax-text); }
.lx-meter-track {
  display: block;
  height: 10px;
  border-radius: var(--ax-r-pill);
  background: #12203E;
  overflow: hidden;
}
.lx-meter-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563EB, var(--lx-series));
  transition: width 1.1s var(--ax-ease-out);
}
.lx-meter-note { font-size: 12.5px; color: var(--ax-text-3); }

/* Habit grid — ordinal single-hue ramp (validated) */
.lx-habit { display: grid; gap: var(--ax-s2); justify-items: start; }
.lx-habit-grid {
  display: grid;
  grid-template-columns: repeat(14, 18px);
  grid-auto-rows: 18px;
  gap: 4px;
}
.lx-cell {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 4px;
  background: rgba(148, 176, 255, .07);
}
.lx-cell-1 { background: #184F95; }
.lx-cell-2 { background: #256ABF; }
.lx-cell-3 { background: #3987E5; }
.lx-panel.is-active .lx-habit-grid .lx-cell { animation: lx-fade-in .4s backwards; opacity: 0; animation-fill-mode: forwards; }
.lx-habit-key {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--ax-text-3);
}
.lx-habit-key .lx-cell { width: 12px; height: 12px; border-radius: 3px; }
.lx-habit-key span:first-child { margin-right: 3px; }
.lx-habit-key span:last-child { margin-left: 3px; }

.lx-dash-note {
  margin-top: var(--ax-s3);
  padding-top: var(--ax-s2);
  border-top: 1px solid var(--ax-border);
  font-family: var(--ax-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ax-text-3);
}

/* ==========================================================================
   8 · Social proof
   ========================================================================== */
.lx-founder {
  padding: clamp(24px, 4vw, 44px);
  background: linear-gradient(160deg, rgba(37, 99, 235, .12), rgba(10, 15, 31, .6));
  border: 1px solid rgba(77, 168, 255, .22);
  border-radius: var(--ax-r-lg);
  margin-bottom: var(--ax-s4);
}
.lx-founder-body { max-width: 46em; display: grid; gap: var(--ax-s2); }
.lx-founder-body p {
  font-family: var(--ax-display);
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.01em;
}
.lx-founder-sig { font-size: 14px; color: var(--ax-text-2); }

/* ==========================================================================
   9 · Final CTA / waitlist
   ========================================================================== */
.lx-waitlist { padding-bottom: clamp(72px, 10vw, 140px); }
.lx-waitlist-card {
  position: relative;
  text-align: center;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 64px);
  background: linear-gradient(175deg, rgba(19, 28, 56, .9), rgba(8, 12, 26, .95));
  border: 1px solid var(--ax-border-2);
  border-radius: var(--ax-r-lg);
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(2, 6, 23, .55);
}
.lx-waitlist-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(92, 157, 255, .7), transparent);
  transform: scaleX(0);
  transition: transform 1.1s var(--lx-ease-reveal) .9s;
}
#waitlist.is-revealed .lx-waitlist-card::before { transform: scaleX(1); }
.lx-waitlist-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -60%;
  height: 70%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(37, 99, 235, .22), transparent 70%);
  pointer-events: none;
}
.lx-waitlist-card > * { position: relative; z-index: 1; }
.lx-waitlist-card h2 {
  font-family: var(--ax-display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.06;
  letter-spacing: -.03em;
  margin: var(--ax-s2) 0 var(--ax-s3);
}
.lx-waitlist-sub {
  color: var(--ax-text-2);
  max-width: 42em;
  margin: 0 auto var(--ax-s4);
  font-size: 15.5px;
}
.lx-waitlist-sub strong { color: var(--ax-text); font-weight: 600; }

.lx-waitlist-points {
  list-style: none;
  margin: var(--ax-s4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px var(--ax-s3);
}
.lx-waitlist-points li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  color: var(--ax-text-2);
}
.lx-waitlist-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ax-cyan);
  font-size: 12px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .lx-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .lx-steps { grid-template-columns: repeat(2, 1fr); }
  .lx-step::after { display: none; }
  .lx-trustbar-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .lx-hero { grid-template-columns: 1fr; text-align: center; }
  .lx-hero-copy h1 { margin-left: auto; margin-right: auto; }
  .lx-hero-sub, .lx-hero-trust { margin-left: auto; margin-right: auto; }
  .lx-hero-actions { justify-content: center; }
  .lx-hero-visual { max-width: 560px; margin: 0 auto; width: 100%; }
  .lx-float-a { right: 0; }
  .lx-float-b { left: 0; }
  .lx-panel { grid-template-columns: 1fr; gap: var(--ax-s3); }
  .lx-converge { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--ax-s3); }
  .lx-converge-signals { grid-template-columns: repeat(3, auto); justify-content: center; display: grid; gap: 10px; }
  /* The convergence lines are drawn for the desktop left-to-right flow; on a
     single-column mobile layout they point off to the side and read as broken.
     Scope with .ax-body so this beats the `.ax-body svg { display:block }` base
     rule (which otherwise wins on specificity and keeps the SVG visible). */
  .ax-body .lx-converge-lines { display: none; }
  .lx-converge-core { padding: var(--ax-s2) 0; }
  .lx-converge-out { flex-direction: column; gap: var(--ax-s3); }
  .lx-converge-arrow { transform: rotate(90deg); }
  .lx-solution-points { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* shorter travel keeps 60fps on mobile; side reveals become bottom ones */
  [data-reveal],
  [data-reveal="left"],
  [data-reveal="right"],
  [data-reveal="scale"] { transform: translateY(30px) scale(.995); }
  [data-reveal].is-revealed { transform: none; }
  @keyframes lx-child-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  .lx-feature-grid { grid-template-columns: 1fr; }
  .lx-steps { grid-template-columns: 1fr; }
  .lx-problem-grid { grid-template-columns: 1fr; }
  .lx-trustbar-inner { grid-template-columns: 1fr; }
  .lx-device-main { flex-direction: column; }
  .lx-device-stats { width: 100%; }
  .lx-habit-grid { grid-template-columns: repeat(14, 1fr); width: 100%; }
  .lx-habit-grid .lx-cell { width: 100%; height: auto; aspect-ratio: 1; }
  .lx-float { display: none; }

}

/* ==========================================================================
   Consent-surface accommodation — single-column hero, while the banner is up
   ==========================================================================
   From 901px up the consent surface anchors to the hero's empty right column
   and none of this is needed; from 641px up the hero still has room to spare
   (768×1024 clears the surface by ~380px untouched). Only on a phone does the
   hero copy run the full width under a bottom-docked bar. Compacting the bar
   alone closes 390/430 but not 360×800, where the hero copy is 659px tall in
   an 800px viewport: the shortfall is made up here, by taking back spacing
   only — never copy, size or order.

   Reclaimed, in order of how little it costs the design:
     · the hero's own top padding (60px authored, 8px here);
     · the display margins around the H1 (32px → 8px);
     · the gap between the two stacked CTAs (16px → 8px);
     · the leading of the sub-headline and the audience line, from 1.75/1.65
       to 1.5 — still the recommended floor for body text, and leading is
       spacing, not size: every word stays at its authored font size.

   This used to be gated on `min-height: 700px`, on the reasoning that a short
   phone puts the hero below the fold anyway. Measurement disproved that. The
   lift is worth a fixed ~162px, so it clears the surface only from ~772px of
   viewport height (at ≤384px wide) — which left 700–771px a band where the
   gate switched the lift ON and the lift itself dragged the audience line up
   into the bar: 375×700 overlapped by 20601px². Below 700px the gate was off
   and the hero straddled the bar instead: 375×667 overlapped by 8675px². The
   gate is therefore removed here and re-expressed as the clearance rule it was
   always trying to be, in the band block below.

   `.ax-consent-open` is set by axisai.js when the banner mounts and dropped
   the instant a choice is committed, so a restored decision never inherits
   any of it and no spacing is left behind. `landing.css` and `.lx-hero` are
   loaded by index.html alone, so nothing here can reach a shared page. */
@media (max-width: 640px) {
  .ax-consent-open .lx-hero { padding-top: var(--ax-s1); }
  .ax-consent-open .lx-hero-copy h1 { margin-top: var(--ax-s1); margin-bottom: var(--ax-s1); }
  .ax-consent-open .lx-hero-actions { gap: var(--ax-s1); }
  .ax-consent-open .lx-hero-sub { line-height: 1.5; }
  .ax-consent-open .lx-hero-trust { line-height: 1.5; }
  .ax-consent-open .lx-hero-copy .ax-eyebrow { line-height: 1.45; }
}

/* One step tighter below ~385px. Two things still meet in this band. The
   headline picks up its extra wrapped line inside it — three rendered lines at
   or below 360px against two from 375px up, after the PR4 rewrite moved that
   boundary down from 385px — and it is also where the narrowest phones report
   a home indicator, whose inset lifts a bottom-docked bar by up to 34px more.
   Measured on 375×812 with a 34px inset the audience line cleared the bar by
   0.2px without this rule and by 22px with it.

   Only the display rhythm moves: the headline keeps its authored font size and
   its text, and 1.05 is ordinary leading for 40px display type. Nothing here
   applies once a choice is committed. */
@media (max-width: 384px) {
  .ax-consent-open .lx-hero-copy h1 {
    margin-top: 0;
    margin-bottom: var(--ax-s1);
    line-height: 1.05;
  }
}

/* --------------------------------------------------------------------------
   Short viewports: keep the group whole and below the fold
   --------------------------------------------------------------------------
   Even fully lifted, the protected group (both CTAs + the audience line) needs
   more height than the shortest phones have — so no amount of spacing can put
   all three above the bar there, and the arithmetic says so before any rule is
   written.

   That leaves exactly two non-intersecting positions for the group: entirely
   above the surface, or entirely below the fold. The lift above reaches the
   first from a known height per width band; under that height this rule takes
   the second, by pushing the CTA row just past the fold so the group travels
   together instead of straddling the bar's top edge. Nothing is hidden that
   was not already hidden, and it lasts only while the banner is up.

   --ax-hero-cta-top is the measured top of the CTA row once lifted, taken at
   its band's WIDEST edge (wider = less wrapping = smallest value), so the push
   is never short anywhere inside the band. The default is deliberately absurd
   so that outside the bands below the calc goes negative and max() yields 0 —
   no push, no effect. The paired max-height is one pixel below the height at
   which the lift itself starts clearing, measured at the band's NARROWEST edge
   (the tallest the group ever gets in that band), so exactly one of the two
   mechanisms is ever live and the gate never fires early.

   PR4 re-took all six numbers. The audience-clarity rewrite is shorter than the
   copy it replaced — the H1 dropped from five rendered lines to three at 320px
   and the audience line from three to two — so the whole group rose, every band
   constant fell, and every gate moved down with it. 375×667 in particular now
   clears on the lift alone and no longer needs the push at all.

   100vh, not 100dvh: a mobile URL bar makes 100vh the taller of the two, which
   overshoots the push rather than undershooting it — the safe direction. */
@media (max-width: 640px) {
  .ax-consent-open .lx-hero {
    --ax-hero-cta-top: 100000px;
  }
  .ax-consent-open .lx-hero-actions {
    margin-top: max(0px, calc(100vh + var(--ax-s2) - var(--ax-hero-cta-top)));
  }
}
/* lift clears from 667px here */
@media (max-width: 344px) and (max-height: 666px) {
  .ax-consent-open .lx-hero { --ax-hero-cta-top: 382px; }
}
/* lift clears from 667px here */
@media (min-width: 345px) and (max-width: 384px) and (max-height: 666px) {
  .ax-consent-open .lx-hero { --ax-hero-cta-top: 315px; }
}
/* lift clears from 613px here */
@media (min-width: 385px) and (max-width: 640px) and (max-height: 612px) {
  .ax-consent-open .lx-hero { --ax-hero-cta-top: 295px; }
}