/* Tool67 Compare / Alternatives
   Page-content styles only. Global header, footer, navigation and theme stay in /assets/. */

body.blog-page,
body.overview-page{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --cmp-bg:#f7f9fc;
  --cmp-panel:#fff;
  --cmp-panel-soft:#f2f5f9;
  --cmp-text:#111318;
  --cmp-text-soft:#334155;
  --cmp-muted:#718096;
  --cmp-line:#e3e8ef;
  --cmp-head:#f2f5f9;
  --cmp-sticky:#f7f9fc;
  --cmp-hover:rgba(91,76,255,.055);
  --cmp-accent:#6f56f8;
  --cmp-accent-2:#25bce7;
  --cmp-green:#159957;
  --cmp-red:#dc4c63;
  --cmp-orange:#ef7a48;
  --cmp-shadow:0 18px 48px rgba(15,23,42,.09);
  --cmp-gradient:linear-gradient(135deg,var(--cmp-accent),var(--cmp-accent-2));
  margin:0;
  min-width:320px;
  color-scheme:light;
  color:var(--cmp-text);
  background:
    radial-gradient(circle at 10% 8%,rgba(111,86,248,.09),transparent 30%),
    radial-gradient(circle at 92% 10%,rgba(37,188,231,.08),transparent 28%),
    var(--cmp-bg);
  -webkit-font-smoothing:antialiased;
}

html[data-theme="dark"] body.blog-page,
html[data-theme="dark"] body.overview-page,
html.dark body.blog-page,
html.dark body.overview-page{
  color-scheme:dark;
  --cmp-bg:#090d13;
  --cmp-panel:#101722;
  --cmp-panel-soft:#141d2a;
  --cmp-text:#f5f7fa;
  --cmp-text-soft:#c2ccd8;
  --cmp-muted:#93a0b1;
  --cmp-line:rgba(255,255,255,.09);
  --cmp-head:#121a26;
  --cmp-sticky:#0f1621;
  --cmp-hover:rgba(124,92,255,.06);
  --cmp-green:#49df8b;
  --cmp-red:#ff7385;
  --cmp-shadow:0 22px 60px rgba(0,0,0,.32);
  background:
    radial-gradient(circle at 12% 4%,rgba(124,92,255,.13),transparent 30%),
    radial-gradient(circle at 88% 8%,rgba(33,212,253,.09),transparent 28%),
    var(--cmp-bg);
}

.blog-page .reading-progress,
.overview-page .reading-progress{
  position:fixed;
  inset:0 0 auto;
  z-index:1000;
  height:3px;
  pointer-events:none;
  background:transparent;
}
.blog-page .reading-progress span,
.overview-page .reading-progress span{
  display:block;
  width:0;
  height:100%;
  background:var(--cmp-gradient);
  box-shadow:0 0 14px rgba(37,188,231,.4);
}


