:root {
  color-scheme: light;
  background: #faf9f7;
  color: #191918;
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
::selection { background: #e2e1d8; }

main {
  width: min(100% - 3rem, 44rem);
  margin-inline: auto;
  padding-block: clamp(3.5rem, 9vh, 6rem) 5rem;
}

.company {
  margin: 0 0 3.25rem;
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.25;
  letter-spacing: -.02em;
}

h1 {
  max-width: 43rem;
  margin: 0 0 2.25rem;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(2.4rem, 5vw, 3.25rem);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.statement {
  color: #484843;
  font-size: 1.0625rem;
  line-height: 1.85;
  letter-spacing: -.012em;
}

.statement p { margin: 0 0 1.5rem; }
.statement p:last-child { margin-bottom: 0; }

.signup { margin-top: 2.75rem; max-width: 26rem; }
.signup h2 { margin: 0 0 .875rem; font-size: .875rem; font-weight: 500; }
.signup form { display: flex; gap: .5rem; padding: .375rem; border: 1px solid #d8d7d0; border-radius: 9px; background: #ffffff80; }
.signup input, .signup button { font: inherit; font-size: .875rem; }
.signup input { min-width: 0; flex: 1; width: 100%; border: 0; padding: .75rem .5rem; color: inherit; background: transparent; }
.signup button { flex-shrink: 0; border: 0; border-radius: 5px; padding: .75rem 1rem; color: #faf9f7; background: #242421; cursor: pointer; }
.signup button:hover { background: #494941; }
.signup button:disabled { opacity: .6; cursor: wait; }
.signup-note, #signup-status { font-size: .75rem; line-height: 1.6; color: #65655e; margin: .75rem 0 0; }
#signup-status[data-error="true"] { color: #a32c25; }
#signup-status:empty { display: none; }
:focus-visible { outline: 2px solid #626b54; outline-offset: 3px; }
.sr-only, .honeypot { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 480px) {
  main { width: calc(100% - 2.5rem); padding-block: 3rem; }
  .company { margin-bottom: 2.75rem; font-size: 1.375rem; }
  h1 { margin-bottom: 2rem; }
  .statement { font-size: 1rem; line-height: 1.8; }
}