/* Security page only: 2-column hero with the ASCII shell (security.js). */
.sec-hero { padding: calc(68px + var(--s-8)) 0 var(--s-8); }
.sec-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.sec-hero h1 { max-width: 11em; }
.sec-hero p { max-width: 27em; }
.vault { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; justify-self: end; }
.vault canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .9s cubic-bezier(.16, 1, .3, 1); }
.vault.on canvas { opacity: 1; }
/* no JS: keep the space quiet instead of an empty box */
html:not(.js) .vault { display: none; }

@media (max-width: 960px) {
  .sec-hero .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .sec-hero h1 { max-width: 14em; }
  .vault { justify-self: center; max-width: 480px; }
}
@media (max-width: 560px) {
  .sec-hero { padding: calc(68px + var(--s-7)) 0 var(--s-6); }
}
@media (prefers-reduced-motion: reduce) {
  .vault canvas { transition: none; }
}