:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  color: #fff;
  background: #309fa5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 280px;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: linear-gradient(115deg, #59bd79 0%, #0c92ca 100%);
}

.brand {
  align-self: center;
  width: 100%;
  padding: 80px 24px 40px;
  text-align: center;
}

.brand__logo {
  display: block;
  width: clamp(252px, 46vw, 620px);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

h1 {
  margin: clamp(28px, 3.5vw, 42px) 0 0;
  font-size: clamp(16px, 1.65vw, 22px);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .16em;
  text-wrap: balance;
}

.filing {
  padding: 16px 20px max(26px, env(safe-area-inset-bottom));
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}

.filing a {
  display: inline-block;
  padding: 8px 4px;
  color: #103c43;
  text-decoration: none;
  text-underline-offset: 4px;
}

.filing a:hover { text-decoration: underline; }
.filing a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

@media (max-width: 420px) {
  .brand { padding-inline: 20px; }
  h1 { letter-spacing: .08em; }
}

@media (max-height: 420px) and (min-width: 600px) {
  .brand { padding-top: 36px; padding-bottom: 12px; }
  .brand__logo { width: 340px; }
  h1 { margin-top: 20px; font-size: 16px; }
  .filing { padding-bottom: 12px; }
}