#namo-optin {
            position: fixed !important;
            top: 0;
            left: 0;
            right: 0;
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
            overflow: hidden;
            margin: 0 auto;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
            display: none
        }

        #namo-optin .namo-optin--mr-10 {
            margin-right: 10px
        }

        #namo-optin .namo-optin--mt-5 {
            margin-top: 5px
        }

        #namo-optin .namo-optin--mt-15 {
            margin-top: 15px
        }

        #namo-optin .namo-optin--mb-5 {
            margin-bottom: 5px
        }

        #namo-optin .namo-optin--line-clamp {
            display: block;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            position: relative;
            line-height: 1.25;
            word-break: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 0
        }

        #namo-optin .namo-optin--line-clamp-2 {
            line-height: 1.25em !important;
            -webkit-line-clamp: 2;
            max-height: calc(1em * 1.5 * 2)
        }

        @supports (-webkit-line-clamp:1) {
            #namo-optin .namo-optin--line-clamp:after {
                display: none !important
            }
        }

        #namo-optin .row-namo {
            display: flex
        }

        #namo-optin .row--space-btwn {
            justify-content: space-between
        }

        #namo-optin .row--flex-end {
            justify-content: flex-end
        }

        #namo-optin .col-namo {
            display: flex;
            flex-direction: column
        }

        #namo-optin .col--content-center {
            justify-content: center
        }

        @-webkit-keyframes namoSlideInDown {
            0% {
                -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
                visibility: visible
            }

            100% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
            }
        }

        @keyframes namoSlideInDown {
            0% {
                -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
                visibility: visible
            }

            100% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
            }
        }

        @-webkit-keyframes namoSlideInUp {
            0% {
                -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0);
                visibility: visible
            }

            100% {
                -webkit-transform: translateZ(0);
                transform: translateZ(0)
            }
        }

        @keyframes namoSlideInUp {
            0% {
                -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0);
                visibility: visible
            }

            100% {
                -webkit-transform: translateZ(0);
                transform: translateZ(0)
            }
        }

        @-webkit-keyframes namoFadeIn {
            0% {
                opacity: 0
            }

            100% {
                opacity: 1
            }
        }

        @keyframes namoFadeIn {
            0% {
                opacity: 0
            }

            100% {
                opacity: 1
            }
        }

        #namo-optin.namo-optin--preview-container {
            position: fixed;
            z-index: 99999999;
            box-sizing: border-box;
            color: rgba(0, 0, 0, .87);
            font-family: Arial, "Helvetica Neue", sans-serif !important
        }

        #namo-optin.namo-optin--dialog-box {
            background: #fff;
            box-shadow: 0 0 20px rgb(0 0 0 / 10%);
            padding: 16px 13px 0;
            width: calc(100% - 26px);
            max-width: 420px;
            -webkit-animation-name: namoSlideInDown;
            animation-name: namoSlideInDown;
            animation-fill-mode: forwards;
            -webkit-animation-fill-mode: forwards;
            transform: translate3d(0, -100%, 0);
            -webkit-transform: translate3d(0, -100%, 0);
            animation-delay: .5s;
            -webkit-animation-duration: .8s;
            animation-duration: .8s
        }

        #namo-optin.namo-optin--dialog-box .namo-optin--icon-wrapper {
            width: 50px;
            height: 50px
        }

        #namo-optin.namo-optin--dialog-box .namo-optin--icon-wrapper .namo-optin--icon {
            max-height: 50px;
            margin-top: -3px
        }

        #namo-optin.namo-optin--dialog-box .namo-optin--content {
            width: 100%
        }

        #namo-optin .namo-optin--content .namo-optin--title span {
            color: #454545;
            font-size: 16px;
            word-break: break-word;
            letter-spacing: .15px;
            font-weight: 400;
            font-family: Arial, Helvetica, sans-serif !important
        }

        #namo-optin .namo-optin--content .namo-optin--message span {
            color: #666;
            font-size: 13px;
            letter-spacing: .15px;
            font-weight: 400;
            font-family: Arial, Helvetica, sans-serif !important
        }

        #namo-optin .namo-optin--ctas-container .namo-optin--cta {
            box-sizing: border-box;
            text-transform: unset;
            position: relative;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor: pointer;
            outline: 0;
            border: none;
            -webkit-tap-highlight-color: transparent;
            display: inline-block;
            white-space: nowrap;
            text-decoration: none;
            vertical-align: baseline;
            text-align: center;
            line-height: 36px;
            border-radius: 4px;
            font-size: 14px;
            padding: 0 13px;
            letter-spacing: .75px;
            min-width: 100px;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: Arial, Helvetica, sans-serif !important;
            transition: .3s ease-in;
            flex-grow: 1
        }

        #namo-optin.namo-optin--dialog-box .namo-optin--ctas-container .namo-optin--cta.namo-optin--cta-later {
            background-color: #fff !important;
            color: #666 !important
        }

        #namo-optin.namo-optin--dialog-box .namo-optin--ctas-container .namo-optin--cta.namo-optin--cta-allow {
            background-color: #007bff;
            color: #fff !important;
            box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12)
        }

        #namo-optin.namo-optin--dialog-box .namo-optin--branding-wrapper {
            width: auto;
            line-height: 1
        }

        #namo-optin.namo-optin--dialog-box .namo-optin--branding-wrapper .namo-optin--branding-text {
            text-decoration: none;
            font-size: 12px;
            font-weight: 400;
            font-family: Arial, Helvetica, sans-serif !important;
            letter-spacing: .4px;
            color: #747474
        }

        .top#namo-optin.namo-optin--dialog-box {
            border-radius: 0 0 10px 10px
        } 

        @media screen and (max-width:420px) {
            .top#namo-optin.namo-optin--dialog-box {
                padding: 15.75px 10.5px 0;
                margin: 0 0 15px;
                -webkit-animation-name: namoSlideInDown;
                animation-name: namoSlideInDown;
                animation-fill-mode: forwards;
                -webkit-animation-fill-mode: forwards;
                transform: translate3d(0, -100%, 0);
                -webkit-transform: translate3d(0, -100%, 0);
                animation-delay: .5s
            }

            .center#namo-optin.namo-optin--dialog-box {
                padding: 15.75px 10.5px 0;
                margin: 15px;
                -webkit-animation-name: namoFadeIn;
                animation-name: namoFadeIn;
                animation-fill-mode: forwards;
                -webkit-animation-fill-mode: forwards;
                opacity: 0;
                animation-delay: .5s;
                transform: unset;
                -webkit-transform: unset;
                border-radius: 10px
            }

            .bottom#namo-optin.namo-optin--dialog-box {
                width: 100%;
                margin: 15px 0 0;
                bottom: 0;
                left: unset;
                top: unset;
                padding: 15.75px 10.5px;
                -webkit-animation-name: namoSlideInUp;
                animation-name: namoSlideInUp;
                animation-fill-mode: forwards;
                -webkit-animation-fill-mode: forwards;
                transform: translate3d(0, 100%, 0);
                -webkit-transform: translate3d(0, 100%, 0);
                animation-delay: .5s;
                border-radius: 10px 10px 0 0
            }

            #namo-optin .namo-optin--content .namo-optin--title span {
                font-size: 16px
            }

            #namo-optin .namo-optin--content .namo-optin--message span {
                font-size: 13px
            }

            #namo-optin .namo-optin--ctas-container .namo-optin--cta {
                min-width: 85px;
                max-width: 100%
            }
        }
        
     .flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.items-center {
  align-items: center;
}

