/* Platformkeuze (vereenvoudigd 02-11-2026). Laadt na site.css. */
.pf-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(14px, 2vw, 24px); align-items:stretch}
.pf-card{border-radius:14px; padding:clamp(20px, 3vw, 34px); display:grid; gap:18px; align-content:start; position:relative}
.pf-claude{background:var(--surface); border:2px solid var(--mark); box-shadow:0 18px 40px -24px rgba(22,35,42,.35)}
.pf-mistral{background:var(--ink); color:var(--bg); display:flex; flex-direction:column}
.pf-head{display:flex; align-items:center; gap:14px}
.pf-head h3{font-size:clamp(1.5rem, 2.4vw, 2rem); font-weight:800; font-variation-settings:"wdth" 90; line-height:1}
.pf-head small{font-size:.85rem; opacity:.7}
.pf-logo{width:52px; height:52px; flex:none; border-radius:12px; background:#fff; display:grid; place-items:center; padding:9px; box-shadow:0 0 0 1px rgba(22,35,42,.08)}
.pf-logo img{max-width:100%; max-height:100%}
.pf-tag{margin-left:auto; align-self:flex-start; font-size:.75rem; font-weight:800; letter-spacing:.03em; padding:4px 10px; border-radius:999px; background:var(--mark); color:var(--mark-ink); white-space:nowrap}
.pf-mistral .pf-tag{background:var(--bg); color:var(--ink)}
.pf-lead{font-size:clamp(1.1rem, 1.6vw, 1.3rem); font-weight:600; line-height:1.3}
.pf-pts{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.pf-pts li{font-size:.92rem; padding:6px 12px; border-radius:999px; border:1.5px solid var(--line)}
.pf-mistral .pf-pts li{border-color:color-mix(in srgb, var(--bg) 30%, transparent)}
.pf-mistral .pf-pts{margin-top:auto}
.pf-demo{background:var(--bg); border-radius:10px; padding:16px; display:grid; gap:14px; min-height:206px; align-content:start}
.pf-ask{background:var(--screen); border:1px solid var(--line); border-radius:999px; padding:10px 16px; font-size:.98rem; min-height:46px; display:flex; align-items:center}
.pf-caret{display:inline-block; width:2px; height:1.1em; background:var(--ink); margin-left:2px; animation:pfBlink 1s steps(1) infinite}
@keyframes pfBlink{50%{opacity:0}}
.pf-out{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px}
.pf-tile{background:var(--screen); border:1px solid var(--line); border-radius:8px; padding:14px 12px 12px; display:grid; gap:8px; font-size:.86rem; line-height:1.25; font-weight:600; position:relative; opacity:0; transform:translateY(8px) scale(.97); transition:opacity .35s, transform .35s}
.pf-tile.in{opacity:1; transform:none}
.pf-tile.out{opacity:0; transition-duration:.3s}
.pf-ico{width:30px; height:30px; color:var(--polder)}
.pf-ico svg{width:100%; height:100%}
.pf-ok{position:absolute; top:10px; right:10px; width:20px; height:20px; border-radius:50%; background:var(--polder); color:#fff; font-style:normal; font-size:.7rem; display:grid; place-items:center}
.pf-rest{display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line)}
.pf-rest p{font-size:.9rem; color:var(--muted)}
.pf-rest ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px}
.pf-rest li{position:relative; display:flex; align-items:center; gap:8px; font-size:.92rem; color:var(--muted); cursor:default; outline-offset:4px}
.pf-rest li img{width:22px; height:22px; filter:grayscale(1); opacity:.6; transition:filter .2s, opacity .2s}
.pf-rest li b{font-weight:600}
.pf-rest li small{position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); width:max-content; max-width:220px; background:var(--ink); color:var(--bg); font-size:.8rem; padding:6px 10px; border-radius:6px; opacity:0; pointer-events:none; transition:opacity .15s; z-index:2}
.pf-rest li:hover img, .pf-rest li:focus img{filter:none; opacity:1}
.pf-rest li:hover, .pf-rest li:focus{color:var(--ink)}
.pf-rest li:hover small, .pf-rest li:focus small{opacity:1}
@media (max-width: 960px){
  .pf-grid{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .pf-out{grid-template-columns:1fr}
  .pf-tile{grid-template-columns:auto 1fr; align-items:center}
  .pf-demo{min-height:0}
}