/* Basic CSS reading treatment. data-np-owned marks publisher elements only. */
[data-np-owned] { box-sizing: border-box; }
.np-image-card { min-width: 0; }
.np-image-ad-wrap { display: block; clear: both; margin: 20px 0; padding: 0; text-align: center; }
.np-image-ad { margin-left: auto; margin-right: auto; }
:root {
  --np-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --color-primary: #343434 !important;
  --color-primary-dark: #242424 !important;
  --color-secondary: #4b4b4b !important;
  --color-accent: #d4d4d4 !important;
  --color-text-dark: #343434 !important;
  --color-text-light: #626262 !important;
  --color-text-header: #ffffff !important;
}

body {
  margin: 0;
  background: #f3f3f3 !important;
  color: #343434;
  font-family: var(--np-font) !important;
  font-size: 19px;
  line-height: 30px;
}

body > nav[data-np-owned] {
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-color: #d4d4d4 !important;
}
body > nav[data-np-owned]:first-of-type {
  background: #343434 !important;
  border-bottom-color: #343434 !important;
}
body > nav[data-np-owned]:nth-of-type(2) {
  background: #ffffff !important;
  margin-bottom: 16px !important;
}
body > nav[data-np-owned] > .container[data-np-owned] {
  max-width: 1080px;
  padding-left: 24px;
  padding-right: 24px;
}
body > nav[data-np-owned]:first-of-type a[data-np-owned],
body > nav[data-np-owned]:first-of-type button[data-np-owned],
body > nav[data-np-owned]:first-of-type .text-muted[data-np-owned] {
  color: #ffffff !important;
  filter: none !important;
}
body > nav[data-np-owned]:first-of-type .group > div[data-np-owned] a[data-np-owned],
body > nav[data-np-owned]:nth-of-type(2) a[data-np-owned] {
  color: #343434 !important;
  font-size: 15px;
  line-height: 24px;
}
body.np-reading > nav[data-np-owned] {
  position: static !important;
}
.np-brand {
  color: #ffffff !important;
  font: 800 27px/36px var(--np-font);
  letter-spacing: -0.6px;
}

