/* Platform-specific presentation; shared site navigation and footer remain consistent. */
.features-page { --pf-ink:#182b37; --pf-muted:#60717d; --pf-line:#dce4e8; --pf-blue:#2563eb; }
.pf-main { color:var(--pf-ink); background:#fff; }
.pf-wrap { width:min(1200px,calc(100% - 80px)); margin-inline:auto; }
.pf-section { padding-block:100px; scroll-margin-top:100px; }
.pf-main h1,.pf-main h2,.pf-main h3 { font-family:'Manrope',sans-serif; }
.pf-main h2 { font-size:clamp(30px,3.4vw,46px); line-height:1.18; letter-spacing:-1.7px; margin:0; font-weight:700; }
.pf-main h3 { font-size:22px; line-height:1.35; letter-spacing:-.5px; }
.pf-main p { line-height:1.8; }
.pf-kicker { font-size:11px; font-weight:800; letter-spacing:2px; margin:0 0 22px; color:#426c85; }
.pf-hero { position:relative; isolation:isolate; background:#102933; color:white; overflow:hidden; }
.pf-hero-bg { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(7,28,38,.96),rgba(7,28,38,.75) 55%,rgba(7,28,38,.28)),url('/static/img/marketing/trackos-fleet-city-hero-v2.webp') center 55%/cover; }
.pf-hero-content { padding-block:155px 85px; }
.pf-hero .pf-kicker,.pf-video .pf-kicker { color:#99bfc9; }
.pf-hero h1 { font-size:clamp(44px,5.7vw,78px); letter-spacing:-3px; line-height:1.08; max-width:800px; margin:0 0 28px; color:#fff; }
.pf-lead { max-width:640px; font-size:17px; color:#c9d7dc; }
.pf-actions { display:flex; gap:28px; align-items:center; flex-wrap:wrap; margin-top:32px; }
.pf-light-link { color:#fff; font-size:14px; font-weight:700; text-decoration:none; display:inline-flex; gap:18px; align-items:center; }
.pf-light-link:hover { color:#a5d4ed; }
.pf-hero-note { display:flex; gap:28px; margin-top:65px; padding-top:24px; border-top:1px solid #ffffff26; color:#bbcdd4; font-size:12px; }
.pf-hero-note span::before { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:#8ebaae; margin-right:10px; }
.pf-section-nav { border-bottom:1px solid var(--pf-line); background:#f8faf9; }
.pf-section-nav>div { display:flex; gap:40px; overflow-x:auto; }
.pf-section-nav a { padding:23px 0; white-space:nowrap; font-size:13px; color:#4a5c69; text-decoration:none; border-bottom:2px solid transparent; }
.pf-section-nav a:hover { color:var(--pf-blue); border-color:var(--pf-blue); }
.pf-heading { display:grid; grid-template-columns:1.3fr 1fr; gap:70px; align-items:end; margin-bottom:44px; }
.pf-heading>p { color:var(--pf-muted); font-size:15px; margin:0; max-width:440px; }
.pf-workspace { border:1px solid #cedbe1; border-radius:14px; overflow:hidden; box-shadow:0 22px 60px #152d3e0c; }
.pf-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 24px; font-size:12px; border-bottom:1px solid var(--pf-line); background:white; }
.pf-brand-dot { display:inline-block; width:8px; height:8px; border-radius:3px; background:#2463eb; margin-right:8px; }
.pf-muted { color:#778893; margin-left:16px; }
.pf-example { color:#61717c; font-size:10px; background:#f0f4f6; padding:5px 9px; border-radius:4px; }
.pf-workspace-body { display:grid; grid-template-columns:310px 1fr; }
.pf-vehicles { padding:24px 16px; background:#fff; }
.pf-list-title { display:flex; justify-content:space-between; padding:0 10px 20px; font-size:13px; }
.pf-list-title>span { color:#788892; }
.pf-vehicle { padding:19px 12px; border-bottom:1px solid #e8edf0; }
.pf-vehicle.selected { border:1px solid #c8d9ef; background:#f3f7fd; border-radius:8px; }
.pf-vehicle>small { display:block; font-size:8px; letter-spacing:1.5px; color:#486a9a; margin-bottom:12px; }
.pf-vehicle>strong { display:flex; justify-content:space-between; gap:8px; font-size:12px; align-items:center; }
.pf-vehicle i { font-style:normal; color:#6b7780; font-size:9px; }
.pf-status { font-size:10px; color:#26745c!important; background:#e0f0e8; border-radius:4px; padding:4px 7px; }
.pf-vehicle p { color:#71808b; font-size:10px; margin:9px 0 0; }
.pf-vehicle dl { display:flex; gap:45px; margin:18px 0 0; }
.pf-vehicle dt { color:#71808b; font-size:10px; }
.pf-vehicle dd { margin:5px 0 0; font-size:20px; font-weight:700; }
.pf-vehicle dd small { font-size:10px; font-weight:400; }
.pf-small { color:#7b8991; font-size:10px; margin:18px 10px 0; }
.pf-map { position:relative; min-height:420px; overflow:hidden; background:#e8efeb; }
.pf-map>img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.pf-map-route { position:absolute; inset:0; width:100%; height:100%; }
.pf-map-route path { fill:none; stroke:#3375dc; stroke-width:4; stroke-linejoin:round; }
.pf-map-route path.pf-route-halo { stroke:white; stroke-width:9; }
.pf-map-route circle { fill:#2463eb; stroke:white; stroke-width:4; }
.pf-map-label { position:absolute; top:48%; left:49%; display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:8px; box-shadow:0 5px 20px #122c3c20; background:white; }
.pf-map-label b,.pf-map-label small { display:block; font-size:11px; }
.pf-map-label small { font-size:9px; color:#61717c; margin-top:4px; }
.pf-map-caption { position:absolute; bottom:15px; left:15px; right:15px; padding:12px; background:#fffffff0; border-radius:5px; font-size:10px; display:flex; align-items:center; gap:8px; }
.pf-map-caption>span:last-child { margin-left:auto; color:#6e7c86; }
.pf-status-dot { width:6px; height:6px; border-radius:50%; background:#31856a; }
.pf-icon { width:24px; height:24px; flex-shrink:0; color:#38738f; }
.pf-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:42px; margin-top:42px; }
.pf-benefits h3 { font-size:16px; margin:15px 0 8px; }
.pf-benefits p { font-size:13px; color:var(--pf-muted); margin:0; }
.pf-tinted { background:#f3f6f5; border-block:1px solid #e7edeb; }
.pf-duo { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.pf-story { background:#fff; border:1px solid #dfe6e6; border-radius:12px; padding:32px; }
.pf-story-title { display:flex; gap:12px; align-items:center; font-size:11px; color:#647c89; }
.pf-story h3 { margin:23px 0 10px; }
.pf-story>p { color:var(--pf-muted); font-size:14px; }
.pf-event { background:#faf9f6; border:1px solid #e9e2d7; border-radius:8px; padding:22px; margin-top:30px; }
.pf-event-top { display:flex; justify-content:space-between; font-size:10px; color:#8b602a; margin-bottom:20px; }
.pf-event-top span { border-left:3px solid #c28a44; padding-left:8px; font-weight:700; }
.pf-event>strong { font-size:14px; }
.pf-event p { font-size:11px; color:var(--pf-muted); margin:5px 0 18px; }
.pf-speed { display:flex; gap:28px; border-top:1px solid #e9e2d7; padding-top:15px; font-size:10px; color:#74818a; }
.pf-speed b { color:#5e4527; font-size:22px; display:block; }
.pf-event>small { display:block; margin-top:18px; font-size:9px; color:#7d817e; line-height:1.6; }
.pf-timeline { list-style:none; padding:0; margin:30px 0 0; }
.pf-timeline li { display:flex; gap:22px; min-height:83px; font-size:12px; }
.pf-timeline time { padding-top:2px; color:#6c7c86; font-variant-numeric:tabular-nums; }
.pf-timeline li>div { position:relative; border-left:1px solid #d9e3e6; padding:0 0 25px 25px; }
.pf-timeline li>div::before { content:''; width:9px; height:9px; border-radius:50%; background:#477e95; border:4px solid #eaf1f3; position:absolute; left:-9px; top:0; }
.pf-timeline span { display:block; margin-top:7px; font-size:11px; color:#7b8790; }
.pf-video { background:#102c36; color:#f1f6f6; background-image:radial-gradient(ellipse at 80% 30%,#23475055,transparent 60%); }
.pf-video h2,.pf-video h3 { color:#f1f6f6; }
.pf-video .pf-heading>p { color:#adc3ca; }
.pf-video-board { display:grid; grid-template-columns:1fr 300px; border:1px solid #ffffff26; border-radius:12px; overflow:hidden; background:#183640; }
.pf-camera-view { position:relative; min-height:370px; }
.pf-camera-view>img { position:absolute; width:100%; height:100%; object-fit:cover; }
.pf-camera-view::after { content:''; position:absolute; inset:0; background:linear-gradient(#071b3266,transparent 35%,transparent 60%,#071b32b0); }
.pf-camera-top,.pf-camera-bottom { position:absolute; left:22px; right:22px; display:flex; justify-content:space-between; gap:12px; z-index:1; font-size:10px; align-items:center; }
.pf-camera-top { top:20px; }.pf-camera-bottom { bottom:22px; }
.pf-camera-top>span:first-child { display:flex; gap:9px; align-items:center; }.pf-camera-top .pf-icon { color:white; width:18px; height:18px; }
.pf-video-detail { padding:30px; }.pf-video-detail .pf-kicker { font-size:9px; letter-spacing:1.4px; }
.pf-video-detail h3 { margin:15px 0 22px; font-size:24px; }
.pf-video-detail dl { margin:0; }.pf-video-detail dl>div { padding:12px 0; border-top:1px solid #ffffff16; }
.pf-video-detail dt { font-size:9px; color:#91adb7; }.pf-video-detail dd { margin:5px 0 0; font-size:12px; }
.pf-video-detail p { font-size:10px; color:#a2bac3; }
.pf-video-timeline { grid-column:1/-1; display:flex; align-items:center; gap:20px; padding:22px; font-size:10px; color:#a2bac3; border-top:1px solid #ffffff18; }
.pf-video-timeline>div { height:22px; flex:1; position:relative; background:repeating-linear-gradient(90deg,#7f9eaa33 0 1px,transparent 1px 12px) center/100% 10px no-repeat; display:flex; justify-content:space-around; align-items:center; }
.pf-video-timeline b { height:22px; width:3px; background:#e0ba77; box-shadow:0 0 14px #e0ba7744; }.pf-video-timeline i { width:5px; height:5px; background:#6a929f; border-radius:50%; }
.pf-video-foot { display:flex; justify-content:space-between; align-items:center; gap:30px; margin-top:26px; }.pf-video-foot p { font-size:12px; color:#a2bac3; max-width:480px; }.pf-video-foot a { font-size:12px; }
.pf-records { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--pf-line); }
.pf-records article { padding:30px; border-right:1px solid var(--pf-line); }.pf-records article:first-child { padding-left:0; }.pf-records article:last-child { border:0; }
.pf-record-top { display:flex; justify-content:space-between; align-items:center; }.pf-record-top>span { font-size:10px; color:#8d9ca5; }.pf-records h3 { font-size:19px; margin-top:25px; }.pf-records p { font-size:13px; color:var(--pf-muted); }.pf-record-tag { display:block; font-size:10px; color:#4c7286; margin-top:24px; }
.pf-mobile-layout { display:grid; grid-template-columns:1fr 1.2fr; gap:80px; align-items:center; }.pf-mobile-copy { color:var(--pf-muted); font-size:14px; margin:25px 0; }
.pf-device-scene { position:relative; min-height:390px; padding-top:40px; }.pf-desktop { border:6px solid #31434c; border-radius:13px; overflow:hidden; position:relative; box-shadow:0 20px 35px #1c354516; }.pf-desktop .pf-toolbar { padding:14px; font-size:9px; }.pf-desktop>img { width:100%; height:230px; object-fit:cover; display:block; }.pf-desktop-label { position:absolute; bottom:16px; left:16px; padding:10px; background:white; border-radius:4px; font-size:10px; }
.pf-phone { position:absolute; right:15px; top:5px; width:170px; background:#fff; border:6px solid #263841; border-radius:25px; padding:22px 10px 12px; box-shadow:-12px 20px 40px #152e3928; }.pf-phone-speaker { position:absolute; top:6px; left:40%; width:20%; height:4px; border-radius:10px; background:#263841; }.pf-phone>small { font-size:7px; letter-spacing:1px; color:#6b7c86; }.pf-phone>strong { display:block; font-size:12px; margin:8px 0; }.pf-phone>.pf-status { display:inline-block; font-size:8px; }.pf-phone>img { display:block; width:100%; height:130px; object-fit:cover; border-radius:6px; margin-top:10px; }.pf-phone>div { padding-top:12px; }.pf-phone>div>span { font-size:8px; color:#74858e; display:block; }.pf-phone>div>strong { font-size:22px; }.pf-phone strong small { font-size:9px; font-weight:400; }.pf-phone p { font-size:8px; color:#6f828e; }.pf-device-caption { position:absolute; bottom:0; right:0; font-size:9px; color:#778b95; }
.pf-end { text-align:center; }.pf-end>p:not(.pf-kicker) { max-width:600px; margin:25px auto 30px; font-size:15px; color:var(--pf-muted); }
.features-page .home-footer { margin-top:0; }.features-page .footer-email { overflow-wrap:anywhere; }
.pf-main a:focus-visible { outline:3px solid #5794ed; outline-offset:5px; }
@media (prefers-reduced-motion:no-preference) { .pf-map-route>path:not(.pf-route-halo) { stroke-dasharray:900; animation:pf-route-in 2s ease-out both; }.pf-records article { transition:background .25s; }.pf-records article:hover { background:#f7faf9; } @keyframes pf-route-in { from { stroke-dashoffset:900; } to { stroke-dashoffset:0; } } }
@media(max-width:1000px) { .pf-wrap { width:calc(100% - 48px); }.pf-section { padding-block:72px; }.pf-heading { gap:35px; }.pf-workspace-body { grid-template-columns:260px 1fr; }.pf-map-label { left:25%; }.pf-video-board { grid-template-columns:1fr 260px; }.pf-mobile-layout { gap:30px; }.pf-benefits { gap:24px; }.pf-story { padding:24px; } }
@media(max-width:700px) { .pf-wrap { width:calc(100% - 36px); }.pf-section { padding-block:55px; }.pf-hero-content { padding-block:125px 45px; }.pf-hero h1 { letter-spacing:-1.8px; }.pf-lead { font-size:14px; }.pf-lead br { display:none; }.pf-hero-note { gap:14px; font-size:9px; margin-top:40px; flex-wrap:wrap; }.pf-section-nav>div { gap:25px; }.pf-section-nav a { font-size:11px; padding-block:18px; }.pf-heading { grid-template-columns:1fr; gap:22px; margin-bottom:30px; }.pf-main h2 { letter-spacing:-1px; }.pf-heading>p { font-size:14px; }.pf-kicker { font-size:9px; margin-bottom:17px; }.pf-workspace-body { grid-template-columns:1fr; }.pf-toolbar { padding:15px 12px; font-size:10px; }.pf-muted { margin-left:4px; }.pf-example { font-size:8px; }.pf-vehicles { padding:16px; }.pf-vehicle:not(.selected),.pf-vehicles>.pf-small { display:none; }.pf-list-title { padding-bottom:12px; }.pf-vehicle dl { margin-top:12px; }.pf-map { min-height:300px; }.pf-map-label { left:35%; }.pf-map-caption { flex-wrap:wrap; font-size:9px; }.pf-map-caption>span:last-child { margin-left:0; }.pf-benefits { grid-template-columns:1fr; gap:24px; margin-top:30px; }.pf-benefits article { display:grid; grid-template-columns:28px 1fr; column-gap:15px; }.pf-benefits .pf-icon { grid-row:1/3; }.pf-benefits h3 { margin:0 0 8px; }.pf-duo { grid-template-columns:1fr; gap:20px; }.pf-story { padding:24px 20px; }.pf-event { padding:18px; }.pf-video-board { grid-template-columns:1fr; }.pf-camera-view { min-height:260px; }.pf-camera-top,.pf-camera-bottom { left:14px; right:14px; font-size:8px; }.pf-video-detail { padding:24px; }.pf-video-detail h3 br { display:none; }.pf-video-detail dl { display:grid; grid-template-columns:1fr 1fr; gap:0 15px; }.pf-video-detail dl>div:last-child { grid-column:1/-1; }.pf-video-timeline { padding:16px; gap:12px; font-size:8px; }.pf-video-foot { flex-direction:column; align-items:flex-start; gap:5px; }.pf-records { grid-template-columns:1fr; }.pf-records article,.pf-records article:first-child { padding:25px 0; border-right:0; border-bottom:1px solid var(--pf-line); }.pf-records h3 { margin-top:16px; }.pf-record-tag { margin-top:16px; }.pf-mobile-layout { grid-template-columns:1fr; gap:35px; }.pf-device-scene { min-height:390px; }.pf-end h2 br { display:none; }.pf-actions { gap:23px; }.pf-light-link { font-size:12px; }.features-page .footer-main { gap:30px; }.features-page .footer-bottom { flex-wrap:wrap; gap:15px; } }
@media(max-width:380px) { .pf-phone { right:0; width:150px; }.pf-toolbar .pf-muted { display:none; }.pf-speed { gap:16px; }.pf-camera-top { align-items:flex-start; }.pf-camera-top>span:last-child { max-width:55px; text-align:right; } }
/* Let the shared road illustration meet the closing section without a blue band. */
.features-page .fleet-road.fleet-road-standalone { background:#fff; }

/* Reference-based device artwork keeps both devices visible at every width. */
.pf-product-visual { margin:0; min-width:0; }
.pf-product-visual img { display:block; width:100%; height:auto; border-radius:14px; }
.pf-product-visual figcaption { margin-top:12px; text-align:right; font-size:10px; line-height:1.6; color:#60717d; }
@media(min-width:1001px) { .pf-mobile-layout { grid-template-columns: .85fr 1.35fr; gap:48px; } }
@media(max-width:700px) { .pf-product-visual figcaption { text-align:center; font-size:9px; } }