/* Only the replacement for the old composite visual. */
.how-blocks{width:100%;color:#103d78}
.how-blocks img{max-width:100%;display:block}
.how-blocks-hero{padding:48px 0 36px;background:linear-gradient(110deg,#eef7fc,#fff 65%,#fff4e8)}
.how-blocks-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:38px;align-items:center}
.how-blocks-eyebrow{font-size:23px;font-style:italic;font-weight:bold;margin:0 0 16px}
.how-blocks h1{font-size:clamp(32px,3.5vw,49px);line-height:1.1;letter-spacing:-1px;margin:0 0 22px}
.how-blocks-lead{font-size:18px;line-height:1.6;margin:0 0 23px}
.how-blocks-benefits{display:grid;gap:12px;list-style:none;padding:0;margin:0;font-size:17px;font-weight:bold}
.how-blocks-benefits li{display:flex;align-items:center;gap:12px;line-height:1.4}
.how-blocks-benefits span{display:grid;place-items:center;flex:0 0 31px;height:31px;border-radius:50%;background:#ff8200;color:white;font-size:22px}
.how-blocks-benefits li:nth-child(2) span{background:#079dd5}.how-blocks-benefits li:nth-child(3) span{background:#0aaf5a}
.how-blocks-promise{font-size:18px;line-height:1.5;margin:24px 0 0;color:#1364a3}
.how-blocks-photo{margin:0;min-width:0}.how-blocks-photo img{width:100%;height:auto;border-radius:18px;box-shadow:0 8px 25px #123b6715}
.how-blocks-photo figcaption{font-size:21px;font-style:italic;line-height:1.4;text-align:center;margin-top:16px}
.how-blocks-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-top:38px;padding-bottom:38px}
.how-blocks-card{display:flex;flex-direction:column;min-width:0;padding:22px;border-radius:16px;background:#fff6ed;--accent:#d84900}
.how-blocks-card:nth-child(2){background:#eff7fe;--accent:#086cbb}.how-blocks-card:nth-child(3){background:#eef9f1;--accent:#078440}
.how-blocks-heading{display:flex;gap:12px;align-items:flex-start;min-height:115px;margin-bottom:18px}
.how-blocks-number{display:grid;place-items:center;flex:0 0 44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;font-size:26px;font-weight:bold}
.how-blocks h2{font-size:23px;line-height:1.2;margin:0 0 8px}
.how-blocks-card p{font-size:16px;line-height:1.6;margin:0 0 18px}
.how-blocks-heading p{margin:0;line-height:1.4}
.how-blocks-image{width:100%;height:230px;object-fit:contain;background:white;border-radius:10px;padding:8px;margin-bottom:20px}
.how-blocks-apps{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:8px;height:230px;margin-bottom:20px;background:#fff;border-radius:10px;padding:8px}
.how-blocks-apps img{width:100%;height:214px;object-fit:contain;min-width:0}
.how-blocks-more{font:inherit;font-size:16px;font-weight:bold;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;background:var(--accent);color:#fff;border:0;border-radius:8px;padding:13px 14px;min-height:46px;margin-top:auto;line-height:1.4;cursor:pointer}
.how-blocks-more:hover{filter:brightness(.92)}.how-blocks-more:focus-visible{outline:3px solid #063c7c;outline-offset:3px}
.how-blocks-partners{background:#eaf5ff;padding:27px 0}
.how-blocks-partner-layout{display:flex;gap:25px;align-items:center}
.how-blocks-partner-layout p{font-size:16px;line-height:1.5;margin:0}
.how-blocks-partner-layout .how-blocks-partner-title{font-size:22px;font-style:italic;font-weight:bold;max-width:155px}
.how-blocks-partner-layout ol{list-style:none;margin:0;padding:0;flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.how-blocks-partner-layout li{border-left:4px solid #ff8200;padding-left:12px;font-size:15px;line-height:1.5}
.how-blocks-partner-layout li:nth-child(2){border-color:#168adc}.how-blocks-partner-layout li:nth-child(3){border-color:#0ba959}
.how-blocks-partner-layout li strong,.how-blocks-partner-layout li span{display:block}
#werking .step{scroll-margin-top:100px}
@media(max-width:1000px){.how-blocks-cards{gap:16px}.how-blocks-card{padding:18px}.how-blocks-heading{min-height:150px;gap:9px}.how-blocks h2{font-size:21px}.how-blocks-partner-layout{flex-wrap:wrap}.how-blocks-partner-layout .how-blocks-partner-title{flex-basis:100%;max-width:none}}
@media(max-width:760px){
 .how-blocks-hero{padding:28px 0}.how-blocks-intro{grid-template-columns:minmax(0,1fr);gap:26px}
 .how-blocks h1{font-size:34px}.how-blocks-photo figcaption{font-size:19px}
 .how-blocks-cards{grid-template-columns:minmax(0,1fr);padding-top:28px;padding-bottom:28px;gap:22px}
 .how-blocks-card{padding:22px}.how-blocks-heading{min-height:0;margin-bottom:22px}.how-blocks h2{font-size:24px}
 .how-blocks-card p{font-size:17px}.how-blocks-image{height:auto;max-height:310px}
 .how-blocks-apps{height:260px}.how-blocks-apps img{height:244px}
 .how-blocks-more{margin-top:6px}.how-blocks-partner-layout{display:block}
 .how-blocks-partner-layout .how-blocks-partner-title{margin-bottom:23px}
 .how-blocks-partner-layout ol{grid-template-columns:minmax(0,1fr);gap:20px;margin-bottom:22px}
 .how-blocks-partner-layout li{font-size:16px}
}
@media(max-width:480px){
 .how-blocks h1{font-size:32px}.how-blocks-benefits{font-size:16px}.how-blocks-card{padding:18px}
 .how-blocks-apps{height:230px}.how-blocks-apps img{height:214px}
 /* Keep the existing shared header/footer inside the phone viewport on this tab. */
 body:has(#werking.active) .header{gap:8px;padding-left:12px;padding-right:12px}
 body:has(#werking.active) .header .logo{font-size:20px;gap:5px}
 body:has(#werking.active) .header .logo img{width:35px}
 body:has(#werking.active) .header>.contact{font-size:12px;padding:12px 10px!important}
 body:has(#werking.active) .footer{flex-wrap:wrap}
}