/*
 * /ai and /hi/ai ("Use AstroCalc in Claude and ChatGPT"). Loads after clarity.css + legal.css;
 * page root is body.clarity. Tokens only (--cl-*). Behaviour: /js/ai-connect.js.
 */

.clarity .ai-cta { background: var(--cl-tile); border-radius: var(--cl-r-tile); padding: 1.25rem; margin: 0 0 var(--cl-sp-6); max-width: 46rem; }
@media (min-width: 700px) { .clarity .ai-cta { padding: 1.5rem 1.75rem; } }
.clarity .ai-cta h2 { font-size: var(--cl-fs-tile-title); margin: 0 0 var(--cl-sp-2); }
.clarity .ai-cta p { margin: 0 0 var(--cl-sp-3); }
.clarity .ai-cta__row { display: flex; flex-wrap: wrap; gap: .625rem; margin: var(--cl-sp-3) 0; }
.clarity .ai-cta__row .cl-btn { min-width: 11rem; }
.clarity .ai-url { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--cl-fs-small); color: var(--cl-text-2); }
.clarity .ai-url code { font-size: var(--cl-fs-body); color: var(--cl-text); overflow-wrap: anywhere; }
.clarity .ai-steps { margin: var(--cl-sp-3) 0 0; padding-left: 1.375rem; }
.clarity .ai-steps li { margin-bottom: .5rem; }

.clarity .ai-try { display: grid; gap: .625rem; margin: var(--cl-sp-3) 0; }
@media (min-width: 700px) { .clarity .ai-try { grid-template-columns: 1fr 1fr 2fr; } }
.clarity .ai-try label { display: flex; flex-direction: column; gap: .25rem; font-size: var(--cl-fs-small); color: var(--cl-text-2); }
.clarity .ai-try .cl-input { min-height: var(--cl-hit); }
.clarity .ai-preview { font-size: var(--cl-fs-small); color: var(--cl-text-2); margin: 0 0 var(--cl-sp-2); overflow-wrap: anywhere; }

.clarity .ai-plans { display: grid; gap: .75rem; margin: var(--cl-sp-4) 0 var(--cl-sp-5); }
@media (min-width: 700px) { .clarity .ai-plans { grid-template-columns: 1fr 1fr; } }
.clarity .ai-plans > div { background: var(--cl-tile); border-radius: var(--cl-r-tile); padding: 1.125rem 1.25rem; }
.clarity .ai-plans h3 { font-size: var(--cl-fs-body); margin: 0 0 .5rem; }
.clarity .ai-plans ul { margin: 0; padding-left: 1.125rem; font-size: var(--cl-fs-small); }
.clarity .ai-plans li { margin-bottom: .375rem; }
.clarity .ai-plans .cl-small { margin: .5rem 0 0; color: var(--cl-text-2); }

.clarity .ai-code { background: var(--cl-tile); border-radius: var(--cl-r-tile); padding: .875rem 1rem; font-size: var(--cl-fs-small); overflow-x: auto; margin: 0 0 var(--cl-sp-4); }