/* ============================================================================
 * landing.css — RegiStream landing page (redesign)
 * Class prefixes: rs-* (global components), lp-* (landing page)
 * Mirrors buckettrips-v2 conventions. Uses tokens from base_v2.html.
 * Mobile-first; min-width media queries only.
 * ============================================================================ */

/* ============================================================ NAVIGATION */

.rs-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-color);
  z-index: 100;
}
[data-mode="dark"] .rs-nav {
  background: rgba(10, 10, 13, 0.82);
}
.rs-nav-inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: var(--space-6);
}
.rs-nav-brand {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-decoration: none;
  flex-shrink: 0;
}
.rs-nav-brand:hover { color: var(--text-primary); }
.rs-nav-menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-6);
  flex: 1;
  align-items: center;
}
.rs-nav-menu li { margin: 0; }
.rs-nav-menu a {
  color: var(--text-secondary);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color var(--t-fast);
}
.rs-nav-menu a:hover { color: var(--accent-color); }
.rs-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}
.rs-nav-github {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.rs-nav-github:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
/* Lucide preserves classes when replacing <i data-lucide> with <svg>, so the
 * .rs-nav-github-logo class lands on the resulting SVG. Belt-and-braces:
 * target both the pre-replacement <i> AND the post-replacement <svg>, and
 * force visibility properties that any parent might otherwise collapse. */
.rs-nav-github > i,
.rs-nav-github > svg,
.rs-nav-github-logo {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  flex-shrink: 0 !important;
  color: inherit;
  stroke: currentColor;
}

/* ----- Pill variant with live star count ----- */
.rs-nav-github-pill {
  width: auto;
  height: 34px;
  padding: 0 10px;
  gap: 8px;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
.rs-nav-github-pill:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}
.rs-nav-github-star {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.rs-nav-github-star > i,
.rs-nav-github-star > svg,
.rs-nav-github-star-icon {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  flex-shrink: 0 !important;
  color: #f59e0b;
  stroke: currentColor;
  fill: currentColor;
  transform-origin: center;
  animation: rs-nav-star-nudge 14s ease-in-out infinite;
}
.rs-nav-github-pill:hover .rs-nav-github-star-icon {
  animation-duration: 2s;
}
@keyframes rs-nav-star-nudge {
  0%, 88%, 100% { transform: scale(1) rotate(0); }
  91% { transform: scale(1.25) rotate(-10deg); }
  94% { transform: scale(0.92) rotate(8deg); }
  97% { transform: scale(1.1) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rs-nav-github-star-icon { animation: none; }
}

.rs-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-primary);
}
.rs-nav-toggle i { width: 20px; height: 20px; }

@media (min-width: 768px) {
  .rs-nav-menu { display: flex; }
  .rs-nav-toggle { display: none; }
}

/* ----- Navbar avatar + dropdown ----- */
.rs-dropdown {
  position: relative;
}
.rs-nav-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  border: 1px solid var(--border-color);
  cursor: pointer;
  padding: 0;
  transition: background var(--t-fast), border-color var(--t-fast);
  flex-shrink: 0;
  color: var(--text-primary);
}
.rs-nav-avatar:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
  box-shadow: none;
}
.rs-nav-avatar:focus-visible {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-alpha);
}
.rs-nav-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.rs-nav-avatar i {
  width: 16px; height: 16px;
  color: var(--text-muted);
}
.rs-nav-avatar-guest i { color: var(--text-secondary); }

.rs-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.rs-dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.rs-dropdown-header {
  padding: var(--space-3) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-2);
}
.rs-dropdown-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rs-dropdown-email {
  font-size: var(--fs-tiny);
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rs-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-xs);
  transition: background var(--t-fast), color var(--t-fast);
}
.rs-dropdown-item i {
  width: 15px; height: 15px;
  opacity: 0.7;
  flex-shrink: 0;
}
.rs-dropdown-item:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.rs-dropdown-item-soon {
  color: var(--text-muted);
  cursor: default;
  pointer-events: none;
}
.rs-dropdown-item-soon:hover {
  background: transparent;
  color: var(--text-muted);
}
.rs-dropdown-badge {
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--accent-alpha);
  color: var(--accent-hover);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rs-dropdown-divider {
  height: 1px;
  background: var(--border-color);
  margin: var(--space-2) 0;
}

/* ----- Dropdown Appearance section (Light/Dark/Auto segmented control) ----- */
.rs-dropdown-section {
  padding: var(--space-2) var(--space-3) var(--space-3);
}
.rs-dropdown-section-label {
  font-size: var(--fs-tiny);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
  padding: 0 var(--space-1);
}
.rs-dropdown-segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.rs-seg-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: var(--space-2) var(--space-1);
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast);
}
.rs-seg-btn i {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}
.rs-seg-btn:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}
.rs-seg-btn:hover i { opacity: 1; }
.rs-seg-btn.active {
  background: var(--card-bg);
  color: var(--accent-color);
  box-shadow: var(--shadow-sm);
}
.rs-seg-btn.active i { opacity: 1; }
[data-mode="dark"] .rs-seg-btn.active {
  background: var(--bg-elevated);
}

/* Mobile open menu */
.rs-nav-menu.open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: var(--nav-height);
  left: 0; right: 0;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  padding: var(--space-5) var(--space-6);
  gap: var(--space-4);
  box-shadow: var(--shadow-md);
}

/* ============================================================ BODY OFFSET */

.landing-page main { padding-top: var(--nav-height); }

/* ============================================================ SECTIONS */

.lp-section {
  padding: var(--space-12) 0;
}
.lp-section-tight {
  padding: var(--space-10) 0;
}
.lp-section-alt {
  background: var(--bg-secondary);
}
@media (min-width: 768px) {
  .lp-section { padding: var(--space-16) 0; }
  .lp-section-tight { padding: var(--space-12) 0; }
}

.lp-section-heading {
  text-align: center;
  margin-bottom: var(--space-12);
}
.lp-section-heading-eyebrow {
  display: inline-block;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--accent-color);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
}
.lp-section-heading h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-3) 0;
  line-height: 1.1;
}
.lp-section-heading p {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ============================================================ HERO
 * Asymmetric two-column hero: narrative (left) + animated catalog grid (right).
 * Soft accent halo behind everything. Serif slogan against sans brand mark.
 * The right-side grid is a CSS-only 12x7 dot field in 3D perspective with a
 * traveling accent wave; two flag pins float over it and a line connects them.
 * Trust row spans full width below the layout.
 * ============================================================ */

.lp-hero {
  position: relative;
  padding: var(--space-20) 0 var(--space-16) 0;
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 768px) {
  .lp-hero { padding: var(--space-24) 0 var(--space-20) 0; }
}
@media (min-width: 1200px) {
  .lp-hero { padding: calc(var(--space-24) + 24px) 0 var(--space-24) 0; }
}

/* Decorative radial halo, positioned behind everything in the hero */
.lp-hero-halo {
  position: absolute;
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1300px, 120vw);
  height: 780px;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 55% 45% at 65% 40%, var(--accent-alpha-strong) 0%, transparent 65%),
    radial-gradient(ellipse 80% 55% at 50% 35%, var(--accent-alpha) 0%, transparent 70%);
  filter: blur(48px);
  opacity: 0.9;
}
[data-mode="dark"] .lp-hero-halo { opacity: 0.7; }

/* ----- Two-column layout ----- */
.lp-hero-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
  margin-bottom: var(--space-12);
}
@media (min-width: 992px) {
  .lp-hero-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-16);
    margin-bottom: var(--space-16);
  }
}

.lp-hero-main {
  text-align: left;
}

