/* /procescheck — landingspagina met één doel.

   Opzet overgenomen van de referentie die Tygo aanwees: altijd donker, geen
   navigatie, alles binnen één schermhoogte. Twee dingen bewust anders zodat het
   Ascentive blijft: het accent is ons lichtblauw in plaats van zuurgroen, en
   knoppen zijn pilvormig, want er zitten nergens scherpe hoeken in dit merk.

   Amins ronde bracht bewijs, een vervolgstap en langere koppen mee. In één
   kolom van 680 px paste dat niet meer op één scherm. Vandaar het tweekoloms
   raster op desktop: verhaal links, formulier rechts. Onder 900 px stapelt het
   en mag de pagina wél scrollen — daar leest niemand twee kolommen naast elkaar.

   Geen html.dark-varianten: deze pagina is altijd donker, ongeacht het thema
   dat iemand op de rest van de site heeft gekozen. */

:root {
  --pc-bg: #0a0a0a;
  --pc-vlak: #141618;
  --pc-rand: #24272b;
  --pc-wit: #ffffff;
  --pc-grijs: #9aa1a8;
  --pc-accent: #7CC3DE;   /* 10,10:1 op #0a0a0a, ruim boven AAA */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--pc-bg);
  color: var(--pc-wit);
  font-family: "Urbanist", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.pc {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 28px 26px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pc-raster {
  display: grid;
  grid-template-columns: 1fr 400px;
  grid-template-areas:
    "verhaal   kaart"
    "onderbouw kaart";
  column-gap: 52px;
  row-gap: 0;
  align-items: start;
}
.pc-verhaal   { grid-area: verhaal; }
.pc-kaart     { grid-area: kaart; align-self: center; }
.pc-onderbouw { grid-area: onderbouw; }

/* --- kop ------------------------------------------------------------------ */

.pc-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pc-accent);
}
.pc-streep {
  width: 30px;
  height: 1.5px;
  background: var(--pc-accent);
  flex: none;
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(27px, 3.1vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.pc-accent { color: var(--pc-accent); }

.pc-onder {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--pc-grijs);
}

/* --- bewijs --------------------------------------------------------------- */

.pc-bewijs {
  margin: 0 0 20px;
  padding-left: 18px;
  border-left: 2px solid var(--pc-accent);
}
.pc-cijfer {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--pc-accent);
}
.pc-cijfer-uitleg {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--pc-grijs);
}

.pc-klanten { margin: 0 0 22px; }
.pc-klanten-kop {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7178;
}
.pc-logos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #c3cad0;
}
/* Puntje als scheiding in plaats van een rand om elke naam: rustiger, en het
   leest als één opsomming in plaats van drie losse knoppen. */
.pc-logos li + li::before {
  content: "·";
  margin-right: 14px;
  color: #4a5057;
}

/* --- vervolgstap ---------------------------------------------------------- */

.pc-vervolg {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--pc-rand);
  font-size: 14px;
  line-height: 1.55;
  color: var(--pc-grijs);
}
.pc-vervolg a {
  color: var(--pc-wit);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--pc-accent);
}
.pc-vervolg a:hover { color: var(--pc-accent); }

/* --- de kaart ------------------------------------------------------------- */

.pc-kaart {
  background: linear-gradient(160deg, rgba(124, 195, 222, 0.10), rgba(124, 195, 222, 0) 62%), var(--pc-vlak);
  border: 1px solid var(--pc-rand);
  border-radius: 20px;
  padding: 26px 26px 22px;
}
.pc-kaart h2 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Genummerd, niet afgevinkt: dit zijn drie stappen die je op volgorde doet,
   en die volgorde is informatie. */
.pc-stappen {
  list-style: none;
  counter-reset: stap;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pc-stappen li {
  counter-increment: stap;
  display: flex;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #d5dade;
}
.pc-stappen li::before {
  content: counter(stap);
  flex: none;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(124, 195, 222, 0.14);
  color: var(--pc-accent);
  font-size: 11.5px;
  font-weight: 800;
  text-align: center;
  line-height: 20px;
  position: relative;
  top: 1px;
}

/* --- formulier ------------------------------------------------------------ */

.pc-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pc-grijs);
}

