/* ============================================================
   ZENWORK — TOKENS  (white-dominant, green as accent)
   ============================================================ */
.page-home 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;
  /* Lemon tonal scale — for quiet SELECTED-control surfaces (filters/tabs).
     Distinct from --yellow, which stays reserved for the primary-CTA gradient. */
  --lemon-050:#FFFDE0; --lemon-100:#FFF9B8; --lemon-300:#E3D400;
  --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(84px,min(7.5vw,11vh),120px);   /* rhythmic section spacing — height-aware so laptops (wide but short) compress, not just narrow ones; was clamp(80px,9vw,132px), which barely differed between 1366x768 and 1920x1080 */

  /* ---- Hero composition system — one continuous fluid model shared by the
     stage photo, the floating product card, and the text column, so nothing
     jumps at a device-specific breakpoint. --header-h is a static fallback
     (matches the nav's own unscrolled rendered height); JS measures and
     overwrites it on load/resize so the hero-height formula below always
     reflects the header's real height rather than a guess. ---- */
  --header-h:114px;
  --hero-peek:clamp(80px,9vh,128px);          /* deliberate next-section preview height */
  /* calc(28px + 33vw) holds the approved laptop scale almost exactly (450px at
     1280, was 445px) while accelerating enough at wide desktop to keep the
     photo an equal half of the story there too (~662px at 1920, was 605px) —
     one continuous formula, no breakpoint jump, laptop essentially untouched. */
  --hero-stage-w:clamp(380px, calc(28px + 33vw), 680px);
  --hero-card-w:clamp(296px,24vw,345px);      /* floating product card width */
  --hero-content-gap:clamp(40px,4vw,64px);    /* minimum clearance kept between copy and stage */
  --hero-card-overlap:clamp(70px,6vw,100px);  /* how much of the card sits OUTSIDE the photo — not half the card */

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

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

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

/* Primitives */
.page-home main .wrap{width:min(calc(100% - (var(--edge) * 2)), var(--maxw));margin-inline:auto;}
.page-home main .wrap--wide{max-width:var(--maxw-wide);}
@media (max-width:640px){.page-home main{--edge:20px;}}
.page-home main .section{padding:var(--gap) 0;scroll-margin-top:130px;}
/* Tablet/mobile section rhythm — desktop's --gap is deliberately generous;
   these tiers get their own materially tighter ranges (not just --gap at a
   smaller vw) so the page becomes shorter, not merely narrower. */
@media (max-width:960px){
  .page-home main .section{padding:clamp(64px,7vw,72px) 0;}
}
@media (max-width:699px){
  .page-home main .section{padding:clamp(52px,14vw,64px) 0;}
  .page-home main .shead{margin-bottom:clamp(32px,8vw,44px);}
}
.page-home main .section + .section:not(.alt){border-top:1px solid var(--line);}
.page-home main .alt{background:var(--paper-2);}
.page-home main .reveal{opacity:0;transform:translateY(20px);transition:opacity 850ms var(--ease),transform 850ms var(--ease);}
.page-home main .reveal.in{opacity:1;transform:none;}
.page-home main .reveal[data-d="1"]{transition-delay:.08s;}
.page-home main .reveal[data-d="2"]{transition-delay:.16s;}
.page-home main .reveal[data-d="3"]{transition-delay:.24s;}

/* Type scale — big, editorial */
.page-home main .eyebrow{
  font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:0.15em;text-transform:uppercase;color:var(--green-ink);
  display:inline-flex;margin-bottom:22px;    gap: 9px;
}
.page-home main .eyebrow img{
  width: auto;
    height: 16.5px;
}
.page-home main .display{
  font-family:var(--serif);
  font-size:clamp(64px,8.6vw,124px);line-height:1.06;letter-spacing:-0.025em;
}
.page-home main .display .it{font-style:italic;}
.page-home main .h2{font-family:var(--serif);font-size:var(--type-h2);line-height:1.08;letter-spacing:-0.018em;text-wrap:balance;}
.page-home main .h3{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);line-height:1.12;letter-spacing:-0.012em;}
.page-home main .lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--muted);}
.page-home main .measure{max-inline-size:60ch;text-wrap:pretty;}

/* Buttons — Zenwork Yellow/Lemon is the primary-action color; green is reserved
   for secondary/system/semantic usage. Matches the approved 1099 implementation
   exactly: gradient fill, dark readable text, no visible border artifacts. */
.page-home 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-home main .btn svg{width:16px;height:16px;transition:transform 260ms var(--ease);}
.page-home main .btn:hover svg{transform:translateX(3px);}
.page-home main .btn--primary,.page-home 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-home main .btn--primary:hover,.page-home 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-home main .btn--primary:active,.page-home main .btn--yellow:active{transform:translateY(0);box-shadow:0 6px 16px -12px rgba(36,31,0,.26);}
.page-home main .btn:focus-visible{outline-offset:3px;}
/* secondary — light background context: transparent, dark text, subtle neutral/green border */
.page-home main .btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2);}
.page-home 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-home main .btn--ghost-dark{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.32);}
.page-home main .btn--ghost-dark:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55);}
.page-home main .btn--lg{height:58px;padding:0 34px;font-size:16.5px;}
.page-home main .textlink{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;color:var(--green-ink);}
.page-home main .textlink svg{width:15px;height:15px;transition:transform 240ms var(--ease);}
.page-home main .textlink:hover svg{transform:translateX(4px);}
/* .page-home main .textlink--ink{color:var(--ink);} */

/* ============================================================
   SECTION HEADING SYSTEM — reusable across Zenwork pages.
   .shead is the canonical wrapper: default composition is LEFT
   editorial (no modifier needed), .shead--center is the explicit
   symmetrical/system variant. Width is a single shared editorial
   cap (~1120px) so individual sections never need their own
   max-width override — alignment is the only thing sections choose.
   ============================================================ */
/* max-width removed here (previously min(100%,1200px)) — the section's own
   .wrap already bounds available width; this was an additional editorial cap
   shaping heading/paragraph line length on top of that, not a structural need. */
.page-home main .shead{margin-bottom:clamp(32px,2.4vw,36px);}
.page-home main .shead .h2{margin-bottom:0;}
.page-home main .shead p{margin-top:22px;font-size:19px;line-height:1.55;color:var(--muted);}
.page-home main .shead--center{margin-left:auto;margin-right:auto;text-align:center;}
.page-home main .shead--center p{margin-left:auto;margin-right:auto;}
/* Tighter heading rhythm for control-driven sections, where the heading
   introduces an immediately-following selector/tab strip rather than a
   paragraph of editorial copy — Three Engines and Industries only. The
   shared .shead default above (48–76px) stays untouched for every other
   section that needs the extra breathing room. */
.page-home main .shead--stages,.page-home main .shead--tabs{margin-bottom:clamp(28px,3.2vw,36px);}

/* Editorial heading-width system — the section's own .wrap/grid is the only
   width boundary an H2 needs. A short or medium heading should read as one
   confident line whenever the composition has room for it; it wraps only
   when it genuinely runs out of space, never from an arbitrary character
   cap layered on top. System/workflow headings (--center, e.g. "Three
   engines, one workflow.") sit directly above a symmetrical control strip
   and stay centered — this rule applies to them too since centering is an
   alignment choice, not a width one. */
.page-home main .shead .h2{width:100%;max-inline-size:none;}

/* Section strip — Zenwork's own signature device (see zenwork.com's green-strip/
   yellow-strip marks before each section label). Small, quiet, never a full rule. */


/* ============================================================
   NAV — with lightweight dropdown panels per item
   ============================================================ */
.page-home main .util{background:var(--ink);color:var(--on-dark-muted);font-size:13px;}
.page-home main .util .wrap{display:flex;justify-content:flex-end;align-items:center;gap:20px;height:38px;}
.page-home main .util a:hover{color:#fff;}
.page-home main .util .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.4;}

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

.page-home main .navlinks{display:flex;align-items:center;gap:4px;margin-left:auto;}
.page-home main .navitem{position:relative;}
.page-home 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-home main .navlink:hover{opacity:1;}
.page-home main .navlink .chev{width:11px;height:11px;color:var(--muted-2);transition:transform 240ms var(--ease),color 240ms var(--ease);}
.page-home main .navitem[data-open="true"] .navlink{opacity:1;}
.page-home 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-home 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-home main .nav.scrolled .navpanel{top:64px;}
.page-home main .navpanel__inner{}
.page-home main .navpanel__items{display:flex;flex-wrap:wrap;gap:8px 28px;}
.page-home main .navpanel__head{display:flex;align-items:center;gap:9px;padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line);}
.page-home main .navpanel__head-mark{width:10px;height:12px;flex:none;background-image:url(../img/brand/zenwork-yellow-ribbon-mark.png);background-size:contain;background-repeat:no-repeat;background-position:center;}
.page-home main .navpanel__head-label{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);}
.page-home main .navpanel__item{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;transition:background 160ms;box-sizing:border-box;}
.page-home main .navpanel__item--c3{flex:0 0 calc(33.333% - 19px);}
.page-home main .navpanel__item--c4{flex:0 0 calc(25% - 21px);}
.page-home main .navpanel__item--c5{flex:0 0 calc(20% - 23px);}
.page-home main .navpanel__item:hover{background:var(--g-050);}
.page-home 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-home main .navpanel__item:hover .navpanel__item-ic{color:var(--green-ink);border-color:var(--g-200);}
.page-home main .navpanel__item-ic svg{width:19px;height:19px;}
.page-home 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-home main .navpanel__item-body span{display:block;font-size:12.5px;color:var(--muted-2);font-weight:400;line-height:1.4;}
.page-home main .navitem[data-open="true"] .navpanel{opacity:1;transform:none;pointer-events:auto;visibility:visible;}
.page-home main .navpanel--wide{min-width:560px;grid-template-columns:1fr 1fr;display:grid;gap:6px 26px;}
.page-home main .navpanel--extra{min-width:820px;grid-template-columns:1fr 1fr 1fr;display:grid;gap:6px 24px;}
.page-home main .navpanel--products{min-width:640px;padding:18px;}
.page-home 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-home main .navpanel__primary{display:block;padding:12px 12px;border-radius:10px;transition:background 160ms;}
.page-home main .navpanel__primary:hover{background:var(--paper-2);}
.page-home main .navpanel__primary__name{display:block;font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-0.005em;margin-bottom:2px;}
.page-home main .navpanel__primary small{display:block;font-size:12px;color:var(--muted-2);font-weight:400;}
.page-home main .navpanel__others{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px;}
.page-home 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-home main .navpanel__group{padding:6px 4px;}
.page-home 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-home main .navpanel a:not(.navpanel__item):hover{background:var(--paper-2);opacity:1;}
.page-home main .navpanel a:not(.navpanel__item) small{display:block;font-size:12.5px;color:var(--muted-2);font-weight:400;margin-top:1px;}

.page-home main .navlinks__mobileauth{display:none;}
.page-home main .nav__right{margin-left:auto;display:flex;align-items:center;gap:6px;}
.page-home 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-home main .nav__login:hover{background:var(--paper-2);opacity:1;}
.page-home 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-home main .nav__signup:hover{border-color:var(--muted-2);background:var(--paper-2);}
.page-home 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-home 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-home main .nav.scrolled{transition:opacity 260ms var(--ease);}
@media (min-width:961px){
  .page-home main .nav.scrolled{opacity:0;pointer-events:none;}
  .page-home main .nav.scrolled .nav__main{pointer-events:none;}
}

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

@media (prefers-reduced-motion:reduce){
  .page-home main .nav.scrolled{transition:none;}
  .page-home main .nav-float{transition:none;}
}

/* ============================================================
   HERO — 2-column, product-led. Left: approved copy, unchanged.
   Right: the actual Zenwork faceted brand photograph (the real
   asset — not a redrawn approximation) with real product UI
   layered on top of it.
   ============================================================ */
/* ============================================================
   HERO — full-bleed product photo, matching the pattern already
   established on Zenwork's own product sites (Payments, EZ2290,
   Compliancely): the real photograph pinned to the viewport edge,
   with a diagonal-cut brand-color facet baked into the image itself
   (dark green here — the parent color — where each product page uses
   its own). Small icon+label callouts straddle the photo's left edge,
   the same device those pages use, here naming the three engines so
   the parent page reads as one family with them.
   ============================================================ */
/* Height-aware hero: min-height targets (100% of viewport) − (real header height)
   − (a deliberate slice of the Trust section), so the hero+peek relationship stays
   recognizable across laptop/desktop instead of the old 58vw width-driven formula,
   which showed nothing of Trust at 1366×768 and half of Trust+logos at 1920×1080.
   min-height (not height) plus overflow:hidden means short viewports/long content
   can still grow the box — only the decorative photo/glow layers ever get clipped.
   Three stacked declarations = progressive enhancement: browsers without dvh simply
   keep the vh line; the plain 560px line is the floor for browsers with neither. */
.page-home main .hero{position:relative;overflow:hidden;background:#fff;display:flex;align-items:center;
  min-height:560px;
  min-height:clamp(560px, calc(100vh - var(--header-h) - var(--hero-peek)), 900px);
  min-height:clamp(560px, calc(100dvh - var(--header-h) - var(--hero-peek)), 900px);
}
.page-home main .hero .wrap{position:relative;z-index:2;width:100%;padding-left:max(var(--edge), calc((100% - var(--maxw)) / 2));padding-top:clamp(28px,3.2vw,44px);padding-bottom:clamp(28px,3.2vw,44px);}
/* Restrained atmosphere: predominantly white, with a soft green wash from the
   upper-left and a faint lime→yellow warmth easing in through the lower-center
   transition. Two radial layers, generous transparent falloff on each so neither
   reads as a hard-edged panel or a saturated blob. */
.page-home main .hero__glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(62% 70% at 14% 10%,rgba(0,129,74,.13) 0%,rgba(0,129,74,.055) 38%,transparent 68%),radial-gradient(50% 58% at 52% 90%,rgba(172,212,0,.075) 0%,rgba(242,228,0,.032) 48%,transparent 74%);}
@keyframes heroGlowPulse{0%,100%{opacity:.7;}50%{opacity:1;}}

