/* ─── LeasingIQ public landing page ───────────────────────────────────────────
   Standalone stylesheet for the unauthenticated page at /. Deliberately not
   coupled to style.css (which is built around the app shell) and deliberately
   free of any CDN dependency, so this page adds nothing to the CSP allowlist
   and needs no inline <style> or <script>.
   Palette mirrors the tokens in style.css so the two pages read as one product.
--------------------------------------------------------------------------- */

:root {
  --blue-primary:   #09549F;
  --blue-dark:      #13334C;
  --blue-teal:      #00698F;
  --blue-light:     #E8F0F7;
  --blue-xlight:    #F4F8FC;
  --green-accent:   #6BBE27;
  --surface:        #FFFFFF;
  --surface-alt:    #F7F8F9;
  --border:         #D1D5DB;
  --border-light:   #E5E7EB;
  --text:           #212529;
  --text-secondary: #495057;
  --text-muted:     #636363;
  --text-inverse:   #FFFFFF;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --measure: 1120px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--surface);
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 24px;
}

a { color: var(--blue-primary); }

/* ── Header ───────────────────────────────────────────────────────────────── */
.site-header {
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}
.brand {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--blue-dark);
  text-decoration: none;
}
.brand span { color: var(--blue-primary); }

.btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--blue-primary);
  color: var(--text-inverse);
}
.btn-primary:hover { background: var(--blue-teal); }
.btn-ghost {
  border-color: var(--border);
  color: var(--blue-primary);
  background: var(--surface);
}
.btn-ghost:hover { background: var(--blue-xlight); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(180deg, var(--blue-xlight) 0%, var(--surface) 100%);
  border-bottom: 1px solid var(--border-light);
  padding: 72px 0 64px;
}
.hero h1 {
  margin: 0 0 20px;
  font-size: 44px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--blue-dark);
  max-width: 20ch;
}
.hero .lede {
  margin: 0 0 32px;
  font-size: 20px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 62ch;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Sections ─────────────────────────────────────────────────────────────── */
section { padding: 64px 0; }
section.alt {
  background: var(--surface-alt);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

h2 {
  margin: 0 0 14px;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--blue-dark);
}
h3 {
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 1.35;
  color: var(--blue-dark);
}
p { margin: 0 0 18px; max-width: 72ch; }
.section-intro { color: var(--text-secondary); max-width: 68ch; }

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 36px;
}
.feature {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--green-accent);
  border-radius: 8px;
  padding: 26px 24px;
}
.feature p { font-size: 16px; margin-bottom: 0; color: var(--text-secondary); }

.who { margin-top: 28px; padding-left: 22px; }
.who li { margin-bottom: 10px; color: var(--text-secondary); max-width: 70ch; }

.faq { margin-top: 32px; }
.faq h3 { margin-top: 28px; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--blue-dark);
  color: #C9D6E2;
  padding: 40px 0;
  font-size: 15px;
}
.site-footer a { color: #FFFFFF; }
.site-footer p { max-width: 70ch; margin-bottom: 10px; }
.site-footer .footer-brand {
  font-weight: 700;
  color: var(--text-inverse);
  font-size: 17px;
  margin-bottom: 14px;
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding: 48px 0 40px; }
  .hero h1 { font-size: 32px; }
  .hero .lede { font-size: 18px; }
  h2 { font-size: 25px; }
  section { padding: 48px 0; }
}