/* Compare: the job two ways, buying terms, the sourced matrix, leaving and
   moving over. Shared panels (.card, .rates, .scroller, FAQ) are in site.css. */
.cmp-hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .cmp-hero-grid { grid-template-columns: 1.1fr .9fr; gap: 64px; } }
.cmp-hero h1 { max-width: 14ch; }
.cmp-hero .actions { margin-top: 28px; }
/* The four usual tools, a rule, then the one desk (live's fold, drawn still). */
.fold { display: flex; flex-direction: column; align-items: center; }
.fold-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 240px; }
.fold-tools > span { padding: 7px 14px; border: 1px solid var(--navy-line); border-radius: var(--r-sm); color: var(--ink-3); font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.fold-desk { position: relative; display: grid; justify-items: center; gap: 8px; max-width: 280px; margin-top: 41px; padding: 28px 26px; background: var(--navy-2); border: 1px solid var(--navy-line); border-radius: var(--r-xl); text-align: center; }
.fold-desk::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 40px; background: var(--ink-3); }
.fold-desk b { font: 700 22px/1.2 var(--font-display); font-stretch: 92%; letter-spacing: -.02em; }
.fold-desk > span:last-child { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.fold-mark { display: block; width: 56px; height: 56px; }
.fold-mark svg { width: 100%; height: 100%; }

.cmp-after { margin: 24px 0 0; }

/* The two lists: a dash for the usual way, a tick for Plugboard. Plugboard's
   card carries the matrix column's 3px orange top bar. */
:is(.vs, .buy) .card ul { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
:is(.vs, .buy) .card li { position: relative; padding-left: 26px; font-size: 15px; line-height: 24px; }
:is(.vs, .buy) .card li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.vs .today li::before, .asks li::before { content: "\2013"; color: var(--ink-3); }
.vs .pb li::before { content: "\2713"; color: var(--ok); }
.vs { display: grid; gap: 16px; }
@media (min-width: 760px) { .vs { grid-template-columns: 1fr 1fr; } }
:is(.vs, .buy) .pb { background: linear-gradient(var(--brand), var(--brand)) top / 100% 3px no-repeat, var(--surface); }
.buy .asks { background: var(--surface-2); }
.buy .asks .note { margin-top: 18px; }
.buy .rates { margin: 12px 0 18px; }
.buy .rates p { font-size: 14px; line-height: 20px; }
.buy .rates > div > :first-child { flex: none; }

.diff { display: grid; gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; }
@media (min-width: 760px) { .diff { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.diff li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.diff svg { width: 16px; height: 16px; margin-top: 3px; color: var(--ok); }
.diff b { display: block; margin-bottom: 2px; font-weight: 650; font-stretch: 112.5%; }
.diff p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-bottom: 14px; font-size: 14px; }
.legend > span { display: inline-flex; align-items: center; gap: 10px; line-height: 1; }
.matrix { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14.5px; line-height: 20px; }
.matrix th, .matrix td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: center; }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.matrix thead th { padding-block: 16px; background: var(--surface-2); font-size: 12.5px; line-height: 16px; font-weight: 650; font-stretch: 112.5%; color: var(--ink-3); }
.matrix thead th:nth-child(2) { color: var(--ink); background: linear-gradient(var(--brand), var(--brand)) top / 100% 3px no-repeat, var(--surface-2); }
.matrix tbody th { font-weight: 600; }
.matrix tr.group th { padding: 24px 12px 8px; background: transparent; border-bottom: 1px solid var(--line-strong); text-align: left; font-size: 12.5px; font-weight: 650; font-stretch: 112.5%; color: var(--ink-3); }
.matrix tfoot th, .matrix tfoot td { padding: 16px 10px; border-top: 2px solid var(--ink); border-bottom: 0; font-size: 14px; color: var(--ink-2); }
.matrix tfoot th { font-weight: 650; color: var(--ink); }
.matrix tfoot td { white-space: nowrap; }
.matrix tfoot b { font: 700 20px/1 var(--font-display); color: var(--ink); }
@media (max-width: 1099px) { .matrix tbody th[scope="row"], .matrix thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); } .matrix thead th:first-child { background: var(--surface-2); } }
@media (max-width: 639px) { .matrix { min-width: 620px; } .matrix tbody th[scope="row"], .matrix thead th:first-child { width: 168px; } }
.cap { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 600; text-decoration: none; }
.cap > span[aria-hidden] { display: contents; }
.cap svg { display: block; }
.cap-yes { background: var(--green-soft); color: var(--ok); }
.cap-no { background: var(--brand-soft); color: var(--late); }
.cap-unknown, .cap-na { background: transparent; color: var(--ink-3); }
/* "Not reviewed": a short drawn rule, not a dash character. */
.cap-na::after { content: ""; width: 10px; height: 2px; border-radius: 1px; background: currentColor; }
.sources { margin-top: 20px; }
.sources summary { padding: 10px 0; font-weight: 600; cursor: pointer; }
.sources .grid { margin-top: 12px; }
.sources h3 { font-size: 16px; line-height: 22px; }
.sources :is(p, a) { font-size: 14px; }
.sources a { margin-right: 12px; }

.lock-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); margin: 0; padding: 0; list-style: none; }
.lock-grid li { display: grid; gap: 8px; align-content: start; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.lock-grid h3, .switch h3 { margin: 0; }
.lock-grid p, .switch p { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-2); }

/* Moving over: numbered steps on a shared rule, as live's stepper. */
.switch { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: sw; }
@media (min-width: 900px) { .switch { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.switch li { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 2px solid var(--line-strong); counter-increment: sw; }
.switch li::before { content: counter(sw); font: 700 28px/32px var(--font-display); font-variation-settings: "opsz" 96; color: var(--ink-3); }

/* Close: live's full-bleed navy band, left-aligned. */
.cmp-close .wrap > * { margin: 0; }
.cmp-close h2 { font-size: var(--h2-lg); line-height: 1.04; }
.cmp-close .lede { margin-top: 18px; }
.cmp-close .actions { margin-top: 28px; }
.cmp-close .note { margin-top: 14px; }