/* ============================================================================
   Organicaly AI — public landing page
   Layered ON TOP of /static/theme.css, which stays the single source of truth
   for colour, radius, shadow and easing tokens. Nothing here redefines a
   product token; it only adds a marketing-scale layer and the motion system.

   Dark-only by design. The page never sets data-theme, so theme.css's :root
   dark tokens apply and its [data-theme="light"] block can never match.

   Scoped to `.lp` throughout so the 13px dashboard is untouched.
   ========================================================================= */

/* ── Registered custom properties ─────────────────────────────────────────
   Registering them makes them animatable and, because they don't inherit,
   scopes invalidation to the element's own paint — no layout, no descendant
   style recalc. This is what makes the spotlight and the rotating border
   cheap enough to run on hover.                                             */
@property --ang { syntax: '<angle>';  inherits: false; initial-value: 0deg; }
@property --mx  { syntax: '<length>'; inherits: false; initial-value: 50%;  }
@property --my  { syntax: '<length>'; inherits: false; initial-value: 50%;  }
@property --p   { syntax: '<number>'; inherits: false; initial-value: 0;    }

/* ── Landing-only additions ───────────────────────────────────────────────
   Deliberately minimal. One accent stays one accent; --mk-abyss is the only
   new hue on the page (two points of blue over neutral) and exists solely so
   a 900px gradient reads as depth instead of flat black.                    */
.lp {
  --mk-void:     #060608;
  --mk-abyss:    #04040a;
  --mk-wash-1:   rgba(52,211,153,.10);
  --mk-wash-2:   rgba(16,185,129,.05);
  --mk-hairline: rgba(52,211,153,.13);
  --ease-expo:   cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  --mk-gutter:   clamp(20px, 5vw, 56px);
  --mk-measure:  1240px;
  --mk-section:  clamp(76px, 9vh + 30px, 148px);
}

/* ── Reset the dashboard's operator density ──────────────────────────────── */
body.lp {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  background: var(--mk-void);
  overflow-x: hidden;
  font-optical-sizing: auto;
}
.lp a { color: inherit; text-decoration: none; }
.lp a:hover { text-decoration: none; }
.lp h1, .lp h2, .lp h3, .lp h4 { color: var(--text-primary); }
.lp ul { margin: 0; padding: 0; list-style: none; }
.lp p { margin: 0; }
.lp img, .lp svg { max-width: 100%; }
.lp ::selection { background: rgba(52,211,153,.28); color: #fff; }

/* ============================================================================
   1. TYPE SCALE
   Inter is loaded as a variable font, so the non-integer weights are real.
   Body sits at 420 and lead at 450 because 400 on #09090b is optically light
   — dark UIs need a hair more weight to match 400-on-white. Tracking ramps
   from -.035em at display size down to 0 at body size.
   ========================================================================= */
.lp .display {
  font-size: clamp(2.625rem, 1.8rem + 3.8vw, 4.75rem);
  font-weight: 720; line-height: 1.02; letter-spacing: -.035em;
  text-wrap: balance; font-variation-settings: "opsz" 32;
  color: var(--text-primary);
}
.lp h2, .lp .h2 {
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.125rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance;
}
.lp h3, .lp .h3 {
  font-size: clamp(1.1875rem, 1.08rem + .55vw, 1.4375rem);
  font-weight: 650; line-height: 1.28; letter-spacing: -.018em; text-wrap: balance;
}
.lp h4, .lp .h4 {
  font-size: 1.0625rem; font-weight: 620; line-height: 1.4; letter-spacing: -.012em;
}
.lp .lead {
  font-size: clamp(1.0625rem, .99rem + .5vw, 1.3125rem);
  font-weight: 450; line-height: 1.58; letter-spacing: -.006em;
  color: var(--text-secondary); text-wrap: pretty;
}
.lp .body  { font-size: 1.0625rem; font-weight: 420; line-height: 1.65; text-wrap: pretty; }
.lp .small { font-size: .9375rem; line-height: 1.55; color: var(--text-muted); text-wrap: pretty; }
.lp .cap   { font-size: .8125rem; line-height: 1.5; color: var(--text-muted); }

.lp .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .6875rem; font-weight: 700; line-height: 1.2;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--accent-fg); margin-bottom: 18px;
}
.lp .eyebrow::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--accent-fg); box-shadow: 0 0 8px var(--accent-glow);
}
.lp .mono {
  font-family: var(--font-mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .01em; font-variant-numeric: tabular-nums;
}
.lp .num { font-variant-numeric: tabular-nums; }

/* One word of the headline may take the vertical accent fade. Single hue,
   vertical only — never a hue-rotating gradient. */
.lp .grad {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ============================================================================
   2. AMBIENT LAYERS
   Layer 1 wash (CSS, 0ms/frame) · Layer 2 lattice (CSS, off main thread) ·
   Layer 3 signal field (one canvas, created by landing.js).
   ========================================================================= */
.lp::before {
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(1200px 620px at 50% -8%, var(--mk-wash-1), transparent 62%),
    radial-gradient(900px 700px at var(--px, 86%) var(--py, 18%), var(--mk-wash-2), transparent 65%),
    radial-gradient(1400px 900px at 12% 74%, var(--mk-abyss), transparent 70%),
    var(--bg-page);
}

/* A receding floor plane, not a flat grid. The mask is what keeps it from
   reading as a wireframe backdrop. */
.lp-lattice {
  position: fixed; left: -30%; right: -30%; top: -14vh; height: 150vh;
  z-index: -2; pointer-events: none; opacity: .55;
  background-image:
    linear-gradient(var(--mk-hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--mk-hairline) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(900px) rotateX(62deg);
  transform-origin: 50% 0;
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent 74%);
  mask-image: radial-gradient(closest-side, #000, transparent 74%);
  animation: lattice-drift 40s linear infinite;
  will-change: transform;
}
/* Exactly one grid pitch, so the loop is seamless. */
@keyframes lattice-drift { to { background-position: 0 56px, 0 0; } }

/* Native scroll-driven parallax where supported; elsewhere the drift alone
   carries it. No JS scroll listener exists anywhere on this page. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-lattice {
      animation: lattice-drift 40s linear infinite, lattice-parallax linear;
      animation-timeline: auto, scroll(root block);
    }
    @keyframes lattice-parallax {
      to { transform: perspective(900px) rotateX(62deg) translateY(-14%); }
    }
  }
}

.lp-signal { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* ============================================================================
   3. LAYOUT
   ========================================================================= */
.lp-wrap { width: 100%; max-width: var(--mk-measure); margin: 0 auto; padding: 0 var(--mk-gutter); }
.lp section { position: relative; padding-block: var(--mk-section); }
.lp section > .lp-wrap { position: relative; z-index: 1; }

/* NOTE: this deliberately does NOT use `content-visibility: auto`.
   It was tried and removed. On a page this long, sections resolving from
   their intrinsic placeholder height to their real height fights scroll
   anchoring — a scrollTo(780) landed at 1656 — and elements inside a skipped
   subtree have no boxes, so the IntersectionObserver reveals never fire and
   whole sections render blank. The paint win isn't worth it here anyway:
   this page is text and CSS with no images to decode, and the one genuinely
   expensive thing (the canvas) is already IntersectionObserver-gated.
   `contain` gives most of the isolation benefit with none of the hazard. */
.lp .defer { contain: layout style; }

.lp .sec-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.lp .sec-head.center { margin-inline: auto; text-align: center; }
.lp .sec-head.center .eyebrow { justify-content: center; }
.lp .sec-head .lead { margin-top: 18px; }

.lp .grid { display: grid; gap: 18px; }
.lp .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp .g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 940px) { .lp .g-3, .lp .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lp .grid { grid-template-columns: 1fr !important; } }

.lp .rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--border-default), transparent 78%);
}

