/* Question-first answer pages (/ai-consultant-cost, /ai-for-*). Page-scoped. */
.ans { --ans-bg: #1f3a4d; --ans-accent: #f2c14e; --ans-soft: #eef3f6; }
.ans-slate  { --ans-bg: #2b3a4a; --ans-accent: #f2c14e; --ans-soft: #eef1f4; }
.ans-teal   { --ans-bg: #0f4c55; --ans-accent: #ffc857; --ans-soft: #e8f3f2; }
.ans-forest { --ans-bg: #1f4733; --ans-accent: #f4c95d; --ans-soft: #ecf4ee; }
.ans-ink    { --ans-bg: #1c2333; --ans-accent: #e9b949; --ans-soft: #f1f2f5; }
.ans-rust   { --ans-bg: #6b2f1d; --ans-accent: #ffd27a; --ans-soft: #f8efe9; }

.ans-hero { background-color: var(--ans-bg); color: #fff; padding: 7.5rem 0 4rem; }
.ans-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3rem; align-items: center; }
.ans-crumbs { font-size: 0.85rem; color: rgba(255,255,255,0.78); margin-bottom: 1rem; }
.ans-crumbs a { color: var(--ans-accent); text-decoration: none; }
.ans-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; font-weight: 700; color: var(--ans-accent); margin-bottom: 0.75rem; }
.ans-hero h1 { color: #fff; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.15; margin: 0 0 1.5rem; }
.ans-short { background: rgba(255,255,255,0.08); border-left: 4px solid var(--ans-accent); border-radius: 6px; padding: 1.25rem 1.4rem; }
.ans-short-label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ans-accent); margin-bottom: 0.4rem; }
.ans-short p { margin: 0; color: #fff; font-size: 1.12rem; line-height: 1.65; }
.ans-byline { margin: 1.1rem 0 0; font-size: 0.9rem; color: rgba(255,255,255,0.8); }
.ans-byline a { color: #fff; font-weight: 600; }
.ans-photo { margin: 0; }
.ans-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,0.28); display: block; }

.ans-table-sec { background-color: #ffffff; padding: 4.5rem 0; }
.ans-table-sec h2, .ans-qs h2, .ans-faq h2 { color: #14213d; }
.ans-lead { color: #4a5568; font-size: 1.08rem; max-width: 760px; }
.ans-table-wrap { overflow-x: auto; margin-top: 1.5rem; border: 1px solid #dfe3e8; border-radius: 10px; }
.ans-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.ans-table th, .ans-table td { text-align: left; vertical-align: top; padding: 1rem 1.1rem; border-bottom: 1px solid #e6e9ee; font-size: 0.98rem; line-height: 1.55; color: #2d3748; }
.ans-table thead th { background-color: var(--ans-bg); color: #fff; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; }
.ans-table tbody th { color: #14213d; font-weight: 700; width: 24%; }
.ans-table tbody tr:nth-child(even) { background-color: var(--ans-soft); }
.ans-table tbody tr:last-child th, .ans-table tbody tr:last-child td { border-bottom: 0; }

.ans-qs { background-color: var(--ans-soft); padding: 4.5rem 0; }
.ans-qs-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 3rem; align-items: start; }
.ans-q { margin-bottom: 2.25rem; }
.ans-q h2 { font-size: 1.5rem; margin: 0 0 0.6rem; }
.ans-q p, .ans-q li { color: #2d3748; font-size: 1.05rem; line-height: 1.7; }
.ans-q ul { padding-left: 1.2rem; }
.ans-q li { margin-bottom: 0.4rem; }
.ans-fix { background-color: #ffffff; border-top: 5px solid var(--ans-bg); border-radius: 10px; padding: 1.75rem; position: sticky; top: 6rem; box-shadow: 0 8px 24px rgba(20,33,61,0.08); }
.ans-fix h2 { font-size: 1.2rem; margin: 0 0 0.9rem; }
.ans-fix ol { padding-left: 1.2rem; margin: 0 0 1.4rem; }
.ans-fix li { color: #2d3748; margin-bottom: 0.55rem; line-height: 1.55; }

.ans-faq { background-color: #ffffff; padding: 4.5rem 0; }
.ans-faq-list { max-width: 860px; margin-top: 1.25rem; }
.ans-faq details { border-bottom: 1px solid #e2e6eb; padding: 1rem 0; }
.ans-faq summary { cursor: pointer; font-weight: 700; color: #14213d; font-size: 1.08rem; }
.ans-faq details p { color: #2d3748; margin: 0.7rem 0 0; line-height: 1.7; }
.ans-sources, .ans-related { margin-top: 2.25rem; max-width: 860px; }
.ans-sources h3, .ans-related h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; color: #4a5568; }
.ans-sources ul, .ans-related ul { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.ans-sources li, .ans-related li { margin-bottom: 0.5rem; }
.ans-sources a, .ans-related a { color: #8a5a00; font-weight: 600; }

.ans-index { background-color: #f6f1e7; padding: 4rem 0; }
.ans-index ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.ans-index li a { display: block; background-color: #ffffff; border-radius: 8px; padding: 1.1rem 1.2rem; color: #14213d; font-weight: 700; text-decoration: none; border-left: 4px solid #c9962b; }

@media (max-width: 900px) {
  .ans-hero { padding: 6.5rem 0 3rem; }
  .ans-hero-grid, .ans-qs-grid { grid-template-columns: 1fr; gap: 2rem; }
  .ans-fix { position: static; }
}