/* Tool comparison page (/aeo-seo-tool-comparison/) — matrix table + persona cards. */

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0 14px;
  border:1px solid var(--color-skylight);border-radius:12px}
table.tools{width:100%;border-collapse:collapse;min-width:860px;background:#fff;font-size:15px}
table.tools th{background:var(--color-sky);color:var(--color-ink-black);text-align:left;
  font-family:var(--font-display);font-weight:500;text-transform:uppercase;letter-spacing:.05em;
  font-size:12.5px;padding:12px 14px}
table.tools td{padding:13px 14px;border-top:1px solid var(--color-skylight);vertical-align:top;line-height:1.45}
table.tools tbody tr:nth-child(even){background:var(--color-paper)}
table.tools .tool-name{font-weight:700}
table.tools .tool-name a{color:var(--color-ink-black)}
table.tools .price{font-family:var(--font-display);font-size:13px;white-space:nowrap}

.tools-note{font-size:14px;font-style:italic;max-width:760px;margin:0 0 28px}

.persona-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:8px}
@media(max-width:760px){.persona-grid{grid-template-columns:1fr}}
.persona-card{background:#fff;border:1px solid var(--color-skylight);border-radius:12px;
  padding:22px 24px;border-top:4px solid var(--color-orange);display:flex;flex-direction:column}
.persona-card h3{font-family:var(--font-display);font-weight:500;font-size:20px;margin:0 0 10px}
.persona-card .situation{font-size:16px;margin:0 0 14px}
.persona-card .stack{background:var(--color-light-blue);border-radius:8px;padding:13px 15px;
  font-size:16px;margin:auto 0 0}
.persona-card .stack strong{font-family:var(--font-display);font-weight:500;text-transform:uppercase;
  letter-spacing:.05em;font-size:12px;display:block;margin-bottom:5px}

/* Space above the closing CTA callout */
.callout{margin-top:40px}