/* Codeator — HR & payroll solution page. Page-specific styles only; shared components live in site.css.
   Logical properties throughout, so the English twin can reuse this file. */
.sol-hr-caps { margin-top: 0; }
.sol-hr-iraq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(32px, 5vw, 80px); margin-top: 0; }
.sol-hr-iraq b { display: block; margin-bottom: 2px; }
@media (max-width: 920px) { .sol-hr-iraq { grid-template-columns: minmax(0, 1fr); gap: 22px; } }

/* shared look of this page's two illustrations */
.sol-hr-art { display: block; width: 100%; height: auto; overflow: visible; }
.sol-hr-art polygon { stroke: rgba(14,27,82,.2); stroke-width: 1; stroke-linejoin: round; }
.sol-hr-art .f-top { fill: #fbfcff; }
.sol-hr-art .f-left { fill: #d3dbf0; }
.sol-hr-art .f-right { fill: #a9b7df; }
.sol-hr-art text { font-family: var(--f-ui); text-anchor: middle; }
.sol-hr-explain { max-width: 560px; margin-inline: auto; }

/* ---------- hero: three companies, their people, and one employee moving between them ---------- */
.sol-hr-hero polygon { stroke: rgba(9,18,58,.35); }
.sol-hr-orbit { fill: none; stroke: rgba(201,211,242,.32); stroke-width: 1.4; stroke-dasharray: 2 9; animation: flow-orbit 9s linear infinite; }
.sol-hr-link { fill: none; stroke: rgba(201,211,242,.28); stroke-width: 1.2; stroke-dasharray: 3 5; }
.sol-hr-path { fill: none; stroke: rgba(247,226,173,.75); stroke-width: 1.6; stroke-dasharray: 3 6; animation: sol-hr-dash 1.6s linear infinite; }
.sol-hr-lbl { font-size: 16px; font-weight: 500; fill: #dfe5f8; }
.sol-hr-co { transition: transform .45s var(--ease); }
.sol-hr-hero > g:hover .sol-hr-co { transform: translateY(-6px); }
.sol-hr-emp .f-top { fill: #b9c6f5; }
.sol-hr-emp .f-left { fill: #4a6cf0; }
.sol-hr-emp .f-right { fill: #2a44b8; }
.sol-hr-emp.gold .f-top { fill: var(--gold-soft); }
.sol-hr-emp.gold .f-left { fill: var(--gold); }
.sol-hr-emp.gold .f-right { fill: var(--gold-deep); }
.sol-hr-emp { animation: sol-hr-hop 3.2s ease-in-out infinite; animation-delay: calc(var(--n) * -.9s); }
.sol-hr-emp.still { animation: none; }
@keyframes sol-hr-hop { 0%, 70%, 100% { transform: none; } 82% { transform: translateY(-7px); } }
@keyframes sol-hr-dash { from { stroke-dashoffset: 18; } to { stroke-dashoffset: 0; } }

/* ---------- explainer: attendance → payslips → each company's books → one group view ---------- */
.sol-hr-flow path { stroke: rgba(255,255,255,.92); stroke-width: 2; stroke-dasharray: 3 16; animation: flow 2.4s linear infinite; }
.sol-hr-co-t { font-size: 17px; font-weight: 700; fill: var(--lapis-900); }
.sol-hr-stn rect { fill: #fff; stroke: var(--lapis-700); stroke-width: 2; }
.sol-hr-stn path, .sol-hr-stn line { fill: none; stroke: var(--lapis-500); stroke-width: 2.4; stroke-linecap: round; }
.sol-hr-stn .thin { stroke-width: 1.8; stroke: var(--lapis-300); }
.sol-hr-stn .net { stroke: var(--gold-deep); stroke-width: 3.4; }
.sol-hr-stn rect.gold { fill: var(--gold); stroke: none; }
.sol-hr-stn { transition: transform .4s var(--ease); transform-box: fill-box; transform-origin: center; }
.sol-hr-explain > g:hover .sol-hr-stn { transform: scale(1.05); }
.sol-hr-group.in-view .sol-hr-slip line { stroke-dasharray: 34; animation: sol-hr-write .7s var(--ease) both; animation-delay: calc(var(--k) * 140ms + 300ms); }
.sol-hr-group.in-view .sol-hr-tally path { stroke-dasharray: 44; animation: sol-hr-write .5s var(--ease) both; }
@keyframes sol-hr-write { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }
.sol-hr-mouth circle { fill: var(--gold); stroke: var(--lapis-900); stroke-width: 3; }
.sol-hr-mouth .halo { fill: none; stroke: var(--gold); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: halo 2.8s ease-out infinite; }
.sol-hr-guide { fill: none; stroke: var(--lapis-300); stroke-width: 1.4; stroke-dasharray: 2 5; }
.sol-hr-gd { fill: var(--gold); }
.sol-hr-row { font-size: 18px; font-weight: 700; fill: var(--lapis-900); }
.sol-hr-row.sub { font-size: 14.5px; font-weight: 400; fill: var(--ink-2); }

/* the drawing shrinks with the phone: keep its lettering readable */
@media (max-width: 600px) {
  .sol-hr-row { font-size: 21px; }
  .sol-hr-row.sub { font-size: 17.5px; }
  .sol-hr-co-t { font-size: 20px; }
  .sol-hr-lbl { font-size: 19px; }
}