:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #183348; background: #eef4fb; font-synthesis: none; --muted: #4e6374; --line: #c7d7e4; --accent: #18645c; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; font-size: 17px; line-height: 1.65; }
h1,h2,h3,p { margin-top: 0; }
p { margin-bottom: 18px; }
h1,h2,h3 { text-wrap: balance; }
h2 { font-size: 40px; line-height: 1.2; margin-bottom: 22px; font-weight: 650; }
h3 { font-size: 23px; line-height: 1.3; margin-bottom: 16px; font-weight: 650; }
a { color: inherit; text-underline-offset: 5px; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 3px solid #3878b2; outline-offset: 5px; }
img { max-width: 100%; }
[id] { scroll-margin-top: 28px; }
.wrap { width: min(1180px, calc(100% - 80px)); margin-inline: auto; }
.skip-link { position: absolute; top: -100px; left: 20px; padding: 12px; background: white; z-index: 10; }
.skip-link:focus { top: 12px; }
.masthead { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 25px; }
.brand { display: grid; gap: 7px; text-decoration: none; flex-shrink: 0; text-align: center; color: #1c396d; }
.brand-word { font-size: 27px; font-weight: 850; line-height: 1.2; white-space: nowrap; }
.brand-sub { font-size: 30px; font-weight: 550; line-height: 1.3; white-space: nowrap; }
nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; font-size: 14px; font-weight: 600; }
nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; text-decoration: none; }
nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; }
.quiet-link { color: var(--muted); }
.login-link { border-left: 1px solid var(--line); padding-left: 22px; }
.hero { position: relative; isolation: isolate; min-height: 540px; display: flex; align-items: flex-end; background: #172c36; color: white; }
.hero-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 37%; }
/* The scrim keeps copy legible while retaining the people and workplace above it. */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(12,29,39,.96), rgba(12,29,39,.75) 35%, rgba(12,29,39,.12) 75%); }
.hero-content { padding-block: 36px; }
.eyebrow, .story-copy .eyebrow { font-size: 16px; font-weight: 750; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.hero .eyebrow { font-size: 18px; color: #d5e8ec; margin-bottom: 14px; }
h1 { margin-bottom: 18px; }
.product-word { display: block; font-size: 41px; line-height: 1.18; font-weight: 800; white-space: nowrap; }
.product-name { display: block; font-size: 52px; line-height: 1.15; font-weight: 450; margin-top: 4px; }
.hero-copy { max-width: 760px; font-size: 25px; font-weight: 600; line-height: 1.4; margin-bottom: 14px; }
.hero-detail { max-width: 680px; font-size: 17px; line-height: 1.55; margin-bottom: 22px; color: #e3edf1; }
.intro-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 48px; padding: 12px 20px; background: var(--accent); color: white; text-decoration: none; border-radius: 4px; font-size: 15px; font-weight: 650; }
.button:hover { background: #0e4d47; color: white; }
.hero .button { background: white; color: #183348; }
.hero .button:hover { background: #e0eeeb; }
.text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; font-weight: 600; }
.hero .text-link:hover { color: #bfe7df; }
.hero a:focus-visible { outline-color: white; }
.availability-band { border-bottom: 1px solid var(--line); }
.availability { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; padding-block: 22px; font-size: 14px; }
.availability p { margin: 0; color: var(--muted); }
.availability strong { color: #183348; }
.availability a { flex-shrink: 0; font-weight: 600; }
.band { padding-block: 80px; }
.section-intro { max-width: 780px; margin-bottom: 36px; }
.section-intro > p:not(.eyebrow) { color: var(--muted); }
.capabilities, .leadership, .white-band { background: white; }
.compensation-scope { padding-bottom: 56px; }
.scope-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 48px; }
.scope-grid article, .adoption-grid article { min-width: 0; border-top: 2px solid var(--line); padding-top: 22px; }
.scope-grid h3 { font-size: 25px; }
.scope-grid p, .adoption-grid p, .scope-boundary { color: var(--muted); }
.scope-grid .text-link { display: flex; justify-content: space-between; }
.adoption { background: #eef4fb; border-bottom: 1px solid var(--line); }
.adoption-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.adoption-grid h3 { font-size: 21px; }
.scope-boundary { max-width: 930px; margin: 24px 0 12px; font-size: 15px; }
.arrangement-examples { margin-bottom: 36px; }
.arrangement-examples h2 { font-size: 26px; }
.arrangement-examples .example-outcome { border-left: 3px solid var(--accent); padding-left: 18px; }
.capability-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.capability { display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; transition: border-color .15s, background .15s; }
.capability:hover { background: #f1f7f7; border-color: var(--accent); color: #183348; }
.index { display: block; font-size: 16px; font-weight: 750; color: var(--accent); margin-bottom: 20px; text-transform: uppercase; }
.capability p { color: var(--muted); }
.card-link { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: auto; font-size: 14px; font-weight: 650; color: var(--accent); }
.role-story { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); align-items: center; gap: 56px; padding-block: 36px; border-top: 1px solid var(--line); }
.role-story img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
.story-image-link { display: block; min-width: 0; }
.story-image-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.role-story.reverse { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); }
.role-story.reverse .story-image-link { grid-column: 2; grid-row: 1; }
.role-story.reverse .story-copy { grid-column: 1; grid-row: 1; }
.story-copy .eyebrow { margin-bottom: 14px; }
.story-copy h3 { font-size: 30px; }
.story-copy > p:not(.eyebrow) { color: var(--muted); }
.disclosure { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.assistance { background: #e0ece9; }
.ai-grid,.people-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 48px; }
.ai-grid article,.people-grid article { border-top: 2px solid var(--accent); padding-top: 24px; }
.ai-grid p { color: #3f5b55; }
.privacy-note { border-top: 1px solid #abc8c1; margin-top: 32px; padding-top: 28px; max-width: 900px; }
.privacy-note h3 { font-size: 19px; }
.privacy-note p { color: #3f5b55; font-size: 15px; margin: 0; }
.people-grid h3 { margin-bottom: 8px; }
.person-title { color: var(--accent); font-size: 15px; font-weight: 600; margin-bottom: 22px; }
.people-grid article > p:not(.person-title) { color: var(--muted); }
.people-grid article > p:last-child { margin-bottom: 0; }
.product-independence { margin: 32px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; }
.evaluation-note { max-width: 830px; font-size: 14px; color: var(--muted); margin: 14px 0 0; }
.footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding-block: 30px; font-size: 13px; color: var(--muted); }
.footer .registration { flex-basis: 100%; margin: 0; }
.action-intro { padding-block: 48px 32px; }
.page-title { font-size: 48px; line-height: 1.15; font-weight: 650; }
.intro-copy { font-size: 20px; color: var(--muted); max-width: 760px; }
.section-nav { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); }
.product-figure { margin: 0; }
.product-figure > a { display: block; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; }
.product-figure img { display: block; width: 100%; height: auto; }
/* Trim only the empty margins added by the image editor to these wide excerpts. */
.product-figure img.finance-softblur { aspect-ratio: 2172/270; object-fit: cover; }
.product-figure img.payroll-softblur { aspect-ratio: 2172/480; object-fit: cover; }
.product-figure img.movement-softblur { aspect-ratio: 2172/600; object-fit: cover; }
.explanation-figure { max-width: 960px; }
.product-figure figcaption { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 28px; padding-top: 14px; color: var(--muted); font-size: 14px; }
.product-figure figcaption > span { max-width: 880px; }
.product-figure figcaption > a { flex-shrink: 0; }
.detail-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; margin-bottom: 36px; }
.detail-grid > div { border-top: 1px solid var(--line); padding-top: 22px; }
.detail-grid h3 { font-size: 19px; }
.detail-grid p { color: var(--muted); font-size: 16px; }
.subsection { margin-top: 52px; }
.subsection > p { max-width: 780px; color: var(--muted); }
.inline-note { margin-top: 30px; border-left: 3px solid var(--accent); padding-left: 22px; max-width: 870px; }
.inline-note h3 { font-size: 20px; }
.inline-note p { color: var(--muted); }
.employee-story { padding-block: 0; border: 0; }
.question-list { padding: 0; list-style: none; margin: 20px 0 0; }
.question-list li { padding-block: 16px; border-top: 1px solid #abc8c1; font-weight: 550; }
.back-link { display: inline-block; margin-bottom: 24px; font-size: 14px; font-weight: 650; }
.topic-nav { margin-top: 28px; padding-block: 14px; border-block: 1px solid var(--line); gap: 8px 26px; }
.topic-nav a[aria-current="page"] { font-weight: 800; }
.topic-footer { display: flex; justify-content: space-between; gap: 24px; padding-block: 30px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 650; }
.topic-grid h2 { font-size: 25px; }
.topic-details { margin-top: 38px; }
.legacy-anchor { display: block; height: 0; }
.step-label { font-size: 13px; font-weight: 750; color: var(--accent); text-transform: uppercase; }
.supporting-view { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 22px; }
.supporting-view summary { cursor: pointer; font-size: 20px; font-weight: 650; padding-bottom: 20px; }
.supporting-view summary:focus-visible { outline: 3px solid #3878b2; outline-offset: 5px; }
.supporting-view .product-figure { margin-top: 20px; }
/* Short introductions on outcome pages; contract pages keep their existing layout. */
.topic-page .action-intro { padding-block: 28px 0; }
.topic-page .page-title { margin-bottom: 12px; }
.topic-page .intro-copy { margin-bottom: 20px; }
.topic-page .topic-nav { margin-top: 0; font-size: 14px; gap: 8px 22px; }
.topic-page .band { padding-block: 28px 48px; }
.topic-page .band > .wrap > .disclosure { margin: 0 0 22px; }
.topic-page .step-label { font-size: 16px; }
.topic-page .excerpt-title { font-size: 24px; line-height: 1.3; }
.topic-page .explanation-figure { max-width: 880px; }
.readable-figure > a:focus-visible { outline: 3px solid #3878b2; outline-offset: 4px; }
.intake-flow { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px 28px; list-style-position: inside; margin: 0 0 28px; padding: 0; color: var(--accent); font-size: 16px; font-weight: 650; }
.intake-flow li { border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 760px) {
  .scope-grid, .adoption-grid { grid-template-columns: 1fr; gap: 28px; }
  .scope-grid h3, .arrangement-examples h2 { font-size: 23px; }
  .intake-flow { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 20px; }
  .topic-page .action-intro { padding-top: 18px; }
  .topic-page .topic-nav { gap: 8px 16px; }
  .readable-figure > a { overflow-x: auto; }
  .readable-figure img { min-width: 760px; }
  .readable-figure.explanation-figure img { min-width: 620px; }
}
@media (min-width: 1800px) { .hero { min-height: 630px; } .hero-image { object-position: 50% 34%; } }
@media (max-width: 1000px) {
  .masthead { align-items: flex-start; flex-direction: column; gap: 14px; }
  .role-story,.role-story.reverse { gap: 32px; }
  .story-copy h3 { font-size: 26px; }
  .role-story p { font-size: 16px; }
  .availability { align-items: flex-start; flex-direction: column; gap: 8px; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 40px); }
  .masthead { padding-block: 20px; }
  .brand-word { font-size: 24px; }
  .brand-sub { font-size: 28px; }
  nav { gap: 4px 18px; font-size: 13px; }
  .login-link { padding-left: 0; border: 0; }
  .hero { min-height: 500px; }
  .hero-image { height: 340px; object-position: 45% 25%; }
  .hero::after { background: linear-gradient(0deg, #172c36 20%, rgba(23,44,54,.92) 40%, rgba(23,44,54,0) 80%); }
  .hero-content { padding-block: 26px; }
  .product-word { font-size: 31px; }
  .product-name { font-size: 40px; }
  .hero-copy { font-size: 19px; max-width: 500px; }
  .hero-detail { font-size: 15px; }
  .topic-footer { flex-direction: column; gap: 16px; }
  .intro-actions { gap: 10px 22px; }
  .band { padding-block: 48px; }
  h2 { font-size: 30px; }
  h3 { font-size: 22px; }
  .capability-grid,.ai-grid,.people-grid,.detail-grid { grid-template-columns: 1fr; gap: 24px; }
  .capability { padding: 24px; }
  .role-story,.role-story.reverse { grid-template-columns: 1fr; gap: 24px; padding-block: 30px; }
  .role-story.reverse .story-image-link,.role-story.reverse .story-copy { grid-column: auto; grid-row: auto; }
  .role-story p { font-size: 17px; }
  .story-copy h3 { font-size: 26px; }
  .product-figure figcaption { flex-direction: column; gap: 8px; }
  .page-title { font-size: 36px; }
  .action-intro { padding-block: 24px; }
  .intro-copy { font-size: 18px; }
  .footer a { overflow-wrap: anywhere; }
  .employee-story { padding-top: 0; }
}
@media (max-width: 360px) {
  .hero { min-height: 470px; }
  .product-word { font-size: 26px; }
  .product-name { font-size: 34px; }
  .hero .eyebrow { font-size: 17px; }
  .hero-copy { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
  .skip-link,nav,.button { display: none; }
  body { font-size: 11pt; background: white; }
  .wrap { width: 100%; }
  .hero { min-height: 0; background: white; color: #183348; }
  .hero-image,.hero::after { display: none; }
  .hero .eyebrow { color: #18645c; }
  .band,.hero-content { padding-block: 24px; }
  h2 { font-size: 23pt; }
  article,figure { break-inside: avoid; }
}