/* Public contract sign-up page. Builds on the tokens defined in landing.css. */

.page{ padding:calc(74px + 70px) 0 100px; background:var(--offwhite); min-height:100svh; }

/* The form is the only column, so keep it to a comfortable reading width. */
.page-body{ max-width:760px; margin:0 auto; }

.page-head{ margin-bottom:36px; }
.page-head h1{ font-size:clamp(28px, 3.2vw, 40px); margin-top:16px; }
.page-head p{ margin-top:18px; color:var(--ink-soft); font-size:16px; line-height:1.75; }

/* ---------- CARD ---------- */
.card{
  background:var(--white); border:1px solid var(--line); border-radius:4px; padding:38px 36px;
}

.card-title{
  font-family:var(--sans); font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:600; padding-bottom:14px; margin-bottom:26px;
  border-bottom:1px solid var(--line-soft);
}
.card-title + .card-title{ margin-top:38px; }

/* ---------- FORM FIELDS ---------- */
.field{ margin-bottom:22px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }

.field label{
  display:block; font-family:var(--sans); font-size:11.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink); font-weight:600; margin-bottom:9px;
}
.field label .opt{ color:var(--ink-dim); font-weight:500; letter-spacing:0.04em; text-transform:none; }

.field input,
.field select,
.field textarea{
  width:100%; font-family:var(--body); font-size:15px; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:2px;
  padding:13px 14px; transition:border-color .2s ease, box-shadow .2s ease;
}
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:42px;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(199,164,103,0.16);
}
.field input.invalid,
.field select.invalid{ border-color:#b4432f; }

.field .hint{ margin-top:7px; font-size:13px; color:var(--ink-dim); line-height:1.5; }
.field .err{ margin-top:7px; font-size:13px; color:#b4432f; line-height:1.5; }

.money{ position:relative; }
.money input{ padding-left:30px; }
.money::before{
  content:'$'; position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--ink-dim); font-size:15px; pointer-events:none;
}

.form-actions{ margin-top:34px; padding-top:28px; border-top:1px solid var(--line-soft);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.form-actions .note{ font-size:13px; color:var(--ink-dim); max-width:340px; line-height:1.55; }
button.btn{ border:none; cursor:pointer; font-family:var(--sans); }

/* ---------- ALERT ---------- */
.alert{
  border-left:3px solid #b4432f; background:#fbf1ef; color:#7d3222;
  padding:16px 18px; border-radius:2px; margin-bottom:30px; font-size:14.5px; line-height:1.6;
}
.alert strong{ display:block; font-family:var(--sans); font-size:12px; letter-spacing:0.1em;
  text-transform:uppercase; margin-bottom:5px; }

@media (max-width:900px){
  .page{ padding-top:calc(74px + 44px); }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .card{ padding:28px 22px; }
}