/* Styles for the public Slack pages: the Marketplace landing page and the privacy policy.
 *
 * Self-contained on purpose. These two pages are served to signed-out visitors and to Slack's
 * reviewers, so they do not pull in the app's Tailwind build or design-system tokens: those
 * carry the authenticated product's chrome and would drag a large bundle onto a page whose
 * whole job is to load fast and read plainly. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111827; background: #fff; line-height: 1.6; }
a { color: #4f46e5; text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* Header */
.site-header { border-bottom: 1px solid #e5e7eb; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
.site-header .logo { font-size: 1.25rem; font-weight: 600; color: #111827; text-decoration: none; }
.site-header nav { display: flex; gap: 24px; font-size: 0.875rem; }
.site-header nav a { color: #6b7280; }
.site-header nav a:hover { color: #111827; text-decoration: none; }

/* Footer */
.site-footer { border-top: 1px solid #e5e7eb; margin-top: 64px; }
.site-footer .container { display: flex; gap: 24px; padding-top: 24px; padding-bottom: 24px; font-size: 0.875rem; }
.site-footer a { color: #6b7280; }
.site-footer a:hover { color: #374151; }

/* Main */
main.container { padding-top: 64px; padding-bottom: 64px; }

/* Typography */
h1 { font-size: 2.25rem; font-weight: 700; line-height: 1.2; margin-bottom: 16px; }
h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin-bottom: 16px; }
h3 { font-size: 1.125rem; font-weight: 600; margin: 32px 0 12px; }
.subtitle { font-size: 1.125rem; color: #6b7280; margin-bottom: 32px; }
.muted { color: #6b7280; }
.small { font-size: 0.875rem; }
.xsmall { font-size: 0.8125rem; color: #6b7280; }

/* Sections */
.section { margin-bottom: 64px; }

/* Numbered install / setup steps */
.steps { list-style: none; }
.steps li { display: flex; gap: 16px; margin-bottom: 24px; }
.step-num { flex-shrink: 0; width: 32px; height: 32px; background: #eef2ff; color: #4f46e5; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; }

/* Install section (landing page) */
.install-region { margin-bottom: 12px; }

/* Bulleted copy */
.bullets { padding-left: 24px; margin-bottom: 16px; }
.bullets li { margin-bottom: 8px; }

/* Callouts */
.notice { border-left: 3px solid #d1d5db; background: #f9fafb; padding: 12px 16px; border-radius: 0 8px 8px 0; font-size: 0.875rem; margin: 24px 0; }
.notice-warn { border-left-color: #f59e0b; background: #fffbeb; }

/* Data tables (permissions, troubleshooting) */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin-bottom: 16px; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
.data-table th { font-weight: 600; background: #f9fafb; }
.data-table code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875rem; background: #eef2ff; color: #4338ca; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }

/* Screenshots, and the placeholder shown for one with no approved asset yet */
.screenshot { margin: 24px 0; }
.screenshot-image { display: block; max-width: 100%; height: auto; border: 1px solid #e5e7eb; border-radius: 8px; }
.screenshot-frame { display: flex; align-items: center; justify-content: center; border: 1px dashed #d1d5db; border-radius: 8px; background: #f9fafb; height: 160px; }
.screenshot-badge { font-size: 0.8125rem; font-weight: 500; color: #6b7280; letter-spacing: 0.02em; }
.screenshot figcaption { margin-top: 8px; }

/* Prose (privacy page) */
.prose h2 { margin-top: 32px; }
.prose p { margin-bottom: 16px; }
.prose ul { margin-bottom: 16px; padding-left: 24px; }
.prose li { margin-bottom: 8px; }