/* This article keeps the shared site chrome and adds a comparison reading layout. */
.comparison-post { max-width: 1100px; }
.comparison-post > .post__answer,
.comparison-intro,
.comparison-method,
.comparison-close,
.comparison-post > .post__source,
.comparison-post > .post__cta { max-width: 720px; margin-inline: auto; }
.comparison-post .comparison-note { font-size: var(--fs-small, .9rem); color: var(--ink-faint); }
.comparison-post .post__table { min-width: 760px; }
/* Sources: one short row per app, name on the left, its links beside it, instead of a long bullet list. */
.comparison-post .source-list { margin: 14px 0 0; border-top: 1px solid var(--line); }
.comparison-post .source-list > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 2px 16px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.comparison-post .source-list dt { margin: 0; font-weight: 600; color: var(--ink-soft); }
.comparison-post .source-list dd { margin: 0; line-height: 1.6; }
.comparison-post .source-list__sep { margin: 0 .45em; color: var(--line-strong); }
@media (max-width: 520px) {
  .comparison-post .source-list > div { grid-template-columns: 1fr; }
}
.comparison-post .post__table tbody tr:first-child > * { background: transparent; }
.comparison-post .post__table tbody tr:hover > * { background: var(--paper-2); }
.comparison-post .post__table caption { text-align: left; padding: 18px 16px; color: var(--ink); font-weight: 600; }
.comparison-post .post__table th,
.comparison-post .post__table td { padding: 13px 16px; }
.comparison-post a:not(.btn) { color: var(--link, #407249); }
.comparison-post a:focus-visible { outline: 3px solid var(--link, #407249); outline-offset: 4px; }
.comparison-app { padding: 34px 0 38px; border-top: 1px solid var(--line); scroll-margin-top: 110px; }
.comparison-app__heading { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 22px; }
.comparison-app__number { font-family: var(--font-display); font-size: var(--fs-h3, 1.55rem); line-height: 1.3; color: var(--label, #47786f); }
.comparison-post .comparison-app h3 { margin: 0 0 6px; font-size: var(--fs-h3, 1.55rem); }
.comparison-post .comparison-app__fit { margin: 0; color: var(--label, #47786f); font-weight: 600; }
.comparison-app__body { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 36px; align-items: start; }
.comparison-app__media { display: grid; gap: 26px; min-width: 0; }
.comparison-app .fx-media { display: block; margin: 0; min-width: 0; }
.comparison-app .fx-media__item { max-width: 100%; margin: 0; }
.comparison-app .fx-media__item img { width: 100%; height: auto; border-radius: var(--radius, 8px); }
.comparison-app .fx-clip { width: 100%; margin-inline: auto; }
.comparison-app .fx-clip video { width: 100%; height: auto; }
.comparison-app .fx-media__item figcaption { font-size: var(--fs-small, .9rem); line-height: 1.5; }
.comparison-app__copy { min-width: 0; }
.comparison-app__caveat { padding-left: 16px; border-left: 2px solid var(--line); }
.comparison-post .comparison-app__cost { font-size: var(--fs-small, .9rem); margin-bottom: 0; }
.comparison-method { margin-bottom: 38px; }
.comparison-post .comparison-method h2,
.comparison-post .comparison-close h2 { margin-top: 1.5em; }
@media (max-width: 800px) {
  .comparison-app__body { grid-template-columns: 1fr; gap: 24px; }
  .comparison-app .fx-media { max-width: 600px; }
  .comparison-app__heading { gap: 12px; }
  .comparison-app { padding-block: 28px 32px; }
}

/* The comparison table is local to this article, using the current site's tokens. */
.comparison-post .post__table-wrap {
  margin: 0 0 1.15em;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.comparison-post .post__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  line-height: 1.45;
}
.comparison-post .post__table th,
.comparison-post .post__table td {
  text-align: left;
  vertical-align: top;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.comparison-post .post__table thead th {
  font-weight: 600;
  color: var(--ink-faint);
  background: var(--paper-2);
}
.comparison-post .post__table tbody th { font-weight: 600; color: var(--ink); }
.comparison-post .post__table tbody tr:last-child > * { border-bottom: 0; }