/* proefles.html inline styles */
.pf-intro{ background:#fff; padding:56px 0 26px; }
.pf-intro h1{ font-size:clamp(38px,5vw,62px); color:var(--ink); margin:4px 0 14px; }
.pf-intro p{ color:var(--muted); font-size:19px; max-width:60ch; margin:0 auto; }
.pf-intro strong{ color:var(--ink); }
.pf-wrap{ background:#f6f7fb; padding:40px 0 90px; min-height:60vh; }

/* stepper */
.stepper{ list-style:none; display:flex; justify-content:center; gap:0; max-width:820px; margin:14px auto 36px; padding:0; }
.step{ display:flex; flex-direction:column; align-items:center; gap:9px; position:relative; flex:1; }
.step:not(:first-child)::before{ content:""; position:absolute; top:21px; left:-50%; width:100%; height:3px; background:#dfe2ee; z-index:0; }
.step.is-done::before{ background:var(--navy,#232a63); }
.dot{ width:44px; height:44px; border-radius:50%; background:#fff; border:2px solid #d7daea; color:#9aa0bd; font-family:var(--display); font-weight:800; font-size:19px; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; transition:.2s; }
.lbl{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:14px; color:#9aa0bd; }
.step.is-active .dot{ background:var(--navy,#232a63); border-color:var(--navy,#232a63); color:#fff; box-shadow:0 0 0 6px rgba(35,42,99,.12); }
.step.is-active .lbl{ color:var(--navy,#232a63); }
.step.is-done .dot{ background:var(--navy,#232a63); border-color:var(--navy,#232a63); color:#fff; }
.step.is-done .lbl{ color:var(--ink); }
:root{ --navy:#232a63; }

.pf-card{ background:#fff; border:1px solid #e7e9f2; border-radius:16px; padding:38px 40px 28px; max-width:920px; margin:0 auto; box-shadow:0 30px 60px -40px rgba(20,30,80,.35); }
.pane{ display:none; }
.pane.is-on{ display:block; animation:fade .25s ease; }
@keyframes fade{ from{ opacity:0; transform:translateY(6px);} to{opacity:1;transform:none;} }
.pane-kicker{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:#9aa0bd; font-size:14px; margin:0 0 22px; }
.pane-hint{ color:var(--muted); margin:-12px 0 22px; }

.opt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.opt-grid--3{ grid-template-columns:repeat(3,1fr); }
.opt{ text-align:left; background:#fff; border:2px solid #e4e7f1; border-radius:12px; padding:22px 24px; cursor:pointer; transition:.16s; display:flex; flex-direction:column; gap:6px; }
.opt:hover{ border-color:#bcc2e0; transform:translateY(-2px); }
.opt b{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:22px; color:var(--ink); }
.opt span{ color:var(--muted); font-size:15px; }
.opt.sel{ border-color:var(--navy); background:#f3f5ff; box-shadow:0 0 0 3px rgba(35,42,99,.1); }

.day-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.day{ text-align:left; border:2px solid #e4e7f1; border-radius:12px; padding:18px 20px; cursor:pointer; background:#fff; transition:.16s; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.day:hover{ border-color:#bcc2e0; }
.day.sel{ border-color:var(--navy); background:#f3f5ff; }
.day b{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:18px; color:var(--ink); }
.day small{ display:block; color:var(--muted); font-weight:400; font-family:var(--body); text-transform:none; letter-spacing:0; font-size:14px; }
.day .pill{ font-size:13px; font-weight:700; color:var(--blue); background:#eaeefb; padding:5px 11px; border-radius:999px; white-space:nowrap; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.fld{ display:flex; flex-direction:column; gap:7px; }
.fld--full{ grid-column:1/-1; }
.fld span{ font-weight:600; font-size:15px; color:var(--ink-2); }
.fld input,.fld textarea{ border:2px solid #e4e7f1; border-radius:10px; padding:13px 15px; font-family:var(--body); font-size:16px; color:var(--ink); background:#fff; transition:.15s; }
.fld input:focus,.fld textarea:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(35,42,99,.1); }
.form-err{ color:var(--red); font-weight:600; font-size:15px; margin:16px 0 0; display:none; }
.form-err.show{ display:block; }

.confirm{ text-align:center; padding:6px 0; }
.confirm-check{ width:64px; height:64px; border-radius:50%; background:#eafaf0; color:#16a34a; font-size:30px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.confirm h3{ font-size:30px; color:var(--ink); }
.confirm > p{ color:var(--muted); max-width:46ch; margin:8px auto 22px; }
.summary{ text-align:left; max-width:460px; margin:0 auto 26px; background:#f6f7fb; border:1px solid #e7e9f2; border-radius:12px; padding:18px 22px; }
.summary div{ display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px dashed #dfe2ee; }
.summary div:last-child{ border-bottom:0; }
.summary dt{ color:var(--muted); font-size:15px; }
.summary dd{ margin:0; font-weight:600; color:var(--ink); text-align:right; font-size:15px; }
.sent{ display:none; padding-top:10px; }
.sent.show{ display:block; }
.confirm.done .summary,.confirm.done > p,.confirm.done > h3,.confirm.done #submitBtn,.confirm.done .confirm-check:first-of-type{ display:none; }

.pf-nav{ display:flex; justify-content:space-between; margin-top:30px; padding-top:22px; border-top:1px solid #eef0f7; }
.pf-help{ text-align:center; margin-top:24px; color:var(--muted); }
.pf-help a{ color:var(--blue); font-weight:600; }

@media (max-width:680px){
  .stepper .lbl{ display:none; }
  .opt-grid,.opt-grid--3,.day-grid,.form-grid{ grid-template-columns:1fr; }
  .pf-card{ padding:26px 20px; }
}