/* /security (S6 B, Benjamin 29/10). Measured from the Swift lab (SiteSecurity.swift graphite(.player)) and from
   apple.com/privacy (29/10): one surface, parts set apart by air, colour only in the links. Never hover. */

/* The hero: the paper goes up under the glass top bar (64) and fades into night at the bottom. */
.sec-hero { position: relative; height: 820px; margin-top: -64px; overflow: hidden; }
.sec-art { position: absolute; left: 80%; top: 62%; width: 0; height: 0; }
.sec-rings { position: absolute; left: -1400px; top: -1400px; display: block; }
.sec-rings-light { display: none; }
@media (prefers-color-scheme: light) {
  .sec-rings-dark { display: none; }
  .sec-rings-light { display: block; }
}
/* The player from the app: the mannequin in greyscale on a grey disc (Kit Avatar, mono), never initials. */
.sec-player {
  position: absolute; left: -64px; top: -64px; width: 128px; height: 128px;
  border-radius: 50%; overflow: hidden; background: #525252;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
@media (prefers-color-scheme: light) {
  .sec-player { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
}
.sec-player img { position: absolute; height: 260%; width: auto; max-width: none; left: 50%; top: -18%; transform: translateX(-50%); filter: grayscale(1); }
.sec-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 260px; background: linear-gradient(to bottom, transparent, var(--natt)); }
.sec-hero-text { position: relative; padding: calc(64px + 150px) var(--g) 0; display: flex; flex-direction: column; gap: 20px; }
.sec-hero-text h1 { font-size: 64px; letter-spacing: -0.015em; max-width: 640px; }
.sec-hero-text .lead { max-width: 560px; }
.sec-kicker { font-size: 21px; font-weight: 600; color: var(--ink); letter-spacing: 0.011em; }

/* The principles: six charcoal tiles, radius 18, two across. */
.sec-principles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 40px var(--g) 0; }
.sec-tile { background: var(--kull); border-radius: 18px; padding: 40px; min-height: 200px; }
.sec-tile h2 { font-size: 28px; letter-spacing: 0.007em; }
.sec-tile p { margin-top: 12px; font-size: 17px; }

.sec-report { padding: 140px var(--g) 120px; }
.sec-report h2 { font-size: var(--h2); letter-spacing: -0.003em; }
.sec-report .lead { margin-top: 20px; max-width: 640px; }
.sec-details { margin-top: 40px; max-width: 640px; }
.sec-links { margin-top: 20px; display: flex; gap: 28px; }

@media (max-width: 833px) {
  .sec-hero { height: 640px; }
  .sec-art { left: 72%; top: 80%; }
  .sec-rings { transform: scale(0.6667); transform-origin: 1400px 1400px; }
  .sec-player { left: -38px; top: -38px; width: 76px; height: 76px; }
  .sec-fade { height: 160px; }
  .sec-hero-text { padding-top: calc(64px + 72px); gap: 14px; }
  .sec-hero-text h1 { font-size: 40px; }
  .sec-kicker { font-size: 17px; }
  .sec-principles { grid-template-columns: 1fr; gap: 12px; padding-top: 24px; }
  .sec-tile { padding: 28px; min-height: 0; }
  .sec-tile h2 { font-size: 24px; }
  .sec-report { padding: 80px var(--g) 72px; }
}