/* comparison page; shares the variables and the page frame of docs.css */
.cmp-wrap { max-width: 1180px; margin: 0 auto; padding: 120px 28px 110px; position: relative; z-index: 1; }
.cmp-wrap h1 { font-size: 46px; font-weight: 300; margin: 0 0 10px; }
.cmp-wrap h1 .rescolor { color: var(--d-acc); font-weight: 600; }
.cmp-wrap h2 { font-size: 26px; font-weight: 600; margin: 52px 0 10px; }
.cmp-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; }
.cmp-facts div { background: var(--d-card); border: 1px solid var(--d-line); border-radius: 14px; padding: 18px 20px; }
.cmp-facts strong { display: block; font-size: 30px; font-weight: 600; color: var(--d-acc); line-height: 1.15; }
.cmp-facts span { display: block; margin-top: 6px; font-size: 15px; color: var(--d-dim); line-height: 1.4; }
.cmp-bars { max-width: 760px; }
.cmp-bar { display: grid; grid-template-columns: 150px 1fr 40px; gap: 14px; align-items: center; margin: 9px 0; font-size: 16px; }
.cmp-bar .track { height: 14px; border-radius: 7px; background: var(--d-line); overflow: hidden; }
.cmp-bar .fill { display: block; height: 100%; width: var(--w); background: var(--d-dim); border-radius: 7px; opacity: .65; }
.cmp-bar.rc { font-weight: 700; }
.cmp-bar.rc .fill { background: var(--d-acc); opacity: 1; }
.cmp-bar .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cmp-note { color: var(--d-dim); font-size: 15px; margin-top: 8px; }
.cmp-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 18px 0 8px; }
.cmp-tools select, .cmp-tools button { font: inherit; font-size: 15px; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--d-line); background: var(--d-card); color: var(--d-text); cursor: pointer; }
.cmp-tools button:hover, .cmp-tools select:hover { border-color: var(--d-acc); }
.cmp-tools label { font-size: 15px; color: var(--d-dim); display: inline-flex; gap: 10px; align-items: center; }
.cmp-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--d-dim); margin: 6px 0 14px; }
.cmp-legend span { display: inline-flex; align-items: center; gap: 8px; }
.cmp-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: middle; border: 2px solid var(--d-acc); box-sizing: border-box; }
.cmp-dot.s2 { background: var(--d-acc); }
.cmp-dot.s1 { background: linear-gradient(90deg, var(--d-acc) 50%, transparent 50%); }
.cmp-dot.s0 { border-color: var(--d-line); background: transparent; }
.cmp-na { color: var(--d-dim); }
.cmp-group { border: 1px solid var(--d-line); border-radius: 14px; background: var(--d-card); margin: 12px 0; overflow: hidden; }
.cmp-group > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: center; padding: 16px 20px; }
.cmp-group > summary::-webkit-details-marker { display: none; }
.cmp-group > summary::before { content: "\25B8"; position: absolute; margin-left: -2px; opacity: 0; }
.g-title { font-size: 19px; font-weight: 600; }
.g-title::before { content: "\25B8"; display: inline-block; width: 1.1em; color: var(--d-acc); transition: transform .15s; }
.cmp-group[open] .g-title::before { transform: rotate(90deg); }
.g-score { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--d-dim); flex-wrap: wrap; justify-content: flex-end; }
.g-score b { color: var(--d-acc); font-size: 17px; }
.g-score b.o { color: var(--d-text); opacity: .75; }
.g-score em { font-style: normal; }
.g-bars { display: inline-flex; flex-direction: column; gap: 3px; width: 90px; }
.g-bars span { display: block; height: 6px; border-radius: 3px; width: var(--w); background: var(--d-dim); opacity: .55; }
.g-bars span.rc { background: var(--d-acc); opacity: 1; }
.cmp-scroll { overflow-x: auto; border-top: 1px solid var(--d-line); }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.cmp-table th, .cmp-table td { padding: 10px 12px; font-size: 15px; border-bottom: 1px solid var(--d-line); text-align: center; }
.cmp-table thead th { font-size: 13px; font-weight: 700; color: var(--d-dim); position: sticky; top: 0; background: var(--d-bg); }
.cmp-table thead th.rc { color: var(--d-acc); }
.cmp-table tbody th { text-align: left; font-weight: 400; position: sticky; left: 0; background: var(--d-bg); min-width: 280px; max-width: 420px; }
.cmp-table td.rc, .cmp-table thead th.rc { background: rgba(139,191,255,.10); }
@media (prefers-color-scheme: light) { .cmp-table td.rc, .cmp-table thead th.rc { background: rgba(28,126,214,.07); } }
.cmp-table tr:last-child th, .cmp-table tr:last-child td { border-bottom: 0; }
/* compare with one product: hide the other columns */
.cmp-table[data-with="1"] [data-c]:not([data-c="0"]):not([data-c="1"]) { display: none; }
.cmp-table[data-with="2"] [data-c]:not([data-c="0"]):not([data-c="2"]) { display: none; }
.cmp-table[data-with="3"] [data-c]:not([data-c="0"]):not([data-c="3"]) { display: none; }
.cmp-table[data-with="4"] [data-c]:not([data-c="0"]):not([data-c="4"]) { display: none; }
.cmp-table[data-with="5"] [data-c]:not([data-c="0"]):not([data-c="5"]) { display: none; }
.cmp-table[data-with="6"] [data-c]:not([data-c="0"]):not([data-c="6"]) { display: none; }
.cmp-table[data-with]:not([data-with="all"]) { min-width: 0; }
.cmp-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 14px; }
.cmp-card-grid article { background: var(--d-card); border: 1px solid var(--d-line); border-radius: 14px; padding: 20px 22px; }
.cmp-card-grid h3 { font-size: 21px; font-weight: 600; margin: 0; }
.cmp-card-grid em { display: block; font-style: normal; color: var(--d-acc); font-size: 14px; margin: 2px 0 10px; }
.cmp-card-grid p { font-size: 15px; line-height: 1.55; opacity: .92; margin: 0; }
.cmp-foot { font-size: 12px; color: var(--d-dim); opacity: .65; max-width: 62em; margin-top: 28px; line-height: 1.5; }
.cmp-cta p { max-width: 40em; }
.cmp-cta .button { margin-right: 18px; }
.cmp-pdf { color: var(--d-acc); font-weight: 600; text-decoration: underline; }
@media (max-width: 960px) { .cmp-facts { grid-template-columns: repeat(2, 1fr); } .cmp-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .cmp-wrap { padding: 92px 16px 90px; } .cmp-wrap h1 { font-size: 34px; }
  .cmp-facts, .cmp-card-grid { grid-template-columns: 1fr; }
  .cmp-bar { grid-template-columns: 110px 1fr 32px; }
  .cmp-group > summary { grid-template-columns: 1fr; } .g-score { justify-content: flex-start; }
  .cmp-table tbody th { min-width: 180px; }
}

/* bars grow when their section is revealed */
.cmp-bar .fill { width: 0; transition: width 1.1s cubic-bezier(.25,.1,.2,1) .4s; }
.cmp-bars.animate .cmp-bar .fill { width: var(--w); }
@media (prefers-reduced-motion: reduce) { .cmp-bar .fill { transition: none; } }