.tsp-comparison-page,
.tsp-comparison-page * { box-sizing: border-box; }
.tsp-comparison-page {
  --blue:#1677ff;
  --blue-dark:#0f4fc4;
  --navy:#132238;
  --muted:#5d6f87;
  --line:#dbe4ef;
  --tint:#f4f8fc;
  --green:#10a755;
  --green-soft:#e8f8ef;
  --orange:#f28a16;
  color:var(--navy);
  font-family:Poppins,Montserrat,Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  overflow-x:clip;
}

body.tsp-comparison-page {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
  width: 100%;
}
.tsp-comparison-page img { display:block; max-width:100%; }
.tsp-comparison-page a { color:var(--blue); text-decoration:none; }
.tsp-comparison-page p { margin:0 0 18px; }
.tsp-comparison-page h1,.tsp-comparison-page h2,.tsp-comparison-page h3 { color:var(--navy); font-family:Poppins,Montserrat,Arial,sans-serif; font-weight:700; letter-spacing:-.035em; line-height:1.12; margin:0; }
.tsp-comparison-page h1 { font-size:clamp(44px,5.2vw,76px); }
.tsp-comparison-page h2 { font-size:clamp(34px,4vw,56px); }
.tsp-comparison-page h3 { font-size:23px; }
.tsp-compare-shell { margin:0 auto; max-width:1280px; padding-left:32px; padding-right:32px; width:100%; }
.tsp-compare-section { padding:104px 0; }
.tsp-section-white { background:#fff; }
.tsp-section-tint { background:var(--tint); }
.tsp-section-dark { background:#0e1d31; color:#cbd7e8; }
.tsp-section-dark h2,.tsp-section-dark h3 { color:#fff; }
.tsp-eyebrow { color:#526c8a; font-size:14px; font-weight:700; letter-spacing:.18em; margin-bottom:18px!important; text-transform:uppercase; }
.tsp-eyebrow-light { color:#a9c6ef; }
.tsp-section-heading { margin:0 auto 52px; max-width:850px; text-align:center; }
.tsp-section-heading h2 { margin-bottom:22px; }
.tsp-section-heading>p:last-child { color:var(--muted); font-size:18px; }

.tsp-compare-nav { background:#fff; border-bottom:1px solid var(--line); border-top:1px solid var(--line); position:sticky; top:0; z-index:20; }
.tsp-compare-nav-inner { align-items:center; display:flex; gap:8px; overflow-x:auto; padding-bottom:14px; padding-top:14px; scrollbar-width:none; }
.tsp-compare-nav-inner::-webkit-scrollbar { display:none; }
.tsp-compare-nav a { border:1px solid transparent; border-radius:999px; color:#52657e; flex:0 0 auto; font-size:13px; font-weight:700; padding:8px 14px; }
.tsp-compare-nav a:hover,.tsp-compare-nav a:focus-visible { background:#eef5ff; border-color:#cbdfff; color:var(--blue); outline:none; }

.tsp-compare-hero { background:linear-gradient(135deg,#eef6ff 0%,#fff 48%,#effbf4 100%); overflow:hidden; padding:92px 0 108px; }
.tsp-compare-hero-grid { align-items:center; display:grid; gap:72px; grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr); }
.tsp-compare-hero-copy { max-width:590px; }
.tsp-lede { color:var(--muted); font-size:20px; line-height:1.75; margin-top:28px!important; }
.tsp-button-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.tsp-button { align-items:center; border:2px solid transparent; border-radius:8px; display:inline-flex; font-size:16px; font-weight:700; justify-content:center; min-height:54px; padding:13px 24px; transition:.2s ease; }
.tsp-button:hover { transform:translateY(-2px); }
.tsp-button-primary { background:var(--blue); box-shadow:0 12px 24px rgba(22,119,255,.24); color:#fff!important; }
.tsp-button-primary:hover { background:var(--blue-dark); }
.tsp-button-secondary { background:#fff; border-color:#c9d7e8; color:var(--navy)!important; }
.tsp-verified { color:#4d647e; font-size:14px; margin-top:22px!important; }
.tsp-verified span { background:var(--green-soft); border-radius:50%; color:var(--green); display:inline-grid; height:24px; margin-right:8px; place-items:center; width:24px; }
.tsp-product-stage { min-height:560px; position:relative; }
.tsp-product-stage:before { background:radial-gradient(circle,rgba(22,119,255,.18),transparent 68%); content:""; inset:8% -8% -8% 6%; position:absolute; }
.tsp-stage-main,.tsp-stage-float { background:#fff; border:1px solid #d9e4f0; border-radius:14px; box-shadow:0 28px 70px rgba(26,49,80,.18); position:absolute; }
.tsp-stage-main { right:0; top:0; width:92%; }
.tsp-stage-float { bottom:0; left:0; width:60%; }

.tsp-intro-grid { align-items:start; display:grid; gap:100px; grid-template-columns:.85fr 1.15fr; }
.tsp-prose { color:var(--muted); font-size:18px; }
.tsp-note { background:#f4f8fc; border-left:4px solid var(--blue); border-radius:0 8px 8px 0; font-size:15px; padding:20px 22px; }

.tsp-fit-grid { display:grid; gap:22px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.tsp-fit-card { background:#fff; border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; min-height:385px; padding:30px; }
.tsp-fit-card h3 { margin:15px 0 14px; }
.tsp-fit-card p,.tsp-fit-card li { color:var(--muted); font-size:15px; }
.tsp-fit-card ul { margin:0 0 20px; padding-left:20px; }
.tsp-fit-card>a { font-weight:700; margin-top:auto; }
.tsp-fit-card:hover { border-color:#aacaff; box-shadow:0 16px 36px rgba(31,72,119,.09); transform:translateY(-3px); transition:.22s ease; }
.tsp-fit-featured { background:linear-gradient(145deg,#102038,#163d71); border:0; color:#d6e2f2; grid-column:span 2; }
.tsp-fit-featured h3 { color:#fff; font-size:32px; }
.tsp-fit-featured p,.tsp-fit-featured li { color:#d6e2f2; }
.tsp-fit-top { align-items:center; display:flex; gap:12px; }
.tsp-brand-dot { background:linear-gradient(135deg,#1677ff,#18bf69); border-radius:12px; height:38px; width:38px; }
.tsp-fit-label { color:#6c83a1; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.tsp-fit-featured .tsp-fit-label { color:#a9c6ef; }
.tsp-fit-callout { border-top:1px solid #e2e9f1; margin-top:4px!important; padding-top:17px; }

.tsp-matrix-shell { --tsp-criteria-width:220px; margin-left:auto; margin-right:auto; max-width:1920px; padding-left:24px; padding-right:24px; }
.tsp-table-wrap { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 46px rgba(31,72,119,.08); overflow:auto; }
.tsp-comparison-table { border-collapse:separate; border-spacing:0; min-width:1660px; table-layout:fixed; width:100%; }
.tsp-comparison-table th,.tsp-comparison-table td { border-bottom:1px solid #e4ebf3; border-right:1px solid #e4ebf3; font-size:12px; overflow-wrap:anywhere; padding:18px 12px; text-align:left; vertical-align:top; }
.tsp-comparison-table th:last-child,.tsp-comparison-table td:last-child { border-right:0; }
.tsp-comparison-table tbody tr:last-child th,.tsp-comparison-table tbody tr:last-child td { border-bottom:0; }
.tsp-comparison-table thead th { background:#132238; color:#fff; font-size:12px; position:sticky; top:0; z-index:2; }
.tsp-comparison-table thead th:first-child { left:0; max-width:var(--tsp-criteria-width); min-width:var(--tsp-criteria-width); width:var(--tsp-criteria-width); z-index:5; }
.tsp-comparison-table tbody th { background:#fff; color:var(--navy); left:0; max-width:var(--tsp-criteria-width); min-width:var(--tsp-criteria-width); position:sticky; width:var(--tsp-criteria-width); z-index:4; }
.tsp-comparison-table .tsp-sp-column { background:#f1f7ff; }
.tsp-comparison-table thead .tsp-sp-column { background:var(--blue); left:var(--tsp-criteria-width); position:sticky; z-index:6; }
.tsp-comparison-table tbody .tsp-sp-column { box-shadow:8px 0 14px -14px rgba(19,34,56,.75); left:var(--tsp-criteria-width); position:sticky; z-index:3; }
.tsp-comparison-table small { color:#73839a; display:block; line-height:1.45; margin-top:8px; }
.tsp-status { border-radius:999px; display:inline-block; font-size:10px; font-weight:700; letter-spacing:.04em; line-height:1.25; padding:6px 9px; text-transform:uppercase; }
.tsp-status.documented { background:var(--green-soft); color:#07883f; }
.tsp-status.addon { background:#e5f7ec; color:#008f42; }
.tsp-status.tier { background:#fff3df; color:#a95c00; }
.tsp-status.external { background:#edf1f6; color:#58677b; }
.tsp-status.verify { background:#eef4ff; color:#3569bc; }
.tsp-table-scroll-cue { color:#52657e; display:none; font-size:13px; font-weight:700; margin:0 0 10px!important; text-align:right; }
.tsp-table-disclaimer { color:#718197; font-size:12px; margin:22px auto 0!important; max-width:960px; text-align:center; }

@media (max-width:1599px) {
  .tsp-table-scroll-cue { display:block; }
}

@media (min-width:1600px) {
  .tsp-comparison-table { min-width:0; }
}

.tsp-why-grid { align-items:center; display:grid; gap:80px; grid-template-columns:1fr 1fr; }
.tsp-why-grid>div>p:not(.tsp-eyebrow) { font-size:18px; }
.tsp-reasons { display:grid; gap:0; margin-top:42px; }
.tsp-reasons article { border-top:1px solid rgba(255,255,255,.13); display:grid; gap:20px; grid-template-columns:48px 1fr; padding:24px 0; }
.tsp-reasons article>span { color:#7fb1ff; font-size:13px; font-weight:700; }
.tsp-reasons h3 { font-size:20px; margin-bottom:8px; }
.tsp-reasons p { color:#aebdd0; font-size:14px!important; margin:0!important; }
.tsp-why-visuals { min-height:670px; position:relative; }
.tsp-why-visuals img { border:1px solid rgba(255,255,255,.16); border-radius:12px; box-shadow:0 28px 60px rgba(0,0,0,.3); position:absolute; }
.tsp-why-visuals img:first-child { left:0; top:0; width:90%; }
.tsp-why-visuals img:last-child { bottom:0; right:0; width:70%; }

.tsp-head-grid { display:grid; gap:22px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.tsp-head-grid article { background:#fff; border:1px solid var(--line); border-radius:12px; padding:30px; }
.tsp-head-grid h3 { margin-bottom:14px; }
.tsp-head-grid p { color:var(--muted); font-size:15px; margin:0; }
.tsp-detail-links { background:#fff; border:1px solid var(--line); border-radius:12px; margin-top:28px; padding:28px 30px; }
.tsp-detail-links>h3 { margin-bottom:8px; }
.tsp-detail-links>p { color:var(--muted); font-size:15px; margin:0; }
.tsp-detail-link-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.tsp-detail-link-grid a { background:#eef5ff; border:1px solid #cbdfff; border-radius:999px; color:#0f55cc; font-size:13px; font-weight:700; padding:9px 14px; }
.tsp-detail-link-grid a:hover,.tsp-detail-link-grid a:focus-visible { background:#e2edff; border-color:#8ebaff; outline:none; }

.tsp-proof-grid { align-items:center; display:grid; gap:90px; grid-template-columns:.8fr 1.2fr; }
.tsp-proof-grid h2 { margin-bottom:24px; }
.tsp-proof-grid p { color:var(--muted); font-size:17px; }
.tsp-text-link { display:inline-block; font-weight:700; margin-top:10px; }
.tsp-proof-stack { min-height:540px; position:relative; }
.tsp-proof-stack img { background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 22px 55px rgba(31,72,119,.15); position:absolute; }
.tsp-proof-stack img:first-child { right:0; top:0; width:86%; }
.tsp-proof-stack img:last-child { bottom:0; left:0; width:62%; }
.tsp-proof-stack-single { min-height:0; }
.tsp-proof-stack-single img:first-child,.tsp-proof-stack-single img:last-child { bottom:auto; left:auto; position:relative; right:auto; top:auto; width:100%; }

.tsp-source-grid { display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.tsp-source-grid a { background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px 22px; }
.tsp-source-grid a:hover { border-color:#9ac3ff; }
.tsp-source-grid strong,.tsp-source-grid span { display:block; }
.tsp-source-grid strong { color:var(--navy); font-size:16px; }
.tsp-source-grid span { color:var(--muted); font-size:13px; margin-top:3px; }

.tsp-faq-grid { display:grid; gap:80px; grid-template-columns:.7fr 1.3fr; }
.tsp-faq-list { display:grid; gap:14px; }
.tsp-faq-list details { border:1px solid var(--line); border-radius:10px; padding:0 24px; }
.tsp-faq-list summary { color:var(--navy); cursor:pointer; font-size:17px; font-weight:700; padding:22px 0; }
.tsp-faq-list details p { color:var(--muted); font-size:15px; padding-bottom:22px; }
.tsp-compare-cta { background:linear-gradient(135deg,#0c3f9e,#1677ff 58%,#119c56); color:#eaf3ff; padding:92px 0; text-align:center; }
.tsp-compare-cta h2 { color:#fff; margin-bottom:20px; }
.tsp-compare-cta p:not(.tsp-eyebrow) { font-size:18px; margin-left:auto; margin-right:auto; max-width:820px; }
.tsp-button-row-center { justify-content:center; }
.tsp-button-light { background:#fff; color:#0f55cc!important; }
.tsp-button-outline-light { border-color:rgba(255,255,255,.72); color:#fff!important; }

@media (max-width:1100px) {
  .tsp-compare-hero-grid { gap:48px; grid-template-columns:1fr; }
  .tsp-compare-hero-copy { max-width:760px; }
  .tsp-product-stage { min-height:600px; margin:0 auto; max-width:850px; width:100%; }
  .tsp-intro-grid,.tsp-why-grid,.tsp-proof-grid,.tsp-faq-grid { gap:54px; }
  .tsp-fit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tsp-fit-featured { grid-column:span 2; }
}
@media (max-width:820px) {
  .tsp-compare-shell { padding-left:22px; padding-right:22px; }
  .tsp-matrix-shell { --tsp-criteria-width:190px; padding-left:16px; padding-right:16px; }
  .tsp-compare-section { padding:76px 0; }
  .tsp-compare-hero { padding:70px 0 78px; }
  .tsp-intro-grid,.tsp-why-grid,.tsp-proof-grid,.tsp-faq-grid { grid-template-columns:1fr; }
  .tsp-why-visuals,.tsp-proof-stack { min-height:600px; }
  .tsp-source-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .tsp-comparison-page { font-size:15px; }
  .tsp-comparison-page h1 { font-size:42px; }
  .tsp-comparison-page h2 { font-size:34px; }
  .tsp-button-row,.tsp-button { width:100%; }
  .tsp-product-stage { min-height:380px; }
  .tsp-stage-main { width:96%; }
  .tsp-stage-float { width:68%; }
  .tsp-fit-grid,.tsp-head-grid,.tsp-source-grid { grid-template-columns:1fr; }
  .tsp-fit-featured { grid-column:span 1; }
  .tsp-fit-card { min-height:0; }
  .tsp-why-visuals { min-height:430px; }
  .tsp-proof-stack { min-height:390px; }
  .tsp-source-grid a { padding:17px 18px; }
  .tsp-detail-links { padding:24px 22px; }
  .tsp-detail-link-grid { display:grid; grid-template-columns:1fr; }
  .tsp-detail-link-grid a { border-radius:10px; }
  .tsp-compare-nav-inner { padding-left:16px; padding-right:16px; }
}
