/* Scoped styles from zenwork-w9-tin-matching-vendor-aligned.html. */ .page-usecase-w9 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 — matches the Landing page's rhythm token exactly */ --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 */ --divider-soft:rgba(15,24,34,.07); /* quiet structural dividers — felt, not seen */ --visual-stage-pad:clamp(28px,2.5vw,36px); /* shared outer padding for every narrative visual stage */ --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-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-usecase-w9 main *,.page-usecase-w9 main *::before,.page-usecase-w9 main *::after{box-sizing:border-box;} .page-usecase-w9 main{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} .page-usecase-w9 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-usecase-w9 main img,.page-usecase-w9 main svg{max-width:100%;display:block;} .page-usecase-w9 main a{color:inherit;text-decoration:none;} .page-usecase-w9 main h1,.page-usecase-w9 main h2,.page-usecase-w9 main h3,.page-usecase-w9 main h4{margin:0;font-family:var(--serif);font-weight:400;} .page-usecase-w9 main p{margin:0;} .page-usecase-w9 main blockquote{margin:0;padding:0;} .page-usecase-w9 main ul{margin:0;padding:0;list-style:none;} .page-usecase-w9 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-usecase-w9 main button{font-family:inherit;cursor:pointer;} .page-usecase-w9 main :focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px;} .page-usecase-w9 main button:focus-visible{outline-offset:2px;} .page-usecase-w9 main a:focus-visible{border-radius:6px;} .page-usecase-w9 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-usecase-w9 main .skip-link:focus{top:12px;} @media (prefers-reduced-motion:reduce){.page-usecase-w9 main{scroll-behavior:auto;}.page-usecase-w9 main *{transition-duration:0.01ms!important;animation-duration:0.01ms!important;}} /* Primitives */ .page-usecase-w9 main .wrap{width:min(calc(100% - (var(--edge) * 2)), var(--maxw));margin-inline:auto;} .page-usecase-w9 main .wrap--wide{max-width:var(--maxw-wide);} @media (max-width:640px){.page-usecase-w9 main{--edge:20px;}} .page-usecase-w9 main .section{padding:var(--gap) 0;scroll-margin-top:130px;} .page-usecase-w9 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 Vendor Payments / Business Verification use-case system. */ .page-usecase-w9 main .section.m-light-a,.page-usecase-w9 main .section.m-light-b{border-top:0!important;} .page-usecase-w9 main .alt{background:var(--paper-2);} .page-usecase-w9 main .reveal{opacity:0;transform:translateY(20px);transition:opacity 850ms var(--ease),transform 850ms var(--ease);} .page-usecase-w9 main .reveal.in{opacity:1;transform:none;} .page-usecase-w9 main .reveal[data-d="1"]{transition-delay:.08s;} .page-usecase-w9 main .reveal[data-d="2"]{transition-delay:.16s;} .page-usecase-w9 main .reveal[data-d="3"]{transition-delay:.24s;} /* Type scale — big, editorial */ .page-usecase-w9 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-usecase-w9 main .display{ font-family:var(--serif); font-size:clamp(64px,8.6vw,124px);line-height:1.06;letter-spacing:-0.025em; } .page-usecase-w9 main .display .it{font-style:italic;} .page-usecase-w9 main .h2{font-family:var(--serif);font-size:var(--type-h2);line-height:1.08;letter-spacing:-0.018em;} .page-usecase-w9 main .h3{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);line-height:1.12;letter-spacing:-0.012em;} .page-usecase-w9 main .lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--muted);} .page-usecase-w9 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-usecase-w9 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-usecase-w9 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-usecase-w9 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-usecase-w9 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-usecase-w9 main .m-light-a{background:radial-gradient(62% 68% at 78% 6%, rgba(0,171,82,.075), transparent 66%),var(--paper);} .page-usecase-w9 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-usecase-w9 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-usecase-w9 main .btn svg{width:16px;height:16px;transition:transform 260ms var(--ease);} .page-usecase-w9 main .btn:hover svg{transform:translateX(3px);} .page-usecase-w9 main .btn--primary,.page-usecase-w9 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-usecase-w9 main .btn--primary:hover,.page-usecase-w9 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-usecase-w9 main .btn--primary:active,.page-usecase-w9 main .btn--yellow:active{transform:translateY(0);box-shadow:0 6px 16px -12px rgba(36,31,0,.26);} .page-usecase-w9 main .btn:focus-visible{outline-offset:3px;} .page-usecase-w9 main .btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2);} .page-usecase-w9 main .btn--ghost:hover{border-color:var(--ink);} .page-usecase-w9 main .btn--lg{height:58px;padding:0 34px;font-size:16.5px;} .page-usecase-w9 main .textlink{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;color:var(--green-ink);} .page-usecase-w9 main .textlink svg{width:15px;height:15px;transition:transform 240ms var(--ease);} .page-usecase-w9 main .textlink:hover svg{transform:translateX(4px);} .page-usecase-w9 main .textlink--ink{color:var(--ink);} .page-usecase-w9 main .brand-mark{display:inline-flex;align-items:center;margin-right:9px;vertical-align:-3px;} .page-usecase-w9 main .brand-mark img{display:block;height:16.5px;width:auto;} /* section heading block */ .page-usecase-w9 main .shead{max-width:52ch;margin-bottom:clamp(48px,6vw,76px);} .page-usecase-w9 main .shead .h2{margin-bottom:0;} .page-usecase-w9 main .shead p{margin-top:22px;font-size:19px;line-height:1.55;color:var(--muted);max-width:50ch;} .page-usecase-w9 main .shead--center{margin-left:auto;margin-right:auto;text-align:center;} .page-usecase-w9 main .shead--center p{margin-left:auto;margin-right:auto;} .page-usecase-w9 main .util{background:var(--ink);color:var(--on-dark-muted);font-size:13px;} .page-usecase-w9 main .util .wrap{display:flex;justify-content:flex-end;align-items:center;gap:20px;height:38px;} .page-usecase-w9 main .util a:hover{color:#fff;} .page-usecase-w9 main .util .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.4;} .page-usecase-w9 main .nav{position:sticky;top:0;z-index:100;transition:padding 420ms var(--ease);} .page-usecase-w9 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-usecase-w9 main .nav__utility .wrap{display:flex;align-items:center;height:52px;gap:20px;transition:height 420ms var(--ease),padding 420ms var(--ease);} .page-usecase-w9 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-usecase-w9 main .nav__main.has-open, .page-usecase-w9 main .nav__main:has(.navitem[data-open="true"]){overflow:visible;} .page-usecase-w9 main .nav__main .wrap{display:flex;align-items:center;height:60px;gap:36px;position:relative;} .page-usecase-w9 main .brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:22px;letter-spacing:-0.01em;color:var(--ink);} .page-usecase-w9 main .brand__lockup{height:26px;width:auto;object-fit:contain;display:block;transition:height 380ms var(--ease);} .page-usecase-w9 main .brand__mark{width:28px;height:28px;flex:none;object-fit:contain;display:block;} .page-usecase-w9 main .navlinks{display:flex;align-items:center;gap:4px;margin-left:auto;} .page-usecase-w9 main .navitem{position:relative;} .page-usecase-w9 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-usecase-w9 main .navlink:hover{opacity:1;} .page-usecase-w9 main .navlink .chev{width:11px;height:11px;color:var(--muted-2);transition:transform 240ms var(--ease),color 240ms var(--ease);} .page-usecase-w9 main .navitem[data-open="true"] .navlink{opacity:1;} .page-usecase-w9 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-usecase-w9 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-usecase-w9 main .nav.scrolled .navpanel{top:64px;} .page-usecase-w9 main .navpanel__inner{} .page-usecase-w9 main .navpanel__items{display:flex;flex-wrap:wrap;gap:8px 28px;} .page-usecase-w9 main .navpanel__head{display:flex;align-items:center;gap:9px;padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line);} .page-usecase-w9 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-usecase-w9 main .navpanel__head-label{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);} .page-usecase-w9 main .navpanel__item{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;transition:background 160ms;box-sizing:border-box;} .page-usecase-w9 main .navpanel__item--c3{flex:0 0 calc(33.333% - 19px);} .page-usecase-w9 main .navpanel__item--c4{flex:0 0 calc(25% - 21px);} .page-usecase-w9 main .navpanel__item--c5{flex:0 0 calc(20% - 23px);} .page-usecase-w9 main .navpanel__item:hover{background:var(--g-050);} .page-usecase-w9 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-usecase-w9 main .navpanel__item:hover .navpanel__item-ic{color:var(--green-ink);border-color:var(--g-200);} .page-usecase-w9 main .navpanel__item-ic svg{width:19px;height:19px;} .page-usecase-w9 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-usecase-w9 main .navpanel__item-body span{display:block;font-size:12.5px;color:var(--muted-2);font-weight:400;line-height:1.4;} .page-usecase-w9 main .navitem[data-open="true"] .navpanel{opacity:1;transform:none;pointer-events:auto;visibility:visible;} .page-usecase-w9 main .navpanel--wide{min-width:560px;grid-template-columns:1fr 1fr;display:grid;gap:6px 26px;} .page-usecase-w9 main .navpanel--extra{min-width:820px;grid-template-columns:1fr 1fr 1fr;display:grid;gap:6px 24px;} .page-usecase-w9 main .navpanel--products{min-width:640px;padding:18px;} .page-usecase-w9 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-usecase-w9 main .navpanel__primary{display:block;padding:12px 12px;border-radius:10px;transition:background 160ms;} .page-usecase-w9 main .navpanel__primary:hover{background:var(--paper-2);} .page-usecase-w9 main .navpanel__primary__name{display:block;font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-0.005em;margin-bottom:2px;} .page-usecase-w9 main .navpanel__primary small{display:block;font-size:12px;color:var(--muted-2);font-weight:400;} .page-usecase-w9 main .navpanel__others{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px;} .page-usecase-w9 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-usecase-w9 main .navpanel__group{padding:6px 4px;} .page-usecase-w9 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-usecase-w9 main .navpanel a:not(.navpanel__item):hover{background:var(--paper-2);opacity:1;} .page-usecase-w9 main .navpanel a:not(.navpanel__item) small{display:block;font-size:12.5px;color:var(--muted-2);font-weight:400;margin-top:1px;} .page-usecase-w9 main .navlinks__mobileauth{display:none;} .page-usecase-w9 main .nav__right{margin-left:auto;display:flex;align-items:center;gap:6px;} .page-usecase-w9 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-usecase-w9 main .nav__login:hover{background:var(--paper-2);opacity:1;} .page-usecase-w9 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-usecase-w9 main .nav__signup:hover{border-color:var(--muted-2);background:var(--paper-2);} .page-usecase-w9 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-usecase-w9 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-usecase-w9 main .nav.scrolled{transition:opacity 260ms var(--ease);} @media (min-width:961px){ .page-usecase-w9 main .nav.scrolled{opacity:0;pointer-events:none;} .page-usecase-w9 main .nav.scrolled .nav__main{pointer-events:none;} } .page-usecase-w9 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-usecase-w9 main .nav-float{display:block;} } .page-usecase-w9 main .nav-float.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;} .page-usecase-w9 main .nav-float .wrap{display:flex;align-items:center;height:56px;padding-left:28px;padding-right:14px;gap:20px;} .page-usecase-w9 main .nav-float .btn{height:38px;padding:0 20px;font-size:14.5px;} .page-usecase-w9 main .nav-float .brand__lockup{height:24px;} .page-usecase-w9 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-usecase-w9 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-usecase-w9 main .close::after{background-size:auto 80%;}} .page-usecase-w9 main .close .wrap{position:relative;z-index:1;} .page-usecase-w9 main .close .h2{max-width:16ch;margin:0 auto 22px;color:#fff;} .page-usecase-w9 main .close p{color:rgba(255,255,255,.72);font-size:19px;max-width:46ch;margin:0 auto 36px;} .page-usecase-w9 main .close .btn--primary{box-shadow:0 14px 30px -14px rgba(0,0,0,.45);} .page-usecase-w9 main .close .btn--primary:hover{box-shadow:0 18px 34px -14px rgba(0,0,0,.5);} .page-usecase-w9 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-usecase-w9 main .closefoot{position:relative;overflow:hidden;background:#00351C;} .page-usecase-w9 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-usecase-w9 main .closefoot .close,.page-usecase-w9 main .closefoot .foot{background:transparent;} /* ============================================================ FOOTER ============================================================ */ .page-usecase-w9 main .foot{color:var(--on-dark-muted);padding:56px 0 40px;position:relative;z-index:1;} .page-usecase-w9 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-usecase-w9 main .foot__col--nested{display:flex;flex-direction:column;gap:26px;} .page-usecase-w9 main .foot__brand{display:flex;align-items:center;margin-bottom:22px;} .page-usecase-w9 main .foot__brand img{height:46px;width:auto;object-fit:contain;display:block;} .page-usecase-w9 main .foot__company{font-family:var(--serif);font-size:19px;color:var(--on-dark);margin-bottom:14px;} .page-usecase-w9 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-usecase-w9 main .foot__address svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--lime);} .page-usecase-w9 main .foot__hours{font-size:14px;color:var(--on-dark-muted);margin:12px 0 22px;} .page-usecase-w9 main .foot__social{display:flex;gap:10px;align-items:center;} .page-usecase-w9 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-usecase-w9 main .foot__social a:hover{background:var(--lime);color:var(--green-deep);transform:translateY(-2px);} .page-usecase-w9 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-usecase-w9 main .foot__col a{display:block;font-size:14.5px;color:var(--on-dark);opacity:.82;padding:5px 0;transition:opacity 160ms;} .page-usecase-w9 main .foot__col a:hover{opacity:1;} .page-usecase-w9 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-usecase-w9 main .foot__legalrow a{color:var(--on-dark);opacity:.82;transition:opacity 160ms;} .page-usecase-w9 main .foot__legalrow a:hover{opacity:1;} .page-usecase-w9 main .foot__legalrow .sep{color:var(--on-dark-muted);opacity:.5;} .page-usecase-w9 main .foot__bottom{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;padding-top:22px;font-size:13px;} .page-usecase-w9 main .foot__compliance{display:flex;flex-wrap:wrap;gap:10px;align-items:center;} .page-usecase-w9 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-usecase-w9 main .navlinks{display:none;} .page-usecase-w9 main .navtoggle{display:inline-flex;align-items:center;} .page-usecase-w9 main .nav__right .btn,.page-usecase-w9 main .nav__right .nav__login,.page-usecase-w9 main .nav__right .nav__signup{display:none;} .page-usecase-w9 main .nav__main{border-bottom:0;background:transparent;} .page-usecase-w9 main .nav__main .wrap{height:auto;min-height:0;padding-top:0;padding-bottom:0;} .page-usecase-w9 main .navlinks__mobileauth{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding-top:16px;border-top:1px solid var(--line);} .page-usecase-w9 main .navlinks__mobileauth .nav__login,.page-usecase-w9 main .navlinks__mobileauth .nav__signup{justify-content:center;border:1px solid var(--line-2);} .page-usecase-w9 main .navlinks__mobileauth .btn{width:100%;justify-content:center;} .page-usecase-w9 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-usecase-w9 main .navitem[data-open="true"] .navpanel{display:block;} .page-usecase-w9 main .navpanel__items{display:block;} .page-usecase-w9 main .navpanel__item{width:100%;} .page-usecase-w9 main .navpanel__head{padding-bottom:8px;margin-bottom:6px;} .page-usecase-w9 main .navpanel--wide,.page-usecase-w9 main .navpanel--extra{grid-template-columns:1fr;gap:0;} .page-usecase-w9 main .navpanel--products{min-width:0;padding:6px 4px 4px;} .page-usecase-w9 main .navpanel__primary-row{grid-template-columns:1fr;} .page-usecase-w9 main .navpanel__others{grid-template-columns:1fr;} .page-usecase-w9 main .foot__top{grid-template-columns:1fr;gap:32px;} } @media (max-width:560px){ .page-usecase-w9 main .foot__top{grid-template-columns:1fr;gap:28px;} .page-usecase-w9 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-usecase-w9 main,.page-usecase-w9 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-usecase-w9 main .m-hero-grid{grid-template-columns:1fr!important;gap:36px!important;padding-top:clamp(48px,8vw,80px)!important;padding-bottom:36px!important;} .page-usecase-w9 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-usecase-w9 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-usecase-w9 main .m-hero-grid h1{max-width:none!important;} .page-usecase-w9 main .hero-lead{max-width:none!important;} .page-usecase-w9 main .hero-visual{max-width:460px!important;justify-self:end!important;} } /* ---------- TABLET CONTAINER: comfortable 32–48px side margins, fluid between the mobile 24px and desktop 24px edge (the page container is intentionally more generous only in this band) ---------- */ @media (min-width:768px) and (max-width:1023px){ .page-usecase-w9 main .m-narrative-h2{max-width:none!important;} .page-usecase-w9 main .lead{max-width:none!important;} .page-usecase-w9 main .close .h2{max-width:none!important;} .page-usecase-w9 main .close p{max-width:none!important;width:100%!important;} } /* ---------- MOBILE ONLY (<768) — full intentional recomposition ---------- */ @media (max-width:767px){ .page-usecase-w9 main{ --mobile-radius-surface:12px; } /* 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 shared, 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-usecase-w9 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-usecase-w9 main .m-visual-stage{ border-radius:var(--mobile-radius-stage)!important; padding:var(--mobile-stage-pad); } .page-usecase-w9 main .m-visual-surface{border-radius:var(--mobile-radius-surface)!important;padding:20px 16px!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-usecase-w9 main .hero-visual{max-width:400px!important;margin-inline:auto!important;} .page-usecase-w9 main .hero-stats-orbit .hero-stat-val{font-size:clamp(19px,5.6vw,23px)!important;} .page-usecase-w9 main .hero-stats-orbit .hero-stat-label{font-size:11px!important;max-width:12ch!important;} .page-usecase-w9 main .hero-stats-orbit .hero-stat-connector{width:34px!important;} .page-usecase-w9 main .m-hero-grid h1{max-width:none!important;margin-bottom:18px!important;} .page-usecase-w9 main .hero-lead{max-width:none!important;margin-bottom:28px!important;} .page-usecase-w9 main .m-hero-grid .btn--primary{width:100%!important;justify-content:center!important;height:53px!important;} .page-usecase-w9 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-usecase-w9 main .m-testimonial-grid{grid-template-columns:1fr!important;gap:22px!important;} .page-usecase-w9 main .m-tstory{display:contents!important;} .page-usecase-w9 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-usecase-w9 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-usecase-w9 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-usecase-w9 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-usecase-w9 main .m-tphoto-gradient{display:none!important;} .page-usecase-w9 main .m-tphoto-identity{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;gap:2px!important;} .page-usecase-w9 main .m-tphoto-rule{display:none!important;} .page-usecase-w9 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-usecase-w9 main .m-testimonial-metrics>div{min-width:0!important;} .page-usecase-w9 main .m-testimonial-metrics>div:nth-child(2){padding-right:11px!important;} .page-usecase-w9 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-usecase-w9 main .m-testimonial-metrics>div:nth-child(4){padding-left:11px!important;border-left:1px solid rgba(255,255,255,.14)!important;} .page-usecase-w9 main .m-t-metric-val{font-size:clamp(21px,6vw,26px)!important;} .page-usecase-w9 main .m-testimonial-metrics span:last-child{font-size:11px!important;line-height:1.35!important;} .page-usecase-w9 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-usecase-w9 main .close{padding:56px 0 60px!important;} .page-usecase-w9 main .close .h2{max-width:none!important;width:100%!important;} .page-usecase-w9 main .close p{width:100%!important;max-width:none!important;font-size:15.5px!important;line-height:1.55!important;} /* EARLY-VALIDATION FLOW — slightly more room between stages, and a touch larger internal type/icon so the diagram doesn't feel like a shrunk-down desktop screenshot. */ .page-usecase-w9 main .ev-grid{gap:32px!important;} .page-usecase-w9 main .ev-grid .ev-halo + div{padding:28px 20px 26px!important;} .page-usecase-w9 main .ev-grid span:is(.zwx-aada07ed){font-size:19.5px!important;} /* TIN ARCHITECTURE DIAGRAM — trim the decorative skeleton filler rows (no real data, just suggesting "more records exist") to keep the compact 3-record list the brief calls for, so the diagram reads in a reasonable scroll length instead of the full 7-8 row stack. Simplify the method-row connector to a plain short line (dropping the horizontal joining bar, which reads as visual noise at this width) and give the major phases more vertical separation. */ .page-usecase-w9 main .arch-skeleton-row{display:none!important;} .page-usecase-w9 main .arch-recordcard{padding-bottom:2px;} .page-usecase-w9 main .arch-connect:not(.arch-return){padding-bottom:40px!important;} .page-usecase-w9 main .arch-connect:not(.arch-return) > span.arch-bus:nth-of-type(1), .page-usecase-w9 main .arch-connect:not(.arch-return) > span.arch-bus:nth-of-type(2), .page-usecase-w9 main .arch-connect:not(.arch-return) > span.arch-bus:nth-of-type(3), .page-usecase-w9 main .arch-connect:not(.arch-return) > span.arch-bus:nth-of-type(4){display:none!important;} .page-usecase-w9 main .arch-connect:not(.arch-return) > span.arch-bus:nth-of-type(5){bottom:6px!important;} .page-usecase-w9 main .arch-grid{gap:30px!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-usecase-w9 main .m-stories3{grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:0!important;row-gap:0!important;} .page-usecase-w9 main .m-stories3>div{min-width:0!important;} .page-usecase-w9 main .m-stories3>div:nth-child(1){padding-left:0!important;padding-right:22px!important;border-left:0!important;} .page-usecase-w9 main .m-stories3>div:nth-child(2){padding-left:22px!important;padding-right:22px!important;border-left:1px solid var(--divider-soft)!important;} .page-usecase-w9 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-usecase-w9 main .m-visual-surface{padding-top:36px!important;padding-bottom:36px!important;} } @media (max-width:767px){ .page-usecase-w9 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-usecase-w9 main .m-stories3>div{border-left:0!important;padding-left:0!important;padding-right:0!important;} .page-usecase-w9 main .m-stories3>div:not(:first-child){border-top:1px solid var(--line-2)!important;padding-top:24px!important;} .page-usecase-w9 main .m-stories3 h3{max-width:none!important;width:100%!important;} .page-usecase-w9 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-usecase-w9 main .m-testimonial-grid{grid-template-columns:minmax(0,270px) minmax(0,1fr)!important;gap:40px!important;} .page-usecase-w9 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-usecase-w9 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-usecase-w9 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-usecase-w9 main .marquee-group{display:flex;align-items:center;gap:clamp(30px,calc(16px + 3.8889vw),72px);flex-shrink:0;} .page-usecase-w9 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-usecase-w9 main .hero-sweep{animation:heroSweep 26s linear infinite;} .page-usecase-w9 main .logow__img{height:clamp(22px,calc(20px + 1.6vw),62px);width:auto;flex-shrink:0;display:block;object-fit:contain;} .page-usecase-w9 main .logow__img--badge{height:clamp(17px,calc(14px + 0.8333vw),26px);} @media (prefers-reduced-motion:reduce){ .page-usecase-w9 main .logow__track{animation:none;transform:none!important;flex-wrap:wrap;justify-content:center;width:100%;} .page-usecase-w9 main .logow__marquee{overflow:visible;} .page-usecase-w9 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-usecase-w9 main h1{font-size:clamp(48px,4.4vw,64px)!important;line-height:1.06!important;letter-spacing:-0.025em!important;max-width:none!important;} .page-usecase-w9 main .m-narrative-h2,.page-usecase-w9 main .h2{font-size:var(--type-h2)!important;line-height:1.08!important;letter-spacing:-0.018em!important;} .page-usecase-w9 main .m-narrative-h2{max-width:none!important;} .page-usecase-w9 main .h3{font-size:clamp(22px,1.7vw,25px)!important;line-height:1.15!important;} .page-usecase-w9 main .m-head-intro{margin-bottom:44px!important;} .page-usecase-w9 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-usecase-w9 main .lead{margin-top:18px!important;} .page-usecase-w9 main .m-hero-grid{grid-template-columns:1.3fr 1fr!important;gap:56px!important;} .page-usecase-w9 main .hero-lead{max-width:none!important;} /* .page-usecase-w9 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-usecase-w9 main section:has(>.m-testimonial-grid){padding:clamp(48px,6.25vw,97px) 0!important;} .page-usecase-w9 main .m-testimonial-grid{grid-template-columns:clamp(290px,23vw,330px) minmax(0,1fr)!important;} .page-usecase-w9 main .m-tphoto{height:380px!important;} .page-usecase-w9 main .m-tstory{gap:0!important;width:100%!important;max-width:none!important;min-width:0!important;} .page-usecase-w9 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-usecase-w9 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-usecase-w9 main .m-testimonial-metrics{margin-top:30px!important;padding-top:22px!important;} .page-usecase-w9 main .m-t-metric-val{font-size:33px!important;} .page-usecase-w9 main .m-t-cta{margin-top:32px!important;} .page-usecase-w9 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-usecase-w9 main .m-stories3>div{min-width:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;} .page-usecase-w9 main .m-stories3>div:nth-child(1){padding-left:0!important;padding-right:38px!important;border-left:0!important;} .page-usecase-w9 main .m-stories3>div:nth-child(2){padding-left:38px!important;padding-right:38px!important;border-left:1px solid var(--divider-soft)!important;} .page-usecase-w9 main .m-stories3>div:nth-child(3){padding-left:38px!important;padding-right:0!important;border-left:1px solid var(--divider-soft)!important;} .page-usecase-w9 main .m-stories3 h3{max-width:none!important;} .page-usecase-w9 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-usecase-w9 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-usecase-w9 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-usecase-w9 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-usecase-w9 main .logow-section{padding:calc((var(--uc-trust-strip-h) - 34px) / 2) 0!important;} } /* ============================================================ W-9 & TIN MATCHING — 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 1099 page. The rules below only style the two diagrams that are unique to W-9 — the early-validation flow and the enterprise TIN-controls system — plus small hero-visual details this page's own illustration needs. ============================================================ */ .page-usecase-w9 main .hero-ring{ } .page-usecase-w9 main .ev-wash{ } .page-usecase-w9 main .ev-halo{ } .page-usecase-w9 main .ev-loop{ } /* ---------- W-9 diagrams — DESKTOP/TABLET BREAKPOINT (own tuning, kept at this pass's existing 1180/900 thresholds rather than the shared 768/1023 system — these two diagrams are unique to this page, so there is no shared responsive rule to inherit. A dedicated tablet/mobile pass will reconcile breakpoints across the whole use-case family later, as scoped. ---------- */ @media (max-width:1180px){ .page-usecase-w9 main .arch-grid{grid-template-columns:minmax(0,1fr) !important;gap:28px !important} .page-usecase-w9 main .arch-connect{flex-direction:row !important;align-items:flex-start;gap:clamp(20px,4vw,44px) !important} .page-usecase-w9 main .arch-connect > span{flex:1 1 0 !important;min-width:0} .page-usecase-w9 main .arch-irs{position:static !important;transform:none !important;order:2;flex-direction:column-reverse !important;margin-top:2px} .page-usecase-w9 main .arch-grid > div:nth-of-type(3) > div:last-child{order:1} .page-usecase-w9 main .arch-connect:not(.arch-return){position:relative;margin-bottom:0 !important;padding:0 0 52px !important} .page-usecase-w9 main .arch-connect:not(.arch-return) > span > span:last-child{display:none !important} .page-usecase-w9 main .arch-bus{flex:none !important} .page-usecase-w9 main .arch-connect > i{display:none !important} .page-usecase-w9 main .arch-connect:not(.arch-return){padding-left:0 !important} .page-usecase-w9 main .arch-connect:not(.arch-return) > span:nth-of-type(n+6){justify-content:center !important} .page-usecase-w9 main .arch-connect:not(.arch-return) > span:nth-of-type(n+6) > span:first-child{justify-content:center !important} .page-usecase-w9 main .arch-connect:not(.arch-return) > span.arch-bus:nth-of-type(1){left:15.1%;right:15.1% !important;top:auto !important;bottom:34px !important;width:auto !important;height:1.5px !important} .page-usecase-w9 main .arch-connect:not(.arch-return) > span.arch-bus:nth-of-type(2){left:15.1%;right:auto !important;top:auto !important;bottom:34px !important;transform:translate(-50%,50%) !important} .page-usecase-w9 main .arch-connect:not(.arch-return) > span.arch-bus:nth-of-type(3){left:50%;right:auto !important;top:auto !important;bottom:34px !important;transform:translate(-50%,50%) !important} .page-usecase-w9 main .arch-connect:not(.arch-return) > span.arch-bus:nth-of-type(4){left:84.9%;right:auto !important;bottom:34px !important;transform:translate(-50%,50%) !important} .page-usecase-w9 main .arch-connect:not(.arch-return) > span.arch-bus:nth-of-type(5){left:50%;right:auto !important;top:auto !important;bottom:0 !important;transform:translateX(-50%) rotate(90deg) !important} .page-usecase-w9 main .arch-return{flex-direction:column !important;align-items:center} .page-usecase-w9 main .arch-return > span{flex:none !important;text-align:center !important} .page-usecase-w9 main .arch-return > span:last-child{width:34px !important;transform:rotate(90deg)} .page-usecase-w9 main .ev-grid{grid-template-columns:minmax(0,1fr) !important;gap:26px !important;justify-items:center;padding-bottom:0 !important;width:100% !important;transform:none !important} .page-usecase-w9 main .ev-grid > div{justify-self:center !important} .page-usecase-w9 main .ev-loop{position:static !important;margin-top:2px} .page-usecase-w9 main .ev-grid > div:nth-of-type(1){display:none !important} .page-usecase-w9 main .ev-wash{left:-24px !important;right:auto !important;width:min(360px,100%) !important;background:radial-gradient(58% 62% at 34% 40%,rgba(0,171,82,.055),rgba(0,171,82,0) 72%) !important} .page-usecase-w9 main .ev-halo{left:-10% !important;right:-10% !important} .page-usecase-w9 main .ev-grid > div, .page-usecase-w9 main .ev-grid > span{grid-column:auto !important;grid-row:auto !important} .page-usecase-w9 main .ev-grid > span.ev-conn{display:flex !important;justify-content:center !important;padding:2px 0 !important;width:100% !important} .page-usecase-w9 main .ev-grid > span.ev-conn svg{transform:rotate(90deg)} .page-usecase-w9 main .ev-grid > span.ev-conn-label{display:flex !important;align-items:center;justify-content:center} .page-usecase-w9 main .ev-conn-label > span:last-child{display:none !important} .page-usecase-w9 main .ev-conn-label > span:first-child{position:static !important;margin:14px 0 0 !important} } /* ---------- W-9 diagrams — MOBILE LABEL READABILITY: the shared uppercase utility labels ("Before Filing Begins", "Your payee system", "Real-time", "Bulk", "API", "Zenwork", "Validation result", "Returned to the same payee records") render at a 9.5px desktop utility size, which is difficult to read on 320–430px phones. Bumped to the same mobile readability floor used when finalizing Business Verification; decorative/ nonessential microcopy elsewhere is left untouched. ---------- */ @media (max-width:767px){ .page-usecase-w9 main .arch-label{font-size:10.5px!important;} }