.tour-mockup { margin: 0; min-width: 0; border: 1px solid #DDD7E8; border-radius: 14px; background: #fff; box-shadow: 0 20px 60px #2820350c, 0 3px 8px #28203504; overflow: hidden; font-size: 12px; line-height: 1.5; color: #4E495A; }
.tour-mockup .icon { width: 17px; height: 17px; flex: none; }
.tour-browser { display: flex; align-items: center; gap: 16px; padding: 10px 14px; background: #F5F4F8; border-bottom: 1px solid #E9E5EF; }
.tour-window-dots { display: flex; gap: 5px; }
.tour-window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #D6D1DF; }
.tour-url { display: flex; align-items: center; gap: 6px; flex: 1; font-size: 10px; color: #797281; }
.tour-url .icon { width: 11px; height: 11px; }
.tour-preview-label { font-size: 9px; color: #8B8395; }
.tour-app { display: flex; min-height: 390px; }
.tour-app-rail { width: 43px; flex: none; padding: 14px 6px; border-right: 1px solid #EEEAF3; display: flex; flex-direction: column; align-items: center; gap: 17px; }
.tour-app-rail > span { padding: 5px; display: grid; place-items: center; color: #A19BAA; }
.tour-app-rail .tour-rail-active { background: #F0EAFE; color: var(--brand); border-radius: 6px; }
.tour-app-rail .tour-rail-avatar { margin-top: auto; border-radius: 50%; background: #EDE8F4; color: #78658E; width: 25px; height: 25px; font-size: 10px; }
.tour-app-main { flex: 1; min-width: 0; }
.tour-breadcrumb { padding: 12px 16px; border-bottom: 1px solid #EEEAF3; font-size: 10px; color: #87808F; }
.tour-breadcrumb span { margin: 0 8px; color: #C4BECF; }
.tour-app-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 20px 18px 16px; }
.tour-mockup h3 { margin: 0; font-size: 16px; font-weight: 400; color: #292431; letter-spacing: -.02em; }
.tour-status, .tour-running { display: inline-block; padding: 3px 7px; border-radius: 5px; font-size: 9px; background: #EDF6F0; color: #367052; white-space: nowrap; }
.tour-running { background: #F0EAFE; color: var(--brand); }
.tour-mockup > figcaption { padding: 9px 14px; border-top: 1px solid #EEEAF3; font-size: 9px; color: #958D9F; background: #FDFCFE; }
.tour-setup { display: grid; grid-template-columns: 1.35fr 1fr; min-height: 347px; }
.tour-chat { padding: 20px 16px; }
.tour-message-user { padding: 12px; border-radius: 10px 10px 2px 10px; background: #F0EAFB; color: #504368; font-size: 12px; margin-bottom: 18px; }
.tour-jason-name { display: flex; align-items: center; gap: 6px; color: #34303D; margin-bottom: 8px; }
.tour-jason-name img, .tour-repair-summary img { border-radius: 50%; background: var(--brand); padding: 3px; }
.tour-chat p { font-size: 11px; }
.tour-discovery { margin-top: 14px; font-size: 10px; line-height: 2; }
.tour-tick { color: #438364; }
.tour-compose { display: flex; align-items: center; justify-content: space-between; gap: 6px; border: 1px solid #E3DCEB; border-radius: 8px; padding: 10px; margin-top: 18px; font-size: 9px; color: #9A91A5; }
.tour-compose span { background: var(--brand); color: white; border-radius: 50%; padding: 1px 6px; }
.tour-brief { border-left: 1px solid #EEEAF3; padding: 20px 14px; background: #FCFBFE; }
.tour-brief h3 { font-size: 14px; }
.tour-brief dt { color: #4B425A; font-size: 10px; margin-top: 18px; }
.tour-brief dd { font-size: 10px; color: #8A8097; margin: 4px 0 0; }
.tour-chip { display: inline-block; border: 1px solid #E7E0F0; background: white; padding: 2px 5px; margin: 2px 0; border-radius: 4px; font-family: monospace; font-size: 9px; }
.tour-mock-button { display: block; background: var(--brand); color: white; padding: 8px; text-align: center; border-radius: 6px; margin-top: 22px; font-size: 10px; }
.tour-tabs { display: flex; align-items: center; gap: 20px; padding: 0 18px; border-bottom: 1px solid #EEEAF3; font-size: 10px; }
.tour-tabs > span { padding: 7px 0; }
.tour-tabs .is-selected { color: var(--brand); border-bottom: 2px solid var(--brand); }
.tour-tabs .tour-version { margin-left: auto; font-family: monospace; color: #93849F; }
.tour-dag { position: relative; height: 260px; background-image: radial-gradient(#DFDAE8 .8px,transparent .8px); background-size: 14px 14px; }
.tour-dag-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.tour-dag-lines path { fill: none; stroke: #BAA5EB; stroke-width: 2; stroke-dasharray: 5 5; animation: tour-flow 8s linear infinite; }
.tour-node { position: absolute; width: 23%; background: white; padding: 9px; border: 1px solid #C8B5EC; border-radius: 7px; box-shadow: 0 3px 8px #33214609; transform: translateY(-50%); }
.tour-node span { display: block; color: #A397B0; font-size: 8px; }
.tour-node strong { display: block; color: #494052; font-size: 10px; font-weight: 400; margin: 4px 0; }
.tour-node small { display: block; color: #9688A3; font-size: 8px; }
.tour-node b { position: absolute; right: -6px; top: -8px; background: #5F9476; color: white; border: 2px solid white; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; text-align: center; }
.tour-node-source { top: 50%; left: 3%; }
.tour-node-web { top: 22%; left: 38%; }
.tour-node-app { top: 78%; left: 38%; }
.tour-node-publish { top: 50%; right: 3%; background: #F1F8F3; border-color: #A8CDB3; }
.tour-bottom-note { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-top: 1px solid #EEEAF3; font-size: 9px; color: #8C809A; }
.tour-bottom-note > span:last-child:not(.tour-tick) { margin-left: auto; }
.tour-run-current { padding: 14px; margin: 0 18px 14px; border: 1px solid #E5DCEF; border-radius: 8px; }
.tour-run-current > div:first-child { font-size: 11px; }
.tour-run-current small { font-size: 9px; color: #9B91A6; margin-left: 5px; }
.tour-run-current > strong { display: block; font-size: 23px; font-weight: 400; color: #4C3C68; margin: 10px 0; }
.tour-live-dot { display: inline-block; width: 6px; height: 6px; background: var(--brand); border-radius: 50%; margin-right: 5px; animation: tour-pulse 2s ease-in-out infinite; }
.tour-progress { height: 5px; background: #EEE8F7; border-radius: 4px; overflow: hidden; }
.tour-progress span { display: block; width: 76%; height: 100%; background: #8F6DD7; }
.tour-workers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-size: 8px; color: #95859F; }
.tour-table { border-collapse: collapse; width: 100%; font-size: 10px; text-align: left; }
.tour-table th { font-weight: 400; color: #958B9F; background: #FAF8FC; padding: 9px 14px; }
.tour-table td { border-bottom: 1px solid #F0ECF5; padding: 13px 14px; }
.tour-checks { display: grid; grid-template-columns: repeat(3,1fr); margin: 0 18px 18px; gap: 7px; }
.tour-checks > div { border: 1px solid #DDECE1; border-radius: 7px; padding: 10px; background: #F8FCF9; }
.tour-checks strong { display: block; font-weight: 400; font-size: 11px; color: #436D54; }
.tour-checks small { font-size: 8px; color: #8BA093; }
.tour-validation-total { display: flex; justify-content: space-between; gap: 8px; padding: 0 18px 12px; font-size: 10px; }
.tour-validation-total strong { font-weight: 400; color: #438364; }
.tour-validation-total span { color: #AD8454; }
.tour-held { background: #FFFBF3; color: #A5804F; }
.tour-delivery-list { padding: 0 18px; }
.tour-delivery-list > div { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid #F0ECF5; }
.tour-destination { display: grid; place-items: center; width: 32px; height: 32px; background: #F0EAFE; border-radius: 7px; color: #8971BA; flex: none; }
.tour-destination-sheets { color: #438364; background: #EAF5ED; }
.tour-destination-warehouse { color: #5E9ABC; background: #EDF6FC; }
.tour-delivery-list p { flex: 1; min-width: 0; }
.tour-delivery-list strong { display: block; font-weight: 400; font-size: 11px; }
.tour-delivery-list small { display: block; font-size: 8px; color: #9B91A6; overflow-wrap: anywhere; }
.tour-repair-timeline { margin: 0 18px; }
.tour-repair-timeline > div { display: flex; align-items: baseline; gap: 12px; position: relative; padding-bottom: 19px; }
.tour-repair-timeline > div:not(:last-child)::after { content: ''; position: absolute; width: 1px; background: #E7E0F1; left: 47px; top: 14px; bottom: 0; }
.tour-repair-timeline time { font: 9px monospace; color: #A195AC; width: 30px; flex: none; }
.tour-event-dot { width: 9px; height: 9px; border-radius: 50%; background: #9C80D3; flex: none; position: relative; z-index: 1; }
.tour-event-warning { background: #D8AE72; }.tour-event-success { background: #83B497; }
.tour-repair-timeline strong { display: block; font-size: 11px; font-weight: 400; }
.tour-repair-timeline small { display: block; font-size: 9px; color: #A093AC; }
.tour-repair-summary { margin: 0 18px 16px; padding: 11px; display: flex; align-items: flex-start; gap: 8px; background: #F6F2FC; border-radius: 8px; }
.tour-repair-summary p { font-size: 10px; color: #8A7A9C; }.tour-repair-summary strong { display: block; font-weight: 400; color: #6C568D; }
@keyframes tour-flow { to { stroke-dashoffset: -100; } }
@keyframes tour-pulse { 50% { opacity: .3; } }
@media(max-width:1100px) and (min-width:901px) { .product-tour-step { grid-template-columns: .7fr 1.3fr; } }
@media(max-width:600px) { .tour-app-rail { display: none; }.tour-app { min-height: 365px; }.tour-mockup { font-size: 11px; }.tour-chat { padding: 14px 10px; }.tour-brief { padding: 14px 10px; }.tour-app-heading { padding: 16px 12px; }.tour-status { font-size: 8px; }.tour-table td,.tour-table th { padding: 10px 8px; }.tour-node { padding: 7px; }.tour-node small { font-size: 7px; }.tour-preview-label { display: none; }.tour-checks { margin-inline: 10px; }.tour-checks > div { padding: 7px; }.tour-bottom-note { flex-wrap: wrap; }.tour-bottom-note > span:last-child:not(.tour-tick) { margin-left: 0; } }
@media(prefers-reduced-motion:reduce) { .tour-dag-lines path,.tour-live-dot { animation: none; } }