/* Contact sales: a serif heading, one line under it, and the form in a quiet bordered card. */
:root { --ink: #131313; --paper: #FAF9F6; --line: #E4E2DC; --soft: #6F6E69; --blue: #6B9DCE; --warn: #B4483C; }
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
main { max-width: 760px; margin: 0 auto; padding: clamp(40px, 8vh, 96px) clamp(20px, 3.6vw, 52px) clamp(64px, 10vh, 120px); }
h1 { margin: 0; text-align: center; font: 500 clamp(40px, 5.4vw, 64px)/1.05 "Source Serif 4", Georgia, serif; letter-spacing: -0.02em; }
.say { margin: 16px auto 40px; text-align: center; font-size: 17px; line-height: 1.55; color: var(--soft); }

.card { display: grid; gap: 22px; padding: clamp(22px, 3.4vw, 40px); border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 0; font-size: 15px; font-weight: 500; }
label > :is(input, textarea, small, .pick) { flex-basis: 100%; }
label em { font-style: normal; color: var(--soft); margin-left: 3px; }
label small { font-size: 13px; font-weight: 400; color: var(--soft); }
input, select, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: inherit; font-weight: 400; font-size: 16px; line-height: 1.4; font-family: inherit; transition: border-color 160ms ease, box-shadow 160ms ease; }
textarea { resize: vertical; min-height: 140px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(107, 157, 206, 0.22); }
.pick { position: relative; }
.pick select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.pick::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--soft); border-bottom: 1.5px solid var(--soft); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
[aria-invalid="true"] { border-color: var(--warn); }

.send { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.send button { padding: 13px 26px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 15px; line-height: 1; font-family: inherit; cursor: pointer; transition: opacity 160ms ease; }
.send button:hover { opacity: 0.85; }
.send button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.said { margin: 0; font-size: 14px; color: var(--soft); }
.said.bad { color: var(--warn); }
.fine { margin: 20px 4px 0; font-size: 13px; line-height: 1.6; color: var(--soft); text-align: center; }

@media (max-width: 640px) { .two { grid-template-columns: 1fr; } }
@media (prefers-color-scheme: dark) {
  :root { --warn: #E07B6F; }
  .card { background: #1C1C1A; }
  input, select, textarea { background: var(--paper); }
  .send button { background: var(--ink); color: #151514; }
}