/* =========================================================================
 * Losse pagina's (diensten, voor webshops, privacy) in dezelfde vormtaal als
 * de homepage en de algemene voorwaarden. Bouwt op styles.css (tokens, .wrap,
 * .btn, .chip, .ticks, .faq). Gegenereerd door bron/paginas.py.
 * ====================================================================== */

.p-top { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.p-top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.p-top .brand { color: var(--text); }
.p-nav { display: flex; align-items: center; gap: 4px; }
.p-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px; font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.p-nav a:hover, .p-nav a[aria-current="page"] { color: var(--ink); background: var(--surface); }
.p-nav .p-cta { background: var(--ink); color: var(--paper); font-weight: 600; padding: 0 16px; }
.p-nav .p-cta:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 760px) { .p-nav .p-hide { display: none; } }
@media (max-width: 420px) { .p-top .brand-name { display: none; } }

.p-crumbs { padding-top: 28px; font-size: var(--fs-small); color: var(--subtle); }
.p-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.p-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.p-crumbs a { color: var(--muted); }

.p-hero { padding-top: 24px; padding-bottom: 48px; }
.p-hero h1 { margin-top: 16px; max-width: 880px; font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; color: var(--ink); text-wrap: balance; }
.p-hero .p-lead { margin-top: 18px; max-width: 680px; font-size: var(--fs-lead); color: var(--muted); }
.p-hero .btn-row { margin-top: 28px; }
@media (min-width: 640px) { .p-hero .btn-row { flex-direction: row; justify-content: flex-start; } .p-hero .btn-row .btn { width: auto; } }
.p-hero .btn svg { width: 18px; height: 18px; }

.p-proof { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--fs-small); color: var(--muted); }
.p-proof li { display: inline-flex; align-items: center; gap: 8px; }
.p-proof li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--go); }

.p-body { display: grid; gap: 20px; padding-bottom: 80px; }
.p-block { display: grid; gap: 20px; padding: 32px; border-radius: var(--r-card); background: var(--soft); border: 1px solid var(--line); }
@media (min-width: 900px) { .p-block.split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; } }
.p-block h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; font-weight: 700; color: var(--ink); text-wrap: balance; }
.p-block h2 .hl { color: var(--accent); }
.p-block p { color: var(--muted); max-width: 68ch; }
.p-block p + p { margin-top: 12px; }
.p-block .ticks { margin-top: 0; }
.p-block .ticks .dot { background: var(--paper); }
.p-block .p-text { min-width: 0; }
.p-block .p-text > * + * { margin-top: 12px; }
.p-block.bg-butter { background: var(--butter); border-color: transparent; }
.p-block.bg-sky { background: var(--sky); border-color: transparent; }
.p-block.bg-mint { background: var(--mint); border-color: transparent; }
.p-block.bg-steel { background: var(--steel); border-color: transparent; }
.p-block.bg-butter p, .p-block.bg-sky p, .p-block.bg-mint p, .p-block.bg-steel p { color: var(--text); }
.p-src { font-size: var(--fs-small); color: var(--subtle); }
.p-src a { text-decoration: underline; text-underline-offset: 3px; }

.p-facts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.p-fact { padding: 18px 20px; border-radius: var(--r-tile); background: var(--paper); }
.p-fact strong { display: block; font-size: 1.5rem; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.p-fact span { font-size: var(--fs-small); color: var(--muted); }

.p-steps { display: grid; gap: 12px; counter-reset: stap; }
@media (min-width: 760px) { .p-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p-steps li { counter-increment: stap; padding: 20px; border-radius: var(--r-tile); background: var(--paper); }
.p-steps li::before { content: counter(stap); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--butter); font-size: var(--fs-small); font-weight: 700; color: var(--ink); }
.p-steps h3 { margin-top: 12px; font-size: var(--fs-h4); font-weight: 600; color: var(--ink); }
.p-steps p { margin-top: 6px; font-size: var(--fs-small); }

.p-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.p-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--r-tile); background: var(--paper); border: 1px solid var(--line); transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); }
.p-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.p-card strong { color: var(--ink); font-weight: 600; }
.p-card span { font-size: var(--fs-small); color: var(--muted); }

.p-body .faq-list { margin-top: 0; }
.p-body .faq { background: var(--paper); }

.p-cta { display: grid; gap: 20px; padding: 36px 32px; border-radius: var(--r-card); background: var(--ink); color: var(--paper); }
@media (min-width: 900px) { .p-cta { grid-template-columns: 1fr auto; align-items: center; } }
.p-cta h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
.p-cta p { margin-top: 8px; color: rgba(255, 255, 255, 0.72); }
.p-cta .btn-row { margin: 0; }
@media (min-width: 640px) { .p-cta .btn-row { flex-direction: row; } .p-cta .btn-row .btn { width: auto; } }
.p-cta .btn-line { background: transparent; color: var(--paper); border-color: rgba(255, 255, 255, 0.28); }
.p-cta .btn svg { width: 18px; height: 18px; }

/* Leestekst (privacy, blog). Alleen directe kinderen: blokken, kaarten en knoppen houden hun eigen opmaak. */
.p-legal { padding-bottom: 80px; }
.p-legal > * { max-width: 760px; }
.p-legal > h2 { margin-top: 40px; font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.2; letter-spacing: -0.025em; font-weight: 700; color: var(--ink); text-wrap: balance; }
.p-legal > h2:first-child { margin-top: 0; }
.p-legal > p, .p-legal > ul { margin-top: 12px; color: var(--muted); }
.p-legal > ul { display: grid; gap: 6px; }
.p-legal > ul li { position: relative; padding-left: 20px; }
.p-legal > ul li::before { content: ""; position: absolute; left: 4px; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); }
.p-legal strong { color: var(--ink); font-weight: 600; }
.p-legal > p a, .p-legal > ul a, .p-legal .p-text a, .p-legal .p-src a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.p-legal > .p-block, .p-legal > .p-cta, .p-legal > .faq-list, .p-legal > .p-cards { margin-top: 28px; }
.p-legal > h2 + .faq-list, .p-legal > h2 + .p-cards { margin-top: 16px; }
.p-legal .faq { background: var(--surface); }
.p-meta { font-size: var(--fs-small); color: var(--subtle); }
.p-legal > .p-meta { margin-top: 0; margin-bottom: 8px; }
.p-posts .p-card .p-meta { margin-top: 6px; }

.p-foot { border-top: 1px solid var(--line); padding: 40px 0; font-size: var(--fs-small); color: var(--muted); }
.p-foot-grid { display: grid; gap: 28px; }
@media (min-width: 760px) { .p-foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.p-foot h2 { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.p-foot ul { margin-top: 10px; display: grid; gap: 6px; }
.p-foot a:hover { color: var(--ink); }
.p-foot .brand { color: var(--text); }
.p-foot .tagline { margin-top: 12px; max-width: 360px; }
.p-foot-bottom { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--subtle); }