/* The contextual call to action on public guide and tool pages (templates/_seo_chat_cta.html). */
.seo-chat { margin: 18px 0; padding: 16px 20px; border: 1px solid var(--line); border-left: 4px solid var(--saffron); border-radius: 12px; background: var(--card); }
.seo-chat-text { margin: 0 0 10px; font-family: var(--display); font-size: 19px; line-height: 1.35; color: var(--ink); }
.seo-chat-actions { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.seo-chat .primary.small { color: var(--paper); }
.seo-chat-alt { font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
.seo-chat-bottom { max-width: 760px; margin: 24px 5vw 8px; }
.seo-moments { margin: 8px 0 0; }
@media (max-width: 640px) { .seo-chat-bottom { margin-left: 16px; margin-right: 16px; } }

/* The start chat card on guide, rashi, nakshatra, moment and tool pages (_seo_chat_cta.html, the
   same card as the home page's, _start_card.html). The page text above it stays where it is: the
   card is in the page's own HTML and has a reserved height, so nothing moves when it is drawn. */
.seo-start { margin: 18px 0; max-width: 640px; }
.seo-start .seo-start-card { max-width: none; margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 340px; scroll-margin-top: 16px; box-shadow: 0 18px 40px -22px rgba(60, 40, 10, .35); }
@media (min-width: 960px) { .seo-start .seo-start-card { min-height: 420px; } }
.seo-start .start-alt { margin: 0 14px 12px; }
.seo-start .seo-chat { margin: 0; }
/* On tool pages the card is a direct child of the page, which has no side padding of its own. */
.tool > .seo-start { margin: 18px 5vw; }