:root {
  --ink: #202123;
  --muted: #667085;
  --line: #d9dcd8;
  --panel: #fff;
  --blue: #173a68;
}

* { box-sizing: border-box; }

.masthead {
  width: min(1280px, calc(100% - 32px));
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.masthead .brand { font-weight: 800; }

.masthead span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

main {
  width: min(1280px, calc(100% - 32px));
  margin: auto;
}

.surface-section {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  padding: 24px 0;
}

.surface-section header h2 { margin: 0; }
.surface-section header p { margin: 0 0 4px; }

.surface-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.surface-list li { border-bottom: 1px solid var(--line); }

.surface {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  gap: 14px;
  align-items: center;
  padding-inline: 6px;
}

.surface .copy > * { display: block; }

.surface small {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.surface strong {
  margin: 2px 0;
  font-weight: 750;
}

.surface .copy > span {
  max-width: 900px;
  color: var(--muted);
}

.surface b { text-align: right; }

.architecture-section {
  padding: 24px 0 28px;
  border-top: 1px solid var(--line);
}

footer {
  width: min(1280px, calc(100% - 32px));
  margin: 24px auto;
  padding: 12px 0 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

@media (max-width: 720px) {
  .surface-section { grid-template-columns: 1fr; }
  .surface { grid-template-columns: 34px minmax(0, 1fr) 18px; }
}