/*
 * Interactive KVK hero: "zoek je bedrijf → zie je zaak online komen".
 * Search the KVK register, pick your business, and a themed builder-site
 * preview + a paid invoice + a mailbox on your own domain assemble live.
 *
 * The hero chrome uses --kvk-* tokens (dual-theme). The mini "site" inside the
 * browser frame is themed at runtime from the /kvk/preview endpoint's design
 * tokens via --sp-* custom properties set by kvk-hero.js.
 */
:root {
  --kvk-surface: #ffffff;
  --kvk-ground-2: #f2f0fb;
  --kvk-ink: #17131f;
  --kvk-ink-soft: #4b4459;
  --kvk-ink-faint: #837c92;
  --kvk-line: #e7e3f2;
  --kvk-line-strong: #d9d3ea;
  --kvk-violet: #7c3aed;
  --kvk-violet-deep: #6d28d9;
  --kvk-green: #059669;
  --kvk-amber: #f59e0b;
  --kvk-shadow-soft: 0 1px 2px rgba(23, 19, 31, 0.06), 0 8px 24px rgba(23, 19, 31, 0.06);
  --kvk-shadow-lift: 0 2px 4px rgba(23, 19, 31, 0.05), 0 1.75rem 4rem rgba(109, 40, 217, 0.18);
  --kvk-shadow-pop: 0 0.625rem 1.875rem rgba(23, 19, 31, 0.12), 0 2.5rem 5.6rem rgba(109, 40, 217, 0.22);
  --kvk-num: ui-monospace, "SF Mono", "Geist Mono", Menlo, monospace;
  --kvk-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}
[data-theme="dark"] {
  --kvk-surface: #191423;
  --kvk-ground-2: #14101f;
  --kvk-ink: #f4f1fb;
  --kvk-ink-soft: #bab3cd;
  --kvk-ink-faint: #857e97;
  --kvk-line: #292337;
  --kvk-line-strong: #372f4a;
  --kvk-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
  --kvk-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.3), 0 1.9rem 4.4rem rgba(124, 58, 237, 0.3);
  --kvk-shadow-pop: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.5), 0 2.75rem 6.25rem rgba(124, 58, 237, 0.4);
}

/* ---- layout: reuse .landing-hero shell, tune the inner grid ----
   Three grid cells (copy, cta, visual). Desktop: copy + cta stacked in the
   left column, the preview spanning the right. Mobile: copy, then the preview,
   then the CTA below it (so people see the payoff before the button). */
.kvk-hero-inner {
  grid-template-columns: 0.92fr 1.08fr;
  grid-template-areas: "copy visual" "cta visual";
  align-items: start;
  row-gap: var(--landing-hero-stack-gap);
}
.kvk-hero-copy {
  grid-area: copy;
  position: relative;
  z-index: 2;
}
.kvk-hero-cta-block {
  grid-area: cta;
}
/* The preview is a picture of the product: three cards whose every dimension is
   in rem, so at the desktop scale it is a fixed ~682px tall no matter how much
   room the viewport has. That single number is what used to push the home hero
   past the fold on a laptop.

   `zoom` scales it as one artifact — unlike `transform: scale()` it shrinks the
   LAYOUT box too, so the hero above it actually gets shorter, and unlike
   `transform` it leaves `.kvk-canvas`'s inline transform (the mouse parallax in
   kvk-hero.js) alone. Browsers without `zoom` simply ignore it and get today's
   behaviour. The factor is stepped by the (max-height) queries in
   landing-modern.css. */
.kvk-hero-visual {
  grid-area: visual;
  align-self: center;
  zoom: var(--landing-hero-fit, 1);
}
@media (max-width: 980px) {
  .kvk-hero-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "visual" "cta";
  }
}

/* ---- KVK search combobox ---- */
.kvk-search {
  position: relative;
  max-width: 30rem;
  margin: var(--landing-hero-search-gap) 0 0.25rem;
}
.page-home .kvk-search {
  margin-right: auto;
}
.kvk-search-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--kvk-ink-faint);
  margin: 0 0 0.5rem;
}
.kvk-field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--kvk-surface);
  border: 1.5px solid var(--kvk-line-strong);
  border-radius: 0.9rem;
  padding: 0.35rem 0.6rem 0.35rem 1rem;
  box-shadow: var(--kvk-shadow-soft);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kvk-field:focus-within {
  border-color: var(--kvk-violet);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kvk-violet) 16%, transparent);
}
.kvk-field-icon {
  color: var(--kvk-ink-faint);
  flex: none;
  display: flex;
}
.kvk-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--kvk-ink);
  padding: 0.6rem 0;
}
.kvk-field input::placeholder {
  color: var(--kvk-ink-faint);
  font-weight: 500;
}
.kvk-field input:focus {
  outline: none;
}
.kvk-field-spinner {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--kvk-line-strong);
  border-top-color: var(--kvk-violet);
  border-radius: 50%;
  animation: kvk-spin 0.7s linear infinite;
}
@keyframes kvk-spin {
  to {
    transform: rotate(360deg);
  }
}

