* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Arial, Helvetica, sans-serif;
  background: #f7f7f7;
  color: #222;
  line-height: 1.45;
}
.page-wrap { padding: 22px 14px 35px; }
.enrollment-card {
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  padding: 22px 28px 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.brand { text-align: center; }
.logo { width: 135px; height: 135px; display: block; object-fit: contain; margin: 0 auto 8px; }
h1 { font-size: 28px; margin: 0 0 18px; font-weight: 700; }
.instructions {
  border-left: 3px solid #222;
  padding: 4px 0 4px 14px;
  margin: 0 0 22px;
  font-size: 15px;
}
.instructions p { margin: 0 0 10px; }
.instructions p:last-child { margin-bottom: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.field { min-width: 0; }
.full-width { grid-column: 1 / -1; }
label, legend { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
label span, legend span { color: #b00020; }
label em { font-weight: 400; font-style: normal; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea, input[type="file"] {
  width: 100%;
  font: inherit;
  border: 1px solid #cfcfcf;
  border-radius: 5px;
  background: #fff;
  padding: 10px 11px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(0,0,0,.12); border-color: #888; }
textarea { resize: vertical; min-height: 82px; }
small { display: block; margin-top: 5px; color: #666; font-size: 12px; }
.payment-method { border: 0; padding: 0; margin: 0; }
.payment-method legend { padding: 0; }
.radio { display: inline-flex; align-items: center; gap: 7px; margin: 4px 24px 0 0; font-weight: 400; }
.radio input { margin: 0; }
.submit-btn {
  display: block;
  margin: 22px auto 0;
  border: 0;
  border-radius: 5px;
  background: #222;
  color: #fff;
  font: inherit;
  font-weight: 700;
  padding: 11px 28px;
  cursor: pointer;
}
.submit-btn:hover { background: #444; }
@media (max-width: 650px) {
  .page-wrap { padding: 12px 8px 24px; }
  .enrollment-card { padding: 17px 16px 22px; border-radius: 6px; }
  .logo { width: 120px; height: 120px; }
  h1 { font-size: 24px; margin-bottom: 15px; }
  .instructions { font-size: 14px; padding-left: 11px; margin-bottom: 18px; }
  .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .full-width { grid-column: auto; }
  .radio { display: flex; margin-right: 0; }
}