.tower-proof { display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:28px; font-size:.73rem; color:#527189; }
.tower-proof i { color:#1172b7; margin-right:4px; }
.tower-demo { background:#f2f7fc; }
.tower-demo__intro { display:grid; grid-template-columns:1.2fr 1fr; gap:70px; align-items:end; margin-bottom:36px; }
.tower-demo__intro h2,.tower-demo__intro>p { margin-bottom:0; }
.tower-demo__intro>p { max-width:440px; }
.tower-demo__shell { overflow:hidden; border:1px solid #d6e3ee; border-radius:18px; background:white; }
.tower-demo__header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #dce7ef; padding:22px 28px; }
.tower-demo__header strong { font-size:.9rem; }
.tower-demo__header i { color:#1172b7; margin-right:8px; }
.tower-demo__header>span { font-size:.73rem; color:#637e93; }
.tower-demo__metrics { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid #dce7ef; }
.tower-demo__metrics>div { padding:22px 28px; }
.tower-demo__metrics>div+div { border-left:1px solid #dce7ef; }
.tower-demo__metrics strong,.tower-demo__metrics span { display:block; }
.tower-demo__metrics strong { font-size:1.55rem; letter-spacing:-.04em; }
.tower-demo__metrics span { font-size:.73rem; color:#637e93; margin-top:5px; }
.tower-demo__workspace { display:grid; grid-template-columns:300px 1fr; }
.tower-demo__routes { padding:24px; border-right:1px solid #dce7ef; }
.tower-demo__routes>p { font-size:.65rem; letter-spacing:.1em; font-weight:700; margin-bottom:16px; }
.tower-route { display:block; width:100%; border:1px solid #dbe6ee; border-radius:10px; background:white; padding:16px; margin-bottom:14px; font:inherit; text-align:left; color:#17324b; --route-color:#1172b7; }
.tower-route--amber { --route-color:#a66a17; }
.tower-route--slate { --route-color:#65798e; }
.tower-route:last-child { margin-bottom:0; }
.tower-route[aria-pressed=true] { border-color:var(--route-color); box-shadow:0 0 0 1px var(--route-color); background:#f8fbfe; }
.tower-route:focus-visible { outline:3px solid #1172b7; outline-offset:4px; }
.tower-route:disabled { opacity:1; }
.tower-route__top { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.tower-route__top strong { font-size:.88rem; }
.tower-route__top>span { font-size:.67rem; color:#637e93; }
.tower-route__driver { display:block; font-size:.75rem; color:#637e93; margin:8px 0 12px; }
.tower-route__badge { display:inline-block; font-size:.67rem; padding:5px 8px; border-radius:5px; background:#edf5fc; color:var(--route-color); font-weight:650; }
.tower-route--amber .tower-route__badge { background:#fff3e0; }
.tower-route--slate .tower-route__badge { background:#eef1f5; }
.tower-route__progress { display:block; height:5px; background:#e7eef4; border-radius:4px; margin:14px 0 8px; overflow:hidden; }
.tower-route__progress>span { display:block; height:100%; background:var(--route-color); }
.tower-route__bottom { font-size:.68rem; color:#637e93; }
.tower-demo__map { background:#f9fbfd; min-width:0; display:flex; flex-direction:column; }
.tower-demo__map-label { display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:#607c91; font-size:.72rem; padding:22px 26px; }
.tower-demo__map-label>span { margin-left:auto; color:#17324b; font-weight:600; }
.tower-demo__map svg { display:block; width:100%; flex:1; min-height:0; }
.tower-map-route { opacity:.23; }
.tower-map-route[data-selected=true] { opacity:1; }
.tower-map-route--blue path { stroke:#1172b7; }.tower-map-route--blue circle { fill:#1172b7; }
.tower-map-route--amber path { stroke:#b77b22; }.tower-map-route--amber circle { fill:#b77b22; }
.tower-map-route--slate path { stroke:#65798e; }.tower-map-route--slate circle { fill:#65798e; }
.tower-demo__location { display:flex; align-items:center; gap:10px; padding:18px 26px; border-top:1px solid #dce7ef; color:#526f85; font-size:.78rem; background:#fff; }
.tower-demo__detail { display:grid; grid-template-columns:1.2fr 1fr; gap:40px; padding:28px; border-top:1px solid #dce7ef; background:#eef5fb; }
.tower-demo__eyebrow { display:block; color:#1172b7; font-size:.75rem; font-weight:650; margin-bottom:12px; }
.tower-page .tower-demo__detail h3 { font-size:1.3rem; }
.tower-page .tower-demo__detail p { font-size:.87rem; margin:0; }
.tower-demo__action { display:flex; gap:14px; padding:22px; background:white; border:1px solid #d8e5ef; border-radius:10px; align-self:center; }
.tower-demo__action>i { font-size:1.2rem; color:#1172b7; }
.tower-demo__action strong { display:block; font-size:.83rem; margin-bottom:8px; }
.tower-features { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tower-features article { border:1px solid #dfe7ef; border-radius:12px; padding:28px; }
.tower-features article>i { display:block; color:#1172b7; font-size:1.6rem; margin-bottom:20px; }
.tower-features p { font-size:.9rem; margin:0; }
.tower-related { display:flex; gap:20px; align-items:center; background:white; padding:28px; margin-top:44px; border:1px solid #dce7ef; border-radius:12px; }
.tower-related>i { color:#1172b7; font-size:1.7rem; }
.tower-related strong { font-size:1rem; }
.tower-page .tower-related p { font-size:.88rem; margin:8px 0 0; }
.tower-related>a { margin-left:auto; flex-shrink:0; }
@media(max-width:991px) { .tower-demo__intro { gap:30px; } .tower-demo__workspace { grid-template-columns:250px 1fr; } .tower-demo__routes { padding:16px; } .tower-demo__metrics>div { padding:20px; } .tower-features { grid-template-columns:repeat(2,1fr); } .tower-related { flex-wrap:wrap; } .tower-related>a { margin-left:0; } }
@media(max-width:767px) { .tower-demo__intro,.tower-demo__detail,.tower-features { grid-template-columns:1fr; gap:24px; } .tower-demo__metrics { grid-template-columns:repeat(2,1fr); } .tower-demo__metrics>div:nth-child(3) { border-left:0; } .tower-demo__metrics>div:nth-child(n+3) { border-top:1px solid #dce7ef; } .tower-demo__workspace { grid-template-columns:1fr; } .tower-demo__routes { border-right:0; border-bottom:1px solid #dce7ef; } .tower-route { padding:14px; } .tower-demo__map svg { flex:none; } .tower-demo__header,.tower-demo__detail { padding:22px 20px; } .tower-demo__map-label,.tower-demo__location { padding:16px; } .tower-demo__map-label>span { margin-left:0; width:100%; } .tower-related { padding:22px; } }