.page-home main .hero__row{display:block;}
/* max-width is capped at 760px as before, but never wider than the room actually
   left once the stage width + a guaranteed clearance gap are subtracted — so the
   copy column physically cannot run under the photo/card at any viewport, rather
   than just happening to fit at the current copy length. */
/* No editorial max-width here — the layout column itself (whatever room is
   left after the stage width + guaranteed clearance) determines available
   width. This calc is a genuine collision-avoidance constraint, not a
   typographic line-length cap, so it's kept even though the old 760px
   ceiling on top of it is not. Card-overlap is subtracted too: the card's
   own left edge sits hero-card-overlap further left than the stage's edge
   (that's the whole point of the straddle), so that's the real boundary
   text must stay clear of, not the stage's edge alone. */
.page-home main .hero__inner{position:relative;z-index:2;max-width:calc(100% - var(--hero-stage-w) - var(--hero-card-overlap) - var(--hero-content-gap));text-align:left;margin-top:-28px;}
.page-home main .hero__inner .display{font-size:clamp(64px,6.6vw,128px);color:var(--ink);}
/* Laptop/desktop only: a steeper, calc()-driven slope gives the headline more
   authority across the whole 1280-1920 range (was ~90-113px, now ~98-124px) —
   strong enough to read as the primary landing-page statement against the
   photo/artifact/paragraph, without an oversized jump at any single width.
   One linear formula, clamped only at the floor/ceiling — no per-breakpoint
   overrides. Mobile/tablet keep the rule above, untouched. */
@media (min-width:961px){
  .page-home main .hero__inner .display{font-size:clamp(80px, calc(42px + 4.4vw), 132px);}
}
/* Explicit, font-independent line break: each phrase is its own block and
   never wraps internally (regardless of Rowan's actual character widths,
   which a ch-based max-width can't reliably predict), so this always
   renders as exactly two lines. */
.page-home main .hero h1{margin:0 0 28px;}
.page-home main .hero h1 .ln,.page-home main .hero h1 .it{display:block;white-space:nowrap;}
.page-home main .hero .lead{margin:0 0 36px;font-size:clamp(18px,1.5vw,20px);color:var(--muted);}
.page-home main .hero__form{display:flex;gap:10px;flex-wrap:wrap;max-width:540px;margin:0;justify-content:flex-start;}

/* ============================================================
   HERO STAGE — full-bleed to the top and right edges, the same
   pattern Zenwork's own product sites (Payments, EZ2290, Compliancely)
   already use: the real photograph pinned to the viewport edge, not
   boxed in a rounded card with a shadow. The live product-verification
   card sits over the photo's left edge, vertically centered against
   the full hero height — the same device those pages use for feature
   callouts, holding one real animated artifact here instead of three
   static labels, so it reads as a Zenwork page but keeps the richer
   demo. Sized generously so the payee name and EIN never need to
   truncate. ============================================================ */
.page-home main .hstage{
  position:absolute;top:0;right:0;bottom:0;z-index:1;
  width:var(--hero-stage-w);
  overflow:hidden;pointer-events:none;
}
.page-home main .hstage__img{
  position:absolute;top:0;right:0;bottom:0;left:0;
  width:100%;height:100%;object-fit:cover;object-position:center 18%;
  display:block;
  animation:heroPhotoDrift 13s ease-in-out infinite;
}
@keyframes heroPhotoDrift{0%,100%{transform:scale(1);}50%{transform:scale(1.018);}}
@media (prefers-reduced-motion:reduce){.page-home main .hstage__img{animation:none;}}

.page-home main .hstage__wrap{
  position:absolute;top:0;bottom:0;z-index:3;
  /* Card's left edge sits (hero-card-overlap) to the left of the stage's own
     left edge — previously this centered the card ON the stage's left edge,
     meaning half the card's width (~150-170px) sat outside the photo. Right
     position = stage width, minus the card's own width, plus the (small)
     amount that's deliberately meant to spill outside the photo. */
  right:calc(var(--hero-stage-w) - var(--hero-card-w) + var(--hero-card-overlap));
  width:var(--hero-card-w);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateX(-14px);
  animation:hstage-in .8s var(--ease) .4s forwards;
}
@keyframes hstage-in{to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.page-home main .hstage__wrap{opacity:1;transform:none;animation:none;}}

.page-home main .hstage__card{
  display:none;
  position:relative;width:100%;
  border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 18px 36px -16px rgba(15,24,34,.22),0 2px 6px rgba(15,24,34,.06);
}
.page-home main .product__foot{padding:0 16px 16px;}
.page-home main .product__foot-track{display:block;height:4px;border-radius:2px;background:var(--stage-100,var(--paper-2));overflow:hidden;}
.page-home main .product__foot-fill{display:block;height:100%;width:35%;border-radius:2px;background:var(--stage-c,var(--green));transition:width 500ms var(--ease);}
.page-home main .hstage__card[data-stage="verify"]{--stage-025:var(--compliancely-025);--stage-100:var(--compliancely-100);--stage-200:var(--compliancely-200);--stage-c:var(--compliancely-300);--stage-c-ink:var(--compliancely-700);}
.page-home main .hstage__card[data-stage="pay"]{--stage-025:var(--payments-025);--stage-100:var(--payments-100);--stage-200:var(--payments-200);--stage-c:var(--payments-300);--stage-c-ink:var(--payments-700);}
.page-home main .hstage__card[data-stage="report"]{--stage-025:var(--tax1099-025);--stage-100:var(--tax1099-100);--stage-200:var(--tax1099-200);--stage-c:var(--tax1099-300);--stage-c-ink:var(--tax1099-700);}
.page-home main .hstage__card .product__head{padding:14px 16px;gap:9px;}
.page-home main .hstage__card .product__av{width:30px;height:30px;border-radius:8px;font-size:10px;background:var(--g-025);border:1px solid var(--g-200);color:var(--green-ink);box-shadow:none;}
.page-home main .hstage__card .product__av svg{width:16px;height:16px;}
.page-home main .hstage__card .product__id b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:185px;display:inline-block;}
.page-home main .hstage__card .product__id__sub{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:185px;display:inline-block;}
.page-home main .hstage__card .product__seal{font-size:9.5px;padding:0;flex:none;background:transparent;border:0;border-radius:0;color:var(--muted);letter-spacing:.06em;box-shadow:none;}
.page-home main .hstage__card .product__body{padding:18px 16px 20px;}
.page-home main .hstage__card .product__row{padding:9px 0;font-size:11.5px;}

.page-home main .hstage__steps{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:10px 14px 12px;
  background:var(--paper-2);
  border-top:1px solid rgba(15,24,34,.05);
}
.page-home main .hstage__step{
  font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted-2);opacity:.7;
  transition:color 300ms var(--ease),opacity 300ms var(--ease);
}
.page-home main .hstage__step:not(:last-child)::after{content:"\00b7";margin-left:9px;color:var(--line-2);font-weight:400;}
.page-home main .hstage__step.is-on{opacity:1;}
.page-home main .hstage__step[data-hstep="verify"].is-on{color:#4CC9E9;}
.page-home main .hstage__step[data-hstep="pay"].is-on{color:#FDB600;}
.page-home main .hstage__step[data-hstep="report"].is-on{color:#0047BB;}

/* WIDE DESKTOP (1600-1920px) — the fluid stage/overlap formulas above already
   scale continuously; these values pick up exactly where the base formulas
   leave off at 1600px and ease further by 1920px, so there's no jump at the
   1600px seam. Goal is a connected composition (promise -> product proof ->
   human context), not a redesign: a slightly larger stage, the floating card
   drawn a bit further into the shared center, and the existing atmospheric
   glow extended (not replaced) to visually bridge the two halves. The
   hero__inner max-width calc automatically keeps its own clearance as these
   grow, so there's no separate collision-avoidance change needed here. */
@media (min-width:1600px){
  .page-home main{
    --hero-stage-w:clamp(556px, calc(45vw - 164px), 700px);
    --hero-card-overlap:clamp(96px, calc(10vw - 64px), 128px);
  }
  .page-home main .hero__glow{
    background:
      radial-gradient(62% 70% at 14% 10%,rgba(0,129,74,.13) 0%,rgba(0,129,74,.055) 38%,transparent 68%),
      radial-gradient(50% 58% at 52% 90%,rgba(172,212,0,.075) 0%,rgba(242,228,0,.032) 48%,transparent 74%),
      radial-gradient(46% 62% at 60% 44%,rgba(0,171,82,.05) 0%,rgba(172,212,0,.03) 46%,transparent 72%);
  }
  /* Centers the floating card against the text block's own visual weight
     (which sits slightly above hero's geometric mid-line, from hero__inner's
     -28px nudge) rather than mechanically against the full hero height. */
  .page-home main .hstage__wrap{top:-14px;bottom:14px;}
}

/* TABLET (700–960px) — same split-hero architecture as desktop, just
   retuned smaller. Overriding the existing fluid tokens (rather than
   switching to a different layout system) is what keeps this a compact
   version of the desktop composition instead of a different one: photo
   stays pinned right, card keeps straddling its left edge, copy keeps its
   collision-avoidance max-width — only the numbers shrink. Stage ~48vw
   plus the smaller overlap/gap leaves the copy column ~44-47% of the row,
   matching the desktop's editorial/product-led split at a smaller scale. */
@media (min-width:700px) and (max-width:960px){
  .page-home main{
    --hero-stage-w:48vw;
    --hero-card-w:clamp(220px,26vw,260px);
    --hero-card-overlap:32px;
    --hero-content-gap:20px;
  }
  .page-home main .hero .wrap{padding-top:clamp(32px,4vw,44px);padding-bottom:clamp(32px,4vw,44px);}
}

/* MOBILE (<700px) — stacks, but keeps the editorial character: left-aligned
   (never centered), and the product card pulled up over the photo's own
   lower edge via negative margin so it reads as belonging to the image,
   not as an unrelated card sitting beneath it. */
@media (max-width:699px){
  .page-home main .hero{overflow:visible;display:flex;flex-direction:column;align-items:stretch;min-height:0;}
  .page-home main .hero .wrap{padding-top:clamp(48px,10vw,64px);padding-bottom:0;padding-left:var(--edge);padding-right:var(--edge);}
  .page-home main .hstage{order:2;position:relative;top:auto;right:auto;bottom:auto;width:100%;height:clamp(260px,68vw,330px);margin-top:32px;}
  .page-home main .hero__inner{max-width:100%;text-align:left;margin-top:0;}
  .page-home main .hero h1{margin:0 0 20px;}
  .page-home main .hero .lead{margin:0 0 28px;}
  .page-home main .hero__form{justify-content:flex-start;margin:0;}
  /* Card width capped at 320px and pulled up ~48px over the photo's lower
     edge (within the 40-56px overlap range) — enough to read as attached
     to the image, not enough to reach into the photo's upper/face area
     given the stage's own 260-330px height. */
  .page-home main .hstage__wrap{order:3;position:relative;top:auto;bottom:auto;right:auto;left:auto;width:min(88vw,320px);margin:-48px auto 0;padding:0 0 8px;opacity:1;transform:none;animation:none;}
  .page-home main .hstage__card{width:100%;}
}

/* Task 03: the Hero CTA opts out of the global mobile full-width .btn rule —
   a deliberate pill, not a stretched action bar. Two classes beats the
   .btn{width:100%} rule's specificity regardless of source order. */
@media (max-width:560px){
  .page-home main .btn.hero__cta{width:auto;min-height:48px;}
}









/* Proof statement — restrained editorial line: quiet label, the number does the work */
.page-home main .hero__proof{
  display:block;margin:0 0 28px;font-size:14px;color:var(--muted);letter-spacing:0.005em;line-height:1.3;
}
/* Odometer — each decimal digit is its own vertical reel that rolls to its neighbor,
   the way a live data readout ticks (see Ramp's hero number treatment). The integer
   and punctuation stay static text; only the four decimal digits ever move. */
.page-home main .odometer{
  display:inline-flex;align-items:baseline;color:var(--green-ink);font-weight:700;
  font-size:1.28em;letter-spacing:-0.01em;font-variant-numeric:tabular-nums;
}

.page-home main .hero__input{flex:1;min-width:220px;height:54px;padding:0 22px;border:1px solid var(--line-2);border-radius:999px;background:#fff;font-size:15.5px;font-family:inherit;color:var(--ink);transition:border-color 180ms,box-shadow 180ms;}
.page-home main .hero__input::placeholder{color:var(--muted-2);}
.page-home main .hero__input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(0,171,82,.1);}
.page-home main .hero__load > *{opacity:0;transform:translateY(16px);animation:up .9s var(--ease) forwards;}
.page-home main .hero__load > *:nth-child(1){animation-delay:.05s;}
.page-home main .hero__load > *:nth-child(2){animation-delay:.15s;}
.page-home main .hero__load > *:nth-child(3){animation-delay:.25s;}
.page-home main .hero__load > *:nth-child(4){animation-delay:.35s;}
@keyframes up{to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.page-home main .hero__load > *{opacity:1;transform:none;animation:none;}}

/* ============================================================
   DEMO — product walkthrough (introduced right after hero)
   ============================================================ */
.page-home main .demo__frame{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-lift);overflow:hidden;max-width:1060px;margin:0 auto;}
.page-home main .demo__bar{height:46px;background:var(--paper-2);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px;padding:0 18px;}
.page-home main .demo__bar i{width:10px;height:10px;border-radius:50%;background:var(--line-2);display:block;}
.page-home main .demo__bar .url{margin-left:14px;font-size:12.5px;color:var(--muted-2);font-weight:500;}
.page-home main .demo__bar .live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--green-ink);text-transform:uppercase;}
.page-home main .demo__bar .live .pip{width:7px;height:7px;border-radius:50%;background:var(--green);}
.page-home main .demo__stage{padding:44px 40px 38px;}
.page-home main .demo__steps{display:flex;align-items:flex-start;position:relative;}
.page-home main .dstep{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 12px;position:relative;opacity:.38;transition:opacity 500ms var(--ease);}
.page-home main .dstep.on{opacity:1;}
.page-home main .dstep__node{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;background:var(--paper-2);color:var(--muted-2);border:1px solid var(--line-2);transition:all 500ms var(--ease);position:relative;z-index:2;}
.page-home main .dstep.on .dstep__node{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 10px 24px -10px rgba(0,171,82,.55);transform:translateY(-3px);}
.page-home main .dstep.done .dstep__node{background:#fff;border-color:var(--green);color:var(--green-ink);}
.page-home main .dstep__node svg{width:25px;height:25px;}
.page-home main .dstep__label{margin-top:16px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);transition:color 400ms;}
.page-home main .dstep.on .dstep__label{color:var(--ink);}
.page-home main .dstep__cap{margin-top:7px;font-size:13px;color:var(--muted-2);line-height:1.4;min-height:2.8em;max-width:17ch;}
.page-home main .dstep__wire{position:absolute;top:28px;left:50%;width:100%;height:2px;background:var(--line-2);z-index:1;overflow:hidden;}
.page-home main .dstep:last-child .dstep__wire{display:none;}
.page-home main .dstep__wire::after{content:"";position:absolute;inset:0;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform 600ms var(--ease);}
.page-home main .dstep.done .dstep__wire::after{transform:scaleX(1);}
.page-home main .demo__ticker{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--muted);justify-content:center;flex-wrap:wrap;}
.page-home main .demo__ticker .rec{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--ink);}
.page-home main .demo__ticker .rec .av{width:26px;height:26px;border-radius:7px;background:var(--green);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;}
.page-home main .demo__ticker .now{font-family:var(--serif);font-style:italic;color:var(--green-ink);}
.page-home main .demo__note{margin-top:22px;text-align:center;color:var(--muted-2);font-size:12.5px;}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.page-home main .trust{padding:clamp(24px,2.5vw,32px) 0 0;text-align:center;}
.page-home main .trust p.tl{font-size:18px;color:var(--black);letter-spacing:.02em;margin-bottom:32px;}
.page-home main .trust__chips{flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:32px;}
/* Task 02: tablet/mobile disclosure — these labels are informational, not a
   filter (nothing on the page changes when "selected"), so this is a plain
   accessible disclosure exposing the same list as text, not a <select>
   implying a functional choice, and not clickable links with no destination. */
