/* Landing page layout — implements Landing.dc.html from the Claude Design
   project on the Organic system + Sea palette. Values mirror the design;
   breakpoints are added here (the design canvas was desktop-only). */

.container { max-width: 1440px; margin: 0 auto; }

/* — top navigation — */
.site-nav { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-4) var(--space-8); }
.site-nav .nav-brand { font-size: 26px; margin-right: 0; }
.nav-links { display: flex; gap: var(--space-4); flex: 1; font-size: 14px; }
.nav-links a { text-decoration: none; color: var(--color-text); }
.nav-links a:hover { color: var(--color-accent); }
.nav-cta { display: flex; gap: var(--space-2); align-items: center; }
.brand-dot { color: var(--color-accent); }

/* — hero — */
.hero {
  padding: calc(var(--space-8) * 2) var(--space-8);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-8); align-items: center;
}
.hero h1 { font-size: 64px; margin: 0 0 var(--space-3); max-width: 14ch; }
.hero-lede { font-size: 20px; max-width: 50ch; color: var(--color-neutral-800); }
.hero-ctas { display: flex; gap: var(--space-3); margin-top: var(--space-6); align-items: center; flex-wrap: wrap; }
.btn-lg { font-size: 16px; padding: var(--space-3) var(--space-6); }
.hero-brands { margin-top: var(--space-4); font-size: 13px; }
.hero-media { width: 100%; height: 380px; border-radius: 24px; overflow: hidden; background: var(--color-surface); }
.hero-media svg { width: 100%; height: 100%; display: block; }

/* — scan-flow strip — */
.flow-section { padding: 0 var(--space-8) var(--space-8); }
.flow-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-sm); }
.flow-card h6 { color: var(--color-accent-700); }
.flow { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.flow-node { background: var(--color-bg); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6); box-shadow: var(--shadow-sm); }
.flow-node-title { font-family: var(--font-heading); font-size: 18px; }
.flow-node-sub { font-size: 13px; }
.flow-node--accent { background: var(--color-accent); color: var(--color-bg); box-shadow: var(--shadow-md); }
.flow-node--accent .flow-node-sub { opacity: 0.85; }
.flow-arrow { color: var(--color-accent); font-size: 22px; }
.flow-outputs { display: grid; gap: var(--space-2); flex: 1; min-width: 280px; }
.flow-pill { background: var(--color-bg); border-radius: 8px; padding: var(--space-2) var(--space-4); font-size: 14px; }

/* — how it works — */
.how { padding: calc(var(--space-8) * 1.5) var(--space-8); max-width: 1100px; }
.how h2 { font-size: 40px; max-width: 20ch; }
.how-lede { font-size: 18px; max-width: 52ch; color: var(--color-neutral-800); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-6); }
.step-num {
  width: 52px; height: 52px; border-radius: 8px;
  background: var(--color-accent-2); color: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 22px;
}
.step h3 { font-size: 22px; margin-top: var(--space-3); }
.step p { color: var(--color-neutral-800); }

/* — pricing — */
.pricing { padding: var(--space-8); }
.pricing h2 { font-size: 40px; }
.plans {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
  margin-top: var(--space-6); align-items: stretch; max-width: 1100px;
}
.plan { border-radius: var(--radius-lg); display: flex; flex-direction: column; }
.plan--featured { border: 2px solid var(--color-accent); }
.plan--featured .card-kicker { color: var(--color-accent-700); }
.plan-price { font-family: var(--font-heading); font-size: 34px; }
.plan-price span { font-size: 15px; }
.reseller-note { margin-top: var(--space-4); font-size: 14px; }
.reseller-note a { color: var(--color-accent-700); }

/* — FAQ — */
.faq { padding: var(--space-8); max-width: 1100px; }
.faq h2 { font-size: 34px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-6); }
.faq h3 { font-size: 18px; }
.faq p { color: var(--color-neutral-800); font-size: 15px; }

/* — footer — */
.site-footer {
  padding: var(--space-8); display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: var(--space-4);
}
.footer-brand { font-family: var(--font-heading); font-size: 20px; }
.footer-tag { font-family: var(--font-body); font-size: 13px; }
.footer-links { display: flex; gap: var(--space-4); font-size: 13px; }
.footer-links a { color: var(--color-text); text-decoration: none; }
.footer-links a:hover { color: var(--color-accent); }

/* — responsive (not part of the desktop canvas; keeps the same proportions) — */
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; padding: var(--space-8); }
  .hero h1 { font-size: 44px; }
  .hero-media { height: 280px; }
  .steps, .plans { grid-template-columns: 1fr; }
  .how h2, .pricing h2 { font-size: 32px; }
}
@media (max-width: 720px) {
  .site-nav { flex-wrap: wrap; padding: var(--space-4); }
  .nav-links { order: 3; flex-basis: 100%; }
  .faq-grid { grid-template-columns: 1fr; }
  .flow-section, .how, .pricing, .faq, .site-footer { padding-inline: var(--space-4); }
}

/* — legal / static pages — */
.prose { max-width: 760px; padding: var(--space-8); }
.prose h1 { font-size: 40px; }
.prose h2 { font-size: 24px; margin-top: var(--space-8); }
.prose p, .prose li { color: var(--color-neutral-800); font-size: 15px; max-width: 68ch; }
.prose .updated { font-size: 13px; }
.contact-card { max-width: 560px; margin: var(--space-8) auto; padding: var(--space-6); }
.contact-card .form-grid { display: grid; gap: var(--space-3); }
.contact-ok { text-align: center; padding: var(--space-6) 0; }