/* ----- Kicker pill (content-bearing, not a slogan echo) ----- */
.lp-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 16px 6px 8px;
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-10);
  max-width: 100%;
}
.lp-hero-kicker-flags {
  display: inline-flex;
  align-items: center;
}
.lp-hero-kicker-flags img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
[data-mode="dark"] .lp-hero-kicker-flags img {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.lp-hero-kicker-flags img + img {
  margin-left: -7px;
  border: 2px solid var(--card-bg);
}

/* ----- Brand mark (sans) ----- */
.lp-hero-title {
  font-family: var(--font-sans);
  font-size: clamp(2.8rem, 7.5vw, 5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0 0 var(--space-5) 0;
  color: var(--text-primary);
}

/* ----- Slogan ----- */
.lp-hero-tagline {
  font-family: var(--font-sans);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  max-width: 620px;
  margin: 0 0 var(--space-6) 0;
}

/* ----- Positioning sub ----- */
.lp-hero-sub {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 0 var(--space-10) 0;
}

/* ----- CTA row ----- */
.lp-hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-2);
}

/* ============================================================ HERO VIZ
 * Animated 12x7 dot grid in 3D perspective. Cells run a staggered wave that
 * loops every 5s; delay is per-cell via --i computed as (row + col) so the
 * wave travels diagonally. Two flag pins float above the grid, connected by
 * a dashed SVG line that draws itself on loop. Hidden below 768px to keep
 * mobile hero tight.
 * ============================================================ */

.lp-hero-viz {
  display: none;
}
@media (min-width: 768px) {
  .lp-hero-viz {
    display: block;
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    justify-self: center;
  }
}

.lp-hero-viz-glow {
  position: absolute;
  inset: -30px;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, var(--accent-alpha-strong) 0%, transparent 65%);
  filter: blur(42px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.65;
}
[data-mode="dark"] .lp-hero-viz-glow { opacity: 0.5; }

/* ============================================================ HERO CAROUSEL
 * Wraps the tool-demo slides (autolabel, datamirror, ...) in a carousel with
 * clickable dot indicators at the bottom. Slides are stacked via CSS grid so
 * the container auto-sizes to the tallest slide and only the active one is
 * visible. Auto-rotates every 14s, user click overrides.
 * ============================================================ */

.lp-hero-carousel {
  position: relative;
  z-index: 1;
  width: 100%;
}

.lp-hero-slides {
  display: grid;
  position: relative;
}
.lp-hero-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.lp-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Pause animations on hidden slides so they don't drift on their own clock.
   JS resets currentTime to 0 on activation, so the fade-in and the content
   animation start together (no mid-cycle frame when switching slides). */
.lp-hero-slide:not(.is-active),
.lp-hero-slide:not(.is-active) *,
.lp-hero-slide:not(.is-active) *::before,
.lp-hero-slide:not(.is-active) *::after {
  animation-play-state: paused !important;
}

.lp-hero-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-5);
  padding: 0;
}
.lp-hero-dot {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--t-fast);
  line-height: 1.2;
}
.lp-hero-dot:hover {
  color: var(--text-secondary);
  border-color: var(--text-muted);
}
.lp-hero-dot.is-active {
  background: var(--accent-alpha);
  border-color: var(--accent-alpha-strong);
  color: var(--accent-hover);
}

/* ============================================================ DEMO
 * CSS-only animated demo that cycles through an autolabel transformation.
 * 6s loop, 6 phases:
 *   1 (0-8%):    table frame emerges
 *   2 (8-14%):   rows stagger-fade in (5 rows)
 *   3 (14-42%):  hold cryptic "before" state (read the codes)
 *   4 (42-52%):  label swap + caption "this" appears simultaneously
 *   5 (52-92%):  hold labeled "after" state (read the labels)
 *   6 (92-100%): fade out, loop
 * Respects prefers-reduced-motion.
 * ============================================================ */

.lp-demo {
  --demo-loop: 6s;
  --demo-ease: cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  font-family: var(--font-sans);
  animation: lp-demo-frame var(--demo-loop) var(--demo-ease) infinite;
}
@keyframes lp-demo-frame {
  0%   { opacity: 0; transform: translateY(12px) scale(0.97); }
  8%   { opacity: 1; transform: translateY(0)    scale(1); }
  92%  { opacity: 1; transform: translateY(0)    scale(1); }
  100% { opacity: 0; transform: translateY(0)    scale(1); }
}

/* ----- Caption above the table ----- */
.lp-demo-caption {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--space-4) 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-secondary);
}
.lp-demo-caption-lead {
  display: inline-block;
  animation: lp-demo-caption-lead var(--demo-loop) var(--demo-ease) infinite;
}
@keyframes lp-demo-caption-lead {
  0%, 4%   { opacity: 0; transform: translateY(4px); }
  10%, 92% { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; }
}
.lp-demo-caption-this {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-hover);
  font-weight: 700;
  opacity: 0;
  animation: lp-demo-caption-this var(--demo-loop) var(--demo-ease) infinite;
}
.lp-demo-caption-this i {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}
@keyframes lp-demo-caption-this {
  0%, 38%  { opacity: 0; transform: translateY(5px) scale(0.9); }
  44%, 92% { opacity: 1; transform: translateY(0)   scale(1); }
  100%     { opacity: 0; transform: translateY(5px) scale(0.9); }
}

/* ----- Table frame ----- */
.lp-demo-table {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.lp-demo-head,
.lp-demo-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 1fr;
}

.lp-demo-head {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}
.lp-demo-head .lp-demo-cell {
  color: var(--accent-hover);
  font-weight: 700;
  font-size: 0.72rem;
  min-height: 30px;
}

.lp-demo-body { position: relative; }

.lp-demo-row {
  position: relative;
  border-bottom: 1px solid var(--border-color);
}
.lp-demo-row:last-child { border-bottom: none; }

.lp-demo-cell {
  position: relative;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-primary);
  min-height: 34px;
  display: flex;
  align-items: center;
}
.lp-demo-cell-swap {
  display: grid;
  align-items: center;
}
.lp-demo-cell-swap > span {
  grid-area: 1 / 1;
  min-width: 0;
}

/* Row stagger emerge (5 rows with baked-in percentage stops, 10s loop) */
.lp-demo-row-1,
.lp-demo-row-2,
.lp-demo-row-3,
.lp-demo-row-4,
.lp-demo-row-5 {
  opacity: 0;
}
.lp-demo-row-1 { animation: lp-demo-row-1 var(--demo-loop) var(--demo-ease) infinite; }
.lp-demo-row-2 { animation: lp-demo-row-2 var(--demo-loop) var(--demo-ease) infinite; }
.lp-demo-row-3 { animation: lp-demo-row-3 var(--demo-loop) var(--demo-ease) infinite; }
.lp-demo-row-4 { animation: lp-demo-row-4 var(--demo-loop) var(--demo-ease) infinite; }
.lp-demo-row-5 { animation: lp-demo-row-5 var(--demo-loop) var(--demo-ease) infinite; }

@keyframes lp-demo-row-1 {
  0%, 4%   { opacity: 0; transform: translateY(5px); }
  7%, 92%  { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(5px); }
}
@keyframes lp-demo-row-2 {
  0%, 5%   { opacity: 0; transform: translateY(5px); }
  8%, 92%  { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(5px); }
}
@keyframes lp-demo-row-3 {
  0%, 6%   { opacity: 0; transform: translateY(5px); }
  9%, 92%  { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(5px); }
}
@keyframes lp-demo-row-4 {
  0%, 7%   { opacity: 0; transform: translateY(5px); }
  10%, 92% { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(5px); }
}
@keyframes lp-demo-row-5 {
  0%, 8%   { opacity: 0; transform: translateY(5px); }
  11%, 92% { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(5px); }
}

