/* Platform Page: only what Elementor V4 classes can't express (keyframes, JS states) */

/* tab bar offset before script.js measures the header (72px header, +32px under the WP admin bar) */
html { --pf-hdr: 72px; }
@media (min-width: 783px) { html:has(> body.admin-bar) { --pf-hdr: 104px; } }

/* integrations marquee: the track is cloned twice by script.js and slides one track width */
.pf-itg-track { flex-shrink: 0; width: max-content; }
.pf-itg-marquee.is-running .pf-itg-track { animation: pfItgMove 70s linear infinite; }
.pf-itg-marquee:hover .pf-itg-track { animation-play-state: paused; }
.pf-itg-tile { transition: border-color .2s; will-change: transform; }
.pf-itg-tile.is-near { position: relative; z-index: 2; border-color: rgba(20,170,60,.45); }
@keyframes pfItgMove { to { transform: translateX(-100%); } }
/* framed between the rails like V4: starts and ends at the container edge */
.pf-itg-marquee { max-width: var(--container, 1240px); margin-left: auto; margin-right: auto; }

/* dark dot grid canvas: dots outside the rails, denser towards the bottom */
.pf-itg-grid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; opacity: .9;
  -webkit-mask-image: linear-gradient(90deg,#000 0,#000 calc(50% - var(--container,1240px)/2 - 60px),transparent calc(50% - var(--container,1240px)/2 + 40px),transparent calc(50% + var(--container,1240px)/2 - 40px),#000 calc(50% + var(--container,1240px)/2 + 60px)),linear-gradient(180deg,transparent 0,transparent 18%,#000 50%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg,#000 0,#000 calc(50% - var(--container,1240px)/2 - 60px),transparent calc(50% - var(--container,1240px)/2 + 40px),transparent calc(50% + var(--container,1240px)/2 - 40px),#000 calc(50% + var(--container,1240px)/2 + 60px)),linear-gradient(180deg,transparent 0,transparent 18%,#000 50%);
  mask-composite: intersect; }
.pf-itg > .e-con, .pf-itg > .ds-container { position: relative; z-index: 1; }

