/* The landing owns its palette and composition; no Portfolio selectors here. */
#landingPage {
  --lp-bg: #090c10;
  --lp-surface: #11161d;
  --lp-raised: #182029;
  --lp-card: #141b24;
  --lp-text: #edf2f6;
  --lp-muted: #9aa8b8;
  --lp-line: #242d38;
  --lp-accent: #22c55e;
  --lp-accent-subtle: rgba(34, 197, 94, 0.12);
  --lp-on-accent: #041d13;
  --lp-beam: rgba(210, 230, 230, .10);
  --lp-wordmark: #cfddd9;
  color: var(--lp-text);
  background: var(--lp-bg) !important;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  padding-top: 16px;
  isolation: isolate;
  overflow-x: hidden;
}

html.light #landingPage {
  --lp-bg: #f6f8f9;
  --lp-surface: #ffffff;
  --lp-raised: #f0f4f2;
  --lp-card: #ffffff;
  --lp-text: #172421;
  --lp-muted: #4e625e;
  --lp-line: #d8e1de;
  --lp-accent: #09634d;
  --lp-accent-subtle: rgba(9, 99, 77, 0.08);
  --lp-on-accent: #ffffff;
  --lp-beam: rgba(64, 113, 98, .08);
  --lp-wordmark: #24493e;
}

#landingPage .landing-container {
  width: min(1200px, calc(100% - 48px));
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 0 !important;
  min-width: 0;
}

#landingPage :is(h1, h2, h3, h4, strong, b, .text-white, .text-gray-100, .text-gray-200) {
  color: var(--lp-text) !important;
}

#landingPage :is(h1, h2, h3) {
  font-weight: 600 !important;
  letter-spacing: -.03em;
}

#landingPage :is(p, .text-gray-300, .text-gray-400, .text-gray-500, .text-gray-600) {
  color: var(--lp-muted) !important;
}

#landingPage :is(h1, h2, h3, p) {
  margin-top: 0;
}

/* NAVIGATION */
#landingPage .landing-nav {
  position: sticky;
  top: 12px;
  z-index: 40;
  width: min(1240px, calc(100% - 32px));
  margin-inline: auto;
  background: var(--lp-surface) !important;
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  backdrop-filter: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
}

#landingPage .landing-nav > .landing-container {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 18px;
  width: calc(100% - 32px);
}

#landingPage .landing-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: var(--lp-text);
  cursor: pointer;
  padding: 0;
}

#landingPage .landing-brand .block { display: block; }
#landingPage .landing-brand .text-xs { font-size: 11px; color: var(--lp-muted); margin-top: 2px; }

#landingPage .landing-menu {
  display: flex !important;
  align-items: center;
  margin-left: auto;
  gap: 18px;
}

#landingPage :is(.landing-link, .landing-menu a, .landing-menu button) {
  color: var(--lp-muted);
  font-size: 13px;
  font-weight: 500;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0 6px;
}

#landingPage .landing-menu .landing-menu-cta {
  display: none !important;
}

#landingPage .landing-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

#landingPage .landing-icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  flex: 0 0 44px;
  background: var(--lp-surface);
  color: var(--lp-text);
  cursor: pointer;
}

#landingPage #landingMenuToggle { display: none; }

#landingPage .landing-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--lp-surface);
  color: var(--lp-text);
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transform: none;
  box-shadow: none;
}

#landingPage .landing-btn-primary {
  background: var(--lp-accent) !important;
  color: var(--lp-on-accent) !important;
  border-color: transparent !important;
}

#landingPage .landing-btn-primary .landing-cta-label {
  color: inherit !important;
}

#landingPage :is(.landing-btn, .landing-icon-button, .landing-link, .landing-menu a) {
  transition: background-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard);
}

#landingPage :is(button, a, summary):focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: 3px;
}

@media(hover: hover) {
  #landingPage :is(.landing-btn, .landing-icon-button):hover {
    border-color: var(--lp-muted);
  }
  #landingPage :is(.landing-menu a, .landing-link):hover {
    color: var(--lp-text);
  }
  #landingPage .landing-btn-primary:hover {
    background: color-mix(in srgb, var(--lp-accent), var(--lp-on-accent) 12%) !important;
  }
}

/* SIGNAL LINE MOTIF (§104) */
#landingPage .landing-signal-line-wrap {
  width: 100%;
  max-width: 880px;
  margin: 0 auto 20px;
  color: var(--lp-accent);
  opacity: .75;
}

#landingPage .landing-signal-line {
  display: block;
  width: 100%;
  height: 28px;
}

/* HERO SECTION */
#landingPage .landing-hero {
  position: relative;
  overflow: hidden;
  min-height: 0;
  background: var(--lp-bg) !important;
  padding: 32px 0 48px;
}

#landingPage .landing-hero::before,
#landingPage .landing-hero::after,
html.light #landingPage .landing-hero::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

#landingPage .landing-hero-content {
  max-width: 820px;
  margin: 0 auto 36px;
  text-align: center;
}

#landingPage .landing-eyebrow {
  font-size: 11px !important;
  letter-spacing: .14em;
  line-height: 1.5;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--lp-accent) !important;
  text-transform: uppercase;
}

