/*
 * Kapperplan — verkooppagina
 *
 * Geen bouwstap, geen framework, geen lettertype van buiten. Dat is geen
 * gemakzucht: deze pagina verandert een paar keer per jaar, en dan wil je
 * hem over drie jaar nog kunnen openen zonder eerst een toolchain te
 * repareren die intussen is verrot.
 *
 * En het is het argument van de pagina zélf. Er staat op dat het product
 * niets van buiten laadt en daarom geen cookiebanner nodig heeft. Een
 * verkooppagina die dat beweert terwijl hij zijn lettertype bij Google
 * ophaalt, verkoopt zichzelf niet.
 *
 * De kleuren komen uit web/src/app/globals.css van het product. Wijzig je
 * ze daar, wijzig ze dan hier ook — een verkooppagina die een andere kleur
 * heeft dan het product dat hij verkoopt, leest als een ander product.
 */

:root {
  --kalk: #f3f1ee;
  --vlak: #ffffff;
  --inkt: #211f27;
  --leisteen: #625e6b;
  --nevel: #d8d3dc;
  --iris: #4f3fbf;
  --iris-diep: #3a2d95;
  --iris-wolk: #edeafa;
  --geboekt: #176b52;
  --geboekt-vlak: #ddf2ea;

  /* Systeemstapels. De eerste die bestaat wint; de rest is vangnet. */
  --kop: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono",
    "Roboto Mono", Menlo, Consolas, monospace;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --kalk: #15131a;
    --vlak: #211e29;
    --inkt: #f5f2f7;
    --leisteen: #bbb4c3;
    --nevel: #403a49;
    --iris: #b7acff;
    --iris-diep: #cdc5ff;
    --iris-wolk: #2a2440;
    --geboekt: #67d6ad;
    --geboekt-vlak: #173b31;
    color-scheme: dark;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--kalk);
  color: var(--inkt);
  font-family: var(--kop);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Eén gutter, op één plek gezet. */
.band {
  padding-left: 20px;
  padding-right: 20px;
}
.kolom {
  max-width: 44rem;
  margin: 0 auto;
}

a {
  color: var(--iris-diep);
}
@media (prefers-color-scheme: dark) {
  a {
    color: var(--iris);
  }
}

h1,
h2,
h3 {
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0;
}

/* ---------- Kop ---------- */

header {
  padding-block: 22px;
  border-bottom: 1px solid var(--nevel);
}
.merk {
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 44rem;
  margin: 0 auto;
}
.merk svg {
  height: 30px;
  width: auto;
  color: var(--inkt);
}
.merk .naam {
  font-size: 22px;
  letter-spacing: -0.02em;
}
.merk .naam b {
  font-weight: 800;
}
.merk .naam span {
  font-weight: 500;
}

/* ---------- Opening ---------- */

.opening {
  padding-block: 72px 56px;
}
.opening p.eyebrow {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--leisteen);
}
.opening h1 {
  font-size: clamp(34px, 7vw, 52px);
  line-height: 1.08;
  font-weight: 800;
}
.opening .staart {
  margin: 22px 0 0;
  font-size: 20px;
  line-height: 1.55;
  color: var(--leisteen);
  max-width: 34rem;
}

.knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.knop {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding-inline: 24px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
}
.knop.vol {
  background: var(--iris);
  color: #fff;
}
@media (prefers-color-scheme: dark) {
  .knop.vol {
    color: #17141f;
  }
}
.knop.vol:hover {
  opacity: 0.9;
}
.knop.leeg {
  border-color: var(--nevel);
  color: var(--inkt);
}
.knop.leeg:hover {
  border-color: var(--leisteen);
}
.knop:focus-visible {
  outline: 2px solid var(--iris);
  outline-offset: 3px;
}

/* ---------- Secties ---------- */

section {
  padding-block: 44px;
  border-top: 1px solid var(--nevel);
}
section h2 {
  font-size: clamp(25px, 4.5vw, 32px);
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 18px;
}
section p {
  margin: 0 0 16px;
  max-width: 38rem;
}
section p:last-child {
  margin-bottom: 0;
}
.gedempt {
  color: var(--leisteen);
}

/* ---------- Wat het doet ---------- */

.lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.lijst li {
  background: var(--vlak);
  padding: 17px 20px;
  display: grid;
  gap: 4px;
}
.lijst li:first-child {
  border-radius: 12px 12px 2px 2px;
}
.lijst li:last-child {
  border-radius: 2px 2px 12px 12px;
}
.lijst b {
  font-weight: 650;
}
.lijst span {
  color: var(--leisteen);
  font-size: 16px;
}

/* ---------- De bewijstabel ---------- */

.bewijs-houder {
  overflow-x: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 16px;
  min-width: 30rem;
}
caption {
  text-align: left;
  color: var(--leisteen);
  font-size: 15px;
  padding-bottom: 14px;
}
th,
td {
  text-align: left;
  padding: 13px 14px;
  border-bottom: 1px solid var(--nevel);
  vertical-align: top;
}
thead th {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--leisteen);
}
td:first-child {
  font-weight: 600;
  width: 42%;
}
td code,
p code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--iris-wolk);
  color: var(--iris-diep);
  padding: 1px 5px;
  border-radius: 4px;
}
@media (prefers-color-scheme: dark) {
  td code,
  p code {
    color: var(--iris-diep);
  }
}

/* ---------- Prijzen ---------- */

.prijzen {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}
@media (min-width: 640px) {
  .prijzen {
    grid-template-columns: 1fr 1fr;
  }
}
.prijs {
  background: var(--vlak);
  border-radius: 12px;
  padding: 22px 22px 24px;
  /* Laat de inhoud de hoogte bepalen, maar houd de twee gelijk zodat de
     randen uitlijnen — twee kaarten van verschillende hoogte lezen als een
     fout, niet als een keuze. */
  display: flex;
  flex-direction: column;
}
.prijs .soort {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--leisteen);
  margin: 0 0 10px;
}
.prijs .bedrag {
  font-size: 32px;
  font-weight: 750;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  font-variant-numeric: tabular-nums;
}
.prijs .bedrag span {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--leisteen);
}
.prijs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: 16px;
}
.prijs li {
  padding-left: 24px;
  position: relative;
  color: var(--leisteen);
}
.prijs li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--geboekt);
  border-bottom: 2px solid var(--geboekt);
  transform: rotate(-45deg);
}
.na-prijzen {
  margin-top: 18px;
}

/* ---------- Plaatshouder ---------- */

.plaatshouder {
  border: 2px dashed var(--iris);
  border-radius: 12px;
  padding: 20px 22px;
  background: var(--iris-wolk);
}
.plaatshouder p:first-child {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--iris-diep);
  margin-bottom: 10px;
}
@media (prefers-color-scheme: dark) {
  .plaatshouder p:first-child {
    color: var(--iris-diep);
  }
}

/* ---------- Voet ---------- */

footer {
  border-top: 1px solid var(--nevel);
  padding-block: 30px 52px;
  color: var(--leisteen);
  font-size: 15px;
}
footer p {
  margin: 0 0 6px;
  max-width: 38rem;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}