html, body {  
  margin: 0;  
  padding: 0;  
  font-family: 'Schroders Sans', Arial, Helvetica, sans-serif;  
  background: #fff;  
  color: #001e41;  
}  
.risk-summary-bar {  
  border: 1px solid rgb(154, 168, 180);  
  border-radius: 14px;  
  box-sizing: border-box;  
  width: 100%;  
  margin: 0;  
  padding: 20px;  
  background: #fff;  
}  
  
.risk-summary-heading {  
  margin-top: 0;  
  margin-bottom: 18px;  
  font-size: 1.3rem;  
  font-weight: 700;  
}  
.risk-summary-bar p {  
  font-size: 1.12rem;  
  line-height: 1.5;  
  margin-bottom: 12px;  
}  
.risk-summary-link {  
  color: #005eaa;  
  font-weight: 700;  
  text-decoration: underline;  
  cursor: pointer;  
  background: none;  
  border: none;  
  padding: 0;  
  font-family: inherit;  
  font-size: inherit;  
}  
  
.modal-overlay {  
  display: none;  
  position: fixed;  
  z-index: 10000;  
  left: 0; top: 0;  
  width: 100vw;  
  height: 100vh;  
  background: rgba(0,0,0,0.6);  
  overflow: auto;  
}  
  
/* --- MODAL DESIGN --- */  
.modal-dialogue {  
  background: #fff;  
  border: 1px solid rgb(154, 168, 180);  
  border-radius: 14px;  
  margin: 4vh auto;  
  width: 80vw;  
  min-width: 320px;  
  max-width: 1300px;  
  padding: 40px;  
  box-sizing: border-box;  
  position: relative;  
  overflow-y: auto;  
  box-shadow: 0 2px 16px rgba(0,0,0,0.14);  
  font-family: 'Schroders Sans', Arial, Helvetica, sans-serif;  
  color: #001e41;  
  font-size: 18px;  
  line-height: 1.5;  
}  
  
.modal-title {  
  font-size: 1.56em;  
  font-weight: 700;  
  margin-top: 0;  
  margin-bottom: 0.5em;  
  color: #001e41;  
}  
  
.reading-time {  
  color: #4c5c6d;  
  font-size: 1em;  
  margin-bottom: 1.15em;  
  margin-top: -0.3em;  
  font-weight: 500;  
}  
  
.modal-warning {  
  background: #faf6e5;  
  border-left: 4px solid #ffe082;  
  padding: 12px 18px;  
  margin-bottom: 1.8em;  
  font-weight: 600;  
  font-size: 1em;  
}  
  
.modal-subtitle {  
  font-size: 1.13em;  
  margin-bottom: 1.1em;  
  margin-top: 2.1em;  
  font-weight: 700;  
  color: #001e41;  
}  
  
.risk-point {  
  margin-bottom: 2.1em;  
}  
  
.risk-point-title {  
  margin-bottom: 0.8em;  
  font-weight: 600;  
  font-size: 1.02em;  
  color: #001e41;  
}  
  
.risk-point ul, .risk-point li ul {  
  padding-left: 1.1em;  
  margin-top: 0.2em;  
  margin-bottom: 0.2em;  
  font-size: inherit;  
}  
  
.risk-point ul li {  
  margin-bottom: 0.65em;  
  font-weight: 400;  
}  
  
.risk-point ul ul {  
  margin-bottom: 0.2em;  
  margin-top: 0.15em;  
}  
  
.risk-link {  
  margin-top: 2.3em;  
  font-size: 1em;  
}  
  
.modal-dialogue a {  
  color: #005eaa;  
  text-decoration: underline;  
}  
  
.modal-close {  
  position: absolute;  
  top: 18px;  
  right: 22px;  
  font-size: 26px;  
  background: none;  
  border: none;  
  color: #001e41;  
  cursor: pointer;  
  padding: 0;  
  line-height: 1;  
  width: 32px;  
  height: 32px;  
  text-align: right;  
  z-index: 3;  
  transition: color 0.15s;  
}  
.modal-close:hover, .modal-close:focus {  
  color: #005eaa;  
}  
  
/* Simple scrollbar styling */  
.modal-dialogue::-webkit-scrollbar {  
  width: 8px;  
}  
.modal-dialogue::-webkit-scrollbar-thumb {  
  background: #c7d1df;  
  border-radius: 4px;  
}  
  
@media (max-width: 1100px) {  
  .modal-dialogue {  
    width: 90vw;  
    max-width: 99vw;  
    padding: 25px;  
  }  
}  
@media (max-width: 600px) {  
  .risk-summary-bar {  
    border-radius: 14px;  
    padding: 20px;  
    font-size: 1em;  
  }  
  .modal-dialogue {  
    border-radius: 14px;  
    width: 90vw;  
    margin: 2vh auto;  
    min-width: 0;  
    padding: 15px;  
    font-size: 1em;  
    max-height: 96vh;  
  }  
  .modal-title {  
    font-size: 1.05em;  
  }  
  .modal-close {  
    top: 13px;  
    right: 12px;  
    font-size: 20px;  
  }  
}