/* module corner dots: script.js draws them on a canvas (hover glow + click to dispatch), so the CSS dots step aside */
.pf-mp-dots.has-grid, .pf-hero-dots.has-grid { background-image: none !important; }
.pf-mp-grid { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* the light running along the module grid lines (fixed canvas drawn by script.js; rails only exist from tablet up) */
.pf-comet { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 5; pointer-events: none; }
@media (max-width: 767.98px) { .pf-comet { display: none; } }

/* hero app live updates */
.pf-app-tr { transition: max-height .5s ease, min-height .5s ease, opacity .5s ease, background-color 1.2s ease; max-height: 60px; }
.pf-app-tr.pf-enter { max-height: 0; min-height: 0; opacity: 0; }
.pf-app-tr.pf-fresh { background-color: #F2F8F3; }
.pf-app-tr.pf-leave { max-height: 0; min-height: 0; opacity: 0; border-top-color: transparent; }
.pf-app-kpi > p:nth-child(2) { transition: color .4s; }
.pf-app-kpi > p.pf-tick { color: #0E7F2C; }
.pf-app-bars > div { transition: height .8s cubic-bezier(.2,.7,.2,1); }
.pf-app-nav { transition: background-color .4s, color .4s; }
.pf-app-nav.pf-ping { background-color: #E9F6EC; color: #0E7F2C; }
.pf-live { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-family: 'Open Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #0E7F2C; vertical-align: middle; }
.pf-live i { width: 6px; height: 6px; border-radius: 50%; background: #14AA3C; animation: pfPulse 2s infinite; }
@keyframes pfPulse { 0% { box-shadow: 0 0 0 0 rgba(20,170,60,.5); } 70% { box-shadow: 0 0 0 8px rgba(20,170,60,0); } 100% { box-shadow: 0 0 0 0 rgba(20,170,60,0); } }

/* module UIs rise in once when they scroll into view (only those still below the fold when the script runs) */
.pf-mp-visual .pf-viz { transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.pf-mp-visual.pf-pre .pf-viz { opacity: 0; transform: translateY(16px); }

@media (prefers-reduced-motion: reduce) {
  .pf-itg-marquee.is-running .pf-itg-track, .pf-live i { animation: none; }
  .pf-mp-visual.pf-pre .pf-viz { opacity: 1; transform: none; }
}

/* Module UIs: the .pf-illu zone holds the poster; the live <sm-illu-pf-*> sits on top and fades in */
.pf-mp-visual { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 14%), linear-gradient(to left, transparent 0, #000 8%) !important; mask-image: linear-gradient(to top, transparent 0, #000 14%), linear-gradient(to left, transparent 0, #000 8%) !important; -webkit-mask-composite: source-in; mask-composite: intersect; }
.pf-illu { --pf-pr: 96px; position: relative !important; width: calc(100% + 64px) !important; max-width: none !important; height: calc(100% + 44px) !important; min-height: 0 !important; padding: 0 !important; overflow: hidden; }
.pf-illu img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; object-position: 0 0; transition: opacity .4s; }
.pf-illu > [data-sm-illu] { opacity: 0; transition: opacity .4s; }
.pf-illu.is-live > [data-sm-illu] { opacity: 1; }
.pf-illu.is-live img { opacity: 0; }
.pf-mp-visual .pf-illu { transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.pf-mp-visual.pf-pre .pf-illu { opacity: 0; transform: translateY(16px); }
@media (min-width: 768px) { #p-auto .pf-mp-visual { height: 500px !important; } }
@media (max-width: 767px) { .pf-illu { --pf-pr: 56px; width: calc(100% + 40px) !important; } }
@media (prefers-reduced-motion: reduce) { .pf-mp-visual.pf-pre .pf-illu { opacity: 1; transform: none; } }

/* Alternating module bands: OMS, IMS, Returns sit on a soft warm grey, full-bleed; the band runs on through the
   divider lines that frame each module (AI keeps its dark section) */
.pf-mp:nth-child(odd):not(.pf-mp-ai) { background: #F7F7F3; box-shadow: 0 0 0 100vmax #F7F7F3; clip-path: inset(0 -100vmax); }
/* phones: the UIs render as scaled-down desktop windows, so the visual box can be shorter */
@media (max-width: 767px) { .pf-mp-visual { height: 290px !important; } #p-auto .pf-mp-visual { height: 310px !important; } }

/* Hero: the Analytics dashboard (<sm-illu-pf-hero>) runs wider and fades out bottom and right */
.pf-app { height: 680px !important; -webkit-mask-image: linear-gradient(to top, transparent 0, #000 30%), linear-gradient(to left, transparent 0, #000 12%) !important; mask-image: linear-gradient(to top, transparent 0, #000 30%), linear-gradient(to left, transparent 0, #000 12%) !important; -webkit-mask-composite: source-in; mask-composite: intersect; }
.pf-app .pf-illu { height: 100% !important; overflow: visible !important; }
@media (max-width: 999px) { .pf-app { height: 420px !important; } }
@media (max-width: 767px) { .pf-app { height: 300px !important; } }

/* Logo wall on phones: three columns of smaller logos (12 logos in ~285 px instead of ~500) */
@media (max-width: 767px) {
  .pf-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1px !important; background: #E0E5DF !important; overflow: hidden; }
  .pf-logo-cell { height: 70px !important; min-height: 0 !important; border: 0 !important; background: #fff !important; padding: 0 6px !important; }
  .pf-logo-cell img { max-width: 96px !important; max-height: 34px !important; width: auto !important; height: auto !important; }
}

/* API section head: left-aligned on phones, like the rest of the page */
@media (max-width: 767px) {
  .pf-itg-head { text-align: left !important; align-items: flex-start !important; justify-items: start !important; }
  .pf-itg-head > * { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; align-self: flex-start !important; justify-content: flex-start !important; }
}

/* AI module: "Get agent-ready" is hidden until it has a destination */
.pf-mp-ai .elementor-element-1ithcj1 { display: none !important; }