* { box-sizing: border-box; }
html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #29211c;
  background: #fffcf6;
}
body { margin: 0; }
header, main { max-width: 1060px; margin: auto; }
header { padding: 30px 32px 12px; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
  font-size: 28px;
  font-weight: 750;
}
.brand img { display: block; border-radius: 17px; }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  padding: 28px 32px 48px;
}
h1 { margin: 0 0 28px; font-size: clamp(40px, 4.8vw, 60px); line-height: 1.35; letter-spacing: -.03em; }
h1 span { color: #cf5b40; }
p { font-size: 18px; line-height: 1.9; }
.pain { margin: 0 0 12px; color: #75665a; }
.solution { margin: 0 0 32px; }
.download {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
  max-width: 100%;
  padding: 17px 25px;
  border-radius: 14px;
  background: #f5795c;
  color: #fff;
  font-size: 18px;
  font-weight: 650;
  text-decoration: none;
}
.download:hover { background: #ec6d50; }
a:focus-visible { outline: 3px solid #29211c; outline-offset: 5px; }
.screenshot {
  /* Hide the top 120px status bar of the original 1080 × 2376 screenshot. */
  aspect-ratio: 1080 / 2256;
  overflow: hidden;
  display: block;
  width: min(100%, 290px);
  height: auto;
  justify-self: center;
  border-radius: 24px;
  box-shadow: 0 12px 35px #29211c18;
}
.screenshot img {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(-5.0505050505%);
}
@media (max-width: 720px) {
  header { padding: 24px 24px 0; text-align: center; }
  .brand { font-size: 25px; gap: 12px; }
  .brand img { width: 52px; height: 52px; border-radius: 15px; }
  .hero { text-align: center; grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 38px 24px 36px; }
  h1 { font-size: clamp(36px, 9vw, 48px); margin-bottom: 22px; }
  p { font-size: 17px; }
  .wide-only { display: none; }
  .solution { margin-bottom: 26px; }
  .screenshot { width: min(100%, 300px); }
}