/*──────────────────────────────────────────────────────────────
  Pols — Phase 6a marketing-subpagina's (Material 3 Expressive)
  Theme: pols-marketing-child (Divi child, blog 1 only)
  Enqueued door functions.php op /prijzen, /over-pols, /contact,
  /privacy, /voorwaarden en /voor-instellingen.

  Bouwt voort op assets/marketing.css (tokens, reset, knoppen, nav,
  drawer, stappen, CTA-band, footer, reveal). Hieronder alleen de
  componenten die de subpagina's nodig hebben: page-hero, prijs-
  kaarten + vergelijkingstabel, contactkaarten, waarde-grid,
  feature-rijen, FAQ en de prose-opmaak voor juridische tekst.
──────────────────────────────────────────────────────────────*/

/*──────── Page hero ────────*/
.phero{position:relative;padding:84px 0 72px;overflow:hidden}
.phero .wrap{position:relative;z-index:1}
.phero--center{text-align:center}
.phero--center .lead{margin-inline:auto}
.phero__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.4rem,5.2vw,4rem);line-height:1.04;letter-spacing:-.016em;
  color:var(--pols-ink);
}
.phero__title em{font-style:italic;color:var(--pols-primary)}
.phero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.phero--center .phero__actions{justify-content:center}
.phero__note{margin-top:20px;font-size:14px;color:var(--m3-on-surface-variant);
  display:flex;align-items:center;gap:8px}
.phero--center .phero__note{justify-content:center}
.phero__note svg{color:var(--pols-primary)}

/* status-chip (bijv. bèta-melding op de prijzenpagina) */
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;margin-top:26px;
  border-radius:var(--r-full);background:var(--pols-secondary-container);
  color:var(--pols-on-secondary-container);font-size:13.5px;font-weight:600}
.chip svg{flex:none}

/*──────── Prijskaarten ────────*/
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.plans--2{grid-template-columns:repeat(2,1fr);max-width:840px}
.plan{
  position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--m3-outline-variant);border-radius:var(--r-xl);
  padding:32px 28px 28px;
  transition:transform var(--d-med) var(--ease-emph),box-shadow var(--d-med) var(--ease-std);
}
.plan:hover{transform:translateY(-6px);box-shadow:var(--e3)}
.plan--featured{border:2px solid var(--pols-primary);box-shadow:var(--e2)}
.plan__flag{position:absolute;top:-14px;left:28px;padding:5px 14px;border-radius:var(--r-full);
  background:var(--pols-primary);color:var(--pols-primary-on);font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase}
.plan__tag{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--m3-on-surface-variant);margin-bottom:6px}
.plan__name{font-family:var(--serif);font-size:1.85rem;line-height:1.05;color:var(--pols-ink);
  margin-bottom:14px}
.plan__price{font-family:var(--serif);font-size:2.1rem;color:var(--pols-ink);line-height:1.05}
.plan__price small{display:block;font-family:var(--sans);font-size:13.5px;font-weight:500;
  color:var(--m3-on-surface-variant);margin-top:6px}
.plan__desc{font-size:14.5px;color:var(--m3-on-surface-variant);line-height:1.55;
  margin-top:14px}
.plan__list{list-style:none;display:grid;gap:9px;margin:20px 0 26px;padding-top:18px;
  border-top:1px dashed var(--m3-outline-variant)}
.plan__list li{position:relative;padding-left:26px;font-size:14.5px;color:var(--m3-on-surface);
  line-height:1.45}
.plan__list li::before{content:"✓";position:absolute;left:0;top:0;font-weight:700;
  color:var(--pols-primary)}
.plan__list li.plus::before{content:"+";color:var(--pols-secondary)}
.plan .btn{margin-top:auto;justify-content:center}

/*──────── Vergelijkingstabel ────────*/
.cmp{margin-top:56px;overflow-x:auto;background:#fff;
  border:1px solid var(--m3-outline-variant);border-radius:var(--r-lg);box-shadow:var(--e1)}
