/* ==========================================================================
   HERO live layer — home page. See, direct, approve, acted out over the
   Office Overview screenshot.

   A 1130x587 stage in the screenshot's own CSS pixels (the PNG is 2260x1174 at
   2x), scaled to the shot's rendered width by --s (script at the foot of
   index.html). Every piece sits over a measured spot in the image:
     charts   the two plot areas, masked so the lines draw in once on load
     counts   the red Inbox badge in the sidebar and the Inbox header count
     live     a pulsing dot on the Revenue Lead's avatar (the seat is Running)
     row      the one Inbox row, covered by a live item that is approved and cleared
     toast    the confirmation, in the empty space under the workforce cards
   Resting state (motion off, or before the loop starts) is the pending item with
   its Approve link: the moment the headline is about. Motion: HERO in motion.css.
   Shown only with JS (the stage needs --s); with it off the plain image shows.
   Desktop only: phones show the portrait screenshot and keep the entrance alone.
   ========================================================================== */

.hs{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none}
.js .hs{display:block}
.hs-stage{position:absolute;left:0;top:0;width:1130px;height:587px;transform:scale(var(--s,1));transform-origin:0 0;
  font-family:var(--display);color:#0b1220}
.hs-stage>*{position:absolute;display:block}

/* chart masks: card-white panels that slide off the plot areas */
.hs-mask{background:#fff;transform:scaleX(0);transform-origin:right center}
.hs-m1{left:268px;top:252px;width:384px;height:60px}
.hs-m2{left:719px;top:258px;width:384px;height:54px}

/* the two Inbox counts, drawn over the image's own digits */
.hs-cnt{text-align:center}
.hs-cnt b{position:absolute;left:0;right:0;top:0;display:block;font-weight:inherit}   /* the patch stays, covering the image digit; the digits fade in turn */
.hs-n2,.hs-n1{opacity:0}
.hs-c1{left:181px;top:165px;width:14px;height:20px;background:#fff;font-size:12.5px;line-height:20px;font-weight:500;color:#e5484d}
.hs-c2{left:266px;top:343px;width:12px;height:20px;background:#fafafa;font-size:14px;line-height:20px;color:#46556b}

/* the greeting's subline, which clears with the Inbox */
.hs-sub{left:224px;top:87px;width:150px;height:22px;background:#fafafa;font-size:13px;line-height:22px;color:#3d4a5c;white-space:nowrap}
.hs-sub b{position:absolute;left:2px;top:0;font-weight:400}
.hs-q2,.hs-q1,.hs-q0{opacity:0}

/* Revenue Lead is Running: a live dot on the avatar */
.hs-live{left:557px;top:480px;width:9px;height:9px;border-radius:50%;background:#1f9d6b;box-shadow:0 0 0 1.5px #fff}

/* the Inbox row: a white cover over the image's row, three states stacked in it */
.hs-row{left:227px;top:371.5px;width:888px;height:32px;border-radius:5px;background:#fff}
.hs-pend,.hs-done,.hs-empty{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 11px 0 10px;font-size:14px;white-space:nowrap}
.hs-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 2px #f59e0b inset}
.hs-tx{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.hs-k{color:#46556b}
.hs-go{margin-left:6px;padding:2px 6px;margin-right:-6px;border-radius:5px;font-weight:500;color:#2946b6}
.hs-done img{flex:0 0 auto}
.hs-done .hs-tx{color:#1a7f57}
.hs-empty{color:#6b778a}
.hs-done,.hs-empty,.hs-p2,.hs-p3{opacity:0}

/* the confirmation, bottom right like the app's own toasts */
.hs-toast{right:15px;top:516px;display:flex !important;align-items:center;gap:10px;padding:9px 16px 9px 12px;border:1px solid #e4ecf5;border-radius:8px;background:#fff;
  box-shadow:0 10px 28px rgba(2,37,79,.12);opacity:0}
.hs-toast b{display:block;font-size:13px;font-weight:600;color:#0b1220}
.hs-toast small{display:block;font-size:12px;color:#46556b}

/* the cursor: its tip sits on the Approve link */
.hs-cur{left:1072px;top:385px;width:22px;height:22px;opacity:0}

@media (max-width:767px){ .js .hs{display:none} }

/* ==========================================================================
   HOME HERO BACKDROP (index.html, body.home), after Zip's hero: a deep royal blue
   under the nav and headline that fades through periwinkle to white behind the
   lower half of the product shot. The nav sits on the blue (transparent, white
   links and logo) until the page scrolls, then returns to the usual white bar.
   JS only (.js): with it off the bar never learns it scrolled, so it stays white.
   ========================================================================== */
/* the nav over the blue lives in pages.css (.bluetop), shared with the pricing page */

.home .hero{padding-top:120px;
  background:radial-gradient(90% 55% at 0 0,rgba(8,18,70,.55),transparent 70%),
             radial-gradient(70% 45% at 100% 30%,rgba(96,131,226,.35),transparent 70%),
             linear-gradient(180deg,#152a84 0%,#1e39a3 22%,#2946b6 40%,#4a68d2 54%,#89a3ec 66%,#c4d2f7 78%,#eef2fd 89%,#fff 100%)}
.home .hero h1{color:#fff}
.home .hero .lead{color:rgba(255,255,255,.86)}
.home .hero .btn.p{background:#fff;color:var(--btn)}
.home .hero .btn.p:hover{background:#eef2fd}
.home .hero .btn.g{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.home .hero .btn.g:hover{background:rgba(255,255,255,.12)}
.home .hero .btn:focus-visible{outline-color:#fff}
@media (max-width:767px){ .home .hero{padding-top:104px} }

/* header row after Zip's hero: a one-line headline in a lighter weight on the left,
   the lead and both buttons stacked on the right. Stacks, left-aligned, below 991. */
.home .hero .hh{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:32px 56px;width:100%;text-align:left}
.home .hero .hh h1{max-width:none;margin:0;white-space:nowrap;font-size:clamp(56px,6vw,88px);font-weight:500;line-height:1.02;letter-spacing:-.03em}
.home .hero .hh-side{display:flex;flex-direction:column;gap:22px;min-width:0;max-width:520px;justify-self:end}
.home .hero .hh .lead{max-width:none;margin:0;font-size:19px;line-height:1.45;text-wrap:pretty}
.home .hero .hh .ctas{justify-content:flex-start;margin:0;gap:14px}
.home .hero .hh .btn{height:52px;padding:0 26px;font-size:16px}
.home .hero .shot{margin-top:56px}
@media (max-width:991px){
  .home .hero .hh{grid-template-columns:minmax(0,1fr);gap:20px}
  .home .hero .hh-side{justify-self:start;max-width:560px}
  .home .hero .shot{margin-top:40px}
}
@media (max-width:767px){
  .home .hero .hh h1{white-space:normal;font-size:44px}
  .home .hero .hh .lead{font-size:17px}
}

/* the product shot on the blue: no light-blue glow, a glass frame instead. The frame is
   drawn with box-shadow rings (a pale translucent band with a bright hairline at each
   edge), so the shot's box and its fitted live layer do not move. */
.home .hero .shot{border-color:rgba(255,255,255,.55);
  animation:shot-in 1s cubic-bezier(.2,.8,.2,1) .1s both;
  box-shadow:0 0 0 1px rgba(255,255,255,.28),0 0 0 14px rgba(255,255,255,.14),0 0 0 15px rgba(255,255,255,.34),0 34px 70px -28px rgba(8,18,70,.4)}
@media (max-width:767px){
  .home .hero .shot{animation-name:shot-rise;
    box-shadow:0 0 0 1px rgba(255,255,255,.28),0 0 0 8px rgba(255,255,255,.14),0 0 0 9px rgba(255,255,255,.34),0 24px 50px -24px rgba(8,18,70,.4)}
}