#landingPage .landing-signal-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 6px 1px 0;
  border-radius: 50%;
  background: var(--lp-accent);
}

#landingPage .landing-hero h1 {
  font-size: clamp(34px, 4.5vw, 54px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
  color: var(--lp-text) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  margin: 0 auto 20px !important;
  max-width: 780px !important;
  text-align: center !important;
}

#landingPage .landing-hero h1 span {
  color: var(--lp-accent) !important;
}

#landingPage .landing-hero-lead {
  font-size: clamp(15px, 1.3vw, 17px) !important;
  line-height: 1.75 !important;
  max-width: 660px;
  margin: 0 auto 28px;
  color: var(--lp-muted) !important;
}

#landingPage .landing-mobile-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

#landingPage .landing-proof-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 26px;
  font-size: 11.5px;
  color: var(--lp-muted);
}

#landingPage .landing-proof-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#landingPage .landing-proof-row b {
  color: var(--lp-accent) !important;
  font-size: 11px;
}

#landingPage .landing-hero-note {
  font-size: 12px !important;
  line-height: 1.6;
  margin: 18px auto 0;
  max-width: 580px;
  color: var(--lp-muted) !important;
}

/* REAL WORKSTATION PREVIEW */
#landingPage .landing-workstation-preview {
  background: var(--lp-surface);
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .07);
}

#landingPage .landing-preview-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: var(--lp-raised);
  border-bottom: 1px solid var(--lp-line);
  flex-wrap: wrap;
}

#landingPage .landing-preview-controls {
  display: flex;
  gap: 6px;
}

#landingPage .preview-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lp-line);
  opacity: .8;
}

#landingPage .preview-sample-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(9, 99, 77, 0.08);
  color: var(--lp-accent);
  border: 1px solid rgba(9, 99, 77, 0.2);
  white-space: nowrap;
}

html:not(.light) #landingPage .preview-sample-pill {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.25);
}

#landingPage .preview-sample-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

#landingPage .landing-preview-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
}

#landingPage .preview-tab {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  color: var(--lp-muted);
  white-space: nowrap;
}

#landingPage .preview-tab.active {
  background: var(--lp-surface);
  color: var(--lp-text);
  font-weight: 600;
  border: 1px solid var(--lp-line);
}

#landingPage .landing-preview-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

#landingPage .preview-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--lp-muted);
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--lp-surface);
  border: 1px solid var(--lp-line);
}

#landingPage .preview-status-badge i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lp-accent);
}

#landingPage .preview-density-badge {
  font-size: 11px;
  color: var(--lp-muted);
}

#landingPage .landing-preview-body {
  padding: 20px;
}

#landingPage .landing-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

#landingPage .preview-pane {
  background: var(--lp-raised);
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  padding: 16px;
}

#landingPage .preview-pane-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lp-line);
}

#landingPage .preview-pane-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--lp-muted);
}

#landingPage .preview-pane-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--lp-accent);
  background: var(--lp-surface);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--lp-line);
}

#landingPage .preview-score-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px;
  background: var(--lp-surface);
  border: 1px solid var(--lp-line);
  border-radius: 10px;
}

#landingPage .score-display {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

#landingPage .score-number {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--lp-accent) !important;
  font-variant-numeric: tabular-nums;
}

#landingPage .score-scale {
  font-size: 12px;
  color: var(--lp-muted);
}

#landingPage .score-details strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

#landingPage .score-details p {
  font-size: 11.5px;
  line-height: 1.45;
  margin: 0;
}

#landingPage .preview-plan-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

#landingPage .preview-plan-row > div {
  padding: 8px 10px;
  background: var(--lp-surface);
  border: 1px solid var(--lp-line);
  border-radius: 8px;
}

#landingPage .preview-plan-row span {
  display: block;
  font-size: 10.5px;
  color: var(--lp-muted);
  margin-bottom: 3px;
}

#landingPage .preview-plan-row strong {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

#landingPage .text-positive { color: #16a34a !important; }
#landingPage .text-negative { color: #dc2626 !important; }

#landingPage .preview-flow-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

#landingPage .flow-stat {
  padding: 10px;
  background: var(--lp-surface);
  border: 1px solid var(--lp-line);
  border-radius: 8px;
}

#landingPage .flow-stat span { display: block; font-size: 11px; color: var(--lp-muted); margin-bottom: 3px; }
#landingPage .flow-stat strong { display: block; font-size: 15px; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
#landingPage .flow-stat small { display: block; font-size: 10px; color: var(--lp-muted); }

#landingPage .preview-flow-bar {
  height: 8px;
  background: rgba(220, 38, 38, .2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

#landingPage .flow-bar-fill {
  height: 100%;
  background: #16a34a;
  border-radius: 4px;
}

#landingPage .preview-flow-caption {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--lp-muted);
}

#landingPage .preview-metrics-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#landingPage .metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--lp-surface);
  border: 1px solid var(--lp-line);
  border-radius: 8px;
  font-size: 12px;
}

#landingPage .metric-row span { color: var(--lp-muted); }
#landingPage .metric-row strong { font-variant-numeric: tabular-nums; }