#pc-form input {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 11px;
  border: 1px solid var(--pc-rand);
  border-radius: 12px;
  background: #0d0f11;
  color: var(--pc-wit);
  font-family: inherit;
  font-size: 16px; /* 16px voorkomt dat iOS bij focus inzoomt */
  outline: none;
  transition: border-color 0.2s;
}
#pc-form input::placeholder { color: #5b6167; }
#pc-form input:focus { border-color: var(--pc-accent); }
#pc-form input:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 1px; }
#pc-form input[aria-invalid="true"] { border-color: #e05a5a; }

.pc-knop {
  width: 100%;
  padding: 15px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--pc-accent);
  color: #0a0a0a;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 800;
  cursor: pointer;
  transition: filter 0.2s;
}
.pc-knop:hover { filter: brightness(1.08); }
.pc-knop:disabled { opacity: 0.55; cursor: default; }
.pc-knop:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 3px; }

/* Wat er ná het invullen gebeurt, staat direct onder de knop. Daarboven weet
   de bezoeker alleen dat hij zijn nummer weggeeft, niet wat hij terugkrijgt. */
.pc-onderveld {
  margin: 12px 0 0;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: #d5dade;
}
.pc-gerust {
  margin: 5px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: #6b7178;
}

/* lead.js hangt zijn statusregel onderaan het formulier; hier centreren. */
#pc-form .lead-status { text-align: center; }

/* --- voet ----------------------------------------------------------------- */

.pc-voet {
  margin: 26px 0 0;
  text-align: center;
  font-size: 12px;
  color: #565c62;
}
.pc-voet a { color: inherit; text-decoration: none; }
.pc-voet a:hover { color: var(--pc-grijs); }

/* --- compacter op een lager scherm ---------------------------------------- */

/* Liever alles een tandje kleiner dan een pagina die net niet past. */
@media (min-width: 901px) and (max-height: 840px) {
  .pc { padding: 26px 28px 20px; }
  .pc-raster { column-gap: 44px; }
  h1 { font-size: clamp(25px, 2.6vw, 31px); margin-bottom: 14px; }
  .pc-eyebrow { margin-bottom: 14px; }
  .pc-onder { margin-bottom: 18px; font-size: 15px; }
  .pc-bewijs { margin-bottom: 18px; }
  .pc-klanten { margin-bottom: 18px; }
  .pc-klanten-kop { margin-bottom: 8px; }
  .pc-vervolg { padding-top: 14px; }
  .pc-kaart { padding: 22px 22px 18px; }
  .pc-kaart h2 { margin-bottom: 13px; font-size: 18.5px; }
  .pc-stappen { margin-bottom: 18px; gap: 6px; }
  .pc-voet { margin-top: 18px; }
}

/* --- gestapeld ------------------------------------------------------------ */

@media (max-width: 900px) {
  /* Twee kolommen naast elkaar leest hier niet meer, dus stapelen. Dan is
     scrollen onvermijdelijk en hoeft de inhoud niet meer verticaal te centreren. */
  .pc {
    min-height: 0;
    justify-content: flex-start;
    max-width: 620px;
    padding: 32px 22px 24px;
  }
  /* Het formulier is het enige doel van deze pagina, dus dat komt op mobiel
     direct onder de belofte. Het bewijs en de vervolgstap zakken eronder, voor
     wie na het lezen van de kop nog niet overtuigd is. */
  .pc-raster {
    grid-template-columns: 1fr;
    grid-template-areas: "verhaal" "kaart" "onderbouw";
    row-gap: 0;
  }
  .pc-kaart { align-self: stretch; }
  .pc-onderbouw { margin-top: 28px; }
}

@media (max-width: 520px) {
  .pc { padding: 26px 18px 20px; }
  h1 { font-size: 26px; }
  .pc-onder { font-size: 15px; }
  /* Bij afbreken belandt het scheidingspuntje vooraan de nieuwe regel; dan
     liever helemaal geen puntjes en wat meer lucht ertussen. */
  .pc-logos { gap: 5px 18px; font-size: 13px; }
  .pc-logos li + li::before { display: none; }
  .pc-kaart { padding: 20px 18px 17px; }
  .pc-voet { margin-top: 20px; }
}