/* Security fundamentals page */
.sf-lede{max-width:75ch;color:var(--muted);margin:-6px 0 22px}
.motion-svg .sf-msg{font-size:13px;font-weight:600;fill:var(--ink);text-anchor:middle}
.motion-svg .sf-msg.enc{fill:var(--purple-strong)}
.sf-paint{stroke:#fff;stroke-width:2}
.sf-paint.r{fill:#E11D48}.sf-paint.b{fill:var(--blue)}.sf-paint.o{fill:var(--orange)}
.sf-paint.g{fill:#16A34A}.sf-paint.k{fill:#92400E}.sf-paint.y{fill:#FACC15}
.sf-blk rect{stroke-width:1.5}
.motion-svg .sf-blk text{font-size:13px;font-weight:600;fill:var(--ink);text-anchor:middle}
.sf-blk.ip rect{fill:var(--surface-2);stroke:var(--line-strong)}
.sf-blk.new rect{fill:var(--navy);stroke:var(--navy)}
.motion-svg .sf-blk.new text{fill:#fff}
.sf-blk.esp rect{fill:#F5F3FF;stroke:var(--purple)}
.sf-blk.auth rect{fill:#EDE9FE;stroke:var(--purple-strong)}
.sf-blk.tcp rect{fill:var(--cyan-tint);stroke:var(--cyan)}
.sf-blk.data rect{fill:#F0FDFA;stroke:var(--teal)}
.sf-blk.udp rect{fill:var(--orange-tint);stroke:var(--orange)}
.sf-blk.ah rect{fill:#FDF4FF;stroke:var(--pink)}
.sf-tool{margin-top:22px}
.sf-tool h3{font-size:var(--fs-h4);margin:0 0 6px}
.sf-tool-intro{color:var(--muted);margin:0 0 14px;max-width:75ch}
.sf-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px;margin:0 0 14px}
.sf-form label,.sf-pick{display:grid;gap:6px;font-size:.88rem;font-weight:600;color:var(--ink)}
.sf-form input,.sf-form select,.sf-pick select{font:inherit;font-size:.95rem;font-weight:500;padding:.5rem .65rem;border:1px solid var(--line-strong);border-radius:.6rem;background:var(--surface);color:var(--ink);width:100%}
.sf-form input:focus-visible,.sf-form select:focus-visible,.sf-pick select:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.sf-out{padding:14px 16px;border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--line)}
.sf-out p{margin:0 0 6px}.sf-out p:last-child{margin:0}
.sf-out .ok{color:#15803D;font-weight:600}
.sf-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.sf-two .sub-title{margin-top:36px}
.sf-two > div,.sf-frames > *,.sf-cases > *{min-width:0}
.sf-frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sf-frames .card p,.key-points .card p{margin:0;color:var(--muted)}
.sf-frames h3,.key-points h3{font-size:var(--fs-h4);margin:2px 0 8px}
.sf-finder{display:grid;gap:16px}
.sf-pick{max-width:34rem}
.sf-cases{display:grid;gap:14px}
.sf-case{padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.sf-case h4{margin:0 0 8px;font-size:1rem}
.sf-case p{margin:0 0 8px;color:var(--text)}.sf-case p:last-child{margin:0}
.sf-case code,.compare code{font-size:.85em;word-break:break-word}
.no-js .sf-pick{display:none}
.sf-note{max-width:80ch;color:var(--muted);margin:18px 0 0}
@media (max-width:900px){.sf-form{grid-template-columns:repeat(2,minmax(0,1fr))}.sf-two,.sf-frames{grid-template-columns:1fr}}
@media (max-width:520px){.sf-form{grid-template-columns:1fr}}