.page-home main .trust__disclosure{display:none;text-align:left;max-width:420px;margin:0 auto 28px;}
.page-home main .trust__toggle{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:50px;padding:0 18px;
  background:#fff;border:1px solid var(--line-2);border-radius:12px;
  font-size:16px;font-weight:600;color:var(--ink);
  cursor:pointer;list-style:none;
}
.page-home main .trust__toggle::-webkit-details-marker{display:none;}
.page-home main .trust__toggle:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.page-home main .trust__chevron{flex:none;width:12px;height:12px;color:var(--muted-2);transition:transform 200ms var(--ease);}
.page-home main .trust__disclosure[open] .trust__chevron{transform:rotate(180deg);}
.page-home main .trust__panel{
  list-style:none;margin:8px 0 0;padding:8px;
  background:#fff;border:1px solid var(--line-2);border-radius:12px;
  box-shadow:var(--shadow);
}
.page-home main .trust__panel li{
  padding:10px 12px;font-size:14.5px;color:var(--muted);
  border-radius:8px;
}
.page-home main .trust__panel li:first-child{font-weight:700;color:var(--ink);}
@media (max-width:960px){
  .page-home main .trust{display:none;}
}
/* Trust chips are static category tags (see markup) — no hover/selected
   state, since there's nothing for them to do. Industry tabs are genuinely
   interactive, so they keep the full hover/selected/focus treatment below;
   both share only the base pill shape/sizing. */
.page-home main .chip,.page-home main .ind__tab{height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:transparent;font-size:13.5px;font-weight:600;color:var(--muted);transition:background 180ms var(--ease),border-color 180ms var(--ease),color 180ms var(--ease);display:inline-flex;align-items:center;}
.page-home main .trust__chips .chip:hover,.page-home main .ind__tab:hover{background:var(--g-025);border-color:var(--g-200);color:var(--green-ink);}
.page-home main .trust__chips .chip:focus-visible,.page-home main .ind__tab:focus-visible{outline-offset:2px;}
/* Selected state — a quiet green-tonal surface (not the Yellow/Lemon primary-
   CTA treatment): a selected tab is indicating state, not asking
   for a click, so it stays restrained — same family as the hover state,
   just a touch more settled, with a slightly stronger label weight. */
.page-home main .trust__chips .chip[aria-selected="true"],.page-home main .ind__tab[aria-selected="true"]{background:var(--g-050);border-color:var(--g-200);color:var(--g-700);font-weight:700;box-shadow:none;}
/* ============================================================
   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. 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. Ported verbatim from the 1099 design system as a
   static demo strip — swap in the confirmed Zenwork logo list when
   available.
   ============================================================ */
.page-home main .logow-section{position:relative;overflow:hidden;background:#fff;padding:0 0 clamp(32px,4.4vw,44px);}
@media (max-width:699px){
  .page-home main .logow-section{padding-top:clamp(80px,10vw,48px);}
.page-home main .logow__img{height:clamp(22px,calc(4px + 7vw),72px) !important;}  
.res__head{display:block;
}
.btn-secoundry{
  margin-top:20px;
}
.page-home main .textlink{
  margin-top:20px;
}
}
.page-home 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-home main .logow__track{display:flex;align-items:center;gap:clamp(30px,calc(16px + 3.8889vw),72px);width:max-content;will-change:transform;animation:logowscroll var(--logow-duration,36s) linear infinite;}
.page-home main .marquee-group{display:flex;align-items:center;gap:clamp(30px,calc(16px + 3.8889vw),72px);flex-shrink:0;}
.page-home 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-home main .logow__img{height:clamp(22px,calc(20px + 1.6vw),72px);width:auto;flex-shrink:0;display:block;object-fit:contain;}
.page-home main .logow__img--badge{height:clamp(17px,calc(14px + 0.8333vw),26px);}
@media (prefers-reduced-motion:reduce){.page-home main .logow__track{animation:none;}}
/* Industry tab panels — a static, centered logo grid (same logo sizing as
   the marquee) shown in place of the marquee when a specific industry tab
   is selected. */
.page-home main .logow__marquee[hidden],.page-home main .logow__grid[hidden]{display:none;}
.page-home main .logow__grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(24px,calc(12px + 2.5vw),48px) clamp(30px,calc(16px + 3.8889vw),72px);min-height:clamp(22px,calc(18px + 1.1111vw),34px);animation:logowfade 320ms var(--ease);}
.page-home main .logow__empty{margin:0;font-size:14px;color:var(--muted-2);}
@keyframes logowfade{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){.page-home main .logow__grid{animation:none;}}


/* ============================================================
   PLATFORM — one product, three lenses. Prove as a light supporting layer.
   Verify → Pay → Report select the lens; the product view changes.
   ============================================================ */
.page-home main .plat{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#fff,var(--paper-2) 45%,#fff);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.page-home main .plat::before{
  content:"";
  position:absolute;top:0;right:0;bottom:0;left:0;
  z-index:0;pointer-events:none;
  background:
    radial-gradient(44% 60% at 82% 0%, rgba(172,212,0,.08), transparent 66%),
    radial-gradient(38% 50% at 6% 100%, rgba(0,171,82,.06), transparent 68%);
}
.page-home main .plat > .wrap{position:relative;z-index:1;}

/* Stage selector — three lenses, workflow-directional. Clean and calm. */
.page-home main .plat__stages{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  gap:8px;
  max-width:780px;
  margin:0 auto clamp(36px,3.8vw,48px);
  padding:0 clamp(12px,2vw,24px);
}
.page-home main .pstage{
  position:relative;
  background:transparent;border:0;padding:14px 18px 20px;
  cursor:pointer;text-align:left;font-family:inherit;
  display:flex;align-items:center;gap:14px;
  border-radius:14px;
  transition:background 220ms var(--ease);
}
.page-home main .pstage:hover{background:rgba(15,24,34,0.025);}
.page-home main .pstage:focus-visible{background:rgba(15,24,34,0.025);outline:2px solid var(--green);outline-offset:2px;border-radius:var(--r-md);}
.page-home main .pstage__ico{
  width:40px;height:40px;border-radius:12px;flex:none;
  display:grid;place-items:center;
  background:var(--paper-2);border:1px solid var(--line);color:var(--muted-2);
  transition:all 340ms var(--ease);
}
.page-home main .pstage__ico svg{width:20px;height:20px;}
/* Selected state — matches the hero product card's own icon-tile language
   (pale green surface, restrained hairline stroke, dark-green icon, no
   shadow) rather than a solid gradient badge, so these three controls read
   as "operational engine selectors" consistent with the rest of the page's
   product UI instead of a generic marketing pill. */
.page-home main .pstage[aria-selected="true"] .pstage__ico{
  background:var(--g-050);
  border-color:var(--green);color:var(--green-ink);
  box-shadow:none;
}
.page-home main .pstage__body{display:flex;flex-direction:column;gap:3px;min-width:0;}
.page-home main .pstage__name{
  font-family:var(--serif);font-size:22px;letter-spacing:-0.014em;
  color:var(--muted-2);font-weight:400;
  transition:color 340ms var(--ease);
}
.page-home main .pstage[aria-selected="true"] .pstage__name{color:var(--ink);}
/* underline appears under the active stage — the "lens indicator" */
.page-home main .pstage::after{
  content:"";position:absolute;
  left:18px;right:18px;bottom:10px;
  height:2px;border-radius:2px;
  background:var(--green);
  transform:scaleX(0);transform-origin:left;
  transition:transform 380ms var(--ease);
}
.page-home main .pstage[aria-selected="true"]::after{transform:scaleX(1);}

/* Arrows between stages — sequence indicator */
.page-home main .pstage__arrow{
  color:var(--line-2);
  display:grid;place-items:center;
  transition:color 320ms var(--ease);
}
.page-home main .pstage__arrow svg{width:16px;height:16px;}

/* Central content — caption LEFT, one product interface RIGHT.
   The frame doesn't change on selection; the CONTENT inside does. */
.page-home main .plat__body{
  position:relative;
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:clamp(40px,4vw,72px);
  max-width:none;
  margin-inline:0;
  /* Centered, not start-aligned: a short caption against a much taller
     product card left a block of dead space under the caption. Centering
     splits that leftover evenly above/below instead of dumping it all at
     the bottom, so the two columns read as one deliberate pair. The product
     card keeps justify-self:end below, so its own top edge still lands
     close to the caption's — this only matters when the caption is short
     enough that the two would otherwise visibly drift apart. */
  align-items:center;
  /* No secondary max-width here: every other two-column row on this page
     (Industries' canvas, for one) simply fills .wrap — the previous
     --maxw-wide re-cap only mattered because the card lacked its own
     right-edge anchor. justify-self:end on .plat__stage below already keeps
     the card flush to the row's true right edge at any width, so this row
     now uses the same container logic as the rest of the page instead of a
     second, narrower one nested inside it. */
}
/* Ambient product-colored light behind the active artifact — cyan for Verify,
   yellow for Pay, blue for Report. Large, blurred, low-opacity, and purely
   decorative (z-index:0, pointer-events:none) so it never affects layout. */
.page-home main .plat__body::before{
  content:"";
  position:absolute;top:-14%;right:-8%;
  width:64%;height:128%;
  z-index:0;pointer-events:none;
  background:radial-gradient(58% 58% at 50% 46%, var(--stage-glow,var(--green)), transparent 72%);
  opacity:.15;
  filter:blur(64px);
  transition:background 340ms var(--ease);
}
.page-home main .plat__body[data-stage="verify"]{--stage-glow:var(--compliancely-300);}
.page-home main .plat__body[data-stage="pay"]{--stage-glow:var(--payments-300);}
.page-home main .plat__body[data-stage="report"]{--stage-glow:var(--tax1099-300);}
.page-home main .plat__caption,.page-home main .plat__product{position:relative;z-index:1;}

/* Caption — cross-fades on stage switch */
.page-home main .plat__caption{
  display:flex;flex-direction:column;gap:18px;
  transition:opacity 220ms var(--ease),transform 220ms var(--ease);
}
.page-home main .plat__caption.switching{opacity:0;transform:translateY(6px);}
/* Product lockup — the real sub-brand logo, given room to read as a premium mark. */
.page-home main .plat__link{align-self:flex-start;}
.page-home main .plat__prodmark{display:flex;align-items:center;gap:10px;}
.page-home main .plat__lockup{height:32px;width:auto;display:block;object-fit:contain;}
.page-home main .plat__lockup--text{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-0.005em;}
.page-home main .plat__prodname{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.01em;}
.page-home main .plat__caption h3{
  font-family:var(--serif);font-size:clamp(30px,3.2vw,44px);
  line-height:1.08;letter-spacing:-0.02em;color:var(--ink);font-weight:400;
}
.page-home main .plat__caption p{
  font-size:15.5px;line-height:1.65;color:var(--muted);
  font-family:var(--sans);
}

/* Shared narrative visual-stage treatment — a subtle branded environment
   around a product visual (section environment -> stage -> white surface ->
   product UI). One recipe reused wherever this page frames a product UI
   (Three Engines here, AI below), so the presentation language reads as one
   system rather than a per-section invention. Restrained by design: barely-
   there tri-tone wash, hairline border, inset highlight — no loud gradient,
   no extra shadow layered on top of the white surface it contains. */
.page-home main .visual-stage{
  border-radius:24px;
  padding:clamp(28px,2.5vw,36px);
  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);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.page-home main .plat__stage{width:100%;max-width:calc(660px + clamp(28px,2.5vw,36px) * 2);justify-self:end;}

