/* ============================================================
   gazduire-wordpress.html only — linked after host.css.
   1. Hero: a WP Toolkit site card, built on the .rack parts of host.css §3
   2. Plans: the card actions (.pl-acts, as in gazduire-web.css) and the
      numbers in each list — a card lists only what sets it apart. The
      period switch (3 ani / 2 ani / 1 an / Lunar) and the card's price
      (.pl-cost) are host.css 12g + script.js §12
   3. "Inclus în toate trei" (.wpi): what the three plans share, said once,
      as a recessed tray (not a fourth card)
   4. "Toate detaliile" (.wpd): the comparison table, folded in a <details>
   5. "Ai nevoie de mai mult?" (.wpg): cloud and Bulk, two slim link cards
   6. WP Toolkit bento (.fgrid.wpb): one tall card with the auto-update
      switches + 7 small cards; on phones the small cards become rows
   7. Mentenanță WordPress (.mtw): the three tiers as rows
   8. Reduced motion
   9. The 30-day guarantee and the renewal price (.gw-sure, #garantie), under
      the folded table — copied from gazduire-web.css §8
   10. FAQ: the totals on every period (.fq-t) — copied from gazduire-web.css §9
   Everything else comes from style.css + host.css (docs/componente-site.md).
   Black and white only; tokens, no literals except white on the "Conectare"
   pill and on the switch knobs.
   ============================================================ */

/* ---- 1. HERO CARD (.rack.wpk): site header + settings rows ---- */
.wpk-site{display:flex;align-items:center;gap:14px;padding:18px 20px;border-bottom:1px solid var(--w05)}
.wpk-logo{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:13px;
  border:1px solid var(--w12);background:var(--w03);color:#fff}
.wpk-logo svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.wpk-id{flex:1;min-width:0}
.wpk-id b{display:block;font-family:var(--fm);font-size:13.5px;font-weight:500;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wpk-id span{display:block;margin-top:5px;font-size:11.5px;color:var(--w42)}
.wpk-login{flex:none;padding:8px 14px;border-radius:var(--r-pill);background:#fff;color:#000;
  font-family:var(--fd);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase}
.wpk-list{padding-top:14px}
/* a setting that is switched off: dim LED, dim status */
.wpk-list li.off .led{background:var(--w18);box-shadow:none}
.wpk-list li.off .d{color:var(--w42)}
.wpk-list li.off .s{color:var(--w30)}
/* the rows tick in one after another once the card is in view (.in comes from the reveal);
   the third delay value keeps the row hover (background) instant */
.wpk .wpk-list li{opacity:0;transform:translate3d(0,8px,0);
  transition:opacity .6s var(--e),transform .7s var(--e),background var(--t2) var(--e)}
.wpk.in .wpk-list li{opacity:1;transform:none}
.wpk.in .wpk-list li:nth-child(1){transition-delay:.55s,.55s,0s}
.wpk.in .wpk-list li:nth-child(2){transition-delay:.67s,.67s,0s}
.wpk.in .wpk-list li:nth-child(3){transition-delay:.79s,.79s,0s}
.wpk.in .wpk-list li:nth-child(4){transition-delay:.91s,.91s,0s}
.wpk.in .wpk-list li:nth-child(5){transition-delay:1.03s,1.03s,0s}
/* phones: in the one-column hero grid the track took this card's min-content width (371px at 375px),
   pushing the title and the lead 16px past the screen edge, where .phero clips them. min-width:0 lets
   the track shrink to the column; the card's long texts already end in an ellipsis */
.phero-in>*{min-width:0}
@media (max-width:420px){
  .wpk-site{gap:12px;padding:16px}
  .wpk-logo{width:40px;height:40px;border-radius:11px}
  .wpk-login{padding:7px 11px;letter-spacing:.14em}
}

/* ---- 2. PLANS ---- */
/* the link to gazduire-web.html in the lead: black and white only, so it needs its underline */
.plans .shead .lead a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--w30);
  text-underline-offset:3px;transition:text-decoration-color var(--t1) var(--e)}
