/* Four stages of one payroll process; shared site typography and colours. */
.solution-stage { border-bottom: 1px solid var(--line); }
.solution-stage .section-head { max-width: 900px; }
.solution-stage .section-head > div > p { max-width: 760px; }
.solution-phase { margin-bottom: 18px; }
.solution-stage .feature-directory { margin-top: 32px; }
/* Original app screens, framed in the site's Archivo / Work Sans and cobalt palette. */
.employee-showcase { margin: 0; }
.employee-showcase-head .eyebrow { margin-bottom: 10px; font-size: .72rem; letter-spacing: .1em; }
.employee-showcase-head h2 { font-size: clamp(1.9rem, 3vw, 2.8rem); }
.employee-showcase-head > p:not(.eyebrow) { margin-top: 14px; font-size: .94rem; }
.employee-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-bottom: 18px; border-bottom: 1px solid #d8e1f2; }
.employee-tabs button { min-height: 44px; padding: 10px 18px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink); font-size: .88rem; font-weight: 500; transition: background .18s, color .18s; }
.employee-tabs button:hover { background: #e2e9fa; }
.employee-tabs button[aria-selected=true] { background: var(--teal); color: white; box-shadow: 0 4px 12px #244ee422; }
.employee-panel { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 26px; }
.employee-panel-copy { padding: 24px 0; max-width: 390px; }
.employee-panel-copy h3 { font-size: clamp(1.5rem, 2.25vw, 2rem); line-height: 1.15; }
.employee-panel-copy p { margin-top: 20px; font-size: .98rem; line-height: 1.75; }
.employee-device-stage { position: relative; min-height: 0; width: 100%; max-width: 580px; margin: 8px auto 0; }
.employee-device-main { display: block; position: relative; z-index: 2; width: 44%; max-width: 246px; margin: 20px 0 20px 11%; border-radius: 38px; text-decoration: none; }
.employee-device-main:hover { text-decoration: none; }
.employee-device-companion { position: absolute; width: 38%; max-width: 214px; right: 7%; top: 74px; filter: saturate(.8); }
.product-device { position: relative; width: 100%; aspect-ratio: 0.48323926; overflow: hidden; border-radius: 14% / 7%; background: #121927; box-shadow: 0 17px 28px #18376620; }
.device-hardware { position: absolute; display: block; width: 141.3%; max-width: none; height: 108.7%; left: -20.7%; top: -4.78%; }
.device-display { position: absolute; inset: 2.5% 4.6%; border-radius: 12% / 6%; overflow: hidden; background: #f5f7fd; }
.device-display img { width: 100%; height: 100%; object-fit: contain; display: block; }
.app-capture { min-width: 0; padding: 12px; border: 1px solid #d9e2f1; border-radius: 20px; background: #f0f4fc; box-shadow: 0 18px 50px -34px #1a37635c; }
.capture-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; padding: 4px 13px 12px; }
.capture-brand { color: var(--navy); font-size: .78rem; font-weight: 500; }
.capture-brand > span { margin: 0 10px; color: #99abc6; }
.capture-brand strong { font-weight: 400; color: var(--muted); }
.capture-enlarge { display: inline-flex; align-items: center; gap: 9px; padding: 10px 0; font-size: .78rem; font-weight: 500; white-space: nowrap; }
.capture-viewport { display: block; position: relative; width: 100%; aspect-ratio: var(--capture-ratio); overflow: hidden; border: 1px solid #e0e6f1; border-radius: 10px; background: white; }
.capture-viewport img { position: absolute; width: var(--capture-width); max-width: none; left: var(--capture-left); top: var(--capture-top); height: auto; }
.app-capture figcaption { padding: 14px 12px 4px; color: var(--muted); font-size: .78rem; line-height: 1.6; }
.app-capture-full .capture-viewport { aspect-ratio: auto; }
.app-capture-full .capture-viewport img { position: static; width: 100%; max-width: 100%; height: auto; }
.product-image-dialog { width: min(1500px, 96vw); max-width: 96vw; max-height: 94dvh; margin: auto; padding: 0; border: 1px solid #d8e1f1; border-radius: var(--modal-radius); background: #f4f7fc; color: var(--navy); box-shadow: 0 25px 100px #101d3c44; }
.product-image-dialog::backdrop { background: var(--modal-backdrop); }
.product-dialog-header { display: flex; position: sticky; top: 0; z-index: 1; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.product-dialog-header h2 { font-size: 1.1rem; letter-spacing: -.02em; }
.product-dialog-header button { display: inline-flex; align-items: center; gap: 18px; background: #edf2ff; border: 1px solid #d3ddf4; border-radius: 3px; color: var(--navy); padding: 9px 14px; min-height: 44px; font-size: .9rem; }
.product-dialog-header button span { font-size: 1.5rem; line-height: 1; }
.product-dialog-image { overflow: auto; padding: 16px; max-height: calc(94dvh - 110px); }
.product-dialog-image img { display: block; width: auto; min-width: 0; max-width: 100%; max-height: calc(94dvh - 150px); height: auto; margin: auto; }
.product-image-dialog.is-zoomed .product-dialog-image img { width: 100%; min-width: 1050px; max-width: none; max-height: none; }
.product-dialog-actions { display: flex; align-items: center; gap: 8px; }
.product-dialog-header button { white-space: nowrap; }
.product-dialog-header button[hidden] { display: none; }
.product-image-dialog.is-portrait { width: min(520px, 96vw); }
.product-image-dialog.is-portrait .product-dialog-image img { min-width: 0; width: auto; max-width: 100%; max-height: calc(94dvh - 104px); margin: auto; }
.product-image-open { overflow: hidden; }
@media (max-width: 1000px) {
 .employee-device-stage { min-height: 0; }
 .employee-panel { grid-template-columns: .9fr 1.1fr; gap: 16px; }
 .employee-device-main { width: 57%; margin-left: 0; }
 .employee-device-companion { width: 45%; top: 64px; right: -5px; }
}
@media (max-width: 760px) {
 .employee-showcase-head h2 { font-size: 1.9rem; }
 .employee-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding-bottom: 16px; margin-top: 18px; }
 .employee-tabs button { font-size: .82rem; padding: 11px 6px; border-color: #dce4f3; }
 .employee-panel { display: flex; flex-direction: column; gap: 0; }
 .employee-panel-copy { max-width: none; padding: 0 0 24px; align-self: stretch; }
 .employee-panel-copy h3 { font-size: 1.55rem; }
 .employee-panel-copy p { margin-top: 15px; font-size: .92rem; }
 .employee-panel-copy .text-link { margin-top: 18px; }
 .employee-device-stage { order: -1; min-height: 0; margin-top: 20px; }
 .employee-device-main { width: min(100%, 224px); margin: 0 auto 20px; }
 .employee-device-companion { display: none; }
 .app-capture { padding: 6px; border-radius: 12px; }
 .capture-bar { padding: 4px 6px 9px; min-height: 48px; flex-wrap: wrap; gap: 0 12px; }
 .capture-brand { font-size: .7rem; }
 .capture-brand > span { margin: 0 5px; }
 .capture-enlarge { font-size: .7rem; }
 .capture-viewport { border-radius: 6px; }
 .app-capture figcaption { padding: 12px 7px 6px; font-size: .75rem; }
 .product-dialog-header { padding: 10px 12px; flex-wrap: wrap; gap: 10px; }
 .product-dialog-actions { margin-left: auto; }
 .product-dialog-image { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
 .employee-tabs button { transition: none; }
}
@media print {
 .employee-tabs, .capture-enlarge, .product-image-dialog { display: none!important; }
 .employee-panel[hidden] { display: grid!important; }
 .employee-showcase, .app-capture { break-inside: avoid; box-shadow: none; }
}


/* Reuse the site's cobalt section treatment for the employee app. */
.employee-band { background: var(--teal); color: white; overflow: hidden; }
.employee-band .employee-showcase-head { max-width: 860px; }
.employee-band .employee-showcase-head .eyebrow { color: #dae3ff; }
.employee-band .employee-showcase-head h2 { color: white; }
.employee-band .employee-showcase-head > p:not(.eyebrow) { max-width: 700px; color: #e5edff; }
.employee-band .employee-showcase-head .gallery-language-note { font-size: .78rem; }
.employee-band .employee-tabs { border-color: #ffffff60; }
.employee-band .employee-tabs button { color: white; }
.employee-band .employee-tabs button:hover { background: #ffffff18; }
.employee-band .employee-tabs button[aria-selected=true] { background: white; color: var(--teal-dark); box-shadow: none; }
.employee-band .employee-panel-copy h3 { color: white; }
.employee-band .employee-panel-copy p { color: #e5edff; }
.employee-band .text-link { color: white; }
.employee-band :focus-visible { outline-color: white; }

/* Compact real app screenshots beside a plain-language benefit. */
.payroll-showcase { padding: 72px 0; border-bottom: 1px solid var(--line); }
.payroll-showcase .section-head { max-width: 900px; margin-bottom: 20px; }
.payroll-showcase .section-head h2 { font-size: clamp(1.9rem, 3vw, 2.8rem); }
.payroll-showcase .section-head p:not(.eyebrow) { max-width: 760px; margin-top: 16px; }
.payroll-showcase .payroll-tabs { margin-top: 0; padding-bottom: 14px; }
.payroll-panel { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: center; gap: 48px; padding-top: 24px; }
.payroll-panel-copy { max-width: 400px; }
.payroll-panel-copy h3 { font-size: clamp(1.5rem, 2.25vw, 2rem); }
.payroll-panel-copy p { margin-top: 20px; font-size: .98rem; line-height: 1.75; }
.payroll-panel .app-capture { width: 100%; max-width: 650px; justify-self: end; }
@media (max-width: 1000px) {
 .payroll-panel { gap: 28px; }
 .payroll-panel .capture-bar { flex-wrap: wrap; gap: 0 12px; }
}
@media (max-width: 760px) {
 .employee-band .employee-tabs button { border-color: #ffffff60; }
 .employee-band .employee-panel-copy { padding-top: 4px; }
 .payroll-showcase { padding: 56px 0; }
 .payroll-showcase .section-head h2 { font-size: 1.9rem; }
 .payroll-tabs { display: flex; flex-wrap: wrap; }
 .payroll-tabs button { padding: 11px 14px; }
 .payroll-panel { grid-template-columns: minmax(0,1fr); gap: 20px; padding-top: 20px; }
 .payroll-panel-copy { max-width: none; }
 .payroll-panel-copy h3 { font-size: 1.55rem; }
 .payroll-panel-copy p { margin-top: 15px; font-size: .92rem; }
}
@media print {
 .employee-band { background: white; color: var(--navy); }
 .employee-band .employee-showcase-head h2,.employee-band .employee-showcase-head p,.employee-band .employee-panel-copy h3,.employee-band .employee-panel-copy p,.employee-band .text-link { color: var(--navy); }
 .payroll-panel[hidden] { display: grid!important; }
 .payroll-panel { break-inside: avoid; }
}