/* AI for real estate agents (/ai-for-real-estate-agents/). Built on
   channels/styles.css (hero, section headings, workflow, other links),
   listing-posts.css (the lp-example lightbox, the answer box and the
   comparison table) and flyers.css (the hero facts and the checklist); this
   file adds the hero stack, the job cards and the prompt cards. */
.ai-page figure { margin:0; }
.ai-page .lp-example { display:block; position:relative; }
.ai-page .lp-example img { display:block; width:100%; height:auto; }

/* Hero: a listing post and an everyday post fanned behind a listing reel. */
.ai-page .ch-hero h1 { text-wrap:balance; }
.ai-hero-stack { display:grid; grid-template-areas:"stack"; place-items:center; padding:40px 20px 34px; border:1px solid #e3dcec; border-radius:24px; background:#eee9f6; overflow:hidden; }
.ai-hero-stack figure { grid-area:stack; width:44%; }
.ai-hero-stack figure:nth-child(1) { transform:translateX(-58%) rotate(-7deg) scale(.9); }
.ai-hero-stack figure:nth-child(2) { transform:translateX(58%) rotate(7deg) scale(.9); }
.ai-hero-stack figure:nth-child(3) { width:36%; position:relative; z-index:1; }
.ai-hero-stack .lp-example { border-radius:6px; overflow:hidden; box-shadow:0 22px 40px -22px #29213799, 0 2px 6px #2921371f; }
.ai-hero-stack figure:nth-child(3) .lp-example { border-radius:12px; box-shadow:0 30px 55px -24px #292137b3, 0 2px 8px #29213726; }

/* What Velisto's AI does: two job cards a row, each with a screenshot panel. */
.ai-jobs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 30px; }
.ai-jobs article { display:flex; flex-direction:column; }
.ai-job-art { position:relative; aspect-ratio:16/10; border-radius:16px; background:#eee9f6; }
.ai-job-art .lp-example { position:absolute; inset:20px; }
.ai-page .ai-job-art .lp-example img { height:100%; object-fit:contain; filter:drop-shadow(0 14px 22px #29213740); }
.ai-publish { display:grid; grid-template-columns:.8fr 1.2fr; gap:50px; align-items:center; }
.ai-publish h3 { font-size:1.5rem; }
.ai-publish p { margin-top:14px; font-size:1.0625rem; line-height:1.8; }
.ai-publish .ch-content-links { margin-top:22px; padding-top:0; border-top:0; justify-content:flex-start; flex-wrap:wrap; }
.ai-jobs h3 { margin-top:22px; font-size:1.3rem; }
.ai-jobs p { margin-top:10px; font-size:1rem; line-height:1.75; }
.ai-jobs .text-link { margin-top:14px; align-self:flex-start; }
.ai-jobs-group { margin:0 0 22px; color:var(--purple); font-size:.8125rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.ai-jobs-group:not(:first-child) { margin-top:64px; }

/* ChatGPT prompts: cards with the prompt set apart from its title. */
.ai-prompts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; padding:0; }
.ai-prompts li { list-style:none; padding:24px 24px 22px; border:1px solid #e3dcec; border-radius:16px; background:#fff; }
.ai-prompts h3 { font-size:1.125rem; }
.ai-prompts blockquote { margin:14px 0 0; padding:14px 16px; border-left:3px solid var(--purple); border-radius:0 10px 10px 0; background:#f7f5fb; font-size:.9375rem; line-height:1.7; color:var(--ink); }
.ai-prompts p { margin-top:12px; font-size:.875rem; line-height:1.65; color:var(--muted); }
.ai-prompt-note { margin-top:26px; font-size:.9375rem; line-height:1.75; color:var(--muted); max-width:820px; }
.ai-compare { padding-top:40px; }
.ai-page .fl-checklist a { color:var(--purple); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }

/* What Velisto doesn't do: one quiet line between sections. */
.ai-scope { margin-top:34px; display:flex; gap:14px; align-items:flex-start; padding:22px 24px; border:1px solid #e3dcec; border-radius:16px; background:#faf9fc; font-size:1rem; line-height:1.75; }
.ai-scope .icon { flex:none; width:20px; height:20px; margin-top:4px; color:var(--purple); }

@media(max-width:1100px) { .ai-jobs { gap:30px 22px; } }
@media(max-width:850px) {
  .ai-hero-stack { max-width:640px; margin:auto; }
  .ai-prompts { grid-template-columns:1fr; }
}
@media(max-width:850px) { .ai-publish { grid-template-columns:1fr; gap:30px; } }
@media(max-width:700px) { .ai-jobs { grid-template-columns:1fr; gap:40px; } }
@media(max-width:600px) {
  .ai-hero-stack { padding:30px 12px 24px; border-radius:17px; }
  .ai-job-art { border-radius:12px; }
  .ai-job-art .lp-example { inset:12px; }
  .ai-prompts li { padding:20px 18px 18px; }
}