:root {
    --background-color: #F1F1F1;
    --secondary-background-color: #fff;
    --text-color: #191C1F;
    --secondary-text-color: #5C6B80;
    --link-color: #191C1F;
    --max-width: 1300px;
    --sw-color: #369AFE;
    color-scheme: light only;
    --h1-size: 4.2em;
    --h1-size-alt: 3.4em;
    --h2-size: 2.5em;
    --h3-size: 1.8em;
    --mobile-text-size: 16px;
    --mobile-headline-size: 20px;
    --mobile-header-size: 30px;
}
@font-face {
  font-family: "Inter";
  src: url('/media/static/font/InterVariable.woff2');
  font-weight: 100 900;
  font-display: swap;
}

html {
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    color: var(--text-color);
    scroll-behavior: smooth;
    scrollbar-color: #c2cad6 #f4f7fb;
}
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: #f4f7fb;
}
::-webkit-scrollbar-thumb {
    background-color: #c2cad6;
    border-radius: 10px;
    border: 3px solid #f4f7fb;
}
body * {
  scroll-margin-top: 50px;
}
textarea, input {
    font-family: "Inter", system-ui, -apple-system, sans-serif;
}
body {
    padding: 0;
    margin: 0;
    padding-top: 40px;
}
footer {
    background-color: var(--secondary-background-color);
    padding: 20px;
}
img {
    max-width: 100%;
}
ol li {
    line-height: 1.6em;
}

a {
    color: var(--link-color);
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
h1, h2, h3, h4, h5 {
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    margin: 0;
    line-height: 1.2em;
    font-weight: bold;
}


/* ---------- HEADER --------- */
header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1000;
    font-size: 1.05em;
    background: white;
    box-shadow: 0 0 20px #00000029;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: top 0.3s;
}
header .menu-toggle {
    position: relative;
    display: none;
}
header #burger {
    display: flex;
    width: 30px;
    height: 30px;
    position: absolute;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    top: 9px;
    right: 20px;
}
header nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 1920px;
    margin: 0 auto;
}
header .main-grid {
    flex-grow: 1;
}
header .main-grid .container {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    grid-column-gap: 5px;
    margin: 0 auto;
    max-width: 690px;
}

header .logo {
    background-image: url('/media/static/logo-gradient.svg');
    background-size: 190px auto;
    background-repeat: no-repeat;
    background-position: 20px 45%;
    min-width: 250px;
}
header .as-svg-button a {
    min-width: 85px;
}
.dropdown {
    position: relative;
}
.dropdown, .link a, .menu-toggle {
    border: 2px solid transparent;
    padding: 25px 0;
    text-align: center;
    display: block;
    cursor: pointer;
}
.dropdown span {
    color: var(--link-color);
    background-image: url('/media/static-preexisting/menu/arrow-down.svg');
    background-repeat: no-repeat;
    background-position: 100% 50%;
    background-size: 15px auto;
    padding-right: 19px;

}
.dropdown span:hover, .dropdown a:hover, .link a:hover {
    text-decoration: none !important;
    color: var(--sw-color);
}
.dropdown span:hover {
    background-image: url('/media/static-preexisting/menu/arrow-down-active.svg');
}

