*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Lato',sans-serif;
  background:#f0f4f8;
  color:#334155;
  line-height:1.75;
  padding:18px;
}

.wrap{
  max-width:890px;
  margin:0 auto;
  background:#fff;
  border-radius:13px;
  box-shadow:0 10px 38px rgba(0,0,0,0.11);
}

.top{
  background:linear-gradient(to right,#6366f1,#8b5cf6);
  padding:57px 37px;
  text-align:center;
  border-radius:13px 13px 0 0;
}

h1{
  font-size:2.68em;
  color:#fff;
  font-weight:800;
  line-height:1.25;
}

.main{
  padding:43px 37px;
}

.lead{
  background:#f1f5f9;
  padding:27px;
  border-radius:10px;
  margin-bottom:33px;
  border-left:5px solid #6366f1;
}

.lead p{
  font-size:1.11em;
  color:#475569;
}

.block{
  margin-bottom:27px;
  padding:23px;
  background:#fafafa;
  border-radius:9px;
  border:1px solid #e2e8f0;
}

.block p{
  color:#475569;
  font-size:1.05em;
}

.link{
  color:#6366f1;
  text-decoration:none;
  font-weight:600;
}

.link:hover{
  text-decoration:underline;
}

.special{
  background:linear-gradient(to right,#6366f1,#8b5cf6);
  padding:28px;
  border-radius:12px;
  margin:38px 0;
  box-shadow:0 8px 26px rgba(99,102,241,0.3);
}

.special p{
  color:#fff;
  font-size:1.07em;
  font-weight:500;
}

.special a{
  color:#fff;
  text-decoration:underline;
  font-weight:700;
}

.special a:hover{
  color:#e0e7ff;
}

.end{
  text-align:center;
  padding:28px;
  color:#64748b;
  font-size:0.95em;
  border-top:2px solid #e2e8f0;
}

@media(max-width:768px){
  body{
    padding:10px;
  }
  
  .top{
    padding:38px 24px;
  }
  
  h1{
    font-size:2.1em;
  }
  
  .main{
    padding:28px 24px;
  }
  
  .lead,.block,.special{
    padding:20px;
  }
}