/* Страница «Маршрут из разрешения» — третья витрина, под запросы о маршруте.
   Общее оформление и общие блоки витрин лежат в landing.css; здесь только то,
   чего на других страницах нет: строчка из выписки и цепочка «выписка → точки →
   кнопка», которой эта страница и объясняет, за что берут деньги. */

/* Заголовок тут длиннее, чем на других витринах: тем же кеглем он разъезжается
   на шесть строк и перестаёт читаться одним взглядом. */
.hero h1{font-size:clamp(29px,3.3vw,52px)}

/* Строчка из настоящей выписки: моноширинная, потому что это цитата документа,
   а не наш текст. Человек должен узнать в ней свою бумагу. */
.cite{display:block;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px;line-height:1.5;color:var(--text);background:var(--soft);
  border:1px solid var(--border);border-left:3px solid var(--brand);border-radius:10px;
  padding:12px 14px;margin:14px 0 0;overflow-wrap:anywhere}
.on-dark .cite{color:#e6ecf7;background:rgba(255,255,255,.06);border-color:var(--ink-line);
  border-left-color:#7aa2ff}

/* Цепочка «что было → что делаем → что видит водитель». Стрелки рисуются
   псевдоэлементом: на телефоне колонка, и стрелка разворачивается вниз. */
.chain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;margin-top:36px}
.chain>div{position:relative;background:var(--page);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px}
.chain>div+div::before{content:"";position:absolute;left:-30px;top:50%;width:16px;height:16px;
  border-top:2px solid #b8c2d4;border-right:2px solid #b8c2d4;transform:translateY(-50%) rotate(45deg)}
.chain .tag{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.chain h3{margin-bottom:8px}
.chain p{color:var(--muted);font-size:15.5px;margin:0}
.chain .done{border-color:#bbf7d0;background:var(--ok-bg)}
.chain .done .tag,.chain .done h3{color:var(--ok)}
.chain .done p{color:#0f5132}
@media(max-width:900px){
  .chain{grid-template-columns:1fr;gap:34px}
  .chain>div+div::before{left:50%;top:-25px;transform:translateX(-50%) rotate(135deg)}
}

/* Что написано на кнопке у водителя. Сама кнопка на витрине не рисуется: живая
   синяя кнопка посреди рассказа выглядит нажимаемой, а нажимать тут нечего. */
.navbtn-cap{color:var(--muted);font-size:13.5px;line-height:1.5;margin:12px 0 0;
  font-family:'JetBrains Mono',ui-monospace,monospace}

/* Обещание первым экраном названо бедами: беда набрана плотнее и белым,
   а строка под ней объясняет, откуда она берётся, и потому тише. */
.promise b{display:block;color:#fff;font-weight:600}
.promise .fix{display:block;margin-top:3px;color:#9fadc4;font-size:15px}

/* «в один клик» — это одно обещание, и разрывать его переносом нельзя:
   на строке «клик» остаётся висеть одно слово, а обещание читается дважды. */
.hero h1 em{white-space:nowrap}