/* The site header with large menus (Ahmed approved 3 Nov 2026). Built from the local example. */
/* Figtree for the menu headings on pages that do not load it: a browser fetches it only when a menu opens */
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url(/vendor/fonts/google/figtree/v9/figtree-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url(/vendor/fonts/google/figtree/v9/figtree-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url(/vendor/fonts/google/figtree/v9/figtree-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url(/vendor/fonts/google/figtree/v9/figtree-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* site header: over the sky at the top, a navy bar once scrolled; large menus open under each name */
.sh-bar{--ink:#0B1530;--mut:#5A647A;--navy:#1B2B7B;--tint:#F3F6FC;--line:#E6EAF2;--f:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--fd:"Figtree","Helvetica Neue",Arial,sans-serif;position:absolute;top:0;left:0;right:0;z-index:1000;transition:transform .3s cubic-bezier(.4,0,.2,1),background-color .2s ease;font:400 15px/1.4 var(--f)}
.sh-bar *{box-sizing:border-box}
.sh-bar p,.sh-bar ul{margin:0;padding:0;list-style:none}
.sh-bar a{text-decoration:none;color:inherit}
.sh-bar svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sh-bar :focus-visible{outline:2px solid #7E8CFF;outline-offset:3px;border-radius:8px}
.sh-bar.is-fixed{position:fixed;transform:translateY(-100%);background:linear-gradient(90deg,#121A58 0%,#1B2B7B 55%,#2B2F8F 100%)}
/* the shadow only exists while the bar is on screen, so a hidden bar never leaves a grey band at the top */
.sh-bar.is-fixed.is-shown,.sh-bar.is-fixed.is-open{transform:none;box-shadow:0 1px 0 rgba(255,255,255,.08),0 12px 32px rgba(10,10,40,.22)}
.sh-nav{position:relative;max-width:1440px;margin:0 auto;height:84px;padding:0 64px;display:flex;align-items:center;gap:40px;color:#fff}
.sh-brand{display:inline-flex;align-items:center;flex:none}
.sh-brand img{display:block;height:26px;width:auto}
/* the symbol beside the name (Ahmed 4 Nov: "paidsync-symbol-white-transparent-4096.png beside paidsync text as our logo") */
.sh-brand{gap:9px}.sh-brand .sh-mark{height:22px;width:22px}
.sh-top{display:flex;align-items:center;gap:2px}
.sh-trigger{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:#fff;font:500 15px/1 var(--f);cursor:pointer;transition:background-color .15s ease}
.sh-trigger svg{width:12px;height:12px;stroke-width:1.8;transition:transform .2s cubic-bezier(.23,1,.32,1)}
.sh-trigger:hover,.sh-item.is-open .sh-trigger{background:rgba(255,255,255,.14)}
.sh-item.is-open .sh-trigger svg{transform:rotate(180deg)}
.sh-end{margin-left:auto;display:flex;align-items:center;gap:24px}
.sh-in{font:500 15px/1 var(--f);color:#fff;opacity:.92;white-space:nowrap}
.sh-in:hover{opacity:1;text-decoration:underline!important;text-underline-offset:5px}
.sh-pill{white-space:nowrap;flex:none;display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;border-radius:999px;background:#EEF3FF;color:var(--navy)!important;font:600 15px/1 var(--f);transition:background-color .16s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.sh-pill:hover{background:#fff}
.sh-pill:active{transform:scale(.97)}
.sh-burger,.sh-mob-end{display:none}

/* the menus */
.sh-panel{position:absolute;top:calc(100% - 8px);left:50%;width:min(1180px,calc(100vw - 48px));display:grid;gap:12px;padding:12px;background:#fff;color:var(--ink);border-radius:24px;box-shadow:0 30px 80px rgba(10,14,48,.26),0 2px 8px rgba(10,14,48,.08);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .16s ease,transform .22s cubic-bezier(.23,1,.32,1),visibility 0s linear .22s}
.sh-item.is-open>.sh-panel{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .16s ease,transform .22s cubic-bezier(.23,1,.32,1)}
.sh-item--small{position:relative}
.sh-panel--co{left:0;width:340px;transform:translate(0,8px);padding:10px}
.sh-item--small.is-open>.sh-panel{transform:none}
.sh-panel--product{grid-template-columns:270px 1fr 1fr 270px}
.sh-panel--platforms{grid-template-columns:1.5fr 1fr 290px}
.sh-panel--cases{grid-template-columns:430px 1fr 1fr}
.sh-panel--res{grid-template-columns:260px 1fr}
.sh-col{padding:18px 14px;display:flex;flex-direction:column;gap:2px}
.sh-h{font:600 13px/1 var(--f);color:var(--mut);padding:0 10px 12px}
.sh-it{display:flex;align-items:center;gap:14px;padding:10px;border-radius:14px;transition:background-color .15s ease}
.sh-it:hover,.sh-pl:hover,.sh-ln:hover,.sh-sm:hover{background:var(--tint)}
.sh-it--demo{background:var(--tint);margin-bottom:4px}
.sh-it--demo:hover{background:#EAF0FB}
.sh-it b{display:block;font:600 15px/1.25 var(--f);color:var(--ink)}
.sh-it em{display:block;margin-top:3px;font:400 13.5px/1.35 var(--f);font-style:normal;color:var(--mut)}
.sh-ic,.sh-lg{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#EEF3FF;color:var(--navy)}
.sh-ic svg{width:20px;height:20px}
.sh-lg{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.sh-lg img{width:22px;height:22px;object-fit:contain}
.sh-more{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:8px 10px;font:600 14px/1 var(--f);color:var(--navy)}
.sh-more svg{width:14px;height:14px;transition:transform .2s cubic-bezier(.23,1,.32,1)}
.sh-more:hover svg,.sh-big:hover svg,.sh-feat:hover .sh-feat__go svg{transform:translateX(3px)}
.sh-aside{padding:24px 22px;border-radius:18px;background:var(--tint);display:flex;flex-direction:column}
.sh-aside .sh-h{padding:0 0 14px;color:var(--ink);font:600 16px/1.3 var(--fd)}
.sh-aside .sh-more{padding-left:0}
.sh-p{font:400 14px/1.5 var(--f);color:var(--mut);margin-bottom:6px!important}
.sh-ticks{display:grid;gap:10px;margin-bottom:8px!important}
.sh-ticks li{position:relative;padding-left:26px;font:400 14px/1.4 var(--f);color:var(--ink)}
.sh-ticks li::before{content:"";position:absolute;left:0;top:1px;width:17px;height:17px;border-radius:50%;background:#DDE7FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.6L13 6.6' fill='none' stroke='%231B2B7B' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.sh-feat{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-height:330px;padding:24px;border-radius:18px;color:#fff;background:linear-gradient(180deg,#121A58 0,#1B2B7B 22%,rgba(44,42,132,.86) 46%,rgba(80,52,150,.5) 70%,rgba(91,45,142,.2) 100%),image-set(url(/assets/home/sky/cumulus-1x.webp) 1x,url(/assets/home/sky/cumulus-2x.webp) 2x) 50% 60px/auto 420px no-repeat,#5B4AA0}
.sh-feat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,12,40,0) 40%,rgba(10,12,40,.55))}
.sh-feat__faces{position:absolute;top:24px;left:24px;display:flex}
.sh-feat__faces img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 30%;background:#EEE8FF;box-shadow:0 0 0 3px rgba(255,255,255,.35);margin-right:-8px}
.sh-feat b{font:600 21px/1.2 var(--fd);letter-spacing:-.01em}
.sh-feat>span:not(.sh-feat__faces){font:400 14.5px/1.45 var(--f);color:rgba(255,255,255,.9)}
.sh-feat__go{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:10px;height:40px;padding:0 18px;border-radius:999px;background:#EEF3FF;color:var(--navy);font:600 14px/1 var(--f);font-style:normal}
.sh-feat__go svg{width:14px;height:14px;transition:transform .2s cubic-bezier(.23,1,.32,1)}
.sh-grid2{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}
.sh-pl{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;font:500 15px/1.2 var(--f);color:var(--ink);transition:background-color .15s ease}
.sh-pl img{width:22px;height:22px;object-fit:contain;flex:none}
.sh-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:6px}
.sh-ph{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:4/3;display:block;isolation:isolate}
.sh-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.23,1,.32,1)}
.sh-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,40,0) 45%,rgba(18,20,70,.72))}
.sh-ph b{position:absolute;left:14px;bottom:12px;z-index:1;font:600 16px/1.2 var(--fd);color:#fff}
.sh-ph:hover img{transform:scale(1.04)}
.sh-ln{padding:9px 10px;border-radius:10px;font:500 15px/1.3 var(--f);color:var(--ink);transition:background-color .15s ease}
.sh-col--side{padding:18px 10px;border-right:1px solid var(--line)}
.sh-big{display:flex;align-items:center;justify-content:space-between;padding:12px 12px;border-radius:12px;font:600 18px/1.2 var(--fd);color:var(--ink)}
.sh-big:hover{background:var(--tint)}
.sh-big svg{width:16px;height:16px;transition:transform .2s cubic-bezier(.23,1,.32,1)}
.sh-rule{display:block;height:1px;background:var(--line);margin:10px 12px}
.sh-sm{padding:8px 12px;border-radius:10px;font:400 14px/1.3 var(--f);color:var(--mut)}
.sh-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px}
.sh-post{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:18px;background:var(--tint);transition:background-color .15s ease,transform .2s cubic-bezier(.23,1,.32,1)}
.sh-post:hover{background:#EAF0FB}
.sh-post__d{font:500 13px/1 var(--f);color:var(--mut)}
.sh-post b{font:600 17px/1.3 var(--fd);color:var(--ink);text-wrap:balance}
.sh-post i{margin-top:auto;align-self:flex-start;font:600 14px/1 var(--f);font-style:normal;color:var(--navy);padding:9px 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #CDD5E0}

@media (max-width:1360px){.sh-nav{padding:0 40px;gap:28px}.sh-end{gap:18px}.sh-trigger{padding:0 12px}}
@media (max-width:1280px){.sh-nav{padding:0 32px;gap:22px}.sh-trigger{padding:0 10px}.sh-panel--product{grid-template-columns:250px 1fr 1fr}.sh-panel--product .sh-aside{display:none}}

/* phones and small laptops: one button opens a full menu with sections that fold open */
@media (max-width:1200px){
  .sh-nav{height:64px;padding:0 20px;gap:12px}
  .sh-brand img{height:22px}
  .sh-brand{gap:8px}.sh-brand .sh-mark{height:19px;width:19px}
  .sh-in{display:none}
  .sh-end{gap:10px}
  .sh-end .sh-pill{height:40px;padding:0 15px;font-size:14px;white-space:nowrap;flex:none}
  .sh-burger{display:grid;place-content:center;gap:5px;width:40px;height:40px;border:0;border-radius:999px;background:rgba(255,255,255,.14);cursor:pointer}
  .sh-burger span{display:block;width:16px;height:1.8px;border-radius:2px;background:#fff;transition:transform .22s cubic-bezier(.23,1,.32,1)}
  .sh-bar.is-menu .sh-burger span:first-child{transform:translateY(3.4px) rotate(45deg)}
  .sh-bar.is-menu .sh-burger span:last-child{transform:translateY(-3.4px) rotate(-45deg)}
  .sh-bar.is-menu{position:fixed;transform:none;background:linear-gradient(90deg,#121A58 0%,#1B2B7B 55%,#2B2F8F 100%)}
  .sh-menu{position:fixed;top:64px;left:0;right:0;bottom:0;overflow-y:auto;overscroll-behavior:contain;background:#fff;color:var(--ink);padding:8px 20px 28px;display:none}
  .sh-bar.is-menu .sh-menu{display:block}
  .sh-top{display:block}
  .sh-top>li{border-bottom:1px solid var(--line)}
  .sh-trigger{width:100%;height:58px;padding:0 4px;justify-content:space-between;color:var(--ink);font:600 18px/1 var(--fd);border-radius:0}
  .sh-trigger svg{width:14px;height:14px}
  .sh-trigger:hover,.sh-item.is-open .sh-trigger{background:transparent}
  .sh-panel,.sh-panel--co{position:static;width:auto;display:none;opacity:1;visibility:visible;transform:none;transition:none;box-shadow:none;border-radius:0;padding:0 0 14px;grid-template-columns:1fr!important;gap:0}
  .sh-item.is-open>.sh-panel{display:grid;transform:none}
  .sh-feat,.sh-aside,.sh-photos,.sh-posts,.sh-rule,.sh-it em{display:none}
  .sh-col,.sh-col--side{padding:0;border:0}
  .sh-h{padding:10px 4px 6px}
  .sh-it,.sh-pl,.sh-ln,.sh-sm,.sh-big{padding:10px 4px}
  .sh-it .sh-ic,.sh-it .sh-lg{width:32px;height:32px;border-radius:10px}
  .sh-big{font:500 15px/1.3 var(--f)}
  .sh-big svg{display:none}
  .sh-sm{color:var(--ink);font-size:15px}
  .sh-grid2{grid-template-columns:1fr 1fr}
  .sh-mob-end{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
  .sh-mob-end .sh-pill{height:48px}
  .sh-pill--line{background:#fff;box-shadow:inset 0 0 0 1px #CDD5E0}
}
@media (prefers-reduced-motion:reduce){.sh-bar,.sh-bar *{transition:none!important}}
/* pages that start light: the same bar on the navy it takes once scrolled. The old bar was 52px tall and those pages
   leave room for it, so the spacer adds only the difference (84px bar, 64px on narrower screens). */
.sh-bar--solid{background:linear-gradient(90deg,#121A58 0%,#1B2B7B 55%,#2B2F8F 100%)}
.sh-space{height:32px}
@media (max-width:1200px){.sh-space{height:12px}}
/* the article top (blog posts, comparisons, fixes, connect pages) left 32px under the old see-through bar below 1080px,
   so its first line sat under it; clear the solid bar instead */
@media (max-width:1080px){.sh-space~.sr-hero{padding-top:80px}}
/* small phones: a tighter bar, so the call to action and the menu button both fit */
@media (max-width:374px){.sh-nav{padding:0 14px;gap:8px}.sh-brand img{height:19px}.sh-brand .sh-mark{height:16px;width:16px}.sh-end{gap:8px}.sh-end .sh-pill{padding:0 12px;font-size:13px}}
/* where it still cannot fit (a long translation, a 320px screen) the call to action steps out of the bar; it stays in the menu */
.sh-bar.is-tight .sh-end .sh-pill{display:none}