/* Shared by the three comparison pages only. The static header bar is the
   same one the legal pages carry inline. */
.legalnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem var(--page-margin);
  border-bottom: 1px solid var(--gold-whisper);
}
.legalnav__mark { font-family: var(--serif); font-weight: 560; font-size: 1.3rem; color: var(--ink); }
.legalnav__mark .nav__period { color: var(--gold); }
.legalnav__back { font-family: var(--sans); font-size: 0.875rem; font-weight: 480; color: var(--ink-faded); }
.legalnav__back:hover { color: var(--gold-deep); }

.compare { padding: var(--section-pad) 0; }
.compare .wrap { max-width: 42rem; }
.compare__title { font-size: var(--text-xl); margin-bottom: var(--s-8); }
.compare .legal__updated { margin-top: var(--s-2); margin-bottom: var(--s-12); }
.compare h2 {
  font-family: var(--serif); font-weight: 500; font-size: var(--text-lg);
  color: var(--ink); margin-top: var(--s-16); margin-bottom: var(--s-4);
}
.compare p { color: var(--ink-soft); }
.compare p + p { margin-top: 1.2em; }
.compare a.inline { color: var(--gold-deep); border-bottom: 1px solid var(--gold-whisper); overflow-wrap: anywhere; }
.compare a.inline:hover { border-bottom-color: var(--gold-deep); }
.compare ul { margin-top: var(--s-2); padding-left: 1.2em; color: var(--ink-soft); }
.compare li + li { margin-top: var(--s-2); }
.compare__also { margin-top: var(--s-12); }

.compare__table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  margin: var(--s-12) 0;
}
.compare__table th, .compare__table td {
  text-align: left; vertical-align: top;
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom: 1px solid var(--gold-whisper);
}
.compare__table thead th {
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 480; color: var(--ink-faded);
}
.compare__table tbody th, .compare__table tbody td {
  font-family: var(--serif); font-size: var(--text-base); font-weight: 400;
  line-height: var(--leading-prose); color: var(--ink-soft);
}
.compare__table tbody th { color: var(--ink-faded); }
.compare__table .c-label { width: 34%; }
.compare__table .c-app { width: 33%; }

@media (max-width: 559px) {
  .compare__table, .compare__table tbody, .compare__table tr,
  .compare__table th, .compare__table td { display: block; width: auto; }
  .compare__table thead { display: none; }
  .compare__table tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--gold-whisper); }
  .compare__table th, .compare__table td { border-bottom: 0; padding: 0; }
  .compare__table tbody td::before { content: attr(data-label) ": "; color: var(--ink-faded); }
}