/* ============================================================
   bulk.html only — linked after host.css from the Găzduire Bulk page.
   Everything else on the page comes from style.css + host.css.
   1. Plans: each card carries only what differs (the disk, drawn to
      scale up to 1 TB, and the separate server); what all three share
      is said once, in "Inclus în toate trei" (.bk-inc), joined to the
      cards by a drawn bracket (.bk-join)
   2. "Pentru cine": audience list + the one-cPanel illustration
   3. Comparison: only the rows that differ, Cloud 3 as a reference column
   4. "Nelimitat, spus cinstit": three cards, glyphs drawn on reveal
   5. Migration: four steps + the short conditions
   Bars start empty only once script.js has run (body.ready), so without
   JS they simply show their value.
   ============================================================ */

/* ---- 1. PLANS ---- */
/* the switch and, under it, the one payment rule it cannot show */
.pl-head.bk{flex-direction:column;align-items:center;gap:16px}
.pl-per{max-width:none;text-align:center;font-size:13px;line-height:1.6;color:var(--w56);text-wrap:balance}
.pl-per b{font-weight:600;color:var(--ink)}
/* section leads and notes break into even lines, never one orphan word */
#planuri .shead .lead,#comparatie .shead .lead,#comparatie .cmp-note,#alte .lead{text-wrap:balance}

/* the fine print, as three labelled facts instead of one centred paragraph */
.bk-terms{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr) minmax(0,.8fr);gap:20px clamp(24px,3vw,52px);
  max-width:1120px;margin:clamp(34px,4vw,50px) auto 0;padding-top:24px;border-top:1px solid var(--w08)}
.bk-terms dt{margin-bottom:8px;font-family:var(--fd);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--w56)}
.bk-terms dd{font-size:13px;line-height:1.62;color:var(--w56)}
.bk-terms a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){
  .bk-terms{grid-template-columns:1fr;gap:18px}
  #comparatie .cmp-note{text-align:left}
}

/* a text label and a pill badge get the same row height, so names and prices line up across the row */
#planuri .pl-top{min-height:28px}

/* the spec: two rows with the same labels in every card, so the eye reads across the row */
.bk-spec{display:grid;margin-bottom:30px}
.bk-spec>div{display:grid;gap:10px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--w05)}
.bk-spec>div:last-child{margin-bottom:0}
.bk-spec dt{font-family:var(--fd);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--w56)}
.bk-spec dd{display:flex;align-items:center;gap:11px;min-height:22px;font-size:14.5px;line-height:1.4;color:var(--w96)}
.bk-spec dd.off{color:var(--w56)}
.bk-spec .cmp-yes,.bk-spec .cmp-no{flex:none}
.bk-disk dd{display:grid;gap:13px}
.bk-disk b{font-family:var(--fd);font-weight:400;font-size:clamp(1.6rem,2.1vw,1.95rem);line-height:1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
/* the disk bar: one scale for all three (1 TB = full), drawn once the cards arrive */
.bk-bar{display:block;height:6px;border-radius:6px;background:var(--w08);overflow:hidden}
.bk-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--w30),var(--ink));
  transform:scaleX(var(--v,1));transform-origin:left}
body.ready .pl-grid:not(.in) .bk-bar i{transform:scaleX(0)}
.pl-grid.in .bk-bar i{transition:transform 1.6s var(--e) calc(.45s + var(--k,0) * .16s)}
.pl-grid>:nth-child(2){--k:1}
.pl-grid>:nth-child(3){--k:2}

/* order row: the order page first, WhatsApp as the quiet second way — on one line, with a 32px target */
.pl-acts{margin-top:auto;display:grid;gap:10px}
.pl-acts .pl-cta{margin-top:0}
.pl-wa{justify-self:center;display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 6px;
  font-size:12.5px;color:var(--w56);text-decoration:underline;text-decoration-color:var(--w30);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}
/* Bulk 300 has one order button per period; the switch shows the right one (no JS of its own) */
[data-pl]:not([data-per="y"]) .pl-cta-y,[data-pl][data-per="y"] .pl-cta-m{display:none}
/* yearly only: the price stays put while Bulk 300 swaps its own... */
.pl-grid.swap .pl-card.yo .pl-price>span{opacity:1;transform:none}
/* ...and the "Doar anual" badge lights up (and nudges) when "Lunar" is chosen */
.pl-card.yo .pl-badge{transition:background-color .45s var(--e),color .45s var(--e),border-color .45s var(--e)}
[data-pl]:not([data-per="y"]) .pl-card.yo .pl-badge{background:var(--ink);border-color:var(--ink);color:var(--bg);
  animation:bkNudge .7s var(--e) both}
