/*
 * Vaidat Labs Landing — landing.css
 * Self-contained stylesheet. Tokens curated from src/css/tokens.css.
 *
 * Authority: src/css/tokens.css. If a value here drifts from tokens.css,
 * tokens.css wins. Do not invent ad-hoc values; add a token first.
 *
 * Section map:
 *   1. Tokens (:root)
 *   2. Reset + base
 *   3. Typography
 *   4. Layout primitives (container, gap utilities)
 *   5. Components (.vv-landing__*) — one block per section
 *   6. Responsive (media queries at the bottom)
 */

:root {
  /* Rhythm */
  --vv-rhythm: 2rem;            /* 24px */
  --vv-rhythm-half: 1rem;       /* 12px */
  --vv-rhythm-quarter: 0.5rem;  /* 6px */
  --vv-rhythm-double: 4rem;     /* 48px */
  --vv-rhythm-triple: 6rem;     /* 72px */

  /* Spacing */
  --vv-space-0: 0;
  --vv-space-1: 0.333rem;  /* 4px */
  --vv-space-2: 0.667rem;  /* 8px */
  --vv-space-3: 1rem;      /* 12px */
  --vv-space-4: 1.333rem;  /* 16px */
  --vv-space-5: 2rem;      /* 24px */
  --vv-space-6: 2.667rem;  /* 32px */
  --vv-space-8: 4rem;      /* 48px */
  --vv-space-10: 5.333rem; /* 64px */
  --vv-space-12: 8rem;     /* 96px */

  /* Surfaces (salmon/cream FT-inspired) */
  --vv-color-surface-primary: #fff8f6;
  --vv-color-surface-secondary: #f9f0ed;
  --vv-color-surface-tertiary: #f2e8e5;

  /* Warm grayscale (USWDS magic-number) */
  --vv-color-gray-5: #f5f0ee;
  --vv-color-gray-10: #e8e3e1;
  --vv-color-gray-20: #cbc5c3;
  --vv-color-gray-30: #afaaa8;
  --vv-color-gray-50: #76706e;
  --vv-color-gray-60: #635e5c;
  --vv-color-gray-70: #4a4544;
  --vv-color-gray-90: #1f1c1b;

  /* Text */
  --vv-color-text-primary: var(--vv-color-gray-90);
  --vv-color-text-secondary: var(--vv-color-gray-70);
  --vv-color-text-tertiary: var(--vv-color-gray-50);

  /* Borders */
  --vv-color-border-primary: var(--vv-color-gray-20);
  --vv-color-border-light: var(--vv-color-gray-10);

  /* Interactive (blue) */
  --vv-color-blue-5: #eff6fb;
  --vv-color-blue-50: #2378c3;
  --vv-color-blue-60: #0b4778;
  --vv-color-interactive: var(--vv-color-blue-50);
  --vv-color-interactive-hover: var(--vv-color-blue-60);
  --vv-color-interactive-bg: var(--vv-color-blue-5);
  --vv-color-text-on-interactive: #ffffff;

  /* Typography */
  --vv-font-family-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --vv-font-family-mono: "IBM Plex Mono", "SF Mono", Consolas, Menlo, monospace;

  --vv-font-size-xs: 0.853rem;    /* 10.24px */
  --vv-font-size-sm: 1.067rem;    /* 12.8px */
  --vv-font-size-base: 1.333rem;  /* 16px */
  --vv-font-size-md: 1.667rem;    /* 20px */
  --vv-font-size-lg: 2.083rem;    /* 25px */
  --vv-font-size-xl: 2.604rem;    /* 31.25px */
  --vv-font-size-2xl: 3.255rem;   /* 39px */

  --vv-font-weight-normal: 400;
  --vv-font-weight-medium: 500;
  --vv-font-weight-semibold: 600;
  --vv-font-weight-bold: 700;

  /* Radius */
  --vv-radius-sm: 0.333rem;  /* 4px */
  --vv-radius-md: 0.5rem;    /* 6px */
  --vv-radius-lg: 0.667rem;  /* 8px */

  /* Shadow */
  --vv-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --vv-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --vv-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Transitions */
  --vv-transition-fast: 150ms ease;
  --vv-transition-normal: 250ms ease;

  /* Layout */
  --vv-max-width-content: 96rem;   /* 1152px */
  --vv-max-width-prose: 60ch;
  --vv-z-sticky: 200;
}

/* ─── Reset + base ───────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 75%; /* 1rem = 12px → 2rem = 24px = 1 baseline rhythm line */
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--vv-color-surface-primary);
  color: var(--vv-color-text-primary);
  font-family: var(--vv-font-family-sans);
  font-size: var(--vv-font-size-base);
  font-weight: var(--vv-font-weight-normal);
  line-height: 1.5;          /* 24px on 16px text — snaps to grid */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--vv-color-interactive);
  text-decoration: none;
  transition: color var(--vv-transition-fast);
}

