/* ============================================================
   gazduire-cloud.html only — linked after host.css from that page.
   Everything else on the page comes from style.css + host.css.
   Why the page looks like this: docs/design-review/gazduire-cloud.md
   1. Plan cards: only what differs (.cl-spec, with the PHP pips),
      one order button + "sau pe WhatsApp" under it; the price
      (.pl-cost, host.css 12g) and, on Cloud 2 / 3, the label that
      says they are sold monthly or yearly only (.cl-alt)
   2. Under the cards: how you buy (.cl-buy, four short columns)
   3. Hero meter: PHP processes per site, as pips under each bar
   4. #procese — the PHP-process explainer. Its four-way switch is
      the [data-pl] block from script.js §12 (the buttons only set
      data-per = w / c1 / c2 / c3 on .ph-stage); the CSS below
      lights 5 / 10 / 15 / 20 of the 20 slots. Example load: 12
      requests at once — busy = min(N, 12), queue = 12 − N.
   5. #functii — what all three plans share, said once (.cl-bento)
   6. #alegere — web, cloud or Bulk
   7. Reduced motion
   8. The 30-day guarantee and the renewal price (.gw-sure, #garantie),
      under the cards — copied from gazduire-web.css §8
   9. FAQ: the totals on every period (.fq-t) — copied from
      gazduire-web.css §9
   ============================================================ */

