/* Страница «Контроль расхода топлива».
   Компоненты повторяют главную vektor-it.ru: значения сняты с неё —
   карточки, пакеты, шаги, FAQ, таблицы, форма, ритм блоков.
   Всё заскоплено под .page-tp, чтобы не задеть остальной сайт.
   Переменные и .wrap/.btn/.agree берутся из style.css. */

.page-tp{color:var(--ink);font-size:16px;line-height:1.55}

/* ---------- ритм блоков: как на главной ---------- */
.page-tp section{padding:16px 0}
.page-tp>section:nth-of-type(odd){background:#fff}
.page-tp>section:nth-of-type(even){background:var(--paper-dim)}

/* ---------- типографика главной ---------- */
.page-tp h1,.page-tp h2,.page-tp h3{font-family:"PT Sans Narrow","PT Sans",sans-serif;
  line-height:1.15;font-weight:700}
.page-tp h1{font-size:clamp(28px,4vw,44px);color:var(--brand-deep);margin:0 0 16px}
.page-tp h2{font-size:clamp(24px,3vw,34px);color:var(--brand-deep);margin:0 0 16px}
.page-tp h3{font-size:20px;color:var(--ink);margin:0 0 8px}
.page-tp p{margin:0 0 10px}
.page-tp .muted{color:var(--ink-soft);font-size:14px}
.page-tp a{color:var(--brand)}
/* Кнопки-ссылки: .page-tp a тяжелее .btn по весу селектора и красила
   текст на оранжевой кнопке в брендовый синий. Возвращаем белый. */
.page-tp a.btn,.page-tp a.btn:hover,.page-tp a.fr-cta,.page-tp a.fr-cta:hover{color:#fff}
.page-tp a.btn-outline{color:var(--brand)}
.page-tp a.btn-outline:hover{color:#fff}
/* длина строки как у .seo на главной */
.page-tp>section>.wrap>p{max-width:820px}
.page-tp .seo{max-width:820px}
.page-tp .seo p{color:var(--ink-soft);font-size:15px}

/* ---------- первый экран: график во всю ширину, текст под ним ---------- */
.page-tp section.first{padding:0 0 26px}
.hero-band{background:var(--paper-dim);border-bottom:1px solid var(--line);
  padding:22px 20px 24px;margin-bottom:26px}
.hero-band>*{max-width:var(--wrap,1160px);margin:0 auto}
.page-tp .tp-lead h1{max-width:21ch}
.page-tp .tp-lead .bullets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px 30px;margin:4px 0 22px}
.page-tp .bullets{list-style:none;margin:0 0 22px;padding:0}
.page-tp .bullets li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:17px}
/* на главной пункты в одну строку и центрируются; здесь они по три строки —
   иконка должна стоять у первой строки, а не посередине абзаца */
.page-tp .ico{width:22px;height:22px;flex:0 0 22px;margin-top:2px;
  stroke:var(--brand);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- карточки и сетки ---------- */
.page-tp .card{border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:#fff}
.page-tp .card p:last-child{margin-bottom:0}
.page-tp .card .ph{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:8px;background:var(--paper-dim);margin:0 0 12px}
.page-tp .feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.page-tp .row3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}

/* ---------- пакеты и цены ---------- */
/* На главной пакеты стоят в ряд. Здесь — друг под другом: в первом пакете
   таблица цен на шесть строк, в две колонки она нечитаема. */
.page-tp .packs{display:grid;grid-template-columns:1fr;gap:18px}
.page-tp .pack{border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  background:#fff;display:flex;flex-direction:column}
.page-tp .pack-head{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.page-tp .price{display:inline-block;color:var(--signal);font-weight:700;font-size:18px;margin-top:6px;
  font-variant-numeric:tabular-nums}
.page-tp .pack ul{margin:8px 0 14px 18px}
.page-tp .pack li{margin-bottom:8px;font-size:15px}
.page-tp .pack .btn{margin-top:auto;align-self:flex-start}
.page-tp .badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.page-tp .badge{display:inline-flex;align-items:center;gap:6px;background:#eef3f7;
  color:var(--brand-deep);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600}
.page-tp .badge .ico{width:16px;height:16px;flex:0 0 16px;margin-top:0}

/* ---------- таблицы ---------- */
.page-tp .fee{width:100%;border-collapse:collapse;margin-top:8px;font-size:15px}
.page-tp .fee th,.page-tp .fee td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.page-tp .fee th{background:var(--paper-dim);color:var(--brand-deep);font-family:"PT Sans Narrow",sans-serif}
.page-tp .fee td:last-child,.page-tp .fee th:last-child{width:1%;white-space:nowrap}
.page-tp .fee td:last-child{font-variant-numeric:tabular-nums;font-weight:700}

/* ---------- шаги ---------- */
/* номер рисует счётчик, а не отдельный div: кружок тот же, что .stepnum на главной */
.page-tp .steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;counter-reset:tp}
.page-tp .step{border:1px solid var(--line);border-radius:var(--radius);padding:0;
  background:#fff;position:relative;overflow:hidden}
.page-tp .step .ph{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  background:var(--paper-dim)}
.page-tp .step-txt{padding:16px 18px 18px}
/* номер шага лежит кружком на фотографии, а не отдельной строкой над текстом */
.page-tp .step::before{counter-increment:tp;content:counter(tp);position:absolute;left:12px;top:12px;
  width:38px;height:38px;background:var(--brand);color:#fff;border-radius:50%;
  font-family:"PT Sans Narrow",sans-serif;font-size:20px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(10,28,45,.4)}

/* ---------- скриншоты платформы ---------- */
.page-tp .shot-img{display:block;width:100%;height:200px;object-fit:cover;object-position:top left;
  border:1px solid var(--line);border-radius:8px;background:var(--paper-dim);margin:0 0 12px}

/* ---------- FAQ ---------- */
.page-tp details{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;
  background:#fff;padding:0}
.page-tp summary{padding:16px 46px 16px 18px;font-weight:700;cursor:pointer;list-style:none;
  position:relative;font-size:16px;color:var(--ink)}
.page-tp summary::-webkit-details-marker{display:none}
.page-tp summary::after{content:"+";position:absolute;right:18px;top:13px;font-size:22px;color:var(--brand)}
.page-tp details[open]>summary::after{content:"\2013"}
.page-tp details p{padding:0 18px 16px;margin:0;color:var(--ink-soft);font-size:15px}

/* ---------- форма: финальный блок целиком под градиентом, как на главной ---------- */
.page-tp #request{background:linear-gradient(135deg,var(--brand-deep),var(--brand));color:#fff}
.page-tp #request h2{color:#fff}
.page-tp .cta-band{background:none;border-radius:var(--radius);padding:34px 0 28px;margin:0;text-align:center}
.page-tp .cta-band>p{color:#dcebf6;max-width:70ch;margin:0 auto 18px}
.page-tp #request form{margin:0 auto;max-width:760px;text-align:left}
.page-tp .form-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.page-tp .form-row input,.page-tp .form-row select{flex:1 1 200px;min-width:0;padding:13px;
  border-radius:var(--radius);border:0;font-size:16px;font-family:inherit;background:#fff}
.page-tp .form-row input:focus,.page-tp .form-row select:focus{outline:2px solid #fff;outline-offset:1px}
.page-tp .form-row .btn{flex:0 0 auto}
/* .agree рассчитано на тёмный фон; ссылку красим явно — .page-tp a тяжелее .agree a */
.page-tp #request .agree{color:#cfe3f2;max-width:760px;margin:0 auto}
.page-tp #request .agree a{color:#fff;text-decoration:underline}

/* ---------- схема «как система видит каждый литр» ---------- */
/* Объекты — снимки, подписи и содержимое экранов — код: так текст
   остаётся резким, а экраны можно поправить без перерисовки картинок. */
.page-tp .chain{display:flex;align-items:flex-start;justify-content:center;gap:12px;
  padding:22px 14px 16px;min-width:880px;
  background:linear-gradient(180deg,#f4f8fb 0%,#eef4f9 100%);
  border:1px solid #e0e9f0;border-radius:16px;margin:2px 0 10px}
.page-tp .ch{margin:0;flex:0 0 auto;text-align:center;height:206px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.page-tp .ch-pic{position:relative;display:inline-block;line-height:0}
.page-tp .ch-pic img:not(.ch-alert){display:block;width:auto}
.page-tp .ch-tank img{height:132px}
.page-tp .ch-unit img{height:118px}
.page-tp .ch-screen img{height:132px}
.page-tp .ch-phone img:not(.ch-alert){height:150px}
.page-tp .ch figcaption{margin-top:10px;line-height:1.25}
.page-tp .ch figcaption b{display:block;font-size:14.5px;color:var(--brand-deep)}
.page-tp .ch figcaption span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.page-tp .ch-arrow{flex:0 0 auto;width:60px;height:24px;margin-top:85px;
  fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.page-tp .ch-radio{flex:0 0 auto;width:auto;height:64px;margin-top:65px}

/* экран монитора: прямоугольник измерен по снимку */
.page-tp .ch-chart{position:absolute;left:4.27%;top:4.47%;width:91.79%;height:66.82%}
/* экран телефона */
/* снимок экрана приложения ложится ровно в прямоугольник экрана телефона */
.page-tp .ch-alert{position:absolute;left:6.93%;top:2.96%;width:85.28%;height:91.97%;
  object-fit:cover;object-position:top center;border-radius:9px}
@media(max-width:700px){.page-tp .chain{min-width:880px}}

/* ---------- тарировка: текст и снимок станции ---------- */
.page-tp .tp-split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:30px;align-items:start}
.page-tp .tp-shot{margin:0}
.page-tp .tp-shot img{display:block;width:100%;height:auto;border-radius:12px;
  border:1px solid var(--line);background:#fff}
.page-tp .tp-shot figcaption{margin-top:10px;font-size:13px;line-height:1.4;color:var(--ink-soft)}
@media(max-width:860px){
  .page-tp .tp-split{grid-template-columns:1fr;gap:20px}
  .page-tp .tp-shot img{max-width:420px}
}

/* ---------- схема ---------- */
/* схема «как система видит каждый литр» — баннером во всю ширину */
.page-tp .scheme{display:block;width:100%;height:auto;max-width:none;
  background:linear-gradient(180deg,#f4f8fb 0%,#eef4f9 100%);
  border:1px solid #e0e9f0;border-radius:16px;padding:18px 10px;margin:2px 0 10px}
.sc-shape{fill:#fff;stroke:var(--brand);stroke-width:2.5}
.sc-liquid{fill:var(--brand);opacity:.16}
.sc-fill-b{fill:var(--brand)}
.sc-fill-s{fill:var(--signal)}
.sc-bar{fill:var(--brand);opacity:.22}
.sc-alert{fill:var(--signal);opacity:.12;stroke:var(--signal);stroke-width:1.5}
.sc-ant{stroke:var(--brand);stroke-width:2.5;stroke-linecap:round}
.sc-chart{fill:none;stroke:var(--brand);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.sc-arrow{stroke:var(--brand);stroke-width:2.5;stroke-linecap:round}
.sc-dash{stroke-dasharray:7 5}
.sc-wave{fill:none;stroke:var(--brand);stroke-width:2;opacity:.45;stroke-linecap:round}
.sc-t{font:700 18px "PT Sans",Arial,sans-serif;fill:var(--brand-deep);text-anchor:middle}
.sc-s{font:13.5px "PT Sans",Arial,sans-serif;fill:#7a8694;text-anchor:middle}
.sc-bang{font:700 14px "PT Sans",Arial,sans-serif;fill:#fff;text-anchor:middle}

/* ==================================================================
   Мини-игра «Довезите смену без сливов»
   ================================================================== */
.fr{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 20px 16px}
.fr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:26px;margin-bottom:14px}
.fr-head-tx{min-width:0;max-width:64ch}
.fr-eyebrow{margin:0 0 4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#7a8694}
.fr-h{margin:0 0 8px;font-family:"PT Sans Narrow","PT Sans",sans-serif;font-size:30px;
  line-height:1.1;color:var(--brand-deep)}
.fr-lede{margin:0;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.fr-head-side{flex:none;width:215px;display:flex;flex-direction:column;gap:7px}
.fr-gauge{width:100%;height:10px;border-radius:999px;background:#e6ecf2;overflow:hidden}
.fr-gauge span{display:block;height:100%;width:76%;background:var(--brand);border-radius:999px;
  transition:width .18s linear}
.fr-gauge span.is-low{background:#b23b2a}
.fr-stat{font-size:13px;font-weight:700;color:var(--brand-deep);font-variant-numeric:tabular-nums}
.fr-keys{font-size:12.5px;color:#7a8694}

.fr-pick{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.fr-car{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:#fff;
  border-radius:999px;padding:7px 15px 7px 11px;font:inherit;font-size:13.5px;font-weight:700;
  color:var(--ink-soft);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.fr-car svg{width:34px;height:17px;flex:0 0 34px;fill:currentColor}
.fr-car:hover{border-color:var(--brand);color:var(--brand)}
.fr-car.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.fr-car:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.fr-best{margin:0;font-size:12.5px;color:var(--brand-deep);font-weight:700}
.fr-best[hidden]{display:none}

.fr-stage{position:relative;border:1px solid #dfe7ee;border-radius:12px;overflow:hidden;
  touch-action:manipulation}
.fr-stage:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.fr-canvas{display:block;width:100%;height:230px}

.fr-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;padding:16px;text-align:center;background:rgba(244,249,252,.86)}
.fr-overlay[hidden]{display:none}
.fr-over-t{margin:0;font-family:"PT Sans Narrow","PT Sans",sans-serif;font-size:25px;
  line-height:1.15;color:var(--brand-deep)}
.fr-over-s{margin:0 0 12px;font-size:14px;color:var(--ink-soft);max-width:48ch}
.fr-btn{border:0;background:var(--signal);color:#fff;border-radius:var(--radius);
  padding:11px 24px;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.fr-btn:hover{background:var(--signal-deep)}
.fr-btn:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.fr-skip{margin-top:8px;border:0;background:none;font:inherit;font-size:13px;
  color:var(--brand);text-decoration:underline;cursor:pointer}
.fr-skip[hidden]{display:none}

.fr-meta{margin:10px 0 0;font-size:13px;color:#7a8694}
.fr-sum{margin-top:14px;background:#eef5fa;border-radius:12px;padding:14px 16px;font-size:14.5px}
.fr-sum[hidden]{display:none}
.fr-sum b{display:block;color:var(--brand-deep);margin-bottom:3px}
.fr-sum span{color:var(--ink-soft)}
.fr-cta{display:inline-block;margin-top:10px;background:var(--signal);color:#fff;font-weight:700;
  border-radius:var(--radius);padding:10px 18px;text-decoration:none;font-size:14.5px}
.fr-cta:hover{background:var(--signal-deep)}

/* ---------- адаптив ---------- */
@media(max-width:980px){
  .page-tp .tp-lead .bullets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-tp .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fr-head{flex-direction:column;gap:14px}
  .fr-head-side{width:100%;flex-direction:row;align-items:center;gap:14px}
  .fr-gauge{max-width:220px}
}
@media(max-width:700px){
  .page-tp .tp-lead .bullets{grid-template-columns:1fr}
  .page-tp .feat-grid{grid-template-columns:1fr}
  .hero-band{padding:16px 12px 18px;margin-bottom:22px}
  .fr{padding:16px 12px 12px}
  .fr-h{font-size:24px}
  .fr-canvas{height:186px}
  .fr-head-side{flex-wrap:wrap}
  /* широкая схема на телефоне сплющилась бы до нечитаемой полосы */
  .page-tp .scheme-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .page-tp .scheme{min-width:760px}
}

/* ---------- просмотр скриншотов во весь экран ---------- */
.page-tp .shot-img{cursor:zoom-in}
.page-tp .shot-img:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.lb{position:fixed;inset:0;z-index:1000;background:rgba(10,28,45,.88);
  display:flex;align-items:center;justify-content:center;padding:32px 20px}
.lb[hidden]{display:none}
.lb-fig{margin:0;max-width:1200px;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.lb-pic{display:block;max-width:100%;max-height:80vh;width:auto;height:auto;
  border-radius:10px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.lb-cap{color:#dfe7ee;font-size:14px;text-align:center;max-width:70ch}
.lb-x{position:absolute;top:14px;right:18px;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.lb-x:hover{background:rgba(255,255,255,.24)}
.lb-x:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(max-width:700px){
  .lb{padding:56px 12px 20px}
  .lb-pic{max-height:70vh}
}

/* шаги: пять в ряд, пока карточка шире ~155 px */
@media(max-width:860px){
  .page-tp .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .page-tp .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:470px){
  .page-tp .steps{grid-template-columns:1fr}
}