/* /compare (network-precision-compare.js): paper and ink; Liquid Gold only on ODEI's own column and the marks. */
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-compare { padding-bottom: 40px; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-compare .px-head { padding-bottom: 6px; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-compare .px-head h1 { max-width: 18ch; text-wrap: balance; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-tagline { margin: 0 0 10px; font-family: var(--px-sans); font-size: 12px; font-weight: 640; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--px-gold-ink); }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-checked { margin: 12px 0 0; max-width: 68ch; font-family: var(--px-sans); font-size: 13px; line-height: 1.45; color: var(--bs-muted); }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-sec { margin-top: 36px; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-h { margin: 0; padding-bottom: 10px; font-family: var(--bs-serif); font-size: 26px; font-weight: 440; line-height: 1.15; letter-spacing: -.012em; color: var(--bs-ink); background-image: var(--px-gold-rule); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-family: var(--px-sans); font-size: 12.5px; color: var(--bs-ink-2); }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-key li { display: inline-flex; align-items: center; gap: 7px; }
/* The marks: a filled green dot for yes, a half-gold dot for in part, a dashed ring for a page that does not say. Words carry the meaning; the mark only helps the eye. */
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-mark { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; vertical-align: 1px; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-mark.is-yes { background: var(--bs-green); box-shadow: 0 0 0 3px rgb(45 106 67 / 14%); }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-mark.is-part { background: linear-gradient(90deg, var(--px-gold) 50%, transparent 50%); border: 1.5px solid var(--px-gold); }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-mark.is-no { border: 1.5px solid var(--bs-meta); }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-mark.is-unstated { border: 1.5px dashed var(--bs-meta); }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-text { display: flex; align-items: baseline; gap: 8px; margin: 0; font-family: var(--bs-serif); font-size: 15px; line-height: 1.42; color: var(--bs-ink); text-wrap: pretty; overflow-wrap: anywhere; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .is-unstated .px-cmp-text { color: var(--bs-muted); font-style: italic; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-src { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 4px 0 0; font-family: var(--px-sans); font-size: 12px; line-height: 1.3; color: var(--bs-muted); }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-src a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bs-ink-2); text-decoration: underline; text-decoration-color: var(--bs-hair-2); text-underline-offset: 3px; overflow-wrap: anywhere; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-src a:hover { color: var(--bs-ink); text-decoration-color: var(--bs-ink); }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-on { white-space: nowrap; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-row { display: block; font-family: var(--px-sans); font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--bs-ink); }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-sub { display: block; margin-top: 2px; font-family: var(--px-sans); font-size: 12px; font-weight: 400; line-height: 1.3; color: var(--bs-muted); }
/* A phone: one card per vendor, ODEI first. No sideways scroll anywhere. */
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-wide { display: none; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 4px; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--bs-hair-2); border-radius: 999px; font-family: var(--px-sans); font-size: 13.5px; font-weight: 560; color: var(--bs-ink); text-decoration: none; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-jump a:hover { background: var(--bs-paper-2); }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-card { margin-top: 12px; border: 1px solid var(--bs-hair-2); border-radius: 6px; background: var(--bs-paper); scroll-margin-top: 72px; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-card.is-own { border-color: var(--px-gold-edge); background: var(--px-gold-wash); box-shadow: inset 0 2px 0 var(--px-gold); }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-card > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; cursor: pointer; list-style: none; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-card > summary::-webkit-details-marker { display: none; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-card-name { font-family: var(--bs-serif); font-size: 20px; font-weight: 450; line-height: 1.2; color: var(--bs-ink); }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-card-more { flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 1.5px solid var(--bs-ink-2); border-bottom: 1.5px solid var(--bs-ink-2); transform: rotate(45deg) translateY(-3px); }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-card[open] .px-cmp-card-more { transform: rotate(-135deg) translateY(-3px); }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-list { margin: 0; padding: 0 16px 6px; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-list > div { padding: 12px 0 2px; border-top: 1px solid var(--bs-hair); }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-list dt { margin: 0 0 6px; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-list dt .px-cmp-row, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-list dt .px-cmp-sub { display: inline; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-list dt .px-cmp-sub::before { content: ", "; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-list dd { margin: 0; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-card-site { margin: 0; padding: 0 16px 8px; font-family: var(--px-sans); font-size: 13px; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-card-site a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bs-ink); text-decoration: underline; text-decoration-color: var(--bs-hair-2); text-underline-offset: 3px; }
/* The two short lists under the table. */
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-points { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-points li { padding: 16px 0 6px; border-bottom: 1px solid var(--bs-hair); }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-points h3 { margin: 0; font-family: var(--bs-serif); font-size: 19px; font-weight: 450; line-height: 1.25; color: var(--bs-ink); }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-points p { margin: 6px 0 0; max-width: 62ch; font-family: var(--bs-serif); font-size: 16px; line-height: 1.45; color: var(--bs-ink-2); text-wrap: pretty; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-points p.px-cmp-src { margin-top: 2px; font-family: var(--px-sans); font-size: 12px; }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-foot { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--bs-rule); }
:root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-legal { margin: 0 0 18px; max-width: 76ch; font-family: var(--px-sans); font-size: 12.5px; line-height: 1.5; color: var(--bs-muted); }
@media (min-width: 760px) {
  :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
}
/* A wide screen: the table. The row names stay put while the columns scroll; ODEI's column carries the gold edge. */
@media (min-width: 960px) {
  :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-narrow { display: none; }
  :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-wide { display: block; margin-top: 18px; }
  :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-scroll { overflow-x: auto; overscroll-behavior-x: contain; border-top: 1px solid var(--bs-rule); }
  :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-scroll:focus-visible { outline: 2px solid var(--bs-ink); outline-offset: 2px; }
  :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-table { width: 100%; min-width: 1180px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
  :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-corner, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-rowhead { width: 150px; }
  :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-table thead th, :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-corner { position: sticky; top: 0; z-index: 1; padding: 14px 10px 12px; border-bottom: 1px solid var(--bs-rule); background: var(--bs-paper); text-align: left; vertical-align: bottom; }
  :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-corner { left: 0; z-index: 3; }
  :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-vendor a { font-family: var(--bs-serif); font-size: 17px; font-weight: 450; line-height: 1.2; color: var(--bs-ink); text-decoration: none; }
  :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-vendor a:hover { text-decoration: underline; text-decoration-color: var(--bs-hair-2); text-underline-offset: 3px; }
  :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-vendor.is-own { background: var(--px-gold-wash); background-image: var(--px-gold-rule); background-size: 100% 2px; background-position: 0 0; background-repeat: no-repeat; box-shadow: inset 1px 0 0 var(--px-gold-edge), inset -1px 0 0 var(--px-gold-edge); }
  :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-vendor.is-own a { font-weight: 560; }
  :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-rowhead { position: sticky; left: 0; z-index: 2; padding: 14px 16px 12px 0; border-bottom: 1px solid var(--bs-hair); background: var(--bs-paper); text-align: left; vertical-align: top; box-shadow: inset -1px 0 0 var(--bs-hair); }
  :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-table td { padding: 14px 10px 6px; border-bottom: 1px solid var(--bs-hair); vertical-align: top; }
  :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-table td.is-own { background: var(--px-gold-wash); box-shadow: inset 1px 0 0 var(--px-gold-edge), inset -1px 0 0 var(--px-gold-edge); }
  :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-table .px-cmp-text { font-size: 14.5px; }
  :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-table .px-cmp-src a { min-height: 32px; }
}
@media (min-width: 960px) and (pointer: coarse) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-table .px-cmp-src a { min-height: 44px; } }
@media (forced-colors: active) { :root:root:root:root:root:root:root:root:root:root:root:root:root .px-cmp-mark { border: 1px solid CanvasText; } }