/* Brief page only. Everything else comes from site.css. */
.page--brief { max-width: 720px; }
.page--brief .sub { color: var(--sc-ink-soft); line-height: 1.7; margin: 0 0 var(--sc-7); max-width: 44ch; }
.brief .field { margin-top: var(--sc-5); }
.brief .field .req { color: var(--sc-accent); }
.brief .opts { display: grid; gap: 0.45rem; margin-top: 0.6rem; }
.brief .opt {
  display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem 0.85rem; border-radius: 6px;
  background: rgb(255 255 255 / 0.04); border: 1px solid rgb(195 220 240 / 0.28);
  font-weight: 400; cursor: pointer; transition: border-color var(--sc-d-fast) var(--sc-ease-out);
}
.brief .opt:hover { border-color: rgb(195 220 240 / 0.55); }
.brief .opt:has(input:checked) { border-color: var(--sc-accent); background: rgb(195 220 240 / 0.08); }
.brief .opt input { accent-color: var(--sc-accent); width: 1rem; height: 1rem; margin: 0; }
.brief .other { display: none; margin-top: 0.5rem; }
.brief .other.is-on { display: block; }
.brief textarea { min-height: 6.5rem; resize: vertical; }
.brief .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.brief .form-actions { margin-top: var(--sc-7); }
.brief .form-status[data-tone="error"] { color: #ffb5a6; }
.done { display: none; }
.done.is-on { display: block; }
.done p { color: var(--sc-ink-soft); line-height: 1.7; }
.done .line { padding-top: var(--sc-4); border-top: 1px solid var(--line); font-size: 0.9rem; }
.done .line a { color: var(--sc-ink); }
@media (max-width: 700px) { .page--brief { padding-top: calc(var(--bar-h) + 3vh); } }