/* invoice-system page */
.iv-cmp{border-radius:24px;overflow:hidden}
.iv-r{display:grid;grid-template-columns:260px repeat(3,1fr);border-bottom:1px solid var(--line)}
.iv-r:last-child{border-bottom:0}
.iv-th span{padding:22px 24px;font:700 12px "JetBrains Mono",monospace;letter-spacing:1.2px;color:var(--mut)}
.iv-th .us{background:var(--p);color:#fff}
.iv-r .q{display:flex;align-items:center;gap:12px;padding:24px;font-size:16px;font-weight:700}
.iv-r .q .ib{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:11px;background:#8B5CF61F;color:var(--p)}
.iv-r .q .ib svg{width:21px;height:21px}
.iv-r .o{display:flex;align-items:center;gap:10px;padding:24px;font-size:15px;color:var(--mut)}
.iv-r .o svg{width:18px;height:18px;color:#A5A3C2}
.iv-r .o.us{background:#8B5CF614;color:var(--ink);font-weight:700}
.iv-r .o.us svg{color:var(--ok)}

.iv-feat .wrap{gap:80px}
.iv-rev{grid-template-columns:1fr 720px}
.iv-bot{object-position:bottom!important}

@media (max-width:1024px){
  .iv-rev{grid-template-columns:1fr}
  .iv-rev .dwin{order:-1}
  .iv-feat .wrap{gap:64px}
  .iv-r{grid-template-columns:200px repeat(3,1fr)}
}
@media (max-width:760px){
  .iv-th{display:none}
  .iv-r{grid-template-columns:1fr;padding:8px 0}
  .iv-r .q{padding:16px 16px 8px}
  .iv-r .o{padding:8px 16px;display:grid;grid-template-columns:18px 1fr;row-gap:2px}
  .iv-r .o::before{content:attr(data-l);grid-column:2;order:-1;font:700 10px "JetBrains Mono",monospace;letter-spacing:1px;color:#A5A3C2}
  .iv-r .o svg{grid-row:2}
  .iv-r .o.us{margin:4px 12px 8px;border-radius:12px;padding:12px}
  .iv-r .o.us::before{color:var(--p)}
}

.phero .sub,.dtx p,.wa-tile p{text-wrap:balance}
/* phones: compact 3-column comparison (same as the shop page): headers once, row title on its own line */
@media (max-width:640px){
  .iv-r{grid-template-columns:repeat(3,1fr);padding:0}
  .iv-th{display:grid}.iv-th>:first-child{display:none}
  .iv-th span{padding:12px 8px;font-size:9.5px;letter-spacing:.6px;line-height:1.3}
  .iv-r .q{grid-column:1/-1;padding:12px 12px 6px;font-size:14px}
  .iv-r .q .ib{width:28px;height:28px;border-radius:9px}.iv-r .q .ib svg{width:16px;height:16px}
  .iv-r .o,.iv-r .o.us{display:block;margin:0;border-radius:0;padding:4px 8px 12px;font-size:12px;line-height:1.35}
  .iv-r .o::before{content:none}.iv-r .o svg{display:none}
}