/* Product interface — one card. Frame constant, body cross-fades. */
.page-home main .plat__product{
  position:relative;
  background:#fff;border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 44px 100px -50px rgba(15,24,34,.2),0 2px 6px rgba(15,24,34,.05);
  overflow:hidden;
  width:100%;max-width:660px;
  --stage-025:var(--paper-2);--stage-100:var(--paper-2);--stage-200:var(--line-2);
  --stage-c:var(--green);--stage-c-ink:var(--green-ink);--stage-700:var(--green-ink);--stage-900:var(--green-deep);
}
/* Product-color inheritance, using each product's actual tonal scale rather than
   a single swapped accent: 025/100/200 build the artifact's own subtle surface,
   300 is the primary interactive/identity color, 700+ gives legible text-on-white.
   Payments now carries its real brand yellow (not a green stand-in) — Verify is
   Compliancely cyan, Report is Tax1099 blue. Color lives inside the workflow
   states themselves (surfaces, trackers, confirmations), never as a card border. */
.page-home main .plat__product[data-stage="verify"]{
  --stage-025:var(--compliancely-025);--stage-100:var(--compliancely-100);--stage-200:var(--compliancely-200);
  --stage-c:var(--compliancely-300);--stage-c-ink:var(--compliancely-700);--stage-700:var(--compliancely-700);--stage-900:var(--compliancely-900);
}
.page-home main .plat__product[data-stage="pay"]{
  --stage-025:var(--payments-025);--stage-100:var(--payments-100);--stage-200:var(--payments-200);
  --stage-c:var(--payments-300);--stage-c-ink:var(--payments-700);--stage-700:var(--payments-700);--stage-900:var(--payments-900);
}
.page-home main .plat__product[data-stage="report"]{
  --stage-025:var(--tax1099-025);--stage-100:var(--tax1099-100);--stage-200:var(--tax1099-200);
  --stage-c:var(--tax1099-300);--stage-c-ink:var(--tax1099-700);--stage-700:var(--tax1099-700);--stage-900:var(--tax1099-900);
}
.page-home main .product__head{
  display:flex;align-items:center;gap:14px;
  padding:22px 24px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fff,var(--paper-2));
}
/* Icon container, not an initials badge — same restrained tile language as the
   hero card's own icon (pale green surface, hairline green border, dark-green
   icon, no shadow). This answers "which business record am I looking at?" —
   a different question from the Verify/Pay/Report selector above, which
   already answers "which workflow stage?" So unlike .product__seal (which
   correctly tracks the active stage's product color), this icon stays a
   constant parent-Zenwork green regardless of stage: entity identity doesn't
   change when the workflow lens changes, so its icon shouldn't either. */
.page-home main .product__av{
  width:46px;height:46px;border-radius:12px;flex:none;
  background:var(--g-025);border:1px solid var(--g-200);color:var(--green-ink);
  display:grid;place-items:center;
  transition:opacity 220ms var(--ease);
}
.page-home main .product__av svg{width:22px;height:22px;}
.page-home main .product__id{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0;}
.page-home main .product__id b{
  font-size:16px;color:var(--ink);font-weight:700;letter-spacing:-0.006em;
  transition:opacity 220ms var(--ease);
}
.page-home main .product__id__sub{
  font-size:12px;color:var(--muted-2);letter-spacing:.02em;
  transition:opacity 220ms var(--ease);
}
.page-home main .product__seal{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--stage-c-ink);
  background:var(--stage-100);
  border:1px solid var(--stage-200);
  padding:6px 11px 6px 8px;border-radius:20px;
  display:inline-flex;align-items:center;gap:6px;flex:none;
  transition:opacity 220ms var(--ease),background 260ms var(--ease),border-color 260ms var(--ease),color 260ms var(--ease);
}
/* ---- completion feedback lives on the small status pip only — never the
   chip/label/container — so the pulse always reads as a circular signal,
   not a rectangular halo, and never causes the "Verified/Paid/Filed" text
   to itself scale or shake. ---- */
.page-home main .product__seal .pip{
  position:relative;width:6px;height:6px;border-radius:50%;
  background:var(--stage-c);transition:background 260ms var(--ease);
}
.page-home main .product__seal.pop .pip::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--stage-c);
  animation:pipPulse 650ms var(--ease);
}
@keyframes pipPulse{
  0%{transform:scale(.6);opacity:.45;}
  100%{transform:scale(2.2);opacity:0;}
}
@media (prefers-reduced-motion:reduce){.page-home main .product__seal.pop .pip::after{animation:none;}}

/* Product body — its own quiet product-tinted surface (Cyan-025 / Yellow-025 /
   Blue-025), not white-everywhere. This alone makes each artifact feel like a
   distinct product workspace rather than the same white card three times. */
.page-home main .product__body{
  padding:16px 24px 20px;
  background:var(--stage-025);
  transition:opacity 220ms var(--ease),transform 220ms var(--ease),background 320ms var(--ease);
}
/* Verify/Pay/Report are genuinely different DOM structures (5 rows + stamp vs.
   amount+tracker vs. form-fan+rows), so their natural content heights differ by
   ~58px. Left alone, the auto-cycling demo made the card — and everything below
   it on the page — grow and shrink on every switch. Locked to the tallest
   state's measured height so only the content changes, never the layout. */
.page-home main #platform .product__body{min-height:354px;}
.page-home main .product__body.switching{opacity:0;transform:translateY(6px);}
.page-home main .product__head.switching{opacity:0;transition:opacity 220ms var(--ease);}
.page-home main .product__row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
  border-bottom:1px dashed var(--line-2);
  font-size:14px;
}
.page-home main .product__row:last-child{border-bottom:none;}
.page-home main .product__row .k{color:var(--muted);}
.page-home main .product__row .v{
  color:var(--ink);font-weight:600;
  display:inline-flex;align-items:center;gap:8px;
}
.page-home main .product__row .v .pip{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none;}

/* Verify — an animated sequence: Request → source check → matched → verified.
   Each row moves through pending → checking → done, one at a time, on a loop —
   the same "shared motion logic" as the Pay tracker below, applied to Verify's
   own operation instead of a frozen list. */
.page-home main .vrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line-2);transition:opacity 300ms var(--ease);}
.page-home main .vrow:last-child{border-bottom:none;}
.page-home main .vrow__ic{width:26px;height:26px;border-radius:8px;flex:none;background:var(--paper-2);border:1px solid var(--line);color:var(--muted);display:grid;place-items:center;transition:color 300ms var(--ease),border-color 300ms var(--ease);}
.page-home main .vrow__ic svg{width:14px;height:14px;}
.page-home main .vrow__body{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.page-home main .vrow__k{font-size:14px;color:var(--muted);display:inline-flex;align-items:center;}
.page-home main .vrow__v{font-size:13.5px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:color 300ms var(--ease);}
.page-home main .vrow__v .pip{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none;transition:background 300ms var(--ease);}
.page-home main .vrow--pending{opacity:.4;}
.page-home main .vrow--pending .vrow__v .pip{background:var(--line-2);}
.page-home main .vrow--checking .vrow__ic{color:var(--stage-c-ink);border-color:var(--stage-200);background:#fff;}
.page-home main .vrow--checking .vrow__v{color:var(--muted);}
.page-home main .vrow--checking .vrow__v .pip{background:var(--stage-c);animation:pdotpulse 1s ease-in-out infinite;}
/* The closing artifact — what makes this read as a verification RECORD rather
   than a checklist. Only appears once every row has actually finished checking. */
.page-home main .vstamp{
  display:flex;align-items:center;gap:11px;margin-top:14px;padding:12px 14px;border-radius:12px;
  background:var(--stage-100);
  border:1px solid var(--stage-200);
  opacity:0;transform:translateY(4px) scale(.98);
  transition:opacity 380ms var(--ease),transform 380ms var(--ease);
}
.page-home main .vstamp.show{opacity:1;transform:none;}
.page-home main .vstamp__ring{width:30px;height:30px;border-radius:50%;background:var(--stage-c);color:#fff;display:grid;place-items:center;flex:none;}
.page-home main .vstamp__ring svg{width:15px;height:15px;}
.page-home main .vstamp__text{display:flex;flex-direction:column;line-height:1.3;}
.page-home main .vstamp__text b{font-size:13px;color:var(--ink);font-weight:700;}
.page-home main .vstamp__text span{font-size:11.5px;color:var(--muted);}

/* Pay — one evolving card: a persistent tax-info anchor + a 3-step animated tracker */
/* Pay's own composition anchor: unlike Verify's record and Report's form fan,
   a real payment artifact leads with the amount. Every color here now comes
   from the Payments Yellow scale, not a green stand-in. */
.page-home main .payamount{padding:2px 0 18px;}
.page-home main .payamount__label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--stage-c-ink);margin-bottom:5px;}
.page-home main .payamount__num{font-family:var(--serif);font-size:36px;line-height:1;color:var(--ink);letter-spacing:-0.01em;}
.page-home main .payamount__cents{font-size:0.5em;color:var(--muted);}
.page-home main .payanchor{display:flex;align-items:center;gap:12px;padding:11px 13px;margin:0 0 20px;background:var(--stage-025);border:1px solid var(--stage-200);border-radius:12px;}
.page-home main .payanchor__ic{width:30px;height:30px;border-radius:9px;flex:none;background:#fff;border:1px solid var(--stage-200);color:var(--stage-c-ink);display:grid;place-items:center;}
.page-home main .payanchor__ic svg{width:15px;height:15px;}
.page-home main .payanchor__body{display:flex;flex-direction:column;gap:1px;min-width:0;}
.page-home main .payanchor__body b{font-size:12.5px;color:var(--ink);font-weight:700;}
.page-home main .payanchor__body span{font-size:11.5px;color:var(--stage-c-ink);font-weight:600;}
.page-home main .paytrack{display:flex;justify-content:space-between;align-items:flex-start;position:relative;margin:0 4px;padding-top:2px;}
.page-home main .paytrack::before{content:"";position:absolute;left:14px;right:14px;top:7px;height:1px;background:var(--line-2);z-index:0;}
.page-home main .paytrack__step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:9px;flex:1;}
.page-home main .paytrack__dot{width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid var(--line-2);transition:all 420ms var(--ease);position:relative;}
.page-home main .paytrack__step.done .paytrack__dot{background:var(--stage-c);border-color:var(--stage-c);}
.page-home main .paytrack__step.on .paytrack__dot{background:var(--stage-c);border-color:var(--stage-c);box-shadow:0 0 0 4px var(--stage-100);}
.page-home main .paytrack__step.on .paytrack__dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;background:var(--stage-200);animation:pdotring 2.2s ease-out infinite;}
.page-home main .paytrack__lbl{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap;transition:color 420ms var(--ease);}
.page-home main .paytrack__step.on .paytrack__lbl,.page-home main .paytrack__step.done .paytrack__lbl{color:var(--ink);}
.page-home main .paycap{margin-top:20px;padding-top:15px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);line-height:1.55;min-height:2.7em;}
.page-home main .paycap b{color:var(--ink);font-weight:700;}

/* Report — breadth-first form fan + credibility status rows */
.page-home main .formfan{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 18px;}
.page-home main .formchip{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 13px;border-radius:8px;background:#fff;border:1px solid var(--line-2);font-size:12.5px;font-weight:700;color:var(--muted);transition:all 460ms var(--ease);}
.page-home main .formchip.on{background:var(--stage-c);border-color:var(--stage-c);color:#fff;transform:translateY(-2px);box-shadow:0 10px 20px -10px var(--stage-700);}
.page-home main .reportnow{padding:14px 0 4px;margin-bottom:4px;border-top:1px solid var(--line);font-size:12px;color:var(--muted-2);}
.page-home main .reportnow b{font-family:var(--serif);font-style:italic;font-size:15.5px;color:var(--ink);font-weight:400;margin-left:4px;}
.page-home main .rrow{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13.5px;}
.page-home main .rrow .k{color:var(--muted);flex:1;}
.page-home main .rrow .v{font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:7px;}
.page-home main .rrow .v .pip{width:6px;height:6px;border-radius:50%;background:var(--stage-c);flex:none;}
.page-home main .rrow--deliver .v{color:var(--stage-c-ink);}
/* The confirmation number — what makes this read as a filed document rather
   than a status list. Every real IRS acknowledgement has a reference id. */
.page-home main .rconfirm{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:14px;padding:10px 13px;border-radius:10px;
  background:var(--stage-025);
  border:1px dashed var(--stage-200);
}
.page-home main .rconfirm__label{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);}
.page-home main .rconfirm__id{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--stage-c-ink);font-variant-numeric:tabular-nums;letter-spacing:.01em;}

/* PROVE — a single thin band. Not a section, not a table. A trust rail.
   Quiet pale-green surface (not flat white) so it reads as a continuation of
   the section's own visual-stage family rather than a separate utilitarian
   status bar dropped underneath it — same fine border logic as .visual-stage,
   just lighter-touch since this rail is meant to stay secondary. */
.page-home main .plat__prove{
  display:block;
  padding:20px clamp(24px,2.5vw,36px);
  background:linear-gradient(180deg,var(--g-025) 0%,#fff 100%);
  border:1px solid rgba(0,129,74,.10);
  border-radius:20px;
  box-shadow:0 3px 12px -8px rgba(15,24,34,.05);
  /* margin-top:clamp(24px,3vw,36px); */
}
/* Inner composition — keeps the rail's painted surface full width (aligned to
   the platform visual above) while capping the label/Verify-Pay-Report
   relationship to a controlled measure, so on wide desktop they read as one
   grouped statement instead of two pieces pushed to opposite edges. */
.page-home main .plat__prove__inner{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  flex-wrap:wrap;
  max-width:1000px;
}
.page-home main .plat__prove__label{display:flex;align-items:center;gap:12px;flex:none;}
/* Parent-Zenwork-green icon container — same restrained language as the
   entity icon above (pale surface, hairline border, dark-green icon, no
   shadow), not the heavy solid-black tile this used to be. This rail is
   persistent, Zenwork-wide auditability, not a per-product state, so it
   uses the parent brand's green rather than any Verify/Pay/Report color. */
.page-home main .plat__prove__label__ico{
  width:32px;height:32px;border-radius:9px;
  background:var(--g-025);border:1px solid var(--g-200);color:var(--green-ink);
  display:grid;place-items:center;flex:none;
}
.page-home main .plat__prove__label__ico svg{width:15px;height:15px;}
.page-home main .plat__prove__label__body{display:flex;flex-direction:column;line-height:1.25;}
.page-home main .plat__prove__label__body b{
  font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink);
}
.page-home main .plat__prove__label__body span{font-size:12.5px;color:var(--muted);margin-top:2px;}

