/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); */


/* Help Center redesign: Lucide itself is loaded as JS in the Head injection file. */

:root {
    --kb-content-max-width: 1280px;
    --kb-content-gutter: 40px;
}

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: "Avenir Next", Arial, sans-serif !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;

    background:
        radial-gradient(
            900px 600px at 55% 48%,
            rgba(255,255,255,.95),
            rgba(255,255,255,.85) 30%,
            rgba(255,255,255,.45) 55%,
            transparent 80%
        ),
        radial-gradient(
            500px 500px at 90% 55%,
            rgba(255,255,255,.65),
            transparent 70%
        ),
        linear-gradient(
            180deg,
            #d5e6ff,
            #edf4ff
        );

    background-repeat: no-repeat;
    background-size: cover;
}

@font-face {
    font-family: "Avenir Next";
    src: url(https://cdn.prod.website-files.com/632194a…/689b6c2…_AvenirNext_Variable.woff2) format("woff2");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Avenirnext Variable";
    src: url("https://cdn.prod.website-files.com/6a8c9dcf564a062b211d9f10/6a8c9f4b87a82432b35375a5_AvenirNext_Variable.woff2") format("woff2");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

/* Remove navbar backgrounds */
header#mainNav.navbar .navbar-inner {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

header#mainNav ul.nav .trial-button {
    padding: 11px 20px;
    border-radius: 16px;
    transition: .2s;
}

.trial-nav-item {
    margin-left: 12px;
}

.trial-button {
    background: #F4C80D !important;
    transition: .2s;
}

.trial-button:hover {
    background: #f9d63d !important;
}

/* Search box */
#docsSearch {
    background: transparent !important;
    border: none;
    box-shadow: none;
    padding: 64px 64px;
}

/* .most-pop-articles {
    display: none !important;
}

.twoCol .popArticles li,
.threeCol .popArticles li,
.most-pop-articles .popArticles li {
  display: none;
} */

/* #main-content {
    background-image: none !important;
}

.contentWrapper {
  border-radius: 1rem !important;
} */

.contentWrapper {
    border-top-right-radius: 1.2rem !important;
    border-bottom-right-radius: 1.2rem !important;
}

/* Separation line */
.sep {
  display: none !important;
}

.navbar .brand img {
    max-height: 45px;
    width: auto;
}

header#mainNav .nav > li > a {
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.5;
}


#searchBar button {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    padding: 0;
    margin-left: 12px;

    border: none;
    border-radius: 1rem;

    background: transparent;
    box-shadow: none;

    font-size: 0;          /* hides any button text */
    color: transparent;
    cursor: pointer;
}

#searchBar button .icon-search {
    display: inline-block !important;
    font-size: 22px;
    color: #3b79dd;
    opacity: 1;
    visibility: visible;
}

.search-query {
    border-radius: 1rem !important;
    border: 1px solid rgba(22, 26, 55, 0.08) !important;

    background: rgba(255,255,255,.85);

    padding: 16px 20px;

    box-shadow:
        0 4px 12px rgba(22,26,55,.06),
        0 1px 2px rgba(22,26,55,.04);

    transition: all .2s ease;
}

.search-query:focus {
    outline: none;
    border-color: #3b79dd;
    box-shadow:
        0 0 0 4px rgba(59,121,221,.12),
        0 8px 24px rgba(22,26,55,.08);
}

.icon-search {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}


.collection {
  border-radius: 1rem !important;

}

.collection-icon {
    flex: 0 0 120px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.collection-icon img {
    width: 120px;
    height: auto;
}

.collection-head h2 {
    margin: 0;
    font-size: 28px;
}

.collection-head p {
    margin: 6px 0 0;
    color: #6b7392;
}

.collection-head {
    display: grid;
    grid-template-columns: 72px 1fr;
    column-gap: 20px;
    align-items: center;
}

.collection-body {
    display: none !important;
}

.threeCol .collection .collection-head,
.twoCol .collection .collection-head {
    border-bottom: none !important;
  }

.threeCol .collection, .twoCol .collection {
  min-height: 150px;
}

.twoCol .collection {
    width: 30%;
}

li{
    margin-top: 10px;
}

/* ==========================
   Footer
========================== */

.footer-section {
    display: block;
    clear: both;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    padding: 60px var(--kb-content-gutter);
    background: transparent;
}

.footer-section > .container.w-container {
    float: none;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--kb-content-max-width);
    margin-right: auto;
    margin-left: auto;
    padding: 0;
}

.footer-section .footer-columns-new,
.footer-section .footer-legal {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
}

/* Bottom legal row: copyright, Privacy Policy, and Cookie Settings on a
   single line, separated from the columns above by a divider. */
.footer-legal {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
    padding: 24px 0 0;
    border-top: 1px solid rgba(22,27,55,.12);
}

.footer-legal-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: #161b37;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s ease;
}

.footer-legal-link:hover {
    color: #3478dd;
    text-decoration: underline;
}

.copyright-2 {
    font-size: 13px;
    font-weight: 400;
    color: #161b37;
}

/* ==========================
   Footer link columns (Platform / Resources / Compare / Pricing)
========================== */

.footer-columns-new {
    display: grid;
    grid-template-columns: repeat(3, 224px) auto;
    justify-content: center;
    column-gap: 0;
    row-gap: 32px;
    margin: 0 0 48px;
    padding: 0;
    font-family: "Avenirnext Variable", "Avenir Next", Arial, sans-serif;
}

.footer-column-new {
    justify-self: start;
    width: fit-content;
    max-width: 100%;
    text-align: left;
}

