/* The existing four-step layout, with a shared, reversible product story. */
.process-section { --process-offset: 76px; padding-block: 100px 96px; }
.process-sticky { display: grid; grid-template-columns: minmax(300px, .36fr) minmax(0, .64fr); grid-template-areas: "heading heading" "steps visual"; gap: 36px 50px; align-items: center; }
.process-section .section-heading { grid-area: heading; margin-bottom: 0; }
.process-section h2 { font-size: clamp(43px, 4.4vw, 66px); }
.process-section .section-intro { max-width: 445px; padding-bottom: 7px; }
.process-visual { grid-area: visual; display: grid; place-items: center; height: 100%; min-height: 330px; margin: 0; }
.process-film { display: block; width: 100%; height: 100%; overflow: visible; }
.process-film text { fill: var(--navy); font-family: var(--font); font-size: 11px; }
.process-film .process-data-title { font-size: 12px; font-weight: 650; }
.process-film .process-data-value { font-size: 13px; font-weight: 550; }
.process-film .process-ui-brand { font-size: 12px; font-weight: 750; letter-spacing: -.5px; }
.process-film .process-ui-title { font-size: 16px; font-weight: 700; letter-spacing: -.5px; }
.process-film .process-ui-card { font-size: 12px; font-weight: 600; letter-spacing: -.25px; }
.process-film .process-ui-button { font-size: 11px; font-weight: 550; fill: var(--offwhite); }
.process-film .process-browser-address, .process-film .process-editor-label { font-size: 9px; fill: var(--muted); }
.process-film .process-live text { font-size: 8px; font-weight: 650; letter-spacing: .5px; }
.process-film [data-process-code] text { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 12.5px; white-space: pre; }
.process-film [data-piece="card-two"] [data-process-code] text { fill: var(--ocean); }
.process-film [data-piece="card-two"] [data-code-line]:nth-child(4) { fill: var(--pink); }
.process-film [data-process-body] > path { stroke-opacity: .28; }
.process-ui-stroke { stroke: var(--navy); stroke-opacity: .4; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.process-connections path { stroke: var(--navy); stroke-width: 1; stroke-opacity: .3; stroke-dasharray: 1; }
.process-film [data-process-metric] { font-size: 29px; font-weight: 650; letter-spacing: -1px; }
.process-film .process-growth-variant text:last-child { fill: var(--offwhite); }
.process-growth-arrow { stroke-dasharray: 1; }
.process-journey { grid-area: steps; position: relative; }
.process-path { position: absolute; top: 26.5px; bottom: 17px; left: 26.5px; width: 2px; background: var(--line); }
.process-path > span { display: block; width: 100%; height: 100%; background: var(--pink); transform: scaleY(1); transform-origin: top; }
.process-steps { display: grid; grid-template-columns: 1fr; gap: 20px; }
.process-steps > li { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; }
.step-heading { position: relative; display: flex; align-items: center; width: max-content; align-self: start; background: var(--offwhite); }
.step-number { position: absolute; z-index: 1; left: -7px; top: -7px; border: 2px solid var(--offwhite); color: var(--offwhite); background: var(--navy); width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 650; }
.step-icon { display: grid; place-items: center; width: 53px; height: 53px; border-radius: 50%; font-size: 28px; color: var(--offwhite); background: var(--navy-light); transform: scale(var(--step-scale, 1)); }
.step-icon > .glyph-icon { display: block; }
.process-steps li:nth-child(2) .step-number, .process-steps li:nth-child(2) .step-icon { background: var(--pink); }
.process-steps li:nth-child(3) .step-number, .process-steps li:nth-child(3) .step-icon { background: var(--gold); color: var(--navy); }
.process-steps li:nth-child(4) .step-number, .process-steps li:nth-child(4) .step-icon { background: var(--ocean); }
.process-steps h3 { font-size: 19px; letter-spacing: -.04em; }
.process-steps p { max-width: 340px; margin-top: 6px; font-size: 12px; line-height: 1.65; color: #455773; }
.step-detail { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 650; color: var(--muted); }
.process-step-art { display: none; }
/* Entrance spacing sits outside the pinned viewport, keeping all four steps in view. */
.process-section.is-scroll-process { height: 300svh; margin-block-start: clamp(64px, 6vw, 100px); padding-block: 0; scroll-margin-top: -34px; }
.is-scroll-process .process-sticky { position: sticky; top: var(--process-offset); height: calc(100svh - var(--process-offset)); grid-template-rows: auto minmax(0, 1fr); row-gap: clamp(16px, 2.3vh, 28px); padding-block: clamp(20px, 3vh, 36px); }
.is-scroll-process .section-heading { margin: 0; }
.is-scroll-process .process-visual { height: auto; min-height: 0; margin: 0; }
.is-scroll-process .step-heading { opacity: var(--step-heading-opacity, .5); }
.is-scroll-process .step-copy { opacity: var(--step-opacity, .65); transform: translateY(var(--step-shift, 0px)); }
.is-scroll-process .is-active .step-detail { color: var(--pink); }
.is-process-in-view .process-piece { will-change: transform, opacity; }

/* Short windows use the regular, unpinned presentation. */
@media (min-width: 1001px) and (max-height: 790px) {
  .is-scroll-process .process-sticky { padding-block: 20px; gap: 16px 38px; }
  .is-scroll-process .section-heading .eyebrow { margin-bottom: 12px; }
  .is-scroll-process h2 { font-size: 48px; }
  .is-scroll-process .process-steps { gap: 14px; }
  .is-scroll-process .process-steps h3 { font-size: 18px; }
  .is-scroll-process .process-steps p { font-size: 11.5px; line-height: 1.6; }
  .is-scroll-process .step-detail { margin-top: 6px; font-size: 10px; }
}

@media (max-width: 1000px) {
  .process-section { padding-block: 72px; }
  .process-sticky { display: block; }
  .process-section .section-heading { margin-bottom: 40px; }
  .process-section .section-intro { font-size: 13px; }
  .process-visual { display: none; }
  .process-path { display: none; }
  .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 38px; }
  .process-steps > li { padding-right: 0; }
  .process-steps > li { grid-template-columns: 62px minmax(0, 1fr); column-gap: 14px; }
  .process-steps p { max-width: 360px; }
  .process-step-art { display: block; width: 220px; max-width: 100%; height: auto; margin-top: 18px; }
  .process-step-art text { fill: var(--navy); font-family: var(--font); font-size: 10px; }
  .process-step-art .process-local-code { font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; }
  .process-step-art .process-local-button { fill: var(--offwhite); font-size: 9px; }
  .process-step-art .process-local-metric { font-size: 22px; font-weight: 600; }
  .process-step-art path[data-local-part] { stroke-dasharray: 1; }
}

@media (max-width: 760px) {
  .process-section { padding-block: 65px; }
  .process-section .section-heading { margin-bottom: 33px; }
  .process-section h2 { font-size: 46px; }
  .process-steps { grid-template-columns: 1fr; gap: 0; }
  .process-steps > li { display: grid; grid-template-columns: 71px minmax(0, 1fr); column-gap: 23px; padding-block: 24px; border-bottom: 1px solid var(--line); }
  .process-steps > li:first-child { border-top: 1px solid var(--line); }
  .step-heading { grid-column: 1; grid-row: 1; align-self: start; padding: 0; }
  .step-icon { width: 47px; height: 47px; font-size: 24px; }
  .step-number { position: absolute; left: -7px; top: -7px; width: 23px; height: 23px; font-size: 10px; border: 2px solid var(--offwhite); z-index: 1; }
  .step-copy { grid-column: 2; }
  .process-steps h3 { margin-top: 0; font-size: 20px; }
  .process-steps p { font-size: 12px; }
  .step-detail { margin-top: 12px; font-size: 10px; }
  .process-path { display: block; top: 48px; bottom: 115px; left: 23.5px; right: auto; width: 2px; height: auto; }
  .process-path > span { transform: scaleY(1); transform-origin: top; }
}

@media (prefers-reduced-motion: reduce) {
  .process-section.is-scroll-process { height: auto; padding-block: 100px 96px; }
  .is-scroll-process .process-sticky { position: static; height: auto; padding: 0; }
  .is-scroll-process .step-heading, .is-scroll-process .step-copy { opacity: 1; transform: none; }
  .process-piece { will-change: auto; }
}