/* ============================================================
   philippines-payroll-lp.html -- page-specific styles, loaded after
   styles.css on that page only. Shared .pay-* pieces (split layout,
   quote cards, accent colour, alt section background) stay in
   styles.css because philippines-hris.html / indonesia-lp.html use
   them too.
   ============================================================ */

.pay-subhead{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-1px;color:var(--blue);margin-top:6px;}
.pay-lede{max-width:720px;margin:20px auto 0;color:var(--text-body);line-height:1.7;}
.pay-lede--strong{max-width:720px;margin:20px auto 0;color:var(--navy);font-weight:700;line-height:1.7;}

.pay-tag-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px;margin:44px auto 0;}
.pay-tag-chip{
  display:inline-flex;align-items:center;
  padding:9px 18px;border-radius:100px;
  border:1px solid transparent;
  font-size:13.5px;font-weight:700;
  box-shadow:0 2px 10px rgba(13,27,62,.05);
  transform:rotate(var(--r,0deg));
}
/* Physics pile: once the cloud scrolls into view,
   js/philippines-payroll-lp.js switches it to .is-physics and drops each chip into a Matter.js world (floor +
   side walls) where they collide, tumble and settle in a heap. Chips are
   absolutely positioned and JS writes their transform every frame; each
   stays hidden until it's dropped. Without JS / with reduced motion the
   plain wrapped cloud above is what shows. */
.pay-lp .pay-tag-cloud.is-pending .pay-tag-chip{visibility:hidden;}
.pay-lp .pay-tag-cloud.is-physics{
  position:relative;display:block;max-width:1100px;z-index:1;
}
.pay-lp .pay-tag-cloud.is-physics .pay-tag-chip{
  position:absolute;left:0;top:0;white-space:nowrap;
  visibility:hidden;will-change:transform;
}
.pay-lp .pay-tag-cloud.is-physics .pay-tag-chip.is-dropped{visibility:visible;}
/* Phones: smaller chips so the heap stays compact on a narrow floor */
@media(max-width:640px){
  .pay-tag-chip{padding:6px 12px;font-size:11.5px;}
}
/* Theme-colored chips, cycling through the site's accent palette
   (blue/orange/green/purple/navy/teal) so the cloud reads as varied
   but still on-brand rather than one flat color. */
