/* настоящая форма Tilda — спрятана, но живая. Не удалять. */
  #rec2393694253 {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    max-height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #rec2393694253 .t396,
  #rec2393694253 .t396__artboard,
  #rec2393694253 .t396__carrier,
  #rec2393694253 .t396__filter {
    width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    overflow: hidden !important;
  }

  #tt-request-block.tt-request-block {
    --cold: #dcdcdc;
    --muted: rgba(220, 220, 220, .58);
    --hint: rgba(220, 220, 220, .66);  /* плейсхолдер: контраст 4.5:1 к фону */
    --accent: #ff5c17;
    --alert: #ff8a5c;                  /* текст ошибки: тот же оранжевый,
                                          осветлён до контраста 4.8:1 */
    --line: #9a9a9a;   /* вертикальные линии: светлые и почти прозрачные */
    --line-op: .3;
    --field-fill: rgba(220, 220, 220, .08);        /* поля: полупрозрачная заливка */
    --field-fill-hover: rgba(220, 220, 220, .12);
    --field-fill-focus: rgba(220, 220, 220, .18);
    --tt-request-bg: #3b3b3b;
    --tt-request-mobile-line: rgba(220, 220, 220, .045);
    --tt-request-mobile-rule: rgba(220, 220, 220, .18);
    --tt-request-mobile-dash: rgba(220, 220, 220, .28);
    --tt-request-scale: 1;

    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: calc(560px * var(--tt-request-scale)) !important;
    min-width: 0 !important;
    min-height: calc(560px * var(--tt-request-scale)) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #3b3b3b !important;
    color: var(--cold) !important;
    overflow: hidden !important;
    isolation: isolate !important;
    box-sizing: border-box !important;
  }

  #tt-request-block .tt-request-stage {
    position: absolute !important;
    z-index: 1 !important;
    left: 50% !important;
    top: 0 !important;
    width: 1200px !important;
    height: 560px !important;
    margin-left: -600px !important;
    transform: scale(var(--tt-request-scale)) !important;
    transform-origin: top center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #tt-request-block .tt-request-grid-lines {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    width: 1200px !important;
    height: 560px !important;
    pointer-events: none !important;
  }

  #tt-request-block .tt-request-grid-lines span {
    position: absolute !important;
    top: 0 !important;
    width: 0.5px !important;
    height: 100% !important;
    background: var(--line) !important;
    opacity: var(--line-op) !important;
  }

  #tt-request-block .tt-request-grid-lines span:nth-child(1) { left: 300px !important; }
  #tt-request-block .tt-request-grid-lines span:nth-child(2) { left: 310px !important; }
  #tt-request-block .tt-request-grid-lines span:nth-child(3) { left: 600px !important; }
  #tt-request-block .tt-request-grid-lines span:nth-child(4) { left: 610px !important; }
  #tt-request-block .tt-request-grid-lines span:nth-child(5) { left: 900px !important; }
  #tt-request-block .tt-request-grid-lines span:nth-child(6) { left: 910px !important; }

  /* ---------- заголовок ---------- */
  #tt-request-block .tt-request-title {
    position: absolute !important;
    z-index: 2 !important;
    left: 68px !important;
    top: 43px !important;
    width: 400px !important;
    height: 200px !important;
    font-family: "Space Mono", monospace !important;
    font-size: 82px !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: .82px !important;
    color: var(--cold) !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
  }

  #tt-request-block .tt-request-title span {
    position: absolute !important;
    display: block !important;
    white-space: pre !important;
  }

  #tt-request-block .tt-request-word { opacity: 0; }
  #tt-request-block .tt-request-word.is-revealed { opacity: 1; }
  #tt-request-block .tt-request-word--service { left: 0; top: 0; }        /* Figma 103.5 / 43 */
  #tt-request-block .tt-request-word--request { left: -2px; top: 78px; }  /* Figma 101.5 / 121 */

  @media (prefers-reduced-motion: reduce) {
    #tt-request-block .tt-request-word { opacity: 1; }
  }

  #tt-request-block .tt-request-diagram {
    position: absolute !important;
    z-index: auto !important;
    left: 61.5px !important;
    top: 178px !important;
    width: 363px !important;
    height: 226px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #tt-request-block .tt-request-diagram::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border: 1px dashed rgba(255, 255, 255, .26);
    box-sizing: border-box;
    pointer-events: none;
  }

  /* Бокс 450x192 в координатах Figma (22.5 / 196 в сцене), то есть
     -39 / +18 относительно пунктирной рамки. Кадрирование cover —
     как в макете.
     Картинка 1268x542 обрезана вплотную по объекту, её соотношение
     2.339 против 2.344 у бокса — cover срезает меньше пикселя.
     Сейчас файл вшит в код как data URI, чтобы не зависеть от
     хостинга. Для продакшена лучше загрузить его в Тильду и
     заменить src на ссылку: браузер будет кешировать картинку
     отдельно, а блок похудеет на сто килобайт. */
  #tt-request-block .tt-request-diagram img {
    position: absolute;
    z-index: 3;
    left: -39px;
    top: 18px;
    width: 450px;
    height: 192px;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
  }

  #tt-request-block .tt-request-diagram-meta {
    position: absolute;
    z-index: 5;
    left: 130.5px;   /* Figma 192 / 367 в сцене, минус угол рамки */
    top: 189px;
    display: grid;
    grid-template-columns: 75px 51px max-content;   /* шаги колонок
                            взяты из макета, а не выровнены по тексту */
    column-gap: 0;
    font-family: "DotGothic16", sans-serif;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: .1px;
    color: var(--cold);
    text-transform: uppercase;
  }

  #tt-request-block .tt-request-diagram-meta span {
    display: block;
    white-space: nowrap;
  }

  /* =========================================================
     ФОРМА
     колонка 608 = подпись 70 + отступ 16 + поле 522
     ========================================================= */

  #tt-request-block .tt-request-ui {
    position: absolute !important;
    z-index: 4 !important;
    left: 524px !important;
    top: 96px !important;
    width: 608px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-family: "Space Mono", monospace !important;
    font-weight: 700 !important;
    color: var(--cold) !important;
  }

  /* Плоская подложка состояния успеха — та же геометрия и заливка, что у полей. */
  #tt-request-block .tt-request-done {
    width: 100% !important;
    padding: 28px 32px 30px !important;
    background: var(--field-fill) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    font-family: "Manrope", sans-serif !important;
    box-sizing: border-box !important;
  }

  #tt-request-block .tt-request-done-title {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-family: "Space Mono", monospace !important;
    font-weight: 700 !important;
  }

  #tt-request-block .tt-request-done-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    line-height: 0 !important;
  }

  #tt-request-block .tt-request-done-badge svg {
    display: block !important;
  }

  #tt-request-block .tt-request-done-text {
    font-family: "Manrope", sans-serif !important;
    font-weight: 400 !important;
  }

  #tt-request-block .tt-request-done-text a {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    text-decoration-color: currentColor !important;
  }

  #tt-request-block .tt-request-done-title:focus {
    outline: 0 !important;
  }

  #tt-request-block .tt-request-again {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    border: 1px solid var(--cold) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--cold) !important;
    -webkit-text-fill-color: var(--cold) !important;
    font-family: "Space Mono", monospace !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    overflow: hidden !important;
    isolation: isolate !important;
    transition: color .22s ease, -webkit-text-fill-color .22s ease !important;
    box-sizing: border-box !important;
  }

  #tt-request-block .tt-request-again::before {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    left: 0 !important;
    top: 50% !important;
    width: 100% !important;
    height: 1px !important;
    background: var(--accent) !important;
    opacity: 0 !important;
    transform: translateY(-50%) !important;
    transition: height .34s cubic-bezier(.2, 1, .2, 1), opacity .18s ease !important;
  }

  #tt-request-block .tt-request-again span {
    position: relative !important;
    z-index: 1 !important;
  }

  #tt-request-block .tt-request-again-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 .68em !important;
    width: .68em !important;
    height: .68em !important;
    overflow: visible !important;
    font-size: 1.4em !important;
    transform: translateY(2px) !important;
    transition: transform .24s cubic-bezier(.2, 1, .2, 1) !important;
  }

  #tt-request-block .tt-request-again-arrow svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
  }

  #tt-request-block .tt-request-again-arrow path {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.5 !important;
    stroke-linecap: square !important;
    stroke-linejoin: miter !important;
    vector-effect: non-scaling-stroke !important;
  }

  #tt-request-block .tt-request-again:hover,
  #tt-request-block .tt-request-again:focus-visible {
    border-color: var(--cold) !important;
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
  }

  #tt-request-block .tt-request-again:hover::before,
  #tt-request-block .tt-request-again:focus-visible::before {
    height: 100% !important;
    opacity: 1 !important;
  }

  #tt-request-block .tt-request-again:hover .tt-request-again-arrow,
  #tt-request-block .tt-request-again:focus-visible .tt-request-again-arrow {
    transform: translate(6px, 2px) !important;
  }

  #tt-request-block .tt-f {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 70px 522px !important;
    column-gap: 16px !important;
    align-items: start !important;
    margin: 0 0 30px !important;
    padding: 0 !important;
  }

  #tt-request-block .tt-f-label {
    display: block !important;
    margin: 0 !important;
    padding: 11px 0 0 !important;
    font-family: "Space Mono", monospace !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    letter-spacing: .04em !important;
    text-align: right !important;
    text-transform: uppercase !important;
    color: var(--cold) !important;
  }

  #tt-request-block .tt-f-label i {
    font-style: normal !important;
    color: var(--muted) !important;
  }

  #tt-request-block .tt-f.is-hidden { display: none !important; }

  #tt-request-block .tt-f-control {
    position: relative !important;
    min-width: 0 !important;
  }

  #tt-request-block .tt-request-ui input,
  #tt-request-block .tt-request-ui textarea {
    display: block !important;
    width: 100% !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: var(--field-fill) !important;
    box-shadow: none !important;
    resize: none !important;
    color: var(--cold) !important;
    font-family: "Manrope", sans-serif !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    transition: border-color .18s ease, background-color .18s ease !important;
  }

  #tt-request-block .tt-request-ui textarea {
    height: 92px !important;
    padding-top: 10px !important;
  }

  #tt-request-block .tt-request-ui input::placeholder,
  #tt-request-block .tt-request-ui textarea::placeholder {
    color: var(--hint) !important;
    opacity: 1 !important;
  }

  #tt-request-block .tt-request-ui input:hover,
  #tt-request-block .tt-request-ui textarea:hover {
    background: var(--field-fill-hover) !important;
  }

  #tt-request-block .tt-request-ui input:focus,
  #tt-request-block .tt-request-ui textarea:focus {
    background: var(--field-fill-focus) !important;
    caret-color: var(--accent) !important;
  }

  /* автозаполнение Chrome не должно заливать поле синим.
     #484848 — это и есть --field-fill, положенная на фон блока */
  #tt-request-block .tt-request-ui input:-webkit-autofill {
    -webkit-text-fill-color: var(--cold) !important;
    -webkit-box-shadow: 0 0 0 1000px #484848 inset !important;
    caret-color: var(--accent) !important;
  }

  /* ---------- ошибка поля: индикация ---------- */

  #tt-request-block .tt-f-err {
    /* Errors occupy the margin below each input instead of growing the
       row. This keeps SEND and the privacy copy at fixed coordinates. */
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Space Mono", monospace !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .02em !important;
    color: var(--accent) !important;
  }

  #tt-request-block .tt-f-err::before {
    content: "ERR · ";
    color: var(--accent);
  }

  #tt-request-block .tt-f.is-invalid input,
  #tt-request-block .tt-f.is-invalid textarea {
    background: rgba(255, 92, 23, .12) !important;
  }

  /* ---------- кнопка: тот же прямоугольник, что и поля ---------- */

  #tt-request-block .tt-request-submit {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--field-fill) !important;
    color: var(--cold) !important;
    -webkit-text-fill-color: var(--cold) !important;
    font-family: "Space Mono", monospace !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: color .22s ease, -webkit-text-fill-color .22s ease !important;
  }

  #tt-request-block .tt-request-submit::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: var(--accent);
    opacity: 0;
    transform: translateY(-50%);
    transition: height .34s cubic-bezier(.2, 1, .2, 1), opacity .18s ease;
  }

  #tt-request-block .tt-request-submit span { position: relative; z-index: 2; }

  #tt-request-block .tt-request-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 .68em;
    width: .68em;
    height: .68em;
    overflow: visible;
    font-size: 1.4em;
    line-height: 1;
    transform: translateY(2px);
    transition: transform .24s cubic-bezier(.2, 1, .2, 1);
  }

  #tt-request-block .tt-request-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  #tt-request-block .tt-request-arrow path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: square;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
  }

  #tt-request-block .tt-request-submit:hover,
  #tt-request-block .tt-request-submit:focus-visible {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
  }

  #tt-request-block .tt-request-submit:hover::before,
  #tt-request-block .tt-request-submit:focus-visible::before {
    height: 100%;
    opacity: 1;
  }

  #tt-request-block .tt-request-submit:hover .tt-request-arrow,
  #tt-request-block .tt-request-submit:focus-visible .tt-request-arrow {
    transform: translate(6px, 2px);
  }

  #tt-request-block .tt-request-submit[data-busy="true"] {
    pointer-events: none !important;
    opacity: .6 !important;
  }

  @media (max-width: 980px) {

  #tt-requ…1491 tokens truncated…elative !important;
      left: auto !important;
      top: auto !important;
      width: 100% !important;
      height: auto !important;
      margin: 0 0 28px !important;
      font-size: 40px !important;
      letter-spacing: .4px !important;
    }

    #tt-request-block .tt-request-title span {
      position: relative !important;
      left: auto !important;
      top: auto !important;
    }

    #tt-request-block .tt-request-ui {
      position: relative !important;
      left: auto !important;
      top: auto !important;
      width: 100% !important;
    }

    /* подписи остаются слева и на узких экранах, колонка просто уже */
    #tt-request-block .tt-f {
      grid-template-columns: 64px minmax(0, 1fr) !important;
      column-gap: 12px !important;
      margin-bottom: 30px !important;
    }

    #tt-request-block .tt-f-label {
      padding-top: 14px !important;
      font-size: 12px !important;
    }

    #tt-request-block .tt-request-ui input,
    #tt-request-block .tt-request-ui textarea {
      height: 44px !important;      /* палец, а не курсор */
      font-size: 16px !important;   /* iOS не зумит от 16px */
    }

    #tt-request-block .tt-request-ui textarea { height: 120px !important; }

    #tt-request-block .tt-request-done {
      margin-left: 0 !important;
      width: 100% !important;
      padding: 22px 18px 20px !important;
    }
  }

