/* Request access page. Loads after site.css.
   Phone first: the base rules are for phones, the 735px block keeps desktop as it was.
   Form fields, buttons, the consent row and the thank-you card are styled in site.css. */

/* Hero + form: shorter gaps on phones so the first fields show in the first screen */
.form-hero {
  padding-bottom: 56px;
}
.form-hero .form-wrap {
  margin-top: 24px;
  width: calc(100% - 2 * var(--gutter));
}
@media (min-width: 735px) {
  .form-hero {
    padding-bottom: var(--pad);
  }
  .form-hero .form-wrap {
    margin-top: clamp(40px, 5vw, 64px);
  }
}
/* Phones turned sideways: less space above, so the first fields peek into the first screen */
@media (min-width: 735px) and (max-height: 500px) and (pointer: coarse) {
  .form-hero {
    padding-top: 32px;
  }
  .form-hero .form-wrap {
    margin-top: 24px;
  }
}

/* "Can't send" / "Something went wrong" message under the button.
   The email link inside is underlined (not color alone) and may wrap on small phones. */
.form-err {
  margin-top: 12px;
  color: var(--error);
  overflow-wrap: anywhere;
}
.form-err a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* "Good to know." FAQ: the heading already has its own space below it */
.faq .tiles {
  margin-top: 0;
}
/* The email link in the FAQ: underlined (not color alone) and allowed to wrap on small phones */
.faq .tile a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}

/* The whole consent row is tappable and the checkbox has a clear focus ring (site.css) */

/* Thank-you card: center the "Explore the features" link */
.form-success .more-row {
  justify-content: center;
}

/* Phones: a 3-line notes box (it still grows if they type more), no empty gap under the button */
@media (max-width: 734px) {
  .field textarea {
    min-height: 96px;
  }
  .form-err:empty {
    margin-top: 0;
  }
}

/* "Privacy policy" gets its 44px tap area from the shared .small a rule in site.css */