/* Customer journey map (includes/visuals/journey.php) */
.jy-stages, .jy-tp { list-style: none; margin: 0; padding: 0; }
.jy-name { margin: 0; display: flex; align-items: baseline; gap: 8px; font-family: var(--font-sans); font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--white); }
.jy-num { font-size: 12px; font-weight: 600; color: var(--green); font-variant-numeric: tabular-nums; }
.jy-q { margin: 0; font-family: var(--font-serif); font-size: 18px; line-height: 1.3; color: var(--forest); }
.jy-q::before { content: "«\00a0"; } .jy-q::after { content: "\00a0»"; }
:lang(en) .jy-q::before { content: "“"; } :lang(en) .jy-q::after { content: "”"; }
.jy-tp { display: flex; flex-wrap: wrap; gap: 6px; }
.jy-tp li { padding: 4px 9px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.3; color: var(--ink); }
.section--paper .jy-tp li { background: var(--paper); border-color: transparent; }
.jy-feel { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.jy-word { font-weight: 600; font-style: italic; color: var(--forest); }
.jy-mark { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--forest); }
.jy-mark-k { display: block; margin-bottom: 2px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.jy-mark--truth { background: var(--mint); box-shadow: inset 0 0 0 1.5px var(--green-2); }
.jy-mark--truth .jy-mark-k { color: var(--green-text); }
.jy-mark--friction { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--forest); border-left: 5px solid var(--forest); }
.section--paper .jy-mark--friction { background: var(--paper); }
.jy-mark--friction .jy-mark-k { color: var(--ink-2); }
.jy-legend { justify-content: flex-end; }
.jy-k { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.jy-k--truth { background: var(--green); box-shadow: 0 0 0 4px rgba(150, 248, 120, .35); }
.jy-k--friction { width: 12px; height: 12px; margin: 0 3px; background: var(--forest); outline: 1.5px dashed var(--forest); outline-offset: 3px; }

/* curve */
.jy-curve { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }
.jy-base { stroke: #7d8a80; stroke-width: 1.5; stroke-dasharray: 6 8; }
.jy-ax { fill: var(--ink-2); font-size: 22px; font-weight: 600; }
.jy-area { fill: rgba(150, 248, 120, .16); }
.jy-line { fill: none; stroke: var(--forest); stroke-width: 3; stroke-linecap: round; }
.jy-pt { fill: var(--white); stroke: var(--forest); stroke-width: 3; }
.jy-pt--truth { fill: var(--green); }
.jy-pt--friction { fill: var(--forest); }
.jy-halo { fill: rgba(150, 248, 120, .4); }
.jy-ring { fill: none; stroke: var(--forest); stroke-width: 2; stroke-dasharray: 5 5; }

/* ---------- wide screens: matrix ---------- */
@media (min-width: 760px) {
  .jy-map { display: grid; grid-template-columns: 112px repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto auto auto auto; column-gap: 0; }
  .jy-rl { margin: 0; padding: 14px 12px 14px 0; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--green-text); border-top: 1px solid var(--line); }
  .jy-rl--2 { grid-row: 2; } .jy-rl--3 { grid-row: 3; } .jy-rl--4 { grid-row: 4; align-self: center; border-top: 0; } .jy-rl--5 { grid-row: 5; }
  .jy-rl--4 { padding-block: 0; }
  .jy-curve-w { grid-column: 2 / -1; grid-row: 4; padding: 18px 0 46px; border-top: 1px solid var(--line); }
  .jy-feel { grid-row: 4; align-self: end; position: relative; padding: 0 0 12px 12px; }
  .jy-stages { grid-column: 2 / -1; grid-row: 1 / 6; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
  .jy-st { grid-row: 1 / 6; display: grid; grid-template-rows: subgrid; min-width: 0; }
  .jy-name { grid-row: 1; margin-bottom: 4px; padding: 13px 22px 13px 26px; background: var(--forest); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%); margin-right: -10px; }
  .jy-st--1 .jy-name { padding-left: 16px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); border-radius: 8px 0 0 8px; }
  .jy-st--5 .jy-name { margin-right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%); border-radius: 0 8px 8px 0; }
  .jy-st--2 .jy-name, .jy-st--4 .jy-name { background: var(--forest-2); }
  .jy-q { grid-row: 2; padding: 14px 14px 14px 0; border-top: 1px solid var(--line); font-size: 16.5px; font-size: clamp(15px, 1.25vw, 18px); }
  .jy-tp { grid-row: 3; align-content: start; padding: 14px 14px 14px 0; border-top: 1px solid var(--line); }
  .jy-out { grid-row: 5; padding: 4px 14px 0 0; border-top: 1px solid var(--line); }
  .jy-st > * { margin-left: 0; }
  .jy-q, .jy-tp, .jy-out { padding-left: 12px; }
  .jy-feel-l, .jy-gauge { display: none; }
  .jy-feel::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--forest); flex: none; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .jy-map { grid-template-columns: 0 repeat(5, minmax(0, 1fr)); }
  .jy-rl { visibility: hidden; padding: 0; }
  .jy-name { flex-direction: column; gap: 0; font-size: 14px; padding: 10px 18px 10px 22px; }
  .jy-st--1 .jy-name { padding-left: 12px; }
  .jy-q, .jy-tp, .jy-out { padding-left: 8px; padding-right: 8px; }
  .jy-tp li { font-size: 12px; padding: 3px 7px; }
}

