/* ═══ COLOR FLOW MAP (from design-spec.theme_context_map) ═══
 *
 * NAV behavior: fixed-transparent-scrolled-solid
 *   Default state (all pages): dark nav bg or transparent-over-dark
 *   logo: logo-light.svg (white/crystal wordmark) — used on ALL pages
 *   link color: white (#F0F5FB) — nav is always dark bg (solid dark on light-top pages too)
 *   Note: On light-top pages, nav renders SOLID DARK (not transparent) from the start
 *
 * index.html       (dark-top):
 *   nav            → transparent-on-dark (scrolled: solid #0B1623)
 *   hero           → DARK  (#0B1623)        | text: #F0F5FB white
 *   problem-strip  → DARK-ALT (#0F1E2E)     | text: #F0F5FB
 *   platform-snap  → DARK  (#0B1623)        | text: #F0F5FB
 *   use-cases-trio → DARK-ALT (#0F1E2E)     | text: #F0F5FB
 *   how-it-works   → DARK  (#0B1623)        | text: #F0F5FB
 *   science-teaser → DARK-ALT (#0F1E2E)     | text: #F0F5FB
 *   about-strip    → DARK  (#0B1623)        | text: #F0F5FB
 *   cta-footer     → DARK-ALT (#0F1E2E)     | text: #F0F5FB
 *   footer         → DARK  (#060D16)        | text: muted white
 *
 * platform.html    (dark-top): all sections DARK / DARK-ALT alternating
 * science.html     (dark-top): all sections DARK / DARK-ALT alternating
 * use-cases/*      (dark-top): all sections DARK / DARK-ALT alternating
 * about.html       (dark-top): all sections DARK / DARK-ALT alternating
 *
 * pricing.html     (light-top):
 *   nav            → SOLID DARK (#0B1623)   | link color: white
 *   hero           → LIGHT (#EEF4FA)        | text: #0B1623 dark
 *   tiers          → WHITE (#FFFFFF)        | text: #0B1623 dark
 *   faq            → LIGHT (#EEF4FA)        | text: #0B1623 dark
 *   cta            → WHITE (#FFFFFF)        | text: #0B1623 dark
 *
 * contact.html     (light-top): light/white sections
 * blog/index.html  (light-top): light/white sections
 * blog/*.html      (light-top): light/white sections
 *
 * login/*.html     (dark-top): DARK bg, auth card is DARK-CARD (#132032)
 *
 * legal/*.html     (light-top): WHITE sections
 *
 * ADJACENT SAME-POLARITY: dark→dark-alt uses bg shade-step (#0B1623 vs #0F1E2E)
 *   which provides visible separation without borders.
 *   light→white uses bg step (#EEF4FA vs #FFFFFF) — same treatment.
 * ═══════════════════════════════════════════════════════════════ */

/* ─── Reset & Base ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  color: var(--msq-fg-light-primary);
  background: var(--msq-bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* dark-top pages need dark body bg so transparent nav doesn't show white body */
body.msq-page--dark-top {
  background: var(--msq-bg-dark);
}

body.msq-page--light-top {
  background: var(--msq-bg-white);
}

/* ─── CSS Custom Properties ──────────────────────────────────────── */
:root {
  /* Brand */
  --msq-brand-primary: #0B1623;
  --msq-brand-deep: #060D16;
  --msq-accent-crystal: #4FC3F7;
  --msq-accent-crystal-dim: #2A9FD6;
  --msq-accent-amber: #F59E0B;
  --msq-accent-amber-dim: #B45309;
  --msq-accent-aa-on-dark: #4FC3F7;
  --msq-accent-aa-on-light: #0D7EB3;

  /* Foreground tokens */
  --msq-fg-dark-primary: #F0F5FB;    /* for use ON dark backgrounds */
  --msq-fg-dark-secondary: #94B4CC;  /* for use ON dark backgrounds */
  --msq-fg-dark-muted: #5A7A94;      /* for use ON dark backgrounds */
  --msq-fg-light-primary: #0B1623;   /* for use ON light backgrounds */
  --msq-fg-light-secondary: #334155;
  --msq-fg-white-secondary: #475569;

  /* Backgrounds */
  --msq-bg-dark: #0B1623;
  --msq-bg-dark-alt: #0F1E2E;
  --msq-bg-dark-card: #132032;
  --msq-bg-light: #EEF4FA;
  --msq-bg-light-alt: #E0ECF7;
  --msq-bg-white: #FFFFFF;

  /* Borders */
  --msq-border-dark: #1E3148;
  --msq-border-light: #C9D9E8;

  /* Status */
  --msq-success: #22C55E;
  --msq-warning: #F59E0B;
  --msq-error: #EF4444;

  /* Layout */
  --msq-max-width: 1200px;
  --msq-nav-height: 72px;

  /* Typography scale */
  --msq-h1: clamp(2.5rem, 5vw, 4rem);
  --msq-h2: clamp(1.75rem, 3vw, 2.5rem);
  --msq-h3: clamp(1.25rem, 2vw, 1.625rem);
}

/* ─── Typography ─────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 { font-size: var(--msq-h1); }
h2 { font-size: var(--msq-h2); }
h3 { font-size: var(--msq-h3); }
h4 { font-size: 1.25rem; }

p { line-height: 1.7; }

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

code, kbd, samp, .msq-mono {
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  font-size: 0.9em;
}

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

ul, ol { list-style: none; }

/* ─── Layout helpers ─────────────────────────────────────────────── */
.msq-container {
  max-width: var(--msq-max-width);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}

