/* Editorial companion to the ISO 20022 implementation service. */
.insight-page { --insight-line: #29404d; --insight-muted: #a5bac6; }
.insight-page .navigation { gap: 25px; }
.insight-page .navigation > a { min-height: 44px; }
.insight-hero { padding-block: 45px 54px; border-bottom: 1px solid var(--insight-line); }
.insight-hero .iso-breadcrumb { margin-bottom: 35px; }
.insight-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 75px; align-items: end; }
.insight-hero h1 { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.1; max-width: 20ch; margin-top: 22px; text-wrap: balance; }
.insight-lead { color: #b3c9d3; font-size: 16px; line-height: 1.9; max-width: 730px; margin-top: 25px; }
.insight-meta { color: #93adbc; font-size: 11px; display: flex; flex-wrap: wrap; gap: 9px 22px; margin-top: 27px; }
.insight-fieldnote { border-top: 1px solid #456571; border-bottom: 1px solid var(--insight-line); padding-block: 25px; }
.insight-fieldnote > span { color: #a5bac6; font: 9px/1.8 var(--mono); }
.insight-fieldnote strong { display: block; font: 500 27px/1.3 var(--heading); color: #c4eef2; margin-block: 20px 15px; }
.insight-fieldnote p { color: #a5bac6; font-size: 12px; line-height: 1.9; }
.insight-layout { display: grid; grid-template-columns: 230px minmax(0, 790px); gap: 80px; align-items: start; padding-block: 60px 80px; }
.insight-toc { position: sticky; top: 125px; border-left: 1px solid var(--insight-line); padding-left: 22px; }
.insight-toc h2 { font: 10px/1.8 var(--mono); margin-bottom: 18px; color: #9ab6c5; letter-spacing: normal; }
.insight-toc ol { padding: 0; margin: 0; list-style: none; }
.insight-toc a { display: inline-block; font-size: 12px; line-height: 1.7; color: #b6cbd5; padding-block: 8px; }
.insight-toc a:hover { color: var(--mint); }
.insight-content { min-width: 0; }
.insight-content section { margin-bottom: 46px; }
.insight-content h2 { font-size: clamp(26px, 2.8vw, 35px); line-height: 1.25; letter-spacing: normal; margin-bottom: 22px; }
.insight-content h3 { font-size: 20px; line-height: 1.4; margin-block: 28px 15px; }
.insight-content p, .insight-content li { color: #afc3cf; font-size: 14px; line-height: 1.95; }
.insight-content p + p { margin-top: 18px; }
.insight-content strong { color: #e0edf3; font-weight: 600; }
.insight-content ul, .insight-content ol { padding-left: 22px; margin-block: 20px; }
.insight-content li { padding-left: 4px; margin-bottom: 10px; }
.insight-content a:not(.button) { color: #c5edf1; text-decoration: underline; text-underline-offset: 4px; }
.insight-content code { color: #c2e7ee; font: 12px/1.8 var(--mono); overflow-wrap: anywhere; }
.insight-callout { border-left: 2px solid #72b9c4; padding: 22px 25px; background: #101f29; margin-block: 25px; }
.insight-callout > .insight-note-label { display: block; color: #bcecf0; font: 9px/1.7 var(--mono); margin-bottom: 12px; }
.insight-callout p { font-size: 13px; }
.insight-table-wrap { overflow-x: auto; border: 1px solid var(--insight-line); border-radius: 4px; margin-block: 25px; }
.insight-content table { border-collapse: collapse; width: 100%; font-size: 12px; line-height: 1.8; }
.insight-content caption { padding: 16px 20px; text-align: left; color: #a8c6d1; font-size: 10px; background: #101f29; }
.insight-content th, .insight-content td { text-align: left; vertical-align: top; padding: 16px 20px; border-top: 1px solid var(--insight-line); }
.insight-content th { color: #e0edf3; font-weight: 600; background: #0b1720; }
.insight-content td { color: #a9c1cd; }
.insight-content td + td, .insight-content th + th { border-left: 1px solid var(--insight-line); }
.insight-content pre { max-width: 100%; overflow-x: auto; margin-block: 22px; padding: 22px; border: 1px solid var(--insight-line); background: #0b1720; border-radius: 4px; }
.insight-content pre code { display: block; font-size: 11px; line-height: 1.9; white-space: pre; overflow-wrap: normal; }
.insight-content .insight-example-caption { color: #91acba; font-size: 11px; line-height: 1.8; }
.insight-sources { border-top: 1px solid var(--insight-line); padding-top: 35px; }
.insight-sources h2 { font-size: 24px; }
.insight-sources p, .insight-sources li { font-size: 12px; }
.insight-related { border-top: 1px solid var(--insight-line); padding-block: 55px 65px; }
.insight-related h2 { font-size: 32px; letter-spacing: normal; }
.insight-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; margin-top: 30px; }
.insight-related-grid > a { border-top: 1px solid #42606f; padding-top: 23px; display: block; }
.insight-related-grid span { color: var(--mint); font: 10px/1.8 var(--mono); }
.insight-related-grid h3 { font-size: 23px; line-height: 1.35; margin-block: 15px 12px; }
.insight-related-grid p { color: #a5bac6; font-size: 13px; max-width: 500px; }
.insight-related-grid a:hover h3 { color: #bcecf0; }
.insight-contact { display: flex; align-items: center; justify-content: space-between; gap: 35px; padding: 35px; margin-bottom: 70px; border: 1px solid #355561; border-radius: 6px; background: #101f29; }
.insight-contact h2 { font-size: 30px; letter-spacing: normal; line-height: 1.3; margin-bottom: 12px; }
.insight-contact p { color: #a5bac6; font-size: 13px; max-width: 570px; }
.insight-page .footer-links { gap: 16px 22px; }
@media (max-width: 1100px) {
  .insight-hero-grid { grid-template-columns: minmax(0, 1fr) 220px; gap: 40px; }
  .insight-layout { grid-template-columns: 185px minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 900px) {
  .insight-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  .insight-fieldnote { max-width: 500px; }
  .insight-fieldnote strong { margin-block: 14px 12px; }
  .insight-layout { grid-template-columns: minmax(0, 1fr); gap: 45px; padding-top: 40px; }
  .insight-toc { position: static; }
  .insight-toc ol { display: flex; flex-wrap: wrap; gap: 0 25px; }
  .insight-contact { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 680px) {
  .insight-page .navigation { flex-wrap: wrap; gap: 5px 15px; justify-content: flex-start; }
  .insight-hero { padding-block: 30px 35px; }
  .insight-hero h1 { font-size: clamp(34px, 8.8vw, 51px); }
  .insight-hero .iso-breadcrumb { margin-bottom: 28px; font-size: 10px; gap: 7px 10px; }
  .insight-lead { font-size: 14px; line-height: 1.9; }
  .insight-meta { font-size: 10px; gap: 7px 16px; }
  .insight-fieldnote { padding-block: 20px; }
  .insight-fieldnote strong { font-size: 24px; }
  .insight-layout { gap: 35px; padding-block: 35px 30px; }
  .insight-toc { padding-left: 17px; }
  .insight-toc ol { display: block; }
  .insight-toc a { font-size: 12px; padding-block: 7px; }
  .insight-content h2 { font-size: 27px; }
  .insight-content h3 { font-size: 20px; }
  .insight-content p, .insight-content li { font-size: 13px; }
  .insight-content section { margin-bottom: 35px; }
  .insight-content code { font-size: 11px; }
  .insight-callout { padding: 20px; }
  .insight-content th, .insight-content td { padding: 12px; }
  .insight-content table { min-width: 390px; }
  .insight-content pre { padding: 17px; }
  .insight-related { padding-block: 35px 45px; }
  .insight-related h2 { font-size: 29px; }
  .insight-related-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .insight-related-grid h3 { font-size: 23px; }
  .insight-contact { padding: 25px; margin-bottom: 55px; gap: 25px; }
  .insight-contact h2 { font-size: 28px; }
}