.footer-column-label {
    margin-bottom: 35px;
    color: #1cb2fa;
    font-family: "Avenirnext Variable", "Avenir Next", Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer-column-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-column-links li {
    margin: 0;
}

.footer-column-link {
    display: block;
    color: #161b37;
    font-family: "Avenirnext Variable", "Avenir Next", Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    transition: color .2s ease;
}

.footer-column-link:hover {
    color: #3478dd;
    text-decoration: underline;
}

/* ==========================
   Mobile
========================== */

@media (max-width: 767px) {

    .footer-legal {
        flex-direction: column;
        align-items: center;
        gap: 14px;
        text-align: center;
    }

    .footer-columns-new {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
        margin-bottom: 36px;
    }
}

@media (max-width: 980px) {
    .footer-columns-new {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {

    .footer-columns-new {
        grid-template-columns: 1fr;
    }

    .footer-column-new {
        justify-self: start;
    }
}

/* Collection visual refinement. */
.threeCol .collection .collection-head,
.twoCol .collection .collection-head,
#collection-681 .collection-head {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 0;
}

.threeCol .collection .collection-head .collection-lucide,
.twoCol .collection .collection-head .collection-lucide {
    grid-row: 1;
    align-self: center;
    background: #f3f5f8;
    color: #697386;
}

/* The only coloured collection icons: Cloud yellow and Teams blue. */
#collection-798 .collection-lucide {
    background: #fff8dc;
    color: #dfb70f;
}

#collection-711 .collection-lucide {
    background: #e5f7ff;
    color: #1aaff5;
}

.threeCol .collection .collection-head h2,
#collection-681 .collection-head h2 {
    align-self: center;
    margin: 0;
    text-align: left;
}

.threeCol .collection .collection-head p,
#collection-681 .collection-head p {
    grid-row: 2;
    grid-column: 1 / -1;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(22, 26, 55, .09);
    text-align: left;
}

.threeCol .collection .collection-head p:empty,
.threeCol .collection .collection-head.no-desc p {
    display: none;
}

.collection-head p span {
    box-sizing: border-box;
    width: 100%;
    padding-left: 18px;
    text-align: left;
}

.collection-head p span::before {
    margin-left: -18px;
    color: #3478dd;
}

.collection-clickable {
    cursor: pointer;
}

.collection-clickable:focus-visible {
    outline: 3px solid rgba(52, 120, 221, .35);
    outline-offset: 3px;
}

/* Search submits normally when pressing Enter; the decorative button is hidden. */
#searchBar button {
    display: none !important;
}

#searchBar .search-query {
    padding-right: 20px;
}

/* Contact panel */
#collection-418 .collection-body {
    display: block !important;
    margin: 20px 0 0 72px;
}

#collection-418 .collection-arrow {
    display: none;
}

.contact-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 24px;
    align-items: center;
}

.contact-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #5f6980;
}

.contact-copy > strong {
    margin-bottom: 5px;
    color: #161b37;
    font-size: 17px;
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.contact-button {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    padding: 11px 16px;
    border: 1px solid #3478dd;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
}

.contact-button svg {
    width: 19px;
    height: 19px;
}

.contact-email,
.contact-email:hover {
    background: #3478dd;
    color: #fff !important;
}

.contact-call,
.contact-call:hover {
    background: #fff;
    color: #3478dd !important;
}

.contact-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 118px;
    height: 86px;
    margin-left: auto;
    border-radius: 18px;
    background: linear-gradient(145deg, #e8f4ff, #dcecff);
    color: #3478dd;
    transform: rotate(-4deg);
}

.contact-visual svg {
    width: 54px;
    height: 54px;
}

@media (max-width: 767px) {
    #collection-418 .collection-body { margin-left: 0; }
    .contact-panel { grid-template-columns: 1fr; }
    .contact-visual { display: none; }
}

#collection-681 .collection-head {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 20px;
    align-items: center;
}

#collection-681 .collection-head::before {
    content: "\f9aa";
    font-family: 'uicons-regular-rounded';
    font-size: 54px;
    color: #219852;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    grid-row: 1 / span 2;
}

#collection-681 .collection-head h2,
#collection-681 .collection-head p {
    grid-column: 2;
}

/* ==========================
   2026 Help Center card grid
========================== */

header#mainNav .container-fluid,
#contentArea.container-fluid {
    box-sizing: border-box;
    width: 100%;
    max-width: 1440px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 40px;
    padding-left: 40px;
}

header#mainNav .navbar-inner {
    padding: 14px 0;
}

header#mainNav .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header#mainNav .nav-collapse,
header#mainNav .nav-collapse nav,
header#mainNav ul.nav {
    display: flex !important;
    align-items: center;
    margin: 0;
}

header#mainNav ul.nav > li > a {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 14px;
    color: #151a35;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-decoration: none;
}

header#mainNav ul.nav svg {
    width: 20px;
    height: 20px;
    color: #3478dd;
}

#docsSearch {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 38px 40px 56px;
    text-align: center;
}

#docsSearch h1 {
    margin: 0 0 26px;
    color: #202535;
    font-size: 32px;
    line-height: 1.2;
}

#searchBar {
    position: relative;
    display: flex;
    width: 100%;
    margin: 0 auto;
}

#searchBar .search-query {
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    padding-right: 58px;
}

#searchBar button {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
}

.popular-searches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    color: #56617c;
    font-size: 13px;
}

.popular-searches a {
    color: #3478dd;
    text-decoration: none;
}

.popular-searches a:hover {
    text-decoration: underline;
}

.threeCol.row-fluid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
    margin: 0;
}

/* Bootstrap's clearfix pseudo-elements otherwise become empty grid items. */
.threeCol.row-fluid::before,
.threeCol.row-fluid::after {
    content: none !important;
    display: none !important;
}

.threeCol .collection,
.twoCol .collection {
    position: relative;
    box-sizing: border-box;
    float: none;
    width: auto;
    min-height: 226px;
    margin: 0;
    padding: 24px 24px 42px;
    overflow: hidden;
    border: 1px solid rgba(22, 26, 55, .10);
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 3px 14px rgba(22, 26, 55, .035);
    transition: transform .2s ease, box-shadow .2s ease;
}

.threeCol .collection:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(22, 26, 55, .09);
}

.threeCol .collection .collection-head,
.twoCol .collection .collection-head,
#collection-681 .collection-head {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 7px 14px;
    align-items: start;
    padding: 0;
}

.collection-lucide {
    display: flex;
    grid-row: 1 / span 2;
    grid-column: 1;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 12%, white);
    color: #3478dd;
}

.collection-lucide svg {
    width: 30px;
    height: 30px;
}

