/* Бриф на разработку сайта. Стили только для /brief/ — в общий style.css
   не лезем, чтобы правка формы не могла задеть остальной сайт. */

.brief-page { background: #fff; }

.bf-hero { padding: 150px 0 34px; }
.bf-hero h1 { font-family: 'Unbounded', sans-serif; font-weight: 700;
  font-size: clamp(34px, 5vw, 64px); line-height: 1.04; letter-spacing: -.02em; margin: 14px 0 0; }
.bf-hero .lead { max-width: 720px; margin-top: 20px; font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6; color: #4a4a55; }

/* Полоса прогресса липнет под шапкой: на длинной форме нужно видеть,
   сколько осталось, иначе человек бросает на середине. */
.bf-progress { position: sticky; top: 64px; z-index: 30; background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); border-bottom: 1px solid #ececf2; padding: 12px 0; }
.bf-progress__row { display: flex; align-items: center; gap: 16px; }
.bf-progress__bar { flex: 1; height: 6px; border-radius: 4px; background: #eeeef4; overflow: hidden; }
.bf-progress__bar i { display: block; height: 100%; width: 11%; border-radius: 4px;
  background: linear-gradient(90deg, #6d28d9, #f94c66 60%, #ff8a4c); transition: width .35s ease; }
.bf-progress__num { font-size: 14px; color: #8b8b98; white-space: nowrap; }
.bf-progress__num b { color: #0b0b0f; }

.bf-wrap { padding: 34px 0 110px; }

.bf-step { border: 0; padding: 0; margin: 0; }
.bf-step legend { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-family: 'Unbounded', sans-serif; font-weight: 600;
  font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -.01em; margin-bottom: 26px; padding: 0; }
.bf-step__n { font-family: 'Onest', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(90deg, #6d28d9, #f94c66 60%, #ff8a4c);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.bf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.bf-f { display: flex; flex-direction: column; gap: 9px; }
.bf-f--wide { grid-column: 1 / -1; }
.bf-f > span { font-size: 15px; font-weight: 500; color: #0b0b0f; }
.bf-f > span i { color: #f94c66; font-style: normal; }
.bf-f input, .bf-f textarea {
  font: inherit; font-size: 16px; color: #0b0b0f; background: #fff;
  border: 1.5px solid #e2e2ea; border-radius: 12px; padding: 14px 16px;
  outline: none; transition: border-color .18s ease, box-shadow .18s ease; resize: vertical; }
.bf-f input::placeholder, .bf-f textarea::placeholder { color: #a9a9b6; }
.bf-f input:focus, .bf-f textarea:focus { border-color: #6d28d9; box-shadow: 0 0 0 4px rgba(109,40,217,.1); }
.bf-f input.bf-bad, .bf-f textarea.bf-bad { border-color: #f94c66; }
.bf-hint { font-size: 13.5px; line-height: 1.45; color: #8b8b98; font-style: normal; }

.bf-lab { display: block; font-size: 15px; font-weight: 500; margin: 26px 0 12px; }
.bf-step legend + .bf-lab { margin-top: 0; }

.bf-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.bf-chips label { position: relative; cursor: pointer; }
.bf-chips input { position: absolute; opacity: 0; width: 0; height: 0; }
.bf-chips span { display: block; padding: 11px 18px; border-radius: 999px;
  border: 1.5px solid #e2e2ea; font-size: 15px; color: #3a3a44;
  transition: border-color .16s ease, background .16s ease, color .16s ease; }
.bf-chips label:hover span { border-color: #c8c8d4; }
.bf-chips input:checked + span { border-color: #6d28d9; background: #f4efff; color: #0b0b0f; }
.bf-chips input:focus-visible + span { box-shadow: 0 0 0 4px rgba(109,40,217,.14); }

.bf-note { font-size: 15px; line-height: 1.55; color: #6a6a78; max-width: 640px; margin: -8px 0 22px; }

/* ---------- файлы ---------- */
.bf-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bf-slot { border: 1.5px dashed #dcdce6; border-radius: 16px; padding: 18px 18px 16px;
  transition: border-color .18s ease, background .18s ease; }
.bf-slot.is-over { border-color: #6d28d9; background: #faf7ff; }
.bf-slot__t { font-size: 16px; font-weight: 600; }
.bf-slot__d { font-size: 13.5px; color: #8b8b98; margin-top: 4px; line-height: 1.45; }
.bf-slot__pick { display: inline-block; margin-top: 12px; font-size: 14.5px; font-weight: 500;
  color: #6d28d9; border-bottom: 1px dashed rgba(109,40,217,.45); cursor: pointer; }
.bf-slot input[type=file] { display: none; }
.bf-slot__link { width: 100%; margin-top: 12px; font: inherit; font-size: 14.5px;
  border: 1.5px solid #e2e2ea; border-radius: 10px; padding: 10px 12px; outline: none; }
.bf-slot__link:focus { border-color: #6d28d9; }

.bf-files { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bf-file { display: flex; align-items: center; gap: 10px; font-size: 14px;
  background: #f7f7fa; border-radius: 10px; padding: 9px 11px; }
.bf-file__n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-file__s { color: #8b8b98; font-size: 13px; white-space: nowrap; }
.bf-file__x { border: 0; background: none; cursor: pointer; color: #9a9aa6; font-size: 18px;
  line-height: 1; padding: 0 2px; }
.bf-file__x:hover { color: #f94c66; }
.bf-file.is-bad { background: #fff0f2; color: #c2283f; }
.bf-file__bar { height: 4px; border-radius: 3px; background: #e2e2ea; width: 74px; overflow: hidden; }
.bf-file__bar i { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #6d28d9, #ff8a4c); transition: width .2s ease; }

/* ---------- навигация и финал ---------- */
.bf-nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 40px;
  padding-top: 26px; border-top: 1px solid #ececf2; }
.bf-btn { appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 16px; font-weight: 500;
  color: #fff; background: #0b0b0f; border-radius: 999px; padding: 15px 30px;
  text-decoration: none; display: inline-block; transition: opacity .18s ease; }
.bf-btn:hover { opacity: .86; }
.bf-btn[disabled] { opacity: .5; cursor: default; }
/* display:inline-block у кнопки перебивает браузерное [hidden]{display:none},
   поэтому «Назад» и «Отправить» показывались на первом шаге. */
.bf-btn[hidden] { display: none; }
.bf-btn--ghost { background: #fff; color: #0b0b0f; border: 1.5px solid #e2e2ea; }
.bf-saved { font-size: 13.5px; color: #a0a0ad; margin-left: auto; }
.bf-agree { display: flex; gap: 11px; align-items: flex-start; margin-top: 26px; font-size: 15px; color: #3a3a44; }
.bf-agree input { margin-top: 3px; width: 18px; height: 18px; accent-color: #6d28d9; flex: none; }
.bf-agree a { color: #0b0b0f; }
.bf-err { margin-top: 16px; font-size: 15px; line-height: 1.5; color: #c2283f; }

.bf-done { padding: 40px 0 60px; max-width: 640px; }
.bf-done h2 { font-family: 'Unbounded', sans-serif; font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.015em; }
.bf-done p { margin-top: 16px; font-size: 17px; line-height: 1.6; color: #4a4a55; }
.bf-done__id b { font-family: ui-monospace, Menlo, monospace; color: #0b0b0f; }
.bf-done .bf-btn { margin-top: 28px; }

@media (max-width: 860px) {
  .bf-grid, .bf-slots { grid-template-columns: 1fr; }
  .bf-hero { padding-top: 120px; }
  .bf-progress { top: 56px; }
  .bf-saved { margin-left: 0; width: 100%; }
  .bf-btn { flex: 1; text-align: center; }
}