/* Code ↔ label swap (used in headers and value cells) */
.lp-demo-cell-swap .lp-demo-code {
  animation: lp-demo-code-out var(--demo-loop) var(--demo-ease) infinite;
}
.lp-demo-cell-swap .lp-demo-label {
  opacity: 0;
  animation: lp-demo-label-in var(--demo-loop) var(--demo-ease) infinite;
}
@keyframes lp-demo-code-out {
  0%, 42%  { opacity: 1; filter: blur(0);   transform: translateY(0); }
  52%, 92% { opacity: 0; filter: blur(3px); transform: translateY(-4px); }
  100%     { opacity: 1; filter: blur(0);   transform: translateY(0); }
}
@keyframes lp-demo-label-in {
  0%, 42%  { opacity: 0; filter: blur(3px); transform: translateY(4px); }
  52%, 92% { opacity: 1; filter: blur(0);   transform: translateY(0); }
  100%     { opacity: 0; filter: blur(3px); transform: translateY(4px); }
}
.lp-demo-head .lp-demo-code  { color: var(--accent-hover); font-weight: 700; }
.lp-demo-head .lp-demo-label { color: var(--accent-hover); font-weight: 700; font-family: var(--font-sans); }
.lp-demo-body .lp-demo-label { font-family: var(--font-sans); }

/* Respect reduced-motion: pause everything, show final "after" state */
@media (prefers-reduced-motion: reduce) {
  .lp-demo,
  .lp-demo *,
  .lp-demo *::before,
  .lp-hero-viz-glow {
    animation: none !important;
  }
  .lp-demo { opacity: 1; }
  .lp-demo-row-1, .lp-demo-row-2, .lp-demo-row-3, .lp-demo-row-4, .lp-demo-row-5 { opacity: 1; }
  .lp-demo-cell-swap .lp-demo-code  { opacity: 0; }
  .lp-demo-cell-swap .lp-demo-label { opacity: 1; }
  .lp-demo-caption-lead, .lp-demo-caption-this { opacity: 1; transform: none; }
}

/* ----- Trust row (full width under the layout) ----- */
.lp-hero-trust {
  list-style: none;
  padding: var(--space-8) 0 0 0;
  margin: 0 auto;
  max-width: 920px;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4) var(--space-8);
  text-align: left;
}
@media (min-width: 768px) {
  .lp-hero-trust {
    grid-template-columns: repeat(3, 1fr);
  }
}
.lp-hero-trust li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.lp-hero-trust li strong {
  color: var(--text-primary);
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}
.lp-hero-trust li i {
  width: 18px;
  height: 18px;
  color: var(--accent-color);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Trust-strip flag cluster: migrates the hero's "where" claim out of the
 * eyebrow and into the trust strip. Keeps visual weight consistent with the
 * icon-led siblings — cluster is sized to the same footprint as an icon. */
.lp-hero-trust-flag-cluster {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-top: 0;
}
.lp-hero-trust-flag-cluster img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
[data-mode="dark"] .lp-hero-trust-flag-cluster img {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.lp-hero-trust-flag-cluster img + img {
  margin-left: -6px;
  border: 2px solid var(--bg-primary);
}
[data-mode="dark"] .lp-hero-trust-flag-cluster img + img {
  border-color: var(--bg-primary);
}

/* ============================================================ FLAGS
 * Circle-flag images from /app_static/vendor/circle-flags/flags/*.svg
 * Used in the hero panel, catalog cards, status rows, adopters, roadmap.
 * ============================================================ */
.lp-flag {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
}
[data-mode="dark"] .lp-flag {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.3);
}
.lp-flag-sm { width: 22px; height: 22px; }
.lp-flag-xs { width: 16px; height: 16px; }
.lp-flag-card { width: 26px; height: 26px; }

/* ============================================================ BUTTONS */

.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 22px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all var(--t-fast);
  white-space: nowrap;
  cursor: pointer;
}
.lp-btn i { width: 16px; height: 16px; }

.lp-btn-primary {
  background: var(--accent-gradient);
  color: #ffffff;
  box-shadow: var(--shadow-md);
}
.lp-btn-primary:hover {
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.lp-btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-color);
}
.lp-btn-ghost:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--accent-color);
}

/* ============================================================ CREDIBILITY STRIP */

.lp-credibility {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  text-align: center;
  margin-top: var(--space-12);
  padding-top: var(--space-10);
  border-top: 1px solid var(--border-color);
}
@media (min-width: 768px) {
  .lp-credibility {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}
.lp-stat {
  padding: var(--space-2);
}
.lp-stat-num {
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: var(--space-3);
  letter-spacing: -0.03em;
  font-feature-settings: 'tnum' 1;
}
[data-mode="light"] .lp-stat-num { color: var(--accent-strong); }
[data-mode="dark"] .lp-stat-num { color: var(--accent-color); }
.lp-stat-label {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 280px;
  margin: 0 auto;
}

/* ============================================================ BUILD STATUS — KANBAN
 * Three-column kanban (Shipped / Building / Next), full-width section directly
 * below the hero. Stacks vertically on mobile.
 * ============================================================ */

.lp-status-kanban {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .lp-status-kanban {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

.lp-status-column {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5) var(--space-4);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lp-status-column::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.lp-status-column-shipped::before  { background: var(--accent-color); }
.lp-status-column-building::before { background: linear-gradient(90deg, #d97706, #f59e0b); }
.lp-status-column-next::before     { background: var(--border-color); }

.lp-status-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-color);
}
.lp-status-column-label {
  font-size: var(--fs-tiny);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.lp-status-column-label .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.lp-status-column-shipped  .lp-status-column-label { color: var(--accent-hover); }
.lp-status-column-shipped  .dot { background: var(--accent-color); }
.lp-status-column-building .lp-status-column-label { color: #b45309; }
[data-mode="dark"] .lp-status-column-building .lp-status-column-label { color: #fbbf24; }
.lp-status-column-building .dot {
  background: #d97706;
  animation: lp-status-pulse 2s ease-in-out infinite;
}
[data-mode="dark"] .lp-status-column-building .dot { background: #fbbf24; }
.lp-status-column-next .lp-status-column-label { color: var(--text-muted); }
.lp-status-column-next .dot { background: var(--text-muted); }
.lp-status-count {
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  color: var(--text-muted);
  font-weight: 600;
}

@keyframes lp-status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.5); }
  50% { box-shadow: 0 0 0 5px rgba(217, 119, 6, 0); }
}

.lp-status-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: 0.86rem;
}
.lp-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lp-status-icon i { width: 11px; height: 11px; }
.lp-status-icon-done {
  background: var(--accent-color);
  color: #ffffff;
}
.lp-status-icon-active {
  background: rgba(217, 119, 6, 0.15);
  color: #b45309;
  border: 1px solid rgba(217, 119, 6, 0.35);
}
[data-mode="dark"] .lp-status-icon-active {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.35);
}
.lp-status-icon-pending {
  background: transparent;
  border: 1.5px dashed var(--border-color);
}
.lp-status-label {
  flex: 1;
  color: var(--text-primary);
  font-weight: 500;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.lp-status-row.pending .lp-status-label {
  color: var(--text-muted);
  font-weight: 400;
}
.lp-status-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.lp-status-row.done .lp-status-tag {
  background: var(--accent-alpha);
  color: var(--accent-hover);
}
.lp-status-row.active .lp-status-tag {
  background: rgba(217, 119, 6, 0.1);
  color: #b45309;
}
[data-mode="dark"] .lp-status-row.active .lp-status-tag {
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
}

/* ============================================================ PILLARS */

.lp-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .lp-pillars {
    grid-template-columns: repeat(3, 1fr);
    /* Subgrid: parent declares enough rows; cards inherit them so titles,
       descs, and links baseline across cards in the same row. */
    grid-template-rows: repeat(7, auto);
  }
  .lp-pillars-2 { grid-template-columns: repeat(2, 1fr); }
  .lp-pillars > .lp-pillar {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 7;
    grid-auto-flow: row;
  }
}

.lp-pillar {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-decoration: none;
  color: var(--text-primary);
  transition: all var(--t-base);
}
.lp-pillar:hover {
  border-color: var(--accent-color);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  color: var(--text-primary);
}
.lp-pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--accent-alpha);
  color: var(--accent-color);
  margin-bottom: var(--space-5);
}
.lp-pillar-icon i { width: 24px; height: 24px; }

