/**
 * Page-specific rules for the beta signup page. styles.css is a verbatim copy
 * of the public site's stylesheet and is meant to stay replaceable, so
 * everything that only this page needs lives here instead.
 */

/* styles.css zeroes the margin on .hero-copy p so the hero has exactly one
   paragraph. thanks.html and confirmed.html have two, and without this they
   read as one block. (index.html is deliberately down to one -- see the phone
   rules at the bottom of this file.) */
.hero-second {
  margin-top: 18px;
}

/* Two columns only above 920px; below that styles.css has already stacked them.
   The hero copy on index.html is one short paragraph now, and stretching it to
   match the height of the signup card beside it leaves a large empty box that
   reads as content that failed to load. Let each card be its own height. */
@media (min-width: 921px) {
  .hero-grid {
    align-items: start;
  }
}

.signup-panel {
  display: grid;
  gap: 0;
}

.signup {
  margin-top: 16px;
  display: grid;
  gap: 14px;
}

.field {
  display: grid;
  gap: 6px;
}

.field label,
.consent label {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

.field input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(95, 79, 63, 0.18);
  background: var(--surface-strong);
  color: var(--text);
  font-family: inherit;
  font-size: 16px; /* Below 16px, iOS Safari zooms the whole page on focus. */
}

.field input:focus-visible,
.consent input:focus-visible,
.signup-submit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Only after the browser has judged the field invalid *and* the user has left
   it. Styling :invalid alone paints the box red while someone is still typing
   the first letter of their address. */
.field input:user-invalid {
  border-color: #b4432c;
}

.consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.consent input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

/* Brevo's spam trap. Moved out of sight rather than hidden with display:none
   or visibility:hidden -- crawlers skip fields hidden that way, which is
   exactly the audience the field exists to catch. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.signup-submit {
  width: 100%;
  border: none;
  font-family: inherit;
  cursor: pointer;
}

.signup-submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.signup-status {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
}

/* Empty until beta.js writes to it. Without this the margin above would open a
   gap under the button on a page where nothing has gone wrong yet. */
.signup-status:empty {
  display: none;
}

.signup-status.is-ok {
  color: #2f6b4f;
}

.signup-status.is-error {
  color: #b4432c;
}

.form-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.form-note a {
  color: var(--accent);
  text-decoration: underline;
}

.steps {
  margin: 12px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 12px;
}

.steps li {
  color: var(--muted);
  line-height: 1.75;
  font-size: 15px;
}

.steps strong {
  color: var(--text);
}

/* Phone layout.
 *
 * The only thing this page has to achieve above the fold is showing the email
 * field. Everything competing with it for those first 780 pixels is either cut
 * or shrunk here -- see the comment above .hero-copy in index.html for what the
 * measured starting point was.
 *
 * styles.css already collapses the two columns at 920px and trims padding at
 * 640px; these rules go further, and only on a phone. */
@media (max-width: 640px) {
  /* Privacy and Support are in the footer, and Privacy again in the fine print
     under the form. Three copies of the same two links, and this copy is the
     one sitting between the visitor and the thing they came for. */
  .topbar .nav {
    display: none;
  }

  /* The wordmark says "Aesthé" directly underneath. */
  .brand-copy small {
    display: none;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  .brand-copy strong {
    margin-top: 0;
    font-size: 22px;
  }

  .topbar {
    padding: 14px 0 4px;
  }

  .hero {
    padding: 12px 0 18px;
  }

  .hero-grid {
    gap: 14px;
  }

  .hero-copy,
  .hero-side {
    padding: 20px;
  }

  /* styles.css pins this at 40px below 640px, which is two tall lines before a
     visitor has read a word. */
  .hero-copy h1 {
    font-size: 29px;
    line-height: 1.02;
  }

  /* The signup form is a mini-panel inside a card, so it pays for two borders
     and two sets of padding -- about 38px of each edge before the first label.
     On a phone that is a card inside a card for no gain. Flatten the inner one
     and let the outer card be the only frame. */
  .hero-side {
    padding: 0;
  }

  .signup-panel {
    padding: 20px;
    background: none;
    border: none;
  }

  /* "Be among the first inside." sits directly under a headline that has
     already made the pitch, and directly above a field labelled Email address.
     On a wide screen it earns its place; here it costs two lines at the exact
     point where they are most expensive. JOIN THE LIST stays as the label. */
  .signup-panel h3 {
    display: none;
  }

  .signup-panel .eyebrow {
    margin-bottom: 4px;
  }
}