html, body {
    padding: 0;
    margin: 0;
    background-color: #fff;
    font-size: 14px;
}

body {
    font-family: 'Source Sans Pro';
    background-position: top right;
    background-size: auto 140px;
    background-repeat: no-repeat;
    font-size: 20px;
}

body, div, p, td {
    color: #3C3C3B;
}

.row {
    display: flex;
    flex-direction: row;
}

.col-10 {
    flex-basis: 10%;
}

.col-15 {
    flex-basis: 15%;
}

.col-17 {
    flex-basis: 17%;
}

.col-20 {
    flex-basis: 20%;
}

.col-25 {
    flex-basis: 25%;
}

.col-30 {
    flex-basis: 30%;
}

.col-33 {
    flex-basis: 33.33333333333%;
}

.col-34 {
    flex-basis: 34%;
}

.col-35 {
    flex-basis: 35%;
}

.col-40 {
    flex-basis: 40%;
}

.col-45 {
    flex-basis: 45%;
}

.col-50 {
    flex-basis: 50%;
}

.col-55 {
    flex-basis: 55%;
}

.col-60 {
    flex-basis: 60%;
}

.col-66 {
    flex-basis: 66%;
}

.col-70 {
    flex-basis: 70%;
}

.col-75 {
    flex-basis: 75%;
}

.col-80 {
    flex-basis: 80%;
}

.col-90 {
    flex-basis: 90%;
}

.col-100 {
    flex-basis: 100%;
}

h1 {
    text-align: center;
    font-size: 41px;
    line-height: 52px;
    font-weight: normal;
}

h2 {
    text-align: center;
    font-size: 30px;
    line-height: 42px;
    font-weight: normal;
    padding-bottom: 40px;
}

p.intro-text {
    text-align: center;
    font-size: 28px;
    line-height: 40px;
    font-weight: normal;
    padding-bottom: 40px;
    max-width: 700px;
    margin: 0 auto;
}

a, a:link, a:visited, a:hover {
    color: #35A8E0;
    text-decoration: underline;
}

a:hover {
    color: #000;
}

/* menu */
nav {
    width: 100%;
    background-color: #fff;
    /* Sticky on every viewport. position: sticky stays in the document
       flow so the page below doesn't jump when the nav gets pinned -
       no placeholder / body padding workaround needed. */
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

/* Once scrolled past the hero, JS adds .is-scrolled to the nav so the
   logo (and the breathing-space margin around it) shrink, reclaiming
   vertical viewport. Animated for a soft handoff.

   IMPORTANT: only apply the shrink at desktop widths. Below 1024px
   the hamburger nav kicks in and the logo is already sized down
   (216x47) for that breakpoint, so re-resizing would make it
   smaller than intended. */
nav a.tugger-logo,
nav a.tugger-logo:link,
nav a.tugger-logo:visited,
nav a.tugger-logo:hover {
    transition: width 200ms ease, height 200ms ease, margin 200ms ease;
}

/* Match the smallest pre-shrunk size used at the 1350px breakpoint
   (151.9 x 47). At wider viewports the logo is 200x57 / 223x65 so it
   genuinely shrinks; between 1024-1350 it's already at 151.9x47 so
   the rule is a no-op size-wise (only the margin moves up). Avoids
   the previous "logo grows on scroll" bug at 1024-1350. */
@media (min-width: 1024px) {
    nav.is-scrolled a.tugger-logo,
    nav.is-scrolled a.tugger-logo:link,
    nav.is-scrolled a.tugger-logo:visited,
    nav.is-scrolled a.tugger-logo:hover {
        width: 151.9px;
        height: 47px;
        margin-top: 14px;
        margin-bottom: 14px;
    }
}

/* Menu and account block need to ride up with the smaller logo —
   .menu has its own margin-top: 50px that wasn't touched by the
   logo shrink, so the items stayed where they were.

   Menu items align with the TOP of the logo (logo margin-top: 14px
   = menu margin-top: 14px). */
nav .menu,
nav .account-details {
    transition: margin-top 200ms ease;
}

@media (min-width: 1024px) {
    nav.is-scrolled .menu {
        margin-top: 4px;
    }

    /* Hide the Hi/Pin/Admin row on scroll so the nav stays compact. */
    nav.is-scrolled .account-details {
        display: none;
    }
}

.nav-content {
    margin: 0 auto;
    max-width: 2000px;
    padding-left: 70px;
    padding-right: 70px;
}

.account-details {
    float: right;
    font-size: 14px;
    line-height: 18px;
    margin-top: 10px;
    margin-bottom: -50px;
}

    .account-details span, .mobile-account-details span {
        font-weight: bold;
        letter-spacing: 1px;
    }

.account-hi {
    color: #35A8E0;
    font-weight: bold;
}

.mobile-account-details {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 20px;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
}

nav a.tugger-logo, nav a.tugger-logo:link, nav a.tugger-logo:visited, nav a.tugger-logo:hover {
    background-image: url("images/tugger@2x.png");
    width: 223px;
    height: 65px;
    background-size: 100%;
    display: block;
    float: left;
    margin-top: 40px;
}

a#hamburger, a#hamburger:link, a#hamburger:visited, a#hamburger:hover {
    display: none;
}

.menu {
    float: right;
    margin-top: 50px;
    clear: right;
}
.menu ul {
    margin-left: 0px;
    padding-left: 0px;
}


    .menu li {
        list-style-type: none;
        display: inline-block;
    }

    .menu a, .menu a:link, .menu a:visited, .menu a:hover {
        font-size: 18px;
        line-height: 22px;
        color: #000;
        text-decoration: none;
        padding-bottom: 10px;
        margin-left: 20px;
    }

        .menu a:hover {
            border-bottom: 5px solid #35A8E0;
        }

        .menu a.menu-button, .menu a.menu-button:link, .menu a.menu-button:visited, .menu a.menu-button:hover {
            background-color: #35A8E0;
            color: #fff;
            font-weight: bold;
            padding-top: 5px;
            padding-bottom: 5px;
            border-radius: 20px;
            padding-left: 20px;
            padding-right: 20px;
        }

            .menu a.menu-button.alt-menu-button, .menu a.menu-button.alt-menu-button:link,
            .menu a.menu-button.alt-menu-button:visited, .menu a.menu-button.alt-menu-button:hover {
                background-color: #545454;
            }

            .menu a.menu-button:hover, .menu a.menu-button.alt-menu-button:hover {
                border-bottom: 0px;
                background-color: #000;
            }

        .menu a.sign-in-link, .menu a.sign-in-link:link, .menu a.sign-in-link:visited, .menu a.sign-in-link:hover {
            color: #35A8E0;
            font-weight: bold;
        }

        .menu a.sign-in-link:hover {
            color: #000;
        }

        #mobile-menu-screen {
            position: fixed;
            top: 0px;
            bottom: 0px;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 9000;
            width: 100%;
            display: none;
        }

#mobile-menu-list {
    background-color: #fff;
    position: fixed;
    top: 0px;
    bottom: 0px;
    width: 85%;
    margin-left: 15%;
    box-sizing: border-box;
}

#mobile-menu-list {
    overflow-y: scroll;
}

a.mobile-menu-cross, a.mobile-menu-cross:link, a.mobile-menu-cross:visited, a.mobile-menu-cross:hover {
    width: 20px;
    height: 20px;
    text-decoration: none;
    background-size: 100%;
    display: block;
    margin-left: 20px;
    margin-top: 20px;
    float: left;
    background-image: url("images/mobile-close-menu@2x.png");
}

#mobile-menu-list li, #mobile-menu-list ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    color: #35A8E0;
}

#mobile-menu-list ul {
    margin-top: 0px;
}

    #mobile-menu-list ul ul {
        margin-top: 0px;
        display: none;
        border-top: none;
    }

#mobile-menu-list li a span, #mobile-menu-list li a:link span, #mobile-menu-list li a:visited span, #mobile-menu-list li a:hover span {
    background-image: url("images/menu-dropdown-arrow.svg");
    background-size: auto 12px;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    width: 30px;
    height: 12px;
    right: 80px;
    margin-top: -24px;
    color: #35A8E0;
}

#mobile-menu-list li a, #mobile-menu-list li a:link, #mobile-menu-list li a:visited, #mobile-menu-list li a:hover {
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    padding-left: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 16px;
    line-height: 33px;
    border-bottom: 1px solid #eceded;
    color: #35A8E0 !important;
}

    #mobile-menu-list li a:active, #mobile-menu-list li a:hover, #mobile-menu-list ul ul li a:active, #mobile-menu-list ul ul li a:hover {
        background-color: #3C3C3B;
        color: #35A8E0 !important;
    }

#mobile-menu-list ul ul li a, #mobile-menu-list ul ul li a:link, #mobile-menu-list ul ul li a:visited, #mobile-menu-list ul ul li a:hover {
    padding-left: 60px;
    color: #3C3C3B;
    font-size: 14px;
    line-height: 33px;
}

.mobile-important-links {
    text-align: center;
    clear: both;
}

#mobile-menu-screen a.menu-button, #mobile-menu-screen a.menu-button:link, #mobile-menu-screen a.menu-button:visited, #mobile-menu-screen a.menu-button:hover {
    background-color: #35A8E0;
    color: #fff;
    display: inline-block;
    width: 200px;
    padding: 10px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    margin-left: 0px;
    box-sizing: border-box;
}

    #mobile-menu-screen a.menu-button.alt-menu-button, #mobile-menu-screen a.menu-button.alt-menu-button:link, #mobile-menu-screen a.menu-button.alt-menu-button:visited, #mobile-menu-screen a.menu-button.alt-menu-button:hover {
        background-color: rgba(0, 0, 0, 0.7);
    }

    .mobile-menu-footer-image {
        margin-left: auto;
        margin-right: auto;
        background-image: url("images/sign-up-image@2x.png");
        width: 300px;
        height: 400px;
        background-position: center center;
        background-size: 100%;
        background-repeat: no-repeat;
    }

#mobile-menu-screen a.menu-button:hover {
    background-color: #000 !important;
}

/***** forms */
.form-centre-section {
    margin: 0 auto;
    max-width: 660px;
}

/* wider, for tabbed forms with a lot on them (partner record) */
.form-centre-section.form-centre-section-wide {
    max-width: 1440px;
}

.form-centre-section .row .col-50:first-child {
    padding-right: 10px;
    box-sizing: border-box;
}

.form-centre-section .row .col-50:last-child {
    padding-left: 10px;
    box-sizing: border-box;
}

.report-edit-screenshot {
    width: 100%;
    height: auto;
    margin-top: 32px;
    margin-bottom: 50px;
    border: 1px solid #B3B3B3;
}

label {
    display: block;
    padding-top: 15px;
    padding-bottom: 5px;
    font-size: 21px;
    line-height: 25px;
}

.label-note {
    font-size: 70%;
    padding: 0px;
    margin: 0px;
    font-style: italic;
}

.button-row {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
}

/* a button directly under a field or note, left-aligned in the form */
.button-under-field {
    margin-top: 10px;
}

.k-textbox, .k-dropdown {
    margin-bottom: 10px;
}

.form-spacer {
    height: 1px;
    background-color: #eef1ff;
    width: 100%;
    margin-top: 20px;
}

.k-button, .k-button:hover,
a.button, a.button:link, a.button:visited, a.button:hover {
    display: inline-block;
    background-color: #35A8E0 !important;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 26px;
    line-height: 31px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 30px;
    text-transform: none;
    width: 100%;
    box-shadow: none;
    box-sizing: border-box;
    text-align: center;
    border: none;
}

a.round-button, a.round-button:link, a.round-button:visited, a.round-button:hover {
    background-color: #FFC700;
    color: #3C3C3B;
    text-align: center;
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    padding: 20px;
    font-weight: bold;
    text-decoration: none;
}

a.round-button:hover {
    background-color: #35A8E0;
}

.k-dialog-actions .k-button, .k-dialog-actions .k-button:hover {
    font-size: 20px;
    line-height: 25px;
    padding-top: 15px;
    padding-bottom: 15px;
}

input[type="submit"]:read-only {
    background-color: #35A8E0 !important;
}

.k-button.delete-button {
    background-color: #ac0505 !important;
}

    a.button.alt-button, a.button.alt-button:link, a.button.alt-button:visited {
        background-color: #545454 !important;
    }

        a.button.alt-button:hover {
            background-color: #000 !important;
        }

        a.button.alt-button-2, a.button.alt-button-2:link, a.button.alt-button-2:visited {
            background-color: #FFC700 !important;
            color: #3C3C3B !important;
        }

            a.button.alt-button-2:hover {
                background-color: #000 !important;
                color: #fff !important;
            }

    a.button.delete-button, a.button.delete-button:link, a.button.delete-button:visited, a.button.delete-button:hover {
        background-color: #ac0505 !important;
        font-size: 18px;
        line-height: 22px;
        border-radius: 30px;
    }

    a.button.cancel-button, a.button.cancel-button:link, a.button.cancel-button:visited, a.button.cancel-button:hover {
        background-color: #B3B3B3 !important;
        font-size: 26px;
        line-height: 31px;
        border-radius: 30px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

        .k-button:hover, a.button:hover, a.button.cancel-button:hover, a.button.delete-button:hover {
            background-color: #000 !important;
        }

input[type="submit"]:read-only:hover {
    background-color: #000 !important;
}

    a.button.small-button, a.button.small-button:link, a.button.small-button:visited, a.button.small-button:hover {
        padding-top: 10px;
        padding-bottom: 10px;
        width: auto;
        font-size: 18px;
        line-height: 22px;
        border-radius: 30px;
    }

.StripeElement {
    border: 1px solid #f0f0f0;
    padding: 15px 15px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.StripeElement:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,.2),0 2px 3px rgba(0,0,0,.05);
}

.k-input .k-input-solid {
    border-radius: 20px !important;
}

.k-textbox, .k-numerictextbox {
    border-style: none !important;
    border: none !important;
}

.k-input.k-textbox, .k-input.k-datepicker, .k-input.k-datetimepicker, .k-input.k-numerictextbox, .k-input.k-timepicker {
    height: 54px;
    border-radius: 20px !important;
    background: none;
}

.k-input.k-textarea {
    border-radius: 20px !important;
    background: none;
    background-color: #fff;
    /* the border is on the inner textarea, as it is on the inner input for text boxes */
    border: none !important;
}

    .k-input.k-textbox.k-focus, .k-input.k-datepicker.k-focus, .k-input.k-datetimepicker.k-focus, .k-input.k-textarea.k-focus, .k-input.k-numerictextbox.k-focus,
    .k-input.k-timepicker.k-focus {
        border: none !important;
        -webkit-box-shadow: 0px 2px 3px 3px rgba(204,204,204,1);
        -moz-box-shadow: 0px 2px 3px 3px rgba(204,204,204,1);
        box-shadow: 0px 2px 3px 3px rgba(204,204,204,1);
    }

/* a Kendo TextArea's inner element is a textarea, not an input, so it needs its own selector for the border */
.k-textbox input.k-input-inner, .k-input.k-datepicker input.k-input-inner, .k-input.k-datetimepicker input.k-input-inner, .k-textarea textarea.k-input-inner,
.k-numerictextbox input.k-input-inner, .k-input.k-timepicker input.k-input-inner {
    border-radius: 20px;
    width: 100% !important;
    color: #6e6e6e;
    padding-top: 5px 5px !important;
    background-color: #fff;
    border: 1px solid #ccc;
}

.k-input.k-datepicker input.k-input-inner, .k-input.k-datetimepicker input.k-input-inner, .k-input.k-timepicker input.k-input-inner {
    border-radius: 20px 0px 0px 20px !important;
}

.k-input.k-datepicker, .k-input.k-datetimepicker, .k-input.k-timepicker {
    border-radius: 20px !important;
}

.k-textbox, .k-textarea, .k-datepicker, .k-datetimepicker, .k-numerictextbox, .k-timepicker {
    border-radius: 20px;
    width: 100% !important;
    font-size: 21px;
    line-height: 25px;
    color: #6e6e6e;
}

input:read-only {
    background-color: #ccc !important;
}

.k-radio {
    width: 32px;
    height: 32px;
    border: 1px solid #35A8E0;
}

input.k-checkbox:read-only {
    background-color: #fff !important;
}

input:read-only.k-radio {
    background-color: #fff !important;
}

    input:read-only.k-radio:checked {
        background-color: #35A8E0 !important;
        border-color: #35A8E0
    }

.k-radio::before {
    width: 20px;
    height: 20px;
}

.k-radio-label {
    padding-left: 20px !important;
}

textarea {
    height: 150px !important;
    padding: 20px !important;
    border-radius: 20px;
    color: #6e6e6e !important;
    color: #35A8E0
}

.k-checkbox {
    height: 36px;
    width: 36px;
    border-radius: 10px;
    border: 2px solid #B3B3B3;
    margin-top: 20px;
}

    .k-checkbox:checked {
        background-color: #fff;
        border: 2px solid #B3B3B3;
        background-image: url("images/checkbox-tick.svg");
        content: "";
        background-repeat: no-repeat;
        background-size: 65%;
        height: 36px;
        width: 36px;
        background-position: center center;
    }

    .k-checkbox + .k-checkbox-label {
        padding-top: 14px;
        display: inline-block;
        margin-left: 20px;
    }

.k-checkbox-label {
    padding-top: 22px !important;
    display: inline-block !important;
    margin-left: 20px !important;
}

.checkbox-label {
    margin-left: 70px;
    margin-top: -50px;
    padding-bottom: 10px;
}

/* the ComboBox (#2303, first on the site) is styled like the drop-down list, and its arrow is a .k-button, so it needs
   the same override of the site-wide .k-button rule */
.k-dropdownlist, .k-combobox {
    width: 100%;
    font-size: 21px;
    line-height: 25px;
    border-radius: 20px !important;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 20px;
    color: #6e6e6e;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-right: 10px;
}

    .k-dropdownlist.k-picker-solid, .k-dropdownlist.k-picker-solid:hover,
    .k-combobox.k-input-solid, .k-combobox.k-input-solid:hover {
        border-radius: 20px !important;
        border: 1px solid #ccc !important;
        border-top: 1px solid #ccc !important;
    }

/* the ComboBox's clear (x) is a faint grey by default and easy to miss: the site's red, fully opaque */
.k-combobox .k-clear-value, .k-combobox .k-clear-value:hover {
    color: #ac0505;
    opacity: 1;
}

.k-dropdownlist .k-button , .k-dropdownlist .k-button:hover,
.k-combobox .k-button, .k-combobox .k-button:hover {
    width: auto;
    background-color: #fff !important;
    height: 16px;
    color: #B3B3B3;
    margin: 3px 0px 0px 0px;
    padding: 0px;
}

    .k-dropdownlist .k-button:hover, .k-combobox .k-button:hover {
        width: 40px;
        background-color: #ccc !important;
        height: 16px;
        color: #B3B3B3;
        margin: 3px 0px 0px 0px;
        padding: 0px;
    }

.k-datepicker .k-button, .k-datetimepicker .k-button, .k-timepicker .k-button {
    width: 40px;
    background: none !important;
    border: 1px solid #ccc;
    border-radius: 0px 20px 0px 0px;
}

    .k-datepicker .k-button:hover, .k-datetimepicker .k-button:hover, .k-timepicker .k-button:hover {
        color: #B3B3B3;
        margin: 0px;
        padding: 0px;
    }

.k-popup .k-list-item, .k-popup .k-list-optionlabel {
    font-size: 18px;
    line-height: 25px;
    color: #6e6e6e;
}

  .k-calendar .k-button {
      width: auto;
      font-size: 12px;
      height: auto;
      padding: 0px 5px;
      border-radius: 0px !important;
      display: inline-block;
  }

.k-editor-toolbar .k-button {
    width: auto;
}

.k-wizard {
    padding: 16px !important;
}

.k-wizard-content, .k-wizard-content h2, .k-wizard-content a, .k-wizard-content div {
    font-family: 'Source Sans Pro' !important;
}

    .k-wizard-content div {
        font-size: 20px;
        line-height: 25px;
    }

.wizardContainer {
    display: flex;
    height: auto;
    justify-content: center;
    align-items: center;
}

.k-wizard-steps {
    margin-top: 0px !important;
}

.k-wizard-step {
    padding: 5px !important;
}

.k-wizard-buttons {
    margin-top: 0px !important;
}

.k-stepper .k-step-current .k-step-indicator {
    border-color: #35A8E0;
    color: #fff;
    background-color: #35A8E0;
}

.k-stepper .k-step-done .k-step-indicator {
    border-color: #35A8E0;
    color: #fff;
    background-color: #35A8E0;
}

.k-stepper .k-state-focused .k-step-indicator {
    border-color: #35A8E0;
    color: #fff;
    background-color: #35A8E0;
}

.k-stepper .k-state-hover .k-step-indicator {
    border-color: #35A8E0;
    color: #fff;
    background-color: #35A8E0;
}

.k-wizard-buttons {
    display: none !important;
}

.k-step-text {
    display: none;
}

/** jquery ui tool tips*/
.ui-tooltip {
    background-color: #3C3C3B !important;
    border-radius: 10px !important;
}

.ui-tooltip-content {
    background-color: #3C3C3B;
    color: #fff;
    padding: 12px;
    font-size: 18px;
    line-height: 22px;
}

/*** tuggers */
#tuggers {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 1400px;
    padding-bottom: 40px;
}

.tugger-selection-image {
    width: 220px;
    height: 110px;
    background-size: auto auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;
}

.tugger-selection-box,
a.tugger-selection-box, a.tugger-selection-box:link, a.tugger-selection-box:visited, a.tugger-selection-box:hover {
    border: 1px solid rgba(0,0,0,.2);
    padding-top: 60px;
    width: 310px;
    height: 260px;
    margin: 0 auto;
    margin-bottom: 20px;
    background-color: #fff;
    display: block;
    text-align: center;
    color: #3C3C3B;
    text-decoration: none;
}

    .tugger-selection-box:hover, a.tugger-selection-box:hover {
        cursor: pointer;
        border: 1px solid #000;
    }

    .tugger-selection-box a, .tugger-selection-box a:link, .tugger-selection-box a:visited, .tugger-selection-box a:hover,
    a.tugger-selection-box div.button, a.tugger-selection-box:link div.button, a.tugger-selection-box:visited div.button, a.tugger-selection-box:hover div.button {
        margin: 0 auto;
        margin-top: 20px;
        display: block;
        width: 170px !important;
        background-color: #35A8E0;
        color: #fff;
        font-size: 18px; 
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: 22px;
        border-radius: 30px;
        font-weight: bold;
    }

        a.tugger-selection-box:hover div.button,
        .tugger-selection-box a:hover {
            background-color: #000 !important;
        }

    .tugger-selection-box:hover a {
        background-color: #000 !important;
    }

    .tugger-selection-box h4 {
        text-align: center;
        font-size: 30px;
        line-height: 30px;
        padding: 0px;
        margin: 0px;
        margin-top: 20px;
        font-size: 16px;
        line-height: 20px;
        font-weight: normal;
    }

    .tugger-selection-box h5 {
        text-align: right;
        font-weight: normal;
        font-size: 12px;
        line-height: 12px;
        padding: 0px;
        margin: 0px;
        padding-top: 10px;
    }

/**** sections ****/
.section {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #EFEFEF;
}

    .section.odd-section {
        background-color: #fff;
    }

        .section.odd-section.our-tuggers {
            background-image: url("images/range-of-tuggers-bg@2x.png");
            background-repeat: no-repeat;
            background-position: bottom right;
            margin-top: 30px;
        }

        .section.terms h2 {
            text-align: left;
            margin-bottom: 0px;
            padding-bottom: 0px;
        }

.content-area {
    max-width: auto;
    padding-left: 70px;
    padding-right: 70px;
    margin: 0 auto;
}

/** reviews bar **/
#reviews-bar {
    background-color: #EFEFEF;
}

#reviews-bar .content-area {
    max-width: 1150px;
}

#tugger-reviews-woman {
    background-image: url("images/reviews/tugger-reviews-female.png");
    background-size: 100%;
    width: 380px;
    height: 410px;
    float: right;
    margin-left: -120px;
    margin-top: 90px;
}

#reviews-bar a, #reviews-bar a:link, #reviews-bar a:visited, #reviews-bar a:hover {
    text-decoration: none;
}

#reviews-bar .col-20 {
    text-align: center;
}

#reviews-bar img {
    height: 130px;
    width: auto;
    display: block;
    width: auto;
    margin: 0 auto;
    margin-bottom: 20px;
}

#reviews-bar .col-20:last-child #capterra-reviews {
    margin-left: 0px;
    width: 235px;
}

#reviews-bar .col-20:last-child img {
    width: 220px;
    height: auto;
    margin-left: 16px;
}


#reviews-bar {
    padding-top: 100px;
    padding-bottom: 50px;
}

    #reviews-bar h2 {
        font-size: 36px;
        line-height: 40px;
        font-weight: bold;
        padding-bottom: 0px;
        margin-bottom: 0px;
    }

#reviews-bar p.intro-text {
    font-size: 26px;
    line-height: 31px;
    padding-top: 20px;
    padding-bottom: 100px;
}

.row.review-quotes .col-50 {
    text-align: center;
}

/** testimonials */
.testimonials .testimonial {
    margin-left: 25px;
    margin-right: 25px;
}

.testimonials-strip {
    background-color: #35A8E0;
    padding-top: 100px;
}

.testimonials .blog-quote {
    background-color: #fff;
    font-size: 26px;
    line-height: 32px;
    font-weight: normal;
    min-height: 400px;
    display: grid;
    align-items: center;
}

.testimonials .blog-quote-swish {
    filter: brightness(0) invert(1);
}

.testimonials .blog-quote blockquote:before, .testimonials .blog-quote blockquote:after {
    font-weight: bold;
    font-size: 100px;
    color: #000;
}

.testimonials .blog-quote-section {
    text-align: left;
    padding-bottom: 0px;
}

    .testimonials .blog-quote-section .blog-quote-name,
    .testimonials .blog-quote-section .blog-quote-job-title,
    .testimonials .blog-quote-section .blog-quote-company {
        color: #fff;
        display: block;
        float: none;
        font-size: 20px;
        line-height: 26px;
        margin-left: 30px;
    }

    .testimonials .blog-quote-section .blog-quote-company {
        margin-top: 5px;
    }

    .testimonials .blog-quote-section .blog-quote-name,
    .testimonials .blog-quote-section .blog-quote-job-title {
        font-weight: normal;
    }

.testimonials-strip .slick-next {
    right: 100px;
    background-image: url("images/connector-page/right-arrow.png");
    width: 100px;
    height: 100px;
    background-size: 100%;
    z-index: 10;
}

.testimonials-strip .slick-prev {
    left: 100px;
    background-image: url("images/connector-page/left-arrow.png");
    width: 100px;
    height: 100px;
    background-size: 100%;
    z-index: 10;
}

    .testimonials-strip .slick-prev:hover,
    .testimonials-strip .slick-next:hover {
        opacity: 0.8;
    }

/** end testimonials */

/*** footer */
footer {
    background-color: #000;
    margin-bottom: -20px;
    padding-top: 60px;
    padding-bottom: 60px;
    font-size: 21px;
    line-height: 28px;
}

    footer div, footer p {
        color: #B3B3B3;
    }

#footer-contact, #footer-social {
    padding-left: 60px;
    padding-bottom: 40px;
}

#footer-contact {
    margin-right: 10px;
}

.small-footer-text {
    text-align: center;
    font-size: 19px;
    line-height: 28px;
    max-width: 1000px;
    margin: 0 auto;
}

footer h5 {
    font-size: 30px;
    line-height: 30px;
    font-weight: normal;
    padding-bottom: 50px;
    margin: 0px;
    color: #fff;
}

a.footer-tugger-logo, nav a.footer-tugger-logo:link, nav a.footer-tugger-logo:visited, nav a.footer-tugger-logo:hover {
    background-image: url("images/tugger-footer@2x.png");
    width: 223px;
    height: 75px;
    background-size: 100%;
    display: block;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 50px;
    background-position: center center;
}

.footer-icon {
    width: 24px;
    height: 25px;
    background-size: 100%;
    position: absolute;
    background-repeat: no-repeat;
    margin-left: -55px;
}
    .footer-icon.address-icon {
        background-image: url("images/address_icon.svg");
        
    }

    .footer-icon.email-icon {
        background-image: url("images/footer-email-icon.svg");
        width: 23px;
        height: 17px;
        margin-top: 6px;
    }

    .footer-icon.phone-icon {
        background-image: url("images/footer-phone-icon.svg");
        width: 25px;
        height: 25px;
        margin-top: 2px;
    }

footer a, footer a:link, footer a:visited, footer a:hover {
    color: #fff;
    text-decoration: none;
}

footer a:hover {
    color: #35A8E0;
    text-decoration: underline;
}

footer ul {
    padding: 10px 0px 0px 0px;
    margin: 0px;
}

footer li {
    line-height: 50px;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

.iso-certification {
    margin-top: 50px;
    width: 150px;
    height: 150px;
    background-image: url("images/ISO_IEC_27001_2022 1.png");
    background-size: 100%;
    background-repeat: no-repeat;
}

.flashing-red {
    animation: flashRed 2.0s infinite;
    color: red; /* Static red color for browsers without animation support */
    font-size: 30px;
}

@keyframes flashRed {
    0% {
        color: red;
    }

    50% {
        color: transparent;
    }

    100% {
        color: red;
    }
}

#social-icons {
    padding-top: 22px;
}

#social-icons a, #social-icons a:link, #social-icons a:visited, #social-icons a:hover {
    display: inline-block;
    width: 27px;
    height: 27px;
    border-radius: 5px;
    margin-right: 10px;
}

    #social-icons a:hover {
        opacity: 0.7;
    }

#social-icons a.facebook {
    background-image: url("images/facebook.svg") !important;
}

    #social-icons a.twitter {
        background-image: url("images/twitter.svg") !important;
    }

    #social-icons a.linkedin {
        background-image: url("images/linkedin.svg") !important;
    }

    #social-icons a.youtube {
        background-image: url("images/youtube.svg") !important;
    }

    #social-icons a.instagram {
        background-image: url("images/instagram.svg") !important;
    }

#keep-up-to-date {
    margin-top: 40px;
    text-align: center;
}

#SubscribeFooterButton {
    position: absolute;
    width: 130px;
    margin-left: -130px;
    font-weight: normal;
    border-radius: 0px 20px 20px 0px;
    padding-top: 9px;
    padding-bottom: 8.5px;
    font-size: 21px;
    line-height: 21px;
    background-color: #35A8E0;
    height: 54px;
    z-index: 2;
}

#SubscribeFooterButton:hover {
    background-color: #B3B3B3;
}

#MailingListFooterThankYou, #MailingListThankYou {
    color: #35A8E0;
    font-weight: bold;
    display: none;
}

.mailing-list-row .col-25, .mailing-list-row .col-30 {
    border-bottom: none;
}

#MailingListEmailFieldFooter {
    padding-right: 140px;
    font-size: 21px;
    line-height: 21px;
}

.terms-links {
    text-align: center;
    padding-bottom: 50px;
    color: #fff;
}

    .terms-links a, .terms-links a:link, .terms-links a:visited, .terms-links a:hover {
        font-size: 21px;
        line-height: 35px;
    }

/*** home page */
.tugger-icon-section {
    padding: 20px;
    text-align: center;
}
    .tugger-icon-section h2 {
        font-size: 21px;
        line-height: 25px;
        padding-bottom: 0px;
        max-width: 200px;
        margin: 0 auto;
        padding-bottom: 20px;
    }
.tugger-icon-section p {
    max-width: 200px;
    margin: 0 auto;
}
.tugger-icon {
    width: 80px;
    height: 95px;
    background-size: 100%;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center center;
}
.tugger-icons {
    flex-wrap: wrap;
}

.tugger-icon.no-maintenance-icon {
    background-image: url("images/maintenance.svg");
}
.tugger-icon.no-coding-icon {
    background-image: url("images/no-coding.svg");
}
.tugger-icon.quickly-icon {
    background-image: url("images/quickly.svg");
}
.tugger-icon.secure-icon {
    background-image: url("images/security.svg");
}
.tugger-icon.data-pulled-icon {
    background-image: url("images/data-pulled.svg");
}
.tugger-icon.data-warehouse-icon {
    background-image: url("images/data-warehouse.svg");
}

#tugger-header-image {
    background-image: url("images/tugger-header-image@2x.png");
    height: 634px;
    width: 835px;
    background-repeat: no-repeat;
    background-position: top right;
    float: right;
    background-size: 100%;
}

h1.header-h1 {
    text-align: left;
    max-width: 450px;
    margin: 0px;
    padding: 0px;
    padding-top: 70px;
    padding-bottom: 45px;
}

h2.strapline {
    font-size: 18px;
    text-align: left;
    line-height: 22px;
    font-weight: normal;
    max-width: 450px;
    margin: 0px;
    padding: 0px;
    padding-bottom: 45px;
}

a.home-header-button, a.home-header-button:link, a.home-header-button:visited, a.home-header-button:hover {
    width: auto;
    font-size: 18px;
    line-height: 22px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #35A8E0;
}

    a.home-header-button:hover {
        border: 1px solid #000;
    }

    a.home-header-button.demo-button, a.home-header-button.demo-button:link, a.home-header-button.demo-button:visited, a.home-header-button.demo-button:hover {
        background-color: #efefef !important;
        border: 1px solid #35A8E0;
        color: #35A8E0;
    }

        a.home-header-button.demo-button:hover {
            border: 1px solid #000;
            color: #000;
        }


.home-header-list {
    margin: 0px;
    padding: 0px;
    padding-top: 35px;
    list-style-type: none;
}

    .home-header-list li {
        margin: 0px;
        padding: 0px;
        margin-left: 30px;
        padding-bottom: 5px;
        font-size: 18px;
        line-height: 20px;
    }

        .home-header-list li:before {
            content: '';
            display: inline-block;
            height: 34px;
            width: 20px;
            background-size: 100%;
            background-position: center bottom;
            background-repeat: no-repeat;
            background-image: url("images/checkbox-tick.svg");
            background-repeat: no-repeat;
            margin-right: 10px;
            margin-left: -30px;
        }