#landingPage .landing-preview-footer {
  padding: 12px 20px;
  background: var(--lp-raised);
  border-top: 1px solid var(--lp-line);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#landingPage .preview-provenance-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--lp-surface);
  border: 1px solid var(--lp-line);
  color: var(--lp-muted);
}

#landingPage .preview-provenance-desc {
  font-size: 11.5px;
  color: var(--lp-muted);
}

/* GENERAL EDITORIAL SECTIONS */
#landingPage .landing-section {
  padding: 72px 0;
  content-visibility: visible; contain-intrinsic-size: none;
  background: var(--lp-bg) !important;
  border-top: 1px solid var(--lp-line);
  scroll-margin-top: 100px;
}

#landingPage .landing-section h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.15;
  letter-spacing: -.035em;
  margin: 0;
}

#landingPage .landing-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 36px;
}

#landingPage .landing-section-heading > p {
  max-width: 440px;
  font-size: 14px;
  line-height: 1.75;
  margin-bottom: 2px;
}

/* CARDS & GRIDS */
#landingPage :is(.landing-card, .feature-card, .lens-card, .validate-card, .ai-role-card, .principle-item) {
  background: var(--lp-surface) !important;
  border: 1px solid var(--lp-line) !important;
  border-radius: 14px;
  box-shadow: none !important;
  min-width: 0;
}

#landingPage .landing-market-workflow-stream {
  display: flex;
  align-items: stretch;
  background: var(--lp-surface);
  border: 1px solid var(--lp-line);
  border-radius: 14px;
  margin-bottom: 24px;
  overflow: hidden;
}

#landingPage .workflow-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  flex: 1 1 0;
  min-width: 0;
}

#landingPage .workflow-step-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--lp-accent);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  line-height: 1.2;
  margin-top: 2px;
}

#landingPage .workflow-step-body h3 {
  font-size: 14px;
  font-weight: 600 !important;
  margin: 0 0 6px;
  color: var(--lp-text) !important;
}

#landingPage .workflow-step-body p {
  font-size: 12.5px;
  line-height: 1.6;
  margin: 0;
  color: var(--lp-muted) !important;
}

#landingPage .workflow-step-divider {
  width: 1px;
  background: var(--lp-line);
  flex: 0 0 1px;
  align-self: stretch;
}

/* LIVE RADAR WINDOW (PRESERVED FUNCTIONAL SHELL) */
#landingPage .landing-radar-window {
  margin-top: 16px;
}

#landingPage .landing-window-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--lp-line);
  font-size: 12px;
  color: var(--lp-muted);
}

#landingPage .landing-night-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #34d399;
  border: 1px solid rgba(34, 197, 94, 0.25);
  white-space: nowrap;
}

#landingPage .night-mode-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
}

#landingPage .landing-window-dots {
  display: flex;
  gap: 5px;
  margin-right: 6px;
}

#landingPage .landing-window-dots i {
  display: block;
  width: 6px;
  height: 6px;
  background: var(--lp-muted);
  opacity: .6;
  border-radius: 50%;
}

#landingPage .landing-chip {
  border: 1px solid var(--lp-line);
  border-radius: 6px;
  padding: 4px 8px;
  background: var(--lp-raised);
  color: var(--lp-muted);
  font-size: 11px;
  white-space: normal;
}

#landingPage #landingShowcaseChip { margin-left: auto; }

#landingPage .mock-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  min-height: 175px;
}

#landingPage .mock-card {
  background: transparent !important;
  padding: 20px;
  border: 0 !important;
  border-right: 1px solid var(--lp-line) !important;
  border-radius: 0 !important;
  min-width: 0;
  font-size: 12px;
}

#landingPage .mock-card:last-child { border-right: 0 !important; }
#landingPage .mock-card h3 { font-size: 12px; font-weight: 600 !important; margin: 0 0 16px; }
#landingPage .mock-card p { font-size: 11.5px; line-height: 1.6; margin-bottom: 6px; }

#landingPage .landing-market-value {
  display: block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.3;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

#landingPage .landing-small-value { font-size: 17px; }
#landingPage .landing-market-positive { color: #16a34a !important; }
#landingPage .landing-market-negative { color: #dc2626 !important; }

#landingPage .landing-price-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0;
  color: var(--lp-muted);
  font-size: 11.5px;
}

#landingPage .landing-price-row strong { font-size: 12px; font-variant-numeric: tabular-nums; }
#landingPage .landing-sector-strip { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px; }
#landingPage .heat-cell { padding: 5px 10px; font-size: 11px; color: var(--lp-muted); border: 1px solid var(--lp-line); border-radius: 6px; background: var(--lp-raised); }
#landingPage .landing-window-note { padding: 14px 20px; font-size: 11px; margin: 16px 0 0; border-top: 1px solid var(--lp-line); color: var(--lp-muted); }
#landingPage .landing-data-empty { grid-column: 1/-1; min-height: 175px; padding: 28px 20px; display: grid; justify-items: start; align-content: center; gap: 10px; }
#landingPage .landing-data-empty p { margin: 0; font-size: 12.5px; line-height: 1.7; }
#landingPage .landing-loading-line { display: block; width: 96px; height: 3px; background: var(--lp-line); border-radius: 4px; }

