/* =====================================================================
   Solution page — Accounting & finance   (prefix .sol-acc-)
   /ar/solutions/accounting/ and /solutions/accounting/
   ===================================================================== */

/* ---------- hero art: one ledger sheet per company, the front one balancing ---------- */
.sol-acc-hero { filter: drop-shadow(0 26px 30px rgba(0,0,0,.35)); }
.sol-acc-sheet { transform-box: view-box; transform-origin: 240px 250px; }
.sol-acc-sheet.back { transform: rotate(-9deg); animation: sol-acc-fan-b 1.3s var(--ease) both; }
.sol-acc-sheet.mid { transform: rotate(6deg); animation: sol-acc-fan-m 1.3s var(--ease) both; }
.sol-acc-sheet .pg { fill: #fbfcff; stroke: rgba(14,27,82,.18); stroke-width: 1; }
.sol-acc-sheet.back .pg { fill: #b9c5e6; }
.sol-acc-sheet.mid .pg { fill: #dde4f8; }
.sol-acc-sheet .tab.t1 { fill: #a7c6b1; }
.sol-acc-sheet .tab.t2 { fill: #dfc6bd; }
.sol-acc-sheet .tab.t3 { fill: var(--gold); }
.sol-acc-sheet .hd { fill: var(--lapis-100); }
.sol-acc-sheet .hd-pill { fill: var(--lapis-300); }
.sol-acc-sheet .rule { stroke: var(--line); stroke-width: 1; }
.sol-acc-sheet .spine { stroke: var(--lapis-300); stroke-width: 1.6; }
.sol-acc-sheet .total { stroke: var(--lapis-900); stroke-width: 1.5; }
.sol-acc-e, .sol-acc-t { transform-box: fill-box; animation: sol-acc-grow .7s var(--ease) both; }
.sol-acc-e { animation-delay: calc(.7s + var(--n) * .22s); }
.sol-acc-e.r, .sol-acc-t.r { fill: var(--lapis-500); transform-origin: left center; }
.sol-acc-e.l, .sol-acc-t.l { fill: var(--lapis-300); transform-origin: right center; }
.sol-acc-t.r, .sol-acc-t.l { fill: var(--gold); animation-delay: 2.15s; }
.sol-acc-seal { fill: var(--gold); stroke: var(--lapis-900); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: sol-acc-seal .7s var(--ease) 2.7s both; }
.sol-acc-halo { fill: none; stroke: var(--gold); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; animation: sol-acc-halo 2.8s ease-out 3.2s infinite; }
.sol-acc-coins circle { fill: none; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100 0; animation: draw-o 1.8s var(--ease) .2s both; }
.sol-acc-coins .iqd { animation-delay: .45s; }
.sol-acc-coins .usd { stroke: var(--gold); }
.sol-acc-coins .iqd { stroke: var(--lapis-400); }

@keyframes sol-acc-fan-b { from { transform: rotate(0deg); } to { transform: rotate(-9deg); } }
@keyframes sol-acc-fan-m { from { transform: rotate(0deg); } to { transform: rotate(6deg); } }
@keyframes sol-acc-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sol-acc-seal { 0% { transform: rotate(45deg) scale(0); } 60% { transform: rotate(45deg) scale(1.25); } 100% { transform: rotate(45deg) scale(1); } }
@keyframes sol-acc-halo { 0% { transform: rotate(45deg) scale(1); opacity: .9; } 100% { transform: rotate(45deg) scale(2.3); opacity: 0; } }

/* ---------- explainer: inter-company entry → matching entry → consolidated report ---------- */
.sol-acc-x { display: block; width: 100%; max-width: 540px; height: auto; margin-inline: auto; overflow: visible; --sx: -1; }
[dir="ltr"] .sol-acc-x { --sx: 1; }
.sol-acc-x text { font-family: var(--f-ui); direction: rtl; }
[dir="ltr"] .sol-acc-x text { direction: ltr; }
.sol-acc-x .pg { fill: #fff; stroke: var(--line); stroke-width: 1.2; filter: drop-shadow(0 8px 10px rgba(14,27,82,.1)); }
.sol-acc-x .hd { fill: var(--lapis-800); }
.sol-acc-x .hd.gold { fill: var(--gold); }
.sol-acc-x .hd-t { font-size: 15px; font-weight: 700; fill: #fff; text-anchor: middle; }
.sol-acc-x .hd-t.dark { fill: var(--lapis-950); }
.sol-acc-x .bar { fill: var(--stone-2); }
.sol-acc-x .bar.ext { fill: var(--lapis-500); }
.sol-acc-x .bar.ic { fill: var(--clay-light); }
.sol-acc-x .rule { stroke: var(--line); stroke-width: 1; }
.sol-acc-x .row { fill: var(--lapis-100); stroke: var(--lapis-300); stroke-width: 1.2; }
.sol-acc-x .row-a { animation: sol-acc-row-a 8s ease infinite; }
.sol-acc-x .row-b { animation: sol-acc-row-b 8s ease infinite; }
.sol-acc-x .row-t { font-size: 14px; font-weight: 500; fill: var(--lapis-900); text-anchor: middle; }
.sol-acc-x .lbl { font-size: 13.5px; fill: var(--ink-2); text-anchor: start; }
.sol-acc-x-link line { stroke: var(--gold-deep); stroke-width: 2; stroke-dasharray: 4 5; animation: flow 1.4s linear infinite; }
.sol-acc-x-link text { font-size: 13px; font-weight: 500; fill: var(--gold-deep); text-anchor: middle; }
.sol-acc-x-tok { fill: var(--gold); stroke: var(--lapis-900); stroke-width: 1.6; animation: sol-acc-tok 8s var(--ease) infinite; }
.sol-acc-x-river path { fill: none; stroke: url(#sol-acc-rv); stroke-width: 7; stroke-linecap: round; }
.sol-acc-x-flow path { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 3 14; animation: sol-acc-down 2.4s linear infinite; }
.sol-acc-x-drop rect { fill: var(--gold); stroke: var(--lapis-900); stroke-width: 1.4; }
.sol-acc-x-strike { stroke: var(--clay-deep); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; animation: sol-acc-strike 8s ease infinite; }
.sol-acc-x-group .hd.gold { animation: sol-acc-report 8s ease infinite; }

@keyframes sol-acc-row-a {
  0%, 16% { fill: var(--gold-soft); stroke: var(--gold); }
  24%, 100% { fill: var(--lapis-100); stroke: var(--lapis-300); }
}
@keyframes sol-acc-row-b {
  0%, 26% { fill: #fff; stroke: var(--line); }
  32%, 46% { fill: var(--gold-soft); stroke: var(--gold); }
  54%, 100% { fill: var(--lapis-100); stroke: var(--lapis-300); }
}
@keyframes sol-acc-tok {
  0%, 13% { transform: translateX(0) rotate(45deg); }
  14% { transform: translateX(calc(var(--sx) * -30px)) rotate(45deg); }
  30% { transform: translateX(calc(var(--sx) * 30px)) rotate(45deg); }
  36%, 100% { transform: translateX(0) rotate(45deg); }
}
@keyframes sol-acc-down { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -34; } }
@keyframes sol-acc-strike { 0%, 68% { stroke-dashoffset: 100; } 82%, 100% { stroke-dashoffset: 0; } }
@keyframes sol-acc-report { 0%, 66% { fill: var(--gold); } 72% { fill: #f4cd6c; } 84%, 100% { fill: var(--gold); } }

@media (max-width: 920px) {
  .sol-acc-x { max-width: 460px; }
}