.kvk-pop {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 30;
  background: var(--kvk-surface);
  border: 1px solid var(--kvk-line);
  border-radius: 0.9rem;
  box-shadow: var(--kvk-shadow-pop);
  overflow: hidden;
  animation: kvk-pop 0.16s ease-out both;
}
@keyframes kvk-pop {
  from {
    opacity: 0;
    transform: translateY(-0.375rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.kvk-pop-src {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--kvk-line);
  font-size: 0.72rem;
  color: var(--kvk-ink-faint);
  font-weight: 600;
}
.kvk-pop-src .kvk-badge {
  font-weight: 800;
  color: #fff;
  background: #003d82;
  border-radius: 0.3rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.68rem;
}
.kvk-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.9rem;
  border: 0;
  border-bottom: 1px solid var(--kvk-line);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}
.kvk-row:last-child {
  border-bottom: 0;
}
.kvk-row:hover,
.kvk-row.is-active {
  background: color-mix(in srgb, var(--kvk-violet) 7%, transparent);
}
.kvk-row-avatar {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.55rem;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  background: linear-gradient(135deg, var(--kvk-violet-deep), var(--kvk-violet));
}
.kvk-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.kvk-row-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--kvk-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kvk-row-meta {
  font-size: 0.78rem;
  color: var(--kvk-ink-faint);
}
.kvk-row-num {
  font-family: var(--kvk-num);
  font-size: 0.74rem;
  color: var(--kvk-ink-soft);
  flex: none;
}
.kvk-pop-empty {
  padding: 0.9rem;
  font-size: 0.85rem;
  color: var(--kvk-ink-faint);
}

.kvk-found {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--kvk-green);
  font-weight: 600;
}
.kvk-hero-hint {
  display: none;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--kvk-ink-faint);
  font-weight: 500;
}
.kvk-hero-hint svg {
  color: var(--kvk-violet);
  animation: kvk-nudge 1.6s ease-in-out infinite;
}
@keyframes kvk-nudge {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}

/* vak-picker (shown when trade not confident) */
.kvk-picker {
  margin-top: 0.85rem;
}
.kvk-picker-label {
  font-size: 0.8rem;
  color: var(--kvk-ink-soft);
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.kvk-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.kvk-chip {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--kvk-ink-soft);
  background: var(--kvk-surface);
  border: 1px solid var(--kvk-line-strong);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.kvk-chip:hover {
  border-color: var(--kvk-violet);
  color: var(--kvk-ink);
}

/* ---- the assembly canvas ---- */
.kvk-canvas {
  position: relative;
  display: grid;
  gap: 1rem;
  transform-style: preserve-3d;
  transition: transform 0.25s ease-out;
}
.kvk-canvas.is-building::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: 1rem;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 30%,
    color-mix(in srgb, var(--kvk-violet) 22%, transparent) 50%,
    transparent 70%
  );
  background-size: 220% 100%;
  animation: kvk-sweep 0.5s ease-out forwards;
}
@keyframes kvk-sweep {
  from {
    background-position: 130% 0;
  }
  to {
    background-position: -60% 0;
  }
}
.kvk-canvas.is-assembling .kvk-card-wrap {
  animation: kvk-rise 0.55s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}
.kvk-canvas.is-assembling .kvk-card-wrap.wrap-2 {
  animation-delay: 0.12s;
}
.kvk-canvas.is-assembling .kvk-card-wrap.wrap-3 {
  animation-delay: 0.2s;
}
@keyframes kvk-rise {
  from {
    opacity: 0;
    transform: translateY(1.1rem) scale(0.96);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.kvk-card-wrap {
  position: relative;
}
.kvk-card {
  position: relative;
  background: var(--kvk-surface);
  border: 1px solid var(--kvk-line);
  border-radius: 1rem;
  box-shadow: var(--kvk-shadow-lift);
  overflow: hidden;
}
.kvk-card-tag {
  position: absolute;
  left: -0.4rem;
  top: -0.5rem;
  z-index: 4;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: var(--kvk-violet);
  padding: 0.22rem 0.5rem;
  border-radius: 0.45rem;
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.35);
}

/* browser chrome */
.kvk-chrome {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--kvk-line);
  background: var(--kvk-ground-2);
}
.kvk-dots {
  display: flex;
  gap: 0.35rem;
}
.kvk-dots i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--kvk-line-strong);
}
.kvk-urlbar {
  flex: 1;
  font-family: var(--kvk-num);
  font-size: 0.74rem;
  color: var(--kvk-ink-soft);
  background: var(--kvk-surface);
  border: 1px solid var(--kvk-line);
  border-radius: 0.5rem;
  padding: 0.22rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow: hidden;
  white-space: nowrap;
}
.kvk-urlbar .kvk-lock {
  color: var(--kvk-green);
  flex: none;
  display: flex;
}
.kvk-dom-badge {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-family: inherit;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--kvk-green);
  background: color-mix(in srgb, var(--kvk-green) 14%, transparent);
  border-radius: 999px;
  padding: 0.1rem 0.4rem;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.kvk-dom-badge.is-show {
  opacity: 1;
  transform: scale(1);
}