main[data-np-owned] {
  width: 100%;
  max-width: 1080px !important;
  padding: 16px 24px 32px !important;
  margin: 0 auto;
}
main[data-np-owned] > .container[data-np-owned] {
  width: 100%;
  max-width: none;
  padding: 0 !important;
}
main[data-np-owned] :is(h1, h2, h3, h4, h5)[data-np-owned] {
  color: #242424 !important;
  font-family: var(--np-font) !important;
  font-weight: 700 !important;
  letter-spacing: normal;
  overflow-wrap: anywhere;
  background-image: none !important;
  background-color: transparent !important;
  -webkit-text-fill-color: currentColor;
}
main[data-np-owned] h1[data-np-owned] {
  font-size: 40px !important;
  line-height: 48px !important;
  margin: 0 0 20px !important;
}
main[data-np-owned] h2[data-np-owned] {
  font-size: 29px !important;
  line-height: 38px !important;
  margin-bottom: 20px !important;
}
main[data-np-owned] :is(h3, h4)[data-np-owned] {
  font-size: 23px !important;
  line-height: 30px !important;
  margin-bottom: 12px !important;
}
main[data-np-owned] h5[data-np-owned] {
  font-size: 19px !important;
  line-height: 28px !important;
}
main[data-np-owned] :is(p, li, blockquote)[data-np-owned] {
  color: #343434 !important;
  font-family: var(--np-font) !important;
  font-size: 19px !important;
  font-weight: 400;
  line-height: 30px !important;
  letter-spacing: normal;
}
main[data-np-owned] p[data-np-owned] {
  margin-top: 0;
  margin-bottom: 20px !important;
}
main[data-np-owned] li[data-np-owned] {
  margin-bottom: 10px;
}
main[data-np-owned] :is(p, li, blockquote)[data-np-owned] :is(span, strong)[data-np-owned] {
  color: inherit !important;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
main[data-np-owned] a[data-np-owned] {
  color: #343434 !important;
  filter: none !important;
  text-underline-offset: 3px;
}
main[data-np-owned] a[data-np-owned]:hover {
  color: #242424 !important;
}
main[data-np-owned] :is(p, li, blockquote)[data-np-owned] a[data-np-owned] {
  text-decoration: underline;
}

/* Remove colored decoration on marked publisher nodes, leaving provider nodes alone. */
[data-np-owned][class*="bg-gradient-"] {
  background-image: none !important;
  background-color: #f3f3f3 !important;
}
[data-np-owned][style*="linear-gradient"] {
  background: #343434 !important;
  color: #ffffff !important;
}
[data-np-owned][class*="text-indigo-"],
[data-np-owned][class*="text-blue-"],
[data-np-owned][class*="text-green-"],
[data-np-owned][class*="text-yellow-"],
[data-np-owned][class*="text-orange-"],
[data-np-owned][class*="text-red-"],
[data-np-owned][class*="score-text-"] {
  color: #343434 !important;
}
[data-np-owned][class*="bg-green-"],
[data-np-owned][class*="bg-yellow-"],
[data-np-owned][class*="bg-blue-"],
[data-np-owned][class*="bg-indigo-"],
[data-np-owned][class*="bg-red-"] {
  background-color: #eeeeee !important;
}
[data-np-owned][class*="border-indigo-"],
[data-np-owned][class*="border-blue-"],
[data-np-owned][class*="border-green-"],
[data-np-owned][class*="border-yellow-"],
[data-np-owned][class*="border-red-"] {
  border-color: #d4d4d4 !important;
}
[data-np-owned][class*="score-bar-"] {
  background-color: #4b4b4b !important;
}
[data-np-owned][class*="shadow"] {
  box-shadow: none !important;
}
[data-np-owned][class*="rounded-2xl"],
[data-np-owned][class*="rounded-xl"] {
  border-radius: 8px !important;
}
main[data-np-owned] .bg-white.rounded-2xl[data-np-owned] {
  background: #ffffff !important;
  border: 1px solid #d4d4d4 !important;
  padding: 24px !important;
  transform: none !important;
}
main[data-np-owned] .space-y-16[data-np-owned] > [data-np-owned] + [data-np-owned] {
  margin-top: 32px !important;
}
main[data-np-owned] .bg-white[data-np-owned] > h1[data-np-owned] + p[data-np-owned] {
  color: #626262 !important;
  font-size: 15px !important;
  line-height: 24px !important;
}
main[data-np-owned] [style*="opacity: 0.5"][data-np-owned] {
  opacity: 1 !important;
}
main[data-np-owned] blockquote[data-np-owned] {
  border-left-color: #626262 !important;
  padding-left: 16px;
}
main[data-np-owned] :is(input, textarea, select, button)[data-np-owned],
nav[data-np-owned] :is(input, button)[data-np-owned] {
  font-family: var(--np-font) !important;
}
main[data-np-owned] :is(input, textarea, select)[data-np-owned],
nav[data-np-owned] input[data-np-owned] {
  color: #343434 !important;
  background: #ffffff;
  border-color: #b8b8b8 !important;
}
main[data-np-owned] :is(a, button)[data-np-owned].text-white {
  color: #ffffff !important;
  background: #343434 !important;
  background-image: none !important;
  border-color: #343434 !important;
  transform: none !important;
}
main[data-np-owned] :is(a, button)[data-np-owned].text-white:hover {
  background: #242424 !important;
}

/* Home cards and a compact introduction. */
main[data-np-owned] > .text-center.bg-gradient-to-b[data-np-owned] {
  background: #ffffff !important;
  padding: 32px 24px !important;
  margin-bottom: 32px !important;
}
main[data-np-owned] > .text-center.bg-gradient-to-b[data-np-owned] p[data-np-owned] {
  max-width: 740px;
  margin-bottom: 0 !important;
}
.category-card[data-np-owned] {
  background: #ffffff;
  border-color: #d4d4d4 !important;
  border-radius: 8px;
  transform: none !important;
  text-decoration: none;
}
.category-card[data-np-owned]:hover {
  border-color: #626262 !important;
}
.category-card[data-np-owned]:hover .category-image[data-np-owned] {
  transform: none !important;
}
.category-card[data-np-owned] h3[data-np-owned] {
  font-size: 19px !important;
  line-height: 27px !important;
  margin-bottom: 0 !important;
}

/* Reader controls are publisher-owned and never size or reposition video/ads. */
.np-skip-header {
  display: block;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 8px auto;
  padding: 8px 20px;
  border: 1px solid #d4d4d4;
  border-radius: 6px;
  background: #ffffff;
  color: #343434 !important;
  font: 700 16px/24px var(--np-font);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  filter: none !important;
}
.np-readmore-button,
main[data-np-owned] .np-readmore-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 64px;
  box-sizing: border-box;
  margin: 20px 0;
  padding: 16px 20px;
  border: 1px solid #343434;
  border-radius: 6px;
  background: #343434 !important;
  color: #ffffff !important;
  font: 700 20px/28px var(--np-font) !important;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.np-readmore-button:hover {
  background: #242424 !important;
}
.np-readmore-next {
  display: block !important;
  width: 100%;
  margin: 24px 0;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: static !important;
}
.np-readmore-next .np-readmore-button {
  width: 100%;
  color: #ffffff !important;
  margin: 0;
}
.np-readmore-button:focus-visible,
.np-skip-header:focus-visible,
.category-card[data-np-owned]:focus-visible {
  outline: 3px solid #242424;
  outline-offset: 3px;
}
.np-readmore-hidden {
  display: none !important;
}
#np-main-content,
.np-reading-target {
  scroll-margin-top: 16px;
}
footer[data-np-owned] {
  margin-top: 32px !important;
  border-color: #d4d4d4 !important;
  background: #ffffff !important;
  color: #626262;
  font: 400 15px/24px var(--np-font);
}
footer[data-np-owned] :is(a, p)[data-np-owned] {
  color: #626262 !important;
  font-family: var(--np-font) !important;
}

@media (min-width: 768px) {
  main[data-np-owned] [id^="software-content-"][data-np-owned],
  main[data-np-owned] [id^="product-content-"][data-np-owned],
  main[data-np-owned] [id^="service-content-"][data-np-owned],
  main[data-np-owned] [id^="vehicle-content-"][data-np-owned] {
    gap: 24px !important;
  }
  main[data-np-owned] [id^="software-content-"][data-np-owned] > [data-np-owned]:first-child,
  main[data-np-owned] [id^="product-content-"][data-np-owned] > [data-np-owned]:first-child,
  main[data-np-owned] [id^="service-content-"][data-np-owned] > [data-np-owned]:first-child,
  main[data-np-owned] [id^="vehicle-content-"][data-np-owned] > [data-np-owned]:first-child {
    width: 300px !important;
    flex: 0 0 300px;
  }
  main[data-np-owned] [id^="software-content-"][data-np-owned] > [data-np-owned]:nth-child(2),
  main[data-np-owned] [id^="product-content-"][data-np-owned] > [data-np-owned]:nth-child(2),
  main[data-np-owned] [id^="service-content-"][data-np-owned] > [data-np-owned]:nth-child(2),
  main[data-np-owned] [id^="vehicle-content-"][data-np-owned] > [data-np-owned]:nth-child(2) {
    width: auto !important;
    min-width: 0;
    flex: 1 1 0%;
    padding-left: 24px !important;
  }
  main[data-np-owned] .grid[data-np-owned][class*="gap-x-12"] {
    column-gap: 24px !important;
  }
  main[data-np-owned] .grid[data-np-owned][class*="xl:grid-cols-4"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  body {
    font-size: 18px;
    line-height: 28px;
  }
  body > nav[data-np-owned] > .container[data-np-owned] {
    padding-left: 12px;
    padding-right: 12px;
  }
  main[data-np-owned] {
    padding: 8px 8px 24px !important;
  }
  main[data-np-owned] .bg-white.rounded-2xl[data-np-owned] {
    padding: 16px 10px !important;
  }
  main[data-np-owned] h1[data-np-owned] {
    font-size: 30px !important;
    line-height: 38px !important;
  }
  main[data-np-owned] h2[data-np-owned] {
    font-size: 26px !important;
    line-height: 34px !important;
  }
  main[data-np-owned] :is(h3, h4)[data-np-owned] {
    font-size: 22px !important;
    line-height: 30px !important;
  }
  main[data-np-owned] :is(p, li, blockquote)[data-np-owned] {
    font-size: 18px !important;
    line-height: 28px !important;
  }
  main[data-np-owned] > .text-center.bg-gradient-to-b[data-np-owned] {
    padding: 24px 12px !important;
    margin-bottom: 24px !important;
  }
  main[data-np-owned] .space-y-16[data-np-owned] > [data-np-owned] + [data-np-owned] {
    margin-top: 24px !important;
  }
  main[data-np-owned] .gap-10[data-np-owned] {
    gap: 24px !important;
  }
  .np-brand {
    font-size: 25px;
    line-height: 34px;
  }
}