.section.home-section-header {
    padding-bottom: 0px;
    padding-top: 0px;
}

.content-area.diagram-content-area {
    max-width: 1200px;
}

.diagram {
    padding-top: 0px;
}
.mobile-diagram {
    display: none;
}

.diagram-source-row {
    padding-bottom: 45px;
}

.demo-icon {
    width: 47px;
    height: 47px;
    background-size: 100%;
    background-repeat: no-repeat;
}

    .demo-icon.harvest-icon {
        background-image: url("images/harvest.svg");
    }
    .demo-icon.github-icon {
        background-image: url("images/github.svg");
    }
    .demo-icon.jira-icon {
        background-image: url("images/jira.svg");
    }

.diagram-text {
    padding-top: 14px;
    font-size: 18px;
    line-height: 21px;
}

.diagram-arrow {
    width: 58px;
    height: 35px;
    background-image: url("images/diagram-arrow.svg");
    margin-top: 8px;
}

.tugger-diagram-icon {
    background-image: url("images/tugger@2x.png");
    background-size: 179px auto;
    background-repeat: no-repeat;
    background-position: center center;
}
.tugger-diagram-icon, .analytics-icons {
    border: 1px solid #e1e1e1;
    border-radius: 20px;
    width: 100%;
    height: 235px;
}

#report-types {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 1400px;
    padding-bottom: 40px;
}

.diagram-arrow.final-arrow {
    margin: 0 auto;
    margin-top: 100px;
}
.tableau-diagram-icon {
    background-image: url("images/tableau_and_power_bi.svg");
    width: 207px;
    height: 78px;
    margin: 0 auto;
    margin-top: 80px;
}

#tugger-menu {
    background-color: #3C3C3B;
    height: 42px;
    padding-top: 16px;
}

    #tugger-menu a, #tugger-menu a:link, #tugger-menu a:visited, #tugger-menu a:hover {
        color: #fff;
        text-decoration: none;
        font-size: 18px;
        line-height: 22px;
        font-weight: bold;
        margin-right: 25px;

    }

    #tugger-menu span.menu-line {
        font-size: 18px;
        line-height: 22px;
        color: #fff;
        margin-right: 25px;
    }

    #tugger-menu a:hover, #tugger-menu a.active-page {
        color: #35A8E0 !important;
    }

.active-switch {
    float: right;
}

.active-label {
    float: left;
    color: #fff;
    font-size: 18px;
    line-height: 20px;
    margin-right: 25px;
}

.active-switch .k-switch-container, .active-switch .k-switch-track {
    margin-top: -7px;
}

.active-switch .k-switch .k-switch-thumb {
    height: 20px;
    width: 20px;
    margin-top: -3px;
}

.k-switch-on .k-switch-handle, .k-switch-on:hover .k-switch-handle, .k-switch-on .k-switch-thumb, .k-switch-on:hover .k-switch-thumb {
    background-color: #35A8E0 !important;
}

.k-switch-on .k-switch-container, .k-switch-on:hover .k-switch-container, .k-switch-on .k-switch-track, .k-switch-on:hover .k-switch-track {
    background-color: #EFEFEF !important;
}

.k-switch-on.k-state-readonly .k-switch-handle, .k-switch-on:hover .k-switch-handle, .k-switch-on.k-state-readonly .k-switch-thumb, .k-switch-on:hover .k-switch-thumb {
    background-color: #cbecfc !important;
}

h1.integration-heading span {
    height: 60px;
    width: 60px;
    background-size: 100%;
    display: inline-block;
    margin-right: 10px;
    background-repeat: no-repeat;
    background-position: center center;
    display: none;
}

.summary-box {
    border: 1px solid #e1e1e1;
    border-radius: 20px;
    padding: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 40px;
}

.split-page {
    background-color: #fff;
}

.split-page-right {
    background-color: #35A8E0;
    padding-bottom: 200px;
    padding-top: 100px;
    padding-left: 80px;
    padding-right: 80px;
}

.split-page-left {
    padding-left: 80px;
    padding-right: 80px;
    background-image: url("images/header-background@2x.png");
    background-size: 350%;
    background-repeat: no-repeat;
    background-color: #EFEFEF;
    background-position: bottom right;
    padding-bottom: 200px;
    padding-top: 100px;
}

.split-page-left h1 {
    color: #35A8E0;
    text-align: left;
    font-size: 49px;
    line-height: 58px;
}

    .split-page-left h2 {
        color: #000;
        text-align: left;
        font-size: 18px;
        line-height: 22px;
    }

.split-page-right h2 {
    color: #fff;
    text-transform: uppercase;
    font-size: 84px;
    line-height: 100px;
    margin: 0px;
    padding: 0px;
}

.split-page-right p {
    color: #fff;
    text-align: center;
    font-size: 43px;
    line-height: 52px;
}

.split-page-right.ign-up-page-right p {
    text-align: center
}

p.sign-in-already-have-account {
    color: #B3B3B3;
    text-align: center;
    font-size: 21px;
    line-height: 25px;
    padding-top: 20px;
}

    p.sign-in-already-have-account a, p.sign-in-already-have-account a:link, p.sign-in-already-have-account a:visited, p.sign-in-already-have-account a:hover {
        color: #35A8E0;
        text-decoration: none;
    }

    p.sign-in-already-have-account a:hover {
        text-decoration: underline;
    }

.sign-up-checkbox .k-checkbox + .k-checkbox-label {
    padding-top: 5px;
    color: #B3B3B3;
}

a.split-page-right-logo, a.split-page-right-logo:link, a.split-page-right-logo:visited, a.split-page-right-logo:hover {
    background-image: url("images/tugger-logo-white@2x.png");
    width: 498px;
    height: 167px;
    display: block;
    background-size: 100%;
    float: right;
    margin-top: 20px;
}

#sign-up-image {
    background-image: url("images/sign-up-image@2x.png");
    width: 100%;
    height: 742px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position-y: top;
    margin-left: 50px;
    margin-top: 170px;
}

    #sign-up-image.sign-in-image {
        background-image: url("images/sign-in-image@2x.png");
        margin-top: 20px;
        background-position-x: center;
        margin-left: 0px;
        width: 100%;
        height: 500px;
        margin: 0 auto;
        background-size: auto 100%;
    }

/*** faq ***/

.faqs h1 {
    text-align: left;
    font-weight: bold;
    font-size: 90px;
    line-height: 90px;
    margin-top: 0px;
    padding-top: 0px;
}

.faq {
    background: #EFEFEF;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 0 30px;
}

.faq div {
    padding-top: 0;
}

    .faq h2 {
        font-size: 22px;
        line-height: 28px;
        text-align: left;
        cursor: pointer;
        padding: 22px 0;
        margin: 0;
        border: none;
        font-weight: normal;
    }

.faq h2 span {
    color: #35A8E0;
    font-size: 30px;
    line-height: 30px;
    float: right;
    margin-left: 40px;
    display: block;
}

.faq div {
    display: none;
}
    .faq div p {
        font-size: 18px;
        line-height: 25px;
        padding-bottom: 22px;
    }

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

.faq-image img {
    width: 80%;
    height: auto;
    margin-top: 50px;
}

.faq h2 span.faq-hide {
    display: none;
    margin-right: 5px;
}


/** end FAQ */

.active-switch.pricing-switch {
    float: none;
    width: 300px;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 40px;
}

    .active-switch.pricing-switch .row {
        align-items: center;
        justify-content: center;
    }

    .active-switch.pricing-switch .row {
        display: flex !important;
    }
        .active-switch.pricing-switch .row .col-33 {
            flex-basis: 33% !important;
        }
    
    .active-switch.pricing-switch .k-switch-off .k-switch-handle {
    background-color: #35A8E0 !important;
}

    .active-switch.pricing-switch .k-switch-off .k-switch-container {
        background-color: #fff;
    }


.payment-plan-box {
    border: 1px solid #e1e1e1;
    padding: 40px 20px;
    border-radius: 20px;
    margin: 0px 10px 50px 10px;
    text-align: center;
    min-height: 550px;
}

.payment-plan-box h3 {
    font-size: 27px;
    line-height: 32px;
    font-weight: normal;
}

    .payment-plan-box h4 {
        color: #35A8E0;
    }

    .payment-plan-box h5 {
        color: #3C3C3B;
    }

    .payment-plan-box ul {
        margin-left: 0px;
        padding-left: 20px;
    }

.plan-features {
    margin: 0 auto;
    max-width: 650px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 40px;
}

.payment-plan-box li, .plan-features li {
    padding-bottom: 20px;
    text-align: left;
    margin-left: 0px;
    list-style-type: none;
    padding-left: 30px;
}

    .payment-plan-box ul li:before, .plan-features li:before {
        content: '';
        display: inline-block;
        height: 34px;
        width: 20px;
        background-size: 100%;
        background-position: center bottom;
        background-repeat: no-repeat;
        background-image: url("images/checkbox-tick.svg");
        background-repeat: no-repeat;
        margin-right: 10px;
        margin-left: -30px;
    }

.pricing-ai-highlight {
    font-weight: bold;
    color: #35A8E0;
}

.payment-plan-box a.button {
    text-align: center;
    margin-top: 20px;
}

.payment-plan-box p {
    padding-top: 20px;
}

.payment-plans-pricing-section {
    background-color: #35A8E0;
}

    .payment-plans-pricing-section .slick-next {
        right: 100px;
        background-image: url("images/connector-page/right-arrow.png");
        width: 100px;
        height: 100px;
        background-size: 100%;
        z-index: 10;
    }

    .payment-plans-pricing-section .slick-prev {
        left: 100px;
        background-image: url("images/connector-page/left-arrow.png");
        width: 100px;
        height: 100px;
        background-size: 100%;
        z-index: 10;
    }

    .payment-plans-pricing-section .slick-prev:hover,
    .payment-plans-pricing-section .slick-next:hover {
        opacity: 0.8;
    }

.connector-page .payment-plans-pricing-section .content-area {
    max-width: none;
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
}

.payment-plans-pricing-section .pricing-switch {
    max-width: 410px;
    width: auto;
    margin-top: 20px;
    margin-bottom: 40px;
}

    .payment-plans-pricing-section .pricing-switch .col-33 .k-switch-md {
        width: auto;
    }

    .payment-plans-pricing-section .pricing-switch .col-33:first-child {
        text-align: center;
    }

    .payment-plans-pricing-section .pricing-switch .col-33:last-child {
        text-align: center;
    }

.payment-plans-pricing-section .pricing-switch div {
    color: #fff;
}

    .payment-plans-pricing-section .k-switch-md .k-switch-track {
        width: 80px;
        height: 40px;
    }

    .payment-plans-pricing-section .k-switch-off .k-switch-track {
        background-color: #fff;
    }

    .payment-plans-pricing-section .active-switch .k-switch .k-switch-thumb {
        height: 34px;
        width: 34px;
    }

    .payment-plans-pricing-section .k-switch-on:hover .k-switch-thumb {
        background-color: #FFC700 !important;
    }

    .payment-plans-pricing-section .k-switch .k-switch-thumb {
        background-color: #000 !important;
    }

    .payment-plans-pricing-section .k-switch .k-switch-thumb {
        box-shadow: none;
    }

    .payment-plans-pricing-section .k-switch-md.k-switch-off .k-switch-thumb-wrap {
        left: calc(27px + -3px);
    }

    .payment-plans-pricing-section .k-switch-md.k-switch-on .k-switch-thumb-wrap {
        left: calc(100% + -27px - -3px);
    }

.payment-plans .payment-plan-box {
    margin-left: 20px;
    margin-right: 20px;
    background-color: #fff;
    border: none;
    min-height: 0px;
    height: 560px;
    margin-top: 50px;
    padding-top: 10px;
    opacity: 0.5;
    transition: height 0.5s;
    transition: margin-top 0.5s;
}

.payment-plans.annual-selected .payment-plan-box {
    height: 660px;
}

    .payment-plans .payment-plan-box h3 {
        font-weight: bold;
        font-size: 30px;
        line-height: 30px;
    }

    .payment-plans .payment-plan-box h4 {
        font-size: 50px;
        line-height: 50px;
        margin: 0px;
        padding: 0px;
    }
    .payment-plans .payment-plan-box h5 {
        font-size: 20px;
        line-height: 20px;
        margin: 0px;
        padding: 0px;
        color: #35A8E0;
    }

.payment-plans .payment-plan-box ul li {
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    line-height: 18px;
    padding-left: 0px;
    margin-left: 0px;
}

.payment-plans .payment-plan-box ul li:before {
    background-image: none;
}

.payment-plans .payment-plan-box .yearly-plan-saving {
    padding-top: 20px;
    color: #ac0505;
}

.payment-plans .slick-current .payment-plan-box {
    height: 660px;
    margin-top: 0px;
    margin-bottom: 80px;
    opacity: 1;
}

    .payment-plans.annual-selected .slick-current .payment-plan-box {
        height: 750px;
    }

    .payment-plans .slick-current .payment-plan-box h3 {
        font-size: 36px;
        line-height: 36px;
    }

    .payment-plans .slick-current .payment-plan-box h4 {
        font-size: 56px;
        line-height: 56px;
    }

    .payment-plans .slick-current .payment-plan-box h5 {
        font-size: 24px;
        line-height: 24px;
    }

    .payment-plans .slick-current .payment-plan-box ul li {
        font-size: 20px;
        line-height: 20px;
    }

.payment-plans .payment-plan-box .enterprise-plan-text {
    color: #3C3C3B;
    padding-top: 100px;
}

.payment-plans a.round-button, .payment-plans a.round-button:link, .payment-plans a.round-button:visited, .payment-plans a.round-button:hover {
    width: 130px;
    height: 130px;
    padding-top: 40px;
    font-size: 22px;
    line-height: 26px;
    margin-top: -10px;
    margin-bottom: 0px;
}

.payment-plans .slick-current a.round-button, .payment-plans .slick-current a.round-button:link, .payment-plans .slick-current a.round-button:visited, .slick-current .payment-plans a.round-button:hover {
    width: 150px;
    height: 150px;
    padding-top: 45px;
    font-size: 26px;
    line-height: 32px;
    margin-top: 20px;
}

.payment-plans-pricing-section h2 {
    color: #fff;
    font-weight: bold;
    font-size: 36px;
    line-height: 40px;
    padding-bottom: 0px;
}

.payment-plans-pricing-section p {
    color: #fff;
    text-align: center;
    font-size: 26px;
    line-height: 32px;
    padding-bottom: 60px;
    margin: 0 auto;
    max-width: 800px;
}

.payment-plan-small {
    max-width: 550px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 auto;
}

.payment-plan-small p {
    font-size: 16px;
    line-height: 16px;
    color: #fff;
    padding-bottom: 20px;
    text-align: left;
}

.pricing-available-plans {
    text-align: center;
    padding-bottom: 50px;
    font-size: 26px;
    line-height: 26px;
}

.tugger-intro h1 {
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
}
.tugger-intro h2 {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 40px;
}

.connector-intro {
    text-align: center;
    font-size: 22px;
    line-height: 30px;
    max-width: 500px;
    margin: 0 auto;
}

.connector-logo {
    margin: 0 auto;
    width: auto;
    height: 100px;
    display: block;
}



.connector-power-bi-template iframe {
    margin: 0 auto;
    margin-top: 40px;
    text-align: center;
    display: block;
    width: 1140px;
    height: 680px;
}

.connector-power-bi-template {
    text-align: center;
}

.coming-soon {
    width: 300px !important;
    font-size: 26px !important;
    line-height: 26px;
    text-align: center;
    text-transform: uppercase;
    background-color: #ac0505;
    color: #fff;
    width: 250px;
    margin: 0 auto;
    font-weight: bold;
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 30px;
}

/* Style The Dropdown Button */
.dropbtn {
    cursor: pointer;
    font-size: 18px;
    line-height: 22px;
    color: #000;
    text-decoration: none;
    padding-bottom: 10px;
    margin-left: 20px;
    background-image: url("images/menu-dropdown-arrow.svg");
    background-size: 14px 8px;
    background-position: right 8px;
    background-repeat: no-repeat;
    padding-right: 20px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 3;
}

    .dropdown-content ul, .dropdown-content li {
        margin: 0px;
        padding: 0px;
    }

    .dropdown-content li {
        display: block;
    }

    /* Links inside the dropdown */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        margin: 0 !important;
        border-bottom: 5px solid #f9f9f9;
    }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    
}

.platform-page .col-50 h3, .platform-page .col-50 h1 {
    text-align: left;
    font-size: 44px;
    line-height: 52px;
    font-weight: normal;
}

.platform-page p {
    font-size: 21px;
    line-height: 25px;
    max-width: 500px;
}

.platform-image-col {
    text-align: center;
}

.platform-image-col img {
    width: 50%;
    height: auto;
}

.security-iso-27001 {
    width: 200px;
    height: 200px;
    background-image: url('images/ISO_IEC_27001_2022 1.png');
    background-size: 100%;
}

#contact-details {
    color: #fff;
    font-size: 21px;
    line-height: 28px;
    max-width: 270px;
    margin: 0 auto;
}

    #contact-details a, #contact-details a:link, #contact-details a:visited, #contact-details a:hover {
        color: #fff;
        text-decoration: underline;
    }

    #contact-details a:hover {
        color: #3C3C3B;
    }

    #contact-details .footer-icon {
        filter: brightness(0) invert(1);
    }

.k-loading-image, .loading-wheel {
    /*background-image: url("images/preloader.png") !important;
    background-size: 64px 64px;
    background-position: center center;*/
}

.loading-wheel {
    width: 64px;
    height: 64px;
    display: block;
    margin: 0 auto;
    background-repeat: no-repeat;
}

.section.sign-up-bar {
    background-color: #16545E;
    color: #fff;
    padding-top: 80px;
    padding-bottom: 100px;
}

    .section.sign-up-bar.partner-bar {
        background-color: #3C3C3B;
    }

.sign-up-bar h2 {
    padding-bottom: 20px;
}

.sign-up-bar h2, .sign-up-bar p.intro-text {
    color: #fff;
}

.sign-up-buttons {
    margin: 0 auto;
    max-width: 520px;
}

    .sign-up-buttons a {
        display: block !important;
        margin: 0 auto;
        width: 240px !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        margin-bottom: 20px !important;
    }

    .sign-up-buttons a.alt-button, .sign-up-buttons a.alt-button:link, .sign-up-buttons a.alt-button:visited, .sign-up-buttons a.alt-button:hover {
        background-color: #fff !important;
        color: #000;
    }

        .sign-up-buttons a.alt-button:hover {
            background-color: #000 !important;
            color: #fff;
        }

.sign-up-bar p.intro-text {
    font-size: 21px;
    line-height: 25px;
    padding-top: 0px;
    padding-bottom: 50px;
    max-width: 400px;
}

.sign-up-bullets {
    text-align: center;
    color: #fff;
}

/*** blogs **/
.blog-edit-sections .row {
    display: block;
}

.cover-image {
    margin-top: 5px;
    width: 100%;
    height: 592px;
    background-size: cover;
    background-position: center center;
}

.blog-content {
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    max-width: 1060px;
    font-size: 24px;
    line-height: 29px;
    color: #B3B3B3;
}

    .blog-content p {
        color: #6e6e6e;
    }

.blog-content h1 {
    font-weight: bold;
    font-size: 69px;
    line-height: 82px;
    padding-top: 60px;
    padding-bottom: 100px;
    color: #3C3C3B;
}

.blog-content img {
    margin: 0 auto;
    max-width: 100%;
    width: auto;
    height: auto;
    text-align: center;
    display: block;
    margin-bottom: 100px;
}

.blog-content-video {
    width: 100%;
    height: 740px;
    margin-bottom: 100px;
}

.blog-text {
    margin-bottom: 100px;
}

.blogs {
    max-width: 1740px;
    margin: 0 auto;
}

.blogs-title {
    padding-left: 10px;
    padding-right: 10px;
}

.featured-blog-image, .featured-blog-image:link, .featured-blog-image:visited, .featured-blog-image:hover {
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    text-decoration: none;
}

.featured-blog-image:hover {
    cursor: pointer;
}

.blog-main-feature-text h2 {
    text-align: left;
    margin: 0px;
    padding: 0px;
    font-size: 42px;
    line-height: 50px;
    padding-bottom: 40px;
    padding-top: 100px;
}

.blog-main-feature-text {
    margin-left: 75px;
    margin-right: 10px;
    font-size: 20px !important;
    line-height: 38px !important;
    color: #565655;
    height: 525px;
}

.main-feature-date {
    float: right;
    font-weight: bold;
    color: #35A8E0;
}

.main-reading-time {
    float: left;
}

a.main-feature-read-more {
    margin-left: 75px;
}

.blog-tags {
    margin-top: 60px;
    margin-bottom: 45px;
    margin-left: 10px;
}

    .blog-tags a, .blog-tags a:link, .blog-tags a:visited, .blog-tags a:hover {
        color: #fff;
        background-color: #3e3e3d;
        font-size: 22px;
        line-height: 22px;
        padding: 15px 30px;
        display: inline-block;
        margin-right: 40px;
        margin-bottom: 45px;
        text-decoration: none;
    }

    .blog-tags a:hover {
        background-color: #6e6e6e;
    }

.featured-blogs {
    max-width: 1760px;
    margin: 0 auto;
}

    .featured-blogs h2 {
        font-size: 42px;
        line-height: 50px;
        text-align: left;
        margin-left: 10px;
    }

    .blog-item h3 {
        padding-bottom: 20px;
        font-size: 40px;
        line-height: 50px;
    }

.blog-item-text {
    height: 500px;
    font-size: 20px;
    line-height: 38px;
}

.blog-row {
    flex-wrap: wrap;
    gap: 5%;
    padding-left: 10px;
    padding-right: 10px;
}

    .blog-row .col-33 {
        flex-basis: 30%;
        box-sizing: border-box;
    }

.blog-row {
    margin-left: 0px;
    margin-left: 0px;
}

a.blog-image, a.blog-image:link, a.blog-image:visited, a.blog-image:hover {
    text-decoration: none;
    border: none;
    background-size: cover;
    background-position: center center;
    display: block;
}

 a.blog-image:hover {
     opacity: 0.9;
 }

.blog-image img {
    width: 100%;
    height: 256px;
    background-size: cover;
    background-position: center center;
    margin-bottom: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-image:hover {
    cursor: pointer;
}

.whitepaper-banner {
    background-color: #000;
    color: #fff;
    text-align: center;
    opacity: 0.7;
    font-size: 24px;
    line-height: 24px;
    width: 100%;
    box-sizing: border-box;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: normal;
    letter-spacing: 2px;
    transform: skewY(-25deg);
    height: 55px;
    box-sizing: border-box;
    border-top: 5px solid #35A8E0;
    border-bottom: 5px solid #35A8E0;
}

.blog-item {
    border-bottom: 1px solid #B3B3B3;
    padding-bottom: 60px;
    margin-bottom: 75px;
}

.whitepaper-blog-item {
    background-color: #C3E4F5;
    padding: 20px 20px 60px 20px;
    border-bottom: 1px solid #C3E4F5;
}

    .whitepaper-blog-item .blog-item-text {
        height: 480px;
    }

    .blog-item .blog-image {
        width: 100%;
        height: 256px;
        background-size: cover;
        background-position: center center;
    }

.blog-item h3 {
    clear: both;
    padding-top: 30px;
    font-size: 42px; 
    font-weight: normal;
}

.blog-item .main-feature-date {
    color: #3C3C3B;
}

.youtube-video {
    width: 100%;
    height: 600px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.webinar-slides-download {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}

.blog-quote-section {
    text-align: right;
    padding-bottom: 120px;
}

.blog-quote blockquote {
    quotes: "\201C""\201D""\2018""\2019";
}

    .blog-quote blockquote:before, .blog-quote blockquote:after {
        font-weight: bold;
        font-size: 100px;
        color: #fff;
    }

.blog-quote blockquote:before {
    content: open-quote;
}

.blog-quote blockquote:after {
    content: close-quote;
    float: right;
}

.blog-quote-text {
    margin-left: 45px;
    margin-right: 45px;
    padding-bottom: 25px;
    margin-top: -25px;
}

.blog-quote {
    background-color: #FFC700;
    color: #fff;
    border-radius: 35px;
    padding: 20px 0px;
    color: #3C3C3B;
    font-size: 32px;
    line-height: 40px;
    text-align: left;
    font-weight: 700;
}

.blog-quote-swish {
    background-image: url("images/speech-bubble-flick.png");
    background-size: 100%;
    background-repeat: no-repeat;
    width: 110px;
    height: 110px;
    margin-bottom: 10px;
    float: right;
    margin-right: 50px;
    margin-left: 30px;
}

.blog-quote-name {
    margin-top: 15px;
}

.blog-quote-job-title, .blog-quote-company-at, .blog-quote-company {
    display: inline-block;
    font-size: 17px;
    line-height: 17px;
}

.blog-quote-job-title {
    display: block;
    margin-bottom: -5px;
}
.blog-quote-job-title, .blog-quote-name, .blog-quote-company {
    font-weight: bold;
}

/*** blog stat strip ***/
.blog-stat-strip {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 30px;
    margin-bottom: 100px;
}

/* The cyan panel itself - value and caption both sit inside it, as in the case study PDF.
   align-items: stretch on the strip gives every box the height of the tallest. */
.blog-stat {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    max-width: 320px;
    /* Required: there is no global border-box on this site, so without it the 50px of horizontal
       padding is added outside width: 100% and the box overflows the column once the viewport is
       narrower than about 390px. */
    box-sizing: border-box;
    padding: 35px 25px;
    background-color: #35A8E0;
    border-radius: 30px;
    text-align: center;
}

/* Grows to absorb whatever height the box has spare, which pins the caption to the bottom of
   every box in the strip. That is what keeps the captions on a common line when one value wraps
   to more lines than its neighbours. The inner centring keeps the number optically centred in
   whatever space it ends up with. */
.blog-stat-value {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 48px;
    line-height: 56px;
}

/* Colour and weight are both stated explicitly: .blog-content sets a washed-out #B3B3B3 that
   would otherwise be inherited here, and the caption is deliberately not bold so it reads as a
   supporting line under the number rather than competing with it.
   min-height reserves two lines, so a caption that wraps still starts on the same line as its
   one-line neighbours instead of pushing itself up. */
.blog-stat-caption {
    min-height: 52px;
    margin-top: 10px;
    color: #fff;
    font-size: 20px;
    line-height: 26px;
    font-weight: normal;
}

@media only screen and (max-width: 920px) {
    .blog-stat-strip {
        flex-direction: column;
        align-items: center;
    }

    .blog-stat {
        width: 100%;
    }

    .blog-stat-value {
        font-size: 40px;
        line-height: 48px;
    }

    /* Stacked one per row, so no caption has a neighbour to line up with and the reserved second
       line would just be a gap at the foot of the box. */
    .blog-stat-caption {
        min-height: 0;
    }
}

@media only screen and (max-width: 400px) {
    .blog-stat {
        padding: 30px 20px;
    }

    .blog-stat-value {
        font-size: 34px;
        line-height: 42px;
    }
}

/* Admin blog editor only. Full-width inputs on the dynamically built body blocks, replacing the
   inline style="width:100% !important" the older builders use inline - style-src 'unsafe-inline'
   is due to be removed from the CSP. */
.blog-edit-field {
    width: 100% !important;
}

#read-blogs-link {
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;
}

a#read-all-our-blogs, a#read-all-our-blogs:link, a#read-all-our-blogs:visited, a#read-all-our-blogs:hover {
    font-size: 42px;
    text-decoration: none;
    background-image: url("images/blog-arrow.svg");
    background-repeat: no-repeat;
    background-position: right 13px;
    background-size: 19px 32px;
    padding-right: 30px;
    display: inline-block;
}

    a#read-all-our-blogs:hover {
        background-image: url("images/blog-arrow-hover.svg");
    }

.pages {
    font-size: 42px;
    margin-bottom: 40px;
    text-align: center;
}

    .pages a, .pages a:link, .pages a:visited, .pages a:hover {
        display: inline-block;
        margin-left: 5px;
        margin-right: 5px;
        text-decoration: none;
    }

.mailing-list-section {
    max-width: 1760px;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 40px;
}

    .mailing-list-section .row {
        border-bottom: 1px solid #B3B3B3;
        border-top: 1px solid #B3B3B3;
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .mailing-list-section p {
        font-size: 42px;
        line-height: 50px;
    }

    .mailing-list-section .k-textbox {
        width: 334px !important;
        margin-left: 100px;
        font-size: 34px;
        line-height: 34px;
        border-radius: 30px;
        float: right;
        height: 82px;
    }

        .mailing-list-section .k-textbox input.k-input-inner {
            padding-top: 5px;
            padding-bottom: 5px;
            border-radius: 30px;
            height: 82px;
        }

    .mailing-list-section .row {
        align-items: center;
    }

.mailing-list-feedback {
    float: right;
    font-size: 24px;
    line-height: 24px;
}

#SubscribeMailingListButton {
    display: inline-block;
    width: auto;
    margin-left: 50px;
    font-weight: normal;
    font-size: 34px;
    line-height: 34px;
    padding-top: 24px;
    padding-bottom: 24px;
    float: right;
}

.analytics-download-section .button.small-button, .analytics-download-section .button.small-button:link, .analytics-download-section .button.small-button:visited, .analytics-download-section .button.small-button:hover {
    width: 100%;
}

.analytics-download-button-box {
    margin: 0 auto;
    width: 80%
}

.report-slider {
    max-width: 1000px;
    margin: 0 auto;
}

.report-download-disclaimer {
    font-size: 12px;
    padding-top: 10px;
}

.partner-bar-logo {
    height: 120px;
}

.partners-bar.odd-section {
    background-color: #f9f9f9;
}

.partners-bar .partners-row {
    flex-wrap: wrap;
} 

.partners-bar img {
    width: auto;
    height: 100px;
    text-align: center;
    margin-top: 40px;
}

.partners-bar .col-25, .partners-bar .col-33 {
    text-align: center;
}

.partners-bar h5 {
    font-size: 32px;
    line-height: 32px;
    color: #6e6e6e;
    font-weight: normal;
    margin-top: 0px;
    padding-top: 30px;
}

.request-access {
    background-color: #545454;
    color: #fff;
    padding: 10px;
    margin-bottom: -5px;
    margin-top: -40px;
    text-align: center;
}

.k-grid-header .k-header {
    overflow: visible !important;
    white-space: normal !important;
    background-color: #fafafa;
}

.k-grid-header {
    background-color: #fafafa;
}

.k-grid .k-table-th.k-header {
    font-size: 16px;
    line-height: 18px;
    font-weight: normal;
    font-family: 'Source Sans Pro';
}

.k-grid-content .k-table-td {
    font-size: 16px;
    line-height: 18px;
    color: #3C3C3B;
    padding-top: 20px;
    padding-bottom: 20px;
    font-family: 'Source Sans Pro';
}

.k-pager-info.k-label {
    font-family: 'Source Sans Pro';
}

.k-grid-pager .k-button, .k-grid-pager .k-button:hover {
    padding-left: 5px !important;
    padding-right: 5px !important;
    padding-top: 5px !important;
    padding-bottom: 3px !important;
    margin-right: 10px;
    border-radius: 100% !important;
}

.k-grid-pager .k-button.k-selected {
    background-color: #000 !important;
}


.switch-row {
    padding-bottom: 30px;
}

.terms li {
    padding-top: 10px;
    padding-bottom: 10px;
}

.terms-table {
    border-spacing: 0px;
    border-collapse: collapse;
    border-bottom: 1px solid #3C3C3B;
    border-right: 1px solid #3C3C3B;
}

.terms-table th {
    border-left: 1px solid #3C3C3B;
    border-top: 1px solid #3C3C3B;
    font-weight: bold;
    padding: 10px;
}

    .terms-table td {
        border-left: 1px solid #3C3C3B;
        border-top: 1px solid #3C3C3B;
        vertical-align: top;
        text-align: left;
        padding: 10px;
    }

.data-processing-table {
    border-spacing: 0px;
    border-collapse: collapse;
    margin-top: 20px;
}

    .data-processing-table th, .data-processing-table td {
        padding-bottom: 30px;
        padding-right: 20px;
        text-align: left;
        vertical-align: top;
    }

    .data-processing-table tr td:first-child, .data-processing-table tr th:first-child {
        width: 40px;
    }
    .data-processing-table tr td:nth-child(2) {
        width: 200px;
    }

.login-page h1 {
    margin-top: -60px;
    margin-bottom: 20px;
}

.sso-login-section {
    text-align: center;
    border-top: 1px solid #ccc;
    padding-top: 30px;
    margin-top: -30px;
}

.login-or-section {
    text-align: center;
    font-size: 30px;
    color: #35A8E0;
    font-weight: bold;
    padding-top: 20px;
    margin-bottom: -20px;
}

.connection-status-fail {
    color: #ac0505;
    font-weight: bold;
}

.pricing-small {
    font-size: 14px;
    text-align: left;
}

.speed-warning {
    color: #ac0505;
    font-weight: bold;
}

.trial-min-frequency {
    color: #ac0505;
    font-style: italic;
}

.preload-quickbooks-connect {
    background-image: url("images/C2QB_green_btn_tall_hover_2x.png");
    position: absolute;
}

.connect-to-quickbooks-button, .connect-to-quickbooks-button:hover {
    border-radius: 5px;
    background: none !important;
    background-image: url("images/C2QB_green_btn_tall_default_2x.png") !important;
    background-size: 100% auto !important;
    height: 50px;
    padding: 0px;
    width: 275px;
}