.cmp table{width:100%;min-width:820px;border-collapse:collapse;font-size:14.5px}
.cmp th,.cmp td{padding:13px 18px;text-align:center;
  border-bottom:1px solid var(--m3-surface-container-high)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp thead th{background:var(--m3-surface-low);color:var(--pols-ink);font-weight:600;
  border-bottom:1px solid var(--m3-outline-variant);white-space:nowrap}
.cmp tbody th{text-align:left;font-weight:500;color:var(--m3-on-surface);white-space:nowrap}
.cmp .grp th{background:var(--m3-surface-low);text-align:left;font-size:12.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--m3-on-surface-variant)}
.cmp .yes{color:var(--pols-primary);font-weight:700}
.cmp .no{color:var(--m3-outline)}
.cmp__note{font-size:13.5px;color:var(--m3-on-surface-variant);margin-top:16px;max-width:72ch}

/*──────── Contactkaarten ────────*/
.ccards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:48px}
.ccard{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--m3-outline-variant);
  border-radius:var(--r-xl);padding:28px;
  transition:transform var(--d-med) var(--ease-emph),box-shadow var(--d-med) var(--ease-std);
}
.ccard:hover{transform:translateY(-4px);box-shadow:var(--e2)}
.ccard .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:var(--pols-primary-container);color:var(--pols-primary);margin-bottom:18px}
.ccard:nth-child(2) .ic{background:var(--pols-secondary-container);color:#b9701b}
.ccard:nth-child(3) .ic{background:var(--pols-tertiary-container);color:var(--pols-tertiary)}
.ccard h2{font-size:1.22rem;color:var(--pols-ink);margin-bottom:8px}
.ccard p{font-size:14.5px;color:var(--m3-on-surface-variant);line-height:1.55;margin-bottom:16px}
.ccard__link{margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:600;color:var(--pols-primary)}
.ccard__link svg{transition:transform var(--d-med) var(--ease-emph)}
.ccard__link:hover svg{transform:translateX(4px)}

/*──────── Waarde-grid (over/instellingen) ────────*/
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:50px}
.vitem{padding:4px 0}
.vitem .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:var(--pols-primary-container);color:var(--pols-primary);margin-bottom:18px}
.vitem:nth-child(2) .ic{background:var(--pols-secondary-container);color:#b9701b}
.vitem:nth-child(3) .ic{background:var(--pols-tertiary-container);color:var(--pols-tertiary)}
.vitem h3{font-size:1.22rem;color:var(--pols-ink);margin-bottom:9px}
.vitem p{font-size:15px;color:var(--m3-on-surface-variant);line-height:1.58}

/*──────── Feature-rijen (voor-instellingen) ────────*/
.frows{margin-top:38px;display:grid;gap:20px;max-width:620px}
.frow{display:flex;gap:15px;align-items:flex-start}
.frow .ic{width:42px;height:42px;flex:none;border-radius:12px;background:#fff;
  color:var(--pols-primary);display:grid;place-items:center;box-shadow:var(--e1);
  border:1px solid var(--m3-outline-variant)}
.frow b{display:block;font-size:16px;color:var(--pols-ink);margin-bottom:2px}
.frow p{font-size:14.5px;color:var(--m3-on-surface-variant);line-height:1.5}

/* twee-koloms sectie-indeling (tekst + zijblok) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:62px;align-items:start}

/*──────── FAQ ────────*/
.faq{max-width:780px;margin-top:44px}
.faq details{background:#fff;border:1px solid var(--m3-outline-variant);
  border-radius:var(--r-md);margin-bottom:12px;overflow:hidden;
  transition:box-shadow var(--d-fast) var(--ease-std)}
.faq details[open]{box-shadow:var(--e1)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;
  cursor:pointer;padding:18px 20px;font-size:15.5px;font-weight:600;color:var(--pols-ink);
  list-style:none;-webkit-tap-highlight-color:transparent}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:var(--r-full);
  display:grid;place-items:center;background:var(--pols-primary-container);
  color:var(--pols-on-primary-container);font-weight:600;
  transition:transform var(--d-med) var(--ease-emph)}
.faq details[open] summary::after{content:"–";transform:rotate(180deg)}
.faq details p{padding:0 20px 20px;font-size:15px;color:var(--m3-on-surface-variant);
  line-height:1.62;max-width:66ch}

/*──────── Prose (privacy / voorwaarden / over) ────────*/
.prose{max-width:76ch;font-size:16px;line-height:1.7;color:var(--m3-on-surface-variant)}
.prose h2{font-family:var(--serif);font-weight:400;font-size:1.75rem;line-height:1.15;
  color:var(--pols-ink);margin:46px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.08rem;font-weight:600;color:var(--pols-ink);margin:28px 0 10px}