.plans .shead .lead a:hover{text-decoration-color:currentColor}
/* the four lines that differ between the plans: the figure carries the weight */
.pl-feats b{font-weight:600;color:var(--ink)}
/* one head height for the three cards, so the price and the rows under it line up from card to card: the
   featured badge is taller than a label (28 px against 19), and from 981 to 1239 px the long labels and the
   badge take two lines (38 and 42 px; measured 11.09.2026). The same fix as gazduire-web.css §3 */
#planuri .pl-top{min-height:28px}
@media (min-width:981px) and (max-width:1239px){#planuri .pl-top{min-height:42px}}
/* the order button (data-comanda: script.js §12 rewrites perioada=, keeps cms=wordpress)
   and "sau pe WhatsApp" under it (data-wa: script.js adds the period to the message) */
.pl-acts{margin-top:auto;display:grid;gap:8px}
.pl-acts .pl-cta{margin-top:0}
.pl-wa{justify-self:center;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:4px 8px;
  font-size:12.5px;line-height:1.3;color:var(--w56);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--w18);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}

/* ---- 3. INCLUS ÎN TOATE TREI (.wpi) ---- */
.wpi{display:grid;grid-template-columns:minmax(220px,.78fr) minmax(0,2.22fr);grid-template-rows:auto 1fr;
  grid-template-areas:"head list" "dom list";column-gap:clamp(28px,4.4vw,72px);
  margin-top:clamp(28px,3.2vw,44px);padding:clamp(26px,3.4vw,48px);
  border-radius:var(--r-l);border:1px solid var(--w08);background:var(--w03)}
.wpi-k{display:block;font-family:var(--fd);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--w56)}
.wpi-head{grid-area:head}
.wpi-head h3{margin-top:16px;max-width:14ch;font-size:clamp(1.35rem,2.1vw,1.85rem);font-weight:400;
  line-height:1.15;letter-spacing:-.028em}
.wpi-dom{grid-area:dom;align-self:end;padding-top:28px}
.wpi-dom ul{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:12px}
.wpi-dom li{font-size:14px;color:var(--w72);white-space:nowrap}
.wpi-dom b{font-family:var(--fd);font-weight:400;letter-spacing:.04em;margin-right:6px;color:var(--ink)}
.wpi-list{grid-area:list;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(22px,2.8vw,44px)}
.wpi-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:15px 0;border-top:1px solid var(--w08)}
.wpi-list li:nth-child(-n+2){border-top:0;padding-top:0}
.wpi-list li:nth-last-child(-n+2){padding-bottom:0}
.wpi-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  border:1px solid var(--w08);background:var(--bg);color:var(--w72)}
.wpi-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.wpi-t{min-width:0}
.wpi-t b{display:block;font-size:14.5px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.wpi-t span{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--w56)}
.wpi-free{font-style:normal;font-family:var(--fd);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 9px;border-radius:var(--r-pill);border:1px solid var(--w18);color:var(--w72)}
@media (max-width:980px){
  .wpi{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"head" "list" "dom"}
  .wpi-head{margin-bottom:24px}
  .wpi-head h3{max-width:none}
  .wpi-dom{margin-top:20px;padding-top:20px;border-top:1px solid var(--w08)}
}
@media (max-width:640px){
  .wpi{padding:24px 18px 22px}
  .wpi-list{grid-template-columns:1fr}
  .wpi-list li{gap:12px}
  .wpi-list li:nth-child(2){border-top:1px solid var(--w08);padding-top:15px}
  .wpi-list li:nth-last-child(2){padding-bottom:15px}
}

/* ---- 4. TOATE DETALIILE (.wpd): the table stays for whoever wants it, closed by default ---- */
.wpd{margin-top:clamp(22px,2.6vw,32px)}
.wpd-s{display:flex;align-items:center;justify-content:center;gap:14px;width:max-content;max-width:100%;
  margin-inline:auto;min-height:48px;padding:10px 12px 10px 24px;border-radius:var(--r-pill);
  border:1px solid var(--w12);cursor:pointer;list-style:none;
  font-family:var(--fd);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--w72);
  transition:color var(--t1) var(--e),border-color var(--t1) var(--e),box-shadow var(--t2) var(--e)}
