/* ============================================================
   Simple · бриф — дизайн-система
   Палитра и шрифт те же, что на simplemind.ru: белый фон, чёрный
   текст, лаймовый акцент. Бриф — часть продукта, а не чужая форма.
   ============================================================ */

@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/static/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/static/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

:root {
  --bg: #ffffff;
  --ink: #0a0a0a;
  --ink-2: #16180f;
  --muted: #7b7f76;
  --subtle: #a9ada3;
  --line: #e7e8e2;
  --surface: #f4f4f1;
  --surface-2: #eaebe5;
  --lime: #d8ff32;
  --lime-deep: #c4ec1a;
  --danger: #c0392b;

  --radius-card: 2rem;
  --radius-control: 1rem;
  --radius-pill: 62.5rem;

  --shell: 70rem;
  --gutter: 1.25rem;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
@media (min-width: 640px) { :root { --gutter: 2rem; } }

html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: Onest, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  /* Форма длинная и узкая: горизонтальной прокрутки не должно быть
     даже на 320 px, поэтому переполнение режем на уровне страницы. */
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

/* ============================ ШАПКА ============================ */
.header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header .bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; }
.brand i { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: .55rem; background: var(--ink); color: var(--lime); font-style: normal; flex: none; }
.brand i svg { width: 72%; height: 72%; }

/* Индикатор заполнения: тонкая полоса, а не «геймификация». */
.progress { display: flex; align-items: center; gap: .75rem; font-size: .8125rem; color: var(--muted); }
.progress-track { width: 8rem; height: .375rem; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.progress-fill { height: 100%; width: 0%; border-radius: inherit; background: var(--lime-deep); transition: width .5s var(--ease); }
@media (max-width: 560px) { .progress-track { width: 4.5rem; } }

/* ============================ ШАПКА СТРАНИЦЫ ============================ */
.intro { padding-block: 4rem 2.5rem; }
.intro h1 { font-size: clamp(2.1rem, 6vw, 4rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 600; }
.intro h1 em { font-family: "Times New Roman", Times, serif; font-style: italic; font-weight: 400; color: var(--lime-deep); }
.intro p { margin-top: 1.25rem; max-width: 46ch; font-size: 1.0625rem; color: var(--muted); }

.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin-bottom: 1.25rem; }
.eyebrow::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--lime-deep); flex: none; }

/* ============================ ВЫБОР ТИПА ============================ */
.types { display: grid; gap: .75rem; grid-template-columns: 1fr; margin-bottom: 3.5rem; }
@media (min-width: 620px) { .types { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .types { grid-template-columns: repeat(3, 1fr); } }

.type {
  position: relative; text-align: left; padding: 1.25rem 1.25rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--radius-control);
  background: var(--bg); transition: border-color .25s, background-color .25s, transform .25s var(--ease);
}
.type b { display: block; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; padding-right: 2rem; }
.type span { display: block; margin-top: .35rem; font-size: .875rem; color: var(--muted); }
.type-check {
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center;
  transition: background-color .25s, border-color .25s;
}
.type-check svg { width: .8rem; height: .8rem; opacity: 0; transition: opacity .2s; }
.type[aria-pressed="true"] { border-color: var(--ink); background: var(--surface); }
.type[aria-pressed="true"] .type-check { background: var(--lime); border-color: var(--lime); }
.type[aria-pressed="true"] .type-check svg { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .type:hover { border-color: var(--ink); transform: translateY(-2px); }
}

/* ============================ БЛОКИ ФОРМЫ ============================ */
.block { padding-block: 2.5rem; border-top: 1px solid var(--line); }
.block:first-of-type { border-top: none; padding-top: 0; }
.block-head { margin-bottom: 2rem; }
.block-head h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.1; letter-spacing: -.025em; font-weight: 600; }
.block-head p { margin-top: .6rem; color: var(--muted); max-width: 52ch; }

/* На компьютере — две колонки, на телефоне одна. Длинные вопросы
   занимают всю ширину: в половину строки они не читаются. */
