/* Answer pages (/about/, /ai-agent-studio/, /pennsylvania-app-developer/, /mvp-with-ai-agents/, /ai-app-cost/,
   /built-by-ai-agents/). Loaded after /site.css and /v2/skin.css; they reuse the product page layout
   (.l-sec, .l-plans, .l-shots, .l-faq, .p-build) and add only what's below. Same system as the homepage:
   Overpass, paper and ink, rules instead of cards. Light and dark follow the visitor (tokens in skin.css). */

.answer-page .l-hero { max-width: 52em; }
.answer-page .l-hero .ch-title { font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1.04; max-width: 22ch; }
.answer-page .l-plan p { margin: 10px 0 0; color: var(--body); }
.answer-page .l-plan h3 .prod-icon { width: 1.15em; height: 1.15em; margin-right: .4em; vertical-align: -.2em; }
.answer-page .l-sec .ed-points { margin-top: 0; }
.answer-page .ed-points + .l-plans, .answer-page .ed-points + .a-steps, .answer-page .a-steps + .ed-points { margin-top: 48px; }

/* Hero with real screens beside it on wide screens, below the words on phones. */
.a-hero { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) { .a-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); } .a-hero:has(.a-hero-shots) { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); } }
.a-hero-shots { list-style: none; margin: 0; padding: 0; justify-self: center; width: min(100%, 440px); display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.a-hero-shots li { min-width: 0; }
.a-hero-shots img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; background: var(--frame); box-shadow: none; }

/* Numbered steps: a big light numeral over each step, like the homepage's process. */
.a-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); counter-reset: a-step; }
.a-steps li { counter-increment: a-step; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--body); font-size: 1rem; line-height: 1.6; }
.a-steps li::before { content: counter(a-step); display: block; margin-bottom: 14px; color: var(--blue-ink); font: 300 3rem/1 var(--font); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.a-steps b { display: block; margin-bottom: 6px; color: var(--ink); font: 750 1.125rem/1.3 var(--font); }

/* Product rows with a real screenshot: no card, the screen and the words. */
.a-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 48px 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .a-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.answer-page .l-plans { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.a-card { display: flex; flex-direction: column; min-width: 0; border-radius: 0; overflow: visible; background: none; box-shadow: none; }
.a-card > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border: 0; border-radius: 14px; background: var(--frame); }
.a-card-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 20px 0 0; }
.a-card-name { margin: 0; color: var(--ink); font: 820 1.75rem/1.1 var(--font); letter-spacing: -.02em; }
.a-card-name .prod-icon { width: 1.1em; height: 1.1em; vertical-align: -.18em; margin-right: .35em; }
.a-card-tag { margin: 0; color: var(--ink); font-weight: 700; }
.a-card-line { margin: 0; color: var(--body); }
.a-card-meta { margin: 0; color: var(--soft); font-size: .9375rem; }
.a-card-links { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.a-card-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue-ink); font-weight: 700; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* Phone screenshots in a row that wraps. */
.answer-page .l-shots { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }

/* A facts table: a real information box, so it keeps a 1px rule. On phones each row stacks into a labeled block. */
.a-table-wrap { overflow-x: auto; border-radius: 12px; background: none; box-shadow: none; border: 1px solid var(--rule); }
.a-table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.5; color: var(--body); }
.a-table th, .a-table td { padding: 14px 20px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.a-table thead th { color: var(--soft); font-size: .9375rem; font-weight: 700; }
.a-table tbody th { color: var(--ink); font-weight: 700; }
.a-table tbody th .prod-icon { width: 1.5em; height: 1.5em; margin-right: .6em; vertical-align: -.4em; border-radius: 22%; }
.a-table tbody tr:last-child > * { border-bottom: 0; }
.a-table a { color: var(--blue-ink); }
.a-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-table-wrap + .l-p { margin-top: 16px; }
@media (max-width: 640px) {
  .a-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .a-table tr { display: block; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
  .a-table tbody tr:last-child { border-bottom: 0; }
  .a-table th, .a-table td { display: block; padding: 0; border: 0; }
  .a-table tbody th { margin-bottom: 6px; font-size: 1.0625rem; }
  .a-table td + td { margin-top: 6px; }
  .a-table td[data-label]::before { content: attr(data-label); display: block; color: var(--soft); font-size: .875rem; font-weight: 700; }
  .a-table .num { white-space: normal; }
}

/* The address block on the Pennsylvania page. */
.a-address { margin: 0; font-style: normal; color: var(--ink); line-height: 1.6; }

.answer-page .l-plans + .l-p { margin-top: 24px; }
.answer-page .ed-points + .l-p, .a-address + .l-p { margin-top: 20px; }