.wpd-s::-webkit-details-marker{display:none}
.wpd-s::marker{content:""}
.wpd-s:hover{color:var(--ink);border-color:var(--w30);box-shadow:0 14px 30px -20px rgb(0 0 0/.35)}
.wpd-o{display:none}
.wpd[open] .wpd-c{display:none}
.wpd[open] .wpd-o{display:inline}
.wpd[open] .wpd-s{color:var(--ink)}
.wpd-i{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:var(--w05);color:var(--ink)}
.wpd-i::before,.wpd-i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;
  margin:-.75px 0 0 -5px;border-radius:1px;background:currentColor;transition:transform .5s var(--e-spring,var(--e))}
.wpd-i::after{transform:rotate(90deg)}
.wpd[open] .wpd-i::after{transform:rotate(0deg)}
.wpd .cmp{max-width:1180px;margin:clamp(26px,3vw,42px) auto 0}
.wpd[open] .cmp{animation:wpd-in .6s var(--e) both}
@keyframes wpd-in{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
/* script.js measures the phone hint while the table is still folded (0 px wide), so .more never
   comes; show "Derulează" until the first sideways scroll instead */
@media (max-width:760px){.wpd .cmp:not(.scrolled) .cmp-hint{visibility:visible}}
/* the group labels ("Resurse", "Siguranță"…) and the notes under the row names take --w42 from host.css: 3.97:1
   on the white sheet at 10-13 px (measured 11.09.2026). --w56 here, as host.css §13 already gives the head row */
.wpd .cmp-t{--w42:var(--w56)}

/* ---- 5. AI NEVOIE DE MAI MULT? (.wpg) ---- */
.wpg{margin-top:clamp(44px,5.4vw,72px)}
.wpg>.wpi-k{text-align:center;margin-bottom:18px}
.wpg-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);
  max-width:1180px;margin-inline:auto}
.wpg-a{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;
  gap:14px 20px;padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,28px);border-radius:var(--r-m);overflow:hidden;
  color:inherit;transition:translate .5s var(--e)}
.wpg-a>*{position:relative;z-index:2}
.wpg-a:hover{translate:0 -3px}
.wpg-a .prod-ic{width:46px;height:46px}
.wpg-a:hover .prod-ic{color:var(--ink);border-color:var(--w30)}
.wpg-t b{display:block;font-size:16.5px;font-weight:500;letter-spacing:-.018em;color:var(--ink)}
.wpg-t span{display:block;margin-top:5px;font-size:13px;line-height:1.55;color:var(--w56)}
.wpg-p{text-align:right;white-space:nowrap}
.wpg-p .k,.wpg-p .per{display:block;margin:0;font-size:11.5px;color:var(--w56)}
.wpg-p b{display:block;margin:4px 0 3px;font-family:var(--fd);font-weight:400;font-size:clamp(1.45rem,2vw,1.8rem);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
/* cloud's "de la 18,75 €" keeps its condition right under it (docs/wrap-pricing-snippets.md §5) */
.wpg-p small{display:block;margin-top:5px;font-size:11px;line-height:1.35;color:var(--w56)}
.wpg-go{flex:none;color:var(--w56);transition:transform var(--t2) var(--e),color var(--t1) var(--e)}
.wpg-a:hover .wpg-go{transform:translateX(4px);color:var(--ink)}
@media (max-width:980px){.wpg-row{grid-template-columns:1fr;max-width:560px}}
@media (max-width:520px){
  .wpg-a{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:12px 16px}
  .wpg-p{grid-column:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;text-align:left}
  .wpg-p .k,.wpg-p .per{display:inline}
  .wpg-p b{display:inline;margin:0}
  .wpg-p small{flex-basis:100%;margin-top:0}
  .wpg-go{display:none}
}

/* ---- 6. WP TOOLKIT BENTO (.fgrid.wpb) ----
   3 columns: the tall card holds column 1 for two rows, the 7 small cards fill the rest (2 + 2 + 3). */
.fgrid.wpb{grid-template-columns:repeat(3,minmax(0,1fr))}
.wpb .fcard.big{grid-row:span 2;display:flex;flex-direction:column}
.wpb .fcard.big h3{margin:auto 0 10px;padding-top:clamp(26px,3vw,40px);font-size:clamp(1.3rem,1.8vw,1.6rem);
  font-weight:400;letter-spacing:-.025em}
.wpb .fcard.big p{font-size:14px;max-width:42ch}
/* the illustration: WP Toolkit's auto-update settings for one site, one switch per part */
.wpb-vis{border-radius:18px;border:1px solid var(--w08);background:var(--w03);overflow:hidden}
.wpb-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--w08)}
.wpb-t{font-family:var(--fm);font-size:11.5px;color:var(--w56);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wpb-rows{padding:4px 16px}
.wpb-rows li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;
  border-top:1px solid var(--w05);font-family:var(--fm);font-size:13px;color:var(--w96)}
