/* The waitlist page (/waitlist/): the form on the left, the chat bubble a Heura AI puts on a website on the right,
   which pops open after the page loads.
   Builds on site.css: the tokens (light and dark), the header, buttons, panels and the footer. */

:root { --bad: #b42318; } /* 6.5:1 on the page */
:root[data-theme="dark"] { --bad: #ff8a80; } /* 9.4:1 on the page */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bad: #ff8a80; } }

.wl-main { padding: clamp(32px, 6vw, 88px) 0 clamp(72px, 9vw, 128px); }
.wl-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.wl-panel { width: 100%; max-width: 460px; }

.wl-title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 3vw + 22px, 64px);
  line-height: 1.03; letter-spacing: -.02em; text-wrap: balance;
}
.wl-lead {
  margin-top: 18px; font-family: var(--serif); font-size: clamp(19px, .3vw + 16px, 21px);
  line-height: 1.45; color: var(--ink-2); text-wrap: pretty;
}
.wl-fields { display: grid; gap: 20px; margin-top: 36px; }
.wl-field { display: grid; gap: 8px; }
.wl-field label { font-size: 15px; font-weight: 600; line-height: 1.3; }
.wl-field input {
  display: block; width: 100%; height: 52px; margin: 0; padding: 0 16px;
  border: 1px solid var(--field); border-radius: 12px; background: var(--page); color: var(--ink);
  font-size: 17px; line-height: 1.2; transition: border-color .15s ease;
  -webkit-appearance: none; appearance: none;
}
.wl-field input::placeholder { color: var(--ink-2); opacity: 1; }
@media (hover: hover) { .wl-field input:hover { border-color: var(--ink-2); } }
.wl-field input:focus { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink-2); }
.wl-field input[aria-invalid="true"] { border-color: var(--bad); }
/* the browser's autofill keeps the page's colors */
.wl-field input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px var(--page) inset; caret-color: var(--ink);
}
.wl-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.wl-error { margin-top: 14px; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--bad); }
.wl-error:empty { display: none; }
.wl-submit { width: 100%; margin-top: 28px; }
.wl-submit[disabled] { opacity: .6; cursor: progress; }
.wl-fine { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

.wl-done:focus { outline: none; }
.wl-home { margin-top: 28px; }

/* the sample chat, in the corner of the panel (styles in site.css, .ov-chat) */
.wl-art { height: clamp(520px, 48vw, 640px); }

/* narrower screens: the form alone */
@media (max-width: 899px) {
  .wl-grid { grid-template-columns: minmax(0, 1fr); }
  .wl-panel { max-width: 520px; }
  .wl-art { display: none; }
}