.intro {
  max-width: 760px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 17px;
}
.messages { margin-bottom: 24px; }
.message {
  padding: 14px 17px;
  border: 1px solid rgba(33,199,122,.42);
  background: rgba(33,199,122,.12);
  color: #baf3d3;
}
.message.error {
  border-color: rgba(216,111,97,.42);
  background: rgba(216,111,97,.13);
  color: #ffd1ca;
}
.monthly-report {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 58px;
  margin-top: 24px;
  padding: 34px 38px;
  background: linear-gradient(135deg,rgba(17,21,48,.98),rgba(9,12,29,.98));
  border: 1px solid rgba(144,118,255,.32);
  box-shadow: 0 18px 52px rgba(0,0,0,.2);
  overflow: hidden;
}
.monthly-report:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(var(--purple-light),#5ea6ff,var(--green),var(--yellow));
}
.monthly-copy { max-width: 660px; }
.monthly-copy h2 { font-size: 32px; line-height: 1.2; }
.monthly-copy > p:not(.section-kicker) { color: var(--muted); }
.section-kicker {
  margin: 0 0 13px;
  color: var(--purple-light);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.availability {
  padding: 10px 12px;
  border-left: 2px solid var(--yellow);
  background: rgba(239,232,44,.06);
  font-size: 13px;
}
.report-form { align-self: center; }
.report-form label { margin-top: 13px; }
.report-form button.primary { margin-top: 14px; }
.report-form > small { display: block; margin-top: 10px; color: var(--muted); }
.toggle-row { display: flex; align-items: center; gap: 11px; margin: 0 0 14px!important; cursor: pointer; }
.toggle-row input { width: 20px; height: 20px; margin: 0; accent-color: var(--purple); }
.preference-error { max-width: 720px; margin: 0 auto; padding: 38px; }
.preference-error h1 { font-size: 42px; }
.errorlist { padding-left: 20px; color: #ffd1ca; }
@media (max-width: 850px) {
  .monthly-report { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 520px) {
  .monthly-report { padding: 28px 24px 30px 29px; }
  .monthly-copy h2 { font-size: 27px; }
}