/* Ook AI toepassen (landingspagina voor ookaitoepassen.nl): navy hero met een glaspaneel (CBS-cijfer)
   → licht (zelftest) → wit (vijf stappen) → licht (wel en niet) → wit (case uit Ede) → licht (hulp met
   prijzen) → wit (vragen) → blauwe CTA. Alleen bestaande onderdelen plus een paar eigen klassen. */

/* ---- hero ---- */
.pagina-ook-ai-toepassen .hero__tekst{min-width:0;}
.pagina-ook-ai-toepassen .hero h1{font-size:clamp(40px,4.6vw,66px);padding-bottom:.5em;}
.pagina-ook-ai-toepassen .ook-gratis{margin-top:18px;font-size:15px;color:var(--tekst-licht-zacht);animation:opdoemen .5s var(--ease) .68s both;}
@media (max-width:900px){
  .pagina-ook-ai-toepassen .hero h1{font-size:clamp(36px,8vw,60px);}
  .pagina-ook-ai-toepassen .hero__beeld{max-width:460px;}
}

/* glaspaneel: twee grote cijfers */
.pagina-ook-ai-toepassen .ook-cijfer{display:flex;align-items:baseline;gap:14px;margin:0 0 10px;padding:16px 20px;border-radius:var(--r-m);background:var(--blauw);color:var(--wit);animation:plop .45s var(--ease) .7s both;}
.pagina-ook-ai-toepassen .ook-cijfer b{font:700 clamp(34px,3.6vw,48px)/1 var(--f-tekst);letter-spacing:-.02em;}
.pagina-ook-ai-toepassen .ook-cijfer span{font:600 16px/1.3 var(--f-tekst);}
.pagina-ook-ai-toepassen .ook-cijfer--rest{background:rgba(255,255,255,.1);animation-delay:.82s;}
.pagina-ook-ai-toepassen .ook-cijfer--rest span{color:var(--ijs);}
.pagina-ook-ai-toepassen .ook-bron{margin:12px 0 0;font-size:13.5px;color:var(--ijs);}

/* glaspaneel en casekaart: kop met wat lucht */
.pagina-ook-ai-toepassen .ook-paneel .glas__kop{margin-bottom:16px;}
.pagina-ook-ai-toepassen .ook-case h3{margin-bottom:12px;}

/* ---- zelftest ---- */
.pagina-ook-ai-toepassen .ook-test h3{margin-bottom:14px;}

/* ---- vijf stappen: genummerde rij ---- */
.pagina-ook-ai-toepassen .ook-stappen{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:none;}
.pagina-ook-ai-toepassen .ook-stappen li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;padding:24px 26px;border-radius:var(--r-l);background:var(--wit);border:1px solid var(--lijn);box-shadow:0 20px 40px -32px rgba(7,20,42,.35);}
.pagina-ook-ai-toepassen .ook-nr{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--blauw);color:var(--wit);font:700 21px/1 var(--f-tekst);}
.pagina-ook-ai-toepassen .ook-stappen h3{margin:4px 0 6px;}
.pagina-ook-ai-toepassen .ook-stappen p{margin:0;color:var(--tekst-zacht);max-width:70ch;}
@media (max-width:640px){
  .pagina-ook-ai-toepassen .ook-stappen li{gap:14px;padding:18px;}
  .pagina-ook-ai-toepassen .ook-nr{width:38px;height:38px;font-size:17px;}
}

/* ---- wel en niet ---- */
.pagina-ook-ai-toepassen .ook-niet{margin:0;padding-left:1.2em;display:grid;gap:8px;}
.pagina-ook-ai-toepassen .ook-noot{margin:24px 0 0;font-weight:600;color:var(--navy);}

/* ---- case: eerst → nu ---- */
.pagina-ook-ai-toepassen .ook-resultaat{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;}
.pagina-ook-ai-toepassen .ook-resultaat p{margin:0;display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-radius:var(--r-m);background:var(--wolk);}
.pagina-ook-ai-toepassen .ook-resultaat p span{font:600 13px/1.2 var(--f-tekst);color:var(--tekst-zacht);text-transform:uppercase;letter-spacing:.06em;}
.pagina-ook-ai-toepassen .ook-resultaat p b{font:700 26px/1.1 var(--f-tekst);color:var(--navy);}
.pagina-ook-ai-toepassen .ook-resultaat .ook-resultaat__nu{background:var(--blauw);}
.pagina-ook-ai-toepassen .ook-resultaat .ook-resultaat__nu :is(span,b){color:var(--wit);}
.pagina-ook-ai-toepassen .ook-resultaat__pijl{font-size:24px;color:var(--blauw);}

/* ---- hulp: prijs onder elke kaart ---- */
.pagina-ook-ai-toepassen .ook-hulp .kaart__voet{margin-top:auto;padding-top:16px;max-width:none;}
.pagina-ook-ai-toepassen .ook-hulp .prijs{display:inline-flex;align-items:baseline;gap:8px;}
.pagina-ook-ai-toepassen .ook-hulp .prijs small{font:600 14px/1 var(--f-tekst);color:var(--tekst-zacht);}
.pagina-ook-ai-toepassen .ook-afspraak{margin-top:clamp(40px,5vw,64px);}
.pagina-ook-ai-toepassen .ook-afspraak p a{color:var(--wit);white-space:nowrap;}

/* ---- telefoon: rustig ---- */
@media (max-width:640px){
  .pagina-ook-ai-toepassen .ook-breed{display:none;}
  .pagina-ook-ai-toepassen .ook-kaarten{gap:14px;}
  .pagina-ook-ai-toepassen .ook-hulp .kaart__voet{flex-direction:column;align-items:flex-start;gap:4px;}
  .pagina-ook-ai-toepassen .ook-afspraak > .chip{display:none;}
  .pagina-ook-ai-toepassen .ook-afspraak .knop{justify-self:stretch;width:100%;}
  .pagina-ook-ai-toepassen .ook-resultaat p b{font-size:22px;}
}
@media (max-width:640px){.pagina-ook-ai-toepassen .ook-resultaat__pijl{display:none;}}