.fields { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field-wide { grid-column: 1 / -1; }

.field label { display: block; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: .4rem; }
.field .hint { display: block; font-size: .8125rem; color: var(--muted); margin-bottom: .6rem; }
/* Селектор по типу поля был ошибкой: у телефона type="tel", у почты
   type="email", и они оставались в размере по умолчанию — крошечными.
   Исключаем только галочки, остальным полям нужен один и тот же вид. */
.field textarea, .field input:not([type="checkbox"]), .field select {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid transparent;
  border-radius: var(--radius-control); padding: .85rem 1rem;
  transition: border-color .25s, background-color .25s;
  resize: vertical;
}
.field textarea::placeholder { color: var(--subtle); }
.field textarea:focus, .field input:focus, .field select:focus { border-color: var(--ink); background: var(--bg); outline: none; }
.field.is-invalid textarea, .field.is-invalid input { border-color: var(--danger); }
.field .error { display: none; margin-top: .4rem; font-size: .8125rem; color: var(--danger); }
.field.is-invalid .error { display: block; }

/* ============================ ДОПОЛНИТЕЛЬНЫЕ ВОПРОСЫ ============================ */
/* Сразу показывать огромную анкету нельзя — сначала пять основных. */
.more { margin-top: 2rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); }
.more-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.more-head b { font-size: 1rem; font-weight: 600; }
.more-head span { display: block; font-size: .875rem; color: var(--muted); margin-top: .2rem; }
.more-toggle { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.15rem; border-radius: var(--radius-pill); background: var(--ink); color: #fff; font-size: .875rem; font-weight: 500; transition: background-color .25s; }
.more-toggle i { font-style: normal; font-size: 1.1em; line-height: 1; }
@media (hover: hover) and (pointer: fine) { .more-toggle:hover { background: var(--ink-2); } }
.more-body { display: none; margin-top: 1.75rem; }
.more[data-open="1"] .more-body { display: block; }

/* ============================ ФАЙЛЫ ============================ */
.dropzone {
  display: grid; place-items: center; gap: .5rem; text-align: center;
  padding: 2.5rem 1.5rem; border: 1px dashed var(--line); border-radius: var(--radius-control);
  background: var(--surface); cursor: pointer; transition: border-color .25s, background-color .25s;
}
.dropzone b { font-size: 1rem; font-weight: 600; }
.dropzone span { font-size: .8125rem; color: var(--muted); max-width: 40ch; }
.dropzone[data-drag="1"] { border-color: var(--ink); background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) { .dropzone:hover { border-color: var(--ink); } }

.hintbox { margin-bottom: 1.25rem; padding: 1.1rem 1.25rem; border-radius: var(--radius-control); background: var(--surface); }
.hintbox b { display: block; font-size: .9375rem; margin-bottom: .5rem; }
.hintbox ul { display: flex; flex-wrap: wrap; gap: .4rem; }
.hintbox li { font-size: .8125rem; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: .25rem .7rem; }
.hintbox .privacy { margin-top: .75rem; font-size: .8125rem; color: var(--muted); }

/* Плашка про запись экрана — она экономит клиенту больше всего времени. */
.highlight { margin-bottom: 1.25rem; padding: 1.25rem 1.4rem; border-radius: var(--radius-control); background: var(--lime); color: var(--ink); font-size: .9375rem; font-weight: 500; }

.filelist { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.filelist:empty { display: none; }
.fileitem { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-control); }
.fileitem .ext { flex: none; display: grid; place-items: center; min-width: 3rem; height: 2rem; padding-inline: .5rem; border-radius: .5rem; background: var(--ink); color: var(--lime); font-size: .6875rem; font-weight: 600; text-transform: uppercase; }
.fileitem .meta { min-width: 0; flex: 1; }
.fileitem .name { display: block; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fileitem .size { display: block; font-size: .75rem; color: var(--muted); }
.fileitem .remove { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: background-color .2s, color .2s; }
@media (hover: hover) and (pointer: fine) { .fileitem .remove:hover { background: var(--surface-2); color: var(--ink); } }

/* ============================ ПРАВИЛА И СОГЛАСИЕ ============================ */
.rules { padding: 1.5rem; border-radius: var(--radius-control); background: var(--surface); }
.rules b { display: block; font-size: .9375rem; margin-bottom: .75rem; }
.rules li { position: relative; padding-left: 1.1rem; font-size: .875rem; color: var(--muted); margin-bottom: .4rem; }
.rules li::before { content: ""; position: absolute; left: 0; top: .55em; width: .3rem; height: .3rem; border-radius: 50%; background: var(--lime-deep); }

.check { display: flex; align-items: flex-start; gap: .75rem; margin-top: 1.5rem; cursor: pointer; }
.check input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--lime-deep); }
.check span { font-size: .9375rem; }
.check.is-invalid span { color: var(--danger); }