.connect-to-quickbooks-button:hover {
    background-image: url("images/C2QB_green_btn_tall_hover_2x.png") !important;
}

a.button.button-small.move-list-button,
a.button.button-small.move-list-button:link,
a.button.button-small.move-list-button:visited,
a.button.button-small.move-list-button:hover {
    display: block !important;
    padding: 10px !important;
    font-size: 20px;
    height: 40px;
    width: 40px;
    line-height: 20px;
    border-radius: 40px;
    margin: 0 auto;
    margin-top: 120px;
}

.multi-selet-list {
    width: 100%;
    height: 400px;
}


#embedContainer {
    height: 740px;
}

#report-buttons {
    float: right;
    margin-top: -40px;
    margin-left: 30px;
    padding-bottom: 5px;
}

.export-notification {
    position: fixed;
    right: 20px;
    top: 20px;
    background-color: #EFEFEF;
    color: #fff;
    padding: 16px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 9999;
    font-family: 'Segoe UI', sans-serif;
    width: 240px;
    text-align: center;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

    .export-notification.visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

.hidden {
    display: none;
}

.export-notification .export-button {
    background-color: #35A8E0;
    border-radius: 20px;
    border: none;
    color: #fff;
    font-weight: bold;
    padding: 10px;
}

    .export-notification .export-button:hover {
        background-color: #35A8E0;
        border-radius: 20px;
        border: none;
        background-color: #6e6e6e;
        cursor: pointer;
    }

/* Three dots animation */
.export-dots-animation {
    display: inline-block;
    width: 20px;
    text-align: left;
}

    .export-dots-animation::after {
        content: '.';
        animation: export-dots 1s steps(3, end) infinite;
    }

@keyframes export-dots {
    0%, 20% {
        content: '';
    }

    40% {
        content: '.';
    }

    60% {
        content: '..';
    }

    80%, 100% {
        content: '...';
    }
}

.hidden {
    display: none;
}

.h-normal {
    font-weight: normal;
}

.new-user-accounts-costings {
    display: none;
}

.portal-user-licenses a#remove-users, .portal-user-licenses a#remove-users:link, .portal-user-licenses a#remove-users:visited,
.portal-user-licenses a#remove-users:hover,
.portal-user-licenses a#add-users, .portal-user-licenses a#add-users:link, .portal-user-licenses a#add-users:visited,
.portal-user-licenses a#add-users:hover {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    padding: 0px;
    text-align: center;
    padding-top: 9px;
    font-weight: bold;
    font-size: 26px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 8px;
}
.portal-user-licenses .col-10 {
    flex-basis: 10px;
}
.portal-user-licenses label {
    margin-top: 0px;
    padding-top: 0px;
}

.portal-user-licenses .k-input-inner {
    text-align: center;
}

#edit-profile-role-changed {
    display: none;
}

#edit-profile-role-changed p {
    font-weight: bold;
    text-align: center;
    font-size: 30px;
    color: #ac0505;
}

a.float-right-button, a:link.float-right-button, a:visited.float-right-button, a:hover.float-right-button {
    float: right;
}

#partner-logo-preview {
    max-width: 200px;
    max-height: 120px;
    margin: 0 auto;
    display: block;
    border: 1px solid rgba(204,204,204,1);
    padding: 25px;
}

/*** partner listing */

.section.solutions-directory-header-section {
    background-color: #35A8E0;
    padding-top: 20px;
    padding-bottom: 20px;
}

.solutions-directory-page h1 {
    text-align: left;
    color: #fff;
    font-weight: bold;
    padding-right: 30px;
    padding-top: 100px;
}

.section.solutions-directory-header-section h2 {
    color: #fff;
    text-align: left;
    padding-right: 30px;
    padding-bottom: 100px;
}

.solutions-directory-header-image {
    background-image: url("images/partner-programme/parrtner-solutions-directory.png");
    height: 500px;
    width: 100%;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.partner-tier {
    float: right;
    width: 90px;
    height: 90px;
    background-size: 100%;
    margin-top: 0px;
    margin-right: -10px;
    margin-left: 20px;
    margin-bottom: 20px;
}
.partner-tier-0 {
    background-image: url("images/partner-tiers/tugger-partner.png");
}
.partner-tier-1 {
    background-image: url("images/partner-tiers/tugger-partner-bronze.png");
}
.partner-tier-2 {
    background-image: url("images/partner-tiers/tugger-partner-silver.png");
}
.partner-tier-3 {
    background-image: url("images/partner-tiers/tugger-partner-gold.png");
}
.partner-tier-4 {
    background-image: url("images/partner-tiers/tugger-partner-diamond.png");
}

.partner-listing-box {
    border: 2px solid #ddeff8;
    border-radius: 20px;
    margin-bottom: 20px;
    background-color: #fff;
}

    .partner-listing-box .row .col-25 {
        align-items: center;
        align-content: center;
        justify-content: center;
        text-align: center;
    }

.partner-listing-box img {
    max-width: 200px;
    display: inline-block;
    text-align: center;
}

.partner-listing-vertical-line {
    height: 230px;
    width: 2px;
    float: left;
    background-color: #ddeff8;
    margin-top: 0px;
    margin-bottom: 8px;
    margin-right: 20px;
}

.partner-tier-listing-content {
    padding: 8px 20px 20px 0px;
}

.partner-tier-listing-content h4 {
    font-size: 28px;
    line-height: 34px;
    padding-top: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.partner-tier-listing-content p {
    font-size: 18px;
    line-height: 20px;
}


.partner-listing .row {
    flex-wrap: wrap;
}

.partner-listing .tugger-selection-box,
.partner-listing a.tugger-selection-box,
.partner-listing a.tugger-selection-box:link,
.partner-listing a.tugger-selection-box:visited,
.partner-listing a.tugger-selection-box:hover {
    height: 330px;
}

.filter-section a#apply-filters,
.filter-section a#apply-filters:link,
.filter-section a#apply-filters:visited,
.filter-section a#apply-filters:hover,
.filter-section a#clear-filters,
.filter-section a#clear-filters:link,
.filter-section a#clear-filters:visited,
.filter-section a#clear-filters:hover {
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    max-width: 150px;
}

#filter-pane {
    background-color: #ddeff8;
    padding: 20px 20px 20px 20px;
    margin-right: 40px;
    border-radius: 20px;
}

#filter-pane h4 {
    margin-bottom: 0px;
    padding-bottom: 10px;
    background-size: 60px 60px;
    height: 60px;
    background-position: left top;
    background-repeat: no-repeat;
    padding-left: 70px;
    margin-bottom: 10px;
    align-items: center;
    align-content: center;
    display: flex;
}

.filter-section .k-multiselect {
    margin-bottom: 20px;
}

.partner-connector-icon {
    background-image: url("images/partner-programme/connectors.png");
}

.partner-industry-icon {
    background-image: url("images/partner-programme/industries.png");
}

.partner-language-icon {
    background-image: url("images/partner-programme/languages.png");
}
.partner-country-icon {
    background-image: url("images/partner-programme/countries.png");
}

.partner-tier-icon {
    background-image: url("images/partner-programme/partner-tiers-icon.png");
}

.filters-no-matching-results-message {
    text-align: center;
    margin: 0 auto;
    padding-top: 100px;
    color: #ac0505;
}

.listing-with-filters a#show-filter-button,
.listing-with-filters a#show-filter-button:link,
.listing-with-filters a#show-filter-button:visited,
.listing-with-filters a#show-filter-button:hover {
    margin: 0 auto;
    margin-bottom: 20px;
    display: block;
    max-width: 200px;
    display: none;
}

.profile-section {
    background-color: #ddeff8;
}

.partner-profile-box {
    background-color: #fff;
    padding: 40px;
    margin-top: 20px;
    margin-bottom: 40px;
    border-radius: 20px;
}

.partner-profile-box h2 {
    text-align: left;
    font-size: 26px;
    line-height: 30px;
    font-weight: bold;
    margin-top: 0px; 
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    clear: right;
}

.partner-profile-box h3 {
    text-align: left;
    font-size: 20px;
    line-height: 24px;
    font-weight: bold;
    padding-top: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 5px;
}

    .partner-profile-box ul {
        padding-left: 20px;
        margin-left: 0px;
        margin-top: 0px;
        padding-top: 0px;
        margin-bottom: 40px;
    }

    .partner-profile-box li {
        padding-left: 0px;
        margin-left: 7px;
        margin-top: 0px;
        padding-top: 0px;
        font-size: 18px;
        line-height: 24px;
    }

.partner-logo {
    max-width: 200px;
    height: auto;
    display: block;
}

.partner-profile-box h3 {
    background-size: 70px 70px;
    background-repeat: no-repeat;
    padding-left: 70px;
    background-position: left top;
    min-height: 70px;
    align-items: center;
    align-content: center;
    display: flex;
}

.partner-profile-box .col-35 {
    min-height: 280px;
    justify-content: center;
    align-content: center;
}

.partner-profile-box .col-55 {
    min-height: 280px;
}

.partner-profile-box.partner-profile-box-main {
    margin-left: 40px;
    background-color: #ddeff8;
}

.partner-profile-box.partner-profile-box-main h1 {
    text-align: left;
    font-weight: bold;
    font-size: 34px;
    line-height: 38px;
}

.partner-profile-box a.small-button, .partner-profile-box a:link.small-button, .partner-profile-box a:visited.small-button, .partner-profile-box a:hover.small-button {
    display: block;
    margin: 0 auto;
    margin-top: 30px;
}

.partner-profile-tier-icon {
    width: 90px;
    height: 90px;
    float: right;
    margin-bottom: 20px;
    background-size: 100% auto;
}
    .partner-profile-tier-icon.partner-tier-level-0 {
        background-image: url("images/partner-tiers/tugger-partner.png");
    }
    .partner-profile-tier-icon.partner-tier-level-1 {
        background-image: url("images/partner-tiers/tugger-partner-bronze.png");
    }
    .partner-profile-tier-icon.partner-tier-level-2 {
        background-image: url("images/partner-tiers/tugger-partner-silver.png");
    }
    .partner-profile-tier-icon.partner-tier-level-3 {
        background-image: url("images/partner-tiers/tugger-partner-gold.png");
    }
    .partner-profile-tier-icon.partner-tier-level-4 {
        background-image: url("images/partner-tiers/tugger-partner-diamond.png");
    }

.partner-profile-line {
    width: 50%;
    height: 2px;
    margin: 40px auto 40px auto;
    background-color: #ddeff8;
}

/*** partner landing page */

.section.become-a-tugger-partner-section {
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: #EFEFEF;
}

    .section.become-a-tugger-partner-section .row {
        align-items: center;
        justify-content: center;
    }

.become-a-tugger-partner-section .content-area {
    padding-right: 0px;
}

.become-a-tugger-partner-section h1 {
    text-align: left;
    font-weight: bold;
    font-size: 70px;
    line-height: 70px;
}

.become-a-tugger-partner-section p {
    font-size: 30px;
    line-height: 34px;
}

.become-a-tugger-partner-section img {
    width: 100%;
    max-width: 560px;
    float: right;
}

.section.why-partner-with-tugger-section {
    background-color: #35A8E0;
}

.why-partner-with-tugger-section .content-area {
    max-width: 1200px;
}

.become-a-tugger-partner {
    max-width: 800px;
    margin: 0 auto;
}

.section.why-partner-with-tugger-section .row {
    align-items: center;
    justify-content: center;
}

    .why-partner-with-tugger-section h2 {
        text-align: left;
        font-weight: bold;
        color: #fff;
        padding-left: 100px;
        padding-bottom: 0px;
    }

.why-partner-with-tugger-section p {
    color: #fff;
    padding-left: 100px;
}

.why-partner-with-tugger-section img {
    width: 100%;
    max-width: 500px;
}

.section.what-kind-of-partner {
    background-color: #3C3C3B;
    padding-bottom: 0px;
}

    .section.what-kind-of-partner .content-area {
        max-width: 1200px;
    }

.section.what-kind-of-partner h2 {
    color: #fff;
    text-align: left;
    font-weight: bold;
    padding-bottom: 0px;
}
.section.what-kind-of-partner p {
    text-align: left;
    color: #fff;
}

.what-kind-of-partner .col-100 {
    padding-bottom: 40px;
}

.what-kind-of-partner a.round-button, .what-kind-of-partner a.round-button:link, .what-kind-of-partner a.round-button:visited, .what-kind-of-partner a.round-button:hover {
    width: 160px;
    height: 130px;
    padding: 50px 10px 0px 10px;
    display: block;
    margin: 0 auto;
    margin-top: 60px;
}

.what-kind-of-partner img {
    max-width: 500px;
    float: right;
}

.partner-benefits-section .content-area {
    max-width: 1200px;
}

.partner-benefits-section h2 {
    font-weight: bold;
}

.partner-benefit {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 40px;
}

.partner-benefits-section a.round-button, .partner-benefits-section a.round-button:link, .partner-benefits-section a.round-button:visited, .partner-benefits-section a.round-button:hover {
    margin: 0 auto;
    display: block;
    width: 160px;
    height: 140px;
    padding: 40px 10px 0px 10px;
    background-color: #35A8E0;
    color: #fff;
    margin-top: 40px;
}

.partner-benefits-section a.round-button:hover {
    background-color: #3C3C3B;
    
}

.partner-benefits-image {
    height: 280px;
    width: 200px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin: 0 auto;
    background-position: bottom;
}

.partner-benefit-expand {
    background-image: url("images/partner-programme/expand-your-service.png");
}

.partner-benefit-strengthen {
    background-image: url("images/partner-programme/strengthen-client-relationships.png");
}

.partner-benefit-differntiate {
    background-image: url("images/partner-programme/differentiation-in-the-marketplace.png")
}

.partner-benefit-no-coding {
    background-image: url("images/partner-programme/no-coding-required.png");
}

.partner-benefit-custom-reports {
    background-image: url("images/partner-programme/pre-built-and-customisable-reports.png");
}

.partner-benefit-ai-powered {
    background-image: url("images/partner-programme/ai-powered-insights.png");
}

.partner-benefit-combine-data {
    background-image: url("images/partner-programme/combine-data-for-a-single-source-of-truth.png");
}

.partner-benefit-near-real-time-updates {
    background-image: url("images/partner-programme/near-real-time-updates.png");
}

.partner-benefit-secure {
    background-image: url("images/partner-programme/secure-and-scalable.png");
}

.partner-benefit-flexible-deployments {
    background-image: url("images/partner-programme/flexible-reporting-options.png");
}

.partner-benefit-affordable {
    background-image: url("images/partner-programme/affordable-and-transparent-pricing.png");
}

.partner-benefit-support {
    background-image: url("images/partner-programme/expert-support-and-consultancy.png");
}

.partner-benefit-branding {
    background-image: url("images/partner-programme/customisable-branding.png");
}

.partner-benefits-section.partner-why-tugger-section {
    background-color: #EFEFEF;
}

    .partner-benefits-section.partner-why-tugger-section .row {
        flex-wrap: wrap;
    }

    .partner-benefits-section.partner-why-tugger-section h2 {
        padding-bottom: 0px;
        margin-bottom: -40px;
    }

    .partner-benefits-section.partner-why-tugger-section a.round-button, .partner-benefits-section.partner-why-tugger-section a.round-button:link, .partner-benefits-section.partner-why-tugger-section a.round-button:visited, .partner-benefits-section.partner-why-tugger-section a.round-button:hover {
        background-color: #3C3C3B;
    }

    .partner-benefits-section.partner-why-tugger-section a.round-button:hover {
        background-color: #B3B3B3;
    }

.section.partner-get-started-today {
    background-color: #3C3C3B;
    padding-bottom: 0px;
}

.section.partner-get-started-today h2 {
    color: #fff;
    font-weight: bold;
    padding-bottom: 0px;
}

.section.partner-get-started-today p {
    text-align: center;
    color: #fff;
    margin-bottom: 40px;
}

.section.partner-get-started-today .content-area {
    max-width: 1200px;
}

    .section.partner-get-started-today img {
        float: right;
        height: 300px;
        margin-top: 20px;
    }

    .section.partner-get-started-today .col-left img {
        float: left;
    }

    .section.partner-get-started-today .col-left a.round-button, .section.partner-get-started-today .col-left a.round-button:link, .section.partner-get-started-today .col-left a.round-button:visited, .section.partner-get-started-today .col-left a.round-button:hover {
        display: block;
        float: right;
        margin-right: 50px;
        width: 160px;
        height: 130px;
        padding: 50px 10px 0px 10px;
    }

.partner-get-started-today a.round-button, .partner-get-started-today a.round-button:link, .partner-get-started-today a.round-button:visited, .partner-get-started-today a.round-button:hover {
    float: left;
    display: block;
    margin-left: 50px;
    width: 160px;
    height: 130px;
    padding: 50px 10px 0px 10px;
}

/** end partner landing page */

.clear-fix {
    clear: both;
}

/** solutions partners page */
.section.solutions-partner-header-section {
    background-color: #3C3C3B;
}

.solutions-partner-header-section .row {
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

.solutions-partner-header-section .content-area {
    max-width: 1400px;
}

.section.solutions-partner-header-section img {
    width: 100%;
    max-width: 700px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.section.solutions-partner-header-section h1 {
    color: #fff;
    font-weight: bold;
    text-align: left;
    font-size: 70px;
    line-height: 70px;
    margin-top: 0px;
    padding-top: 0px;
}

.section.solutions-partner-header-section p {
    color: #fff;
    font-size: 24px;
    margin-right: 40px;
}

.partner-industry-integration-section .content-area {
    max-width: 1200px;
}

.partner-key-benefits-section .partner-benefits-image  {
    height: 200px;
}

.partner-benefit-seamless-integrations {
    background-image: url("/Content/images/partner-programme/seamless-integrations.png");
    width: 210px;
}

.partner-benefit-no-code-setup {
    background-image: url("/Content/images/partner-programme/no-code-setup.png");
    width: 170px;
}

.partner-benefit-secure-data-handling {
    background-image: url("/Content/images/partner-programme/secure-data-handling.png");
    width: 115px;
}

.section.partner-industry-integration-section {
    background-color: #35A8E0;
}

.section.partner-industry-integration-section h2 {
    color: #fff;
    font-weight: bold;
    padding-bottom: 0px;
}

.section.partner-industry-integration-section p {
    text-align: center;
    color: #fff;
}

.partner-industry-integration {
    background-color: #fff;
    height: 150px;
    margin-top: 40px;
    margin-left: 200px;
    margin-right: 200px;
    border-radius: 80px;
    padding: 10px;
}

.partner-industry-integration-icon {
    float: left;
    width: 150px;
    height: 150px;
    background-size: 100%;
    margin-right: 40px;
}

.partner-sales-icon {
    background-image: url("/Content/images/partner-programme/sales-and-marketing.png");
}

.partner-accounting-icon {
    background-image: url("/Content/images/partner-programme/finance-and-accounting.png");
}

.partner-project-icon {
    background-image: url("/Content/images/partner-programme/project-and-time-management.png");
}

.partner-hr-icon {
    background-image: url("/Content/images/partner-programme/hr-and-employee-management.png");
}

.partner-software-icon {
    background-image: url("/Content/images/partner-programme/software-development.png");
}

.partner-communication-icon {
    background-image: url("/Content/images/partner-programme/communication-and-collaboration.png");
}

.partner-industry-integration p {
    color: #3C3C3B !important;
    text-align: left !important;
    margin-top: -15px !important;
    margin-right: 40px;
}

.partner-industry-integration a, .partner-industry-integration a:link, .partner-industry-integration a:visited, .partner-industry-integration a:hover {
    float: right;
    width: 110px;
    height: 70px;
    padding-top: 60px;
    margin-left: 20px;
}

.partner-industry-integration-section .mobile-button {
    display: none !important;
}

.partner-industry-integration-section a.button.mobile-button,
.partner-industry-integration-section a.button.mobile-button:link,
.partner-industry-integration-section a.button.mobile-button:visited,
.partner-industry-integration-section a.button.mobile-button:hover {
    background-color: #FFC700 !important;
    display: block;
    float: none;
    width: 200px;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 0px;
    font-size: 26px;
    line-height: 26px;
    color: #3C3C3B;
    margin-bottom: 20px;
}

    .partner-industry-integration-section a.button.mobile-button:hover {
        background-color: #35A8E0 !important;
    }

.partner-industry-integration-section a.round-button.directory-button,
.partner-industry-integration-section a.round-button.directory-button:link,
.partner-industry-integration-section a.round-button.directory-button:visited,
.partner-industry-integration-section a.round-button.directory-button:hover {
    float: none;
    display: block;
    margin: 0 auto;
    margin-top: 80px;
    padding-top: 40px;
    width: 120px;
    background-color: #3C3C3B;
    color: #fff;
}

    .partner-industry-integration-section a.round-button.directory-button:hover {
        background-color: #B3B3B3;
    }

.partner-getting-started-number {
    color: #35A8E0;
    font-weight: bold;
    text-align: center;
    font-size: 200px;
    line-height: 200px;
}

.partner-benefits-section.partner-why-tugger-section.partner-getting-started-section h2 {
    margin-bottom: 40px;
}

.partner-benefits-section.partner-why-tugger-section.partner-getting-started-section h3 {
    text-align: center;
}
.partner-benefits-section.partner-why-tugger-section.partner-getting-started-section p {
    text-align: center;
}

.partner-benefits-section.partner-why-tugger-section.partner-getting-started-section {
    padding-bottom: 150px
}

.section.partner-solutions-signup {
    background-color: #3C3C3B;
    padding-bottom: 0px;
}

.partner-solutions-signup a.button, .partner-solutions-signup a.button:link, .partner-solutions-signup a.button:visited, .partner-solutions-signup a.button:hover {
    margin: 0 auto;
    margin-top: -130px;
    display: block;
    margin-bottom: 100px;
    width: 340px;
    border-radius: 60px;
    background-color: #FFC700 !important;
    color: #3C3C3B;
    font-size: 30px;
    line-height: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
}

    .partner-solutions-signup a.button:hover {
        background-color: #35A8E0 !important;
    }

.section.partner-solutions-signup img {
    width: 70%;
    display: block;
    margin: 0 auto;
}

.partner-solutions-signup .content-area {
    max-width: 1200px;
}

/*** partner tiers page */
.section.partner-tiers-section .content-area {
   max-width: 1000px;
}

.section.partner-tiers-section h2 {
    font-weight: bold;
    color: #fff;
}

.section.partner-tiers-section {
    background-color: #35A8E0;
}

.partner-tier-box {
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 80px;
    width: 200px;
}

.partner-tier-box-image {
    width: 150px;
    height: 150px;
    background-size: 100%;
    margin: 0 auto;
}

.programme-benefits-and-features-section .content-area {
    max-width: 1200px;
}

.programme-benefits-and-features-section h2 {
    font-weight: bold;
}

.programme-benefits-and-features-section table {
    margin: 0 auto;
}

.programme-benefits-and-features-section th {
    background-color: #35A8E0;
    color: #fff;
    font-weight: normal;
    padding: 5px 10px;
}

.programme-benefits-and-features-section tbody th {
    text-align: left;
}

.programme-benefits-and-features-section td {
    background-color: #ddeff8;
    font-size: 15px;
    line-height: 15px;
    padding: 5px 10px;
    text-align: center;
}

.programme-benefits-and-features-section .partner-benefits-list {
    color: #35A8E0;
    padding-left: 0px;
    margin-left: 0px;
}

.programme-benefits-and-features-section li {
    padding-left: 0px;
    margin-left: 20px;
    margin-bottom: 20px;
}

.programme-benefits-and-features-section li span {
    font-weight: bold;
}

.partner-benefits-para {
    color: #35A8E0;
    font-weight: bold;
}

.programme-benefits-and-features-section .partner-benefits-list-asterisk {
    list-style-type: none;
}

    .programme-benefits-and-features-section .partner-benefits-list-asterisk li {
        margin-left: 0px;
    }

.partner-benefit-tick {
    background-image: url("images/partner-programme/tick.png");
    width: 15px;
    height: 15px;
    margin: 0 auto;
    background-size: 100%;
}

.section.partner-tiers-download-section {
    background-color: #EFEFEF;
    margin-top: 160px;
    padding: 0px;
}

.section.partner-tiers-download-section .content-area {
    max-width: 1200px;
}

.section.partner-tiers-download-section img {
    width: 100%;
    margin-top: -80px;
    margin-bottom: -12px;
}

.section.partner-tiers-download-section h2 {
    
    margin-top: 80px;
}

.partner-tiers-download-section-image {
    background-image: url("/Content/images/partner-programme/partner-tiers-pdf-download.png");
    height: 640px;
    width: 100%;
    background-size: auto 90%;
    background-repeat: no-repeat;
    background-position: bottom right;
    margin-top: -140px;
}

.section.partner-tiers-download-section a.round-button,
.section.partner-tiers-download-section a.round-button:link,
.section.partner-tiers-download-section a.round-button:visited,
.section.partner-tiers-download-section a.round-button:hover {
    padding-top: 45px;
    width: 100px;
    height: 75px;
    margin: 0 auto;
    display: block;
}

/*** reporting portal landing page */
.section.reporting-portal-header-section {
    background-color: #35A8E0;
    height: 700px;
    padding-top: 0px;
    padding-bottom: 0px;
}

    .section.reporting-portal-header-section .row {
        align-items: center;
        justify-content: center;
    }

    .section.reporting-portal-header-section .content-area {
        padding-right: 0px;
    }

    .section.reporting-portal-header-section h1 {
        color: #fff;
        font-size: 70px;
        line-height: 70px;
        font-weight: bold;
        margin-bottom: 0px;
        padding-bottom: 0px;
        margin-right: 70px;
        text-align: left;
    }

.section.reporting-portal-header-section h4 {
    color: #fff;
    font-weight: normal;
    font-size: 40px;
    line-height: 40px;
    margin-top: 25px;
    margin-right: 70px;
}

.section.reporting-portal-header-section p {
    color: #fff;
    margin-right: 70px;
    font-size: 27px;
    line-height: 34px;
}

    .reporting-portal-landing-header {
        background-image: url("/Content/images/reporting-portal/power-bi-reporting-portal-user.png");
        height: 700px;
        width: 100%;
        background-size: auto 90%;
        background-repeat: no-repeat;
        background-position: bottom right;
        background-color: #fff;
    }

.section.reporting-portal-benefits-section {
    background-color: #EFEFEF;
}

.reporting-portal-benefits-section .content-area {
    max-width: 1200px;
}

.reporting-portal-benefits-section h2 {
    font-weight: bold;
    text-align: left;
    margin-bottom: 0px;
    font-size: 40px;
    line-height: 40px;
}

.reporting-portal-benefits {
    background-color: #fff;
    border-radius: 20px;
    width: 100%;
    padding: 20px;
    margin-bottom: 40px;
    width: 80%;
}

    .reporting-portal-benefits.reporting-portal-benefits-right {
        margin-left: 20%;
    }

    .reporting-portal-benefits.reporting-portal-benefits-left {
        margin-right: 20%;
    }

    .reporting-portal-benefits .row {
        justify-content: center;
        align-content: center;
    }

    .reporting-portal-benefits .col-25 {
        background-repeat: no-repeat;
        background-size: 170px auto;
        background-position: center center;
    }

    .rep-benefit-instant-access .col-25 {
        background-image: url("images/reporting-portal/no-power-bi-license-needed.png");
    }

.rep-benefit-branded .col-25 {
    background-image: url("images/reporting-portal/branded-customisable-reports.png");
    background-size: 140px auto;
}

.rep-benefit-unlimited-users .col-25 {
    background-image: url("images/reporting-portal/unlimited-users.png");
    background-size: 160px auto;
}

.rep-benefit-own-experience .col-25 {
    background-image: url("images/reporting-portal/own-the-reporting-experience.png");
    background-size: 160px auto;
}

.reporting-portal-benefits h3 {
    font-size: 30px;
    line-height: 30px;
}

.section.reporting-portal-how-it-works {
    background-color: #3C3C3B;
}

.section.reporting-portal-how-it-works .content-area {
    max-width: 1000px;
}

    .section.reporting-portal-how-it-works h2 {
        color: #fff;
        font-size: 40px;
        line-height: 40px;
        font-weight: bold;
    }

    .section.reporting-portal-how-it-works h3 {
        font-size: 30px;
        line-height: 30px;
        color: #fff;
        text-align: center;
    }

    .section.reporting-portal-how-it-works p {
        color: #fff;
        text-align: center;
    }

.reporting-portal-how-it-works-1, .reporting-portal-how-it-works-2 {
    background-position: center center;
    background-size: 100% auto;
    max-width: 500px;
    height: 300px;
    background-repeat: no-repeat;
    margin: 0 auto;
}

.reporting-portal-how-it-works-1 {
    background-image: url("images/reporting-portal/how-reporting-portal-works-1.png");
}

.reporting-portal-how-it-works-2 {
    background-image: url("images/reporting-portal/how-reporting-portal-works-2.png");
    margin-top: 80px;
}

.reporting-portal-get-started h2 {
    text-align: left;
    font-weight: bold;
    font-size: 40px;
    line-height: 40px;
    margin-bottom: -20px;
}

.reporting-portal-get-started p {
    margin-top: 0px;
}

.reporting-portal-get-started .content-area {
    max-width: 1200px;
}

.reporting-portal-bottom-bar {
    height: 100px;
    background-color: #3C3C3B;
}

.reporting-portal-getting-started-image {
    width: 90%;
    margin-top: -55px;
    margin-left: 50px;
}

/** inline-tag-replacements */
#google-tag-manager {
    display: none;
    visibility: hidden;
}

.clear-both {
    clear: both;
}

.clear-right {
    clear: right;
}

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

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

.font-italic {
    font-style: italic;
}

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

.display-none-element {
    display: none;
}

/** end inline-tag replacements */

/*** DAS 2025 page */

.section.das-event-header-section {
    padding-top: 115px;
    padding-bottom: 115px;
    background-color: #EFEFEF;
}


.section.das-event-header-section .row {
    align-items: center;
    justify-content: center;
}

.section.das-event-header-section h1 {
    text-align: left;
    font-weight: bold;
    font-size: 70px;
    line-height: 76px;
    padding-right: 40px;
}

    .section.das-event-header-section p {
        font-size: 30px;
        line-height: 36px;
        padding-right: 40px;
    }

.section.das-event-header-section img {
    width: 100%;
    max-width: 560px;
    display: block;
    margin: 0 auto;
}

.das-calendar {
    margin-top: 60px;
}

.section.das-demo-benefits {
    background-color: #3C3C3B;
}

.section.das-demo-benefits .content-area {
    max-width: 1000px;
}

    .section.das-demo-benefits h2 {
        color: #fff;
        text-align: center;
        font-weight: bold;
    }

.das-demo-benefit-item {
    padding-bottom: 60px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 40px;
}

.das-demo-benefit {
    margin: 0px auto;
    height: 240px;
    width: 240px;
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
}
.das-demo-benefit-share {
    background-image: url("/Content/images/events/das2025/share-power-bi-reports-effortlessly.png");
}
.das-demo-benefit-customise {
    background-image: url("/Content/images/events/das2025/customise-reports.png");
}
.das-demo-benefit-save {
    background-image: url("/Content/images/events/das2025/save-time.png");
}
.das-demo-benefit-real-time {
    background-image: url("/Content/images/events/das2025/enhance-client-relationships.png");
}
.das-demo-benefit-scale {
    background-image: url("/Content/images/events/das2025/scale-easily.png");
}

.das-demo-benefits p {
    color: #fff;
    text-align: center;
}

.das-demo-benefits-last-row {
    max-width: 800px;
    margin: 0 auto;
}

.reporting-portal-get-started.event-demo-section {
    background-color: #35A8E0;
}

.reporting-portal-get-started.event-demo-section h2 {
    color: #fff;
}

    .reporting-portal-get-started.event-demo-section .reporting-portal-getting-started-image {
        margin-top: 0px;
    }

.das-calendar.meetings-iframe-container {
    margin: 80px auto 0px auto;
    max-width: 1000px;
}

/*** END DAS 2025 page */

/** upcoming event banner */
#upcoming-event-banner {
    background-color: #0F172A;
    color: #4D4D4D;
    text-align: left;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 16px;
    line-height: 24px;
}

.upcoming-event-section {
    margin: 0 auto;
    max-width: 700px;
}

#upcoming-event-banner .row {
    align-items: center;
}

#upcoming-event-banner p {
    margin: 0px;
    padding: 0px;
    color: #fff;
}

#upcoming-event-banner a.button, #upcoming-event-banner a.button:link, #upcoming-event-banner a.button:visited, #upcoming-event-banner a.button:hover {
    background-color: #35A8E0 !important;
    color: #fff;
    font-weight: normal;
    font-size: 18px;
    line-height: 22px;
    display: block;
    width: 100%;
    padding: 0px;
    height: 50px;
    padding-top: 14px;
    margin-left: 0px;
    font-weight: bold;
}

    #upcoming-event-banner a.button:hover {
        background-color: #2e8fbe !important;
    }

#upcoming-event-icon {
    width: 52px;
    height: 52px;
    margin-right: 30px;
    background-image: url("images/Megaphone.png");
    background-size: 100%;
    filter: brightness(1.15) drop-shadow(0 0 6px rgba(53, 168, 224, 0.7)) drop-shadow(0 0 12px rgba(53, 168, 224, 0.4));
    animation: megaphone-glow 2.4s ease-in-out infinite;
}

@keyframes megaphone-glow {
    0%, 100% {
        filter: brightness(1.15) drop-shadow(0 0 6px rgba(53, 168, 224, 0.7)) drop-shadow(0 0 12px rgba(53, 168, 224, 0.4));
    }

    50% {
        filter: brightness(1.35) drop-shadow(0 0 14px rgba(53, 168, 224, 1)) drop-shadow(0 0 26px rgba(53, 168, 224, 0.7));
    }
}

/** end upcoming event banner */

