/* Trust center (security.html). Alleen voor deze pagina; bouwt op site.css (kleuren, knoppen, footer).
   De CSP staat geen inline stijlen toe, dus alles staat hier. */

.sx { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.sx-sec { padding: clamp(70px, 9vw, 120px) 0 0; }
.sx-sec > h2 { text-align: left; font-size: clamp(30px, 3.6vw, 44px); }
.sx-sec > .sx-intro { margin: 14px 0 0; max-width: 640px; color: var(--muted); font-size: 18px; line-height: 1.55; }
.sx-kicker { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--action); letter-spacing: 0; }

/* ---------- Hero ---------- */
.sx-hero { max-width: 900px; margin: 0 auto; padding: 150px var(--gutter) 46px; text-align: center; }
.sx-hero h1 { font-size: var(--h1); font-weight: var(--hw); letter-spacing: var(--track); line-height: 1.02; text-wrap: balance; }
/* Knoppen onder de intro: gecentreerd onder de tekst, en zonder icoon even veel ruimte links als rechts */
.sx-hero .ctas { justify-content: center; margin-top: 30px; }
.sx-hero .ctas .badge { padding: 12px 22px; }
@media (max-width: 560px) { .sx-hero .ctas { flex-direction: column; align-items: stretch; width: min(320px, 100%); margin-left: auto; margin-right: auto; } .sx-hero .ctas .badge { justify-content: center; } }
.sx-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; padding: 0; list-style: none; }
.sx-pills li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 14px; background: var(--soft); font-size: 14px; font-weight: 500; }
.sx-pills svg { width: 16px; height: 16px; fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Diagram: wat er van je apparaat afgaat ---------- */
.sx-flow { margin: 0 var(--gutter); border-radius: 14px; padding: clamp(22px, 4vw, 56px); position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 10% 0%, #e3f1ff 0%, transparent 55%), radial-gradient(90% 80% at 95% 100%, #d4f4ee 0%, transparent 60%), linear-gradient(135deg, #cfe6ff, #b9dcff 45%, #c2ece6); }
.sx-flow-in { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 150px 1fr; align-items: stretch; }
.sx-zone { position: relative; border-radius: 12px; padding: 46px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.sx-zone.dev { border: 2px dashed rgba(10, 132, 255, .45); background: rgba(255, 255, 255, .35); }
.sx-zone.ai { border: 2px solid rgba(29, 29, 31, .08); background: rgba(255, 255, 255, .2); }
.sx-zone > b { position: absolute; top: 14px; left: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.sx-zone > b svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sx-zone.dev > b { color: #0a5cc2; }
.sx-msg { background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(20, 70, 140, .10); font-size: 15px; line-height: 1.55; text-align: left; color: #1d1d1f; }
.sx-msg small { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6e6e73; }
.sx-msg.back small { color: #1fa34a; }
.sx-r { color: #d70015; background: rgba(255, 59, 48, .12); border-radius: 5px; padding: 0 3px; white-space: nowrap; }
.sx-p { color: #0a5cc2; background: rgba(10, 132, 255, .12); border-radius: 5px; padding: 0 4px; font-family: var(--mono); font-size: .86em; font-weight: 700; white-space: nowrap; }
.sx-g { color: #1a7f3c; background: rgba(52, 199, 89, .16); border-radius: 5px; padding: 0 3px; white-space: nowrap; }
.sx-wires { display: grid; grid-template-rows: 1fr 1fr; padding: 46px 0 0; }
.sx-wire { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 600; color: #3a3a3c; text-align: center; }
.sx-wire i { position: relative; display: block; width: 100%; height: 2px; background: rgba(29, 29, 31, .22); }
.sx-wire i::after { content: ""; position: absolute; top: -4px; width: 0; height: 0; border: 5px solid transparent; }
.sx-wire.to i::after { right: -2px; border-left: 8px solid rgba(29, 29, 31, .35); }
.sx-wire.from i::after { left: -2px; border-right: 8px solid rgba(29, 29, 31, .35); }
.sx-wire i::before { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--action); box-shadow: 0 0 0 4px rgba(10, 132, 255, .18); }
.sx-wire.to i::before { animation: sxTo 2.6s var(--ease) infinite; }
.sx-wire.from i::before { animation: sxFrom 2.6s var(--ease) 1.3s infinite; }
@keyframes sxTo { from { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } }
@keyframes sxFrom { from { left: calc(100% - 8px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: 0; opacity: 0; } }
.sx-flow-note { max-width: 1120px; margin: 22px auto 0; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; font-size: 14px; color: #1d1d1f; }
.sx-flow-note span { display: inline-flex; align-items: center; gap: 8px; }
.sx-flow-note i { width: 12px; height: 12px; border-radius: 4px; }
.sx-flow-note .k1 { border: 2px dashed rgba(10, 132, 255, .6); }
.sx-flow-note .k2 { background: var(--action); border-radius: 50%; }

/* ---------- In het kort ---------- */
.sx-glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.sx-card { padding: 26px 24px 28px; border-radius: 14px; background: var(--soft); }
.sx-card h3 { margin-top: 22px; }
.sx-card p { margin: 8px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.sx-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--card); box-shadow: 0 6px 16px rgba(20, 50, 100, .08); }
.sx-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--action); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Stappen ---------- */
.sx-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: st; }
.sx-steps li { counter-increment: st; border-radius: 14px; background: var(--soft); padding: 20px 20px 24px; display: flex; flex-direction: column; }
.sx-steps .viz { height: 132px; border-radius: 16px; display: grid; place-items: center; padding: 14px; background: linear-gradient(140deg, #dcebff, #c7e1ff); }
.sx-steps li:nth-child(2) .viz { background: linear-gradient(140deg, #d6ecff, #c9eef0); }
.sx-steps li:nth-child(3) .viz { background: linear-gradient(140deg, #e8e8ed, #dcdce2); }
.sx-steps li:nth-child(4) .viz { background: linear-gradient(140deg, #d4f2e4, #c9eef0); }
.sx-steps .viz .sx-msg { width: 100%; font-size: 14px; padding: 12px 14px; }
.sx-steps h3 { margin-top: 18px; display: flex; gap: 10px; align-items: baseline; font-size: 18px; }
.sx-steps h3::before { content: counter(st); flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 700; transform: translateY(-2px); }
.sx-steps p { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }

/* ---------- Kluis ---------- */
.sx-vault { display: grid; grid-template-columns: 1.05fr 1fr; gap: 14px; margin-top: 40px; }
.sx-rings { border-radius: 14px; padding: clamp(22px, 3vw, 40px); display: grid; place-items: center;
  background: radial-gradient(90% 80% at 85% 10%, #e5f2ff, transparent 60%), linear-gradient(140deg, #d5e9ff, #c3e6ef); }
.sx-ring { position: relative; width: 100%; border-radius: 12px; padding: 44px 16px 16px; }
.sx-ring > b { position: absolute; top: 13px; left: 16px; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.sx-ring > b svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sx-ring.r1 { background: rgba(29, 29, 31, .9); color: #fff; }
.sx-ring.r1 > b { color: #fff; }
.sx-ring.r2 { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); }
.sx-ring.r2 > b { color: #9fd0ff; }
.sx-ring.r3 { background: #fff; color: #1d1d1f; padding-top: 42px; }
.sx-ring.r3 > b { color: #6e6e73; }
.sx-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid #e5e5ea; font-size: 14px; }
.sx-row:first-of-type { border-top: 0; }
.sx-row .arr { color: #8e8e93; }
.sx-row .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-specs { margin: 0; border-radius: 14px; background: var(--soft); padding: 10px 28px; }
.sx-specs div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.sx-specs div:first-child { border-top: 0; }
.sx-specs dt { color: var(--muted); font-size: 15px; }
.sx-specs dd { margin: 0; font-size: 15.5px; line-height: 1.5; }
.sx-specs code, .sx-perm code { font-family: var(--mono); font-size: .92em; }

/* ---------- Kluis per site ---------- */
.sx-site { display: grid; grid-template-columns: 1.05fr 1fr; gap: 14px; margin-top: 14px; }
.sx-site-art { border-radius: 14px; padding: 28px; display: grid; grid-template-columns: 1fr 74px 1fr; align-items: center; background: linear-gradient(140deg, #ececf1, #dfe7f3); }
.sx-win { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(20, 50, 100, .12); color: #1d1d1f; }
.sx-win .bar2 { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: #f5f5f7; font-size: 11.5px; color: #6e6e73; }
.sx-win .bar2 i { width: 7px; height: 7px; border-radius: 50%; background: #d1d1d6; }
.sx-win .bar2 span { margin-left: 6px; }
.sx-win p { margin: 0; padding: 14px 12px; font-size: 13.5px; line-height: 1.5; }
.sx-block { position: relative; height: 2px; background: repeating-linear-gradient(90deg, #ff3b30 0 6px, transparent 6px 11px); }
.sx-block::after { content: "×"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #ff3b30; font-size: 24px; font-weight: 600; line-height: 1; box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.sx-site-text { border-radius: 14px; background: var(--soft); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; justify-content: center; }
.sx-site-text h3 { font-size: 22px; letter-spacing: -.02em; }
.sx-site-text p { margin: 10px 0 0; color: var(--muted); font-size: 16px; line-height: 1.55; }

/* ---------- Rechten ---------- */
.sx-perm { margin-top: 40px; border-radius: 14px; background: var(--soft); padding: 6px 28px; }
.sx-perm div { display: grid; grid-template-columns: 44px 220px 1fr; gap: 18px; align-items: center; padding: 20px 0; border-top: 1px solid var(--line); }
.sx-perm div:first-child { border-top: 0; }
.sx-perm .sx-ico { width: 44px; height: 44px; border-radius: 12px; }
.sx-perm .sx-ico svg { width: 21px; height: 21px; }
.sx-perm b { font-size: 16px; }
.sx-perm p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.5; }

/* ---------- Wel / niet ---------- */
.sx-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; }
.sx-col { border-radius: 14px; padding: clamp(24px, 3vw, 36px); background: var(--soft); }
.sx-col h3 { display: flex; align-items: center; gap: 12px; font-size: 21px; }
.sx-col h3 span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; }
.sx-col h3 svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sx-col.yes h3 span { background: var(--green); }
.sx-col.no h3 span { background: #8e8e93; }
.sx-col ul { list-style: none; margin: 20px 0 0; padding: 0; }
.sx-col li { padding: 14px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; color: var(--muted); }
.sx-col li b { display: block; color: var(--ink); font-weight: 600; }
.sx-col .note { margin: 18px 0 0; font-size: 14px; color: var(--faint); }

/* ---------- Zelf controleren ---------- */
.sx-check { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
.sx-check > div { border-radius: 14px; background: var(--soft); padding: 18px 18px 26px; }
.sx-check .viz { height: 170px; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 8px; background: linear-gradient(140deg, #dcebff, #c7e1ff); }
.sx-check > div:nth-child(2) .viz { background: #1c1c1e; }
.sx-check > div:nth-child(3) .viz { background: linear-gradient(140deg, #d4f2e4, #c9eef0); align-items: center; }
.sx-check h3 { margin: 20px 4px 0; }
.sx-check p { margin: 8px 4px 0; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.sx-repo { background: #fff; border-radius: 12px; padding: 10px 12px; font-size: 13px; color: #1d1d1f; box-shadow: 0 6px 18px rgba(20, 70, 140, .10); }
.sx-repo .h { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.sx-repo .h em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; color: #6e6e73; border: 1px solid #d1d1d6; border-radius: 14px; padding: 1px 8px; }
.sx-repo .f { display: flex; gap: 8px; padding-top: 6px; color: #6e6e73; font-family: var(--mono); font-size: 12px; }
.sx-net { font-family: var(--mono); font-size: 12px; color: #a1a1a6; }
.sx-net .t { display: flex; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid #3a3a3c; color: #f5f5f7; font-weight: 600; }
.sx-net .t span:last-child { color: #a1a1a6; font-weight: 400; }
.sx-net .r { display: flex; justify-content: space-between; padding: 6px 0 0; }
.sx-net .r.k { color: #30d158; font-weight: 700; }
.sx-store { display: flex; flex-direction: column; gap: 8px; }
.sx-store span { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 12px; border-radius: 14px; background: #fff; color: #1d1d1f; font-size: 13.5px; font-weight: 600; box-shadow: 0 6px 16px rgba(20, 70, 140, .08); }
.sx-store img { width: 18px; height: 18px; }

/* ---------- Tijdlijn ---------- */
.sx-time { list-style: none; margin: 40px 0 0; padding: 0; border-radius: 14px; background: var(--soft); padding: 8px clamp(22px, 3vw, 36px); }
.sx-time li { position: relative; display: grid; grid-template-columns: 170px 1fr; gap: 24px; padding: 24px 0 24px 28px; border-top: 1px solid var(--line); }
.sx-time li:first-child { border-top: 0; }
.sx-time li::before { content: ""; position: absolute; left: 0; top: 31px; width: 12px; height: 12px; border-radius: 50%; background: var(--action); box-shadow: 0 0 0 5px rgba(10, 132, 255, .16); }
.sx-time li.fix::before { background: var(--green); box-shadow: 0 0 0 5px rgba(52, 199, 89, .18); }
.sx-time time { font-size: 15px; font-weight: 600; }
.sx-time time small { display: block; font-weight: 400; color: var(--muted); }
.sx-time b { font-size: 17px; }
.sx-time p { margin: 6px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.sx-tag { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 14px; font-size: 12px; font-weight: 600; vertical-align: 2px; background: rgba(52, 199, 89, .16); color: var(--green); }
.sx-tag.b { background: var(--ph-bg); color: var(--action); }

/* ---------- Melden (donker blok) ---------- */
.sx-report { margin-top: clamp(70px, 9vw, 120px); border-radius: 14px; background: #1d1d1f; color: #f5f5f7; padding: clamp(32px, 5vw, 64px); text-align: center; }
.sx-report h2 { text-align: center; font-size: clamp(30px, 3.6vw, 44px); color: #fff; }
.sx-report > div > p { margin: 14px 0 0; color: #a1a1a6; font-size: 17px; line-height: 1.55; }
.sx-report .ctas { margin-top: 26px; justify-content: center; }
.sx-report .btn2 { display: inline-flex; align-items: center; padding: 12px 20px; border-radius: 14px; font-size: 15px; font-weight: 600; background: #fff; color: #1d1d1f; }
.sx-report .btn2.ghost { background: rgba(255, 255, 255, .1); color: #fff; }
.sx-report .btn2:hover { text-decoration: none; opacity: .85; }
.sx-flowr { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: rp; }
.sx-flowr li { counter-increment: rp; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 12px; background: rgba(255, 255, 255, .07); }
.sx-flowr li::before { content: counter(rp); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(10, 132, 255, .22); color: #6cb8ff; font-weight: 700; }
.sx-flowr b { display: block; color: #fff; font-size: 16px; }
.sx-flowr span { color: #a1a1a6; font-size: 14.5px; line-height: 1.45; }

/* ---------- Organisaties ---------- */
.sx-org { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
.sx-org .sx-card a { font-weight: 500; }
.sx-updated { margin: 70px 0 60px; text-align: center; color: var(--faint); font-size: 14px; }

/* ---------- Kleinere schermen ---------- */
@media (max-width: 1080px) {
  .sx-glance { grid-template-columns: repeat(2, 1fr); }
  .sx-steps { grid-template-columns: repeat(2, 1fr); }
  .sx-vault, .sx-site, .sx-report { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sx-flow-in { grid-template-columns: 1fr; }
  .sx-wires { grid-template-rows: none; grid-template-columns: 1fr 1fr; padding: 16px 0; gap: 14px; }
  .sx-wire i { width: 2px; height: 46px; }
  .sx-wire i::after { display: none; }
  .sx-wire.to i::before { animation-name: sxDown; } .sx-wire.from i::before { animation-name: sxUp; }
  @keyframes sxDown { from { left: -3px; top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: -3px; top: 38px; opacity: 0; } }
  @keyframes sxUp { from { left: -3px; top: 38px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: -3px; top: 0; opacity: 0; } }
  .sx-glance, .sx-steps, .sx-vs, .sx-check, .sx-org { grid-template-columns: 1fr; }
  .sx-perm div { grid-template-columns: 44px 1fr; gap: 4px 16px; }
  .sx-perm p { grid-column: 2; }
  .sx-specs div, .sx-time li { grid-template-columns: 1fr; gap: 4px; }
  .sx-site-art { grid-template-columns: 1fr; gap: 26px; }
  .sx-block { width: 2px; height: 40px; margin: 0 auto; background: repeating-linear-gradient(180deg, #ff3b30 0 6px, transparent 6px 11px); }
}

/* ---------- Donkere modus ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sx-flow { background: linear-gradient(135deg, #0d2c55, #0f3f74 50%, #0f4b52); }
  :root:not([data-theme="light"]) .sx-zone.dev { background: rgba(255, 255, 255, .06); border-color: rgba(108, 184, 255, .55); }
  :root:not([data-theme="light"]) .sx-zone.ai { background: rgba(0, 0, 0, .15); border-color: rgba(255, 255, 255, .12); }
  :root:not([data-theme="light"]) .sx-zone > b, :root:not([data-theme="light"]) .sx-flow-note, :root:not([data-theme="light"]) .sx-wire { color: #f5f5f7; }
  :root:not([data-theme="light"]) .sx-zone.dev > b { color: #6cb8ff; }
  :root:not([data-theme="light"]) .sx-wire i { background: rgba(255, 255, 255, .3); }
  :root:not([data-theme="light"]) .sx-steps .viz, :root:not([data-theme="light"]) .sx-check > div:first-child .viz { background: linear-gradient(140deg, #0e2f5c, #154a86); }
  :root:not([data-theme="light"]) .sx-steps li:nth-child(2) .viz { background: linear-gradient(140deg, #11406f, #135a63); }
  :root:not([data-theme="light"]) .sx-steps li:nth-child(3) .viz { background: linear-gradient(140deg, #2c2c2e, #3a3a3c); }
  :root:not([data-theme="light"]) .sx-steps li:nth-child(4) .viz, :root:not([data-theme="light"]) .sx-check > div:nth-child(3) .viz { background: linear-gradient(140deg, #114a4a, #1b4f37); }
  :root:not([data-theme="light"]) .sx-check > div:nth-child(2) .viz { background: #000; }
  :root:not([data-theme="light"]) .sx-rings { background: linear-gradient(140deg, #0e2f5c, #135a63); }
  :root:not([data-theme="light"]) .sx-site-art { background: linear-gradient(140deg, #2c2c2e, #1f2a3a); }
  :root:not([data-theme="light"]) .sx-report { background: #1c1c1e; }
}

/* Eén zin: wat jij typt → wat de AI krijgt (10 okt, rustiger) */
.sx-pair { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1fr 48px 1fr; align-items: stretch; gap: 16px; }
.sx-pair .sx-msg { box-shadow: none; padding: 20px 22px; font-size: 17px; }
.sx-pair .sx-msg small { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #6e6e73; margin-bottom: 6px; }
.sx-arrow { display: grid; place-items: center; }
.sx-arrow svg { width: 26px; height: 26px; fill: none; stroke: currentColor; color: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
@media (max-width: 760px) { .sx-pair { grid-template-columns: 1fr; } .sx-arrow svg { transform: rotate(90deg); } }

/* Rechten als vier kaarten (10 okt) */
.sx-perm { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; background: none; padding: 0; border-radius: 0; }
.sx-perm div, .sx-perm div:first-child { display: block; padding: 26px 24px 28px; border-top: 0; border-radius: 12px; background: var(--soft); }
.sx-perm b { display: block; margin-bottom: 10px; font-size: 17px; font-weight: 500; }
.sx-perm b code { font-size: 15px; font-weight: 500; }
.sx-perm p { grid-column: auto; }
@media (max-width: 1000px) { .sx-perm { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sx-perm { grid-template-columns: 1fr; } }
/* 17 okt: vijf rechten op /security (activeTab voor "Read this page", 1.7.0) */
.sx-perm.sx-perm-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) { .sx-perm.sx-perm-5 { grid-template-columns: repeat(2, 1fr); } .sx-perm-5 div:last-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .sx-perm.sx-perm-5 { grid-template-columns: 1fr; } }

/* Meer kleur dan alleen blauw: warm, lila en mint uit het pastelpalet (10 okt) */
.sx-flow { background: radial-gradient(90% 90% at 10% 0%, #fff0e6 0%, transparent 60%), linear-gradient(135deg, #ffe1cf, #ffd3e2 55%, #ead9ff); }
.sx-rings { background: linear-gradient(140deg, #e7e1ff, #d9e6ff); }
.sx-site-art { background: linear-gradient(140deg, #dbf4e7, #ecf6d6); }
.sx-check > div:first-child .viz { background: linear-gradient(140deg, #fff2cc, #ffe2c7); }
.sx-check > div:nth-child(3) .viz { background: linear-gradient(140deg, #ffdbe7, #f1ddff); }

.sx-sec > .sx-fine { font-size: 15px; }

/* Vragen van IT op de businesspagina: dezelfde uitklapvragen als op help.html, binnen de breedte van de pagina. */
.sx-faq { margin-top: 30px; max-width: 860px; }

/* Audit 11 okt: op een smal scherm niets meer afgeknipt; de reponaam breekt niet midden in. */
@media (max-width: 1080px) {
  .sx-vault, .sx-site { grid-template-columns: minmax(0, 1fr); }
  .sx-vault > *, .sx-site > * { min-width: 0; }
}
@media (max-width: 560px) { .sx-ring { padding: 40px 12px 12px; } .sx-rings { padding: 16px; } }
.sx-repo .h > :first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sx-repo .f { flex-wrap: wrap; }
.sx-card h3 { margin-top: 0; }

/* Link naar het beveiligingsoverzicht (PDF) onder de wissel in de hero (12 okt) */
.sx-dl { margin: 18px 0 0; font-size: 15px; color: var(--faint); }
.sx-dl a { font-weight: 500; }