[data-pl]:not([data-per="y"]) .pl-card.yo .pl-badge .led{background:var(--bg);box-shadow:none}
@keyframes bkNudge{0%,100%{transform:none}20%{transform:translateX(-4px)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}}

/* the bracket: a line down from each card, joined, then down into the shared block (three columns only) */
.bk-join{--g:clamp(14px,1.6vw,22px);position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g);
  height:clamp(44px,4.4vw,64px)}
.bk-join i{position:relative}
.bk-join i::before,.bk-join::before,.bk-join::after{content:"";position:absolute;background:var(--w18)}
.bk-join i::before{left:50%;top:0;width:1px;height:50%;transform-origin:top}
.bk-join::before{top:50%;height:1px;left:calc((100% - 2 * var(--g)) / 6);right:calc((100% - 2 * var(--g)) / 6)}
.bk-join::after{left:50%;top:50%;bottom:0;width:1px;transform-origin:top}
.bk-join i:nth-child(2)::after{content:"";position:absolute;z-index:1;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--bg)}
body.ready .bk-join:not(.in) i::before,body.ready .bk-join:not(.in)::after{transform:scaleY(0)}
body.ready .bk-join:not(.in)::before{transform:scaleX(0)}
body.ready .bk-join:not(.in) i:nth-child(2)::after{transform:scale(0)}
.bk-join.in i::before{transition:transform .55s var(--e) .15s}
.bk-join.in::before{transition:transform .8s var(--e) .55s}
.bk-join.in i:nth-child(2)::after{transition:transform .6s var(--e-spring,var(--e)) 1.05s}
.bk-join.in::after{transition:transform .5s var(--e) 1.2s}

/* "Inclus în toate trei": what the plans share, said once */
.bk-inc{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);
  gap:clamp(26px,3vw,44px) clamp(32px,4.4vw,80px);padding:clamp(24px,3.4vw,52px);border-radius:var(--r-l);overflow:hidden}
.bk-inc>*{position:relative;z-index:2}
.bk-inc-h h3{font-size:clamp(1.45rem,2.1vw,1.9rem);font-weight:400;letter-spacing:-.03em;line-height:1.1;margin-bottom:22px}
.bk-inf4{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:22px}
.bk-inf4 li{display:grid;gap:12px;padding:14px 14px 13px;border-radius:14px;border:1px solid var(--w08);background:var(--w03)}
.bk-inf4 svg{width:30px;height:15px;fill:none;stroke:var(--ink);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.bk-inf4 span{font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.bk-inf4 small{display:block;margin-top:3px;font-size:12px;font-weight:400;letter-spacing:0;color:var(--w56)}
.bk-inc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,2.6vw,38px) clamp(20px,2.4vw,36px);
  align-content:center}
.bk-inc-grid li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start}
.bk-inc-grid .prod-ic{grid-row:span 2;width:40px;height:40px;border-radius:11px}
.bk-inc-grid .prod-ic svg{width:19px;height:19px}
.bk-inc-grid h4{margin:1px 0 5px;font-size:15px;font-weight:600;letter-spacing:-.012em;line-height:1.3;color:var(--ink)}
.bk-inc-grid p{font-size:13px;line-height:1.55;color:var(--w56)}
.bk-inc-f{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 40px;
  padding-top:22px;border-top:1px solid var(--w08)}
.bk-inc-f>div{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.bk-inc-f .k{font-family:var(--fd);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--w56)}
.bk-inc-f ul{display:flex;flex-wrap:wrap;gap:8px 22px}
.bk-inc-f li{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--w96)}
.bk-inc-f .led{width:6px;height:6px}
.bk-inc-f .led::after{display:none}
.bk-dom li{gap:0}
.bk-dom b{font-family:var(--fd);font-weight:400;letter-spacing:.04em;margin-right:8px}
@media (max-width:1180px){
  .bk-inc{grid-template-columns:1fr}
  .bk-inf4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:980px){
  .bk-join{display:none}
  .bk-inc{max-width:560px;margin:26px auto 0}
  .bk-inf4{grid-template-columns:1fr 1fr}
  .bk-inc-grid{grid-template-columns:1fr;gap:20px}
  .bk-inc-f{flex-direction:column;align-items:flex-start}
}

