/* Page kit additions for the compare pages. */

/* Reviews and alternatives (cmp-): disclosure, verdict, sources, plan finder, requirement filter,
   question list, grouping line and the yearly cost ladder. */
.cmp-disc { background: #fff; border: 1px solid var(--ink); display: grid; margin-top: 8px; }
.cmp-disc-row { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--hairline); font-size: 14.5px; color: var(--ink-2); }
.cmp-disc-row:first-child { border-top: 0; }
.cmp-disc-row b { font-weight: 600; color: var(--ink); }
.cmp-disc-row a { color: var(--ink); text-underline-offset: 3px; }
.cmp-verdict { display: grid; gap: 20px; }
.cmp-verdict h2 { margin: 0; }
.cmp-verdict dl { margin: 0; display: grid; background: #fff; border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.cmp-verdict dl div { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 16px 20px; border-top: 1px solid var(--hairline); }
.cmp-verdict dl div:first-child { border-top: 0; }
.cmp-verdict dt { font: 600 15px/1.4 var(--sans); color: var(--ink); }
.cmp-verdict dd { margin: 0; font-size: 16px; color: var(--ink-2); }
.cmp-src-list { list-style: none; margin: 0; padding: 0; display: grid; background: #fff; border: 1px solid var(--hairline); }
.cmp-src-list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--hairline); font-size: 14px; }
.cmp-src-list li:first-child { border-top: 0; }
.cmp-src-list a { color: var(--ink); overflow-wrap: anywhere; }
.cmp-src-list span { color: var(--ink-4); white-space: nowrap; }
.cmp-pf-why { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
.cmp-pf-why:empty { display: none; }
.cmp-rf { display: grid; gap: 14px; }
.cmp-rf-count { margin: 0; font-size: 14px; color: var(--ink-3); }
.cmp-rf td.cmp-yes { background: var(--periwinkle-tint); }
.cmp-rf td.cmp-no { color: var(--ink-3); }
.cmp-rf tr.ours th { box-shadow: inset 3px 0 0 var(--ink); }
.cmp-rf tr.dim { opacity: .4; }
.cmp-rf th .chip { margin-left: 6px; vertical-align: middle; }
.cmp-rf .src { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--ink-4); }
.cmp-rf td.req { outline: 2px solid var(--ink); outline-offset: -2px; }
.cmp-ask { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; background: #fff; border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.cmp-ask-list { list-style: none; margin: 0; padding: 12px 24px; border-right: 1px solid var(--hairline); }
.cmp-ask-list li { border-top: 1px solid var(--hairline); }
.cmp-ask-list li:first-child { border-top: 0; }
.cmp-ask-list label { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 12px 0; cursor: pointer; font-size: 15px; color: var(--ink-2); }
.cmp-ask-list input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ink); }
.cmp-ask-list b { display: block; color: var(--ink); font-weight: 600; }
.cmp-ask-out { padding: 24px; display: grid; gap: 12px; align-content: start; }
.cmp-ask-h { margin: 0; font: 600 17px/1.3 var(--sans); color: var(--ink); }
.cmp-ask-out ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; color: var(--ink-2); }
.cmp-ask-out .btn { justify-self: start; }
.cmp-th { display: grid; gap: 16px; background: #fff; border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 22px; }
.cmp-th-ctl { display: grid; gap: 10px; padding-bottom: 34px; }
.cmp-th-ctl label { font-size: 15px; color: var(--ink-2); }
.cmp-th-ctl b { color: var(--ink); }
.cmp-th-ctl input[type=range] { width: 100%; accent-color: var(--ink); }
.cmp-th-marks { position: relative; height: 0; margin: 0 8px; }
.cmp-th-marks span { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; color: var(--ink-3); white-space: nowrap; display: grid; justify-items: center; gap: 2px; }
.cmp-th-marks span:nth-child(2) { top: 16px; }
.cmp-th-marks i { width: 1px; height: 8px; background: var(--ink); display: block; }
.cmp-th-sum { margin: 0; font: 600 16px/1.4 var(--sans); color: var(--ink); }
.cmp-th-rows { display: grid; }
.cmp-th-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--hairline); font-size: 14.5px; }
.cmp-th-row .vs { color: var(--ink-4); }
.cmp-th-note { display: block; font-size: 13px; color: var(--ink-4); }
.cmp-th-n { font: 500 13px/1 var(--mono); color: var(--ink-3); }
.cmp-lad { display: grid; gap: 16px; }
.cmp-lad-in { display: flex; flex-wrap: wrap; gap: 16px; }
.cmp-lad-in label { display: grid; gap: 6px; font-size: 14px; color: var(--ink-3); }
.cmp-lad-in input { height: 44px; width: 160px; padding: 0 12px; border: 1px solid var(--ink); font: 600 18px/1 var(--sans); color: var(--ink); background: var(--paper); }
.cmp-lad-rows { display: grid; background: #fff; border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.cmp-lad-row { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(0, 1.6fr) minmax(180px, 1fr); gap: 16px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--hairline); }
.cmp-lad-row:first-child { border-top: 0; }
.cmp-lad-row.ours { background: var(--periwinkle-tint); }
.cmp-lad-name { display: grid; gap: 2px; }
.cmp-lad-name b { font: 600 16px/1.2 var(--sans); color: var(--ink); }
.cmp-lad-name .chip { justify-self: start; }
.cmp-lad-name span[data-lad-plan] { font-size: 13px; color: var(--ink-4); }
.cmp-lad-bar { height: 14px; background: var(--paper-2); }
.cmp-lad-bar i { display: block; height: 100%; background: var(--ink); transition: width .25s; }
.cmp-lad-row.ours .cmp-lad-bar i { background: var(--periwinkle); border: 1px solid var(--ink); }
.cmp-lad-row.nofit .cmp-lad-bar i { background: repeating-linear-gradient(45deg, var(--hairline) 0 4px, transparent 4px 8px); }
.cmp-lad-sum { display: grid; gap: 2px; }
.cmp-lad-sum b { font: 600 18px/1.2 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.cmp-lad-sum span { font-size: 12.5px; color: var(--ink-4); }
.cmp-lad-sum a { color: var(--ink-4); }
@media (max-width: 760px) {
    .cmp-disc-row, .cmp-verdict dl div { grid-template-columns: 1fr; gap: 4px; }
    .cmp-ask { grid-template-columns: 1fr; }
    .cmp-ask-list { border-right: 0; border-bottom: 1px solid var(--hairline); }
    .cmp-lad-row { grid-template-columns: 1fr; gap: 8px; }
    .cmp-th-row { grid-template-columns: 1fr auto; }
    .cmp-th-n { display: none; }
    .cmp-src-list li { flex-direction: column; gap: 2px; }
}

/* SerpDad vs pages, third-party comparisons and the hub (cv-): sourced fact table, SERP pair with
   vendor tags, job strip, plan-by-hand game, autonomy dial, disclosure, price bars and small toggles. */
.cv-table table { min-width: 620px; }
.cv-table td.win { background: var(--periwinkle-tint); }
.cv-table td.us.win { background: var(--periwinkle-tint); }
.cv-table .src { margin-left: 8px; font-size: 12px; color: var(--ink-4); white-space: nowrap; }
.cv-win { display: inline-block; margin-left: 8px; padding: 3px 5px; border: 1px solid var(--ink); background: #fff; font: 500 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); vertical-align: middle; }
.cv-table-cap { padding: 10px 16px; }
@media (max-width: 640px) {
    .cv-table { overflow: visible; }
    .cv-table table { min-width: 0; }
    .cv-table thead { display: none; }
    .cv-table table, .cv-table tbody, .cv-table tr, .cv-table th, .cv-table td { display: block; width: auto !important; }
    .cv-table tr { border-bottom: 1px solid var(--ink); }
    .cv-table tbody th { background: var(--paper); border-bottom: 0; padding-bottom: 6px; }
    .cv-table td { padding: 8px 16px 12px; }
    .cv-table td::before { content: attr(data-col); display: block; margin-bottom: 3px; font-size: 12px; font-weight: 600; color: var(--ink-4); }
}

.cv-pair .serp li.cv-mk { box-shadow: inset 3px 0 0 var(--orange); }
.cv-mk-tag { margin-left: auto; margin-right: 6px; padding: 2px 5px; font: 500 9.5px/1 var(--mono); font-style: normal; letter-spacing: .05em; text-transform: uppercase; background: var(--orange); color: var(--ink); flex: none; }

.cv-disc { background: #fff; border: 1px solid var(--ink); display: grid; }
.cv-disc-row { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--hairline); font-size: 14.5px; color: var(--ink-2); }
.cv-disc-row:first-child { border-top: 0; }
.cv-disc-row b { font-weight: 600; color: var(--ink); }
.cv-disc-row a { color: var(--ink); text-underline-offset: 3px; }

.cv-strip { display: grid; gap: 14px; }
.cv-strip-scroll { overflow-x: auto; background: #fff; border: 1px solid var(--hairline); }
.cv-strip table { border-collapse: collapse; width: 100%; min-width: 860px; font-size: 13.5px; }
.cv-strip th, .cv-strip td { padding: 6px; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: middle; }
.cv-strip thead th { font: 600 13px/1.25 var(--sans); color: var(--ink); background: var(--paper); padding: 10px 8px; }
.cv-strip thead th.hi { background: var(--ink); color: #fff; }
.cv-strip td.hi { background: var(--amber-tint); }
.cv-strip tbody th { position: sticky; left: 0; z-index: 1; background: #fff; font-weight: 600; color: var(--ink); white-space: nowrap; padding: 8px 12px; min-width: 150px; }
.cv-strip tr.ours th { box-shadow: inset 3px 0 0 var(--ink); }
.cv-strip tr.ours th .chip { margin-left: 4px; }
.cv-cell { width: 100%; min-height: 36px; padding: 6px 8px; border: 1px solid var(--hairline); font: 500 12.5px/1.25 var(--sans); color: var(--ink); text-align: left; cursor: pointer; background: #fff; }
.cv-cell.l-yes { background: var(--periwinkle); border-color: var(--ink); }
.cv-cell.l-part { background: repeating-linear-gradient(45deg, var(--pink-tint) 0 6px, #fff 6px 10px); border-color: var(--pink); }
.cv-cell.l-no { background: #fff; color: var(--ink-3); border-style: dashed; border-color: var(--dashed); }
.cv-cell.on { outline: 2px solid var(--ink); outline-offset: 1px; }
.cv-strip-key { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--ink-3); }
.cv-strip-key span { display: inline-flex; align-items: center; gap: 6px; }
.cv-strip-key i { width: 16px; height: 14px; border: 1px solid var(--hairline); display: inline-block; }
.cv-strip-key i.l-yes { background: var(--periwinkle); border-color: var(--ink); }
.cv-strip-key i.l-part { background: repeating-linear-gradient(45deg, var(--pink-tint) 0 3px, #fff 3px 5px); border-color: var(--pink); }
.cv-strip-key i.l-no { border-style: dashed; border-color: var(--dashed); }
.cv-strip-note { background: #fff; border: 1px solid var(--ink); padding: 14px 16px; display: grid; gap: 4px; font-size: 15px; color: var(--ink-2); }
.cv-strip-note b { color: var(--ink); }
.cv-strip-note a { color: var(--ink-3); font-size: 13px; }
.cv-strip-note .mm { margin: 0; }

.cv-game { display: grid; gap: 18px; }
.cv-game-play { display: grid; gap: 14px; }
.cv-game-help { margin: 0; font-size: 15px; color: var(--ink-2); }
.cv-game-pool { display: flex; flex-wrap: wrap; gap: 8px; min-height: 52px; padding: 12px; background: #fff; border: 1px dashed var(--ink-4); }
.cv-chip { font: 500 13px/1.2 var(--mono); padding: 9px 10px; background: var(--paper); border: 1px solid var(--ink); cursor: pointer; color: var(--ink); text-align: left; }
.cv-chip.picked { background: var(--ink); color: #fff; }
.cv-chip.ok { background: var(--periwinkle); }
.cv-chip.no { background: var(--orange-tint); border-color: var(--orange); }
.cv-chip.ok::after, .cv-chip.no::after { margin-left: 6px; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; }
.cv-chip.ok::after { content: 'right'; }
.cv-chip.no::after { content: 'wrong'; }
.cv-game-buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.cv-bucket { min-height: 140px; background: #fff; border: 1px solid var(--hairline); padding: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; cursor: pointer; }
.cv-bucket:focus-visible { outline: 2px solid var(--ink); }
.cv-bucket.ready { border-color: var(--ink); background: var(--paper); }
.cv-bucket-h { width: 100%; font-size: 13px; color: var(--ink-4); }
.cv-game-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.cv-game-score { margin: 0; font: 600 20px/1.3 var(--sans); color: var(--ink); }
.cv-game-score:empty, .cv-game-why:empty { display: none; }
.cv-game-why { margin: 0; padding: 14px 16px 14px 34px; display: grid; gap: 8px; background: #fff; border: 1px solid var(--hairline); font-size: 14.5px; color: var(--ink-2); }
.cv-game-why b { color: var(--ink); }
.cv-game-answer { display: grid; gap: 10px; }
.cv-game-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.cv-game.js .cv-game-answer { display: none; }
.cv-game.js.checked .cv-game-answer { display: grid; }
.cv-game:not(.js) .cv-game-play { display: none; }

.cv-dial { display: grid; gap: 14px; }
.cv-dial-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; color: var(--ink-2); }
.cv-dial-key { display: inline-flex; align-items: center; gap: 8px; }
.cv-dial-key i { width: 14px; height: 14px; border: 1px solid var(--ink); display: inline-block; }
.cv-dial-key.t-a i, .cv-pin.t-a { background: var(--periwinkle-tint); }
.cv-dial-key.t-b i, .cv-pin.t-b { background: var(--pink-tint); }
.cv-dial-scale { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); position: relative; }
.cv-dial-stop { display: grid; gap: 10px; align-content: start; padding: 18px 16px; border-left: 1px solid var(--hairline); }
.cv-dial-stop:first-child { border-left: 0; }
.cv-dial-n { width: 24px; height: 24px; display: inline-grid; place-items: center; background: var(--ink); color: #fff; font: 500 12px/1 var(--mono); }
.cv-dial-stop b { font: 600 15px/1.3 var(--sans); color: var(--ink); }
.cv-dial-pins { display: grid; gap: 8px; }
.cv-pin { text-align: left; padding: 8px 10px; border: 1px solid var(--ink); font: 500 13px/1.3 var(--sans); color: var(--ink); cursor: pointer; }
.cv-pin.t-b { border-style: solid; }
.cv-pin.on { outline: 2px solid var(--ink); outline-offset: 1px; }
.cv-pin.t-a::before { content: 'S '; font: 600 11px/1 var(--mono); }
.cv-pin.t-b::before { content: 'F '; font: 600 11px/1 var(--mono); }
@media (max-width: 860px) {
    .cv-dial-scale { grid-template-columns: 1fr; }
    .cv-dial-stop { border-left: 0; border-top: 1px solid var(--hairline); }
    .cv-dial-stop:first-child { border-top: 0; }
}

/* Price bars: one row per plan, scaled to the most expensive listed price. */
.cv-bars { background: #fff; border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 18px; display: grid; gap: 10px; }
.cv-bars-h { margin: 0; font: 600 16px/1.3 var(--sans); color: var(--ink); }
.cv-bar { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; gap: 12px; align-items: center; font-size: 14px; color: var(--ink-2); }
.cv-bar b { color: var(--ink); font-weight: 600; }
.cv-bar-track { height: 14px; background: var(--paper-2); }
.cv-bar-track i { display: block; height: 100%; background: var(--ink); }
.cv-bar.ours .cv-bar-track i { background: var(--periwinkle); border: 1px solid var(--ink); }
.cv-bar.fee .cv-bar-track i { background: repeating-linear-gradient(45deg, var(--amber) 0 4px, #fff 4px 7px); border: 1px solid var(--ink); }
.cv-bar.custom .cv-bar-track { background: repeating-linear-gradient(90deg, var(--hairline) 0 4px, transparent 4px 8px); }
.cv-bar-v { font: 600 15px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-bars hr { border: 0; border-top: 1px solid var(--hairline); margin: 4px 0; }
@media (max-width: 520px) { .cv-bar { grid-template-columns: 1fr auto; } .cv-bar-track { grid-column: 1 / -1; grid-row: 2; } }

/* Two-column "choose them / choose us" and buyer profiles. */
.cv-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cv-two > div { background: #fff; border: 1px solid var(--hairline); padding: 24px; display: grid; gap: 12px; align-content: start; }
.cv-two > div.ours { border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.cv-two h3 { margin: 0; font: 600 20px/1.25 var(--sans); color: var(--ink); }
.cv-two ol, .cv-two ul { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 15.5px; color: var(--ink-2); }
.cv-two p { margin: 0; font-size: 15px; color: var(--ink-2); }
.cv-two a { color: var(--ink-4); font-size: 12px; }
@media (max-width: 860px) { .cv-two { grid-template-columns: 1fr; } }

/* Tabs and the lean picker. */
.cv-tabs { display: grid; gap: 14px; }
.cv-tab-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-tab-btns .mini-btn { cursor: pointer; height: 32px; }
.cv-tabs.js [data-panel] { display: none; }
.cv-tabs.js [data-panel].on { display: grid; }
.cv-lean { background: #fff; border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.cv-lean-row { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: stretch; padding: 12px 16px; border-top: 1px solid var(--hairline); }
.cv-lean-row:first-child { border-top: 0; }
.cv-lean-row > span { font: 600 14.5px/1.3 var(--sans); color: var(--ink); align-self: center; }
.cv-lean-row button { text-align: left; padding: 10px 12px; border: 1px solid var(--hairline); background: var(--paper); font: 400 14px/1.35 var(--sans); color: var(--ink-2); cursor: pointer; }
.cv-lean-row button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.cv-lean-out { margin: 0; padding: 14px 16px; border-top: 1px solid var(--ink); font: 600 16px/1.4 var(--sans); color: var(--ink); background: var(--amber-tint); }
@media (max-width: 760px) { .cv-lean-row { grid-template-columns: 1fr; } }

/* Self-check list. */
.cv-signs { background: #fff; border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.cv-signs ul { list-style: none; margin: 0; padding: 6px 20px; }
.cv-signs li { border-top: 1px solid var(--hairline); }
.cv-signs li:first-child { border-top: 0; }
.cv-signs label { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 14px 0; cursor: pointer; font-size: 15.5px; color: var(--ink-2); }
.cv-signs input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ink); }
.cv-signs label b { display: block; color: var(--ink); font-weight: 600; }
.cv-signs-out { margin: 0; padding: 14px 20px; border-top: 1px solid var(--ink); font: 600 16px/1.4 var(--sans); color: var(--ink); background: var(--paper); }
.cv-signs-out.hit { background: var(--orange-tint); }

/* Small lists: corrections log, rules. */
.cv-log { list-style: none; margin: 0; padding: 0; display: grid; background: #fff; border: 1px solid var(--hairline); }
.cv-log li { display: grid; grid-template-columns: 120px 220px 1fr; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--hairline); font-size: 14.5px; color: var(--ink-2); }
.cv-log li:first-child { border-top: 0; }
.cv-log b { color: var(--ink); font-weight: 600; }
.cv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.cv-card { background: #fff; border: 1px solid var(--hairline); padding: 20px 22px; display: grid; gap: 8px; align-content: start; }
.cv-card h3 { margin: 0; font: 600 18px/1.25 var(--sans); }
.cv-card h3 a { color: var(--ink); text-decoration: none; }
.cv-card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cv-card p { margin: 0; font-size: 15px; color: var(--ink-3); }
.cv-card .chip { justify-self: start; }
.cv-group-h { margin: 28px 0 12px; font: 600 18px/1.3 var(--sans); color: var(--ink); }
.cv-group-h:first-child { margin-top: 0; }
@media (max-width: 760px) {
    .cv-disc-row { grid-template-columns: 1fr; gap: 4px; }
    .cv-log li { grid-template-columns: 1fr; gap: 2px; }
}