/* ── Product page only ────────────────────────────────────────────────
   Loaded exclusively on /product/ (via extra_head in render_product), AFTER
   site.css, so these rules override the shared defaults on this page alone.
   Everything product-specific lives here, which keeps site.css identical to
   the rest of the site. */

/* Product hero headline matches the home hero headline exactly. */
#product-hero h1 {
  font-size: clamp(44px, 4.8vw, 66px); line-height: 1.0;
  font-weight: 800; letter-spacing: -0.02em;
}

/* Product-wide typography (scoped to this page by product.css loading). */
.kz-h2 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.kz-h2-lg { font-size: 40px; }
.kz-lede { font-size: 17px; line-height: 1.6; font-weight: 500; }
/* Yellow highlight removed on this page — highlighted words read as plain text. */
.kz-mark { background: transparent; padding: 0; display: inline; }
.kz-mark-tight { padding: 0; }
@media (max-width: 1100px) { .kz-h2-lg { font-size: 32px; } }

/* Eyebrows are shown here only on the four pillar sections. */
.kz-eyebrow { display: none; }
#ai-assistant .kz-eyebrow,
#care .kz-eyebrow,
#health-model .kz-eyebrow,
#client-360 .kz-eyebrow { display: block; }
/* Section labels are speech bubbles matching the hero's four bubbles (same
   colour, shape and title). product.js flies each one in from above as its
   section scrolls into view, as if it travelled down from the hero. */
#ai-assistant { --badge: #2F5FE0; }
#care { --badge: #1FA591; }
#health-model { --badge: #7C5CFC; }
#client-360 { --badge: #E8432B; }
#ai-assistant .kz-eyebrow,
#care .kz-eyebrow,
#health-model .kz-eyebrow,
#client-360 .kz-eyebrow {
  width: fit-content; padding: 11px 19px 12px; border-radius: 18px 18px 18px 6px;
  background: var(--badge); color: #FFFFFF;
  font-family: var(--kz-sans); font-size: 17px; font-weight: 700; letter-spacing: -0.015em; text-transform: none;
  box-shadow: 0 10px 22px -6px rgba(0,0,0,.3);
  will-change: transform, opacity;
}

/* Heavier closing CTA headline. */
.kz-cta-band-md .head { font-weight: 500; }

