/* /api/ and /enterprise/: surfaces row, assistant cards, code blocks. Everything else comes from /for/roles.css. */
.platform-surfaces { padding: 0 0 8px; }
.platform-surface-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.platform-surface { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 16px 22px; border: 1px solid var(--line, #e2e2e2); border-radius: 14px; background: white; color: inherit; text-decoration: none; text-align: center; transition: border-color .15s, transform .15s; }
.platform-surface:hover { border-color: #276a60; transform: translateY(-2px); }
.platform-surface img { width: 40px; height: 40px; object-fit: contain; }
.platform-surface strong { font-size: 15px; letter-spacing: -.02em; }
.platform-surface > span:last-child { color: var(--muted, #666666); font-size: 12px; }
.platform-glyph { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 4px; white-space: nowrap; color: #276a60; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 24px; font-weight: 700; letter-spacing: -1px; }

.assistant-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.assistant-card { padding: 26px 26px 22px; border: 1px solid var(--line, #e2e2e2); border-radius: 14px; background: white; }
.assistant-head { display: flex; align-items: center; gap: 12px; }
.assistant-head img { width: 36px; height: 36px; object-fit: contain; }
.assistant-card h3 { margin: 0; font-size: 19px; letter-spacing: -.03em; }
.assistant-card > p { margin: 14px 0 10px; color: var(--muted, #666666); font-size: 13px; line-height: 1.6; }
.assistant-card ol { margin: 0; padding-left: 20px; color: #3d4744; font-size: 13px; line-height: 1.6; }
.assistant-card li + li { margin-top: 6px; }
.assistant-card code, .platform-note code, .answer-first code, .compare-table code, .section-heading code { padding: 1px 5px; border-radius: 5px; background: #f0f3ef; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: .92em; word-break: break-all; }

.platform-callout { max-width: 760px; margin: 28px auto 0; padding: 20px 24px; border: 1px dashed #b9c9c2; border-radius: 12px; background: #f6faf8; font-size: 14px; line-height: 1.6; }
.platform-callout p { margin: 0 0 8px; }
.platform-callout ul { margin: 0; padding-left: 20px; color: #3d4744; }

.platform-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.platform-two-col .section-heading { margin-bottom: 18px; }
.platform-note { max-width: 680px; margin: 0 0 14px; color: #4a5753; font-size: 14px; line-height: 1.7; }

.platform-code { margin: 0 0 16px; overflow: hidden; border: 1px solid #1f2a27; border-radius: 12px; background: #14201d; color: #e6efe9; }
.platform-code figcaption { padding: 8px 14px; border-bottom: 1px solid #243430; color: #9fb5ac; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.platform-code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6; }
.platform-code code { white-space: pre; }

@media (max-width: 1100px) {
  .platform-surface-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .assistant-grid { grid-template-columns: minmax(0, 1fr); }
  .platform-two-col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .platform-surface-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-surface { padding: 20px 10px 16px; }
}

/* Hero headline: wide enough for two lines on desktop. */
.platform-hero .role-hero-copy h1 { max-width: 1040px; text-wrap: balance; }