/* Semantic audit path — reuses the page's own Verify/Pay/Report vocabulary
   instead of an unlabeled progress bar, so the three checkpoints actually
   mean something on sight. Static (no pulse): this rail communicates
   auditability, not live processing, so a moving dot would misrepresent
   what's being shown. flex:none — it sits at its natural content width
   rather than stretching to fill whatever space is left, which is what
   turned the old timeline into a long meaningless line. */
.page-home main .plat__audit{
  display:flex;align-items:center;flex:none;
  list-style:none;margin:0;padding:0;
}
.page-home main .plat__audit li{
  display:flex;align-items:center;gap:7px;
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;
}
.page-home main .plat__audit li + li::before{
  content:"";width:22px;height:1px;
  background:rgba(15,24,34,.14);
  margin:0 12px;
}
.page-home main .plat__audit__dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--green);flex:none;
  box-shadow:0 0 0 3px var(--g-025);
}

/* Mobile */
/* TABLET (700–960px): three equal-width columns, still one horizontal row —
   just narrower per tab than desktop's auto-width + arrow-separator layout. */
@media (min-width:700px) and (max-width:960px){
  .page-home main .plat__stages{grid-template-columns:repeat(3,1fr);gap:8px;max-width:100%;}
  .page-home main .pstage__arrow{display:none;}
  .page-home main .pstage{padding:12px 10px 16px;gap:10px;justify-content:center;}
  .page-home main .pstage__ico{width:36px;height:36px;}
  .page-home main .pstage__ico svg{width:18px;height:18px;}
  .page-home main .pstage__name{font-size:19px;}
  .page-home main .pstage::after{left:14px;right:14px;bottom:8px;}
  .page-home main .plat__body{grid-template-columns:1fr;gap:36px;}
  .page-home main .plat__product{max-width:100%;}
  .page-home main .plat__stage{max-width:100%;justify-self:stretch;}
  .page-home main .visual-stage{padding:22px 14px;}
}
/* MOBILE (<700px): still three horizontal columns — never a vertical stack
   and never a horizontal scroll, and icon + label stay side-by-side within
   each tab (not stacked — a previous pass wrongly stacked them; there's
   enough horizontal room in a 1/3-width column for icon+label inline). */
@media (max-width:699px){
  .page-home main .plat__stages{grid-template-columns:repeat(3,1fr);gap:4px;max-width:100%;padding:0;}
  .page-home main .pstage__arrow{display:none;}
  .page-home main .pstage{
    display:flex;flex-direction:row;align-items:center;justify-content:center;
    padding:0 8px;gap:8px;min-height:44px;
  }
  .page-home main .pstage__ico{width:28px;height:28px;}
  .page-home main .pstage__ico svg{width:15px;height:15px;}
  .page-home main .pstage__name{font-size:15px;}
  .page-home main .pstage::after{left:8px;right:8px;bottom:2px;}
  .page-home main .plat__body{grid-template-columns:1fr;gap:36px;}
  .page-home main .plat__product{max-width:100%;}
  .page-home main .plat__stage{max-width:100%;justify-self:stretch;}
  .page-home main .visual-stage{padding:22px 14px;}
  .page-home main .plat__prove__inner{flex-direction:column;align-items:center;text-align:center;gap:16px;}
  .page-home main .plat__audit{flex-wrap:wrap;justify-content:center;}
}

/* ============================================================
   AI — real task interaction
   ============================================================ */
.page-home main #ai{position:relative;overflow:hidden;}
.page-home main .ai__glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 55% at 65% 28%, rgba(242,228,0,.10), transparent 70%),
    radial-gradient(40% 58% at 71% 80%, rgba(0,171,82,.08), transparent 72%);
  animation:heroGlowPulse 10s ease-in-out infinite;
}
.page-home main .ai__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,3vw,40px);align-items:center;}
.page-home main .ai__points{margin-top:30px;display:grid;gap:16px;}
.page-home main .ai__point{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;}
.page-home main .ai__point .tk{width:23px;height:23px;border-radius:50%;background:rgba(0,171,82,.1);color:var(--green-ink);display:grid;place-items:center;flex:none;margin-top:2px;}
.page-home main .ai__point .tk svg{width:12px;height:12px;stroke-width:2.4;}
.page-home main .ai__point p{font-size:15.5px;color:var(--muted);line-height:1.5;}
.page-home main .ai__point b{color:var(--ink);font-weight:700;}
/* Zenwork AI — product animation. The clip has its own white card design baked in,
   so the frame stays neutral and only supplies sizing, rounding, and a resting shadow.
   The <video> below now carries a poster — an actual frame extracted from this same
   clip (the AI Copilot's opening state), not a decorative placeholder — so there is
   never a blank/empty card before playback starts, autoplay is blocked, or under
   prefers-reduced-motion (where the video never plays at all and the poster is the
   permanent resting state). object-fit:cover applies to the poster the same as the
   video frames, so geometry and crop match exactly and nothing shifts on play.
   .aivideo__stage carries the shared .visual-stage treatment (same recipe as Three
   Engines' .plat__stage) so the two sections read as one presentation system rather
   than two separate experiments — restrained tri-tone wash, hairline border, inset
   highlight, nothing louder. .aivideo itself stays a plain sizing box inside it: the
   .aivideo__frame below already supplies the product's own white surface, border and
   shadow, so the stage frames it without adding a second competing card. A deliberate
   width ceiling keeps the product demo at a size comparable to the editorial column
   instead of simply filling the grid track — at 7:8, an unbounded width was creating
   a very tall visual that dominated the section and controlled its height.
   justify-self:end keeps the whole stage anchored to the track's right edge. */
.page-home main .aivideo{
  position:relative;
  width:100%;
}
.page-home main .aivideo__stage{width:100%;}
@media (min-width:901px){
  .page-home main .aivideo__stage{
    /* ~480px through 1440-ish, easing up to ~530px at 1920 (inner visual width;
       the stage's own padding adds a further ~56-72px of quiet framing around
       it) — substantial product proof alongside the editorial column now
       that the grid is 1.1fr/.9fr. A dedicated wide-desktop override below
       carries this further at 1600-1920px specifically. */
    max-width:calc(clamp(480px, calc(300px + 12vw), 540px) + clamp(28px,2.5vw,36px) * 2);
    justify-self:end;
  }
}
.page-home main .aivideo__frame{
  position:relative;z-index:1;border-radius:var(--r-md);overflow:hidden;
  background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--shadow);
  aspect-ratio:7/8;
  width:100%;
}
.page-home main .aivideo__frame video{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:900px){
  .page-home main .ai__grid{grid-template-columns:1fr;}
  .page-home main .aivideo__stage{margin-left:auto;margin-right:auto;}
}
/* WIDE DESKTOP (1600-1920px) — continuous with the base formula's value at
   1600px (492px inner width), easing up to 580px by 1920px so the product
   visual stays substantial alongside the now-larger 1.1fr editorial column,
   without ballooning into an oversized dashboard. */
@media (min-width:1600px){
  .page-home main .aivideo__stage{
    max-width:calc(clamp(492px, calc(52px + 27.5vw), 580px) + clamp(28px,2.5vw,36px) * 2);
  }
}

/* ============================================================
   STAKES — page-level dark scroll transformation (the ONE dark section)
   ============================================================ */
/* Premium atmospheric gradient — Dark Green base with a Green glow easing in
   from the upper-left and a faint Lime wash in the opposite corner, so the
   section reads as depth rather than a flat fill. */
.page-home main .stakes{
  background:
    radial-gradient(58% 50% at 18% 12%,rgba(0,171,82,.22),transparent 64%),
    radial-gradient(52% 55% at 88% 88%,rgba(172,212,0,.09),transparent 66%),
    linear-gradient(165deg,#0e4023 0%,var(--green-deep) 46%,#081f13 100%);
  color:var(--on-dark);position:relative;
}
/* soft bleeds that dissolve the section into the pages above and below - makes it feel like the page transforming */
.page-home main .stakes::before,.page-home main .stakes::after{content:"";position:absolute;left:0;right:0;height:180px;z-index:4;pointer-events:none;}
.page-home main .stakes::before{top:0;background:linear-gradient(to bottom,var(--paper) 0%,rgba(12,51,30,0) 100%);opacity:0.28;}
.page-home main .stakes::after{bottom:0;background:linear-gradient(to top,var(--paper) 0%,rgba(12,51,30,0) 100%);opacity:0.28;}
.page-home main .stakes__track{position:relative;}
.page-home main .stakes__sticky{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:56px;padding:80px 0;overflow:hidden;}
.page-home main .stakes__head{text-align:center;margin:0;position:relative;z-index:5;}
.page-home main .stakes__head .eyebrow{color:var(--lime);margin-bottom:20px;}
.page-home main .stakes__phase{position:relative;min-height:112px;}
.page-home main .stakes__t{position:absolute;left:0;right:0;top:0;font-family:var(--serif);font-size:clamp(28px,3.6vw,46px);line-height:1.08;letter-spacing:-0.02em;color:#fff;opacity:0;transform:translateY(12px);transition:opacity 600ms var(--ease),transform 600ms var(--ease);}
.page-home main .stakes__t.on{opacity:1;transform:none;}
.page-home main .stakes__sub{margin:22px auto 0;color:var(--on-dark-muted);font-size:16px;line-height:1.6;opacity:0;transition:opacity 500ms var(--ease);}
.page-home main .stakes__sub.on{opacity:1;}
.page-home main .stakes__field{position:absolute;inset:0;z-index:1;pointer-events:none;}
.page-home main .frag{position:absolute;background:rgba(255,255,255,.055);border:1px solid var(--on-dark-line);border-radius:11px;padding:11px 14px;font-size:12.5px;font-weight:600;color:var(--on-dark);white-space:nowrap;transition:all 300ms linear;box-shadow:0 12px 30px -14px rgba(0,0,0,.6);}
.page-home main .frag .fl{display:block;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:3px;}
.page-home main .stakes__ribbon{position:relative;z-index:3;display:flex;align-items:center;gap:0;opacity:0;transform:translateY(14px) scale(.96);transition:opacity 700ms var(--ease),transform 700ms var(--ease);pointer-events:none;width:min(560px,84vw);}
.page-home main .stakes.done .stakes__ribbon{opacity:1;transform:none;}
.page-home main .sribbon__step{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;}
.page-home main .sribbon__dot{width:14px;height:14px;border-radius:50%;background:var(--lime);position:relative;z-index:2;box-shadow:0 0 0 5px rgba(172,212,0,.15);}
.page-home main .sribbon__line{position:absolute;top:7px;left:50%;width:100%;height:2px;background:var(--lime);z-index:1;}
.page-home main .sribbon__step:last-child .sribbon__line{display:none;}
.page-home main .sribbon__l{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;}

/* ============================================================
   INDUSTRIES — horizontal nav + large product canvas + contextual proof
   ============================================================ */
/* Platform → Industries is a continuation of the same story (the platform,
   then the platform per-industry), not two independent topics — tighten
   this specific transition rather than using the default section gap. */
.page-home main #platform{padding-bottom:clamp(56px,min(5vw,7.5vh),80px);}
.page-home main #industries{padding-top:clamp(56px,min(5vw,7.5vh),80px);}
/* Industries — same quiet atmospheric technique as Scale (radial washes over
   --mist, no shapes), lime-led instead of green-led so the two moments feel
   related but not identical. Breaks up the long run of plain-white sections
   between the hero and the dark Testimonials break. The .ind__canvas card
   keeps its own white background/shadow and sits unchanged on top. */
.page-home main #industries{position:relative;overflow:hidden;background:var(--mist);}
.page-home main #industries::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(55% 60% at 96% 4%, rgba(172,212,0,.09), transparent 68%),
    radial-gradient(60% 55% at 4% 98%, rgba(0,171,82,.06), transparent 70%);
}
.page-home main #industries > .wrap{position:relative;z-index:1;}
.page-home main .ind__tabs{display:flex;flex-wrap:wrap;gap:8px 10px;margin-bottom:clamp(28px,3vw,36px);border-bottom:1px solid var(--line);padding-bottom:24px;}

/* Task 07: native select replaces the 11-pill tablist on tablet/mobile —
   same industries data, same renderInd(), just a different control. Hidden
   on desktop; .ind__tabs is hidden in the tablet/mobile media query below. */
.page-home main .ind__select-wrap{display:none;position:relative;margin-bottom:clamp(28px,3.2vw,36px);}
.page-home main .ind__select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:100%;height:52px;
  padding:0 44px 0 18px;
  border:1px solid var(--line-2);border-radius:var(--r-md);
  background:#fff;
  font-family:inherit;font-size:16px;font-weight:600;color:var(--ink);
  cursor:pointer;
}
.page-home main .ind__select:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.page-home main .ind__select-chevron{position:absolute;right:18px;top:50%;width:12px;height:12px;transform:translateY(-50%);color:var(--muted-2);pointer-events:none;}

