/* ado-security.css — ADO 891 page-scoped styles (Security & Privacy).
   Loaded LAST (after donna365.css) so these win. Scoped under .page-security
   so no other page is affected. Owner: ADO 891 subagent. Do NOT touch other
   ado-*.css / donna365.css / styles*.css.

   Goal (Akbar reopen): the below-hero content must read as a designed,
   card-based page that matches the Features / Investors visual language —
   icon cards + dark spec-table bands — not a text dump. This file refines
   the card grids the layout already emits: equal heights, branded icon
   chips, a quiet hover lift, and a tighter dark spec table. */

/* ── Card grids: equal height + designed feel ─────────────────────────── */
.page-security .row.g-24 {
  align-items: stretch;
}

.page-security .features-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 34px 32px;
  border-radius: 22px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.page-security .features-item .text-secondary {
  margin-bottom: 0;
}

/* Branded icon chip (brand blue, rounded square) so cards read as designed
   and on-brand rather than generic dark squares. */
.page-security .features-item .icon {
  width: 56px;
  height: 56px;
  margin-bottom: 24px;
  border-radius: 16px;
  font-size: 26px;
  color: #ffffff;
  background: linear-gradient(155deg, var(--donna-brand, #5B5BFF) 0%, #3A3AD6 100%);
  box-shadow:
    0 8px 18px rgba(91, 91, 255, .28),
    0 1px 0 0 rgba(255, 255, 255, .35) inset,
    0 -3px 0 0 rgba(0, 0, 0, .18) inset;
}

.page-security .features-item .title {
  font-size: 20px;
  line-height: 27px;
  margin-bottom: 10px;
  color: #18181b;
}

/* Quiet hover lift — gives the grid life without being noisy. */
.page-security .features-item:hover {
  transform: translateY(-4px);
  box-shadow:
    0 18px 40px rgba(24, 24, 27, .12),
    0 3px 3px rgba(24, 24, 27, .08);
}

/* ── Dark spec-table bands (architecture + product security) ──────────── */
.page-security .spec-table {
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.page-security .spec-table-dark {
  background: rgba(255, 255, 255, .035);
}

.page-security .spec-table-dark .spec-row {
  padding: 20px 30px;
  transition: background .2s ease;
}

/* Brand-blue label accent makes the key column scannable on the dark band. */
.page-security .spec-table-dark .spec-key {
  position: relative;
  padding-left: 18px;
  color: #ffffff;
}

.page-security .spec-table-dark .spec-key::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--donna-brand, #5B5BFF);
  box-shadow: 0 0 0 3px rgba(91, 91, 255, .18);
}

.page-security .spec-table-dark .spec-val {
  color: #b8b8c8;
}

.page-security .spec-table-dark .spec-row:hover {
  background: rgba(91, 91, 255, .06);
}

/* Dark-band eyebrow chip: tint to brand so it doesn't read as a stray pill. */
.page-security .heading-sub.style-1 {
  color: #c7c7ff;
}

/* ── Compliance chips: branded check + gentle hover ───────────────────── */
.page-security .compliance-chips li {
  padding: 13px 22px;
  border-color: rgba(91, 91, 255, .18);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.page-security .compliance-chips li .icon {
  color: var(--donna-brand, #5B5BFF);
}

.page-security .compliance-chips li:hover {
  transform: translateY(-2px);
  border-color: rgba(91, 91, 255, .45);
  box-shadow: 0 8px 20px rgba(91, 91, 255, .12);
}

/* ── Closing statement card: lift the brand tint to match the new accent ─ */
.page-security .benefits-card {
  border-radius: 18px;
}

/* ── Responsive: slightly tighter card padding on small screens ───────── */
@media (max-width: 991px) {
  .page-security .features-item {
    padding: 26px 24px !important;
  }
}