/* Warden: night and a clear signal. Violet to cyan is the only colour that
 * moves; it marks the main action and what is safe again. */
:root{ --a1:#6D28D9; --a2:#0E7490; --ok:#0F9D74; --grad:linear-gradient(90deg,#A78BFA,#22D3EE); --on-grad:#0B0918; --bg:#F6F5FB; --card2:#EFEDF8 }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --a1:#C4B5FD; --a2:#67E8F9; --ok:#6EE7B7; --bg:#0B0918; --bg2:#100D22; --card:#16122E; --card2:#1D1838 } }
:root[data-theme="dark"]{ --a1:#C4B5FD; --a2:#67E8F9; --ok:#6EE7B7; --bg:#0B0918; --bg2:#100D22; --card:#16122E; --card2:#1D1838 }
.hero h1 em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .pulse{margin-top:6px;max-height:90px}
.phone .ask{background:radial-gradient(120% 90% at 85% 0%,rgba(34,211,238,.32),transparent 60%),radial-gradient(90% 80% at 0% 100%,rgba(167,139,250,.34),transparent 60%),#16122E}

.crewbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px}
.crewbar .cb{display:flex;gap:12px;align-items:center;padding:10px;border-radius:16px;background:var(--card2);animation:rise .4s var(--ease) both;animation-delay:calc(var(--i) * 70ms);position:relative}
.crewbar .cb img{width:40px;height:40px;border-radius:12px;flex:none}
.crewbar .cb b{display:block;font-family:var(--display);font-size:.98rem;letter-spacing:-.02em}
.crewbar .cb span{display:block;color:var(--muted);font-size:.82rem;line-height:1.35}
.crewbar .cb.live::after{content:"";position:absolute;top:12px;inset-inline-end:12px;width:8px;height:8px;border-radius:99px;background:var(--ok);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}}
@media (max-width:900px){ .crewbar{grid-template-columns:1fr} }

/* the exposure at a glance */
.score{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.score div{padding:14px;border-radius:16px;background:var(--card2)}
.score b{display:block;font-family:var(--display);font-size:1.7rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.score span{color:var(--muted);font-size:.82rem}
.score .hot b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:720px){ .score{grid-template-columns:1fr 1fr} }
.breach{grid-template-columns:auto minmax(0,1fr) auto;align-items:start}
.breach .lead{font-family:var(--display);font-weight:800;font-size:.8rem}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tags .tag.pw{background:color-mix(in srgb,#E11D48 14%,transparent);color:#BE123C}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tags .tag.pw{color:#FDA4AF} }
.req{grid-template-columns:auto minmax(0,1fr);align-items:start}
.req .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.safe{display:flex;gap:8px;align-items:flex-start;margin-top:12px} .safe svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--ok)}
.letter{margin-top:10px} .letter summary{cursor:pointer;color:var(--muted);font-size:.86rem;font-weight:650}
.letter pre{white-space:pre-wrap;font-family:var(--sans);font-size:.9rem;line-height:1.55;background:var(--card);padding:14px;border-radius:12px;margin:8px 0 0;max-height:360px;overflow:auto}
.why{margin:8px 0 0;font-size:.9rem;color:var(--ink);line-height:1.5}