/* v3 page group "contact": contact, feiten, privacy, voorwaarden (2026-10-21).
   Builds on site.css section 26 (.step-svg). Colours come only from the :root tokens. */

/* A coded step SVG outside a .flow-step: page-hero media or one half of a .split */
.c-viz {
  margin: 0;
  align-self: center;
}
.c-viz svg {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin-inline: auto;
}

/* "Your account" box in the Feiten stack diagram: the one place the reader owns */
.step-svg .c-acct {
  fill: var(--tint-violet);
  stroke: var(--violet);
  stroke-width: 1.5;
}
.step-svg .c-num {
  font-size: 15px;
  font-weight: 700;
  fill: var(--violet);
}

/* Feiten / privacy: text column next to a visual, centred on each other */
.split.c-mid {
  align-items: center;
}
.split h2 + .page-lead {
  margin-top: var(--s-5);
}
.split .src {
  margin-top: var(--s-4);
}

/* Voorwaarden: twelve short clauses on a flat ink rule (.card-num), two columns next to the sticky side column */
.c-clauses {
  row-gap: var(--s-7);
}
.c-clauses h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--s-2);
}
.c-clauses p {
  color: var(--text-2);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.c-terms + .src {
  margin-top: var(--s-7);
}

/* Privacy rights: the five rights as pills above the paragraph */
.c-rights {
  margin: var(--s-4) 0 var(--s-5);
}
.prose .label-rule + h2 {
  margin-top: var(--s-3);
}

@media (max-width: 900px) {
  .c-viz svg {
    max-width: 420px;
  }
  .c-clauses {
    row-gap: var(--s-6);
  }
}
/* the closing source line of the terms page: 60ch of this 13 px text is about 78 characters per line */
.c-terms + .src {
  max-width: 60ch;
}
/* the five privacy rights as a real list (screen readers count them), drawn as the .route-shape pills */
.c-rights {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.c-rights li {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3);
  color: var(--ink);
  background: var(--sunken);
}
.prose .c-rights {
  padding-left: 0;
}
.prose .c-rights li {
  margin: 0;
}
/* Voorwaarden: a sticky side column (H2 + the "from start to end" track) next to the clause grid */
.c-terms {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}
.c-terms-side {
  position: sticky;
  top: calc(var(--nav-h) + var(--s-5));
}
.c-terms-side .c-viz {
  margin-top: var(--s-6);
}
.c-terms-side .c-viz svg {
  margin-inline: 0;
}
@media (max-width: 900px) {
  .c-terms {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }
  .c-terms-side {
    position: static;
  }
}
/* Privacy: the short heading column stays in view next to a long list (desktop only) */
@media (min-width: 901px) {
  .split .c-sticky {
    position: sticky;
    top: calc(var(--nav-h) + var(--s-5));
  }
}
/* Privacy rights on a phone: the rights (the answer to the H2) come before the company fact card */
@media (max-width: 900px) {
  .c-prose-first > .prose {
    order: -1;
  }
}
/* Review fix round (2026-10-21) */
/* m4: Inter draws a wide hyphen under tabular-nums, so "e-commerce" showed gaps; these table cells hold words, not number columns */
.table-stack td {
  font-variant-numeric: normal;
}
/* m10: the c-viz SVGs render below their viewBox width, so a 12 px caps label showed at 10-11 px */
.c-viz .step-svg .lbl {
  font-size: 14px;
}
/* F4: between phone and wide desktop the sticky fact card is too narrow for label + value side by side */
/* the Feiten hero card (EN) overflows by a few px only just above the phone breakpoint */
@media (min-width: 901px) and (max-width: 1000px) {
  .fact-card dl {
    grid-template-columns: minmax(0, 1fr);
  }
  .fact-card dt {
    padding-bottom: 0;
    border-top: 1px solid var(--hair);
  }
  .fact-card dd {
    border-top: 0;
    padding-top: 2px;
  }
  .fact-card dt:first-of-type {
    border-top: 0;
  }
}
@media (min-width: 901px) and (max-width: 1279px) {
  .c-prose-first .fact-card dl {
    grid-template-columns: minmax(0, 1fr);
  }
  .c-prose-first .fact-card dt {
    padding-bottom: 0;
    border-top: 1px solid var(--hair);
  }
  .c-prose-first .fact-card dd {
    border-top: 0;
    padding-top: 2px;
  }
  .c-prose-first .fact-card dt:first-of-type {
    border-top: 0;
  }
}