@media screen {
  @layer site.header {

    :root {
      /* Nav sections to determine overall height */
      --header-height: 4.375rem;
      --subheader-height: 9.375rem;
      --main-padding-top-nav-offset: calc( var(--top-offset, 0px) + var(--header-height) + var(--subheader-height) );
      
      --header-nav-gap: 20px;
    }
    html {
      --top-offset: 0px;
    }
    html[data-html-scroll-top]:has(.admin-bar) {
      --top-offset: 46px;
    }
    @media (min-width: 601px) {
      html:has(.admin-bar), html[data-html-scroll-top]:has(.admin-bar) {
        --top-offset: 32px;
      }
    }
    @media (min-width: 42.5rem) {
      :root {
        --subheader-height: 4.375rem;
      }
    }
    @media (min-width: 58.75rem) {
      :root {
        --header-height: 9.375rem;
        --header-padding-top: 1.0625rem;
      }
    }
    @media (min-width: 81.875rem) {
      :root {
        --header-height: 7.5rem;
      }
    }

    /* Base */
    @layer base {
      body > header {
        background: var(--theme-white);
        box-shadow: var(--theme-box-shadow-light);
        container: header / inline-size;
        left: 0;
        position: fixed;
        top: var(--top-offset);
        transition: background-color .3s;
        width: 100svw;
        z-index: 10;
      }
      [data-html-scroll-top] body > header {
        border: 0;
        box-shadow: unset;
      }

      /* Content Wrap */
      main-header pint-content-width {
        column-gap: var(--theme-gap-5);
        display: flex;
        flex-direction: column;
        height: var(--header-height);
        max-width: var(--theme-viewport-max-calc);
        place-content: center;
      }
      @media (min-width: 58.75rem) {
        /* Make header bg color opaque when hovering the main nav */
        header:has(.nav-header menu > li:hover) {
          background-color: var(--theme-white);
        }
      }
      @container header (min-width: 58.75rem) and (max-width: 74.996875rem) {
        main-header pint-content-width {
          padding-block-start: var(--header-padding-top);
          place-content: start;
        }
      }
      @container header (min-width: 81.875rem) {
        main-header pint-content-width {
          flex-direction: row;
          place-content: unset;
          place-items: center;
        }
      }
    }


    /* Navigation*/
    @layer nav {


      /* DESKTOP */
      @container header (min-width: 58.75rem) {
        /* Mobile Items */
        .nav-header-toggle-btn,
        .nav-header-toggle,
        .nav-header .next-lvl-btn,
        .nav-header .nav-back {
          display: none;
        }

        .nav-header {
          --nav-header-height: 3.5rem;
          width: 100%;
        }
        .nav-header menu {
          display: flex;
          list-style: none;
          margin: 0;
          padding: 0;
          place-items: center;
        }


        /* 1ST LEVEL */
        @layer level-1 {
          .nav-header menu > li {
            z-index: 12;
          }
          .nav-header menu > li:first-of-type {
            margin-inline-start: calc( -1 * var(--header-nav-gap) );
          }
          .nav-header menu > li:has(ul) {
            pointer-events: none;
          }
          .nav-header menu > li[init]:has(ul),
          .no-js .nav-header menu > li:has(ul) {
            pointer-events: auto;
          }
          .nav-header nav-row {
            display: contents;
          }
          @container header (min-width: 58.75rem) {
            .nav-header nav p {
              margin: 1rem 0;
            }
          }
          .nav-header a:not(.button) {
            box-sizing: border-box;
            color: var(--theme-font-color);
            display: flex;
            font-family: var(--theme-font-medium);
            font-size: 1.125rem;
            line-height: 1.5rem;
            font-weight: var(--theme-font-medium-weight);
            min-width: 104px;
            padding: 1rem var(--header-nav-gap);
            place-items: center;
          }
          [safari] .nav-header a {
            font-size: 1rem;
          }
          .nav-header .button {
            --theme-button-border-radius: .5rem;
            box-sizing: border-box;
            font-size: 1.125rem;
            font-weight: 500;
            min-height: 2.375rem;
          }
          /* Search */
          .nav-header menu > li.nav-1-search {
            margin-inline-start: auto;
          }
          .nav-header menu > li.nav-1-search a {
            margin-inline-end: .9375rem;
            min-width: 2.8125rem;
            padding: .625rem .75rem;
          }
          .nav-header menu > li.nav-1-search span {
            display: none;
          }
          /* Contact */
          .nav-header menu > li.nav-1-contact a {
            min-width: 131px;
            gap: .5rem;
            padding: .375rem 18px;
          }
          .nav-header menu > li.nav-1-contact svg {
            height: .6875rem;
          }
        }


        /* 2ND LEVEL */
        @layer level-2 {
          .nav-header nav {
            --nav-header-nav-column-gap: 6.875rem;
            background: var(--theme-white);
            box-sizing: border-box;
            box-shadow: 0 .25rem .25rem rgba(0 0 0 / 10%);
            display: block;
            inset: calc( var(--top-offset) + ( var(--header-height) / 2 ) + ( var(--nav-header-height) / 2 ) ) auto auto 0;
            opacity: 0;
            pointer-events: none;
            position: fixed;
            visibility: hidden;
            width: 100%;
            z-index: 11;
          }

          .nav-header menu > li:hover nav,
          [safari] .nav-header menu > li.hover nav {
            opacity: 1;
            pointer-events: auto;
            visibility: visible;
          }
          /* Inner Wrapper */
          .nav-header nav-inner {
            display: block;
            opacity: 0;
            padding-block: calc( var(--theme-gap-5) - 1rem ) var(--theme-gap-5);
            pointer-events: none;
            transition: opacity .65s;
            visibility: hidden;
          }
          .nav-header menu > li:hover nav-inner {
            opacity: 1;
            pointer-events: auto;
            visibility: visible;
          }

          .nav-header nav-inner > ul {
            column-gap: var(--nav-header-nav-column-gap);
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            list-style: none;
            margin-inline: auto;
            max-width: var(--theme-viewport-calc);
            padding: 0;
          }

          /* Full-Width, Arrow Button */
          .button-nav {
            background-color: transparent;
            border: .125rem solid transparent;
            box-sizing: border-box;
            color: var(--theme-purple);
            cursor: pointer;
            display: grid;
            font-family: var(--theme-font-semi-bold);
            font-size: var(--theme-font-size-6);
            font-weight: 500;
            gap: .5rem;
            grid-template-columns: auto 1fr;
            line-height: var(--theme-line-height-6);
            min-height: 2.375rem;
            outline: none;
            padding: 0;
            place-content: start;
            place-items: start;
            text-decoration: none;
            transform: translateX( calc( -1 * var(--button-full-indent) ) );
            width: 100%;
          }
          .button-nav:focus-visible {
            background-color: var(--theme-purple-darker);
            border-radius: calc( var(--button-full-indent) / 2 );
            box-shadow: var(--theme-button-focus-shadow);
            padding-inline: .625rem;
          }
          .button-nav:hover {
            background-color: transparent;
            text-decoration: none;
          }
          .button-nav svg {
            height: 1rem;
            width: auto;
          }
          .button-nav path {
            --theme-icon-color: var(--theme-purple);
          }
          /* Right Arrow */
          .button-nav .icon-arrow-right {
            height: .875rem;
            transform: translate(0, 11px);
            transition: transform .3s;
            width: 1.0625rem;
          }
          .button-nav:hover .icon-arrow-right {
            transform: translate(var(--theme-button-arrow-offset), 11px);
          }

          
          .nav-header nav-layout {
            column-gap: var(--theme-gap);
            display: grid;
            font-size: 1rem;
            grid-template-columns: 1fr 15.625rem;
            line-height: 1.875rem;
            margin-block-start: 1.875rem;
            row-gap: 1.5rem;
          }
          .nav-header nav-layout:not(:has(:nth-child(2))) {
            grid-template-columns: 1fr;
          }
          .nav-header nav-layout p {
            margin: 0;
          }
          .nav-header nav-layout img {
            aspect-ratio: 25 / 16;
            height: 10rem;
            object-fit: cover;
            width: 100%;
          }
          .nav-header nav-layout ul {
            list-style: none;
            margin: 0;
            padding: 0;
            position: relative;
          }
          .nav-header nav-layout ul:before {
            background-color: var(--theme-border-color);
            content: '';
            display: block;
            height: 100%;
            inset: 0 auto auto 0;
            pointer-events: none;
            position: absolute;
            transform: translateX( calc( -1 * var(--theme-gap) / 2 ) );
            width: .0625rem;
          }

          [safari] .nav-header [layout="links"] li {
            padding-block: 4px;
          }
          [safari] .nav-header [layout="links"] a {
            padding: 0;
          }
          .nav-header nav-layout a {
            padding: 0;
          }
          .nav-header nav-layout[layout="links"] a {
            font-size: var(--theme-font-size-1);
          }
          .nav-header nav-layout li + li a {
            padding-block-start: 6px;
          }

          /* 2 Column - Layout */
          .nav-header nav-inner > ul[data-layout="2col"] :last-child {
            position: relative;
          }
          .nav-header nav-inner > ul[data-layout="2col"] > :last-child:before {
            background-color: var(--theme-border-color);
            content: '';
            display: block;
            height: 100%;
            inset: 0 auto auto 0;
            pointer-events: none;
            position: absolute;
            transform: translateX( calc( -1 * var(--nav-header-nav-column-gap) / 2 ) );
            width: .0625rem;
          }


          /* 3 Column - Layout */
          .nav-header nav-inner > ul[data-layout="3col"] {
            column-gap: var(--nav-header-nav-column-gap);
            display: flex;
            flex-wrap: wrap;
            row-gap: 3.375rem;
          }
          .nav-header nav-inner > ul[data-layout="3col"] li {
            flex-basis: 23%;
            position: relative;
          }
          .nav-header nav-inner > ul[data-layout="3col"] > li:before {
            background-color: var(--theme-border-color);
            content: '';
            display: block;
            height: 100%;
            inset: 0 auto auto 0;
            pointer-events: none;
            position: absolute;
            transform: translateX( calc( -1 * var(--nav-header-nav-column-gap) / 2 ) );
            width: .125rem;
          }
          /* Normal layout with full rows */
          .nav-header nav-inner > ul[data-layout="3col"] > li:first-child:before,
          .nav-header nav-inner > ul[data-layout="3col"]:not([data-uneven]) > li:nth-child(4n):before,
          .nav-header nav-inner > ul[data-layout="3col"]:not([data-uneven]) > li:nth-child(3n + 7):before {
            display: none;
          }
          @container header (min-width: 58.75rem) {
            /* Layout with last row missing 1 item (ex: 5 total children) */
            .nav-header nav-inner > ul[data-layout="3col"][data-uneven] > li:nth-child(4n),
            .nav-header nav-inner > ul[data-layout="3col"][data-uneven] > li:nth-child(3n + 7) {
              margin-inline-start: calc( 23% + var(--nav-header-nav-column-gap) );
            }
          }
          @container header (min-width: 1326px) {
            .nav-header nav-inner > ul[data-layout="3col"] li {
              flex-basis: 27%;
            }
            /* Layout with last row missing 1 item (ex: 5 total children) */
            .nav-header nav-inner > ul[data-layout="3col"][data-uneven] > li:nth-child(4n),
            .nav-header nav-inner > ul[data-layout="3col"][data-uneven] > li:nth-child(3n + 7) {
              margin-inline-start: calc( 27% + var(--nav-header-nav-column-gap) );
            }
          }


          /* 4 Column - Layout */
          .nav-header nav-inner > ul[data-layout="4col"] {
            column-gap: var(--nav-header-nav-column-gap);
            display: grid;
            grid-template-columns: repeat(4, 1fr);
          }
          .nav-header nav-inner > ul[data-layout="4col"] li {
            position: relative;
          }
          .nav-header nav-inner > ul[data-layout="4col"] > li:before {
            background-color: var(--theme-border-color);
            content: '';
            display: block;
            height: 100%;
            inset: 0 auto auto 0;
            pointer-events: none;
            position: absolute;
            transform: translateX( calc( -1 * var(--nav-header-nav-column-gap) / 2 ) );
            width: .0625rem;
          }
          .nav-header nav-inner > ul[data-layout="4col"] > li:first-child:before {
            display: none;
          }

          /* Solutions */
          .nav-header .nav-1-solutions nav-row a {
            pointer-events: none;
            user-select: none;
          }
          /* Products */
          .nav-header .nav-1-products nav-row a {
            pointer-events: none;
            user-select: none;
          }
          /* Resources */
          .nav-header .nav-1-resources nav-row a {
            pointer-events: none;
            user-select: none;
          }
          .nav-header .nav-1-solutions:hover > nav-row > a,
          .nav-header .nav-1-products:hover > nav-row > a,
          .nav-header .nav-1-resources:hover > nav-row > a,
          .nav-header .nav-1-company:hover > nav-row > a,
          .nav-header li[data-active="true"] > nav-row > a,
          .nav-header li[data-active="true"] > a {
            --underline-color: var(--theme-purple);
            --underline-offset: var(--theme-link-underline-offset-start);
            color: var(--theme-purple);
          }
          /* Company */
          .nav-header .nav-1-company nav-row a {
            pointer-events: none;
            user-select: none;
          }


          /* Special desktop width where main nav drops below logo */
          @container header (min-width: 58.75rem) and (max-width: 90rem) {
            .nav-header nav {
              inset-block-start: calc( var(--top-offset) + var(--header-padding-top) + var(--site-logo-height) + var(--nav-header-height) );
              padding-inline: var(--theme-gutter);
            }
            .nav-header nav > ul {
              --nav-header-nav-column-gap: 5rem;
            }
            .nav-header nav-layout {
              grid-template-columns: 1fr;
            }
            .nav-header nav-layout ul:before {
              display: none;
            }

            /* 4 Column - Layout */
            .nav-header nav > ul[data-layout="4col"] {
              grid-template-columns: repeat(2, 1fr);
            }
            .nav-header nav > ul[data-layout="4col"] > li {
              padding-block-start: 1.5rem;
            }
            .nav-header nav > ul[data-layout="4col"] > li:nth-of-type(1),
            .nav-header nav > ul[data-layout="4col"] > li:nth-of-type(2) {
              padding-block-start: 0;
            }
          }

        }

      }


      /* MOBILE */
      @container header (max-width: 58.746875rem) {

        /* Toggle */
        @layer toggle {
          /* Toggle Button */
          .nav-header-toggle-btn {
            --header-toggle-bar-height: .1875rem;
            --header-toggle-bar-width: 1.4375rem;
            background-color: transparent;
            border: 0;
            cursor: pointer;
            height: 48px;
            inset: 11px 7px auto auto;
            margin: 0;
            padding: 0;
            position: absolute;
            width: 48px;
            z-index: 11;
          }
          .nav-header-toggle-btn:before,
          .nav-header-toggle-btn:after {
            background-color: var(--theme-purple);
            border-radius: 3px;
            content: '';
            display: block;
            inset: 50%;
            position: absolute;
            height: var(--header-toggle-bar-height);
            transition: transform .5s;
            width: var(--header-toggle-bar-width);
          }
          .nav-header-toggle-btn:before {
            transform: translate(-50%, -.5625rem);
            transform-origin: top left;
          }
          .nav-header-toggle-btn[data-active]:before {
            background-color: var(--theme-white);
            width: 30px;
            transform: translate( calc( -50% + 5px ), -.5625rem ) rotate(45deg);
          }
          .nav-header-toggle-btn:after {
            transform: translate(-50%, .4375rem);
            transform-origin: bottom left;
          }
          .nav-header-toggle-btn[data-active]:after {
            background-color: var(--theme-white);
            width: 30px;
            transform: translate( calc( -50% + 5px ), calc( .5rem + 2px ) ) rotate(-45deg);
          }
          .nav-header-toggle-btn span {
            display: block;
            height: 0;
            inset: 50%;
            position: absolute;
            transform: translate(-50%, calc( -50% - .0625rem ));
            width: var(--header-toggle-bar-width);
          }
          .nav-header-toggle-btn span span {
            overflow: hidden;
          }
          .nav-header-toggle-btn span:before {
            background-color: var(--theme-purple);
            border-radius: var(--header-toggle-bar-height);
            content: '';
            display: block;
            height: var(--header-toggle-bar-height);
            opacity: 1;
            width: 100%;
          }
          .nav-header-toggle-btn[data-active] span:before {
            opacity: 0;
          }
            /* -- Focused */
            .nav-header-toggle-btn:focus-visible {
              background-color: var(--theme-purple-light);
              outline: none;
            }
            .nav-header-toggle-btn:focus-visible:before,
            .nav-header-toggle-btn:focus-visible:after,
            .nav-header-toggle-btn:focus-visible span:before {
              background-color: var(--theme-black);
            }


          /* Mobile Checkbox */
          .nav-header-toggle {
            display: none;
          }
        }


        /* Nav */
        @layer nav-header {

          /* 1ST LEVEL */
          @layer level-1 {
            .nav-header {
              background-color: var(--theme-purple-darker);
              box-sizing: border-box;
              display: none;
              flex-direction: column;
              font-family: var(--theme-font-medium);
              font-size: 1.25rem;
              height: 100svh;
              inset: 0 0 auto auto;
              overflow: auto;
              padding: 5rem 1.875rem 5rem;
              position: fixed;
              user-select: none;
              z-index: 10;
              width: 100svw;
            }
            .nav-header-toggle:checked + .nav-header {
              display: flex;
            }
            .nav-header :where(menu, ul) {
              list-style: none;
              margin: 0;
              padding: 0;
            }
            .nav-header menu {
              height: 100%;
              transform: translateX(0);
              transition: transform .5s;
            }
            .nav-header menu[data-level="2"] {
              transform: translateX(-100svw);
            }
            .no-js .nav-header menu[data-level="2"] {
              transform: 0;
            }
            .nav-header nav-row {
              column-gap: 1.25rem;
              display: flex;
              place-content: space-between;
              place-items: center;
            }
            .nav-header a:not(.button) {
              --underline-color: transparent;
              color: var(--theme-white);
              cursor: pointer;
              display: inline-block;
              padding: .875rem 0;
            }
            .nav-header li li a:not(.button) {
              font-weight: 600;
              padding-block: .8125rem;
            }
            .nav-header a:not(.button):focus-visible {
              --underline-color: var(--theme-purple);
            }
            .nav-header a:not(.button):hover,
            .nav-header li[data-active="true"] > nav-row > a:not(.button),
            .nav-header li[data-active="true"] > a:not(.button) {
              color: var(--theme-purple-lighter);
            }
            .no-js .nav-header li li a {
              font-size: .9375rem;
              padding-block: 0 !important;
            }
            .nav-header li ul:has([layout="links"]) li a {
              font-size: 1.25rem;
              padding-block: .875rem .25rem !important;
            }
            .nav-header li ul:has([layout="links"]) li li a {
              font-family: var(--theme-font-regular);
              font-size: .9375rem;
              padding-block: 0 !important;
            }
            .nav-header a:not(.button) svg {
              display: none;
            }
            /* Next level button */
            .nav-header .next-lvl-btn {
              background-color: transparent;
              border: 0;
              border-radius: .625rem;
              cursor: pointer;
              display: flex;
              height: 2.5rem;
              margin: 0;
              outline: none;
              padding: 0;
              place-content: center;
              place-items: center;
              transform: translateX(0);
              transition: box-shadow .4s, transform .4s;
              width: 2.5rem;
            }
            .nav-header .next-lvl-btn:focus-visible,
            .nav-header .next-lvl-btn:hover {
              transform: translateX(.1875rem);
            }
            .nav-header .next-lvl-btn:focus-visible {
              box-shadow: var(--theme-box-shadow);
            }
            .nav-header menu[data-level="2"] .next-lvl-btn,
            .no-js .nav-header .next-lvl-btn {
              display: none;
            }
            .nav-header .next-lvl-btn .icon-arrow-right {
              --theme-icon-color: var(--theme-white);
              height: .75rem;
            }
            /* Normal button */
            .nav-header .button {
              --theme-button-padding-block: .6875rem;
              box-sizing: border-box;
              color: var(--theme-white);
              place-content: space-between;
              width: 100%;
            }
            .nav-header :where(p, picture) {
              display: none;
            }
            /* Alternate button */
            .nav-header .button-alt path {
              --theme-icon-color: var(--theme-white);
            }
          }


          /* 2ND LEVEL (Flyout) */
          @layer level-2 {
            .nav-header nav {
              display: none;
              inset: 0 auto auto 100svw;
              position: fixed;
              width: 100%;
            }
            .no-js .nav-header nav {
              display: block;
              inset: unset;
              padding-inline-start: .5rem;
              position: relative;
            }
            /* When in view.. */
            .nav-header nav[data-active] {
              display: block;
            }
            .nav-header nav[data-active] [data-label]:before {
              color: var(--theme-purple-lighter);
              content: attr(data-label);
              display: block;
              font-family: var(--theme-font-semi-bold);
              margin-block: 2rem 1rem;
              text-transform: uppercase;
            }
            .nav-header nav[data-active] [data-label]:has([layout="links"]):before {
              margin-block-end: 2rem .25rem;
            }
            .nav-header nav[data-active] [data-label]:has([layout="links"]) > li + li {
              margin-block-start: 1rem;
            }

            /* 2nd-level 'Back' button */
            .nav-header .nav-back {
              --theme-icon-color: var(--theme-white);
              background-color: transparent;
              border: 0;
              color: var(--theme-white);
              cursor: pointer;
              font-size: 14px;
              display: flex;
              gap: .5rem;
              margin-block-end: 1.3125rem;
              outline: none;
              margin: .25rem 0 -60px;
              padding: .625rem;
              place-items: center;
              text-transform: uppercase;
              transform: translate(-.625rem, -60px);
              transition: box-shadow .4s;
            }
            .nav-header .nav-back:focus-visible {
              box-shadow: var(--theme-box-shadow);
            }
            .nav-header .nav-back svg {
              height: .625rem;
              width: 1rem;
            }

            /* Search */
            .nav-header .nav-1-search {
              box-sizing: border-box;
              inset: auto auto 4rem 0;
              position: absolute;
              width: 100%;
            }
            .nav-header .nav-1-search a {
              color: var(--theme-white);
              display: flex;
            }
            .nav-header .nav-1-search a:before {
              color: var(--theme-white);
              content: 'Search';
            }
            .nav-header .nav-1-search svg {
              margin-inline-start: auto;
            }
            .no-js .nav-header .nav-1-search {
              inset: unset;
              margin-block-start: var(--theme-gap);
              position: relative;
            }
            /* Contact */
            .nav-header .nav-1-contact {
              box-sizing: border-box;
              inset: auto auto 0 0;
              position: absolute;
              width: 100%;
            }
            .no-js .nav-header .nav-1-contact {
              inset: unset;
              margin-block-start: var(--theme-gap);
              position: relative;
            }
          }

        }

      }

    }


    /* Sub Head */
    @layer subhead {
      sub-header {
        display: block;
        font-weight: 500;
        width: 100%;
      }
      
      sub-header pint-content-width {
        display: flex;
        min-height: var(--subheader-height);
        max-width: var(--theme-viewport-max-calc);
        padding-block: 0;
        position: relative;
      }
      sub-header pint-content-width::before {
        content: '';
        display: block;
        position: absolute;
        inset-block-end: 100%;
        inset-inline: 0;
        width: 100%;
        height: 0.125rem;
        background: var(--theme-separator);
      }
      sub-header menu {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        place-items: center;
      }
      sub-header .subnav-intro {
        font-size: .9375rem;
        line-height: 2;
        text-transform: uppercase;
        white-space: nowrap;
      }
      sub-header button {
        display: none;
      }
      sub-header a {
        color: var(--theme-purple);
        display: flex;
        padding-block: 0;
        place-content: center;
        place-items: center;
      }
      sub-header .subnav-intro a {
        color: var(--theme-purple-dark);
      }
      sub-header a.active {
        opacity: 0.5;
      }

      @media (width <= 42.5rem) {
        sub-header pint-content-width {
          justify-content: center;
        }
        sub-header menu {
          flex-direction: column;
          padding-block: .5rem;
        }

        sub-header a {
          padding-block: .25rem;
        }
      }

      @media (width > 42.5rem) {
        sub-header a {
          font-size: .8125rem;
          min-height: var(--subheader-height);
          padding-inline: .75rem;
          text-wrap: nowrap;
        }
        
        sub-header .subnav-intro {
          font-size: .8125rem;
          margin-inline-end: 1.25rem;
        }
      }

      @media (min-width: 50.625rem) {
        sub-header a {
          font-size: 1rem;
          padding-inline: 0.9375rem;
          text-wrap: unset;
        }
      }
    }


    /* Help Dialog */
    @layer help-dialog {
      :root {
        --help-overlay-width: 48rem;
      }
      .dl-help-overlay {
        background-color: white;
        border: 0;
        border-radius: 1rem;
        box-sizing: border-box;
        height: 100%;
        inset: 0;
        max-height: 42.75rem;
        padding: 0;
        position: fixed;
        width: var(--help-overlay-width);
        z-index: 100;
      }
      .dl-help-overlay::backdrop {
        --dl-help-overlay-background-color: color-mix(in srgb, var(--theme-gray-2) 80%, transparent);
        background-color: var(--dl-help-overlay-background-color, color-mix(in srgb, #d9d9d9 80%, transparent));
        /* For legacy Safari support */
      }
      help-view {
        color: var(--theme-font-color);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 3.125rem 2.5rem;
        position: relative;
        row-gap: 1.25rem;
        width: 100%;
      }
      help-view h2 {
        margin: 0;
      }
      help-view h4 {
        color: var(--theme-font-color);
      }
      help-view h4 strong {
        color: var(--theme-purple);
      }
      help-view li + li {
        margin-block-start: .5rem;
      }

      /* Content */
      help-content {
        border: .0625rem solid var(--theme-gray-2);
        box-sizing: border-box;
        display: block;
        height: 100%;
        margin-block: .625rem;
        max-height: 27.1875rem;
        overflow: auto;
        padding: 1.875rem;
      }
      help-content > :first-child {
        margin-block-start: 0 !important;
      }
      help-content > :last-child {
        margin-block-end: 0 !important;
      }

      /* Buttons */
      help-view form {
        display: flex;
        place-content: end;
      }
      help-view form .button * {
        pointer-events: none;
      }
      help-view .close {
        background-color: transparent;
        border: 0;
        cursor: pointer;
        display: flex;
        height: 2rem;
        inset: 3.125rem 2.5rem auto auto;
        margin: 0;
        padding: 0;
        place-content: center;
        place-items: center;
        position: absolute;
        width: 2rem;
      }
      help-view .close svg {
        height: 1.25rem;
        width: 1.25rem;
      }

      @media (max-width: 47.996875rem) {
        :root {
          --help-overlay-width: 100svw;
        }
      }
    }



  }
}

@media print {
  .nav-header-toggle,
  .nav-header-toggle-btn,
  .nav-header,
  .nav-header-old {
    display: none;
  }
}