:root {
  color-scheme: light dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f7f2fa;
  color: #1d1b20;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
}

main {
  width: min(42rem, calc(100% - 8rem));
  margin-inline: auto;
  padding-block: clamp(3rem, 12vh, 8rem);
}

h1 { display: grid; grid-template-columns: 0 1fr; align-items: baseline; font-size: clamp(2.5rem, 9vw, 4.5rem); line-height: 1; margin: .25rem 0 1rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .4rem; }
p { font-size: 1rem; line-height: 1.6; margin: .4rem 0; }
.lead { font-size: 1.35rem; }
.intro { max-width: 34rem; margin-top: 1.25rem; }
.brand { grid-area: 1 / 2; color: inherit; text-decoration: none; }
.mark { grid-area: 1 / 1; width: max-content; margin-right: .35em; justify-self: end; }
.screenshots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2em; margin-top: 2.5rem; }
.device { box-sizing: border-box; min-width: 0; padding: .45rem; border: 3px solid #49454f; border-radius: 1.8rem; background: #1d1b20; }
.screenshot { box-sizing: border-box; display: block; width: 100%; height: auto; border: 1px solid #000; border-radius: 1.35rem; }
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-top: 1rem; }
.stores a, .stores img { display: block; }
.stores a:first-child { padding: .625rem; margin: -.625rem; }
.stores a:first-child img { width: 7.5rem; height: 2.5rem; }
.stores a:last-child img { width: 9.7rem; height: auto; }

.button {
  display: inline-block;
  margin-top: 1.5rem;
  padding: .8rem 1.25rem;
  background: #d500f9;
  color: #210029;
  text-decoration: none;
  font-weight: 700;
}

footer {
  width: min(42rem, calc(100% - 2rem));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-block: 1.5rem;
  border-top: 1px solid #cac4d0;
}

.maker { margin-left: auto; }
a { color: #6750a4; }

@media (prefers-color-scheme: dark) {
  :root { background: #1c1b1f; color: #e6e1e5; }
  footer { border-color: #49454f; }
  a { color: #d0bcff; }
  .button { background: #ea80fc; color: #28002f; }
}

@media (max-width: 36rem) {
  .screenshots { grid-template-columns: 1fr; }
}