.dropdown .dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--secondary-background-color);
    line-height: 1.8em;
    box-shadow: 0 5px 6px #00000029;
    text-align: left;
    font-size: 0.9em;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.dropdown .dropdown-content h4 {
    padding-bottom: 10px;
    margin-top: 10px;
}
.dropdown .dropdown-content a {
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 10% 50%;
    padding-bottom: 5px;
    position: relative;
    padding-left: 28px;
}
.dropdown-content .grid-menu {
    display: grid;
    grid-template-columns: 580px 360px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.dropdown-content .grid-menu .cover {
    background-image: url('/media/static/menu/menu-aside1.jpg');
    background-size: cover;
    background-position: 50% 100%;
    border-bottom-right-radius: 9px;
    background-repeat: no-repeat;
}
.dropdown-content.simple-dropdown .grid-menu .cover {
    background-image: url('/media/static/menu/menu-aside2.jpg');
}

.dropdown-content .grid-menu .cover.hover-arenas {
    background-image: url('/media/static/menu/hover-arenas.jpg');
}
.dropdown-content .grid-menu .cover.hover-bars {
    background-image: url('/media/static/menu/hover-bars.jpg');
}
.dropdown-content .grid-menu .cover.hover-hotels {
    background-image: url('/media/static/menu/hover-hotels.jpg');
}
.dropdown-content .grid-menu .cover.hover-restaurants {
    background-image: url('/media/static/menu/hover-restaurants.jpg');
}
.dropdown-content .grid-menu .cover.hover-retail {
    background-image: url('/media/static/menu/hover-retail.jpg');
}
.dropdown-content .grid-menu .cover.hover-transport {
    background-image: url('/media/static/menu/hover-transport.jpg');
}
.dropdown-content .grid-menu .cover.hover-data-capture {
    background-image: url('/media/static/menu/hover-data-capture.jpg');
}
.dropdown-content .grid-menu .cover.hover-email-marketing {
    background-image: url('/media/static/menu/hover-email-marketing.jpg');
}
.dropdown-content .grid-menu .cover.hover-ad-delivery {
    background-image: url('/media/static/menu/hover-ad-delivery.jpg');
}
.dropdown-content .grid-menu .cover.hover-gathering {
    background-image: url('/media/static/menu/hover-gathering.jpg');
}
.dropdown-content .grid-menu .cover.hover-loyalty {
    background-image: url('/media/static/menu/hover-loyalty.jpg');
}
.dropdown-content .grid-menu .cover.hover-complaint {
    background-image: url('/media/static/menu/hover-complaint2.jpg');
}
.dropdown-content .grid-menu .cover.hover-crm {
    background-image: url('/media/static/menu/hover-crm.jpg');
}
.dropdown-content .grid-menu .cover.hover-hardware {
    background-image: url('/media/static/menu/hover-hardware.jpg');
}
.dropdown-content .grid-menu .cover.hover-ads {
    background-image: url('/media/static/menu/hover-ads.jpg');
}
.dropdown-content .grid-menu .cover.hover-data-analysis {
    background-image: url('/media/static/menu/hover-data-analysis.jpg');
}
.dropdown-content .grid-menu .cover.hover-whatsapp {
    background-image: url('/media/static/menu/hover-whatsapp.jpg');
}

.dropdown-content.simple-dropdown .grid-menu .cover.hover-white-label {
    background-image: url('/media/static/menu/hover-white-label.jpg');
}
.dropdown-content.simple-dropdown .grid-menu .cover.hover-knowledge {
    background-image: url('/media/static/menu/hover-service-academy.jpg');
}
.dropdown-content.simple-dropdown .grid-menu .cover.hover-hardware-integrations {
    background-image: url('/media/static/menu/hover-supported-devices.jpg');
}
.dropdown-content.simple-dropdown .grid-menu .cover.hover-faq {
    background-image: url('/media/static/menu/hover-system-status.jpg');
}
.dropdown-content.simple-dropdown .grid-menu .cover.hover-updates {
    background-image: url('/media/static/menu/hover-product-updates.jpg');
}
.dropdown-content.simple-dropdown .grid-menu .cover.hover-blog {
    background-image: url('/media/static/menu/hover-blog.jpg');
}
.dropdown-content.simple-dropdown .grid-menu .cover.hover-data-regulations {
    background-image: url('/media/static/menu/hover-data-regulations.jpg');
}
.dropdown-content.simple-dropdown .grid-menu .cover.hover-on-demand {
    background-image: url('/media/static/menu/hover-demo.jpg');
}
.dropdown-content.simple-dropdown .grid-menu .cover.hover-identity-guidelines {
    background-image: url('/media/static/menu/hover-brand-guidelines.jpg');
}
.dropdown-content.simple-dropdown .grid-menu .cover.hover-design-tips {
    background-image: url('/media/static/menu/hover-design-tips.jpg');
}
.dropdown-content.simple-dropdown .grid-menu .cover.hover-ai {
    background-image: url('/media/static/menu/hover-ai.jpg');
}
.dropdown-content.simple-dropdown .grid-menu .cover.hover-portal-design {
    background-image: url('/media/static/menu/hover-captive-portal-inspirations.jpg');
}
.dropdown-content.simple-dropdown .grid-menu .cover.hover-email-inspirations {
    background-image: url('/media/static/menu/hover-email-inspirations.jpg');
}

/* PL */
.dropdown-content.pl .grid-menu .cover.hover-arenas {
    background-image: url('/media/static/menu/pl/hover-arenas-pl.jpg');
}
.dropdown-content.pl .grid-menu .cover.hover-bars {
    background-image: url('/media/static/menu/pl/hover-bars-pl.jpg');
}
.dropdown-content.pl .grid-menu .cover.hover-hotels {
    background-image: url('/media/static/menu/pl/hover-hotels-pl.jpg');
}
.dropdown-content.pl .grid-menu .cover.hover-restaurants {
    background-image: url('/media/static/menu/pl/hover-restaurants-pl.jpg');
}
.dropdown-content.pl .grid-menu .cover.hover-retail {
    background-image: url('/media/static/menu/pl/hover-retail-pl.jpg');
}
.dropdown-content.pl .grid-menu .cover.hover-transport {
    background-image: url('/media/static/menu/pl/hover-transport-pl.jpg');
}
.dropdown-content.pl .grid-menu .cover.hover-data-capture {
    background-image: url('/media/static/menu/pl/hover-data-capture-pl.jpg');
}
.dropdown-content.pl .grid-menu .cover.hover-email-marketing {
    background-image: url('/media/static/menu/pl/hover-email-marketing-pl.jpg');
}
.dropdown-content.pl .grid-menu .cover.hover-ad-delivery {
    background-image: url('/media/static/menu/pl/hover-ad-delivery-pl.jpg');
}
.dropdown-content.pl .grid-menu .cover.hover-gathering {
    background-image: url('/media/static/menu/pl/hover-gathering-pl.jpg');
}
.dropdown-content.pl .grid-menu .cover.hover-loyalty {
    background-image: url('/media/static/menu/pl/hover-loyalty-pl.jpg');
}
.dropdown-content.pl .grid-menu .cover.hover-complaint {
    background-image: url('/media/static/menu/pl/hover-complaint-pl.jpg');
}
.dropdown-content.pl .grid-menu .cover.hover-crm {
    background-image: url('/media/static/menu/pl/hover-crm-pl.jpg');
}
.dropdown-content.pl .grid-menu .cover.hover-hardware {
    background-image: url('/media/static/menu/pl/hover-hardware-pl.jpg');
}
.dropdown-content.pl .grid-menu .cover.hover-ads {
    background-image: url('/media/static/menu/pl/hover-ads-pl.jpg');
}
.dropdown-content.pl .grid-menu .cover.hover-data-analysis {
    background-image: url('/media/static/menu/pl/hover-data-analysis-pl.jpg');
}
.dropdown-content.pl .grid-menu .cover.hover-whatsapp {
    background-image: url('/media/static/menu/pl/hover-whatsapp-pl.jpg');
}

.dropdown-content.pl.simple-dropdown .grid-menu .cover.hover-white-label {
    background-image: url('/media/static/menu/pl/hover-white-label-pl.jpg');
}
.dropdown-content.pl.simple-dropdown .grid-menu .cover.hover-knowledge {
    background-image: url('/media/static/menu/pl/hover-service-academy-pl.jpg');
}
.dropdown-content.pl.simple-dropdown .grid-menu .cover.hover-hardware-integrations {
    background-image: url('/media/static/menu/pl/hover-supported-devices-pl.jpg');
}
.dropdown-content.pl.simple-dropdown .grid-menu .cover.hover-faq {
    background-image: url('/media/static/menu/pl/hover-system-status-pl.jpg');
}
.dropdown-content.pl.simple-dropdown .grid-menu .cover.hover-updates {
    background-image: url('/media/static/menu/pl/hover-product-updates-pl.jpg');
}
.dropdown-content.pl.simple-dropdown .grid-menu .cover.hover-blog {
    background-image: url('/media/static/menu/pl/hover-blog-pl.jpg');
}
.dropdown-content.pl.simple-dropdown .grid-menu .cover.hover-data-regulations {
    background-image: url('/media/static/menu/pl/hover-data-regulations-pl.jpg');
}
.dropdown-content.pl.simple-dropdown .grid-menu .cover.hover-on-demand {
    background-image: url('/media/static/menu/pl/hover-demo-pl.jpg');
}
.dropdown-content.pl.simple-dropdown .grid-menu .cover.hover-identity-guidelines {
    background-image: url('/media/static/menu/pl/hover-brand-guidelines-pl.jpg');
}
.dropdown-content.pl.simple-dropdown .grid-menu .cover.hover-design-tips {
    background-image: url('/media/static/menu/pl/hover-design-tips-pl.jpg');
}
.dropdown-content.pl.simple-dropdown .grid-menu .cover.hover-ai {
    background-image: url('/media/static/menu/pl/hover-ai-pl.jpg');
}
.dropdown-content.pl.simple-dropdown .grid-menu .cover.hover-portal-design {
    background-image: url('/media/static/menu/pl/hover-captive-portal-inspirations-pl.jpg');
}
.dropdown-content.pl.simple-dropdown .grid-menu .cover.hover-email-inspirations {
    background-image: url('/media/static/menu/pl/hover-email-inspirations-pl.jpg');
}

/* END PL */

/* ES */
.dropdown-content.es .grid-menu .cover.hover-arenas {
    background-image: url('/media/static/menu/es/hover-arenas.jpg');
}
.dropdown-content.es .grid-menu .cover.hover-bars {
    background-image: url('/media/static/menu/es/hover-bars.jpg');
}
.dropdown-content.es .grid-menu .cover.hover-hotels {
    background-image: url('/media/static/menu/es/hover-hotels.jpg');
}
.dropdown-content.es .grid-menu .cover.hover-restaurants {
    background-image: url('/media/static/menu/es/hover-restaurants.jpg');
}
.dropdown-content.es .grid-menu .cover.hover-retail {
    background-image: url('/media/static/menu/es/hover-retail.jpg');
}
.dropdown-content.es .grid-menu .cover.hover-transport {
    background-image: url('/media/static/menu/es/hover-transport.jpg');
}
.dropdown-content.es .grid-menu .cover.hover-data-capture {
    background-image: url('/media/static/menu/es/hover-data-capture.jpg');
}
.dropdown-content.es .grid-menu .cover.hover-email-marketing {
    background-image: url('/media/static/menu/es/hover-email-marketing.jpg');
}
.dropdown-content.es .grid-menu .cover.hover-ad-delivery {
    background-image: url('/media/static/menu/es/hover-ad-delivery.jpg');
}
.dropdown-content.es .grid-menu .cover.hover-gathering {
    background-image: url('/media/static/menu/es/hover-gathering.jpg');
}
.dropdown-content.es .grid-menu .cover.hover-loyalty {
    background-image: url('/media/static/menu/es/hover-loyalty.jpg');
}
.dropdown-content.es .grid-menu .cover.hover-complaint {
    background-image: url('/media/static/menu/es/hover-complaint.jpg');
}
.dropdown-content.es .grid-menu .cover.hover-crm {
    background-image: url('/media/static/menu/es/hover-crm.jpg');
}
.dropdown-content.es .grid-menu .cover.hover-hardware {
    background-image: url('/media/static/menu/es/hover-hardware.jpg');
}
.dropdown-content.es .grid-menu .cover.hover-ads {
    background-image: url('/media/static/menu/es/hover-ads.jpg');
}
.dropdown-content.es .grid-menu .cover.hover-data-analysis {
    background-image: url('/media/static/menu/es/hover-data-analysis.jpg');
}
.dropdown-content.es .grid-menu .cover.hover-whatsapp {
    background-image: url('/media/static/menu/es/hover-whatsapp.jpg');
}

.dropdown-content.es.simple-dropdown .grid-menu .cover.hover-white-label {
    background-image: url('/media/static/menu/es/hover-white-label.jpg');
}
.dropdown-content.es.simple-dropdown .grid-menu .cover.hover-knowledge {
    background-image: url('/media/static/menu/es/hover-service-academy.jpg');
}
.dropdown-content.es.simple-dropdown .grid-menu .cover.hover-hardware-integrations {
    background-image: url('/media/static/menu/es/hover-supported-devices.jpg');
}
.dropdown-content.es.simple-dropdown .grid-menu .cover.hover-faq {
    background-image: url('/media/static/menu/es/hover-system-status.jpg');
}
.dropdown-content.es.simple-dropdown .grid-menu .cover.hover-updates {
    background-image: url('/media/static/menu/es/hover-product-updates.jpg');
}
.dropdown-content.es.simple-dropdown .grid-menu .cover.hover-blog {
    background-image: url('/media/static/menu/es/hover-blog.jpg');
}
.dropdown-content.es.simple-dropdown .grid-menu .cover.hover-data-regulations {
    background-image: url('/media/static/menu/es/hover-data-regulations.jpg');
}
.dropdown-content.es.simple-dropdown .grid-menu .cover.hover-on-demand {
    background-image: url('/media/static/menu/es/hover-demo.jpg');
}
.dropdown-content.es.simple-dropdown .grid-menu .cover.hover-identity-guidelines {
    background-image: url('/media/static/menu/es/hover-brand-guidelines.jpg');
}
.dropdown-content.es.simple-dropdown .grid-menu .cover.hover-design-tips {
    background-image: url('/media/static/menu/es/hover-design-tips.jpg');
}
.dropdown-content.es.simple-dropdown .grid-menu .cover.hover-ai {
    background-image: url('/media/static/menu/es/hover-ai.jpg');
}
.dropdown-content.es.simple-dropdown .grid-menu .cover.hover-portal-design {
    background-image: url('/media/static/menu/es/hover-captive-portal-inspirations.jpg');
}
.dropdown-content.es.simple-dropdown .grid-menu .cover.hover-email-inspirations {
    background-image: url('/media/static/menu/es/hover-email-inspirations.jpg');
}

/* END ES */



.dropdown-content .grid-menu .wrapper {
    padding: 20px;
    padding-left: 45px;
    padding-bottom: 35px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 25px;
    grid-row-gap: 25px;
    background: linear-gradient(#fff, #F1F7FF);
    border-bottom-left-radius: 10px;
}
.dropdown-content .grid-menu .wrapper a svg {
    display: inline-block;
    margin-right: 5px;
    width: 24px;
    position: absolute;
    left: -4px;
    top: 6px;
}
.dropdown-content .grid-menu .wrapper a:hover svg path {
    fill: #369AFE;
}


.dropdown-content a {
    display: block;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.main-grid .dropdown-content {
    left: -57px;
    top: 72px;
}
.main-grid .simple-dropdown {
    left: -508px;
}


.as-svg-button {
    margin-right: 10px;
    font-size: 0.95em;
    background-image: url('/media/static/assets/button_outline.svg');
    background-repeat: no-repeat;
    background-size: contain;
}
.as-svg-button a {
    padding: 11px 28px;
    background: transparent linear-gradient(90deg, #369AFE 0%, #00fff8 100%) 0 0 no-repeat padding-box;
    text-align: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}
.as-button, .as-alter-button {
    text-align: right;
    margin-right: 10px;
    font-size: 0.95em;
    border-radius: 50px;
    background: transparent linear-gradient(90deg, #369AFE 0%, #00fff8 100%) 0 0 no-repeat padding-box;
}

.as-alter-button.filter-button {
    background: #ccc;
}
.as-alter-button.filter-button.active {
    background: transparent linear-gradient(90deg, #369AFE 0%, #00fff8 100%) 0 0 no-repeat padding-box;
}

.as-alter-button {
    margin-right: 30px;
}
.as-button span {
    margin: 3px;
    background-color: var(--secondary-background-color);
    display: inline-block;
    border-radius: 40px;
}
.as-button a {
    padding: 7px 20px;
    background: transparent linear-gradient(90deg, #369AFE 0%, #00fff8 100%) 0 0 no-repeat padding-box;
    text-align: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.as-alter-button a {
    margin: 3px;
    padding: 7px 20px;
    color: white;
    text-align: center;
    border-radius: 40px;
    font-weight: 600;
}
.call .as-button, .call .as-alter-button, .call .as-button a, .call .as-alter-button a {
    display: inline-block;
}
.call .as-button a, .call .as-alter-button a {
    padding: 14px 40px;
    font-weight: 500;
}
.call .as-alter-button {
    margin-right: 0;
}
.call .as-button span {
    margin: 3px;
}
@media (max-width: 1200px) {
    header {
        font-size: 0.9em;
    }
    header .main-grid .container {
        max-width: none;
    }
}
@media (max-width: 1200px) {
    .call.aside-grid {
        position: relative;
    }
    header {
        z-index: 100000000;
    }
    header nav {
        margin-top: 10px;
        padding-left: 10px;
        min-height: 60px;
    }
    header nav .item {
        display: none;
    }
    header nav .call {
        opacity: 0;
        height: 0;
    }
    header nav .logo {
        display: block;
        padding-top: 10px;
        padding-bottom: 40px;
        z-index: 1000;
        position: absolute;
        top: 10px;
        left: 0;
    }
    header .menu-toggle {
        display: inline-block;
        margin-left: 15px;
        padding-top: 12px;
        font-size: 25px;
        position: absolute;
        right: 20px;
    }
    .main-grid .simple-dropdown {
        width: auto;
    }
    .item.aside-grid {
        margin-bottom: 25px;
    }
    .ai-header-link {
        top: 40px !important;
    }
    .dropdown-content .grid-menu .cover {
        display: none;
    }
    .dropdown-content .grid-menu .wrapper {
        background: none;
        padding: 0;
    }
    .dropdown-content .grid-menu .wrapper {
        grid-template-columns: 1fr;
        grid-row-gap: 0;
    }
    .second-dropdown {
        margin-top: 35px;
    }
}
header input:checked ~ nav {
    flex-direction: column;
    padding-left: 0;
}
header input:checked ~ nav .item {
    display: block;
}
header input:checked ~ nav .call {
    height: auto;
    opacity: 1;
    padding: 20px;
    border-top: 1px solid #ccc;
}
header input:checked ~ nav .dropdown {
    padding: 0;
}
header input:checked ~ nav .item .dropdown .dropdown-content {
    display: block;
    position: relative;
    left: auto;
    top: auto;
    box-shadow: none;
    padding: 0;
}
header input:checked ~ nav .item .dropdown .dropdown-content a {
    display: none;
}
header input:checked ~ nav .item .dropdown .dropdown-content .reveal-submenu a {
    display: block;
}
header input:checked ~ nav .main-grid .container {
    grid-template-columns: 1fr;
    text-align: left;
    padding: 50px 20px;
    margin-top: 50px;
}
header input:checked ~ nav .main-grid .grid-menu {
    grid-template-columns: 1fr;
    margin-top: -30px;
}
header input:checked ~ nav .dropdown, header input:checked ~ nav .link a, header input:checked ~ nav .aside-grid a, header input:checked ~ nav .menu-toggle {
    text-align: left;
    font-size: 1.1em;
}
header input:checked ~ nav .dropdown span {
    display: none;
}
header input:checked ~ .link a {
    padding: 0 !important;
}
header input:checked ~ nav .link a {
    font-weight: bold;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 15px;
    font-size: 1.4em;
}
header input:checked ~ nav .link a.customers {
    margin-top: 5px;
}

header input:checked ~ nav .dropdown .dropdown-content a {
    display: inline-block;
    padding-bottom: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    font-size: 1.1em;
    font-weight: 500;
}
header input:checked ~ nav h4 {
    margin-top: 15px;
    font-size: 1.4em;
    background-image: url('/media/static-preexisting/menu/arrow-down.svg');
    background-repeat: no-repeat;
    background-position: 90% 50%;
    background-size: 15px auto;
}
header input:checked ~ nav h4:hover {
    color: var(--sw-color);
    cursor: pointer;
}
header input:checked ~ nav h4.resources-h {
    margin-bottom: -13px;
    margin-top: 15px;
}
header input:checked ~ nav .aside-grid {
    text-align: center;
}
*{
    -webkit-tap-highlight-color: transparent;
}
@layer base {
    html {
        -webkit-tap-highlight-color: transparent;
    }
}

/* ---------- END HEADER --------- */
/* ---------- Start animated button --------- */
.animated-button {
    position: relative;
    display: inline-block;
    width: 185px;
    height: 50px;
    line-height: 60px;
    text-align: center;
    background-color: transparent;
    cursor: pointer;
    text-decoration:none;
    margin-right: 15px;
}

.animated-button svg {
    position: absolute;
    top: 0;
    left: 0;
}

.animated-button svg rect {
    stroke-width: 3;
    stroke-dasharray: 353, 0;
    stroke-dashoffset: 0;
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease;
}

.animated-button span{
  background: rgb(255,130,130);
  background: -moz-linear-gradient(left, #369AFE  0%, #00fff8 100%);
  background: -webkit-linear-gradient(left, #369AFE 0%, #00fff8 100%);
  background: linear-gradient(to right,  #369AFE 0%, #00fff8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8282', endColorstr='#e178ed',GradientType=1 );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.animated-button.secondary-animated-button span{
  background: rgb(255,130,130);
  background: -moz-linear-gradient(left, #413E98  0%, #A6BEFD 100%);
  background: -webkit-linear-gradient(left, #413E98 0%, #A6BEFD 100%);
  background: linear-gradient(to right,  #413E98 0%, #A6BEFD 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A6BEFD', endColorstr='#413E98',GradientType=1 );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.animated-button:hover svg rect {
    stroke-width: 3;
    /*stroke-dasharray: 100 100;
    /stroke-dashoffset: 112;*/
    stroke-dasharray: 111 300;
    stroke-dashoffset: 200;
}
.show-video svg rect {
    stroke-width: 1.5;
}
.show-video:hover svg rect {
    stroke-width: 1.5;
}
.show-video span {
    color: #369AFE;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}
/* .show-video is reused on the industries_showcase pricing button purely for
   its solid-outline look (that button isn't wired to any video modal - the
   click handler only looks inside .c-hero_section). The hero's actual Watch
   Video button is the original gradient-stroke, gradient-text design, so it
   needs to opt back out of the solid-color override above. */
.c-hero_section .show-video span {
    color: unset;
    background: linear-gradient(to right, #369AFE 0%, #00fff8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.animated-white span {
    color: white;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}
@media (max-width: 500px) {
    .dynamic .c-image-hero .animated-button {
        display: block;
        margin: 0;
        margin-bottom: 30px;
    }
    .animated-button {
        margin: 20px auto;
        display: block;
    }
    header .animated-button {
        display: inline-block !important;
    }
}

.menu-animated {
    padding: 0 !important;
    width: 165px;
    height: 40px;
    margin-top: 12px;
    line-height: 49px;
    font-weight: 600;
    text-align: center !important;
}
.animated-button.menu-animated:hover svg rect {
    stroke-dasharray: 111 300;
    stroke-dashoffset: 240;
}
.as-menu-alter {
    margin-right: 20px !important;
}
.as-menu-alter a {
    padding: 8px 30px !important;
    font-weight: 600 !important;
}
.menu-animated span {
    text-align: center !important;
}

/*  ---------- END animated button --------- */
/* ---------- Dynamic Page --------- */

.dynamic {
    margin-top: 50px;
}
.dynamic img {
    max-width: 100%;
}
.dynamic .gray .container, .dynamic .c-hero_section {
    max-width: var(--max-width);
    margin: 0 auto;
}
.dynamic .c-hero_section {
    text-align: center;
    padding: 20px;
    margin-bottom: 100px;
    margin-top: 150px;
    color: #191C1F;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
.hero.hero-gradient {
    /* Matches .c-product_stories's own top stop (#F1F7FF), so the hero and
       "See how Social WiFi works" section start the page in the same shade
       instead of the hero reading a step lighter. */
    background: linear-gradient(180deg, #F1F7FF 0%, #FFFFFF 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100dvh;
    margin-top: -90px;
    padding-top: 90px;
    box-sizing: border-box;
}
.dynamic .hero-gradient .c-hero_section {
    color: #4B5563;
}
.dynamic .c-image-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 25px;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0;
    margin-top: -20px;
    min-height: 99dvh;
}
.dynamic .c-image-hero.qrate {
    max-width: 1300px;
    margin-top: 130px;
    min-height: 88dvh;
    grid-column-gap: 65px;
}
.dynamic .c-image-hero .side.content-side {
    display: flex;
    justify-content: center;
    align-items: center;
}
.dynamic .c-image-hero.qrate .side.content-side {
    align-items: normal;
}
.dynamic .c-image-hero .side-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.dynamic .c-image-hero .inner {
    padding-top: 80px;
    padding-left: 200px;
    padding-right: 50px;
    padding-bottom: 30px;
    text-align: left;
}
.dynamic .c-image-hero.qrate .inner {
    padding: 10px;
}
.dynamic .c-hero_section.c-image-hero .logos {
    margin-top: 40px;
}
.dynamic .c-hero_section.c-image-hero.qrate .logos {
    display: none;
}
.c-hero_section.c-image-hero h1 {
    font-size: var(--h1-size-alt);
}
.dynamic .c-hero_section.c-image-hero p {
    line-height: 1.6em;
    margin-top: 20px;
    margin-bottom: 30px;
}
.dynamic .c-image-hero .inner-image {
    background: transparent linear-gradient(0deg, #191C1F 0%, #191C1F00 100%) 0 0 no-repeat padding-box;
    color: white;
    height: 100%;
    position: relative;
}
.dynamic .c-image-hero .gradient-no .inner-image {
    background: none;
}
.dynamic .c-image-hero .inner-image .data {
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 50%;
    padding-left: 80px;
    padding-bottom: 80px;
    text-align: right;
    font-size: 28px;
}
.dynamic .c-image-hero .inner-image .data p {
    line-height: 1.3em;
}
.dynamic .c-image-hero .inner-image .data img {
    max-width: 60%;
}
.dynamic .c-image-hero .side-image-only .inner-image .data img {
    max-width: 100%;
    max-height: 650px;
}
.dynamic .c-image-hero .side-image-only.position-bottom .inner-image .data img {
    max-height: 750px;
}
.dynamic .c-image-hero .side-image-only .inner-image .data {
    padding: 0;
    width: 100%;
    text-align: center;
}
.dynamic .c-image-hero .side-image-only.position-right .inner-image .data {
    text-align: right;
    bottom: 10vh;
}
.dynamic .c-image-hero .side-image-only.position-right .inner-image .data img {
    max-width: 90%;
}

.dynamic .c-image-hero .side-image-only.position-center .inner-image .data {
    bottom: 12vh;
}
.dynamic .c-image-hero .side-image-only.position-center .inner-image .data img {
    max-width: 85%;
}

.dynamic .c-hero_section p {
    margin-bottom: 50px;
    margin-top: 30px;
}
.dynamic .c-hero_section ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-bottom: 30px;
}
.dynamic .c-hero_section ul li {
    display: inline-block;
    margin-right: 15px;
}
@media (max-width: 1600px) {
    .dynamic .c-image-hero .inner {
        padding-left: 50px;
    }
}
@media (max-width: 1200px) {
    .dynamic .c-image-hero, .dynamic .c-image-hero.qrate {
        grid-template-columns: 1fr;
    }
    .dynamic .c-image-hero.qrate .inner {
        text-align: center;
        padding-left: 20px;
        padding-right: 20px;
    }
    .dynamic .c-image-hero .side-image {
        display: none;
    }
    .dynamic .qrate.c-image-hero .side-image {
        display: block;
    }
    .qrate.c-image-hero video {
        border-radius: 0;
        max-width: 100%;
        height: 400px;
    }
    .dynamic .c-image-hero .inner-image .data {
        padding-left: 20px;
        padding-bottom: 20px;
    }
    .dynamic .c-image-hero .side-image-only .inner-image .data img {
        max-height: 450px;
    }
    .dynamic .c-image-hero .side-image-only.position-right .inner-image .data {
        text-align: center;
    }
    .dynamic .c-image-hero {
        min-height: auto;
    }
    .dynamic .c-image-hero .side-image-only.position-bottom .inner-image .data img {
        max-height: 550px;
    }
    .dynamic .c-hero_section.c-image-hero .logos {
        margin-top: 40px;
    }
}
@media (max-width: 800px) {
    .dynamic .c-image-hero .inner {
        padding: 20px;
    }
    .c-hero_section.c-image-hero h1 {
        font-size: 3em;
    }
    .dynamic .c-image-hero .inner {
        text-align: center;
    }
}


.dynamic .c-hero_section .video-wrapper {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding-top: 300px;
    padding-bottom: 200px;
    transition: visibility 0s, opacity 0.3s linear;
    z-index: 10000;
}
.dynamic .c-hero_section .video-wrapper .bg {
    max-width: 715px;
    margin: 0 auto;
    text-align: center;
    padding: 10px;
    position: relative;
}
.dynamic .c-hero_section .video-wrapper .bg .close {
    position: absolute;
    right: -3px;
    top: -5px;
    padding: 15px;
    border-radius: 100%;
    cursor: pointer;
    font-weight: bold;
    outline: none;
    background-image: url('/media/static/assets/x.svg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 25px;
}
.dynamic .c-hero_section .logos {
    color: #333;
    margin-top: 120px;
    font-size: 1.1em;
}
.dynamic .c-hero_section .logos img {
    margin-top: 20px;
}
.dynamic .c-hero_section .logos  picture {
    margin-top: 20px;
    display: block;
}
.dynamic .hero-gradient .c-hero_section .logos {
    /* Kept at the original light grey rather than following
       --secondary-text-color's later darkening - this "Trusted by" line and
       the logo strip below it were asked to stay as they were. */
    color: #B0B6BF;
    font-size: 1.05em;
}
/* ~30% off both gaps around "Trusted by" - the space above the line (was the
   shared, unscoped 120px) and the space between that line and the logo row
   itself, scoped to this page only rather than touching the shared rule. */
.dynamic-home .c-hero_section .logos {
    margin-top: 84px;
}
.dynamic .hero-gradient .c-hero_section .logos-marquee {
    overflow: hidden;
    margin-top: 21px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.dynamic .hero-gradient .c-hero_section .logos-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 64px;
    animation: hero-logos-scroll 26s linear infinite;
}
.dynamic .hero-gradient .c-hero_section .logo-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 42px;
}
.dynamic .hero-gradient .c-hero_section .logo-item img {
    height: 100%;
    width: auto;
    margin-top: 0;
    display: block;
}
@keyframes hero-logos-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .dynamic .hero-gradient .c-hero_section .logos-track {
        animation: none;
    }
}
/* Second logo row runs the other way, so the strip reads as a wide set of
   customers rather than one loop repeating. */
.dynamic .hero-gradient .c-hero_section .logos-marquee-reverse {
    margin-top: 22px;
}
.dynamic .hero-gradient .c-hero_section .logos-marquee-reverse .logos-track {
    animation-direction: reverse;
}
/* One row is plenty on a phone - the second is desktop only. logo-item-desktop
   trims row one down to its first 7 logos there too, hidden in both copies so
   the loop stays aligned. */
@media (max-width: 600px) {
    .dynamic .hero-gradient .c-hero_section .logos-marquee-reverse {
        display: none;
    }
    .dynamic .hero-gradient .c-hero_section .logo-item-desktop {
        display: none;
    }
}
/* Shown at every width now, not just phones - see the "Tap a story" rail below
   the hero buttons on desktop too. Everything from here down through the tile
   colour sets used to be behind @media (max-width: 600px); none of it is
   actually mobile-specific sizing, so this same track/tile styling now applies
   unconditionally instead of being duplicated for a wider breakpoint. Only the
   hero's own top-padding trim at the end of this block stayed mobile-only - see
   the small media query right after it. */
    .hero-story-rail {
        display: block;
        /* The measured gap under the Contact us button is this margin - it collapses with
           the button row's own 25px and wins - so 20% off 52 lands it at 42. */
        margin: 42px 0 6px;
        text-align: center;
        box-sizing: border-box;
    }
    .hero-story-rail-head {
        padding: 0 20px;
    }
    .hero-story-rail .hero-story-rail-head h2 {
        font-size: 1.7em;
        line-height: 1.2em;
        /* The subheadline reads as one unit with this heading ("Learn Social WiFi" /
           "Tap a story to see more"), hence the tighter-than-usual gap. */
        margin: 0 0 4px;
        color: #4B5563;
    }
    /* Two different headlines, not one swapped for the other - phones keep the
       original heading + standfirst pair, desktop gets its own single line and
       no standfirst. Default (mobile-first) shows the mobile span and the p;
       the min-width block below flips both for desktop. */
    .hero-rail-heading-desktop {
        display: none;
    }
    /* .dynamic .c-hero_section p sets margin-bottom: 50px at higher specificity
       (two classes + a tag beats two classes alone) - the extra class here isn't
       just belt-and-braces, it's required to actually win.
       1.1em matches the hero subheadline above it, which computes to 17.6px. */
    .hero-story-rail .hero-story-rail-head .hero-story-rail-sub {
        font-size: 1.1em;
        line-height: 1.6em;
        color: #4B5563;
        margin: 0 0 20px;
    }
    /* Full-bleed: cancel the 20px side padding of .c-hero_section so the carousel
       runs edge to edge like the results carousel; the inner padding keeps the
       first/last tile off the screen edge. */
    .hero-story-rail-track {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-left: -20px;
        margin-right: -20px;
        padding: 4px 20px 10px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .hero-story-rail-track::-webkit-scrollbar {
        display: none;
    }
    /* Desktop only: the six tiles are narrower than the hero's own max-width, so a
       plain flex row (flex-start by default) bunched them against the left edge
       instead of sitting under the centred headline above. Phones keep flex-start -
       there the row is always wider than the screen, so centring an overflowing
       flex container risks the very first tile being unreachable by scroll in some
       browsers, and mobile's own edge-to-edge starting point is the point anyway. */
    /* 6 tiles x 150px + 5 gaps x 14px = 970px of actual content - centering the
       track only makes sense once the viewport can fit that without scrolling.
       This used to centre starting at 601px, which is well short of 970px plus
       the hero's own side padding: on anything from ~601px up to about 1000px
       (a Surface Pro or similar mid-size tablet, for instance) the row was both
       centred AND still wider than its box, so the browser's own scroll-anchor
       behaviour for an overflowing centred flex container landed the initial
       scroll position somewhere in the middle - the first and last tiles both
       read as cut off, with no obvious affordance that there was more to
       scroll to. Left un-centred (flex-start, same as phones) below this
       threshold, the row instead starts cleanly on the first tile and simply
       scrolls, exactly like it already does on phones. */
    @media (min-width: 1060px) {
        .hero-story-rail-track {
            justify-content: center;
        }
    }
    @media (min-width: 601px) {
        /* Roughly double the gap under the rail's own headline on desktop (was
           8px h2 margin + 4px track padding = 12px total, now ~24px). */
        .hero-story-rail .hero-story-rail-head h2 {
            margin-bottom: 20px;
            /* Lighter/more muted than the mobile heading's #4B5563 - desktop only.
               Same grey as the subheadlines elsewhere (--secondary-text-color),
               not a separate one-off value. */
            color: var(--secondary-text-color);
        }
        .hero-rail-heading-mobile {
            display: none;
        }
        .hero-rail-heading-desktop {
            display: inline;
            font-weight: 600;
        }
        .hero-story-rail-sub {
            display: none;
        }
        /* A bit more air between the hero buttons and the rail on desktop. */
        .hero-story-rail {
            margin-top: 64px;
        }
        /* Nudges the whole hero block up a bit - the 150px top margin is shared
           with the pre-redesign hero (unscoped .dynamic .c-hero_section), so it is
           trimmed here instead, scoped to this page and to desktop only. */
        .dynamic-home .c-hero_section {
            margin-top: 100px;
        }
        /* Trial hover treatment, desktop only - phones do not get a real hover
           state, and the tap itself already opens the story there. */
        .hero-story-rail-track .hero-story-tile {
            transition: transform 0.25s ease;
        }
        .hero-story-rail-track .hero-story-tile:hover {
            transform: scale(1.06);
            z-index: 2;
        }
        /* The track's own 4px/10px top/bottom padding was clipping the scaled-up
           tile (a 224px tile growing 6% adds ~6.7px each edge) - overflow-x: auto
           forces overflow-y to auto too, not visible, so anything past the padded
           box is cut off rather than spilling out. Evened up so both edges have
           enough headroom for the hover scale. */
        .hero-story-rail-track {
            padding-top: 14px;
            padding-bottom: 18px;
        }
        .hero-story-rail-track .hero-story-tile:hover .hero-story-tile-hover-hint {
            display: flex;
        }
    }
    /* .hero-story-tile also carries the shared .story-open-btn class (for JS wiring),
       which brings its own border/background/padding/svg-size reset at equal
       specificity - compound the selectors below so this block reliably wins
       regardless of stylesheet order. */
    /* Content sits bottom-left, so the icon and label share a baseline whatever the
       label length and the top of the tile is left to the play badge alone. */
    .hero-story-rail-track .hero-story-tile {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        text-align: left;
        gap: 10px;
        background: none;
        padding: 16px 16px 18px;
        margin: 0;
        cursor: pointer;
        flex: 0 0 auto;
        width: 150px;
        height: 224px;
        border-radius: 20px;
        box-sizing: border-box;
        scroll-snap-align: center;
        overflow: hidden;
        font-family: inherit;
        transition: transform 0.15s ease;
    }
    /* Translucent white on the tile's own colour. It used to be currentColor washed
       with white, which worked while the text was the accent - now that the text is
       white, currentColor would give a white badge holding a white glyph. */
    /* Photo behind the tile, scrim over it, content over that. The per-key gradient set
       further down stays as the background, so a tile still looks finished if its photo
       has not loaded. */
    .hero-story-rail-track .hero-story-tile-shot {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover;
        border-radius: inherit;
        display: block;
    }
    /* Scrim in the tile's own hue: the photo has to darken towards the bottom or the
       label loses contrast, and holding the hue is what still tells the five apart. */
    .hero-story-rail-track .hero-story-tile::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(180deg, rgba(10, 20, 35, 0.15) 0%,
            var(--tile-scrim-mid) 48%, var(--tile-scrim-end) 100%);
        pointer-events: none;
    }
    .hero-story-rail-track .hero-story-tile-label {
        position: relative;
        z-index: 1;
    }
    /* Was a small badge pinned to the top-right corner, separate from the topic
       icon that sat lower in the tile. The topic icon is gone now (one glyph per
       tile read as redundant with the label right under it), and this moved into
       its spot in the normal flex flow instead - relative, not absolute, so it
       stacks with the label per the tile's own gap rather than floating fixed to
       a corner. Bigger and a thicker ring to read as a real focal point now that
       it is carrying that role alone. */
    .hero-story-tile-play {
        position: relative;
        z-index: 1;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.22);
        border: 2px solid rgba(255, 255, 255, 0.85);
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        /* Always pulsing, not just on hover - a standing "this is tappable" cue
           the hover state was already carrying separately elsewhere on desktop. */
    }
    .hero-story-rail-track .hero-story-tile-play svg {
        width: 20px;
        height: 20px;
        color: white;
        margin-left: 1px;
    }
    /* ~20% bigger again on phones specifically - the badge is the tile's only
       glyph now, and needs to read clearly as a tap target at that size. */
    @media (max-width: 600px) {
        .hero-story-tile-play {
            width: 48px;
            height: 48px;
            border-width: 2.5px;
        }
        .hero-story-rail-track .hero-story-tile-play svg {
            width: 23px;
            height: 23px;
        }
    }
    .hero-story-tile-play::before {
        content: "";
        position: absolute;
        inset: -5px;
        border-radius: 50%;
        border: 1.5px solid rgba(255, 255, 255, 0.85);
        opacity: 0;
        pointer-events: none;
        animation: hero-tile-play-pulse 1.8s ease-out infinite;
    }
    @keyframes hero-tile-play-pulse {
        0% {
            transform: scale(0.9);
            opacity: 0.6;
        }
        70%, 100% {
            transform: scale(1.6);
            opacity: 0;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .hero-story-tile-play::before {
            animation: none;
        }
    }
    /* Top to bottom, light to dark, which is what gives the tile depth. Each stop moves
       in lightness only, keeping hue and saturation - a plain multiply desaturated them
       into mud. The label sits on the bottom stop, so white is held at 4.5:1 or better
       there; the lighter top is free to go brighter.
       Positive Reviews is the one hue change: 19 degrees is a red burnt orange, 33 is
       the yellow-orange asked for, and that is as warm as it goes while white still
       reads on the bottom stop. */
    .hero-story-rail-track .hero-story-tile-data {
        --tile-scrim-mid: rgba(20, 124, 93, 0.45);
        --tile-scrim-end: rgba(20, 124, 93, 0.92);
        color: #FFFFFF;
        border: none;
        background: linear-gradient(180deg, #1FC392 0%, #189771 55%, #147C5D 100%);
    }
    .hero-story-rail-track .hero-story-tile-reviews {
        --tile-scrim-mid: rgba(172, 100, 11, 0.45);
        --tile-scrim-end: rgba(172, 100, 11, 0.92);
        color: #FFFFFF;
        border: none;
        background: linear-gradient(180deg, #F29626 0%, #D87D0D 55%, #AC640B 100%);
    }
    .hero-story-rail-track .hero-story-tile-email {
        --tile-scrim-mid: rgba(0, 112, 223, 0.45);
        --tile-scrim-end: rgba(0, 112, 223, 0.92);
        color: #FFFFFF;
        border: none;
        background: linear-gradient(180deg, #3299FF 0%, #0080FE 55%, #0070DF 100%);
    }
    .hero-story-rail-track .hero-story-tile-complaints {
        --tile-scrim-mid: rgba(104, 85, 197, 0.45);
        --tile-scrim-end: rgba(104, 85, 197, 0.92);
        color: #FFFFFF;
        border: none;
        background: linear-gradient(180deg, #9E92DA 0%, #7C6CCD 55%, #6855C5 100%);
    }
    .hero-story-rail-track .hero-story-tile-loyalty {
        --tile-scrim-mid: rgba(217, 26, 111, 0.45);
        --tile-scrim-end: rgba(217, 26, 111, 0.92);
        color: #FFFFFF;
        border: none;
        background: linear-gradient(180deg, #EB5A9B 0%, #E62C7F 55%, #D91A6F 100%);
    }
    /* WhatsApp's own green rather than one of the five story colours above. Now a
       real story-open-btn like the rest (see hero_section.eleventy.liquid), so
       cursor is inherited normally instead of being forced back to default. */
    .hero-story-rail-track .hero-story-tile-whatsapp {
        --tile-scrim-mid: rgba(19, 149, 76, 0.45);
        --tile-scrim-end: rgba(19, 149, 76, 0.92);
        color: #FFFFFF;
        border: none;
        background: linear-gradient(180deg, #34D178 0%, #22C55E 55%, #13954C 100%);
    }
    .hero-story-tile-label {
        font-size: 1.05em;
        font-weight: 700;
        color: #FFFFFF;
        line-height: 1.25em;
    }
    .hero-story-rail-track .hero-story-tile:active {
        transform: scale(0.96);
    }
    .hero-story-tile-hover-hint {
        display: none;
        position: absolute;
        inset: 0;
        z-index: 2;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 16px;
        font-size: 0.95em;
        font-weight: 400;
        color: #FFFFFF;
        background: rgba(10, 20, 35, 0.4);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        border-radius: inherit;
    }
/* 85px of air between the header and the headline, down to about 55px. The hero's
   90px of top padding was most of it - phones only, the rail's presence on desktop
   does not change the desktop hero's own top padding. */
@media (max-width: 600px) {
    .dynamic-home .hero.hero-gradient {
        padding-top: 60px;
    }
}
@media (max-width: 600px) {
    .dynamic .hero-gradient .c-hero_section .logo-item {
        height: 30px;
    }
}
.dynamic .c-hero_section .logos .grid span {
    display: inline-block;
    width: 110px;
    height: 110px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 80% auto;
    margin-top: 20px;
    margin-right: 15px;
}
.dynamic .c-hero_section .logos .grid span:last-of-type {
    margin-right: 0;
}
.dynamic .c-hero_section .logos .grid .wide {
    width: 210px;
}
.dynamic .c-hero_section .logos .grid .short {
    width: 90px;
}
.dynamic .c-hero_section .as-alter-button a {
    padding: 11px 20px;
    z-index: 100;
    position: relative;
}
.as-alter-button a {
    z-index: 100;
    position: relative;
}
.as-alter-button {
    transition: all 500ms ease-in-out;
    position: relative;
}
.as-alter-button:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    opacity: 0;
    border-radius: 50px;
    color: white;
    transition: all 500ms ease-in-out;
    background: transparent linear-gradient(45deg, #00fff8 0%, #369AFE 100%) 0 0 no-repeat padding-box;
}
.as-alter-button:hover:before {
    opacity: 1;
    color: #fff;
}

.dynamic .call {
    margin-bottom: 25px;
}

.c-first a {
    border: 2px solid var(--sw-color);
    background-color: var(--sw-color);
    padding: 10px 20px;
    color: white;
    text-align: center;
    font-weight: bold;
    border-radius: 3px;
    display: inline-block;
    margin-top: 10px;
}
.c-first a {
    font-size: 1.2em;
}
.dynamic .call .alter {
    border: 2px solid var(--sw-color);
    background-color: var(--secondary-background-color);
    padding: 10px 20px;
    color: var(--sw-color);
    text-align: center;
    font-weight: bold;
    border-radius: 3px;
    display: inline-block;
    margin-top: 10px;

}
.dynamic .aside-text {
    margin-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 60px;
}
.dynamic .aside-text img {
    max-width: 80%;
    display: inline-block;
    margin-top: 30px;
    margin-bottom: 30px;
}
.dynamic .gray .aside-blog-text {
    margin-bottom: 25px;
    margin-top: 15px;
    border-radius: 0;
}
.dynamic .gray .aside-blog-text .text {
    padding: 10px 20px;
}
.dynamic .aside-text .small {
    font-size: 1.1em;
    margin-bottom: 0;
}

.dynamic .aside-text h2 {
    font-size: var(--h2-size);
    margin-bottom: 20px;
}
.dynamic .aside-text p {
    line-height: 1.4em;
}
.c-hero_section h1 {
    font-size: 4.5em;
}
.c-hero_section h1 span {
    background: linear-gradient(90deg, #369AFE 0%, #00fff8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.c-hero_section h1 aside {
    display: inline;
}
.c-hero_section p {
    font-size: 1.4em;
}
.c-hero_section a {
    font-size: 1.3em;
}
.c-hero_section .animated-button {
    font-size: 1.2em;
    font-weight: 500;
}
.c-hero_section .as-button {
    margin-bottom: 20px;
}
.c-hero_section .as-button span {
    display: block;
    text-align: center;
}
.c-hero_section .as-alter-button .alt-button, .c-hero_section .as-button a {
    min-width: 170px;
}
/* Homepage only: "Watch the Video" sat tight against its own outline (185px pill)
   while "Contact Us" carried a much wider min-width/padding - the two read as
   mismatched instead of a pair. Nudging Contact Us down closes most of the gap.
   Watch the Video's outline is hand-drawn SVG geometry (see hero_section
   .eleventy.liquid) rather than a CSS border, so it cannot just be widened the
   same way - resizing the svg (even via viewBox) fights the separate mobile
   rule that sets the rect's width in raw px and breaks the border on phones.
   Shrinking its text instead opens up matching breathing room inside the same
   185px pill without touching the svg at all. */
.dynamic-home .c-hero_section .as-alter-button .alt-button {
    min-width: 145px;
    padding: 11px 18px;
}
@media (min-width: 601px) {
    .dynamic-home .c-hero_section .animated-button.show-video {
        font-size: 1em;
    }
}
.c-image-hero img {
    max-height: 400px;
}
.c-image-hero video {
    border-radius: 25px;
}
.dynamic .aside-text .text h3 {
    margin-bottom: 0;
    font-size: 1.4em;
    margin-top: 20px;
}
.dynamic .aside-text .text h3:first-of-type {
    margin-top: 0;
}

/* Header news item button */
.news-item {
    margin-bottom: 45px;
    margin-top: -55px;
}
.news-item a {
    display: inline-block;
    background-color: #F1F7FF;
    border-radius: 25px;
    padding: 12px 35px;
    padding-right: 55px;
    font-size: 1em;
    background-image: url('/media/static/assets/arrow_blue.svg');
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-size: 20px auto;
    font-weight: 500;
    transition: 0.1s ease-in;
}
.news-item a:hover {
    background-position: 96% 50%;
}
/* Same white-fill, gradient-outline look as the inert .news-item-pill below
   - just with the arrow layered on top so a real link keeps that affordance,
   and no float animation (unlike the inert pill): this one's a clickable
   button, and the constant motion read as distracting on something you're
   meant to click. Background layers stack with the FIRST one frontmost:
   arrow icon, then the white fill (padding-box), then the gradient ring
   (border-box) behind it - see the matching comment on .news-item-pill for
   why the fill/gradient order matters. */
.dynamic-home .news-item a {
    color: #369AFE;
    border: 1.5px solid transparent;
    padding: 12px 35px;
    padding-right: 55px;
    background-image:
        url('/media/static/assets/arrow_blue.svg'),
        linear-gradient(#FFFFFF, #FFFFFF),
        linear-gradient(90deg, #369AFE 0%, #00fff8 100%);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: 95% 50%, 0 0, 0 0;
    background-size: 20px auto, auto, auto;
    background-origin: border-box, padding-box, border-box;
    background-clip: border-box, padding-box, border-box;
}
.dynamic-home .news-item a:hover {
    background-position: 96% 50%, 0 0, 0 0;
}
/* The redesign's inert variant: a standing fact, not a link, so no arrow and no
   hover state - just a thin gradient outline, left to right. A masked ::before
   was tried first and rendered the ring unevenly (thicker on one curve than the
   other) on a fully pill-shaped radius - transparent-border-plus-two-backgrounds
   is the more reliable way to do this: the border-width reserves an even ring on
   every edge (the browser computes the inner curve itself, correctly, the way it
   already does for a plain solid border), the fill paints inside it
   (padding-box) and the gradient shows through only in the ring (border-box). */
.dynamic-home .news-item-pill {
    display: inline-block;
    border-radius: 25px;
    padding: 12px 35px;
    font-size: 1em;
    font-weight: 500;
    color: #369AFE;
    border: 1.5px solid transparent;
    /* Background layers stack with the FIRST one frontmost - the fill has to be
       listed first (and the ring gradient second, behind it) or the larger
       border-box layer paints over the whole box and the smaller padding-box fill
       never shows at all, which is what actually happened here the first time:
       both are opaque gradients, so paint order was not the non-issue it would
       have been with transparency involved. Matches the light, airy look of the
       "Data Gathering" card - a soft tinted fill inside a gradient outline. */
    background:
        linear-gradient(#FFFFFF, #FFFFFF) padding-box,
        linear-gradient(90deg, #369AFE 0%, #00fff8 100%) border-box;
    /* Trial: a very gentle float, not a hover state - it never stops. */
    animation: news-pill-float 3.6s ease-in-out infinite;
}
@keyframes news-pill-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .dynamic-home .news-item-pill {
        animation: none;
    }
}
/* Separate, shorter copy for phones (news_text_mobile in front matter, falls
   back to the desktop news_text if a page never sets it) - the pill has less
   room there and the full sentence can wrap awkwardly. */
.news-item-mobile {
    display: none;
}
@media (max-width: 600px) {
    .news-item-desktop {
        display: none;
    }
    .news-item-mobile {
        display: inline;
    }
    .dynamic .c-hero_section iframe, .aside-text iframe {
        width: 100%;
        height: auto;
        min-height: 360px;
    }
    .c-image_grid {
        padding-bottom: 0;
    }
    .c-image_grid .images {
        grid-template-columns: 1fr;
        grid-row-gap: 0;
    }
    .c-image_grid .images .c-image_grid_element img {
        border-radius: 0;
    }
    .dynamic {
        margin-top: 20px;
    }
    .c-hero_section h1 {
        font-size: 2.8em;
    }
    .c-hero_section h1 br {
        display: none;
    }
    .c-hero_section h1 aside {
        display: block;
    }
    .news-item {
        margin-top: 0;
    }
    html[lang="pl"] .c-hero_section h1 aside {
        display: inline;
    }
    .call .as-button a, .call .as-alter-button a {
        padding: 7px 20px;
        font-weight: 500;
    }
    .dynamic .c-hero_section {
        margin-top: 75px;
    }
    html[lang="en"] .dynamic-home .c-hero_section > p {
        font-size: 17.6px;
        line-height: 1.6em;
        margin-bottom: 28px;
    }
    .c-image_list .images div {
        margin: 10px;
    }
    .dynamic .c-hero_section .logos .grid span {
        width: 70px;
        height: 70px;
    }
    .dynamic .c-hero_section .logos {
        font-size: 0.9em;
    }
    .dynamic .c-hero_section .logos .grid .wide {
        width: 150px;
        background-size: 60% auto;
    }
    .call .as-alter-button {
        margin-right: 0 !important;
        width: auto !important;
    }
    .c-hero_section .call .as-alter-button {
        margin-top: 10px;
    }
    .call .as-alter-button .alt-button {
        width: 120px;
        text-align: center;
    }
    .c-hero_section .animated-button, .c-hero_section .animated-button svg, .c-hero_section .as-alter-button {
        width: 300px;
    }
    .c-hero_section .animated-button svg rect {
        width: 290px;
    }
    /* The two buttons stack here, so the base button's 20px bottom margin plus the
       10px above the second one left a 30px gap. 10px brings it to 20px. */
    .c-hero_section .call .animated-button.show-video {
        margin-bottom: 10px;
    }
    .dynamic .c-hero_section .as-alter-button a {
        width: 255px;
    }
    .dynamic .c-hero_section p span {
        display: block;
    }
    .dropdown .dropdown-content h4, header input:checked ~ nav .link a {
        font-weight: 600;
    }
}
/* end news item */
/* Hide until load */
.c-product_stories, .gray, .new-industry, footer, .footer-border {
    visibility: hidden;
}