/* ============================================================
   unelte.html only — linked after host.css.
   Pagina folosește componentele casei (.phero, .pmeter, .feats/.fgrid,
   .plat, .cmp, .faq, .cband). Aici stau doar două lucruri:
   1. Lista „ce nu face" (.mx) — componenta din mentenanta.css, copiată
      aici, cum cere docs/componente-site.md §4 (o pagină care vrea o
      componentă de pe altă pagină o copiază în CSS-ul ei).
   2. Tabelul de prețuri: coloanele de sume aliniate la dreapta, cu
      cifre tabulare, și liniuța „nu se vinde pe perioada asta".
   Alb și negru, doar tokenuri. Nimic nou în host.css.
   ============================================================ */

/* ---- 1. CE NU FACE (.mx) — două grupuri + cardul din dreapta ---- */
.mx{padding:var(--sec) var(--pad);overflow-x:clip}
.mx-in{max-width:var(--maxw);margin-inline:auto}
.mx-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(30px,4.2vw,76px);align-items:start}
.mx-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,3.4vw,56px);align-items:start}
.mx-gt{padding-bottom:18px;border-bottom:1px solid var(--w18);
  font-family:var(--fd);font-size:10px;font-weight:400;line-height:1.5;letter-spacing:.22em;text-transform:uppercase;color:var(--w72)}
.mx-list li{position:relative;padding:22px 0 24px 38px;border-bottom:1px solid var(--w08)}
.mx-list li:last-child{border-bottom:0}
/* îl facem, dar separat: o săgeată · nu îl facem deloc: o cruce */
.mx-list li::before,.mx-list li::after{content:"";position:absolute;background:var(--w56)}
.mx-list.no li::before,.mx-list.no li::after{left:4px;top:31px;width:14px;height:1.4px;transform:rotate(45deg)}
.mx-list.no li::after{transform:rotate(-45deg)}
.mx-list.est li::before{left:2px;top:31px;width:15px;height:1.4px}
.mx-list.est li::after{left:10px;top:27.3px;width:7px;height:7px;background:none;
  border-top:1.4px solid var(--w56);border-right:1.4px solid var(--w56);transform:rotate(45deg)}
.mx-list h4{margin-bottom:7px;font-size:16px;font-weight:500;letter-spacing:-.015em;line-height:1.3;color:var(--ink)}
.mx-list p{font-size:13.5px;line-height:1.6;color:var(--w56)}
.mx-list p a{color:var(--w72);text-decoration:underline;text-underline-offset:3px}
.mx-list p a:hover{color:var(--ink)}

.mx-have{position:sticky;top:calc(var(--hd-h) + 40px);border-radius:var(--r-l);padding:clamp(24px,2.6vw,36px);overflow:hidden}
.mx-have>*{position:relative;z-index:2}
.mx-have h3{margin:16px 0 22px;font-size:clamp(1.25rem,1.8vw,1.55rem);font-weight:400;letter-spacing:-.025em;line-height:1.22}
.mx-have ul{display:grid;gap:13px;padding:20px 0;border-top:1px solid var(--w08);border-bottom:1px solid var(--w08)}
.mx-have li{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.45;color:var(--w72)}
.mx-have li .led{width:6px;height:6px;flex:none}
.mx-have li .led::after{display:none}
.mx-have p{margin-top:18px;font-size:13.5px;line-height:1.6;color:var(--w56)}
.mx-have .tlink{margin-top:16px}
@media (max-width:1100px){
  .mx-grid{grid-template-columns:1fr}
  .mx-have{position:relative;top:auto}
}
@media (max-width:1100px) and (min-width:641px){.mx-have ul{grid-template-columns:1fr 1fr;column-gap:32px}}
@media (max-width:700px){
  .mx-cols{grid-template-columns:1fr}
  .mx-grp+.mx-grp{margin-top:28px}
}

/* ---- 2. TABELUL DE PREȚURI ---- */
.un-cmp .cmp-t td{font-variant-numeric:tabular-nums}
.un-cmp .cmp-t tbody th small{display:block;margin-top:4px;font-size:11.5px;line-height:1.5;color:var(--w56)}
.un-no{display:inline-block;width:12px;height:1.6px;background:var(--w30);vertical-align:middle}
@media (max-width:760px){.un-cmp .cmp-t{min-width:660px}}