/* Security guides (owner, 2026-10-28; pages written by website/build_de.py from website/guides.py). The outer width is
   the locked .wrap (CLAUDE.md rule 10); only the reading width of the text blocks is limited inside it. Colours follow
   the site rule: headings near-white, body text light grey. */
.guides{padding-block:clamp(40px,6vw,80px) clamp(56px,8vw,104px)}
.guides-head{max-width:760px;margin-bottom:clamp(28px,4vw,44px)}
.guides-head h1{font-size:clamp(32px,4.4vw,52px);line-height:1.08;margin:18px 0 14px;color:#F2F4FA}
.guides-lead{font-size:17px;line-height:1.6;color:#C2C7DA;margin:0;max-width:60ch}
.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:760px){.guide-grid{grid-template-columns:minmax(0,1fr)}}
.guide-card{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:18px;text-decoration:none;color:#C2C7DA;
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 5%,var(--surface)),var(--surface));
  box-shadow:inset 0 0 0 1px var(--border);transition:box-shadow .2s ease,transform .2s ease}
.guide-card:hover,.guide-card:focus-visible{transform:translateY(-2px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 55%,var(--border)),0 18px 40px -22px color-mix(in srgb,var(--brand) 60%,transparent)}
.guide-card:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.guide-card h2{margin:0;font-size:21px;line-height:1.25;color:#F2F4FA}
.guide-card p{margin:0;font-size:15px;line-height:1.6}
.guide-more{margin-top:auto;padding-top:6px;font-weight:600;font-size:14px;color:var(--brand)}
.guide-meta{font-family:"IBM Plex Mono";font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#C2C7DA}
.guide{max-width:760px;margin:0 auto}
.guide-back{display:block;width:max-content;margin-bottom:22px;font-size:14px;font-weight:600;color:var(--brand);text-decoration:none}
.guide-back:hover{text-decoration:underline}
.guide h1{font-size:clamp(30px,4vw,44px);line-height:1.12;margin:10px 0 22px;color:#F2F4FA}
.guide h2{font-size:clamp(20px,2.2vw,24px);margin:34px 0 12px;color:#F2F4FA}
.guide p,.guide li{font-size:16.5px;line-height:1.7;color:#C2C7DA}
.guide p{margin:0 0 14px}
.guide ul,.guide ol{margin:0 0 16px;padding-left:22px}
.guide li{margin-bottom:8px}
.guide li::marker{color:var(--brand)}
.guide strong{color:#F2F4FA}
.guide a{color:var(--brand)}
.guide code{display:block;overflow-x:auto;padding:12px 14px;border-radius:10px;font-family:"IBM Plex Mono";font-size:14px;color:#F2F4FA;background:var(--bg);box-shadow:inset 0 0 0 1px var(--border)}
.guide-cta{max-width:760px;margin:clamp(36px,5vw,56px) auto 0;padding:clamp(22px,3.5vw,32px);border-radius:20px;color:#C2C7DA;
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 9%,var(--surface)),var(--surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 40%,var(--border-strong)),0 30px 70px -30px color-mix(in srgb,var(--brand) 45%,transparent)}
.guide-cta h2{margin:0 0 8px;font-size:22px;color:#F2F4FA}
.guide-cta p{margin:0 0 18px;font-size:15.5px;line-height:1.6}
.guides .guide-grid + .guide-cta{max-width:none}
.lang-mini{display:inline-flex;padding:3px;border-radius:10px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--border)}
.lang-mini a{padding:6px 10px;border-radius:8px;font-family:"IBM Plex Mono";font-size:12px;font-weight:600;letter-spacing:.06em;text-decoration:none;color:var(--text-muted)}
.lang-mini a.on{color:var(--brand-ink);background:linear-gradient(180deg,#FFD25C,var(--brand))}