/* Plaid marketing landing page — reuses tokens/buttons from style.css,
   adds only what the landing sections need. */

/* Flat #0a0a0c read as too stark — a faint top-down radial tint gives the
   page some depth without turning it into a visibly different color at a
   glance. Scoped to this page only (landing.css isn't loaded elsewhere). */
body {
  background:
    radial-gradient(ellipse 1100px 600px at 50% -8%, #141926 0%, rgba(20,25,38,0) 60%),
    #0a0b0e;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 15px 32px;
  background: #0a0b0e;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.nav.scrolled {
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  border-bottom-color: var(--border);
}
.nav .brand { justify-self: start; }
.nav-links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  transition: color .15s ease;
}
.nav-links a:hover { color: var(--text); }
.nav-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.nav-actions .btn { padding: 8px 16px; font-size: 13.5px; }
.nav-actions::before {
  content: '';
  width: 1px;
  height: 20px;
  background: var(--border);
  margin-right: 4px;
}

@media (max-width: 860px) {
  .nav { grid-template-columns: auto 1fr; }
  .nav-links { display: none; }
}

.section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 88px 24px;
  position: relative;
}
.section.glow::before {
  content: '';
  position: absolute;
  top: 0; right: -10%;
  width: 600px; height: 400px;
  background: radial-gradient(ellipse at center, rgba(59,130,246,.08) 0%, rgba(59,130,246,0) 70%);
  pointer-events: none;
  z-index: -1;
}
.section-eyebrow {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.section-title { font-size: 32px; font-weight: 800; margin: 0 0 14px; letter-spacing: -.01em; }
.section-sub { color: var(--text-muted); font-size: 16px; max-width: 640px; margin: 0 0 44px; line-height: 1.6; }

.hero {
  max-width: 880px;
  margin: 0 auto;
  padding: 110px 24px 90px;
  text-align: center;
  position: relative;
}
.hero::before {
  content: '';
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse at center, rgba(59,130,246,.16) 0%, rgba(59,130,246,0) 70%);
  pointer-events: none;
  z-index: -1;
}
.hero h1 {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.08;
  margin: 20px 0 20px;
}
.hero p {
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1.65;
  max-width: 620px;
  margin: 0 auto 34px;
}
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-actions .btn { padding: 13px 26px; font-size: 15px; }
.hero-actions .btn-primary {
  box-shadow: 0 4px 24px var(--accent-glow);
}
.hero-actions .btn-primary:hover { transform: translateY(-1px); }

/* A 6th card in a wrapping grid leaves an uneven, over-stretched last row
   (2 cards forced to fill the same row an even 3-up split would use) — a
   fixed-width horizontal scroller (~4 cards visible, snap-scroll to the
   rest) reads cleaner than that at every width instead of just some. */
.feature-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  margin-bottom: -10px;
}
.feature-grid::-webkit-scrollbar { height: 6px; }
.feature-grid::-webkit-scrollbar-track { background: transparent; }
.feature-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.feature-grid::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.feature-card {
  flex: 0 0 240px;
  scroll-snap-align: start;
  background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 18px rgba(0,0,0,.28);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.feature-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 26px rgba(0,0,0,.4);
}
.feature-card:hover .icon { background: var(--accent); color: #fff; }
.feature-card .icon { transition: background .15s ease, color .15s ease; }
.feature-card .icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--accent-glow);
  background: rgba(59,130,246,.14);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.feature-card .icon svg { width: 19px; height: 19px; }
.feature-card h3 { font-size: 15.5px; margin: 0 0 6px; }
.feature-card p { color: var(--text-muted); font-size: 13.5px; line-height: 1.55; margin: 0; }

.trust-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 46px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}
.trust-item svg { width: 16px; height: 16px; color: var(--ok); flex-shrink: 0; }

