/* UiPath Services (/uipath-services). Loaded after svc.css. The hero figure shows four automations on the same
   systems: the first is built new, the later ones reuse more of the library and cost less. It builds once on load
   (finished state with reduced motion). The licenses section shows one robot doing the work of three. */

/* ---- Hero ---- */
.up-hero .h1 { max-width: 16ch; }
.up-hero .phero-grid { gap: 40px clamp(40px, 5vw, 80px); }
.up-facts { list-style: none; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 0; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--f-mono); font-stretch: 87.5%; font-size: 12px; letter-spacing: .03em; color: var(--ink-2); }
.up-facts li { padding: 0 14px; }
.up-facts li:first-child { padding-left: 0; }
.up-facts li + li { border-left: 1px solid var(--line-strong); }
@media (max-width: 600px) { .up-facts { grid-template-columns: minmax(0, 1fr); } .up-facts li, .up-facts li + li { padding: 0; border-left: 0; } }

/* The paper figure */
.up-board { --paper: #FBFAF5; --type: #1E2022; --faint-type: #6D6F68; --rule-type: #BDBBB2; position: relative; margin: 0; padding: 20px 22px 18px; background: var(--paper); color: var(--type); transform: rotate(-1deg); box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 26px 50px -24px rgba(0, 0, 0, .7); isolation: isolate; }
.up-board::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); }
.up-top { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px dashed var(--rule-type); font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10px; letter-spacing: .06em; color: var(--faint-type); }
.up-title { font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.up-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 6px 6px; align-items: center; margin-top: 14px; }
.up-h { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: center; color: var(--faint-type); }
.up-l { font-size: 12.5px; line-height: 1.2; }
.up-grid i { display: block; height: 20px; }
.up-grid i.n { background: #F2C230; border: 1px solid color-mix(in srgb, var(--type) 60%, transparent); }
.up-grid i.r { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--type) 34%, transparent) 0 1.5px, transparent 1.5px 5px); border: 1px solid color-mix(in srgb, var(--type) 45%, transparent); }
.up-rule { grid-column: 1 / -1; border-top: 1px dashed var(--rule-type); margin-top: 4px; }
.up-l-cost { align-self: end; padding-bottom: 2px; font-weight: 600; }
.up-cost { display: grid; justify-items: center; gap: 4px; }
.up-cost b { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11px; font-weight: 600; }
.up-cost > span { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 48px; }
.up-cost > span i { width: 34%; height: var(--h); background: var(--type); }
.up-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; letter-spacing: .03em; color: var(--faint-type); }
.up-key span { display: flex; align-items: center; gap: 7px; }
.up-key span::before { content: ""; width: 14px; height: 10px; }
.up-key .k-n::before { background: #F2C230; border: 1px solid color-mix(in srgb, var(--type) 60%, transparent); }
.up-key .k-r::before { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--type) 34%, transparent) 0 1.5px, transparent 1.5px 5px); border: 1px solid color-mix(in srgb, var(--type) 45%, transparent); }
.up-note { margin-top: 8px; font-size: 11.5px; line-height: 1.4; color: var(--faint-type); }
@media (prefers-reduced-motion: no-preference) {
  .up-grid i.n { transform-origin: left; animation: upBuild 380ms ease-out var(--d) both; }
  .up-grid i.r { animation: upReuse 420ms ease-out var(--d) both; }
  .up-cost { animation: upFade 300ms ease-out var(--d) both; }
  .up-cost > span i { transform-origin: bottom; animation: upGrow 500ms ease-out var(--d) both; }
}
@keyframes upBuild { from { transform: scaleX(0); } to { transform: none; } }
@keyframes upReuse { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes upGrow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes upFade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px) { .up-board { transform: none; } }
@media (max-width: 480px) { .up-board { padding: 16px 14px 14px; } .up-l { font-size: 11px; } .up-grid { gap: 5px 4px; } .up-top span + span { display: none; } }

/* ---- Two-column sections ---- */
.up-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px clamp(40px, 5vw, 80px); align-items: start; }
.up-text { display: grid; gap: 16px; align-content: start; }
.up-text .h2 { margin-bottom: 4px; }
.up-text > p { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.up-text .btn-text { justify-self: start; margin-top: 4px; }
.up-strong { font-weight: 650; color: var(--ink) !important; padding-left: 16px; border-left: 3px solid var(--c-yellow); }
.up-lib { border-top: 2px solid var(--ink); padding-top: 16px; }
.up-lib-h { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.up-list { list-style: none; display: grid; margin-top: 8px; }
.up-list li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.45; color: var(--ink); }
.up-list li::before { content: ""; width: 7px; height: 7px; background: var(--ink); transform: translateY(-2px); }
/* The library list uses the striped "reused" chip from the hero figure. */
.up-list-lib li { grid-template-columns: 16px minmax(0, 1fr); }
.up-list-lib li::before { width: 14px; height: 10px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 40%, transparent) 0 1.5px, transparent 1.5px 5px); border: 1px solid color-mix(in srgb, var(--ink) 55%, transparent); transform: none; align-self: center; }
@media (max-width: 900px) { .up-split { grid-template-columns: minmax(0, 1fr); } }