/* ============================================================================
   4. REVEAL PRIMITIVE
   14px of travel, not 40 — long travel reads as 2018 scroll-reveal. The 4px
   blur is what makes it feel expensive. Pre-hide is gated on .js so a JS
   failure can never blank the page.
   ========================================================================= */
.js .lp .rise {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(.995);
  filter: blur(4px);
  transition:
    opacity   .62s var(--ease-expo),
    transform .62s var(--ease-expo),
    filter    .62s var(--ease-expo);
  transition-delay: calc(min(var(--i, 0), 6) * 70ms);
}
.js .lp .rise.in { opacity: 1; transform: none; filter: none; }
.perf-lite .lp .rise { filter: none !important; }

/* ============================================================================
   5. BUTTONS — extend theme.css's .btn, never replace it
   ========================================================================= */
.lp .btn.mk {
  height: 44px; padding: 0 22px; font-size: 15px; font-weight: 600;
  border-radius: var(--radius-lg); gap: 8px;
}
.lp .btn.accent.mk { position: relative; overflow: hidden; }
.lp .btn.accent.mk:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--accent-border), 0 10px 28px -10px var(--accent-glow);
  transition: transform 160ms var(--ease-expo), box-shadow 160ms var(--ease-expo);
}
.lp .btn.accent.mk:active { transform: translateY(0) scale(.985); transition-duration: 90ms; }
.lp .btn.mk:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Diagonal light sweep — the existing `shimmer` vocabulary, angled. One per
   screen, fired by JS on entry and on hover. */
.lp .btn.accent.mk::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  transform: translateX(-130%); opacity: 0;
}
.lp .btn.accent.mk.sweep::after {
  animation: btn-sweep 850ms var(--ease-expo);
}
@keyframes btn-sweep {
  from { transform: translateX(-130%); opacity: 1; }
  to   { transform: translateX(130%);  opacity: 1; }
}

.lp .btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ============================================================================
   6. NAV — matches .app-topbar's frosting exactly, with blog_preview's accent
   hairline as its top edge. Sticky state is driven by an IntersectionObserver
   sentinel, never a scroll listener.
   ========================================================================= */
.lp-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: 68px;
  display: flex; align-items: center;
  transition: height 240ms var(--ease-expo), background 240ms var(--ease-expo),
              border-color 240ms var(--ease-expo);
  border-bottom: 1px solid transparent;
}
.lp-nav::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 82%);
  opacity: .85; pointer-events: none;
}
.lp-nav.stuck {
  height: 58px;
  background: color-mix(in srgb, var(--bg-page) 78%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom-color: var(--border-subtle);
}
.lp-nav .lp-wrap { display: flex; align-items: center; gap: 28px; width: 100%; }

.lp-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.lp-brand .mark {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 0 0 1px var(--accent-border), 0 6px 18px -8px var(--accent-glow);
}
.lp-brand .mark svg { width: 15px; height: 15px; }
.lp-brand b {
  font-size: 15.5px; font-weight: 650; letter-spacing: -.015em;
  color: var(--text-primary);
}

.lp-links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.lp-links a {
  position: relative; font-size: 14px; font-weight: 500;
  color: var(--text-secondary); transition: color var(--t-fast);
}
.lp-links a:hover { color: var(--text-primary); }
.lp-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: center;
  transition: transform 200ms var(--ease-expo);
}
.lp-links a:hover::after { transform: scaleX(1); }
.lp-nav .btn { flex: none; }
@media (max-width: 860px) { .lp-links { display: none; } .lp-nav .btn { margin-left: auto; } }

