/* Paes Projects huisstijl: tokens + componenten (.pp-*). Bron: Design System "Paes Projects" (claude.ai/artifact/2rpyVjdd85ySmZNiBLmDrG), afgeleid van website/site.
   Lettertypen: laad Inter Tight + Instrument Serif via Google Fonts in de pagina. */
:root{
  --bg:#111214;--surface:#18191c;--raised:#141518;--field:#16171a;--field-on:#1d1e22;
  --line:#2a2b2f;--line-strong:#2c2d31;--line-card:#26272b;--line-foot:#222327;
  --ink:#ecece9;--ink-soft:rgba(236,236,233,.62);--ink-muted:rgba(236,236,233,.5);--ink-faint:rgba(236,236,233,.45);
  --focus:#8e8f8c;--white:#ffffff;--black:#000000;
  --stone:#d2d3d3;--paper:#e9e9e6;--stone-ink:#141517;--stone-ink-soft:rgba(20,21,23,.62);--stone-line:rgba(20,21,23,.18);
  --ok:#7fb48a;--warn:#d9a85b;--error:#e0796d;
  --space-1:6px;--space-2:12px;--space-3:14px;--space-4:18px;--space-5:22px;--space-6:28px;--space-7:40px;--space-8:88px;
  --radius-s:10px;--radius-m:12px;--radius-l:16px;--radius-pill:999px;
  --font-sans:"Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif:"Instrument Serif", Georgia, "Times New Roman", serif;
}

/* Paes Projects — componenten, overgenomen uit website/site (site.css). Alleen tokens, geen losse kleuren. */
[hidden]{display:none!important}
.pp{font-family:var(--font-sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
.pp *{box-sizing:border-box}
.pp em{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.06em}

/* Logo: typografisch blok, nooit een plaatje */
.pp-logo{display:inline-flex;align-items:center;background:var(--black);color:var(--white);font-family:var(--font-sans);font-weight:600;
  letter-spacing:.2em;font-size:13px;padding:11px 14px 11px 16px;border:1px solid rgba(255,255,255,.14);white-space:nowrap;text-decoration:none}

/* Knoppen */
.pp-btn{display:inline-flex;align-items:center;gap:10px;font-family:inherit;font-size:14px;font-weight:500;padding:11px var(--space-4);
  border:1px solid currentColor;border-radius:var(--radius-pill);background:none;color:var(--ink);cursor:pointer;white-space:nowrap;
  transition:background .25s,color .25s;text-decoration:none}
.pp-btn:hover{background:var(--ink);color:var(--bg)}
.pp-btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.pp-btn--solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pp-btn--solid:hover{background:var(--white);border-color:var(--white)}
.pp-btn--quiet{border-color:transparent;color:var(--ink-soft)}
.pp-btn--quiet:hover{background:none;color:var(--ink)}
.pp-btn[disabled]{opacity:.4;cursor:not-allowed}
.pp-btn--big{font-size:15px;padding:15px 24px}

/* Kicker */
.pp-kicker{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.pp-kicker::before{content:"";width:28px;height:1px;background:currentColor}

/* Tag en status */
.pp-tag{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:4px 10px;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.pp-tag i{width:7px;height:7px;border-radius:50%;background:var(--ink-muted)}
.pp-tag--ok i{background:var(--ok)}
.pp-tag--warn i{background:var(--warn)}
.pp-tag--error i{background:var(--error)}

/* Invulveld */
.pp-field label{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:8px}
.pp-field input,.pp-field textarea,.pp-field select{width:100%;background:var(--field);border:1px solid var(--line-strong);border-radius:var(--radius-s);
  color:var(--ink);font:inherit;font-size:15px;padding:var(--space-3);outline:none;transition:border-color .2s}
.pp-field input::placeholder,.pp-field textarea::placeholder{color:var(--ink-faint)}
.pp-field input:focus,.pp-field textarea:focus,.pp-field select:focus{border-color:var(--focus)}
.pp-field textarea{min-height:130px;resize:vertical}
.pp-field small{display:block;margin-top:7px;font-size:13px;color:var(--ink-muted)}
.pp-field--error input,.pp-field--error textarea{border-color:var(--error)}
.pp-field--error small{color:var(--error)}
.pp-fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.pp-fields .full{grid-column:1/-1}
@media (max-width:560px){.pp-fields{grid-template-columns:1fr}}

/* Keuzetegel: radio (rondje) of checkbox (vierkantje) */
.pp-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2)}
@media (max-width:560px){.pp-opts{grid-template-columns:1fr}}
.pp-opt{position:relative;display:block;cursor:pointer}
.pp-opt input{position:absolute;opacity:0;pointer-events:none}
.pp-opt div{position:relative;border:1px solid var(--line-strong);border-radius:var(--radius-m);padding:var(--space-4) var(--space-4) var(--space-4) 50px;
  background:var(--field);min-height:64px;transition:border-color .2s,background .2s}
.pp-opt div::before{content:"";position:absolute;left:18px;top:21px;width:16px;height:16px;border:1px solid var(--ink-muted);border-radius:50%}
.pp-opt input[type=checkbox]+div::before{border-radius:4px}
.pp-opt input:checked+div{border-color:var(--ink);background:var(--field-on)}
.pp-opt input[type=radio]:checked+div::before{background:radial-gradient(circle,var(--ink) 0 4px,transparent 4.5px)}
.pp-opt input[type=checkbox]:checked+div::before{background:var(--ink);box-shadow:inset 0 0 0 3px var(--field-on)}
.pp-opt input:focus-visible+div{outline:2px solid var(--focus);outline-offset:2px}
.pp-opt b{display:block;font-weight:500;font-size:16px}
.pp-opt small{display:block;color:var(--ink-muted);font-size:13px;margin-top:3px}

/* Voortgang in stappen */
.pp-prog{display:flex;gap:var(--space-1)}
.pp-prog i{flex:1;height:2px;background:var(--line);border-radius:2px;transition:background .3s}
.pp-prog i.on{background:var(--ink)}

/* Kaart */
.pp-card{background:var(--surface);border:1px solid var(--line-card);border-radius:var(--radius-l);padding:var(--space-6) 26px 26px;display:flex;flex-direction:column;gap:10px}
.pp-card .n{font-size:12px;letter-spacing:.16em;color:var(--ink-faint)}
.pp-card h3{font-size:21px;font-weight:500;letter-spacing:-.02em;margin:0}
.pp-card p{color:var(--ink-soft);font-size:14.5px;line-height:1.55;margin:0}
.pp-card .more{margin-top:auto;padding-top:var(--space-5);font-size:13px;display:flex;align-items:center;gap:8px;color:var(--ink-soft)}

/* Lijst met haarlijnen (stappen, prijsregels, FAQ) */
.pp-rows{border-top:1px solid var(--line)}
.pp-rows > *{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:var(--space-5) 0;border-bottom:1px solid var(--line)}
.pp-rows .num{font-variant-numeric:tabular-nums;white-space:nowrap}