.surface-grid span:last-child { grid-column: auto; }
.surface-grid span { padding: 11px 9px; font-size: 8px; letter-spacing: .1em; }

.development {
  padding: 120px 0;
  border-bottom: 1px solid var(--line);
}

.development-heading {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 90px;
  align-items: end;
  margin-bottom: 62px;
}

.development-heading h2,
.development-heading > p { margin-bottom: 0; }
.development-heading > p { color: #52635f; font-size: 17px; line-height: 1.7; }
.development-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.development-grid article { min-height: 285px; padding: 27px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.development-grid article > span { font: 9px monospace; letter-spacing: .14em; color: #768581; }
.development-grid h3 { font-size: 22px; margin: 55px 0 18px; }
.development-grid p { color: #52635f; font-size: 14px; line-height: 1.6; }

.harness-line {
  margin-top: 12px;
  padding: 24px 28px;
  background: var(--acid);
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 22px;
  font: 10px monospace;
  letter-spacing: .1em;
}

.harness-line i { height: 1px; background: var(--ink); position: relative; font-size: 0; }
.harness-line i:after { content: "→"; position: absolute; right: -3px; top: -9px; font-size: 16px; }
.harness-line b { font-size: 12px; text-align: center; }

.use-case-invite { margin-top: 12px; padding: 34px 38px; border: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; background: #fff; }
.use-case-invite > div > span { font-size: 9px; letter-spacing: .16em; font-weight: 900; color: #768581; }
.use-case-invite h3 { font-size: 25px; margin: 12px 0 8px; }
.use-case-invite p { color: #52635f; line-height: 1.6; margin: 0; max-width: 700px; }

@media (max-width: 900px) {
  .development-heading { grid-template-columns: 1fr; gap: 38px; }
  .development-grid { grid-template-columns: 1fr 1fr; }
  .harness-line { grid-template-columns: 1fr; text-align: center; }
  .harness-line i { height: 35px; width: 1px; margin: auto; }
  .harness-line i:after { content: "↓"; right: -7px; top: 17px; }
  .use-case-invite { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .development { padding: 80px 0; }
  .development-grid { grid-template-columns: 1fr; }
  .development-grid article { min-height: 230px; }
}