/* Editable chapter 04, composed to match the user's supplied reference. */
.insight-reference { position: relative; isolation: isolate; overflow: hidden; padding: 34px 0 23px; color: #090e25; background: radial-gradient(ellipse at 70% 36%, #e5f0ff 0, transparent 53%), linear-gradient(130deg, #f7fbff, #f0f7ff 55%, #f8fbff); }
.insight-reference::before, .insight-reference::after { content: ''; position: absolute; z-index: -1; pointer-events: none; border: 1px solid #ffffffc7; border-radius: 50%; }
.insight-reference::before { width: 540px; height: 390px; top: -210px; right: -175px; background: #e1eeff88; box-shadow: -80px 100px 0 0 #cfe2ff40; transform: rotate(28deg); }
.insight-reference::after { width: 670px; height: 240px; top: 350px; left: -155px; background: #dceaff66; transform: rotate(-22deg); box-shadow: 410px 155px 0 8px #ffffff99; }
.insight-reference .insight-shell { width: 90.4%; max-width: 1808px; margin-inline: auto; }
.insight-reference .insight-reference-layout { display: grid; grid-template-columns: 43.5% minmax(0, 1fr); gap: 2%; align-items: start; }
.insight-reference .insight-editorial { min-width: 0; padding: 8px 0 0 12px; }
.insight-reference .insight-kicker { color: #4b638f; font-size: 13px; line-height: 1.7; letter-spacing: .16em; font-weight: 500; }
.insight-reference h2 { margin-top: 27px; max-width: none; font-size: clamp(36px, 3.6vw, 68px); line-height: 1.3; letter-spacing: -.03em; font-weight: 700; text-wrap: initial; }
.insight-reference h2 > span { display: block; }
.insight-reference .insight-intro { margin-top: 23px; color: #566d98; font-size: clamp(17px, 1.22vw, 23px); line-height: 1.63; text-wrap: initial; }
.insight-reference .insight-quote { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12px; margin: 18px 0 0 -4px; padding: 10px 23px; border: 1px solid #fff; border-radius: 999px; color: #344d80; background: #ffffffa6; box-shadow: 0 8px 18px #d8e6f94d; font-size: clamp(16px, 1.08vw, 20px); line-height: 1.75; font-weight: 500; }
.insight-reference .insight-quote::before { content: '“'; height: 30px; color: #7da6ff; font: 46px/1 Georgia, serif; }
.insight-reference .insight-concept { position: relative; width: calc(100% + 30px); margin: -36px 0 0 -28px; }
.insight-reference .insight-concept > svg { display: block; width: 100%; height: auto; overflow: visible; }
.insight-reference .insight-concept figcaption { position: absolute; left: 24px; bottom: 7px; color: #5b7198; font-size: 10px; line-height: 1.6; }
.insight-reference .insight-phrase { white-space: nowrap; }
.insight-reference .insight-framework { min-width: 0; padding: 21px 22px 29px 32px; border: 1px solid #fff; border-radius: 20px; background: linear-gradient(135deg, #ffffffd9, #ffffff70); box-shadow: 0 15px 36px #c8dbf326; }
.insight-reference .insight-framework-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.insight-reference .insight-framework-header h3 { margin: 0; font-size: clamp(21px, 1.5vw, 29px); font-weight: 700; line-height: 1.45; }
.insight-reference .insight-framework-header p { margin: 0; color: #6076a1; font-size: clamp(13px, .95vw, 18px); line-height: 1.6; }
.insight-reference .insight-stages { display: grid; gap: 12px; margin-left: 38px; }
.insight-reference .insight-stage { position: relative; display: grid; grid-template-columns: 60px 30px 152px minmax(0, 1fr); gap: 28px; align-items: center; min-height: clamp(82px, 5.25vw, 105px); padding: 11px 18px; border: 1px solid #e5eeff; border-radius: 17px; background: #ffffffb3; box-shadow: 0 6px 14px #d4e3f826; }
.insight-reference .insight-path { position: absolute; top: 32px; left: -37px; bottom: -30px; width: 16px; display: flex; flex-direction: column; align-items: center; }
.insight-reference .insight-path i { flex: 0 0 auto; display: block; width: 11px; height: 11px; border: 1px solid #fff; border-radius: 50%; background: #5a8eff; }
.insight-reference .insight-path svg { margin-top: 4px; width: 14px; height: calc(100% - 14px); color: #759eff; }
.insight-reference .insight-icon { display: grid; place-items: center; flex: 0 0 auto; width: 60px; height: 60px; border-radius: 16px; color: #3671ff; background: linear-gradient(140deg, #eff5ff, #e4efff); box-shadow: 0 7px 12px #cddffc52; }
.insight-reference .insight-icon svg { width: 34px; height: 34px; }
.insight-reference .insight-number { color: #4679d9; font-size: 19px; line-height: 1.5; font-weight: 500; font-variant-numeric: tabular-nums; }
.insight-reference .insight-stage-label { min-width: 0; }
.insight-reference .insight-stage-label p { color: #5c74a2; font-size: clamp(11px, .77vw, 14px); line-height: 1.6; letter-spacing: .025em; }
.insight-reference .insight-stage-label h4 { margin-top: 1px; color: #0a112b; font-size: clamp(17px, 1.15vw, 22px); font-weight: 700; line-height: 1.5; white-space: nowrap; }
.insight-reference .insight-stage-copy { min-width: 0; margin: 0; padding-left: 24px; border-left: 1px solid #d9e5fa; color: #5c729b; font-size: clamp(14px, .96vw, 18px); line-height: 1.65; text-wrap: initial; }
.insight-reference .insight-stage-human { min-height: clamp(88px, 5.5vw, 110px); border-color: #7ea4ff; background: linear-gradient(120deg, #edf4ffdd, #e6f0ffb3); box-shadow: 0 5px 16px #d5e5ff4d, inset 0 0 0 2px #ffffff80; }
.insight-reference .insight-stage-human .insight-stage-label p, .insight-reference .insight-stage-human .insight-number { color: #2966da; }
.insight-reference .insight-stage-human .insight-path i { width: 13px; height: 13px; background: #4c84ff; }
.insight-reference .insight-outcomes { display: grid; grid-template-columns: 65% minmax(0, 1fr); gap: 4%; align-items: center; margin-top: 27px; padding-top: 28px; border-top: 1px solid #d3e2f8; }
.insight-reference .insight-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-left: 8px; }
.insight-reference .insight-values li { position: relative; display: flex; align-items: center; gap: 24px; min-width: 0; min-height: 110px; padding: 17px 25px 17px 30px; border: 1px solid #fff; border-radius: 17px; background: #ffffffb3; box-shadow: 0 10px 28px #d7e5f733; }
.insight-reference .insight-values li:not(:last-child)::after { content: ''; position: absolute; top: 35%; bottom: 35%; left: calc(100% + 20px); width: 1px; background: #bbd2f9; }
.insight-reference .insight-values .insight-icon { width: 64px; height: 64px; }
.insight-reference .insight-values .insight-icon svg { width: 39px; height: 39px; }
.insight-reference .insight-values h3 { margin: 0; color: #11172b; font-size: clamp(18px, 1.2vw, 23px); font-weight: 700; line-height: 1.5; white-space: nowrap; }
.insight-reference .insight-values p { margin-top: 4px; color: #5b729d; font-size: clamp(14px, .99vw, 18px); line-height: 1.6; white-space: nowrap; }
.insight-reference .insight-principle { position: relative; padding-left: 68px; border-left: 1px solid #c4d9fa; }
.insight-reference .insight-principle > p:first-child { color: #101729; font-size: clamp(21px, 1.6vw, 30px); font-weight: 500; line-height: 1.5; letter-spacing: -.015em; white-space: nowrap; }
.insight-reference .insight-echo { margin-top: 7px; color: #879fc7; font-size: 10px; line-height: 1.6; letter-spacing: .13em; white-space: nowrap; }
.insight-reference .insight-page-footer { display: flex; justify-content: space-between; gap: 24px; margin-top: 30px; color: #8aa2c8; font-size: 11px; line-height: 1.6; letter-spacing: .12em; }
.insight-reference .insight-page-footer span:last-child { display: flex; align-items: center; gap: 13px; color: #617da9; }
.insight-reference .insight-page-footer span:last-child::before { content: ''; width: 94px; height: 1px; background: #b8d0f5; }
@media (min-width: 1151px) { .insight-reference .insight-concept { margin-bottom: -27px; } }
@media (max-width: 1500px) {
  .insight-reference .insight-framework { padding-left: 24px; padding-right: 18px; }
  .insight-reference .insight-framework-header { align-items: baseline; gap: 12px; }
  .insight-reference .insight-framework-header h3 { font-size: 21px; }
  .insight-reference .insight-framework-header p { font-size: 12px; }
  .insight-reference .insight-stages { margin-left: 28px; }
  .insight-reference .insight-stage { grid-template-columns: 48px 23px 124px minmax(0, 1fr); gap: 16px; padding-inline: 13px; }
  .insight-reference .insight-path { left: -28px; }
  .insight-reference .insight-stage-copy { padding-left: 16px; }
  .insight-reference .insight-icon { width: 48px; height: 52px; border-radius: 13px; }
  .insight-reference .insight-icon svg { width: 29px; height: 29px; }
  .insight-reference .insight-outcomes { grid-template-columns: 65% minmax(0, 1fr); gap: 3%; }
  .insight-reference .insight-values { gap: 25px; padding-left: 0; }
  .insight-reference .insight-values li { gap: 15px; padding-inline: 18px; min-height: 98px; }
  .insight-reference .insight-values li:not(:last-child)::after { left: calc(100% + 13px); }
  .insight-reference .insight-values .insight-icon { width: 52px; height: 55px; }
  .insight-reference .insight-values .insight-icon svg { width: 32px; height: 32px; }
  .insight-reference .insight-principle { padding-left: 28px; }
  .insight-reference .insight-principle > p:first-child { font-size: 21px; }
  .insight-reference .insight-echo { font-size: 8px; }
}
@media (max-width: 1150px) {
  .insight-reference { padding-top: 36px; }
  .insight-reference .insight-shell { width: calc(100% - 64px); }
  .insight-reference .insight-reference-layout { grid-template-columns: 1fr; gap: 28px; }
  .insight-reference .insight-editorial { padding: 0; }
  .insight-reference h2 { font-size: clamp(40px, 5.4vw, 56px); }
  .insight-reference .insight-intro { font-size: 19px; }
  .insight-reference .insight-concept { max-width: 660px; margin-top: -30px; margin-left: 0; }
  .insight-reference .insight-framework { padding: 24px 25px 26px; }
  .insight-reference .insight-framework-header h3 { font-size: 24px; }
  .insight-reference .insight-framework-header p { font-size: 14px; }
  .insight-reference .insight-stage { grid-template-columns: 54px 26px 142px minmax(0, 1fr); gap: 20px; min-height: 88px; }
  .insight-reference .insight-stage-copy { font-size: 15px; padding-left: 18px; }
  .insight-reference .insight-stage-label h4 { font-size: 19px; }
  .insight-reference .insight-stage-label p { font-size: 12px; }
  .insight-reference .insight-stage-human { min-height: 94px; }
  .insight-reference .insight-outcomes { grid-template-columns: 1fr; gap: 30px; }
  .insight-reference .insight-values li { justify-content: center; }
  .insight-reference .insight-principle { padding-left: 25px; }
  .insight-reference .insight-principle > p:first-child { font-size: 25px; white-space: normal; }
  .insight-reference .insight-echo { font-size: 10px; }
}
@media (max-width: 700px) {
  .insight-reference { padding: 30px 0 22px; }
  .insight-reference .insight-shell { width: calc(100% - 40px); }
  .insight-reference .insight-kicker { font-size: 12px; }
  .insight-reference h2 { font-size: clamp(25px, 7.25vw, 42px); margin-top: 22px; line-height: 1.4; }
  .insight-reference .insight-intro { font-size: 15px; line-height: 1.8; margin-top: 22px; }
  .insight-reference .insight-intro br { display: none; }
  .insight-reference .insight-quote { padding: 8px 14px; gap: 7px; margin-top: 17px; font-size: 14px; line-height: 1.7; }
  .insight-reference .insight-quote::before { font-size: 38px; height: 26px; }
  .insight-reference .insight-concept { margin-top: 4px; width: 100%; padding-bottom: 20px; }
  .insight-reference .insight-concept figcaption { left: 0; font-size: 9px; }
  .insight-reference .insight-reference-layout { gap: 24px; }
  .insight-reference .insight-framework { padding: 21px 14px 20px; border-radius: 17px; }
  .insight-reference .insight-framework-header { display: block; margin-bottom: 19px; }
  .insight-reference .insight-framework-header h3 { font-size: 21px; }
  .insight-reference .insight-framework-header p { margin-top: 5px; font-size: 13px; }
  .insight-reference .insight-stages { margin-left: 19px; gap: 14px; }
  .insight-reference .insight-stage { grid-template-columns: 43px minmax(0, 1fr); gap: 12px 13px; padding: 16px 14px; min-height: 0; border-radius: 14px; }
  .insight-reference .insight-icon { width: 43px; height: 46px; border-radius: 12px; }
  .insight-reference .insight-icon svg { width: 27px; height: 27px; }
  .insight-reference .insight-number { position: absolute; top: 8px; right: 11px; font-size: 11px; font-weight: 400; }
  .insight-reference .insight-stage-label { padding-top: 5px; }
  .insight-reference .insight-stage-label p { font-size: 10px; }
  .insight-reference .insight-stage-label h4 { font-size: 16px; white-space: normal; }
  .insight-reference .insight-stage-copy { grid-column: 1 / -1; padding: 11px 0 0; border-left: 0; border-top: 1px solid #d9e5fa; font-size: 14px; line-height: 1.7; }
  .insight-reference .insight-stage-copy br { display: none; }
  .insight-reference .insight-path { left: -21px; top: 33px; bottom: -30px; width: 13px; }
  .insight-reference .insight-path i { width: 9px; height: 9px; }
  .insight-reference .insight-path svg { width: 11px; }
  .insight-reference .insight-stage-human .insight-path i { width: 11px; height: 11px; }
  .insight-reference .insight-outcomes { margin-top: 26px; padding-top: 24px; gap: 26px; }
  .insight-reference .insight-values { grid-template-columns: 1fr; gap: 14px; }
  .insight-reference .insight-values li { justify-content: flex-start; min-height: 88px; padding: 16px 20px; gap: 22px; }
  .insight-reference .insight-values li:not(:last-child)::after { display: none; }
  .insight-reference .insight-values h3 { font-size: 19px; }
  .insight-reference .insight-values p { font-size: 15px; }
  .insight-reference .insight-principle { padding-left: 16px; }
  .insight-reference .insight-principle > p:first-child { font-size: clamp(17px, 4.5vw, 23px); line-height: 1.7; }
  .insight-reference .insight-echo { font-size: 8px; letter-spacing: .06em; white-space: normal; }
  .insight-reference .insight-page-footer { margin-top: 27px; font-size: 8px; letter-spacing: .06em; }
  .insight-reference .insight-page-footer span:last-child { gap: 8px; }
  .insight-reference .insight-page-footer span:last-child::before { width: 32px; }
}