/* Long-form guides: /pi-planning-guide/ and /scaling-agile-guide/.

   Every class is namespaced kg- and every rule is scoped under .kg-page. The
   WordPress theme owns generic names (.row, .btn, .title, .answer, .active) and
   sets fixed line-heights on body and p, so sizes and line-heights are restated
   here rather than inherited. */

.kg-page {
  --kg-ink: #0f1733;
  --kg-body: #2a2f4d;
  --kg-muted: #5b6280;
  --kg-brand: #4350ac;
  --kg-brand-dark: #090837;
  --kg-accent: #2ce0c6;
  --kg-line: #e3e6f0;
  --kg-soft: #f4f6fc;
  background: #fff;
  color: var(--kg-body);
  font-family: 'Poppins', 'Noto Sans JP', sans-serif;
  font-size: 17px;
  line-height: 1.7;
}
.kg-page *, .kg-page *::before, .kg-page *::after { box-sizing: border-box; }
/* The theme sets Cabin on headings; the guides use the body face throughout. */
.kg-page h1, .kg-page h2, .kg-page h3, .kg-page h4 { font-family: 'Poppins', 'Noto Sans JP', sans-serif; }
/* #content is overflow:hidden in the theme, which makes it the scroll container
   for position:sticky and pins the contents rail to nothing. clip keeps the
   horizontal guard without creating a scroll container. */
#content.site-content.kg-content { overflow: clip !important; padding-left: 0 !important; padding-right: 0 !important; }
/* The side padding the theme puts on #content differs between its page bundles
   and insets the hero; the guide sets its own gutters instead. */
.kg-page p, .kg-page li, .kg-page td, .kg-page th, .kg-page dd, .kg-page dt {
  font-size: 17px;
  line-height: 1.7;
  color: var(--kg-body);
}
.kg-page p { margin: 0 0 18px; }
.kg-page a { color: var(--kg-brand); text-decoration: underline; text-underline-offset: 2px; }
.kg-page a:hover { color: var(--kg-brand-dark); }
.kg-page strong { color: var(--kg-ink); font-weight: 600; }
.kg-page img { max-width: 100%; height: auto; }

/* ---- Hero ---- */
.kg-page .kg-hero {
  background: linear-gradient(106deg, #39338f 0.57%, #090837 50.29%, #090837 100%);
  padding: 56px 24px 64px;
}
.kg-page .kg-hero-inner { max-width: 1180px; margin: 0 auto; }
.kg-page .kg-crumbs { font-size: 13.5px; line-height: 1.5; color: #b9bfe6; margin: 0 0 22px; }
.kg-page .kg-crumbs a { color: #b9bfe6; text-decoration: none; }
.kg-page .kg-crumbs a:hover { color: #fff; text-decoration: underline; }
.kg-page .kg-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 20px;
  max-width: 900px;
}
.kg-page .kg-hero .kg-lede {
  font-size: 19px;
  line-height: 1.6;
  color: #dfe3fa;
  max-width: 820px;
  margin: 0 0 22px;
}
.kg-page .kg-hero .kg-lede strong { color: #fff; }
.kg-page .kg-byline { font-size: 14px; line-height: 1.5; color: #b9bfe6; margin: 0 0 28px; }
.kg-page .kg-byline a { color: #dfe3fa; }
.kg-page .kg-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.kg-page .kg-cta,
.kg-page .kg-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 600;
  text-decoration: none;
  padding: 15px 26px;
  border-radius: 10px;
}
.kg-page .kg-cta { background: var(--kg-accent); color: #06121f; box-shadow: 0 8px 26px rgba(44, 224, 198, .3); }
.kg-page .kg-cta:hover { background: #22cbb2; color: #06121f; }
.kg-page .kg-cta-ghost { border: 1px solid rgba(255, 255, 255, .4); color: #fff; }
.kg-page .kg-cta-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.kg-page .kg-cta-note { font-size: 13.5px; line-height: 1.5; color: #b9bfe6; margin: 14px 0 0; }

/* ---- Layout: sticky contents rail + article ---- */
.kg-page .kg-layout {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 24px 24px;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.kg-page .kg-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow: auto; }
.kg-page .kg-toc-title {
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kg-muted);
  margin: 0 0 12px;
}
.kg-page .kg-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--kg-line); }
.kg-page .kg-toc li { margin: 0; padding: 0; font-size: 14.5px; line-height: 1.4; }
.kg-page .kg-toc a {
  display: block;
  padding: 7px 0 7px 14px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--kg-muted);
  text-decoration: none;
}
.kg-page .kg-toc a:hover { color: var(--kg-ink); }
.kg-page .kg-toc a.kg-on { color: var(--kg-brand); border-left-color: var(--kg-brand); font-weight: 600; }

.kg-page .kg-article { min-width: 0; max-width: 820px; }
.kg-page .kg-article section { scroll-margin-top: 96px; margin: 0 0 56px; }
.kg-page .kg-article h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--kg-ink);
  margin: 0 0 18px;
}
.kg-page .kg-article h3 {
  font-size: 1.3rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--kg-ink);
  margin: 34px 0 12px;
  scroll-margin-top: 96px;
}
.kg-page .kg-article h4 { font-size: 1.05rem; line-height: 1.35; font-weight: 600; color: var(--kg-ink); margin: 22px 0 8px; }
.kg-page .kg-article ul, .kg-page .kg-article ol { margin: 0 0 20px; padding-left: 24px; }
.kg-page .kg-article ul { list-style: disc; }
.kg-page .kg-article ol { list-style: decimal; }
.kg-page .kg-article li { margin: 0 0 8px; }
.kg-page .kg-article sup { font-size: 12px; line-height: 0; }
.kg-page .kg-article sup a { text-decoration: none; font-weight: 600; padding: 0 1px; }

/* Direct answer under each question heading: the passage an answer engine lifts. */
.kg-page .kg-answer {
  background: var(--kg-soft);
  border-left: 4px solid var(--kg-brand);
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
  margin: 0 0 22px;
}
.kg-page .kg-answer p { margin: 0; font-size: 17.5px; line-height: 1.65; color: var(--kg-ink); }

.kg-page .kg-takeaways { border: 1px solid var(--kg-line); border-radius: 14px; padding: 26px 28px 12px; margin: 0 0 56px; }
.kg-page .kg-takeaways h2 { font-size: 1.25rem; margin: 0 0 14px; }

.kg-page .kg-tip {
  border: 1px solid #c9efe8;
  background: #f1fcfa;
  border-radius: 12px;
  padding: 18px 22px;
  margin: 24px 0;
}
.kg-page .kg-tip p { margin: 0; }
.kg-page .kg-tip .kg-tip-label {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0b7f6f;
  margin: 0 0 6px;
}

.kg-page figure { margin: 26px 0; }
.kg-page figure img { display: block; width: 100%; border: 1px solid var(--kg-line); border-radius: 12px; }
.kg-page figcaption { font-size: 14px; line-height: 1.5; color: var(--kg-muted); margin-top: 10px; }

/* ---- Tables ---- */
.kg-page .kg-table-wrap { overflow-x: auto; margin: 22px 0 26px; border: 1px solid var(--kg-line); border-radius: 12px; }
.kg-page table.kg-table { width: 100%; min-width: 560px; border-collapse: collapse; margin: 0; background: #fff; }
.kg-page table.kg-table caption {
  caption-side: bottom;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  color: var(--kg-muted);
  padding: 10px 16px;
  border-top: 1px solid var(--kg-line);
}
.kg-page table.kg-table th,
.kg-page table.kg-table td {
  font-size: 15.5px;
  line-height: 1.55;
  text-align: left;
  vertical-align: top;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--kg-line);
}
.kg-page table.kg-table thead th { background: var(--kg-soft); color: var(--kg-ink); font-weight: 600; white-space: nowrap; }
.kg-page table.kg-table tbody th { color: var(--kg-ink); font-weight: 600; }
.kg-page table.kg-table tbody tr:last-child th,
.kg-page table.kg-table tbody tr:last-child td { border-bottom: 0; }

/* ---- Steps and checklists ---- */
.kg-page .kg-article ol.kg-steps { list-style: none; padding: 0; counter-reset: kg-step; }
.kg-page .kg-article ol.kg-steps > li { counter-increment: kg-step; position: relative; padding: 0 0 0 48px; margin: 0 0 16px; }
.kg-page .kg-article ol.kg-steps > li::before {
  content: counter(kg-step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--kg-brand);
  color: #fff;
  font-size: 14px;
  line-height: 30px;
  font-weight: 600;
  text-align: center;
}
.kg-page .kg-article ul.kg-check { list-style: none; padding: 0; }
.kg-page .kg-article ul.kg-check > li { position: relative; padding-left: 32px; }
.kg-page .kg-article ul.kg-check > li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 6px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--kg-brand);
  border-radius: 5px;
}

