/* Security page.

   Built from the site's own classes: page-hero, api-console, section,
   section-subtle, section-head, grid-2/3, plain-card, final-cta. This file
   holds only what those don't cover: the checklist inside the hero console,
   and the "what's kept" rows. Colours are the site's tokens. */

.sc-shot { max-width: 980px; margin-left: auto; margin-right: auto; }

/* ------------------------------------------- the checks, in the hero */
.sc-checks {
  list-style: none; margin: 0; padding: 10px 12px;
  display: grid; grid-template-columns: 1fr; gap: 2px;
}
@media (min-width: 820px) { .sc-checks { grid-template-columns: 1fr 1fr; column-gap: 12px; padding: 14px 16px; } }
.sc-checks li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 12px; border-radius: 12px;
}
.sc-checks li:hover { background: rgb(255 255 255 / 0.03); }
.sc-checks .icon { flex-shrink: 0; margin-top: 1px; color: #17b26a; }
.sc-checks b { display: block; font-size: 14.5px; font-weight: 600; color: #fff; }
.sc-checks span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: rgb(255 255 255 / 0.55); }
.sc-foot {
  margin: 0; padding: 14px 24px; border-top: 1px solid rgb(255 255 255 / 0.1);
  font-size: 13px; line-height: 1.5; color: rgb(255 255 255 / 0.6);
}

/* ---------------------------------------------------- the 2x2 cards */
.sc-pairs { max-width: 980px; margin-left: auto; margin-right: auto; }
.sc-pairs .plain-card { background: rgb(var(--card)); }

/* --------------------------------------------------- what's kept */
.sc-kept {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid rgb(var(--card-border) / 0.1); border-radius: var(--radius-xl);
  background: rgb(var(--card)); overflow: hidden;
  box-shadow: 0 1px 2px rgb(22 23 39 / 0.04), 0 8px 24px -8px rgb(22 23 39 / 0.1);
}
.sc-kept li {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  padding: 16px 22px; border-top: 1px solid rgb(var(--card-border) / 0.08);
}
.sc-kept li:first-child { border-top: none; }
.sc-kept b { font-size: 15px; font-weight: 600; color: rgb(var(--text)); }
.sc-kept span { font-size: 14px; line-height: 1.5; color: rgb(var(--text-secondary)); }
@media (min-width: 720px) {
  .sc-kept li { grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: baseline; }
}
.sc-note { margin-top: 20px; text-align: center; font-size: 14px; color: rgb(var(--text-secondary)); }
.sc-note a { color: rgb(var(--brand-violet)); font-weight: 600; }
.sc-note a:hover { text-decoration: underline; }