/* Comparison pages — small additions ON TOP of the global Trace design system.
   Everything structural reuses existing classes (see SECTIONS.md). */

/* Short answer — answer-engine direct-answer block */
.short-answer-section { padding: 40px 5vw 0; }
.short-answer { max-width: 860px; margin: 0 auto; background: var(--teal-10);
  border-radius: 20px; padding: 30px 34px; }
.short-answer .lbl { font-family: Atak, sans-serif; font-weight: 500; color: var(--teal-50);
  font-size: 1.05em; letter-spacing: -0.01em; margin: 0 0 10px; }
.short-answer p { font-family: Inter, sans-serif; color: var(--charcoal-50);
  font-size: 1.15em; line-height: 1.6; margin: 0; }

/* Comparison table: center on desktop, scroll on mobile (3-col grid ~620px min) */
.cmp-compare { width: 100%; max-width: 960px; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-compare .feature-comparison-div { min-width: 600px; }

/* Hero camera image inside the real .split-hero-visual */
.cmp-hero-img { width: 100%; max-width: 480px; height: auto; display: block; margin: 0 auto; }

/* Feature-row media inside the real .basic-feature-div */
.basic-feature-div .cmp-media { width: 100%; height: auto; display: block; border-radius: 20px; }
.basic-feature-div .cmp-media.portrait { max-width: 300px; margin: 0 auto; }

/* FAQ arrow: rotate on open (our generated ids aren't bound to source IX2) */
.faq-arrow { color: var(--teal-40); }
.faq-arrow svg { transition: transform .25s ease; }
.faq-dropdown-toggle.w--open .faq-arrow svg { transform: rotate(90deg); }

/* Comparison table: x-cell with text needs the same left pad as .check.with-text */
.comparison-item.x.with-text { padding-left: 24px; }

/* ---- Hub-only: 6-column summary table + link cards (no native equivalent) ---- */
.hub-compare-wrap { overflow-x: auto; border: 1px solid var(--light-stroke); border-radius: 20px; }
table.hub-compare { width: 100%; border-collapse: collapse; background: #fff; font-family: Inter, sans-serif; min-width: 720px; }
table.hub-compare caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
table.hub-compare th, table.hub-compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--light-stroke); font-size: .95em; color: var(--charcoal-40); vertical-align: top; }
table.hub-compare thead th { background: var(--sand); color: var(--teal-50); font-family: Atak, sans-serif; font-weight: 500; }
table.hub-compare thead th.tc, table.hub-compare td.tc { background: var(--teal-10); color: var(--teal-50); }
table.hub-compare tbody th { font-weight: 600; color: var(--charcoal-50); }
table.hub-compare .yes { color: var(--teal-40); font-weight: 700; }
table.hub-compare .no { color: var(--charcoal-20); font-weight: 700; }
.hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
a.hub-card { display: block; text-decoration: none; background: #fff; border: 1px solid var(--light-stroke); border-radius: 20px; padding: 30px; transition: box-shadow .2s, transform .2s; }
a.hub-card:hover { box-shadow: 0 20px 34px -13px rgba(0,0,0,.14); transform: translateY(-2px); }
a.hub-card h3 { font-family: Atak, sans-serif; font-weight: 500; color: var(--teal-50); font-size: 1.5em; margin: 0 0 8px; letter-spacing: -0.01em; }
a.hub-card p { font-family: Inter, sans-serif; color: var(--charcoal-40); font-size: 1.02em; line-height: 1.5; margin: 0 0 12px; }
a.hub-card .go { font-family: Atak, sans-serif; color: var(--red); font-weight: 500; }
@media (max-width: 767px) { .hub-grid { grid-template-columns: 1fr; } }