/* FILE: assets/style.css
 *
 * One shared stylesheet for the whole marketing site, same "single
 * assets/style.css" convention as the app itself. Colors are defined as
 * custom properties up top so the palette can change in one place later
 * without hunting through the file — same blue as the app
 * (field.forepilot.app) for brand continuity, but a light background here
 * since this is the public-facing site, not the in-app tool.
 */

:root {
  --color-bg: #ffffff;
  --color-bg-alt: #f5f7fa;
  --color-text: #1a1d23;
  --color-text-muted: #5b6472;
  --color-border: #e1e5ea;
  --color-primary: #2f6fed;
  --color-primary-hover: #2559c2;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --container-width: 1080px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3 {
  line-height: 1.2;
  margin: 0 0 12px;
}

p {
  margin: 0 0 16px;
}

.site-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */

.site-header {
  border-bottom: 1px solid var(--color-border);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}

.site-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.site-logo img {
  display: block;
  height: 55px;
  width: auto;
}

.site-logo-tagline {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.site-logo:hover {
  text-decoration: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-nav a {
  color: var(--color-text-muted);
}

.site-nav-cta {
  color: #ffffff !important;
  background: var(--color-primary);
  padding: 8px 16px;
  border-radius: 6px;
}

.site-nav-cta:hover {
  background: var(--color-primary-hover);
  text-decoration: none;
}

/* Hero */

.hero {
  text-align: center;
  padding: 80px 20px;
}

.hero h1 {
  font-size: 40px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.hero-sub {
  color: var(--color-text-muted);
  font-size: 18px;
  max-width: 520px;
  margin: 0 auto 28px;
}

.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: 600;
}

.btn-primary {
  background: var(--color-primary);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  text-decoration: none;
}

/* Features */

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 40px 20px 80px;
}

.feature-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 24px;
}

.feature-card p {
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* Contact */

.contact {
  text-align: center;
  padding: 40px 20px 80px;
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--color-border);
}

.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  color: var(--color-text-muted);
  font-size: 14px;
}

/* Mobile */

@media (max-width: 700px) {
  /* Sep 19: on a real phone, the logo block + full nav row (Features,
     Contact, Log in) don't fit on one line — "Log in" was wrapping to two
     lines and getting clipped at the screen edge. Stacking the header
     (logo on top, nav below, both full width) instead of trying to keep
     them side by side fixes it cleanly without needing a hamburger menu
     for just three links. */
  .site-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .site-nav {
    width: 100%;
    gap: 16px;
    flex-wrap: wrap;
  }

  .site-nav-cta {
    white-space: nowrap;
  }

  .hero {
    padding: 48px 20px;
  }

  .hero h1 {
    font-size: 28px;
  }

  .features {
    grid-template-columns: 1fr;
  }

  .site-footer-inner {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}