/* Public marketing/signup site. Separate from dashboard/dashboard.css
   deliberately — that one is styled for an internal admin tool ("minimal,
   functional... not a public-facing page", its own words); this one IS the
   public-facing page, so it gets real visual treatment. Same brand teal
   (see /shared/brand-colors.css) as the dashboard/platform admin nav bars
   for continuity between the marketing site and what a signed-in admin
   sees next. */
@import url("/shared/brand-colors.css");
* { box-sizing: border-box; }
:root {
  /* --navy/--navy-light are local aliases onto the shared brand teal —
     kept under their old names so every existing var(--navy) selector
     below didn't need touching one by one, just what they point at.
     --text is intentionally a SEPARATE, unrelated value: general
     body-copy color, not brand identity — see brand-colors.css's header
     comment for why these aren't the same variable despite once sharing
     a literal hex by coincidence. */
  --navy: var(--kendri-teal);
  --navy-light: var(--kendri-teal-light);
  --bg: #f5f5f7;
  --text: #1a1a2e;
  --muted: #5a5a6e;
  --border: #e0e0ee;
  --accent: #3aa35a;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  background: #fff;
  color: var(--text);
  line-height: 1.5;
}
a { color: var(--navy-light); }
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---- Nav ---- */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
}
.site-nav .brand { display: flex; align-items: center; text-decoration: none; }
.brand-logo { height: 32px; width: auto; display: block; }
.site-nav .links { display: flex; gap: 24px; align-items: center; }
.site-nav .links a { color: var(--text); text-decoration: none; font-size: 14px; font-weight: 500; }
.site-nav .links a:hover { color: var(--navy-light); }
/* .links a.cta (not just .cta) — needs to out-specificity ".site-nav .links a"
   above, which otherwise wins the color property (equal 2-class specificity
   but declared later would normally decide it, except this rule used to be
   less specific than that one) and painted the button's text the same dark
   navy as its own background: invisible except on hover, when the generic
   link-hover rule nudged it to --navy-light and it became just barely
   readable. */
.site-nav .links a.cta {
  background: var(--navy); color: #fff; padding: 8px 16px; border-radius: 6px;
  font-size: 14px; font-weight: 600; text-decoration: none;
}

/* ---- Hero ---- */
.hero { background: var(--bg); padding: 72px 24px; text-align: center; }
.hero h1 { font-size: 40px; margin: 0 0 12px; color: var(--navy); max-width: 760px; margin-left: auto; margin-right: auto; }
.hero p.supporting { font-size: 20px; font-weight: 600; color: var(--navy); max-width: 620px; margin: 0 auto 20px; }
.hero p.lead { font-size: 18px; color: var(--muted); max-width: 620px; margin: 0 auto 32px; }
.hero .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 12px 24px; border-radius: 6px; font-weight: 600;
  font-size: 15px; text-decoration: none; border: none; cursor: pointer;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--kendri-teal-dark); }
