/* ==========================================================================
   Lead pages (captura.html, obrigado.html): shared page hero (styles.css) and the form column of the Contact page
   (contact.css), without Header and Footer so the page has one job. Most visitors arrive on a phone from a post, so
   on small screens the form starts high on the page.
   ========================================================================== */

/* Short pages: the column and its guide lines run to the bottom of the window, with the footer at the end */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
main { display: flex; flex: 1; flex-direction: column; }
main > .contact { display: flex; flex: 1; }

.lead-hero .page-hero__frame { gap: 56px; padding: 32px 0 56px; }
.lead-hero .headline__title { width: fit-content; text-wrap: balance; }
.lead-hero .headline__subtitle { --subtitle-w: 420px; }
.lead-brand { display: block; }

/* Standalone privacy policy (privacidade.html): no Header above it, so nothing is offset from the top */
.lead-legal { --top-offset: 0px; }
.lead-legal .legal-hero { padding-top: 32px; }
.lead-legal .legal { width: 100%; }
.lead-legal .lead-brand { margin-bottom: 24px; }

/* Form */
.lead-form .field { gap: 10px; }
.lead-form__optional { color: var(--gray-500); }
.lead-form .contact-form__note a { color: var(--gray-50); text-decoration: underline; text-underline-offset: 2px; }
.lead-form__status { color: #ff8a80; }

/* The two main buttons: same height, full width */
.lead-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  padding-block: 0;
}
.lead-btn[aria-disabled="true"] { opacity: 0.5; cursor: default; pointer-events: none; }
.btn-send.lead-btn[aria-disabled="true"] img { display: none; }

/* Thank-you: the two actions */
.lead-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 12px;
}
.lead-actions .lead-btn { white-space: normal; text-align: center; line-height: 1.2; }

/* Small footer: only the privacy policy, which the form's consent text points to */
.lead-foot { padding-inline: var(--frame-gutter); }
.lead-foot__frame {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 24px var(--frame-pad);
  font-size: 12px;
  line-height: 1.5;
  color: var(--gray-500);
}
.lead-foot a:hover { color: var(--gray-50); }

@media (max-width: 768px) {
  .lead-hero .page-hero__frame { gap: 28px; padding: 20px 0 28px; }
  .lead-hero .headline__text { gap: 10px; }
  .lead-hero .headline { gap: 14px; }
  .lead-form { gap: 18px; }
  /* 16px: below it, the iPhone zooms the whole page when a field gets the focus */
  .lead-form .field__control { font-size: 16px; padding-block: 13px; }
}
@media (max-width: 600px) {
  .lead-actions { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .lead-hero .headline__title { font-size: 36px; }
}