/* The final layout stays in flow while complete panels move over it. */
.people-comparison{background:#f8f7ff;color:#090a28;scroll-margin-top:100px;padding:48px 0 56px}
.people-comparison .pc-wrap{max-width:1880px;width:94%;padding:0}
.people-comparison .pc-stage{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;min-width:0;align-items:stretch;isolation:isolate;overflow:visible}
.people-comparison .pc-panel{container-type:inline-size;container-name:comparison-panel;min-width:0;position:relative;opacity:1;visibility:visible;transform:none;transition:none;display:grid;grid-template-rows:auto 1fr auto;gap:8px;padding:24px 16px 12px;border:1px solid white;border-radius:20px;box-shadow:0 12px 35px -20px #8173bc38}
.people-comparison .pc-before{grid-column:1;z-index:2;background:#fff5f6}
.people-comparison .pc-after{grid-column:2;z-index:1;background:linear-gradient(145deg,#f8fcff,#f6f7ff 65%,#f0fcf7)}
.people-comparison .pc-panel>*{min-width:0}
.people-comparison .pc-panel header{position:relative;text-align:center;padding:0 12px}
.people-comparison .pc-label{position:absolute;left:12px;top:0;padding:4px 17px;border-radius:30px;background:#ffe1e4;color:#d61c37;font-size:13px;font-weight:650;line-height:1.4}
.people-comparison .pc-after .pc-label{color:#009759;background:#d4f5e7}
.people-comparison .pc-eyebrow{display:block;color:#6015ff;font-size:15px;font-weight:650;letter-spacing:.1em;margin:5px 0 12px}
.people-comparison .pc-panel h3{font-size:clamp(27px,5cqw,48px);line-height:1.04;margin:8px 0 14px;letter-spacing:-.045em;font-weight:700}
.people-comparison .pc-panel h3 span{color:#5c72a9}
.people-comparison .pc-after h3 span{color:#6015ff}
.people-comparison .pc-panel header p{font-size:16px;line-height:1.45;color:#566184;margin:0}

/* 31 / 38 / 31: the middle includes the hub, rings and short connections. */
.people-comparison .pc-diagram{position:relative;display:grid;grid-template-columns:31% 38% 31%;grid-template-rows:repeat(3,minmax(80px,max-content));align-content:start;gap:12px 0;margin:8px 8px 0;padding-bottom:100px;min-width:0}
.people-comparison .pc-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.people-comparison .pc-lines path{fill:none;stroke:var(--pc-line,#abb2c4);stroke-width:1.4}
.people-comparison .pc-lines circle{fill:var(--pc-line,#abb2c4)}
.people-comparison .pc-scattered .pc-lines path{opacity:.8}
.people-comparison .pc-scattered .pc-lines circle{display:none}
.people-comparison .pc-node{position:relative;z-index:1;min-width:0;display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:white}
.people-comparison .pc-node>div{min-width:0}
.people-comparison .pc-node strong{display:block;font-size:15px;line-height:1.25;letter-spacing:-.02em}
.people-comparison .pc-node small{display:block;font-size:13px;line-height:1.35;color:#566184;margin-top:4px}
.people-comparison .pc-icon{width:44px;height:44px;flex:none;border-radius:13px;background:#f0f1f3;display:grid;place-items:center;padding:5px;color:#53565b}
.people-comparison .pc-icon svg{width:100%;height:100%}
.people-comparison .pc-connected .pc-node{border:1px solid color-mix(in srgb,var(--pc-line) 30%,white);box-shadow:0 5px 16px -12px #24335c30}
.people-comparison .pc-connected .pc-icon{color:var(--pc-line);background:color-mix(in srgb,var(--pc-line) 7%,white)}
.people-comparison .pc-connected .pc-icon svg{filter:drop-shadow(0 2px 1px rgb(0 0 0 / .08))}
.people-comparison .pc-connected .pc-attendance{--pc-line:#087bff;grid-column:1;grid-row:1}
.people-comparison .pc-connected .pc-leave{--pc-line:#00b877;grid-column:1;grid-row:2}
.people-comparison .pc-connected .pc-payroll{--pc-line:#ff8a00;grid-column:1;grid-row:3}
.people-comparison .pc-connected .pc-assets{--pc-line:#ff1686;grid-column:3;grid-row:1}
.people-comparison .pc-connected .pc-documents{--pc-line:#6617ff;grid-column:3;grid-row:2}
.people-comparison .pc-connected .pc-letters{--pc-line:#6617ff;grid-column:3;grid-row:3}
.people-comparison .pc-scattered .pc-attendance{grid-column:1;grid-row:1}
.people-comparison .pc-scattered .pc-leave{grid-column:2;grid-row:1;justify-self:center;width:88%}
.people-comparison .pc-scattered .pc-payroll{grid-column:3;grid-row:1}
.people-comparison .pc-scattered .pc-statutory{grid-column:1;grid-row:2}
.people-comparison .pc-scattered .pc-assets{grid-column:3;grid-row:2}
.people-comparison .pc-scattered .pc-offers{grid-column:1;grid-row:3}
.people-comparison .pc-scattered .pc-documents{grid-column:3;grid-row:3}
.people-comparison .pc-tangle{position:absolute;left:50%;top:84px;width:90px;height:100px;transform:translateX(-50%);z-index:1}
.people-comparison .pc-tangle svg{width:100%;height:100%;fill:none;stroke:#565656;stroke-width:.9;opacity:.7}
.people-comparison .pc-record{position:relative;z-index:1;isolation:isolate;grid-column:2;grid-row:1/4;align-self:center;justify-self:center;width:clamp(180px,24cqw,240px);aspect-ratio:1;border:1px solid #bca7ff;border-radius:50%;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 15px #8b79da1f;background:linear-gradient(145deg,#fff,#fcfaff)}
.people-comparison .pc-record::before,.people-comparison .pc-record::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px solid #e8ddff;background:#eee5ff20;z-index:-1;pointer-events:none}
.people-comparison .pc-record::after{inset:-24px;background:transparent;border:10px solid #ebe8ff30}
.people-comparison .pc-record h4{font-size:17px;margin:7px 0;line-height:1.2;text-align:center;letter-spacing:-.035em}
.people-comparison .pc-record p{font-size:12px;line-height:1.4;text-align:center;margin:0;color:#536084}
.people-comparison .pc-avatar{width:48px;height:48px;flex:none;border-radius:50%;background:linear-gradient(135deg,#a972ff,#6321ff);color:white;padding:9px;display:block}
.people-comparison .pc-avatar svg{width:100%;height:100%;fill:white;stroke:white}
/* Original bitmap layers retain their complete aspect ratio and share a baseline. */
.people-comparison .pc-human{position:absolute;bottom:0;left:50%;width:40%;transform:translateX(-50%);z-index:2;pointer-events:none;mix-blend-mode:multiply}
.people-comparison .pc-happy{width:36%}
/* Account for the originals' different white bottom margins without cropping either image. */
.people-comparison .pc-confused{bottom:calc(-1 * min(8px,.84cqw))}
.people-comparison .pc-human img{display:block;position:static;width:100%;height:auto;object-fit:contain}
.people-comparison .pc-benefits{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;gap:0;border-radius:15px;padding:16px 10px;background:#ffeaec;margin:0}
.people-comparison .pc-after .pc-benefits{background:#e2f8ef}
.people-comparison .pc-benefits li{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 10px}
.people-comparison .pc-benefits li+li{border-left:1px solid #f4d6db}
.people-comparison .pc-after .pc-benefits li+li{border-color:#c2ecdc}
.people-comparison .pc-benefits strong{font-size:13px;line-height:1.4;letter-spacing:-.015em}
.people-comparison .pc-benefits li>span{display:block;flex:none;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ff747d,#fa172d);color:white;padding:7px}
.people-comparison .pc-after .pc-benefits li>span{background:linear-gradient(135deg,#32dd96,#00a461)}
.people-comparison .pc-benefits svg{width:100%;height:100%}

/* Viewport breakpoint shared with people-comparison.js; panel widths never select mobile mode. */
@media(max-width:1023px){
  .people-comparison .pc-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:none;max-width:1000px;margin-inline:auto;align-items:start}
  .people-comparison .pc-panel{grid-column:1;grid-template-rows:auto auto auto}
}
@container comparison-panel (max-width:800px){
  .people-comparison .pc-node{gap:8px;padding:10px}
  .people-comparison .pc-node strong{font-size:14px}
  .people-comparison .pc-node small{font-size:12px}
  .people-comparison .pc-icon{width:40px;height:40px;padding:4px}
  .people-comparison .pc-record{padding:12px}
  .people-comparison .pc-record h4{font-size:15px}
  .people-comparison .pc-record p{font-size:11px}
  .people-comparison .pc-record::after{inset:-18px;border-width:8px}
  .people-comparison .pc-avatar{width:40px;height:40px;padding:8px}
  .people-comparison .pc-benefits li{padding-inline:6px;gap:8px}
  .people-comparison .pc-benefits strong{font-size:12px}
}
/* Phone composition: readable paired modules, full artwork and natural page height. */
@media(max-width:1023px){
  .people-comparison .pc-panel header{padding:0}
  .people-comparison .pc-label{left:0;font-size:12px}
  .people-comparison .pc-eyebrow{font-size:12px;padding-top:36px}
  .people-comparison .pc-panel h3{font-size:clamp(27px,6cqw,36px)}
  .people-comparison .pc-panel header p{font-size:14px}
  .people-comparison .pc-diagram{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;gap:12px;margin:0;padding-bottom:0}
  .people-comparison .pc-node{min-height:80px;align-items:center}
  .people-comparison .pc-connected .pc-attendance{grid-column:1;grid-row:2}
  .people-comparison .pc-connected .pc-assets{grid-column:2;grid-row:2}
  .people-comparison .pc-connected .pc-leave{grid-column:1;grid-row:3}
  .people-comparison .pc-connected .pc-documents{grid-column:2;grid-row:3}
  .people-comparison .pc-connected .pc-payroll{grid-column:1;grid-row:4}
  .people-comparison .pc-connected .pc-letters{grid-column:2;grid-row:4}
  .people-comparison .pc-record{grid-column:1/3;grid-row:1;width:clamp(180px,65cqw,216px);margin:24px 0 28px}
  .people-comparison .pc-human{position:relative;left:auto;bottom:auto;transform:none;grid-column:1/3;justify-self:center;width:min(100%,320px)}
  .people-comparison .pc-happy{grid-row:5}
  .people-comparison .pc-tangle{position:relative;left:auto;top:auto;transform:none;grid-column:1/3;grid-row:1;justify-self:center}
  .people-comparison .pc-scattered .pc-attendance{grid-column:1;grid-row:2}
  .people-comparison .pc-scattered .pc-leave{grid-column:2;grid-row:2;width:auto;justify-self:stretch}
  .people-comparison .pc-scattered .pc-payroll{grid-column:1;grid-row:3}
  .people-comparison .pc-scattered .pc-statutory{grid-column:2;grid-row:3}
  .people-comparison .pc-scattered .pc-assets{grid-column:1;grid-row:4}
  .people-comparison .pc-scattered .pc-offers{grid-column:2;grid-row:4}
  .people-comparison .pc-scattered .pc-documents{grid-column:1/3;grid-row:5}
  .people-comparison .pc-confused{grid-row:6}
  .people-comparison .pc-benefits{padding:12px 4px}
  .people-comparison .pc-benefits li{display:block;padding-inline:4px;text-align:center}
  .people-comparison .pc-benefits li>span{margin:0 auto 8px;width:30px;height:30px;padding:6px}
  .people-comparison .pc-benefits strong{font-size:11px}
}
@media(max-width:420px){
  .people-comparison .pc-node{gap:6px;padding:8px}
  .people-comparison .pc-node strong{font-size:13px}
  .people-comparison .pc-icon{width:32px;height:36px;padding:3px}
}
@media(max-width:360px){
  .people-comparison .pc-diagram{grid-template-columns:minmax(0,1fr)}
  .people-comparison .pc-node{grid-column:1!important;min-height:80px;padding:12px;gap:10px}
  .people-comparison .pc-icon{width:40px;height:40px;padding:4px}
  .people-comparison .pc-record,.people-comparison .pc-tangle,.people-comparison .pc-human{grid-column:1}
  .people-comparison .pc-scattered .pc-attendance,.people-comparison .pc-connected .pc-attendance{grid-row:2}
  .people-comparison .pc-scattered .pc-leave,.people-comparison .pc-connected .pc-assets{grid-row:3}
  .people-comparison .pc-scattered .pc-payroll,.people-comparison .pc-connected .pc-leave{grid-row:4}
  .people-comparison .pc-scattered .pc-statutory,.people-comparison .pc-connected .pc-documents{grid-row:5}
  .people-comparison .pc-scattered .pc-assets,.people-comparison .pc-connected .pc-payroll{grid-row:6}
  .people-comparison .pc-scattered .pc-offers,.people-comparison .pc-connected .pc-letters{grid-row:7}
  .people-comparison .pc-scattered .pc-documents{grid-row:8}
  .people-comparison .pc-confused{grid-row:9}
  .people-comparison .pc-happy{grid-row:8}
}
@media(max-width:600px){.people-comparison{padding-block:32px}.people-comparison .pc-wrap{width:calc(100% - 32px)}.people-comparison .pc-panel{padding:16px 12px 12px}}
/* Narrow desktops keep the same three-part composition, with room reserved for the circle. */
@media(min-width:1024px) and (max-width:1439px){
.people-comparison .pc-diagram{grid-template-columns:minmax(0,1fr) minmax(224px,38%) minmax(0,1fr);margin-inline:0}
.people-comparison .pc-benefits li{display:block;text-align:center;padding-inline:4px}
.people-comparison .pc-benefits li>span{margin:0 auto 8px}
}
@media(min-width:1024px) and (max-width:1279px){
.people-comparison .pc-eyebrow{padding-top:32px}
.people-comparison .pc-node{display:grid;align-content:center;gap:6px;padding:8px}
.people-comparison .pc-icon{width:32px;height:32px;padding:3px}
.people-comparison .pc-record{width:180px}
.people-comparison .pc-tangle{top:auto;bottom:calc(26.6667cqw + 8px)}
.people-comparison .pc-benefits strong{display:block;min-height:4.2em}
}
@media(prefers-reduced-motion:no-preference){
.people-comparison .pc-ready.pc-open:not(.pc-settled) .pc-panel{transition:transform 900ms cubic-bezier(.22,1,.36,1) 500ms}
.people-comparison .pc-ready:not(.pc-open) .pc-after .pc-lines path{stroke-dasharray:1;stroke-dashoffset:1}
.people-comparison .pc-ready.pc-open:not(.pc-details-settled) .pc-after .pc-lines path{stroke-dasharray:1;animation:pc-line-draw 500ms cubic-bezier(.22,1,.36,1) 1300ms backwards}
.people-comparison .pc-ready.pc-open:not(.pc-details-settled) .pc-after .pc-benefits li>span{animation:pc-check-reveal 350ms ease 1500ms backwards}
.people-comparison .pc-ready.pc-open:not(.pc-details-settled) .pc-after .pc-benefits li:nth-child(2)>span{animation-delay:1580ms}.people-comparison .pc-ready.pc-open:not(.pc-details-settled) .pc-after .pc-benefits li:nth-child(3)>span{animation-delay:1660ms}
.people-comparison .pc-ready.pc-open:not(.pc-details-settled) .pc-record{animation:pc-hub-emphasis 600ms ease 1400ms backwards}
}
@keyframes pc-line-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* Mask only the hidden layer during the vertical reveal; final panels use natural heights. */
@media(min-width:1024px) and (prefers-reduced-motion:no-preference){
.people-comparison .pc-ready:not(.pc-open) .pc-after{transform:translateX(var(--pc-after-x,0px))}
}
@media(max-width:1023px) and (prefers-reduced-motion:no-preference){
.people-comparison .pc-ready:not(.pc-open) .pc-after{transform:translateY(var(--pc-after-y,0px))}
.people-comparison .pc-ready .pc-after{clip-path:inset(-32px)}
.people-comparison .pc-ready:not(.pc-open) .pc-after{clip-path:inset(-32px -32px max(-32px,calc(100% - var(--pc-cover-height,100%))) -32px)}
.people-comparison .pc-ready.pc-open:not(.pc-settled) .pc-after{transition:transform 900ms cubic-bezier(.22,1,.36,1) 500ms,clip-path 900ms cubic-bezier(.22,1,.36,1) 500ms}
}
@keyframes pc-check-reveal{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes pc-hub-emphasis{0%,100%{box-shadow:0 4px 15px #8b79da1f}45%{box-shadow:0 5px 22px #8b79da42}}
@media(prefers-reduced-motion:reduce){.people-comparison .pc-panel{transform:none!important;transition:none!important}}
/* Feature glyphs share one 32px drawing area and a 48px tinted container. */
.people-comparison .pc-after header{padding-top:32px}
.people-comparison .pc-after .pc-node .pc-icon{width:48px;height:48px;padding:8px;align-self:center}
.people-comparison .pc-after .pc-node .pc-icon svg{width:32px;height:32px}