/* /compare/larridin-vs-dx/: long-form comparison article on the compare shell. */

.cdx-hero { padding-block: 32px 40px; border-bottom: 1px solid var(--cmp-hairline-soft); }
.cdx-hero__inner { display: flex; flex-direction: column; gap: 20px; }
.page-compare .cdx-hero__title { max-width: 920px; font-size: 36px; }
.cdx-hero__title span { color: var(--cmp-muted); }
.cdx-hero__lead { max-width: 720px; }
.cdx-byline { margin: 0; font-size: 14px; line-height: 1.5; color: var(--cmp-muted); }
.cdx-byline strong { font-weight: 600; color: var(--cmp-ink); }

.cdx-layout { display: grid; gap: 32px; padding-block: 32px 64px; }

.cdx-toc { border: 1px solid var(--cmp-hairline); background: var(--cmp-band); padding: 18px 20px; align-self: start; }
.cdx-toc__title { margin: 0 0 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.96px; text-transform: uppercase; color: var(--cmp-indigo); }
.cdx-toc ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.4; color: var(--cmp-muted); }
.cdx-toc a { color: var(--cmp-body); text-decoration: none; }
.cdx-toc a:hover,
.cdx-toc a[aria-current="true"] { color: var(--cmp-indigo); }

.cdx-article { min-width: 0; max-width: 820px; display: flex; flex-direction: column; gap: 56px; }
.cdx-section { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 155px; }
.cdx-section > p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--cmp-body); }
.cdx-section strong { font-weight: 600; color: var(--cmp-ink); }
.cdx-section a { color: var(--cmp-indigo); }
.page-compare .cdx-h3 { margin-top: 24px; font-size: 22px; }

.cdx-ref { font-size: 11px; line-height: 0; margin-left: 2px; }
.cdx-section .cdx-ref a,
.cdx-ref a { color: var(--cmp-indigo); text-decoration: none; font-weight: 500; }
.cdx-ref a:hover { text-decoration: underline; }

.cdx-answer { padding: 24px; background: var(--cmp-us); border-left: 3px solid var(--cmp-indigo); }
.cdx-answer > p { color: var(--cmp-ink); font-size: 17px; }

.cdx-choose { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cdx-choose__card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--cmp-hairline); font-size: 15px; line-height: 1.55; color: var(--cmp-body); }
.cdx-choose__card strong { font-family: var(--font-display); font-weight: 400; font-size: 20px; letter-spacing: -0.01em; }
.cdx-choose__card--us { border-color: var(--cmp-us-line); background: var(--cmp-us); }

.cdx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cdx-list li { padding: 16px 0; border-top: 1px solid var(--cmp-hairline-soft); font-size: 16px; line-height: 1.6; color: var(--cmp-body); }
.cdx-list li:last-child { border-bottom: 1px solid var(--cmp-hairline-soft); }


.cdx-table-wrap { border: 1px solid var(--cmp-hairline); }
.cdx-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.cdx-table thead { display: none; }
.cdx-table tr { display: block; padding: 16px; border-top: 1px solid var(--cmp-hairline); }
.cdx-table tbody tr:first-child { border-top: 0; }
.cdx-table th[scope="row"] { display: block; text-align: left; font-size: 15px; font-weight: 600; color: var(--cmp-ink); margin-bottom: 8px; }
.cdx-table td { display: block; padding: 8px 0; color: var(--cmp-body); }
.cdx-table td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; color: var(--cmp-muted); margin-bottom: 2px; }
.cdx-table td.cdx-table__us::before { color: var(--cmp-indigo); }
.cdx-table__limits { background: #fffbea; }
.cdx-table__us-row { background: var(--cmp-us); }
.cdx-table__note { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--cmp-muted); }
.cdx-anchor { scroll-margin-top: 155px; }
.cdx-qa { display: flex; flex-direction: column; border-top: 1px solid var(--cmp-hairline-soft); }
.cdx-qa__item { padding: 18px 0; border-bottom: 1px solid var(--cmp-hairline-soft); }
.page-compare .cdx-qa__q { margin: 0 0 8px; font-family: var(--font-sans); font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--cmp-ink); }
.cdx-qa__item p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--cmp-body); }
.cdx-note { padding: 16px 18px; background: var(--cmp-band); font-size: 14px !important; line-height: 1.6 !important; }

