/* ============================================================
   creare-site.html only — linked after host.css.
   1. Hero: two starting prices (.phero-price.duo) and the "site in
      the making" card (.csb): a wireframe that builds itself when it
      is revealed, then shows a presentation site and a shop in turn.
      CSS only (the CSP allows no inline script): while nobody has
      picked a side it loops on its own; picking "Prezentare" or
      "Magazin" (two radios inside the switch) stops the loop there.
   2. Offers, one white sheet, each thing said once: two cards with
      only what is their own (+ a page / shop glyph), two hairlines
      that draw themselves into the shared tray "Incluse la amândouă",
      the "După lansare" row (compact .prod cards), the payment note.
   3. Process: the home page's pinned terminal, with an 11-letter
      domain and wider step names; one size down under 400px.
   Everything else comes from style.css + host.css.
   ============================================================ */

/* ---------- 1. HERO ---------- */
.phero-price.duo{display:grid;grid-template-columns:max-content max-content minmax(0,1fr);align-items:baseline;gap:8px 12px}
.phero-price.duo>span{display:contents}
.phero-price.duo .k{white-space:nowrap}
/* the browser bar's address never wraps: without these its full width became the hero column's minimum on a phone */
.phero-vis{min-width:0}
.phero-price.duo b{font-size:clamp(2.2rem,3.9vw,3.3rem)}
.phero-price.duo small{grid-column:1/-1;margin-top:6px}
/* the H1 opens with a capital Î: its circumflex is kept by the shared line-mask fix, host.css §14f */

.csb{position:relative;border-radius:var(--r-l);overflow:hidden}
.csb>*{position:relative;z-index:2}
.csb .rack-bar{gap:12px}
.csb-url{flex:1 1 0;width:0;min-width:0;display:flex;align-items:center;gap:8px;margin-left:4px;padding:6px 12px;
  border-radius:var(--r-pill);border:1px solid var(--w05);background:var(--w03);
  font-family:var(--fm);font-size:11.5px;color:var(--w56);white-space:nowrap;overflow:hidden}
.csb-url svg{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.csb-url b{font-weight:400;color:#fff}
.csb-path{display:inline-grid}
.csb-path>span{grid-area:1/1}

.csb-view{display:grid;gap:clamp(14px,1.6vw,20px);padding:clamp(16px,2vw,24px)}
.csb-view i,.csb-view b{display:block}
.csb-nav{display:flex;align-items:center;gap:10px;padding-bottom:clamp(12px,1.4vw,16px);border-bottom:1px solid var(--w05)}
.csb-logo{width:46px;height:11px;border-radius:3px;background:var(--w72)}
.csb-links{display:flex;gap:9px;margin-left:auto}
.csb-links i{width:clamp(18px,2.1vw,28px);height:5px;border-radius:3px;background:var(--w18)}
.csb-cart{position:relative;width:22px;height:22px;display:grid;place-items:center;color:var(--w72)}
.csb-cart svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.csb-cart b{position:absolute;right:-5px;top:-4px;min-width:13px;height:13px;padding:0 3px;border-radius:7px;
  background:#fff;color:#000;font-family:var(--fm);font-size:8.5px;font-weight:600;line-height:13px;text-align:center}
.csb-pill{width:clamp(44px,5vw,58px);height:18px;border-radius:var(--r-pill);background:#fff}

.csb-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(12px,1.6vw,20px);align-items:center}
.csb-copy{position:relative;display:grid;gap:8px;justify-items:start}
.csb-h{width:94%;height:clamp(10px,1.15vw,14px);border-radius:4px;background:linear-gradient(90deg,#fff,var(--w42))}
.csb-h.s2{width:64%}
.csb-t{width:88%;height:5px;border-radius:3px;background:var(--w18)}
.csb-t.a{margin-top:6px}
.csb-t.s2{width:58%}
.csb-btn{position:relative;width:clamp(58px,7vw,78px);height:20px;margin-top:8px;border-radius:var(--r-pill);border:1px solid var(--w30)}
.csb-btn::after{content:"";position:absolute;left:14px;right:14px;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:var(--w42)}
.csb-img{position:relative;aspect-ratio:4/3.3;border-radius:10px;border:1px solid var(--w08);
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.02))}
.csb-img svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--w30);stroke-width:1.2}
.csb-tag{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:5px;padding:4px 7px;
  border-radius:var(--r-pill);background:#fff}
.csb-tag i{width:5px;height:5px;border-radius:50%;background:#000}
.csb-tag i+i{width:22px;height:4px;border-radius:2px}

.csb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,12px)}
.csb-card{position:relative;display:grid;min-height:clamp(78px,8.2vw,96px);padding:10px;border-radius:10px;
  border:1px solid var(--w08);background:var(--w03)}
.csb-f{grid-area:1/1;display:flex;flex-direction:column;gap:6px;min-width:0}
.csb-f i{border-radius:3px}
.csb-ic{width:18px;height:18px;border-radius:6px!important;border:1px solid var(--w30)}
.csb-f .l1{width:70%;height:6px;margin-top:auto;background:var(--w56)}
.csb-f .l2{width:90%;height:4px;background:var(--w18)}
.csb-ph{flex:1;min-height:28px;border-radius:6px!important;background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.03))}
.csb-f.s .l1{margin-top:2px}
.csb-pr{display:flex;align-items:center;justify-content:space-between;gap:6px}
.csb-pr i{width:36%;height:6px;background:#fff}
.csb-pr b{position:relative;flex:none;width:16px;height:16px;border-radius:50%;border:1px solid var(--w42);color:var(--w72)}
.csb-pr b::before,.csb-pr b::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:1.2px;
  margin:-.6px 0 0 -3.5px;background:currentColor}
