/* ============================================================
   T&W - блоки «Проверьте нас до покупки» (28.10.2026):
   график лучших точек в открытых источниках и билеты-обещания по процессу.
   Тексты и цифры - prodazhi/pozicionirovanie-2026-10/06-publichnaya-podacha.md
   (только канон). Подключается на proverte, compare, franchise-home.
   Цвета графика проверены на цветовую слепоту: свои #3C8B23, другие сети #2A78D6.
   ============================================================ */
.utp-chart{ --utp-max:700; --utp-us:var(--green-bright); --utp-them:#2A78D6; --utp-them-soft:rgba(42,120,214,.32);
  margin:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:clamp(18px,2.6vw,30px); display:flex; flex-direction:column; gap:18px; }
.utp-chart figcaption{ display:flex; flex-direction:column; gap:4px; }
.utp-chart figcaption b{ font-size:clamp(18px,1.8vw,21px); font-weight:800; color:var(--white); line-height:1.25; }
.utp-chart figcaption span{ font-size:14px; color:var(--gray); }
.utp-legend{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13.5px; color:var(--light); }
.utp-legend span{ display:inline-flex; align-items:center; gap:8px; }
.utp-sw{ width:12px; height:12px; border-radius:3px; display:inline-block; flex:none; }
.utp-sw.us{ background:var(--utp-us); }
.utp-sw.them{ background:linear-gradient(90deg,var(--utp-them) 55%,var(--utp-them-soft) 55%); }
.utp-sw.ref{ width:0; height:15px; border-left:2px dashed var(--gray-2); border-radius:0; }
.utp-bars{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; font-variant-numeric:tabular-nums; }
.utp-bars li{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:18px; align-items:center; padding:7px 8px; border-radius:10px; }
.utp-bars li:hover{ background:rgba(24,22,16,.03); }
.utp-lbl{ font-size:14.5px; font-weight:700; color:var(--white); line-height:1.3; }
.utp-lbl small{ display:block; font-size:12.5px; font-weight:500; color:var(--gray); margin-top:2px; }
.utp-track{ position:relative; height:28px; }
.utp-track::before{ content:""; position:absolute; top:-7px; bottom:-7px; left:calc(144 / var(--utp-max) * 100%); border-left:2px dashed var(--gray-2); }
.utp-bar{ position:absolute; top:3px; bottom:3px; left:0; width:calc(var(--v) / var(--utp-max) * 100%); border-radius:0 5px 5px 0; background:var(--utp-us); }
.utp-them .utp-bar{ width:calc(var(--lo) / var(--utp-max) * 100%); background:var(--utp-them); border-radius:0; }
.utp-them .utp-bar-range{ position:absolute; top:3px; bottom:3px; left:calc(var(--lo) / var(--utp-max) * 100%);
  width:calc((var(--v) - var(--lo)) / var(--utp-max) * 100%); background:var(--utp-them-soft); border-radius:0 5px 5px 0; }
.utp-val{ position:absolute; top:50%; transform:translateY(-50%); left:calc(var(--v) / var(--utp-max) * 100% + 8px);
  font-size:14px; font-weight:800; color:var(--white); white-space:nowrap; }