.support-banner {
  background: linear-gradient(135deg, rgba(59,130,246,.12), var(--surface) 55%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  align-items: center;
}
.support-banner .support-live {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ok); font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px;
}
.support-banner .support-live .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 rgba(47,217,122,.6);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(47,217,122,.55); }
  70% { box-shadow: 0 0 0 8px rgba(47,217,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,217,122,0); }
}
.support-banner h2 { font-size: 26px; margin: 0 0 12px; }
.support-banner > div:first-child > p { color: var(--text-muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 20px; max-width: 480px; }
.support-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 12px; }
.support-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.support-list li svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.support-visual {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
}
.support-visual .icon-wrap {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 14px;
  background: rgba(47,217,122,.14);
  color: var(--ok);
  display: flex; align-items: center; justify-content: center;
}
.support-visual .icon-wrap svg { width: 28px; height: 28px; }
.support-visual h4 { font-size: 16px; margin: 0 0 6px; }
.support-visual p { color: var(--text-muted); font-size: 13px; margin: 0 0 18px; }

@media (max-width: 760px) {
  .support-banner { grid-template-columns: 1fr; }
}

.vehicle-groups { display: flex; flex-direction: column; gap: 14px; }
.vehicle-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.vehicle-group .tag {
  flex-shrink: 0;
  width: 190px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.5;
}
.vehicle-group ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 220px; }
.vehicle-group li { font-size: 14px; color: var(--text); }
.vehicle-group .note { color: var(--text-muted); font-size: 12px; margin-top: 8px; }

.setup-help-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 13.5px;
}
.setup-help-note svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.setup-help-note a { color: var(--accent); font-weight: 600; text-decoration: none; }
.setup-help-note a:hover { text-decoration: underline; }

.setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.setup-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
.setup-card h3 { font-size: 17px; margin: 0 0 4px; }
.setup-card .setup-tag { color: var(--text-muted); font-size: 12.5px; margin: 0 0 16px; }
.setup-card ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.setup-card li { font-size: 13.5px; color: var(--text); line-height: 1.5; }
.setup-card li a { color: var(--accent); font-weight: 700; text-decoration: none; }
.setup-card li a:hover { text-decoration: underline; }
.setup-card li code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: monospace;
  font-size: 12.5px;
  padding: 2px 6px;
  border-radius: 5px;
}
.setup-card .divider { border-top: 1px solid var(--border); margin: 18px 0; padding-top: 16px; font-size: 12.5px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: center;
  transition: border-color .15s ease, transform .15s ease;
}
.price-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.price-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); position: relative; }
.price-card .price-label { font-size: 12.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.price-card .price-amount { font-size: 34px; font-weight: 800; margin: 10px 0 18px; }
.price-card .price-amount span { font-size: 14px; color: var(--text-muted); font-weight: 600; }
.price-card .btn { width: 100%; }
.price-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; letter-spacing: .03em; text-transform: uppercase;
}

.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; color: var(--text);
  padding: 18px 22px; font-size: 14.5px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-radius: 0;
}
.faq-q .chev { transition: transform .15s ease; flex-shrink: 0; color: var(--text-muted); }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .2s ease; }
.faq-item.open .faq-a { max-height: 200px; }
.faq-a p { margin: 0 22px 18px; color: var(--text-muted); font-size: 13.5px; line-height: 1.6; }

.landing-cta {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 56px 24px;
}
.landing-cta h2 { font-size: 26px; margin: 0 0 10px; }
.landing-cta p { color: var(--text-muted); margin: 0 0 26px; }

.landing-footer {
  border-top: 1px solid var(--border);
  padding: 32px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 1080px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 13px;
}
.landing-footer a { color: var(--text-muted); text-decoration: none; }
.landing-footer a:hover { color: var(--text); }
.footer-links { display: flex; gap: 20px; }

/* Scroll-reveal: sections start slightly lower + transparent, and settle
   into place once they cross into view (toggled by IntersectionObserver in
   index.html's inline script). Falls back to fully visible if JS never
   attaches the .visible class, so content is never actually hidden. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 640px) {
  .hero h1 { font-size: 34px; }
  .hero p { font-size: 15.5px; }
  .section { padding: 60px 20px; }
  .section-title { font-size: 26px; }
  .vehicle-group .tag { width: 100%; }
  .nav { padding: 14px 18px; }
}