.elementor-386 .elementor-element.elementor-element-00ee64e{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-42248a4 *//* =========================================================
   UBIND PLUGIN HERO - RESPONSIVE CSS
   Paste at the BOTTOM of your existing CSS
   ========================================================= */


/* Prevent horizontal overflow */
.hero.plugin {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.hero.plugin *,
.hero.plugin *::before,
.hero.plugin *::after {
    box-sizing: border-box;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    /* Main hero container */
    .hero.plugin .hero-inner {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 45px !important;

        width: 100% !important;
        max-width: 100% !important;

        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    /* Important - allows grid children to shrink */
    .hero.plugin .hero-inner > *,
    .hero.plugin .reveal {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    /* Heading */
    .hero.plugin .h-display {
        width: 100%;
        max-width: 100%;

        font-size: clamp(42px, 6vw, 64px) !important;
        line-height: 1.05 !important;

        overflow-wrap: break-word;
    }

    /* Description */
    .hero.plugin .hero-sub {
        width: 100%;
        max-width: 680px;

        font-size: 17px !important;
        line-height: 1.65 !important;
    }

    /* Buttons */
    .hero.plugin .hero-ctas {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    /* Meta pills */
    .hero.plugin .hero-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    /* Code box */
    .hero.plugin .codecard {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .hero.plugin .codecard pre {
        width: 100%;
        max-width: 100%;

        overflow-x: auto;
        white-space: pre-wrap !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .hero.plugin .codecard code {
        white-space: pre-wrap !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .hero.plugin {
        min-height: auto !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* Container */
    .hero.plugin .hero-inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        gap: 36px !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;

        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Eyebrow */
    .hero.plugin .hero-eyebrow {
        font-size: 12px !important;
        letter-spacing: 0.14em !important;

        margin-bottom: 20px !important;
    }

    /* Main title */
    .hero.plugin .h-display {
        width: 100% !important;
        max-width: 100% !important;

        font-size: clamp(38px, 10vw, 52px) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.035em !important;

        margin-bottom: 22px !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    /* Italic "forms" text */
    .hero.plugin .h-display .u-em {
        display: inline;
        white-space: normal;
    }

    /* Hero paragraph */
    .hero.plugin .hero-sub {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 16px !important;
        line-height: 1.65 !important;

        margin-bottom: 28px !important;

        overflow-wrap: break-word;
    }

    /* Button container */
    .hero.plugin .hero-ctas {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        gap: 12px !important;
        margin-bottom: 26px !important;
    }

    /* Make buttons mobile friendly */
    .hero.plugin .hero-ctas .btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 54px;

        padding: 14px 20px !important;

        text-align: center;
        white-space: normal !important;
    }

    /* Download icon */
    .hero.plugin .hero-ctas .arrow-svg {
        flex-shrink: 0;
    }

    /* Pills */
    .hero.plugin .hero-meta {
        display: flex !important;
        flex-wrap: wrap !important;

        width: 100% !important;

        gap: 8px !important;
    }

    .hero.plugin .hero-meta .pill {
        display: inline-flex;
        align-items: center;

        max-width: 100%;

        font-size: 12px !important;

        white-space: normal !important;
        overflow-wrap: anywhere;
    }


    /* =====================================================
       CODE CARD
       ===================================================== */

    .hero.plugin .codecard {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        overflow: hidden !important;
    }

    /* Code card top/header */
    .hero.plugin .codecard .ct {
        width: 100%;

        padding: 14px 16px !important;

        display: flex;
        align-items: center;

        overflow: hidden;
    }

    .hero.plugin .codecard .fn {
        font-size: 12px !important;
    }

    /* Actual code */
    .hero.plugin .codecard pre {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding: 18px 16px !important;

        font-size: 11px !important;
        line-height: 1.7 !important;

        white-space: pre-wrap !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .hero.plugin .codecard code {
        font-size: inherit !important;

        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .hero.plugin {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }

    .hero.plugin .hero-inner {
        padding-left: 16px !important;
        padding-right: 16px !important;

        gap: 30px !important;
    }

    /* Smaller heading */
    .hero.plugin .h-display {
        font-size: clamp(34px, 10.5vw, 44px) !important;
        line-height: 1.08 !important;
    }

    /* Paragraph */
    .hero.plugin .hero-sub {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    /* Buttons */
    .hero.plugin .hero-ctas .btn {
        min-height: 52px;

        padding: 13px 16px !important;

        font-size: 14px !important;
    }

    /* Pills */
    .hero.plugin .hero-meta {
        gap: 7px !important;
    }

    .hero.plugin .hero-meta .pill {
        font-size: 11px !important;
        padding: 8px 12px !important;
    }

    /* Code */
    .hero.plugin .codecard pre {
        padding: 16px 14px !important;

        font-size: 10px !important;
        line-height: 1.65 !important;
    }
}

/* =========================================================
   EMBED CARDS - MOBILE RESPONSIVE
   Paste at the BOTTOM of your existing CSS
   ========================================================= */

/* Prevent this section from creating horizontal scrolling */
.embed-grid,
.embed-grid * {
    box-sizing: border-box;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    /* Change cards to one column */
    .embed-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px !important;

        width: 100% !important;
        max-width: 100% !important;
    }

    /* Individual card */
    .embed-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        overflow: hidden !important;
    }

    /* Important for grid children */
    .embed-card > * {
        max-width: 100%;
        min-width: 0;
    }

    /* Code card */
    .embed-card .codecard {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        overflow: hidden !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    /* Main grid */
    .embed-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 22px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* =====================================================
       CARD
       ===================================================== */

    .embed-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding: 26px 20px !important;

        margin: 0 !important;

        overflow: hidden !important;
    }


    /* Product Form / Portal tag */
    .embed-card .tag {
        display: inline-flex !important;
        align-items: center;

        width: fit-content;
        max-width: 100%;

        font-size: 11px !important;
        line-height: 1 !important;

        padding: 8px 13px !important;
        margin-bottom: 18px !important;

        white-space: normal !important;
    }


    /* =====================================================
       HEADING
       ===================================================== */

    .embed-card h3 {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 0 !important;
        margin-bottom: 10px !important;

        font-size: 24px !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }


    /* =====================================================
       PARAGRAPH
       ===================================================== */

    .embed-card > p {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 0 !important;
        margin-bottom: 20px !important;

        font-size: 15px !important;
        line-height: 1.6 !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }


    /* =====================================================
       CODE CARD
       ===================================================== */

    .embed-card .codecard {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        overflow: hidden !important;
    }


    /* Code card header */
    .embed-card .codecard .ct {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;

        padding: 13px 15px !important;

        overflow: hidden !important;
    }


    /* File name - product.html / portal.html */
    .embed-card .codecard .fn {
        font-size: 11px !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }


    /* Dots */
    .embed-card .dotz {
        display: flex !important;
        align-items: center !important;

        gap: 5px !important;

        flex-shrink: 0 !important;
        margin-right: 10px !important;
    }

    .embed-card .code-dot {
        width: 10px !important;
        height: 10px !important;

        flex-shrink: 0 !important;
    }


    /* =====================================================
       ACTUAL CODE
       ===================================================== */

    .embed-card .codecard pre {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        padding: 18px 15px !important;

        font-size: 11px !important;
        line-height: 1.9 !important;

        /* VERY IMPORTANT FOR MOBILE */
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;

        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }


    .embed-card .codecard code {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        font-size: inherit !important;
        line-height: inherit !important;

        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .embed-grid {
        gap: 18px !important;
    }

    /* Card spacing */
    .embed-card {
        padding: 22px 16px !important;
        border-radius: 20px !important;
    }

    /* Tag */
    .embed-card .tag {
        font-size: 10px !important;
        padding: 7px 12px !important;

        margin-bottom: 16px !important;
    }

    /* Heading */
    .embed-card h3 {
        font-size: 22px !important;
        line-height: 1.22 !important;

        margin-bottom: 9px !important;
    }

    /* Paragraph */
    .embed-card > p {
        font-size: 14px !important;
        line-height: 1.6 !important;

        margin-bottom: 18px !important;
    }

    /* Code header */
    .embed-card .codecard .ct {
        padding: 12px 13px !important;
    }

    /* Code */
    .embed-card .codecard pre {
        padding: 16px 13px !important;

        font-size: 10px !important;
        line-height: 1.8 !important;
    }
}


/* =========================================================
   EXTRA SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .embed-card {
        padding: 20px 14px !important;
    }

    .embed-card h3 {
        font-size: 20px !important;
    }

    .embed-card > p {
        font-size: 13.5px !important;
    }

    .embed-card .codecard pre {
        padding: 14px 11px !important;
        font-size: 9.5px !important;
    }
}

/* =========================================================
   CONFIG SECTION - MOBILE RESPONSIVE
   Paste at the BOTTOM of your existing CSS
   ========================================================= */

.config-grid,
.config-grid * {
    box-sizing: border-box;
}

/* Make sure nothing causes horizontal scroll */
.config-grid {
    width: 100%;
    max-width: 100%;
}

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 991px) {

    .config-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 28px !important;

        width: 100% !important;
        max-width: 100% !important;
    }

    .config-grid > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .config-list {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767px) {

    .config-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .config-list {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    .config-list li {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        align-items: start !important;
        column-gap: 14px !important;

        width: 100% !important;
        max-width: 100% !important;

        padding: 18px 0 !important;
        margin: 0 !important;

        border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    }

    .config-list li:last-child {
        border-bottom: none;
    }

    /* A B C D badge */
    .config-list .ci {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;

        font-size: 14px !important;
        line-height: 1 !important;
        font-weight: 600 !important;

        border-radius: 10px !important;

        flex-shrink: 0 !important;
    }

    /* Text wrapper */
    .config-list li > div {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .config-list h3 {
        margin: 0 0 8px 0 !important;

        font-size: 18px !important;
        line-height: 1.3 !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    .config-list p {
        margin: 0 !important;

        font-size: 15px !important;
        line-height: 1.65 !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    .config-list strong {
        font-weight: 700;
    }

    .config-list code {
        display: inline-block;
        max-width: 100%;

        font-size: 13px !important;
        line-height: 1.5 !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    /* If there is a right-side card/code box inside .config-grid */
    .config-grid .codecard,
    .config-grid pre,
    .config-grid code {
        max-width: 100% !important;
    }

    .config-grid pre {
        overflow-x: auto !important;
        white-space: pre-wrap !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */
@media (max-width: 480px) {

    .config-grid {
        gap: 20px !important;
    }

    .config-list li {
        grid-template-columns: 38px minmax(0, 1fr) !important;
        column-gap: 12px !important;
        padding: 16px 0 !important;
    }

    .config-list .ci {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;

        font-size: 13px !important;
        border-radius: 9px !important;
    }

    .config-list h3 {
        font-size: 17px !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
    }

    .config-list p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .config-list code {
        font-size: 12px !important;
    }
}/* End custom CSS */