/* home (/) only (B24 U2): the facts row under the hero, the launch video frame, links inside the C6 blocks, the two
   integration tiles and the company block. Loads after lp.css and pages.css. BRAND tokens only, no shadows or gradients. */

/* facts row (small pills, facts only) */
.hm-facts { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 28px; }
.hm-facts li {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 14px;
  border: 1px solid var(--mk-line); border-radius: 999px; background: var(--kz-paper);
  color: var(--kz-plum); font-size: 13px; font-weight: 700; line-height: 18px;
}
.hm-facts li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--kz-rose); }

/* launch video: 16:9 frame, poster until play; full width at 390 */
.hm-video { padding: clamp(8px, 2vw, 24px) 0 clamp(48px, 6vw, 88px); background: var(--kz-milk); }
.hm-video .sec-head { margin-bottom: clamp(20px, 3vw, 32px); }
.hm-vid { max-width: 960px; margin: 0 auto; }
.hm-vid video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 24px; background: var(--kz-plum); }
.hm-vid figcaption { margin-top: 12px; text-align: center; color: var(--kz-mauve); font-size: 13px; }
.hm-vid video a { color: var(--kz-paper); }

/* C6 blocks: the link under the text (square picture panels: lp.css) */
.val .arrow { margin-top: 10px; }

/* share bento on a Milk sheet: the Milk tile becomes Paper so it stays visible */
.sheet.milk .tile.p-milk { background: var(--kz-paper); }

/* two integration tiles */
.cards4.hm-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; margin: 0 auto; }

/* company block: text | picture, then the small cards */
.hm-biz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-bottom: clamp(28px, 3.5vw, 48px); }
.hm-biz h2 { font-size: clamp(26px, 3.2vw, 44px); }
.hm-biz-txt > p:not(.kicker) { margin-top: 14px; color: var(--kz-mauve); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.8; }
.hm-biz-txt .arrow { margin-top: 10px; }
.hm-biz-img, .hm-biz-img img { display: block; width: 100%; height: auto; border-radius: 24px; }

.hm-more { margin-top: 20px; text-align: center; }

@media (max-width: 960px) {
  .hm-biz { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cards4.hm-two { grid-template-columns: minmax(0, 1fr); }
  .hm-vid video { border-radius: 16px; }
}