/* ---- 2. PENTRU CINE — who it is for, and the one-cPanel illustration ---- */
.bk-for{padding:var(--sec) var(--pad)}
.bk-for-in{max-width:var(--maxw);margin-inline:auto}
.bk-split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(40px,5.5vw,100px);align-items:center}
.bk-aud{margin-top:clamp(30px,3.4vw,48px);border-top:1px solid var(--w08)}
.bk-aud li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;padding:22px 0;border-bottom:1px solid var(--w08)}
.bk-aud .n{grid-row:1/3;padding-top:5px;font-family:var(--fd);font-size:10.5px;letter-spacing:.2em;color:var(--w30)}
.bk-aud h3{font-size:clamp(17px,1.35vw,19px);font-weight:500;letter-spacing:-.015em;line-height:1.3;margin-bottom:6px}
.bk-aud p{font-size:14px;line-height:1.62;color:var(--w56);max-width:54ch}

/* one cPanel account, its domain list rolling on without end: the number of sites is not
   the limit, the disk is. The list is written twice and moves by half its height, so the
   loop has no seam (each row carries its own bottom margin, no grid gap) */
.bk-cp{position:relative;margin:0;border-radius:var(--r-l);overflow:hidden}
.bk-cp>*{position:relative;z-index:2}
.bk-cp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 12px;
  font-family:var(--fd);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--w42)}
.bk-inf{width:46px;height:23px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.bk-cp-win{position:relative;height:clamp(250px,24vw,300px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
.bk-cp-list{padding:0 16px;animation:bkRoll 32s linear infinite}
.bk-cp:hover .bk-cp-list{animation-play-state:paused}
.bk-cp-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;
  margin-bottom:6px;padding:11px 14px;border-radius:12px;border:1px solid var(--w05);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008))}
.bk-cp-list .led{width:6px;height:6px}
.bk-cp-list .led::after{display:none}
.bk-cp-list .d{font-family:var(--fm);font-size:12.5px;color:var(--w96);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-cp-list .s{font-family:var(--fd);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--w56)}
.bk-cp-list .c{font-family:var(--fd);font-size:9px;letter-spacing:.16em;padding:3px 8px;border-radius:var(--r-pill);
  border:1px solid var(--w12);color:var(--w56)}
@keyframes bkRoll{to{transform:translate3d(0,-50%,0)}}
.bk-cp-foot{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--w05)}
.bk-cp-foot>div{display:grid;gap:6px;padding:16px 20px}
.bk-cp-foot>div+div{border-left:1px solid var(--w05)}
.bk-cp-foot span{font-family:var(--fd);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--w42)}
.bk-cp-foot b{font-size:15px;font-weight:500;letter-spacing:-.01em;color:#fff}
.bk-cp-cap{padding:12px 20px 16px;border-top:1px solid var(--w05);font-size:11px;color:var(--w42)}
/* desktop: the illustration starts level with the title and stays beside the list while it is read */
@media (min-width:981px){
  .bk-split{align-items:start}
  .bk-cp{position:sticky;top:calc(var(--hd-h,86px) + 40px)}
}
@media (max-width:980px){
  .bk-split{grid-template-columns:1fr}
  .bk-cp{max-width:560px;width:100%;margin-inline:auto}
}

/* ---- 3. COMPARISON — Cloud 3 for reference, "nu" and "doar anual" cells ---- */
.cmp-no{display:inline-block;width:12px;height:1.5px;border-radius:1px;background:currentColor;vertical-align:middle;opacity:.5}
.cmp-na{font-family:var(--fd);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--w42);white-space:nowrap}
.cmp-t .ref{color:var(--w56)}
.cmp-t th.ref,.cmp-t td.ref{border-left:1px dashed var(--w18)}
.cmp-t thead .ref .cmp-h b{color:var(--w72)}
.cmp-h em{display:block;margin-top:7px;font-style:normal;font-family:var(--fd);font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--w42)}
/* the disk row: the same to-scale bar as the plan cards (1 TB = full), drawn when the table arrives */
.bk-cv{display:inline-grid;justify-items:center;gap:9px}
.bk-cv i{position:relative;display:block;width:clamp(64px,6vw,88px);height:4px;border-radius:4px;background:var(--w08);overflow:hidden}
.bk-cv i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ink);
  transform:scaleX(var(--v,1));transform-origin:left}
.cmp-t .ref .bk-cv i::after{background:var(--w42)}
body.ready .cmp:not(.in) .bk-cv i::after{transform:scaleX(0)}
.cmp.in .bk-cv i::after{transition:transform 1.5s var(--e) .5s}
@media (max-width:760px){.cmp-t.c5{min-width:720px}}

