/* ==============================================================
   assets/css/pages.css — Eenvoudige inhoudspagina's (cookies, info)
   ============================================================== */
.page-hero{padding-block:clamp(24px,4vw,48px) 8px}
.page-title{font-size:clamp(2.4rem,6vw,4.2rem);margin:14px 0 18px}
.page-title .skew{padding:.06em .3em .1em}
.page-lead{font-size:clamp(1rem,1.5vw,1.2rem);color:var(--text-2);font-weight:600;max-width:60ch;margin-bottom:22px}
.page-grid{display:grid;gap:18px;max-width:900px}

.cookie-group{padding:24px;border-width:2px}
.cookie-lime{border-color:color-mix(in srgb,var(--lime) 60%,transparent)}
.cookie-magenta{border-color:color-mix(in srgb,var(--magenta) 60%,transparent)}
.cookie-cyan{border-color:color-mix(in srgb,var(--cyan) 60%,transparent)}
.cookie-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.cookie-head h2{font-size:1.4rem}
.pill-lime{background:var(--lime);color:var(--on-lime);border-color:transparent}
.cookie-intro{color:var(--text-2);font-weight:600;margin-bottom:10px}
.cookie-table{width:100%;border-collapse:collapse;margin-top:6px;font-size:.92rem}
.cookie-table th{text-align:left;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
.cookie-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.cookie-table tr:last-child td{border-bottom:0}
.cookie-table code{font-weight:800;color:var(--accent-text);background:var(--surface-2);padding:.15em .45em;border-radius:6px}
@media (max-width:600px){
  .cookie-table thead{display:none}
  .cookie-table tr{display:grid;gap:4px;padding:10px 0;border-bottom:1px solid var(--line)}
  .cookie-table td{border:0;padding:0}
}

/* ---------- 404 ---------- */
.nf{min-height:62vh;display:grid;place-items:center;text-align:center}
.nf-wrap{display:grid;justify-items:center;gap:18px}
.nf-code{display:flex;gap:10px;font-size:clamp(4.5rem,16vw,9rem);font-weight:900;font-style:italic;line-height:1}
.nf-code .skew{padding:.02em .22em .06em}
.nf-title{font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.2}
.nf-text{color:var(--text-2);font-weight:600;max-width:52ch}
.nf-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}