/* seo-en-geo: CSS van de secties op deze pagina (docs/prototype/seo-en-geo.html, inline <style>).
   Opvolgen staat in seo-shared.css, de snelheidstest in psi.css, de stappen, de vragen en het kruimelpad in styles.css. */
/* Alles in de laag 'components' van de Tailwind-build, zodat utilities (ook hs-*-varianten) blijven winnen. */
@layer components{
/* ---------- pagina: SEO en GEO ---------- */
body{overflow-x:hidden}
.hand{font-family:var(--font-hand);color:var(--color-accent);font-size:20px;line-height:1.25}
/* hero: dezelfde vraag, links als zoekresultaat, rechts als AI-antwoord */
.caret{display:inline-block;width:1px;height:1em;background:var(--color-ink);vertical-align:-.15em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.gv-disc{margin-top:14px;font-size:13px;color:var(--color-ink-3)}
/* hero: één vraag, twee plekken waar je moet staan. Echte zinnen in plaats van grijze balkjes, met een label per kaart */
.qv{container-type:inline-size}
.qv-ask{display:flex;align-items:center;gap:10px;padding:14px 20px;border-radius:999px;background:#fff;box-shadow:var(--shadow-soft);font-size:17px;font-weight:500;white-space:nowrap;overflow:hidden;min-height:56px}
.qv-ask svg{flex:none;width:20px;height:20px;color:var(--color-ink-3)}
.qv-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;align-items:start}
.qv-card{position:relative;padding:18px;border-radius:16px;background:#fff;box-shadow:var(--shadow-lift);opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.qv-a{background:#FFF8F4}
.qv-lab{display:inline-block;margin-bottom:10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink-3)}
.qv-a .qv-lab{color:var(--color-accent-dark)}
.qv-res{padding:10px 0;border-top:1px solid #F0ECE4}
.qv-res small{display:block;font-family:var(--font-mono);font-size:12px;color:var(--color-ok)}
.qv-res b{display:block;margin-top:2px;font-size:15px;font-weight:600;color:var(--color-blueprint)}
.qv-res span{display:block;margin-top:4px;font-size:13px;line-height:1.4;color:var(--color-ink-3)}
.qv-res.me{margin:0 -10px;padding:10px;border-radius:10px;border-top-color:transparent;transition:background-color .5s 1.6s,box-shadow .5s 1.6s}
.qv-res.me b{color:var(--color-accent)}
.qv-txt{font-size:15px;line-height:1.5;color:var(--color-ink)}
.qv-txt mark{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--color-accent);color:#fff;font-size:11px;font-weight:700;vertical-align:1px;transform:scale(0);transition:transform .4s 2.2s cubic-bezier(.3,1.6,.5,1)}
.qv-src{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid rgb(25 23 20 / .08);font-size:14px;font-weight:600}
.qv-src b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--color-accent);color:#fff;font-size:11px}
.play .qv-card{opacity:1;transform:none}
.play .qv-a{transition-delay:.5s}
.play .qv-g{transition-delay:.2s}
.play .qv-res.me{background:#FFF1EA;box-shadow:inset 3px 0 0 var(--color-accent)}
.play .qv-txt mark{transform:none}
@container (max-width:560px){
.qv-grid{grid-template-columns:minmax(0,1fr)}
.qv-ask{font-size:15px}
}
/* herkenning */
.pain-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.pain .obj{height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.pain .obj > *{animation:bob 6s ease-in-out infinite}
.pain:nth-child(2) .obj > *{animation-delay:-1.5s}
.pain:nth-child(3) .obj > *{animation-delay:-3s}
.pain:nth-child(4) .obj > *{animation-delay:-4.5s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(.6deg)}}
.pain h3{font-size:22px;padding-top:16px;border-top:1px solid var(--color-rule)}
.pain p{margin-top:8px;font-size:15px;color:var(--color-ink-2)}
.o-scrib{display:block;margin-top:6px;font-family:var(--font-hand);font-size:14px;color:#2B3F86}
.o-chat{width:100%;max-width:220px;background:#fff;border-radius:10px;box-shadow:0 8px 24px rgb(25 23 20 / .12);padding:10px 12px;font-size:10.5px;line-height:1.4;rotate:-3deg}
.o-chat .u{margin-left:auto;width:fit-content;max-width:90%;padding:4px 8px;border-radius:8px 8px 2px 8px;background:var(--color-paper-2)}
.o-chat .a{margin-top:6px}
.o-chat .a b{font-weight:600}
.o-nap{position:relative;width:100%;max-width:210px;height:120px}
.o-nap div{position:absolute;width:150px;padding:7px 9px;background:#fff;border-radius:6px;box-shadow:0 6px 18px rgb(25 23 20 / .12);font-size:10px;line-height:1.35}
.o-nap div:nth-child(1){left:0;top:0;rotate:-4deg}
.o-nap div:nth-child(2){left:40px;top:34px;rotate:3deg}
.o-nap div:nth-child(3){left:14px;top:70px;rotate:-1deg}
.o-nap small{display:block;font-family:var(--font-mono);font-size:8.5px;color:var(--color-ink-3)}
.o-nap s{color:#C0392B}
.o-site{width:100%;max-width:215px;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgb(25 23 20 / .12);overflow:hidden;rotate:2deg}
.o-site .t{background:#F2EEE6;padding:4px 8px;font-family:var(--font-mono);font-size:9px;color:var(--color-ink-3)}
.o-site .h{padding:9px 10px 2px;font-family:var(--font-serif);font-size:15px;font-weight:600;line-height:1.1}
.o-site .s{padding:0 10px 10px;font-size:10px;color:var(--color-ink-3)}
.o-site .o-scrib{padding:0 10px 8px;margin:0}
.o-robots{width:100%;max-width:205px;background:#FDFCF7;border:1px solid var(--color-rule);border-radius:6px;box-shadow:0 8px 24px rgb(25 23 20 / .1);padding:10px 12px;font-family:var(--font-mono);font-size:10.5px;line-height:1.55;rotate:-1.5deg}
.o-robots .f{display:block;margin-bottom:4px;font-size:9px;color:var(--color-ink-3)}
.o-robots mark{background:#F6C9BA;color:#8A2A12;padding:0 3px;border-radius:2px}
/* twee keuzekaarten */
/* wat helpt */
.helps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;counter-reset:hp}
.help{counter-increment:hp;position:relative;padding:22px 22px 22px 64px}
.help::before{content:counter(hp);position:absolute;left:20px;top:20px;width:30px;height:30px;border-radius:50%;background:var(--color-ink);color:var(--color-paper);display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-weight:700;font-size:15px}
.help h4{font-size:21px;line-height:1.2}
.help p{margin-top:6px;font-size:15.5px;color:var(--color-ink-2)}
.help code{display:block;margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--color-ink);color:#E9E3D7;font-family:var(--font-mono);font-size:12px;line-height:1.55;white-space:pre;overflow-x:auto}
.help code em{font-style:normal;color:var(--color-accent-soft)}
.help.wide{grid-column:1 / -1}
/* afsluiter */
/* responsief en stilstaand */
@media (max-width:1023px){
.pain-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
.pain-row,.helps{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
.pain .obj > *,.caret{animation:none}
.qv-card,.qv-txt mark{opacity:1;transform:none;transition:none}
}
}
/* dienstpagina's: overal dezelfde ruimte rond de hero. Kruimelpad tot de eerste tekst 32px (gsm) en 48px (desktop),
   laatste regel van de hero tot de titel van het volgende blok 112px en 144px. De marges hieronder corrigeren de
   eigen opbouw van deze hero naar die maten; in Wagtail wordt het één gedeelde instelling op de heroblokken. */
/* tekst en beeld bovenaan uitlijnen, niet centreren: anders zakt de H1 mee met de hoogte van het beeld en verschilt de afstand per schermbreedte */
.svc-hero-cols,.svc-hero .sa-sticky,.svc-hero .wl-sticky{align-items:start}
.dx{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:500px;overflow:hidden;border-radius:28px;text-decoration:none;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.dx:hover,.dx:focus-visible{transform:translateY(-6px);box-shadow:0 30px 50px -28px rgb(25 23 20 / .55)}
.dx:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.dx-dark{background:var(--color-ink);color:var(--color-paper)}
.dx-light{background:var(--color-accent-strong);color:#fff}
.dx-text{padding:clamp(26px,3vw,40px) clamp(28px,3.6vw,44px) 36px}
.dx h3{font-size:clamp(30px,3.4vw,46px);line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
.dx-dark h3{color:var(--color-paper)}
.dx-light h3{color:#fff}
.dx-text p{margin-top:12px;max-width:44ch;font-size:17px;line-height:1.6;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
@media (max-width:1023px){
.dx-text p{display:block}
}
.dx-dark .dx-text p{color:rgb(244 239 230 / .72)}
.dx-light .dx-text p{color:rgb(255 255 255 / .88)}
.dx-btn{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:13px 22px;border-radius:12px;font-weight:600;font-size:15px;transition:background .25s,color .25s,border-color .25s}
.dx-btn span{transition:transform .25s}
.dx:hover .dx-btn span,.dx:focus-visible .dx-btn span{transform:translateX(4px)}
.dx-dark .dx-btn{border:1px solid rgb(244 239 230 / .4)}
.dx-dark:hover .dx-btn{background:var(--color-paper);border-color:var(--color-paper);color:var(--color-ink)}
.dx-light .dx-btn{border:1px solid rgb(255 255 255 / .55)}
.dx-light:hover .dx-btn{background:#fff;border-color:#fff;color:var(--color-accent-strong)}
/* het schermpje dat onderaan uit de kaart komt */
.dx-app{display:flex;margin:auto 0 0 clamp(28px,3.6vw,48px);height:250px;translate:0 14px;border-radius:14px 0 0 0;overflow:hidden;background:var(--color-card);color:var(--color-ink);box-shadow:0 -20px 50px -20px rgb(0 0 0 / .45);-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%);transition:translate .5s cubic-bezier(.2,.8,.2,1)}
.dx-light .dx-app{box-shadow:0 -20px 50px -20px rgb(90 25 8 / .45)}
.dx:hover .dx-app,.dx:focus-visible .dx-app{translate:0 8px}
.dx-app{flex-direction:column;position:relative}
.dx-bar{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:9px 14px;background:#EFE9DE;border-bottom:1px solid #E2DACB}
.dx-bar i{width:8px;height:8px;border-radius:50%;background:#D3C9B7}
.dx-bar span{margin-left:10px;padding:3px 12px;border-radius:999px;background:#FBF8F2;font-size:11px;color:var(--color-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-page{flex:1;min-height:0;padding:12px 18px;background:#fff}
.dx-top{display:flex;align-items:center;gap:14px;padding-bottom:10px;border-bottom:1px solid #F0EBE2;font-size:11px;white-space:nowrap}
.dx-logo{font-family:var(--font-serif);font-size:15px;font-weight:600}
.dx-logo em{font-style:normal;color:var(--color-accent)}
.dx-search{flex:1;max-width:190px;margin-left:auto;padding:4px 10px;border:1px solid #E6E0D4;border-radius:999px;color:var(--color-ink-3);font-size:10.5px;overflow:hidden;text-overflow:ellipsis}
.dx-acct{font-weight:600;color:var(--color-ink-2)}
.dx-cart{padding:3px 9px;border-radius:999px;background:var(--color-ink);color:var(--color-paper);font-weight:600}
/* keuzekaarten SEO: zelfde .dx-kaarten als op websites-en-webshops, met eigen schermpjes */
.seo-doors{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.sx-tag{margin-left:auto;padding:3px 9px;border-radius:999px;background:#F4EFE6;font-size:10.5px;font-weight:700;color:var(--color-ink-2)}
.sx-check{list-style:none;margin:0;padding:10px 0 0;display:grid;gap:9px}
.sx-check li{display:grid;grid-template-columns:7.5em minmax(0,1fr) auto;align-items:center;gap:10px;font-size:11px;color:var(--color-ink-2);white-space:nowrap}
.sx-bar{display:block;height:6px;border-radius:3px;background:#F0EBE2;overflow:hidden}
.sx-bar i{display:block;height:100%;width:var(--w);border-radius:3px;background:var(--color-ok)}
.sx-bar i.w{background:#E0A23A}
.sx-check b{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px}
.sx-check b.ok{background:var(--color-ok-soft);color:var(--color-ok)}
.sx-check b.warn{background:var(--color-warn-soft);color:var(--color-warn)}
.sx-q{max-width:none;margin-left:0}
.sx-map{position:relative;height:62px;margin-top:10px;border-radius:8px;background:linear-gradient(90deg,rgb(255 255 255 / .6) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(rgb(255 255 255 / .6) 1px,transparent 1px) 0 0/22px 22px,#E9E2D3}
.sx-map .pin{position:absolute;width:12px;height:12px;margin:-12px 0 0 -6px;border-radius:50% 50% 50% 0;rotate:-45deg;background:#9A9184}
.sx-map .pin.me{width:16px;height:16px;margin:-16px 0 0 -8px;background:var(--color-accent)}
.sx-res{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-top:8px;padding:6px 8px;border-radius:8px;font-size:11px;white-space:nowrap}
.sx-res b{font-weight:700}
.sx-res span{color:var(--color-ink-3);overflow:hidden;text-overflow:ellipsis}
.sx-res em{font-style:normal;color:#E0A23A;font-size:10px}
.sx-res.me{background:#FFF1EA;box-shadow:inset 3px 0 0 var(--color-accent)}
.sx-res.me b{color:var(--color-accent-dark)}
@media (max-width:1023px){
.dx{min-height:440px}
.dx h3{font-size:clamp(26px,3.6vw,34px)}
}
@media (max-width:767px){
.seo-doors{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
.dx{min-height:0}
.dx-app{height:220px;margin-top:28px}
.dx-btn{padding:12px 18px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
.dx,.dx-app{transition:none}
}
/* hero: twee gelijke kolommen, een kortere titel en de visual gecentreerd naast de tekst */
@media (min-width:1024px){
.seo-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.seo-hero > div:last-child{align-self:center}
}
.seo-h1{font-size:clamp(36px,4vw,56px)}
.svc-hero{margin-top:0px;margin-bottom:-16px}
@media (min-width:768px) and (max-width:1023px){
.svc-hero{margin-top:0px;margin-bottom:-16px}
}
@media (min-width:1024px){
.svc-hero{margin-top:0px;margin-bottom:-32px}
}
/* volgt er een blok met een gekleurde achtergrond, dan begint die achtergrond minstens 48/64px onder de hero; de titel van dat blok blijft op 112/144px door een kleinere bovenpadding */
.svc-next{padding-top:64px}
@media (min-width:768px) and (max-width:1023px){
.svc-next{padding-top:64px}
}
@media (min-width:1024px){
.svc-next{padding-top:80px}
}

/* omzetting naar Wagtail: de uitleg onder de definitie komt uit rich text; de laatste alinea is de voetnoot */
.geo-def p{margin-top:1.25rem;color:var(--color-ink-2)}
.geo-def p:last-child:not(:first-child){font-size:.875rem;line-height:1.25rem;color:var(--color-ink-3)}