/* ---- Inline offer panel ---- */
.kg-page .kg-offer {
  background: linear-gradient(106deg, #39338f 0.57%, #090837 60%);
  border-radius: 16px;
  padding: 32px 34px;
  margin: 0 0 56px;
}
.kg-page .kg-offer h2, .kg-page .kg-offer h3 { color: #fff; font-size: 1.5rem; line-height: 1.25; font-weight: 700; margin: 0 0 12px; }
.kg-page .kg-offer p { color: #dfe3fa; margin: 0 0 16px; }
.kg-page .kg-offer p a { color: #fff; }
.kg-page .kg-offer ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.kg-page .kg-offer li { color: #fff; font-size: 15.5px; line-height: 1.5; margin: 0; padding: 0 0 0 26px; border: 0; position: relative; }
.kg-page .kg-offer li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--kg-accent); font-weight: 700; }
.kg-page .kg-offer li a { color: #fff; }

/* ---- FAQ (native details, no script, answers always in the DOM) ---- */
.kg-page .kg-faq details { border: 1px solid var(--kg-line); border-radius: 12px; padding: 0; margin: 0 0 12px; background: #fff; }
.kg-page .kg-faq details[open] { border-color: #cfd4ea; box-shadow: 0 8px 24px rgba(67, 80, 172, .08); }
.kg-page .kg-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
}
.kg-page .kg-faq summary::-webkit-details-marker { display: none; }
.kg-page .kg-faq summary::after { content: '+'; flex: 0 0 auto; font-size: 22px; line-height: 1; color: var(--kg-brand); }
.kg-page .kg-faq details[open] summary::after { content: '−'; }
.kg-page .kg-faq summary h3 { font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--kg-ink); margin: 0; }
.kg-page .kg-faq details > p { padding: 0 22px 18px; margin: 0; font-size: 16px; line-height: 1.65; }

/* ---- Sources ---- */
.kg-page .kg-sources ol { padding-left: 26px; }
.kg-page .kg-sources li { font-size: 15px; line-height: 1.55; margin: 0 0 10px; color: var(--kg-muted); scroll-margin-top: 110px; overflow-wrap: anywhere; }
.kg-page .kg-sources li:target { background: #fff8d9; }
.kg-page .kg-updated { font-size: 14.5px; line-height: 1.6; color: var(--kg-muted); border-top: 1px solid var(--kg-line); padding-top: 18px; }

/* ---- Closing band ---- */
.kg-page .kg-close { background: var(--kg-soft); padding: 64px 24px; text-align: center; }
.kg-page .kg-close h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; font-weight: 700; color: var(--kg-ink); margin: 0 auto 14px; max-width: 760px; }
.kg-page .kg-close p { max-width: 680px; margin: 0 auto 24px; }
.kg-page .kg-close .kg-cta-row { justify-content: center; }
.kg-page .kg-close .kg-cta-ghost { border-color: var(--kg-brand); color: var(--kg-brand); }
.kg-page .kg-close .kg-cta-ghost:hover { background: #e8ebf9; color: var(--kg-brand); }
.kg-page .kg-close .kg-cta-note { color: var(--kg-muted); }

@media (max-width: 960px) {
  .kg-page .kg-layout { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; }
  .kg-page .kg-toc { position: static; max-height: none; border: 1px solid var(--kg-line); border-radius: 12px; padding: 18px 20px; }
}
@media (max-width: 620px) {
  .kg-page, .kg-page p, .kg-page li { font-size: 16px; }
  .kg-page .kg-hero { padding: 36px 18px 44px; }
  .kg-page .kg-hero .kg-lede { font-size: 17px; }
  .kg-page .kg-layout { padding-left: 18px; padding-right: 18px; }
  .kg-page .kg-offer { padding: 24px 20px; }
  .kg-page .kg-offer ul { grid-template-columns: 1fr; }
  .kg-page .kg-cta, .kg-page .kg-cta-ghost { width: 100%; justify-content: center; }
  .kg-page .kg-article section { margin-bottom: 40px; }
}

/* ---- Comparison pages (/…-alternative/) ---- */
.kg-page .kg-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0 0 56px; }
.kg-page .kg-verdict > div { border: 1px solid var(--kg-line); border-radius: 14px; padding: 22px 24px 8px; }
.kg-page .kg-verdict > div.kg-verdict-us { border-color: #b9c0ec; background: var(--kg-soft); }
.kg-page .kg-verdict h2 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 12px; }
.kg-page .kg-verdict ul { margin: 0 0 14px; padding-left: 20px; list-style: disc; }
.kg-page .kg-verdict li { font-size: 15.5px; line-height: 1.55; margin: 0 0 8px; }
/* Yes / No / Partial are written as words so the table reads the same to a
   crawler as it does to a person; the colour is decoration only. */
.kg-page .kg-y, .kg-page .kg-n, .kg-page .kg-p { font-weight: 600; white-space: nowrap; }
.kg-page .kg-y { color: #0b7f6f; }
.kg-page .kg-n { color: #a23a3a; }
.kg-page .kg-p { color: #8a6100; }
.kg-page table.kg-table.kg-compare th[scope="col"]:first-child { width: 30%; }
.kg-page table.kg-table.kg-compare td { width: 35%; }
.kg-page .kg-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.kg-page .kg-article ul.kg-related { list-style: none; padding: 0; }
.kg-page .kg-related li { margin: 0; }
.kg-page .kg-related a { display: block; height: 100%; border: 1px solid var(--kg-line); border-radius: 12px; padding: 16px 18px; text-decoration: none; font-size: 15.5px; line-height: 1.45; font-weight: 600; color: var(--kg-ink); }
.kg-page .kg-related a:hover { border-color: var(--kg-brand); color: var(--kg-brand); }
@media (max-width: 720px) {
  .kg-page .kg-verdict, .kg-page .kg-related { grid-template-columns: 1fr; }
}

/* ---- Diagrams (inline SVG, drawn for the guides) ---- */
.kg-page figure.kg-diagram { margin: 26px 0; border: 1px solid var(--kg-line); border-radius: 14px; background: #fbfcff; padding: 18px 18px 6px; }
.kg-page figure.kg-diagram svg { display: block; width: 100%; height: auto; font-family: 'Poppins', 'Noto Sans JP', sans-serif; }
.kg-page figure.kg-diagram figcaption { margin: 10px 0 12px; }

/* ---- Guides index (/guides/) ---- */
.kg-page .kg-wide { max-width: 1180px; margin: 0 auto; padding: 48px 24px 24px; }
.kg-page .kg-wide > h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.2; font-weight: 700; color: var(--kg-ink); margin: 0 0 8px; }
.kg-page .kg-wide > p { max-width: 760px; margin: 0 0 26px; }
.kg-page .kg-cards { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kg-page .kg-cards > li { margin: 0; padding: 0; border: 0; }
.kg-page .kg-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--kg-line); border-radius: 14px; overflow: hidden; background: #fff; text-decoration: none; transition: box-shadow .2s ease, border-color .2s ease; }
.kg-page .kg-card:hover { border-color: #b9c0ec; box-shadow: 0 10px 28px rgba(67, 80, 172, .12); }
.kg-page .kg-card-img { aspect-ratio: 16 / 9; background: var(--kg-soft); overflow: hidden; border-bottom: 1px solid var(--kg-line); }
.kg-page .kg-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.kg-page .kg-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.kg-page .kg-card-kicker { font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--kg-brand); }
.kg-page .kg-card h3 { font-size: 1.12rem; line-height: 1.3; font-weight: 600; color: var(--kg-ink); margin: 0; }
.kg-page .kg-card p { font-size: 15px; line-height: 1.55; color: var(--kg-muted); margin: 0; }
.kg-page .kg-card-more { margin-top: auto; padding-top: 6px; font-size: 14.5px; line-height: 1.4; font-weight: 600; color: var(--kg-brand); }

/* ---- WSJF calculator ---- */
.kg-page .kg-calc { border: 1px solid var(--kg-line); border-radius: 14px; padding: 20px; margin: 24px 0; background: #fff; }
.kg-page .kg-calc table { width: 100%; min-width: 640px; border-collapse: collapse; margin: 0; }
.kg-page .kg-calc th, .kg-page .kg-calc td { font-size: 14.5px; line-height: 1.4; text-align: left; padding: 8px 8px; border: 0; border-bottom: 1px solid var(--kg-line); vertical-align: middle; }
.kg-page .kg-calc thead th { font-weight: 600; color: var(--kg-ink); background: var(--kg-soft); }
.kg-page .kg-calc input[type="text"] { width: 100%; min-width: 150px; font: inherit; padding: 8px 10px; border: 1px solid #cfd4ea; border-radius: 8px; background: #fff; color: var(--kg-ink); }
.kg-page .kg-calc select { font: inherit; padding: 8px 6px; border: 1px solid #cfd4ea; border-radius: 8px; background: #fff; color: var(--kg-ink); }
.kg-page .kg-calc output { font-weight: 700; color: var(--kg-ink); }
.kg-page .kg-calc tr.kg-top output.kg-score { color: #0b7f6f; }
.kg-page .kg-calc .kg-rank { display: inline-block; min-width: 26px; text-align: center; font-weight: 700; color: #fff; background: var(--kg-brand); border-radius: 999px; padding: 2px 8px; }
.kg-page .kg-calc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
/* The theme styles every <button> (white text, uppercase, its own padding),
   so the calculator's buttons restate what they need. */
.kg-page .kg-calc button { font-family: inherit; text-transform: none; letter-spacing: 0; line-height: 1.3; box-shadow: none; width: auto; height: auto; min-height: 0; }
.kg-page .kg-calc-actions button { font-size: 14.5px !important; font-weight: 600; padding: 9px 16px !important; border-radius: 8px; border: 1px solid var(--kg-brand) !important; background: #fff !important; color: var(--kg-brand) !important; cursor: pointer; }
.kg-page .kg-calc td button { font-size: 13px !important; padding: 4px !important; border: 0 !important; background: none !important; color: #a23a3a !important; cursor: pointer; }
.kg-page .kg-calc-actions button:hover { background: #e8ebf9 !important; }
.kg-page .kg-calc-wrap { overflow-x: auto; }

@media (max-width: 960px) { .kg-page .kg-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .kg-page .kg-cards { grid-template-columns: 1fr; } .kg-page .kg-wide { padding-left: 18px; padding-right: 18px; } }

/* ---- Product pages built on the guide system (/solution-board/) ---- */
.kg-page .kg-hero.kg-hero-split .kg-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 44px; align-items: center; max-width: 1320px; }
.kg-page .kg-hero-shot img { display: block; width: 100%; border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .14); }
.kg-page .kg-band { padding: 64px 24px; }
.kg-page .kg-band-soft { background: var(--kg-soft); }
.kg-page .kg-band-inner { max-width: 1180px; margin: 0 auto; }
.kg-page .kg-band h2 { font-size: clamp(1.6rem, 2.8vw, 2.15rem); line-height: 1.2; font-weight: 700; color: var(--kg-ink); margin: 0 0 14px; }
.kg-page .kg-band .kg-sub { max-width: 780px; font-size: 18px; line-height: 1.6; margin: 0 0 30px; }
.kg-page .kg-kicker { display: block; font-size: 12.5px; line-height: 1.4; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--kg-brand); margin: 0 0 10px; }
.kg-page .kg-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kg-page .kg-stats li { margin: 0; padding: 20px 22px; border: 1px solid var(--kg-line); border-radius: 14px; background: #fff; }
.kg-page .kg-stats strong { display: block; font-size: 1.7rem; line-height: 1.15; font-weight: 700; color: var(--kg-brand); margin: 0 0 6px; }
.kg-page .kg-stats span { font-size: 15px; line-height: 1.5; color: var(--kg-body); }
.kg-page .kg-feature { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 48px; align-items: center; padding: 44px 0; border-top: 1px solid var(--kg-line); }
.kg-page .kg-feature:first-of-type { border-top: 0; padding-top: 8px; }
.kg-page .kg-feature.kg-flip > .kg-feature-text { order: 2; }
.kg-page .kg-feature h3 { font-size: 1.5rem; line-height: 1.25; font-weight: 700; color: var(--kg-ink); margin: 0 0 12px; }
.kg-page .kg-feature ul { margin: 14px 0 0; padding-left: 22px; list-style: disc; }
.kg-page .kg-feature li { font-size: 16px; line-height: 1.6; margin: 0 0 8px; padding: 0; border: 0; }
.kg-page .kg-shot { margin: 0; }
.kg-page .kg-shot img { display: block; width: 100%; border: 1px solid var(--kg-line); border-radius: 12px; box-shadow: 0 14px 40px rgba(15, 23, 51, .12); }
.kg-page .kg-shot figcaption { font-size: 13.5px; line-height: 1.5; color: var(--kg-muted); margin-top: 10px; }
.kg-page .kg-quote { margin: 0; padding: 30px 34px; border-radius: 16px; background: #fff; border: 1px solid var(--kg-line); border-left: 5px solid var(--kg-brand); }
.kg-page .kg-quote, .kg-page .kg-quote p, .kg-page .kg-quote footer { font-style: normal; font-family: 'Poppins', 'Noto Sans JP', sans-serif; }
.kg-page blockquote.kg-quote p { font-size: 20px; line-height: 1.55; color: var(--kg-ink); margin: 0 0 12px; }
.kg-page .kg-quote footer { font-size: 15px; line-height: 1.5; color: var(--kg-muted); }
.kg-page .kg-narrow { max-width: 860px; }
.kg-page .kg-band .kg-table-wrap, .kg-page .kg-band .kg-faq { margin-top: 8px; }
@media (max-width: 960px) {
  .kg-page .kg-hero.kg-hero-split .kg-hero-inner, .kg-page .kg-feature { grid-template-columns: 1fr; gap: 26px; }
  .kg-page .kg-feature.kg-flip > .kg-feature-text { order: 0; }
  .kg-page .kg-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .kg-page .kg-band { padding: 44px 18px; }
  .kg-page .kg-stats { grid-template-columns: 1fr; }
  .kg-page .kg-quote { padding: 22px 20px; }
  .kg-page .kg-quote p { font-size: 17.5px; }
}

/* ---- Product-page type scale (.kg-product) ----
   Matches /solution-level/: Poppins throughout, 500 for the hero heading, 600
   for section headings in navy, 400 for copy, at that page's larger sizes.
   The guides keep their own tighter reading scale. */
.kg-page.kg-product { --kg-ink: #0b2654; --kg-body: #1e2835; }
.kg-page.kg-product .kg-hero h1 { font-weight: 500; font-size: clamp(2.1rem, 3.4vw, 3.125rem); line-height: 1.3; letter-spacing: 0; }
.kg-page.kg-product .kg-hero .kg-lede { font-size: clamp(1.1rem, 1.5vw, 1.5rem); line-height: 1.7; font-weight: 400; }
.kg-page.kg-product .kg-hero .kg-lede strong { font-weight: 500; }
.kg-page.kg-product .kg-band h2,
.kg-page.kg-product .kg-close h2 { font-weight: 600; font-size: clamp(1.75rem, 2.9vw, 2.75rem); line-height: 1.5; color: #0b2654; }
.kg-page.kg-product .kg-band .kg-sub { font-size: clamp(1.1rem, 1.6vw, 1.5rem); line-height: 1.7; font-weight: 400; color: #1e2835; max-width: 940px; }
.kg-page.kg-product .kg-feature h3 { font-weight: 600; font-size: clamp(1.35rem, 1.9vw, 1.625rem); line-height: 1.35; color: #0b2654; }
.kg-page.kg-product .kg-kicker { font-weight: 500; }
.kg-page.kg-product p, .kg-page.kg-product li, .kg-page.kg-product td, .kg-page.kg-product th { font-size: 18px; line-height: 30px; font-weight: 400; color: #1e2835; }
.kg-page.kg-product .kg-answer p { font-size: 20px; line-height: 32px; color: #0b2654; }
.kg-page.kg-product .kg-hero p.kg-cta-note, .kg-page.kg-product .kg-crumbs { font-size: 14px; line-height: 1.5; color: #b9bfe6; }
.kg-page.kg-product .kg-close .kg-cta-note { font-size: 14px; line-height: 1.5; color: var(--kg-muted); }
.kg-page.kg-product .kg-cta, .kg-page.kg-product .kg-cta-ghost { font-weight: 500; font-size: 18px; }
.kg-page.kg-product .kg-stats strong { font-weight: 600; font-size: 1.5rem; line-height: 1.3; color: #0b2654; }
.kg-page.kg-product .kg-stats span { font-size: 16px; line-height: 26px; }
.kg-page.kg-product .kg-shot figcaption { font-size: 14px; line-height: 1.5; color: var(--kg-muted); }
.kg-page.kg-product table.kg-table thead th, .kg-page.kg-product table.kg-table tbody th { font-weight: 600; color: #0b2654; }
.kg-page.kg-product table.kg-table caption { font-size: 14px; line-height: 1.5; color: var(--kg-muted); }
.kg-page.kg-product .kg-faq summary h3 { font-weight: 600; font-size: 20px; line-height: 1.4; color: #0b2654; }
.kg-page.kg-product blockquote.kg-quote p { font-size: 22px; line-height: 1.6; font-weight: 400; color: #0b2654; }
.kg-page.kg-product .kg-quote footer, .kg-page.kg-product .kg-updated { font-size: 15px; line-height: 1.6; color: var(--kg-muted); }
.kg-page.kg-product .kg-article ol.kg-steps > li strong, .kg-page.kg-product strong { font-weight: 600; color: #0b2654; }
.kg-page.kg-product .kg-hero strong { color: #fff; }
@media (max-width: 620px) {
  .kg-page.kg-product p, .kg-page.kg-product li { font-size: 16.5px; line-height: 27px; }
  .kg-page.kg-product .kg-answer p { font-size: 17.5px; line-height: 28px; }
}

/* ---- Screenshot window (.kg-win) ----
   A full app screenshot shrunk into a column is unreadable, so the frame shows
   it zoomed in on the part that matters, inside a browser-style window that
   fades out at the right and bottom edges. The whole picture opens on click. */
.kg-page .kg-win { display: block; position: relative; border-radius: 14px; background: #fff; border: 1px solid #d5daee; box-shadow: 0 2px 4px rgba(15, 23, 51, .04), 0 22px 54px rgba(33, 38, 102, .18); overflow: hidden; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.kg-page a.kg-win:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(15, 23, 51, .04), 0 30px 70px rgba(33, 38, 102, .26); }
.kg-page .kg-win-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: linear-gradient(#f6f7fc, #eceef8); border-bottom: 1px solid #dde1f1; }
.kg-page .kg-win-bar i { width: 10px; height: 10px; border-radius: 50%; background: #c9cee4; }
.kg-page .kg-win-bar i:nth-child(1) { background: #f26b63; }
.kg-page .kg-win-bar i:nth-child(2) { background: #f5bd4f; }
.kg-page .kg-win-bar i:nth-child(3) { background: #5fc866; }
.kg-page .kg-win-bar b { margin-left: 10px; font-size: 12px; line-height: 1; font-weight: 500; color: #7b83a6; letter-spacing: .01em; }
.kg-page .kg-win-view { display: block; position: relative; aspect-ratio: 16 / 10.4; overflow: hidden; background: #f4f6fc; }
.kg-page .kg-win-view img { display: block; width: 185%; max-width: none; height: auto; border: 0; border-radius: 0; box-shadow: none; transform: translate(var(--fx, 0), var(--fy, 0)); image-rendering: auto; }
.kg-page .kg-win-view::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(255, 255, 255, 0) 82%, rgba(255, 255, 255, .92) 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, .95) 100%); }
.kg-page .kg-win-zoom { position: absolute; right: 12px; bottom: 12px; z-index: 2; font-size: 12.5px; line-height: 1; font-weight: 500; color: #fff; background: rgba(33, 38, 102, .88); padding: 8px 12px; border-radius: 999px; opacity: 0; transition: opacity .2s ease; }
.kg-page a.kg-win:hover .kg-win-zoom, .kg-page a.kg-win:focus-visible .kg-win-zoom { opacity: 1; }

/* ---- Hero in the style of /solution-level/ (.kg-hero-sl) ---- */
.kg-page .kg-hero.kg-hero-sl { background: #212666; padding: 0; overflow: hidden; }
.kg-page .kg-hero-sl .kg-hero-inner { max-width: 1800px; margin: 0 auto; padding: 0 0 0 clamp(24px, 5.2vw, 100px); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 32px; align-items: center; }
.kg-page .kg-hero-sl .kg-hero-copy { padding: 56px 0 64px; }
.kg-page.kg-product .kg-hero-sl h1 { font-size: clamp(2rem, 3.1vw, 3.125rem); line-height: 1.3; font-weight: 500; color: #fff; margin: 0 0 30px; max-width: 620px; }
.kg-page.kg-product .kg-hero-sl .kg-lede { font-size: clamp(1.05rem, 1.5vw, 1.5rem); line-height: 1.7; font-weight: 400; color: #fff; max-width: 520px; margin: 0 0 44px; }
.kg-page .kg-hero-sl .kg-hero-art { align-self: stretch; display: flex; align-items: center; justify-content: flex-end; }
.kg-page .kg-hero-sl .kg-hero-art img { display: block; width: 100%; height: auto; max-width: 963px; }
.kg-page .kg-btn-sl { display: inline-flex; align-items: center; gap: 11px; width: fit-content; background: #1a1a6a; color: #fff; border-radius: 12px; padding: 14px 16px; font-size: 22px; line-height: 1; font-weight: 500; text-decoration: none; }
.kg-page .kg-btn-sl:hover { color: #fff; background: #15155a; }
.kg-page .kg-btn-sl img { width: 20px; height: 20px; border: 0; }
.kg-page .kg-btn-sl.kg-btn-sl-ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .45); padding: 13px 18px; }
.kg-page .kg-btn-sl.kg-btn-sl-ghost:hover { background: rgba(255, 255, 255, .1); }
.kg-page .kg-trust { background: #3834a3; padding: 1px 24px 6px; text-align: center; }
.kg-page .kg-trust-logo { width: 50px; height: 50px; margin: -25px auto 0; border-radius: 50%; background: #212666; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; }
.kg-page .kg-trust-logo img { width: 34px; height: 34px; border: 0; }
.kg-page.kg-product .kg-trust p { font-size: clamp(1rem, 1.4vw, 1.375rem); line-height: 1.5; font-weight: 400; color: #dcd8fe; margin: 14px 0 0; }
.kg-page .kg-trust-clients { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 80px); margin: 30px 10px 32px; opacity: .6; }
.kg-page .kg-trust-clients img { width: 110px; height: auto; border: 0; }
@media (max-width: 960px) {
  .kg-page .kg-hero-sl .kg-hero-inner { grid-template-columns: 1fr; padding: 0 24px; gap: 0; }
  .kg-page .kg-hero-sl .kg-hero-copy { padding: 40px 0 28px; }
  .kg-page .kg-hero-sl .kg-hero-art { margin: 0 -24px 0 0; padding-bottom: 36px; }
  .kg-page .kg-btn-sl { font-size: 18px; padding: 14px 20px; }
  .kg-page .kg-win-view img { width: 160%; }
}

/* Product pages use a wider measure so the screenshot windows have room. */
.kg-page.kg-product .kg-band-inner { max-width: 1320px; }
.kg-page.kg-product .kg-band-inner.kg-narrow { max-width: 900px; }
.kg-page.kg-product .kg-feature { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 56px; }
@media (max-width: 960px) { .kg-page.kg-product .kg-feature { grid-template-columns: 1fr; gap: 26px; } }

/* ==== Product page layout (.kg-product), full width ====
   Sections span the page like the other product pages (/solution-level/):
   up to 1500px of content with a 5vw gutter, centred headings, large type.
   Everything scales with clamp() and collapses to one column on small screens. */
.kg-page.kg-product { --kg-gutter: clamp(20px, 5.2vw, 100px); }
.kg-page.kg-product .kg-band { padding: clamp(56px, 6.5vw, 104px) var(--kg-gutter); }
.kg-page.kg-product .kg-band-inner { max-width: 1500px; margin: 0 auto; }
.kg-page.kg-product .kg-center { text-align: center; }
.kg-page.kg-product .kg-band h2,
.kg-page.kg-product .kg-cta-band h2 { font-weight: 600; font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.4; color: #0b2654; margin: 0 auto 18px; max-width: 1100px; }
.kg-page.kg-product .kg-band .kg-sub { font-size: clamp(1.1rem, 1.7vw, 1.6rem); line-height: 1.6; font-weight: 400; color: #1e2835; max-width: 1120px; margin: 0 auto 22px; }
.kg-page.kg-product .kg-band .kg-sub.kg-sub-2 { font-size: clamp(1rem, 1.35vw, 1.3rem); color: #4a5370; max-width: 980px; }
.kg-page.kg-product .kg-foot { font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.7; margin: clamp(28px, 3vw, 44px) auto 0; max-width: 1000px; }

/* Fact tiles and persona tiles */
.kg-page.kg-product .kg-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); margin-top: clamp(30px, 3.6vw, 56px); text-align: left; }
.kg-page.kg-product .kg-stats li { padding: clamp(22px, 2.2vw, 34px); border-radius: 18px; border: 1px solid #dfe3f3; background: #fff; box-shadow: 0 10px 30px rgba(33, 38, 102, .06); }
.kg-page.kg-product .kg-stats strong { font-size: clamp(1.3rem, 1.9vw, 1.9rem); line-height: 1.25; font-weight: 600; color: #212666; margin: 0 0 10px; }
.kg-page.kg-product .kg-stats span { font-size: clamp(1rem, 1.15vw, 1.2rem); line-height: 1.6; color: #1e2835; }
.kg-page.kg-product .kg-personas li { background: #f6f7fd; box-shadow: none; }

/* Feature rows: copy and a large screenshot window, alternating sides */
.kg-page.kg-product .kg-feature { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 4.6vw, 88px); padding: clamp(40px, 4.6vw, 76px) 0; border-top: 1px solid #dfe3f3; align-items: center; }
.kg-page.kg-product .kg-feature:first-of-type { border-top: 0; }
.kg-page.kg-product .kg-feature.kg-flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.kg-page.kg-product .kg-feature.kg-flip > .kg-feature-text { order: 2; }
.kg-page.kg-product .kg-feature h3 { font-weight: 600; font-size: clamp(1.4rem, 2.2vw, 2.1rem); line-height: 1.3; color: #0b2654; margin: 0 0 16px; }
.kg-page.kg-product .kg-feature p { font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.7; margin: 0; }
.kg-page.kg-product .kg-feature ul { margin: 20px 0 0; padding: 0; list-style: none; }
.kg-page.kg-product .kg-feature li { position: relative; font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.6; margin: 0 0 12px; padding: 0 0 0 34px; border: 0; }
.kg-page.kg-product .kg-feature li::before { content: ''; position: absolute; left: 0; top: .28em; width: 20px; height: 20px; border-radius: 50%; background: #2ebf9f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.kg-page.kg-product .kg-kicker { display: inline-block; font-size: 13px; line-height: 1; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #3834a3; background: #e9e9fb; padding: 9px 14px; border-radius: 999px; margin: 0 0 18px; }
.kg-page.kg-product .kg-shot figcaption { font-size: 14.5px; line-height: 1.5; color: #5b6280; margin-top: 14px; text-align: center; }
.kg-page.kg-product .kg-win-view { aspect-ratio: 16 / 10; }
.kg-page.kg-product .kg-win-view img { width: 165%; }

/* Set-up steps as cards */
.kg-page.kg-product .kg-step-cards { list-style: none; margin: clamp(30px, 3.6vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); text-align: left; counter-reset: none; }
.kg-page.kg-product .kg-step-cards li { margin: 0; padding: clamp(22px, 2.2vw, 34px); border: 1px solid #dfe3f3; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(33, 38, 102, .06); }
.kg-page.kg-product .kg-num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #212666; color: #fff; font-size: 20px; line-height: 1; font-weight: 600; margin: 0 0 18px; }
.kg-page.kg-product .kg-step-cards h3 { font-size: clamp(1.15rem, 1.5vw, 1.45rem); line-height: 1.3; font-weight: 600; color: #0b2654; margin: 0 0 10px; }
.kg-page.kg-product .kg-step-cards p { font-size: clamp(1rem, 1.1vw, 1.12rem); line-height: 1.65; margin: 0; }

/* Comparison table at full width */
.kg-page.kg-product .kg-table-wrap { margin: clamp(26px, 3vw, 46px) auto 0; max-width: 1280px; border-radius: 18px; border-color: #dfe3f3; box-shadow: 0 10px 30px rgba(33, 38, 102, .06); background: #fff; }
.kg-page.kg-product table.kg-table th, .kg-page.kg-product table.kg-table td { font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.6; padding: clamp(14px, 1.4vw, 22px) clamp(16px, 1.8vw, 28px); }
.kg-page.kg-product table.kg-table thead th { background: #212666; color: #fff; font-weight: 600; }
.kg-page.kg-product table.kg-table caption { padding: 14px clamp(16px, 1.8vw, 28px); }

/* Testimonial */
.kg-page.kg-product blockquote.kg-quote { max-width: 1100px; margin: clamp(30px, 3.6vw, 56px) auto 0; padding: clamp(26px, 3vw, 48px); border: 0; border-radius: 22px; background: #212666; text-align: center; }
.kg-page.kg-product blockquote.kg-quote p { font-size: clamp(1.15rem, 1.8vw, 1.7rem); line-height: 1.55; font-weight: 400; color: #fff; margin: 0 0 16px; }
.kg-page.kg-product .kg-quote footer { font-size: clamp(.95rem, 1.1vw, 1.1rem); color: #dcd8fe; }

/* FAQ */
.kg-page.kg-product .kg-faq-wrap { max-width: 1100px; }
.kg-page.kg-product .kg-faq-wrap h2 { margin-bottom: clamp(24px, 3vw, 44px); }
.kg-page.kg-product .kg-faq details { border-radius: 16px; border-color: #dfe3f3; margin-bottom: 14px; }
.kg-page.kg-product .kg-faq summary { padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 30px); }
.kg-page.kg-product .kg-faq summary h3 { font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.4; font-weight: 600; color: #0b2654; }
.kg-page.kg-product .kg-faq details > p { padding: 0 clamp(20px, 2vw, 30px) clamp(18px, 1.8vw, 26px); font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.7; }
.kg-page.kg-product .kg-updated { text-align: center; border-top: 0; margin-top: 26px; }

/* Closing band */
.kg-page.kg-product .kg-cta-band { background: #212666; padding: clamp(56px, 6.5vw, 104px) var(--kg-gutter); text-align: center; }
.kg-page.kg-product .kg-cta-band h2 { color: #fff; }
.kg-page.kg-product .kg-cta-band p { font-size: clamp(1.05rem, 1.5vw, 1.45rem); line-height: 1.6; color: #dcd8fe; max-width: 900px; margin: 0 auto 34px; }
.kg-page.kg-product .kg-cta-band .kg-cta-row { justify-content: center; }
.kg-page.kg-product .kg-cta-band p.kg-cta-note { font-size: 15px; line-height: 1.5; color: #b9bfe6; margin: 22px auto 0; }
.kg-page.kg-product .kg-cta-band .kg-cta-note a { color: #fff; }
.kg-page .kg-btn-sl.kg-btn-sl-light { background: #63e0f8; color: #0b2654; }
.kg-page .kg-btn-sl.kg-btn-sl-light:hover { background: #8ae9fb; color: #0b2654; }

/* Hero spacing with the page gutter */
.kg-page.kg-product .kg-hero-sl .kg-hero-inner { padding-left: var(--kg-gutter); }
.kg-page.kg-product .kg-hero-sl .kg-crumbs { margin-bottom: 18px; }

@media (max-width: 1180px) {
  .kg-page.kg-product .kg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kg-page.kg-product .kg-step-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .kg-page.kg-product .kg-feature, .kg-page.kg-product .kg-feature.kg-flip { grid-template-columns: 1fr; gap: 26px; }
  .kg-page.kg-product .kg-feature.kg-flip > .kg-feature-text { order: 0; }
  .kg-page.kg-product .kg-hero-sl .kg-hero-inner { padding: 0 var(--kg-gutter); }
  .kg-page.kg-product .kg-hero-sl .kg-hero-art { margin-right: calc(-1 * var(--kg-gutter)); }
  .kg-page.kg-product .kg-win-view img { width: 150%; }
}
@media (max-width: 620px) {
  .kg-page.kg-product .kg-stats, .kg-page.kg-product .kg-step-cards { grid-template-columns: 1fr; }
  .kg-page.kg-product .kg-cta-row { flex-direction: column; align-items: stretch; }
  .kg-page.kg-product .kg-btn-sl { width: 100%; justify-content: center; }
  .kg-page.kg-product .kg-win-bar { height: 28px; }
  .kg-page.kg-product .kg-win-view img { width: 175%; }
  .kg-page.kg-product .kg-trust-clients img { width: 84px; }
}

/* Product page banding: the feature section sits on white so the screenshot
   windows stand out; the shorter sections around it carry the soft tint. */
.kg-page.kg-product .kg-band { background: #fff; }
.kg-page.kg-product .kg-band.kg-band-soft { background: #f4f5fc; }
.kg-page.kg-product .kg-band-soft .kg-personas li { background: #fff; box-shadow: 0 10px 30px rgba(33, 38, 102, .06); }
.kg-page.kg-product #features .kg-feature { border-top-color: #eceef7; }
.kg-page.kg-product #features .kg-win { box-shadow: 0 2px 4px rgba(15, 23, 51, .05), 0 26px 64px rgba(33, 38, 102, .2); }
.kg-page.kg-product #features .kg-win-view { background: #f7f8fd; }
.kg-page.kg-product #features .kg-center + .kg-feature { border-top: 0; padding-top: clamp(20px, 2.4vw, 40px); }

/* Feature rows: quieter copy so the screenshot leads. Smaller, lighter text
   in a narrower column, and the window takes the larger share of the row. */
.kg-page.kg-product .kg-feature { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }
.kg-page.kg-product .kg-feature.kg-flip { grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr); }
.kg-page.kg-product .kg-feature h3 { font-size: clamp(1.25rem, 1.65vw, 1.625rem); line-height: 1.35; font-weight: 600; margin: 0 0 12px; }
.kg-page.kg-product .kg-feature p { font-size: clamp(0.98rem, 1.05vw, 1.0625rem); line-height: 1.7; color: #3d4763; }
.kg-page.kg-product .kg-feature ul { margin-top: 16px; }
.kg-page.kg-product .kg-feature li { font-size: clamp(0.94rem, 0.98vw, 1rem); line-height: 1.6; color: #3d4763; margin: 0 0 9px; padding-left: 28px; }
.kg-page.kg-product .kg-feature li::before { width: 17px; height: 17px; top: .3em; background-size: 17px; }
.kg-page.kg-product .kg-kicker { font-size: 11.5px; padding: 7px 12px; margin-bottom: 14px; }
@media (max-width: 960px) {
  .kg-page.kg-product .kg-feature, .kg-page.kg-product .kg-feature.kg-flip { grid-template-columns: 1fr; }
}

/* Set-up steps as a slim connected stepper (replaces the step cards). */
.kg-page.kg-product .kg-band.kg-band-tight { padding-top: clamp(44px, 4.6vw, 72px); padding-bottom: clamp(44px, 4.6vw, 72px); }
.kg-page.kg-product .kg-band-tight h2 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); margin-bottom: 10px; }
.kg-page.kg-product .kg-band-tight .kg-sub { font-size: clamp(1rem, 1.2vw, 1.15rem); color: #4a5370; margin-bottom: 0; }
.kg-page.kg-product .kg-stepline { list-style: none; margin: clamp(28px, 3vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; text-align: center; }
.kg-page.kg-product .kg-stepline li { position: relative; margin: 0; padding: 0 12px; border: 0; }
.kg-page.kg-product .kg-stepline li::before { content: ''; position: absolute; top: 17px; left: -50%; width: 100%; height: 2px; background: #cfd3ef; }
.kg-page.kg-product .kg-stepline li:first-child::before { display: none; }
.kg-page.kg-product .kg-stepline .kg-num { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid #3834a3; color: #3834a3; font-size: 15px; line-height: 1; font-weight: 600; margin: 0 0 14px; }
.kg-page.kg-product .kg-stepline h3 { font-size: clamp(0.98rem, 1.1vw, 1.08rem); line-height: 1.35; font-weight: 600; color: #0b2654; margin: 0 0 6px; }
.kg-page.kg-product .kg-stepline p { font-size: clamp(0.88rem, 0.95vw, 0.95rem); line-height: 1.5; color: #5b6280; margin: 0; }
.kg-page.kg-product .kg-band-tight .kg-foot { font-size: 15px; color: #5b6280; margin-top: clamp(24px, 2.6vw, 36px); }
@media (max-width: 1100px) {
  .kg-page.kg-product .kg-stepline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
  .kg-page.kg-product .kg-stepline li:nth-child(4)::before { display: none; }
}
@media (max-width: 620px) {
  .kg-page.kg-product .kg-stepline { grid-template-columns: 1fr; row-gap: 0; text-align: left; }
  .kg-page.kg-product .kg-stepline li { padding: 0 0 22px 52px; }
  .kg-page.kg-product .kg-stepline li:last-child { padding-bottom: 0; }
  .kg-page.kg-product .kg-stepline .kg-num { position: absolute; left: 0; top: 0; margin: 0; }
  .kg-page.kg-product .kg-stepline li::before, .kg-page.kg-product .kg-stepline li:nth-child(4)::before { display: block; top: -100%; left: 17px; width: 2px; height: 100%; }
  .kg-page.kg-product .kg-stepline li:first-child::before { display: none; }
}

/* Lower half of the product page (.kg-band-tight): lighter and more compact
   than the feature section above it. */
.kg-page.kg-product .kg-band-tight .kg-table-wrap { max-width: 980px; margin-top: clamp(22px, 2.4vw, 34px); border-radius: 14px; box-shadow: none; border: 1px solid #e3e6f3; }
.kg-page.kg-product .kg-band-tight table.kg-table th, .kg-page.kg-product .kg-band-tight table.kg-table td { font-size: 15px; line-height: 1.5; padding: 11px 18px; border-bottom-color: #eef0f8; }
.kg-page.kg-product .kg-band-tight table.kg-table thead th { background: #f4f5fc; color: #0b2654; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.kg-page.kg-product .kg-band-tight table.kg-table tbody th { font-weight: 500; color: #5b6280; }
.kg-page.kg-product .kg-band-tight table.kg-table td:last-child { color: #0b2654; font-weight: 500; }
.kg-page.kg-product .kg-band-tight table.kg-table caption { display: none; }

.kg-page.kg-product .kg-band-tight .kg-stats { margin-top: clamp(22px, 2.4vw, 34px); gap: 14px; }
.kg-page.kg-product .kg-band-tight .kg-stats li { padding: 18px 20px; border-radius: 14px; box-shadow: none; border: 1px solid #e3e6f3; background: #fff; }
.kg-page.kg-product .kg-band-tight .kg-stats strong { font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.3; margin: 0 0 6px; color: #0b2654; }
.kg-page.kg-product .kg-band-tight .kg-stats span { font-size: 14.5px; line-height: 1.5; color: #5b6280; }

.kg-page.kg-product .kg-band-tight blockquote.kg-quote { max-width: 860px; margin-top: clamp(22px, 2.4vw, 34px); padding: 22px 28px; background: transparent; border: 0; border-left: 3px solid #3834a3; border-radius: 0; text-align: left; }
.kg-page.kg-product .kg-band-tight blockquote.kg-quote p { font-size: clamp(1.02rem, 1.25vw, 1.2rem); line-height: 1.6; color: #0b2654; margin: 0 0 8px; }
.kg-page.kg-product .kg-band-tight .kg-quote footer { font-size: 14px; color: #5b6280; }

.kg-page.kg-product .kg-band-tight.kg-band .kg-faq-wrap, .kg-page.kg-product .kg-band-tight .kg-faq-wrap { max-width: 880px; }
.kg-page.kg-product .kg-band-tight .kg-faq-wrap h2 { margin-bottom: clamp(18px, 2vw, 28px); }
.kg-page.kg-product .kg-band-tight .kg-faq details { border: 0; border-bottom: 1px solid #e3e6f3; border-radius: 0; margin: 0; box-shadow: none; background: transparent; }
.kg-page.kg-product .kg-band-tight .kg-faq details[open] { box-shadow: none; border-color: #e3e6f3; }
.kg-page.kg-product .kg-band-tight .kg-faq summary { padding: 16px 2px; }
.kg-page.kg-product .kg-band-tight .kg-faq summary h3 { font-size: clamp(0.98rem, 1.1vw, 1.08rem); font-weight: 500; color: #0b2654; }
.kg-page.kg-product .kg-band-tight .kg-faq summary::after { font-size: 20px; color: #3834a3; }
.kg-page.kg-product .kg-band-tight .kg-faq details > p { padding: 0 2px 18px; font-size: 15.5px; line-height: 1.65; color: #4a5370; }
.kg-page.kg-product .kg-band-tight .kg-updated { font-size: 13.5px; margin-top: 20px; }

.kg-page.kg-product .kg-cta-band.kg-band-tight { padding-top: clamp(44px, 4.6vw, 72px); padding-bottom: clamp(44px, 4.6vw, 72px); }
.kg-page.kg-product .kg-cta-band.kg-band-tight h2 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); color: #fff; margin-bottom: 10px; }
.kg-page.kg-product .kg-cta-band.kg-band-tight p { font-size: clamp(1rem, 1.2vw, 1.15rem); margin-bottom: 26px; max-width: 760px; }
.kg-page.kg-product .kg-cta-band.kg-band-tight .kg-btn-sl { font-size: 17px; padding: 13px 20px; }
.kg-page.kg-product .kg-cta-band.kg-band-tight p.kg-cta-note { font-size: 13.5px; margin-top: 18px; }

/* ---- Full-view popup for screenshot windows ---- */
.kg-lightbox { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: clamp(14px, 3vw, 48px); background: rgba(11, 14, 44, .88); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: kg-lb-in .18s ease; }
.kg-lightbox[hidden] { display: none; }
.kg-lightbox figure { margin: 0; max-width: min(1600px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.kg-lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; border-radius: 12px; background: #fff; box-shadow: 0 30px 90px rgba(0, 0, 0, .55); }
.kg-lightbox figcaption { margin-top: 14px; font-family: 'Poppins', 'Noto Sans JP', sans-serif; font-size: 15px; line-height: 1.5; color: #dcd8fe; text-align: center; }
.kg-lightbox-close { position: absolute; top: clamp(10px, 2vw, 22px); right: clamp(10px, 2vw, 26px); width: 46px !important; height: 46px !important; min-height: 0; padding: 0 !important; border: 1px solid rgba(255, 255, 255, .35) !important; border-radius: 50% !important; background: rgba(255, 255, 255, .1) !important; color: #fff !important; font-family: Arial, sans-serif !important; font-size: 28px !important; line-height: 1 !important; text-transform: none; box-shadow: none; cursor: pointer; }
.kg-lightbox-close:hover, .kg-lightbox-close:focus-visible { background: rgba(255, 255, 255, .24) !important; outline: 0; }
html.kg-lightbox-open { overflow: hidden; }
.kg-page a.kg-win { cursor: zoom-in; }
@keyframes kg-lb-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kg-lightbox { animation: none; } }
.kg-lightbox-close:focus, .kg-lightbox-close:active { background: rgba(255, 255, 255, .24) !important; color: #fff !important; outline: 0; }

/* AI section on the product page */
.kg-page.kg-product .kg-ai-band { background: linear-gradient(180deg, #fff 0%, #f6f5ff 100%); }
.kg-page.kg-product .kg-ai-band .kg-kicker { margin-bottom: 12px; }
.kg-page.kg-product .kg-band-tight .kg-stats.kg-ai li { text-align: left; border-color: #dcd8fe; background: #fff; }
.kg-page.kg-product .kg-band-tight .kg-stats.kg-ai strong { color: #3834a3; }

/* Tighter product hero: shorter copy block and less height. */
.kg-page.kg-product .kg-hero-sl .kg-hero-copy { padding: clamp(32px, 3.4vw, 52px) 0 clamp(36px, 3.8vw, 58px); }
.kg-page.kg-product .kg-hero-sl h1 { font-size: clamp(1.9rem, 2.8vw, 2.75rem); line-height: 1.25; margin: 0 0 18px; max-width: 520px; }
.kg-page.kg-product .kg-hero-sl .kg-lede { font-size: clamp(1rem, 1.3vw, 1.3rem); line-height: 1.6; max-width: 460px; margin: 0 0 30px; color: #dcd8fe; }
.kg-page.kg-product .kg-hero-sl .kg-crumbs { margin-bottom: 14px; font-size: 13px; }
.kg-page.kg-product .kg-hero-sl .kg-hero-art img { max-width: 860px; }
.kg-page.kg-product .kg-hero-sl .kg-btn-sl { font-size: 18px; padding: 13px 18px; }

/* The feature section and the AI section are both white, so their paddings
   stacked into one large gap. The last feature row drops its bottom padding
   and the two bands meet with a single, smaller space. */
.kg-page.kg-product #features { padding-bottom: clamp(28px, 3vw, 44px); }
.kg-page.kg-product #features .kg-feature:last-child { padding-bottom: 0; }
.kg-page.kg-product #ai-assisted { padding-top: clamp(32px, 3.4vw, 52px); }

/* ==== Shared refresh for guides, comparison pages, the hub and the index ====
   Brings every page built on this stylesheet in line with /solution-board/:
   Poppins at 500 for the page heading and 600 for section headings in navy,
   400 for copy, the solid purple hero and closing band, and the lighter
   treatment for tables, FAQs, cards and callouts. Markup is unchanged. */
.kg-page:not(.kg-product) { --kg-ink: #0b2654; --kg-body: #1e2835; --kg-muted: #5b6280; --kg-brand: #3834a3; --kg-line: #e3e6f3; --kg-soft: #f4f5fc; }
.kg-page:not(.kg-product) strong { font-weight: 600; }

/* Hero */
.kg-page:not(.kg-product) .kg-hero { background: #212666; padding: clamp(36px, 4vw, 60px) clamp(20px, 5.2vw, 100px) clamp(40px, 4.4vw, 66px); }
.kg-page:not(.kg-product) .kg-hero-inner { max-width: 1280px; }
.kg-page:not(.kg-product) .kg-hero h1 { font-weight: 500; font-size: clamp(1.9rem, 3vw, 2.85rem); line-height: 1.28; letter-spacing: 0; margin: 0 0 18px; max-width: 880px; }
.kg-page:not(.kg-product) .kg-hero .kg-lede { font-size: clamp(1.02rem, 1.3vw, 1.25rem); line-height: 1.65; font-weight: 400; color: #dcd8fe; max-width: 780px; margin: 0 0 18px; }
.kg-page:not(.kg-product) .kg-hero .kg-lede strong { font-weight: 500; color: #fff; }
.kg-page:not(.kg-product) .kg-byline { font-size: 13.5px; margin-bottom: 24px; }
.kg-page:not(.kg-product) .kg-crumbs { font-size: 13px; margin-bottom: 16px; }

/* Buttons */
.kg-page:not(.kg-product) .kg-cta,
.kg-page:not(.kg-product) .kg-cta-ghost { font-weight: 500; font-size: 17px; line-height: 1; padding: 14px 20px; border-radius: 12px; box-shadow: none; }
.kg-page:not(.kg-product) .kg-cta { background: #63e0f8; color: #0b2654; }
.kg-page:not(.kg-product) .kg-cta:hover { background: #8ae9fb; color: #0b2654; }
.kg-page:not(.kg-product) .kg-cta-ghost { border: 1px solid rgba(255, 255, 255, .45); color: #fff; background: transparent; }
.kg-page:not(.kg-product) .kg-cta-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.kg-page:not(.kg-product) .kg-cta-note { font-size: 13.5px; }

/* Article typography */
.kg-page:not(.kg-product) .kg-article h2 { font-weight: 600; font-size: clamp(1.45rem, 2.1vw, 1.85rem); line-height: 1.3; color: #0b2654; }
.kg-page:not(.kg-product) .kg-article h3 { font-weight: 600; font-size: clamp(1.1rem, 1.4vw, 1.25rem); color: #0b2654; }
.kg-page:not(.kg-product) .kg-article h4 { font-weight: 600; color: #0b2654; }
.kg-page:not(.kg-product) .kg-article section { margin-bottom: 48px; }
.kg-page:not(.kg-product) .kg-toc-title { font-weight: 600; font-size: 12px; }
.kg-page:not(.kg-product) .kg-toc a { font-size: 14px; }
.kg-page:not(.kg-product) .kg-toc a.kg-on { font-weight: 500; }

/* Callouts */
.kg-page:not(.kg-product) .kg-answer { background: #f4f5fc; border-left: 3px solid #3834a3; border-radius: 0 12px 12px 0; padding: 16px 20px; }
.kg-page:not(.kg-product) .kg-answer p { font-size: 17px; line-height: 1.65; color: #0b2654; font-weight: 400; }
.kg-page:not(.kg-product) .kg-takeaways { border: 1px solid #e3e6f3; border-radius: 16px; background: #fbfbfe; padding: 22px 26px 8px; margin-bottom: 44px; }
.kg-page:not(.kg-product) .kg-takeaways h2 { font-size: 1.1rem; font-weight: 600; }
.kg-page:not(.kg-product) .kg-tip { border: 0; border-left: 3px solid #2ebf9f; background: #f1fbf8; border-radius: 0 12px 12px 0; padding: 16px 20px; }
.kg-page:not(.kg-product) .kg-tip .kg-tip-label { font-size: 11.5px; }
.kg-page:not(.kg-product) .kg-verdict > div { border-radius: 16px; border-color: #e3e6f3; padding: 20px 22px 6px; }
.kg-page:not(.kg-product) .kg-verdict > div.kg-verdict-us { background: #f4f5fc; border-color: #d3d1f3; }
.kg-page:not(.kg-product) .kg-verdict h2 { font-size: 1.05rem; font-weight: 600; }

/* Tables */
.kg-page:not(.kg-product) .kg-table-wrap { border-radius: 14px; border-color: #e3e6f3; }
.kg-page:not(.kg-product) table.kg-table th,
.kg-page:not(.kg-product) table.kg-table td { font-size: 15px; line-height: 1.55; padding: 11px 16px; border-bottom-color: #eef0f8; }
.kg-page:not(.kg-product) table.kg-table thead th { background: #f4f5fc; color: #0b2654; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.kg-page:not(.kg-product) table.kg-table tbody th { font-weight: 500; color: #0b2654; }
.kg-page:not(.kg-product) table.kg-table caption { font-size: 13.5px; }

/* Steps and checklists */
.kg-page:not(.kg-product) .kg-article ol.kg-steps > li::before { background: #fff; color: #3834a3; border: 2px solid #3834a3; line-height: 26px; font-weight: 600; }
.kg-page:not(.kg-product) .kg-article ul.kg-check > li::before { border-color: #3834a3; border-width: 1.5px; }

/* Offer panel */
.kg-page:not(.kg-product) .kg-offer { background: #212666; border-radius: 20px; padding: clamp(24px, 2.6vw, 34px); }
.kg-page:not(.kg-product) .kg-offer h2,
.kg-page:not(.kg-product) .kg-offer h3 { font-weight: 600; font-size: clamp(1.2rem, 1.7vw, 1.45rem); color: #fff; }
.kg-page:not(.kg-product) .kg-offer p { color: #dcd8fe; font-size: 16px; }
.kg-page:not(.kg-product) .kg-offer li { font-size: 15px; }
.kg-page:not(.kg-product) .kg-offer li::before { color: #63e0f8; }

/* FAQ as plain rows */
.kg-page:not(.kg-product) .kg-faq details { border: 0; border-bottom: 1px solid #e3e6f3; border-radius: 0; margin: 0; box-shadow: none; background: transparent; }
.kg-page:not(.kg-product) .kg-faq details[open] { box-shadow: none; border-color: #e3e6f3; }
.kg-page:not(.kg-product) .kg-faq summary { padding: 16px 2px; }
.kg-page:not(.kg-product) .kg-faq summary h3 { font-size: 16.5px; font-weight: 500; color: #0b2654; margin: 0; }
.kg-page:not(.kg-product) .kg-faq summary::after { font-size: 20px; color: #3834a3; }
.kg-page:not(.kg-product) .kg-faq details > p { padding: 0 2px 18px; font-size: 15.5px; line-height: 1.65; color: #4a5370; }

/* Related links and cards */
.kg-page:not(.kg-product) .kg-related a { border-radius: 14px; border-color: #e3e6f3; font-weight: 500; font-size: 15px; }
.kg-page:not(.kg-product) .kg-wide > h2 { font-weight: 600; color: #0b2654; }
.kg-page:not(.kg-product) .kg-cards { gap: 20px; }
.kg-page:not(.kg-product) .kg-card { border-radius: 16px; border-color: #e3e6f3; }
.kg-page:not(.kg-product) .kg-card:hover { border-color: #c9c6f1; box-shadow: 0 14px 34px rgba(33, 38, 102, .1); }
.kg-page:not(.kg-product) .kg-card-kicker { display: inline-block; align-self: flex-start; font-size: 11px; line-height: 1; font-weight: 600; color: #3834a3; background: #e9e9fb; padding: 7px 11px; border-radius: 999px; }
.kg-page:not(.kg-product) .kg-card h3 { font-weight: 600; font-size: 1.05rem; color: #0b2654; }
.kg-page:not(.kg-product) .kg-card p { font-size: 14.5px; color: #5b6280; }
.kg-page:not(.kg-product) .kg-card-more { font-weight: 500; font-size: 14px; color: #3834a3; }

/* Closing band */
.kg-page:not(.kg-product) .kg-close { background: #212666; padding: clamp(44px, 4.6vw, 72px) clamp(20px, 5.2vw, 100px); }
.kg-page:not(.kg-product) .kg-close h2 { font-weight: 600; font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.35; color: #fff; margin: 0 auto 10px; max-width: 820px; }
.kg-page:not(.kg-product) .kg-close p { font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.6; color: #dcd8fe; max-width: 760px; margin: 0 auto 26px; }
.kg-page:not(.kg-product) .kg-close .kg-cta-ghost { border-color: rgba(255, 255, 255, .45); color: #fff; }
.kg-page:not(.kg-product) .kg-close .kg-cta-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.kg-page:not(.kg-product) .kg-close p.kg-cta-note { font-size: 13.5px; color: #b9bfe6; margin: 18px auto 0; }
.kg-page:not(.kg-product) .kg-close .kg-cta-note a { color: #fff; }
@media (max-width: 620px) {
  .kg-page:not(.kg-product) .kg-cta, .kg-page:not(.kg-product) .kg-cta-ghost { justify-content: center; }
}
.kg-page:not(.kg-product) .kg-offer .kg-cta-note { margin-top: 16px; color: #b9bfe6; font-size: 13.5px; line-height: 1.6; }

/* Buy box on the product purchase page (/premium-cloud/). The price is plain
   text in the hero so a crawler reads the same figure as the product feed. */
.kg-page.kg-product .kg-buybox { margin: 0 0 26px; padding: 18px 22px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 16px; background: rgba(255, 255, 255, .06); max-width: 460px; }
.kg-page.kg-product .kg-hero-sl p.kg-price { margin: 0 0 6px; color: #fff; line-height: 1.2; }
.kg-page.kg-product .kg-price-amount { font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 600; color: #fff; }
.kg-page.kg-product .kg-price-unit { font-size: clamp(1rem, 1.2vw, 1.15rem); font-weight: 400; color: #dcd8fe; }
.kg-page.kg-product .kg-hero-sl p.kg-price-note { font-size: 14.5px; line-height: 1.5; color: #dcd8fe; margin: 0 0 10px; }
.kg-page.kg-product .kg-hero-sl p.kg-stock { display: flex; align-items: center; gap: 8px; font-size: 14.5px; line-height: 1.4; font-weight: 500; color: #8ff0d6; margin: 0; }
.kg-page.kg-product .kg-stock span { width: 9px; height: 9px; border-radius: 50%; background: #2ee6b6; }