.prose p{margin-bottom:15px}
.prose ul,.prose ol{margin:0 0 15px 22px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--pols-ink);font-weight:600}
.prose a{color:var(--pols-primary);font-weight:500;text-decoration:underline;
  text-decoration-color:rgba(26,110,122,.35);text-underline-offset:2px}
.prose a:hover{text-decoration-color:currentColor}
.prose__meta{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
  color:var(--m3-on-surface-variant);background:var(--m3-surface-container);
  padding:7px 16px;border-radius:var(--r-full);margin-bottom:34px}

/*──────── Responsive (subpagina's) ────────*/
@media(max-width:980px){
  .plans,.plans--2{grid-template-columns:1fr}
  .ccards{grid-template-columns:1fr}
  .vgrid{grid-template-columns:1fr;gap:30px}
  .split{grid-template-columns:1fr;gap:44px}
  .phero{padding:64px 0 56px}
}

/* ── 404 (1.3.5): een platte hartslag en een peiling als weg terug ── */
.nf__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.nf__note{align-items:flex-start;max-width:46ch}
.nf__note svg{flex:none;margin-top:2px}
.nf-card{background:#fff;border-radius:var(--r-2xl);box-shadow:var(--e3);padding:22px 22px 24px;
  border:1px solid var(--m3-outline-variant)}
.nf-card__bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.nf-card__state{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:var(--m3-on-surface-variant);letter-spacing:.04em;text-transform:uppercase}
.nf-card__dot{width:9px;height:9px;border-radius:50%;background:var(--m3-outline)}
.nf-card__badge{font-size:12px;font-weight:600;padding:5px 12px;border-radius:var(--r-full);
  background:var(--pols-secondary-container);color:var(--pols-on-secondary-container)}
.nf-flat{width:100%;height:46px;margin:6px 0 16px;overflow:hidden}
.nf-flat svg{width:100%;height:100%}
.nf-flat .base{stroke:var(--pols-primary-container);stroke-width:2.5}
.nf-flat .live{stroke:var(--pols-primary);stroke-width:2.8;stroke-dasharray:64 1200;stroke-dashoffset:1264;
  animation:nf-sweep 2.6s linear infinite}
@keyframes nf-sweep{to{stroke-dashoffset:0}}
.nf-card__q{font-size:18px;font-weight:600;color:var(--pols-ink);margin:2px 0 14px;line-height:1.35}
.nf-opt{display:block;margin:0 -8px 4px;padding:6px 8px 8px;border-radius:var(--r-md);color:inherit;text-decoration:none}
.nf-opt:focus-visible{outline:3px solid var(--pols-primary);outline-offset:2px}
.nf-opt__row{display:flex;justify-content:space-between;gap:12px;font-size:15px;font-weight:500;
  margin-bottom:6px;color:var(--m3-on-surface)}
.nf-opt__pct{font-variant-numeric:tabular-nums;color:var(--m3-on-surface-variant)}
.nf-opt__on{display:none}
.nf-opt__track{display:block;height:12px;border-radius:var(--r-full);background:var(--m3-surface-container);overflow:hidden}
.nf-opt__fill{display:block;height:100%;width:0;border-radius:var(--r-full);background:var(--pols-primary);
  transition:width 700ms var(--ease-emph)}
.nf-opt:hover .nf-opt__fill,.nf-opt:focus-visible .nf-opt__fill{width:100%}
.nf-opt:hover .nf-opt__off,.nf-opt:focus-visible .nf-opt__off{display:none}
.nf-opt:hover .nf-opt__on,.nf-opt:focus-visible .nf-opt__on{display:inline;color:var(--pols-primary);font-weight:700}
.nf-card__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--m3-outline-variant);font-size:13px;color:var(--m3-on-surface-variant)}
.nf-card__count{text-align:right}
.nf-card__count b{display:block;font-size:22px;color:var(--pols-ink);font-variant-numeric:tabular-nums;line-height:1.1}
@media(max-width:900px){.nf__grid{grid-template-columns:1fr;gap:36px}}
@media(prefers-reduced-motion:reduce){.nf-flat .live{animation:none;stroke-dasharray:none;stroke-dashoffset:0;opacity:.35}
  .nf-opt__fill{transition:none}}