/* WorkAid refinement: deliberate surfaces and a single pricing reading order. */
:root { --section-space:clamp(64px,7vw,96px); }
h1,h2,h3 { text-wrap:balance; }
h2 { font-size:clamp(30px,3.1vw,40px); line-height:1.16; font-weight:500; }
.section-head { margin-bottom:36px; max-width:760px; }
.lede { max-width:65ch; font-size:18px; line-height:1.65; }
.hero__panel { background:radial-gradient(ellipse at 92% 40%,rgba(47,107,138,.18),transparent 58%),linear-gradient(110deg,#fff 30%,#EEF3F6); }
.hero__panel::before,.hero__panel::after { opacity:.2; }
.hero__sub { font-size:17px; }
.btn { transition:background .2s,box-shadow .2s,transform .2s; }
.btn:hover { transform:translateY(-2px); }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
#people { background:#F2F5F7; border:0; }
#people .split { gap:48px; align-items:center; }
.collage { display:grid; grid-template-columns:minmax(0,1fr) 132px; gap:16px; min-height:0; align-items:start; }
.collage__card { position:static; width:auto; box-shadow:0 12px 32px -18px rgba(23,50,77,.2); }
.collage__card--main { grid-column:1/-1; }
.collage__card--side { grid-column:2; grid-row:2; padding:8px; }
.collage__card--bottom { grid-column:1; grid-row:2; }
.collage .layer { flex-wrap:wrap; padding:16px; gap:10px; }
.collage .layer .pill { margin-left:auto; }
.how-workaid__steps li { padding-bottom:28px; }
.how-workaid__steps li::before { width:12px; height:12px; top:7px; box-shadow:0 0 0 5px #fff; }
.how-workaid__steps li:not(:last-child)::after { left:5.5px; top:24px; bottom:3px; background:linear-gradient(var(--blue),var(--border)); }
.needs-section { padding:64px 0; }
.needs-panel { background:#EEF3F6; padding:48px 36px; }
.needs-grid article { background:transparent; border:0; border-left:1px solid #D9E1E6; border-radius:0; padding:8px 24px; }
.needs-grid article:first-child { border-left:0; }
.needs-icon { width:44px; height:44px; color:var(--blue); margin-bottom:24px; stroke-width:1.7; }
.needs-grid h3 { min-height:48px; margin-bottom:8px; }
.needs-grid p { font-size:15px; color:var(--charcoal); }
.needs-action { margin-top:40px; }
.dash-wrap { background:radial-gradient(ellipse at 90% 0%,rgba(47,107,138,.17),transparent 65%),linear-gradient(145deg,#EEF3F6,#E8EEF2); padding:32px; }
.feature__visual { background:linear-gradient(135deg,#17324D,#2F6B8A); }
.feature__body { padding:24px; }
#quality { background:#fff; }
.quality-col { background:#EEF3F6; border:0; padding:16px; }
#value { border:0; background:#FAFBFC; }
#pricing { background:#F2F5F7; }
#pricing>.container>.section-head { margin-bottom:40px; }
.pricing-explained { max-width:none; margin:0; border:0; padding:0; }
.pricing-explained__head { margin-bottom:36px; }
.pricing-equation { gap:18px; }
.pricing-component__visual { box-shadow:none; }
.pricing-component__visual h3 { background:var(--navy); }
.pricing-component ul { padding-top:18px; }
#pricing .pricing__grid { display:block; margin-top:40px; }
#pricing .price-card--main { display:grid; grid-template-columns:1fr 1fr; box-shadow:none; overflow:hidden; }
#pricing .price-card--main .price-card__head { background:#fff; padding:32px; grid-column:1; grid-row:1; }
#pricing .pricing-terms { grid-column:2; grid-row:1/3; border-top:0; border-left:1px solid var(--border); padding:32px; }
#pricing .pricing-inclusions { grid-column:1; grid-row:2; padding:0 32px 28px; }
.pricing-inclusions summary { cursor:pointer; font-size:14px; font-weight:600; color:var(--blue); padding:16px 0; border-top:1px solid var(--border); }
.pricing-inclusions .inc { padding:12px 0 0; }
.pricing-inclusions .inc h4 { display:none; }
#pricing .commitments { background:transparent; color:var(--navy); border-top:1px solid var(--border); border-radius:0; padding:28px 0 0; gap:20px; margin-top:40px; }
#pricing .commitment strong { color:var(--muted); font-weight:400; font-size:13px; }
#pricing .commitment svg { color:var(--teal); }
.final .panel-cta { background:radial-gradient(ellipse at 100% 0%,rgba(47,107,138,.8),transparent 65%),#17324D; padding:64px; }
.final .panel-cta::after { display:none; }
@media(max-width:1080px) { .collage { grid-template-columns:minmax(0,1fr) 112px; } .needs-grid article:nth-child(3) { border-left:0; } .needs-grid { row-gap:32px; } }
@media(max-width:768px) {
 .hero__sub { order:1; font-size:16px; } .hero__actions { order:2; } .hero .orbit { order:3; } .hero__note { order:4; }
 #people .split { gap:32px; } .collage { grid-template-columns:minmax(0,1fr) 112px; }
 .needs-section { padding:40px 0; } .needs-panel { padding:32px 24px; } .needs-grid article { padding:20px 0; border-left:0; border-top:1px solid var(--border); } .needs-grid h3 { min-height:0; } .needs-icon { margin-bottom:16px; }
 .dash-wrap { padding:12px; } .pricing-equation { grid-template-columns:1fr; }
 #pricing .price-card--main { display:flex; flex-direction:column; }
 #pricing .price-card--main .price-card__head { padding:24px; }
 #pricing .pricing-inclusions { padding:0 24px 16px; }
 #pricing .pricing-terms { border-left:0; border-top:1px solid var(--border); padding:24px; }
 .final .panel-cta { padding:40px 24px; } .pricing-explained__head { text-align:left; }
}
@media(prefers-reduced-motion:reduce) { .btn:hover { transform:none; } }
@media(max-width:768px) { .hero .globe { order:3; } }

/* People portraits. The framing lives in the crop, not here: a5 and a6 are cut
   square and face-centred by tools/build_people_crops.py. Transforming the
   image inside a fixed frame only trades one bad edge for another, which is
   what pushed the heads out of these tiles before. */
.people-photo-frame { display:block; aspect-ratio:1; overflow:hidden; border-radius:10px; }
.avatars .people-photo-frame img { display:block; width:100%; height:100%; object-fit:cover; border-radius:0; }

.pricing-explained__head { max-width:900px; }
.pricing-explained__head p { max-width:640px; margin-inline:auto; }