/* ---- Licenses: one robot doing the work of three ---- */
.up-sched { margin: 0; padding: clamp(18px, 2.2vw, 26px); background: var(--surface); border: 1px solid var(--line-strong); }
.us-head { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.us-group { margin-top: 18px; display: grid; gap: 6px; }
.us-gh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 2px; font-weight: 600; font-size: 15px; color: var(--ink); }
.us-gh b { font-family: var(--f-display); font-stretch: 118%; font-weight: 760; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.02em; color: var(--c-yellow); }
.us-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: center; }
.us-row > span { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; color: var(--muted); }
.us-lane { position: relative; height: 24px; background-color: var(--surface-2); background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 25% 100%; border-right: 1px solid var(--line); }
.us-lane i { position: absolute; top: 4px; bottom: 4px; left: calc(var(--s) / 24 * 100%); width: calc((var(--e) - var(--s)) / 24 * 100%); }
.up-sched .a { --fill: #F2C230; }
.up-sched .b { --fill: #E8ECEB; }
.up-sched .c { --fill: repeating-linear-gradient(135deg, #F2C230 0 2px, transparent 2px 6px); }
.us-lane i { background: var(--fill); }
.us-lane i.c { border: 1px solid #F2C230; }
.us-axis { margin-top: 6px; }
.us-axis > div { display: flex; justify-content: space-between; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10px; color: var(--muted); }
.us-axis > div span:first-child { transform: translateX(-2px); }
.us-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; font-size: 13.5px; color: var(--ink-2); }
.us-key span { display: flex; align-items: center; gap: 8px; }
.us-key span::before { content: ""; width: 16px; height: 10px; background: var(--fill); }
.us-key span.c::before { border: 1px solid #F2C230; }
.us-note { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--muted); }

/* ---- Proof ---- */
.up-proof .h2 { max-width: 30ch; margin-top: 14px; }
.up-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.up-case { align-content: start; }
.up-case { --ink: #1E2022; --ink-2: #3A3D3A; --muted: #6D6F68; --line: #C9C4B5; --yellow: #F2C230; position: relative; display: grid; gap: 14px; padding: clamp(22px, 2.6vw, 32px); background: #FBFAF5; color: #1E2022; box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 18px 34px -20px rgba(21, 24, 26, .5); transform: rotate(-.6deg); isolation: isolate; }
.up-case + .up-case { transform: rotate(.5deg); }
.up-case::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); }
.up-case .up-k { padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.up-k, .up-case > .up-k { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.up-case h3 { font-family: var(--f-display); font-stretch: 118%; font-weight: 750; font-size: clamp(21px, 2vw, 26px); line-height: 1.15; letter-spacing: -.015em; color: var(--ink); }
.up-case > p { font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.up-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px dashed var(--line); }
.up-stats > div { padding: 14px 12px 12px 0; }
.up-stats > div + div { padding-left: 14px; border-left: 1px dashed var(--line); }
.up-stats dt { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: -.04em; color: var(--ink); }
.up-stats dd { margin: 6px 0 0; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.up-quote-s { padding-left: 14px; border-left: 3px solid var(--yellow); }
.up-quote-s p { font-family: var(--f-serif); font-style: italic; font-size: 20px; line-height: 1.35; color: var(--ink); }
.up-quote-s cite { display: block; margin-top: 6px; font-style: normal; font-size: 13.5px; color: var(--muted); }
.up-small { font-size: 13px !important; color: var(--muted) !important; }
.up-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 4px; }
@media (max-width: 900px) { .up-cases { grid-template-columns: minmax(0, 1fr); gap: 24px; } .up-case, .up-case + .up-case { transform: none; } }
@media (max-width: 480px) { .up-stats { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .9fr); } .up-stats > div { padding-right: 8px; } .up-stats > div + div { padding-left: 10px; } .up-stats dt { font-size: 23px; } }

/* ---- Why we started: Karl's quote on the left, a page under review with his notes on the right ---- */
.up-why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(40px, 5vw, 80px); align-items: center; }
.up-why-text { display: grid; gap: 14px; justify-items: start; }
.up-karl { margin: 6px 0 0; }
.up-karl blockquote p { font-family: var(--f-display); font-stretch: 112%; font-weight: 600; font-size: clamp(20px, 1.9vw, 24px); line-height: 1.35; letter-spacing: -.01em; color: var(--ink); max-width: 40ch; }
.up-karl figcaption { display: flex; align-items: flex-end; gap: 14px; margin-top: 18px; }
.up-karl .sig-km { width: 210px; }
:root[data-theme="dark"] .up-karl .sig-km { background-color: #9FB0F0; }
@media (max-width: 480px) { .up-karl .sig-km { width: 170px; } }
.up-karl figcaption span { display: grid; font-size: 14px; color: var(--muted); }
.up-karl figcaption strong { color: var(--ink); font-size: 15px; }

/* The picture beside the quote, without words: two systems joined by a tangled, taped-up connection, and below
   the same systems joined by one clean line through reusable components (striped = reused, yellow = new, as in the
   hero figure). A red X marks the tangled one and a green check the clean one. The clean line, the X and the check draw themselves as the picture scrolls into view, where supported. */
.up-craft { --paper: #FBFAF5; --type: #1E2022; --faint-type: #8A8D86; --rule-type: #BDBBB2; --pen: #23357F; position: relative; margin: 0; padding: clamp(16px, 2vw, 24px); background: var(--paper); color: var(--type); transform: rotate(1deg); box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 22px 44px -22px rgba(21, 24, 26, .4); isolation: isolate; }
.up-craft::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); }
.up-craft svg { display: block; width: 100%; height: auto; }
.uc-win rect { fill: var(--paper); stroke: var(--type); stroke-width: 1.6; }
.uc-win path { fill: none; stroke: var(--type); stroke-width: 1.2; }
.uc-win circle { fill: var(--type); }
.uc-win .uc-ln { stroke: var(--faint-type); stroke-width: 3; stroke-linecap: round; }
.uc-mess { fill: none; stroke: var(--faint-type); stroke-width: 1.6; stroke-linecap: round; }
.uc-tape { fill: #E9DDB3; opacity: .9; }
.uc-rule { stroke: var(--rule-type); stroke-width: 1; stroke-dasharray: 4 4; }
.uc-clean { fill: none; stroke: var(--type); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 0; }
.uc-head { fill: none; stroke: var(--type); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.uc-blk { stroke-width: 1.2; }
.uc-blk.uc-r { fill: url(#ucHatch); stroke: color-mix(in srgb, var(--type) 55%, transparent); }
.uc-blk.uc-n { fill: #F2C230; stroke: color-mix(in srgb, var(--type) 60%, transparent); }
/* Red X and green check on purpose (outside the brand colors), so the bad and the good build cannot be mistaken. */
.uc-x, .uc-check { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.uc-x { stroke: #D1342B; }
.uc-check { stroke: #1E9E57; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .uc-clean { animation: ucDraw linear both; animation-timeline: view(); animation-range: entry 40% cover 45%; }
    .uc-head, .uc-blk { animation: ucPop linear both; animation-timeline: view(); animation-range: cover 30% cover 45%; }
    .uc-x { animation: ucDraw linear both; animation-timeline: view(); animation-range: entry 60% cover 30%; }
    .uc-check { animation: ucDraw linear both; animation-timeline: view(); animation-range: cover 42% cover 52%; }
  }
}
@keyframes ucDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ucPop { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px) { .up-why-grid { grid-template-columns: minmax(0, 1fr); } .up-craft { transform: none; } }

/* ---- Where we can help: paper cards, like the proof cards ---- */
.up-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.up-help > div { --ink: #1E2022; --ink-2: #3A3D3A; position: relative; display: grid; gap: 10px; align-content: start; padding: 22px 24px 24px; background: #FBFAF5; color: #1E2022; box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 16px 30px -20px rgba(21, 24, 26, .5); transform: rotate(-.5deg); isolation: isolate; }
.up-help > div:nth-child(even) { transform: rotate(.45deg); }
.up-help > div::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); }
.up-help h3 { padding-bottom: 10px; border-bottom: 1px dashed #C9C4B5; font-family: var(--f-display); font-stretch: 112%; font-weight: 720; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.up-help p { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.up-help .more { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 2px; font-size: 15px; }
.up-help .more a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
@media (max-width: 900px) { .up-help { grid-template-columns: repeat(2, minmax(0, 1fr)); } .up-help > div, .up-help > div:nth-child(even) { transform: none; } }
@media (max-width: 600px) { .up-help { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* More UiPath work, under the two proof cards. */
.up-more { margin-top: 32px; max-width: 80ch; font-size: 17px; line-height: 1.6; color: var(--ink-2); }