:root { --red:#e31837; --red-dark:#b4122d; --ink:#1d1d1f; --muted:#6e6e73; --rule:#d2d2d7; --soft:#f5f5f7; --link:#0066cc; --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font-family:var(--font); background:#fff; }
a { color:var(--link); text-decoration:none; } a:hover { text-decoration:underline; }
.page { width:min(900px,calc(100% - 48px)); margin:auto; padding:28px 0 72px; }
.topbar { display:flex; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--rule); }
.brand { font-size:14px; font-weight:700; } .brand-mark { display:inline-block; width:12px; height:12px; margin-right:10px; border-radius:50%; background:var(--red); }
.crumbs { margin:36px 0 22px; color:var(--muted); font-size:14px; } h1 { margin:0; font-size:clamp(2.5rem,7vw,4.5rem); line-height:.98; letter-spacing:-.07em; } h2 { margin:0 0 10px; font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.045em; } p { line-height:1.65; color:#303035; }
.lead { max-width:62ch; margin:18px 0 0; font-size:1.15rem; }
.section { margin-top:42px; padding-top:30px; border-top:1px solid var(--rule); }
.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:20px; } .card { display:block; padding:22px; border:1px solid #e5e5e8; border-radius:18px; background:#fafafa; } .card:hover { background:var(--soft); text-decoration:none; } .card h2 { font-size:1.25rem; } .card p { margin-bottom:0; }
.callout { margin-top:20px; padding:20px 22px; border-left:4px solid var(--red); background:var(--soft); } .callout p { margin:0; }
.security-tree { margin:20px 0 0; padding:22px 24px; border:1px solid #e5e5e8; border-radius:18px; background:#fafafa; }
.security-tree ul { margin:0; padding-left:28px; line-height:1.8; }
.security-tree > ul { padding-left:20px; list-style:none; }
.security-tree > ul > li { font-weight:700; }
.security-tree li::marker { color:var(--red); }
.security-tree li li { font-weight:400; }
.steps { padding-left:24px; line-height:1.7; } .steps li { padding:7px 0; } .result,.problems,.mobile { padding:20px 22px; border-radius:16px; background:var(--soft); } .problems { background:#fff7f8; border:1px solid #f2cbd1; } .mobile { margin-top:20px; border:1px solid #d9e7f5; background:#f5f9fd; }
.meta { color:var(--muted); font-size:14px; } .footer-nav { display:flex; justify-content:space-between; gap:16px; margin-top:44px; padding-top:22px; border-top:1px solid var(--rule); }
.search-form { margin-top:34px; } .search-form label { display:block; margin-bottom:10px; font-weight:700; } .search-row { display:flex; gap:10px; } .search-row input { flex:1; min-width:0; padding:14px 16px; border:1px solid #b8b8bd; border-radius:12px; font:inherit; font-size:1rem; } .search-row button { padding:0 22px; border:0; border-radius:12px; background:var(--red); color:#fff; font:inherit; font-weight:700; cursor:pointer; } .search-status { margin-top:24px; color:var(--muted); } .search-result { padding:20px 0; border-top:1px solid var(--rule); } .search-result a { font-size:1.25rem; font-weight:700; } .search-result p { margin:8px 0 0; } .search-result .result-section { color:var(--red-dark); font-size:.9rem; font-weight:700; }
@media (max-width:700px) { .page { width:min(100% - 28px,900px); padding-top:18px; } .topbar { flex-direction:column; gap:10px; } .cards { grid-template-columns:1fr; } .footer-nav { flex-direction:column; } }

/* Shared training-video section used by topic pages. */
.training-video-item + .training-video-item { margin-top:28px; }

.training-video-link { display:flex; align-items:center; gap:16px; padding:24px; border:1px solid #d2d2d7; border-radius:12px; background:var(--soft); font-weight:600; }
.training-video-link:hover { background:#ececf0; }
.training-video-link:focus-visible { outline:3px solid #0066cc; outline-offset:3px; }
.training-video-play { display:grid; place-items:center; flex:0 0 48px; height:36px; border-radius:9px; background:#c41230; color:white; }