.btn-secondary { background: #fff; color: var(--navy); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--navy); }

/* ---- Sections ---- */
section.page-section { padding: 64px 24px; }
section.page-section.alt { background: var(--bg); }
h2.section-title { font-size: 28px; text-align: center; margin: 0 0 12px; color: var(--navy); }
p.section-subtitle { text-align: center; color: var(--muted); max-width: 560px; margin: 0 auto 40px; }

/* ---- How it works ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.step { text-align: center; }
.step .step-num {
  width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  margin: 0 auto 16px;
}
.step h3 { font-size: 17px; margin: 0 0 8px; }
.step p { color: var(--muted); font-size: 14px; margin: 0; }

/* ---- Features ---- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card { padding: 24px; border: 1px solid var(--border); border-radius: 10px; }
.feature-card h3 { font-size: 16px; margin: 0 0 8px; color: var(--navy); }
.feature-card p { font-size: 14px; color: var(--muted); margin: 0; }

/* ---- Pricing ---- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.price-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 28px 24px;
  display: flex; flex-direction: column; background: #fff;
}
/* Amber border marks this as the recommended/highlighted plan — the one
   deliberate "small accent" use of the brand amber on this page, not a
   second primary color (see brand-colors.css). */
.price-card.featured { border: 2px solid var(--kendri-amber); box-shadow: 0 4px 16px rgba(10,61,80,0.08); }
.price-card h3 { font-size: 18px; margin: 0 0 4px; }
.price-card .price { font-size: 32px; font-weight: 700; margin: 8px 0 4px; color: var(--navy); }
.price-card .price span { font-size: 14px; font-weight: 400; color: var(--muted); }
.price-card .quota { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.price-card li { font-size: 13px; padding: 6px 0; color: var(--text); }
.price-card li::before { content: "✓ "; color: var(--accent); font-weight: 700; }

/* ---- Case study ---- */
.case-study {
  max-width: 720px; margin: 0 auto; text-align: center; padding: 40px 24px;
  background: var(--bg); border-radius: 12px;
}
.case-study blockquote { font-size: 20px; font-style: italic; color: var(--navy); margin: 0 0 16px; }
.case-study .attribution { color: var(--muted); font-size: 14px; }

/* ---- Footer ---- */
footer.site-footer {
  border-top: 1px solid var(--border); padding: 32px 24px; text-align: center;
  color: var(--muted); font-size: 13px;
}
footer.site-footer a { color: var(--muted); margin: 0 8px; }

/* ---- Signup / legal pages ---- */
.narrow { max-width: 480px; margin: 48px auto; padding: 0 24px; }
.legal-narrow { max-width: 760px; margin: 0 auto; padding: 48px 24px 80px; }
.card {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 28px 24px;
}
label { display: block; font-size: 13px; font-weight: 600; margin: 16px 0 6px; }
input[type="text"], input[type="email"], input[type="url"], textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font-size: 14px;
  font-family: inherit;
}
textarea { resize: vertical; min-height: 100px; }
.success { color: var(--accent); font-size: 13px; margin-top: 8px; }
.checkbox-row { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; font-size: 13px; }
.checkbox-row input { margin-top: 3px; }
.error { color: #a5233a; font-size: 13px; margin-top: 8px; }
.hint { color: var(--muted); font-size: 12px; }
code {
  background: var(--bg); padding: 2px 6px; border-radius: 4px; font-size: 12.5px; word-break: break-all;
}
pre {
  background: var(--navy); color: #d0d0e8; padding: 14px 16px; border-radius: 6px;
  font-size: 12.5px; overflow-x: auto; white-space: pre-wrap; word-break: break-all;
}
.legal-banner {
  background: #fff3cd; border: 1px solid #e0c260; color: #6b5300; border-radius: 8px;
  padding: 14px 18px; font-size: 13px; margin-bottom: 28px;
}
.legal-narrow h1 { font-size: 26px; margin: 0 0 4px; color: var(--navy); }
.legal-narrow .legal-meta { color: var(--muted); font-size: 13px; margin: 0 0 24px; }
.legal-narrow h2 { font-size: 18px; margin: 32px 0 10px; color: var(--navy); }
.legal-narrow p { margin: 0 0 14px; line-height: 1.6; }
.legal-narrow ul { margin: 0 0 14px; padding-left: 22px; line-height: 1.6; }
.legal-narrow li { margin-bottom: 6px; }
.legal-narrow table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 13.5px; }
.legal-narrow th, .legal-narrow td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal-narrow th { background: var(--bg); font-weight: 600; }

/* ---- Contact modal ---- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(10,61,80,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 1000;
}
.modal-overlay[hidden] { display: none; }
.modal {
  background: #fff; border-radius: 12px; padding: 28px 24px;
  max-width: 460px; width: 100%; max-height: calc(100vh - 48px); overflow-y: auto;
  box-shadow: 0 12px 40px rgba(10,61,80,0.25);
  position: relative;
}
.modal-close {
  position: absolute; top: 16px; right: 16px; background: none; border: none;
  font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px;
}
.modal-close:hover { color: var(--navy); }
.modal h2 { font-size: 20px; margin: 0 0 6px; color: var(--navy); padding-right: 24px; }
.modal .hint { margin-bottom: 4px; }

@media (max-width: 760px) {
  .steps, .feature-grid, .pricing-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 30px; }
}