/* /careers and /job — the site's language: white, system type, the line as the mark.
   Two pages only: a list of roles, and a role that you apply from without leaving. */
.careers-page { background: #fff; }
.careers-page [hidden] { display: none !important; }

/* 760 to sit exactly under the masthead's inner width; the prose caps itself in ch. */
.cr { width: min(760px, 100% - var(--gutter) * 2); margin: 0 auto; padding: 18px 0 40px; display: grid; gap: 28px; }
.cr-head { display: grid; gap: 12px; }
.cr-title { font-weight: 700; font-size: clamp(30px, 6.4vw, 42px); letter-spacing: -.032em; line-height: 1.04; }
.cr-sub { font-size: 16.5px; line-height: 1.55; color: var(--ink-2); max-width: 56ch; }
.cr-sub + .cr-sub { margin-top: -4px; }

/* the list of roles */
.roles { display: grid; }
.role { display: grid; grid-template-columns: minmax(0,1fr) 16px; gap: 14px; align-items: center;
  padding: 18px 2px; border-top: 1px solid #ECECF0; color: inherit; }
.role:first-child { border-top: 1.5px solid var(--ink); }
.role:last-child { border-bottom: 1px solid #ECECF0; }
.role:hover .role-title { text-decoration: underline; text-underline-offset: 3px; }
.role-body { display: grid; gap: 5px; min-width: 0; }
.role-title { font-weight: 650; font-size: 19px; letter-spacing: -.017em; line-height: 1.25; }
.role-blurb { font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.role-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--ink-3); }
.role-arw { color: var(--ink-3); font-size: 17px; line-height: 1; justify-self: end; }
.role:hover .role-arw { color: var(--ink); }

.cr-note { font-size: 14px; color: var(--ink-3); line-height: 1.5; }
.cr-note a { text-decoration: underline; text-underline-offset: 3px; }

/* a single role */
.back { font-size: 13.5px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.back:hover { color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: #F4F4F7; border-radius: 999px; padding: 6px 11px; }
.job-body { display: grid; gap: 26px; }
.sect { display: grid; gap: 9px; }
.sect h2 { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sect p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
/* scoped to ul: the numbered steps are an ol and must not inherit the dash or its indent */
.sect ul { display: grid; gap: 8px; padding-left: 0; list-style: none; }
.sect ul li { font-size: 16px; line-height: 1.55; color: var(--ink-2); padding-left: 20px; position: relative; }
.sect ul li::before { content: ''; position: absolute; left: 2px; top: 11px; width: 8px; height: 1.5px; background: var(--ink-3); border-radius: 1px; }

/* the form */
.apply { display: grid; gap: 18px; border-top: 1.5px solid var(--ink); padding-top: 24px; }
.apply-head { display: grid; gap: 6px; }
.apply-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.apply-head p { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.fields { display: grid; gap: 16px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .two { grid-template-columns: 1fr; } }
.f { display: grid; gap: 6px; min-width: 0; }
.f > label { font-size: 13.5px; font-weight: 600; }
.f .opt { font-weight: 500; color: var(--ink-3); }
.f input[type=text], .f input[type=email], .f input[type=url], .f textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: #fff;
  border: 1px solid #DCDDE3; border-radius: 12px; padding: 11px 13px; transition: border-color .15s ease; }
.f textarea { resize: vertical; min-height: 116px; line-height: 1.5; }
.f input::placeholder, .f textarea::placeholder { color: #A9AEB6; }
.f input:focus, .f textarea:focus { outline: 0; border-color: var(--ink); }
.f .hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.f.is-bad input, .f.is-bad textarea, .f.is-bad .drop { border-color: #C0392B; }
.f .err { font-size: 12.5px; color: #C0392B; }

/* the CV */
.drop { display: flex; align-items: center; gap: 12px; border: 1px dashed #C9CBD2; border-radius: 12px;
  padding: 14px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.drop:hover, .drop.is-over { border-color: var(--ink); background: #FAFAFB; }
/* the real input is visually hidden, so the ring has to live on the label */
.drop:focus-within { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 3px; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; background: #F4F4F7; display: grid; place-items: center; }
.drop-ic svg { width: 17px; height: 17px; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.drop-text { display: grid; gap: 2px; min-width: 0; }
.drop-text b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-text span { font-size: 12.5px; color: var(--ink-3); }
.drop.has-file { border-style: solid; border-color: var(--ink); }
.drop.has-file .drop-ic { background: #ECF4FF; }
.drop.has-file .drop-ic svg { stroke: #0A7AFF; }

.apply-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.apply-foot .pill { min-height: 46px; padding: 0 22px; font-size: 15.5px; }
.apply-foot .pill:disabled { opacity: .45; cursor: default; transform: none; }
.apply-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; max-width: 42ch; }
.apply-note.is-err { color: #C0392B; font-weight: 500; }

/* sent */
.sent { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 34px 0 10px;
  border-top: 1.5px solid var(--ink); }
.sent-ic { width: 62px; height: 62px; border-radius: 20px; background: #EEF7F1; display: grid; place-items: center; }
.sent-ic svg { width: 30px; height: 30px; fill: none; stroke: #10893E; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sent h2 { font-size: 23px; font-weight: 700; letter-spacing: -.02em; }
.sent p { font-size: 15px; color: var(--ink-2); line-height: 1.55; max-width: 44ch; }

/* the footer sat flush against the right edge of the window: give it the content's column */
.careers-page .foot { width: min(760px, 100% - var(--gutter) * 2); margin: 0 auto;
  justify-content: flex-start; flex-wrap: wrap; padding: 18px 0 34px; border-top: 1px solid #ECECF0; }

/* roles up, form not yet open */
.shut { display: grid; gap: 8px; border-top: 1.5px solid var(--ink); padding-top: 22px; }
.shut h2 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.shut p { font-size: 15.5px; color: var(--ink-2); line-height: 1.55; max-width: 48ch; }

/* how we work: bold lead-ins, no marker — neither a dash nor a number belongs here */
.ways { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sect ul.ways li { font-size: 16px; line-height: 1.55; color: var(--ink-2); padding-left: 0; position: static; }
.sect ul.ways li::before { content: none; }
.ways b { color: var(--ink); font-weight: 650; }

/* how we hire: numbered, because the order is the point. The number and the text are two
   real boxes rather than a pseudo-element spanning grid rows, which overlapped. */
.steps { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; }
.steps .n { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px solid #DCDDE3;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.steps li > div { display: grid; gap: 3px; min-width: 0; }
.steps b { font-size: 15.5px; font-weight: 650; line-height: 1.35; }
.steps li > div > span { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.steps-note { font-size: 14px; line-height: 1.5; color: var(--ink-3); margin-top: 12px; }

.sent-steps { text-align: left; width: 100%; border-top: 1px solid #ECECF0; padding-top: 14px; margin-top: 2px; }
.sent-steps b { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.sent-steps ol { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.sent-steps li { font-size: 14px; color: var(--ink-2); line-height: 1.45; }

.missing-job { display: grid; gap: 10px; padding: 40px 0; }

/* ── the role page: one scrollbar, the page's own; the form stays put by sticking ─────── */
/* The page scrolls normally, so there is exactly one scrollbar and it is the main one. The
   role row pins to the top, and the form pins beside it, so scrolling reads the description
   and moves nothing else. */
.job-page { background: #fff; }
.job-page .masthead-in { max-width: none; }

.job-top { position: sticky; top: 0; z-index: 5; display: grid; gap: 10px; justify-items: start;
  padding: 2px var(--gutter) 16px; border-bottom: 1px solid #E5E5E8; background: #fff; }
.job-name { margin: 0; font-weight: 700; font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.03em; line-height: 1.05; }
.job-top .back { margin-bottom: 2px; }

.job-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.job-left  { background: #F4F4F5; }          /* the iMessage grey, half way to white */
.job-right { background: #fff; border-left: 1px solid #E5E5E8; }

.col-in { width: min(560px, 100% - 48px); margin: 0 auto; padding: 26px 0 34px; display: grid; gap: 22px; }
/* the reading column starts on the same line as the role name above it */
.job-left .col-in { width: min(580px, 100% - var(--gutter) * 2); margin: 0 0 0 var(--gutter); }
/* pinned only when it fits: a form taller than the window would pin its own top and hide
   its own button, which is worse than letting it scroll past with the page */
.can-stick .job-right .col-in { position: sticky; top: calc(var(--stick, 100px) + 14px); align-self: start; }

.lede { font-size: 16.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.job-left .sect p, .job-left .sect li { color: #43474E; }

.job-right .apply { border-top: 0; padding-top: 0; gap: 16px; }
.job-right .apply-head h2 { font-size: 20px; }
.job-right .fields { gap: 13px; }
.job-right .f textarea { min-height: 88px; }
.job-right .f .hint { display: none; }
.job-right .apply-foot { padding-top: 2px; }
.job-right .shut, .job-right .sent { border-top: 0; padding-top: 6px; }

.job-page .foot { justify-content: flex-start; width: min(100% - var(--gutter) * 2, 1400px);
  margin: 0 auto; padding: 20px 0 30px; }

/* a phone has no room for two columns: stack them, nothing sticks but the role row */
@media (max-width: 900px) {
  .job-split { display: block; }
  .job-right { border-left: 0; border-top: 1px solid #E5E5E8; }
  .col-in, .job-left .col-in { width: min(720px, 100% - var(--gutter) * 2); margin: 0 auto; padding: 22px 0 28px; }
  .job-right .f .hint { display: block; }
  .job-top { padding-bottom: 14px; }
}