/* Propozycja adaptacji ProcessVisual z wcześniejszego audytu Dealyo.
   Pochodzenie i zakres zmian: motion-sources.md.
   Bez JavaScriptu oraz przy ograniczonym ruchu widoczny jest gotowy układ. */
body[data-subpage-motion] { --spm-inset: 40px; }
body[data-subpage-motion] .catalog-hero { position: relative; isolation: isolate; }
body[data-subpage-motion] .catalog-hero > :not(.spm-hero-field) { position: relative; z-index: 1; }
.spm-hero-field {
  position: absolute; inset: 0 calc(-1 * var(--spm-inset)); z-index: -1;
  overflow: hidden; pointer-events: none;
  background: linear-gradient(90deg, #fff 10%, #ffffffea 48%, #ffffff12),
    repeating-linear-gradient(90deg, transparent 0 59px, #e7e7e770 59px 60px),
    repeating-linear-gradient(0deg, transparent 0 59px, #e7e7e770 59px 60px);
}
.templates-catalog .spm-hero-field { inset-inline: 0; }
.spm-hero-field::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, #fafafa, transparent 24%, transparent 80%, #fafafa);
}
.spm-hero-scan {
  position: absolute; left: 76%; top: 0; height: 100%; width: 1px;
  background: linear-gradient(transparent 5%, #fe4a2366 50%, transparent 95%);
  --spm-animation: spm-hero-scan; --spm-duration: 12s;
}
.spm-hero-cross { position: absolute; width: 11px; height: 11px; color: #bcbcbc; }
.spm-hero-cross::before,.spm-hero-cross::after { content: ""; position: absolute; background: currentColor; }
.spm-hero-cross::before { left: 5px; top: 0; width: 1px; height: 11px; }
.spm-hero-cross::after { left: 0; top: 5px; width: 11px; height: 1px; }
.spm-hero-cross-a { right: 19px; top: 35px; }
.spm-hero-cross-b { right: 19px; bottom: 35px; }

.spm-demo {
  position: relative; margin-inline: calc(-1 * var(--spm-inset));
  padding: 56px var(--spm-inset) 60px; border-block: 1px solid var(--dealyo-line);
  background: linear-gradient(180deg, #f6f6f4, #fafafa 78%);
}
.templates-catalog .spm-demo { margin-inline: 0; }
.spm-demo-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.spm-kicker { display: block; font: 400 12px/18px var(--dealyo-mono); color: var(--dealyo-muted); letter-spacing: .015em; }
.spm-demo h2 { margin: 15px 0 0; font-size: 40px; line-height: 44px; letter-spacing: -.045em; font-weight: 500; }
.spm-demo-intro { margin: 0 0 30px; max-width: 70ch; font-size: 16px; line-height: 26px; color: var(--dealyo-muted); }
.spm-toggle {
  display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; min-height: 44px;
  border: 1px solid #dcdcdc; border-radius: 0; background: #fff; color: var(--dealyo-ink);
  padding: 11px 15px; font: 400 13px/20px var(--dealyo-font); cursor: pointer;
}
.spm-toggle[hidden] { display: none !important; }
.spm-toggle svg { width: 16px; height: 16px; flex-shrink: 0; }
.spm-toggle:hover { border-color: #bdbdbd; background: #fafafa; }
.spm-toggle:focus-visible,.spm-card-link:focus-visible { outline: 2px solid var(--dealyo-accent); outline-offset: 4px; }
.spm-toggle:disabled { cursor: default; color: var(--dealyo-muted); }
.spm-toggle .spm-play-icon { display: none; }
.spm-toggle[aria-pressed="true"] .spm-play-icon { display: block; }
.spm-toggle[aria-pressed="true"] .spm-pause-icon { display: none; }
.spm-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.spm-card { border-radius: 0; min-width: 0; margin: 0; background: #fff; border: 1px solid var(--dealyo-line); display: flex; flex-direction: column; aspect-ratio: 1 / 1; }
.spm-card-head { padding: 21px 25px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.spm-card-index { color: var(--dealyo-accent); font: 400 12px/18px var(--dealyo-mono); }
.spm-card-head .spm-kicker { text-align: right; }
.spm-scene {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1fr); place-items: center;
  min-height: 320px; flex: 1; overflow: hidden; margin-top: 12px;
  background: #fafafa; color: #666;
}
/* Scoped adaptation of the real ProcessVisual scenes. Source rings and
   surfaces are retained; stage dimensions, contrast and type are enlarged.
   The structure scene adds a shared SVG connector layer in structure-scene.css. */
.spm-pv-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: -2;
  background: linear-gradient(90deg, #dedede80 1px, transparent 1px),
    linear-gradient(#dedede80 1px, transparent 1px);
  background-size: 65px 65px;
  mask-image: radial-gradient(ellipse, #000, transparent 75%);
}
.spm-pv-orbits { position: absolute; inset: 0; display: grid; place-items: center; z-index: -1; pointer-events: none; }
.spm-pv-orbits i { position: absolute; width: 172px; height: 172px; border: 1px solid #dedede; border-radius: 50%; }
.spm-pv-orbits i:nth-child(2) { width: 280px; height: 280px; }
.spm-pv-orbits i:nth-child(3) { width: 390px; height: 390px; }
.spm-pv-stage { position: relative; min-width: 0; width: 100%; max-width: 380px; height: 300px; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.spm-scene .spm-pv-icon { display: block; width: var(--spm-icon-size,20px); height: var(--spm-icon-size,20px); flex: 0 0 auto; overflow: visible; }
.spm-pv-tree { --spm-duration: 8s; width: 100%; max-width: 330px; text-align: center; }
.spm-pv-node,.spm-pv-tree-leaves span { background: #fff; border: 1px solid #cecece; border-radius: 6px; padding: 15px 8px; font-size: 14px; line-height: 20px; }
.spm-pv-node { width: 134px; margin: auto; color: #fe4a23; font-weight: 500; box-shadow: 0 8px 16px #25272308; }
.spm-pv-tree-lines { height: 40px; width: 1px; background: #c6c6c6; margin: auto; position: relative; }
.spm-pv-tree-lines::after { content: ''; position: absolute; inset: 0; background: #fe4a23; transform-origin: top; --spm-animation: spm-tree-trunk; --spm-duration: 8s; }
.spm-pv-tree-leaves { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding-top: 24px; position: relative; }
.spm-pv-tree-leaves::before,.spm-pv-tree-leaves::after { content: ''; position: absolute; left: calc((100% - 24px) / 6 - .5px); right: calc((100% - 24px) / 6 - .5px); top: 0; height: 1px; background: #c6c6c6; }
.spm-pv-tree-leaves::after { background: #fe4a23; --spm-animation: spm-tree-route; --spm-duration: 8s; }
.spm-pv-tree-leaves span { position: relative; --spm-animation: spm-tree-receive; --spm-duration: 8s; }
.spm-pv-tree-leaves span:nth-child(2) { --spm-delay: 1.2s; }
.spm-pv-tree-leaves span:nth-child(3) { --spm-delay: 2.4s; }
.spm-pv-tree .spm-pv-node { --spm-animation: spm-tree-send; --spm-duration: 8s; }
.spm-pv-tree-leaves span::before,.spm-pv-tree-leaves span::after { content: ''; position: absolute; top: -25px; left: calc(50% - .5px); height: 25px; width: 1px; background: #c6c6c6; }
.spm-pv-tree-leaves span::after { background: #fe4a23; transform-origin: top; --spm-animation: spm-tree-branch; --spm-duration: 8s; }
.spm-pv-window { width: 260px; max-width: calc(100% - 16px); background: #fff; border: 1px solid #d3d3d3; border-radius: 12px; box-shadow: 0 12px 24px #2527230d,0 3px 7px #25272305; overflow: hidden; z-index: 1; }
.spm-pv-toolbar { display: flex; align-items: center; gap: 5px; border-bottom: 1px solid #e7e7e7; padding: 12px 14px; }
.spm-pv-toolbar i { width: 5px; height: 5px; border-radius: 50%; background: #cacaca; }
.spm-pv-toolbar span { margin-left: auto; width: 44px; height: 4px; background: #dedede; border-radius: 2px; }
.spm-pv-window-body { padding: 24px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.spm-pv-window-body strong { font-size: 19px; line-height: 24px; font-weight: 500; letter-spacing: -.025em; color: #262626; }
.spm-pv-window-body > i { display: block; height: 4px; width: 80%; background: #d9d9d9; border-radius: 3px; }
.spm-pv-window-body > i:nth-of-type(2) { width: 58%; }
.spm-pv-button { display: flex; align-items: center; justify-content: center; gap: 16px; min-width: 114px; min-height: 36px; box-sizing: border-box; margin-top: 6px; border-radius: 4px; background: #fe4a23; color: #fff; font-size: 14px; line-height: 20px; padding: 8px 13px; --spm-animation: spm-pv-press; --spm-duration: 6s; }
.spm-pv-button .spm-pv-icon { --spm-icon-size: 18px; }
.spm-scene .spm-pv-cursor { --spm-icon-size: 30px; position: absolute; left: calc(50% + 24px); top: calc(50% + 42px); color: #fe4a23; fill: #fff; z-index: 3; transform: translate(-9px,-9px); --spm-animation: spm-pv-cursor; --spm-duration: 6s; }
.spm-pv-click { position: absolute; left: calc(50% + 20px); top: calc(50% + 38px); width: 32px; height: 32px; margin: -16px; border: 1px solid #fe4a23; border-radius: 50%; z-index: 2; opacity: 0; --spm-animation: spm-pv-click; --spm-duration: 6s; }
.spm-pv-send { position: absolute; right: 12%; bottom: 32px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #fe4a23; border: 1px solid #d3d3d3; box-shadow: 0 8px 16px #25272308; z-index: 2; --spm-animation: spm-pv-sent; --spm-duration: 6s; }
.spm-pv-send .spm-pv-icon { --spm-icon-size: 19px; }
.spm-pv-document { position: relative; width: 206px; height: 240px; box-sizing: border-box; background: #fff; border: 1px solid #cecece; border-radius: 7px 26px 7px 7px; padding: 21px; box-shadow: 0 12px 24px #2527230d,0 3px 7px #25272305; overflow: hidden; }
.spm-pv-document > .spm-pv-icon { --spm-icon-size: 25px; color: #8a8a8a; margin-bottom: 12px; }
.spm-pv-document > strong { display: block; font-size: 17px; line-height: 22px; font-weight: 500; letter-spacing: -.025em; color: #262626; margin-bottom: 15px; }
.spm-pv-text-line { height: 5px; margin: 11px 0; background: #d9d9d9; border-radius: 3px; }
.spm-pv-text-line:nth-of-type(2) { width: 80%; }
.spm-pv-highlight { background: #fe4a2390; transform-origin: left; --spm-animation: spm-pv-read; --spm-duration: 5s; }
.spm-pv-source { display: flex; align-items: center; justify-content: space-between; color: #666; font: 12px/18px var(--dealyo-mono); margin-top: 20px; }
.spm-pv-source .spm-pv-icon { --spm-icon-size: 16px; color: #fe4a23; }
.spm-pv-sweep { position: absolute; top: 31%; left: 0; width: 100%; height: 32px; border-bottom: 1px solid #fe4a2380; background: linear-gradient(transparent,#fe4a230c); opacity: 0; pointer-events: none; --spm-animation: spm-pv-sweep; --spm-duration: 5s; }
.spm-pv-id { min-width: 0; display: flex; align-items: center; gap: 16px; width: 332px; max-width: calc(100% - 8px); box-sizing: border-box; padding: 25px 23px; background: #fff; border: 1px solid #d3d3d3; border-radius: 12px; box-shadow: 0 12px 24px #2527230d,0 3px 7px #25272305; }
.spm-pv-id-mark { display: block; width: 45px; height: auto; flex: 0 0 45px; }
.spm-pv-id > div { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; font-size: 12px; line-height: 18px; color: #666; }
.spm-pv-id-logo { display: block; width: 112px; height: auto; margin: 0 0 4px; }
.spm-pv-check { --spm-icon-size: 23px; color: #fe4a23; --spm-animation: spm-pv-confirm; --spm-duration: 5s; }
.spm-pv-chip { position: relative; display: grid; place-items: center; width: 116px; height: 116px; background: #fff; border: 1px solid #cecece; border-radius: 18px; box-shadow: 0 0 0 7px #fafafa,0 0 0 8px #dedede,0 14px 24px #2527230d; z-index: 1; }
.spm-pv-chip img { display: block; width: 50px; height: auto; }
.spm-pv-chip-ring { position: absolute; inset: 14px; border: 1px solid #e1e1e1; border-left-color: #fe4a23; border-radius: 50%; --spm-animation: spm-pv-turn; --spm-duration: 7s; --spm-easing: linear; }
.spm-pv-scan-points { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.spm-pv-scan-points > i { position: absolute; transform: rotate(calc(var(--i)*51.428deg)) translateX(128px); width: 8px; height: 8px; }
.spm-pv-scan-points b { display: block; width: 100%; height: 100%; background: #fe4a23; border-radius: 50%; box-shadow: 0 0 0 4px #fafafa; --spm-animation: spm-pv-confirm; --spm-duration: 4s; --spm-delay: calc(var(--i)*.4s); }
.spm-pv-plan-sheet { box-sizing: border-box; min-width: 0; width: min(300px,100%); max-width: 100%; border: 1px solid #cecece; background: #fff; border-radius: 10px; box-shadow: 0 12px 24px #2527230d,0 3px 7px #25272305; overflow: hidden; }
.spm-pv-plan-head { display: flex; align-items: center; gap: 11px; padding: 18px; border-bottom: 1px solid #dedede; font-size: 16px; line-height: 22px; }
.spm-pv-plan-head strong { font-weight: 500; color: #262626; }
.spm-pv-plan-head .spm-pv-icon { --spm-icon-size: 21px; color: #fe4a23; }
.spm-pv-plan-row { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #e7e7e7; --spm-animation: spm-plan-highlight; --spm-duration: 7s; }
.spm-pv-plan-row:last-child { border-bottom: 0; }
.spm-pv-plan-row:nth-child(3) { --spm-delay: .5s; }
.spm-pv-plan-row:nth-child(4) { --spm-delay: 1s; }
.spm-pv-plan-row > span { font: 12px/18px var(--dealyo-mono); color: #fe4a23; }
.spm-pv-plan-row strong { font-size: 14px; line-height: 20px; font-weight: 400; color: #444; white-space: nowrap; }
.spm-pv-plan-row i { min-width: 0; height: 3px; background: #dedede; flex: 1; }
.spm-pv-plan-row .spm-pv-icon { --spm-icon-size: 17px; color: #fe4a23; }
.spm-card figcaption { margin: 0; padding: 24px 25px; }
.spm-card h3 { margin: 0 0 10px; font: 500 25px/30px var(--dealyo-font); letter-spacing: -.035em; }
.spm-card p { margin: 0; max-width: 48ch; color: var(--dealyo-muted); font-size: 14px; line-height: 23px; }
.spm-card-link { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; margin-top: 14px; font-size: 14px; line-height: 22px; text-decoration: none; }
.spm-card-link:hover { text-decoration: underline; }
.spm-card-link svg { display: block; width: 21px; height: 21px; flex: 0 0 21px; }
.spm-demo-note a { color: #444; text-underline-offset: 3px; }
.spm-demo-note { margin: 23px 0 0; color: var(--dealyo-muted); font: 400 12px/20px var(--dealyo-mono); max-width: 85ch; }
.spm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The finished composition is the no-JS / reduced-motion baseline. Only the
   shared controller enables timelines. Its inherited state reaches descendants
   AND animated pseudo-elements, so offscreen/hidden scenes consume no motion. */
.spm-animated { animation: none; }
body[data-spm-ready="true"] .spm-animated,
body[data-spm-ready="true"] .spm-pv-tree .spm-pv-node,
body[data-spm-ready="true"] .spm-pv-tree-leaves span,
body[data-spm-ready="true"] .spm-pv-tree-lines::after,
body[data-spm-ready="true"] .spm-pv-tree-leaves::after,
body[data-spm-ready="true"] .spm-pv-tree-leaves span::after {
  animation-name: var(--spm-animation); animation-duration: var(--spm-duration,10s);
  animation-timing-function: var(--spm-easing,cubic-bezier(.4,0,.2,1));
  animation-delay: var(--spm-delay,0s); animation-iteration-count: infinite;
  animation-fill-mode: both; animation-play-state: var(--spm-play,paused);
}
[data-spm-running="true"] { --spm-play: running; }

/* One signal: source → trunk → branches → each destination. Hold the result
   before resetting; labels never move or disappear. */
@keyframes spm-tree-send { 0%,5%,24%,100% { background:#fff; box-shadow:0 8px 16px #25272308; } 10%,18% { background:#fff2ed; box-shadow:0 0 0 5px #fe4a230c,0 8px 16px #25272308; } }
@keyframes spm-tree-trunk { 0%,10%,90%,100% { transform:scaleY(0);opacity:0; } 12% { transform:scaleY(0);opacity:1; } 24%,78% { transform:scaleY(1);opacity:1; } 86% { transform:scaleY(1);opacity:0; } }
@keyframes spm-tree-route { 0%,23%,90%,100% { transform:scaleX(0);opacity:0; } 25% { transform:scaleX(0);opacity:1; } 32%,78% { transform:scaleX(1);opacity:1; } 86% { transform:scaleX(1);opacity:0; } }
@keyframes spm-tree-branch { 0%,30%,65%,100% { transform:scaleY(0);opacity:0; } 32% { transform:scaleY(0);opacity:1; } 39%,50% { transform:scaleY(1);opacity:1; } 60% { transform:scaleY(1);opacity:0; } }
@keyframes spm-tree-receive { 0%,38%,62%,100% { background:#fff;border-color:#cecece;box-shadow:0 0 0 0 #fe4a2300; } 43%,53% { background:#fff2ed;border-color:#fe4a23;box-shadow:0 4px 18px #fe4a2314; } }
@keyframes spm-hero-scan { 0%,100% { transform: translateX(-90px); opacity: .35; } 50% { transform: translateX(90px); opacity: .8; } }
/* ProcessVisual globals.css:340 — source keyframes with a scoped name.
   Cursor arrival is earlier so the subsequent click/check happen in order. */
@keyframes spm-pv-turn { to { transform: rotate(360deg); } }
@keyframes spm-pv-flow { 0%,100% { transform: scaleY(.2); opacity: .2; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes spm-pv-confirm { 0%,20%,100% { opacity: .3; } 40%,80% { opacity: 1; } }
@keyframes spm-pv-read { 0%,100% { transform: scaleX(.65); opacity: .4; } 45%,75% { transform: scaleX(1); opacity: 1; } }
@keyframes spm-pv-sweep { 0%,100% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 80% { transform: translateY(85px); opacity: 0; } }
@keyframes spm-pv-cursor { 0%,100% { transform: translate(12px,12px); } 35%,65% { transform: translate(-9px,-9px); } }
@keyframes spm-plan-highlight { 0%,14%,60%,100% { background:#fff; } 28%,43% { background:#fff2ed; } }
@keyframes spm-pv-arrive { 0%,100% { transform: translateY(4px); opacity: .45; } 30%,85% { transform: translateY(0); opacity: 1; } }
/* Adaptation: complete the source's branch flow and cursor → click → check. */
@keyframes spm-pv-route { 0%,23%,100% { transform: scaleX(0); opacity: 0; } 48%,80% { transform: scaleX(1); opacity: 1; } }
@keyframes spm-pv-branch { 0%,45%,100% { transform: scaleY(0); opacity: 0; } 65%,82% { transform: scaleY(1); opacity: 1; } }
@keyframes spm-pv-press { 0%,35%,49%,100% { transform: scale(1); box-shadow: 0 0 0 0 #fe4a2300; } 40%,44% { transform: scale(.97); box-shadow: 0 0 0 5px #fe4a2315; } }
@keyframes spm-pv-click { 0%,36%,54%,100% { transform: scale(.35); opacity: 0; } 39% { opacity: .7; } 50% { transform: scale(1.4); opacity: 0; } }
@keyframes spm-pv-sent { 0%,43%,100% { opacity: 0; transform: translateY(5px); } 53%,87% { opacity: 1; transform: translateY(0); } }

/* These adjustments stay inside the catalog presentation. Mobile readability
   remains the final stylesheet and retains all existing source-preview rules. */
body[data-subpage-motion] :is(.catalog-topline .ds-label,.catalog-topline .catalog-label,.catalog-section-heading .ds-label,.asset-section-head .ds-label) { font-size: 12px; line-height: 18px; }
.catalog-components .catalog-context { margin-top: 32px; }
.catalog-assets .asset-jump { margin-top: 35px; }
.templates-catalog .spm-demo + .catalog-spec { border-top: 0; background: #fff; }
@media(max-width:991px) { body[data-subpage-motion] { --spm-inset: 30px; } .spm-demo { padding-block: 45px 48px; } .spm-card-head { padding-inline: 21px; } .spm-card figcaption { padding-inline: 21px; } .spm-card { aspect-ratio: auto; } .spm-scene { min-height: 320px; } .spm-demo h2 { font-size: 36px; line-height: 40px; } }
@media(max-width:767px) {
  body[data-subpage-motion] { --spm-inset: 20px; }
  .spm-grid { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .spm-demo { padding-block: 37px 40px; }
  .spm-demo-top { flex-direction: column; gap: 20px; margin-bottom: 20px; }
  .spm-demo h2 { font-size: 33px; line-height: 37px; }
  .spm-demo-intro { font-size: 16px; line-height: 24px; margin-bottom: 25px; }
  .spm-toggle { font-size: 16px; line-height: 22px; min-height: 46px; }
  .spm-card-head { padding: 19px 20px 0; }
  .spm-scene { min-height: 300px; margin-top: 8px; }
  .spm-pv-stage { height: 300px; padding-inline: 12px; }
  .spm-pv-id { padding: 22px 17px; gap: 12px; }
  .spm-pv-id-mark { width: 42px; flex-basis: 42px; }
  .spm-card figcaption { padding: 24px 20px 20px; }
  .spm-card h3 { font-size: 25px; line-height: 30px; }
  .spm-card p,.spm-card-link { font-size: 16px; line-height: 24px; }
  .spm-demo-note { line-height: 19px; }
  .spm-hero-field { opacity: .65; }
}
@media(max-width:359px) { body[data-subpage-motion] { --spm-inset: 16px; } .spm-card-head { padding-inline: 16px; gap: 4px 10px; flex-wrap: wrap; } .spm-card-head > span { white-space: nowrap; } .spm-card figcaption { padding-inline: 16px; } .spm-demo h2 { font-size: 30px; line-height: 35px; } }
@media(prefers-reduced-motion:reduce) {
  body[data-subpage-motion] .spm-animated,
  body[data-subpage-motion] .spm-pv-tree *,
  body[data-subpage-motion] .spm-scene::before,body[data-subpage-motion] .spm-scene::after,
  body[data-subpage-motion] .spm-scene *::before,body[data-subpage-motion] .spm-scene *::after { animation: none !important; }
}
@media print {
  .spm-toggle { display: none !important; }
  body[data-subpage-motion] .spm-animated,
  body[data-subpage-motion] .spm-pv-tree *,body[data-subpage-motion] .spm-scene *::before,body[data-subpage-motion] .spm-scene *::after { animation: none !important; }
  .spm-demo { break-inside: avoid; }
}

/* Catalog graphic proposals, 20.10.2026: original Dealyo assets, enlarged
   editorial compositions, one 12-second clock and a finished hold of over 4s.
   ProcessVisual informs the miniature window/document vocabulary; the scan
   and deliberate input → result sequence are adaptations, not source copies.
   These selectors do not enter source-component iframes or downloadable files. */
body[data-subpage-motion] .spm-scene.spm-workbench {
  display: grid; place-items: center; padding: 26px 22px; min-height: 510px;
  background: #fafafa; color: #262626; overflow: hidden;
  font: 400 14px/20px var(--dealyo-font); --spm-duration: 12s;
  --spm-easing: cubic-bezier(.22,.7,.2,1);
}
.spm-workbench::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background-image: linear-gradient(#e7e7e77a 1px,transparent 1px),linear-gradient(90deg,#e7e7e77a 1px,transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(ellipse at center,#000 10%,transparent 73%);
}
.spm-workbench .spw-canvas { position: relative; width: min(100%,380px); min-width: 0; }
.spm-workbench .spw-canvas img { display: block; height: auto; max-width: 100%; }
.spm-workbench .spw-canvas svg { display: block; flex: 0 0 auto; width: 20px; height: 20px; }
.spm-workbench .spw-paper {
  position: relative; box-sizing: border-box; width: 100%; min-height: 262px;
  padding: 27px 26px; background: #fff; border: 1px solid #dedede;
  box-shadow: 0 10px 26px #26262605;
}
body[data-subpage-motion] .spm-workbench .spw-title {
  display: block; position: relative; margin: 0; font: 500 clamp(28px,3vw,36px)/1.07 var(--dealyo-font);
  letter-spacing: -.045em; color: #262626;
}
.spm-workbench em { font-style: normal; color: #fe4a23; }
body[data-subpage-motion] .spm-workbench .spw-copy {
  position: relative; margin: 17px 0 21px; font: 400 14px/21px var(--dealyo-font); color: #666;
}
.spm-workbench .spw-cta {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 40px; padding: 9px 12px; background: #fe4a23; color: #fff;
  font: 500 14px/21px var(--dealyo-font); white-space: nowrap;
}
.spm-workbench .spw-cta svg { width: 21px; height: 21px; }
.spm-workbench .spw-crop { position: absolute; width: 10px; height: 10px; border-color: #c6c6c6; border-style: solid; }
.spm-workbench .spw-crop-a { top: -7px; left: -7px; border-width: 1px 0 0 1px; }
.spm-workbench .spw-crop-b { bottom: -7px; right: -7px; border-width: 0 1px 1px 0; }
.spm-workbench .spw-transfer { position: relative; width: 1px; height: 34px; background: #e0e0e0; margin: 0 auto; }
.spm-workbench .spw-transfer i { position: absolute; top: 0; left: -1px; width: 3px; height: 8px; background: #fe4a23; opacity: 0; --spm-animation: spw-transfer; }
.spm-workbench .spw-phases { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 25px; font: 400 13px/20px var(--dealyo-font); color: #777; }
.spm-workbench .spw-phases > span { position: relative; white-space: nowrap; }
.spm-workbench .spw-phase-c { color: #262626; }
.spm-workbench .spw-phase-a { --spm-animation: spw-phase-a; }
.spm-workbench .spw-phase-b { --spm-animation: spw-phase-b; }
.spm-workbench .spw-phase-c { --spm-animation: spw-phase-c; }

/* Type starts with an actual large specimen, then becomes the publication.
   Baselines and trim marks stay quiet behind the large General Sans title. */
.spm-workbench .spw-type-source { display: flex; align-items: center; gap: 20px; padding: 0 18px 14px; border-bottom: 1px solid #dedede; }
.spm-workbench .spw-aa { font-size: 78px; line-height: 78px; font-weight: 500; letter-spacing: -.065em; }
.spm-workbench .spw-type-source > div { display: grid; gap: 7px; }
.spm-workbench .spw-type-source strong { font-size: 17px; line-height: 23px; font-weight: 500; }
.spm-workbench .spw-type-source > div > span { font-size: 14px; line-height: 20px; color: #777; word-spacing: 4px; }
.spm-workbench .spw-rule { position: absolute; left: 16px; right: 16px; height: 1px; background: #f0f0f0; }
.spm-workbench .spw-rule-a { top: 67px; }
.spm-workbench .spw-rule-b { top: 105px; }
.spm-workbench .spw-type-title { --spm-animation: spw-type-title; }
.spm-workbench .spw-type-copy { --spm-animation: spw-type-copy; }
.spm-workbench .spw-type-cta { --spm-animation: spw-type-cta; }

/* The source row uses the real SVGs at readable sizes. The paper gets the
   logotype, then the mark, then the single orange accent. */
.spm-workbench .spw-brand-source { display: grid; grid-template-columns: 1.6fr 1fr 1fr; min-height: 105px; align-items: center; }
.spm-workbench .spw-brand-file { display: flex; align-items: center; justify-content: center; height: 70px; }
.spm-workbench .spw-brand-file + .spw-brand-file { border-left: 1px solid #dedede; }
.spm-workbench .spw-file-logo img { width: 123px; }
.spm-workbench .spw-file-mark img { width: 38px; }
.spm-workbench .spw-file-color i { display: block; width: 38px; height: 38px; background: #fe4a23; }
.spm-workbench .spw-file-logo { --spm-animation: spw-source-a; }
.spm-workbench .spw-file-mark { --spm-animation: spw-source-b; }
.spm-workbench .spw-file-color { --spm-animation: spw-source-c; }
.spm-workbench .spw-brand-paper { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 262px; }
.spm-workbench .spw-signature { position: relative; min-height: 19px; }
.spm-workbench .spw-neutral { position: absolute; inset: 0 auto auto 0; opacity: 0; color: #777; font-size: 14px; --spm-animation: spw-neutral; }
.spm-workbench .spw-brand-logo { width: 126px; --spm-animation: spw-brand-logo; }
.spm-workbench .spw-brand-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.spm-workbench .spw-brand-mark { width: 41px; flex: 0 0 41px; --spm-animation: spw-brand-mark; }
.spm-workbench .spw-brand-color { --spm-animation: spw-brand-color; }
.spm-workbench .spw-brand-cta { --spm-animation: spw-brand-cta; }

/* A webpage is scanned in three deliberate regions. The priority becomes
   the opening sentence of the finished report rather than another dashboard. */
.spm-workbench :is(.spw-report,.spw-landing) > .spw-phases { padding: 0 0 25px; }
.spm-workbench .spw-report-stage { position: relative; min-height: 378px; }
.spm-workbench .spw-toolbar { display: flex; gap: 9px; align-items: center; min-height: 43px; padding: 12px 17px; border-bottom: 1px solid #e7e7e7; }
.spm-workbench .spw-toolbar img { width: 92px; margin-right: auto; }
.spm-workbench .spw-toolbar > span { width: 20px; height: 2px; background: #d7d7d7; }
.spm-workbench .spw-scan-page { position: absolute; inset: 6px 18px auto; min-height: 314px; background: #fff; border: 1px solid #dedede; opacity: 0; --spm-animation: spw-scan-page; }
.spm-workbench .spw-scan-content { position: relative; padding: 26px 22px 0; }
.spm-workbench .spw-scan-content > strong { font-size: 30px; line-height: 34px; letter-spacing: -.045em; font-weight: 500; }
.spm-workbench .spw-scan-content > i { display: block; width: 86%; height: 4px; margin-top: 12px; background: #e7e7e7; }
.spm-workbench .spw-scan-content > i + i { width: 62%; margin-top: 8px; }
.spm-workbench .spw-scan-proof { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 27px 0 24px; }
.spm-workbench .spw-scan-proof > span { height: 37px; background: #f3f3f3; border: 1px solid #e7e7e7; }
.spm-workbench .spw-scan-contact { display: flex; align-items: center; gap: 14px; min-height: 47px; font-size: 14px; color: #666; border-top: 1px solid #e7e7e7; }
.spm-workbench .spw-scan-contact > span { margin-left: auto; width: 65px; height: 23px; background: #ededed; }
.spm-workbench .spw-scan-frame { position: absolute; inset: 14px 11px auto; height: 89px; border: 1px solid #fe4a23; background: #fe4a2304; opacity: 0; --spm-animation: spw-scan-frame; }
.spm-workbench .spw-priority { position: absolute; bottom: -43px; left: 0; right: 0; padding: 10px 12px; background: #fff2ed; border: 1px solid #f4dcd3; font-size: 14px; line-height: 20px; opacity: 0; --spm-animation: spw-priority; }
.spm-workbench .spw-report-paper { position: relative; margin: 0 7px; padding: 22px 24px 0; min-height: 374px; background: #fff; border: 1px solid #dedede; --spm-animation: spw-report-paper; }
.spm-workbench .spw-report-paper::before { content: ''; position: absolute; inset: -6px 6px auto; height: 5px; border: 1px solid #e7e7e7; border-bottom: 0; background: #fff; }
.spm-workbench .spw-report-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; color: #666; font-size: 14px; line-height: 20px; }
.spm-workbench .spw-report-top img { width: 32px; }
.spm-workbench .spw-report-title { display: block; font: 500 40px/41px var(--dealyo-font); letter-spacing: -.05em; margin-bottom: 22px; }
.spm-workbench .spw-action { display: flex; align-items: center; gap: 13px; min-height: 47px; border-top: 1px solid #e7e7e7; }
.spm-workbench .spw-action b { flex: 0 0 21px; color: #777; font: 400 13px/20px var(--dealyo-mono); }
.spm-workbench .spw-action > span { min-width: 0; font-size: 14px; line-height: 20px; }
.spm-workbench .spw-action > svg { width: 18px; height: 18px; margin-left: auto; color: #fe4a23; }
.spm-workbench .spw-action-a b { color: #fe4a23; }
.spm-workbench .spw-action-a { --spm-animation: spw-action-a; }
.spm-workbench .spw-action-b { --spm-animation: spw-action-b; }
.spm-workbench .spw-action-c { --spm-animation: spw-action-c; }
.spm-workbench .spw-result { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 13px 0; color: #666; font-size: 13px; line-height: 20px; --spm-animation: spw-result; }
.spm-workbench .spw-result > svg { width: 17px; height: 17px; color: #fe4a23; }

/* A complete miniature page is assembled from three different graphic
   sections. Slot geometry remains fixed so the finished page never jumps. */
.spm-workbench .spw-landing-page { position: relative; background: #fff; border: 1px solid #dedede; margin: 0 7px; }
.spm-workbench .spw-slot { position: relative; background: #f8f8f8; border-bottom: 1px solid #e7e7e7; }
.spm-workbench .spw-slot::before { content: ''; position: absolute; inset: 13px; border: 1px dashed #dedede; }
.spm-workbench .spw-slot:last-child { border-bottom: 0; }
.spm-workbench .spw-page-offer { position: relative; padding: 18px 22px 20px; background: #fff; min-height: 160px; --spm-animation: spw-page-offer; }
.spm-workbench .spw-section-label { display: block; font-size: 13px; line-height: 19px; color: #777; margin-bottom: 9px; }
.spm-workbench .spw-page-offer > strong { display: block; font: 500 30px/31px var(--dealyo-font); letter-spacing: -.045em; }
.spm-workbench .spw-page-offer > img { position: absolute; right: 23px; bottom: 21px; width: 36px; }
.spm-workbench .spw-page-lines { display: grid; gap: 5px; width: 59%; margin-top: 16px; }
.spm-workbench .spw-page-lines > i { height: 3px; background: #dedede; }
.spm-workbench .spw-page-lines > i + i { width: 65%; }
.spm-workbench .spw-page-proof { position: relative; display: flex; align-items: center; gap: 20px; padding: 18px 22px; background: #fff; min-height: 104px; --spm-animation: spw-page-proof; }
.spm-workbench .spw-proof-art { position: relative; flex: 0 0 105px; height: 65px; background: #fafafa; border: 1px solid #e7e7e7; }
.spm-workbench .spw-proof-art > i { position: absolute; width: 14px; height: 14px; background: #fff; border: 1px solid #cecece; z-index: 1; }
.spm-workbench .spw-proof-art > i:nth-child(1) { left: 7px; top: 38px; }
.spm-workbench .spw-proof-art > i:nth-child(2) { left: 37px; top: 22px; }
.spm-workbench .spw-proof-art > i:nth-child(3) { left: 82px; top: 22px; background: #fff2ed; border-color: #fe4a23; }
.spm-workbench .spw-proof-art > svg { position: absolute; inset: 15px 0 0; width: 100%; height: 40px; color: #aaa; }
.spm-workbench .spw-page-proof > div:last-child { min-width: 0; }
.spm-workbench .spw-page-proof .spw-section-label { margin-bottom: 4px; }
.spm-workbench .spw-page-proof strong { font-size: 17px; line-height: 20px; font-weight: 500; letter-spacing: -.02em; }
.spm-workbench .spw-page-contact { position: relative; padding: 13px 22px 18px; min-height: 100px; background: #fff; --spm-animation: spw-page-contact; }
.spm-workbench .spw-page-contact .spw-cta { display: flex; }
.spm-workbench .spw-landing-result { justify-content: center; padding-bottom: 0; }

/* Finished holds run 60–94% (~4.1s), with a short, quiet reset. Children
   share the controller's inherited pause state; there are no extra timers. */
@keyframes spw-type-title { 0%,9% { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateY(5px); } 21%,94% { clip-path: inset(0); opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes spw-type-copy { 0%,24% { opacity: 0; transform: translateY(7px); } 35%,94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes spw-type-cta { 0%,39% { opacity: 0; transform: translateY(7px); } 50%,94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes spw-transfer { 0%,8%,24%,26%,41%,43%,58%,100% { opacity: 0; transform: translateY(0); } 10%,28%,45% { opacity: 1; transform: translateY(0); } 21%,38%,55% { opacity: 1; transform: translateY(25px); } 23%,40%,57% { opacity: 0; transform: translateY(25px); } }
@keyframes spw-source-a { 0%,4% { background: #fff2ed; } 20%,100% { background: transparent; } }
@keyframes spw-source-b { 0%,23%,42%,100% { background: transparent; } 27%,36% { background: #fff2ed; } }
@keyframes spw-source-c { 0%,41%,62%,100% { background: transparent; } 45%,55% { background: #fff2ed; } }
@keyframes spw-neutral { 0%,13%,100% { opacity: 1; } 20%,95% { opacity: 0; } }
@keyframes spw-brand-logo { 0%,13% { opacity: 0; transform: translateY(-8px); } 23%,94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes spw-brand-mark { 0%,31% { opacity: 0; transform: translateY(-8px); } 42%,94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes spw-brand-color { 0%,46%,100% { color: #262626; } 57%,94% { color: #fe4a23; } }
@keyframes spw-brand-cta { 0%,46%,100% { background: #ededed; color: #666; } 57%,94% { background: #fe4a23; color: #fff; } }
@keyframes spw-phase-a { 0%,14%,100% { color: #fe4a23; } 26%,94% { color: #777; } }
@keyframes spw-phase-b { 0%,18%,60%,100% { color: #777; } 28%,48% { color: #fe4a23; } }
@keyframes spw-phase-c { 0%,45%,100% { color: #777; } 58%,94% { color: #262626; } }
@keyframes spw-scan-page { 0%,34% { opacity: 1; transform: none; } 42%,96% { opacity: 0; transform: translateX(-24px); } 100% { opacity: 1; transform: none; } }
@keyframes spw-scan-frame { 0%,3% { opacity: 0; height: 89px; transform: translateY(0); } 7%,11% { opacity: 1; height: 89px; transform: translateY(0); } 16%,20% { opacity: 1; height: 58px; transform: translateY(110px); } 25%,33% { opacity: 1; height: 49px; transform: translateY(180px); } 39%,100% { opacity: 0; height: 49px; transform: translateY(180px); } }
@keyframes spw-priority { 0%,25%,41%,100% { opacity: 0; transform: translateY(5px); } 29%,35% { opacity: 1; transform: none; } }
@keyframes spw-report-paper { 0%,36% { opacity: 0; transform: translateX(24px); } 44%,94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes spw-action-a { 0%,42% { opacity: 0; transform: translateY(5px); } 48%,94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes spw-action-b { 0%,47% { opacity: 0; transform: translateY(5px); } 53%,94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes spw-action-c { 0%,52% { opacity: 0; transform: translateY(5px); } 58%,94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes spw-result { 0%,57% { opacity: 0; } 60%,94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes spw-page-offer { 0%,5% { opacity: 0; transform: translateY(-15px); } 19%,94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes spw-page-proof { 0%,23% { opacity: 0; transform: translateY(-15px); } 38%,94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes spw-page-contact { 0%,42% { opacity: 0; transform: translateY(-15px); } 57%,94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Mobile layouts shrink the paper, never the whole scene or its text. */
@media (max-width: 767px) {
  body[data-subpage-motion] .spm-scene.spm-workbench { min-height: 500px; padding: 28px 22px; }
  body[data-subpage-motion] .spm-workbench .spw-title { font-size: 34px; }
  .spm-workbench .spw-phases { font-size: 14px; }
  .spm-workbench .spw-type-source { padding-inline: 5px; }
  .spm-workbench .spw-paper { padding: 25px 23px; }
}
@media (max-width: 420px) {
  body[data-subpage-motion] .spm-scene.spm-workbench { padding-inline: 18px; }
  body[data-subpage-motion] .spm-workbench .spw-title { font-size: 30px; }
  .spm-workbench .spw-aa { font-size: 70px; line-height: 73px; }
  .spm-workbench .spw-brand-file { height: 62px; }
  .spm-workbench .spw-file-logo img { width: 105px; }
  .spm-workbench .spw-file-mark img { width: 32px; }
  .spm-workbench .spw-file-color i { width: 32px; height: 32px; }
  .spm-workbench .spw-paper { padding-inline: 20px; }
  .spm-workbench .spw-phases { gap: 6px; font-size: 13px; }
  .spm-workbench .spw-report-paper { margin-inline: 0; padding-inline: 20px; }
  .spm-workbench .spw-report-title { font-size: 37px; line-height: 39px; }
  .spm-workbench .spw-action { gap: 10px; }
  .spm-workbench .spw-action > span { font-size: 14px; }
  .spm-workbench .spw-landing-page { margin-inline: 0; }
  .spm-workbench .spw-page-proof { gap: 14px; padding-inline: 18px; }
  .spm-workbench .spw-proof-art { flex-basis: 90px; }
  .spm-workbench .spw-proof-art > i:nth-child(3) { left: 69px; }
  .spm-workbench .spw-result { font-size: 13px; }
}
@media (max-width: 359px) {
  body[data-subpage-motion] .spm-scene.spm-workbench { padding-inline: 13px; }
  body[data-subpage-motion] .spm-workbench .spw-title { font-size: 27px; }
  .spm-workbench .spw-paper { padding-inline: 16px; }
  .spm-workbench .spw-type-source { gap: 15px; }
  .spm-workbench .spw-aa { font-size: 60px; line-height: 68px; }
  .spm-workbench .spw-type-source strong { font-size: 16px; }
  .spm-workbench .spw-type-source > div > span { word-spacing: 1px; }
  .spm-workbench .spw-brand-source { grid-template-columns: 1.5fr 1fr .9fr; }
  .spm-workbench .spw-file-logo img { width: 91px; }
  .spm-workbench .spw-brand-bottom { gap: 8px; }
  .spm-workbench .spw-brand-mark { width: 32px; flex-basis: 32px; }
  .spm-workbench .spw-cta { gap: 11px; padding-inline: 10px; }
  .spm-workbench .spw-report-paper { padding-inline: 16px; }
  .spm-workbench .spw-report-title { font-size: 35px; line-height: 37px; }
  .spm-workbench .spw-page-proof { gap: 11px; padding-inline: 16px; }
  .spm-workbench .spw-proof-art { flex-basis: 77px; }
  .spm-workbench .spw-proof-art > i:nth-child(3) { left: 57px; }
  .spm-workbench .spw-page-proof strong { font-size: 16px; }
  .spm-workbench .spw-page-offer,.spm-workbench .spw-page-contact { padding-inline: 16px; }
  .spm-workbench .spw-page-offer > strong { font-size: 27px; line-height: 29px; }
  .spm-workbench .spw-phases { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-subpage-motion] .spm-workbench .spm-animated { animation: none !important; }
}
@media print {
  body[data-subpage-motion] .spm-workbench .spm-animated { animation: none !important; }
}
/* Baseline guides follow the type size without running through body copy. */
.spm-workbench .spw-rule-a { top: 66px; }
.spm-workbench .spw-rule-b { top: 104px; }
.spm-workbench .spw-phases,.spm-workbench .spw-section-label,.spm-workbench .spw-result { font-size: 14px; }
@media (max-width: 767px) {
  .spm-workbench .spw-rule-a { top: 61px; }
  .spm-workbench .spw-rule-b { top: 96px; }
}
@media (max-width: 420px) {
  .spm-workbench .spw-rule-a { top: 56px; }
  .spm-workbench .spw-rule-b { top: 88px; }
}
@media (max-width: 359px) {
  .spm-workbench .spw-rule-a { top: 52px; }
  .spm-workbench .spw-rule-b { top: 80px; }
}