/* Scoped styles from zenwork-1099-use-case-vendor-aligned (1).html. */

.page-usecase-1099 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 */
  --footer-divider:rgba(15,24,34,.16); /* dedicated light-footer divider — clearly visible, still secondary */
  --line-2:#DEE5E0;
  --muted:#576560;
  --muted-2:#8A968F;

  /* On the one dark section */
  --on-dark:#EAF3ED;
  --on-dark-muted:#9DB6A7;
  --on-dark-line:rgba(255,255,255,0.13);

  /* Product tonal scales — each sub-product's own brand palette, 025→900.
     These are NOT decoration; they build the actual UI of each product's
     artifact in the Platform section and the Integrations flow. The Zenwork
     parent brand (green/lime/yellow above) remains the page's foundation —
     these only appear inside a specific product's own experience. */
  --compliancely-025:#F7FEFF; --compliancely-050:#EDFAFD; --compliancely-100:#E4F7FC;
  --compliancely-200:#C8EEF8; --compliancely-300:#4CC9E9; --compliancely-400:#44B5D2;
  --compliancely-500:#3DA1BA; --compliancely-600:#3997AF; --compliancely-700:#2E798C;
  --compliancely-800:#225A69; --compliancely-900:#1B4652;

  --payments-025:#FFFCF2; --payments-050:#FFF6D9; --payments-100:#FFE9A8;
  --payments-200:#FFD66A; --payments-300:#FDB600; --payments-400:#E6A400;
  --payments-500:#CC9100; --payments-600:#B37E00; --payments-700:#8F6400;
  --payments-800:#6B4A00; --payments-900:#473100;

  --tax1099-025:#F5F8FE; --tax1099-050:#E6EDF8; --tax1099-100:#D9E3F5;
  --tax1099-200:#B0C6EA; --tax1099-300:#0047BB; --tax1099-400:#0040A8;
  --tax1099-500:#003996; --tax1099-600:#00358C; --tax1099-700:#002B70;
  --tax1099-800:#002054; --tax1099-900:#00122E;

  --serif:'Rowan',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --maxw:clamp(1200px, 90vw, 1600px);
  --maxw-wide:1320px;
  --edge:24px;   /* single source of truth for the page's horizontal inset — the
                    floating nav pill uses this exact value, so resting content
                    and the scrolled pill always line up, at every viewport width */
  --gap:clamp(80px,9vw,132px);         /* major-section top/bottom padding — the shared Use Case rhythm token and global source of truth for generic .section vertical rhythm at every breakpoint, no tablet/mobile-specific override. Component-level responsive behavior (hero, diagrams, visual stages, stories, testimonial, CTA, footer) is a separate concern and keeps its own breakpoint-aware rules elsewhere in this file. */
  --head-gap:clamp(44px,4vw,56px);   /* heading block -> main visual */
  --story-gap:clamp(44px,4.2vw,64px);  /* main visual -> supporting stories */
  --story-pad:34px;                    /* story-row divider -> story copy */
  --story-col-gap:56px;                /* gap between supporting-story columns */
  --visual-stage-pad:clamp(28px,2.5vw,36px); /* single shared outer padding for every narrative visual stage — do not override per-section */
  --divider-soft:rgba(15,24,34,.07);   /* quiet structural dividers — felt, not seen */

  --r-lg:18px;
  --r-md:12px;
  --r-sm:8px;

  /* ---- Mobile rhythm system (<=767px) — one explicit scale so every
     narrative section, stage and story block on a phone shares the same
     spacing grammar instead of each section inventing its own. ---- */
  --mobile-edge:24px;
  --mobile-head-to-visual:32px;
  --mobile-visual-to-stories:32px;
  --mobile-story-gap:24px;
  --mobile-stage-pad:14px;
  --mobile-radius-stage:18px;

  --shadow-sm:0 1px 2px rgba(15,24,34,0.04);
  --shadow:0 1px 3px rgba(15,24,34,0.05), 0 18px 40px -22px rgba(15,24,34,0.16);
  --shadow-lift:0 2px 6px rgba(15,24,34,0.06), 0 30px 70px -28px rgba(15,24,34,0.22);
  --ease:cubic-bezier(0.22,0.61,0.36,1);
}

.page-usecase-1099 main *,.page-usecase-1099 main *::before,.page-usecase-1099 main *::after{box-sizing:border-box;}
.page-usecase-1099 main{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
.page-usecase-1099 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-1099 main img,.page-usecase-1099 main svg{max-width:100%;display:block;}
.page-usecase-1099 main a{color:inherit;text-decoration:none;}
.page-usecase-1099 main h1,.page-usecase-1099 main h2,.page-usecase-1099 main h3,.page-usecase-1099 main h4{margin:0;font-family:var(--serif);font-weight:400;}
.page-usecase-1099 main p{margin:0;}
.page-usecase-1099 main blockquote{margin:0;padding:0;}
.page-usecase-1099 main ul{margin:0;padding:0;list-style:none;}
.page-usecase-1099 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-1099 main button{font-family:inherit;cursor:pointer;}
.page-usecase-1099 main :focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px;}
.page-usecase-1099 main button:focus-visible{outline-offset:2px;}
.page-usecase-1099 main a:focus-visible{border-radius:6px;}
.page-usecase-1099 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-1099 main .skip-link:focus{top:12px;}
@media (prefers-reduced-motion:reduce){.page-usecase-1099 main{scroll-behavior:auto;}.page-usecase-1099 main *{transition-duration:0.01ms!important;animation-duration:0.01ms!important;}}

/* Primitives */
.page-usecase-1099 main .wrap{width:min(calc(100% - (var(--edge) * 2)), var(--maxw));margin-inline:auto;}
.page-usecase-1099 main .wrap--wide{max-width:var(--maxw-wide);}
@media (max-width:640px){.page-usecase-1099 main{--edge:20px;}}
.page-usecase-1099 main .section{padding:var(--gap) 0;scroll-margin-top:130px;}
.page-usecase-1099 main .section + .section:not(.alt){border-top:1px solid var(--line);}
/* The narrative sections (High-Volume, Build Control, IRIS Filing,
   End-to-End, Enterprise Workflows) use the Light-A/Light-B tonal
   system for section separation, not a hairline — but the generic
   adjacent-section rule above was still drawing a 1px gray line at
   the top of Build Control, IRIS Filing and End-to-End (confirmed via
   computed style: 1px solid rgb(234,238,235) on each). Suppress it
   there specifically; unrelated section adjacencies keep the hairline. */
.page-usecase-1099 main .section.m-light-a,.page-usecase-1099 main .section.m-light-b{border-top:0!important;}
.page-usecase-1099 main .alt{background:var(--paper-2);}
.page-usecase-1099 main .reveal{opacity:0;transform:translateY(20px);transition:opacity 850ms var(--ease),transform 850ms var(--ease);}
.page-usecase-1099 main .reveal.in{opacity:1;transform:none;}
.page-usecase-1099 main .reveal[data-d="1"]{transition-delay:.08s;}
.page-usecase-1099 main .reveal[data-d="2"]{transition-delay:.16s;}
.page-usecase-1099 main .reveal[data-d="3"]{transition-delay:.24s;}

/* Type scale — big, editorial */
.page-usecase-1099 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-1099 main .brand-mark{display:inline-flex;align-items:center;margin-right:9px;vertical-align:-3px;}
.page-usecase-1099 main .brand-mark img{display:block;height:16.5px;width:auto;}
.page-usecase-1099 main .display{
  font-family:var(--serif);
  font-size:clamp(64px,8.6vw,124px);line-height:1.06;letter-spacing:-0.025em;
}
.page-usecase-1099 main .display .it{font-style:italic;}
.page-usecase-1099 main .h2{font-family:var(--serif);font-size:var(--type-h2);line-height:1.08;letter-spacing:-0.018em;}
.page-usecase-1099 main .h3{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);line-height:1.12;letter-spacing:-0.012em;}
.page-usecase-1099 main .lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--muted);}
.page-usecase-1099 main .measure{max-width:56ch;}

/* Buttons — green reserved for primary action only */
.page-usecase-1099 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;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;
}
.page-usecase-1099 main .btn svg{width:16px;height:16px;transition:transform 260ms var(--ease);}
.page-usecase-1099 main .btn:hover svg{transform:translateX(3px);}
.page-usecase-1099 main .btn--primary,.page-usecase-1099 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-1099 main .btn--primary:hover,.page-usecase-1099 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-1099 main .btn--primary:active,.page-usecase-1099 main .btn--yellow:active{transform:translateY(0);box-shadow:0 6px 16px -12px rgba(36,31,0,.26);}
.page-usecase-1099 main .btn:focus-visible{outline-offset:3px;}
/* secondary — light background context: transparent, dark text, subtle neutral/green border */
.page-usecase-1099 main .btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2);}
.page-usecase-1099 main .btn--ghost:hover{background:rgba(0,171,82,.06);border-color:rgba(0,129,74,.35);}
/* secondary — dark background context: transparent, light text, subtle light border */
.page-usecase-1099 main .btn--ghost-dark{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.32);}
.page-usecase-1099 main .btn--ghost-dark:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55);}
.page-usecase-1099 main .btn--lg{height:58px;padding:0 34px;font-size:16.5px;}
.page-usecase-1099 main .textlink{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;color:var(--green-ink);}
.page-usecase-1099 main .textlink svg{width:15px;height:15px;transition:transform 240ms var(--ease);}
.page-usecase-1099 main .textlink:hover svg{transform:translateX(4px);}
.page-usecase-1099 main .textlink--ink{color:var(--ink);}

