/* ==========================================================================
   KOBIL — Secure Messenger & Documents — Section: Reference logos
   Figma: mobile 6149:69355 only (369x334.6 — pt/pb 40, heading 24/32 bold
   centred, then three rows of two logos inside a 293.5 column, 40 apart).
   The desktop frame does not carry this block, so it stays hidden ≥769px.
   ========================================================================== */

.sec-smd-logos { display: none; }

@media (max-width: 768px) {
  .sec-smd-logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--m40);
    width: 100%;
    padding: var(--m40) var(--m16);
  }

  .smd-logos__heading {
    width: var(--m337);
    max-width: 100%;
    font-family: var(--font-sans);
    font-size: var(--m24);
    font-weight: 700;
    line-height: var(--m32);
    color: var(--navy);
    text-align: center;
  }

  .smd-logos__rows {
    display: flex;
    flex-direction: column;
    gap: var(--m40);
    width: var(--m293);
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .smd-logos__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--m20);
  }

  .smd-logos__logo {
    display: block;
    width: auto;
    /* Each mark keeps its own Figma height — they are not uniform. */
    height: var(--m18);
  }

  .smd-logos__logo--migros { height: var(--m16); }
  .smd-logos__logo--ing { height: var(--m20); }
  .smd-logos__logo--bmw { height: var(--m19); }
  .smd-logos__logo--raiffeisen { height: var(--m32); }
}