/* educate-health-check — generated by convert.py from "Bitnet Educate - Cyber Health Check.dc.html".
   Shared rules live in base.css; only page-specific rules belong here. */

.wrap { max-width: 820px }
.h2 { font-size: clamp(24px,3vw,32px); line-height: 1.14 }
.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 }
.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% }
.fade { animation: bnFade .45s var(--ease-out) }
body { background: linear-gradient(168deg,#eaf2fb 0%,#d3e2f2 26%,#aecbe8 58%,#7fa9d6 100%) no-repeat fixed!important; background-attachment: fixed!important }
.card { background: rgba(255,255,255,.42)!important; backdrop-filter: blur(20px) saturate(1.25); -webkit-backdrop-filter: blur(20px) saturate(1.25); border: 1px solid rgba(255,255,255,.5)!important; box-shadow: 0 10px 34px rgba(48,65,81,.16)!important }
.card:hover { background: rgba(255,255,255,.55)!important; border-color: rgba(255,255,255,.72)!important }
[style*="background:#fff"] { background: rgba(255,255,255,.72)!important; backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border: 1px solid rgba(255,255,255,.6) }
[style*="background:var(--neutral-50)"] { background: rgba(255,255,255,.22)!important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px) }
[style*="background:var(--azure-50)"] { background: rgba(96,159,210,.24)!important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.4) }
[style*="background:var(--azure-deep)"] { background: rgba(40,60,77,.5)!important; backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); border: 1px solid rgba(255,255,255,.22) }