/* Sponsorship page (/sponsor): the two opportunities and the one form. Old-device rules as in site.css: no `inset`, no
   flex gap for layout, no :has(); the essay / class parts of the form switch with plain radio + sibling selectors. */

.sp-offers{display:grid;grid-template-columns:1fr 1fr;grid-gap:28px;gap:28px;max-width:980px;margin:0 auto}
.sp-offer{text-align:center;padding:32px 30px 28px}
.sp-offer h2{font-size:30px;margin:6px 0 12px}
.sp-offer p{margin:0 0 20px}
.sp-ic{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:var(--navy);color:var(--gold-2)}
.sp-ic .ic{width:26px;height:26px}

.sp-form h2{margin-bottom:18px}
.sp-switch{margin:4px 0 6px}
.sp-legend{display:block;font-size:15px;font-weight:600;letter-spacing:.06em;color:var(--muted);margin:0 0 8px;text-transform:uppercase}
.sp-legend.sp-pref{margin-top:14px}
.form .sp-switch input[type=radio]{width:20px;height:20px;margin:0 8px 0 0;padding:0;vertical-align:middle;-webkit-appearance:radio;appearance:auto}
.form .sp-choice{display:inline-block;vertical-align:middle;margin:0 28px 10px 0;font-size:19px;cursor:pointer}
#sp-essay:checked + .sp-choice,#sp-class:checked + .sp-choice{color:var(--navy);font-weight:600}
/* one of the two chosen: only its part shows (nothing chosen yet: both, each with its own label) */
#sp-essay:checked ~ .sp-for-class,#sp-class:checked ~ .sp-for-essay{display:none}
.sp-for-essay,.sp-for-class{background:var(--cream-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px 2px;margin:0 0 14px}
/* the anonymous box: its words are not a field title (site.css makes `label > span` small capitals) */
.form .chk > .sp-anon{display:block;text-transform:none;letter-spacing:0;font-size:17px;font-weight:400;color:var(--ink);margin:0}
.sp-anon b{font-weight:600}
.sp-anon small{display:block;margin-top:2px}
.sp-review{font-size:16px;color:var(--muted);margin:4px 0 14px}
.sp-go{width:100%;font-size:19px;padding:15px}
.sp-go .ic{flex:none}
.sp-secure{font-size:15px;color:var(--muted);text-align:center;margin:10px 0 0}

.sp-ok{display:inline-flex;vertical-align:middle;color:var(--ok);margin-right:10px}
.sp-ok .ic{width:38px;height:38px}
.sp-done{max-width:680px;margin:0 auto 24px}
.sp-sum{margin:14px 0 0;border-top:1px solid var(--line)}
.sp-sum div{display:flex;padding:9px 0;border-bottom:1px solid var(--line)}
.sp-sum dt{flex:0 0 170px;color:var(--muted);font-size:16px;padding-right:12px}
.sp-sum dd{margin:0;flex:1 1 auto;min-width:0;white-space:normal}

@media (max-width:760px){
  /* one choice per line, its radio button beside it (the radio and its label must stay siblings for the switch above) */
  .form .sp-choice{width:-webkit-calc(100% - 34px);width:calc(100% - 34px);margin-right:0}
  .sp-go{font-size:17px;padding:14px 12px}
  .sp-offers{grid-template-columns:1fr;grid-gap:20px;gap:20px}
  .sp-offer{padding:26px 20px 22px}
  .sp-offer h2{font-size:26px}
  .sp-sum div{display:block}
  .sp-sum dt{padding:0}
}