/* ---- 1. PLAN CARDS ---- */
/* 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 just above 980 px Cloud 1's label takes two
   lines (38 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:1060px){#planuri .pl-top{min-height:38px}}
/* the three things that differ between Cloud 1, 2 and 3; what they share lives in #functii */
.cl-spec{margin:0 0 30px}
.cl-spec>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--w05)}
.cl-spec>div:first-child{padding-top:0}
/* the label wraps on a narrow card, the figure stays on the right */
.cl-spec dt{min-width:0;font-size:13.5px;line-height:1.4;color:var(--w72)}
.cl-spec dd{margin:0;font-size:12.5px;color:var(--w56);white-space:nowrap}
.cl-spec dd b{font-family:var(--fd);font-weight:400;font-size:clamp(1.35rem,1.8vw,1.6rem);line-height:1;
  letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.cl-spec dd .k{margin-right:6px}
.cl-spec dd .u{margin-left:5px}
/* PHP processes per site, out of 20: the pips of the hero meter, drawn in the card's ink under
   the row (::before = the 20 slots, ::after = the plan's share; --v on the row, decorative only).
   Lit by default (no JS = the full value); when the cards reveal they fill from empty */
.cl-spec .cl-php{position:relative;padding-bottom:34px}
.cl-spec .cl-php::before,.cl-spec .cl-php::after{content:"";position:absolute;left:0;right:0;bottom:16px;height:6px;
  background:repeating-linear-gradient(90deg,var(--w12) 0 calc(5% - 3px),transparent calc(5% - 3px) 5%)}
.cl-spec .cl-php::after{background:repeating-linear-gradient(90deg,var(--ink) 0 calc(5% - 3px),transparent calc(5% - 3px) 5%);
  clip-path:inset(0 calc(100% - var(--v,1) * 100%) 0 0)}
.pl-grid.in .cl-php::after{animation:cl-fill 1.5s var(--e) backwards;animation-delay:calc(.45s + var(--i,0) * .16s)}
@keyframes cl-fill{from{clip-path:inset(0 100% 0 0)}}

.pl-acts{margin-top:auto;display:grid;gap:4px}
.pl-acts .pl-cta{margin-top:0}
.pl-wa{justify-self:center;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 10px;
  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{color:var(--ink);text-decoration-color:currentColor}
.pl-wa svg{flex:none}

/* the mixed block (docs/wrap-pricing-snippets.md §4): Cloud 2 and 3 are sold monthly or on 1 year only, so on
   3 or 2 ani script.js §12 shows and orders their 1-year price and sets .pl-alt on the card. There the saving
   makes room for a label that says so (.cl-alt); on 1 an and Lunar the label hides and the saving is back.
   Both sit in the first row of the price grid (host.css 12g) and have the same box — the label's 1px border
   comes out of its padding — so that row, and every row under it, stays level with Cloud 1's on any period.
   visibility, not display: hidden, the label still holds its place and is not read out */
.pl-cost>.pl-eco,.pl-cost>.cl-alt{grid-area:1/1}
.pl-cost>.pl-cost-g{grid-area:2/1}
.cl-alt{display:inline-flex;align-items:center;padding:5px 10px 4px;border:1px solid var(--w30);border-radius:var(--r-pill);
  font-family:var(--fd);font-size:9.5px;line-height:1.2;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
  color:var(--w72);visibility:hidden}
.pl-alt .cl-alt{visibility:visible}
.pl-alt .pl-eco{visibility:hidden}

/* ---- 2. UNDER THE CARDS: HOW YOU BUY (four short columns instead of a centred paragraph), after #garantie ---- */
.cl-buy{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px clamp(22px,3vw,44px);
  max-width:1180px;margin:clamp(30px,3.4vw,44px) auto 0;padding-top:26px;border-top:1px solid var(--w08)}
.cl-buy b{display:block;margin-bottom:9px;font-family:var(--fd);font-size:10px;font-weight:400;letter-spacing:.24em;
  text-transform:uppercase;color:var(--w72)}
.cl-buy p{font-size:13px;line-height:1.65;color:var(--w56)}
@media (max-width:1100px){.cl-buy{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.cl-buy{grid-template-columns:minmax(0,1fr);gap:18px}}

/* ---- 3. HERO METER: PHP-process pips (20 per row, the plan's share lit) ---- */
.pm-pips{grid-column:1/-1;position:relative;height:6px;margin-top:-3px;
  background:repeating-linear-gradient(90deg,var(--w12) 0 calc(5% - 3px),transparent calc(5% - 3px) 5%)}
.pm-pips i{position:absolute;inset:0;display:block;
  background:repeating-linear-gradient(90deg,#fff 0 calc(5% - 3px),transparent calc(5% - 3px) 5%);
  clip-path:inset(0 100% 0 0);transition:clip-path 1.6s var(--e) calc(.95s + var(--i,0) * .16s)}
.pmeter.in .pm-pips i{clip-path:inset(0 calc(100% - var(--v,1) * 100%) 0 0)}
/* this meter's title is longer than the web one: on a phone it wraps, and the stacked hero column
   can no longer grow past the screen (with 1fr it widened to 444px at 375px and clipped the copy) */
@media (max-width:980px){.phero-in{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.pmeter .rack-bar .rack-t,.ph-stage .rack-bar .rack-t{min-width:0;white-space:normal;line-height:1.5}}
.rack-t .nw{white-space:nowrap}   /* never "site- / uri" */

/* ---- 4. PHP PROCESSES, EXPLAINED ---- */
.ph{position:relative;padding:var(--sec) var(--pad);overflow-x:clip}
.ph-in{max-width:var(--maxw);margin-inline:auto}
.ph-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(34px,5vw,96px);align-items:center}

.ph-steps{border-top:1px solid var(--w08)}
.ph-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(16px,2vw,26px);
  padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--w08)}
.ph-n{grid-row:1/3;padding-top:.5em;font-family:var(--fd);font-size:11px;letter-spacing:.24em;color:var(--w30)}
.ph-steps h3{font-size:clamp(1.08rem,1.45vw,1.28rem);font-weight:500;letter-spacing:-.018em;line-height:1.3;margin-bottom:8px}
.ph-steps p{font-size:14.5px;line-height:1.65;color:var(--w56);max-width:52ch}

.ph-vis{position:relative}
.ph-vis::before{content:"";position:absolute;inset:-14% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.075),transparent)}
.ph-stage{border-radius:var(--r-l);overflow:hidden}
.ph-stage>*{position:relative;z-index:2}
.ph-body{padding:clamp(18px,2.2vw,28px)}

/* the switch: the host.css pill, four stops instead of two */
.ph .pl-toggle{display:grid;grid-template-columns:repeat(4,1fr);width:100%;margin:0}
.ph .pl-toggle button{padding:11px 6px;letter-spacing:.14em;white-space:nowrap}
.ph .pl-toggle-i{width:calc(25% - 2.5px)}
.ph .pl-toggle[data-per="c1"] .pl-toggle-i{transform:translateX(100%)}
.ph .pl-toggle[data-per="c2"] .pl-toggle-i{transform:translateX(200%)}
.ph .pl-toggle[data-per="c3"] .pl-toggle-i{transform:translateX(300%)}

