/* Reader-first treatment for the original tools/*.html review catalogue. */
body.legacy-tool-page {
  margin: 0 !important;
  background: #fff !important;
  color: #172033 !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  line-height: 1.7 !important;
}

body.legacy-tool-page::before,
body.legacy-tool-page::after { display: none !important; }

body.legacy-tool-page .site-header {
  padding: 0 !important;
  text-align: left !important;
  background: rgba(8,8,18,.96) !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  backdrop-filter: blur(16px);
}

body.legacy-tool-page .site-header .nav-wrap {
  width: min(var(--max),calc(100% - 32px)) !important;
  max-width: none !important;
  height: 70px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.legacy-tool-page .site-header .primary-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 22px !important;
  margin-left: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.legacy-tool-page .site-header .brand,
body.legacy-tool-page .site-header .primary-nav a,
body.legacy-tool-page .site-header .more-menu summary { color: #f7f7fb !important; }

body.legacy-tool-page > nav { display: none !important; }

body.legacy-tool-page > article,
body.legacy-tool-page > main,
body.legacy-tool-page > .container {
  width: min(860px,calc(100% - 36px)) !important;
  max-width: 860px !important;
  margin-inline: auto !important;
  padding: 54px 0 78px !important;
  background: #fff !important;
  color: #172033 !important;
}

body.legacy-tool-page > header:not(.site-header),
body.legacy-tool-page > main.semantic-main-landmark > header:not(.site-header) {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: clamp(36px,5vw,56px) 20px !important;
  border: 0 !important;
  background: linear-gradient(125deg,#0b0a14 0%,#211445 58%,#5e31bd 100%) !important;
  color: #fff !important;
  text-align: center !important;
}

body.legacy-tool-page > header:not(.site-header)::after,
body.legacy-tool-page > main.semantic-main-landmark > header:not(.site-header)::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -170px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(141,252,56,.27),rgba(141,252,56,0) 68%);
}

body.legacy-tool-page > header:not(.site-header) > *,
body.legacy-tool-page > main.semantic-main-landmark > header:not(.site-header) > * { position: relative; z-index: 1; }
body.legacy-tool-page > header:not(.site-header) h1,
body.legacy-tool-page > main.semantic-main-landmark > header:not(.site-header) h1 { max-width: 1000px; margin-inline: auto !important; color: #fff !important; font-size:clamp(2.55rem,6vw,4.5rem) !important; }
body.legacy-tool-page > header:not(.site-header) p,
body.legacy-tool-page > main.semantic-main-landmark > header:not(.site-header) p { color: #d9d5e5 !important; }
body.legacy-tool-page > header:not(.site-header) .rating-box,
body.legacy-tool-page > main.semantic-main-landmark > header:not(.site-header) .rating-box { margin-top: 14px !important; padding: 14px 20px !important; }

body.legacy-tool-page article > header,
body.legacy-tool-page main > header {
  position: relative;
  overflow: hidden;
  margin: 0 0 30px !important;
  padding: clamp(27px,5vw,48px) !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: linear-gradient(128deg,#14101f 0%,#28164f 62%,#6435c8 100%) !important;
  color: #fff !important;
  box-shadow: 0 24px 70px rgba(52,31,94,.22) !important;
}

body.legacy-tool-page article > header::after,
body.legacy-tool-page main > header::after {
  content: "";
  position: absolute;
  right: -65px;
  bottom: -100px;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(141,252,56,.35),rgba(141,252,56,0) 68%);
  pointer-events: none;
}

body.legacy-tool-page article > header h1,
body.legacy-tool-page main > header h1,
body.legacy-tool-page article > header p,
body.legacy-tool-page main > header p,
body.legacy-tool-page article > header .text-gray-600,
body.legacy-tool-page main > header .text-gray-600 { color: #fff !important; }

body.legacy-tool-page h1 {
  margin-top: 8px !important;
  color: #111827 !important;
  font-size: clamp(2.7rem,7vw,5.4rem) !important;
  line-height: .96 !important;
  letter-spacing: -.065em !important;
}

body.legacy-tool-page article > header h1,
body.legacy-tool-page main > header h1 { color: #fff !important; }

body.legacy-tool-page h2 {
  margin-top: 2.4em !important;
  padding-top: .25em;
  color: #171222 !important;
  font-size: clamp(1.7rem,4vw,2.35rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -.035em !important;
}

body.legacy-tool-page h3,
body.legacy-tool-page h4,
body.legacy-tool-page strong,
body.legacy-tool-page .text-gray-900,
body.legacy-tool-page .text-gray-800,
body.legacy-tool-page .text-green-800,
body.legacy-tool-page .text-blue-800 { color: #202437 !important; }

body.legacy-tool-page p,
body.legacy-tool-page li,
body.legacy-tool-page td,
body.legacy-tool-page .text-gray-700,
body.legacy-tool-page .text-gray-600 { color: #526078 !important; }

body.legacy-tool-page p { font-size: 1.02rem; }
body.legacy-tool-page li { margin-block: .38rem; }

body.legacy-tool-page a,
body.legacy-tool-page .text-purple-600,
body.legacy-tool-page .text-purple-700 { color: #6437d1; }

body.legacy-tool-page article nav[aria-label="Breadcrumb"] {
  margin-bottom: 24px !important;
  border-color: #e7e2ef !important;
  color: #736a82 !important;
}

body.legacy-tool-page .quick-verdict,
body.legacy-tool-page .pros,
body.legacy-tool-page .cons,
body.legacy-tool-page .rating-box,
body.legacy-tool-page .bg-white,
body.legacy-tool-page .bg-gray-50,
body.legacy-tool-page .bg-gray-100 {
  border: 1px solid #e8e2f1 !important;
  border-radius: 20px !important;
  background: #fff !important;
  color: #172033 !important;
  box-shadow: 0 10px 34px rgba(42,31,70,.07) !important;
}

body.legacy-tool-page .quick-verdict,
body.legacy-tool-page .rating-box {
  border-color: #d9cdf7 !important;
  background: linear-gradient(135deg,#f7f3ff,#eef7ff) !important;
}

body.legacy-tool-page .pros { border-left: 5px solid #79d82b !important; background: #f7fff1 !important; }
body.legacy-tool-page .cons { border-left: 5px solid #f06d8f !important; background: #fff6f8 !important; }

body.legacy-tool-page [data-beehiiv-form="newsletter"] { display: none !important; }
body.legacy-tool-page #contextual-revenue-route,
body.legacy-tool-page #affiliate-sticky-recommendation { display: none !important; }

body.legacy-tool-page input,
body.legacy-tool-page select,
body.legacy-tool-page textarea {
  border: 1px solid #dcd5e8 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #172033 !important;
}

body.legacy-tool-page table {
  width: 100%;
  overflow: hidden;
  border: 1px solid #e3ddeb !important;
  border-radius: 16px;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

body.legacy-tool-page th,
body.legacy-tool-page td { border-color: #e8e3ef !important; }
body.legacy-tool-page th { background: #f5f1fb !important; color: #29213b !important; }

body.legacy-tool-page .cta-box,
body.legacy-tool-page .bg-gradient-to-r {
  border: 1px solid #d8c9f7 !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg,#ede5ff,#f1ffdf) !important;
  color: #201635 !important;
  box-shadow: 0 16px 38px rgba(61,35,118,.1) !important;
}

body.legacy-tool-page .cta-box p,
body.legacy-tool-page .cta-box h2,
body.legacy-tool-page .cta-box h3,
body.legacy-tool-page .bg-gradient-to-r p,
body.legacy-tool-page .bg-gradient-to-r h2,
body.legacy-tool-page .bg-gradient-to-r h3 { color: #201635 !important; }

body.legacy-tool-page a[class*="bg-purple"],
body.legacy-tool-page a[class*="bg-indigo"],
body.legacy-tool-page a[class*="bg-green"],
body.legacy-tool-page button[class*="bg-purple"],
body.legacy-tool-page button[class*="bg-indigo"] {
  border: 0 !important;
  border-radius: 12px !important;
  background: #6b36db !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(107,54,219,.2) !important;
}

body.legacy-tool-page .rating,
body.legacy-tool-page .score { color: #5fbd17 !important; }

body.legacy-tool-page .bg-green-100.text-green-800,
body.legacy-tool-page .bg-blue-100.text-blue-800,
body.legacy-tool-page .bg-gray-100.text-gray-800 {
  border: 1px solid #e0d8ed !important;
  background: #f5f1fb !important;
  color: #3c3152 !important;
}

body.legacy-tool-page footer {
  border-color: #e7e2ed !important;
  background: #f8f6fa !important;
  color: #716a7d !important;
}

/* Keep the review hero readable even when legacy utility classes carry a
   higher class count than the shell's original header rules.  Limit these
   overrides to direct hero copy so pricing/rating badges retain their own
   foreground colours. */
body.legacy-tool-page article > header > h1,
body.legacy-tool-page article > header > h1.text-gray-900,
body.legacy-tool-page main > header > h1,
body.legacy-tool-page main > header > h1.text-gray-900 {
  color: #fff !important;
}

body.legacy-tool-page article > header > p,
body.legacy-tool-page article > header > p.text-gray-600,
body.legacy-tool-page article > header > p.text-gray-700,
body.legacy-tool-page main > header > p,
body.legacy-tool-page main > header > p.text-gray-600,
body.legacy-tool-page main > header > p.text-gray-700 {
  color: #e9e5f2 !important;
}

body.legacy-tool-page article > header > div:first-child,
body.legacy-tool-page main > header > div:first-child {
  color: #b8ff65 !important;
}

/* Multi-section legacy reviews need a wrapper landmark. Keep that wrapper
   layout-neutral and retain the original readable width on its content body. */
body.legacy-tool-page > main.semantic-main-landmark {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.legacy-tool-page > main.semantic-main-landmark > .container {
  width: min(860px,calc(100% - 36px)) !important;
  max-width: 860px !important;
  margin-inline: auto !important;
  padding: 54px 0 78px !important;
  background: #fff !important;
  color: #172033 !important;
}

@media (max-width: 650px) {
  body.legacy-tool-page > article,
  body.legacy-tool-page > main,
  body.legacy-tool-page > .container { padding-top: 28px !important; }
  body.legacy-tool-page > main.semantic-main-landmark { padding-top: 0 !important; }
  body.legacy-tool-page > main.semantic-main-landmark > .container { padding-top: 28px !important; }
  body.legacy-tool-page .pros-cons { grid-template-columns: 1fr !important; }
  body.legacy-tool-page table { display: block; overflow-x: auto; }
}

@media (max-width: 820px) {
  body.legacy-tool-page .site-header .primary-nav { display: none !important; }
  body.legacy-tool-page .site-header .primary-nav.is-open { display: flex !important; }
}