/* Integration Atlas styles from github.com/Blakew316/Integrations @ 83ecbc2, scoped to the Integrations tab (#atlas) by tools/sync-integrations.mjs. Do not edit; re-run the tool. */
#atlas{--page:#F5F5F7; --card:#FFFFFF; --group:#F5F5F7; --elev:#FFFFFF;
    --ink:#1D1D1F; --navy:#0D1B4C; --slate:#6E6E73; --faint:#AEAEB2;
    --line:rgba(0,0,0,.08); --hairline:rgba(0,0,0,.06);
    --blue:#097BE8; --blue-tx:#0071E3; --green:#2FB65F; --green-tx:#1E8747;
    --seg:#E9E9EB; --chipsel:#1D1D1F;
    --navbg:rgba(255,255,255,.78); --toolbg:rgba(245,245,247,.88);
    --shadow-card:0 1px 2px rgba(0,0,0,.04), 0 0 0 .5px rgba(0,0,0,.03);
    --shadow-hover:0 12px 32px rgba(0,0,0,.09), 0 0 0 .5px rgba(0,0,0,.03);
    --shadow-sheet:0 24px 80px rgba(0,0,0,.22);
    --pos-bg:#E8F1FC; --pos-tx:#0A5FBE;
    --virt-bg:#E9F6EE; --virt-tx:#1E8747;
    --gw-bg:#FBF2DF; --gw-tx:#8F6A0A;
    --api-bg:#F0EDFB; --api-tx:#5E45B4;
    --int-bg:#EEEEF0; --int-tx:#6E6E73;
    --sf:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;}
body.dark #atlas{--page:#000000; --card:#1C1C1E; --group:#2C2C2E; --elev:#1C1C1E;
    --ink:#F5F5F7; --navy:#F5F5F7; --slate:#98989D; --faint:#636366;
    --line:rgba(255,255,255,.14); --hairline:rgba(255,255,255,.09);
    --blue:#3D9BF0; --blue-tx:#409CFF; --green:#30D158; --green-tx:#4ADE80;
    --seg:#2C2C2E; --chipsel:#F5F5F7;
    --navbg:rgba(22,22,24,.78); --toolbg:rgba(0,0,0,.82);
    --shadow-card:0 1px 2px rgba(0,0,0,.4);
    --shadow-hover:0 12px 32px rgba(0,0,0,.55);
    --shadow-sheet:0 24px 80px rgba(0,0,0,.7);
    --pos-bg:#14294D; --pos-tx:#7FBCF3;
    --virt-bg:#12382B; --virt-tx:#6BD597;
    --gw-bg:#3A2F14; --gw-tx:#E4BE62;
    --api-bg:#251D45; --api-tx:#B3A1EE;
    --int-bg:#2C2C2E; --int-tx:#98989D;}
#atlas *{box-sizing:border-box}
#atlas{scroll-behavior:smooth}
#atlas,#atlas{margin:0}
#atlas{background:var(--page); color:var(--ink); font-family:var(--sf);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    min-height:100vh; font-size:15px;}
#atlas .wrap{max-width:1840px; margin:0 auto; padding:0 clamp(24px, 3.2vw, 64px)}
#atlas a{color:var(--blue-tx)}
#atlas .top{padding-top:28px}
#atlas .nav-brand{display:inline-flex; align-items:center; gap:14px; text-decoration:none}
#atlas .nav-brand svg{width:30px; height:42px; display:block}
#atlas .nav-brand .t{font-size:22px; letter-spacing:-.015em; color:var(--navy); font-weight:600}
#atlas .nav-brand .t span{color:var(--slate); font-weight:400}
#atlas .hero{padding:46px 0 10px; text-align:center}
#atlas .hero .eyebrow{margin:0 0 10px; font-size:12px; font-weight:600; letter-spacing:.12em;
    text-transform:uppercase; color:var(--slate);}
#atlas .hero h1{margin:0; font-size:clamp(48px,7.4vw,104px); font-weight:700;
    letter-spacing:-.028em; line-height:1.02; color:var(--ink); text-wrap:balance;}
