/* ============================================================
   Security (security.html), on top of site.css + pages.css + text.css.
     .scan-flow ...... the scan as a diagram: what is checked, then the two outcomes
     .scan-facts ..... three short facts under it
   ============================================================ */
#scan h2{max-width:none}
.scan-lede{max-width:62ch}
.scan-flow{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:center;gap:0;margin-top:36px}
.scan-box{padding:20px 22px 22px;border-radius:6px;background:var(--sea-2)}
.scan-k{font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--chalk-dim)}
.scan-box h3{margin-top:4px;font-size:clamp(19px,1.7vw,22px);letter-spacing:-.02em}
.scan-box p:not(.scan-k){margin-top:6px;font-size:16px;line-height:1.45;color:var(--chalk-dim)}
.scan-box ul{list-style:none;margin-top:12px}
.scan-box li{position:relative;padding:8px 0 8px 22px;border-top:1px solid var(--rule);font-size:16px;line-height:1.4}
.scan-box li::before{content:"";position:absolute;left:2px;top:15px;width:9px;height:9px;border-radius:50%;background:var(--signal)}
.scan-arrow{justify-self:center;width:28px;height:28px;background:var(--signal);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.scan-outcomes{display:grid;gap:12px}
.scan-box--ok{background:rgba(127,224,181,.12)}
.scan-box--ok .scan-k,.scan-box--ok h3{color:var(--mint)}
.scan-box--stop{background:rgba(255,111,89,.14)}
.scan-box--stop .scan-k,.scan-box--stop h3{color:var(--flag-text)}
.scan-box--ok p:not(.scan-k),.scan-box--stop p:not(.scan-k){color:var(--chalk)}
.scan-facts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 32px;margin-top:32px;padding-top:20px;border-top:1px solid var(--rule)}
.scan-facts li{font-size:16px;line-height:1.45;color:var(--chalk-dim)}
.scan-facts b{display:block;color:var(--chalk);font-size:17px;margin-bottom:2px}
@media(max-width:860px){
  .scan-flow{grid-template-columns:1fr;gap:10px}
  .scan-arrow{transform:rotate(90deg)}
  .scan-facts{grid-template-columns:1fr}
}
