/* Marketing/landing page styles — reuses the app's own CSS variables
   (site.css) for visual consistency, adds the layout-specific classes
   this page needs that the internal dashboard CSS doesn't have. */

.marketing-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px; background: #fff; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.marketing-nav .links { display: flex; gap: 24px; font-size: 13.5px; }
.marketing-nav .links a { text-decoration: none; }
.marketing-nav .links a:hover { color: var(--teal); }

.marketing-hero {
  position: relative; overflow: hidden; background: var(--ink); color: #fff;
  padding: 72px 32px 84px; text-align: center;
}
.marketing-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--gold); background: rgba(217,164,65,0.12); border: 1px solid rgba(217,164,65,0.3);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.marketing-hero h1 { font-family: 'Sora', sans-serif; font-size: 38px; max-width: 680px; margin: 0 auto 16px; line-height: 1.25; }
.marketing-hero .lede { font-size: 15.5px; color: #cfe0da; max-width: 560px; margin: 0 auto 30px; line-height: 1.6; }
.marketing-hero .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.section { padding: 64px 32px; max-width: 1100px; margin: 0 auto; }
.section h2 { font-family: 'Sora', sans-serif; font-size: 26px; text-align: center; margin-bottom: 8px; }
.section .lede { text-align: center; color: var(--text-secondary); max-width: 520px; margin: 0 auto 40px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.feature-card .icon-wrap {
  width: 40px; height: 40px; border-radius: 10px; background: var(--teal-light); color: var(--teal);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.feature-card .icon-wrap svg { width: 20px; height: 20px; }
.feature-card h3 { font-size: 15.5px; margin: 0 0 6px; }
.feature-card p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; margin: 0; }

.site-footer { background: var(--ink); color: #b9c9c3; padding: 48px 32px 24px; }
.footer-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer-brand .name { font-family: 'Sora', sans-serif; font-weight: 600; color: #fff; }
.footer-brand .name span { color: var(--gold); }
.footer-col h4 { color: #fff; font-size: 13px; margin: 0 0 12px; }
.footer-col a { display: block; color: #b9c9c3; text-decoration: none; font-size: 13px; margin-bottom: 8px; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  max-width: 1100px; margin: 32px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; font-size: 12px; color: #7f9089; flex-wrap: wrap; gap: 8px;
}

@media (max-width: 900px) {
  .marketing-nav .links { display: none; }
  .grid-3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}