/* Only the Hero and final CTA download groups use these rules. */
.app-downloads {
  container-type: inline-size;
  width: 100%;
}
.app-download-groups {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.app-downloads--hero .app-download-groups {
  flex-direction: column;
  gap: 8px;
}
.app-downloads--final { margin-top: 25px; }
.app-download-card { display: flex; align-items: center; }
.app-download-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 176px;
  height: 52px;
}
.app-download-qr,
.app-download-hint { display: none; }

@media (width <= 560px) {
  .app-downloads--hero .app-download-groups { gap: 10px; }
  .app-downloads--final { margin-top: 22px; }
  .app-downloads--final .app-download-groups { flex-direction: column; }
}

/* Two complete cards require 560px inside this particular download area. */
@media (width > 560px) {
  @container (min-width: 560px) {
    .app-downloads .app-download-groups { flex-direction: row; gap: 12px; }
    .app-download-card {
      flex: 0 0 274px;
      gap: 8px;
      padding: 3px 8px;
      border: 1px solid #dce4de;
      border-radius: 11px;
      background: #fff;
    }
    .app-download-qr {
      display: flex;
      flex: 0 0 72px;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      color: #536159;
      border-radius: 2px;
      text-decoration: none;
    }
    .app-download-qr img { display: block; width: 72px; height: 72px; }
    .app-download-qr span { font-size: 10px; line-height: 12px; }
    .app-download-qr:focus-visible { outline: 2px solid #194f3b; outline-offset: 2px; }
    .app-download-hint {
      display: block;
      margin: 6px 0 0;
      color: #65706a;
      font-size: 11px;
      line-height: 12px;
      text-align: center;
    }
    .app-downloads--final .app-download-hint { color: #bdcdc4; }
  }
}
@media (width > 900px) {
  @container (min-width: 560px) {
    .app-downloads--hero .app-download-groups { justify-content: flex-start; }
    .app-downloads--hero .app-download-hint { width: 560px; }
  }
}