.lp-pillar-kicker {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-2) 0;
  text-align: left;
  hyphens: manual;
}
.lp-pillar-title {
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 var(--space-2) 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-align: left;
}
.lp-pillar-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-5) 0;
  text-align: left;
  hyphens: manual;
  text-wrap: pretty;
}
.lp-pillar-list {
  list-style: none;
  margin: 0 0 var(--space-6) 0;
  padding: 0;
  flex: 1;
}
.lp-pillar-list li {
  font-size: 0.88rem;
  color: var(--text-secondary);
  padding: var(--space-1) 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.lp-pillar-list li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-color);
  flex-shrink: 0;
}
.lp-pillar-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--accent-color);
  margin-top: auto;
}
.lp-pillar-link i {
  width: 14px; height: 14px;
  transition: transform var(--t-fast);
}
.lp-pillar:hover .lp-pillar-link i { transform: translateX(4px); }

/* ============================================================ TOOL BANDS */

.lp-tool {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}
@media (min-width: 992px) {
  .lp-tool {
    grid-template-columns: 5fr 6fr;
    gap: var(--space-12);
  }
  .lp-tool-reverse { grid-template-columns: 6fr 5fr; }
  .lp-tool-reverse .lp-tool-content { order: 2; }
  .lp-tool-reverse .lp-tool-demo { order: 1; }
}

.lp-tool-content h3 {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 600;
  margin: 0 0 var(--space-4) 0;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.lp-tool-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-meta);
  font-weight: 600;
  margin-bottom: var(--space-4);
  background: var(--accent-alpha);
  color: var(--accent-hover);
  border: 1px solid var(--accent-alpha-strong);
}
.lp-tool-tag i { width: 13px; height: 13px; }
.lp-tool-tag-coming {
  background: rgba(217, 119, 6, 0.1);
  color: #b45309;
  border-color: rgba(217, 119, 6, 0.2);
}
[data-mode="dark"] .lp-tool-tag-coming { color: #fbbf24; background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.2); }
.lp-tool-desc {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0 0 var(--space-5) 0;
  text-align: justify;
  hyphens: auto;
  text-wrap: pretty;
}
.lp-tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ----- Compact install cards (autolabel band) ----- */
.lp-install {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-6) 0;
  max-width: 360px;
}
.lp-install-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) 6px var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: var(--text-primary);
  transition: background var(--t-fast);
}
.lp-install-card:hover {
  background: rgba(0, 0, 0, 0.075);
  text-decoration: none;
  color: var(--text-primary);
}
[data-mode="dark"] .lp-install-card {
  background: rgba(255, 255, 255, 0.06);
}
[data-mode="dark"] .lp-install-card:hover {
  background: rgba(255, 255, 255, 0.10);
}
.lp-install-card-disabled,
.lp-install-card-disabled:hover {
  opacity: 0.45;
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.04);
  transform: none;
  box-shadow: none;
}
[data-mode="dark"] .lp-install-card-disabled,
[data-mode="dark"] .lp-install-card-disabled:hover {
  background: rgba(255, 255, 255, 0.06);
}
.lp-install-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}
.lp-install-card[data-platform="stata"] .lp-install-logo {
  transform: scale(1.8);
  transform-origin: center;
}
.lp-install-name {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}
.lp-install-version {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-secondary);
  line-height: 1;
}

/* ----- Footer pill links (Read docs / All releases) ----- */
.lp-install-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3) 0;
}
.lp-install-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--radius-md);
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  background: rgba(0, 0, 0, 0.04);
  transition: background var(--t-fast);
}
.lp-install-link:hover {
  background: rgba(0, 0, 0, 0.075);
  color: var(--text-primary);
  text-decoration: none;
}
[data-mode="dark"] .lp-install-link {
  background: rgba(255, 255, 255, 0.06);
}
[data-mode="dark"] .lp-install-link:hover {
  background: rgba(255, 255, 255, 0.10);
}
.lp-install-link i { width: 14px; height: 14px; }

/* ============================================================ TERMINAL (autolabel demo) */

.lp-terminal {
  background: #0a0a0d;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.lp-terminal-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: #16161b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.lp-terminal-dots {
  display: flex;
  gap: 6px;
}
.lp-terminal-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
}
.lp-terminal-dot.red    { background: #ff5f56; }
.lp-terminal-dot.yellow { background: #ffbd2e; }
.lp-terminal-dot.green  { background: #27c93f; }

.lp-terminal-tabs {
  display: flex;
  gap: 4px;
  margin-left: var(--space-3);
}
.lp-terminal-tab {
  padding: 4px var(--space-3);
  border-radius: var(--radius-xs);
  font-size: var(--fs-meta);
  font-weight: 500;
  color: #71717a;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  transition: all var(--t-fast);
}
.lp-terminal-tab.active {
  color: #fafafa;
  background: rgba(255, 255, 255, 0.08);
}
.lp-terminal-tab:hover:not(.active) { color: #d4d4d8; }

.lp-terminal-body {
  padding: var(--space-6);
  height: 220px;
  box-sizing: border-box;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.75;
  color: #fafafa;
}
.lp-terminal-pane { display: none; }
.lp-terminal-pane.active { display: block; }
.lp-terminal-pane pre {
  margin: 0;
  font-family: var(--font-mono);
  white-space: pre-wrap;
  word-break: break-word;
  color: #fafafa;
}
.lp-terminal-cursor::after {
  content: '▊';
  display: inline-block;
  margin-left: 2px;
  color: #14b8a6;
  animation: lp-blink 1s step-end infinite;
}
@keyframes lp-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ============================================================ COMING-SOON CARD (datamirror) */

.lp-coming-card {
  background: var(--card-bg);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.lp-coming-version {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  letter-spacing: 0.04em;
}
.lp-coming-quote {
  font-family: var(--font-sans);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 var(--space-5) 0;
  line-height: 1.25;
}
.lp-coming-sub {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin: 0;
  max-width: 360px;
  margin: 0 auto;
}

/* ============================================================ MIRROR DEMO (datamirror)
 * CSS-only, 9s loop. Two-panel "data-in / data-out" metaphor:
 *   Phase A  0-4%    Container fade in.
 *   Phase B  4-10%   Left rows cascade in top-down (stagger via animation-delay).
 *   Phase C  10-20%  Brief hold. Viewer reads the "secure environment" grid.
 *   Phase D  20-30%  Rows fall downward + compress; ghost layer reveals at 0.22 op.
 *   Phase E  30-42%  Packet materialises at bottom-left with β value.
 *   Phase F  42-56%  Packet slides straight across to the right.
 *   Phase G  56-72%  Right rows emerge upward (stagger bottom-up).
 *   Phase H  72-94%  Both grids + packet held; tick fades in on the packet.
 *   Phase I  94-100% Fade and loop.
 * Grid geometry: 8 rows × 4 cells. Row height 16px, gap 2px → frame height 142px.
 * --mirror-drop: per-row fall distance so every row lands at frame bottom.
 * Packet motion is pure horizontal translation — no lift, no resize.
 * Respects prefers-reduced-motion: pauses, shows final "both grids + ✓" state.
 * ============================================================ */

.lp-mirror-demo {
  --mirror-loop: 9s;
  --mirror-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --mirror-row-h: 14px;
  --mirror-row-gap: 2px;
  --mirror-row-span: 16px;  /* row-h + gap */
  --mirror-rows: 8;
  --mirror-frame-h: 126px;  /* 8*14 + 7*2 */
  --mirror-packet-w: 172px;
  --mirror-packet-h: 48px;
  --mirror-pad: 12px;
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  font-family: var(--font-sans);
  animation: lp-mirror-frame var(--mirror-loop) var(--mirror-ease) infinite;
}
@keyframes lp-mirror-frame {
  0%   { opacity: 0; transform: translateY(10px); }
  4%   { opacity: 1; transform: translateY(0); }
  96%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}

/* ----- Caption (parallel to .lp-demo-caption) ----- */
.lp-mirror-caption {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--space-4) 0;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-secondary);
}
.lp-mirror-caption-lead {
  display: inline-block;
  animation: lp-mirror-cap-lead var(--mirror-loop) var(--mirror-ease) infinite;
}
@keyframes lp-mirror-cap-lead {
  0%, 3%   { opacity: 0; transform: translateY(4px); }
  8%, 94%  { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; }
}
.lp-mirror-caption-this {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-hover);
  font-weight: 700;
  opacity: 0;
  animation: lp-mirror-cap-this var(--mirror-loop) var(--mirror-ease) infinite;
}
.lp-mirror-caption-this i { width: 14px; height: 14px; stroke-width: 2.5; }
@keyframes lp-mirror-cap-this {
  0%, 74%  { opacity: 0; transform: translateY(5px) scale(0.9); }
  82%, 94% { opacity: 1; transform: translateY(0)   scale(1); }
  100%     { opacity: 0; }
}

/* ----- Stage: two panels + divider + floating packet ----- */
.lp-mirror-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 24px 1fr;
  gap: 0;
  align-items: start;
  padding-bottom: calc(var(--mirror-packet-h) + 16px);
}

.lp-mirror-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.lp-mirror-panel-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lp-mirror-panel-label i { width: 12px; height: 12px; stroke-width: 2; }
.lp-mirror-panel-src .lp-mirror-panel-label i { color: var(--text-muted); }
.lp-mirror-panel-dst .lp-mirror-panel-label i { color: var(--accent-hover); }
.lp-mirror-panel-dst .lp-mirror-panel-label {
  opacity: 0;
  animation: lp-mirror-dst-label var(--mirror-loop) var(--mirror-ease) infinite;
}
@keyframes lp-mirror-dst-label {
  0%, 50%  { opacity: 0; }
  58%, 94% { opacity: 1; }
  100%     { opacity: 0; }
}

/* ----- Frame (grid container) ----- */
.lp-mirror-frame {
  position: relative;
  height: var(--mirror-frame-h);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xs);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.lp-mirror-ghost,
.lp-mirror-active {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mirror-row-gap);
}
.lp-mirror-ghost {
  opacity: 0;
  animation: lp-mirror-ghost-reveal var(--mirror-loop) var(--mirror-ease) infinite;
}
@keyframes lp-mirror-ghost-reveal {
  0%, 20%  { opacity: 0; }
  30%      { opacity: 0.22; }
  92%      { opacity: 0.22; }
  96%, 100% { opacity: 0; }
}