#atlas .hero h1 .accent{color:var(--blue-tx)}
#atlas .hero .sub{margin:20px auto 0; max-width:72ch; color:var(--slate);
    font-size:clamp(17px,1.4vw,21px); line-height:1.5; letter-spacing:-.005em; text-wrap:pretty;}
#atlas .toolbar{position:sticky; top:0; z-index:40;
    background:var(--toolbg);
    -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid var(--hairline);
    padding:12px 0 0; margin-top:26px;}
#atlas .controls{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
#atlas .search{flex:1 1 300px; display:flex; align-items:center; gap:9px;
    border-radius:12px; padding:0 14px; height:40px;
    background:var(--card); box-shadow:var(--shadow-card);
    transition:box-shadow .15s ease;}
#atlas .search:focus-within{box-shadow:0 0 0 3.5px color-mix(in srgb, var(--blue) 28%, transparent), var(--shadow-card)}
#atlas .search svg{width:15px; height:15px; flex:none; stroke:var(--faint)}
#atlas .search input{border:0; outline:0; background:transparent; color:var(--ink);
    font:inherit; font-size:14.5px; letter-spacing:-.005em; width:100%; height:100%;}
#atlas .search input::placeholder{color:var(--faint)}
#atlas .search kbd{font-family:var(--sf); font-size:11px; color:var(--faint);
    border:1px solid var(--line); border-radius:5px; padding:1px 6px;}
#atlas .seg{display:flex; background:var(--seg); border-radius:10px; padding:2px; gap:2px; flex:none;}
#atlas .seg button{border:0; background:transparent; color:var(--slate); font:inherit; font-size:12.5px;
    font-weight:500; letter-spacing:-.005em; padding:7px 13px; border-radius:8px; cursor:pointer;
    transition:background .14s ease, color .14s ease, box-shadow .14s ease;
    white-space:nowrap;}
#atlas .seg button[aria-pressed="true"]{background:var(--elev); color:var(--ink); font-weight:600;
    box-shadow:0 1px 4px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04);}
#atlas .seg button:focus-visible{outline:2px solid var(--blue); outline-offset:1px}
#atlas select{appearance:none; -webkit-appearance:none; height:40px; padding:0 32px 0 14px;
    border:0; border-radius:12px; background:var(--card); box-shadow:var(--shadow-card);
    color:var(--ink); font:inherit; font-size:13px; font-weight:500; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E6E73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center;}
#atlas select:focus-visible{outline:none; box-shadow:0 0 0 3.5px color-mix(in srgb, var(--blue) 28%, transparent), var(--shadow-card)}
#atlas .cats{display:flex; gap:8px; overflow-x:auto; padding:12px 0 13px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;}
#atlas .cats::-webkit-scrollbar{display:none}
#atlas .cat{flex:none; border:0; border-radius:999px;
    background:var(--seg); color:var(--ink); font:inherit; font-size:13px; font-weight:500;
    letter-spacing:-.005em; padding:8px 15px; cursor:pointer; white-space:nowrap;
    transition:background .13s ease, color .13s ease;}
#atlas .cat:hover{background:color-mix(in srgb, var(--seg) 70%, var(--slate) 12%)}
#atlas .cat[aria-pressed="true"]{background:var(--chipsel); color:var(--page); font-weight:600}
#atlas .cat .n{font-size:11px; color:var(--faint); margin-left:6px; font-variant-numeric:tabular-nums}
#atlas .cat[aria-pressed="true"] .n{color:inherit; opacity:.6}
#atlas .cat:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
#atlas .meta-row{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
    padding:20px 0 12px; flex-wrap:wrap;}
#atlas .count{font-size:12.5px; color:var(--slate); letter-spacing:.01em}
#atlas .count b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
#atlas .legend-btn{border:0; background:none; color:var(--blue-tx); font:inherit; font-size:12.5px;
    font-weight:500; cursor:pointer; padding:0;}
#atlas .legend-btn:hover{text-decoration:underline}
#atlas .legend{display:none; border-radius:16px; background:var(--card); box-shadow:var(--shadow-card);
    padding:18px 22px; margin:0 0 16px; font-size:13.5px; line-height:1.65; color:var(--slate);
    letter-spacing:-.003em;}
