/* Homepage: "Does this look familiar?" Drie herkenbare vragen, elk met het risico en een link naar wat er echt gebeurde
   (verhalen in /news/). Idee overgenomen van piiblock.com (12 okt). De CSP staat geen inline stijlen toe. */
.fam { max-width: var(--wide); margin: 0 auto; padding: 100px var(--gutter) 20px; text-align: center; }
.fam-grid { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
.fam-card { display: flex; flex-direction: column; border-radius: 14px; padding: 28px 26px 26px; }
.fam-card.f1 { background: radial-gradient(90% 70% at 20% 10%, #f0fbf5, transparent 60%), var(--p-mint); }
.fam-card.f2 { background: radial-gradient(90% 70% at 80% 10%, #fff4ec, transparent 60%), var(--p-peach); }
.fam-card.f3 { background: radial-gradient(90% 70% at 20% 90%, #f3f0ff, transparent 60%), var(--p-lilac); }
.fam-q { align-self: flex-end; max-width: 92%; padding: 12px 16px; border-radius: 20px 20px 6px 20px; background: #fff; color: #1d1d1f;
  font-size: 17px; line-height: 1.45; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 24px rgba(20, 50, 100, .08); }
.fam-risk { margin-top: 26px; font-size: 15px; line-height: 1.55; color: #1d1d1f; }
.fam-risk b { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: rgba(29, 29, 31, .6); }
.fam-card a { margin-top: auto; padding-top: 18px; font-size: 15px; font-weight: 500; color: #0a5cc2; }
.fam-note { max-width: 640px; margin: 28px auto 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
@media (max-width: 900px) { .fam-grid { grid-template-columns: minmax(0, 1fr); } .fam { padding-top: 80px; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fam-card.f1 { background: linear-gradient(140deg, #0f3a37, #1d5130); }
  :root:not([data-theme="light"]) .fam-card.f2 { background: linear-gradient(140deg, #4a2a22, #4a2238); }
  :root:not([data-theme="light"]) .fam-card.f3 { background: linear-gradient(140deg, #231d4a, #1a2a55); }
  :root:not([data-theme="light"]) .fam-q { background: #1c1c1e; color: #f5f5f7; }
  :root:not([data-theme="light"]) .fam-risk { color: #f5f5f7; } :root:not([data-theme="light"]) .fam-risk b { color: rgba(235, 235, 245, .6); }
  :root:not([data-theme="light"]) .fam-card a { color: #6cb8ff; }
}