/* Touch, phone and tablet refinements. */
.hero-copy,.hero-art,.demo,.service-grid>*,.agent-cards>*,.section-heading>*{min-width:0}
.actions{flex-wrap:wrap}
.button,.nav-button,.menu-toggle,.demo-bottom button,.text-link,summary{min-height:44px}
.demo-bottom button{padding:10px 4px}
.hero-note{flex-wrap:wrap;font-size:11px;gap:8px 18px}
.demo-sticker{position:relative;right:auto;bottom:auto;width:fit-content;max-width:100%;margin:18px 0 0 auto;transform:rotate(-5deg);font-size:17px}
.demo-sticker span,.demo-sticker strong{display:inline}
.demo-sticker strong{margin-left:4px}
.demo-sticker svg{display:block;margin-left:auto}
.flow{width:100%}
.flow-step small{font-size:11px;line-height:1.5}
.flow-step strong{font-size:13px}
.demo-bottom>span{font-size:11px}
.demo-header{font-size:9px}
.footer-top>div>a:not(.logo){min-height:36px;display:flex;align-items:center}
input,textarea,select{font-size:16px}
img{max-width:100%;height:auto}
@media(min-width:761px) and (max-width:1050px){
 .hero h1{font-size:clamp(49px,5.9vw,60px)}
 .next-step-grid{gap:30px}
 .service h3{font-size:30px}
 .service-detail,.contact-grid{grid-template-columns:1fr;gap:35px}
 .service-detail>div>p{max-width:620px}
 .detail-stack{grid-template-columns:1fr 1fr;align-items:stretch}
 .form-panel{max-width:760px;width:100%}
 .contact-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
 .agent-cards{gap:16px}
 .agent-cards article{padding:22px}
 .agent-cards h3{font-size:22px}
}
@media(max-width:900px){
 nav{height:76px}
 .menu-toggle{display:flex;align-items:center;gap:15px;border:1px solid #d3ddc7;border-radius:5px;padding:8px 14px;background:transparent;color:var(--green);font-size:14px}
 #navigation{display:none;position:absolute;top:76px;left:0;right:0;background:var(--paper);padding:18px 28px 25px;border-bottom:1px solid var(--line);box-shadow:0 18px 20px #19392d10}
 #navigation.open{display:flex;flex-direction:column;align-items:stretch;gap:4px}
 #navigation>a:not(.nav-button){min-height:44px;display:flex;align-items:center;padding:10px 0}
 #navigation>a[aria-current]:after{right:auto;width:25px}
 .nav-button{margin:10px 0 0;justify-content:space-between}
 .hero{grid-template-columns:minmax(0,1fr);gap:38px;padding-block:48px}
 .hero h1{font-size:clamp(48px,8vw,68px)}
 .hero-copy>p{font-size:16px;max-width:540px}
 .hero .demo{width:100%;max-width:520px;margin-inline:auto}
 .next-step-grid{grid-template-columns:1fr;gap:30px}
 .next-step-grid>div>p{max-width:620px}
 .line-art-panel{max-width:620px;width:100%;margin-inline:auto}
 .about-preview,.about-full{gap:32px}
 html{scroll-padding-top:92px}
}
@media(max-width:760px){
 .wrap{width:calc(100% - 40px)}
 .hero h1{font-size:clamp(45px,10vw,68px)}
 .demo{transform:none;padding:22px}
 .demo-title{font-size:27px}
 .demo-title em{font-size:30px}
 .flow-step{padding:13px;gap:11px}
 .flow-icon{width:32px;height:32px}
 .demo-header{letter-spacing:.8px;gap:6px}
 .demo-bottom{gap:10px}
 .simple-link{font-size:14px;min-height:44px}
 .text-link{font-size:14px}
 .service h3{font-size:30px}
 .service p,.agent-cards p,.detail-stack p,.about-preview p,.about-full p,.contact-copy>p,.next-step-grid>div>p{font-size:16px}
 .contact-facts{display:block}
 .form-panel{padding:22px}
 .form-panel h3{font-size:25px}
 form label{font-size:14px}
 .form-note{font-size:12px}
 .footer-top>div>a:not(.logo){font-size:14px;min-height:44px}
 .footer-top{grid-template-columns:1fr 1.15fr;gap:30px 15px}
 .footer-top>div{min-width:0}
 .footer-top a[href^="mailto:"]{overflow-wrap:anywhere}
 .closing h2{font-size:34px}
 .closing p{font-size:16px}
 .line-art svg g[fill="#657268"]{display:none}
 .line-art:after{content:'Je vraag → Je agent → Je apps';display:block;text-align:center;font-size:12px;margin:-14px 0 20px;color:var(--muted)}
 .line-art-panel>.label{font-size:10px;letter-spacing:1px}
}
@media(max-width:359px){
 .wrap{width:calc(100% - 32px)}
 .hero h1{font-size:43px}
 .hero-note{font-size:10px}
 .demo{padding:18px}
 .demo-sticker{transform:none;font-size:16px}
 .demo-header{font-size:8px}
 .demo-title{font-size:25px}
 .demo-title em{font-size:28px}
 .service,.agent-cards article{padding:22px}
 .service h3{font-size:28px}
 .flow-step{gap:8px;padding:10px}
 .flow-step small{font-size:10px}
 .footer-top{grid-template-columns:1fr}
 .footer-top>div:first-child{grid-column:auto}
 .button{max-width:100%}
}