.dpp-container { text-align:center; max-width:1200px; margin:0 auto; }
.dpp-trial-banner { font-size:1.2em; margin-bottom:10px; }
.dpp-toggle-switch { margin-bottom:20px; }
.dpp-toggle-switch input { display:none; }
.dpp-toggle-switch label { cursor:pointer; }
.dpp-plans { display:flex; justify-content:space-around; flex-wrap:wrap; }
.dpp-plan { border:1px solid #ddd; padding:20px; width:300px; margin:10px; border-radius:5px; }
.dpp-price span { font-size:2em; display:none; }
.dpp-price .dpp-monthly.active, .dpp-price .dpp-yearly.active { display:inline; }
.dpp-btn { display:inline-block; background:#0073aa; color:#fff; padding:10px 20px; text-decoration:none; border-radius:3px; }
.dpp-toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}
.dpp-toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}
.dpp-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.dpp-toggle .slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}
.dpp-toggle .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
.dpp-toggle input:checked + .slider {
  background-color: #0073aa;
}
.dpp-toggle input:checked + .slider:before {
  transform: translateX(26px);
}