/* Home page "end-to-end work cycle": connected step flow. Colours come from the site theme variables. */
.pc-flow{--pc-marker:4.5rem;position:relative;max-width:72rem;margin:2.75rem auto 0}
.pc-steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--pc-count,4),minmax(0,1fr));gap:1.5rem;margin:0;padding:0;list-style:none}

.pc-track{position:absolute;top:calc(var(--pc-marker) / 2);left:calc(50% / var(--pc-count,4));right:calc(50% / var(--pc-count,4));height:2px;border-radius:999px;background:repeating-linear-gradient(90deg,var(--color-border) 0 8px,transparent 8px 14px);transform:translateY(-50%)}
.pc-track-fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));transform:scaleX(0);transform-origin:left center;transition:transform 1.4s cubic-bezier(.22,1,.36,1) .15s}
.pc-flow.is-visible .pc-track-fill{transform:scaleX(1)}

.pc-step{display:flex;flex-direction:column;align-items:center;text-align:center}
.pc-marker{position:relative;display:grid;place-items:center;width:var(--pc-marker);height:var(--pc-marker);border-radius:50%;background:var(--color-surface);box-shadow:0 0 0 6px var(--color-background),0 14px 30px -16px color-mix(in srgb,var(--color-primary) 70%,transparent);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.pc-marker::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:linear-gradient(135deg,var(--color-primary),var(--color-accent));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.35;transition:opacity .35s}
.pc-flow.is-visible .pc-marker::before{opacity:1;transition-delay:var(--pc-delay,0s)}
.pc-marker-core{display:grid;place-items:center;width:calc(var(--pc-marker) - 1.1rem);height:calc(var(--pc-marker) - 1.1rem);border-radius:50%;background:linear-gradient(135deg,var(--color-accent-soft),var(--color-surface-soft));color:var(--color-primary);transition:background .35s,color .35s}
.dark .pc-marker-core{color:var(--color-accent)}
.pc-num{position:absolute;top:-.3rem;right:-.45rem;min-width:1.75rem;padding:.15rem .4rem;border-radius:999px;background:var(--color-primary);color:#fff;font-size:.68rem;font-weight:700;line-height:1.2;letter-spacing:.04em;box-shadow:0 0 0 3px var(--color-background)}

.pc-card{position:relative;display:flex;flex:1;flex-direction:column;width:100%;margin-top:1.4rem;padding:1.35rem 1.25rem 1.4rem;border:1px solid var(--color-border);border-radius:1.1rem;background:color-mix(in srgb,var(--color-surface) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,border-color .35s}
.pc-card::before{content:"";position:absolute;top:-.5rem;left:50%;width:.9rem;height:.9rem;border-top:1px solid var(--color-border);border-left:1px solid var(--color-border);background:inherit;transform:translateX(-50%) rotate(45deg);transition:border-color .35s}
.pc-label{margin:0;color:var(--color-accent);font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.pc-title{margin:.45rem 0 0;color:var(--color-text);font:700 1.05rem/1.3 var(--font-heading)}
.pc-desc{margin:.5rem 0 0;color:var(--color-muted);font-size:.875rem;line-height:1.6}

.pc-step:hover .pc-marker{transform:translateY(-3px);box-shadow:0 0 0 6px var(--color-background),0 18px 36px -14px color-mix(in srgb,var(--color-primary) 80%,transparent)}
.pc-step:hover .pc-marker-core{background:linear-gradient(135deg,var(--color-primary),var(--color-accent));color:#fff}
.pc-step:hover .pc-card{transform:translateY(-4px);border-color:color-mix(in srgb,var(--color-primary) 30%,transparent);box-shadow:0 22px 44px -28px color-mix(in srgb,var(--color-primary) 60%,transparent)}
.pc-step:hover .pc-card::before{border-color:color-mix(in srgb,var(--color-primary) 30%,transparent)}

@media (max-width:1023px){
  .pc-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.25rem}
  .pc-track{display:none}
}
@media (max-width:639px){
  .pc-flow{--pc-marker:3.5rem;margin-top:2rem}
  .pc-steps{grid-template-columns:1fr;gap:1.25rem}
  .pc-step{position:relative;flex-direction:row;align-items:flex-start;gap:1rem;text-align:left}
  .pc-step:not(:last-child)::after{content:"";position:absolute;top:calc(var(--pc-marker) + 6px);bottom:calc(-1.25rem + -6px);left:calc(var(--pc-marker) / 2);width:2px;border-radius:999px;background:linear-gradient(180deg,var(--color-primary),var(--color-accent));transform:translateX(-50%) scaleY(0);transform-origin:center top;transition:transform .6s cubic-bezier(.22,1,.36,1) var(--pc-delay,0s)}
  .pc-flow.is-visible .pc-step:not(:last-child)::after{transform:translateX(-50%) scaleY(1)}
  .pc-marker{flex:none}
  .pc-marker-core .h-6{width:1.25rem;height:1.25rem}
  .pc-card{margin-top:0}
  .pc-card::before{top:1.25rem;left:-.5rem;transform:rotate(-45deg)}
}
@media (prefers-reduced-motion:reduce){
  .pc-track-fill,.pc-step::after{transition:none!important}
  .pc-marker,.pc-card,.pc-marker-core{transition:none}
  .pc-step:hover .pc-marker,.pc-step:hover .pc-card{transform:none}
}