/* comofficekit.com's Contact Sales page (_authoring/sdk_run.py), and only it:
   a form card beside a narrow column of other ways to reach us, laid out like
   KDAN's ComPDF contact page. It loads on top of
   styles.css and comofficekit.css, and every colour is one of the shared
   tokens, so dark mode follows the rest of the site. */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
@media (max-width: 900px) {
  .contact { grid-template-columns: minmax(0, 1fr); }
}

.contact__card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: clamp(20px, 3.4vw, 36px);
}
.contact__intro { font-size: 0.875rem; color: var(--muted); margin: 0 0 22px; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 22px;
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}

.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field--wide { grid-column: 1 / -1; }
.field__label {
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  padding: 0;
}
.field__label .req { color: var(--accent-text); margin-left: 2px; }
.field__label .opt { font-family: var(--text); font-weight: 400; color: var(--muted); margin-left: 4px; }
.field__hint { font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }

.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--body);
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-control);
}
.field textarea { min-height: 140px; line-height: 1.55; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); opacity: 1; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}

/* Platforms and readiness: native checkboxes and radios, in the accent. */
.choices { display: flex; flex-direction: column; gap: 8px; }
/* The platforms: a grid, so "in development" never strands one on a line of its own. */
.choices--row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 22px; }
.choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--body);
}
.choice input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--accent); }
.choice small { font-size: 0.78rem; color: var(--muted); }

/* The one message no browser shows for us: a checkbox group with nothing
   ticked. The PDF hue is the palette's only red, and both its light and dark
   values clear AA on the ground they sit on. */
.field__error { font-size: 0.8125rem; font-weight: 600; color: var(--pdf-fg); }

/* A field for bots only: off screen, out of the tab order, hidden from
   assistive technology. A person never fills it. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.contact__send { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.contact__note { font-size: 0.8125rem; line-height: 1.55; color: var(--muted); max-width: 46em; }

/* After sending: the message as it went, for anyone whose email app did not
   open (a webmail user, a work machine with none set up). */
.contact__done {
  margin-top: 22px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
}
/* display: flex above outranks the browser's own [hidden] rule, so without
   this line the empty panel showed before anything was sent. */
.contact__done[hidden] { display: none; }
.contact__done h3 { font-size: 1rem; }
.contact__done p { font-size: 0.875rem; line-height: 1.55; color: var(--body); }
.contact__done pre {
  margin: 0;
  max-height: 260px;
  overflow: auto;
  padding: 12px 14px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--body);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 8px;
}
.contact__done-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.contact__done [aria-live] { font-size: 0.8125rem; color: var(--muted); }

.contact__aside { display: flex; flex-direction: column; gap: 16px; }
.contact__aside h2 { font-size: 1.0625rem; }
.contact__steps { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; font-size: 0.86rem; line-height: 1.55; color: var(--body); }