.lp-mirror-row {
  flex: 1;
  display: flex;
  gap: 0;
  min-height: var(--mirror-row-h);
  transform-origin: center bottom;
}
.lp-mirror-cell {
  flex: 1;
  /* Soft pastel — lower saturation so colours read as gentle shades,
     not the electric primary tones of the earlier palette. */
  background: hsl(var(--h) 38% var(--l));
}
[data-mode="dark"] .lp-mirror-cell {
  background: hsl(var(--h) 34% calc(var(--l) - 22%));
}

/* Per-row fall distance so all rows converge at frame bottom */
.lp-mirror-row-src,
.lp-mirror-row-dst {
  --mirror-drop: calc((var(--mirror-rows) - 1 - var(--i)) * var(--mirror-row-span));
}

/* ----- Left (src) rows: cascade in, then fall + compress ----- */
.lp-mirror-row-src {
  opacity: 0;
  animation: lp-mirror-row-src var(--mirror-loop) var(--mirror-ease) infinite;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes lp-mirror-row-src {
  0%       { opacity: 0; transform: translateY(-6px) scaleY(0.75); }
  6%       { opacity: 1; transform: translateY(0)    scaleY(1); }
  20%      { opacity: 1; transform: translateY(0)    scaleY(1); }
  28%      { opacity: 0; transform: translateY(var(--mirror-drop)) scaleY(0.12); }
  100%     { opacity: 0; transform: translateY(var(--mirror-drop)) scaleY(0.12); }
}

/* ----- Right (dst) rows: emerge upward from packet landing zone ----- */
.lp-mirror-row-dst {
  opacity: 0;
  animation: lp-mirror-row-dst var(--mirror-loop) var(--mirror-ease) infinite;
  /* bottom row (i=7) emerges first, upper rows stagger after */
  animation-delay: calc((var(--mirror-rows) - 1 - var(--i)) * 35ms);
}
@keyframes lp-mirror-row-dst {
  0%, 52%  { opacity: 0; transform: translateY(var(--mirror-drop)) scaleY(0.12); }
  62%      { opacity: 1; transform: translateY(0) scaleY(1); }
  94%      { opacity: 1; transform: translateY(0) scaleY(1); }
  100%     { opacity: 0; transform: translateY(0) scaleY(1); }
}

/* ----- Divider (prominent accent-coloured separator) ----- */
.lp-mirror-divider {
  position: relative;
  align-self: stretch;
  height: calc(var(--mirror-frame-h) + 20px);
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.lp-mirror-divider-line {
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--accent-alpha) 20%,
    var(--accent-alpha-strong) 50%,
    var(--accent-alpha) 80%,
    transparent 100%);
  box-shadow: 0 0 4px var(--accent-alpha);
  opacity: 0.8;
  border-radius: 2px;
}
[data-mode="dark"] .lp-mirror-divider-line { opacity: 0.9; }

/* ----- Packet (the invariant that travels) ----- */
.lp-mirror-packet {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--mirror-packet-w);
  height: var(--mirror-packet-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  background: var(--card-bg);
  border: 1px solid var(--accent-alpha-strong);
  border-radius: 12px;
  font-family: var(--font-mono);
  color: var(--text-primary);
  white-space: nowrap;
  z-index: 3;
  opacity: 0;
  box-shadow:
    0 6px 18px var(--accent-alpha),
    0 2px 5px rgba(15, 23, 42, 0.06);
  animation: lp-mirror-packet var(--mirror-loop) var(--mirror-ease) infinite;
}
[data-mode="dark"] .lp-mirror-packet {
  box-shadow:
    0 5px 18px var(--accent-alpha-strong),
    0 2px 5px rgba(0, 0, 0, 0.35);
}
@keyframes lp-mirror-packet {
  /* Idle while the source is shown + collapsing. */
  0%, 24%   { opacity: 0; left: 0;    transform: translateX(0); }
  /* Materialise at the left. */
  32%       { opacity: 1; left: 0;    transform: translateX(0); }
  /* Brief hold before traversal. */
  42%       {             left: 0;    transform: translateX(0); }
  /* Traverse to the right. */
  56%       {             left: 100%; transform: translateX(-100%); }
  /* Hold at the right through the rest of the cycle. */
  94%       { opacity: 1; left: 100%; transform: translateX(-100%); }
  100%      { opacity: 0; left: 100%; transform: translateX(-100%); }
}

.lp-mirror-packet-icon {
  width: 14px; height: 14px;
  color: var(--accent-hover);
  flex-shrink: 0;
}
.lp-mirror-packet-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
  flex: 1;
}
.lp-mirror-packet-main {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--accent-hover);
  letter-spacing: 0.02em;
}
.lp-mirror-packet-main em {
  font-style: italic;
  font-weight: 700;
  padding: 0 1px;
}
.lp-mirror-packet-sub {
  margin-top: 3px;
  font-size: 0.54rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
}

