/* landing.css — public marketing/legal pages (server-rendered, no SPA).
 * Visual system: docs/salix-design-template.md.
 * Signatures: 8px gradient top strip, floating rounded navbar, dark feature
 * sections, 16px cards with restrained lift, display type with heavy negative
 * tracking. Colours come from tokens, so dark mode follows automatically.
 */

.landing {
  background: var(--color-bg-page);
  color: var(--color-ink-body);
  padding-top: 8px;              /* clears the fixed brand strip */
}

/* ── Fixed brand signature strip ────────────────────────────── */
.brand-strip {
  position: fixed; top: 0; left: 0; right: 0;
  height: 8px; z-index: 100;
  background: var(--gradient-brand);
}

/* ── Floating rounded navbar ────────────────────────────────── */
.landing__nav-wrap {
  position: sticky; top: 8px; z-index: 90;
  padding: 16px 24px 0;
}
.landing__nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  max-width: var(--container-max); margin: 0 auto;
  padding: 10px 12px 10px 20px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pill);
}
.landing__brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600; font-size: var(--fs-lead);
  letter-spacing: var(--tracking-h4);
  color: var(--color-ink-primary);
}
.landing__brand i { color: var(--brand-primary); font-size: 22px; }

.landing__nav-links { display: flex; align-items: center; gap: var(--space-1); }
/* ≥44px hit area — the Salix spec flags the source's ~24px as an a11y defect. */
.landing__nav-links a {
  display: inline-flex; align-items: center;
  height: 44px; padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--color-ink-body);
}
.landing__nav-links a:hover { background: var(--color-surface-hover); color: var(--color-ink-primary); }
.landing__nav-links a.is-active { color: var(--color-ink-primary); }

.landing__nav-actions { display: flex; align-items: center; gap: var(--space-2); }
.landing__theme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-round);
  border: none; background: transparent;
  color: var(--color-ink-body); cursor: pointer;
}
.landing__theme:hover { background: var(--color-surface-hover); color: var(--color-ink-primary); }
.landing__theme i { font-size: 18px; }