.threeCol .collection:nth-child(5n + 1) .collection-lucide { color: #3478dd; }
.threeCol .collection:nth-child(5n + 2) .collection-lucide { color: #dfb70f; }
.threeCol .collection:nth-child(5n + 3) .collection-lucide { color: #cb308b; }
.threeCol .collection:nth-child(5n + 4) .collection-lucide { color: #0086b8; }
.threeCol .collection:nth-child(5n + 5) .collection-lucide { color: #1aaff5; }

.threeCol .collection .collection-head h2,
#collection-681 .collection-head h2 {
    grid-row: 1;
    grid-column: 2;
    margin: 2px 0 0;
    font-size: 20px;
    line-height: 1.15;
}

.threeCol .collection .collection-head h2 a {
    color: #161b37;
    text-decoration: none;
}

.threeCol .collection .collection-head p,
#collection-681 .collection-head p {
    display: flex;
    grid-row: 2;
    grid-column: 2;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
    color: #626c86;
    font-size: 14px;
    line-height: 1.3;
    white-space: pre-line;
}

.collection-head p span {
    display: block;
    padding-left: 12px;
    overflow-wrap: anywhere;
}

.collection-head p span::before {
    content: "•";
    float: left;
    margin-left: -12px;
}

.collection-arrow {
    position: absolute;
    right: 20px;
    bottom: 17px;
    color: #3478dd;
}

.collection-arrow svg {
    width: 22px;
    height: 22px;
}

#collection-412,
#collection-418 {
    grid-column: span 2;
    min-height: 210px;
}

#collection-412 .collection-body {
    display: block !important;
    margin: 18px 36px 0 72px;
}

#collection-412 .collection-body h3 {
    margin: 0 0 9px;
    color: #161b37;
    font-size: 14px;
}

#collection-412 .popArticles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    gap: 9px 24px;
    margin: 0;
}

#collection-412 .popArticles li {
    margin: 0;
}

#collection-412 .popArticles li:nth-child(n + 5) {
    display: none;
}

#collection-412 .popArticles a {
    color: #3478dd;
    font-size: 13px;
}

@media (max-width: 980px) {
    .threeCol.row-fluid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #collection-412, #collection-418 { grid-column: span 1; }
}

@media (max-width: 767px) {
    header#mainNav .container-fluid,
    #contentArea.container-fluid { padding-right: 20px; padding-left: 20px; }
    header#mainNav .container-fluid { flex-wrap: wrap; }
    header#mainNav ul.nav > li > a { padding: 8px; font-size: 13px !important; }
    header#mainNav .nav-home { display: none; }
    #docsSearch { padding: 28px 20px 40px; }
    #docsSearch h1 { font-size: 27px; }
    .threeCol.row-fluid { grid-template-columns: 1fr; gap: 14px; }
    .threeCol .collection, .twoCol .collection { min-height: 190px; }
    #collection-412 .collection-body { margin-left: 0; }
    #collection-412 .popArticles { grid-template-columns: 1fr; }
}

/* Final layout corrections after testing against Help Scout's generated CSS. */
header#mainNav .container-fluid {
    width: calc(100% - 80px) !important;
    max-width: none !important;
    margin-right: 40px !important;
    margin-left: 40px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

header#mainNav .brand {
    float: none !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}

#contentArea.container-fluid {
    width: calc(100% - 80px) !important;
    max-width: 1600px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    padding-bottom: 70px !important;
}

#docsSearch {
    padding-top: 68px;
    padding-bottom: 68px;
}

#docsSearch h1 {
    margin-bottom: 14px;
}

#searchBar button,
#searchBar button:hover,
#searchBar button:focus {
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    display: flex !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

#searchBar button .icon-search,
#searchBar button .icon-search.lp {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: block !important;
    margin: 0 !important;
    line-height: 1 !important;
    transform: none !important;
}

.threeCol.row-fluid > .collection,
.threeCol.row-fluid > .collection:first-child,
#collection-681 {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    margin-left: 0 !important;
}

#collection-681 .collection-head::before {
    content: none !important;
    display: none !important;
}

@media (max-width: 767px) {
    header#mainNav .container-fluid,
    #contentArea.container-fluid {
        width: calc(100% - 40px) !important;
        margin-right: 20px !important;
        margin-left: 20px !important;
    }

    #docsSearch {
        padding-top: 44px;
        padding-bottom: 48px;
    }
}

/* Keep these collection refinements last so they override Help Scout legacy rules. */
.threeCol .collection .collection-head,
.twoCol .collection .collection-head,
#collection-681 .collection-head {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 0;
}

.threeCol .collection .collection-head .collection-lucide {
    grid-row: 1;
    align-self: center;
    background: #f3f5f8;
    color: #697386;
}

#collection-798 .collection-lucide { background: #fff8dc; color: #dfb70f; }
#collection-711 .collection-lucide { background: #e5f7ff; color: #1aaff5; }

.threeCol .collection .collection-head h2,
#collection-681 .collection-head h2 {
    align-self: center;
    margin: 0;
    text-align: left;
}

.threeCol .collection .collection-head p,
#collection-681 .collection-head p {
    grid-row: 2;
    grid-column: 1 / -1;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(22, 26, 55, .09);
    text-align: left;
}

.threeCol .collection .collection-head p:empty,
.threeCol .collection .collection-head.no-desc p { display: none; }

.collection-head p span { width: 100%; padding-left: 18px; text-align: left; }
.collection-head p span::before { margin-left: -18px; color: #3478dd; }

#searchBar button { display: none !important; }
#searchBar .search-query { padding-right: 20px; }

#collection-418 .collection-body {
    display: block !important;
    margin: 20px 0 0 72px;
}

#collection-418 .collection-arrow { display: none; }

@media (max-width: 767px) {
    #collection-418 .collection-body { margin-left: 0; }
}

/* Accordion */

.kb-accordion {
    margin: 30px 0;
    border-top: 1px solid #E6EAF2;
}

/* Each item */

.kb-item {
    border-bottom: 1px solid #E6EAF2;
}

/* Remove default marker */

