: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; }
}
/* Optional guided presentation: visible without competing with the primary surfaces. */
.guided-demo-access{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:8px 0 24px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.guided-demo-access h2{margin:0 0 5px;font-size:20px}.guided-demo-access p{margin:0;max-width:820px;color:var(--muted)}
.guided-demo-access>a{display:flex;align-items:center;gap:18px;flex:0 0 auto;min-width:260px;padding:10px 12px;border:1px solid var(--line);background:transparent;color:var(--ink)!important;text-decoration:none!important}
.guided-demo-access>a span,.guided-demo-access>a strong,.guided-demo-access>a small{display:block}.guided-demo-access>a small{margin-top:2px;color:var(--muted)}.guided-demo-access>a b{font-size:18px}
@media(max-width:760px){.guided-demo-access{display:block}.guided-demo-access>a{margin-top:12px;min-width:0}}