/* ============================================================
   landing.css — flowlane landing page
   Replaces Tailwind CDN. Covers only the utility classes
   actually used on this page.
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #f7f8f7;
  color: #161c16;
  font-size: 15px;
  line-height: 1.6;
}

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

/* ── Layout helpers ───────────────────────────────────────── */
.flex         { display: flex; }
.grid         { display: grid; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-col     { flex-direction: column; }
.text-center  { text-align: center; }

/* ── Width / max-width ────────────────────────────────────── */
.w-full  { width: 100%; }
.max-w-6xl { max-width: 72rem; }  /* 1152px */
.max-w-3xl { max-width: 48rem; }  /* 768px  */
.max-w-2xl { max-width: 42rem; }  /* 672px  */
.mx-auto   { margin-left: auto; margin-right: auto; }

/* ── Spacing ──────────────────────────────────────────────── */
.h-16  { height: 4rem; }        /* 64px  */
.px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-8  { padding-top: 2rem;    padding-bottom: 2rem; }
.py-20 { padding-top: 5rem;    padding-bottom: 5rem; }
.pt-2  { padding-top: 0.5rem; }
.pt-20 { padding-top: 5rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-20 { padding-bottom: 5rem; }
.mb-12 { margin-bottom: 3rem; }

/* ── Gap ──────────────────────────────────────────────────── */
.gap-2\.5 { gap: 0.625rem; }
.gap-4    { gap: 1rem; }
.gap-6    { gap: 1.5rem; }
.gap-16   { gap: 4rem; }

/* ── Space-y (stacked children) ──────────────────────────── */
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* ── Grid columns (mobile-first → 1 col) ─────────────────── */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

/* ── Borders ──────────────────────────────────────────────── */
.border-b { border-bottom: 1px solid #eaeeea; }
.border-t { border-top:    1px solid #eaeeea; }

/* ── Sticky nav ───────────────────────────────────────────── */
.sticky { position: sticky; }
.top-0  { top: 0; }
.z-50   { z-index: 50; }

/* ── Nav background ───────────────────────────────────────── */
.bg-white\/90 {
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Custom button + feature icon ─────────────────────────── */
.hero-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #161c16; color: #fff;
  padding: 14px 28px; border-radius: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .3px;
  text-decoration: none;
  transition: background .15s;
}
.hero-btn:hover { background: #2a3a2c; }

.feature-icon {
  width: 40px; height: 40px;
  background: #e6efe8; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-caret { transition: transform .15s; }
.faq-item[open] .faq-caret { transform: rotate(90deg); }
.faq-item[open] summary { margin-bottom: 12px; }

/* ── Responsive — md breakpoint (768px) ───────────────────── */
@media (min-width: 768px) {
  .md\:px-16   { padding-left: 4rem; padding-right: 4rem; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:flex-row    { flex-direction: row; }
  .md\:text-left   { text-align: left; }
}