/* ---------- phones: vertical timeline ---------- */
@media (max-width: 759px) {
  .jy-rl, .jy-curve-w { display: none; }
  .jy-stages { position: relative; display: grid; gap: 18px; padding-left: 26px; }
  .jy-stages::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; border-left: 2px dashed #7d8a80; }
  .jy-st { position: relative; display: grid; gap: 10px; }
  .jy-st::before { content: ""; position: absolute; left: -26px; top: 9px; width: 16px; height: 16px; border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 4px var(--white); }
  .section--paper .jy-st::before { box-shadow: 0 0 0 4px var(--paper); }
  .jy-name { justify-self: start; padding: 8px 14px; border-radius: 999px; background: var(--forest); }
  .jy-gauge { position: relative; width: 84px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--line), var(--sage), var(--green)); flex: none; }
  .jy-gauge span { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--forest); border: 2px solid var(--white); }
  .jy-lv--0 .jy-gauge span { left: 4%; } .jy-lv--1 .jy-gauge span { left: 27%; } .jy-lv--2 .jy-gauge span { left: 50%; } .jy-lv--3 .jy-gauge span { left: 73%; } .jy-lv--4 .jy-gauge span { left: 96%; }
  .jy-legend { justify-content: flex-start; }
}

/* animation: stage headers slide in like a road, rows fade in, then the curve draws itself and the
   moment of truth starts breathing */
.js .vz-figure .jy-name { opacity: 0; transform: translateX(-16px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .jy-st--1 .jy-name { transition-delay: .1s; } .js .vz-figure .jy-st--2 .jy-name { transition-delay: .2s; }
.js .vz-figure .jy-st--3 .jy-name { transition-delay: .3s; } .js .vz-figure .jy-st--4 .jy-name { transition-delay: .4s; }
.js .vz-figure .jy-st--5 .jy-name { transition-delay: .5s; }
.js .vz-figure .jy-q, .js .vz-figure .jy-tp, .js .vz-figure .jy-feel { opacity: 0; transition: opacity .6s ease .6s; }
.js .vz-figure .jy-tp { transition-delay: .8s; }
.js .vz-figure .jy-line { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease-in-out 1s; }
.js .vz-figure .jy-area, .js .vz-figure .jy-pt, .js .vz-figure .jy-ring, .js .vz-figure .jy-halo { opacity: 0; transition: opacity .5s ease; }
.js .vz-figure .jy-area { transition-delay: 2.2s; }
.js .vz-figure .jy-pt--1 { transition-delay: 1.05s; } .js .vz-figure .jy-pt--2 { transition-delay: 1.4s; } .js .vz-figure .jy-pt--3 { transition-delay: 1.75s; }
.js .vz-figure .jy-pt--4 { transition-delay: 2.1s; } .js .vz-figure .jy-pt--5 { transition-delay: 2.45s; }
.js .vz-figure .jy-ring, .js .vz-figure .jy-halo, .js .vz-figure .jy-feel { transition-delay: 2.4s; }
.js .vz-figure .jy-mark { opacity: 0; transform: translateY(10px); transition: opacity .5s ease 2.6s, transform .6s cubic-bezier(.2, .7, .2, 1) 2.6s; }
.js .vz-figure.is-visible .jy-name { opacity: 1; transform: none; }
.js .vz-figure.is-visible :is(.jy-q, .jy-tp, .jy-feel, .jy-area, .jy-pt, .jy-ring, .jy-halo, .jy-mark) { opacity: 1; }
.js .vz-figure.is-visible .jy-mark { transform: none; }
.js .vz-figure.is-visible .jy-line { stroke-dashoffset: 0; }
.vz-figure.is-visible .jy-halo { animation: jy-breathe 2.8s ease-in-out 3s infinite; transform-box: fill-box; transform-origin: center; }
.vz-figure.is-visible .jy-ring { animation: jy-turn 12s linear 3s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes jy-breathe { 50% { transform: scale(1.25); opacity: .5; } }
@keyframes jy-turn { to { transform: rotate(360deg); } }
@media (max-width: 759px) { .jy-out:empty { display: none; } }