.lp-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

/* ============================================================================
   7. SURFACES
   ========================================================================= */
.lp .card {
  position: relative; isolation: isolate; contain: layout paint;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: 22px 22px 24px;
  transition: border-color 220ms var(--ease-expo), transform 220ms var(--ease-expo);
}
.lp .card:hover { border-color: var(--border-default); transform: translateY(-2px); }
.lp .card h3 { margin-bottom: 8px; }
.lp .card p  { color: var(--text-secondary); font-size: .9375rem; line-height: 1.6; }

/* Pointer-tracked spotlight. Two effects, two props, one delegated listener
   for the whole grid (see landing.js). */
.lp .card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background-image: radial-gradient(320px circle at var(--mx) var(--my),
                                    var(--accent-subtle), transparent 62%);
  opacity: 0; transition: opacity .22s var(--ease-expo); pointer-events: none;
}
.lp .card:hover::before { opacity: 1; }
/* The ring — brightest nearest the cursor. Both mask-composite declarations
   are required: without the -webkit- one, Safari fills the whole rectangle. */
.lp .card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px; pointer-events: none; opacity: 0;
  background: radial-gradient(200px circle at var(--mx) var(--my),
                              var(--accent-border), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  transition: opacity .22s var(--ease-expo);
}
.lp .card:hover::after { opacity: 1; }
@media (pointer: coarse) { .lp .card::before, .lp .card::after { display: none; } }
.perf-lite .lp .card::before, .perf-lite .lp .card::after { display: none; }

/* Rotating conic border. Max two per page. */
.lp .lume { position: relative; }
.lp .lume::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--ang),
    transparent 0deg, var(--accent-border) 40deg, var(--accent) 62deg,
    var(--accent-border) 84deg, transparent 130deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: lume-spin 6s linear infinite;
}
@keyframes lume-spin { to { --ang: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .lp .lume::before { animation: none; --ang: 135deg; }
}

.lp .pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 26px; padding: 0 11px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 550; letter-spacing: -.005em;
  background: var(--bg-raised); border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
.lp .pill.accent {
  background: var(--accent-subtle); border-color: var(--accent-border);
  color: var(--accent-fg);
}
.lp .tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
  border-radius: var(--radius-sm); font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  background: var(--bg-active); color: var(--text-muted);
}
.lp .tag.sample {
  background: var(--bg-inset); border: 1px solid var(--border-subtle);
  color: var(--text-muted); letter-spacing: .06em;
}

/* Every product mock carries this. Realistic unlabelled numbers on a
   marketing page are the single biggest honesty liability. */
.lp .mock-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-inset);
}
.lp .mock-head .t { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.lp .mock-head .tag.sample { margin-left: auto; }
.lp .mock {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md);
}

/* ============================================================================
   8. THE HERO
   ========================================================================= */
/* Sized so the top of the instrument clears the fold on a 720px viewport —
   the sweep is the argument, so it must not be something you have to go
   looking for. */
.lp-hero { padding-top: clamp(104px, 13vh, 148px); padding-bottom: clamp(40px, 6vh, 72px); }
.lp-hero .display { margin-bottom: 20px; max-width: 20ch; }
.lp-hero .lead { max-width: 58ch; }
.lp-hero .btn-row { margin-top: 26px; }
.lp-hero .hero-note { margin-top: 14px; font-size: 13px; color: var(--text-muted); }

.lp-trust {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border-subtle);
}
.lp-trust div { display: flex; align-items: baseline; gap: 7px; }
.lp-trust b {
  font-size: 17px; font-weight: 680; letter-spacing: -.02em;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.lp-trust span { font-size: 12.5px; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   THE RUN CONSOLE — the hero instrument.
   One night's shift: eight agent jobs light up in sequence, the activity feed
   streams, and it lands on "N changes waiting for your review / 0 pushed live
   without you". The whole positioning in one object.
   ═════════════════════════════════════════════════════════════════════════ */
.lp-run {
  position: relative; margin-top: clamp(30px, 4vw, 50px);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: 16px; box-shadow: var(--shadow-lg);
  contain: layout paint; overflow: hidden;
}
.run-body {
  display: grid; grid-template-columns: 268px minmax(0, 1fr) 254px;
  align-items: stretch;
}
@media (max-width: 1080px) { .run-body { grid-template-columns: 240px minmax(0,1fr); } }
@media (max-width: 780px)  { .run-body { grid-template-columns: 1fr; } }

.run-hd {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}

/* ── Left: the agents ─────────────────────────────────────────────────── */
.run-jobs { padding: 16px; border-right: 1px solid var(--border-subtle); }
@media (max-width: 780px) { .run-jobs { border-right: 0; border-bottom: 1px solid var(--border-subtle); } }
.run-job {
  display: flex; align-items: center; gap: 9px; padding: 7px 0;
  font-size: 12px; color: var(--text-disabled);
  transition: color 300ms var(--ease-expo);
}
.run-job .d {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--border-strong); transition: background 300ms var(--ease-expo),
              box-shadow 300ms var(--ease-expo);
}
.run-job .n { flex: 1; min-width: 0; }
.run-job .m {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-disabled);
  opacity: 0; transition: opacity 320ms var(--ease-expo);
  font-variant-numeric: tabular-nums; text-align: right; flex: none;
}
.run-job.running { color: var(--text-primary); }
.run-job.running .d {
  background: var(--accent);
  animation: sw-pulse 1.2s ease-in-out infinite;
}
.run-job.done { color: var(--text-secondary); }
.run-job.done .d { background: var(--accent); box-shadow: 0 0 7px var(--accent-glow); }
.run-job.done .m { opacity: 1; }

