.skip-link{position:absolute;left:16px;top:-100px;z-index:9999;background:white;padding:12px}.skip-link:focus{top:12px}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page-trail{padding-top:18px;padding-bottom:18px;font-size:.82rem;display:flex;gap:8px;flex-wrap:wrap}.page-trail a{color:var(--ink)}

/* Guide pages share the illustrated sections and existing media with the products. */
.guide-hero,.guide-section{position:relative;padding:52px 0 84px;isolation:isolate}
.guide-copy{max-width:920px}
.guide-hero-grid,.guide-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px;align-items:center}
.guide-hero h1{font-size:clamp(2.05rem,3.5vw,3rem);line-height:1.12;letter-spacing:-.5px;text-wrap:balance}
.guide-hero .lead{font-size:1.12rem;line-height:1.65;margin:20px 0 24px;max-width:60ch}
.guide-hero .eyebrow{line-height:1.5}
.guide-copy>p,.guide-split p{line-height:1.8}
.guide-section h2{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.25;margin-bottom:16px;text-wrap:balance}
.guide-section p{margin:1em 0;max-width:75ch}
.guide-section p:last-child{margin-bottom:0}
.guide-section .text-link{font-weight:700;text-underline-offset:4px}
.guide-section .text-link::after{content:' →'}

/* Image metadata reserves space; both axes must still scale in proportion. */
.guide-media{display:grid;place-items:center;margin:0;padding:12px;min-width:0}
.guide-media>img{display:block;width:auto;height:auto;max-width:100%;max-height:430px;object-fit:contain;border-radius:24px;filter:drop-shadow(6px 9px 8px #26364918)}
.guide-media--photo{padding:0}
.guide-media--photo>img{border:6px solid white;border-radius:26px 65px 26px 65px;transform:rotate(2deg)}
.guide-media--paper>img{max-height:330px;border-radius:4px;transform:rotate(-3deg)}
.guide-media--screen>img{max-height:420px}
.guide-demo{min-width:0;padding:10px 12px 20px}
.guide-demo .game-stage{min-height:535px;background:var(--maker);border-radius:49% 51% 42% 58% / 44% 51% 49% 56%}
.guide-demo .phone-demo{width:246px;height:492px;transform:rotate(5deg);cursor:default}
.guide-demo .game-label{left:0;bottom:12px;transform:rotate(-4deg);font-size:20px;max-width:100%}

.guide-section>.section-wave,.guide-hero>.section-wave{position:absolute;left:0;bottom:-1px;display:block;width:100%;height:45px;fill:var(--section-next,var(--paper));pointer-events:none}
.product-flow[data-page=guide]{--band-1:var(--soft);--band-2:var(--scene);--band-3:#fff0c8}
.product-flow[data-page=guide][data-audience=feestje]{--band-1:#ffe5be;--band-2:#e8f4ff;--band-3:#fff0b3}
.product-flow[data-page=guide][data-audience=camping]{--band-1:#dff1fb;--band-2:#fff0c8;--band-3:#ecf0ff}
.product-flow[data-page=guide][data-audience=service]{--band-1:#e8f4ff;--band-2:#fff0c8;--band-3:#fff0c8}
.product-flow[data-brand=dino][data-page=guide][data-audience=gezin]{--band-1:#e4f29f;--band-2:#e5f4fb;--band-3:#ffedc7}
.product-flow[data-brand=dieren][data-page=guide][data-audience=gezin]{--band-1:#d9f1f6;--band-2:#fff1c7;--band-3:#e8f2ff}

.guide-faq details{border-bottom:1px solid var(--line);padding:20px 0}
.guide-faq details:first-child{padding-top:0}
.guide-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:22px;cursor:pointer}
.guide-faq summary::-webkit-details-marker{display:none}
.guide-faq summary::after{content:'+';font-size:28px;color:var(--brand)}
.guide-faq details[open] summary::after{content:'−'}
.guide-faq summary h2{font-size:24px;margin:0}
.guide-directory .guide-copy>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.guide-directory .guide-copy>div>h2,.guide-directory .guide-copy>div>p{grid-column:1/-1}
.guide-directory .guide-copy>div>p:has(>a:only-child){grid-column:auto;margin:0}
.guide-directory p>a:only-child{display:block;background:#fff;padding:18px 22px;border:1px solid var(--line);border-radius:16px;text-decoration:none;height:100%}
.guide-directory p>a:only-child:hover{border-color:var(--brand)}
.guide-choices .guide-copy{max-width:1220px}
.guide-choices .guide-copy>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.guide-choices h2{grid-column:1/-1;text-align:center}
.guide-choices p{margin:0}
.guide-choices .text-link{display:flex;align-items:center;justify-content:space-between;gap:16px;height:100%;padding:22px;background:#fff;border-radius:18px;text-decoration:none;border:1px solid var(--line)}
.guide-choices .text-link:hover{border-color:var(--brand)}

/* A buying action and its terms stay together; product details remain secondary. */
.purchase-box{margin-top:24px}
.purchase-box .purchase-summary{margin:0;line-height:1.35;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.purchase-summary strong{font:800 30px/1.2 var(--heading)}
.purchase-summary span{font-size:16px}
.purchase-box .purchase-terms{font-size:13px;line-height:1.5;margin:5px 0 0;color:var(--ink)}
.purchase-box .purchase-trial{font-size:14px;line-height:1.5;margin:8px 0 0;font-weight:700}
.purchase-links{display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;margin-top:17px}
.purchase-info{font-size:14px;font-weight:700;text-underline-offset:4px}
.choice-card>.purchase-box{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;flex:1}
.choice-card .purchase-summary strong{font-size:28px}
.choice-card .purchase-links{flex-direction:column;align-items:stretch;padding-top:16px;margin-top:auto;gap:12px}
.choice-card .purchase-button{margin:0;text-align:center;justify-content:center;white-space:normal;line-height:1.4}
.choice-card .purchase-info{text-align:center}
.choice-card .purchase-button::after{content:none}
.purchase-qr{display:flex;align-items:center;gap:12px;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.purchase-qr>img{width:144px;height:144px;flex:none;background:#fff;border-radius:4px}
.purchase-qr figcaption{font-size:12px;line-height:1.5;min-width:0}
@media(min-width:761px) and (max-width:1179px){.purchase-qr{flex-direction:column;text-align:center;gap:8px}}
@media(min-width:761px){.choice-card:has(.purchase-box)>p{min-height:4.65em}}

.site-review-note{padding:14px 24px;font-size:.82rem;text-align:center;background:#fff;color:#354657;border-top:1px solid #dce4e8}.site-review-note a{color:inherit;text-decoration:underline}
.footer-links{flex-wrap:wrap}.nav-cta{white-space:nowrap}.nav-links{gap:22px}.brand-logo img{max-height:62px}
@media(max-width:1050px){.guide-hero-grid,.guide-split{gap:36px}.guide-demo .phone-demo{width:215px;height:430px}.guide-demo .game-stage{min-height:475px}}
@media(max-width:760px){
 .guide-hero,.guide-section{padding:32px 0 64px}
 .guide-hero-grid,.guide-split{grid-template-columns:1fr;gap:32px}
 .guide-hero h1{font-size:2rem;text-wrap:pretty}
 .guide-hero .lead{font-size:1.05rem;margin:17px 0 20px}
 .guide-media{max-width:380px;width:100%;margin:0 auto}
 .guide-media>img{max-height:360px}
 .guide-media--paper>img{max-height:280px}
 .guide-demo{max-width:390px;width:100%;margin:auto;padding:0 10px 18px}
 .guide-demo .phone-demo{width:222px;height:444px}
 .guide-demo .game-stage{min-height:490px}
 .guide-demo .game-label{font-size:18px;bottom:9px}
 .guide-directory .guide-copy>div,.guide-choices .guide-copy>div{grid-template-columns:1fr}
 .guide-choices .text-link{padding:18px 20px}
 .guide-faq summary h2{font-size:21px}
 .page-trail{font-size:.75rem}.nav-cta{white-space:normal}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Download collections reuse the page colours and rounded shapes at a readable size. */
.guide-downloads .guide-copy{max-width:1160px}
.download-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:28px 0 40px}
.download-card{background:var(--paper);border:1px solid rgba(36,67,51,.12);border-radius:24px;padding:24px;box-shadow:0 5px 0 rgba(36,67,51,.06)}
.download-card>img{display:block;width:100%;height:240px;object-fit:contain;background:#fff;border-radius:14px;margin:0 0 20px}
.download-card h3,.download-card h4{margin:0 0 12px}
.download-card p{margin:0 0 12px}
@media(max-width:900px){.download-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.download-grid{grid-template-columns:1fr}}

/* The personal code uses the existing page palette and button component. */
:where(.materials-access){display:grid;gap:14px;max-width:580px;margin:28px 0 0}
:where(.materials-access label){font-weight:800}
:where(.materials-access input,.materials-access select,.materials-access textarea){width:100%;min-width:0;padding:14px 16px;border:2px solid var(--brand);border-radius:12px;background:var(--paper);color:var(--ink);font:inherit}
:where(.materials-access input:focus-visible,.materials-access select:focus-visible,.materials-access textarea:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
:where(.materials-access .button){justify-self:start}
:where(.materials-access p,.materials-access small){font-size:.88rem;line-height:1.6}
:where([data-materials-status]){margin-top:20px;overflow-wrap:anywhere}
:where([data-materials-result]){margin-top:36px}
:where([data-materials-result] h2){margin-bottom:18px}
:where([data-materials-result] .guide-split){margin-top:24px}
:where([data-materials-result] .download-card .button){font-size:.9rem;width:100%;white-space:normal}
:where(.materials-access button:disabled){cursor:wait;opacity:.7}

/* Taalkeuze */
.lang-switch{display:flex;gap:.25rem;align-items:center;margin-left:.75rem}
.lang-switch a{padding:.25rem .5rem;border-radius:999px;font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-decoration:none;color:inherit;opacity:.75}
.lang-switch a[aria-current]{background:rgba(0,0,0,.08);opacity:1}
.lang-switch a:hover,.lang-switch a:focus-visible{opacity:1;text-decoration:underline}
@media (max-width:820px){.lang-switch{margin:.5rem 0 0}}
/* Mobiel: menuknop op één regel en compactere taalkeuze naast het logo */
@media (max-width:820px){.menu-button{white-space:nowrap;padding-inline:.85rem}.lang-switch{margin:0 0 0 auto;gap:.1rem}.lang-switch a{padding:.2rem .4rem;font-size:.75rem}}