:root {
  --paper: #f6f4ef;
  --ink: #1a1a1a;
  --mute: #5c5a55;
  --rule: #d9d4c8;
  --do: #1b7f4a;
  --maybe: #c48a00;
  --card: #fffef9;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font: 17px/1.5 var(--sans); }
body { margin: 0; }
a { color: inherit; text-underline-offset: 3px; }
button, input, textarea { font: inherit; color: inherit; }

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 20px 80px;
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}

h1 {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 12px;
}

.lede {
  color: var(--mute);
  margin: 0 0 32px;
  max-width: 42ch;
}

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 24px;
}

label.field {
  display: block;
  margin: 0 0 16px;
}

label.field span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 100%;
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: 8px;
  padding: 10px 12px;
}

input:focus,
textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

textarea { min-height: 110px; resize: vertical; }

.dests {
  display: grid;
  gap: 8px;
  margin: 8px 0 20px;
}

.dests legend {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  padding: 0;
}

.dests label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hint {
  font-size: 13px;
  color: var(--mute);
  margin: 0 0 20px;
}

button[type="submit"] {
  appearance: none;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  border-radius: 8px;
  padding: 12px 18px;
  font-weight: 600;
  cursor: pointer;
}

button[type="submit"]:disabled {
  opacity: 0.55;
  cursor: wait;
}

.err {
  color: #8a1f16;
  font-size: 14px;
  margin: 0 0 12px;
}

.success {
  display: none;
}

.success.show { display: block; }
form.hide { display: none; }

.dest-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.dest-list li {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 8px;
  background: #fff;
}

.pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
}

.pill.live { background: var(--do); color: #fff; }
.pill.demo { background: var(--maybe); color: #1a1a1a; }
.pill.fail { background: #b42318; color: #fff; }

.foot {
  margin-top: 40px;
  font-size: 13px;
  color: var(--mute);
}

code { font-size: 0.92em; }