/* TRIO GRIDS (SCAN & MONITOR) */
#landingPage .landing-trio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

#landingPage .feature-card {
  position: relative;
  padding: 24px;
}

#landingPage .feature-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 10px;
  font-weight: 600;
  color: var(--lp-accent);
  background: var(--lp-raised);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--lp-line);
}

#landingPage .landing-feature-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

#landingPage .feature-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--lp-raised);
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  color: var(--lp-accent);
}

#landingPage .feature-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#landingPage .landing-card-index {
  font-size: 11px;
  color: var(--lp-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

#landingPage .feature-card h3 {
  font-size: 16.5px;
  margin-bottom: 10px;
}

#landingPage .feature-card p {
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 16px;
}

#landingPage .card-focus-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--lp-muted);
  border-top: 1px solid var(--lp-line);
  padding-top: 12px;
}

#landingPage .landing-section-callout {
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid var(--lp-line);
  background: var(--lp-surface);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--lp-muted);
}

#landingPage .landing-section-callout strong {
  color: var(--lp-text) !important;
}

/* QUAD GRIDS (INVESTIGATE & VALIDATE) */
#landingPage .landing-quad-grid,
#landingPage .landing-validate-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

#landingPage .lens-card,
#landingPage .validate-card {
  padding: 22px;
}

#landingPage .lens-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

#landingPage .lens-number {
  font-size: 18px;
  font-weight: 700;
  color: var(--lp-accent);
}

#landingPage .lens-card h3,
#landingPage .validate-card h3 {
  font-size: 15px;
  margin-bottom: 8px;
}

#landingPage .lens-card p,
#landingPage .validate-card p {
  font-size: 12.5px;
  line-height: 1.7;
  margin: 0;
}

#landingPage .validate-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--lp-raised);
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  color: var(--lp-accent);
  margin-bottom: 16px;
}

#landingPage .validate-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* AI GRID */
#landingPage .landing-ai-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

#landingPage .ai-role-card {
  padding: 24px;
}

#landingPage .role-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--lp-accent);
  text-transform: uppercase;
  margin-bottom: 12px;
}

#landingPage .ai-role-card h3 {
  font-size: 16.5px;
  margin-bottom: 10px;
}

#landingPage .ai-role-card p {
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
}

/* DATA TRUST & PRINCIPLES */
#landingPage .landing-principles-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#landingPage .principle-item {
  display: flex;
  gap: 18px;
  padding: 24px;
}

#landingPage .principle-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--lp-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  flex: 0 0 28px;
}

#landingPage .principle-item h3 {
  font-size: 15.5px;
  margin-bottom: 8px;
}

#landingPage .principle-item p {
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
}

/* CLOSING CTA */
#landingPage .landing-closing {
  text-align: center;
  padding: 88px 0;
}

#landingPage .landing-closing h2 {
  font-size: clamp(28px, 3.5vw, 42px);
  margin: 0 auto 16px;
  max-width: 680px;
}

#landingPage .landing-closing-lead {
  font-size: 15px;
  line-height: 1.7;
  max-width: 540px;
  margin: 0 auto 28px;
}

#landingPage .landing-closing-actions {
  display: flex;
  justify-content: center;
}

/* FOOTER */
#landingPage .landing-footer {
  border-top: 1px solid var(--lp-line);
  background: var(--lp-surface);
  padding: 56px 0 36px;
}

#landingPage .landing-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}

#landingPage .footer-tagline {
  font-size: 12.5px;
  line-height: 1.7;
  max-width: 320px;
  margin-top: 14px;
}

#landingPage .footer-col-title {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lp-text) !important;
  margin-bottom: 14px;
}

#landingPage .footer-links-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#landingPage .footer-links-col a,
#landingPage .landing-footer-btn {
  font-size: 13px;
  color: var(--lp-muted);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 6px 0;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

#landingPage .footer-note-text {
  font-size: 12px;
  color: var(--lp-muted);
  line-height: 1.5;
}

#landingPage .landing-footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--lp-line);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--lp-muted);
}

#landingPage .footer-bottom-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

