/* ============================================================
   Core-Pilot Knowledge / Graph（product.css と併用）
   Knowledge のヒーローは「文章＋図」の2段組（1024px未満は積み上げ）
   ============================================================ */
.cp-hero { background: var(--paper); padding: 40px 0 44px; border-bottom: 1px solid var(--paper-line); }
.cp-hero__grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.cp-hero__title { margin: 0 0 16px; font-family: var(--serif); font-weight: 700; font-size: clamp(28px, 7vw, 40px); line-height: 1.4; letter-spacing: .02em; color: var(--ink); }
.cp-hero__lead { margin: 0 0 26px; max-width: 34em; font-size: 15.5px; line-height: 1.95; color: var(--steel); }
.cp-hero__fig { margin: 0; background: #fff; border: 1px solid var(--paper-line); border-radius: 6px; padding: 8px; }
.cp-hero__fig img { width: 100%; height: auto; display: block; }

.cp-back { margin: 22px 0 0; font-size: 14px; }

@media screen and (min-width: 1024px) {
  .cp-hero { padding: 72px 0 76px; }
  .cp-hero__grid { grid-template-columns: 1fr 1.1fr; gap: 56px; }
}

/* product.css のPC用の色（白文字前提）をこのヒーローでは打ち消す */
.cp-hero .pd-eyebrow { color: var(--steel); font-weight: 700; }

/* 項目名が長いので、760px未満は「見出し→本文」に積む（product.css の2列は461px〜） */
@media screen and (max-width: 760px) {
  .pd-rows--stack .pd-row { grid-template-columns: 1fr; gap: 4px; }
}