/* ── Middle: the activity feed ────────────────────────────────────────── */
.run-log { padding: 16px; min-width: 0; display: flex; flex-direction: column; }
.run-lines {
  flex: 1; font-size: 11.5px; line-height: 1.85; color: var(--text-secondary);
  min-height: 210px;
}
.run-lines div {
  opacity: 0; transform: translateY(4px);
  animation: run-line 340ms var(--ease-expo) forwards;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@keyframes run-line { to { opacity: 1; transform: none; } }
.run-lines .t {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-disabled);
  margin-right: 9px; font-variant-numeric: tabular-nums;
}
.run-lines b { color: var(--text-primary); font-weight: 620; }
.run-lines .ok { color: var(--accent-fg); }
.run-lines .ok b { color: var(--accent-fg); }

/* ── Right: the outcome ───────────────────────────────────────────────── */
.run-out {
  padding: 16px; border-left: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 12px;
}
@media (max-width: 1080px) {
  .run-out { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border-subtle);
             flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px; }
  .run-out .run-hd { display: none; }
  .run-out .run-foot { margin-left: auto; }
}
.run-donut-row { display: flex; align-items: center; gap: 12px; }
.run-donut {
  --p: 0; width: 74px; height: 74px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(closest-side, var(--bg-surface) 78%, transparent 79% 100%),
    conic-gradient(var(--accent) calc(var(--p) * 1%), var(--bg-active) 0);
  transition: --p 1400ms var(--ease-expo);
}
.run-donut b {
  font-size: 19px; font-weight: 680; letter-spacing: -.02em;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.run-donut-row .lbl { font-size: 10.5px; line-height: 1.45; color: var(--text-muted); }
.run-donut-row .lbl b { display: block; font-size: 12px; color: var(--text-secondary); font-weight: 600; margin-bottom: 2px; }

.run-stat {
  display: flex; align-items: baseline; gap: 9px;
  padding: 9px 11px; border-radius: var(--radius-md);
  background: var(--bg-inset); border: 1px solid var(--border-subtle);
}
.run-stat b {
  font-size: 20px; font-weight: 700; letter-spacing: -.025em;
  color: var(--accent-fg); font-variant-numeric: tabular-nums; line-height: 1;
}
.run-stat span { font-size: 10.5px; line-height: 1.4; color: var(--text-muted); }
.run-stat:last-of-type b { color: var(--text-secondary); }
.run-foot { font-size: 10.5px; color: var(--text-disabled); line-height: 1.45; }

.run-final {
  padding: 10px 16px; border-top: 1px solid var(--border-subtle);
  background: var(--bg-inset); font-size: 12px; color: var(--text-muted);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  opacity: 0; transition: opacity 420ms var(--ease-expo);
}
.lp-run.parked .run-final { opacity: 1; }
.run-final b { color: var(--accent-fg); font-weight: 600; }

/* ── The AI-visibility sweep (now a section instrument, not the hero) ──── */
.lp-sweep {
  position: relative; margin-top: clamp(30px, 4vw, 50px);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: 16px; box-shadow: var(--shadow-lg);
  contain: layout paint; overflow: hidden;
}

.run-rail,
.sw-rail {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 16px; border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-inset);
}
.run-rail .live,
.sw-rail .live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent-fg);
}
.run-rail .live::before,
.sw-rail .live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-glow);
  animation: sw-pulse 1.4s ease-in-out infinite;
}
@keyframes sw-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
.run-rail .st,
.sw-rail .st { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.run-rail .st b,
.sw-rail .st b { color: var(--text-secondary); font-weight: 600; }
.run-rail .clock,
.sw-rail .clock { margin-left: auto; }
.run-rail .replay,
.sw-rail .replay {
  margin-left: auto; display: none; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--border-default); cursor: pointer;
  height: 26px; padding: 0 11px; border-radius: var(--radius-full);
  font: inherit; font-size: 11.5px; font-weight: 550; color: var(--text-secondary);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.run-rail .replay:hover,
.sw-rail .replay:hover { color: var(--text-primary); border-color: var(--border-strong); }
.lp-run.parked .replay,
.lp-sweep.parked .replay { display: inline-flex; }
.lp-run.parked .clock,
.lp-sweep.parked .clock { display: none; }

.sw-body { display: grid; grid-template-columns: minmax(0,1fr) 292px; }
@media (max-width: 1024px) { .sw-body { grid-template-columns: 1fr; } }

.sw-matrix { position: relative; padding: 16px; min-width: 0; }
.sw-grid {
  display: grid; grid-template-columns: minmax(150px, 1.6fr) repeat(5, minmax(0, 1fr));
  gap: 6px; align-items: stretch;
}
.sw-engine {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 6px 2px 9px; border-bottom: 1px solid var(--border-subtle);
  text-align: center;
}
.sw-engine .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--e, var(--chart-6));
  transition: box-shadow 200ms var(--ease-expo);
}
.sw-engine.active .dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--e) 22%, transparent); }
.sw-engine .n {
  font-size: 10.5px; font-weight: 650; letter-spacing: .02em;
  color: var(--text-muted); line-height: 1.25;
}
.sw-engine.done .n { color: var(--text-secondary); }
.sw-engine .ms {
  font-family: var(--font-mono); font-size: 9.5px; color: var(--text-disabled);
  min-height: 12px; opacity: 0; transition: opacity 260ms var(--ease-expo);
  font-variant-numeric: tabular-nums;
}
.sw-engine.done .ms { opacity: 1; }
.sw-corner { border-bottom: 1px solid var(--border-subtle); }

