/* /support — гостевая форма обратной связи. Одна колонка, спокойный экран:
   сюда приходят с проблемой, а не изучают продукт. Стили формы автономны
   (b2c/site.css сюда не подключён), поэтому .field/.consent/.form-msg живут тут. */

.sup-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 56px 48px;
  background:
    radial-gradient(80% 55% at 50% 12%, rgba(217, 186, 133, 0.10), transparent 60%),
    var(--bg);
}

.sup-in {
  display: flex;
  flex-direction: column;
  max-width: 46ch;
  width: 100%;
}

.sup-brand { margin-bottom: 40px; align-self: center; }

.sup-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 6vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0;
}

.sup-sub {
  margin: 16px 0 12px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.55;
}

/* Отсылка к /help перед формой: половина обращений — это вопросы из инструкций. */
.sup-hint {
  margin: 0 0 30px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-3);
}

.sup-hint a { color: var(--brass); text-decoration: underline; text-underline-offset: 3px; }

.sup-form {
  display: grid;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 4vw, 32px);
  box-shadow: var(--e-2);
}

.field { display: grid; gap: 8px; }
.field label { font-size: 12px; color: var(--text-3); letter-spacing: 0.06em; }
.field .opt { text-transform: none; letter-spacing: 0; color: var(--text-3); }

.field input,
.field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 2px;
  font: inherit;
  font-size: 16px;
  color: inherit;
  transition: border-color var(--t-base) var(--ease);
}

.field textarea {
  resize: vertical;
  min-height: 108px;
  line-height: 1.5;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--text-3); }
.field input:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--brass); }
.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'] { border-bottom-color: var(--danger); }

/* Ловушка для ботов: снимаем с потока, но НЕ display:none — часть ботов
   такие поля пропускает. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  cursor: pointer;
  margin-top: 4px;
}

.consent input { margin-top: 3px; accent-color: var(--brass); flex: none; }
.consent a { color: var(--brass); text-decoration: underline; text-underline-offset: 2px; }

.sup-submit { justify-self: start; margin-top: 4px; }
.sup-submit[disabled] { opacity: 0.6; cursor: default; }

.form-msg { font-size: 14px; min-height: 1.2em; margin: 0; }
.form-msg.ok { color: var(--bonus); }
.form-msg.err { color: var(--danger); }

.sup-back {
  margin-top: 30px;
  align-self: center;
  font-size: 13px;
  color: var(--text-3);
  transition: color var(--t-base) var(--ease);
}

.sup-back:hover { color: var(--brass); }