/* Greensighter — waitlist page (uses tokens from main.css) */

.wl-page { min-height: 100vh; display: flex; flex-direction: column; }
.wl-page main, .wl-footer { width: min(1240px, 100% - 2 * var(--gutter)); margin: 0 auto; }

.wl-brand { display: flex; align-items: center; gap: 24px; }
.wl-intro__body { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.wl-main { position: relative; }
.wl-main > .wl-brand { position: absolute; top: 40px; left: 0; z-index: 1; }
.wl-brand__sep { width: 1px; height: 36px; background: var(--line); }
.wl-brand__mail { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.3; color: #8A8A8A; }
.wl-brand__mail a { font-size: 15px; color: var(--black); }
.wl-brand__mail a:hover { color: #555; }

/* Layout */
.wl-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 64px 112px; align-items: center; padding: 40px 0 48px; }

/* Intro */
.wl-intro { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 40px; animation: wl-in .8s cubic-bezier(.2, .7, .2, 1) both; }
.wl-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 5vw, 64px); line-height: 1.04; letter-spacing: -0.03em; color: var(--black); }
.wl-lead { margin: 0; max-width: 520px; font-size: 20px; line-height: 1.55; color: var(--text); }
.wl-features { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.wl-features li { display: flex; gap: 16px; align-items: flex-start; }
.wl-ic { flex: none; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.wl-features strong, .wl-offer strong, .wl-note strong { display: block; font-weight: 500; font-size: 17px; color: var(--black); }
.wl-features span:not(.wl-ic), .wl-offer span:not(.wl-offer__num) { display: block; margin-top: 6px; font-size: 15px; color: #6B6B6B; }
.wl-offer { display: flex; align-items: center; gap: 22px; width: 100%; max-width: 520px; margin-top: 8px; padding-top: 32px; border-top: 1px solid var(--line); }
.wl-offer__num { flex: none; width: 64px; text-align: center; font-family: var(--font-display); font-weight: 500; font-size: 56px; line-height: 1; letter-spacing: -0.03em; color: var(--black); }

/* Card */
.wl-card { padding: 32px; background: var(--white); border: 1px solid var(--line); border-radius: 24px; animation: wl-in .8s .1s cubic-bezier(.2, .7, .2, 1) both; }
.wl-card__title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; color: var(--black); }
.wl-card__sub { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: #6B6B6B; }
.wl-form { display: flex; flex-direction: column; }
.wl-form[hidden] { display: none; }
.wl-form > .field-row:first-of-type { margin-top: 22px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field-row .field { margin-top: 0; }

.field, .field-row { margin-top: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 500; color: var(--black); }
.field input, .select select { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--white); font: inherit; font-size: 15px; color: var(--black); transition: border-color .2s ease, box-shadow .2s ease; }
.field input::placeholder { color: #9A9A9A; }
.field input:focus, .select select:focus { outline: none; border-color: #111; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06); }
.field.is-invalid input, .field.is-invalid select { border-color: #C2412D; }
.field__err { margin: 0; font-size: 13px; color: #B23A28; }
.select { position: relative; }
.select select { appearance: none; padding-right: 38px; cursor: pointer; }
.select select:invalid { color: #9A9A9A; }
.select option { color: var(--black); }
.select svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }

.wl-submit { margin-top: 24px; height: 52px; border: 0; border-radius: 999px; background: var(--black); color: var(--white); font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; }
.wl-submit:hover { transform: scale(.98); }
.wl-submit:disabled { opacity: .6; cursor: progress; }
.wl-form__status { margin: 12px 0 0; font-size: 14px; color: #B23A28; text-align: center; }
.wl-legal { margin: 14px 0 0; font-size: 13px; color: #6B6B6B; text-align: center; }
.wl-legal a { color: var(--black); text-decoration: underline; text-underline-offset: 2px; }

.wl-note { display: flex; align-items: center; gap: 22px; max-width: 520px; margin-top: -4px; }
.wl-note__ic { flex: none; width: 64px; display: flex; align-items: center; justify-content: center; }
.wl-note strong { font-size: 17px; }
.wl-note div span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.55; color: #6B6B6B; }

/* Success */
.wl-success { display: flex; flex-direction: column; align-items: flex-start; outline: none; animation: wl-in .6s cubic-bezier(.2, .7, .2, 1) both; }
.wl-success[hidden] { display: none; }
.wl-success__ic { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; border-radius: 50%; background: var(--black); }
.wl-success strong { color: var(--black); font-weight: 500; }
.wl-success__back { display: inline-flex; align-items: center; min-height: 48px; margin-top: 24px; padding: 0 22px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; color: var(--black); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.wl-success__back:hover { transform: scale(.96); }

/* Footer */
.wl-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding: 24px 0 32px; }
.wl-assure { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 40px; }
.wl-assure li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--black); }
.wl-assure svg { flex: none; }
.wl-faq { margin: 0; font-size: 15px; color: #8A8A8A; }
.wl-faq a { color: var(--black); }
.wl-faq a:hover { color: #555; }

@keyframes wl-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (max-width: 1024px) {
  .wl-main > .wl-brand { position: static; }
  .wl-main { grid-template-columns: minmax(0, 1fr); padding: 48px 0 72px; }
  .wl-card { max-width: 640px; }
}
@media (max-width: 720px) {
  .wl-offer { display: none; }
  .wl-brand__sep, .wl-brand__mail { display: none; }
  .wl-assure { flex-direction: column; }
  .wl-lead { font-size: 18px; }
  .wl-card { padding: 24px; border-radius: 20px; }
  .wl-card__title { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .wl-intro, .wl-card, .wl-success { animation: none; }
  .wl-submit, .wl-success__back { transition: none; }
}
/* Mobile: form starts straight with the fields (success message keeps its title) */
@media (max-width: 720px) {
  .wl-form > .wl-card__title, .wl-form > .wl-card__sub { display: none; }
  .wl-form > .field-row:first-of-type { margin-top: 0; }
}