.ph-read{display:flex;align-items:flex-end;gap:18px;margin:clamp(22px,2.6vw,30px) 0 clamp(18px,2vw,24px)}
.ph-big{display:grid;min-width:1.25em;font-family:var(--fd);font-size:clamp(3.2rem,5.6vw,4.9rem);line-height:.82;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ph-big b{grid-area:1/1;font-weight:400;opacity:0;transform:translate3d(0,14px,0);
  transition:opacity .35s var(--e),transform .6s var(--e)}
.ph-lbl{padding-bottom:4px;font-size:12.5px;line-height:1.45;color:var(--w56)}
/* Romanian: 5, 10, 15 procese — but 20 DE procese */
.ph-de{display:none}
.ph-stage[data-per="c3"] .ph-de{display:inline}

/* 20 slots, five to a row: web lights one row, Cloud 1 two, Cloud 2 three, Cloud 3 all four */
.ph-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.ph-slots i{position:relative;display:block;height:clamp(32px,3.6vw,42px);border-radius:10px;overflow:hidden;
  border:1px dashed var(--w12);background:transparent;
  transition:border-color .5s var(--e) calc(var(--k,0) * 22ms),background-color .5s var(--e) calc(var(--k,0) * 22ms)}
/* the visitor being served */
.ph-slots i::before{content:"";position:absolute;left:11px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;
  background:#fff;box-shadow:var(--glow);opacity:var(--b,0);transform:scale(calc(.3 + var(--b,0) * .7));
  transition:opacity .4s var(--e) calc(var(--k,0) * 22ms),transform .55s var(--e) calc(var(--k,0) * 22ms)}
/* the page being built: fills, then the next request starts */
.ph-slots i::after{content:"";position:absolute;left:26px;right:10px;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;
  background:linear-gradient(90deg,var(--w30),#fff);transform:scaleX(.08);transform-origin:left;
  opacity:var(--b,0);transition:opacity .4s var(--e) calc(var(--k,0) * 22ms)}
.ph-stage.in .ph-slots i::after{animation:ph-work 2.6s var(--e-soft) infinite;animation-delay:calc(var(--k,0) * -.37s)}
@keyframes ph-work{0%{transform:scaleX(.08)}78%{transform:scaleX(1)}100%{transform:scaleX(1)}}

/* the processes the plan has */
.ph-stage[data-per="w"] .ph-slots i:nth-child(-n+5),
.ph-stage[data-per="c1"] .ph-slots i:nth-child(-n+10),
.ph-stage[data-per="c2"] .ph-slots i:nth-child(-n+15),
.ph-stage[data-per="c3"] .ph-slots i{border-style:solid;border-color:var(--w30);background-color:var(--w03)}
/* the 12 requests take the first free processes */
.ph-stage[data-per="w"] .ph-slots i:nth-child(-n+5),
.ph-stage[data-per="c1"] .ph-slots i:nth-child(-n+10),
.ph-stage[data-per="c2"] .ph-slots i:nth-child(-n+12),
.ph-stage[data-per="c3"] .ph-slots i:nth-child(-n+12){--b:1;border-color:var(--w56);background-color:var(--w08)}

/* the queue: 12 − N requests wait (web 7, Cloud 1 2, then nobody) */
.ph-q{display:flex;align-items:center;gap:16px;min-height:50px;margin-top:14px;padding:12px 16px;border-radius:12px;
  border:1px solid var(--w05);background:var(--w03)}
.ph-q-t{flex:none;font-family:var(--fd);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--w42)}
.ph-q-w{display:grid;align-items:center;min-width:0}
.ph-q-d,.ph-q-none{grid-area:1/1}
.ph-q-d{display:flex;flex-wrap:wrap;gap:7px}
.ph-q-d i{width:9px;height:9px;border-radius:50%;border:1px solid var(--w72);background:var(--w18);
  opacity:0;transform:translate3d(-10px,0,0) scale(.4);
  transition:opacity .35s var(--e) calc(var(--k,0) * 40ms),transform .55s var(--e) calc(var(--k,0) * 40ms)}
.ph-q-none{font-size:13px;color:var(--w72);opacity:0;transform:translate3d(0,6px,0);transition:opacity .35s var(--e),transform .55s var(--e)}
.ph-stage[data-per="w"] .ph-q-d i,
.ph-stage[data-per="c1"] .ph-q-d i:nth-child(-n+2){opacity:1;transform:none}
.ph-stage.in[data-per="w"] .ph-q-d i,
.ph-stage.in[data-per="c1"] .ph-q-d i:nth-child(-n+2){animation:ph-wait 1.9s var(--e-soft) infinite;animation-delay:calc(var(--k,0) * .12s)}
@keyframes ph-wait{0%,100%{background-color:var(--w18)}50%{background-color:var(--w56)}}
.ph-stage[data-per="c2"] .ph-q-none,
.ph-stage[data-per="c3"] .ph-q-none{opacity:1;transform:none;transition-delay:.2s}

/* the readouts: one per state, the others out of the way */
.ph-stage[data-per="w"] .ph-big [data-v="w"],
.ph-stage[data-per="c1"] .ph-big [data-v="c1"],
.ph-stage[data-per="c2"] .ph-big [data-v="c2"],
.ph-stage[data-per="c3"] .ph-big [data-v="c3"]{opacity:1;transform:none}
.ph-sum{min-height:3.3em;margin-top:16px;font-size:13.5px;line-height:1.6;color:var(--w72)}
.ph-sum [data-v]{display:none}
.ph-stage[data-per="w"] .ph-sum [data-v="w"],
.ph-stage[data-per="c1"] .ph-sum [data-v="c1"],
.ph-stage[data-per="c2"] .ph-sum [data-v="c2"],
.ph-stage[data-per="c3"] .ph-sum [data-v="c3"]{display:inline}

.ph-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font-size:11.5px;color:var(--w56)}
.ph-legend span{display:inline-flex;align-items:center;gap:8px}
.ph-legend i{width:16px;height:11px;border-radius:4px;border:1px dashed var(--w18)}
.ph-legend i.b{border-style:solid;border-color:var(--w56);background:var(--w08)}
.ph-legend i.f{border-style:solid;border-color:var(--w30);background:var(--w03)}
.ph-foot{padding:12px clamp(18px,2.2vw,28px) 18px;border-top:1px solid var(--w05);font-size:11.5px;line-height:1.55;color:var(--w56)}