.page-home main .ind__canvas{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:#fff;}
/* ---- one shared desktop canvas height for every industry state — derived
   from the tallest actual industry content (CPA/Accounting, the longest
   description+proof pairing, tops out well under this), not guessed. Using
   one token means switching industries can never move the page content
   below the section, and both halves (copy + photo) always stay equal
   height because grid items stretch to the row height by default. ---- */
@media (min-width:961px){
  .page-home main{--industry-canvas-height:clamp(405px, calc(405px + (100vw - 1280px) / 8), 445px);}
  .page-home main .ind__canvas{min-height:var(--industry-canvas-height);}
}
.page-home main .ind__left{padding:clamp(36px,3vw,48px);display:flex;flex-direction:column;position:relative;overflow:hidden;}
.page-home main .ind__left::before{
  content:"";
  position:absolute;top:-12%;left:-10%;
  width:44%;height:48%;
  z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(242,228,0,.15),transparent 72%);
  filter:blur(48px);
}
.page-home main .ind__leftinner{position:relative;z-index:1;opacity:0;transform:translateY(12px);transition:opacity 460ms var(--ease),transform 460ms var(--ease);display:flex;flex-direction:column;flex:1;justify-content:center;}
.page-home main .ind__leftinner.in{opacity:1;transform:none;}
.page-home main .ind__tag{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-ink);margin-bottom:16px;}
.page-home main .ind__ph{font-family:var(--serif);font-size:clamp(26px,2.6vw,36px);line-height:1.12;letter-spacing:-0.015em;margin-bottom:18px;width:100%;max-width:none;text-wrap:balance;}
.page-home main .ind__pdesc{color:var(--muted);font-size:16.5px;line-height:1.62;width:100%;max-width:none;text-wrap:pretty;}
.page-home main .ind__link{margin-top:24px;align-self:flex-start;}
/* contextual customer proof, lives inside the left panel */
.page-home main .ind__proof{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);}
.page-home main .ind__proof .metric{font-family:var(--serif);font-size:clamp(24px,2.4vw,32px);letter-spacing:-0.015em;color:var(--ink);line-height:1.1;margin-bottom:10px;}
.page-home main .ind__proof p{font-size:14px;color:var(--muted);line-height:1.55;margin-bottom:14px;width:100%;max-width:none;text-wrap:pretty;}
.page-home main .ind__proof cite{font-style:normal;font-size:12.5px;color:var(--muted-2);display:flex;align-items:center;gap:9px;}
.page-home main .ind__proof cite .who{width:30px;height:30px;border-radius:50%;background:var(--paper-2);border:1px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--muted);flex:none;}
.page-home main .ind__proof cite b{color:var(--ink);font-weight:700;display:block;}
/* right: product/workflow canvas that changes per industry */
.page-home main .ind__right{background:var(--paper-2);border-left:1px solid var(--line);padding:0;position:relative;display:flex;flex-direction:column;min-height:0;overflow:hidden;}
.page-home main .ind__vis{opacity:0;transform:translateY(12px);transition:opacity 500ms var(--ease) 80ms,transform 500ms var(--ease) 80ms;flex:1;display:flex;}
.page-home main .ind__vis.in{opacity:1;transform:none;}
/* Real, human-centered photography per industry with a premium gradient scrim */
.page-home main .ind__photo{
  position:relative;flex:1;min-height:0;
  background-size:cover;background-position:center;background-color:var(--ink);
  display:flex;align-items:flex-end;
}
.page-home main .ind__photo__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,20,15,0) 35%,rgba(9,15,12,0.55) 78%,rgba(6,10,8,0.82) 100%);
}
.page-home main .ind__photo__cap{position:relative;z-index:2;padding:26px 28px;width:100%;}
/* The operational flow, not a list of form codes: this is how Zenwork handles
   THIS industry's specific work — input, what Zenwork does, the outcome. */
.page-home main .ind__flow{display:flex;flex-wrap:wrap;align-items:center;gap:7px;}
.page-home main .ind__flow__step{
  font-size:11.5px;font-weight:700;color:#fff;white-space:nowrap;
  background:rgba(255,255,255,.16);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.28);
  padding:5px 10px;border-radius:6px;
}
.page-home main .ind__flow__arrow{color:rgba(255,255,255,.58);flex:none;display:flex;align-items:center;}
.page-home main .ind__flow__arrow svg{width:12px;height:12px;}

/* Placeholder industry state — deliberately unfinished-looking until real content lands */
.page-home main .ind__soon{
  display:inline-flex;align-items:center;gap:6px;margin-left:10px;
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-2);background:var(--paper-2);border:1px dashed var(--line-2);
  padding:4px 9px;border-radius:20px;vertical-align:middle;
}
.page-home main .ind__placeholder{
  position:relative;width:100%;height:100%;min-height:200px;flex:1;
  background:var(--paper-2);
  background-image:radial-gradient(circle at 1.5px 1.5px,rgba(15,24,34,0.06) 1.5px,transparent 0);
  background-size:20px 20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  border:1.5px dashed var(--line-2);box-sizing:border-box;
}
.page-home main .ind__placeholder__ic{width:46px;height:46px;border-radius:13px;background:#fff;border:1.5px dashed var(--line-2);display:grid;place-items:center;color:var(--muted-2);flex:none;}
.page-home main .ind__placeholder__ic svg{width:19px;height:19px;}
.page-home main .ind__placeholder__label{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2);}
.page-home main .ind__placeholder__sub{font-size:13px;color:var(--muted-2);text-align:center;max-width:26ch;line-height:1.5;padding:0 24px;}
/* lifecycle strip below the canvas card */
.page-home main .ind__lifecycle{margin-top:22px;display:flex;align-items:center;gap:0;}
.page-home main .ind__lc{flex:1;text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);position:relative;padding:0 4px;}
.page-home main .ind__lc::after{content:"";position:absolute;right:-2px;top:50%;width:10px;height:1.5px;background:var(--line-2);transform:translateY(-50%);}
.page-home main .ind__lc:last-child::after{display:none;}
.page-home main .ind__lc.hot{color:#8a7a00;}
.page-home main .ind__lc.hot::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--yellow);margin-right:5px;vertical-align:middle;}

/* Task 07/08 — tablet/mobile: select replaces the pill tablist, canvas
   stacks to one column, and .ind__right gets an explicit height (without
   one, its flex:1 chain — .ind__right > .ind__vis > .ind__photo — has
   nothing to fill once the canvas loses its desktop min-height, so the
   photo collapses to just its caption bar). Placed after the base .ind__
   rules above so it actually wins the cascade at equal specificity. */
@media (max-width:960px){
  .page-home main .ind__tabs{display:none;}
  .page-home main .ind__select-wrap{display:block;}
  .page-home main .ind__canvas{grid-template-columns:1fr;}
  .page-home main .ind__right{border-left:0;border-top:1px solid var(--line);min-height:330px;}
}
@media (max-width:699px){
  .page-home main .ind__right{min-height:clamp(230px,55vw,300px);}
}

/* ============================================================
   STORIES — editorial customer proof. Minimal, human, premium.
   ============================================================ */
.page-home main .stories{position:relative;max-width:none;}

/* ---- proof section: dark green canvas, a deliberate immersive break in the page ---- */
.page-home main .proof-dark{
  position:relative;overflow:hidden;
  background:
    radial-gradient(50% 55% at 8% 105%, rgba(172,212,0,.10), transparent 68%),
    radial-gradient(120% 90% at 50% -10%, #0e5c33 0%, var(--green-deep) 55%, #071a10 100%);
}
.page-home main .proof-dark::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,0.10) 1.5px,transparent 0);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(65% 70% at 50% 30%,#000 10%,rgba(0,0,0,0.3) 55%,transparent 88%);
  mask-image:radial-gradient(65% 70% at 50% 30%,#000 10%,rgba(0,0,0,0.3) 55%,transparent 88%);
}
.page-home main .proof-dark .wrap{position:relative;z-index:1;}
.page-home main .proof-dark .shead .h2{color:#fff;}
.page-home main .proof-dark .stories__frame{box-shadow:0 40px 80px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.09);}
.page-home main .proof-dark .stories__arrow{background:rgba(15,24,20,.55);backdrop-filter:blur(8px);border-color:rgba(255,255,255,.26);color:rgba(255,255,255,.85);}
.page-home main .proof-dark .stories__arrow:hover{border-color:var(--lime);color:var(--lime);}
.page-home main .proof-dark .stories__counter{color:rgba(255,255,255,.55);}
.page-home main .proof-dark .stories__counter b{color:#fff;}
.page-home main .proof-dark .stories__cta{color:var(--lime);}
.page-home main .proof-dark .stories__foot-divider{background:rgba(255,255,255,.18);}

/* ---- desktop: three-up peek carousel — dimmed neighbors pushed out to the
   section's own left/right edges (same bounds .shead/.wrap use elsewhere on
   this page), center card floating in the middle, rather than the whole
   cluster huddled in the page's horizontal center. ---- */
@media (min-width:901px){
  .page-home main .stories__row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;}
  .page-home main .stories__center{position:relative;flex:1 1 480px;max-width:920px;margin:0 auto;z-index:3;}
  .page-home main .stories__peek{
    position:relative;flex:0 0 auto;width:clamp(180px,17vw,260px);align-self:center;aspect-ratio:3/4.05;
    border:0;padding:0;cursor:pointer;border-radius:var(--r-lg);overflow:hidden;
    background:var(--ink);box-shadow:0 18px 44px -18px rgba(0,0,0,.55);
    opacity:.5;transform:scale(.94);z-index:1;
    transition:opacity 320ms var(--ease),transform 320ms var(--ease);
  }
  .page-home main .stories__peek:hover{opacity:.82;transform:scale(.97);}
  .page-home main .stories__peek:focus-visible{outline:2px solid var(--lime);outline-offset:3px;opacity:.9;}
  .page-home main .stories__peek-media{position:absolute;inset:0;background-size:cover;background-position:center 22%;}
  .page-home main .stories__peek-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,8,.25) 0%,rgba(6,10,8,.35) 45%,rgba(4,8,6,.88) 100%);}
  .page-home main .stories__peek-id{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;align-items:center;gap:9px;padding:16px;text-align:left;}
  .page-home main .stories__peek-avatar{width:30px;height:30px;border-radius:50%;flex:none;object-fit:cover;border:1.5px solid rgba(255,255,255,.5);background:var(--paper-2);}
  .page-home main .stories__peek-idtext{display:flex;flex-direction:column;gap:1px;min-width:0;}
  .page-home main .stories__peek-idtext b{display:block;color:#fff;font-weight:700;font-size:12.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .page-home main .stories__peek-idtext span{display:block;font-size:11px;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .page-home main .stories__peek.is-fading{opacity:0;}

  .page-home main .stories__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;}
  .page-home main .stories__arrow--prev{left:-17px;}
  .page-home main .stories__arrow--next{right:-17px;}
}
@media (min-width:1300px){
  .page-home main .stories__peek{width:clamp(220px,15vw,300px);}
}

/* ---- one dominant frame: the person and the video ARE the section ---- */
.page-home main .stories__frame{
  position:relative;width:100%;aspect-ratio:16/10;max-height:min(560px,60vh);
  border-radius:var(--r-lg);overflow:hidden;background:var(--ink);box-shadow:var(--shadow-lift);
  transition:opacity 280ms var(--ease);
}
.page-home main .stories__frame.is-fading{opacity:0;}
.page-home main .stories__poster{position:absolute;inset:0;background-size:cover;background-position:center 22%;transition:transform 6s var(--ease);}
.page-home main .stories__frame:hover .stories__poster{transform:scale(1.03);}
.page-home main .stories__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,15,12,0.03) 0%,rgba(9,15,12,0.05) 38%,rgba(6,10,8,0.74) 100%);}
.page-home main .stories__playbtn{
  position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;z-index:2;
}
.page-home main .stories__playbtn:focus-visible{outline:none;}
.page-home main .stories__playbtn:focus-visible .stories__playring{outline:2px solid var(--green);outline-offset:3px;}
.page-home main .stories__playring{
  width:66px;height:66px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.94);box-shadow:0 8px 28px -8px rgba(0,0,0,.5);
  transition:transform 260ms var(--ease),box-shadow 260ms var(--ease);
}
.page-home main .stories__playbtn:hover .stories__playring{transform:scale(1.07);box-shadow:0 10px 32px -8px rgba(0,0,0,.55);}
.page-home main .stories__playring svg{width:19px;height:19px;margin-left:2px;color:var(--ink);}
.page-home main .stories__viddur{
  position:absolute;right:16px;top:16px;z-index:2;
  background:rgba(9,15,12,.5);backdrop-filter:blur(6px);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.02em;padding:4px 10px;border-radius:999px;
  font-variant-numeric:tabular-nums;pointer-events:none;
}
.page-home main .stories__frame video,.page-home main .stories__frame iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:3;border-radius:inherit;border:0;}
.page-home main .stories__frame.is-playing .stories__scrim,
.page-home main .stories__frame.is-playing .stories__viddur,
.page-home main .stories__frame.is-playing .stories__panel{display:none;}