.msq-section {
  padding: clamp(64px, 8vw, 120px) 0;
}

.msq-section--sm {
  padding: clamp(40px, 5vw, 72px) 0;
}

/* ─── Section background variants ───────────────────────────────── */
.msq-section--dark {
  background: var(--msq-bg-dark);
  color: var(--msq-fg-dark-primary);
}
.msq-section--dark-alt {
  background: var(--msq-bg-dark-alt);
  color: var(--msq-fg-dark-primary);
}
.msq-section--light {
  background: var(--msq-bg-light);
  color: var(--msq-fg-light-primary);
}
.msq-section--white {
  background: var(--msq-bg-white);
  color: var(--msq-fg-light-primary);
}

/* ─── Eyebrow / labels ───────────────────────────────────────────── */
.msq-eyebrow {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 1rem;
}

/* eyebrow color by container */
.msq-section--dark .msq-eyebrow,
.msq-section--dark-alt .msq-eyebrow {
  color: var(--msq-accent-crystal);
}
.msq-section--light .msq-eyebrow,
.msq-section--white .msq-eyebrow {
  color: var(--msq-accent-aa-on-light);
}

/* ─── Buttons ────────────────────────────────────────────────────── */
.msq-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.18s ease;
  text-decoration: none;
  white-space: nowrap;
}

/* Primary — works on any bg */
.msq-btn--primary {
  background: var(--msq-accent-crystal);
  color: var(--msq-bg-dark);
  border-color: var(--msq-accent-crystal);
}
.msq-btn--primary:hover {
  background: var(--msq-accent-crystal-dim);
  border-color: var(--msq-accent-crystal-dim);
  transform: translateY(-1px);
}

/* Outline on dark */
.msq-btn--outline-dark {
  background: transparent;
  color: var(--msq-fg-dark-primary);
  border-color: var(--msq-border-dark);
}
.msq-btn--outline-dark:hover {
  border-color: var(--msq-accent-crystal);
  color: var(--msq-accent-crystal);
}

/* Ghost on light */
.msq-btn--ghost-light {
  background: transparent;
  color: var(--msq-fg-light-primary);
  border-color: var(--msq-border-light);
}
.msq-btn--ghost-light:hover {
  border-color: var(--msq-accent-aa-on-light);
  color: var(--msq-accent-aa-on-light);
}

/* ─── Card base ──────────────────────────────────────────────────── */
.msq-card {
  border-radius: 10px;
  overflow: hidden;
}

.msq-card--dark {
  background: var(--msq-bg-dark-card);
  border: 1px solid var(--msq-border-dark);
  color: var(--msq-fg-dark-primary);
}

.msq-card--light {
  background: var(--msq-bg-white);
  border: 1px solid var(--msq-border-light);
  color: var(--msq-fg-light-primary);
}

/* ─── Grid helpers ───────────────────────────────────────────────── */
.msq-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.msq-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 900px) {
  .msq-grid-2, .msq-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ─── Section heading block ──────────────────────────────────────── */
.msq-section-head {
  max-width: 720px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.msq-section-head--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.msq-section-head h2 {
  margin-bottom: 1rem;
}

.msq-section-head p {
  font-size: 1.0625rem;
  max-width: 680px;
}

/* heading + paragraph colors by section theme */
.msq-section--dark .msq-section-head h2,
.msq-section--dark-alt .msq-section-head h2 {
  color: var(--msq-fg-dark-primary);
}

.msq-section--dark .msq-section-head p,
.msq-section--dark-alt .msq-section-head p {
  color: var(--msq-fg-dark-secondary);
}

.msq-section--light .msq-section-head h2,
.msq-section--white .msq-section-head h2 {
  color: var(--msq-fg-light-primary);
}

.msq-section--light .msq-section-head p,
.msq-section--white .msq-section-head p {
  color: var(--msq-fg-light-secondary);
}

/* ─── Tag/badge ──────────────────────────────────────────────────── */
.msq-tag {
  display: inline-block;
  padding: 0.2em 0.65em;
  border-radius: 4px;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(79, 195, 247, 0.15);
  color: var(--msq-accent-crystal);
  border: 1px solid rgba(79, 195, 247, 0.3);
}

.msq-section--light .msq-tag,
.msq-section--white .msq-tag {
  background: rgba(13, 126, 179, 0.1);
  color: var(--msq-accent-aa-on-light);
  border-color: rgba(13, 126, 179, 0.25);
}

/* ─── Utility ────────────────────────────────────────────────────── */
.msq-text-crystal { color: var(--msq-accent-crystal); }
.msq-text-amber { color: var(--msq-accent-amber); }
.msq-text-muted-dark { color: var(--msq-fg-dark-secondary); }
.msq-text-muted-light { color: var(--msq-fg-white-secondary); }

.msq-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;
}

/* fade-in animation with failsafe */
.msq-fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.msq-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* failsafe: reveal after 1.2s regardless of JS */
@keyframes msq-reveal {
  to { opacity: 1; transform: translateY(0); }
}
.msq-fade-in {
  animation: msq-reveal 0.5s ease 1.2s forwards;
}

/* ─── Horizontal rule / divider ──────────────────────────────────── */
.msq-divider {
  border: none;
  border-top: 1px solid var(--msq-border-dark);
  margin: 0;
}
.msq-divider--light {
  border-color: var(--msq-border-light);
}

/* ─── Focus styles ───────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--msq-accent-crystal);
  outline-offset: 3px;
}