/* Dedicated Teams (/dedicated-teams). Loaded after svc.css and uipath.css.
   Who does what: two ruled lists side by side. The agreement timeline: a paper strip on the dark section with
   four stops (free assessment, team starts, day 30, months 2–6); the 30-day window between Day 1 and Day 30 is
   yellow and fills in as the strip scrolls into view, where supported. */
.dt-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(40px, 5vw, 80px); margin-top: 28px; }
@media (max-width: 760px) { .dt-roles { grid-template-columns: minmax(0, 1fr); } }

.dt-time { --paper: #FBFAF5; --type: #1E2022; --faint-type: #6D6F68; --rule-type: #BDBBB2; position: relative; margin: clamp(36px, 4vw, 52px) 0 0; padding: 20px 24px 22px; background: var(--paper); color: var(--type); box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 26px 50px -24px rgba(0, 0, 0, .7); isolation: isolate; }
.dt-time::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); }
.dt-line { list-style: none; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 8px; padding: 0; }
/* The rail: dashed before the team starts, yellow for the 30 days, solid after. The last stop has no line
   after it on a phone, where the rail runs down the left. */
.dt-line::before { content: ""; position: absolute; left: 0; right: 0; top: 33px; border-top: 2px dashed var(--rule-type); }
.dt-line li { position: relative; display: grid; gap: 6px; align-content: start; padding: 0 18px 0 0; }
.dt-line li::before { content: ""; position: relative; z-index: 1; width: 14px; height: 14px; margin: 9px 0 10px; background: var(--paper); border: 2px solid var(--type); order: 1; }
.dt-line li > * { order: 2; }
.dt-line li .dt-when { order: 0; }
.dt-line li.dt-start::after, .dt-line li.dt-key::after, .dt-line li.dt-end::after { content: ""; position: absolute; top: 32px; left: 14px; right: 0; height: 4px; background: var(--type); }
.dt-line li.dt-start::after { background: #F2C230; height: 8px; top: 30px; transform-origin: left; }
.dt-line li.dt-key::before { background: #F2C230; }
.dt-line li.dt-pre::before { border-style: dashed; }
.dt-when { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint-type); }
.dt-line strong { font-family: var(--f-display); font-stretch: 112%; font-weight: 720; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.2; letter-spacing: -.01em; }
.dt-line li > span:last-child { font-size: 15px; line-height: 1.5; color: #3A3D3A; }
.dt-cap { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--rule-type); font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11px; line-height: 1.5; color: var(--faint-type); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dt-line li.dt-start::after { animation: dtFill linear both; animation-timeline: view(); animation-range: entry 70% cover 45%; }
  }
}
@keyframes dtFill { from { transform: scaleX(0); } to { transform: none; } }
@media (max-width: 760px) {
  .dt-line { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .dt-line::before { top: 0; bottom: 0; left: 6px; right: auto; border-top: 0; border-left: 2px dashed var(--rule-type); }
  .dt-line li { padding: 0 0 0 30px; }
  .dt-line li::before { position: absolute; left: 0; top: 2px; margin: 0; }
  .dt-line li.dt-start::after, .dt-line li.dt-key::after, .dt-line li.dt-end::after { top: 16px; bottom: -18px; left: 5px; right: auto; width: 4px; height: auto; }
  .dt-line li.dt-start::after { width: 8px; left: 3px; transform-origin: top; }
  .dt-line li.dt-end::after { display: none; }
  .dt-time .up-top span + span { display: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) { .dt-line li.dt-start::after { animation-name: dtFillY; } }
}
@keyframes dtFillY { from { transform: scaleY(0); } to { transform: none; } }