/* ============================================================
   comanda.html only — linked after host.css from that page.
   The order configurator (docs/checkout-spec.md): blocks 01–07 as
   glass panels on black, the live summary as a white sheet (sticky
   from 1100px), the phone bar, the thank-you state, print.
   Radios and checkboxes stay native inputs, visually hidden inside
   their labels; comanda.js adds .co-chk to a checked label (a
   fallback for :has). Every class is prefixed co-.
   1. Hero: the four steps     5. Domain, extra domains
   2. Section, grid, blocks    6. Checkboxes, errors, send
   3. Cards and options        7. Summary (white sheet)
   4. Segmented control, plans 8. Phone bar, thank-you, print
   4b. Period cards (3 ani / 2 ani / 1 an / Lunar), 6. also the
       30-day guarantee under the button (docs/preturi-multi-an.md)
   ============================================================ */

html{scroll-padding-top:104px}

/* ---- 1. HERO: how an order is concluded (Legea 365/2002, art. 8), as a rail that lights up step by step once
   the card is revealed (script.js adds .in). Step 01 stays lit: it is the one you are on. ---- */
.co-steps-l{display:grid;padding:14px 22px 8px}
.co-steps-l li{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:16px;padding:13px 0}
.co-steps-l .pm-n{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--w18);background:#0c0c0e;letter-spacing:.06em;color:var(--w56);
  transition:background-color .5s var(--e),border-color .5s var(--e),color .5s var(--e)}
.co-steps-l li:not(:last-child)::before,.co-steps-l li:not(:last-child)::after{content:"";position:absolute;left:15px;top:49px;bottom:-7px;
  width:1px;background:var(--w12)}
