/* Prospect pathway (includes/visuals/pathway.php): a band narrowing like a funnel, drops leaving it at each
   stage, and one column per stage (leak, what must be true, fix). Band and columns share one grid. */
.pw { min-width: 0; }
.pw-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pw-stages, .pw-st { display: contents; }
.pw-stages { list-style: none; margin: 0; padding: 0; }
.pw-svg { grid-column: 1 / -1; grid-row: 2; }

/* the band */
.pw-sep { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 6; }
.pw-path { fill: var(--forest); }
.pw-outlet { fill: var(--green); }
.pw-in { fill: var(--white); font-size: 17px; font-weight: 600; letter-spacing: .02em; }
.pw-outt { fill: var(--green-text); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pw-dot { fill: var(--green); }
.pw-leakline { stroke: #7d8a80; stroke-width: 2; stroke-dasharray: 5 5; fill: none; }
.pw-drop { fill: #7d8a80; }
.pw-drip { fill: #7d8a80; opacity: 0; }

/* the columns */
.pw-name, .pw-leak, .pw-checks, .pw-fix { min-width: 0; padding-left: 24px; padding-right: 20px; }
.pw-s2, .pw-s3, .pw-s4 { border-left: 1.5px dashed var(--line); }
.pw-name { grid-row: 1; margin: 0; padding-bottom: 14px; display: flex; align-items: baseline; gap: 10px; font-family: var(--font-serif); font-weight: 600; font-size: 21px; line-height: 1.2; color: var(--forest); }
.pw-num { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: .08em; color: var(--green-text); flex: none; }
.pw-leak { grid-row: 3; padding-top: 4px; padding-bottom: 18px; }
.pw-checks { grid-row: 4; }
.pw-fix { grid-row: 5; background: var(--mint); padding-top: 14px; padding-bottom: 16px; }
.pw-s1.pw-fix { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.pw-s4.pw-fix { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.pw-l { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--green-text); }
.pw-l--leak { color: var(--ink-2); }
.pw-dropi { width: 11px; height: 14px; fill: #7d8a80; flex: none; }
.pw-leak-t { margin: 5px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.pw-list { list-style: none; margin: 8px 0 18px; padding: 0; display: grid; gap: 7px; }
.pw-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; color: var(--forest); }
.pw-ck { width: 15px; height: 15px; flex: none; margin-top: 3px; fill: none; stroke: var(--green-text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pw-fix-t { margin: 5px 0 0; font-size: 14.5px; line-height: 1.45; font-weight: 600; color: var(--forest); }

/* animation: the band draws from the left, the separators and columns follow, the drops fall into place,
   then visitors run along the band (two of them leak out) and the drops drip */
.js .vz-figure .pw-path { transform: scaleX(0); transform-origin: 0 0; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .pw-outlet, .js .vz-figure .pw-in, .js .vz-figure .pw-outt, .js .vz-figure .pw-sep { opacity: 0; transition: opacity .5s ease .9s; }
.js .vz-figure .pw-dot { opacity: 0; transition: opacity .6s ease 1.1s; }
.js .vz-figure .pw-leak-g { opacity: 0; transform: translateY(-16px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .pw-leak-g--1 { transition-delay: .9s; }
.js .vz-figure .pw-leak-g--2 { transition-delay: 1.1s; }
.js .vz-figure .pw-leak-g--3 { transition-delay: 1.3s; }
.js .vz-figure .pw-leak-g--4 { transition-delay: 1.5s; }
.js .vz-figure .pw-name, .js .vz-figure .pw-leak, .js .vz-figure .pw-checks, .js .vz-figure .pw-fix { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .pw-s1 { transition-delay: .4s; }
.js .vz-figure .pw-s2 { transition-delay: .65s; }
.js .vz-figure .pw-s3 { transition-delay: .9s; }
.js .vz-figure .pw-s4 { transition-delay: 1.15s; }
.js .vz-figure.is-visible .pw-path { transform: none; }
.js .vz-figure.is-visible .pw-outlet, .js .vz-figure.is-visible .pw-in, .js .vz-figure.is-visible .pw-outt, .js .vz-figure.is-visible .pw-sep, .js .vz-figure.is-visible .pw-dot { opacity: 1; }
.js .vz-figure.is-visible .pw-leak-g, .js .vz-figure.is-visible .pw-name, .js .vz-figure.is-visible .pw-leak, .js .vz-figure.is-visible .pw-checks, .js .vz-figure.is-visible .pw-fix { opacity: 1; transform: none; }
.vz-figure.is-visible .pw-dot, html:not(.js) .pw-dot { animation: pw-run 7s linear infinite; }
.vz-figure.is-visible .pw-dot--2, html:not(.js) .pw-dot--2 { animation-delay: -1.4s; }
.vz-figure.is-visible .pw-dot--3, html:not(.js) .pw-dot--3 { animation-delay: -2.8s; }
.vz-figure.is-visible .pw-dot--4, html:not(.js) .pw-dot--4 { animation-delay: -4.2s; }
.vz-figure.is-visible .pw-dot--5, html:not(.js) .pw-dot--5 { animation-delay: -5.6s; }
.vz-figure.is-visible .pw-dot--6, html:not(.js) .pw-dot--6 { animation: pw-leak2 7s linear 1.2s infinite; }
.vz-figure.is-visible .pw-dot--7, html:not(.js) .pw-dot--7 { animation: pw-leak3 7s linear 3.6s infinite; }
.vz-figure.is-visible .pw-drip, html:not(.js) .pw-drip { animation: pw-drip 2.6s ease-in 2s infinite; }
.vz-figure.is-visible .pw-leak-g--2 .pw-drip, html:not(.js) .pw-leak-g--2 .pw-drip { animation-delay: 2.7s; }
.vz-figure.is-visible .pw-leak-g--3 .pw-drip, html:not(.js) .pw-leak-g--3 .pw-drip { animation-delay: 3.4s; }
.vz-figure.is-visible .pw-leak-g--4 .pw-drip, html:not(.js) .pw-leak-g--4 .pw-drip { animation-delay: 4.1s; }
@keyframes pw-run { from { transform: translateX(0); } to { transform: translateX(1214px); } }
@keyframes pw-leak2 { 0% { transform: translate(0, 0); opacity: 1; } 44% { transform: translate(334px, 0); opacity: 1; } 58% { transform: translate(334px, 150px); opacity: 0; } 100% { transform: translate(334px, 150px); opacity: 0; } }
@keyframes pw-leak3 { 0% { transform: translate(0, 0); opacity: 1; } 62% { transform: translate(634px, 0); opacity: 1; } 76% { transform: translate(634px, 150px); opacity: 0; } 100% { transform: translate(634px, 150px); opacity: 0; } }
@keyframes pw-drip { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }

/* phones: the band is replaced by a rail that narrows from stage to stage; the stages stack */
@media (max-width: 719px) {
  .pw-grid { display: block; }
  .pw-svg { display: none; }
  .pw-stages { display: grid; gap: 26px; }
  .pw-st { display: block; position: relative; padding-left: 42px; min-width: 0; }
  .pw-st::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 0; width: var(--pw-rail); border-radius: 6px; background: var(--forest); }
  .pw-st--1 { --pw-rail: 26px; }
  .pw-st--2 { --pw-rail: 19px; }
  .pw-st--3 { --pw-rail: 12px; }
  .pw-st--4 { --pw-rail: 6px; }
  .pw-name, .pw-leak, .pw-checks, .pw-fix { padding-left: 0; padding-right: 0; border-left: 0; }
  .pw-name { padding-bottom: 10px; font-size: 20px; }
  .pw-st .pw-fix { padding: 12px 14px 14px; border-radius: var(--radius-sm); }
  .pw-leak { padding-bottom: 14px; }
  .pw-list { margin-bottom: 14px; }
  .js .vz-figure .pw-s1, .js .vz-figure .pw-s2, .js .vz-figure .pw-s3, .js .vz-figure .pw-s4 { transition-delay: .2s; }
}