/* Marketing UI kit · component-scoped CSS that doesn't translate cleanly to inline. */

/* Section base */
.mk-section {
  padding: var(--space-11) var(--outer-pad);
  position: relative;
}
@media (max-width: 1024px) {
  .mk-section { padding: var(--space-9) var(--space-5); }
}
.mk-section .container {
  max-width: var(--content-max);
  margin: 0 auto;
}
.mk-section .reading {
  max-width: var(--reading-max);
}

/* Eyebrow / caption */
.mk-eyebrow {
  font: 500 13px/1.5 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-sage);
  margin: 0 0 var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.mk-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 999px; background: currentColor;
}
.mk-section.is-light .mk-eyebrow { color: var(--color-primary); }

/* Headings (overrides for marketing) */
.mk-display {
  font: 600 var(--fs-display)/var(--lh-display) var(--font-sans);
  letter-spacing: var(--tr-display);
  margin: 0;
}
.mk-h1 {
  font: 600 var(--fs-h1)/var(--lh-h1) var(--font-sans);
  letter-spacing: var(--tr-h1);
  margin: 0;
}
.mk-h2 {
  font: 600 var(--fs-h2)/var(--lh-h2) var(--font-sans);
  letter-spacing: var(--tr-h2);
  margin: 0;
}
.mk-h3 {
  font: 500 var(--fs-h3)/var(--lh-h3) var(--font-sans);
  letter-spacing: var(--tr-h3);
  margin: 0;
}
.mk-lead {
  font: 400 var(--fs-body-lg)/1.55 var(--font-sans);
  color: var(--fg-muted);
  max-width: 620px;
}
.mk-section.is-light .mk-lead { color: var(--color-muted); }

/* Buttons */
.mk-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 15px/1 var(--font-sans);
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.mk-btn--primary {
  background: var(--color-sage); color: var(--color-ink);
}
.mk-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgb(123 174 127 / 0.35);
}
.mk-btn--primary:active { transform: translateY(0) scale(0.98); }
.mk-btn--secondary {
  background: transparent; color: var(--color-cream);
  border-color: rgb(251 250 247 / 0.45);
}
.mk-btn--secondary:hover {
  background: rgb(251 250 247 / 0.08);
  border-color: var(--color-cream);
}
.mk-section.is-light .mk-btn--secondary { color: var(--color-ink); border-color: rgb(14 31 24 / 0.25); }
.mk-section.is-light .mk-btn--secondary:hover { background: rgb(14 31 24 / 0.04); border-color: var(--color-ink); }
.mk-btn--ghost {
  padding: 8px 0;
  border-radius: 0;
  color: var(--color-sage);
  background: transparent;
  position: relative;
}
.mk-btn--ghost::after {
  content: ""; position: absolute; left: 0; right: 100%;
  bottom: 0; height: 1px; background: currentColor;
  transition: right 300ms var(--ease-out);
}
.mk-btn--ghost:hover::after { right: 0; }

/* Cards */
.mk-card {
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform 250ms var(--ease-out), border-color 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}
.mk-card--light {
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.mk-card--light:hover {
  transform: translateY(-4px);
  border-color: var(--color-sage);
  box-shadow: 0 8px 24px rgb(14 31 24 / 0.08);
}
.mk-card--dark {
  background: var(--color-primary-alt);
  color: var(--color-cream);
}
.mk-card--dark:hover {
  transform: translateY(-4px);
}

/* Scroll-reveal */
.mk-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.mk-reveal.is-in {
  opacity: 1; transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .mk-reveal { transition-duration: 200ms; transform: none; }
}

/* Hero ambient zoom */
.mk-hero-bg {
  position: absolute; inset: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  animation: heroZoom 24s var(--ease-in-out) infinite alternate;
}
@keyframes heroZoom {
  from { transform: scale(1.0); }
  to   { transform: scale(1.08); }
}
.mk-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(14 31 24 / 0.20) 0%, rgb(14 31 24 / 0.10) 40%, rgb(14 31 24 / 0.55) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .mk-hero-bg { animation: none; }
}

/* Tabular figures for clinical numbers */
.mk-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Lucide icon sizing helpers */
.mk-icon { width: 20px; height: 20px; stroke-width: 1.5; }
.mk-icon--sm { width: 16px; height: 16px; }
.mk-icon--lg { width: 24px; height: 24px; }


/* Mobile nav — hide inline links so logo + CTA fit without overlap */
@media (max-width: 820px) {
  .mk-nav-links { display: none !important; }
}