/* Product-specific scenes share light and typography, with their own workflow geometry. */
body[data-page=home] .system-illustration:has(.home-product-drawing) {
 background: transparent;
 border: 0;
 box-shadow: none;
}
body[data-page=home] .system-illustration:has(.home-product-drawing) figcaption bdi { color: #185467; }
.drawing-structure { fill: none; stroke: #287b99; stroke-width: 1.4; opacity: .35; }
.drawing-assets .drawing-structure { opacity: .65; stroke-width: 2.4; }
.drawing-dwm .drawing-structure { fill: #e8f7fb; opacity: .8; }
.drawing-route { fill: none; stroke: #398fa1; stroke-width: 2; opacity: .65; }
.drawing-packets,.drawing-scan {
 fill: none;
 stroke: #088ea0;
 stroke-width: 4;
 stroke-linecap: round;
 filter: drop-shadow(0 0 5px #36d8da);
}
.drawing-packets { stroke-dasharray: 8 100; animation: home-product-stream 9s linear infinite; }
.drawing-service .drawing-packets { animation-duration: 6s; }
.drawing-dwm .drawing-packets { stroke: #3779b5; animation-duration: 12s; }
.drawing-scan { animation: home-barcode-scan 4s ease-in-out infinite; }
.drawing-stop circle:first-child { fill: #f3ffff; stroke: #2d9aa7; }
.drawing-stop circle:nth-child(2) { fill: #138f9f; }
.system-illustration .home-product-drawing text { fill: #154d63; font-size: 17px; }
.home-drawing-mobile { display: none; }
@keyframes home-product-stream { to { stroke-dashoffset: -432; } }
@keyframes home-barcode-scan { 50% { transform: translateY(83px); } }
@media(max-width:700px) {
 .home-product-drawing .drawing-stop text { display: none; }
 .home-drawing-mobile { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; list-style: none; padding: 0; margin: 0; color: #154d63; font-size: 13px; }
}
.system-illustration .home-product-drawing text { paint-order: stroke; stroke: #f8ffff; stroke-width: 4px; stroke-linejoin: round; }

.product-hero-drawing {
 margin: 0;
 min-inline-size: 0;
 padding: clamp(8px, 2vw, 28px);
 border-radius: 22px;
 background: radial-gradient(ellipse at center, #e3f4f7 0%, transparent 72%);
}
.product-hero-drawing svg {
 display: block;
 inline-size: 100%;
 block-size: auto;
 font-family: inherit;
 text-anchor: middle;
 font-weight: 700;
}
.product-hero-drawing.drawing-frame-service { background: radial-gradient(ellipse at center, #e1f3f0, transparent 72%); }
.product-hero-drawing.drawing-frame-dwm { background: radial-gradient(ellipse at center, #e5edf9, transparent 72%); }
.home-product-drawing { display: block; inline-size: 100%; block-size: auto; }
.system-illustration:is(.hud-offscreen,.hud-hidden) :is(.drawing-packets,.drawing-scan) { animation-play-state: paused; }
@media(prefers-reduced-motion:reduce) {
 .drawing-packets,.drawing-scan { animation: none; }
}

.journey-map-streets { fill: none; stroke: #c9dfe4; stroke-width: 7; opacity: .55; stroke-linecap: round; }
.journey-route-bed { fill: none; stroke: #f7ffff; stroke-width: 13; stroke-linecap: round; }
.drawing-provanmate .drawing-route { stroke: #13778c; stroke-width: 3; opacity: 1; }
.journey-stop-icon { fill: none; stroke: #17647a; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.journey-highlight {
 fill: none;
 stroke: #008e9f;
 stroke-width: 6;
 stroke-linecap: round;
 opacity: 0;
}
.journey-highlight.is-current {
 opacity: 1;
 filter: drop-shadow(0 0 5px #36d8da);
}
.journey-enhanced .drawing-packets { display: none; }
.journey-enhanced [data-journey-stop] { cursor: pointer; }
.journey-enhanced .drawing-stop.is-current circle { fill: #d6f5f3; stroke-width: 2; }
.journey-controls:not([hidden]) { display: flex; flex-wrap: wrap; gap: 8px; }
.journey-controls button {
 min-block-size: 44px;
 max-inline-size: 100%;
 overflow-wrap: anywhere;
 padding: .55rem .75rem;
 border: 1px solid #a9ccd3;
 border-radius: 8px;
 background: #fff;
 color: #154d63;
 font: inherit;
 cursor: pointer;
}
.journey-controls button[aria-pressed="true"] { background: #e1f4f3; border-color: #148695; }
.journey-controls button:focus-visible { outline: 2px solid #17647a; outline-offset: 2px; }
.journey-details { margin-block-start: 12px; }
.journey-details p { margin-block: 0 8px; color: #154d63; }
.journey-enhanced .journey-mobile-labels { display: none; }
@media(prefers-reduced-motion:no-preference) {
 .journey-highlight { transition: opacity .25s ease; }
}

@media(max-width:700px) {
 .journey-controls button { flex: 1 1 8rem; }
}
.product-hero-media .home-product-drawing > ellipse { stroke: none; }