.sw-q {
  display: flex; align-items: center; padding: 0 10px 0 4px;
  font-size: 11.5px; line-height: 1.3; color: var(--text-muted);
  min-height: 44px; border-right: 1px solid var(--border-subtle);
}

.sw-cell {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  min-height: 44px; border-radius: var(--radius-md);
  background: var(--bg-inset); border: 1px solid transparent;
  font-size: 11px; font-weight: 600; color: var(--text-disabled);
  opacity: 0; transform: scale(.92);
  transition: opacity 260ms var(--ease-expo), transform 260ms var(--ease-expo),
              background 300ms var(--ease-expo), border-color 300ms var(--ease-expo),
              color 300ms var(--ease-expo);
}
.sw-cell.on { opacity: 1; transform: none; }
.sw-cell .r { font-size: 9.5px; font-weight: 550; color: var(--text-muted); letter-spacing: .01em; }

.sw-cell[data-state="scan"]   { background: var(--accent-subtle); border-color: var(--accent-border); }
.sw-cell[data-state="absent"] { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-fg); }
.sw-cell[data-state="mention"]{ background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-fg); }
.sw-cell[data-state="cited"]  { background: var(--success-bg); border-color: var(--success-border); color: var(--success-fg); }
.sw-cell[data-state="fixed"]  { background: var(--accent-subtle); border-color: var(--accent-border); color: var(--accent-fg); }

.sw-cell.flag { animation: sw-flag 1.4s var(--ease-expo); }
@keyframes sw-flag {
  0%, 100% { box-shadow: inset 0 0 0 1px transparent; }
  30%, 70% { box-shadow: inset 0 0 0 1px var(--danger-border); }
}
.sw-cell.bloom::after {
  content: ""; position: absolute; inset: -6px; border-radius: inherit;
  background: radial-gradient(closest-side, var(--accent-glow), transparent 72%);
  animation: sw-bloom 700ms var(--ease-expo) forwards; pointer-events: none;
}
@keyframes sw-bloom { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(1.25); } }
.sw-cell.pop { animation: sw-pop 260ms var(--ease-spring); }
@keyframes sw-pop { from { transform: scale(.86); } to { transform: scale(1); } }

/* The scan line */
.sw-scan {
  position: absolute; top: 52px; bottom: 16px; width: 2px; left: 0;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 24px var(--accent-glow);
  opacity: 0; pointer-events: none; will-change: transform;
  transition: transform 700ms var(--ease-expo), opacity 220ms linear;
}
@media (max-width: 720px) { .sw-scan { box-shadow: 0 0 10px var(--accent-glow); } }

/* Filaments: fix chip → matrix cell */
.sw-wires { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.sw-wires path {
  fill: none; stroke: var(--accent); stroke-width: 1; opacity: .55;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
}
.sw-wires path.draw { animation: sw-draw 620ms var(--ease-expo) forwards; }
@keyframes sw-draw { to { stroke-dashoffset: 0; opacity: 0; } }

/* Readout */
.sw-out {
  padding: 16px; border-left: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
@media (max-width: 1024px) { .sw-out { border-left: 0; border-top: 1px solid var(--border-subtle); } }

.sw-ring { display: flex; align-items: center; gap: 14px; }
.sw-donut {
  --p: 0; width: 84px; height: 84px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(closest-side, var(--bg-surface) 78%, transparent 79% 100%),
    conic-gradient(var(--accent) calc(var(--p) * 1%), var(--bg-active) 0);
  transition: --p 1200ms var(--ease-expo);
}
.sw-donut b {
  font-size: 20px; font-weight: 680; letter-spacing: -.02em;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.sw-ring .lbl { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.sw-ring .lbl b { display: block; font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }

.sw-gaps { display: flex; flex-direction: column; gap: 6px; min-height: 96px; }
.sw-gaps .hd {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
.sw-chip {
  display: flex; align-items: center; gap: 7px; padding: 6px 9px;
  border-radius: var(--radius-md); background: var(--danger-bg);
  border: 1px solid var(--danger-border); font-size: 11px; color: var(--danger-fg);
  opacity: 0; transform: translateX(12px);
}
.sw-chip.in { animation: sw-chip-in 260ms var(--ease-spring) forwards; }
.sw-chip.out { animation: sw-chip-out 240ms var(--ease-expo) forwards; }
@keyframes sw-chip-in  { to { opacity: 1; transform: none; } }
@keyframes sw-chip-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-10px) scale(.94); } }
.sw-chip .sev { margin-left: auto; font-family: var(--font-mono); font-size: 10px; opacity: .8; }

.sw-log {
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.75;
  color: var(--text-muted); background: var(--bg-inset);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: 9px 10px; min-height: 84px; overflow: hidden;
}
.sw-log div { opacity: 0; animation: sw-line 300ms var(--ease-expo) forwards; }
.sw-log .ok { color: var(--accent-fg); }
@keyframes sw-line { to { opacity: 1; } }

.sw-final {
  padding: 10px 16px; border-top: 1px solid var(--border-subtle);
  background: var(--bg-inset); font-size: 12px; color: var(--text-muted);
  display: flex; align-items: center; gap: 9px;
  opacity: 0; transition: opacity 420ms var(--ease-expo);
}
.lp-sweep.parked .sw-final { opacity: 1; }
.sw-final b { color: var(--accent-fg); font-weight: 600; }

/* Parked cells become explorable */
.sw-cell[data-src] { cursor: help; }
.sw-cell[data-src]:hover { border-color: var(--border-strong); }
.sw-tip {
  position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%); width: max-content; max-width: 230px;
  padding: 7px 10px; border-radius: var(--radius-md);
  background: var(--bg-overlay); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-overlay); font-size: 10.5px; font-weight: 450;
  line-height: 1.5; color: var(--text-secondary); text-align: left;
  pointer-events: none; opacity: 0; animation: ui-pop 160ms var(--ease-expo) forwards;
}
.sw-tip b { display: block; color: var(--text-primary); font-size: 10px;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }

