/* Pagina de articol (body.article-page, pus de tools/build-blog.py).
   Hero cu ilustratia articolului, sina de etape (cuprins + progres), sectiuni numerotate,
   capturi din aplicatie, componente restilizate, aparitie discreta la scroll.
   Culoarea categoriei vine din .cat-* (blog.css): --c accent, --cbg fundal. */

/* sticky nu merge sub un parinte cu overflow hidden: pages.css pune overflow-x: hidden pe section */
@supports (overflow: clip) {
  body.article-page { overflow-x: clip; }
  body.article-page .content-section { overflow: visible; max-width: none; }
}

/* fallback cu metricile lui Inter (Arial ajustat), ca schimbarea fontului sa nu mute textul (CLS) */
@font-face { font-family: 'Inter Fallback'; font-weight: 100 500; src: local('Arial'), local('ArialMT'), local('Helvetica'); size-adjust: 107.06%; ascent-override: 90.49%; descent-override: 22.56%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; font-weight: 600 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'); size-adjust: 104%; ascent-override: 90.49%; descent-override: 22.56%; line-gap-override: 0%; }
body.article-page { font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* text secundar: --muted (#94A3B8) nu trece AA pe alb.
   Accentul e mereu albastrul brandului, indiferent de categorie (cat-* ramane doar pe cardurile din blog). */
body.article-page, body.article-page .blog-related [class*="cat-"] { --sub: #64748B; --c: var(--primary); --cbg: var(--primary-50); }

/* contrast AA: textul pe fundal albastru deschis in albastru inchis; gri secundar #64748B in loc de --muted */
.article-page .breadcrumb nav, .article-page .blog-card-meta { color: var(--sub); }
.article-page .section-label, .article-page .links-grid a { color: var(--primary-dark); }

/* ================= HERO ================= */
.article-hero { padding: 40px 0 56px !important; background: linear-gradient(180deg, #fff 0%, var(--bg) 100%); }
.article-hero::before, .article-hero::after { display: none; }
.article-hero .container { max-width: 1160px; text-align: left; }
.article-hero.has-ill .container {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: 56px; align-items: start;
}
.article-hero.has-ill .container > * { grid-column: 1; }
.article-hero .hero-badge { justify-self: start; background: var(--cbg); color: var(--primary-dark); border-color: transparent; }
.article-hero .hero-badge .dot { background: var(--c); }
.article-hero h1 { font-size: 44px; margin-bottom: 18px; }
.article-hero p.hero-desc { margin: 0 0 24px; max-width: 620px; font-size: 18px; line-height: 1.6; }
.article-hero .article-meta { justify-content: flex-start !important; color: var(--sub); font-size: 14px; }
.article-hero .article-meta .read-time { display: inline-flex; align-items: center; gap: 6px; }
.article-hero .article-meta .read-time svg { width: 15px; height: 15px; }

.ah-ill {
  grid-column: 2 !important; grid-row: 1 / span 4; align-self: start; margin-top: 24px; position: relative;
  aspect-ratio: 21 / 10; border-radius: 20px; overflow: hidden; background: var(--cbg);
  box-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.22), inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}
/* hero cu imagine reala: foaia modelului iese din fundalul albastru deschis */
.ah-img { display: flex; justify-content: center; align-items: flex-start; padding: 22px 22px 0; box-sizing: border-box; aspect-ratio: 16 / 10 !important; }
.ah-img img { display: block; width: 100%; height: auto; border-radius: 10px 10px 0 0; background: #fff;
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .35), 0 0 0 1px rgba(15, 23, 42, .06); }
/* .blog-ill e absolut, pe toata suprafata (blog.css) */

@media (prefers-reduced-motion: no-preference) {
  .ah-ill .blog-ill > * { animation: ah-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; transform-box: fill-box; }
  .ah-ill .blog-ill > *:nth-child(2) { animation-delay: 60ms; }
  .ah-ill .blog-ill > *:nth-child(3) { animation-delay: 120ms; }
  .ah-ill .blog-ill > *:nth-child(4) { animation-delay: 180ms; }
  .ah-ill .blog-ill > *:nth-child(5) { animation-delay: 240ms; }
  .ah-ill .blog-ill > *:nth-child(6) { animation-delay: 300ms; }
  .ah-ill .blog-ill > *:nth-child(7) { animation-delay: 360ms; }
  .ah-ill .blog-ill > *:nth-child(n+8) { animation-delay: 420ms; }
  .ah-ill .i-s, .ah-ill .i-as, .ah-ill .i-ws { stroke-dasharray: 700; stroke-dashoffset: 700; animation: ah-draw 1.1s 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
}
/* fara cadrul „to”: elementele revin la opacitatea lor din clasa (umbre 0.06, decor 0.14 etc.) */
@keyframes ah-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes ah-draw { to { stroke-dashoffset: 0; } }

/* ================= BANDA DE SUS (ca la Ahrefs / Stripe): breadcrumb + hero pe albastrul brandului ================= */
/* meniul ramane alb (e semi-transparent si s-ar colora peste banda) */
.article-page .navbar { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.article-page .breadcrumb { background: #0068B5; }
.article-page .breadcrumb nav, .article-page .breadcrumb nav span { color: rgba(255, 255, 255, .9); }
.article-page .breadcrumb a { color: #fff; }
.article-page .article-hero { background: #0068B5 !important; padding: 28px 0 48px !important; position: relative; overflow: hidden; }
.article-page .article-hero::after { display: block !important; content: ''; position: absolute; right: -120px; bottom: -160px; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)); pointer-events: none; }
.article-page .article-hero .container { position: relative; z-index: 1; }
.article-page .article-hero h1 { color: #fff; font-size: 52px; line-height: 1.1; letter-spacing: -0.02em; }
.article-page .article-hero h1 .gradient-text { background: none; -webkit-text-fill-color: #CFE8FF; color: #CFE8FF; }
.article-page .article-hero p.hero-desc { color: rgba(255, 255, 255, .92); }
.article-page .article-hero .article-meta, .article-page .article-hero .article-meta strong { color: rgba(255, 255, 255, .9); }
.article-page .article-hero .hero-badge { background: rgba(255, 255, 255, .14); color: #fff; }
.article-page .article-hero .hero-badge .dot { background: #fff; }
.article-page .ah-ill { box-shadow: 0 24px 48px -20px rgba(0, 20, 50, .45); }
.article-page .ah-img { background: rgba(255, 255, 255, .12); }
@media (max-width: 768px) {
  .article-page .breadcrumb { padding-top: 80px; }
  .article-page .article-hero { padding: 16px 0 28px !important; }
  .article-page .article-hero h1 { font-size: 32px; }
  /* pe telefon titlul vine primul, imaginea dupa text */
  .article-page .ah-ill { order: 5 !important; margin: 16px 0 0 !important; }
}
@media (max-width: 480px) { .article-page .article-hero h1 { font-size: 28px; } }

/* ghiduri din aceeasi categorie: grila ordonata, nu etichete imprastiate */
.article-page .internal-links { padding: 36px 0 40px; }
.article-page .internal-links h3 { text-align: left; margin-bottom: 14px; }
.article-page .links-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; justify-content: stretch; }
.article-page .links-grid a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; box-sizing: border-box;
  padding: 10px 14px; border-radius: 12px; font-size: 14.5px; line-height: 1.35; background: #fff; border: 1px solid var(--border); color: var(--heading); }
.article-page .links-grid a::after { content: ''; flex: 0 0 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230072C6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (hover: hover) { .article-page .links-grid a:hover { background: var(--primary-50); border-color: var(--primary-100); color: var(--primary-dark); } }
.article-page .links-grid a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 1199px) { .article-page .links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .article-page .internal-links { padding: 24px 0 28px; }
  .article-page .links-grid { grid-template-columns: 1fr; gap: 6px; }
  .article-page .links-grid a { min-height: 48px; }
}

/* fara gol mare intre articol si intrebarile frecvente */
.article-page .article-layout { padding-bottom: 0; }
.article-page .content-section:has(.article-layout) { padding-bottom: 24px !important; }
.article-page .faq-section { padding-top: 40px !important; padding-bottom: 48px !important; }
.article-page .faq-section .section-header { margin-bottom: 20px; }
.article-page .faq-section .section-label { margin-bottom: 8px; }
.article-page .faq-section .section-title { margin-bottom: 0; }
@media (max-width: 768px) {
  .article-page .content-section:has(.article-layout) { padding-bottom: 16px !important; }
  .article-page .faq-section { padding-top: 28px !important; padding-bottom: 32px !important; }
}

/* ================= LAYOUT CU SINA ================= */
.article-layout { max-width: 1160px; }
.article-layout .content-block { counter-reset: etapa; }
@media (min-width: 1100px) {
  .article-layout { display: grid; grid-template-columns: 270px minmax(0, 700px); column-gap: 64px; justify-content: center; }
  .article-layout > .content-block { grid-column: 2; max-width: none; margin: 0; }
  .article-layout > .article-rail { grid-column: 1; grid-row: 1; }
  .article-layout .toc { display: none; }
}

/* ---- sina (desktop) */
.article-rail { display: none; }
@media (min-width: 1100px) {
  .article-rail { display: block; position: -webkit-sticky; position: sticky; top: 104px; align-self: start; max-height: calc(100vh - 128px); overflow-y: auto; scrollbar-width: none; padding: 6px 4px 16px 8px; margin-left: -8px; }
  .article-rail::-webkit-scrollbar { display: none; }
}
.ar-card { margin: 24px 0 0; padding: 16px; border-radius: 14px; background: var(--primary-50); }
.ar-card b { display: block; font-size: 15.5px; color: var(--heading); }
.ar-card span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--body); margin: 4px 0 12px; }
.ar-cta {
  display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; padding: 0 16px; min-height: 42px; border-radius: 10px;
  font-size: 15px; font-weight: 600; white-space: nowrap; color: #fff; background: var(--primary); text-decoration: none; transition: background-color 0.2s;
}
.ar-cta svg { width: 16px; height: 16px; flex: 0 0 16px; transition: transform 0.2s; }
@media (hover: hover) { .ar-cta:hover { background: var(--primary-dark); } .ar-cta:hover svg { transform: translateX(3px); } }
.ar-cta:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.af-cta { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0 13px; font-size: 14.5px; font-weight: 600; color: var(--primary); text-decoration: none; }
.af-cta::after { content: '\2192'; transition: transform 0.2s; }
@media (hover: hover) { .af-cta:hover::after { transform: translateX(3px); } }
.af-zoom { display: block; cursor: zoom-in; }
.ar-title { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sub); margin: 0 0 10px 14px; }
/* cuprins pe desktop: lista simpla de text; sectiunea curenta in albastru, cu bara de 2px in stanga */
.ar-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.ar-list li { position: relative; }
.ar-list a { display: block; padding: 7px 0 7px 14px; margin-left: -1px; border-left: 2px solid transparent;
  font-size: 15px; line-height: 1.4; color: var(--sub); text-decoration: none; transition: color 0.15s, border-color 0.15s; }
.ar-list li.current a { color: var(--primary-dark); font-weight: 600; border-left-color: var(--primary); }
@media (hover: hover) { .ar-list a:hover { color: var(--heading); } }
.ar-list a:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; border-radius: 4px; }

/* ---- telefon si tableta: linie de progres de 3px sub meniu, in locul barei de etape */
.article-progress { position: fixed; left: 0; right: 0; top: 64px; height: 3px; z-index: 40; pointer-events: none; background: transparent; }
.article-progress span { display: block; height: 100%; background: var(--primary); transform-origin: left; transform: scaleX(0); will-change: transform; }
@media (min-width: 769px) { .article-progress { top: 72px; } }
@media (min-width: 1100px) { .article-progress { display: none; } }
html:not(.js-art) .article-progress { display: none; }
/* ---- telefon/tableta: buton plutitor „Cuprins” + lista care se deschide de jos */
.toc-fab, .toc-sheet { display: none; }
@media (max-width: 1099px) {
  .js-art .toc-fab { display: inline-flex; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s; position: fixed; z-index: 45; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px;
    right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    border: 0; border-radius: 999px; background: var(--primary); color: #fff; font: inherit; font-size: 15px; font-weight: 600;
    box-shadow: 0 10px 24px -8px rgba(0, 60, 120, .55); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .js-art .toc-fab.is-shown { opacity: 1; transform: none; pointer-events: auto; }
  .toc-fab svg { width: 20px; height: 20px; }
  .toc-fab:focus-visible { outline: 3px solid var(--primary-100); outline-offset: 2px; }
  .js-art .toc-sheet:not([hidden]) { display: block; position: fixed; z-index: 46; left: 0; right: 0; bottom: 0; max-height: 72vh; max-height: 72dvh; overflow-y: auto;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #fff; border-radius: 18px 18px 0 0;
    box-shadow: 0 -16px 40px -12px rgba(15, 23, 42, .35); padding: 6px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  html.toc-open::after { content: ''; position: fixed; inset: 0; z-index: 44; background: rgba(15, 23, 42, .35); }
  .toc-sheet-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 6px; }
  .toc-sheet-h b { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sub); }
  .toc-close { width: 44px; height: 44px; border: 0; background: none; font-size: 28px; line-height: 1; color: var(--sub); cursor: pointer; }
  .toc-sheet-list a { padding: 12px 0 12px 14px !important; font-size: 16px !important; min-height: 48px; box-sizing: border-box; }
  .js-art .article-layout .toc { display: none !important; }
}
/* sub 1100px: cuprinsul din text, compact, imediat dupa intro */
@media (max-width: 1099px) {
  .article-layout .toc { margin: 0 0 24px; padding: 14px 16px 10px; border-radius: 14px; background: #fff; border: 1px solid var(--border); }
  .article-layout .toc-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sub); margin-bottom: 4px; }
  .article-layout .toc-title svg { display: none; }
  .article-layout .toc ol { counter-reset: tc; margin: 0; padding: 0 !important; list-style: none; }
  .article-layout .toc ol li { counter-increment: tc; padding: 0 !important; border-top: 1px solid var(--border); }
  .article-layout .toc ol li::before { content: none !important; }
  .article-layout .toc ol li:first-child { border-top: 0; }
  .article-layout .toc ol li a { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; min-height: 44px; box-sizing: border-box; font-size: 15px; font-weight: 500; color: var(--heading); }
  .article-layout .toc ol li a::before { content: counter(tc, decimal-leading-zero); font-size: 12px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; flex: 0 0 20px; }
}

/* ================= SECTIUNI NUMEROTATE ================= */
.article-layout .content-block h2[id] {
  counter-increment: etapa; font-size: 30px; line-height: 1.2; letter-spacing: -0.015em;
  margin: 44px 0 16px; padding-top: 36px; border-top: 1px solid var(--border); scroll-margin-top: 128px;
}
.article-layout .content-block h2[id]::before {
  content: counter(etapa, decimal-leading-zero); display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.1em; color: var(--c); font-variant-numeric: tabular-nums;
}
.article-layout .content-block > h2[id]:first-of-type,
.article-layout .content-block > .toc + h2[id] { margin-top: 8px; padding-top: 0; border-top: 0; }
@media (min-width: 1100px) { .article-layout .content-block h2[id] { scroll-margin-top: 104px; } }
.article-layout .content-block p { font-size: 17px; line-height: 1.75; }
.article-layout .content-block ul li, .article-layout .content-block ol li { font-size: 16px; }

/* ================= CAPTURI DIN APLICATIE ================= */
.article-fig { margin: 36px 0 40px; }
.af-frame {
  border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 24px 56px -28px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.06);
}
.af-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--bg); border-bottom: 1px solid var(--border); }
.af-bar > span { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.af-bar em { margin-left: 10px; font-style: normal; font-size: 11.5px; color: var(--sub); }
.af-frame img { display: block; width: 100%; height: auto; }
.article-fig figcaption { display: flex; gap: 10px; margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--sub); }
.article-fig figcaption::before { content: ''; flex: 0 0 3px; border-radius: 3px; background: var(--c); }

/* ================= COMPONENTE ================= */
/* casete: iconita SVG pe tip (mask, ca sa ia culoarea textului) */
.article-layout .info-box { position: relative; padding: 20px 24px 20px 58px !important; border-radius: 4px 14px 14px 4px !important; }
.article-layout .info-box::before {
  content: ''; position: absolute; left: 22px; top: 21px; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--ib-icon) center / contain no-repeat; mask: var(--ib-icon) center / contain no-repeat;
  --ib-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E");
}
.article-layout .info-box.info::before { --ib-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); }
.article-layout .info-box.tip::before { --ib-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4'/%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.2 1 2V17h6v-.3c0-.8.4-1.5 1-2A7 7 0 0 0 12 2z'/%3E%3C/svg%3E"); }
.article-layout .info-box.warning::before { --ib-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.article-layout .info-box.success::before { --ib-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E"); }
.article-layout .info-box.warning { background: #FFF7E6; }
.article-layout .info-box.tip { background: var(--primary-50); border-left-color: var(--primary); color: var(--primary-dark); }
.article-layout .info-box.info { background: #fff; border: 1px solid var(--primary-100); border-left: 4px solid var(--primary); color: var(--body); }
.article-layout .info-box.info > strong:first-child { color: var(--heading); }
.article-layout .info-box.info::before { color: var(--primary); }

/* liste cu bifa: cerc verde in loc de caracterul ✓ */
.article-layout .content-block > ul > li { padding-left: 32px; }
.article-layout .content-block > ul > li::before {
  content: ''; left: 0; top: 10px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230072C6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: inset 0 0 0 1px var(--primary-100);
}

/* liste numerotate: pasi legati printr-o linie */
.article-layout .content-block > ol:not([class*="vx-"]) { margin: 8px 0 24px; }
/* acelasi stil de pas ca pe homepage: cerc alb cu contur albastru, legat printr-o linie.
   !important: unele articole au in head un <style> propriu cu !important pentru ol */
.article-layout .content-block > ol:not([class*="vx-"]) > li { padding: 6px 0 14px 46px !important; }
.article-layout .content-block > ol:not([class*="vx-"]) > li::before {
  content: counter(ol-counter) !important; left: 0; top: 4px !important; width: 30px; height: 30px; border-radius: 50%; box-sizing: border-box;
  display: grid; place-items: center; font-size: 13px !important; font-weight: 700; color: var(--primary); background: #fff;
  border: 2px solid var(--primary); line-height: 1;
}
.article-layout .content-block > ol:not([class*="vx-"]) > li:not(:last-child)::after {
  content: ''; position: absolute; left: 14px; top: 38px; bottom: -2px; width: 2px; border-radius: 2px; background: var(--primary-100);
}
/* pasii scrisi ca blocuri cu stil inline (ex. „Cum configurezi primul pipeline”): acelasi cerc */
.article-layout .content-block div[style*="border-radius:50%;background:var(--primary)"] {
  background: #fff !important; color: var(--primary) !important; border: 2px solid var(--primary); box-sizing: border-box;
}
.article-layout .content-block div[style*="background:#f1f5f9;border-radius:14px"] { background: #fff !important; box-shadow: 0 0 0 1px var(--border); }

/* tabele */
.article-layout .content-table { border-radius: 14px; box-shadow: 0 0 0 1px var(--border), 0 12px 28px -20px rgba(15, 23, 42, 0.25); }
@media (min-width: 769px) { .article-layout .content-table { overflow: hidden; } }
/* pe mobil tabelul se deruleaza orizontal (pages.css); umbrele de pe margini arata ca mai e continut */
@media (max-width: 768px) {
  .article-layout .content-table {
    overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    background:
      linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) left center / 40px 100% no-repeat local,
      linear-gradient(270deg, #fff 30%, rgba(255,255,255,0)) right center / 40px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.18), transparent) left center / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.18), transparent) right center / 14px 100% no-repeat scroll,
      #fff;
  }
}
.article-layout .content-table thead th { background: var(--cbg); color: var(--heading); }
.article-layout .content-table:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* blocul de produs din articol: stilul site-ului (pages.css), aliniat la stanga ca restul textului */
.article-layout .cta-product-block { text-align: left; padding: 32px 36px; background: var(--gradient); border: 0; }
.article-layout .cta-product-block h3 { color: #fff; font-size: 22px; margin: 0 0 8px; }
.article-layout .cta-product-block p { margin: 0; }
/* desktop: textul pe toata latimea ramasa, butonul in dreapta (fara rand gol doar pentru buton) */
@media (min-width: 769px) {
  .article-layout .cta-product-block { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; align-items: center; padding: 26px 30px; }
  .article-layout .cta-product-block > :not(.btn) { grid-column: 1; }
  .article-layout .cta-product-block > .btn { grid-column: 2; grid-row: 1 / span 2; margin: 0; white-space: nowrap; }
}
.article-layout .cta-product-block p { color: rgba(255, 255, 255, 0.88); max-width: none; }
.article-layout .cta-product-block .btn { background: #fff; color: var(--primary-dark); box-shadow: 0 8px 20px -10px rgba(2, 74, 128, 0.6); }
@media (hover: hover) { .article-layout .cta-product-block .btn:hover { background: var(--primary-50); } }
.article-layout .cta-product-block .btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ================= APARITIE LA SCROLL ================= */
@media (prefers-reduced-motion: no-preference) {
  .js-art .article-layout .rv { opacity: 0; transform: translateY(16px); transition: opacity 0.45s ease-out, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js-art .article-layout .rv.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ================= TABLETA / MOBIL ================= */
@media (max-width: 1024px) {
  .article-hero.has-ill .container { column-gap: 32px; }
  .article-hero h1 { font-size: 36px; }
}
@media (max-width: 768px) {
  .article-hero { padding: 12px 0 20px !important; }
  .article-hero .hero-badge { display: none; }
  .article-hero.has-ill .container { display: flex; flex-direction: column; align-items: flex-start; }
  .article-hero.has-ill .container > * { width: 100%; }
  .article-hero.has-ill .container > .hero-badge { width: auto; }
  /* pe telefon: banda joasa, cu ilustratia intreaga (fara decupare) centrata */
  .ah-ill { order: -1; margin-bottom: 16px; border-radius: 14px; aspect-ratio: auto; height: 120px; }
  .ah-ill .blog-ill { position: static; display: block; height: 100%; width: auto; aspect-ratio: 21 / 10; margin: 0 auto; }
  .ah-img { height: 170px; padding: 16px 18px 0; }
  .article-hero h1 { font-size: 30px; }
  .article-hero p.hero-desc { font-size: 16px; }
  .article-layout .content-block h2[id] { font-size: 24px; margin: 28px 0 12px; padding-top: 24px; }
  .article-layout .content-block h2[id]::before { margin-bottom: 4px; }
  .article-layout .content-block p { font-size: 16px; }
  .article-layout .info-box { padding: 16px 18px 16px 50px !important; }
  .article-layout .info-box::before { left: 18px; top: 17px; width: 18px; height: 18px; }
  .article-fig { margin: 28px 0 32px; }
  .af-bar { height: 24px; }
  .af-bar em { display: none; }
  .article-layout .cta-product-block { padding: 22px 20px; }
  .article-layout .cta-product-block .btn { margin-top: 16px; }
  .article-layout .content-block div[style*="background:#f1f5f9;border-radius:14px"] { padding: 18px !important; gap: 14px !important; }
}
@media (max-width: 480px) {
  .article-hero h1 { font-size: 26px; }
}

/* la printare: tot continutul vizibil, fara sina si bara de etape */
/* ================= BLOCURI VIZUALE (vx-*): mai putin text, informatia in carduri ================= */
/* Randurile merg pe toata latimea (fara balance, care lasa gol in dreapta). Ca sa nu ramana 1-2 cuvinte singure
   pe ultimul rand, build-blog.py leaga ultimele cuvinte cu &nbsp; (leaga_finaluri). Fara pretty: si el muta cuvinte devreme. */
.content-block .vx-small { font-size: 14px; color: var(--sub); line-height: 1.6; }
.content-block .vx-disclaimer { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); }
.vx-pair, .vx-tiles, .vx-uses, .vx-dodont, .vx-kv { display: grid; gap: 12px; margin: 16px 0 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vx-card, .vx-tile, .vx-uses > div, .vx-do, .vx-dont, .vx-kv > div {
  background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.content-block .vx-card h3, .content-block .vx-tile h3, .content-block .vx-do h3, .content-block .vx-dont h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.35; }
.vx-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.vx-card > :not(.vx-ico) { grid-column: 2; }
.vx-ico { display: inline-flex; width: 40px; height: 40px; border-radius: 12px; background: var(--primary-50); align-items: center; justify-content: center; grid-row: 1 / span 3; align-self: start; }
.vx-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.content-block .vx-q { font-size: 15px; font-weight: 600; color: var(--primary-dark); margin: 0 0 4px; line-height: 1.4; }
.article-layout .content-block p.vx-meta { font-size: 14px; color: var(--sub); margin: 0; line-height: 1.45; }
.content-block .vx-card ul, .content-block .vx-do ul, .content-block .vx-dont ul { margin: 0; }
.article-layout .content-block .vx-card li, .article-layout .content-block .vx-do li, .article-layout .content-block .vx-dont li { font-size: 14px; line-height: 1.5; padding: 4px 0 4px 22px; }
.content-block .vx-card li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); top: 12px; left: 4px; }

.vx-tile { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: center; align-content: start; padding: 16px; }
.vx-tile .vx-chips { grid-column: 1 / -1; }
.vx-n { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; font-size: 14px; align-items: center; justify-content: center; margin: 0; }
.content-block .vx-tile p { font-size: 14.5px; line-height: 1.5; margin: 0; }
.content-block ul.vx-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 12px 0 0; padding: 0; }
.article-layout .content-block .vx-chips li { padding: 6px 10px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); font-size: 13.5px; line-height: 1.35; color: var(--heading); }
.article-layout .content-block .vx-chips li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.content-block .vx-chips li::before { content: none; }

/* fisa completata, ca un formular */
.vx-form { margin: 20px 0 10px; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 18px 40px -24px rgba(15, 23, 42, .28); }
.vx-form-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 16px 20px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; }
.vx-form-head b { font-size: 17px; }
.vx-form-head span { font-size: 13.5px; opacity: .9; }
.vx-form dl { margin: 0; padding: 6px 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.vx-form dl > div { padding: 10px 0; border-bottom: 1px dashed var(--border); }
.vx-form dt { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sub); }
.vx-form dd { margin: 2px 0 0; font-size: 15px; color: var(--heading); line-height: 1.45; }
.vx-form-next { margin: 4px 20px 18px; padding: 12px 14px; border-radius: 12px; background: var(--primary-50); color: var(--primary-dark); font-size: 15px; font-weight: 600; line-height: 1.45; }
.vx-form-next span { display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }

/* formula soldului */
.vx-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 20px; }
.vx-formula span { padding: 10px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); font-size: 14px; color: var(--body); line-height: 1.3; }
.vx-formula span b { display: block; color: var(--heading); }
.vx-formula i { font-style: normal; font-weight: 700; font-size: 20px; color: var(--primary); }
.vx-formula .vx-res { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }

.vx-uses > div { padding: 14px 16px; }
.vx-uses b, .vx-kv b { display: block; color: var(--heading); font-size: 15.5px; margin-bottom: 4px; }
.vx-uses span, .vx-kv span { display: block; font-size: 14px; line-height: 1.5; color: var(--body); }

/* da / nu */
.vx-do { border-top: 4px solid var(--primary); }
.vx-dont { border-top: 4px solid #94A3B8; }
.content-block .vx-dont li::before { content: '\2715'; color: #64748B; }
.content-block .vx-do li::before { color: var(--primary); }
.vx-callout { margin: 0 0 24px; padding: 16px 18px; border-radius: 14px; background: var(--primary-50); color: var(--primary-dark); font-size: 15px; line-height: 1.6; scroll-margin-top: 104px; }

/* functii, in randuri scurte */
.content-block ul.vx-feat { display: grid; gap: 10px; margin: 18px 0 20px; }
.article-layout .content-block .vx-feat li { padding: 14px 16px 14px 52px; border: 1px solid var(--border); border-radius: 14px; background: #fff; font-size: 14.5px; line-height: 1.45; }
.article-layout .content-block .vx-feat li::before { content: ''; left: 16px; top: 15px; width: 24px; height: 24px; border-radius: 50%; background: var(--primary-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230072C6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px 14px no-repeat; }
.vx-feat li b { display: block; color: var(--heading); font-size: 15.5px; margin-bottom: 2px; }

/* greseala -> ce faci */
.vx-mist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 28px; }
.vx-mist > div { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.vx-mist > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.vx-mist-ico { width: 32px; height: 32px; border-radius: 10px; background: var(--primary-50); display: inline-flex; align-items: center; justify-content: center; }
.vx-mist-ico svg { width: 18px; height: 18px; fill: none; stroke: var(--primary-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.content-block .vx-mist h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.article-layout .content-block .vx-mist p { grid-column: 1 / -1; margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--body); }

@media (max-width: 360px) {
  .vx-qa, .vx-uses, .vx-kv { grid-template-columns: 1fr; }
  .content-block ul.vx-chips { grid-template-columns: 1fr; }
  .vx-form dl > div { grid-template-columns: 1fr; gap: 2px; }
  .vx-details summary { font-size: 14.5px; }
}

/* fisa de cont: extras ca un document, suma de incasat in evidenta */
.vx-ledger { margin: 18px 0 16px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 18px 40px -26px rgba(15, 23, 42, .3); }
.vx-ledger-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--bg); }
.vx-ledger-head b { font-size: 15px; color: var(--heading); }
.vx-ledger-head span { font-size: 12.5px; color: var(--sub); }
.vx-ledger table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.vx-ledger th { padding: 10px 18px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sub); text-align: right; background: none; border: 0; }
.vx-ledger th:first-child, .vx-ledger td:first-child { text-align: left; }
.vx-ledger td { padding: 11px 18px; border-top: 1px solid var(--border); text-align: right; font-size: 15px; color: var(--heading); white-space: nowrap; vertical-align: middle; }
.vx-ledger td:first-child { white-space: normal; }
.vx-ledger td b { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
.vx-ledger td span { display: block; font-size: 12.5px; color: var(--sub); margin-top: 2px; }
.vx-ledger .vx-deb { color: var(--primary-dark); font-weight: 600; }
.vx-ledger .vx-cred { color: #64748B; }
.vx-ledger-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; background: var(--primary); color: #fff; }
.vx-ledger-total span { font-weight: 600; font-size: 15px; line-height: 1.3; }
.vx-ledger-total small { font-weight: 400; font-size: 12.5px; }
.vx-ledger-total b { font-size: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vx-ledger figcaption { padding: 10px 18px; font-size: 12.5px; color: var(--sub); border-top: 1px solid var(--border); }
@media (max-width: 640px) {
  .vx-ledger-head, .vx-ledger-total, .vx-ledger figcaption { padding-left: 14px; padding-right: 14px; }
  .vx-ledger th { padding: 8px 10px 4px; font-size: 10.5px; }
  .vx-ledger td { padding: 10px; font-size: 13.5px; }
  .vx-ledger th:first-child, .vx-ledger td:first-child { padding-left: 14px; }
  .vx-ledger th:last-child, .vx-ledger td:last-child { padding-right: 14px; }
  .vx-ledger td b { font-size: 14px; }
  .vx-ledger td span { font-size: 12px; }
  .vx-ledger-total b { font-size: 19px; }
}

/* mini-board de pipeline (coloane cu carduri) */
.vx-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0 18px; padding: 10px; border-radius: 16px; background: var(--primary-50); }
.vx-board > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vx-board b { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primary-dark); padding: 2px 4px 4px; }
.vx-board span { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--border); font-size: 13.5px; font-weight: 600; color: var(--heading); line-height: 1.3; }
.vx-board em { font-style: normal; font-weight: 700; color: var(--primary); font-size: 13px; font-variant-numeric: tabular-nums; }
/* intrebari fara raspuns */
.vx-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 16px; }
.vx-qa > div { padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--border); }
.vx-qa b { display: block; font-size: 15px; color: var(--heading); }
.vx-qa span { display: block; font-size: 14px; color: #64748B; font-style: italic; margin-top: 2px; }
/* etape in sir, numerotate */
.content-block ol.vx-flow { display: grid; gap: 6px; margin: 16px 0 16px; padding: 0; counter-reset: fl; }
.article-layout .content-block .vx-flow li { counter-increment: fl; position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 16px 10px 50px !important; border-radius: 12px; background: #fff; border: 1px solid var(--border); font-size: 14.5px; line-height: 1.4; color: var(--body); }
.article-layout .content-block .vx-flow li::before { content: counter(fl) !important; position: absolute; left: 14px; top: 9px; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.vx-flow b { font-size: 15px; color: var(--heading); }
.vx-kv.vx-kv3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* exemple pe industrii: etapele ca lant */
.vx-chains { display: grid; gap: 10px; margin: 14px 0 12px; }
.vx-chains > div { padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--border); }
.content-block .vx-chains h3 { margin: 0 0 8px; font-size: 15.5px; }
.content-block ol.vx-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; }
.article-layout .content-block .vx-chain li { padding: 5px 10px; border-radius: 8px; background: var(--primary-50); color: var(--primary-dark); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.article-layout .content-block .vx-chain li::before { content: none !important; }
.article-layout .content-block .vx-chain li { padding: 5px 10px !important; }
.content-block .vx-chain li + li { margin-left: 18px; position: relative; }
.content-block .vx-chain li + li::after { content: ''; position: absolute; left: -16px; top: 50%; width: 10px; height: 10px; transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; }
/* pasi compacti */
.content-block ol.vx-steps { display: grid; gap: 8px; margin: 14px 0 20px; padding: 0; counter-reset: st; }
.article-layout .content-block .vx-steps li { counter-increment: st; position: relative; padding: 12px 16px 12px 54px !important; border-radius: 12px; background: #fff; border: 1px solid var(--border); font-size: 14.5px; line-height: 1.45; color: var(--body); }
.article-layout .content-block .vx-steps li::before { content: counter(st) !important; position: absolute; left: 16px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.vx-steps b { display: block; font-size: 15.5px; color: var(--heading); }
@media (max-width: 640px) {
  .vx-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vx-qa { grid-template-columns: 1fr 1fr; gap: 8px; }
  .vx-qa > div { padding: 10px 12px; }
  .vx-qa b { font-size: 14px; }
  .vx-qa span { font-size: 13px; }
  .article-layout .content-block .vx-flow li { grid-template-columns: 1fr; gap: 0; padding: 9px 12px 9px 46px !important; }
  .article-layout .content-block .vx-flow li::before { left: 12px; top: 10px; }
  .vx-kv.vx-kv3 { grid-template-columns: 1fr; }
  .article-layout .content-block .vx-steps li { padding: 10px 12px 10px 48px !important; }
  .article-layout .content-block .vx-steps li::before { left: 12px; top: 11px; }
}

/* blocuri noi: legatura in text, sold debitor/creditor, detalii pliate */
.content-block .vx-inline-cta { margin: 4px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--primary-50); color: var(--primary-dark); font-size: 15px; font-weight: 500; }
.content-block .vx-inline-cta a { font-weight: 700; white-space: nowrap; color: var(--primary-dark); }
.vx-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vx-details { margin: 0 0 10px; border: 1px solid var(--border); border-radius: 14px; background: #fff; scroll-margin-top: 128px; }
.vx-details summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 18px; font-weight: 600; font-size: 15.5px; color: var(--heading); }
.vx-details summary::-webkit-details-marker { display: none; }
.vx-details summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--primary); }
.vx-details[open] summary::after { content: '\2212'; }
.vx-details summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 14px; }
.article-layout .content-block .vx-details p { margin: 0; padding: 0 18px 16px; font-size: 15px; }

/* ---- telefon: un singur rand de carduri, totul mai strans */
@media (max-width: 640px) {
  .vx-pair, .vx-tiles, .vx-dodont { grid-template-columns: 1fr; gap: 8px; }
  .vx-kv, .vx-uses { grid-template-columns: 1fr; gap: 6px; }
  .vx-card, .vx-tile, .vx-uses > div, .vx-do, .vx-dont, .vx-kv > div { padding: 12px 14px; border-radius: 12px; }
  .vx-uses b, .vx-kv b { font-size: 14.5px; }
  .vx-uses span, .vx-kv span { font-size: 13.5px; line-height: 1.4; }
  .vx-tile .vx-n { width: 26px; height: 26px; font-size: 13px; }
  .vx-tile { grid-template-columns: 26px minmax(0, 1fr); }
  .content-block .vx-tile h3 { font-size: 16px; margin: 0; }
  .content-block ul.vx-chips { margin-top: 10px; gap: 5px; }
  .article-layout .content-block .vx-chips li { font-size: 13px; padding: 6px 8px; }
  .vx-card { grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; }
  .vx-ico { width: 34px; height: 34px; border-radius: 10px; }
  .vx-ico svg { width: 20px; height: 20px; }
  .content-block .vx-card h3 { font-size: 16px; }
  /* fisa completata: eticheta stanga, valoarea dreapta, rand compact */
  .vx-form { margin-top: 14px; border-radius: 14px; }
  .vx-form-head { padding: 12px 14px; }
  .vx-form dl { grid-template-columns: 1fr; padding: 2px 14px; }
  .vx-form dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 8px 0; align-items: baseline; }
  .vx-form dt { font-size: 11px; }
  .vx-form dd { margin: 0; font-size: 14px; }
  .vx-form-next { margin: 4px 14px 14px; font-size: 14px; }
  /* formula soldului pe doua randuri egale */
  /* formula soldului: un rand pe termen, operatorul in stanga */
  .vx-formula { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px 8px; align-items: center; }
  .vx-formula span { grid-column: 2; font-size: 14px; padding: 8px 12px; display: flex; gap: 8px; align-items: baseline; }
  .vx-formula span b { display: inline; }
  .vx-formula i { grid-column: 1; text-align: center; font-size: 18px; }
  .article-layout .content-block .vx-do li, .article-layout .content-block .vx-dont li { font-size: 14.5px; padding: 3px 0 3px 22px; }
  .content-block .vx-do h3, .content-block .vx-dont h3 { margin-bottom: 2px; }
  .content-block ul.vx-feat { gap: 6px; }
  .article-layout .content-block .vx-feat li { padding: 10px 12px 10px 46px; border-radius: 12px; }
  .article-layout .content-block .vx-feat li::before { left: 12px; top: 11px; }
  .vx-feat li b { font-size: 15px; }
  .vx-mist { grid-template-columns: 1fr; gap: 8px; }
  .vx-mist > div { padding: 12px 14px; border-radius: 12px; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; }
  .vx-mist-ico { width: 28px; height: 28px; border-radius: 8px; }
  .content-block .vx-mist h3 { font-size: 15.5px; }
  .article-layout .content-block .vx-mist p { margin-top: 6px; font-size: 14px; }
  .content-block .vx-small { font-size: 13.5px; }
  .content-block .vx-disclaimer { font-size: 12.5px; }
}
@media print { .vx-form, .vx-card, .vx-tile { box-shadow: none; break-inside: avoid; } }

@media print {
  .article-layout .rv { opacity: 1 !important; transform: none !important; }
  .article-rail, .article-progress { display: none !important; }
  .article-layout .toc { display: block !important; }
}