/* Hero video modal - covers the full viewport, dims/blurs everything
   behind it, close control is a plain white X above the video.
   Page-scoped to the homepage (.dynamic-home) only, so it does not affect any
   other page that reuses hero_section/handleVideoPlayer(). */
.dynamic-home .c-hero_section .video-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-color: rgba(25, 49, 71, 0.45) !important;
}
.dynamic-home .c-hero_section .video-wrapper .bg {
  width: 100%;
  max-width: 715px;
  margin: 0;
  padding: 0;
}
.dynamic-home .c-hero_section .video-wrapper .bg iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 711 / 400;
}
.dynamic-home .c-hero_section .video-wrapper .bg .close {
  position: absolute;
  right: -34px;
  top: -34px;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cline x1='20' y1='80' x2='80' y2='20' stroke='%23fff' stroke-width='10' stroke-linecap='round'/%3E%3Cline x1='80' y1='80' x2='20' y2='20' stroke='%23fff' stroke-width='10' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 22px;
}
@media (max-width: 800px) {
  .dynamic-home .c-hero_section .video-wrapper .bg .close {
    right: -6px;
    top: -34px;
  }
}
.dynamic-home .c-industries_showcase {
    color: #4b5563;
    background: linear-gradient(#f1f7ff 0%, #fff 100%);
    margin-top: 0;
    padding: 120px 20px 63px;
    text-align: center;
}
.gray {
    background: none !important;
}
    
.ai-gradient {
    background: transparent linear-gradient(242deg, #0268FE 0%, #FD7BB1 100%) 0 0 no-repeat padding-box;
    color: white;
    padding-bottom: 40px;
}
.lite-gradient {
    background: transparent linear-gradient(62deg, #F1F7FF 0%, #FFFFFF 100%) 0 0 no-repeat padding-box;
    padding-bottom: 60px;
    margin-bottom: -20px;
}
.c-ai_promo {
    /* Bottom matches the other desktop section gaps down the page (120px,
       combined with .c-results_carousel's own 20px top padding). */
    margin: 16px 0 100px;
    padding: 0 20px;
    box-sizing: border-box;
}
.c-ai_promo .ai-promo-container {
    max-width: 1180px;
    margin: 0 auto;
}
.ai-promo-box {
    background: linear-gradient(242deg, #0268FE 0%, #FD7BB1 100%);
    color: white;
    /* Matches the "And there's more" tiles' own corner radius
       (.dynamic-home .c-text_tiles_container .c-tile), on both desktop and
       mobile - this box has no separate mobile rule of its own. */
    border-radius: 20px;
    padding: 56px 64px;
    display: flex;
    align-items: center;
    gap: 44px;
    box-shadow: 0 25px 50px -30px rgba(2, 104, 254, 0.45);
}
.ai-promo-content {
    flex: 1;
}
.ai-promo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 16px;
}
.ai-promo-eyebrow-logo {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.ai-promo-content h2 {
    font-size: 2em;
    line-height: 1.2em;
    margin: 0 0 14px;
    color: white;
}
.ai-promo-content p {
    font-size: 1.1em;
    line-height: 1.6em;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 26px;
    max-width: 640px;
}
.ai-promo-btn {
    display: inline-block;
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
    font-weight: 700;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.ai-promo-btn:hover {
    background-color: #fff;
    color: #0268FE;
    transform: translateY(-2px);
}
.ai-promo-demo {
    flex-shrink: 0;
    width: 320px;
}
.ai-demo-window {
    position: relative;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 22px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ai-demo-field {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 10px;
    padding: 12px 14px;
    color: #0268FE;
    font-size: 0.85em;
    font-weight: 600;
    margin-bottom: 14px;
    min-height: 18px;
    white-space: nowrap;
    overflow: hidden;
}
.ai-demo-typing {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
    width: 0;
    animation: ai-demo-type 4s ease-in-out infinite;
}
.ai-demo-caret {
    display: inline-block;
    width: 2px;
    height: 14px;
    background: #0268FE;
    vertical-align: middle;
    margin-left: 1px;
    animation: ai-demo-caret-blink 0.8s step-end infinite;
}
.ai-demo-button {
    position: relative;
    background: #FF4D9D;
    color: white;
    font-weight: 700;
    font-size: 0.9em;
    text-align: center;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 8px 18px -8px rgba(196, 24, 105, 0.6);
    animation: ai-demo-btn-press 4s ease-in-out infinite;
}
.ai-demo-cursor {
    position: absolute;
    right: -2px;
    bottom: -12px;
    width: 20px;
    height: 20px;
    animation: ai-demo-cursor-move 4s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
    pointer-events: none;
}
.ai-demo-cursor svg {
    width: 100%;
    height: 100%;
}
@keyframes ai-demo-type {
    0% { width: 0; }
    40% { width: 178px; }
    76% { width: 178px; }
    86%, 100% { width: 0; }
}
@keyframes ai-demo-caret-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
@keyframes ai-demo-cursor-move {
    0%, 42% { transform: translate(16px, 16px); opacity: 0; }
    52% { transform: translate(0, 0); opacity: 1; }
    58% { transform: translate(0, 0) scale(0.8); }
    66% { transform: translate(0, 0) scale(1); }
    78%, 100% { transform: translate(0, 0); opacity: 0; }
}
@keyframes ai-demo-btn-press {
    0%, 54% { background: #FF4D9D; box-shadow: 0 8px 18px -8px rgba(196, 24, 105, 0.6); }
    59%, 67% { background: #F02D8A; box-shadow: 0 13px 24px -8px rgba(196, 24, 105, 0.78); }
    74%, 100% { background: #FF4D9D; box-shadow: 0 8px 18px -8px rgba(196, 24, 105, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
    .ai-demo-typing {
        animation: none;
        width: auto;
    }
    .ai-demo-caret, .ai-demo-cursor {
        animation: none;
        opacity: 0;
    }
    .ai-demo-button {
        animation: none;
    }
}
@media (max-width: 800px) {
    .dynamic-home .gray.gray-blank {
        padding-top: 18px;
    }
    .c-ai_promo {
        margin: 21px 0 60px;
    }
    .ai-promo-box {
        flex-direction: column;
        text-align: center;
        padding: 40px 28px;
        gap: 24px;
    }
    .ai-promo-content p {
        max-width: none;
    }
    .ai-promo-eyebrow {
        justify-content: center;
    }
    .ai-promo-demo {
        width: 100%;
        max-width: 340px;
    }
}

    
.showcase-heading {
    font-size: var(--h2-size);
    color: #4B5563;
    margin: 0;
}
/* The standalone "From $X/mo" statement - the boss's brief was to make the
   price itself the clear, stand-alone headline moment, with the CTA button
   below going back to being just a button. data-showcase-price is the hook
   the geo-pricing script updates; pricing_from_price is only the
   CMS-editable default shown until it runs. */
.c-industries_showcase .showcase-price-standalone {
    margin: 18px 0 0;
    font-size: 1.7em;
    line-height: 1.2;
}
.showcase-price-standalone-lead {
    font-weight: 500;
    color: var(--secondary-text-color);
    margin-right: 0.2em;
}
.showcase-price-standalone-value {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #369AFE;
}
/* Holds its own width so the line doesn't visibly reflow once the
   geo-pricing script swaps the placeholder text for the localized price -
   toggle this class from that script while the lookup is in flight. */
.showcase-price-standalone.is-loading .showcase-price-standalone-value {
    display: inline-block;
    width: 3.6em;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(90deg, #E7ECF3 25%, #F4F7FB 37%, #E7ECF3 63%);
    background-size: 400% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: showcasePriceShimmer 1.4s ease infinite;
    border-radius: 4px;
}
@keyframes showcasePriceShimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .showcase-price-standalone.is-loading .showcase-price-standalone-value {
        animation: none;
        background: #ECEFF4;
    }
}
/* The optional small print the paragraph copy became - "if desired" per the
   brief, so it's dropped entirely (see the  if text.length > 0  guard in
   the template) rather than left as an empty paragraph when a page omits it. */
.c-industries_showcase .showcase-footnote {
    margin: 40px auto 0;
    max-width: 700px;
    font-size: 0.9em;
    color: var(--secondary-text-color);
}
.showcase-venues {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px 40px;
    margin: 36px auto 0;
}
.showcase-venue {
    /* Equal-width columns regardless of label length - without this, a long
       label (e.g. "Bars, restaurants etc.") widens only its own flex item,
       which throws the icon row out of visual symmetry even though the row
       itself is centered (the middle icon lands off from true centre). */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-decoration: none;
    width: 190px;
}
.showcase-venue-icon {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.showcase-venue-icon svg {
    width: 52px;
    height: 52px;
}
.showcase-venue:hover .showcase-venue-icon {
    transform: translateY(-4px);
}
.showcase-venue-name {
    font-size: 1.15em;
    font-weight: bold;
    color: #F1F1F1;
}
.dynamic-home .showcase-venue-name {
    color: #4B5563;
}
.showcase-venue-hotels .showcase-venue-icon {
    color: #856CFF;
    background: linear-gradient(135deg, #F1ECFF 0%, #FFFFFF 100%);
    border-color: rgba(133, 108, 255, 0.4);
}
.showcase-venue-hotels:hover .showcase-venue-icon {
    box-shadow: 0 14px 28px -14px rgba(133, 108, 255, 0.6);
}
.showcase-venue-bars .showcase-venue-icon {
    color: #E26DD2;
    background: linear-gradient(135deg, #FCE7F5 0%, #FFFFFF 100%);
    border-color: rgba(226, 109, 210, 0.4);
}
.showcase-venue-bars:hover .showcase-venue-icon {
    box-shadow: 0 14px 28px -14px rgba(226, 109, 210, 0.6);
}
.showcase-venue-malls .showcase-venue-icon {
    color: #369AFE;
    background: linear-gradient(135deg, #E5F2FF 0%, #FFFFFF 100%);
    border-color: rgba(54, 154, 254, 0.4);
}
.showcase-venue-malls:hover .showcase-venue-icon {
    box-shadow: 0 14px 28px -14px rgba(54, 154, 254, 0.6);
}
.c-industries_showcase .call {
    margin-top: 32px;
}
/* Plain CTA button - auto-width (PL/ES copy runs longer than English), so it
   borrows the same technique as the PL/ES "All supported devices" button
   above: an inline SVG rect sized to 100% of the box instead of a
   fixed-width one, which keeps the draw-the-border hover animation every
   other .animated-button on the site uses. */
.showcase-cta-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    border-radius: 30px;
    padding: 18px 32px;
    font-weight: 600;
    color: #369AFE;
    text-decoration: none;
    white-space: nowrap;
}
.showcase-cta-button-outline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.showcase-cta-button-outline rect {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    x: 2px;
    y: 2px;
    fill: none;
    stroke: #369AFE;
    stroke-width: 1.5;
    /* Same dash numbers as .animated-button svg rect / .animated-button:hover
       svg rect (the hero "Watch the Video" button) - a zero-length gap
       always draws as one solid line regardless of this button's actual
       perimeter, so the default state matches exactly; the hover dash
       pattern is reused as-is (same approximation the PL/ES auto-width
       hw-devices-btn already relies on) so the hover reads identically
       everywhere. Solid stroke rather than the hero's gradient - matches
       the button's solid #369AFE text. */
    stroke-dasharray: 353, 0;
    stroke-dashoffset: 0;
    transition: all 600ms ease;
}
.showcase-cta-button:hover .showcase-cta-button-outline rect {
    stroke-dasharray: 111 300;
    stroke-dashoffset: 200;
}
.dark-box-mobile {
    display: none;
}
@media (max-width: 600px) {
    /* Matches .c-industries_showcase h2's own mobile size rule (elsewhere in
       this file) - .showcase-price-standalone is a <p>, not an h2, so it
       isn't reached by that selector and needs the same value repeated here
       to stay the same size as the heading above it. */
    .c-industries_showcase .showcase-price-standalone {
        font-size: var(--mobile-header-size);
        margin-top: 28px;
    }
    .showcase-venues {
        gap: 20px;
    }
    /* The desktop 200px column width exists to keep the (desktop-only)
       labels equal-width for symmetry - on mobile the label is hidden, so
       that fixed width just overflows the viewport with 3 columns and
       forces flex-wrap to stack them, one per row, instead of side by side. */
    .showcase-venue {
        width: auto;
    }
    .showcase-venue-icon {
        width: 76px;
        height: 76px;
    }
    .showcase-venue-icon svg {
        width: 34px;
        height: 34px;
    }
    .showcase-venue-name {
        display: none;
    }
    .c-industries_showcase {
        padding-top: 120px;
        padding-bottom: 40px;
    }
    .showcase-venues {
        margin-top: 36px;
    }
    .c-industries_showcase .call {
        margin-top: 32px;
    }
    .showcase-cta-button {
        padding: 15px 26px;
        font-size: 0.95em;
    }
    .showcase-footnote {
        margin-top: 28px;
    }
    /* Beats the generic (pre-redesign) .c-industries_showcase h2 mobile
       size rule by specificity (2 classes vs. 1 class + element) - matches
       the WhatsApp promo headline's mobile size (2em) so "Pricing that
       won't change" lines up with the other homepage section headlines. */
    .dynamic-home .showcase-heading {
        font-size: 2em;
    }
}
.c-product_stories, .gray, .new-industry, footer, .footer-border {
    visibility: visible;
}
.gray {
  padding: 50px 20px;
  overflow: hidden;
  max-width: 1920px;
  margin: 0 auto;
}
.center {
    text-align: center;
}
.gray {
    background: transparent linear-gradient(42deg, #F1F7FF 0%, #FFFFFF 100%) 0 0 no-repeat padding-box;
}
.white {
    background: none;
    background-color: white;
    padding: 0 !important;
}
.gradient-page {
    background: transparent linear-gradient(180deg, #F1F7FF 0%, #FFFFFF 100%) 0 0 no-repeat padding-box;
}
.gray .headline {
    font-size: 1.8em;
    margin-bottom: 10px;
}
.gray h1 {
    font-size: 2.8em;
}
.gray p, .aside-text li {
    font-size: 1.1em;
    line-height: 1.6em;
    margin-top: 5px;
    margin-bottom: 5px;
}
.new-industry p {
    font-size: 1.1em;
}
.gray p a {
    color: #369AFE;
}
.gray p a:hover {
    color: #004FA1;
}
.gray.legacy {
    max-width: var(--max-width);
}
.gray.legacy h2, .gray.legacy h3, .gray.legacy h4 {
    margin-top: 30px;
}
.gray.legacy p {
    line-height: 1.6em;
}
.gray.legacy ul {
    font-size: 1.1em;
    line-height: 1.6em;
    padding-left: 20px;
}
.gray article {
    max-width: var(--max-width);
    margin: 0 auto;
}



.gray .below-integration .more a {
    background-color: var(--secondary-background-color);
    padding: 10px 50px;
    border-radius: 15px;
    color: var(--text-color);
    font-size: 1.6em;
    text-decoration: none;
}
section.headline {
    margin: 0 auto;
    margin-top: 90px;
    text-align: center;
    margin-bottom: 50px;
    padding: 0 20px;
    max-width: var(--max-width);
}
section.headline .blog-title {
    max-width: 70%;
    margin: 0 auto;
    text-align: left;
}
section.headline h1 {
    font-size: 46px;
    margin-bottom: 15px;
}
section.headline h1 span {
    display: inline-block;
    background: transparent linear-gradient(90deg, #369AFE 0%, #00fff8 100%) 0 0 no-repeat padding-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
section.headline p {
    margin-top: 10px;
    margin-bottom: 50px;
    font-size: 1.25em;
    line-height: 1.4em;
}
.underline {
    border-bottom: 4px solid var(--sw-color);
    padding: 5px;
    margin: 5px auto;
    max-width: 200px;
    margin-bottom: 35px;
}



.c-tiles_container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 35px;
    grid-row-gap: 35px;
    margin-bottom: 60px;
}
.gradient-tiles .c-tiles_container {
    grid-template-columns: 1fr 1fr;
    max-width: 980px !important;
}
.c-tiles-dark .c-tiles_container {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-bottom: 0;
}
.c-tiles_container.tiles_container-stand-alone {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    grid-column-gap: 55px;
}
.c-tiles_container.tiles-bottom-normal {
    margin-bottom: 50px;
    margin-top: -20px;
}
.tile-title {
    text-align: center;
    font-size: var(--h2-size);
    margin-top: 90px;
    margin-bottom: 50px;
}
.tile-headline {
    font-weight: normal;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    margin-top: -20px;
    margin-bottom: 60px;
    font-size: 1.3em;
}
.c-tiles_container .c-tile {
    background-repeat: no-repeat;
    background-size: 50px auto;
    background-position: 50% 35px;
    padding: 20px;
    padding-top: 120px;
    background-color: var(--secondary-background-color);
    box-shadow: 0 3px 6px #e5e4e7;
    border-radius: 18px;
    text-align: center;
}
.c-text_tiles_container .c-tile a {
    display: block;
}
.c-tiles_container .c-tile.c-lottie-tile {
    padding-top: 20px;
}
.lottie-box {
    width: 110px;
    height: 110px;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-bottom: 15px;
}
.c-tiles-dark .c-tiles_container .c-tile {
    background-color: var(--text-color);
    border: 2px solid white;
    box-shadow: none;
    color: white;
    padding-top: 65px;
    padding-bottom: 70px;
}

.c-tiles_container h2 {
    font-size: 3.3em;
    color: var(--secondary-text-color);
}
.c-tiles_container .c-first {
    padding: 20px;
}
.c-tiles_container .c-tile h3 {
    font-size: 1.6em;
    font-weight: 600;
    margin-bottom: 10px;
}
.c-tiles_container .c-tile p {
    margin: 0;
    line-height: 1.5em;
}
.c-tiles-dark .c-tiles_container .c-tile h3 {
    font-weight: bold;
    font-size: 3.7em;
}
@media (max-width: 1370px) {
    .c-tiles-dark .c-tiles_container .c-tile h3 {
        font-size: var(--mobile-header-size);
    }
    .aside-question-list, .c-tiles_container.tiles_container-stand-alone {
        max-width: none;
        margin: 40px 20px;
    }
}


.ai-header-link {
    background-image: url('/media/static/assets/ai1.svg');
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    padding: 15px 20px;
    position: absolute;
    top: 20px;
    margin-left: -50px;
}


.new-industry {
    overflow: hidden;
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F7FF 100%);
}

@media (max-width: 950px) {
    .blog-details, section.headline .blog-title, .join {
        max-width: none;
    }
    .gray .infinity {
        background-image: none;
    }
    .aside-text {
        flex-direction: column;
    }
    .aside-text .image {
        height: 300px;
        flex-basis: unset;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }
}
@media (max-width: 750px) {
    .gray .infinity {
        min-height: 200px;
    }
    .gray .infinity .sw, .gray .infinity .logo {
        width: 180px;
        height: 180px;
        padding: 10px;
    }
    .gray .below-integration .integrations {
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 15px;
        grid-row-gap: 10px;
    }
    .gray .below-integration .integrations .image a {
        min-height: 125px;
    }
    .gray .below-integration .integrations h3 {
        font-size: 1.5em;
    }
    .aside-text .text {
        padding: 20px 20px;
    }
    .blog-details .grid:first-of-type, .blog-details .grid {
        grid-template-columns: 1fr;
        grid-row-gap: 25px;
    }
    .case-study {
        margin-top: 40px;
    }
    .case-study .case {
        padding: 0 !important;
    }
}
@media (max-width: 470px) {
    .gray .infinity .sw {
        display: none;
    }
    .gray .infinity .logo {
        top: auto;
        right: auto;
        position: relative;
        margin: 0 auto;
        width: 240px;
        height: 240px;
    }
    .aside-text .image {
        border-bottom-right-radius: 15px;
        border-bottom-left-radius: 15px;
    }
    .gray .below-integration .integrations .image a {
        min-height: 100px;
    }
    .gray .below-integration .integrations h3 {
        font-size: 1.3em;
    }
}
@media (max-width: 370px) {
    .gray .below-integration .integrations {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .latest-post aside {
        grid-template-columns: 1fr;
    }
    .latest-post .side-customer-image {
        grid-column-start: 1;
        grid-row-start: 1;
    }
    .latest-post aside img {
        max-width: 100%;
        border-radius: 10px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .latest-post aside h3, .post-list .item h3, .latest-post h3 {
        font-weight: 500;
        font-size: var(--mobile-headline-size);
    }
    .dynamic .c-hero_section.c-image-hero.c-blog_hero p {
        font-size: var(--mobile-headline-size);
    }
    .dynamic.blog-dynamic .aside-text p, .gray p {
        font-size: var(--mobile-text-size);
    }
    .dynamic.blog-dynamic .aside-text p strong, section.headline p, .blog-details h3 {
        font-size: var(--mobile-headline-size);
    }
    .dynamic .c-hero_section.c-blog_hero ul li, .dynamic .c-image-hero.c-blog_hero a, .dynamic .c-hero_section.c-blog_hero ul .vsite {
        text-align: left;
        font-size: var(--mobile-text-size);
    }
    .c-quote_box blockquote {
        padding: 0;
        margin: 0;
    }
    section.headline h1 {
        font-size: var(--mobile-header-size);
    }
    .gray {
        margin-bottom: 30px;
    }
    .gray .below-integration {
        margin-bottom: 20px;
    }
    .contact-extras {
        margin-bottom: 0;
    }
    .gray .below-integration .integrations {
        margin: 0;
    }
    section.headline, section.headline p {
        margin-bottom: 0;
    }
    .contact-extras .call .as-alter-button {
        width: auto;
    }
    .contact-extras .call .as-alter-button a {
        padding: 10px 30px;
    }
    .contact-extras h2, .integration-tiles .tile-title, .integration-others {
        font-size: var(--mobile-header-size);
    }
    .integration-grid {
        margin: 40px auto;
    }
    .integration-tiles .tile-title {
        text-align: center;
    }
    .latest-post aside img {
        height: auto;
    }
}
.white h1 {
    margin-top: 60px;
    font-size: var(--h1-size);
}
@media (max-width: 1250px) {
   img {
       width: auto;
       height: auto;
       max-width: 100%;
   }
}
@media (max-width: 600px) {
    .ai-header-link {
        display: block;
        width: 5px;
        margin: 0 auto;
        margin-bottom: 15px;
        position: relative;
        top: 0 !important;
    }
}

    .join {
    max-width: var(--max-width);
    margin: 0 auto;
    margin-bottom: 120px;
    margin-top: 60px;
    text-align: center;
}
.join .site-box {
    /* Brand blue, matching this card's own border gradient. It used to be the violet
       borrowed from the Email Marketing box, which at 9% over white read as pink. */
    background: radial-gradient(circle at 88% 12%, rgba(54, 154, 254, 0.09) 0%, rgba(54, 154, 254, 0) 45%), linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%);
    border-radius: 28px;
    box-shadow: 0 4px 18px rgba(20, 40, 80, 0.1);
    padding: 64px 40px;
    position: relative;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Homepage only, above 650px (the width where the mobile rules below take over
   and force max-width:none anyway): .join was sitting at the site-wide
   --max-width (1300px) while the "Plus so much more" tiles section right above
   it is capped at 1180px, so the box read wider than everything above it.
   Bottom padding also gets trimmed - about 35% less empty space under
   "Get started" before the card ends. */
@media (min-width: 651px) {
    .dynamic-home .join,
    .reseller-page .join,
    .white-label-page .join {
        max-width: 1220px;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .dynamic-home .join .site-box,
    .reseller-page .join .site-box,
    .white-label-page .join .site-box {
        padding-bottom: 42px;
    }
}
.join .site-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(20, 40, 80, 0.16);
}
.join .site-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.75px;
    background: linear-gradient(135deg, rgba(54, 154, 254, 0.5) 0%, rgba(0, 255, 248, 0.5) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.join ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 32px 60px;
    margin-top: 48px;
    margin-bottom: 40px;
}
.join img {
    max-width: 150px;
}
.join .header, .join h1, .join .header b {
    font-weight: bold;
    font-size: 48px;
    line-height: 110%;
    letter-spacing: -1px;
    margin: 0;
    color: #4B5563;
}
.join .site-box > p {
    color: #4B5563;
}
.join .header b {
    background: transparent linear-gradient(90deg, #369AFE 0%, #00fff8 100%) 0 0 no-repeat padding-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.join li span:last-child {
    font-weight: 600;
    color: #369AFE;
    font-size: 1em;
    white-space: nowrap;
}
.join ul {
    padding: 0;
}
.join li {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}
.join .tick-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin-bottom: 12px;
    position: relative;
    background: linear-gradient(135deg, #E5F2FF 0%, #FFFFFF 100%);
    border: 1.5px solid #369AFE;
    color: #369AFE;
    flex-shrink: 0;
}
.join .tick-circle svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.4;
}
.join img {
    display: block;
    border-radius: 5px;
    padding: 6px 5px;
    position: absolute;
    top: 4px;
    left: 0;
}
.join ul span {
    display: inline-block;
}
.join .customer-logos img {
    opacity: 0.3;
}
.join .call {
    margin-top: 60px;
    font-weight: bold;
    font-size: 1.2em;
}



@media (max-width: 650px) {
    .join {
        max-width: none;
        margin-left: 20px;
        margin-right: 20px;
    }
    .join .site-box {
        padding: 40px 24px 28px;
        border-radius: 20px;
    }
    .join .site-box > p {
        font-size: 0.98em;
        line-height: 1.55em;
    }
    .join .call {
        margin-top: 24px;
    }
    .join .call .as-alter-button {
        width: auto;
    }
    .join .call .as-alter-button a {
        padding: 10px 30px;
    }
    .join ul {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
        margin-top: 24px;
        margin-bottom: 20px;
    }
    .join li {
        flex: 1 1 0;
        min-width: 0;
    }
    .join .tick-circle {
        width: 40px;
        height: 40px;
        margin-bottom: 8px;
    }
    .join .tick-circle svg {
        width: 18px;
        height: 18px;
    }
    .join li span:last-child {
        font-size: 0.8em;
        white-space: normal;
    }
}
@media (max-width: 430px) {
    .join .header, .join .header b {
        font-size: 24px;
    }
    .join .header b {
        display: inline;
    }
    .join {
        margin-top: 0;
    }
}


    
/* ---------- Footer --------- */
footer {
    background: linear-gradient(120deg, #193147 0%, #2C5578 60%, #3C6D95 100%);
    color: var(--background-color);
    line-height: 1.8em;
    padding: 0;
    overflow: hidden;
}
footer .bottom {
    padding-top: 5px;
    max-width: var(--max-width);
    margin: 0 auto;
    margin-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    display: grid;
    grid-template-columns: 35% 65%;
    grid-column-gap: 20px;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.65);
}
footer .bottom span {
    display: inline-block;
    margin-right: 15px;
}
footer .bottom .legal {
    text-align: right;
    padding-right: 5px;
}
footer .bottom .region {
    background-image: url('/media/static/assets/region_icon.svg');
    background-repeat: no-repeat;
    background-size: 30px auto;
    padding-left: 35px;
}
footer .bottom .region select {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.65);
    border: 0;
}

footer .logo {
    max-width: 250px;
    margin-bottom: 10px;
    display: block;
}
.footer-border {
    background: transparent linear-gradient(90deg, #369AFE 0%, #00fff8 100%) 0 0 no-repeat padding-box;
    height: 5px;
    overflow: hidden;
}
footer .grid {
    display: grid;
    grid-template-columns: 35% 65%;
    grid-column-gap: 20px;
    max-width: var(--max-width);
    margin: 0 auto;
}
footer .company-info {
    padding: 30px;
}
footer .company-info p {
    max-width: 65%;
    line-height: 1.5em;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 300;
}
footer nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 20px;
    padding: 30px;
}
footer a {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9em;
}
footer a:hover {
    color: #FFFFFF;
}
footer ul {
    padding: 0;
    margin: 0;
}
footer li {
    list-style-type: none;
    line-height: 1.8em;
}
footer .headline {
    list-style-type: none;
    margin-bottom: 10px;
    font-size: 1.1em;
    font-weight: 600;
}

footer .legal a {
    margin-right: 15px;
}
footer .social {
    margin-top: 35px;
}
footer .social a {
    background-repeat: no-repeat;
    /* The ring width is baked into the source SVGs' own path geometry, not a
       stroke-width this stylesheet can reach (they're plain background-images,
       not inline <svg>) - sized down slightly instead, which reads as a finer,
       more delicate ring since it scales down with the rest of the glyph. */
    background-size: 34px auto;
    padding: 20px;
    display: inline-block;
    margin-right: 20px;
    transition: background-image 0.3s ease-in-out, filter 0.2s ease;
    /* The outline icons are #707070 - built for a light background, so on the
       gradient they read as barely-there. brightness(0) invert(1) turns any solid
       colour into pure white without needing separate white SVG exports; removed
       on hover so the brand-coloured artwork (facebook.svg etc) shows as drawn. */
    filter: brightness(0) invert(1);
}
footer .social a:hover {
    filter: none;
}
.fb {
    background-image: url('/media/static/assets/social_media/facebook_grey.svg');
}
.fb:hover {
    background-image: url('/media/static/assets/social_media/facebook.svg');
}

.in {
    background-image: url('/media/static/assets/social_media/instagram_grey.svg');
}
.in:hover {
    background-image: url('/media/static/assets/social_media/instagram.svg');
}

.ln {
    background-image: url('/media/static/assets/social_media/linkedin_grey.svg');
}
.ln:hover {
    background-image: url('/media/static/assets/social_media/linkedin.svg');
}

.tw {
    background-image: url('/media/static/assets/social_media/X_grey.svg');
}
.tw:hover {
    background-image: url('/media/static/assets/social_media/X.svg');
}

.yt {
    background-image: url('/media/static/assets/social_media/youtube_grey.svg');
}
.yt:hover {
    background-image: url('/media/static/assets/social_media/Youtube.svg');
}

@media (max-width: 1500px) {
    footer .company-info p {
        max-width: none;
    }
}
@media (max-width: 1100px) {
    footer .grid {
        grid-template-columns: 1fr;
        grid-row-gap: 0;
    }
    footer .legal {
        margin-top: 20px;
    }
}
@media (max-width: 750px) {
    footer .bottom {
        grid-template-columns: 1fr;
    }
    footer nav {
        grid-template-columns: 1fr 1fr;
    }
    footer .bottom .region {
        background-position: 10px 50%;
        padding-left: 45px;
    }
    footer .bottom .legal {
        text-align: left;
        padding: 20px;
    }
}
@media (max-width: 580px) {
    footer nav {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px) {
    footer .social a {
        background-size: 30px auto;
        padding: 15px;
    }
}
/* ---------- END Footer --------- */
@media (max-width: 500px) {
    footer ul li {
        display: none;
    }

    footer ul .headline {
        display: block;
        background-image: url("/media/static/assets/arrow-down.svg");
        background-repeat: no-repeat;
        background-position: 100% 50%;
        background-size: 20px auto;
        cursor: pointer;
    }

    footer ul.reveal li {
        display: block;
    }

    footer .headline:hover {
        background-image: url("/media/static/assets/arrow-down-active.svg");
        color: #369afe;
    }

    footer ul.reveal .headline {
        background-image: url('/media/static-preexisting/menu/arrow-down-active.svg');
        color: #369afe;
    }
}
    
#wa_btn-content {
    opacity: 0;
}
#wa-btn-wrapper {
    background-image: url('/media/static/assets/chat-desktop.svg');
    background-repeat: no-repeat;
    background-size: 220px auto;
    width: 225px;
    height: 65px;
    right: 25px !important;
    bottom: 25px !important;
}