/* ============================================================================
   /careers on the sub page system (9 Oct 2026). No instrument: the form is the page's one
   live thing, laid out like /get-started. Words on the left (eyebrow, title, lede, whether
   roles are open), how we hire under them, the form on the right. On a phone: the words, the
   form, then how we hire.

   Loaded in PageStyles, right after sub.css. Every rule under .sp, tokens only (no hex, canon
   guard rule 4). The form's look is sub.css 12.8 (site-form, site-field...); only the panel's
   frame is set here. Mobile first: 640 (the form's two columns), 981 (two columns), 1180.
   ============================================================================ */

/* ---- layout ---- */
.sp .ca { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "how"; padding-block: 28px 72px; }
.sp .ca-intro { grid-area: intro; min-width: 0; }
.sp .ca-form { grid-area: form; min-width: 0; margin-top: 36px; }
.sp .ca-how { grid-area: how; min-width: 0; margin-top: 64px; }
@media (min-width: 981px) {
  .sp .ca {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "intro form" "how form";
    grid-template-rows: auto 1fr;
    column-gap: clamp(48px, 6vw, 112px);
    padding-block: 64px 120px;
  }
  .sp .ca-form { margin-top: 0; align-self: start; }
  .sp .ca-how { margin-top: 56px; }
}

/* ---- whether roles are open: a held note under the lede ---- */
.sp .ca-roles { margin-top: 28px; }

/* ---- how we hire: three numbered records, then the research to read ---- */
.sp .ca-how-h { font-size: 20px; line-height: 1.3; letter-spacing: -.015em; margin-bottom: 16px; }
.sp .ca-steps .lg-k { color: var(--lp-accent-text); font-weight: 600; }
.sp .ca-steps .lg-x { font-weight: 600; }
@media (min-width: 600px) {
  .sp .ledger.ca-steps li { grid-template-columns: 40px minmax(0, 1fr); }
}
.sp .ca-read { margin-top: 24px; }
.sp .more.ca-read-l { margin-top: 2px; }

/* ---- the form panel: a hairline frame on paper; on a phone the form sits on the page ---- */
.sp .ca-form.site-form { border: 0; border-top: 1px solid var(--lp-ink); background: none; padding: 20px 0 0; }
.sp .ca-form .site-form-success p { font-size: 16px; line-height: 1.55; color: var(--lp-ink-2); max-width: 34em; }
.sp .ca-form .site-form-success .cta { margin-top: 20px; }
@media (min-width: 640px) {
  .sp .ca-form.site-form { border: 1px solid var(--lp-rule-2); background: var(--lp-paper); padding: 32px; }
}
@media (min-width: 1180px) {
  .sp .ca-form.site-form { padding: 40px 44px 44px; }
  .sp .ca-how-h { font-size: 22px; }
}