/* My Intelligent Agenda — marketing site (KAN-221).
   Extends KAN-220's placeholder tokens (deep teal / warm paper, the
   same palette as internal/ui/static/mia-tokens.css) so the public
   site and the app feel like one product. Still zero external
   requests: system font stack, no webfonts, no JS beyond plain
   links (the language toggle is just an <a> between the root/*.html
   Dutch tree and the /en/ English tree — see the KAN-221 PR
   description for the two-tree rationale). Screenshots referenced
   from this file live in ./img and are all sourced from the
   synthetic Clinic Noord tenant only — no real customer's data or
   place names, ever (redline enforced by an automated content
   guard; see KAN-217). */

:root {
  --canvas: #FCFBF8;
  --canvas-alt: #F5F1E8;
  --ink: #1A1A1A;
  --ink-muted: #6E665A;
  --brand: #0E5E5A;
  --brand-strong: #073535;
  --brand-soft: #E4EEEC;
  --line: #EDE6D9;
  --content-width: 72rem;
  --radius: 0.75rem;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* max-width caps the box; height:auto is load-bearing (KAN-249) — every
   screenshot below carries width/height HTML attributes (for the
   accurate intrinsic aspect-ratio + zero layout shift), but the HTML
   width/height presentational hints map to a fixed-pixel CSS height
   unless height is explicitly set back to auto here. Without this
   line the image's width shrinks to fit its column while the height
   stays pinned at the original pixel count, squashing/stretching the
   image — that was the KAN-249 distortion bug. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

.wrap {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--brand-strong);
  text-decoration: none;
}

.brand img { width: 1.6rem; height: 1.6rem; border-radius: 0.4rem; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.site-nav a.navlink {
  text-decoration: none;
  color: var(--ink-muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.site-nav a.navlink:hover,
.site-nav a.navlink:focus-visible {
  color: var(--brand-strong);
}

.lang-toggle {
  display: flex;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
}

.lang-toggle a {
  padding: 0.2rem 0.5rem;
  border-radius: 0.4rem;
  text-decoration: none;
  color: var(--ink-muted);
  border: 1px solid transparent;
}

.lang-toggle a[aria-current="true"] {
  color: var(--brand-strong);
  border-color: var(--line);
  background: var(--canvas-alt);
}

.lang-toggle a:hover { color: var(--brand-strong); }

.btn {
  display: inline-block;
  padding: 0.65rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
}

.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--brand-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--brand-strong);
  border-color: var(--line);
}

.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--canvas-alt);
}

/* ---------- Hero ---------- */

.hero {
  padding: 4.5rem 0 3.5rem;
}

.hero .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  max-width: 46rem;
}

.eyebrow {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}

.hero h1 {
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.15;
  font-weight: 700;
  color: var(--brand-strong);
}

.hero .lede {
  margin: 0;
  font-size: 1.15rem;
  color: var(--ink-muted);
  max-width: 40rem;
}

.hero .cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.hero-visual {
  margin-top: 2.5rem;
}

.hero-visual figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 48px -32px rgba(7, 53, 53, 0.35);
}

.hero-visual figcaption {
  padding: 0.65rem 1rem;
  font-size: 0.82rem;
  color: var(--ink-muted);
  background: var(--canvas-alt);
  border-top: 1px solid var(--line);
}

/* ---------- Stat strip ---------- */

.stat-strip {
  background: var(--brand-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat-strip .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 2rem 1.5rem;
}

.stat {
  text-align: left;
}

.stat .num {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--brand-strong);
}

.stat .label {
  font-size: 0.88rem;
  color: var(--ink-muted);
}

/* ---------- Narrative (problem/solution) ---------- */

.narrative {
  padding: 4rem 0;
}

.narrative h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--brand-strong);
  margin: 0 0 0.75rem;
  max-width: 40rem;
}

.narrative > .wrap > .lede {
  color: var(--ink-muted);
  max-width: 40rem;
  margin: 0 0 2.5rem;
  font-size: 1.05rem;
}

.narrative-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.step-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.step-card .step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.9rem;
}

.step-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  color: var(--brand-strong);
}

.step-card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

/* ---------- Features ---------- */

.features {
  padding: 1rem 0 4rem;
}

.features > .wrap > h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--brand-strong);
  text-align: center;
  margin: 0 0 3rem;
}

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 3rem 0;
  border-top: 1px solid var(--line);
}

.feature:first-of-type { border-top: none; }

.feature.reverse .feature-media { order: 2; }
.feature.reverse .feature-text { order: 1; }

.feature-text .kicker {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.5rem;
}

.feature-text h3 {
  margin: 0 0 0.75rem;
  font-size: 1.4rem;
  color: var(--brand-strong);
}

.feature-text p {
  margin: 0 0 0.75rem;
  color: var(--ink-muted);
}

.feature-text p:last-child { margin-bottom: 0; }

.feature-media {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.feature-media figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 32px -24px rgba(7, 53, 53, 0.3);
}

.feature-media figcaption {
  padding: 0.55rem 0.9rem;
  font-size: 0.78rem;
  color: var(--ink-muted);
  background: var(--canvas-alt);
  border-top: 1px solid var(--line);
}

.feature-media .media-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* ---------- Access flow (request-access step visual, KAN-230) ----------
   No screenshot exists for this step yet (it happens before any tenant
   or login exists) — a small CSS-only flow diagram stands in, reusing
   the same .feature-media figure chrome as the screenshots around it. */

