/* ═══ COLOR FLOW MAP (from design-spec sections[].bg_context) ═══
 *
 * index.html:
 *   nav        → transparent-on-dark (scrolled: solid #0E1F38)  | text: white
 *   hero       → DARK  (#0E1F38)     | text: white
 *   social-proof-bar → DARK-ALT (#162944) | text: white-muted
 *   problem    → LIGHT (#F7F9FC)     | text: dark
 *   product-pillars → WHITE (#FFFFFF) | text: dark  [.lpth-pillar-mock → DARK #0E1F38]
 *   how-it-works → CREAM (#F0F4F9)   | text: dark
 *   testimonials → DARK (#0E1F38)    | text: white
 *   pricing-preview → WHITE          | text: dark
 *   founder-cta → DARK (#0E1F38)     | text: white
 *   footer     → DARK (#0E1F38)      | text: white-muted
 *
 * features.html:
 *   nav        → transparent-on-dark (dark-top)
 *   features-hero → DARK             | text: white
 *   features-cap-table → WHITE       | text: dark  [.lpth-feature-mock → DARK]
 *   features-deck-hub → CREAM        | text: dark  [.lpth-feature-mock → DARK]
 *   features-pipeline → WHITE        | text: dark  [.lpth-feature-mock → DARK]
 *   features-intro-routing → CREAM   | text: dark  [.lpth-feature-mock → DARK]
 *   features-integrations → LIGHT    | text: dark
 *
 * pricing.html / about.html / blog/* / resources/* / changelog / contact:
 *   nav        → solid white (light-top, scrolled from load)    | text: dark
 *   hero       → LIGHT or CREAM or WHITE | text: dark
 *   ...light sections throughout...
 *   pricing-cta / about-mission-values → DARK | text: white
 *   footer     → DARK (#0E1F38)      | text: white-muted
 *
 * login/index.html + login/signup.html + login/reset-password.html:
 *   nav        → transparent-on-dark (dark-top)
 *   full page  → DARK (#0E1F38)      | .lpth-auth-card → DARK-ALT (#162944)
 *
 * legal/*.html:
 *   nav        → solid white (light-top)
 *   page       → WHITE               | text: dark
 *
 * Key nav rule:
 *   dark-top pages  → nav links default WHITE
 *   light-top pages → nav links default DARK (#0E1F38) from load
 *   nav scrolled solid → always #0E1F38 bg → links always WHITE after scroll
 * ═══════════════════════════════════════════════════════════════ */

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.625;
  color: var(--lpth-fg-light-primary);
  background: var(--lpth-bg-white);
  -webkit-font-smoothing: antialiased;
}

/* === CSS Custom Properties === */
:root {
  /* Palette */
  --lpth-brand-primary:       #0E1F38;
  --lpth-bg-dark:             #0E1F38;
  --lpth-bg-dark-alt:         #162944;
  --lpth-bg-light:            #F7F9FC;
  --lpth-bg-white:            #FFFFFF;
  --lpth-bg-cream:            #F0F4F9;

  --lpth-accent-deco:         #00BFA5;
  --lpth-accent-aa-dark:      #00BFA5;  /* on dark bg, ratio ~8.2:1 */
  --lpth-accent-aa-light:     #007A6B;  /* on light bg, ratio ~5.7:1 */

  --lpth-fg-dark-primary:     #FFFFFF;
  --lpth-fg-dark-secondary:   #94A3B8;
  --lpth-fg-light-primary:    #0E1F38;
  --lpth-fg-light-secondary:  #475569;
  --lpth-fg-cream-primary:    #0E1F38;
  --lpth-fg-cream-secondary:  #5A6E85;

  --lpth-border-light:        #E2E8F0;
  --lpth-border-dark:         #1E3454;

  --lpth-error:               #EF4444;
  --lpth-success:             #10B981;

  /* Typography */
  --lpth-font-heading: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --lpth-font-body:    'Inter', -apple-system, sans-serif;
  --lpth-font-mono:    'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace;

  /* Spacing */
  --lpth-section-py:    5rem;
  --lpth-container-max: 1200px;
  --lpth-gutter:        1.5rem;

  /* Shape */
  --lpth-radius-card:   12px;
  --lpth-radius-btn:    8px;
  --lpth-radius-input:  8px;
  --lpth-radius-pill:   9999px;

  /* Shadows */
  --lpth-shadow-card:   0 2px 12px rgba(14,31,56,0.08);
  --lpth-shadow-hover:  0 6px 24px rgba(14,31,56,0.14);
  --lpth-shadow-nav:    0 1px 0 rgba(14,31,56,0.06);
}

/* === Typography === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--lpth-font-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.25rem, 4vw, 3rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p { line-height: 1.7; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

img { display: block; max-width: 100%; }
img[width][height] { height: auto; }

/* === Container === */
.lpth-container {
  width: 100%;
  max-width: var(--lpth-container-max);
  margin: 0 auto;
  padding: 0 var(--lpth-gutter);
}

/* === Section Spacing === */
.lpth-section {
  padding: var(--lpth-section-py) 0;
}
.lpth-section--sm {
  padding: 3rem 0;
}