/* RESPONSIVE MEDIA QUERIES */
@media(max-width: 1100px) {
  #landingPage .landing-menu { gap: 12px; }
  #landingPage .landing-quad-grid,
  #landingPage .landing-validate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #landingPage .landing-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:900px) {
  #landingPage .landing-container { width: calc(100% - 32px); }
  #landingPage .landing-nav { top: 6px; width: calc(100% - 16px); border-radius: 12px; }
  #landingPage .landing-nav > .landing-container { min-height: 52px; flex-wrap: wrap; gap: 6px; padding: 6px 12px; width: 100%; }
  #landingPage .landing-brand { margin-right: auto; }
  #landingPage .landing-nav-actions .landing-btn { display: none !important; }
  #landingPage #landingMenuToggle { display: inline-grid; }
  #landingPage .landing-menu {
    display: none !important;
    order: 3;
    flex: 1 0 100%;
    margin: 0;
    gap: 4px;
    padding: 10px 0;
    border-top: 1px solid var(--lp-line);
  }
  #landingPage.landing-menu-open .landing-menu {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
  }
  #landingPage .landing-menu :is(a, button) { padding: 8px 10px; }
  #landingPage .landing-menu .landing-menu-cta {
    grid-column: 1 / -1;
    display: inline-flex !important;
    width: 100%;
    min-height: 44px;
    margin-top: 6px;
    justify-content: center;
  }
  #landingPage .landing-hero { padding: 20px 0 32px; }
  #landingPage .landing-section-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  #landingPage .landing-section-heading > p { max-width: none; }
  #landingPage .landing-section { padding: 40px 0; }
  #landingPage .landing-market-workflow-stream {
    flex-direction: column;
  }
  #landingPage .workflow-step {
    padding: 14px 16px;
  }
  #landingPage .workflow-step-divider {
    width: 100%;
    height: 1px;
    flex: 0 0 1px;
  }
  #landingPage .landing-trio-grid,
  #landingPage .landing-ai-grid {
    grid-template-columns: 1fr;
  }
  #landingPage .landing-preview-grid {
    grid-template-columns: 1fr;
  }
  #landingPage .mock-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #landingPage .mock-card {
    border-bottom: 1px solid var(--lp-line) !important;
  }
  #landingPage .mock-card:nth-child(2n) {
    border-right: 0 !important;
  }
  #landingPage .landing-principles-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width: 600px) {
  #landingPage { padding-top: 6px; }
  #landingPage .landing-container { width: calc(100% - 24px); }
  #landingPage .landing-hero { padding-top: 12px !important; padding-bottom: 18px !important; }
  #landingPage .landing-signal-line-wrap { margin: 0 auto 8px; max-width: 280px; height: 16px; }
  #landingPage .landing-eyebrow { font-size: 10px !important; margin-bottom: 8px !important; }
  #landingPage .landing-hero h1 { font-size: clamp(28px, 8.5vw, 36px) !important; margin: 0 auto 12px !important; line-height: 1.12 !important; }
  #landingPage .landing-hero-lead { font-size: 13.5px !important; line-height: 1.6 !important; margin: 0 auto 16px !important; max-width: 340px; }
  #landingPage .landing-mobile-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-width: 340px;
    margin: 0 auto 12px;
  }
  #landingPage .landing-mobile-wrap .landing-btn {
    width: 100%;
    min-height: 44px;
  }
  #landingPage .landing-proof-row { flex-direction: column; align-items: center; gap: 4px; margin-top: 10px; font-size: 11px; }
  #landingPage .landing-hero-note { font-size: 11px !important; line-height: 1.5; margin: 8px auto 0 !important; }
  #landingPage .landing-hero-content { margin-bottom: 16px !important; }
  #landingPage .landing-preview-header { padding: 10px 12px; gap: 8px; }
  #landingPage .preview-sample-pill { font-size: 9.5px; padding: 2px 6px; }
  #landingPage .preview-status-badge { font-size: 10px; padding: 3px 6px; }
  #landingPage .preview-tab { font-size: 11px; padding: 4px 8px; }
  #landingPage .landing-preview-body { padding: 12px; }
  #landingPage .landing-preview-grid { gap: 10px; }
  #landingPage .preview-pane { padding: 12px; }
  #landingPage .score-display { gap: 2px; }
  #landingPage .score-number { font-size: 28px; }
  #landingPage .landing-preview-footer { padding: 10px 12px; flex-direction: column; align-items: flex-start; gap: 4px; }
  #landingPage .workflow-step { padding: 12px 14px; gap: 10px; }
  #landingPage .workflow-step-num { font-size: 16px; }
  #landingPage .workflow-step-body h3 { font-size: 13.5px; }
  #landingPage .workflow-step-body p { font-size: 12px; }
  #landingPage .landing-radar-window { margin-top: 14px; }
  #landingPage .landing-section h2 { font-size: 24px; }
  #landingPage .landing-section { padding: 32px 0; scroll-margin-top: 70px; }
  #landingPage .landing-quad-grid,
  #landingPage .landing-validate-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #landingPage .mock-card { padding: 16px 12px; }
  #landingPage .landing-market-value { font-size: 22px; }
  #landingPage .landing-small-value { font-size: 15px; }
  #landingPage .landing-window-bar { padding: 12px; gap: 8px; }
  #landingPage .landing-window-dots { display: none; }
  #landingPage #landingShowcaseChip { margin-left: 0; }
  #landingPage .landing-window-note { padding: 10px 12px; }
  #landingPage .landing-sector-strip { padding: 0 12px; }
  #landingPage .landing-footer-grid { grid-template-columns: 1fr; gap: 24px; }
  #landingPage .landing-closing { padding: 48px 0; }
}

@media(max-width: 359px) {
  #landingPage .mock-grid { grid-template-columns: 1fr; }
  #landingPage .mock-card { border-right: 0 !important; }
  #landingPage .preview-plan-row,
  #landingPage .preview-flow-stats {
    grid-template-columns: 1fr;
  }
}

