/* B24 marketing pages (/business /nfc /integrations /compare /solutions/* /help /tokushoho): shared parts on top of
   site.css (+ lp.css for .vals / .steps3 / .bento / .px). Load order: app.css, site.css, lp.css (if used), pages.css,
   p-<id>.css (page-only, if any). BRAND tokens only, no shadows, no gradients; motion stops under prefers-reduced-motion
   (site.css). Markup:
   .ph       <section class="ph"><div class="sc ph-in"><div class="ph-txt"><p class="kicker">…</p><h1>…</h1><p class="lead">…</p>
             <div class="ph-acts"><a class="btn primary lg">…</a><a class="arrow">…</a></div><p class="ph-note">…</p></div>
             <div class="ph-vis" aria-hidden="true"><picture>…</picture></div></div></section>   (.ph-vis optional: text-only hero centres)
   .cards4   <ul class="cards4"><li><span class="ic" aria-hidden="true">…svg…</span><h3>…</h3><p>…</p></li> × 4 (or 2 / 3 / 8)</ul>
   .trust-band <div class="trust-band"><h2>…</h2><ul><li>…</li> × 2-4</ul><a class="arrow">…</a></div>   (inside a .sec .sc)
   .dtable   <div class="tscroll" tabindex="0" role="region" aria-label="…"><table class="dtable"><thead>…</thead><tbody>
             <tr><th scope="row">…</th><td>…</td></tr></tbody></table></div>   td.yes / td.no / td.part for ○ / - / △ cells
   .faq-group <h3 class="faq-group">…</h3><div class="faq">…details…</div>   (one per group, inside one section)
   .steps4   <ol class="steps4"><li><span class="num">1</span><h3>…</h3><p>…</p></li> × 4</ol> */

/* ---------- page hero ---------- */
.ph { padding: clamp(32px, 5vw, 80px) 0 calc(clamp(48px, 6vw, 96px) + var(--mk-sheet-r)); background: var(--kz-milk); }
.ph-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ph-in:not(:has(.ph-vis)) { grid-template-columns: minmax(0, 1fr); max-width: 860px; text-align: center; }
.ph h1 { font-size: clamp(32px, 4.2vw, 56px); }
.ph .lead { margin-top: 18px; max-width: 36em; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.75; color: var(--kz-mauve); }
.ph-in:not(:has(.ph-vis)) .lead { margin-left: auto; margin-right: auto; }
.ph-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; }
.ph-in:not(:has(.ph-vis)) .ph-acts { justify-content: center; }
.ph-note { margin-top: 16px; font-size: 14px; color: var(--kz-mauve); }
.ph-vis { width: 100%; max-width: 600px; margin: 0 auto; }
.ph-vis picture, .ph-vis img { display: block; width: 100%; height: auto; border-radius: 32px; }

/* ---------- small cards grid (4 / 2 / 1 columns) ---------- */
.cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.cards4 > li { display: flex; flex-direction: column; padding: clamp(20px, 2vw, 28px); background: var(--kz-paper); border: 1px solid var(--mk-line); border-radius: 20px; }
.sheet:not(.milk) .cards4 > li { background: var(--kz-milk); }
.cards4 .ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; background: var(--kz-blush); color: var(--kz-rose); }
.cards4 .ic svg { width: 24px; height: 24px; }
.cards4 h3 { font-size: clamp(18px, 1.6vw, 21px); }
.cards4 p { margin-top: 8px; color: var(--kz-mauve); font-size: 15px; line-height: 1.75; }
.cards4 .arrow { margin-top: auto; padding-top: 8px; }

/* ---------- safety band (Blush panel with check marks) ---------- */
.trust-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 3.5vw, 48px); background: var(--kz-blush); border-radius: 24px; }
.trust-band h2 { font-size: clamp(22px, 2.4vw, 32px); }
.trust-band ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.trust-band li { position: relative; padding-left: 30px; color: var(--kz-plum); font-size: 15px; font-weight: 600; line-height: 1.6; }
.trust-band li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--kz-rose) 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='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");
}
.trust-band > .arrow, .trust-band > p { grid-column: 1 / -1; }
.trust-band > p { color: var(--kz-mauve); font-size: 14px; }

/* ---------- text table (compare, specs); scrolls inside its frame at narrow widths ---------- */
.tscroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--mk-line); border-radius: 20px; background: var(--kz-paper); }
.tscroll:focus-visible { outline: 2px solid var(--kz-rose); outline-offset: 2px; }
.dtable { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.dtable caption { padding: 14px 18px 0; text-align: left; color: var(--kz-mauve); font-size: 13px; }
.dtable th, .dtable td { padding: 14px 18px; border-bottom: 1px solid var(--mk-line); text-align: left; vertical-align: top; color: var(--kz-plum); }
.dtable thead th { background: var(--kz-blush); font-size: 14px; font-weight: 700; white-space: nowrap; }
.dtable tbody th { font-weight: 700; }
.dtable tbody tr:last-child > * { border-bottom: 0; }
.dtable td.yes { color: var(--kz-rose); font-weight: 700; }
.dtable td.no, .dtable td.part { color: var(--kz-mauve); }
.dtable small, .dtable .note { display: block; margin-top: 2px; color: var(--kz-mauve); font-size: 13px; }

/* ---------- FAQ group heading (several .faq lists in one section) ---------- */
.site .faq-group { margin: clamp(32px, 4vw, 48px) 0 16px; font-size: clamp(18px, 1.6vw, 22px); }
.site .faq-group:first-child, .sec-head + .faq-group { margin-top: 0; }

/* ---------- four steps (numbered cards in a row; 2 x 2 then 1 column) ---------- */
.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.steps4 > li { padding: clamp(20px, 2vw, 28px); background: var(--kz-paper); border: 1px solid var(--mk-line); border-radius: 24px; }
.sheet:not(.milk) .steps4 > li { background: var(--kz-milk); }
.steps4 .num { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 50%; background: var(--kz-rose); color: #fff; font-size: 17px; font-weight: 700; }
.steps4 h3 { font-size: clamp(18px, 1.6vw, 21px); }
.steps4 p { margin-top: 8px; color: var(--kz-mauve); font-size: 15px; line-height: 1.75; }

/* ---------- narrow screens ---------- */
@media (max-width: 960px) {
  .ph-in { grid-template-columns: minmax(0, 1fr); }
  .cards4, .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-band { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cards4, .steps4, .trust-band ul { grid-template-columns: minmax(0, 1fr); }
  .ph-acts .btn { width: 100%; }
  .dtable { font-size: 14px; }
  .dtable th, .dtable td { padding: 12px 14px; }
}