/* Product illustrations only. The reference section's grid and spacing stay intact. */
[data-pleo-journey] { --journey-green:#17734f; --journey-soft:#14865e0c; }
.dark [data-pleo-journey] { --journey-green:#86c8a9; --journey-soft:#69d9a80f; }
[data-pleo-journey] .text-brand-foreground { color:var(--journey-green); }
[data-pleo-journey] .bg-brand-subtle { background:var(--journey-soft); }
.pj-visual { position:relative;width:100%;height:100%;overflow:hidden;border:1px solid var(--color-border-default);border-radius:14px;padding:4px;background:var(--color-page);color:var(--color-primary-foreground);font-size:11px;line-height:1.4;font-variant-numeric:tabular-nums; }
.pj-window { height:100%;overflow:hidden;border:1px solid var(--color-border-default);border-radius:10px;background:var(--color-card); }
.pj-top { height:34px;display:flex;align-items:center;gap:7px;padding:0 12px;border-bottom:1px solid var(--color-border-default);font-size:11px;color:var(--color-secondary-foreground); }
.pj-top img { width:10px;height:15px;object-fit:contain; }
.dark .pj-top img { filter:invert(1); }
.pj-top strong { color:var(--color-primary-foreground);font-weight:500; }
.pj-top .pj-state { margin-left:auto;color:var(--journey-green);font-size:10px;white-space:nowrap; }
.pj-body { padding:9px 12px; }
.pj-caption { display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-weight:500; }
.pj-caption small { color:var(--color-secondary-foreground);font-size:10px;font-weight:400; }
.pj-table-head,.pj-row { display:grid;grid-template-columns:minmax(0,1fr) 42px 67px;gap:8px;align-items:center; }
.pj-table-head { color:var(--color-secondary-foreground);font-size:10px;padding-bottom:4px; }
.pj-table-head span:not(:first-child),.pj-row span:not(:first-child) { text-align:right; }
.pj-row { padding:3px 0;border-top:1px solid var(--color-border-default);font-size:11px; }
.pj-row-added { color:var(--journey-green); }
.pj-total { display:flex;justify-content:space-between;margin-top:4px;padding-top:4px;border-top:1px solid var(--color-border-default);font-size:10px; }
.pj-total strong { position:relative;font-size:13px;font-weight:500; }
.pj-before { position:absolute;right:0;top:0;white-space:nowrap;opacity:0; }
.pj-time { display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--color-border-default);border-radius:8px;background:var(--color-page); }
.pj-clock { display:grid;place-items:center;width:31px;height:31px;border-radius:8px;background:var(--journey-soft);color:var(--journey-green);flex-shrink:0; }
.pj-clock svg { width:17px;height:17px; }
.pj-time strong { font-size:18px;font-weight:500;letter-spacing:-.5px; }
.pj-time small { display:block;font-size:11px;color:var(--color-secondary-foreground); }
.pj-saved { margin-left:auto;align-self:center;color:var(--journey-green);font-size:10px; }
.pj-budget { margin-top:12px; }
.pj-budget-label { display:flex;justify-content:space-between;font-size:11px; }
.pj-budget-label span { color:var(--color-secondary-foreground); }
.pj-track { height:4px;border-radius:4px;background:var(--color-component);overflow:hidden;margin-top:7px; }
.pj-track i { display:block;width:66%;height:100%;background:var(--journey-green);transform-origin:left;border-radius:4px; }
.pj-linked { display:flex;align-items:center;gap:5px;color:var(--color-secondary-foreground);font-size:10px;margin-top:7px; }
.pj-linked svg { width:11px;height:11px;color:var(--journey-green); }
.pj-delivery { display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center;padding-top:19px;position:relative; }
.pj-files { display:flex;flex-direction:column;gap:7px; }
.pj-file { position:relative;display:flex;align-items:center;gap:6px;height:27px;border:1px solid var(--color-border-default);border-radius:5px;padding:0 7px;background:var(--color-page);font-size:11px; }
.pj-file svg { width:12px;height:12px;color:var(--color-tertiary-foreground);flex-shrink:0; }
.pj-file span:last-child { margin-left:auto;color:var(--journey-green); }
.pj-file::after { content:"";position:absolute;right:6px;top:6px;width:10px;height:14px;border:1px solid var(--journey-green);border-radius:2px;background:var(--journey-soft);opacity:0;pointer-events:none;z-index:2; }
.pj-package { position:relative;border:1px solid var(--color-border-strong);border-radius:8px;background:var(--color-page);padding:11px 9px;z-index:1; }
.pj-folder { width:23px;height:23px;color:var(--journey-green);margin-bottom:7px; }
.pj-package strong { display:block;font-size:11px;font-weight:500; }
.pj-package small { display:block;font-size:10px;color:var(--color-secondary-foreground);margin-top:2px; }
.pj-package .pj-delivered { display:block;font-size:10px;color:var(--journey-green);margin-top:8px; }
[data-pleo-journey] [data-how-it-works-card-index] > div:first-child { opacity:.9; }
[data-pleo-journey] [data-how-it-works-card-index][data-active="true"] > div:first-child { opacity:1; }
[data-active="true"] .pj-row-added { animation:pj-row-in 4.2s ease both; }
[data-active="true"] .pj-before { animation:pj-old-sum 4.2s ease both; }
[data-active="true"] .pj-after { animation:pj-new-sum 4.2s ease both; }
[data-active="true"] .pj-time { animation:pj-time-in 4.2s ease both; }
[data-active="true"] .pj-saved { animation:pj-confirm 4.2s ease both; }
[data-active="true"] .pj-track i { animation:pj-progress 4.2s ease both; }
[data-active="true"] .pj-file { animation:pj-collect 4.2s ease both; }
[data-active="true"] .pj-file:nth-child(2) { animation-delay:.18s; }
[data-active="true"] .pj-file:nth-child(3) { animation-delay:.36s; }
[data-active="true"] .pj-file::after { animation:pj-send-document 4.2s ease both; }
[data-active="true"] .pj-file:nth-child(2)::after { animation-delay:.18s; }
[data-active="true"] .pj-file:nth-child(3)::after { animation-delay:.36s; }
[data-active="true"] .pj-package { animation:pj-package-ready 4.2s ease both; }
[data-active="true"] .pj-delivered { animation:pj-delivery-confirm 4.2s ease both; }
@keyframes pj-row-in { 0%,12%{opacity:0;transform:translateY(8px)} 30%,100%{opacity:1;transform:translateY(0)} }
@keyframes pj-old-sum { 0%,22%{opacity:1} 32%,100%{opacity:0} }
@keyframes pj-new-sum { 0%,22%{opacity:0;transform:translateY(3px)} 34%,100%{opacity:1;transform:translateY(0)} }
@keyframes pj-time-in { 0%,8%{opacity:.25;transform:translateY(8px)} 26%,100%{opacity:1;transform:translateY(0)} }
@keyframes pj-confirm { 0%,32%{opacity:0;transform:translateY(3px)} 48%,100%{opacity:1;transform:translateY(0)} }
@keyframes pj-progress { 0%,28%{transform:scaleX(.75)} 52%,100%{transform:scaleX(1)} }
@keyframes pj-collect { 0%,12%{opacity:.3;transform:translateX(-7px)} 30%,100%{opacity:1;transform:translateX(0)} }
@keyframes pj-send-document { 0%,32%{opacity:0;transform:translateX(0)} 40%{opacity:1;transform:translateX(0)} 63%{opacity:0;transform:translateX(75px)} 100%{opacity:0;transform:translateX(75px)} }
@keyframes pj-package-ready { 0%,45%{border-color:var(--color-border-default)} 68%,100%{border-color:var(--journey-green)} }
@keyframes pj-delivery-confirm { 0%,73%{opacity:0;transform:translateY(3px)} 86%,100%{opacity:1;transform:translateY(0)} }
[data-pleo-journey] h2 .text-tertiary-foreground { color:var(--color-secondary-foreground); }
[data-pleo-journey] h2 .bg-component { background:transparent; }
@media(max-width:359px) { .pj-top{gap:4px;padding-inline:8px;font-size:10px} .pj-top .pj-state{font-size:9px} .pj-body{padding-inline:8px} .pj-delivery{gap:8px} .pj-file{font-size:10px;padding-inline:5px} .pj-package{padding-inline:6px} .pj-package .pj-delivered{font-size:9px} }
@media(prefers-reduced-motion:reduce) { [data-pleo-journey] *,[data-pleo-journey] *::after { animation:none!important;transition:none!important; } [data-pleo-journey] [data-how-it-works-card-index]>div:first-child { opacity:1; } }
html[data-reference-static] [data-pleo-journey] *,html[data-reference-reduced] [data-pleo-journey] *,html[data-reference-static] [data-pleo-journey] *::after,html[data-reference-reduced] [data-pleo-journey] *::after { animation:none!important;transition:none!important; }