/* =========================================================
   Hoe het werkt (hoe-het-werkt.html)
   Gebaseerd op byestuff-how-v16 (zelfde merkstijl als de homepage).
   ========================================================= */

:root {
  --how-yellow: #fff1a0;
  --how-mint: #e1f9e9;
  --how-lilac: #efe1ff;
  --how-muted: #49453f;
  --how-border: #e8e4dc;
  --how-width: 1180px;
}
.bs-icon{width:19px;height:19px;object-fit:contain}
.how-hero{background:radial-gradient(ellipse at 90% 90%,#ffdcad 0,transparent 52%),linear-gradient(100deg,#fff4ae,#fff7c9);overflow:hidden}
.hero-inner{max-width:var(--how-width);margin:auto;display:grid;grid-template-columns:1.04fr 1.15fr;align-items:center;min-height:520px;gap:20px;padding:32px 0 26px}
.eyebrow{font-size:12px;letter-spacing:1.6px;font-weight:700;margin-bottom:9px}
.hero-copy{position:relative;z-index:1}
.hero-copy h1{font-family:var(--bs-heading);font-size:61px;line-height:1.04;font-weight:900;letter-spacing:-2.3px}
.hero-copy h1 span{display:block}
.hero-copy h1 .pink{color:var(--bs-pink)}
.hero-copy>p{font-size:17px;line-height:25px;max-width:460px;margin:17px 0 20px}
.hero-copy .bs-button{min-width:215px}
.inline-link{border:0;background:none;color:#111;display:inline-flex;align-items:center;gap:6px;padding:0;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.hero-copy .inline-link{display:flex;max-width:450px;margin-top:12px;line-height:20px;text-align:left}
.inline-link .bs-icon{width:16px;height:16px;flex:0 0 16px}
.hero-visual{position:relative;align-self:stretch;display:flex;align-items:end}
.hero-visual>img:not(.doodle){width:100%;height:460px;object-fit:contain;filter:drop-shadow(0 16px 13px #71400d20)}
.doodle{position:absolute;width:68px;height:68px;pointer-events:none}
.hero-visual .doodle{left:6px;top:42px;transform:rotate(-22deg)}
.hero-visual .doodle.second{left:auto;right:-8px;top:auto;bottom:30px;transform:rotate(110deg)}
.how-page{max-width:var(--how-width);margin:auto;padding:25px 0 30px}
.steps-title{font:900 34px/42px var(--bs-heading);letter-spacing:-1px;margin-bottom:25px;display:flex;align-items:center;gap:14px}
.title-lines{width:36px;height:36px;transform:rotate(55deg);opacity:.8;filter:invert(74%) sepia(72%) saturate(1500%) hue-rotate(358deg)}
.how-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px}
.how-step{min-width:0;position:relative}
.step-heading{display:flex;gap:11px;align-items:center;min-height:48px;margin-bottom:7px}
.step-number{display:grid;place-items:center;flex:0 0 44px;height:44px;border-radius:50%;font-size:25px;font-weight:800;background:#ffc9df}
.how-step:nth-child(2) .step-number{background:#e4cbff}
.how-step:nth-child(3) .step-number{background:#c4f6db}
.how-step:nth-child(4) .step-number{background:#ffdf62}
.step-heading h3{font-size:18px;line-height:22px;font-weight:800;letter-spacing:-.5px}
.step-heading h3 small{font-size:13px;display:block;font-weight:600;letter-spacing:0}
.how-step-content>p{font-size:14px;line-height:21px;min-height:104px;padding:0 8px}
.photo-wrap{position:relative}
.how-step-image{width:100%;height:250px;border-radius:14px;object-fit:contain;background:#fff0b7}
.how-step:nth-child(2) .how-step-image{background:#fff3dc}
.how-step:nth-child(3) .how-step-image{object-fit:cover;background:white}
.photo-wrap .doodle{width:40px;height:40px;left:8px;top:10px;transform:rotate(-20deg)}
.how-step:not(:last-child)>.step-flow-arrow{position:absolute;right:-24px;top:283px;width:24px;height:24px;z-index:2}
.how-step:last-child>.step-flow-arrow{display:none}
.checklist{list-style:none;padding:15px 17px;border-radius:0 0 13px 13px;background:#fff0f5;min-height:120px}
.how-step:nth-child(2) .checklist{background:#f6edff}
.checklist li{display:flex;align-items:center;gap:8px;font-size:12px;line-height:19px;margin:6px 0}
.check{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#09ad50;color:white;flex:0 0 17px;font-size:12px}
.process-list{display:grid;grid-template-columns:1fr 1fr;list-style:none;gap:13px 7px;padding:20px 13px;background:#edf9ee;border-radius:0 0 13px 13px;min-height:120px}
.process-list li{display:flex;gap:6px;align-items:center;font-size:11px;line-height:16px}
.process-list .bs-icon{width:17px;height:17px;filter:brightness(0)}
.balance-visual{height:250px;border-radius:14px;background:#fff1b0;display:flex;justify-content:center;padding:15px 17px 0;overflow:hidden}
.balance-screen{background:white;border:5px solid #111;border-bottom:0;border-radius:22px 22px 0 0;padding:13px 13px;width:100%;max-width:220px;box-shadow:4px 6px 0 #1111;transform:rotate(3deg)}
.balance-screen>.brand-mini{width:94px;margin:0 auto 12px}
.balance-screen .balance-label{font-size:11px;font-weight:700}
.balance-screen strong{font-size:26px;line-height:35px;display:block}
.balance-screen .balance-button{font-size:11px;border:0;background:var(--bs-pink);color:white;border-radius:24px;width:100%;padding:8px;margin:6px 0 10px;font-weight:700}
.balance-screen .balance-row{display:flex;gap:7px;align-items:center;font-size:9px;line-height:15px;padding:7px 0;border-top:1px solid #f1eee7}
.balance-dot{width:20px;height:20px;background:#c8f7da;border-radius:50%;display:grid;place-items:center}
.choice-info{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding-top:9px}
.choice-info article{border-radius:12px;background:#fff8d8;padding:11px 9px;font-size:10px;line-height:15px}
.choice-info article+article{background:#eef9ee}
.choice-info h4{font-size:13px;display:flex;gap:5px;align-items:center;margin-bottom:5px}
.choice-info .bs-icon{width:15px;height:15px;filter:brightness(0)}
.how-exceptions{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px}
.how-exception-card{position:relative;display:flex;gap:13px;align-items:start;background:#fff0f5;padding:23px 19px;border-radius:15px;min-height:164px;overflow:hidden}
.how-exception-card+article{background:#fff7df}
.exception-icon{display:grid;place-items:center;background:#ffd5e6;flex:0 0 45px;height:45px;border-radius:50%}
.exception-icon .bs-icon{width:25px;height:25px;filter:brightness(0)}
.how-exception-card+article .exception-icon{background:#ffe9a1}
.exception-copy{position:relative;z-index:1;flex:1}
.exception-copy h3{font-size:19px;line-height:25px;font-weight:800;margin-bottom:7px;letter-spacing:-.4px}
.exception-copy p{font-size:13px;line-height:21px;max-width:365px}
.exception-copy .inline-link{color:#d90061;margin-top:11px;font-size:12px}
.exception-photo{width:95px;height:120px;object-fit:contain;border-radius:10px;align-self:center;mix-blend-mode:multiply}
.how-final-cta{margin-top:25px;display:grid;grid-template-columns:1fr 1.12fr;align-items:center;background:linear-gradient(110deg,#fff1a0,#fff7c7 50%,#ffe5c3);padding:28px 36px;border-radius:18px;min-height:340px;overflow:hidden}
.final-copy h2{font:900 42px/45px var(--bs-heading);letter-spacing:-1.2px;max-width:440px}
.final-copy p{font-size:16px;line-height:24px;max-width:380px;margin:10px 0 19px}
.final-copy .bs-button{min-width:210px}
.final-visual{position:relative}
.final-visual .box-photo{width:100%;height:305px;object-fit:contain;filter:drop-shadow(0 10px 10px #71330920)}
.final-visual .doodle{left:-10px;top:20px;transform:rotate(-20deg)}
.demo-note{font-size:10px;color:#665e51;line-height:17px;margin-top:16px}
@media(max-width:1240px) {
  .hero-inner{padding:30px 32px 25px}
  .how-page{padding:25px 32px 30px}
  .hero-copy h1{font-size:53px}
  .hero-visual>img:not(.doodle){height:425px}
  .how-steps{gap:20px}
  .step-heading h3{font-size:16px}
  .how-step-content>p{min-height:123px}
  .exception-photo{width:70px}
}
@media(max-width:1020px) {
  .hero-inner{min-height:470px}
  .hero-copy h1{font-size:45px;letter-spacing:-1.5px}
  .hero-copy>p{font-size:15px;line-height:23px}
  .hero-visual>img:not(.doodle){height:380px}
  .how-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .how-step-content>p{min-height:87px}
  .how-step:not(:last-child)>.step-flow-arrow{display:none}
  .how-step-image,.balance-visual{height:275px}
  .step-heading h3{font-size:20px}
  .how-exceptions{gap:16px}
  .exception-photo{display:none}
  .final-copy h2{font-size:35px;line-height:39px}
  .how-final-cta{padding:27px}
  .final-visual .box-photo{height:260px}
}
@media(max-width:760px) {
  .hero-inner{display:flex;flex-direction:column;gap:10px;padding:27px 22px 18px}
  .hero-copy h1{font-size:43px;line-height:1.06}
  .hero-copy>p{font-size:15px;line-height:24px;max-width:100%}
  .hero-copy .bs-button,.final-copy .bs-button{width:100%}
  .hero-copy .inline-link{font-size:12px}
  .hero-visual{width:100%;align-self:auto}
  .hero-visual>img:not(.doodle){height:290px}
  .hero-visual .doodle{width:45px;height:45px;top:0}
  .hero-visual .doodle.second{right:0;bottom:5px}
  .how-page{padding:25px 20px}
  .steps-title{font-size:27px;line-height:34px;gap:7px;margin-bottom:22px}
  .title-lines{width:25px;height:25px;flex:0 0 25px}
  .how-steps{grid-template-columns:1fr;gap:27px}
  .how-step-content>p{min-height:0;font-size:15px;line-height:24px;margin-bottom:14px;padding:0}
  .step-heading h3{font-size:20px;line-height:25px}
  .step-heading h3 small{font-size:15px}
  .how-step-image,.balance-visual{height:310px}
  .checklist{min-height:0;padding:13px 17px}
  .checklist li{font-size:14px;line-height:23px}
  .process-list{min-height:0;padding:18px 17px}
  .process-list li{font-size:13px;line-height:20px}
  .balance-screen{max-width:245px;padding:20px}
  .balance-screen strong{font-size:31px}
  .balance-screen .balance-row{font-size:11px;padding:11px 0}
  .balance-screen .balance-label{font-size:13px}
  .balance-screen .balance-button{font-size:13px;padding:9px}
  .choice-info article{font-size:12px;line-height:20px;padding:14px}
  .choice-info h4{font-size:15px}
  .how-exceptions{grid-template-columns:1fr;gap:16px;margin-top:28px}
  .how-exception-card{padding:20px 16px}
  .exception-copy h3{font-size:19px;line-height:25px}
  .exception-copy p{font-size:14px;line-height:23px}
  .how-final-cta{display:flex;flex-direction:column;align-items:stretch;padding:25px 20px;gap:14px;margin-top:20px}
  .final-copy h2{font-size:36px;line-height:39px}
  .final-copy p{font-size:15px;line-height:23px}
  .final-visual .box-photo{height:235px}
  .final-visual .doodle{width:45px;height:45px;left:0}
  .demo-note{font-size:10px}
}
@media(max-width:360px) {
  .hero-copy h1{font-size:37px}
  .hero-inner{padding-left:17px;padding-right:17px}
  .how-page{padding-left:15px;padding-right:15px}
  .steps-title{font-size:24px;line-height:31px}
  .hero-visual>img:not(.doodle){height:255px}
  .how-step-image,.balance-visual{height:270px}
  .how-exception-card{gap:10px}
  .exception-icon{width:35px;height:35px;flex-basis:35px}
  .final-copy h2{font-size:30px;line-height:34px}
}

/* ---------- Aanvullingen voor de website ---------- */
.hero-copy .bs-button { min-width: 215px; border-radius: 999px; min-height: 50px; font-size: 16px; }
.how-final-cta .bs-button { min-width: 210px; border-radius: 999px; min-height: 50px; font-size: 16px; }
.inline-link { text-decoration: underline; }
.inline-link:hover { color: var(--bs-pink); }
.balance-button { display: block; text-align: center; }
.inline-link .bs-icon { width: 16px; height: 16px; }

/* =========================================================
   Stappen als nette, gelijke kaarten (zelfde kleuren en letters)
   ========================================================= */
.how-steps { gap: 24px; align-items: stretch; }
.how-step { display: flex; flex-direction: column; background: #fff; border: 1px solid #efe7d6; border-radius: 20px; padding: 18px 18px 16px; }
.step-heading { min-height: 48px; margin-bottom: 10px; }
.how-step-content > p { padding: 0; min-height: 84px; font-size: 14px; line-height: 21px; color: var(--how-muted); }
.photo-wrap { position: relative; margin: 6px 0 16px; }
.how-step-image, .how-step:nth-child(2) .how-step-image, .how-step:nth-child(3) .how-step-image, .balance-visual {
  width: 100%; height: 200px; border-radius: 14px; background: #fff6dc;
}
.how-step:nth-child(2) .how-step-image, .how-step:nth-child(3) .how-step-image { object-fit: cover; }
.balance-visual { padding: 14px 16px 0; }
.photo-wrap .step-flow-arrow { position: absolute; top: calc(50% - 12px); right: -43px; width: 24px; height: 24px; z-index: 2; background: var(--bs-paper); border-radius: 50%; }
.how-step > .step-flow-arrow { display: none; }

/* Onderste deel van elke kaart: zelfde opbouw, geen losse gekleurde blokken */
.checklist, .how-step:nth-child(2) .checklist, .process-list, .choice-info {
  margin-top: auto; padding: 14px 0 0; border-top: 1px solid #f1ebdf; border-radius: 0; background: none; min-height: 0; list-style: none;
}
.checklist li { font-size: 13px; line-height: 19px; margin: 0 0 8px; }
.checklist li:last-child { margin-bottom: 0; }
.process-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; }
.process-list li { font-size: 13px; line-height: 19px; gap: 8px; }
.process-list .bs-icon { width: 18px; height: 18px; }
.choice-info { display: grid; gap: 8px; }
.choice-info li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 19px; }
.choice-info li strong { margin-right: 2px; }
.choice-info .bs-icon { width: 18px; height: 18px; margin-top: 1px; filter: brightness(0); }

@media (max-width: 1020px) {
  .photo-wrap .step-flow-arrow { display: none; }
  .how-step-content > p { min-height: 0; margin-bottom: 4px; }
  .how-step-image, .how-step:nth-child(2) .how-step-image, .how-step:nth-child(3) .how-step-image, .balance-visual { height: 240px; }
}
@media (max-width: 760px) {
  .how-step { padding: 16px; }
  .how-step-image, .how-step:nth-child(2) .how-step-image, .how-step:nth-child(3) .how-step-image, .balance-visual { height: 240px; }
  .checklist li, .process-list li, .choice-info li { font-size: 14px; line-height: 21px; }
}
.choice-info { grid-template-columns: 1fr; }
.how-page .bs-earnings { padding: 0; margin: 36px 0; }