: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;
}

/* Forces a manual line break in a heading on phones only, for wording that
   reads better split at a specific word than left to the browser's own
   wrap. Hidden by default (desktop keeps its natural wrap/single line),
   shown at the shared mobile breakpoint - same on/off technique used by the
   captini-alternative landing page's own heading breaks. */
.mobile-line-break {
    display: none;
}
@media (max-width: 600px) {
    .mobile-line-break {
        display: inline;
    }
}

@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;
}
/* ---------- 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 --------- */

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;
}

/* ---------- GRAY --------- */
.gray {
  padding: 50px 20px;
  overflow: hidden;
  max-width: 1920px;
  margin: 0 auto;
}
.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;
}
.blog-title p {
    line-height: 1.4em;
    margin: 0;
}
.blog-details {
    max-width: 70%;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--secondary-background-color);
}
.blog-details h3:first-of-type {
    margin-top: 0;
}
.blog-details h3 {
    font-size: 1.8em;
}

.blog-headline-image {
    max-width: 100%;
    margin: 0 auto;
    display: block;
    margin-bottom: 40px;
}
.blog-details .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 30px;
    margin-bottom: 30px;
    margin-top: 30px;
    padding-bottom: 15px;
    padding-top: 15px;
    border-top: 3px solid #F8FBFF;
    border-bottom: 3px solid #F8FBFF;
}
.blog-details img {
    max-width: 100%;
}
.blog-details .grid:first-of-type {
    grid-template-columns: 1fr 1fr 1fr;
}
.blog-details .grid .infobox {
    background-repeat: no-repeat;
    background-size: 40px auto;
    text-align: center;
    padding-top: 60px;
    background-position: 50% 0;
    font-weight: bold;
}
.blog-details .grid .infobox p {
    font-weight: normal;
}
.blog-details .grid a {
    font-size: 0.9em;
}
.blog-details .grid p {
    margin: 0;
}
.blog-details h3 {
    margin-top: 30px;
}
.blog-details .case-study .case-text {
    font-style: italic;
}
.blog-details .case-study .author {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 30px;
}
.blog-details .case-study .author .image {
    display: none;
}
.blog-details .case-study .author img {
    max-width: 70%;
}
.blog-details .case-study .author .logo {
    text-align: right;
}
.blog-details ul li {
    line-height: 1.5em;
    margin-bottom: 5px;
}
.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;
}
.aside-text ul {
    list-style-type: none;
    padding: 0;
}
.aside-text li {
    background-image: url('/media/static/checkmark.svg');
    background-repeat: no-repeat;
    background-position: 0 5px;
    padding-left: 35px;
    margin-bottom: 15px;
}

.integration-wrapper {
    background-color: white;
    margin-left: -50px;
    margin-right: -50px;
    margin-top: -100px;
    padding-top: 50px;
    padding-bottom: 50px;
}
.integration-grid {
    display: grid;
    max-width: var(--max-width);
    margin: 50px auto;
    grid-template-columns: 1fr 250px;
    grid-column-gap: 45px;
    grid-row-gap: 40px;
    margin-top: 130px;
    margin-bottom: 40px;
}
.integration-grid .grid-logo {
    background-color: #ffffff;
    padding: 20px 40px;
    text-align: center;
    box-shadow: 0 3px 6px #e5e4e7;
    border-radius: 35px;
    position: relative;
}
.integration-grid .grid-logo img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80%;
}
.integration-grid h1 {
    margin-top: 30px;
    margin-bottom: 20px;
}
.integration-tiles {
    max-width: var(--max-width);
    margin: 0 auto;
}
.integration-tiles .c-tiles_container {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 50px;
    grid-row-gap: 50px;
}
.integration-tiles .tile-title {
    text-align: left;
    font-size: 2.8em;
}
.integration-tiles .c-tiles_container .c-tile h3 {
    font-weight: bold;
}
.integration-others {
    text-align: center;
    font-size: 2.9em;
    margin-top: 100px;
}
.gray .below-integration {
    margin: 0 auto;
    margin-bottom: 100px;
    max-width: var(--max-width);
}
.gray .below-integration .animated-button {
    font-size: 1.1em;
    font-weight: 600;
}
.integration-tiles .c-tiles_container .c-tile {
    border: 2px solid #191C1F;
    border-radius: 40px;
    padding: 60px 90px !important;
    text-align: left;
    background-color: transparent;
    box-shadow: none;
}
@media (max-width: 1400px) {
    .integration-grid {
        max-width: 90%;
    }
}
@media (max-width: 1100px) {
    .integration-tiles .c-tiles_container .c-tile {
        padding: 40px !important;
    }
}
@media (max-width: 950px) {
    .integration-wrapper {
        margin: 0;
        margin-top: -40px;
        padding: 0;
    }
    .integration-grid {
        grid-template-columns: 1fr;
        padding: 10px;
    }
    .integration-grid .grid-logo {
        text-align: center;
        padding: 20px;
    }
    .integration-grid .grid-logo img {
        position: unset;
        transform: none;
    }
}
@media (max-width: 800px) {
    .integration-tiles .c-tiles_container {
        grid-template-columns: 1fr;
    }
}




.gray .infinity {
    position: relative;
    min-height: 330px;
    background-image: url('/media/static-preexisting/images/infinity.svg?v=2');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 200px auto;
    max-width: 1000px;
    margin: 50px auto;
}
.gray .infinity .sw, .gray .infinity .logo {
    width: 280px;
    height: 280px;
    padding: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    position: absolute;
    border-radius: 15px;
}
.gray .infinity img {
    max-width: 100%;
    margin: auto;
    display: block;
}
.gray .infinity .sw {
    background-color: #383838;
    left: 0;
    top: 0;
}
.gray .infinity .logo {
    background-color: var(--secondary-background-color);
    right: 0;
    top: 0;
}
.gray .infinity .logo img {
    max-width: 80%;
}
.aside-text {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: var(--secondary-background-color);
    box-shadow: 0 3px 6px #e5e4e7;
    border-radius: 35px;
    overflow: hidden;
    max-width: var(--max-width);
    margin: 35px auto;
}
.gray .aside-center {
    text-align: center;
}
.aside-text aside {
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
}
.gray .aside-more-text aside.text {
    flex-grow: 2;
}
.gray .aside-more-text aside.image {
    flex-grow: 1;
}
.aside-text .image {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    margin-right: -6px;
}
.aside-text .text {
    padding: 20px 40px;
}
.aside-text .headline {
    margin-bottom: 25px;
    font-size: 2.4em;
}
.aside-text h2 {
    margin-top: 25px;
    margin-bottom: 0;
    font-size: 3em;
}
.gray .aside-reversed {
    flex-direction: row-reverse;
}
.gray .aside-reversed .image {
    margin-right: 0;
    margin-left: -6px;
}
.gray .aside-blue {
    background-color: var(--sw-color);
    color: var(--secondary-background-color);
}
.gray .aside-blue a, .gray .aside-blue h2, .gray .aside-dark a, .gray .aside-dark h2 {
    color: var(--secondary-background-color);
}
.gray .aside-blue li, .gray .aside-dark li {
    background-image: url('/media/static/checkmark-white.svg');
}
.gray .aside-dark {
    background-color: var(--text-color);
    color: var(--secondary-background-color);
}
.gray .aside-light-gradient {
    background: transparent linear-gradient(69deg, #F1F7FF 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
}
.dynamic-home .gray:has(.aside-light-gradient) {
    overflow: visible;
    max-width: none;
}
/* This full-bleed dark banner treatment of "Set up in minutes" is part of the
   redesign package - the pale gradient card above is the original look, kept
   for the pre-redesign homepages that share the text_box component, so this
   whole block is scoped to .dynamic-home rather than the bare .dynamic every
   page gets. */
.dynamic-home .gray .aside-light-gradient {
    background: linear-gradient(120deg, #193147 0%, #2C5578 60%, #3C6D95 100%);
    width: 100vw;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
    /* Matches the other desktop section gaps down the page (120px) - only
       affects >800px, since the mobile override below fully replaces this
       shorthand regardless of its value. */
    margin: 120px 0 0 50%;
    transform: translateX(-50%);
    position: relative;
}
.dynamic-home .gray .aside-light-gradient .text {
    width: 100%;
    max-width: var(--max-width);
    box-sizing: border-box;
    margin: 0 auto;
    padding: 64px 40px;
    position: relative;
    z-index: 1;
}
.dynamic-home .gray .aside-light-gradient h2 {
    font-size: 2.2em;
    margin-bottom: 10px;
    color: white;
}
.dynamic-home .gray .aside-light-gradient p {
    color: #C9D9EC;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.dynamic-home .gray .aside-light-gradient p.small {
    color: rgba(255, 255, 255, 0.55);
}
.hw-logos-marquee {
    overflow: hidden;
    margin: 32px 0;
    -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%);
}
.hw-logos-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 44px;
    /* Speed is copy width over duration, so the two move together. */
    animation: hw-logos-scroll 39s linear infinite;
}
/* --hw-h is set per logo in the markup: each one is scaled so its visible ink covers
   a similar area, which is what makes a bold wordmark and a hairline one read at the
   same size. Matching their heights does not. The multiplier scales the whole set at
   once, so resizing never disturbs that balance. */
.hw-logo-item {
    height: calc(var(--hw-h, 30) * 1.15px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    opacity: 0.8;
}
.hw-logo-item img {
    height: 100%;
    width: auto;
    max-width: 125px;
    object-fit: contain;
    display: block;
}
@keyframes hw-logos-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .hw-logos-track {
        animation: none;
    }
}
/* Mobile swaps the single wide row for two shorter ones (see the markup in
   homepage-2026.liquid) so more logos are visible at once on a narrow screen -
   hidden/shown pair rather than a single reflowed layout, since the two versions
   use a different split of the same logos, not just a different wrap. */
.hw-logos-marquee-mobile {
    display: none;
}
@media (max-width: 600px) {
    .hw-logos-marquee-desktop {
        display: none;
    }
    .hw-logos-marquee-mobile {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .hw-logos-marquee-mobile .hw-logos-track {
        gap: 22px;
    }
    /* Runs the opposite way so the two rows read as independent motion rather
       than a mirrored copy of each other. */
    .hw-logos-track-reverse {
        animation-direction: reverse;
    }
}
.hw-devices-btn.animated-button {
    width: 280px;
    height: 54px;
    line-height: 54px;
    margin-top: 6px;
    margin-right: 0;
    font-weight: 700;
}
/* The generic mobile .animated-button rule centers with margin: 20px auto (both
   sides auto), but this selector's higher specificity was still winning on
   margin-right specifically (forced to 0 above), leaving margin-left as the only
   auto side - it absorbed 100% of the slack instead of half, pushing the button
   off-centre toward the right edge. Restoring full auto centering here, scoped
   to mobile so the desktop margin-right: 0 above is untouched. */
@media (max-width: 500px) {
    .hw-devices-btn.animated-button {
        margin-left: auto;
        margin-right: auto;
    }
}
/* Scaled down from the old 172/458/310 to match the rect shrinking from
   350x44 to 270x44 (roughly *0.77, the ratio of the two rects' perimeters). */
.hw-devices-btn.animated-button:hover svg rect {
    stroke-dasharray: 133 353;
    stroke-dashoffset: 239;
}
@media (max-width: 800px) {
    .dynamic-home .gray .aside-light-gradient {
        margin: 60px 0 0 50%;
    }
    .dynamic-home .gray .aside-light-gradient .text {
        padding: 40px 24px;
    }
    .hw-logo-item {
        height: calc(var(--hw-h, 30) * 1.05px);
    }
    .hw-logos-track {
        gap: 22px;
    }
}
/* #mobile-setup-minutes sits inside .gray.gray-blank, not .gray .aside-light-gradient,
   so the rules above do not reach it - restyle it standalone for that context. */
@media (max-width: 600px) {
    #mobile-setup-minutes {
        text-align: center;
        background: linear-gradient(120deg, #193147 0%, #2C5578 60%, #3C6D95 100%);
        width: 100vw;
        max-width: none;
        border-radius: 0;
        box-shadow: none;
        margin: 0 0 0 50%;
        transform: translateX(-50%);
        position: relative;
    }
    #mobile-setup-minutes .text {
        width: 100%;
        max-width: var(--max-width);
        box-sizing: border-box;
        margin: 0 auto;
        padding: 44px 24px;
        position: relative;
        z-index: 1;
    }
    #mobile-setup-minutes h2 {
        font-size: 2em;
        margin-bottom: 10px;
        color: white;
    }
    #mobile-setup-minutes p {
        color: #C9D9EC;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
    #mobile-setup-minutes p.small {
        color: rgba(255, 255, 255, 0.55);
    }
}

.error .error-label {
    color: #C80000;
    font-size: 14px;
    padding: 10px;
    padding-bottom: 0;
    padding-left: 20px;
}
.error input {
    border-color: #C80000 !important;
    color: #C80000;
}
.captcha-group {
    text-align: right;
    margin-bottom: 5px;
}
.gray .below-integration .headline {
    font-size: 2.4em;
}
.gray .below-integration p {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 1.8em;
}
.gray .below-integration .integrations {
    margin: 50px auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
.gray .below-integration .integrations .other-box {
    padding: 10px;
}

.gray .below-integration .integrations .image a {
    background-color: var(--secondary-background-color);
    padding: 25px;
    display: flex;
    justify-content: center;
    box-shadow: 0 3px 6px #e5e4e7;
    border-radius: 35px;
    margin-bottom: 20px;
    min-height: 150px;
}
.gray .below-integration .integrations .image a img {
    max-width: 90%;
    margin: auto;
    display: block;
    max-height: 100px;
    transition: all 0.5s;
}
.gray .below-integration .integrations .image a:hover img {
    transform: scale(1.05);
}
.gray .below-integration .integrations p, .gray .below-integration .integrations h3 {
    font-size: 22px;
    margin-top: 10px;
    margin-bottom: 5px;
    text-align: left;
}
.gray .below-integration .integrations h3 {
    font-size: 1.8em;
    font-weight: 500;
    margin-top: 0;
    text-align: center;
}
.contact-extras {
    text-align: center;
    margin-top: 80px;
    margin-bottom: 50px;
}
.contact-extras h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
}
.contact-extras p {
    font-size: 1.1em;
    max-width: 900px;
    margin: 0 auto;
}
.contact-extras .call {
    margin-top: 30px;
}

.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;
}

.new-industry {
    overflow: hidden;
    /* Mirrors the pricing section's light-gradient card look (.dynamic-home
       .c-industries_showcase), but reversed: light at the top, darker toward
       the footer seam below. */
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F7FF 100%);
}
.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: 1050px) {
    .gray .below-integration .integrations {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@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;
    }
}


@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;
    }
}
/* ---------- END GRAY --------- */
.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) {
    /* The last of the four contributors to the "and what's more" -> AI box gap:
       .gray.gray-blank's own top padding comes from the generic, site-wide .gray
       class (50px 0 20px) - too broad to touch there, so it is trimmed only for
       this page's own gray-blank section instead. Left/right already come out to
       0 from elsewhere; only top changes here (50px -> half at 25px -> another
       ~30% off at 18px), bottom is unrelated to this gap and stays as-is. */
    .dynamic-home .gray.gray-blank {
        padding-top: 18px;
    }
    /* Halved (60px -> 30px), then ~30% off again (30px -> 21px) - the other part
       of the "and what's more" -> AI box gap, alongside .c-product_stories'
       bottom padding and .story-tiles-row's own bottom margin. */
    .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;
    }
}
.c-whatsapp_promo {
    background: linear-gradient(120deg, #215C54 0%, #35897E 60%, #59CE72 100%);
    color: white;
    padding: 60px 20px 0;
    box-sizing: border-box;
    /* Top margin matches the other desktop section gaps down the page
       (120px). */
    margin: 120px -20px 0;
    text-align: left;
    overflow: hidden;
    /* The whole section opens the story now, same as a .story-feature card -
       see the matching JS in handleProductStories(). */
    cursor: pointer;
}
.whatsapp-promo-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 70px;
    max-width: var(--max-width);
    margin: 0 auto;
    min-height: 480px;
}
.c-whatsapp_promo .whatsapp-promo-content {
    padding-bottom: 60px;
}
.c-whatsapp_promo .whatsapp-promo-content {
    max-width: 480px;
}
.whatsapp-promo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #E0F6CA;
    margin-bottom: 16px;
}
.whatsapp-promo-eyebrow svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.c-whatsapp_promo .whatsapp-promo-content h2 {
    font-size: 2.2em;
    line-height: 1.2em;
    margin: 0 0 16px;
    color: white;
    display: block;
}
.c-whatsapp_promo .whatsapp-promo-content p {
    font-size: 1.1em;
    line-height: 1.6em;
    color: #EBE5DE;
    margin: 0 0 28px;
}
/* Same story-open-btn/story-swipe-hint pair the "See how Social WiFi works"
   boxes use (see the matching .story-feature rules) - a circle-outline play
   arrow on desktop, a solid pill with a circled play icon on phones, toggled
   together at this section's own 900px breakpoint below. Scoped to
   .c-whatsapp_promo rather than joining the .story-feature selector groups
   directly, since this section is a different component with its own
   dark-green background instead of a white card. */
.c-whatsapp_promo .story-open-btn {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: transparent;
    background-origin: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease,
        transform 0.25s ease;
}
.c-whatsapp_promo .story-open-btn::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    opacity: 0;
    pointer-events: none;
    animation: story-open-btn-pulse 1.8s ease-out infinite;
    will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
    .c-whatsapp_promo .story-open-btn::before {
        animation: none;
    }
}
.c-whatsapp_promo .story-open-btn svg {
    width: 22px;
    height: 22px;
}
.c-whatsapp_promo .story-open-btn:hover {
    transform: scale(1.1);
    background: #FFFFFF;
    color: #215C54;
}
.whatsapp-promo-media {
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.whatsapp-promo-media img {
    height: 520px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom;
    display: block;
}
@media (max-width: 900px) {
    .c-whatsapp_promo {
        padding: 44px 24px 0;
        margin: 60px 0 0;
    }
    .whatsapp-promo-inner {
        flex-direction: column;
        text-align: center;
        gap: 28px;
        min-height: 0;
    }
    .c-whatsapp_promo .whatsapp-promo-content {
        padding-bottom: 0;
    }
    .whatsapp-promo-eyebrow {
        justify-content: center;
    }
    .c-whatsapp_promo .whatsapp-promo-content h2 {
        /* Matches .ai-promo-content h2, which has no mobile override of its
           own and stays at its desktop 2em - keeps the two promo headlines
           the same size on phones. */
        font-size: 2em;
    }
    .whatsapp-promo-media {
        align-self: center;
    }
    .whatsapp-promo-media img {
        height: 420px;
    }
    .c-whatsapp_promo .story-open-btn {
        display: none;
    }
    /* Same pill-with-circled-play-icon the "See how" boxes and "And what's
       more" tiles use, in this section's own WhatsApp green. */
    .c-whatsapp_promo .story-swipe-hint {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 10px 24px 10px 10px;
        border-radius: 25px;
        color: #FFFFFF;
        font-weight: 600;
        font-size: 0.95em;
        text-transform: none;
        letter-spacing: normal;
        background-color: #22C55E;
    }
}
@media (max-width: 600px) {
    .c-whatsapp_promo {
        margin-top: 0;
    }
}
.identity-guidelines .container {
    text-align: center;
}
.identity-guidelines .container p {
    font-size: 20px;
    line-height: 1.6em;
}
.identity-guidelines .container .limiter {
    margin: 0 auto;
    max-width: 900px;
}
.identity-guidelines.inspirations .container .limiter {
    max-width: var(--max-width);
}
.identity-guidelines .container h1 {
    font-size: 3.4em;
    margin-bottom: 35px;
}
.identity-guidelines .container video {
    display: block;
    margin: 40px auto;
    border-radius: 20px;
    margin-bottom: 80px;
}

.identity-guidelines .tile-title {
    font-size: var(--h3-size);
}

.identity-guidelines.design-tips {
    padding-top: 80px;
    .container {
        padding-bottom: 30px;
        padding-top: 30px;
    }
    .container.lite-gradient {
        padding-bottom: 80px;
    }
    .container.tips-header {
        padding-bottom: 60px;
    }
}
.identity-guidelines .join {
    margin-top: 140px;
}
.identity-guidelines .container 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;
}
.identity-guidelines.ai .container h1 span {
    background: transparent linear-gradient(84deg, #FF7CB1 0%, #0168FF 100%) 0 0 no-repeat padding-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.identity-guidelines .container.header {
    background: transparent linear-gradient(72deg, #F1F7FF 0%, #FFFFFF 100%) 0 0 no-repeat padding-box;
    padding-top: 150px;
    padding-bottom: 110px;
    margin-top: -10px;
}
.identity-guidelines .container.header-white {
    padding-top: 130px;
    padding-bottom: 40px;
}
.identity-guidelines.ai .container.header {
    background: none;
}
.identity-guidelines .container h3 {
    margin-top: 40px;
    margin-bottom: 30px;
    font-size: var(--h3-size);
}
.logos-wrapper {
    margin-top: 80px;
    margin-bottom: 80px;
}
.icons-wrapper {
    margin-top: 40px;
    margin-bottom: 40px;
}
.identity-guidelines .container.name-container, .identity-guidelines .container.typography-container {
    background: transparent linear-gradient(72deg, #F1F7FF 0%, #FFFFFF 100%) 0 0 no-repeat padding-box;
    padding-top: 40px;
    padding-bottom: 70px;
    margin-top: 50px;
}
.identity-guidelines .container.name-container h3 {
    margin-top: 30px;
}
.identity-guidelines .container.name-container {
    margin-top: 60px;
}
@media (max-width: 799px) {
    .identity-guidelines .logos-wrapper,
    .identity-guidelines .icons-wrapper,
    .identity-guidelines .typography-container picture {
        display: flex;
        justify-content: center;
    }
    .identity-guidelines .call {
        display: flex;
        justify-content: center;
    }
}
.identity-guidelines .container.gradient-container {
    padding-top: 40px;
    padding-bottom: 20px;
}
.identity-guidelines .gradient-bar {
    background: transparent linear-gradient(90deg, #369AFE 0%, #00FFF8 100%) 0 0 no-repeat padding-box;
    height: 200px;
    position: relative;
}
.identity-guidelines .gradient-bar.bg-bar {
    background: transparent linear-gradient(84deg, #F1F7FF 0%, #FFFFFF 100%) 0 0 no-repeat padding-box;
}
.identity-guidelines .gradient-bar.ai-bar {
    background: transparent linear-gradient(263deg, #0068FF 0%, #FF7CB1 100%) 0 0 no-repeat padding-box;
}
.identity-guidelines .gradient-bar div {
    position: absolute;
    color: white;
    font-size: 22px;
    top: 42%
}
.identity-guidelines .gradient-bar.bg-bar div {
    color: #191C1F;
}
.identity-guidelines .gradient-bar .left {
    left: 50px;
}
.identity-guidelines .gradient-bar .right {
    right: 50px;
}
.identity-guidelines .container.logos-container {
    padding-top: 80px;
    padding-bottom: 20px;
}
.identity-guidelines .container.typography-container a {
    margin-top: 50px;
    margin-bottom: 30px;
}
.identity-guidelines .container.typography-container .limiter {
    margin-bottom: 50px;
}
.identity-guidelines .container.secondary {
    padding-top: 70px;
    padding-bottom: 20px;
}
.identity-guidelines .container.end-container {
    margin-top: 50px;
    padding-top: 90px;
    padding-bottom: 90px;
    background: transparent linear-gradient(84deg, #F1F7FF 0%, #FFFFFF 100%) 0 0 no-repeat padding-box;
}
.identity-guidelines .container.end-container h3 {
    line-height: 1.4em;
    font-size: 30px;
}
.centered-picture {
    display: block;
    max-width: 100%;
}
.centered-picture img {
    max-width: 100%;
}

@media (max-width: 750px) {
    .identity-guidelines .container video {
        display: block;
        margin: 40px auto;
        width: auto !important;
        height: auto !important;
        max-width: 90%;
    }
    .identity-guidelines .container {
        padding-left: 50px;
        padding-right: 50px;
        text-align: left;
    }
    .identity-guidelines .container h1 {
        font-size: 35px;
        text-align: left;
    }
    .identity-guidelines .container p {
        font-size: var(--mobile-text-size);
        text-align: left;
    }
    .identity-guidelines .container h3 {
        font-size: var(--mobile-header-size);
        text-align: left;
    }
    .identity-guidelines .container.end-container h3 {
        text-align: center;
        font-size: 25px;
    }
    .identity-guidelines .gradient-bar div {
        font-size: var(--mobile-text-size);
    }
    .identity-guidelines .animated-button {
        margin: 0;
        display: inline-block;
    }
    .identity-guidelines .container.colours-wrapper {
        padding-left: 0;
        padding-right: 0;
    }
    .identity-guidelines .container.end-container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .identity-guidelines .container.end-container .limiter div {
        text-align: center;
    }
}

@media (max-width: 600px) {
    .identity-guidelines .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}
/* ---------- Gallery CSS-Tricks Example by Chris Coyier --------- */
    .gallery {
        position: relative;
    }
    .gallery .categories {
        text-align: center;
        padding: 10px;
        margin-top: 10px;
        margin-bottom: 50px;
    }
    .gallery .categories .animated-button.active span {
        background: transparent linear-gradient(84deg, #FF7CB1 0%, #0168FF 100%) 0 0 no-repeat padding-box;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }
    .image-preview {
        padding: 20px;
        position: fixed;
        z-index: 10000000000;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: none;
    }
    .image-preview .cover {
        margin-top: 80px;
        height: 82dvh;
        width: 100%;
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: 50% 0;
    }
    .image-preview p {
        text-align: center;
        color: white;
        font-weight: bold;
    }
    #photos {
       padding: 30px 100px;
       line-height: 0;

       -webkit-column-count: 5;
       -webkit-column-gap:   30px;
       -moz-column-count:    5;
       -moz-column-gap:      30px;
       column-count:         5;
       column-gap:           30px;

    }

    #photos img {
      width: 100%;
      height: auto;
      margin-bottom: 30px;
      border-radius: 15px;
      cursor: pointer;
      transform-origin: top;
      transition: opacity 0.2s ease;
    }
    #photos img:hover {
        opacity: 0.8;
    }

    @media (max-width: 1200px) {
      #photos {
      -moz-column-count:    4;
      -webkit-column-count: 4;
      column-count:         4;
      }
    }
    @media (max-width: 1000px) {
      #photos {
      -moz-column-count:    3;
      -webkit-column-count: 3;
      column-count:         3;
      }
    }
    @media (max-width: 800px) {
      #photos {
          -moz-column-count:    2;
          -webkit-column-count: 2;
          column-count:         2;
          padding: 30px 40px;
      }
    }
    @media (max-width: 400px) {
      #photos {
      -moz-column-count:    1;
      -webkit-column-count: 1;
      column-count:         1;
      }
      #photos img {
          pointer-events: none;
      }
    }


/* ---------- Knowledgebase --------- */

.knowledgebase-page {
    margin: 0 auto;
    grid-template-columns: 200px auto;
    display: grid;
    grid-column-gap: 20px;
    margin-bottom: 40px;
}
.knowledgebase-page h1 {
    margin-bottom: 20px;
    font-size: 1.9em;
}
.knowledgebase-page .article-row {
    grid-template-columns: 1fr 1fr 1fr;
    display: grid;
    grid-column-gap: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
}
.knowledgebase-page a {
    text-decoration: none;
    color: #369AFE;
}

.knowledgebase-page .description {
    margin-top: 5px;
}
.knowledgebase-page .categories li {
    margin-bottom: 10px;
}
.knowledgebase-page .categories ul {
    padding-left: 17px;
    list-style: circle;
}
.knowledgebase-page .categories a {
    font-weight: bold;
    font-size: 0.95em;
}
.knowledgebase-page .categories a:hover {
    text-decoration: underline;
}
.knowledgebase-page .categories {
    background-color: white;
    padding: 10px;
    border-radius: 10px;
}
.knowledgebase-page section {
    line-height: 1.5em;
    background-color: white;
    padding: 10px 20px;
    border-radius: 10px;
}
.knowledgebase-page section p, .knowledgebase-page section span {
    font-size: 17px !important;
    line-height: 1.6em !important;
    font-family: "Mark Pro Medium", system-ui, -apple-system, sans-serif !important;
}
.knowledgebase-list {
    max-width: var(--max-width);
    margin: 0 auto;
}
.knowledgebase-list .articles {
    grid-template-columns: 1fr 1fr 1fr;
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.knowledgebase-list .item {
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
}
.knowledgebase-list .item p, .knowledgebase-list .item h3 {
    padding: 5px 10px;
    margin: 0;
}
.knowledgebase-list .small {
    font-size: 0.9em;
}
.knowledgebase-list .first {
    grid-template-columns: 1fr 1fr;
    display: grid;
    background-color: white;
    border-radius: 10px;
    padding: 5px 10px;
    overflow: hidden;
}
.knowledgebase-list .side-customer-image {
    margin-top: 5px;
}
.knowledgebase-list .first .text p, .knowledgebase-list .first .text h3 {
    margin: 0;
    padding: 5px 10px;
}
.knowledgebase-list .first .text h3 {
    font-size: 1.7em;
}

@media (max-width: 1200px) {
    .knowledgebase-list .articles {
        grid-template-columns: 1fr 1fr;
    }
    .knowledgebase-list .first .text h3 {
        font-size: 1.3em;
    }
}
@media (max-width: 900px) {
    .knowledgebase-list .first {
        grid-template-columns: 1fr;
    }
    .knowledgebase-list .side-customer-image {
        text-align: center;
    }
}
@media (max-width: 700px) {
    .knowledgebase-page {
        grid-template-columns: 1fr;
        grid-row-gap: 20px;
    }
    .knowledgebase-page .categories li {
        display: inline-block;
        margin-right: 15px;
    }
    .knowledgebase-page .article-row {
        grid-template-columns: 1fr;
        grid-row-gap: 20px;
    }
    .knowledgebase-list .articles {
        grid-template-columns: 1fr;
    }
}
/* ---------- END Knowledgebase --------- */

/* ---------- Blog/Customers --------- */
.post-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    margin-top: 50px;
    margin-bottom: 50px;
}
.post-list img {
    max-width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition: all 0.5s;
}

.post-list .item {
    background-color: var(--secondary-background-color);
    border-radius: 10px;
    padding-bottom: 20px;
    overflow: hidden;
}
.post-list .item:hover img {
    transform: scale(1.02);
}
.post-list .item p, .post-list .item h3 {
    padding: 0 30px;
    font-weight: normal;
}
.post-list .item p, .latest-post p {
    color: var(--sw-color);
}
.post-list .item .upper, .latest-post .upper {
    text-transform: uppercase;
}
.post-list .item .small {
    font-size: 0.95em;
}
.post-list .item h3, .latest-post h3 {
    margin-bottom: 10px;
    font-size: 1.3em;
}
.post-list .image-link {
    height: 180px;
    overflow: hidden;
    display: block;
    margin-bottom: 30px;
}
.latest-post {
    max-width: var(--max-width);
    margin: 0 auto;
    margin-bottom: 50px;
}
.latest-post aside {
    max-width: 80%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 40% 60%;
    grid-column-gap: 20px;
    box-shadow: 0 3px 6px #e5e4e7;
    border-radius: 10px;
}
.latest-post aside .text {
    padding: 20px;
    padding-left: 30px;
}
.latest-post aside img {
    max-width: 98%;
    height: 100%;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    transition: all 0.5s;
}
.latest-post:hover aside img {
    transform: scale(1.01);
}
.latest-post aside h3 {
    font-size: 1.8em;
    margin-top: 20px;
    margin-bottom: 30px;
}
@media (max-width: 1400px) {
    .post-list .image-link {
        height: auto;
    }
}
@media (max-width: 1070px) {
    .post-list {
        grid-template-columns: 1fr 1fr;
    }
    .latest-post aside {
        max-width: none;
        grid-template-columns: 1fr 1fr;
    }
    .latest-post {
        padding: 0;
    }
    .latest-post aside h3 {
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: 1.5em;
    }
}
@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;
    }
}
@media (max-width: 600px) {
    .post-list {
        grid-template-columns: 1fr;
        margin-top: 0;
    }
}
/* ---------- END Blog/Customers --------- */
/* ---------- 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;
}
.question-image {
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: cover;
}
.question-image-contain, .aside-text .image-contain {
    background-size: contain;
}
.question-image-max-width, .aside-text .image-max-width {
    background-size: 100% auto;
}
.question-image-max-height, .aside-text .image-max-height {
    background-size: auto 100%;
}
.question-image-height-80, .aside-text .image-height-80 {
    background-size: auto 80%;
}
.question-image-width-80, .aside-text .image-width-80 {
    background-size: 80% auto;
}
.question-image-middle, .aside-text .image-middle {
    background-position: 50% 50%;
}
.aside-text .image-left {
    background-position: 0 50%;
}
.aside-question-list {
    max-width: var(--max-width);
    margin: 80px auto;
}
/* FAQ matches the 1180px width shared by the feature story boxes, the tiles
   section and the quote box above it, instead of the site-wide --max-width
   (1300px), which read wider than everything above it. */
.reseller-page .aside-question-list,
.white-label-page .aside-question-list {
    max-width: 1180px;
    padding: 0 20px;
    box-sizing: border-box;
}
.aside-question-list h2 {
    font-size: var(--h2-size);
    margin-bottom: 10px;
    margin-top: 80px;
    text-align: center;
}
.aside-question-list h3 {
    font-size: 0.95em;
    margin-top: 20px;
    position: relative;
    z-index: 100;
}
.c-question {
    padding: 15px 0;
    padding-right: 50px;
    border-bottom: 1px solid var(--text-color);
}
.c-question:first-of-type {
    border-top: 1px solid var(--text-color);
    margin-top: 45px;
}
.c-question  {
    font-size: 1.2em;
    line-height: 1.4em;
    position: relative;
}
.c-question .question-text .icon {
    background-image: url('/media/static/assets/FAQ_1.svg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    display: block;
    width: 24px;
    height: 24px;
    top: 20px;
    right: 5px;
    position: absolute;
    transition-property: transform, opacity;
    transition-duration: 0.5s;
    background-size: 21px auto;
    padding: 5px;
}

.c-question h3 {
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    font-weight: 500;
    width: 104%;
}
.c-question .question-text .answer {
    font-size: 16px;
    line-height: 1.4em;
    margin-bottom: 0;
    max-height: 0;
    transition: max-height 0.3s ease-out;
    overflow: hidden;
}
.c-question .question-text.active .answer {
    max-height: 500px;
    transition: max-height 0.5s ease-in;
}
.c-question .question-text.active .icon {
    transform: rotate(135deg);
    opacity: 0.4;
}


@media (max-width: 1200px) {
    .aside-question-list h3 {
        font-size: 1.3em;
        padding-right: 60px;
    }
    .c-question h3 {
        width: auto;
    }
}
@media (max-width: 800px) {
    .aside-question-list h3 {
        font-size: 1.1em;
    }
}


.aside-statistics {
    text-align: center;
}
.statistics-container {
    max-width: var(--max-width);
    margin: 0 auto;
}
.aside-statistics .text div {
    display: flex;
    flex-wrap: wrap;
    margin-top: -20px;
}
.aside-statistics .text div .c-statistic {
    flex-grow: 1;
    flex-basis: 0;
    min-width: 180px;
    margin-top: 20px;
}
.aside-statistics p {
    margin: 0;
}
.dynamic .gray .aside-statistics .text h3 {
    font-size: 2.2em;
}
.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;
    }
}


.embedded-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 25px;
    grid-row-gap: 25px;
    max-width: var(--max-width);
    margin: 25px auto;
}
.inline-embedded-list {
    grid-template-columns: 1fr 1fr 1fr;
}
.embedded-list .image {
    background-color: var(--secondary-background-color);
    padding: 10px;
    border-radius: 10px;
}
.embedded-list .image a {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100px auto;
    display: block;
    height: 100px;
}
.blog-table {
    padding: 15px 15px;
}
.c-blog_table {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow: 1;
    padding: 10px 0;
    border-top: 2px solid var(--background-color);
    border-bottom: 2px solid var(--background-color);
}
.c-blog_table .c-table-element {
    flex-grow: 1;
    max-width: 40%;
    margin-right: 10px;
    margin-left: 5px;
}
.c-blog_table.c-table-dark {
    border-color: var(--secondary-text-color);
}
.c-blog_table.c-blog-mode-long-first-column .c-table-element:first-of-type {
    flex-grow: 2;
    max-width: 55%;
}

.contact-form {
    max-width: var(--max-width);
    margin: 50px auto;
}
.contact-form .hidden {
    display: none;
}
.contact-thanks {
    padding: 20px;
    text-align: center;
    margin-top: 70px;
    margin-bottom: 50px;
    display: none;
}
.contact-thanks h2 {
    font-size: 2.8em;
    margin-bottom: 40px;
}
.contact-thanks p {
    font-size: 1em;
    margin-bottom: 40px;
}
.contact-thanks .call {
    margin-bottom: 30px;
}
.contact-thanks .call .as-alter-button a {
    font-weight: 600;
}
.contact-thanks iframe {
    border-radius: 15px;
}
.thanks-wrapper {
    max-width: 900px;
    margin: 0 auto;
}
.contact-side-by-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 45px;
    grid-row-gap: 45px;
    margin-top: 55px;
}
.contact-single {
    grid-template-columns: 1fr;
    max-width: 800px;
    margin: 40px auto;
}
.contact-single .center {
    margin-bottom: 40px;
    margin-top: 10px;
}
.contact-single .center p {
    font-size: 1em;
    margin: 0;
}
.gray .contact-single h1 {
    margin-bottom: 20px;
}
.contact-side-by-side .aside-contact img {
    max-width: 150px;
    filter: brightness(0.75);
}
.contact-side-by-side form {
    background-color: var(--secondary-background-color);
    padding: 30px 80px;
    box-shadow: 0px 3px 6px #e5e4e7;
    border-radius: 35px;
}
.contact-side-by-side h2 {
    font-size: 2em;
}
.contact-side-by-side .aside-contact .text-aside {
    padding-top: 20px;
}
.contact-side-by-side .form-control {
    border-radius: 25px;
    border: 1px solid #ccc;
    padding: 10px 20px;
    display: block;
    font-size: 0.9em;
    width: 92%;
    resize: none;
}
.contact-side-by-side textarea {
    display: block;
    font-size: 0.9em;
    width: 100% !important;
    resize: none;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
label.id_message {
    border-radius: 25px;
    border: 1px solid #ccc;
    padding: 15px 20px;
    display: block;
    width: 92%;
}
label.id_message:hover {
    border: 1px solid #369AFE;
}
.contact-side-by-side .form-control::placeholder, .contact-side-by-side textarea::placeholder {
    color: #B0B6BF;
}
.contact-side-by-side .form-control:focus, .contact-side-by-side textarea:focus {
    border: 1px solid #369AFE;
    outline: none;
}
.contact-side-by-side textarea {
    padding: 25px 25px;
}
.contact-side-by-side #submit-button {
    background: transparent linear-gradient(90deg, #369AFE 0%, #00fff8 100%) 0 0 no-repeat padding-box;
    display: block;
    margin: 3px;
    padding: 12px 25px;
    color: white;
    text-align: center;
    border-radius: 40px;
    font-weight: 600;
    font-size: 1em;
    float: right;
    border: 0;
    cursor: pointer;
}
.contact-side-by-side .form-group {
    margin-bottom: 20px;
}
.contact-side-by-side .contact-form-row p {
    font-size: 0.85em;
}
.contact-side-by-side form .text-aside {
    margin-top: 20px;
    font-size: 0.95em;
}
.contact-side-by-side form .icon {
    padding: 5px;
    background-repeat: no-repeat;
    background-position: 0 0;
    opacity: .4;
}
.contact-side-by-side .form-info {
    margin-bottom: 25px;
}
.contact-side-by-side .form-info p {
    margin: 0;
}
.contact-info p {
    font-size: 13px !important;
}
.contact-info .address {
    background-image: url('/media/static/assets/location.svg');
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding-left: 35px;
    background-size: 30px auto;
}
.contact-info .email {
    background-image: url('/media/static/assets/mail.svg');
    background-repeat: no-repeat;
    background-position: 2px 50%;
    padding-left: 35px;
    background-size: 25px auto;
}
.contact-info .phone {
    background-image: url('/media/static/assets/phone.svg');
    background-repeat: no-repeat;
    background-position: 2px 50%;
    padding-left: 35px;
    background-size: 25px auto;
}
.contact-side-by-side .hidden {
    display: none;
}
.contact-side-by-side .iti {
    width: 107%;
}
.iti__country-container {
    margin-left: 5px;
    margin-right: 5px;
}
.iti__country-container:hover, .iti__selected-country:hover {
    background-color: transparent !important;
}
.iti__globe {
    background-image: url('/media/static/assets/flag.svg') !important;
}
.c-image_grid {
    background-color: var(--text-color);
    color: white;
    text-align: center;
    padding-bottom: 80px;
    padding-top: 40px;
}
.c-image_grid .inner {
    max-width: var(--max-width);
    margin: 0 auto;
}
.c-image_grid h2 {
    text-align: center;
    font-size: 3em;
    margin-bottom: 25px;
}
.c-image_grid h3, .c-image_grid p {
    margin-bottom: 0;
    margin-top: 0;
}
.c-image_grid h3 {
    font-size: 2em;
}
.c-image_grid p {
    font-size: 1.1em;
    margin-top: 10px;
    margin-bottom: 10px;
}
.c-image_grid .images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 45px;
    grid-row-gap: 45px;
    margin-top: 60px;
}
.c-image_grid .images .c-image_grid_element img {
    opacity: 0.5;
    border-radius: 40px;
}
.c-image_grid_element {
    position: relative;
}
.c-image_grid_element .text {
    position: absolute;
    top: 40%;
    width: 100%;
}
.c-image_list {
    text-align: center;
    color: var(--secondary-text-color);
    margin-bottom: 60px;
    margin-top: 20px;
}
.c-image_list h2 {
    font-size: 2em;
    margin-bottom: 20px;
}
.c-image_list .images {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto;
}
.c-image_list .images div {
    background-repeat: no-repeat;
    background-size: 150px auto;
    background-position: 50% 50%;
    flex-grow: 1;
    height: 150px;
    width: 150px;
    margin: 0 10px;
}
.large-image {
    border-radius: 15px;
    display: block;
    margin: 40px auto;
}
.gray.gray-blog-post .large-image, .gray.gray-blog-post .aside-text {
    border-radius: 0;
}
.gray-blank {
    background: none;
    background-color: white;
    padding-left: 0;
    padding-right: 0;
}
.gray-blank article, .dynamic .gray-blank .container {
    max-width: none;
}

.gray.white-blog-post .aside-text {
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

.why-choose-box {
    background: transparent linear-gradient(64deg, #D6E2FF 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
    padding: 60px 20px;
    margin-bottom: 60px;
}
.why-choose {
    max-width: 970px;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 20px;
}
.why-choose h2, .quote-header h2 {
    font-size: var(--h2-size);
    margin-bottom: 10px;
}
.why-choose p, .quote-header p {
    margin-bottom: 60px;
    font-size: 1.1em;
}
.why-choose h4 {
    font-size: var(--h3-size);
}
.why-choose ul {
    padding: 0;
    margin-bottom: 0;
    margin-top: 25px;
    list-style: none;
}
.why-choose li {
    line-height: 1.6em;
    font-size: 1.1em;
    margin-bottom: 15px;
    background-image: url('/media/static/assets/tick_purple.svg');
    background-repeat: no-repeat;
    background-size: 25px auto;
    background-position: 0 50%;
    padding-left: 40px;
}
.why-choose .grid {
    display: grid;
    grid-template-columns: 1fr 1fr ;
    grid-column-gap: 80px;
    text-align: left;
    margin-top: 50px;
}
.why-choose .box {
    background-color: white;
    border-radius: 18px;
    box-shadow: 0px 3px 6px #00000029;
    padding: 45px;
}
.quote-header {
    text-align: center;
    max-width: var(--max-width);
    margin: 0 auto;
}

.more-headline {
    font-size: var(--h3-size);
    font-weight: 500;
    margin-bottom: 35px;
    max-width: 70%;
}
.more-list {
    list-style: none;
    margin-top: -10px !important;
    margin-bottom: 40px !important;
}
.more-list li {
    display: block !important;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 21px;
    background-image: url('/media/static/assets/tick_purple.svg');
    background-repeat: no-repeat;
    background-size: 25px auto;
    background-position: 0 50%;
    padding-left: 45px;
}


@media (max-width: 1330px) {
    .dynamic .aside-text {
        margin-left: 20px;
        margin-right: 20px;
        border-radius: 15px;
    }
    .contact-side-by-side form {
        padding: 20px;
    }
    #contact .contact-side-by-side form {
        margin: 20px;
    }
    #contact .contact-side-by-side .form-control, #contact label.id_message {
        width: 85%;
    }
    .contact-thanks {
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

@media (max-width: 600px) {
    .contact-side-by-side input, .contact-side-by-side textarea {
        width: 85%;
    }
    .contact-side-by-side .form-control, label.id_message {
        width: 91%;
    }
    .contact-side-by-side .iti {
        width: 110%;
    }
}
@media (max-width: 450px) {
    .contact-side-by-side .form-control, label.id_message {
        width: 85%;
    }
    .contact-side-by-side .iti {
        width: 114%;
    }
    .contact-thanks {
        padding: 5px;
    }
}
/* ---------- Service widget Page --------- */
.c-service_introduction {
    overflow: hidden;
    background-color: var(--text-color);
}
.c-service_introduction .login-pages {
    margin-top: 40px;
}
.c-service_introduction .section {
    background-color: var(--text-color);
    padding: 20px;
    color: #fff;
}
.c-service_introduction .section .box {
    margin: 0 auto;
    text-align: center;
    padding: 40px 20px;
}

@keyframes slidein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .service-animation {
    animation-name: slidein;
    animation-duration: 1s;
  }
}

.c-service_introduction .section .image-wrapper {
    max-width: 900px;
    padding: 10px;
    margin: 0 auto;
}
.c-service_introduction .section .service-video {
    margin: 0 auto;
    max-width: 100%;
}
/* Pre-redesign statistics carousel only (see the if case_study_label branch
   in carousel_statistics.eleventy.liquid) - none of this collides with the redesign's
   .c-results_carousel styling below, and scripts.js's handleCarousel() already
   targets exactly this markup untouched, so no JS changes were needed either. */
.c-service_introduction .section.fourth .box h2 {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}
.c-service_introduction .fourth {
    background-color: white;
    color: var(--text-color);
    padding-top: 40px;
}
.c-service_introduction .section.fourth .box {
    max-width: none;
}
.c-service_introduction .statistics {
    margin-bottom: 30px;
    position: relative;
    margin-top: 40px;
}
.c-service_introduction .statistics .arrow {
    position: absolute;
    left: 5px;
    padding: 24px;
    background-image: url('/media/static/assets/carousel_arrow_left.svg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 50px auto;
    z-index: 1000;
    cursor: pointer;
    box-shadow: 0 3px 6px #e5e4e7;
    top: 40%;
    border-radius: 100%;
    display: none;
    transition: all .3s ease-in-out;
}
.c-service_introduction .statistics .arrow:hover {
    background-image: url('/media/static/assets/carousel_hover_left.svg');
    transform: translatey(2px);
}
.c-service_introduction .statistics .arrow.next {
    background-image: url('/media/static/assets/carousel_arrow_right.svg');
    left: auto;
    right: 5px;
}
.c-service_introduction .statistics .arrow.next:hover {
    background-image: url('/media/static/assets/carousel_hover_right.svg');
    transform: translatey(2px);
}
.c-service_introduction .statistics .group {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 45px;
    grid-row-gap: 45px;
    visibility: hidden;
    max-width: 85%;
    margin: 0 auto;
    transition: visibility 0s, opacity 1s ease-in-out;
    display: grid;
    opacity: 0;
    height: 0;
}
.c-service_introduction .statistics .group.visible {
    visibility: visible;
    opacity: 1;
    height: auto;
}
.c-service_introduction .c-statistic {
    border-radius: 30px;
    background: transparent linear-gradient(44deg, #369AFE 0%, #00FFF8 100%) 0% 0% no-repeat padding-box;
    display: inline-block;
}
.c-service_introduction .c-statistic .inner {
    background-color: var(--secondary-background-color);
    border-radius: 27px;
    margin: 4px;
    padding: 25px 35px;
    position: relative;
    text-align: left;
}
.c-service_introduction .c-statistic .inner:hover {
    background: transparent linear-gradient(44deg, #369AFE 0%, #00FFF8 100%) 0% 0% no-repeat padding-box;
    color: white;
}
.c-service_introduction .c-statistic .inner:hover a {
    color: white;
}
.c-service_introduction .c-statistic .inner:hover span {
    color: white;
    background-image: url("/media/static/assets/arrow_white.svg");
}
.c-service_introduction .c-statistic h3 {
    font-size: 2.8em;
}
.c-service_introduction .c-statistic a {
    text-decoration: none;
}
.c-service_introduction .c-statistic span {
    text-decoration: none;
    display: inline-block;
    padding: 10px;
    padding-left: 0;
    padding-right: 25px;
    background-image: url("/media/static/assets/arrow_black.svg");
    background-repeat: no-repeat;
    background-position: 100% 55%;
    background-size: 15px auto;
}
@media (max-width: 1400px) {
    .c-service_introduction .statistics .group {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 899px) {
    .c-service_introduction .statistics .arrow {
        display: none;
    }
    .c-service_introduction .statistics .group {
        visibility: visible;
        opacity: 1;
        height: auto;
        margin-top: 40px;
    }
    .c-service_introduction .section .service-video {
        height: 350px;
    }
}
@media (max-width: 650px) {
    .c-service_introduction .statistics .group {
        grid-column-gap: 25px;
        grid-row-gap: 25px;
        max-width: 100%;
    }
    .c-service_introduction .c-statistic .inner {
        min-height: 170px;
    }
    .c-service_introduction .statistics .group h3 {
        font-size: 1.8em;
    }
    .c-service_introduction .statistics .all {
        overflow-x: scroll;
    }
    .c-service_introduction .statistics .all::-webkit-scrollbar {
        display: none;
    }
    .c-service_introduction .statistics .group {
        grid-template-columns: 230px 230px 230px 230px;
        width: 980px;
    }
}
@media (max-width: 500px) {
    .c-service_introduction .statistics .group {
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }
    .c-service_introduction .c-statistic .inner {
        padding: 15px 20px;
    }
}
/* ---------- Results carousel (case study covers) ---------- */
.c-results_carousel {
    text-align: center;
    padding: 20px 20px 0;
}
.c-results_carousel h2 {
    font-size: var(--h2-size);
    margin: 0 0 15px;
    color: #4B5563;
}
.c-results_carousel h2 .gradient-word {
    background: linear-gradient(90deg, #369AFE 0%, #00fff8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.c-results_carousel > p {
    font-size: 1.1em;
    color: var(--secondary-text-color);
    margin: 0 0 40px;
}
.results-carousel-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: calc(var(--max-width) + 120px);
    margin: 0 auto;
    padding: 0 20px;
}
/* Desktop only - about 30% tighter than the shared 40px below the subheadline,
   which mobile keeps as-is. */
@media (min-width: 701px) {
    .c-results_carousel > p {
        margin-bottom: 28px;
    }
}
.results-track {
    display: flex;
    align-items: center;
    flex: 0 1 948px;
    max-width: 948px;
    min-width: 0;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 30px 0 40px;
    text-align: left;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.results-track::-webkit-scrollbar {
    display: none;
}
/* A card whose whole face is finished artwork: no padding, no wash, no ring - all of
   that is in the image. The 261x448 box is 0.583, the same ratio the thumbnails were
   exported at, so nothing is cropped. */
/* Two classes deep on purpose: .results-card sets the padding and the wash further
   down the file, so at equal specificity it would win on source order. */
.results-card.results-card-thumb {
    padding: 0;
    background: none;
    border: none;
    overflow: hidden;
}
.results-card.results-card-thumb::before {
    display: none;
}
.results-thumb-img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}
/* Desktop only. Three things here:
   - 562px, not 448. The card was 328x448, a ratio of 0.732 against artwork drawn at
     0.583, so object-fit: cover was filling the width and cropping 20.4% off the top
     and bottom. What it cropped was the margin the designer left under the figure,
     which is why the text looked like it was sitting on the card's edge. 328/0.583
     is 562, and at that height nothing is cropped at all.
   - the track widens to hold three whole cards, 3 x 328 plus 2 x 24 of gap, so the
     neighbours are no longer sliced by the edge of the strip.
   - side cards accept clicks, which they could not before. The first click brings one
     to the middle, the second opens it; see setupInfiniteResultsCarousel. */
@media (min-width: 601px) {
    /* Qualified with the wrapper: .results-card sets height and pointer-events further
       down the file, and a media query adds no specificity, so at equal weight those
       would win on source order. */
    /* 520 rather than 562: a little shorter, trimmed off the top only, because
       object-position pins the artwork to the bottom edge. The bottom margin the
       designer drew under the figure stays intact; what goes is sky at the top. */
    .results-carousel-wrap .results-card {
        height: 520px;
        pointer-events: auto;
        cursor: pointer;
    }
    .results-carousel-wrap .results-thumb-img {
        object-position: bottom;
    }
    /* Belt and braces with the dragstart handler in scripts.js: without this the
       browser still offers a ghost image when a card is dragged. */
    .results-carousel-wrap .results-card,
    .results-carousel-wrap .results-thumb-img {
        -webkit-user-drag: none;
        user-select: none;
    }
    .results-carousel-wrap .results-track {
        flex-basis: 1040px;
        max-width: 1040px;
    }
}
/* Grab and drag with a mouse, handled in scripts.js. */
.results-track {
    cursor: grab;
}
.results-track.is-dragging {
    cursor: grabbing;
    /* stops the browser turning the drag into a text selection */
    user-select: none;
    scroll-behavior: auto;
}
.results-nav {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid #E1E9F5;
    background-color: white;
    color: #4B5563;
    box-shadow: 0 8px 18px -12px rgba(20, 40, 80, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.results-nav svg {
    width: 22px;
    height: 22px;
}
.results-nav:hover {
    background-color: #369AFE;
    border-color: #369AFE;
    color: white;
}
.results-nav:disabled {
    opacity: 0.35;
    cursor: default;
}
.results-nav:disabled:hover {
    background-color: white;
    border-color: #E1E9F5;
    color: #4B5563;
}
.results-card {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 328px;
    min-width: 0;
    height: 448px;
    border-radius: 22px;
    /* Light wash in the client's own colour. The white layer underneath is what makes
       the translucent tint land on a known base instead of on whatever is behind the
       card, so every card reads the same strength. */
    background: linear-gradient(180deg, #FFFFFF 0%, var(--accent-tint, rgba(54, 154, 254, 0.14)) 100%), #FFFFFF;
    border: 1px solid rgba(20, 40, 80, 0.05);
    scroll-snap-align: center;
    text-decoration: none;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    padding: 30px 30px 26px;
    overflow: hidden;
    box-shadow: 0 10px 24px -18px rgba(20, 40, 80, 0.25);
    transform: scale(0.9);
    opacity: 0.72;
    transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.25s ease, border-color 0.2s ease;
    --accent: #369AFE;
    --accent-soft: rgba(54, 154, 254, 0.5);
    --accent-tint: rgba(54, 154, 254, 0.14);
}
.results-accent-0 { --accent: #369AFE; --accent-soft: rgba(54, 154, 254, 0.5); --accent-tint: rgba(54, 154, 254, 0.14); }
.results-accent-1 { --accent: #FF6B5D; --accent-soft: rgba(255, 107, 93, 0.5); --accent-tint: rgba(255, 107, 93, 0.14); }
.results-accent-2 { --accent: #15B8A6; --accent-soft: rgba(21, 184, 166, 0.5); --accent-tint: rgba(21, 184, 166, 0.14); }
.results-accent-3 { --accent: #7C6CF0; --accent-soft: rgba(124, 108, 240, 0.5); --accent-tint: rgba(124, 108, 240, 0.14); }
.results-accent-4 { --accent: #F5A623; --accent-soft: rgba(245, 166, 35, 0.5); --accent-tint: rgba(245, 166, 35, 0.16); }
.results-accent-5 { --accent: #FF7AA8; --accent-soft: rgba(255, 122, 168, 0.5); --accent-tint: rgba(255, 122, 168, 0.14); }
/* Per-client colours, specified by the designer. Set via the `brand` key on a
   statistic; these come after the rotating palette so they win.

   --accent      the outline
   --accent-soft the far end of the outline gradient
   --accent-tint the background wash, a softer version of the same colour. Pale
                 brands need a stronger tint or the wash is invisible.
   --accent-ink  text and the initials avatar. Urban Baristas and Penida Colada are
                 too light to read on white (1.45:1 and 1.30:1), so those two take
                 the same hue scaled down until it clears 4.5:1. The rest already
                 pass and use their colour unchanged. */
.results-brand-jockey-plaza { --accent: #FF1A5D; --accent-soft: rgba(255, 26, 93, 0.55); --accent-tint: rgba(255, 26, 93, 0.14); --accent-ink: #E51754; }
.results-brand-belmonte { --accent: #5B6E7F; --accent-soft: rgba(91, 110, 127, 0.55); --accent-tint: rgba(91, 110, 127, 0.14); --accent-ink: #5B6E7F; }
.results-brand-urban-baristas { --accent: #FFC9C9; --accent-soft: rgba(255, 201, 201, 0.75); --accent-tint: rgba(255, 201, 201, 0.3); --accent-ink: #8A6D6D; }
.results-brand-pros-cafe { --accent: #4E7487; --accent-soft: rgba(78, 116, 135, 0.55); --accent-tint: rgba(78, 116, 135, 0.14); --accent-ink: #4E7487; }
.results-brand-penida-colada { --accent: #FCDF9D; --accent-soft: rgba(252, 223, 157, 0.85); --accent-tint: rgba(252, 223, 157, 0.3); --accent-ink: #837452; }
.results-brand-malecon-2000 { --accent: #074B94; --accent-soft: rgba(7, 75, 148, 0.55); --accent-tint: rgba(7, 75, 148, 0.14); --accent-ink: #074B94; }
/* Still referenced by other pages' carousels. */
.results-brand-hotel-number-one { --accent: #3A4450; --accent-soft: rgba(58, 68, 80, 0.5); --accent-tint: rgba(58, 68, 80, 0.12); }
.results-brand-digitalfwd { --accent: #D8C000; --accent-soft: rgba(216, 192, 0, 0.5); --accent-tint: rgba(216, 192, 0, 0.16); }
.results-brand-stadion-gdansk { --accent: #F2B705; --accent-soft: rgba(242, 183, 5, 0.5); --accent-tint: rgba(242, 183, 5, 0.16); }
.results-brand-ocean-basket { --accent: #11376D; --accent-soft: rgba(17, 55, 109, 0.5); --accent-tint: rgba(17, 55, 109, 0.12); }
.results-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    /* Outline in the client's colour rather than one shared blue-to-cyan. */
    background: linear-gradient(135deg, var(--accent-soft, rgba(54, 154, 254, 0.5)) 0%, var(--accent-tint, rgba(0, 255, 248, 0.3)) 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;
    opacity: 0.9;
    transition: opacity 0.25s ease;
}
.results-card.is-center {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
    box-shadow: 0 22px 40px -22px rgba(20, 40, 80, 0.32), 0 0 26px -6px var(--accent-tint);
    z-index: 2;
}
.results-card.is-center::before {
    opacity: 1;
}
.results-card.is-center:hover {
    box-shadow: 0 24px 44px -22px rgba(20, 40, 80, 0.4), 0 0 30px -6px var(--accent-tint);
}
.results-card-top {
    display: flex;
    align-items: center;
    min-height: 34px;
}
.results-logo-img {
    height: 52px;
    width: auto;
    max-width: 82%;
    object-fit: contain;
}
/* A flat 30px made most of these unreadable. Each height below is set so the logo's
   visible ink covers a similar area to the others - that is what makes a hairline
   wordmark and a heavy stacked lockup read at the same size. Spread is 1.7x, against
   5x when they all shared one height. Keyed by filename so neither the component nor
   the front matter needs a size field. */
.results-logo-img[src$="urban-baristas-logo.png"] { height: 61px; }
.results-logo-img[src$="pros-cafe-logo.png"] { height: 52px; }
.results-logo-img[src$="penida-colada-logo.png"] { height: 59px; }
.results-logo-img[src$="malecon-2000-logo.png"] { height: 31px; }
.results-logo-img[src$="jockey-plaza-black.svg"] { height: 46px; }
.results-logo-img[src$="belmonte-logo.png"] { height: 60px; }
.results-brand-hotel-number-one .results-logo-img { height: 60px; }
.results-logo-text {
    font-size: 1.02em;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--accent-ink, var(--accent));
}
.results-value {
    display: block;
    font-size: 2.7em;
    font-weight: 800;
    line-height: 1.05em;
    letter-spacing: -0.01em;
    color: #12151A;
    margin-top: auto;
}
.results-label {
    display: block;
    font-size: 1.05em;
    line-height: 1.35em;
    color: #5B6472;
    margin-top: 8px;
}
.results-quote-mark {
    display: block;
    color: var(--accent-ink, var(--accent));
    margin: 20px 0 8px;
}
.results-quote-mark svg {
    width: 34px;
    height: 34px;
}
.results-quote {
    font-size: 1.05em;
    line-height: 1.5em;
    font-weight: 600;
    color: #2A2F37;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.results-person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 20px;
}
.results-avatar-img,
.results-avatar-mono {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex: none;
}
.results-avatar-img {
    object-fit: cover;
}
.results-avatar-mono {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-tint);
    color: var(--accent-ink, var(--accent));
    font-weight: 800;
    font-size: 0.95em;
    letter-spacing: 0.02em;
}
.results-person-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.results-person-name {
    font-weight: 700;
    font-size: 0.98em;
    color: #1C2128;
}
.results-person-role {
    font-size: 0.85em;
    color: #6B7280;
    margin-top: 2px;
}
.results-readmore {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 22px;
    font-size: 0.9em;
    font-weight: 600;
    color: #6B7280;
    transition: color 0.2s ease, gap 0.2s ease;
}
.results-readmore svg {
    width: 16px;
    height: 16px;
}
.results-card.is-center:hover .results-readmore {
    color: var(--accent-ink, var(--accent));
    gap: 11px;
}
.results-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 8px 0 28px;
}
.results-dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: #cdd9ec;
    transition: width 0.25s ease, background 0.25s ease;
    cursor: pointer;
}
.results-dots button.active {
    width: 22px;
    border-radius: 4px;
    background: #369AFE;
}
.results-carousel-cta {
    margin-top: 10px;
}
/* Thumbnail cards have no readmore pill and no hover-revealed chip either -
   without this the fact that clicking one opens a case study was not obvious.
   Play triangle, shown at every width, matching the play badges used elsewhere
   on the page. */
.results-thumb-arrow {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    /* ~50% bigger (30px -> 45px). */
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.22);
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
/* Same pulsing-ring trial as the other open buttons on the page. */
.results-thumb-arrow::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    opacity: 0;
    pointer-events: none;
    animation: story-open-btn-pulse 1.8s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .results-thumb-arrow::before {
        animation: none;
    }
}
.results-thumb-arrow svg {
    width: 23px;
    height: 23px;
    color: white;
}
@media (max-width: 700px) {
    .results-nav {
        display: none;
    }
    /* Now the same size as the desktop base rule above (both are 45px/23px, once
       desktop also went ~50% bigger) - nothing phone-specific left to override. */
    .c-results_carousel {
        padding-left: 0;
        padding-right: 0;
    }
    .c-results_carousel h2,
    .c-results_carousel > p {
        padding: 0 20px;
    }
    /* Matches the WhatsApp promo headline's mobile size (2em) - covers both
       "We deliver spectacular results" and, via the shared
       .c-testimonials_carousel h2, "What our Customers are saying". */
    .c-results_carousel h2 {
        font-size: 2em;
    }
    /* A bit more breathing room than the shared 20px above - this sentence
       runs longer than the other carousel's one-liner. */
    .c-testimonials_carousel > p {
        padding: 0 32px;
    }
    .results-carousel-wrap {
        padding: 0;
    }
    .results-card {
        flex: 0 0 261px;
    }
    .results-track {
        gap: 10px;
        padding: 20px calc((100% - 261px) / 2) 30px;
    }
    /* Same desktop/mobile text-swap pattern as .stats-headline-*, but scoped to
       this carousel's own 700px breakpoint rather than the site-wide 600px one. */
    .results-sub-desktop {
        display: none;
    }
    .results-sub-mobile {
        display: inline;
    }
}
@media (min-width: 701px) {
    .results-sub-mobile {
        display: none;
    }
}
@media (max-width: 600px) {
    .c-results_carousel {
        margin-top: 48px;
    }
}
/* ---- Testimonials carousel ----
   A second, dedicated instance of the .c-results_carousel scaffold (heading,
   nav buttons, .results-track, dots) so it reuses the exact same infinite-loop
   drag/swipe/autoplay engine in scripts.js (setupInfiniteResultsCarousel) as
   the "We deliver spectacular results" carousel above, instead of a second
   copy of that logic. Everything below is the new part: a calmer, uniform
   card design (no per-brand accent colours) scoped under
   .c-testimonials_carousel so none of it leaks into that other carousel. */
.c-testimonials_carousel {
    margin-top: 20px;
    margin-bottom: 80px;
}
/* The shared .c-results_carousel > p rule has no max-width - fine for the
   short one-liner above the other carousel, but this section's longer
   sentence needs to wrap well short of the full ~1100px track width. */
.c-testimonials_carousel > p {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.c-testimonials_carousel > p .nps-stat {
    color: #369AFE;
}
.c-testimonials_carousel .results-carousel-wrap .results-card {
    flex: 0 0 400px;
    height: 344px;
    /* Matches .dynamic-home .c-text_tiles_container .c-tile (the "Plus so much
       more" boxes right below this section), so the two rounded-corner radii
       read as the same family down the page. */
    border-radius: 20px;
    background: #FFFFFF;
    border: none;
    box-shadow: 0 20px 40px -20px rgba(20, 40, 80, 0.2);
    padding: 32px 34px 28px;
}
.c-testimonials_carousel .results-card::before {
    display: none;
}
/* Each card's own client photo, on its own blurred/dimmed ::before layer so
   the blur never touches the text, plus a navy wash on ::after (the same
   #193147 navy as #mobile-setup-minutes' "Set up in minutes" gradient,
   rather than a neutral black) so the quote stays readable regardless of how
   busy the photo is. Qualified with the same .c-testimonials_carousel
   .results-carousel-wrap prefix as the plain white .results-card rule above -
   matching its specificity so this actually wins instead of losing to it.
   Without that prefix the photo never painted: the white background stuck
   and the text (turned white below) went invisible against it. */
.c-testimonials_carousel .results-carousel-wrap .testimonial-card.has-bg {
    position: relative;
    overflow: hidden;
    background: none;
    border: none;
}
.testimonial-card.has-bg::before {
    content: "";
    display: block;
    position: absolute;
    inset: -10px;
    /* .results-card::before (the OTHER carousel's colour-outline ring, further
       up this file) also targets this same pseudo-element - .testimonial-card
       carries .results-card too - and clips it down to a 1.5px ring via
       mask-composite: exclude. None of that is scoped to a property this rule
       already sets, so it survives the cascade untouched unless reset here:
       without this the photo layer renders, but masked to an invisible sliver. */
    mask: none;
    -webkit-mask: none;
    padding: 0;
    background-image: var(--testimonial-bg);
    background-size: cover;
    background-position: center;
    opacity: 0.55;
    filter: blur(0.5px);
    z-index: 0;
}
.testimonial-card.has-bg::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(25, 49, 71, 0.4) 0%, rgba(11, 22, 34, 0.88) 100%);
    z-index: 1;
}
.testimonial-card.has-bg .testimonial-top,
.testimonial-card.has-bg .testimonial-quote,
.testimonial-card.has-bg .testimonial-person {
    position: relative;
    z-index: 2;
}
/* Already position: absolute of its own (see .testimonial-open above) - only
   needs lifting above the photo/wash layers, not re-positioned. */
.testimonial-card.has-bg .testimonial-open {
    z-index: 2;
}
.testimonial-card.has-bg .testimonial-quote,
.testimonial-card.has-bg .testimonial-person-name,
.testimonial-card.has-bg .testimonial-logo-text {
    color: #FFFFFF;
}
.testimonial-card.has-bg .testimonial-person-role {
    color: rgba(255, 255, 255, 0.75);
}
.testimonial-card.has-bg .testimonial-person {
    border-top-color: rgba(255, 255, 255, 0.25);
}
.testimonial-card.has-bg .testimonial-open {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.7);
    color: #FFFFFF;
}
.c-testimonials_carousel .results-carousel-wrap .results-card.has-bg.is-center:hover .testimonial-open {
    background: #FFFFFF;
    color: #191C1F;
}
.c-testimonials_carousel .results-carousel-wrap .results-card.is-center {
    box-shadow: 0 20px 40px -20px rgba(20, 40, 80, 0.22), 0 0 22px -6px rgba(54, 154, 254, 0.22);
}
/* The centred card's own shadow (32px offset + 58px blur) needs more room
   below it than the shared .results-track's 40px bottom padding - overflow-x:
   auto computes overflow-y to auto too, so without this the shadow's fade
   gets clipped flat instead of tapering off, showing as a stray rectangle
   under the card. Applies at every width; the max-width:700px block below
   restates it since that query redeclares the whole padding shorthand. */
.c-testimonials_carousel .results-track {
    padding-bottom: 70px;
}
/* Side cards read as more clearly "not the active one" - dimmer than the
   shared carousel's own 0.72 default, scoped here (rather than raising it
   on .results-card itself) so the other carousel using that class is
   unaffected. */
.c-testimonials_carousel .results-carousel-wrap .results-card:not(.is-center) {
    opacity: 0.4;
}
/* A small hint that the card leads to the full case study - quiet by default,
   picks up the site's blue on the centred card's hover so it doesn't compete
   with the quote for attention until someone is actually looking at it. */
.testimonial-open {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1.5px solid #369AFE;
    color: #369AFE;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.testimonial-open svg {
    width: 14px;
    height: 14px;
}
.c-testimonials_carousel .results-carousel-wrap .results-card.is-center:hover .testimonial-open {
    background: #369AFE;
    color: #fff;
}
.testimonial-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
}
.testimonial-logo {
    height: 30px;
    width: auto;
    max-width: 55%;
    object-fit: contain;
    object-position: left center;
}
/* A flat height makes some of these unreadable next to the others - each is
   set so the logo's visible ink covers a similar area, the same reasoning
   (and the same technique, keyed by filename) as .results-logo-img above.
   malecon-2000-logo-white.png is deliberately left at the 30px base - it's a
   wide, thin wordmark that already reads fine at that height. */
.testimonial-logo[src*="belmonte-logo"] { height: 44px; }
.testimonial-logo[src*="pros-cafe-logo"] { height: 40px; }
.testimonial-logo[src*="urban-baristas-logo"] { height: 44px; }
.testimonial-logo[src*="politan-row-logo-white"] { height: 34px; }
/* The file is actually a dark/black mark on a transparent background, not
   white despite its name - flatten it to pure black then invert, which turns
   any opaque pixel white while leaving transparency untouched. */
.testimonial-logo[src*="politan-row-logo-white"] {
    filter: brightness(0) invert(1);
}
.testimonial-logo[src*="penida-colada-logo"] { height: 46px; }
/* Both carry more visual mass than a plain wordmark (an icon+two lines of
   type for Artus, a stacked two-line wordmark for Zamek Łeba), so they read
   as small next to the others at the 30px base - sized up to match. */
.testimonial-logo[src*="artus-resort-logo-white"] { height: 52px; }
.testimonial-logo[src*="zamek-leba-logo-white"] { height: 46px; }
.testimonial-logo-text {
    font-size: 1em;
    font-weight: 800;
    color: #4B5563;
}
.testimonial-stars {
    display: flex;
    gap: 2px;
    flex: none;
}
.testimonial-stars svg {
    width: 15px;
    height: 15px;
    color: #F59E0B;
}
.c-testimonials_carousel .testimonial-quote {
    margin: 36px 0 0;
    font-size: 1.08em;
    line-height: 1.4em;
    font-weight: 400;
    color: #2A2F37;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.testimonial-person {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #EEF1F6;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.testimonial-person-name {
    font-weight: 700;
    font-size: 0.98em;
    color: #1C2128;
}
.testimonial-person-role {
    font-size: 0.85em;
    color: #6B7280;
}
@media (max-width: 700px) {
    .c-testimonials_carousel .results-carousel-wrap .results-card {
        flex: 0 0 300px;
        height: 348px;
        padding: 26px 24px 22px;
    }
    .c-testimonials_carousel .results-track {
        /* Bottom padding wide enough for the centred card's own box-shadow
           (32px offset + 58px blur) to fade out before hitting this
           scrollable box's edge - overflow-x: auto computes overflow-y to
           auto too, so anything past this padding gets clipped flat instead
           of fading, which read as a stray rectangle under the card. */
        padding: 20px calc((100% - 300px) / 2) 70px;
    }
}
@media (max-width: 600px) {
    .c-testimonials_carousel {
        margin-top: 31px;
    }
}
.c-service_introduction .section .box h2 {
    background: transparent linear-gradient(90deg, #369AFE 0%, #00fff8 100%) 0 0 no-repeat padding-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: var(--h2-size);
    margin-bottom: 0;
    display: inline-block;
}
.c-service_introduction .section .box h2 span {
    background: transparent linear-gradient(90deg, #F1F7FF 0%, #F1F7FF 100%) 0 0 no-repeat padding-box;
    -webkit-background-clip: text;
}
.c-service_introduction .section.fourth .box h2 {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}
.c-service_introduction .section .box p {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 1.1em;
}
.c-service_introduction .fourth {
    background-color: white;
    color: var(--text-color);
    padding-top: 40px;
}
.c-service_introduction .call {
    margin-bottom: 50px;
    margin-top: 20px;
}
.c-service_introduction .as-button span {
    background-color: #191C1F;
}
.c-service_introduction .as-button span.alt {
    background-color: white;
}

.c-service_introduction .section.fourth .box {
    max-width: none;
}
.c-service_introduction .statistics {
    margin-bottom: 30px;
    position: relative;
    margin-top: 40px;
}
.c-service_introduction .statistics .arrow {
    position: absolute;
    left: 5px;
    padding: 24px;
    background-image: url('/media/static/assets/carousel_arrow_left.svg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 50px auto;
    z-index: 1000;
    cursor: pointer;
    box-shadow: 0 3px 6px #e5e4e7;
    top: 40%;
    border-radius: 100%;
    display: none;
    transition: all .3s ease-in-out;
}
.c-service_introduction .statistics .arrow:hover {
    background-image: url('/media/static/assets/carousel_hover_left.svg');
    transform: translatey(2px);
}
.c-service_introduction .statistics .arrow.next {
    background-image: url('/media/static/assets/carousel_arrow_right.svg');
    left: auto;
    right: 5px;
}
.c-service_introduction .statistics .arrow.next:hover {
    background-image: url('/media/static/assets/carousel_hover_right.svg');
    transform: translatey(2px);
}
.c-service_introduction .statistics .group {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 45px;
    grid-row-gap: 45px;
    visibility: hidden;
    max-width: 85%;
    margin: 0 auto;
    transition: visibility 0s, opacity 1s ease-in-out;
    display: grid;
    opacity: 0;
    height: 0;
}
.c-service_introduction .statistics .group.visible {
    visibility: visible;
    opacity: 1;
    height: auto;
}
.c-service_introduction .c-statistic {
    border-radius: 30px;
    background: transparent linear-gradient(44deg, #369AFE 0%, #00FFF8 100%) 0% 0% no-repeat padding-box;
    display: inline-block;
}
.c-service_introduction .c-statistic .inner {
    background-color: var(--secondary-background-color);
    border-radius: 27px;
    margin: 4px;
    padding: 25px 35px;
    position: relative;
    text-align: left;
}
.c-service_introduction .c-statistic .inner:hover {
    background: transparent linear-gradient(44deg, #369AFE 0%, #00FFF8 100%) 0% 0% no-repeat padding-box;
    color: white;
}
.c-service_introduction .c-statistic .inner:hover a {
    color: white;
}
.c-service_introduction .c-statistic .inner:hover span {
    color: white;
    background-image: url("/media/static/assets/arrow_white.svg");
}
.c-service_introduction .c-statistic h3 {
    font-size: 2.8em;
}
.c-service_introduction .c-statistic a {
    text-decoration: none;
}
.c-service_introduction .c-statistic span {
    text-decoration: none;
    display: inline-block;
    padding: 10px;
    padding-left: 0;
    padding-right: 25px;
    background-image: url("/media/static/assets/arrow_black.svg");
    background-repeat: no-repeat;
    background-position: 100% 55%;
    background-size: 15px auto;
}

@media (max-width: 1880px) {
    .asset {
        display: none;
    }
    .c-service_introduction .section.second, .c-service_introduction .section.third {
        padding-top: 0;
        padding-bottom: 0;
    }
}
@media (max-width: 1400px) {
    .c-service_introduction .statistics .group {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 899px) {
    .c-service_introduction .statistics .arrow {
        display: none;
    }
    .c-service_introduction .statistics .group {
        visibility: visible;
        opacity: 1;
        height: auto;
        margin-top: 40px;
    }
    .c-service_introduction .section .service-video {
        height: 350px;
    }
}
@media (max-width: 650px) {
    .c-service_introduction .statistics .group {
        grid-column-gap: 25px;
        grid-row-gap: 25px;
        max-width: 100%;
    }
    .c-service_introduction .c-statistic .inner {
        min-height: 170px;
    }
    .c-service_introduction .statistics .group h3 {
        font-size: 1.8em;
    }
    .c-service_introduction .section .box p {
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .c-service_introduction .section .box h2 {
        font-size: 1.8em;
    }
    .c-service_introduction .section .box {
        padding: 30px 0;
    }
    .c-service_introduction .statistics .all {
        overflow-x: scroll;
    }
    .c-service_introduction .statistics .all::-webkit-scrollbar {
        display: none;
    }
    .c-service_introduction .statistics .group {
        grid-template-columns: 230px 230px 230px 230px;
        width: 980px;
    }
}

@media (max-width: 500px) {
    .c-service_introduction .statistics .group {
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }
    .c-service_introduction .c-statistic .inner {
        padding: 15px 20px;
    }
    .c-service_introduction .section .box p {
        font-size: 1em;
        margin-bottom: 5px;
    }
}

/* ---------- Product stories ---------- */
.c-product_stories {
    background: linear-gradient(180deg, #F1F7FF 0%, #FFFFFF 100%);
    /* Bottom matches the other desktop section gaps down the page (120px,
       combined with .c-ai_promo's own 16px top margin). */
    padding: 70px 20px 54px;
    text-align: center;
    box-sizing: border-box;
}
.c-product_stories h2 {
    font-size: var(--h2-size);
    margin: 0 0 15px;
    color: #4B5563;
    display: inline-block;
}
.c-product_stories h2 span {
    background: transparent linear-gradient(90deg, #369AFE 0%, #00fff8 100%) 0 0 no-repeat padding-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Keeps "Social WiFi" together as one unit - wraps the whole span to the
       next line instead of splitting the two words apart. */
    white-space: nowrap;
}
/* .see-how-wrap > p, not .c-product_stories > p: the standfirst is now nested one
   level deeper inside the wrapper that gives phones their single gradient
   background (see .see-how-wrap below), so the old direct-child combinator no
   longer reaches it. */
.c-product_stories .see-how-wrap > p {
    font-size: 1.1em;
    color: var(--secondary-text-color);
    margin: 0 0 45px;
}
.story-sections {
    max-width: 1180px;
    margin: 0 auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 36px;
}
.story-feature {
    position: relative;
    border-radius: 24px;
    padding: 44px;
    box-shadow: 0 4px 18px rgba(20, 40, 80, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    /* The open button's pulsing ring lives several levels down from here; without
       this, starting the hover transform below promotes/repaints this whole
       backdrop-filter subtree in one step, which was still visibly interrupting
       that ring even after giving the ring its own will-change layer. Isolating
       the card's own transform onto its own layer up front means starting the
       hover transition never touches the ring's layer at all. */
    will-change: transform;
}
.story-feature-track {
    display: flex;
    align-items: center;
    gap: 60px;
    width: 100%;
}
.story-feature-reverse .story-feature-track {
    flex-direction: row-reverse;
}
.story-feature-panel-summary {
    display: contents;
}
.story-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(20, 40, 80, 0.16);
}
.story-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.75px;
    background: linear-gradient(135deg, rgba(39, 117, 240, 0.45) 0%, rgba(90, 166, 255, 0.45) 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;
}
.story-feature-data {
    background: radial-gradient(circle at 88% 12%, rgba(39, 117, 240, 0.09) 0%, rgba(39, 117, 240, 0) 45%), linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%);
}
.story-feature-data::before {
    background: linear-gradient(135deg, rgba(39, 117, 240, 0.45) 0%, rgba(90, 166, 255, 0.45) 100%);
}
.story-feature-reviews {
    background: radial-gradient(circle at 12% 88%, rgba(242, 163, 16, 0.09) 0%, rgba(242, 163, 16, 0) 45%), linear-gradient(180deg, #FAFCFF 0%, #F6FAFF 100%);
    padding-left: 90px;
}
.story-feature-reviews::before {
    background: linear-gradient(135deg, rgba(242, 163, 16, 0.45) 0%, rgba(255, 201, 60, 0.45) 100%);
}
.story-feature-email {
    background: radial-gradient(circle at 88% 88%, rgba(139, 111, 232, 0.09) 0%, rgba(139, 111, 232, 0) 45%), linear-gradient(180deg, #F6FAFF 0%, #F1F7FF 100%);
}
.story-feature-email::before {
    background: linear-gradient(135deg, rgba(139, 111, 232, 0.45) 0%, rgba(183, 156, 255, 0.45) 100%);
}
.story-feature-reverse {
    flex-direction: row-reverse;
}
.story-feature-media {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Direct child only: the Data Gathering phone nests its own images (bezel, logo)
   inside .story-feature-media and must not inherit the flat-artwork sizing. */
.story-feature-media > img,
.story-feature-media svg.wifi-graphic {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 420px;
    object-fit: contain;
    display: block;
    border-radius: 20px;
    box-shadow: 0 25px 50px -25px rgba(15, 35, 75, 0.4);
}

/* Data Gathering phone -------------------------------------------------------
   The device rises out of the bottom edge of the box, so the box clips it. The
   geometry is the WhatsApp animation's: a 340x702 device scaled as one unit, with
   the bezel image on top and the screen aperture at 14/12, 311x677, radius 46.
   Anchored to the top of the media column rather than the bottom, so how much of
   the phone shows is set by the column height and never by a magic offset. */
.story-feature-data {
    overflow: hidden;
}
/* 379px is where the old 640x470 artwork lands in a 516px column, which is what the
   Email box still shows. Matching it keeps all three boxes exactly 467px tall. The
   phone is taller than the column and simply gets cut higher up. */
.story-feature-data .story-feature-media {
    position: relative;
    align-self: stretch;
    /* The column itself does the cutting, flush with the inside of the box's 1.75px
       gradient ring: -42px against the box's 44px padding leaves the ring visible and
       nothing more, so the outline ends exactly where the phone begins.

       421 = 379 + 42. A flex item's contribution to the line is its margin box, so the
       negative margin has to be added back into min-height or the box would end up
       42px shorter than the other two. */
    min-height: 421px;
    overflow: hidden;
    margin-bottom: -42px;
}
.wifi-phone {
    --wifi-phone-scale: 0.88;
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(340px * var(--wifi-phone-scale));
    height: calc(702px * var(--wifi-phone-scale));
    transform: translateX(-50%);
    font-family: "Inter", system-ui, -apple-system, sans-serif;
}
.wifi-phone *,
.wifi-phone *::before,
.wifi-phone *::after {
    box-sizing: border-box;
}
.wifi-phone-device {
    position: absolute;
    top: 0;
    left: 0;
    width: 340px;
    height: 702px;
    transform: scale(var(--wifi-phone-scale));
    transform-origin: top left;
    /* drop-shadow rather than box-shadow: it follows the bezel's alpha, so the shadow
       is phone-shaped instead of a rectangle behind the rounded corners.

       The offset has to clear the blur radius. The column crops the phone, and its top
       edge sits level with the phone's, so any shadow reaching above the device gets
       sliced off in a straight line across the top corners. 26 > 24/2 keeps all of it
       below that edge. */
    filter: drop-shadow(0 26px 24px rgba(15, 45, 100, 0.26));
}
.wifi-phone-screen {
    position: absolute;
    left: 14px;
    top: 12px;
    width: 311px;
    height: 677px;
    border-radius: 46px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Shows through wherever the photo does not reach, and is the tint colour, so any
       gap reads as part of the overlay rather than as a hole. */
    background: #4B5563;
}
.story-feature-media .wifi-phone .wifi-phone-shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    object-fit: cover;
    display: block;
}
.wifi-phone-tint {
    position: absolute;
    inset: 0;
    display: block;
    background: #4B5563;
    opacity: 0.6;
}
/* The photo and its tint are absolutely positioned, which would paint them over the
   in-flow status bar and copy - these two lift the content back on top. */
.wifi-phone-status,
.wifi-phone-content {
    position: relative;
    z-index: 1;
}
.story-feature-media .wifi-phone .wifi-phone-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    object-fit: fill;
    pointer-events: none;
    z-index: 5;
}
.wifi-phone-status {
    flex: 0 0 auto;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px 0 24px;
}
.wifi-phone-time {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #FFFFFF;
}
.wifi-phone-status-icons {
    display: flex;
    align-items: center;
    gap: 6px;
}
.wifi-phone-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Sits high on the screen: the bottom of the device is cut off, so vertical air
       up here is what pushes the login icons towards the cut. */
    padding: 30px 30px 0;
}
.story-feature-media .wifi-phone .wifi-phone-logo {
    width: 104px;
    height: auto;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    display: block;
}
.wifi-phone-welcome {
    margin-top: 22px;
    font-size: 33px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}
.wifi-phone-lead {
    margin: 10px 0 0;
    font-size: 15.5px;
    line-height: 1.5;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
}
.wifi-phone-icons {
    display: flex;
    gap: 14px;
    margin-top: 34px;
}
/* One shared blue gradient for all four discs rather than each brand's own colour, so
   the row reads as part of the login screen instead of four logos. */
.wifi-phone-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: linear-gradient(180deg, #73B9FF 0%, #198CFF 100%);
    box-shadow: 0 10px 20px -10px rgba(4, 32, 76, 0.55);
    animation: iconFloat 3.2s ease-in-out infinite;
}
.wifi-phone-icon svg {
    width: 24px;
    height: 24px;
}
/* Same stagger the icons had in the browser mockup. */
.wifi-phone-icon-whatsapp {
    animation-delay: 0s;
}
.wifi-phone-icon-linkedin {
    animation-delay: 0.4s;
}
.wifi-phone-icon-x {
    animation-delay: 0.8s;
}
.wifi-phone-icon-email {
    animation-delay: 1.2s;
}
@media (prefers-reduced-motion: reduce) {
    .wifi-phone-icon {
        animation: none;
    }
}

/* Mail mockups ---------------------------------------------------------------
   Shared chrome for the Positive Reviews and Email Marketing boxes. Each mail runs
   off one side of its box, which clips it: Reviews to the right, Email Marketing to
   the left. Both columns are the same 379px as the Data Gathering one, so all three
   boxes stay exactly 467px tall.

   Top to bottom: a white sender strip that ends in a straight line, the mail's own
   tinted background under it, and the message on a white card that runs out of the
   bottom of the mockup and is cut by it.

   Desktop only: mobile stacks these full-width instead of running the mail off one
   side, and has its own overflow: hidden scoped to just .story-feature-media (see
   the mobile block further down) - this unscoped version was also clipping
   .story-feature-icon-badge on mobile, which deliberately straddles the card's own
   top edge above this box. */
@media (min-width: 701px) {
    .story-feature-reviews,
    .story-feature-email {
        overflow: hidden;
    }
}
.story-feature-reviews .story-feature-media,
.story-feature-email .story-feature-media {
    position: relative;
    align-self: stretch;
    min-height: 379px;
}
.mail-mock {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px -25px rgba(15, 35, 75, 0.4);
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    color: #4B5563;
    /* The phone card centres its text, and the sender strip would inherit that - a mail
       header reads left aligned. The message card sets centre back for itself. */
    text-align: left;
}
.mail-mock *,
.mail-mock *::before,
.mail-mock *::after {
    box-sizing: border-box;
}
/* -42px against the box's 44px padding lands the mail flush with the inside of the
   box's 1.75px gradient ring: the outline ends, the mail begins. The edge it runs
   towards is square; the inner side keeps its radius.

   The Positive Reviews box carries 90px of left padding instead of 44px, so its column
   is 46px narrower and the two-column split makes it 23px narrower per side. Holding
   the promo mail 23px off its inner edge makes both mails exactly the same width. */
/* Mobile-only shadow sibling for .mail-mock - see the mobile override below
   for why it exists as its own element rather than a box-shadow on .mail-mock. */
.mail-mock-shadow {
    display: none;
}
.mail-mock-reviews {
    left: 0;
    right: -42px;
    border-radius: 20px 0 0 20px;
    background: linear-gradient(150deg, #FDFBF7 0%, #F6EBD6 100%);
}
.mail-mock-promo {
    left: -42px;
    right: 23px;
    border-radius: 0 20px 20px 0;
    background: linear-gradient(200deg, #FBFAFE 0%, #E7DFFB 100%);
}
.mail-mock-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 26px;
    background: #FFFFFF;
    /* Reads as a normal inbox header divider, and stops the strip's own white
       from disappearing into the box's white top on the reviews/email cards. */
    border-bottom: 1px solid rgba(15, 35, 75, 0.08);
}
.story-feature-media .mail-mock .mail-mock-avatar {
    width: 40px;
    height: 40px;
    flex: none;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    display: block;
}
.mail-mock-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mail-mock-from {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
}
.mail-mock-sender {
    font-size: 14px;
    font-weight: 700;
}
/* Lighter by weight, not by colour: every line in here is the same grey as the
   section headline. */
.mail-mock-address,
.mail-mock-to {
    font-size: 12.5px;
    font-weight: 400;
}
/* Mail-client chrome on the right of the sender strip. Same grey as everything else,
   dropped back with opacity so it reads as the client's UI rather than the message.
   Two rows, right aligned to each other, so the icons line up with the sender and the
   time sits under the last of them. */
.mail-mock-actions {
    flex: none;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    color: #4B5563;
    opacity: 0.55;
}
.mail-mock-icons {
    display: flex;
    align-items: center;
    gap: 12px;
}
.mail-mock-time {
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}
.mail-mock-actions svg {
    width: 15px;
    height: 15px;
    flex: none;
}
.mail-mock-body {
    flex: 1;
    min-height: 0;
    position: relative;
}
.mail-mock-card {
    position: absolute;
    top: 20px;
    /* Past the bottom of the mockup, which clips it, so the message reads as carrying
       on below the fold instead of floating inside a frame. */
    bottom: -34px;
    left: 56px;
    right: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 18px 26px 0;
    text-align: center;
    background: #FFFFFF;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 18px 34px -20px rgba(120, 84, 10, 0.34);
}
.mail-mock-promo .mail-mock-card {
    gap: 12px;
    box-shadow: 0 18px 34px -20px rgba(76, 44, 140, 0.4);
}
.story-feature-media .mail-mock .mail-mock-logo {
    width: auto;
    height: 42px;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    display: block;
}
.mail-mock-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Positive Reviews message */
.review-stars {
    display: flex;
    gap: 8px;
}

.submit-disabled {
    pointer-events: none;
}
.lds-ring {
  color: #b3fffd;
  display: none;
  margin-left: -6px;
  margin-top: -8px;
}
.lds-ring,
.lds-ring div {
  box-sizing: border-box;
}
.lds-ring {
  position: relative;
  width: 30px;
  height: 30px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  margin: 4px;
  border: 4px solid currentColor;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: currentColor transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ---------- Pricing ------------ */
.pricing {
    padding: 40px 20px;
    margin: 0 auto;
    margin-top: 30px;
    max-width: var(--max-width);
}
.review-star {
    position: relative;
    width: 42px;
    height: 42px;
}
.review-star svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.review-star-on {
    transform-origin: center;
    animation: starPop 3.6s ease-in-out infinite;
}
.review-star-on-1 { animation-delay: 0s; }
.review-star-on-2 { animation-delay: 0.18s; }
.review-star-on-3 { animation-delay: 0.36s; }
.review-star-on-4 { animation-delay: 0.54s; }
.review-star-on-5 { animation-delay: 0.72s; }
.review-platforms {
    display: flex;
    gap: 34px;
}
.review-platform {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}
.review-platform-badge {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}
.review-platform-badge svg {
    width: 34px;
    height: 34px;
}
.review-platform-tripadvisor {
    background: #00AA6C;
    box-shadow: 0 8px 18px -6px rgba(0, 170, 108, 0.5);
}
.review-platform-google {
    background: #4285F4;
    box-shadow: 0 8px 18px -6px rgba(66, 133, 244, 0.5);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}
.review-platform-trustpilot {
    background: #2D3748;
    box-shadow: 0 8px 18px -6px rgba(45, 55, 72, 0.5);
}
.review-platform-label {
    font-size: 12.5px;
    font-weight: 600;
}

/* Email Marketing message */
.promo-shot-wrap {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}
.story-feature-media .mail-mock .promo-shot {
    width: 100%;
    height: 88px;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    display: block;
}
/* Centred over the whole band, so the scrim covers the whole band too - a bottom-up
   gradient would leave the first line sitting on bare photo. */
.promo-shot-caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 14px;
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(10, 20, 40, 0.55);
    background: rgba(20, 24, 40, 0.46);
}
.promo-shot-line {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
}
.promo-shot-code {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.01em;
}
.promo-btn {
    padding: 12px 26px;
    border-radius: 24px;
    background: linear-gradient(90deg, #8B6FE8 0%, #B79CFF 100%);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 12px 24px -10px rgba(139, 111, 232, 0.7);
    animation: promoBtnPulse 3s ease-in-out infinite;
}
/* The one moving thing in this box, the way the stars move in the reviews mail. */
@keyframes promoBtnPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
    .review-star-on,
    .promo-btn {
        animation: none;
    }
}

@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}
@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes popCheck {
    0%, 70%, 100% { transform: scale(1); }
    80% { transform: scale(1.22); }
    90% { transform: scale(.94); }
}
@keyframes starPop {
    0% { opacity: 0; transform: scale(.3); }
    10% { opacity: 1; transform: scale(1.2); }
    18%, 84% { opacity: 1; transform: scale(1); }
    94%, 100% { opacity: 0; transform: scale(.3); }
}
@keyframes bannerBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@keyframes shine {
    0% { transform: translateX(-180%) skewX(-18deg); }
    55%, 100% { transform: translateX(520%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
    .wifi-graphic *[style*="animation"] {
        animation: none !important;
    }
}
.product-stories-subheading-mobile {
    display: none;
}
.story-feature-content {
    flex: 1;
    min-width: 0;
}
.story-feature-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
}
.story-feature-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}
.story-feature-icon svg {
    width: 14px;
    height: 14px;
}
/* Desktop shows the topic icon and label; phones swap to the play badge and "Tap
   to learn more" instead (see the max-width: 700px block below), since the arrow
   disc is hidden there and the whole card is tapped. */
.story-feature-icon-play,
.story-feature-eyebrow-label-mobile {
    display: none;
}
.story-feature-content h3 {
    font-size: 1.9em;
    line-height: 1.2em;
    margin: 0 0 16px;
    color: #4B5563;
    text-wrap: balance;
}
.story-feature-content p {
    font-size: 1.1em;
    line-height: 1.6em;
    color: #4B5563;
    margin: 0 0 28px;
    /* Desktop only in practice - the mobile text is short enough that this
       rarely binds there. Narrower than the column itself so the paragraph
       wraps well before reaching the card's right edge, leaving more visible
       margin there. */
    max-width: 420px;
}
/* Mobile-only text (see .story-feature-text-mobile in the mobile block below) -
   hidden here so desktop only ever shows the full section_text copy. */
.story-feature-text-mobile {
    display: none;
}
.story-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: none;
    border-radius: 30px;
    padding: 14px 28px;
    font-family: inherit;
    font-weight: 600;
    font-size: 1em;
    cursor: pointer;
    color: white;
    background: linear-gradient(90deg, #369AFE 0%, #00fff8 100%);
}
.story-feature-data .story-open-btn {
    background: linear-gradient(90deg, #2775F0 0%, #5AA6FF 100%);
}
.story-feature-reviews .story-open-btn {
    background: linear-gradient(90deg, #F2A310 0%, #FFC93C 100%);
}
.story-feature-email .story-open-btn {
    background: linear-gradient(90deg, #8B6FE8 0%, #B79CFF 100%);
}
/* Section boxes carry an outlined arrow disc instead of a labelled pill. The label
   lives on aria-label, and the gradient only arrives on hover. Placed after the three
   rules above so the transparent background wins at equal specificity. */
.story-feature .story-open-btn {
    position: relative;
    /* Was 52px - the circle itself, not the play icon inside it (unchanged
       below, still 22px). */
    width: 44px;
    height: 44px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: transparent;
    /* Without this the gradient's box is the padding box and the 2px border strip gets
       the tile repeated into it, which shows as a lighter sliver down each side of the
       filled disc on hover. */
    background-origin: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease,
        transform 0.25s ease;
}
/* Trial: a pulsing ring, desktop only (the disc itself is display: none on phones,
   see the mobile block below, so this never needs its own media query). The
   button's own look is untouched - the ring is a separate ::before expanding and
   fading outward in the same colour the disc's border/icon already uses. Also
   used by the "And what's more" tiles' round open button, same trick. */
.story-feature .story-open-btn::before,
.story-mini-tile .story-open-btn::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    opacity: 0;
    pointer-events: none;
    animation: story-open-btn-pulse 1.8s ease-out infinite;
    /* Both the card above and the button around this ring change on hover
       (backdrop-filter + transform on the card, background/transform on the
       button); without its own compositing layer the browser can repaint this
       pseudo-element along with them, which visibly restarted the infinite
       animation right as you hover.
       Deliberately no z-index here - adding one to force this above the
       button's hover fill instead pulled it into a stacking comparison it
       previously wasn't part of, and the ring stopped showing on hover instead
       of just restarting. auto (i.e. no z-index) is what actually worked at
       rest, so hover should not need a different one. */
    will-change: transform, opacity;
}
@keyframes story-open-btn-pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.6;
    }
    70%, 100% {
        transform: scale(1.4);
        opacity: 0;
    }
}
@media (max-width: 900px) {
    .story-feature .story-open-btn::before,
    .story-mini-tile .story-open-btn::before {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-feature .story-open-btn::before,
    .story-mini-tile .story-open-btn::before {
        animation: none;
    }
}
.story-feature .story-open-btn svg {
    width: 22px;
    height: 22px;
}
.story-feature-data .story-open-btn {
    color: #2775F0;
}
.story-feature-reviews .story-open-btn {
    color: #F2A310;
}
.story-feature-email .story-open-btn {
    color: #8B6FE8;
}
/* The pulsing ring (::before) reads currentColor from the button, and on hover
   the button's own color flips to white so the icon shows against the filled
   gradient disc - but the ring itself sits just outside the disc, over the
   card's plain background, so a white ring there went invisible right as you
   hover, reading as "the pulse stopped". Pinning the ring to each story's
   accent colour keeps it visible in both states. */
.story-feature-data .story-open-btn::before {
    color: #2775F0;
}
.story-feature-reviews .story-open-btn::before {
    color: #F2A310;
}
.story-feature-email .story-open-btn::before {
    color: #8B6FE8;
}
/* Hovering anywhere on the box fills the disc, not just hovering the 52px disc itself -
   the whole box is the click target, so the whole box is the hover target. */
.story-feature:hover .story-open-btn {
    transform: scale(1.1);
    border-color: transparent;
    color: #FFFFFF;
}
.story-feature-data:hover .story-open-btn {
    background: linear-gradient(90deg, #2775F0 0%, #5AA6FF 100%);
}
.story-feature-reviews:hover .story-open-btn {
    background: linear-gradient(90deg, #F2A310 0%, #FFC93C 100%);
}
.story-feature-email:hover .story-open-btn {
    background: linear-gradient(90deg, #8B6FE8 0%, #B79CFF 100%);
}
.story-open-btn svg {
    width: 20px;
    height: 8px;
    flex-shrink: 0;
}
.story-swipe-hint {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
    font-weight: 500;
    color: #8AA0BE;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* A very light breathing scale on the pill itself, separate from the ring
       pulse on the icon inside it - the two run independently. */
    animation: swipe-hint-gentle-scale 2.4s ease-in-out infinite;
}
@keyframes swipe-hint-gentle-scale {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.035);
    }
}
@media (prefers-reduced-motion: reduce) {
    .story-swipe-hint {
        animation: none;
    }
}
.story-swipe-hint svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
/* The play glyph sits in its own small circle rather than loose in the pill -
   same translucent-white-on-colour look as the hero rail tiles' play badge. */
.story-swipe-hint-icon {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.22);
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}
.story-swipe-hint-icon svg {
    width: 10px;
    height: 10px;
    margin-left: 1px;
    color: #FFFFFF;
}
/* Same expanding-ring pulse as the hero carousel thumbnails' play badges
   (.hero-story-tile-play::before), not the grow/shrink bounce this used to have. */
.story-swipe-hint-icon::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;
}
@media (prefers-reduced-motion: reduce) {
    .story-swipe-hint-icon::before {
        animation: none;
    }
}
.story-feature-dots {
    display: none;
}
.story-feature-data .story-feature-eyebrow {
    color: #2775F0;
}
.story-feature-data .story-feature-icon {
    background-color: #2775F0;
}
.story-feature-reviews .story-feature-eyebrow {
    color: #F2A310;
}
.story-feature-reviews .story-feature-icon {
    background-color: #F2A310;
}
.story-feature-email .story-feature-eyebrow {
    color: #8B6FE8;
}
.story-feature-email .story-feature-icon {
    background-color: #8B6FE8;
}
/* Mobile-only topic badge - hidden on desktop, where the eyebrow icon already
   does this job. See the max-width: 700px block for its actual size/position. */
.story-feature-icon-badge {
    display: none;
}
.story-feature-data .story-feature-icon-badge {
    color: #2775F0;
    background: linear-gradient(135deg, #E5EEFD 0%, #FFFFFF 100%);
}
.story-feature-reviews .story-feature-icon-badge {
    color: #F2A310;
    background: linear-gradient(135deg, #FDF4E5 0%, #FFFFFF 100%);
}
.story-feature-email .story-feature-icon-badge {
    color: #8B6FE8;
    background: linear-gradient(135deg, #F1ECFF 0%, #FFFFFF 100%);
}
.story-tiles-row {
    max-width: 1180px;
    /* Matches the other desktop section gaps down the page (120px). */
    margin: 120px auto 0;
    text-align: center;
}
.story-tiles-row h3 {
    font-size: var(--h2-size);
    margin: 0 0 10px;
    color: #4B5563;
}
.story-tiles-row > p {
    font-size: 1.05em;
    color: var(--secondary-text-color);
    margin: 0;
}
.story-tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    text-align: left;
    /* Lives here rather than on .story-tiles-row > p so the grid keeps its
       clearance from the headline above even when tiles_subheadline is empty
       and the <p> isn't rendered at all. */
    margin-top: 80px;
}
.story-mini-tile {
    position: relative;
    border-radius: 20px;
    padding: 62px 32px 88px;
    background: #FFFFFF;
    box-shadow: 0 10px 20px -16px rgba(20, 40, 80, 0.25);
    border: 1.5px solid transparent;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    /* Isolates the hover transform onto its own layer so starting it never
       repaints the open button's pulsing ring several levels down - see the
       matching comment on .story-feature. */
    will-change: transform;
}
.story-mini-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 28px -16px rgba(20, 40, 80, 0.3);
}
.story-mini-icon-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid currentColor;
    box-shadow: 0 6px 14px -8px rgba(20, 40, 80, 0.25);
}
.story-mini-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.story-mini-icon svg {
    width: 42px;
    height: 42px;
}
.story-mini-tile h4 {
    font-size: 1.25em;
    margin: 0 0 10px;
    color: #4B5563;
}
.story-mini-tile p {
    font-size: 0.98em;
    line-height: 1.55em;
    color: #4B5563;
    margin: 0;
}
.story-mini-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}
.story-mini-text {
    display: flex;
    flex-direction: column;
}
.story-mini-media {
    width: 100%;
    /* The Ad Delivery screenshot's own ratio. At 16/9 the box was too shallow and
       cover cropped its bottom row, cutting the TikTok and X logos in half. The
       Customer Loyalty crop is made to the same ratio so all three tiles line up. */
    aspect-ratio: 731 / 503;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 16px -8px rgba(20, 40, 80, 0.3);
}
.story-mini-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}
/* Border added so this reads like an outlined disc at rest, the same as the
   "See how Social WiFi works" open button - it used to be invisible until
   hovered (no border, no background, just the bare icon), which is why it
   never looked like a "circle with a play icon" the way that one always does. */
.story-mini-tile .story-open-btn {
    position: absolute;
    right: 24px;
    bottom: 24px;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.story-mini-tile .story-open-btn svg {
    width: 19px;
    height: 19px;
}
.story-mini-tile .story-mini-btn-label {
    display: none;
}
/* Only phones swap the Learn more pill for a tap hint. The generic .story-swipe-hint
   rule switches it on below 700px for the section boxes, so this two-class selector
   holds it back on tablets by specificity rather than by source order. */
.story-mini-tile .story-swipe-hint {
    display: none;
}
.story-mini-tile:hover .story-open-btn {
    box-shadow: none;
    color: white;
}
.story-mini-tile-loyalty {
    border-color: #EC7FB0;
    cursor: pointer;
}
.story-mini-tile-loyalty .story-mini-icon-wrap {
    background: linear-gradient(135deg, #FCE7F0 0%, #FFFFFF 100%);
    color: #EC7FB0;
}
.story-mini-tile-loyalty .story-open-btn {
    color: #EC7FB0;
}
.story-mini-tile-loyalty:hover .story-open-btn {
    background-color: #EC7FB0;
}
.story-mini-tile-ad_delivery {
    border-color: #369AFE;
    cursor: pointer;
}
.story-mini-tile-ad_delivery .story-mini-icon-wrap {
    background: linear-gradient(135deg, #E5F2FF 0%, #FFFFFF 100%);
    color: #369AFE;
}
.story-mini-tile-ad_delivery .story-open-btn {
    color: #369AFE;
}
.story-mini-tile-ad_delivery:hover .story-open-btn {
    background-color: #369AFE;
}
.story-mini-tile-complaints {
    border-color: #8B6FE8;
    cursor: pointer;
}
.story-mini-tile-complaints .story-mini-icon-wrap {
    background: linear-gradient(135deg, #F1ECFF 0%, #FFFFFF 100%);
    color: #8B6FE8;
}
.story-mini-tile-complaints .story-open-btn {
    color: #8B6FE8;
}
.story-mini-tile-complaints:hover .story-open-btn {
    background-color: #8B6FE8;
}
.story-mini-tile-whatsapp {
    border-color: #22C55E;
    cursor: pointer;
}
.story-mini-tile-whatsapp .story-mini-icon-wrap {
    background: linear-gradient(135deg, #DCFCE7 0%, #FFFFFF 100%);
    color: #22C55E;
}
.story-mini-tile-whatsapp .story-open-btn {
    color: #22C55E;
}
.story-mini-tile-whatsapp:hover .story-open-btn {
    background-color: #22C55E;
}
/* Same fix as .story-feature-data/-reviews/-email .story-open-btn::before:
   the pulsing ring reads currentColor, and .story-mini-tile:hover .story-open-btn
   turns that white so the icon shows against the filled disc - but the ring
   itself sits just outside the disc, over the card's plain background, so a
   white ring there went invisible right on hover. Pinning the ring to each
   tile's own accent colour keeps it visible in both states, desktop only
   (this button does not exist on phones - see .story-mini-tile .story-open-btn
   display: none below). */
.story-mini-tile-loyalty .story-open-btn::before {
    color: #EC7FB0;
}
.story-mini-tile-ad_delivery .story-open-btn::before {
    color: #369AFE;
}
.story-mini-tile-complaints .story-open-btn::before {
    color: #8B6FE8;
}
.story-mini-tile-whatsapp .story-open-btn::before {
    color: #22C55E;
}
@media (max-width: 900px) {
    .story-tiles-grid {
        grid-template-columns: 1fr;
        gap: 70px;
        /* Was 80px, cut ~30% to 56px earlier, now +10px again per request.
           Lives here (not on .story-tiles-row > p) so the grid keeps its
           clearance from the headline even when tiles_subheadline is empty
           and the <p> isn't rendered at all. */
        margin-top: 66px;
    }
    .story-tiles-row {
        padding: 0 20px;
        margin-top: 60px;
    }
    .story-mini-tile {
        padding: 56px 26px 34px;
    }
    .story-mini-tile .story-open-btn {
        position: static;
        margin-top: 32px;
        width: auto;
        height: auto;
        padding: 12px 26px;
        border-radius: 25px;
        background-color: currentColor;
        gap: 8px;
        align-self: center;
    }
    .story-mini-tile .story-open-btn svg {
        display: none;
    }
    .story-mini-tile .story-mini-btn-label {
        display: inline;
        color: white;
        font-weight: 600;
        font-size: 0.95em;
    }
    .story-mini-tile:hover .story-open-btn,
    .story-mini-tile-loyalty:hover .story-open-btn,
    .story-mini-tile-ad_delivery:hover .story-open-btn,
    .story-mini-tile-complaints:hover .story-open-btn,
    .story-mini-tile-whatsapp:hover .story-open-btn {
        background-color: currentColor;
    }
}
@media (max-width: 600px) {
    /* Halved (60px -> 30px), then ~30% off again (30px -> 21px) - one of four
       contributors to the "and what's more" -> AI box gap, alongside
       .c-product_stories/.gray-blank/.c-ai_promo. */
    .story-tiles-row {
        margin-bottom: 21px;
    }
    /* Matches the WhatsApp promo headline's mobile size (2em), the shared
       mobile heading size across the homepage's section headlines. */
    .story-tiles-row h3 {
        font-size: 2em;
    }
    /* Phones tap the whole tile, so the Learn more pill goes and the same hint the
       "See how Social WiFi works" boxes use takes its place. */
    .story-mini-tile .story-open-btn {
        display: none;
    }
    /* A pill in the tile's own accent colour, not plain grey text - the tile already
       carries that colour on its icon ring and border, so the pill reads as
       belonging to this specific tile. The play icon sits in its own small circle
       (translucent white, same look as the hero rail tiles' play badge) so it reads
       against the solid pill instead of blending into it. */
    .story-mini-tile .story-swipe-hint {
        display: inline-flex;
        align-self: center;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 28px;
        padding: 10px 24px 10px 10px;
        border-radius: 25px;
        color: #FFFFFF;
        font-weight: 600;
        font-size: 0.95em;
        text-transform: none;
        letter-spacing: normal;
    }
    .story-mini-tile-loyalty .story-swipe-hint {
        background-color: #EC7FB0;
    }
    .story-mini-tile-ad_delivery .story-swipe-hint {
        background-color: #369AFE;
    }
    .story-mini-tile-complaints .story-swipe-hint {
        background-color: #8B6FE8;
    }
    .story-mini-tile-whatsapp .story-swipe-hint {
        background-color: #22C55E;
    }
}

/* Story viewer */
html.story-scroll-lock,
html.story-scroll-lock body {
    overflow: hidden;
}
.story-viewer {
    position: fixed;
    inset: 0;
    overscroll-behavior: contain;
    z-index: 999999999;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.25s, opacity 0.25s ease;
}
.story-viewer.open {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.25s ease;
}
.story-viewer-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(10, 12, 20, 0.85);
}
.story-viewer-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    /* Horizontal swipes are handled in JS (advance/rewind); vertical panning stays
       native so a slide's own overflow-y: auto can still be scrolled. Without this
       iOS also tries to read a left-edge swipe as its own back-navigation gesture. */
    touch-action: pan-y;
}
.story-viewer-card {
    position: relative;
    flex-shrink: 0;
    width: min(420px, 100%);
}
.story-viewer-dialog {
    position: relative;
    width: min(420px, 100%);
    height: min(90vh, 780px);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
    flex-shrink: 0;
}
.story-progress {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    /* Comfortably above any .story-group's own z-index (ranked by distance from
       the active one in scripts.js render(), currently up to the group count) -
       otherwise the active group's artwork paints over this chrome instead of
       under it, and the bar, close button and tap zones all read as "missing"
       even though they are still there and still working via a direct click. */
    z-index: 100;
    display: flex;
    gap: 6px;
}
.story-progress-segment {
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.35);
    overflow: hidden;
}
.story-progress-segment .story-progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    background-color: white;
    border-radius: 3px;
}
.story-progress-segment.done .story-progress-fill {
    width: 100%;
    animation: none !important;
}
@keyframes story-progress-fill {
    from { width: 0%; }
    to { width: 100%; }
}
.story-close {
    position: absolute;
    /* Sits fully above the card's top-right corner rather than straddling it -
       matches the hero video modal's close button placement. */
    top: -44px;
    right: -8px;
    z-index: 100;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background-color: rgba(0, 0, 0, 0.55);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.story-close svg {
    width: 16px;
    height: 16px;
}
/* Each .story-group positions itself with its own transform (see scripts.js)
   instead of this being a flex row nudged by one shared transform - a single
   shared value tied to DOM order runs out of room after enough hero-rail
   crossings in the same direction (there are only 6 groups total, so the
   flex-index approach cannot represent "one slot further left than the very
   first one"). Per-group transforms use a plain, unbounded running offset
   instead, so there is no such ceiling/floor. */
.story-groups {
    position: relative;
    width: 100%;
    height: 100%;
}
.story-group {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.35s ease;
}
.story-group-slides {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.35s ease;
}
.story-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
}
.story-slide-inner {
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 64px 30px 30px;
}
.story-theme-dark {
    background: linear-gradient(165deg, #0F2038 0%, #1B3A63 55%, #17335A 100%);
    color: white;
}
.story-theme-light {
    background: linear-gradient(180deg, #E9F1FF 0%, #FFFFFF 100%);
    color: #191C1F;
}
.story-image-slide {
    padding: 0;
    position: relative;
}
.story-image-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.story-simple-slide {
    color: white;
    gap: 0;
}
.story-slide-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
}
.story-slide-brand-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.story-slide-brand-text {
    font-size: 0.95em;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.story-slide-brand-text b {
    font-weight: 800;
}
.story-slide-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 18px;
}
.story-slide-heading-script {
    font-size: 2.6em;
    font-weight: 700;
    line-height: 1em;
    color: white;
}
.story-slide-heading-bold {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 2em;
    font-weight: 800;
    line-height: 1.15em;
    color: #5AA6FF;
    margin-top: 6px;
}
.story-simple-slide p.story-slide-subtext {
    font-size: 1.05em;
    line-height: 1.5em;
    margin: 0 0 24px;
    opacity: 0.92;
    max-width: 280px;
}
.story-slide-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    background: none;
    color: white;
    font-weight: 700;
    padding: 0;
    border-radius: 0;
    text-decoration: none;
    flex-shrink: 0;
    transition: gap 0.15s ease;
}
.story-slide-cta svg {
    width: 18px;
    height: 18px;
}
.story-slide-cta:hover {
    gap: 12px;
}
.story-theme-light .story-slide-cta {
    color: #191C1F;
}
.story-simple-slide h3 {
    font-size: 1.5em;
    margin: 0 0 18px;
}
/* Closes out a case study's reel, in that client's own accent (--story-accent,
   set per data-story-key above) rather than the plain light/dark themes the
   other simple slides use - it needs to read as belonging to the case study it
   just finished, not as a generic slide. */
.story-slide-cta-end {
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.14) 0%, rgba(0, 0, 0, 0.22) 100%),
        var(--story-accent, #369AFE);
    color: #FFFFFF;
}
.story-case-cta {
    justify-content: center;
    gap: 28px;
}
/* Placeholder for real client logos - not supplied yet, see story.cta_logo in
   the template. Sized to roughly the same visual weight as the name text below
   so swapping one for the other later does not need a size adjustment too.
   200px, not 220px: .story-case-cta-button (same text, "Read the whole story",
   on every card right now) renders at ~247px, and the logo should never read
   as wider than the button under it - 200px keeps a safety margin under that
   even if a shorter per-story logo file would technically fit the old cap.
   Qualified with .story-case-cta (not just .story-case-cta-logo alone) because
   .dynamic img's own max-width: 100% is a class+element selector - one
   specificity tier above a single class - and was winning over this cap
   outright, letting wide logos (Malecón's especially) render past it. */
.story-case-cta .story-case-cta-logo {
    max-width: 200px;
    max-height: 120px;
    width: auto;
    height: auto;
}
.story-case-cta-name {
    font-size: 2em;
    font-weight: 800;
    line-height: 1.2em;
    max-width: 280px;
}
.story-case-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 30px;
    background: #FFFFFF;
    color: var(--story-accent, #369AFE);
    font-weight: 700;
    font-size: 1em;
    text-decoration: none;
    transition: transform 0.15s ease;
}
.story-case-cta-button:hover {
    transform: translateY(-2px);
}
.story-case-cta-button svg {
    width: 18px;
    height: 18px;
}
/* Closes out a product story's reel (data/reviews/email/loyalty/complaints/
   ad_delivery) - a grid of every other product story to jump straight into,
   so a reel that runs out has somewhere useful to land instead of just closing.
   Light mode, same soft blue gradient .story-theme-light uses elsewhere on the
   site, rather than a bespoke dark card. */
.story-slide-other-stories {
    background: linear-gradient(180deg, #E9F1FF 0%, #FFFFFF 100%);
    /* Muted, not pure black - matches the rest of the homepage's heading/body
       text colour rather than reading darker than everything else on the page. */
    color: #4B5563;
}
/* .story-other-stories is .story-slide-inner itself (combined classes in the
   template), already a flex column via the base .story-slide-inner rule.
   Forcing height (not just the base min-height) is what lets the grid below
   flex-grow into exactly the space heading/standfirst/Close don't use, so
   the whole slide always fits without ever needing its own scrollbar. */
.story-other-stories {
    height: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: 0;
}
.story-other-stories-heading {
    flex: 0 0 auto;
    font-size: 1.5em;
    margin: 0 0 4px;
}
.story-other-stories-subtext {
    flex: 0 0 auto;
    font-size: 0.95em;
    color: #6B7280;
    margin: 0 0 18px;
}
/* Six equal tiles, 3-then-3 in a 2-column grid - no featured/stretched tile,
   every story gets the same weight. Same photo-tile treatment the hero
   rail's story tiles use (hero-story-tile in
   hero_section.eleventy.liquid/core.css): cover photo, per-story colour
   scrim, small pulsing play badge top-right, icon + label bottom-left.
   flex: 1 on the grid fills whatever vertical space heading/standfirst
   don't take, and grid-template-rows in fr units divides that space up -
   together that's what keeps this fitting inside the card on any screen
   height instead of overflowing into a scrollbar. display: contents on the
   two row wrappers (built in the template as 3-then-3 items, always 6
   "other" stories now that there are 7 in total) lifts their buttons
   directly into this grid. */
.story-other-stories-grid {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    /* Was 8px, then 14px. */
    gap: 20px;
}
.story-other-stories-row {
    display: contents;
}
.story-other-stories-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    /* Bottom and left doubled (8px -> 16px, 10px -> 20px) to give the label
       more room below and to its left specifically - top/right unchanged. */
    padding: 8px 10px 16px 20px;
    box-sizing: border-box;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 10px 20px -14px rgba(20, 40, 80, 0.35);
}
/* Desktop-only hover: a slight scale-up plus a "Click to Learn More" overlay,
   the same treatment the hero rail's own story tiles use
   (.hero-story-tile/-hover-hint in hero_section.eleventy.liquid). Phones get
   no real hover state and tapping already opens the story, so this is gated
   the same way the story-viewer card itself switches to its mobile layout
   (max-width: 500px). */
.story-other-stories-hover-hint {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 12px;
    /* Was 0.9em. */
    font-size: 1.2em;
    font-weight: 400;
    color: #FFFFFF;
    background: rgba(10, 20, 35, 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: inherit;
}
@media (min-width: 501px) {
    .story-other-stories-item {
        transition: transform 0.25s ease;
    }
    .story-other-stories-item:hover {
        transform: scale(1.04);
        z-index: 2;
    }
    .story-other-stories-item:hover .story-other-stories-hover-hint {
        display: flex;
    }
    /* Blur moved here from the shot's resting state - scaled up slightly so
       the blur's own softening never reveals a hairline of the tile's
       background at the rounded corners/edges. */
    .story-other-stories-item:hover .story-other-stories-shot {
        filter: blur(1.5px);
        transform: scale(1.05);
    }
}
.story-other-stories-shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: inherit;
    display: block;
    /* Sharp at rest now - blur only shows on hover (desktop, see the
       min-width:501px block below). Transition lives here so it animates
       in both directions. */
    transition: filter 0.25s ease, transform 0.25s ease;
}
/* object-fit: cover's default centred crop was cutting the two women off at
   the frame's left edge in this specific photo - shifting the visible
   window right keeps them both in frame. */
.story-other-stories-item-ad_delivery .story-other-stories-shot {
    object-position: 75% center;
}
/* Scrim in the tile's own hue, same values as .hero-story-rail-track's
   tiles - keeping the two consistent is what makes this read as "the same
   story tile" whether it is met in the hero rail or here. */
.story-other-stories-item::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* Same single gradient (and same top opacity) as .hero-story-tile::after,
       so these tiles read with the same brightness/colour strength as the
       hero carousel instead of looking darker. */
    background: linear-gradient(180deg, rgba(10, 20, 35, 0.15) 0%,
        var(--tile-scrim-mid) 48%, var(--tile-scrim-end) 100%);
    pointer-events: none;
}
.story-other-stories-item-data {
    --tile-scrim-mid: rgba(20, 124, 93, 0.45);
    --tile-scrim-end: rgba(20, 124, 93, 0.92);
}
.story-other-stories-item-reviews {
    --tile-scrim-mid: rgba(172, 100, 11, 0.45);
    --tile-scrim-end: rgba(172, 100, 11, 0.92);
}
.story-other-stories-item-email {
    --tile-scrim-mid: rgba(0, 112, 223, 0.45);
    --tile-scrim-end: rgba(0, 112, 223, 0.92);
}
.story-other-stories-item-loyalty {
    --tile-scrim-mid: rgba(217, 26, 111, 0.45);
    --tile-scrim-end: rgba(217, 26, 111, 0.92);
}
.story-other-stories-item-complaints {
    --tile-scrim-mid: rgba(104, 85, 197, 0.45);
    --tile-scrim-end: rgba(104, 85, 197, 0.92);
}
.story-other-stories-item-ad_delivery {
    --tile-scrim-mid: rgba(14, 134, 184, 0.45);
    --tile-scrim-end: rgba(14, 134, 184, 0.92);
}
/* Same green as .hero-story-tile-whatsapp's own gradient. */
.story-other-stories-item-whatsapp {
    --tile-scrim-mid: rgba(19, 149, 76, 0.45);
    --tile-scrim-end: rgba(19, 149, 76, 0.92);
}
.story-other-stories-icon,
.story-other-stories-label {
    position: relative;
    z-index: 1;
}
.story-other-stories-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.story-other-stories-icon svg {
    /* 2x the original 22px per request. */
    width: 44px;
    height: 44px;
    color: #FFFFFF;
}
/* Each glyph carries a different amount of built-in padding inside its own
   960-wide viewBox (measured via getBBox: database 140, star 128.85, the
   rest 96.9-100), so at a shared 44px render size their ink starts anywhere
   from 4.4px to 6.4px in from the icon box's own left edge - visibly not
   flush with the label below, which has no such padding. Pulling each one
   left by exactly its own measured inset (scaled to 44px) lines the ink up
   with the label's left edge instead of the icon box's. */
.story-other-stories-item-data .story-other-stories-icon svg {
    margin-left: -6.4px;
}
.story-other-stories-item-reviews .story-other-stories-icon svg {
    margin-left: -5.9px;
}
.story-other-stories-item-email .story-other-stories-icon svg,
.story-other-stories-item-loyalty .story-other-stories-icon svg,
.story-other-stories-item-complaints .story-other-stories-icon svg {
    margin-left: -4.6px;
}
.story-other-stories-item-ad_delivery .story-other-stories-icon svg {
    margin-left: -4.4px;
}
/* Same fix as .hero-story-tile-icon-whatsapp svg: the WhatsApp glyph fills
   more of its own viewBox than the Material-style icons fill theirs (its
   own bbox touches all four edges, per getBBox), so at the shared 44px size
   it read visibly bigger/bolder than the rest. Scaled down by the same
   ratio the hero rail already uses for it (38/46). No left-margin
   correction needed here - unlike the others, its ink already starts flush
   at x=0. */
.story-other-stories-item-whatsapp .story-other-stories-icon svg {
    width: 36px;
    height: 36px;
}
.story-other-stories-label {
    /* Matches the hero rail tiles' own play-badge-to-label gap
       (.hero-story-rail-track .hero-story-tile's 10px flex gap) - was
       noticeably tighter here. */
    margin-top: 10px;
    /* max-width: none let English labels ("Email Marketing") sit comfortably
       at this font-size, but PL/ES translations run longer ("Gestión de
       reclamaciones", "Marketing WhatsApp") and, with nothing to wrap
       against, grew past the tile's own edge - visible since the tile
       clips with overflow: hidden rather than showing the overflow.
       Constraining back to the tile's available width is what lets
       overflow-wrap actually break the longer translations onto more
       lines instead. */
    max-width: 100%;
    overflow-wrap: break-word;
    text-align: left;
    color: #FFFFFF;
    /* 1.84em/700 (the 2x pass) -> 1.2em/600 (-35%, a step lighter) -> +20%
       from there per this follow-up: 1.2 * 1.2 = 1.44em. Weight stays 600. */
    font-size: 1.44em;
    font-weight: 600;
    line-height: 1.2em;
}
/* 1.44em was sized for desktop's roomier tiles - on a phone's narrower 2-up
   grid a two-line label like "Complaint Management" ran past the tile's own
   edge. Dialled back for phones specifically rather than lowering the
   desktop size this follow-up feedback just asked to raise. */
@media (max-width: 500px) {
    .story-other-stories-label {
        /* max-width: none (the base rule) leaves this span free to grow as
           wide as "Management" wants regardless of font-size, which is what
           let it overflow the tile at any size - constraining it back to
           the tile's own available width is what actually lets
           overflow-wrap do anything. */
        max-width: 100%;
        font-size: 1em;
        overflow-wrap: break-word;
    }
}
/* Same simplification as the hero rail's tiles (.hero-story-tile-play in
   hero_section.eleventy.liquid): one glyph per tile reads clearer than a
   topic icon plus a separate play badge, so the topic icon is hidden and
   the play badge - relative instead of pinned absolute to the corner -
   moves into its spot in the normal flex flow instead, enlarged to carry
   that role alone. Was already done for the phone breakpoint below; this
   is the desktop match. */
.story-other-stories-icon {
    display: none;
}
.story-other-stories-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;
}
.story-other-stories-play svg {
    width: 20px;
    height: 20px;
    color: #FFFFFF;
    margin-left: 1px;
}
.story-other-stories-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: story-other-stories-play-pulse 1.8s ease-out infinite;
}
/* Same keyframe as .hero-story-tile-play::before, defined again here rather
   than reused: the hero rail's copy (hero-tile-play-pulse) lives nested
   inside that component's own @media (min-width: 601px) block, so it does
   not exist at all below 601px - referencing it directly would pulse on
   desktop and silently do nothing on phones, exactly where this grid is
   most likely to be seen. */
@keyframes story-other-stories-play-pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.6;
    }
    70%, 100% {
        transform: scale(1.6);
        opacity: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .story-other-stories-play::before {
        animation: none;
    }
}
.story-slide-media {
    width: 78%;
    max-width: 230px;
    aspect-ratio: 3 / 4;
    border-radius: 18px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 20px 35px -15px rgba(0, 0, 0, 0.45);
    flex-shrink: 0;
    margin-bottom: 20px;
}
.story-slide-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.story-simple-slide p {
    font-size: 1em;
    line-height: 1.5em;
    margin: 0 0 20px;
    opacity: 0.95;
}
.story-tap-zone {
    display: none;
}
.story-nav {
    position: static;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.35);
    cursor: pointer;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}
.story-nav:hover {
    background-color: rgba(0, 0, 0, 0.55);
}
.story-nav-arrow {
    width: 20px;
    height: 20px;
    color: white;
    opacity: 0.9;
    margin: 0;
}
.story-nav-prev.is-disabled {
    visibility: hidden;
}
@media (max-width: 700px) {
    .story-viewer-stage {
        gap: 0;
    }
    .story-nav {
        display: none;
    }
    .story-tap-zone {
        display: block;
        position: absolute;
        top: 40px;
        bottom: 0;
        width: 50%;
        z-index: 100;
        /* Purely a visual marker - aria-hidden, and nothing in scripts.js ever
           listens on it. The actual prev/next-by-tap logic reads coordinates
           straight off .story-viewer-stage's own pointerup handler, so this
           never needed to receive pointer events itself. Leaving it hit-testable
           meant it sat on top of (and swallowed taps meant for) any real control
           that happens to land under its 30%-wide band - the "Watch another
           story?" grid's tiles reach into that band on narrower phones, where
           the same 30% covers more of each tile's clickable area, which is what
           made those tiles "not work" there specifically. */
        pointer-events: none;
    }
    .story-tap-zone-prev {
        left: 0;
    }
    .story-tap-zone-next {
        right: 0;
    }
}

@media (max-width: 900px) {
    .story-sections {
        padding: 0 20px;
    }
    .story-feature, .story-feature-reverse {
        padding: 28px;
    }
    .story-feature-track, .story-feature-reverse .story-feature-track {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }
    .story-feature-media > img,
    .story-feature-media svg.wifi-graphic {
        max-height: 300px;
    }
    /* The track is a column from here down, so the copy sits directly under the
       graphic. A phone spilling out of its own box would land on that copy, so
       tablets get the whole device scaled to fit instead of a cropped one. */
    .story-feature-data {
        overflow: visible;
    }
    .story-feature-data .story-feature-media {
        /* The track is a column here, so the base flex: 1 1 0% makes flex-basis the
           height and the box collapses to 0 no matter what height says. The negative
           bottom margin has to go too: in a column it would drag the copy up onto the
           phone instead of extending the column towards the box edge. */
        flex: 0 0 auto;
        min-height: 0;
        height: 320px;
        margin-bottom: 0;
    }
    .story-feature-data .wifi-phone {
        --wifi-phone-scale: 0.455;
    }
    /* Same story for both mails: flex-basis would drive the height in a column, and
       their only child is absolutely positioned, so the box needs an explicit one. */
    .story-feature-reviews .story-feature-media,
    .story-feature-email .story-feature-media {
        flex: 0 0 auto;
        min-height: 0;
        height: 350px;
    }
    /* Photo band on top of everything the reviews mail carries, so it needs more room
       before the cut reaches the Book a table button. */
    .story-feature-email .story-feature-media {
        height: 380px;
    }
    /* Box padding drops to 28px here, so the overhang has to shrink with it or the mail
       runs past the border. And the column layout gives both boxes a full-width column,
       so the promo mail no longer needs the 23px width compensation. */
    .mail-mock-reviews {
        right: -26px;
    }
    .mail-mock-promo {
        left: -26px;
        right: 0;
    }
    .story-feature-content h3 {
        font-size: 1.5em;
    }
    /* Bottom halved (60px -> 30px), then ~30% off again (30px -> 21px), together
       with the other three contributors, to shrink the total gap between the
       last "And what's more" tile and the AI box that follows it. */
    .c-product_stories {
        padding: 50px 0 21px;
    }
    .c-product_stories h2 {
        /* Higher specificity than .product-stories-heading (element+class vs.
           class alone), so its font-size has to be set here to actually win -
           matches the WhatsApp promo headline's mobile size (2em). */
        font-size: 2em;
        padding: 0 20px;
    }
    .c-product_stories .see-how-wrap > p {
        padding: 0 20px;
    }
}
/* .product-stories-heading/.product-stories-subheading carry their own complete
   mobile restyle (font-size, margin, colour) below 600px, matching the WhatsApp
   section's mobile heading style, rather than just inheriting the plainer
   .c-product_stories h2 / .see-how-wrap > p padding-only rules above. */
@media (max-width: 600px) {
    .product-stories-heading {
        display: block;
        text-align: center;
        /* Actual font-size lives on .c-product_stories h2 above - it beats
           this class-only selector on specificity, so setting it here alone
           would be silently overridden. */
        line-height: 1.2em;
        margin: 0 0 16px;
        padding: 0 24px;
        color: #4B5563;
    }
    .product-stories-heading span {
        background: transparent linear-gradient(90deg, #369AFE 0%, #00fff8 100%) 0 0 no-repeat padding-box;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        white-space: nowrap;
    }
    .product-stories-subheading-desktop {
        display: none;
    }
    .product-stories-subheading-mobile {
        display: inline;
    }
    .product-stories-subheading {
        text-align: center;
        font-size: 1.1em;
        line-height: 1.5em;
        margin: 0 0 28px;
        padding: 0 24px;
        color: var(--secondary-text-color);
    }
}
@media (max-width: 700px) {
    .story-sections {
        padding: 0;
        /* Was 36px (the desktop side-by-side gap) - too tight once .story-feature-icon-badge
           straddles each card's top edge (half its 84px height, 42px, sits above the
           card), so the badge was clipping into the card above it. Bumped again,
           slightly, on top of that fix. */
        gap: 72px;
    }
    /* One gradient behind the whole section - heading, standfirst and all three cards.
       .see-how-wrap is a real element in product_stories.eleventy.liquid (not built
       at runtime), so this is the same wrapper at every viewport - only its
       background/full-bleed treatment is mobile-only. Full-bleed because the parent
       is width-constrained. */
    .see-how-wrap {
        background: linear-gradient(180deg, #F1F7FF 0%, #FFFFFF 100%);
        width: 100vw;
        max-width: none;
        margin-left: calc(50% - 50vw);
        /* Top halved (34px -> 17px), then cut further to 8px - the gap above this
           headline specifically. */
        padding: 8px 0 40px;
        box-sizing: border-box;
    }
    .see-how-wrap > h2,
    .see-how-wrap > p {
        padding-left: 24px;
        padding-right: 24px;
    }
    /* A bit more air above the first card specifically - was the shared 45px.
       Matching the base rule's specificity (.c-product_stories .see-how-wrap > p)
       since a single-class version here would lose to it, not override it. */
    .c-product_stories .see-how-wrap > p {
        margin-bottom: 65px;
    }
    .story-feature, .story-feature-reverse {
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        background: none;
    }
    .story-feature::before {
        display: none;
    }
    .story-feature:hover {
        transform: none;
        box-shadow: none;
    }
    /* One fixed card per section - no swiping. Tapping it opens the story overlay,
       which is where the slides live now. */
    .story-feature-track, .story-feature-reverse .story-feature-track {
        flex-direction: row;
        justify-content: center;
        gap: 0;
        padding: 0 20px;
        /* The base rule sets width: 100% and the box is content-box, so the 20px of
           padding pushed the track to 452px inside a 412px screen. Centring then
           measured from that shifted axis and the card sat 59px from the left edge but
           19px from the right. */
        box-sizing: border-box;
    }
    .story-feature-panel {
        /* Was a fixed 335px cap, narrower than the "And what's more" tiles next
           to it (.story-mini-tile, full grid width inside the same 20px-padded
           row) - matching that instead of a fixed width keeps both sections the
           same width on every phone. */
        flex: 0 1 100%;
        width: auto;
        height: auto;
        min-height: 520px;
        box-sizing: border-box;
        position: relative;
        /* Matches .story-mini-tile's corner radius ("And what's more" tiles) -
           was 24px, a mismatch next to that section's 20px. */
        border-radius: 20px;
        box-shadow: 0 14px 26px -20px rgba(20, 40, 80, 0.28);
        /* Real border, not the padding+mask ring trick further down - that
           technique renders unevenly on some phones (thicker on curves than
           on straight edges) because it depends on two overlaid, separately
           anti-aliased mask layers. A plain border is always pixel-even, and
           now that the ring is one flat colour (not the old two-stop
           gradient) there is no longer any reason to keep the trick just for
           this box - .story-mini-tile ("And what's more") already gets its
           own even outline this same simple way. 1.5px matches it exactly. */
        border: 1.5px solid transparent;
    }
    .story-feature-panel::before {
        display: none;
    }
    .story-feature-panel-summary {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
        /* Top padding grew from 32px to clear the topic icon badge, which
           straddles the card's own top edge - see .story-feature-icon-badge
           below. Matches the clearance .story-mini-tile gives its own
           top-straddling icon badge. */
        padding: 56px 24px 24px;
    }
    .story-feature-panel-summary .story-feature-content {
        display: contents;
    }
    /* The label ("Data Gathering" etc) and its icon are gone on phones - the
       standalone .story-feature-icon-badge below takes over showing the icon. */
    .story-feature-panel-summary .story-feature-eyebrow {
        display: none;
    }
    .story-feature-icon-topic {
        display: none;
    }
    .story-feature-icon-play {
        display: flex;
    }
    .story-feature-eyebrow-label-desktop {
        display: none;
    }
    .story-feature-eyebrow-label-mobile {
        display: inline;
    }
    /* Straddles the card's own top edge, same technique .story-mini-icon-wrap
       uses on the "And what's more" tiles - not embedded in the box as a flow
       item, so it does not need an order value here. */
    .story-feature-icon-badge {
        display: flex;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 84px;
        height: 84px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        border: 1.5px solid currentColor;
        background: #FFFFFF;
        box-shadow: 0 6px 14px -8px rgba(20, 40, 80, 0.25);
    }
    .story-feature-icon-badge svg {
        width: 42px;
        height: 42px;
    }
    /* The star outline has a lot of concave, unfilled area compared to the other
       glyphs' solid shapes, so at the same box size it reads visually smaller -
       sized up to match their apparent weight. */
    .story-feature-reviews .story-feature-icon-badge svg {
        width: 48px;
        height: 48px;
    }
    /* Headline, then the subheadline copy, then the tap-to-learn-more pill,
       then the graphic. */
    .story-feature-panel-summary .story-feature-content h3 {
        order: 1;
        font-size: 1.5em;
    }
    /* Restored - same size/weight as .story-mini-tile p ("And what's more"),
       so the two sections read as one family of cards. Its own short,
       two-line copy (story.section_text_mobile), not the fuller desktop
       sentence - .story-feature-text-desktop is the one carrying that, and
       stays hidden here. */
    .story-feature-panel-summary .story-feature-text-desktop {
        display: none;
    }
    .story-feature-panel-summary .story-feature-text-mobile {
        order: 2;
        display: block;
        font-size: 0.98em;
        line-height: 1.55em;
        color: #4B5563;
        /* ~30% tighter gap under the headline: 10px -> 7px. */
        margin: 7px 0 0;
        padding: 0 12px;
    }
    .story-feature-panel-summary .story-swipe-hint {
        order: 3;
        /* Bottom cut 20px -> 10px: less air between the "Tap to learn more" pill
           and the graphic below it. Cut again, ~30% further: 10px -> 7px. */
        margin: 17px 0 7px;
    }
    .story-feature-panel-summary .story-feature-media {
        order: 4;
        /* Pushes the graphic to the card's bottom edge regardless of how much
           content sits above it. */
        margin-top: auto;
        margin-bottom: 20px;
    }
    /* The negative bottom margin eats the card's own bottom padding, so the device
       runs into the card's bottom edge and is clipped there rather than stopping
       short of it. Height sets how much of the phone survives the cut - it has to
       clear the login icons, which are the point of the graphic. */
    .story-feature-data .story-feature-panel-summary .story-feature-media {
        order: 5;
        width: 100%;
        /* flex-shrink off, or the card's 520px min-height wins the argument and
           squeezes this box down until the login icons fall below the cut. */
        flex: 0 0 auto;
        /* Was 270px: the column (h3 + hint + this box) fell short of the card's
           520px min-height by ~12px, which the browser left as blank space below
           this box instead of stretching it - the phone stopped 12px short of the
           card's own bottom edge instead of reaching it. +12px closes that gap. */
        height: 286px;
        min-height: 0;
        /* Fixed, not auto: auto absorbs whatever space is left above the media,
           which varies with each media's own height (270/290/338px) and made the
           gap above the graphic visibly different card to card. 39px matches what
           the reviews card's gap already resolved to. The card's min-height (not a
           fixed height) lets it grow taller if this pushes past 520px, and -22px
           against the card's 24px padding still cuts the phone flush with the
           inside of the card's ring regardless, same as the desktop box. */
        margin: 39px 0 -22px;
        /* Scoped to this box specifically, not the whole .story-feature-panel -
           the panel also holds .story-feature-icon-badge, which deliberately
           straddles the panel's own top edge, and overflow: hidden on the panel
           was clipping that badge along with the phone graphic it was actually
           meant for. Matching bottom-corner radius stands in for the panel's own
           20px corner, which this box no longer relies on for its clip. */
        overflow: hidden;
        border-radius: 0 0 20px 20px;
    }
    /* Sized so the cut lands a clear gap below the login icons rather than right
       under them, without making the card any taller. */
    .story-feature-data .wifi-phone {
        --wifi-phone-scale: 0.56;
    }
    /* Both mails drop to the bottom of their card: contained left and right, so the
       overhang the desktop box cuts off is pulled back in, but reaching all the way
       down to the card's bottom edge. */
    .story-feature-reviews .story-feature-panel-summary .story-feature-media,
    .story-feature-email .story-feature-panel-summary .story-feature-media {
        order: 5;
        flex: 0 0 auto;
        width: 100%;
        height: 290px;
        min-height: 0;
        /* Fixed, not auto - see the matching comment on .story-feature-data above.
           39px is what this card's own gap already resolved to, kept as the
           reference value both other cards now match. */
        margin: 39px 0 -22px;
        /* Scoped to this box, not the whole card - see the matching comment on
           .story-feature-data above. Both cards used to rely on the desktop-era
           .story-feature-reviews/.story-feature-email { overflow: hidden } further
           up the file for this crop (now scoped to desktop only), which was also
           clipping .story-feature-icon-badge on mobile. */
        overflow: hidden;
        /* Flat only at the bottom: the mail mockup itself (.mail-mock-reviews/-promo
           below) is already flat along its own bottom edge (border-radius: 16px 16px
           0 0) to sit flush with the card's bottom edge - a rounded bottom on this
           clipping box masked that flat edge into a rounded corner that was never
           meant to be there. The top corners are rounded to match .mail-mock's own
           16px, purely so the box-shadow below (which follows this element's own
           radius, not its children's) reads as a soft rounded glow instead of a
           flat-cornered one poking a square nub out past the card's rounded corner -
           it does not change what gets clipped, since .mail-mock already clips
           itself to the same 16px there. */
        border-radius: 16px 16px 0 0;
        /* An element's own box-shadow is not clipped by its own overflow: hidden
           (that only clips descendants) - so this shows cleanly in the 39px gap
           above, lifting the whole graphic off the card's white background, unlike
           a shadow on a descendant (e.g. .mail-mock-card) which the overflow above
           would cut into square fragments. Sides/bottom have no margin to show it
           in (full width, flush with the card's own bottom edge by design), so it
           only ever reads at the top - which is the edge that actually needs it. */
        box-shadow: 0 0 14px 0 rgba(15, 35, 75, 0.18);
    }
    /* The promo mail carries a photo band on top of everything the reviews mail has,
       so it needs the extra room or the Book a table button falls below the cut. */
    .story-feature-email .story-feature-panel-summary .story-feature-media {
        height: 338px;
    }
    .mail-mock-reviews,
    .mail-mock-promo {
        left: 0;
        right: 0;
        /* Square along the card's bottom edge, rounded where it is still free. */
        border-radius: 16px 16px 0 0;
    }
    /* Shelved for now - .story-feature-media (this element's own parent) also has
       overflow:hidden on mobile, which clipped this shadow's corners into sharp
       square fragments same as putting it directly on .mail-mock did. Needs a
       shadow host further up the tree, outside every overflow:hidden ancestor,
       to render cleanly - left off rather than shipped broken. */
    .mail-mock-shadow {
        display: none;
    }
    /* Gradient runs the other way here: darkest under the sender strip, lightest where
       the mail meets the bottom of the card. Top stop pulled closer to the card's own
       accent (review-star gold / Book a table's violet) than the original F6EBD6/
       E7DFFB, which read as barely-there - still well short of the solid button/star
       colour itself, just enough to actually register as that colour. */
    .mail-mock-reviews {
        background: #F3D9A3;
    }
    /* Both the graphic's own outer glow and the inset shadow under the sender strip
       default to a cool navy (rgba(15, 35, 75, ...)), which reads as plain grey
       against this box's warm yellow/orange background. Warmed to the same brown
       .mail-mock-card already uses for this box's own message-card shadow, so all
       three shadows in here agree. */
    .story-feature-reviews .story-feature-panel-summary .story-feature-media {
        box-shadow: 0 0 14px 0 rgba(120, 84, 10, 0.18);
    }
    .mail-mock-reviews .mail-mock-body {
        box-shadow: inset 0 2px 4px -2px rgba(120, 84, 10, 0.16);
    }
    .mail-mock-promo {
        background: #D6C4F7;
    }
    .mail-mock-head {
        gap: 10px;
        padding: 12px 16px;
        /* Belt and suspenders: relying only on .mail-mock-reviews/-promo's own
           overflow: hidden to round this element's top corners leaves them at the
           mercy of that ancestor clipping perfectly in sync with this box on
           every pixel grid - matching the radius here too means this box clips
           its own corners regardless, so there is no dependency on that to be
           exact. No z-index/position here (that is what caused the corner-leak
           regression earlier) - just self-clipping. */
        overflow: hidden;
        border-radius: 16px 16px 0 0;
    }
    /* The 1px border-bottom on .mail-mock-head is too faint on its own here - the
       white strip otherwise reads as one continuous white area with the card
       content above it. An inset shadow on the tinted body below reads as the
       same "the white strip casts a shadow" effect, but avoids putting a real
       box-shadow on .mail-mock-head itself: that needed position+z-index to
       paint above .mail-mock-body (also position: relative, later in DOM order),
       and promoting .mail-mock-head to its own composited layer that way made
       Chrome mis-clip its rounded top corners against the parent's own
       overflow: hidden - a sliver of its square corner leaked out past the
       curve. An inset shadow never needs to escape its own box, so there is no
       layer promotion and no corner leak. */
    .mail-mock-body {
        box-shadow: inset 0 2px 4px -2px rgba(15, 35, 75, 0.12);
    }
    /* No room for the address in a 287px card - sender and recipient carry it. */
    .mail-mock-address {
        display: none;
    }
    /* Desktop only: there is no room for client chrome next to the sender in a 287px
       card. */
    .mail-mock-actions {
        display: none;
    }
    .story-feature-media .mail-mock .mail-mock-avatar {
        width: 34px;
        height: 34px;
    }
    .mail-mock-sender {
        font-size: 13px;
    }
    .mail-mock-address,
    .mail-mock-to {
        font-size: 11.5px;
    }
    .mail-mock-card {
        top: 16px;
        left: 16px;
        right: 16px;
        gap: 10px;
        padding: 14px 14px 0;
    }
    .mail-mock-promo .mail-mock-card {
        gap: 10px;
    }
    .story-feature-media .mail-mock .mail-mock-logo {
        height: 32px;
    }
    .mail-mock-title {
        font-size: 16px;
    }
    .review-star {
        width: 30px;
        height: 30px;
    }
    .review-stars {
        gap: 6px;
    }
    .review-platforms {
        gap: 22px;
    }
    .review-platform-badge {
        width: 36px;
        height: 36px;
        font-size: 19px;
    }
    .review-platform-badge svg {
        width: 24px;
        height: 24px;
    }
    .review-platform-label {
        font-size: 10.5px;
    }
    .story-feature-media .mail-mock .promo-shot {
        height: 84px;
    }
    /* The first line wraps to two in a card this narrow, so both lines come down a
       step to keep the code from crowding the band. */
    .promo-shot-line {
        font-size: 10.5px;
    }
    .promo-shot-code {
        font-size: 16px;
    }
    .promo-btn {
        padding: 10px 20px;
        font-size: 13.5px;
    }
    /* Each card is white at the top fading into a tint of its own accent, so it lifts
       off the section's blue-to-white gradient and its colour is unmistakable. The
       previous values were so close to white that Positive Reviews read as having no
       background at all. Hues follow desktop: blue, gold, violet. */
    /* Was #F2F7FE - strengthened a step per feedback, still well short of the
       "Tap to learn more" button's solid #2775F0. */
    .story-feature-data .story-feature-panel-summary {
        background: linear-gradient(180deg, #FFFFFF 0%, #DCE9FC 100%);
    }
    /* Reversed per feedback - white at the top now, each card's own accent
       rising from the bottom instead of sitting at the top fading to white,
       and strengthened a step closer to (but still short of) the star/button
       colour it echoes. */
    .story-feature-reviews .story-feature-panel-summary {
        background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 28%, #FEF8EE 100%);
    }
    .story-feature-email .story-feature-panel-summary {
        background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 28%, #F7F5FD 100%);
    }
    /* Same solid accent as the icon badge's own border (currentColor there
       resolves to these same hexes) so the box outline and the circle outline
       above it read as one colour. Now a real border-color (see
       .story-feature-panel above), not the old ::before ring. */
    .story-feature-data .story-feature-panel {
        border-color: #2775F0;
    }
    .story-feature-reviews .story-feature-panel {
        border-color: #F2A310;
    }
    .story-feature-email .story-feature-panel {
        border-color: #8B6FE8;
    }
    .story-feature-panel-summary .story-feature-media > img,
    .story-feature-panel-summary .story-feature-media svg.wifi-graphic {
        max-height: 260px;
    }
    .story-feature .story-open-btn {
        display: none;
    }
    /* Same pill-with-circled-play-icon the "And what's more" tiles use, just in
       each section's own accent instead of theirs - same button, matching colour.
       Sits between the headline and the graphic now that .story-feature-icon-badge
       has taken over the card's top edge - see .story-feature-panel-summary
       .story-swipe-hint above for its order/margin in that flow. */
    .story-feature .story-swipe-hint {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 10px 24px 10px 10px;
        border-radius: 25px;
        color: #FFFFFF;
        font-weight: 600;
        font-size: 0.95em;
        text-transform: none;
        letter-spacing: normal;
    }
    .story-feature-data .story-swipe-hint {
        background-color: #2775F0;
    }
    .story-feature-reviews .story-swipe-hint {
        background-color: #F2A310;
    }
    .story-feature-email .story-swipe-hint {
        background-color: #8B6FE8;
    }
    /* The section no longer swipes, so the dots have nothing to page through. */
    .story-feature-dots {
        display: none;
    }
}
@media (max-width: 500px) {
    /* Pinning the body is the only reliable way to stop a phone scrolling the page
       behind the open card. Scroll position is saved and restored in scripts.js. */
    html.story-scroll-lock body {
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
    }
    /* Clamp the overlay to the *dynamic* viewport, not the small one. svh pins to
       the guaranteed-smallest height (URL bar shown) always, even after the bar
       auto-hides and the real viewport grows - leaving a gap at the bottom where
       the backdrop stopped short and the page behind it (e.g. the WhatsApp
       section) showed through. dvh tracks whichever viewport is current, so the
       overlay always matches the real visible area, chrome shown or hidden. */
    .story-viewer {
        height: 100dvh;
        overflow: hidden;
    }
    .story-viewer-stage {
        display: block;
        height: 100dvh;
        padding: 0;
        gap: 0;
        overflow: hidden;
    }
    /* Card shape only. Equal insets on each axis, so the card is centred both ways
       by construction and can never be wider or taller than the viewport (no
       sideways / vertical scroll). The vertical inset is deliberately much larger
       than the horizontal one - it scales with the screen so short phones keep a
       usable card, and the panel absorbs the difference by shrinking its figure.
       The card is the anchor box - the dialog fills it and the close button sits
       inside it, so all three stay locked together on any screen size. */
    .story-viewer-card {
        position: absolute;
        inset: clamp(28px, 8dvh, 84px) 14px;
        width: auto;
        height: auto;
        max-width: calc(100svw - 28px);
        box-sizing: border-box;
    }
    .story-viewer-dialog {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        margin: 0;
        border-radius: 24px;
        overflow: hidden;
        box-sizing: border-box;
        background: linear-gradient(180deg, #0d2033 0%, #123456 55%, #17406b 100%);
    }
    /* Artwork stories only: the generic card above stretches to fill whatever gap
       the insets leave, which is the right shape for a product-story panel but
       left visible letterboxing beside the designer's own 1080x2160 cards once
       they stopped being cropped (object-fit: contain, see .story-case img). This
       sizes the card to the artwork's own ratio instead of a fixed inset box, so
       it scales with the screen and there is no gap either way, in the whichever
       axis is actually the tighter fit. Written as a single min() rather than
       plain aspect-ratio + max-width/max-height because those two together do not
       reliably renegotiate both dimensions at once on a position: absolute box -
       computing the tighter of the two budgets up front and deriving the other
       side from it (via margin: auto centering) sidesteps that.
       Tried switching this to a full-inset card + object-fit: cover instead (so an
       unusually tall/narrow viewport would never show a gap around the card) -
       reverted immediately: these cards carry the designer's own text baked into
       the artwork near its edges, and cover crops exactly that text on perfectly
       normal phone widths to fix a gap that only ever showed up on an extreme,
       unrealistic viewport. Letterboxing on that rare case is the lesser problem. */
    .story-viewer[data-story-artwork="true"] .story-viewer-card,
    .story-viewer[data-story-kind="case"] .story-viewer-card {
        inset: 0;
        margin: auto;
        width: min(calc(100svw - 28px), calc((100dvh - 2 * clamp(28px, 8dvh, 84px)) * 1080 / 2160));
        height: auto;
        max-width: none;
        aspect-ratio: 1080 / 2160;
    }

    .story-progress {
        left: 16px;
        right: 52px;
    }
    .story-close {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 100;
        width: 34px;
        height: 34px;
        background-color: rgba(0, 0, 0, 0.6);
    }
    .story-close svg {
        width: 17px;
        height: 17px;
    }
    /* Was 20px - tighter on phones so six tiles read as one dense grid instead
       of six separate floating cards. */
    .story-other-stories-grid {
        gap: 10px;
    }
    /* ~20% bigger again on phones specifically, same bump
       .hero-story-tile-play gets at its own phone breakpoint - the badge is
       the tile's only glyph now (see the desktop-wide rule above) and needs
       to read clearly as a tap target at that size. */
    .story-other-stories-play {
        width: 48px;
        height: 48px;
        border-width: 2.5px;
    }
    .story-other-stories-play svg {
        width: 23px;
        height: 23px;
    }
}

/* ---------- End service widget --------- */
/* ---------- Start industries showcase widget --------- */
.c-showcase_image {
    text-align: center;
    background: transparent linear-gradient(42deg, #F1F7FF 0%, #FFFFFF 100%) 0 0 no-repeat padding-box;
    padding: 20px;
}
.c-showcase_image .inner {
    max-width: var(--max-width);
    margin: 0 auto;
}
.c-showcase_image h2 {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: var(--h2-size);
}
/* The subheadline <p> otherwise keeps its default browser margin (about
   16-19px), stacking with .showcase-animation's own margin-top below it -
   zeroed here so that margin-top is the only thing controlling the gap.
   Font-size also otherwise fell back to the plain 16px body size - bumped
   to the same 1.1em every other standfirst on these pages uses (see
   .c-section_intro p, and the homepage's own .c-results_carousel > p /
   .see-how-wrap > p). */
.reseller-page .c-showcase_image p,
.white-label-page .c-showcase_image p {
    margin: 0;
    font-size: 1.1em;
}
/* Scoped to the actual showcase image's own <p><img></p> wrapper, not just
   ".c-showcase_image img" - that broader selector was also matching every
   img nested inside .showcase-animation's dashboard mockup (the favicon,
   the brand logo), pushing each of them down by an unwanted 50px margin
   and, since they're flex items with align-items: center, throwing off
   their vertical centering along with it (the favicon visibly floated
   above the address bar text instead of sitting level with it). */
.c-showcase_image .inner > p > img {
    display: inline-block;
    margin-bottom: 50px;
}
.c-showcase_image .showcase-animation {
    /* 40% smaller again (11px -> 6.6px). */
    margin-top: 6.6px;
    margin-bottom: 8px;
    /* .c-showcase_image itself sets text-align: center for its title and
       subheadline - inherited by everything inside the mockup too, which
       centered the venue tiles' name/city text (they're flex items in a
       column, so align-items: stretch already gives each span the tile's
       full width, and centered text within that full width read as
       centered rather than left-aligned like the rest of the design). */
    text-align: left;
    /* 30% smaller than the 1180px row of boxes above/below it, then 10%
       bigger again on top of that (826px * 1.1). */
    max-width: 909px;
    margin-left: auto;
    margin-right: auto;
}
/* Desktop 3-column tile grid vs. the dedicated narrower 2-column mobile
   layout (see graphic_dashboard_resellers_mobile.liquid /
   graphic_dashboard_white_label_mobile.liquid) - just scaling the
   desktop version down further read too cramped below this width. */
.dashboard-desktop-only {
    display: block;
}
.dashboard-mobile-only {
    display: none;
}
@media (max-width: 700px) {
    .dashboard-desktop-only {
        display: none;
    }
    .dashboard-mobile-only {
        display: block;
    }
}
/* Same 1180px width as the feature story boxes, the "Why Social WiFi?"
   tiles and the switch-checklist section, instead of the site-wide
   --max-width (1300px) the showcase image normally uses everywhere else -
   the dashboard animation reads as one more card in that same row of
   same-width sections. */
.reseller-page .c-showcase_image .inner,
.white-label-page .c-showcase_image .inner {
    max-width: 1180px;
}
/* Same 60px breathing room used everywhere else on this page between
   adjacent sections (.c-text_tiles_container, .c-switch_checklist) -
   needed now that this section can sit directly after a feature story
   box (white-label.html's order swap put it right after "Branding and
   Domain"), which otherwise left them flush with no gap at all. */
.reseller-page .c-showcase_image,
.white-label-page .c-showcase_image {
    margin-top: 60px;
}
/* Gradient-highlighted word(s) in the headline, same treatment as the
   hero titles and the section_intro heading above it. */
.reseller-page .c-showcase_image h2 span,
.white-label-page .c-showcase_image h2 span {
    background: transparent linear-gradient(90deg, #369AFE 0%, #00fff8 100%) 0 0 no-repeat padding-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Same dark full-bleed banner as the homepage's "Set up in minutes"
   section (.dynamic-home .gray .aside-light-gradient) - this section
   already spans edge to edge on its own (no page-wide max-width left to
   fight, see the .new-dynamic removal above), so just the colours need
   copying over, not the homepage's own vw/transform positioning. Went
   through a couple of lighter/skyblue-leaning variants first before
   landing back here. */
.reseller-page .c-showcase_image,
.white-label-page .c-showcase_image {
    background: linear-gradient(120deg, #193147 0%, #2C5578 60%, #3C6D95 100%);
    /* Halved from 64px - the section's own top/bottom padding, on top of
       the h2's margin-top and the animation's margin-bottom below, made
       for a taller gap than this dark banner needed. Bottom cut another
       30% on top of that (32px -> 22px). */
    padding: 32px 20px 22px;
}
.reseller-page .c-showcase_image h2,
.white-label-page .c-showcase_image h2 {
    color: #FFFFFF;
    /* Halved from the shared .c-showcase_image h2 rule's 40px. */
    margin-top: 20px;
    /* Matches the homepage's own headline-to-subheadline gap
       (.c-testimonials_carousel's h2, via the shared .c-results_carousel
       h2 rule - "What our Customers are saying"). */
    margin-bottom: 15px;
}
.reseller-page .c-showcase_image p,
.white-label-page .c-showcase_image p {
    color: #C9D9EC;
}
.c-dark {
    background-color: var(--text-color);
    padding: 20px;
    padding-bottom: 40px;
    padding-top: 40px;
}
.c-dark.c-dark-margin-small {
    margin-top: -70px;
    margin-bottom: -70px;
}
.c-dark .inner {
    max-width: var(--max-width);
    margin: 0 auto;
    color: white;
    padding-top: 10px;
}
.c-dark .inner.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 85px;
    grid-row-gap: 45px;
}
.c-dark .inner h2 {
    font-size: var(--h2-size);
    margin-bottom: 60px;
    margin-top: 10px;
}
.c-dark .styled-box {
    margin-top: 20px;
    margin-bottom: 40px;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: 50% 50%;
    border-radius: 40px;
    overflow: hidden;
}
.c-dark .styled-box.styled-box-red, .dynamic .c-image-hero .side-image.styled-box-red .inner-image {
    background: linear-gradient(180deg, #3D0101 10%, #EC2123 80%);
}
.c-dark .styled-box.styled-box-grey, .dynamic .c-image-hero .side-image.styled-box-grey .inner-image {
    background: linear-gradient(180deg, #141F1B 10%, #58706F 80%);
}
.c-dark .styled-box.styled-box-green, .dynamic .c-image-hero .side-image.styled-box-green .inner-image {
    background: linear-gradient(180deg, #0D3026 10%, #9BCEAE 80%);
}
.c-dark .styled-box.styled-box-blue, .dynamic .c-image-hero .side-image.styled-box-blue .inner-image {
    background: linear-gradient(180deg, #1A6DB4 10%, #C2DCFF 80%);
}
.c-dark .styled-box.styled-box-pink, .dynamic .c-image-hero .side-image.styled-box-pink .inner-image {
    background: linear-gradient(180deg, #43111F 10%, #DD8297 80%);
}
.c-dark .styled-box.styled-box-sand, .dynamic .c-image-hero .side-image.styled-box-sand .inner-image {
    background: linear-gradient(180deg, #867E68 10%, #EFE7D6 80%);
}
.c-dark .styled-box.styled-box-sw, .dynamic .c-image-hero .side-image.styled-box-sw .inner-image {
    background: linear-gradient(180deg, #369AFE 10%, #00FFF8 80%);
}
.c-dark .styled-box.styled-box-sw-radial, .dynamic .c-image-hero .side-image.styled-box-sw-radial .inner-image {
    background: linear-gradient(45deg, #369AFE 10%, #00FFF8 80%);
}
.c-dark .styled-box.styled-box-dark-blue, .dynamic .c-image-hero .side-image.styled-box-dark-blue .inner-image {
    background: linear-gradient(180deg, #001239 10%, #2A70FF 80%);
}
.c-dark .styled-box.styled-box-gold, .dynamic .c-image-hero .side-image.styled-box-gold .inner-image {
    background: linear-gradient(180deg, #83591C 10%, #FFC570 80%);
}
.c-dark .styled-box.styled-box-black, .dynamic .c-image-hero .side-image.styled-box-black .inner-image {
    background: transparent linear-gradient(0deg, #191C1F 0%, #191C1F00 100%) 0 0 no-repeat padding-box;
}
.c-dark .styled-box.styled-box-none, .dynamic .c-image-hero .side-image.styled-box-none .inner-image {
    background: none;
}
.c-dark .styled-box.styled-box-ai, .dynamic .c-image-hero .side-image.styled-box-ai .inner-image {
    background: transparent linear-gradient(242deg, #0268FE 0%, #FD7BB1 100%) 0 0 no-repeat padding-box;
}

.c-dark .styled-box .text {
    background-repeat: no-repeat;
    background-position: 90% 100%;
    padding: 60px 100px;
    padding-right: 600px;
    height: 100%;
    min-height: 525px;
}
.c-dark .styled-box .text h3 {
    font-size: var(--h3-size);
    margin-top: 15px;
}
.c-dark .styled-box .text p {
    font-size: 1.3em;
    margin-top: 30px;
    line-height: 1.6em;
}
.c-dark .styled-box .text p.bottom {
    margin-top: 200px;
}
.c-industries-reversed-box .styled-box .text {
    background-position: 10% 100%;
    padding-right: 110px;
    padding-left: 645px;
}
.box-link {
    color: white;
    border: 2px solid white;
    border-radius: 40px;
    padding: 10px 35px;
    font-size: 0.9em;
    margin-top: 40px;
    display: inline-block;
}
.box-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
}


@media (min-width: 1100px) {
    .c-industries-reversed-box .styled-box .text.text-image-left {
        background-position: 10% 50%;
    }
    .c-industries-reversed-box .styled-box .text.text-image-left-edge {
        background-position: 0 50%;
    }
    .c-industries-reversed-box .styled-box .text.text-image-center {
        background-position: 10% 50%;
    }
    .c-industries-reversed-box .styled-box .text.text-image-right {
        background-position: 10% 100%;
    }
    .c-dark .styled-box .text.text-image-right {
        background-position: 103% 50%;
    }
    .c-dark.c-dark-margin-top-small {
        margin-top: -70px;
    }
}
.c-dark .styled-box.side-box {
    padding: 60px 80px;
    margin-top: -30px;
    margin-bottom: -5px;
}
.c-dark .call {
    margin-top: 30px;
}
.c-dark .styled-box.styled-mini-box-brown {
    background: transparent linear-gradient(180deg, #C09C99 0%, #604E4D 100%) 0 0 no-repeat padding-box;
}
.c-dark .styled-box.styled-mini-box-blue {
    background: transparent linear-gradient(180deg, #456A85 0%, #233543 100%) 0 0 no-repeat padding-box;
}
.c-dark .styled-box.styled-mini-box-yellow {
    background: transparent linear-gradient(180deg, #E1A855 0%, #74572C 100%) 0 0 no-repeat padding-box;
}
.c-dark .styled-box.styled-mini-box-red {
    background: transparent linear-gradient(180deg, #D90014 0%, #670A18 100%) 0 0 no-repeat padding-box;
}
.c-dark .styled-box.styled-mini-box-dark {
    background: transparent linear-gradient(180deg, #3D4D4C 0%, #0D1110 100%) 0 0 no-repeat padding-box;
}
.c-dark .styled-box.styled-mini-box-dark-blue {
    background: transparent linear-gradient(180deg, #223D76 0%, #11203D 100%) 0 0 no-repeat padding-box;
}
.c-dark .styled-box.side-box h3 {
    font-size: var(--h3-size);
}
.c-dark .styled-box.side-box p {
    font-size: 1.3em;
    margin-top: 30px;
    line-height: 1.6em;
}
.c-dark .styled-box.side-box p.bottom {
    margin-top: 100px;
}
.c-dark .styled-box.side-box p.bottom img {
    width: 100%;
}
.new-dynamic {
    max-width: 1920px;
    margin: 0 auto;
}
.new-dynamic .aside-text {
    margin: 50px auto;
}
.new-dynamic .aside-text.aside-center {
    text-align: center;
    box-shadow: none;
}
.dynamic.new-dynamic .aside-text h2 {
    color: var(--text-color);
    font-size: var(--h2-size);
}
.dynamic.new-dynamic .aside-text h2 span {
    background: transparent linear-gradient(90deg, #369AFE 0%, #00fff8 100%) 0 0 no-repeat padding-box;
    background-clip: padding-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dynamic.new-dynamic .aside-text p {
    font-size: 1.3em;
    line-height: 1.6em;
    margin-top: 0;
}
.c-quote_box {
    background: transparent linear-gradient(70deg, #D6E2FF 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 18px;
    padding: 20px 40px;
    font-size: 0.8em;
    text-align: center;
    margin-bottom: 100px !important;
    max-width: 900px;
}
.gray.white-blog-post .c-quote_box {
    box-shadow: 0 3px 6px #e5e4e7 !important;
    border-radius: 35px !important;
    padding: 20px 40px !important;
    margin-top: 50px !important;
    margin-bottom: 50px !important;
    font-size: 0.9em !important;
}
.c-quote_box img {
    max-width: 100px !important;
    display: inline-block;
    margin-bottom: 20px;
}
.c-quote_box p:before {
    content: open-quote;
}
.c-quote_box p:after  {
    content: close-quote;
}
.c-quote_box .source {
    margin-top: 50px;
}
.c-quote_box .source p {
    margin: 0 !important;
}
.c-quote_box .source p:before, .c-quote_box .source p:after {
    content: '';
}

@media (max-width: 1500px) {
    .c-quote_box {
        max-width: none;
        margin-left: 20px !important;
        margin-right: 20px !important;
    }
}
@media (max-width: 1100px) {
    .c-dark .styled-box .text.text-image-center {
        background-position: 50% 90%;
    }
    .c-dark .inner h2 {
        font-size: 3em;
    }
    .c-dark .styled-box.side-box h3 {
        font-size: 2.5em;
    }
    .c-dark .styled-box .text h3 {
        margin-top: 0;
    }
    .c-dark .styled-box .text p.bottom {
        margin-top: 40px;
    }
    .c-dark .styled-box .text {
        padding-right: 40px;
        padding-left: 40px;
        padding-bottom: 380px;
        background-position: 50% 100%;
    }
    .c-industries-reversed-box .styled-box .text {
        padding-right: 40px;
        padding-left: 500px;
    }
    .c-dark .styled-box .text {
        min-height: unset !important;
        background-size: auto 370px;
    }
}

@media (max-width: 800px) {
    .box-link {
        margin-top: 10px;
    }
    .c-dark .inner.grid {
        grid-template-columns: 1fr;
    }
    .c-dark .styled-box .text {
        padding-right: 40px;
        padding-bottom: 200px;
        min-height: auto;
    }
    .c-industries-reversed-box .styled-box .text, .c-dark .styled-box .text {
        padding-left: 40px;
        padding-bottom: 430px;
        background-position: 50% 100%;
        background-size: auto 400px;
        text-align: left;
    }
    .c-industries-reversed-box.c-industries-reversed-box-left-edge .styled-box .text {
        padding-bottom: 40px;
    }
    .c-quote_box img {
        max-height: 100px;
    }
    .aside-text.c-quote_box .text {
        padding: 0 !important;
    }
    .gray.white-blog-post .c-quote_box {
        border-radius: 18px !important;
    }
}




.c-industries_showcase {
    background: var(--text-color);
    color: #F1F1F1;
    text-align: center;
    margin-top: 120px;
}
/* The light-gradient card look is part of the redesign package - pre-redesign
   pages (which share this component) keep the original dark section above.
   That original has no padding of its own on this outer element - the .border
   gradient bar is the very first child and needs to sit flush against the
   white-to-dark seam, not inset below it. The redesign's own .wrapper/inner
   spacing already accounts for this padding, so it's added back only here. */
.dynamic-home .c-industries_showcase {
    background: linear-gradient(180deg, #F1F7FF 0%, #FFFFFF 100%);
    color: #4B5563;
    /* Top matches the other desktop section gaps down the page (120px) -
       mobile keeps its own separate padding-top override (html[lang]
       .dynamic-home .c-industries_showcase, further down this file). */
    padding: 120px 20px 63px;
    margin-top: 0;
}
@media (max-width: 1330px) {
    .c-industries_showcase {
        margin-top: 0;
    }
}
.c-industries_showcase .wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 60px 20px;
}
.dynamic-home .c-industries_showcase .wrapper {
    padding: 0;
}
.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;
    }
}
/* Pre-redesign markup only (see the if hotels_link branch in
   industries_showcase.eleventy.liquid) - none of these class names exist in
   the redesign's showcase-venue markup, so no .dynamic-home scoping needed. */
.c-industries_showcase .border {
    background: transparent linear-gradient(90deg, #369AFE 0%, #00fff8 100%) 0 0 no-repeat padding-box;
    height: 10px;
}
.c-industries_showcase h2 {
    font-size: var(--h2-size);
    background: transparent linear-gradient(90deg, #369AFE 0%, #00fff8 100%) 0 0 no-repeat padding-box;
    background-clip: padding-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 15px;
}
.dynamic-home .c-industries_showcase h2 {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    color: #4B5563;
}
.c-industries_showcase .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 45px;
    grid-row-gap: 45px;
    max-width: 1200px;
    margin: 20px auto;
    font-weight: 600;
    font-size: 1.2em;
    margin-top: 40px;
}
.c-industries_showcase .grid a {
    display: inline-block;
    color: var(--background-color);
    background-repeat: no-repeat;
    padding-top: 160px;
    background-position: 50% 15px;
    background-size: auto 120px;
}
.c-industries_showcase .grid a.hotels {
    background-image: url('/media/static/assets/pricing/hotel_homepage.svg');
}
.c-industries_showcase .grid a.bars {
    background-image: url('/media/static/assets/pricing/bar_homepage.svg');
}
.c-industries_showcase .grid a.malls {
    background-image: url('/media/static/assets/pricing/mall_homepage.svg');
}
.c-industries_showcase .grid a.hotels:hover {
    background-image: url('/media/static/assets/pricing/hotel_homepage_hover.svg');
}
.c-industries_showcase .grid a.bars:hover {
    background-image: url('/media/static/assets/pricing/bar_homepage_hover.svg');
    color: #00fff8;
}
.c-industries_showcase .grid a.bars:hover span {
    background: transparent linear-gradient(90deg, #369AFE 0%, #00fff8 100%) 0 0 no-repeat padding-box;
    background-clip: padding-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.c-industries_showcase .grid a.malls:hover {
    background-image: url('/media/static/assets/pricing/mall_homepage_hover.svg');
    color: #00fff8;
}
.c-industries_showcase .grid a:hover {
    color: #369AFE;
}
@media (max-width: 940px) {
    .c-industries_showcase .grid {
        grid-template-columns: 1fr;
    }
}
/* ---------- End industries showcase widget --------- */
/* ---------- Start text tiles container --------- */
.c-tiles-dark {
    background-color: var(--text-color);
    color: white;
    padding-top: 20px;
    padding-bottom: 20px;
}
.c-text_tiles_container {
    background: transparent linear-gradient(90deg, #FFFFFF 0%, #EBEFF6 100%) 0 0 no-repeat padding-box;
}
.c-text_tiles_container.pricing-tiles {
    background: none;
}
.c-text_tiles_container .wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 20px;
}
.c-text_tiles_container h2 {
    color: var(--text-color);
    font-size: var(--h2-size);
    text-align: center;
    margin-bottom: 50px;
    margin-top: 50px;
}
.c-text_tiles_container .grid {
    margin-bottom: 60px;
}
/* The grid-of-cards look (and everything below tied to it - flex tiles, the
   circular hover-reveal link icon) is part of the redesign package. Pages
   still on the original design keep the plain inline-block tiles above,
   sized by nth-of-type rather than a grid, with the plain arrow-icon link
   further down this file. */
.dynamic-home .c-text_tiles_container {
    background: none;
    padding: 90px 20px;
}
.dynamic-home .c-text_tiles_container .wrapper {
    max-width: 1180px;
    padding: 0;
}
.dynamic-home .c-text_tiles_container h2 {
    color: #4B5563;
    margin-bottom: 50px;
    margin-top: 0;
}
/* Tightened when a subheadline follows - the 50px above already reads as the
   gap before the grid, so the heading only needs a small gap of its own
   before the subheadline sentence. */
.dynamic-home .c-text_tiles_container h2:has(+ .tiles-subheadline) {
    margin-bottom: 14px;
}
/* Scoped past .gray p's own margin-top/bottom: 5px (this component's
   wrapper carries the .gray class, and that rule's type+class selector
   otherwise outweighs a single class here regardless of source order). */
.dynamic-home .c-text_tiles_container .tiles-subheadline {
    text-align: center;
    color: var(--secondary-text-color);
    font-size: 1.05em;
    max-width: 560px;
    margin: 0 auto 50px;
}
.dynamic-home .c-text_tiles_container .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 28px;
    row-gap: 48px;
    margin-bottom: 0;
}
/* Two gaps on the homepage were built from stacked 90px paddings that added up to
   about 200px of empty space. Scoped to .dynamic-home so the pricing pages, which
   share this component, keep their own rhythm, and to desktop, where phone spacing
   is tuned separately. */
@media (min-width: 601px) {
    /* above "Plus so much more": 205px down to roughly 123px, then matched to
       the "Check full pricing" -> "What our Customers" gap below (both
       120px). */
    .dynamic-home .c-industries_showcase {
        padding-bottom: 55px;
    }
    .dynamic-home .c-text_tiles_container {
        /* .c-testimonials_carousel's own 80px margin-bottom collapses with
           this padding-top (they're touching, no border/padding between to
           stop it) - actual gap is max(80, this value), so raising it to
           40px is what takes the "dots -> Plus so much more" gap to 120px. */
        padding-top: 40px;
        /* above the Join box: 200px down to 140px, then matched to the other
           desktop section gaps (120px). */
        padding-bottom: 30px;
    }
    .dynamic-home .main.join {
        margin-top: 40px;
    }
}
/* The tile component has emitted these classes from its mobile_only / desktop_only
   flags all along, but nothing ever acted on them, so every tile showed at every
   width. Phones get the three tiles flagged mobile_only, desktop gets the rest. */
.tile-mobile-only {
    display: none;
}
@media (max-width: 600px) {
    .tile-desktop-only {
        display: none;
    }
    .tile-mobile-only {
        display: flex;
    }
    /* Homepage only. The dots' own margin-bottom is what actually separates
       "We deliver spectacular results" from "Set up in minutes" below it - the
       two sections themselves carry no spacing of their own here. */
    .dynamic-home .results-dots {
        margin-bottom: 42px;
    }
    /* Testimonials carousel's own dots, scoped past the shared rule above -
       ~20% tighter hand-off into "Plus so much more" below it. */
    .dynamic-home .c-testimonials_carousel .results-dots {
        margin-bottom: 34px;
    }
    /* Homepage only. This padding is what separates the last "Plus so much
       more" tile from the Join Social WiFi card below it. 32px, not 45 -
       about 30% tighter per feedback. */
    .dynamic-home .c-text_tiles_container {
        padding-bottom: 32px;
    }
    /* Mobile only - about 30% tighter than the shared 50px below the "Plus so
       much more" heading, which desktop keeps as-is. Also beats the generic
       .c-text_tiles_container h2 mobile size rule by specificity, matching
       the WhatsApp promo headline's mobile size (2em). */
    .dynamic-home .c-text_tiles_container h2 {
        font-size: 2em;
        margin-bottom: 35px;
    }
    .dynamic-home .c-text_tiles_container h2:has(+ .tiles-subheadline) {
        margin-bottom: 10px;
    }
    .dynamic-home .c-text_tiles_container .tiles-subheadline {
        font-size: 1em;
        /* The tile icon badge overlaps the tile's top edge by half its own
           height (28px), so this margin doesn't equal the visible gap below
           the text - 53px here reads as 25px of clear space. */
        margin-bottom: 53px;
        padding: 0 10px;
    }
}
.c-text_tiles_container .c-tile  {
    display: inline-block;
    max-width: 20.6%;
    margin: 20px;
    padding: 40px 60px;
    background-color: white;
    box-shadow: 0 3px 6px #e5e4e7;
    border-radius: 35px;
}
.c-text_tiles_container .c-tile:nth-of-type(1), .c-text_tiles_container .c-tile:nth-of-type(2) {
    max-width: 37.5%;
}
.c-text_tiles_container .c-tile p {
    font-size: 1.1em;
}
.c-text_tiles_container .c-tile h3 {
    font-size: 1.6em;
    margin-bottom: 15px;
}
.c-text_tiles_container .c-tile .link {
    background-image: url('/media/static/assets/arrow_black.svg');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 15px auto;
    float: right;
    padding: 15px;
    margin-right: -30px;
    margin-bottom: -20px;
}
.c-text_tiles_container .c-tile:hover .link {
    background-image: url('/media/static/assets/arrow_hover.svg');
    background-size: 25px auto;
}
/* The gradient card look (and everything below tied to it - flex layout, the
   circular hover-reveal link icon) is part of the redesign package. */
.dynamic-home .c-text_tiles_container .c-tile  {
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: none;
    margin: 0;
    padding: 60px 32px 36px;
    background: linear-gradient(42deg, var(--tile-tint-soft, #F8FAFF) 0%, #FFFFFF 100%) 0 0 no-repeat padding-box;
    box-shadow: 0 10px 24px -14px rgba(20, 40, 80, 0.35);
    border-radius: 20px;
    border: 1.5px solid var(--tile-accent, #E1E9F5);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* The "gradient running through the tiles" look from the switch-to-social-wifi
   tiles (see .lp2-boxes .b1/.b2/.b3): each column of the grid picks up the next
   stop of the site's blue-to-cyan scale, so the row reads as one gradient sweep
   left to right instead of a flat repeated color. --tile-tint is the same stop's
   pale wash, used for the icon badge's background - same pairing as
   .story-mini-tile-x and .story-mini-icon-wrap in the "and much more" story tiles. */
.dynamic-home .c-text_tiles_container .grid .c-tile:nth-child(3n+1) {
    --tile-accent: #369AFE;
    --tile-tint: #E5F2FF;
    --tile-tint-soft: #F5FAFF;
}
.dynamic-home .c-text_tiles_container .grid .c-tile:nth-child(3n+2) {
    --tile-accent: #1BCEFB;
    --tile-tint: #E3F9FE;
    --tile-tint-soft: #F3FCFF;
}
.dynamic-home .c-text_tiles_container .grid .c-tile:nth-child(3n) {
    --tile-accent: #00FFF8;
    --tile-tint: #DFFFFE;
    --tile-tint-soft: #F3FFFE;
}
/* Centered and straddling the card's top edge, same technique as
   .story-mini-icon-wrap in the story tiles below. */
.dynamic-home .c-text_tiles_container .tile-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tile-tint, #E5F2FF) 0%, #FFFFFF 100%);
    border: 1.5px solid var(--tile-accent, #369AFE);
    box-shadow: 0 8px 18px -10px rgba(20, 40, 80, 0.35);
}
.dynamic-home .c-text_tiles_container .tile-icon::before {
    content: "";
    position: absolute;
    inset: 15px;
    background-color: var(--tile-accent, #369AFE);
    -webkit-mask-image: var(--tile-icon);
    mask-image: var(--tile-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
/* The star (reseller) and play (on-demand demo) glyphs read visibly smaller
   than the others at the shared inset, so they get a touch more room. */
#a_h .tile-icon::before,
#a_i .tile-icon::before {
    inset: 12px;
}
    background: transparent linear-gradient(42deg, #F1F7FF 0%, #FFFFFF 100%) 0 0 no-repeat padding-box;
}
.c-text_tiles_container.pricing-tiles .link {
    display: none;
}
.c-text_tiles_container.pricing-tiles .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 10px;
}
.dynamic-home .c-text_tiles_container .c-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 28px -16px rgba(20, 40, 80, 0.3);
}
/* Homepage only: touch has no real "hover", it just applies :hover on tap and
   leaves it stuck until something else is tapped - so "And what's more" tiles
   looked like they were randomly jumping/staying lifted. (hover: none) targets
   touch specifically, unlike a width query, so a mouse on a small window still
   gets the lift. */
@media (hover: none) {
    .dynamic-home .c-text_tiles_container .c-tile:hover {
        transform: none;
        box-shadow: 0 10px 24px -14px rgba(20, 40, 80, 0.35);
    }
    .dynamic-home .c-text_tiles_container .c-tile:hover .link::before {
        opacity: 0;
        transform: scale(0.7);
    }
    .dynamic-home .c-text_tiles_container .c-tile:hover .link::after {
        background-color: var(--tile-accent, #4B5563);
    }
}
.dynamic-home .c-text_tiles_container .c-tile p {
    font-size: 0.98em;
    line-height: 1.55em;
    color: #4B5563;
    flex: 1;
    margin: 0;
}
.dynamic-home .c-text_tiles_container .c-tile h3 {
    font-size: 1.3em;
    margin: 0 0 10px;
    color: #4B5563;
}
.c-text_tiles_container.pricing-tiles .c-tile {
    max-width: none !important;
}

.dynamic-home .c-text_tiles_container .c-tile .link {
    position: relative;
    display: inline-block;
    float: none;
    align-self: flex-end;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 20px 0 0;
    background: none;
    border-radius: 50%;
    border: 1.5px solid var(--tile-accent, #369AFE);
}
.dynamic-home .c-text_tiles_container .c-tile .link::before {
    content: "";
    position: absolute;
    inset: -1.5px;
    border-radius: 50%;
    background-color: var(--tile-accent, #369AFE);
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.dynamic-home .c-text_tiles_container .c-tile .link::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask-image: url('/media/static/assets/arrow_black.svg');
    mask-image: url('/media/static/assets/arrow_black.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    -webkit-mask-size: 11px auto;
    mask-size: 11px auto;
    background-color: var(--tile-accent, #4B5563);
    transition: background-color 0.2s ease;
}
.dynamic-home .c-text_tiles_container .c-tile:hover .link::before {
    opacity: 1;
    transform: scale(1);
}
.dynamic-home .c-text_tiles_container .c-tile:hover .link::after {
    background-color: white;
}
.c-text_tiles_container .c-tile.tile-mobile-only {
    display: none;
}
@media (max-width: 600px) {
    .c-text_tiles_container .c-tile.tile-mobile-only {
        display: flex;
    }
    .c-text_tiles_container .c-tile.tile-desktop-only {
        display: none;
    }
}
@media (max-width: 1400px) {
    .c-text_tiles_container .grid {
        grid-template-columns: 1fr 1fr;
    }
    /* Same override, restated for the redesign's grid: it's set outside any
       media query with 3 classes of specificity (.dynamic-home ...), which
       otherwise beats the plain 2-class rule above regardless of source
       order or media query, leaving the grid stuck at 3 columns on phones. */
    .dynamic-home .c-text_tiles_container .grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 900px) {
    .c-text_tiles_container {
        padding-top: 40px;
    }
    .c-text_tiles_container .grid {
        grid-template-columns: 1fr;
    }
    .dynamic-home .c-text_tiles_container .grid {
        grid-template-columns: 1fr;
    }
    .why-choose .grid {
        grid-template-columns: 1fr;
    }
    .why-choose .box {
        margin-bottom: 40px;
    }
    .why-choose h2, .quote-header h2 {
        font-size: var(--mobile-header-size);
    }
    .why-choose p, .quote-header p {
        font-size: var(--mobile-headline-size);
    }
    .why-choose h4 {
        font-size: var(--mobile-headline-size);
    }
    .why-choose li {
        font-size: var(--mobile-text-size);
        background-size: 25px auto;
    }
}
@media (max-width: 1100px) {
    .dark-box-mobile {
        display: block;
        margin-top: 40px;
    }
    /* zzzzzzzzzzzzzzzz */
    .c-dark .styled-box .text.text-image-right, .c-dark .styled-box .text.text-image-left, .c-dark .styled-box .text.text-image-left-edge {
        background-image: none !important;
    }
    .c-dark.c-dark-margin-normal .styled-box .text.text-image-right, .c-dark.c-dark-margin-normal .styled-box .text.text-image-left, .c-dark.c-dark-margin-normal .styled-box .text.text-image-left-edge {
        padding-bottom: 90px !important;
    }
    .c-industries-reversed-box .styled-box .text.text-image-left, .c-dark .styled-box .text.text-image-left {
        padding-bottom: 100px !important;
    }
    .c-text_tiles_container .c-tile {
        padding: 28px 24px;
        border-radius: 18px;
    }
    .c-industries-reversed-box .styled-box .text {
        padding-left: 40px;
    }
    .c-industries-reversed-box .styled-box .text img {
        margin: 40px auto 0 auto;
    }
}
/* ---------- End text tiles container --------- */

@media (max-width: 1100px) {
    .c-tiles_container {
        grid-template-columns: 1fr 1fr;
    }
    .c-hero_section h1 {
        font-size: 3em;
    }
}
@media (max-width: 950px) {
    .embedded-list {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .contact-side-by-side {
        grid-template-columns: 1fr;
    }
    .c-blog_table.c-blog-mode-long-first-column .c-table-element:first-of-type {
        max-width: none;
    }
    .c-blog_table .c-table-element {
        max-width: none;
    }
}

@media (max-width: 800px) {
    .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;
    }
    /* PL's aside is a single short word ("moc") rather than EN/ES's three-word
       phrase, so it reads better staying on the same line as "Uwolnij"
       instead of forced onto its own line like the longer phrases. */
    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;
    }
}
@media (max-width: 700px) {
    .c-tiles_container {
        grid-template-columns: 1fr;
    }
    .c-tiles_container h2 {
        font-size: 2.5em;
        padding: 0;
    }
    .embedded-list {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 600px) {
    .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 Dynamic Page --------- */


#nav-icon4 {
  margin-top: 10px;
  width: 30px;
  height: 45px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}
#nav-icon4 span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: var(--text-color);
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon4 span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
  top: 8px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
  top: 16px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
  left: 8px;
}

#nav-icon4.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 18px;
  left: 8px;
}


/* ---------- Pricing ------------ */
.pricing {
    padding: 40px 20px;
    margin: 0 auto;
    margin-top: 30px;
    max-width: var(--max-width);
}
.pricing-loading {
    background-image: url('/media/static/assets/loading.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    opacity: 0.5;
    background-size: 25px auto;
    width: 25px;
    height: 25px;
    display: inline-block;
    margin-right: 5px;
}
.white h1 {
    margin-top: 60px;
    font-size: var(--h1-size);
}
.pricing h2 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 40px;
}
.pricing a {
  color: #2D94FF;
}
.pricing .register-from-pricing {
  margin-bottom: 20px;
  text-align: center;
}
.pricing .register-from-pricing a {
  margin-top: 40px;
  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;
}
.pricing .register-from-pricing a:hover{
    text-decoration: none;
}
.pricing .register-from-pricing .subheadline {
  font-size: 0.9em;
  color: white;
}
.pricing .entities {
  text-align: center;
  margin: 0 auto;
  margin-bottom: 30px;
  max-width: 860px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.pricing .entities .entity {
  display: inline-block;
  padding: 10px;
  padding-top: 185px;
  cursor: pointer;
  text-transform: uppercase;
  width: 180px;
  font-weight: bold;
  font-size: 1.2em;
  text-align: center;
  position: relative;
}
.pricing .entities .entity svg {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
}
.pricing .entities .cls-1,
.pricing .entities .cls-1 {
  fill: #B5B5C3;
}
.pricing .entities .is-active .cls-1,
.pricing .entities .is-active .cls-1 {
  fill: #191c1f;
}
.pricing .entities .small-business {
  width: 213px;
}
.pricing .entities .small-business svg {
  top: 24px;
}
.pricing .entities .hotel {
  width: 197px;
}
.pricing .entities .enterprise {
  width: 231px;
}
.pricing .entities .enterprise svg {
  top: 48px;
}
.pricing .entity-description {
  text-align: center;
  font-size: 16px;
}
.pricing .entity-description .desc {
  display: none;
}
.pricing .entity-description .is-active {
  display: block;
}
.pricing .calculator-wrapper {
  padding: 20px;
  margin-top: 45px;
}
.pricing .calculator {
  max-width: 900px;
  margin: 0 auto;
  background-color: white;
  margin-bottom: 20px;
  margin-top: -80px;
}
.pricing .calculator .headline {
  padding: 15px;
  padding-bottom: 10px;
  margin-bottom: 0;
  text-align: center;
}
.pricing .calculator .headline label {
  display: inline-block;
  margin: 0;
  margin-right: 10px;
  font-weight: normal;
  font-size: 15px;
  color: var(--sw-color);
  cursor: pointer;
}
.pricing .calculator .headline [type="radio"]:checked,
.pricing .calculator .headline [type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}
.pricing .calculator .headline [type="radio"]:checked + label,
.pricing .calculator .headline [type="radio"]:not(:checked) + label {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  line-height: 20px;
  display: inline-block;
}
.pricing .calculator .headline [type="radio"]:checked + label:before,
.pricing .calculator .headline [type="radio"]:not(:checked) + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  background-size: 18px 18px;
}
.pricing .calculator .headline [type="radio"]:checked + label:after,
.pricing .calculator .headline [type="radio"]:not(:checked) + label:after {
  content: '';
  width: 18px;
  height: 18px;
  background-size: 18px 18px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.pricing .calculator .headline [type="radio"]:not(:checked) + label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.pricing .calculator .headline [type="radio"]:checked + label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.pricing .calculator .headline .currency-wrapper {
  position: relative;
  display: inline-block;
}
.pricing .calculator .headline .select-currency {
  position: absolute;
  top: -22px;
  left: 0;
  width: 40px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 3px;
  overflow: hidden;
}
.pricing .calculator .headline .select-currency select {
  padding: 5px 8px;
  width: 130%;
  border: none;
  box-shadow: none;
  background: transparent;
  background-image: none;
  -webkit-appearance: none;
}
.pricing .calculator .headline .select-currency select:focus {
  outline: none;
}
.pricing .calculator .headline select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}
.pricing .calculator .headline .options-selector {
  margin: 20px auto;
  display: inline-block;
}
.pricing .calculator .headline .options-selector [type="radio"] + label {
  padding: 10px 25px;
  margin: 5px 5px;
  background-image: url('/media/static/assets/pricing_button.svg');
    background-position: 0 50%;
    background-repeat: no-repeat;
    padding-left: 40px;
    background-size: 30px auto;
    color: var(--text-color);
    font-size: 18px;
}
.pricing .calculator .headline .options-selector [type="radio"]:checked + label {
  background-image: url('/media/static/assets/pricing_button_selected.svg');
}
.irs--round .irs-bar {
    background-color: #369AFE !important;
}
.irs--round .irs-handle {
    background: transparent linear-gradient(90deg, #369AFE 0%, #369AFE 100%) 0 0 no-repeat padding-box !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.pricing .calculator .headline .currency-selector {
  display: none;
}
.pricing .calculator .enterprise {
  border-bottom: 0;
}
.pricing .calculator .slider #count-slider {
  max-width: 80%;
  margin: 30px auto;
}
.pricing .calculator .new-slider {
  padding: 20px;
}
.pricing .calculator .my-entity {
  margin-top: 50px;
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 0;
}
.pricing .calculator .my-entity .counter {
  background-color: var(--sw-color);
    background-clip: padding-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    font-size: 1.2em;
}
.pricing .calculator .my-entity,
.pricing .calculator .new-slider {
  display: none;
}
.pricing .calculator .the-price {
  text-align: center;
}
.pricing .calculator .the-price .original {
  display: none;
  color: red;
  text-decoration: line-through;
  font-size: 14px;
}
.pricing .calculator .the-price h4 {
  font-weight: bold;
  font-size: 26px;
}
.pricing .calculator .the-price .per {
  color: var(--text-color);
  font-weight: normal;
}
.pricing .calculator .the-enterprise {
  margin-top: 20px;
  display: none;
  text-align: center;
  padding: 20px;
  font-size: 1.3em;
}
.pricing-failed {
    display: none;
    margin-bottom: 60px;
}
.pricing-failed .message {
  margin-top: 20px;
  text-align: center;
  padding: 20px;
  font-size: 1.3em;
}
.pricing-failed a {
    color: var(--sw-color);
}
.pricing .calculator .action-box {
  max-width: 300px;
  margin: 0 auto;
  border-radius: 7px;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 20px;
}
.pricing .calculator .action-box .contact {
  display: inline-block;
  background-color: var(--sw-color);
  padding: 10px;
  color: white;
  font-weight: bold;
  border-radius: 7px;
  text-transform: uppercase;
  font-size: 1.2em;
  outline: none;
}
.pricing .calculator .action-box .contact:hover {
  outline: none;
  text-decoration: none;
}
.pricing .calculator .inlined-contact {
  padding: 20px 4vw;
}
.pricing .calculator .inlined-contact .contact-container {
  display: block;
  overflow: hidden;
  height: 0;
}
.pricing .calculator .inlined-contact .contact-container .intl-tel-input {
  width: 100%;
}

.tiles-pricing {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 60px;
}
.tiles-pricing .lottie-box {
    margin-top: 10px;
}
.below-pricing-wrapper {
    background: transparent linear-gradient(42deg, #F1F7FF 0%, #FFFFFF 100%) 0 0 no-repeat padding-box;
}
.below-pricing {
    margin: 0 auto;
    max-width: var(--max-width);
    padding: 20px;
    padding-top: 0;
    margin-bottom: 50px;
}
.below-pricing.below-pricing2 {
    margin-bottom: 0;
}
.center-register {
    text-align: center;
    margin-top: 50px;
}
.center-register a {
    color: white;
    font-size: 1.2em;
}

.below-pricing .else {
    max-width: 800px;
    margin: 20px auto;
}
.below-pricing .else.else-other {
    max-width: var(--max-width);
    text-align: center;
}
.below-pricing .else.else-other .as-alter-button {
    font-size: 1.2em;
    margin-top: 20px;
}
.below-pricing .else.else-other p {
    margin-top: 20px;
    margin-bottom: 10px;
}
.below-pricing .else h2 {
    text-align: center;
    font-size: var(--h2-size);
}
.below-pricing .else h4 {
    font-size: 1.6em;
    margin-bottom: 25px;
    margin-top: 25px;
}
.below-pricing .else h4 span {
    display: inline-block;
    padding: 10px 20px;
    margin-right: 10px;
    background-color: #F1F7FF;
    border-radius: 100%;
}


.below-pricing .more {
    text-align: center;
}
.below-pricing .features {
  padding: 40px;
  padding-bottom: 20px;
}
.below-pricing .features h3, .below-pricing .features h2 {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
.below-pricing .features h2 {
    font-size: var(--h2-size);
}
.below-pricing .features h3 {
    font-size: 1.2em;
    font-weight: bold;
}
.below-pricing .features .divider {
  text-align: center;
  margin-bottom: 15px;
}
.below-pricing .features .divider span {
  display: inline-block;
  width: 75px;
  border-bottom: 4px solid #F03762;
}
.below-pricing .features .feature-list {
  padding: 20px;
  padding-top: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-column: 2;
    margin-top: 60px;
}
.below-pricing .features .feature-list h4 {
  padding: 20px;
  padding-left: 70px;
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 55px auto;
  margin: 0;
  font-size: 1.3em;
}
.below-pricing .features .feature-list .fx-branded {
  background-image: url("/media/static-preexisting/images/features/new/wifi-solid.svg");
}
.below-pricing .features .feature-list .fx-customer {
  background-image: url("/media/static-preexisting/images/features/new/signal-solid.svg");
}
.below-pricing .features .feature-list .fx-crm {
  background-image: url("/media/static-preexisting/images/features/new/user-ninja-solid.svg");
}
.below-pricing .features .feature-list .fx-tiktok {
  background-image: url("/media/static-preexisting/images/features/new/snapchat.svg");
}
.below-pricing .features .feature-list .fx-api {
  background-image: url("/media/static-preexisting/images/features/new/cog-solid.svg");
}
.below-pricing .features .feature-list .fx-online {
  background-image: url("/media/static-preexisting/images/features/new/comments-solid.svg");
}
.below-pricing .features .feature-list .fx-marketing {
  background-image: url("/media/static-preexisting/images/features/new/envelope-open-text-solid.svg");
}
.below-pricing .features .feature-list .fx-email {
  background-image: url("/media/static-preexisting/images/features/new/mail-bulk-solid.svg");
}
.below-pricing .features .feature-list .fx-facebook {
  background-image: url("/media/static-preexisting/images/features/new/facebook-f.svg");
}
.below-pricing .new-faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: #2B3133;
  color: white;
  padding: 30px;
  box-shadow: 0 0 30px 0 rgba(82, 63, 105, 0.15);
  border-radius: 10px;
}
.below-pricing .new-faq h4 {
  margin-bottom: 20px;
  font-size: 1.3em;
}
.below-pricing .new-faq .aside-faq {
  text-align: center;
  padding: 25px;
}
.below-pricing .new-faq .aside-faq h4 {
  font-size: 1.7em;
}
.below-pricing .new-faq .aside-faq a {
  margin-top: 20px;
  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;
}

@media (max-width: 1100px) {
    .tiles-pricing {
        grid-template-columns: 1fr 1fr;
    }
    .c-tiles_container.tiles_container-stand-alone {
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }
}

@media (max-width: 980px) {
    .pricing .entities {
        max-width: none;
    }
    .pricing .entities .entity {
        width: 15vw;
        font-size: 0.9em;
        text-transform: none;
    }
    .pricing .entities .small-business, .pricing .entities .hotel, .pricing .entities .enterprise {
        font-size: 0.9em;
        padding-top: 130px;
    }
}
@media (max-width: 770px) {
    .below-pricing .features .feature-list, .below-pricing .new-faq {
        grid-template-columns: 1fr;
    }
    .below-pricing .new-faq {
        text-align: center;
    }
    .below-pricing .features {
        padding: 0;
    }
}
@media (max-width: 650px) {
    .pricing .entities .small-business, .pricing .entities .hotel, .pricing .entities .enterprise {
        padding-top: 110px;
    }
    .pricing .entities {
        margin-bottom: 60px;
        margin-top: 20px;
    }
}
@media (max-width: 480px) {
    .pricing .entities .entity {
        width: auto;
        text-align: center;
    }
    .pricing .entities .small-business {
        padding-top: 115px;
        text-align: center;
    }
    .pricing .entities .hotel {
        text-align: center;
        padding-top: 70px;
    }
    .pricing .entities .enterprise {
        padding-top: 100px;
        text-align: center;
    }

    .pricing .entity-description {
        padding: 10px;
    }
    .pricing h1, .pricing h2 {
        padding: 10px;
    }
}
/* ---------- End Pricing ---------- */



/* ---------- 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: 1250px) {
   img {
       width: auto;
       height: auto;
       max-width: 100%;
   }
}

/* ---------- START Customers list --------- */

.customers-list 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;
}
.customers-list .gray {
    max-width: var(--max-width);
    margin: 0 auto;
}
.post-list .item {
    box-shadow: 0 3px 6px #e5e4e7;
}

/* ---------- END Customers list --------- */

/* ---------- 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 --------- */

#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;
}
.grecaptcha-badge {
    opacity: 0;
}

.dynamic.blog-dynamic {
    margin-top: 0;
}
.dynamic .c-image-hero.c-blog_hero {
    background-color: var(--text-color);
    color: white;
    margin-bottom: 50px;
}
.dynamic .c-image-hero.c-blog_hero a {
    color: var(--sw-color);
    font-size: 1.3em;
    display: inline-block;
    margin-top: 20px;
    text-decoration: underline;
}
.dynamic .c-image-hero.c-blog_hero a:hover {
    color: #72b8fe;
}
.dynamic .c-image-hero.c-blog_hero .inner-image {
    background: none;
}
.dynamic .c-hero_section.c-image-hero.c-blog_hero p {
    font-size: 1.1em;
}
.dynamic .c-hero_section.c-blog_hero ul li {
    display: block;
    font-size: 1em;
    padding-top: 10px;
    padding-bottom: 10px;
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding-left: 40px;
    background-size: 35px auto;
}
.dynamic .c-hero_section.c-blog_hero ul .vname {
    background-image: url('/media/static/assets/info_icon.svg');
}
.dynamic .c-hero_section.c-blog_hero ul .vtype {
    background-image: url('/media/static/assets/venue_icon.svg');
}
.dynamic .c-hero_section.c-blog_hero ul .vlocation {
    background-image: url('/media/static/assets/location_icon.svg');
}
.dynamic .c-hero_section.c-blog_hero ul .vsite {
    padding-left: 5px;
}
.dynamic.blog-dynamic .aside-text {
    margin-bottom: 10px;
    margin-top: 0;
    padding-bottom: 0;
    font-size: 1em;
    max-width: 900px;
}
.dynamic.blog-dynamic .aside-text .text {
    padding: 0;
}
.dynamic.blog-dynamic .aside-text .text.image-box, .dynamic.blog-dynamic .aside-text .text.yt-box {
    text-align: center;
}

.dynamic.blog-dynamic .aside-text .text.yt-box {
    margin-top: 30px;
    margin-bottom: 30px;
}

.dynamic.blog-dynamic .aside-text p {
    line-height: 1.8em;
}
.dynamic.blog-dynamic .aside-text .text h3:first-of-type, .dynamic.blog-dynamic .aside-text .text h3 {
    margin-top: 0;
    margin-bottom: 5px;
}
.white-blog-post {
    margin-bottom: 90px;
}
.dynamic.blog-dynamic .aside-text.aside-statistics {
    margin-top: 40px;
    margin-bottom: 60px;
}
.gray.white-blog-post .aside-dark {
    background-color: transparent;
    color: var(--text-color);
}
.gray.white-blog-post .aside-dark .c-statistic {
    background: transparent linear-gradient(42deg, #F1F7FF 0%, #FFFFFF 100%) 0 0 no-repeat padding-box;
    box-shadow: 0 3px 6px #e5e4e7;
    border-radius: 35px;
    margin: 20px;
    padding: 20px 30px;
}
.c-product_hero {
    background-color: var(--text-color);
    color: white;
    margin-top: -10px;
    padding: 20px 40px;
    height: 100dvh;
}
.c-product_hero div {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.c-product_hero h1, .c-product_hero p {
    margin-bottom: 25px;
}
.c-product_hero h1 span {
    display: block;
    background: transparent linear-gradient(90deg, #369AFE 0%, #00fff8 100%) 0 0 no-repeat padding-box;
    background-clip: padding-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.c-product_hero iframe {
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 12px;
}
.dynamic .c-hero_section iframe, .aside-text iframe {
    border-radius: 12px;
}
.c-product_update {
    max-width: 800px;
    margin: 50px auto;
    background: transparent linear-gradient(42deg, #F1F7FF 0%, #FFFFFF 100%) 0 0 no-repeat padding-box;
    padding: 30px;
    border-radius: 30px;
    box-shadow: 0 3px 6px #e5e4e7;
}
.c-product_update .day {
    font-weight: 500;
    font-size: 1.2em;
    margin-bottom: 5px;
}
.c-product_update h2 {
    margin-bottom: 25px;
}
.c-product_update .image {
    text-align: center;
    margin-top: 30px;
}
.c-product_update .image img {
    border-radius: 20px;
}
.c-product_update .text {
    line-height: 1.6em;
}
.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;
    }
}

@media (max-width: 900px) {
    .c-product_hero iframe {
        width: 100% !important;
    }
    .c-text_tiles_container h2, .c-industries_showcase h2, .dynamic .aside-text h2, .c-dark .inner h2, .c-dark .styled-box .text h3, .c-hero_section.c-image-hero h1 {
        font-size: 2.5em;
    }
    .dynamic.new-dynamic .aside-text h2, .tile-title, .aside-question-list h2, .white h1, .below-pricing .features h2, .below-pricing .else h2, .gray h1 {
        font-size: 2.5em;
    }
    .join .header, .join .header b {
        font-size: 30px;
    }
    .dynamic .c-hero_section .video-wrapper {
        width: 98%;
        padding-top: 150px;
        padding-bottom: 200px;
    }
    .c-dark .styled-box.side-box {
        margin-top: 0;
        margin-bottom: 0;
        background: none !important;
    }
    .c-dark.c-dark-margin-small {
        margin-top: 0;
        margin-bottom: 0;
    }
    .c-dark {
        padding-bottom: 1px;
        padding-top: 1px;
    }
    .c-dark .styled-box {
        margin: 20px;
        border-radius: 18px;
    }
    .c-tiles-dark {
        overflow-x: scroll;
        /* Firefox/other non-WebKit browsers don't honour the
           ::-webkit-scrollbar rule below, so this row's scrollbar stayed
           visible there even though Chrome/Safari already hid it. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .c-tiles-dark::-webkit-scrollbar {
        display: none;
    }
    .c-tiles-dark .c-tiles_container {
        width: 850px;
        grid-template-columns: 200px 200px 200px 200px;
    }
    .dynamic .c-image-hero .side-image-only.position-right .inner-image .data {
        text-align: right;
    }
    .c-dark .styled-box .text.text-image-right {
        background-position: 100% 98%;
    }
    .c-dark .styled-box .text.text-image-center {
        background-size: auto 300px;
        background-position: 50% 87%;
    }
    .c-dark .styled-box .text {
        background-size: auto 350px;
    }
    .dynamic .c-image-hero .inner-image .data {
        width: 90%;
    }
    .c-image-hero img, .dynamic .c-image-hero .inner-image .data img {
        max-width: 200px;
    }
    .c-dark .inner h2 {
        margin-bottom: 40px;
        margin-top: 20px;
    }
    .pricing .entities {
        grid-column-gap: 15px;
        padding-top: 100px;
        position: relative;
        grid-template-columns: auto auto auto;
    }
    .pricing .entities .entity {
        width: auto;
        font-size: 1em;
        display: block;
        border: 2px solid #B0B6BF;
        border-radius: 35px;
        position: unset;
        color: #B0B6BF;
    }
    .pricing .entities .entity.is-active {
        border-color: var(--sw-color);
        color: var(--sw-color)
    }
    .pricing .desc {
        display: none !important;
    }
    .pricing .calculator-wrapper {
        margin-top: 0;
    }
    .pricing .entities .entity svg {
        display: none;
        top: 5px;
        left: 0;
        max-height: 80px;
        width: 100%
    }
    .white h1 {
        margin-top: 40px;
    }
    .pricing .calculator .the-enterprise {
        margin-top: 0;
    }
    .pricing .entities .entity.is-active svg {
        display: block;
    }
    .pricing .entities .small-business, .pricing .entities .hotel, .pricing .entities .enterprise {
        padding-top: 10px;
        margin-top: 0;
    }
    .pricing .entities .small-business.is-active svg {
        left: 5px;
    }
    .pricing .entities .hotel.is-active svg {
        left: 5px;
    }
    .pricing h2 {
        margin-bottom: 20px;
        font-size: 1.3em;
    }
    .pricing {
        margin-top: 0;
        padding-top: 0;
    }
    .pricing-header {
        padding: 20px;
        padding-bottom: 0;
    }
    .pricing .calculator .headline .options-selector [type="radio"] + label {
        background: none;
        color: #B0B6BF;
        border-radius: 35px;
        font-size: 16px;
        font-weight: 600;
        padding: 10px 15px;
    }
    .pricing .calculator .headline .options-selector [type="radio"]:checked + label {
        background: none;
        background-color: var(--sw-color);
        color: white;
        border-color: transparent;
        padding: 10px 15px;
    }
    .pricing .calculator .headline .options-selector [type="radio"] + label span {
        display: none;
    }
    .pricing .calculator-wrapper {
        position: relative;
        min-height: 250px;
    }
    .pricing .calculator {
        margin-top: -40px;
    }
    .pricing .calculator .headline {
        padding: 0;
        margin-bottom: 20px;
    }
    .pricing .calculator .the-price {
        margin-top: 10px;
    }
    .pricing .call {
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 0;
    }
    .pricing .calculator .headline .options-selector {
        margin: 0;
        border: 2px solid #B0B6BF;
        border-radius: 35px;
    }
    .pricing .calculator .my-entity {
        margin-top: 0;
    }
    .c-dark .styled-box.side-box {
        padding: 40px;
        margin-top: 10px;
        margin-bottom: 20px;
    }
    .dynamic .call {
        text-align: center;
    }
    .dynamic .c-image-hero .animated-button {
        margin: 0 auto;
        margin-bottom: 30px;
    }

    .c-dark {
        padding: 0;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .c-dark .inner h2 {
        padding: 20px;
        margin-top: 0;
    }
    .lp2-bottom-contact {
        padding: 1px 0;
    }
    .trial-link {
        margin-bottom: 30px;
        margin-left: 28px;
        margin-right: 28px;
        display: inline-block;
        line-height: 1.5em;
    }
    .lp2-bottom-contact #contact.contact-form {
        max-width: 100%;
        margin-top: 0;
    }
    .lp2-bottom-contact .contact-single {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}
@media (max-width: 440px) {
    .lp2-header .contact-side-by-side .iti {
        width: 116% !important;
    }
    .c-dark .styled-box {
        border-radius: 18px;
        margin-bottom: 0;
        margin-top: 0;
    }
    .c-dark .inner {
        padding-bottom: 0;
        padding-top: 0;
    }
    .c-dark .styled-box.side-box {
        margin-top: 0;
        margin-bottom: 0;
    }
    .c-dark .inner.grid {
        grid-row-gap: 0;
    }
    .new-dynamic .aside-text {
        margin-left: 20px !important;
        margin-right: 20px !important;
    }
    .dynamic .c-hero_section.c-image-hero p {
        font-size: 1.2em;
    }
    .c-dark.c-dark-margin-normal .styled-box .text {
        padding-bottom: 380px;
    }
    .dynamic.blog-dynamic .aside-text {
        padding: 0 20px;
    }
    .dynamic.blog-dynamic .large-image {
        border-radius: 0;
    }
    .dynamic.blog-dynamic .c-image-hero.c-blog_hero {
        margin-top: 0;
    }
    .c-text_tiles_container .c-tile h3 {
        font-size: 1.2em;
        margin-top: 5px;
        margin-bottom: 10px;
    }
    .c-text_tiles_container h2 {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .below-pricing {
        padding: 0;
    }
    .c-tiles_container.tiles_container-stand-alone {
        grid-column-gap: 15px;
        grid-row-gap: 15px;
    }
    lottie-player {
        width: 100px !important;
        height: 100px !important;
    }
    .lottie-box {
        width: 100px;
        height: 110px;
        margin-bottom: 10px;
    }
    .below-pricing .more {
        padding-bottom: 20px;
    }
    footer .bottom .region {
        padding-left: 50px;
        background-position: 20px 50%;
    }
    footer .legal {
        margin-top: 0;
        margin-bottom: 0;
    }
    .below-pricing {
        margin: 20px;
    }
}
@media (max-width: 800px) {
    .news-item {
        margin-top: 0;
    }
}
@media (max-width: 600px) {
    #wa-btn-wrapper {
        background-repeat: no-repeat;
        background-size: 60px auto;
        width: 65px;
        height: 65px;
        right: 15px !important;
        bottom: 15px !important;
        background-image: url('/media/static/assets/chat-mobile.svg');
    }
    .c-dark .styled-box.side-box p.bottom {
        margin-top: 20px;
    }
    .c-dark .styled-box.side-box {
        padding-bottom: 20px;
        padding-top: 20px;
    }
    .c-dark .styled-box.side-box p {
        margin-top: 5px;
    }
    .contact-thanks h2 {
        font-size: var(--mobile-header-size);
    }
    .contact-thanks p {
        font-size: var(--mobile-headline-size);
    }
    .dynamic .c-hero_section.c-image-hero p {
        font-size: var(--mobile-text-size);
    }
    .c-text_tiles_container h2, .c-industries_showcase h2, .dynamic .aside-text h2, .c-dark .inner h2, .c-hero_section.c-image-hero h1 {
        font-size: var(--mobile-header-size);
    }
    .dynamic.new-dynamic .aside-text h2, .tile-title, .aside-question-list h2, .white h1, .below-pricing .features h2, .below-pricing .else h2, .gray h1 {
        font-size: var(--mobile-header-size);
    }
    .c-dark .styled-box .text p, .c-dark .styled-box.side-box p, .dynamic.new-dynamic .aside-text p, .c-tiles_container .c-tile h3, .aside-question-list h3, .c-dark .styled-box.side-box h3, .c-dark .styled-box .text h3 {
        font-size: var(--mobile-headline-size);
    }
    .c-hero_section p {
        font-size: var(--mobile-text-size);
    }
    .dynamic .c-hero_section .logos {
        margin-top: 60px;
    }
    .c-text_tiles_container .c-tile p, .c-tiles_container .c-tile p, .c-question .question-text .answer {
        font-size: var(--mobile-text-size);
    }
    .c-showcase_image h2 {
        font-size: var(--mobile-header-size);
    }
    .c-product_update {
        border-radius: 18px;
        margin: 20px;
        padding: 20px;
    }
    .c-dark .styled-box .text p, .c-dark .styled-box.side-box p, .dynamic.new-dynamic .aside-text p, .new-industry p, footer .company-info p {
        font-size: var(--mobile-text-size);
    }
    .contact-side-by-side form {
        border-radius: 18px;
    }
    .c-product_update h2 {
       font-size: var(--mobile-headline-size);
    }
    .c-product_update .text ul {
        margin: 0;
        padding: 0;
        padding-left: 15px;
    }
    .c-tiles_container .c-tile {
        border-radius: 18px;
    }
    .pricing-header .breakable span {
        display: block;
    }
    .center-register .call .as-alter-button, .below-pricing .call .as-alter-button {
        width: auto;
    }
    .center-register .call .as-alter-button .alt-button, .below-pricing .call .as-alter-button .alt-button {
        width: auto;
    }
    .center-register .call .as-alter-button a, .below-pricing .call .as-alter-button a {
        padding: 10px 30px;
    }
    .c-dark .styled-box .text.text-image-right, .c-dark .styled-box .text {
        background-size: auto 380px;
    }
    .c-dark .styled-box .text {
        padding-top: 35px;
    }
    .categories .call .as-alter-button {
        margin-bottom: 20px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .gallery .categories {
        margin-bottom: 0;
    }
    .identity-guidelines .categories .call {
        margin-bottom: 0;
    }
}
@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;
     }
     .entities-overflow {
         position: relative;
     }
     .entities-wrapper {
         overflow-x: scroll;
     }
     .entities-wrapper::-webkit-scrollbar {
        display: none;
     }
     .pricing .entities {
        min-width: 500px;
        position: unset;
        margin-bottom: 30px;
    }
    .pricing .entities .small-business.is-active svg, .pricing .entities .hotel.is-active svg, .pricing .entities .enterprise.is-active svg {
        width: 100%;
        position: absolute;
        top: 0;
    }
    .c-tiles_container.tiles_container-stand-alone {
        margin: 20px;
        padding: 0;
        margin-bottom: 30px;
    }
    .below-pricing .c-tiles_container.tiles_container-stand-alone {
        margin: 0 !important;
    }
    .c-dark .styled-box .text.text-image-right {
        background-position: 50% 100%;
    }
    .pricing .calculator-wrapper {
        min-height: auto;
    }
    .gradient-tiles .c-tiles_container {
        grid-template-columns: 1fr;
    }
    .gradient-tiles h2, .gradient-tiles .tile-headline {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 420px) {
    .news-item a {
        padding-left: 20px;
        padding-right: 40px;
        background-size: 18px auto;
        background-position: 96% 50%;
    }
    .tiles-pricing {
        grid-template-columns: 1fr 1fr;
    }
    .lottie-box {
        width: 60px;
        height: 70px;
    }
    lottie-player {
        width: 60px !important;
        height: 60px !important;
    }
    .c-lottie-tile h3 {
        font-size: var(--mobile-header-size);
    }
    .c-text_tiles_container .c-tile h3 {
        font-size: 1.2em;
    }
}
@media (max-width: 320px) {
    .tiles-pricing {
        grid-template-columns: 1fr;
    }

}
@view-transition {
  navigation: auto;
}

.gradient-tiles, .gradient-tiles-3 {
    background: transparent linear-gradient(60deg, #D6E2FF 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
    padding-top: 20px;
    padding-bottom: 40px;
}
.gradient-tiles-3 {
    padding-bottom: 30px;
}

#contact {
    margin-top: 100px;
    margin-bottom: 100px;
}
#contact .contact-single form {
    background: transparent linear-gradient(60deg, #413E98 0%, #A6BEFD 100%) 0% 0% no-repeat padding-box;
}
#contact .contact-single form p, #contact .contact-single form h1, #contact .contact-single submit {
    color: white;
}
#contact .contact-single form p, #contact .contact-single form h1 {
    padding-left: 50px;
    padding-right: 50px;
    line-height: 1.3em;
}
#contact .contact-single form label.id_message {
    background-color: white;
}
#contact .contact-single form  #submit-button {
    background: none;
    border: 2px solid white;
}
#contact .contact-single form  #submit-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
#contact .contact-single form input::placeholder, #contact .contact-single form textarea::placeholder {
    color: #B0B6BF;
}
.aside-qrate-gradient, .qrate .as-alter-button {
    background: transparent linear-gradient(60deg, #413E98 0%, #A6BEFD 100%) 0% 0% no-repeat padding-box;
    color: white;
}
.aside-qrate-gradient {
    margin-bottom: 120px !important;
    max-width: 980px;
}
.aside-qrate-gradient a {
    color: white;
    text-decoration: underline;
}
.qrate .as-alter-button:before {
    background: transparent linear-gradient(60deg, #A6BEFD 0%, #413E98 100%) 0% 0% no-repeat padding-box;
}

.dynamic.new-dynamic .aside-text.aside-qrate-gradient h2 {
    color: white;
}
.aside-qrate-gradient .text {
    display: grid;
    grid-template-columns: 1fr 340px;
    grid-column-gap: 30px;
}
.p-image-wrapper {
    margin-top: 30px;
}
.aside-qrate-gradient .p-image-wrapper {
    margin: 0;
    text-align: center;
}
.aside-qrate-gradient .p-image-wrapper img {
    max-width: 100%;
    margin: 0;
    padding: 0;
    margin-top: 28px;
    padding-right: 10px;
}
.gradient-tiles .c-tiles_container .c-tile {
    background-size: auto 60px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
}
.gradient-tiles .c-tiles_container .c-tile h3 {
    font-size: 1.4em;
}
.gradient-tiles-3 .c-tiles_container.tiles_container-stand-alone {
    max-width: 980px;
}
.gradient-tiles-3 .c-tiles_container .c-tile {
    background-size: auto 50px;
}
.gradient-tiles-3 .tile-title {
    margin-top: 30px;
}
.qrate .service-video {
    margin-top: 30px;
}
.secondary-animated-button {
    margin-left: 15px;
}
.more-headline, .tile-headline {
    line-height: 1.5em;
}

@media (max-width: 500px) {
    #contact .contact-single form p, #contact .contact-single form h1 {
        padding-left: 10px;
        padding-right: 10px;
    }
    .aside-qrate-gradient .text {
        grid-template-columns: 1fr;
        grid-row-gap: 25px;
    }
    .more-list li {
        text-align: left;
    }
    .dynamic .c-image-hero.qrate {
        min-height: auto;
        margin-top: 80px;
        margin-bottom: -10px;
    }
    .more-headline, .tile-headline {
        font-size: var(--mobile-headline-size);
        max-width: none;
    }
    .more-list li {
        font-size: 18px;
    }
    .secondary-animated-button {
        margin-left: 0;
        margin-top: 20px !important;
    }
    #contact.contact-form {
        max-width: 96%;
        margin: 0 auto;
        overflow: hidden;
    }
    #video.aside-text {
        margin: 0 !important;
    }
    #sub-video.aside-text {
        margin-top: 0 !important;
        margin-bottom: 40px !important;
    }
    .dynamic.new-dynamic .aside-text.aside-qrate-gradient h2 {
        margin-top: 0;
    }
}

.pricing.pricing-ap {
    display: none;
}
.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;
}
.identity-guidelines .call {
    margin-bottom: 40px;
}
.identity-guidelines.homepage-ai .container h3 {
    font-size: var(--h2-size);
}
.identity-guidelines.homepage-ai .container p {
    font-size: 1.1em;
}

.pricing-header2 {
    margin-top: 80px;
    margin-bottom: 40px;
}
.pricing-header2 p {
    font-weight: 500;
}
.simple-pricing {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    max-width: 1000px;
    margin: 40px auto;
}
.pricing-header2 h1 {
    font-size: var(--h1-size-alt);
}
.simple-pricing .item {
    border-radius: 12px;
    padding: 20px 30px;
    text-align: center;
    position: relative;
    min-height: 500px;
}
.simple-pricing .item img {
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 20px;
}
.simple-pricing .food {
    background: transparent linear-gradient(34deg, #FFE9FC 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
    border: 2px solid #E26DD2;
}
.simple-pricing .food h2 {
    color: #E26DD2;
}
.simple-pricing .hotels {
    background: transparent linear-gradient(35deg, #ECE8FF 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
    border: 2px solid #856CFF;
}
.simple-pricing .hotels h2 {
    color: #856CFF;
}
.simple-pricing .mall {
    background: transparent linear-gradient(34deg, #DCEEFF 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
    border: 2px solid #369AFE;
}
.simple-pricing .mall h2 {
    color: #369AFE;
}
.simple-pricing .item h2 {
    font-size: 26px;
    margin-bottom: 20px;
}
.simple-pricing .item p {
    font-size: 14px;
    margin-bottom: 20px;
}
.simple-pricing .item .price {
    font-size: 50px;
    font-weight: bold;
    margin-bottom: 10px;
}
.simple-pricing .item .price-label {
    font-size: 22px;
    margin-bottom: 20px;
}
.button-wrapper {
    position: absolute;
    bottom: 30px;
    width: 81%;
}
.button-wrapper .btn {
    border-radius: 30px;
    padding: 10px 40px;
    display: block;
    color: white;
    font-size: 18px;
    font-weight: 500;
    transition: background-color 200ms linear;
}
.food .button-wrapper .btn {
    background-color: #E26DD2;
}
.hotels .button-wrapper .btn {
    background-color: #856CFF;
}
.mall .button-wrapper .btn {
    background-color: #369AFE;
}
.food .button-wrapper .btn:hover {
    background-color: #B637A5;
}
.hotels .button-wrapper .btn:hover {
    background-color: #4D36BF;
}
.mall .button-wrapper .btn:hover {
    background-color: #0A68C6;
}
.pricing-questions {
    margin-top: 60px;
    margin-bottom: 70px;
    text-align: center;
}
.pricing-questions h3 {
    font-size: 35px;
    margin-bottom: 20px;
}
.pricing-questions a {
    font-size: 18px;
    font-weight: 500;
    padding: 8px 40px !important;
}
.simple-pricing .slider {
    margin-top: 10px;
    font-weight: 500;
}
.simple-pricing .slider-label {
    margin-bottom: 15px;
}
.simple-pricing .irs--round .irs-handle {
    border: 0 solid #856CFF !important;
    background: transparent linear-gradient(90deg, #856CFF 0%, #856CFF 100%) 0 0 no-repeat padding-box !important;
    top: 29px;
    width: 18px;
    height: 18px;
}
.simple-pricing .irs--round .irs-bar, .simple-pricing .irs--round .irs-single {
    background-color: #856CFF !important;
}
.simple-pricing .irs--round .irs-from::before, .simple-pricing .irs--round .irs-to::before, .simple-pricing .irs--round .irs-single::before {
    border-top-color: #856CFF !important;
}
.simple-pricing .slider, .simple-pricing .price, .simple-pricing .item .price-label {
    display: none;
}

.demo-wrapper {
    margin: 0 auto;
    max-width: 1000px;
}
.demo-header {
    display: grid;
    grid-template-columns: 40% 60%;
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    margin-top: 90px;
    margin-bottom: 40px;
    padding: 30px;
    padding-left: 35px;
}
.demo-header h1, .demo-box h2 {
    margin-top: 0;
    font-size: var(--h2-size);
    margin-bottom: 20px;
}
.demo-header iframe {
    border-radius: 15px;
}
.demo-header .call {
    margin-top: 20px;
}
.demo-header .call a {
    font-weight: 500;
}
.demo-box {
    margin-top: 60px;
    margin-bottom: 90px;
    padding: 40px;
    padding-left: 55px;
    padding-right: 55%;
    padding-bottom: 100px;
    background-color: #F1F7FF;
    border-radius: 15px;
    background-image: url('/media/static/assets/ondemand.png');
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: auto 88%;
}
.demo-box .call {
    margin-top: 30px;
}
.demo-box .call a {
    font-weight: 500;
}
.on-demand.logos {
    text-align: center;
    color: #B0B6BF;
    margin-top: 30px;
    margin-bottom: 30px;
}
.on-demand.logos picture {
    max-width: 65%;
    display: inline-block;
}
.on-demand.logos div {
    margin-bottom: 15px;
}
.on-demand-updates {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 80px;
}
.on-demand-updates h3 {
    font-size: var(--h2-size);
    margin-bottom: 25px;
}
.on-demand-updates .call {
    margin-top: 35px;
}
.on-demand-updates .call a {
    font-weight: 500;
}

/*  Landing page */
.landing-page {
    margin: 90px auto;
}
.dynamic .c-hero_section.lp-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}
.lp-header h1 {
    font-size: 48px;
    max-width: 690px;
    margin: 0 auto;
}
.lp-header p, .lp-dashboard p {
    font-size: 1.2em;
    margin-top: 20px;
    margin-bottom: 30px;
}
.lp-header .call {
    margin-top: 40px;
    margin-bottom: 60px;
}
.lp-header a {
    font-weight: bold;
    font-size: 1.2em;
}
.lp-header .setup {
    margin-top: 50px;
    margin-bottom: 30px;
}
.lp-gradient {
    background: transparent linear-gradient(285deg, #FFFFFF 0%, #E9F0FF 100%) 0% 0% no-repeat padding-box;
    margin-top: 20px;
    margin-bottom: 30px;
}
.lp-gradient-box {
    max-width: 900px;
    margin: 0 auto;
}
.lp-gradient .aside-pl img {
    max-height: 350px;
    margin-top: 30px;
}
.case-study-box {
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
    display: grid;
    grid-template-columns: 25% 50% 25%;
    grid-column-gap: 30px;
    grid-row-gap: 20px;
}
.case-study-box .showcase {
    border: 1px solid #369AFE;
    background-color: white;
    border-radius: 10px;
    padding: 30px 30px;
    line-height: 1.5em;
}
.case-study-box .showcase .image-box img {
    max-width: 80px;
}
.case-study-box .showcase .image-box.image-box-pl img {
    max-width: 100%;
}
.case-study-box .showcase .image-box {
    margin-top: 5px;
    margin-bottom: 20px;
}

.lp-choose, .lp-dashboard {
    text-align: center;
    max-width: 900px;
    margin: 60px auto;
}
.lp-choose h2, .lp-numbers h2, .lp-everything h2, .lp-dashboard h2 {
    max-width: 680px;
    margin: 0 auto;
    font-size: 38px;
    line-height: 1.25em;
}
.lp-dashboard p, .lp-switch p {
    max-width: 600px;
    margin: 25px auto;
}
.lp-choose h2 span {
    background-color: #C6E4FE;
}
.lp-choose .compare {
    margin-top: 40px;
    margin-bottom: 20px;
}

.lp-numbers {
    text-align: center;
    max-width: 900px;
    margin: 60px auto;
}
.lp-numbers .call {
    display: none;
}
.lp-numbers .boxes {
    margin-top: 30px;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
.lp-numbers .boxes .box {
    border: 1px solid #369AFE;
    background: transparent linear-gradient(0deg, #F1F7FF 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
    border-radius: 10px;
    padding: 15px;
}
.lp-numbers .boxes .box .fg {
    background-position: 10px 10px;
    background-repeat: no-repeat;
    background-size: auto 40px;
}
.lp-numbers .boxes .box .fg.fg-hirosaki {
    background-size: auto 50px;
}
.lp-numbers .boxes .box h3 {
    font-size: 38px;
    padding-top: 80px;
    background-position: 90% 70px;
    background-size: auto 30px;
    background-repeat: no-repeat;
    background-image: url('/uploads/lp-arrow.svg');
}
.lp-numbers .boxes .box .text {
    margin-top: 5px;
    margin-bottom: 30px;
    font-weight: bold;
}
.lp-numbers .boxes .box .call {
    margin-bottom: 15px;
}
.lp-numbers .green {
    margin-top: 50px;
    margin-bottom: 40px;
}
.lp-green {
    max-width: 690px;
    margin: 60px auto;
}
.lp-green .green-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 30px;
    background: transparent linear-gradient(263deg, #FFFFFF 0%, #E6FFE7 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0 3px 6px #00000029;
    border: 1px solid #08DC00;
    border-radius: 74px;
    padding: 20px;
    text-align: center;
}
.lp-green .green-grid .logo {
    background-image: url('/uploads/lp-penida.webp');
    background-position: 50% 50%;
    background-size: auto 60px;
    background-repeat: no-repeat;
    padding: 20px;
    margin-left: 10px;
}
.lp-green .green-grid .score {
    background-image: url('/uploads/lp-penida-score.svg');
    background-position: 50% 50%;
    background-size: auto 50px;
    background-repeat: no-repeat;
    padding: 20px;
    margin-right: 10px;
}
.lp-green .green-grid .score.score-pl {
    background-image: url('/uploads/lp-penida-score-pl.svg');
}
.lp-green .green-grid .text {
    padding: 20px;
    border-left: 2px solid #08DC00;
    border-right: 2px solid #08DC00;
    font-weight: bold;
    font-size: 1.1em;
    line-height: 1.5em;
}

.lp-everything {
    text-align: center;
    max-width: 900px;
    margin: 60px auto;
    padding-top: 40px;
    padding-bottom: 40px;
}
.lp-everything .grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 30px;
}
.lp-everything .grid .box {
    border: 1px solid #C0D1E0;
    background-color: white;
    border-radius: 10px;
    padding: 10px;
}
.lp-everything .grid .box h4 {
    padding: 5px 15px;
    margin-top: 10px;
}
.lp-everything .grid .box .lp-small {
    padding: 5px 15px;
    margin-bottom: 15px;
    font-size: 0.9em;
}
.lp-guarantee {
    text-align: center;
    max-width: 900px;
    margin: 60px auto;
    padding-top: 40px;
    padding-bottom: 40px;
}
.lp-box {
    border: 1px solid #FFAFFC;
    background: transparent linear-gradient(69deg, #FEF4FF 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
    border-radius: 10px;
    padding: 20px;
}
.lp-box h2 {
    font-size: 38px;
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 1.25em;
}
.lp-box h3 {
    font-size: 24px;
    margin-bottom: 40px;
    line-height: 1.4em;
}
.lp-box .setup {
    margin-top: 50px;
    margin-bottom: 20px;
}
.lp-switch {
    text-align: center;
    max-width: 900px;
    margin: 20px auto;
}
.lp-switch h2 {
    font-size: 38px;
    line-height: 1.25em;
    max-width: 760px;
    margin: 25px auto;
}
.lp-switch p {
    font-size: 1.2em;
    line-height: 1.4em;
}

.lp2-header {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 55% 45%;
    grid-column-gap: 20px;
    padding-top: 70px;
}
.lp2-header .dynamic {
    margin-top: 0;
}
.lp2-header .lp2-showcase img {
    max-width: 85%;
}
.lp2-header .contact-side-by-side textarea {
    height: 207px;
}
.lp2-header .dynamic .c-hero_section {
    padding: 0;
    margin: 0;
    text-align: left;
}
.lp2-header .c-hero_section .animated-button {
    margin-top: 30px;
    margin-bottom: 50px;
}
.lp2-wrapper {
    background: transparent linear-gradient(360deg, #FFFFFF 0%, #E9F0FF 100%) 0% 0% no-repeat padding-box;
    margin-top: -90px;
}
.lp2-header #contact {
    margin: 0;
}
.lp2-header #contact-single {
    margin: 0;
}
.lp2-header #contact .contact-single form, .lp2-bottom-contact #contact .contact-single form {
    background: transparent linear-gradient(0deg, #193147 0%, #050A0E 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 16px;
    padding: 20px 40px;
}
.lp2-header .contact-side-by-side .iti {
    width: 108.5%;
}
.lp2-header label.id_message {
    width: auto;
}
.lp2-header #contact .contact-single form h1 {
    text-align: left;
    padding: 0;
}
.lp2-header #contact .contact-side-by-side form {
    margin: 0;
}
.lp2-header .left p, .lp2-header .left h1 {
    text-align: left;
}
.lp2-header .left h1 {
    margin-top: 40px;
    font-size: 50px;
    font-weight: bold;
}
.lp2-header .left p {
    max-width: 60%;
    font-size: 20px;
    line-height: 1.6em;
    margin-bottom: 0;
}
.lp-gradient2 {
    background: none;
}
.lp-gradient2 .case-study-box .showcase {
    background: transparent linear-gradient(233deg, #FFFFFF 0%, #F2F6FF 100%) 0% 0% no-repeat padding-box;
    border: 1px solid #369AFE;
}
.lp2-dark-wrapper {
    background: transparent linear-gradient(0deg, #193147 0%, #050A0E 100%) 0% 0% no-repeat padding-box;
    color: white;
    overflow: hidden;
}
.lp2-how-it-works {
    max-width: var(--max-width);
    margin: 0 auto;
    padding-top: 60px;
    padding-bottom: 60px;
    text-align: center;
}
.lp2-how-it-works h2 {
    font-size: 50px;
    font-weight: bold;
    margin-bottom: 50px;
}
.lp2-how-it-works .images {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 80px;
}
.lp2-how-it-works .images div {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 600;
}
.lp2-more-link {
    text-align: center;
    margin-top: 60px;
}
.lp2-more-link a {
    color: white;
}
.lp2-see-in-action {
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
}
.lp2-see-in-action h2 {
    font-size: 50px;
    font-weight: bold;
    color: #193147;
    margin-bottom: 40px;
    margin-top: 40px;
}
.lp2-see-in-action iframe {
    border-radius: 27px;
}
.lp2-wrapper-alt {
    margin-top: 0;
}
.lp2-how-to-setup {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
}
.lp2-how-to-setup h2, .lp2-how-to-boost h2 {
    font-size: 50px;
    font-weight: bold;
    color: #193147;
    margin-bottom: 40px;
    margin-top: 20px;
}
/* Tighter than the shared 40px above - once var(--h2-size) shrank this
   heading (see hero_2026_styles.html), the same pixel gap read as too much
   space before "And we'll help you every step of the way". */
.lp2-how-to-setup h2 {
    margin-bottom: 14px;
}
.lp2-how-to-setup p {
    margin-top: 0;
}
.setup.lp-setups {
    margin-top: 50px;
    margin-bottom: 50px;
}
.lp2-boxes {
    margin-top: 80px;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 90px;
    text-align: left;
}
.lp2-boxes div {
    padding: 30px;
    padding-top: 80px;
    border-radius: 12px;
    color: #193147;
    background-color: white;
    position: relative;
}
.lp2-boxes .b1 {
    border: 2px solid #369AFE;
}
.lp2-boxes .b2 {
    border: 2px solid #1BCEFB;
}
.lp2-boxes .b3 {
    border: 2px solid #00FFF8;
}
.lp2-boxes div h3 {
    font-size: 26px;
    font-weight: bold;
}
.lp2-boxes div p {
    font-size: 16px;
    line-height: 1.5em;
    margin-bottom: 0;
}
.lp2-boxes div img {
    max-width: 114px;
    position: absolute;
    top: -55px;
    left: 30%;
}
.lp2-pricing {
    margin-top: 60px;
}
.lp2-pricing .simple-pricing {
    max-width: 900px;
}

.lp2-how-to-boost {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 40px;
}
.lp2-wrapper-reversed {
    background: transparent linear-gradient(180deg, #FFFFFF 0%, #E9F0FF 100%) 0% 0% no-repeat padding-box;
}
.lp2-how-to-boost h2 {
    margin-bottom: 100px;
}
.lp-dark-wrapper {
    background: transparent linear-gradient(74deg, #193147 0%, #050A0E 100%) 0% 0% no-repeat padding-box;
}
.lp-numbers.lp-numbers2 {
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 50px;
}
.lp-numbers.lp-numbers2 h2, .lp-numbers.lp-numbers2 .sub-text {
    color: white;
    margin-bottom: 15px;
}
.lp-switch2 {
    padding-top: 30px;
}
.lp-faq2 {
    max-width: 900px;
    margin: 0 auto;
}
.trial-wrapper {
    background: transparent linear-gradient(282deg, #FFFFFF 0%, #E9F0FF 100%) 0% 0% no-repeat padding-box;
}
/* Straight top-to-bottom instead of trial-wrapper's own diagonal - this
   section sits at the very bottom of the page, so a vertical flow from
   white into the same pale blue reads cleaner than a diagonal here. */
.lp2-bottom-contact-wrapper {
    background: transparent linear-gradient(180deg, #FFFFFF 0%, #E9F0FF 100%) 0% 0% no-repeat padding-box;
}
.lp2-trial, .lp2-bottom-contact {
    max-width: 900px;
    margin: 0 auto;
    padding: 70px 20px;
    text-align: center;
}
.lp2-trial h2, .lp2-why-switch h2, .lp2-switching-in-steps h2, .lp2-pricing-preheader h2 {
    color: #193147;
    font-size: 50px;
    font-weight: bold;
    margin-bottom: 30px;
    line-height: 1.6em;
}
.lp2-header #contact .contact-single form #submit-button, .lp2-bottom-contact #contact .contact-single form #submit-button {
    background: transparent linear-gradient(90deg, #369AFE 0%, #00fff8 100%) 0 0 no-repeat padding-box !important;
    border-color: transparent;
}
.fancy {
    background: transparent linear-gradient(90deg, #369AFE 0%, #00fff8 100%) 0 0 no-repeat padding-box;
    background-clip: padding-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.contact-small {
    font-size: 16px;
    font-weight: normal;
}
.lp2-pricing-marks {
    max-width: 900px;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
}
.lp2-pricing .pricing-questions {
    margin-top: 40px;
}
.lp2-pricing-marks span {
    color: #193147;
    font-size: 22px;
    font-weight: bold;
    background-image: url('/uploads/lp/blue-tick.svg');
    background-size: 37px auto;
    background-repeat: no-repeat;
    background-position: 0 5px;
    padding: 10px;
    padding-left: 48px;
    display: inline-block;
    margin-right: 20px;
}
.lp2-green.lp-green .green-grid .score {
    background-image: url('/uploads/lp/review-stars.svg');
}
.lp2-pricing .simple-pricing .item {
    min-height: 400px;
}
.lp2-why-switch {
    max-width: 900px;
    margin: 30px auto;
    padding: 10px;
    text-align: center;
}
.lp2-why-switch h2 span {
    background-color: #C6E4FE;
}
.lp2-why-switch h2 {
    margin-bottom: 30px;
    margin-top: 20px;
}
.lp2-switching-in-steps {
    background: transparent linear-gradient(321deg, #FFFFFF 0%, #E9F0FF 100%) 0% 0% no-repeat padding-box;
}
.lp2-switching-in-steps .lp2-steps-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 10px;
    padding-top: 60px;
    padding-bottom: 60px;
    text-align: center;
}
.lp2-steps-inner h3 {
    font-size: 40px;
    font-weight: bold;
}
.lp2-steps-inner h3 span {
    color: #369AFE;
}
.lp2-steps-inner p {
    font-size: 24px;
    line-height: 1.5em;
}
.lp2-steps-inner .step {
    margin-bottom: 70px;
}
.lp2-steps-inner iframe {
    border-radius: 25px;
}
.lp2-steps-inner .images {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
}
.lp2-no-bg {
    background: none;
}
.lp2-pricing-preheader {
    max-width: 900px;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: -60px;
}
.trial-link {
    color: #369AFE;
    margin-top: -60px;
    display: block;
    text-decoration: underline;
}
.lp-switch2 img {
    margin-bottom: 30px;
}
.lp-faq2 a {
    color: #369AFE;
    text-decoration: underline;
}
.lp2-bottom-contact-wrapper #contact {
    margin-top: 10px;
}
@media (max-width: 1400px) {
    .lp2-header, .lp2-how-it-works {
        padding: 20px;
    }
    .lp2-header .lp2-showcase {
        position: unset;
        bottom: auto;
        left: auto;
        width: auto;
        margin-top: 20px;
        display: block;
        text-align: center;
    }
    .lp2-how-it-works {
        max-width: 900px;
    }
    .lp2-how-it-works .images {
        grid-column-gap: 30px;
    }
    .lp2-how-it-works h2 {
        margin-top: 40px;
    }
    .lp2-more-link {
        margin-bottom: 40px;
    }
}
@media (max-width: 1000px) {
    .lp2-header .contact-side-by-side .iti {
        width: 106.3% !important;
    }
    .lp2-header .left p {
        max-width: unset;
    }
    .lp2-header {
        grid-template-columns: 1fr;
    }
    .lp-gradient, .lp-numbers, .lp-dashboard, .lp-guarantee, .lp-switch {
        padding: 20px;
    }
    .lp-green {
        padding: 25px;
    }
    .lp-numbers {
        margin-bottom: 20px;
    }
    .lp-green {
        margin-top: 0;
    }
    .lp-green .green-grid {
        display: grid;
        border-radius: 10px;
        grid-template-columns: 1fr;
    }
    .lp-green .green-grid .text {
        border-left: none;
        border-right: none;
        border-top: 2px solid #08DC00;
        border-bottom: 2px solid #08DC00;
    }
    .lp-green .green-grid .logo, .lp-green .green-grid .score {
        padding-top: 40px;
        padding-bottom: 40px;
        background-size: auto 60px;
    }
    .lp-green .green-grid .logo {
         background-size: auto 70px;
    }
    .lp-green .green-grid .score {
        background-position: 50% 0;
    }
    .lp-green .green-grid .text {
        margin-left: 20px;
        margin-right: 20px;
    }
    .landing-page img {
        max-width: 100%;
    }
    .case-study-box {
        grid-template-columns: 1fr;
    }
    .case-study-box img {
        max-height: 80px;
    }
    .lp-setups img {
        max-width: 80%;
    }
    .lp2-see-in-action, .lp2-boxes {
        padding: 20px;
    }
    .lp2-see-in-action iframe, .lp2-steps-inner iframe {
        width: 100%;
        height: auto;
        min-height: 360px;
        max-width: 640px;
    }
}
@media (max-width: 800px) {
    .lp2-header .contact-side-by-side .iti {
        width: 107% !important;
    }
    .lp2-pricing .simple-pricing .item {
        min-height: auto;
    }
    .lp2-pricing-marks span {
        background-size: 24px auto;
        padding-left: 30px;
        background-position: 0 11px;
        margin-bottom: 5px;
    }
    .lp2-pricing-marks {
        text-align: left;
        padding-left: 16vw;
    }
    .lp-numbers .boxes, .lp-everything .grid {
        grid-template-columns: 1fr;
    }
    .lp2-steps-inner h3, .lp-choose h2, .lp-numbers h2, .lp-everything h2, .lp-dashboard h2, .lp-switch h2, .lp-box h2, .lp-header h1, .lp2-how-to-boost h2, .lp2-trial h2, .lp2-why-switch h2 {
        font-size: var(--mobile-header-size);
    }
    .lp-choose h2 {
        margin-left: 20px;
        margin-right: 20px;
    }
    .lp-box h3 {
        font-size: var(--mobile-headline-size);
    }
    .lp2-steps-inner p {
        font-size: var(--mobile-text-size);
    }
    .lp-everything {
        margin-top: 0;
        margin-bottom: 10px;
    }
    .lp2-how-it-works .images {
        grid-template-columns: 1fr 1fr;
        grid-row-gap: 40px;
    }
    .lp2-how-it-works h2, .lp2-header .left h1, .lp2-see-in-action h2, .lp2-how-to-setup h2, .lp2-switching-in-steps h2, .lp2-pricing-preheader h2 {
        font-size: var(--mobile-header-size);
    }
    .lp2-header #contact .contact-single form h1, .lp2-boxes div h3 {
        font-size: var(--mobile-headline-size);
    }
    .lp2-boxes {
        grid-template-columns: 1fr;
        grid-row-gap: 70px;
    }
    .lp2-boxes div img {
        left: 80%;
    }
    .lp2-boxes div {
        padding-top: 20px;
    }
    .lp2-boxes div p {
        margin-top: 25px;
    }
    .lp2-header .contact-single .center {
        margin-bottom: 20px;
    }
    .lp-gradient2 .case-study-box {
        padding-top: 0;
        padding-bottom: 0;
    }
    .lp-gradient2 {
        margin-top: 0;
    }
}
@media (max-width: 600px) {
    .lp2-header .contact-side-by-side .iti {
        width: 110.3% !important;
    }
    .lp2-header .contact-side-by-side #submit-button, .lp2-bottom-contact .contact-side-by-side #submit-button {
        float: unset;
        margin: 0 auto;
        padding: 12px 55px;
    }
}
@media (max-width: 500px) {
    .lp2-header .contact-side-by-side .iti {
        width: 113% !important;
    }
}
@media (max-width: 440px) {
    .lp2-header .contact-side-by-side .iti {
        width: 116% !important;
    }
}
/* END landing page */

@media (max-width: 1100px) {
    .simple-pricing {
        padding: 0 25px;
    }
    .simple-pricing .item .price {
        font-size: 35px;
    }
    .demo-header {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .demo-wrapper {
        margin: 0 15px;
    }
    .demo-box {
        padding: 30px;
        padding-bottom: 450px;
        text-align: center;
        background-size: auto 60%;
    }
}
@media (max-width: 850px) {
    .simple-pricing {
        grid-template-columns: 1fr;
    }
    .simple-pricing .item {
        min-height: unset;
    }
    .button-wrapper {
        position: relative;
        bottom: auto;
        width: auto;
        margin-top: 50px;
    }
    .pricing-header2 h1 {
        font-size: var(--mobile-header-size);
        margin-top: 0;
    }
    .pricing-header2 {
        margin-top: 60px;
    }
    .pricing-questions h3 {
        font-size: var(--mobile-header-size);
    }
    .lp2-steps-inner .images {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .lp2-steps-inner .images img {
        margin: 0 auto;
    }
}
@media (max-width: 800px) {
    .demo-header .call .as-alter-button a {
        padding: 14px 40px;
    }
    .demo-header iframe {
        width: 100%;
    }
    .dropdown-content .grid-menu .wrapper a svg rect {
        fill: #fff !important;
    }
}

@media (max-width: 600px) {
    .demo-header {
        padding: 0;
    }
    .ai-header-link {
        display: block;
        width: 5px;
        margin: 0 auto;
        margin-bottom: 15px;
        position: relative;
        top: 0 !important;
    }
    .demo-box {
        background-image: none;
        padding: 20px;
        padding-bottom: 30px;
    }
    .lp2-boxes div img {
        left: 70%;
    }
    .trial-link {
        margin-top: 0;
    }
}
@media (max-width: 650px) {
    .identity-guidelines.homepage-ai .container h3 {
        font-size: 1.8em;
        text-align: center;
    }
    .identity-guidelines.homepage-ai .container p {
        font-size: 1em;
    }
    .lp2-boxes div h3 {
        padding-right: 90px;
        margin-top: 10px;
    }
}
@media (max-width: 440px) {
    .lp2-boxes div img {
        left: 72%;
        max-width: 90px;
        top: -45px;
    }
    .lp2-boxes div p {
        margin-top: 15px;
    }
}


/* ── It's all included ── */
.pricing-features-section {
    background: linear-gradient(180deg, #F1F7FF 0%, #ffffff 100%);
    padding: 40px 24px 72px;
    text-align: center;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.pricing-features-list {
    max-width: 780px;
    margin: 0 auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.pf-subtitle {
    margin-bottom: 40px !important;
    margin-top: 8px !important;
}
.pf-category-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    transition: padding-left 0.2s ease;
}
.pf-category:hover .pf-category-header {
    padding-left: 6px;
}
.pf-category-header img {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.pf-category:hover .pf-category-header img {
    transform: scale(1.2);
}
.pf-category-header h3 {
    margin: 0;
    background: linear-gradient(90deg, #E26DD2, #369AFE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: filter 0.2s ease;
}
/* gradient border via background-clip trick */
.pf-items {
    border-radius: 12px;
    background:
        linear-gradient(white, white) padding-box,
        linear-gradient(to right, #E26DD2, #369AFE) border-box;
    border: 1px solid transparent;
    overflow: hidden;
}
.pf-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 18px 13px 32px;
    color: #575F6C;
    font-size: 0.9em;
    transition: background 0.2s, padding-left 0.2s;
    cursor: default;
}
/* alternating rows: even = gradient left-to-right #F1F7FF → white */
.pf-item:nth-child(even) {
    background: linear-gradient(to right, #F1F7FF, #ffffff);
}
.pf-item:hover {
    background: linear-gradient(to right, #e8f3ff, #F5FAFF) !important;
    padding-left: 38px;
}
.pf-item:hover img {
    transform: scale(1.25);
}
.pf-short { display: none; }
.pf-item img {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    margin-left: 16px;
}

/* ── And what else? – tile icons ── */
.c-text_tiles_container.pricing-tiles .grid {
    margin-top: 40px;
}
.c-text_tiles_container.pricing-tiles .c-tile {
    border-radius: 22px;
    text-align: center;
    padding: 56px 36px 24px;
    background: #ffffff !important;
    font-size: 0.8em;
    box-shadow: none;
    position: relative;
    overflow: visible;
}
.c-text_tiles_container.pricing-tiles .c-tile:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transform: translateY(-3px);
    transition: box-shadow 0.2s, transform 0.2s;
}
.pricing-tile-icon {
    width: 72px;
    height: 72px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
}
.c-text_tiles_container.pricing-tiles .c-tile p {
    color: #6B7280;
}
.pricing-tile-cancel { border: 1.5px solid #e26dd2; }
.pricing-tile-works  { border: 1.5px solid #856cff; }
.pricing-tile-price  { border: 1.5px solid #369afe; }

/* ── And what else? section tweaks ── */
.c-text_tiles_container.pricing-tiles h2 { margin-top: 25px !important; margin-bottom: 25px !important; }
.c-text_tiles_container.pricing-tiles .grid { max-width: 85%; margin-left: auto; margin-right: auto; margin-bottom: 30px !important; }

/* ── Font sizes – match And what else? headings ── */
.pricing-features-section h2,
.pricing-cta-wrap h2 {
    font-size: var(--h2-size);
}
.pricing-features-section .pf-subtitle,
.pricing-cta-wrap p {
    font-size: 1.1em;
}

/* ── We put you in control ── */
.pricing-cta-wrap {
    text-align: center;
    padding: 60px 20px 80px;
    background: linear-gradient(180deg, #ffffff 0%, #F1F7FF 100%);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.pricing-cta-wrap h2 { margin-bottom: 16px !important; }
.pricing-cta-wrap p { margin-bottom: 24px !important; margin-top: 0 !important; }
.pricing-cta-wrap .pricing-cta-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 24px;
}
.pricing-cta-wrap .btn-cta-primary {
    display: inline-block;
    padding: 14px 36px;
    background: linear-gradient(90deg, #369AFE 0%, #00fff8 100%);
    border-radius: 40px;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    font-family: inherit;
    font-size: inherit;
    position: relative;
    z-index: 0;
}
.pricing-cta-wrap .btn-cta-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 40px;
    background: linear-gradient(90deg, #00fff8 0%, #369AFE 100%);
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: -1;
}
.pricing-cta-wrap .btn-cta-primary:hover::before {
    opacity: 1;
}
.pricing-cta-wrap .btn-cta-outline {
    display: inline-block;
    padding: 12px 34px;
    border: 2px solid #369afe;
    border-radius: 40px;
    background: transparent;
    color: #369afe;
    font-weight: 600;
    text-decoration: none;
    font-family: inherit;
    font-size: inherit;
    transition: opacity 0.2s;
}
.pricing-cta-wrap .btn-cta-outline:hover {
    opacity: 0.75;
}

@media (max-width: 768px) {
    /* 1. Simple Pricing headline - match other section headings */
    .pricing-header2 { margin-top: 50px !important; }
    .pricing-header2 h1 { font-size: var(--h2-size) !important; }
    .pricing-header2 p { font-size: 1em !important; }

    /* 2. It's all included - fit within screen */
    .pf-full { display: none; }
    .pf-short { display: inline; }
    .pf-item:hover { background: inherit !important; padding-left: 16px; }
    .pf-item:hover img { transform: none; }
    .pf-category:hover .pf-category-header { padding-left: 0; }
    .pf-category:hover .pf-category-header img { transform: none; }
    .pf-category:hover .pf-category-header h3 { filter: none; }
    .c-text_tiles_container.pricing-tiles .c-tile:hover { box-shadow: none; transform: none; }
    .c-text_tiles_container.pricing-tiles .grid { margin-top: 64px; }
    .pricing-features-section { padding: 32px 0 26px; }
    .pricing-features-section h2 { font-size: var(--mobile-header-size) !important; }
    .pricing-features-section .pf-subtitle { font-size: 1em !important; margin-bottom: 35px !important; }
    .pricing-features-list { max-width: 100%; padding: 0 20px; }
    .pf-item { padding: 12px 12px 12px 16px; font-size: 0.85em; line-height: 1.5; }
    .pf-category-header h3 { font-size: 1em; }

    /* 3. And what else? - stack boxes, fix icon overlap, bigger titles */
    .c-text_tiles_container.pricing-tiles .grid {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        gap: 48px !important;
    }
    .c-text_tiles_container.pricing-tiles .c-tile {
        padding: 56px 24px 24px !important;
        font-size: 0.9em !important;
    }
    .c-text_tiles_container.pricing-tiles .c-tile h3 { font-size: 1.45em; }

    /* 4. Remove gap between CTA and footer */
    .pricing-cta-wrap { padding-top: 26px !important; padding-bottom: 40px !important; }
    .pricing-cta-wrap h2 { font-size: var(--mobile-header-size) !important; }
    .pricing-cta-wrap p { font-size: 1em !important; }
    .pricing-cta-wrap .pricing-cta-btns { flex-direction: column; align-items: center; gap: 12px; }
    .pricing-cta-wrap .btn-cta-primary,
    .pricing-cta-wrap .btn-cta-outline { text-align: center; padding-left: 50px;padding-right: 50px }
}

/* ---------- Homepage (EN) phone-only refinements ----------
   Deliberately last in the file: several of the rules below have to win over
   earlier `max-width: 900px` blocks at equal specificity. Scoped with
   html[lang="en"] .dynamic-home so the shared components (text tiles, industries
   showcase) keep their current look on the pricing pages and on the PL/ES homes. */
@media (max-width: 600px) {
    /* Watch video: the wrapper used to be absolutely positioned inside the hero, so
       it only blurred part of the screen. Cover the whole viewport instead and show
       nothing but the video. background-color is !important because scripts.js sets
       it inline when opening/closing the player. */
    .dynamic .c-hero_section .video-wrapper {
        position: fixed;
        inset: 0;
        /* svw/svh rather than 100%: the page has a fixed header that overflows
           sideways, so the initial containing block is wider than the screen. */
        width: 100svw;
        max-width: 100svw;
        height: 100svh;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(10, 12, 20, 0.94) !important;
    }
    .dynamic .c-hero_section .video-wrapper .bg {
        width: 100%;
        max-width: none;
        padding: 0 14px;
    }
    .dynamic .c-hero_section .video-wrapper iframe {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
    }
    .dynamic .c-hero_section .video-wrapper .bg .close {
        top: -48px;
        right: 8px;
    }

    /* Hero intro line should read exactly like the WhatsApp section copy
       ("Verify guest phone numbers..."): same size and same line-height. */
    html[lang="en"] .dynamic-home .c-hero_section > p {
        font-size: 17.6px;
        line-height: 1.6em;
        /* was 50px - too much air before the Watch video / Contact Us buttons */
        margin-bottom: 28px;
    }

    /* "Social WiFi is for everyone": halved top gap, and a tighter hand-off into
       "Plus so much more" (was 40px + 40px of stacked padding). */
    html[lang="en"] .dynamic-home .c-industries_showcase {
        padding-top: 60px;
        padding-bottom: 14px;
    }
    /* PL/ES never got this reduction at all (90px base, unhalved) until now -
       50% off the 90px base, same spirit as the EN value above. */
    html[lang="pl"] .dynamic-home .c-industries_showcase,
    html[lang="es"] .dynamic-home .c-industries_showcase {
        padding-top: 45px;
        padding-bottom: 14px;
    }
    html[lang="en"] .dynamic-home .c-text_tiles_container,
    html[lang="pl"] .dynamic-home .c-text_tiles_container,
    html[lang="es"] .dynamic-home .c-text_tiles_container {
        padding-top: 24px;
    }

    /* Hand-off from the hero logo marquee into the WhatsApp section, already
       trimmed 30% once (144px -> 57px via this margin). Requested another ~30%
       off on top of that: 57px -> ~40px. */
    html[lang="en"] .dynamic-home .c-hero_section {
        margin-bottom: 40px;
    }
    /* Same second trim applied to the PL/ES value (38px -> ~27px). */
    html[lang="pl"] .dynamic-home .c-hero_section,
    html[lang="es"] .dynamic-home .c-hero_section {
        margin-bottom: 27px;
    }
}

/* PL/ES button copy runs longer than the English original, so this CTA (the
   hardware-devices pill in the "Set up in minutes" box) gets a wider,
   language-scoped box instead of wrapping mid-word inside the English-sized
   pill. It draws its rounded border from an inline SVG rect - sizing the
   svg/rect to 100% keeps the border matching the box at whatever width it
   resolves to. (The industries_showcase pricing CTA used to need the same
   treatment, but is auto-width flex now, so it no longer does.) */
html[lang="pl"] .dynamic-home .hw-devices-btn.animated-button,
html[lang="es"] .dynamic-home .hw-devices-btn.animated-button {
    /* min() keeps this from overflowing narrow phones - on anything under
       ~504px wide it shrinks below 440px and the text wraps to two lines,
       which the auto height + normal white-space below accommodate. Flex
       centering (rather than the base class's single-line-height trick)
       keeps the label centred whether it wraps or not. */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* auto + max-width, not a forced width: on mobile the short "Wszystkie
       urządzenia" / "Todos los dispositivos" text should size to its own
       content, not stretch out to fill the viewport cap the way the longer
       desktop text needs to. The cap still guards against overflow if a
       translation is ever long enough to need it. */
    width: auto;
    max-width: min(440px, calc(100vw - 64px));
    height: auto;
    min-height: 54px;
    padding: 10px 28px;
    line-height: 1.3;
    white-space: normal;
    text-align: center;
    font-weight: 600;
}
html[lang="pl"] .dynamic-home .hw-devices-btn.animated-button svg,
html[lang="es"] .dynamic-home .hw-devices-btn.animated-button svg {
    width: 100%;
    height: 100%;
}
html[lang="pl"] .dynamic-home .hw-devices-btn.animated-button svg rect,
html[lang="es"] .dynamic-home .hw-devices-btn.animated-button svg rect {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    /* Unlike CSS border-radius, SVG rx/ry are independent axes that are NOT
       auto-minimized against each other - an oversized rx (clamped to half
       the WIDTH, ~220px) paired with a small ry (~27px, half the height)
       does not average out to a pill, it draws a lens/oval whose corner
       arcs reach all the way to the horizontal centre. A real pill needs
       BOTH axes fixed at the same value, half the button's normal 54px
       height, so each corner is a small quarter-circle that leaves the
       long top/bottom edges flat and the left/right ends fully round. The
       rect itself is inset 10px from the button box (see width/height
       above), so 22px is half of its actual 44px height, not the button's
       54px. */
    rx: 22px;
    ry: 22px;
}

/* PL/ES stats headline and hardware-devices button both carry a shorter
   mobile-only variant of their text, marked up as a second span next to the
   full one - toggled here rather than truncated with CSS, since the two
   versions differ by more than just length (dropping the leading verb
   changes word order/capitalisation, not just what's cut off). */
.stats-headline-mobile,
.hw-devices-btn .btn-text-mobile {
    display: none;
}
@media (max-width: 600px) {
    .stats-headline-desktop {
        display: none;
    }
    .stats-headline-mobile {
        display: inline;
    }
    .hw-devices-btn .btn-text-desktop {
        display: none;
    }
    .hw-devices-btn .btn-text-mobile {
        display: inline;
    }
}

/* ---------- Start WhatsApp chat animation (whatsapp_promo) ----------
   Geometry comes from the design handoff: the device artwork is intrinsically
   340x702 and is scaled with --wa-scale; --wa-cut is how much of the phone is
   hidden below the bottom edge so it appears to rise out of the green section.
   Doing the layout in CSS (rather than in JS as the reference does) keeps it
   responsive without a resize listener. The canvas is transparent and carries
   no shadow - that was an explicit design requirement. */
.wa-root {
    /* Sized to the full device box (340x702 intrinsic) because the bezel overlay
       needs that whole area; the screen sits inside it at 14/12. Height is chosen
       to match the static mockup this replaced, and the scale stays at or below
       height/545 so the newest card still clears the crop line. */
    --wa-scale: 0.95;
    --wa-cut: 147px;
    position: relative;
    overflow: hidden;
    background: transparent;
    margin: 0 auto;
    width: calc(340px * var(--wa-scale));
    height: calc(702px * var(--wa-scale) - var(--wa-cut));
    font-family: "Manrope", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}
.wa-root *,
.wa-root *::before,
.wa-root *::after {
    box-sizing: border-box;
}
.wa-templates[hidden] {
    display: none;
}
.wa-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(340px * var(--wa-scale));
    height: calc(702px * var(--wa-scale));
}
.wa-device {
    position: absolute;
    top: 0;
    left: 0;
    width: 340px;
    height: 702px;
    transform: scale(var(--wa-scale));
    transform-origin: top left;
}
.wa-screen {
    position: absolute;
    left: 14px;
    top: 12px;
    width: 311px;
    height: 677px;
    border-radius: 46px;
    overflow: hidden;
    background: #ece6db;
}
.wa-col {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}
.wa-status {
    flex: 0 0 auto;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px 0 24px;
    background: #ece6db;
}
.wa-status-time {
    font-size: 15px;
    font-weight: 700;
    color: #111b21;
    letter-spacing: 0.3px;
}
.wa-status-icons {
    display: flex;
    align-items: center;
    gap: 6px;
}
.wa-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 9px;
    background: #ece6db;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}
.wa-back {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #111b21;
    font-size: 15px;
    font-weight: 600;
}
.wa-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #123d26;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
}
.wa-avatar img {
    /* The mark is a tree over a "TREE HOUSE" wordmark, so its visual mass sits low.
       Smaller than the circle and nudged up a hair so it reads as optically centred
       rather than geometrically centred. */
    width: 62%;
    height: 62%;
    object-fit: contain;
    transform: translateY(-1.5px);
    filter: brightness(0) invert(1);
    opacity: 0.96;
}
.wa-header-meta {
    flex: 1;
    min-width: 0;
}
.wa-title-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.wa-title {
    font-size: 14.5px;
    font-weight: 800;
    color: #111b21;
    white-space: nowrap;
}
.wa-subtitle {
    font-size: 11px;
    color: #667781;
    margin-top: -1px;
}
.wa-body {
    flex: 1;
    min-height: 0;
    position: relative;
    background-color: #e7dfd3;
    background-image: url('/uploads/wa-chat-pattern.webp');
    background-size: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    /* No padding at the top: messages have to slide up and disappear straight under
       the lighter header strip. Any top padding leaves a band of chat wallpaper
       above the clip line, which reads as a gap. */
    padding: 0 12px;
    /* keeps the newest card clear of the crop line */
    padding-bottom: max(28px, calc(var(--wa-cut) / var(--wa-scale) - 45px));
    overflow: hidden;
}
.wa-viewport {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}
.wa-stack {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 100%;
}
.wa-item {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 100%;
    flex: 0 0 auto;
}
.wa-labels {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    width: 100%;
}
.wa-daychip {
    background: #fff;
    color: #54656f;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 13px;
    border-radius: 11px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.wa-notice {
    background: #ddfced;
    color: #1f2c34;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    padding: 8px 14px;
    border-radius: 10px;
    max-width: 250px;
}
.wa-notice b {
    font-weight: 800;
}
/* text-align: left because the section around it is centred and the bubbles were
   inheriting that - a chat message centred inside its own bubble reads as broken.
   The day chip and the official-account notice stay centred, they are not messages. */
.wa-card {
    width: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1.5px 2px rgba(11, 20, 26, 0.14);
    overflow: hidden;
    text-align: left;
}
.wa-card-inner {
    padding: 7px 9px;
}
.wa-sender {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}
.wa-sender span {
    font-size: 13.5px;
    font-weight: 800;
    color: #111b21;
}
.wa-media {
    width: 100%;
    aspect-ratio: 1.6;
    border-radius: 7px;
    overflow: hidden;
    background: #d9d0c2;
}
.wa-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wa-text {
    margin-top: 7px;
    font-size: 14px;
    line-height: 1.3;
    color: #111b21;
    font-weight: 400;
}
.wa-card-title {
    font-weight: 800;
    margin-bottom: 2px;
    font-size: 15px;
}
.wa-strong {
    font-weight: 700;
}
.wa-time {
    text-align: right;
    font-size: 10.5px;
    color: #8696a0;
    margin-top: 4px;
}
.wa-divider {
    height: 1px;
    background: rgba(11, 20, 26, 0.09);
}
.wa-cta {
    text-align: center;
    color: #2e8b57;
    font-weight: 700;
    font-size: 14.5px;
    padding: 11px;
}
.wa-typing {
    align-self: flex-start;
    background: #fff;
    border-radius: 14px 14px 14px 4px;
    box-shadow: 0 1.5px 2px rgba(11, 20, 26, 0.12);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}
.wa-typing i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9aa7ae;
    display: block;
    animation: waDotPulse 1.2s infinite;
}
.wa-typing i:nth-child(2) {
    animation-delay: 0.18s;
}
.wa-typing i:nth-child(3) {
    animation-delay: 0.36s;
}
@keyframes waDotPulse {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
    30% { transform: translateY(-4px); opacity: 1; }
}
.wa-composer {
    flex: 0 0 auto;
    height: 54px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: #ece6db;
}
.wa-input {
    flex: 1;
    height: 38px;
    background: #fff;
    border-radius: 19px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    color: #8696a0;
    font-size: 14px;
}
/* Bezel overlay: transparent screen aperture, drawn on top of the chat. No shadow
   anywhere on the frame - explicit design requirement.
   Qualified with .wa-root because the section still carries the old static-mockup
   rule `.whatsapp-promo-media img { height: 520px; width: auto }`, which outranks a
   lone .wa-frame and squashes the bezel out of alignment with the screen. */
.wa-root .wa-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: fill;
    pointer-events: none;
    z-index: 5;
}
.whatsapp-promo-media .wa-root {
    flex-shrink: 0;
}
/* Matches the height the static mockup used to occupy (420px), so the section
   does not change height on tablets/phones either. */
@media (max-width: 900px) {
    .wa-root {
        --wa-scale: 0.77;
        --wa-cut: 120px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .wa-stack {
        transition: none !important;
    }
    .wa-typing i {
        animation: none;
        opacity: 0.5;
    }
}
/* ---------- End WhatsApp chat animation --------- */

/* ---------- Start story panel slides ----------
   Card layout used by story slides that carry a title: section label + icon on
   top, a boxed sketch in the middle, then the slide counter, headline and copy.
   Light and on-brand rather than the dark theme the earlier slides used. */
.story-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    /* .story-slide-inner sets align-items: center, which shrink-wraps the label
       row and centres it - stretch keeps every row full width and left aligned. */
    align-items: stretch;
    height: 100%;
    box-sizing: border-box;
    /* Roughly double the original 34px/26px of breathing room above the label and
       below the copy - the card felt cramped top and bottom. */
    padding: 68px 22px 52px;
    text-align: left;
    color: #4B5563;
}
.story-panel-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex: 0 0 auto;
}
/* Deliberately identical to .story-feature-eyebrow, the header on the section box
   that opens this card: a 26px circle holding a 14px white glyph, then the label in
   the accent colour. The card used to show a rounded square and a grey label, so the
   two headers looked like different components. */
.story-panel-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--story-accent, #369AFE);
    border: none;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.story-panel-icon svg {
    width: 14px;
    height: 14px;
}
.story-panel-label {
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--story-accent, #369AFE);
}
.story-panel-figure {
    /* Sized to the sketch's own proportions and capped, rather than stretching to
       fill the card - a flexible box left big empty bands around the artwork. The
       copy below is pushed to the bottom with margin-top: auto. */
    flex: 0 1 auto;
    aspect-ratio: 320 / 260;
    max-height: 54%;
    min-height: 0;
    /* auto block margins centre the figure in whatever room is left between the
       label and the copy, so tall phones do not leave one big gap under it */
    margin: auto 0;
    background: #FFFFFF;
    border: 1px solid #E3EAF3;
    border-radius: 18px;
    box-shadow: 0 12px 30px -18px rgba(31, 42, 55, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    overflow: hidden;
}
.story-panel-figure img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    display: block;
}
.story-panel-bottom {
    flex: 0 0 auto;
    margin-top: 22px;
}
.story-panel-count {
    display: block;
    font-size: 0.95em;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--story-accent, #369AFE);
    margin-bottom: 8px;
}
/* #4B5563 is the grey the homepage uses for every main heading, including the h3 in
   the section box this card opens from. The accent stays on the label and the counter. */
.story-panel .story-panel-title {
    font-size: 1.9em;
    line-height: 1.18em;
    font-weight: 800;
    color: #4B5563;
    margin: 0 0 10px;
}
.story-panel .story-panel-text {
    font-size: 1.06em;
    line-height: 1.5em;
    color: #6B7280;
    margin: 0;
}
/* ---------- End story panel slides --------- */

/* ---------- Start story topic flash ----------
   Shown for ~1.1s when tapping crosses from one story into the next, so the change
   of topic registers. Never intercepts taps - the tap zones sit underneath it. */
/* A soft wash in the colour of the story being entered, in the same spirit as the
   hero tiles: a light tint of the accent over white rather than a saturated slab. It
   still has to be fully opaque - a translucent version let the slides underneath show
   through and stay tappable - so the tint is layered over a solid white base.
   --story-accent is already switched to the new story when the flash is triggered. */
.story-topic-flash {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 0 28px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background:
                radial-gradient(circle at 50% 38%, var(--story-accent-tint, rgba(54, 154, 254, 0.10)) 0%, rgba(255, 255, 255, 0) 62%),
                linear-gradient(180deg, var(--story-accent-soft, rgba(54, 154, 254, 0.42)) 0%, rgba(255, 255, 255, 0) 78%),
                #FFFFFF;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.story-topic-flash.is-visible {
    opacity: 1;
    visibility: visible;
    /* Takes the tap itself so nothing underneath can be hit while it is up. */
    pointer-events: auto;
    transition: opacity 0.2s ease, visibility 0s;
}
/* Accent-filled circle with a white glyph, the same shape as the card header. The
   wash behind it is light now, so a white icon and white text would disappear. */
.story-topic-flash-icon {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--story-accent, #369AFE);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    flex: 0 0 auto;
}
.story-topic-flash-icon svg {
    width: 38px;
    height: 38px;
}
.story-topic-flash-label {
    font-size: 2.2em;
    font-weight: 800;
    line-height: 1.15em;
    letter-spacing: -0.01em;
    color: var(--story-accent, #369AFE);
}
.story-topic-flash-icon,
.story-topic-flash-label {
    transform: translateY(10px) scale(0.96);
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.story-topic-flash.is-visible .story-topic-flash-icon,
.story-topic-flash.is-visible .story-topic-flash-label {
    transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
    .story-topic-flash-icon,
    .story-topic-flash-label,
    .story-topic-flash.is-visible .story-topic-flash-icon,
    .story-topic-flash.is-visible .story-topic-flash-label {
        transform: none;
        transition: none;
    }
}
/* ---------- End story topic flash --------- */

/* ---------- Start case study slides ----------
   The slides are the designer's exported story cards, 1080x2160 images, so the card
   itself is shaped to that ratio and the image simply fills it. Nothing here styles
   type or colour any more - the artwork carries all of it, which is why the whole
   per-client theming block that used to live here is gone. */
/* Card and dialog intentionally keep the same size as every other story here
   (min(420px,100%) / min(90vh,780px), set on the base .story-viewer-card /
   .story-viewer-dialog rules) - a card sized to the artwork's own 1:2 ratio
   read as a giant, full-screen overlay next to the others. object-fit: contain
   on .story-case img (below) keeps the artwork uncropped inside this shared
   card size instead. */
.story-viewer[data-story-kind="case"] .story-viewer-dialog,
.story-viewer[data-story-artwork="true"] .story-viewer-dialog {
    padding: 0;
    background: #0C1825;
    overflow: hidden;
}
/* Desktop/tablet only (phones already get their own tighter-budget version
   above, @media max-width: 500px). The base .story-viewer-card/-dialog size
   width and height independently (min(420px,100%) / min(90vh,780px)), which
   only equals the artwork's 1163x2160 ratio when the viewport is tall enough
   for the 780px cap to actually apply. On a shorter window/screen - a laptop
   with browser chrome eating into vh, for instance - min(90vh,780px) drops
   below 780 while the width stays pinned at 420px, so object-fit: contain
   (.story-case img) had to letterbox the artwork with visible side margins.
   Deriving width from whichever budget (the 420px cap or the height budget
   converted through the ratio) is tighter, then letting height follow from
   aspect-ratio, keeps the box exactly artwork-shaped on every screen instead
   of just the tall ones - same fix already used for phones below. */
@media (min-width: 501px) {
    .story-viewer[data-story-kind="case"] .story-viewer-card,
    .story-viewer[data-story-artwork="true"] .story-viewer-card {
        width: min(420px, 100%, calc(min(80vh, 780px) * 1163 / 2160));
        height: auto;
        aspect-ratio: 1163 / 2160;
    }
    .story-viewer[data-story-kind="case"] .story-viewer-dialog,
    .story-viewer[data-story-artwork="true"] .story-viewer-dialog {
        width: 100%;
        height: 100%;
        max-width: none;
    }
}
.story-case {
    width: 100%;
    height: 100%;
    padding: 0;
    /* Clips the oversized img below at this box's own edge, before it ever
       reaches .story-slide (a scrollable ancestor - overflow-y: auto) - oversizing
       without a clip scoped this close made .story-slide see genuine overflow and
       show real browser scrollbars instead of nothing. */
    overflow: hidden;
}
/* <picture> is inline by default and has no size of its own, so the img's
   width/height: 100% below had nothing definite to resolve against - this is
   what actually let the image render at a slightly wrong/unscaled size and
   leave a gap on one edge, not the object-fit mode. */
.story-case picture {
    display: block;
    width: 100%;
    height: 100%;
}
/* contain, not cover: the box ratio (min(420px,100%) / min(90vh,780px)) only
   approximates the artwork's 1080x2160 ratio, and on real phones the gap
   between the two is large enough that cover was cropping a visible chunk off
   the top/bottom of the artwork instead of a hairline sliver. contain always
   shows the full image, letterboxed on whichever edge doesn't match instead of
   cropping it. Tried switching this to cover (paired with a full-inset,
   non-ratio-matched card) to close a gap that only ever showed up on an
   extreme, unrealistic viewport - reverted immediately, because these cards
   carry the designer's own text baked into the artwork near its edges, and
   cover cropped that text on perfectly ordinary phone widths instead. */
.story-case img {
    /* 100.5%, not 100%: object-fit: contain sizes to the box's ratio exactly, and
       when the artwork's own exported ratio is a hair off 1080/2160, that leaves a
       fractional-pixel gap on one edge where the dialog's own background - lighter
       than the artwork on some stories - shows through as a stray line. Oversizing
       slightly and relying on .story-viewer-dialog's overflow: hidden to crop it
       trades an imperceptible sliver of artwork for guaranteeing no gap. */
    width: 100.5%;
    height: 100.5%;
    margin: -0.25%;
    max-width: none;
    object-fit: contain;
    display: block;
}
/* Sits over the artwork, so it is white on a translucent white track rather than
   taking a colour from the card. */
.story-viewer[data-story-kind="case"] .story-progress-segment,
.story-viewer[data-story-artwork="true"] .story-progress-segment {
    background: rgba(255, 255, 255, 0.3);
}
.story-viewer[data-story-kind="case"] .story-progress-fill,
.story-viewer[data-story-kind="case"] .story-progress-segment.done .story-progress-fill,
.story-viewer[data-story-artwork="true"] .story-progress-fill,
.story-viewer[data-story-artwork="true"] .story-progress-segment.done .story-progress-fill {
    background: #FFFFFF;
}
/* White-on-white is invisible against a light-topped artwork card - scripts.js
   samples the pixels the bar actually overlaps and adds this class per active
   slide, flipping the bar to navy. Qualified with .story-viewer to outrank the
   two rules above at equal class-count, since they'd otherwise tie and lose on
   source order alone. */
.story-viewer .story-progress.progress-on-light-slide .story-progress-segment {
    background: rgba(30, 41, 59, 0.1);
}
.story-viewer .story-progress.progress-on-light-slide .story-progress-fill,
.story-viewer .story-progress.progress-on-light-slide .story-progress-segment.done .story-progress-fill {
    background: rgba(30, 41, 59, 0.4);
}
/* ---------- End case study slides --------- */

/* One accent per case study, feeding the "Read the whole story" end card - picked
   by eye from that client's own cover photo (case-*-01.webp) rather than the
   generic results-carousel index colour, so the card reads as belonging to that
   specific story's own photography: Urban Baristas' teal awning, Pro's Cafe's red
   umbrella, Penida Colada's sunset, Malecón's sky, Jockey Plaza's magenta label,
   Belmonte's warm gold. */
.story-viewer[data-story-key="case_urban"] { --story-accent: #1CADB5; }
.story-viewer[data-story-key="case_pros"] { --story-accent: #4E7487; }
.story-viewer[data-story-key="case_penida"] { --story-accent: #E58A57; }
.story-viewer[data-story-key="case_malecon"] { --story-accent: #3E7CB1; }
.story-viewer[data-story-key="case_jockey"] { --story-accent: #E0357F; }
.story-viewer[data-story-key="case_belmonte"] { --story-accent: #B98A4E; }
/* Same six, redeclared on the group itself rather than only the viewer. The
   viewer's data-story-key flips to the incoming story as soon as a crossing
   starts, before the 0.35s slide transition finishes - with only the rule
   above, the outgoing card (still on screen, mid-slide-out) briefly repainted
   in the next story's colour instead of its own. A custom property resolves
   from the nearest ancestor that sets it, so scoping it here too means each
   .story-group's own content (the "Read the whole story" card) always reads
   its own permanent key, never the viewer's currently-active one. */
.story-group[data-story-key="case_urban"] { --story-accent: #1CADB5; }
.story-group[data-story-key="case_pros"] { --story-accent: #4E7487; }
.story-group[data-story-key="case_penida"] { --story-accent: #E58A57; }
.story-group[data-story-key="case_malecon"] { --story-accent: #3E7CB1; }
.story-group[data-story-key="case_jockey"] { --story-accent: #E0357F; }
.story-group[data-story-key="case_belmonte"] { --story-accent: #B98A4E; }

/* Accent per story, consumed by the panel icon and the slide counter. */
.story-viewer[data-story-key="data"] {
    --story-accent: #1E9E77;
    --story-accent-soft: rgba(30, 158, 119, 0.42);
    --story-accent-tint: rgba(30, 158, 119, 0.10);
}
.story-viewer[data-story-key="reviews"] {
    --story-accent: #D98B06;
    --story-accent-soft: rgba(217, 139, 6, 0.42);
    --story-accent-tint: rgba(217, 139, 6, 0.10);
}
.story-viewer[data-story-key="email"] {
    --story-accent: #369AFE;
    --story-accent-soft: rgba(54, 154, 254, 0.42);
    --story-accent-tint: rgba(54, 154, 254, 0.10);
}
.story-viewer[data-story-key="loyalty"] {
    --story-accent: #DE5F97;
    --story-accent-soft: rgba(222, 95, 151, 0.42);
    --story-accent-tint: rgba(222, 95, 151, 0.10);
}
.story-viewer[data-story-key="complaints"] {
    --story-accent: #6D5BC7;
    --story-accent-soft: rgba(109, 91, 199, 0.42);
    --story-accent-tint: rgba(109, 91, 199, 0.10);
}
.story-viewer[data-story-key="ad_delivery"] {
    --story-accent: #0E86B8;
    --story-accent-soft: rgba(14, 134, 184, 0.42);
    --story-accent-tint: rgba(14, 134, 184, 0.10);
}
/* Opened from a "See how Social WiFi works" box rather than a hero tile, the card
   leads with that box's colour. The same story is green in the hero rail but blue in
   the section, and the card has to agree with whichever one was tapped. data-origin
   is set in scripts.js. */
.story-viewer[data-origin="section"][data-story-key="data"] {
    --story-accent: #2775F0;
    --story-accent-soft: rgba(39, 117, 240, 0.42);
    --story-accent-tint: rgba(39, 117, 240, 0.10);
}
.story-viewer[data-origin="section"][data-story-key="reviews"] {
    --story-accent: #F2A310;
    --story-accent-soft: rgba(242, 163, 16, 0.42);
    --story-accent-tint: rgba(242, 163, 16, 0.10);
}
.story-viewer[data-origin="section"][data-story-key="email"] {
    --story-accent: #8B6FE8;
    --story-accent-soft: rgba(139, 111, 232, 0.42);
    --story-accent-tint: rgba(139, 111, 232, 0.10);
}
.story-viewer[data-origin="section"][data-story-key="data"] .story-viewer-dialog {
    background:
                radial-gradient(circle at 86% 8%, rgba(39, 117, 240, 0.13) 0%, rgba(39, 117, 240, 0) 48%),
                linear-gradient(180deg, #CBE0FF 0%, #EDF4FF 48%, #FFFFFF 100%);
}
.story-viewer[data-origin="section"][data-story-key="reviews"] .story-viewer-dialog {
    background:
                radial-gradient(circle at 86% 8%, rgba(242, 163, 16, 0.13) 0%, rgba(242, 163, 16, 0) 48%),
                linear-gradient(180deg, #FFE7BC 0%, #FFF7EA 48%, #FFFFFF 100%);
}
.story-viewer[data-origin="section"][data-story-key="email"] .story-viewer-dialog {
    background:
                radial-gradient(circle at 86% 8%, rgba(139, 111, 232, 0.13) 0%, rgba(139, 111, 232, 0) 48%),
                linear-gradient(180deg, #DCD3FA 0%, #F2EEFF 48%, #FFFFFF 100%);
}



/* Card design shared by phones and desktop: only slides that have a built-out
   panel are shown, and the card takes a light tint of the accent of the tile it
   was opened from (data-story-key is set in scripts.js). */
/* Panel slides are the built-out card layout, so they show. The older
   placeholder slide types stay hidden until their copy is written. */
.story-viewer-dialog .story-slide:not(.story-slide-has-panel) .story-slide-inner {
    display: none;
}
/* Each card takes the accent of the tile it opened from (data-story-key is set
   in scripts.js from the active .story-group). Stories whose panels are built
   out use a light tint of that accent; the ones still awaiting copy keep the
   solid mid-tone so they do not read as blank white cards. */
.story-viewer[data-story-key="data"] .story-viewer-dialog {
    background:
                radial-gradient(circle at 86% 8%, rgba(30, 158, 119, 0.13) 0%, rgba(30, 158, 119, 0) 48%),
                linear-gradient(180deg, #BFEBDC 0%, #ECF9F4 48%, #FFFFFF 100%);
}
.story-viewer[data-story-key="reviews"] .story-viewer-dialog {
    background:
                radial-gradient(circle at 86% 8%, rgba(217, 139, 6, 0.13) 0%, rgba(217, 139, 6, 0) 48%),
                linear-gradient(180deg, #FFE1AE 0%, #FFF6E6 48%, #FFFFFF 100%);
}
.story-viewer[data-story-key="email"] .story-viewer-dialog {
    background:
                radial-gradient(circle at 86% 8%, rgba(54, 154, 254, 0.13) 0%, rgba(54, 154, 254, 0) 48%),
                linear-gradient(180deg, #CBE4FF 0%, #EDF5FF 48%, #FFFFFF 100%);
}
.story-viewer[data-story-key="loyalty"] .story-viewer-dialog {
    background:
                radial-gradient(circle at 86% 8%, rgba(222, 95, 151, 0.13) 0%, rgba(222, 95, 151, 0) 48%),
                linear-gradient(180deg, #FBD0E4 0%, #FFF0F6 48%, #FFFFFF 100%);
}
.story-viewer[data-story-key="complaints"] .story-viewer-dialog {
    background:
                radial-gradient(circle at 86% 8%, rgba(109, 91, 199, 0.13) 0%, rgba(109, 91, 199, 0) 48%),
                linear-gradient(180deg, #D6CBF6 0%, #F2EEFF 48%, #FFFFFF 100%);
}
.story-viewer[data-story-key="ad_delivery"] .story-viewer-dialog {
    background:
                radial-gradient(circle at 86% 8%, rgba(14, 134, 184, 0.13) 0%, rgba(14, 134, 184, 0) 48%),
                linear-gradient(180deg, #BFE3F6 0%, #ECF7FC 48%, #FFFFFF 100%);
}

/* The phone-only recolouring that used to live here is gone: it targeted
   .story-feature, which carries background: none on phones (the panel inside holds
   the background), so those gradients never applied, and the container's ring is
   display: none there too. Only the eyebrow and icon actually changed colour, which
   left Data Gathering green on phones and blue on desktop. Phones now follow the
   desktop palette - blue, gold, violet - set on the panel further up the file. */


/* Optical sizing for the hero logo strip. Matching the height alone made wide
   wordmarks (The Istana at 6.3:1) look several times heavier than compact marks
   (Burger King at 0.9:1), so cap the width as well: wide logos are limited by
   width, compact ones by height, and a separate bucket lets the squarish marks
   run taller so they do not read as tiny. Smaller overall so the two rows have
   clear air between them. */
.dynamic .hero-gradient .c-hero_section .logo-item {
    height: 30px;
}
.dynamic .hero-gradient .c-hero_section .logo-item img {
    max-width: 118px;
    object-fit: contain;
}
.dynamic .hero-gradient .c-hero_section .logo-item-compact {
    height: 40px;
}
.dynamic .hero-gradient .c-hero_section .logo-item-compact img {
    max-width: 60px;
}
.dynamic .hero-gradient .c-hero_section .logos-track {
    gap: 52px;
}

/* The green WhatsApp band bleeds 20px past each side with negative margins, which
   makes the whole document scrollable sideways when its container has no matching
   padding. Clip it at the section instead. */
.dynamic-home {
    overflow-x: clip;
}


/* Both rows now carry the same number of logos, so one duration gives them the
   same apparent speed. */
.dynamic .hero-gradient .c-hero_section .logos-track {
    animation-duration: 58s;
}
/* Trimmed from the phone strip; hidden in both copies so the loop stays aligned. */
@media (max-width: 600px) {
    /* Phones show 7 logos in one row, so the strip is short and 58s would crawl. */
    .dynamic .hero-gradient .c-hero_section .logos-track {
        gap: 28px;
        animation-duration: 15s;
    }
}

/* ── Flat pricing badge ── */
.pricing-flat-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: fit-content;
    max-width: calc(100% - 40px);
    margin: 0 auto 100px;
    padding: 13px 28px;
    border-radius: 8px;
    border: 1px solid transparent;
    background:
        linear-gradient(90deg, #DCFCE7 0%, #ffffff 100%) padding-box,
        #22C55E border-box;
    will-change: transform;
    animation: pricing-flat-float 3.6s ease-in-out infinite;
}
.pricing-flat-badge span {
    color: #16A34A;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
}
@keyframes pricing-flat-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@media (max-width: 640px) {
    .pricing-flat-badge {
        margin-top: 0;
        margin-bottom: 49px;
        padding: 11px 20px;
        width: calc(100% - 50px);
        max-width: calc(100% - 50px);
        animation: none;
    }
    .pricing-flat-badge span { font-size: 14px; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .pricing-flat-badge { animation: none; }
}

/* ── Hero sub-headline points ── */
.pricing-header-points {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-top: 28px;
}
.pricing-header-point {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4A5568;
    font-size: 1em;
}
.pricing-header-point-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.pricing-h1-break {
    display: inline;
}
.p-mobile {
    display: none;
}
@media (max-width: 640px) {
    .pricing-h1-break {
        display: block;
    }
    .p-mobile {
        display: inline;
    }
    .p-desktop {
        display: none;
    }
}

/* ── Hero ── */
.pricing-hero {
    display: flex;
    flex-direction: column;
    gap: 35px;
}
@media (max-width: 1023px) {
    .pricing-hero {
        gap: 40px;
    }
    .pricing-hero .pricing-header2 {
        margin-bottom: 0;
    }
    .pricing-hero .simple-pricing {
        margin-top: 0;
        margin-bottom: 30px !important;
    }
}
@media (min-width: 1024px) {
    .pricing-hero {
        padding-top: 40px;
    }
    .pricing-hero .pricing-header2 {
        margin-top: 0;
        margin-bottom: 0;
    }
    .pricing-hero .simple-pricing {
        margin: 0 auto;
    }
}

/* ---------- Resellers / White Label partnership pages ----------
   Bringing these two pages in line with the redesigned homepage: the same
   grey body text (#4B5563, see the comment near .story-panel-title above),
   the homepage's hero headline size, and the homepage's "See how Social
   WiFi works" gradient behind the dark box that sits right under the hero.
   Scoped to .reseller-page/.white-label-page (set via page_class in each
   page's front matter) so it never touches any other page that reuses
   dynamic_new_widget_list.liquid. */
.reseller-page,
.white-label-page {
    color: #4B5563;
}
.reseller-page .c-hero_section,
.white-label-page .c-hero_section {
    color: #4B5563;
}
/* Section intro header (see section_intro.eleventy.liquid) - same
   treatment as the homepage's "See how Social WiFi works" heading
   (.c-product_stories h2 / .see-how-wrap > p), just without that
   component's story-viewer machinery. */
.c-section_intro {
    text-align: center;
    max-width: 1180px;
    margin: 0 auto;
    /* Top padding matches .c-product_stories's own 70px top padding above
       its heading - this isn't that container itself, just its first
       child, but it's the first thing inside the same shared gradient
       (see the script in dynamic_new_widget_list.liquid), so this is
       where that breathing room has to live instead. */
    padding: 70px 20px 0;
    box-sizing: border-box;
}
.c-section_intro h2 {
    font-size: var(--h2-size);
    margin: 0 0 15px;
    color: #4B5563;
}
.c-section_intro h2 span {
    background: transparent linear-gradient(90deg, #369AFE 0%, #00fff8 100%) 0 0 no-repeat padding-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* A <br> that only breaks on phones - used in headlines that need a
   specific two-line split at mobile width but wrap fine on their own on
   desktop ("See How / Reselling Works", "Manage Clients from / One
   Dashboard"). Hidden from min-width up rather than restored downwards:
   a <br>'s line break is intrinsic to the element, so leaving it
   untouched at mobile is the reliable direction, and only desktop needs
   the override. */
@media (min-width: 601px) {
    .br-mobile-only {
        display: none;
    }
}
.c-section_intro p {
    font-size: 1.1em;
    /* Matches the homepage's own "See how Social WiFi works" subheadline
       (.c-product_stories p) - this had no line-height of its own, falling
       back to the browser default (normal, visibly tighter). */
    line-height: 1.5em;
    color: var(--secondary-text-color);
    /* Matches .see-how-wrap > p's own 45px gap before the cards start. */
    margin: 0 0 45px;
}
/* .c-section_intro h2 uses the flat, non-responsive --h2-size (2.5em/40px)
   everywhere, unlike every other heading on this page
   (.c-text_tiles_container h2, .c-showcase_image h2, the FAQ heading),
   which all drop to --mobile-header-size (30px) on phones - so this one
   read visibly larger than the rest of the page there. Brought in line
   with the others; section_intro is used only on these two pages (and
   their PL/ES versions), so this isn't scoped further. See the matching
   fix for .c-switch_checklist h2 further down, next to its own base rule -
   same reasoning, kept next to that rule instead of here so it doesn't
   lose the cascade to it (equal specificity, source order decides). */
@media (max-width: 600px) {
    .c-section_intro h2 {
        font-size: var(--mobile-header-size);
    }
}
/* The real culprit for both the hero and the gradient section below it not
   reaching the screen edges on wide screens: .dynamic.new-dynamic itself
   (see .new-dynamic above) caps out at max-width: 1920px with auto side
   margins - a page-wide rule, reasonable for body copy but not for a hero
   meant to split edge-to-edge, or for the gradient wash behind the feature
   story boxes (painted on this same wrapper's child, the content-blocks
   container - see the inline script in dynamic_new_widget_list.liquid).
   Removed here rather than patched per-section with the vw full-bleed
   trick (tried first on the hero alone - it works, but a vw-based width
   always fights the vertical scrollbar's width by a few px, whereas every
   block on this page already carries its own max-width - see
   .feature-story-box, .c-quote_box, .c-text_tiles_container .wrapper,
   .c-tiles-dark .c-tiles_container - so none of them actually need this
   outer cap to stay a sensible width once it's gone. */
.reseller-page.new-dynamic,
.white-label-page.new-dynamic {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
.reseller-page .c-hero_section.c-image-hero,
.white-label-page .c-hero_section.c-image-hero {
    max-width: none;
}
.reseller-page .c-hero_section.c-image-hero h1,
.white-label-page .c-hero_section.c-image-hero h1 {
    font-size: 4.5em;
}
/* Restores the shared ".c-hero_section h1" responsive shrink (3em at
   <=1100px, 2.8em at <=800px) - the desktop override above has higher
   specificity than that shared rule at every breakpoint (3 classes vs 1),
   so without a matching override here it kept winning even on mobile,
   leaving the headline stuck at the full desktop size. 2.8em matches
   socialwifi.com's own mobile hero h1 exactly. */
@media (max-width: 1100px) {
    .reseller-page .c-hero_section.c-image-hero h1,
    .white-label-page .c-hero_section.c-image-hero h1 {
        font-size: 3em;
    }
}
@media (max-width: 800px) {
    .reseller-page .c-hero_section.c-image-hero h1,
    .white-label-page .c-hero_section.c-image-hero h1 {
        font-size: 2.8em;
    }
}
/* The subheadline had no width limit of its own, so it ran the full content
   column width - much wider than the (short, two-line) headline above it,
   now that the hero is full-bleed and that column is wider than ever.
   Capped close to the headline's own rendered width instead. */
.reseller-page .c-hero_section.c-image-hero p,
.white-label-page .c-hero_section.c-image-hero p {
    max-width: 480px;
}
/* Matches socialwifi.com's own mobile hero subheadline size exactly (see
   "html[lang="en"] .dynamic-home .c-hero_section > p" at this same
   breakpoint) - the shared ".c-hero_section p" rule these pages fall back
   to otherwise uses the slightly smaller generic --mobile-text-size. */
@media (max-width: 600px) {
    .reseller-page .c-hero_section.c-image-hero p,
    .white-label-page .c-hero_section.c-image-hero p {
        font-size: 17.6px;
    }
}
/* "Trusted by..." in the same light grey as the logos below it, matching the
   homepage's own hero (.dynamic .hero-gradient .c-hero_section .logos, not
   reachable here since this hero variant doesn't carry .hero-gradient -
   see the earlier comment on the marquee CSS for why). Without this it fell
   back to the older, darker #333 general .logos rule. */
.reseller-page .c-hero_section .logos,
.white-label-page .c-hero_section .logos {
    color: #B0B6BF;
}
/* Double the shared ".dynamic .c-hero_section.c-image-hero .logos" rule's
   40px, just for these two pages - the gap above "Trusted by..." read as
   too tight next to the Contact us button. Needs .c-image-hero in the
   selector too (4 classes, matching that rule's own specificity) - without
   it this loses to that rule regardless of source order. */
.reseller-page .c-hero_section.c-image-hero .logos,
.white-label-page .c-hero_section.c-image-hero .logos {
    margin-top: 80px;
}
/* 40% smaller on mobile (80px -> 48px) - the button-to-"Trusted by" gap
   read as too wide next to everything else once the hero's own mobile
   sizing was fixed up. */
@media (max-width: 800px) {
    .reseller-page .c-hero_section.c-image-hero .logos,
    .white-label-page .c-hero_section.c-image-hero .logos {
        margin-top: 48px;
    }
}
/* The login-screen graphics (partials/graphic_login_socialwifi.liquid and
   graphic_login_drwifi.liquid) are sized by their own fit() script rather
   than from here: the artboard's top edge has to line up with the top of
   the hero headline while its cropped bottom edge stays on the hero's
   bottom edge, so its height is the distance between those two - and the
   scale, and so the width, follow from that height. Not expressible as a
   fixed value here because the content column is vertically centred
   (.side.content-side is align-items: center), so the headline's top moves
   with the hero's height and the text's own wrapping. The width below is
   only the pre-script starting value (about what the span works out to on
   a 1280x900 desktop), so the phone does not flash at its full 657px
   artboard width on the way in. flex: none because .hero-phone-graphic is
   a flex container and this width is exact. */
.hero-phone-graphic .sw-login-graphic,
.hero-phone-graphic .dr-login-graphic {
    width: 420px;
    flex: none;
}
/* The artboard is deliberately cropped at its own bottom edge, so that edge
   has to land exactly on the hero's - and .data, the box it sits in, is
   pinned at bottom: -8px by the shared rule (left over from this hero's
   original caption use), which pushed the crop 8px past the hero and let
   the phone screen bleed into the section below. Corrected on the box
   itself now rather than with a compensating margin on the graphic, since
   the graphic's own height is what the fit() script sets. */
.reseller-page .c-hero_section.c-image-hero .inner-image .data,
.white-label-page .c-hero_section.c-image-hero .inner-image .data {
    bottom: 0;
}
/* The login-screen artboards are drawn at fixed pixel sizes and scaled as a
   whole (see the partials), so the phone frame must render at its declared
   657x1356 - the artboard's own overflow: hidden is what crops it. This hero
   inherits several max-height caps on any img inside .data, though, meant for
   the photo/logo this slot originally held: 400px (.c-image-hero img), 650px
   (.side-image-only), 750px (.position-bottom, the one that applied here) and
   200px below 600px wide. A max-* clamp beats an inline height regardless of
   specificity - they are different properties - so the frame was being drawn
   657x750, 55% of its height: the casing closed mid-phone while the screen
   inside carried on to the crop, reading as a vertically squashed frame.
   !important rather than out-specifying them because every one of those caps
   is wrong here and they sit at up to 6 classes deep across three variants
   and a breakpoint; anything inside these artboards is sized by design. */
.hero-phone-graphic .sw-login-graphic img,
.hero-phone-graphic .dr-login-graphic img {
    max-width: none !important;
    max-height: none !important;
}
/* The logos marquee's track is intentionally much wider than the column it
   scrolls in (see .logos-marquee-left), clipped by its own overflow: hidden -
   but a CSS grid item's automatic minimum width is based on its content's
   min-content size, and without min-width: 0 here that huge intrinsic width
   was winning the argument: this column grew to fit it, the "1fr 1fr" split
   stopped being even, and the hero's right-hand photo column was squeezed
   to zero. min-width: 0 lets this column shrink to its actual 1fr share
   again, same as the standard flex/grid fix for this. */
.reseller-page .c-hero_section.c-image-hero .side.content-side,
.white-label-page .c-hero_section.c-image-hero .side.content-side {
    min-width: 0;
}
/* Same fix, one level deeper: .side.content-side (a grid item) is fixed by
   the rule above, but .inner (a flex item of .content-side, which is
   display: flex) has the identical automatic-minimum-size problem
   independently of its parent - fixing the grid item alone still left the
   marquee's huge intrinsic width forcing .inner itself to grow to fit it,
   which then dragged every block child inside .inner (h1, p, the buttons)
   out to that same oversized width along with it. */
.reseller-page .c-hero_section.c-image-hero .side.content-side .inner,
.white-label-page .c-hero_section.c-image-hero .side.content-side .inner {
    min-width: 0;
}
/* The two feature story boxes right under the hero and the stats tiles
   between them read as one continuous section, so instead of each of the
   three fading light-to-white on its own (which reads as three separate
   stripes), the stats tiles wrapper goes transparent here and a single
   gradient spanning their combined height is painted on their shared parent
   at runtime - see the inline script in dynamic_new_widget_list.liquid. The
   feature story boxes themselves keep their own accent background (see
   .feature-story-box below) and simply float on that shared gradient, the
   same way the homepage's story-feature cards float on .c-product_stories. */
.reseller-page .c-tiles-dark,
.white-label-page .c-tiles-dark {
    background: transparent;
    /* Breathing room above/below the stats tiles, between them and the
       feature story boxes either side - .c-tiles-dark is transparent (see
       above), so this gap still shows the shared gradient behind it rather
       than a plain break in it. */
    margin: 40px 0;
}
/* Crop shifted up the frame. background-position alone could not do it: the
   photo is a 3:2 landscape in a portrait column, so cover scales it to fit
   the column's height and crops the sides instead - the whole height of the
   photo was already on screen and there was no vertical slack left to
   move (measured: 0px). Over-scaling to 122% of the column height creates
   that slack, and anchoring at 0% spends all of it on the bottom of the
   photo, which is the dark, busy foreground of heads and tables; the warm
   ceiling and bar stay. Softness from the over-scale (the pipeline's
   1000px-wide webp drawn about 1.6x up) does not matter here - the photo
   is a blurred one to begin with: hero.image_path points at
   /uploads/hero-restaurant-interior-blurred.jpg, which is Pexels photo
   38055463 (peterdanthy) resized to 1000px and blurred with sharp at
   sigma 3.4. The blur is baked into the file rather than applied in CSS
   because every CSS blur here - filter and backdrop-filter alike, on the
   column, on .inner-image and on an oversized pseudo-element - left a dark
   hairline along the top edge of the column. Only the sharp original is
   not kept in the repo (src/uploads/ ships verbatim, and it was 2MB of
   nothing once unused); re-download it from Pexels to regenerate. */
.reseller-page .c-hero_section.c-image-hero .side.side-image,
.white-label-page .c-hero_section.c-image-hero .side.side-image {
    background-size: auto 122%;
    background-position: 50% 0;
}
/* The tint over this column's photo (hero.image_path), in the grey-blue
   family the "Branding and Domain" story box uses - #B4D2F0 and #7FB2E5 in
   its own outline, #5A94D6 in its button (see
   .feature-story-box-color-skyblue below) - rather than the navy it started
   out as. Lightest at the top, where the photo shows through most,
   stepping down the same hue to a darker shade at the bottom so the
   phone's own screen stays the brightest thing in the column.

   On .inner-image rather than .side-image because the photo is painted by
   an inline background-image on .side-image
   (hero_image_section.eleventy.liquid), and a stylesheet rule cannot layer
   anything over an inline declaration of the same property - so the tint
   needs an element of its own, and .inner-image is the child that already
   covers the whole column (height: 100%). It also replaces what that
   element's base rule paints, a dark bottom-to-top overlay meant to keep
   caption text legible over a photo. */
.reseller-page .c-hero_section.c-image-hero .inner-image,
.white-label-page .c-hero_section.c-image-hero .inner-image {
    background: linear-gradient(180deg, rgba(180, 210, 240, 0.32) 0%, rgba(127, 178, 229, 0.50) 45%, rgba(63, 106, 150, 0.78) 100%);
}
/* Below 1200px the shared rule hides this whole column (.dynamic
   .c-image-hero .side-image), which is right for the heroes that put a
   photo there and nothing else - but these two carry the login-screen
   mockup, which is the point of the section, so on these pages it stays and
   stacks underneath the content column instead (the hero grid is already
   1fr at this width, and .side-image comes after .content-side in the
   markup, so it lands right below the logo marquee on its own). */
@media (max-width: 1200px) {
    .reseller-page .c-hero_section.c-image-hero .side.side-image,
    .white-label-page .c-hero_section.c-image-hero .side.side-image {
        display: block;
        /* Same automatic-minimum-size fix as .side.content-side further up,
           now that this grid item is shown here too. Its content's
           min-content width is the phone's capped width plus the margins
           either side (420 + 88 = 508px), and a grid item's automatic
           minimum is that, not zero - so the 1fr track grew to 508px, the
           whole hero with it, and anything narrower than that scrolled
           sideways with the headline and text clipped. min-width: 0 lets
           the column shrink to the viewport, which is also what the phone
           is then measured from. */
        min-width: 0;
    }
    /* Back in flow, where on desktop it is absolutely positioned against
       the photo column. Stacked, the column has no height of its own to be
       positioned inside - putting .data in flow makes the graphic's height
       the column's height, which both gives the photo somewhere to be
       painted and lands the artboard's cropped bottom edge exactly on the
       hero's bottom edge, which is where the "See How ... Works" section's
       background starts. */
    .reseller-page .c-hero_section.c-image-hero .inner-image .data,
    .white-label-page .c-hero_section.c-image-hero .inner-image .data {
        position: relative;
        bottom: auto;
        /* The phone is sized from the width its container gives it, so this
           padding is what holds it off the screen edges and sets how much
           photo shows around it: a band above, and a margin down both sides
           so the phone is narrower than the viewport. The shared rule sets
           width: 100% here, and this box is content-box, so width has to go
           back to auto or the padding would be added outside that 100% and
           push the column 88px wider than its own parent. */
        width: auto;
        padding: 90px 44px 0;
        /* Caps the phone itself, since the container's width is what it is
           measured from: without this it would grow with the viewport, fine
           on a phone but absurd just under the 1200px breakpoint, where it
           would jump from ~470px in the desktop layout to the full 1199px.
           Applies to the content box (content-box, as above), so the phone
           tops out at 420px and the auto margins centre it, leaving the
           photo either side. */
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
    /* A white fade over the top of the photo, on top of the navy tint (see
       the rule above for why both layers live here). Nothing paints a
       background anywhere above this column at this width - the hero, the
       section and every wrapper up to html are transparent - so the photo
       is fading into the canvas's own white, and #FFFFFF is exactly the
       colour to fade from rather than an approximation of one.

       Mixed units on purpose. The first stretch is solid white and given
       in pixels - 90px, the same value as the band above the phone - so it
       holds full white from the top edge down to exactly the phone's top,
       at every viewport width; a percentage would drift, since the band is
       a fixed 90px while the column's height changes with the width (the
       phone is sized from the width available, so the band is anywhere
       from about 11% to 16% of the column). Only past that does the white
       start to give way, on a long tail that clears at 90% of the column,
       so the photo comes out of the white slowly down the sides of the
       phone - which is where those side strips are the only place the
       gradient is actually visible, the rest of it sitting behind the
       phone itself. */
    .reseller-page .c-hero_section.c-image-hero .inner-image,
    .white-label-page .c-hero_section.c-image-hero .inner-image {
        background:
            linear-gradient(180deg, #FFFFFF 0px, #FFFFFF 90px, rgba(255, 255, 255, 0.5) 55%, rgba(255, 255, 255, 0) 100%),
            linear-gradient(180deg, rgba(180, 210, 240, 0.32) 0%, rgba(127, 178, 229, 0.50) 45%, rgba(63, 106, 150, 0.78) 100%);
    }
    /* Pre-script width (the script then sets the exact pixel value - see
       the partials): the desktop starting value of 420px would overflow a
       phone-width column on the way in. */
    .hero-phone-graphic .sw-login-graphic,
    .hero-phone-graphic .dr-login-graphic {
        width: 100%;
    }
}
/* Same animated WiFi-login phone used by the feature_story_box's "data"
   accent (see .fsb-media), reused here in the hero's image column. That
   component's own phone-positioning CSS assumes an ancestor with
   position: relative and a fixed min-height (.fsb-media) - this hero has
   neither (.data is position: absolute with no intrinsic height), so it
   gets its own equivalent wrapper here instead of relying on that CSS. */
.reseller-page .c-hero_section.c-image-hero .hero-phone-graphic,
.white-label-page .c-hero_section.c-image-hero .hero-phone-graphic {
    position: relative;
    width: 100%;
    min-height: 500px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.reseller-page .c-hero_section.c-image-hero .hero-phone-graphic .wifi-phone,
.white-label-page .c-hero_section.c-image-hero .hero-phone-graphic .wifi-phone {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    flex: none;
}
/* Same porting as .fsb-media above (see that comment) - the phone's photo,
   frame and logo size themselves through a .story-feature-media ancestor
   that doesn't exist here either. */
.reseller-page .c-hero_section.c-image-hero .hero-phone-graphic .wifi-phone .wifi-phone-shot,
.white-label-page .c-hero_section.c-image-hero .hero-phone-graphic .wifi-phone .wifi-phone-shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    object-fit: cover;
    display: block;
}
.reseller-page .c-hero_section.c-image-hero .hero-phone-graphic .wifi-phone .wifi-phone-frame,
.white-label-page .c-hero_section.c-image-hero .hero-phone-graphic .wifi-phone .wifi-phone-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    object-fit: fill;
    pointer-events: none;
    z-index: 5;
}
.reseller-page .c-hero_section.c-image-hero .hero-phone-graphic .wifi-phone .wifi-phone-logo,
.white-label-page .c-hero_section.c-image-hero .hero-phone-graphic .wifi-phone .wifi-phone-logo {
    width: 104px;
    height: auto;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    display: block;
}
/* The stats tiles (820M+, 8,000+, ...) share the same dark navy gradient
   as the "Manage Clients from One Dashboard" banner further down this page
   (.c-showcase_image) - white number/label text to match. */
.reseller-page .c-tiles-dark,
.white-label-page .c-tiles-dark {
    color: #FFFFFF;
}
/* Each tile keeps its own separate background (and the gaps between them
   stay plain page background, not part of any shared fill) - but each
   one's own 2-stop slice is sampled from the exact same position it'd sit
   at within the .c-showcase_image banner's single sweep
   (120deg, #193147 0% -> #2C5578 60% -> #3C6D95 100%), at that tile's own
   left/right edges within the row. Four independent gradients that happen
   to line up into what reads as one continuous sweep across the row,
   without literally joining the tiles into one piece. */
.reseller-page .c-tiles-dark .c-tiles_container .c-tile,
.white-label-page .c-tiles-dark .c-tiles_container .c-tile {
    border: 1.5px solid var(--tile-accent);
    box-shadow: 0 10px 24px -14px rgba(20, 40, 80, 0.35);
    color: #FFFFFF;
    --tile-accent: #369AFE;
    --tile-tint: #E5F2FF;
    --tile-tint-soft: #F5FAFF;
}
/* --tile-accent/--tile-tint here also drive the straddling icon circle
   below (.tile-icon) - set per tile to that tile's own lighter gradient
   stop, so each icon badge's border/glyph colour tracks its own tile's
   shade instead of a single accent used identically by all four. */
.reseller-page .c-tiles-dark .c-tiles_container .c-tile:nth-child(1),
.white-label-page .c-tiles-dark .c-tiles_container .c-tile:nth-child(1) {
    background: linear-gradient(120deg, #193147 0%, #203F5A 100%);
    --tile-accent: #203F5A;
    --tile-tint: #E9ECEF;
}
.reseller-page .c-tiles-dark .c-tiles_container .c-tile:nth-child(2),
.white-label-page .c-tiles-dark .c-tiles_container .c-tile:nth-child(2) {
    background: linear-gradient(120deg, #21405C 0%, #284E6F 100%);
    --tile-accent: #284E6F;
    --tile-tint: #EAEDF1;
}
.reseller-page .c-tiles-dark .c-tiles_container .c-tile:nth-child(3),
.white-label-page .c-tiles-dark .c-tiles_container .c-tile:nth-child(3) {
    background: linear-gradient(120deg, #29506F 0%, #325E83 100%);
    --tile-accent: #325E83;
    --tile-tint: #EBEFF3;
}
.reseller-page .c-tiles-dark .c-tiles_container .c-tile:nth-child(4),
.white-label-page .c-tiles-dark .c-tiles_container .c-tile:nth-child(4) {
    background: linear-gradient(120deg, #335F84 0%, #3C6D95 100%);
    --tile-accent: #3C6D95;
    --tile-tint: #ECF0F4;
}
/* Matches the 1180px the feature story boxes above/below are constrained to
   (see .feature-story-box) - this container defaults to var(--max-width),
   1300px, which read visibly wider than the boxes around it. Tiles shrink
   a bit too (smaller padding, smaller stat number) rather than just spacing
   out more within the narrower row. */
.reseller-page .c-tiles-dark .c-tiles_container,
.white-label-page .c-tiles-dark .c-tiles_container {
    max-width: 1180px;
    grid-column-gap: 24px;
}
.reseller-page .c-tiles-dark .c-tiles_container .c-tile,
.white-label-page .c-tiles-dark .c-tiles_container .c-tile {
    position: relative;
    padding: 40px 16px 24px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.reseller-page .c-tiles-dark .c-tiles_container .c-tile:hover,
.white-label-page .c-tiles-dark .c-tiles_container .c-tile:hover {
    transform: scale(1.04);
    box-shadow: 0 10px 22px -10px rgba(20, 40, 80, 0.25);
}
.reseller-page .c-tiles-dark .c-tiles_container .c-tile h3,
.white-label-page .c-tiles-dark .c-tiles_container .c-tile h3 {
    font-size: 2.6em;
}
/* Same circular icon badge as the "Why Social WiFi?" tiles further down
   (see .tile-icon there) - one flat accent colour here rather than that
   section's per-column cycle, since these four are a single trust-stats
   row, not a themed feature grid. */
.reseller-page .c-tiles-dark .c-tiles_container .tile-icon,
.white-label-page .c-tiles-dark .c-tiles_container .tile-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* White reached by 55%, not 100% - the tinted end otherwise dominated
       more of the circle than intended, reading as more colour than
       white. */
    background: linear-gradient(135deg, var(--tile-tint) 0%, #FFFFFF 55%);
    border: 1.5px solid var(--tile-accent);
    box-shadow: 0 8px 18px -10px rgba(20, 40, 80, 0.35);
}
.reseller-page .c-tiles-dark .c-tiles_container .tile-icon::before,
.white-label-page .c-tiles-dark .c-tiles_container .tile-icon::before {
    content: "";
    position: absolute;
    inset: 11px;
    background-color: var(--tile-accent);
    -webkit-mask-image: var(--tile-icon);
    mask-image: var(--tile-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
/* Breathing room above the first feature story box, so it doesn't sit flush
   against the hero, and above "Why Social WiFi?", which otherwise landed
   right up against the second feature story box. */
.reseller-page .c-feature_story_box:first-child,
.white-label-page .c-feature_story_box:first-child {
    margin-top: 60px;
}
/* Without this, that margin-top collapses through its parent (a plain block
   div with nothing to stop it) and pushes the parent itself down instead of
   opening space inside it - the shared gradient script measures from the
   parent's own top edge, so the collapsed margin left that gap showing as
   plain white before the gradient started instead of as part of it.
   display: flow-root gives the parent its own block formatting context,
   which stops the collapse, with no other visual effect on a plain div. */
.reseller-page div:has(> .c-feature_story_box:first-child),
.white-label-page div:has(> .c-feature_story_box:first-child) {
    display: flow-root;
}
.reseller-page .c-text_tiles_container,
.white-label-page .c-text_tiles_container {
    margin-top: 60px;
    /* The plain white/blue-tinted diagonal gradient this component normally
       carries (see the unscoped .c-text_tiles_container rule) read as an
       unwanted background here - flattened to plain white. */
    background: #FFFFFF;
}

/* ---------- Feature story box ----------
   Visually modeled on the homepage's "See how Social WiFi works" cards
   (.story-feature and friends, in the "Product stories" section above), but
   entirely its own set of classes (.feature-story-box/.fsb-*), not reused
   from .story-feature/.story-feature-track etc. Reusing those turned out to
   be unsafe: below 700px core.css repurposes them for a completely different
   phone-only layout (a single swipeable card that opens the story-viewer
   overlay) that this component does not have, so the shared classes would
   have silently broken this card on phones. Only the mail-mock/wifi-phone
   graphic partials are reused as-is - those are self-contained. Color
   values below are copied from the matching .story-feature-data/-reviews/
   -email rules. */
.feature-story-box {
    position: relative;
    /* Matches .story-sections on the homepage (the max-width the "See how
       Social WiFi works" cards are constrained to) - without it the card
       just filled this page's full container width instead of keeping the
       homepage's card proportions. */
    max-width: 1180px;
    margin: 0 auto;
    border-radius: 24px;
    padding: 44px;
    box-shadow: 0 4px 18px rgba(20, 40, 80, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-sizing: border-box;
}
/* Matches the homepage's own reversed cards (.story-feature-reviews gets
   this same 90px, not the base 44px, on whichever side its content sits) -
   reversed here means the content column sits on the left, so this widens
   the gap between the card's own left edge and the content, rather than
   reading as flush/cramped next to it. */
.feature-story-box-reverse {
    padding-left: 90px;
}
.feature-story-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.75px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.feature-story-box-data {
    background: radial-gradient(circle at 88% 12%, rgba(39, 117, 240, 0.09) 0%, rgba(39, 117, 240, 0) 45%), linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%);
    overflow: hidden;
}
.feature-story-box-data::before {
    background: linear-gradient(135deg, rgba(39, 117, 240, 0.45) 0%, rgba(90, 166, 255, 0.45) 100%);
}
.feature-story-box-reviews {
    background: radial-gradient(circle at 12% 88%, rgba(242, 163, 16, 0.09) 0%, rgba(242, 163, 16, 0) 45%), linear-gradient(180deg, #FAFCFF 0%, #F6FAFF 100%);
}
.feature-story-box-reviews::before {
    background: linear-gradient(135deg, rgba(242, 163, 16, 0.45) 0%, rgba(255, 201, 60, 0.45) 100%);
}
.feature-story-box-email {
    background: radial-gradient(circle at 88% 88%, rgba(139, 111, 232, 0.09) 0%, rgba(139, 111, 232, 0) 45%), linear-gradient(180deg, #F6FAFF 0%, #F1F7FF 100%);
}
.feature-story-box-email::before {
    background: linear-gradient(135deg, rgba(139, 111, 232, 0.45) 0%, rgba(183, 156, 255, 0.45) 100%);
}
@media (min-width: 701px) {
    .feature-story-box-reviews,
    .feature-story-box-email {
        overflow: hidden;
    }
}
.fsb-track {
    display: flex;
    align-items: center;
    gap: 60px;
    width: 100%;
}
.fsb-reverse {
    flex-direction: row-reverse;
}
.fsb-media {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fsb-media > img,
.fsb-media svg.wifi-graphic {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 420px;
    object-fit: contain;
    display: block;
    border-radius: 20px;
    box-shadow: 0 25px 50px -25px rgba(15, 35, 75, 0.4);
}
/* The wifi-phone/mail-mock graphics size their own deeply-nested images
   through their original .story-feature-media ancestor selector - copied
   here against .fsb-media instead, since renaming the wrapper (see the
   component comment) means those original rules no longer match. */
.fsb-media .wifi-phone .wifi-phone-shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    object-fit: cover;
    display: block;
}
.fsb-media .wifi-phone .wifi-phone-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    object-fit: fill;
    pointer-events: none;
    z-index: 5;
}
.fsb-media .wifi-phone .wifi-phone-logo {
    width: 104px;
    height: auto;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    display: block;
}
.fsb-media .mail-mock .mail-mock-avatar {
    width: 40px;
    height: 40px;
    flex: none;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    display: block;
}
.fsb-media .mail-mock .mail-mock-logo {
    width: auto;
    height: 42px;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    display: block;
}
.fsb-media .mail-mock .promo-shot {
    width: 100%;
    height: 88px;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    display: block;
}
.fsb-content {
    flex: 1;
    min-width: 0;
}
.fsb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
}
.fsb-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}
.fsb-icon svg {
    width: 14px;
    height: 14px;
}
.fsb-content h3 {
    font-size: 1.9em;
    line-height: 1.2em;
    margin: 0 0 16px;
    color: #4B5563;
    text-wrap: balance;
}
.fsb-content p {
    font-size: 1.1em;
    line-height: 1.6em;
    color: #4B5563;
    margin: 0 0 28px;
    max-width: 420px;
}
.feature-story-box-data .fsb-eyebrow {
    color: #2775F0;
}
.feature-story-box-data .fsb-icon {
    background-color: #2775F0;
}
.feature-story-box-reviews .fsb-eyebrow {
    color: #F2A310;
}
.feature-story-box-reviews .fsb-icon {
    background-color: #F2A310;
}
.feature-story-box-email .fsb-eyebrow {
    color: #8B6FE8;
}
.feature-story-box-email .fsb-icon {
    background-color: #8B6FE8;
}
/* Data (WiFi login phone): rises out of the bottom edge of the box, clipped
   by it - same geometry as the homepage's data box. */
.feature-story-box-data .fsb-media {
    position: relative;
    align-self: stretch;
    min-height: 421px;
    overflow: hidden;
    margin-bottom: -42px;
}
/* The browser-bar graphic (graphic_browser_bar.liquid) bleeds off the
   box's right edge instead of its bottom - cancels the accent-based
   bottom-bleed rule above (min-height/margin-bottom were sized for the
   wifi-phone) and pushes the graphic to the right instead of centering
   it, so its own flat-cut right edge can reach the card's edge. */
.fsb-media.fsb-media-bleed {
    justify-content: flex-end;
    align-self: center;
    min-height: 0;
    margin-bottom: 0;
    /* Overrides .feature-story-box-data .fsb-media's own overflow: hidden
       above - that rule clips at fsb-media's own edge, 44px short of the
       card's true edge, which cut the bleed off early instead of letting
       it reach the card's outer overflow: hidden (see
       .feature-story-box-graphic-browser_bar above) that's actually
       positioned at that edge. */
    overflow: visible;
}
/* Cancels most of the card's own 44px right padding (42px, not the full
   44px - see .user-data-bleed below for why) so the graphic's flat-cut
   right edge reaches almost to the card's true right border, where the
   card's own overflow: hidden (see .feature-story-box-data above) crops
   it - the look this graphic's design is built for (see its own
   README). */
/* Explicit width, not just the negative margin - .browser-bar-bleed is
   an unsized flex child (.fsb-media's only child), so without this it
   shrink-wraps to its own content's width, and that content
   (.browser-bar-anim) is itself "width: 100%" of THIS element - a
   circular reference that different browsers/reflows resolved
   differently, sometimes leaving the graphic short of the card's true
   edge. Fixing this element's own width breaks that cycle. */
.browser-bar-bleed {
    margin-right: -42px;
    width: calc(100% + 42px);
}
/* Guarantees clipping at the card's own edge regardless of which accent
   a bleeding graphic happens to sit in - .feature-story-box-data already
   has its own unconditional overflow: hidden, but
   .feature-story-box-reviews/-email only get theirs at
   min-width: 701px, which a graphic bleed shouldn't have to depend on. */
.feature-story-box-graphic-browser_bar,
.feature-story-box-graphic-user_data_resellers,
.feature-story-box-graphic-user_data_white_label {
    overflow: hidden;
}
/* The user-data graphic (graphic_user_data.liquid /
   graphic_user_data_white_label.liquid) bleeds off the box's LEFT edge
   instead - same reasoning as .fsb-media-bleed above, mirrored. */
.fsb-media.fsb-media-bleed-left {
    justify-content: flex-start;
    align-self: center;
    min-height: 0;
    margin-bottom: 0;
    /* Same override as .fsb-media-bleed above, for the same reason. */
    overflow: visible;
}
/* 42px, not the card's full 44px padding - the card's own gradient outline
   (.feature-story-box::before) sits right at the same edge this bleed
   clips against, painted UNDER this graphic in DOM order, so a bleed that
   reaches all 44px covers/overlaps that outline instead of stopping just
   short of it. */
.user-data-bleed {
    margin-left: -42px;
    width: calc(100% + 42px);
}
/* Reviews/email (mail mockups): bleed off one edge of the box. */
.feature-story-box-reviews .fsb-media,
.feature-story-box-email .fsb-media {
    position: relative;
    align-self: stretch;
    min-height: 379px;
}
.feature-learn-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: none;
    border-radius: 30px;
    padding: 14px 28px;
    font-family: inherit;
    font-weight: 600;
    font-size: 1em;
    color: white;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature-learn-more-btn svg {
    width: 20px;
    height: 20px;
}
.feature-learn-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(20, 40, 80, 0.2);
}
.feature-story-box-data .feature-learn-more-btn {
    background: linear-gradient(90deg, #2775F0 0%, #5AA6FF 100%);
}
.feature-story-box-reviews .feature-learn-more-btn {
    background: linear-gradient(90deg, #F2A310 0%, #FFC93C 100%);
}
.feature-story-box-email .feature-learn-more-btn {
    background: linear-gradient(90deg, #8B6FE8 0%, #B79CFF 100%);
}
/* Optional colour override (see the "color" field) - same green already
   used for the pricing-style checkmarks in the switch-checklist section.
   An extra class alongside feature-story-box-{accent} rather than a new
   accent value of its own, so the graphic/icon that accent still picks
   (via the case accent in feature_story_box.eleventy.liquid) does
   not have to change along with the colour. Same specificity as the
   accent-based rules above (one class each), so source order here - after
   those - is what lets it win. */
.feature-story-box-color-green {
    background: radial-gradient(circle at 88% 12%, rgba(34, 197, 94, 0.09) 0%, rgba(34, 197, 94, 0) 45%), linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%);
}
.feature-story-box-color-green::before {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.45) 0%, rgba(74, 222, 128, 0.45) 100%);
}
.feature-story-box-color-green .fsb-eyebrow {
    color: #16A34A;
}
.feature-story-box-color-green .fsb-icon {
    background-color: #16A34A;
}
.feature-story-box-color-green .feature-learn-more-btn {
    background: linear-gradient(90deg, #16A34A 0%, #4ADE80 100%);
}
/* Same blue as the "data" accent's own default colour (see
   .feature-story-box-data above) - lets a box keep a different accent's
   graphic (e.g. "email") while still reading as blue. */
.feature-story-box-color-blue {
    background: radial-gradient(circle at 88% 12%, rgba(39, 117, 240, 0.09) 0%, rgba(39, 117, 240, 0) 45%), linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%);
}
.feature-story-box-color-blue::before {
    background: linear-gradient(135deg, rgba(39, 117, 240, 0.45) 0%, rgba(90, 166, 255, 0.45) 100%);
}
.feature-story-box-color-blue .fsb-eyebrow {
    color: #2775F0;
}
.feature-story-box-color-blue .fsb-icon {
    background-color: #2775F0;
}
.feature-story-box-color-blue .feature-learn-more-btn {
    background: linear-gradient(90deg, #2775F0 0%, #5AA6FF 100%);
}
/* Matches the last (rightmost) stat tile in the trust-stats row above -
   its own accent, #00FFF8, used directly (not a darker readable
   substitute) so this genuinely reads as the same colour, not a
   same-family relative of it. */
.feature-story-box-color-teal {
    background: radial-gradient(circle at 88% 12%, rgba(0, 255, 248, 0.09) 0%, rgba(0, 255, 248, 0) 45%), linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%);
}
.feature-story-box-color-teal::before {
    background: linear-gradient(135deg, rgba(0, 255, 248, 0.45) 0%, rgba(150, 255, 251, 0.45) 100%);
}
.feature-story-box-color-teal .fsb-eyebrow {
    color: #00FFF8;
}
.feature-story-box-color-teal .fsb-icon {
    background-color: #00FFF8;
}
/* Darker at this end than the eyebrow/icon above (a deeper shade of the
   same cyan, not a different hue) - the button needs a dark enough stop
   for its white label text to stay readable, which pure #00FFF8 alone
   would not give it. */
.feature-story-box-color-teal .feature-learn-more-btn {
    background: linear-gradient(90deg, #00A19B 0%, #00FFF8 100%);
}
/* Matches the "Why Social WiFi?" tiles' current flat accent, #7FB2E5. */
.feature-story-box-color-skyblue {
    background: radial-gradient(circle at 88% 12%, rgba(127, 178, 229, 0.09) 0%, rgba(127, 178, 229, 0) 45%), linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%);
}
.feature-story-box-color-skyblue::before {
    background: linear-gradient(135deg, rgba(127, 178, 229, 0.45) 0%, rgba(180, 210, 240, 0.45) 100%);
}
.feature-story-box-color-skyblue .fsb-eyebrow {
    color: #7FB2E5;
}
.feature-story-box-color-skyblue .fsb-icon {
    background-color: #7FB2E5;
}
.feature-story-box-color-skyblue .feature-learn-more-btn {
    background: linear-gradient(90deg, #5A94D6 0%, #7FB2E5 100%);
}
@media (max-width: 900px) {
    .feature-story-box {
        padding: 28px;
        /* Matches socialwifi.com's own mobile story cards
           (.story-feature-track's 20px side padding) - without this the
           card ran edge to edge on phones instead of sitting inset from
           the screen like every other section on this page. */
        margin: 0 20px;
        /* The icon badge below straddles this card's own top edge -
           .feature-story-box-data's own unconditional overflow: hidden
           (reviews/email only get theirs at min-width: 701px, so they
           were never a problem here) would otherwise clip it. */
        overflow: visible;
    }
    /* Same straddling icon badge as the quote box's logo / switch-step's
       label elsewhere on this page - "RESELLER PROGRAM"/"WHITE LABEL"/
       "YOUR BRAND" reads as redundant restating the headline right below
       it at this size, so (matching socialwifi.com's own mobile story
       cards, which drop their text label the same way) only the icon
       carries over to the badge, not the label text. */
    .fsb-content {
        /* No position: relative here - the badge below needs to position
           against .feature-story-box's own border (its nearest
           positioned ancestor once this isn't one itself), not this
           element's own padded position, or it lands roughly this card's
           28px padding too low, off-centre on the actual outline. */
        padding-top: 56px;
    }
    .fsb-eyebrow-label {
        display: none;
    }
    .fsb-eyebrow {
        margin-bottom: 0;
    }
    /* .fsb-eyebrow .fsb-icon (2 classes), not just .fsb-icon (1 class) - the
       per-accent/per-color rules that set this element's own background
       (.feature-story-box-data .fsb-icon and friends) are already 2
       classes, and without matching that here they kept winning
       regardless of this media query, leaving the badge still filled
       solid with the accent colour - which then also hid the glyph
       inside it, itself recoloured to that same accent by the color:
       inherit below. */
    .fsb-eyebrow .fsb-icon {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 84px;
        height: 84px;
        border-radius: 50%;
        background: #FFFFFF;
        border: 1.5px solid currentColor;
        /* Overrides the base rule's own white (meant for the small filled
           circle sitting on the card's own background) - inherits
           .fsb-eyebrow's per-accent/per-color text color instead, so the
           badge's outline and glyph pick up that same color against this
           badge's white fill. */
        color: inherit;
        box-shadow: 0 6px 14px -8px rgba(20, 40, 80, 0.35);
    }
    .fsb-icon svg {
        width: 42px;
        height: 42px;
    }
    /* Headline, then subheadline, then the button (if any) - all inside
       .fsb-content already, in that order - then the graphic last, same
       sequence as socialwifi.com's own mobile story cards (which also
       have a "Tap to learn more" button between the subheadline and the
       graphic on pages that have one). */
    .fsb-content {
        order: 1;
    }
    .fsb-media {
        order: 2;
    }
    .fsb-track {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }
    .fsb-media > img,
    .fsb-media svg.wifi-graphic {
        max-height: 300px;
    }
    .feature-story-box-data .wifi-phone {
        --wifi-phone-scale: 0.455;
    }
    .feature-story-box-data .fsb-media {
        flex: 0 0 auto;
        min-height: 0;
        height: 320px;
        margin-bottom: 0;
        overflow: visible;
    }
    /* Overrides the 320px fixed height above (tuned for the wifi-phone
       placeholder graphic's own tall portrait aspect ratio) for the boxes
       that use one of the newer custom graphics instead - those already
       scale themselves to fit the column's width with no need for a fixed
       height, and centering them (this element's own align-items: center)
       inside a taller box than they actually render at just left a big
       gap above the graphic instead of it sitting right under the
       subheadline. */
    .feature-story-box-graphic-browser_bar .fsb-media,
    .feature-story-box-graphic-user_data_resellers .fsb-media,
    .feature-story-box-graphic-user_data_white_label .fsb-media {
        height: auto;
    }
    .feature-story-box-reviews .fsb-media,
    .feature-story-box-email .fsb-media {
        flex: 0 0 auto;
        min-height: 0;
        height: 350px;
    }
    .feature-story-box-email .fsb-media {
        height: 380px;
    }
    .fsb-content h3 {
        font-size: 1.5em;
    }
    /* Centred like the homepage's own mobile story cards
       (.story-feature-content) - the eyebrow row and the button are both
       inline-flex, so this alone centres them along with the plain-block
       h3/p that inherit it. */
    .fsb-content {
        text-align: center;
    }
    .fsb-eyebrow {
        justify-content: center;
    }
    .fsb-content p {
        max-width: none;
    }
    /* The track stacks into a column here, so there's no "right edge of
       the box" for the browser-bar graphic to bleed off any more -
       centered like the other graphics instead. */
    .fsb-media.fsb-media-bleed {
        justify-content: center;
        /* .fsb-track's own align-items: stretch (its default, unset by
           anything here) governs the cross axis in this column layout -
           but this element's own align-self: center (set for the desktop
           row layout, where it only affects vertical centering) hijacks
           that same property to mean "shrink to content width" once the
           track itself becomes a column. That left this media column
           sized to its un-scaled child's own huge content width instead
           of the real, narrow column width the scale script needs to read
           to size the graphic correctly. */
        align-self: stretch;
    }
    .browser-bar-bleed {
        margin-right: 0;
        width: 100%;
        /* Without this, the flex item's default min-width: auto respects
           its child's own fixed 500px content width (the un-scaled
           artboard), so the item itself never actually shrinks below
           that - the scale script then reads a clientWidth of 500px
           regardless of the real (much narrower) mobile viewport, badly
           under-scaling the graphic and overflowing the card. */
        min-width: 0;
    }
    .fsb-media.fsb-media-bleed-left {
        /* Same fix as .fsb-media-bleed above, for the same reason. */
        align-self: stretch;
        justify-content: center;
    }
    .user-data-bleed {
        margin-left: 0;
        width: 100%;
        /* Same fix as .browser-bar-bleed above, for the same reason - this
           one's fixed content width is 1150px. */
        min-width: 0;
    }
}
/* ---------- End feature story box ---------- */

/* ---------- Left-aligned hero logos marquee (resellers / white label) ----------
   Same animated two-row marquee markup as the homepage hero
   (partials/hero_logos_marquee.liquid), but the homepage's own CSS for it is
   scoped under .hero-gradient, a class that belongs to the homepage's own
   hero background treatment (full viewport height, negative margin trick -
   see .hero.hero-gradient above) and is not used by this hero variant
   (.c-image-hero). Rewritten here as its own scope instead of adding
   .hero-gradient to this hero, which would pull that unrelated sizing in too.
   .c-image-hero .inner is already text-align: left (unlike the homepage's
   centered hero), so no extra alignment rule is needed for this to sit on
   the left - it just needs to not be centered itself, and it isn't. */
.logos-marquee-left .logos-marquee {
    overflow: hidden;
    margin-top: 16px;
    /* A few px of vertical breathing room inside the clipped box, on top of
       shrinking the logos themselves - between them, neither row's logos
       should ever sit flush against (or past) the clip edge. */
    padding: 4px 0;
    -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%);
}
.logos-marquee-left .logos-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 40px;
    /* Slower than the homepage's own 26s - this row is a lot shorter, so the
       same duration would have made it visibly race by. */
    animation: hero-logos-scroll 46s linear infinite;
}
.logos-marquee-left .logo-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 28px;
}
/* Specificity note: the legacy .dynamic .c-hero_section .logos img rule
   (margin-top: 20px, for the old static logo strip) has 3 classes + a tag,
   which otherwise beats a plain .logos-marquee-left .logo-item img override
   - .c-hero_section added here to match/exceed it is what actually resets
   the margin, not just repeating margin-top: 0 at lower specificity. Without
   this, every logo sat 20px lower than its row, overflowing out the bottom
   and getting clipped by .logos-marquee's overflow: hidden. */
.c-hero_section .logos-marquee-left .logo-item img {
    height: 100%;
    width: auto;
    margin-top: 0;
    display: block;
}
@media (prefers-reduced-motion: reduce) {
    .logos-marquee-left .logos-track {
        animation: none;
    }
}
.logos-marquee-left .logos-marquee-reverse {
    margin-top: 14px;
}
.logos-marquee-left .logos-marquee-reverse .logos-track {
    animation-direction: reverse;
}
@media (max-width: 600px) {
    .logos-marquee-left .logos-marquee-reverse {
        display: none;
    }
    .logos-marquee-left .logo-item-desktop {
        display: none;
    }
    /* Matches socialwifi.com's own mobile hero marquee exactly (15s,
       30px/40px) - copied directly rather than this row's own from-scratch
       46s/22px, which read as noticeably slower and smaller by comparison. */
    .logos-marquee-left .logos-track {
        animation-duration: 15s;
    }
    .logos-marquee-left .logo-item {
        height: 30px;
    }
    .logos-marquee-left .logo-item-compact {
        height: 40px;
    }
}
/* ---------- End left-aligned hero logos marquee ---------- */

/* ---------- "Why Social WiFi?" tiles, homepage "Plus so much more" style ----------
   The gradient-card look with the circular icon badge and hover lift is part
   of the homepage redesign package and lives entirely under .dynamic-home
   (see .dynamic-home .c-text_tiles_container above) - without that class,
   this shared component falls back to its older, plain inline-block tiles.
   Rebuilt here under our own page scope instead of adding .dynamic-home
   (which would pull in unrelated homepage-only spacing rules elsewhere on
   the page). The circular "learn more" arrow is left out on purpose: it only
   ever shows on a tile with a real url (see tile.eleventy.liquid), and these
   feature tiles don't link anywhere. */
.reseller-page .c-text_tiles_container h2,
.white-label-page .c-text_tiles_container h2 {
    color: #4B5563;
    margin-top: 0;
}
.reseller-page .c-text_tiles_container h2 span,
.white-label-page .c-text_tiles_container h2 span {
    background: transparent linear-gradient(90deg, #369AFE 0%, #00fff8 100%) 0 0 no-repeat padding-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Matches the 1180px the feature story boxes/quote box are constrained to -
   the component's own .wrapper defaults to var(--max-width), 1300px (plus
   its own 20px side padding on top of that), which read wider than the
   boxes above/below it. border-box keeps the 1180px a true outer width
   despite that padding. */
.reseller-page .c-text_tiles_container .wrapper,
.white-label-page .c-text_tiles_container .wrapper {
    max-width: 1180px;
    box-sizing: border-box;
}
.reseller-page .c-text_tiles_container .grid,
.white-label-page .c-text_tiles_container .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 28px;
    row-gap: 48px;
    margin-bottom: 0;
}
.reseller-page .c-text_tiles_container .c-tile,
.white-label-page .c-text_tiles_container .c-tile {
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: none;
    margin: 0;
    padding: 60px 32px 36px;
    background: linear-gradient(42deg, var(--tile-tint-soft, #F8FAFF) 0%, #FFFFFF 100%) 0 0 no-repeat padding-box;
    box-shadow: 0 10px 24px -14px rgba(20, 40, 80, 0.35);
    border-radius: 20px;
    border: 1.5px solid var(--tile-accent, #E1E9F5);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* Same blue -> cyan -> teal per-column cycle as the homepage's own
   .dynamic-home .c-text_tiles_container tiles (see there for the full
   rationale) - restored after a brief detour through a single flat
   sky-blue for every tile. */
.reseller-page .c-text_tiles_container .grid .c-tile:nth-child(3n+1),
.white-label-page .c-text_tiles_container .grid .c-tile:nth-child(3n+1) {
    --tile-accent: #369AFE;
    --tile-tint: #E5F2FF;
    --tile-tint-soft: #F5FAFF;
}
.reseller-page .c-text_tiles_container .grid .c-tile:nth-child(3n+2),
.white-label-page .c-text_tiles_container .grid .c-tile:nth-child(3n+2) {
    --tile-accent: #1BCEFB;
    --tile-tint: #E3F9FE;
    --tile-tint-soft: #F3FCFF;
}
.reseller-page .c-text_tiles_container .grid .c-tile:nth-child(3n),
.white-label-page .c-text_tiles_container .grid .c-tile:nth-child(3n) {
    --tile-accent: #00FFF8;
    --tile-tint: #DFFFFE;
    --tile-tint-soft: #F3FFFE;
}
.reseller-page .c-text_tiles_container .tile-icon,
.white-label-page .c-text_tiles_container .tile-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tile-tint, #E5F2FF) 0%, #FFFFFF 100%);
    border: 1.5px solid var(--tile-accent, #369AFE);
    box-shadow: 0 8px 18px -10px rgba(20, 40, 80, 0.35);
}
.reseller-page .c-text_tiles_container .tile-icon::before,
.white-label-page .c-text_tiles_container .tile-icon::before {
    content: "";
    position: absolute;
    inset: 15px;
    background-color: var(--tile-accent, #369AFE);
    -webkit-mask-image: var(--tile-icon);
    mask-image: var(--tile-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.reseller-page .c-text_tiles_container .c-tile h3,
.white-label-page .c-text_tiles_container .c-tile h3 {
    font-size: 1.3em;
    margin: 0 0 10px;
    color: #4B5563;
}
.reseller-page .c-text_tiles_container .c-tile p,
.white-label-page .c-text_tiles_container .c-tile p {
    font-size: 0.98em;
    line-height: 1.55em;
    color: #4B5563;
    flex: 1;
    margin: 0;
}
.reseller-page .c-text_tiles_container .c-tile:hover,
.white-label-page .c-text_tiles_container .c-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 28px -16px rgba(20, 40, 80, 0.3);
}
.reseller-page .c-text_tiles_container .call,
.white-label-page .c-text_tiles_container .call {
    text-align: center;
    margin-top: 48px;
}
@media (hover: none) {
    .reseller-page .c-text_tiles_container .c-tile:hover,
    .white-label-page .c-text_tiles_container .c-tile:hover {
        transform: none;
        box-shadow: 0 10px 24px -14px rgba(20, 40, 80, 0.35);
    }
}
/* Same specificity fight as the marquee logos above: the plain, unscoped
   .c-text_tiles_container .grid rule (2 classes) already handles the
   responsive column collapse at these breakpoints - restated at matching
   specificity here only because our own 3-column rule above would otherwise
   keep winning past them. */
@media (max-width: 1400px) {
    .reseller-page .c-text_tiles_container .grid,
    .white-label-page .c-text_tiles_container .grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 900px) {
    .reseller-page .c-text_tiles_container .grid,
    .white-label-page .c-text_tiles_container .grid {
        grid-template-columns: 1fr;
    }
}
/* ---------- End "Why Social WiFi?" tiles ---------- */

/* ---------- Quote box, restyled to match the feature story boxes ----------
   Same card language as .feature-story-box: soft shadow instead of the flat
   #00000029 drop shadow, a thin gradient outline instead of a filled
   gradient background, same border-radius/padding/max-width as the other
   boxes on this page rather than the component's own 900px cap. */
.reseller-page .c-quote_box,
.white-label-page .c-quote_box {
    position: relative;
    /* Narrower than the 1180px row of boxes above/below it - this card
       holds one centered quote rather than a full-width layout, so it
       reads better closer to the quote text's own 760px. */
    max-width: 900px;
    box-sizing: border-box;
    /* Overrides the shared ".new-dynamic .aside-text { margin: 50px auto }"
       - that rule's own 50px margin-top was winning the collapse against
       .quote-box-title's margin-bottom below it (whichever of the two
       adjacent margins is larger wins), making this box's gap under the
       heading effectively fixed regardless of that margin-bottom's own
       value. Zeroing it here hands control of that gap entirely to the
       heading's margin instead. */
    margin-top: 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%);
    box-shadow: 0 4px 18px rgba(20, 40, 80, 0.1);
    border-radius: 24px;
    padding: 44px;
    /* Clears the logo badge straddling the top edge, with breathing room
       below it - halved from an initial 100px once that was confirmed to
       clear the badge with room to spare. */
    padding-top: 61px;
    /* Halved from the base 44px, matching the other spacing cuts in this
       card. */
    padding-bottom: 22px;
    /* Overrides the shared .aside-text's own overflow: hidden (this div
       carries both classes) - that rule clipped the top half of the logo
       badge below, which straddles this box's own top edge by design. */
    overflow: visible;
}
/* The logo, out of the box's normal flow (where it used to sit centered
   at the top, ~100px wide with a 20px margin under it) and into a
   straddling circle badge instead - same look and positioning as the
   icon badges elsewhere on this page (.tile-icon in .c-text_tiles_container
   and .c-tiles-dark). Targeting the logo's own wrapper div (the aside's
   first child) rather than changing quote_box.eleventy.liquid, since that
   template is shared by 56+ other pages whose own logo should stay
   exactly where it was. */
.reseller-page .c-quote_box .text > div:first-child,
.white-label-page .c-quote_box .text > div:first-child {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    /* A wide pill/stadium shape (same shape as the site's own buttons,
       e.g. .feature-learn-more-btn), not a circle - the Dr.WiFi logo is a
       wide horizontal wordmark (920x268 natural size), so a circular
       badge left most of its width unused. Sized just a bit past the
       logo's own fixed 144x42 (see the img rule below) rather than as a
       percentage of this box, so the badge can shrink independently
       without shrinking the logo along with it. */
    width: 190px;
    height: 86px;
    margin: 0;
    border-radius: 9999px;
    /* Same background as the card itself (.c-quote_box), not the
       icon-badge-style tint used elsewhere on this page - the outline
       below matches the card's own gradient border too, so this now
       reads as an extension of the card rather than a distinct badge
       style. */
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%);
    box-shadow: 0 8px 18px -10px rgba(20, 40, 80, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* Same gradient-mask outline technique as .c-quote_box::before below,
   replacing this badge's own flat solid-blue border. */
.reseller-page .c-quote_box .text > div:first-child::before,
.white-label-page .c-quote_box .text > div:first-child::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.75px;
    background: linear-gradient(135deg, rgba(39, 117, 240, 0.45) 0%, rgba(90, 166, 255, 0.45) 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;
}
/* Overrides the shared ".c-quote_box img { max-width: 100px !important;
   margin-bottom: 20px; }" - both need matching !important to win. Fixed
   px, not a percentage of the badge above, so the logo's own rendered
   size stays put even as that badge is resized on its own. */
.reseller-page .c-quote_box .text > div:first-child img,
.white-label-page .c-quote_box .text > div:first-child img {
    max-width: 144px !important;
    max-height: 42px;
    margin: 0 !important;
    object-fit: contain;
}
.reseller-page .c-quote_box::before,
.white-label-page .c-quote_box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.75px;
    background: linear-gradient(135deg, rgba(39, 117, 240, 0.45) 0%, rgba(90, 166, 255, 0.45) 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;
}
@media (max-width: 1500px) {
    .reseller-page .c-quote_box,
    .white-label-page .c-quote_box {
        max-width: 900px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
/* Sits above the card (see the comment in quote_box.eleventy.liquid on
   why it's a sibling, not a child) - same gradient-highlight heading
   style used above the other cards on this page (.c-section_intro h2,
   .c-text_tiles_container h2). */
.reseller-page .quote-box-title,
.white-label-page .quote-box-title {
    text-align: center;
    font-size: var(--h2-size);
    color: #4B5563;
    /* Matches the breathing room the other section headings on this page
       get above them (.c-switch_checklist, .reseller-page
       .c-text_tiles_container) - without it this sat flush against
       whatever ends right above it (here, the dark banner section). */
    /* Bottom value tuned for a 40px visible gap above the logo badge, now
       that .c-quote_box's own margin-top is zeroed above (this margin used
       to lose the collapse against that 50px, so it wasn't the gap
       1-for-1). */
    margin: 60px 0 84px;
}
.reseller-page .quote-box-title span,
.white-label-page .quote-box-title span {
    background: transparent linear-gradient(90deg, #369AFE 0%, #00fff8 100%) 0 0 no-repeat padding-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* The quote text itself, narrower than the card - the full paragraph
   otherwise ran the whole 1180px card width, reading as long unbroken
   lines. */
.reseller-page .c-quote_box .text > p,
.white-label-page .c-quote_box .text > p {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    /* Halves the UA default ~1em top/bottom margin these two paragraphs
       collapsed to between them - explicit rather than relying on that
       collapse so the gap is a known, directly-halvable value. */
    margin-top: 0;
    margin-bottom: 8px;
}
/* Halves the shared ".c-quote_box .source { margin-top: 50px }" above -
   scoped here rather than edited in place since that rule is shared by
   56+ other pages using this component. */
.reseller-page .c-quote_box .source,
.white-label-page .c-quote_box .source {
    margin-top: 25px;
}
/* Role and company on one line ("CEO & Founder, Dr. WiFi & Telecu")
   instead of stacked - only the person's name (first <p>) stays on its
   own line. Needs to out-specificity the shared ".c-quote_box .source
   p:before/:after { content: '' }" reset above, which is why this one
   carries the page-class prefix rather than matching it 1-for-1. */
.reseller-page .c-quote_box .source p:nth-child(2),
.white-label-page .c-quote_box .source p:nth-child(2),
.reseller-page .c-quote_box .source p:nth-child(3),
.white-label-page .c-quote_box .source p:nth-child(3) {
    display: inline;
}
.reseller-page .c-quote_box .source p:nth-child(3)::before,
.white-label-page .c-quote_box .source p:nth-child(3)::before {
    content: ", ";
}
/* ---------- End quote box ---------- */

/* ---------- Switch checklist ----------
   "Switching is easy": headline, the pricing page's own green checkmarks
   (.pricing-header-point*, reused as-is - already shared/global, see
   pricing_header_points.html), and a 3-step card grid modeled on the text
   portion of /switch-to-social-wifi/'s step-by-step section (see
   switch-in-steps.html), styled like this page's other cards
   (.feature-story-box/.c-quote_box: soft shadow, thin border, hover lift). */
.c-switch_checklist {
    max-width: 1180px;
    margin: 60px auto 0;
    padding: 0 20px;
    text-align: center;
    box-sizing: border-box;
}
.c-switch_checklist h2 {
    color: #4B5563;
    font-size: var(--h2-size);
    margin: 0 0 20px;
}
/* See the matching comment on .c-section_intro h2's own mobile override -
   same fix, same reason. */
@media (max-width: 600px) {
    .c-switch_checklist h2 {
        font-size: var(--mobile-header-size);
    }
}
.switch-from-another-emphasis {
    background: linear-gradient(90deg, #369AFE 0%, #00fff8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.c-switch_checklist .call {
    margin-top: 40px;
}
.switch-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 48px;
    text-align: left;
}
.switch-step {
    position: relative;
    /* Lighter than the step-label pill's own #E5F2FF (see
       .switch-step-label below) - was #F5FAFF, similar enough to that
       pill's tint to read as roughly the same shade instead of a clearly
       lighter card underneath it. */
    background: linear-gradient(42deg, #FAFCFF 0%, #FFFFFF 100%);
    border: 1.5px solid #7FB2E5;
    border-radius: 20px;
    /* Top raised from the base 32px to clear the step-label pill below,
       which now straddles this card's own top edge. */
    padding: 44px 28px 32px;
    box-shadow: 0 10px 24px -14px rgba(20, 40, 80, 0.2);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.switch-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 28px -16px rgba(20, 40, 80, 0.3);
}
/* Same straddling pill badge as the quote box's logo above (see
   .reseller-page/.white-label-page .c-quote_box .text > div:first-child) -
   sized to fit this short "STEP N" text rather than that badge's own
   fixed logo-sized dimensions. */
.switch-step-label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 10px 26px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #E5F2FF 0%, #FFFFFF 100%);
    /* Same colour and thickness as .switch-step's own outline (#7FB2E5,
       1.5px), so the pill reads as an extension of the card's own border
       rather than a mismatched accent. */
    border: 1.5px solid #7FB2E5;
    box-shadow: 0 8px 18px -10px rgba(20, 40, 80, 0.35);
    /* Bolder than the base 700 - a plain bold read as too thin next to the
       lightened card background now behind it. */
    font-weight: 800;
    font-size: 0.85em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #369AFE;
    margin: 0;
}
.switch-step h3 {
    font-size: 1.3em;
    color: #4B5563;
    margin: 0 0 10px;
}
.switch-step p {
    font-size: 0.98em;
    line-height: 1.55em;
    color: #4B5563;
    margin: 0;
}
@media (max-width: 900px) {
    .switch-steps-grid {
        grid-template-columns: 1fr;
    }
}
/* ---------- End switch checklist ---------- */

/* The "...and many more" line under the "Why Social WiFi?" tiles. Only for
   phones, which is the only place tiles are actually missing: the three
   tiles flagged desktop_only in the page front matter drop out at 600px and
   under (see .tile-desktop-only), leaving three of six, and this line is
   what tells the reader the list is a selection rather than all of it.
   Sized and coloured off the tiles' own body text so it reads as part of
   the group rather than a heading of its own. */
.tiles-mobile-more {
    display: none;
}
@media (max-width: 600px) {
    .tiles-mobile-more {
        display: block;
        margin: 4px 0 0;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        color: #4B5563;
    }
}
/* The shared rule that hides desktop_only tiles on phones
   (.c-text_tiles_container .c-tile.tile-desktop-only, three classes) is
   outranked here by these pages' own tile styling
   (.reseller-page .c-text_tiles_container .c-tile, also three classes but
   later in this file), which sets display: flex - so all six tiles stayed
   visible. Same rule at four classes, which settles it on specificity
   rather than on which one happens to come last. */
@media (max-width: 600px) {
    .reseller-page .c-text_tiles_container .c-tile.tile-desktop-only,
    .white-label-page .c-text_tiles_container .c-tile.tile-desktop-only {
        display: none;
    }
}