/* Cornerstone pillar: Build an AI Companion Business in a Day.
   Built entirely on the site's own components (home.css / dashboard.css
   patterns): agent-banner, styles-grid/style-block, voice-item, spec-item,
   faq-item. Only page-specific extras live here. */

:root {
  --amber: #e8b98a;
  --green: #8fc98c;
}

.hero-compact { padding: 56px 0 28px; }
.hero-compact h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.05; margin: 10px 0 16px; letter-spacing: -0.01em; }
.hero-sub { color: var(--text-muted); font-size: 1.02rem; line-height: 1.6; max-width: 640px; margin-top: 4px; }

/* Agent CTA banner (same component as the dashboard's agent banner) */
.agent-banner { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border-strong); border-left: 3px solid var(--amber); border-radius: 8px; padding: 12px 16px; margin-top: 8px; }
.agent-banner .ab-logos { display: inline-flex; align-items: center; gap: 6px; }
.agent-banner .ab-logo { width: 24px; height: 24px; border-radius: 6px; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.agent-banner .ab-logo svg { width: 16px; height: 16px; fill: currentColor; }
.agent-banner .ab-logo[title="Claude Code"] { color: #d97757; }
.agent-banner .ab-logo[title="ChatGPT"] { color: #10a37f; }
.agent-banner .ab-logo[title="Cursor"] { color: #000; }
.agent-banner .ab-logo[title="Gemini"] { color: #4d7bfa; }
.agent-banner .ab-text { font-size: 0.88rem; color: var(--text-secondary); font-weight: 500; }
.agent-banner .btn-primary { margin-left: auto; flex-shrink: 0; }
.agent-banner .agent-copied { display: none; color: var(--green); font-size: 0.72rem; margin-left: 6px; }
.agent-banner #bc-copy.copied .agent-copied { display: inline; }
.bc-md-link { color: var(--text-muted); font-size: 0.92rem; margin-top: 14px; }
.bc-md-link a { color: var(--accent); }

/* Shared page bits */
.bc-note { color: var(--text-muted); margin-top: 22px; line-height: 1.65; font-size: 0.95rem; }
.bc-lead { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.7; max-width: 760px; margin: 0 0 26px; }
.bc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; max-width: 720px; }
.bc-list li { color: var(--text-secondary); line-height: 1.65; padding-left: 22px; position: relative; font-size: 0.98rem; }
.bc-list li::before { content: '\2192'; position: absolute; left: 0; color: var(--accent); }
.bc-list li strong { color: var(--text); }

/* Voice demo strip: a single voice-group, exactly like the homepage catalog */
.voice-group { margin-top: 4px; margin-bottom: 28px; max-width: 560px; }

/* Economics table */
.bc-table-wrap { margin-top: 26px; overflow-x: auto; }
.bc-table { width: 100%; max-width: 720px; border-collapse: collapse; }
.bc-table th, .bc-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
.bc-table th { color: var(--text-muted); font-weight: 500; }
.bc-table td { color: var(--text-secondary); }
.bc-table td:last-child { color: var(--text); font-family: var(--mono); white-space: nowrap; }

/* FAQ (same component as the pricing page) */
.faq-list { display: grid; gap: 14px; margin-top: 28px; max-width: 720px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; }
.faq-item h3 { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; margin: 0 0 8px; }
.faq-item p { color: var(--text-secondary); line-height: 1.6; margin: 0; }

@media (max-width: 720px) {
  .agent-banner .btn-primary { margin-left: 0; }
}