.blog-main{
  width:100%;
  max-width:var(--t67-page-max);
  margin:0 auto;
  padding:70px var(--t67-page-gutter) 92px;
  box-sizing:border-box;
  color:var(--cmp-text);
  line-height:1.65;
}
.blog-main a{color:inherit;text-decoration:none}
.blog-main img{display:block;max-width:100%}
.blog-main .page-container,
.blog-main .article-shell{position:relative}
.blog-main .page-kicker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0 0 22px;
  color:var(--cmp-muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.blog-main .page-kicker span{width:34px;height:1px;background:var(--cmp-gradient)}
.blog-main .article-shell>h1,
.blog-main .compare-article>h1{
  max-width:920px;
  margin:0 auto 20px;
  color:var(--cmp-text);
  text-align:center;
  font-size:clamp(38px,6vw,72px);
  line-height:1.02;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.blog-main .description{
  max-width:830px;
  margin:0 auto 34px;
  color:var(--cmp-muted);
  text-align:center;
  font-size:clamp(16px,2vw,19px);
  line-height:1.8;
  text-wrap:balance;
}
.blog-main .breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
  margin:0 0 28px!important;
  color:var(--cmp-muted)!important;
  font-size:13px!important;
}
.blog-main .breadcrumb-link,
.blog-main .breadcrumb-current{color:inherit!important}
.blog-main .breadcrumb-link:hover{color:var(--cmp-text)!important}
.blog-main .section-title,
.blog-main .article-shell>h2{
  margin:54px 0 22px;
  color:var(--cmp-text);
  font-size:clamp(25px,3vw,36px);
  line-height:1.2;
  letter-spacing:-.03em;
}
.blog-main .article-shell>p:not(.description),
.blog-main .content-panel p,
.blog-main .content-panel li{color:var(--cmp-text-soft)}
.blog-main strong{color:var(--cmp-text)}

.blog-main .vs-logos{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 auto 26px}
.blog-main .logo-icon,
.blog-main .vs-logo,
.blog-main .vs-brand-logo,
.blog-main .rank-logo,
.blog-main .table-logo,
.blog-main .comp-logo{
  object-fit:contain;
  background:#fff;
}
.blog-main .logo-icon,
.blog-main .vs-logo,
.blog-main .vs-brand-logo{
  width:48px;
  height:48px;
  padding:5px;
  border:1px solid var(--cmp-line);
  border-radius:14px;
  box-shadow:0 10px 28px rgba(15,23,42,.12);
}
.blog-main .vs-word{color:var(--cmp-muted)!important;font-size:20px!important;font-weight:750;text-transform:uppercase}

.blog-main .tldr-box{
  position:relative;
  overflow:hidden;
  max-width:940px;
  margin:0 auto 42px;
  padding:27px 30px;
  border:1px solid rgba(111,86,248,.24);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(111,86,248,.085),rgba(37,188,231,.05)),var(--cmp-panel);
  box-shadow:var(--cmp-shadow);
}
.blog-main .tldr-box:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--cmp-gradient)}
.blog-main .tldr-box p{margin:0;color:var(--cmp-text-soft);font-size:15.5px;line-height:1.8}
.blog-main .tldr-box a{color:var(--cmp-accent);font-weight:750}

