@font-face { font-family:Manrope; src:url("/assets/manrope.woff2") format('woff2'); font-display:swap; font-weight:200 800; }
:root { color-scheme:dark; font-family:Manrope,Arial,sans-serif; background:#1a1a1d; color:#eceef3; --accent:#83b0fa; --muted:#9da4b2; }
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; display:flex; flex-direction:column; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button { cursor:pointer; }
a,button { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:2px solid #bdd6ff; outline-offset:5px; }
.site-header { display:flex; align-items:center; justify-content:space-between; height:84px; flex-shrink:0; padding:0 48px; width:100%; max-width:1536px; margin:0 auto; }
.brand { display:flex; align-items:center; gap:10px; font-size:26px; font-weight:650; letter-spacing:-1.4px; }
.brand img { flex:none; }
.site-header nav { display:flex; align-items:center; gap:30px; color:#b6bdca; font-size:13px; }
.site-header a:hover,.savings-link:hover { color:#fff; }
.nav-demo { border:1px solid #444954; padding:11px 16px; border-radius:6px; }
.nav-demo span { color:var(--accent); margin-left:16px; }
main { flex:1; display:grid; grid-template-columns:minmax(340px,.7fr) minmax(0,1.3fr); gap:50px; align-items:center; width:100%; max-width:1440px; padding:42px 48px 52px; margin:0 auto; }
.eyebrow { font-size:10px; letter-spacing:.13em; font-weight:650; color:#8babdb; margin:0 0 22px; }
h1 { font-weight:500; font-size:clamp(36px,3vw,48px); letter-spacing:-2px; line-height:1.14; margin:0 0 28px; }
h1 span { color:var(--accent); }
.definition { color:#d2d7e1; font-size:16px; line-height:1.8; margin:0 0 16px; max-width:490px; }
.benefit { font-size:14px; line-height:1.85; color:var(--muted); max-width:460px; margin:0; }
.benefit + .benefit { margin-top:12px; }
.benefit strong { color:#dce5f4; font-weight:550; }
.home-actions { display:flex; gap:12px; margin-top:30px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:26px; border:1px solid #4c5669; border-radius:6px; padding:14px 18px; font-size:13px; font-weight:600; }
.primary { background:var(--accent); color:#152037; border-color:var(--accent); }
.primary:hover { background:#a9cbff; }
.secondary { color:#d4e0f2; background:#21252d; }
.secondary:hover { border-color:var(--accent); }
.action-note { color:#858e9e; font-size:10px; line-height:1.6; margin:13px 0 0; }
.savings-link { border:0; border-bottom:1px solid #4c5d74; background:none; color:#b1c8e8; padding:0 0 5px; font-size:12px; margin-top:26px; }
.savings-link span { margin-left:12px; }
.example { min-width:0; }
.example-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:20px; }
.example-heading .eyebrow { font-size:9px; margin-bottom:8px; }
h2 { font-weight:450; font-size:22px; line-height:1.3; letter-spacing:-.8px; margin:0; }
.capture-label { white-space:nowrap; font-size:9px; color:#8791a2; margin-bottom:3px; }
.capture { position:relative; width:100%; aspect-ratio:16/9; border:1px solid #414751; border-radius:7px; overflow:hidden; background:#202127; box-shadow:0 18px 45px #0002; }
.capture img { display:block; width:100%; height:100%; object-fit:contain; }
#homeFlow { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
#homeFlow[hidden] { display:none; }
#homeFlow .flow-wire { fill:none; stroke:#90b9f3; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
#homeFlow .flow-node { fill:none; stroke:#9dc5ff; stroke-width:1; }
#homeFlow .flow-hub { fill:#80b0ff04; stroke:#b2d1ff; stroke-width:1.25; }
#homeFlow .flow-port { fill:#a6cbff; }
#homeFlow .flow-packet { fill:#e4f0ff; filter:drop-shadow(0 0 3px #8cb8ff); }
#homeFlow .flow-trail { fill:#afceff; }
.example-caption { min-height:92px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 0 16px; }
.example-caption strong { color:#dce5f4; font-size:15px; font-weight:500; }
.example-caption p { font-size:11px; line-height:1.65; color:#939eaf; margin:7px 0 0; }
#examplePlayback { display:flex; align-items:center; justify-content:center; gap:8px; background:none; color:#9fb8db; border:1px solid #3d4553; font-size:10px; border-radius:5px; padding:8px 10px; min-width:67px; }
.example-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.example-steps button { position:relative; display:flex; gap:9px; align-items:center; background:none; border:0; color:#939dac; padding:13px 0 0; text-align:left; font-size:12px; }
.example-steps button>span { color:#727f93; font-size:9px; }
.example-steps button>i { position:absolute; top:0; left:0; right:0; height:2px; background:#3a414d; overflow:hidden; }
.example-steps button>i::after { content:''; position:absolute; inset:0 auto 0 0; width:var(--fill,0%); background:var(--accent); }
.example-steps button[aria-selected=true] { color:#dfeaff; }
.example-steps button[aria-selected=true]>span { color:#9fc5fc; }
.site-footer { display:flex; align-items:center; gap:24px; padding:24px 48px; border-top:1px solid #ffffff0c; color:#818b9b; font-size:10px; width:100%; max-width:1536px; margin:0 auto; }
.site-footer p { margin:0; }
.site-footer ul { display:flex; flex-wrap:wrap; list-style:none; gap:22px; padding:0; margin:0; color:#b1b9c7; font-size:11px; }
.site-footer>span { margin-left:auto; white-space:nowrap; }
dialog { width:min(620px,calc(100vw - 30px)); max-height:calc(100dvh - 40px); overflow:auto; padding:30px; border:1px solid #53627b; border-radius:12px; background:#20232c; color:#e5ebf5; box-shadow:0 25px 100px #0008; }
dialog::backdrop { background:#101116bb; backdrop-filter:blur(6px); }
.savings-dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.savings-dialog-heading h2 { font-size:23px; line-height:1.3; font-weight:500; }
.savings-dialog-heading button { background:none; border:0; color:#c1cbdc; font-size:26px; padding:6px 10px; }
.savings-calculator { padding-top:25px; }
.calculator-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:28px; }
.calculator-header strong { font-weight:500; font-size:14px; }
.calculator-header>span { font-size:10px; color:#8e9aad; }
.savings-calculator label { display:flex; align-items:center; justify-content:space-between; color:#aeb8c8; font-size:13px; margin:20px 0 12px; gap:15px; }
.savings-calculator output { color:#b5d0fa; }
.savings-calculator input[type=range] { width:100%; accent-color:var(--accent); }
.rate-input { color:#b5d0fa; }
.rate-input input { width:70px; border:1px solid #4f5e75; background:#282e3a; padding:6px 8px; color:#c4ddff; border-radius:4px; }
.savings-results { display:grid; grid-template-columns:1fr 1.5fr; gap:24px; margin-top:24px; padding-top:24px; border-top:1px solid #465063; }
.savings-results strong { display:block; color:#b5d0fa; font-size:38px; font-weight:500; letter-spacing:-1px; }
.savings-results span { display:block; font-size:10px; color:#9aa8bc; margin-top:7px; }
.calculation-note { font-size:11px; line-height:1.7; color:#8f9db2; margin:22px 0 0; }
@media(min-width:901px) and (max-height:800px) { .site-header { height:70px; } main { padding-top:18px; padding-bottom:22px; gap:50px; } .site-footer { padding-top:16px; padding-bottom:16px; } h1 { font-size:38px; } }
@media(max-width:1100px) { main { grid-template-columns:minmax(330px,.9fr) minmax(0,1.1fr); gap:32px; padding-left:32px; padding-right:32px; } .site-header,.site-footer { padding-left:32px; padding-right:32px; } .capture-label { display:none; } h1 { font-size:43px; } .site-footer { gap:20px; } .site-footer>span { display:none; } .site-footer ul { gap:15px; } }
@media(max-width:900px) { main { grid-template-columns:1fr; gap:48px; padding:40px 32px; max-width:740px; } .home-copy { max-width:600px; } h1 { font-size:54px; } .definition,.benefit { max-width:580px; } .example-heading { margin-bottom:18px; } .capture-label { display:block; } .site-footer { flex-direction:column; align-items:flex-start; gap:14px; } }
@media(max-width:500px) { .site-header { height:72px; padding:0 20px; } .brand { font-size:23px; } .site-header nav { gap:16px; font-size:11px; } .nav-demo { display:none; } main { padding:30px 20px 40px; gap:44px; } h1 { font-size:42px; letter-spacing:-2px; } .definition { font-size:15px; } .benefit { font-size:13px; } .home-actions { gap:9px; } .button { font-size:12px; gap:18px; padding:13px 15px; } .capture-label { display:none; } h2 { font-size:21px; } .example-caption { min-height:105px; } .example-steps { gap:10px; } .example-steps button { font-size:11px; gap:6px; } .site-footer { padding:22px 20px; } .savings-results strong { font-size:30px; } dialog { padding:22px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Four product stories, each illustrated with the actual app captures. */
#examplePrevious{position:absolute;inset:0;opacity:0;pointer-events:none}
#exampleImage{position:relative;background:#1a1a1d}
.example-caption{min-height:104px;padding:14px 0 10px}
.example-steps button{align-items:flex-start;padding-top:13px;min-height:54px}
.example-steps button>span:first-child{padding-top:3px}
.example-steps .step-copy{color:inherit;display:flex;flex-direction:column;gap:5px}
.example-steps strong{font-size:13px;font-weight:550;color:inherit}
.example-steps small{font-size:10px;line-height:1.5;color:#818b9b}
.example-steps button[aria-selected=true] small{color:#a5b7ce}
#exampleViews{position:relative;display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;align-items:center;gap:7px;margin-top:8px;max-width:100%}
#exampleViews::-webkit-scrollbar{display:none}
#exampleViews button{flex:none;white-space:nowrap}
.example-caption>div{min-width:0}
#examplePlayback{flex:none}
#exampleViews:empty{display:none}
#exampleViews button{font:inherit;font-size:10px;color:#8795aa;background:none;border:1px solid transparent;border-radius:4px;padding:3px 6px;line-height:1.4}
#exampleViews button+button::before{content:'→';margin-right:10px;color:#5c6d84}
#exampleViews button[aria-pressed=true]{color:#bdd6fc;background:#82adf612;border-color:#82adf636}
@media(max-width:500px){.example-caption{min-height:139px}.example-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.example-steps strong{font-size:12px}.example-steps small{font-size:9px}#exampleViews{gap:2px}#exampleViews button{font-size:9px;padding:4px}#exampleViews button+button::before{margin-right:5px}}

@media(min-width:901px) and (max-height:800px){main{padding-bottom:12px}}

.site-footer{padding-top:12px;padding-bottom:12px;gap:24px}
.site-footer>p{flex:none;letter-spacing:.02em}
.site-footer ul{flex:1;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.integration{position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border-radius:6px;outline-offset:3px}
.integration img{display:block;width:26px;height:26px;object-fit:contain;transition:transform .18s ease}
.integration:hover img,.integration:focus-visible img{transform:translateY(-2px)}
.integration:focus-visible{outline:1px solid var(--accent)}
.integration-name{position:absolute;bottom:calc(100% + 11px);left:50%;transform:translate(-50%,4px);padding:7px 10px;border:1px solid #485267;border-radius:5px;background:#252a34;color:#ecf2fc;font-size:11px;line-height:1.4;white-space:nowrap;box-shadow:0 6px 18px #0004;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,transform .15s;z-index:5}
.integration:hover .integration-name,.integration:focus-visible .integration-name{opacity:1;visibility:visible;transform:translate(-50%,0)}
.integration:last-child .integration-name{left:auto;right:0;transform:translateY(4px)}
.integration:last-child:hover .integration-name,.integration:last-child:focus-visible .integration-name{transform:translateY(0)}
@media(min-width:901px) and (max-height:800px){main{padding-top:12px;padding-bottom:8px}.benefit{font-size:13px;line-height:1.75}}
@media(max-width:1100px){.site-footer ul{gap:4px}.integration{width:30px}.integration img{width:24px;height:24px}}
@media(max-width:900px){.site-footer ul{flex:initial;width:100%;justify-content:flex-start;gap:12px}.site-footer{gap:12px;padding-top:18px;padding-bottom:18px}.integration{width:32px}}
@media(max-width:500px){.site-footer ul{gap:10px}.integration{width:30px}.integration-name{font-size:10px}.integration:first-child .integration-name{left:0;transform:translateY(4px)}.integration:first-child:hover .integration-name,.integration:first-child:focus-visible .integration-name{transform:translateY(0)}}

#homeMotion{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#homeMotion[hidden],#exportHint[hidden]{display:none}
.motion-focus{fill:#83b0fa08;stroke:#a7cbff;stroke-width:1.6}
.motion-wire{fill:none;stroke:#99c2ff;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.motion-node{fill:none;stroke:#b3d3ff;stroke-width:1.3}
.motion-packet{fill:#e3f0ff;filter:drop-shadow(0 0 3px #8cb8ff)}
#exportHint{position:absolute;top:9%;left:30%;max-width:66%;background:#252a33f2;border:1px solid #607797;border-radius:5px;padding:7px 11px;color:#d3e4fe;font-size:clamp(7px,.72vw,11px);box-shadow:0 8px 20px #0004;pointer-events:none}

/* Approved Big screen homepage: larger copy above the full-width product views. */
.site-header{height:108px}
.brand{font-size:27px;letter-spacing:-.9px}
.site-header nav{font-size:16px;gap:26px;flex-wrap:wrap}
.nav-demo{padding:9px 15px;border-radius:7px}
main{display:block;max-width:1536px;padding:18px 48px 40px}
.home-copy{display:grid;grid-template-columns:1.06fr 1fr;align-items:center;gap:42px;margin-bottom:42px;max-width:none}
h1{font-size:clamp(40px,5.3vw,54px);font-weight:600;line-height:1.12;letter-spacing:-2px;margin:0}
.definition{font-size:20px;line-height:1.6;color:#b3bac8;max-width:none;margin:0}
.home-actions{flex-wrap:wrap;gap:12px;margin-top:22px}
.button{font-size:16px;gap:14px;border-radius:7px;min-height:48px;padding:11px 17px}
.savings-link{font-size:16px;color:var(--accent);border:0;margin-top:16px;padding:0}
.savings-link span{margin-left:10px}
.example{width:100%}
.capture{border-radius:8px}
.example-caption{min-height:0;gap:22px;padding:18px 0 20px}
.example-caption strong{font-size:20px;font-weight:600;line-height:1.4;letter-spacing:-.5px}
.example-caption p{font-size:16px;line-height:1.55;color:#b3bac8;margin-top:5px}
#examplePlayback{font-size:14px;min-height:42px;padding:8px 12px}
.example-steps{gap:14px}
.example-steps button{min-height:75px;padding-top:14px}
.example-steps button>span:first-child{display:none}
.example-steps strong{font-size:16px;font-weight:500;line-height:1.4}
.example-steps small{font-size:13px;line-height:1.5;color:#b3bac8}
#exampleViews{flex-wrap:wrap;overflow:visible;gap:7px;margin-top:12px}
#exampleViews button{font-size:13px;padding:6px 8px}
.home-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;border-top:1px solid #414751;padding-top:34px;margin-top:36px}
.home-benefits h2{font-size:23px;font-weight:600;line-height:1.3;letter-spacing:-.5px;margin-bottom:12px}
.home-benefits p{font-size:17px;line-height:1.65;color:#b3bac8;margin:0}
.site-footer{font-size:14px;padding-top:28px;padding-bottom:28px;border-top-color:#414751}
.site-footer ul{gap:12px}
.integration{width:32px;height:32px}
.integration img{width:26px;height:26px}
@media(max-width:1100px){.site-header,.site-footer{padding-left:44px;padding-right:44px}main{padding-left:44px;padding-right:44px}}
@media(max-width:760px){
 .site-header{height:auto;flex-wrap:wrap;gap:15px;padding:24px 24px 28px}
 .site-header nav{gap:18px;font-size:14px}
 .nav-demo{display:inline-flex;align-items:center}
 main{padding:8px 24px 30px;max-width:none}
 .home-copy{grid-template-columns:1fr;gap:22px;margin-bottom:30px}
 h1{font-size:43px;letter-spacing:-1.4px}
 .example-caption{gap:13px}
 .example-caption strong{font-size:18px}
 .example-caption p{font-size:15px}
 .example-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
 #exampleViews{gap:7px}
 #exampleViews button{font-size:13px;padding:6px 8px}
 #exampleViews button+button::before{margin-right:8px}
 .home-benefits{grid-template-columns:1fr;gap:26px}
 .home-benefits p{font-size:18px}
 .site-footer{padding:24px;flex-direction:column;align-items:flex-start}
 .site-footer ul{flex:initial;width:100%;justify-content:flex-start;gap:12px}
}
@media(max-width:380px){
 .site-header{padding-left:18px;padding-right:18px}
 main{padding:8px 18px 30px}
 h1{font-size:36px}
 .home-actions{gap:9px}
 .button{font-size:15px;padding:11px 12px}
 .example-caption{flex-wrap:wrap}
 .site-footer{padding-left:18px;padding-right:18px}
}

/* Connected-source explanation reads as one calm introduction. */
.home-intro>.definition+.definition{margin-top:18px}
.marketing-home .intro-screen{height:auto;min-height:100svh}.marketing-home .home-copy{padding-block:16px}