#atlas .legend.open{display:block}
#atlas .legend b{color:var(--ink); font-weight:600}
#atlas .legend .pill{margin-right:4px}
#atlas .grid{display:grid; gap:16px; padding:4px 10px 28px 2px;
    grid-template-columns:repeat(auto-fill, minmax(310px, 1fr));
    max-height:min(72vh, 1080px); overflow-y:auto; overscroll-behavior:contain;
    scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--slate) 40%, transparent) transparent;
    margin-bottom:34px;}
#atlas .grid::-webkit-scrollbar{width:9px}
#atlas .grid::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--slate) 32%, transparent); border-radius:5px}
#atlas .grid::-webkit-scrollbar-track{background:transparent}
#atlas .item{text-align:left; border:0; border-radius:18px;
    background:var(--card); padding:20px 20px 16px; cursor:pointer;
    display:flex; flex-direction:column; gap:10px; font:inherit; color:inherit;
    box-shadow:var(--shadow-card);
    transition:transform .18s cubic-bezier(.32,.72,.28,1), box-shadow .18s ease;}
#atlas .item:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover)}
#atlas .item:focus-visible{outline:2.5px solid var(--blue); outline-offset:2px}
#atlas .item-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
#atlas .item h3{margin:0; font-size:17px; font-weight:600; letter-spacing:-.015em; line-height:1.25}
#atlas .item .cat-label{font-size:11.5px; font-weight:500; color:var(--slate); margin-top:3px; display:block;
    letter-spacing:.01em;}
#atlas .score{flex:none; min-width:42px; height:42px; border-radius:12px; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    background:var(--group); color:var(--ink); line-height:1;}
#atlas .score b{font-size:16px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
#atlas .score i{font-style:normal; font-size:8.5px; opacity:.6; margin-top:2px; font-weight:500; color:var(--slate)}
#atlas .score.lo{opacity:.7}
#atlas .item .blurb{margin:0; font-size:13.5px; line-height:1.5; color:var(--slate); min-height:2.95em;
    letter-spacing:-.003em;}
#atlas .item-foot{display:flex; align-items:center; justify-content:space-between; gap:10px;
    border-top:1px solid var(--hairline); padding-top:12px; margin-top:auto;}
#atlas .fee{font-size:12.5px; font-weight:600; letter-spacing:-.005em; color:var(--ink); font-variant-numeric:tabular-nums}
#atlas .foot-right{display:flex; align-items:center; gap:7px}
#atlas .has-contact{display:inline-flex; color:var(--slate)}
#atlas .has-contact svg{width:13px; height:13px}
#atlas .share-btn{display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:8px; color:var(--slate); cursor:pointer;
    transition:background .12s ease, color .12s ease;}
#atlas .share-btn:hover{background:var(--group); color:var(--ink)}
#atlas .share-btn:focus-visible{outline:2px solid var(--blue); outline-offset:1px}
#atlas .share-btn svg{width:14px; height:14px}
#atlas .visit.alt{background:var(--ink); margin-bottom:10px}
body.dark #atlas .visit.alt{color:#000}
#atlas .pill{flex:none; font-size:10.5px; font-weight:600; letter-spacing:.02em;
    border-radius:999px; padding:4.5px 10px;}
#atlas .pill{background:var(--int-bg); color:var(--int-tx)}
#atlas .empty{grid-column:1/-1; text-align:center; padding:80px 20px; color:var(--slate)}
#atlas .empty b{display:block; font-size:19px; font-weight:600; color:var(--ink); margin-bottom:6px; letter-spacing:-.015em}
#atlas .overlay{position:fixed; inset:0; z-index:60; display:none;
    background:rgba(0,0,0,.32); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);}
#atlas .overlay.open{display:block}
#atlas .sheet{position:fixed; z-index:61; top:0; right:0; bottom:0; width:min(500px, 100%);
    background:var(--elev); box-shadow:var(--shadow-sheet); transform:translateX(103%);
    transition:transform .32s cubic-bezier(.32,.72,.28,1);
    display:flex; flex-direction:column; overflow-y:auto;}
