/* Homepage. Signature device: the highlighter moving across real healthcare paperwork (synthetic, no PHI). */

/* ---- Hero ---- */
.hx { padding-block: var(--sec-y); overflow: hidden; }
.hx-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: center; }
.hx h1 { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: clamp(38px, min(6.4vw, 6.6vh), 100px); line-height: .92; letter-spacing: -.05em; margin-top: 22px; }
.hx h1 .line { display: block; }
.hx h1 .rot { display: inline-block; transition: opacity 260ms var(--ease), transform 260ms var(--ease); }
.hx h1 .rot.out { opacity: 0; transform: translateY(.18em); }
.hx h1 .rot-slot { display: inline-grid; white-space: nowrap; }
.hx h1 .rot-slot > span { grid-area: 1 / 1; justify-self: start; }
.hx h1 .rot-ghost { visibility: hidden; }
.hx .lead { margin-top: 20px; font-size: clamp(18px, 1.6vw, 22px); max-width: 58ch; color: var(--ink-2); }
.hx .row { margin-top: 28px; }
/* Fine print under the buttons: one rule, two matching lines (workflows, trust). */
.hx-foot { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.hx-flows, .hx-trust { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.hx-flows a { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: color var(--t-fast), text-decoration-color var(--t-fast); }
.hx-flows a:hover, .hx-flows a:focus-visible { color: var(--ink); text-decoration-color: var(--ink); }
.hx-flows-k { display: block; margin-bottom: 10px; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hx-trust { display: flex; flex-wrap: wrap; align-items: last baseline; gap: 8px clamp(14px, 1.7vw, 24px); }
@media (min-width: 600px) { .hx-trust { flex-wrap: nowrap; } }
.hx-trust .tb { display: inline-flex; align-items: last baseline; gap: 8px; white-space: nowrap; }
.hx-trust img { display: block; width: auto; filter: brightness(0); opacity: .72; }
.hx-trust .tb-hipaa { height: 26px; transform: translateY(6px); }
.hx-trust .tb-uipath { height: 19px; margin-bottom: -4px; }
.hx-trust .tb-xifin { height: 14px; }
.hx-trust .tb-clutch { font-family: var(--f-display); font-stretch: 112%; font-weight: 800; font-size: 18px; line-height: 1; letter-spacing: -.03em; color: var(--ink); opacity: .72; }
.hx-trust a.tb-link { display: inline-flex; align-items: last baseline; gap: 6px; color: inherit; text-decoration: none; }
.hx-trust a.tb-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.hx-trust a.tb-link:hover .tb-clutch { opacity: 1; }
.hx-trust .tb-stars { font-size: 12px; letter-spacing: .5px; color: var(--ink); opacity: .72; }
.hx-trust .tb, .hx-trust a.tb-link { flex: none; }
/* Two-column hero on mid-size screens leaves the row ~480px: shrink logos and labels so it stays on one line. */
@media (min-width: 1001px) and (max-width: 1299px) {
  .hx-trust { gap: 8px 12px; font-size: 12.5px; }
  .hx-trust .tb, .hx-trust a.tb-link { gap: 5px; }
  .hx-trust .tb-hipaa { height: 21px; transform: translateY(5px); }
  .hx-trust .tb-uipath { height: 15px; margin-bottom: -3px; }
  .hx-trust .tb-xifin { height: 11px; }
  .hx-trust .tb-clutch { font-size: 15px; }
  .hx-trust .tb-stars { font-size: 10px; letter-spacing: 0; }
}
/* Logos sit on the text baseline (UiPath's "p" tail drops below it; the HIPAA badge is nudged down so its
   lettering lines up with the other two). On phones all three stay on one row. */
@media (max-width: 480px) {
  .hx-trust { gap: 8px 14px; }
  .hx-trust .tb { gap: 6px; font-size: 13px; }
  .hx-trust .tb-hipaa { height: 22px; transform: translateY(5px); }
  .hx-trust .tb-uipath { height: 16px; margin-bottom: -3.5px; }
  .hx-trust .tb-xifin { height: 12px; }
}
@media (max-width: 400px) {
  .hx-trust { gap: 8px 10px; }
  .hx-trust .tb { gap: 5px; font-size: 12.5px; }
  .hx-trust .tb-hipaa { height: 19px; transform: translateY(4px); }
  .hx-trust .tb-uipath { height: 14px; margin-bottom: -3px; }
  .hx-trust .tb-xifin { height: 10.5px; }
}
:root[data-theme="dark"] .hx-trust img { filter: brightness(0) invert(1); opacity: .75; }
@media (max-width: 1000px) { .hx-grid { grid-template-columns: minmax(0, 1fr); } }
/* Above the fold: on desktop the hero sizes itself to the window height as well as its width, so the first
   line of the next band ("Every minute of busywork…") always peeks in and invites a scroll. */
@media (min-width: 1001px) and (max-height: 860px) {
  .hx .stage { zoom: .86; }
  .hx .lead { margin-top: 16px; font-size: 18px; }
  .hx .row { margin-top: 20px; }
  .hx-foot { margin-top: 20px; padding-top: 12px; gap: 10px; }
}
@media (min-width: 1001px) and (max-height: 760px) {
  .hx h1 { font-size: clamp(36px, 5.8vh, 100px); }
  .hx .stage { zoom: .72; }
  .hx .lead { margin-top: 14px; font-size: 16px; }
  .hx .row { margin-top: 18px; }
  .hx-foot { margin-top: 16px; padding-top: 10px; gap: 8px; }
  .hx-flows, .hx-trust { font-size: 13.5px; }
}

/* Stage: a faxed referral on the left, structured output on the right */
.stage { position: relative; padding-bottom: 40px; min-height: 580px; }
.doc { --paper: #FBFAF5; --type: #1E2022; --faint-type: #6D6F68; --pen: #23357F; position: relative; background: var(--paper); color: var(--type); width: 100%; padding: 20px 24px 26px; transform: rotate(-1.6deg); box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 18px 40px -18px rgba(21, 24, 26, .35); isolation: isolate; }
.doc::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .028) 0 1px, transparent 1px 3px); }
.fax-line { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 9.5px; letter-spacing: .04em; color: var(--faint-type); display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed #BDBBB2; padding-bottom: 8px; margin-bottom: 14px; white-space: nowrap; overflow: hidden; }
.doc-title { font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.doc-sub { font-size: 11px; color: var(--faint-type); margin-top: 2px; }
.dgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #2B2D2F; margin-top: 12px; }
.dgrid > div { padding: 6px 8px 7px; border-right: 1px solid #2B2D2F; border-bottom: 1px solid #2B2D2F; display: grid; gap: 1px; min-width: 0; }
.dgrid > div:nth-child(2n) { border-right: 0; }
.dgrid > div.full { grid-column: 1 / -1; border-right: 0; }
.dgrid > div.last { border-bottom: 0; }
.dgrid small { font-size: 8.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint-type); }
.f { font-size: 12.5px; font-weight: 500; line-height: 1.35; justify-self: start; padding-inline: 2px; margin-inline: -2px; background-image: linear-gradient(transparent 10%, rgba(242, 194, 48, .92) 10% 92%, transparent 92%); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size 420ms var(--ease); }
.f.on { background-size: 100% 100%; }
.f.miss { box-shadow: inset 0 0 0 1.5px var(--c-fail); background-image: none; padding: 0 4px; }
.flag { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 9px; font-weight: 700; letter-spacing: .06em; color: var(--c-fail); margin-left: 6px; }
.pen { font-family: var(--f-serif); font-style: italic; font-size: 17px; color: var(--pen); transform: rotate(-2deg); display: inline-block; margin-top: 12px; }
.sig { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 10px; font-size: 10.5px; color: var(--faint-type); }
.sig svg { width: 110px; height: 34px; }
.sig path { fill: none; stroke: var(--pen); stroke-width: 1.4; }
.stamp { position: absolute; right: 22px; bottom: 58px; z-index: 2; transform: rotate(8deg); border: 2px solid var(--c-fail); color: var(--c-fail); font-family: var(--f-mono); font-stretch: 87.5%; font-weight: 700; font-size: 10px; letter-spacing: .1em; padding: 4px 8px; opacity: .8; text-align: center; line-height: 1.3; }
.stage > .doc { width: 64%; }
.xpanel { position: absolute; right: 0; top: 140px; width: 46%; min-width: 300px; background: var(--surface); color: var(--ink); border: 1.5px solid var(--ink); z-index: 4; box-shadow: 0 18px 40px -20px rgba(21, 24, 26, .4); }
.xp-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.xp-head strong { font-size: 14px; font-weight: 650; }
/* Agent run card, in the style of the earlier extraction panel: each step's value fades in and its box
   turns yellow as the run progresses, the Read / Extract / Rules / Submit bar fills in, then the dark bar
   confirms the submission and shows the fax-to-submitted time. */
.xp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; gap: 10px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.xp-row span:first-child { color: var(--muted); font-size: 12px; }
.xp-row .v { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11.5px; white-space: nowrap; text-align: right; opacity: .18; transition: opacity 300ms var(--ease); }
.xp-row .ck { width: 12px; height: 12px; border: 1px solid var(--line-strong); transition: background var(--t-fast), border-color var(--t-fast); }
.xp-row.on .v { opacity: 1; }
.xp-row.on .ck { background: var(--yellow); border-color: var(--ink); }
.xp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 10px 14px; gap: 6px; }
.xp-steps span { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); border-top: 3px solid var(--line); padding-top: 5px; transition: color var(--t-fast), border-color var(--t-fast); }
.xp-steps span.on { color: var(--ink); border-color: var(--ink); }
.xp-done { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; background: var(--panel); color: var(--panel-ink); font-size: 13px; opacity: .25; transition: opacity 300ms var(--ease); }
.xp-done.on { opacity: 1; }
.xp-done b { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 12px; color: var(--yellow); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.xp-done .meta { white-space: nowrap; }
.stage-cap { position: absolute; left: 0; bottom: 0; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; color: var(--muted); max-width: 48%; }
@media (max-width: 640px) {
  .stage { min-height: 0; padding-bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .doc { transform: none; padding: 16px; }
  .stage > .doc { width: 100%; }
  .xpanel { position: static; width: 100%; min-width: 0; }
  .stage-cap { position: static; max-width: none; }
}

/* ---- Logo band ---- */
.clients { padding-block: var(--sec-y); border-block: 1px solid var(--line); background: var(--surface); }
.clients .container { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; }
.clients p { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); max-width: 18ch; }
.clients ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 36px; }
.clients img { height: 30px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: .78; }
@media (max-width: 760px) { .clients .container { grid-template-columns: minmax(0, 1fr); gap: 16px; } .clients ul { justify-content: flex-start; } }

/* ---- Time band: real before/after from case studies ---- */
.wait { background: var(--panel); color: var(--panel-ink); padding-block: var(--sec-y); }
.wait h2 { font-family: var(--f-display); font-stretch: 125%; font-weight: 780; font-size: clamp(32px, 5vw, 68px); line-height: 1; letter-spacing: -.04em; max-width: 17ch; }
.wait h2 .mark { color: #15181A; }
.wait .lead { color: var(--panel-muted); margin-top: 20px; }
.waits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid var(--panel-line); }
.w { padding: 28px 24px 0 0; display: grid; gap: 10px; align-content: start; }
.w + .w { padding-left: 24px; border-left: 1px solid var(--panel-line); }
.w .before { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 15px; color: var(--panel-muted); text-decoration: line-through; text-decoration-color: rgba(232, 236, 235, .4); }
.w .after { font-family: var(--f-display); font-stretch: 125%; font-weight: 780; font-size: clamp(36px, 4vw, 58px); line-height: .95; letter-spacing: -.04em; color: var(--c-yellow); }
.w p { font-size: 16px; line-height: 1.45; color: var(--panel-ink); max-width: 26ch; }
.w .src { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; color: var(--panel-muted); text-decoration: underline; text-underline-offset: 3px; }
.w .src:hover { color: var(--c-yellow); }
@media (max-width: 1000px) { .waits { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } .w:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 560px) { .waits { grid-template-columns: minmax(0, 1fr); } .w, .w + .w { padding: 24px 0 0; border-left: 0; } .w + .w { border-top: 1px solid var(--panel-line); } }

/* ---- What we do: four services + agents ---- */
.svc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--ink); }
.svc a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; padding: 26px 24px; border-bottom: 1px solid var(--line); align-items: baseline; }
.svc a:nth-child(odd) { border-right: 1px solid var(--line); }
.svc a:nth-last-child(-n+2) { border-bottom: 0; }
.svc .n { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 12px; font-weight: 600; }
.svc h3 { font-family: var(--f-display); font-stretch: 118%; font-weight: 720; font-size: clamp(21px, 2vw, 27px); line-height: 1.1; letter-spacing: -.02em; }
.svc p { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); margin-top: 8px; max-width: 46ch; }
.svc .arr { font-size: 20px; transition: transform var(--t-fast); }
.svc a:hover .arr { transform: translateX(4px); }
.svc a:hover h3 { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 4px; text-underline-offset: 5px; }
@media (max-width: 860px) { .svc { grid-template-columns: minmax(0, 1fr); } .svc a:nth-child(odd) { border-right: 0; } .svc a { padding: 22px 18px; } .svc a:nth-last-child(2) { border-bottom: 1px solid var(--line); } }
.agents { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.agent { background: var(--surface); border: 1px solid var(--line); padding: 20px; display: grid; gap: 10px; align-content: start; transition: border-color var(--t-fast); }
.agent:hover { border-color: var(--ink); }
.agent .eyebrow { display: flex; justify-content: space-between; }
.agent h3 { font-family: var(--f-display); font-stretch: 112%; font-weight: 700; font-size: 19px; line-height: 1.2; }
.agent p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.agent .metric { border-top: 1px solid var(--ink); padding-top: 10px; font-family: var(--f-display); font-stretch: 118%; font-weight: 740; font-size: 22px; letter-spacing: -.02em; line-height: 1.1; }
.agent .metric span { display: block; font-family: var(--f-body); font-stretch: 100%; font-weight: 400; font-size: 13px; color: var(--muted); letter-spacing: 0; margin-top: 4px; }
@media (max-width: 1000px) { .agents { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .agents { grid-template-columns: minmax(0, 1fr); } }

/* ---- Who we help: paperwork by industry ---- */
.papers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .papers { grid-template-columns: minmax(0, 1fr); } }
.paper-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--bg); border: 1px solid var(--line); transition: border-color var(--t-fast); }
.paper-card:hover { border-color: var(--ink); }
.paper-card .desk { background: var(--surface-2); padding: 28px 20px; display: grid; place-items: center; overflow: hidden; }
.paper-card .doc { transform: rotate(-2deg); padding: 14px 16px 16px; transition: transform var(--t-med) var(--ease); box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 12px 24px -14px rgba(21, 24, 26, .4); }
.paper-card:nth-child(even) .doc { transform: rotate(1.6deg); }
/* Hover straightens every card's document, including the ones tilted the other way. */
.paper-card:hover .doc, .paper-card:focus-visible .doc { transform: rotate(0deg); }
.paper-card .doc .f { background-size: 100% 100%; font-size: 12px; }
.paper-card .dgrid small { font-size: 7.5px; }
.paper-card .dgrid > div { padding: 5px 6px; }
.paper-card .doc-title { font-size: 10.5px; }
.paper-card .fax-line { font-size: 8px; margin-bottom: 10px; }
.paper-info { padding: 24px; display: grid; gap: 14px; align-content: start; }
.paper-info h3 { font-family: var(--f-display); font-stretch: 118%; font-weight: 720; font-size: 25px; line-height: 1.05; letter-spacing: -.025em; }
.paper-info p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.paper-metric { border-top: 1px solid var(--ink); padding-top: 12px; display: grid; gap: 2px; }
.paper-metric strong { font-family: var(--f-display); font-stretch: 118%; font-weight: 740; font-size: 26px; letter-spacing: -.025em; line-height: 1.05; }
.paper-metric span { font-size: 13.5px; color: var(--muted); }
.paper-info .btn-text { justify-self: start; }
@media (max-width: 620px) { .paper-card { grid-template-columns: minmax(0, 1fr); } }
.other-ind { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; border: 1px dashed var(--line-strong); }
.other-ind strong { font-family: var(--f-display); font-stretch: 112%; font-weight: 700; font-size: 19px; }

