/* The comparison pages (/compare/, /compare/hiring/, /compare/lindy/): stat cards, a side-by-side table that stacks
   on a phone, platform cards, and the "checked on" notes. Built on public/pages/shell.css. No hover scale anywhere. */
.cmp-narrow { max-width: 900px; margin: 0 auto; }
.cmp-note { margin: 16px 0 0; font-size: 14px; color: #6B7280; text-align: center; }
.cmp-note a, .la-card-p a, .cmp-table a { color: #536ee5; }

.cmp-stat-n { font-family: var(--brand-font-heading); font-size: 44px; line-height: 1; color: #536ee5; }

.cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #E4E9F5; border-radius: 22px; overflow: hidden; font-size: 15px; line-height: 1.55; color: #374151; }
.cmp-table th, .cmp-table td { padding: 18px 22px; text-align: left; vertical-align: top; border-top: 1px solid #EEF1F7; }
.cmp-table thead th { border-top: 0; font-family: var(--brand-font-heading); font-size: 18px; font-weight: 600; color: #232323; background: #F7F8FC; }
.cmp-table tbody th { width: 22%; font-weight: 600; color: #232323; }
.cmp-table td.is-us { background: #F5F7FE; }
.cmp-table thead th:last-child { color: #3D55C4; background: #EEF1FD; }

.cmp-plat { gap: 10px; }
.cmp-plat .la-card-t { margin: 0; }
.cmp-plat dl { margin: 6px 0 0; display: flex; flex-direction: column; gap: 10px; }
.cmp-plat dt { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; }
.cmp-plat dd { margin: 2px 0 0; font-size: 15px; line-height: 1.5; color: #374151; }
.cmp-plat.is-us { border-color: #C9D3F5; background: #F5F7FE; }

.cmp-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cmp-pick .la-card { gap: 10px; }
.cmp-pick ul { margin: 0; padding-left: 1.2em; font-size: 15px; line-height: 1.6; color: #374151; }
.cmp-pick li + li { margin-top: 6px; }

.cmp-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cmp-link { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; background: #fff; border: 1px solid #E4E9F5; border-radius: 18px; text-decoration: none; color: #232323; transition: border-color .2s ease, box-shadow .2s ease; }
.cmp-link:hover { border-color: #536ee5; box-shadow: 0 20px 40px -28px rgba(83, 110, 229, .6); }
.cmp-link b { font-family: var(--brand-font-heading); font-size: 19px; }
.cmp-link span { font-size: 14px; color: #6B7280; line-height: 1.5; }

@media (max-width: 991px) { .cmp-links { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .cmp-pick { grid-template-columns: 1fr; }
  .cmp-table thead { display: none; }
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display: block; width: auto; }
  .cmp-table tbody tr { border-top: 1px solid #E4E9F5; }
  .cmp-table tbody tr:first-child { border-top: 0; }
  .cmp-table tbody th { width: auto; padding-bottom: 6px; border-top: 0; background: #F7F8FC; }
  .cmp-table td { border-top: 0; padding-top: 8px; }
  .cmp-table td::before { content: attr(data-h); display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; }
}

/* ---- the visual pieces (2026-10-28, round two: less text, more to look at) ---- */
/* hero spectrum: from doing it all yourself to having it done with you */
/* the end labels sit on the line (the circles' center, 32px down), and the line runs from the first circle's center
   to the last one's (each node is 140px wide, so 70px in from each end) */
.cmp-spec { display: flex; align-items: flex-start; gap: 18px; max-width: 980px; margin: 44px auto 0; }
.cmp-spec-end { flex: none; height: 64px; display: flex; align-items: center; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8A93A8; }
.cmp-spec-track { position: relative; flex: 1; display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
.cmp-spec-track::before { content: ""; position: absolute; left: 70px; right: 70px; top: 31px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #DDE2F0, #536ee5); }
.cmp-spec-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 140px; text-align: center; }
.cmp-spec-node b { font-family: var(--brand-font-heading); font-size: 16px; color: #232323; }
.cmp-spec-ic { width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 1px solid #E4E9F5; color: #6B7591; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 14px 30px -22px rgba(35, 42, 80, .5); }
.cmp-spec-ic svg { width: 30px; height: 30px; }
.cmp-spec-ic.is-us { border: 2px solid #536ee5; box-shadow: 0 0 0 6px rgba(83, 110, 229, .12), 0 18px 36px -20px rgba(83, 110, 229, .7); }
.cmp-spec-ic.is-us img { width: 34px; height: 34px; }
.cmp-spec-node.is-us b { color: #3D55C4; }

/* the four-routes matrix */
.cmp-matrix { background: #fff; border: 1px solid #E4E9F5; border-radius: 22px; overflow: hidden; }
.cmp-mx-row { display: grid; grid-template-columns: minmax(170px, 1.1fr) repeat(4, minmax(0, 1fr)); border-top: 1px solid #EEF1F7; }
.cmp-mx-row:first-child { border-top: 0; }
.cmp-mx-row > span { padding: 16px 18px; font-size: 15px; line-height: 1.45; color: #374151; display: flex; align-items: center; gap: 10px; }
.cmp-mx-row.is-head > span { background: #F7F8FC; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px; }
.cmp-mx-col-ic { width: 36px; height: 36px; border-radius: 10px; background: #EEF1FD; color: #536ee5; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.cmp-mx-col-ic svg { width: 20px; height: 20px; }
.cmp-mx-col b { font-family: var(--brand-font-heading); font-size: 17px; color: #232323; }
.cmp-mx-col small { font-size: 13px; color: #6B7280; }
.cmp-mx-q { font-weight: 600; color: #232323 !important; }
.cmp-mx-row > .is-us { background: #F5F7FE; }
.cmp-mx-row.is-head > .is-us { background: #E8ECFC; }
.cmp-mx-row.is-head > .is-us b { color: #3D55C4; }
.cmp-mx-ic { flex: none; width: 22px; height: 22px; display: inline-flex; }
.cmp-mx-ic svg { width: 22px; height: 22px; }
.cmp-mx-cell.is-good .cmp-mx-ic { color: #22A06B; }
.cmp-mx-cell.is-mid .cmp-mx-ic { color: #D9821C; }
.cmp-mx-cell.is-ask .cmp-mx-ic { color: #9CA3AF; }
.cmp-mx-cell.is-us.is-good { color: #1F2A44; font-weight: 600; }

/* platform cards with real logos and pills */
.cmp-plats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cmp-plat2 { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: #fff; border: 1px solid #E4E9F5; border-radius: 22px; }
.cmp-plat2 h3 { margin: 4px 0 0; font-family: var(--brand-font-heading); font-size: 22px; color: #232323; }
.cmp-plat2 > p { margin: 0; font-size: 15px; line-height: 1.5; color: #4B5563; }
.cmp-logo { width: 56px; height: 56px; border-radius: 16px; background: #fff; border: 1px solid #E4E9F5; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 12px 24px -18px rgba(35, 42, 80, .45); }
.cmp-logo img { width: 34px; height: 34px; border-radius: 8px; }
.cmp-plat2.is-us { border-color: #C9D3F5; background: linear-gradient(180deg, #F5F7FE, #fff); }
.cmp-pills { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cmp-pill { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px 6px 9px; border-radius: 999px; background: #F3F4F8; color: #374151; font-size: 14px; font-weight: 500; line-height: 1.3; }
.cmp-pill span { width: 16px; height: 16px; display: inline-flex; color: #8A93A8; flex: none; }
.cmp-pill span svg { width: 16px; height: 16px; }
.cmp-pill.is-yes { background: #E7F6EF; color: #14613F; }
.cmp-pill.is-yes span { color: #22A06B; }
.cmp-pill.is-part { background: #FDF3E4; color: #8A4B0B; }
.cmp-pill.is-part span { color: #D9821C; }
.cmp-pill.is-no { background: #F1F2F6; color: #4B5563; }
.cmp-src { margin: auto 0 0 !important; padding-top: 6px; font-size: 13px !important; color: #8A93A8 !important; }
.cmp-src a { color: #536ee5; }

/* we help your team adopt it */
.cmp-adopt { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; padding: 48px; border-radius: 28px; background: radial-gradient(90% 130% at 0% 0%, rgba(83, 110, 229, .14), rgba(83, 110, 229, 0) 60%), #fff; border: 1px solid #E4E9F5; }
.cmp-adopt-head .la-h2, .cmp-adopt-head .la-sub { text-align: left; }
.cmp-adopt-head .la-sub { margin-top: 12px; }
.cmp-adopt-team { display: inline-flex; margin-bottom: 18px; }
.cmp-adopt-team img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; margin-left: -12px; box-shadow: 0 8px 18px -10px rgba(35, 42, 80, .5); }
.cmp-adopt-team img:first-child { margin-left: 0; }
.cmp-adopt-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cmp-adopt-steps li { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; row-gap: 2px; align-items: start; padding: 18px; background: #fff; border: 1px solid #E4E9F5; border-radius: 18px; }
.cmp-adopt-ic { grid-row: span 2; width: 56px; height: 56px; border-radius: 16px; background: #EEF1FD; color: #536ee5; display: inline-flex; align-items: center; justify-content: center; }
.cmp-adopt-ic svg { width: 30px; height: 30px; }
.cmp-adopt-steps b { font-family: var(--brand-font-heading); font-size: 19px; color: #232323; display: flex; align-items: center; gap: 8px; }
.cmp-adopt-n { font-family: Figtree, sans-serif; font-size: 12px; font-weight: 700; width: 22px; height: 22px; border-radius: 50%; background: #536ee5; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.cmp-adopt-steps li > span:last-child { font-size: 15px; line-height: 1.5; color: #4B5563; }

/* the other one-on-one comparisons, as logo chips under the links */
.cmp-others { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cmp-others a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 10px; border-radius: 999px; background: #fff; border: 1px solid #E4E9F5; color: #232323; font-weight: 600; font-size: 15px; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.cmp-others a:hover { border-color: #536ee5; color: #3D55C4; }
.cmp-others img { width: 22px; height: 22px; border-radius: 6px; }

/* directory chips */
.cmp-dirs { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 900px; }
.cmp-dirs a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: #fff; border: 1px solid #E4E9F5; color: #232323; font-weight: 600; font-size: 15px; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.cmp-dirs a:hover { border-color: #536ee5; color: #3D55C4; }
.cmp-dirs a span { width: 16px; height: 16px; display: inline-flex; color: #536ee5; }
.cmp-dirs a span svg { width: 16px; height: 16px; }

/* lilAgents or Lindy: the versus header and who does each part */
.cmp-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch; max-width: 820px; margin: 44px auto 0; }
.cmp-vs-x { align-self: center; }
.cmp-vs-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px 20px; background: #fff; border: 1px solid #E4E9F5; border-radius: 24px; box-shadow: 0 24px 48px -36px rgba(35, 42, 80, .5); text-align: center; }
.cmp-vs-side.is-us { border-color: #C9D3F5; background: linear-gradient(180deg, #F5F7FE, #fff); }
.cmp-vs-side b { font-family: var(--brand-font-heading); font-size: 24px; color: #232323; }
.cmp-vs-side small { font-size: 15px; color: #4B5563; line-height: 1.4; text-wrap: balance; }
.cmp-vs-x { font-family: var(--brand-font-heading); font-size: 22px; color: #8A93A8; }
.cmp-vs .cmp-logo { width: 72px; height: 72px; border-radius: 20px; }
.cmp-vs .cmp-logo img { width: 46px; height: 46px; }
.cmp-team { display: inline-flex; margin-top: 2px; }
.cmp-team img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -8px; box-shadow: 0 6px 14px -8px rgba(35, 42, 80, .5); }
.cmp-team img:first-child { margin-left: 0; }
.cmp-jobs { background: #fff; border: 1px solid #E4E9F5; border-radius: 22px; overflow: hidden; }
.cmp-job { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; border-top: 1px solid #EEF1F7; }
.cmp-job:first-child { border-top: 0; }
.cmp-job > span { padding: 14px 18px; font-size: 15px; color: #374151; display: flex; align-items: center; gap: 10px; height: 100%; }
.cmp-job.is-head > span { background: #F7F8FC; font-family: var(--brand-font-heading); font-size: 17px; color: #232323; }
.cmp-job.is-head > span.is-us { background: #E8ECFC; color: #3D55C4; }
.cmp-job > span.is-us { background: #F5F7FE; color: #1F2A44; font-weight: 600; }
.cmp-job-q { font-weight: 600; color: #232323 !important; }
.cmp-who { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #EEF0F5; color: #6B7280; }
.cmp-who svg { width: 16px; height: 16px; }
.cmp-who.is-us { width: auto; padding: 0; background: none; }
.cmp-who.is-us img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -9px; }
.cmp-who.is-us img:first-child { margin-left: 0; }

@media (max-width: 991px) {
  .cmp-plats { grid-template-columns: 1fr 1fr; }
  .cmp-adopt { grid-template-columns: 1fr; padding: 32px; gap: 28px; }
  .cmp-spec-end { display: none; }
}
@media (max-width: 767px) {
  .cmp-spec { margin-top: 32px; }
  .cmp-spec-track::before { left: 35px; right: 35px; top: 23px; }
  .cmp-spec-node { width: 70px; gap: 8px; }
  .cmp-spec-node b { font-size: 12px; line-height: 1.25; }
  .cmp-spec-ic { width: 48px; height: 48px; }
  .cmp-spec-ic svg { width: 22px; height: 22px; }
  .cmp-spec-ic.is-us img { width: 26px; height: 26px; }
  .cmp-matrix { border-radius: 18px; }
  .cmp-mx-row { grid-template-columns: 1fr 1fr; }
  .cmp-mx-row.is-head { display: none; }
  .cmp-mx-q { grid-column: 1 / -1; background: #F7F8FC; padding: 12px 16px !important; }
  .cmp-mx-cell { flex-direction: column; align-items: flex-start !important; gap: 6px !important; padding: 12px 16px !important; font-size: 14px !important; }
  .cmp-mx-cell::before { content: attr(data-h); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A93A8; }
  .cmp-plats { grid-template-columns: 1fr; }
  .cmp-adopt { padding: 24px; border-radius: 22px; }
  .cmp-vs { grid-template-columns: 1fr; gap: 10px; }
  .cmp-vs-x { text-align: center; }
  .cmp-job { grid-template-columns: 1fr 1fr; }
  .cmp-job.is-head { display: none; }
  .cmp-job-q { grid-column: 1 / -1; background: #F7F8FC; }
  .cmp-job > span:not(.cmp-job-q) { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 14px; }
  .cmp-job > span:not(.cmp-job-q)::before { content: attr(data-h); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A93A8; }
}

.cmp-facts { margin-top: 28px; }
.cmp-pick .cmp-plat2 h3 { margin-top: 2px; }
.cmp-plat2 .cmp-logo, .cmp-vs-side .cmp-logo { align-self: flex-start; }
.cmp-vs-side .cmp-logo { align-self: center; }