/* The free tabs page: built on style.css and creators.css. The piece is the
   hero, its downloads sit right under the title. */

.kicker {
  margin-bottom: 6px;
  color: var(--quiet);
  font-size: 15px;
  font-style: italic;
}

.files {
  display: flex;
  flex-wrap: wrap;
  gap: 0 26px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.files .reach { margin-top: 0; }

.terms {
  margin-top: 10px;
  max-width: 30em;
  color: var(--quiet);
  font-size: 15px;
}

.trade .reach { margin-top: 6px; }

/* Mailing list: a hairline field and a word for a button */
.signup {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px 20px;
  margin-top: 20px;
}
.signup label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.signup input {
  flex: 1 1 220px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(242, 236, 226, .32);
  border-radius: 0;
  background: none;
  color: var(--ink);
  font: inherit;
}
.signup input::placeholder { color: var(--quiet); opacity: .6; }
.signup input:focus { outline: none; border-bottom-color: var(--ink); }
.signup button {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(242, 236, 226, .32);
  text-decoration-thickness: 1px;
  text-underline-offset: .32em;
  cursor: pointer;
}
.signup button:hover { text-decoration-color: var(--ink); }

.credit { margin-top: 14px; color: var(--quiet); font-size: 13px; opacity: .7; }

.tabs .about { margin-top: 120px; }
.tabs .contact { padding-top: 96px; }

@media (min-width: 1000px) {
  .hero h1 { font-size: clamp(40px, 3.6vw, 60px); }
  .tabs .about { margin-top: 160px; }
}