.tracking-demo [hidden] { display:none!important; }
.tracking-demo { background:#f4f8fc; }
.tracking-demo__intro { display:grid; grid-template-columns:1.1fr 1fr; gap:70px; align-items:end; margin-bottom:32px; }
.tracking-demo__intro h2 { margin-bottom:0; }
.tracking-demo__intro>p { max-width:470px; margin:0; }
.tracking-demo__shell { border:1px solid #d8e5ef; border-radius:20px; overflow:hidden; background:#fff; box-shadow:0 18px 55px #244b6d08; }
.tracking-demo__top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:20px 26px; font-size:.78rem; border-bottom:1px solid #e0e9f0; }
.tracking-demo__top>span:last-child { color:#6a8194; font-size:.7rem; }
.tracking-demo__top i { color:#1172b7; margin-right:6px; }
.tracking-demo__choices { display:flex; gap:10px; padding:20px 26px; }
.tracking-demo__choices button { display:flex; gap:9px; align-items:center; padding:10px 16px; border-radius:8px; border:1px solid #d1dfeb; background:#fff; color:#526e82; font:inherit; font-size:.8rem; font-weight:600; }
.tracking-demo__choices button[aria-pressed=true] { color:#fff; border-color:#1172b7; background:#1172b7; }
.tracking-demo__choices button:focus-visible { outline:3px solid #1172b7; outline-offset:3px; }
.tracking-demo__views { display:grid; grid-template-columns:1.6fr 1fr; }
.tracking-demo__operation { min-width:0; padding:0 26px 26px; }
.tracking-demo__view-label { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 18px; font-size:.66rem; font-weight:700; letter-spacing:.08em; color:#637e93; }
.tracking-demo__view-label>span:last-child { background:#e9f5fd; color:#16699f; border-radius:5px; padding:5px 9px; letter-spacing:0; }
.tracking-demo__map { position:relative; border:1px solid #dce6ed; border-radius:12px; overflow:hidden; background:#f8fbfd; }
.tracking-demo__map svg { display:block; width:100%; height:auto; }
.tracking-demo__map-note { display:flex; align-items:center; gap:8px; padding:13px; background:#fff; color:#526d81; font-size:.72rem; border-top:1px solid #e2eaf0; }
.tracking-demo__progress { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:20px 0 0; font-size:.75rem; color:#637e93; }
.tracking-demo__progress strong { color:#17324b; }
.tracking-demo__progress>div { width:100%; height:6px; background:#eaf0f5; border-radius:6px; overflow:hidden; }
.tracking-demo__progress>div>span { display:block; height:100%; background:#1172b7; transition:width .3s; }
.tracking-demo__customer { background:#f5f8fb; border-left:1px solid #e1eaf1; padding:0 32px 26px; }
.tracking-demo__customer>.tracking-demo__view-label { padding-top:5px; }
.tracking-demo__phone { background:#fff; border:6px solid #203b51; border-radius:30px; max-width:280px; margin:auto; padding:16px 22px; text-align:center; box-shadow:0 14px 28px #1c3a5114; }
.tracking-demo__speaker { width:56px; height:5px; border-radius:6px; background:#203b51; margin:-4px auto 17px; }
.solution-page .tracking-demo__brand { display:flex; align-items:center; justify-content:space-between; color:#1172b7; font-size:1.05rem; font-weight:750; padding-bottom:12px; margin:0 0 15px; border-bottom:1px solid #e5edf4; }
.tracking-demo__order { color:#718699; font-size:.68rem; }
.tracking-demo__phone h3 { font-size:1.05rem; margin:4px 0 16px; }
.tracking-demo__phone-icon { display:grid; place-items:center; height:52px; width:52px; margin:0 auto 12px; border-radius:16px; background:#edf6fd; color:#1172b7; font-size:1.7rem; }
.tracking-demo__customer-title { font-size:.87rem; display:block; line-height:1.5; }
.solution-page .tracking-demo__phone>p:not(.tracking-demo__brand) { font-size:.73rem; line-height:1.65; margin:10px 0 15px; min-height:4.95em; }
.tracking-demo__phone-update { border:1px solid #e0eaf1; border-radius:9px; padding:10px; }
.tracking-demo__phone-update small { display:block; font-size:.65rem; color:#637e93; margin-bottom:4px; }
.tracking-demo__phone-update strong { font-size:1.2rem; }
.tracking-demo__phone-footer { font-size:.62rem; color:#70879a; padding:14px 0 0; }
.tracking-demo__explanation { display:flex; gap:14px; padding:22px 26px; border-top:1px solid #dfebf3; background:#f0f7fc; color:#1172b7; }
.solution-page .tracking-demo__explanation p { margin:0; font-size:.86rem; line-height:1.7; }
.solution-page .tracking-demo__note { margin:16px 0 0; font-size:.71rem; color:#748a9b; }
.tracking-demo[data-state=offline] .tracking-demo__view-label>span:last-child,.tracking-demo[data-state=offline] .tracking-demo__phone-icon { color:#8b5c1a; background:#fff2dc; }
.tracking-demo[data-state=offline] [data-tracking-marker]>circle { fill:#b47a28; }
.tracking-demo[data-state=delivered] .tracking-demo__view-label>span:last-child,.tracking-demo[data-state=delivered] .tracking-demo__phone-icon { color:#17765b; background:#e7f6ee; }
.tracking-demo[data-state=delivered] [data-tracking-marker]>circle { fill:#188567; }
.solution-hero__proof { display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:26px; font-size:.73rem; color:#587286; }
.solution-hero__proof i { color:#1b8b70; margin-right:5px; }
@media(max-width:991px) { .tracking-demo__intro { grid-template-columns:1fr; gap:16px; } .tracking-demo__views { grid-template-columns:1.3fr 1fr; } .tracking-demo__customer { padding:0 20px 24px; } }
@media(max-width:767px) { .tracking-demo__views { grid-template-columns:1fr; } .tracking-demo__customer { border-left:0; border-top:1px solid #dfe9f1; padding:22px; } .tracking-demo__choices { flex-wrap:wrap; padding:16px; gap:8px; } .tracking-demo__choices button { flex:1 1 auto; justify-content:center; padding:10px; font-size:.73rem; } .tracking-demo__operation { padding:0 16px 24px; } .tracking-demo__top { padding:18px; } .tracking-demo__explanation { padding:18px; } }
@media(prefers-reduced-motion:reduce) { .tracking-demo__progress>div>span { transition:none; } }