.kb-item summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    padding: 18px 40px 18px 0;
    transition: color .2s ease;
}

.kb-item summary::-webkit-details-marker {
    display: none;
}

/* Heading */

.kb-item h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #1E293B;
    transition: color .2s ease;
}

.kb-item summary:hover h3 {
    color: #2563EB;
}

/* Chevron */

.kb-item summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;

    width: 9px;
    height: 9px;

    border-right: 2px solid #64748B;
    border-bottom: 2px solid #64748B;

    transform: translateY(-60%) rotate(45deg);
    transition: transform .25s ease;
}

.kb-item[open] summary::after {
    transform: translateY(-35%) rotate(225deg);
}

/* Content */

.kb-content {
    padding: 0 0 22px 0;
}

.kb-content p {
    margin: 0;
    color: #475569;
    line-height: 1.7;
}

#fullArticle .title {
    margin: 0 30px .5em 0;
}

#fullArticle blockquote, #fullArticle dd, #fullArticle div, #fullArticle li, #fullArticle ol, #fullArticle p, #fullArticle table, #fullArticle ul {
    font-size: 20px;
    color: #161a37a8;
    line-height: 166%;
    /* margin-bottom: 1.5em; */
}

#fullArticle .callout-blue p,
#fullArticle .callout-green p,
#fullArticle .callout-yellow p {
    font-size: 20px;
}

/* Compact green notices, with optional icon and bullet-list treatment.
   Structurally matched to .callout-toc below (white surface, thin border,
   accent-blue-style icon circle) so warning/info notices read as the same
   design system as the rest of the article — only the accent color and
   the absence of a heading row differ. */
#fullArticle .callout-green {
    box-sizing: border-box;
    margin: 20px 0 24px;
    padding: 18px 20px;
    border: 1px solid #d8ecd2;
    border-radius: 10px;
    background: #fff;
    color: #3f4b58;
}

#fullArticle .callout-green > p {
    margin: 0;
    color: #3f4b58;
    font-size: 16px;
    line-height: 1.45;
}

#fullArticle .callout-green-has-icon {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

#fullArticle .callout-green-has-icon > p {
    grid-column: 2;
}

#fullArticle .callout-green-list {
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: start;
    padding: 18px 20px;
}

#fullArticle .callout-green-has-icon > .callout-green-icon {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #cde8c8;
    border-radius: 50%;
    background: #fff;
    color: #4eae51;
    box-shadow: 0 4px 10px rgba(47, 125, 54, .11);
}

#fullArticle .callout-green-icon svg {
    width: 22px;
    height: 22px;
}

#fullArticle .callout-green-list > ul {
    grid-column: 2;
    margin: 0;
    padding: 0;
    color: #3f4b58;
    font-size: 16px;
    line-height: 1.45;
    list-style: none;
}

#fullArticle .callout-green-list > ul > li {
    position: relative;
    margin: 0;
    padding-left: 16px;
    color: #3f4b58;
    font-size: 16px;
    line-height: 1.45;
}

#fullArticle .callout-green-list > ul > li + li {
    margin-top: 7px;
}

#fullArticle .callout-green-list > ul > li::before {
    content: "";
    position: absolute;
    top: .62em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #57b957;
}

/* Compact yellow warning callout with a highlighted alert icon. */
#fullArticle .callout-yellow {
    box-sizing: border-box;
    margin: 20px 0 24px;
    padding: 18px 20px;
    border: 1px solid #f0dfaa;
    border-radius: 10px;
    background: #fff;
    color: #3f4b58;
}

#fullArticle .callout-yellow-has-icon {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

#fullArticle .callout-yellow > p,
#fullArticle .callout-yellow > ul {
    grid-column: 2;
    margin: 0;
    color: #3f4b58;
    font-size: 16px;
    line-height: 1.45;
}

#fullArticle .callout-yellow > p + p {
    margin-top: 7px;
}

#fullArticle .callout-yellow-has-icon > .callout-yellow-icon {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #ecd995;
    border-radius: 50%;
    background: #fff;
    color: #d39b08;
    box-shadow: 0 4px 10px rgba(163, 116, 0, .11);
}

#fullArticle .callout-yellow-icon svg {
    width: 22px;
    height: 22px;
}

/* Plain blue box, shown only until Head JS adds .callout-toc (or if it fails). */
#fullArticle .callout-blue {
    box-sizing: border-box;
    margin: 20px 0 24px;
    padding: 16px 20px;
    border: 1px solid #d6e5f4;
    border-left: 5px solid #6ca9df;
    border-radius: 10px;
    background: linear-gradient(135deg, #f5faff, #eaf4fd);
    box-shadow: 0 6px 18px rgba(52, 120, 181, .07);
    color: #3f4b58;
}

#fullArticle .callout-blue > p {
    margin: 0 0 8px;
    color: #3f4b58;
    font-size: 16px;
    line-height: 1.45;
    break-inside: avoid;
}

#fullArticle .callout-blue > p:first-child {
    margin-bottom: 12px;
}

/* Every blue callout is a content table.
   Markup as authored: <div class="callout-blue"><p><a>...</a></p>...</div> —
   Head JS adds the .callout-toc class and the heading/icon for any
   callout-blue with at least one <p>. */
#fullArticle .callout-blue.callout-toc {
    box-sizing: border-box;
    margin: 20px 0 24px;
    padding: 20px 24px 22px;
    border: 1px solid #e7ecf2;
    border-left: 1px solid #e7ecf2;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
    color: #3f4b58;
    column-count: 2;
    column-gap: 48px;
    column-rule: 1px solid #e2e8f0;
}

#fullArticle .callout-toc-heading {
    column-span: all;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
}

#fullArticle .callout-toc-icon {
    display: flex;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbdff3;
    border-radius: 50%;
    background: #fff;
    color: #3478dd;
    box-shadow: 0 4px 10px rgba(52, 120, 221, .11);
}

#fullArticle .callout-toc-icon svg {
    width: 22px;
    height: 22px;
}

#fullArticle .callout-toc-title {
    flex: 0 0 auto;
    font-size: 19px;
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
}

#fullArticle .callout-toc-heading::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #d8e2ec;
}