a:hover {
  color: var(--vv-color-interactive-hover);
}

button, input {
  font: inherit;
  color: inherit;
}

/* ─── Typography (rhythm-aware line-heights) ─────────────── */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--vv-font-family-sans);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
}

h1 { font-size: var(--vv-font-size-2xl); line-height: 1.231; } /* 48px */
h2 { font-size: var(--vv-font-size-xl);  line-height: 1.152; } /* 36px */
h3 { font-size: var(--vv-font-size-lg);  line-height: 1.44;  } /* 36px */
h4 { font-size: var(--vv-font-size-md);  line-height: 1.2;   } /* 24px */

p {
  margin: 0;
  font-size: var(--vv-font-size-base);
  line-height: 1.5;
  color: var(--vv-color-text-secondary);
}

/* ─── Layout primitives ──────────────────────────────────── */

.vv-landing__container {
  max-width: var(--vv-max-width-content);
  margin: 0 auto;
  padding-left: var(--vv-space-5);
  padding-right: var(--vv-space-5);
}

/* Visually hidden but accessible to screen readers */
.vv-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ═══════════════════════════════════════════════════════════
   Nav bar
   ═══════════════════════════════════════════════════════════ */

.vv-landing__nav {
  position: sticky;
  top: 0;
  z-index: var(--vv-z-sticky);
  background: var(--vv-color-surface-primary);
  box-shadow: inset 0 -1px 0 var(--vv-color-border-light);
}

.vv-landing__nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vv-space-5);
  padding-top: var(--vv-rhythm-half);
  padding-bottom: var(--vv-rhythm-half);
  min-height: var(--vv-rhythm-double);
}

.vv-landing__nav-logo {
  font-size: var(--vv-font-size-md);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-primary);
  letter-spacing: -0.01em;
}

.vv-landing__nav-links {
  display: flex;
  align-items: center;
  gap: var(--vv-space-5);
}

.vv-landing__nav-link {
  font-size: var(--vv-font-size-base);
  color: var(--vv-color-text-secondary);
  font-weight: var(--vv-font-weight-medium);
}

.vv-landing__nav-link:hover {
  color: var(--vv-color-text-primary);
}

/* CTA button (used in nav and elsewhere) */
.vv-landing__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--vv-space-2);
  padding: var(--vv-rhythm-half) var(--vv-space-4);
  background: var(--vv-color-interactive);
  color: var(--vv-color-text-on-interactive);
  font-weight: var(--vv-font-weight-medium);
  font-size: var(--vv-font-size-base);
  line-height: 1.5;
  border-radius: var(--vv-radius-md);
  transition: background-color var(--vv-transition-fast);
}

.vv-landing__cta:hover {
  background: var(--vv-color-interactive-hover);
  color: var(--vv-color-text-on-interactive);
}

.vv-landing__cta:focus-visible {
  outline: 2px solid var(--vv-color-interactive);
  outline-offset: 2px;
}

.vv-landing__cta--small {
  padding: var(--vv-space-2) var(--vv-space-3);
  font-size: var(--vv-font-size-sm);
}

/* ═══════════════════════════════════════════════════════════
   Hero
   ═══════════════════════════════════════════════════════════ */

.vv-landing__hero {
  background: var(--vv-color-surface-primary);
  padding-top: var(--vv-space-12);   /* 96px = 4 rhythm */
  padding-bottom: var(--vv-space-12);
}

.vv-landing__hero-inner {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-5);             /* 24px = 1 rhythm between blocks */
  max-width: 50rem;
}

.vv-landing__hero-title {
  font-size: var(--vv-font-size-2xl);
  line-height: 1.231;
  letter-spacing: -0.02em;
}

.vv-landing__hero-subtitle {
  font-size: var(--vv-font-size-md);
  line-height: 1.2;                  /* 24px on 20px text */
  color: var(--vv-color-text-secondary);
  max-width: var(--vv-max-width-prose);
}

.vv-landing__hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vv-space-4);
  margin-top: var(--vv-rhythm);      /* 24px breathing room before buttons */
}

.vv-landing__hero-secondary {
  font-size: var(--vv-font-size-base);
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-interactive);
  padding: var(--vv-rhythm-half) 0;
}

.vv-landing__hero-secondary:hover {
  color: var(--vv-color-interactive-hover);
}

/* ═══════════════════════════════════════════════════════════
   Trust strip
   ═══════════════════════════════════════════════════════════ */