.cdx-roles { margin: 0; border: 1px solid var(--cmp-hairline); }
.cdx-roles > div { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-top: 1px solid var(--cmp-hairline); }
.cdx-roles > div:first-child { border-top: 0; }
.cdx-roles dt { font-size: 15px; font-weight: 600; color: var(--cmp-ink); }
.cdx-roles dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--cmp-body); }

.cdx-steps { list-style: none; counter-reset: cdx-step; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cdx-steps li { counter-increment: cdx-step; position: relative; padding: 18px 18px 18px 60px; border: 1px solid var(--cmp-hairline); font-size: 15px; line-height: 1.55; color: var(--cmp-body); }
.cdx-steps li::before { content: counter(cdx-step); position: absolute; left: 18px; top: 16px; width: 28px; height: 28px; display: grid; place-items: center; background: var(--cmp-lime); color: var(--cmp-lime-ink); font-size: 14px; font-weight: 600; }

.cdx-section .cdx-proof { display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid var(--cmp-hairline); text-decoration: none; color: var(--cmp-ink); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.cdx-section .cdx-proof:hover { border-color: var(--cmp-indigo); box-shadow: var(--cmp-shadow); }
.cdx-proof__title { font-family: var(--font-display); font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; }
.cdx-proof__more { margin-top: 12px; font-size: 15px; color: var(--cmp-body); }
.cdx-proof__body { font-size: 15px; color: var(--cmp-body); }

.cdx-faq .cmp-faq__list { margin-top: 4px; }

.cdx-sources__list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--cmp-muted); }
.cdx-sources__list li { scroll-margin-top: 155px; }
.cdx-sources__list li:target { background: var(--cmp-us); }
.cdx-sources__list span { color: var(--cmp-body); }
.cdx-section .cdx-sources__list a { color: var(--cmp-indigo); overflow-wrap: anywhere; }
.cdx-related { padding-top: 24px; border-top: 1px solid var(--cmp-hairline); }
.page-compare .cdx-related__title { margin: 0 0 12px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--cmp-ink); }
.cdx-related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cdx-related a { display: inline-flex; padding: 8px 14px; border: 1px solid var(--cmp-hairline); font-size: 14px; color: var(--cmp-ink); text-decoration: none; }
.cdx-related a:hover { border-color: var(--cmp-indigo); color: var(--cmp-indigo); }

@media (min-width: 640px) {
  .page-compare .cdx-hero__title { font-size: 44px; }
  .cdx-hero__actions { flex-direction: row; }
  .cdx-hero__actions .cmp-btn { width: auto; }
  .cdx-choose { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cdx-roles > div { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }

  .cdx-table thead { display: table-header-group; }
  .cdx-table tr { display: table-row; padding: 0; }
  .cdx-table th, .cdx-table td { display: table-cell; padding: 14px 16px; vertical-align: top; text-align: left; border-top: 1px solid var(--cmp-hairline); }
  .cdx-table thead th { border-top: 0; background: var(--cmp-band); font-size: 12px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; color: var(--cmp-muted); }
  .cdx-table thead th.cdx-table__us { color: var(--cmp-indigo); background: var(--cmp-us); }
  .cdx-table th[scope="row"] { display: table-cell; width: 22%; margin: 0; font-size: 14px; }
  .cdx-table td::before { display: none; }
  .cdx-table td.cdx-table__us { background: var(--cmp-us); }
  .cdx-table__limits td.cdx-table__us { background: #fff6d6; }
  .cdx-table--glossary th[scope="row"] { width: 24%; }
  .cdx-table--alts th[scope="row"] { width: 18%; }
  .cdx-table--alts td:nth-child(3) { width: 38%; }
}

@media (min-width: 1024px) {
  .cdx-hero { padding-block: 48px 56px; }
  .page-compare .cdx-hero__title { font-size: 52px; }
  .cdx-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 64px; padding-block: 56px 96px; }
  .cdx-toc { position: sticky; top: 96px; background: transparent; border: 0; border-left: 1px solid var(--cmp-hairline); padding: 4px 0 4px 20px; }
  .cdx-toc ol { list-style: none; padding-left: 0; gap: 10px; }
}
.page-compare .cdx-cta__eyebrow { margin-bottom: 12px; color: var(--cmp-lime); }