/* ---- quote + identity, overlaid over the scrim at the base of the frame ---- */
.page-home main .stories__panel{
  position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  padding:clamp(26px,4.4vw,52px) clamp(24px,4.4vw,52px) clamp(24px,3vw,34px);
  display:flex;flex-direction:column;
}
.page-home main .stories__quote{
  font-family:var(--serif);font-size:clamp(21px,2.9vw,31px);font-style:italic;
  line-height:1.22;letter-spacing:-0.01em;color:#fff;
  margin-bottom:clamp(16px,2.2vw,22px);
  transition:opacity 280ms var(--ease),transform 280ms var(--ease);
}
.page-home main .stories__id{
  display:flex;align-items:center;gap:12px;
  transition:opacity 280ms var(--ease),transform 280ms var(--ease);
}
.page-home main .stories__avatar{
  width:42px;height:42px;border-radius:50%;flex:none;object-fit:cover;
  border:1.5px solid rgba(255,255,255,.55);
  background:var(--paper-2);
}
.page-home main .stories__idtext{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;}
.page-home main .stories__idtext b{display:block;color:#fff;font-weight:700;font-size:14.5px;line-height:1.25;}
.page-home main .stories__idtext span{font-size:12.5px;color:rgba(255,255,255,.74);}
.page-home main .stories__panel.is-fading .stories__quote,
.page-home main .stories__panel.is-fading .stories__id{opacity:0;transform:translateY(6px);}

/* ---- controls: a quiet counter + CTA pairing below the row; arrows live on the frame itself on desktop ---- */
.page-home main .stories__foot{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px;}
.page-home main .stories__foot-divider{width:1px;height:14px;background:var(--line-2);flex:none;}
.page-home main .stories__arrow{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:#fff;flex:none;
  display:grid;place-items:center;color:var(--muted);box-shadow:var(--shadow);
  transition:border-color 200ms var(--ease),color 200ms var(--ease),transform 200ms var(--ease);
}
.page-home main .stories__arrow:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-50%) scale(1.06);}
.page-home main .stories__arrow:focus-visible{outline-offset:2px;}
.page-home main .stories__arrow svg{width:13px;height:13px;}
.page-home main .stories__counter{
  font-size:13px;font-weight:600;color:var(--muted-2);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
  text-align:center;user-select:none;
}
.page-home main .stories__counter b{color:var(--ink);font-weight:700;}
/* Desktop default: the nav-row duplicate counter stays hidden here (must
   precede the tablet/mobile override below — same-specificity rules follow
   source order regardless of media query). */
.page-home main .stories__counter--nav{display:none;}
.page-home main .stories__cta{
  font-size:13.5px;font-weight:600;color:var(--green-ink);white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
  transition:gap 200ms var(--ease);
}
.page-home main .stories__cta:hover{gap:9px;}
.page-home main .stories__cta svg{width:12px;height:12px;}

/* ---- below 901px: no peek layout — one navigation row (arrows flank a
   counter) directly under the frame; CTA below that. Task 09: the desktop
   foot's counter+divider are hidden here (the nav-row counter replaces
   them) rather than showing the same number twice. ---- */
@media (max-width:900px){
  .page-home main .stories{max-width:900px;margin:0 auto;}
  .page-home main .stories__peek{display:none;}
  .page-home main .stories__row{display:block;}
  .page-home main .stories__center{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;}
  .page-home main .stories__frame{flex-basis:100%;}
  .page-home main .stories__arrow{position:static;transform:none;flex:none;width:44px;height:44px;}
  .page-home main .stories__arrow:hover{transform:scale(1.06);}
  .page-home main .stories__counter--nav{display:flex;min-width:3.4em;justify-content:center;}
  .page-home main .stories__foot{margin-top:16px;}
  .page-home main .stories__foot .stories__counter:not(.stories__counter--nav),
  .page-home main .stories__foot .stories__foot-divider{display:none;}
}
/* Tablet only: wider, more cinematic frame closer to desktop's proportions
   instead of the tall mobile portrait crop. */
@media (min-width:700px) and (max-width:900px){
  .page-home main .stories__frame{aspect-ratio:16/10;max-height:60vh;}
}
/* Mobile only: keep the portrait 4:5 — appropriate here, not shared with tablet. */
@media (max-width:699px){
  .page-home main .stories__frame{aspect-ratio:4/5;max-height:64vh;}
}
/* Task 11: explicit high-contrast focus ring — this is a dark-green section,
   so a default/inherited outline color can't be assumed to read clearly. */
.page-home main .stories__arrow:focus-visible{outline:2px solid var(--lime);outline-offset:2px;}


/* ============================================================
   SCALE — editorial data, one hero number + supporting metrics
   ============================================================ */
.page-home main .scale__grid{display:grid;grid-template-columns:1.15fr 1px 1fr;gap:clamp(40px,5vw,72px);align-items:center;margin-top:clamp(32px,5vw,72px);}
/* Scale section — atmospheric pale-green field replaces the flat .alt tone.
   Two soft, static radial washes (green + lime) over --mist; no shapes, no
   cards — just enough atmosphere to separate this data moment from the
   plain-white sections around it. Content sits in a z-indexed layer above. */
.page-home main #scale{position:relative;overflow:hidden;background:var(--mist);}
.page-home main #scale::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 62% at 8% 6%, rgba(0,171,82,.07), transparent 68%),
    radial-gradient(52% 58% at 94% 96%, rgba(172,212,0,.09), transparent 70%),
    radial-gradient(70% 50% at 50% 100%, rgba(0,171,82,.04), transparent 72%);
}
.page-home main #scale > .wrap{position:relative;z-index:1;}
.page-home main .scale__hero{position:relative;}
.page-home main .scale__hero::before{
  content:"";position:absolute;top:-20%;left:-10%;width:62%;height:78%;
  z-index:0;pointer-events:none;
  background:radial-gradient(ellipse,rgba(242,228,0,.17),transparent 70%);
  filter:blur(52px);
}
.page-home main .scale__hero .snum,.page-home main .scale__hero .slabel{position:relative;z-index:1;}
.page-home main .scale__hero .snum{font-family:var(--serif);font-size:clamp(84px,11vw,168px);line-height:0.9;letter-spacing:-0.04em;color:var(--ink);}
.page-home main .scale__hero .slabel{margin-top:20px;font-size:16px;color:var(--muted);line-height:1.5;}
.page-home main .scale__divider{background:var(--line);height:100%;align-self:stretch;min-height:180px;}
.page-home main .scale__side{display:grid;grid-template-columns:1fr 1fr;gap:36px 32px;}
.page-home main .scale__side .item{padding-top:0;}
.page-home main .scale__side .item .snum{font-family:var(--serif);font-size:clamp(38px,4vw,52px);line-height:0.95;letter-spacing:-0.02em;color:var(--ink);}
.page-home main .scale__side .item .slabel{margin-top:12px;font-size:13.5px;color:var(--muted);line-height:1.48;}
/* Uptime status UI removed — the metric now stands alone with no secondary operational badge. */
@media (max-width:960px){
  .page-home main .scale__grid{grid-template-columns:1fr;gap:36px;}
  .page-home main .scale__divider{display:none;}
}

.page-home main .scale__foot{margin-top:clamp(64px,7.5vw,96px);padding-top:44px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:32px;}
.page-home main .scale__foot .sf-badge{height:64px;width:auto;display:block;object-fit:contain;}
.page-home main .scale__foot .sf-badge--wide{height:64px;}
.page-home main .scale__foot .sf{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--muted);font-weight:500;}
.page-home main .scale__foot .sf b{font-family:var(--serif);font-size:20px;color:var(--ink);font-weight:400;letter-spacing:-0.01em;}
.page-home main .scale__foot .divider{width:1px;height:22px;background:var(--line);}

/* ============================================================
   INTEGRATIONS / API / MCP — three product-capability cards,
   built as one cohesive system rather than three unrelated blocks
   ============================================================ */
/* Section environment first, product visuals second — same restrained
   atmospheric technique as Industries/Scale (soft radial washes, no
   shapes), so the section stops reading flat/white next to its
   richer neighbors. Cards keep their own white surface/shadow and
   sit unchanged on top; nothing is added to the individual cards. */
.page-home main #fits{position:relative;overflow:hidden;background:var(--mist);}
.page-home main #fits::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 62% at 22% 54%, rgba(0,129,74,.075), transparent 46%),
    radial-gradient(52% 56% at 84% 38%, rgba(242,228,0,.055), transparent 42%);
}
.page-home main #fits > .wrap{position:relative;z-index:1;}
.page-home main .fitsgrid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:18px;
}
.page-home main .fitcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,32px);position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
}
.page-home main .fitcard::before{
  /* faint ambient brand-color bleed in the corner — restrained, adds richness without noise */
  content:"";position:absolute;top:-70px;right:-70px;width:220px;height:220px;z-index:0;
  background:radial-gradient(circle,rgba(0,171,82,.09),transparent 70%);
  pointer-events:none;
}
.page-home main .fitcard>*{position:relative;z-index:1;}
.page-home main .fitcard__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;}
.page-home main .fitcard__ico{width:42px;height:42px;border-radius:11px;background:rgba(0,171,82,0.08);color:var(--green-ink);display:grid;place-items:center;flex:none;}
.page-home main .fitcard__ico svg{width:20px;height:20px;}
.page-home main .fitcard__ico--code{background:var(--ink);color:#c9e6d3;font-family:'SF Mono','Monaco','Consolas',monospace;font-size:14px;font-weight:600;letter-spacing:-0.02em;}
.page-home main .fitcard h4{font-family:var(--serif);font-size:clamp(19px,1.8vw,23px);font-weight:400;letter-spacing:-0.01em;line-height:1.15;margin:0 0 6px;}
.page-home main .fitcard p{font-size:13.5px;color:var(--muted);line-height:1.55;}

/* Card 1 — Integrations: a curated ecosystem field. Zenwork sits at the literal center;
   every connected system is placed around it at a hand-set position, not in rows —
   the composition reads as "things gathered around Zenwork," not "things listed near it."
   Depth is built from a lit-stage background, layered elevation shadows, a glass sheen on
   every tile, and a soft ground shadow under the hub — not just more icons. */
.page-home main .fitcard--integrations{grid-column:1;grid-row:1 / span 2;}
.page-home main .ecofield{
  position:relative;flex:1;min-height:340px;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:radial-gradient(120% 90% at 50% 8%,#fcfdfc 0%,var(--paper-2) 52%,#eef1ee 100%);
  overflow:hidden;width:100%;
  box-shadow:inset 0 0 70px -8px rgba(15,24,34,.08);
}
.page-home main .ecofield::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 1.5px 1.5px,rgba(15,24,34,0.085) 1.5px,transparent 0);
  background-size:20px 20px;
  -webkit-mask-image:radial-gradient(72% 72% at 50% 50%,#000 38%,transparent 92%);
  mask-image:radial-gradient(72% 72% at 50% 50%,#000 38%,transparent 92%);
  pointer-events:none;
}
.page-home main .ecofield::after{
  content:"";position:absolute;top:50%;left:50%;width:78%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(0,171,82,.16) 0%,rgba(0,171,82,.07) 38%,transparent 70%);
}

/* -- shared tile language: every logo sits in the same kind of object, placed absolutely --
   elevation reads through a layered shadow stack (contact + ambient) rather than one flat shadow,
   and a faint top-lit sheen suggests each tile is a small glass/lacquer object, not a flat swatch. */
.page-home main .itile{
  position:absolute;top:0;left:0;z-index:1;
  background:#fff;border:1px solid rgba(15,24,34,.07);border-radius:11px;
  box-shadow:
    0 1px 1px rgba(15,24,34,.05),
    0 5px 10px -5px rgba(15,24,34,.09),
    0 16px 28px -16px rgba(15,24,34,.12);
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  transform:translate(-50%,-50%);
  transition:transform 560ms var(--ease),box-shadow 560ms var(--ease),border-color 560ms var(--ease);
}
.page-home main .itile::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0) 40%);
  pointer-events:none;
}
.page-home main .itile img,.page-home main .itile svg{width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:0;}
/* optical footprints, chosen per logo's native aspect ratio — same padding logic throughout:
   icon marks read denser (less padding); wordmarks get more room to breathe (more padding). */
.page-home main .itile--icon{width:50px;height:50px;padding:12px;}
.page-home main .itile--icon.itile--lg{width:58px;height:58px;padding:13px;}
.page-home main .itile--icon.itile--sm{width:42px;height:42px;padding:10px;}
.page-home main .itile--word-sm{width:96px;height:44px;padding:9px 14px;}
.page-home main .itile--word-md{width:128px;height:48px;padding:8px 16px;}
.page-home main .itile--word-lg{width:176px;height:44px;padding:7px 18px;}
.page-home main .itile--word-xl{width:230px;height:36px;padding:6px 18px;}

/* the ecosystem's one deliberate object — Zenwork, dead center, not just another tile.
   A soft ground shadow beneath it reads as "this is elevated, casting light and shadow on
   everything around it" — reinforcing that the whole field runs through Zenwork. */
.page-home main .ecohub{
  position:absolute;top:50%;left:50%;z-index:3;
  width:60px;height:60px;border-radius:16px;
  background:#fff;border:1px solid rgba(15,24,34,.06);
  display:grid;place-items:center;
  box-shadow:
    0 2px 4px rgba(0,80,40,.14),
    0 10px 18px -6px rgba(0,171,82,.22),
    0 26px 44px -14px rgba(0,171,82,.26);
  transform:translate(-50%,-50%);
  transition:transform 560ms var(--ease),box-shadow 560ms var(--ease);
}
.page-home main .ecohub::after{
  content:"";position:absolute;top:100%;left:50%;width:64%;height:16px;margin-top:4px;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse,rgba(0,60,30,.28),transparent 72%);
  filter:blur(2px);
}
.page-home main .ecohub img{width:32px;height:32px;object-fit:contain;display:block;position:relative;z-index:1;}
.page-home main .ecohub__ring{position:absolute;inset:-8px;border-radius:21px;border:1px solid rgba(0,171,82,.22);animation:ecopulse 3.2s ease-out infinite;}
@keyframes ecopulse{0%{transform:scale(.94);opacity:.85;}100%{transform:scale(1.16);opacity:0;}}
@media (prefers-reduced-motion:reduce){.page-home main .ecohub__ring{animation:none;display:none;}}

/* editorial spotlight — one tile comes into gentle focus at a time, tiny movement, then releases */
.page-home main .itile.spot{
  transform:translate(-50%,-50%) translateY(-4px);
  box-shadow:
    0 2px 3px rgba(15,24,34,.05),
    0 9px 16px -7px rgba(15,24,34,.10),
    0 24px 38px -18px rgba(0,171,82,.28);
  border-color:rgba(0,171,82,.26);
  z-index:2;
}

.page-home main .ecofield__conn{position:absolute;top:0;left:0;color:var(--line-2);width:11px;height:11px;opacity:.55;transform:translate(-50%,-50%);}