/* Inline tick — fades in at end of main line, not a floating badge */
.lp-mirror-packet-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px; height: 11px;
  margin-left: 3px;
  color: var(--accent-color);
  opacity: 0;
  transform: scale(0.6);
  animation: lp-mirror-packet-tick var(--mirror-loop) var(--mirror-ease) infinite;
}
.lp-mirror-packet-tick i { width: 11px; height: 11px; stroke-width: 3.5; }
@keyframes lp-mirror-packet-tick {
  0%, 72%   { opacity: 0; transform: scale(0.6); }
  78%       { opacity: 1; transform: scale(1.15); }
  82%, 94%  { opacity: 1; transform: scale(1); }
  100%      { opacity: 0; transform: scale(1); }
}

/* ----- Footer: version tag below the stage ----- */
.lp-mirror-version {
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.04em;
}

/* ----- Reduced motion: pause, show "both grids + ✓" final state ----- */
@media (prefers-reduced-motion: reduce) {
  .lp-mirror-demo,
  .lp-mirror-demo *,
  .lp-mirror-demo *::before,
  .lp-mirror-demo *::after {
    animation: none !important;
  }
  .lp-mirror-demo { opacity: 1; }
  .lp-mirror-row-src { opacity: 0.22; }
  .lp-mirror-row-dst { opacity: 1; transform: none; }
  .lp-mirror-ghost   { opacity: 0.22; }
  .lp-mirror-panel-dst .lp-mirror-panel-label { opacity: 1; }
  .lp-mirror-caption-this { opacity: 1; }
  .lp-mirror-packet {
    opacity: 1;
    left: 50%;
    transform: translateX(-50%) scale(0.88);
  }
  .lp-mirror-packet-tick { opacity: 1; transform: scale(1); }
}

/* ============================================================ LAYERS DEMO (datamirror · four layers of fidelity)
 * CSS-only, 20s loop · 5s per layer. A compact data table where each of the
 * four layers datamirror preserves is shown in turn with a distinct visual:
 *   Layer 1 — Marginals        :  per-column highlight sweep (col 1 → 5)
 *   Layer 2 — Correlations     :  SVG arcs linking column pairs, labelled with r
 *   Layer 3 — Stratification   :  row groups lit into waves (left-edge labels)
 *   Layer 4 — Checkpoint β     :  column role tags (x₁..x₄, y) + β coefficients chip
 * The step indicator and the caption both animate to reflect the active phase.
 * ============================================================ */

.lp-layers-demo {
  --layers-loop: 20s;
  --layers-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --layers-cols: 5;
  --layers-rows: 6;
  --layers-row-h: 26px;
  --layers-head-h: 26px;
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  font-family: var(--font-sans);
  animation: lp-layers-frame var(--layers-loop) var(--layers-ease) infinite;
}
@keyframes lp-layers-frame {
  0%, 98% { opacity: 1; }
  100%    { opacity: 1; }
}

/* ----- Progress indicator (top) ----- */
.lp-layers-progress {
  list-style: none;
  margin: 0 0 var(--space-3) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.lp-layers-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  min-width: 0;
  transition: color 0.35s;
}
.lp-layers-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg-tertiary, var(--border-color));
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.7rem;
  flex-shrink: 0;
  transition: all 0.35s;
}
.lp-layers-step-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Step-active keyframes — one per step, cycling quarters of the loop */
.lp-layers-step-1 { animation: layers-step-1 var(--layers-loop) linear infinite; }
.lp-layers-step-2 { animation: layers-step-2 var(--layers-loop) linear infinite; }
.lp-layers-step-3 { animation: layers-step-3 var(--layers-loop) linear infinite; }
.lp-layers-step-4 { animation: layers-step-4 var(--layers-loop) linear infinite; }