#atlas .sheet.open{transform:translateX(0)}
#atlas .sheet-head{padding:30px 30px 22px; position:relative; display:flex; flex-direction:column; gap:11px}
#atlas .sheet-close{position:absolute; top:20px; right:20px; width:30px; height:30px;
    border:0; border-radius:50%; background:var(--group);
    color:var(--slate); cursor:pointer; font-size:13px; line-height:1; font-weight:600;
    display:flex; align-items:center; justify-content:center;}
#atlas .sheet-close:hover{color:var(--ink)}
#atlas .sheet-close:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
#atlas .sheet-head .cat-label{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--slate)}
#atlas .sheet-head h2{margin:0; font-size:28px; font-weight:700; letter-spacing:-.022em; line-height:1.12; padding-right:40px; text-wrap:balance}
#atlas .sheet-head .blurb{margin:0; color:var(--slate); font-size:14.5px; line-height:1.5; letter-spacing:-.005em}
#atlas .sheet-tags{display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-top:2px}
#atlas .sheet-body{padding:0 22px 6px; display:flex; flex-direction:column; gap:12px}
#atlas .group-box{background:var(--group); border-radius:16px; padding:18px 20px}
#atlas .group-box .lbl{font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
    color:var(--slate); margin:0 0 12px;}
#atlas .meter-row{display:flex; align-items:center; gap:14px}
#atlas .meter{display:flex; gap:4px; flex:1}
#atlas .meter i{height:7px; flex:1; border-radius:3.5px; background:color-mix(in srgb, var(--slate) 18%, transparent)}
#atlas .meter i.on{background:var(--green)}
#atlas .meter-num{font-size:23px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
#atlas .meter-num small{font-size:12px; color:var(--slate); font-weight:500}
#atlas .contact-rows{display:flex; flex-direction:column}
#atlas .crow{display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:10px 0; border-top:1px solid var(--hairline); font-size:14px;}
#atlas .crow:first-child{border-top:0; padding-top:0}
#atlas .crow:last-child{padding-bottom:0}
#atlas .crow .k{color:var(--slate); font-size:13px; flex:none}
#atlas .crow .v{text-align:right; font-weight:500; letter-spacing:-.005em; word-break:break-word}
#atlas .crow .v a{text-decoration:none; font-weight:600; color:var(--blue-tx); font-variant-numeric:tabular-nums}
#atlas .crow .v a:hover{text-decoration:underline}
#atlas .contact-note{margin:0; font-size:13px; color:var(--slate); line-height:1.55}
#atlas .fee-big{font-size:20px; font-weight:700; letter-spacing:-.015em; margin:0; font-variant-numeric:tabular-nums}
#atlas .fee-note{margin:7px 0 0; font-size:13px; color:var(--slate); line-height:1.5}
#atlas .fee-src{margin:7px 0 0; font-size:11px; color:var(--faint); letter-spacing:.01em}
#atlas .benefits{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
#atlas .benefits li{display:flex; gap:11px; font-size:14px; line-height:1.45; align-items:flex-start; letter-spacing:-.005em}
#atlas .benefits svg{flex:none; width:17px; height:17px; margin-top:1px}
#atlas .sheet-cta{padding:12px 22px 30px}
#atlas .merchant-field{display:block; width:100%; height:44px; margin-bottom:10px; padding:0 16px;
    border:0; border-radius:12px; background:var(--group); color:var(--ink);
    font:inherit; font-size:14px; letter-spacing:-.005em; outline:none;
    transition:box-shadow .15s ease;}
#atlas .merchant-field::placeholder{color:var(--faint)}
#atlas .merchant-field:focus-visible{box-shadow:0 0 0 3.5px color-mix(in srgb, var(--blue) 28%, transparent)}
#atlas .ae-row{display:flex; gap:10px}
#atlas .ae-row .merchant-field{flex:1; min-width:0}
#atlas .visit{display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
    background:var(--blue); color:#fff; border:0; border-radius:980px;
    padding:13px 18px; font:inherit; font-size:15px; font-weight:600; letter-spacing:-.01em;
    cursor:pointer; text-decoration:none; transition:filter .12s ease;}
