/* Exchange Packet — site styles. Jost Bold headings, Jost Medium labels, Inter body. */
@font-face{font-family:"Jost";src:url("fonts/jost-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

*{box-sizing:border-box}
:root{
  color-scheme:light dark;
  --blue:#003865;      /* PMS 2955 C */
  --accent:#1E8AFF;    /* PMS 2382 C, website accent only */
  --bg:#fff;
  --soft:#F4F6F8;
  --text:#161B22;
  --muted:#556070;
  --rule:#D8DEE5;
  --btn-bg:var(--blue);--btn-fg:#fff;--band:var(--blue);--ok:#1B7F46;--bad:#C2362F;
  --head:"Jost",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1120px;
}
@media(prefers-color-scheme:dark){
  :root{--bg:#161616;--soft:#1F1F1F;--text:#EDEDED;--muted:#A8A8A8;--rule:#313131;--btn-bg:#fff;--btn-fg:var(--blue);--ok:#4CC38A;--bad:#FF8A80}
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(20px,5vw,40px)}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-999px;top:8px;background:var(--blue);color:#fff;padding:8px 14px;z-index:20;border-radius:4px}
.skip:focus{left:8px}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 96%,transparent);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px}
.logo{display:block;line-height:0}
.logo img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font:500 15px/1 var(--head);letter-spacing:.02em;text-decoration:none;color:var(--text);padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--accent)}
.nav a.call .word{display:none}
.nav a.call{background:var(--btn-bg);color:var(--btn-fg);padding:11px 18px;border-radius:999px;border:0;font-weight:600}
.nav a.call:hover{opacity:.88;border:0}

/* ---------- shared bits ---------- */
.eyebrow{font:500 13px/1 var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0}
h1,h2,h3{font-family:var(--head);font-weight:700;margin:0;color:var(--blue)}
@media(prefers-color-scheme:dark){h1,h2,h3{color:#fff}}
.btn{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;border-radius:999px;font:600 17px/1 var(--head);letter-spacing:.02em;text-decoration:none;border:2px solid var(--btn-bg);background:var(--btn-bg);color:var(--btn-fg)}
.btn:hover{opacity:.88}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--text);opacity:1}

/* ---------- hero ---------- */
.hero{padding-block:clamp(56px,9vw,120px) clamp(48px,7vw,84px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);gap:clamp(24px,6vw,80px);align-items:center}
.hero h1{font-size:clamp(42px,7.4vw,84px);line-height:1.02;letter-spacing:-.015em;margin:22px 0 24px;text-wrap:balance}
.hero p.sub{font-size:clamp(18px,2.1vw,22px);line-height:1.5;color:var(--muted);max-width:34em;margin:0 0 36px}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px}
.hero .mark{justify-self:end;width:min(100%,340px)}
.hero .mark img{width:100%;height:auto}

.lines{border-block:1px solid var(--rule)}
.lines ul{list-style:none;margin:0 auto;padding:0 clamp(20px,5vw,40px);display:grid;grid-template-columns:repeat(4,1fr)}
.lines li+li{border-left:1px solid var(--rule)}
.lines a{display:block;padding:20px 8px;text-align:center;text-decoration:none;font:500 14px/1 var(--head);letter-spacing:.16em;text-transform:uppercase}
.lines a:hover{background:var(--soft)}

