.app-download {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid color-mix(in oklch, var(--bg), transparent 72%);
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, color-mix(in oklch, var(--bg), transparent 94%) 7px 8px),
    var(--ticket);
  color: var(--bg);
}

.app-download::before {
  content: "APP";
  position: absolute;
  z-index: -1;
  right: -0.03em;
  bottom: -0.28em;
  color: color-mix(in oklch, var(--bg), transparent 91%);
  font-family: var(--display);
  font-size: clamp(120px, 18vw, 240px);
  font-weight: 750;
  letter-spacing: -0.08em;
  line-height: 1;
  pointer-events: none;
}

.app-download__inner {
  width: var(--page);
  min-height: 190px;
  margin: 0 auto;
  padding: clamp(30px, 3.4vw, 44px) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  align-items: center;
  gap: clamp(28px, 4vw, 52px);
}

.app-download__kicker,
.app-download__label {
  margin: 0;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}

.app-download__kicker {
  margin-bottom: 12px;
  color: color-mix(in oklch, var(--bg), transparent 24%);
}

.app-download__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 2.7vw, 36px);
  font-weight: 750;
  letter-spacing: -0.055em;
  line-height: 1.02;
}

.app-download__description {
  max-width: 34em;
  margin: 16px 0 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.9;
}

.app-download__actions {
  position: relative;
  padding: 11px 13px;
  border: 1px solid color-mix(in oklch, var(--bg), transparent 48%);
  background: color-mix(in oklch, var(--ticket), white 9%);
  box-shadow: 6px 7px 0 color-mix(in oklch, var(--bg), transparent 76%);
}

.app-download__label {
  margin-bottom: 8px;
}

.app-download__badges {
  --app-badge-height: clamp(27px, 2.3vw, 32px);
  --google-badge-height: clamp(33px, 2.82vw, 39px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
}

.app-download__badge {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 170ms ease, opacity 170ms ease;
}

.app-download__badge:hover {
  opacity: 0.86;
  transform: translateY(-2px);
}

.app-download__badge:active {
  transform: translateY(1px);
}

.app-download__badge img {
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.app-download__badge--apple img {
  height: var(--app-badge-height);
}

.app-download__badge--google img {
  height: var(--google-badge-height);
}

@media (max-width: 700px) {
  .app-download__inner {
    min-height: 0;
    padding: 36px 0 40px;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .app-download__title {
    font-size: clamp(30px, 8.5vw, 34px);
    line-height: 1.04;
  }

  .app-download__description {
    margin-top: 16px;
    font-size: 12px;
  }

  .app-download__actions {
    padding: 11px 10px;
    box-shadow: 5px 6px 0 color-mix(in oklch, var(--bg), transparent 76%);
  }

  .app-download__badges {
    --app-badge-height: clamp(31px, 9.4vw, 36px);
    --google-badge-height: clamp(38px, 11.6vw, 44px);
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-download__badge {
    transition: none;
  }
}