/*** scheduled refresh form */

.days-in-week h3 {
    text-align: center;
    padding-top: 40px;
}

.days-in-week .col-15, .days-in-week .col-33, .days-in-week .col-25 {
    text-align: center;
    padding-bottom: 50px;
}

.schedule-time {
    display: none;
}

.schedule-time-always-on, .schedule-time {
    text-align: center;
}

    .schedule-time .k-timepicker,
    .schedule-time-always-on .k-timepicker {
        width: 300px !important;
        margin-top: 10px !important;
        margin-bottom: 20px !important;
    }

.schedule-time-delete.k-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    width: 107px;
    padding: 10px 14px;
    font-size: 16px;
    margin-left: 10px;
    margin-right: -121px;
    margin-top: 19px;
    vertical-align: top;
}

/* no room beside the 300px picker on a phone: let the button wrap under it instead of hanging off the screen */
@media only screen and (max-width: 540px) {
    .schedule-time-delete.k-button {
        margin: 0 0 20px 0;
    }
}

.scheduled-refresh-settings {
    display: none;
}

.enable-schedule-refresh {
    text-align: center;
}

/*** connector page ***/
.connector-header {
    background-color: #3C3C3B;
    padding-bottom: 130px;
}

    .connector-header .row {
        align-items: center
    }

.connector-page .content-area {
    max-width: 1500px;
}

.connector-header h1 {
    color: #fff;
    font-weight: bold;
    text-align: left;
    margin-right: 50px;
}

.connector-header p {
    color: #fff;
    margin-right: 50px;
}

.connector-header img {
    width: auto;
    max-width: 300px;
    height: auto;
    text-align: center;
    background-color: #fff;
    padding: 80px;
    border-radius: 20px;
}

.generic-connector-page .connector-header img {
    background-color: inherit;
    padding: 0px;
    border-radius: 0px;
    max-width: 400px;
}

.connector-sign-up-button {
    max-width: 900px;
    margin: -85px auto 0 auto;
    padding-top: 50px;
    position: relative;
    z-index: 2;
}

    .connector-sign-up-button .button.small-button, .connector-sign-up-button .button.small-button:link, .connector-sign-up-button .button.small-button:visited, .connector-sign-up-button .button.small-button:hover {
        width: 300px !important;
        font-size: 26px !important;
        line-height: 26px;
        margin: 0 auto !important;
        display: block !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        display: block !important;
        background-color: #FFC700 !important;
        color: #3C3C3B;
    }

        .connector-sign-up-button .button.small-button:hover {
            background-color: #000 !important;
            color: #fff !important;
        }

/* Two Powerful Ways section */
.connector-two-ways-section {
    margin-top: -35px;
}

.connector-two-ways-section h2 {
    font-size: 36px;
    line-height: 40px;
    font-weight: bold;
    padding-bottom: 0px;
}

.connector-two-ways-section > .content-area > p {
    text-align: center;
    font-size: 20px;
    line-height: 28px;
    padding-bottom: 30px;
}

.connector-two-ways-boxes .col-50 {
    padding: 0 15px;
    box-sizing: border-box;
    margin-bottom: 80px;
}

.connector-two-ways-box {
    background-color: #fff;
    border-radius: 20px;
    padding: 40px 30px 0px 30px;
    height: 100%;
    max-width: 534px;
    margin: 0 auto;
}

.connector-two-ways-box h3 {
    font-size: 26px;
    line-height: 30px;
    font-weight: bold;
    padding-bottom: 10px;
    text-align: center;
}

.connector-two-ways-box > p {
    font-size: 18px;
    line-height: 26px;
    text-align: center;
    padding-bottom: 20px;
}

.connector-two-ways-box-image {
    width: 200px;
    height: 138px;
    margin: 0 auto 20px auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.connector-two-ways-power-bi-image {
    background-image: url("images/connector-page/analyse-in-power-bi.png");
}

.connector-two-ways-ai-image {
    background-image: url("images/connector-page/ai-chat-conversation.png");
}

.connector-two-ways-tick-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.connector-two-ways-tick-list li {
    font-size: 18px;
    line-height: 24px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.connector-two-ways-tick {
    display: inline-block;
    width: 24px;
    height: 24px;
    min-width: 24px;
    background-image: url("images/connector-page/yellow-tick.png");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Section 2: Ask Your Data Anything */
.connector-ai-questions-section {
    text-align: center;
    background-color: #FAFAFA;
}

    .connector-ai-questions-section h2 {
        font-size: 36px;
        line-height: 40px;
        font-weight: bold;
        padding-bottom: 10px;
    }

.connector-ai-questions-strapline {
    font-size: 21px;
    line-height: 30px;
    max-width: 700px;
    margin: 0 auto 15px auto;
}

.connector-ai-questions-section .ai-insights-query-prompts {
    margin-top: 30px;
}

a.connector-ai-questions-button,
a.connector-ai-questions-button:link,
a.connector-ai-questions-button:visited,
a.connector-ai-questions-button:hover {
    margin-top: 40px;
    width: auto;
}

.connector-reasons-to-tug h2 {
    font-size: 36px;
    line-height: 40px;
    font-weight: bold;
    padding-bottom: 0px;
}

.connector-reasons-to-tug h3 {
    text-align: center;
    font-weight: bold;
    font-size: 26px;
    line-height: 26px;
    padding-bottom: 30px;
}

.connector-reasons-to-tug .connector-reasons-to-users-tugger-intro {
    padding-bottom: 40px;
}

.connector-reasons-to-tug .connector-reasons-to-users-tugger-intro p {
    max-width: 900px;
    text-align: center;
}

.connector-reasons-to-tug .row {
    flex-wrap: wrap;
}

    .connector-reasons-to-tug .row h4 {
        text-align: center;
        font-size: 24px;
        line-height: 24px;
    }

.connector-reasons-to-tug p {
    font-weight: normal;
    font-size: 20px;
    line-height: 26px;
    margin-bottom: 50px;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.connector-reason-image {
    background-size: 100%;
    width: 200px;
    height: 230px;
    background-position: center center;
    margin: 0 auto;
    background-repeat: no-repeat;
}

.reason-zero-maintenance {
    background-image: url("images/connector-page/zero-maintenance.png");
}

.reason-secure {
    background-image: url("images/connector-page/secure.png");
}

.reason-simple {
    background-image: url("images/connector-page/simple.png");
}

.reason-up-to-date {
    background-image: url("images/connector-page/up-to-date.png");
}

.reason-cost-effective {
    background-image: url("images/connector-page/cost-effective.png");
}

.reason-fast-track {
    background-image: url("images/connector-page/fast-track.png");
}

.connector-reports-section {
    background-color: #ddeff8;
}

    .connector-reports-section h2 {
        font-size: 36px;
        line-height: 40px;
        font-weight: bold;
        padding-bottom: 20px;
    }

    .connector-reports-section p {
        text-align: center;
        font-size: 24px;
        line-height: 32px;
        max-width: 900px;
        margin: 0 auto;
        padding-bottom: 20px;
    }

    .connector-reports-section h3 {
        text-align: center;
        font-size: 32px;
        line-height: 32px;
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .connector-reports-section h4 {
        text-align: left;
        font-size: 26px;
        line-height: 32px;
        margin-bottom: 10px;
        margin-top: 5px;
    }

.connector-report-features {
    margin: 0 auto;
    max-width: 600px;
}

    .connector-report-features .row {
        margin-bottom: 50px;
        align-items: center
    }
.connector-report-features .row p {
    text-align: left;
}


.tugger-big-bullet {
    width: 100px;
    height: 100px;
    background-image: url("images/connector-page/tugger-big-bullet.png");
    background-size: 100%;
}

.connector-alt-reports-section h2 {
    font-size: 36px;
    line-height: 40px;
    font-weight: bold;
    padding-bottom: 20px;
}

.connector-alt-reports-section p {
    text-align: center;
    font-size: 24px;
    line-height: 32px;
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 20px;
}

.connector-alt-reports-section .row {
    max-width: 600px;
    margin: 40px auto 0px;
}

.connector-alt-reports-icon {
    width: 125px;
    height: 125px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin: 0 auto
}

.connector-tableau-icon {
    background-image: url("images/connector-page/tableau@2x.png");
    border-radius: 10px;
}

.connector-excel-icon {
    background-image: url("images/connector-page/excel.png");
}

.connector-get-started-section {
    background-color: #35A8E0;
}

    .connector-get-started-section h2 {
        font-size: 36px;
        line-height: 40px;
        font-weight: bold;
        padding-bottom: 20px;
        color: #fff;
        text-align: left;
        max-width: 750px;
    }

    .connector-get-started-section p {
        text-align: left;
        font-size: 24px;
        line-height: 32px;
        color: #fff;
    }

.connector-rocket {
    margin-right: 15%;
    float: right;
    width: 254px;
    height: 486px;
    background-image: url("images/connector-page/tugger-rocket.png");
    background-size: 254px 486px;
    margin-top: -450px;
    background-repeat: no-repeat;
    background-position: center bottom;
}

.connector-page-rocket-clouds {
    height: 108.5px;
    width: 100%;
    background-size: auto 108.5px;
    background-image: url("images/connector-page/cloud-pattern.png");
    background-position: bottom left;
    margin-top: -60px;
    background-color: #35A8E0;
}

.connector-get-started-section h4 {
    text-align: left;
    font-size: 28px;
    line-height: 36px;
    color: #fff;
}

.connector-get-started-section p {
    max-width: 750px;
}

.connector-sign-up-rocket-buttons {
    max-width: 500px;
    margin-left: 30px;
}

.connector-sign-up-rocket-buttons .round-button {
    font-size: 28px !important;
    padding: 40px 25px 25px 25px !important;
    height: 90px !important;
    width: 110px !important;
}

.connector-sign-up-rocket-buttons .round-button:hover {
    background-color: #3C3C3B !important;
    color: #fff !important;
}

.connector-data-section h2 {
    font-size: 36px;
    line-height: 40px;
    font-weight: bold;
    color: #35A8E0;
    padding-bottom: 0px;
    text-align: left;
}

.connector-data-section p {
    text-align: left;
    font-size: 24px;
    line-height: 32px;
    color: #35A8E0;
}

.connector-data-section-image {
    background-image: url("images/connector-page/tugger-woman.png");
    height: 500px;
    width: 300px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: right top;
    margin: 0 auto;
    margin-top: -100px;
}

.connector-data-search {
    margin-top: -105px;
}

    .connector-data-search .k-input-inner {
        background-image: url("images/connector-page/search.png");
        background-repeat: no-repeat;
        background-color: #ddeff8 !important;
        border: none !important;
        background-size: 45px;
        background-position: 5px 5px;
        padding-left: 60px;
    }

    .connector-data-search .connector-data-field-div {
        margin-right: 60px;
    }

.connector-data-sets {
    margin-top: 40px;
    margin-right: 60px;
}

.connector-data-fields {
    margin-top: 40px;
}

.connector-data-sets div {
    color: #fff;
    padding: 5px;
}

.connector-data-fields-heading {
    font-weight: bold;
    background-color: #ddeff8;
    color: #35A8E0;
    padding: 5px;
}

.connector-data-sets-heading {
    font-weight: bold;
    background-color: #35A8E0;
}

.connector-data-fields .col-60 div.connector-data-fields-heading {
    margin-right: 10px;
}

.connect-data-field-headings {
    margin-right: 14px;
}

#connector-data-rows, #connector-data-fields {
    height: 450px;
    overflow-y: scroll;
    padding: 0px;
    margin: 0px;
}


    #connector-data-rows a, #connector-data-rows a:link, #connector-data-rows a:visited, #connector-data-rows a:hover {
        color: #fff;
        text-decoration: none;
        font-size: 16px;
        display: block;
        padding: 5px;
    }

        #connector-data-rows a:hover {
            background-color: #3C3C3B;
        }

a.selected-data-set-link {
    background-color: #FFC700 !important;
    color: #3C3C3B !important;
}

#connector-data-rows div {
    margin-top: 5px;
    background-color: #35A8E0;
    padding: 0px;
}

    #connector-data-fields .row {
        margin-top: 5px;
    }

    #connector-data-rows div {
        color: #35A8E0;
    }

.connector-page-field-name, .connector-page-field-type {
    color: #35A8E0;
    padding: 5px;
    background-color: #ddeff8;
    font-size: 15px;
}

.connector-page-field-name {
    margin-right: 10px;
}

    .connector-page-field-name a, .connector-page-field-name a:link, .connector-page-field-name a:visited, .connector-page-field-name a:hover {
        font-size: 13px;
        color: #3C3C3B;
    }

        .connector-page-field-name a:hover {
            font-weight: bold;
        }

a.connector-page-help-icon, a.connector-page-help-icon:link, a.connector-page-help-icon:visited, a.connector-page-help-icon:hover {
    float: right;
    display: block;
    background-color: #35A8E0;
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin-top: 5px;
    text-align: center;
    text-decoration: none;
    font-size: 22px;
}

a.connector-page-help-icon:hover {
    background-color: #3C3C3B;
}

.request-a-field-row {
    padding-top: 40px;
    align-items: center;
    justify-content: center;
}

.request-a-field-row .col-80 {
    color: #35A8E0;
    text-align: right;
    flex-basis: 88%;
}

    .request-a-field-row .col-20 {
        text-align: right;
        flex-basis: 12%;
    }

.complex-connector-field-section {
    padding-bottom: 40px;
    display: none;
    padding-left: 100px;
    padding-right: 100px;
}

    .complex-connector-field-section .connector-page-field-name, .complex-connector-field-section .connector-page-field-type {
        background-color: #EFEFEF;
    }

    .complex-connector-field-section .connector-data-fields-heading {
        background-color: #EFEFEF
    }

.connector-customer-success-stories-section {
    background-color: #3C3C3B;
}

    .connector-customer-success-stories-section h2 {
        font-size: 36px;
        line-height: 40px;
        font-weight: bold;
        color: #fff;
    }

.connector-story-box {
    width: 80%;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 30px;
    padding: 20px 20px 80px 20px;
}

.connector-story-box h4 {
    margin: 0px;
    padding: 0px;
    color: #35A8E0;
    text-align: left;
    height: 80px;
}

.connector-story-customer-logo {
    text-align: center;
}

.connector-story-customer-logo img {
    width: auto;
    height: 140px;
    margin-top: 15px;
}

.connector-customer-success-stories-section a.button,
.connector-customer-success-stories-section a.button:link,
.connector-customer-success-stories-section a.button:visited,
.connector-customer-success-stories-section a.button:hover {
    width: 60%;
    margin: -40px auto 80px auto;
    display: block;
    border-radius: 60px;
}

a.button.connector-all-stories-button,
a.button.connector-all-stories-button:link,
a.button.connector-all-stories-button:visited,
a.button.connector-all-stories-button:hover {
    max-width: 600px;
    margin: -40px auto 0px auto;
    display: block;
    border-radius: 60px;
}

.connector-story-box-image {
    width: 100%;
    height: 250px;
    background-size: cover;
    background-position: center center;
    margin-bottom: 20px;
}

.connector-request-a-connector-section {
    background-color: #3C3C3B;
}

    .connector-request-a-connector-section .row {
        align-items: center;
    }

    .connector-request-a-connector-section h2 {
        text-align: left;
        font-weight: bold;
        font-size: 36px;
        line-height: 40px;
        margin-right: 100px;
        margin-bottom: 0px;
        padding-bottom: 0px;
        color: #fff
    }

    .connector-request-a-connector-section p {
        color: #fff;
        margin-right: 100px;
        font-size: 24px;
        line-height: 32px;
    }

    .connector-request-a-connector-section a.round-button, .connector-request-a-connector-section a.round-button:link, .connector-request-a-connector-section a.round-button:visited, .connector-request-a-connector-section a.round-button:hover {
        font-size: 32px;
        line-height: 32px;
        height: 115px;
        width: 160px;
        padding-top: 65px;
    }

    .connector-request-a-connector-section a.round-button:hover {
        background-color: #fff;
        color: #3C3C3B;
    }

.connector-report-image {
    margin: 0 auto;
    background-image: url("images/connector-page/pc-screen.png");
    width: 837px;
    height: 573px;
    margin-bottom: 40px;
    background-size: 100%;
}

.connector-report-image img {
    width: 771px;
    height: 435px;
    margin-top: 31px;
    margin-left: 32px;
}

.connector-report-image-text {
    text-align: center;
    margin-bottom: 70px;
}

.connector-report-images span {
    font-weight: bold;
}

.connector-page-our-connectors h2 {
    font-weight: bold;
    font-size: 36px;
    line-height: 40px;
}

.connector-page-our-connectors #tuggers {
    padding-bottom: 100px;
}

.connector-page-our-connectors .tugger-selection-box {
    border-radius: 20px;
}

/*** AI chat functionality */

#ai-chat-button {
    width: 69.75px;
    height: 69.75px;
    border-radius: 50%;
    position: fixed;
    background-image: url("ai-chat-images/ai-chat-popup-button.png");
    background-size: 100%;
    bottom: 55px;
    left: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

    #ai-chat-button:hover {
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3); /* stronger shadow on hover */
        transform: translateY(-2px); /* lift effect */
    }

    #ai-chat-button:active {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* pressed down */
        transform: translateY(1px);
    }

#chat-container {
    width: 500px;
    height: 700px;
    border: 3px solid #35A8E0;
    padding: 0px;
    flex-direction: column;
    position: fixed;
    z-index: 100;
    left: 40px;
    bottom: 140px;
    background-color: #fff;
    border-radius: 10px;
    display: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

    #chat-container.chat-container-preview {
        position: relative;
        bottom: 0px;
        left: 0px;
    }

.chat-header {
    background-color: #35A8E0;
    padding: 10px;
    background-image: url("ai-chat-images/ai-robot-header.png");
    background-size: 79px 74px;
    background-repeat: no-repeat;
    background-position: 50px bottom;
}

    .chat-header h3 {
        color: #fff;
        margin: 0px;
        padding: 0px;
        margin-left: 130px;
    }

    .chat-header h4 {
        color: #fff;
        margin: 0px;
        padding: 0px;
        font-weight: normal;
        margin-left: 130px;
    }

#chat-input {
    font-size: 14px;
    padding: 15px 50px 15px 10px;
    background-color: #f1f1f1;
    border: none;
    border-radius: 10px;
    margin: 10px 20px 20px 20px;
    width: 400px;
    background-image: url("ai-chat-images/send.png");
    background-repeat: no-repeat;
    background-size: 35px 35px;
    background-position: 415px center;
    color: #6e6e6e;
}

    #chat-input:focus {
        outline: none;
        border: none;
    }

#chat-messages {
    flex: 1;
    overflow-y: auto;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
    padding: 20px;
    height: 497px;
}

#chat-send {
    display: none;
}

.message {
    margin: 5px 0;
    clear: both;
}

    .message.ai, .message.user {
        text-align: left;
        border-radius: 10px;
        font-size: 14px;
        line-height: 16px;
        padding: 10px;
        margin-bottom: 20px;
        color: #3C3C3B;
    }

    .message.user {
        background-color: #e1e1e1;
    }

    .message.ai {
        text-align: left;
        background-color: #e2f3fb;
    }

.chat-person {
    height: 42.5px;
    width: 57.5px;
    background-color: #35A8E0;
    color: #fff;
    float: right;
    border-radius: 50%;
    margin-bottom: 10px;
    text-align: center;
    padding-top: 15px;
}

    .chat-person.chat-ai {
        background-image: url(ai-chat-images/robot-message.png);
        background-size: 100%;
        float: left;
    }

.message table {
    border-collapse: collapse;
    width: 100%;
}

.chat-table-wrapper {
    width: 100%; /* or any fixed width */
    overflow-x: auto; /* enable horizontal scrolling if needed */
    -webkit-overflow-scrolling: touch; /* smooth scrolling on mobile */
}

.message table th {
    background-color: #e1e1e1;
    font-weight: bold;
    text-align: left;
    padding: 5px;
}

.message table td {
    background-color: #EFEFEF;
    text-align: left;
    padding: 5px;
}

.message table td, .message table th {
    border-left: 3px solid #B3B3B3
}

    .message table td:first-child, .message table th:first-child {
        border-left: none;
    }

.chat-bubble {
    display: inline-block;
    padding: 10px 14px;
    background-color: #f1f0f0;
    border-radius: 18px;
    max-width: 200px;
    margin: 10px 0;
    position: relative;
}

.chat-dots {
    display: flex;
    gap: 5px;
    justify-content: flex-start;
    align-items: center;
    height: 10px;
}

    .chat-dots span {
        width: 8px;
        height: 8px;
        background-color: #555;
        border-radius: 50%;
        display: inline-block;
        animation: chat-fade 1.2s infinite ease-in-out;
    }

        .chat-dots span:nth-child(1) {
            animation-delay: 0s;
        }

        .chat-dots span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .chat-dots span:nth-child(3) {
            animation-delay: 0.4s;
        }

@keyframes chat-fade {
    0%, 80%, 100% {
        opacity: 0;
        transform: scale(0.8);
    }

    40% {
        opacity: 1;
        transform: scale(1);
    }
}

.chat-preview-loader-container {
    width: 470px;
    height: 620px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
    display: none;
    position: absolute;
}

.chat-preview-loader-header {
    height: 40px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.chat-preview-loader-messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.chat-preview-loader-message {
    height: 20px;
    border-radius: 12px;
}

.chat-preview-loader-input {
    height: 40px;
    border-radius: 8px;
    margin-top: 100px;
}

.chat-preview-loader-skeleton {
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
    background-size: 200% 100%;
    animation: chat-preview-loader-shimmer 1.5s infinite;
}

@keyframes chat-preview-loader-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.chat-chart-wrapper {
    background-color: #fff;
    margin-top: 20px;
    border-radius: 10px;
    padding: 10px;
}

#chat-messages a.button.small-button, 
#chat-messages a.button.small-button:link, 
#chat-messages a.button.small-button:visited, 
#chat-messages a.button.small-button:hover {
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 14px;
    line-height: 18px;
    border-radius: 20px;
    font-weight: normal;
    padding-left: 10px;
    padding-right: 10px;
}

.delete-context-link-col {
    display: flex;
    align-items: center;
}

a.delete-context-link, a.delete-context-link:link, a.delete-context-link:visited, a.delete-context-link:hover {
    margin-left: 10px;
}

.cin7-settings {
    display: none;
    padding-top: 20px;
}

.cin7-settings img {
    height: 150px;
    border: 1px solid #EFEFEF;
    border-radius: 10px;
    margin-top: 10px;
    margin: 0 auto;
    display: block;
    margin-top: 20px;
    margin-bottom: 20px;
}

/*** usage page */
.usage-filters-row {
    margin-left: 20px;
    margin-right: 20px;
}

.mcp-audit-filters-row {
    gap: 20px;
}

.mcp-audit-filters-row label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

/* #2402 - AI Query History grid and row detail (moved from inline styles) */
.mcp-audit-grid-row {
    margin-top: 15px;
}

.mcp-audit-grid {
    height: 650px;
}

.mcp-audit-detail {
    padding: 10px;
}

.mcp-audit-status-not-completed {
    cursor: help;
}

/*** MCP Configuration page */
.mcp-tab-content {
    padding: 15px 0;
}

.mcp-tab-description {
    margin-bottom: 15px;
}

.mcp-server-url-block {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 25px;
}

.mcp-server-url-block label {
    display: block;
    margin-bottom: 8px;
}

.mcp-server-url-row {
    display: flex;
    align-items: center;
}

.mcp-server-url-row code {
    font-size: 15px;
    word-break: break-all;
}

.mcp-guides-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.mcp-guide-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1 1 calc(25% - 15px);
    min-width: 0;
    padding: 25px 15px;
    border: 1px solid #e1e1e1;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.mcp-guide-card:hover {
    border-color: #35A8E0;
    box-shadow: 0 2px 8px rgba(53, 168, 224, 0.15);
    text-decoration: none;
    color: inherit;
}

.mcp-guide-card img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 12px;
}

.mcp-guide-card img[alt="ChatGPT"],
.mcp-guide-card img[alt="Microsoft Copilot"] {
    width: 120px;
    height: 120px;
}

.mcp-guide-card-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.mcp-guide-card-link {
    font-size: 14px;
    color: #35A8E0;
    font-weight: 600;
}

.mcp-guide-card:hover .mcp-guide-card-link {
    color: inherit;
    text-decoration: underline;
}

.mcp-guide-content {
    padding: 10px;
}

.mcp-guide-note {
    margin-top: 10px;
}

a.copy-button.mcp-copy-inline {
    float: none !important;
    margin-left: 5px;
}

.mcp-config-wrapper {
    position: relative;
    margin-top: 10px;
}

.mcp-config-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
}

.mcp-config-pre {
    background-color: #f5f5f5;
    padding: 15px;
    padding-right: 40px;
    border: 1px solid #ddd;
    border-radius: 4px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.mcp-config-pre-small {
    font-size: 13px;
}

.mcp-dialog-hidden {
    display: none;
}

.mcp-dialog-body {
    padding: 15px;
}

.mcp-form-row {
    margin-bottom: 15px;
}

.mcp-full-width {
    width: 100%;
}

.mcp-required {
    color: red;
}

.mcp-hint {
    font-size: 12px;
    color: #666;
    margin: 2px 0 5px 0;
}

.mcp-radio-list {
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
}

.mcp-radio-list li {
    margin-bottom: 8px;
}

.mcp-radio-list label {
    cursor: pointer;
}

.mcp-radio-list input[type="radio"] {
    margin-right: 5px;
}

.mcp-button-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.mcp-warning-box {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 15px;
}

.mcp-key-display {
    display: flex;
    align-items: center;
}

.mcp-key-value {
    word-break: break-all;
    flex: 1;
    padding: 8px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.mcp-config-result-wrapper {
    position: relative;
}

.mcp-config-result-wrapper .mcp-config-pre {
    padding-right: 15px;
}

.mcp-status-active {
    color: green;
    font-weight: bold;
}

.mcp-status-revoked,
.mcp-status-inactive {
    color: red;
    font-weight: bold;
}

.mcp-status-expired {
    color: orange;
    font-weight: bold;
}

.summary-box.card-value h2 {
    font-size: 40px;
    line-height: 40px;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-bottom: 10px;
    color: #35A8E0;
}

.summary-box.card-value h3 {
    font-weight: normal;
    text-align: center;
    padding: 0px;
    margin: 0px;
}

/*** end usage page */

/*** phone number flag filtering*/

.iti__search-input {
    font-size: 20px;
    line-height: 24px;
    padding: 7px 5px;
}

.iti__country-container {
    bottom: 10px !important;
}

span.iti__tel-input {
    padding-left: 0px !important;
}

.iti.iti--allow-dropdown.iti--show-flags {
    display: block;
}

/** end phone number flag filtering*/

/*** AI Insights Page ***/

.ai-insights-page .content-area {
    max-width: 1500px;
}

/* Header / Hero */
.ai-insights-header {
    background-color: #3C3C3B;
    padding-bottom: 60px;
}

    .ai-insights-header .row {
        align-items: center;
    }

    .ai-insights-header h1 {
        color: #fff;
        font-weight: bold;
        text-align: left;
        font-size: 42px;
        line-height: 50px;
        margin-right: 50px;
    }

    .ai-insights-header p {
        color: #fff;
        margin-right: 50px;
        font-size: 21px;
        line-height: 30px;
    }

.ai-insights-hero-image {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 15px;
}

.ai-insights-sign-up-button {
    max-width: 900px;
    margin: -85px auto 0 auto;
    padding-top: 50px;
}

    .ai-insights-sign-up-button .button.small-button, .ai-insights-sign-up-button .button.small-button:link, .ai-insights-sign-up-button .button.small-button:visited, .ai-insights-sign-up-button .button.small-button:hover {
        width: 300px !important;
        font-size: 26px !important;
        line-height: 26px;
        margin: 0 auto !important;
        display: block !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        background-color: #FFC700 !important;
        color: #3C3C3B;
    }

        .ai-insights-sign-up-button .button.small-button:hover {
            background-color: #000 !important;
            color: #fff !important;
        }

/* What is Tugger AI Insights? */
.ai-insights-what-is {
    padding-top: 60px;
    padding-bottom: 40px;
    background-color: #35A8E0;
    margin-top: -35px;
}

    .ai-insights-what-is h2 {
        text-align: left;
        font-size: 36px;
        line-height: 40px;
        font-weight: bold;
        padding-bottom: 20px;
        color: #fff;
    }

    .ai-insights-what-is p {
        font-size: 21px;
        line-height: 30px;
        max-width: 550px;
        color: #fff;
    }

.ai-insights-info-flow {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-radius: 30px;
    padding: 30px;
    margin-top: 50px;
}

.ai-insights-info-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #EFEFEF;
}

    .ai-insights-info-item:last-child {
        border-bottom: none;
    }

    .ai-insights-info-item img {
        width: 55px;
        height: 55px;
        flex-shrink: 0;
        margin-right: 20px;
    }

.ai-insights-info-text {
    text-align: left;
}

.ai-insights-info-text h4 {
    font-size: 24px;
    font-weight: bold;
    line-height: 28px;
    color: #3C3C3B;
    margin: 0;
    padding: 0;
}

.ai-insights-info-text p {
    font-size: 18px;
    line-height: 24px;
    color: #757575;
    margin: 4px 0 0 0;
    padding: 0;
    max-width: none;
    text-align: left !important;
}

.ai-insights-compatible-with {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    max-width: 550px;
}

.ai-insights-compatible-label {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    display: block;
    margin-bottom: 15px;
}

.ai-insights-compatible-logos {
    display: flex;
    align-items: center;
    gap: 20px;
}

    .ai-insights-compatible-logos img {
        width: 89px;
        height: 89px;
    }

.ai-insights-more-label {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

/* Reasons to Tug with AI */
.ai-insights-reasons h2 {
    font-size: 36px;
    line-height: 40px;
    font-weight: bold;
    padding-bottom: 10px;
}

.ai-insights-reasons .row {
    flex-wrap: wrap;
}

    .ai-insights-reasons .row h4 {
        text-align: center;
        font-size: 24px;
        line-height: 24px;
    }

.ai-insights-reasons p {
    font-weight: normal;
    font-size: 20px;
    line-height: 26px;
    margin-bottom: 50px;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.ai-insights-reason-image {
    width: 200px;
    height: 200px;
    margin: 0 auto 20px auto;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ai-insights-reason-image img {
        max-width: 180px;
        max-height: 180px;
        height: auto;
    }

/* Who is it for? */
.ai-insights-audience {
    text-align: center;
    background-color: #fff;
}

    .ai-insights-audience h2 {
        font-size: 36px;
        line-height: 40px;
        font-weight: bold;
        padding-bottom: 10px;
    }

.ai-insights-audience-strapline {
    font-size: 21px;
    line-height: 30px;
    max-width: 700px;
    margin: 0 auto 30px auto;
}

    .ai-insights-audience h3 {
        font-size: 28px;
        line-height: 34px;
        font-weight: bold;
        margin-top: 40px;
        margin-bottom: 15px;
    }

.ai-insights-audience-intro {
    font-size: 21px;
    line-height: 30px;
    max-width: 700px;
    margin: 0 auto 30px auto;
}

.ai-insights-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.ai-insights-pill {
    display: inline-block;
    background: #35A8E0;
    color: #fff;
    padding: 12px 28px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .ai-insights-pill.active {
        background: #3C3C3B;
    }

    .ai-insights-pill:hover {
        background: #3C3C3B;
    }

.ai-insights-tab-content {
    display: none;
}

    .ai-insights-tab-content.active {
        display: block;
    }

.ai-insights-query-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
}

.ai-insights-query-prompt {
    background: #E8F4FA;
    border: none;
    border-radius: 10px;
    padding: 15px 25px;
    font-size: 17px;
    line-height: 22px;
    color: #3C3C3B;
    flex: 1 1 380px;
    max-width: 430px;
}

/* How it works */
.ai-insights-how-it-works {
    background-color: #3C3C3B;
}

.ai-insights-how-it-works h2 {
    font-size: 36px;
    line-height: 40px;
    font-weight: bold;
    padding-bottom: 30px;
    color: #fff;
}

.ai-insights-steps-row {
    align-items: flex-start;
    justify-content: center;
}

.ai-insights-step {
    text-align: center;
    padding: 0 20px;
}

.ai-insights-step-icon {
    width: 190px;
    height: 190px;
    margin: 0 auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ai-insights-step-icon img {
        width: 190px;
        height: 190px;
    }

.ai-insights-step h4 {
    font-size: 24px;
    line-height: 28px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #fff;
}

.ai-insights-step p {
    font-size: 20px;
    line-height: 26px;
    max-width: 300px;
    margin: 0 auto;
    color: #fff;
}

.ai-insights-step-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
}

    .ai-insights-step-arrow img {
        width: 60px;
        height: 33.5px;
    }

/* All Your Data Sources */
.ai-insights-tools {
    text-align: center;
    background-color: #35A8E0;
}

    .ai-insights-tools h2 {
        font-size: 36px;
        line-height: 40px;
        font-weight: bold;
        padding-bottom: 10px;
        color: #fff;
    }

.ai-insights-tools-intro {
    font-size: 21px;
    line-height: 30px;
    max-width: 700px;
    margin: 0 auto 40px auto;
    color: #fff;
}

.ai-insights-connector-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto;
}

.ai-insights-connector-logo {
    width: 110px;
    height: 110px;
    background: #fff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ai-insights-connector-logo img {
        width: 70px;
        height: 70px;
        object-fit: contain;
    }

    .ai-insights-connector-logo:hover {
        transform: scale(1.08);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    }

.ai-insights-connector-logo {
    transition: transform 0.2s, box-shadow 0.2s;
}

.ai-insights-connector-more {
    text-decoration: none;
}

    .ai-insights-connector-more span {
        font-size: 20px;
        font-weight: 600;
        color: #35A8E0;
    }

    .ai-insights-connector-more:hover span {
        text-decoration: underline;
    }

/* FAQ section */
.ai-insights-faqs > .content-area > h2 {
    font-size: 36px;
    line-height: 40px;
    font-weight: bold;
    padding-bottom: 20px;
    cursor: default;
    background: none;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

/*** end AI Insights Page ***/

/*** ===== Connector Listing Page (OurTuggers) ===== ***/

.cl-hero {
    background-color: #35A8E0;
    padding-top: 0px;
    padding-bottom: 0px;
    overflow: hidden;
}

.cl-hero .row {
    align-items: stretch;
}

.cl-hero .col-55 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.cl-hero h1 {
    color: #fff;
    font-size: 38px;
    line-height: 44px;
    font-weight: bold;
    text-align: left;
    margin-right: 50px;
    padding-bottom: 10px;
}

.cl-hero p {
    color: #fff;
    font-size: 19px;
    line-height: 27px;
    text-align: left;
    margin-right: 50px;
    padding-bottom: 10px;
}

.cl-hero > .content-area {
    padding-right: 0px;
}

.cl-hero .col-45 {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    max-height: 600px;
    overflow: hidden;
}

.cl-hero-image {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,1) 40%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,1) 40%);
}

.cl-tool-strip {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    padding-top: 10px;
}

.cl-tool-strip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cl-tool-strip-item img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 12px;
}

