/* ==========================================================================
   KOBIL — Secure Messenger & Documents — Section: Overview
   Figma: desktop 6015:101559 (1360x346, px-40 py-80, gap 20, items centred)
          mobile  6149:69351 (369x262, px-16 pt-40)
   ========================================================================== */

.sec-smd-overview {
  display: flex;
  align-items: center;
  gap: var(--w20);
  width: 100%;
  padding: var(--w80) var(--w40);
}

.smd-overview__head {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--w32);
  width: var(--w632);
}

/* Figma trims the tag's text box to its cap height, so the label occupies an
   8px box inside the 186-tall title column rather than its 18px line box —
   the negative margin gives those 10px back without touching line-height. */
.smd-overview__tag {
  margin-bottom: calc(-1 * var(--w10));
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 500;
  line-height: var(--w18);
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--navy-70);
}

.smd-overview__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-serif);
  font-size: var(--w56);
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
}

.smd-overview__title-line { display: block; }

.smd-overview__copy {
  flex: none;
  width: var(--w568);
  max-width: 100%;
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-80);
}

@media (max-width: 768px) {
  .sec-smd-overview {
    flex-direction: column;
    align-items: stretch;
    gap: var(--m8);
    padding: var(--m40) var(--m16);
  }

  .smd-overview__head { width: 100%; gap: 0; }
  .smd-overview__tag { display: none; }
  .smd-overview__title { font-size: var(--m34); line-height: 1.2; }

  .smd-overview__copy {
    width: 100%;
    font-size: var(--m16);
    line-height: var(--m23);
  }
}