.max-w-md {
  max-width: 28rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.bg-card {
  background-color: #ffffff; /* white */
}

.border-4 {
  border-width: 4px;
}

.border-premium {
  border-color: #7c3aed; /* purple-600 */
}

.rounded-lg {
  border-radius: 0.5rem;
}

.overflow-hidden {
  overflow: hidden;
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.bg-background {
  background-color: #ffffff; /* white */
}

.p-2 {
  padding: 0.5rem;
}

.text-center {
  text-align: center;
}

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.centered-image {
  display: block;
}

.bg-accent {
  background-color: #dc2626; /* red-600 */
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.inline-flex {
  display: inline-flex;
}

.gap-2 {
  gap: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.w-5 {
  width: 1.25rem;
}

.text-accent-foreground {
  color: #ffffff; /* white */
}

.font-semibold {
  font-weight: 600;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.font-bold {
  font-weight: 700;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.h-11 {
  height: 2.75rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.text-accent {
  color: #dc2626; /* red-600 */
}

.hover\:bg-background\/90:hover {
  background-color: rgba(255, 255, 255, 0.9); /* white with 90% opacity */
}

.border-2 {
  border-width: 2px;
}

.border-background\/20 {
  border-color: rgba(255, 255, 255, 0.2); /* white with 20% opacity */
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.hover\:shadow-xl:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}

.duration-300 {
  transition-duration: 0.3s;
}

[&_svg] {
  pointer-events: none;
}

[&_svg] {
  width: 1rem;
  height: 1rem;
}

[&_svg] {
  flex-shrink: 0;
}