.wpb-rows li:first-child{border-top:0}
.wpb-rows li:nth-child(1){--sd:.7s}
.wpb-rows li:nth-child(2){--sd:.95s}
.wpb-sw{position:relative;flex:none;width:42px;height:24px;border-radius:var(--r-pill);background:var(--w12);
  box-shadow:inset 0 1px 2px rgb(0 0 0/.14)}
.wpb-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgb(0 0 0/.28),inset 0 -1px 1px rgb(0 0 0/.06)}
.wpb-sw[data-v="1"]{background:var(--ink)}
.wpb-sw[data-v="1"]::after{transform:translateX(18px)}
/* once the grid comes into view (.in, from the reveal) the "on" switches flip, one after the other;
   without JS the reveal never runs and they simply show their final state */
.wpb.in .wpb-sw[data-v="1"]{animation:wpb-track .45s var(--e) var(--sd,.7s) both}
.wpb.in .wpb-sw[data-v="1"]::after{animation:wpb-knob .7s var(--e-spring,var(--e)) var(--sd,.7s) both}
@keyframes wpb-track{from{background:var(--w12)}to{background:var(--ink)}}
@keyframes wpb-knob{from{transform:none}to{transform:translateX(18px)}}
@media (max-width:1100px){
  .fgrid.wpb{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wpb .fcard.big{grid-column:1/-1;grid-row:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    grid-template-areas:"vis h" "vis p";column-gap:clamp(24px,4vw,48px);align-items:center}
  .wpb .fcard.big .wpb-vis{grid-area:vis}
  .wpb .fcard.big h3{grid-area:h;align-self:end;margin:0 0 10px;padding-top:0}
  .wpb .fcard.big p{grid-area:p;align-self:start}
  .wpb>.fcard:last-child{grid-column:1/-1}
}
@media (max-width:640px){
  .fgrid.wpb{grid-template-columns:1fr}
  .wpb .fcard.big{display:flex}
  .wpb .fcard.big h3{margin:0 0 10px;padding-top:24px}
  .wpb>.fcard:not(.big){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:start;padding:20px}
  .wpb>.fcard:not(.big) .prod-ic{grid-row:span 2;width:42px;height:42px}
  .wpb>.fcard:not(.big) h3{margin:2px 0 6px}
  .wpb>.fcard:not(.big) p{grid-column:2}
}

/* ---- 7. MENTENANȚĂ WORDPRESS (.mtw): copy on the left, the three tiers as rows on the right ---- */
.mtw{padding:var(--sec) var(--pad)}
.mtw-in{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:.92fr 1.08fr;
  gap:clamp(36px,5vw,90px);align-items:center}
.mtw-copy .eyebrow{margin-bottom:26px}          /* the .shead rhythm (style.css), which .mtw-copy doesn't carry */
.mtw-copy h2{margin-bottom:24px}
.mtw-copy .lead{max-width:48ch}
.mtw-go{margin-top:clamp(26px,3vw,36px)}
.mtw-rows{display:grid;gap:clamp(10px,1.1vw,14px)}
.mtw-row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;
  gap:8px clamp(16px,2vw,30px);padding:clamp(20px,2.3vw,30px) clamp(20px,2.4vw,32px);
  border-radius:var(--r-m);overflow:hidden;color:inherit;transition:translate .5s var(--e)}
