/* /security only: the hero, the four threats, the spec sheet and the
   disclosure row. Scoped under .sec-page so nothing leaks. */

.sec-page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

/* == hero == */
.sec-page__hero { padding: 66px 0 44px; display: flex; flex-direction: column; gap: 22px; max-width: 760px; }
.sec-page__eyebrow { font: var(--dm11); color: var(--ph-dim); letter-spacing: 2px; -webkit-font-smoothing: none; }
.sec-page__title { margin: 0; font: 400 33px/1.3 var(--face-pixel); color: var(--ph-bright); -webkit-font-smoothing: none; text-wrap: balance; }
.sec-page__lede { margin: 0; font: 400 16px/1.75 var(--face-mono); color: var(--ph-mute); max-width: 34em; text-wrap: pretty; }

/* == what a compromise can't do: a 2x2 that never orphans a card == */
.sec-page__stops { padding-bottom: 88px; }
.threats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 1px; }
.threat {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--ph-l2);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.threat__who { font: var(--dm11); letter-spacing: 1px; color: var(--ph-dim); -webkit-font-smoothing: none; }
.threat__cant { font: 400 22px/1.3 var(--face-pixel); color: var(--ph-bright); -webkit-font-smoothing: none; }
.threat__say { font: 400 13px/1.6 var(--face-mono); color: var(--ph-mute); }

/* == the spec sheet == */
.sec-page__sheet { padding-bottom: 88px; display: flex; flex-direction: column; gap: 22px; }
.sec-page__h2 { margin: 0; font: 400 33px/1.3 var(--face-pixel); color: var(--ph-bright); -webkit-font-smoothing: none; text-wrap: balance; }
.sheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1px; }
.sheet__col {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--ph-l2);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sheet__head { font: var(--dm11); letter-spacing: 1px; color: var(--ph-dim); -webkit-font-smoothing: none; }
.sheet__items { display: flex; flex-direction: column; gap: 12px; }
.sheet__item { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sheet__say { font: 400 13px/1.45 var(--face-mono); color: var(--ph-text); }
.sheet__item .pill { height: 20px; padding: 0 6px; box-sizing: border-box; }
.sec-page__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--surface);
  padding: 18px 22px;
  box-shadow: 0 0 0 1px var(--ph-l2);
}
.sec-page__more:hover { background: var(--ph-wash2); }
.sec-page__more-say { font: 400 13px/1.6 var(--face-mono); color: var(--ph-mute2); }
.sec-page__more-go { font: var(--dm11); color: var(--ph); letter-spacing: 1px; white-space: nowrap; -webkit-font-smoothing: none; }