#fullArticle .callout-blue.callout-toc > p {
    position: relative;
    break-inside: avoid;
    padding-left: 26px;
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.45;
}

#fullArticle .callout-blue.callout-toc > p::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #22a35a;
    font-weight: 700;
}

#fullArticle .callout-blue.callout-toc > p a {
    color: #2f6fed;
    font-size: 16px;
    text-decoration: none;
}

#fullArticle .callout-blue.callout-toc > p a:hover {
    text-decoration: underline;
}


/* #fullArticle blockquote, #fullArticle dd, #fullArticle div, #fullArticle li, #fullArticle ol, #fullArticle p, #fullArticle table, #fullArticle ul {
    font-size: 15px;
    color: #585858;
    line-height: 1.55em;
    margin-bottom: 1.5em;
} */

#fullArticle blockquote p {
    font-weight: inherit;
    margin-top: 0;
}

#fullArticle h2 {
font-size: 24px;
line-height: 32px;
}

#fullArticle h1, #fullArticle h2, #fullArticle h3, #fullArticle h4, #fullArticle h5 {
    margin-bottom: .65em;
    color: #222;
}

h1, h2, h3, h4, h5, h6 {
    margin: 9px 0;
    font-family: inherit;
    font-weight: 600;
    line-height: 18px;
    color: inherit;
    text-rendering: optimizelegibility;
}

.contentWrapper h1{
    font-size: 34px;
    font-weight: 600;
}



/* Help Center UI refinements (keep last to override legacy Help Scout rules).
html,
body,
input,
button,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
span,
strong {
  font-family:Arial,sans-serif;font-size:14px;
} */

#sidebar h3 {
    display: none;
}

#sidebar h3 + ul.nav.nav-list a,
#sidebar ul.nav.nav-list a {
    color: #161A37;
    font-size: 18px;
    line-height: 1.5;
    margin-top: 12px;
}

#sidebar .nav-list .active a, #sidebar .nav-list .active a:focus, #sidebar .nav-list .active a:hover {
    font-weight: 500;
}

/* Base theme's .icon-arrow is a right-pointing glyph; point it down instead.
   Scoped to the sidebar category list only, not .icon-arrow globally. */
.nav.nav-list .icon-arrow {
    transform: rotate(90deg);
}

/* Single-article sidebar categories (see enhanceSidebarCategories in the
   head script — the .nav-list-flat class and arrow removal are applied
   there once it confirms the category has exactly one article). When such
   a category is the current section, give it the same highlight a current
   article gets in .sidebar-article-list below, instead of the plain
   font-weight:500 every other active category gets. */
#sidebar .nav-list li.nav-list-flat.active > a {
    color: #3478dd;
    font-weight: 600;
}

.sidebar-article-list {
    margin: 8px 0 6px 18px;
    padding: 2px 0 2px 14px;
    border-left: 2px solid #d9e5f5;
    list-style: none;
}

#sidebar .nav-list .active .sidebar-article-list li {
    margin: 0;
    padding: 0;
}

#sidebar .nav-list .active .sidebar-article-list a {
    display: block;
    margin: 0;
    padding: 6px 0;
    border: 0;
    background: transparent !important;
    color: #5f6980;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.35;
    text-decoration: none;
}

#sidebar .nav-list .active .sidebar-article-list a:hover,
#sidebar .nav-list .active .sidebar-article-list a:focus {
    color: #3478dd;
    text-decoration: underline;
}

#sidebar .nav-list .active .sidebar-article-list li.current > a {
    color: #3478dd;
    font-weight: 600 !important;
}

/* Keep the sidebar in view while the article scrolls. Safe as CSS-only:
   #sidebar's ancestor chain (.row-fluid, #contentArea, body, html) is all
   overflow:visible and header#mainNav is never fixed/sticky, so there's no
   scroll-container trap and no fixed header height to offset around.
   Disabled below 769px, where the theme's own breakpoint drops #sidebar out
   of the float layout and stacks it under the article at 100% width. */
@media (min-width: 769px) {
    #sidebar.span3 {
        position: sticky;
        top: 24px;
    }
}

.popular-searches {
    font-size: 18px;
}

/* Popular Searches belongs on the Help Center homepage only. */
body.not-homepage .popular-searches {
    display: none !important;
}

#collection-412 .popArticles a {
    font-size: 14px;
}

#collection-412 .popArticles li + li {
    margin-top: 12px;
}

#collection-412 .popArticles li,
#collection-412 .popArticles li a,
#collection-412 .popArticles li a span {
    text-align: left !important;
}

#collection-412 .popArticles li a {
    display: block;
}

/* Collection accent palette. */
#collection-681 .collection-lucide,
#collection-711 .collection-lucide,
#collection-766 .collection-lucide {
    background: #e9f7ef;
    color: #219852;
}

#collection-798 .collection-lucide,
#collection-409 .collection-lucide,
#collection-412 .collection-lucide,
#collection-418 .collection-lucide {
    background: #e5f7ff;
    color: #1aaff5;
}

#collection-415 .collection-lucide,
#collection-406 .collection-lucide,
#collection-818 .collection-lucide {
    background: #fff8dc;
    color: #dfb70f;
}

/* Keep article lines at a comfortable reading length within the wider card. */
body.article-page #fullArticle {
    box-sizing: border-box;
    width: calc(100% - 64px);
    max-width: 900px;
    margin-right: auto !important;
    margin-left: auto !important;
}

blockquote p {
    font-weight: 400 ! important;
    font-size: 18px ! important;
}

@media (max-width: 767px) {
    body.article-page #fullArticle {
        width: 100%;
        padding-right: 12px;
        padding-left: 12px;
    }
}

/* Homepage collections: three centred columns. */
.threeCol.row-fluid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    box-sizing: border-box;
    width: calc(100% - 120px);
    max-width: 1320px;
    margin-right: auto;
    margin-left: auto;
}

/* FAQ now follows the same card layout as every other standard collection. */
#collection-412 {
    grid-column: auto;
    min-height: 226px;
}

#collection-412 .collection-body {
    display: none !important;
}

