:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #30223f;
  background: #f8f5fc;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 280px;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(36px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right))
    max(36px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  background: radial-gradient(ellipse at 18% 12%, #eee5fa 0, transparent 48%),
    radial-gradient(ellipse at 90% 90%, #eaf5eb 0, transparent 48%), #f8f5fc;
}

.page { width: min(100%, 740px); text-align: center; }
.brand-mark { display: inline-flex; margin-bottom: 24px; }
.brand-mark img { display: block; border-radius: 25px; box-shadow: 0 12px 40px #4c306010; }
h1 { margin: 0; font-size: clamp(36px, 7vw, 54px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 750; }
.idea { margin: 22px 0 12px; color: #704ab5; font-size: clamp(20px, 4vw, 25px); line-height: 1.4; font-weight: 600; }
.description { max-width: 460px; margin: 0 auto; color: #726a7e; font-size: 17px; line-height: 1.65; }
.downloads { margin-top: 48px; }
h2 { margin: 0 0 16px; color: #726a7e; font-size: 14px; line-height: 1.5; font-weight: 500; }
.stores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.store {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 172px;
  padding: 22px 12px;
  border: 1px solid #ddd4e8;
  border-radius: 20px;
  color: #30223f;
  background: #ffffffb3;
  text-decoration: none;
}
.store-icon { display: block; flex-shrink: 0; }
.store-copy { display: flex; flex-direction: column; }
.store.featured { border-color: #b3a0d9; background: #ffffffdb; box-shadow: 0 8px 28px #7150c212; }
.store.featured .availability { color: #704ab5; font-weight: 600; }
.store.upcoming { border-color: #e5dfec; background: #ffffff55; }
.store.upcoming .store-icon { opacity: 0.4; filter: saturate(0.35); }
.store.upcoming .store-name { color: #9a92a4; }
.store.upcoming .platform { color: #9a92a4; }
.platform, .availability { color: #726a7e; font-size: 12px; line-height: 1.4; }
.store-name { margin: 5px 0; font-size: 22px; line-height: 1.25; font-weight: 650; }
a.store { border-color: #7550be; color: #fff; background: #7550be; transition: background-color 150ms, transform 150ms; }
a.store .platform, a.store .availability { color: #fff; }
a.store:hover { background: #6340a6; transform: translateY(-2px); }
a.store:focus-visible { outline: 3px solid #30223f; outline-offset: 4px; }

.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 22px; margin-top: 36px; font-size: 13px; line-height: 1.6; }
.legal-links a, .document a { color: #65439d; text-underline-offset: 3px; }
.legal-links a:focus-visible, .document a:focus-visible { outline: 2px solid #65439d; outline-offset: 4px; }
.document-page { display: block; }
.document { width: min(100%, 820px); margin: 0 auto; font-size: 17px; line-height: 1.75; overflow-wrap: anywhere; }
.document h1 { margin-top: 30px; font-size: clamp(30px, 6vw, 44px); line-height: 1.18; }
.document h2 { margin: 34px 0 12px; font-size: 22px; color: #30223f; line-height: 1.35; font-weight: 650; }
.document p { margin: 14px 0; }
.document ul { margin: 14px 0; padding-left: 24px; }
.document li + li { margin-top: 12px; }
.document-meta { color: #726a7e; font-size: 14px; }
.document-nav { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 14px; }
.document .legal-links { justify-content: flex-start; border-top: 1px solid #ddd4e8; padding-top: 22px; }

@media (max-width: 560px) {
  .page { max-width: 380px; }
  .brand-mark { margin-bottom: 20px; }
  .brand-mark img { width: 88px; height: 88px; border-radius: 22px; }
  .description { font-size: 16px; }
  .downloads { margin-top: 32px; }
  .stores { grid-template-columns: 1fr; gap: 10px; }
  .store { flex-direction: row; justify-content: flex-start; gap: 18px; min-height: 102px; padding: 16px 24px; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  a.store { transition: none; }
  a.store:hover { transform: none; }
}