/* section heading block */
.page-usecase-1099 main .shead{max-width:52ch;margin-bottom:clamp(48px,6vw,76px);}
.page-usecase-1099 main .shead .h2{margin-bottom:0;}
.page-usecase-1099 main .shead p{margin-top:22px;font-size:19px;line-height:1.55;color:var(--muted);max-width:50ch;}
.page-usecase-1099 main .shead--center{margin-left:auto;margin-right:auto;text-align:center;}
.page-usecase-1099 main .shead--center p{margin-left:auto;margin-right:auto;}

.page-usecase-1099 main .util{background:var(--ink);color:var(--on-dark-muted);font-size:13px;}
.page-usecase-1099 main .util .wrap{display:flex;justify-content:flex-end;align-items:center;gap:20px;height:38px;}
.page-usecase-1099 main .util a:hover{color:#fff;}
.page-usecase-1099 main .util .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.4;}

.page-usecase-1099 main .nav{position:sticky;top:0;z-index:100;transition:padding 420ms var(--ease);}
.page-usecase-1099 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-1099 main .nav__utility .wrap{display:flex;align-items:center;height:52px;gap:20px;transition:height 420ms var(--ease),padding 420ms var(--ease);}
.page-usecase-1099 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-1099 main .nav__main.has-open,
.page-usecase-1099 main .nav__main:has(.navitem[data-open="true"]){overflow:visible;}
.page-usecase-1099 main .nav__main .wrap{display:flex;align-items:center;height:60px;gap:36px;position:relative;}
.page-usecase-1099 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-1099 main .brand__lockup{height:26px;width:auto;object-fit:contain;display:block;transition:height 380ms var(--ease);}
.page-usecase-1099 main .brand__mark{width:28px;height:28px;flex:none;object-fit:contain;display:block;}

.page-usecase-1099 main .navlinks{display:flex;align-items:center;gap:4px;margin-left:auto;}
.page-usecase-1099 main .navitem{position:relative;}
.page-usecase-1099 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-1099 main .navlink:hover{opacity:1;}
.page-usecase-1099 main .navlink .chev{width:11px;height:11px;color:var(--muted-2);transition:transform 240ms var(--ease),color 240ms var(--ease);}
.page-usecase-1099 main .navitem[data-open="true"] .navlink{opacity:1;}
.page-usecase-1099 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-1099 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-1099 main .nav.scrolled .navpanel{top:64px;}
.page-usecase-1099 main .navpanel__inner{}
.page-usecase-1099 main .navpanel__items{display:flex;flex-wrap:wrap;gap:8px 28px;}
.page-usecase-1099 main .navpanel__head{display:flex;align-items:center;gap:9px;padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line);}
.page-usecase-1099 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-1099 main .navpanel__head-label{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);}
.page-usecase-1099 main .navpanel__item{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;transition:background 160ms;box-sizing:border-box;}
.page-usecase-1099 main .navpanel__item--c3{flex:0 0 calc(33.333% - 19px);}
.page-usecase-1099 main .navpanel__item--c4{flex:0 0 calc(25% - 21px);}
.page-usecase-1099 main .navpanel__item--c5{flex:0 0 calc(20% - 23px);}
.page-usecase-1099 main .navpanel__item:hover{background:var(--g-050);}
.page-usecase-1099 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-1099 main .navpanel__item:hover .navpanel__item-ic{color:var(--green-ink);border-color:var(--g-200);}
.page-usecase-1099 main .navpanel__item-ic svg{width:19px;height:19px;}
.page-usecase-1099 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-1099 main .navpanel__item-body span{display:block;font-size:12.5px;color:var(--muted-2);font-weight:400;line-height:1.4;}
.page-usecase-1099 main .navitem[data-open="true"] .navpanel{opacity:1;transform:none;pointer-events:auto;visibility:visible;}
.page-usecase-1099 main .navpanel--wide{min-width:560px;grid-template-columns:1fr 1fr;display:grid;gap:6px 26px;}
.page-usecase-1099 main .navpanel--extra{min-width:820px;grid-template-columns:1fr 1fr 1fr;display:grid;gap:6px 24px;}
.page-usecase-1099 main .navpanel--products{min-width:640px;padding:18px;}
.page-usecase-1099 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-1099 main .navpanel__primary{display:block;padding:12px 12px;border-radius:10px;transition:background 160ms;}
.page-usecase-1099 main .navpanel__primary:hover{background:var(--paper-2);}
.page-usecase-1099 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-1099 main .navpanel__primary small{display:block;font-size:12px;color:var(--muted-2);font-weight:400;}
.page-usecase-1099 main .navpanel__others{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px;}
.page-usecase-1099 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-1099 main .navpanel__group{padding:6px 4px;}
.page-usecase-1099 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-1099 main .navpanel a:not(.navpanel__item):hover{background:var(--paper-2);opacity:1;}
.page-usecase-1099 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-1099 main .navlinks__mobileauth{display:none;}
.page-usecase-1099 main .navlinks__primary{display:contents;}
.page-usecase-1099 main .chev--static{display:none;}
.page-usecase-1099 main .foot__contact-chev{display:none;}
.page-usecase-1099 main .nav__right{margin-left:auto;display:flex;align-items:center;gap:6px;}
.page-usecase-1099 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-1099 main .nav__login:hover{background:var(--paper-2);opacity:1;}
.page-usecase-1099 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-1099 main .nav__signup:hover{border-color:var(--muted-2);background:var(--paper-2);}
.page-usecase-1099 main .navtoggle{display:none;}
.page-usecase-1099 main .navtoggle__icon{position:relative;width:20px;height:14px;flex:none;}
.page-usecase-1099 main .navtoggle__bar{position:absolute;left:0;top:50%;height:2px;border-radius:1px;background:var(--ink);transition:transform 220ms var(--ease);}
.page-usecase-1099 main .navtoggle__bar--1{width:20px;transform:translateY(-6px);}
.page-usecase-1099 main .navtoggle__bar--2{width:13px;transform:translateY(6px);}
.page-usecase-1099 main .navtoggle[aria-expanded="true"] .navtoggle__bar--1{transform:translateY(0) rotate(45deg);}
.page-usecase-1099 main .navtoggle[aria-expanded="true"] .navtoggle__bar--2{transform:translateY(0) rotate(-45deg);}
.page-usecase-1099 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-1099 main .nav.scrolled{transition:opacity 260ms var(--ease);}
@media (min-width:961px){
  .page-usecase-1099 main .nav.scrolled{opacity:0;pointer-events:none;}
  .page-usecase-1099 main .nav.scrolled .nav__main{pointer-events:none;}
}

.page-usecase-1099 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-1099 main .nav-float{display:block;} }
.page-usecase-1099 main .nav-float.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.page-usecase-1099 main .nav-float .wrap{display:flex;align-items:center;height:56px;padding-left:28px;padding-right:14px;gap:20px;}
.page-usecase-1099 main .nav-float .btn{height:38px;padding:0 20px;font-size:14.5px;}
.page-usecase-1099 main .nav-float .brand__lockup{height:24px;}