/* ── Hero ───────────────────────────────────────────────────── */
.landing__hero {
  max-width: 880px; margin: 0 auto; text-align: center;
  padding: 88px 24px 64px;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-6);
}
.landing__hero h1 { margin: 0; max-width: 16ch; }
.landing__lede {
  font-size: var(--fs-lead); color: var(--color-ink-body);
  line-height: 1.7; margin: 0; max-width: 62ch;
}
.landing__cta { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* ── Feature grid ───────────────────────────────────────────── */
.landing__features {
  max-width: var(--container-max); margin: 0 auto;
  padding: 40px 24px 88px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
}
.landing__feature {
  background: var(--color-surface-warm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.landing__feature i {
  font-size: 24px; color: var(--brand-primary); display: block; margin-bottom: var(--space-4);
}
.landing__feature h3 {
  font-size: var(--fs-title); line-height: 1.4;
  letter-spacing: var(--tracking-h4); margin: 0 0 var(--space-2);
}
.landing__feature p { color: var(--color-ink-body); margin: 0; }

/* ── Dark feature section (Salix signature) ─────────────────── */
.section-dark {
  background: var(--color-bg-dark);
  color: var(--color-ink-white);
  padding: 88px 24px;
  margin: 0 0 8px;
}
/* In dark mode a near-black band would vanish against a near-black page, so the
   section reads as ELEVATED instead of darker — it still has to register as a
   distinct band. */
:root[data-theme="dark"] .section-dark {
  background: var(--color-surface-warm-2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.section-dark__inner {
  max-width: var(--container-max); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-6);
  text-align: center;
}
.section-dark h2 { color: #fff; margin: 0; max-width: 20ch; }
.section-dark p { color: rgba(255, 255, 255, 0.72); max-width: 60ch; margin: 0; }
.section-dark .landing__features { padding: 24px 0 0; }
.section-dark .landing__feature {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}
.section-dark .landing__feature h3 { color: #fff; }
.section-dark .landing__feature p { color: rgba(255, 255, 255, 0.66); }
.section-dark .landing__feature i { color: var(--color-accent-cyan); }
.section-dark .eyebrow { background: rgba(255, 255, 255, 0.10); color: #fff; box-shadow: none; }

/* ── CTA band ───────────────────────────────────────────────── */
.landing__band {
  background: var(--color-surface-warm);
  text-align: center; padding: 88px 24px;
}
.landing__band h2 { margin: 0 auto var(--space-6); max-width: 20ch; }

/* ── Footer ─────────────────────────────────────────────────── */
.landing__footer {
  max-width: var(--container-max); margin: 0 auto;
  padding: 40px 24px; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); color: var(--color-ink-muted); font-size: var(--fs-sm);
  flex-wrap: wrap; border-top: 1px solid var(--color-border);
}
.landing__footer-links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.landing__footer-links a { color: var(--color-ink-muted); }
.landing__footer-links a:hover { color: var(--color-ink-primary); }
.landing__social { display: flex; gap: var(--space-3); }
.landing__social a { color: var(--color-ink-muted); font-size: 20px; }
.landing__social a:hover { color: var(--color-ink-primary); }

/* ── Inner-page hero ────────────────────────────────────────── */
.page-hero {
  max-width: 820px; margin: 0 auto; text-align: center;
  padding: 72px 24px 32px;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
}
.page-hero--tight { padding-bottom: 16px; }
.page-hero h1 { font-size: var(--fs-h2); letter-spacing: var(--tracking-h2); margin: 0; }

/* ── Feature groups (features page) ─────────────────────────── */
.feature-group { max-width: var(--container-max); margin: 0 auto; padding: 32px 24px 0; }
.feature-group > h2 {
  font-size: var(--fs-title); letter-spacing: var(--tracking-h4);
  color: var(--color-ink-primary); margin: 0;
}
.feature-group .landing__features { padding: 24px 0 24px; }
.section-dark .feature-group { padding: 0; }

/* ── Prose (about, legal) ───────────────────────────────────── */
.prose { max-width: 720px; margin: 0 auto; padding: 24px 24px 72px; }
.prose h2 {
  font-size: var(--fs-title); letter-spacing: var(--tracking-h4);
  margin: 40px 0 var(--space-3);
}
.prose p, .prose li { color: var(--color-ink-body); }
.prose p { margin: 0 0 var(--space-4); }
.prose ul { padding-left: 20px; margin: var(--space-3) 0 var(--space-4); }
.prose li { margin: var(--space-2) 0; }
.prose a { color: var(--brand-primary); text-decoration: underline; }
.legal-note {
  background: var(--color-surface-warm); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: var(--space-6);
  font-size: var(--fs-sm); color: var(--color-ink-muted);
}

/* ── Pricing ────────────────────────────────────────────────── */
.pricing {
  max-width: 940px; margin: 0 auto; padding: 32px 24px 88px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6);
  align-items: start;
}
.pricing__card {
  position: relative;
  background: var(--color-surface-warm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px 40px;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.pricing__card.is-featured {
  background: var(--color-surface-card);
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-pill);
}
.pricing__badge { position: absolute; top: 20px; right: 24px; }
.pricing__name { font-size: var(--fs-sm); font-weight: 500; color: var(--color-ink-muted); }
.pricing__price {
  font-family: var(--font-display);
  font-size: var(--fs-h3); font-weight: 500;
  line-height: 1.2; letter-spacing: var(--tracking-h3);
  color: var(--color-ink-primary);
}
.pricing__blurb { color: var(--color-ink-body); margin: 0; }
.pricing__list {
  list-style: none; padding: 0; margin: var(--space-3) 0 var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3); flex: 1;
}
.pricing__list li { display: flex; align-items: flex-start; gap: var(--space-2); }
.pricing__list i { color: var(--brand-primary); margin-top: 4px; }

/* ── FAQ (uses .accordion from components.css) ──────────────── */
.faq { max-width: 720px; margin: 0 auto; padding: 24px 24px 88px; }

/* ── Contact ────────────────────────────────────────────────── */
.contact { max-width: 560px; margin: 0 auto; padding: 24px 24px 88px; }
.contact .textarea { min-height: 185px; }   /* Salix field spec */
.contact__ok {
  display: flex; align-items: flex-start; gap: var(--space-3);
  background: rgba(27, 135, 63, 0.1); border: 1px solid rgba(27, 135, 63, 0.25);
  border-radius: var(--radius-lg); padding: 24px; color: var(--color-ink-primary);
}
.contact__ok i { font-size: 28px; color: var(--color-success); }
.contact__ok p { margin: 4px 0 0; color: var(--color-ink-body); }
.contact__err {
  background: rgba(194, 0, 29, 0.08); border: 1px solid rgba(194, 0, 29, 0.25);
  border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: var(--space-4);
  color: var(--color-danger); font-size: var(--fs-sm);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .landing__features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .pricing { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .landing__nav-links { display: none; }
  .landing__nav { padding: 8px 10px 8px 16px; }
}
@media (max-width: 560px) {
  .landing__hero { padding: 56px 20px 40px; }
  .landing__hero h1 { font-size: 36px; letter-spacing: -1.5px; }
  .landing__lede { font-size: var(--fs-body); }
  .landing__features { grid-template-columns: 1fr; padding: 32px 20px 64px; }
  .landing__feature, .pricing__card { padding: 24px; }
  .section-dark, .landing__band { padding: 64px 20px; }
  .page-hero h1 { font-size: 28px; letter-spacing: -1px; }
}