/* [cc 10.10] site27.css — paginile de modul in aspectul paginii 1 noi (C4-1/final.html). Se incarca DUPA final.css, final-hero.css, menu-*.css si sx*.css.
   Tokenii paginii (--bg --ink --mute --line --menu --edge --fill --fill-ink) vin din final.css; aici doar cativa in plus (--rule --card) si legarea partilor desenate (--s26-*, --sx-*) de ei.
   Titlurile = sistemul C (David 09.10, site-sectiuni/titlu-ai.html): eticheta 12,5 px MAJUSCULE gri, titlu Work Sans 300 (cel mai mare text din sectiune), rand de fapte; fara paragraf sub titlu.
   Pe pagina NU exista .hero (clasele hero din final.css/final-hero.css raman fara tinta); h1-ul global din final.css e suprascris in .mh. */

@font-face{font-family:"Work Sans";font-style:normal;font-weight:600;font-display:swap;src:url("c41/fonts/WorkSansPotrivit-600.woff2") format("woff2")}

/* ---------- tokeni in plus (ambele teme) ---------- */
@property --rule{syntax:'<color>';inherits:true;initial-value:rgba(255,255,255,.1)}
@property --card{syntax:'<color>';inherits:true;initial-value:#0a0a0a}
@property --ink2{syntax:'<color>';inherits:true;initial-value:#c7c7c7}
:root{
  --s27-w:1200px;
  --rule:rgba(255,255,255,.1); --card:#0a0a0a; --ink2:#c7c7c7;
  --sec:clamp(80px,9vw,128px);
  --ws:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  transition:--bg .25s ease,--ink .25s ease,--mute .25s ease,--line .25s ease,--fill .25s ease,--fill-ink .25s ease,--menu .25s ease,--edge .25s ease,--rule .25s ease,--card .25s ease,--ink2 .25s ease;
}
:root[data-theme=light]{--rule:rgba(20,42,62,.2);   /* [cc 15.10] .12 → .2: liniile dintre secțiuni se pierdeau pe hârtie (David: „too subtle for this background, a bit darker”); aceeași linie și pe Harta HERE (hl.css folosește --rule) */
  --card:#fbfaf8;--ink2:#2c3e50}
@media (prefers-reduced-motion:reduce){:root{transition:none}}
body.s27{overflow-x:clip}
.w{width:min(var(--s27-w),calc(100% - 2*var(--gut)));margin-inline:auto}

/* ---------- textul comun ---------- */
.eb{font:500 12.5px/20px var(--ws);letter-spacing:.12em;word-spacing:0;text-transform:uppercase;color:var(--mute)}
.h2{margin-top:14px;font:300 clamp(34px,3.75vw,54px)/1.08 var(--ws);letter-spacing:-.025em;word-spacing:0;color:var(--ink);max-width:15.5em;text-wrap:balance}
.h3{font:400 20px/1.35 var(--ws);letter-spacing:-.012em;color:var(--ink)}
.ar{display:inline-block;flex:none;vertical-align:-1px;margin-left:6px;transition:transform .2s ease}
a:hover>.ar{transform:translateX(2px)}
.more{display:inline;font:500 15px/24px var(--ws);color:var(--ink)}
.more:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.more-p{margin-top:40px}
:where(.s27 main) a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

/* randul de fapte (sistemul C): eticheta mica + valoare 20 px, separate de linii fine */
/* fiecare fapt are linia lui in stanga; randul incepe la -29 px, iar clip-path taie linia primului fapt de pe FIECARE rand (si cand se rup pe 2 randuri) */
.facts{display:flex;flex-wrap:wrap;margin-top:28px;margin-left:-29px;row-gap:16px;clip-path:inset(-10px -10px -10px 29px)}
.facts>div{padding:0 28px;border-left:1px solid var(--line)}
.sh--c .facts,.sx-head--center .facts{margin-left:0;clip-path:none}
.sh--c .facts>div:first-child,.sx-head--center .facts>div:first-child{border-left:0}
.facts dt{font:500 12.5px/20px var(--ws);letter-spacing:.12em;word-spacing:0;text-transform:uppercase;color:var(--mute)}
.facts dd{margin:4px 0 0;font:400 20px/28px var(--ws);letter-spacing:-.015em;word-spacing:0;color:var(--ink)}
.facts dd a{display:inline-flex;align-items:center;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:5px;text-decoration-thickness:1px}
.facts dd a:hover{text-decoration-color:currentColor}
.facts dd .facts-a{margin-left:10px;font-size:15px;line-height:28px;color:var(--mute);text-decoration:none}
.facts dd .facts-a:hover{color:var(--ink)}
@media (max-width:760px){
  .facts,.sh--c .facts,.sx-head--center .facts{display:grid;gap:14px;margin-left:0;clip-path:none}
  .facts>div{padding:0;border-left:0}
}

/* ---------- sectiunile ---------- */
.s{padding-block:var(--sec);border-top:1px solid var(--rule)}
.sh{margin-bottom:clamp(40px,4.4vw,56px)}
.sh--c{text-align:center}
.sh--c .h2{margin-inline:auto}
.sh--c .facts{justify-content:center}

/* hero-ul paginii de modul */
.mh{padding:clamp(72px,9vh,112px) 0 clamp(48px,6vw,72px)}
.mh h1{margin-top:16px;max-width:14em;font:300 clamp(40px,5vw,72px)/1.04 var(--ws);letter-spacing:-.032em;word-spacing:0;color:var(--ink);text-wrap:balance}
.mh .facts{margin-top:36px}
.mh .cta{margin-top:40px}
.mh-sub{margin-top:14px;font-size:14px;line-height:20px;color:var(--mute)}
@media (max-width:760px){
  .mh{padding:40px 0 40px}
  .mh h1{font-size:40px;line-height:44px;letter-spacing:-.028em}
  .mh .facts{margin-top:28px}
  .mh .cta{margin-top:32px}
  .mh-sub{text-align:center}
}
@media (min-width:761px) and (max-width:900px){.mh h1{font-size:52px;line-height:56px}}

/* fotografia programului: ca fereastra de pe pagina 1 (.peek) — margine --line, colturi 8 (R015), aceeasi umbra si acelasi grad pe tema inchisa */
.s-shot{padding:0 0 var(--sec);border-top:0}
.shot{margin:0}
.shot-win{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#e9e7e3;box-shadow:0 -20px 80px rgba(0,0,0,.35)}
[data-theme=light] .shot-win{box-shadow:0 -10px 50px rgba(20,42,62,.10)}
.shot-img{display:block;width:100%;height:auto;filter:var(--dm-grade);transition:filter .25s ease}
.shot{--dm-grade:brightness(1) contrast(1.04) saturate(1.06)}
:root:not([data-theme=light]) .shot{--dm-grade:brightness(.92) contrast(1.18) saturate(1.18)}
.notes{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:28px;counter-reset:n}
.notes li{position:relative;padding-left:34px;font-size:14px;line-height:21px;color:var(--mute);counter-increment:n}
.notes li::before{content:counter(n);position:absolute;left:0;top:-1px;width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font:500 11.5px/1 var(--ws);color:var(--ink)}
@media (max-width:900px){.notes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .shot-win{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .shot-img{width:900px;max-width:none}
  .notes{grid-template-columns:1fr;gap:12px;margin-top:22px}
}

/* ce faci in program: bife subtiri, monocrome */
.ck-gs{display:grid;gap:48px}
.ck-g .h3{margin-bottom:20px}
.ck{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 56px}
.ck--1{grid-template-columns:1fr}
.ck li{position:relative;padding-left:30px;font-size:16px;line-height:25px;color:var(--ink2)}
.ck li::before{content:"";position:absolute;left:0;top:4px;width:17px;height:17px;background:var(--ink);opacity:.7;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 9.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 9.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:760px){.ck{grid-template-columns:1fr;gap:14px}}

/* carduri (noutatile v34, modulele pentru expeditii) */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 56px}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.card{display:block;padding-top:24px;border-top:1px solid var(--line)}
.card .h3{font-size:22px;line-height:30px}
.card-t{margin-top:12px;font-size:16px;line-height:26px;color:var(--mute);max-width:52ch}
.card .eb{margin-bottom:10px}
a.card .more{margin-top:20px}
a.card:hover .h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
a.card{transition:border-color .2s ease}
a.card:hover{border-color:var(--ink)}
@media (max-width:900px){.cards--3{grid-template-columns:1fr}}
@media (max-width:760px){.cards{grid-template-columns:1fr;gap:32px}}

/* integrarile: cuvinte gri, intr-o grila cu linii fine */
.lg{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.lg li{display:flex;align-items:center;justify-content:center;min-height:96px;padding:16px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  font:500 18px/1.3 var(--ws);letter-spacing:-.01em;color:var(--mute);text-align:center;text-wrap:balance}
.lg[data-n="3"],.lg[data-n="4"]{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.lg[data-n="3"]{--n:3}
@media (max-width:760px){.lg,.lg[data-n="3"],.lg[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}.lg li{min-height:76px;font-size:16px}}

/* citatele: mari, Work Sans 300 */
.qs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 64px}
.qs--1{grid-template-columns:minmax(0,820px)}
.q{margin:0;padding-top:28px;border-top:1px solid var(--line)}
.q blockquote{margin:0;font:300 24px/1.42 var(--ws);letter-spacing:-.016em;word-spacing:0;color:var(--ink);text-wrap:pretty}
.q blockquote::before{content:"„"}
.q blockquote::after{content:"”"}
.q.is-clamp blockquote{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
.q.is-open blockquote{display:block;-webkit-line-clamp:none}
.q-more{margin-top:12px;padding:0;font:500 14px/22px var(--ws);color:var(--mute);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.q-more:hover{color:var(--ink)}
/* [cc 16.10] „Citește tot” pe ecran tactil: țintă de 44 px fără să miște textul (ca F3 din esentiale/verificare-ecran: padding + margine negativă) */
@media (pointer:coarse){.q-more{padding-block:11px;margin-top:1px;margin-bottom:-11px}}
.q figcaption{display:flex;align-items:baseline;gap:12px;margin-top:22px}
.q figcaption b{font:500 15px/22px var(--ws);color:var(--ink)}
.q figcaption span{font:500 12px/20px var(--ws);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
@media (max-width:760px){.qs{grid-template-columns:1fr;gap:40px}.q blockquote{font-size:20px;line-height:1.45}}

/* intrebarile: <details> cu linii fine */
.faq{max-width:900px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{position:relative;display:block;padding:22px 48px 22px 0;font:400 19px/28px var(--ws);letter-spacing:-.01em;color:var(--ink);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;top:6.25px;width:14px;height:1.5px;background:var(--mute);transition:transform .25s ease,background-color .2s}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq summary:hover i::before,.faq summary:hover i::after{background:var(--ink)}
.faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
.faq-a{padding:0 48px 26px 0;font-size:16px;line-height:26px;color:var(--mute);max-width:72ch}

/* ghidul si tutorialele: randuri cu linii fine */
.lk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;border-top:1px solid var(--line)}
.lk li{border-bottom:1px solid var(--line)}
.lk a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:16px;min-height:64px;padding:14px 0}
.lk-t{font-size:16px;line-height:23px;color:var(--ink)}
.lk-m{font:500 11.5px/18px var(--ws);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.lk .ar{margin:0;color:var(--mute)}
.lk a:hover .lk-t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.lk a:hover .ar{color:var(--ink)}
@media (max-width:900px){.lk{grid-template-columns:1fr}}
@media (max-width:760px){.lk a{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}.lk-m{grid-row:2;grid-column:1}.lk .ar{grid-row:1/3;grid-column:2}}

/* split (Case de expeditie: ce vede clientul) */
.sp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;padding-top:28px;border-top:1px solid var(--line)}
.sp .eb{margin-bottom:12px}
.sp-h{font:300 30px/1.2 var(--ws);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.sp-t{margin-top:14px;font-size:16px;line-height:26px;color:var(--mute);max-width:52ch}
@media (max-width:900px){.sp{grid-template-columns:1fr}}
@media (max-width:760px){.sp-h{font-size:26px}}

/* paginarea modulelor */
.s-pager{padding-block:clamp(56px,6vw,80px)}
.pg-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.pg{display:grid;gap:6px;padding:22px 24px;border:1px solid var(--line);border-radius:8px;transition:border-color .2s ease,background-color .2s ease}
.pg b{font:400 22px/1.3 var(--ws);letter-spacing:-.015em;color:var(--ink)}
.pg--next{text-align:right}
.pg:hover{border-color:var(--edge);background:var(--card)}
.pg-fwd{margin-top:28px;text-align:center}
@media (max-width:760px){.pg-row{grid-template-columns:1fr;gap:12px}.pg--next{text-align:left}.pg-row>span:empty{display:none}}

/* panoul de final */
.s-end{padding-block:clamp(88px,10vw,140px)}
.s-end .sh{margin-bottom:40px}
.cta--c{justify-content:center}
.end-tel{margin-top:20px;text-align:center;font-size:15px;line-height:22px;color:var(--mute)}
.end-tel a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.end-tel a:hover{text-decoration-color:currentColor}
@media (max-width:760px){.cta--c .pill{width:100%}}

/* subsolul (s26_footer, monocrom) */
.ft{padding:72px 0 40px;border-top:1px solid var(--rule)}
.ft-grid{display:grid;grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:40px 32px}
.ft-logo{display:block;width:35px;height:40px;background:currentColor;color:var(--ink);-webkit-mask:url("c41/img/hex.svg") center/contain no-repeat;mask:url("c41/img/hex.svg") center/contain no-repeat}
:root:not([data-theme=light]) .ft-logo{opacity:.7}
.ft-brand p{margin-top:18px;max-width:24ch;font-size:14px;line-height:21px;color:var(--mute)}
.ft-soc{display:flex;gap:6px;margin-top:20px}
.ft-soc a{display:grid;place-items:center;width:36px;height:36px;border-radius:4px;color:var(--mute);transition:color .2s}
.ft-soc a:hover{color:var(--ink)}
.ft-col h2{font:500 12px/20px var(--ws);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.ft-col ul{display:grid;gap:10px;margin-top:16px}
.ft-col a,.ft-col span{font-size:14px;line-height:20px;color:var(--mute);transition:color .2s}
.ft-col a:hover{color:var(--ink)}
.ft-bot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;margin-top:56px;padding-top:24px;border-top:1px solid var(--rule);font-size:13px;line-height:20px;color:var(--mute)}
.ft-bot a:hover{color:var(--ink)}
.ft-bot p a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.ft-legal{display:flex;flex-wrap:wrap;gap:8px 20px}
.ft-lang{display:flex;gap:6px}
.ft-lang [aria-current]{color:var(--ink)}
@media (max-width:1000px){.ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ft-brand{grid-column:1/-1}}
@media (max-width:760px){.ft{padding-top:56px}.ft-col a,.ft-col span{display:inline-block;padding:4px 0}.ft-col ul{gap:4px}}
/* [cc 17.10] ținte de 44 px în subsol pe telefon și pe orice ecran tactil (verificarea din 17.10: rândurile aveau 28 px, iconițele 36, logo-ul 35 × 40, linkurile de jos 15-20).
   Ce se vede rămâne la fel (textul, iconițele de 18, hexagonul de 35 × 40, aceleași poziții); crește doar cutia pe care o atinge degetul:
   rândurile coloanelor: 12 px de atins deasupra și dedesubt textului (un rând = 20 + 24 = 44 px, pe toată lățimea coloanei; un link pe 2 rânduri = 64 px),
   deci între oricare două texte rămâne același gol de 24 px și țintele nu se suprapun;
   iconițele sociale 44 × 44 (fără gol între ele; lista iese 4 px în stânga, ca prima iconiță să stea unde era); logo-ul 44 × 44 cu hexagonul pe loc;
   linkurile legale și „English” 44 px înălțime (+6 px lățime de fiecare parte, golul de 20 px dintre ele rămâne); „euload.com” din fraza de jos: 12 px de atins sus și jos, fără să miște rândul.
   Pe mouse (birou) nimic nu se schimbă. */
@media (max-width:760px),(pointer:coarse){
  .ft-col ul{gap:0;margin-top:8px}
  .ft-col a,.ft-col span{display:flex;align-items:center;min-height:44px;padding:12px 0}
  .ft-soc{gap:0;margin-top:16px;margin-left:-4px}
  .ft-soc a{width:44px;height:44px}
  .ft-logo{width:44px;height:44px;margin:-2px 0 -2px -4.5px;-webkit-mask-size:35px 40px;mask-size:35px 40px}
  .ft-legal{row-gap:0}
  .ft-legal a,.ft-lang span{display:inline-flex;align-items:center;min-height:44px}
  .ft-legal a{padding-inline:6px;margin-inline:-6px}
  .ft-bot p a{display:inline-block;padding-block:12px;margin-block:-12px}
}

/* =====================================================================================================================
   PARTILE DESENATE (site26/parts + css/sx-*.css, neschimbate): re-tonate prin variabilele lor (--s26-*, --sx-*, --c-*, --hp-*, --sxa-*).
   Ideea: sectiunea (fundal, text, linii, carduri) urmeaza tema paginii; ce imita programul (fereastra Importare Comanda, documentul,
   fereastra Valabilitati, capturile) ramane in tema luminoasa si pe negru, cu gradul ferestrei de pe pagina 1 (cum a ales David: „demo-ul alb, putin mai intunecat”).
   ===================================================================================================================== */
:root{
  --s26-bg0:var(--bg); --s26-bg0-phone:var(--bg); --s26-bg1:var(--card);
  --s26-ink:var(--ink); --s26-ink2:var(--ink2); --s26-ink3:var(--mute);
  --s26-hair:var(--rule); --s26-hair-strong:var(--line); --s26-frame:var(--line);
  --s26-accent:var(--ink); --s26-accent-hover:var(--ink); --s26-accent-soft:var(--card);
  --s26-ok:#6aaa6a; --s26-amber:#d4a855;
  --s26-shadow-card:none; --s26-shadow-window:0 40px 90px -30px rgba(0,0,0,.7);
  --s26-font:var(--ws); --s26-mono:var(--ws);
  --s26-ease:cubic-bezier(.16,1,.3,1);
  --s26-wrap:calc(var(--s27-w) + 2*var(--gut)); --s26-gutter:var(--gut);
  --s26-sec-top:var(--sec); --s26-sec-bot:var(--sec); --s26-head-gap:clamp(40px,4.4vw,56px);
}
:root[data-theme=light]{--s26-ok:#27764c;--s26-amber:#9c5c10;--s26-shadow-window:0 30px 70px -30px rgba(20,42,62,.28)}
.s27 .sx{
  --sx-panel:var(--card); --sx-surface:var(--card);
  --sx-line:color-mix(in srgb,var(--ink) 38%,transparent);
  --sx-accent-ink:var(--bg); --sx-accent-border:var(--edge);
  --sx-incl-bg:var(--card); --sx-incl-ink:var(--ink); --sx-incl-border:var(--line);
  --sx-soon-bg:var(--rule);
  --sx-shadow-lift:0 16px 40px -12px rgba(0,0,0,.6);
  --sx-shadow-phone:drop-shadow(0 18px 30px rgba(0,0,0,.45));
  --sx-phone-outline:rgba(255,255,255,.08);
  --sx-focus:var(--ink);
  --sx-f-sans:var(--ws); --sx-f-mono:var(--ws);
  border-top-color:var(--rule);
}
:root[data-theme=light] .s27 .sx{--sx-shadow-lift:0 10px 20px hsl(210 40% 20% / .12),0 3px 6px hsl(210 40% 20% / .08);--sx-shadow-phone:drop-shadow(0 18px 30px rgba(30,45,60,.16));--sx-phone-outline:rgba(23,32,43,.10)}
/* control segmentat (R001): sina si tasta neutre pe negru (in sx.css erau maro-calde) */
html[data-theme=dark] body.s27 .sx{
  --sx-rail:#121212; --sx-rail-edge:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 3px rgba(0,0,0,.6); --sx-rail-hover:rgba(255,255,255,.05);
  --sx-key:linear-gradient(#3b3b3b,#2b2b2b); --sx-key-rim:#7a7a7a; --sx-key-n:#d6d6d6; --sx-sep:rgba(255,255,255,.12);
  --sx-note:#141414; --sx-note-line:rgba(255,255,255,.1);
}

/* titlurile partilor = sistemul C (aceleasi reguli ca .eb / .h2 de mai sus) */
.s27 .sx .sx-eyebrow{font:500 12.5px/20px var(--ws);letter-spacing:.12em;word-spacing:0;text-transform:uppercase;color:var(--mute);gap:0}
.s27 .sx .sx-eyebrow::before{display:none}
.s27 .sx header h2{margin-top:14px;font:300 clamp(34px,3.75vw,54px)/1.08 var(--ws);letter-spacing:-.025em;word-spacing:0;color:var(--ink);text-wrap:balance}
.s27 .sx header{gap:0}
.s27 .sx .facts--part{margin-top:28px}
.s27 .sx-head,.s27 .sx .hp-head,.s27 .sx .vb-head{max-width:none}
.s27 .sx header h2{max-width:15.5em}
.s27 .sx .sx-head--center .facts{justify-content:center}

/* antetele partilor cu coloana laterala (scoasa): devin un singur bloc */
.s27 .sx-here .hp-head,.s27 .sx-valabilitati .vb-head{display:block}
.s27 .sx-here .hp-head{margin-bottom:clamp(56px,6vw,88px)}
.s27 .sx-valabilitati .vb-head{margin-bottom:clamp(48px,5.4vw,76px)}
.s27 .sx-ai .sx-ai-top{display:block}

/* ---------- AI: ce imita programul (fereastra Importare Comanda) ramane luminos si pe negru; firele, capsula AI si numerele trec pe cerneala paginii ---------- */
.s27 .sx-ai{--c-tag:#142a3e;--c-tag-ink:#fff;--c-wire:color-mix(in srgb,var(--ink) 50%,transparent);--c-flow:var(--ink);--c-cap-bg:var(--card);
  --c-scan:#142a3e;--c-scan-glow:rgba(20,42,62,.35);--c-scan-trail:rgba(20,42,62,.09);--c-ready:color-mix(in srgb,var(--ink) 35%,transparent)}
.s27 .sx-ai .sx-ai-win,.s27 .sx-valabilitati .vb-win,.s27 .sx-telematica .sx-window{
  --sx-panel:#fff;--sx-surface:#fff;--sx-bg1:hsl(40 10% 97%);--sx-ink:#1d2733;--sx-ink2:#4f5b68;--sx-ink3:#637080;--sx-hair:rgba(23,32,43,.10);--sx-hair-strong:#d6dce4;
  --sx-accent:#142a3e;--sx-accent-text:#142a3e;--sx-accent-ink:#fff;--sx-focus:#142a3e;
  --sx-rail:#ecebe7;--sx-rail-edge:inset 0 0 0 1px rgba(30,26,18,.10),inset 0 1px 2px rgba(30,26,18,.09);--sx-rail-hover:rgba(23,32,43,.055);
  --sx-key:linear-gradient(#fff,#f6f5f2);--sx-key-rim:#7b8088;--sx-key-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(23,32,43,.14),0 7px 16px -5px rgba(23,32,43,.26);--sx-key-n:#4f5b68;--sx-sep:rgba(30,26,18,.15);
  --sx-mk-ok:#27764c;--sx-mk-danger:#c9413a;--sx-mk-warn:#b7791f;--sx-mk-info:#2f6ea3;--sx-mk-none:#767c84;--sx-note:#faf9f7;--sx-note-line:rgba(23,32,43,.13);
  color-scheme:light}
/* pe negru: acelasi grad ca fereastra programului de pe pagina 1 (final.css --dm-grade), ca albul sa nu orbeasca */
:root:not([data-theme=light]) .s27 .sx-ai .sx-ai-win,:root:not([data-theme=light]) .s27 .sx-ai .sx-ai-doc,:root:not([data-theme=light]) .s27 .sx-ai .sx-ai-mail,
:root:not([data-theme=light]) .s27 .sx-valabilitati .vb-win,:root:not([data-theme=light]) .s27 .sx-telematica .sx-window img{filter:brightness(.92) contrast(1.06)}
:root:not([data-theme=light]) .s27 .sx-ai .sx-ai-win{border-color:var(--line);box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}

/* ---------- HERE: cardurile si desenul camionului pe negru (tokenii din site-sectiuni/here-premium.css, tema inchisa, adusi pe neutru) ---------- */
:root:not([data-theme=light]) .s27 .sx-here{
  --hp-glow:rgba(255,255,255,.05);--hp-card-bg:#0b0b0b;
  --hp-card-shadow:0 0 0 1px rgba(255,255,255,.11),inset 0 1px 0 rgba(255,255,255,.04),0 2px 6px rgba(0,0,0,.35),0 30px 60px -20px rgba(0,0,0,.8);
  --hp-soft:rgba(255,255,255,.07);--hp-track:rgba(255,255,255,.1);--hp-rule:rgba(255,255,255,.09);
  --hp-body-hi:#2b2b2b;--hp-body-lo:#1d1d1d;--hp-stroke:#a6a6a6;--hp-glass:#2d3338;
  --hp-tire:#0d0d0d;--hp-tire-edge:#5c5c5c;--hp-rim:#474747;--hp-hub:#b4b4b4;--hp-dimc:#8c8c8c;--hp-shadow-c:#000;
  --hp-band:#707070;--hp-bezel:#0b0b0b;--hp-edge:rgba(0,0,0,.9);
  --hp-phone-shadow:drop-shadow(0 2px 3px rgba(0,0,0,.45)) drop-shadow(0 30px 48px rgba(0,0,0,.6))}

/* ---------- Aplicatia: dalele si nodul central pe negru (site-sectiuni/aplicatia-a.css, tema inchisa, pe neutru); liniile pe cerneala ---------- */
.s27 .sx-aplicatia{--sxa-line:color-mix(in srgb,var(--ink) 40%,transparent);--sxa-port:color-mix(in srgb,var(--ink) 85%,transparent);--sxa-hub-accent:var(--ink)}
:root:not([data-theme=light]) .s27 .sx-aplicatia{--sxa-well:#101010;--sxa-well-edge:rgba(255,255,255,.06);--sxa-hub-bg:#121212;--sxa-hub-ink:#ededed;--sxa-hub-ink2:#a1a1a1;
  --sxa-phone-out:0 0 0 1px rgba(255,255,255,.10);--sxa-phone-drop:0 14px 26px -14px rgba(0,0,0,.8)}
:root:not([data-theme=light]) .s27 .sx-aplicatia .sxa-tile{border-color:var(--line)}
:root:not([data-theme=light]) .s27 .sx-aplicatia .sxa-hub{border-color:var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 28px 60px -24px rgba(0,0,0,.85)}
:root:not([data-theme=light]) .s27 .sx-aplicatia .sxa-hub{background:var(--sxa-hub-bg)}

/* ---------- Valabilitati: firele si evidentierea pe cerneala; fereastra ramane a programului (luminoasa) ---------- */
.s27 .sx-valabilitati{--vb-hl:color-mix(in srgb,var(--ink) 55%,transparent);--vb-hl-soft:color-mix(in srgb,var(--ink) 7%,transparent);--vb-slot:var(--line)}

/* Easy si GPS: antetul sta intr-o coloana ingusta (langa card / lista) — faptele unul sub altul, nu rupte 2+1 */
.s27 .sx-easy .facts,.s27 .sx-telematica .facts{display:grid;gap:14px;margin-left:0;clip-path:none}
.s27 .sx-easy .facts>div,.s27 .sx-telematica .facts>div{padding:0;border-left:0}

/* regulile partilor legate de clasele vechi ale site-ului (html.hv-light, html[data-mobil=l]) — aceleasi valori, fara clasele vechi */
.s27 .sx-aplicatia .sxa-hub h3{font-size:19px;line-height:1.2;letter-spacing:-.012em;color:var(--sxa-hub-ink)}
@media (min-width:1280px){.s27 .sx-aplicatia .sxa-hub h3{font-size:var(--sx-fs-h3-lg)}}
@media (max-width:900px){
  .s27 .sx-ai .sx-ai-cap{font-size:14px}
  .s27 .sx-aplicatia .sxa-label{font-size:13px}
  .s27 .sx-aplicatia .sxa-store-t small{font-size:11px}
  .s27 .sx-here .hp-foot,.s27 .sx-here .hp-est,.s27 .sx-here .hp-toll-sub{font-size:14px}
  .s27 .sx-here .hp-tag,.s27 .sx-here .hp-spec dt{font-size:13px}
}
.s27 main [id]{scroll-margin-top:24px}

/* [cc 12.10] pictureize() (build.js) pune ecranele aplicatiei in <picture>: regula din sx-aplicatia.css e pe copil direct (.sxa-screen > img), deci o repetam pentru img din picture */
.sx-aplicatia .sxa-screen>picture{display:contents}
.sx-aplicatia .sxa-screen>picture>img{display:block;width:100%;height:100%;object-fit:cover}

/* [cc 15.10 seara] .s-impreuna (Dispecerat „Pe scurt”): citatul în stânga, „Merge cu” + „Învață” în dreapta; pe telefon una sub alta */
.im{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px 72px;align-items:start}
.im-side{display:grid;gap:40px}
.im-b{display:grid;gap:12px}
.im-lg{font-size:17px;line-height:28px;color:var(--ink)}
.im-lg span{color:var(--mute);padding:0 4px}
/* [cc 18.10] Pe scurt la Documente (hero-vercel/_piese-noi/documente-v2/pe-scurt): fără citat, fraza aprobată în locul lui (.im-fraza); .im--b = „Merge cu” sub frază, „Învață” singur în dreapta */
section#pe-scurt .im-fraza{margin:0;font:300 24px/1.42 var(--ws);letter-spacing:-.016em;word-spacing:0;color:var(--ink);text-wrap:pretty}
@media (max-width:760px){section#pe-scurt .im-fraza{font-size:20px;line-height:1.45}}
@media (min-width:861px){
  section#pe-scurt .im--b{grid-template-areas:"q learn" "merge learn";grid-template-rows:auto 1fr;row-gap:40px}
  section#pe-scurt .im--b .im-side{display:contents}
  section#pe-scurt .im--b .im-q{grid-area:q}
  section#pe-scurt .im--b .im-b:nth-child(1){grid-area:merge}
  section#pe-scurt .im--b .im-b:nth-child(2){grid-area:learn}
}
/* [cc 19.10] Pe scurt la Case de expediție (hero-vercel/_piese-noi/expeditie-v2/pe-scurt): numele modulelor din rândul cu puncte sunt linkuri (sublinierea ca la .facts dd a); pe telefon stau unul sub altul, fiecare cu țintă de 44 px */
section#pe-scurt .im-lg a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color .2s ease}
section#pe-scurt .im-lg a:hover{text-decoration-color:var(--ink)}
@media (prefers-reduced-motion:reduce){section#pe-scurt .im-lg a{transition:none}}
/* telefon: cele 3 nume una sub alta, fiecare cu o țintă de atins de 44 px (punctele dispar).
   Spațiul tare (&nbsp;) dinainte de punct rămâne în DOM ca text anonim: font-size/line-height 0 pe părinte îl face de 0 px, iar linkul își reia mărimea. */
@media (max-width:760px){
  section#pe-scurt .im-lg:has(a){display:grid;justify-items:start;font-size:0;line-height:0}
  section#pe-scurt .im-lg a{display:block;padding:8px 0;font-size:17px;line-height:28px;text-decoration-color:var(--mute)}
  section#pe-scurt .im-lg:has(a) span{display:none}
}
.lk.lk--1{grid-template-columns:minmax(0,1fr)}
@media (max-width:860px){.im{grid-template-columns:minmax(0,1fr)}}
/* [cc 21.10 e2e M11] Ziua dispecerului, sub 1200 px: punctele de pas erau de 6 px și nu făceau nimic la atingere (cele 6 butoane ale jurnalului sunt ascunse pentru cititorul de ecran).
   Acum fiecare punct e o țintă de 40 × 40 px care duce la momentul lui (site27.js: atingerea punctului = clic pe butonul jurnalului); punctul desenat rămâne de 6 px (::before).
   Pe telefon punctele trec pe rând propriu, sub ceas (6 × 40 = 240 px nu încap lângă ceas și dată). */
@media (max-width:1199px){
  .sx-ziua .sx-ziua-steps{gap:0;margin:-8px 0 -8px -16px}
  .sx-ziua .sx-ziua-steps i,.sx-ziua .sx-ziua-steps i.is-past,.sx-ziua .sx-ziua-steps i.is-on{position:relative;flex:0 0 40px;width:40px;height:40px;border-radius:0;background:none;transform:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .sx-ziua .sx-ziua-steps i::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--sx-hair-strong);transition:background-color .3s ease,transform .3s ease}
  .sx-ziua .sx-ziua-steps i.is-past::before{background:color-mix(in srgb,var(--sx-accent) 45%,var(--sx-hair-strong))}
  .sx-ziua .sx-ziua-steps i.is-on::before{background:var(--sx-accent);transform:scale(1.35)}
}
@media (max-width:639px){
  .sx-ziua .sx-ziua-time{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"clock date" "steps steps" "demo demo"}
  .sx-ziua .sx-ziua-steps{margin:-6px 0 -6px -16px}
}
@media (prefers-reduced-motion:reduce){.sx-ziua .sx-ziua-steps i::before{transition:none}}

/* [cc 15.10] esentiale/src/verificare-ecran/_work/fix.css (F3), lipit aici de site27/build.js */
/* [cc 15.10] Re-auditul pe paginile de azi (meniul nou + harta h04 din hero), 54 de configurații tactile: aplicăm DOAR F3.
   F1 (telefon scurt) și F2 (telefon pe orizontală) NU mai aduc butonul din hero în primul ecran: tabloul-hartă h04 stă acum între titlu și buton
   (ex. Dispecerat 375×667: butonul la 826 px fără, 810 px cu F1; 844×390: 691 -> 615 px). Ele stau în fix.before-15-10.css; trebuie o reparație nouă (decizia lui David).
   F3 — ținte de atins de 44 px pe ecrane tactile, fără să miște aspectul (padding + margine negativă): 234 -> 0 ținte sub 44 px, 0 suprapuneri noi. */
@media (pointer:coarse){
  .top .logo{display:flex;align-items:center;min-width:44px;min-height:44px}
  .top .theme-btn,.top .burger,.top .globe>button{width:44px;height:44px}
  .v34-l,.facts dd a{padding-block:10px;margin-block:-10px}
}
@media (pointer:coarse) and (min-width:761px){
  .top .pill{min-height:44px}
  .top .nav>a,.top .dd-t{min-height:44px}
}