/* ── AI Helpers tabs — black section ──────────────────────────── */
.kz-helpers { padding: 56px var(--kz-gutter) 56px; background: #000000; color: #FFFBF0; }
.kz-helpers { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.kz-helpers .kz-h2 { color: #FFFBF0; }
.kz-helpers .kz-lede { color: rgba(255,251,240,.82); font-weight: 500; }
.kz-helpers-tabs {
  padding: 6px 0 0; display: flex; gap: 0;
  border-bottom: 1px solid rgba(255,251,240,.18); margin-top: 16px;
  flex-wrap: wrap;
}
.kz-helpers-tab.is-active { border-bottom-color: #FFFBF0; }
.kz-helpers-tab .label { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.kz-helpers-detail {
  padding: 26px 0 0; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: flex-start;
}
.kz-helpers-detail .name {
  font-family: var(--kz-sans); font-size: 48px; font-weight: 600;
  letter-spacing: -0.035em; line-height: 1; margin-top: 16px; color: #FFFBF0;
}
.kz-helpers-detail .blurb { font-size: 18px; line-height: 1.55; color: rgba(255,251,240,.82); margin-top: 18px; max-width: 560px; font-weight: 500; }
/* White "How it behaves" card, lifted off the black section by a hard 3D
   offset shadow in the active helper's theme colour (set via --theme inline). */
.kz-helpers-detail .behaviour {
  margin-top: 26px; padding: 20px 22px; max-width: 560px;
  background: #FFFFFF; color: var(--kz-ink);
  border: 2px solid var(--theme, var(--kz-yellow)); border-radius: 14px;
  box-shadow: 8px 8px 0 var(--theme, var(--kz-yellow));
}
.kz-helpers-detail .behaviour-label {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--kz-ink); margin-bottom: 10px;
}
.kz-helpers-detail .behaviour .body { font-size: 15px; line-height: 1.55; color: var(--kz-ink); font-weight: 500; }
/* Stack text over video below 1024px. Needed here because the two-column rule
   above (this file loads after site.css) overrides site.css's own stacking. */
@media (max-width: 1024px) {
  .kz-helpers-detail { grid-template-columns: 1fr; gap: 28px; }
  .kz-helpers-detail .blurb, .kz-helpers-detail .behaviour { max-width: none; }
}
@media (max-width: 560px) {
  .kz-helpers-detail .name { font-size: 36px; }
  .kz-helpers-detail .blurb { font-size: 16px; }
  /* The recordings are desktop-sized with black margins: run edge to edge and
     zoom slightly to trim the margins so the card reads larger on phones. */
  .kz-helper-video { margin-inline: calc(-1 * var(--kz-gutter)); border-radius: 0; box-shadow: none; }
  .kz-helper-video video { transform: scale(1.06); }
}
/* Looping video that replaces the signal-feed graphic in each helper panel. */
.kz-helper-video {
  border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 1px 2px rgba(40,30,15,.05), 0 26px 50px -30px rgba(40,30,15,.35);
}
.kz-helper-video video { display: block; width: 100%; height: auto; }

/* ── CARE cards ───────────────────────────────────────────────── */
.kz-care-card .kz-care-video {
  margin-top: 16px; border-radius: 10px; overflow: hidden; background: #000;
}
.kz-care-card .kz-care-video video { display: block; width: 100%; height: auto; }
/* Four cards in one row; score pinned top-right in the dimension's colour. */
.kz-care-grid-lg { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kz-care-grid-lg .kz-care-card {
  position: relative; padding: 20px; border-radius: 16px;
  border: 3px solid var(--kz-ink); background: #FFFBF3;
  box-shadow: 8px 8px 0 var(--kz-ink);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kz-care-grid-lg .kz-care-card { cursor: pointer; }
.kz-care-grid-lg .kz-care-card:hover,
.kz-care-grid-lg .kz-care-card.is-playing {
  transform: translate(-3px, -3px);
  border-color: var(--theme, var(--kz-ink));
  box-shadow: 12px 12px 0 var(--theme, var(--kz-ink));
}
.kz-care-grid-lg .kz-care-card .glyph { width: 40px; height: 40px; font-size: 20px; border-radius: 9px; }
.kz-care-grid-lg .kz-care-card .label { font-size: 17px; font-weight: 700; color: #0A0A0A; letter-spacing: -0.015em; }
.kz-care-grid-lg .kz-care-card .desc { font-size: 15px; font-weight: 600; color: #171511; line-height: 1.5; margin-top: 10px; }
.kz-care-score {
  position: absolute; top: 16px; right: 18px;
  font-size: 28px; font-weight: 800; letter-spacing: -0.03em;
  color: var(--theme, var(--kz-ink)); line-height: 1;
}
.kz-care-grid-lg .kz-care-video {
  margin-top: 16px; aspect-ratio: 1300 / 1760;
  overflow: hidden; border-radius: 10px; background: #FFFBF3;
}
.kz-care-grid-lg .kz-care-video video {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
@media (max-width: 900px) { .kz-care-grid-lg { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .kz-care-grid-lg { grid-template-columns: 1fr; } }

/* ── Product pillars (two-column sections with looping media) ──── */
.kz-prod-pillar {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
#ai-assistant { background: #FFF3C4; }
#ai-assistant .kz-prod-media { padding: 3px; }
#health-model { background: var(--kz-yellow); }
.kz-prod-pillar.is-reverse .kz-prod-pillar-text { order: 2; }
.kz-prod-pillar-text .kz-h2 { margin-top: 14px; }
.kz-prod-pillar-text .kz-lede { margin-top: 20px; max-width: 540px; }
.kz-prod-scene { position: relative; }
.kz-client-news {
  background: #FFF3C4;
  display: grid; grid-template-columns: 1.6fr 1fr; align-items: stretch;
  gap: 48px; padding: 0 var(--kz-gutter);
}
.kz-client-news-media {
  display: flex; align-items: center; justify-content: center;
  background: #FFF3C4; overflow: hidden;
}
.kz-client-news-media video { display: block; width: 100%; height: 100%; object-fit: contain; }
.kz-client-news-text { padding: 56px 0; display: flex; flex-direction: column; justify-content: center; }
/* Phone/tablet: eyebrow and heading above the video, then the rest of the
   copy. The text block is flattened (display: contents) so its children can be
   reordered around the video. */
@media (max-width: 860px) {
  .kz-client-news { display: flex; flex-direction: column; gap: 0; padding: 0; }
  .kz-client-news-text { display: contents; }
  #client-360 .kz-client-news-text > * { padding-inline: var(--kz-gutter); }
  #client-360 .kz-client-news-text > .kz-eyebrow { order: 1; padding: 9px 16px 10px; margin: 40px var(--kz-gutter) 0; align-self: flex-start; }
  .kz-client-news-text > .kz-h2 { order: 2; margin-bottom: 8px; }
  .kz-client-news-media { order: 3; }
  .kz-client-news-text > .kz-lede { order: 4; margin-top: 24px !important; }
  .kz-client-news-text > .kz-prod-drops { order: 5; padding-bottom: 44px; }
}


/* Hero pillar nav: a line of speech bubbles, spread evenly, gently floating. */
.kz-pillar-bubbles {
  position: relative; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px; margin-top: 44px;
}
.kz-pillar-bubble {
  position: relative; z-index: 1;
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px;
  max-width: 290px; padding: 18px 24px; border-radius: 20px 20px 20px 6px;
  color: #FFFBF0; text-decoration: none; letter-spacing: -0.015em;
  transition: transform .18s ease;
}
.kz-pillar-bubble::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--bub, var(--kz-ink));
  box-shadow: 0 10px 22px -6px rgba(0,0,0,.28);
  animation: bubbleBob 4s ease-in-out infinite;
}
.kz-pillar-bubble:nth-child(2)::before { animation-delay: .8s; }
.kz-pillar-bubble:nth-child(3)::before { animation-delay: 1.6s; }
.kz-pillar-bubble:nth-child(4)::before { animation-delay: 2.4s; }
.kz-pillar-bubble .title { font-size: 19px; font-weight: 700; }
.kz-pillar-bubble .bdesc { font-size: 15px; font-weight: 600; line-height: 1.45; color: #FFFFFF; }
.kz-pillar-bubble:hover { transform: scale(1.06); }
.kz-pillar-bubble:hover::before { box-shadow: 0 18px 34px -8px rgba(0,0,0,.34); }
@keyframes bubbleBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.kz-reveal-row .kz-pillar-bubble { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.kz-reveal-row.in-view .kz-pillar-bubble { opacity: 1; transform: translateY(0); }
.kz-reveal-row.in-view .kz-pillar-bubble:nth-child(2) { transition-delay: .28s; }
.kz-reveal-row.in-view .kz-pillar-bubble:nth-child(3) { transition-delay: .56s; }
.kz-reveal-row.in-view .kz-pillar-bubble:nth-child(4) { transition-delay: .84s; }
.kz-reveal-row .kz-pillar-bubble::before { animation: none; }
.kz-reveal-row.in-view .kz-pillar-bubble::before { animation: bubbleBob 4s ease-in-out infinite; animation-delay: 1s; }
.kz-reveal-row.in-view .kz-pillar-bubble:nth-child(2)::before { animation-delay: 1.4s; }
.kz-reveal-row.in-view .kz-pillar-bubble:nth-child(3)::before { animation-delay: 1.8s; }
.kz-reveal-row.in-view .kz-pillar-bubble:nth-child(4)::before { animation-delay: 2.2s; }
@media (prefers-reduced-motion: reduce) {
  .kz-pillar-bubble::before { animation: none; }
  .kz-reveal-row .kz-pillar-bubble { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 760px) {
  .kz-pillar-bubbles { justify-content: center; }
  .kz-pillar-wave { display: none; }
}
/* Gold Kaizan card: loop in a gold frame lifted by a hard black offset shadow. */
.kz-prod-media {
  position: relative;
  box-sizing: border-box;
  aspect-ratio: 1510 / 842;
  background: #0A0A0A;
  padding: 3px;
  border-radius: 11px;
  box-shadow: 14px 14px 0 var(--kz-yellow);
}
.kz-prod-media img, .kz-prod-media video {
  display: block; width: 100%; height: 100%;
  object-fit: contain; border-radius: 9px; background: var(--kz-paper);
}
@media (max-width: 900px) {
  .kz-prod-pillar { grid-template-columns: 1fr; gap: 28px; }
  .kz-prod-pillar.is-reverse .kz-prod-pillar-text { order: 0; }
}

/* ── "See how we can help you" — role selector (black band) ────── */
.kz-roles { background: #0A0A0A; color: #FFFBF0; }
.kz-roles .kz-prod-media {
  padding: 0;
  box-shadow: 0 0 0 4px var(--kz-yellow), 0 7px 16px -3px rgba(255,185,0,.6);
}
.kz-roles .kz-h2 { color: #FFFBF0; }
.kz-roles .kz-lede { color: rgba(255,251,240,.78); font-weight: 500; }
.kz-roles-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 34px 0 40px; }
.kz-roles-tab {
  padding: 12px 20px; border-radius: 999px;
  border: 2px solid rgba(255,251,240,.45); background: transparent;
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: #FFFBF0;
  cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .15s;
}
.kz-roles-tab:hover { border-color: #FFFBF0; transform: translateY(-1px); }
.kz-roles-tab.is-active { background: var(--kz-yellow); color: #0A0A0A; border-color: var(--kz-yellow); }
.kz-roles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.kz-role-card { display: flex; flex-direction: column; gap: 26px; margin: 0; }
.kz-role-card-title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: #FFFBF0; }
.kz-role-card-desc { font-size: 16px; color: rgba(255,251,240,.72); line-height: 1.55; margin-top: 10px; font-weight: 500; }
.kz-roles-panel { display: none; }
.kz-roles-panel.is-active { display: block; }
.kz-roles-panel.is-active .kz-role-card {
  animation: roleReveal .55s cubic-bezier(.22,.61,.36,1) both;
}
.kz-roles-panel.is-active .kz-role-card:nth-child(2) { animation-delay: .09s; }
.kz-roles-panel.is-active .kz-role-card:nth-child(3) { animation-delay: .18s; }
@keyframes roleReveal {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 860px) { .kz-roles-grid { grid-template-columns: 1fr; gap: 22px; } }
@media (prefers-reduced-motion: reduce) {
  .kz-roles-panel.is-active .kz-role-card { animation: none; }
}

/* ── Built-for-enterprise trust cards ─────────────────────────── */
.kz-trust-cards { gap: 16px; }
.kz-trust-card {
  background: #FFFFFF; border: 1px solid var(--kz-line);
  border-radius: 16px; padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 1px 2px rgba(40,30,15,.04), 0 18px 36px -28px rgba(40,30,15,.3);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kz-trust-card:hover {
  transform: translateY(-5px);
  border-color: var(--kz-yellow);
  /* 1px border + 2px ring = a 3px yellow outline (matches the integration
     cards), without shifting the content. */
  box-shadow: 0 0 0 2px var(--kz-yellow), 0 26px 48px -26px rgba(40,30,15,.42);
}
.kz-trust-ico {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--kz-yellow);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -6px rgba(255,185,0,.6);
}
.kz-trust-card h4 { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.kz-trust-card p { font-size: 13.5px; color: var(--kz-mute); line-height: 1.55; font-weight: 500; }

/* ── AI Assistant features: 2x2 dropdowns (<details name>) ─────────────
   Titles stay visible; one description open at a time, so the section reads
   as four clear points instead of a wall of copy. */
/* Two per row; each card sizes to its own content when opened. */
.kz-prod-drops {
  margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  align-items: start; max-width: 560px;
}
.kz-prod-drop {
  background: #FFFFFF; border: 1px solid rgba(10,10,10,.1); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(40,30,15,.04);
  transition: border-color .2s ease, box-shadow .2s ease;
  interpolate-size: allow-keywords;
}
.kz-prod-drop:hover { border-color: var(--kz-yellow); box-shadow: 0 0 0 2px var(--kz-yellow); }
.kz-prod-drop[open] { border-color: var(--kz-yellow); box-shadow: 0 0 0 2px var(--kz-yellow), 0 14px 28px -18px rgba(40,30,15,.35); }
.kz-prod-drop summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 12px 11px 14px;
}
.kz-prod-drop summary::-webkit-details-marker { display: none; }
.kz-prod-drop summary::marker { content: ''; }
.kz-prod-drop summary:focus-visible { outline: 3px solid var(--kz-yellow); outline-offset: 2px; border-radius: 12px; }
.kz-prod-drop .t { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
/* Chevron in a yellow disc; turns black and flips when open. */
.kz-prod-drop .tg {
  position: relative; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--kz-yellow); transition: background .2s ease, transform .25s ease;
}
.kz-prod-drop .tg::before {
  content: ""; position: absolute; left: 50%; top: 42%; width: 5px; height: 5px;
  border-right: 2px solid #0A0A0A; border-bottom: 2px solid #0A0A0A;
  transform: translate(-50%, -50%) rotate(45deg);
}
.kz-prod-drop[open] .tg { background: #0A0A0A; transform: rotate(180deg); }
.kz-prod-drop[open] .tg::before { border-color: var(--kz-yellow); }
.kz-prod-drop p { margin: 0; padding: 0 14px 13px; font-size: 14px; line-height: 1.55; font-weight: 500; color: var(--kz-mute); }
.kz-prod-drop::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .3s ease, content-visibility .3s allow-discrete;
}
.kz-prod-drop[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
  .kz-prod-drop, .kz-prod-drop .tg, .kz-prod-drop::details-content { transition: none; }
}

/* ── Phones: compact the page ─────────────────────────────────────
   Lists of four that stacked one per row now sit two by two, and the
   long card rows (CARE, role cards) become swipeable carousels. */
@media (max-width: 560px) {
  /* Section bubbles a touch smaller on phones */
  #ai-assistant .kz-eyebrow, #care .kz-eyebrow, #health-model .kz-eyebrow, #client-360 .kz-eyebrow {
    font-size: 15px; padding: 9px 16px 10px; border-radius: 16px 16px 16px 5px;
  }
  /* Hero: drop the Book a demo button under the intro (the header has one) */
  .kz-product-hero-row .cta { display: none; }

  /* Hero product bubbles + Ingest/Analyse/Act/Learn: 2×2 */
  .kz-pillar-bubbles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
  .kz-pillar-bubble { max-width: none; padding: 14px; border-radius: 16px 16px 16px 5px; }
  .kz-pillar-bubble .title { font-size: 15px; }
  .kz-pillar-bubble .bdesc { font-size: 12.5px; line-height: 1.4; }

  /* AI Assistant dropdowns: keep 2 per row */
  .kz-prod-drops { gap: 8px; }
  .kz-prod-drop .t { font-size: 13.5px; }

  /* AI Helpers tabs: 2×2 */
  .kz-helpers-tab { flex: 1 1 50%; padding: 12px 6px; gap: 10px; }
  .kz-helpers-tab .glyph { width: 40px; height: 40px; font-size: 20px; }
  .kz-helpers-tab .glyph svg { width: 20px; height: 20px; }
  .kz-helpers-tab .label { font-size: 14px; line-height: 1.25; }

  /* Role tabs: smaller pills that wrap, so every role stays visible */
  .kz-roles-tabs { gap: 8px; margin: 24px 0 28px; }
  .kz-roles-tab { padding: 8px 14px; font-size: 13.5px; }

  /* Swipe-row controls (site.js): black on the yellow CARE section,
     yellow on the dark roles section */
  .kz-swipe-ctrl { color: #0A0A0A; }
  .kz-roles .kz-swipe-ctrl { color: var(--kz-yellow); }

  /* Security cards: 2 per row */
  .kz-trust-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kz-trust-card { padding: 16px; gap: 8px; }
  .kz-trust-card h4 { font-size: 15px; }
  .kz-trust-card p { font-size: 12.5px; }
}