/* Final row: Contact Us takes two thirds and VIP takes one third. */
#collection-418 {
    grid-column: span 2;
}

#collection-776 {
    grid-column: span 1;
    border: 0;
    background: #fffdf2;
    box-shadow: 0 5px 16px rgba(22, 26, 55, .05);
}

#collection-776:hover {
    border: 0;
    background: #fffae8;
    box-shadow: 0 8px 20px rgba(22, 26, 55, .07);
}

#collection-776 .collection-lucide {
    border: 0;
    background: #e9f7ef;
    color: #219852;
    box-shadow: none;
}

#collection-776 .collection-arrow {
    color: #219852;
}

#collection-776 .collection-head p span::before {
    color: #219852;
}

@media (max-width: 980px) {
    .threeCol.row-fluid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: calc(100% - 48px);
    }

    #collection-412 {
        grid-column: auto;
    }

    #collection-418,
    #collection-776 {
        grid-column: auto;
    }
}

@media (max-width: 767px) {
    .threeCol.row-fluid {
        grid-template-columns: 1fr;
        width: 100%;
    }

    #collection-412,
    #collection-418,
    #collection-776 {
        grid-column: auto;
    }
}

/* Shared page alignment for the navbar and Help Scout content wrapper.
   The footer uses a full-width shell and its own centred inner container. */
header#mainNav .container-fluid,
#contentArea.container-fluid {
    box-sizing: border-box;
    width: calc(100% - 80px) !important;
    max-width: var(--kb-content-max-width) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.threeCol.row-fluid {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
}

/* Custom HTML elements */

/* Shared across every article's custom-HTML block (platform-switcher,
   guide-steps, etc. — anything Help Scout wraps in [data-html-block]), not
   just this one: pull the block in tight against its lead-in paragraph
   instead of the article's default 30px paragraph spacing. 18px matches
   .guide-steps li's own spacing and the callouts' padding, so the block
   reads as sitting close to its intro line the same way the callouts do. */
#fullArticle p:has(+ [data-html-block]) {
    margin-bottom: 18px;
}

.platform-tabs {
    display: flex;
    gap: 36px;
    margin-bottom: 24px;
    border-bottom: 1px solid #E4EAF4;
}

.platform-tab {
    background: none;
    border: none;
    padding: 14px 0;
    font-family: inherit;
    font-size: 20px;
    font-weight: 500;
    color: #161A37;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: .2s;
}

.platform-tab:hover {
    color: #3478dd;
}

.platform-tab.active {
    color: #3478dd;
    border-bottom-color: #3478dd;
}

.platform-content {
    display: none;
}

.platform-content.active {
    display: block;
}

#fullArticle .install-guide > .platform-tabs {
    margin-bottom: 20px;
}

.guide-title {
    font-size: 22px;
    margin-bottom: 24px;
}

#fullArticle p.guide-title {
    margin-top: 20px;
}

.guide-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}

.guide-steps > li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    margin-bottom: 18px;
    font-size: 20px;
    line-height: 1.5;
}

.step-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #EEF5FD;
    color: #3478dd;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.guide-icon {
    width: 22px;
    height: 22px;
    margin: 0 5px 0 3px;
    vertical-align: middle;
}

.guide-step-copy {
    min-width: 0;
    padding-top: 3px;
}

.guide-step-copy .guide-icon {
    display: inline-block;
    position: static;
    top: auto;
    flex: none;
    vertical-align: middle;
    transform: translateY(-1px);
}

.guide-dashboard-link {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    max-width: 100%;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.guide-dashboard-link svg {
    width: 17px;
    height: 17px;
    flex: none;
}

/* Download selector */
#fullArticle .dux-download-panel {
    margin: 24px 0 34px;
    color: #161a37;
    font-size: 16px;
    line-height: 1.4;
}

#fullArticle .dux-download-panel div,
#fullArticle .dux-download-panel span {
    margin-bottom: 0;
}

.dux-download-head {
    display: grid;
    grid-template-columns: minmax(230px, 30%) 1fr;
    padding: 18px 24px;
    border: 1px solid #e3e8f0;
    border-radius: 12px 12px 0 0;
    background: #f7f8fb;
    color: #4e5870;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.dux-download-platform {
    display: grid;
    grid-template-columns: minmax(230px, 30%) 1fr;
    margin-top: 8px;
    overflow: hidden;
    border: 1px solid #e1e6ed;
    border-radius: 12px;
    background: #fff;
}

.dux-platform-name {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 24px 20px;
}

.dux-platform-name > span:last-child,
.dux-download-copy,
.dux-download-security > span:last-child {
    display: flex;
    flex-direction: column;
}

.dux-platform-name strong,
.dux-download-copy strong,
.dux-download-security strong {
    color: #161a37;
    font-size: 17px;
    line-height: 1.3;
}

.dux-platform-name small {
    width: fit-content;
    margin-top: 7px;
    padding: 4px 9px;
    border-radius: 5px;
    background: #eef4ff;
    color: #2369c8;
    font-size: 12px;
    font-weight: 700;
}

.dux-platform-icon,
.dux-download-icon,
.dux-security-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid #e0e5ed;
    border-radius: 12px;
    background: linear-gradient(145deg, #fff, #f0f4fa);
    color: #246ed2;
}

.dux-platform-icon svg {
    width: 28px;
    height: 28px;
}

.dux-download-options {
    margin: 12px;
    overflow: hidden;
    border: 1px solid #e2e7ee;
    border-radius: 11px;
    box-shadow: 0 5px 14px rgba(22, 26, 55, .05);
}

#fullArticle a.dux-download-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 13px 14px;
    color: inherit;
    text-decoration: none;
}

#fullArticle a.dux-download-item + a.dux-download-item {
    border-top: 1px solid #e5e9ef;
}

.dux-download-item:hover {
    background: #fafcff;
}

.dux-download-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
}

.dux-download-icon svg {
    width: 20px;
    height: 20px;
}

.dux-download-copy small,
.dux-download-security small {
    margin-top: 2px;
    color: #68728a;
    font-size: 14px;
}

