:root {
  --ink: #17231e;
  --green: #173027;
  --paper: #f3f0e8;
  --coral: #ef7b61;
  --line: #d3d5ce;
}
.access-card { max-width: 800px; margin: 32px auto; padding: 32px; background: white; border: 1px solid var(--line); border-radius: 8px; }
.access-card h2 { font-size: 21px; }
.access-card label { display: block; font-weight: 700; }
.access-card input { display: block; width: 100%; min-width: 0; padding: 14px; font: 16px Arial,sans-serif; margin: 12px 0; border: 1px solid #819086; border-radius: 5px; }
.access-card a { color: #254d3a; overflow-wrap: anywhere; }
.access-card button { min-height: 46px; background: var(--coral); color: var(--ink); font-size: 15px; border-radius: 4px; }
.access-card :focus-visible { outline: 3px solid #a84632; outline-offset: 3px; }
#access-help { color: #536159; font-size: 14px; }
.access-help { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 16px; }
.access-new { margin-top: 24px; }
.access-notice { background: #f6f0dd; padding: 16px; }
.access-card .feedback.error { color: #742515; background: #fff0eb; padding: 12px; }
.access-card .feedback:empty { display: none; }
@media(max-width:600px) { .access-card { margin: 20px 16px; padding: 22px; } .access-card button { width: 100%; } header { gap: 12px; } }
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    15px/1.6 Arial,
    sans-serif;
}
header {
  height: 76px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6vw;
  font-size: 12px;
}
.brand {
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.brand span {
  font-weight: 400;
}
.welcome {
  background: var(--green);
  color: #fff;
  padding: 55px 7vw;
}
.welcome h1 {
  font: 500 clamp(34px, 5vw, 56px) Georgia;
  margin: 8px 0;
}
.welcome p {
  max-width: 650px;
  color: #c5d0ca;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 10px;
}
.status {
  display: inline-block;
  background: var(--coral);
  color: var(--ink);
  padding: 8px 13px;
  margin-top: 12px;
  font-weight: 700;
  font-size: 12px;
}
.tabs {
  display: flex;
  gap: 5px;
  padding: 20px 6vw 0;
  overflow: auto;
}
.tabs button,
form button {
  border: 0;
  background: #fff;
  padding: 13px 18px;
  cursor: pointer;
}
.tabs button.active,
form button {
  background: var(--coral);
}
.panel {
  display: none;
  padding: 25px 6vw 70px;
}
.panel.active {
  display: block;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
article {
  background: #fff;
  padding: 28px;
  border: 1px solid var(--line);
}
h2 {
  font: 500 24px Georgia;
  margin-top: 0;
}
.timeline {
  padding-left: 20px;
}
.timeline li {
  padding: 8px;
}
.timeline .done {
  font-weight: 700;
  color: #276847;
}
dl {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 10px;
}
dt {
  color: #68736d;
}
dd {
  margin: 0;
  font-weight: 700;
}
.list {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}
.item {
  padding: 16px;
  border: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.item button {
  background: var(--ink);
  color: #fff;
  border: 0;
  padding: 10px 14px;
  cursor: pointer;
}
.messages {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}
.message {
  padding: 13px 16px;
  background: var(--paper);
  max-width: 80%;
}
.message.prospect {
  margin-left: auto;
  background: #dce9e1;
}
textarea,
input[type="file"] {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  background: #fff;
  margin-bottom: 10px;
}
textarea {
  min-height: 110px;
}
.feedback {
  font-weight: 700;
}
.error {
  color: #a22;
}
.loading {
  padding: 10vh;
  text-align: center;
}
@media (max-width: 700px) {
  header > span {
    display: none;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .tabs {
    padding-left: 3vw;
  }
  .panel {
    padding: 18px 3vw 50px;
  }
  .item {
    align-items: flex-start;
    flex-direction: column;
  }
}