.cl-tool-strip-item span {
    color: #fff;
    font-size: 14px;
    line-height: 18px;
}

.cl-search-section {
    background-color: #fff;
    padding-top: 40px;
    padding-bottom: 20px;
}

.cl-search-wrapper {
    max-width: 600px;
    margin: 0 auto 20px auto;
    position: relative;
}

.cl-search-input {
    width: 100%;
    padding: 15px 20px 15px 50px;
    border: 2px solid #ddd;
    border-radius: 30px;
    font-size: 18px;
    line-height: 22px;
    font-family: 'Source Sans Pro', sans-serif;
    outline: none;
    box-sizing: border-box;
}

.cl-search-input:focus {
    border-color: #35A8E0;
}

.cl-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
}

.cl-count-line {
    text-align: center;
    font-size: 16px;
    line-height: 20px;
    color: #6e6e6e;
    padding: 20px 0;
}

.cl-count-line strong {
    color: #3C3C3B;
}

.cl-category-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 40px;
    max-width: 900px;
    margin: 0 auto 20px auto;
}

.cl-category-tab {
    padding: 10px 20px;
    border: 2px solid #ddd;
    border-radius: 25px;
    font-size: 16px;
    line-height: 20px;
    cursor: pointer;
    background-color: #fff;
    color: #3C3C3B;
    transition: all 0.2s;
    font-family: 'Source Sans Pro', sans-serif;
    user-select: none;
}

.cl-category-tab:hover {
    border-color: #35A8E0;
    color: #35A8E0;
}

.cl-category-tab.active {
    background-color: #35A8E0;
    border-color: #35A8E0;
    color: #fff;
}

.cl-category-tab .cl-tab-count {
    font-size: 13px;
    opacity: 0.7;
    margin-left: 4px;
}

.cl-bridge-line {
    text-align: center;
    font-size: 15px;
    line-height: 22px;
    color: #999;
    padding: 0 20px 30px 20px;
    max-width: 700px;
    margin: 0 auto;
}

.cl-popular-section {
    background-color: #fff;
    padding-bottom: 40px;
}

.cl-popular-section h2 {
    text-align: center;
    font-size: 32px;
    line-height: 36px;
    padding-bottom: 30px;
    font-weight: bold;
    color: #3C3C3B;
}

.cl-popular-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
}

.cl-card {
    border: 5px solid #EFEFEF;
    border-radius: 25px;
    width: 310px;
    background-color: #fff;
    text-align: center;
    cursor: pointer;
    position: relative;
    padding: 40px 20px 25px 20px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.cl-card:hover {
    border-color: #35A8E0;
}

.cl-card > a,
.cl-card > a:link,
.cl-card > a:visited,
.cl-card > a:hover {
    text-decoration: none;
    color: #3C3C3B;
    display: block;
}

.cl-card-logo {
    width: 180px;
    height: 90px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto 15px auto;
}

.cl-card h4 {
    font-size: 18px;
    line-height: 22px;
    font-weight: bold;
    margin: 0 0 10px 0;
    padding: 0;
}

.cl-card-description {
    display: none;
}

.cl-card-badges {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 25px;
    min-height: 28px;
    flex-wrap: wrap;
}

.cl-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 12px;
    line-height: 16px;
    font-weight: bold;
}

.cl-badge-templates {
    background-color: #E8F5E9;
    color: #2E7D32;
}

.cl-badge-ai {
    background-color: #E3F2FD;
    color: #1565C0;
}

.cl-popular-label {
    position: absolute;
    top: -12px;
    right: 20px;
    background-color: #FFC700;
    color: #3C3C3B;
    font-size: 11px;
    line-height: 16px;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 15px;
    text-transform: uppercase;
}

.cl-card .button.small-button,
.cl-card a.button.small-button,
.cl-card a.button.small-button:link,
.cl-card a.button.small-button:visited,
.cl-card a.button.small-button:hover {
    margin: 10px auto 0 auto;
    display: block;
    width: 170px !important;
    background-color: #35A8E0;
    color: #fff;
    font-size: 16px;
    padding: 10px 0;
    line-height: 22px;
    border-radius: 30px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
}

.cl-card:hover a.button.small-button,
.cl-card a.button.small-button:hover {
    background-color: #000 !important;
}

.cl-category-section {
    background-color: #fff;
    padding-bottom: 20px;
}

.cl-category-group {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.cl-category-heading {
    font-size: 26px;
    line-height: 30px;
    font-weight: bold;
    text-align: center;
    padding: 30px 0 20px 0;
    margin-bottom: 30px;
    color: #35A8E0;
    position: relative;
}

.cl-category-heading::before {
    content: '';
    display: block;
    width: 50%;
    height: 5px;
    background-color: #ddeff8;
    margin: 0 auto 30px auto;
    border-radius: 3px;
}

.cl-connector-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 30px;
    justify-content: center;
}

.cl-coming-soon {
    background-color: #EFEFEF;
    padding-top: 60px;
    padding-bottom: 60px;
}

.cl-coming-soon h2 {
    text-align: center;
    font-size: 32px;
    line-height: 36px;
    padding-bottom: 10px;
    font-weight: bold;
    color: #3C3C3B;
}

.cl-coming-soon p.cl-coming-soon-subtext {
    text-align: center;
    font-size: 18px;
    line-height: 24px;
    color: #6e6e6e;
    padding-bottom: 30px;
}

.cl-coming-soon-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    max-width: 1400px;
    margin: 0 auto;
}

.cl-coming-soon .cl-card {
    border-color: transparent;
}

.cl-coming-soon .cl-card-badges,
.cl-coming-soon .cl-card-description {
    display: none;
}


.cl-card-hidden {
    display: none !important;
}

.cl-category-group-hidden {
    display: none !important;
}

.cl-section-hidden {
    display: none !important;
}

.cl-usage-stat {
    font-weight: bold;
}

/*** end Connector Listing Page ***/

/*** ****/
@media only screen and (max-width: 1600px) {
    .blog-main-feature-text h2 {
        padding-top: 60px;
        text-decoration: none;
    }

    .testimonials .blog-quote {
        min-height: 460px;
    }
}

@media only screen and (max-width: 1560px) {
    .blog-item h3 {
        font-size: 38px;
        line-height: 46px;
    }

    .mailing-list-section .row {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .mailing-list-section p {
        font-size: 36px;
        line-height: 44px;
    }

    .mailing-list-section .k-textbox {
        width: 300px !important;
        margin-left: 50px;
        font-size: 28px;
        line-height: 28px;
    }

    #SubscribeMailingListButton {
        font-size: 28px;
        line-height: 28px;
        padding-top: 22px;
        padding-bottom: 22px;
    }

    .mailing-list-section .k-textbox {
        height: 71px;
    }

        .mailing-list-section .k-textbox input.k-input-inner {
            height: 71px;
        }
}

@media only screen and (max-width: 1500px) {

    .request-a-field-row .col-80 {
        flex-basis: 85%;
    }

    .request-a-field-row .col-20 {
        flex-basis: 15%;
    }
}

@media only screen and (max-width: 1460px) {
    .payment-plan-box a.button {
        font-size: 20px !important;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .payment-plans a.round-button, .payment-plans a.round-button:link, .payment-plans a.round-button:visited, .payment-plans a.round-button:hover {
        padding-top: 40px;
        font-size: 22px !important;
    }
}

@media only screen and (max-width: 1450px) {
    #tugger-header-image {
        height: 550px;
        width: 626px;
        margin-top: 80px;
    }

    .menu {
        margin-top: 40px;
    }

    nav a.tugger-logo, nav a.tugger-logo:link, nav a.tugger-logo:visited, nav a.tugger-logo:hover {
        width: 216px;
        height: 47px;
        width: 200px;
        height: 57px;
        margin-top: 40px;
    }

    .menu a, .menu a:link, .menu a:visited, .menu a:hover, .dropbtn {
        font-size: 18px;
        line-height: 20px;
        margin-left: 15px;
    }

    .nav-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    /*** DAS 2025 page */

    .section.das-event-header-section h1 {
        font-size: 60px;
        line-height: 66px;
    }

    /** end DAS 2025 page */
}

@media only screen and (max-width: 1430px) {
    #tuggers .col-25 {
        flex-basis: 33%;
    }

    .blog-main-feature-text {
        margin-left: 35px;
    }

    a.main-feature-read-more {
        margin-left: 35px;
    }

    .blog-item h3 {
        font-size: 34px;
        line-height: 42px;
    }

    .blog-item-text {
        font-size: 18px;
        line-height: 36px;
    }

    .partners-bar .col-25 {
        flex-basis: 50%;
    }

    .partner-listing .row .col-33 {
        flex-basis: 50%;
    }
}

@media only screen and (max-width: 1350px) {
    nav a.tugger-logo, nav a.tugger-logo:link, nav a.tugger-logo:visited, nav a.tugger-logo:hover {
        width: 151.9px;
        height: 47px;
        margin-top: 50px;
    }

    .menu a, .menu a:link, .menu a:visited, .menu a:hover, .dropbtn {
        font-size: 16px;
        margin-left: 12px;
    }
}

@media only screen and (max-width: 1300px) {
    .payment-plan-box a.button {
        font-size: 18px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .payment-plans a.round-button, .payment-plans a.round-button:link, .payment-plans a.round-button:visited, .payment-plans a.round-button:hover {
        padding-top: 40px !important;
        font-size: 22px !important;
    }

    .partner-profile-box h2 {
        font-size: 24px;
        line-height: 28px;
    }

    .partner-logo {
        max-width: 160px;
    }

    .partner-profile-tier-icon {
        width: 80px;
        height: 80px;
    }

    /** solutions partners page */
    .section.solutions-partner-header-section h1 {
        font-size: 60px;
        line-height: 60px;
    }

    .partner-industry-integration {
        margin-left: 0px;
        margin-right: 0px;
    }

    /** end solutions partners page */

    /*** connector page */

    .connector-rocket {
        margin-right: 0%;
    }

    .request-a-field-row .col-80 {
        flex-basis: 83%;
    }

    .request-a-field-row .col-20 {
        flex-basis: 17%;
    }
    /*** end connector page */
}


@media only screen and (max-width: 1280px) {
    #tugger-header-image {
        width: 576px;
    }

    .active-switch {
        margin-right: 20px;
    }

    .connector-power-bi-template iframe {
        width: 900px;
        height: 540px;
    }

    .cover-image {
        height: 592px;
    }

    .blog-main-feature-text h2 {
        font-size: 38px;
        line-height: 46px;
    }

    /*** DAS 2025 page */

    .section.das-event-header-section h1 {
        font-size: 50px;
        line-height: 56px;
    }

    .section.das-event-header-section p {
        font-size: 28px;
        line-height: 32px;
    }

    /** end DAS 2025 page */

    /** reviews bar */

    #tugger-reviews-woman {
        width: 270px;
        height: 288px;
        margin-left: -80px;
        margin-top: 212px;
    }

    /*end reviews bar */
}

@media only screen and (max-width: 1260px) {
    .payment-plan-box a.button {
        font-size: 16px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .payment-plan-box h3 {
        font-size: 120% !important;
    }

    .payment-plan-box ul {
        padding-left: 0px;
    }

    #filter-pane {
        padding: 5px 20px 20px 20px
    }

    #filter-pane h4 {
        font-size: 17px;
    }

    /** partner pages **/
    .section.partner-get-started-today img {
        height: 250px;
    }

    /*** partner tiers page */
    .partner-tiers-download-section-image {
        height: 580px;
        background-size: auto 75%;
        margin-top: -180px;
    }

    .section.partner-tiers-download-section h2 {
        margin-top: 60px;
    }

    .section.partner-tiers-download-section h2 {
        font-size: 27px;
        line-height: 40px;
    }

    .section.partner-tiers-download-section .col-30 {
        flex-basis: 40%;
    }

    .section.partner-tiers-download-section .col-70 {
        flex-basis: 60%;
    }

    /** reporting portal landing page */
    .reporting-portal-benefits h3 {
        margin-left: 20px;
    }

    .reporting-portal-benefits-right p {
        margin-right: 20px;
    }

    .reporting-portal-benefits-left p {
        margin-left: 20px;
    }
}

@media only screen and (max-width: 1200px) {
    .split-page-left {
        padding-left: 20px;
        padding-right: 20px;
    }

    footer {
        font-size: 16px;
        line-height: 18px;
    }

    footer h5 {
        font-size: 26px;
        line-height: 26px;
        padding-bottom: 20px;
    }

    footer ul li {
        font-size: 16px;
        line-height: 40px;
    }

    a.footer-tugger-logo, nav a.footer-tugger-logo:link, nav a.footer-tugger-logo:visited, nav a.footer-tugger-logo:hover {
        margin-bottom: 20px;
    }

    .terms-links {
        padding-bottom: 20px;
    }

    .terms-links a, .terms-links a:link, .terms-links a:visited, .terms-links a:hover {
        font-size: 16px;
        line-height: 30px;
    }

    .small-footer-text {
        font-size: 16px;
        line-height: 19px;
    }

    .blog-main-feature-text h2 {
        font-size: 34px;
        line-height: 42px;
    }

    .blog-main-feature-text {
        font-size: 18px !important;
        line-height: 36px !important;
    }

    .mailing-list-row .col-35 {
        flex-basis: 30%;
    }

    .mailing-list-row .col-30 {
        flex-basis: 40%;
    }

    /** tugger menu sizing */
    nav a.tugger-logo, nav a.tugger-logo:link, nav a.tugger-logo:visited, nav a.tugger-logo:hover {
        width: 151.9px;
        height: 47px;
        margin-top: 50px;
    }

    .menu a, .menu a:link, .menu a:visited, .menu a:hover, .dropbtn {
        font-size: 15px;
        margin-left: 9px;
    }

    .partner-listing-box .row .col-25 {
        flex-basis: 30%;
    }

    .partner-listing-box .row .col-75 {
        flex-basis: 70%;
    }

    /** solutions partners page */
    .section.solutions-partner-header-section h1 {
        font-size: 50px;
        line-height: 50px;
    }

    .solutions-partner-header-section .col-50:first-child {
        flex-basis: 60%;
    }

    .solutions-partner-header-section .col-50 {
        flex-basis: 40%;
    }

    .section.solutions-partner-header-section p {
        font-size: 22px;
    }

    /*** reporting portal landing page */
    .reporting-portal-landing-header {
        height: 580px;
    }

    .section.reporting-portal-header-section {
        height: 580px;
    }

    /** reviews bar */

    #tugger-reviews-woman {
        display: none;
    }

    /*end reviews bar */
}

@media only screen and (max-width: 1180px) {
    #tugger-header-image {
        width: 450px;
        margin-top: 180px;
    }
}

@media only screen and (max-width: 1150px) {
    .payment-plan-box h3 {
        font-size: 110% !important;
    }

    .payment-plan-box ul li {
        font-size: 12px;
    }

    .payment-plan-box a.button {
        font-size: 12px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    mailing-list-section .row {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .mailing-list-section p {
        font-size: 34px;
        line-height: 42px;
    }

    .mailing-list-section .k-textbox {
        width: 280px !important;
        margin-left: 30px;
        font-size: 26px;
        line-height: 26px;
    }

    .mailing-list-feedback {
        font-size: 20px;
        line-height: 20px;
    }

    #SubscribeMailingListButton {
        margin-left: 25px;
        font-size: 26px;
        line-height: 26px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .mailing-list-section .k-textbox {
        height: 66px;
    }

        .mailing-list-section .k-textbox input.k-input-inner {
            height: 66px;
        }

    .request-a-field-row .col-80 {
        flex-basis: 81%;
    }

    .request-a-field-row .col-20 {
        flex-basis: 19%;
    }
}

@media only screen and (max-width: 1140px) {
    .connector-power-bi-template iframe {
        width: 700px;
        height: 430px;
    }
}

@media only screen and (max-width: 1120px) {
    #tugger-header-image {
        width: 500px;
        height: 500px;
        margin-top: 140px;
    }

    .split-page-right {
        padding-left: 20px;
        padding-right: 20px;
    }

    .split-page-right-logo {
        width: 400px !important;
        height: 134px !important;
    }

    #sign-up-image {
        margin-left: 20px;
    }

    #tuggers .col-25 {
        flex-basis: 50%;
    }

    /*** partner tiers page */
    .section.partner-tiers-download-section h2 {
        padding-bottom: 20px;
    }

    .partner-tiers-download-section-image {
        background-size: 100% auto;
    }
}

@media only screen and (max-width: 1100px) {
    #tugger-header-image {
        width: 450px;
        margin-top: 140px;
    }

    h1.header-h1 {
        max-width: 400px;
        font-size: 36px;
        line-height: 40px;
    }
    h2.strapline {
        max-width: 350px;
    }

    .cover-image {
        height: 492px;
    }

    .blog-item h3 {
        font-size: 30px;
        line-height: 38px;
    }

    .blog-item-text {
        line-height: 32px;
    }

    .blog-image {
        height: 275px;
    }

    .blog-row {
        flex-wrap: wrap;
        gap: 6%;
    }

    .blog-row .col-33 {
        flex-basis: 47%;
    }

    .blog-item-text {
        height: 400px;
    }

    .whitepaper-blog-item .blog-item-text {
        height: 380px;
    }

    .partners-bar h5 {
        font-size: 24px;
        line-height: 24px;
        padding-top: 20px;
    }

    .partners-bar img {
        height: 80px;
    }

    .partner-profile-box.partner-profile-box-main {
        padding: 20px;
    }

    .partner-profile-box h2 {
        font-size: 20px;
        line-height: 24px;
    }

    .partner-logo {
        max-width: 130px;
    }

    .partner-profile-tier-icon {
        width: 70px;
        height: 70px;
    }

    .partner-profile-box h3 {
        font-size: 16px;
        line-height: 20px;
        line-height: 20px;
    }

    /*** partner solutions page */
    .section.solutions-partner-header-section img {
        margin-top: 87px;
    }

    /*** partner ties page */
    .solutions-partner-header-section.partner-tiers-header-section img {
        margin-top: 0px;
    }

    /*** reporting portal landing page */
    .section.reporting-portal-header-section h1 {
        font-size: 55px;
        line-height: 55px;
    }

    .section.reporting-portal-header-section p {
        font-size: 24px;
        line-height: 30px;
    }

    /*** DAS 2025 page */

    .section.das-event-header-section h1 {
        font-size: 40px;
        line-height: 46px;
    }

    .section.das-event-header-section p {
        font-size: 26px;
        line-height: 30px;
    }

    /** end DAS 2025 page */

    /*** connector page */

    .connector-header h1 {
        font-size: 38px;
        line-height: 42px;
    }

    .connector-header img {
        max-width: 300px;
        padding: 40px;
        margin-top: 36px;
    }

    .generic-connector-page .connector-header img {
        max-width: 350px;
    }

    .connector-header .row {
        align-items: start;
    }

    .connector-get-started-section h2 {
        max-width: 540px;
    }

    .connector-get-started-section p {
        max-width: 540px;
    }

    .connector-data-section p {
        font-size: 22px;
        line-height: 30px;
    }

    .request-a-field-row .col-80 {
        flex-basis: 80%;
    }

    .request-a-field-row .col-20 {
        flex-basis: 20%;
    }

    /*** end connector page */

    /*** connector listing page */
    .cl-popular-grid { gap: 20px; }
    .cl-card { width: 280px; }
    /*** end connector listing page */
}

@media only screen and (max-width: 1024px) {
    .blog-content-video {
        height: 700px;
    }
}

@media only screen and (max-width: 1023px) {
    .payment-plan-row {
        flex-wrap: wrap;
    }

    .payment-plan-box {
        min-height: 400px;
    }

    .payment-plan-row .col-25 {
        flex-basis: 50%;
    }

    .mailing-list-section .row {
        flex-wrap: wrap;
    }

    .mailing-list-section .col-50 {
        flex-basis: 100%;
    }

    .mailing-list-section .row {
        padding-top: 40px;
        padding-bottom: 50px;
    }

    .mailing-list-section p {
        text-align: center;
    }

    .mailing-list-subscribe-form {
        max-width: 440px;
        margin: 0 auto;
    }

    .mailing-list-section .k-textbox {
        width: 280px !important;
        margin-left: 0px;
        font-size: 22px;
        line-height: 22px;
        float: none;
    }

    .mailing-list-feedback {
        font-size: 18px;
        line-height: 18px;
    }

    #SubscribeMailingListButton {
        font-size: 22px;
        line-height: 22px;
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .mailing-list-section .k-textbox {
        height: 58px;
    }

        .mailing-list-section .k-textbox input.k-input-inner {
            height: 58px;
        }

    .listing-with-filters.row {
        display: block;
    }

    #filter-pane {
        margin-bottom: 40px;
        display: none;
        margin-right: 0px;
    }

    .listing-with-filters a#show-filter-button,
    .listing-with-filters a#show-filter-button:link,
    .listing-with-filters a#show-filter-button:visited,
    .listing-with-filters a#show-filter-button:hover {
        display: block;
    }

    /*** connector page */

    .row.connector-data-search .col-30 {
        flex-basis: 40%;
    }

    .row.connector-data-search .col-70 {
        flex-basis: 60%;
    }

    .generic-connector-page .connector-header img {
        max-width: 300px;
    }

    /*** end connector page */

    /*** AI Insights Page */
    .ai-insights-header h1 {
        font-size: 36px;
        line-height: 42px;
    }

    .ai-insights-reasons .col-33 {
        flex-basis: 50%;
    }

    .ai-insights-sign-up-button .col-50 {
        padding-bottom: 20px;
    }
    /*** end AI Insights Page */
}

@media only screen and (max-width: 920px) {
    .ai-insights-step-arrow {
        display: none;
    }

    .ai-insights-how-it-works .col-33 {
        flex-basis: 100%;
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 1023px) {

    nav {
        margin-bottom: 0px;
    }

    .menu {
        display: none;
    }

    .account-details {
        display: none;
    }

    a.tugger-logo, a.tugger-logo:link, a.tugger-logo:visited, a.tugger-logo:hover {
        width: 216px;
        height: 47px;
    }

    a#hamburger, a#hamburger:link, a#hamburger:visited, a#hamburger:hover {
        background-image: url("images/hamburger.svg");
        width: 41.5px;
        height: 32px;
        display: block;
        float: right;
        margin-top: 10px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

        a#hamburger:hover {
            opacity: 0.7;
        }

    nav a.tugger-logo, nav a.tugger-logo:link, nav a.tugger-logo:visited, nav a.tugger-logo:hover {
        margin-top: 5px;
    }

    /** reviews bar */
    #reviews-bar .row {
        flex-wrap: wrap;
    }

        #reviews-bar .row .col-20 {
            flex-basis: 25%;
        }

            #reviews-bar .row .col-20:last-child {
                flex-basis: 100%;
                margin-top: 50px;
            }

    #reviews-bar img {
        height: 115px;
    }

    #reviews-bar .row .col-20:last-child img {
        display: inline;
        height: 80px;
        width: auto;
    }

    #reviews-bar .col-20:last-child #capterra-reviews {
        width: auto;
    }

    /*end reviews bar */
}

@media only screen and (max-width: 980px) {
    #tugger-header-image {
        width: 400px;
        height: 450px;
        margin-top: 160px;
    }
}

@media only screen and (max-width: 960px) {
    #tugger-header-image {
        width: 400px;
        height: 450px;
        margin-top: 160px;
    }

    .blog-main-feature .col-66 {
        flex-basis: 50%;
    }

    .blog-main-feature .col-33 {
        flex-basis: 50%;
    }

    .featured-blog-image, .featured-blog-image:link, .featured-blog-image:visited, .featured-blog-image:hover {
        height: 500px;
    }

    .blog-main-feature-text {
        height: 475px;
    }

        .blog-main-feature-text h2 {
            padding-bottom: 30px;
            padding-top: 50px;
        }

    .blog-main-feature-text {
        line-height: 30px !important;
    }

    .blog-tags a, .blog-tags a:link, .blog-tags a:visited, .blog-tags a:hover {
        font-size: 18px;
        padding-left: 15px;
        padding-right: 15px;
        margin-right: 10px;
    }

    blog-content-video {
        height: 650px;
    }

    /*** connector page */

    .connector-report-image {
        width: 669.6px; /*80%*/
        height: 458.4px; /*80%*/
    }

        .connector-report-image img {
            width: 616.8px; /*80%*/
            height: 348px; /*80%*/
            margin-top: 26px;
            margin-left: 27px;
        }
    /*** end connector page */
}


@media only screen and (max-width: 920px) {
    .row {
        flex-wrap: wrap;
    }

    .button-row {
        flex-direction: column-reverse;
    }

        .button-row .col-50 {
            margin-bottom: 40px;
        }

    .col-40, .col-60, .col-50, .col-33 {
        flex-basis: 100%;
    }

    .form-centre-section .row .col-50:first-child {
        padding-right: 0px;
    }

    .form-centre-section .row .col-50:last-child {
        padding-left: 0px;
    }

    h1 {
        font-size: 36px;
        line-height: 46px;
    }

        h1.header-h1 {
            margin-right: 0px;
            max-width: none;
            padding-top: 40px;
            padding-bottom: 20px;
            text-align: center;
        }

    h2.strapline {
        max-width: none;
        text-align: center;
    }

    .nav-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .menu {
        margin-top: 15px;
    }

    .content-area {
        padding-left: 15px;
        padding-right: 15px;
    }

    .section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    #tugger-header-image {
        margin-top: -40px;
        height: 300px;
        margin: 0 auto;
        float: none;
        margin-top: 20px;
        background-position: top center;
    }

    .home-section-header a.button {
        display: block !important;
        margin: 0 auto !important;
        width: 200px !important;
        text-align: center;
    }

    .home-header-list-container {
        margin: 0 auto;
        width: 300px;
    }

    .diagram {
        display: none;
    }

    .mobile-diagram {
        display: flex !important;
    }

    .diagram .diagram-source-row {
        max-width: 500px;
        margin: 0 auto;
    }

        .diagram .diagram-source-row .col-33 {
            flex-basis: 33.33%;
        }

    .demo-icon {
        margin: 0 auto;
    }

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

    .diagram-arrow {
        margin: 0 auto;
        margin-top: 40px;
        transform: rotate(90deg);
    }

        .diagram-arrow.diagram-arrow.final-arrow {
            margin-top: 40px;
            margin-bottom: 40px;
        }

    footer .content-area {
        padding-left: 60px;
        padding-right: 60px;
    }

    .sign-up-page-right, .partner-split-page-right {
        display: none;
    }

    .platform-page .section .row {
        flex-wrap: wrap-reverse;
    }

    .platform-page .section.odd-section .row {
        flex-wrap: wrap;
    }

    .platform-page p {
        max-width: none;
    }

    .security-iso-27001 {
        margin: 0 auto;
    }

    .split-page-left {
        padding-top: 0px;
    }

    .platform-image-col img {
        margin-top: 20px !important;
    }

    footer .col-25, footer .col-30, footer .col-35, .mailing-list-row .col-30 {
        flex-basis: 50%;
        padding-bottom: 40px;
        border-bottom: 1px solid #fff;
        margin-bottom: 40px;
    }

    .mailing-list-row .col-35 {
        flex-basis: 25%;
    }

    .mailing-list-row .col-35 {
        border-bottom: none;
    }

    #footer-social {
        padding-left: 0px;
        padding-bottom: 0px;
    }

    .blog-item-text {
        height: 450px;
    }

    .whitepaper-blog-item .blog-item-text {
        height: 430px;
    }

    .blog-content-video {
        height: 620px;
    }

    .connector-sign-up-button .col-50 {
        padding-bottom: 20px;
    }

    .partner-profile-row .col-25 {
        flex-basis: 100%;
    }

    .partner-profile-row .col-75 {
        flex-basis: 100%;
    }

    .partner-profile-box.partner-profile-box-main {
        margin-left: 0px;
    }

    .partner-profile-box .col-35, .partner-profile-box .col-55 {
        min-height: 200px;
    }

    .partner-profile-box .col-45 {
        flex-basis: 45%;
    }

    .partner-profile-box .col-10 {
        flex-basis: 10%;
    }

    /*** partner landing page */
    .become-a-tugger-partner-section .col-40 {
        flex-basis: 40%;
    }

    .become-a-tugger-partner-section .col-60 {
        flex-basis: 60%;
    }

    .become-a-tugger-partner-section h1 {
        font-size: 50px;
        line-height: 50px;
    }

    .become-a-tugger-partner-section p {
        font-size: 24px;
        line-height: 28px;
        padding-right: 20px;
    }

    .why-partner-with-tugger-section .col-33 {
        flex-basis: 33%;
    }

    .why-partner-with-tugger-section .col-66 {
        flex-basis: 66%;
    }

    .what-kind-of-partner .col-50 {
        flex-basis: 75%;
    }

    .what-kind-of-partner-middle-col {
        display: none;
    }

    .partner-benefits-section .col-33 {
        flex-basis: 33.3333333%;
    }

    .partner-button-row .col-50 {
        flex-basis: 50%;
    }

    .partner-get-started-today .col-50 {
        flex-basis: 50%;
    }

    .section.partner-get-started-today img {
        height: 200px;
    }

    /**** partner solutions page */
    .partner-solutions-signup a.button, .partner-solutions-signup a.button:link, .partner-solutions-signup a.button:visited, .partner-solutions-signup a.button:hover {
        margin-top: -90px;
    }

    /** reporting portal landing page */
    .reporting-portal-benefits.reporting-portal-benefits-right {
        margin-left: 0%;
    }

    .reporting-portal-benefits.reporting-portal-benefits-left {
        margin-right: 0%;
    }

    .reporting-portal-benefits {
        width: auto;
    }

    .section.reporting-portal-header-section h1,
    .section.reporting-portal-header-section h4,
    .section.reporting-portal-header-section p {
        margin-right: 15px;
    }

    .solutions-directory-header-section .row {
        flex-direction: column-reverse;
    }

    .solutions-directory-header-image {
        height: 400px;
    }

    .solutions-directory-page h1 {
        padding-top: 20px;
    }

    .section.solutions-directory-header-section h2 {
        padding-bottom: 20px;
    }

    /*** DAS 2025 page */

    .section.das-event-header-section .row {
        flex-direction: column-reverse;
    }

    .section.das-event-header-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

        .section.das-event-header-section p {
            padding-right: 0px;
        }

        .section.das-event-header-section h1 {
            padding-right: 0px;
        }

    .section.das-demo-benefits h2 {
        max-width: 700px;
        margin: 0 auto;
    }

    .das-demo-benefits p {
        margin-left: auto;
        margin-right: auto;
        max-width: 270px;
    }

    /** end DAS 2025 page */

    /** start upcoming event banner */
    #upcoming-event-banner .row {
        flex-wrap: nowrap;
    }

    #upcoming-event-banner .col-10 {
        flex-basis: 10%;
    }

    #upcoming-event-banner .col-60 {
        flex-basis: 60%;
    }

    #upcoming-event-banner .col-30 {
        flex-basis: 30%;
    }

    /** end upcoming event banner */

    /*** connector page */

    .connector-header .col-50 {
        flex-basis: 50%;
    }

    .connector-sign-up-button .col-50 {
        flex-basis: 50%;
    }

    .connector-reasons-to-tug .col-33 {
        flex-basis: 50%;
    }

    .connector-data-section .col-60 {
        flex-basis: 60%;
    }

    .connector-data-section .col-40 {
        flex-basis: 40%;
    }

    .connector-alt-reports-section .col-50 {
        flex-basis: 50%;
    }

    .connector-request-a-connector-section .col-80 {
        flex-basis: 70%;
    }

    .connector-request-a-connector-section .col-20 {
        flex-basis: 30%;
    }

    .connector-sign-up-rocket-buttons .col-50 {
        flex-basis: 50%;
    }

    .connector-story-box h4 {
        height: auto;
        padding-bottom: 10px;
    }

    .request-a-field-row .col-80 {
        flex-basis: 78%;
    }

    .request-a-field-row .col-20 {
        flex-basis: 22%;
    }
    
    /*** end connector page */

    .login-page h1  {
        margin-top: 40px;
    }
}

@media only screen and (max-width: 830px) {
    .blog-content-video {
        height: 560px;
    }
}