.pay-tag-chip:nth-child(6n+1){background:rgba(37,99,235,.10);color:#2563eb;--r:-2deg;}
.pay-tag-chip:nth-child(6n+2){background:rgba(247,143,33,.14);color:#c2670f;--r:1.5deg;}
.pay-tag-chip:nth-child(6n+3){background:rgba(16,185,129,.12);color:#059669;--r:-1deg;}
.pay-tag-chip:nth-child(6n+4){background:rgba(139,92,246,.12);color:#7c3aed;--r:2deg;}
.pay-tag-chip:nth-child(6n+5){background:rgba(13,27,62,.08);color:#0d1b3e;--r:-1.5deg;}
.pay-tag-chip:nth-child(6n+6){background:rgba(6,182,212,.12);color:#0e7490;--r:1deg;}

.pay-banner{
  display:inline-block;
  max-width:720px;
  margin:0 auto;
  padding:16px 32px;
  border-radius:14px;
  background:#F78F21;
  color:#fff;
  font-size:18px;
  font-weight:700;
  line-height:1.4;
  text-align:center;
  transform:rotate(-3deg);
  box-shadow:0 12px 30px rgba(247,143,33,.35);
}
.pay-banner-wrap{text-align:center;padding:8px 24px 112px;}

@media(max-width:760px){
  .pay-banner{font-size:16px;padding:14px 22px;}
}

/* Match this page's content width to customers.html's 1200px centered
   column (.cs-section-inner) — scoped to .pay-lp on <body> so it can't
   leak onto other pages that share .hero-wrap/.phr-container/.mac-grid. */
.pay-lp .hero-wrap .hero{max-width:1200px;margin:0 auto;}
.pay-lp .phr-container{max-width:1200px;}
.pay-lp .mac-grid{max-width:1200px;}

/* "Numbers HR Teams Trust" stats band: the shared .industries-section has
   only 5px top padding on desktop, so give the heading room above it. */
.pay-lp .pay-stats-section{padding-top:clamp(60px, 8vw, 96px);}
/* Hero G2 rating + "Trusted by 1,700+" logo scroller, reusing the home
   page's .home-hero-g2 / .home-trust-strip components. The hero copy column
   is a flex column, so keep the G2 link to its own width, and scroll the
   logos at the Philippines page's pace. */
.pay-lp .hero-left-col{min-width:0;}
.pay-lp .home-hero-g2{align-self:flex-start;margin-top:0;}
/* Hero copy spacing: the shared column uses a flat 16px gap, which felt
   crammed -- space each block individually instead. */
.pay-lp .hero-wrap .hero-left-col{gap:0;}
.pay-lp .hero-wrap .hero h1{margin-bottom:20px;}
.pay-lp .hero-wrap .hero-subtitle{margin-bottom:32px;}
.pay-lp .hero-wrap .trust-badges{gap:12px;margin:0 0 36px;}
.pay-lp .home-trust-strip{margin-top:44px;}
.pay-lp .home-trust-strip .logo-slider-track{animation-duration:43.2s;}
/* Hero fills the screen below the navbar (60px) and announcement bar
   (~44px; reclaimed once it's dismissed), content vertically centred.
   Desktop only -- on tablet/mobile the hero stacks and is taller anyway. */
@media(min-width:1025px){
  .pay-lp .hero-wrap .hero{min-height:calc(100vh - 104px);min-height:calc(100svh - 104px);}
  .pay-lp:has(.nv-ann.is-dismissed) .hero-wrap .hero{min-height:calc(100vh - 60px);min-height:calc(100svh - 60px);}
}

/* Wide screens: styles.css pads .hero-wrap .hero by (100% - 1200px)/2,
   sized off the full viewport; inside the 1200px cap above that squeezed
   the hero to a ~500px sliver. Let the padding alone form the column. */
@media (min-width:1297px){
  .pay-lp .hero-wrap .hero{max-width:none;}
}

/* Video testimonial player: the shared .wb-modal-* styles in styles.css,
   a little wider here. (The .pay-voices testimonial cards themselves are
   in styles.css, shared with philippines-hris.html.) */

/* "HR in Your Pocket" store badges (official App Store / Google Play art) */
.pay-lp .mac-store-badges{display:flex;flex-wrap:wrap;gap:10px;}
.pay-lp .mac-store-badge{display:block;line-height:0;border-radius:7px;transition:opacity .2s,transform .2s;}
.pay-lp .mac-store-badge:hover{opacity:.88;transform:translateY(-1px);}
.pay-lp .mac-store-badge img{height:40px;width:auto;}

/* "HR in Your Pocket" (mobile app) section, side-by-side layout: let the
   copy column set the row height and fit the phone into it, so the image's
   top and bottom line up with the heading and the store buttons. */
@media(min-width:901px){
  .pay-lp .mac-grid{align-items:stretch;}
  .pay-lp .mac-img{height:0;min-height:100%;object-fit:contain;}
}

/* "HR in Your Pocket" (mobile app) section, stacked layout: put the phone
   image right after the intro paragraph -- above the ticks and the store
   buttons -- by letting .mac-copy's children join the column, and give
   phones more side breathing room than the shared 20px. */
@media(max-width:900px){
  .pay-lp .mac-grid{display:flex;flex-direction:column;align-items:stretch;gap:0;}
  .pay-lp .mac-copy{display:contents;}
  .pay-lp .mac-copy>h2{order:1;}
  .pay-lp .mac-copy>p{order:2;}
  .pay-lp .mac-img{order:3;margin:0 auto 32px;} /* paragraph above already has 28px below it */
  .pay-lp .mac-checklist{order:4;}
  .pay-lp .mac-store-badges{order:5;justify-content:center;}
}
@media(max-width:560px){
  .pay-lp .mobileapp-cta-section{padding-left:32px;padding-right:32px;}
  .pay-lp .mac-img{max-width:280px;}
  .pay-lp .mac-store-badge img{height:36px;} /* keeps both badges on one row */
}

/* G2 badges: tighter section, a rating line with a reviews link under the
   heading, more air between heading and badges, and smaller badges than the
   shared .g2-badge-img sizing that lift on hover. */
.pay-lp .g2-badges-section{padding:64px 48px 72px;}
.pay-lp .g2-badges-section h2{margin-bottom:10px;}
.pay-lp .g2-badges-section .pay-g2-sub{font-size:15.5px;color:var(--text-muted);margin:0 auto 36px;}
.pay-lp .pay-g2-sub strong{color:var(--navy);}
.pay-lp .pay-g2-sub a{color:var(--blue);font-weight:600;text-decoration:none;white-space:nowrap;}
.pay-lp .pay-g2-sub a:hover{text-decoration:underline;}
.pay-lp .g2-badges-row{gap:20px;}
.pay-lp .g2-badge-img{width:100px;transition:transform .2s;}
.pay-lp .g2-badge-img:hover{transform:translateY(-4px);}
@media(max-width:900px){.pay-lp .g2-badge-img{width:86px;}}
@media(max-width:560px){.pay-lp .pay-g2-sep{display:block;height:0;overflow:hidden;}.pay-lp .g2-badges-row{gap:12px;}.pay-lp .g2-badge-img{width:64px;}}