/* the themed mini "site" (vars set by JS from preset tokens) */
.kvk-site {
  --sp-paper: #f4efe6;
  --sp-ink: #2b2119;
  --sp-brand: #9a5b2a;
  --sp-on: #ffffff;
  --sp-muted: rgba(43, 33, 25, 0.62);
  --sp-line: rgba(43, 33, 25, 0.1);
  --sp-head: var(--kvk-serif);
  background: var(--sp-paper);
  color: var(--sp-ink);
}
.kvk-snav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
}
.kvk-swordmark {
  font-family: var(--sp-head);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--sp-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kvk-slinks {
  display: flex;
  gap: 0.75rem;
  font-size: 0.72rem;
  color: var(--sp-muted);
}
.kvk-snav-cta {
  flex: none;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--sp-on);
  background: var(--sp-brand);
  border-radius: 999px;
  padding: 0.28rem 0.6rem;
  white-space: nowrap;
}
.kvk-shero {
  position: relative;
  margin: 0 0.55rem;
  border-radius: 0.7rem;
  overflow: hidden;
  min-height: 9.5rem;
  display: flex;
  align-items: center;
}
.kvk-shero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kvk-shero-fallback {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--sp-brand), color-mix(in srgb, var(--sp-brand) 55%, #000));
}
.kvk-shero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.34) 55%, rgba(0, 0, 0, 0.12) 100%);
}
.kvk-shero-in {
  position: relative;
  z-index: 2;
  padding: 1.1rem 1.2rem;
  max-width: 82%;
}
.kvk-shero-eyebrow {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 0.35rem;
}
.kvk-shero-title {
  font-family: var(--sp-head);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 0.35rem;
  text-wrap: balance;
}
.kvk-shero-sub {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.76rem;
  margin: 0 0 0.7rem;
  max-width: 34ch;
}
.kvk-shero-cta {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.kvk-spill {
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  white-space: nowrap;
}
.kvk-spill.is-solid {
  background: var(--sp-brand);
  color: var(--sp-on);
}
.kvk-spill.is-ghost {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.kvk-sservices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 0.7rem 0.85rem 1rem;
}
.kvk-sservice {
  border-radius: 0.55rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--sp-ink) 5%, transparent);
  border: 1px solid var(--sp-line);
}
.kvk-sthumb {
  position: relative;
  height: 3.1rem;
  background: color-mix(in srgb, var(--sp-brand) 20%, var(--sp-paper));
}
.kvk-sthumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kvk-sthumb .kvk-sthumb-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--sp-muted);
  text-align: center;
  padding: 0 0.3rem;
}
.kvk-slabel {
  font-family: var(--sp-head);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--sp-ink);
  padding: 0.35rem 0.5rem;
}

/* invoice + mail row */
.kvk-row-cards {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 1rem;
}
/* The invoice is the product's core promise, so it must read as a real, premium
   document and lift off the dark canvas instead of sinking into it. */
