/* ===== Topdata AI · interactive phone (5 scenes) ===== */
.aix { display: grid; grid-template-columns: minmax(0, 1fr) 380px minmax(0, 1fr); gap: 5vw; align-items: center; }
.aix-copy .title { max-width: 9ch; }
/* v1 layout: headline + scene list beside the phone, all in one viewport (pages with .aix-side keep the 3-column layout) */
.aix:not(:has(.aix-side)) { grid-template-columns: minmax(0, 600px) auto; justify-content: center; gap: 9vw; }
.aix-head { margin-bottom: 44px; }
.aix-head .title { max-width: 15ch; font-size: clamp(34px, 3.6vw, 56px); }
.aix-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 30px; margin-top: 30px; }
.aix-note { margin: 0; max-width: 26em; font-size: 14px; color: var(--ink-3); }
.ai-sec { padding-top: 96px; padding-bottom: 96px; }
@media (min-width: 821px) and (max-height: 1000px) { .aix .dev-phone { zoom: .86; } }
@media (min-width: 821px) and (max-height: 780px) { .aix .dev-phone { zoom: .74; } }
.aix-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.aix-list li { border-bottom: 1px solid var(--line); }
.aix-list button { position: relative; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 20px 0 22px; display: grid; grid-template-columns: 36px 1fr; gap: 4px 12px; color: var(--ink-3); transition: color .4s; }
html[dir="rtl"] .aix-list button { text-align: right; }
.aix-list button .n { grid-row: span 2; font: 400 12px/1.6 var(--mono); }
.aix-list button b { font: 400 21px/1.2 var(--sans); letter-spacing: -.015em; }
.aix-list button span:last-child { font-size: 14.5px; line-height: 1.45; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease), opacity .5s; }
.aix-list button.on { color: var(--ink); }
.aix-list button.on span:last-child { max-height: 80px; opacity: 1; color: var(--ink-2); }
.aix-list button::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--ink); }
.aix-list button.on::after { animation: aixProgress var(--dur, 6s) linear forwards; }
html[dir="rtl"] .aix-list button::after { left: auto; right: 0; }
.aix-list.paused button.on::after { animation-play-state: paused; }
@keyframes aixProgress { to { width: 100%; } }
.aix-list.picked button.on::after { animation: none; width: 100%; }
.aix-side { display: grid; gap: 28px; align-self: stretch; align-content: center; }
.aix-fact { border-top: 1px solid var(--line); padding-top: 18px; }
.aix-fact strong { display: block; font: 300 46px/1 var(--sans); letter-spacing: -.04em; }
.aix-fact span { display: block; margin-top: 8px; color: var(--ink-2); font-size: 15px; }