@keyframes layers-step-1 {
  0%, 23%  { background: var(--accent-alpha); border-color: var(--accent-alpha-strong); color: var(--accent-hover); }
  25%, 100% { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-muted); }
}
@keyframes layers-step-2 {
  0%, 23%    { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-muted); }
  25%, 48%   { background: var(--accent-alpha); border-color: var(--accent-alpha-strong); color: var(--accent-hover); }
  50%, 100%  { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-muted); }
}
@keyframes layers-step-3 {
  0%, 48%    { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-muted); }
  50%, 73%   { background: var(--accent-alpha); border-color: var(--accent-alpha-strong); color: var(--accent-hover); }
  75%, 100%  { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-muted); }
}
@keyframes layers-step-4 {
  0%, 73%    { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-muted); }
  75%, 100%  { background: var(--accent-alpha); border-color: var(--accent-alpha-strong); color: var(--accent-hover); }
}
.lp-layers-step-1 .lp-layers-step-num { animation: layers-step-num-1 var(--layers-loop) linear infinite; }
.lp-layers-step-2 .lp-layers-step-num { animation: layers-step-num-2 var(--layers-loop) linear infinite; }
.lp-layers-step-3 .lp-layers-step-num { animation: layers-step-num-3 var(--layers-loop) linear infinite; }
.lp-layers-step-4 .lp-layers-step-num { animation: layers-step-num-4 var(--layers-loop) linear infinite; }
@keyframes layers-step-num-1 {
  0%, 23%   { background: var(--accent-color); color: #fff; }
  25%, 100% { background: var(--bg-tertiary, var(--border-color)); color: var(--text-secondary); }
}
@keyframes layers-step-num-2 {
  0%, 23%    { background: var(--bg-tertiary, var(--border-color)); color: var(--text-secondary); }
  25%, 48%   { background: var(--accent-color); color: #fff; }
  50%, 100%  { background: var(--bg-tertiary, var(--border-color)); color: var(--text-secondary); }
}
@keyframes layers-step-num-3 {
  0%, 48%    { background: var(--bg-tertiary, var(--border-color)); color: var(--text-secondary); }
  50%, 73%   { background: var(--accent-color); color: #fff; }
  75%, 100%  { background: var(--bg-tertiary, var(--border-color)); color: var(--text-secondary); }
}
@keyframes layers-step-num-4 {
  0%, 73%    { background: var(--bg-tertiary, var(--border-color)); color: var(--text-secondary); }
  75%, 100%  { background: var(--accent-color); color: #fff; }
}

/* ----- Rotating caption (phase-specific) ----- */
.lp-layers-caption {
  position: relative;
  height: 1.4em;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: var(--space-4);
}
.lp-layers-cap {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation-duration: var(--layers-loop);
  animation-timing-function: var(--layers-ease);
  animation-iteration-count: infinite;
}
.lp-layers-cap em { font-style: italic; color: var(--accent-hover); font-weight: 600; }
.lp-layers-cap-1 { animation-name: layers-cap-1; }
.lp-layers-cap-2 { animation-name: layers-cap-2; }
.lp-layers-cap-3 { animation-name: layers-cap-3; }
.lp-layers-cap-4 { animation-name: layers-cap-4; }
@keyframes layers-cap-1 {
  0%, 2%    { opacity: 0; transform: translateY(4px); }
  5%, 22%   { opacity: 1; transform: translateY(0); }
  24%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes layers-cap-2 {
  0%, 25%   { opacity: 0; transform: translateY(4px); }
  28%, 47%  { opacity: 1; transform: translateY(0); }
  49%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes layers-cap-3 {
  0%, 50%   { opacity: 0; transform: translateY(4px); }
  53%, 72%  { opacity: 1; transform: translateY(0); }
  74%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes layers-cap-4 {
  0%, 75%   { opacity: 0; transform: translateY(4px); }
  78%, 96%  { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; transform: translateY(-4px); }
}

/* ----- Card + table ----- */
.lp-layers-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 40px 0 0 0;  /* room for arc overlay above table */
  overflow: hidden;
}

.lp-layers-arc {
  position: absolute;
  top: 4px;
  left: 0; right: 0;
  width: 100%;
  height: 40px;
  color: var(--accent-hover);
  pointer-events: none;
  z-index: 3;
}
.lp-layers-arc-path,
.lp-layers-arc-label {
  opacity: 0;
  animation-duration: var(--layers-loop);
  animation-timing-function: var(--layers-ease);
  animation-iteration-count: infinite;
}
.lp-layers-arc-label {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--accent-hover);
  font-weight: 600;
}
/* arc A: visible 26–36% (phase 2 first half) */
.lp-layers-arc-a { animation-name: layers-arc-a; }
@keyframes layers-arc-a {
  0%, 26%   { opacity: 0; }
  30%, 36%  { opacity: 1; }
  40%, 100% { opacity: 0; }
}
/* arc B: visible 38–48% (phase 2 second half) */
.lp-layers-arc-b { animation-name: layers-arc-b; }
@keyframes layers-arc-b {
  0%, 38%   { opacity: 0; }
  42%, 48%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.lp-layers-table {
  position: relative;
  z-index: 1;
}
.lp-layers-header,
.lp-layers-row {
  display: grid;
  grid-template-columns: repeat(var(--layers-cols), 1fr);
}
.lp-layers-header {
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  position: relative;
  z-index: 4;  /* above everything in body so role tags sit cleanly */
}
.lp-layers-header .lp-layers-col {
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  height: var(--layers-head-h);
  display: flex;
  align-items: center;
  position: relative;
}
.lp-layers-row {
  border-bottom: 1px solid var(--border-color);
  position: relative;
}
.lp-layers-row:last-child { border-bottom: none; }
.lp-layers-cell {
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-primary);
  height: var(--layers-row-h);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 3;  /* text on top of strata + sweep highlights */
}

/* ----- Phase 1: Marginals — column sweep highlights ----- */
.lp-layers-col-sweep {
  position: absolute;
  top: 0; bottom: 0;
  width: calc(100% / var(--layers-cols));
  left: calc(var(--c) * (100% / var(--layers-cols)));
  background: linear-gradient(180deg, var(--accent-alpha) 0%, transparent 100%);
  border-left: 1px solid var(--accent-alpha-strong);
  border-right: 1px solid var(--accent-alpha-strong);
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  animation: lp-layers-col-sweep var(--layers-loop) var(--layers-ease) infinite;
}
/* Stagger: each column lights for ~4% of cycle, sequential across 0-24% */
.lp-layers-col-sweep-1 { animation-delay: 0s; }
.lp-layers-col-sweep-2 { animation-delay: calc(var(--layers-loop) * 0.042); }
.lp-layers-col-sweep-3 { animation-delay: calc(var(--layers-loop) * 0.084); }
.lp-layers-col-sweep-4 { animation-delay: calc(var(--layers-loop) * 0.126); }
.lp-layers-col-sweep-5 { animation-delay: calc(var(--layers-loop) * 0.168); }
@keyframes lp-layers-col-sweep {
  0%      { opacity: 0; }
  2%, 4%  { opacity: 1; }
  6%      { opacity: 0; }
  100%    { opacity: 0; }
}

/* ----- Phase 3: Stratification — wave overlays ----- */
.lp-layers-strata {
  position: absolute;
  top: var(--layers-head-h);
  left: 0; right: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 2;  /* above col-sweep (z:1), below cell text (z:3) */
  animation: lp-layers-strata var(--layers-loop) var(--layers-ease) infinite;
}
@keyframes lp-layers-strata {
  0%, 50%   { opacity: 0; }
  54%, 72%  { opacity: 1; }
  76%, 100% { opacity: 0; }
}
.lp-layers-stratum {
  position: absolute;
  left: 0; right: 0;
  height: calc(3 * var(--layers-row-h));
  border-left: 3px solid var(--accent-color);
  /* Wider spread: hold at alpha-strong for a good chunk, then fade out by 85% #*/
  background: linear-gradient(90deg,
    var(--accent-alpha-strong) 0%,
    var(--accent-alpha) 55%,
    transparent 95%);
}
.lp-layers-stratum-a { top: 0; }
.lp-layers-stratum-b {
  top: calc(3 * var(--layers-row-h));
  border-left-color: #a855f7;
  background: linear-gradient(90deg,
    rgba(168, 85, 247, 0.22) 0%,
    rgba(168, 85, 247, 0.12) 55%,
    transparent 95%);
}
[data-mode="dark"] .lp-layers-stratum-b {
  background: linear-gradient(90deg,
    rgba(168, 85, 247, 0.32) 0%,
    rgba(168, 85, 247, 0.18) 55%,
    transparent 95%);
}

/* Wave labels — sibling overlay, z above cell text. Lives OUTSIDE
   `.lp-layers-strata` so its own stacking context doesn't trap them below
   the cell layer. Fades in/out on the same cue as the strata backgrounds. */
.lp-layers-labels {
  position: absolute;
  top: var(--layers-head-h);
  left: 0; right: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 5;  /* > cells (z:3) and strata (z:2) */
  animation: lp-layers-strata var(--layers-loop) var(--layers-ease) infinite;
}
.lp-layers-label {
  position: absolute;
  left: 8px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  padding: 2px 6px;
  background: var(--card-bg);
  border: 1px solid var(--accent-alpha-strong);
  border-radius: var(--radius-xs);
  color: var(--accent-hover);
  white-space: nowrap;
}
.lp-layers-label-a { top: 4px; }
.lp-layers-label-b {
  top: calc(3 * var(--layers-row-h) + 4px);
  border-color: rgba(168, 85, 247, 0.32);
  color: #7c3aed;
}
[data-mode="dark"] .lp-layers-label-b { color: #c4b5fd; border-color: rgba(168, 85, 247, 0.4); }

/* ----- Phase 4: Checkpoint β
 * Lives in the top whitespace above the column headers (no pill), sharing
 * the same real estate as the correlation arcs (phase 2). The β element is
 * a direct child of .lp-layers-card — moved out of .lp-layers-table so its
 * absolute `top` positions against the card, not the table, and so it sits
 * in the card's 40px top padding rather than over the header row. */
.lp-layers-beta {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%) translateY(-4px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  z-index: 3;
  opacity: 0;
  animation: lp-layers-beta var(--layers-loop) var(--layers-ease) infinite;
}
@keyframes lp-layers-beta {
  0%, 78%   { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  83%, 96%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  98%, 100% { opacity: 0; }
}
.lp-layers-beta-label {
  font-family: 'Times New Roman', Georgia, serif;
}
.lp-layers-beta-label em {
  font-style: italic;
  font-weight: 700;
  color: var(--accent-hover);
  font-size: 1rem;
}
.lp-layers-beta-vals {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.lp-layers-beta-vals strong {
  color: var(--accent-hover);
  font-weight: 700;
}
/* Inline teal tick at the end — no circle badge, just a coloured glyph. */
.lp-layers-beta-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
}
.lp-layers-beta-check i { width: 13px; height: 13px; stroke-width: 3; }

/* ----- Version line at bottom ----- */
.lp-layers-version {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.04em;
}

/* ----- Reduced motion: show final "checkpoint + β" state ----- */
@media (prefers-reduced-motion: reduce) {
  .lp-layers-demo,
  .lp-layers-demo *,
  .lp-layers-demo *::before,
  .lp-layers-demo *::after {
    animation: none !important;
  }
  .lp-layers-cap-4 { opacity: 1; }
  .lp-layers-step-4 {
    background: var(--accent-alpha);
    border-color: var(--accent-alpha-strong);
    color: var(--accent-hover);
  }
  .lp-layers-step-4 .lp-layers-step-num { background: var(--accent-color); color: #fff; }
  .lp-layers-beta { opacity: 1; transform: translateX(-50%); }
}

/* ============================================================ CATALOG BAND */

.lp-catalog-search {
  max-width: 640px;
  margin: 0 auto var(--space-10) auto;
  position: relative;
}
.lp-catalog-search-input {
  width: 100%;
  padding: 16px var(--space-5) 16px 50px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 1rem;
  box-shadow: var(--shadow-md);
  transition: all var(--t-fast);
}
.lp-catalog-search-input::placeholder { color: var(--text-muted); }
.lp-catalog-search-input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: var(--shadow-lg), 0 0 0 4px var(--accent-alpha);
}
.lp-catalog-search-input:disabled { cursor: not-allowed; opacity: 0.7; }
.lp-catalog-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  display: flex;
}
.lp-catalog-search-icon i { width: 18px; height: 18px; }

.lp-catalog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .lp-catalog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .lp-catalog-grid { grid-template-columns: repeat(3, 1fr); }
}

.lp-catalog-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  color: var(--text-primary);
  transition: all var(--t-base);
  display: flex;
  flex-direction: column;
}
.lp-catalog-card:hover {
  border-color: var(--accent-color);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: var(--text-primary);
}
.lp-catalog-card-soon {
  opacity: 0.55;
  pointer-events: none;
}
.lp-catalog-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.lp-catalog-card-header .lp-flag-card { margin-right: 2px; }
.lp-catalog-card-version { margin-left: auto; }
.lp-catalog-card-name {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.lp-catalog-card-version {
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.lp-catalog-card-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--accent-alpha);
  color: var(--accent-hover);
}
.lp-catalog-card-live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-color);
}
.lp-catalog-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}
.lp-catalog-card-meta {
  font-size: var(--fs-meta);
  color: var(--text-secondary);
  margin-top: auto;
  line-height: 1.5;
}
.lp-catalog-card-meta strong { color: var(--text-primary); font-weight: 600; }

.lp-catalog-card-cta {
  border-style: dashed;
  background: transparent;
}
.lp-catalog-card-cta .lp-catalog-card-name {
  color: var(--text-secondary);
}
.lp-catalog-card-cta .lp-catalog-card-title {
  color: var(--text-secondary);
}
.lp-catalog-card-cta:hover {
  border-style: solid;
  background: var(--card-bg);
}
.lp-catalog-card-cta:hover .lp-catalog-card-name,
.lp-catalog-card-cta:hover .lp-catalog-card-title {
  color: var(--text-primary);
}

.lp-catalog-cta {
  text-align: center;
  margin-top: var(--space-10);
}

.lp-catalog-attribution {
  max-width: 760px;
  margin: var(--space-8) auto 0;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ============================================================ STANDARD BAND */

.lp-standard-list {
  max-width: 800px;
  margin: 0 auto;
}
.lp-standard-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border-color);
}
.lp-standard-row:last-child { border-bottom: 1px solid var(--border-color); }
@media (min-width: 768px) {
  .lp-standard-row {
    grid-template-columns: 220px 1fr 160px;
    gap: var(--space-6);
    align-items: center;
  }
}
.lp-standard-name {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}
.lp-standard-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  text-align: justify;
  hyphens: auto;
  text-wrap: pretty;
}
.lp-standard-action {
  text-align: left;
}
@media (min-width: 768px) {
  .lp-standard-action { text-align: right; }
}
.lp-standard-action a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-color);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.lp-standard-action-coming {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================ ROADMAP STRIP */

.lp-roadmap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  margin-top: var(--space-12);
}
.lp-roadmap-label {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-basis: 100%;
  text-align: center;
  margin-bottom: var(--space-2);
}
@media (min-width: 992px) {
  .lp-roadmap-label { flex-basis: auto; margin-bottom: 0; margin-right: var(--space-3); }
}
.lp-roadmap-step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.lp-roadmap-step.done {
  background: var(--accent-alpha);
  color: var(--accent-hover);
  border-color: var(--accent-alpha-strong);
}
.lp-roadmap-arrow {
  color: var(--text-muted);
  display: flex;
  align-items: center;
}
.lp-roadmap-arrow i { width: 14px; height: 14px; }