.access-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 2.25rem 1.5rem;
}

.flow-chip {
  background: var(--brand-soft);
  color: var(--brand-strong);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
}

.flow-chip-final {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.flow-arrow {
  color: var(--ink-muted);
  font-weight: 700;
}

/* ---------- "So you can say" example callout (KAN-231) ----------
   Every capability section on wat-kan-het-aan.html / en/what-it-can-do.html
   ends with one of these: a concrete, planner-authored example sentence
   translating the section's abstract rule into something a manager would
   actually say out loud. */

.say-example {
  margin: 1.1rem 0 0;
  padding: 0.85rem 1.1rem;
  background: var(--brand-soft);
  border-left: 3px solid var(--brand);
  border-radius: 0 0.5rem 0.5rem 0;
  color: var(--brand-strong);
  font-size: 0.95rem;
}

/* ---------- Composition diagram (KAN-231) ----------
   No composition-authoring screen exists in the product yet (coverage
   rows that merge into one "creates_slots" rule are configured today
   without a dedicated UI), so a small CSS-only diagram stands in --
   same precedent as .access-flow above (KAN-230): reuse the existing
   .flow-chip chrome rather than inventing a new visual language. */

.composition-diagram {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 2rem 1.5rem;
}

.comp-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.comp-shift-label {
  min-width: 8.5rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--brand-strong);
}

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--brand-strong);
  color: #fff;
}

.cta-band .wrap {
  padding: 3.5rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.cta-band h2 {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.cta-band p {
  margin: 0;
  max-width: 34rem;
  color: #CFE3E1;
}

.cta-band .cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.5rem;
}

.cta-band .btn-primary {
  background: #fff;
  color: var(--brand-strong);
}

.cta-band .btn-primary:hover { background: #EAF3F1; }

.cta-band .btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}

.cta-band .btn-ghost:hover { background: rgba(255,255,255,0.08); }

/* ---------- Footer ---------- */

footer.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem 0;
}

footer.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

footer.site-footer .foot-links {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

footer.site-footer a {
  color: var(--ink-muted);
  text-decoration: none;
}

footer.site-footer a:hover { color: var(--brand-strong); }

footer.site-footer .foot-lang {
  display: flex;
  gap: 0.5rem;
}

/* ---------- Simple content pages (privacy/terms/404) ---------- */
/* signup-coming.html used ".card" too before KAN-225 replaced it with
   the real signup form served by the app; the class stays generically
   named/documented since 404.html and any future simple page reuse it. */

main.card {
  margin: auto;
  max-width: 40rem;
  width: 100%;
  padding: 3rem 2rem;
  text-align: center;
}

.note {
  margin: 1.5rem 0;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.contact {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--brand);
}

.contact:hover,
.contact:focus-visible {
  color: var(--brand-strong);
  border-bottom-color: var(--brand-strong);
}

.legal-page main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 4rem;
}

.legal-page h1 {
  color: var(--brand-strong);
  font-size: 1.8rem;
}

.legal-page p {
  color: var(--ink-muted);
}

/* Structured legal content (KAN-222): headings/lists/definition-list
   for the privacy policy + terms of use, on top of the h1/p rules
   above. Kept intentionally simple — single-column, no fixed widths —
   so it can't introduce horizontal overflow at narrow viewports. */

.legal-page .legal-updated {
  margin-top: -0.5rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.legal-page h2 {
  margin-top: 2.5rem;
  color: var(--brand-strong);
  font-size: 1.25rem;
}

.legal-page h3 {
  margin-top: 1.5rem;
  color: var(--ink);
  font-size: 1.05rem;
}

.legal-page section {
  margin-top: 1rem;
}

.legal-page ul,
.legal-page ol {
  padding-left: 1.25rem;
  color: var(--ink-muted);
}

.legal-page li {
  margin: 0.4rem 0;
}

.legal-page li strong {
  color: var(--ink);
}

/* Generic body-copy links (mailto references inside prose). Excludes
   .btn (nav/CTA buttons) and .contact (the distinct bordered-underline
   footer-style contact link) so neither loses its own look. */
.legal-page main a:not(.btn):not(.contact) {
  color: var(--brand);
  text-decoration: underline;
}

.legal-page main a:not(.btn):not(.contact):hover,
.legal-page main a:not(.btn):not(.contact):focus-visible {
  color: var(--brand-strong);
}

.legal-toc {
  margin: 1.5rem 0 2rem;
  padding: 1rem 1.25rem;
  background: var(--canvas-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.legal-toc p {
  margin: 0 0 0.5rem;
  color: var(--brand-strong);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.legal-toc ol {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ink);
}

.legal-toc li {
  margin: 0.2rem 0;
}

.legal-processors dt {
  margin-top: 1rem;
  color: var(--ink);
  font-weight: 700;
}

.legal-processors dd {
  margin: 0.2rem 0 0;
  color: var(--ink-muted);
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .narrative-steps { grid-template-columns: 1fr; }
  .stat-strip .wrap { grid-template-columns: 1fr; text-align: left; }
  .feature { grid-template-columns: 1fr; gap: 1.5rem; }
  .feature.reverse .feature-media { order: 1; }
  .feature.reverse .feature-text { order: 2; }
  .site-header .wrap { justify-content: center; }
  .site-nav { justify-content: center; }
}

@media (max-width: 560px) {
  .hero { padding: 3rem 0 2.5rem; }
  .cta-row .btn { flex: 1 1 auto; text-align: center; }
}