/* === Eyebrow Label === */
.lpth-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--lpth-radius-pill);
  padding: 0.3rem 0.9rem;
  margin-bottom: 1rem;
}
.lpth-section--dark .lpth-eyebrow,
.lpth-section--dark-alt .lpth-eyebrow,
.lpth-hero--dark .lpth-eyebrow {
  background: rgba(0,191,165,0.18);
  color: var(--lpth-accent-aa-dark);
}
.lpth-section--light .lpth-eyebrow,
.lpth-section--white .lpth-eyebrow,
.lpth-section--cream .lpth-eyebrow,
.lpth-hero--light .lpth-eyebrow,
.lpth-hero--cream .lpth-eyebrow {
  background: rgba(0,122,107,0.1);
  color: var(--lpth-accent-aa-light);
}

/* === Buttons === */
.lpth-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--lpth-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--lpth-radius-btn);
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.18s ease;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
}
/* primary-teal — works on any bg */
.lpth-btn--primary-teal {
  background: var(--lpth-accent-deco);
  color: var(--lpth-bg-dark);
  border-color: var(--lpth-accent-deco);
}
.lpth-btn--primary-teal:hover {
  background: #00A892;
  border-color: #00A892;
  color: var(--lpth-bg-dark);
}
/* primary-dark — on light/white/cream sections */
.lpth-btn--primary-dark {
  background: var(--lpth-bg-dark);
  color: var(--lpth-fg-dark-primary);
  border-color: var(--lpth-bg-dark);
}
.lpth-btn--primary-dark:hover {
  background: #162944;
  border-color: #162944;
}
/* outline-light — on light/white/cream sections */
.lpth-btn--outline-light {
  background: transparent;
  color: var(--lpth-fg-light-primary);
  border-color: var(--lpth-border-light);
}
.lpth-btn--outline-light:hover {
  border-color: var(--lpth-fg-light-primary);
  background: rgba(14,31,56,0.04);
}
/* outline-dark — on dark sections */
.lpth-btn--outline-dark {
  background: transparent;
  color: var(--lpth-fg-dark-primary);
  border-color: var(--lpth-border-dark);
}
.lpth-btn--outline-dark:hover {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
}
/* ghost-on-dark */
.lpth-btn--ghost-dark {
  background: transparent;
  color: rgba(255,255,255,0.85);
  border-color: transparent;
}
.lpth-btn--ghost-dark:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}
/* text-link-teal */
.lpth-btn--text-teal {
  background: transparent;
  border-color: transparent;
  padding: 0;
  font-size: 0.9375rem;
}
.lpth-section--dark .lpth-btn--text-teal,
.lpth-section--dark-alt .lpth-btn--text-teal,
.lpth-hero--dark .lpth-btn--text-teal {
  color: var(--lpth-accent-aa-dark);
}
.lpth-section--light .lpth-btn--text-teal,
.lpth-section--white .lpth-btn--text-teal,
.lpth-section--cream .lpth-btn--text-teal {
  color: var(--lpth-accent-aa-light);
}

/* === Utility classes === */
.lpth-text-teal-dark  { color: var(--lpth-accent-aa-dark); }
.lpth-text-teal-light { color: var(--lpth-accent-aa-light); }
.lpth-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* === Section bg classes === */
.lpth-section--dark     { background: var(--lpth-bg-dark); }
.lpth-section--dark-alt { background: var(--lpth-bg-dark-alt); }
.lpth-section--light    { background: var(--lpth-bg-light); }
.lpth-section--white    { background: var(--lpth-bg-white); }
.lpth-section--cream    { background: var(--lpth-bg-cream); }

/* Text colors scoped to section bg */
.lpth-section--dark     h1,
.lpth-section--dark     h2,
.lpth-section--dark     h3,
.lpth-section--dark     h4,
.lpth-section--dark     p,
.lpth-section--dark     li,
.lpth-section--dark-alt h1,
.lpth-section--dark-alt h2,
.lpth-section--dark-alt h3,
.lpth-section--dark-alt h4,
.lpth-section--dark-alt p,
.lpth-section--dark-alt li {
  color: var(--lpth-fg-dark-primary);
}
.lpth-section--dark     .lpth-muted,
.lpth-section--dark-alt .lpth-muted {
  color: var(--lpth-fg-dark-secondary);
}
.lpth-section--light    h1,
.lpth-section--light    h2,
.lpth-section--light    h3,
.lpth-section--light    h4,
.lpth-section--light    p,
.lpth-section--light    li,
.lpth-section--white    h1,
.lpth-section--white    h2,
.lpth-section--white    h3,
.lpth-section--white    h4,
.lpth-section--white    p,
.lpth-section--white    li,
.lpth-section--cream    h1,
.lpth-section--cream    h2,
.lpth-section--cream    h3,
.lpth-section--cream    h4,
.lpth-section--cream    p,
.lpth-section--cream    li {
  color: var(--lpth-fg-light-primary);
}
.lpth-section--light .lpth-muted,
.lpth-section--white .lpth-muted,
.lpth-section--cream .lpth-muted {
  color: var(--lpth-fg-light-secondary);
}

/* === Fade-in animation with failsafe === */
.lpth-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.lpth-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Failsafe: after 1.2s force visible */
@keyframes lpth-reveal {
  to { opacity: 1; transform: translateY(0); }
}
.lpth-fade-in {
  animation: lpth-reveal 0.001s 1.2s forwards;
}

/* === Responsive breakpoints === */
@media (max-width: 768px) {
  :root {
    --lpth-section-py: 3.5rem;
  }
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
}