/* ============================================================
   mentenanta.html only — linked after host.css.
   1. Plans: the tier glyph, the line under each tier, the three spec rows
      (what changes on every tier), the "în plus" list (each card lists only
      what it adds), the WhatsApp alternative, the two links under the cards
   2. Comparison table: the "not in this tier" dash, text cells, the lead's link
   3. What no tier includes (.mx): two groups + what hosting already has
   The common base is written once, in the pinned section (#cum), with the
   house .plat component. Everything else comes from style.css + host.css
   (docs/componente-site.md). Black and white only; tokens, no literals.
   ============================================================ */

/* ---- 1. PLANS ---- */
/* the tier as a three-step glyph before its number: 1, 2 or 3 bars lit.
   The bars rise when the cards come in (animation, so without JS they simply stand) */
.pl-num{display:inline-flex;align-items:center;gap:12px}
.mt-lv{display:inline-flex;align-items:flex-end;gap:3px;height:14px}
.mt-lv i{display:block;width:4px;border-radius:1.5px;background:var(--w12);transform-origin:50% 100%}
.mt-lv i:nth-child(1){height:6px;--k:0}
.mt-lv i:nth-child(2){height:10px;--k:1}
.mt-lv i:nth-child(3){height:14px;--k:2}
.mt-lv[data-lv="1"] i:nth-child(1),.mt-lv[data-lv="2"] i:nth-child(-n+2),.mt-lv[data-lv="3"] i{background:var(--ink)}
.pl-grid.in .mt-lv i{animation:mt-rise .9s var(--e) both;animation-delay:calc(.5s + var(--k) * .1s)}
@keyframes mt-rise{from{transform:scaleY(.15)}}

.pl-sub{margin:-6px 0 22px;max-width:34ch;font-size:13.5px;line-height:1.55;color:var(--w56)}

/* spec rows: the three values every tier sets — data, not bullets. Flush under the
   price's rule, so the four lines read as one small table */
.mt-spec{margin:-24px 0 26px}
.mt-spec>div{display:flex;justify-content:space-between;align-items:baseline;gap:4px 16px;padding:12px 0;
  border-bottom:1px solid var(--w05)}
.mt-spec dt{font-size:12.5px;line-height:1.4;color:var(--w56);text-wrap:balance}
.mt-spec dd{font-size:14px;line-height:1.4;font-weight:500;letter-spacing:-.01em;color:var(--ink);
  text-align:right;white-space:nowrap}

/* the list's label: "Baza, în ritm lunar" / "Față de Esențial, în plus" */
.mt-lvl{margin:0 0 14px;font-family:var(--fd);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--w56)}
/* an addition gets a plus, not a tick */
.pl-feats.mt-plus li::before{left:2px;top:.72em;width:10px;height:1.5px;border:0;background:var(--acc);transform:none}
.pl-feats.mt-plus li::after{content:"";position:absolute;left:6.25px;top:calc(.72em - 4.25px);width:1.5px;height:10px;
  background:var(--acc)}
.pl-feats li small{display:block;margin-top:2px;font-size:12px;color:var(--w56)}

/* the WhatsApp alternative under "Adaug …", as on the hosting cards (icon + "sau pe WhatsApp"): a 40px target on phones */
.pl-wa{align-self:center;display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:11px 12px;font-size:12.5px;line-height:1.4;color:var(--w56);
  text-decoration:underline;text-decoration-color:var(--w18);text-underline-offset:3px;
  transition:color var(--t1) var(--e),text-decoration-color var(--t1) var(--e)}
.pl-wa:hover,.pl-wa:focus-visible{color:var(--ink);text-decoration-color:currentColor}
.pl-wa svg{flex:none}
/* monthly only, no .pl-head toggle row: keep a gap between the heading and the cards */
.pl>.pl-grid:first-child{margin-top:clamp(20px,2.6vw,36px)}
/* two links under the cards: the base (once, in #cum) and the differences (#comparatie) */
.mt-links{flex-wrap:wrap;gap:14px 44px;margin-top:36px}
/* the price terms: two lines on desktop, read left to right on a phone */
.plans .pl-note{max-width:92ch}
@media (max-width:760px){.plans .pl-note{text-align:left}}

/* ---- 2. COMPARISON TABLE ---- */
.cmp-no{display:inline-block;width:12px;height:1.6px;background:var(--w30);vertical-align:middle}
.mt-cmp .cmp-t td{font-size:13.5px}
.mt-cmp .cmp-t td small,.mt-cmp .cmp-t tbody th small{display:block;margin-top:3px;font-size:11.5px;color:var(--w56)}
@media (max-width:760px){.mt-cmp .cmp-t{min-width:700px}}
.cmp-sec .shead .lead a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--w30);text-underline-offset:3px}
.cmp-sec .shead .lead a:hover{text-decoration-color:currentColor}

/* ---- 3. WHAT NO TIER INCLUDES (.mx) — two groups, the lead's two kinds ---- */
.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}
/* at a price you know first: an arrow (it goes to an estimate) · not at all: a cross */
.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}
}

@media (prefers-reduced-motion:reduce){.pl-grid.in .mt-lv i{animation:none}}