/* Scale the rem base across phones instead of jumping from 14px to 16px. */
html { font-size: clamp(14px, 3.6vw, 16px); }

.marketing-title {
  max-width: 1432px;
  margin: 0 auto 1rem;
  background-image: linear-gradient(to right, #4906c6, #7dacfe 40%, #4906c6);
  background-clip: text;
  color: transparent;
  font-weight: 700;
  line-height: 1.2;
}

.marketing-title, .entry-title { font-size: clamp(1.802rem, 6.2vw, 3.113rem); }

@media (max-width: 767.9px) {
  .has-title-font-size { font-size: clamp(1.802rem, 6.2vw, 3.113rem) !important; }
  .has-heading-1-font-size { font-size: clamp(1.602rem, 4.8vw, 2.481rem) !important; }
}

/* A landscape phone is wide but short, so a width-based title would fill the screen. */
@media (max-width: 1023.9px) and (max-height: 500px) {
  .marketing-title, .entry-title, .has-title-font-size { font-size: 2.25rem !important; }
}

.has-small-font-size { font-size: max(13px, var(--cd--preset--font-size--small)) !important; }
.cd-block-buttons .cd-block-button a { font-size: 13px !important; }

.marketing-cover { margin-inline: auto; max-width: 1432px; }
.marketing-cover img { width: 100%; height: auto; }
.agency-logo-layout { container-type: inline-size; }

.agency-logo-wall {
  inline-size: 100cqw;
  max-inline-size: none !important;
  margin-inline: calc((100% - 100cqw) / 2) !important;
  padding-block: calc(2 * var(--cd--preset--spacing--60));
  padding-inline: 0 !important;
  background: linear-gradient(0deg, #eff1f6, #fff);
  text-align: center;
}

/* The compliance hero already paints this gradient behind the wall. */
.compliance-hero > .agency-logo-wall { background: transparent; }

.agency-logo-wall > h2 {
  max-inline-size: 1432px;
  margin: 0 auto;
  padding-inline: 1rem;
  color: #242036;
  font-size: var(--cd--preset--font-size--heading-3);
  font-weight: 600;
  line-height: 1.2;
}

.agency-logo-wall .agency-logo-wall__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-inline-size: 1512px;
  margin: var(--cd--preset--spacing--32) auto 0;
  padding: 0;
  list-style: none;
}

.agency-logo-wall__logos img { width: clamp(72px, 18vw, 140px); height: auto; }

.insight-card h3 { padding-top: 24px; font-weight: 500; line-height: 1.2; }
.insight-card p { margin-top: 16px; color: #6c7285; font-weight: 500; }
.insight-card p a { color: #4906c6; }
.insight-card figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.calculator {
  --calculator-track-color: #a2a7b9;
  --calculator-thumb-size: 25px;
  border: 1px solid;
  border-image: linear-gradient(166.88deg, #fff 6.57%, #aca2d5 33.22%, #ebf0fc 67.35%) 1;
  box-shadow: 0 20px 40px #1310210d;
}

.calculator .slider-wrapper > svg { pointer-events: none; }
.calculator .value-bubble {
  position: absolute;
  top: -40px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
}

.calculator #salary-bubble::before { content: "$"; }
.calculator .styled-slider {
  appearance: none;
  height: 1.7em;
}

.calculator .styled-slider::-webkit-slider-runnable-track {
  height: 2px;
  border: 1px solid var(--calculator-track-color);
  border-radius: 1px;
  background: var(--calculator-track-color);
}

.calculator .styled-slider::-webkit-slider-thumb {
  appearance: none;
  width: var(--calculator-thumb-size);
  height: var(--calculator-thumb-size);
  margin-top: calc(var(--calculator-thumb-size) / -2);
  border: 1px solid var(--calculator-track-color);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 2px #000;
}

.calculator .styled-slider::-moz-range-track {
  height: 2px;
  border-radius: 1px;
  background: var(--calculator-track-color);
}

.calculator .styled-slider::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--calculator-thumb-size);
  height: var(--calculator-thumb-size);
  border: 1px solid var(--calculator-track-color);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 2px #000;
}

.calculator .styled-slider:focus-visible {
  outline: 2px solid #985bff;
  outline-offset: 3px;
}

.mega-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-align: start;
}

.mega-menu-chevron {
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 1px 1px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}

[data-mega-menu][data-open] .mega-menu-chevron { transform: translateY(1px) rotate(225deg); }

.mega-menu-panels > .sub-menu { display: none !important; }
.mega-menu-wrapper { margin-top: 0; }
.mega-card-grid { display: grid; gap: 1rem; }
.mega-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega-products > :last-child { grid-column: 1 / -1; }
.mega-solutions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega-solutions > :first-child { grid-row: span 3; }
.mega-card {
  display: flex;
  overflow: hidden;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #f8f9fb;
  text-decoration: none;
}
.mega-card:hover, .mega-card:focus-visible {
  border-color: #aca2d5;
  background: linear-gradient(180deg, #e4e7f1, #eaf1ff);
}
.mega-card-copy { display: grid; align-content: start; gap: 1rem; padding: 2rem; }
.mega-card-title { color: #202636; font-weight: 600; }
.mega-card-description { color: #6c7285; font-weight: 500; white-space: normal; }
.mega-solutions .mega-card-with-image { flex-direction: column; }
.mega-card img { width: 100%; height: auto; object-fit: contain; }
.site-brand { display: block; width: 142px; }
.site-brand img { display: block; width: 100%; height: auto; }
.site-header-inner { max-width: var(--cd--style--global--wide-size); }

@media (min-width: 1024px) {
  .site-content-rail {
    /* Follow the feature blocks' outer gutter, inner padding, and 1px border. */
    max-width: var(--cd--style--global--wide-size);
    padding-inline: calc(var(--cd--preset--spacing--40) + var(--cd--preset--spacing--60) + 1px);
  }
}

@media (min-width: 768px) {
  .menu-list > li:last-child { display: list-item; }
  .mega-menu-chevron { margin-inline-end: 7px; }
  .header-demo-link { position: relative; z-index: 10000; }
  #masthead:has([data-mega-menu][data-open], #caudLoginPanel:not(.hidden)) { background-color: #fff; }
  .mega-products-panel { margin-top: 8px; padding-bottom: 25px; }
  .mega-products-panel::before {
    content: "";
    position: absolute;
    inset: -8px 0 auto;
    height: 8px;
  }
  .mega-products {
    --product-copy-inset: var(--cd--preset--spacing--32, 32px);
    gap: 25px 24px;
  }
  .mega-products .mega-card { background-color: #eff1f6; }
  .mega-products .mega-card-with-image {
    display: grid;
    grid-template-columns: min(312px, 75%) minmax(0, 1fr);
    align-items: start;
    padding-block: var(--product-copy-inset);
  }
  .mega-products .mega-card-copy {
    display: block;
    min-width: 0;
    padding: 0 var(--product-copy-inset);
  }
  .mega-products .mega-card-title {
    display: block;
    padding-right: 32px;
    white-space: normal;
  }
  .mega-products .mega-card-description {
    display: block;
    padding: 16px var(--product-copy-inset) 33px 0;
  }
  .mega-products > .mega-card:not(.mega-card-with-image) {
    margin-inline: 1px;
    border: 0;
    padding-top: var(--product-copy-inset);
  }
  .mega-products > .mega-card:not(.mega-card-with-image) .mega-card-copy {
    flex: 1;
  }
  [data-mega-menu][data-open] .mega-menu-wrapper {
    visibility: visible;
    opacity: 1;
    z-index: 9999;
  }
  [data-mega-menu][data-dismissed] .mega-menu-wrapper {
    visibility: hidden;
    opacity: 0;
  }
}

/* iOS drops the click when a tap reveals content through :hover, so touch screens only open menus by click. */
@media (hover: none) {
  .menu-item:not([data-open]):hover .mega-menu-wrapper { visibility: hidden; opacity: 0; }
}

/* Touch screens keep :hover after a tap, so a closed item would stay highlighted. */
@media (hover: none) and (min-width: 768px) {
  .menu-list > li:not([data-open]):hover { background-color: transparent; }
}

.header-demo-link, #caudOpenLoginPanel { white-space: nowrap; }

/* The logo, five menu items and the demo button only just fit below 1080px. */
@media (min-width: 768px) and (max-width: 1079.9px) {
  .menu-list { gap: .25rem; }
  .menu-list > li { padding-inline: .375rem; }
}

@media (min-width: 768px) and (max-width: 860px) {
  .site-header-inner { padding-inline: 1.5rem; }
  #masthead .site-brand { width: 120px; }
}

/* Mega menus sit in a fixed header, so short screens must scroll inside the panel. */
@media (min-width: 768px) and (max-height: 640px) {
  .mega-menu-wrapper {
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mega-products-panel { margin-top: 0; padding-top: 32px; }
  .mega-products-panel::before { content: none; }
}

@media (max-width: 767.9px) {
  /* The page is locked behind the open menu, so the menu fills the screen and scrolls. */
  .caudena-menu-container.active {
    height: 100vh;
    height: 100dvh;
    overscroll-behavior: contain;
  }
  .menu-burger::after { content: ""; position: absolute; inset: -8px; }
  /* Make the whole row tappable and line the links up with the expandable items. */
  .menu-list > li > a { display: block; width: auto; margin-inline: 0; padding: 1rem .75rem; }
  /* iOS zooms into focused fields smaller than 16px. */
  #csf-form input { font-size: max(16px, 1rem); }
}

@media (pointer: coarse) {
  .glide__bullet, .caudena-main-dot-indicator { position: relative; margin-inline: 9px; }
  .glide__bullet::after, .caudena-main-dot-indicator::after {
    content: "";
    position: absolute;
    inset: -19px -9px;
  }
  #caudClosePanel::after { content: ""; position: absolute; inset: -6px; }
  .cd-block-buttons .cd-block-button a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  .btn-arrow-container { min-height: 44px; }
}

/* These columns only stack below 782px by default, which leaves the rows too narrow on portrait iPads. */
@media (min-width: 782px) and (max-width: 1023.9px) {
  .page-about .cd-layout-nowrap-gap-2em-3 { flex-wrap: wrap !important; }
  .page-about .cd-layout-nowrap-gap-2em-3.alignwide > .cd-block-column { flex-basis: 100% !important; }
  .page-about .cd-layout-nowrap-gap-2em-3:not(.alignwide) > .cd-block-column { flex-basis: calc(50% - 20px) !important; }
}

.marketing-content p.has-text-align-center { max-inline-size: 62ch; margin-inline: auto; }

#caudSidePanel:focus { outline: none; }

/* Below 1024px the panel covers the screen, so the overlay would only tint Safari's toolbar. */
@media (max-width: 1023.9px) {
  #caudPanelOverlay { display: none; }
}

@media (min-width: 1024px) {
  #caudSidePanel { max-width: 48rem; }
}

/* Portrait phones need the width, so the close button moves above the form. */
@media (max-width: 479.9px) {
  #caudSidePanel { padding: 3.5rem 0 1rem; }
}

/* HubSpot pads its form by 40px inside the frame and has no setting for it. The frame reaches into the panel's side padding and up towards the introduction, so on wide screens the fields line up with the heading. */
#caudSidePanel .hs-form-frame { margin: -1.5rem -1rem 0; }

@media (min-width: 1024px) {
  #caudSidePanel .hs-form-frame { margin-inline: -2.5rem; }
}

@media (max-width: 767px) {
  .mega-menu-toggle { justify-content: space-between; width: 100%; padding: 1rem .75rem; }
  .mega-menu-panels > .mega-menu-wrapper { display: none; }
  [data-mega-menu][data-open] .mega-menu-panels > .sub-menu {
    display: block !important;
  }
}

.blog-topics {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  padding-block: .25rem .625rem;
  margin-block-end: 2rem;
  scroll-padding-inline: 1rem;
}

.blog-topics::-webkit-scrollbar { display: none; }

.blog-topics a {
  flex: none;
  padding: .5rem .875rem;
  border-radius: .5rem;
  background-color: var(--cd--preset--color--neutral-50);
  color: var(--cd--preset--color--neutral-900);
  font-size: .9375rem;
  line-height: 1.35;
  white-space: nowrap;
  text-decoration: none;
}

.blog-topics a:hover { background-color: var(--cd--preset--color--neutral-75); }
.blog-topics a[aria-current="page"] {
  background-color: var(--cd--preset--color--dark-blue-675);
  color: white;
}

.blog-topics:focus-visible,
.blog-topics a:focus-visible { outline: 2px solid var(--cd--preset--color--dark-blue-675); }
.blog-topics:focus-visible { outline-offset: -2px; }
.blog-topics a:focus-visible { outline-offset: 2px; }

.pagination .pagination-list { flex-wrap: wrap; }
.pagination-list [aria-current="page"] {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border-radius: inherit;
  background-color: #593af81a;
  color: var(--cd--preset--color--dark-blue-675);
}
.pagination-list a:focus-visible {
  border-radius: inherit;
  outline: 2px solid var(--cd--preset--color--dark-blue-675);
  outline-offset: -2px;
}

.post-topics { display: flex; flex-wrap: wrap; gap: .375rem; }
.post-topics a {
  border: 1px solid currentColor;
  border-radius: .25rem;
  padding: 2px .5rem;
  color: var(--cd--preset--color--dark-blue-675);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
}

.post-excerpt .post-topics { gap: .25rem; }
.post-excerpt .post-topics a {
  padding-inline: .3125rem;
  color: var(--cd--preset--color--neutral-675);
  font-size: 12px;
  line-height: 1.35;
}
.post-topics a:is(:hover, :focus-visible) {
  background-color: #6100ff1a;
  color: var(--cd--preset--color--dark-blue-675);
  text-decoration: none;
}
.py-14 { padding-block: 3.5rem; }

@media (max-width: 767px) {
  #post-list, #related-articles + div { margin-inline: -1rem; }
  /* Match the card's px-5 padding after the smaller mobile grid margin. */
  .blog-topics, .archive-header > div { margin-inline: .25rem; }
}
.featured-article {
  display: grid;
  align-items: center;
  gap: 2rem;
  max-width: 1432px;
  margin-inline: auto;
  padding: 2rem 1rem;
}
.featured-article img { width: 100%; height: auto; border-radius: 4px; }
.text-heading-1 { font-size: clamp(1.802rem, 2.9vw, 2.481rem); line-height: 1.2; }
.featured-article h2 { padding-block: 1rem; }
.blog-search-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: .75rem;
  width: min(100%, 32rem);
  border: 1px solid #6c7285;
  border-radius: 4px;
  padding: .875rem 1rem;
  color: #454b5e;
  text-decoration: none;
}
.blog-search-trigger:hover, .blog-search-trigger:focus-visible { border-color: #985bff; }
.footer-layout { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: start; }
.footer-column { grid-column: 1 / -1; text-align: center; }
.footer-social { grid-area: 1 / 2; }
.footer-education { margin-top: 2rem; }
.footer-column .menu { margin-top: 1rem; display: grid; gap: 1rem; }
.footer-column .menu a { color: #6c7285; }
.footer-column .menu a:hover, .footer-column .menu a:focus-visible { color: #4906c6; }

@media (min-width: 768px) {
  .featured-article { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; padding: 3rem 2.5rem; }
  .footer-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .footer-column { grid-column: auto; text-align: start; }
  .footer-layout > .site-brand { grid-column: 1 / 3; }
  .footer-social { grid-area: 1 / 3; justify-self: end; }
}

@media (min-width: 1280px) {
  .footer-layout { grid-template-columns: 142px repeat(3, minmax(0, 1fr)) auto; gap: 2.75rem; }
  .footer-layout > .site-brand { grid-column: auto; }
  .footer-social { grid-area: auto; }
}

.error-page {
  display: grid;
  justify-items: center;
  gap: 1rem;
  text-align: center;
}
.error-page .entry-title { margin-block-end: 0; }
.error-page .blog-search-trigger { margin-block-start: 1.5rem; text-align: start; }

.article-cover img { width: 100%; height: auto; border-radius: .5rem; }

/* Ghost renders editor cards directly inside the article body. Keep the page
   gutter and body size that .entry-content gives its children from flattening
   the article's hierarchy. */
.article-content { font-size: clamp(17px, 15.5px + .6vw, 20.08px); }
.article-content > * { padding-inline: 0; font-size: inherit; }
.article-content > :is(ul, ol) { padding-inline-start: 1.625em; }
.article-content > blockquote { padding-inline-start: 1em; }
.article-content > h2, .article-content > .cd-block-group > h2 { font-size: 1.35em; }
.article-content > h3 { font-size: 1.15em; }
.article-content > :is(table, pre) { font-size: .875em; }

.article-back {
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  font-weight: 600;
  text-transform: capitalize;
}

.article-back { color: var(--cd--preset--color--neutral-475); }
.article-back:hover { color: var(--cd--preset--color--dark-blue-675); }

.article-byline { display: grid; gap: 1rem; margin-block: 1rem; }
.article-byline dt, .article-share-label {
  display: block;
  color: var(--cd--preset--color--neutral-475);
  font-size: max(12px, var(--cd--preset--font-size--small));
  font-weight: 500;
}
.article-byline dd { margin: 0; font-weight: 600; }

.article-share ul {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin-block: .25rem 2rem;
  padding: 0;
}
.article-share a {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: .25rem;
  color: var(--cd--preset--color--neutral-475);
}
.article-share a:is(:hover, :focus-visible) { background: var(--cd--preset--color--neutral-75); }
.article-share svg { width: 32px; height: 32px; }

.article-meta .post-topics { gap: .5rem; }
.article-meta .post-topics a {
  font-size: inherit;
  font-weight: inherit;
  text-transform: none;
}

.article-outline { display: none; }
.article-toc {
  padding-inline-start: .75rem;
  border-inline-start: 1px solid var(--cd--preset--color--neutral-75);
  scrollbar-width: none;
}
.article-toc::-webkit-scrollbar { display: none; }
.article-toc:not(:has(li)) { display: none; }
.article-toc-title {
  margin: 0 0 .5rem;
  padding-inline: .5rem;
  color: var(--cd--preset--color--neutral-675);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.article-toc ul { display: grid; gap: .125rem; list-style: none; margin: 0; padding: 0; }
.article-toc a {
  display: block;
  padding: .375rem .5rem;
  border-inline-start: 2px solid transparent;
  border-radius: .375rem;
  color: var(--cd--preset--color--neutral-675);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.article-toc li:not([data-level="2"]) > a { padding-inline-start: 1.125rem; }
.article-toc a:is(:hover, :focus-visible) {
  background: var(--cd--preset--color--neutral-50);
  color: var(--cd--preset--color--dark-blue-675);
}
.article-toc a:focus-visible {
  outline: 2px solid var(--cd--preset--color--dark-blue-675);
  outline-offset: -2px;
}
.article-toc a[aria-current="location"] {
  border-inline-start-color: var(--cd--preset--color--dark-blue-675);
  background: #593af81a;
  color: var(--cd--preset--color--dark-blue-675);
}
.article-content :is(h2, h3, h4, h5, h6)[id] { scroll-margin-top: 6rem; }

@media (min-width: 480px) {
  .article-byline { gap: 2rem; margin-block: 2rem; }
  .article-share ul { gap: 1.5rem; }
}

@media (min-width: 768px) {
  .article-content > h2, .article-content > .cd-block-group > h2 { font-size: 1.5em; }
  .article-content > h3 { font-size: 1.25em; }
}

@media (min-width: 1024px) {
  .article-byline { gap: .75rem; margin-block: .75rem; }
}

@media (min-width: 1280px) {
  .article-meta, .article-toc {
    position: sticky;
    top: 160px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
  }
  .article-meta { max-width: 13rem; }
  .article-byline { margin-top: 2rem; }
  .article-share ul { flex-direction: column; margin-block: 1.25rem 2rem; }
  .article-outline { display: block; flex: 1 1 16.6667%; min-width: 0; }

  /* The contents rail follows the article in the page, so the browser can paint before it arrives.
     A grid keeps the rail's column from the start, so the article never moves sideways to make room. */
  .article-layout:has(.article-toc li) {
    display: grid;
    grid-template-columns: minmax(0, 18rem) 800px minmax(0, 18rem);
    justify-content: center;
  }
  .article-layout:has(.article-toc li) > :is(.post-left-column, .article-outline) { width: auto; min-width: 0; }
}

.article-dateline {
  margin: .75rem 0 0;
  color: var(--cd--preset--color--neutral-675);
  font-weight: 500;
}
.article-dateline a { color: inherit; font-weight: 600; text-decoration: none; }
.article-dateline a:is(:hover, :focus-visible) { color: var(--cd--preset--color--dark-blue-675); }

.article-contents-disclosure {
  margin-block: 1rem 1.5rem;
  border: 1px solid var(--cd--preset--color--neutral-75);
  border-radius: .5rem;
}
.article-contents-disclosure:not(:has(li)) { display: none; }
.article-contents-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding-inline: 1rem;
  border-radius: inherit;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.article-contents-disclosure summary::-webkit-details-marker { display: none; }
.article-contents-disclosure summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 1px 1px 0;
  transform: translateY(-2px) rotate(45deg);
}
.article-contents-disclosure[open] summary::after { transform: translateY(2px) rotate(225deg); }
.article-contents-disclosure summary:focus-visible {
  outline: 2px solid var(--cd--preset--color--dark-blue-675);
  outline-offset: -2px;
}
.article-contents-disclosure .article-toc { padding: 0 .5rem .5rem; border: 0; }
.article-contents-disclosure .article-toc-title { display: none; }
.article-contents-disclosure .article-toc a { padding-block: .75rem; font-size: 1rem; }

@media (max-width: 1279.9px) {
  .article-layout > :is(.post-left-column, .article-reading-column) { max-width: 800px; margin-inline: auto; }
  .article-byline { display: none; }
  .article-meta {
    margin-block-start: 1rem;
    padding-block-start: 2rem;
    border-block-start: 1px solid var(--cd--preset--color--neutral-75);
  }
  .article-back { margin-block-end: 1.5rem; }
}

@media (min-width: 1280px) {
  .article-dateline, .article-contents-disclosure { display: none; }
}

/* Legal text colours its links barely darker than the words around them, so an underline marks them. */
.legal-content :is(p, li) a { text-decoration: underline; }

/* The hero slider hides every slide until its script marks one active, so the first slide shows until then and the hero paints without waiting for the script. */
.caudena-main-slider-items:not(:has(.caudena-main-slider-item-active)) > .caudena-main-slider-item:first-child { opacity: 1; position: relative; }