/* Campaign hero: keep the text area clean and let the photo sit slightly
   farther right, matching the approved campaign layout. */
@media (min-width:900px){
  html[data-campaign="school"] .hero{grid-template-columns:50% 50%}
  html[data-campaign="school"] .hero-media{margin-left:0;width:100%}
  html[data-campaign="school"] .hero-media:before{background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.98) 5%,rgba(0,0,0,.82) 13%,rgba(0,0,0,.58) 22%,rgba(0,0,0,.34) 32%,rgba(0,0,0,.14) 43%,rgba(0,0,0,.03) 55%,transparent 64%)}
  html[data-campaign="school"] .hero-photo{left:24px;right:auto;width:calc(100% - 24px)}
  html[data-campaign="planner"] .hero{grid-template-columns:50.5% 49.5%}
  html[data-campaign="planner"] .hero-media{margin-left:2vw;width:calc(100% - 2vw)}
  html[data-campaign="planner"] .hero-media:before{background:linear-gradient(90deg,#000 0%,#000000f2 21%,#000000b8 40%,#00000038 61%,transparent 80%)}
  html[data-campaign="planner"] .hero-photo{left:28px;right:auto;width:calc(100% - 28px)}
}

/* The promo field is optional and follows the original form geometry:
   field on the left, compact submit button on the right. */
.promo-code-field input{border-color:var(--orange)}
.promo-code-field input::placeholder{color:var(--orange);opacity:1}
.form-fields .submit-button{margin-top:0}

@media (min-width:900px){
  html[data-campaign="school"] .form-fields .submit-button{font-size:14px;letter-spacing:-.01em;padding-left:6px;padding-right:6px;white-space:nowrap}
}