/* ============================================================ ADOPTERS */

.lp-adopters-label {
  text-align: center;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-6);
}
.lp-adopters-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
.lp-adopter {
  padding: var(--space-4) var(--space-6);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
}
.lp-adopter i { color: var(--accent-color); width: 18px; height: 18px; }

/* ============================================================ FOR AGENCIES CTA */

.lp-agencies {
  background: var(--accent-gradient);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: #ffffff;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 768px) {
  .lp-agencies { padding: var(--space-16) var(--space-12); }
}
.lp-agencies h3 {
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 var(--space-4) 0;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.lp-agencies p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.92);
  max-width: 640px;
  margin: 0 auto var(--space-6) auto;
  line-height: 1.65;
}
.lp-agencies .lp-btn {
  background: #ffffff;
  color: var(--accent-hover);
  border-color: transparent;
  font-weight: 700;
}
.lp-agencies .lp-btn:hover {
  background: #ffffff;
  color: var(--accent-strong);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

/* ============================================================ TEAM + CITE */

.lp-team {
  text-align: center;
}

/* Team member cards — horizontal rows: rounded-square avatar left, text right */
.lp-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  max-width: 560px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .lp-team-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 820px;
  }
}
.lp-team-member {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
}
.lp-team-links {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
  margin-left: calc(var(--space-2) * -1);
}
.lp-team-links a,
.lp-team-links a:link,
.lp-team-links a:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  text-decoration: none;
  transition: all var(--t-base);
}
.lp-team-links a:hover,
.lp-team-links a:focus-visible {
  color: var(--accent-color);
  background: var(--bg-secondary);
  border-color: var(--card-border);
  transform: translateY(-1px);
}
.lp-team-links svg { width: 16px; height: 16px; display: block; }
.lp-team-avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);     /* rounded square, not circle */
  background-size: cover;
  background-position: center;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.lp-team-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lp-team-name {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 2px 0;
  letter-spacing: -0.015em;
}
.lp-team-role {
  font-size: var(--fs-meta);
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
}
.lp-team-affiliation {
  font-size: var(--fs-meta);
  color: var(--text-secondary);
  font-weight: 500;
  margin: 2px 0 0 0;
}
.lp-team-vision {
  max-width: 680px;
  margin: var(--space-8) auto var(--space-2) auto;
  font-family: var(--font-sans);
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.65;
  padding: var(--space-5) var(--space-6);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent-color);
  text-align: left;
}
.lp-cite-box {
  max-width: 760px;
  margin: var(--space-10) auto 0 auto;
  padding: var(--space-5) var(--space-6);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-align: left;
  line-height: 1.7;
}
.lp-cite-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
  font-weight: 600;
  font-style: normal;
}

/* ============================================================ FOOTER */

.rs-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  padding: var(--space-16) 0 var(--space-8) 0;
  /* No margin-top — sections and docs pages own their own bottom spacing
     via padding-bottom. A margin here would leave a bg-primary gap between
     the sidebar (bg-secondary) and the footer (also bg-secondary). */
}
.rs-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}
@media (min-width: 768px) {
  .rs-footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-10);
  }
}
.rs-footer-logo {
  font-family: var(--font-sans);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
}
.rs-footer-tagline {
  font-size: var(--fs-meta);
  color: var(--text-secondary);
  margin: 0;
  max-width: 320px;
}
.rs-footer-col h6 {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-4) 0;
}
.rs-footer-col a {
  display: block;
  color: var(--text-secondary);
  font-size: 0.9rem;
  padding: var(--space-1) 0;
  text-decoration: none;
}
.rs-footer-col a:hover { color: var(--accent-color); }
.rs-footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-color);
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}
@media (min-width: 768px) {
  .rs-footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ============================================================ ANIMATIONS */

.lp-fade-up {
  opacity: 0;
  transform: translateY(20px);
  animation: lp-fade-up 0.7s ease forwards;
}
.lp-fade-up.d1 { animation-delay: 0.10s; }
.lp-fade-up.d2 { animation-delay: 0.20s; }
.lp-fade-up.d3 { animation-delay: 0.30s; }
.lp-fade-up.d4 { animation-delay: 0.40s; }
.lp-fade-up.d5 { animation-delay: 0.55s; }
.lp-fade-up.d6 { animation-delay: 0.70s; }

@keyframes lp-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-fade-up {
    opacity: 1;
    transform: none;
    animation: none;
  }
  html { scroll-behavior: auto; }
}