/* ============================ ОТПРАВКА ============================ */
.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; border-radius: var(--radius-pill); font-size: 1.0625rem; font-weight: 500; line-height: 1; padding: 1.15rem 2rem; transition: transform .3s var(--ease), background-color .3s, opacity .2s; }
.btn-primary { background: var(--lime); color: var(--ink); }
.btn[disabled] { opacity: .55; cursor: progress; }
@media (hover: hover) and (pointer: fine) { .btn-primary:not([disabled]):hover { background: var(--lime-deep); transform: translateY(-2px); } }
.submit-note { font-size: .875rem; color: var(--muted); }
.submit-note.is-error { color: var(--danger); }

/* ============================ УСПЕХ ============================ */
.done { display: none; padding: 3rem 2rem; border-radius: var(--radius-card); background: var(--ink); color: #fff; text-align: center; }
.done[data-show="1"] { display: block; }
.done h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 600; }
.done p { margin-top: 1rem; color: rgba(255, 255, 255, .68); max-width: 44ch; margin-inline: auto; }
.done .num { display: inline-block; margin-top: 1.5rem; padding: .6rem 1.1rem; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .1); font-size: .875rem; }

.footer { padding-block: 3rem 2.5rem; margin-top: 4rem; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--subtle); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================ ТЕЛЕФОН ============================
   На узком экране главная беда — расстояние до первого вопроса: пять
   карточек типа стопкой отодвигали его почти на полтора экрана. Поэтому
   здесь не «уменьшаем всё подряд», а сокращаем путь до сути и увеличиваем
   то, во что нужно попасть пальцем. */
@media (max-width: 640px) {
  .brand { padding-block: .5rem; }
  .intro { padding-block: 2.25rem 1.75rem; }
  .intro p { margin-top: .9rem; font-size: 1rem; }
  .eyebrow { margin-bottom: .9rem; }

  /* Карточка типа: та же информация, но на треть ниже. */
  .types { gap: .5rem; margin-bottom: 2.25rem; }
  .type { padding: .9rem 3.25rem .9rem 1rem; border-radius: .875rem; }
  .type b { font-size: .9375rem; padding-right: 0; }
  .type span { margin-top: .15rem; font-size: .8125rem; }
  .type-check { top: 50%; right: 1rem; transform: translateY(-50%); width: 1.375rem; height: 1.375rem; }

  .block { padding-block: 2rem; }
  .block-head { margin-bottom: 1.5rem; }
  .fields { gap: 1.25rem; }

  /* Кнопки — во всю ширину: попасть в кнопку на 177 px пальцем сложнее,
     чем кажется на макете. */
  .more { padding: 1.15rem; }
  .more-head { flex-direction: column; align-items: stretch; gap: .9rem; }
  .more-toggle { justify-content: center; padding-block: .85rem; }
  .submit-row { flex-direction: column; align-items: stretch; gap: .75rem; }
  .submit-row .btn { width: 100%; }
  .submit-note { text-align: center; }

  .dropzone { padding: 1.75rem 1.25rem; }
  .dropzone b { font-size: .9375rem; }

  /* Цели нажатия: галочки и крестик удаления доводим до пальца. */
  .check { gap: .65rem; padding-block: .35rem; }
  .check input { width: 1.5rem; height: 1.5rem; margin-top: 0; }
  .fileitem .remove { width: 2.5rem; height: 2.5rem; }
  .footer { flex-direction: column; gap: .75rem; padding-block: 2.25rem 2rem; }
  .footer a { display: inline-block; padding-block: .6rem; }

  .rules { padding: 1.25rem; }
  .done { padding: 2.25rem 1.25rem; }
}

/* Совсем узкие экраны: 320 px всё ещё встречаются. */
@media (max-width: 360px) {
  .type { padding-right: 3rem; }
  .progress-track { width: 3.5rem; }
  .hintbox li { font-size: .75rem; }
}