/* "How secure is Shadow Chat?" intro shown from the login screen. Reuses the
   pwa-guide modal shell (.pg-ov/.pg-modal/.pg-head/.pg-x/.pg-sub); only the
   content grid is defined here. Theme-aware via app.css variables. */
.sec-dl { width: 100%; background: none; cursor: pointer; font-family: inherit; }

.sg-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 14px 20px 4px;
}
@media (max-width: 600px) { .sg-grid { grid-template-columns: 1fr; } }

.sg-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 13px 14px;
}
.sg-card h3 {
  margin: 0 0 6px; font-size: 14.5px; color: var(--text-primary);
  display: flex; align-items: center; gap: 9px;
}
.sg-card h3 .sg-ic { font-size: 19px; line-height: 1; }
.sg-card p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.sg-card p b { color: var(--text-primary); font-weight: 700; }

.sg-foot-line {
  padding: 12px 20px 2px; margin: 0; color: var(--text-secondary);
  font-size: 13px; line-height: 1.5; text-align: center;
}
.sg-badges {
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
  padding: 12px 20px 22px;
}
.sg-badge {
  font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary);
}