/* /solutions/events, /solutions/sales, /solutions/freelance (B24-PC). Loads after site.css, lp.css, pages.css. Colours: BRAND tokens only. */

/* two boxes: how it is with paper alone / with a digital card */
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); max-width: 1000px; margin: 0 auto; }
.vs-box { padding: clamp(22px, 2.6vw, 36px); background: var(--kz-milk); border: 1px solid var(--mk-line); border-radius: 24px; }
.vs-box.good { background: var(--kz-blush); border-color: var(--kz-pink); }
.vs-box h3 { font-size: clamp(20px, 1.8vw, 24px); }
.vs-box ul { display: grid; gap: 14px; margin-top: 22px; }
.vs-box li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.7; color: var(--kz-plum); }
.vs-box li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--mk-line) no-repeat center / 12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' fill='none' stroke='%237A5A72' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.vs-box.good li::before { background-color: var(--kz-rose);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (max-width: 760px) { .vs { grid-template-columns: 1fr; } }

/* links under a feature block */
.val .arrow { margin-top: 6px; }
.sol-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: clamp(24px, 3vw, 40px); }

/* three short checks under the hero buttons */
.ph-checks { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 28px; }
.ph-checks li { position: relative; padding-left: 28px; font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--kz-plum); }
.ph-checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--kz-rose) no-repeat center / 11px 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }