/* DealArena marketing — Security page specifics.
   Rides on marketing-shell.css tokens + the shared legal.css shell.
   Only the Security-only bits live here: the hero posture plate, the
   dimensional shield+padlock character, the per-section colour key, the
   subprocessor table, the "not yet" card, the disclosure plate and the
   encrypted-line easter egg. Namespaced under .p-security so nothing leaks
   into /privacy or /terms, which share legal.css with this page. */

/* Section key colours, from the 2026-08-20 handoff token block. Marketing has
   no --purple, and its --green token is the brand orange, so the security
   traffic-light colours are declared here with a dark-theme twin. */
.p-security {
  --sec-green: #0a8754;
  --sec-amber: #c79100;
  --sec-purple: #8b5cf6;
  --sec-brand: #ef5920;
}
body[data-theme="dark"] .p-security {
  --sec-green: #27d97c;
  --sec-amber: #ffd23f;
  --sec-purple: #a78bfa;
}

/* The LED in the posture plate header. Marketing pages do not load
   arena/chrome.css, which is where this keyframe lives for the app. */
@keyframes da-ledblink { 0%, 72%, 100% { opacity: 1; } 82% { opacity: .25; } }

/* ---- hero eyebrow ---- */
.p-security .sec-eyebrow {
  position: relative; z-index: 1;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--green); margin-top: 18px;
}

/* ---- hero posture readout ----
   Always dark, in both themes: it is a console plate, not a card. */
.p-security .posture {
  position: relative; z-index: 1; margin-top: 26px;
  border-radius: 16px; overflow: hidden;
  border: 1px solid #2e2a25; background: #16120f;
}
.p-security .posture-head {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; border-bottom: 1px solid #2e2a25;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: #8e8779;
}
.p-security .posture-led {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: #27d97c; animation: da-ledblink 2.2s infinite;
}
/* The -1px margins tuck the last row's / last column's cell borders under the
   plate's own border instead of doubling the line, whatever the column count. */
