/* AEO pages (/promptperfect-alternative, /compare). Uses the style.css tokens;
   adds only what a comparison page needs: answer line, table, visual, FAQ.
   Loaded after style.css v58 on these pages only, so no shared asset is bumped. */
.aeo { max-width: 1040px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) 1.25rem 3rem; }
.aeo h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin-bottom: 0.9rem; max-width: 22ch; }
.aeo h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 2.4rem 0 0.8rem; }
.aeo p, .aeo li { color: var(--ink-2); }
.aeo p { margin-top: 0.8rem; max-width: 72ch; }
.aeo .answer {
  font-size: 1.15rem; line-height: 1.5; color: var(--ink); font-weight: 500;
  max-width: 62ch; padding: 0.9rem 1.1rem; background: var(--paper-2);
  border: 1px solid var(--rule); border-left: 4px solid var(--pen); border-radius: var(--radius);
}
.aeo .aeo-checked { margin-top: 0.7rem; }
.aeo-visual { margin: 1.8rem 0 0.4rem; }
.aeo-visual svg { width: 100%; height: auto; display: block; }
.aeo-visual figcaption { color: var(--ink-3); font-size: 0.82rem; margin-top: 0.5rem; }
.aeo-table-wrap { overflow-x: auto; margin-top: 0.4rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); }
.aeo-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 760px; }
.aeo-table th, .aeo-table td { text-align: left; vertical-align: top; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.aeo-table thead th { font-family: var(--body); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); background: var(--paper); }
.aeo-table tbody th { font-family: var(--body); font-weight: 700; color: var(--ink); white-space: nowrap; }
.aeo-table tbody tr:last-child th, .aeo-table tbody tr:last-child td { border-bottom: 0; }
.aeo-table tr.us th, .aeo-table tr.us td { background: var(--pen-wash); color: var(--ink); }
.aeo-list { padding-left: 1.2rem; margin-top: 0.7rem; }
.aeo-list li { margin: 0.4rem 0; max-width: 72ch; }
.aeo-faq { border-top: 1.5px solid var(--ink); margin-top: 0.8rem; }
.aeo-q { border-bottom: 1px solid var(--rule); padding: 1rem 0; }
.aeo-q h3 { font-size: 1.02rem; color: var(--ink); }
.aeo-q p { margin-top: 0.4rem; font-size: 0.96rem; }
.aeo-cta { margin-top: 2rem; display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }
.nav-mini { display: flex; gap: 1.05rem; margin-left: 0.9rem; }
.nav-mini a { color: var(--ink-2); text-decoration: none; font-size: 0.92rem; font-weight: 500; }
.nav-mini a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 760px) {
  .aeo-table { min-width: 0; }
  .aeo-table thead { position: absolute; left: -9999px; }
  .aeo-table, .aeo-table tbody, .aeo-table tr, .aeo-table th, .aeo-table td { display: block; }
  .aeo-table tr { border-bottom: 1px solid var(--rule); padding: 0.4rem 0; }
  .aeo-table th, .aeo-table td { border: 0; padding: 0.3rem 0.9rem; }
  .aeo-table td::before { content: attr(data-label); display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); font-weight: 700; }
  .nav-mini { gap: 0.7rem; margin-left: 0.4rem; }
}