/* MrKliin 6.3 — the approved pricing-page hero, shared by every NL/EN page.
   Deliberately isolated from the catalogue and checkout styles. */
.mk-site-page{--mk-green:#003f35;--mk-ink:#092e2c;--mk-muted:#526b68;--mk-cream:#f8f5ed;--mk-mint:#dcece1;--mk-line:#e9eeeb}
.mk-site-page [hidden]{display:none!important}
.mk-site-page a:focus-visible,.mk-site-page button:focus-visible{outline:3px solid #388270;outline-offset:3px}
.mk-site-page #page-content{scroll-margin-top:20px}
.mk-site-page .mk-skip-link:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mk-site-page .mk-skip-link:focus{display:block;position:absolute;top:10px;left:10px;padding:10px 20px;background:white;color:#003f35;z-index:1000}
.mk-hero{background:#f8f5ed;overflow:hidden}
.mk-hero .mk-icon{width:24px;height:24px;display:block;flex:none}
.mk-hero-inner{width:min(1200px,calc(100% - 80px));margin:0 auto;position:relative;min-height:466px;display:flex;align-items:center}
.mk-hero-copy{width:65%;padding:40px 22px 36px 0;position:relative;z-index:1}
.mk-hero .mk-eyebrow{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.11em;color:#387767;margin:0 0 12px;line-height:1.4}
.mk-site-page .mk-hero h1{font-size:clamp(36px,3.85vw,53px);letter-spacing:-.047em;line-height:1.03;margin:0 0 20px;font-weight:800;color:#082e2b;overflow-wrap:break-word}
.mk-hero-intro{font-size:15px;line-height:1.55;max-width:670px;color:#3a5b57;margin:0 0 24px}
.mk-hero-intro strong{font-weight:650}
.mk-features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:685px}
.mk-hero .mk-round-icon{width:58px;height:58px;border-radius:50%;background:var(--mk-mint);color:var(--mk-green);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mk-hero .mk-round-icon .mk-icon{width:34px;height:34px}
.mk-feature .mk-round-icon{margin:0 0 9px}
.mk-feature h2{font-size:15px;font-weight:750;line-height:1.3;margin:0 0 4px;letter-spacing:-.025em;color:#082e2b}
.mk-feature p{font-size:12px;line-height:1.45;margin:0;color:#365853}
.mk-hero-photo{position:absolute;left:62%;right:min(-40px,calc((1200px - 100vw)/2));top:0;bottom:0;overflow:hidden}
.mk-hero-photo picture{display:block;width:100%;height:100%}
.mk-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:right center}
.mk-hero-photo::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#f8f5ed 0%,rgba(248,245,237,.74) 6%,rgba(248,245,237,0) 24%);pointer-events:none}
.mk-hero-actions{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:23px}
.mk-hero-actions .btn{font-size:13px;line-height:1.4;padding:11px 18px;gap:9px;font-weight:750;max-width:100%;text-align:center;min-height:44px}
.mk-hero-actions .btn .mk-icon{width:17px;height:17px}
.mk-hero-actions .btn:hover{background:#0b5b4d;border-color:#0b5b4d;color:white}
.mk-hero-actions .btn.alt:hover{background:#e5efe7;color:#003f35;border-color:#003f35}
@media(min-width:1700px){.mk-hero-photo{right:-100px}}
@media(max-width:1150px){
 .mk-hero-inner{width:calc(100% - 60px)}
 .mk-hero-copy{width:66%;padding-right:12px}
 .mk-hero-photo{left:64%;right:-30px}
 .mk-hero h1{font-size:44px!important}
 .mk-hero-intro{font-size:14px}
 .mk-features{gap:13px}
 .mk-feature h2{font-size:14px}
 .mk-feature p{font-size:11px}
}
@media(max-width:950px){
 .mk-hero h1{font-size:37px!important}
 .mk-features{gap:10px}
 .mk-feature h2{font-size:13px}
 .mk-hero .mk-round-icon{width:50px;height:50px}
 .mk-hero .mk-round-icon .mk-icon{width:29px;height:29px}
 .mk-hero-inner{min-height:442px}
}
@media(max-width:760px){
 .mk-site-page .top{font-size:11px;padding:7px 15px;line-height:1.4}
 .mk-hero-inner{width:calc(100% - 36px);min-height:0;display:block}
 .mk-hero-copy{width:100%;padding:30px 0 25px}
 .mk-hero h1{font-size:38px!important;max-width:580px;line-height:1.06}
 .mk-desktop-break{display:none}
 .mk-hero-intro{font-size:14px;max-width:590px}
 .mk-features{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:600px}
 .mk-feature h2{font-size:13px}
 .mk-feature p{font-size:11px}
 .mk-hero-photo{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;height:285px;margin:0 auto;max-width:520px;border-radius:16px 16px 0 0}
 .mk-hero-photo img{object-fit:contain;background:#f2eee5;object-position:center}
 .mk-hero-photo::before{display:none}
 .mk-hero-actions{margin-top:21px}
}
@media(max-width:480px){
 .mk-hero h1{font-size:34px!important}
 .mk-hero-copy{padding-top:27px}
 .mk-hero-intro{font-size:13px}
 .mk-features{grid-template-columns:1fr 1fr;gap:18px 20px}
 .mk-feature{display:grid;grid-template-columns:47px 1fr;column-gap:10px;align-items:start}
 .mk-feature .mk-round-icon{grid-column:1;grid-row:1/3;width:47px;height:47px;margin:0}
 .mk-feature h2{font-size:12px;margin:0 0 4px}
 .mk-feature p{font-size:11px;grid-column:2}
 .mk-hero-photo{height:240px}
 .mk-hero-inner{width:calc(100% - 30px)}
 .mk-hero-actions .btn{font-size:12px;padding:10px 13px}
}
@media(prefers-reduced-motion:reduce){.mk-site-page{scroll-behavior:auto}.mk-site-page *{scroll-behavior:auto!important;transition:none!important}}
@media print{.mk-hero-photo,.mk-hero-actions{display:none!important}.mk-hero-copy{width:100%}}