/* Светлая версия: композиция v2 без изменений, меняются только цвета темы. */
#tt-request-block.tt-request-block.tt-request-block--light {
  --cold: #303030;
  --muted: rgba(48, 48, 48, .58);
  --hint: rgba(48, 48, 48, .66);
  --alert: #d83f00;
  --line: #e3e3e3;
  --line-op: 1;
  --field-fill: rgba(48, 48, 48, .055);
  --field-fill-hover: rgba(48, 48, 48, .085);
  --field-fill-focus: rgba(48, 48, 48, .12);
  --tt-request-bg: #dcdcdc;
  --tt-request-mobile-line: rgba(48, 48, 48, .09);
  --tt-request-mobile-rule: rgba(48, 48, 48, .18);
  --tt-request-mobile-dash: rgba(48, 48, 48, .28);
  background: #dcdcdc !important;
  color: var(--cold) !important;
}
#tt-request-block.tt-request-block.tt-request-block--light .tt-request-done-links a,
#tt-request-block.tt-request-block.tt-request-block--light .tt-request-done-ref {
  border-bottom-color: rgba(48, 48, 48, .28) !important;
}

/* Desktop recovery for the reference two-column composition. */
@media (min-width: 981px) {
  #tt-request-block .tt-request-title {
    position: absolute !important;
    left: 68px !important;
    top: 43px !important;
    width: 400px !important;
    height: 200px !important;
    margin: 0 !important;
    font-size: 82px !important;
    letter-spacing: .82px !important;
  }

  #tt-request-block .tt-request-title span { position: absolute !important; }
  #tt-request-block .tt-request-word--service { left: 0 !important; top: 0 !important; }
  #tt-request-block .tt-request-word--request { left: -2px !important; top: 78px !important; }

  #tt-request-block .tt-request-ui {
    position: absolute !important;
    left: 524px !important;
    top: 96px !important;
    width: 608px !important;
  }
}