.kvk-inv {
  padding: 0.95rem 1.05rem 1.05rem;
  border-color: var(--kvk-line-strong);
  box-shadow: var(--kvk-shadow-pop);
}
.kvk-inv-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.kvk-inv-badge {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kvk-violet);
  background: color-mix(in srgb, var(--kvk-violet) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--kvk-violet) 30%, transparent);
  padding: 0.14rem 0.4rem;
  border-radius: 0.35rem;
}
.kvk-inv-meta {
  font-family: var(--kvk-num);
  font-size: 0.68rem;
  color: var(--kvk-ink-faint);
  letter-spacing: -0.01em;
}
.kvk-inv-head .kvk-inv-status {
  margin-left: auto;
}
.kvk-inv-who {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Inset "sheet" so the amounts read as the body of a document. */
.kvk-inv-sheet {
  background: var(--kvk-ground-2);
  border: 1px solid var(--kvk-line);
  border-radius: 0.7rem;
  padding: 0.55rem 0.75rem 0.7rem;
}
.kvk-inv-status {
  flex: none;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  color: var(--kvk-ink-faint);
  background: var(--kvk-ground-2);
  border: 1px solid var(--kvk-line);
  transition: all 0.3s ease;
}
.kvk-inv-status.is-paid {
  color: #fff;
  background: var(--kvk-green);
  border-color: transparent;
}
.kvk-inv-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--kvk-ink-soft);
  padding: 0.28rem 0;
  border-bottom: 1px dashed var(--kvk-line);
}
.kvk-inv-sheet .kvk-inv-line:last-of-type {
  border-bottom: none;
}
.kvk-inv-line .kvk-amt {
  font-family: var(--kvk-num);
  font-variant-numeric: tabular-nums;
  color: var(--kvk-ink);
}
.kvk-inv-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1.5px solid var(--kvk-line-strong);
}
.kvk-inv-total .kvk-lbl {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--kvk-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.kvk-inv-total .kvk-big {
  font-family: var(--kvk-num);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--kvk-ink);
}
.kvk-ideal {
  margin-top: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  background: var(--kvk-green);
  border-radius: 0.6rem;
  padding: 0.6rem;
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.32);
  transition: background 0.3s ease;
}
.kvk-ideal-mark {
  font-size: 0.66rem;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.02em;
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
  padding: 0.08rem 0.3rem;
  border-radius: 0.28rem;
}
.kvk-inv-note {
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--kvk-ink-faint);
}
.kvk-inv-note svg {
  flex: none;
  color: var(--kvk-green);
}
.kvk-ideal .kvk-chk {
  display: none;
}
.kvk-ideal.is-paid .kvk-chk {
  display: flex;
  animation: kvk-pop 0.3s ease-out both;
}
.kvk-money-toast {
  position: absolute;
  right: 0.7rem;
  top: 2.4rem;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--kvk-green), #10b981);
  padding: 0.35rem 0.6rem;
  border-radius: 0.5rem;
  box-shadow: 0 8px 20px rgba(5, 150, 105, 0.4);
  opacity: 0;
  pointer-events: none;
}
.kvk-money-toast.is-fly {
  animation: kvk-fly 1.9s ease-out forwards;
}
@keyframes kvk-fly {
  0% {
    opacity: 0;
    transform: translateY(0.375rem) scale(0.9);
  }
  15% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  70% {
    opacity: 1;
    transform: translateY(-0.25rem);
  }
  100% {
    opacity: 0;
    transform: translateY(-1rem);
  }
}

.kvk-mail {
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.kvk-mail-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--kvk-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.kvk-mail-addr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.kvk-mail-addr {
  font-family: var(--kvk-num);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--kvk-violet);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kvk-mail-verified {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--kvk-green);
  background: color-mix(in srgb, var(--kvk-green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--kvk-green) 28%, transparent);
  padding: 0.12rem 0.35rem;
  border-radius: 999px;
}
.kvk-mail-item {
  border-top: 1px solid var(--kvk-line);
  padding-top: 0.55rem;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.kvk-mail-item.is-incoming {
  opacity: 0;
  transform: translateY(0.375rem);
}
.kvk-mail-item.is-read {
  opacity: 0.72;
}
.kvk-mail-from {
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.kvk-mail-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--kvk-line-strong);
  margin-right: 0.4rem;
}
.kvk-mail-sub {
  font-size: 0.74rem;
  color: var(--kvk-ink-soft);
}
.kvk-mail-snip {
  font-size: 0.72rem;
  color: var(--kvk-ink-faint);
}
.kvk-unread {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--kvk-violet);
  margin-right: 0.4rem;
}
.kvk-unread.is-ping {
  animation: kvk-ping 1.4s ease-out 2;
}
@keyframes kvk-ping {
  0% {
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.6);
  }
  70% {
    box-shadow: 0 0 0 0.45rem rgba(124, 58, 237, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);
  }
}

/* ---- responsive ---- */
@media (max-width: 980px) {
  .kvk-hero-copy .kvk-hero-hint {
    display: flex;
  }
  .kvk-canvas {
    scroll-margin-top: 1rem;
    transform: none !important;
  }
}
@media (max-width: 520px) {
  .kvk-row-cards {
    grid-template-columns: 1fr;
  }
  /* Money-climax on mobile: the canvas stacks and the CTA sits right below it,
     so end the scroll on the PAID invoice instead of the mailbox. Reordering
     the invoice last makes the story read site live -> lead in je mailbox ->
     factuur betaald -> "Gratis beginnen", with the money moment adjacent to
     the button. (Desktop keeps invoice-left / mail-right, unaffected.) */
  .kvk-row-cards .wrap-2 {
    order: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kvk-canvas.is-assembling .kvk-card-wrap,
  .kvk-money-toast,
  .kvk-unread.is-ping,
  .kvk-hero-hint svg,
  .kvk-field-spinner {
    animation: none !important;
  }
  .kvk-canvas.is-building::after {
    display: none;
  }
}