#atlas .visit:hover{filter:brightness(1.07)}
#atlas .visit:focus-visible{outline:2.5px solid var(--ink); outline-offset:2px}
#atlas .visit svg{width:13px; height:13px}
body.dark #atlas .visit{color:#000}
@media (max-width:720px){
#atlas .wrap{padding:0 16px}
#atlas .hero{padding:44px 0 24px}
#atlas .seg{overflow-x:auto; max-width:100%}
#atlas .sheet{width:100%}
}
@media (prefers-reduced-motion:reduce){
#atlas *{transition:none !important}
#atlas .item:hover{transform:none}
}

/* ─── In the cost comparison's Integrations tab ─── */
/* edge to edge under the site's header, like the Equipment tab (undoes .main's padding), with the page's own type */
#atlas{margin:-1.5rem -1.5rem 0;line-height:normal;letter-spacing:normal}
@media(max-width:900px){#atlas{margin:-1rem -1rem 0}}
@media(max-width:600px){#atlas{margin:-0.75rem -0.75rem 0}}
@media(max-height:500px) and (orientation:landscape){#atlas{margin:-0.5rem -0.5rem 0}}
/* the site's header already carries the Wholesale Payments logo */
#atlas .top{display:none}
/* paragraphs keep the browser's spacing the page was designed with (the site's reset takes it away) */
#atlas :where(p){margin:1em 0}
/* its brand sheet and messages sit above the site's header and the app's tab bar */
#atlas .overlay{z-index:1040}
#atlas .sheet{z-index:1041;overscroll-behavior:contain}
/* closed, the sheet is off the page: without its shadow (which fell across the right edge of the page) and hidden, so it's
   out of the tab order too; it hides once it has slid out */
#atlas .sheet:not(.open){box-shadow:none;visibility:hidden;transition:transform .32s cubic-bezier(.32,.72,.28,1),visibility 0s .32s}
/* a long category name stops short of the close button */
#atlas .sheet-head .cat-label{padding-right:44px}
#at-toast{z-index:1050!important}
/* on a phone: the brands run down the page with it rather than scrolling in a box of their own, the title is tighter
   (the site's header is above it), and the search and filters scroll away with the page instead of holding a fifth of
   the screen (tapping the tab again goes back to the top) */
@media(max-width:720px){
  #atlas .grid{max-height:none;overflow:visible;padding:4px 0 28px}
  #atlas .hero{padding:26px 0 4px}
  #atlas .hero h1{font-size:42px}
  #atlas .hero .sub{margin-top:12px;font-size:16px}
  #atlas .toolbar{position:static;margin-top:14px}
}
/* touch: the share button on each card is a full-size place to tap */
@media(pointer:coarse){#atlas .share-btn{width:36px;height:36px}#atlas .share-btn svg{width:17px;height:17px}}
/* the home-screen app: the toolbar sticks just under the status bar's strip (index.html, --sb), the sheet clears the
   status bar and the home bar, and messages sit above the tab bar */
html.pwa #atlas .toolbar{top:var(--sb)}
html.pwa #atlas .sheet-head{padding-top:calc(30px + var(--sb))}
html.pwa #atlas .sheet-close{top:calc(20px + var(--sb))}
html.pwa #atlas .sheet-cta{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
@media(max-width:900px),(max-height:500px){html.pwa #at-toast{bottom:calc(var(--tabbar-h, 56px) + env(safe-area-inset-bottom) + 12px)!important}}
/* the brand counts on the category pills: dark enough to read at a glance, not the page's faintest gray */
#atlas .cat .n{font-weight:600}
#atlas .cat:not([aria-pressed="true"]) .n{color:#3A3A3C}
body.dark #atlas .cat:not([aria-pressed="true"]) .n{color:#D1D1D6}
#atlas .cat[aria-pressed="true"] .n{opacity:.85}
/* speed: a card off the screen isn't laid out or painted until it scrolls near (624 of them made the tab take a second
   and a half to show on a phone, and each search keystroke nearly as long); 190px holds its place until then */
#atlas .item{content-visibility:auto;contain-intrinsic-size:auto 190px}
/* waiting for the directory, if the tab is opened before it has loaded in the background */
#atlas .atlas-wait{padding:18vh 20px;text-align:center;color:var(--slate);font-size:15px}