.co-steps-l li:not(:last-child)::after{background:linear-gradient(180deg,#fff,var(--w30));transform:scaleY(0);transform-origin:top;
  transition:transform .7s var(--e)}
.co-steps.in .co-steps-l li::after{transform:none}
.co-steps.in .co-steps-l li:nth-child(1)::after{transition-delay:.75s}
.co-steps.in .co-steps-l li:nth-child(2)::after{transition-delay:1.2s}
.co-steps.in .co-steps-l li:nth-child(3)::after{transition-delay:1.65s}
.co-steps.in .co-steps-l .pm-n{border-color:var(--w42);color:#fff}
.co-steps.in .co-steps-l li:nth-child(2) .pm-n{transition-delay:1.05s}
.co-steps.in .co-steps-l li:nth-child(3) .pm-n{transition-delay:1.5s}
.co-steps.in .co-steps-l li:nth-child(4) .pm-n{transition-delay:1.95s}
.co-steps.in .co-steps-l li:first-child .pm-n{background:#fff;border-color:#fff;color:#000;transition-delay:.45s}
.co-steps-l b{display:block;margin:4px 0 3px;font-size:15px;font-weight:500;letter-spacing:-.01em;color:#fff}
.co-steps-l span:not(.pm-n){display:block;font-size:12.5px;line-height:1.55;color:var(--w56)}
/* one order button in the hero; WhatsApp is the small text link under it (checkout-spec §7), like the plan cards' "sau pe WhatsApp" */
.co-hacts{flex-direction:column;align-items:flex-start;gap:8px}
.co-hwa{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 2px;font-size:13.5px;line-height:1.3;color:var(--w72);
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--w30);
  transition:color var(--t1) var(--e),text-decoration-color var(--t1) var(--e)}
.co-hwa:hover,.co-hwa:focus-visible{color:#fff;text-decoration-color:currentColor}
.co-hwa svg{flex:none}

/* ---- 2. SECTION, GRID, BLOCKS ---- */
.co{position:relative;padding:clamp(20px,4vw,56px) var(--pad) clamp(56px,7vw,110px)}
.co-in{max-width:var(--maxw);margin-inline:auto}
/* the contact band right after the configurator: with both paddings there were ~330px of black at 1440 */
.cband{padding-top:clamp(40px,5vw,80px)}

/* compact head: the title + the seven blocks as a stepper (jump links). The line draws once, 01 is lit (the
   block you start with). Under 641px the labels go to screen readers only; the numbers stay. */
.co-head{display:grid;gap:clamp(26px,3vw,44px);margin-bottom:clamp(30px,3.6vw,52px)}
.co-head .eyebrow{margin-bottom:20px}
.co-head h2{font-size:clamp(2rem,3.6vw,3.1rem)}
.co-toc ol{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.co-toc li{position:relative;display:flex;justify-content:center;min-width:0}
.co-toc li:not(:last-child)::after{content:"";position:absolute;top:17px;left:calc(50% + 27px);width:calc(100% - 54px);height:1px;
  background:linear-gradient(90deg,var(--w42),var(--w12));transform:scaleX(0);transform-origin:left;transition:transform .7s var(--e)}
.co-toc.in li::after{transform:none}
.co-toc.in li:nth-child(1)::after{transition-delay:.35s}
.co-toc.in li:nth-child(2)::after{transition-delay:.5s}
.co-toc.in li:nth-child(3)::after{transition-delay:.65s}
.co-toc.in li:nth-child(4)::after{transition-delay:.8s}
.co-toc.in li:nth-child(5)::after{transition-delay:.95s}
.co-toc.in li:nth-child(6)::after{transition-delay:1.1s}
.co-toc a{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:44px;max-width:100%;padding:0 4px 4px;
  text-align:center;color:var(--w56);transition:color var(--t1) var(--e)}
.co-toc b{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;border:1px solid var(--w18);
  background-color:rgb(255 255 255/.03);box-shadow:inset 0 1px 0 rgb(255 255 255/.1);
  font-family:var(--fd);font-size:10.5px;font-weight:400;letter-spacing:.08em;color:var(--w72);
  transition:transform var(--t2) var(--e),border-color var(--t1) var(--e),color var(--t1) var(--e),background-color var(--t1) var(--e)}
.co-toc span{font-size:12.5px;line-height:1.3;letter-spacing:-.005em}
.co-toc li:first-child b{background:#fff;border-color:#fff;color:#000;
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 5px rgb(0 0 0/.14),0 8px 20px -8px rgb(255 255 255/.4)}
.co-toc a:hover,.co-toc a:focus-visible{color:#fff}
.co-toc a:hover b,.co-toc a:focus-visible b{border-color:#fff;color:#fff;transform:translateY(-3px)}
.co-toc li:first-child a:hover b,.co-toc li:first-child a:focus-visible b{color:#000}
.co-in:has(#coForm[hidden]) .co-toc{display:none}   /* no JS, or the thank-you state: nothing to jump to */
@media (max-width:640px){
  .co-toc span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .co-toc a{min-height:44px;justify-content:center;padding:0}
  .co-toc b{width:34px;height:34px}
  .co-toc li:not(:last-child)::after{top:50%;left:calc(50% + 21px);width:calc(100% - 42px)}
}
.co-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.6vw,20px)}
.co-main{display:grid;gap:clamp(14px,1.6vw,20px);min-width:0}
.co-send{min-width:0}
@media (min-width:1100px){
  .co-grid{grid-template-columns:minmax(0,1fr) minmax(340px,410px);column-gap:clamp(26px,2.6vw,44px);align-items:start}
  .co-main{grid-column:1;grid-row:1}
  .co-send{grid-column:1;grid-row:2}
  /* no transition on top and no overscroll-behavior / scrollbar-width on the scroller below: together with the glass
     header, WebKit (Safari, WKWebView) painted the header unstyled over the sticky sheet at 1100–1365px (11.09.2026) */
  .co-sum{grid-column:2;grid-row:1 / span 2;align-self:start;position:sticky;top:calc(var(--hd-off,86px) + 18px)}
}
.co-req{font-size:12.5px;color:var(--w56)}
/* information text is --w56 or brighter (>= 4.5:1 on the glass and on the white sheet); --w42 / --w30 only for decoration */

.co-card{position:relative;border-radius:var(--r-l);padding:clamp(22px,2.8vw,40px);overflow:hidden}
.co-card>*{position:relative;z-index:2}
.co-blk,.co-fs{min-width:0;min-inline-size:0;margin:0;padding:0;border:0}
.co-lg{float:left;width:100%;display:flex;align-items:center;gap:14px;padding:0;margin:0 0 10px}
.co-lg~*{clear:both}
.co-n{flex:none;display:inline-grid;place-items:center;min-width:44px;height:30px;padding:0 10px;border-radius:var(--r-pill);
  border:1px solid var(--w30);font-family:var(--fd);font-size:10.5px;letter-spacing:.2em;color:#fff;
  transition:background-color .4s var(--e),border-color .4s var(--e),color .4s var(--e)}
/* the block you are filling in lights its number */
.co-card:focus-within .co-n{background:#fff;border-color:#fff;color:#000}
.co-t{font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:400;letter-spacing:-.025em;line-height:1.2;color:#fff}
.co-t small{font-size:.62em;letter-spacing:0;color:var(--w56)}
.co-hint{clear:both;max-width:62ch;margin-bottom:clamp(18px,2vw,26px);font-size:13.5px;line-height:1.6;color:var(--w56)}
.co-lg2{float:left;width:100%;padding:0;margin:0 0 12px;font-family:var(--fd);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--w56)}
.co-lg2~*{clear:both}   /* every sibling, not just the next: the next one can be hidden, and a grid beside the float shrinks to nothing */
.co-sub{display:grid;gap:clamp(20px,2.4vw,28px);margin-top:clamp(20px,2.2vw,26px);padding-top:clamp(20px,2.2vw,26px);border-top:1px solid var(--w08)}
.co-mini{margin-top:10px;font-size:12.5px;line-height:1.6;color:var(--w56)}
.co-mini--top{margin:0 0 14px}
.co-mini a,.co-hint a{color:var(--w72);text-decoration:underline;text-underline-offset:3px}
.co-mini a:hover{color:#fff}
.co-linknote{margin:0 0 12px;color:var(--w72)}
.co-fields{margin-top:clamp(18px,2vw,24px)}
.co-radios .f-err{margin-top:10px}

/* ---- 3. CARDS AND OPTIONS (checkbox cards, radio cards) ---- */
.co-pick input,.co-opt input,.co-seg input,.co-rin,.co-check input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.co-what{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-pick,.co-opt,.co-plan,.co-per{position:relative;display:block;cursor:pointer;border-radius:18px;border:1px solid var(--w12);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));color:#fff;
  transition:border-color var(--t1) var(--e),background-color var(--t1) var(--e),color var(--t1) var(--e),box-shadow var(--t2) var(--e),transform var(--t2) var(--e)}
.co-pick:hover,.co-opt:hover,.co-plan:hover,.co-per:hover{border-color:var(--w30)}
.co-pick:has(input:focus-visible),.co-opt:has(input:focus-visible),.co-plan:has(input:focus-visible),.co-per:has(input:focus-visible),.co-seg label:has(input:focus-visible){outline:2px solid #fff;outline-offset:3px}
/* checked: the card turns white, its tokens flip to ink */
.co-pick.co-chk,.co-opt.co-chk,.co-plan.co-chk,.co-per.co-chk{
  --ink:#0a0a0a;--w72:rgba(10,10,10,.76);--w56:rgba(10,10,10,.64);--w42:rgba(10,10,10,.54);--w30:rgba(10,10,10,.36);
  --w18:rgba(10,10,10,.2);--w12:rgba(10,10,10,.13);--w08:rgba(10,10,10,.09);--acc:#0a0a0a;--acc-72:rgba(10,10,10,.72);--glow:none;
  color:#0a0a0a;background:#fff;border-color:#fff;box-shadow:0 22px 50px -30px rgba(255,255,255,.45)}
.co-dis{opacity:.4;cursor:not-allowed}
/* these cards are <label>s inside .f-g groups: undo the field-label look of style.css (.f-g label) */
.co .f-g label.co-pick,.co .f-g label.co-opt,.co .f-g label.co-plan,.co .f-g label.co-check{margin:0;font-family:var(--fb);
  font-size:16px;letter-spacing:normal;text-transform:none;line-height:1.5;color:#fff}
.co .f-g label.co-pick{display:grid}
.co .f-g label.co-opt{display:block}
.co .f-g label.co-plan{display:flex}
.co .f-g label.co-check{display:grid;color:inherit}
.co .f-g label.co-chk{color:#0a0a0a}
@media (max-width:760px){.co .f-g label.co-plan{display:grid}}

.co-pick{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;padding:18px}
.co-pick-ic{width:44px;height:44px;border-radius:var(--r-s);display:grid;place-items:center;border:1px solid var(--w12);color:var(--w72)}
.co-pick-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.co-pick-b b{display:block;margin:2px 0 4px;font-size:15.5px;font-weight:500;letter-spacing:-.015em}
.co-pick-b span{display:block;font-size:12.5px;line-height:1.5;color:var(--w56)}
.co-tick{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--w30);display:grid;place-items:center;
  transition:background-color var(--t1) var(--e),border-color var(--t1) var(--e)}
.co-tick--sq{border-radius:7px}
.co-chk .co-tick{background:#0a0a0a;border-color:#0a0a0a}
.co-chk .co-tick::after{content:"";width:9px;height:4.5px;border-left:1.7px solid #fff;border-bottom:1.7px solid #fff;transform:translateY(-1px) rotate(-45deg)}

.co-opts{display:grid;gap:10px}
.co-opts--2,.co-opts--4,.co-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.co-opts--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.co-opt{padding:15px 16px 15px 46px}
.co-opt::before{content:"";position:absolute;left:16px;top:18px;width:16px;height:16px;border-radius:50%;border:1px solid var(--w42);
  transition:border var(--t1) var(--e)}
.co-opt.co-chk::before{border:5px solid #0a0a0a}
.co-opt-b b{display:block;font-size:14.5px;font-weight:500;letter-spacing:-.01em;line-height:1.35}
.co-opt-b b em{font-style:normal;font-weight:400;color:var(--w56);white-space:nowrap}
.co-opt-b>span{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--w56)}
.co-opt-b .co-from{margin:6px 0 4px;font-size:12px;color:var(--w56)}
.co-from em{font-style:normal;font-family:var(--fd);font-size:1.45rem;letter-spacing:-.02em;color:var(--ink,#fff);margin-left:4px}
.co-opt:not(.co-chk) .co-from em{color:#fff}

/* ---- 4. SEGMENTED CONTROL (radios), PLAN CARDS ---- */
.co-seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;max-width:100%;padding:5px;
  border-radius:var(--r-pill);border:1px solid var(--w08);background-color:rgb(255 255 255/.04);
  box-shadow:inset 0 1px 3px rgb(0 0 0/.45),inset 0 -1px 0 rgb(255 255 255/.06)}
.co-seg label{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:44px;
  padding:9px 22px;border-radius:var(--r-pill);cursor:pointer;text-align:center;
  font-family:var(--fd);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--w56);
  transition:color .4s var(--e),background-color .4s var(--e),box-shadow .4s var(--e)}
.co-seg label:hover{color:#fff}
.co-seg label.co-chk{background:#fff;color:#000;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.9),inset 0 -2px 5px rgb(0 0 0/.14),0 6px 16px -8px rgb(0 0 0/.6)}
.co-seg label.co-dis{opacity:.35}

.co-plans-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.co-plan{display:flex;flex-direction:column;padding:18px 18px 20px}
.co-plan-top{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.co-plan-n{font-family:var(--fd);font-size:10px;letter-spacing:.2em;color:var(--w30)}
.co-badge{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--w18);
  font-family:var(--fd);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--w72)}
.co-badge .led{width:5px;height:5px}
.co-badge .led::after{display:none}
.co-plan .co-tick{margin-left:auto}
/* the badge of the product page ("Pentru magazine online", "Doar anual"), on its own row */
.co-plan-tag{display:flex;min-height:22px;margin:-8px 0 12px}
.co-plan-tag .co-badge{max-width:100%;padding:4px 9px;border-radius:11px;letter-spacing:.12em;line-height:1.35}
.co-plan-name{font-size:1.15rem;font-weight:500;letter-spacing:-.02em;margin-bottom:8px}
.co-plan-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px}
.co-pv{font-family:var(--fd);font-weight:400;font-size:clamp(1.6rem,2.2vw,2rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.co-pp{font-size:12.5px;color:var(--w56)}
/* under the price: the total paid at once (information, so --w56: >= 4.5:1) and, on a plan that lacks the chosen
   period (Cloud 2 / 3 on "3 ani"), the periods it has. The features sit at the card's foot, level from card to card */
.co-plan-eq{display:block;min-height:1.5em;margin:6px 0 14px;font-size:11.5px;line-height:1.45;color:var(--w56)}
.co-plan-eq>span{display:block}
.co-plan-alt:empty{display:none}
.co-plan-feats{display:block;margin-top:auto;padding-top:14px;border-top:1px solid var(--w08);font-size:12.5px;line-height:1.7;color:var(--w56)}
.co-plan-feats span{display:block}
@media (min-width:761px){.co-plan-eq{min-height:2.9em}}   /* the total can take two lines: keep both at every period */

/* ---- 4b. PERIOD CARDS — 3 ani / 2 ani / 1 an / Lunar (docs/preturi-multi-an.md, 11.09.2026), under the plans.
   comanda.js shows only the periods the plan is sold for (data-n = how many) and writes each card for it: what a
   month comes to (web, WordPress, cloud) or the price per period (Bulk), what is paid at once and the saving (the
   pill: hidden when there is none, but it keeps its row, so the cards never change height); before a plan is
   chosen, each period's deal. Four across where the column is wide enough, two by two where it is not. ---- */
.co-pers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.co-pers[data-n="1"]{grid-template-columns:minmax(0,340px)}
@media (min-width:761px) and (max-width:1099px),(min-width:1280px){.co-pers[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
.co-per{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:14px 14px 15px}
.co-per-top{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-bottom:4px}
.co-per-k{font-family:var(--fd);font-size:10.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase}
.co-per-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;min-height:1.9rem}
.co-per-pv{font-family:var(--fd);font-weight:400;font-size:clamp(1.3rem,1.8vw,1.55rem);line-height:1.2;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* a phrase, not a number ("9 luni gratis", "Fără reducere"): the body face — the display one has no lowercase ă */
.co-per-pv.co-per-txt{font-family:var(--fb);font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1.9rem;white-space:normal}
.co-per-pp{font-size:12px;color:var(--w56)}
.co-per-t{min-height:2.9em;font-size:12px;line-height:1.45;color:var(--w56);font-variant-numeric:tabular-nums}
.co-per-e{display:inline-flex;align-items:center;min-height:24px;margin-top:auto;padding:4px 10px;border-radius:var(--r-pill);
  background:#fff;color:#0a0a0a;font-size:11.5px;font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums}
.co-per-e.off{visibility:hidden}
.co-per-e.mute{padding-inline:0;background:none;color:var(--w56);font-weight:400}
.co-per.co-chk .co-per-e:not(.mute){background:#0a0a0a;color:#fff}
.co-per-ren{display:flex;align-items:center;gap:9px;color:var(--w72)}
.co-per-ren .led{flex:none;width:5px;height:5px;margin:0;top:0}
.co-per-ren .led::after{display:none}

/* ---- 5. DOMAIN, EXTRA DOMAINS ---- */
.co-dom-g{margin-top:clamp(18px,2vw,24px)}
.co-dom-c{display:flex;align-items:center}
.co-www{flex:none;padding-left:16px;font-family:var(--fm);font-size:13px;color:var(--w30)}
.co-dom-c input{padding-left:6px;font-family:var(--fm);font-size:14px}
.co-dmsg{margin-top:10px;font-size:13px;line-height:1.55;color:var(--w72)}
.co-dmsg:empty{display:none}
.co-tlds{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.co-tlds-k{font-size:12px;color:var(--w56)}
.co-tld{display:inline-flex;align-items:baseline;gap:7px;min-height:36px;padding:7px 13px;border-radius:var(--r-pill);
  border:1px solid var(--w12);background:var(--w03);font-size:12.5px;color:var(--w72);
  transition:border-color var(--t1) var(--e),color var(--t1) var(--e),background-color var(--t1) var(--e)}
.co-tld b{font-family:var(--fd);font-weight:400;letter-spacing:.04em;color:#fff}
.co-tld:hover{border-color:var(--w42);color:#fff;background:var(--w05)}

#co-ment{margin-bottom:clamp(22px,2.6vw,30px);padding-bottom:clamp(22px,2.6vw,30px);border-bottom:1px solid var(--w08)}
.co-more-list{display:grid;gap:10px}
.co-more-list:not(:empty){margin-bottom:12px}
.co-more-row{display:grid;grid-template-columns:minmax(0,1fr) 150px 52px;gap:10px;align-items:start}
.co-more-p{grid-column:1/-1;margin:-2px 0 2px;font-size:12px;line-height:1.5;color:var(--w56)}
.co-more-p:empty{display:none}
.co-more-tip .f-c select{padding-right:36px}
.co-del{width:52px;height:52px;border-radius:var(--r-s);border:1px solid var(--w12);display:grid;place-items:center;color:var(--w56);
  background:var(--w03);transition:color var(--t1) var(--e),border-color var(--t1) var(--e)}
.co-del:hover{color:#fff;border-color:var(--w42)}
.co-addb{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 20px;border-radius:var(--r-pill);
  border:1px dashed var(--w30);font-size:13px;color:var(--w72);transition:border-color var(--t1) var(--e),color var(--t1) var(--e)}
.co-addb span{font-size:17px;line-height:1}
.co-addb:hover{border-color:#fff;border-style:solid;color:#fff}
.co-addb[disabled]{opacity:.4;pointer-events:none}

/* ---- 6. CHECKBOXES, ERRORS, SEND ---- */
.co-check{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:start;padding:6px 0;cursor:pointer}
.co-box{width:22px;height:22px;margin-top:1px;border-radius:7px;border:1px solid var(--w42);display:grid;place-items:center;
  transition:background-color var(--t1) var(--e),border-color var(--t1) var(--e)}
.co-check input:checked+.co-box{background:#fff;border-color:#fff}
.co-check input:checked+.co-box::after{content:"";width:10px;height:5px;border-left:2px solid #000;border-bottom:2px solid #000;transform:translateY(-1px) rotate(-45deg)}
.co-check input:focus-visible+.co-box{outline:2px solid #fff;outline-offset:3px}
.co-check-t{font-size:14px;line-height:1.65;color:var(--w72)}
.co-check-t a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.co-check-g.bad .co-box{border-color:#fff}
.co-actb{margin-top:18px;padding:18px 20px;border-radius:18px;border:1px solid var(--w12);background:var(--w03)}
.co-actb-k{display:block;margin-bottom:8px;font-family:var(--fd);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--w56)}
.co-warn{margin-top:10px;font-size:12.5px;line-height:1.55;color:var(--w72)}
.co-warn:empty{display:none}
.co-warn.co-warn-on{padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.4);color:#fff}

.co-err{padding:18px 22px;border-radius:var(--r-m);border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.06);font-size:14px}
.co-err-t{margin-bottom:8px;font-weight:500;color:#fff}
.co-err ul{display:grid;gap:5px;padding-left:18px;list-style:disc}
.co-err a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.co-err:focus{outline:2px solid #fff;outline-offset:3px}

.co-final{margin-top:22px;padding:18px 20px;border-radius:16px;border:1px solid var(--w12);background:var(--w03);
  font-size:13px;line-height:1.6;color:var(--w72)}
.co-final ul{display:grid;gap:5px}
.co-final b{font-weight:500;color:#fff}
.co-send .f-sub{white-space:normal;text-align:center;line-height:1.3}
.co-send .f-sub .lbl{height:auto;overflow:visible}
.co-send .f-sub .lbl i::after{display:none}
.co-send .f-sub:hover .lbl i{transform:none}
.co-under{margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--w56);text-align:center}
/* the 30-day guarantee, under the button (docs/preturi-multi-an.md): hosting only, hidden for a domain or a quote */
.co-guar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;margin-top:16px;padding:15px 18px;
  border-radius:16px;border:1px solid var(--w12);background:var(--w03);font-size:12.5px;line-height:1.6;color:var(--w72)}
.co-guar-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:#0a0a0a}
.co-guar-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.co-guar b{font-weight:500;color:#fff}
.co-guar a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.co-send .f-note{text-align:left}   /* an eight-line centred paragraph is hard to read */
.co-fail{margin-top:18px;padding:18px 20px;border-radius:18px;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.06);font-size:13.5px;line-height:1.6}
.co-fail:focus{outline:2px solid #fff;outline-offset:3px}
.co-fail-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.co-nojs{position:relative;padding:22px 26px;border-radius:var(--r-m);font-size:14px;line-height:1.6;color:var(--w72)}
.co-nojs>*{position:relative;z-index:2}
.co-nojs a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* the notice after a cancelled card payment (?stare=anulat) */
.co-state{position:relative;margin-bottom:clamp(14px,1.6vw,20px);padding:20px 24px;border-radius:var(--r-m);font-size:14px;line-height:1.6;color:var(--w72)}
.co-state>*{position:relative;z-index:2}
.co-state b{display:block;margin-bottom:4px;font-size:15px;font-weight:500;color:#fff}
.co-state:focus{outline:2px solid #fff;outline-offset:3px}

/* ---- 7. SUMMARY — a white sheet (not .inv: script.js reads .inv geometry for the header) ---- */
.co-sum{min-width:0;border-radius:clamp(22px,2.6vw,32px);
  --bg:#fff;--ink:#0a0a0a;--w96:rgba(10,10,10,.94);--w72:rgba(10,10,10,.76);--w56:rgba(10,10,10,.64);--w42:rgba(10,10,10,.54);
  --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;--glow:none;
  background:#fff;color:#0a0a0a;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 40px 90px -50px rgba(255,255,255,.28)}
.co-sum ::selection{background:#0a0a0a;color:#fff}
.co-sum :focus-visible{outline-color:rgba(10,10,10,.75)}
.co-sum-in{padding:clamp(22px,2.4vw,30px)}
@media (min-width:1100px){
  .co-sum-in{max-height:calc(100vh - var(--hd-off,86px) - 36px);overflow:auto}
}
.co-sum-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--w08)}
.co-sum-h h3{font-family:var(--fd);font-size:10.5px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--w56)}
.co-sum-live{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--w42)}
.co-sum-live i{width:6px;height:6px;border-radius:50%;background:#0a0a0a;animation:pulse 2.6s var(--e-soft) infinite}
.co-row{padding:15px 0;border-bottom:1px dashed var(--w12)}
.co-row-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:3px}
.co-row-k{font-family:var(--fd);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--w56)}
.co-mod{min-height:28px;padding:2px 0;font-size:12px;color:var(--w56);text-decoration:underline;text-underline-offset:3px}
.co-mod:hover{color:#0a0a0a}
.co-row-m{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.co-row-m b{min-width:0;font-size:15px;font-weight:500;letter-spacing:-.01em;overflow-wrap:anywhere}
/* body face, not the display one: its lowercase ă falls back to another font mid-word ("/ lună") */
.co-row-p{flex:none;font-size:14px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.co-row-s{margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--w56)}
.co-row-f{display:flex;flex-wrap:wrap;gap:3px 12px;margin-top:8px;font-size:12px;line-height:1.5;color:var(--w56)}
.co-row-f li{display:inline-flex;align-items:center;gap:7px;overflow-wrap:anywhere}
.co-row-f li::before{content:"";flex:none;width:4px;height:4px;border-radius:50%;background:var(--w30)}
.co-row-mute .co-row-m b{color:var(--w56)}
.co-tot{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;padding:20px 0 4px}
.co-tot-k{font-size:13px;color:var(--w56)}
.co-tot-v{font-family:var(--fd);font-weight:400;font-size:clamp(2.1rem,3vw,2.7rem);line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.co-bump{animation:coBump .55s var(--e)}
@keyframes coBump{0%{opacity:.25;transform:translateY(7px);filter:blur(3px)}100%{opacity:1;transform:none;filter:none}}
.co-tot-n{margin-top:6px;font-size:12px;line-height:1.5;color:var(--w56)}
.co-then{margin-top:12px;font-size:13px;line-height:1.6;color:var(--w72)}
.co-save{margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--w05);font-size:12.5px;line-height:1.55;color:var(--w72)}
.co-save .btn{margin-top:10px;--bg-b:#0a0a0a;--fg-b:#fff;box-shadow:inset 0 1px 0 rgb(255 255 255/.22),inset 0 -2px 6px rgb(0 0 0/.55)}
.co-save .btn::after{background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.18) 48%,transparent 64%)}
.co-save .btn:hover{box-shadow:0 18px 40px -18px rgba(0,0,0,.4)}
.co-actl{margin-top:14px;font-size:12.5px;line-height:1.55;color:var(--w72)}
.co-fine{margin-top:16px;padding-top:14px;border-top:1px solid var(--w08);font-size:11px;line-height:1.55;color:var(--w56)}

/* ---- 8. PHONE BAR, THANK-YOU, PRINT ---- */
.co-bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:9300;
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 9px 9px 20px;border-radius:var(--r-pill);
  background:#fff;color:#0a0a0a;box-shadow:0 18px 50px -12px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;transform:translateY(140%);
  transition:transform .6s var(--e),opacity .4s var(--e),visibility 0s linear .6s}
.co-bar.co-bar-on{opacity:1;visibility:visible;transform:none;transition:transform .6s var(--e),opacity .4s var(--e),visibility 0s}
.co-bar>span{min-width:0;font-size:11.5px;line-height:1.3;color:rgba(10,10,10,.64)}
.co-bar b{display:block;font-family:var(--fd);font-weight:400;font-size:1.3rem;line-height:1.1;letter-spacing:-.02em;color:#0a0a0a;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.co-bar a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:var(--r-pill);
  background:#0a0a0a;color:#fff;font-family:var(--fd);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
@media (min-width:1100px){.co-bar{display:none}}
body.co-bar-vis .top{bottom:calc(84px + env(safe-area-inset-bottom,0px))}

.co-ok-in{position:relative;max-width:980px;margin-inline:auto;padding:clamp(26px,4.4vw,64px);border-radius:var(--r-l);overflow:hidden}
.co-ok-in>*{position:relative;z-index:2}
.co-ok h2{margin:20px 0 16px;font-size:clamp(2rem,4.4vw,3.5rem);font-weight:300;line-height:1.04;letter-spacing:-.04em;overflow-wrap:anywhere}
.co-ok .lead{max-width:60ch}
.co-ok-hours{margin-top:10px;font-size:13.5px;color:var(--w56)}
.co-ok-h{margin-top:clamp(28px,3.4vw,40px);font-family:var(--fd);font-size:10.5px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--w56)}
.co-next{counter-reset:n;margin-top:14px;border-top:1px solid var(--w08)}
.co-next li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;padding:18px 0;border-bottom:1px solid var(--w08)}
.co-next li::before{counter-increment:n;content:"0" counter(n);padding-top:4px;font-family:var(--fd);font-size:11px;letter-spacing:.2em;color:var(--w42)}
.co-next b{display:block;margin-bottom:4px;font-weight:500;color:#fff}
.co-next p{font-size:14px;line-height:1.6;color:var(--w56)}
.co-ok-txt{margin-top:14px;padding:18px 20px;border-radius:16px;background:#fff;color:#0a0a0a;font-family:var(--fm);font-size:12.5px;
  line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.co-ok-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

/* ---- phone: one column everywhere ---- */
@media (max-width:760px){
  .co-plans-g{grid-template-columns:1fr}
  .co-plan{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;padding:16px}
  .co-plan-top{grid-column:1/-1;margin-bottom:10px}
  .co-plan-tag{grid-column:1/-1;min-height:0;margin:-2px 0 10px}
  .co-plan-tag:empty{display:none}
  .co-plan-name{grid-column:1;align-self:center;margin:0}
  .co-plan-price{grid-column:2;justify-content:flex-end}
  .co-plan-eq{grid-column:1/-1;min-height:0;margin:6px 0 0;text-align:right}
  .co-plan-feats{grid-column:1/-1;margin-top:10px;padding-top:10px}
  .co-plan-feats span{display:inline}
  .co-plan-feats span+span::before{content:" · "}
  .co-opts--3{grid-template-columns:1fr}
}
@media (max-width:640px){
  .co-what,.co-opts--2,.co-opts--4,.co-duo{grid-template-columns:1fr}
  .co-seg--4{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row;border-radius:20px}
  .co-seg--4 label{border-radius:15px}
  .co-seg{display:grid;width:100%}
  .co-seg label{padding:9px 12px}
  .co-more-row{grid-template-columns:minmax(0,1fr) 52px}
  .co-more-dom{grid-column:1/-1}
  .co-more-tip{grid-column:1}
  .co-del{grid-column:2;grid-row:2}
  .co-send .f-sub{padding-inline:22px}
  .co-pers{gap:8px}
  .co-per{padding:12px 10px 13px}
  .co-per-e{padding:4px 8px;border-radius:10px;font-size:11px;letter-spacing:-.005em}   /* "Economisești 81 €" on one line from 375 */
  .co-guar{gap:12px;padding:14px}
  .co-fail-acts .btn{flex:1 1 100%;justify-content:center}
  .co-ok-acts .btn{flex:1 1 100%;justify-content:center}
}
/* SAL (ANPC) never squeezed at ~1024px: shared fix, host.css §14d */

@media (prefers-reduced-motion:reduce){
  .co-pick,.co-opt,.co-plan,.co-per,.co-seg label,.co-sum,.co-bar,.co-n,.co-toc b,.co-steps-l .pm-n{transition:none}
  .co-bump{animation:none}
  .co-toc li::after,.co-steps-l li::after{transition:none!important;transform:none!important}
  .co-toc a:hover b,.co-toc a:focus-visible b{transform:none}
}
@media print{
  .hd,.menu,.ft,.phero,.cband,.ck,#ckModal,.top,.co-bar,.co-head,.co-ok-acts,.co-state,.skip,.cur,.cur-r{display:none!important}
  body,.co,.co-ok-in{background:#fff!important;color:#000!important}
  .co{padding:0}
  .co-ok-in{box-shadow:none;padding:0;max-width:none}
  .co-ok h2,.co-next b,.co-ok .lead{color:#000}
  .co-next p,.co-ok-hours,.co-ok-h{color:#333}
  .co-ok-txt{border:1px solid #999}
}