.dux-download-button {
    min-width: 92px;
    padding: 8px 14px;
    border-radius: 7px;
    background: #eef4ff;
    color: #3478dd !important;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.dux-download-security {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 14px;
    padding: 16px 20px;
    border: 1px solid #dce7f7;
    border-radius: 11px;
    background: #f4f8ff;
}

.dux-security-icon {
    width: 44px;
    height: 44px;
    border-color: #d8e5f7;
}

/* Installation guide */
#fullArticle .platform-switcher div {
    margin-bottom: 0;
}

.install-notice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 22px !important;
    padding: 14px 16px;
    border-left: 4px solid #f0b429;
    border-radius: 7px;
    background: #fff9e8;
    color: #4c5368;
    font-size: 16px;
}

.install-notice svg {
    width: 20px;
    height: 20px;
    flex: none;
    margin-top: 2px;
    color: #c98900;
}

.install-steps > li:first-child {
    margin-bottom: 22px;
}

.install-choices {
    display: grid;
    gap: 8px;
    margin: 12px 0 8px !important;
    padding: 0;
    list-style: none;
}

#fullArticle .install-choices li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin: 0;
    padding: 11px 12px;
    border: 1px solid #e1e7ef;
    border-radius: 8px;
    background: #fbfcfe;
    font-size: 15px;
    line-height: 1.35;
}

.install-choices li > span,
.install-choices li > span small {
    display: block;
}

.install-choices li > span small {
    margin-top: 2px;
    color: #6b748a;
}

#fullArticle .install-choices a {
    padding: 7px 10px;
    border-radius: 6px;
    background: #eef4ff;
    color: #3478dd !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.install-help {
    display: block;
    color: #657087;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 767px) {
    .dux-download-head {
        display: none;
    }

    .dux-download-platform {
        grid-template-columns: 1fr;
    }

    .dux-platform-name {
        padding-bottom: 12px;
    }

    .dux-download-options {
        margin-top: 0;
    }

    #fullArticle a.dux-download-item {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .dux-download-button {
        grid-column: 2;
        width: fit-content;
    }

    #fullArticle .install-choices li {
        grid-template-columns: 1fr;
    }

    #fullArticle .install-choices a {
        width: fit-content;
    }
}

@media (max-width: 767px) {
    header#mainNav .container-fluid,
    #contentArea.container-fluid {
        width: calc(100% - 40px) !important;
        margin-right: 20px !important;
        margin-left: 20px !important;
    }

    .footer-section {
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 44px 20px;
    }

    .footer-section > .container.w-container {
        width: 100%;
    }
}

strong{
    font-weight: 550;
}

.callout-red {
    background: #f4f6f8;
    border-left: 3px solid #6b7785;
    border-radius: 6px;
    padding: 12px 16px;
    margin: 16px 0;
}

.callout-red p {
    margin: 0;
    color: #2d333b;
}

#fullArticle strong[data-icon-added] svg,
#fullArticle b[data-icon-added] svg {
    width: 1em;
    height: 1em;
    stroke-width: 2.25;
    vertical-align: middle;
    margin-right: 0.35em;
}

/* Video tutorials article (test #809 / live #810 — see the
   video-tutorials-article body class set in the head script). The article
   title is hidden since the sidebar already shows it, and each H2 group's
   video embeds are laid out two-per-row instead of one huge full-width
   video at a time. Relies on #fullArticle's children being a flat list
   (h2, then its <div class="video-responsive"> embeds, then an <hr> before
   the next h2) — the same pattern used for every group, current and future. */
body.video-tutorials-article #fullArticle > h1.title {
    display: none;
}

body.video-tutorials-article #fullArticle > br {
    display: none;
}

body.video-tutorials-article #fullArticle {
    position: relative;
    padding-top: 36px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

body.video-tutorials-article #fullArticle > * {
    grid-column: 1 / -1;
}

/* Taken out of grid flow (grid ignores absolutely-positioned children) so
   hiding the h1 they used to sit beside doesn't leave them stranded in
   their own full-width row. */
body.video-tutorials-article #fullArticle > .printArticle,
body.video-tutorials-article #fullArticle > .admin-edit {
    position: absolute;
    top: 0;
    right: 0;
}

body.video-tutorials-article #fullArticle > .admin-edit {
    right: 40px;
}

body.video-tutorials-article #fullArticle > hr {
    width: 100%;
    margin: 8px 0;
    border: none;
    border-top: 1px solid rgba(22, 26, 55, 0.1);
}

body.video-tutorials-article #fullArticle .video-responsive {
    grid-column: auto;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(22, 26, 55, 0.08);
}

/* Section headline — the article's real h1 is hidden (see above), so each
   h2 group title carries the visual weight a page headline normally would. */
body.video-tutorials-article #fullArticle h2 {
    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;
}

/* Video card: thumbnail + title + description + "Watch video", built by
   enhanceVideoTutorialCards() in the head script. Swaps out for a plain
   playing iframe (.video-card-playing) on click. */
body.video-tutorials-article #fullArticle .video-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px;
    background: #fff;
}

body.video-tutorials-article #fullArticle .video-card-thumb {
    flex: 0 0 42%;
    position: relative;
    aspect-ratio: 16 / 9;
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: #11142b;
}

body.video-tutorials-article #fullArticle .video-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

body.video-tutorials-article #fullArticle .video-card-thumb:hover img {
    transform: scale(1.04);
}

body.video-tutorials-article #fullArticle .video-card-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

body.video-tutorials-article #fullArticle .video-card-play svg {
    width: 44px;
    height: 44px;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 50%;
    background: rgba(17, 20, 36, .74);
    color: #fff;
}

body.video-tutorials-article #fullArticle .video-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.video-tutorials-article #fullArticle .video-card-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: #161a37;
    margin: 0;
}

body.video-tutorials-article #fullArticle .video-card-desc {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #5f6980;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

body.video-tutorials-article #fullArticle .video-card-watch {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
    color: #3478dd;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
}

body.video-tutorials-article #fullArticle .video-card-watch svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
    transition: transform .15s ease;
}

body.video-tutorials-article #fullArticle .video-card-watch:hover svg {
    transform: translateX(2px);
}