/* device frame */
.dev-phone { position: relative; width: 380px; aspect-ratio: 380 / 790; margin: 0; padding: 12px; border-radius: 62px;
  background: linear-gradient(145deg, #2a2c30, #0c0d0f 40%, #1c1e22); box-shadow: inset 0 0 0 1.5px #3a3c41, inset 0 0 0 5px #0c0d0f, 0 90px 120px -70px rgba(17,18,20,.6), 0 30px 60px -40px rgba(17,18,20,.4); }
.dev-phone::before { content: ""; position: absolute; left: 50%; top: 24px; width: 108px; height: 31px; margin-left: -54px; border-radius: 20px; background: #000; z-index: 5; }
.dev-phone::after { content: ""; position: absolute; right: -3px; top: 190px; width: 3px; height: 92px; border-radius: 2px; background: #1a1b1e; }
.ph-screen { position: relative; height: 100%; border-radius: 51px; overflow: hidden; background: #f7f7f4; color: var(--ink); font-family: var(--sans); direction: ltr; text-align: left; }
/* Arabic: the app UI itself reads right-to-left (camera labels and plates stay as the AI prints them) */
html[dir="rtl"] .ph-screen { direction: rtl; text-align: right; font-family: "IBM Plex Sans Arabic", var(--sans); }
html[dir="rtl"] .ph-screen .ai-tag, html[dir="rtl"] .ph-screen .ps-h small, html[dir="rtl"] .ph-screen .log em, html[dir="rtl"] .ph-screen .results span { font-family: "IBM Plex Sans Arabic", var(--sans); letter-spacing: 0; text-transform: none; font-size: 11.5px; }
html[dir="rtl"] .ph-screen .bbox, html[dir="rtl"] .ph-screen .live-meta, html[dir="rtl"] .ph-screen .live-top, html[dir="rtl"] .ph-status { direction: ltr; }   /* camera chrome keeps the device layout: LIVE pill top-left, clear of the AI boxes */
html[dir="rtl"] .ev.new b::after { margin-left: 0; margin-right: 6px; }
html[dir="rtl"] .results div span { left: auto; right: 6px; }
.ph-status { position: absolute; inset: 0 0 auto; z-index: 4; display: flex; justify-content: space-between; padding: 22px 34px 0 38px; font: 600 15px/1 var(--sans); pointer-events: none; }
.ph-status .bat { width: 25px; height: 12px; border: 1.5px solid currentColor; border-radius: 4px; position: relative; opacity: .9; }
.ph-status .bat::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; background: currentColor; border-radius: 1.5px; }
.ph-status.dark { color: #fff; }
.ps { position: absolute; inset: 0; padding: 64px 20px 92px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(10px) scale(.99); transition: opacity .55s var(--ease), transform .7s var(--ease); pointer-events: none; overflow: hidden; }
.ps.on { opacity: 1; transform: none; pointer-events: auto; }
.ps-h { display: flex; justify-content: space-between; align-items: flex-end; }
.ps-h small { display: block; font: 500 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.ps-h b { display: block; margin-top: 6px; font: 500 27px/1.05 var(--sans); letter-spacing: -.03em; }
.ps-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font: 500 11px/1 var(--sans); background: #e8f6ee; color: #1d8a52; }
.ps-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ai-tag { display: inline-flex; align-items: center; gap: 5px; font: 500 10px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #0a78a8; }
.ai-tag::before { content: ""; width: 9px; height: 9px; background: conic-gradient(from 0deg, #00a9e3, #6fd8ff, #00a9e3); -webkit-mask: radial-gradient(circle, transparent 2px, #000 2.5px); mask: radial-gradient(circle, transparent 2px, #000 2.5px); border-radius: 50%; animation: aiSpin 3s linear infinite; }
.card { background: #fff; border-radius: 20px; padding: 14px 15px; box-shadow: 0 1px 0 rgba(17,18,20,.04), 0 10px 26px -20px rgba(17,18,20,.35); }
.ai-card { background: linear-gradient(140deg, #0f1114, #1b1f26); color: #f3f3f0; }
.ai-card p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: rgba(243,243,240,.86); }
.ai-card .ai-tag { color: #6fd8ff; }
.typing::after { content: "▍"; color: #00a9e3; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { background: #fff; border-radius: 18px; padding: 12px 13px; display: grid; gap: 10px; box-shadow: 0 10px 26px -22px rgba(17,18,20,.35); }
.tile .ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #f1f1ee; }
.tile .ic svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tile.on .ic { background: #111214; } .tile.on .ic svg { stroke: #fff; }
.tile b { font: 500 13.5px/1.2 var(--sans); } .tile span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.scene-row { display: flex; gap: 8px; }
.scene-row span { flex: 1; text-align: center; padding: 10px 0; border-radius: 14px; background: #fff; font: 500 12px/1 var(--sans); box-shadow: 0 10px 24px -22px rgba(17,18,20,.4); }
.scene-row span.on { background: #111214; color: #fff; }

/* live view */
.ps-live { padding: 0 0 92px; background: #0b0c0e; color: #fff; }
.live-feed { position: relative; height: 56%; background: #222 center / cover no-repeat; overflow: hidden; }
.live-feed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 30%, transparent 70%, rgba(0,0,0,.5)); }
.live-top { position: absolute; z-index: 2; left: 18px; right: 18px; top: 64px; display: flex; justify-content: space-between; align-items: center; font: 500 12px/1 var(--sans); }
.rec { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); }
.rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.bbox { position: absolute; z-index: 2; border: 1.5px solid #6fd8ff; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.2); transition: all 1.2s var(--ease); }
.bbox i { position: absolute; left: -1.5px; top: -22px; white-space: nowrap; font: 600 10px/1 var(--mono); font-style: normal; letter-spacing: .03em; padding: 5px 7px; border-radius: 6px 6px 6px 0; background: #6fd8ff; color: #04131b; }
.bbox.car { border-color: #ffd66b; } .bbox.car i { background: #ffd66b; }
.live-meta { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 14px; display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); color: rgba(255,255,255,.85); }
.live-body { padding: 16px 18px; display: grid; gap: 12px; }
.live-body .ai-card { background: #17191d; }
.ptz { display: flex; gap: 8px; }
.ptz span { flex: 1; padding: 11px 0; text-align: center; border-radius: 14px; background: #1c1e22; font: 500 12px/1 var(--sans); color: rgba(255,255,255,.85); }
.ptz span.on { background: #f3f3f0; color: #111; }

/* events */
.chips { display: flex; gap: 6px; }
.chips span { padding: 7px 11px; border-radius: 999px; background: #fff; font: 500 11.5px/1 var(--sans); box-shadow: 0 8px 18px -16px rgba(17,18,20,.4); }
.chips span.on { background: #111214; color: #fff; }
.ev { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: center; background: #fff; border-radius: 18px; padding: 8px; box-shadow: 0 10px 26px -22px rgba(17,18,20,.35); }
.ev .th { position: relative; height: 56px; border-radius: 12px; background: #ccc center / cover; overflow: hidden; }
.ev .th::after { content: ""; position: absolute; left: var(--x, 38%); top: var(--y, 22%); width: var(--w, 26%); height: var(--h, 60%); border: 1.5px solid #6fd8ff; border-radius: 3px; }
.ev b { display: block; font: 500 13.5px/1.25 var(--sans); }
.ev span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.ev .ai-tag { margin-top: 6px; }
.ev.new b::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: #00a9e3; vertical-align: middle; }

/* access */
.lock-ring { position: relative; width: 190px; height: 190px; margin: 6px auto 2px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #fff 58%, transparent 59%), conic-gradient(#18c48f var(--p, 0%), #e7e7e3 0); transition: --p 1s; }
.lock-ring svg { width: 54px; height: 54px; fill: none; stroke: #111; stroke-width: 1.6; stroke-linecap: round; }
.lock-state { text-align: center; } .lock-state b { display: block; font: 500 22px/1.2 var(--sans); letter-spacing: -.02em; } .lock-state span { font-size: 12.5px; color: var(--ink-3); }
.log { display: grid; gap: 8px; }
.log > div { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: #fff; border-radius: 16px; padding: 9px 12px 9px 9px; }
.log i { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #d9d4ca, #a69c8a); }
.log > div:nth-child(2) i { background: linear-gradient(135deg, #cfd4da, #8c95a0); }
.log b { display: block; font: 500 13px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .log span { display: block; font-size: 11px; color: var(--ink-3); }
.log em { font: 500 10px/1 var(--mono); font-style: normal; color: #1d8a52; }

/* cloud */
.storage { display: grid; gap: 10px; }
.bar { height: 8px; border-radius: 4px; background: #e7e7e3; overflow: hidden; display: flex; }
.bar i { height: 100%; } .bar i:nth-child(1) { width: 46%; background: #111214; } .bar i:nth-child(2) { width: 14%; background: #00a9e3; }
.legend { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); }
.search { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 16px; background: #fff; font-size: 13.5px; box-shadow: 0 10px 26px -22px rgba(17,18,20,.35); }
.search svg { width: 16px; height: 16px; flex: none; fill: none; stroke: #00a9e3; stroke-width: 2; }
.timeline { position: relative; height: 54px; border-radius: 14px; background: #fff; overflow: hidden; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 14px; margin-top: -7px; background: repeating-linear-gradient(90deg, #d9d9d4 0 22px, #e9e9e5 22px 24px); }
.timeline .seg { position: absolute; top: 50%; height: 14px; margin-top: -7px; background: #111214; border-radius: 3px; }
.timeline .mk { position: absolute; top: 9px; width: 2px; height: 36px; background: #00a9e3; }
.timeline .mk::before { content: ""; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #00a9e3; box-shadow: 0 0 0 3px #fff; }
.timeline .head { position: absolute; top: 4px; bottom: 4px; width: 2px; background: #ff4d4d; animation: scrub 6s linear infinite; }
@keyframes scrub { from { left: 6%; } to { left: 94%; } }
.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.results div { height: 66px; border-radius: 12px; background: #ccc center / cover; position: relative; overflow: hidden; }
.results div span { position: absolute; left: 6px; bottom: 5px; font: 500 9.5px/1 var(--mono); color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }

/* tab bar */
.ph-tabs { position: absolute; z-index: 6; left: 14px; right: 14px; bottom: 14px; height: 64px; border-radius: 28px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  background: rgba(255,255,255,.82); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); box-shadow: 0 10px 30px -18px rgba(17,18,20,.5); }
.ph-tabs.dark { background: rgba(28,30,34,.82); }
.ph-tabs button { display: grid; justify-items: center; gap: 4px; background: none; border: 0; cursor: pointer; color: #9a9ca2; font: 500 10px/1 var(--sans); transition: color .3s; }
.ph-tabs.dark button { color: #7d8086; }
.ph-tabs button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ph-tabs button.on { color: #111214; } .ph-tabs.dark button.on { color: #fff; }

@media (max-width: 1180px) { .aix { grid-template-columns: 1fr 380px; } .aix-side { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) {
  .aix, .aix:not(:has(.aix-side)) { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 36px; }
  .aix-copy, .aix-side { width: 100%; } .aix-side { grid-template-columns: 1fr; }
  .dev-phone { width: 330px; }
  /* phones: headline → phone → scene list, so a tap on the list is seen on the phone just above */
  .aix:not(:has(.aix-side)) .aix-copy { display: contents; }
  .aix-head { order: -2; width: 100%; margin-bottom: 0; }
  .aix:not(:has(.aix-side)) .dev-phone { order: -1; }
  .aix-list, .aix-foot { width: 100%; }
  .aix-foot { margin-top: 0; }
}

/* ---------- AI boxes in CCTV-frame coordinates ----------
   .fit16 boxes take A's numbers as-is (--bx/--by/--bw/--bh = % of the 16:9 render, unitless).
   The frames are shown with background-size: cover in boxes narrower than 16:9, i.e. fitted by
   height and cropped left/right; container units turn image % into box positions exactly. */
@property --bx { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --by { syntax: '<number>'; inherits: true; initial-value: 0; }
.live-feed, .th.fit16, .results .fit16 { container-type: size; }
.bbox.fit16 { left: calc(50cqw + (var(--bx) / 100 - .5) * 177.78cqh); top: calc(var(--by) * 1%); width: calc(var(--bw) / 100 * 177.78cqh); height: calc(var(--bh) * 1%);
  transition: --bx 1.2s var(--ease), --by 1.2s var(--ease); }
.th.fit16::after, .results .fit16::after { left: calc(50cqw + (var(--bx) / 100 - .5) * 177.78cqh); top: calc(var(--by) * 1%); width: calc(var(--bw) / 100 * 177.78cqh); height: calc(var(--bh) * 1%); }
.th.fit16.car::after { border-color: #ffd66b; }
.results .fit16::after { content: ""; position: absolute; border: 1.5px solid #ffd66b; border-radius: 3px; }
html[dir="rtl"] .bbox.fit16 { direction: ltr; }

/* R7 polish: the lock ring never squeezes into an oval; vehicle tag sits under its box (clear of the camera name);
   search-result timestamps stay on one line */
.lock-ring { flex: none; }
.bbox.car i { top: auto; bottom: -22px; border-radius: 0 6px 6px 6px; }
.results div span { white-space: nowrap; }
@media (max-width: 820px) { .lock-ring { width: 132px; height: 132px; margin-top: 0; } .lock-ring svg { width: 44px; height: 44px; } .results div span { font-size: 8px; letter-spacing: -.02em; left: 4px; } html[dir="rtl"] .results div span { right: 4px; } }

/* QA-6: inactive scene rows ≥ 4.5:1 on the section's paper-2 (#ebebe7) — #5f6167 ≈ 5.3:1 */
.aix-list button { color: #5f6167; }