.p-security .posture-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 0 -1px -1px 0;
}
.p-security .posture-cell {
  padding: 14px;
  border-right: 1px solid #2e2a25; border-bottom: 1px solid #2e2a25;
}
.p-security .posture-cell .v { font-family: var(--mono); font-size: 14px; }
.p-security .posture-cell .v-green { color: #27d97c; }
.p-security .posture-cell .v-ink { color: #f1ede6; }
.p-security .posture-cell .v-brand { color: #ef5920; }
.p-security .posture-cell .k {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: #8e8779; margin-top: 6px;
}
@media (max-width: 680px) {
  .p-security .posture-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- hero symbol — dimensional shield + padlock ---- */
.p-security .da-mark {
  position: absolute; top: 10px; right: -18px; width: 280px; height: 266px;
  pointer-events: none; z-index: 0; overflow: visible;
}
.p-security #se-tilt { transform-box: view-box; transform-origin: 100px 96px; transition: transform .22s ease-out; }
.p-security #se-lock { transform-box: view-box; transform-origin: 100px 102px; transition: transform .22s cubic-bezier(.2,.9,.3,1.6); }
.p-security #se-ring { transform-box: view-box; transform-origin: 100px 96px; transition: opacity .25s ease, transform .42s ease-out; }
.p-security #se-shine { transform-box: view-box; animation: se-shine 4.6s ease-in-out infinite; }
@keyframes se-shine {
  0%, 16% { transform: translateX(-130px); opacity: 0; }
  24% { opacity: .85; }
  42%, 100% { transform: translateX(130px); opacity: 0; }
}
@media (max-width: 900px) { .p-security .da-mark { width: 184px; height: 174px; top: 2px; } }
@media (max-width: 720px) { .p-security .da-mark { display: none; } }

/* ---- per-section colour key + chevron bullets ---- */
.p-security .sec-green  { --sec-key: var(--sec-green); }
.p-security .sec-brand  { --sec-key: var(--sec-brand); }
.p-security .sec-purple { --sec-key: var(--sec-purple); }
.p-security .sec-amber  { --sec-key: var(--sec-amber); }
.p-security .sec-key {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  background: var(--sec-key, var(--green)); margin-right: 11px;
  vertical-align: middle; position: relative; top: -2px;
}
.p-security .sec-list { list-style: none; padding-left: 0; }
.p-security .sec-list li { position: relative; padding-left: 20px; }
.p-security .sec-list li::before {
  content: '\203A'; position: absolute; left: 4px; top: -1px;
  color: var(--sec-key, var(--green)); font-weight: 700;
}

/* ---- subprocessor table ---- */
.p-security .sub-table-wrap {
  overflow-x: auto; margin: 0 0 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-1);
}
.p-security .sub-table {
  width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 520px;
}
.p-security .sub-table th {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3); font-weight: 600;
}
.p-security .sub-table td {
  padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--ink-2);
  vertical-align: top;
}
.p-security .sub-table tr:last-child td { border-bottom: 0; }
.p-security .sub-table td.cat { color: var(--ink); font-weight: 600; }

/* ---- "not yet, and we will say so" card ---- */
.p-security .notyet-card {
  border: 1px solid var(--line-2); border-radius: 14px;
  background: var(--bg-2); padding: 16px 15px;
}
/* No .notyet-lbl rule: the design's mono eyebrow is dropped in the template
   because the legal shell's h2 already carries that exact sentence. */
.p-security .notyet-list {
  list-style: none; padding-left: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.p-security .notyet-list li {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
}
.p-security .notyet-list .d {
  font-family: var(--mono); font-size: 11px; color: var(--sec-amber);
  flex: none; margin-top: 2px;
}

/* ---- info card (dead-man's switch box) ---- */
.p-security .info-card {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px;
  padding: 22px 24px;
}
.p-security .info-card p { margin: 0 0 12px; }
.p-security .info-card ul { margin: 0; }

/* ---- "found something?" disclosure plate ---- */
.p-security .found-card {
  border-radius: 16px; border: 1px solid #2a2420;
  background: linear-gradient(160deg, #16120f, #0b0908);
  padding: 22px 18px; margin: 0 0 18px;
}
.p-security .found-lbl {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: #ef5920;
}
.p-security .found-card h3 {
  font-family: var(--display); font-size: 22px; font-weight: 700;
  letter-spacing: -.025em; color: #f3e9da; margin: 12px 0 0;
}
.p-security .found-card p {
  font-size: 14.5px; line-height: 1.65; color: #a39d92; margin: 12px 0 0;
}
/* Never white on orange: --on-brand is #201009. */
.p-security .found-cta {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; margin-top: 16px; border-radius: 11px;
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  background: #ef5920; color: #201009; text-decoration: none;
  box-shadow: 0 4px 0 #a83a12;
  transition: transform .1s ease, box-shadow .1s ease;
}
.p-security .found-cta:hover { color: #201009; text-decoration: none; }
.p-security .found-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 #a83a12; }
.p-security .safe-harbour { margin: 0; }

/* ---- encrypted-line easter egg ---- */
.p-security .cipher-card {
  margin-top: 46px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-1); padding: 17px 20px;
}
.p-security .cipher-head {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-3);
}
.p-security .cipher-blob {
  display: block; margin-top: 11px; font-family: var(--mono); font-size: 14px;
  letter-spacing: .06em; color: var(--green); cursor: pointer;
  word-break: break-all; line-height: 1.55;
  -webkit-user-select: none; user-select: none; transition: color .3s;
}
.p-security .cipher-blob.done { color: var(--ink); cursor: default; letter-spacing: .02em; }
.p-security .sec-lock .shackle {
  transform-box: view-box; transform-origin: 15px 9px;
  transition: transform .45s cubic-bezier(.2,.8,.3,1.5);
}
.p-security .sec-lock.unlocked .shackle { transform: rotate(42deg) translateY(-1px); }
.p-security .lg-stamp { margin-top: 30px; }