/* An architectural security study within the ownership chapter. */
#main #ownership .security-foundation {
  display: block;
  margin-top: clamp(72px, 8vw, 128px);
  padding-top: clamp(28px, 3vw, 48px);
  border-top: 1px solid #bdcdc3;
  scroll-margin-top: 24px;
}
.security-overline {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #007d70;
  font: 500 14px/1.6 var(--mono);
  letter-spacing: .025em;
}
.security-overline > :last-child { color: #53695d; text-align: right; }
.security-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(32px, 5vw, 80px);
  padding-block: clamp(40px, 4.5vw, 72px) clamp(38px, 4vw, 64px);
}
#main #ownership .security-heading h3 { margin: 0; }
#main #ownership .security-heading h3 em { color: #007f72; }
#main #ownership .security-heading > p {
  margin: 0 0 5px;
  max-width: 45ch;
  color: #425b4e;
  font-size: var(--reading-size);
  line-height: 1.65;
  text-wrap: pretty;
}
.security-tabs { display: none; }
.security-foundation.is-ready .security-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(20px, 3vw, 48px);
}
.security-tabs button {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  min-height: 95px;
  padding: 0 0 22px;
  border: 0;
  border-bottom: 1px solid #bdcdc3;
  border-radius: 0;
  background: none;
  text-align: left;
  color: #425b4e;
}
.security-tabs button::after {
  content: '';
  position: absolute;
  bottom: -1px;
  inset-inline: 0;
  height: 3px;
  background: #007f72;
  opacity: 0;
}
.security-tabs button[aria-selected="true"]::after { opacity: 1; }
.security-tabs button > span { font: 500 14px/1.5 var(--mono); letter-spacing: .025em; }
.security-tabs button > strong { font: 600 clamp(20px, 1.65vw, 26px)/1.2 'Geist', Arial, sans-serif; letter-spacing: -.035em; }
.security-tabs button:is(:hover, [aria-selected="true"]) { color: #007f72; }
.security-tabs button:focus-visible { outline-offset: 7px; }
.security-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: center;
  padding-top: clamp(30px, 4vw, 64px);
}
.security-visual { min-width: 0; margin: 0; align-self: start; }
.security-artwork { position: relative; isolation: isolate; }
.security-artwork > img {
  display: block;
  width: 100%;
  height: auto;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(0deg, transparent, #000 7%, #000 96%, transparent);
  mask-composite: intersect;
}
/* The light is registered to the photographed hardware, in its native viewBox. */
.security-activity {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.security-rack-activity { opacity: .9; transition: opacity .6s ease; }
.security-visual[data-focus="access"] [data-rack="access"],
.security-visual[data-focus="data"] [data-rack="data"],
.security-visual[data-focus="oversight"] [data-rack="oversight"],
.security-visual[data-focus="recovery"] [data-rack="recovery"] { opacity: 1; }
.security-interior { fill: url(#security-interior-light); }
.security-cabinet-light { fill: none; stroke: #89ffd2; stroke-width: 2; opacity: .5; }
.security-module-face {
  fill: url(#security-module-light);
  stroke: #99ffd5;
  stroke-width: 1.25;
  stroke-opacity: .6;
  opacity: .65;
  animation: security-module-load var(--load-duration, 5.8s) ease-in-out var(--load-delay, 0s) infinite;
}
.security-work-light {
  opacity: .8;
  animation: security-drive-activity var(--activity-duration, 4.6s) steps(1, end) var(--activity-delay, 0s) infinite;
}
.security-fan-rotor {
  transform-origin: 0 0;
  animation: security-fan-turn 1.8s linear infinite;
}
.security-activity .security-animated { animation-play-state: paused; }
.security-visual[data-animation-state="running"] .security-activity .security-animated { animation-play-state: running; }
@keyframes security-module-load {
  0%, 100% { opacity: .4; }
  24% { opacity: .9; }
  56% { opacity: .58; }
  81% { opacity: 1; }
}
/* Independent drive activity: fixed points brighten; nothing travels down a rack. */
@keyframes security-drive-activity {
  0%, 18%, 42%, 71%, 100% { opacity: .18; }
  8%, 29%, 55%, 86% { opacity: 1; }
}
@keyframes security-fan-turn { to { transform: rotate(360deg); } }
.security-motion {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-height: 44px;
  margin-top: 8px;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: #497162;
  font: 500 13px/1.4 'Geist', Arial, sans-serif;
  cursor: pointer;
}
.security-motion[hidden] { display: none; }
.security-motion > :first-child { width: 15px; color: #007d70; text-align: center; }
.security-motion:hover { color: #007d70; }
.security-motion:focus-visible { outline: 2px solid #007d70; outline-offset: 3px; border-radius: 2px; }
.security-motion:disabled { cursor: default; }
html[data-motion="reduced"] .security-activity *,
.security-visual[data-animation-state="reduced"] .security-activity * { animation: none !important; transition: none !important; }
html[data-motion="reduced"] .security-work-light,
.security-visual[data-animation-state="reduced"] .security-work-light { opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  .security-activity * { animation: none !important; transition: none !important; }
  .security-work-light { opacity: .8; }
}
.security-visual figcaption {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 20px;
  color: #497162;
  font: 500 14px/1.7 var(--mono);
  letter-spacing: .02em;
}
.security-visual figcaption > :last-child { color: #53695d; }
.security-pin { display: none; }
.is-ready .security-pin {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #f5fff5a8;
  border-radius: 50%;
  background: linear-gradient(145deg, #f7fff536, #c1e4d114);
  -webkit-backdrop-filter: blur(1.5px) saturate(1.1);
  backdrop-filter: blur(1.5px) saturate(1.1);
  color: #fff;
  text-shadow: 0 1px 3px #082c24, 0 0 1px #082c24;
  box-shadow: inset 0 1px 0 #ffffff8c, inset 0 -1px 0 #103b2526, 0 2px 8px #103b2526;
  font: 600 14px/1 var(--mono);
  transform: translate(-50%, -50%);
}
/* Selection is a fine jade rim; the illustration stays visible at rest. */
.is-ready .security-pin[aria-pressed="true"] {
  border-color: #168d7bd9;
  box-shadow: inset 0 1px 0 #ffffffa6, 0 0 0 2px #007d7038, 0 2px 8px #103b2526;
}
.is-ready .security-pin:is(:focus-visible, :active) {
  background: #007d70ed;
  border-color: #e5fff3d9;
  text-shadow: none;
}
.is-ready .security-pin:focus-visible {
  outline: 2px solid #007d70;
  outline-offset: 4px;
  box-shadow: 0 0 0 4px #f8fff4e6;
}
@media (hover: hover) and (pointer: fine) {
  .is-ready .security-pin:hover {
    background: #007d70ed;
    border-color: #e5fff3d9;
    text-shadow: none;
  }
}
.security-pin-access { left: 22%; top: 67%; }
.security-pin-data { left: 44%; top: 48%; }
.security-pin-oversight { left: 58%; top: 28%; }
.security-pin-recovery { left: 88%; top: 66%; }
.security-focus { min-width: 0; padding-block: 14px; }
.security-focus-panel { min-width: 0; }
.security-focus-panel[hidden] { display: none !important; }
.security-focus-panel + .security-focus-panel { margin-top: 40px; }
.is-ready .security-focus-panel { margin-top: 0; }
#main #ownership .security-focus-label { margin: 0 0 22px; color: #007d70; font: 500 14px/1.5 var(--mono); letter-spacing: .03em; }
#main #ownership .security-focus-panel h4 {
  margin: 0 0 24px;
  color: #0b2d24;
  font: 600 clamp(28px, 2.5vw, 40px)/1.13 'Geist', Arial, sans-serif;
  letter-spacing: -.045em;
}
#main #ownership .security-focus-copy {
  max-width: 42ch;
  margin: 0 0 32px;
  color: #425b4e;
  font-size: max(18px, var(--reading-size));
  line-height: 1.65;
  text-wrap: pretty;
}
.security-technical { border-top: 1px solid #bdcdc3; }
.security-technical > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding: 16px 0;
  color: #007d70;
  list-style: none;
  cursor: pointer;
  font: 500 18px/1.4 'Geist', Arial, sans-serif;
}
.security-technical > summary::-webkit-details-marker { display: none; }
.security-technical > summary::marker { content: ''; }
.security-technical > summary > span { font-size: 28px; font-weight: 300; line-height: 1; }
.security-technical[open] > summary > span { font-size: 0; }
.security-technical[open] > summary > span::after { content: '−'; font-size: 28px; }
.security-technical dl { display: grid; gap: 26px; margin: 8px 0 0; padding-bottom: 20px; }
.security-technical dt { color: #143c30; font: 600 18px/1.5 'Geist', Arial, sans-serif; }
.security-technical dd { margin: 8px 0 0; color: #425b4e; font: 400 18px/1.65 'Geist', Arial, sans-serif; text-wrap: pretty; }
.security-focus-panel:focus-visible { outline: 2px solid #007f72; outline-offset: 10px; }
@media (min-width: 1101px) {
  .security-focus { min-height: 385px; }
}
@media (max-width: 1200px) {
  .security-heading { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #main #ownership .security-heading > p { max-width: 68ch; }
}
@media (max-width: 1100px) {
  .security-stage { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; }
  .security-foundation.is-ready .security-tabs { gap: 24px; }
  .security-tabs button { min-height: 106px; }
  .security-visual figcaption { display: block; margin-top: 16px; }
  .security-visual figcaption > span { display: block; }
  .security-visual figcaption > span + span { margin-top: 6px; }
}
@media (max-width: 800px) {
  .security-stage { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .security-visual { width: min(100%, 680px); margin-inline: auto; }
  .security-visual figcaption { display: flex; }
  .security-visual figcaption > span + span { margin: 0; }
  .security-focus { padding-block: 0; }
  #main #ownership .security-focus-copy { max-width: 65ch; }
  .security-overline > :last-child { display: none; }
}
@media (max-width: 600px) {
  #main #ownership .security-foundation { margin-top: 64px; padding-top: 26px; scroll-margin-top: 16px; }
  .security-overline { font-size: 14px; }
  .security-heading { padding-block: 32px; gap: 24px; }
  .security-foundation.is-ready .security-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .security-tabs button { min-height: 88px; gap: 10px; padding-bottom: 18px; }
  .security-tabs button > strong { font-size: 21px; }
  .security-tabs button > span { font-size: 13px; }
  .security-stage { padding-top: 28px; gap: 30px; }
  .security-visual figcaption { display: block; margin-top: 8px; font-size: 13px; }
  .security-visual figcaption > span + span { margin-top: 4px; }
  #main #ownership .security-focus-label { margin-bottom: 16px; }
  #main #ownership .security-focus-panel h4 { font-size: 30px; margin-bottom: 20px; }
  #main #ownership .security-focus-copy { margin-bottom: 24px; }
  .security-technical > summary { min-height: 64px; }
}