.SM-block{margin:2em 0}

.SM-block.tldr {
  border: 2px solid #373D88;
  border-radius: 24px;
  padding: 30px;
  box-shadow: 8px 8px 0 0 #373D88;
}

.SM-block.tldr .tldr-title {
  font-weight: 600;
  color: #2e2b78;
  font-size:1.1em;
  margin-bottom: 10px;
}

.SM-block.quote {
  background-color: #4AA94A1A;
  border: 1px solid #34a8534D;
  border-radius: 14px;
  padding: 30px;
  display: flex;
  gap: 20px;
}

.SM-block.quote .quote-wrapper{
  display: flex;
  flex-direction:column;
  gap: 5px;
}

.SM-block.quote .quote-wrapper .quote-content {
  display:flex;
  flex-direction:column;
}

.SM-block.quote .quote-wrapper .quote-source {
  font-weight: 600;
  color: #34a853;
}

.SM-block.quote .quote-icon svg{
  fill:#34a853;
}

/* If there's no icon, show line */
.SM-block.quote:not(:has(.quote-icon)):before{
  content:'';
  background:#34a853;
  width:2px;
  flex-shrink:0;
  border-radius:2px;
  margin:-10px 0;
}
.SM-block.quote:not(:has(.quote-icon)){
  padding-left:20px;
}

.SM-block.infobox{
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 30px;
  border-radius: 14px;
}

.SM-block.infobox .infobox-wrapper{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.SM-block.infobox .infobox-wrapper .infobox-title {
  font-weight: 600;
  font-size:1.1em;
}

.SM-block.infobox.color--blue{
  background-color: #F2F3FD;
  border: 1px solid #C1C5EC;
}

.SM-block.infobox.color--blue .infobox-icon svg{
  fill:#323880;
}

.SM-block.infobox.color--yellow{
  background-color: #FFBD021A;
  border: 1px solid #FFBD0280;
}

.SM-block.infobox.color--yellow .infobox-icon svg{
  fill:#FFBD02;
}

.SM-block.infobox.color--green{
  background-color: #4AA94A1A;
  border: 1px solid #4AA94A4D;
}

.SM-block.infobox.color--green .infobox-icon svg{
  fill:#4AA94A;
}


.SM-block.cta{
  color:#fff;
  padding:30px;
  position:relative;
}

.SM-block.cta:before,
.SM-block.cta:after{
  border-radius:24px;
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

.SM-block.cta:after{
  content:'';
  background:#F2F3FD;
  transform: rotate(2deg);
  transform-origin: bottom right;
  z-index:1;
}

.SM-block.cta:before{
  transform:skewY(-2deg);
  background-image:linear-gradient(90deg,#272C6D,#373D88);
  z-index:2;
}

.SM-block.cta .cta-wrapper{
  display:flex;
  align-items:center;
  gap:30px;
  z-index:3;
  position:relative;
}

.SM-block.cta:has(img){
  padding:15px 15px 15px 30px;
}

.SM-block.cta img{
	border:none;
}

.SM-block.cta .cta-wrapper .cta-image-link{
  flex-shrink:0;
}

.SM-block.cta .cta-wrapper .cta-content .cta-title{
  font-weight:700;
  font-size:36px;
  line-height:1.1em;
}
.SM-block.cta .cta-wrapper .cta-content .cta-description{
  margin:10px 0 20px 0;
  font-size: 16px;
  line-height:1.3em;
}
.SM-block.cta .cta-wrapper .cta-content a.cta-button{
  display:inline-flex;
  color:#fff;
  font-weight:600;
  background:#4AA94A;
  padding:10px;
  border-radius:100px;
}
.SM-block.cta .cta-wrapper .cta-content a.cta-button:hover{
  background:#439843;
}
.SM-block.cta .cta-wrapper .cta-content a.cta-button span{
  margin:0 20px;
}

.SM-block.faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Each FAQ item */
.faq-item {
  border: 1px solid #DFDFDF;
  border-radius: 14px;
  overflow: hidden;
  transition: border 0.3s ease;
}
.faq-item:hover {border: 1px solid #00000080;}
.faq-item[open] {border: 1px solid #000;}

/* Summary styling */
.faq-item summary {
  padding: 20px 24px;
  font-weight: 500;
  line-height: 1.4;
  color: #2A2623;
  cursor: pointer;
  display: flex;
  gap:20px;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

/* Remove default disclosure arrow */
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::marker {
  display: none;
}

/* Arrow icon */
.faq-item summary::after {
  content: '';
  background-image: url('data:image/svg+xml;utf8,<svg width="22" height="12" viewBox="0 0 22 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 1L11 11L1 1" stroke="%232A2623"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 12px;
  width: 22px;
  height: 12px;
  transition: transform 0.3s ease;
  flex-shrink:0;
}

/* Rotate arrow when open */
.faq-item[open] summary::after {
  transform: rotate(180deg);
}

/* Answer block */
.faq-answer {
  padding: 0 24px 20px;
  font-size: 18px;
  line-height: 1.6;
}

/* Styled Lists */
ol.SM-styled-list{
  counter-reset: number;
  list-style: none;
  margin-left:0;
}

ol.SM-styled-list li {
  position: relative;
  padding-left: 40px;
}

ol.SM-styled-list li::before {
  counter-increment: number;
  content: counter(number);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  line-height: 26px;
  background: #4AA94A;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  border-radius: 8px;
  font-family: system-ui, sans-serif;
}

/* Tablet */
@media screen and (max-width: 1024px) {
  .SM-block.tldr {
    padding: 20px;
  }
  .SM-block.quote {
    padding: 20px;
  }
  .SM-block.quote .quote-icon svg{
    width:24px;
  }
  .SM-block.infobox {
    padding: 20px;
  }
  .SM-block.infobox .infobox-icon svg{
    width:24px;
  }
  .SM-block.cta .cta-wrapper {
    flex-direction:column;
    gap:20px;
  }
  .SM-block.cta .cta-wrapper .cta-content .cta-title{
    font-size:30px;
  }
  .SM-block.cta:has(img){
    padding:20px;
  }
  .SM-block.cta .cta-wrapper .cta-image-link{
    margin-top:0!important;
  }
  .SM-block .faq-item summary {
    padding: 20px 22px;
    gap:10px;
  }
}
@media screen and (max-width: 767px) {
  
}