/**
 * Local-only download review aligned with the approved experimental Home app bar.
 * Light theme only. The shared footer remains intentionally deferred.
 */

.download-cloud-experiment {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding-top: 30px;
  color: #17151d;
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 205, 231, 0.72), transparent 31%),
    radial-gradient(circle at 84% 8%, rgba(183, 222, 255, 0.76), transparent 34%),
    radial-gradient(circle at 76% 52%, rgba(220, 203, 255, 0.52), transparent 38%),
    linear-gradient(145deg, #e8e8ee 0%, #d8d9e1 54%, #eee9ee 100%);
  background-attachment: fixed;
}

.download-cloud-experiment::before {
  display: none;
}

.download-cloud-experiment .download-page {
  z-index: 1;
  width: min(calc(100% - (2 * var(--cloud-frame-inline))), var(--cloud-frame-width));
  margin: var(--cloud-header-height) auto 30px;
  padding-top: clamp(56px, 4vw, 68px);
  border-radius: var(--cloud-radius);
  background: rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 28px 74px rgba(68, 61, 88, 0.12);
  backdrop-filter: blur(26px) saturate(1.08);
  -webkit-backdrop-filter: blur(26px) saturate(1.08);
}

.download-cloud-experiment .download-hero {
  min-height: auto;
  margin-top: 0;
}

.download-cloud-experiment .download-page::before {
  display: none;
}

.download-cloud-experiment .download-platform {
  border: 2px solid transparent;
  background:
    linear-gradient(
      135deg,
      rgba(38, 34, 50, 0.86) 0%,
      rgba(28, 26, 38, 0.8) 54%,
      rgba(48, 42, 63, 0.82) 100%
    ) padding-box,
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.82) 0%,
      rgba(174, 153, 248, 0.62) 54%,
      rgba(107, 201, 180, 0.54) 100%
    ) border-box;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.2),
    inset -1px -1px 0 rgba(5, 4, 10, 0.18),
    0 10px 24px rgba(45, 38, 68, 0.14);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

.download-cloud-experiment .download-platform:hover,
.download-cloud-experiment .download-platform:focus-visible {
  background:
    linear-gradient(
      135deg,
      rgba(62, 54, 83, 0.9) 0%,
      rgba(40, 36, 57, 0.86) 100%
    ) padding-box,
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(157, 132, 242, 0.82) 54%,
      rgba(99, 208, 181, 0.7) 100%
    ) border-box;
}

.download-cloud-experiment .download-visual {
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 118px 22px 118px 118px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(242, 237, 255, 0.24) 48%,
      rgba(219, 247, 242, 0.32) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 24px 64px rgba(61, 54, 83, 0.14);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
}

.download-cloud-experiment .download-visual::before {
  inset: -20px;
  opacity: 0.68;
  filter: blur(24px);
}

.download-cloud-experiment .download-visual > img {
  border: 0;
  border-radius: 108px 14px 108px 108px;
  box-shadow: 0 18px 48px rgba(40, 31, 75, 0.13);
}

.download-cloud-experiment .download-visual figcaption {
  right: calc(5% + 8px);
  bottom: calc(7% + 8px);
  border-color: rgba(255, 255, 255, 0.7);
  color: #262442;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(247, 243, 255, 0.5) 58%,
      rgba(231, 250, 246, 0.48) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 14px 34px rgba(37, 30, 67, 0.13);
  backdrop-filter: blur(24px) saturate(1.22);
  -webkit-backdrop-filter: blur(24px) saturate(1.22);
}

.download-cloud-experiment .download-visual figcaption .download-caption-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  object-fit: contain;
}

@media (max-width: 560px) {
  .download-cloud-experiment {
    padding-top: 18px;
  }

  .download-cloud-experiment .download-page {
    width: calc(100% - 36px);
    margin: var(--cloud-header-height) auto 18px;
    padding-top: 58px;
  }

  .download-cloud-experiment .download-visual {
    padding: 6px;
    border-radius: 64px 16px 64px 64px;
  }

  .download-cloud-experiment .download-visual > img {
    border-radius: 58px 10px 58px 58px;
  }

  .download-cloud-experiment .download-visual figcaption {
    right: 20px;
    bottom: 20px;
  }
}