.page-usecase-1099 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-1099 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%;
}
.page-usecase-1099 main .close .wrap{position:relative;z-index:1;}
.page-usecase-1099 main .close .h2{max-width:16ch;margin:0 auto 22px;color:#fff;}
.page-usecase-1099 main .close p{color:rgba(255,255,255,.72);font-size:19px;max-width:46ch;margin:0 auto 36px;}
.page-usecase-1099 main .close .btn--primary,.page-usecase-1099 main .m-t-cta.btn--yellow{box-shadow:0 14px 30px -14px rgba(0,0,0,.45);}
.page-usecase-1099 main .close .btn--primary:hover,.page-usecase-1099 main .m-t-cta.btn--yellow:hover{box-shadow:0 18px 34px -14px rgba(0,0,0,.5);}
.page-usecase-1099 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-1099 main .closefoot{position:relative;overflow:hidden;background:#00351C;}
.page-usecase-1099 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-1099 main .closefoot .close,.page-usecase-1099 main .closefoot .foot{background:transparent;}

/* ============================================================
   FOOTER
   ============================================================ */
.page-usecase-1099 main .foot{color:var(--on-dark-muted);padding:35px 0 25px;position:relative;z-index:1;}

/* ---------- FOOTER — LIGHT SHARED-SYSTEM VARIANT (prototype for this page;
   candidate for propagation to other Zenwork pages once approved). The
   closing CTA above keeps its immersive dark canvas; this gives the
   footer its own opaque light surface so it reads as utility/navigation
   rather than a continuation of the conversion moment. ---------- */
.page-usecase-1099 main .foot-light{background:linear-gradient(180deg,#F3F7F4 0%,#EAF2ED 100%);color:var(--muted);border-top:1px solid rgba(0,129,74,.12);}
.page-usecase-1099 main .closefoot .foot.foot-light{background:linear-gradient(180deg,#F3F7F4 0%,#EAF2ED 100%);border-top:1px solid rgba(0,129,74,.12);}
.page-usecase-1099 main .foot-light .foot__top{border-bottom:1px solid var(--footer-divider);}
.page-usecase-1099 main .foot-light .foot__address{color:var(--ink);opacity:.85;}
.page-usecase-1099 main .foot-light .foot__address svg{color:#00814A;}
.page-usecase-1099 main .foot-light .foot__company{color:var(--ink);}
.page-usecase-1099 main .foot-light .foot__hours{color:var(--muted);}
.page-usecase-1099 main .foot-light .foot__col h5{color:#00713F;font-weight:500;}
.page-usecase-1099 main .foot-light .foot__col a{color:#33513F;opacity:.85;}
.page-usecase-1099 main .foot-light .foot__col a:hover{color:#00814A;opacity:1;}
.page-usecase-1099 main .foot-light .foot__social a{background:rgba(0,129,74,.08);color:#00814A;border:1px solid rgba(0,129,74,.2);}
.page-usecase-1099 main .foot-light .foot__social a:hover{background:rgba(0,129,74,.16);border-color:rgba(0,129,74,.36);color:#00713F;transform:translateY(-2px);}
.page-usecase-1099 main .foot-light .foot__legalrow{border-bottom:1px solid var(--footer-divider);}
.page-usecase-1099 main .foot-light .foot__legalrow a{color:#33513F;opacity:.85;}
.page-usecase-1099 main .foot-light .foot__legalrow a:hover{color:#00814A;opacity:1;}
.page-usecase-1099 main .foot-light .foot__legalrow .sep{color:var(--muted-2);opacity:1;}
.page-usecase-1099 main .foot-light .foot__bottom{color:var(--muted-2);}
.page-usecase-1099 main .foot__top{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:28px;padding-bottom:32px;border-bottom:1px solid var(--on-dark-line);}
.page-usecase-1099 main .foot__col--nested{display:flex;flex-direction:column;gap:23px;}
.page-usecase-1099 main .foot__brand{display:flex;align-items:center;margin-bottom:22px;}
.page-usecase-1099 main .foot__brand img{height:46px;width:auto;object-fit:contain;display:block;}
.page-usecase-1099 main .foot__company{font-family:var(--serif);font-size:19px;color:var(--on-dark);margin-bottom:14px;}
.page-usecase-1099 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;}
.page-usecase-1099 main .foot__address svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--lime);}
.page-usecase-1099 main .foot__hours{font-size:14px;color:var(--on-dark-muted);margin:12px 0 22px;}
.page-usecase-1099 main .foot__social{display:flex;gap:10px;align-items:center;}
.page-usecase-1099 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-1099 main .foot__social a:hover{background:var(--lime);color:var(--green-deep);transform:translateY(-2px);}
.page-usecase-1099 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-1099 main .foot__col a{display:block;font-size:14.5px;color:var(--on-dark);opacity:.82;padding:5px 0;transition:opacity 160ms;}
.page-usecase-1099 main .foot__col a:hover{opacity:1;}
.page-usecase-1099 main .foot__legalrow{display:inline-flex;width:100%;flex-wrap:wrap;align-items:center;gap:10px;padding-top:19px;padding-bottom:11px;font-size:13.5px;border-bottom:1px solid var(--on-dark-line);box-sizing:border-box;}
.page-usecase-1099 main .foot__legalrow a{color:var(--on-dark);opacity:.82;transition:opacity 160ms;}
.page-usecase-1099 main .foot__legalrow a:hover{opacity:1;}
.page-usecase-1099 main .foot__legalrow .sep{color:var(--on-dark-muted);opacity:.5;}
.page-usecase-1099 main .foot__bottom{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;padding-top:16px;font-size:13px;}
.page-usecase-1099 main .foot__compliance{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.page-usecase-1099 main .foot__compliance img{height:44px;width:auto;object-fit:contain;display:block;border-radius:8px;}

/* ============================================================
   MOBILE NAVIGATION (<=960px, real phone rules <=767px) — one
   authoritative fixed panel. The resting header shows only the
   logo + a two-stroke hamburger (no text label, no boxed button);
   Log In / Sign Up / Get in Touch move inside the opened panel.
   #navlinks is always present in the DOM at this width (never
   display:none) so opacity/transform can transition it open —
   the .nav-open class (set by JS) only flips the visible state.
   ============================================================ */
@media (max-width:960px){
  .page-usecase-1099 main .navtoggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:0;background:none;border-radius:0;padding:0;}
  .page-usecase-1099 main .nav__right .btn,.page-usecase-1099 main .nav__right .nav__login,.page-usecase-1099 main .nav__right .nav__signup{display:none;}
  .page-usecase-1099 main .nav__main{border-bottom:0;background:transparent;}
  .page-usecase-1099 main .nav__main .wrap{height:auto;min-height:0;padding-top:0;padding-bottom:0;}

  /* Resting header row target: ~60-64px. */
  .page-usecase-1099 main .nav__utility .wrap{height:64px;}

  /* The panel: fixed below the header, filling the full remaining
     viewport (top:64px to bottom:0) as one complete opaque navigation
     environment — not a floating card stopping partway down. Scrolls
     independently when an accordion expansion genuinely makes it
     tall. Body scroll is locked by JS while open. Always laid out
     (display:flex) so opacity/transform can animate it — visibility+
     pointer-events keep it inert and unreachable while closed.
     Solid, unambiguously opaque surface (near-white, a hint of mist
     only right at the very bottom) — full-height and edge-to-edge, so
     no shadow or rounded corners are needed to read as "on top": there
     is no exposed page beneath it to separate from. */
  .page-usecase-1099 main .navlinks{
    display:flex;flex-direction:column;align-items:stretch;
    position:fixed;top:64px;left:0;right:0;bottom:0;
    overflow-y:auto;
    background:linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 82%, var(--mist) 100%);
    padding:8px var(--mobile-edge) 22px;margin:0;
    z-index:120;
    opacity:0;transform:translateY(-6px);visibility:hidden;pointer-events:none;
    transition:opacity 210ms var(--ease),transform 210ms var(--ease),visibility 210ms;
  }
  .page-usecase-1099 main .navlinks.nav-open{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto;}

  /* Top-level rows: Products (direct link) + Solutions/By Industry/
     Resources (disclosures) share one hierarchy — confident weight,
     56-58px tap rows, flush against each other (no added gap) so the
     group reads as one deliberate block, not a dispersed list. */
  .page-usecase-1099 main .navlinks__primary{display:flex;flex-direction:column;gap:0;margin:0;}
  .page-usecase-1099 main .navlinks__primary>a.navlink,
  .page-usecase-1099 main .navitem>.navlink{
    width:100%;min-height:58px;display:flex;align-items:center;justify-content:space-between;
    font-family:'Hanken Grotesk',sans-serif;font-size:16.5px;font-weight:600;letter-spacing:-0.006em;color:var(--ink);
    padding:0 10px;box-sizing:border-box;
  }
  /* Direct link gets a static right-facing chevron (points to a
     destination); disclosures keep their down chevron that rotates
     open — the two must never share one behavior. Both align to the
     same right edge. */
  .page-usecase-1099 main .chev--static{display:inline-flex;width:11px;height:11px;color:var(--muted-2);transform:rotate(-90deg);flex:none;}

  .page-usecase-1099 main .navlinks__mobileauth{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);}
  .page-usecase-1099 main .navlinks__authrow{display:flex;gap:10px;}
  .page-usecase-1099 main .navlinks__authrow .nav__login,.page-usecase-1099 main .navlinks__authrow .nav__signup{flex:1 1 0;justify-content:center;border:1px solid var(--line-2);min-height:46px;}
  .page-usecase-1099 main .navlinks__mobileauth .btn{width:100%;justify-content:center;min-height:50px;}

  /* Disclosure rows (Solutions / By Industry / Resources) — real
     accordion rows, not a floating dropdown; no divider between
     top-level rows, spacing and weight carry the hierarchy instead.
     Smooth max-height/opacity reveal (not abrupt display:none/block),
     same restrained 200ms language as the footer accordion.
     CLOSED STATE MUST BE ZERO HEIGHT: padding lived on the base
     .navpanel rule alongside max-height:0, so a "closed" panel still
     rendered ~20px tall (confirmed via bounding box: #np-solutions
     measured height:20px, exactly padding-top 2px + padding-bottom
     18px) even though max-height and overflow:hidden should have
     clipped it. Padding now lives on the OPEN state only — closed
     panels have padding:0 and genuinely occupy no space. */
  .page-usecase-1099 main .navpanel{
    position:static;min-width:0;width:100%;box-sizing:border-box;
    box-shadow:none;border:0;border-radius:0;margin:0;
    max-height:0;padding-top:0;padding-bottom:0;
    opacity:0;overflow:hidden;pointer-events:none;
    transform:none;visibility:visible;
    transition:max-height 200ms var(--ease),opacity 200ms var(--ease),padding-top 200ms var(--ease),padding-bottom 200ms var(--ease);
  }
  .page-usecase-1099 main .navitem[data-open="true"] .navpanel{
    max-height:600px;padding-top:6px;padding-bottom:16px;
    opacity:1;pointer-events:auto;
  }
  .page-usecase-1099 main .navpanel__items{display:flex;flex-direction:column;gap:4px;}
  .page-usecase-1099 main .navpanel__item{width:100%;padding:12px 8px;}
  .page-usecase-1099 main .navpanel__head{padding-bottom:10px;margin-bottom:8px;}
  .page-usecase-1099 main .navpanel--wide,.page-usecase-1099 main .navpanel--extra{grid-template-columns:1fr;gap:0;}
  .page-usecase-1099 main .navpanel--products{min-width:0;padding:6px 4px 4px;}
  .page-usecase-1099 main .navpanel__primary-row{grid-template-columns:1fr;}
  .page-usecase-1099 main .navpanel__others{grid-template-columns:1fr;}

  /* Expanded mobile menus begin directly with their actual links —
     never repeat a helper heading inside the panel. Applies uniformly
     to Solutions, By Industry and Resources now (Solutions' "USE
     CASES" was previously kept as a "real subgroup" label, but that
     created inconsistent hierarchy against the other two, which don't
     show one — removed here for consistency). Desktop dropdown
     headings are untouched; this is mobile-scoped only. */
  .page-usecase-1099 main #np-solutions .navpanel__head,
  .page-usecase-1099 main #np-industries .navpanel__head,
  .page-usecase-1099 main #np-resources .navpanel__head{display:none;}
  .page-usecase-1099 main #np-solutions .navpanel__items,
  .page-usecase-1099 main #np-industries .navpanel__items,
  .page-usecase-1099 main #np-resources .navpanel__items{margin-top:6px;}
  /* By Industry's icon slots don't carry enough meaning at this size
     to earn the space — title + description carries the row alone. */
  .page-usecase-1099 main #np-industries .navpanel__item-ic{display:none;}

  /* An expanded parent gets a quiet pale-green active background so
     the open state itself is legible, not just its chevron. */
  .page-usecase-1099 main .navitem[data-open="true"]>.navlink{background:rgba(0,171,82,.06);border-radius:8px;}
}
.page-usecase-1099 main.nav-locked,.page-usecase-1099 main.nav-locked body{overflow:hidden;height:100%;}

/* Tablet footer (768–960, the sub-range of the tablet band that was
   already stacking to one column pre-refactor) — preserved verbatim,
   no disclosure behavior added here; that's mobile-only below. */
@media (min-width:768px) and (max-width:960px){
  .page-usecase-1099 main .foot__top{grid-template-columns:1fr;gap:32px;}
}

/* Footer disclosure trigger — inherits the existing .foot__col h5
   text styling (color/font/size/style) at every breakpoint via
   `inherit`, so desktop keeps its exact current look with zero
   duplicated rules; only mobile adds the interactive row layout. */
.page-usecase-1099 main .footdisc__trigger{
  font:inherit;font-family:inherit;font-style:inherit;font-weight:inherit;
  letter-spacing:inherit;text-transform:inherit;color:inherit;
  background:none;border:0;padding:0;margin:0;text-align:left;cursor:default;
  display:block;width:100%;
}
.page-usecase-1099 main .footdisc__chev{display:none;}
.page-usecase-1099 main .footdisc__panel{display:block;}

/* ============================================================
   MOBILE FOOTER — reusable Zenwork disclosure pattern (built to be
   propagated to other pages, not a 1099-only hack). Brand/contact
   block always visible; Products / Use Cases / Industries / About
   Us / Resources become accessible disclosures; Contact Us is a
   direct link at the same row hierarchy, not a group. This is
   functional navigation, not editorial content, so it uses Hanken
   Grotesk semibold (not the Rowan italic desktop heading style) —
   same type family and active-state language as the mobile nav
   sheet. Only TWO structural dividers on the whole footer: brand→nav,
   and nav→legal.
   ============================================================ */
@media (max-width:767px){
  .page-usecase-1099 main .foot__top{grid-template-columns:1fr;gap:0;padding-bottom:4px;}
  .page-usecase-1099 main .foot__col--brand{padding-bottom:18px;margin-bottom:4px;border-bottom:1px solid var(--footer-divider);}
  /* The desktop .foot__col--nested gap (23px, for the About Us /
     Resources / Contact Us group) has no mobile override otherwise,
     so that half of the accordion list reads with extra air the
     Products/Use Cases/Industries half doesn't have. Neutralize it —
     row height + the rows' own padding carry all the rhythm now. */
  .page-usecase-1099 main .foot__col--nested{gap:0!important;}
  .page-usecase-1099 main .footdisc__trigger{
    display:flex!important;align-items:center;justify-content:space-between;
    min-height:54px;padding:15px 10px;cursor:pointer;box-sizing:border-box;
    font-family:'Hanken Grotesk',sans-serif!important;font-style:normal!important;
    font-size:16.5px!important;font-weight:600!important;color:var(--ink)!important;letter-spacing:-0.006em;
  }
  .page-usecase-1099 main .footdisc__chev{display:block;width:13px;height:13px;flex:none;color:var(--muted-2);transition:transform 200ms var(--ease);}
  .page-usecase-1099 main .footdisc__trigger[aria-expanded="true"] .footdisc__chev{transform:rotate(180deg);}
  /* Expanded parent gets the same quiet pale-green active background
     as the mobile nav's open disclosures — one shared token. */
  .page-usecase-1099 main .footdisc__trigger[aria-expanded="true"]{background:rgba(0,171,82,.06);border-radius:8px;}
  .page-usecase-1099 main .footdisc__panel{max-height:0;overflow:hidden;opacity:0;transition:max-height 200ms var(--ease),opacity 200ms var(--ease);}
  .page-usecase-1099 main .footdisc__panel.is-open{max-height:640px;opacity:1;padding-top:2px;padding-bottom:8px;}
  .page-usecase-1099 main .footdisc__panel a{padding:8px 10px;display:block;}
  /* The <h5> wraps each trigger <button> and carries the browser's
     default UA-stylesheet margin (top AND bottom) — only zeroing
     margin-bottom left the default top margin in as invisible extra
     space between every row. Reset both explicitly. */
  .page-usecase-1099 main .foot__col h5{margin:0!important;}
  /* Contact Us is a direct link, not a disclosure group — one row,
     same Hanken Grotesk hierarchy as the accordion triggers, with a
     static right chevron (same language as the nav's Products row)
     instead of a second repeated "Contact Us" line. !important is
     needed here: .foot-light .foot__col a (3 classes) otherwise
     outranks this on specificity and repaints Contact Us in the
     desktop green/lighter link color instead of matching the other
     rows. */
  .page-usecase-1099 main .foot__col--contact{padding:0;}
  .page-usecase-1099 main .foot__col--contact h5{display:none;}
  .page-usecase-1099 main .foot__col--contact a{
    display:flex!important;align-items:center;justify-content:space-between;
    min-height:54px;padding:15px 10px;box-sizing:border-box;opacity:1!important;
    font-family:'Hanken Grotesk',sans-serif!important;font-style:normal!important;
    font-size:16.5px!important;font-weight:600!important;color:var(--ink)!important;letter-spacing:-0.006em;
  }
  .page-usecase-1099 main .foot__contact-chev{display:inline-flex;width:11px;height:11px;color:var(--muted-2);transform:rotate(-90deg);flex:none;}
  /* Exactly two structural dividers on the whole footer (brand→nav
     above, this one before legal/compliance). .foot__legalrow
     inherits a border-bottom from two different base rules
     (.foot-light .foot__legalrow and .foot__legalrow itself), which
     drew a second, unintended line between the legal links and the
     copyright/compliance row below — cancel it so only the top
     divider remains. */
  .page-usecase-1099 main .foot__legalrow{width:100%;font-size:13px;margin-top:8px;padding-top:16px!important;border-top:1px solid var(--footer-divider);border-bottom:0!important;}
  .page-usecase-1099 main .foot__bottom{flex-direction:column;align-items:flex-start;gap:14px;}
  .page-usecase-1099 main .foot__social a{min-width:44px;min-height:44px;}
}

/* ============================================================
   1099 PAGE — small fixes made during this refinement pass.
   The two rules below replace non-functional "style-hover"
   attributes left over from the design-tool export (that
   attribute isn't real CSS, so those hover states previously
   did nothing).
   ============================================================ */
.page-usecase-1099 main .btn-refile{border:0;cursor:pointer;background:#00AB52;color:#fff;font-family:inherit;font-size:15px;font-weight:700;padding:12px 24px;border-radius:32px;line-height:1;transition:background 160ms;}
.page-usecase-1099 main .btn-refile:hover{background:#008942;}
.page-usecase-1099 main .textlink-dark{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;margin-top:32px;padding:0 0 7px;border-bottom:1.5px solid rgba(172,212,0,.5);color:#fff;font-size:15.5px;font-weight:700;letter-spacing:.005em;text-decoration:none;transition:border-color 160ms,color 160ms;}
.page-usecase-1099 main .textlink-dark:hover{border-bottom-color:#00D563;color:#8FE9B7;}
.page-usecase-1099 main .textlink-dark svg{color:var(--lime);transition:color 160ms;}
.page-usecase-1099 main .textlink-dark:hover svg{color:#8FE9B7;}

/* ============================================================
   NARRATIVE VISUAL STAGE + SURFACE — one repeatable system for the
   four narrative sections plus the integrations diagram. A quiet,
   flat neutral "stage" groups and separates the product visual from
   the page background. The illustration itself sits on a plain white
   surface inside that stage — a real product panel, not a decorative
   gradient fill; any tonal shift lives on the stage only, never
   painted on the card. Base-level rule (not desktop-only), matching
   the shared Vendor Payments visual-stage system exactly — mobile
   only overrides the radius/padding tokens for its tighter footprint
   (see the mobile block further below).
   ============================================================ */
.page-usecase-1099 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;
}
/* Environmental variant: on a green/mist section (.m-light-b) the
   parent-brand green tint that opens the default stage gradient above
   sits too close in hue/luminance to the section background itself,
   so the stage boundary reads as bleeding into the section instead of
   as a deliberate surface. Same radius/padding/sizing/role — only the
   tonal treatment changes: predominantly neutral white on the left,
   easing to a restrained warm cream on the right, with only a
   microscopic residual green so brand continuity survives without
   merging into the mist behind it. */
.page-usecase-1099 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);
}
@media (min-width:1024px){
  .page-usecase-1099 main h1{font-size:clamp(48px,4.4vw,64px)!important;line-height:1.06!important;letter-spacing:-0.025em!important;}
  .page-usecase-1099 main .m-narrative-h2,.page-usecase-1099 main .h2{font-size:var(--type-h2)!important;line-height:1.08!important;letter-spacing:-0.018em!important;}
  .page-usecase-1099 main .m-narrative-h2{max-width:none!important;}
  .page-usecase-1099 main .m-head-intro{margin-bottom:44px!important;}
  .page-usecase-1099 main .m-head-nointro{margin-bottom:48px!important;}
  .page-usecase-1099 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-1099 main .lead{margin-top:18px!important;}
  .page-usecase-1099 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-1099 main .m-stories3>div{min-width:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;}
  .page-usecase-1099 main .m-stories3>div:nth-child(1){padding-left:0!important;padding-right:38px!important;}
  .page-usecase-1099 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-1099 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-1099 main .m-stories3>div>div{padding:0!important;border-left:0!important;}
  .page-usecase-1099 main .m-stories3 p{width:100%!important;max-width:none!important;text-wrap:pretty!important;font-size:16px!important;line-height:1.6!important;}
  .page-usecase-1099 main .m-stories3 h3{max-width:none!important;}
  .page-usecase-1099 main .h3{font-size:clamp(22px,1.7vw,25px)!important;line-height:1.14!important;}
  .page-usecase-1099 main .m-irisnative-h2{font-size:clamp(26px,2.2vw,30px)!important;line-height:1.1!important;}

  /* ---- TESTIMONIAL — desktop-only composition rebalance: intentional grouped
     spacing (headline+quote read as one group, then a clear beat before the
     metric rail, then a shorter beat before the CTA — no flex space-between),
     plus a shorter section overall (tighter padding + a slightly shorter
     portrait) now that the right column reads as one deliberate block
     rather than being centered in extra height. Scoped with :has() since
     this section has no dedicated class. ---- */
  .page-usecase-1099 main section:has(>.m-testimonial-grid){padding:clamp(48px,6.25vw,97px) 0!important;}
  /* Portrait column was a 27% share of the grid, so it widened with the
     viewport while the portrait's height stayed fixed — by 1600px the box
     had gone landscape (wider than tall), badly distorting a portrait-
     oriented headshot. A bounded column width keeps a proper portrait
     ratio at every desktop size, same fix already used at tablet. */
  .page-usecase-1099 main .m-testimonial-grid{grid-template-columns:clamp(290px,23vw,330px) minmax(0,1fr)!important;}
  .page-usecase-1099 main .m-tphoto{height:380px!important;}
  /* Less scrim, more face: the bottom gradient covered over half the
     portrait, crowding the headshot into a small top strip. Trimming it
     to just enough to seat the name/title legibly gives the face more
     visual room without losing legibility. */
  .page-usecase-1099 main .m-tphoto-gradient{height:40%!important;}
  .page-usecase-1099 main .m-tstory{gap:0!important;}
  .page-usecase-1099 main .m-t-quote{margin-top:22px!important;}
  .page-usecase-1099 main .m-testimonial-metrics{margin-top:30px!important;padding-top:22px!important;}
  .page-usecase-1099 main .m-t-cta{margin-top:32px!important;}

  /* ---- FOOTER — desktop-only density reduction: tightens the quiet utility
     footer's vertical rhythm (outer padding, the gap between the three
     stacked link groups in the About/Resources/Contact column, heading-to-
     link spacing, and the legal-row/bottom-row padding) so less dead space
     remains after the strong closing CTA. Per-link padding and line-height
     are untouched, and mobile/tablet keep their current, more generous
     spacing. ---- */
  .page-usecase-1099 main .foot{padding:24px 0 16px!important;}
  .page-usecase-1099 main .foot__top{padding-bottom:22px!important;}
  .page-usecase-1099 main .foot__col--nested{gap:14px!important;}
  .page-usecase-1099 main .foot__brand{margin-bottom:16px!important;}
  .page-usecase-1099 main .foot__company{margin-bottom:10px!important;}
  .page-usecase-1099 main .foot__hours{margin:10px 0 16px!important;}
  .page-usecase-1099 main .foot__col h5{margin-bottom:10px!important;}
  .page-usecase-1099 main .foot__legalrow{padding-top:13px!important;padding-bottom:7px!important;}
  .page-usecase-1099 main .foot__bottom{padding-top:11px!important;}
}
/* actual product-UI/illustration surfaces sit directly inside the
   stage above and use their own border/shadow (see .m-panel-split,
   .m-ledger-card and the IRIS master/detail card) — no secondary
   generic wrapper card. */

/* ============================================================
   LIGHT SECTION ENVIRONMENTS — two reusable quiet backgrounds
   for narrative/integration sections, alternated for separation.
   LIGHT A: predominantly white, restrained green tint.
   LIGHT B: paper/mist base, restrained green/lime tint.
   Quiet enough that the visual stage stays the primary separator.
   ============================================================ */
.page-usecase-1099 main .m-light-a{background:radial-gradient(62% 68% at 78% 6%, rgba(0,171,82,.075), transparent 66%),var(--paper);}
.page-usecase-1099 main .m-light-b{background:radial-gradient(52% 56% at 16% 92%, rgba(172,212,0,.04), transparent 60%),var(--mist);}

/* ============================================================
   RESPONSIVE — three tiers: mobile (<768), tablet (768–1023),
   desktop (1024+). Mobile and desktop are approved/locked and
   are reproduced verbatim by the rules below (only the pixel
   threshold moved from the old single 900px cut to 768/1024 —
   the rule bodies for <768 and 1024+ are unchanged, so mobile
   and desktop render exactly as before). 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. All
   desktop inline styles are left untouched; !important is used
   here, deliberately and only in this section, to override
   those inline styles without refactoring the desktop markup.
   ============================================================ */
@media (max-width:1023px){
  .page-usecase-1099 main,.page-usecase-1099 main{overflow-x:hidden;}
}

/* ---------- HERO — PHONE (<=767px). Reading order is already
   content-first via source order (eyebrow/H1/body/CTA, then the map
   visual, then the form tags nested inside it, then the logo rail
   section that follows) — no reordering needed, only sizing. Single
   authoritative rule for this tier (previously a broader <=1023px
   stacking rule also touched this range, but every one of its other
   properties was already being overridden here or by the tablet rule
   below — folded the one surviving declaration, grid-template-
   columns:1fr, in directly and removed the redundant rule). ---------- */
@media (max-width:767px){
  .page-usecase-1099 main .m-hero-grid{grid-template-columns:1fr!important;gap:var(--mobile-head-to-visual)!important;padding-top:clamp(40px,9vw,56px)!important;padding-bottom:8px!important;}
  .page-usecase-1099 main .hero-visual{max-width:400px!important;margin-inline:auto!important;}
  .page-usecase-1099 main .m-hero-grid .btn--primary{width:100%!important;justify-content:center!important;height:53px!important;}
  .page-usecase-1099 main .m-hero-grid h1{max-width:none!important;}
  .page-usecase-1099 main .m-hero-grid p{max-width:none!important;}
}

/* ---------- HERO MAP/PROOF — PHONE ONLY: recompose (not shrink) the
   proof values around the map. Kept anchored to the rings/map with a
   connector line + dot, same concept as desktop, but resized so the
   values and descriptors stay genuinely readable and never collide
   with the map, ring outlines, or viewport edge. ---------- */
@media (max-width:767px){
  .page-usecase-1099 main .m-hero-stats{position:absolute!important;inset:0!important;display:block!important;pointer-events:none!important;margin-top:0!important;}
  .page-usecase-1099 main .m-hero-stats>div{position:absolute!important;max-width:40%!important;}
  .page-usecase-1099 main .m-hero-stats>.m-hs-1{left:2%!important;right:auto!important;top:2%!important;bottom:auto!important;text-align:left!important;}
  .page-usecase-1099 main .m-hero-stats>.m-hs-2{left:auto!important;right:2%!important;top:2%!important;bottom:auto!important;text-align:right!important;}
  .page-usecase-1099 main .m-hero-stats>.m-hs-3{left:auto!important;right:0!important;top:auto!important;bottom:26%!important;text-align:right!important;max-width:34%!important;}
  .page-usecase-1099 main .m-hero-stats>.m-hs-2 span:is(.zwx-bc2b5aac),.page-usecase-1099 main .m-hero-stats>.m-hs-3 span:is(.zwx-bc2b5aac){margin-left:auto!important;}
  .page-usecase-1099 main .m-hero-stats>.m-hs-2 span:is(.zwx-d208ed9e),.page-usecase-1099 main .m-hero-stats>.m-hs-3 span:is(.zwx-d208ed9e){margin:6px 0 0 auto!important;}
  .page-usecase-1099 main .m-hero-stats span:is(.zwx-e1908fc6,.zwx-bc2b5aac){width:40px!important;margin-bottom:8px!important;}
  /* All three proof stats share one mobile scale — no primary/secondary split */
  .page-usecase-1099 main .m-hero-stats span:is(.zwx-93bd105a,.zwx-8a9107d0,.zwx-08b20069,.zwx-d45bfe71,.zwx-4e55aee4,.zwx-790dbf0e){font-size:23px!important;}
  .page-usecase-1099 main .m-hero-stats span:is(.zwx-6e430b66,.zwx-d208ed9e,.zwx-8fcee90c,.zwx-5dae7522,.zwx-74a235d7){font-size:12.5px!important;line-height:1.35!important;margin-top:6px!important;max-width:13ch!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-1099 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-1099 main .hero-visual{max-width:460px!important;justify-self:end!important;}
  .page-usecase-1099 main .m-hero-stats{margin-top:20px!important;gap:18px 14px!important;}
}

/* ---------- TABLET CONTAINER: shares the same --edge (24px, no
   tablet-specific widening) and generic .section rhythm (--gap, no
   tablet-specific override) as every other breakpoint, matching
   Vendor Payments. Only the component-level rules below are
   genuinely tablet-specific. ---------- */
@media (min-width:768px) and (max-width:1023px){
  .page-usecase-1099 main .m-narrative-h2{max-width:none!important;}
  .page-usecase-1099 main .lead{max-width:none!important;}
  .page-usecase-1099 main .close .h2{max-width:none!important;}
  .page-usecase-1099 main .close p{max-width:none!important;width:100%!important;}
}

/* ---------- MOBILE ONLY (<768) — sections that stay comfortable
   in their desktop composition throughout the whole tablet band,
   so they only need to flip to the mobile layout below 768 ---------- */
@media (max-width:767px){

  /* IRIS-NATIVE BRIDGE — proof transition stays left-aligned and
     dominant; no new eyebrow/label/card introduced. */
  .page-usecase-1099 main .m-irisnative-grid{grid-template-columns:1fr!important;gap:14px!important;padding:30px 0!important;}
  .page-usecase-1099 main .m-irisnative-copy{border-left:0!important;padding-left:0!important;font-size:15.5px!important;line-height:1.6!important;}
  .page-usecase-1099 main .m-irisnative-h2{text-align:left!important;}

  /* BUILD CONTROL — one continuous operational surface: readiness
     rows stacked above the Filing Season card (source order already
     correct), divider flips from left border to top border. */
  .page-usecase-1099 main .m-panel-split{grid-template-columns:1fr!important;}
  .page-usecase-1099 main .m-panel-filing{border-left:0!important;border-top:1px solid var(--line-2)!important;}

  /* Pre-Filing Readiness rows: label + status stay on one row down to
     390px (grid instead of the old forced stack) so the card doesn't
     grow unnecessarily tall; only very narrow phones stack. */
  .page-usecase-1099 main .m-readiness-row{grid-template-columns:minmax(0,1fr) auto!important;gap:12px!important;align-items:center!important;padding:14px 0!important;min-height:0!important;}

  /* Small text-overflow fix */
  .page-usecase-1099 main .m-continuity{white-space:normal!important;align-items:flex-start!important;}

  /* IRIS FILING — this mobile relationship was already correct: list
     on top, exception detail attached directly under the selected row,
     remaining rows continue after. Kept verbatim. */
  .page-usecase-1099 main .m-masterdetail{grid-template-columns:1fr!important;min-height:0!important;}
  .page-usecase-1099 main .m-iris-breadcrumb{display:none!important;}
  .page-usecase-1099 main .m-md-listwrap,.page-usecase-1099 main .m-md-rows{display:contents!important;}
  .page-usecase-1099 main .m-md-header{order:1!important;}
  .page-usecase-1099 main .m-md-row1{order:2!important;}
  .page-usecase-1099 main .m-md-row2{order:3!important;}
  .page-usecase-1099 main .m-md-detail{order:4!important;background:#FFFDF2!important;border-top:none!important;border-bottom:1px solid var(--warn-line)!important;border-left:3px solid var(--yellow)!important;padding:20px 20px 22px 24px!important;}
  .page-usecase-1099 main .m-md-row3{order:5!important;}
  .page-usecase-1099 main .btn-refile{min-height:44px!important;display:inline-flex!important;align-items:center!important;}

  /* ---- CUSTOMER PROOF (testimonial) — rebuilt, not just scaled down.
     Real 88-96px square portrait (never a 56px circle — a face that
     small stops reading as a person), identity row, then an equal
     3-column metrics rail (never the old 2+1 wrap), then the CTA. ---- */
  .page-usecase-1099 main .m-testimonial-grid{grid-template-columns:1fr!important;gap:22px!important;}
  .page-usecase-1099 main .m-tstory{display:contents!important;}
  .page-usecase-1099 main .m-t-h2{order:1!important;font-size:clamp(28px,7.5vw,34px)!important;}
  .page-usecase-1099 main .m-t-quote{order:2!important;font-size:18px!important;line-height:1.5!important;}
  .page-usecase-1099 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-1099 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-1099 main .m-tphoto-gradient{display:none!important;}
  .page-usecase-1099 main .m-tphoto-identity{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;gap:3px!important;}
  .page-usecase-1099 main .m-tphoto-rule{display:none!important;}
  .page-usecase-1099 main .m-testimonial-metrics{order:4!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;}
  .page-usecase-1099 main .m-testimonial-metrics>div{flex:none!important;padding:0 12px;}
  .page-usecase-1099 main .m-testimonial-metrics>div:first-child{padding-left:0;}
  .page-usecase-1099 main .m-testimonial-metrics>div:not(:first-child)::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:rgba(255,255,255,.16);}
  .page-usecase-1099 main .m-testimonial-metrics span:is(.zwx-790dbf0e){font-size:26px!important;}
  .page-usecase-1099 main .m-t-cta{order:5!important;justify-self:stretch!important;width:100%!important;justify-content:center!important;}

  /* Environmental lime accent: crop to a restrained edge sliver so it
     never competes with headline/quote/identity/metrics/CTA. */
  .page-usecase-1099 main section:has(>.m-testimonial-grid) > div:is(.zwx-67d0065e){width:14%!important;min-width:90px!important;max-width:130px!important;opacity:.7;}
}
@media (max-width:360px){
  .page-usecase-1099 main .m-readiness-row{grid-template-columns:1fr!important;gap:6px!important;align-items:flex-start!important;}
}

/* ---------- IRIS-NATIVE BRIDGE — DESKTOP ONLY (1024+): the 16ch cap on
   the heading was forcing a wrap the column never needed; keep the
   heading on one line and give it a touch more column width. Tablet
   and mobile are untouched — they keep the desktop inline values
   (tablet) or the mobile override above, exactly as before. ---------- */
@media (min-width:1024px){
  .page-usecase-1099 main .m-irisnative-grid{grid-template-columns:minmax(360px,42fr) minmax(0,58fr)!important;}
  .page-usecase-1099 main .m-irisnative-h2{max-width:none!important;white-space:nowrap!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-1099 main .m-stories3{grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:0!important;row-gap:0!important;}
  .page-usecase-1099 main .m-stories3>div{min-width:0!important;}
  .page-usecase-1099 main .m-stories3>div:nth-child(1){padding-left:0!important;padding-right:22px!important;border-left:0!important;}
  .page-usecase-1099 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-1099 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;}
}
@media (max-width:767px){
  .page-usecase-1099 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-1099 main .m-stories3>div{border-left:0!important;padding-left:0!important;padding-right:0!important;}
  .page-usecase-1099 main .m-stories3>div:not(:first-child){border-top:1px solid var(--line-2)!important;padding-top:24px!important;}
  .page-usecase-1099 main .m-stories3 h3{max-width:none!important;width:100%!important;}
  .page-usecase-1099 main .m-stories3 p{width:100%!important;max-width:none!important;text-wrap:pretty!important;}
}


/* ============================================================
   MOBILE SECTION RHYTHM + VISUAL STAGE — the same restrained
   green-to-warm tonal stage used on desktop, reduced in footprint
   rather than removed, so the SECTION BACKGROUND -> tonal stage ->
   white product surface hierarchy still reads on a phone. Generic
   .section vertical rhythm uses the shared --gap clamp uniformly at
   every breakpoint, same as Vendor Payments — no mobile-specific
   override for that primitive.
   ============================================================ */
@media (max-width:767px){
  .page-usecase-1099 main{--head-gap:var(--mobile-head-to-visual);}
  .page-usecase-1099 main .m-head-intro,.page-usecase-1099 main .m-head-nointro{margin-bottom:var(--mobile-head-to-visual)!important;}
  /* VISUAL STAGE — the shared gradient/border now lives on the base
     .m-visual-stage rule (see above), so mobile only needs to
     override the padding/radius tokens for its tighter footprint. */
  .page-usecase-1099 main .m-visual-stage{
    border-radius:var(--mobile-radius-stage)!important;
    padding:var(--mobile-stage-pad);
  }
  /* Explicit inner communication surface — reuses the exact desktop
     tokens (background:#FFFFFF, border rgba(15,24,34,.07), the same
     two-layer shadow recipe) so mobile matches desktop's own
     SECTION -> STAGE -> WHITE SURFACE -> content hierarchy instead of
     approximating it. Desktop's radius/padding scale with viewport
     (18px / clamp(24-30px)); mobile uses fixed, proportionally
     smaller values. Shared by all five narrative sections — Build
     Control, IRIS Filing and End-to-End already carry this class on
     their own white surface; High-Volume and Enterprise Workflows
     carry it on the diagram's outer wrapper. */
  .page-usecase-1099 main .m-visual-surface{
    background:#FFFFFF;
    border:1px solid rgba(15,24,34,.07);
    border-radius:14px!important;
    box-shadow:0 2px 5px rgba(15,24,34,.03),0 16px 34px -24px rgba(15,24,34,.16);
  }
  .page-usecase-1099 main .m-lifecycle-mobile.m-visual-surface,.page-usecase-1099 main .m-arch-mobile.m-visual-surface{padding:18px 16px 20px;}
}

/* ============================================================
   CLOSING CTA — PHONE. Same geometry as Vendor Payments: reduced
   top padding (no longer inheriting a 96px+ floor meant for
   desktop/tablet), natural full-width wrap, no artificial two-line
   heading target on mobile. The brand-artwork positioning below
   (.close::after) is this page's own dark-CTA illustration and is
   independent of the shared padding/type rules above it.
   ============================================================ */
@media (max-width:767px){
  .page-usecase-1099 main .close{padding:56px 0 60px!important;}
  .page-usecase-1099 main .close::after{
    background-size:auto 82%!important;
    background-position:right -58px bottom -70px!important;
    opacity:.85;
  }
  .page-usecase-1099 main .close .h2{max-width:none!important;width:100%!important;}
  .page-usecase-1099 main .close p{width:100%!important;max-width:none!important;font-size:15.5px!important;line-height:1.55!important;}
}

/* ---------- MAINTAIN END-TO-END — the label+status-pill pairs need
   real room; the horizontal ledger only reads comfortably right at
   the top of the tablet band, so keep the stacked layout through
   1023 and switch to the horizontal ledger at desktop (1024+). The
   ledger stays a normal box inside .m-visual-stage/.m-visual-surface
   at every width below 1024 — no page-edge bleed. ---------- */
@media (max-width:1023px){
  .page-usecase-1099 main .m-ledger-header{flex-direction:column!important;align-items:flex-start!important;gap:14px!important;}
  .page-usecase-1099 main .m-status3{grid-template-columns:1fr!important;gap:0!important;}
  .page-usecase-1099 main .m-status3>div{padding:14px 0!important;}
  .page-usecase-1099 main .m-status3>div:not(:first-child){border-top:1px solid var(--line)!important;}
  .page-usecase-1099 main .m-status-divider{display:none!important;}
}

/* ---------- MAINTAIN END-TO-END — TABLET ONLY: the mobile stack (header
   label above the pill, tight row padding) reads compressed at this
   width where there's room to breathe. Restore the header to a row and
   open up padding on the card and each status line; color semantics and
   the 1-column status list (still easiest to scan at this width) stay
   the same. ---------- */
@media (min-width:768px) and (max-width:1023px){
  .page-usecase-1099 main .m-ledger-card{padding-top:8px!important;padding-bottom:16px!important;}
  .page-usecase-1099 main .m-ledger-header{flex-direction:row!important;align-items:center!important;justify-content:space-between!important;padding:28px 0 26px!important;gap:20px!important;}
  .page-usecase-1099 main .m-status3>div{padding:22px 0!important;}
}

/* ---------- BUILD CONTROL — TABLET ONLY: give the filing-season card
   more internal room so the mini document preview doesn't feel squeezed
   against the pre-filing readiness column. ---------- */
@media (min-width:768px) and (max-width:1023px){
  .page-usecase-1099 main .m-panel-filing{padding:26px 28px 28px!important;}
  .page-usecase-1099 main .m-panel-filing .m-continuity{white-space:normal!important;}
}

/* ---------- IRIS FILING — TABLET ONLY: more generous detail-pane padding
   so the panel reads as a real product surface, not a shrunken desktop
   screenshot. ---------- */
@media (min-width:768px) and (max-width:1023px){
  .page-usecase-1099 main .m-masterdetail{min-height:340px!important;}
  .page-usecase-1099 main .m-md-detail{padding:26px 28px 28px!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-1099 main .m-testimonial-grid{grid-template-columns:minmax(0,270px) minmax(0,1fr)!important;gap:40px!important;}
  .page-usecase-1099 main .m-testimonial-metrics{gap:clamp(24px,3.2vw,40px)!important;}
}

/* ---------- HIGH-VOLUME + INTEGRATIONS DIAGRAMS — the desktop SVGs
   are drawn for 1300px+ and turn to illegibly small text well before
   1024, so keep the mobile-adaptive HTML compositions through the
   whole tablet band. At tablet widths (comfortably wider than a
   phone) that adaptive composition is capped to a centered reading
   column instead of stretching edge-to-edge. ---------- */
@media (max-width:1023px){
  .page-usecase-1099 main .m-lifecycle-desktop,.page-usecase-1099 main .m-arch-desktop{display:none!important;}
  .page-usecase-1099 main .m-iris-panelwrap{max-width:100%!important;margin-inline:0!important;}
}
@media (min-width:1024px){
  .page-usecase-1099 main .m-lifecycle-mobile,.page-usecase-1099 main .m-arch-mobile{display:none!important;}
}
@media (min-width:768px) and (max-width:1023px){
  /* HIGH-VOLUME — reflow the tall single-column mobile diagram into two
     columns: the enterprise batch card on the left, the IRIS submission
     statuses and downstream work stacked on the right. This uses the
     tablet width the diagram was reading as empty space around before,
     and reads as one connected composition instead of a thin vertical
     strip floating in a wide section. */
  .page-usecase-1099 main .m-lifecycle-mobile{
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:42fr 58fr!important;
    column-gap:var(--story-col-gap)!important;
    row-gap:0!important;
    align-items:start!important;
  }
  .page-usecase-1099 main .m-lifecycle-mobile>*:nth-child(1){grid-column:1!important;grid-row:1!important;}
  .page-usecase-1099 main .m-lifecycle-mobile>*:nth-child(2){grid-column:1!important;grid-row:2!important;}
  .page-usecase-1099 main .m-lifecycle-mobile>*:nth-child(3){display:none!important;}
  .page-usecase-1099 main .m-lifecycle-mobile>*:nth-child(4){grid-column:2!important;grid-row:1!important;}
  .page-usecase-1099 main .m-lifecycle-mobile>*:nth-child(5){grid-column:2!important;grid-row:2!important;}
  .page-usecase-1099 main .m-lifecycle-mobile>*:nth-child(6){grid-column:2!important;grid-row:3!important;}
  .page-usecase-1099 main .m-lifecycle-mobile>*:nth-child(7){grid-column:2!important;grid-row:4!important;margin:6px auto 10px!important;}
  .page-usecase-1099 main .m-lifecycle-mobile>*:nth-child(8){grid-column:2!important;grid-row:5!important;}
  .page-usecase-1099 main .m-lifecycle-mobile>*:nth-child(9){grid-column:2!important;grid-row:6!important;}

  /* INTEGRATIONS — the diagram's own internal structure (paired input/
     output boxes) already reads fine at this width; just give it the
     full column and a touch more internal room instead of capping it
     to a narrow centered strip. */
  .page-usecase-1099 main .m-arch-mobile{max-width:100%!important;margin-inline:0!important;}
  .page-usecase-1099 main .m-arch-layer{padding:22px 26px!important;}
  .page-usecase-1099 main .m-arch-capabilities{gap:16px!important;}
}

/* ============================================================
   MOBILE LIFECYCLE ILLUSTRATION (High-Volume section)
   Same stages/statuses as the desktop SVG, recomposed as an open
   vertical flow rather than scaled-down artwork or a stacked list.
   This is a SYSTEM DIAGRAM, not a product screenshot — it lives
   directly on the shared .m-visual-stage canvas. Only the batch
   preview at the top gets its own restrained white surface; the
   IRIS-submission outcomes and downstream work are drawn as open
   nodes/chips connected by visible arrows, so the eye reads batch
   → submission → outcome → continued work as one line, with the
   accepted path visually dominant over the five secondary states.
   ============================================================ */
.page-usecase-1099 main .m-lifecycle-mobile{display:flex;flex-direction:column;align-items:center;}
.page-usecase-1099 main .m-lc-label{display:block;align-self:flex-start;font:700 10.5px/1 'Hanken Grotesk',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px;}
.page-usecase-1099 main .m-lc-batch{width:100%;background:#fff;border:1px solid #DCE3DE;border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:11px;box-sizing:border-box;}
.page-usecase-1099 main .m-lc-batchrow{display:flex;align-items:center;gap:10px;}
/* Small document/record glyph — makes each row read as a distinct
   filing record rather than an anonymous loading-skeleton bar. */
.page-usecase-1099 main .m-lc-recordmark{width:15px;height:15px;border-radius:3px;background:#EEF2EF;border:1px solid #DEE5E0;flex:none;position:relative;}
.page-usecase-1099 main .m-lc-recordmark::before,.page-usecase-1099 main .m-lc-recordmark::after{content:"";position:absolute;left:3.5px;height:1.3px;border-radius:1px;background:#B7C2BB;}
.page-usecase-1099 main .m-lc-recordmark::before{top:5px;right:3.5px;}
.page-usecase-1099 main .m-lc-recordmark::after{top:8.5px;width:5px;}
.page-usecase-1099 main .m-lc-bar{display:block;height:6px;border-radius:3px;background:#E9EEEB;flex:none;}
.page-usecase-1099 main .m-lc-bar--sm{width:28px!important;}
.page-usecase-1099 main .m-lc-bar--warn{background:#F5EEA0!important;}
.page-usecase-1099 main .m-lc-dot{width:5px;height:5px;border-radius:50%;background:#F2E400;flex:none;}
.page-usecase-1099 main .m-lc-batchrow--warn{padding-left:10px;margin-left:-12px;border-left:2px solid #F2E400;}

/* Directional connector — a short line with a visible arrowhead so
   the flow unmistakably reads top-to-bottom without needing labels
   like "leads to". */
.page-usecase-1099 main .m-lc-arrow{position:relative;width:1px;height:20px;background:var(--line-2);margin:10px 0;}
.page-usecase-1099 main .m-lc-arrow::after{
  content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--line-2);
}
.page-usecase-1099 main .m-lc-flowlabel{display:block;text-align:center;font:700 10.5px/1 'Hanken Grotesk',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px;}

/* The one outcome that continues the process, visually dominant
   over the five secondary/exception states below it. */
.page-usecase-1099 main .m-lc-primary{display:inline-flex;align-items:center;gap:9px;background:rgba(0,171,82,.08);border:1px solid rgba(0,171,82,.28);border-radius:12px;padding:11px 20px;margin-bottom:12px;}
.page-usecase-1099 main .m-lc-primary-dot{width:11px;height:11px;border-radius:50%;background:#00AB52;flex:none;}
.page-usecase-1099 main .m-lc-primary-text{font-size:18px;font-weight:700;color:#0F1822;letter-spacing:-0.006em;}

/* Secondary/exception/intermediate outcomes — one light cluster,
   clearly de-emphasized relative to Accepted, color-coded so the
   semantics (processing vs exception vs rejected) read at a glance
   without needing six equal-weight rows. */
.page-usecase-1099 main .m-lc-secondary{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;padding:0 4px;}
.page-usecase-1099 main .m-lc-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:6px;background:#F2F4F2;font-size:12px;font-weight:500;color:#5C6A63;white-space:nowrap;}
.page-usecase-1099 main .m-lc-chipdot{width:6px;height:6px;border-radius:50%;flex:none;}
.page-usecase-1099 main .m-lc-chipdot--muted{background:#B9C2BC;}
.page-usecase-1099 main .m-lc-chip--warn{background:#FBF7DC;color:#6E5C00;}
.page-usecase-1099 main .m-lc-chipdot--warn{background:#F2E400;}
.page-usecase-1099 main .m-lc-chip--reject{background:#FBEDEA;color:#8A3226;}
.page-usecase-1099 main .m-lc-chipdot--reject{background:#B0483C;}

/* Work continues — plain open nodes, not another card. */
.page-usecase-1099 main .m-lc-continues-open{display:flex;flex-direction:column;gap:10px;}
.page-usecase-1099 main .m-lc-continue-node{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:#16221B;}
.page-usecase-1099 main .m-lc-node{width:9px;height:9px;border-radius:50%;flex:none;background:#fff;border:1.5px solid #C6D0CA;}
.page-usecase-1099 main .m-lc-node--continue{background:var(--lime);border-color:var(--lime);width:11px;height:11px;}


/* ============================================================
   MOBILE ARCHITECTURE DIAGRAM (Integrations section)
   Same nodes/relationships as the desktop SVG.
   ============================================================ */
.page-usecase-1099 main .m-arch-mobile{display:flex;flex-direction:column;}
.page-usecase-1099 main .m-arch-inputs{display:flex;align-items:flex-start;gap:14px;margin-bottom:0;}
.page-usecase-1099 main .m-arch-box{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;padding:0;}
.page-usecase-1099 main .m-arch-label{display:block;font-size:11.5px;font-weight:700;color:#43514B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.page-usecase-1099 main .m-arch-bar{display:block;height:5px;border-radius:2.5px;background:#E4EAE6;}
.page-usecase-1099 main .m-arch-plus{display:flex;align-items:center;font-size:16px;color:var(--muted-2);flex:none;padding-top:1px;}
/* Connector — same visible-arrowhead treatment as the High-Volume
   diagram, shorter than before to keep the architecture compact. */
.page-usecase-1099 main .m-arch-connector{position:relative;width:1px;height:18px;background:var(--line-2);margin:6px 0 6px 50%;}
.page-usecase-1099 main .m-arch-connector::after{
  content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--line-2);
}
/* Governance layer — the one restrained surface in this diagram; its
   own tinted card is what makes it the dominant visual anchor between
   the plain inputs above and the flattened outputs below. */
.page-usecase-1099 main .m-arch-layer{border:1px solid #DCE6E0;border-radius:10px;background:linear-gradient(180deg,#FAFDFB,#F4FAF7);padding:14px 16px;}
.page-usecase-1099 main .m-arch-layer__tick{display:block;width:22px;height:3px;background:#00AB52;border-radius:2px;margin-bottom:9px;}
.page-usecase-1099 main .m-arch-layer__label{display:block;font-size:14px;font-weight:700;color:#0F1822;margin-bottom:12px;}
.page-usecase-1099 main .m-arch-capabilities{display:flex;flex-direction:column;gap:10px;}
.page-usecase-1099 main .m-arch-cap{display:flex;flex-direction:column;gap:6px;border-left:2px solid #00AB52;padding-left:10px;}
.page-usecase-1099 main .m-arch-cap__label{font-size:11px;font-weight:700;letter-spacing:.03em;color:#5E7166;}
/* Outputs — a simple divided split, not a second card-within-a-card.
   No shared border/background wrapping the two; just a light vertical
   rule between them, same family as a supporting-story divider. */
.page-usecase-1099 main .m-arch-outputs{display:flex;gap:20px;}
.page-usecase-1099 main .m-arch-outputs .m-arch-box{padding:0;}
.page-usecase-1099 main .m-arch-outputs .m-arch-label{white-space:normal;}
.page-usecase-1099 main .m-arch-outputs .m-arch-box+.m-arch-box{border-top:0;border-left:1px solid #DCE3DE;padding-left:20px;}
.page-usecase-1099 main .m-arch-checks{display:flex;align-items:center;gap:10px;margin-top:2px;}
.page-usecase-1099 main .m-arch-check{width:14px;height:14px;border-radius:50%;background:#00AB52;flex:none;position:relative;}
.page-usecase-1099 main .m-arch-check::after{content:'';position:absolute;left:4px;top:2px;width:4px;height:7px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg);}
.page-usecase-1099 main .m-arch-ring{width:14px;height:14px;border-radius:50%;border:1.5px solid #C7D0CB;flex:none;}

/* ---------- Fine-tuning at very small phones ---------- */
@media (max-width:400px){
  .page-usecase-1099 main .m-arch-inputs{flex-direction:column;}
  .page-usecase-1099 main .m-arch-plus{align-self:center;}
}
@media (max-width:374px){
  .page-usecase-1099 main{--mobile-edge:20px;--edge:20px;}
}

/* ============================================================
   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-1099 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-1099 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-1099 main .marquee-group{display:flex;align-items:center;gap:clamp(30px,calc(16px + 3.8889vw),72px);flex-shrink:0;}
.page-usecase-1099 main .logow__marquee:hover .logow__track{animation-play-state:paused;}
@keyframes logowscroll{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
.page-usecase-1099 main .logow__img{height:clamp(22px,calc(20px + 1.6vw),62px);width:auto;flex-shrink:0;display:block;object-fit:contain;}
.page-usecase-1099 main .logow__img--badge{height:clamp(17px,calc(14px + 0.8333vw),26px);}
@media (prefers-reduced-motion:reduce){
  .page-usecase-1099 main .logow__track{animation:none;transform:none!important;flex-wrap:wrap;justify-content:center;width:100%;}
  .page-usecase-1099 main .logow__marquee{overflow:visible;}
  .page-usecase-1099 main .marquee-group[aria-hidden="true"]{display:none;}
}

/* ---------- 1099-specific hero orbit sweep (two counter-rotating rings
   on the map illustration) — page-specific, sits alongside the shared
   marquee system above rather than inside it. ---------- */
@keyframes heroSweep{to{transform:rotate(360deg);}}
@keyframes heroSweepBack{to{transform:rotate(-360deg);}}
.page-usecase-1099 main .hero-sweep{animation:heroSweep 26s linear infinite;}
.page-usecase-1099 main .hero-sweep-2{animation:heroSweepBack 44s linear infinite;}
@media (prefers-reduced-motion:reduce){
  .page-usecase-1099 main .hero-sweep,
  .page-usecase-1099 main .hero-sweep-2{animation:none!important;}
}

/* ============================================================
   USE-CASE HERO + TRUST-FOLD SYSTEM (>=1024px) — shared, reusable
   pattern ported verbatim from the approved Vendor Payments page.
   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.

   --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.
   ============================================================ */
@media (min-width:1024px){
  .page-usecase-1099 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-1099 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-1099 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-1099 main .logow-section{padding:calc((var(--uc-trust-strip-h) - 34px) / 2) 0!important;}
}