.vv-landing__trust-strip {
  background: var(--vv-color-surface-tertiary);
  padding-top: var(--vv-space-8);    /* 48px */
  padding-bottom: var(--vv-space-8);
}

.vv-landing__trust-strip-text {
  font-size: var(--vv-font-size-md);
  line-height: 1.2;                  /* 24px on 20px text */
  color: var(--vv-color-text-primary);
  max-width: 70ch;
  margin: 0 auto;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   Feature blocks (1-3 image-led, alternating)
   ═══════════════════════════════════════════════════════════ */

.vv-landing__features {
  padding-top: var(--vv-space-12);  /* 96px */
  padding-bottom: var(--vv-space-12);
}

.vv-landing__feature {
  padding-top: var(--vv-space-8);   /* 48px between feature articles */
  padding-bottom: var(--vv-space-8);
}

.vv-landing__feature-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vv-space-12);          /* 96px between text and image */
  align-items: center;
}

/* Reverse modifier: image on left, text on right */
.vv-landing__feature--reverse .vv-landing__feature-text {
  order: 2;
}

.vv-landing__feature--reverse .vv-landing__feature-image {
  order: 1;
}

.vv-landing__feature-text {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-5);            /* 24px between paragraphs */
}

.vv-landing__feature-eyebrow {
  font-size: var(--vv-font-size-sm);
  font-weight: var(--vv-font-weight-semibold);
  color: var(--vv-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
  line-height: 1.875;                /* 24px on 12.8px text */
}

.vv-landing__feature-title {
  font-size: var(--vv-font-size-xl);
  line-height: 1.152;                /* 36px */
  letter-spacing: -0.01em;
  color: var(--vv-color-text-primary);
}

.vv-landing__feature-body {
  font-size: var(--vv-font-size-base);
  line-height: 1.5;
  color: var(--vv-color-text-secondary);
  max-width: var(--vv-max-width-prose);
}

.vv-landing__feature-image img {
  border-radius: var(--vv-radius-lg);
  box-shadow: var(--vv-shadow-md);
  background: var(--vv-color-surface-tertiary);
  width: 100%;
  height: auto;
}

/* ─── Feature 4: Principles ─────────────────────────────── */

.vv-landing__principles {
  background: var(--vv-color-surface-secondary);
  padding-top: var(--vv-space-12);
  padding-bottom: var(--vv-space-12);
  margin-top: var(--vv-space-8);     /* extra breathing room from preceding article */
}

.vv-landing__principles-inner {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-8);
}

.vv-landing__principles-header {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-3);
  max-width: 50rem;
}

.vv-landing__principles-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--vv-space-8);            /* 48px gap between cards */
  margin: 0;
  padding: 0;
  list-style: none;
}

.vv-landing__principle {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-3);
  padding: var(--vv-space-5);
  background: var(--vv-color-surface-primary);
  border-radius: var(--vv-radius-lg);
  box-shadow: var(--vv-shadow-sm);
}

.vv-landing__principle-title {
  font-size: var(--vv-font-size-md);
  line-height: 1.2;                  /* 24px on 20px */
  font-weight: var(--vv-font-weight-medium);
  color: var(--vv-color-text-primary);
}

.vv-landing__principle-body {
  font-size: var(--vv-font-size-base);
  line-height: 1.5;
  color: var(--vv-color-text-secondary);
}

/* ═══════════════════════════════════════════════════════════
   About / Founder
   ═══════════════════════════════════════════════════════════ */

.vv-landing__about {
  padding-top: var(--vv-space-12);
  padding-bottom: var(--vv-space-12);
}

.vv-landing__about-inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--vv-space-12);
  align-items: start;
}

.vv-landing__about-photo img {
  width: 100%;
  height: auto;
  border-radius: var(--vv-radius-lg);
  box-shadow: var(--vv-shadow-md);
}

.vv-landing__about-text {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-5);
}

.vv-landing__about-name {
  font-size: var(--vv-font-size-lg);
  line-height: 1.44;                /* 36px */
  font-weight: var(--vv-font-weight-semibold);
  margin: 0;
}

.vv-landing__about-role {
  font-size: var(--vv-font-size-base);
  color: var(--vv-color-text-tertiary);
  font-style: italic;
  margin: 0;
}

.vv-landing__about-body {
  font-size: var(--vv-font-size-base);
  line-height: 1.5;
  color: var(--vv-color-text-secondary);
  max-width: var(--vv-max-width-prose);
}

/* ═══════════════════════════════════════════════════════════
   Final CTA + email form
   ═══════════════════════════════════════════════════════════ */