/* ---- 4. NELIMITAT, SPUS CINSTIT — three cards; each glyph draws itself once the row is in view ---- */
.bk-unl{padding:var(--sec) var(--pad)}
.bk-unl-in{max-width:var(--maxw);margin-inline:auto}
.bk-lg{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.bk-lg-card{position:relative;border-radius:var(--r-l);padding:clamp(24px,2.6vw,38px);overflow:hidden}
.bk-lg-card>*{position:relative;z-index:2}
.bk-gl{display:block;width:clamp(84px,7.4vw,108px);height:auto;margin-bottom:clamp(28px,3.2vw,44px);
  fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.bk-gl path{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;
  transition:stroke-dashoffset 2.2s var(--e) var(--gd,.25s),opacity .3s var(--e) var(--gd,.25s)}
.bk-gl .f{stroke-width:6}
.bk-lg.in .bk-gl path{stroke-dashoffset:0;opacity:1}
.bk-lg-card h3{font-size:clamp(1.35rem,2vw,1.8rem);font-weight:400;letter-spacing:-.03em;margin-bottom:20px}
.bk-lg-l{border-top:1px solid var(--w05)}
.bk-lg-l li{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--w05)}
.bk-lg-l b{font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--w96)}
.bk-lg-l span{font-size:13.5px;line-height:1.6;color:var(--w56)}
.bk-lg-l a{color:var(--w72);text-decoration:underline;text-underline-offset:3px}
@media (max-width:980px){.bk-lg{grid-template-columns:1fr;max-width:620px;margin-inline:auto}}

/* ---- 5. MIGRATION — four steps on a line that fills as they arrive, then the conditions ---- */
.bk-mv{padding:var(--sec) var(--pad)}
.bk-mv-in{max-width:var(--maxw);margin-inline:auto}
.bk-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,40px);
  margin-top:clamp(44px,5vw,76px)}
.bk-steps::before{content:"";position:absolute;left:22px;right:0;top:22px;height:1px;background:var(--w18);
  transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--e) .15s}
.bk-steps.in::before{transform:scaleX(1)}
.bk-step{position:relative}
.bk-step .n{position:relative;display:grid;place-items:center;width:44px;height:44px;margin-bottom:28px;border-radius:50%;
  border:1px solid var(--w18);background:var(--bg);font-family:var(--fd);font-size:10.5px;letter-spacing:.1em;color:var(--ink);
  transition:background-color .6s var(--e) calc(.35s + var(--k,0) * .38s),color .6s var(--e) calc(.35s + var(--k,0) * .38s),
    border-color .6s var(--e) calc(.35s + var(--k,0) * .38s)}
.bk-steps.in .bk-step .n{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.bk-step h3{font-size:clamp(17px,1.35vw,19px);font-weight:500;letter-spacing:-.015em;line-height:1.3;margin-bottom:10px}
.bk-step p{font-size:14px;line-height:1.62;color:var(--w56)}
.bk-cond{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,48px);margin-top:clamp(44px,5vw,72px);
  padding:clamp(24px,3vw,40px);border-radius:var(--r-l);border:1px solid var(--w08);background:var(--w03)}
.bk-cond h3{font-family:var(--fd);font-size:10px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;
  color:var(--w56);margin-bottom:14px}
.bk-cond li{position:relative;padding-left:26px;font-size:14px;line-height:1.55;color:var(--w72)}
.bk-cond li+li{margin-top:10px}
.bk-cond .yes li::before{content:"";position:absolute;left:1px;top:.3em;width:12px;height:6px;
  border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(-45deg)}
.bk-cond .no li::before{content:"";position:absolute;left:1px;top:.72em;width:12px;height:1.5px;background:var(--w42)}
.bk-cond-f{grid-column:1/-1;padding-top:18px;border-top:1px solid var(--w08);font-size:12.5px;line-height:1.6;color:var(--w56)}
.bk-cond-f a{color:var(--w72);text-decoration:underline;text-underline-offset:3px}
@media (max-width:980px){.bk-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}.bk-steps::before{display:none}}
@media (max-width:760px){.bk-cond{grid-template-columns:1fr}}
@media (max-width:560px){.bk-steps{grid-template-columns:1fr}}

/* ---- keep the design, drop the movement ---- */
@media (prefers-reduced-motion:reduce){
  .bk-cp-list{animation:none}
  .bk-gl path{transition:none;stroke-dashoffset:0;opacity:1}
  .bk-steps::before{transition:none;transform:none}
  .bk-step .n{transition:none}
  [data-pl]:not([data-per="y"]) .pl-card.yo .pl-badge{animation:none}
  .bk-bar i,.bk-cv i::after{transition:none!important;transform:scaleX(var(--v,1))!important}
  .bk-join i::before,.bk-join::before,.bk-join::after,.bk-join i:nth-child(2)::after{transition:none!important;transform:none!important}
}