@media (max-width:980px){
  .ph-grid{grid-template-columns:minmax(0,1fr)}
  .ph-vis{max-width:600px;width:100%;margin-inline:auto}
}
@media (max-width:520px){
  /* four stops on a phone: 44px tall, the label stays legible */
  .ph .pl-toggle button{min-height:44px;padding:11px 2px;font-size:10px;letter-spacing:.1em}
  .ph-slots{gap:6px}
  .ph-slots i::after{left:22px;right:8px}
  .ph-slots i::before{left:9px}
  .ph-q{gap:12px;padding:12px 14px}
}

/* ---- 5. #functii — WHAT ALL THREE PLANS SHARE (.cl-bento, on a white sheet) ----
   One big tile (one cPanel, drawn as a small panel of sites), six small tiles, and the
   free services as the one black tile on the sheet: the mirror of the white "Ești aici"
   card on black in #alegere. 4 columns, 2 from 1100px, 1 from 760px. */
.cl-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.cl-tile{position:relative;display:flex;flex-direction:column;border-radius:var(--r-m);
  padding:clamp(22px,2.2vw,30px);overflow:hidden;transition:translate .5s var(--e)}
.cl-tile>*{position:relative;z-index:2}
.cl-tile:hover{translate:0 -3px}
.cl-tile .prod-ic{width:44px;height:44px;margin-bottom:clamp(22px,2.4vw,34px)}
.cl-tile .prod-ic svg{width:20px;height:20px}
.cl-tile:hover .prod-ic{color:var(--ink);border-color:var(--w30);transform:translateY(-3px)}
.cl-tile h3{font-size:16.5px;font-weight:500;letter-spacing:-.018em;line-height:1.3;margin-bottom:8px}
.cl-tile p{font-size:13.5px;line-height:1.62;color:var(--w56)}
.cl-tile p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* the big tile: every site in one panel, each with its own SSL and PHP version */
.cl-cp{grid-column:span 2;grid-row:span 2}
.cl-cp h3{font-size:clamp(1.45rem,2.1vw,1.9rem);font-weight:400;letter-spacing:-.03em;line-height:1.15;margin-bottom:12px}
.cl-cp h3 .nw{white-space:nowrap}   /* never "site- / urile" */
.cl-cp p{max-width:50ch;font-size:14px}
.cl-win{margin-top:auto;padding-top:clamp(24px,2.6vw,34px)}
.cl-win-in{border-radius:16px;border:1px solid var(--w08);background:var(--w03);overflow:hidden}
.cl-win-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--w05)}
.cl-win-bar .dots{display:flex;gap:6px;flex:none}
.cl-win-bar .dots i{width:8px;height:8px;border-radius:50%;background:var(--w12)}
.cl-win-bar .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--fm);font-size:11.5px;color:var(--w56)}
.cl-win ul{padding:2px 16px 6px}
.cl-win li{display:flex;align-items:center;gap:10px;min-height:46px;border-bottom:1px solid var(--w05);
  font-family:var(--fm);font-size:12px;color:var(--w72)}