.blog-main .rank-card{
  position:relative;
  margin-bottom:16px!important;
  padding:23px!important;
  border:1px solid var(--cmp-line)!important;
  border-radius:18px!important;
  background:var(--cmp-panel)!important;
  box-shadow:0 10px 30px rgba(15,23,42,.055);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.blog-main .rank-card:hover{transform:translateY(-3px);border-color:rgba(111,86,248,.32)!important;box-shadow:var(--cmp-shadow)}
.blog-main .rank-card-featured{border-color:rgba(239,122,72,.4)!important;background:linear-gradient(135deg,rgba(239,122,72,.07),rgba(111,86,248,.04)),var(--cmp-panel)!important}
.blog-main .rank-card-head{display:flex!important;align-items:center!important;gap:12px!important;margin-bottom:12px!important}
.blog-main .rank-number{padding:4px 10px!important;border-radius:8px!important;background:var(--cmp-panel-soft)!important;color:var(--cmp-text)!important;font-size:13px!important;font-weight:850!important}
.blog-main .rank-number-featured{color:#fff!important;background:var(--cmp-gradient)!important}
.blog-main .rank-logo,
.blog-main .rank-logo-fallback{width:34px!important;height:34px!important;padding:3px!important;border:1px solid var(--cmp-line);border-radius:9px!important}
.blog-main .rank-card-name{color:var(--cmp-text)!important;font-size:16px!important;font-weight:750!important}
.blog-main .rank-card-price{color:var(--cmp-muted)!important;font-size:13px!important}
.blog-main .rank-card-desc{margin:0 0 13px!important;color:var(--cmp-text-soft)!important;font-size:15px!important}
.blog-main .rank-card-actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
.blog-main .best-badge{margin-left:auto!important;padding:5px 10px!important;border-radius:999px!important;background:rgba(21,153,87,.1)!important;color:var(--cmp-green)!important;font-size:11px!important;font-weight:800!important;letter-spacing:.04em;text-transform:uppercase}

.blog-main .btn,
.blog-main .button.gradient{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 18px;border:1px solid transparent;border-radius:11px;font-size:13px;font-weight:800;transition:.2s ease}
.blog-main .btn-primary,
.blog-main .button.gradient{color:#fff!important;background:var(--cmp-gradient)!important;box-shadow:0 10px 24px rgba(111,86,248,.2)}
.blog-main .btn:hover,
.blog-main .button.gradient:hover{transform:translateY(-2px);filter:brightness(1.04)}
.blog-main .button-small{padding:9px 18px!important;font-size:13px!important}
.blog-main .chip-cloud{display:flex!important;flex-wrap:wrap!important;gap:9px!important;margin:16px 0 32px!important}
.blog-main .chip-link{display:inline-flex!important;align-items:center!important;padding:8px 13px!important;border:1px solid var(--cmp-line)!important;border-radius:999px!important;background:var(--cmp-panel)!important;color:var(--cmp-text-soft)!important;font-size:12px!important;transition:.2s ease}
.blog-main .chip-link:hover{color:var(--cmp-text)!important;border-color:rgba(111,86,248,.32)!important;background:rgba(111,86,248,.07)!important;transform:translateY(-1px)}

.blog-main .score-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px!important;margin:0 0 34px!important}
.blog-main .score-card{min-width:0!important;padding:20px!important;border:1px solid var(--cmp-line)!important;border-radius:18px!important;background:var(--cmp-panel)!important;text-align:center!important}
.blog-main .score-win{border-color:rgba(21,153,87,.22)!important;background:rgba(21,153,87,.055)!important}
.blog-main .score-loss{border-color:rgba(220,76,99,.22)!important;background:rgba(220,76,99,.05)!important}
.blog-main .score-number{font-size:34px!important;line-height:1;font-weight:850!important}
.blog-main .score-number-win{color:var(--cmp-green)!important}
.blog-main .score-number-loss{color:var(--cmp-red)!important}
.blog-main .score-number-tie{color:var(--cmp-muted)!important}
.blog-main .score-label{margin-top:8px;color:var(--cmp-muted)!important;font-size:12px!important;letter-spacing:.08em;text-transform:uppercase}

.blog-main .compare-table-wrap{
  position:relative;
  overflow:auto;
  margin:24px 0 44px;
  border:1px solid var(--cmp-line);
  border-radius:18px;
  background:var(--cmp-panel);
  box-shadow:var(--cmp-shadow);
  scrollbar-width:thin;
}
.blog-main .compare-table{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;color:var(--cmp-text-soft)}
.blog-main .compare-table th,
.blog-main .compare-table td{padding:15px 18px;border-bottom:1px solid var(--cmp-line);text-align:center;vertical-align:middle}
.blog-main .compare-table th:first-child,
.blog-main .compare-table td:first-child{text-align:left}
.blog-main .compare-table thead th{position:sticky;top:0;z-index:3;color:var(--cmp-text);background:var(--cmp-head);font-size:13px;font-weight:800}
.blog-main .compare-table tbody tr:not(.section-row){transition:background .16s ease}
.blog-main .compare-table tbody tr:not(.section-row):hover{background:var(--cmp-hover)}
.blog-main .section-row td{padding:0!important;background:var(--cmp-head)!important}
.blog-main .section-row details{width:100%}
.blog-main .section-row summary{padding:14px 18px;cursor:pointer;list-style:none;color:var(--cmp-text);font-size:13px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
.blog-main .section-row summary::-webkit-details-marker{display:none}
.blog-main .section-row summary:after{content:"−";float:right;color:var(--cmp-muted);font-size:18px;line-height:1}
.blog-main .section-row details:not([open]) summary:after{content:"+"}
.blog-main .feature-row.is-collapsed{display:none}
.blog-main .cell-yes,
.blog-main .cell-no,
.blog-main .cell-text{display:inline-grid;min-width:28px;min-height:28px;place-items:center;border-radius:999px;font-weight:900}
.blog-main .cell-yes{color:var(--cmp-green);background:rgba(21,153,87,.09)}
.blog-main .cell-no{color:var(--cmp-red);background:rgba(220,76,99,.08)}
.blog-main .cell-text{padding:0 9px;color:var(--cmp-text-soft);background:var(--cmp-panel-soft);font-size:11px}
.blog-main .table-logo{width:26px!important;height:26px!important;margin:0 auto 5px!important;padding:2px!important;border:1px solid var(--cmp-line);border-radius:7px!important}

.blog-main .faq-section,
.blog-main .content-panel,
.blog-main .cta-box{
  margin-top:52px;
  padding:28px;
  border:1px solid var(--cmp-line);
  border-radius:20px;
  background:var(--cmp-panel);
  box-shadow:0 10px 28px rgba(15,23,42,.045);
}
.blog-main .faq-item{border-top:1px solid var(--cmp-line)}
.blog-main .faq-item:first-of-type{border-top:0}
.blog-main .faq-item details{padding:0}
.blog-main .faq-item summary{padding:18px 0;cursor:pointer;list-style:none;color:var(--cmp-text);font-weight:750}
.blog-main .faq-item summary::-webkit-details-marker{display:none}
.blog-main .faq-item summary:after{content:"+";float:right;color:var(--cmp-muted);font-size:21px;transition:.2s ease}
.blog-main .faq-item details[open] summary:after{transform:rotate(45deg);color:var(--cmp-accent)}
.blog-main .faq-item p{margin:0;padding:0 0 20px;color:var(--cmp-text-soft)}
.blog-main .cta-box{text-align:center;background:linear-gradient(135deg,rgba(111,86,248,.08),rgba(37,188,231,.05)),var(--cmp-panel)}
.blog-main .cta-box h2{margin:0 0 8px;color:var(--cmp-text)}
.blog-main .cta-box p{margin:0;color:var(--cmp-muted)}

.blog-main .compare-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0 46px}
.blog-main .compare-card{
  position:relative;
  display:flex;
  min-width:0;
  min-height:220px;
  flex-direction:column;
  padding:22px;
  overflow:hidden;
  border:1px solid var(--cmp-line);
  border-radius:18px;
  background:var(--cmp-panel);
  box-shadow:0 10px 30px rgba(15,23,42,.045);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.blog-main .compare-card:before{content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--cmp-gradient);opacity:0;transform:scaleX(.35);transition:.22s ease}
.blog-main .compare-card:hover{transform:translateY(-4px);border-color:rgba(111,86,248,.3);box-shadow:var(--cmp-shadow)}
.blog-main .compare-card:hover:before{opacity:1;transform:scaleX(1)}
.blog-main .compare-card-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.blog-main .compare-card-logo{width:50px;height:50px;padding:7px;border:1px solid var(--cmp-line);border-radius:14px;object-fit:contain;background:#fff}
.blog-main .compare-card-arrow{display:grid;width:38px;height:38px;place-items:center;border:1px solid var(--cmp-line);border-radius:11px;color:var(--cmp-muted);background:var(--cmp-panel-soft);font-size:20px;transition:.2s ease}
.blog-main .compare-card:hover .compare-card-arrow{color:var(--cmp-accent);border-color:rgba(111,86,248,.3);background:rgba(111,86,248,.07);transform:translateX(3px)}
.blog-main .compare-card-title{color:var(--cmp-text);font-size:18px;line-height:1.35;font-weight:780;letter-spacing:-.02em}
.blog-main .compare-card-desc{margin-top:10px;color:var(--cmp-muted);font-size:13.5px;line-height:1.65}
.blog-main .spaced-top{margin-top:16px!important}

.overview-main{width:min(1380px,calc(100% - 32px));padding-top:62px}
.overview-article{width:100%}
.overview-kicker{margin:0 0 16px;text-align:center;color:var(--cmp-accent);font-size:13px;font-weight:850;letter-spacing:.16em;text-transform:uppercase}
.overview-section-title{margin:58px 0 22px;color:var(--cmp-text);text-align:left;font-size:clamp(27px,3vw,38px);line-height:1.18;letter-spacing:-.035em}
.overview-page .article-shell>h1{max-width:1020px}
.overview-page .article-shell>.description{max-width:900px}
.overview-page .tldr-box{max-width:1040px}
.overview-page .compare-table-wrap{margin-top:28px}
.overview-page .compare-table{min-width:1100px}
.overview-page .compare-table th:first-child,
.overview-page .compare-table td:first-child{position:sticky;left:0;z-index:2;min-width:190px;background:var(--cmp-sticky)}
.overview-page .compare-table thead th:first-child{z-index:4;background:var(--cmp-head)}
.overview-page .compare-table .comp-logo{width:28px;height:28px;margin:0 auto 7px;padding:3px;border:1px solid var(--cmp-line);border-radius:8px}
.overview-page .section-row td{position:static!important;background:var(--cmp-head)!important}
.overview-page .cell-text{color:var(--cmp-text-soft);font-size:13px}

.blog-page .back-to-top,
.overview-page .back-to-top{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:90;
  display:grid;
  width:46px;
  height:46px;
  place-items:center;
  border:1px solid var(--cmp-line);
  border-radius:14px;
  color:var(--cmp-text);
  background:color-mix(in srgb,var(--cmp-panel) 88%,transparent);
  box-shadow:0 12px 30px rgba(15,23,42,.15);
  backdrop-filter:blur(14px);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:.2s ease;
}
.blog-page .back-to-top.is-visible,
.overview-page .back-to-top.is-visible{opacity:1;visibility:visible;transform:none}

.blog-main .reveal-item{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.blog-main .reveal-item.is-visible{opacity:1;transform:none}

@media(max-width:1050px){
  .blog-main .compare-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .blog-main,.overview-main{width:min(100% - 22px,1120px);padding-top:44px}
  .blog-main .article-shell>h1,.blog-main .compare-article>h1{font-size:clamp(34px,11vw,48px);letter-spacing:-.04em}
  .blog-main .description{margin-bottom:28px;font-size:15.5px}
  .blog-main .tldr-box{padding:22px 20px;border-radius:17px}
  .blog-main .section-title,.blog-main .article-shell>h2{margin-top:42px}
  .blog-main .score-grid{grid-template-columns:1fr!important}
  .blog-main .score-card{display:grid;grid-template-columns:auto 1fr;align-items:center;text-align:left!important}
  .blog-main .score-label{margin:0 0 0 12px!important;text-align:left}
  .blog-main .rank-card{padding:19px!important}
  .blog-main .rank-card-head{flex-wrap:wrap}
  .blog-main .best-badge{width:max-content;margin:8px 0 0!important}
  .blog-main .compare-cards{grid-template-columns:1fr;gap:12px}
  .blog-main .compare-card{min-height:0;padding:18px}
  .blog-main .faq-section,.blog-main .content-panel,.blog-main .cta-box{padding:20px}
  .blog-main .compare-table-wrap{margin-left:-2px;margin-right:-2px;border-radius:15px}
  .blog-main .compare-table th,.blog-main .compare-table td{padding:13px 14px}
  .overview-section-title{margin-top:44px}
}
@media(max-width:520px){
  .overview-page .compare-table th:first-child,.overview-page .compare-table td:first-child{min-width:150px}
  .blog-page .back-to-top,.overview-page .back-to-top{right:14px;bottom:14px}
}
@media(prefers-reduced-motion:reduce){
  .blog-main *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .blog-main .reveal-item{opacity:1;transform:none}
}

@media(max-width:720px){.blog-main{padding-left:var(--t67-page-gutter-mobile);padding-right:var(--t67-page-gutter-mobile)}}