/* Axia Suite interface mock-ups (Guard back-office + Patrol field app), rebuilt from the
   Figma "Axia screens" (Sep 2026) in the v3 brand. Fictitious data only.
   Everything inside a frame is sized in em from a container-relative base, so a mock scales
   with its frame like a screenshot would. */

/* ---------- desktop frame ---------- */
.dx { container-type: inline-size; border-radius: 14px; overflow: hidden; background: #F2F5F9; box-shadow: 0 30px 80px rgba(4,21,43,.35), 0 0 0 1px rgba(7,31,60,.08); text-align: start; }
.dx-in { font-size: calc(100cqw / 92); color: var(--ink); font-family: var(--sans); line-height: 1.35; }
.dx-bar { height: 2.6em; background: #E4E9F0; display: flex; align-items: center; gap: .5em; padding: 0 1em; }
.dx-bar i { width: .8em; height: .8em; border-radius: 50%; background: #C7D0DC; }
.dx-bar span { margin-inline-start: 1.2em; flex: 1; max-width: 32em; height: 1.6em; border-radius: .8em; background: #fff; font: 500 .85em/1.9em var(--mono); color: var(--muted); padding: 0 1em; direction: ltr; text-align: left; }
.dx-app { display: grid; grid-template-columns: 15em 1fr; height: 54em; }
.dx-side { background: var(--navy); color: #9DB0CA; padding: 1.4em 1em; display: flex; flex-direction: column; gap: .15em; }
.dx-side .brand { display: flex; align-items: center; gap: .6em; color: #fff; font-weight: 700; font-size: 1.15em; margin: 0 .4em 1.2em; }
.dx-side .brand img { width: 1.9em; height: auto; }
.dx-side .brand small { display: block; font: 500 .62em var(--mono); letter-spacing: .12em; color: #6B86A8; text-transform: uppercase; }
.dx-side small.g { font: 600 .72em var(--mono); letter-spacing: .14em; color: #5E7898; margin: 1.1em .6em .3em; text-transform: uppercase; }
.dx-side span { padding: .5em .7em; border-radius: .5em; display: flex; justify-content: space-between; align-items: center; }
.dx-side span.on { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 3px 0 0 var(--cyan); }
.dx-side em { font: 600 .72em var(--mono); font-style: normal; background: #B3261E; color: #fff; border-radius: 1em; padding: .1em .55em; }
.dx-side em.live { background: rgba(0,226,237,.18); color: var(--cyan); }
.dx-side .me { margin-top: auto; display: flex; gap: .6em; align-items: center; padding: .8em .4em 0; border-top: 1px solid rgba(255,255,255,.1); }
.dx-side .me b { width: 2.2em; height: 2.2em; border-radius: 50%; background: #24518A; color: #fff; display: grid; place-items: center; font-size: .8em; }
.dx-side .me div { font-size: .85em; color: #fff; } .dx-side .me div small { display: block; color: #6B86A8; font: 500 .8em var(--mono); }
.dx-main { padding: 1.4em 2em; overflow: hidden; display: flex; flex-direction: column; gap: 1.1em; }
.dx-top { display: flex; align-items: center; gap: 1em; font-size: .9em; color: var(--muted); }
.dx-top .search { flex: 1; max-width: 28em; background: #fff; border: 1px solid var(--line); border-radius: 2em; padding: .5em 1em; }
.dx-top .alert { margin-inline-start: auto; background: #FFF4D6; color: #9A6400; border-radius: 2em; padding: .35em .9em; font-weight: 600; }
.dx-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; }
.dx-h .eb { font: 600 .75em var(--mono); letter-spacing: .14em; color: var(--blue-600); text-transform: uppercase; }
.dx-h h5 { font: 700 2.6em/1 var(--display); letter-spacing: -.02em; margin: .15em 0 .2em; }
.dx-h p { color: var(--ink-2); font-size: .95em; }
.dx-btn { display: inline-block; border-radius: 2em; padding: .55em 1.1em; font-weight: 600; font-size: .9em; background: var(--navy); color: #fff; white-space: nowrap; }
.dx-btn.o { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.dx-btn.b { background: var(--blue-600); }
.dx-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9em; }
.dx-kpi { background: #fff; border-radius: .9em; padding: 1em 1.2em; border: 1px solid var(--line); }
.dx-kpi small { font: 600 .7em var(--mono); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.dx-kpi strong { display: block; font: 700 2.6em/1.1 var(--display); letter-spacing: -.02em; margin-top: .15em; }
.dx-kpi strong sub { font-size: .42em; color: var(--muted); font-weight: 500; vertical-align: baseline; }
.dx-kpi p { font-size: .8em; color: var(--muted); }
.dx-kpi.ok strong { color: #2E7D4F; } .dx-kpi.bad strong { color: #B3261E; } .dx-kpi.warn strong { color: #9A6400; } .dx-kpi.blue strong { color: var(--blue-600); }
.dx-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: .9em; min-height: 0; }
.dx-row.even { grid-template-columns: 1fr 1fr; }
.dx-card { background: #fff; border-radius: .9em; border: 1px solid var(--line); padding: 1em 1.2em; overflow: hidden; }
.dx-card h6 { font: 600 1em var(--sans); display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin-bottom: .2em; }
.dx-card h6 small { font: 500 .75em var(--mono); color: var(--muted); }
.dx-card > p { font-size: .8em; color: var(--muted); margin-bottom: .6em; }
.dx-list { display: grid; }
.dx-list > div { display: grid; grid-template-columns: 4em 1.3fr 1.4fr auto; gap: .8em; align-items: center; padding: .62em 0; border-top: 1px solid #EEF1F5; font-size: .88em; }
.dx-list > div > :first-child { font: 500 .9em var(--mono); color: var(--muted); }
.dx-list.c3 > div { grid-template-columns: 1.4fr 1fr auto; }
.dx-list.c5 > div { grid-template-columns: 1.4fr 1.2fr 1.2fr .7fr auto; }
.dx-list.c5 > div > :first-child { font: 600 1em var(--sans); color: var(--ink); }
.dx-list .hd { font: 600 .72em var(--mono) !important; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; border-top: 0 !important; padding-top: 0 !important; }
.chip { display: inline-flex; align-items: center; gap: .4em; font-size: .78em; font-weight: 600; border-radius: 2em; padding: .2em .7em; white-space: nowrap; background: #E7F4EC; color: #2E7D4F; }
.chip::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.chip.red { background: #FBE9E7; color: #B3261E; } .chip.amber { background: #FFF4D6; color: #9A6400; } .chip.blue { background: var(--blue-50); color: var(--blue-600); } .chip.grey { background: #EEF1F5; color: var(--muted); }
.dx-bars { display: flex; align-items: flex-end; gap: .7em; height: 11em; padding-top: 1em; }
.dx-bars div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3em; height: 100%; justify-content: flex-end; font: 500 .7em var(--mono); color: var(--muted); }
.dx-bars i { width: 100%; border-radius: .4em .4em 0 0; background: linear-gradient(180deg, var(--blue-300), var(--blue-600)); }
.dx-bars div:last-child i { background: var(--sensor); }
.dx-prog { height: .5em; border-radius: 1em; background: #EEF1F5; overflow: hidden; } .dx-prog i { display: block; height: 100%; background: var(--blue-600); border-radius: 1em; }
.dx-prog.red i { background: #B3261E; } .dx-prog.ok i { background: #2E7D4F; }
.dx-flag { border: 1px solid #F2C4BF; background: #FDF3F2; border-radius: .7em; padding: .7em .9em; font-size: .85em; color: #8C1D16; }
.dx-flag b { display: block; font: 600 .78em var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .2em; }
.dx-ai { border: 1px dashed var(--blue-300); background: var(--blue-50); border-radius: .7em; padding: .7em .9em; font-size: .85em; color: var(--ink-2); }
.dx-ai b { display: block; font: 600 .75em var(--mono); letter-spacing: .12em; color: var(--blue-600); text-transform: uppercase; margin-bottom: .2em; }
.dx-tl { display: grid; gap: 0; }
.dx-tl div { display: grid; grid-template-columns: 4em 1em 1fr; gap: .6em; font-size: .85em; padding-bottom: .8em; position: relative; }
.dx-tl div > :first-child { font: 500 .9em var(--mono); color: var(--muted); }
.dx-tl div i { width: .8em; height: .8em; border-radius: 50%; background: var(--blue-600); margin-top: .3em; box-shadow: 0 0 0 .25em var(--blue-100); }
.dx-tl div i.red { background: #B3261E; box-shadow: 0 0 0 .25em #FBE9E7; } .dx-tl div i.ok { background: #2E7D4F; box-shadow: 0 0 0 .25em #E7F4EC; }
.dx-tl div small { display: block; color: var(--muted); }
.dx-ph { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; }
.dx-ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .5em; }
.dx-map { position: relative; border-radius: .9em; overflow: hidden; background: #E8EEF5; min-height: 0; }
.dx-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dx-pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; font: 600 .72em var(--sans); color: var(--ink); white-space: nowrap; }
.dx-pin i { width: 1.5em; height: 1.5em; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #2E7D4F; border: .2em solid #fff; box-shadow: 0 .2em .5em rgba(7,31,60,.3); margin-bottom: .3em; }
.dx-pin.red i { background: #B3261E; width: 2em; height: 2em; } .dx-pin.amber i { background: #D68910; }
.dx-pop { position: absolute; background: #fff; border-radius: .8em; box-shadow: var(--shadow-lg); padding: .9em 1em; width: 19em; font-size: .85em; display: grid; gap: .5em; }
.dx-pop b { font-size: 1.1em; }
.dx-stats { position: absolute; left: 1em; right: 1em; bottom: 1em; background: rgba(255,255,255,.95); border-radius: .8em; display: grid; grid-template-columns: repeat(4, 1fr); padding: .7em 1em; font-size: .8em; }
.dx-stats small { font: 600 .75em var(--mono); color: var(--muted); letter-spacing: .1em; text-transform: uppercase; display: block; }
.dx-stats b { font: 700 1.5em var(--display); }
.dx-split { display: grid; grid-template-columns: 1fr 2fr; gap: .9em; flex: 1; min-height: 0; }
.dx-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.dx-sum div { background: #F6F8FB; border-radius: .6em; padding: .6em .8em; font-size: .85em; }
.dx-sum small { display: block; font: 600 .7em var(--mono); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.dx-sum b { font: 700 1.5em var(--display); }
.dx-ring { width: 5.5em; height: 5.5em; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, #fff 78%, transparent 80% 100%), conic-gradient(var(--blue-600) var(--p), #EEF1F5 0); font: 700 1.1em var(--display); }
/* the planning mock reuses .app, placed inside .dx-app's main area */
.dx .app { position: static; height: 54em; font-size: 1em; }
.dx .app .side { font-size: 1em; }

/* ---------- phone frame ---------- */
.px { container-type: inline-size; width: 100%; max-width: 300px; aspect-ratio: 9 / 19; border-radius: 13% / 6.2%; background: #0A0F18; padding: 3.2%; box-shadow: 0 30px 70px rgba(4,21,43,.45), inset 0 0 0 1px rgba(255,255,255,.08); text-align: start; }
.px-in { font-size: calc(100cqw / 24); height: 100%; border-radius: 10.5% / 5%; background: #04152B; color: #DDE6F2; overflow: hidden; display: flex; flex-direction: column; padding: 1.1em 1.2em; position: relative; font-family: var(--sans); line-height: 1.3; }
.px-in::before { content: ""; position: absolute; top: .6em; left: 50%; transform: translateX(-50%); width: 6.5em; height: 1.7em; border-radius: 1em; background: #000; }
.px-st { display: flex; justify-content: space-between; font: 600 .78em var(--mono); color: #9DB0CA; margin-bottom: 1.6em; direction: ltr; }
.px-st i { width: .55em; height: .55em; border-radius: 50%; background: var(--cyan); align-self: center; }
.px-hi { color: #9DB0CA; font-size: .9em; } .px-hi b { display: block; color: #fff; font: 700 2em/1.05 var(--display); letter-spacing: -.02em; }
.px-card { background: #0D2C52; border: 1px solid #1D3E68; border-radius: 1.1em; padding: 1em; margin-top: 1em; display: grid; gap: .45em; }
.px-card small { font: 600 .7em var(--mono); letter-spacing: .12em; color: #7FA0C8; text-transform: uppercase; }
.px-card b { color: #fff; font-size: 1.2em; }
.px-card .k { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; border-top: 1px solid #1D3E68; padding-top: .6em; margin-top: .2em; font-size: .85em; color: #fff; }
.px-card .k small { display: block; font-size: .7em; }
.px-live { font: 600 .72em var(--mono); color: var(--cyan); letter-spacing: .1em; text-transform: uppercase; display: flex; gap: .5em; align-items: center; }
.px-live::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 .3em rgba(0,226,237,.2); }
.px-tl { display: flex; align-items: center; gap: .5em; font: 500 .75em var(--mono); color: #9DB0CA; direction: ltr; }
.px-tl i { flex: 1; height: .3em; border-radius: 1em; background: #1D3E68; position: relative; }
.px-tl i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 10%); background: var(--sensor); border-radius: 1em; }
.px-btn { margin-top: auto; border-radius: 1em; padding: 1em; text-align: center; font-weight: 700; color: #04152B; background: var(--sensor); }
.px-btn.red { background: #D93A2F; color: #fff; }
.px-btn.ghost { background: transparent; color: #DDE6F2; border: 1px solid #1D3E68; }
.px-note { text-align: center; font-size: .75em; color: #7FA0C8; margin-top: .7em; }
.px-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; margin-top: 1em; }
.px-grid div { background: #0D2C52; border: 1px solid #1D3E68; border-radius: 1em; padding: 1em .9em; font-weight: 600; color: #fff; min-height: 5.2em; display: flex; flex-direction: column; justify-content: space-between; }
.px-grid div i { width: 1.4em; height: 1.4em; border-radius: .4em; border: .15em solid var(--cyan); }
.px-grid div.red { background: #3A1012; border-color: #7A2420; } .px-grid div.red i { border-color: #FF8A80; }
.px-pti { margin: auto -1.2em -1.1em; padding: .9em 1.2em 1.2em; background: #2A0E10; display: flex; align-items: center; justify-content: space-between; gap: .6em; font-size: .85em; }
.px-pti b { color: #FF8A80; display: block; } .px-pti span { color: #C99; font-size: .85em; }
.px-pti em { font-style: normal; background: #D93A2F; color: #fff; font-weight: 700; border-radius: .7em; padding: .6em 1em; letter-spacing: .06em; }
.px-geo { position: relative; width: 12em; height: 12em; margin: 1.4em auto .6em; border-radius: 50%; background: radial-gradient(circle, rgba(0,226,237,.18) 0 34%, rgba(0,156,250,.1) 35% 66%, rgba(6,76,255,.08) 67% 100%); border: 1px dashed rgba(0,226,237,.5); }
.px-geo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.2em; height: 1.2em; transform: translate(-50%, -50%); border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 .4em rgba(0,226,237,.25), 0 0 1.5em var(--cyan); }
.px-ok { display: flex; align-items: center; gap: .6em; background: rgba(46,125,79,.18); border: 1px solid rgba(46,125,79,.5); color: #8FE3B0; border-radius: .9em; padding: .7em .9em; font-size: .85em; }
.px-cps { display: grid; gap: .45em; margin-top: .9em; }
.px-cps div { display: grid; grid-template-columns: 1.5em 1fr auto; gap: .6em; align-items: center; background: #0D2C52; border: 1px solid #1D3E68; border-radius: .8em; padding: .6em .7em; font-size: .85em; color: #fff; }
.px-cps div i { width: 1.4em; height: 1.4em; border-radius: 50%; border: .15em solid #2B4E7C; display: grid; place-items: center; font-style: normal; font-size: .75em; }
.px-cps div.done i { background: #2E7D4F; border-color: #2E7D4F; color: #fff; } .px-cps div.done i::after { content: "✓"; }
.px-cps div.now { border-color: var(--cyan); box-shadow: 0 0 0 .2em rgba(0,226,237,.15); } .px-cps div.now i { border-color: var(--cyan); }
.px-cps small { font: 500 .8em var(--mono); color: #7FA0C8; }
.px-qr { margin: .9em auto 0; width: 8em; height: 8em; border-radius: .8em; border: .2em solid var(--cyan); position: relative; background:
  linear-gradient(90deg, transparent 45%, rgba(0,226,237,.9) 45% 55%, transparent 55%) 0 50% / 100% .2em no-repeat,
  repeating-conic-gradient(#DDE6F2 0 25%, transparent 0 50%) 50% / 1.6em 1.6em; opacity: .9; }
.px-chips { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .8em; }
.px-chips span { border: 1px solid #1D3E68; border-radius: 2em; padding: .35em .8em; font-size: .8em; color: #B9C6D8; }
.px-chips span.on { background: #D93A2F; border-color: #D93A2F; color: #fff; }
.px-ph { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; margin-top: .8em; }
.px-ph img, .px-ph i { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .6em; }
.px-ph i { border: 1px dashed #2B4E7C; display: grid; place-items: center; font-style: normal; color: #7FA0C8; font-size: 1.4em; }
.px-field { background: #0D2C52; border: 1px solid #1D3E68; border-radius: .8em; padding: .6em .8em; font-size: .82em; margin-top: .6em; color: #B9C6D8; }
.px-field small { display: block; font: 600 .75em var(--mono); color: #7FA0C8; letter-spacing: .1em; text-transform: uppercase; }
.px-team { display: grid; gap: .45em; margin-top: .9em; }
.px-team div { display: grid; grid-template-columns: 2.2em 1fr auto; gap: .6em; align-items: center; font-size: .85em; color: #fff; }
.px-team div b { width: 2.2em; height: 2.2em; border-radius: 50%; display: grid; place-items: center; background: #24518A; font-size: .8em; }
.px-team small { display: block; color: #7FA0C8; font-size: .85em; }
.px-alert { background: #3A2A06; border: 1px solid #7A5A10; color: #FFD27A; border-radius: .9em; padding: .7em .9em; font-size: .85em; margin-top: .9em; }
.px-alert b { display: block; color: #FFE3A3; }
.px-tag { font: 600 .7em var(--mono); border-radius: 2em; padding: .2em .6em; background: rgba(46,125,79,.25); color: #8FE3B0; }
.px-tag.amber { background: rgba(214,137,16,.25); color: #FFD27A; } .px-tag.red { background: rgba(217,58,47,.3); color: #FF9C93; }
.px-nav { margin: auto -1.2em -1.1em; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; font-size: .72em; color: #6B86A8; padding: .9em 0 1.3em; border-top: 1px solid #12305A; }
.px-nav b { color: #fff; }

/* ---------- Suite page layout ---------- */
.sx-hero { position: relative; background: radial-gradient(110% 70% at 50% 0%, #163C6B 0%, var(--navy) 45%, var(--deep) 100%); color: #fff; text-align: center; padding: 96px 0 0; overflow: hidden; }
.sx-hero .eyebrow { color: var(--cyan); }
.sx-hero h1 { font: 700 var(--fs-display)/1 var(--display); letter-spacing: var(--track-display); max-width: 17ch; margin: 14px auto 0; }
.sx-hero .lead { color: var(--on-band); margin: 22px auto 0; max-width: 60ch; }
.sx-hero .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.sx-hero .mods { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.sx-hero .mods span { font: 500 13px var(--mono); color: #B9C6D8; border: 1px solid rgba(255,255,255,.16); border-radius: var(--pill); padding: 6px 14px; }
.sx-hero .mods b { color: var(--cyan); font-weight: 600; }
.sx-stage { position: relative; width: min(1060px, 92%); margin: 64px auto 0; }
.sx-stage .dx { border-radius: 14px 14px 0 0; margin-bottom: -2px; }
.sx-stage .px { position: absolute; right: -3%; bottom: -60px; width: 23%; }
[dir="rtl"] .sx-stage .px { right: auto; left: -3%; }
.sx-proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sx-proof div { border-top: 2px solid var(--blue-600); padding-top: 16px; }
.sx-proof b { display: block; font: 700 clamp(30px, 3.4vw, 44px)/1 var(--display); letter-spacing: -.02em; color: var(--navy); }
.sx-proof p { margin-top: 8px; color: var(--ink-2); font-size: 15px; }
.sx-proof small { display: block; margin-top: 6px; font: 500 11px var(--mono); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.sx-flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin-top: 44px; counter-reset: f; }
.sx-flow div { position: relative; padding: 0 14px; text-align: center; }
.sx-flow div::before { counter-increment: f; content: counter(f); display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 50%; background: #fff; border: 2px solid var(--blue-200); color: var(--navy); font: 700 18px var(--display); position: relative; z-index: 1; }
.sx-flow div::after { content: ""; position: absolute; top: 24px; left: 50%; width: 100%; height: 2px; background: linear-gradient(90deg, var(--blue-200), var(--blue-300)); }
.sx-flow div:last-child::after { display: none; }
[dir="rtl"] .sx-flow div::after { left: auto; right: 50%; }
.sx-flow b { display: block; font: 600 17px var(--sans); }
.sx-flow p { font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.sx-flow em { display: inline-block; margin-top: 10px; font: 600 11px var(--mono); font-style: normal; color: var(--blue-600); background: var(--blue-50); border-radius: var(--pill); padding: 3px 10px; }
.sx-tour .tabs { justify-content: center; }
.sx-tour .tabs button { border-color: var(--line-strong); color: var(--ink-2); background: #fff; }
.sx-tour .tabs button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.sx-tour .panel { background: transparent; grid-template-columns: 1fr 2.1fr; gap: 48px; align-items: center; min-height: 0; overflow: visible; border-radius: 0; }
.sx-tour .panel .txt { padding: 0; }
.sx-tour .panel h3 { font: 700 30px/1.1 var(--display); letter-spacing: -.015em; color: var(--ink); }
.sx-tour .panel p { color: var(--ink-2); }
.sx-tour .panel li::before { background: var(--blue-600); color: #fff; }
.sx-tour .panel .tag { font: 600 12px var(--mono); color: var(--blue-600); letter-spacing: .1em; text-transform: uppercase; }
.sx-field { background: var(--deep); color: #fff; }
.sx-field .split-head p, .sx-field .lead { color: var(--on-band); }
.sx-phones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 48px; }
.sx-phones figure { margin: 0; display: grid; gap: 18px; justify-items: center; }
.sx-phones figcaption { text-align: center; max-width: 26ch; }
.sx-phones figcaption b { display: block; font: 600 18px var(--sans); color: #fff; }
.sx-phones figcaption span { color: var(--on-band); font-size: 14px; }
.sx-note { margin-top: 36px; text-align: center; font: 500 13px var(--mono); color: #7FA0C8; }
.sx-sup { display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: center; }
.sx-caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.sx-caps div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.sx-caps i { display: block; width: 36px; height: 36px; border-radius: 10px; background: var(--blue-50); position: relative; margin-bottom: 14px; }
.sx-caps i::after { content: ""; position: absolute; inset: 11px; border-radius: 3px; background: var(--sensor); }
.sx-caps b { display: block; font: 600 16px var(--sans); }
.sx-caps p { font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.sx-tech { background: var(--navy); color: #fff; }
.sx-tech .split-head p { color: var(--on-band); }
.sx-spec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.1); border-radius: var(--radius-lg); overflow: hidden; margin-top: 40px; }
.sx-spec div { background: var(--navy-800); padding: 26px; }
.sx-spec small { font: 600 11px var(--mono); letter-spacing: .14em; color: var(--cyan); text-transform: uppercase; }
.sx-spec b { display: block; font: 600 19px var(--sans); margin: 10px 0 8px; }
.sx-spec ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; color: var(--on-band); font-size: 14px; }
.sx-spec li::before { content: "· "; color: var(--cyan); }
@media (max-width: 1080px) {
  .sx-tour .panel { grid-template-columns: 1fr; gap: 28px; }
  .sx-phones { grid-template-columns: repeat(2, 1fr); }
  .sx-caps, .sx-proof { grid-template-columns: repeat(2, 1fr); }
  .sx-spec { grid-template-columns: 1fr 1fr; }
  .sx-flow { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .sx-flow div:nth-child(3)::after { display: none; }
}
@media (max-width: 640px) {
  .sx-stage .px { display: none; }
  .sx-phones, .sx-caps, .sx-proof, .sx-spec { grid-template-columns: 1fr; }
  .sx-flow { grid-template-columns: 1fr 1fr; }
  .sx-flow div:nth-child(3)::after { display: block; } .sx-flow div:nth-child(2n)::after { display: none; }
  .sx-sup { grid-template-columns: 1fr; justify-items: center; }
  .sx-tour .tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }
  .sx-tour .tabs button { flex: none; }
}

.dx-plan { display: grid; grid-template-columns: 8em repeat(7, 1fr); gap: .35em; align-items: center; font-size: .9em; }
.dx-plan .h { font: 600 .75em var(--mono); color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: .1em; }
.dx-plan b { font-weight: 600; white-space: nowrap; }
.dx-plan .pl { border-radius: .45em; padding: .55em .5em; font: 600 .72em var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-plan .n { background: var(--navy); color: #fff; } .dx-plan .j { background: var(--blue-100); color: var(--blue-700); }
.dx-plan .r { border: 1px dashed var(--line-strong); color: var(--muted); text-align: center; } .dx-plan .c { background: #E7F4EC; color: #2E7D4F; }
/* size containment gives .px no intrinsic width; fix it where it sits in a grid track */
.sx-phones figure .px { width: 270px; max-width: 100%; }
.sx-sup > div:first-child .px { width: 300px; }
.dx-list.c3 > div > :first-child { font: 600 1em var(--sans); color: var(--ink); }
.dx-side .brand span { display: flex; flex-direction: column; line-height: 1.1; }

@media (max-width: 640px) {
  .sx-flow div::after { display: none !important; }
  .sx-flow div { text-align: start; display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; align-items: start; }
  .sx-flow div::before { margin: 0; grid-row: 1 / span 3; }
  .sx-flow em { justify-self: start; margin-top: 6px; }
}