.cl-win li:last-child{border-bottom:0}
.cl-win .lk{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--w56)}
.cl-win .d{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-win .c{flex:none;padding:3px 9px;border-radius:var(--r-pill);border:1px solid var(--w12);font-size:10.5px;color:var(--w56)}
.cl-win li.more{font-family:var(--fb);font-size:12.5px;color:var(--w56)}
/* the rows arrive one after another when the tiles reveal (visible without JS: backwards fill) */
.cl-bento.in .cl-win li{animation:cl-row .8s var(--e) backwards;animation-delay:calc(.5s + var(--k,0) * .13s)}
@keyframes cl-row{from{opacity:0;transform:translate3d(0,10px,0)}}

/* the free services: smoked glass (host.css .glass--dark), the one black tile on the sheet */
.cl-free{grid-column:span 2}
.cl-free-k{display:inline-flex;align-items:center;gap:10px;margin-bottom:clamp(22px,2.4vw,34px);
  font-family:var(--fd);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--w72)}
.cl-free-k .led{width:6px;height:6px}
.cl-free-k .led::after{display:none}
.cl-free ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 24px;margin-top:auto}
.cl-free li{padding-top:14px;border-top:1px solid var(--w12)}
.cl-free li b{font-size:15px;font-weight:500;letter-spacing:-.015em;line-height:1.3;color:var(--ink)}
.cl-free li span{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--w56)}
.cl-free .ast{color:var(--ink)}
/* touch: the dark tile keeps the dark-glass sheen band (host.css gives sheets a white one) */
@media (hover:none){@supports (animation-timeline:view()){
  .inv .cl-free.spot::after{background:linear-gradient(105deg,rgb(255 255 255/0) 42%,rgb(255 255 255/.075) 50%,rgb(255 255 255/0) 58%)}
}}

/* the domain line under the tiles */
.cl-dom{margin-top:clamp(30px,3.4vw,44px)}
.cl-dom b{font-family:var(--fd);font-weight:400;letter-spacing:.04em;color:var(--ink)}

@media (max-width:1100px){
  .cl-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* the big tile takes the whole row: text on the left, the panel on the right */
  .cl-cp{grid-row:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:clamp(22px,3vw,40px);align-items:center}
  .cl-win{padding-top:0}
  /* small tiles become rows: icon on the left, words on the right (no tall empty tiles on two columns) */
  .cl-tile:not(.cl-cp):not(.cl-free){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-content:start}
  .cl-tile:not(.cl-cp):not(.cl-free) .prod-ic{grid-row:1/3;margin:0}
}
@media (max-width:760px){
  .cl-bento{grid-template-columns:minmax(0,1fr)}
  .cl-cp,.cl-free{grid-column:auto}
  .cl-cp{display:flex;align-items:stretch}   /* the 2-column rule centres; a column must stretch the panel */
  .cl-win{padding-top:24px}
  .cl-free ul{grid-template-columns:minmax(0,1fr);gap:14px}
}
@media (max-width:520px){
  /* the lock already says SSL: on a phone the row keeps the domain whole and the PHP version */
  .cl-win ul{padding-inline:12px}
  .cl-win li{gap:8px}
  .cl-win .c:not(:last-child){display:none}
}
@media (max-width:380px){.cl-win .c .p{display:none}}   /* 320px: "8.3" is enough, the domain stays whole */

/* ---- 6. WEB, CLOUD OR BULK ---- */
.cw{padding:var(--sec) var(--pad)}
.cw-in{max-width:var(--maxw);margin-inline:auto}
.cw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);align-items:stretch}
.cw-card{position:relative;display:flex;flex-direction:column;border-radius:var(--r-l);
  padding:clamp(24px,2.5vw,36px);overflow:hidden;transition:translate .5s var(--e)}
