/* Scoped styles from zenwork-vendor-payments-aligned.html. */ .page-vendor-payments main{ /* Brand */ --green:#00AB52; --green-ink:#00814A; /* darker green for text on white (AA contrast) */ --green-deep:#0C331E; /* the single immersive dark canvas */ --lime:#ACD400; /* Official Green tonal system (reference palette) */ --g-025:#F7FCFA; --g-050:#E6F7EE; --g-100:#D9F2E5; --g-200:#B0E5C9; --g-300:#00AB52; --g-400:#009A44; --g-500:#008942; --g-600:#00803E; --g-700:#006731; --g-800:#004D25; --g-900:#003C1D; --yellow:#F2E400; --ink:#0F1822; --white:#FFFFFF; /* Light neutrals — the page is mostly these */ --paper:#FFFFFF; --paper-2:#FAFBFA; /* barely-there section alternation */ --mist:#F4F7F5; /* rare soft panel */ --line:#EAEEEB; /* hairlines, very light */ --line-2:#DEE5E0; --muted:#576560; --muted-2:#8A968F; /* On the one dark section */ --on-dark:#EAF3ED; --on-dark-muted:#9DB6A7; --on-dark-line:rgba(255,255,255,0.13); /* Product tonal scales — each sub-product's own brand palette, 025→900. These are NOT decoration; they build the actual UI of each product's artifact in the Platform section and the Integrations flow. The Zenwork parent brand (green/lime/yellow above) remains the page's foundation — these only appear inside a specific product's own experience. */ --compliancely-025:#F7FEFF; --compliancely-050:#EDFAFD; --compliancely-100:#E4F7FC; --compliancely-200:#C8EEF8; --compliancely-300:#4CC9E9; --compliancely-400:#44B5D2; --compliancely-500:#3DA1BA; --compliancely-600:#3997AF; --compliancely-700:#2E798C; --compliancely-800:#225A69; --compliancely-900:#1B4652; --payments-025:#FFFCF2; --payments-050:#FFF6D9; --payments-100:#FFE9A8; --payments-200:#FFD66A; --payments-300:#FDB600; --payments-400:#E6A400; --payments-500:#CC9100; --payments-600:#B37E00; --payments-700:#8F6400; --payments-800:#6B4A00; --payments-900:#473100; --tax1099-025:#F5F8FE; --tax1099-050:#E6EDF8; --tax1099-100:#D9E3F5; --tax1099-200:#B0C6EA; --tax1099-300:#0047BB; --tax1099-400:#0040A8; --tax1099-500:#003996; --tax1099-600:#00358C; --tax1099-700:#002B70; --tax1099-800:#002054; --tax1099-900:#00122E; --serif:'Rowan',Georgia,'Times New Roman',serif; --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --maxw:clamp(1200px, 90vw, 1600px); --maxw-wide:1320px; --edge:24px; /* single source of truth for the page's horizontal inset — the floating nav pill uses this exact value, so resting content and the scrolled pill always line up, at every viewport width */ --gap:clamp(80px,9vw,132px); /* major-section top/bottom padding — the approved Landing Page rhythm token. Single source of truth for generic .section vertical rhythm at every breakpoint; no tablet/mobile-specific override exists for this rule. Component-level responsive behavior (hero, diagrams, visual stages, stories, testimonial, CTA, footer) is a separate concern and keeps its own breakpoint-aware rules elsewhere in this file. */ --head-gap:clamp(44px,4vw,56px); /* heading block -> main visual */ --story-gap:clamp(44px,4.2vw,64px); /* main visual -> supporting stories */ --story-pad:34px; /* story-row divider -> story copy */ --story-col-gap:56px; /* gap between supporting-story columns */ --visual-stage-pad:clamp(28px,2.5vw,36px); /* single shared outer padding for every narrative visual stage — do not override per-section */ --divider-soft:rgba(15,24,34,.07); /* quiet structural dividers — felt, not seen */ --r-lg:18px; --r-md:12px; --r-sm:8px; /* ---- Mobile rhythm system (<=767px) — one explicit scale so every narrative section, stage and story block on a phone shares the same spacing grammar instead of each section inventing its own. Generic .section vertical padding is NOT part of this list — it uses the shared --gap clamp uniformly at every breakpoint, no mobile-specific override. ---- */ --mobile-edge:24px; --mobile-head-to-visual:32px; --mobile-visual-to-stories:32px; --mobile-story-gap:24px; --mobile-stage-pad:14px; --mobile-radius-stage:18px; --shadow-sm:0 1px 2px rgba(15,24,34,0.04); --shadow:0 1px 3px rgba(15,24,34,0.05), 0 18px 40px -22px rgba(15,24,34,0.16); --shadow-lift:0 2px 6px rgba(15,24,34,0.06), 0 30px 70px -28px rgba(15,24,34,0.22); --ease:cubic-bezier(0.22,0.61,0.36,1); } .page-vendor-payments main *,.page-vendor-payments main *::before,.page-vendor-payments main *::after{box-sizing:border-box;} .page-vendor-payments main{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} .page-vendor-payments main{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden; } .page-vendor-payments main img,.page-vendor-payments main svg{max-width:100%;display:block;} .page-vendor-payments main a{color:inherit;text-decoration:none;} .page-vendor-payments main h1,.page-vendor-payments main h2,.page-vendor-payments main h3,.page-vendor-payments main h4{margin:0;font-family:var(--serif);font-weight:400;} .page-vendor-payments main p{margin:0;} .page-vendor-payments main blockquote{margin:0;padding:0;} .page-vendor-payments main ul{margin:0;padding:0;list-style:none;} .page-vendor-payments main .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} .page-vendor-payments main button{font-family:inherit;cursor:pointer;} .page-vendor-payments main :focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px;} .page-vendor-payments main button:focus-visible{outline-offset:2px;} .page-vendor-payments main a:focus-visible{border-radius:6px;} .page-vendor-payments main .skip-link{ position:absolute;top:-100px;left:16px;z-index:9999; background:var(--ink);color:#fff;padding:10px 20px;border-radius:8px; font-size:14px;font-weight:600; transition:top 200ms var(--ease); } .page-vendor-payments main .skip-link:focus{top:12px;} @media (prefers-reduced-motion:reduce){.page-vendor-payments main{scroll-behavior:auto;}.page-vendor-payments main *{transition-duration:0.01ms!important;animation-duration:0.01ms!important;}} /* Primitives */ .page-vendor-payments main .wrap{width:min(calc(100% - (var(--edge) * 2)), var(--maxw));margin-inline:auto;} .page-vendor-payments main .wrap--wide{max-width:var(--maxw-wide);} @media (max-width:640px){.page-vendor-payments main{--edge:20px;}} .page-vendor-payments main .section{padding:var(--gap) 0;scroll-margin-top:130px;} .page-vendor-payments main .section + .section:not(.alt){border-top:1px solid var(--line);} /* Light-A/Light-B narrative sections use tonal environment changes instead of gray hairlines for separation, so the generic adjacent- section border is suppressed here unconditionally (not just at desktop) — matches the 1099 use-case page system. */ .page-vendor-payments main .section.m-light-a,.page-vendor-payments main .section.m-light-b{border-top:0!important;} .page-vendor-payments main .alt{background:var(--paper-2);} .page-vendor-payments main .reveal{opacity:0;transform:translateY(20px);transition:opacity 850ms var(--ease),transform 850ms var(--ease);} .page-vendor-payments main .reveal.in{opacity:1;transform:none;} .page-vendor-payments main .reveal[data-d="1"]{transition-delay:.08s;} .page-vendor-payments main .reveal[data-d="2"]{transition-delay:.16s;} .page-vendor-payments main .reveal[data-d="3"]{transition-delay:.24s;} /* Type scale — big, editorial */ .page-vendor-payments main .eyebrow{ font-family:var(--sans);font-size:12.5px;font-weight:700; letter-spacing:0.15em;text-transform:uppercase;color:var(--muted-2); display:block;margin-bottom:22px; } .page-vendor-payments main .display{ font-family:var(--serif); font-size:clamp(64px,8.6vw,124px);line-height:1.06;letter-spacing:-0.025em; } .page-vendor-payments main .display .it{font-style:italic;} .page-vendor-payments main .h2{font-family:var(--serif);font-size:var(--type-h2);line-height:1.08;letter-spacing:-0.018em;} .page-vendor-payments main .h3{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);line-height:1.12;letter-spacing:-0.012em;} .page-vendor-payments main .lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--muted);} .page-vendor-payments main .measure{max-width:56ch;} /* ============================================================ SHARED ZENWORK PRIMITIVES — reused verbatim from the approved 1099 / Business Verification use-case system. Mobile/tablet keep the same base values these pages already shipped with; only the 1024px+ override block (further below) changes size/ alignment for desktop, matching the established pattern of never touching the mobile-safe inline defaults. ============================================================ */ .page-vendor-payments main .m-narrative-h2{font-family:var(--serif);font-weight:400;line-height:1.04;letter-spacing:-0.02em;margin:0 auto;text-align:center;text-wrap:balance;} .page-vendor-payments main .m-head-intro{margin-bottom:var(--head-gap);} /* VISUAL STAGE — the brand environment a narrative visual sits in. Subtle atmosphere only; the actual product/illustration surface is the white .m-visual-surface nested inside it. */ .page-vendor-payments main .m-visual-stage{ position:relative;border-radius:24px; background: radial-gradient(circle at 12% 18%, rgba(0,171,82,.07), transparent 34%), radial-gradient(circle at 88% 82%, rgba(242,228,0,.05), transparent 32%), linear-gradient(135deg, #F1F8F4 0%, #F7FAF8 48%, #FFFCEB 100%); border:1px solid rgba(0,129,74,.07); padding:var(--visual-stage-pad); box-shadow:inset 0 1px 0 rgba(255,255,255,.6); overflow:hidden; } .page-vendor-payments main .m-light-b .m-visual-stage{ background: radial-gradient(circle at 90% 85%, rgba(242,228,0,.06), transparent 34%), radial-gradient(circle at 6% 10%, rgba(0,171,82,.03), transparent 26%), linear-gradient(115deg, #FFFFFF 0%, #FBFDFB 54%, #FFFBE7 100%); border:1px solid rgba(15,24,34,.06); } /* LIGHT SECTION ENVIRONMENTS — two reusable quiet backgrounds for narrative sections, alternated for separation. */ .page-vendor-payments main .m-light-a{background:radial-gradient(62% 68% at 78% 6%, rgba(0,171,82,.075), transparent 66%),var(--paper);} .page-vendor-payments main .m-light-b{background:radial-gradient(52% 56% at 16% 92%, rgba(172,212,0,.04), transparent 60%),var(--mist);} /* Buttons — marketing primary is the approved yellow system; green is reserved for product-UI illustrations only */ .page-vendor-payments main .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; height:52px;padding:0 26px;border-radius:999px;font-size:15.5px;font-weight:600; border:0;line-height:1;transition:transform 200ms var(--ease),background 200ms,box-shadow 200ms;white-space:nowrap; } .page-vendor-payments main .btn svg{width:16px;height:16px;transition:transform 260ms var(--ease);} .page-vendor-payments main .btn:hover svg{transform:translateX(3px);} .page-vendor-payments main .btn--primary,.page-vendor-payments main .btn--yellow{background:linear-gradient(105deg,#F2E400 0%,#E8DB00 58%,#DACD00 100%);color:#241F00;box-shadow:0 10px 24px -14px rgba(36,31,0,.32);} .page-vendor-payments main .btn--primary:hover,.page-vendor-payments main .btn--yellow:hover{transform:translateY(-1px);background:linear-gradient(105deg,#F2E400 0%,#E3D600 50%,#CFC300 100%);box-shadow:0 14px 28px -14px rgba(36,31,0,.38);} .page-vendor-payments main .btn--primary:active,.page-vendor-payments main .btn--yellow:active{transform:translateY(0);box-shadow:0 6px 16px -12px rgba(36,31,0,.26);} .page-vendor-payments main .btn:focus-visible{outline-offset:3px;} .page-vendor-payments main .btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2);} .page-vendor-payments main .btn--ghost:hover{border-color:var(--ink);} .page-vendor-payments main .btn--lg{height:58px;padding:0 34px;font-size:16.5px;} .page-vendor-payments main .textlink{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;color:var(--green-ink);} .page-vendor-payments main .textlink svg{width:15px;height:15px;transition:transform 240ms var(--ease);} .page-vendor-payments main .textlink:hover svg{transform:translateX(4px);} .page-vendor-payments main .textlink--ink{color:var(--ink);} .page-vendor-payments main .brand-mark{display:inline-flex;align-items:center;margin-right:9px;vertical-align:-3px;} .page-vendor-payments main .brand-mark img{display:block;height:16.5px;width:auto;} /* section heading block */ .page-vendor-payments main .shead{max-width:52ch;margin-bottom:clamp(48px,6vw,76px);} .page-vendor-payments main .shead .h2{margin-bottom:0;} .page-vendor-payments main .shead p{margin-top:22px;font-size:19px;line-height:1.55;color:var(--muted);max-width:50ch;} .page-vendor-payments main .shead--center{margin-left:auto;margin-right:auto;text-align:center;} .page-vendor-payments main .shead--center p{margin-left:auto;margin-right:auto;} .page-vendor-payments main .util{background:var(--ink);color:var(--on-dark-muted);font-size:13px;} .page-vendor-payments main .util .wrap{display:flex;justify-content:flex-end;align-items:center;gap:20px;height:38px;} .page-vendor-payments main .util a:hover{color:#fff;} .page-vendor-payments main .util .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.4;} .page-vendor-payments main .nav{position:sticky;top:0;z-index:100;transition:padding 420ms var(--ease);} .page-vendor-payments main .nav__utility{ background: radial-gradient(60% 140% at 78% 50%, rgba(0,171,82,.06), transparent 70%), linear-gradient(120deg, #FFFFFF 0%, #FFFFFF 55%, #FFFFFF 100%); border-bottom:1px solid var(--line); max-width:100%; transition:background 420ms var(--ease),border-color 420ms var(--ease),box-shadow 420ms var(--ease),border-radius 420ms var(--ease),max-width 420ms var(--ease); } .page-vendor-payments main .nav__utility .wrap{display:flex;align-items:center;height:52px;gap:20px;transition:height 420ms var(--ease),padding 420ms var(--ease);} .page-vendor-payments main .nav__main{ background: radial-gradient(60% 140% at 78% 50%, rgba(0,171,82,.06), transparent 70%), linear-gradient(120deg, #FFFFFF 0%, #FFFFFF 55%, #FFFFFF 100%); border-bottom:1px solid var(--line); max-height:61px;overflow:hidden; transition:max-height 420ms var(--ease),opacity 420ms var(--ease),border-color 420ms var(--ease); } .page-vendor-payments main .nav__main.has-open, .page-vendor-payments main .nav__main:has(.navitem[data-open="true"]){overflow:visible;} .page-vendor-payments main .nav__main .wrap{display:flex;align-items:center;height:60px;gap:36px;position:relative;} .page-vendor-payments main .brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:22px;letter-spacing:-0.01em;color:var(--ink);} .page-vendor-payments main .brand__lockup{height:26px;width:auto;object-fit:contain;display:block;transition:height 380ms var(--ease);} .page-vendor-payments main .brand__mark{width:28px;height:28px;flex:none;object-fit:contain;display:block;} .page-vendor-payments main .navlinks{display:flex;align-items:center;gap:4px;margin-left:auto;} .page-vendor-payments main .navitem{position:relative;} .page-vendor-payments main .navlink{display:inline-flex;align-items:center;gap:5px;height:60px;padding:0 14px;font-size:15px;font-weight:500;color:var(--ink);opacity:.86;background:none;border:0;font-family:inherit;cursor:pointer;transition:opacity 160ms;} .page-vendor-payments main .navlink:hover{opacity:1;} .page-vendor-payments main .navlink .chev{width:11px;height:11px;color:var(--muted-2);transition:transform 240ms var(--ease),color 240ms var(--ease);} .page-vendor-payments main .navitem[data-open="true"] .navlink{opacity:1;} .page-vendor-payments main .navitem[data-open="true"] .navlink .chev{transform:rotate(180deg);color:var(--green);} /* Dropdown panels — kept light for content readability, but tied back to the dark parent with a brand-tinted edge instead of a plain gray border. */ .page-vendor-payments main .navpanel{ position:fixed;top:113px;left:0;right:0;width:100%; background:#fff;border-top:1px solid var(--line); box-shadow:0 26px 50px -18px rgba(6,20,12,.25); padding:32px clamp(24px,4vw,64px) 40px; opacity:0;transform:translateY(-6px);pointer-events:none;visibility:hidden; transition:opacity 220ms var(--ease),transform 220ms var(--ease),visibility 220ms; z-index:110; } .page-vendor-payments main .nav.scrolled .navpanel{top:64px;} .page-vendor-payments main .navpanel__inner{} .page-vendor-payments main .navpanel__items{display:flex;flex-wrap:wrap;gap:8px 28px;} .page-vendor-payments main .navpanel__head{display:flex;align-items:center;gap:9px;padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line);} .page-vendor-payments main .navpanel__head-mark{width:10px;height:12px;flex:none;background-image:url(data:image/png;base64,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);background-size:contain;background-repeat:no-repeat;background-position:center;} .page-vendor-payments main .navpanel__head-label{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);} .page-vendor-payments main .navpanel__item{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;transition:background 160ms;box-sizing:border-box;} .page-vendor-payments main .navpanel__item--c3{flex:0 0 calc(33.333% - 19px);} .page-vendor-payments main .navpanel__item--c4{flex:0 0 calc(25% - 21px);} .page-vendor-payments main .navpanel__item--c5{flex:0 0 calc(20% - 23px);} .page-vendor-payments main .navpanel__item:hover{background:var(--g-050);} .page-vendor-payments main .navpanel__item-ic{ width:42px;height:42px;flex:none;border-radius:11px; display:flex;align-items:center;justify-content:center; border:1px solid var(--line);background:#fff;color:var(--muted); transition:color 160ms,border-color 160ms; } .page-vendor-payments main .navpanel__item:hover .navpanel__item-ic{color:var(--green-ink);border-color:var(--g-200);} .page-vendor-payments main .navpanel__item-ic svg{width:19px;height:19px;} .page-vendor-payments main .navpanel__item-body b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:-0.005em;margin-bottom:2px;} .page-vendor-payments main .navpanel__item-body span{display:block;font-size:12.5px;color:var(--muted-2);font-weight:400;line-height:1.4;} .page-vendor-payments main .navitem[data-open="true"] .navpanel{opacity:1;transform:none;pointer-events:auto;visibility:visible;} .page-vendor-payments main .navpanel--wide{min-width:560px;grid-template-columns:1fr 1fr;display:grid;gap:6px 26px;} .page-vendor-payments main .navpanel--extra{min-width:820px;grid-template-columns:1fr 1fr 1fr;display:grid;gap:6px 24px;} .page-vendor-payments main .navpanel--products{min-width:640px;padding:18px;} .page-vendor-payments main .navpanel__primary-row{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid var(--line);} .page-vendor-payments main .navpanel__primary{display:block;padding:12px 12px;border-radius:10px;transition:background 160ms;} .page-vendor-payments main .navpanel__primary:hover{background:var(--paper-2);} .page-vendor-payments main .navpanel__primary__name{display:block;font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-0.005em;margin-bottom:2px;} .page-vendor-payments main .navpanel__primary small{display:block;font-size:12px;color:var(--muted-2);font-weight:400;} .page-vendor-payments main .navpanel__others{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px;} .page-vendor-payments main .navpanel__lbl{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);padding:0 10px 8px;} .page-vendor-payments main .navpanel__group{padding:6px 4px;} .page-vendor-payments main .navpanel a:not(.navpanel__item){display:block;padding:9px 10px;border-radius:8px;font-size:14.5px;font-weight:500;color:var(--ink);opacity:.9;transition:background 160ms,opacity 160ms;} .page-vendor-payments main .navpanel a:not(.navpanel__item):hover{background:var(--paper-2);opacity:1;} .page-vendor-payments main .navpanel a:not(.navpanel__item) small{display:block;font-size:12.5px;color:var(--muted-2);font-weight:400;margin-top:1px;} .page-vendor-payments main .navlinks__mobileauth{display:none;} .page-vendor-payments main .nav__right{margin-left:auto;display:flex;align-items:center;gap:6px;} .page-vendor-payments main .nav__login{padding:0 14px;height:38px;display:inline-flex;align-items:center;font-size:14.5px;font-weight:600;border-radius:999px;color:var(--ink);opacity:.92;transition:background 160ms,opacity 160ms;} .page-vendor-payments main .nav__login:hover{background:var(--paper-2);opacity:1;} .page-vendor-payments main .nav__signup{padding:0 18px;height:38px;display:inline-flex;align-items:center;font-size:14.5px;font-weight:600;border-radius:999px;border:1px solid var(--line-2);color:var(--ink);transition:border-color 160ms,background 160ms;} .page-vendor-payments main .nav__signup:hover{border-color:var(--muted-2);background:var(--paper-2);} .page-vendor-payments main .navtoggle{display:none;background:none;border:1px solid var(--line-2);color:var(--ink);border-radius:8px;height:38px;padding:0 14px;font-size:14px;font-weight:600;} .page-vendor-payments main .nav__utility .btn{height:38px;padding:0 20px;font-size:14.5px;} /* ---- Floating nav on scroll (desktop only — mobile keeps its own independent toggle-driven accordion untouched). Previously the utility strip itself animated max-width/padding/ border-radius to "become" a pill on scroll — the shape-morphing read as elastic rather than premium. Replaced with a body double: a second, independent nav element that is ALWAYS already in its final compact-pill form (never animates its own box model), sitting fixed and hidden until scroll. The original nav simply fades/lifts away; the double fades/settles in. Two static shapes crossfading, nothing stretching. ---- */ .page-vendor-payments main .nav.scrolled{transition:opacity 260ms var(--ease);} @media (min-width:961px){ .page-vendor-payments main .nav.scrolled{opacity:0;pointer-events:none;} .page-vendor-payments main .nav.scrolled .nav__main{pointer-events:none;} } .page-vendor-payments main .nav-float{ display:none; position:fixed;top:16px;left:50%; transform:translateX(-50%) translateY(-10px); z-index:101; width:min(calc(100% - (var(--edge) * 2)), var(--maxw)); background: radial-gradient(60% 140% at 78% 50%, rgba(0,171,82,.06), transparent 70%), linear-gradient(120deg, #FFFFFF 0%, #FFFFFF 55%, #FFFFFF 100%); border-radius:999px; border:1px solid var(--line-2); box-shadow:0 20px 44px -22px rgba(15,24,34,.18),0 2px 12px -2px rgba(15,24,34,.1); opacity:0;pointer-events:none; transition:opacity 260ms var(--ease),transform 260ms var(--ease); } @media (min-width:961px){ .page-vendor-payments main .nav-float{display:block;} } .page-vendor-payments main .nav-float.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;} .page-vendor-payments main .nav-float .wrap{display:flex;align-items:center;height:56px;padding-left:28px;padding-right:14px;gap:20px;} .page-vendor-payments main .nav-float .btn{height:38px;padding:0 20px;font-size:14.5px;} .page-vendor-payments main .nav-float .brand__lockup{height:24px;} .page-vendor-payments main .close{ position:relative;overflow:hidden;text-align:center; padding:clamp(96px,12vw,160px) 0 clamp(64px,8vw,96px); background: radial-gradient(58% 65% at 84% 6%, rgba(242,228,0,.11), transparent 62%), radial-gradient(52% 60% at 12% 96%, rgba(172,212,0,.10), transparent 64%), linear-gradient(180deg,#0c331e 0%,#00351C 55%,#052013 100%); border-bottom:1px solid var(--on-dark-line); } .page-vendor-payments main .close::after{ content:"";position:absolute;z-index:0;pointer-events:none; top:0;right:0;bottom:0;left:0; background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAzIiBoZWlnaHQ9IjkwNCIgdmlld0JveD0iMCAwIDQwMyA5MDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIG9wYWNpdHk9IjAuMiI+CjxwYXRoIGQ9Ik00NzcuMjIxIDY0NS42MzRMMC4zMTM0NzcgMzIyLjgxN1Y1ODAuMzk1TDQ3Ny4yMjEgOTAzLjIxMlY2NDUuNjM0WiIgZmlsbD0iI0YyRTQwMCIvPgo8cGF0aCBkPSJNNDc3LjIyMSAyNTcuNTc4TDAuMzEzNDc3IDU4MC4zOTVWMzIyLjgxN0w0NzcuMjIxIC0xLjM4ODQ3ZS0wNVYyNTcuNTc4WiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzYyXzM5OCkiLz4KPC9nPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzYyXzM5OCIgeDE9IjIzOC43NjciIHkxPSI1ODAuMzk1IiB4Mj0iMjM4Ljc2NyIgeTI9IjAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzAwQUI1MiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNBQ0Q0MDAiLz4KPC9saW5lYXJHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K'); background-repeat:no-repeat; background-position:right center; background-size:auto 130%; } @media (max-width:720px){.page-vendor-payments main .close::after{background-size:auto 80%;}} .page-vendor-payments main .close .wrap{position:relative;z-index:1;} .page-vendor-payments main .close .h2{max-width:16ch;margin:0 auto 22px;color:#fff;} .page-vendor-payments main .close p{color:rgba(255,255,255,.72);font-size:19px;max-width:46ch;margin:0 auto 36px;} .page-vendor-payments main .close .btn--primary{box-shadow:0 14px 30px -14px rgba(0,0,0,.45);} .page-vendor-payments main .close .btn--primary:hover{box-shadow:0 18px 34px -14px rgba(0,0,0,.5);} .page-vendor-payments main .close>*{position:relative;z-index:1;} /* ---- shared visual rhythm bridging CTA into footer: one continuous dark green canvas, same restrained dotted motif as the testimonials section, concentrated around the CTA and fading out before the footer's link columns begin. The two sections still get a real divider (below) — same canvas, but a CTA and a footer are different kinds of content and should read as distinct. ---- */ .page-vendor-payments main .closefoot{position:relative;overflow:hidden;background:#00351C;} .page-vendor-payments main .closefoot::before{ content:"";position:absolute;left:0;right:0;top:0;height:640px;z-index:0;pointer-events:none; background-image:radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,0.09) 1.5px,transparent 0); background-size:26px 26px; -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.22) 55%,transparent 100%); mask-image:linear-gradient(180deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.22) 55%,transparent 100%); } .page-vendor-payments main .closefoot .close,.page-vendor-payments main .closefoot .foot{background:transparent;} /* ============================================================ FOOTER ============================================================ */ .page-vendor-payments main .foot{color:var(--on-dark-muted);padding:56px 0 40px;position:relative;z-index:1;} .page-vendor-payments main .foot__top{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:28px;padding-bottom:44px;border-bottom:1px solid var(--on-dark-line);} .page-vendor-payments main .foot__col--nested{display:flex;flex-direction:column;gap:26px;} .page-vendor-payments main .foot__brand{display:flex;align-items:center;margin-bottom:22px;} .page-vendor-payments main .foot__brand img{height:46px;width:auto;object-fit:contain;display:block;} .page-vendor-payments main .foot__company{font-family:var(--serif);font-size:19px;color:var(--on-dark);margin-bottom:14px;} .page-vendor-payments main .foot__address{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;line-height:1.5;color:var(--on-dark);opacity:.9;margin-bottom:8px;max-width:34ch;} .page-vendor-payments main .foot__address svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--lime);} .page-vendor-payments main .foot__hours{font-size:14px;color:var(--on-dark-muted);margin:12px 0 22px;} .page-vendor-payments main .foot__social{display:flex;gap:10px;align-items:center;} .page-vendor-payments main .foot__social a{ width:38px;height:38px;border-radius:50%;flex:none; display:flex;align-items:center;justify-content:center; background:var(--green);color:#fff;font-weight:800;font-size:14px;font-family:var(--sans); transition:background 160ms,transform 160ms; } .page-vendor-payments main .foot__social a:hover{background:var(--lime);color:var(--green-deep);transform:translateY(-2px);} .page-vendor-payments main .foot__col h5{font-family:var(--serif);font-style:italic;font-weight:400;font-size:19px;letter-spacing:0;text-transform:none;color:var(--lime);margin-bottom:16px;} .page-vendor-payments main .foot__col a{display:block;font-size:14.5px;color:var(--on-dark);opacity:.82;padding:5px 0;transition:opacity 160ms;} .page-vendor-payments main .foot__col a:hover{opacity:1;} .page-vendor-payments main .foot__legalrow{display:inline-flex;width:fit-content;flex-wrap:wrap;align-items:center;gap:10px;padding-top:26px;padding-bottom:14px;font-size:13.5px;border-bottom:1px solid var(--on-dark-line);} .page-vendor-payments main .foot__legalrow a{color:var(--on-dark);opacity:.82;transition:opacity 160ms;} .page-vendor-payments main .foot__legalrow a:hover{opacity:1;} .page-vendor-payments main .foot__legalrow .sep{color:var(--on-dark-muted);opacity:.5;} .page-vendor-payments main .foot__bottom{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;padding-top:22px;font-size:13px;} .page-vendor-payments main .foot__compliance{display:flex;flex-wrap:wrap;gap:10px;align-items:center;} .page-vendor-payments main .foot__compliance img{height:44px;width:auto;object-fit:contain;display:block;border-radius:8px;} /* ============================================================ RESPONSIVE — nav + footer only (verbatim from the approved Landing Page). This pass is desktop-only; these rules are carried over unchanged so the reused nav/footer don't break below 960px. No new mobile layout work has been done here. ============================================================ */ @media (max-width:960px){ .page-vendor-payments main .navlinks{display:none;} .page-vendor-payments main .navtoggle{display:inline-flex;align-items:center;} .page-vendor-payments main .nav__right .btn,.page-vendor-payments main .nav__right .nav__login,.page-vendor-payments main .nav__right .nav__signup{display:none;} .page-vendor-payments main .nav__main{border-bottom:0;background:transparent;} .page-vendor-payments main .nav__main .wrap{height:auto;min-height:0;padding-top:0;padding-bottom:0;} .page-vendor-payments main .navlinks__mobileauth{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding-top:16px;border-top:1px solid var(--line);} .page-vendor-payments main .navlinks__mobileauth .nav__login,.page-vendor-payments main .navlinks__mobileauth .nav__signup{justify-content:center;border:1px solid var(--line-2);} .page-vendor-payments main .navlinks__mobileauth .btn{width:100%;justify-content:center;} .page-vendor-payments main .navpanel{position:static;min-width:0;width:100%;box-sizing:border-box;box-shadow:none;border:0;border-radius:0;padding:6px 4px 4px;margin-top:2px;display:none;opacity:1;transform:none;pointer-events:auto;visibility:visible;} .page-vendor-payments main .navitem[data-open="true"] .navpanel{display:block;} .page-vendor-payments main .navpanel__items{display:block;} .page-vendor-payments main .navpanel__item{width:100%;} .page-vendor-payments main .navpanel__head{padding-bottom:8px;margin-bottom:6px;} .page-vendor-payments main .navpanel--wide,.page-vendor-payments main .navpanel--extra{grid-template-columns:1fr;gap:0;} .page-vendor-payments main .navpanel--products{min-width:0;padding:6px 4px 4px;} .page-vendor-payments main .navpanel__primary-row{grid-template-columns:1fr;} .page-vendor-payments main .navpanel__others{grid-template-columns:1fr;} .page-vendor-payments main .foot__top{grid-template-columns:1fr;gap:32px;} } @media (max-width:560px){ .page-vendor-payments main .foot__top{grid-template-columns:1fr;gap:28px;} .page-vendor-payments main .btn{width:100%;} } /* ============================================================ RESPONSIVE — three tiers: mobile (<768), tablet (768–1023), desktop (1024+). Desktop is approved/locked and unchanged from the prior pass. Tablet gets its own per-component treatment: some sections keep the desktop composition down to 768 (comfortable there), some keep the mobile-adaptive composition up to 1023 (desktop version is too cramped/small before 1024), and the shared 3-column stories band gets a dedicated 2-column tablet layout. Mobile (<768) received a full intentional recomposition in this pass — see the mobile token/typography system and per-section blocks below, rather than the desktop layout simply compressed. All desktop inline styles are left untouched; !important is used here, deliberately, to override those inline styles without refactoring the desktop markup. ============================================================ */ @media (max-width:1023px){ .page-vendor-payments main,.page-vendor-payments main{overflow-x:hidden;} } /* ---------- HERO — desktop's side-by-side grid squeezes the illustration's column too narrow before 1024px, overlapping the corner stat callouts. Stack content-first through the whole tablet band, same strategy used below for the High-Volume/Integrations diagrams. ---------- */ @media (max-width:1023px){ .page-vendor-payments main .m-hero-grid{grid-template-columns:1fr!important;gap:36px!important;padding-top:clamp(48px,8vw,80px)!important;padding-bottom:36px!important;} .page-vendor-payments main .hero-visual{max-width:520px!important;justify-self:start!important;} } /* ---------- HERO — TABLET ONLY: a genuine side-by-side split instead of the stacked mobile composition, with the illustration given the larger share of the row (text needs little width at this length) and the proof-stat grid tightened so it reads as grouped with the map, not floating below it. ---------- */ @media (min-width:768px) and (max-width:1023px){ .page-vendor-payments main .m-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)!important;gap:40px!important;align-items:center!important;padding-top:clamp(64px,7vw,88px)!important;padding-bottom:clamp(64px,7vw,88px)!important;} .page-vendor-payments main .hero-visual{max-width:460px!important;justify-self:end!important;} } /* ---------- TABLET CONTAINER: shares the same --edge (24px, no tablet-specific widening) and generic .section rhythm (--gap, no tablet-specific override) as every other breakpoint. Only the component-level rules below are genuinely tablet-specific. ---------- */ @media (min-width:768px) and (max-width:1023px){ .page-vendor-payments main .m-narrative-h2{max-width:none!important;} .page-vendor-payments main .lead{max-width:none!important;} .page-vendor-payments main .close .h2{max-width:none!important;} .page-vendor-payments main .close p{max-width:none!important;width:100%!important;} } /* ---------- MOBILE ONLY (<768) — full intentional recomposition ---------- */ @media (max-width:767px){ /* Mobile rhythm tokens come from the shared :root system (see top of file) — --mobile-head-to-visual, --mobile-stage-pad and --mobile-radius-stage are the 1099 values, no page-specific overrides here. Generic .section vertical rhythm uses the shared --gap clamp uniformly, same as every other breakpoint — no mobile-specific override for that primitive. */ .page-vendor-payments main .m-head-intro{margin-bottom:var(--mobile-head-to-visual)!important;} /* VISUAL STAGE — the shared gradient/border now lives on the base .m-visual-stage rule (see top of file), so mobile only needs to override the padding/radius tokens for its tighter footprint. */ .page-vendor-payments main .m-visual-stage{ border-radius:var(--mobile-radius-stage)!important; padding:var(--mobile-stage-pad); } .page-vendor-payments main .m-visual-surface{border-radius:14px!important;} /* HERO — visual capped and centered (previously inherited the 520px tablet/under-1024 cap with no mobile-specific value, so it rendered far larger than the text column intended). Stat callouts stay on the illustration itself (orbit overlay, scaled down), matching the Business Verification/1099 pattern — never moved to a detached row. */ .page-vendor-payments main .hero-visual{max-width:400px!important;margin-inline:auto!important;} .page-vendor-payments main .hero-stats-orbit .hero-stat-val{font-size:clamp(19px,5.6vw,23px)!important;} .page-vendor-payments main .hero-stats-orbit .hero-stat-label{font-size:11px!important;max-width:12ch!important;} .page-vendor-payments main .hero-stats-orbit .hero-stat-connector{width:34px!important;} .page-vendor-payments main .m-hero-grid h1{max-width:none!important;} .page-vendor-payments main .hero-lead{max-width:none!important;} .page-vendor-payments main .m-hero-grid .btn--primary{width:100%!important;justify-content:center!important;height:53px!important;} .page-vendor-payments main .m-hero-grid{gap:var(--mobile-head-to-visual)!important;padding-top:clamp(40px,9vw,56px)!important;padding-bottom:8px!important;} /* CUSTOMER PROOF — compact mobile composition, matching the Business Verification mobile logic: headline, quote, compact square portrait+identity, one equal 3-column metric rail with dividers, full-width yellow CTA. No inherited desktop width caps survive here. */ .page-vendor-payments main .m-testimonial-grid{grid-template-columns:1fr!important;gap:22px!important;} .page-vendor-payments main .m-tstory{display:contents!important;} .page-vendor-payments main .m-t-h2{order:1!important;text-align:left!important;font-size:clamp(28px,7.5vw,34px)!important;line-height:1.08!important;width:100%!important;max-width:none!important;} .page-vendor-payments main .m-t-quote{order:2!important;font-size:18px!important;line-height:1.5!important;width:100%!important;max-width:none!important;margin-top:0!important;} .page-vendor-payments main .m-tphoto{order:3!important;height:auto!important;min-height:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;display:flex!important;align-items:center!important;gap:15px!important;} .page-vendor-payments main .m-tphoto-img{position:static!important;width:68px!important;height:68px!important;border-radius:14px!important;flex:none!important;box-shadow:0 0 0 1px rgba(255,255,255,.14)!important;} .page-vendor-payments main .m-tphoto-gradient{display:none!important;} .page-vendor-payments main .m-tphoto-identity{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;gap:2px!important;} .page-vendor-payments main .m-tphoto-rule{display:none!important;} .page-vendor-payments main .m-testimonial-metrics{order:4!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:0!important;row-gap:0!important;} .page-vendor-payments main .m-testimonial-metrics>div{min-width:0!important;} .page-vendor-payments main .m-testimonial-metrics>div:nth-child(2){padding-right:11px!important;} .page-vendor-payments main .m-testimonial-metrics>div:nth-child(3){padding-left:11px!important;padding-right:11px!important;border-left:1px solid rgba(255,255,255,.14)!important;} .page-vendor-payments main .m-testimonial-metrics>div:nth-child(4){padding-left:11px!important;border-left:1px solid rgba(255,255,255,.14)!important;} .page-vendor-payments main .m-t-metric-val{font-size:clamp(21px,6vw,26px)!important;} .page-vendor-payments main .m-testimonial-metrics span:last-child{font-size:11px!important;line-height:1.35!important;} .page-vendor-payments main .m-t-cta{order:5!important;justify-self:stretch!important;width:100%!important;justify-content:center!important;} /* CLOSING CTA — reduced top padding (was inheriting a 96px floor meant for desktop/tablet), natural full-width wrap, no artificial two-line heading target on mobile. */ .page-vendor-payments main .close{padding:56px 0 60px!important;} .page-vendor-payments main .close .h2{max-width:none!important;width:100%!important;} .page-vendor-payments main .close p{width:100%!important;max-width:none!important;font-size:15.5px!important;line-height:1.55!important;} } /* ---------- 3-COLUMN SUPPORTING STORIES (used across 5 sections) ---------- Desktop: 3 columns. Tablet: 3 equal columns too (tighter side padding than desktop, never a 2+1 orphan row — a tablet viewport has room for all three). Mobile: 1 column (below). ---------- */ @media (min-width:768px) and (max-width:1023px){ .page-vendor-payments main .m-stories3{grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:0!important;row-gap:0!important;} .page-vendor-payments main .m-stories3>div{min-width:0!important;} .page-vendor-payments main .m-stories3>div:nth-child(1){padding-left:0!important;padding-right:22px!important;border-left:0!important;} .page-vendor-payments main .m-stories3>div:nth-child(2){padding-left:22px!important;padding-right:22px!important;border-left:1px solid var(--divider-soft)!important;} .page-vendor-payments main .m-stories3>div:nth-child(3){padding-left:22px!important;padding-right:0!important;border-left:1px solid var(--divider-soft)!important;margin-top:0!important;border-top:0!important;grid-column:auto!important;} } /* ---------- VISUAL STAGE — TABLET BREATHING ROOM: the surface's desktop clamp(24px,2vw,30px) padding floors at 24px on tablet, feeling tight above/below the diagram. Vertical-only increase (horizontal untouched, so diagram width/layout is unaffected); tablet keeps the plain stage treatment (no gradient wash — matches the established reference, which only applies the colored stage at mobile and desktop). ---------- */ @media (min-width:768px) and (max-width:1023px){ .page-vendor-payments main .m-visual-surface{padding-top:36px!important;padding-bottom:36px!important;} } @media (max-width:767px){ .page-vendor-payments main .m-stories3{grid-template-columns:1fr!important;gap:var(--mobile-story-gap,24px)!important;margin-top:var(--mobile-visual-to-stories,32px)!important;} .page-vendor-payments main .m-stories3>div{border-left:0!important;padding-left:0!important;padding-right:0!important;} .page-vendor-payments main .m-stories3>div:not(:first-child){border-top:1px solid var(--line-2)!important;padding-top:24px!important;} .page-vendor-payments main .m-stories3 h3{max-width:none!important;width:100%!important;} .page-vendor-payments main .m-stories3 p{width:100%!important;max-width:none!important;text-wrap:pretty!important;} } /* ---------- TESTIMONIAL — TABLET ONLY: the fixed 320px portrait leaves too little room for the metrics row, forcing awkward mid-word wraps. Narrow the portrait slightly and tighten the metrics gap so the third metric's label sits on one line, restoring the premium/editorial feel instead of a compressed desktop banner. ---------- */ @media (min-width:768px) and (max-width:1023px){ .page-vendor-payments main .m-testimonial-grid{grid-template-columns:minmax(0,270px) minmax(0,1fr)!important;gap:40px!important;} .page-vendor-payments main .m-testimonial-metrics{gap:clamp(24px,3.2vw,40px)!important;} } /* ============================================================ LOGO MARQUEE — two duplicate .marquee-group sequences inside one flex track; translate3d(-50%) shifts by exactly one group's width, so the loop is seamless (the second group is already in position the instant the first group's copy would restart). hover only ever sets animation-play-state, so it pauses and resumes at the exact same position — it can never reset or jump. Real customer/partner marks stay in their original, unaltered colors and proportions; only display height is scaled for row balance. ============================================================ */ .page-vendor-payments main .logow__marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 4%,#000 10%,#000 90%,rgba(0,0,0,.5) 96%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 4%,#000 10%,#000 90%,rgba(0,0,0,.5) 96%,transparent 100%); } .page-vendor-payments main .logow__track{display:flex;align-items:center;gap:clamp(30px,calc(16px + 3.8889vw),72px);width:max-content;will-change:transform;animation:logowscroll 36s linear infinite;} .page-vendor-payments main .marquee-group{display:flex;align-items:center;gap:clamp(30px,calc(16px + 3.8889vw),72px);flex-shrink:0;} .page-vendor-payments main .logow__marquee:hover .logow__track{animation-play-state:paused;} @keyframes logowscroll{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}} @keyframes heroSweep{to{transform:rotate(360deg);}} .page-vendor-payments main .hero-sweep{animation:heroSweep 26s linear infinite;} .page-vendor-payments main .logow__img{height:clamp(22px,calc(20px + 1.6vw),62px);width:auto;flex-shrink:0;display:block;object-fit:contain;} .page-vendor-payments main .logow__img--badge{height:clamp(17px,calc(14px + 0.8333vw),26px);} @media (prefers-reduced-motion:reduce){ .page-vendor-payments main .logow__track{animation:none;transform:none!important;} .page-vendor-payments main .logow__marquee{overflow:visible;} .page-vendor-payments main .logow__track{flex-wrap:wrap;justify-content:center;width:100%;} .page-vendor-payments main .marquee-group[aria-hidden="true"]{display:none;} } /* ============================================================ DESKTOP DESIGN-SYSTEM PASS (1024px+) — brings this page onto the system finalized on the 1099 / Business Verification pages. Mobile and tablet inline defaults above are left untouched; everything here is additive and desktop-scoped, matching the established pattern from the other approved use-case pages. ============================================================ */ @media (min-width:1024px){ .page-vendor-payments main h1{font-size:clamp(48px,4.4vw,64px)!important;line-height:1.06!important;letter-spacing:-0.025em!important;} .page-vendor-payments main .m-narrative-h2,.page-vendor-payments main .h2{font-size:var(--type-h2)!important;line-height:1.08!important;letter-spacing:-0.018em!important;} .page-vendor-payments main .m-narrative-h2{max-width:none!important;} .page-vendor-payments main .h3{font-size:clamp(22px,1.7vw,25px)!important;line-height:1.15!important;} .page-vendor-payments main .m-head-intro{margin-bottom:44px!important;} .page-vendor-payments main .close p{width:min(100%,790px)!important;max-width:75ch!important;margin-left:auto!important;margin-right:auto!important;text-wrap:balance!important;} .page-vendor-payments main .lead{margin-top:18px!important;} .page-vendor-payments main .m-hero-grid{grid-template-columns:1.3fr 1fr!important;gap:56px!important;} /* .page-vendor-payments main .m-lead-wide{max-width:66ch!important;} */ /* TESTIMONIAL — desktop-only composition rebalance, ported verbatim from the approved Business Verification / 1099 pages: headline+quote read as one group, then a deliberate beat before the metric rail (no flex space-between), a bounded portrait-column width so the media slot keeps a proper portrait ratio at every desktop size. */ .page-vendor-payments main section:has(>.m-testimonial-grid){padding:clamp(48px,6.25vw,97px) 0!important;} .page-vendor-payments main .m-testimonial-grid{grid-template-columns:clamp(290px,23vw,330px) minmax(0,1fr)!important;} .page-vendor-payments main .m-tphoto{height:380px!important;} .page-vendor-payments main .m-tstory{gap:0!important;width:100%!important;max-width:none!important;min-width:0!important;} .page-vendor-payments main .m-t-h2{font-size:clamp(40px,3.4vw,44px)!important;line-height:1.06!important;width:100%!important;max-width:none!important;} .page-vendor-payments main .m-t-quote{font-size:clamp(19px,1.4vw,20px)!important;line-height:1.5!important;width:100%!important;max-width:none!important;margin-top:22px!important;} .page-vendor-payments main .m-testimonial-metrics{margin-top:30px!important;padding-top:22px!important;} .page-vendor-payments main .m-t-metric-val{font-size:33px!important;} .page-vendor-payments main .m-t-cta{margin-top:32px!important;} .page-vendor-payments main .m-stories3{border-top:0!important;padding-top:0!important;margin-top:36px!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:0!important;row-gap:0!important;align-items:start!important;} .page-vendor-payments main .m-stories3>div{min-width:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;} .page-vendor-payments main .m-stories3>div:nth-child(1){padding-left:0!important;padding-right:38px!important;border-left:0!important;} .page-vendor-payments main .m-stories3>div:nth-child(2){padding-left:38px!important;padding-right:38px!important;border-left:1px solid var(--divider-soft)!important;} .page-vendor-payments main .m-stories3>div:nth-child(3){padding-left:38px!important;padding-right:0!important;border-left:1px solid var(--divider-soft)!important;} .page-vendor-payments main .m-stories3 h3{max-width:none!important;} .page-vendor-payments main .m-stories3 p{width:100%!important;max-width:none!important;text-wrap:pretty!important;font-size:16px!important;line-height:1.6!important;} } /* ============================================================ USE-CASE HERO + TRUST-FOLD SYSTEM (>=1024px) — shared, reusable pattern. Goal: the complete hero AND the complete logo marquee form one intentional opening composition, filling the available space after the fixed nav rather than just sitting at a small fixed padding and leaving the next section to peek in early on taller screens. Refinement of the prior padding-only pass: padding alone has a low ceiling (clamp() maxes out around 68px) and never uses the extra vertical room a tall viewport actually has, so on tall screens the hero+marquee pair sat well short of the first viewport and the next section's heading started showing above the fold. The hero section itself now gets a min-height equal to the space left after the nav and the complete marquee — "min", not "height", so content (H1 wrap, browser zoom, a11y text-size increases, or an unusually short viewport) is always free to push the section taller; it is never clipped or forced short. The section centers its content (flex + align-items) so any extra room the min-height adds distributes as breathing space above and below, exactly like real padding would. --uc-static-nav-h matches the actual measured header height at rest (nav__utility + nav__main). --uc-trust-strip-h is the same token the marquee's own padding already derives from (see .logow-section below) — one shared number, not two. These three tokens are written to be reused verbatim as the shared hero/trust fold system on the 1099 and Business Verification pages. ============================================================ */ @media (min-width:1024px){ .page-vendor-payments main{ --uc-static-nav-h:114px; --uc-trust-strip-h:clamp(72px,8.5svh,92px); /* Baseline hero padding — a guaranteed minimum gap even in the edge case where content height alone already meets or beats the min-height below; the min-height + flex-centering is what supplies the *adaptive* extra room on taller screens. */ --uc-hero-y:clamp(32px,3svh,48px); } .page-vendor-payments main .hero-section{ display:flex; align-items:center; min-height:clamp(460px, calc(100svh - var(--uc-static-nav-h) - var(--uc-trust-strip-h)), 900px); } /* Baseline padding only; the adaptive room comes from the min-height above. H1 size, column widths, illustration scale and the gradient itself are untouched. */ .page-vendor-payments main .m-hero-grid{padding-top:var(--uc-hero-y)!important;padding-bottom:var(--uc-hero-y)!important;} /* Marquee's own padding is derived from the same shared trust-strip budget minus the logo row's own max rendered height (34px, from .logow__img's clamp ceiling), split evenly top/bottom, so the marquee's total footprint stays inside that budget — and inside the fold math above — at any viewport height. */ .page-vendor-payments main .logow-section{padding:calc((var(--uc-trust-strip-h) - 34px) / 2) 0!important;} } /* ============================================================ VENDOR PAYMENTS — PAGE-SPECIFIC VISUAL SYSTEM Everything above this point (tokens, nav, buttons, close/ closefoot/foot, testimonial + stories responsive rules) is the shared Zenwork use-case system, reused verbatim from the approved W-9 / Business Verification pages. The rules below only style the two diagrams unique to Vendor Payments — the approval & payment flow and the after-the-payment record rail — plus small hero-visual hooks this page's own illustration needs. Responsive behavior follows the shared three-tier system (mobile <768 / tablet 768–1023 / desktop >=1024) rather than a page-specific breakpoint, per the established use-case family. ============================================================ */ .page-vendor-payments main .hero-ring{ } .page-vendor-payments main .vp-wash{ } .page-vendor-payments main .vp-halo{ } /* ---------- HERO VISUAL — sourced directly from the approved Vendor Payments source page: a two-ring orbit with counter-rotating sweeps (the shared system's own hero only has one sweep, so the second ring's animation is defined here) around a flat invoice/payment artifact. Typography on the three proof stats matches the shared system (var(--serif)/var(--muted)) rather than the source page's own raw font stack. ---------- */ @keyframes heroSweepBack{to{transform:rotate(-360deg)}} .page-vendor-payments main .hero-sweep-2{animation:heroSweepBack 44s linear infinite} /* ---------- HERO — mobile-only refinement on top of the shared mobile hero system: a touch more breathing room above/below the stage. ---------- */ @media (max-width:767px){ .page-vendor-payments main .hero-visual{margin-top:12px !important;margin-bottom:4px !important} } /* ---------- APPROVAL & PAYMENT FLOW — desktop/tablet default is the inline 5-column grid (card / arrow / halo node / arrow / card), set directly on the element to match the shared visual-stage proportions. Below 1024px there isn't room for five columns at a readable size, so the row collapses to a single centered column. The two record cards drop their desktop column cap and use the full available surface width; the approval node keeps a narrower, distinct cap since it is the transition/focal step, not a third matching card. The connector between stages is NOT the desktop horizontal arrow rotated 90deg — that approach let the line collapse to near-zero length once its flex:1 sizing had no horizontal container to fill, which is why it read as a weak, tiny mark. Instead each arrow's flex-direction switches to column so the line and arrowhead stack natively, the line gets an explicit height instead of flex:1, and only the arrowhead SVG itself rotates. Combined with a tightened stack gap, invoice → approval and approval → payment each read as one ~28px transition instead of the old ~70px gap. The approval node's own padding/min-height also drop for mobile only — its desktop sizing is untouched. ---------- */ @media (max-width:1023px){ .page-vendor-payments main .vp-flow-grid{grid-template-columns:minmax(0,1fr) !important;gap:5px !important;width:100% !important} .page-vendor-payments main .vp-flow-grid > div{grid-column:auto !important;grid-row:auto !important;justify-self:stretch !important;width:100% !important} .page-vendor-payments main .vp-flow-grid .vp-flow-card{max-width:none !important} .page-vendor-payments main .vp-flow-grid .vp-flow-node{justify-self:center !important;max-width:300px !important;margin:0 auto !important} .page-vendor-payments main .vp-flow-line{display:none !important} .page-vendor-payments main .vp-flow-arrow{grid-column:auto !important;grid-row:auto !important;justify-self:center !important;display:flex !important;flex-direction:column !important;align-items:center !important;margin:0 !important;transform:none !important} .page-vendor-payments main .vp-flow-arrow > span:first-child{flex:none !important;width:1.5px !important;height:10px !important;border-radius:1px !important;background:#00AB52 !important} .page-vendor-payments main .vp-flow-arrow > svg{transform:rotate(90deg) !important;margin:-1px 0 0 !important} .page-vendor-payments main .vp-flow-node > div:last-child{min-height:110px !important;padding:24px 26px !important} } @media (max-width:767px){ .page-vendor-payments main .vp-flow-grid{gap:4px !important} .page-vendor-payments main .vp-flow-grid .vp-flow-node{max-width:260px !important} } /* ---------- AFTER THE PAYMENT — timeline system. One shared coordinate (declared once per breakpoint) drives both the connecting line and every node's dot so they are concentric by construction, not by hand-tuned per-node margins. Desktop/tablet (>=1024px): the inline styles above already place the horizontal line and all four dots at top:22px within their own containing blocks, so no override is needed there. Mobile/tablet (<1024px): recomposed as one true vertical rail. Each node keeps the SAME local dot offset (top:9px) and the track uses a fixed 28px row-gap; every node's own ::after connector spans calc(100% + 28px), which — because the offset is identical on both ends of the gap it bridges — lands exactly on the next node's dot center, chaining into what reads as one continuous line with no seams. The final connector (node 3 → node 4) fades from green to the lime used on the last node. The track's own left padding shifts the whole rail+node system inward as one unit, distinct from each node's own dot→content inset. ---------- */ @media (max-width:1023px){ .page-vendor-payments main .vp-rail-grid{grid-template-columns:minmax(0,1fr) !important;gap:40px !important} .page-vendor-payments main .vp-rail-card{justify-self:center !important;width:100% !important;max-width:320px !important} .page-vendor-payments main .vp-rail-track{grid-template-columns:minmax(0,1fr) !important;gap:28px !important;padding:0 0 0 8px !important} .page-vendor-payments main .vp-rail-line{display:none !important} .page-vendor-payments main .vp-rail-node{padding-top:0 !important;padding-left:22px !important} .page-vendor-payments main .vp-rail-dot{top:9px !important;transform:translate(-50%,-50%) !important} .page-vendor-payments main .vp-rail-node > span:nth-of-type(3){margin-top:9px !important} .page-vendor-payments main .vp-rail-node:not(:last-child)::after{content:"";position:absolute;z-index:0;left:0;top:9px;height:calc(100% + 28px);width:1.5px;transform:translateX(-50%);background:#00AB52} .page-vendor-payments main .vp-rail-node--transition::after{background:linear-gradient(180deg,#00AB52,#ACD400)} } @media (max-width:767px){ .page-vendor-payments main .vp-rail-card{max-width:280px !important} } @media (max-width:1023px){ .page-vendor-payments main .vp-rail-caption{margin-top:27px !important} } /* ---------- CUSTOMER PROOF — no-photo placeholder icon sizing. Business Verification defines these as shared classes for its own no-photo testimonial; ported here since this page now reuses that exact component instead of a page-specific placeholder. ---------- */ .page-vendor-payments main .testimonial-avatar-ic svg{width:40px;height:40px} .page-vendor-payments main .testimonial-avatar-ic--lg svg{width:68px;height:68px;stroke-width:1.1px} .page-vendor-payments main .testimonial-avatar-ic--xl svg{width:100px;height:100px;stroke-width:1.1px} /* ---------- CUSTOMER PROOF — no-photo mobile identity. Same mechanism as Business Verification's own no-photo testimonial: the large placeholder panel is desktop/tablet only; mobile swaps to the compact inline identity row already sitting between the quote and the metrics in document order, so nothing needs to be reordered at this breakpoint. ---------- */ @media (max-width:767px){ .page-vendor-payments main .testimonial-photo{display:none !important} .page-vendor-payments main .testimonial-identity-compact{display:flex !important;order:3 !important} }