@media only screen and (max-width: 800px) {
    .connector-power-bi-template iframe {
        width: 540px;
        height: 330px;
    }

    .blog-main-feature .row {
        flex-wrap: wrap;
    }

    .blog-main-feature .col-66 {
        flex-basis: 100%;
    }

    .blog-main-feature .col-33 {
        flex-basis: 100%;
    }

    .blog-main-feature-text {
        margin-left: 10px;
        margin-top: 10px;
    }

    .blog-main-feature-text {
        height: auto;
        margin-bottom: 20px;
    }

    a.main-feature-read-more {
        margin-left: 10px;
    }

    .featured-blog-image, .featured-blog-image:link, .featured-blog-image:visited, .featured-blog-image:hover {
        height: 260px;
    }

    .blog-row .col-33 {
        flex-basis: 100%;
    }

    .blog-image {
        height: 260px;
    }

    .blog-item-text, .whitepaper-blog-item .blog-item-text {
        height: auto;
        margin-bottom: 30px;
    }

    .whitepaper-banner {
        transform: skewY(-10deg);
    }

    .partner-listing-box .row .col-25 {
        flex-basis: 100%;
        border-bottom: 2px solid #ddeff8;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .partner-listing-box .row .col-75 {
        flex-basis: 100%;
    }

    .partner-listing-vertical-line {
        display: none;
    }

    .partner-tier-listing-content {
        padding: 10px 20px 20px 20px;
    }

        .partner-tier-listing-content a.button.small-button,
        .partner-tier-listing-content a.button.small-button:link,
        .partner-tier-listing-content a.button.small-button:visited,
        .partner-tier-listing-content a.button.small-button:hover {
            display: block;
            max-width: 180px;
            margin: 0 auto;
        }

    /*** partner solutions page */
    .partner-industry-integration h3 {
        padding-top: 15px;
        margin-top: 0px;
    }

    .row.request-a-field-row {
        max-width: 500px;
        margin: 0 auto;
    }

    .request-a-field-row .col-80 {
        flex-basis: 50%;
    }

    .request-a-field-row .col-20 {
        flex-basis: 50%;
    }

    .mcp-guide-card {
        flex: 1 1 calc(33.333% - 14px);
    }

    /*** connector listing page */
    .cl-hero h1 { font-size: 32px; line-height: 38px; margin-right: 20px; }
    .cl-hero p { font-size: 18px; line-height: 26px; margin-right: 20px; }
    .cl-tool-strip { gap: 20px; }
    .cl-tool-strip-item img { width: 54px; height: 54px; }
    .cl-category-tabs { gap: 6px; }
    .cl-category-tab { padding: 8px 14px; font-size: 14px; }
    .cl-card { width: 100%; max-width: 310px; }
    .cl-popular-grid, .cl-connector-grid, .cl-coming-soon-grid { justify-content: center; }
    .cl-category-heading { font-size: 22px; }
    .cl-category-group { padding: 0 10px; }
    /*** end connector listing page */
}

@media only screen and (max-width: 799px) {
    /*** connector page */

    .connector-dive-into-data-intro {
        flex-direction: column-reverse;
    }

    .connector-dive-into-data-intro .col-60, .connector-dive-into-data-intro .col-40 {
        flex-basis: 100%;
    }

    .connector-data-section h2 {
        padding-bottom: 0px;
        margin-bottom: 0px;
        text-align: center;
    }

    .connector-data-section p {
        font-size: 18px;
        line-height: 26px;
    }

    .connector-data-section-image {
        height: 200px;
        width: 150px;
        margin-top: 40px;
    }

    .connector-data-search {
        margin-top: 30px;
    }

    .row.connector-data-search .col-30 {
                flex-basis: 100%;
    }

    .connector-data-search .connector-data-field-div {
        margin-right: 00px;
    }

    .connector-header .row {
        flex-direction: column-reverse;
    }

    .connector-header .col-50 {
        flex-basis: 100%;
        width: 100%;
    }

    .connector-header .col-50:last-child {
        text-align: center;
    }

    .connector-header .connector-logo {
        margin-top: 0px;
        max-width: 200px;
    }

    .connector-header h1 {
        margin-right: 0px;
        text-align: center;
    }

    .connector-header p {
        margin-right: 0px;
        text-align: center;
    }

    .connector-data-sets {
        margin-right: 10px;
    }

    /*** end connector page */

    /*** AI Insights Page */
    .ai-insights-header .row {
        flex-direction: column-reverse;
    }

    .ai-insights-header .col-55,
    .ai-insights-header .col-45 {
        flex-basis: 100%;
        width: 100%;
    }

    .ai-insights-header .col-45 {
        text-align: center;
        margin-bottom: 30px;
    }

    .ai-insights-header h1 {
        margin-right: 0px;
        text-align: center;
        font-size: 32px;
        line-height: 38px;
    }

    .ai-insights-header p {
        margin-right: 0px;
        text-align: center;
    }

    .ai-insights-sign-up-button .row {
        flex-direction: column-reverse;
    }

    .ai-insights-header {
        padding-bottom: 250px;
    }

    .ai-insights-sign-up-button {
        margin-top: -280px;
    }

    .ai-insights-sign-up-button .col-50 {
        flex-basis: 100%;
        padding-bottom: 20px;
    }

    .ai-insights-what-is .row {
        flex-direction: column;
    }

    .ai-insights-what-is .col-60,
    .ai-insights-what-is .col-40 {
        flex-basis: 100%;
        width: 100%;
    }

    .ai-insights-what-is h2 {
        text-align: center;
    }

    .ai-insights-what-is p {
        max-width: none;
        text-align: center;
    }

    .ai-insights-compatible-with {
        text-align: center;
    }

    .ai-insights-compatible-logos {
        justify-content: center;
    }

    .ai-insights-info-flow {
        margin-top: 30px;
    }

    .ai-insights-reasons .col-33 {
        flex-basis: 100%;
    }

    .ai-insights-query-prompt {
        flex: 1 1 100%;
        max-width: none;
    }

    /*** end AI Insights Page */
}

@media only screen and (max-width: 760px) {
    /*** partner landing page */
    .become-a-tugger-partner-section h1 {
        font-size: 40px;
        line-height: 40px;
    }

    .become-a-tugger-partner-section p {
        font-size: 20px;
        line-height: 24px;
    }

    .why-partner-with-tugger-section h2 {
        padding-left: 40px;
    }

    .why-partner-with-tugger-section p {
        padding-left: 40px;
    }

    .partner-benefits-section .col-33 {
        flex-basis: 100%;
    }

    .what-kind-of-partner .row {
        display: block;
    }

    .what-kind-of-partner .col-25 {
        float: left;
    }

    .what-kind-of-partner img {
        max-width: 320px;
        margin-top: 70px;
    }

    .what-kind-of-partner .col-100 {
        padding-bottom: 0px;
    }

    .partner-benefit h3 {
        text-align: center;
    }
    .partner-benefit p {
        text-align: center;
    }

    .partner-benefits-image {
        background-position: center center;
    }

    .section.partner-get-started-today .col-left a.round-button, .section.partner-get-started-today .col-left a.round-button:link, .section.partner-get-started-today .col-left a.round-button:visited, .section.partner-get-started-today .col-left a.round-button:hover {
        margin-right: 25px;
    }

    .partner-get-started-today a.round-button, .partner-get-started-today a.round-button:link, .partner-get-started-today a.round-button:visited, .partner-get-started-today a.round-button:hover {
        margin-left: 25px;
    }

    .section.partner-get-started-today img {
        height: 160px;
    }

    /*** partners solutions page */
    .section.solutions-partner-header-section p {
        font-size: 20px;
    }

    .section.reporting-portal-header-section h1 {
        font-size: 50px;
        line-height: 50px;
    }

    .section.reporting-portal-header-section h4 {
        font-size: 35px;
        line-height: 38px;
    }

    .section.reporting-portal-header-section p {
        font-size: 22px;
        line-height: 28px;
    }

    .reporting-portal-landing-header {
        background-size: auto 75%;
    }

    /** partner tiers page */
    .section.partner-tiers-download-section .col-30,
    .section.partner-tiers-download-section .col-70 {
        flex-basis: 100%;
    }

    .section.partner-tiers-download-section h2 {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .partner-tiers-download-section-image {
        height: 460px;
        background-size: auto 100%;
        background-position: bottom center;
        margin-top: 40px;
    }

    /*** connector page */

    .connector-rocket {
        width: 203.2px;
        height: 388.8px;
        background-size: 203.2px 388.8px;
        margin-top: -270px;
    }

    .connector-get-started-section h2, .connector-get-started-section p {
        max-width: none;
    }

    .connector-page-rocket-clouds {
        margin-top: 0px;
    }

    /*** end connector page */
}

@media only screen and (max-width: 720px) {
    .mailing-list-row .col-30 {
        flex-basis: 100%;
    }
    .mailing-list-row .col-35 {
        display: none;
    }

    .blog-content-video {
        height: 500px;
    }

    /* partner solutions page */

    .solutions-partner-header-section .col-50 {
        flex-basis: 100%;
    }

    .solutions-partner-header-section .row {
        flex-direction: column-reverse;
    }

    .section.solutions-partner-header-section img {
        margin-top: 0px;
        max-width: 500px;
    }

    .section.solutions-partner-header-section h1 {
        padding-top: 40px;
    }

    .section.solutions-partner-header-section p {
        margin-right: 0px;
    }

    .partner-industry-integration-icon {
        margin-right: 20px;
    }

    .partner-industry-integration h3 {
        font-size: 21px;
        padding-top: 5px;
    }

    .section.partner-industry-integration-section p {
        font-size: 19px;
    }

    /*** partner tiers page */
    .solutions-partner-header-section.partner-tiers-header-section img {
        max-width: 400px;
    }

    /*** connector page */

    .connector-request-a-connector-section h2 {
        margin-right: 0px;
    }

    .connector-request-a-connector-section p {
        margin-right: 0px;
    }

    .connector-request-a-connector-section .col-80 {
        flex-basis: 50%;
    }

    .connector-request-a-connector-section .col-20 {
        flex-basis: 50%;
    }

    .connector-request-a-connector-section a.round-button, .connector-request-a-connector-section a.round-button:link, .connector-request-a-connector-section a.round-button:visited, .connector-request-a-connector-section a.round-button:hover {
        margin: 0 auto;
        display: block;
    }

    .connector-data-section {
        display: none;
    }

    .connector-request-a-connector-section {
        margin-top: -1px;
        padding-top: 100px;
    }

    /** following due to hiding dive into data section*/
    a.button.connector-all-stories-button, a.button.connector-all-stories-button:link, a.button.connector-all-stories-button:visited, a.button.connector-all-stories-button:hover {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 440px;
        font-size: 22px;
        line-height: 27px;
    }

    /** end connector page */
}

@media only screen and (max-width: 710px) {
    /** start upcoming event banner */

    #upcoming-event-banner p {
        text-align: center;
    }

    #upcoming-event-banner .row {
        flex-wrap: wrap;
    }

        #upcoming-event-banner .row .col-10 {
            flex-basis: 100%;
        }

    #upcoming-event-banner .row .col-60 {
        flex-basis: 100%;
    }

    #upcoming-event-banner .row .col-30 {
        flex-basis: 100%;
    }

    .upcoming-event-section {
        max-width: 400px;
    }

    #upcoming-event-banner a.button, #upcoming-event-banner a.button:link, #upcoming-event-banner a.button:visited, #upcoming-event-banner a.button:hover {
        margin: 20px auto 20px auto;
        width: 50%;
    }

    #upcoming-event-icon {
        margin: 5px auto 20px auto;
    }

    /** end upcoming event banner */

    /*** connector page */

    .connector-report-image {
        width: 468.72px; /*70%*/
        height: 320.88px; /*70%*/
    }

        .connector-report-image img {
            width: 431.76px; /*70%*/
            height: 243.6px; /*70%*/
            margin-top: 18px;
            margin-left: 18px;
        }

    /*** end connector page */
}

@media only screen and (max-width: 680px) {
    #tuggers .col-25 {
        flex-basis: 100%;
    }

    .partner-listing .row .col-33 {
        flex-basis: 100%;
    }

    /*** partner tiers page */
    .programme-benefits-and-features-section th {
        font-size: 11px;
        line-height: 15px;
        padding: 3px 3px;
    }

    .programme-benefits-and-features-section td {
        font-size: 11px;
        line-height: 15px;
        padding: 3px 3px;
    }

    .partner-benefit-tick {
        width: 11px;
        height: 11px;
    }

    /** reporting portal landing page */
    .section.reporting-portal-header-section {
        height: auto;
    }

    .reporting-portal-header-section .row {
        flex-direction: column-reverse;
        flex-wrap: wrap;
    }

    .reporting-portal-header-section .col-45 {
        flex-basis: 100%;
        width: 100%;
    }

    .reporting-portal-header-section .col-55 {
        flex-basis: 100%;
    }

    .reporting-portal-header-section .content-area {
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0px;
    }

    .reporting-portal-landing-header {
        background-size: auto 100%;
        background-position: right bottom;
        height: 400px;
    }

    .section.reporting-portal-header-section h1, .section.reporting-portal-header-section h4, .section.reporting-portal-header-section p {
        padding-left: 15px;
        padding-right: 15px;
    }

    .reporting-portal-benefits-section h2 {
        text-align: center;
    }

    .reporting-portal-benefits-right .row {
        flex-direction: column-reverse;
    }

    .reporting-portal-benefits .row .col-25 {
        flex-basis: 100%;
        height: 0px;
        width: 100%;
        padding-top: 200px;
    }

    .reporting-portal-benefits .col-75 {
        flex-basis: 100%;
        width: 100%;
    }

    .reporting-portal-benefits h3 {
        text-align: center;
        margin-left: 0px;
    }

    .reporting-portal-benefits-left p {
        text-align: center;
        margin-left: 0px;
    }

    /*** connector page */

    .connector-sign-up-button .row {
        flex-direction: column-reverse;
    }

    .connector-header {
        padding-bottom: 250px;
    }

    .connector-sign-up-button {
        margin-top: -280px;
    }

    .connector-sign-up-button .col-50 {
        flex-basis: 100%;
    }

    .connector-sign-up-rocket-buttons {
        max-width: 300px;
        margin: 0 auto;
    }

    .connector-sign-up-rocket-buttons .col-50:first-child {
        padding-bottom: 30px;
    }

    .connector-page-rocket-clouds {
        height: 75px;
        background-size: auto 75px;
    }

    .connector-rocket {
        margin-top: -320px;
    }

    /*** end connector page */

    /** reviews bar */
    #reviews-bar .row {
        display: block;
    }

    #reviews-bar img {
        height: 100px;
        display: inline;
    }

    /*end reviews bar */

    /*** testimonials */

    .testimonials .blog-quote {
        font-size: 18px;
        line-height: 24px;
       
    }

    .testimonials .blog-quote-text {
        margin-left: 10px;
        margin-right: 10px;
    }

    .testimonials .testimonial {
        margin-left: 5px;
        margin-right: 5px;
    }

    .testimonials .blog-quote-swish {
        width: 60px;
        margin-right: 30px;
    }

    /*** end testimonials */
}

@media only screen and (max-width: 620px) {
    #tugger-menu a, #tugger-menu a:link, #tugger-menu a:visited, #tugger-menu a:hover {
        margin-right: 10px;
    }

    #tugger-menu span.menu-line {
        margin-right: 10px;
    }

    .connector-power-bi-template iframe {
        width: 440px;
        height: 280px;
    }

    footer .col-25, footer .col-30, .mailing-list-row .col-35 {
        flex-basis: 100%;
    }

    .cover-image {
        height: 392px;
    }

    .blog-content h1 {
        font-size: 36px;
        line-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .blog-content {
        font-size: 20px;
        line-height: 25px;
    }

        .blog-content img {
            margin-bottom: 40px;
        }

    .blog-text {
        margin-bottom: 40px;
    }

    .youtube-video {
        height: 400px;
    }

    .blog-content-video {
        height: 450px;
    }

    /** partner solutions page */
    .partner-industry-integration h3 {
        text-align: center;
        font-size: 23px;
        padding-top: 20px;
    }

    .partner-industry-integration-icon {
        float: none;
        margin: 0 auto;
        margin-top: 20px;
    }

    .partner-industry-integration {
        height: auto;
        border-radius: 40px;
    }

    .section.partner-industry-integration-section p {
        text-align: center !important;
        margin-right: 20px;
        margin-left: 20px;
    }

    .partner-industry-integration-section .desktop-button {
        display: none !important;
    }

    .partner-industry-integration-section .mobile-button {
        display: block !important;
    }

    /** reporting portal landing page */
    .reporting-portal-get-started h2 {
        text-align: center;
    }

    .reporting-portal-get-started .col-45 {
        flex-basis: 100%;
    }

    .reporting-portal-get-started .col-55 {
        flex-basis: 100%;
    }

    .reporting-portal-get-started p {
        text-align: center;
    }

    .reporting-portal-getting-started-image {
        margin-top: 40px;
    }

    /** partner tiers page */
    .partner-tiers-download-section-image {
        height: 360px;
    }

    /*** DAS 2025 page */

    .reporting-portal-get-started.event-demo-section .reporting-portal-getting-started-image {
        margin-top: 40px;
    }

    .reporting-portal-getting-started-image {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    .das-calendar.meetings-iframe-container {
        margin-top: 40px;
    }

    /** end DAS 2025 page */

    /*** connector page */

    .connector-two-ways-boxes .col-50 {
        flex-basis: 100%;
        padding: 0 0 20px 0;
    }

    .connector-reasons-to-tug .row .col-33 {
        flex-basis: 100%;
    }

    .connector-request-a-connector-section .col-80 {
                flex-basis: 100%;
    }

    .connector-request-a-connector-section .col-20 {
        flex-basis: 100%;
    }


    /*** end connector page */

    .mcp-guide-card {
        flex: 1 1 calc(50% - 10px);
    }

}

@media only screen and (max-width: 540px) {
    .active-switch {
        float: none;
        margin: 0 auto;
        margin-top: 20px;
        width: 125px;
        text-align: center;
    }

    #tugger-menu {
        height: 84px;
    }

        #tugger-menu .nav-content {
            text-align: center;
        }

    .cover-image {
        height: 260px;
    }

    .partners-bar .col-25 {
        flex-basis: 100%;
    }

    .blog-quote-job-title, .blog-quote-company {
        font-size: 13px;
        line-height: 16px;
        float: right;
    }

    .blog-quote-company {
        margin-top: 5px;
    }

    .blog-quote-swish {
        margin-left: 10px;
    }

    .blog-quote-company-at {
        display: none;
    }

    .partner-profile-box .col-35, .partner-profile-box .col-55 {
        min-height: 0px;
        flex-basis: 100%;
    }

    .partner-profile-box .partner-logo {
        margin: 0 auto;
        width: 260px;
        max-width: none;
        margin-bottom: 20px;
    }

    .partner-profile-tier-icon {
        margin-left: 10px;
        margin-bottom: 30px;
        height: 75px;
        width: 75px;
    }

    .partner-profile-box h2 {
        clear: none;
    }

    .partner-profile-box a.small-button, .partner-profile-box a:link.small-button, .partner-profile-box a:visited.small-button, .partner-profile-box a:hover.small-button {
        clear: both;
    }

    .partner-profile-box .col-45 {
        flex-basis: 100%;
    }

    .partner-profile-box .col-10 {
        display: none;
    }

    .partner-profile-box h3 {
        font-size: 19px;
        line-height: 23px;
    }

    .partner-profile-box.partner-profile-box-main {
        padding-top: 0px;
    }

    /*** partner landing page */
    .become-a-tugger-partner-section img {
        float: none;
    }

    .become-a-tugger-partner-section .row {
        flex-direction: column-reverse;
    }

    .become-a-tugger-partner-section .col-60 {
        flex-basis: 100%;
        margin-top: -40px;
        background-color: #EFEFEF;
    }

    .become-a-tugger-partner-section .col-40 {
        flex-basis: 100%;
    }

    .become-a-tugger-partner-section .content-area {
        padding-left: 0px;
    }

    .become-a-tugger-partner-section h1 {
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 40px;
        margin-bottom: 0px;
    }

    .become-a-tugger-partner-section p {
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 40px;
    }

    .why-partner-with-tugger-section .col-33 {
        flex-basis: 100%;
    }

    .why-partner-with-tugger-section .col-66 {
        flex-basis: 100%;
    }

    .why-partner-with-tugger-section img {
        width: 75%;
        display: block;
        margin: 0 auto;
    }

    .why-partner-with-tugger-section h2 {
        padding-left: 0px;
    }

    .why-partner-with-tugger-section p {
        padding-left: 0px;
    }

    .what-kind-of-partner .col-25 {
        float: none;
    }

    .section.partner-get-started-today .col-left a.round-button, .section.partner-get-started-today .col-left a.round-button:link, .section.partner-get-started-today .col-left a.round-button:visited, .section.partner-get-started-today .col-left a.round-button:hover {
        margin-right: 10px;
        width: 130px;
        height: 115px;
        padding: 35px 10px 0px 10px;
        font-size: 19px;
    }

    .partner-get-started-today a.round-button, .partner-get-started-today a.round-button:link, .partner-get-started-today a.round-button:visited, .partner-get-started-today a.round-button:hover {
        margin-left: 10px;
        width: 130px;
        height: 115px;
        padding: 35px 10px 0px 10px;
        font-size: 19px;
    }

    .section.partner-get-started-today img {
        height: 100px;
    }

    /*** partner tiers page */
    .solutions-partner-header-section.partner-tiers-header-section img {
        max-width: 280px;
    }

    /*** connector page */

    .tugger-big-bullet {
        width: 75px;
        height: 75px;
    }

    .connector-report-features .col-25 {
        flex-basis: 22%;
    }

    .connector-report-features .col-75 {
        flex-basis: 78%;
    }
    
    /*** end connector page */

    /*** connector listing page */
    .cl-hero .row { flex-direction: column-reverse; }
    .cl-hero > .content-area { padding-right: 20px; padding-left: 20px; }
    .cl-hero .col-55, .cl-hero .col-45 { flex-basis: auto; width: 100%; }
    .cl-hero .col-45 { max-height: 200px; overflow: hidden; margin-left: -20px; margin-right: -20px; width: calc(100% + 40px); }
    .cl-hero-image {
        width: 100%; max-width: 100%; height: 200px; object-fit: cover; object-position: center top;
        border-radius: 0;
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, transparent 100%);
        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, transparent 100%);
    }
    .cl-hero h1 { margin-right: 0; text-align: center; font-size: 24px; line-height: 30px; padding-bottom: 8px; }
    .cl-hero p { margin-right: 0; text-align: center; font-size: 15px; line-height: 22px; padding-bottom: 8px; }
    .cl-tool-strip { justify-content: center; gap: 15px; }
    .cl-tool-strip-item img { width: 40px; height: 40px; }
    .cl-tool-strip-item span { font-size: 11px; }
    .cl-search-input { font-size: 16px; }
    .cl-category-tab { padding: 6px 12px; font-size: 13px; }
    .cl-popular-section h2 { font-size: 26px; }
    .cl-coming-soon h2 { font-size: 26px; }
    /*** end connector listing page */
}

@media only screen and (max-width: 500px) {
    #tugger-header-image {
        height: 250px;
        width: 350px;
    }

    nav a.tugger-logo, nav a.tugger-logo:link, nav a.tugger-logo:visited, nav a.tugger-logo:hover {
        width: 150.525px;
        height: 43.875px;
    }

    .menu {
        margin-top: 2px;
    }

    .menu a, .menu a:link, .menu a:visited, .menu a:hover {
        font-size: 14px;
        line-height: 18px;
        margin-left: 10px;
    }

    a#hamburger, a#hamburger:link, a#hamburger:visited, a#hamburger:hover {
        margin-top: 12px;
    }

    .connector-power-bi-template iframe {
        width: 300px;
        height: 200px;
    }

    .payment-plan-box {
        min-height: 400px;
    }

    .payment-plan-row .col-25 {
        flex-basis: 100%;
    }

    footer .content-area {
        padding-left: 10px;
        padding-right: 10px;
    }

    .mailing-list-section .k-textbox {
        width: 215px !important;
        margin-left: 0px;
        font-size: 22px;
        line-height: 22px;
    }

    #SubscribeMailingListButton {
        margin-left: 0px;
    }

    .blog-content-video {
        height: 400px;
    }

    .connector-logo {
        height: 80px;
    }

    .terms-table td, .terms-table th {
        font-size: 14px;
    }

    .solutions-directory-header-image {
        height: 300px;
    }

    .solutions-directory-page h1 {
        line-height: 34px;
        font-size: 30px;
        padding-top: 10px;
    }

    .section.solutions-directory-header-section h2 {
        padding-bottom: 0px;
        line-height: 28px;
        font-size: 24px;
    }

    /*** connector page */

    .connector-report-image {
        width: 328.104px; /*70%*/
        height: 224.616px; /*70%*/
    }

        .connector-report-image img {
            width: 302.232px; /*70%*/
            height: 170.52px; /*70%*/
            margin-top: 13px;
            margin-left: 13px;
        }

    a.button.connector-all-stories-button, a.button.connector-all-stories-button:link, a.button.connector-all-stories-button:visited, a.button.connector-all-stories-button:hover {
        max-width: 350px;
        font-size: 19px;
        line-height: 24px;
    }

    .connector-sign-up-rocket-buttons {
        margin: 0px 0px 0px 20px;
    }

    .connector-rocket {
        width: 162.56px;
        height: 311.04px;
        background-size: 162.56px 311.04px;
        margin-top: -260px;
    }

    /*** end connector page */

    .payment-plans .payment-plan-box {
        margin-left: 10px;
        margin-right: 10px;
    }
}

@media only screen and (max-width: 440px) {
    #tugger-header-image {
        height: 200px;
        width: 250px;
    }

    .youtube-video {
        height: 300px;
    }

    .blog-content-video {
        height: 350px;
    }

    .blog-quote-name {
        margin-top: 5px;
    }

    .blog-quote-job-title, .blog-quote-company {
        max-width: 180px;
    }

    /** partner tiers page */
    .partner-tiers-download-section-image {
        height: 280px;
    }

    /*** connector page */

    .tugger-big-bullet {
        width: 50px;
        height: 50px;
    }

    .connector-report-features .col-25 {
        flex-basis: 20%;
    }

    .connector-report-features .col-75 {
        flex-basis: 80%;
    }

    /*** end connector page **/
}

@media only screen and (max-width: 400px) {
    .blog-content-video {
        height: 300px;
    }

    /*** reporting portal landing page */
    .reporting-portal-landing-header {
        height: 300px;
    }

    /** partner tiers page */
    .partner-tiers-download-section-image {
        height: 260px;
    }

    /** start upcoming event banner */

    .upcoming-event-section {
        max-width: 295px;
    }

    #upcoming-event-banner a.button, #upcoming-event-banner a.button:link, #upcoming-event-banner a.button:visited, #upcoming-event-banner a.button:hover {
        width: 75%;
    }

    /** end upcoming event banner */

    /*** connector page */

    .connector-sign-up-rocket-buttons {
        margin: 0px;
    }

    /*** end connector page **/
}

/* Kendo TabStrip overrides */

.k-tabstrip-items {
    text-transform: none;
}

.k-tabstrip-items .k-link {
    font-size: 18px;
    font-family: 'Source Sans Pro';
    padding-block: 10px;
    padding-inline: 20px;
}

.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.12);
}

.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:last-child {
    border-right: none;
}

.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:first-child {
    border-top-left-radius: 8px;
}

.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:last-child {
    border-top-right-radius: 8px;
}

/* Unselected tab colour */
.k-tabstrip-items-wrapper .k-item {
    color: #888;
}

.k-tabstrip-items-wrapper .k-item:hover,
.k-tabstrip-items-wrapper .k-item.k-hover {
    color: #555;
}

/* Active tab indicator colour */
.k-tabstrip-items-wrapper .k-item.k-active::after {
    border-color: #555;
}

.k-tabstrip-content,
.k-tabstrip > .k-content {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    font-size: 16px;
    font-family: 'Source Sans Pro';
}

/* Kendo PanelBar overrides */

.k-panelbar > .k-panelbar-header > .k-link {
    color: #fff;
    background-color: #35A8E0;
    font-size: 18px;
    font-family: 'Source Sans Pro';
}

.k-panelbar .k-panelbar-content {
    font-size: 16px;
    font-family: 'Source Sans Pro';
}

.k-panelbar > .k-panelbar-header > .k-link .k-icon,
.k-panelbar > .k-panelbar-header > .k-link .k-panelbar-item-icon {
    color: #fff;
}

.k-panelbar > .k-panelbar-header > .k-link:hover,
.k-panelbar > .k-panelbar-header > .k-link.k-hover {
    background-color: #2e8fbe;
    color: #fff;
}

.k-panelbar > .k-panelbar-header > .k-link:focus,
.k-panelbar > .k-panelbar-header > .k-link.k-focus {
    background-color: #2e8fbe;
    color: #fff;
}

.k-panelbar > .k-panelbar-header > .k-link:focus:hover,
.k-panelbar > .k-panelbar-header > .k-link.k-focus.k-hover {
    background-color: #2e8fbe;
    color: #fff;
}

.k-panelbar > .k-panelbar-header > .k-link.k-selected {
    color: #fff;
    background-color: #2a7fa8;
}

.k-panelbar > .k-panelbar-header > .k-link.k-selected:hover,
.k-panelbar > .k-panelbar-header > .k-link.k-selected.k-hover {
    background-color: #2a7fa8;
    color: #fff;
}

.k-panelbar > .k-panelbar-header > .k-link.k-selected:focus,
.k-panelbar > .k-panelbar-header > .k-link.k-selected.k-focus {
    background-color: #2a7fa8;
    color: #fff;
}

.k-panelbar > .k-panelbar-header > .k-link.k-selected:hover:focus,
.k-panelbar > .k-panelbar-header > .k-link.k-selected.k-hover.k-focus {
    background-color: #2a7fa8;
    color: #fff;
}

.k-panelbar > .k-panelbar-header > .k-link.k-selected .k-icon,
.k-panelbar > .k-panelbar-header > .k-link.k-selected .k-panelbar-item-icon {
    color: #fff;
}

.k-panelbar > .k-panelbar-header:first-child > .k-link {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.k-panelbar > .k-panelbar-header:last-child > .k-link {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Kendo Dialog/Window overrides */

.k-window-titlebar {
    background-color: #35A8E0;
    color: #fff;
    font-family: 'Source Sans Pro';
}

.k-window-title {
    font-family: 'Source Sans Pro';
    color: #fff;
}

.k-window-titlebar .k-window-titlebar-action {
    color: #fff;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: none !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.k-window-titlebar .k-window-titlebar-action::before,
.k-window-titlebar .k-window-titlebar-action::after {
    display: none !important;
}

.k-window-titlebar .k-window-titlebar-action:hover,
.k-window-titlebar .k-window-titlebar-action.k-hover,
.k-window-titlebar .k-window-titlebar-action:focus,
.k-window-titlebar .k-window-titlebar-action.k-focus,
.k-window-titlebar .k-window-titlebar-action:active,
.k-window-titlebar .k-window-titlebar-action.k-active {
    color: #3C3C3B;
    background: none !important;
    box-shadow: none !important;
}

.k-window-content,
.k-dialog .k-window-content {
    font-size: 18px;
    font-family: 'Source Sans Pro';
}

.k-notification-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

/* Kendo notifications (e.g. connector manual refresh, partner record save): larger and bolder so they stand out */
.k-notification {
    min-width: 380px;
    max-width: calc(100vw - 40px);
    padding: 16px 22px;
    border-radius: 8px;
    border-width: 1px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
}

.k-notification .k-notification-content {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.k-notification-error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.optional-table-sub-option {
    margin-left: 30px;
    padding: 5px 0;
}

.optional-table-warning {
    color: #b45309;
    font-size: 0.9em;
    margin: 4px 0 0 0;
}

/* =====================================================
   ONBOARDING WIZARD STYLES
   ===================================================== */

.wiz-body {
    background-color: #f8f9fa;
    min-height: 100vh;
}

/* Hide help column and make form full width during onboarding connector setup */
/* Hide integration menu during onboarding connector setup */
.wiz-body #tugger-menu {
    display: none;
}

.wiz-content > .row > .col-50:last-child {
    display: none;
}

.wiz-content > .row > .col-50:first-child {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 900px;
    margin: 0 auto;
    float: none;
}

.wiz-body .button-row .k-button,
.wiz-body .button-row .k-button:hover,
.wiz-body .button-row .k-button.k-button-solid-base,
.wiz-body .button-row .k-button.k-button-solid-base:hover {
    background-color: #35A8E0 !important;
    color: #fff !important;
    font-weight: bold !important;
    font-size: 26px !important;
    line-height: 31px !important;
    padding: 20px !important;
    border-radius: 30px !important;
    box-shadow: none !important;
    border: none !important;
    text-transform: none !important;
    box-sizing: border-box;
    text-align: center;
}

.wiz-body .button-row .k-button .k-button-text {
    font-size: 26px !important;
    font-weight: bold !important;
    color: #fff !important;
}

.wiz-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wiz-header {
    padding: 24px 0 0 0;
    text-align: center;
}

.wiz-logo {
    display: inline-block;
    background-image: url("images/tugger@2x.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 160px;
    height: 47px;
}

.wiz-content {
    width: 100%;
    max-width: 900px;
    padding: 0 20px 60px 20px;
}

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

/* Progress indicator */
.wiz-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 32px 0 40px 0;
    gap: 0;
}

.wiz-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 70px;
}

.wiz-progress-step span {
    font-size: 12px;
    color: #9ca3af;
}

.wiz-progress-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    background-color: #e5e7eb;
    color: #9ca3af;
}

.wiz-progress-active .wiz-progress-circle {
    background-color: #2563eb;
    color: #fff;
}

.wiz-progress-active span {
    color: #2563eb;
    font-weight: 600;
}

.wiz-progress-complete .wiz-progress-circle {
    background-color: #16a34a;
    color: #fff;
}

.wiz-progress-complete span {
    color: #16a34a;
}

.wiz-progress-line {
    width: 48px;
    height: 2px;
    background-color: #e5e7eb;
    margin: 0 4px;
    margin-bottom: 22px;
}

.wiz-progress-line-complete {
    background-color: #16a34a;
}

/* Headings */
.wiz-heading {
    font-size: 36px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 12px 0;
}

.wiz-subheading {
    font-size: 20px;
    color: #6b7280;
    margin: 0 0 32px 0;
    line-height: 1.5;
}

/* Search */
.wiz-search-wrapper {
    max-width: 400px;
    margin: 0 auto 24px auto;
}

.wiz-search-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 15px;
    font-family: 'Source Sans Pro', sans-serif;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.wiz-search-input:focus {
    border-color: #2563eb;
}

/* Email resend */
.wiz-email-resend {
    display: flex;
    gap: 12px;
    max-width: 500px;
    margin: 20px auto 0 auto;
    align-items: flex-start;
}

.wiz-email-field {
    flex: 1;
}

.wiz-email-field .k-textbox {
    width: 100%;
}

.wiz-email-button {
    flex-shrink: 0;
}

/* Connector grid */
.wiz-connector-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0 0 32px 0;
    text-align: center;
}

