/* security-assessment — generated by convert.py from "Free Online Security Assessment.dc.html".
   Shared rules live in base.css; only page-specific rules belong here. */

.wrap { max-width: 860px }
.h2 { font-size: clamp(24px,3vw,32px); line-height: 1.14 }
.lead { font-size: 18px }
.opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: #fff; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); padding: 16px 18px; cursor: pointer; font-family: var(--font-body); font-size: 15.5px; color: var(--fg1); transition: all var(--dur-base) }
.opt:hover { border-color: var(--azure-300); background: var(--azure-50) }
.opt[data-sel="1"] { border-color: var(--azure); background: var(--azure-50); box-shadow: var(--ring-focus) }
.opt .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong); flex: none; display: flex; align-items: center; justify-content: center; transition: all var(--dur-base) }
.opt[data-sel="1"] .dot { border-color: var(--azure); background: var(--azure) }
.opt[data-sel="1"] .dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff }
.opt .pv { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--fg4); flex: none }
.field { font-family: var(--font-body); font-size: .95rem; border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 13px 16px; outline: none; width: 100% }
.field:focus { border-color: var(--azure); box-shadow: var(--ring-focus) }
.fade { animation: bnFade .45s var(--ease-out) }
@media (max-width:720px) {
.lead-grid { grid-template-columns: 1fr!important }
.res-head { grid-template-columns: 1fr!important }
}