@media(prefers-reduced-motion: reduce) {
  #landingPage *,
  #landingPage *::before,
  #landingPage *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


/* Auth surfaces share tokens without changing authentication or approval. */
:is(#loginModal,#registerModal,#selfResetModal,#resetPasswordModal,#authChoiceModal), #authV2ResetModal > div {
  padding: max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)) !important;
  overflow-y: auto; overscroll-behavior: contain; backdrop-filter: none !important;
}
:is(#loginModal,#registerModal,#selfResetModal,#resetPasswordModal,#authChoiceModal) > div, #authV2ResetModal > div > div {
  box-sizing: border-box; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; background: var(--surface) !important; color: var(--color-text-primary) !important;
  border: 1px solid var(--border-hairline) !important; border-radius: 12px !important; transform: none !important;
  animation: ac-auth-appear var(--motion-base) var(--ease-standard) !important;
}
:is(#loginModal,#registerModal,#selfResetModal,#resetPasswordModal,#authChoiceModal,#authV2ResetModal) :is(h2,h3,.text-white,.text-gray-100,.text-slate-300) { color: var(--color-text-primary) !important; }
:is(#loginModal,#registerModal,#selfResetModal,#resetPasswordModal,#authChoiceModal,#authV2ResetModal) :is(label,p,.text-gray-400,.text-gray-500,.text-slate-400,.text-slate-500) { color: var(--color-text-secondary) !important; }
:is(#loginModal,#registerModal,#selfResetModal,#resetPasswordModal,#authChoiceModal,#authV2ResetModal) input { background: var(--canvas) !important; color: var(--color-text-primary) !important; border-color: var(--border-hairline) !important; }
:is(#loginModal,#registerModal,#selfResetModal,#resetPasswordModal,#authChoiceModal,#authV2ResetModal) button { min-height: 44px; min-width: 44px; }
#authChoiceModal .landing-auth-card { background: var(--canvas); border: 1px solid var(--border-hairline); }
#loginBtn,#registerBtn { color: var(--color-on-accent) !important; background: var(--color-accent) !important; box-shadow: none !important; transform: none !important; }
html.auth-dialog-open, html.auth-dialog-open body { overflow: hidden !important; }
@media(max-width:1023px) {
  #appSidebar .sidebar-item { min-height: 44px; }
  #appSidebar :is(.sidebar-collapse-toggle,.theme-toggle-compact,.user-profile-badge) { min-height: 44px; }
  #appSidebar .sidebar-collapse-toggle { min-width: 44px; }
  #appSidebar > .sidebar-footer { padding-bottom: max(12px,env(safe-area-inset-bottom)); }
  #appSidebar > .sidebar-brand { padding-top: max(12px,env(safe-area-inset-top)) !important; }
  .workspace-sidebar-toggle { width: 44px; height: 44px; }
  #page-money-management .ms-workbook-heading { flex-wrap: wrap; }
  #page-money-management :is(.ms-button,.ms-icon-button) { min-height: 44px; }
  #page-money-management .ms-icon-button { min-width: 44px; }
  #page-money-management :is(input,select,textarea) { font-size: 16px !important; min-height: 44px; }
  #page-money-management .ms-grid :is(input,select,textarea) { height: 44px; }
  #page-money-management .ms-sort select { max-width: 200px; }
  #page-money-management .ms-grid-viewport { max-height: min(460px,65dvh); }
}

@media(max-width:600px) { :is(#loginModal,#registerModal,#selfResetModal,#authChoiceModal,#authV2ResetModal) input:not([type="checkbox"]) { font-size: 16px !important; } }
#standaloneTermsModal > div { background: var(--surface) !important; color: var(--color-text-primary) !important; border-color: var(--border-hairline) !important; max-height: calc(100dvh - 32px) !important; }
#standaloneTermsModal :is(h2,h3) { color: var(--color-text-primary) !important; }
#standaloneTermsModal :is(p,div) { color: var(--color-text-secondary) !important; }
#standaloneTermsModal > div > div, #standaloneTermsModal > div > div > div { background: var(--surface) !important; border-color: var(--border-hairline) !important; }
#standaloneTermsModal button { min-height: 44px; min-width: 44px; }

@keyframes ac-auth-appear { from { opacity: 0; } to { opacity: 1; } }
@media(prefers-reduced-motion:reduce) {
  :is(#loginModal,#registerModal,#selfResetModal,#authChoiceModal) > div, #authV2ResetModal > div > div { animation: none !important; }
}

#landingPage .landing-refresh { min-height:36px; border:0; background:transparent; color:var(--lp-muted); padding:6px 8px; font-size:11px; cursor:pointer; }
@media(max-width:600px){#landingPage .landing-refresh{min-height:44px;}}

/* ===== CANVAS PARITY STYLES ===== */
#landingPage .spot {
  position: absolute;
  inset: -40px 0 0;
  pointer-events: none;
  z-index: 0;
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1500" height="420" viewBox="0 0 1500 420"%3E%3Cg stroke-width="1.2" opacity=".45"%3E%3Cpath d="M5 197V228" stroke="%23dc2626"/%3E%3Crect x="2" y="203" width="6" height="25" fill="%23dc2626"/%3E%3Cpath d="M55 294V363" stroke="%2316a34a"/%3E%3Crect x="52" y="316" width="6" height="40" fill="%2316a34a"/%3E%3Cpath d="M115 332V392" stroke="%2316a34a"/%3E%3Crect x="112" y="356" width="6" height="20" fill="%2316a34a"/%3E%3Cpath d="M185 334V377" stroke="%23dc2626"/%3E%3Crect x="182" y="334" width="6" height="43" fill="%23dc2626"/%3E%3Cpath d="M245 99V214" stroke="%2316a34a"/%3E%3Crect x="242" y="121" width="6" height="92" fill="%2316a34a"/%3E%3Cpath d="M305 68V141" stroke="%2316a34a"/%3E%3Crect x="302" y="90" width="6" height="42" fill="%2316a34a"/%3E%3Cpath d="M395 90V220" stroke="%2316a34a"/%3E%3Crect x="392" y="90" width="6" height="118" fill="%2316a34a"/%3E%3Cpath d="M475 133V217" stroke="%23dc2626"/%3E%3Crect x="472" y="149" width="6" height="49" fill="%23dc2626"/%3E%3Cpath d="M535 192V287" stroke="%2316a34a"/%3E%3Crect x="532" y="192" width="6" height="67" fill="%2316a34a"/%3E%3Cpath d="M595 271V359" stroke="%2316a34a"/%3E%3Crect x="592" y="271" width="6" height="76" fill="%2316a34a"/%3E%3Cpath d="M695 259V311" stroke="%23dc2626"/%3E%3Crect x="692" y="266" width="6" height="45" fill="%23dc2626"/%3E%3Cpath d="M805 282V317" stroke="%2316a34a"/%3E%3Crect x="802" y="287" width="6" height="26" fill="%2316a34a"/%3E%3Cpath d="M885 210V237" stroke="%2316a34a"/%3E%3Crect x="882" y="214" width="6" height="12" fill="%2316a34a"/%3E%3Cpath d="M1045 186V223" stroke="%2316a34a"/%3E%3Crect x="1042" y="189" width="6" height="33" fill="%2316a34a"/%3E%3Cpath d="M1135 220V256" stroke="%2316a34a"/%3E%3Crect x="1132" y="220" width="6" height="33" fill="%2316a34a"/%3E%3C/g%3E%3C/svg%3E') right 60% / auto 78% no-repeat;
  mask-image: radial-gradient(360px circle at var(--mx,72%) var(--my,22%), #000 0%, rgba(0,0,0,.4) 45%, transparent 72%);
  -webkit-mask-image: radial-gradient(360px circle at var(--mx,72%) var(--my,22%), #000 0%, rgba(0,0,0,.4) 45%, transparent 72%);
}

/* Feature Tape */
#landingPage .tape {
  overflow: hidden;
  border-top: 1px solid var(--lp-line);
  border-bottom: 1px solid var(--lp-line);
  background: var(--lp-surface);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
#landingPage .tape-in {
  display: flex;
  gap: 36px;
  width: max-content;
  padding: 14px 0;
  animation: acTape 42s linear infinite;
  font: 600 13px "Geist Mono", monospace;
  color: var(--lp-muted);
  white-space: nowrap;
}
#landingPage .tape-in span { display: inline-flex; align-items: center; gap: 36px; }
#landingPage .tape-in span::after {
  content: "";
  width: 6px;
  height: 14px;
  background: linear-gradient(#16a34a,#16a34a) center/1.5px 100% no-repeat, linear-gradient(#16a34a,#16a34a) center/6px 8px no-repeat;
}
#landingPage .tape-in span:nth-child(3n+2)::after {
  background: linear-gradient(#dc2626,#dc2626) center/1.5px 100% no-repeat, linear-gradient(#dc2626,#dc2626) center/6px 6px no-repeat;
}
#landingPage .tape:hover .tape-in, #landingPage .tape:focus-within .tape-in { animation-play-state: paused; }
@keyframes acTape { to { transform: translateX(-50%); } }

/* Statistics Bar */
#landingPage .stats-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 44px 24px 32px;
}
#landingPage .stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--lp-line);
  margin-top: 16px;
}
#landingPage .stats > div { padding: 24px 20px 24px 0; }
#landingPage .stats > div + div { padding-left: 20px; border-left: 1px solid var(--lp-line); }
#landingPage .stats b { display: block; font-size: clamp(30px, 3.5vw, 48px); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--lp-text); }
#landingPage .stats span { display: block; margin-top: 8px; color: var(--lp-muted); font-size: 13px; line-height: 1.45; max-width: 210px; }

/* Interactive Demo Calculator */
#landingPage .calc-section { padding-top: 0; }
#landingPage .demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0;
  border-radius: 14px;
  border: 1px solid var(--lp-line);
  overflow: hidden;
  background: var(--lp-surface);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
#landingPage .demo > div { padding: 22px 24px; }
#landingPage .demo > div + div { border-left: 1px solid var(--lp-line); background: var(--lp-bg); }
#landingPage .sl { display: grid; gap: 8px; margin-bottom: 20px; }
#landingPage .sl label { display: flex; justify-content: space-between; font-size: 13px; color: var(--lp-muted); font-weight: 600; }
#landingPage .sl label b { color: var(--lp-text); font: 700 15px "Geist Mono", monospace; }
#landingPage .sl input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 4px; background: linear-gradient(90deg, var(--lp-accent) var(--p, 30%), #DDE3DD var(--p, 30%)); outline: none; }
#landingPage .sl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--lp-surface); border: 2px solid var(--lp-accent); box-shadow: 0 2px 6px rgba(0,0,0,.18); cursor: grab; }
#landingPage .sl input[type=range]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.15); }
#landingPage .big2 { font-size: 38px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--lp-text); }
#landingPage .fillbar { height: 10px; border-radius: 6px; background: #DDE3DD; overflow: hidden; margin-top: 10px; }
#landingPage .fillbar i { display: block; height: 100%; width: var(--w, 0%); background: var(--lp-accent); border-radius: 6px; transition: width 300ms ease; }
#landingPage .rng-bar { position: relative; height: 56px; margin-top: 18px; }
#landingPage .rng-bar .band { position: absolute; left: 0; right: 0; top: 22px; height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(220,38,38,.18), rgba(49,95,154,.16) 40%, rgba(34,197,94,.2)); }
#landingPage .rng-bar .mk { position: absolute; top: 14px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; font: 600 10.5px "Geist Mono", monospace; color: var(--lp-muted); }
#landingPage .rng-bar .mk i { width: 3px; height: 28px; border-radius: 2px; background: currentColor; }
#landingPage .rng-bar .mk.up { top: -2px; flex-direction: column-reverse; color: var(--lp-accent); }

/* Si Mata Hero */
#landingPage .mata-wrap {
  position: absolute;
  top: 48px;
  right: 24px;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-direction: row-reverse;
}
#landingPage .mata {
  width: 96px;
  height: 96px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  outline-offset: 4px;
}
#landingPage .mata svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 14px 20px rgba(14,23,20,.2));
}
#landingPage .mata .body { transition: transform 380ms ease; transform-origin: 60px 60px; }
#landingPage .mata:hover .body { transform: scale(1.04) rotate(-3deg); }
#landingPage .mata.boop .body { animation: acBoop 500ms ease; }
#landingPage .mata .mouth { opacity: 0; transform-origin: 60px 86px; }
#landingPage .mata.talk .smile { opacity: 0; }
#landingPage .mata.talk .mouth { opacity: 1; animation: acTalk 260ms ease-in-out infinite alternate; }
@keyframes acTalk { from { transform: scaleY(.35); } to { transform: scaleY(1.1); } }
@keyframes acBoop { 0% { transform: scale(1); } 35% { transform: scale(.88,1.08); } 70% { transform: scale(1.06,.95); } 100% { transform: scale(1); } }
#landingPage .bub {
  position: relative;
  max-width: 240px;
  margin-top: 12px;
  background: #0E1714;
  color: #EAF1EE;
  font-size: 13px;
  line-height: 1.45;
  padding: 10px 14px;
  border-radius: 12px 12px 4px 12px;
  box-shadow: 0 12px 24px -8px rgba(14,23,20,.4);
}
#landingPage .bub::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 16px;
  border: 6px solid transparent;
  border-left-color: #0E1714;
  border-right: 0;
}
#landingPage .bub small { display: block; margin-top: 4px; color: #8FB9A6; font-size: 11px; font-weight: 600; }
#landingPage .mata-x {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--lp-line);
  background: var(--lp-surface);
  color: var(--lp-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: opacity 140ms;
}
#landingPage .mata-mini {
  position: absolute;
  top: 56px;
  right: 24px;
  z-index: 5;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--lp-line);
  background: var(--lp-surface);
  font: 600 12px system-ui, sans-serif;
  color: var(--lp-muted);
  cursor: pointer;
}