.wiz-connector-card {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px 12px 16px 12px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.wiz-connector-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

.wiz-connector-card.wiz-selected {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.wiz-connector-card-logo {
    width: 100%;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 10px;
}

.wiz-connector-card h4 {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

/* Platform selection grid */
.wiz-platform-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 500px;
    margin: 0 auto 24px auto;
}

.wiz-platform-card {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 32px 24px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
}

.wiz-recommended-label {
    position: absolute;
    top: -12px;
    right: 20px;
    background-color: #FFC700;
    color: #3C3C3B;
    font-size: 11px;
    line-height: 16px;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 15px;
    text-transform: uppercase;
}

.wiz-platform-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.08);
}

.wiz-platform-card.wiz-selected {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.wiz-platform-card img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.wiz-platform-card-name {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.wiz-platform-card-desc {
    font-size: 14px;
    color: #9ca3af;
}

/* Note/callout */
.wiz-note {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 16px 24px;
    font-size: 18px;
    color: #92400e;
    max-width: 600px;
    margin: 0 auto 32px auto;
    line-height: 1.5;
    text-align: left;
}

/* MCP URL block */
.wiz-mcp-url-block {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 0 0 28px 0;
    text-align: left;
}

.wiz-mcp-url-block label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
}

.wiz-mcp-url-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wiz-mcp-url-row code {
    flex: 1;
    background: #f3f4f6;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    word-break: break-all;
    color: #111827;
}

/* Instruction steps */
.wiz-instructions {
    text-align: left;
    margin: 0 0 28px 0;
}

.wiz-instruction-step {
    display: flex;
    gap: 14px;
    margin-bottom: 16px;
    align-items: flex-start;
}

.wiz-instruction-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    margin-top: 2px;
}

.wiz-instruction-text p {
    margin: 0;
    font-size: 15px;
    color: #374151;
    line-height: 1.6;
}

/* Screenshot */
.wiz-screenshot {
    margin: 24px auto 28px auto;
    max-width: 700px;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
    padding: 8px;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s;
}

.wiz-screenshot:hover {
    border-color: #93c5fd;
}

.wiz-screenshot::after {
    content: "\1F50D  Click to enlarge";
    position: absolute;
    bottom: 14px;
    right: 16px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.wiz-screenshot:hover::after {
    opacity: 1;
}

.wiz-screenshot img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

/* Lightbox overlay */
.wiz-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation: wiz-fadeIn 0.2s ease-in;
}

.wiz-lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.wiz-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    color: #fff;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

/* Prompt box */
.wiz-prompt-box {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto 28px auto;
    text-align: left;
}

.wiz-prompt-box code {
    flex: 1;
    font-size: 15px;
    color: #111827;
    background: none;
}

/* Connection status / polling */
.wiz-connection-status {
    margin: 32px 0;
}

.wiz-waiting-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 16px;
    color: #6b7280;
}

.wiz-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: wiz-spin 0.8s linear infinite;
}

@keyframes wiz-spin {
    to { transform: rotate(360deg); }
}

.wiz-connection-success {
    margin: 32px 0;
}

.wiz-success-flash {
    font-size: 24px;
    font-weight: 700;
    color: #16a34a;
    animation: wiz-fadeIn 0.4s ease-in;
}

@keyframes wiz-fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.wiz-hidden {
    display: none;
}

/* #2506: Setup Help step (book a call or self-serve) */
.wiz-route-grid {
    max-width: 760px;
}

.wiz-route-card {
    cursor: default;
    justify-content: space-between;
    text-align: center;
}

.wiz-route-card-desc {
    font-size: 16px;
    color: #6b7280;
    flex-grow: 1;
}

/* The onboarding scheduler (_OnboardingScheduler partial). min-height reserves room for the loading state,
   the same pattern as .demo-calendar but in dark colours for a light background. */
.wiz-scheduler.meetings-iframe-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    max-width: 900px;
    min-height: 620px;
    margin: 0 auto;
}

/* Loading state: a spinner + label sits behind the iframe until the HubSpot calendar paints over it */
.wiz-scheduler.meetings-iframe-container::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -46px 0 0 -22px;
    border: 4px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: demo-calendar-spin 0.9s linear infinite;
    z-index: 0;
}

.wiz-scheduler.meetings-iframe-container::after {
    content: "Loading calendar\2026";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: 16px;
    text-align: center;
    color: #6b7280;
    font-size: 16px;
    z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
    .wiz-scheduler.meetings-iframe-container::before {
        animation: none;
    }
}

.wiz-scheduler.meetings-iframe-container iframe {
    display: block;
    position: relative;
    z-index: 1;
}

/* #2506: re-offer a setup call to a stalled self-serve trial, above the connector grid */
.wiz-stall-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 760px;
    margin: 0 auto 24px auto;
    padding: 14px 20px;
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: 12px;
    text-align: left;
}

.wiz-stall-banner.wiz-hidden {
    display: none;
}

.wiz-stall-banner .wiz-btn-next {
    padding: 10px 24px;
    white-space: nowrap;
}

.wiz-stall-banner-text {
    flex-grow: 1;
    font-size: 16px;
    color: #1e3a8a;
}

.wiz-stall-banner-dismiss {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0 4px;
}

.wiz-stall-banner-dismiss:hover {
    color: #111827;
}

/* #2506: "Need a hand? Book a setup call" after Buy Now in the trial banner (base styles in deferred-style.css). A text
   link in the banner's own size, so Buy Now stays the only button. The section becomes a flex row so the icon,
   countdown, Buy Now and the link all centre vertically, replacing the negative-margin alignment in deferred-style.css. */
.trial-banner-section.trial-banner-section-help {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: none;
}

.trial-banner-section-help .trial-icon {
    float: none;
    flex-shrink: 0;
    margin-right: 8px;
}

.trial-banner-section-help .trial-text {
    margin-top: 0;
}

.trial-banner-help {
    display: inline-block;
    margin-left: 25px;
    color: #fff;
}

#trial-banner .trial-banner-help a,
#trial-banner .trial-banner-help a:link,
#trial-banner .trial-banner-help a:visited {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
}

#trial-banner .trial-banner-help a:hover {
    color: #3C3C3B;
}

@media (max-width: 768px) {
    .trial-banner-help {
        display: none;
    }
}

/* #2506: the quieter "Need a hand?" link on the other onboarding steps */
.wiz-help-prompt {
    margin: 0 auto 16px auto;
}

.wiz-help-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 15px;
    color: #6b7280;
    margin: 0 0 16px 0;
}

.wiz-help-link.wiz-hidden {
    display: none;
}

/* Secondary (outline) button: easy to spot without competing with the step's filled primary button */
.wiz-btn-outline {
    display: inline-block;
    background: #fff;
    color: #2563eb;
    border: 1px solid #2563eb;
    border-radius: 8px;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s;
}

.wiz-btn-outline:hover {
    background: #eff6ff;
}

/* Success section (Complete step) */
.wiz-success-section {
    margin: 20px 0 32px 0;
}

/* Next steps grid (Complete page) */
.wiz-next-steps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 600px;
    margin: 0 auto 32px auto;
}

.wiz-next-step-card {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 28px 24px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.wiz-next-step-card:hover,
.wiz-next-step-card:link,
.wiz-next-step-card:visited,
.wiz-next-step-card:active {
    border-color: #93c5fd;
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.08);
    text-decoration: none !important;
}

.wiz-next-step-icon {
    font-size: 54px;
    margin-bottom: 12px;
}

.wiz-next-step-icon-lg {
    font-size: 72px;
    margin-bottom: 12px;
}

.wiz-next-step-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px 0;
}

.wiz-next-step-card p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

.wiz-success-checkmark {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    animation: wiz-fadeIn 0.4s ease-in;
}

/* Action buttons */
.wiz-actions {
    margin: 0 0 16px 0;
}

.wiz-btn-next {
    display: inline-block;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 14px 48px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s;
}

.wiz-btn-next:hover {
    background: #1d4ed8;
    color: #fff;
    text-decoration: none;
}

/* A link styled as the button must beat the site-wide a:link / a:visited colour and underline */
a.wiz-btn-next,
a.wiz-btn-next:link,
a.wiz-btn-next:visited,
a.wiz-btn-next:hover {
    color: #fff;
    text-decoration: none;
}

.wiz-btn-next:disabled,
.wiz-btn-next[disabled] {
    background: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
}

.wiz-secondary-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.wiz-btn-skip {
    font-size: 14px;
    color: #6b7280;
    text-decoration: none;
}

.wiz-btn-skip:hover {
    color: #2563eb;
    text-decoration: underline;
}

.wiz-btn-back {
    font-size: 14px;
    color: #9ca3af;
    text-decoration: none;
}

.wiz-btn-back:hover {
    color: #6b7280;
}

.wiz-step-content {
    text-align: left;
}

/* Sub-step counter */
.wiz-substep-counter {
    font-size: 14px;
    color: #9ca3af;
    margin: 0 0 16px 0;
}

/* Responsive */
@media (max-width: 768px) {
    .wiz-connector-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .wiz-platform-grid {
        grid-template-columns: 1fr;
        max-width: 280px;
    }

    .wiz-route-grid {
        max-width: 420px;
    }

    .wiz-stall-banner {
        flex-wrap: wrap;
    }

    .wiz-heading {
        font-size: 28px;
    }

    .wiz-progress-line {
        width: 24px;
    }

    .wiz-progress-step {
        min-width: 50px;
    }

    .wiz-progress-step span {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .wiz-connector-grid {
        grid-template-columns: 1fr;
    }

    .wiz-connector-card {
        padding: 14px 12px;
    }

    .wiz-mcp-url-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/*** Demo Booked confirmation page */
.section.demo-booked-section {
    background-color: #F5F5F5;
    padding-top: 60px;
    padding-bottom: 80px;
}

.demo-booked-card {
    max-width: 640px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    padding: 48px 40px;
}

    .demo-booked-card h1 {
        margin-top: 0;
        margin-bottom: 1.75rem;
    }

    .demo-booked-card p {
        margin-top: 0;
        margin-bottom: 1.75rem;
    }

    .demo-booked-card ul {
        text-align: left;
        margin: 0 0 1.75rem 0;
        padding-left: 1.5rem;
    }

        .demo-booked-card ul li {
            margin-bottom: 0.5rem;
        }

    .demo-booked-card .demo-booked-cta {
        margin-bottom: 1.5rem;
    }

        .demo-booked-card .demo-booked-cta a.button {
            width: auto;
            display: inline-block;
        }

    .demo-booked-card .demo-booked-back {
        margin-bottom: 0;
    }

@media (max-width: 700px) {
    .demo-booked-card {
        padding: 32px 24px;
        margin-left: 16px;
        margin-right: 16px;
    }
}

/* ============================================================
   Home Page April 2026 redesign — Ticket #1623
   ============================================================ */

/* --- Shared section helpers --- matches AI Insights page typography --- */
.home-section-heading {
    font-size: 36px;
    line-height: 40px;
    font-weight: bold;
    text-align: center;
    margin: 0 0 16px;
}

.home-section-heading-light {
    color: #ffffff;
}

.home-section-subhead {
    font-size: 21px;
    line-height: 30px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px;
    color: #333;
}

.home-section-subhead-light {
    color: #ffffff;
}

.home-section-cta {
    text-align: center;
    margin-top: 56px;
}

/* --- Button variants (new) ---
   Keeps the base a.button styling (30px pill radius, 26px font, bold) and
   only overrides width (so CTAs size to content) and colour. The global
   a.button:link/:visited rules set the blue background with !important,
   so each variant also needs to cover the pseudo-classes explicitly. --- */
a.button.button-yellow,
a.button.button-yellow:link,
a.button.button-yellow:visited,
a.button.button-yellow:hover,
a.button.button-dark,
a.button.button-dark:link,
a.button.button-dark:visited,
a.button.button-dark:hover,
a.button.button-blue,
a.button.button-blue:link,
a.button.button-blue:visited,
a.button.button-blue:hover,
a.button.button-outline-light,
a.button.button-outline-light:link,
a.button.button-outline-light:visited,
a.button.button-outline-light:hover,
a.button.button-outline-dark,
a.button.button-outline-dark:link,
a.button.button-outline-dark:visited,
a.button.button-outline-dark:hover {
    width: auto !important;
    margin: 4px 8px;
    border-radius: 999px !important;
}

a.button.button-yellow,
a.button.button-yellow:link,
a.button.button-yellow:visited {
    background-color: #FFC700 !important;
    color: #3C3C3B !important;
}

a.button.button-yellow:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}

a.button.button-dark,
a.button.button-dark:link,
a.button.button-dark:visited {
    background-color: #555555 !important;
    color: #ffffff !important;
}

a.button.button-dark:hover {
    background-color: #3C3C3B !important;
    color: #ffffff !important;
}

a.button.button-outline-light,
a.button.button-outline-light:link,
a.button.button-outline-light:visited {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff;
}

a.button.button-outline-light:hover {
    background-color: #ffffff !important;
    color: #1a1a2e !important;
}

a.button.button-blue,
a.button.button-blue:link,
a.button.button-blue:visited {
    background-color: #35A8E0 !important;
    color: #ffffff !important;
}

a.button.button-blue:hover {
    background-color: #1a8cc4 !important;
    color: #ffffff !important;
}

a.button.button-outline-dark,
a.button.button-outline-dark:link,
a.button.button-outline-dark:visited {
    background-color: transparent !important;
    color: #1a1a2e !important;
    border: 2px solid #1a1a2e;
}

a.button.button-outline-dark:hover {
    background-color: #1a1a2e !important;
    color: #ffffff !important;
}

/* --- SECTION 1: Hero — reuses .cl-hero (connectors page) layout classes,
       but adopts AI Insights typography (42/50 h1, 21/30 body) AND the AI
       Insights dark-grey background (#3C3C3B). padding-bottom gives the
       .ai-insights-sign-up-button block that follows room to overlap. --- */
.cl-hero.home-hero {
    background-color: #35A8E0;
    padding-top: 15px;
    padding-bottom: 50px;
}

/* Keep the copy clear of the hero image on the right across all breakpoints. */
.cl-hero.home-hero .col-55 {
    padding-right: 40px;
}

/* Restore the content-area right padding that .cl-hero zeroes out — on
   the home page the image needs to sit within the content-area gutter,
   AI-Insights-style, rather than flush against the viewport edge. */
.cl-hero.home-hero > .content-area {
    padding-right: 70px;
}

.cl-hero.home-hero .col-45 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: visible;
    padding: 20px 0;
    max-height: none;
}

.cl-hero.home-hero .cl-hero-image {
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: 15px;
    max-width: 500px;
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-left: auto;
}

/* Browser-style frame around the hero video so it doesn't read as a
   floating clip. Title bar with three "traffic light" dots, rounded
   corners, soft drop-shadow. */
.cl-hero.home-hero .home-hero-screen {
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    border-radius: 16px;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.10);
}

.home-hero-screen-bar {
    height: 28px;
    background-color: #ECEDEF;
    border-bottom: 1px solid #d8dadd;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
}

.home-hero-screen-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
}

