/* Brand-tinted surfaces shared by every application detail page. */
.app-detail-page .hero.hero-second-screen {
  border-top: 2px solid var(--app-accent);
  background:
    radial-gradient(880px 430px at 14% 68%, rgba(var(--app-accent-rgb), .2), transparent 72%),
    radial-gradient(720px 360px at 86% 12%, rgba(var(--app-accent-rgb), .14), transparent 74%),
    linear-gradient(
      112deg,
      color-mix(in srgb, var(--app-accent) 17%, #fff) 0%,
      color-mix(in srgb, var(--app-accent) 8%, #fff) 56%,
      color-mix(in srgb, var(--app-accent) 12%, #fff) 100%
    ) !important;
}

.app-detail-page .hero.hero-second-screen::before {
  background:
    radial-gradient(62% 88% at 68% 50%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .76) 30%, rgba(255, 255, 255, .38) 58%, transparent 86%),
    radial-gradient(48% 72% at 28% 68%, rgba(var(--app-accent-rgb), .18) 0%, rgba(var(--app-accent-rgb), .08) 50%, transparent 82%),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--app-accent) 17%, #fff) 0%,
      color-mix(in srgb, var(--app-accent) 11%, #fff) 28%,
      color-mix(in srgb, var(--app-accent) 6%, #fff) 58%,
      color-mix(in srgb, var(--app-accent) 13%, #fff) 100%
    ) !important;
}

.app-detail-page .hero.hero-second-screen::after {
  background: rgba(var(--app-accent-rgb), .18);
}

.app-detail-page .trust-strip {
  color: #fff;
  border-top-color: rgba(255, 255, 255, .24);
  border-bottom-color: color-mix(in srgb, var(--app-accent) 78%, #17202a);
  background:
    radial-gradient(560px 150px at 16% 0%, rgba(255, 255, 255, .18), transparent 72%),
    radial-gradient(620px 170px at 88% 100%, rgba(255, 255, 255, .1), transparent 74%),
    linear-gradient(
      108deg,
      color-mix(in srgb, var(--app-accent) 84%, #17202a) 0%,
      var(--app-accent) 52%,
      color-mix(in srgb, var(--app-accent) 88%, #fff) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -1px 0 rgba(0, 0, 0, .12),
    0 12px 26px rgba(var(--app-accent-rgb), .14);
}

.app-detail-page .trust-strip .trust-icon {
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
  background: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 7px 16px rgba(0, 0, 0, .12);
}

.app-detail-page .trust-strip .trust-copy strong {
  color: #fff;
}

.app-detail-page .trust-strip .trust-copy small {
  color: #fff;
}

.app-detail-page section#versions.section-gray {
  border-top-color: rgba(var(--app-accent-rgb), .12);
  border-bottom-color: rgba(var(--app-accent-rgb), .1);
  background:
    radial-gradient(780px 330px at 90% 2%, rgba(var(--app-accent-rgb), .12), transparent 72%),
    radial-gradient(680px 300px at 5% 96%, rgba(var(--app-accent-rgb), .07), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--app-accent) 9%, #fff) 0%,
      color-mix(in srgb, var(--app-accent) 4%, #fff) 100%
    );
}