/* Interactive Preview Window Tab Switcher */
#landingPage .preview-tab-btn {
  all: unset;
  box-sizing: border-box;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lp-muted);
  cursor: pointer;
  transition: all 140ms;
}
#landingPage .preview-tab-btn:hover { color: var(--lp-text); }
#landingPage .preview-tab-btn.on { background: var(--lp-surface); color: var(--lp-text); box-shadow: 0 1px 3px rgba(0,0,0,.1); font-weight: 700; }

@media (max-width: 980px) {
  #landingPage .mata-wrap { top: 20px; right: 12px; }
  #landingPage .mata { width: 72px; height: 72px; }
  #landingPage .bub { max-width: 180px; font-size: 12px; }
  #landingPage .mata-mini { top: 20px; right: 12px; }
  #landingPage .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #landingPage .stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  #landingPage .stats > div:nth-child(n+3) { border-top: 1px solid var(--lp-line); }
  #landingPage .demo { grid-template-columns: 1fr; }
  #landingPage .demo > div + div { border-left: 0; border-top: 1px solid var(--lp-line); }
}

@media (prefers-reduced-motion: reduce) {
  #landingPage .spot { display: none !important; }
  #landingPage .tape-in { animation: none !important; }
  #landingPage .mata .body, #landingPage .mata.talk .mouth { animation: none !important; }
}