.downloads-redesign,
.downloads-redesign * {
  box-sizing: border-box;
}

.downloads-redesign {
  --downloads-nav-height: 84px;
  --downloads-content-width: 1320px;
  --downloads-page-gutter: 40px;
  width: 100%;
  margin-top: calc(-1 * var(--downloads-nav-height));
  overflow: hidden;
  color: #181818;
  background: #fff;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

html:has(.downloads-redesign),
body:has(.downloads-redesign) {
  overflow-x: clip;
}

.downloads-redesign h1,
.downloads-redesign h2,
.downloads-redesign p {
  margin: 0;
}

.downloads-redesign a {
  color: inherit;
  text-decoration: none;
}

.downloads-redesign img {
  display: block;
  max-width: 100%;
}

.downloads-hero {
  display: flex;
  width: 100%;
  min-height: 402px;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 160px max(var(--downloads-page-gutter), calc((100% - var(--downloads-content-width)) / 2)) 80px;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(180deg, #f7f6ff 0%, #fff 127.28%);
}

.downloads-hero h1 {
  width: 100%;
  font-size: 42px;
  font-weight: 700;
  line-height: 68px;
}

.downloads-hero p {
  width: 100%;
  color: #666;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
}

.downloads-grid {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 20px;
  padding: 40px max(var(--downloads-page-gutter), calc((100% - var(--downloads-content-width)) / 2));
  background: #fff;
}

.downloads-card {
  display: flex;
  width: 100%;
  height: 210px;
  min-width: 0;
  align-items: center;
  gap: 40px;
  padding: 30px 60px;
  border: 1px solid #e6e6e6;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.downloads-card--tinted {
  background: linear-gradient(180deg, #f7f6ff 0%, #fff 127.28%);
}

.downloads-device-shell {
  display: flex;
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 20px;
  background: #f8f7fe;
}

.downloads-card--record .downloads-device-shell {
  background: linear-gradient(180deg, #f7f6ff 0%, #fff 127.28%);
}

.downloads-device {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.downloads-card__body {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 40px;
}

.downloads-card__copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  overflow-wrap: anywhere;
}

.downloads-card__copy h2 {
  width: 100%;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

.downloads-card__description {
  width: 100%;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
}

.downloads-card__system {
  width: 100%;
  color: #999;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}

.downloads-options {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.downloads-option {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.downloads-store {
  width: 180px;
  height: auto;
  object-fit: contain;
}

.downloads-inline-qr {
  width: 150px;
  height: 150px;
  flex: 0 0 150px;
}

.downloads-card--windows .downloads-options {
  width: 189px;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.downloads-card--android-tv .downloads-options {
  width: 212px;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.downloads-secondary {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #999;
  font-size: 16px;
  line-height: 22px;
  text-decoration: underline;
  white-space: nowrap;
}

.downloads-secondary img {
  width: 20px;
  height: 20px;
}

.downloads-option:hover .downloads-secondary,
.downloads-option:focus-visible .downloads-secondary {
  color: #7a62f0;
}

@media screen and (min-width: 900px) and (max-width: 1319.98px) {
  .downloads-redesign {
    --downloads-nav-height: 74px;
  }

  .downloads-hero {
    min-height: 356px;
    gap: 12px;
    padding: 120px 100px 60px;
  }

  .downloads-hero h1 {
    font-size: 38px;
    line-height: 50px;
  }

  .downloads-hero p {
    font-size: 20px;
    line-height: 32px;
  }

  .downloads-grid {
    padding: 40px 80px;
  }

  .downloads-card {
    height: 210px;
  }

  .downloads-store {
    width: 120px;
  }

  .downloads-inline-qr {
    width: 120px;
    height: 120px;
    flex-basis: 120px;
  }

  .downloads-card--windows .downloads-options {
    width: 189px;
    align-items: flex-end;
  }
}

@media screen and (min-width: 600px) and (max-width: 899.98px) {
  .downloads-redesign {
    --downloads-nav-height: 56px;
  }

  .downloads-hero {
    min-height: 272px;
    gap: 12px;
    padding: 80px 60px 40px;
  }

  .downloads-hero h1 {
    font-size: 32px;
    line-height: 42px;
  }

  .downloads-hero p {
    font-size: 20px;
    line-height: 28px;
  }

  .downloads-grid {
    padding: 20px 40px;
  }

  .downloads-card {
    height: 232px;
    align-items: flex-start;
    gap: 20px;
    padding: 30px 40px;
  }

  .downloads-device-shell {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }

  .downloads-card--record .downloads-device-shell {
    background: transparent;
  }

  .downloads-device {
    width: 34px;
    height: 34px;
  }

  .downloads-card__body {
    align-items: flex-start;
  }

  .downloads-card__system {
    font-size: 14px;
    line-height: 20px;
  }

  .downloads-options {
    flex-direction: column;
    align-items: flex-end;
  }

  .downloads-card--ios .downloads-options,
  .downloads-card--android .downloads-options {
    flex-direction: column-reverse;
  }

  .downloads-store {
    width: 120px;
  }

  .downloads-inline-qr {
    width: 120px;
    height: 120px;
    flex-basis: 120px;
  }

  .downloads-card--windows .downloads-options {
    width: 189px;
    align-items: flex-end;
  }
}

@media screen and (max-width: 599.98px) {
  .downloads-redesign .downloads-inline-qr {
    display: none;
  }
}

@media screen and (max-width: 599.98px) {
  .downloads-redesign {
    --downloads-nav-height: 56px;
  }

  .downloads-hero {
    min-height: 276px;
    gap: 12px;
    padding: 70px 40px 20px;
  }

  .downloads-hero h1 {
    font-size: 28px;
    line-height: 38px;
  }

  .downloads-hero p {
    font-size: 14px;
    line-height: 20px;
  }

  .downloads-grid {
    padding: 20px;
  }

  .downloads-card {
    height: 242px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 30px 20px;
  }

  .downloads-card--ios,
  .downloads-card--android { height: 278px; }
  .downloads-card--windows { height: 312px; }
  .downloads-card--apple-tv { height: 290px; }
  .downloads-card--android-tv { height: 312px; }
  .downloads-card--record { height: 302px; }

  .downloads-device-shell {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }

  .downloads-card--record .downloads-device-shell {
    background: transparent;
  }

  .downloads-device {
    width: 34px;
    height: 34px;
  }

  .downloads-card__body {
    width: 100%;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .downloads-card__description {
    line-height: 28px;
  }

  .downloads-card--record .downloads-card__description {
    line-height: 26px;
  }

  .downloads-card__system {
    font-size: 14px;
    line-height: 20px;
  }

  .downloads-options,
  .downloads-card--windows .downloads-options,
  .downloads-card--android-tv .downloads-options {
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
  }

  .downloads-store {
    width: 96px;
  }

  .downloads-card--windows .downloads-options,
  .downloads-card--android-tv .downloads-options {
    flex-direction: column;
    align-items: flex-start;
  }

  .downloads-secondary {
    width: auto;
  }
}

@media screen and (max-width: 340px) {
  .downloads-options,
  .downloads-card--windows .downloads-options {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .downloads-redesign *,
  .downloads-redesign *::before,
  .downloads-redesign *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}