/* ---- Our promise ---- */
/* The offer, in three steps on the promise paper (free assessment, a six-month team, 30 days to decide), then a dark
   panel with the guarantee: $0 if you cancel in the first 30 days, the reasons you may cancel, and the closing line. */
.promise { padding-block: var(--sec-y); }
.promise .h-big { max-width: 22ch; }
.promise .h-big .mark { color: #15181A; }
.promise-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: p;
  margin-top: 8px; padding: 26px 32px 30px; background-color: #FBFAF5; color: #1E2022;
  background-image: repeating-linear-gradient(transparent 0 27px, rgba(21, 24, 26, .035) 27px 28px);
  border: 1px solid #D5DADA; border-top: 2px solid #1E2022; transform: rotate(-.6deg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 18px 40px -22px rgba(21, 24, 26, .35); }
.promise-list li { counter-increment: p; padding: 22px 28px 6px 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 12px; align-content: start; }
.promise-list li + li { padding-left: 28px; border-left: 1px solid #D5DADA; }
.promise-list li::before { content: counter(p, decimal-leading-zero); padding-bottom: 3px; box-shadow: inset 0 -3px 0 #F2C230; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 12px; font-weight: 600; color: #1E2022; }
.promise-list .pr-k { align-self: end; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6D6F68; }
.promise-list h3, .promise-list p { grid-column: 1 / -1; }
.promise-list h3 { font-family: var(--f-display); font-stretch: 118%; font-weight: 740; font-size: clamp(21px, 2vw, 26px); line-height: 1.12; letter-spacing: -.015em; color: #1E2022; }
.promise-list p { font-size: 15.5px; line-height: 1.5; color: #3A3D38; }
/* The guarantee */
.promise-deal { margin-top: 44px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px clamp(32px, 5vw, 72px); align-items: center; padding: clamp(26px, 3.4vw, 44px); }
.pd-zero { display: grid; gap: 8px; align-content: start; }
.pd-k { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--panel-muted); }
/* The condition reads as one sentence with the number: "If you cancel in the first 30 days, you pay $0". */
.pd-zero .pd-if { font-family: var(--f-display); font-stretch: 118%; font-weight: 750; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -.02em; color: var(--panel-ink); max-width: 20ch; }
.pd-zero strong { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: clamp(88px, 11vw, 150px); line-height: .85; letter-spacing: -.05em; color: var(--c-yellow); }
.pd-zero p { font-size: 16px; line-height: 1.5; color: var(--panel-ink); max-width: 38ch; }
.pd-list { display: grid; gap: 12px; }
.pd-reasons { list-style: none; display: grid; border-top: 1px solid var(--panel-line); }
.pd-reasons li { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--panel-line); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.35; color: var(--panel-ink); }
.pd-reasons li span { flex: 1; }
.pd-reasons b { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #15181A; background: var(--c-yellow); padding: 4px 9px; white-space: nowrap; }
.pd-karl img { width: 48px; height: 48px; object-fit: cover; object-position: 50% 10%; flex: none; }
.pd-kicker { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 32px; padding-top: 26px; border-top: 1px solid var(--panel-line); }
.pd-kicker p { font-family: var(--f-display); font-stretch: 118%; font-weight: 700; font-size: clamp(18px, 1.8vw, 23px); line-height: 1.25; color: var(--panel-ink); max-width: 34ch; }
.pd-kicker strong { display: block; margin-top: 6px; font-stretch: 125%; font-weight: 800; font-size: clamp(32px, 4vw, 54px); line-height: 1; letter-spacing: -.035em; color: var(--c-yellow); }
:root[data-theme="dark"] .promise-deal { border: 1px solid var(--line-strong); }
@media (max-width: 1000px) { .promise-list { grid-template-columns: minmax(0, 1fr); } .promise-list li, .promise-list li + li { padding: 20px 0 18px; border-left: 0; } .promise-list li + li { border-top: 1px solid #D5DADA; } .promise-deal { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .promise-list { padding: 8px 20px 12px; transform: rotate(-.4deg); } .pd-reasons li { flex-wrap: wrap; } }

/* ---- Read. Decide. Act. ---- */
.rda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .9fr); border-top: 2px solid var(--ink); }
.rda > div { padding: 28px 24px 8px 0; display: grid; gap: 14px; align-content: start; }
.rda > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.rda .word { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: clamp(40px, 4.6vw, 64px); line-height: .9; letter-spacing: -.045em; }
.rda .word .dot { color: var(--yellow); }
.rda p { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); max-width: 30ch; }
.rda .eg { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11px; color: var(--muted); line-height: 1.6; }
.rda .human { background: var(--bg); border: 1px solid var(--line); padding: 24px !important; margin-left: 24px; }
.rda .human .word { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; letter-spacing: -.03em; }
.rda .human .circle { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--forest); }
@media (max-width: 1080px) { .rda { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rda .human { grid-column: 1 / -1; margin: 24px 0 0; } }
@media (max-width: 700px) { .rda { grid-template-columns: minmax(0, 1fr); } .rda > div, .rda > div + div { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--line); } }

/* ---- Lab strip ---- */
.proof { border: 1.5px solid var(--ink); background: var(--surface); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); }
.proof-head { background: var(--c-yellow); color: #15181A; padding: 28px; display: grid; gap: 14px; align-content: space-between; }
.proof-head h2 { font-family: var(--f-display); font-stretch: 125%; font-weight: 780; font-size: clamp(28px, 3vw, 38px); line-height: .98; letter-spacing: -.035em; }
.proof-head p { font-size: 15px; line-height: 1.5; color: #2A3033; }
.proof-head .lab-lock { border-color: #15181A; color: #15181A; justify-self: start; }
.proof-head .lab-lock .lab { background: #15181A; color: #F2C230; border-color: #15181A; }
.proof-head .btn { background: #15181A; color: #F2C230; border-color: #15181A; justify-self: start; }
.pr-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, .9fr) 20px; gap: 18px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); transition: background var(--t-fast); }
.pr-row:last-child { border-bottom: 0; }
.pr-row:hover { background: var(--surface-2); }
.pr-row .id { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pr-row .q { font-size: 16px; font-weight: 600; line-height: 1.35; }
.pr-row .r { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 900px) { .proof { grid-template-columns: minmax(0, 1fr); } .pr-row { grid-template-columns: 90px minmax(0, 1fr); } .pr-row .r { grid-column: 2; } .pr-row .arr { display: none; } }

/* ---- Leaders ---- */
.leads2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lead-card { display: grid; grid-template-columns: 170px minmax(0, 1fr); border: 1px solid var(--line); transition: border-color var(--t-fast); min-width: 0; }
.lead-card:hover { border-color: var(--ink); }
.lead-card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); min-height: 220px; }
.lead-card .txt { padding: 22px; display: grid; gap: 10px; align-content: start; }
.lead-card.cto { background: #0B0E0F; color: #ECEBE4; border-color: #0B0E0F; }
.lead-card.cto p { color: #C9CBC5; }
.lead-card.ceo { background: #ECEAE4; color: #1E211F; }
.lead-card .latest { font-family: var(--f-display); font-stretch: 118%; font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -.015em; }
.lead-card.ceo .latest { font-family: var(--f-serif); font-stretch: 100%; font-weight: 500; font-size: 23px; }
.lead-card p { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.lead-card .reg-note { font-size: 10.5px; }
.lead-card.ceo .reg-note { color: #1F5641; }
.lead-card.ceo .reg-note i { background: #1F5641; }
@media (max-width: 1000px) { .leads2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .lead-card { grid-template-columns: minmax(0, 1fr); } .lead-card img { max-height: 240px; } }

/* ---- Final CTA ---- */
.cta-final h2 .mark { color: #15181A; }

/* One section rhythm on the homepage: every section uses the hero's tighter vertical spacing. */
body[data-template="index"] .cta-band { padding-block: var(--sec-y); }

/* ---- Follow a workflow: one request moving through documents, your systems and human review ----
   Steps on the left; on the right three lanes, where each step's card appears in its lane, in order.
   Past steps stay visible (done), the current one is outlined, later ones keep their space but stay hidden,
   so the layout never moves. Without JavaScript every step is shown. */
.fw { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 28px; margin-top: clamp(24px, 3vw, 36px); }
.fw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; border-top: 2px solid var(--ink); padding-top: 12px; }
.fw-step { position: relative; overflow: hidden; width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: baseline; text-align: left; padding: 12px 12px; background: transparent; border: 1px solid transparent; color: var(--ink-2); font: inherit; cursor: pointer; }
.fw-n { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 12px; font-weight: 600; color: var(--muted); }
.fw-t { font-family: var(--f-display); font-stretch: 106%; font-weight: 650; font-size: 16.5px; line-height: 1.25; }
.fw-step:hover { border-color: var(--line-strong); }
.fw-step::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.fw-step.run::after { animation: fw-bar var(--fw-ms, 2500ms) linear forwards; }
.fw.paused .fw-step.run::after { animation-play-state: paused; }
@keyframes fw-bar { to { transform: scaleX(1); } }
.fw-cap { display: none; }

.fw-step[aria-pressed="true"] { background: var(--bg); border-color: var(--ink); color: var(--ink); }
.fw-step[aria-pressed="true"] .fw-n { color: var(--ink); }
.fw-step.seen .fw-n::after { content: " ✓"; }
.fw-stage { min-width: 0; background: var(--bg); border: 1px solid var(--line-strong); border-top: 2px solid var(--ink); }
.fw-lanes, .fw-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fw-lanes span { padding: 10px 16px; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.fw-lanes span + span, .fw-lane + .fw-lane { border-left: 1px solid var(--line); }
.fw-lane { display: grid; gap: 10px; align-content: start; padding: 12px 14px; }
.fw-card { position: relative; z-index: 1; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 6px; align-content: start; transition: opacity 300ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.fw-card .fw-k { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fw-card strong { font-size: 15px; font-weight: 700; }
.fw-card dl { margin: 0; display: grid; gap: 4px; }
.fw-card dl div { display: grid; grid-template-columns: minmax(0, 92px) minmax(0, 1fr); gap: 8px; font-size: 12.5px; line-height: 1.35; }
.fw-card dt { color: var(--muted); }
.fw-card dd { margin: 0; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11.5px; color: var(--ink); overflow-wrap: anywhere; }
.fw-card.done { opacity: 1; }
.fw-card.done strong::after { content: " ✓"; }
.fw-card.now { opacity: 1; border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 rgba(21, 24, 26, .1); }
.fw-card.later { opacity: .32; border-style: dashed; border-color: var(--line-strong); background: transparent; }
.fw-static .fw-card.done { opacity: 1; }
.fw-foot { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; padding: 16px; border-top: 1px solid var(--line); }
.fw-text { flex: 1 1 320px; display: grid; }
.fw-say { grid-area: 1 / 1; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); visibility: hidden; }
.fw-say.on { visibility: visible; }
.fw-say strong { color: var(--ink); }
.fw-nav { display: flex; gap: 8px; }
.fw-static .fw-say { display: none; }
.fw-static .fw-card { visibility: visible; opacity: 1; border-color: var(--line); }
.fw-static .fw-step { pointer-events: none; }
.fw-cap { margin-top: 12px; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; color: var(--muted); }
@media (max-width: 900px) {
  .fw { grid-template-columns: minmax(0, 1fr); }
  .fw-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .fw-step { grid-template-columns: minmax(0, 1fr); padding: 8px 6px; text-align: center; }
  .fw-step .fw-t { display: none; }
}
@media (max-width: 640px) {
  .fw-lanes { display: none; }
  .fw-board { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; }
  .fw-lane { display: contents; }
  .fw-card[data-i="0"] { order: 0; } .fw-card[data-i="1"] { order: 1; } .fw-card[data-i="2"] { order: 2; } .fw-card[data-i="3"] { order: 3; } .fw-card[data-i="4"] { order: 4; }
}
.fw-nav .uc-btn { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 6px 10px; background: transparent; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 0; cursor: pointer; }
.fw-nav .uc-btn:hover { border-color: var(--ink); }

/* Traveling tag, connectors and the completion summary */
.fw-board { position: relative; }
.fw-path { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.fw-path path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 3 4; transition: stroke 400ms var(--ease); }
.fw-path path.on { stroke: var(--ink); stroke-dasharray: none; }
.fw-token { position: absolute; left: 0; top: 0; z-index: 2; padding: 3px 8px; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; font-weight: 600; white-space: nowrap; background: var(--ink); color: var(--bg); transition: transform 700ms var(--ease); pointer-events: none; }
.fw-token.done::after { content: " ✓"; }
.fw-card.done strong::after { content: " ✓"; }
.fw-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.fw-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.fw-chips span { padding: 3px 8px; border: 1px solid currentColor; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11px; font-weight: 600; }
.fw-chips span::before { content: "✓ "; }
.fw-case { font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.fw-foot { transition: background 300ms var(--ease), color 300ms var(--ease); }
.fw.complete .fw-foot { background: var(--panel); color: var(--panel-ink); }
.fw.complete .fw-say strong { color: var(--panel-ink); }
.fw.complete .fw-nav .uc-btn { color: var(--panel-ink); border-color: var(--panel-line); }
.fw-static .fw-token { display: none; }
.fw-static .fw-say.fw-sum { display: flex; visibility: visible; }
.fw-static .fw-nav { display: none; }
@media (prefers-reduced-motion: reduce) { .fw-token, .fw-path path, .fw-card, .fw-foot { transition: none; } }
.fw.complete .fw-say, .fw.complete .fw-case { color: var(--panel-ink); }
.fw.complete .fw-chips span { border-color: var(--panel-ink); }
.fw.complete .fw-case:hover { color: #F2C230; }
.fw-real { margin-top: 16px; display: flex; justify-content: flex-end; }
@media (max-width: 900px) { .fw-real { justify-content: flex-start; } }

/* ---- What we do: four white service cards (2x2, stacked on phones), a compact tools row and a quieter UiPath strip ---- */
.wwd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; margin-top: clamp(28px, 3.4vw, 44px); }
/* Each service on the same ruled paper as Our promise (#FBFAF5), slightly tilted; it straightens on hover. */
.wwd-card { --ink: #1E2022; --ink-2: #3A3D38; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 22px 26px 24px; color: #1E2022; background-color: #FBFAF5; background-image: repeating-linear-gradient(transparent 0 27px, rgba(21, 24, 26, .035) 27px 28px); border: 1px solid #D5DADA; border-top: 2px solid #1E2022; box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 18px 40px -22px rgba(21, 24, 26, .35); transform: rotate(-.4deg); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.wwd-card:nth-child(even) { transform: rotate(.4deg); }
.wwd-card:hover, .wwd-card:focus-visible { transform: rotate(0deg) translateY(-2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 24px 44px -22px rgba(21, 24, 26, .45); }
@media (prefers-reduced-motion: reduce) { .wwd-card, .wwd-card:nth-child(even), .wwd-card:hover { transform: none; } }
.wwd-card:hover h3 { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 4px; text-underline-offset: 5px; }
.wwd-n { justify-self: start; padding: 2px 7px; background: var(--yellow); color: var(--on-yellow); font-family: var(--f-mono); font-stretch: 87.5%; font-size: 12px; font-weight: 600; }
.wwd-card h3 { font-family: var(--f-display); font-stretch: 118%; font-weight: 720; font-size: clamp(21px, 2vw, 27px); line-height: 1.12; letter-spacing: -.02em; }
.wwd-card p { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); max-width: 48ch; }
.wwd-card .btn-text { justify-self: start; margin-top: 6px; }
.wwd-card:hover .arr { transform: translateX(4px); }
.wwd-tools { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 18px; padding: 12px 0;  }
.wwd-tools-k { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wwd-tools-v { font-size: 15px; font-weight: 600; color: var(--ink); }
/* "Already using UiPath?" on the same ruled paper as the service cards, so it reads as a fifth option, not a footnote. */
.wwd-uipath { --ink: #1E2022; --ink-2: #3A3D38; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 20px; padding: 20px 26px; color: var(--ink-2); font-size: 16px; line-height: 1.45; background-color: #FBFAF5; background-image: repeating-linear-gradient(transparent 0 27px, rgba(21, 24, 26, .035) 27px 28px); border: 1px solid #D5DADA; border-top: 2px solid #1E2022; box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 18px 40px -22px rgba(21, 24, 26, .35); transform: rotate(-.25deg); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.wwd-uipath:hover, .wwd-uipath:focus-visible { transform: rotate(0deg) translateY(-2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 24px 44px -22px rgba(21, 24, 26, .45); }
@media (prefers-reduced-motion: reduce) { .wwd-uipath, .wwd-uipath:hover { transform: none; } }
.wwd-uipath img { width: 92px; height: auto; filter: brightness(0); opacity: .8; flex: none; }
.wwd-uipath-t { flex: 1 1 320px; }
.wwd-uipath-t strong { color: var(--ink); }
.wwd-uipath .btn-text { font-size: 15px; color: #1E2022; }
.wwd-uipath:hover .btn-text { text-decoration-color: var(--yellow); }
:root[data-theme="dark"] .wwd-uipath img { filter: brightness(0); }
@media (max-width: 760px) { .wwd-grid { grid-template-columns: minmax(0, 1fr); } }

/* Work: the paper case cards (site.css), numbers on a graphite strip. */
#work .stats { background: var(--panel); color: var(--panel-ink); border: 0; padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 36px); }
#work .stats .stat { border-color: var(--panel-line); }
#work .stats .stat strong { color: var(--yellow); }
#work .stats .stat span { color: var(--panel-muted); }
:root[data-theme="dark"] #work .stats { background: #050707; border: 1px solid var(--panel-line); }