:root{--page-title-display:none;}/* Start custom CSS *//* V3 typography globals rebound to the V4 design tokens, scoped to this page.
   The page itself sets no typography; it references these custom properties,
   so redefining them here moves every text node. Kit-wide values untouched. */
.elementor-33501 {
    /* Body roles: were Clash Display Variable, i.e. the display face */
    --e-global-typography-cb14426-font-family: var(--font-body); /* Body/Large   */
    --e-global-typography-1df01bd-font-family: var(--font-body); /* Body/Default */
    --e-global-typography-8f0debb-font-family: var(--font-body); /* Body/XL      */

    /* Heading roles: were weight 500, the V4 heading classes use 600 */
    --e-global-typography-c5f64d5-font-weight: 600; /* Header/H1 */
    --e-global-typography-2b00968-font-weight: 600; /* Header/H2 */
    --e-global-typography-87a0c72-font-weight: 600; /* Header/H3 */
    --e-global-typography-ac81f48-font-weight: 600; /* Header/H4 */
    --e-global-typography-bb26e33-font-weight: 600; /* Header/H5 */
    --e-global-typography-b9601cc-font-weight: 600; /* Header/H6 */
}

/* === suite comparison table: column spotlight ===
   Hovering one product column dims the other two. :has() on the table is the same
   mechanism the /resources category tabs already use, so this needs no JavaScript.
   At rest the table is exactly the static table — nothing is hidden. */
.elementor-33501 .suite-table:has(.col-beacon:hover)   .col-spectrum,
.elementor-33501 .suite-table:has(.col-beacon:hover)   .col-chroma,
.elementor-33501 .suite-table:has(.col-spectrum:hover) .col-beacon,
.elementor-33501 .suite-table:has(.col-spectrum:hover) .col-chroma,
.elementor-33501 .suite-table:has(.col-chroma:hover)   .col-beacon,
.elementor-33501 .suite-table:has(.col-chroma:hover)   .col-spectrum { opacity: .38 }

/* Beacon is the page you are on: tint plus a 3px marker down the column. */
.elementor-33501 .suite-table .col-beacon { box-shadow: inset 3px 0 0 var(--purple) }

/* Below the wide measure the table scrolls rather than crushing four columns. */
@media (max-width: 1024px) {
  .elementor-33501 .suite-table { overflow-x: auto }
  .elementor-33501 .suite-table > * { min-width: 820px }
}/* End custom CSS */