/* ============================================================
   Зворотний зв'язок (FR-507)

   Сторінка належить напряму «Маршрут» (DEC-015): пін в надзаголовку,
   пунктирна лінія як сполучна тканина, вохра — лише на дії.
   Тут вона розв'язує одну задачу: показати, що лист прочитають,
   і водночас відвести тих, кому лист не потрібен.
   ============================================================ */

.contact{max-width:64rem;margin:0 auto var(--sp-8)}

.contact__head{margin:var(--sp-6) 0 var(--sp-6);max-width:38rem}
.contact__head h1{margin:var(--sp-2) 0 var(--sp-3)}
.contact__lead{margin:0;color:var(--muted);font-size:1.05rem;line-height:1.55}

.contact__grid{display:grid;gap:var(--sp-6)}
@media (min-width:900px){
  .contact__grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--sp-7);align-items:start}
}

/* ---- Форма ---- */
.contact__form{display:grid;gap:var(--sp-4)}
.contact__pair{display:grid;gap:var(--sp-4)}
@media (min-width:560px){ .contact__pair{grid-template-columns:1fr 1fr} }

.contact__form .field-row{margin:0}
.contact__form label{display:block;font-weight:600;font-size:.92rem;margin-bottom:var(--sp-15)}
.contact__form textarea.field{min-height:11rem}

/* Підказка змінюється разом із темою звернення — тому вона під полем,
   а не в плейсхолдері: плейсхолдер зникає, щойно почали писати. */
.contact__hint{margin:var(--sp-2) 0 0;font-size:.85rem;color:var(--muted);
               padding-left:var(--sp-3);border-left:2px solid var(--accent-soft)}

.contact__send{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
               padding-top:var(--sp-2);border-top:1px dashed var(--line)}
.contact__privacy{font-size:.82rem}

.contact__alert{margin:0 0 var(--sp-4);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);
                background:rgba(178,58,58,.08);border:1px solid rgba(178,58,58,.35);color:var(--danger)}

/* ---- Надіслано ---- */
.contact__done{display:grid;justify-items:start;gap:var(--sp-3)}
.contact__done h2{margin:0;font-size:1.5rem}
.contact__done p{margin:0;max-width:36em}
.contact__done .pin{color:var(--accent)}

/* ---- Розвилка праворуч ----
   Пунктирна лінія з пінами — та сама сигнатура, що й у кроках плану:
   це справді маршрут, просто не поїздки, а звернення. */
.contact__aside{padding:var(--sp-5);background:var(--surface-2);
                border:1px solid var(--line);border-radius:var(--r-md)}
.contact__aside-title{margin:0 0 var(--sp-4);font-size:1.05rem}

.contact__routes{list-style:none;margin:0;padding:0 0 0 var(--sp-5);position:relative;display:grid;gap:var(--sp-5)}
.contact__routes::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;
                         border-left:2px dashed var(--line)}
.contact__routes li{position:relative}
.contact__routes li::before{content:"";position:absolute;left:calc(-1 * var(--sp-5));top:6px;
                            width:12px;height:12px;border-radius:50%;
                            background:var(--surface);border:2px solid var(--brand)}
.contact__routes h3{margin:0 0 var(--sp-1);font-size:.98rem}
.contact__routes p{margin:0 0 var(--sp-15);font-size:.88rem;color:var(--muted);line-height:1.5}
.contact__routes a{font-size:.88rem;font-weight:600}