/* Talk to sales (contact-sales.html), ElevenLabs' two halves: the pitch on a panel to the left, the form on the page to
   the right. On a phone the form comes first. */
.sales-page { min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); }
.sales { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.sales > .brand { position: absolute; top: 40px; left: clamp(24px, 5vw, 72px); z-index: 1; color: var(--text); font-size: 20px; }
.sales-pitch { display: flex; flex-direction: column; padding: 112px clamp(24px, 5vw, 72px) 48px;
  background: radial-gradient(120% 70% at 0% 0%, rgba(158, 227, 245, .08), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(160, 140, 255, .08), transparent 60%), var(--panel);
  border-right: 1px solid var(--line); }
.sales-pitch-body { display: flex; flex-direction: column; gap: 28px; margin: auto 0; max-width: 560px; }
.sales-pitch h1 { margin: 0; font: 650 clamp(34px, 3.6vw, 48px)/1.08 var(--display); letter-spacing: -0.03em; }
.sales-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sales-points li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; line-height: 1.4; color: var(--doc-text); }
.sales-points svg { flex: none; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--voice); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sales-made { display: grid; gap: 12px; margin-top: 12px; padding-top: 28px; border-top: 1px dashed var(--dash); }
.sales-made p { margin: 0; font-size: 14px; color: var(--muted); letter-spacing: .01em; }
.sales-tools { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sales-tools li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 11px 10px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255, 255, 255, .02); font-size: 13.5px; line-height: 1.3; letter-spacing: -0.005em; white-space: nowrap; color: var(--doc-text); }
.sales-tools svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sales-made .sales-made-note { font-size: 13.5px; line-height: 1.5; }

.sales-form-side { display: grid; place-items: center; padding: 48px clamp(24px, 5vw, 72px); }
.sales-form, .sales-done { width: 100%; max-width: 520px; display: grid; gap: 18px; }
.sales-form h2, .sales-done h2 { margin: 0; font: 650 clamp(30px, 3vw, 40px)/1.1 var(--display); letter-spacing: -0.025em; }
.sales-sub, .sales-done p { margin: -8px 0 8px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.sales-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sales-form label { display: grid; gap: 8px; font-size: 14.5px; font-weight: 550; color: var(--text); }
.sales-form input, .sales-form textarea { width: 100%; box-sizing: border-box; padding: 13px 16px; border: 1px solid var(--edge); border-radius: 12px;
  background: rgba(0, 0, 0, .25); color: var(--text); font: 500 16px/1.4 var(--font); transition: border-color .15s, box-shadow .15s; }
.sales-form textarea { resize: vertical; min-height: 104px; }
.sales-form input::placeholder, .sales-form textarea::placeholder { color: #6c6b76; }
.sales-form input:focus, .sales-form textarea:focus { outline: none; border-color: rgba(158, 227, 245, .6); box-shadow: 0 0 0 3px rgba(158, 227, 245, .15); }
.sales-form input[aria-invalid="true"] { border-color: #ff8a8a; }
.sales-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sales-error { margin: 0; color: #ff9d9d; font-size: 14px; }
.sales-error[hidden], .sales-done[hidden], .sales-form[hidden] { display: none; }
.sales-form .btn, .sales-done .btn { width: 100%; margin-top: 6px; }
.sales-form .btn:disabled { opacity: .6; cursor: progress; }
.sales-help { margin: 0; text-align: center; font-size: 14px; color: var(--muted); }
.sales-help a { color: var(--text); text-underline-offset: 3px; }

@media (min-width: 861px) and (max-width: 1360px) { .sales-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .sales { grid-template-columns: minmax(0, 1fr); }
  .sales > .brand { position: static; order: -2; padding: 22px 16px 0; font-size: 18px; }
  .sales-form-side { order: -1; padding: 28px 16px 40px; place-items: start center; }
  .sales-pitch { padding: 32px 16px 40px; border-right: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .sales-row { grid-template-columns: 1fr; }
  .sales-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}