/* ==========================================================================
   Open Application page — scoped extras. Tokens only, reuse design system.
   ========================================================================== */

/* Hero: eyebrow sits tight above the title, CTA has breathing room below sub. */
.page-open-application .open-hero .accent { margin-bottom: 14px; }
.page-open-application .open-hero .btn { margin-top: 4px; }

/* Lead image: tucks under the hero, framed to match card radius. */
.page-open-application .open-image { padding-top: 0; padding-bottom: 0; }
.page-open-application .open-image img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
  max-height: 520px;
}

/* The role: constrain body measure for readability on the dark band. */
.page-open-application .open-role-body { max-width: 760px; }
.page-open-application .open-role-body p:last-child { margin-bottom: 0; }

/* Shortlist: reuse the check-list, give it a sensible measure. */
.page-open-application .open-shortlist .check-list { max-width: 820px; }

/* Final CTA: mirrors the homepage challenge panel idiom. */
.page-open-application .open-cta { padding-top: 0; }
.page-open-application .open-cta-panel {
  background: var(--panel);
  border-radius: 12px;
  padding: 72px 64px;
  display: flex;
  align-items: center;
}
.page-open-application .open-cta-text { max-width: 620px; }
.page-open-application .open-cta-text h2 { font-size: clamp(28px, 3.6vw, 40px); }
.page-open-application .open-cta-text .btn { margin-top: 22px; }

@media (max-width: 900px) {
  .page-open-application .open-cta-panel { padding: 48px 28px; }
  .page-open-application .open-image img { max-height: 360px; }
}