/* Card 2 — API: a minimal Request → Zenwork → Response flow, no code block */
.page-home main .apiflow{display:flex;align-items:flex-start;justify-content:space-between;margin:auto 0;padding:6px 0;}
.page-home main .apiflow__node{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;width:25%;}
.page-home main .apiflow__ic{width:38px;height:38px;border-radius:10px;background:var(--paper-2);border:1px solid var(--line);color:var(--muted);display:grid;place-items:center;}
.page-home main .apiflow__ic svg{width:17px;height:17px;}
.page-home main .apiflow__ic img{width:17px;height:17px;object-fit:contain;display:block;}
.page-home main .apiflow__node--hub .apiflow__ic{background:#fff;border-color:rgba(15,24,34,.06);box-shadow:0 10px 20px -10px rgba(0,171,82,.38);}
.page-home main .apiflow__node--hub .apiflow__ic img{width:20px;height:20px;}
.page-home main .apiflow__lbl{font-size:11.5px;font-weight:700;color:var(--ink);}
.page-home main .apiflow__sub{font-size:10px;color:var(--muted-2);font-variant-numeric:tabular-nums;white-space:nowrap;}
.page-home main .apiflow__arrow{color:var(--line-2);flex:none;margin-top:9px;}
.page-home main .apiflow__arrow svg{width:16px;height:16px;}

/* Card 3 — MCP: static dark agent workspace — a task + an execution checklist */
.page-home main .agentcard{margin:auto 0;background:var(--ink);border-radius:12px;padding:14px 16px 16px;overflow:hidden;}
.page-home main .agentcard__head{display:flex;align-items:center;gap:6px;margin-bottom:13px;}
.page-home main .agentcard__head i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18);display:block;}
.page-home main .agentcard__title{margin-left:6px;display:flex;align-items:center;gap:6px;font-size:11px;color:rgba(255,255,255,.5);font-weight:600;white-space:nowrap;}
.page-home main .agentcard__title img{width:14px;height:14px;object-fit:contain;flex:none;display:block;}

/* short request → reply exchange, like a real agent chat log */
.page-home main .agentcard__ask{
  max-width:86%;margin:0 0 8px auto;
  background:rgba(255,255,255,.07);border-radius:10px 10px 3px 10px;
  padding:7px 11px;font-size:11px;color:rgba(234,243,237,.85);line-height:1.42;
}
.page-home main .agentcard__reply{font-size:11px;color:rgba(234,243,237,.62);line-height:1.42;margin-bottom:14px;max-width:92%;}

/* the task panel — its own nested card, matching the reference's collapsible-panel look */
.page-home main .agentpanel{border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:12px 14px 13px;background:rgba(255,255,255,.02);}
.page-home main .agentpanel__head{display:flex;align-items:center;gap:9px;margin-bottom:12px;}
.page-home main .agentpanel__ico{width:20px;height:20px;border-radius:6px;flex:none;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);display:grid;place-items:center;overflow:hidden;}
.page-home main .agentpanel__ico img{width:14px;height:14px;object-fit:contain;display:block;}
.page-home main .agentpanel__head b{font-size:11.5px;font-weight:600;color:#fff;flex:1;min-width:0;}
.page-home main .agentpanel__pill{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--lime);border:1px solid rgba(172,212,0,.4);background:rgba(172,212,0,.08);padding:3px 9px;border-radius:20px;white-space:nowrap;}

.page-home main .agentchecklist{position:relative;padding-left:22px;}
.page-home main .agentchecklist::before{content:"";position:absolute;left:8px;top:9px;bottom:9px;width:1.5px;background:rgba(255,255,255,.1);}
.page-home main .agentstep{position:relative;display:flex;align-items:center;gap:8px;padding:6px 0;font-size:11.5px;color:rgba(234,243,237,.55);}
.page-home main .agentstep__node{
  position:absolute;left:-22px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;border-radius:50%;background:var(--ink);
  border:1.5px solid rgba(255,255,255,.2);display:grid;place-items:center;
}
.page-home main .agentstep__node svg{width:9px;height:9px;}
.page-home main .agentstep--done .agentstep__node{background:rgba(63,220,124,.14);border-color:#3fdc7c;color:#3fdc7c;}
.page-home main .agentstep--done{color:rgba(234,243,237,.92);}
.page-home main .agentstep--active .agentstep__node{border-color:var(--lime);}
.page-home main .agentstep--active .agentstep__node::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);}
.page-home main .agentstep--active{color:#fff;}
.page-home main .agentstep__label{flex:1;min-width:0;}
.page-home main .agentstep__val{font-size:10px;color:rgba(234,243,237,.32);font-variant-numeric:tabular-nums;white-space:nowrap;}
.page-home main .agentstep--done .agentstep__val{color:#3fdc7c;}
.page-home main .agentstep--active .agentstep__val{color:var(--lime);}

@media (max-width:900px){
  .page-home main .fitsgrid{grid-template-columns:1fr;grid-template-rows:none;}
  .page-home main .fitcard--integrations{grid-column:auto;grid-row:auto;}
  .page-home main .itile--word-sm{width:84px;height:38px;padding:7px 12px;}
  .page-home main .itile--word-md{width:106px;height:42px;padding:7px 13px;}
  .page-home main .itile--word-lg{width:142px;height:40px;padding:6px 15px;}
  .page-home main .itile--word-xl{width:194px;height:32px;padding:5px 14px;}
}
/* Task 13: 540px (roughly the old shared value) was fine for tablet but
   excessive for a phone — the two get their own ranges instead of one
   height scaled down by logo repositioning alone. */
@media (min-width:700px) and (max-width:900px){
  .page-home main .ecofield{min-height:500px;}
}
@media (max-width:699px){
  .page-home main .ecofield{min-height:390px;}
}


/* ============================================================
   RESOURCES — editorial
   ============================================================ */
.page-home main .res__head{margin-bottom:clamp(32px,2.4vw,36px);}
.page-home main .res__grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,30px);}
.page-home main .res__card{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;background:#fff;box-shadow:var(--shadow-sm);
  transition:box-shadow 300ms,transform 300ms;height:100%;
}
.page-home main .res__card:hover{box-shadow:var(--shadow);transform:translateY(-1px);}
.page-home main .res__card:focus-visible{outline-offset:4px;}
.page-home main .res__cardart{
  aspect-ratio:16/10;position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
  background-size:cover;background-position:center;background-color:var(--paper-2);
  transition:transform 600ms var(--ease);
}
.page-home main .res__card:hover .res__cardart{transform:scale(1.045);}
.page-home main .res__cardart::before{
  /* per Zenwork's Image Style guideline (bright, natural lighting, cheerful mood) —
     just a whisper of brand tint in one corner for cohesion, never darkening the photo */
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(0,80,42,.10) 0%,rgba(0,80,42,0) 42%);
  pointer-events:none;
}
.page-home main .res__cardart::after{
  /* faint top sheen, same glass/lacquer language used on the integration tiles — a quiet premium finish */
  content:"";position:absolute;inset:0;
  background:linear-gradient(165deg,rgba(255,255,255,.16),rgba(255,255,255,0) 34%);
  mix-blend-mode:soft-light;pointer-events:none;
}
.page-home main .res__cardart .ico{
  width:42px;height:42px;border-radius:11px;position:absolute;z-index:1;top:16px;left:16px;
  display:grid;place-items:center;background:rgba(255,255,255,.96);
  color:var(--green-ink);box-shadow:0 6px 14px -6px rgba(0,0,0,.28);
  transition:transform 400ms var(--ease);
}
.page-home main .res__card:hover .res__cardart .ico{transform:translateY(-2px);}
.page-home main .res__cardart .ico svg{width:19px;height:19px;}
.page-home main .res__cardbody{padding:22px 24px 26px;display:flex;flex-direction:column;gap:12px;flex:1;}
.page-home main .res__cardbody .tag{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--green-ink);}
.page-home main .res__cardbody h3{font-family:var(--serif);font-size:19px;line-height:1.32;letter-spacing:-0.008em;font-weight:400;color:var(--ink);flex:1;}
.page-home main .res__cardbody .rd{font-size:13px;color:var(--green-ink);font-weight:600;margin-top:auto;}

/* Task 12: tablet drops to 2 columns (third card wraps to its own row)
   instead of straight to 1 — makes better use of tablet width and keeps
   the page materially shorter there than a full single-column stack. */
@media (min-width:700px) and (max-width:960px){
  .page-home main .res__grid3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:699px){
  .page-home main .res__grid3{grid-template-columns:1fr;}
}

/* ============================================================
   CLOSE — extreme whitespace
   ============================================================ */
.page-home main .close{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(88px,min(9vw,13vh),152px) 0 clamp(56px,min(6vw,8vh),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-home main .close::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:0;right:0;bottom:0;left:0;
  background-image:url('../img/brand/zenwork-footer-ribbon-pattern.svg');
  background-repeat:no-repeat;
  background-position:right center;
  background-size:auto 130%;
}
@media (max-width:720px){.page-home main .close::after{background-size:auto 80%;}}
.page-home main .close .wrap{position:relative;z-index:1;}
.page-home main .close .h2{margin:0 auto 22px;color:#fff;}
.page-home main .close p{color:rgba(255,255,255,.72);font-size:19px;margin:0 auto 36px;}
.page-home main .close .btn--primary{box-shadow:0 14px 30px -14px rgba(0,0,0,.45);}
.page-home main .close .btn--primary:hover{box-shadow:0 18px 34px -14px rgba(0,0,0,.5);}
.page-home main .close>*{position:relative;z-index:1;}
/* Task 09: the global mobile .btn{width:100%} rule turns this into a
   full-width bar otherwise — keep it an intrinsic premium pill instead,
   same fix already applied to the Hero CTA. */
@media (max-width:560px){
  .page-home main .close .btn{width:auto;max-width:100%;min-height:48px;}
}

/* ---- 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-home main .closefoot{position:relative;overflow:hidden;background:#00351C;}
.page-home 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-home main .closefoot .close,.page-home main .closefoot .foot{background:transparent;}

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

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

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .page-home main .navlinks{display:none;}
  .page-home main .navtoggle{display:inline-flex;align-items:center;}
  .page-home main .nav__right .btn,.page-home main .nav__right .nav__login,.page-home main .nav__right .nav__signup{display:none;}
  .page-home main .nav__main{border-bottom:0;background:transparent;}
  .page-home main .nav__main .wrap{height:auto;min-height:0;padding-top:0;padding-bottom:0;}
  .page-home main .navlinks__mobileauth{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding-top:16px;border-top:1px solid var(--line);}
  .page-home main .navlinks__mobileauth .nav__login,.page-home main .navlinks__mobileauth .nav__signup{justify-content:center;border:1px solid var(--line-2);}
  .page-home main .navlinks__mobileauth .btn{width:100%;justify-content:center;}
  /* nav dropdowns become an inline accordion on mobile instead of a floating panel —
     the fixed min-widths above (560–820px) would otherwise force horizontal overflow */
  .page-home 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-home main .navitem[data-open="true"] .navpanel{display:block;}
  .page-home main .navpanel__items{display:block;}
  .page-home main .navpanel__item{width:100%;}
  .page-home main .navpanel__head{padding-bottom:8px;margin-bottom:6px;}
  .page-home main .navpanel--wide,.page-home main .navpanel--extra{grid-template-columns:1fr;gap:0;}
  .page-home main .navpanel--products{min-width:0;padding:6px 4px 4px;}
  .page-home main .navpanel__primary-row{grid-template-columns:1fr;}
  .page-home main .navpanel__others{grid-template-columns:1fr;}
  .page-home main .foot__top{grid-template-columns:1fr;gap:32px;}
}
@media (max-width:560px){
  .page-home main{font-size:16px;}
  .page-home main .demo__steps{flex-wrap:wrap;gap:20px 0;}
  .page-home main .dstep{flex:0 0 50%;}
  .page-home main .dstep__wire{display:none;}
  .page-home main .scale__side{grid-template-columns:1fr 1fr;}
  .page-home main .foot__top{grid-template-columns:1fr;gap:28px;}
  .page-home main .hero__form{flex-direction:column;}
  .page-home main .hero__input{min-width:0;}
  .page-home main .btn{width:100%;}
}


/* Former inline declarations from the approved reference. */
.page-home main .zhome-c8be1ccb{display:none;}
.page-home main .zhome-d5800fe5{margin-top:30px;}
.page-home main .zhome-08f21918{padding:clamp(64px,8vw,120px) 0;}
.page-home main .zhome-6eec750b{margin-bottom:clamp(32px,2.4vw,36px);}
.page-home main .zhome-2852f4d4{top:30%;left:32%;}
.page-home main .zhome-3dd1c8a0{top:32%;left:68%;}
.page-home main .zhome-a824f815{top:68%;left:30%;}
.page-home main .zhome-aeaa7fa4{top:70%;left:68%;}
.page-home main .zhome-09ced218{top:15%;left:63%;}
.page-home main .zhome-43d8e8e9{top:81%;left:73%;}
.page-home main .zhome-181da31e{top:13%;left:33%;}
.page-home main .zhome-b4b97384{enable-background:new 0 0 1024 450;}
.page-home main .zhome-804a0c59{top:89%;left:26%;}
.page-home main .zhome-b6b8fd5a{top:6%;left:50%;}
.page-home main .zhome-354bdc5d{top:94%;left:50%;}
.page-home main .zhome-4956241a{top:50%;left:91%;}
.page-home main .zhome-6482c5de{top:14%;left:86%;}
.page-home main .zhome-278d98f5{top:86%;left:87%;}
.page-home main .zhome-6e0f3af5{background-image:url('https://images.unsplash.com/photo-1758611972678-bc3b29b4718f?w=1000&amp;q=80&amp;auto=format&amp;fit=crop')}
.page-home main .zhome-3f677b9f{background-image:url('https://images.unsplash.com/photo-1758691737246-95bf8f09a997?w=1000&amp;q=80&amp;auto=format&amp;fit=crop')}
.page-home main .zhome-2da5e7de{background-image:url('https://images.unsplash.com/photo-1758876201660-103984519266?w=1000&amp;q=80&amp;auto=format&amp;fit=crop')}