/* ============================================================================
   9. KPI TILES
   ========================================================================= */
.lp .kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
@media (max-width: 760px) { .lp .kpis { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.lp .kpi-t {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 14px 16px;
}
.lp .kpi-t .v {
  font-size: 26px; font-weight: 680; letter-spacing: -.025em;
  color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.lp .kpi-t .l {
  margin-top: 5px; font-size: 10.5px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}

/* ============================================================================
   10. THE LOOP
   ========================================================================= */
.lp-loop { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; position: relative; }
@media (max-width: 900px) { .lp-loop { grid-template-columns: 1fr; } }
.lp-loop .step { position: relative; }
.lp-loop .step .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; margin-bottom: 14px;
  background: var(--accent-subtle); border: 1px solid var(--accent-border);
  color: var(--accent-fg); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lp-loop .step h3 { margin-bottom: 10px; }
.lp-loop .step p { color: var(--text-secondary); font-size: .9375rem; line-height: 1.65; }

.lp-loopsvg { width: 100%; height: auto; margin-top: 40px; overflow: visible; }
.lp-loopsvg .trk { fill: none; stroke: var(--border-default); stroke-width: 1.25; }
.lp-loopsvg .lit {
  fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1.5s var(--ease-expo);
}
.lp-loopsvg.in .lit { stroke-dashoffset: 0; }
.lp-loopsvg text { fill: var(--text-muted); font-size: 10px; font-weight: 650;
  letter-spacing: .08em; text-transform: uppercase; font-family: var(--font-sans); }
.lp-loopsvg .node { fill: var(--bg-raised); stroke: var(--border-default); }
.lp-loopsvg .pk { fill: var(--accent); filter: drop-shadow(0 0 5px var(--accent-glow)); }

/* ============================================================================
   11. TABLES / MOCK CHROME
   ========================================================================= */
.lp .tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lp .tbl th {
  text-align: left; padding: 9px 14px; font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
  background: var(--bg-inset); border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.lp .tbl td {
  padding: 10px 14px; border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary); vertical-align: middle;
}
.lp .tbl tbody tr:last-child td { border-bottom: 0; }
.lp .tbl .num { font-variant-numeric: tabular-nums; }
.lp .st-ok   { color: var(--success-fg); font-weight: 600; }
.lp .st-warn { color: var(--warning-fg); font-weight: 600; }
.lp .st-bad  { color: var(--danger-fg);  font-weight: 600; }

.lp .src {
  display: flex; align-items: center; gap: 9px; padding: 8px 14px;
  border-bottom: 1px solid var(--border-subtle); font-size: 12.5px;
}
.lp .src:last-child { border-bottom: 0; }
.lp .src .u { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp .src .k { margin-left: auto; flex: none; }
.lp .k {
  display: inline-flex; height: 19px; align-items: center; padding: 0 7px;
  border-radius: var(--radius-sm); font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.lp .k.brand { background: var(--success-bg); color: var(--success-fg); }
.lp .k.comp  { background: var(--danger-bg);  color: var(--danger-fg); }
.lp .k.comm  { background: var(--info-bg);    color: var(--info-fg); }
.lp .k.rdt   { background: var(--warning-bg); color: var(--warning-fg); }

/* ============================================================================
   12. THE DISPATCHER
   ========================================================================= */
.lp-disp { display: flex; flex-direction: column; gap: 14px; }
.lp-route {
  display: grid; grid-template-columns: minmax(0,1fr) 56px minmax(0,1fr);
  align-items: stretch; gap: 0;
}
@media (max-width: 860px) { .lp-route { grid-template-columns: 1fr; } }
.lp-route .side {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: 16px 18px;
}
.lp-route .side .hd {
  display: flex; align-items: center; gap: 8px; margin-bottom: 9px; flex-wrap: wrap;
}
.lp-route .side .ttl { font-size: 13px; font-weight: 620; color: var(--text-primary); }
.lp-route .side p { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.lp-route .side .ev {
  margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-muted); line-height: 1.7;
}
.lp-route .to {
  display: flex; align-items: center; justify-content: center; position: relative;
}
@media (max-width: 860px) { .lp-route .to { height: 44px; transform: rotate(90deg); } }
.lp-route .to svg { width: 40px; height: 12px; overflow: visible; }
.lp-route .to path {
  fill: none; stroke: var(--accent); stroke-width: 1.25; stroke-linecap: round;
  stroke-dasharray: 44; stroke-dashoffset: 44;
  transition: stroke-dashoffset 700ms var(--ease-expo);
}
.lp-route.in .to path { stroke-dashoffset: 0; }
.lp-route .to .hd-arrow { fill: var(--accent); opacity: 0; transition: opacity 300ms 600ms var(--ease-expo); }
.lp-route.in .to .hd-arrow { opacity: 1; }
.lp-route .side.dest { background: var(--bg-inset); border-color: var(--accent-border); }
.lp-route .side.dest .ttl { color: var(--accent-fg); }

.lp-note {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 8px;
  padding: 16px 18px; border-radius: var(--radius-xl);
  background: var(--accent-subtle); border: 1px solid var(--accent-border);
}
.lp-note svg { width: 17px; height: 17px; flex: none; color: var(--accent-fg); margin-top: 1px; }
.lp-note b { color: var(--text-primary); }
.lp-note p { font-size: 14px; line-height: 1.6; color: var(--text-secondary); }

/* ============================================================================
   13. HEALTH DONUT / FEATURE LISTS
   ========================================================================= */
.lp-health { display: flex; align-items: center; gap: 22px; padding: 20px; flex-wrap: wrap; }
.lp-donut {
  --p: 0; --dc: var(--accent);
  width: 112px; height: 112px; border-radius: 50%; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(closest-side, var(--bg-surface) 79%, transparent 80% 100%),
    conic-gradient(var(--dc) calc(var(--p) * 1%), var(--bg-active) 0);
  transition: --p 1400ms var(--ease-expo);
}
.lp-donut b { font-size: 26px; font-weight: 700; letter-spacing: -.03em;
  color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1; }
.lp-donut span { font-size: 10px; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted); margin-top: 3px; }
.lp-hrows { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.lp-hrow { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.lp-hrow .nm { color: var(--text-secondary); }
.lp-hrow .ct { margin-left: auto; display: flex; gap: 8px; font-variant-numeric: tabular-nums; }

.lp-feat { display: flex; flex-direction: column; gap: 2px; }
.lp-feat li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 0; border-bottom: 1px solid var(--border-subtle);
}
.lp-feat li:last-child { border-bottom: 0; }
.lp-feat .ic { flex: none; color: var(--accent-fg); margin-top: 3px; }
.lp-feat .ic svg { width: 15px; height: 15px; display: block; }
.lp-feat b { display: block; color: var(--text-primary); font-size: 14.5px; font-weight: 620; margin-bottom: 4px; }
.lp-feat p { font-size: 13.5px; line-height: 1.62; color: var(--text-secondary); }

/* ============================================================================
   14. PINNED ROTATOR
   ========================================================================= */
.lp-pin { position: relative; }
.lp-pin .track { position: relative; height: 320vh; }
.lp-pin .stick {
  position: sticky; top: 96px; height: min(560px, 74vh);
  display: flex; flex-direction: column;
}
/* Out of flow, so they define the trigger bands without adding height on top
   of the 320vh track. Paired with rootMargin -45%/-45%, each state lands when
   the sticky panel is centred. */
.lp-pin .sent { position: absolute; left: 0; width: 1px; height: 80vh; pointer-events: none; }
.lp-pin .sent[data-s="0"] { top: 0; }
.lp-pin .sent[data-s="1"] { top: 80vh; }
.lp-pin .sent[data-s="2"] { top: 160vh; }
.lp-pin .sent[data-s="3"] { top: 240vh; }
.lp-pin .stage { position: relative; flex: 1; min-height: 0; }
.lp-pin .state {
  position: absolute; inset: 0; opacity: 0; transform: translateY(8px);
  transition: opacity 280ms var(--ease-expo), transform 280ms var(--ease-expo);
  pointer-events: none; overflow: hidden;
}
.lp-pin .state.on { opacity: 1; transform: none; pointer-events: auto; }
.lp-rail { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.lp-rail .s {
  display: flex; align-items: center; gap: 8px; padding: 7px 13px;
  border-radius: var(--radius-full); border: 1px solid var(--border-subtle);
  background: var(--bg-surface); font-size: 12px; font-weight: 550;
  color: var(--text-muted); transition: all 240ms var(--ease-expo);
}
.lp-rail .s .d { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); transition: background 240ms; }
.lp-rail .s.done { color: var(--text-secondary); }
.lp-rail .s.done .d { background: var(--accent); }
.lp-rail .s.now {
  color: var(--accent-fg); border-color: var(--accent-border); background: var(--accent-subtle);
}
.lp-rail .s.now .d { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }

@media (max-width: 860px) {
  .lp-pin .track { height: auto; }
  .lp-pin .stick { position: static; height: auto; }
  .lp-pin .sent { display: none; }
  .lp-pin .stage { display: flex; flex-direction: column; gap: 16px; }
  .lp-pin .state { position: static; opacity: 1; transform: none; pointer-events: auto; }
}

/* ============================================================================
   15. MARQUEE
   ========================================================================= */
.lp-marq { position: relative; overflow: hidden; padding-block: 6px; }
.lp-marq::before, .lp-marq::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.lp-marq::before { left: 0;  background: linear-gradient(90deg, var(--bg-page), transparent); }
.lp-marq::after  { right: 0; background: linear-gradient(270deg, var(--bg-page), transparent); }
.lp-marq .track {
  display: flex; gap: 14px; width: max-content;
  animation: marquee 60s linear infinite; will-change: transform;
}
.lp-marq:hover .track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.lp-ans {
  width: 340px; flex: none; padding: 15px 17px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); transition: transform 220ms var(--ease-expo), border-color 220ms;
}
.lp-ans:hover { transform: translateY(-2px); border-color: var(--border-default); }
.lp-ans .e {
  display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
}
.lp-ans .e .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--e); }
.lp-ans p { font-size: 13px; line-height: 1.62; color: var(--text-secondary); }
.lp-ans mark {
  background: var(--accent-subtle); color: var(--accent-fg);
  padding: 1px 4px; border-radius: 4px; font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .lp-marq .track { animation: none; width: auto; }
  .lp-marq { overflow-x: auto; scroll-snap-type: x mandatory; }
  .lp-ans { scroll-snap-align: start; }
}

/* ============================================================================
   16. TERMINAL / INTEGRATIONS / FAQ / FOOTER
   ========================================================================= */
.lp-term {
  background: var(--bg-inset); border: 1px solid var(--border-default);
  border-radius: var(--radius-xl); overflow: hidden;
}
.lp-term .bar {
  display: flex; align-items: center; gap: 7px; padding: 9px 14px;
  border-bottom: 1px solid var(--border-subtle); background: var(--bg-raised);
}
.lp-term .bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.lp-term .bar span { margin-left: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.lp-term pre {
  margin: 0; padding: 16px 18px; overflow-x: auto;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.8; color: var(--text-secondary);
}
.lp-term .c { color: var(--text-disabled); }
.lp-term .a { color: var(--accent-fg); }
.lp-term .w { color: var(--warning-fg); }

.lp-ints { display: flex; flex-direction: column; gap: 16px; }
.lp-int-row { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.lp-int-row .lbl {
  width: 150px; flex: none; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}
.lp-int-row .set { display: flex; flex-wrap: wrap; gap: 7px; flex: 1; min-width: 240px; }

.lp-faq { display: flex; flex-direction: column; }
.lp-faq details {
  border-bottom: 1px solid var(--border-subtle);
}
.lp-faq summary {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 20px 0; list-style: none;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.012em;
  color: var(--text-primary); transition: color var(--t-fast);
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary:hover { color: var(--accent-fg); }
.lp-faq summary::after {
  content: ""; margin-left: auto; flex: none; width: 9px; height: 9px;
  border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 220ms var(--ease-expo);
}
.lp-faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.lp-faq .ans { padding: 0 0 22px; max-width: 76ch; }
.lp-faq .ans p { font-size: 15px; line-height: 1.68; color: var(--text-secondary); }

.lp-cta {
  text-align: center; padding-block: clamp(84px, 11vh, 156px);
  position: relative;
}
.lp-cta .display { margin-inline: auto; max-width: 17ch; }
.lp-cta .lead { margin: 20px auto 0; max-width: 52ch; }
.lp-cta .btn-row { justify-content: center; margin-top: 34px; }

.lp-foot {
  border-top: 1px solid var(--border-subtle); padding-block: 52px 34px;
  background: color-mix(in srgb, var(--mk-void) 70%, transparent);
}
.lp-foot .cols {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px 24px;
}
@media (max-width: 800px) { .lp-foot .cols { grid-template-columns: repeat(2, 1fr); } }
.lp-foot h4 {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px;
}
.lp-foot li { margin-bottom: 9px; }
.lp-foot li a { font-size: 13.5px; color: var(--text-secondary); transition: color var(--t-fast); }
.lp-foot li a:hover { color: var(--accent-fg); }
.lp-foot .blurb { font-size: 13.5px; line-height: 1.65; color: var(--text-muted); max-width: 34ch; margin-top: 14px; }
.lp-foot .bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-top: 42px; padding-top: 22px;
  border-top: 1px solid var(--border-subtle);
  font-size: 12.5px; color: var(--text-disabled);
}

/* ============================================================================
   17. MOTION POLICY
   theme.css already zeroes CSS durations under reduced motion. These rules
   cover the cases where "no animation" would otherwise mean "no content":
   every effect must resolve to its END state, never its start state.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .js .lp .rise { opacity: 1 !important; transform: none !important; filter: none !important; }
  .lp-lattice { animation: none; }
  .lp .sw-cell { opacity: 1; transform: none; }
  .lp .sw-scan { display: none; }
  .lp .sw-chip { opacity: 1; transform: none; }
  .lp .sw-log div { opacity: 1; }
  .lp .lp-loopsvg .lit, .lp .sw-wires path { stroke-dashoffset: 0; }
  .lp .lp-route .to path { stroke-dashoffset: 0; }
  .lp .lp-route .to .hd-arrow { opacity: 1; }
  .lp .sw-rail .live::before,
  .lp .run-rail .live::before { animation: none; }
  .lp .run-lines div { opacity: 1; transform: none; animation: none; }
  .lp .run-job.running .d { animation: none; }
}

/* ============================================================================
   18. SMALL SCREENS
   ========================================================================= */
@media (max-width: 720px) {
  .lp-hero { padding-top: 104px; }
  .lp-sweep { border-radius: 12px; }
  .sw-matrix { padding: 12px; }
  .sw-grid { grid-template-columns: minmax(96px, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 4px; }
  /* Engines 4 and 5 and queries 5 and 6 are dropped on mobile — landing.js
     builds the reduced set, these rules only cover the static fallback. */
  .sw-engine.xtra, .sw-cell.xtra, .sw-q.xtra { display: none; }
  .sw-cell { min-height: 40px; font-size: 10px; }
  .sw-q { font-size: 10.5px; min-height: 40px; }
  .lp-marq .track { animation-duration: 42s; }
  .lp-ans { width: 268px; }
  .lp-foot .cols { grid-template-columns: 1fr; gap: 26px; }
}

/* No-JS: nothing is hidden, the instrument shows its resolved state. */
.no-js .lp .sw-cell { opacity: 1; transform: none; }
.no-js .lp .sw-scan { display: none; }