.csb-pr b::after{transform:rotate(90deg)}

.csb-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;
  padding:12px 16px 16px;border-top:1px solid var(--w05)}
.csb-sw{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;
  border-radius:var(--r-pill);border:1px solid var(--w08);background:var(--w03)}
.csb-sw label{position:relative;z-index:2;display:grid;place-items:center;min-height:40px;padding:0 18px;
  border-radius:var(--r-pill);cursor:pointer;font-family:var(--fd);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--w56);transition:color .45s var(--e)}
.csb-sw label:first-of-type{color:#000}
.csb-sw input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.csb-sw label:has(input:focus-visible){outline:2px solid var(--w72);outline-offset:2px}
.csb-sw-i{position:absolute;z-index:1;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);
  border-radius:var(--r-pill);background:#fff;transition:transform .55s var(--e)}
.csb-cap{font-size:11.5px;color:var(--w56)}

/* the build: each piece fades up in order once the card is revealed (.in, script.js) */
.csb .wf{opacity:0;transform:translate3d(0,8px,0);
  transition:opacity .7s var(--e) calc(.45s + var(--k,0) * .09s),transform .9s var(--e) calc(.45s + var(--k,0) * .09s)}
.csb.in .wf{opacity:1;transform:none}

/* an editor's dashed selection visits the title, the picture and a card, in turn */
.csb-copy::after,.csb-img::after,.csb-card:nth-child(2)::after{content:"";position:absolute;inset:-6px;
  border:1px dashed var(--w56);border-radius:9px;opacity:0;pointer-events:none}
.csb.in .csb-copy::after{animation:csSel 9s var(--e-soft) 2.4s infinite}
.csb.in .csb-img::after{animation:csSel 9s var(--e-soft) 5.4s infinite}
.csb.in .csb-card:nth-child(2)::after{animation:csSel 9s var(--e-soft) 8.4s infinite}
@keyframes csSel{0%{opacity:0;transform:scale(1.04)}6%,26%{opacity:1;transform:none}32%,100%{opacity:0;transform:none}}

/* presentation <-> shop. Base = presentation (also what reduced motion shows) */
.csb-f,.csb-cart,.csb-path>span,.csb-tag{transition:opacity .45s var(--e),transform .6s var(--e)}
.csb-f.s,.csb-cart,.csb-path .s,.csb-tag{opacity:0;transform:translate3d(0,8px,0)}
.csb-card:nth-child(2) .csb-f{transition-delay:.08s}
.csb-card:nth-child(3) .csb-f{transition-delay:.16s}
/* nobody has chosen yet: a 12 s loop — 5 s presentation, 5 s shop */
.csb-m:not(:has(input:checked)) :is(.csb-f.p,.csb-path .p){animation:csA 12s var(--e) infinite}
.csb-m:not(:has(input:checked)) :is(.csb-f.s,.csb-cart,.csb-path .s,.csb-tag){animation:csB 12s var(--e) infinite}
.csb-m:not(:has(input:checked)) .csb-card:nth-child(2) .csb-f{animation-delay:.08s}
.csb-m:not(:has(input:checked)) .csb-card:nth-child(3) .csb-f{animation-delay:.16s}
.csb-m:not(:has(input:checked)) .csb-sw-i{animation:csPill 12s var(--e) infinite}
.csb-m:not(:has(input:checked)) .csb-sw label:first-of-type{animation:csLa 12s var(--e) infinite}
.csb-m:not(:has(input:checked)) .csb-sw label:last-of-type{animation:csLb 12s var(--e) infinite}
@keyframes csA{0%,42%{opacity:1;transform:none}50%,92%{opacity:0;transform:translate3d(0,8px,0)}100%{opacity:1;transform:none}}
@keyframes csB{0%,42%{opacity:0;transform:translate3d(0,8px,0)}50%,92%{opacity:1;transform:none}100%{opacity:0;transform:translate3d(0,8px,0)}}
@keyframes csPill{0%,42%{transform:none}50%,92%{transform:translateX(100%)}100%{transform:none}}
@keyframes csLa{0%,42%{color:#000}50%,92%{color:var(--w56)}100%{color:#000}}
@keyframes csLb{0%,42%{color:var(--w56)}50%,92%{color:#000}100%{color:var(--w56)}}
/* chosen: the shop */
.csb-m:has(input[value="s"]:checked) :is(.csb-f.p,.csb-path .p){opacity:0;transform:translate3d(0,8px,0)}
.csb-m:has(input[value="s"]:checked) :is(.csb-f.s,.csb-cart,.csb-path .s,.csb-tag){opacity:1;transform:none}
.csb-m:has(input[value="s"]:checked) .csb-sw-i{transform:translateX(100%)}
.csb-m:has(input[value="s"]:checked) .csb-sw label:first-of-type{color:var(--w56)}
.csb-m:has(input[value="s"]:checked) .csb-sw label:last-of-type{color:#000}

@media (max-width:520px){
  .csb-links i:nth-child(3){display:none}
  .csb-url{font-size:11px}
  .csb-foot{padding:12px 14px 14px}
  .csb-sw label{padding:0 14px}
}

/* ---------- 2. OFFERS ----------
   One white sheet holds the whole offer, each thing said once:
   the two cards list only what is their own; .cs-join draws two hairlines
   from them into the one panel both share (.cs-inc); then the hosting /
   domain / maintenance row (.cs-after, the house .prod cards, compact);
   then the payment note. Everything reads the sheet's tokens, so the black
   featured card keeps working inside the white sheet. */
@media (min-width:981px){.cs-offers{grid-template-columns:repeat(2,1fr);max-width:1060px;margin-inline:auto}}
.cs-offers .pl-top{margin-bottom:clamp(22px,2.4vw,32px)}
.cs-name{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}
.cs-name h3{margin:0}
.cs-offers .pl-price{min-height:0}
.cs-offers .pl-price .k{display:block;margin-bottom:10px;font-size:12.5px;color:var(--w56)}
.cs-who{margin:0 0 26px;max-width:44ch;font-size:14.5px;line-height:1.62;color:var(--w56)}
.cs-acts{margin-top:auto;display:grid;gap:6px;justify-items:center}
.cs-acts .btn{width:100%;justify-content:center}

/* the page and the shop in miniature, beside each name: the hero illustration's two modes */
.cs-glyph{position:relative;flex:none;display:grid;width:78px;height:58px;padding:16px 8px 8px;gap:4px;
  border-radius:12px;border:1px solid var(--w12);background:var(--w03);
  transition:translate var(--t2) var(--e),border-color var(--t2) var(--e)}
.cs-glyph::before{content:"";position:absolute;left:0;right:0;top:11px;height:1px;background:var(--w08)}
.cs-glyph::after{content:"";position:absolute;left:8px;top:4.5px;width:3px;height:3px;border-radius:50%;
  background:var(--w30);box-shadow:5px 0 0 var(--w30),10px 0 0 var(--w30)}
.cs-glyph i{display:block;min-width:0;border-radius:2px;background:var(--w18)}
.cs-glyph.p{grid-template-columns:minmax(0,1fr) 25px;grid-template-rows:4px 3px 3px minmax(0,1fr);column-gap:6px}
.cs-glyph.p .g-h{grid-column:1;background:var(--w56)}
.cs-glyph.p .g-t{grid-column:1}
.cs-glyph.p .g-t.s{width:62%}
.cs-glyph.p .g-b{grid-column:1;align-self:end;width:58%;height:7px;border-radius:4px;border:1px solid var(--w30);background:none}
.cs-glyph.p .g-im{grid-column:2;grid-row:1/-1;border-radius:4px;background:linear-gradient(160deg,var(--w30),var(--w05))}
.cs-glyph.s{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-glyph.s .g-p{border-radius:3px;
  background:linear-gradient(180deg,var(--w18) 0 56%,transparent 56% 70%,var(--w42) 70% 80%,transparent 80%)}
.cs-glyph.s .g-c{position:absolute;right:7px;top:3px;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.pl-card:hover .cs-glyph{translate:0 -3px;border-color:var(--w30)}

/* both cards feed one panel: two hairlines draw themselves from the cards'
   centres into it (pathLength=1, so the dash is the whole line) */
.cs-join{position:relative;z-index:3;height:76px;max-width:1060px;margin:0 auto}
.cs-join svg{display:block;width:100%;height:100%;overflow:visible}
.cs-join path{fill:none;stroke:var(--w30);stroke-width:1.2;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--e) .15s}
.cs-join.in path{stroke-dashoffset:0}
.cs-join::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:var(--ink);box-shadow:0 0 0 5px var(--bg);transform:scale(0);transition:transform .6s var(--e-spring,var(--e)) 1.2s}
.cs-join.in::after{transform:none}

/* what both offers have, once: a recessed tray (Apple's grouped panel), not
   one more floating card, with white chips for the icons */
.cs-inc{position:relative;max-width:1060px;margin:0 auto;border-radius:var(--r-xl);overflow:hidden;
  padding:clamp(28px,3.2vw,44px) clamp(18px,2.8vw,38px) clamp(8px,1.2vw,16px)}
.inv .cs-inc.glass{background-color:rgb(10 10 10/.032);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgb(10 10 10/.03)}
.cs-inc>*{position:relative;z-index:2}
.cs-inc-h{text-align:center;margin-bottom:clamp(16px,2vw,26px)}
.cs-inc-h h3{font-size:clamp(1.35rem,2vw,1.75rem);font-weight:400;letter-spacing:-.03em;line-height:1.15}
.cs-inc-l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.cs-inc-l li{display:grid;align-content:start;gap:6px;padding:clamp(20px,2.2vw,26px) clamp(14px,1.6vw,22px);
  border-top:1px solid var(--w08)}
.cs-inc-l li:not(:nth-child(4n+1)){border-left:1px solid var(--w08)}
.cs-ic{display:grid;place-items:center;width:40px;height:40px;margin-bottom:10px;border-radius:12px;
  border:1px solid var(--w08);background:var(--bg);color:var(--ink);box-shadow:0 6px 14px -10px rgb(0 0 0/.35)}
.cs-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cs-inc-l b{font-size:15px;font-weight:500;letter-spacing:-.012em;line-height:1.3;color:var(--ink)}
.cs-inc-l li>span:last-child{font-size:13.5px;line-height:1.55;color:var(--w56)}

/* after launch: the house product cards, compact, aligned with the offers */
.cs-after{max-width:1060px;margin:clamp(56px,6vw,84px) auto 0;scroll-margin-top:calc(var(--hd-h) + 40px)}
.cs-after-t{margin-bottom:10px;text-align:center;font-family:var(--fd);font-size:10.5px;font-weight:400;
  letter-spacing:.24em;line-height:1.4;text-transform:uppercase;color:var(--w56)}
/* one plain line under the label: hosting, domain and maintenance are not in the site's price (decided 11.09.2026) */
.cs-after-l{max-width:52ch;margin:0 auto clamp(18px,2vw,26px);text-align:center;font-size:14px;line-height:1.55;color:var(--w72)}
.cs-after .prod-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-after .prod{padding:clamp(20px,2.2vw,28px)}
.cs-after .prod-top{margin-bottom:clamp(18px,2.2vw,28px)}
.cs-after .prod-ic{width:44px;height:44px}
.cs-after .prod h4{font-size:clamp(1.2rem,1.6vw,1.4rem);font-weight:400;letter-spacing:-.025em;line-height:1.2;margin-bottom:8px}
.cs-after .prod p{font-size:13.5px;margin-bottom:20px}
.cs-after .prod-price b{font-size:clamp(1.55rem,2.1vw,1.9rem)}
.cs-after .prod-go{margin-top:14px}

/* one column from 980px down (the cards stack at the same width): no hairlines,
   the tray two-up, the product cards become rows with the arrow in the corner */
@media (max-width:980px){
  .cs-join{display:none}
  .cs-inc{max-width:560px;margin-top:clamp(18px,4vw,26px)}
  .cs-inc-l{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-inc-l li:not(:nth-child(4n+1)){border-left:0}
  .cs-inc-l li:nth-child(even){border-left:1px solid var(--w08)}
  .cs-after{max-width:560px}
  .cs-after .prod-grid{grid-template-columns:1fr;gap:12px}
  .cs-after .prod{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;padding:20px 20px 18px}
  .cs-after .prod-top{grid-row:1/5;align-self:start;margin:0}
  .cs-after .prod>:not(.prod-top){grid-column:2}
  .cs-after .prod h4{padding-right:26px}
  .cs-after .prod p{margin-bottom:12px}
  .cs-after .prod-price{padding-top:12px}
  .cs-after .prod-go{position:absolute;top:22px;right:20px;margin:0;gap:0;font-size:0}
}
/* phones: the tray becomes a list, icon beside the text */
@media (max-width:560px){
  .cs-inc{padding-inline:clamp(16px,5vw,22px)}
  .cs-inc-l{grid-template-columns:1fr}
  .cs-inc-l li{grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:3px;padding:16px 2px}
  .cs-inc-l li:nth-child(even){border-left:0}
  .cs-inc-l .cs-ic{grid-row:1/3;margin:1px 0 0;width:38px;height:38px}
  .cs-inc-l li>b,.cs-inc-l li>span:last-child{grid-column:2}
  .cs-after .prod-ic{width:40px;height:40px}
}

/* ---------- 3. PROCESS (the home page's terminal) ---------- */
.term.in .tl-cmd .type{animation:csType 1.1s steps(11,end) .45s forwards}
@keyframes csType{to{width:11ch}}
.tl{grid-template-columns:16px 10ch minmax(0,1fr)}
/* 320-400px: one step smaller, so no step value is cut with an ellipsis */
@media (max-width:400px){
  .plat .term-body{font-size:11px}
  .plat .tl{gap:10px;grid-template-columns:14px 10ch minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  .csb .wf{opacity:1;transform:none;transition:none}
  .csb.in :is(.csb-copy,.csb-img,.csb-card)::after{animation:none}
  .csb-m :is(.csb-f,.csb-cart,.csb-path>span,.csb-tag,.csb-sw-i,.csb-sw label){animation:none!important}
  .cs-join path{stroke-dashoffset:0;transition:none}
  .cs-join::after{transform:none;transition:none}
  .pl-card:hover .cs-glyph{translate:none}
}