/* Security and About (phase 9b spec 10). Loaded after site-prose.css: facts at a glance under the
   heading, the security page's contents beside its text, and the about page's company card. */

.trust-facts { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); margin: 0; }
.trust-facts > .card { display: grid; gap: var(--space-2); align-content: start; }
.trust-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* A phone stacks the columns. From 960px the security page's contents stay beside the text as
   you read, and the about page's company card sits beside its text. */
.trust { display: grid; gap: var(--space-6); align-items: start; }
.trust__toc ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-block-start: var(--space-3); }
.trust__toc a { color: var(--ink-2); font-weight: 500; }
.trust__toc a:hover { color: var(--ink); }
@media (min-width: 960px) {
  .trust { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-8); }
  .trust--aside { grid-template-columns: minmax(0, 1fr) 20rem; }
  .trust__toc { position: sticky; inset-block-start: calc(var(--header-height) + var(--space-5)); }
  .trust__toc ul { display: grid; }
}
.trust-prose > :first-child { margin-block-start: 0; }

/* The next step closes the page's own section, so the tinted footer follows a white band. */
.trust-next { display: grid; gap: var(--space-3); justify-items: start; margin-block-start: var(--space-8); }
.trust-next > * { margin: 0; }

.trust-aside h2 { font-size: var(--text-lg); letter-spacing: var(--track-lg); margin: 0 0 var(--space-4); }
.trust-details { margin: 0; }
.trust-details dt { color: var(--ink-2); font-size: var(--text-sm); }
.trust-details dt:not(:first-child) { margin-block-start: var(--space-3); }
.trust-details dd { margin: 0; overflow-wrap: anywhere; }