:root {
  color-scheme: light;
  --ink: #17382d;
  --muted: #5d6f67;
  --green: #23865f;
  --green-dark: #176448;
  --paper: #f4f7f2;
  --line: #dce6df;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.site-header,
.hero,
.intro,
footer {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

.site-header {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 750;
  text-decoration: none;
}

.brand img { border-radius: 12px; }

.hero {
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .7fr);
  gap: clamp(44px, 8vw, 110px);
  align-items: center;
  padding: 56px 0 72px;
  overflow: hidden;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--green);
  font-size: 14px;
  font-weight: 720;
  letter-spacing: .08em;
}

h1 {
  margin: 0;
  max-width: 680px;
  font-size: clamp(44px, 6.3vw, 76px);
  line-height: 1.06;
  letter-spacing: -.045em;
}

.lead {
  max-width: 620px;
  margin: 28px 0 32px;
  color: var(--muted);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.8;
}

.download {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-radius: 999px;
  color: #fff;
  background: var(--green-dark);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 30px rgb(23 100 72 / 18%);
}

.download:hover { background: #104e38; }
.download.compact { min-height: 42px; padding-inline: 18px; font-size: 14px; }

.availability {
  margin: 16px 0 0;
  color: #718078;
  font-size: 13px;
}

.product-shot {
  width: min(100%, 360px);
  justify-self: center;
  padding: 10px 10px 0;
  border: 1px solid rgb(255 255 255 / 80%);
  border-radius: 48px 48px 0 0;
  background: linear-gradient(145deg, #fff, #e7eee8);
  box-shadow: 0 30px 80px rgb(27 73 56 / 18%);
  overflow: hidden;
}

.product-shot img { display: block; width: 100%; height: auto; border-radius: 38px 38px 0 0; }

.intro {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 70px;
  padding: 74px;
  border-radius: 34px;
  background: #e4eee7;
}

.intro h2 { margin: 0; font-size: clamp(30px, 4vw, 46px); line-height: 1.2; letter-spacing: -.035em; }
.intro > p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.9; }

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  padding: 38px 0 46px;
  color: var(--muted);
  font-size: 13px;
}

footer a { color: var(--green-dark); }
.filing-placeholder { margin-left: auto; }

@media (max-width: 760px) {
  .site-header, .hero, .intro, footer { width: min(100% - 28px, 620px); }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 46px; padding: 42px 0 54px; }
  h1 { font-size: clamp(41px, 13vw, 58px); }
  .product-shot { width: min(82vw, 340px); }
  .intro { grid-template-columns: 1fr; gap: 24px; padding: 38px 28px; border-radius: 26px; }
  .filing-placeholder { width: 100%; margin-left: 0; }
}

@media (max-width: 420px) {
  .site-header { min-height: 72px; }
  .download.compact { display: none; }
  .hero { padding-top: 34px; }
}