.section-grid--install {
  align-items: stretch;
}

.install-intro {
  align-content: start;
}

.store-grid {
  display: grid;
  gap: 0.85rem;
}

.store-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1rem;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #f7efe2, #f1e8db);
  box-shadow:
    inset 0 1px 0 var(--surface-highlight),
    0 20px 30px -28px rgba(18, 28, 24, 0.2);
}

.store-card[data-store="app-store"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 32%),
    linear-gradient(180deg, #f3e1b1, #ead39a);
}

.store-card[data-store="google-play"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 32%),
    linear-gradient(180deg, #d8e7db, #c8ddcd);
}

.store-card-copy {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  min-inline-size: 0;
  flex: 1 1 auto;
}

.store-label {
  color: var(--ink-muted);
  font-size: 0.74rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.store-card strong {
  font-size: 1.08rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.store-status {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.45;
}

.store-meta {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.store-link {
  justify-self: start;
  min-block-size: 2.7rem;
  margin-block-start: 0.1rem;
  padding-inline: 0.95rem;
}

.store-qr-wrap,
.store-qr-placeholder {
  display: grid;
  place-items: center;
  gap: 0.28rem;
  inline-size: 4.9rem;
  flex: 0 0 auto;
  aspect-ratio: 1;
  padding: 0.72rem 0.6rem;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 251, 245, 0.99)),
    repeating-linear-gradient(
      90deg,
      rgba(22, 36, 31, 0.03) 0 1px,
      transparent 1px 10px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(22, 36, 31, 0.03) 0 1px,
      transparent 1px 10px
    );
  box-shadow:
    inset 0 0 0 1px rgba(157, 145, 131, 0.22),
    inset 0 1px 0 var(--surface-highlight);
}

.store-qr-wrap {
  aspect-ratio: auto;
  align-content: center;
  padding: 0.55rem;
}

.store-qr {
  inline-size: 100%;
  block-size: auto;
  max-inline-size: 4.2rem;
}

.store-qr-caption,
.store-qr-placeholder-kicker {
  color: var(--ink-muted);
  font-size: 0.68rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}

.store-qr-caption {
  letter-spacing: 0.08em;
}

.store-qr-placeholder-title {
  max-inline-size: 4.8rem;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-align: center;
}

@supports (text-box: trim-both cap alphabetic) {
  .store-qr-caption,
  .store-qr-placeholder-kicker,
  .store-qr-placeholder-title {
    text-box: trim-both cap alphabetic;
  }
}

@supports (container-type: inline-size) {
  .store-card {
    container-type: inline-size;
  }

  @container (min-width: 30rem) {
    .store-qr-wrap,
    .store-qr-placeholder {
      inline-size: 5.75rem;
    }
  }
}

@supports (container-type: inline-size) {
  @container section-grid (min-width: 46rem) {
    .section-grid--install {
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }

    .store-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}