/*
 * THE CONTACT FORM.
 *
 * ONE FILE, TWO HOSTS. It lives in the marketing docroot and is symlinked into
 * the app docroot, because the same form is served from both and a second copy
 * is a copy that gets edited once and forgotten twice.
 *
 * It deliberately uses the same vocabulary as the sign-up wizard (.wiz, .pick,
 * .wiz-field) so the two feel like one product, but it is self-contained: the
 * two are never loaded on the same page, and this one has to work on the
 * marketing site where signup.css does not exist.
 *
 * INVARIANTS
 *   1. IT WORKS WITH NO JAVASCRIPT. Every selected state here is driven by
 *      :checked on a real radio input, never by a class a script adds. If the
 *      script never arrives, the form still shows you what you picked.
 *   2. A CHOICE IS A BIG TARGET. The radio itself is small and hard to hit, so
 *      the whole card is the label and the whole card is the target.
 *   3. THE SELECTED STATE IS NEVER COLOUR ALONE. Border, tint and a tick.
 */

.wrap.narrow { max-width: 700px; }

.wiz { max-width: 640px; margin: 0 auto; padding: 0 0 12px; }

.wiz-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.wiz-top h1 { flex: 1 1 auto; }
.wiz-a11y { flex: none; display: inline-flex; align-items: center; padding-top: 6px; }

.wiz h1 {
  font-size: clamp(28px, 6vw, 38px);
  line-height: 1.15;
  margin: 6px 0 10px;
  letter-spacing: -.01em;
}
.wiz .wiz-sub {
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--mut, #6E5C44);
  margin: 0 0 26px;
}

.wiz-group-head {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mut, #6E5C44);
  margin: 22px 0 10px;
}

/* ------------------------------------------------- the reason, as cards */
.wiz-picks { display: grid; gap: 10px; margin: 0 0 26px; }

.pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 15px 46px 15px 18px;
  background: var(--paper, #FFFDF7);
  border: 2px solid var(--line, #E7DAC0);
  border-radius: 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, #2C2214);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color .15s, background .15s;
}
@media (hover: hover) {
  /* Pointer only. A touch browser leaves :hover on whatever was last tapped,
     and this tint is close enough to the chosen state to read as a second
     selection on a screen whose only job is showing which one is chosen. */
  .pick:hover { border-color: #C9A96A; background: #FFF9EC; }
}
.pick .pick-txt { display: block; font-weight: 700; }
.pick .pick-note {
  display: block;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--mut, #6E5C44);
  margin-top: 3px;
  line-height: 1.4;
}

/* The radio is real, and it is what carries the state. It sits under the tick
   rather than being display:none, because a hidden input cannot be focused and
   a form nobody can tab through is a form some people cannot send. */
.pick-radio input[type="radio"] {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0;
  accent-color: var(--amber, #A85F17);
  cursor: pointer;
}
.pick-radio:has(input:checked),
.pick-radio.on {
  border-color: var(--amber, #A85F17);
  background: #FFF3DF;
}
/* :has() is recent. Older browsers keep the server-rendered .on class, which
   is why the markup carries both and neither is decoration. */
.pick-radio:focus-within {
  border-color: var(--amber, #A85F17);
  box-shadow: 0 0 0 3px rgba(168,95,23,.18);
}

/* ------------------------------------------------------------- the form */
.wiz-field { margin: 0 0 18px; }
.wiz-field label {
  display: block;
  font-size: 16.5px;
  font-weight: 700;
  margin: 0 0 7px;
  color: var(--ink, #2C2214);
}
.wiz-field .opt {
  font-weight: 400;
  font-size: 14.5px;
  color: var(--mut, #6E5C44);
}
.wiz-field input,
.wiz-field textarea {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink, #2C2214);
  background: var(--paper, #FFFDF7);
  border: 2px solid var(--line, #E7DAC0);
  border-radius: 14px;
  box-sizing: border-box;
}
.wiz-field input { min-height: 58px; }
.wiz-field textarea { min-height: 150px; resize: vertical; }
.wiz-field input:focus,
.wiz-field textarea:focus {
  outline: none;
  border-color: var(--amber, #A85F17);
  box-shadow: 0 0 0 3px rgba(168,95,23,.16);
}
.wiz-field .hint {
  font-size: 14.5px;
  color: var(--mut, #6E5C44);
  margin: 7px 0 0;
  line-height: 1.45;
}
.wiz-row { display: grid; gap: 14px; }
@media (min-width: 560px) { .wiz-row.two { grid-template-columns: 1fr 1fr; } }

.wiz-say {
  font-size: 15px;
  line-height: 1.45;
  margin: 9px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
}
.wiz-say.bad { background: #FBE9E7; color: #8A2C1B; }

.wiz-err {
  background: #FBE9E7;
  color: #8A2C1B;
  border-radius: 12px;
  padding: 13px 15px;
  font-size: 16px;
  line-height: 1.45;
  margin: 0 0 18px;
  font-weight: 600;
}

.wiz-go { margin: 26px 0 14px; }
.wiz-go .btn { width: 100%; }
.btn.wiz-next {
  min-height: 62px;
  font-size: 20px;
  border-radius: 999px;
}

/* The honeypot. Off screen rather than display:none, because some form fillers
   skip anything with display:none and this one is meant to be found by them
   and by nobody else. aria-hidden and tabindex keep it away from people. */
.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------ the thank you */
.wiz-done { text-align: center; padding: 20px 0 6px; }
.wiz-done .horse { width: 130px; height: auto; margin: 0 auto 16px; display: block; }
.wiz-done h1 { margin-bottom: 8px; }
.wiz-credits {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #FFF3DF;
  border: 2px solid #E7CFA4;
  border-radius: 999px;
  padding: 11px 20px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .02em;
  color: #7A4E08;
  margin: 0 0 18px;
}