@media (max-width: 767px) {
    body.video-tutorials-article #fullArticle .video-card {
        flex-direction: column;
        align-items: stretch;
    }

    body.video-tutorials-article #fullArticle .video-card-thumb {
        flex-basis: auto;
    }
}

#searchBar{
    position:relative;
}

.typed-overlay {
    color: #8892a0;
    font-size: 16px;
    padding-left: 22px; /* replaces left:22px — this nudges the text inward without moving the box */
}

.typed-caret {
    animation: blink 1s infinite;
}

@keyframes blink{
    50%{opacity:0;}
}

/* INTEGRATIONS */

 .nav-list li a[href="/category/434-hubspot"]:before {
    content: "";
    width: 16px; 
    height: 16px;
    margin-right: 10px;
    display: inline-block;
    background-image: url('https://www.hubspot.com/hubfs/HubSpot_Logos/HubSpot-Inversed-Favicon.png');
    background-size: cover; 
  }

  .nav-list li a[href="/category/435-pipedrive"]:before {
    content: "";
    width: 16px; 
    height: 16px;
    margin-right: 10px;
    display: inline-block;
    background-image: url('https://www.pipedrive.com/en/marketplace/favicon.ico');
    background-size: cover; 
  }
  
  .nav-list li a[href="/category/436-sharpspring"]:before {
    content: "";
    width: 16px; 
    height: 16px;
    margin-right: 10px;
    display: inline-block;
    background-image: url('https://sharpspring.com/wp-content/uploads/2019/06/cropped-SS_Favicon_2019-06-17_R3-32x32.png');
    background-size: cover; 
  }

  .nav-list li a[href="/category/437-woodpecker"]:before {
    content: "";
    width: 16px; 
    height: 16px;
    margin-right: 10px;
    display: inline-block;
    background-image: url('https://woodpecker.co/wp-content/uploads/2024/03/cropped-favicon-32x32.png');
    background-size: cover; /* or contain, depending on your preference */
  }

  
.nav-list li a[href="/category/439-zapier"]:before {
  content: "";
  width: 16px; /* Adjust width and height as needed */
  height: 16px;
  margin-right: 10px;
  display: inline-block;
  background-image: url('https://zapier.com/l/favicon-32.png?v=1');
  background-size: cover; /* or contain, depending on your preference */
}
  
.nav-list li a[href="/category/440-make"]:before {
  content: "";
  width: 16px; /* Adjust width and height as needed */
  height: 16px;
  margin-right: 10px;
  display: inline-block;
  background-image: url('https://res.cloudinary.com/imagist/image/fetch/q_auto,f_auto,c_scale,w_2624/https%3A%2F%2Fimages.ctfassets.net%2Fdm4oa8qtogq0%2F4LP1ix40a63dpOPZhila2Z%2F6d22ac51f33854d1e759e0f5fa3dd210%2Fmake-app-icon-circle.png');
  background-size: cover; /* or contain, depending on your preference */
}

.nav-list li a[href="/category/530-freshsales"]:before {
  content: "";
  width: 16px; 
  height: 16px;
  margin-right: 10px;
  display: inline-block;
  background-image: url('https://www.freshworks.com/favicons/favicon-32x32.png');
  background-size: cover;
}

.nav-list li a[href="/category/534-salesforce"]:before {
  content: "";
  width: 16px; 
  height: 16px;
  margin-right: 10px;
  display: inline-block;
  background-image: url('https://www.salesforce.com/c2/public/app/favicon.ico');
  background-size: cover;
}

.nav-list li a[href="/category/540-google-sheets"]:before {
  content: "";
  width: 16px; 
  height: 16px;
  margin-right: 10px;
  display: inline-block;
  background-image: url('https://ssl.gstatic.com/images/branding/product/1x/sheets_2020q4_32dp.png');
  background-size: cover;
}

.nav-list li a[href="/category/559-slack"]:before {
  content: "";
  width: 16px; 
  height: 16px;
  margin-right: 10px;
  display: inline-block;
  background-image: url('https://a.slack-edge.com/80588/marketing/img/meta/favicon-32.png');
  background-size: cover;
}

  .nav-list li a[href="/category/441-dux-soup-api-documentation"]:before {
    font-family: 'uicons-regular-rounded';
    content: "\f144";
    font-size: 16px;
    margin-right: 10px;
    display: inline-block;
  }

    .nav-list li a[href="/category/571-dux-soup-experimental-lab"]:before {
         font-family: 'uicons-regular-rounded';
            content: "\f549";
            font-size: 16px;
            margin-right: 10px;
            display: inline-block;
            }

.nav-list li a[href="/category/588-open-ai"]:before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 10px;
  display: inline-block;
  background-image: url('https://icons.getbootstrap.com/assets/icons/openai.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.nav-list li a[href="/category/592-claude"]:before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 10px;
  display: inline-block;
  background-image: url('https://www.google.com/s2/favicons?domain=claude.ai&sz=32');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.nav-list li a[href="/category/595-gemini"]:before {
  content: "";
  width: 16px; 
  height: 16px;
  margin-right: 10px;
  display: inline-block;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/5/51/Gemini_sparkle_v002.svg');
  background-size: cover;
}

.nav-list li a[href="/category/575-microsoft-teams"]:before {
  content: "";
  width: 16px; 
  height: 16px;
  margin-right: 10px;
  display: inline-block;
  background-image: url('https://statics.teams.cdn.live.net/evergreen-assets/icons/Teams_Logo_v2025_80x80.png');
  background-size: cover;
}

.nav-list li a[href="/category/599-mcp"]::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 10px;
  display: inline-block;

  background-image: url("https://raw.githubusercontent.com/modelcontextprotocol/docs/573dc60c2e7aab2605b29d0bf27194aa7b02e4fb/favicon.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.nav-list li a[href="/category/582-go-high-level"]::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 10px;
  display: inline-block;

  background-image: url('https://assets.cdn.filesafe.space/knES3eSWYIsc5YSZ3YLl/media/67a111ed98bf1c203563b0a5.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 140%; /* 👈 cuts ~20% padding */
}