/* Capabilities pages (capabilities/ and capabilities/<group>/, built by tools/build-capabilities.py): one feature per
   section, copy beside a drawn app screen, as on the use-case pages. */

.ft-points{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.ft-points{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.ft-points{grid-template-columns:1fr}}
.inverse .feature .copy>p{color:var(--inv-fg2)}
.inverse .points div{border-top-color:var(--inv-line)}
.inverse .points span{color:var(--inv-fg2)}
.dd-menu b .soon,.ft-group .soon,.ft-next .soon{font-size:10px;padding:3px 7px;vertical-align:1px;margin-left:4px}
.hero .eyebrow{display:block;line-height:1}
.hero .eyebrow .soon{vertical-align:0}

/* Drawn screens: rows (same look as the homepage's fleet panel), a search box, replay, the swarm wall */
.fleet-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--app-line)}
.fleet-row:last-child{border-bottom:0}
.fleet-row b{font-size:14px}
.fleet-row span.d{display:block;font:400 13px/1.4 var(--body);color:var(--app-fg2)}
.screen-bar .st.ok{color:var(--app-ok)}
.ft-search{margin:12px 16px 4px;padding:9px 12px;border:1px solid var(--app-line);border-radius:8px;background:var(--app-raised);font:400 14px/1 var(--body);color:var(--app-fg)}
.ft-search::before{content:"⌕ ";color:var(--app-fg2)}
.ft-replay{position:relative}
.ft-replay img{width:100%;aspect-ratio:16/9;object-fit:cover}
.ft-scrub{position:absolute;left:16px;right:16px;bottom:14px;display:grid;gap:8px;font:500 12px/1 var(--mono);color:var(--app-fg)}
.ft-scrub i{display:block;height:4px;border-radius:999px;background:rgba(255,255,255,.25);overflow:hidden}
.ft-scrub i::before{content:"";display:block;width:var(--p);height:100%;background:var(--app-ok)}
.feeds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:var(--app-line)}
.feed{position:relative;margin:0}
.feed video{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#0B1A16}
.feed figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding:20px 10px 8px;background:linear-gradient(transparent,rgba(4,12,16,.85));font:400 12px/1.2 var(--body);color:var(--app-fg2)}
.feed figcaption b{font:600 12px/1.2 var(--body);color:var(--app-fg);flex-basis:100%}
.feed i{position:absolute;top:8px;left:8px;font:600 10px/1 var(--body);font-style:normal;padding:4px 7px;border-radius:999px;background:rgba(220,38,38,.9);color:#fff}
.ft-devices{display:grid;gap:20px}
.ft-devices img{width:100%;border-radius:var(--r)}

/* Overview cards and the "More capabilities" strip */
.ft-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.ft-group,.ft-next{display:grid;gap:14px;text-decoration:none;color:var(--fg)}
.ft-group{padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);transition:border-color .2s}
.ft-group:hover{border-color:var(--accent)}
.ft-group .dd-ic,.ft-next .dd-ic{width:56px;height:56px;display:grid;place-items:center;border-radius:16px;background:var(--surface);border:1px solid var(--line);color:var(--accent);transition:background-color .2s,color .2s}
.ft-group .dd-ic{width:64px;height:64px;margin-bottom:22px;background:var(--bg);border:0}
.ft-group .dd-ic svg,.ft-next .dd-ic svg{width:26px;height:26px}
.ft-group .dd-ic svg{width:30px;height:30px}
.ft-group:hover .dd-ic,.ft-next:hover .dd-ic{background:var(--accent);color:var(--on-accent)}
.ft-group b,.ft-next b{display:block;font:600 21px/1.25 var(--display);letter-spacing:-.015em}
.ft-group small,.ft-next small{display:block;color:var(--fg2);font-size:15px;margin-top:4px}
.ft-group:hover b,.ft-next:hover b{color:var(--accent)}
.ft-group{position:relative}
.ft-group .go{position:absolute;top:28px;right:28px;display:grid;place-items:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--line);color:var(--fg)}
.ft-group .go svg{width:16px;height:16px}
.ft-more{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.ft-next b{font-size:17px}
.ft-next small{font-size:14px}
@media (max-width:900px){.ft-more{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* OEMs page: the app's top bar wearing a sample brand */
.ft-ba{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;padding:18px 16px}
.ft-to{width:18px;height:18px;color:var(--app-fg2)}
.ft-app{display:grid;gap:8px;min-width:0}
.ft-app>small{font:500 12px/1.2 var(--body);color:var(--app-fg2)}
.ft-app-top{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--app-line);border-radius:10px 10px 0 0;background:var(--app-raised);font-size:13px;min-width:0}
.ft-app-top b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft-app-top svg{height:20px;width:auto;flex:none;color:var(--a)}
.ft-logo{flex:none;font:500 9px/1 var(--display);letter-spacing:.08em;color:var(--app-fg);padding:5px 6px;border:1px dashed var(--app-fg2);border-radius:6px}
.ft-logo b{font-weight:700}
.ft-app-body{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:-8px;padding:12px;border:1px solid var(--app-line);border-top:0;border-radius:0 0 10px 10px}
.ft-pill,.ft-btn{font-size:11px;font-weight:600;color:#fff;background:var(--a);white-space:nowrap}
.ft-pill{padding:3px 8px;border-radius:999px}
.ft-btn{margin-left:auto;padding:7px 10px;border-radius:6px}
@media (max-width:520px){.ft-ba{grid-template-columns:1fr}.ft-to{justify-self:center;transform:rotate(90deg)}}
.ft-swatches{display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--app-line)}
.ft-swatches button{width:22px;height:22px;padding:0;border:0;border-radius:50%;background:var(--c);cursor:pointer}
.ft-swatches button[aria-pressed="true"]{outline:2px solid var(--app-fg);outline-offset:2px}
/* Security page: an encrypted log as it looks without the key */
.ft-cipher{margin:0;padding:18px 16px;font:500 13px/1.7 var(--mono);color:var(--app-fg2);white-space:pre;overflow:hidden;letter-spacing:.04em}
/* OEMs and Connect: Azper hardware band */
.hw .link{justify-self:start;margin-top:4px}
.hw-links{display:flex;gap:18px}
/* Operations: live fleet view (sample figures and two flying aircraft, each with its live video) */
.lv-feed{display:block;width:100%;aspect-ratio:5/2;object-fit:cover;background:#0B1A16}
.lv-dot{display:inline-block;width:8px;height:8px;margin-left:8px;border-radius:50%;background:var(--app-ok);box-shadow:0 0 0 3px rgba(44,194,149,.2);vertical-align:1px}
.lv-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:22px 22px 0}
.lv-kpis div{padding:14px 16px;border:1px solid var(--app-line);border-radius:10px;background:var(--app-raised);min-width:0}
.lv-kpis small{display:block;font:500 12px/1.2 var(--body);color:var(--app-fg2)}
.lv-kpis b{display:block;margin-top:6px;font:600 20px/1 var(--display)}
.lv-kpis b.ok{color:var(--app-ok)}
.lv-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:18px 22px 22px}
.lv-card{border:1px solid var(--app-line);border-radius:12px;overflow:hidden;background:var(--app-raised);min-width:0}
.lv-head{display:flex;align-items:center;gap:12px;padding:16px 16px 6px;min-width:0}
.lv-head>div{min-width:0;flex:1}
.lv-head b{display:block;font-size:14px}
.lv-head small{display:block;font:400 12px/1.4 var(--body);color:var(--app-fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-ic{flex:none;width:30px;height:30px;padding:6px;border-radius:8px;background:rgba(44,194,149,.1);color:var(--app-ok);fill:none;stroke:currentColor;stroke-width:1.6}
.lv-ic rect{stroke:none}
.lv-tele{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px;margin:0;padding:12px 16px 18px}
.lv-tele dt{font:500 12px/1.2 var(--body);color:var(--app-fg2)}
.lv-tele dd{margin:5px 0 0;font:600 14px/1.2 var(--body);font-variant-numeric:tabular-nums;white-space:nowrap}
.lv-bat{display:block;height:3px;margin-top:5px;border-radius:2px;background:linear-gradient(90deg,var(--app-ok) var(--b),var(--app-line) var(--b))}
.lv-bat.warn{background:linear-gradient(90deg,var(--app-warn) var(--b),var(--app-line) var(--b))}
/* the live view gets more of the row than the copy */
@media (min-width:901px){#live .feature.flip{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}}
@media (max-width:600px){.lv-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.lv-cards{grid-template-columns:1fr}}
/* Operations: drone traffic map, in the app's marker colours (Styr src/lib/mapMarkerColors.js) */
.tf-map{position:relative;aspect-ratio:2/1;overflow:hidden;background:#3A4636}
.tf-map img{display:block;width:100%;height:100%;object-fit:cover}
.tf-m{display:inline-block;width:14px;height:14px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45);background:var(--app-fg2)}
.tf-m.ready{background:#22C55E}
.tf-m.bad{background:#EF4444}
.tf-m.off{background:#6B7280}
.tf-m.anon{background:#A855F7}
.tf-map .tf-m{position:absolute;left:var(--x);top:var(--y);margin:-7px 0 0 -7px}
.tf-map .tf-m.fly::after{content:"";position:absolute;inset:-2.5px;border-radius:50%;background:inherit;animation:tf-ping 2.4s ease-out infinite;z-index:-1}
.tf-map .tf-m.fly{animation:tf-drift 9s ease-in-out infinite alternate}
.tf-map .tf-m.fly:nth-of-type(5){animation-duration:11s;animation-delay:-4s}
.tf-map .tf-m.fly:nth-of-type(6){animation-duration:13s;animation-delay:-7s}
.tf-map .tf-m.fly:nth-of-type(7){animation-duration:10s;animation-delay:-2s}
@keyframes tf-drift{to{left:calc(var(--x) + var(--dx));top:calc(var(--y) + var(--dy))}}
@keyframes tf-ping{from{transform:scale(1);opacity:.55}to{transform:scale(2.8);opacity:0}}
@media (prefers-reduced-motion:reduce){.tf-map .tf-m,.tf-map .tf-m::after{animation:none!important}}
.tf-credit{color:rgba(255,255,255,.75);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.tf-legend{display:flex;flex-wrap:wrap;gap:10px 22px;padding:14px 16px;border-top:1px solid var(--app-line);font-size:13px;color:var(--app-fg2)}
.tf-legend span{display:flex;align-items:center;gap:8px}
.tf-legend .tf-m{width:12px;height:12px;border-width:2px}
/* Aircraft: accelerometer calibration, captured from the app */
.cal-shot{display:block;width:100%;height:auto}