.cw-pf {
	--cw-pf-accent: #17402e;
	--cw-pf-on-accent: #fff;
	--cw-pf-number: #17402e;
	--cw-pf-circle: #fff;
	--cw-pf-line: #d7ded8;
	--cw-pf-ink: #101512;
	--cw-pf-muted: #59635d;
	--cw-pf-size: 56px;
	--cw-pf-step-padding: 20px;
	--cw-pf-content-gap: 24px;
	--cw-pf-intro-gap: 48px;
	--cw-pf-vertical-gap: 32px;
	width: 100%;
	min-width: 0;
	container-type: inline-size;
	color: var(--cw-pf-ink);
}
/* container-type makes .cw-pf's min-content width 0, so inside an Elementor flex
   container the auto-width wrapper is measured with text wrapped at ~0px and ends up
   thousands of px tall. A definite width avoids that; custom widget widths still win. */
.elementor-widget-cw-process-flow:not([class*="elementor-widget__width-"]) { width: 100%; }
.cw-pf *, .cw-pf *::before, .cw-pf *::after { box-sizing: border-box; }
.cw-pf__intro { margin-bottom: var(--cw-pf-intro-gap); text-align: center; }
.cw-pf .cw-pf__eyebrow { margin: 0 0 12px; color: var(--cw-pf-accent); font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; }
.cw-pf .cw-pf__heading { margin: 0; padding: 0; font-size: clamp(28px, 3.2vw, 44px); font-weight: 700; line-height: 1.15; letter-spacing: -.035em; color: var(--cw-pf-ink); text-wrap: balance; overflow-wrap: anywhere; }
.cw-pf .cw-pf__intro-text { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--cw-pf-muted); }
.cw-pf__viewport { overflow-x: auto; padding: 4px 0 12px; scrollbar-width: thin; scrollbar-color: var(--cw-pf-line) transparent; }
.cw-pf__viewport:focus-visible { outline: 2px solid var(--cw-pf-accent); outline-offset: -2px; }
.cw-pf .cw-pf__steps { display: grid; grid-template-columns: repeat(var(--cw-pf-count), minmax(180px, 1fr)); list-style: none; margin: 0; padding: 0; }
.cw-pf .cw-pf__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--cw-pf-content-gap); margin: 0; padding: 0 var(--cw-pf-step-padding); min-width: 0; text-align: center; }
/* Each line connects adjacent circle edges; the last step has no trailing line. */
.cw-pf__step:not(:last-child)::after { content: ''; position: absolute; inset-block-start: calc(var(--cw-pf-size) / 2); inset-inline-start: calc(50% + var(--cw-pf-size) / 2 + 8px); inline-size: calc(100% - var(--cw-pf-size) - 16px); block-size: 1px; background: var(--cw-pf-line); pointer-events: none; }
.cw-pf .cw-pf__number { display: grid; place-items: center; flex: none; width: var(--cw-pf-size); height: var(--cw-pf-size); padding: 4px; border: 1px solid var(--cw-pf-line); border-radius: 50%; color: var(--cw-pf-number); background: var(--cw-pf-circle); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.cw-pf .cw-pf__step--emphasized .cw-pf__number { color: var(--cw-pf-on-accent); background: var(--cw-pf-accent); border-color: var(--cw-pf-accent); }
.cw-pf__content { min-width: 0; width: 100%; }
.cw-pf .cw-pf__title { margin: 0; padding: 0; color: var(--cw-pf-ink); font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cw-pf .cw-pf__description { margin: 12px 0 0; color: var(--cw-pf-muted); font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.cw-pf--no-lines .cw-pf__step::after { display: none; }
@media (max-width: 767px) {
	.cw-pf .cw-pf__steps { display: block; }
	.cw-pf .cw-pf__step { display: grid; grid-template-columns: var(--cw-pf-size) minmax(0, 1fr); align-items: start; gap: var(--cw-pf-content-gap); padding: 0 0 var(--cw-pf-vertical-gap); text-align: start; }
	.cw-pf .cw-pf__step:last-child { padding-bottom: 0; }
	.cw-pf__step:not(:last-child)::after { inset-inline-start: calc(var(--cw-pf-size) / 2); inset-block-start: calc(var(--cw-pf-size) + 8px); inline-size: 1px; block-size: calc(100% - var(--cw-pf-size) - 16px); }
	.cw-pf__content { padding-top: 4px; }
}
/* The same readable layout also works in narrow Elementor columns on desktop. */
@container (max-width: 600px) {
	.cw-pf .cw-pf__steps { display: block; }
	.cw-pf .cw-pf__step { display: grid; grid-template-columns: var(--cw-pf-size) minmax(0, 1fr); align-items: start; gap: var(--cw-pf-content-gap); padding: 0 0 var(--cw-pf-vertical-gap); text-align: start; }
	.cw-pf .cw-pf__step:last-child { padding-bottom: 0; }
	.cw-pf__step:not(:last-child)::after { inset-inline-start: calc(var(--cw-pf-size) / 2); inset-block-start: calc(var(--cw-pf-size) + 8px); inline-size: 1px; block-size: calc(100% - var(--cw-pf-size) - 16px); }
	.cw-pf__content { padding-top: 4px; }
}