.utp-val.inside{ left:auto; right:calc(100% - var(--v) / var(--utp-max) * 100% + 10px); color:#fff; }
.utp-axis{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:18px; padding-inline:8px; }
.utp-ticks{ position:relative; height:18px; font-size:12px; color:var(--gray-2); font-variant-numeric:tabular-nums; }
.utp-ticks span{ position:absolute; transform:translateX(-50%); }
.utp-ticks span:first-child{ transform:none; }
.utp-note{ font-size:15px; line-height:1.55; color:var(--light); max-width:760px; margin:0; }
.utp-note b{ color:var(--white); }
.utp-src{ font-size:12.5px; line-height:1.5; color:var(--gray-2); margin:0; }

/* ---------- билеты ---------- */
.utp-tickets{ --utp-hole:var(--ink); display:grid; gap:16px; }
.bg-alt .utp-tickets{ --utp-hole:#FBF9F4; }
.bg-deep .utp-tickets{ --utp-hole:#EFEBE2; }
.utp-tickets.is-cols{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.utp-ticket{ display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:0 1px 2px rgba(24,22,16,.04), 0 18px 40px -30px rgba(24,22,16,.25); }
.utp-ticket.is-core{ border-color:var(--green-line); }
.utp-stub{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  padding:18px 20px 16px; border-bottom:2px dashed var(--line-strong); }
.utp-stub::before,.utp-stub::after{ content:""; position:absolute; bottom:-11px; width:20px; height:20px; border-radius:50%;
  background:var(--utp-hole); border:1px solid var(--line); }
.utp-ticket.is-core .utp-stub::before,.utp-ticket.is-core .utp-stub::after{ border-color:var(--green-line); }
.utp-stub::before{ left:-11px; clip-path:inset(0 0 0 50%); }
.utp-stub::after{ right:-11px; clip-path:inset(0 50% 0 0); }
.utp-code{ margin:0; font-size:30px; font-weight:800; line-height:1; letter-spacing:-.02em; color:var(--green-bright); font-variant-numeric:tabular-nums; }
.utp-code small{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.16em; color:var(--gray-2); margin-bottom:6px; }
.utp-analogy{ margin:0; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gray); text-align:right; line-height:1.35; }
.utp-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; min-width:0; flex:1; }
.utp-q{ margin:0; font-size:14px; color:var(--gray); font-style:italic; }
.utp-body h3{ margin:0; font-size:19px; font-weight:800; color:var(--white); line-height:1.25; letter-spacing:-.01em; }
.utp-body p.t{ margin:0; font-size:15px; line-height:1.55; color:var(--light); }
.utp-body .more{ margin-top:auto; padding-top:6px; font-size:14px; font-weight:700; color:var(--green-bright); text-decoration:none; }
.utp-body .more:hover{ text-decoration:underline; text-underline-offset:3px; }
@media (min-width:821px){
  .utp-tickets.is-row .utp-ticket{ display:grid; grid-template-columns:190px minmax(0,1fr); }
  .utp-tickets.is-row .utp-stub{ flex-direction:column; align-items:flex-start; justify-content:space-between;
    border-bottom:none; border-right:2px dashed var(--line-strong); padding:20px 18px; }
  .utp-tickets.is-row .utp-analogy{ text-align:left; }
  .utp-tickets.is-row .utp-stub::before{ left:auto; right:-11px; top:-11px; bottom:auto; clip-path:inset(50% 0 0 0); }
  .utp-tickets.is-row .utp-stub::after{ right:-11px; bottom:-11px; clip-path:inset(0 0 50% 0); }
  .utp-tickets.is-row .utp-body{ padding:20px 24px; }
}
@media (max-width:900px){ .utp-tickets.is-cols{ grid-template-columns:1fr; } }

/* ---------- чего не обещаем, вопросы к любой сети ---------- */
.utp-nope{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.utp-nope li{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; align-items:start; background:var(--panel);
  border:1px solid var(--line); border-radius:14px; padding:16px 18px; font-size:16px; line-height:1.5; color:var(--light); }
.utp-nope li b{ color:var(--white); }
.utp-nope .x{ width:28px; height:28px; border-radius:8px; background:rgba(216,67,74,.10); color:var(--red); display:grid; place-items:center; }
.utp-nope .x svg{ width:14px; height:14px; }
.utp-ask{ margin:0; padding:0; list-style:none; counter-reset:ask; display:grid; gap:0; border-top:1px solid var(--line); }
.utp-ask li{ counter-increment:ask; display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.utp-ask li::before{ content:counter(ask); width:32px; height:32px; border-radius:10px; background:var(--green-soft); color:var(--green-bright);
  font-weight:800; display:grid; place-items:center; font-variant-numeric:tabular-nums; }
.utp-ask b{ display:block; color:var(--white); font-size:17px; margin-bottom:4px; }
.utp-ask span{ color:var(--gray); font-size:15px; line-height:1.5; }
.utp-cta-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

@media (max-width:760px){
  .utp-bars li,.utp-axis{ grid-template-columns:1fr; gap:6px; }
  .utp-axis .sp{ display:none; }
  .utp-code{ font-size:26px; }
}