.cw-card>*{position:relative;z-index:2}
.cw-card:hover{translate:0 -4px}
.cw-card:hover .prod-ic{color:var(--ink);border-color:var(--w30);transform:translateY(-3px)}
.cw-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:clamp(28px,3.2vw,46px)}
.cw-card h3{font-size:clamp(1.4rem,2vw,1.85rem);font-weight:400;letter-spacing:-.03em;margin-bottom:20px}
.cw-k{margin-bottom:14px;font-family:var(--fd);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--w56)}
.cw-list{display:grid;gap:11px;margin-bottom:30px}
.cw-list li{position:relative;padding-left:22px;font-size:14px;line-height:1.55;color:var(--w72)}
.cw-list li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:1px;background:var(--w42)}
.cw-card .prod-price{margin-top:auto}
/* web and cloud carry "la plata pe 36 de luni" under the price, Bulk (monthly / yearly) does not: on three
   columns an empty line as tall as that note (12px × 1.5, after the same 4px row gap) under Bulk's price keeps
   the three price rules and figures level. Stacked cards don't need it */
@media (min-width:981px){
  .cw-grid:has(.prod-price small) .prod-price:not(:has(small))::after{content:"";flex-basis:100%;height:18px}
}
.cw-go{align-self:flex-start;margin-top:18px}
/* the page you are on: a white card on the black page (the mirror of .featured on a white sheet) */
.cw-card.here{
  --bg:#fff; --ink:#0a0a0a;
  --w96:rgba(10,10,10,.94); --w72:rgba(10,10,10,.76); --w56:rgba(10,10,10,.62); --w42:rgba(10,10,10,.52);
  --w30:rgba(10,10,10,.36); --w18:rgba(10,10,10,.2); --w12:rgba(10,10,10,.13); --w08:rgba(10,10,10,.09);
  --w05:rgba(10,10,10,.065); --w03:rgba(10,10,10,.035);
  --acc:#0a0a0a; --acc-72:rgba(10,10,10,.72); --acc-30:rgba(10,10,10,.3); --glow:none;
  color:var(--ink);background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 34px 80px -40px rgba(255,255,255,.28)}
.cw-card.here::before{background:linear-gradient(140deg,rgba(0,0,0,.16),rgba(0,0,0,.05) 30%,rgba(0,0,0,.03) 55%,rgba(0,0,0,.1))}
.cw-card.here.spot::after{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(0,0,0,.05),transparent 62%)}
.cw-card.here ::selection{background:#0a0a0a;color:#fff}
.cw-card.here :focus-visible{outline-color:rgba(10,10,10,.7)}
.cw-card.here .tlink{color:var(--w72)}
.cw-card.here .tlink:hover{color:var(--ink)}
.cw-card.here .tlink::before{background:var(--ink)}
.cw-card.here .tlink::after{background:var(--w18)}
@media (max-width:980px){
  .cw-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
}

/* ---- 7. REDUCED MOTION ---- */
@media (prefers-reduced-motion:reduce){
  .pm-pips i{clip-path:inset(0 calc(100% - var(--v,1) * 100%) 0 0)!important;transition:none!important}
  .cl-php::after,.cl-win li{animation:none!important}
  .ph-slots i,.ph-slots i::before,.ph-slots i::after,.ph-q-d i,.ph-q-none,.ph-big b{transition:none!important;animation:none!important}
  .ph-slots i::after{transform:scaleX(.66)}
  .cw-card:hover,.cl-tile:hover{translate:none}
  .cl-tile:hover .prod-ic{transform:none}
}

/* ---- 8. PAYMENT PROMISES (#garantie): the 30-day money-back guarantee and the renewal at the same price,
   said in full once, between the cards and how you buy (docs/preturi-multi-an.md). The line under the plan
   switch points here; FAQ gc6 / gc8 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 ---- */
#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,5vw,66px) 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}
}

/* ---- 9. FAQ (gc6): the four periods, plan by plan — copied from gazduire-web.css §9. Cloud 2 and 3 are not
   sold on 2 or 3 years: their cells hold a dash (hidden from screen readers, which hear "nu") ---- */
.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)}
.fq-t td.na{color:var(--w56)}
@media (max-width:440px){.fq-t th,.fq-t td{padding:8px 8px}.fq-t th:first-child{padding-left:0}}