/* ============================================================ ZENWORK — TOKENS (white-dominant, green as accent) ============================================================ */ :root{ /* Brand */ --green:var(--color-6c40a1); --green-ink:var(--color-6c40a1); /* darker green for text on white (AA contrast) */ --green-deep:var(--color-261638); /* the single immersive dark canvas */ --lime:var(--color-d1c4e2); /* Official Green tonal system (reference palette) */ --g-025:var(--color-f7f6fa); --g-050:var(--color-f0ecf6); --g-100:var(--color-e9e2f1); --g-200:var(--color-d1c4e2); --g-300:var(--color-6c40a1); --g-400:var(--color-6c40a1); --g-500:var(--color-563381); --g-600:var(--color-513079); --g-700:var(--color-412661); --g-800:var(--color-412661); --g-900:var(--color-261638); --yellow:var(--color-f2e400); /* Lemon tonal scale — for quiet SELECTED-control surfaces (filters/tabs). Distinct from --yellow, which stays reserved for the primary-CTA gradient. */ --lemon-050:var(--color-fffde0); --lemon-100:var(--color-fff9b8); --lemon-300:var(--color-e3d400); --ink:var(--color-0f1822); --white:var(--color-ffffff); /* Light neutrals — the page is mostly these */ --paper:var(--color-ffffff); --paper-2:var(--color-fafbfa); /* barely-there section alternation */ --mist:var(--color-f4f7f5); /* rare soft panel */ --line:var(--color-eaeeeb); /* hairlines, very light */ --footer-divider:rgba(15,24,34,.16); /* dedicated light-footer divider — clearly visible, still secondary */ --line-2:var(--color-dee5e0); --muted:var(--color-576560); --muted-2:var(--color-8a968f); /* On the one dark section */ --on-dark:var(--color-eaf3ed); --on-dark-muted:var(--color-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:var(--color-f7feff); --compliancely-050:var(--color-edfafd); --compliancely-100:var(--color-e4f7fc); --compliancely-200:var(--color-c8eef8); --compliancely-300:var(--color-4cc9e9); --compliancely-400:var(--color-44b5d2); --compliancely-500:var(--color-3da1ba); --compliancely-600:var(--color-3997af); --compliancely-700:var(--color-2e798c); --compliancely-800:var(--color-225a69); --compliancely-900:var(--color-1b4652); --payments-025:var(--color-fffcf2); --payments-050:var(--color-fff6d9); --payments-100:var(--color-ffe9a8); --payments-200:var(--color-ffd66a); --payments-300:var(--color-fdb600); --payments-400:var(--color-e6a400); --payments-500:var(--color-cc9100); --payments-600:var(--color-b37e00); --payments-700:var(--color-8f6400); --payments-800:var(--color-6b4a00); --payments-900:var(--color-473100); --tax1099-025:var(--color-f5f8fe); --tax1099-050:var(--color-e6edf8); --tax1099-100:var(--color-d9e3f5); --tax1099-200:var(--color-b0c6ea); --tax1099-300:var(--color-0047bb); --tax1099-400:var(--color-0040a8); --tax1099-500:var(--color-003996); --tax1099-600:var(--color-00358c); --tax1099-700:var(--color-002b70); --tax1099-800:var(--color-002054); --tax1099-900:var(--color-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(84px,min(7.5vw,11vh),120px); /* rhythmic section spacing — height-aware so laptops (wide but short) compress, not just narrow ones; was clamp(80px,9vw,132px), which barely differed between 1366x768 and 1920x1080 */ /* ---- Hero composition system — one continuous fluid model shared by the stage photo, the floating product card, and the text column, so nothing jumps at a device-specific breakpoint. --header-h is a static fallback (matches the nav's own unscrolled rendered height); JS measures and overwrites it on load/resize so the hero-height formula below always reflects the header's real height rather than a guess. ---- */ --header-h:114px; --hero-peek:clamp(80px,9vh,128px); /* deliberate next-section preview height */ /* calc(28px + 33vw) holds the approved laptop scale almost exactly (450px at 1280, was 445px) while accelerating enough at wide desktop to keep the photo an equal half of the story there too (~662px at 1920, was 605px) — one continuous formula, no breakpoint jump, laptop essentially untouched. */ --hero-stage-w:clamp(380px, calc(28px + 33vw), 680px); --hero-card-w:clamp(296px,24vw,345px); /* floating product card width */ --hero-content-gap:clamp(40px,4vw,64px); /* minimum clearance kept between copy and stage */ --hero-card-overlap:clamp(70px,6vw,100px); /* how much of the card sits OUTSIDE the photo — not half the card */ --r-lg:18px; --r-md:12px; --r-sm:8px; --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); } *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} body{ 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; } img,svg{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;} p{margin:0;} blockquote{margin:0;padding:0;} ul{margin:0;padding:0;list-style:none;} .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;} button{font-family:inherit;cursor:pointer;} :focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px;} button:focus-visible{outline-offset:2px;} a:focus-visible{border-radius:6px;} .skip-link{ position:absolute;top:-100px;left:16px;z-index:9999; background:var(--ink);color:var(--color-fff);padding:10px 20px;border-radius:8px; font-size:14px;font-weight:600; transition:top 200ms var(--ease); } .skip-link:focus{top:12px;} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition-duration:0.01ms!important;animation-duration:0.01ms!important;}} /* Primitives */ .wrap{width:min(calc(100% - (var(--edge) * 2)), var(--maxw));margin-inline:auto;} .wrap--wide{max-width:var(--maxw-wide);} @media (max-width:640px){:root{--edge:20px;}} .section{padding:var(--gap) 0;scroll-margin-top:130px;} /* Tablet/mobile section rhythm — desktop's --gap is deliberately generous; these tiers get their own materially tighter ranges (not just --gap at a smaller vw) so the page becomes shorter, not merely narrower. */ @media (max-width:960px){ .section{padding:clamp(64px,7vw,72px) 0;} } @media (max-width:699px){ .section{padding:clamp(52px,14vw,64px) 0;} .shead{margin-bottom:clamp(32px,8vw,44px);} } .section + .section:not(.alt){border-top:1px solid var(--line);} .alt{background:var(--paper-2);} .reveal{opacity:0;transform:translateY(20px);transition:opacity 850ms var(--ease),transform 850ms var(--ease);} .reveal.in{opacity:1;transform:none;} .reveal[data-d="1"]{transition-delay:.08s;} .reveal[data-d="2"]{transition-delay:.16s;} .reveal[data-d="3"]{transition-delay:.24s;} /* Type scale — big, editorial */ .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; } .display{ font-family:var(--serif); font-size:clamp(64px,8.6vw,124px);line-height:1.06;letter-spacing:-0.025em; } .display .it{font-style:italic;} .h2{font-family:var(--serif);font-size:clamp(36px,5.2vw,60px);line-height:1.04;letter-spacing:-0.02em;text-wrap:balance;} .h3{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);line-height:1.12;letter-spacing:-0.012em;} .lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--muted);} .measure{max-inline-size:60ch;text-wrap:pretty;} /* Buttons — Zenwork Yellow/Lemon is the primary-action color; green is reserved for secondary/system/semantic usage. Matches the approved 1099 implementation exactly: gradient fill, dark readable text, no visible border artifacts. */ .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;line-height:1; border:0;background-clip:border-box; transition:transform 200ms var(--ease),background 200ms,box-shadow 200ms,border-color 200ms;white-space:nowrap; } .btn svg{width:16px;height:16px;transition:transform 260ms var(--ease);} .btn:hover svg{transform:translateX(3px);} .btn--primary,.btn--yellow{background:linear-gradient(105deg,var(--color-f2e400) 0%,var(--color-e8db00) 58%,var(--color-dacd00) 100%);color:var(--color-241f00);box-shadow:0 10px 24px -14px rgba(36,31,0,.32);} .btn--primary:hover,.btn--yellow:hover{transform:translateY(-1px);background:linear-gradient(105deg,var(--color-f2e400) 0%,var(--color-e3d600) 50%,var(--color-cfc300) 100%);box-shadow:0 14px 28px -14px rgba(36,31,0,.38);} .btn--primary:active,.btn--yellow:active{transform:translateY(0);box-shadow:0 6px 16px -12px rgba(36,31,0,.26);} .btn:focus-visible{outline-offset:3px;} /* secondary — light background context: transparent, dark text, subtle neutral/green border */ .btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2);} .btn--ghost:hover{background:rgba(108,64,161,.06);border-color:rgba(108,64,161,.35);} /* secondary — dark background context: transparent, light text, subtle light border */ .btn--ghost-dark{background:transparent;color:var(--color-fff);border:1px solid rgba(255,255,255,.32);} .btn--ghost-dark:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55);} .btn--lg{height:58px;padding:0 34px;font-size:16.5px;} .textlink{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;color:var(--green-ink);} .textlink svg{width:15px;height:15px;transition:transform 240ms var(--ease);} .textlink:hover svg{transform:translateX(4px);} .textlink--ink{color:var(--ink);} /* ============================================================ SECTION HEADING SYSTEM — reusable across Zenwork pages. .shead is the canonical wrapper: default composition is LEFT editorial (no modifier needed), .shead--center is the explicit symmetrical/system variant. Width is a single shared editorial cap (~1120px) so individual sections never need their own max-width override — alignment is the only thing sections choose. ============================================================ */ /* max-width removed here (previously min(100%,1200px)) — the section's own .wrap already bounds available width; this was an additional editorial cap shaping heading/paragraph line length on top of that, not a structural need. */ .shead{margin-bottom:clamp(48px,6vw,76px);} .shead .h2{margin-bottom:0;} .shead p{margin-top:22px;font-size:19px;line-height:1.55;color:var(--muted);} .shead--center{margin-left:auto;margin-right:auto;text-align:center;} .shead--center p{margin-left:auto;margin-right:auto;} /* Tighter heading rhythm for control-driven sections, where the heading introduces an immediately-following selector/tab strip rather than a paragraph of editorial copy — Three Engines and Industries only. The shared .shead default above (48–76px) stays untouched for every other section that needs the extra breathing room. */ .shead--stages,.shead--tabs{margin-bottom:clamp(28px,3.2vw,36px);} /* Editorial heading-width system — the section's own .wrap/grid is the only width boundary an H2 needs. A short or medium heading should read as one confident line whenever the composition has room for it; it wraps only when it genuinely runs out of space, never from an arbitrary character cap layered on top. System/workflow headings (--center, e.g. "Three engines, one workflow.") sit directly above a symmetrical control strip and stay centered — this rule applies to them too since centering is an alignment choice, not a width one. */ .shead .h2{width:100%;max-inline-size:none;} /* Section strip — Zenwork's own signature device (see zenwork.com's green-strip/ yellow-strip marks before each section label). Small, quiet, never a full rule. */ /* ============================================================ NAV — with lightweight dropdown panels per item ============================================================ */ .util{background:var(--ink);color:var(--on-dark-muted);font-size:13px;} .util .wrap{display:flex;justify-content:flex-end;align-items:center;gap:20px;height:38px;} .util a:hover{color:var(--color-fff);} .util .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.4;} .nav{position:sticky;top:0;z-index:100;transition:padding 420ms var(--ease);} .nav__utility{ background: radial-gradient(60% 140% at 78% 50%, rgba(108,64,161,.06), transparent 70%), linear-gradient(120deg, var(--color-ffffff) 0%, var(--color-ffffff) 55%, var(--color-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); } .nav__utility .wrap{display:flex;align-items:center;height:52px;gap:20px;transition:height 420ms var(--ease),padding 420ms var(--ease);} .nav__main{ background: radial-gradient(60% 140% at 78% 50%, rgba(108,64,161,.06), transparent 70%), linear-gradient(120deg, var(--color-ffffff) 0%, var(--color-ffffff) 55%, var(--color-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); } .nav__main.has-open, .nav__main:has(.navitem[data-open="true"]){overflow:visible;} .nav__main .wrap{display:flex;align-items:center;height:60px;gap:36px;position:relative;} .brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:22px;letter-spacing:-0.01em;color:var(--ink);} .brand__lockup{height:26px;width:auto;object-fit:contain;display:block;transition:height 380ms var(--ease);} .brand__mark{width:28px;height:28px;flex:none;object-fit:contain;display:block;} .navlinks{display:flex;align-items:center;gap:4px;margin-left:auto;} .navitem{position:relative;} .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;} .navlink:hover{opacity:1;} .navlink .chev{width:11px;height:11px;color:var(--muted-2);transition:transform 240ms var(--ease),color 240ms var(--ease);} .navitem[data-open="true"] .navlink{opacity:1;} .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. */ .navpanel{ position:fixed;top:113px;left:0;right:0;width:100%; background:var(--color-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; } .nav.scrolled .navpanel{top:64px;} .navpanel__inner{} .navpanel__items{display:flex;flex-wrap:wrap;gap:8px 28px;} .navpanel__head{display:flex;align-items:center;gap:9px;padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line);} .navpanel__head-mark{width:10px;height:12px;flex:none;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjcAAAKqCAYAAADG0H8zAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAH2BJREFUeAHt3dttHNmWJuCVmkO9iZIeByA1RQ/UHpzxgCYULZDSApIW8IwFKg+aHhx6cOiBGhpq+rFnSAEDqJoZHRHF5GFJvGVmXHbs/X1AoaQqAQL0oh9/7LXWLAAAMnD1v+Ovi4i/vggAgAmrPseby6/xr9Us/j6bxf8QbgCAybq8iF+vtuJzVLG//G9/CQCAifn//x6//H4dn+of/vXH/6e5AQAm5dv/iQ91sPlH3BNsGpobAGASlm3NYnF/qFnS3AAAyXuqrblLcwMAJOvbRbxfRJw81dbcJdwAAMlpxru/vYwPiyqOYkXCDQCQlGYZ39UsPkUVv8QavLkBAJLQtDVXF3HSLOOrf/pLrElzAwCM7rat2SDULGluAIDRdNXW3KW5AQBGcfkl9q9etG3Nm+iQcAMADKpta162D4b3owc+SwEAg2mW8f146LJrmhsAoHfPPZ3QBc0NANCrVU4ndEFzAwD0Ysi25i7NDQDQuauvcThkW3OX5gYA6EyzjC9mcVJV8T5GItwAABtrD11uxWEV8TFGJtwAABvp8nRCF7y5AQDW0sfphC5obgCAlaXW1twl3AAAz7Y8nVD1uGF4U8INAPAst4cuq24PXXZNuAEAHrVcxhcj7KxZhwfFAMCDhj6d0AXNDQDwk7FOJ3RBcwMA/MkU25q7NDcAQOvbRbxfRJxMsa25S7gBgMK1pxNexodFFUeRAeEGAAp2u4yvSm8Z37q8uQGAAqV6OqELmhsAKEzKpxO6oLkBgELk3NbcpbkBgALcnE44iYxDzZJwAwAZWx66jIQPXXbNZykAyFSzjO9qKz6XFGwamhsAyMyUTyd0QXMDABmZ+umELmhuACADpbc1d2luAGDirr7GYeltzV2aGwCYqObQZRXxqarifXBLcwMAE7NcxreI+EcdbgSbH2huAGBCcj+d0AXNDQBMQCmnE7qguQGAxGlrViPcAECibk4nnFRV/Bo8m3ADAAm6OXTZ3IR6E6xEuAGAhCyX8YWdNWvzoBgAEuF0Qjc0NwAwMqcTuqW5AYARaWu6p7kBgBE0pxMWESfamu5pbgBgYM2hy+Z0QmhreqG5AYCBNMv4qll76PKXoDeaGwDomdMJw9LcAECPnE4YnuYGAHqgrRmP5gYAOqatGZdwAwAduTl02TwY3g9G47MUAHSgWcZ3tRWfQ7AZneYGADbgdEJ6NDcAsCanE9KkuQGAFWlr0qa5AYAVNKcTtDVp09wAwDM0hy6raCeh3gdJ09wAwCOWy/iaQ5d1uBFsJkBzAwAPsIxvmjQ3APADpxOmTXMDAHdoa6ZPcwMAoa3JieYGgOJdfon9qxdtW/MmmDzhBoBiLZfxhZ01WfFZCoAiOZ2QL80NAEVxOiF/mhsAiqGtKYPmBoDsNacTFhEn2poyaG4AyFpz6LI5nRDammJobgDIUrOML2Zx4tBleYQbALLSLOP7thWHVcTHoEjCDQDZcDqBhjc3AEye0wncpbkBYNK0NfxIuAFgktq25mV8qqrYD7jDZykAJqdZxne1FZ9DsOEemhsAJsPpBJ5DcwPAJDidwHNpbgBImraGVWluAEiWtoZ1aG4ASE5z6LKKtq1xOoGVCTcAJKM9nfAyPiyqOApYk3ADQBJul/FVlvGxGW9uABiV0wl0TXMDwGicTqAPmhsABqetoU+aGwAGdfkl9q9etG3Nm4AeCDcADGK5jC/srKFnPksB0DvL+BiS5gaA3jidwBg0NwD0QlvDWDQ3AHRKW8PYNDcAdObqaxzWweZzaGsYkeYGgI01y/hiFidV5dAl4xNuAFhbe+hyKw6riI8BiRBuAFiL0wmkypsbAFbidAKp09wA8GzaGqZAuAHgSW1b8zI+VVXsByTOZykAHnV5Eb9ebcXnEGyYCM0NAPdy6JKp0twA8BOnE5gyzQ0At5xOIAeaGwBa2hpyobkBKNy3i3hfRdvWOJ1AFoQbgEK1pxNexodFFUcBGRFuAAp0u4yvsoyP/HhzA1AQpxMogeYGoBBOJ1AKzQ1A5rQ1lEZzA5Cxyy+xf/WibWveBBRCuAHIULuMbxEn7kFRIp+lADJzu4xPsKFQmhuATDidAH/Q3ABkwOkE+CfNDcCEaWvgZ5obgIm6+hqH2hr4meYGYGKaZXwxi5OqcugS7iPcAExEe+hyKw6riI8BPEi4AZgApxPg+by5AUiY0wmwOs0NQKK0NbAe4QYgMW1b8zI+VTYMw1qEG4CE3B66rBy6hHUJNwAJWC7jCztrYGMeFAOMzOkE6JbmBmAkTidAPzQ3ACPQ1kB/NDcAA/p2Ee8XESfaGuiPcAMwgPZ0wsv4sKjiKIBeCTcAPbtdxldZxgdD8OYGoCdOJ8A4NDcAPXA6AcajuQHokLYGxqe5AejI7emEcDoBxiTcAGxoeegyHLqEJPgsBbCBZhnf1VZ8FmwgHZobgDU4nQDp0twArMjpBEib5gbgmbQ1MA2aG4BnuPoah9oamAbNDcAjmmV8MYuTqor3AUyCcANwj/bQ5VYcVhEfA5gU4QbgB04nwLR5cwNww+kEyIPmBiC0NZAT4QYo2s3phObB8K8BZEG4AYp1e+iycugSciLcAMVZLuMLO2sgSx4UA0VxOgHyp7kBiuB0ApRDcwNkT1sDZdHcANn6dhHvFxEn2hooi+YGyFJz6LIONtoaKJDmBshKs4yvmsWnqrKMD0qluQGy4HQCsKS5ASbP6QTgLs0NMFnaGuA+mhtgkm5OJ5yEUAP8QLgBJuXm0GVzD2o/AO7hsxQwGc0yvqut+CzYAI/R3ADJczoBWIXmBkia0wnAqjQ3QJK0NcC6NDdAcprTCdoaYF2aGyAZzaHLKtrTCe8DYE2aG2B0y2V8zaHLOtwINsBGNDfAqJxOALqmuQFG4XQC0BfNDTA4bQ3QJ80NMBhtDTAEzQ0wiJtDl01b8yYAeiTcAL1aLuMLO2uAgfgsBfTG6QRgDJoboHNOJwBj0twAndLWAGPT3ACdaE4nLCJOtDXA2DQ3wMaaQ5fN6YTQ1gAJ0NwAa2uW8cUsThy6BFIi3AAra5bxfduKwyriYwAkRrgBVuJ0ApA6b26AZ3E6AZgKzQ3wJG0NMCXCDfCgtq15GZ+qKvYDYCJ8lgLu1Szju9qKzyHYABOjuQH+xOkEYOo0N8AtpxOAHGhuAG0NkBXNDRSuOZ2grQFyormBQjWHLqtoJ6GcTgCyItxAYdrTCS/jw6KKowDIkHADBbldxldZxgfky5sbKIDTCUBJNDeQOacTgNJobiBT2hqgVJobyNDll9i/etG2NW8CoDDCDWRkuYwv7KwBCuazFGTC6QSAP2huYOKcTgD4M80NTJi2BuBnmhuYIG0NwMM0NzAxN4cuP4e2BuBemhuYiGYZX8zixKFLgMcJN5C49tDlVhxWER8DgCcJN5AwpxMAVufNDSTI6QSA9WluIDHaGoDNCDeQiLateRmfqir2A4C1+SwFCbi8iF+vtuJzCDYAG9PcwIgcugTonuYGRuJ0AkA/NDcwMKcTAPqluYEBaWsA+qe5gQF8u4j3VbRtjdMJAD0TbqBH7emEl/FhUcVRADAI4QZ6cruMr7KMD2BI3txAx5xOABiX5gY65HQCwPg0N9ABbQ1AOjQ3sKHLL7F/9aJta94EAKMTbmBN7TK+RZy4BwWQFp+lYA23y/gEG4DkaG5gBU4nAKRPcwPP5HQCwDRobuAJ2hqAadHcwCOuvsahtgZgWjQ3cI9mGV/M4qSqHLoEmBrhBu5oD11uxWEV8TEAmCThBm44nQCQB29uKJ7TCQB50dxQNG0NQH6EG4rUtjUv41NlwzBAdnyWojiXF/Hr1VZ8djoBIE+aG4qxXMYXdtYAZE1zQxGcTgAoh+aGrDmdAFAezQ3Z0tYAlElzQ3a+XcT7RcSJtgagTMIN2WhPJ7yMD4sqjgKAYgk3ZOF2GV9lGR9A6by5YdKcTgDgR5obJsvpBADuo7lhcrQ1ADxGc8OkXH6J/asXbVvzJgDgHsINk7A8dOkeFABP8VmK5DXL+By6BOC5NDcky+kEANahuSFJTicAsC7NDUnR1gCwKc0Nybj6GofaGgA2pblhdM0yvpjFSVXF+wCADQk3jKY9dLkVh1XExwCAjgg3jMLpBAD64s0Ng3I6AYC+aW4YjLYGgCEIN/Tu5nRC82D41wCAngk39Or20GXl0CUAwxBu6MVyGV/YWQPAwDwopnNOJwAwJs0NnXE6AYAUaG7ohLYGgFRobtjIt4t4v4g40dYAkArhhrW0pxNexodFFUcBAAkRbljZ7TK+yjI+ANLjzQ3P5nQCAFOgueFZnE4AYCo0NzxKWwPA1GhueNDN6YSTEGoAmBDhhp/cHLpsHgzvBwBMjM9S/EmzjO9qKz4LNgBMleaGltMJAORCc4PTCQBkRXNTMG0NADnS3BTq6mscamsAyJHmpjDNocsq4lNVxfsAgAxpbgqxXMa3iPhHHW4EGwCypbkpgNMJAJREc5MxpxMAKJHmJlPaGgBKJdxk5uZ0wklVxa8BAAUSbjJyc+iyuQn1JgCgUMJNBpbL+MLOGgDwoHjqnE4AgD/T3EyU0wkAcD/NzQRpawDgYZqbCWlOJywiTrQ1APAwzc1ENIcum9MJoa0BgEdpbhLXLOOrZu2hy18CAHiS5iZRTicAwHo0NwlyOgEA1qe5SYi2BgA2p7lJhLYGALoh3Izs5tBl82B4PwCAjfksNaJmGd/VVnwOwQYAOqO5GYHTCQDQH83NwJxOAIB+aW4Goq0BgGFobgbQnE7Q1gDAMDQ3PWoOXVbRTkK9DwBgEJqbHiyX8TWHLutwI9gAwIA0Nx2zjA8AxqW56YjTCQCQBs1NB7Q1AJAOzc0GtDUAkB7NzZouv8T+1Yu2rXkTAEAyhJsVLZfxhZ01AJAkn6VW4HQCACRsFqfXv8d8FjxJWwMA6aoi/u1FFQevduOs+bnm5gnaGgBIV1XF/1r8Hv+yDDYNzc0DmtMJi4iTEGoAIDk/tjV3aW7u0Ry6bE4nhGADAMmp25rjH9uauzQ3dzTL+Oo/kRP3oAAgSWfX/y0O3v73+LfHfpFwE38s4/u2FYd1qPkYAEBS6r+f/2/9r+PXO/G35/z64sNN09ZUTicAQKqe1dbcVWy40dYAQLqatma2iIPtd3EaKyoy3GhrACBd7Xj3f8bR2732c9TKigo37aHLl3WoqWI/AICkPDbevYpiRsGbZXxXW/FZsAGA9Ny3jG9d2Tc3TicAQLrqtua8bmvmXYSapazDTdPWLBZxVP/wTQAAyWjHu+u25vVu+/d0p7IMN9oaAEjayuPdq8juzY1DlwCQpqatqf+Zb+/E/+wr2DSyaW6aQ5f1H9gnpxMAIEGzOL1+EfM+Q80/f6uJa5fxvYwPVdX9NzsAYDPNePdsUbc1ayzjW9ekw41lfACQrk2X8a1rkuHG6QQASFdXy/jWNblwo60BgHTVbc1x3db8bei25q7JhBttDQAk7ew6Yv52J85jZJMIN5dfYj9etG2NZXwAkJB2GV/E8eud+Fsk4i+RMMv4ACBpZ4sel/GtK9klfpbxAUCahlrGt67kPktpawAgYc0yvu91WzPig+GnJBVuHLoEgDSNPd69iiTCjbYGANI11jK+dY0ebq6+xqHTCQCQnim1NXeNFm6aZXz1737i0CUApKUd767bmte70ywfBh8Ft4wPAJKW5Hj3KgZtbpxOAIA0pbiMb12DNDfaGgBI2uTbmrt6b260NQCQpqatmS3iYPtdnEZGettQ3LQ1l1/jX+tg8/cQbAAgKe149++xl1uwafTS3FxexK/1v07CMj4ASMpUx7tX0embG8v4ACBdy2V8ryeyjG9dnTU3TicAQJrqtua8bmvmObc1d20cbrQ1AJCmnMa7V7FRuNHWAECyzq4zGu9exVrh5ttFvF/88WD4rwEAJKPUtuaulcJNu4zvZXxw6BIAEjSL0+vvdVuT+YPhpzw73FjGBwBpKmG8exVPLvFr2pqrizixjA8A0nOzjO9fBJt/erS50dYAQJq0NQ+7t7nR1gBAuuq25lhb87CfmpvLL7FfR56mrTHeDQBpObuOmL/difPgQbfhpl3Gt4iTuufaDwAgGca7V9OGG8v4ACBZxS7jW9fs8qJ9V/PXAACS0bQ1dQMx396J34KVNOGmCgAgJb9d/x7z0pfxresvAQAkwXh3N55c4gcA9M8yvu5obgBgRHVbc163NfNtoaYzwg0AjKAd767bmte7jlF3TbgBgOGdLYx390a4AYCBWMY3DOEGAIahrRmIcAMAPWqX8S3iYPtdnAaDMAoOAD25Ge/eE2yGpbkBgI4tl/EZ7x6H5gYAOmQZ3/g0NwDQjbPriPnb3TgPRiXcAMAGjHenR7gBgPUZ706QcAMAK9LWpE24AYBVzOJ08b1ua/bagEOChBsAeIblePerHVNQqTMKDgBPMN49LZobAHiAZXzTpLkBgHvUbc2xtmaaNDcA8GeW8U2ccAMAYbw7J8INAFjGlxXhBoBiNW3NbBEH2+/iNMiGB8UAFOlmvHtPsMmP5gaAohjvzp/mBoBiWMZXBs0NANmr25rzuq2Za2vKINwAkK12vLtua17vxlFQDOEGgFwZ7y6UcANAVizjQ7gBIB+zOF28iLm2pmzCDQCT14x3zxYxt7OGhlFwACZtOd4t2LCkuQFgkizj4yGaGwAmp25rji3j4yGaGwCm5Ow6Yv52N84DHiDcAJA8492sQrgBIHWW8bES4QaAJGlrWJdwA0B6mmV83+u2Zq8NOLAS4QaAZCzHu1/tmIJifUbBAUjCchmf8W42pbkBYFSW8dE14QaA0TTL+F7vxlFAh4QbAMZwdm28m54INwAMxng3QxBuABiKZXwMQrgBoFdNWzNbxMH2uzgNGIBRcAB6czPevSfYMCTNDQCdM97NmDQ3AHTKMj7GprkBoBN1W3NetzVzbQ1jE24A2Eg73l23NZbxkQrhBoBNGO8mOcINACuzjI+UCTcArGYWp4sXMdfWkCrhBoBnWY53v9rxYJi0GQUH4EnGu5kSzQ0AD7KMjynS3ABwr7qtOdbWMEWaGwB+dHYdMX+7G+cBEyTcANAy3k0uhBsAGpbxkQ3hBqBg2hpyJNwAlOu3xe8xf7vXBhzIhnADUJjbZXymoMiUUXCAgljGRwk0NwAFqNua87qtmVvGRwmEG4CMtQ+G67bm9W4cBRRCuAHIl/FuiiTcAGTGeDelE24A8qKtoXjCDUAGmrZmtoiD7XdxGlA4o+AAE3cz3r0n2MAfNDcAE7Vcxme8G/5McwMwQZbxwcM0NwAT0izjW0QcvN2N8wDuJdwATIDxbng+4QYgfca7YQXCDUCitDWwHuEGIEWzOF18r9uavTbgACsQbgASshzvfrVjCgrWZRQcIBHGu6EbmhuAkVnGB93S3ACMqG5rjrU10C3NDcA4zq4j5pbxQfeEG4ABGe+G/gk3AMOxjA8GINwA9Kxpa2b1J6jtnfgtgN55UAzQo5vx7j3BBoajuQHogfFuGI/mBqBjlvHBuDQ3AB2p25rzuq2Za2tgXMINwIba8e66rXm9G0cBjE64AdiM8W5IjHADsAbL+CBdwg3A6rQ1kDDhBuCZmvHu2SLm2+/iNIBkGQUHeIbleLdgA+nT3AA8wjI+mB7NDcAD6rbm2DI+mB7NDcDPzq4j5m934zyAyRFuAG4Y74Y8CDcAfzDeDZkQboCiaWsgP8INUK5ZnC6+123NXhtwgEwIN0BxluPdr3ZMQUGOjIIDRVku4zPeDfnS3ABFsIwPyiHcANlrlvG93o2jAIog3AA5O7s23g3FEW6A7BjvhrIJN0BuLOODwgk3QBaatma2iIPtd3EaQNGMggOTdzPevSfYAA3NDTBZxruB+2hugEmyjA94iOYGmJS6rTmv25q5tgZ4iHADTEI73l23NZbxAU8RboApMN4NPJtwAyTLMj5gHcINkKZZnC5exFxbA6xKuAGS0ox3zxYxt7MGWJdRcCAZy/FuwQbYhOYGGJ1lfECXNDfAqOq25tgyPqBLmhtgLGfXEfO3u3EeAB0SboBBGe8G+ibcAEOyjA/onXAD9E5bAwxJuAH61Szj+163NXttwAHonXAD9GI53v1qxxQUMCyj4EDnlsv4jHcDY9DcAJ2p25rzuq2ZW8YHjEm4ATbWPhiu25rXu3EUACMTboBNGe8GkiLcAGsx3g2kSrgB1qGtAZIl3ADP1rQ1s0UcbL+L0wBIlFFw4Fluxrv3BBsgdZob4FHLZXzGu4Gp0NwAD7KMD5gizQ3wE8v4gCkTboBbxruBHAg3wJLxbiALwg0UTlsD5Ea4gZLN4nTxvW5r9tqAA5AF4QYKtBzvfrXjwTCQH6PgUBjj3UDuNDdQCMv4gFJobqAAdVtzrK0BSqG5gbydXUfM3+7GeQAUQriBDBnvBkom3EB+LOMDiibcQCaatmZWf4La3onfAqBgHhRDHn5b/B57gg2A5gYm7XYZnykogFuaG5goy/gA7qe5gYmp25rzuq2ZW8YHcD/hBiaiHe+u25rXu3EUADxIuIFpMN4N8EzCDSTMMj6A1Qk3kC5tDcAahBtITLuMbxEH2+/iNABYmVFwSMjNePeeYAOwPs0NJGC5jM94N8DmNDcwMsv4ALqluYHxnF1HzN/uxnkA0BnhBgZmvBugX8INDMt4N0DPhBsYgLYGYDjCDfRtFqeL73Vbs9cGHAB6JtxAT5bj3a92TEEBDMkoOPTAeDfAeDQ30CHL+ADGp7mBjtRtzbG2BmB8mhvY3Nm18W6AZAg3sCbj3QBpEm5gPZbxASRKuIEVNG3NbBEH2+/iNABIkgfF8Ew34917gg1A2jQ38ATj3QDTormBR1jGBzA9mhu4R93WnNdtzVxbAzA9wg3c0Y53123N6904CgAmSbiBfzLeDZAB4YbiWcYHkBfhhrLN4nTxIubaGoB8CDcUqRnvni1ibmcNQH6MglOc5Xi3YAOQJ80NxbCMD6AMmhuKULc1x5bxAZRBc0Puzq4j5m934zwAKIJwQ5aMdwOUS7ghR5bxARRMuCEb2hoAGsINeWiW8X2v25q9NuAAUDDhhklbjne/2jEFBcAfjIIzWctlfMa7AbhLc8PkWMYHwGOEGyalWcb3ejeOAgAeINwwFWfXxrsBeAbhhqQZ7wZgVcINKbOMD4CVCTckp2lrZos42H4XpwEAKzIKTlJuxrv3BBsA1qW5IQnGuwHoiuaG0VnGB0CXNDeMpm5rzuu2Zq6tAaBLwg2Da8e767bGMj4A+iDcMDTj3QD0SrhhEJbxATAU4Yb+zeJ08b1ua/bagAMAvRJu6M1yvPvVjgfDAAzHKDi9MN4NwFg0N3TKMj4Axqa5oTN1W3OsrQFgbJobunB2HTF/uxvnAQAjE25Ym/FuAFIk3LAuy/gASJJww0q0NQCkTrhhFb8tfo+5ZXwApEy44Um3y/hMQQEwAUbBeZRlfABMjeaGe9VtzXnd1swt4wNgaoQb/qR9MFy3Na934ygAYIKEG+4y3g3A5Ak3GO8GICvCDdoaALIi3BSqaWtmizjYfhenAQAZMQpeoJvx7j3BBoAcaW4KslzGZ7wbgJxpbgphGR8ApdDcZK5ZxreIOHi7G+cBAAUQbjJlvBuAUgk3eTLeDUCxhJuMaGsAQLjJxyxOF9/rtmavDTgAUCzhZuKW492vdkxBAUDDKPiEGe8GgJ9pbibIMj4AeJjmZmLqtuZYWwMAD9PcTMfZdcTcMj4AeJxwkzjj3QCwGuEmbZbxAcCKhJsENW3NrP4Etb0TvwUAsBIPihNzM969J9gAwHo0N4kw3g0A3dDcJMAyPgDojuZmRHVbc163NXNtDQB0R7gZQTveXbc1r3fjKACATgk3wzPeDQA9Em4GYhkfAAxDuBmGtgYABiLc9KgZ754tYr79Lk4DABiEUfCeLMe7BRsAGJbmpmOW8QHAuDQ3HarbmmPL+ABgXJqbbpxdR8zf7sZ5AACjEm42YLwbANIj3KzPeDcAJEi4WZG2BgDSJtysYhani+91W7PXBhwAIEHCzTMsx7tf7ZiCAoDUGQV/wnIZn/FuAJgGzc0DLOMDgGkSbu7RLON7vRtHAQBMjnDzZ2fXxrsBYNKEmzDeDQA5EW4s4wOArBQbbpq2ZraIg+13cRoAQDaKHAW/Ge/eE2wAID9FNTfGuwEgf8U0N5bxAUAZsm9u6rbmvG5r5toaAChDtuGmHe+u2xrL+ACgLLmGG+PdAFCorMKNZXwAQD7hZhanixcx19YAQNkmH26W492vdjwYBgAmPgpuvBsA+NEkmxvL+ACAh0yuuanbmmNtDQDwkCk1N2fXEfO3u3EeAAAPSD7cGO8GAFaRerixjA8AWEmS4UZbAwCsK71w0yzj+163NXttwAEAWEky4cYyPgCgC0mMglvGBwB0ZdTmpm5rzuu2Zm4ZHwDQlVHCTftguG5rXu/GUQAAdGiMcGO8GwDozWDhxng3ADCEocKNtgYAGESv4aZpa2aLONh+F6cBADCA3kbBb8a79wQbAGBInTc3y2V8xrsBgDF02txYxgcAjK2T5qZZxreIOHi7G+cBADCijcKN8W4AIDWbhBvj3QBAclYON9oaACBlq4WbWZwuvtdtzV4bcAAAkvOscLMc7361YwoKAEjbk6PgxrsBgCl5sLmxjA8AmKJ7m5u6rTnW1gAAU/Rjc3N2HTG3jA8AmKzLi6j+30X8R/3PxwAAmLo63Pz9P/49fgkAAAAA0vJfHy9qNUlNti4AAAAASUVORK5CYII=);background-size:contain;background-repeat:no-repeat;background-position:center;} .navpanel__head-label{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);} .navpanel__item{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;transition:background 160ms;box-sizing:border-box;} .navpanel__item--c3{flex:0 0 calc(33.333% - 19px);} .navpanel__item--c4{flex:0 0 calc(25% - 21px);} .navpanel__item--c5{flex:0 0 calc(20% - 23px);} .navpanel__item:hover{background:var(--g-050);} .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:var(--color-fff);color:var(--muted); transition:color 160ms,border-color 160ms; } .navpanel__item:hover .navpanel__item-ic{color:var(--green-ink);border-color:var(--g-200);} .navpanel__item-ic svg{width:19px;height:19px;} .navpanel__item-body b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:-0.005em;margin-bottom:2px;} .navpanel__item-body span{display:block;font-size:12.5px;color:var(--muted-2);font-weight:400;line-height:1.4;} .navitem[data-open="true"] .navpanel{opacity:1;transform:none;pointer-events:auto;visibility:visible;} .navpanel--wide{min-width:560px;grid-template-columns:1fr 1fr;display:grid;gap:6px 26px;} .navpanel--extra{min-width:820px;grid-template-columns:1fr 1fr 1fr;display:grid;gap:6px 24px;} .navpanel--products{min-width:640px;padding:18px;} .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);} .navpanel__primary{display:block;padding:12px 12px;border-radius:10px;transition:background 160ms;} .navpanel__primary:hover{background:var(--paper-2);} .navpanel__primary__name{display:block;font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-0.005em;margin-bottom:2px;} .navpanel__primary small{display:block;font-size:12px;color:var(--muted-2);font-weight:400;} .navpanel__others{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px;} .navpanel__lbl{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);padding:0 10px 8px;} .navpanel__group{padding:6px 4px;} .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;} .navpanel a:not(.navpanel__item):hover{background:var(--paper-2);opacity:1;} .navpanel a:not(.navpanel__item) small{display:block;font-size:12.5px;color:var(--muted-2);font-weight:400;margin-top:1px;} .navlinks__mobileauth{display:none;} .nav__right{margin-left:auto;display:flex;align-items:center;gap:6px;} .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;} .nav__login:hover{background:var(--paper-2);opacity:1;} .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;} .nav__signup:hover{border-color:var(--muted-2);background:var(--paper-2);} .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;} .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. ---- */ .nav.scrolled{transition:opacity 260ms var(--ease);} @media (min-width:961px){ .nav.scrolled{opacity:0;pointer-events:none;} .nav.scrolled .nav__main{pointer-events:none;} } .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(108,64,161,.06), transparent 70%), linear-gradient(120deg, var(--color-ffffff) 0%, var(--color-ffffff) 55%, var(--color-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){ .nav-float{display:block;} } .nav-float.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;} .nav-float .wrap{display:flex;align-items:center;height:56px;padding-left:28px;padding-right:14px;gap:20px;} .nav-float .btn{height:38px;padding:0 20px;font-size:14.5px;} .nav-float .brand__lockup{height:24px;} @media (prefers-reduced-motion:reduce){ .nav.scrolled{transition:none;} .nav-float{transition:none;} } /* ============================================================ HERO — 2-column, product-led. Left: approved copy, unchanged. Right: the actual Zenwork faceted brand photograph (the real asset — not a redrawn approximation) with real product UI layered on top of it. ============================================================ */ /* ============================================================ HERO — full-bleed product photo, matching the pattern already established on Zenwork's own product sites (Payments, EZ2290, Compliancely): the real photograph pinned to the viewport edge, with a diagonal-cut brand-color facet baked into the image itself (dark green here — the parent color — where each product page uses its own). Small icon+label callouts straddle the photo's left edge, the same device those pages use, here naming the three engines so the parent page reads as one family with them. ============================================================ */ /* Height-aware hero: min-height targets (100% of viewport) − (real header height) − (a deliberate slice of the Trust section), so the hero+peek relationship stays recognizable across laptop/desktop instead of the old 58vw width-driven formula, which showed nothing of Trust at 1366×768 and half of Trust+logos at 1920×1080. min-height (not height) plus overflow:hidden means short viewports/long content can still grow the box — only the decorative photo/glow layers ever get clipped. Three stacked declarations = progressive enhancement: browsers without dvh simply keep the vh line; the plain 560px line is the floor for browsers with neither. */ .hero{position:relative;overflow:hidden;background:var(--color-fff);display:flex;align-items:center; min-height:560px; min-height:clamp(560px, calc(100vh - var(--header-h) - var(--hero-peek)), 900px); min-height:clamp(560px, calc(100dvh - var(--header-h) - var(--hero-peek)), 900px); } .hero .wrap{position:relative;z-index:2;width:100%;padding-left:max(var(--edge), calc((100% - var(--maxw)) / 2));padding-top:clamp(28px,3.2vw,44px);padding-bottom:clamp(28px,3.2vw,44px);} /* Restrained atmosphere: predominantly white, with a soft green wash from the upper-left and a faint lime→yellow warmth easing in through the lower-center transition. Two radial layers, generous transparent falloff on each so neither reads as a hard-edged panel or a saturated blob. */ .hero__glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(62% 70% at 14% 10%,rgba(108,64,161,.13) 0%,rgba(108,64,161,.055) 38%,transparent 68%),radial-gradient(50% 58% at 52% 90%,rgba(209,196,226,.075) 0%,rgba(242,228,0,.032) 48%,transparent 74%);} @keyframes heroGlowPulse{0%,100%{opacity:.7;}50%{opacity:1;}} .hero__row{display:block;} /* max-width is capped at 760px as before, but never wider than the room actually left once the stage width + a guaranteed clearance gap are subtracted — so the copy column physically cannot run under the photo/card at any viewport, rather than just happening to fit at the current copy length. */ /* No editorial max-width here — the layout column itself (whatever room is left after the stage width + guaranteed clearance) determines available width. This calc is a genuine collision-avoidance constraint, not a typographic line-length cap, so it's kept even though the old 760px ceiling on top of it is not. Card-overlap is subtracted too: the card's own left edge sits hero-card-overlap further left than the stage's edge (that's the whole point of the straddle), so that's the real boundary text must stay clear of, not the stage's edge alone. */ .hero__inner{position:relative;z-index:2;max-width:calc(100% - var(--hero-stage-w) - var(--hero-card-overlap) - var(--hero-content-gap));text-align:left;margin-top:-28px;} .hero__inner .display{font-size:clamp(56px,6.6vw,128px);color:var(--ink);} /* Laptop/desktop only: a steeper, calc()-driven slope gives the headline more authority across the whole 1280-1920 range (was ~90-113px, now ~98-124px) — strong enough to read as the primary landing-page statement against the photo/artifact/paragraph, without an oversized jump at any single width. One linear formula, clamped only at the floor/ceiling — no per-breakpoint overrides. Mobile/tablet keep the rule above, untouched. */ @media (min-width:961px){ .hero__inner .display{font-size:clamp(80px, calc(42px + 4.4vw), 124px);} } /* Explicit, font-independent line break: each phrase is its own block and never wraps internally (regardless of Rowan's actual character widths, which a ch-based max-width can't reliably predict), so this always renders as exactly two lines. */ .hero h1{margin:0 0 28px;} .hero h1 .ln,.hero h1 .it{display:block;white-space:nowrap;} .hero .lead{margin:0 0 36px;font-size:clamp(18px,1.5vw,20px);color:var(--muted);} .hero__form{display:flex;gap:10px;flex-wrap:wrap;max-width:540px;margin:0;justify-content:flex-start;} /* ============================================================ HERO STAGE — full-bleed to the top and right edges, the same pattern Zenwork's own product sites (Payments, EZ2290, Compliancely) already use: the real photograph pinned to the viewport edge, not boxed in a rounded card with a shadow. The live product-verification card sits over the photo's left edge, vertically centered against the full hero height — the same device those pages use for feature callouts, holding one real animated artifact here instead of three static labels, so it reads as a Zenwork page but keeps the richer demo. Sized generously so the payee name and EIN never need to truncate. ============================================================ */ .hstage{ position:absolute;top:0;right:0;bottom:0;z-index:1; width:var(--hero-stage-w); overflow:hidden;pointer-events:none; } .hstage__img{ position:absolute;top:0;right:0;bottom:0;left:0; width:100%;height:100%;object-fit:cover;object-position:center 18%; display:block; animation:heroPhotoDrift 13s ease-in-out infinite; } @keyframes heroPhotoDrift{0%,100%{transform:scale(1);}50%{transform:scale(1.018);}} @media (prefers-reduced-motion:reduce){.hstage__img{animation:none;}} .hstage__wrap{ position:absolute;top:0;bottom:0;z-index:3; /* Card's left edge sits (hero-card-overlap) to the left of the stage's own left edge — previously this centered the card ON the stage's left edge, meaning half the card's width (~150-170px) sat outside the photo. Right position = stage width, minus the card's own width, plus the (small) amount that's deliberately meant to spill outside the photo. */ right:calc(var(--hero-stage-w) - var(--hero-card-w) + var(--hero-card-overlap)); width:var(--hero-card-w); display:flex;align-items:center;justify-content:center; opacity:0;transform:translateX(-14px); animation:hstage-in .8s var(--ease) .4s forwards; } @keyframes hstage-in{to{opacity:1;transform:none;}} @media (prefers-reduced-motion:reduce){.hstage__wrap{opacity:1;transform:none;animation:none;}} .hstage__card{ position:relative;width:100%; border-radius:14px;overflow:hidden;background:var(--color-fff); box-shadow:0 18px 36px -16px rgba(15,24,34,.22),0 2px 6px rgba(15,24,34,.06); } .product__foot{padding:0 16px 16px;} .product__foot-track{display:block;height:4px;border-radius:2px;background:var(--stage-100,var(--paper-2));overflow:hidden;} .product__foot-fill{display:block;height:100%;width:35%;border-radius:2px;background:var(--stage-c,var(--green));transition:width 500ms var(--ease);} .hstage__card[data-stage="verify"]{--stage-025:var(--compliancely-025);--stage-100:var(--compliancely-100);--stage-200:var(--compliancely-200);--stage-c:var(--compliancely-300);--stage-c-ink:var(--compliancely-700);} .hstage__card[data-stage="pay"]{--stage-025:var(--payments-025);--stage-100:var(--payments-100);--stage-200:var(--payments-200);--stage-c:var(--payments-300);--stage-c-ink:var(--payments-700);} .hstage__card[data-stage="report"]{--stage-025:var(--tax1099-025);--stage-100:var(--tax1099-100);--stage-200:var(--tax1099-200);--stage-c:var(--tax1099-300);--stage-c-ink:var(--tax1099-700);} .hstage__card .product__head{padding:14px 16px;gap:9px;} .hstage__card .product__av{width:30px;height:30px;border-radius:8px;font-size:10px;background:var(--g-025);border:1px solid var(--g-200);color:var(--green-ink);box-shadow:none;} .hstage__card .product__av svg{width:16px;height:16px;} .hstage__card .product__id b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:185px;display:inline-block;} .hstage__card .product__id__sub{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:185px;display:inline-block;} .hstage__card .product__seal{font-size:9.5px;padding:0;flex:none;background:transparent;border:0;border-radius:0;color:var(--muted);letter-spacing:.06em;box-shadow:none;} .hstage__card .product__body{padding:18px 16px 20px;} .hstage__card .product__row{padding:9px 0;font-size:11.5px;} .hstage__steps{ display:flex;align-items:center;justify-content:center;gap:9px; padding:10px 14px 12px; background:var(--paper-2); border-top:1px solid rgba(15,24,34,.05); } .hstage__step{ font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--muted-2);opacity:.7; transition:color 300ms var(--ease),opacity 300ms var(--ease); } .hstage__step:not(:last-child)::after{content:"\00b7";margin-left:9px;color:var(--line-2);font-weight:400;} .hstage__step.is-on{opacity:1;} .hstage__step[data-hstep="verify"].is-on{color:var(--color-4cc9e9);} .hstage__step[data-hstep="pay"].is-on{color:var(--color-fdb600);} .hstage__step[data-hstep="report"].is-on{color:var(--color-0047bb);} /* WIDE DESKTOP (1600-1920px) — the fluid stage/overlap formulas above already scale continuously; these values pick up exactly where the base formulas leave off at 1600px and ease further by 1920px, so there's no jump at the 1600px seam. Goal is a connected composition (promise -> product proof -> human context), not a redesign: a slightly larger stage, the floating card drawn a bit further into the shared center, and the existing atmospheric glow extended (not replaced) to visually bridge the two halves. The hero__inner max-width calc automatically keeps its own clearance as these grow, so there's no separate collision-avoidance change needed here. */ @media (min-width:1600px){ :root{ --hero-stage-w:clamp(556px, calc(45vw - 164px), 700px); --hero-card-overlap:clamp(96px, calc(10vw - 64px), 128px); } .hero__glow{ background: radial-gradient(62% 70% at 14% 10%,rgba(108,64,161,.13) 0%,rgba(108,64,161,.055) 38%,transparent 68%), radial-gradient(50% 58% at 52% 90%,rgba(209,196,226,.075) 0%,rgba(242,228,0,.032) 48%,transparent 74%), radial-gradient(46% 62% at 60% 44%,rgba(108,64,161,.05) 0%,rgba(209,196,226,.03) 46%,transparent 72%); } /* Centers the floating card against the text block's own visual weight (which sits slightly above hero's geometric mid-line, from hero__inner's -28px nudge) rather than mechanically against the full hero height. */ .hstage__wrap{top:-14px;bottom:14px;} } /* TABLET (700–960px) — same split-hero architecture as desktop, just retuned smaller. Overriding the existing fluid tokens (rather than switching to a different layout system) is what keeps this a compact version of the desktop composition instead of a different one: photo stays pinned right, card keeps straddling its left edge, copy keeps its collision-avoidance max-width — only the numbers shrink. Stage ~48vw plus the smaller overlap/gap leaves the copy column ~44-47% of the row, matching the desktop's editorial/product-led split at a smaller scale. */ @media (min-width:700px) and (max-width:960px){ :root{ --hero-stage-w:48vw; --hero-card-w:clamp(220px,26vw,260px); --hero-card-overlap:32px; --hero-content-gap:20px; } .hero .wrap{padding-top:clamp(32px,4vw,44px);padding-bottom:clamp(32px,4vw,44px);} } /* MOBILE (<700px) — stacks, but keeps the editorial character: left-aligned (never centered), and the product card pulled up over the photo's own lower edge via negative margin so it reads as belonging to the image, not as an unrelated card sitting beneath it. */ @media (max-width:699px){ .hero{overflow:visible;display:flex;flex-direction:column;align-items:stretch;min-height:0;} .hero .wrap{padding-top:clamp(48px,10vw,64px);padding-bottom:0;padding-left:var(--edge);padding-right:var(--edge);} .hstage{order:2;position:relative;top:auto;right:auto;bottom:auto;width:100%;height:clamp(260px,68vw,330px);margin-top:32px;} .hero__inner{max-width:100%;text-align:left;margin-top:0;} .hero h1{margin:0 0 20px;} .hero .lead{margin:0 0 28px;} .hero__form{justify-content:flex-start;margin:0;} /* Card width capped at 320px and pulled up ~48px over the photo's lower edge (within the 40-56px overlap range) — enough to read as attached to the image, not enough to reach into the photo's upper/face area given the stage's own 260-330px height. */ .hstage__wrap{order:3;position:relative;top:auto;bottom:auto;right:auto;left:auto;width:min(88vw,320px);margin:-48px auto 0;padding:0 0 8px;opacity:1;transform:none;animation:none;} .hstage__card{width:100%;} } /* Task 03: the Hero CTA opts out of the global mobile full-width .btn rule — a deliberate pill, not a stretched action bar. Two classes beats the .btn{width:100%} rule's specificity regardless of source order. */ @media (max-width:560px){ .btn.hero__cta{width:auto;min-height:48px;} } /* Proof statement — restrained editorial line: quiet label, the number does the work */ .hero__proof{ display:block;margin:0 0 28px;font-size:14px;color:var(--muted);letter-spacing:0.005em;line-height:1.3; } /* Odometer — each decimal digit is its own vertical reel that rolls to its neighbor, the way a live data readout ticks (see Ramp's hero number treatment). The integer and punctuation stay static text; only the four decimal digits ever move. */ .odometer{ display:inline-flex;align-items:baseline;color:var(--green-ink);font-weight:700; font-size:1.28em;letter-spacing:-0.01em;font-variant-numeric:tabular-nums; } .hero__input{flex:1;min-width:220px;height:54px;padding:0 22px;border:1px solid var(--line-2);border-radius:999px;background:var(--color-fff);font-size:15.5px;font-family:inherit;color:var(--ink);transition:border-color 180ms,box-shadow 180ms;} .hero__input::placeholder{color:var(--muted-2);} .hero__input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(108,64,161,.1);} .hero__load > *{opacity:0;transform:translateY(16px);animation:up .9s var(--ease) forwards;} .hero__load > *:nth-child(1){animation-delay:.05s;} .hero__load > *:nth-child(2){animation-delay:.15s;} .hero__load > *:nth-child(3){animation-delay:.25s;} .hero__load > *:nth-child(4){animation-delay:.35s;} @keyframes up{to{opacity:1;transform:none;}} @media (prefers-reduced-motion:reduce){.hero__load > *{opacity:1;transform:none;animation:none;}} /* ============================================================ DEMO — product walkthrough (introduced right after hero) ============================================================ */ .demo__frame{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--color-fff);box-shadow:var(--shadow-lift);overflow:hidden;max-width:1060px;margin:0 auto;} .demo__bar{height:46px;background:var(--paper-2);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px;padding:0 18px;} .demo__bar i{width:10px;height:10px;border-radius:50%;background:var(--line-2);display:block;} .demo__bar .url{margin-left:14px;font-size:12.5px;color:var(--muted-2);font-weight:500;} .demo__bar .live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--green-ink);text-transform:uppercase;} .demo__bar .live .pip{width:7px;height:7px;border-radius:50%;background:var(--green);} .demo__stage{padding:44px 40px 38px;} .demo__steps{display:flex;align-items:flex-start;position:relative;} .dstep{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 12px;position:relative;opacity:.38;transition:opacity 500ms var(--ease);} .dstep.on{opacity:1;} .dstep__node{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;background:var(--paper-2);color:var(--muted-2);border:1px solid var(--line-2);transition:all 500ms var(--ease);position:relative;z-index:2;} .dstep.on .dstep__node{background:var(--green);border-color:var(--green);color:var(--color-fff);box-shadow:0 10px 24px -10px rgba(108,64,161,.55);transform:translateY(-3px);} .dstep.done .dstep__node{background:var(--color-fff);border-color:var(--green);color:var(--green-ink);} .dstep__node svg{width:25px;height:25px;} .dstep__label{margin-top:16px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);transition:color 400ms;} .dstep.on .dstep__label{color:var(--ink);} .dstep__cap{margin-top:7px;font-size:13px;color:var(--muted-2);line-height:1.4;min-height:2.8em;max-width:17ch;} .dstep__wire{position:absolute;top:28px;left:50%;width:100%;height:2px;background:var(--line-2);z-index:1;overflow:hidden;} .dstep:last-child .dstep__wire{display:none;} .dstep__wire::after{content:"";position:absolute;inset:0;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform 600ms var(--ease);} .dstep.done .dstep__wire::after{transform:scaleX(1);} .demo__ticker{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--muted);justify-content:center;flex-wrap:wrap;} .demo__ticker .rec{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--ink);} .demo__ticker .rec .av{width:26px;height:26px;border-radius:7px;background:var(--green);color:var(--color-fff);display:grid;place-items:center;font-size:11px;font-weight:700;} .demo__ticker .now{font-family:var(--serif);font-style:italic;color:var(--green-ink);} .demo__note{margin-top:22px;text-align:center;color:var(--muted-2);font-size:12.5px;} /* ============================================================ TRUST STRIP ============================================================ */ .trust{padding:clamp(24px,2.5vw,32px) 0 0;text-align:center;} .trust p.tl{font-size:14px;color:var(--muted-2);letter-spacing:.02em;margin-bottom:22px;} .trust__chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:32px;} /* Task 02: tablet/mobile disclosure — these labels are informational, not a filter (nothing on the page changes when "selected"), so this is a plain accessible disclosure exposing the same list as text, not a