/* ==========================================================================
   KOBIL — Secure Messenger & Documents — Section: Built for Regulated Environments
   Figma: desktop 6015:101711 (1360x493 — py 80, centred 696 column, badge
   strip 778 wide with 24/60 gaps) · mobile 6150:70820 (369x392 — 337 column,
   badges scaled to 0.70 with a 17px gap).

   Each badge keeps its own Figma height (they are not uniform) with width
   auto, so the artwork never distorts.
   ========================================================================== */

.sec-smd-compliance {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--w60);
  width: 100%;
  padding: var(--w80) var(--w40);
}

.smd-compliance__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--w16);
  width: var(--w696);
  max-width: 100%;
  text-align: center;
}

.smd-compliance__title {
  font-family: var(--font-serif);
  font-size: var(--w56);
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
}

.smd-compliance__lead {
  font-family: var(--font-sans);
  font-size: var(--w20);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--navy-70);
}

.smd-compliance__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--w24) var(--w60);
  width: 100%;
  max-width: var(--w778);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Figma gives each badge row a uniform height (desktop 54, phone 37.9) and
   centres the marks in it, so the two rows keep their spacing even though the
   artwork heights differ. */
.smd-compliance__badges li {
  display: flex;
  align-items: center;
  min-height: var(--w54);
}

.smd-compliance__badge {
  display: block;
  width: auto;
}

.smd-compliance__badge--gdpr,
.smd-compliance__badge--psd2 { height: var(--w44); }
.smd-compliance__badge--privacy { height: var(--w26); }
.smd-compliance__badge--eidas { height: var(--w19); }
.smd-compliance__badge--obe { height: var(--w32); }
.smd-compliance__badge--hipaa { height: var(--w43); }
.smd-compliance__badge--ccpa { height: var(--w44); }
.smd-compliance__badge--swift { height: var(--w35); }
.smd-compliance__badge--bddk { height: var(--w41); }
.smd-compliance__badge--glba { height: var(--w40); }

@media (max-width: 768px) {
  .sec-smd-compliance {
    gap: var(--m48);
    padding: var(--m60) var(--m16);
  }

  .smd-compliance__top { width: 100%; gap: var(--m12); }
  .smd-compliance__title { font-size: var(--m34); line-height: 1.2; }
  .smd-compliance__lead { font-size: var(--m14); line-height: var(--m20); }

  .smd-compliance__badges { gap: var(--m15) var(--m17); max-width: var(--m335); }
  .smd-compliance__badges li { min-height: var(--m38); }

  .smd-compliance__badge--gdpr,
  .smd-compliance__badge--psd2 { height: var(--m31); }
  .smd-compliance__badge--privacy { height: var(--m18); }
  .smd-compliance__badge--eidas { height: var(--m13); }
  .smd-compliance__badge--obe { height: var(--m23); }
  .smd-compliance__badge--hipaa { height: var(--m30); }
  .smd-compliance__badge--ccpa { height: var(--m31); }
  .smd-compliance__badge--swift { height: var(--m25); }
  .smd-compliance__badge--bddk { height: var(--m27); }
  .smd-compliance__badge--glba { height: var(--m28); }
}