.home-hero-screen-dot-red    { background-color: #ff5f57; }
.home-hero-screen-dot-amber  { background-color: #febc2e; }
.home-hero-screen-dot-green {
    background-color: #28c840;
    box-shadow: 0 0 0 0 rgba(40, 200, 64, 0.7);
    animation: home-hero-screen-pulse 2s ease-out infinite;
}

@keyframes home-hero-screen-pulse {
    0%   { box-shadow: 0 0 0 0    rgba(40, 200, 64, 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(40, 200, 64, 0);   }
    100% { box-shadow: 0 0 0 0    rgba(40, 200, 64, 0);   }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero-screen-dot-green {
        animation: none;
        box-shadow: 0 0 6px 2px rgba(40, 200, 64, 0.6);
    }
}

.cl-hero.home-hero .home-hero-screen-video {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    margin: 0;
    border-radius: 0;
    -webkit-mask-image: none;
    mask-image: none;
}

.cl-hero.home-hero h1 {
    font-size: 42px;
    line-height: 50px;
    padding-bottom: 16px;
    margin-bottom: 0;
}

.cl-hero.home-hero p {
    font-size: 21px;
    line-height: 30px;
    padding-bottom: 6px;
    margin-top: 0;
    margin-bottom: 0;
}

.cl-hero.home-hero p.home-hero-tagline {
    font-size: 26px;
    line-height: 34px;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 26px;
    margin-bottom: 0;
}

@media (max-width: 960px) {
    .cl-hero.home-hero h1 {
        font-size: 36px;
        line-height: 42px;
    }
}

@media (max-width: 700px) {
    .cl-hero.home-hero h1 {
        font-size: 32px;
        line-height: 38px;
    }
}

/* --- SECTION 3 (was section 2): Data flow (white) + connector carousel
       in a blue box. No longer sits directly under the signup buttons
       so the tuck-up treatment is gone — plain padding only. --- */
.home-dataflow {
    background-color: #ffffff;
    padding: 60px 0;
}

/* Wrapper frames the carousel + warehouse illustration as one visual unit
   so they don't feel like two floating pieces. */
.home-dataflow-panel {
    background-color: #e8f4fb;
    border-radius: 32px;
    padding: 40px 40px 32px;
    max-width: 1400px;
    margin: 40px auto 0;
    text-align: center;
}

/* Blue rounded carousel box. Height 133px (= 85pt + 20px extra breathing
   room requested). White logo tiles themselves stay the same height they
   were before so the extra 20px becomes vertical breathing room for the
   tile + white connector-name label. Inside the panel, zero vertical
   margin so the panel drives the spacing. */
.home-connector-carousel-box {
    background-color: #35A8E0;
    border-radius: 16px;
    height: 165px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.home-connector-carousel-box .home-carousel {
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.home-connector-carousel-box .home-carousel-logo {
    background-color: #ffffff;
    padding: 18px;
    border-radius: 50%;
    width: 116px;
    height: 116px;
    box-sizing: border-box;
    object-fit: contain;
}

/* Section 2 connector carousel: shrink the circles 20% and drop the
   labels 2px below 600px so the row fits on smaller phones. */
@media only screen and (max-width: 600px) {
    .home-connector-carousel-box {
        height: 132px;
    }

    .home-connector-carousel-box .home-carousel-logo {
        width: 93px;
        height: 93px;
        padding: 14px;
    }

    .home-connector-carousel-box .home-carousel-label {
        font-size: 14px;
        line-height: 18px;
    }
}

/* Labelled carousel item — logo tile stacked above a white name label.
   Used in the section 2, 7, and 11 carousels. Some items are rendered as
   <a> so the whole tile is clickable; kill the global underline/colour. */
.home-carousel-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

a.home-carousel-item,
a.home-carousel-item:link,
a.home-carousel-item:visited,
a.home-carousel-item:hover {
    text-decoration: none;
    color: inherit;
}

a.home-carousel-item:hover .home-carousel-logo {
    transform: translateY(-2px);
    transition: transform 150ms ease;
}

.home-carousel-label {
    color: #ffffff;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-dataflow-diagram {
    text-align: center;
    padding-top: 15px;
}

.home-dataflow-image {
    max-width: 579.5px;
    width: 100%;
    height: auto;
}

.home-carousel {
    overflow: hidden;
    padding: 12px 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
}

.home-carousel-track {
    display: flex;
    width: max-content;
}

.home-carousel-track-left {
    animation: home-scroll-left 150s linear infinite;
}

.home-carousel-track-right {
    animation: home-scroll-right 150s linear infinite;
}

.home-carousel-track:hover,
.home-carousel-track:focus-within {
    animation-play-state: paused;
}

.home-carousel-group {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 0 24px;
}

.home-carousel-logo {
    height: 40px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
}

@keyframes home-scroll-left {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes home-scroll-right {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .home-carousel-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    .home-carousel-group {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* --- SECTION 2 (was section 3): Video (near-black) + YouTube facade.
       Sits directly beneath the hero + signup-button overlap, so it picks
       up the same tuck-up treatment (negative margin-top pulls the section
       under the overhanging buttons; generous padding-top keeps the video
       clear of them). --- */
.home-video {
    background-color: #141C21;
    padding: 120px 0 60px;
    margin-top: -35px;
}

/* At <=1023px the inherited .ai-insights-sign-up-button .col-50 rule
   adds 20px padding-bottom to each button column, making the signup
   block 20px taller. Without compensation, that 20px shows as a
   strip of body-white above section 2. Pull section 2 up the
   matching extra distance. */
@media only screen and (max-width: 1023px) {
    .home-video {
        margin-top: -55px;
        padding-top: 140px;
    }
}

/* Hero stacks to one column once it gets too narrow for the side-by-side
   layout (around 920px the col-45 video starts wrapping awkwardly).

   Overrides below explicitly reset every margin/padding that .cl-hero
   inherits at this width — connectors-page defaults like
   .cl-hero h1 { margin-right: 50px } and .cl-hero .col-55 { padding-top:
   20px; padding-bottom: 20px } were leaking through and producing
   off-centre / asymmetric spacing. The reset matches the AI Insights
   page pattern (centre-aligned, no horizontal margins). */
@media only screen and (max-width: 920px) {
    /* Match the global .content-area padding (15/15) at this breakpoint —
       the home-hero override that sets padding-right: 70 is unscoped, so
       without this rule we end up with 15 left / 70 right. */
    .cl-hero.home-hero > .content-area {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Sign-up buttons stop overlapping into section 2 — they sit on a
       continuation of the hero's blue with their own padding. */
    .ai-insights-sign-up-button.home-hero-cta-block {
        margin-top: 0;
        padding-top: 32px;
        padding-bottom: 48px;
        max-width: none;
        background-color: #35A8E0;
    }

    /* Hero already pads itself; remove its bottom padding so the
       sign-up block flows straight on. */
    .cl-hero.home-hero {
        padding-bottom: 24px;
    }

    /* Section 2 stops pulling up under the buttons - plain stacking. */
    .home-video {
        margin-top: 0;
        padding-top: 80px;
    }

    .cl-hero.home-hero .row {
        flex-direction: column;
        align-items: center;
    }

    .cl-hero.home-hero .col-55,
    .cl-hero.home-hero .col-45 {
        flex-basis: auto;
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
    }

    .cl-hero.home-hero .col-55 {
        text-align: center;
        align-items: center;
    }

    .cl-hero.home-hero .col-55 h1,
    .cl-hero.home-hero .col-55 p {
        text-align: center;
        margin-right: 0;
        margin-left: 0;
    }

    /* Centre the "Compatible with" strip and its logos. */
    .cl-hero.home-hero .home-hero-compatible-with {
        margin: 16px auto 0;
        text-align: center;
    }

    .cl-hero.home-hero .ai-insights-compatible-logos {
        justify-content: center;
    }

    .cl-hero.home-hero .col-45 {
        margin-top: 32px;
        justify-content: center;
        align-items: center;
    }

    /* Video frame stretches to fill its column with no max-width cap. */
    .cl-hero.home-hero .home-hero-screen {
        margin: 0 auto;
        max-width: 100%;
        width: 100%;
    }

    .cl-hero.home-hero .cl-hero-image {
        margin: 0 auto;
        max-width: 100%;
    }
}

/* Below 400px the 89x89 Claude/ChatGPT/Gemini logos in the hero
   "Compatible with" strip overflow the viewport. Drop them 15% to
   ~76x76 so they sit comfortably on small phones. */
@media only screen and (max-width: 400px) {
    .cl-hero.home-hero .ai-insights-compatible-logos img {
        width: 76px;
        height: 76px;
    }
}

.yt-facade {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.yt-facade-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yt-facade-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.75);
    border: 3px solid #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms, transform 150ms;
}

.yt-facade-play:hover,
.yt-facade-play:focus {
    background-color: #ffc629;
    transform: translate(-50%, -50%) scale(1.1);
    outline: none;
}

.yt-facade-play-icon {
    width: 0;
    height: 0;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-left: 44px solid #ffffff;
    margin-left: 12px;
}

/* Mobile keeps the original 80x80 button + icon sizing — the doubled
   desktop version dominates a smaller video frame. */
@media (max-width: 768px) {
    .yt-facade-play {
        width: 80px;
        height: 80px;
    }

    .yt-facade-play-icon {
        border-top: 14px solid transparent;
        border-bottom: 14px solid transparent;
        border-left: 22px solid #ffffff;
        margin-left: 6px;
    }
}

.yt-facade-iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- SECTION 4: Sample AI questions (AI Insights hero grey) --- */
.home-ai-questions {
    background-color: #3C3C3B;
    color: #ffffff;
    padding: 80px 0;
}

.home-questions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 32px;
    max-width: 900px;
    margin: 0 auto;
    padding-top: 12px;
}

.home-question-bubble {
    position: relative;
    background-color: #ffffff;
    border-radius: 32px;
    padding: 32px 24px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.home-question-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    object-fit: contain;
}

.home-question-text {
    font-size: calc(1.1rem + 2px);
    margin: 0;
    color: #333;
    line-height: 1.4;
    flex: 1 1 auto;
}

/* Tags sit at the top of the bubble, pulled slightly up and well in from
   the right edge. */
.home-question-tags {
    position: absolute;
    top: -12px;
    right: 36px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Text-only pill, matches .cl-badge proportions. Slightly deeper pale
   blue than the original #e8f4fb so it still reads against the white
   question bubble while keeping the dark navy text. */
.home-question-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 15px;
    font-size: 14px;
    line-height: 18px;
    font-weight: bold;
    background-color: #b8dcef;
    color: #1a1a2e;
}

/* --- SECTION 5: AI vs Power BI comparison (light blue) --- */
.home-comparison {
    background-color: #e8f4fb;
    padding: 60px 0;
}

.home-comparison-subheading {
    text-align: center;
    font-size: 24px;
    line-height: 30px;
    font-weight: bold;
    color: #333;
    margin: 0 0 24px;
}

/* Halve the gap between the H2 and the "One warehouse" sub-heading on
   section 5 only. */
.home-comparison .home-section-heading {
    margin-bottom: 8px;
}

.home-comparison-row {
    align-items: stretch;
}

.home-comparison-panel {
    border-radius: 32px;
    padding: 32px;
    margin: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.home-comparison-panel-dark {
    background-color: #3C3C3B;
    color: #ffffff;
}

/* Right panel — sits on the section 5 pale-blue background with a thick
   white border to delineate it. */
.home-comparison-panel-light {
    background-color: #e8f4fb;
    color: #1a1a2e;
    border: 5px solid #ffffff;
    box-shadow: none;
}

/* Top row of the left panel — image is first in DOM order so the
   mobile float-right layout (below 600px) can wrap text around and
   under it. flex-direction: row-reverse keeps the desktop visual
   order: copy on the left, image on the right. */
.home-comparison-panel-top {
    display: flex;
    flex-direction: row-reverse;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 24px;
}

.home-comparison-panel-top-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.home-comparison-panel-image {
    flex: 0 0 auto;
    max-width: 220px;
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

/* Halve the AI Insights chat-window thumbnail at narrower widths so it
   doesn't dominate the stacked panel. The top row drops its flex
   layout and lets the heading + body text wrap underneath the image
   (which floats right). */
@media only screen and (max-width: 600px) {
    .home-comparison-panel-top {
        display: block;
    }

    .home-comparison-panel-image {
        float: right;
        max-width: 88px;
        margin-left: 16px;
        margin-bottom: 8px;
    }

    .home-comparison-panel-top-copy {
        /* clear isn't needed - text flows around the float and wraps
           below it once it runs past the image bottom. */
    }
}

.home-comparison-panel-heading {
    font-size: 28px;
    line-height: 34px;
    font-weight: bold;
    margin: 0 0 12px;
}

.home-comparison-panel-dark .home-comparison-panel-heading {
    color: #ffffff;
}

.home-comparison-panel-light .home-comparison-panel-heading {
    color: #1a1a2e;
}

.home-comparison-panel-body {
    font-size: 20px;
    line-height: 28px;
    margin: 0 0 24px;
}

.home-comparison-panel-dark .home-comparison-panel-body {
    color: #e6e6e6;
}

.home-comparison-panel-light .home-comparison-panel-body {
    color: #444;
}

.home-comparison-examples {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 1 auto;
    margin-bottom: 24px;
    padding-top: 12px;
}

.home-comparison-example {
    position: relative;
    background-color: #ffffff;
    border-radius: 32px;
    padding: 28px 20px;
}

/* Tags overlap the question box: pulled up and in from the right,
   matching the .home-question-bubble pattern in section 4. */
.home-comparison-example-tags {
    position: absolute;
    top: -12px;
    right: 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.home-comparison-example-text {
    font-size: 18px;
    line-height: 24px;
    margin: 0;
    color: #333;
}

.home-comparison-templates {
    list-style: disc;
    padding-left: 20px;
    margin: 0 0 24px;
    color: #333;
    flex: 1 1 auto;
}

.home-comparison-templates li {
    margin-bottom: 8px;
    line-height: 28px;
    font-size: 20px;
}

.home-comparison-panel .button {
    align-self: flex-start;
}

/* --- SECTION 6: Reasons to tug — reuses .ai-insights-reasons (AI Insights page) classes --- */
.home-reasons {
    background-color: #ffffff !important;
}

/* Subhead under the H2: wider than .ai-insights-reasons p (which is
   constrained to 280px for the card body copy), no 50px gutter. */
.home-reasons .home-reasons-subhead {
    font-size: 21px;
    line-height: 30px;
    font-weight: normal;
    max-width: 800px;
    margin: 0 auto 40px;
    text-align: center;
    color: #333;
}

/* --- SECTION 7: Tools carousel (AI Insights hero grey) --- */
.home-tools {
    background-color: #3C3C3B;
    color: #ffffff;
    padding: 80px 0;
}

.home-tools .home-carousel-logo {
    background-color: #ffffff;
    padding: 24px;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    box-sizing: border-box;
    object-fit: contain;
}

/* Extra breathing room above and below the section 7 carousel row. */
.home-carousel-tools {
    padding: 36px 0;
    margin: 16px 0;
}

.home-tools-closing {
    text-align: center;
    color: #ffffff;
    font-size: 21px;
    line-height: 30px;
    max-width: 800px;
    margin: 32px auto 12px;
}

.home-tools-cta-line {
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    line-height: 26px;
    margin: 0 auto;
}

a.home-tools-inline-cta,
a.home-tools-inline-cta:link,
a.home-tools-inline-cta:visited {
    color: #FFC700;
    font-weight: bold;
    text-decoration: none;
}

a.home-tools-inline-cta:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* --- SECTION 8: Customer Success Stories (light blue) --- */
.home-stories {
    background-color: #e8f4fb;
    padding: 60px 0 100px;
}

/* Sub-heading directly under the H2 — short and centred. */
.home-stories-subheading {
    text-align: center;
    font-size: 24px;
    line-height: 30px;
    font-weight: bold;
    color: #333;
    max-width: 600px;
    margin: 0 auto 16px;
}

.home-stories-body {
    max-width: 720px;
}

.home-stories-row {
    align-items: stretch;
}

/* Each col gets bottom padding so the overhanging button isn't clipped
   by the row layout. */
.home-story-col {
    padding: 16px 16px 36px;
    display: flex;
}

/* Card: white, rounded to match section 5 panels. The .home-story-read-
   button is positioned absolutely from this card, so the card needs
   position: relative. */
.home-story-card {
    position: relative;
    width: 100%;
    background-color: #ffffff;
    border-radius: 32px;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.home-story-image {
    display: block;
    aspect-ratio: 16 / 9;
    background-color: #f4f7fa;
    border-radius: 32px;
    overflow: hidden;
    margin-bottom: 20px;
}

.home-story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-story-body {
    flex: 1 1 auto;
    padding-bottom: 32px;
}

.home-story-title {
    font-size: 22px;
    line-height: 28px;
    font-weight: bold;
    margin: 0 0 12px;
    color: #222;
}

/* Description truncated to ~3 lines with ellipsis. */
.home-story-intro {
    color: #444;
    font-size: 20px;
    line-height: 28px;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Blue pill button — centred horizontally and overlapping the card's
   bottom edge by ~50% of its height. */
a.home-story-read-button,
a.home-story-read-button:link,
a.home-story-read-button:visited {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: -28px;
    transform: translateX(-50%) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 40px;
    border-radius: 999px;
    background-color: #35A8E0;
    color: #ffffff;
    font-weight: bold;
    font-size: 22px;
    line-height: 1;
    text-decoration: none;
    text-align: center;
    width: auto;
}

a.home-story-read-button:hover {
    background-color: #1a8cc4;
    color: #ffffff;
    text-decoration: none;
}

@media (max-width: 768px) {
    .home-story-col {
        flex-basis: 100%;
        width: 100%;
    }
}

/* --- SECTION 9: Three simple steps (bright blue) --- */
.home-steps {
    background-color: #35A8E0;
    padding: 80px 0;
    color: #ffffff;
}

.home-steps-row {
    align-items: flex-start;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* Connector arrow between step cards — vertically aligned with the
   step image centre (image is 200px tall and sits on top of the card,
   so its centre is roughly 124px down from the row top once the card
   padding is included). */
.home-step-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 8px 0;
}

.home-step-arrow img {
    max-width: 80px;
    width: 100%;
    height: auto;
    display: block;
}

/* Section 9 only: the 3 step cards + 2 arrows lose their horizontal
   layout around 1092px, so flip to a centred vertical stack with
   downward-pointing arrows below that width. Other sections' 768px
   breakpoints are unaffected — the rules here are all .home-step-*
   scoped. */
@media (max-width: 1099px) {
    .home-steps-row {
        flex-direction: column;
        align-items: center;
    }

    .home-step-card {
        flex-basis: auto;
        flex-grow: 0;
        max-width: 320px;
        width: 100%;
    }

    .home-step-arrow {
        padding: 8px 0;
    }

    .home-step-arrow img {
        max-width: 60px;
        transform: rotate(90deg);
    }
}

.home-step-card {
    text-align: center;
    padding: 24px;
    color: #ffffff;
    flex-basis: 0;
    flex-grow: 1;
}

/* Step illustration container — drops the old number-circle. */
.home-step-image {
    width: 200px;
    height: 200px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-step-image img {
    max-width: 180px;
    max-height: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.home-step-card h3 {
    font-size: calc(1.3rem + 4px);
    line-height: 1.2;
    margin: 0 0 8px;
    color: #ffffff;
}

.home-step-card p {
    color: #e6f4fb;
    line-height: 1.4;
    margin: 0;
}

/* --- SECTION 10: Pricing teaser (white) --- */
.home-pricing {
    background-color: #ffffff;
    padding: 80px 0;
    text-align: center;
}

/* Wider "See Full Pricing" pill — extra horizontal padding compared to
   the default .button-blue elsewhere on the page. */
.home-pricing a.button.button-blue {
    padding-left: 48px !important;
    padding-right: 48px !important;
}

/* Push the See Full Pricing CTA down a bit further than the default
   in-section CTA gap. */
.home-pricing .home-section-cta {
    margin-top: 66px;
}

.home-pricing-price {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin: 24px 0;
}

.home-pricing-from {
    font-size: calc(4rem + 10px);
    line-height: 1;
    font-weight: 700;
    color: #35A8E0;
}

.home-pricing-amount {
    font-size: calc(4rem + 10px);
    font-weight: 700;
    color: #35A8E0;
    line-height: 1;
}

.home-pricing-period {
    font-size: 1.25rem;
    color: #333;
}

.home-pricing-caption {
    font-size: 18px;
    line-height: 26px;
    color: #555;
    margin: 8px auto 0;
    max-width: 600px;
}

/* Home page final CTA: extra top padding above the heading and bottom
   padding below the buttons. Scoped via .home-final-section so shared
   .connector-get-started-section usage on other pages is unaffected. */
.home-final-section.section {
    padding-top: 100px;
    padding-bottom: 120px;
}

/* 40px breathing room between "No SQL. No dashboards. Just ask." and
   the rocket buttons below. */
.home-final-section .connector-sign-up-rocket-buttons {
    margin-top: 40px;
}

/* 100px white band below the rocket / clouds, before the footer. */
.home-final-spacer {
    height: 100px;
    background-color: #ffffff;
}

/* --- SECTION 11: Our Partners (AI Insights hero grey) --- */
.home-partners {
    background-color: #3C3C3B;
    color: #ffffff;
    padding: 80px 0;
}

/* Partners carousel spacing — more room around each circle than the
   connector/tool carousels since partner circles are larger. */
.home-carousel-partners .home-carousel-group {
    gap: 56px;
}

.home-carousel-partners .home-partner-item {
    padding: 8px 0;
}

/* Partners scroll faster than the connector/tool carousels. */
.home-carousel-partners .home-carousel-track-left {
    animation-duration: 100s;
}

/* Bigger label under each partner circle. */
.home-carousel-partners .home-carousel-label {
    font-size: 16px;
    line-height: 20px;
    max-width: 180px;
}

.home-partner-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #ffffff;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.home-partner-circle img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}


/* --- SECTION 12: Integration CTA (light) --- */
/* Old standalone section 12 styling kept for safety — the block itself
   was merged into section 11 below. */
.home-integration-cta {
    background-color: #f7fafc;
    padding: 60px 0;
    text-align: center;
}

/* Integration CTA block nested inside the partners section now reuses
   the section 7 .home-tools-closing / .home-tools-cta-line /
   .home-tools-inline-cta classes for visual consistency. */

/* --- SECTION 13: Final CTA — reuses .connector-get-started-section + .connector-rocket (AI Insights page pattern) --- */

/* --- Responsive breakpoints --- */
@media (max-width: 960px) {
    .home-questions-grid {
        grid-template-columns: 1fr;
    }

    .home-comparison-panel {
        margin: 8px 0;
    }

    /* Once the panels stack, centre their CTAs instead of left-aligning. */
    .home-comparison-panel .button {
        align-self: center;
    }

    .home-partner-circle {
        width: 96px;
        height: 96px;
    }
}

@media (max-width: 700px) {
    .home-dataflow,
    .home-video,
    .home-ai-questions,
    .home-comparison,
    .home-tools,
    .home-stories,
    .home-steps,
    .home-pricing,
    .home-partners,
    .home-integration-cta {
        padding: 40px 0;
    }

    .home-pricing-amount {
        font-size: 3rem;
    }

    .home-carousel-logo {
        height: 32px;
    }

    .home-carousel-group {
        gap: 32px;
    }

    .home-partner-circle {
        width: 80px;
        height: 80px;
    }
}

/* Suggested Prompts dialog — matches the MCP configuration dialog pattern.
   The dialog body itself uses the existing .mcp-dialog-body / .mcp-form-row /
   .mcp-required / .mcp-hint / .mcp-full-width classes; only the button row
   differs (centred here vs. right-aligned on the MCP dialogs). */
.suggested-prompt-button-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.suggested-prompt-button-row .k-button {
    min-width: 100px;
}

textarea.mcp-full-width {
    box-sizing: border-box;
    font-family: inherit;
    padding: 6px 8px;
}

/* Hide the default icons Kendo Grid renders inside the row command buttons
   (Edit + Delete) on the Suggested Prompts grid. */
#suggested-prompts-grid .k-grid-content .k-button .k-icon,
#suggested-prompts-grid .k-grid-content .k-button .k-button-icon,
#suggested-prompts-grid .k-grid-content .k-button [class*="k-i-"],
#suggested-prompts-grid .k-grid-content .k-button > svg {
    display: none !important;
}

/* === Onboarding Phase 2a — interstitial layout & cycling messages === */

.wiz-interstitial {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    padding: 32px 16px;
}

.wiz-interstitial-headline {
    font-size: 28px;
    margin-bottom: 12px;
}

.wiz-interstitial-subhead {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 32px;
}

.wiz-interstitial-reassurance {
    font-size: 15px;
    color: #374151;
    margin: 24px 0;
}

/* Reserved layout slot for Phase 2b phone-number input. Empty in 2a. */
.wiz-interstitial-future-slot {
    min-height: 0;
}

/* The active-progress panel — visually groups the spinner and cycling message
   as one unit, separated from the static text around it. Phase 2b's phone-number
   field will drop into the .wiz-interstitial-future-slot inside the same panel.
   Border + radius matches the existing .wiz-prompt-box convention. */
.wiz-interstitial-panel {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 56px 32px 28px;
    margin: 8px auto 32px auto;
    max-width: 560px;
}

/* Bigger spinner on the interstitial — the wait is the page's main feature so
   the indicator should command attention. Step4's spinner is unchanged. */
.wiz-interstitial .wiz-spinner {
    width: 48px;
    height: 48px;
    border-width: 6px;
}

.wiz-interstitial-messages {
    position: relative;
    min-height: 72px;
    margin: 24px 0 8px;
    overflow: hidden;
}

.wiz-interstitial-message {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 12px;
    text-align: center;
    font-size: 18px;
    font-style: italic;
    line-height: 1.4;
    color: #1f2937;
    opacity: 0;
    transform: translateY(8px);
    animation: wiz-message-cycle 192s linear infinite;
}

/* 12 messages * 16s slot = 192s loop. Each message:
   fade in (~2s) -> visible (~13s) -> fade out (~2s).
   Overlap with next message gives a smooth handoff. */
.wiz-interstitial-message:nth-child(1)  { animation-delay:    0s; }
.wiz-interstitial-message:nth-child(2)  { animation-delay:   16s; }
.wiz-interstitial-message:nth-child(3)  { animation-delay:   32s; }
.wiz-interstitial-message:nth-child(4)  { animation-delay:   48s; }
.wiz-interstitial-message:nth-child(5)  { animation-delay:   64s; }
.wiz-interstitial-message:nth-child(6)  { animation-delay:   80s; }
.wiz-interstitial-message:nth-child(7)  { animation-delay:   96s; }
.wiz-interstitial-message:nth-child(8)  { animation-delay:  112s; }
.wiz-interstitial-message:nth-child(9)  { animation-delay:  128s; }
.wiz-interstitial-message:nth-child(10) { animation-delay:  144s; }
.wiz-interstitial-message:nth-child(11) { animation-delay:  160s; }
.wiz-interstitial-message:nth-child(12) { animation-delay:  176s; }

@keyframes wiz-message-cycle {
    0%   { opacity: 0; transform: translateY(8px); }
    1%   { opacity: 1; transform: translateY(0); }
    8%   { opacity: 1; transform: translateY(0); }
    9%   { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 0; transform: translateY(-8px); }
}

.wiz-interstitial-escape {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.wiz-interstitial-escape-warning {
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 8px;
}

.wiz-interstitial-escape-link {
    font-size: 13px;
    color: #6b7280;
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .wiz-interstitial-message {
        animation: none;
        opacity: 0;
        transform: none;
    }
    .wiz-interstitial-message:nth-child(1) {
        opacity: 1;
    }
}

#workspaceDropdownList {
    width: 100%;
}

/* --- Onboarding interstitial: optional SMS opt-in (#1777) --- */
.wiz-sms-optin {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e3e6ec;
    text-align: center;
}

.wiz-sms-optin-prompt {
    margin: 0 0 12px;
    font-weight: 600;
    color: #2b2f38;
}

.wiz-sms-optin-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.wiz-sms-optin-input {
    flex: 1 1 220px;
    max-width: 280px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #c4c9d4;
    border-radius: 6px;
    font-size: 14px;
}

.wiz-sms-optin-btn {
    height: 40px;
    padding: 0 18px;
    border: none;
    border-radius: 6px;
    background-color: #3b5bdb;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.wiz-sms-optin-btn:hover {
    background-color: #2f4bc0;
}

.wiz-sms-optin-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.wiz-sms-optin-error {
    margin: 8px 0 0;
    min-height: 18px;
    color: #c0392b;
    font-size: 13px;
}

.wiz-sms-optin-compliance {
    margin: 10px auto 0;
    max-width: 480px;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.5;
}

.wiz-sms-optin-done {
    display: none;
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid #e3e6ec;
    font-weight: 600;
    color: #2b2f38;
    text-align: center;
}

/* ============================================================
   Demo page (Book a Demo) - June 2026 redesign
   ============================================================ */

/* --- Section 1: hero reassurance bullets, each with an icon from the
       assets folder. The hero reuses the home-hero classes; the screenshot
       is a plain .cl-hero-image (no browser-frame window). --- */
.demo-hero-points {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}

.demo-hero-points li {
    display: flex;
    align-items: center;
    color: #ffffff;
    font-size: 20px;
    line-height: 28px;
    padding: 6px 0;
}

.demo-hero-points li img {
    height: 26px;
    width: auto;
    margin-right: 14px;
    flex-shrink: 0;
}

/* Dark grey hero (the AI Insights header colour) rather than the home
   page blue, so the white HubSpot calendar card is the brightest thing in
   view. Even top/bottom padding (the home hero uses 15/50) so the calendar
   sits vertically centred. Needs the full chain to beat .cl-hero.home-hero. */
.cl-hero.home-hero.demo-hero {
    background-color: #3C3C3B;
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Tagline is not bold on the demo hero (unlike the home hero). Needs the
   full .cl-hero.home-hero.demo-hero chain to beat the base bold rule. */
.cl-hero.home-hero.demo-hero p.home-hero-tagline {
    font-weight: normal;
}

/* Shrink the "Compatible with" AI tool logos vs the home hero (89px) —
   roughly midway between full size and half size. */
.demo-hero .ai-insights-compatible-logos img {
    width: 66px;
    height: 66px;
}

/* --- Section 2: what you'll see in 30 minutes. Reuses the
       .ai-insights-reasons classes (font sizes, colours, spacing,
       reason-image sizing) so it matches "Reasons to Tug with AI"
       exactly — only the background colour differs (white vs grey). --- */
.section.demo-what {
    background-color: #ffffff;
}

/* Subhead under the H2, matching the home-reasons subhead treatment. */
.demo-what-subhead {
    font-size: 21px;
    line-height: 30px;
    font-weight: normal;
    max-width: 800px;
    margin: 0 auto 40px;
    text-align: center;
    color: #333;
}

/* Centre the cards so that when they wrap to two rows (2-per-row at the
   mid breakpoint) the lone third card ("Pricing & next steps") sits
   centred rather than stuck in its left-hand 50% box. */
.section.demo-what .row {
    justify-content: center;
}

/* --- Section 3: testimonial (light blue). Uses the white quote-bubble
       variant (.testimonials .blog-quote styling) rather than the yellow
       base, with dark attribution text so it reads on the light-blue bg.
       +40px above the quote, -40px below it. --- */
.section.demo-testimonial {
    background-color: #e8f4fb;
    padding-top: 100px;
    padding-bottom: 70px;
}

.demo-testimonial-inner {
    max-width: 760px;
    margin: 0 auto;
}

.demo-testimonial .blog-quote {
    background-color: #fff;
    font-size: 26px;
    line-height: 32px;
    font-weight: normal;
}

.demo-testimonial .blog-quote-swish {
    filter: brightness(0) invert(1);
}

.demo-testimonial .blog-quote blockquote:before,
.demo-testimonial .blog-quote blockquote:after {
    color: #000;
}

.demo-testimonial .blog-quote-section {
    text-align: left;
    padding-bottom: 0;
}

.demo-testimonial .blog-quote-section .blog-quote-name,
.demo-testimonial .blog-quote-section .blog-quote-job-title,
.demo-testimonial .blog-quote-section .blog-quote-company {
    color: #3C3C3B;
    display: block;
    float: none;
    font-size: 20px;
    line-height: 26px;
    margin-left: 30px;
}

.demo-testimonial .blog-quote-section .blog-quote-company {
    margin-top: 5px;
    margin-bottom: 20px;
}

.demo-testimonial .blog-quote-section .blog-quote-name,
.demo-testimonial .blog-quote-section .blog-quote-job-title {
    font-weight: normal;
}

/* Shrink the quote text at the small breakpoint, mirroring the main
   _Layout testimonials carousel (26px -> 18px at 680px). */
@media only screen and (max-width: 680px) {
    .demo-testimonial .blog-quote {
        font-size: 18px;
        line-height: 24px;
    }

    .demo-testimonial .blog-quote-text {
        margin-left: 10px;
        margin-right: 10px;
    }

    .demo-testimonial .blog-quote-swish {
        width: 60px;
        margin-right: 30px;
    }
}

/* --- Hero calendar: the HubSpot meetings embed sits in the hero's
       right-hand column (in place of the old screenshot) so the booking
       calendar is above the fold. --- */
.cl-hero.home-hero.demo-hero .col-45.demo-calendar {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

/* Side-by-side layout only: give the calendar 60% so HubSpot isn't squashed,
   copy takes 40%. Keeps the col-55 / col-45 classes because the shared hero
   rules hang off them. Scoped above 920px so it can't outrank the stacked
   flex-basis: auto reset in the 920px home-hero breakpoint. */
@media only screen and (min-width: 921px) {
    .cl-hero.home-hero.demo-hero .col-55 {
        flex-basis: 40%;
    }

    .cl-hero.home-hero.demo-hero .col-45.demo-calendar {
        flex-basis: 60%;
    }
}

/* Rounded corners on the HubSpot meetings embed (no background box) - it
   sits directly on the dark grey hero. Iframes ignore a parent's
   border-radius unless the container is forced onto its own compositing
   layer, so translateZ(0) + the webkit mask hack are needed to actually
   clip the corners. */
.demo-calendar .meetings-iframe-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    position: relative;
    min-height: 620px;
}

/* min-height reserves room for the loading state; if HubSpot sizes the
   iframe shorter than that, the flex column above keeps it centred in the
   reserved space rather than pinned to the top. */

/* Loading state: a spinner + label sits behind the iframe. Once the
   HubSpot calendar loads it paints over this on its higher z-index. */
.demo-calendar .meetings-iframe-container::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -46px 0 0 -22px;
    border: 4px solid rgba(255, 255, 255, 0.25);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: demo-calendar-spin 0.9s linear infinite;
    z-index: 0;
}

.demo-calendar .meetings-iframe-container::after {
    content: "Loading calendar\2026";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: 16px;
    text-align: center;
    color: #e4e6ea;
    font-size: 16px;
    z-index: 0;
}

@keyframes demo-calendar-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .demo-calendar .meetings-iframe-container::before {
        animation: none;
    }
}

.demo-calendar .meetings-iframe-container iframe {
    border-radius: 12px;
    display: block;
    position: relative;
    z-index: 1;
}

/* Heading matches the section 2 (.ai-insights-reasons) heading treatment. */
.section.demo-not-ready h2 {
    font-size: 36px;
    line-height: 40px;
    font-weight: bold;
}

/* --- Section 4: not ready for a demo? (white). The illustration sits
       flush with the bottom edge of the section. --- */
.section.demo-not-ready {
    background-color: #ffffff;
    padding-top: 90px;
    padding-bottom: 0;
}

.demo-not-ready-row {
    align-items: flex-end;
}

.demo-not-ready-copy {
    padding-top: 10px;
    padding-bottom: 90px;
}

.demo-not-ready-copy h2 {
    margin-bottom: 6px;
}

.demo-not-ready-copy > p {
    font-size: 20px;
    color: #5a6270;
    margin-top: 0;
    margin-bottom: 40px;
    text-align: center;
}

.demo-not-ready-buttons {
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
}

.demo-not-ready-buttons .col-50 {
    text-align: center;
    margin-bottom: 16px;
}

/* The base .small-button is only 18px / auto width, which looks lost in
   this section — bring it up to the larger hero-CTA proportions, in the
   mockup's blue rather than yellow. */
.demo-not-ready-buttons .button.small-button,
.demo-not-ready-buttons .button.small-button:link,
.demo-not-ready-buttons .button.small-button:visited {
    width: 280px;
    max-width: 100%;
    font-size: 24px !important;
    line-height: 26px;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    margin: 0 auto !important;
    display: block !important;
    background-color: #35A8E0 !important;
    color: #fff !important;
}

.demo-not-ready-buttons .button.small-button:hover {
    background-color: #000 !important;
    color: #fff !important;
}

.demo-not-ready-sub-head {
    display: block;
    margin-top: 22px;
    font-size: 22px;
    line-height: 26px;
    font-weight: 700;
    color: #35A8E0;
}

.demo-not-ready-subtext {
    display: block;
    margin-top: 16px;
    font-size: 16px;
    color: #35A8E0;
}

.demo-not-ready-image {
    text-align: center;
}

.demo-not-ready-image img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Below 1200px the two CTA buttons start colliding while the copy and
   image are still side by side. Stack the section so the illustration
   drops below the buttons and the copy gets the full width. */
@media only screen and (max-width: 1200px) {
    .demo-not-ready-row {
        flex-direction: column;
        align-items: center;
    }

    .demo-not-ready-copy,
    .demo-not-ready-image {
        flex-basis: auto;
        width: 100%;
        max-width: 100%;
    }

    .demo-not-ready-copy {
        padding-bottom: 24px;
    }
}

/* Demo hero once it stacks to one column at 920px. */
@media only screen and (max-width: 920px) {
    /* The calendar fills the column width once stacked. */
    .cl-hero.home-hero.demo-hero .col-45.demo-calendar {
        align-items: stretch;
    }

    /* Force the tagline onto two lines at this breakpoint. */
    .cl-hero.home-hero.demo-hero .home-hero-tagline {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Drop the "Compatible with" strip below the calendar so the calendar
       comes straight after the hero points. col-55's children are promoted
       into the stacked flex column via display: contents so the
       compatible-with block can be ordered after the calendar (col-45),
       which is a separate column. Desktop is untouched. */
    .cl-hero.home-hero.demo-hero .col-55 {
        display: contents;
    }

    .cl-hero.home-hero.demo-hero .home-hero-compatible-with {
        order: 1;
        margin-top: 28px;
    }

    /* The global col-50 stack kicks in at 920px, which splits the two CTA
       buttons too early — keep them side by side down to ~760px. */
    .demo-not-ready-buttons .col-50 {
        flex-basis: 50%;
    }
}

/* Stack the two CTA buttons only once the row genuinely runs out of
   width, around the 760px mark. */
@media only screen and (max-width: 760px) {
    .demo-not-ready-buttons .col-50 {
        flex-basis: 100%;
    }
}

/* ---------- Gated resources (#1821) ---------- */

.resource-type-badge {
    display: inline-block;
    background-color: #35A8E0;
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 12px;
    margin-bottom: 5px;
}

.resource-default-tile {
    background-color: #042C53;
    display: flex;
    align-items: center;
    justify-content: center;
}

.resource-default-tile span {
    color: #35A8E0;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.resource-hero {
    background-color: #35A8E0;
    color: #ffffff;
    padding: 50px 40px;
    margin-bottom: 40px;
}

/* Gap between the hero copy and the form card on desktop (columns stack on mobile) */
.resource-hero .col-50 + .col-50 {
    padding-left: 40px;
    box-sizing: border-box;
}

.resource-hero h1,
.resource-hero h2 {
    color: #ffffff;
    text-align: left;
}

.resource-hero h1 {
    margin-top: 0;
    margin-bottom: 15px;
}

.resource-hero h2 {
    font-size: 22px;
    line-height: 30px;
    padding-bottom: 0;
    margin-bottom: 10px;
}

/* Badge sits on the bright blue hero - invert to white so it doesn't disappear */
.resource-hero .resource-type-badge {
    background-color: #ffffff;
    color: #35A8E0;
}

.resource-hero-intro {
    font-size: 26px;
    line-height: 36px;
    color: #ffffff;
    margin-bottom: 25px;
}

.whats-inside ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.whats-inside li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 12px;
    font-size: 18px;
    color: #ffffff;
}

.whats-inside li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
}

.resource-form-card {
    background-color: #ffffff;
    color: #3C3C3B;
    border-radius: 20px;
    padding: 30px;
}

.resource-form-card h2 {
    color: #3C3C3B;
    font-size: 32px;
    line-height: 42px;
    text-align: left;
    margin-top: 0;
    margin-bottom: 10px;
    padding-bottom: 0;
}

.resource-body {
    margin-bottom: 40px;
}

.resource-cover-image {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}

.resource-thank-you {
    text-align: center;
}

.resource-thank-you-check {
    width: 64px;
    height: 64px;
    line-height: 64px;
    margin: 0 auto 20px auto;
    border-radius: 50%;
    background-color: #35A8E0;
    color: #ffffff;
    font-size: 34px;
}

.resource-download-note {
    font-size: 14px;
    color: #6e6e6e;
}

#resource-download-button {
    display: inline-block;
    width: auto;
    padding-left: 40px;
    padding-right: 40px;
}

@media only screen and (max-width: 900px) {
    .resource-hero {
        padding: 30px 20px;
    }

    .resource-hero .col-50 {
        width: 100%;
    }

    .resource-hero .col-50 + .col-50 {
        margin-top: 30px;
        padding-left: 0;
    }

    .resource-body .col-66,
    .resource-body .col-33 {
        width: 100%;
    }

    .resource-body .col-33 {
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }
}

/* ============================================================
   Brand assets page (/Brand) - Ticket #2157

   Assets first, rules below. Most visitors want a file and to
   leave, so the order of these sections is deliberate.
   ============================================================ */

.brand-page .content-area {
    max-width: 1180px;
}

/* Headings are left aligned on this page. The base h1/h2 rules centre
   them, which reads as a marketing page rather than a reference one. */
.brand-page h1 {
    text-align: left;
    font-weight: bold;
    padding-bottom: 0px;
}

.brand-page h2 {
    text-align: left;
    font-weight: bold;
    font-size: 30px;
    line-height: 38px;
    padding-bottom: 18px;
}

.brand-lede {
    font-size: 21px;
    line-height: 31px;
    max-width: 660px;
    margin: 16px 0 0 0;
}

/* The hero and the logos sit on the same white ground, so they need a
   hairline between them or they read as one very tall section. */
.brand-divider-top {
    border-top: 1px solid #E1E1E1;
}

/* Any section given an id is a link target (/Brand#rules and friends). The
   site nav is position: sticky, so without this the jump parks the heading
   underneath it and the reader lands mid-list with no context. */
.brand-page .section[id] {
    scroll-margin-top: 110px;
}

.brand-intro {
    font-size: 19px;
    line-height: 28px;
    max-width: 900px;
    margin: 0 0 30px 0;
}

.brand-note {
    font-size: 17px;
    line-height: 25px;
    color: #6E6E6E;
    max-width: 900px;
    margin: 28px 0 0 0;
}

/* Screen-reader-only live region for copy confirmations. There is no
   global visually-hidden helper on this site, hence the local one. */
.brand-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Logos: four colourways, 4 across, 2x2 on mobile --- */

.brand-logo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.brand-logo-card {
    flex: 1 1 calc(25% - 18px);
    min-width: 0;
}

/* The tile background is load-bearing, not decorative: the white
   colourway is invisible on a white card. */
.brand-logo-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #EFEFEF;
    border-radius: 12px;
    padding: 30px 22px;
    margin-bottom: 14px;
    min-height: 104px;
    box-sizing: border-box;
}

.brand-logo-tile-dark {
    background-color: #3C3C3B;
}

.brand-logo-tile img {
    display: block;
    width: 100%;
    max-width: 190px;
    height: auto;
}

.brand-asset-name {
    display: block;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
    color: #3C3C3B;
}

.brand-asset-use {
    display: block;
    font-size: 16px;
    line-height: 22px;
    color: #6E6E6E;
    margin-top: 2px;
}

.brand-asset-links {
    font-size: 16px;
    line-height: 22px;
    font-weight: bold;
    margin: 8px 0 0 0;
}

.brand-asset-sep {
    color: #6E6E6E;
    font-weight: normal;
    padding: 0 4px;
}

/* --- The T mark --- */

.brand-tmark-row {
    align-items: center;
}

/* DOM order is mark-then-text so the mobile stack puts the mark on top.
   On desktop the mark is ordered to the right instead. */
.brand-tmark-mark {
    order: 2;
    text-align: right;
}

/* The artwork is a square-cornered tile, so the rounding is ours. Sized to
   keep the arrow, data dashes and circles legible - below about 80px that
   detail disappears and the mark reads as a plain letter on a blue square. */
.brand-tmark-mark img {
    display: inline-block;
    width: 120px;
    height: 120px;
    border-radius: 24px;
}

/* --- Header images --- */

.brand-header-thumbs {
    display: flex;
    gap: 20px;
    margin-bottom: 34px;
}

.brand-header-thumb {
    flex: 1 1 0;
    min-width: 0;
}

.brand-header-thumb img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.brand-header-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.brand-header-row {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 14px 2px;
    border-bottom: 1px solid #E1E1E1;
    font-size: 18px;
    line-height: 26px;
}

.brand-header-size {
    flex: 0 0 130px;
    font-weight: bold;
    color: #3C3C3B;
}

.brand-header-purpose {
    flex: 1 1 auto;
}

.brand-header-format {
    flex: 0 0 auto;
    font-weight: bold;
}

/* --- Colour and type --- */

.brand-colour-group {
    margin-bottom: 28px;
}

.brand-colour-group-label {
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #35A8E0;
    margin: 0 0 12px 0;
}

/* flex-start, not the default stretch: the Blue swatch carries an extra
   Pantone line, so stretching makes the shorter swatches equal height and
   browsers then vertically centre button content inside them, dropping
   their chips ~10px below Blue's. */
.brand-swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
}

/* Swatches are buttons, not divs - copying the hex is the second most
   common action on this page after downloading a logo. */
.brand-swatch {
    flex: 0 0 auto;
    width: 122px;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.brand-swatch-chip {
    display: block;
    height: 58px;
    border-radius: 8px;
    border: 1px solid #E1E1E1;
}

.brand-swatch-name {
    display: block;
    font-size: 15px;
    line-height: 20px;
    font-weight: bold;
    color: #3C3C3B;
    margin-top: 8px;
}

.brand-swatch-hex {
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: #6E6E6E;
}

.brand-swatch:focus-visible {
    outline: 3px solid #35A8E0;
    outline-offset: 3px;
}

.brand-swatch.brand-copied .brand-swatch-hex {
    color: #35A8E0;
    font-weight: bold;
}

.brand-chip-blue {
    background-color: #35A8E0;
}

.brand-chip-white {
    background-color: #FFFFFF;
}

.brand-chip-dark-grey {
    background-color: #3C3C3B;
}

.brand-chip-yellow {
    background-color: #FFC700;
}

.brand-chip-light-grey {
    background-color: #EFEFEF;
}

.brand-chip-light-blue {
    background-color: #E2F3FB;
}

.brand-chip-navy {
    background-color: #005177;
}

.brand-chip-orange {
    background-color: #F47622;
}

.brand-type-name {
    font-size: 30px;
    line-height: 38px;
    font-weight: bold;
    color: #3C3C3B;
    margin: 0 0 12px 0;
}

.brand-type-body {
    font-size: 19px;
    line-height: 28px;
    max-width: 560px;
    margin: 0;
}

/* --- A few rules --- */

.brand-rules-list {
    margin: 0;
    padding-left: 22px;
}

.brand-rules-list li {
    font-size: 19px;
    line-height: 28px;
    padding: 6px 0;
}

.brand-callout {
    background-color: #E2F3FB;
    border-left: 5px solid #35A8E0;
    border-radius: 0 8px 8px 0;
    padding: 20px 26px;
    margin-top: 32px;
    font-size: 19px;
    line-height: 28px;
    box-sizing: border-box;
}

/* --- How to describe us --- */

.brand-describe-panel {
    border-radius: 16px;
    padding: 26px 30px;
    margin-bottom: 22px;
    box-sizing: border-box;
}

.brand-describe-panel-blue {
    background-color: #35A8E0;
}

.brand-describe-panel-dark {
    background-color: #3C3C3B;
}

.brand-describe-label {
    display: block;
    font-size: 13px;
    line-height: 18px;
    font-weight: bold;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 12px;
}

.brand-describe-text {
    color: #FFFFFF;
    font-size: 19px;
    line-height: 28px;
    margin: 0;
}

.brand-describe-copy {
    margin-top: 18px;
    background-color: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 20px;
    padding: 6px 20px;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 15px;
    line-height: 22px;
    font-weight: bold;
    cursor: pointer;
}

.brand-describe-copy:hover {
    background-color: #FFFFFF;
    color: #3C3C3B;
}

.brand-describe-copy:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 3px;
}

/* --- Downloads --- */

.brand-download-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.brand-download-card,
.brand-download-card:link,
.brand-download-card:visited,
.brand-download-card:hover {
    flex: 1 1 calc(50% - 12px);
    min-width: 0;
    display: block;
    border: 2px solid #E1E1E1;
    border-radius: 14px;
    padding: 26px 28px;
    box-sizing: border-box;
    text-decoration: none;
}

.brand-download-card:hover {
    border-color: #35A8E0;
}

.brand-download-card-primary,
.brand-download-card-primary:link,
.brand-download-card-primary:visited,
.brand-download-card-primary:hover {
    border-color: #35A8E0;
}

.brand-download-name {
    display: block;
    font-size: 21px;
    line-height: 28px;
    font-weight: bold;
    color: #3C3C3B;
}

.brand-download-card-primary .brand-download-name {
    color: #35A8E0;
}

.brand-download-meta {
    display: block;
    font-size: 16px;
    line-height: 22px;
    color: #6E6E6E;
    margin-top: 4px;
}

.brand-download-desc {
    display: block;
    font-size: 17px;
    line-height: 25px;
    color: #3C3C3B;
    margin-top: 12px;
}

/* --- Responsive --- */

@media (max-width: 920px) {
    /* Mark above the copy once the columns stack. */
    .brand-tmark-mark {
        order: 0;
        text-align: left;
        margin-bottom: 22px;
    }
}

@media (max-width: 768px) {
    .brand-page .content-area {
        padding-left: 24px;
        padding-right: 24px;
    }

    .brand-logo-card {
        flex: 1 1 calc(50% - 12px);
    }

    /* Thumbnails become a swipeable strip rather than shrinking to
       illegibility. */
    .brand-header-thumbs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 14px;
        padding-bottom: 8px;
    }

    .brand-header-thumb {
        flex: 0 0 72%;
    }

    .brand-header-row {
        flex-wrap: wrap;
        gap: 4px 16px;
    }

    .brand-header-size {
        flex: 0 0 120px;
    }

    .brand-download-card,
    .brand-download-card:link,
    .brand-download-card:visited,
    .brand-download-card:hover {
        flex: 1 1 100%;
    }

    .brand-swatch {
        flex: 1 1 calc(50% - 8px);
        width: auto;
    }
}

/* Green / amber / red status text (e.g. admin client edit screen) - reuses the existing hexes */
.status-green {
    color: #16a34a;
    font-weight: bold;
}

.status-amber {
    color: #b45309;
    font-weight: bold;
}

.status-red {
    color: #ac0505;
    font-weight: bold;
}