/* Home page: "Works in your AI assistant" (resources/views/partials/home/ai-connect.blade.php).
   Plain CSS on the landing tokens (--sl-*), so it needs no Tailwind rebuild. */
.sl-ai { background: var(--sl-paper); border-top: 1px solid var(--sl-line); }
.sl-ai-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.sl-ai-copy h2 .sl-script { display: block; color: var(--sl-coral-ink, var(--sl-coral)); }

.sl-ai-works { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.sl-ai-works li { padding: 6px 12px; border: 1px solid var(--sl-line); border-radius: 999px; background: var(--sl-white); font: 500 12px/1.2 "DM Mono", monospace; color: var(--sl-ink); }
.sl-ai-works li:first-child { background: var(--sl-lime); border-color: var(--sl-brand-ink); color: var(--sl-brand-ink); }

.sl-ai-endpoint { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 30px; padding: 12px 14px; border: 1px solid var(--sl-brand-ink); border-radius: 12px; background: var(--sl-white); }
.sl-ai-endpoint span { font: 500 11px/1 "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--sl-muted); }
.sl-ai-endpoint code { font: 500 14px/1.4 "DM Mono", monospace; color: var(--sl-ink); overflow-wrap: anywhere; user-select: all; }

.sl-ai-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.sl-ai-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.sl-ai-shot { margin: 0; border: 1px solid var(--sl-brand-ink); border-radius: 20px; background: var(--sl-white); overflow: hidden; box-shadow: 8px 8px 0 var(--sl-brand-ink); }
.sl-ai-shot img { display: block; width: 100%; height: auto; }
.sl-ai-shot figcaption { padding: 10px 14px; border-top: 1px solid var(--sl-line); font-size: 13px; line-height: 1.45; color: var(--sl-muted); }
.sl-ai-shot-1 { grid-column: 1; grid-row: 1 / 3; transform: rotate(-1.2deg); }
.sl-ai-shot-2 { grid-column: 2; grid-row: 1; transform: rotate(1.2deg); }

.sl-ai-sample { grid-column: 2; grid-row: 2; border-radius: 18px; background: var(--sl-brand-ink); color: var(--sl-on-ink); padding: 16px 18px; box-shadow: 8px 8px 0 var(--sl-blue); z-index: 2; }
.sl-ai-sample-head { font: 500 11px/1 "DM Mono", monospace; letter-spacing: .05em; color: var(--sl-lime); }
.sl-ai-sample-prompt { margin: 10px 0 8px; font-size: 14px; color: color-mix(in srgb, var(--sl-on-ink) 80%, transparent); }
.sl-ai-sample pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sl-ai-sample code { font: 500 12.5px/1.6 "DM Mono", monospace; color: var(--sl-on-ink); }

@media (max-width: 1080px) {
    .sl-ai-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 640px) {
    .sl-ai-visual { grid-template-columns: 1fr; }
    .sl-ai-shot-1, .sl-ai-shot-2, .sl-ai-sample { grid-column: 1; grid-row: auto; transform: none; }
    .sl-ai-shot { box-shadow: 5px 5px 0 var(--sl-brand-ink); }
    .sl-ai-endpoint code { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .sl-ai-shot-1, .sl-ai-shot-2 { transform: none; }
}