/* ---------- services ---------- */
.services{padding-block:clamp(56px,8vw,104px)}
.svc{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,5vw,64px);padding-block:clamp(32px,4.5vw,52px);border-top:1px solid var(--rule)}
.svc:last-child{border-bottom:1px solid var(--rule)}
.svc .n{font:500 14px/1 var(--head);letter-spacing:.16em;color:var(--muted);margin:0 0 14px}
.svc h3{font-size:clamp(30px,3.6vw,42px);line-height:1.05}
.svc .lede{margin:0 0 22px;font-size:19px;line-height:1.5;max-width:34em}
.svc ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 36px}
.svc li{padding:11px 0 11px 22px;border-top:1px solid var(--rule);position:relative;font-size:16px;line-height:1.45}
.svc li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:8px;background:var(--blue)}
@media(prefers-color-scheme:dark){.svc li::before{background:#fff}}
.svc li.key{font-weight:600}
.svc li.key::before{background:var(--accent)}
.sec-head{margin-bottom:clamp(24px,4vw,40px)}

/* ---------- approach ---------- */
.approach{background:var(--band);color:#fff;padding-block:clamp(56px,8vw,104px)}
.approach .eyebrow{color:rgba(255,255,255,.72)}
.approach h2{color:#fff;font-size:clamp(32px,5vw,56px);line-height:1.06;letter-spacing:-.01em;margin:18px 0 clamp(32px,5vw,56px);max-width:16em;text-wrap:balance}
.approach .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.approach h3{color:#fff;font-size:24px;line-height:1.1;margin:0 0 10px;padding-top:18px;border-top:2px solid rgba(255,255,255,.4)}
.approach p{margin:0;color:rgba(255,255,255,.88);font-size:17px;line-height:1.55}
.approach .any{margin:clamp(32px,5vw,56px) 0 0;font:500 17px/1.4 var(--head);letter-spacing:.02em;color:rgba(255,255,255,.88)}

/* ---------- contact ---------- */
.contact{padding-block:clamp(56px,8vw,104px)}
.contact .grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,6vw,80px);align-items:end}
.contact h2{font-size:clamp(32px,5vw,56px);line-height:1.06;letter-spacing:-.01em;margin:18px 0 0}
.contact .phone{display:block;font:700 clamp(36px,6vw,64px)/1.05 var(--head);letter-spacing:-.01em;color:var(--blue);text-decoration:none;margin-top:28px}
@media(prefers-color-scheme:dark){.contact .phone{color:#fff}}
.contact .phone:hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:4px;text-underline-offset:6px}
.contact dl{margin:0;border-top:1px solid var(--rule)}
.contact dl div{padding:16px 0;border-bottom:1px solid var(--rule)}
.contact dt{font:500 13px/1 var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.contact dd{margin:0;font-size:18px;line-height:1.45}
.contact dd a{text-decoration:none;border-bottom:2px solid var(--accent)}
.contact dd a:hover{background:var(--soft)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding-block:26px 34px;font-size:14px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 28px}
footer nav{display:flex;gap:22px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--text);text-decoration:underline}

/* ---------- legal pages ---------- */
.legal{padding-block:clamp(40px,7vw,88px)}
.legal .wrap{max-width:780px}
.legal h1{font-size:clamp(38px,6vw,56px);line-height:1.05;letter-spacing:-.01em;margin:0 0 10px}
.legal .muted{color:var(--muted);margin:0 0 12px}
.legal h2{font-size:26px;line-height:1.15;margin:44px 0 12px;padding-top:22px;border-top:1px solid var(--rule)}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 14px;padding-left:22px}
.legal li{margin-bottom:8px}
.legal a{text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.back{display:inline-block;margin-bottom:28px;font:500 15px/1 var(--head);letter-spacing:.04em;text-decoration:none;color:var(--muted)}
.back:hover{color:var(--text)}

/* ---------- small screens ---------- */
@media(max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .hero .mark{display:none}
  .svc{grid-template-columns:1fr}
  .approach .cols{grid-template-columns:1fr}
  .contact .grid{grid-template-columns:1fr;align-items:start}
}
@media(max-width:560px){
  .top .wrap{height:64px}
  .logo img{height:25px}
  .nav a.call{padding:10px 16px;font-size:14px}
  .nav a.call .num{display:none}
  .nav a.call .word{display:inline}
  .svc ul{grid-template-columns:1fr}
  .lines ul{grid-template-columns:1fr 1fr}
  .lines li:nth-child(3){border-left:0}
  .lines li:nth-child(n+3){border-top:1px solid var(--rule)}
  .hero .actions .btn{flex:1 1 100%;justify-content:center}
}

/* ---------- menu (small screens) ---------- */
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;font:500 15px/1 var(--head);letter-spacing:.04em;padding:10px 4px 10px 12px;display:flex;align-items:center;gap:8px}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.menu[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.menu .panel{position:fixed;left:0;right:0;top:60px;background:var(--bg);border-bottom:1px solid var(--rule);padding:8px clamp(20px,5vw,40px) 20px;box-shadow:0 18px 30px rgba(0,0,0,.12)}
.menu .panel a{display:block;padding:15px 0;border-bottom:1px solid var(--rule);font:600 20px/1 var(--head);text-decoration:none}
.menu .panel a:last-child{border-bottom:0}
@media(max-width:1000px){
  .nav a:not(.call){display:none}
  .menu{display:block}
  .top .wrap{gap:12px}
  .nav{margin-left:auto}
}

/* ---------- inner pages ---------- */
.eyebrow+h1{margin-top:16px}
.page .wrap{max-width:860px}
.page .lead{font-size:20px;line-height:1.5;color:var(--muted);margin:0 0 8px}
.page .sec h2,.page section h2{margin-top:40px}
.page section:first-of-type h2{border-top:0;margin-top:28px;padding-top:0}
.page :is(.wrap,section,.block)>ul{list-style:none;padding:0;border-top:1px solid var(--rule)}
.page :is(.wrap,section,.block)>ul>li{padding:16px 0;margin:0;border-bottom:1px solid var(--rule)}
.page :is(.wrap,section,.block)>ul>li>b{display:block;font:600 20px/1.2 var(--head);color:var(--blue);margin-bottom:4px}
@media(prefers-color-scheme:dark){.page :is(.wrap,section,.block)>ul>li>b{color:#fff}}
.cta{margin-top:64px;padding:clamp(24px,4vw,40px);background:var(--band);color:#fff;border-radius:6px}
.cta .eyebrow{color:rgba(255,255,255,.72)}
.cta .big{font:600 clamp(22px,3vw,30px)/1.3 var(--head);margin:14px 0 20px;color:#fff}
.cta a{color:#fff;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.cta .others{margin:0;padding-top:18px;border-top:1px solid rgba(255,255,255,.28);display:flex;flex-wrap:wrap;gap:8px 22px;font:500 15px/1.4 var(--head)}
.cta .others span{color:rgba(255,255,255,.72);letter-spacing:.14em;text-transform:uppercase;font-size:13px}
.more{display:inline-block;margin-top:14px;font:600 15px/1 var(--head);letter-spacing:.03em;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:3px}
.more:hover{background:var(--soft)}
.approach .any a{color:#fff;margin-left:14px;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px;white-space:nowrap}
.cta a[href^="tel"]{white-space:nowrap}

/* ---------- dot-grid hero + service cards ---------- */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,var(--rule) 1.3px,transparent 1.5px);background-size:26px 26px;-webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 85%);mask-image:linear-gradient(to bottom,#000 0%,transparent 85%);pointer-events:none}
.hero .wrap{position:relative}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.card{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:16px;padding:clamp(24px,3vw,36px);background:var(--bg);transition:border-color .15s,transform .15s,box-shadow .15s}
.card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,56,101,.10)}
@media(prefers-color-scheme:dark){.card:hover{border-color:#fff;box-shadow:none}}
.card .n{font:500 14px/1 var(--head);letter-spacing:.16em;color:var(--muted);margin:0 0 18px}
.card h3{font-size:clamp(30px,3.2vw,40px);line-height:1.05}
.card .lede{margin:10px 0 20px;font-size:18px;line-height:1.5;color:var(--muted)}
.card ul{list-style:none;margin:0 0 24px;padding:0}
.card li{padding:10px 0 10px 22px;border-top:1px solid var(--rule);position:relative;font-size:16px;line-height:1.45}
.card li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:8px;background:var(--blue)}
@media(prefers-color-scheme:dark){.card li::before{background:#fff}}
.card li.key{font-weight:600}
.card li.key::before{background:var(--accent)}
.card .more{margin-top:auto;align-self:flex-start}
@media(max-width:640px){.cards{grid-template-columns:1fr}}

/* ---------- interactive examples ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.demo{border:1px solid var(--rule);border-radius:16px;background:var(--bg);overflow:hidden;min-height:120px}
.demo-bar{display:flex;justify-content:space-between;align-items:center;padding:13px 20px;border-bottom:1px solid var(--rule);background:var(--soft);font:600 16px/1 var(--head);color:var(--text)}
.demo-bar .tag{font:500 12px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);border-radius:99px;padding:6px 10px}
.demo-body{padding:clamp(16px,3vw,28px)}
.demo-cap{margin:0;padding:0 clamp(16px,3vw,28px) 22px;color:var(--muted);font-size:15px}
.demo h4{font:500 13px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.d-btn{font:600 15px/1 var(--head);letter-spacing:.02em;min-height:44px;padding:0 20px;border-radius:99px;border:2px solid var(--btn-bg);background:var(--btn-bg);color:var(--btn-fg);cursor:pointer}
.d-btn:hover{opacity:.88}.d-btn.sm{min-height:34px;padding:0 14px;font-size:14px}
.d-link{font:500 14px/1 var(--head);background:none;border:0;color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer;padding:6px 0}
.d-status{margin:14px 0 0;font-size:16px;line-height:1.5;min-height:3em}
.d-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}.d-row .d-status{margin:0;flex:1 1 280px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.tabs button{font:600 15px/1 var(--head);letter-spacing:.02em;min-height:44px;padding:0 20px;border-radius:99px;border:1px solid var(--rule);background:transparent;color:var(--text);cursor:pointer}
.tabs button:hover{border-color:var(--text)}
.tabs button[aria-selected="true"]{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}
/* cameras */
.d-search{display:flex;gap:10px;margin:0 0 12px}
.d-search input{flex:1;min-width:0;min-height:44px;border-radius:99px;border:1px solid var(--rule);background:var(--soft);color:var(--text);font:400 16px var(--body);padding:0 18px}
.d-search input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.d-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.d-chip{font:500 14px/1 var(--head);padding:9px 14px;border-radius:99px;border:1px solid var(--rule);background:transparent;color:var(--text);cursor:pointer}
.d-chip:hover{border-color:var(--text)}.d-chip.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.d-cams{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.d-cam{position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#262d36;outline:3px solid transparent;transition:outline-color .15s}
.d-cam svg{position:absolute;inset:0;width:100%;height:100%}
.d-cam.hit{outline-color:var(--accent)}
.d-cam-name{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:6px;font:500 12px/1 var(--head);color:#fff;background:rgba(0,0,0,.55);padding:5px 8px;border-radius:99px}
.d-live{width:6px;height:6px;border-radius:50%;background:#FF5A52;display:inline-block}
.d-box{position:absolute;transform:translate(-50%,-50%);border:2px dashed var(--accent);padding:12px 12px 10px;font:500 11px/1 var(--head);color:#fff;white-space:nowrap;border-radius:4px;background:rgba(30,138,255,.18)}
.d-results{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--rule)}
.d-results li{display:grid;grid-template-columns:90px 1fr auto;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:15px}
.d-results li b{font-family:var(--head);font-weight:600}.d-results li em{font-style:normal;color:var(--muted)}
.d-results li.none{display:block;color:var(--muted)}
/* access */
.d-table{width:100%;border-collapse:collapse;font-size:15px}
.d-table th,.d-table td{padding:12px 8px;border-bottom:1px solid var(--rule);text-align:center;vertical-align:middle}
.d-table thead th{font:500 12px/1.2 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.d-table th[scope=row]{text-align:left;font:600 16px/1.2 var(--head)}.d-table th[scope=row] small{display:block;font:400 13px var(--body);color:var(--muted);margin-top:3px}
.d-table tr.off th[scope=row]{opacity:.5}
.d-table select{font:400 14px var(--body);color:var(--text);background:var(--soft);border:1px solid var(--rule);border-radius:8px;padding:8px;max-width:150px}
.d-sw{width:44px;height:26px;border-radius:99px;border:0;background:var(--rule);position:relative;cursor:pointer;transition:background .15s}
.d-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.d-sw[aria-checked="true"]{background:var(--ok)}.d-sw[aria-checked="true"]::after{transform:translateX(18px)}
.d-sw:disabled{opacity:.4;cursor:default}
.d-access{position:relative;overflow-x:auto}
/* failover */
.d-net{width:100%;height:auto;display:block;margin-bottom:10px}
.n-box{fill:var(--soft);stroke:var(--rule);stroke-width:1.5}
.n-h{fill:var(--text);font:600 17px var(--head)}.n-t{fill:var(--muted);font:400 14px var(--body)}
.n-line{fill:none;stroke-width:4;stroke-linecap:round}
.n-line.on{stroke:var(--ok);stroke-dasharray:10 8;animation:flow 1s linear infinite}
.n-line.off{stroke:var(--bad);stroke-dasharray:2 10}
.n-line.idle{stroke:var(--muted);stroke-dasharray:2 10;opacity:.7}
@keyframes flow{to{stroke-dashoffset:-18}}
@media(prefers-reduced-motion:reduce){.n-line.on{animation:none}.d-ring{animation:none!important}.d-dev.ringing{animation:none!important}}
/* phone */
.d-call{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--rule);border-radius:12px;background:var(--soft);margin-bottom:14px}
.d-call b{display:block;font:600 16px var(--head)}.d-call span:last-child{color:var(--muted);font-size:15px}
.d-ring{width:14px;height:14px;border-radius:50%;background:var(--ok);animation:pulse 1.2s ease-out infinite;flex:none}
.d-call.done .d-ring{animation:none;opacity:.4}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(76,195,138,.55)}100%{box-shadow:0 0 0 14px rgba(76,195,138,0)}}
.d-devs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.d-dev{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border-radius:12px;border:1px solid var(--rule);background:var(--bg);color:var(--text);cursor:pointer;text-align:left;font:inherit}
.d-dev:hover{border-color:var(--text)}
.d-dev .ti-d{display:block;line-height:0;color:var(--text)}.d-dev b{font:600 16px var(--head)}.d-dev span{font-size:14px;color:var(--muted)}
.d-dev.ringing{animation:shake 1.4s ease-in-out infinite;border-color:var(--ok)}
.d-dev.live{border-color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok)}.d-dev.live span{color:var(--ok)}
.d-dev.quiet{opacity:.55}
@keyframes shake{0%,70%,100%{transform:none}75%{transform:rotate(-1.2deg)}85%{transform:rotate(1.2deg)}}
.d-text{margin-top:6px;display:flex;flex-direction:column;gap:8px}
.d-bubble{max-width:75%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.4}
.d-bubble.in{background:var(--soft);border:1px solid var(--rule);align-self:flex-start}
.d-bubble.out{background:var(--btn-bg);color:var(--btn-fg);align-self:flex-end}
/* backups */
.d-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.d-files{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.d-files li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px;min-height:56px}
.d-files li em{font-style:normal;color:var(--muted);font-size:14px}
.d-files li.miss span{text-decoration:line-through;color:var(--muted)}
/* cabling */
.d-panel{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
.d-port{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 0 6px;border-radius:6px;border:1px solid var(--rule);background:var(--soft);color:var(--muted);font:500 12px var(--head);cursor:pointer}
.d-port i{width:60%;height:12px;border-radius:2px;background:var(--text);opacity:.8}
.d-port:hover{border-color:var(--text)}.d-port.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--text)}
.d-tag{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:baseline;margin-top:16px;padding:14px 16px;border:1px dashed var(--muted);border-radius:8px;font-size:15px}
.d-tag b{font:600 17px var(--head)}.d-tag em{font-style:normal;color:var(--ok);font-weight:500;margin-left:auto}
/* sections that host demos */
.show{padding-block:clamp(48px,7vw,88px);background:var(--soft);border-block:1px solid var(--rule)}
.show h2{font-size:clamp(30px,4.4vw,48px);line-height:1.06;letter-spacing:-.01em;margin:14px 0 12px}
.show .sub{margin:0 0 28px;color:var(--muted);font-size:18px;max-width:34em}
.page .demo{margin:28px 0 8px}
.page .demo+.demo{margin-top:20px}
@media(max-width:700px){
  .d-cams{grid-template-columns:1fr 1fr}.d-devs{grid-template-columns:1fr}.d-two{grid-template-columns:1fr}
  .d-panel{grid-template-columns:repeat(6,1fr)}.d-results li{grid-template-columns:1fr;gap:2px}
  .d-search{flex-direction:column}
}
.page .lead.sub{font:500 22px/1.3 var(--head);color:var(--text);margin:0 0 8px}
.page .note{color:var(--muted);margin:22px 0 0}

@media(max-width:700px){
  .d-table,.d-table thead,.d-table tbody{display:block}
  .d-table tr{display:grid;grid-template-columns:1.5fr repeat(4,1fr);align-items:center}
  .d-table thead th{font-size:10px;padding:8px 2px}
  .d-table thead th:nth-last-child(-n+2){display:none}
  .d-table th[scope=row],.d-table td{padding:10px 2px;border-bottom:0}
  .d-table td:nth-last-child(2){grid-column:1/4;text-align:left;padding-bottom:14px;border-bottom:1px solid var(--rule)}
  .d-table td:last-child{grid-column:4/6;text-align:right;padding-bottom:14px;border-bottom:1px solid var(--rule)}
  .d-sw{width:40px}.d-sw[aria-checked="true"]::after{transform:translateX(14px)}
}

/* ---------- motion ---------- */
@view-transition{navigation:auto}
.top{view-transition-name:site-top;transition:box-shadow .2s}
.top.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.08)}
@media(prefers-color-scheme:dark){.top.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.45)}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.hero h1 .w>span{display:inline-block;animation:wordup .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes wordup{from{transform:translateY(108%)}to{transform:none}}
.intro{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;translate:0 20px}to{opacity:1;translate:none}}
.rv{opacity:0;translate:0 26px;transition:opacity .8s ease,translate .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;translate:none}
.card.rv{transition:opacity .8s ease,translate .8s cubic-bezier(.2,.7,.2,1),border-color .15s,transform .15s,box-shadow .15s}
.approach .cols>div h3{border-top:0;position:relative}
.approach .cols>div h3::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.4);transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.7,.2,1) .25s}
.approach .cols>div.in h3::before,.approach .cols>div:not(.rv) h3::before{transform:scaleX(1)}
.demo-body{animation:fadeup .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes fadeup{from{opacity:0;translate:0 10px}to{opacity:1;translate:none}}
.d-cam.hit .d-box{animation:pop .45s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes pop{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
.d-cam.hit::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);opacity:.9;animation:scan 1.1s ease-out 1 both}
@keyframes scan{from{top:0;opacity:.9}to{top:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;translate:none;transition:none}.intro,.hero h1 .w>span,.hero .mark img,  .approach .cols>div h3::before{transform:none;transition:none}
  @view-transition{navigation:none}
}

.gridfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero{touch-action:pan-y}
.orbit{width:100%;height:auto;display:block;overflow:visible}
.hero .mark{position:relative}
.orbit.dyn{position:absolute;inset:0}
.orbitfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mark{--ink:#003865;--sat:#7C2529}
.orbit .oi{stroke:var(--ink)}
.orbit .oi-sat{fill:var(--sat)}
.orbit .oi-front{stroke:var(--bg);stroke-width:5px;paint-order:stroke}
@media(prefers-color-scheme:dark){.mark{--ink:#fff;--sat:#fff}}

.d-sim{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:18px 0 0;padding:14px 16px;border:1px dashed var(--muted);border-radius:12px}
.d-sim-h{font:500 12px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.d-sim select{font:400 14px var(--body);color:var(--text);background:var(--soft);border:1px solid var(--rule);border-radius:8px;padding:8px}
.d-log{list-style:none;margin:12px 0 0;padding:0}
.d-log li{display:grid;grid-template-columns:80px 1fr auto;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px;animation:fadeup .35s both}
.d-log li b{font-family:var(--head);font-weight:600}.d-log li em{font-style:normal;font-weight:500}
.d-log li.ok em{color:var(--ok)}.d-log li.no em{color:var(--bad)}
@media(max-width:700px){.d-log li{grid-template-columns:1fr;gap:2px}}
.platforms{margin:28px 0 0;padding:18px 20px;border:1px solid var(--rule);border-radius:12px;background:var(--soft)}
.platforms h2{margin:0 0 8px!important;padding:0!important;border:0!important;font-size:20px!important}
.platforms p{margin:0;color:var(--muted);font-size:16px}
.d-log li{grid-template-columns:96px 1fr auto}.d-log li b{white-space:nowrap}
.d-link{white-space:nowrap}
@media(max-width:700px){.d-log li{grid-template-columns:1fr}}

/* business email example */
.d-seg{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.d-seg button{font:600 14px/1.2 var(--head);padding:11px 16px;border-radius:99px;border:1px solid var(--rule);background:transparent;color:var(--text);cursor:pointer}
.d-seg button:hover{border-color:var(--text)}
.d-seg button[aria-pressed="true"]{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}
.d-from{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:12px 16px;border:1px solid var(--rule);border-radius:10px;background:var(--soft);margin-bottom:14px}
.d-from span{font:500 12px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.d-from b{font:600 17px var(--head);word-break:break-all}
.d-checks{list-style:none;margin:0 0 16px;padding:0;border-top:1px solid var(--rule)}
.d-checks li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px}
.d-checks em{font-style:normal;font:500 13px/1 var(--head);padding:6px 10px;border-radius:99px;border:1px solid var(--rule);white-space:nowrap}
.d-checks em.yes{color:var(--ok);border-color:var(--ok)}.d-checks em.no{color:var(--bad);border-color:var(--bad)}.d-checks em.na{color:var(--muted)}
.d-boxes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.d-folder{border:1px solid var(--rule);border-radius:12px;padding:14px;min-height:112px}
.d-folder h4{margin:0 0 10px}
.d-empty{margin:18px 0 0;color:var(--muted);font-size:14px}
.d-msg{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:start;animation:fadeup .35s both}
.d-msg i{width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;font:600 16px/36px var(--head);text-align:center;font-style:normal}
@media(prefers-color-scheme:dark){.d-msg i{background:#fff;color:var(--blue)}}
.d-msg b{display:block;font:600 15px/1.3 var(--head)}.d-msg b small{display:block;font:400 13px var(--body);color:var(--muted);word-break:break-all}
.d-msg span{display:block;font-size:14px;margin-top:2px}
.d-msg em{grid-column:2;justify-self:start;font-style:normal;font:500 12px/1 var(--head);padding:6px 10px;border-radius:99px;border:1px solid var(--rule);margin-top:6px}
.d-msg.ok em{color:var(--ok);border-color:var(--ok)}.d-msg.no em{color:var(--bad);border-color:var(--bad)}.d-msg.neutral em{color:var(--muted)}
@media(max-width:700px){.d-boxes{grid-template-columns:1fr}}
.feature .lead2{font-size:18px;line-height:1.6;margin:0 0 14px}
.page .demo+ul{margin-top:26px}
.d-boxes+.d-status{margin-top:18px}

/* computer checkup */
.d-sit{margin:0 0 16px}
.d-verdicts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 16px}
.d-verdicts div{padding:16px;border:1px solid var(--rule);border-radius:12px;text-align:center;font:600 17px var(--head);color:var(--muted);transition:background .2s,color .2s,border-color .2s}
.d-verdicts div.on{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}
.d-why p{margin:0}.d-why-t{font-size:18px;line-height:1.5}.d-why-n{margin-top:10px!important;color:var(--muted);font-size:15px}
@media(max-width:700px){.d-verdicts{grid-template-columns:1fr}}
/* open invite + notes */
.invite{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:20px;padding:clamp(20px,3vw,32px);border:1px dashed var(--muted);border-radius:16px}
.invite h3{font-size:clamp(22px,2.6vw,28px);margin:0 0 6px}
.invite p{margin:0;color:var(--muted);max-width:40em;font-size:17px}
.cta .open{margin:0 0 20px;color:rgba(255,255,255,.88);font-size:16px}
.page .feature+section,.page section+section{margin-top:12px}

.show .wrap>h2:first-child{margin-top:0}
.approach .any a{display:inline-block;margin:14px 0 0}

/* =====================================================================
   Examples v2: illustrated product screens
   ===================================================================== */
.demo{--x-dev:#14324f;--x-dev2:#1d4467}
@media(prefers-color-scheme:dark){.demo{--x-dev:#2a5882;--x-dev2:#356a9a}}
.ic{display:inline-block;vertical-align:middle;flex:none}
.x-seg{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.x-seg button{font:600 14px/1.2 var(--head);padding:11px 16px;border-radius:99px;border:1px solid var(--rule);background:transparent;color:var(--text);cursor:pointer}
.x-seg button:hover{border-color:var(--text)}
.x-seg button[aria-pressed="true"]{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}

/* backup internet */
.x-net{width:100%;height:auto;display:block;margin:4px 0 12px}
.x-box{fill:var(--soft);stroke:var(--rule);stroke-width:1.5}.x-roof{fill:var(--x-dev)}
.x-win rect{fill:var(--rule)}.x-door{fill:var(--x-dev)}
.x-lbl{fill:var(--text);font:600 15px var(--head)}.x-lbl.w{fill:#fff}
.x-dev{fill:var(--x-dev)}.x-ant{stroke:var(--muted);stroke-width:3;stroke-linecap:round;fill:none}.x-antd{fill:var(--muted)}
.x-leds circle{fill:#4cc38a}.x-leds .cell-led{fill:#6b7a8c}
.s-normal .x-leds circle:nth-child(-n+3){animation:blink 1.8s ease-in-out infinite}.s-normal .x-leds circle:nth-child(2){animation-delay:.4s}.s-normal .x-leds circle:nth-child(3){animation-delay:.8s}
.s-out .x-leds circle:nth-child(3),.s-out-nobk .x-leds circle:nth-child(3){fill:var(--bad)}
.s-out .x-leds .cell-led{fill:#4cc38a;animation:blink 1s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.x-wire{fill:none;stroke-width:4;stroke-linecap:round}
.x-wire.on{stroke:var(--ok)}.x-wire.off{stroke:var(--bad);stroke-dasharray:2 10}.x-wire.idle{stroke:var(--muted);stroke-dasharray:3 9;opacity:.8}.x-wire.absent{stroke:var(--rule);stroke-dasharray:3 9}
.x-pkt{display:none;fill:var(--ok)}.s-normal .x-pkt.main,.s-out .x-pkt.cell,.x-net .x-pkt.loc{display:inline}
.x-mainnode circle{fill:var(--bg);stroke:var(--rule);stroke-width:1.5}.x-nodeic{stroke:var(--ok);stroke-width:2.4;fill:none;stroke-linecap:round;transform-origin:463px 132px}
.s-out .x-nodeic,.s-out-nobk .x-nodeic{stroke:var(--bad);transform:rotate(45deg)}
.x-tower,.x-sig{stroke:var(--muted);stroke-width:2.4;fill:none;stroke-linecap:round}.s-out .x-tower,.s-out .x-sig{stroke:var(--ok)}.nobk .x-cell-g{opacity:.25}
.x-cloud{fill:var(--soft);stroke:var(--rule);stroke-width:1.5}
.x-online{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 14px;padding:0}
.x-online li{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--rule);border-radius:12px;background:var(--bg)}
.x-online span{font:600 15px var(--head);flex:1}.x-online em{font:500 12px var(--head);font-style:normal;padding:5px 9px;border-radius:99px;border:1px solid}
.x-online li.ok em{color:var(--ok);border-color:var(--ok)}.x-online li.no{background:rgba(194,54,47,.06);border-color:var(--bad)}.x-online li.no em{color:var(--bad);border-color:var(--bad)}.x-online li.no .ic{color:var(--bad)}

/* cabling */
.x-rack{width:100%;height:auto;display:block}
.x-plate{fill:#2a313c;stroke:#3b4452;stroke-width:1.5}.x-screw{fill:#5b6675}.x-screwl{stroke:#2a313c;stroke-width:1.6}
.x-hit{fill:transparent}.x-port{cursor:pointer;outline:none}.x-port:hover .x-hit{fill:rgba(255,255,255,.07)}
.x-port.on .x-hit{fill:rgba(30,138,255,.18);stroke:var(--accent);stroke-width:1.6}.x-port:focus-visible .x-hit{stroke:var(--accent);stroke-width:2}
.x-num{fill:#c3cddb;font:500 11px var(--head)}.x-jack{fill:#10151c;stroke:#566273}.x-notch{fill:#10151c;stroke:#566273}.x-pins{stroke:#d4b45a;stroke-width:1.6}
.x-led{fill:#4cc38a}.x-led.b{fill:#e5a64a}.x-port.on .x-led{animation:blink 1.2s infinite}
.x-cable{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round}
.x-wall{fill:var(--soft);stroke:var(--rule);stroke-width:1.5}.x-wjack{fill:var(--bg);stroke:var(--muted);stroke-width:1.5}
.x-wl{fill:var(--text);font:600 16px var(--head)}.x-ws{fill:var(--muted);font:400 13px var(--body)}
.x-tag{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;margin-top:10px;padding:14px 16px;border:1px dashed var(--muted);border-radius:10px;font-size:15px}
.x-tag b{font:600 17px var(--head)}.x-tag em{font-style:normal;color:var(--ok);font-weight:500;margin-left:auto;display:inline-flex;align-items:center;gap:6px}

/* computer checkup */
.x-sit{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.x-checkup{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center;margin-bottom:14px;padding:14px;border:1px solid var(--rule);border-radius:14px;background:var(--soft)}
.x-machine svg{display:block;max-height:150px}
.m-b{fill:var(--x-dev)}.m-s{fill:#0b1220}.m-s.on{fill:#2a6fb0}.m-d{fill:var(--x-dev2)}.gt{fill:var(--muted);font:500 11px var(--head)}
.m-new .m-b{fill:transparent;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:4 3}.m-new.on .m-b{fill:var(--x-dev);stroke:none}.m-new.on{animation:fadeup .5s both}
.x-gaugebox{display:flex;flex-direction:column;align-items:center;gap:8px}.x-gauge{width:100%;max-width:300px}
.x-gauge path{fill:none;stroke-width:14}.x-gauge .g1{stroke:var(--bad)}.x-gauge .g2{stroke:#e5a64a}.x-gauge .g3{stroke:var(--ok)}
.x-needle{transform-origin:110px 110px;transition:transform 1.1s cubic-bezier(.3,1.35,.4,1)}.x-gauge .x-needle path{stroke:var(--text);stroke-width:4;stroke-linecap:round}.x-needle circle{fill:var(--text)}
.x-verdicts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 14px}
.x-verdicts div{padding:14px;border:1px solid var(--rule);border-radius:12px;text-align:center;font:600 16px var(--head);color:var(--muted);transition:background .2s,color .2s}
.x-verdicts div.on{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}

/* business email */
.x-mail{display:grid;grid-template-columns:190px 1fr;border:1px solid var(--rule);border-radius:12px;overflow:hidden;margin:0 0 12px;background:var(--bg)}
.x-folders{background:var(--soft);border-right:1px solid var(--rule);padding:12px 10px}
.x-fh{font:500 11px var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:2px 8px 10px}
.x-folder{display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;color:var(--muted);font:500 15px var(--head)}.x-folder span{flex:1}
.x-folder b{font:600 12px var(--head);min-width:22px;text-align:center;border-radius:99px;padding:3px 6px;background:var(--rule);color:var(--muted)}
.x-folder.on{background:var(--bg);color:var(--text);box-shadow:inset 0 0 0 1px var(--rule)}.x-folder.on b{background:var(--btn-bg);color:var(--btn-fg)}
.x-msgview{padding:16px 18px;min-height:170px}.x-msgview.pop{animation:fadeup .35s both}
.x-banner{background:rgba(194,54,47,.09);border:1px solid var(--bad);color:var(--bad);border-radius:8px;padding:8px 12px;font-size:14px;margin-bottom:12px}
.x-mh{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.x-av{width:38px;height:38px;border-radius:50%;background:var(--x-dev);color:#fff;font:600 17px/38px var(--head);text-align:center;font-style:normal;flex:none}
.x-who{flex:1;min-width:0}.x-who b{display:block;font:600 16px var(--head)}.x-who span{font-size:13px;color:var(--muted);word-break:break-all}
.x-seal{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px;border:1px solid var(--rule);font:500 12px var(--head);white-space:nowrap}
.x-seal.ok{color:var(--ok);border-color:var(--ok)}.x-seal.no{color:var(--bad);border-color:var(--bad)}.x-seal.neutral{color:var(--muted)}
.x-subj{font:600 18px var(--head);margin-bottom:10px}.x-lines i{display:block;height:8px;border-radius:4px;background:var(--rule);margin:9px 0}.x-lines i.s{width:55%}
.x-checks{list-style:none;margin:0 0 4px;padding:0;border-top:1px solid var(--rule)}
.x-checks li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px}.x-checks li span{flex:1;color:var(--text)}
.x-checks li em{font:500 13px var(--head);font-style:normal;padding:5px 10px;border-radius:99px;border:1px solid var(--rule);white-space:nowrap}
.x-checks li.yes .ic,.x-checks li.yes em{color:var(--ok);border-color:var(--ok)}.x-checks li.no .ic,.x-checks li.no em{color:var(--bad);border-color:var(--bad)}.x-checks li.na .ic,.x-checks li.na em{color:var(--muted)}

/* files and backups */
.x-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.x-pane{border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--bg)}
.x-ph{display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--soft);border-bottom:1px solid var(--rule);font:600 14px var(--head)}
.x-files{list-style:none;margin:0;padding:0}.x-files li{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--rule);min-height:64px}.x-files li:last-child{border-bottom:0}
.x-files li>span{flex:1;font-size:15px;min-width:0;word-break:break-word}.x-files small{display:block;color:var(--muted);font-size:12px}
.x-ft{font:700 10px/1 var(--head);font-style:normal;padding:9px 7px;border-radius:6px;color:#fff;letter-spacing:.04em;flex:none}.x-ft.x{background:#1d7a46}.x-ft.p{background:#c2362f}
.x-ib{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:8px;border-radius:8px}.x-ib:hover{background:var(--soft);color:var(--bad)}
.x-files li.miss span{text-decoration:line-through;color:var(--muted)}.x-files li em{font-style:normal;font-size:13px;color:var(--muted)}.x-files em.ok{color:var(--ok);display:inline-flex;align-items:center;gap:4px}
.x-prog{width:76px;height:6px;border-radius:3px;background:var(--rule);overflow:hidden}.x-prog i{display:block;height:100%;width:0;background:var(--accent);animation:prog 1.1s linear forwards}@keyframes prog{to{width:100%}}
.d-btn .ic{margin-right:4px}

/* business phone */
.x-call{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--rule);border-radius:12px;background:var(--soft);margin-bottom:14px}
.x-call b{display:block;font:600 16px var(--head)}.x-call div span{color:var(--muted);font-size:15px}.x-time{margin-left:auto;font:500 14px var(--head);font-style:normal;color:var(--ok)}
.x-ring{width:14px;height:14px;border-radius:50%;background:var(--ok);animation:pulse 1.2s ease-out infinite;flex:none}.x-call.done .x-ring{animation:none;opacity:.5}
.x-devs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.x-dev{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 12px 16px;border-radius:14px;border:1px solid var(--rule);background:var(--bg);color:var(--text);cursor:pointer;font:inherit;transition:opacity .2s,border-color .2s}
.x-dev svg{width:100%;max-width:170px;height:auto;overflow:visible}.x-dev b{font:600 16px var(--head)}.x-dev span{font-size:14px;color:var(--muted)}
.x-dev:hover{border-color:var(--text)}.x-dev.ringing{animation:shake 1.4s ease-in-out infinite;border-color:var(--ok)}
.x-dev.live{border-color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok)}.x-dev.live span{color:var(--ok)}.x-dev.quiet{opacity:.5}
.p-b{fill:var(--x-dev)}.p-h{fill:var(--x-dev2)}.p-s{fill:#0b1220}.p-l{stroke:#5b7da0;stroke-width:2;stroke-linecap:round;fill:none}.p-k{fill:#9db4cc}.p-av{fill:var(--accent)}.p-ok{fill:#4cc38a}.p-no{fill:#e5645c}
.x-waves path{fill:none;stroke:var(--ok);stroke-width:2.6;stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:center}
.ringing .x-waves path{animation:wv 1.5s ease-out infinite}.ringing .x-waves path:nth-child(2){animation-delay:.3s}
@keyframes wv{0%{opacity:0;transform:scale(.7)}30%{opacity:.95}100%{opacity:0;transform:scale(1.2)}}

/* cameras */
.x-vms{background:#0e131a;border-radius:14px;padding:14px;color:#e6edf5}
.x-search{display:flex;gap:8px;margin-bottom:10px}.x-search input{flex:1;min-width:0;min-height:42px;border-radius:99px;border:1px solid #2a3544;background:#161d27;color:#e6edf5;padding:0 16px;font:400 15px var(--body)}
.x-search input::placeholder{color:#7e92aa}.x-search input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.x-search .d-btn{background:var(--accent);border-color:var(--accent);color:#fff}
.x-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.d-chip.dk{border-color:#2a3544;color:#c9d6e6;background:transparent}.d-chip.dk:hover{border-color:#6f86a3}.d-chip.dk.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:#fff}
.x-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.x-cam{position:relative;margin:0;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#232c38;outline:2px solid transparent;transition:outline-color .2s}
.x-cam svg{position:absolute;inset:0;width:100%;height:100%}.x-cam figcaption{position:absolute;left:6px;bottom:6px;display:flex;align-items:center;gap:6px;font:500 11px var(--head);color:#fff;background:rgba(0,0,0,.62);padding:4px 8px;border-radius:99px}
.x-stamp{position:absolute;right:6px;top:6px;font:600 10px var(--head);letter-spacing:.06em;color:#fff;background:rgba(0,0,0,.62);padding:3px 7px;border-radius:4px}
.x-badge{position:absolute;left:6px;top:6px;font:600 10px var(--head);background:var(--accent);color:#fff;padding:3px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.08em}
.x-cam.hit{outline-color:var(--accent)}.bb{fill:rgba(30,138,255,.14);stroke:#1E8AFF;stroke-width:1;stroke-dasharray:3 2}.bbl{fill:#1E8AFF}.bbt{fill:#fff;font:600 6px var(--head)}
.x-cam.hit .ob{animation:fadeup .4s both}.x-cam.pulse{animation:pulse2 .8s}@keyframes pulse2{0%{box-shadow:0 0 0 0 rgba(30,138,255,.7)}100%{box-shadow:0 0 0 14px rgba(30,138,255,0)}}
.x-time{margin:12px 14px 4px;font-style:normal;color:inherit}.x-track{position:relative;height:44px}
.x-ticks span{position:absolute;top:0;font:500 10px var(--head);color:#7e92aa;transform:translateX(-50%)}
.x-line{position:absolute;left:0;right:0;top:26px;height:4px;border-radius:2px;background:#243040}.x-line i{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:#4b5d73;transform:translate(-50%,-50%);transition:all .25s}
.x-line i.hit{width:14px;height:14px;background:var(--accent);box-shadow:0 0 0 4px rgba(30,138,255,.28)}
.x-results{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid #243040}
.x-results li{display:grid;grid-template-columns:90px 1fr auto;gap:12px;padding:10px 4px;border-bottom:1px solid #243040;font-size:14px;cursor:pointer}.x-results b{font:600 14px var(--head)}.x-results em{font-style:normal;color:#8ea3bb}
.x-results li.none{display:block;color:#8ea3bb;cursor:default}.x-results li:hover:not(.none){background:rgba(255,255,255,.05)}

/* door access */
.x-acc{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
.x-planbox{border:1px solid var(--rule);border-radius:14px;padding:12px;background:var(--soft)}.x-plan{width:100%;height:auto;display:block}
.x-bld{fill:var(--bg);stroke:var(--muted);stroke-width:3}.x-room{fill:var(--soft);stroke:var(--rule);stroke-width:2}.x-hall{fill:var(--bg)}
.x-rl{fill:var(--muted);font:600 10.5px var(--head);letter-spacing:.07em;text-transform:uppercase}
.x-door{cursor:pointer;outline:none}.x-dhit{fill:transparent}.x-door:hover .x-dhit{fill:rgba(30,138,255,.1)}.x-door:focus-visible .x-dhit{stroke:var(--accent);stroke-width:2}
.x-gap{stroke:var(--bg);stroke-width:7;stroke-linecap:butt;fill:none}
.x-leaf{stroke:var(--muted);stroke-width:3.5;stroke-linecap:round;fill:none;transition:transform .55s cubic-bezier(.3,1.2,.4,1)}.x-pin{fill:var(--muted)}
.x-door.ok .x-leaf{stroke:var(--ok)}.x-door.ok .x-pin{fill:var(--ok)}.x-door.deny .x-leaf{stroke:var(--bad)}.x-door.deny{animation:nope .5s}
@keyframes nope{20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}
.x-chip circle{fill:var(--bg);stroke:var(--muted);stroke-width:1.5}.x-chip path,.x-chip rect{fill:none;stroke:var(--muted);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.x-door.ok .x-chip circle{fill:var(--ok);stroke:var(--ok)}.x-door.ok .x-chip path{stroke:#fff;stroke-width:3.6}.x-door.deny .x-chip circle{stroke:var(--bad)}.x-door.deny .x-chip rect,.x-door.deny .x-chip path{stroke:var(--bad)}
.x-hint{margin:8px 2px 0;font-size:13px;color:var(--muted)}
.x-people{display:flex;flex-direction:column;gap:10px}
.x-p{display:grid;grid-template-columns:36px 1fr auto;gap:6px 12px;align-items:center;padding:12px;border:1px solid var(--rule);border-radius:12px;cursor:pointer;background:var(--bg)}
.x-p.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.x-p.off{opacity:.78}
.x-p .x-av{width:36px;height:36px;line-height:36px;font-size:16px;grid-row:1/3}.x-p b{font:600 16px var(--head);display:block}.x-p small{color:var(--muted);font-size:13px}
.x-p div{grid-column:2/4}.x-p select{grid-column:2;grid-row:2;font:400 13px var(--body);color:var(--text);background:var(--soft);border:1px solid var(--rule);border-radius:8px;padding:7px;max-width:100%}
.x-p .d-link{grid-column:3;grid-row:2;justify-self:end}

@media(max-width:700px){
  .x-checkup{grid-template-columns:1fr}.x-two{grid-template-columns:1fr}.x-devs{grid-template-columns:1fr}.x-verdicts{grid-template-columns:1fr}
  .x-mail{grid-template-columns:1fr}.x-folders{border-right:0;border-bottom:1px solid var(--rule);display:flex;gap:6px;flex-wrap:wrap;align-items:center}.x-fh{width:100%;padding-bottom:4px}.x-folder{flex:1}
  .x-grid{grid-template-columns:1fr 1fr}.x-results li{grid-template-columns:1fr;gap:2px}.x-acc{grid-template-columns:1fr}
  .x-online{grid-template-columns:1fr}.x-search{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.x-dev.ringing,.x-ring,.ringing .x-waves path,.s-normal .x-leds circle,.x-port.on .x-led,.x-door.deny,.x-prog i{animation:none!important}.x-needle,.x-leaf{transition:none}.x-prog i{width:100%}}

/* phone refinements */
@media(max-width:700px){
  .x-lbl{font-size:23px}.x-net{margin-top:0}
  .x-acc{grid-template-columns:minmax(0,1fr)}.x-people,.x-planbox{min-width:0}
  .x-dev svg{max-width:130px}.x-num{font-size:14px}.x-wl{font-size:17px}.x-ws{font-size:14px}
}
.x-p{min-width:0}.x-p select{min-width:0;width:100%}.x-p div{min-width:0}
.x-ticks span{white-space:nowrap}
.x-who span{word-break:normal;overflow-wrap:anywhere}.x-mh{flex-wrap:wrap}

@media(max-width:700px){
  .x-lbl{font-size:31px}.x-lbl.w,.x-lbl.c{font-size:25px}
  .x-who{flex:1 1 calc(100% - 52px)}
}

/* security review report */
.x-find{list-style:none;margin:0;padding:0;border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.x-find li{border-bottom:1px solid var(--rule)}.x-find li:last-child{border-bottom:0}
.x-find details{background:var(--bg)}.x-find details[open]{background:var(--soft)}
.x-find summary{display:flex;align-items:center;gap:12px;padding:16px 18px;cursor:pointer;list-style:none}.x-find summary::-webkit-details-marker{display:none}
.x-find summary .ic{color:#e5a64a}.x-find summary b{font:600 17px var(--head);flex:1}.x-find summary em{font:500 12px var(--head);font-style:normal;color:var(--muted);border:1px solid var(--rule);border-radius:99px;padding:5px 10px;white-space:nowrap}
.x-find summary::after{content:"";width:8px;height:8px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s;margin-left:4px}.x-find details[open] summary::after{transform:rotate(-135deg)}
.x-fb{padding:0 18px 18px 50px}.x-fb p{margin:0 0 10px;font-size:16px;line-height:1.55}
.x-rec{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:10px;background:var(--bg);border:1px solid var(--rule)}.x-rec .ic{color:var(--ok);margin-top:3px}.x-rec b{font:600 15px var(--head)}
.page .block{margin-top:12px}
@media(max-width:700px){.x-fb{padding-left:18px}.x-find summary em{display:none}}

/* every page shares the home page's width and left edge; reading text keeps a comfortable measure */
.legal .wrap,.page .wrap{max-width:var(--wrap)}
.legal .wrap>*{max-width:780px}
.page .wrap>*{max-width:none}
.page :is(.wrap,section,.block)>p,.page .lead{max-width:780px}
.page :is(.wrap,section,.block)>ul>li{padding-right:max(0px,calc(100% - 780px))}
.page.prose .wrap>*{max-width:780px}
.page.prose .wrap>.cta{max-width:none}
.legal .wrap>.back{max-width:none}

/* "Next step" is a full-width band, like the Approach section on the home page */
.cta.band{margin:0;border-radius:0;padding:clamp(48px,7vw,88px) 0}
.cta.band .big{font-size:clamp(26px,3.6vw,40px);line-height:1.2;max-width:900px;margin:18px 0 20px}
.cta.band .open{max-width:700px;font-size:18px;margin:0 0 26px}
.cta.band .others{max-width:none}

/* header + conversation-first calls to action */
.nav a.call .s{display:none}
.csub{margin:14px 0 0;max-width:30em;color:var(--muted);font-size:18px}
.cta.band .big{margin-bottom:22px}
.cta.band .btns{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 24px}
.cta.band .btn{background:#fff;border-color:#fff;color:var(--blue);text-decoration:none}
.cta.band .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.cta.band .btn:hover{opacity:.9}
@media(max-width:560px){.nav a.call .l{display:none}.nav a.call .s{display:inline}}

/* how it works */
.process{padding-block:clamp(56px,8vw,104px)}
.process h2,.why h2{font-size:clamp(30px,4.4vw,48px);line-height:1.06;letter-spacing:-.01em;margin:14px 0 0}
.steps{--g:clamp(20px,3vw,40px);list-style:none;counter-reset:st;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g);margin:clamp(32px,5vw,52px) 0 0;padding:0}
.steps li{position:relative;padding-top:62px;counter-increment:st}
.steps li::before{content:counter(st);position:absolute;top:0;left:0;width:42px;height:42px;border-radius:50%;background:var(--btn-bg);color:var(--btn-fg);font:600 19px/42px var(--head);text-align:center}
.steps li:not(:last-child)::after{content:"";position:absolute;top:20px;left:56px;width:calc(100% - 56px + var(--g) - 14px);height:2px;background:var(--rule)}
.steps h3{font-size:24px;margin:0 0 8px}.steps p{margin:0;color:var(--muted);font-size:17px;line-height:1.55}

/* why exchange packet */
.why{padding-block:clamp(56px,8vw,96px);background:var(--soft);border-block:1px solid var(--rule)}
.why-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(28px,4vw,44px)}
.why-cards>div{background:var(--bg);border:1px solid var(--rule);border-radius:16px;padding:clamp(22px,3vw,32px)}
.why-cards h3{font-size:24px;margin:0 0 10px}.why-cards p{margin:0;color:var(--muted);font-size:17px;line-height:1.55}
.why-link{margin:24px 0 0}.why-link a{font:600 16px var(--head);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:3px}.why-link a:hover{background:var(--bg)}
@media(max-width:860px){.why-cards{grid-template-columns:1fr}.steps{grid-template-columns:1fr;gap:28px}.steps li{padding:2px 0 0 62px}.steps li:not(:last-child)::after{top:48px;left:20px;width:2px;height:calc(100% + 28px - 52px)}}

/* continuous rules */
.approach .cols{--cg:clamp(24px,4vw,56px);gap:var(--cg)}
@media(min-width:861px){
  .approach .cols>div:not(:last-child) h3::before{right:calc(var(--cg) * -1)}
  .steps{position:relative}
  .steps::before{content:"";position:absolute;top:20px;left:21px;right:0;height:2px;background:var(--rule)}
  .steps li:not(:last-child)::after{display:none}
  .steps li::before{z-index:1}
}

/* list text runs the full width of its rules */
.page :is(.wrap,section,.block)>ul>li{padding-right:0}

.d-th{margin:0;font:600 13px/1.2 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* motion v2: directional reveals, headline words, scroll-drawn process, card highlight */
.rv-l{translate:-36px 0}.rv-r{translate:36px 0}.rv-s{translate:0 18px;scale:.95}
.rv-l,.rv-r,.rv-s{transition:opacity .8s ease,translate .9s cubic-bezier(.2,.7,.2,1),scale .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{scale:none}
@media(max-width:860px){.rv-l,.rv-r{translate:0 26px}}
.wr .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.wr .w>span{display:inline-block;transform:translateY(112%);transition:transform .85s cubic-bezier(.2,.7,.2,1)}
.wr.in .w>span{transform:none}
@media(min-width:861px){
  .steps.js-draw::after{content:"";position:absolute;top:20px;left:21px;width:calc((100% - 21px) * var(--p,0));height:2px;background:var(--accent)}
  .steps.js-draw li::before{background:var(--bg);color:var(--blue);box-shadow:inset 0 0 0 2px var(--rule);transition:background .35s,color .35s,box-shadow .35s,scale .35s}
  .steps.js-draw li.on::before{background:var(--btn-bg);color:var(--btn-fg);box-shadow:inset 0 0 0 2px var(--btn-bg);animation:stepPop .5s cubic-bezier(.2,.8,.3,1.4)}
}
@keyframes stepPop{0%{scale:.82}100%{scale:1}}
.tilt{position:relative;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:opacity .8s ease,translate .9s cubic-bezier(.2,.7,.2,1),scale .9s cubic-bezier(.2,.7,.2,1),border-color .15s,transform .18s ease-out,box-shadow .15s}
.tilt:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-2px)}
.tilt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(30,138,255,.10),transparent 70%)}
.tilt:hover::before{opacity:1}
.why-cards>div.tilt:hover{border-color:var(--blue)}
@media(prefers-color-scheme:dark){.why-cards>div.tilt:hover{border-color:#fff}}
@media(prefers-reduced-motion:reduce){.rv-l,.rv-r,.rv-s{translate:none;scale:none}.wr .w>span{transform:none;transition:none}.tilt,.tilt:hover{transform:none}}

/* About: text uses the full content width, with slightly larger type to keep lines comfortable */
.page.prose .wrap>*,.page.prose :is(.wrap,section,.block)>p,.page.prose .lead{max-width:none}
.page.prose section>p{font-size:19px;line-height:1.65}

/* About: a centered text column */
.page.prose .wrap>*{max-width:820px;margin-inline:auto}
.page.prose .wrap>*,.page.prose :is(.wrap,section,.block)>p,.page.prose .lead{max-width:none}
.page.prose .wrap>:is(.eyebrow,h1,.lead,section){max-width:820px;margin-inline:auto}
.page.prose .wrap>:is(.eyebrow,h1,.lead){width:100%}