/* «Бази»: панелі кроків — сім видів, звʼязки й підсумки, формула, шаблони, заявка з сайту */
.pin7{position:absolute;inset:44px 14px 14px;display:grid;grid-template-rows:auto 1fr;gap:12px}
.pin7 .tabs{flex-wrap:wrap}
.vw{position:relative}
.vw>div{position:absolute;inset:0;opacity:0;padding:6px 2px}
.vw>div.on{opacity:1}
.vt{display:grid;gap:6px;align-content:start}
.vt div{display:grid;grid-template-columns:1.6fr 1fr .9fr;gap:10px;padding:8px 10px;border-radius:8px;background:var(--card-in);font-size:12.5px;color:var(--ink2)}
.vt div:first-child{background:none;font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.vb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-content:start}
.vb>span{display:grid;gap:6px;align-content:start;padding:8px;border-radius:10px;background:var(--card-in)}
.vb b{font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.vb i,.vl i{display:block;padding:8px;border-radius:8px;background:var(--card);border:1px solid var(--line);font-style:normal;font-size:12px;color:var(--ink)}
.vc{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:46px;gap:4px;align-content:start}
.vc span{border-radius:6px;border:1px solid var(--line);padding:3px 5px;font:500 11px var(--f-mono);color:var(--ink3);position:relative}
.vc span i{position:absolute;left:3px;right:3px;bottom:3px;height:15px;border-radius:4px;background:var(--rc);font:600 9.5px/15px var(--f-body);font-style:normal;color:var(--ev-ink);padding:0 4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} /* підпис — чий запис */
.vg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-content:start}
.vg span{border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--card);font-size:12px;color:var(--ink)}
.vg span::before{content:"";display:block;height:58px;background:linear-gradient(135deg,var(--rc),color-mix(in srgb,var(--rc) 30%,transparent))}
.vg span b{display:block;padding:7px 9px;font-weight:600}
.vl{display:grid;gap:6px;align-content:start}
.vl i{display:flex;gap:10px;align-items:center}
.vl i::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--rc)}
.vtl{display:grid;gap:8px;align-content:start;background:repeating-linear-gradient(90deg,transparent 0 calc(14.28% - 1px),var(--line) calc(14.28% - 1px) 14.28%)}
.vtl i{display:block;height:22px;border-radius:6px;background:var(--rc);margin-left:var(--x);width:var(--w);font-style:normal;font-size:11.5px;color:var(--ev-ink);padding:3px 8px;white-space:nowrap;overflow:hidden}
.vch{display:flex;align-items:flex-end;gap:12px;padding:10px 10px 4px;border-bottom:1px solid var(--line2);margin-bottom:22px}
.vch i{flex:1;border-radius:6px 6px 0 0;background:var(--rc);height:var(--h);position:relative}
.vch i b{position:absolute;left:-6px;right:-6px;top:calc(100% + 8px);text-align:center;font:500 11px var(--f-body);color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* підпис під стовпчиком */

.rel{position:absolute;inset:44px 14px 14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-content:start}
.rel .card{padding:12px;display:grid;gap:6px;box-shadow:none}
.rel .card>b{font-size:13.5px}
.rel .r{display:flex;justify-content:space-between;gap:10px;padding:7px 9px;border-radius:8px;background:var(--card-in);font-size:12.5px;color:var(--ink2)}
.rel .r.hl{background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--ink)}
.rel svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.rel svg path{fill:none;stroke:var(--c);stroke-width:2}
.sumb{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;padding:12px 14px;border-radius:12px;border:1px solid var(--line2);font-size:13px;color:var(--ink2)}
.sumb{gap:10px}.sumb span{min-width:0}
.sumb b{font:800 26px var(--f-disp);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap} /* сума одним рядком — на телефоні число ховалося за край */
@media (max-width:640px){.sumb b{font-size:20px}}

.fx{position:absolute;inset:44px 14px 14px;display:grid;gap:12px;align-content:start}
.fbar{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;border:1px solid var(--line2);background:var(--card-in);font:500 13px var(--f-mono);color:var(--ink)}
.fbar .fn{color:var(--c);font-weight:700;font-style:italic}
.ftab{display:grid;gap:5px}
.ftab div{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;background:var(--card-in);font-size:12.5px;color:var(--ink2)}
.ftab div:first-child{background:none;font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.ftab .pill{justify-self:start;opacity:0}

.tpl5{position:absolute;inset:44px 14px 14px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto 1fr;gap:10px}
.tpl5 .tc{display:grid;gap:8px;align-content:start;padding:12px 10px;border-radius:12px;border:1px solid var(--line);background:var(--card-in);font-size:12.5px;color:var(--ink);transition:border-color .3s,background .3s}
.tpl5 .tc span{width:34px;height:34px;padding:7px;border-radius:9px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.tpl5 .tc svg{width:100%;height:100%}
.tpl5 .tc.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 10%,transparent)}
.tpl5 .tprev{grid-column:1/-1;display:grid;gap:5px;align-content:start}
.tpl5 .tprev div{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px;padding:8px 10px;border-radius:8px;background:var(--card-in);font-size:12.5px;color:var(--ink2)}
.tpl5 .tprev div:first-child{background:none;font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}

.lead2{position:absolute;inset:44px 14px 14px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;align-items:start}
.lead2 .form{position:relative;width:auto;top:auto;right:auto;opacity:1;display:grid;gap:8px;font-size:13px}
.lead2 .form label{display:grid;gap:3px;color:var(--ink3);font-size:12px}
.lead2 .form label span{display:block;min-height:30px;padding:6px 9px;border-radius:7px;border:1px solid var(--line2);color:var(--ink);font-size:13px}
.lead2 .send{justify-self:start;padding:7px 12px;border-radius:8px;background:var(--c);color:var(--ev-ink);font-weight:700}
.lead2 .ltab{display:grid;gap:5px}
.lead2 .ltab div{display:grid;grid-template-columns:1.4fr 1fr .9fr;gap:10px;padding:8px 10px;border-radius:8px;background:var(--card-in);font-size:12.5px;color:var(--ink2)}
.lead2 .ltab div:first-child{background:none;font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.lead2 .ltab .nw{opacity:0}
@media (max-width:640px),(pointer:coarse) and (max-width:1100px){.rel{gap:14px}.tpl5{grid-template-columns:repeat(3,minmax(0,1fr))}.tpl5 .tc:nth-child(n+4){display:none}.lead2{grid-template-columns:1fr}.vc{grid-auto-rows:34px}}
.rel .r span{white-space:nowrap} /* сума угоди не рветься на два рядки (телефон) */