.mtw-row>*{position:relative;z-index:2}
.mtw-row:hover{translate:6px 0}
.mtw-n{padding-top:.7em;font-family:var(--fd);font-size:10px;letter-spacing:.22em;color:var(--w30)}
.mtw-t{display:grid;gap:6px;min-width:0}
.mtw-t b{font-size:clamp(1.3rem,1.9vw,1.65rem);font-weight:400;letter-spacing:-.025em;line-height:1.15;color:var(--ink)}
.mtw-t span{font-size:13.5px;line-height:1.55;color:var(--w56)}
.mtw-t .mtw-d{font-size:12.5px;color:var(--w42)}
.mtw-p{text-align:right;white-space:nowrap}
.mtw-p b{display:block;font-family:var(--fd);font-weight:400;font-size:clamp(1.7rem,2.5vw,2.25rem);line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mtw-p span{display:block;margin-top:7px;font-size:12px;color:var(--w42)}
/* off the glass, on plain black: --w42 would be 3.9:1, so the note takes --w56 */
.mtw-note{margin-top:18px;font-size:12.5px;line-height:1.65;color:var(--w56)}
@media (max-width:980px){.mtw-in{grid-template-columns:1fr}}
@media (max-width:520px){
  .mtw-row{grid-template-columns:minmax(0,1fr) auto}
  .mtw-n{display:none}
}

/* ---- 8. REDUCED MOTION ---- */
@media (prefers-reduced-motion:reduce){
  .mtw-row:hover,.wpg-a:hover{translate:none}
  .wpg-a:hover .wpg-go{transform:none}
  .wpk .wpk-list li{opacity:1!important;transform:none!important;transition:none!important}
  .wpb .wpb-sw,.wpb .wpb-sw::after{animation:none!important}
  .wpd[open] .cmp{animation:none}
  .wpd-i::before,.wpd-i::after{transition:none}
}

/* ---- 9. PAYMENT PROMISES (#garantie): the 30-day money-back guarantee and the renewal at the same price,
   said in full once, under the folded table (docs/preturi-multi-an.md). The line under the plan switch and
   the table's guarantee row point here; FAQ gwp10 / gwp11 answer the same two questions. Copied from
   gazduire-web.css §8 under the same class, so the copies can move to host.css together; only the top
   margin differs, to keep this block's rhythm (.wpd above, .wpg below) ---- */
#garantie{scroll-margin-top:calc(var(--hd-h) + 40px)}
.gw-sure{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px clamp(22px,3.4vw,56px);
  max-width:1180px;margin:clamp(44px,5.4vw,72px) auto 0;padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--w08)}
.gw-sure>article{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:start}
.gw-sure .prod-ic{width:46px;height:46px}
.gw-sure h3{font-size:clamp(1.1rem,1.5vw,1.32rem);font-weight:500;letter-spacing:-.02em;line-height:1.25;margin:4px 0 8px}
.gw-sure p{font-size:14.5px;line-height:1.65;color:var(--w56);max-width:54ch}
.gw-sure p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){
  .gw-sure{grid-template-columns:minmax(0,1fr)}
  .gw-sure .prod-ic{width:40px;height:40px}
  .gw-sure .prod-ic svg{width:19px;height:19px}
}

/* ---- 10. FAQ (gwp10): the four periods, plan by plan — copied from gazduire-web.css §9 ---- */
.fq-tw{overflow-x:auto;margin:14px 0 16px}
.fq-t{border-collapse:collapse;font-size:13.5px;line-height:1.3;font-variant-numeric:tabular-nums}
.fq-t th,.fq-t td{padding:9px 14px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--w08)}
.fq-t th:first-child{padding-left:0;text-align:left}
.fq-t thead th{font-family:var(--fd);font-size:10px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--w56)}
.fq-t tbody th{font-weight:500;color:var(--ink)}
.fq-t td{color:var(--w72)}
@media (max-width:440px){.fq-t th,.fq-t td{padding:8px 8px}.fq-t th:first-child{padding-left:0}}