/* Productpagina "MCP server voor AI": eigen extra's bovenop sectie-webhosting.css
   (de pagina draait in de .wok-webhosting-wrapper, met .wok-webhosting.wok-mcp als extra
   scope). Hier alleen wat de webhosting-set niet heeft: de transparante
   hero-animatie, de stappen en toolchips, de doelgroepkaarten en kleine
   accenten in tabel en prijskaart. Laadt automatisch via de slug. */

/* Hero: animatie direct op de blauwe hero, zonder eigen kader */
.wok-webhosting.wok-mcp .hero-visual { position: relative; }
.wok-webhosting.wok-mcp .mcp-hero-visual { aspect-ratio: 16 / 9; width: 100%; }
.wok-webhosting.wok-mcp .mcp-hero-visual img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 18px; opacity: .9; }
.wok-webhosting.wok-mcp .mcp-hero-visual canvas { border-radius: 18px; }

/* Explain: drie stappen + toolchips onder de flow */
.wok-webhosting.wok-mcp .mcp-stappen-wrap { max-width: 900px; margin: 44px auto 0; }
.wok-webhosting.wok-mcp .mcp-stappen-kop { text-align: center; font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-primary); margin: 0 0 18px; }
.wok-webhosting.wok-mcp .mcp-stappen { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: mcpstap; }
.wok-webhosting.wok-mcp .mcp-stappen li { counter-increment: mcpstap; position: relative; padding: 18px 18px 18px 64px; background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 14px; }
.wok-webhosting.wok-mcp .mcp-stappen li::before { content: counter(mcpstap); position: absolute; left: 18px; top: 18px; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--grad-start), var(--grad-end)); color: #ffd166; font-weight: 800; font-size: 16px; line-height: 34px; text-align: center; }
.wok-webhosting.wok-mcp .mcp-stappen strong { display: block; font-size: 15px; color: var(--gray-darker); margin-bottom: 3px; }
.wok-webhosting.wok-mcp .mcp-stappen span { font-size: 13.5px; line-height: 1.5; color: var(--gray-base); }
.wok-webhosting.wok-mcp .mcp-tools-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; justify-content: center; }
.wok-webhosting.wok-mcp .mcp-tools-kop { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-base); }
.wok-webhosting.wok-mcp .mcp-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wok-webhosting.wok-mcp .mcp-tools li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--gray-lighter-4); box-shadow: 0 2px 8px rgba(21,42,128,.06); font-size: 14px; font-weight: 700; color: var(--gray-darker); }

/* Doelgroepen: vier kaarten in de bento-look, met een voorbeeldopdracht */
.wok-webhosting.wok-mcp .mcp-doelgroep { padding: 80px 0; background: #fff; }
.wok-webhosting.wok-mcp .mcp-doelgroep-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.wok-webhosting.wok-mcp .mcp-doel-kaart { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; background: var(--body-bg); border: 1px solid var(--gray-lighter-4); border-radius: var(--radius-lg); transition: transform .2s, box-shadow .2s, border-color .2s; }
.wok-webhosting.wok-mcp .mcp-doel-kaart:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: rgba(16,98,254,.3); }
.wok-webhosting.wok-mcp .mcp-doel-kaart h3 { margin: 4px 0 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--gray-darker); }
.wok-webhosting.wok-mcp .mcp-doel-kaart p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--gray-base); }
.wok-webhosting.wok-mcp .mcp-doel-prompt { margin-top: auto; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--gray-lighter-4); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--gray-darker); }
.wok-webhosting.wok-mcp .mcp-doel-prompt span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-primary); margin-bottom: 3px; }

/* Vergelijkingstabel: de MCP-rijen licht uitgelicht */
.wok-webhosting.wok-mcp .mcp-compare tr.mcp-compare-mcp td:first-child { font-weight: 700; }
.wok-webhosting.wok-mcp .mcp-compare-noot { margin-top: 18px; font-size: 13px; color: rgba(255,255,255,.7); text-align: center; }

/* Prijskaarten: MCP-regel uitgelicht, drie kaarten centreren, link eronder */
.wok-webhosting.wok-mcp .mcp-pricing-grid { grid-template-columns: repeat(3, 1fr); max-width: 980px; margin-left: auto; margin-right: auto; }
.wok-webhosting.wok-mcp .pricing-features li.mcp-feat-uitgelicht { padding: 6px 8px; margin: 0 -8px 4px; border-radius: 8px; background: rgba(255,209,102,.22); }
.wok-webhosting.wok-mcp .mcp-pricing-link { text-align: center; margin: 26px 0 8px; font-size: 14px; }
.wok-webhosting.wok-mcp .mcp-pricing-link a { color: var(--brand-primary); font-weight: 700; text-decoration: none; }
.wok-webhosting.wok-mcp .mcp-pricing-link a:hover { text-decoration: underline; }

@media (max-width: 991px) {
	.wok-webhosting.wok-mcp .mcp-doelgroep-grid { grid-template-columns: 1fr 1fr; }
	.wok-webhosting.wok-mcp .mcp-pricing-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
	.wok-webhosting.wok-mcp .mcp-stappen, .wok-webhosting.wok-mcp .mcp-doelgroep-grid, .wok-webhosting.wok-mcp .mcp-pricing-grid { grid-template-columns: 1fr; }
}