.vv-landing__final-cta {
  background: var(--vv-color-surface-secondary);
  padding-top: var(--vv-space-12);
  padding-bottom: var(--vv-space-12);
}

.vv-landing__final-cta-inner {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-5);
  max-width: 50rem;
  text-align: center;
  align-items: center;
}

.vv-landing__final-cta-title {
  font-size: var(--vv-font-size-xl);
  line-height: 1.152;
}

.vv-landing__final-cta-body {
  font-size: var(--vv-font-size-base);
  line-height: 1.5;
  color: var(--vv-color-text-secondary);
}

.vv-landing__final-cta-button {
  margin-top: var(--vv-rhythm);
}

.vv-landing__notify {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-3);
  margin-top: var(--vv-space-8);
  padding-top: var(--vv-space-5);
  width: 100%;
  max-width: 28rem;
  box-shadow: inset 0 1px 0 var(--vv-color-border-light);
}

.vv-landing__notify-prompt {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-tertiary);
  margin: 0;
}

.vv-landing__email-form {
  display: flex;
  gap: var(--vv-space-3);
  align-items: stretch;
}

.vv-landing__email-input {
  flex: 1;
  padding: var(--vv-space-3) var(--vv-space-4);
  border: 1px solid var(--vv-color-border-primary);
  border-radius: var(--vv-radius-md);
  background: var(--vv-color-surface-primary);
  color: var(--vv-color-text-primary);
  font-size: var(--vv-font-size-base);
  line-height: 1.5;
}

.vv-landing__email-input:focus {
  outline: none;
  border-color: var(--vv-color-interactive);
  box-shadow: 0 0 0 3px var(--vv-color-interactive-bg);
}

.vv-landing__notify-status {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  min-height: 1.875rem;              /* 24px reserved space, prevents layout shift */
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════════════════════ */

.vv-landing__footer {
  background: var(--vv-color-surface-tertiary);
  padding-top: var(--vv-space-8);
  padding-bottom: var(--vv-space-8);
  box-shadow: inset 0 1px 0 var(--vv-color-border-light);
}

.vv-landing__footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-3);
  align-items: center;
  text-align: center;
}

.vv-landing__footer-line {
  font-size: var(--vv-font-size-sm);
  color: var(--vv-color-text-secondary);
  margin: 0;
  line-height: 1.875;
}

.vv-landing__footer-copyright {
  color: var(--vv-color-text-tertiary);
}

/* ═══════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════ */

/* Tablet: under 1024px — narrower feature gap, condensed nav */
@media (max-width: 1024px) {
  .vv-landing__feature-inner {
    gap: var(--vv-space-8);            /* 96px → 48px */
  }

  .vv-landing__about-inner {
    gap: var(--vv-space-8);
  }

  .vv-landing__nav-link {
    font-size: var(--vv-font-size-sm);
  }
}

/* Mobile: under 640px — stack everything to single column */
@media (max-width: 640px) {
  /* Sections collapse padding */
  .vv-landing__hero,
  .vv-landing__features,
  .vv-landing__about,
  .vv-landing__final-cta,
  .vv-landing__principles {
    padding-top: var(--vv-space-8);
    padding-bottom: var(--vv-space-8);
  }

  /* Hero typography scales down */
  .vv-landing__hero-title {
    font-size: var(--vv-font-size-xl);
    line-height: 1.152;
  }

  .vv-landing__hero-subtitle {
    font-size: var(--vv-font-size-base);
    line-height: 1.5;
  }

  /* Hero CTAs stack */
  .vv-landing__hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .vv-landing__hero-actions .vv-landing__cta {
    justify-content: center;
  }

  /* Nav: hide anchor links on mobile, keep logo + primary CTA */
  .vv-landing__nav-link {
    display: none;
  }

  /* Feature blocks: stack image above text on mobile, regardless of desktop variant */
  .vv-landing__feature-inner {
    grid-template-columns: 1fr;
    gap: var(--vv-space-5);
  }

  .vv-landing__feature-text,
  .vv-landing__feature--reverse .vv-landing__feature-text {
    order: 2;
  }

  .vv-landing__feature-image,
  .vv-landing__feature--reverse .vv-landing__feature-image {
    order: 1;
  }

  .vv-landing__feature-title {
    font-size: var(--vv-font-size-lg);
    line-height: 1.44;
  }

  /* Principles: 2 cols → 1 col */
  .vv-landing__principles-list {
    grid-template-columns: 1fr;
  }

  /* About: photo above text, single col */
  .vv-landing__about-inner {
    grid-template-columns: 1fr;
    gap: var(--vv-space-5);
  }

  /* Email form: stack input + button */
  .vv-landing__email-form {
    flex-direction: column;
  }
}