/* Scoped imported On It presentation; generated by build-onit.mjs. */
.onit-integrated{--paper:#faf7f1;--ink:#252c28;--muted:#6a7068;--accent:#be5030;--gold:#b38a43}
.onit-integrated *{box-sizing:border-box}.onit-integrated{scroll-behavior:auto;scroll-padding-top:76px}.onit-integrated{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}.onit-integrated a{color:inherit;text-decoration:none}.onit-integrated button,.onit-integrated input,.onit-integrated textarea{font:inherit}.onit-integrated button,.onit-integrated a{-webkit-tap-highlight-color:transparent}.onit-integrated button{cursor:pointer}.onit-integrated button:focus-visible,.onit-integrated a:focus-visible,.onit-integrated input:focus-visible,.onit-integrated textarea:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.onit-integrated button{color:inherit}.onit-integrated svg{flex-shrink:0}.onit-integrated{overflow:clip}.onit-integrated .logo{width:118px;height:auto;aspect-ratio:130/48;display:block;color:var(--ink)}.onit-integrated .site-header{height:76px;position:fixed;inset:0 0 auto;z-index:50;background:color-mix(in srgb,var(--paper) 86%,transparent);-webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--ink) 7%,transparent);display:flex;align-items:center;justify-content:space-between;padding:0 5.5vw}.onit-integrated .site-header>a:first-child{display:flex;align-items:center;min-height:44px}.onit-integrated .nowrap{white-space:nowrap}.onit-integrated .site-header>span{font-size:10px;letter-spacing:3px;font-weight:600}.onit-integrated .get-link{display:inline-flex;gap:10px;align-items:center;height:40px;padding:0 18px 0 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;font-weight:600;transition:background .15s}.onit-integrated .get-link:hover{background:var(--gold)}.onit-integrated .get-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.onit-integrated .get-link svg{width:16px}.onit-integrated .story{height:calc(490vh + 100svh)}.onit-integrated .stage{height:100svh;min-height:680px;position:sticky;top:0;isolation:isolate;overflow:hidden}.onit-integrated .background-word{position:absolute;left:20%;bottom:3%;font:600 clamp(180px,27vw,480px)/1 var(--font);letter-spacing:-.09em;color:#eeeae3;opacity:.37;z-index:-1;pointer-events:none}.onit-integrated .story-copy{position:absolute;left:9%;top:33%;width:calc(56vw - min(190px,13vw) - 28px);z-index:3;animation:onit-copy-in .38s ease-out both}.onit-integrated .eyebrow{font-size:11px;letter-spacing:2.4px;font-weight:600;color:#a63f22}.onit-integrated .eyebrow>span{margin-right:7px}.onit-integrated .story-copy h1{font:500 clamp(48px,5.7vw,110px)/1.08 var(--font);letter-spacing:-.06em;margin:32px 0 23px}.onit-integrated .story-copy h1 em{font-style:normal;color:var(--accent)}.onit-integrated .story-copy>p{font-size:clamp(17px,1.6vw,23px);line-height:1.6;max-width:370px;color:var(--muted);margin:0}.onit-integrated .person{display:flex;gap:13px;align-items:center;margin-top:34px}.onit-integrated .person-avatar{width:40px;height:40px;display:grid;place-items:center;border:1px solid #d5c8b2;border-radius:50%;font-size:14px}.onit-integrated .person b{display:block;font-weight:600;font-size:15px}.onit-integrated .person small{display:block;margin-top:2px;color:var(--muted);font-size:13px}.onit-integrated .device-scene{position:absolute;top:132px;left:65vw;translate:-50% 0;width:min(418px,30.8vw,calc((100svh - 132px - 150px) * .605));z-index:2;pointer-events:none}.onit-integrated .hand-rig{position:relative;width:100%;aspect-ratio:220/400;container-type:inline-size;transform:rotate(6deg);transform-origin:50% 60%}.onit-integrated .hand-back,.onit-integrated .hand-front{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.onit-integrated .hand-back{z-index:1}.onit-integrated .hand-front{z-index:3}.onit-integrated .hand-front>g>g{will-change:transform}.onit-integrated .phone-surface{position:absolute;left:11.36%;top:5.25%;width:77.27%;height:89.5%;z-index:2;border-radius:15% / 7.12%;overflow:hidden;background:#f8f9f5}.onit-integrated .app-screen{width:100%;height:100%;position:relative;overflow:hidden;background:#f8f9f5;color:#252c28;font-family:var(--font);padding:0 5.1%;font-size:2.468cqw}.onit-integrated .status{height:9%;display:flex;justify-content:space-between;align-items:flex-start;padding:7.7% 3% 0;font-size:2.567cqw}.onit-integrated .status>span{display:flex;gap:2px;align-items:center}.onit-integrated .status svg{width:2.468cqw;height:2.468cqw}.onit-integrated .status i{width:1.02cqw;height:1.975cqw;background:#252c28;margin-left:2px;border-radius:1px}.onit-integrated .island{position:absolute;top:2.3%;left:33%;width:34%;height:3.9%;background:#0c100d;border-radius:999px}.onit-integrated .app-header{height:6.5%;display:flex;gap:1.5%;align-items:center}.onit-integrated .app-header .logo{width:32%;flex-shrink:0}.onit-integrated .app-header>span{font-size:1.892cqw;color:#8b9088;margin-left:auto;white-space:nowrap}.onit-integrated .bell{position:relative;display:grid;place-items:center;border-radius:50%;border:1px solid #e0e4dc;background:#fff;width:5.759cqw;height:5.759cqw;margin-left:2%}.onit-integrated .bell svg{width:3.291cqw;height:3.291cqw}.onit-integrated .bell i{position:absolute;right:-0.987cqw;top:-0.823cqw;display:grid;place-items:center;width:2.797cqw;height:2.797cqw;background:#2863ec;color:white;font-style:normal;font-size:1.892cqw;border-radius:50%}.onit-integrated .greeting{font-weight:700;font-size:3.719cqw;letter-spacing:-.04em;line-height:1.3;margin:5% 0 5%}.onit-integrated .app-tabs{display:flex;justify-content:space-between;align-items:center;gap:1%;margin-bottom:5%}.onit-integrated .app-tabs b{font-size:2.057cqw;color:#666e66;font-weight:500;white-space:nowrap;display:flex;gap:0.823cqw;align-items:center;padding:1.81cqw 0.329cqw}.onit-integrated .app-tabs b.selected{border-radius:999px;background:#29312b;color:#fff;padding:1.81cqw 2.221cqw;font-weight:600}.onit-integrated .app-tabs b span{opacity:.72;font-size:1.81cqw}.onit-integrated .app-tabs svg{width:1.645cqw;height:1.645cqw}.onit-integrated .task-group{background:#fff;border:1px solid #dde2da;border-radius:2.962cqw;margin-bottom:3.4%;overflow:hidden}.onit-integrated .task-group .group-head{display:flex;align-items:center;gap:1.81cqw;margin:0;padding:2.715cqw 2.797cqw;font-size:2.304cqw;white-space:nowrap}.onit-integrated .task-group .group-head>span{background:#edf1eb;border-radius:50%;height:3.126cqw;min-width:3.126cqw;display:grid;place-items:center;font-size:1.892cqw;color:#566559}.onit-integrated .task-group .group-head i{height:1px;background:#dde2da;flex:1}.onit-integrated .task-group .group-head svg{width:1.975cqw;height:1.975cqw;color:#8c938b}.onit-integrated .task-row{display:flex;align-items:center;gap:1.975cqw;min-height:9.873cqw;padding:2.304cqw;border-top:1px solid #e0e3dc}.onit-integrated .task-icon{width:5.43cqw;height:5.43cqw;border-radius:50%;display:grid;place-items:center;background:#506d90;color:#fff;flex-shrink:0}.onit-integrated .task-icon svg{width:3.044cqw;height:3.044cqw;stroke-width:1.8}.onit-integrated .task-icon.green{background:#618471}.onit-integrated .task-icon.purple{background:#806492}.onit-integrated .task-icon.rose{background:#956768}.onit-integrated .row-copy{min-width:0;flex:1}.onit-integrated .row-copy>div{font-size:2.337cqw;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.onit-integrated .row-copy strong{font-weight:500}.onit-integrated .row-copy>div>span{color:#8b9188}.onit-integrated .row-copy>small{font-size:1.81cqw;color:#a48344}.onit-integrated .time-chip{padding:0.905cqw 1.563cqw;border-radius:999px;background:#eef2ec;color:#536353;font-weight:600;font-size:1.892cqw;white-space:nowrap}.onit-integrated .finished .task-icon{background:#5c7e63}.onit-integrated .new-item{animation:onit-sheet-in .45s ease both}.onit-integrated .new-item .task-row{background:#f3f7ef}.onit-integrated .wa-alert{position:absolute;z-index:5;left:4%;right:4%;top:11%;padding:1.6cqw 2cqw;border-radius:2cqw;background:#fff;border:1px solid #e1e5dc;box-shadow:0 1.8cqw 5cqw #2b342018;animation:onit-sheet-in .5s ease both}.onit-integrated .wa-app{display:flex;align-items:center;gap:.9cqw;font-size:1.3cqw;color:#25d366;font-weight:600}.onit-integrated .wa-app svg{width:2cqw;height:2cqw}.onit-integrated .wa-app small{margin-left:auto;color:#8a9286;font-weight:400}.onit-integrated .wa-alert b{display:block;margin-top:.9cqw;font-size:1.9cqw}.onit-integrated .wa-alert p{margin:.4cqw 0 0;font-size:1.6cqw;color:#58605a}.onit-integrated .listening{display:flex;align-items:center;gap:1.316cqw;margin-top:3%;font-size:2.797cqw;color:#858b80}.onit-integrated .listening svg{width:3.291cqw;height:3.291cqw}.onit-integrated .dictation{margin-top:8%;font-size:3.538cqw;line-height:1.6;letter-spacing:-.025em;min-height:25%;padding:0 0.987cqw}.onit-integrated .cursor{display:inline-block;height:3.62cqw;vertical-align:middle;border-left:1px solid #6b7767;margin-left:1px}.onit-integrated .mic-position{position:absolute;left:50%;top:85%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;z-index:3}.onit-integrated .stop-label{font-size:2.139cqw;line-height:4.114cqw;color:#8b9188;min-height:4.114cqw;margin-bottom:0.823cqw}.onit-integrated .mic-control{position:relative;transition:transform .12s ease;width:10.202cqw;height:10.202cqw;border-radius:50%;display:grid;place-items:center;background:#263329;color:#fff}.onit-integrated .mic-control svg{width:4.607cqw;height:4.607cqw;stroke-width:2}.onit-integrated .mic-control.thumb-down,.onit-integrated .done-button.thumb-down{transform:scale(.94)}.onit-integrated .done-button{position:relative;transition:transform .12s ease}.onit-integrated .done-button .mic-ripple{border-color:#26352a}.onit-integrated .mic-ripple{position:absolute;inset:0;border-radius:50%;border:2px solid #366eed;opacity:0;pointer-events:none}.onit-integrated .thumb-down .mic-ripple{animation:onit-mic-ripple .65s ease-out both}.onit-integrated .done-button.thumb-down::after{content:'';position:absolute;inset:0;border-radius:999px;border:2px solid #26352a;animation:onit-mic-ripple .65s ease-out both}@keyframes onit-mic-ripple{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(2.6)}}.onit-integrated .recording .mic-control{background:#366eed;outline:1px solid #cbd9fb;outline-offset:1.81cqw;box-shadow:0 0 0 3.291cqw #edf2fc}.onit-integrated .home-line{position:absolute;bottom:1.6%;left:36%;width:28%;height:0.576cqw;background:#202722;border-radius:8px}.onit-integrated .app-sheet{position:absolute;z-index:4;left:4%;right:4%;bottom:22%;border:1px solid #e1e5dc;border-radius:3.291cqw;background:#fff;padding:3.62cqw;box-shadow:0 2.962cqw 8.227cqw #2b342018;animation:onit-sheet-in .4s ease both}.onit-integrated .app-sheet p{font-size:2.962cqw;line-height:1.5;margin:0 0 2.304cqw}.onit-integrated .app-sheet small,.onit-integrated .sheet-meta{font-size:1.975cqw;line-height:1.5;color:#8a9286}.onit-integrated .confirm-sheet small{display:flex;gap:0.987cqw;align-items:center}.onit-integrated .confirm-sheet small svg{width:2.139cqw;height:2.139cqw}.onit-integrated .detail-sheet{bottom:27%;padding:4.443cqw}.onit-integrated .app-sheet h4,.onit-integrated .sheet-title{display:block;font-size:3.62cqw;line-height:1.35;margin:2.797cqw 0}.onit-integrated .detail-due{display:flex;gap:0.987cqw;align-items:center;color:#58715a}.onit-integrated .detail-due svg{width:2.797cqw;height:2.797cqw}.onit-integrated .app-sheet hr{border:0;border-top:1px solid #e4e7df;margin:3.291cqw 0}.onit-integrated .detail-sheet .as-spoken{font-size:2.633cqw;color:#777f72;margin-top:1.645cqw}.onit-integrated .sheet-actions{display:flex;justify-content:center;margin-top:3.291cqw}.onit-integrated .sheet-actions>span{border-radius:50%;background:#e7eee3;padding:1.645cqw}.onit-integrated .sheet-actions svg{width:3.62cqw;height:3.62cqw}.onit-integrated .reply-sheet>p{margin-top:2.139cqw}.onit-integrated .reply-text{padding:2.797cqw;border-radius:1.975cqw;background:#eff2eb;font-size:2.797cqw;line-height:1.5;margin-bottom:1.645cqw}.onit-integrated .finish-sheet{bottom:5%;padding:4.114cqw}.onit-integrated .finish-sheet .sheet-title{margin-top:0}.onit-integrated .finish-sheet>p{font-size:2.468cqw;color:#8a9286}.onit-integrated .completion-note{position:relative;border:1px solid #dce3d6;background:#f8faf5;border-radius:2.139cqw;padding:2.468cqw 2.468cqw 4.936cqw;line-height:1.5;font-size:2.797cqw;margin-top:1.316cqw}.onit-integrated .completion-note svg{position:absolute;bottom:1.645cqw;right:1.645cqw;width:2.633cqw;height:2.633cqw}.onit-integrated .finish-actions{display:flex;align-items:center;justify-content:flex-end;gap:4.936cqw;margin-top:3.291cqw;font-size:2.633cqw}.onit-integrated .finish-actions b{padding:1.975cqw 3.949cqw;border-radius:999px;background:#26352a;color:#fff;display:flex;align-items:center;gap:0.987cqw;font-weight:500}.onit-integrated .finish-actions svg{width:2.962cqw;height:2.962cqw}.onit-integrated .callouts{position:absolute;inset:0;z-index:6;pointer-events:none}.onit-integrated .leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.onit-integrated .leader{fill:none;stroke:var(--ink);stroke-opacity:.35;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1200;stroke-dashoffset:1200;opacity:0}.onit-integrated .leader.on{opacity:1;animation:onit-leader-in .45s ease-out .1s both}.onit-integrated .leader-dot{fill:#fff;stroke:var(--ink);stroke-width:1.5;opacity:0}.onit-integrated .leader-dot.on{opacity:1;transition:opacity .2s .5s}.onit-integrated .callout{position:absolute;left:0;top:0;display:none;align-items:center;gap:9px;padding:10px 15px;border-radius:999px;background:#fff;color:var(--ink);font-weight:600;font-size:14px;white-space:nowrap;box-shadow:0 14px 40px -14px rgba(37,44,40,.45),0 3px 10px -6px rgba(37,44,40,.25);will-change:transform}.onit-integrated .callout.on{display:flex;animation:onit-pill-in .35s ease-out .5s both}.onit-integrated .callout i{width:8px;height:8px;border-radius:50%;background:#4f6a86}.onit-integrated .callouts.still .leader.on,.onit-integrated .callouts.still .callout.on{animation:none;stroke-dashoffset:0;opacity:1}@keyframes onit-leader-in{from{stroke-dashoffset:1200}to{stroke-dashoffset:0}}@keyframes onit-pill-in{from{opacity:0}to{opacity:1}}@media(max-width:900px){.onit-integrated .callout{font-size:12px;padding:8px 12px;gap:7px}.onit-integrated .callout i{width:6px;height:6px}}.onit-integrated .onit-app{color:#293d2d}.onit-integrated .onit-app .push-check{width:2.4cqw;height:2.4cqw;border-radius:.7cqw;color:#d2b370}.onit-integrated .onit-app .push-check svg{width:1.5cqw;height:1.5cqw}.onit-integrated .push-notification-old{position:absolute;z-index:5;left:6%;top:16%;width:66%;display:flex;gap:11px;align-items:center;padding:17px;border:1px solid #ffffffc9;background:#f6f8f0f2;border-radius:18px;box-shadow:0 15px 45px #213a2526;backdrop-filter:blur(16px);animation:onit-sheet-in .6s ease both}.onit-integrated .push-check{background:#293d2d;border-radius:10px;width:38px;height:38px;display:grid;place-items:center;color:#d2b370;flex-shrink:0}.onit-integrated .push-notification>div{flex:1}.onit-integrated .push-notification div>span{font-size:9px;letter-spacing:1.4px;display:flex;justify-content:space-between;color:#66735e}.onit-integrated .push-notification small{letter-spacing:0}.onit-integrated .push-notification b{display:block;font-size:13px;margin:5px 0}.onit-integrated .push-notification p{font-size:12px;margin:0;color:#66735e}.onit-integrated .scroll-cue{display:flex;align-items:center;gap:14px;font-size:9px;letter-spacing:2.4px}.onit-integrated .scroll-cue svg{width:17px;height:17px}.onit-integrated .play-story{display:flex;gap:8px;align-items:center;border:0;background:var(--paper);border-radius:999px;box-shadow:0 2px 12px -4px rgba(37,44,40,.22);font-size:13px;padding:10px 16px}.onit-integrated .play-story svg{width:14px;height:14px}.onit-integrated .progress-track{position:absolute;bottom:0;height:2px;width:100%;background:#ebe6dc}.onit-integrated .progress-track span{display:block;height:100%;background:var(--accent)}.onit-integrated .explainer{position:relative;z-index:5;background:var(--paper);padding:96px 24px 88px;border-top:1px solid #ebe6dc}.onit-integrated .explainer-inner{max-width:900px;margin:0 auto}.onit-integrated .explainer h2{font:500 clamp(34px,4vw,52px)/1.1 var(--font);letter-spacing:-.05em;margin:22px 0 16px}.onit-integrated .explainer-lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:#5e645c;max-width:620px;margin:0 0 44px}.onit-integrated .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:28px 22px}.onit-integrated .steps li{border-top:2px solid #d9d5cb;padding-top:16px}.onit-integrated .steps li span{font-size:11px;letter-spacing:2.4px;font-weight:600;color:#a63f22}.onit-integrated .steps h3{font:600 19px/1.25 var(--font);letter-spacing:-.03em;margin:12px 0 8px}.onit-integrated .steps p{margin:0;font-size:15px;line-height:1.5;color:#5e645c}@media(max-width:900px){.onit-integrated .steps{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-left:22px;margin:0 -22px;padding:0 22px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.onit-integrated .steps::-webkit-scrollbar{display:none}.onit-integrated .steps li{flex:0 0 min(280px,72vw);scroll-snap-align:start}}@media(max-width:600px){.onit-integrated .explainer{padding:64px 22px 60px}.onit-integrated .explainer h2{font-size:31px}.onit-integrated .explainer-lead{margin-bottom:34px}}.onit-integrated .safety{position:relative;z-index:5;background:var(--ink);color:var(--paper);min-height:100svh;display:flex;align-items:center;padding:96px 24px;overflow:hidden}.onit-integrated .safety::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 50% at 80% 10%,rgba(179,138,67,.18),transparent 70%);pointer-events:none}.onit-integrated .safety-inner{position:relative;max-width:1080px;margin:0 auto;width:100%;display:grid;grid-template-columns:minmax(260px,.9fr) 1.6fr;gap:56px;align-items:start}.onit-integrated .safety-head .eyebrow{color:var(--gold)}.onit-integrated .safety-head h2{font:500 clamp(34px,3.6vw,52px)/1.08 var(--font);letter-spacing:-.05em;margin:20px 0 16px;color:#fff}.onit-integrated .safety-head p{margin:0;font-size:17px;line-height:1.55;color:#b9bdb3;max-width:340px}.onit-integrated .safety-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}.onit-integrated .safety-list li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:4px;padding:18px 20px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}.onit-integrated .safety.in .safety-list li{opacity:1;transform:none}.onit-integrated .safety-icon{grid-row:1/3;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(179,138,67,.16);color:var(--gold)}.onit-integrated .safety-icon svg{width:19px;height:19px;stroke-width:1.9}.onit-integrated .safety-list b{font:600 16px/1.3 var(--font);letter-spacing:-.02em;color:#fff}.onit-integrated .safety-list li>span:last-child{font-size:14.5px;line-height:1.5;color:#b9bdb3}@media(max-width:900px){.onit-integrated .safety-inner{grid-template-columns:1fr;gap:32px}.onit-integrated .safety{padding:72px 24px}}@media(max-width:600px){.onit-integrated .safety{padding:56px 20px;min-height:0}.onit-integrated .safety-list{grid-template-columns:1fr;gap:10px}.onit-integrated .safety-list li{padding:14px 16px}.onit-integrated .safety-head p{font-size:15px}}@media(prefers-reduced-motion:reduce){.onit-integrated .safety-list li{opacity:1;transform:none;transition:none}}.onit-integrated .ending{position:relative;z-index:5;background:#f1eee5;text-align:center;padding:90px 24px 70px;min-height:0;display:flex;flex-direction:column;align-items:center}.onit-integrated .ending-mark{width:56px;height:56px;margin:38px 0 0}.onit-integrated .ending-mark svg{width:100%;height:100%;display:block;overflow:visible}.onit-integrated .logo{overflow:visible}.onit-integrated .ending h2{font:500 clamp(60px,8vw,108px)/1.1 var(--font);letter-spacing:-.06em;margin:25px 0 15px}.onit-integrated .ending>p{font-size:21px;color:#5e645c;margin:0 0 34px}.onit-integrated .store-links{display:flex;gap:12px}.onit-integrated .store-links>a{min-width:190px;display:flex;align-items:center;text-align:left;gap:12px;padding:13px 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:21px;line-height:1.1}.onit-integrated .store-links small{font-size:10px;display:block;margin-bottom:4px}.onit-integrated .store-links svg{width:27px;height:27px}.onit-integrated .store-links svg:last-child{width:14px;height:14px;margin-left:auto}.onit-integrated .end-meta{font-size:12px;color:#5e645c;margin:20px 0 38px}.onit-integrated .contact-toggle{display:flex;gap:9px;align-items:center;background:none;border:0;border-bottom:1px solid #c4c6b8;margin-top:44px;padding:8px 0;font-size:15px;font-weight:600}.onit-integrated .contact-toggle svg{width:14px;height:14px}/* the panel opens by growing, not popping */.onit-integrated .contact-wrap{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1),opacity .35s ease;width:min(860px,100%)}.onit-integrated .contact-wrap.open{grid-template-rows:1fr;opacity:1}.onit-integrated .contact-inner{min-height:0;overflow:hidden}.onit-integrated .contact-wrap:not(.open) .contact-inner{visibility:hidden;transition:visibility 0s .5s}.onit-integrated .contact-form{display:grid;grid-template-columns:1fr 1.1fr 1.25fr;gap:14px;align-items:start;width:100%;text-align:left;margin-top:30px;padding:2px}.onit-integrated .contact-form label,.onit-integrated .contact-form .mobile-block label{display:block;font-size:13px;line-height:1.4}.onit-integrated .contact-form input,.onit-integrated .contact-form textarea{display:block;width:100%;border:1px solid #cbcfc2;border-radius:5px;background:#faf9f5;padding:10px;margin-top:5px}.onit-integrated .contact-form textarea{min-height:90px;resize:vertical}.onit-integrated .contact-form button{grid-column:1/-1;justify-self:center;min-width:220px;display:flex;justify-content:center;gap:10px;align-items:center;padding:12px 26px;border:0;border-radius:5px;color:white;background:var(--ink)}.onit-integrated .contact-form .form-problem{grid-column:1/-1;text-align:center}.onit-integrated .contact-form button svg{width:16px;height:16px}.onit-integrated .contact-form>small{color:var(--muted);font-size:12px}.onit-integrated .contact-form .optional{color:var(--muted);font-weight:400}.onit-integrated .contact-form .form-problem{color:var(--accent)}.onit-integrated .contact-sent{margin-top:30px;font-size:16px;max-width:420px}
/* mobile field: country picker + number */
.onit-integrated .mobile-block label{font-size:13px}.onit-integrated .mobile-field{display:flex;margin-top:5px;border:1px solid #cbcfc2;border-radius:5px;background:#faf9f5}.onit-integrated .mobile-field:focus-within{outline:2px solid var(--accent);outline-offset:5px}.onit-integrated .mobile-field input[type=tel]{flex:1;min-width:0;border:0;background:transparent;padding:10px;margin:0}.onit-integrated .mobile-field input[type=tel]:focus-visible{outline:none}.onit-integrated .cc{position:relative;flex-shrink:0}.onit-integrated .contact-form .cc-btn,.onit-integrated .cc-btn{grid-column:auto;min-width:0;justify-self:auto;display:flex;justify-content:flex-start;align-items:center;gap:6px;height:100%;padding:0 8px 0 10px;border:0;border-right:1px solid #cbcfc2;border-radius:0;background:transparent;color:inherit;font-size:15px;white-space:nowrap}.onit-integrated .cc-btn svg{width:14px;height:14px;color:var(--muted)}.onit-integrated .cc-flag{font-size:18px;line-height:1}.onit-integrated .cc-pop{position:absolute;z-index:20;top:calc(100% + 6px);left:0;width:280px;max-width:80vw;background:#fff;border:1px solid #cbcfc2;border-radius:8px;box-shadow:0 12px 30px -10px rgba(37,44,40,.3);padding:8px}.onit-integrated .contact-form .cc-search,.onit-integrated .cc-search{width:100%;margin:0;padding:8px 10px;border:1px solid #cbcfc2;border-radius:5px;background:#faf9f5}.onit-integrated .cc-list{list-style:none;margin:6px 0 0;padding:0;max-height:240px;overflow:auto}.onit-integrated .cc-list li{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:5px;cursor:pointer;font-size:14px}.onit-integrated .cc-list li.active,.onit-integrated .cc-list li:hover{background:#f1eee5}.onit-integrated .cc-list li[aria-selected=true] .cc-name{font-weight:600}.onit-integrated .cc-list li.pinned-last{border-bottom:1px solid #e6e2d8;border-radius:5px 5px 0 0;margin-bottom:4px}.onit-integrated .cc-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.onit-integrated .cc-code{color:var(--muted)}.onit-integrated .field-error{margin:6px 0 0;font-size:12px;color:var(--accent)}.onit-integrated input[aria-invalid=true],.onit-integrated .mobile-field:has(input[aria-invalid=true]){border-color:var(--accent)}.onit-integrated footer{padding:22px 5.5%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;font-size:15px;color:var(--muted)}.onit-integrated .foot-copy{white-space:nowrap}.onit-integrated .foot-centre{display:flex;align-items:center;gap:14px}.onit-integrated .socials{flex:1 1 auto;display:flex;justify-content:center;align-items:center;gap:18px}.onit-integrated .socials:empty{display:none}.onit-integrated .socials a{color:var(--ink);width:18px;height:18px;display:inline-flex;transition:color .15s}.onit-integrated .socials a:hover,.onit-integrated .socials a:focus-visible{color:var(--gold)}.onit-integrated .socials{gap:6px}.onit-integrated .socials a{display:grid;place-items:center;min-width:44px;min-height:44px}.onit-integrated .socials svg{width:18px;height:18px}.onit-integrated .foot-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}.onit-integrated .foot-links{display:flex;align-items:center;justify-content:flex-end;gap:10px}@keyframes onit-copy-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes onit-sheet-in{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.onit-integrated .device-scene{top:136px;width:min(462px,28.6vw,calc((100svh - 136px - 160px) * .605))}.onit-integrated .story-copy{top:31%}}
@media(max-width:900px){.onit-integrated .site-header{height:68px}.onit-integrated{scroll-padding-top:68px}}@media(max-width:900px){.onit-integrated .story-copy{width:46%}.onit-integrated .story-copy h1{font-size:clamp(40px,5.6vw,60px)}.onit-integrated .site-header>span{display:none}.onit-integrated .site-header .logo{width:95px}.onit-integrated .stage{min-height:650px}.onit-integrated .story-copy{left:7%;top:23%;width:49%}.onit-integrated .story-copy h1{font-size:clamp(40px,6.3vw,66px)}.onit-integrated .story-copy>p{font-size:18px;max-width:270px}.onit-integrated .device-scene{top:24%;left:auto;right:8%;translate:none;width:min(363px,44vw)}.onit-integrated .scroll-cue{letter-spacing:1.3px}}
@media(max-width:600px){.onit-integrated{scroll-padding-top:60px}.onit-integrated .site-header{padding:0 6%;height:60px}.onit-integrated .get-link{font-size:13px;gap:8px;height:40px;padding:0 14px 0 16px}.onit-integrated .stage{height:100svh;min-height:720px}.onit-integrated .story{height:calc(490svh + 100svh)}.onit-integrated .story-copy{top:110px;left:7%;width:88%;pointer-events:none}.onit-integrated .eyebrow{font-size:9px;letter-spacing:1.8px}.onit-integrated .story-copy h1{font-size:42px;line-height:1.06;letter-spacing:-.055em;margin:17px 0 13px}.onit-integrated .story-copy>p{font-size:16px;line-height:1.45;max-width:265px}.onit-integrated .person{margin-top:15px;gap:9px}.onit-integrated .person-avatar{width:28px;height:28px;font-size:11px}.onit-integrated .person b{font-size:12px}.onit-integrated .person small{font-size:10px}.onit-integrated .device-scene{top:396px;right:0;left:0;translate:none;margin:0 auto;width:min(52vw,210px)}.onit-integrated .hand-rig{max-width:260px}.onit-integrated .background-word{bottom:22%;left:-8%;font-size:190px}.onit-integrated .scroll-cue{display:none}.onit-integrated .play-story{display:none}.onit-integrated .play-story{font-size:12px;padding:9px 14px}.onit-integrated .ending{padding:64px 22px 56px;min-height:0}.onit-integrated .contact-form{grid-template-columns:1fr}.onit-integrated .contact-form button{justify-self:stretch}.onit-integrated .ending h2{font-size:66px}.onit-integrated .ending>p{font-size:18px}.onit-integrated .store-links{gap:8px}.onit-integrated .store-links>a{min-width:0;padding:12px 13px;font-size:17px;gap:9px}.onit-integrated .store-links>a>svg:first-child{width:22px}.onit-integrated .store-links>a>svg:last-child{display:none}.onit-integrated .store-links small{font-size:9px}.onit-integrated footer{padding:20px 6%;gap:12px;grid-template-columns:1fr;justify-items:center;text-align:center;font-size:13px}.onit-integrated .foot-centre{order:-1}.onit-integrated .foot-links{justify-content:center}}
@media(max-width:600px) and (min-height:820px){.onit-integrated .device-scene{top:404px;width:min(56vw,230px)}.onit-integrated .story-copy{top:120px}.onit-integrated .story-copy h1{font-size:46px}}
@media(prefers-reduced-motion:reduce){.onit-integrated *,.onit-integrated *:before,.onit-integrated *:after{animation:none!important;transition:none!important}}
/* Keep the entire handset above the mobile story controls. */
@media(max-width:600px){.onit-integrated .device-scene{top:372px;width:min(52vw,210px)}.onit-integrated .story-copy{top:96px}.onit-integrated .story-copy h1{font-size:40px}.onit-integrated .story-copy>p{font-size:15px}.onit-integrated .person{margin-top:12px}}
@media(max-width:600px) and (min-height:820px){.onit-integrated .device-scene{top:386px;width:min(56vw,230px)}.onit-integrated .story-copy{top:113px}.onit-integrated .story-copy h1{font-size:45px}}



.onit-integrated .hand-skin{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}

@media(max-width:600px) and (max-height:700px){.onit-integrated .stage{min-height:0}.onit-integrated .story-copy{top:80px}.onit-integrated .story-copy h1{font-size:35px;margin:13px 0 9px}.onit-integrated .story-copy>p{font-size:14px;max-width:250px}.onit-integrated .person{margin-top:10px}.onit-integrated .device-scene{top:322px;width:min(46vw,170px)}}

.onit-integrated .store-soon{min-width:190px;display:flex;align-items:center;text-align:left;gap:12px;padding:13px 20px;border-radius:999px;border:1px solid #cfcabf;color:#6a7068;font-size:21px;line-height:1.1}
.onit-integrated .store-soon small{font-size:10px;display:block;margin-bottom:4px}.onit-integrated .store-soon svg{width:27px;height:27px}

/* NUVENA — original brand, considered motion. No new colour scheme. */
:root{--action-dark:#101935}
@font-face{font-family:NuvenaFigtree;src:url('/fonts/Figtree.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:NuvenaFigtree;src:url('/fonts/Figtree-BoldItalic.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap}
:root{color-scheme:light;--bg:#f7f7f5;--white:#fff;--ink:#101935;--slate:#4d5672;--muted:#80879b;--line:#e6e6eb;--thread:#d5d6dd;--rose:#c8326a;--blue:#2364a8;--violet:#6a4fb8;--font:NuvenaFigtree,Figtree,sans-serif;--ui:var(--font);--round:NuvenaRound,Quicksand,sans-serif;--serif:var(--font);--ease:cubic-bezier(.2,.7,.2,1);--gutter:clamp(22px,4.9vw,72px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:116px;-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--font);-webkit-font-smoothing:antialiased}h1,h2,h3,h4,p{margin:0}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{color:inherit;cursor:pointer}button:disabled{cursor:default}a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{border:0}img{display:block;max-width:100%;height:auto}svg{display:block}fieldset{margin:0;padding:0;border:0}::selection{background:#6a4fb829;color:var(--ink)}:focus-visible{outline:3px solid var(--blue);outline-offset:5px}main:focus{outline:none}main{min-height:65vh}.container{max-width:1424px;margin-inline:auto;padding-inline:var(--gutter)}.section{padding-block:90px}.ico{width:20px;height:20px;flex:none}.skip{position:fixed;left:20px;top:-90px;z-index:200;padding:13px 20px;background:var(--ink);color:#fff;border-radius:10px}.skip:focus{top:14px}.eyebrow{display:flex;align-items:center;gap:11px;font:600 10px/1.5 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}.strokes{display:inline-block;position:relative;width:22px;height:19px;flex:none}.strokes i{position:absolute;left:0;top:3px;height:2px;width:13px;background:var(--rose);transform:rotate(-36deg);border-radius:2px}.strokes i:nth-child(2){top:9px;width:23px;background:var(--blue)}.strokes i:nth-child(3){top:15px;left:7px;width:16px;background:var(--violet)}.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;gap:26px;border:1px solid var(--ink);border-radius:99px;background:var(--action-dark);color:#fff;font-size:14px;font-weight:600;line-height:1.3;transition:background .22s,transform .3s var(--ease),box-shadow .25s;text-align:center}.button:hover{background:var(--action-dark);transform:translateY(-2px);box-shadow:0 8px 20px #10193515}.button .ico{width:17px;height:17px}.button.outline{background:none;color:var(--ink);border-color:var(--thread)}.text-link{display:inline-flex;align-items:center;gap:14px;min-height:44px;padding:0;background:transparent;font-size:13px;font-weight:600;text-align:left}.text-link .ico{width:16px;height:16px;transition:transform .3s var(--ease)}.text-link:hover .ico{transform:translate(3px,-2px)}.sample-label{color:var(--slate);font:400 9px/1.5 var(--ui)}.small-note{font:400 11px/1.8 var(--ui);color:var(--slate)}.blue{color:var(--blue);background:#2364a80b}.rose{color:var(--rose);background:#c8326a09}.violet{color:var(--violet);background:#6a4fb80d}
/* Hero — the promise stays still. Motion shows the follow-through. */
.hero{padding-block:165px 80px;overflow:clip}.hero-layout{display:grid;grid-template-columns:1.03fr 1fr;gap:64px;align-items:center}.hero-copy{min-width:0;padding-bottom:3px}.hero-copy h1{font-size:clamp(50px,5.45vw,82px);font-weight:500;letter-spacing:-.066em;line-height:1.035;margin-top:29px;white-space:nowrap}.delivered{display:block;width:fit-content;position:relative;color:var(--blue);padding-bottom:5px}.delivered:after{content:'';position:absolute;bottom:-4px;left:2px;width:100%;height:2px;background:linear-gradient(90deg,var(--blue),var(--violet) 57%,var(--rose));opacity:.6}.hero-subhead{font-size:21px;letter-spacing:-.035em;line-height:1.5;margin-top:30px}.hero-copy .intro{font-size:16px;line-height:1.8;color:var(--slate);margin-top:14px;max-width:440px}.hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:30px}.hero-footnote{display:flex;align-items:center;gap:9px;font:400 10px/1.7 var(--ui);color:var(--slate);margin-top:24px}.hero-footnote .ico{width:14px;height:14px}.hero-art{min-width:0;position:relative;isolation:isolate}.threads{position:absolute;inset:-70px -45px;width:calc(100% + 90px);height:calc(100% + 125px);z-index:-1;pointer-events:none}.travelling{animation:thread-travel 15s linear infinite;animation-play-state:paused}.in-view .travelling{animation-play-state:running}.product-demo{background:#fff;border:1px solid #dfe1e8;border-radius:18px;box-shadow:0 25px 55px -33px #10193550,0 3px 8px -5px #10193510;overflow:hidden;position:relative}.demo-top{display:flex;align-items:center;gap:12px;padding:19px 24px;border-bottom:1px solid #eef0f4}.demo-top strong{font-size:14px;font-weight:650;letter-spacing:-.025em}.demo-top-sep{width:1px;height:14px;background:var(--line)}.micro{font:500 8px var(--ui);letter-spacing:.08em;color:var(--slate)}.window-dots{margin-left:auto;color:var(--thread);letter-spacing:3px;font-size:12px}.demo-body{padding:21px 24px 16px}.demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.demo-tabs{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:7px;background:#f7f7f9}.demo-tabs button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:0 10px;background:transparent;border-radius:5px;font:500 10px var(--ui);color:var(--slate);white-space:nowrap}.demo-tabs button[aria-selected=true]{background:#fff;color:var(--ink);box-shadow:0 1px 5px #10193514}.demo-tabs .ico{width:13px;height:13px}.source-card{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:16px;min-height:114px}.source-meta{display:flex;align-items:center;gap:7px;font:500 9px var(--ui);color:var(--slate)}.source-meta>.ico{width:13px;height:13px;color:var(--blue)}.source-meta small{font-size:8px;margin-left:auto;padding:3px 6px;background:#fff;border:1px solid var(--line);border-radius:4px;white-space:nowrap}.source-quote{font-size:15px;line-height:1.65;margin-top:16px;letter-spacing:-.016em}.voice-wave{display:flex;align-items:center;gap:2px;position:absolute;bottom:12px;right:14px;height:25px;opacity:.6}.voice-wave i,.voice-note-wave i{width:2px;display:block;border-radius:2px;background:var(--rose);animation:voice-breathe 2.8s ease-in-out infinite}.source-card:has(.voice-wave) .source-quote{padding-right:50px}.flow-heading{display:flex;justify-content:space-between;gap:10px;margin:20px 0 8px;font:500 8px/1.7 var(--ui);color:var(--slate)}.flow-heading span:first-child{text-transform:uppercase;letter-spacing:.1em}.flow-steps{list-style:none;margin:0;padding:0}.flow-step{display:grid;grid-template-columns:27px minmax(0,1fr) auto;gap:11px;align-items:center;min-height:58px;position:relative;border-radius:8px;padding:7px 0;transition:background .6s}.flow-step:not(:last-child):after{content:'';position:absolute;left:13px;top:calc(50% + 14px);height:calc(100% - 27px);width:1px;background:var(--line)}.step-node{width:27px;height:27px;display:grid;place-items:center;border:1px solid #2364a828;border-radius:50%;color:var(--blue);background:#2364a807;transition:box-shadow .6s,background .6s;z-index:1}.step-node .ico{width:13px;height:13px}.step-1 .step-node{color:var(--violet);border-color:#6a4fb825;background:#6a4fb807}.step-2 .step-node{color:var(--rose);border-color:#c8326a25;background:#c8326a07}.step-3 .step-node{color:#fff;background:var(--ink);border-color:var(--ink)}.is-current .step-node{box-shadow:0 0 0 5px #6a4fb80d}.is-current .step-copy strong{color:var(--blue)}.step-copy strong{display:block;font-size:13px;font-weight:600;line-height:1.4;transition:color .6s}.step-copy p{font:400 10px/1.7 var(--ui);color:var(--slate);margin-top:3px}.step-tag{font:500 8px var(--ui);padding:4px 6px;border-radius:4px;background:var(--bg);border:1px solid var(--line);color:var(--slate);white-space:nowrap}.step-1 .step-tag{width:27px;height:27px;border-radius:50%;padding:0;display:grid;place-items:center;background:#6a4fb80a;border:0;color:var(--violet)}.proof-link{display:flex;align-items:center;gap:3px;font:500 9px var(--ui);background:none;color:var(--blue);text-decoration:underline;text-underline-offset:3px;min-height:36px;padding:0}.proof-link .ico{width:12px;height:12px}.demo-outcome{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;border-top:1px solid #eef0f4;padding-top:12px}.demo-outcome>span{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}.demo-outcome i{height:6px;width:6px;border-radius:50%;background:var(--violet)}.replay{display:flex;align-items:center;gap:5px;background:none;padding:0;min-height:36px;font:500 9px var(--ui);color:var(--slate)}.replay .ico{width:12px;height:12px}.demo-caption{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:11px;font:400 9px/1.6 var(--ui);color:var(--slate)}.motion-control{display:inline-flex;align-items:center;gap:6px;background:none;color:inherit;font:400 9px var(--ui);min-height:32px;padding:0}.motion-control .ico{height:12px;width:12px}.motion-control:hover{text-decoration:underline;text-underline-offset:3px}
/* Product headlines take the available width. The demonstration fills the right side. */
.section-heading{margin-bottom:40px}.section-heading h2{font-size:clamp(33px,3.65vw,53px);line-height:1.1;letter-spacing:-.05em;font-weight:500;margin-top:20px}.section-heading>p{font-size:15px;line-height:1.8;color:var(--slate);margin-top:18px;max-width:750px}.section-heading.horizontal{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}.horizontal .text-link{white-space:nowrap}.product-card{border:1px solid var(--line);border-radius:18px;background:#fff;position:relative;overflow:hidden;padding:32px 36px 0}.product-card+.product-card{margin-top:26px}.product-title-row{display:flex;align-items:center;justify-content:space-between;gap:20px}.product-name{font-size:26px;font-weight:650;letter-spacing:-.055em;line-height:1.3}.product-audience{font:600 9px var(--ui);color:var(--blue);letter-spacing:.13em}.onit-card .product-audience{color:var(--rose)}.product-card>h3{font-size:clamp(24px,2.3vw,33px);line-height:1.2;letter-spacing:-.043em;font-weight:450;margin-top:14px}.product-inner{display:grid;grid-template-columns:.92fr 1.2fr;align-items:center;gap:50px;margin-block:28px 30px}.product-copy>p{font-size:14px;line-height:1.85;color:var(--slate)}.product-benefits{display:grid;gap:11px;margin-top:22px}.product-benefits span{display:flex;align-items:center;gap:10px;font-size:12px}.product-benefits .ico{width:15px;height:15px;color:var(--blue)}.onit-card .product-benefits .ico{color:var(--rose)}.product-copy>.text-link{margin-top:22px}.product-preview{min-width:0;background:#f3f4f7;border:1px solid #10193508;border-radius:12px;overflow:hidden;padding:20px 20px 0;height:286px;position:relative}.product-lifecycle{margin-inline:-36px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);background:var(--bg)}.product-lifecycle>span{display:flex;align-items:center;gap:10px;padding:20px 17px;font-size:11px;border-right:1px solid var(--line);min-width:0;line-height:1.5}.product-lifecycle>span:last-child{border:0}.product-lifecycle small{font:500 8px var(--ui);color:var(--blue)}.onit-card .product-lifecycle small{color:var(--rose)}.product-lifecycle .ico{margin-left:auto;width:13px;height:13px;color:var(--slate)}
.navio-mock{border:1px solid #dfe1e8;border-radius:10px;background:#fff;overflow:hidden;font-family:var(--ui);box-shadow:0 9px 24px -20px #10193550}.mock-bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line)}.mock-bar b{font-size:11px}.mock-bar small{font-size:8px;color:var(--slate);margin-left:auto}.app-symbol{color:var(--blue)}.app-symbol .ico{width:14px;height:14px}.mock-work{padding:19px 18px 14px}.mock-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.mock-heading small{font-size:7px;letter-spacing:.12em;color:var(--slate)}.mock-heading h4{font:500 16px var(--font);letter-spacing:-.035em;margin-top:5px}.status{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:5px 7px;border-radius:4px;font:500 8px/1.5 var(--ui)}.status .ico{width:11px;height:11px}.table-head,.table-row{display:grid;grid-template-columns:minmax(0,1fr) 46px 102px;gap:12px;align-items:center}.table-head{font-size:7px;letter-spacing:.04em;color:var(--slate);padding-bottom:8px}.table-row{padding-block:12px;font-size:10px;border-top:1px solid #eef0f4}.table-row>span:first-child{display:flex;align-items:center;gap:6px;min-width:0}.table-row .ico{width:12px;height:12px;color:var(--slate)}.table-row>span:nth-child(2){color:var(--slate);font-size:9px}.mock-note{display:flex;align-items:center;gap:7px;margin-top:14px;font:400 8px var(--ui);color:var(--slate)}.mock-note .ico{width:13px;height:13px;color:var(--violet)}.onit-mock{height:100%;position:relative;display:flex;align-items:flex-start;justify-content:center;padding-left:128px;padding-top:10px}.phone{width:222px;min-height:320px;border:5px solid #fff;border-radius:27px 27px 0 0;background:#fafafb;box-shadow:0 0 0 1px #dee0e8,0 10px 30px #1019350f;position:relative;font-family:var(--ui);overflow:hidden}.phone-status{padding:8px 12px;display:flex;justify-content:space-between;font-size:7px}.phone-head{display:flex;align-items:center;justify-content:space-between;padding:12px 13px 2px;font-size:20px;font-weight:600;letter-spacing:-.05em}.phone-head .ico{width:14px;height:14px}.phone-sub{font-size:8px;padding-inline:13px;color:var(--slate)}.phone-badges{display:flex;justify-content:space-between;gap:6px;padding:12px 12px 10px;font-size:7px}.phone-badges span{border:1px solid var(--line);padding:3px 8px;border-radius:99px}.phone-badges .active{color:var(--rose);background:#c8326a07;border-color:#c8326a20}.phone-task{margin:0 10px 8px;padding:11px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}.phone-task strong{font-size:10px;font-weight:500;display:block}.phone-task small{font-size:8px;display:block;color:var(--slate);margin-top:4px}.phone-task .status{font-size:7px;padding:3px 5px;margin-top:8px}.phone-mic{display:grid;place-items:center;width:38px;height:38px;background:var(--ink);color:#fff;border-radius:50%;margin:14px auto}.phone-mic .ico{width:17px;height:17px}.voice-note{width:225px;position:absolute;left:5px;top:40px;z-index:2;border:1px solid #e1dce9;background:#fff;border-radius:13px 13px 13px 3px;padding:18px;box-shadow:0 12px 24px -20px #10193580}.voice-note>span{display:flex;align-items:center;gap:6px;font:600 8px var(--ui);letter-spacing:.1em;color:var(--rose)}.voice-note>span .ico{height:13px;width:13px}.voice-note p{font-size:14px;line-height:1.6;margin-top:12px;letter-spacing:-.018em}.voice-note-wave{display:flex;align-items:center;gap:4px;height:32px;margin-top:14px;opacity:.55}.voice-note-wave i{width:2px;background:var(--rose)}
/* Follow-through explained without another wall of cards. */
.how{padding-top:0}.how-heading{border-top:1px solid var(--line);padding-top:34px;margin-bottom:32px;display:flex;align-items:center;justify-content:space-between;gap:25px}.how-heading h2{font-size:33px;font-weight:450;letter-spacing:-.045em}.how-heading p{color:var(--slate);font-size:13px}.loop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:33px}.loop-number{display:block;font:500 10px var(--ui);color:var(--blue);border-bottom:1px solid var(--line);padding-bottom:17px;margin-bottom:19px}.loop-item:nth-child(2) .loop-number{color:var(--violet)}.loop-item:nth-child(3) .loop-number{color:var(--rose)}.loop-item h3{font-size:17px;font-weight:500;letter-spacing:-.023em}.loop-item p{font-size:12px;line-height:1.9;color:var(--slate);margin-top:10px}
/* Slow turns. Long reading time. Explicit pause and keyboard access. */
.control{background:var(--ink);color:#fff}.control-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:45px;margin-bottom:40px}.control .eyebrow{color:#c5c9d7}.control h2{font-size:clamp(34px,3.8vw,55px);font-weight:450;letter-spacing:-.052em;line-height:1.1;margin-top:22px}.control-heading>p{font-size:14px;line-height:1.85;color:#c5c9d7;max-width:320px}.control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.flip-card{perspective:1100px;min-width:0}.flip-stage{position:relative;min-height:270px;transform-style:preserve-3d;transition:transform .95s cubic-bezier(.3,.1,.2,1)}.flip-stage.flipped{transform:rotateY(180deg)}.flip-face{position:absolute;inset:0;padding:25px;border:1px solid #fff2;border-radius:14px;background:#fff;color:var(--ink);backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column}.flip-back{transform:rotateY(180deg);background:#eeedf3}.flip-label{display:flex;align-items:center;gap:8px;font:600 8px var(--ui);letter-spacing:.13em;color:var(--slate)}.flip-label>.ico{width:14px;height:14px;color:var(--blue)}.flip-card:nth-child(2) .flip-label>.ico{color:var(--rose)}.flip-card:nth-child(3) .flip-label>.ico{color:var(--violet)}.flip-face h3{font-size:22px;line-height:1.25;letter-spacing:-.039em;font-weight:500;margin-top:20px}.flip-item{margin-top:21px;border-top:1px solid var(--line);padding-top:15px}.flip-item strong{font-size:12px;font-weight:600;display:block}.flip-item p{font-size:11px;line-height:1.7;color:var(--slate);margin-top:5px}.flip-action{display:flex;align-items:center;justify-content:space-between;font:500 10px var(--ui);padding:8px 0 0;background:none;min-height:38px;margin-top:auto;text-align:left}.flip-action .ico{width:14px;height:14px}.flip-back>p:last-child{font-size:13px;line-height:1.85;color:var(--slate);margin-top:18px}.flip-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 3px 0;font:400 8px var(--ui);color:#c5c9d7}.flip-footer button{display:flex;align-items:center;gap:6px;background:none;color:#fff;font:500 9px var(--ui);min-height:34px;padding:0}.flip-footer .ico{width:13px;height:13px}.control-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:27px;border-top:1px solid #ffffff20;padding-top:21px;color:#c5c9d7;font:400 10px var(--ui)}.control-bottom>span{display:flex;align-items:center;gap:8px}.control-bottom>.motion-control{font-size:10px}.control-bottom .ico{width:14px;height:14px}
/* Industries and company story. */
.industry-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:45px}.industry-tile{display:flex;align-items:center;gap:17px;border-top:1px solid var(--line);padding:25px 0;min-height:99px;transition:color .2s}.industry-tile:nth-last-child(-n+2){border-bottom:1px solid var(--line)}.industry-index{font:400 9px var(--ui);color:var(--slate);align-self:flex-start;margin-top:7px}.industry-tile strong{display:block;font-size:21px;font-weight:500;letter-spacing:-.035em}.industry-tile small{font-size:12px;line-height:1.7;color:var(--slate);display:block;margin-top:6px}.industry-tile>.ico{width:17px;height:17px;margin-left:auto;flex:none;transition:transform .3s}.industry-tile:hover{color:var(--blue)}.industry-tile:hover>.ico{transform:translate(3px,-3px)}.story{padding-top:0}.story-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.story-visual{position:relative;isolation:isolate;overflow:hidden;min-height:375px;border:1px solid var(--line);border-radius:15px;background:#f1f1f2;display:flex;flex-direction:column;align-items:center;justify-content:center}.story-threads{inset:0;width:100%;height:100%;opacity:.8;transform:scale(1.1)}.story-visual-label{position:absolute;top:26px;left:26px;color:var(--slate);font:500 8px var(--ui);letter-spacing:.13em}.name-equation{display:flex;align-items:center;gap:18px;font-size:55px;line-height:1.1;letter-spacing:-.055em;z-index:1;background:#f1f1f2;padding:5px 20px}.name-equation em{font-size:31px;font-weight:300;font-style:normal;color:var(--slate)}.name-equation span:last-child{color:var(--slate)}.name-sub{font-size:11px;line-height:1.7;margin-top:13px;background:#f1f1f2;color:var(--slate);z-index:1}.story-wordmark{padding-top:28px;opacity:.9}.story-wordmark img{width:127px}.string-labels{display:flex;justify-content:space-between;position:absolute;left:25px;right:25px;bottom:23px;font:400 8px var(--ui);color:var(--slate)}.story-copy h2{font-size:46px;line-height:1.08;font-weight:450;letter-spacing:-.05em;margin-top:22px}.story-copy>p:not(.eyebrow){font-size:14px;line-height:1.9;color:var(--slate);margin-top:18px}.story-copy>.text-link{margin-top:16px}.cta-section{padding-bottom:76px}.cta-wrap{border-top:1px solid var(--line);padding-top:48px;display:flex;align-items:center;justify-content:space-between;gap:40px}.cta-wrap h2{font-size:37px;font-weight:450;line-height:1.14;letter-spacing:-.047em;margin-top:20px}.cta-wrap p:not(.eyebrow){font-size:13px;line-height:1.8;color:var(--slate);margin-top:16px}.cta-wrap>.button{flex:none;min-width:157px}.site-footer{padding-block:33px 24px;border-top:1px solid var(--line)}.footer-main{display:flex;align-items:center;justify-content:space-between;gap:35px}.footer-brand{display:flex;gap:25px;align-items:center}.footer-brand p{font-size:11px;color:var(--slate);border-left:1px solid var(--thread);padding-left:25px}.footer-links{display:flex;gap:32px;font-size:12px;color:var(--slate)}.footer-links a{min-height:44px;display:flex;align-items:center}.footer-links a:hover{color:var(--blue)}.footer-meta{display:flex;justify-content:space-between;gap:24px;margin-top:21px;font:400 8px/1.8 var(--ui);color:var(--slate)}
/* Connected pages retain the same visual rhythm. */
.page-hero{padding-block:150px 35px}.breadcrumb{display:flex;align-items:center;gap:10px;width:fit-content;font-size:10px;color:var(--slate);min-height:36px;margin-bottom:35px}.breadcrumb .ico{width:12px;height:12px}.page-hero h1{font-size:clamp(40px,5vw,71px);font-weight:450;line-height:1.08;letter-spacing:-.06em;max-width:1040px;margin-top:25px;text-wrap:balance}.page-intro{font-size:17px;line-height:1.8;color:var(--slate);max-width:760px;margin-top:24px}.page-hero .button{margin-top:26px}.page-hero+.products{padding-top:34px}.page-hero+.section{padding-top:40px}.product-page-hero{padding-block:150px 80px;overflow:clip}.product-page-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.product-page-grid h1{font-size:clamp(39px,4.5vw,65px);font-weight:450;line-height:1.07;letter-spacing:-.058em;margin-top:23px;text-wrap:balance}.product-page-grid .page-intro{font-size:15px;line-height:1.85;margin-top:23px}.product-page-grid .button{margin-top:27px}.page-aside{font-size:10px;line-height:1.7;color:var(--slate);margin-top:19px}.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px}.detail-grid h3{font-size:23px;line-height:1.3;letter-spacing:-.036em;font-weight:500}.detail-grid p{font-size:14px;line-height:1.85;color:var(--slate);margin-top:14px}.wide-product-demo{margin:50px auto 0;padding:30px;background:#f0f1f4;border:1px solid var(--line);border-radius:16px;max-width:1000px}.wide-product-demo .navio-mock{max-width:800px;margin:auto}.wide-product-demo .onit-mock{max-width:650px;height:370px;overflow:hidden;margin:auto}.wide-product-demo .demo-caption{margin-top:20px}.product-explainer{padding-top:0}.explainer-line{display:grid;grid-template-columns:1fr 1fr;gap:65px;padding-top:30px;border-top:1px solid var(--line)}.explainer-line h2{font-size:37px;font-weight:450;line-height:1.16;letter-spacing:-.046em}.explainer-line p{font-size:15px;line-height:1.9;color:var(--slate)}.industry-index-section .small-note{margin-top:28px;max-width:720px}.industry-detail .problem-row{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center;padding-bottom:40px}.problem-row h2{font-size:36px;font-weight:450;line-height:1.14;letter-spacing:-.045em;margin-top:22px}.problem-row>p{font-size:16px;line-height:1.85;color:var(--slate)}.industry-example{display:grid;grid-template-columns:.9fr 1.1fr;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}.example-context{padding:35px;background:#f0f0f3}.example-context h3{font-size:30px;line-height:1.2;font-weight:450;letter-spacing:-.045em;margin-top:22px}.example-context dl{margin-block:25px}.example-context dt{color:var(--slate);font-size:11px;margin-top:17px}.example-context dd{margin:6px 0 0;font-size:13px;line-height:1.6}.example-steps{list-style:none;margin:0;padding:20px 35px}.example-steps li{display:flex;align-items:center;gap:20px;min-height:80px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.8;padding-block:15px}.example-steps li:last-child{border:0}.example-steps span{font:500 10px var(--ui);color:var(--blue)}.benefit-block{padding:45px 0 25px}.benefit-block h2{font-size:clamp(26px,2.7vw,37px);font-weight:450;line-height:1.4;letter-spacing:-.035em;margin-top:22px;max-width:1080px}.journey{margin-top:85px}.journey-row{display:grid;grid-template-columns:48px 1fr 1.15fr;gap:27px;border-top:1px solid var(--line);padding-block:33px;align-items:start}.journey-index{font:400 12px var(--ui);color:var(--blue);margin-top:2px}.journey-row h3{font-size:27px;line-height:1.2;letter-spacing:-.037em;font-weight:450;margin-top:17px}.journey-row>p{font-size:14px;line-height:1.9;color:var(--slate)}.founder-note{display:flex;align-items:center;gap:24px;border-block:1px solid var(--line);padding-block:30px;margin-top:22px}.founder-monogram{width:70px;height:70px;display:grid;place-items:center;border-radius:50%;background:#6a4fb80e;color:var(--violet);font-size:21px;letter-spacing:-.035em;flex:none}.founder-note h3{font-size:22px;font-weight:500;letter-spacing:-.025em}.founder-note p{font-size:12px;color:var(--slate);margin-top:5px}.founder-note small{display:block;max-width:680px;font-size:10px;color:var(--slate);line-height:1.8;margin-top:10px}.beliefs{max-width:790px;margin-top:65px}.beliefs h2{font-size:42px;font-weight:450;letter-spacing:-.04em}.beliefs p{font-size:16px;line-height:1.9;color:var(--slate);margin-top:18px}.beliefs strong{display:block;font-size:18px;font-weight:500;color:var(--blue);margin-top:25px}
/* Contact is honest: prepare an enquiry, never pretend to send one. */
.contact-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:80px}.contact-aside h2{font-size:39px;line-height:1.14;font-weight:450;letter-spacing:-.046em;margin-top:21px}.contact-aside>p:not(.eyebrow){font-size:14px;line-height:1.9;color:var(--slate);margin-top:21px}.contact-aside ol{padding-left:18px;margin-block:28px}.contact-aside li{font-size:12px;line-height:1.9;padding:8px 0 8px 5px}.contact-aside .contact-note{font-size:12px!important;padding-top:20px;border-top:1px solid var(--line)}.contact-form{background:#fff;padding:32px;border:1px solid var(--line);border-radius:16px}.contact-form legend,.contact-form label{font-size:12px;font-weight:500;line-height:1.7}.contact-form fieldset{margin-bottom:24px}.product-choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.product-choices label{display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--line);border-radius:99px;cursor:pointer;min-height:43px;font-weight:400;font-size:11px}.product-choices label.selected{color:var(--blue);border-color:#2364a850;background:#2364a806}.product-choices input{width:13px;height:13px;margin:0;accent-color:var(--blue)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.contact-form input:not([type=radio]),.contact-form textarea{display:block;width:100%;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font-size:13px;font-weight:400;padding:13px;margin-top:8px;line-height:1.6;min-height:47px}.contact-form textarea{resize:vertical;min-height:130px}.contact-form>label{display:block;margin-top:20px}.form-disclosure{font:400 10px/1.8 var(--ui);color:var(--slate);margin-block:19px}.draft-result{padding-top:27px;margin-top:27px;border-top:1px solid var(--line)}.draft-result h3{font-size:18px;font-weight:500;letter-spacing:-.025em}.draft-result textarea{min-height:260px}.draft-result .text-link{margin-top:10px;font-size:12px}.draft-result .small-note{font-size:10px}
/* Accessible sample interactions. */
.detail-dialog{border:1px solid var(--line);border-radius:17px;padding:0;width:550px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 40px);background:#fff;color:var(--ink);box-shadow:0 30px 90px #10193535}.detail-dialog::backdrop{background:#10193585;backdrop-filter:blur(4px)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 25px;border-bottom:1px solid var(--line)}.modal-head p{font:500 9px var(--ui);letter-spacing:.12em;color:var(--slate)}.modal-close{display:grid;place-items:center;width:38px;height:38px;background:var(--bg);border:1px solid var(--line);border-radius:50%}.modal-close .ico{width:17px;height:17px}.modal-body{padding:27px}.modal-body h2{font-size:31px;line-height:1.17;font-weight:450;letter-spacing:-.042em}.modal-body>p{font-size:13px;line-height:1.85;color:var(--slate);margin-top:16px}.evidence-doc{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:22px;margin-top:24px}.evidence-doc>.ico{color:var(--blue);margin-bottom:12px}.evidence-doc h3{font:600 13px var(--ui);margin-bottom:14px}.evidence-doc p{font:400 10px/1.8 var(--ui);color:var(--slate);margin-top:15px}.doc-rule{height:4px;background:var(--thread);width:92%;margin-top:9px;border-radius:2px}.doc-rule.short{width:72%}.evidence-details{display:grid;grid-template-columns:110px 1fr;gap:10px;margin-block:24px;font:400 11px/1.8 var(--ui)}.evidence-details dt{color:var(--slate)}.evidence-details dd{margin:0;overflow-wrap:anywhere}.modal-body .modal-note{font:400 10px/1.8 var(--ui);border-top:1px solid var(--line);padding-top:16px;margin-top:25px}.modal-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}.modal-actions .button{font-size:12px;min-height:44px;padding-inline:18px}.sample-result{border:1px solid #6a4fb825;border-radius:7px;padding:13px;background:#6a4fb807;color:var(--violet)!important}
/* No scroll-jacking, no rapid cycling; motion is decoration, not a requirement. */
@keyframes thread-travel{to{stroke-dashoffset:-764}}@keyframes voice-breathe{0%,100%{transform:scaleY(.65)}50%{transform:scaleY(1)}}@keyframes menu-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
/* paused = the finished, still state (same as reduced-motion): entrance animations are removed so nothing is frozen invisible, and looping/decorative motion simply stops */
[data-motion=paused] *,[data-motion=paused] *:before,[data-motion=paused] *:after{animation:none!important}
@media(min-width:1600px){.hero{padding-top:181px;padding-bottom:95px}.hero-layout{gap:87px}.hero-copy h1{font-size:85px}.section{padding-block:100px}.how,.story{padding-top:0}}
@media(max-width:1150px){:root{--gutter:40px}.hero-layout{gap:38px}.hero-copy h1{font-size:clamp(49px,5.3vw,65px)}.hero-copy .intro{font-size:15px}.hero-subhead{font-size:19px}.hero-actions{gap:18px}.hero-actions .button{padding-inline:19px;font-size:12px;gap:18px}.hero-actions .text-link{font-size:12px}.demo-body{padding:18px}.demo-top{padding-inline:18px}.demo-toolbar>.sample-label{display:none}.source-meta{font-size:8px}.source-quote{font-size:13px}.step-copy p{font-size:9px}.step-tag{font-size:7px}.demo-outcome>span{font-size:12px}.demo-caption{font-size:8px}.product-inner{gap:30px;grid-template-columns:.9fr 1.15fr}.product-copy>p{font-size:13px}.product-preview{padding:17px 14px 0;height:278px}.mock-bar{padding-inline:12px}.mock-work{padding-inline:12px}.mock-heading h4{font-size:14px}.mock-heading>.status{display:none}.table-head,.table-row{grid-template-columns:minmax(0,1fr) 35px 90px;gap:8px}.table-row{font-size:9px}.table-row .status{font-size:7px}.mock-bar small{font-size:7px}.voice-note{width:194px;left:0;padding:15px}.voice-note p{font-size:12px}.onit-mock{padding-left:105px}.phone{width:202px}.product-lifecycle>span{font-size:10px;padding-inline:14px;gap:8px}.control-grid{gap:18px}.flip-face{padding:22px}.flip-face h3{font-size:20px}.flip-stage{min-height:277px}.flip-back>p:last-child{font-size:12px}.control-heading>p{max-width:280px;font-size:13px}.story-layout{gap:48px}.story-copy h2{font-size:40px}.cta-wrap h2{font-size:32px}.contact-grid{gap:45px}.product-page-grid{gap:38px}.product-page-grid h1{font-size:50px}.product-page-grid .page-intro{font-size:14px}}
@media(max-width:900px){:root{--gutter:30px}.hero{padding-top:145px;padding-bottom:55px}.hero-layout{grid-template-columns:1fr;gap:41px;max-width:670px;margin:auto}.hero-copy h1{font-size:78px;white-space:normal;line-height:1.015}.hero-copy .intro{max-width:540px;font-size:16px}.hero-subhead{font-size:22px}.hero-art{max-width:620px;width:100%;margin:auto}.hero-copy .eyebrow{font-size:10px}.hero-copy h1 .delivered{margin-top:5px}.hero-actions{gap:25px}.hero-actions .button{font-size:13px}.hero-actions .text-link{font-size:13px}.demo-body{padding:22px}.demo-top{padding:19px 22px}.demo-toolbar>.sample-label{display:block}.source-meta{font-size:10px}.source-quote{font-size:16px}.step-copy strong{font-size:14px}.step-copy p{font-size:11px}.flow-step{min-height:64px}.step-tag{font-size:9px}.proof-link{font-size:10px}.demo-outcome>span{font-size:14px}.demo-caption{font-size:9px}.section{padding-block:68px}.products .section-heading h2{font-size:41px}.product-card{padding:27px 28px 0}.product-inner{grid-template-columns:1fr;gap:25px;margin-top:22px}.product-copy>p{max-width:none;font-size:14px}.product-benefits{display:flex;flex-wrap:wrap;gap:13px 25px}.product-benefits span{font-size:12px}.product-copy>.text-link{margin-top:14px}.product-preview{padding:22px 30px 0;height:302px}.mock-work{padding:22px}.mock-bar{padding-inline:20px}.mock-heading h4{font-size:19px}.mock-heading>.status{display:inline-flex}.table-head,.table-row{grid-template-columns:minmax(0,1fr) 65px 130px;gap:12px}.table-row{font-size:12px}.table-row .status{font-size:9px}.table-head{font-size:8px}.table-row>span:nth-child(2){font-size:10px}.mock-bar small{font-size:9px}.mock-note{font-size:10px}.onit-mock{padding-left:132px}.voice-note{width:250px;left:40px;top:45px;padding:21px}.voice-note p{font-size:16px}.phone{width:238px}.phone-head{font-size:23px}.phone-task strong{font-size:11px}.phone-task small{font-size:9px}.phone-badges{font-size:8px}.product-lifecycle{margin-inline:-28px}.product-lifecycle>span{font-size:10px;padding:17px 12px}.product-lifecycle .ico{width:11px}.how{padding-top:0}.how-heading{display:block}.how-heading p{margin-top:12px}.loop-grid{gap:24px;grid-template-columns:1fr 1fr}.loop-item p{font-size:13px}.control-heading{display:block}.control-heading>p{max-width:580px;font-size:14px;margin-top:20px}.control-grid{gap:16px;grid-template-columns:1fr}.flip-stage{min-height:244px}.flip-face{padding:26px}.flip-face h3{font-size:27px}.flip-item{margin-top:17px}.flip-item strong{font-size:14px}.flip-item p{font-size:12px}.flip-back>p:last-child{font-size:15px;max-width:580px}.flip-action{font-size:12px}.flip-footer{font-size:9px;padding-bottom:10px}.flip-footer button{font-size:10px}.industry-grid{column-gap:27px}.industry-tile strong{font-size:19px}.industry-tile small{font-size:11px}.story{padding-top:0}.story-layout{gap:35px;grid-template-columns:1fr}.story-copy{order:-1}.story-copy h2{font-size:43px}.story-copy>p:not(.eyebrow){font-size:15px}.story-visual{min-height:350px}.cta-wrap{display:block}.cta-wrap h2{font-size:39px}.cta-wrap>.button{margin-top:24px}.footer-brand{display:block}.footer-brand p{padding:0;border:0;margin-top:13px}.product-page-grid{grid-template-columns:1fr;gap:45px;max-width:680px;margin:auto}.product-page-grid h1{font-size:63px}.product-page-grid .page-intro{font-size:16px}.product-page-grid .hero-art{max-width:none}.product-page-grid .breadcrumb{margin-bottom:25px}.detail-grid{gap:25px}.detail-grid h3{font-size:20px}.detail-grid p{font-size:13px}.explainer-line{gap:35px}.explainer-line h2{font-size:31px}.explainer-line p{font-size:14px}.industry-detail .problem-row{gap:34px}.problem-row h2{font-size:30px}.problem-row>p{font-size:14px}.example-context{padding:27px}.example-steps{padding:13px 27px}.example-context h3{font-size:27px}.example-steps li{font-size:13px;gap:15px}.journey-row{grid-template-columns:30px .95fr 1.05fr;gap:20px}.journey-row h3{font-size:23px}.journey-row>p{font-size:13px}.contact-grid{grid-template-columns:1fr;gap:35px}.contact-aside{max-width:680px}.contact-aside ol{margin-block:20px}.contact-aside .contact-note{max-width:550px}.contact-form{max-width:750px}.page-hero{padding-top:135px}.page-hero h1{font-size:58px}.page-intro{font-size:16px}}
@media(max-width:680px){:root{--gutter:24px}.hero{padding-top:120px;padding-bottom:45px}.hero-copy h1{font-size:clamp(39px,10vw,66px);white-space:nowrap;margin-top:26px}.hero-subhead{font-size:19px;margin-top:29px}.hero-copy .intro{font-size:14px;line-height:1.85;margin-top:12px}.hero-copy .eyebrow{font-size:8px;letter-spacing:.13em}.hero-actions{gap:18px;margin-top:23px}.hero-actions .button{min-height:47px;font-size:12px;gap:15px;padding-inline:18px}.hero-actions .text-link{font-size:11px;gap:7px}.hero-footnote{font-size:9px;line-height:1.8;margin-top:20px}.hero-layout{gap:32px}.threads{inset:-40px -17px;width:calc(100% + 34px);height:calc(100% + 70px)}.product-demo{border-radius:13px}.demo-body{padding:16px}.demo-top{padding:16px}.demo-top strong{font-size:13px}.micro{font-size:7px}.demo-top{gap:9px}.demo-toolbar{gap:8px;margin-bottom:14px}.demo-toolbar>.sample-label{display:none}.demo-tabs{width:100%}.demo-tabs button{flex:1;font-size:10px;min-height:38px;gap:6px;padding-inline:7px}.demo-tabs .ico{width:13px;height:13px}.source-card{padding:13px;min-height:112px}.source-meta{font-size:8px;gap:6px;flex-wrap:wrap}.source-meta small{font-size:7px}.source-quote{font-size:13px;margin-top:14px}.flow-heading{font-size:7px;letter-spacing:0;gap:8px;margin-top:18px}.flow-heading span:first-child{letter-spacing:.04em}.flow-step{grid-template-columns:25px minmax(0,1fr) 55px;gap:8px;min-height:62px}.step-node{width:25px;height:25px}.flow-step:after{left:12px!important}.step-copy strong{font-size:12px}.step-copy p{font-size:9px;line-height:1.65}.step-tag{font-size:6px;padding:4px;justify-self:end}.step-1 .step-tag{width:24px;height:24px;font-size:7px}.proof-link{font-size:8px;line-height:1.6;justify-content:flex-end;text-align:right}.proof-link .ico{width:10px;height:10px}.demo-outcome>span{font-size:11px;gap:6px}.replay{font-size:8px;gap:4px}.replay .ico{width:11px;height:11px}.demo-caption{font-size:7px;gap:9px;margin-top:7px}.motion-control{font-size:8px;min-height:33px;gap:4px;white-space:nowrap}.section{padding-block:56px}.section-heading{margin-bottom:28px}.section-heading h2,.products .section-heading h2{font-size:36px;line-height:1.13;margin-top:20px}.section-heading>p{font-size:14px;line-height:1.8;margin-top:15px}.product-card{padding:23px 20px 0;border-radius:13px}.product-title-row{gap:12px;flex-wrap:wrap;align-items:center}.product-name{font-size:25px}.product-audience{font-size:7px;letter-spacing:.085em;max-width:150px;text-align:right}.product-card>h3{font-size:26px;line-height:1.22;margin-top:16px}.product-inner{gap:21px;margin-top:18px;margin-bottom:20px}.product-copy>p{font-size:13px;line-height:1.85}.product-benefits{display:grid;gap:10px;margin-top:19px}.product-benefits span{font-size:11px}.product-copy>.text-link{font-size:12px;margin-top:16px}.product-preview{margin-inline:-7px;padding:16px 9px 0;height:257px;border-radius:9px}.mock-bar{padding:11px 10px;gap:5px}.mock-bar b{font-size:9px}.mock-bar small{font-size:6px;letter-spacing:-.025em}.app-symbol .ico{width:12px;height:12px}.mock-work{padding:16px 10px}.mock-heading{margin-bottom:17px}.mock-heading h4{font-size:13px}.mock-heading small{font-size:6px}.mock-heading>.status{display:none}.table-head,.table-row{grid-template-columns:minmax(0,1fr) 28px 71px;gap:5px}.table-head{font-size:6px}.table-row{font-size:8px;line-height:1.6;padding-block:12px}.table-row .ico{width:10px;height:10px;display:none}.table-row>span:nth-child(2){font-size:7px}.table-row .status{font-size:6px;padding:4px 3px}.mock-note{font-size:7px;gap:4px;line-height:1.6}.mock-note .ico{width:11px;height:11px}.onit-mock{padding-left:80px;padding-top:5px}.phone{width:182px;border-width:4px;border-radius:23px 23px 0 0;min-width:164px;min-height:306px}.phone-status{font-size:6px}.phone-head{font-size:18px;padding:9px 11px 3px}.phone-sub{font-size:7px;padding-inline:11px}.phone-badges{padding:10px 9px 8px;font-size:6px;gap:5px}.phone-badges span{padding-inline:6px}.phone-task{padding:10px 8px;margin-inline:7px}.phone-task strong{font-size:8px}.phone-task small{font-size:6px}.phone-task .status{font-size:6px}.voice-note{width:165px;left:0;top:42px;padding:12px;border-radius:11px 11px 11px 3px}.voice-note>span{font-size:6px;gap:4px}.voice-note>span .ico{width:10px;height:10px}.voice-note p{font-size:11px;line-height:1.65;margin-top:8px}.voice-note-wave{gap:3px;height:27px;margin-top:10px}.product-lifecycle{grid-template-columns:1fr 1fr;margin-inline:-20px}.product-lifecycle>span{font-size:9px;min-height:52px;line-height:1.55;padding:11px 10px;gap:7px}.product-lifecycle>span:nth-child(-n+2){border-bottom:1px solid var(--line)}.product-lifecycle>span:nth-child(2){border-right:0}.product-lifecycle .ico{display:none}.how{padding-top:0}.how-heading{padding-top:26px;margin-bottom:26px}.how-heading h2{font-size:31px}.how-heading p{font-size:12px;line-height:1.7}.loop-grid{gap:30px 24px}.loop-number{font-size:9px;padding-bottom:13px;margin-bottom:15px}.loop-item h3{font-size:16px;line-height:1.3}.loop-item p{font-size:12px;line-height:1.8;margin-top:9px}.control-heading{margin-bottom:27px}.control h2{font-size:39px;line-height:1.1}.control-heading>p{font-size:13px;margin-top:18px}.control-grid{gap:18px}.flip-stage{min-height:267px}.flip-face{padding:24px}.flip-face h3{font-size:24px}.flip-back>p:last-child{font-size:14px}.flip-label{font-size:8px;letter-spacing:.11em}.flip-item strong{font-size:13px}.flip-item p{font-size:11px}.flip-action{font-size:11px}.flip-footer{font-size:8px;gap:10px}.flip-footer button{font-size:9px}.control-bottom{font-size:9px;gap:10px;align-items:flex-start}.control-bottom>span{line-height:1.8;align-items:flex-start;max-width:210px}.control-bottom .motion-control{font-size:9px}.section-heading.horizontal{display:block}.horizontal .text-link{font-size:12px;margin-top:18px}.industry-grid{grid-template-columns:1fr}.industry-tile{padding-block:21px;min-height:96px;gap:14px}.industry-tile:nth-last-child(-n+2){border-bottom:0}.industry-tile:last-child{border-bottom:1px solid var(--line)}.industry-tile strong{font-size:22px}.industry-tile small{font-size:12px;line-height:1.7}.industry-index{font-size:8px}.story{padding-top:0}.story-copy h2{font-size:39px}.story-copy>p:not(.eyebrow){font-size:14px}.story-layout{gap:29px}.story-visual{min-height:310px}.story-visual-label{top:24px;left:21px;font-size:7px}.name-equation{font-size:46px;gap:13px;letter-spacing:-.065em;padding-inline:10px}.name-equation em{font-size:25px}.name-sub{font-size:9px}.story-wordmark{padding-top:24px}.story-wordmark img{width:116px}.string-labels{font-size:7px;left:21px;right:21px;gap:10px}.story-threads{inset:0;width:100%;height:100%}.story-copy>.text-link{font-size:12px}.cta-section{padding-bottom:50px}.cta-wrap{padding-top:36px}.cta-wrap h2{font-size:34px;line-height:1.18}.cta-wrap p:not(.eyebrow){font-size:13px;line-height:1.8}.footer-main{display:block}.footer-brand{display:flex;gap:20px;align-items:center}.footer-brand img{width:120px}.footer-brand p{font-size:9px;line-height:1.7;margin:0;max-width:120px;border-left:1px solid var(--line);padding-left:18px}.footer-links{margin-top:17px;gap:27px;font-size:12px}.footer-meta{flex-direction:column;gap:8px;font-size:8px;margin-top:12px}.page-hero{padding-top:117px;padding-bottom:26px}.breadcrumb{font-size:10px;margin-bottom:25px;gap:8px}.page-hero h1{font-size:42px;line-height:1.1;letter-spacing:-.052em;text-wrap:pretty;margin-top:21px}.page-intro{font-size:15px;line-height:1.85;margin-top:19px}.page-hero .button{font-size:13px}.page-hero+.section{padding-top:24px}.product-page-hero{padding-top:116px;padding-bottom:55px}.product-page-grid{gap:36px}.product-page-grid h1{font-size:44px;line-height:1.1;margin-top:20px}.product-page-grid .page-intro{font-size:14px;line-height:1.9}.product-page-grid .button{font-size:13px;margin-top:23px}.page-aside{font-size:10px}.detail-grid{grid-template-columns:1fr;gap:26px}.detail-grid h3{font-size:25px}.detail-grid p{font-size:14px}.wide-product-demo{padding:16px 13px;margin-top:33px}.wide-product-demo .onit-mock{height:299px;padding-left:72px}.wide-product-demo .voice-note{width:175px;top:52px}.wide-product-demo .phone{width:192px}.wide-product-demo .demo-caption{font-size:8px;line-height:1.8}.product-explainer{padding-top:0}.explainer-line{grid-template-columns:1fr;gap:21px}.explainer-line h2{font-size:32px}.explainer-line p{font-size:14px;line-height:1.9}.industry-detail .problem-row{grid-template-columns:1fr;gap:22px;padding-bottom:30px}.problem-row h2{font-size:32px}.problem-row>p{font-size:14px}.industry-example{grid-template-columns:1fr;border-radius:13px}.example-context{padding:25px}.example-context h3{font-size:29px;line-height:1.25;margin-top:17px}.example-context .sample-label{font-size:8px}.example-steps{padding:9px 25px}.example-steps li{font-size:13px;min-height:78px;gap:17px}.benefit-block{padding-top:35px}.benefit-block h2{font-size:26px;line-height:1.45;letter-spacing:-.035em}.journey{margin-top:55px}.journey-row{grid-template-columns:22px 1fr;gap:19px;padding-block:26px}.journey-row>p{grid-column:2;font-size:13px}.journey-row h3{font-size:25px;margin-top:15px}.journey-row .eyebrow{font-size:8px}.founder-note{gap:17px;align-items:flex-start}.founder-monogram{width:51px;height:51px;font-size:17px}.founder-note h3{font-size:21px}.founder-note p{font-size:11px;line-height:1.75}.founder-note small{font-size:9px;line-height:1.9}.beliefs{margin-top:45px}.beliefs h2{font-size:36px;line-height:1.15}.beliefs p{font-size:14px}.beliefs strong{font-size:17px}.contact-grid{gap:27px}.contact-aside h2{font-size:35px}.contact-aside>p:not(.eyebrow){font-size:14px}.contact-form{padding:23px 20px;border-radius:13px}.form-row{grid-template-columns:1fr;gap:19px}.product-choices{gap:7px}.product-choices label{padding-inline:10px;font-size:10px}.contact-form input:not([type=radio]),.contact-form textarea{font-size:16px;/* avoid iOS focus zoom */padding:12px}.contact-form>label{margin-top:20px}.contact-form .button{font-size:12px;width:100%}.contact-form legend,.contact-form label{font-size:12px}.form-disclosure{font-size:10px}.detail-dialog{max-width:calc(100vw - 28px);max-height:calc(100dvh - 28px)}.modal-head{padding:15px 20px}.modal-body{padding:24px 21px}.modal-body h2{font-size:28px}.modal-body>p{font-size:13px}.evidence-details{grid-template-columns:88px 1fr;font-size:10px;gap:11px}.evidence-doc{padding:18px}.modal-actions .button{font-size:11px;padding-inline:15px}}
@media(max-width:359px){:root{--gutter:18px}.hero-copy h1{font-size:38px}.hero-copy .eyebrow{font-size:7px;gap:9px}.hero-subhead{font-size:18px}.hero-actions{gap:8px}.hero-actions .button{font-size:11px;padding-inline:15px;gap:12px}.hero-actions .text-link{font-size:10px;gap:5px}.demo-body{padding:13px}.demo-top{padding-inline:13px}.demo-tabs button{font-size:9px;padding-inline:5px}.source-quote{font-size:12px}.source-meta{font-size:7px}.step-copy p{font-size:8px}.flow-heading{font-size:6px}.demo-outcome>span{font-size:10px}.demo-caption{font-size:6px}.motion-control{font-size:7px}.product-card{padding-inline:17px}.product-lifecycle{margin-inline:-17px}.product-audience{max-width:120px;font-size:6px}.product-card>h3{font-size:24px}.product-preview{margin-inline:-6px;padding-inline:7px}.mock-bar small{font-size:5px}.table-row{font-size:7px}.table-head,.table-row{grid-template-columns:minmax(0,1fr) 24px 65px;gap:4px}.voice-note{width:140px}.voice-note p{font-size:10px}.onit-mock{padding-left:66px}.phone{min-width:151px;width:164px}.section-heading h2,.products .section-heading h2{font-size:32px}.loop-grid{gap:25px 18px}.loop-item h3{font-size:15px}.loop-item p{font-size:11px}.control h2{font-size:35px}.flip-stage{min-height:287px}.flip-face{padding:23px}.flip-face h3{font-size:23px}.control-bottom>span{max-width:175px;font-size:8px}.name-equation{font-size:41px}.string-labels{font-size:6px;gap:8px}.page-hero h1,.product-page-grid h1{font-size:37px}.contact-form{padding-inline:17px}.product-choices label{font-size:9px;padding-inline:8px}.product-choices input{width:11px;height:11px}.modal-actions .button{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.button:hover{transform:none}}
@media print{.motion-control,.replay{display:none!important}.hero,.page-hero,.product-page-hero{padding-top:25px}.section{padding-block:35px}.product-card,.flip-card,.industry-example{break-inside:avoid}.control{print-color-adjust:exact}.flip-stage{transform:none!important}.flip-back{display:none}.threads{display:none}}

/* ============ HEADER: nuvena.co's own header, in this site's colours ============
   The wordmark sits by itself at the top left; scrolling, it glides into the menu strip and docks at its
   left end (App.js, Header). A soft highlight follows the pointer across the menu; menus open under their
   own button. Phones: the strip holds the call to action and a two-line menu button; the menu is a sheet. */
.hdr{position:fixed;z-index:60;top:calc(16px + env(safe-area-inset-top,0px));left:0;right:0;display:flex;justify-content:center;padding:0 16px;pointer-events:none}
.pill{pointer-events:auto;position:relative;display:flex;align-items:center;gap:22px;height:60px;padding:0 8px 0 12px;border-radius:99px;background:#ffffffe0;border:1px solid #10193514;box-shadow:0 10px 30px -18px #10193548;-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);transition:box-shadow .3s,background-color .3s}
.hdr.scrolled .pill,.hdr.menu-on .pill{background:#fffffff5;box-shadow:0 14px 34px -16px #10193557}
.pill-slot{flex:none;display:block;width:0;height:1px;margin-right:-22px}
.hdr::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:calc(-16px - env(safe-area-inset-top,0px));height:calc(100% + 16px + env(safe-area-inset-top,0px) + 22px);background:linear-gradient(var(--bg) 62%,#f7f7f500);opacity:0;transition:opacity .3s;pointer-events:none}
.hdr.scrolled::before{opacity:1}
.hdr.over-dark::before,.menu-open .hdr::before{opacity:0}
.hdr-logo{position:absolute;z-index:1;top:0;left:calc(max(0px,(100% - 1424px)/2) + var(--gutter) - 14px);height:60px;display:flex;align-items:center;padding:0 14px;pointer-events:auto;transform-origin:14px 50%}
.hdr-logo a{display:flex;align-items:center}
.hdr-logo img,.lg-sky-brand img{display:block;width:auto;height:14px}
.nav{position:relative;display:flex;gap:2px}
.nav-hl{position:absolute;left:0;top:50%;width:0;height:38px;margin-top:-19px;border-radius:99px;background:#1019350f;opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.3,.7,.2,1),width .35s cubic-bezier(.3,.7,.2,1),opacity .2s}
.nav-btn{position:relative;display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 12px;border:0;border-radius:99px;background:none;font:500 15px var(--font);color:var(--slate);white-space:nowrap;cursor:pointer;transition:color .2s}
.nav-btn:hover,.nav-btn[aria-expanded=true],.nav-btn[aria-current=page]{color:var(--ink)}
.car{width:14px;height:14px;stroke-width:2.2;opacity:.6;transition:transform .3s,opacity .3s}
[aria-expanded=true]>.car,.macc[open] summary .car{transform:rotate(180deg);opacity:1}
.act{display:flex;align-items:center;gap:10px;padding-left:12px;border-left:1px solid var(--line)}
.hdr-cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border-radius:99px;background:var(--ink);color:#fff;font-size:15px;font-weight:600;white-space:nowrap}
/* the call to action: a fine line in this site's three thread colours travels around it and glows */
@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}
.ring{position:relative;border:2px solid transparent;background:linear-gradient(var(--ink),var(--ink)) padding-box,conic-gradient(from var(--spin),#2364a82e 0turn,#2364a82e .5turn,var(--blue) .72turn,var(--violet) .86turn,var(--rose) .95turn,#2364a82e 1turn) border-box}
.ring:hover{background:linear-gradient(#1d2850,#1d2850) padding-box,conic-gradient(from var(--spin),#2364a82e 0turn,#2364a82e .5turn,var(--blue) .72turn,var(--violet) .86turn,var(--rose) .95turn,#2364a82e 1turn) border-box}
.ring::before{content:"";position:absolute;z-index:-1;inset:-3px;border-radius:inherit;background:conic-gradient(from var(--spin),transparent 0turn,transparent .7turn,#6a4fb873 .88turn,#c8326acc .97turn,transparent 1turn);filter:blur(7px);pointer-events:none}
@media(prefers-reduced-motion:no-preference){.ring,.ring::before{animation:ring-spin 3.6s linear 1 both}.ring:hover,.ring:hover::before{animation:ring-spin 3.6s linear infinite}}
@keyframes ring-spin{to{--spin:360deg}}
.burger{display:none;place-content:center;gap:5px;width:42px;height:42px;border:0;border-radius:50%;background:transparent;cursor:pointer}
.burger span{display:block;width:18px;height:2px;border-radius:1px;background:var(--ink);transition:transform .3s}
.menu-open .burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-open .burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* menus: one panel under each button */
.mm{position:absolute;z-index:2;top:calc(100% + 12px);width:min(400px,calc(100vw - 32px));pointer-events:auto;overflow:hidden;border-radius:22px;background:#fff;border:1px solid #10193514;box-shadow:0 34px 80px -30px #1019356b,0 2px 6px #1019350a;opacity:0;visibility:hidden;transform:translate(-50%,10px) scale(.985);transform-origin:50% 0;transition:opacity .22s,transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s .32s}
.mm.open{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .22s,transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s}
.mm-ind{width:min(360px,calc(100vw - 32px))}
.mm-list{display:grid;align-content:start;gap:2px;padding:14px}
.mm-ind .mm-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:4px}
.mm-kicker{grid-column:1/-1;margin:0;padding:6px 12px 8px;font:600 11px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mi{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:14px;transition:background-color .2s}
.mi:hover,.mi:focus-visible{background:var(--bg)}
.mi-ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#10193509;color:var(--ink);transition:background-color .25s,color .25s}
.mi-ico .ico{width:19px;height:19px}
.mi-ico.blue{background:#2364a812;color:var(--blue)}
.mi-ico.rose{background:#c8326a12;color:var(--rose)}
.mi:hover .mi-ico,.mi:focus-visible .mi-ico{background:var(--ink);color:#fff}
.mi-txt{min-width:0}
.mi-txt b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.mi-txt small{display:block;margin-top:1px;font-size:13px;line-height:1.4;color:var(--slate)}
.mm-ind .mi-txt b{font-size:14px}
.mm-ind .mi-txt small{font-size:12px}
.mm-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 22px;background:var(--bg);border-top:1px solid var(--line);font-size:13.5px;color:var(--slate)}
.mm-foot a,.macc-more a{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
.mm-foot .ico,.macc-more .ico{width:15px;height:15px;transition:transform .2s}
.mm-foot a:hover .ico,.macc-more a:hover .ico{transform:translateX(3px)}

/* phones and small tablets: the menu is a full sheet under the strip */
.msheet{position:fixed;inset:0;z-index:59;overflow-y:auto;overscroll-behavior:contain;padding:calc(92px + env(safe-area-inset-top,0px)) 16px calc(28px + env(safe-area-inset-bottom,0px));background:#fffffffa;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}
.menu-open .msheet{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s}
html.menu-open,html.menu-open body{overflow:hidden}
.msheet-in{max-width:560px;margin:0 auto}
.macc{border-bottom:1px solid var(--line)}
.macc summary,.macc-link{display:flex;align-items:center;justify-content:space-between;padding:18px 4px;font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--ink);list-style:none;cursor:pointer}
.macc summary::-webkit-details-marker{display:none}
.macc summary .car{width:20px;height:20px}
.macc-link{border-bottom:1px solid var(--line)}
.macc-link .ico{width:20px;height:20px;color:var(--slate)}
.macc-list{display:grid;gap:2px;padding:0 0 14px}
.macc-list .mi{padding:10px 6px}
.macc-more{margin:6px 0 0;padding:0 6px}
.m-cta-wrap{margin-top:22px}
.m-cta{width:100%;height:52px;font-size:16px}
@media(prefers-reduced-motion:no-preference){.menu-open .macc,.menu-open .macc-link,.menu-open .m-cta-wrap{animation:sheet-up .45s var(--ease) both}.menu-open .macc:nth-child(2){animation-delay:.04s}.menu-open .macc-link{animation-delay:.08s}.menu-open .m-cta-wrap{animation-delay:.12s}}
@keyframes sheet-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media(max-width:900px){
 .hdr{justify-content:flex-end;padding:0 var(--gutter)}
 .hdr-logo{left:calc(var(--gutter) - 14px)}
 .nav,.mm{display:none}
 .pill{padding:0 6px;gap:6px}
 .pill-slot{margin-right:-6px}
 .act{border-left:0;padding-left:0;gap:6px}
 .burger{display:grid}
}
@media(max-width:640px){
 .hdr{top:calc(12px + env(safe-area-inset-top,0px))}
 .pill,.hdr-logo{height:54px}
 .hdr-logo img,.lg-sky-brand img{height:12px}
 .act .hdr-cta{height:42px;padding:0 16px;font-size:14px}
 .msheet{padding-top:calc(84px + env(safe-area-inset-top,0px))}
}
@media print{.hdr,.msheet{display:none!important}}


/* ============ FIRST SCREEN: the hero and the customer strip fit one screen, on any device ============
   Words size with the screen's width and height; the product view is scaled to the room left (App.js, useFit). */
.fold{display:flex;flex-direction:column;height:100vh;height:100svh;min-height:500px;max-height:1400px}
.fold .hero{flex:1 1 0;min-height:0;display:flex;padding:calc(16px + 60px + clamp(14px,3.6vh,44px) + env(safe-area-inset-top,0px)) 0 clamp(12px,3vh,40px)}
.fold .hero>.container{flex:1;min-height:0;display:flex;width:100%}
.fold .hero-layout{flex:1;min-height:0;grid-template-rows:minmax(0,1fr)}
.fold .hero-copy h1{font-size:clamp(38px,min(5.45vw,9.4vh),96px);margin-top:clamp(10px,3.2vh,30px)}
.fold .hero-subhead{font-size:clamp(16px,min(1.45vw,2.4vh),24px);margin-top:clamp(10px,3.2vh,30px)}
.fold .hero-copy .intro{font-size:clamp(13px,min(1.12vw,1.85vh),18px);line-height:1.7;margin-top:clamp(6px,1.5vh,14px);max-width:30em}
.fold .hero-actions{margin-top:clamp(14px,3.3vh,32px)}
.fold .hero-footnote{margin-top:clamp(8px,2.4vh,24px)}
.fit-slot{align-self:stretch;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}
.fit-box{position:relative;flex:none}
.fit-inner{position:absolute;left:0;top:0;transform-origin:0 0}
.fit-slot.fit-off .fit-box{visibility:hidden}

@media(max-width:900px){
 .fold .hero{padding-top:calc(12px + 54px + clamp(12px,2.6vh,30px) + env(safe-area-inset-top,0px))}
 .fold .hero-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:clamp(14px,3vh,32px);width:100%;max-width:670px;margin:0 auto}
 .fold .hero-copy h1{font-size:clamp(32px,min(10vw,6.2vh),78px);margin-top:clamp(10px,2.2vh,24px)}
 .fold .hero-subhead{font-size:clamp(16px,min(4.6vw,2.5vh),22px);margin-top:clamp(8px,2.2vh,24px)}
 .fold .hero-copy .intro{font-size:clamp(13px,min(3.6vw,1.8vh),16px);line-height:1.6}
 .fold .hero-actions{margin-top:clamp(12px,2.4vh,26px)}
 .fold .hero-footnote{font-size:9px}
}
/* short phones: the intro now carries what Navio runs (owner, 6 Oct night), so it stays, smaller, instead of hiding */
@media(max-width:680px) and (max-height:760px){.fold .hero-copy .intro{font-size:12.5px;line-height:1.55;margin-top:8px}}
/* phones held sideways: words and product view side by side again */
@media(orientation:landscape) and (max-height:560px) and (max-width:1000px){
 .fold{min-height:0}
 .fold .hero{padding-top:calc(12px + 54px + 10px + env(safe-area-inset-top,0px));padding-bottom:8px}
 .fold .hero-layout{grid-template-columns:1.1fr 1fr;grid-template-rows:minmax(0,1fr);max-width:none;gap:24px}
 .fold .hero-copy h1{font-size:clamp(26px,8.2vh,44px);margin-top:8px;white-space:nowrap}
 .fold .hero-subhead{font-size:15px;margin-top:8px}
 .fold .hero-copy .intro{display:none}
 .fold .hero-actions{margin-top:12px}
}

/* ============ OUR TOP CUSTOMERS: a slowly rolling strip of logos, as on nuvena.co ============ */
.cust{flex:none;border-block:1px solid var(--line);background:#fff}
.cust-row{display:flex;align-items:center;gap:clamp(16px,3vw,48px);height:clamp(64px,10.5vh,112px)}
.cust-label{flex:none;max-width:none;white-space:nowrap;margin:0;font:600 13px/1.35 var(--font);color:var(--slate)}
.cust-roll{flex:1;min-width:0;display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.cust-track{display:flex;flex:none;align-items:center;gap:clamp(40px,4.6vw,72px);margin:0;padding:0 clamp(40px,4.6vw,72px) 0 0;list-style:none;animation:cust-roll 90s linear infinite}
.cust-roll:hover .cust-track{animation-play-state:paused}
.cust-track li{flex:none}
.cust-track img{display:block;width:auto;height:30px;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.cust-track img:hover{filter:none;opacity:1}
.cust-magma{height:24px!important}.cust-lichfl{height:30px!important}.cust-manappuram{height:26px!important}.cust-siemens{height:17px!important}.cust-kseb{height:31px!important}.cust-patanjali{height:27px!important}.cust-shriram{height:33px!important}.cust-cera{height:18px!important}
.cust-wm{font-size:20px;font-weight:600;letter-spacing:-.025em;color:#5a6178;white-space:nowrap}
.cust-track{animation-duration:110s}
.cust-compact .cust-row{height:76px}
@media(max-width:700px){
 .cust-compact .cust-row{height:88px;flex-direction:column;justify-content:center;gap:12px}
 .cust-compact .cust-label{font-size:10px;letter-spacing:.08em}
 .cust-compact .cust-roll{flex:none;width:100%}}
@keyframes cust-roll{to{transform:translateX(-100%)}}
@media(max-width:900px){
 .cust-label{font-size:11.5px}
 .cust-magma{height:19px!important}.cust-manappuram{height:21px!important}.cust-siemens{height:14px!important}
 .cust-track img{height:24px}
 .cust-kseb{height:25px!important}.cust-patanjali{height:21px!important}.cust-shriram{height:27px!important}.cust-cera{height:14px!important}
 .cust-wm{font-size:16px}
}
@media(orientation:landscape) and (max-height:560px) and (max-width:1000px){.cust-row{height:52px}}
@media(prefers-reduced-motion:reduce){
 .cust-roll{-webkit-mask-image:none;mask-image:none}
 .cust-track{flex-wrap:wrap;justify-content:center;gap:12px 32px;padding:10px 0;flex:1}
 .cust-track[aria-hidden]{display:none}
 .cust-row{height:auto;min-height:64px}
 .cust-compact .cust-row{height:auto;padding-block:16px}
}

/* ============ HERO PRODUCT VIEW: a switch at the top, steps that light up in turn ============ */
.demo-top{gap:10px;padding:13px 14px 13px 22px}
.demo-sub{white-space:nowrap}
.demo-name,.demo-sub{animation:panel-in .45s var(--ease) both}
.flow-switch{position:relative;margin-left:auto;display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:99px;background:#f2f3f6;border:1px solid var(--line)}
.flow-switch button{position:relative;z-index:1;min-height:30px;padding:0 14px;border-radius:99px;background:none;font:600 11px var(--ui);color:var(--slate);white-space:nowrap;transition:color .3s}
.flow-switch button[aria-selected=true]{color:#fff}
.flow-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:99px;background:var(--ink);box-shadow:0 4px 10px -4px #10193566;transition:transform .45s cubic-bezier(.3,.7,.2,1)}
.flow-switch.is-voice .flow-thumb{transform:translateX(100%)}
.demo-body{padding:16px 22px 12px}
.source-card{min-height:0;padding:13px 15px}
.source-quote{margin-top:9px;font-size:15px;animation:quote-in 1s var(--ease) .15s both}
.flow-heading{margin:14px 0 4px}
.flow-panel{animation:panel-in .5s var(--ease) both}
.flow-step{min-height:50px;padding:5px 0;transition:opacity .5s,background .6s}
.flow-step.is-next{opacity:.35}
.flow-step:not(:last-child):before{content:'';position:absolute;z-index:1;left:13px;top:calc(50% + 14px);height:calc(100% - 27px);width:1px;background:linear-gradient(var(--blue),var(--violet));transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease)}
.flow-step.is-done:not(:last-child):before{transform:scaleY(1)}
.flow-step .step-tag,.flow-step .proof-link{transition:opacity .4s,transform .4s}
.flow-step.is-next .step-tag,.flow-step.is-next .proof-link{opacity:0;transform:scale(.85)}
.is-current .step-node{animation:node-pulse 1.5s ease-out infinite}
.demo-outcome{margin-top:8px;padding-top:10px}
.demo-outcome>span{opacity:.35;transition:opacity .5s}
.demo-outcome.is-on>span{opacity:1}
.hero .product-demo{animation:card-float 7s ease-in-out infinite}
@keyframes panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes quote-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes node-pulse{0%{box-shadow:0 0 0 0 #6a4fb845}100%{box-shadow:0 0 0 10px #6a4fb800}}
@keyframes card-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(max-width:680px){.flow-step:not(:last-child):before{left:12px}.demo-top{padding:12px 12px 12px 16px}.flow-switch button{padding:0 11px;font-size:10px}}

/* "Delivered." is underlined with a soft smile in the three thread colours: thick in the middle, both ends
   lifting a little, no arrow. It draws itself in once the page opens. */
.delivered:after{left:-1%;bottom:-.3em;width:104%;height:.32em;opacity:.95;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2026'%20preserveAspectRatio='none'%3E%3Cpath%20d='M4%205Q150%2017%20296%205C297.6%205.6%20297.5%207.1%20296%207.6Q150%2025%204%207.6C2.5%207.1%202.4%205.6%204%205Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2026'%20preserveAspectRatio='none'%3E%3Cpath%20d='M4%205Q150%2017%20296%205C297.6%205.6%20297.5%207.1%20296%207.6Q150%2025%204%207.6C2.5%207.1%202.4%205.6%204%205Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
@media(prefers-reduced-motion:no-preference){.hero .delivered:after{animation:swoosh-in 1.1s var(--ease) .55s both}}
@keyframes swoosh-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}

/* the three strokes before each eyebrow: parallel, the same distance apart, the whole set tilted */
.strokes{display:inline-flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;width:22px;height:19px;flex:none;transform:rotate(-36deg)}
.strokes i{position:static;display:block;width:20px;height:2px;border-radius:2px;transform:none}
.strokes i:nth-child(1){width:14px;margin-left:3px;background:var(--rose)}
.strokes i:nth-child(2){width:20px;margin-left:0;background:var(--blue)}
.strokes i:nth-child(3){width:14px;margin-left:6px;background:var(--violet)}
/* in the hero they draw themselves in turn, hold, and slip away, like threads moving */
@media(prefers-reduced-motion:no-preference){
 .hero-copy .strokes i{transform-origin:0 50%;animation:stroke-run 4.2s var(--ease) infinite}
 .hero-copy .strokes i:nth-child(2){animation-delay:.18s}
 .hero-copy .strokes i:nth-child(3){animation-delay:.36s}
}
@keyframes stroke-run{0%{transform:scaleX(0);opacity:0}12%{opacity:1}28%,74%{transform:scaleX(1);opacity:1}100%{transform:translateX(5px) scaleX(1);opacity:0}}

/* the hero's eyebrow sits in a badge */
.hero-copy .eyebrow{display:inline-flex;width:fit-content;padding:7px 15px 7px 11px;border-radius:99px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 3px #1019350a}
.hero-copy .eyebrow .strokes{transform:rotate(-36deg) scale(.82)}
/* the product switch must not look like the call to action: a white thumb on a light track, each product in its own colour */
.flow-switch{background:#f1f2f5}
.flow-thumb{background:#fff;box-shadow:0 1px 2px #1019351a,0 3px 8px -3px #10193526}
.flow-switch button[aria-selected=true]{color:var(--blue)}
.flow-switch.is-voice button[aria-selected=true]{color:var(--rose)}
.flow-switch button[aria-selected=true]:before{content:'';display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:currentColor;vertical-align:1px}

/* ============ MENUS: a list on one side, what the chosen item does for you on the other (as on nuvena.co) ============ */
.mm-sol{width:min(360px,calc(100vw - 32px))}
.mm-ind{width:min(360px,calc(100vw - 32px))}
.mm-in{display:grid}
.mm-in-sol{grid-template-columns:370px minmax(0,1fr)}
.mm-in-ind{grid-template-columns:minmax(0,1fr) 420px}
.mm-in .mm-list{align-content:start;border-right:1px solid var(--line)}
.mm-in-ind .mm-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:4px}
.mi.on{background:var(--bg)}
.mi.on .mi-ico{background:var(--ink);color:#fff}
.mm-in-ind .mi{padding:8px 10px}
.mm-in-ind .mi-txt small{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px;border-radius:16px;transition:background-color .2s,box-shadow .25s}
.pc:hover{background:var(--bg)}
.pc.on{background:#fff;box-shadow:0 0 0 1px var(--line),0 16px 32px -24px #10193566}
.pc .mi-ico{width:46px;height:46px;border-radius:13px}
.pc .mi-ico .ico{width:21px;height:21px}
.pc-txt{min-width:0}
.pc-tag{display:block;font:600 10px var(--ui);font-style:normal;letter-spacing:.12em;text-transform:uppercase}
.pc-tag.blue{color:var(--blue);background:none}.pc-tag.rose{color:var(--rose);background:none}
.pc-txt b{display:block;margin-top:3px;font-size:18px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.pc-txt small{display:block;margin-top:2px;font-size:13px;color:var(--slate)}
.pc-arw{width:16px!important;height:16px!important;color:var(--muted);transition:transform .2s,color .2s}
.pc.on .pc-arw{color:var(--ink);transform:translateX(3px)}
.mm-pv{padding:16px 18px 18px;animation:pv-in .3s var(--ease) both}
.mm-pv .mm-kicker{padding:6px 2px 10px}
.mm-pv-title{margin:6px 2px 12px;font-size:18px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.pk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pk{display:grid;align-content:start;gap:3px;padding:14px;border-radius:14px;background:var(--bg)}
.pk-ico{display:grid;place-items:center;width:32px;height:32px;margin-bottom:8px;border-radius:10px;background:var(--ink);color:#fff}
.pk-ico .ico{width:17px;height:17px}
.pk b{font-size:14px;font-weight:600;line-height:1.3;color:var(--ink)}
.pk small{font-size:12.5px;line-height:1.4;color:var(--slate)}
.mm-pv-link{display:inline-flex;align-items:center;gap:6px;margin:14px 2px 0;font-size:14px;font-weight:600;color:var(--ink)}
.mm-pv-link .ico{width:15px;height:15px;transition:transform .2s}
.mm-pv-link:hover .ico{transform:translateX(3px)}
@keyframes pv-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ============ HERO STORY: one task moving between the two products ============ */
.hero-journey .product-demo:before{content:'';position:absolute;z-index:2;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--violet),var(--rose))}
.flow-switch button[aria-pressed=true]{color:var(--blue)}
.flow-switch.is-voice button[aria-pressed=true]{color:var(--rose)}
.flow-switch button[aria-pressed=true]:before{content:'';display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:currentColor;vertical-align:1px}
.lane-os .step-node{color:var(--blue);border-color:#2364a82e;background:#2364a808}
.lane-onit .step-node{color:var(--rose);border-color:#c8326a2e;background:#c8326a08}
.hero-journey .flow-step.is-final .step-node{color:#fff;background:var(--ink);border-color:var(--ink)}
.hero-journey .flow-step:not(:last-child):before{background:linear-gradient(var(--blue),var(--violet))}
.hero-journey .flow-step.lane-onit:not(:last-child):before{background:linear-gradient(var(--rose),var(--violet))}
.hero-journey .is-current .step-copy strong{color:var(--ink)}
.step-prod{display:inline-block;margin-left:8px;padding:2px 6px;border-radius:5px;font:600 8px/1.4 var(--ui);font-style:normal;letter-spacing:.1em;text-transform:uppercase;vertical-align:2px}
.step-prod.os{color:var(--blue);background:#2364a812}
.step-prod.onit{color:var(--rose);background:#c8326a12}
.step-tag.is-avatar{width:27px;height:27px;border-radius:50%;padding:0;display:grid;place-items:center;background:#2364a80d;border:0;color:var(--blue)}
.hero-journey .flow-step{min-height:46px}
/* the threads come out from behind the card, a little stronger */
.hero .threads{inset:-80px -120px;width:calc(100% + 240px);height:calc(100% + 160px)}
.hero .threads path{stroke-opacity:.3}
.hero .threads path.travelling{stroke-opacity:.9;stroke-width:1.8}
@media(max-width:680px){.step-prod{font-size:7px;margin-left:6px;padding:2px 5px}.hero .threads{inset:-50px -30px;width:calc(100% + 60px);height:calc(100% + 100px)}}

/* ============ PRODUCTS MENU: the two marks, and a journey that plays beside them ============ */
.mark-tile{background:#fff!important;border:1px solid var(--line)}
.mi:hover .mark-tile,.mi:focus-visible .mark-tile{background:#fff!important}
.nv-mark,.oi-mark{display:block;width:24px;height:24px;overflow:visible}
.pc .nv-mark,.pc .oi-mark{width:26px;height:26px}
.nv-mark .n{fill:none;stroke:#1b2a4a;stroke-width:68;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1180}
.nv-mark .dot{fill:#d4a43c;transform-box:fill-box;transform-origin:center}
.oi-mark .ring{fill:none;stroke:#252d29;stroke-width:13;stroke-linecap:round;stroke-dasharray:255 255;transform-box:view-box;transform-origin:90px 90px}
.oi-mark .tick{fill:none;stroke:#ad853f;stroke-width:13;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:103 103}
@media(prefers-reduced-motion:no-preference){
 .mm.open .pc.on .nv-mark .n,.menu-open .macc[open] .nv-mark .n{animation:nv-draw 1.05s cubic-bezier(.55,.05,.35,1) .1s both}
 .mm.open .pc.on .nv-mark .dot,.menu-open .macc[open] .nv-mark .dot{animation:nv-pop .38s cubic-bezier(.2,1.4,.4,1) 1.1s both}
 .mm.open .pc.on .oi-mark .ring,.menu-open .macc[open] .oi-mark .ring{animation:oi-ring .95s cubic-bezier(.45,.05,.25,1) .1s both}
 .mm.open .pc.on .oi-mark .tick,.menu-open .macc[open] .oi-mark .tick{animation:oi-tick .45s cubic-bezier(.3,.7,.2,1) .85s both}
}
@keyframes nv-draw{from{stroke-dashoffset:1180}to{stroke-dashoffset:0}}
@keyframes nv-pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes oi-ring{from{stroke-dashoffset:255;transform:rotate(-140deg)}to{stroke-dashoffset:0;transform:rotate(0)}}
@keyframes oi-tick{from{stroke-dashoffset:103}to{stroke-dashoffset:0}}
.mm-pv{display:flex;flex-direction:column}
.mm-pv-link{align-self:flex-end;margin-top:auto;padding-top:14px}
.jr{position:relative;display:grid;gap:4px;margin:2px 0 0;padding:0;list-style:none}
.jr li{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:14px;padding:9px 12px 9px 8px;border-radius:12px;transition:background-color .3s}
.jr li:not(:last-child):after{content:'';position:absolute;left:22.5px;top:40px;bottom:-12px;width:1px;background:var(--line)}
.jr-node{grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid var(--line);font:600 12px var(--ui);color:var(--slate);position:relative;z-index:1}
.jr b{font-size:15px;font-weight:600;color:var(--ink)}
.jr small{font-size:13px;line-height:1.45;color:var(--slate)}
.jr-out{display:flex;align-items:center;gap:8px;margin:14px 0 0;padding:11px 14px;border-radius:12px;background:var(--bg);font-size:13.5px;font-weight:600;color:var(--ink)}
.jr-out .ico{width:16px;height:16px;flex:none;color:var(--blue)}
.pv-onit .jr-out .ico{color:var(--rose)}
/* each step lights up in turn while the menu is open, then the run starts again */
@media(prefers-reduced-motion:no-preference){
 .mm.open .jr li{animation:jr-row 6.4s ease infinite both}
 .mm.open .jr li .jr-node{animation:jr-node 6.4s ease infinite both}
 .mm.open .jr li:nth-child(2),.mm.open .jr li:nth-child(2) .jr-node{animation-delay:1.1s}
 .mm.open .jr li:nth-child(3),.mm.open .jr li:nth-child(3) .jr-node{animation-delay:2.2s}
 .mm.open .jr li:nth-child(4),.mm.open .jr li:nth-child(4) .jr-node{animation-delay:3.3s}
}
@keyframes jr-row{0%{opacity:.4;background-color:transparent}6%,18%{opacity:1;background-color:var(--bg)}30%,78%{opacity:1;background-color:transparent}92%,100%{opacity:.4}}
@keyframes jr-node{0%{background:#fff;color:var(--slate);border-color:var(--line)}6%,78%{background:var(--ink);color:#fff;border-color:var(--ink)}92%,100%{background:#fff;color:var(--slate);border-color:var(--line)}}
.pv-onit .jr li .jr-node{--lit:var(--rose)}

/* ============ FOOTER: one thin line ============ */
.site-footer{padding-block:18px calc(20px + env(safe-area-inset-bottom,0px))!important;margin-top:0;border-top:1px solid var(--line)}
.foot-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.foot-left{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;font-size:13px;color:var(--slate)}
.foot-left a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--thread);text-decoration-thickness:1.5px;text-underline-offset:4px;transition:text-decoration-color .2s}
.foot-left a:hover{text-decoration-color:var(--blue)}
.foot-dot{color:var(--muted)}
.foot-soc{display:flex;gap:10px;margin:0;padding:0;list-style:none}
.foot-soc a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#1019350a;color:var(--ink);transition:background-color .2s,color .2s}
.foot-soc a:hover{background:var(--ink);color:#fff}
.foot-soc svg{width:16px;height:16px;fill:currentColor}
@media(max-width:680px){.foot-line{flex-direction:column-reverse;align-items:center;text-align:center}.foot-left{justify-content:center;font-size:12px}}

/* ============ SLIDES: on desktops the home page moves one full screen at a time (App.js, useSlides) ============ */
html.slides-on{scroll-behavior:auto}
.slides-on [data-slide]{height:100vh;height:100svh;box-sizing:border-box;overflow:hidden}
.slides-on .slide{display:flex;flex-direction:column;justify-content:center;margin:0;padding:calc(76px + clamp(12px,3vh,32px)) 0 clamp(16px,3.5vh,40px)!important}
.slides-on .slide>.container{width:100%}
.slides-on .slide-last{justify-content:space-between;padding-bottom:0!important}
.slide-last .slide-body{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.slide-dots{position:fixed;z-index:50;right:clamp(14px,1.6vw,28px);top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:6px}
.slides-on .slide-dots{display:flex}
.slide-dots button{position:relative;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer}
.slide-dots button:before{content:'';position:absolute;left:6px;top:6px;width:8px;height:8px;border-radius:50%;background:#10193533;transition:background-color .3s,transform .3s}
.slide-dots button.on:before{background:var(--ink);transform:scale(1.3)}
.slide-dots.is-dark button:before{background:#ffffff55}
.slide-dots.is-dark button.on:before{background:#fff}
/* the closing slide: one large invitation, the footer under it */
.slides-on .slide-last .cta-section{padding:0}
.slides-on .slide-last .cta-wrap{flex-direction:column;align-items:center;gap:28px;text-align:center;border-top:0;padding-top:0}
.slides-on .slide-last .cta-wrap .eyebrow{justify-content:center}
.slides-on .slide-last .cta-wrap h2{font-size:clamp(38px,4.4vw,68px);line-height:1.06}
.slides-on .slide-last .cta-wrap p:not(.eyebrow){font-size:15px}

/* ============ PRODUCTS SLIDE: two live cards side by side ============ */
.pp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 48px;margin-bottom:clamp(14px,2.4vh,26px)}
.pp-head h2{font-size:clamp(28px,3vw,44px);margin-top:12px}
.pp-head>p{max-width:30em;margin:0;font-size:14px;line-height:1.6}
.pp-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pcard{display:flex;flex-direction:column;padding:20px 24px 0}
.product-card.pcard+.product-card.pcard{margin-top:0}
.pcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.pcard .product-name{font-size:22px;line-height:1.2}
.pcard .product-audience{display:block;margin-top:3px}
.onit-card .product-audience{color:var(--rose)}
.pcard-link{margin-top:2px;font-size:12px;gap:8px}
.pcard>h3{margin-top:8px;font-size:clamp(17px,1.5vw,22px)}
.pcard-stage{position:relative;margin:14px 0 16px;height:clamp(186px,25vh,240px);border-radius:12px;background:#f3f4f7;border:1px solid #10193508;overflow:hidden}
.pcard-steps{margin-inline:-24px;margin-top:auto}
.pcard-steps button{position:relative;display:flex;align-items:center;gap:8px;min-width:0;padding:14px 12px;border:0;border-right:1px solid var(--line);background:transparent;font:500 11.5px/1.35 var(--font);text-align:left;color:var(--slate);cursor:pointer;transition:background-color .3s,color .3s}
.pcard-steps button:last-child{border-right:0}
.pcard-steps button:hover{color:var(--ink)}
.pcard-steps button.done{color:var(--ink)}
.pcard-steps button.on{background:#fff;color:var(--ink);font-weight:600}
.pcard-steps small{flex:none;font:500 9px var(--ui);color:var(--blue)}
.onit-card .pcard-steps small{color:var(--rose)}
.pcard-bar{position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:0 50%}
.onit-card .pcard-bar{background:var(--rose)}
.pcard-steps button.done .pcard-bar,.pcard.is-held .pcard-steps button.on .pcard-bar{transform:none}
.pcard:not(.is-held) .pcard-steps button.on .pcard-bar{animation:pcard-bar 2.2s linear both}
.pcard:not(.is-held) .pcard-steps button:nth-child(4).on .pcard-bar{animation-duration:3.6s}
@keyframes pcard-bar{to{transform:scaleX(1)}}
/* Navio OS, live */
.nlive{position:absolute;inset:12px;display:flex;flex-direction:column;gap:8px;font-family:var(--ui)}
.nlive-head{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:#fff;border:1px solid var(--line)}
.nlive-doc{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#2364a812;color:var(--blue)}
.nlive-doc .ico{width:15px;height:15px}
.nlive-head b{display:block;font-size:12.5px;font-weight:600;color:var(--ink)}
.nlive-head small{display:block;font-size:10.5px;color:var(--slate)}
.nlive-chip{margin-left:auto;padding:3px 9px;border-radius:99px;background:#2364a812;color:var(--blue);font:600 10px var(--ui);font-style:normal;white-space:nowrap;animation:chip-in .4s var(--ease) both}
.nlive-rows{flex:1;display:grid;align-content:start;border-radius:10px;background:#fff;border:1px solid var(--line);overflow:hidden}
.nlive-row{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) 44px 92px;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid #f0f1f5;font-size:11.5px;color:var(--ink)}
.nlive-row:last-child{border-bottom:0}
.nlive-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nlive-owner{display:flex;align-items:center;gap:6px;min-width:0;color:var(--slate);white-space:nowrap}
.nlive-av{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font:600 8.5px var(--ui);font-style:normal;animation:chip-in .4s var(--ease) both}
.nlive-skel{display:block;width:56px;height:8px;border-radius:4px;background:#eceef3}
.nlive-due{color:var(--slate);font-variant-numeric:tabular-nums}
.nl-st{justify-self:end;padding:3px 8px;border-radius:99px;font:600 9.5px var(--ui);font-style:normal;white-space:nowrap;animation:chip-in .4s var(--ease) both}
.nl-st.ok{background:#e3f5ec;color:#1d7a52}.nl-st.due{background:#fdf1dc;color:#96560a}.nl-st.track{background:#2364a812;color:var(--blue)}.nl-st.sched{background:#6a4fb812;color:var(--violet)}
.nl-reading{justify-self:end;font:500 9.5px var(--ui);font-style:normal;color:var(--muted);animation:reading 1.1s ease-in-out infinite alternate}
@keyframes chip-in{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes reading{from{opacity:.35}to{opacity:1}}
/* On It, live */
.olive{position:absolute;inset:0;display:grid;place-items:center}
.olive-phone{width:min(300px,86%);display:grid;gap:8px;padding:12px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 36px -26px #10193566;font-family:var(--ui)}
.olive-bar{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--ink)}
.olive-bar .ico{width:14px;height:14px;color:var(--slate)}
.olive-voice{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;padding:10px;border-radius:12px;background:#c8326a0d;animation:chip-in .45s var(--ease) both}
.olive-mic{grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--rose);color:#fff}
.olive-mic .ico{width:15px;height:15px}
.olive-voice p{margin:0;font-size:11.5px;line-height:1.45;color:var(--ink)}
.olive-wave{display:flex;align-items:center;gap:2px;height:14px}
.olive-wave i{display:block;width:2px;height:100%;border-radius:2px;background:var(--rose);opacity:.7;animation:voice-breathe 1.1s ease-in-out infinite}
.olive-wave i:nth-child(2n){animation-delay:-.35s}.olive-wave i:nth-child(3n){animation-delay:-.7s}
.olive-task{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px;border-radius:12px;border:1px solid var(--line);animation:chip-in .45s var(--ease) both}
.olive-check{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--thread);color:#fff;transition:background-color .3s,border-color .3s}
.olive-check .ico{width:12px;height:12px}
.olive-task.is-done .olive-check{background:#1d7a52;border-color:#1d7a52}
.olive-task b{display:block;font-size:12px;font-weight:600;color:var(--ink)}
.olive-task small{display:block;font-size:10.5px;color:var(--slate)}
.olive-task.is-done b{text-decoration:line-through;text-decoration-color:#1d7a5280}
.olive-chip{padding:3px 8px;border-radius:99px;background:#c8326a12;color:var(--rose);font:600 9.5px var(--ui);font-style:normal;white-space:nowrap;animation:chip-in .4s var(--ease) both}
.olive-task.is-done .olive-chip{background:#e3f5ec;color:#1d7a52}
.olive-nudge{display:flex;gap:8px;align-items:flex-start;padding:9px 10px;border-radius:12px;background:var(--bg);font-size:11px;line-height:1.45;color:var(--slate);animation:chip-in .45s var(--ease) both}
.olive-nudge .ico{flex:none;width:14px;height:14px;margin-top:1px;color:var(--rose)}
.olive-nudge b{font-weight:600;color:var(--ink)}
.olive-proof{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;background:#e3f5ec80;border:1px solid #1d7a5226;font-size:11px;color:var(--ink);animation:chip-in .45s var(--ease) both}
.olive-proof .ico{width:14px;height:14px;color:#1d7a52}
.olive-proof em{margin-left:auto;font:600 9.5px var(--ui);font-style:normal;color:#1d7a52}
/* "Nothing left hanging", in one line under the cards */
.how-strip{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px 40px;margin-top:clamp(14px,2.4vh,24px);padding-top:clamp(14px,2.4vh,22px);border-top:1px solid var(--line)}
.how-strip h3{margin:0;font-size:clamp(20px,1.7vw,26px);font-weight:450;letter-spacing:-.035em;white-space:nowrap}
.how-strip ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.how-strip li{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline}
.how-strip li span{grid-row:1/3;font:500 10px var(--ui);color:var(--blue)}
.how-strip li:nth-child(2) span{color:var(--violet)}.how-strip li:nth-child(3) span{color:var(--rose)}
.how-strip b{font-size:13.5px;font-weight:600;color:var(--ink)}
.how-strip small{font-size:12px;line-height:1.45;color:var(--slate)}
@media(max-width:900px){
 .pp-head{flex-direction:column;align-items:flex-start}
 .pp-grid{grid-template-columns:1fr}
 .how-strip{grid-template-columns:1fr}
 .how-strip ol{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
 .pcard{padding:18px 18px 0}
 .pcard-steps{margin-inline:-18px;grid-template-columns:1fr 1fr}
 .pcard-steps button:nth-child(2){border-right:0}
 .pcard-steps button:nth-child(-n+2){border-bottom:1px solid var(--line)}
 .nlive-row{grid-template-columns:minmax(0,1.5fr) 30px 40px 84px}
 .nlive-owner{font-size:0;gap:0}
}

/* ============ MENUS, COMPACT: no menu reaches below the hero's headline (owner, 5 Oct) ============ */
.mm-sol{width:min(360px,calc(100vw - 32px))}
.mm-ind{width:min(360px,calc(100vw - 32px))}
.mm-in-sol{grid-template-columns:330px minmax(0,1fr)}
.mm-in-ind{grid-template-columns:minmax(0,1fr) 400px}
.mm-list{padding:12px}
.mm-kicker{padding:4px 10px 6px}
.mm-more{grid-column:1/-1;margin:4px 0 0;padding:4px 10px 2px}
.mm-more a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink)}
.mm-more .ico{width:14px;height:14px;transition:transform .2s}
.mm-more a:hover .ico{transform:translateX(3px)}
.pc{grid-template-columns:auto minmax(0,1fr);gap:12px;padding:10px 12px;border-radius:14px}
.pc .mi-ico{width:40px;height:40px;border-radius:11px}
.pc .nv-mark,.pc .oi-mark{width:22px;height:22px}
.pc-tag{font-size:9.5px}
.pc-txt b{margin-top:1px;font-size:16px}
.pc-txt small{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-pv{padding:12px 16px 14px}
.mm-pv .mm-kicker{padding:4px 2px 8px}
.mm-pv-link{padding-top:0;margin:0;font-size:13.5px}
/* the product's journey, in one row: four steps along a line, lit in turn */
.jr{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:2px 0 0}
.jr li{grid-template-columns:none;grid-template-rows:auto auto 1fr;align-content:start;row-gap:3px;padding:8px 10px 10px 0;border-radius:0;background:none!important}
.jr li:not(:last-child):after{left:30px;right:6px;top:21px;bottom:auto;width:auto;height:1px}
.jr-node{grid-row:auto;width:26px;height:26px;margin-bottom:6px;font-size:11px}
.jr b{font-size:13px;line-height:1.3}
.jr small{font-size:11.5px;line-height:1.4}
.jr-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px}
.jr-out{margin:0;padding:8px 12px;font-size:12.5px}
@keyframes jr-row{0%{opacity:.4}6%,78%{opacity:1}92%,100%{opacity:.4}}
/* industries: six, a little taller; the four reasons in tight cards */
.mm-in-ind .mi{padding:10px}
.mm-in-ind .mi-txt b{font-size:14.5px}
.mm-pv-title{margin:2px 2px 10px;font-size:17px}
.mm-in-ind .pk-grid{gap:6px;margin-bottom:10px}
.mm-in-ind .pk{grid-template-columns:28px minmax(0,1fr);column-gap:10px;row-gap:1px;padding:10px 12px;border-radius:12px}
.mm-in-ind .pk-ico{grid-row:1/3;width:28px;height:28px;margin:0;border-radius:8px}
.mm-in-ind .pk-ico .ico{width:15px;height:15px}
.mm-in-ind .pk b{font-size:13px}
.mm-in-ind .pk small{font-size:11.5px;line-height:1.35}
.mm-in-ind .mm-pv-link{align-self:flex-end}
.mm-in-ind .mm-list{padding:10px 12px}
.mm-in-ind .mi{padding:8px 10px}
.mm-in-ind .mm-pv{padding:10px 14px 12px}
.mm-in-ind .mm-pv-title{margin:2px 2px 8px;font-size:16px}
.mm-in-ind .pk{padding:8px 11px}
.mm-in-ind .pk small{line-height:1.3}
.mm-in-ind .pk-grid{margin-bottom:8px}
/* the Navio OS live view keeps all three rows inside its frame on short screens */
.nlive{inset:10px;gap:6px}
.nlive-head{padding:7px 12px}
.nlive-row{padding:7px 12px}

/* ============ MENU BENEFITS: four tiles, each a small moving drawing and four words ============ */
.mm-in-ind{grid-template-columns:minmax(0,1fr) 430px}
.mm-pv .mm-kicker{padding:4px 2px 10px}
.bf-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.bf{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:11px;row-gap:1px;align-items:center;padding:11px 12px;border-radius:13px;background:var(--bg)}
.bf-art{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#fff;border:1px solid var(--line);color:var(--ink)}
.pv-navio .bf-art{color:var(--blue)}
.pv-onit .bf-art{color:var(--rose)}
.bf-art svg{width:20px;height:20px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bf b{font-size:13.5px;font-weight:600;line-height:1.25;color:var(--ink)}
.bf small{font-size:11.5px;line-height:1.35;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* ============ COMING SOON: the five slides after the hero, for now ============ */
.soon{display:flex;flex-direction:column;justify-content:center;min-height:60vh}
.soon-in,.slide-body>.soon{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.soon-name{margin:0;font:600 12px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.soon-text{margin:12px 0 0;font-size:clamp(40px,5vw,72px);font-weight:450;line-height:1.05;letter-spacing:-.045em;color:var(--ink)}
.slide-body>.soon{min-height:0;flex:1}

/* ============ MENUS: both "Explore" links end on one line; the four tiles fill the height between ============ */
.mm-in .mm-list{display:flex;flex-direction:column}
.mm-items{flex:1;display:grid;align-content:start;gap:2px}
.mm-in-ind .mm-items{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:4px}
.mm-more{margin:auto 0 0;padding:10px 10px 2px}
.mm-more a,.mm-pv-link{font-size:13.5px;line-height:1.3}
.mm-pv,.mm-in-ind .mm-pv{display:flex;flex-direction:column;padding:12px 16px 14px}
.bf-grid{flex:1;grid-auto-rows:1fr;margin-bottom:0}
.mm-pv-link,.mm-in-ind .mm-pv-link{align-self:flex-end;margin:auto 0 0;padding:10px 0 0}
.bf-art{color:var(--ink)}
.bf-art .ico{width:18px;height:18px}

/* the hero has the whole first screen now (the customers sit above the footer): its words are 5% larger */
.fold .hero-copy h1{font-size:clamp(40px,min(5.72vw,9.9vh),101px)}
.fold .hero-subhead{font-size:clamp(17px,min(1.52vw,2.5vh),25px)}
.fold .hero-copy .intro{font-size:clamp(14px,min(1.18vw,1.95vh),19px)}
@media(max-width:900px){.fold .hero-copy h1{font-size:clamp(34px,min(10.5vw,6.5vh),82px)}.fold .hero-subhead{font-size:clamp(17px,min(4.8vw,2.6vh),23px)}.fold .hero-copy .intro{font-size:clamp(14px,min(3.8vw,1.9vh),17px)}}
.bf b,.bf small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the hero's words, larger again (owner: the page looked empty) */
.fold .hero-copy h1{font-size:clamp(42px,min(5.95vw,10.3vh),106px)}
.fold .hero-subhead{font-size:clamp(18px,min(1.75vw,2.85vh),28px)}
.fold .hero-copy .intro{font-size:clamp(15px,min(1.36vw,2.2vh),21px);max-width:28em}
.fold .hero-footnote{font-size:clamp(11px,min(.85vw,1.4vh),13px)}
.fold .hero-copy .eyebrow{font-size:clamp(10px,min(.8vw,1.35vh),12px)}
@media(max-width:900px){.fold .hero-copy h1{font-size:clamp(34px,min(10.5vw,6.5vh),82px)}.fold .hero-subhead{font-size:clamp(17px,min(4.9vw,2.7vh),23px)}.fold .hero-copy .intro{font-size:clamp(14px,min(3.9vw,1.95vh),17px)}}

/* ============ HERO: one full circle in sixteen seconds (App.js, HeroDash) ============
   0–6% the MSA arrives · 6–18% both sides sign · 20% signed · 22–30% four promises light · 28–42% they land on the
   calendar · 42–49% the MSA leaves, the calendar slides left · 49–55% each promise appears with its date · 53–60% chat,
   email and push go out · 61–76% each is done on time · 74–84% the on-time ring closes · 93–100% fade, and again.
   The base styles are the finished picture (reduced motion shows it). */
@media(min-width:901px){.fold .hero-layout{grid-template-columns:.86fr 1.14fr}}
.hero-dash .product-demo:before{content:'';position:absolute;z-index:2;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--violet),var(--rose))}
.dash-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:22px 24px 6px}
.kpi{display:flex;align-items:center;gap:12px;min-width:0;padding:14px;border-radius:14px;background:var(--bg)}
.kpi b{display:block;font-size:22px;font-weight:600;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.kpi small{display:block;margin-top:2px;font:500 11.5px/1.25 var(--ui);color:var(--slate)}
.kpi-ring{flex:none;width:40px;height:40px;transform:rotate(-90deg)}
.kpi-track{fill:none;stroke:#e6e7ec;stroke-width:4.5}
.kpi-fill{fill:none;stroke:#1d7a52;stroke-width:4.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.kpi-badge{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:#fff;border:1px solid var(--line);color:var(--blue)}
.kpi-badge.ok{color:#1d7a52}
.kpi-badge .ico{width:19px;height:19px}
.hd-stage{display:block;width:100%;height:auto;padding:6px 12px 10px}
.hd-sheet{fill:#fff;stroke:#e3e4ea;stroke-width:1.2}
.hd-back2{fill:#f4f4f6}.hd-back1{fill:#f9f9fa}
.hd-ink{fill:#1b2a4a}
.hd-line{fill:#e8e6df}
.hd-lit0{fill:#1b2a4a}.hd-lit1{fill:var(--blue)}.hd-lit2{fill:var(--violet)}.hd-lit3{fill:var(--rose)}
.hd-rule{stroke:#e3e1da;stroke-width:1.4}
.hd-sig{fill:none;stroke:#1b2a4a;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.hd-signed circle{fill:#1d7a52}
.hd-signed path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hd-calhead{fill:#1b2a4a}
.hd-day{fill:#f1f2f5}
.hd-docs,.hd-cal,.hd-work,.hd-row{transform-box:view-box}
.hd-signed,.hd-tick,.hd-ping,.hd-done,.hd-ch{transform-box:fill-box;transform-origin:center}
.hd-ping{fill:none;stroke:currentColor;stroke-width:2;opacity:0}
.hd-tick circle{fill:#1d7a52;stroke:#fff;stroke-width:2}
.hd-tick path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hd-job{fill:var(--ink);font:600 13.5px var(--font);letter-spacing:-.01em}
.hd-due{fill:var(--muted);font:500 11.5px var(--ui);text-anchor:end}
.hd-ch-wa{fill:#25b562}.hd-ch-mail{fill:#eef0f6}.hd-ch-push{fill:#1b2a4a}
.hd-ch-glyph{fill:#fff}
.hd-ch-line{fill:none;stroke:#1b2a4a;stroke-width:1.3;stroke-linejoin:round}
.hd-donebg{fill:#1d7a52}
.hd-donedot{fill:#fff}
.hd-donetick{fill:none;stroke:#1d7a52;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hd-donetext{fill:#fff;font:600 13.5px var(--font);letter-spacing:-.01em}
.hd-donesub{fill:#ffffffd9;font:500 11.5px var(--ui)}
/* the finished picture */
.hd-docs{opacity:0}
.hd-cal{transform:translateX(var(--slide,-320px))}
@media(prefers-reduced-motion:no-preference){
 .hd-docs{animation:hd-docs 16s cubic-bezier(.4,0,.2,1) infinite both}
 .hd-sig1{animation:hd-sig1 16s linear infinite both}.hd-sig2{animation:hd-sig2 16s linear infinite both}
 .hd-signed{animation:hd-signed 16s cubic-bezier(.3,1.5,.5,1) infinite both}
 .hd-lit0{animation:hd-lit0 16s ease infinite both}.hd-lit1{animation:hd-lit1 16s ease infinite both}.hd-lit2{animation:hd-lit2 16s ease infinite both}.hd-lit3{animation:hd-lit3 16s ease infinite both}
 .hd-cal{animation:hd-cal 16s cubic-bezier(.6,.05,.25,1) infinite both}
 .hd-work{animation:hd-work 16s linear infinite both}
 .hd-w1{animation-delay:0.23s}.hd-w2{animation-delay:0.46s}.hd-w3{animation-delay:0.70s}
 .hd-ping{animation:hd-ping 16s ease-out infinite both}
 .hd-p1{animation-delay:0.23s}.hd-p2{animation-delay:0.46s}.hd-p3{animation-delay:0.70s}
 .hd-row{animation:hd-row 16s cubic-bezier(.3,.7,.2,1) infinite both}
 .hd-r1{animation-delay:0.23s}.hd-r2{animation-delay:0.46s}.hd-r3{animation-delay:0.70s}
 .hd-ch{animation:hd-ch 16s cubic-bezier(.3,1.5,.5,1) infinite both}
 .hd-ch0-1{animation-delay:0.20s}.hd-ch0-2{animation-delay:0.41s}
 .hd-ch1-0{animation-delay:0.23s}.hd-ch1-1{animation-delay:0.43s}.hd-ch1-2{animation-delay:0.64s}
 .hd-ch2-0{animation-delay:0.46s}.hd-ch2-1{animation-delay:0.67s}.hd-ch2-2{animation-delay:0.87s}
 .hd-ch3-0{animation-delay:0.70s}.hd-ch3-1{animation-delay:0.90s}.hd-ch3-2{animation-delay:1.10s}
 .hd-done{animation:hd-done 16s cubic-bezier(.3,1.3,.5,1) infinite both}
 .hd-d1{animation-delay:0.45s}.hd-d2{animation-delay:1.9s}.hd-d3{animation-delay:0.9s}
 .hd-tick{animation:hd-tick 16s cubic-bezier(.3,1.5,.5,1) infinite both}
 .hd-k1{animation-delay:0.45s}.hd-k2{animation-delay:1.9s}.hd-k3{animation-delay:0.9s}
 .kpi-fill{animation:hd-ring 16s cubic-bezier(.4,0,.2,1) infinite both}
 .hero-dash .product-demo{animation:card-float 7s ease-in-out infinite}
}
@keyframes hd-docs{0%{opacity:0;transform:translateY(18px)}6%,42%{opacity:1;transform:none}49%,100%{opacity:0;transform:translateX(-140px)}}
@keyframes hd-sig1{0%,6%{stroke-dashoffset:1}12%,100%{stroke-dashoffset:0}}
@keyframes hd-sig2{0%,11%{stroke-dashoffset:1}17%,100%{stroke-dashoffset:0}}
@keyframes hd-signed{0%,17%{opacity:0;transform:scale(0)}20%,100%{opacity:1;transform:scale(1)}}
@keyframes hd-lit0{0%,21%{fill:#e8e6df}23%,100%{fill:#1b2a4a}}
@keyframes hd-lit1{0%,23%{fill:#e8e6df}25%,100%{fill:var(--blue)}}
@keyframes hd-lit2{0%,25%{fill:#e8e6df}27%,100%{fill:var(--violet)}}
@keyframes hd-lit3{0%,27%{fill:#e8e6df}29%,100%{fill:var(--rose)}}
@keyframes hd-cal{0%{opacity:0;transform:none}6%,42%{opacity:1;transform:none}49%,93%{opacity:1;transform:translateX(var(--slide))}99.9%{opacity:0;transform:translateX(var(--slide))}100%{opacity:0;transform:none}}
@keyframes hd-work{0%,29.9%{opacity:0;transform:translate(var(--x0),var(--y0)) scale(.45)}30%{opacity:1;transform:translate(var(--x0),var(--y0)) scale(.45)}31%{transform:translate(var(--x1),var(--y1)) scale(0.519)}32%{transform:translate(var(--x2),var(--y2)) scale(0.588)}33%{transform:translate(var(--x3),var(--y3)) scale(0.656)}34%{transform:translate(var(--x4),var(--y4)) scale(0.725)}35%{transform:translate(var(--x5),var(--y5)) scale(0.794)}36%{transform:translate(var(--x6),var(--y6)) scale(0.863)}37%{transform:translate(var(--x7),var(--y7)) scale(0.931)}38%{transform:translate(var(--x8),var(--y8)) scale(1.000)}39%,100%{opacity:1;transform:none}}
@keyframes hd-ping{0%,49%{opacity:0;transform:scale(.6)}51%{opacity:.9;transform:scale(1)}57%,100%{opacity:0;transform:scale(2.1)}}
@keyframes hd-row{0%,49%{opacity:0;transform:translateX(-60px)}54%,93%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
@keyframes hd-ch{0%,54%{opacity:0;transform:scale(.3)}56.5%{opacity:1;transform:scale(1.2)}58%,93%{opacity:1;transform:scale(1)}99%,100%{opacity:0;transform:scale(1)}}
@keyframes hd-done{0%,62%{opacity:0;transform:scale(.94)}64.5%,93%{opacity:1;transform:scale(1)}99%,100%{opacity:0;transform:scale(1)}}
@keyframes hd-tick{0%,62%{opacity:0;transform:scale(0)}64.5%{opacity:1;transform:scale(1.25)}66%,93%{opacity:1;transform:scale(1)}99%,100%{opacity:0;transform:scale(1)}}
@keyframes hd-ring{0%,76%{stroke-dashoffset:100}86%,93%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}
@media(max-width:680px){.dash-kpis{padding:14px 14px 2px;gap:6px}.kpi{padding:9px;gap:8px}.kpi b{font-size:16px}.kpi-ring,.kpi-badge{width:28px;height:28px}}

/* owners, and the one promise that slips: amber "Due tomorrow" at 59%, escalated to a manager at 65%, done on time at 74% */
.hd-initials{fill:#fff;font:700 8.5px var(--ui);text-anchor:middle;letter-spacing:.02em}
.hd-initials-done{fill:#1d7a52}
.hd-owner,.hd-esc{transform-box:fill-box;transform-origin:center}
.hd-lateline{fill:#fff8e6;stroke:#e0a800;stroke-width:1.4}
.hd-latechip{fill:#fdf1dc}
.hd-latetext{fill:#96560a;font:600 10px var(--ui);text-anchor:middle}
.hd-mgr{fill:#1b2a4a;stroke:#fff;stroke-width:1.5}
.hd-escarrow{fill:none;stroke:#e0a800;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hd-late{opacity:0}
.hd-esc{opacity:0}
@media(prefers-reduced-motion:no-preference){
 .hd-owner{animation:hd-owner 16s cubic-bezier(.3,1.5,.5,1) infinite both}
 .hd-r1 .hd-owner{animation-delay:.23s}.hd-r2 .hd-owner{animation-delay:.46s}.hd-r3 .hd-owner{animation-delay:.7s}
 .hd-late{animation:hd-late 16s ease infinite both}
 .hd-esc{animation:hd-esc 16s cubic-bezier(.3,1.5,.5,1) infinite both}
}
@keyframes hd-owner{0%,52%{opacity:0;transform:scale(0)}54.5%{opacity:1;transform:scale(1.2)}56%,93%{opacity:1;transform:scale(1)}99%,100%{opacity:0;transform:scale(1)}}
@keyframes hd-late{0%,58.5%{opacity:0}60.5%,93%{opacity:1}99%,100%{opacity:0}}
@keyframes hd-esc{0%,64%{opacity:0;transform:translateY(6px) scale(.4)}66%{opacity:1;transform:scale(1.15)}67.5%,93%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}

/* the left side is the badge, the headline, one line and the button: the line grows to carry it */
.fold .hero-copy .intro{font-size:clamp(17px,min(1.6vw,2.6vh),26px);line-height:1.5;margin-top:clamp(14px,3.2vh,30px);max-width:24em;color:var(--slate)}
.fold .hero-actions{margin-top:clamp(18px,4vh,40px)}
@media(max-width:900px){.fold .hero-copy .intro{font-size:clamp(15px,min(4.2vw,2.3vh),19px)}}

/* ============ FOOTER: a Book a demo band on navy, then the thin line (every page) ============ */
.site-footer.f2{position:relative;margin-top:0;padding-block:0 calc(16px + env(safe-area-inset-bottom,0px))!important;border-top:0;border-radius:28px 28px 0 0;background:#101935;color:#eef1f7}
/* footer band trimmed (owner, 10 Oct: "footer ki height thodi kam") */
.f2-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding:clamp(28px,3.4vw,46px) 0 clamp(22px,2.6vw,34px);border-bottom:1px solid #ffffff1f;scroll-margin-top:96px}
.f2-copy{flex:1 1 420px;min-width:0}
.f2-copy h2{margin:0;font-size:clamp(28px,3.3vw,46px);font-weight:500;line-height:1.04;letter-spacing:-.045em;color:#fff}
.f2-gold{position:relative;color:#8fb8ef}
.f2-copy p{margin:8px 0 0;font-size:clamp(16px,1.35vw,19px);color:#aab3c8}
.f2-btn{display:inline-flex;align-items:center;gap:18px;height:56px;padding:0 10px 0 26px;border:0;border-radius:99px;background:#fff;font:600 16px var(--font);color:#101935;cursor:pointer;transition:background-color .2s}
.f2-btn i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#101935;color:#fff;transition:transform .25s var(--ease)}
.f2-btn i .ico{width:17px;height:17px}
.f2-btn:hover{background:#eef2fb}
.f2-btn:hover i{transform:translateX(3px)}
.f2-form{flex:1 1 100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end;gap:14px;animation:panel-in .45s var(--ease) both}
.f2-form label{display:grid;gap:8px;min-width:0}
.f2-form label span{font-size:13.5px;font-weight:500;color:#aab3c8}
.f2-form input{width:100%;min-width:0;height:56px;padding:0 16px;border-radius:14px;border:1.5px solid #ffffff24;background:#ffffff0f;color:#fff;font:500 16px var(--font);transition:border-color .2s,background-color .2s}
.f2-form input::placeholder{color:#6f7a93}
.f2-form input:focus{outline:none;border-color:#8fb8ef;background:#ffffff1a}
.f2-status{grid-column:1/-1;margin:0;min-height:0;font-size:14px;font-weight:600;color:#f4a49c}
.f2-status:empty{display:none}
.f2-done{flex:1 1 100%;display:flex;align-items:flex-start;gap:14px;padding:20px 22px;border-radius:18px;background:#ffffff0f;border:1px solid #8fb8ef55;animation:panel-in .45s var(--ease) both}
.f2-done-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#8fb8ef;color:#101935}
.f2-done-ico .ico{width:20px;height:20px}
.f2-done b{display:block;font-size:18px;color:#fff}
.f2-done p{margin:4px 0 0;font-size:14.5px;color:#c3cadb}
.f2 .foot-line{padding-top:16px}
.f2 .foot-left{color:#8b96ae}
.f2 .foot-left a{color:#eef1f7;text-decoration-color:#ffffff40}
.f2 .foot-left a:hover{text-decoration-color:#8fb8ef}
.f2 .foot-dot{color:#5d6782}
.f2 .foot-soc a{background:#ffffff14;color:#eef1f7}
.f2 .foot-soc a:hover{background:#fff;color:#101935}
@media(max-width:900px){.f2-form{grid-template-columns:1fr}.f2-send{justify-self:stretch;justify-content:space-between}.f2-btn{width:100%;justify-content:space-between}}
@media(max-width:680px){.site-footer.f2{border-radius:22px 22px 0 0}}

/* ============ FOOTER: "Delivered." in a hand-written script that writes itself in; the country code ============ */
/* the script needs room around it, or its loops are cut by the writing mask; it sits a little lower than the line */
.f2-script{display:inline-block;margin:-.22em -.1em -.3em -.06em;padding:.22em .16em .3em .06em;font:600 1.18em/1 NuvenaRound,var(--font);letter-spacing:0;color:#9cc2f2;vertical-align:-.16em}
@media(prefers-reduced-motion:no-preference){
 .f2-script{-webkit-mask-image:linear-gradient(90deg,#000 46%,transparent 54%);mask-image:linear-gradient(90deg,#000 46%,transparent 54%);-webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
 .is-writing .f2-script{animation:f2-write 1.7s cubic-bezier(.45,.05,.4,1) .25s both}
}
@keyframes f2-write{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
.f2-phone{display:grid;gap:8px;min-width:0}
.f2-phone>label{font-size:13.5px;font-weight:500;color:#aab3c8}
.f2-phone-row{display:grid;grid-template-columns:auto minmax(0,1fr);height:56px;border-radius:14px;border:1.5px solid #ffffff24;background:#ffffff0f;overflow:hidden;transition:border-color .2s,background-color .2s}
.f2-phone-row:focus-within{border-color:#8fb8ef;background:#ffffff1a}
.f2-cc{width:96px;min-width:0;height:100%;padding:0 26px 0 14px;border:0;border-right:1px solid #ffffff24;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab3c8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 8px center/14px no-repeat;color:#fff;font:500 15px var(--font);-webkit-appearance:none;appearance:none;cursor:pointer}
.f2-cc:focus{outline:none}
.f2-cc option{color:#101935}
.f2-phone-row input{height:100%;border:0!important;border-radius:0!important;background:transparent!important}
/* customer logos in their own colours */
.cust-track img{filter:none!important;opacity:1!important}
.cust-label{max-width:none}

/* the closed country box shows only the flag and the code; the open list shows every country by name */
.f2-cc-wrap{position:relative;display:flex;align-items:center;width:100px;height:100%;border-right:1px solid #ffffff24}
.f2-cc-face{padding:0 26px 0 14px;font:500 15px var(--font);color:#fff;white-space:nowrap;pointer-events:none}
.f2-cc-wrap:after{content:'';position:absolute;right:10px;top:50%;width:7px;height:7px;margin-top:-5px;border-right:1.6px solid #aab3c8;border-bottom:1.6px solid #aab3c8;transform:rotate(45deg);pointer-events:none}
.f2-cc-wrap .f2-cc{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;opacity:0;cursor:pointer}
.f2-cc-wrap:focus-within{background:#ffffff14}

/* "Delivered." in Quicksand (the wordmark's own face), slanted. Quicksand has no italic of its own, so the browser
   leans the upright letters; the script face stays in the folder in case we go back to it. */
@font-face{font-family:NuvenaRound;src:url('/fonts/Quicksand.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
.f2-script{font:italic 700 1em/1 NuvenaRound,var(--font);letter-spacing:-.02em;color:#9cc2f2;margin:-.12em -.08em -.16em -.04em;padding:.12em .14em .16em .04em;vertical-align:baseline}

/* a date block rides its thread: it scales up from its left edge, which sits on the thread's head */
.hd-work{transform-box:fill-box;transform-origin:0 50%}

/* threads in the hero card: each promise's line in the contract runs to its date (as the date block flies over),
   then, once the calendar has moved left, each date runs to its promise's row (as the row lands) */
.hd-link{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:.75}
.hd-linkdot{fill:currentColor}
.hd-l1{opacity:0}
@media(prefers-reduced-motion:no-preference){
 .hd-l1{animation:hd-l1 16s ease infinite both}.hd-l1 .hd-link{animation:hd-draw1 16s linear infinite both}
 .hd-l2{animation:hd-l2 16s ease infinite both}.hd-l2 .hd-link{animation:hd-draw2 16s cubic-bezier(.5,0,.3,1) infinite both}
 .hd-l1-1,.hd-l1-1 .hd-link,.hd-l2-1,.hd-l2-1 .hd-link{animation-delay:.23s}
 .hd-l1-2,.hd-l1-2 .hd-link,.hd-l2-2,.hd-l2-2 .hd-link{animation-delay:.46s}
 .hd-l1-3,.hd-l1-3 .hd-link,.hd-l2-3,.hd-l2-3 .hd-link{animation-delay:.7s}
}
@keyframes hd-l1{0%,28%{opacity:0}29%,40%{opacity:1}43.5%,100%{opacity:0}}
@keyframes hd-draw1{0%,30%{stroke-dashoffset:1}31%{stroke-dashoffset:0.9619}32%{stroke-dashoffset:0.8536}33%{stroke-dashoffset:0.6913}34%{stroke-dashoffset:0.5}35%{stroke-dashoffset:0.3087}36%{stroke-dashoffset:0.1464}37%{stroke-dashoffset:0.0381}38%,100%{stroke-dashoffset:0}}
@keyframes hd-l2{0%,53%{opacity:0}54%,93%{opacity:1}99%,100%{opacity:0}}
@keyframes hd-draw2{0%,53.5%{stroke-dashoffset:1}58%,100%{stroke-dashoffset:0}}

/* the KPI counters move with the story: auto follow-ups count up with each nudge (35 to 48, the last one the escalation),
   deadlines missed goes amber while "Due tomorrow" stands and green when that promise lands, still at 0 */
@property --fu{syntax:'<integer>';inherits:false;initial-value:48}
.kpi-count{--fu:48;counter-reset:fu var(--fu,48)}
.kpi-count::after{content:counter(fu)}
.kpi-guard b,.kpi-count{transform-origin:0 60%}
.kpi-nudges .ico{transform-origin:50% 12%}
@media(prefers-reduced-motion:no-preference){
 .kpi-count{animation:kpi-fu 16s steps(1,end) infinite both,kpi-fu-look 16s ease infinite both}
 .kpi-nudges .ico{animation:kpi-bell 16s ease-in-out infinite both}
 .kpi-guard .kpi-badge{animation:kpi-guard 16s ease infinite both}
 .kpi-guard b{animation:kpi-guard-n 16s ease infinite both}
}
@keyframes kpi-fu{0%{--fu:35}55.5%{--fu:36}56.75%{--fu:37}56.94%{--fu:38}58.06%{--fu:39}58.19%{--fu:40}58.38%{--fu:41}59.5%{--fu:42}59.69%{--fu:43}59.88%{--fu:44}60.94%{--fu:45}61.12%{--fu:46}62.38%{--fu:47}66%{--fu:48}100%{--fu:48}}
@keyframes kpi-fu-look{0%{opacity:0;transform:translateY(5px)}3%,95%{opacity:1;transform:none}54%{color:var(--ink)}55.5%,63%{color:var(--blue)}67%{color:var(--ink)}99%,100%{opacity:0;color:var(--ink)}}
@keyframes kpi-bell{0%,55%{transform:none}56%{transform:rotate(16deg)}57%{transform:rotate(-13deg)}58%{transform:rotate(10deg)}59%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}61%{transform:rotate(-4deg)}62%,65.5%{transform:none}66.5%{transform:rotate(12deg)}67.5%{transform:rotate(-8deg)}68.5%,100%{transform:none}}
@keyframes kpi-guard{0%,60%{background:#fff;border-color:var(--line);color:#1d7a52;transform:none}61.5%{background:#fff8e6;border-color:#e0a800;color:#b7791f;transform:scale(1.1)}63%,74.5%{background:#fff8e6;border-color:#e0a800;color:#b7791f;transform:none}76%{background:#e8f5ee;border-color:#1d7a52;color:#1d7a52;transform:scale(1.14)}77.5%,93%{background:#e8f5ee;border-color:#1d7a52;color:#1d7a52;transform:none}100%{background:#fff;border-color:var(--line);color:#1d7a52;transform:none}}
@keyframes kpi-guard-n{0%,60%{color:var(--ink);transform:none}61.5%,74.5%{color:#b7791f;transform:none}76%{color:#1d7a52;transform:scale(1.18)}77.5%,93%{color:#1d7a52;transform:none}100%{color:var(--ink);transform:none}}

/* Book a demo (/book) and email preferences (/unsubscribe). On a phone the whole booking fits one screen: one heading line,
   one facts line, six days, ten times, and the confirm row. */
.book{padding-block:140px 80px}
.book-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.book-grid>*{min-width:0}
.book-copy h1{font-size:clamp(40px,4.4vw,62px);font-weight:500;letter-spacing:-.06em;line-height:1.05;margin-top:22px}
.book-blue{color:var(--blue)}
.book-meta{display:none}
.book-facts{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.book-facts li{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink)}
.book-facts .ico,.book-meta .ico{width:20px;height:20px;color:var(--blue);flex:none}
.book-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 25px 55px -38px #10193555}
.book-step{font:600 12px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.book-step span{color:var(--blue)}
.book-days{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:22px}
.book-day{display:grid;justify-items:center;gap:1px;padding:9px 0;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;color:var(--ink)}
.book-day small{font:500 12px var(--ui);color:var(--muted)}
.book-day b{font-size:19px;font-weight:600;line-height:1.2}
.book-day[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff}
.book-day[aria-pressed=true] small{color:#c9d2ea}
.book-times{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:22px}
.book-time{padding:11px 0;border:1px solid var(--line);border-radius:10px;background:#fff;font:600 14px var(--font);color:var(--ink);cursor:pointer;white-space:nowrap}
.book-day:hover,.book-time:hover{border-color:var(--blue)}
.book-time[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}
.book-day:focus-visible,.book-time:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.book-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.book-fields input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:15px var(--font);color:var(--ink);background:#fff}
.book-fields input:focus{outline:2px solid var(--blue);outline-offset:1px}
.book-go{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);padding-top:18px}
.book-sum{flex:1;min-width:0}
.book-sum b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.book-sum small{display:block;font:500 13px var(--ui);color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.book-confirm{flex:none}
.book-confirm:disabled{opacity:.35;cursor:not-allowed}
.book-err{color:#b42318;font-size:14px;margin:0 0 12px}
.book-note{font:500 13px var(--ui);color:var(--muted);margin-top:12px}
.book-when{font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:8px 0 0}
.book-done{text-align:center;padding:10px 0}
.book-done h2{font-size:28px;font-weight:600;letter-spacing:-.03em;margin-top:14px}
.book-done p{color:var(--slate);margin-top:6px}
.book-tick{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#1d7a52;color:#fff}
.book-tick .ico{width:26px;height:26px;stroke-width:2.4}
.unsub-actions{margin-top:30px}
@media(max-width:900px){.book{padding-block:110px 50px}.book-grid{grid-template-columns:1fr;gap:22px}.book-facts{display:none}.book-meta{display:flex;align-items:center;gap:8px;font:500 14px var(--ui);color:var(--slate);margin-top:8px}}
@media(max-width:600px){
 .book{padding-block:78px 28px}
 .book .eyebrow{display:none}
 .book-copy h1{font-size:27px;letter-spacing:-.045em;margin-top:0}
 .book-meta .ico{width:16px;height:16px}
 .book-card{padding:14px 12px;border-radius:16px;margin-top:-6px}
 .book-pick>.book-step{display:none}
 .book-days{gap:6px;margin-bottom:12px}
 .book-day{padding:7px 0;border-radius:10px}
 .book-day small{font-size:11px}
 .book-day b{font-size:17px}
 .book-times{gap:6px;margin-bottom:12px}
 .book-time{padding:8px 0;font-size:13px}
 .book-fields{grid-template-columns:1fr;gap:8px;margin-bottom:12px}
 .book-go{padding-top:12px;gap:10px}
 .book-confirm{min-height:44px}
 .book-sum b{font-size:15px}
 .book-sum small{font-size:12px}
 .book-confirm{padding-inline:20px}
}

/* the footer form, once sent: thanks, then the same picker on a white card inside the navy band */
.f2-book{flex:1 1 100%;display:grid;gap:16px;animation:panel-in .45s var(--ease) both}
.f2-book .f2-done{animation:none}
.f2-book-card{color:var(--ink);max-width:720px}
.f2-book-card .book-times{grid-template-columns:repeat(8,minmax(0,1fr))}
@media(max-width:900px){.f2-book-card .book-times{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---- Section 2 (Today in App.js): the hero card's promises without follow-through. Same card language as the hero. */
.td{padding:clamp(16px,4vh,56px) 0 clamp(56px,10vh,120px)}
.td-layout{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(36px,6vw,96px);align-items:center}
.td-copy h2{margin:0;font-size:clamp(36px,4.3vw,66px);font-weight:500;letter-spacing:-.06em;line-height:1.04;color:var(--ink)}
.td-copy h2 span{color:var(--blue)}
.td-copy p{margin:clamp(14px,2.2vh,22px) 0 0;max-width:30ch;font-size:clamp(16px,1.35vw,20px);line-height:1.45;color:var(--slate)}
.td-card{background:#fff;border:1px solid #dfe1e8;border-radius:18px;box-shadow:0 25px 55px -33px #10193550,0 3px 8px -5px #10193510;overflow:hidden}
.td-top{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid #eceef3;font:500 12px var(--ui);color:var(--muted)}
.td-top span{display:flex;align-items:center;gap:8px}
.td-top .ico{width:15px;height:15px}
.td-top b{font:600 13px var(--ui);color:var(--ink);font-variant-numeric:tabular-nums}
.td-kpis{padding-top:16px}
.td-unknown{color:var(--muted)!important}
.td-badge{color:var(--muted)}
.td-bad .td-badge{color:var(--rose);border-color:#f3c4d3;background:#fdf2f5}
.td-bad b{color:var(--rose)!important}
.td-mute{color:#b7bccb}
.td-rows{display:grid;gap:10px;padding:14px 24px 24px}
.td-row{display:grid;grid-template-columns:4px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border:1px solid #e3e4ea;border-radius:13px;background:#fff;transition:border-color .5s,background-color .5s}
.td-amber{border-color:#efd59a;background:#fffcf3}
.td-rose{border-color:#f0c2d1;background:#fff8fa}
.td-bar{display:block;width:4px;height:30px;border-radius:2px}
.td-main{min-width:0}
.td-main>b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 13.5px/1.2 var(--font);letter-spacing:-.01em;color:var(--ink)}
.td-meta{display:flex;align-items:center;gap:8px;margin-top:6px}
.td-ch{display:flex;gap:4px}
.td-ch i{display:block;width:14px;height:14px;border-radius:4px;background:#eef0f4}
.td-chip{padding:2px 8px;border-radius:9px;font:600 10.5px/1.45 var(--ui);white-space:nowrap;background:#f1f2f5;color:var(--slate);transition:background-color .5s,color .5s}
.td-amber .td-chip{background:#fdf1dc;color:#96560a}
.td-rose .td-chip{background:#fbe3ea;color:#a3224f}
.td-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.td-side small{font:500 11.5px var(--ui);color:var(--muted)}
.td-owner{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:700 8.5px var(--ui);letter-spacing:.02em;color:#fff}
.td-none{background:#fff!important;border:1.5px dashed #b7bccb;color:var(--muted);font-size:10px}
@media(max-width:900px){.td-layout{grid-template-columns:minmax(0,1fr);gap:28px;max-width:640px;margin:auto}.td-copy{order:-1;text-align:center}.td-copy p{margin-inline:auto}}
@media(max-width:560px){.td-kpis{padding:12px 12px 0;gap:6px}.td-kpis .kpi{padding:9px 10px}.td-kpis .kpi-ring,.td-kpis .kpi-badge{display:none}.td-kpis .kpi b{font-size:17px}.td-kpis .kpi small{font-size:10.5px}.td-top{padding:11px 14px}.td-rows{padding:10px 12px 14px;gap:7px}.td-row{gap:10px;padding:8px 10px}.td-main>b{font-size:13px}.td-ch{display:none}}

/* ---- Sections 2 and 3 (Doors and PlatformParts in App.js), on harvey.ai's pattern: real product screens on deep,
   painted-looking grounds (a fine grain and a slow cloud, both drawn by SVG noise), calm type, almost no words. */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--cloud:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600' preserveAspectRatio='none'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .012' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E")}
.sec-head{max-width:1040px;margin:0 auto clamp(28px,5vh,56px);text-align:center}
.sec-head h2{margin:0;font-size:clamp(32px,3.6vw,56px);font-weight:500;letter-spacing:-.05em;line-height:1.06;color:var(--ink)}
.sec-head p{margin:clamp(12px,1.8vh,18px) auto 0;max-width:64ch;text-wrap:balance;font-size:clamp(15px,1.2vw,18px);line-height:1.5;color:var(--slate)}
.doors{padding:clamp(72px,13vh,150px) 0 clamp(56px,9vh,110px)}
.door-grid{display:flex;gap:clamp(12px,1.2vw,18px)}
/* Harvey's hover: the card you point at widens, the other narrows and greys out; the gap between them stays */
.door{flex:1 1 0;min-width:0;transition:flex-grow .7s var(--ease),filter .5s var(--ease),opacity .5s var(--ease)}
/* Navio OS leads: wider at rest (about 60/40), and wider still when it is the one pointed at */
.door.door-ipad{flex-grow:1.5}
@media(hover:hover) and (min-width:901px){.door-grid .door.door-ipad:hover,.door-grid .door.door-ipad:focus-visible{flex-grow:1.9}}
@media(hover:hover) and (min-width:901px){.door-grid:has(.door:hover) .door:not(:hover),.door-grid:has(.door:focus-visible) .door:not(:focus-visible){flex-grow:.78;filter:grayscale(1) brightness(.97);opacity:.8}.door-grid .door:hover,.door-grid .door:focus-visible{flex-grow:1.28}}
.door{position:relative;display:flex;flex-direction:column;min-height:clamp(500px,66vh,660px);overflow:hidden;border-radius:20px;color:var(--ink);text-decoration:none;background:#e7ecf4}
.door-onit{background:#ece8f4}
.door-copy{flex:none;padding:clamp(24px,2.6vw,40px) clamp(24px,2.8vw,42px) 0}
.door-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.door-tag{font:600 11px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.door-cta{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#fff;font:600 13px var(--ui);color:var(--ink);box-shadow:0 1px 2px #1019351a;transition:background-color .25s,color .25s}
.door-cta .ico{width:14px;height:14px;transition:transform .25s var(--ease)}
.door:hover .door-cta,.door:focus-visible .door-cta{background:var(--ink);color:#fff}
.door:hover .door-cta .ico,.door:focus-visible .door-cta .ico{transform:translateX(3px)}
.door h3{margin:clamp(14px,2vh,22px) 0 0;font-size:clamp(28px,2.6vw,40px);font-weight:500;letter-spacing:-.04em;line-height:1.05}
.door-copy p{margin:12px 0 0;max-width:470px;font-size:clamp(15px,1.15vw,17px);line-height:1.45;color:var(--slate)}
/* the screen sits in its own space under the words, so the two never meet; it keeps one size while the card widens or narrows */
.door-shot{position:relative;flex:1 1 auto;min-height:clamp(230px,30vh,330px);margin:clamp(22px,3.4vh,36px) 0 0 clamp(24px,4vw,64px);overflow:hidden;border:1px solid #d3d9e4;border-right:0;border-bottom:0;border-radius:12px 0 0 0;background:#fff;box-shadow:0 -10px 34px -16px #10193540;transition:transform .6s var(--ease)}
.door-shot img{position:absolute;left:0;top:0;display:block;width:clamp(560px,54vw,920px);max-width:none;height:auto}
.door:hover .door-shot{transform:translateY(-4px)}
.door-onit .door-shot{flex:1 1 auto;align-self:flex-end;width:clamp(220px,18vw,290px);margin:clamp(22px,3.4vh,36px) clamp(36px,6vw,104px) 0 0;border:7px solid #0b0b14;border-bottom:0;border-radius:34px 34px 0 0;background:#0b0b14;box-shadow:0 -12px 40px -16px #10193566}
.door-onit .door-shot img{width:100%;max-width:100%;border-radius:27px 27px 0 0}
.door-onit .door-shot{width:clamp(250px,20vw,310px)}
.parts{padding:clamp(56px,9vh,110px) 0 clamp(64px,11vh,130px)}
.parts-grid{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);gap:clamp(24px,3.4vw,56px);align-items:center}
.parts-list{display:grid;gap:4px}
.part button{position:relative;width:100%;padding:14px 4px 16px;border:0;border-top:1px solid var(--line);background:none;text-align:left;cursor:pointer;color:var(--muted);font:inherit}
.part:first-child button{border-top:0}
.part button{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:baseline}
.part em{font:600 12px var(--ui);font-style:normal;letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums;transition:color .3s}
.part.on em{color:var(--blue)}
.part b{display:block;font-size:clamp(20px,1.7vw,26px);font-weight:500;letter-spacing:-.03em;color:var(--muted);transition:color .3s}
.part button>span{grid-column:2}
.part button>span{display:block;max-height:0;overflow:hidden;opacity:0;margin-top:0;font-size:15px;line-height:1.45;color:var(--slate);transition:max-height .5s var(--ease),opacity .4s,margin-top .4s}
.part.on b,.part button:hover b{color:var(--ink)}
.part.on button>span{max-height:80px;opacity:1;margin-top:8px}
.part-bar{position:absolute;left:4px;right:4px;bottom:-1px;height:2px;border-radius:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;opacity:0}
.part.on .part-bar{opacity:1;animation:part-fill 6s linear both}
.parts-held .part-bar{display:none}
@keyframes part-fill{to{transform:scaleX(1)}}
.part-inline{display:none}
.parts-stage{position:relative;isolation:isolate;aspect-ratio:16/11;overflow:hidden;border-radius:20px;background:#e7ecf4}
.parts-frame{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.parts-frame.on{opacity:1}
.parts-frame .part-shot{position:absolute;left:7%;top:8%;right:0;bottom:0;overflow:hidden;border-radius:12px 0 0 0;box-shadow:0 18px 50px -20px #10193566,0 2px 6px -2px #10193522;background:#fff;transform:translateY(14px);transition:transform .8s var(--ease)}
.parts-frame.on .part-shot{transform:none}
.part-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.parts-frame .part-shot.is-phone{left:50%;right:auto;width:clamp(200px,36%,290px);margin-left:calc(clamp(200px,36%,290px) / -2);top:9%;border-radius:34px 34px 0 0;border:7px solid #0b0b14;border-bottom:0;background:#0b0b14}
.part-shot.is-phone img{border-radius:27px 27px 0 0}
@media(max-width:900px){.door-grid{flex-direction:column}.door{flex:none;min-height:0}.door-shot{flex:none;height:clamp(260px,44vw,380px);min-height:0}.door-ipad .door-shot{height:auto;width:min(560px,calc(100% - 48px))}.door-onit .door-shot{height:clamp(300px,50vw,420px)}
  .parts-grid{grid-template-columns:minmax(0,1fr)}.parts-stage{display:none}.part-inline{display:block;position:relative;isolation:isolate;overflow:hidden;margin:0 0 14px;border-radius:16px;background:#e7ecf4;aspect-ratio:16/11}
  .part-inline .part-shot{position:absolute;left:6%;top:7%;right:0;bottom:0;overflow:hidden;border-radius:10px 0 0 0;box-shadow:0 14px 40px -18px #10193566;background:#fff}
  .part-inline .part-shot.is-phone{left:50%;right:auto;width:44%;margin-left:-22%;border-radius:26px 26px 0 0;border:6px solid #0b0b14;border-bottom:0;background:#0b0b14}
  .part-inline .part-shot.is-phone img{border-radius:20px 20px 0 0}}
@media(max-width:560px){.door{min-height:0}.door-shot{flex:none;height:250px;min-height:0;margin-left:20px}.door-ipad .door-shot{height:auto;width:calc(100% - 40px);border-width:8px;border-radius:20px}.door-ipad .door-shot img{border-radius:12px}.door-shot img{width:620px}.door-onit .door-shot{flex:none;align-self:center;margin:24px 0 0;width:220px;height:300px}.part b{font-size:20px}}
@media(prefers-reduced-motion:reduce){.part.on .part-bar{animation:none;transform:scaleX(1)}.door-shot,.parts-frame,.parts-frame .part-shot{transition:none}}

/* On It's card on hover (desktop): the phone turns slowly to its Updates, then pills on strings come out beside it */
.door-onit .door-img1{opacity:0;transform:scale(1.015);transition:opacity 1.3s var(--ease) .1s,transform 1.8s var(--ease)}
.door-onit:hover .door-img1,.door-onit:focus-visible .door-img1{opacity:1;transform:none}
.door-callouts{position:absolute;inset:0;z-index:2;pointer-events:none}
.door-leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.door-leader{fill:none;stroke:var(--ink);stroke-opacity:.38;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .3s ease}
.door-leader-dot{fill:#fff;stroke:var(--ink);stroke-width:1.5;opacity:0;transition:opacity .2s}
.door-callout{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:#fff;font:600 13px var(--ui);color:var(--ink);white-space:nowrap;box-shadow:0 14px 34px -14px #10193566,0 3px 10px -6px #10193540;opacity:0;margin-left:-10px;transition:opacity .25s,margin-left .25s}
.door-callout i{width:7px;height:7px;border-radius:50%;background:var(--violet)}
@media(hover:hover) and (min-width:901px){
  .door:hover .door-leader,.door:focus-visible .door-leader{stroke-dashoffset:0;transition:stroke-dashoffset .55s ease-out calc(.9s + var(--i)*.18s)}
  .door:hover .door-leader-dot,.door:focus-visible .door-leader-dot{opacity:1;transition:opacity .25s calc(1.35s + var(--i)*.18s)}
  .door:hover .door-callout,.door:focus-visible .door-callout{opacity:1;margin-left:0;transition:opacity .35s ease-out calc(.75s + var(--i)*.18s),margin-left .35s ease-out calc(.75s + var(--i)*.18s)}}
.door-callout-right{margin-left:10px}
/* Navio OS leads and is wider at rest (owner, 6 Oct night): its four steps stay beside the iPad even before it is pointed at,
   the first one lit, so the card's open side says what Navio OS does; pointing at it plays the steps as before */
@media(hover:hover) and (min-width:901px){.door-ipad .door-callout{opacity:1;margin-left:0}}
.door-ipad .door-callout i{background:var(--blue)}
/* Navio OS on an iPad (landscape), whole device in view, sitting under the words */
.door-ipad .door-shot{flex:none;align-self:flex-start;width:clamp(400px,30vw,540px);aspect-ratio:auto;min-height:0;margin:clamp(22px,3.4vh,36px) 0 clamp(26px,3.6vh,40px) clamp(24px,4vw,64px);border:11px solid #0b0b14;border-radius:26px;background:#0b0b14;box-shadow:0 26px 50px -24px #10193580,0 4px 12px -6px #10193540}
.door-ipad .door-shot img{position:static;width:100%;max-width:100%;border-radius:15px}
.door:hover.door-ipad .door-shot{transform:translateY(-4px)}
@media(hover:none),(max-width:900px){.door-callouts{display:none}}
@media(prefers-reduced-motion:reduce){.door-onit .door-img1,.door-leader,.door-callout{transition:none!important}}
@media(max-width:900px){.door-ipad .door-shot{width:min(560px,calc(100% - 48px));margin-left:24px}}
@media(max-width:560px){.door-ipad .door-shot{width:calc(100% - 40px);margin-left:20px;border-width:8px;border-radius:20px}.door-ipad .door-shot img{border-radius:12px}}

/* The logo strip sits on the page's own off-white, like the sections above it. Two logos carry a white box, so the logos
   multiply onto the strip's background (painted on .cust-roll so the blend has something to land on inside its mask). */
.cust{background:var(--bg)}
.cust-roll{background:var(--bg)}
.cust-track img{mix-blend-mode:multiply}

/* Book a Demo, on the header, the hero and the footer: a fine gold line runs around the button all the time, with a bright
   highlight travelling round it and a soft gold glow. The glow sits behind the button, so the button's parent is its own layer
   and the button doesn't lift on hover (a lift would put the glow on top of the fill). */
.ring{--ring-fill:var(--action-dark);border:2px solid transparent}
.ring,.ring:hover{background:linear-gradient(var(--ring-fill),var(--ring-fill)) padding-box,conic-gradient(from var(--spin),#c99a3c 0turn,#c99a3c .62turn,#e6bf62 .76turn,#fff4d2 .86turn,#e6bf62 .95turn,#c99a3c 1turn) border-box}
.ring:hover{--ring-fill:var(--action-dark)}
.ring::before{inset:-4px;background:conic-gradient(from var(--spin),transparent 0turn,transparent .68turn,#d9ad4a59 .78turn,#f1cd6fcc .86turn,#d9ad4a59 .94turn,transparent 1turn);filter:blur(7px)}
.hero-actions,.f2-cta,.cta-wrap{isolation:isolate}
.button.ring:hover{transform:none;box-shadow:none}
.f2-btn.ring{--ring-fill:#fff}
.f2-btn.ring:hover{--ring-fill:#eef2fb}
/* the hero's second door: See How, down to the platform */
.hero-more .ico{transform:rotate(90deg)}
.hero-more:hover .ico{transform:rotate(90deg) translateX(3px)}

/* Company menu: one short list, no preview */
.mm-co{width:min(360px,calc(100vw - 32px))}
.mm-co .mm-list{border-right:0}

/* Trust Center (was Security): facts strip, dedicated deployments (drawn), providers' marks, automation pipeline, hourly
   backups, security layers, DPDP. Loops are gentle; paused/reduced motion shows the finished, still state. */
.tc-top{padding-bottom:clamp(8px,2vh,20px)}
.tc-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:1080px;margin:0 auto;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 24px 50px -38px #10193559}
.tc-facts div{padding:clamp(18px,2.2vw,28px) clamp(14px,2vw,28px);text-align:center}
.tc-facts div+div{border-left:1px solid var(--line)}
.tc-facts dt{font-size:clamp(20px,2vw,28px);font-weight:600;letter-spacing:-.03em;line-height:1.15;color:var(--ink)}
.tc-facts dd{margin:6px 0 0;font-size:14px;line-height:1.4;color:var(--slate)}
.tc-sec{padding-block:clamp(56px,9vh,96px) 0}
.tc-last{padding-bottom:clamp(56px,9vh,96px)}
.tc-band{margin-top:clamp(56px,9vh,96px);padding-bottom:clamp(56px,9vh,96px);border-block:1px solid var(--line);background:#fff}
.tc-ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:#e7ecf4;color:var(--blue)}
.tc-ico .ico{width:20px;height:20px}
.tc-tag{display:inline-block;padding:4px 10px;border-radius:99px;background:#e7ecf4;font:600 10px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
/* one-line points: icon, bold name, one line */
.tc-runs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tc-runs article{display:flex;align-items:flex-start;gap:16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:#fff}
.tc-runs h3{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.tc-runs p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--slate)}
.tc-gains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 0;padding:0;list-style:none}
.tc-steps{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.tc-gains li,.tc-steps li{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:#fff}
.tc-gains b,.tc-steps b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.tc-gains div span,.tc-steps div span{display:block;margin-top:2px;font-size:14px;line-height:1.45;color:var(--slate)}
/* providers */
.tc-prov{display:grid;gap:14px;max-width:1180px;margin:0 auto}
.tc-prow{display:grid;grid-template-columns:250px minmax(0,1fr);align-items:center;gap:28px;padding:20px 22px 20px 26px;border:1px solid var(--line);border-radius:20px;background:var(--bg)}
.tc-plabel p{margin:10px 0 0;font-size:15px;line-height:1.45;color:var(--slate)}
.tc-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.tc-logos li{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:112px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.tc-logos li.first{border-color:#a9c2e6;box-shadow:0 0 0 3px #2364a814}
.tc-logos em{position:absolute;top:-10px;left:50%;padding:3px 10px;border-radius:99px;background:var(--blue);font:600 10px/1.4 var(--ui);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:#fff;transform:translateX(-50%)}
.tc-logos small{font-size:12.5px;line-height:1.3;text-align:center;color:var(--muted)}
.tc-lk{display:flex;align-items:center;gap:12px}
.tc-l-gemini-logo{height:28px}
.tc-logos img{width:auto;max-width:100%;flex:none}
.tc-l-aws{height:46px}
.tc-l-azure,.tc-l-vertex-ai{height:34px}
.tc-l-google-cloud{height:25px}
.tc-l-anthropic{height:15px}
.tc-l-openai{height:27px}
.tc-logos b{font:500 19px/1 var(--ui);letter-spacing:-.01em;color:#3c4043;white-space:nowrap}
/* our AI as a stack: your work, our three layers, the models (Gemini first); a light rises from the models up */
.tc-stack{display:grid;gap:10px;max-width:900px;margin:0 auto}
.tc-st-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;border-radius:16px;background:var(--ink)}
.tc-st-top small{font:600 10px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:#9aa3bd}
.tc-st-top b{font-size:17px;font-weight:600;color:#fff}
.tc-st-layer,.tc-st-models{border:1px solid var(--line);border-radius:16px;animation:tc-rise 6s infinite backwards;animation-delay:calc(var(--i)*.9s)}
.tc-st-layer{display:grid;grid-template-columns:40px 170px minmax(0,1fr);align-items:center;gap:16px;padding:14px 20px;background:#fff}
.tc-st-layer b{font-size:16px;font-weight:600;color:var(--ink)}
.tc-st-layer>span:last-child{font-size:14.5px;line-height:1.45;color:var(--slate)}
.tc-st-models{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:14px 20px;background:#e7ecf4}
.tc-st-models small{width:170px;margin-left:56px;font:600 10px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.tc-st-models ul{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.tc-st-models li{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:99px;background:#fff}
.tc-st-models li b{font-size:14.5px;font-weight:600;color:var(--ink)}
.tc-st-models li.first{box-shadow:0 0 0 1.5px var(--blue)}
.tc-st-models img{width:18px;height:18px}
.tc-st-models em{font:600 10px/1.4 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
@keyframes tc-rise{0%,4%{border-color:var(--line);box-shadow:none}10%,24%{border-color:#9fbbe3;box-shadow:0 0 0 4px #2364a814}32%,100%{border-color:var(--line);box-shadow:none}}
/* connectors: Google Workspace first, Microsoft 365 after */
.tc-conn{display:grid;gap:14px}
.tc-crow{display:grid;grid-template-columns:230px minmax(0,1fr);align-items:center;gap:24px;padding:20px 24px;border:1px solid var(--line);border-radius:20px;background:#fff}
.tc-cbrand b{font:500 19px/1 var(--ui);letter-spacing:-.01em;white-space:nowrap;color:#3c4043}
.tc-l-workspace{height:24px;width:auto}
.tc-l-m365{height:30px;width:auto}
.tc-crow ul{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.tc-crow li{display:flex;flex-direction:column;align-items:center;gap:8px;width:104px;padding:14px 6px 12px;border-radius:14px;background:var(--bg);font-size:13px;color:var(--slate)}
.tc-crow li img{width:32px;height:32px}
.tc-tm{margin:18px auto 0;text-align:center;font-size:12px;color:var(--muted)}
/* automation: the pipeline, lit in turn, and the zero */
.tc-pipe{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:16px}
.tc-flow{padding:34px clamp(14px,3vw,40px) 30px;border:1px solid var(--line);border-radius:20px;background:#fff}
.tc-run{position:relative}
.tc-track{position:absolute;left:10%;right:10%;top:25px;height:2px;border-radius:2px;background:#dfe5ef;overflow:hidden}
.tc-track i{position:absolute;inset:0 auto 0 0;width:22%;background:linear-gradient(90deg,#2364a800,var(--blue));animation:tc-run 7s linear infinite}
.tc-run ol{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none}
.tc-run li{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.tc-pn{display:grid;place-items:center;width:52px;height:52px;border:1.5px solid #d6deeb;border-radius:50%;background:#fff;color:var(--blue);animation:tc-lit 7s infinite backwards;animation-delay:calc(var(--i)*1.4s)}
.tc-pn .ico{width:22px;height:22px}
.tc-run b{font-size:14px;font-weight:600;line-height:1.3;color:var(--ink)}
@keyframes tc-run{from{transform:translateX(-100%)}to{transform:translateX(460%)}}
@keyframes tc-lit{0%,4%{background:#fff;color:var(--blue);border-color:#d6deeb;box-shadow:none}8%,22%{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 0 0 6px #2364a81f}30%,100%{background:#fff;color:var(--blue);border-color:#d6deeb;box-shadow:none}}
.tc-zero{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;border-radius:20px;background:var(--ink);text-align:center}
.tc-zero b{font-size:clamp(64px,6vw,88px);font-weight:600;line-height:1;letter-spacing:-.05em;color:#fff}
.tc-zero span{margin-top:8px;font-size:14px;color:#c9cfe0}
/* backups: today's 24 hourly copies roll in, left to right */
.tc-backup{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px}
.tc-bk{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:clamp(20px,2.4vw,32px);border:1px solid var(--line);border-radius:20px;background:#fff}
.tc-bk-top{display:flex;align-items:center;justify-content:space-between}
.tc-bk-top b{font-size:15px;font-weight:600;color:var(--ink)}
.tc-bk-top span{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;background:#e9f6ef;font:600 12px var(--ui);color:#1f7a4d}
.tc-bk-top .ico{width:14px;height:14px}
.tc-bars{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:4px;height:84px}
.tc-bars i{border-radius:4px;background:var(--blue);animation:tc-fill 9.6s infinite backwards;animation-delay:calc(var(--i)*.3s)}
@keyframes tc-fill{0%{opacity:.16}3%,80%{opacity:1}92%,100%{opacity:.16}}
.tc-bk-axis{display:flex;justify-content:space-between;font:500 11px var(--ui);color:var(--muted)}
.tc-bk-rp{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:8px 14px;border-radius:12px;background:var(--bg);font-size:13.5px;color:var(--slate)}
.tc-bk-rp .ico{width:16px;height:16px;color:var(--blue)}
.tc-bk-rp b{font-weight:600;color:#1f7a4d}
/* security layers */
.tc-ai{display:flex;align-items:center;gap:18px;margin-bottom:16px;padding:20px 24px;border:1px solid #ddd6f3;border-radius:18px;background:linear-gradient(110deg,#f3f6fc,#f5f1fc 60%,#fcf1f5);transition:box-shadow .25s,border-color .25s}
.tc-ai:hover{border-color:#c9bdf0;box-shadow:0 22px 44px -32px #10193580}
.tc-ai .tc-ico{background:linear-gradient(135deg,#2364a8,#6a4fb8 55%,#c8326a);color:#fff}
.tc-ai div{flex:1;min-width:0}
.tc-ai h3{font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.tc-ai p{margin-top:4px;font-size:15px;line-height:1.5;color:var(--slate)}
.tc-ai-go{display:inline-flex;align-items:center;gap:8px;flex:none;font:600 14px var(--ui);color:var(--ink)}
.tc-ai-go .ico{width:16px;height:16px;transition:transform .2s}
.tc-ai:hover .tc-ai-go .ico{transform:translateX(3px)}
.tc-layers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tc-layers article{padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff}
.tc-layers .tc-ico{margin-bottom:18px}
.tc-layers h3{font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.tc-layers p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--slate)}
.tc-app{display:flex;flex-wrap:wrap;align-items:center;gap:14px 40px;margin-top:16px;padding:20px 24px;border:1px solid var(--line);border-radius:18px;background:#fff}
.tc-app h3{font-size:16px;font-weight:600;color:var(--ink)}
.tc-app ul{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0;padding:0;list-style:none}
.tc-app li{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--slate)}
.tc-app li .ico{width:16px;height:16px;color:var(--blue)}
/* DPDP: who is who, the eight duties, the grievance desk */
.tc-dpdp{padding:clamp(24px,4vw,52px);border-radius:24px;background:#e7ecf4}
.tc-dpdp-head{max-width:760px;margin:0 auto;text-align:center}
.tc-dpdp-head .eyebrow{justify-content:center}
.tc-dpdp-head h2{margin-top:14px;font-size:clamp(30px,3.4vw,50px);font-weight:500;letter-spacing:-.05em;line-height:1.08;color:var(--ink)}
.tc-dpdp-head>p:not(.eyebrow){margin-top:12px;font-size:clamp(15px,1.2vw,18px);line-height:1.5;color:var(--slate)}
.tc-roles{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;max-width:900px;margin:clamp(24px,4vh,40px) auto 0}
.tc-role{display:grid;gap:4px;padding:18px 22px;border-radius:16px;background:#fff}
.tc-role small{font:600 10px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tc-role b{font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.tc-role span{font-size:14.5px;line-height:1.45;color:var(--slate)}
.tc-role.k{background:var(--ink)}
.tc-role.k small{color:#9aa3bd}
.tc-role.k b{color:#fff}
.tc-role.k span{color:#c9cfe0}
.tc-role-go{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--blue)}
.tc-note{margin:12px 0 0;text-align:center;font-size:13px;color:var(--slate)}
.tc-law{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:clamp(20px,3vh,32px) 0 0;padding:0;list-style:none}
.tc-law li{display:grid;align-content:start;gap:4px;padding:18px 20px;border-radius:16px;background:#fff}
.tc-law small{font:600 11px var(--ui);letter-spacing:.08em;color:var(--blue)}
.tc-law b{margin-top:4px;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.tc-law span{font-size:14px;line-height:1.45;color:var(--slate)}
.tc-desk{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 28px;margin-top:12px;padding:14px 20px;border-radius:16px;background:#fff}
.tc-desk>a:first-child{display:grid;gap:2px}
.tc-desk small{font-size:12px;color:var(--muted)}
.tc-desk b{font-size:16px;font-weight:600;color:var(--ink)}
.tc-desk p{font-size:14px;line-height:1.5;color:var(--slate)}
@media(max-width:1000px){.tc-runs{grid-template-columns:1fr}.tc-crow{grid-template-columns:1fr;gap:16px}.tc-prow{grid-template-columns:1fr;gap:20px}.tc-pipe,.tc-backup{grid-template-columns:1fr}.tc-zero{flex-direction:row;gap:16px;padding:18px 24px}.tc-zero b{font-size:56px}.tc-zero span{margin:0;font-size:16px}.tc-gains,.tc-gains.three,.tc-layers{grid-template-columns:repeat(2,minmax(0,1fr))}.tc-law{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.tc-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.tc-facts div:nth-child(3){border-left:0}.tc-facts div:nth-child(n+3){border-top:1px solid var(--line)}.tc-roles,.tc-desk{grid-template-columns:1fr}.tc-role-go{margin:auto;transform:rotate(90deg)}}
@media(max-width:700px){.tc-ai{flex-wrap:wrap;align-items:flex-start}.tc-ai-go{width:100%;padding-left:58px}}
@media(max-width:560px){.tc-gains,.tc-gains.three,.tc-layers,.tc-law,.tc-logos{grid-template-columns:1fr}.tc-logos{gap:18px}.tc-logos li{height:96px}.tc-st-top{flex-direction:column;align-items:flex-start;gap:4px}.tc-st-layer{grid-template-columns:40px minmax(0,1fr);gap:4px 14px;padding:14px 16px}.tc-st-layer .tc-ico{grid-row:span 2}.tc-st-models{padding:14px 16px}.tc-st-models small{width:auto;margin:0}.tc-crow{padding:18px 16px}.tc-crow li{width:calc(33.33% - 7px)}.tc-flow{padding:24px 6px 20px}.tc-pn{width:42px;height:42px}.tc-pn .ico{width:18px;height:18px}.tc-track{top:20px}.tc-run b{font-size:12px}.tc-bars{gap:2px;height:64px}.tc-layers article{padding:20px}.tc-layers .tc-ico{margin-bottom:12px}.tc-app{padding:18px 20px}}

/* ============ Section 2's devices: drawn screens that move through each product's steps ============ */
.door-ipad .door-shot{aspect-ratio:840/584;height:auto;background:#0b0b14}
.dv-screen{position:absolute;inset:0;overflow:hidden;border-radius:15px;background:#f6f7f9}
.door-onit .dv-screen{border-radius:27px 27px 0 0;background:#f4f3f0}
.dv-canvas{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--k,1));font-family:var(--ui);color:#101935;-webkit-font-smoothing:antialiased}
.dv-canvas *{box-sizing:border-box}
.dv-step{position:absolute;opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.dv-step.on{opacity:1;transform:none}
@keyframes dv-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes dv-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes dv-out{to{opacity:0;transform:scale(.92)}}
@keyframes dv-drop{from{opacity:0;transform:translateY(-14px) scale(.97)}}

/* Navio OS, 840 × 584 */
.dv-os{position:absolute;inset:0;background:#f6f7f9}
.dv-rail{position:absolute;left:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:5px;width:56px;padding-top:12px;border-right:1px solid #e8e9ee;background:#fbfbfc}
.dv-logo{margin-bottom:12px;font:800 21px/1 var(--font);color:#101935}
.dv-ri{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:#8a90a3;transition:background-color .6s,color .6s}
.dv-ri .ico{width:16px;height:16px}
.dv-ri.on{background:#e7ecf4;color:var(--blue)}
.dv-av{display:grid;place-items:center;width:28px;height:28px;margin:auto 0 12px;border-radius:50%;background:#f3e3d3;color:#9a5b1f;font:600 10px var(--ui)}
.dv-top{position:absolute;left:56px;right:0;top:0;display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 20px;border-bottom:1px solid #eceef2}
.dv-search{display:flex;align-items:center;justify-content:space-between;width:300px;height:30px;padding:0 8px 0 12px;border:1px solid #e1e4ea;border-radius:8px;background:#fff;font-size:11.5px;color:#8a90a3}
.dv-search kbd{padding:1px 5px;border:1px solid #e1e4ea;border-radius:4px;font:500 9.5px var(--ui);color:#6b7186}
.dv-top-r{display:flex;align-items:center;gap:14px;color:#4d5672}
.dv-bell{position:relative;display:grid;place-items:center;width:28px;height:28px}
.dv-bell .ico{width:16px;height:16px;transform-origin:50% 10%}
.dv-bell i{position:absolute;top:5px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--rose)}
.dv-bell.dv-ringing .ico{animation:dv-ring .9s ease-in-out .25s 2}
@keyframes dv-ring{20%{transform:rotate(16deg)}40%{transform:rotate(-13deg)}60%{transform:rotate(9deg)}80%{transform:rotate(-5deg)}}
.dv-plus{font:300 22px/1 var(--ui)}
.dv-os .dv-step{left:76px;right:20px;top:62px;bottom:0}
.dv-head{display:flex;align-items:center;gap:12px;height:30px;margin-bottom:12px}
.dv-head h4{margin:0;font:600 20px var(--font);letter-spacing:-.02em;color:#101935}
.dv-head small{font-size:12px;color:#80879b}
.dv-card{padding:12px 14px;border:1px solid #e6e8ee;border-radius:10px;background:#fff}
.dv-ct{display:flex;align-items:center;gap:6px;margin:0;font:600 11.5px var(--ui);color:#101935}
.dv-ct em{font-style:normal;font-weight:500;color:#80879b}
.dv-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dv-kpi{padding:10px 12px;border:1px solid #e6e8ee;border-radius:10px;background:#fff}
.dv-kpi small{display:block;font-size:10.5px;color:#80879b}
.dv-kpi b{display:block;margin-top:2px;font:600 22px var(--font);letter-spacing:-.02em}
.dv-kpi b.blue{color:var(--blue)}.dv-kpi b.rose{color:var(--rose)}.dv-kpi b.violet{color:var(--violet)}
.dv-step.on .dv-kpi{animation:dv-up .6s var(--ease) calc(var(--d)*.07s) both}
.dv-row{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;margin-top:10px}
.dv-barset{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;height:170px;padding:10px 6px 0}
.dv-bar{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%}
.dv-bar i{display:block;width:100%;max-width:42px;height:calc(var(--v)*118px);border-radius:6px 6px 3px 3px;background:linear-gradient(#6d9bd6,var(--blue));transform-origin:bottom}
.dv-bar:last-child i{background:linear-gradient(#8e7bd0,var(--violet))}
.dv-step.on .dv-bar i{animation:dv-grow .9s var(--ease) calc(.15s + var(--d)*.08s) both}
@keyframes dv-grow{from{transform:scaleY(0)}}
.dv-bar em{font:600 11px var(--ui);font-style:normal;color:#4d5672}
.dv-bar span{font-size:10px;color:#80879b}
.dv-donut{display:grid;grid-template-columns:auto 1fr;column-gap:16px}
.dv-donut .dv-ct{grid-column:1/-1}
.dv-dn{position:relative;width:130px;height:130px;margin-top:14px}
.dv-dn svg{width:100%;height:100%;transform:rotate(-90deg)}
.dv-dn circle{fill:none;stroke-width:14}
.dv-dn-bg{stroke:#eef0f4}
.dv-step.on .dv-dn svg{animation:dv-spin 1.1s var(--ease) .2s both}
@keyframes dv-spin{from{opacity:0;transform:rotate(-220deg)}}
.dv-dn-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.dv-dn-c b{font:600 24px/1 var(--font);color:#101935}
.dv-dn-c small{margin-top:3px;font-size:10px;color:#80879b}
.dv-legend{display:grid;align-content:center;gap:9px;margin:14px 0 0;padding:0;list-style:none;font-size:11px;color:#4d5672}
.dv-legend li{display:flex;align-items:center;gap:7px}
.dv-legend li b{margin-left:auto;font-weight:600;color:#101935}
.dv-legend i{width:8px;height:8px;border-radius:2px}
.dv-legend i.blue{background:var(--blue)}.dv-legend i.violet{background:var(--violet)}.dv-legend i.rose{background:var(--rose)}
.dv-list{margin-top:10px}
.dv-li{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:9px;border-top:1px solid #f0f1f4}
.dv-li b{font:500 12px var(--ui)}
.dv-li small{font-size:11px;color:#80879b}
/* reminders */
.dv-prs{padding:2px 16px}
.dv-pr{display:grid;grid-template-columns:1fr 84px 140px;align-items:center;column-gap:12px;padding:14px 0;border-bottom:1px solid #f0f1f4}
.dv-pr:last-child{border-bottom:0}
.dv-pr-t b{display:block;font:600 13px var(--ui);color:#101935}
.dv-pr-t small{display:block;margin-top:2px;font-size:11px;color:#80879b}
.dv-due{font-size:11.5px;color:#4d5672}
.dv-chip{display:grid;justify-self:end;height:26px}
.dv-chip>span{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 11px;border-radius:999px;font:600 11px var(--ui);white-space:nowrap}
.dv-chip-a{background:#f0f1f4;color:#6b7186}
.dv-chip-b{background:#e3ecf8;color:var(--blue);opacity:0}
.dv-chip-b .ico{width:12px;height:12px}
.dv-step.on .dv-chip-a{animation:dv-out .35s ease calc(.6s + var(--d)*.42s) both}
.dv-step.on .dv-chip-b{animation:dv-in .5s var(--ease) calc(.65s + var(--d)*.42s) both}
.dv-via{grid-column:3;justify-self:end;margin-top:5px;font-size:10px;color:#80879b;opacity:0}
.dv-step.on .dv-via{animation:dv-in .5s ease calc(.85s + var(--d)*.42s) both}
.dv-toast{position:absolute;right:0;bottom:34px;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#101935;color:#fff;font:600 12px var(--ui);opacity:0}
.dv-toast .ico{width:14px;height:14px}
.dv-step.on .dv-toast{animation:dv-up .6s var(--ease) 1.9s both}
/* approvals */
.dv-count{display:grid;font:600 11px var(--ui)}
.dv-count>span{grid-area:1/1;padding:4px 10px;border-radius:999px;background:#e7ecf4;color:var(--blue)}
.dv-count-b{opacity:0}
.dv-step.on .dv-count-a{animation:dv-out .3s ease 1.1s both}
.dv-step.on .dv-count-b{animation:dv-in .35s ease 1.15s both}
.dv-aps{padding:0}
.dv-ap{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid #f0f1f4}
.dv-ap:first-child{border-radius:10px 10px 0 0}
.dv-ap:last-child{border-bottom:0}
.dv-ap .dv-pr-t{flex:1}
.dv-ap small{display:grid}
.dv-ap small>span{grid-area:1/1}
.dv-ap-b{color:#1f8a55;font-weight:600;opacity:0}
.dv-ok{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#26305a;color:#fff}
.dv-ok .ico{width:14px;height:14px}
.dv-tap{position:absolute;inset:-7px;border:2px solid #26305a;border-radius:50%;opacity:0}
.dv-step.on .dv-tap{animation:dv-tap .7s ease-out .7s both}
@keyframes dv-tap{0%{opacity:.7;transform:scale(.55)}100%{opacity:0;transform:scale(1.7)}}
.dv-step.on .dv-ap.first{animation:dv-okrow .6s ease 1s both}
@keyframes dv-okrow{to{background:#eef8f2}}
.dv-step.on .dv-ap.first .dv-ok{animation:dv-okk .45s var(--ease) .95s both}
@keyframes dv-okk{50%{transform:scale(.88)}to{background:#1f8a55}}
.dv-step.on .dv-ap.first .dv-ap-a{animation:dv-out .3s ease 1s both}
.dv-step.on .dv-ap.first .dv-ap-b{animation:dv-in .4s ease 1.05s both}
/* drafting */
.dv-tags{display:flex;gap:8px;margin-left:auto}
.dv-tags span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid #e6e8ee;border-radius:999px;background:#fff;font:600 10.5px var(--ui);color:#4d5672}
.dv-tags i{width:6px;height:6px;border-radius:50%;background:var(--blue)}
.dv-doc{display:grid;grid-template-columns:1fr 210px;gap:12px}
.dv-page{min-height:470px;padding:22px 26px;border-radius:8px 8px 0 0;background:#fff;box-shadow:0 1px 3px #10193514,0 10px 26px -14px #10193530;font:400 11.5px/1.7 var(--font);color:#2a3150}
.dv-page p{margin:0 0 10px}
.dv-page .dv-h{margin-top:4px;font:700 12.5px/1.4 var(--ui);color:#101935}
.dv-chg del{color:var(--rose);text-decoration:line-through;text-decoration-thickness:1.5px}
.dv-chg ins{display:inline-block;margin-left:4px;color:var(--blue);font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}
.dv-step.on .dv-chg del{animation:dv-strike .5s ease .45s both}
@keyframes dv-strike{from{color:#2a3150;text-decoration-color:transparent}}
.dv-step.on .dv-chg ins{animation:dv-in .45s var(--ease) .95s both}
.dv-pen{position:relative;display:inline-grid;place-items:center;width:22px;height:22px;margin:-16px -22px 0 2px;vertical-align:top;border-radius:50%;background:#101935;color:#fff;box-shadow:0 6px 14px -6px #10193599}
.dv-pen .ico{width:12px;height:12px}
.dv-step.on .dv-pen{animation:dv-penmove 1.3s var(--ease) .1s both}
@keyframes dv-penmove{from{opacity:0;transform:translate(-90px,8px)}35%{opacity:1}}
.dv-skel i{display:block;height:7px;margin:8px 0;border-radius:4px;background:#eceef2}
.dv-skel i.s{width:58%}
.dv-notes{display:grid;align-content:start;gap:10px}
.dv-note{display:flex;gap:10px;padding:12px;border:1px solid #e6e8ee;border-radius:10px;background:#fff}
.dv-note b{font:600 11.5px var(--ui);color:#101935}
.dv-note p{margin:2px 0 0;font-size:11.5px;line-height:1.4;color:#2a3150}
.dv-av2{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#e5e7ee;color:#4d5672;font:700 9.5px var(--ui)}
.dv-av2.v{background:#ece6f7;color:var(--violet)}
.dv-av2.b{background:#e3ecf8;color:var(--blue)}
.dv-step.on .dv-note:first-child{animation:dv-up .5s var(--ease) .25s both}
.dv-reply{opacity:0}
.dv-step.on .dv-reply{animation:dv-up .5s var(--ease) 1.5s both}

/* Navio On It, 300 × 640 */
.dv-ph{position:absolute;inset:0;background:#f4f3f0;color:#141414}
.dv-status{position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 22px 0 28px;font-size:13px}
.dv-status b{font-weight:600}
.dv-island{position:absolute;left:50%;top:10px;width:90px;height:26px;margin-left:-45px;border-radius:14px;background:#0b0b14}
.dv-sig{display:flex;align-items:flex-end;gap:2px}
.dv-sig i{width:3px;border-radius:1px;background:#141414}
.dv-sig i:nth-child(1){height:4px}.dv-sig i:nth-child(2){height:6px}.dv-sig i:nth-child(3){height:8px}.dv-sig i:nth-child(4){height:10px}
.dv-sig em{position:relative;width:21px;height:10px;margin-left:6px;border:1.5px solid #141414;border-radius:3px}
.dv-sig em::after{content:"";position:absolute;inset:1.5px 4px 1.5px 1.5px;border-radius:1px;background:#141414}
.dv-app{display:flex;align-items:center;justify-content:space-between;padding:4px 18px 0}
.dv-app b{display:flex;align-items:center;gap:6px;font:700 17px var(--ui)}
.dv-app em{font-style:normal;color:#b8892e}
.dv-ph .dv-bell{border-radius:50%;width:32px;height:32px;background:#fff;box-shadow:0 1px 3px #0000001a;color:#141414}
.dv-ph .dv-step{left:16px;right:16px;top:94px;bottom:0}
.dv-label{margin:0 0 8px;font:600 10.5px var(--ui);letter-spacing:.07em;text-transform:uppercase;color:#8a8a8a}
.dv-said{min-height:84px;padding:14px 16px;border-radius:16px;background:#fff;box-shadow:0 1px 3px #0000000f;font:600 17px/1.4 var(--ui)}
.dv-said span{opacity:0}
.dv-step.on .dv-said span{animation:dv-word .35s ease calc(.2s + var(--d)*.15s) both}
@keyframes dv-word{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:none}}
.dv-caret{display:inline-block;width:2px;height:18px;vertical-align:-3px;background:var(--violet);animation:dv-blink 1s steps(1) infinite}
@keyframes dv-blink{50%{opacity:0}}
.dv-wave{display:flex;align-items:center;justify-content:center;gap:4px;height:48px;margin-top:14px}
.dv-wave i{width:4px;height:calc(var(--hh)*44px);border-radius:3px;background:linear-gradient(var(--violet),var(--blue));transform:scaleY(.3)}
.dv-step.on .dv-wave i{animation:dv-wave .9s ease-in-out var(--d) infinite alternate}
@keyframes dv-wave{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.dv-mic{position:relative;display:grid;place-items:center;width:72px;height:72px;margin:14px auto 0;border-radius:50%;background:#141414;color:#fff}
.dv-mic .ico{position:relative;width:28px;height:28px}
.dv-mic i{position:absolute;inset:0;border-radius:50%;background:#6a4fb838}
.dv-step.on .dv-mic i{animation:dv-pulse 1.8s ease-out infinite}
.dv-step.on .dv-mic i+i{animation-delay:.9s}
@keyframes dv-pulse{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.9)}}
.dv-listen{margin:10px 0 0;text-align:center;font:500 12px var(--ui);color:#6b6b6b}
.dv-task{position:relative;margin-bottom:8px;padding:12px 14px;border-radius:14px;background:#fff;box-shadow:0 1px 3px #0000000f}
.dv-task b{display:block;font:600 14.5px var(--ui)}
.dv-task-m{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:#6b6b6b}
.dv-task-m .dv-av2{width:20px;height:20px;font-size:9px}
.dv-sep{color:#b5b5b5}
.dv-task:not(.new){opacity:.72}
.dv-task.new{border:1.5px solid #6a4fb85c}
.dv-step.on .dv-task.new{animation:dv-drop .7s var(--ease) .15s both}
.dv-assigned{position:absolute;right:12px;top:12px;display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:999px;background:#141414;color:#fff;font:600 10.5px var(--ui);opacity:0}
.dv-assigned .ico{width:11px;height:11px}
.dv-step.on .dv-assigned{animation:dv-in .45s var(--ease) .9s both}
.dv-task.new small{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11px;color:#1f7a4a;opacity:0}
.dv-task.new small::before{content:"";width:6px;height:6px;border-radius:50%;background:#25d366}
.dv-step.on .dv-task.new small{animation:dv-in .45s ease 1.4s both}
.dv-push{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:16px;background:#fff;box-shadow:0 10px 26px -12px #00000047}
.dv-push-i{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#141414;color:#e8c46a;font:700 17px var(--ui)}
.dv-push small{display:block;font-size:10.5px;color:#8a8a8a}
.dv-push b{display:block;font:600 12.5px var(--ui)}
.dv-push span{font-size:11.5px;color:#4a4a4a}
.dv-step.on .dv-push{animation:dv-drop .6s var(--ease) .1s both}
.dv-wa{margin-top:10px;padding:10px;border-radius:16px;background:#efe7dd}
.dv-wa-h{display:flex;align-items:center;gap:6px;margin:0 0 8px;font:600 12px var(--ui)}
.dv-wa-h i{width:8px;height:8px;border-radius:50%;background:#25d366}
.dv-msg{max-width:90%;padding:8px 10px;border-radius:4px 12px 12px 12px;background:#fff;box-shadow:0 1px 1px #0000001a;font-size:12.5px;line-height:1.4}
.dv-msg.me{max-width:72%;margin:8px 0 0 auto;border-radius:12px 4px 12px 12px;background:#d9fdd3}
.dv-qr{display:flex;gap:6px;max-width:90%;margin-top:6px}
.dv-qr span{flex:1;padding:6px 0;border-radius:8px;background:#fff;text-align:center;font:600 11.5px var(--ui);color:#027eb5}
.dv-follow .dv-msg,.dv-follow .dv-qr{opacity:0}
.dv-step.on .dv-msg{animation:dv-up .5s var(--ease) .6s both}
.dv-step.on .dv-qr{animation:dv-up .5s var(--ease) .9s both}
.dv-step.on .dv-msg.me{animation:dv-up .5s var(--ease) 1.7s both}

/* the pills: all of them show while the card is pointed at, the current step's one lit */
.door-leaders{opacity:0;transition:opacity .2s}
.door:hover .door-leaders,.door:focus-visible .door-leaders{opacity:1;transition:opacity .3s .7s}
.door-leader,.door:hover .door-leader,.door:focus-visible .door-leader{stroke-dashoffset:0;stroke-opacity:.5;transition:none}
.door-leader-dot,.door:hover .door-leader-dot,.door:focus-visible .door-leader-dot{opacity:1;transition:none}
@media(hover:hover) and (min-width:901px){
  .door:hover .door-callout,.door:focus-visible .door-callout{transition:opacity .35s ease-out calc(.75s + var(--i)*.18s),margin-left .35s ease-out calc(.75s + var(--i)*.18s),color .5s,background-color .5s,box-shadow .5s}}
.door-callout:not(.on){background:#ffffffb8;color:#10193573;box-shadow:0 2px 8px -6px #10193540}
.door-callout:not(.on) i{background:#c3c8d4}
.door-callout i{transition:background-color .5s}
.door-callout.on i{box-shadow:0 0 0 0 currentColor;animation:dv-dot 1.6s ease-out infinite}
.door-ipad .door-callout.on i{color:#2364a855}.door-onit .door-callout.on i{color:#6a4fb855}
@keyframes dv-dot{to{box-shadow:0 0 0 7px transparent}}
.door.callouts-off .door-callouts{visibility:hidden}
@media(prefers-reduced-motion:reduce){.dv-step,.dv-step *{animation:none!important;transition:none!important}.dv-step:not(.on){opacity:0}}
@media(max-width:560px){.door-ipad .dv-screen{border-radius:12px}}

.dv-kpi b{background:none}
.dv-live{display:flex;align-items:center;gap:6px;margin-bottom:6px;font:600 10.5px var(--ui);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--violet)}
.dv-live i{width:7px;height:7px;border-radius:50%;background:var(--rose);animation:dv-blink 1.2s steps(1) infinite}
.dv-said{min-height:0;padding:12px 16px 14px}
.dv-wave{height:40px;margin-top:12px}
.dv-mic{width:66px;height:66px}

.dv-done{margin-top:10px;padding:2px 16px}
.dv-done .dv-ap{padding:11px 0}
.dv-done .dv-ap b{color:#4d5672;font-weight:500}
.dv-okc{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;background:#eef8f2;color:#1f8a55;font:600 10.5px var(--ui)}
.dv-okc .ico{width:11px;height:11px}

/* ============ OUR STORY: a story in seven scenes, with the veena's strings as its thread ============ */
.st-head h2,.st-origin h2{margin:16px 0 0;font-size:clamp(30px,3.8vw,58px);font-weight:500;letter-spacing:-.05em;line-height:1.02}
/* 1 · the promise */
.st-hook{position:relative;display:grid;place-items:center;min-height:100vh;min-height:100svh;padding:120px var(--gutter) 90px;overflow:hidden;text-align:center}
.st-hook-in{position:relative;z-index:1;max-width:1000px}
.st-hook .eyebrow{justify-content:center}
.co-intro{padding:clamp(160px,18vh,220px) 0 72px;text-align:center}
.co-kicker{font:600 14px/1.5 var(--ui);color:var(--blue);margin:0 0 20px}
.co-intro h1{font-size:clamp(38px,5.1vw,76px);line-height:1.1;letter-spacing:-.045em;margin:0;color:var(--ink)}
.co-intro h1 span{color:var(--blue)}
.co-intro-copy{max-width:710px;margin:28px auto;font:450 clamp(18px,1.5vw,22px)/1.65 var(--ui);color:var(--slate);text-wrap:balance}
.co-products{padding:64px 0 80px;background:linear-gradient(180deg,transparent,#edf3fa);scroll-margin-top:130px}
.co-products-head{text-align:center;margin-bottom:32px}
.co-products-head .co-kicker{margin-bottom:12px}
.co-products-head h2{margin:0;font-size:clamp(30px,3.2vw,48px);letter-spacing:-.035em}
.co-products-head>p:last-child{font:500 18px/1.5 var(--ui);color:var(--slate);margin:12px 0 0}
.co-products-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1080px;margin:auto}
.co-product{display:flex;flex-direction:column;align-items:flex-start;background:white;border:1px solid #dbe4ef;border-radius:24px;padding:clamp(24px,3vw,44px)}
.co-product-kind{font:600 13px/1.5 var(--ui);color:var(--blue)}
.co-product h3{font-size:clamp(30px,3vw,42px);letter-spacing:-.04em;margin:16px 0}
.co-product p{font:450 18px/1.7 var(--ui);color:var(--slate);margin:0 0 28px}
.co-product .text-link{margin-top:auto}
.co-product-onit{background:#f9fcf9;border-color:#dae5de}
.co-product-onit .co-product-kind{color:#38735b}
.co-product-bridge{max-width:740px;margin:30px auto 18px;text-align:center;text-wrap:balance;font:450 17px/1.65 var(--ui);color:var(--slate)}
.co-products>.container>.text-link{display:flex;justify-content:center}
#why-nuvena{scroll-margin-top:120px}
.product-family{font:500 14px/1.7 var(--ui);color:var(--slate);margin:18px 0 0}
.product-family a{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){.co-intro{padding:140px 0 38px}.co-products{padding:38px 0 48px}.co-products-grid{grid-template-columns:1fr;gap:18px}.co-product p{font-size:17px}.co-product-bridge{font-size:16px}.co-intro-copy{margin:22px auto}.co-product-kind{font-size:12px}}
.st-hook h2{margin:22px 0 0;font-size:clamp(42px,6.6vw,104px);font-weight:500;letter-spacing:-.055em;line-height:1;color:var(--ink);animation:st-rise 1.1s var(--ease) .15s both}
.st-hook-sub{margin:24px auto 0;font-size:clamp(16px,1.35vw,19px);line-height:1.5;color:var(--slate);animation:st-rise 1s var(--ease) .7s both}
.st-hook-sub span{display:inline-block;color:var(--rose);animation:st-rise .9s var(--ease) 2.4s both}
@keyframes st-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.st-bubbles{position:absolute;inset:0;pointer-events:none}
.st-bub{position:absolute;display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 8px;border-radius:999px;background:#fff;box-shadow:0 14px 34px -18px #10193566,0 2px 6px -3px #10193526;font:500 14px var(--ui);color:var(--ink);white-space:nowrap;animation:st-bub-in .8s var(--ease) calc(.6s + var(--i)*.22s) both,st-float 7s ease-in-out calc(var(--i)*-1.3s) infinite}
.st-bub b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#e7ecf4;color:var(--blue);font:700 11px var(--ui)}
.st-bub i{display:grid;place-items:center;width:0;height:20px;border-radius:50%;background:var(--blue);color:#fff;font:700 11px/1 var(--ui);font-style:normal;overflow:hidden;transition:width .4s var(--ease)}
.st-bub.kept i{animation:st-tick .5s var(--ease) calc(2.6s + var(--i)*.25s) both}
.st-bub.lost{animation:st-bub-in .8s var(--ease) calc(.6s + var(--i)*.22s) both,st-lost 1.4s ease calc(2.6s + var(--i)*.25s) both}
@keyframes st-bub-in{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
@keyframes st-float{50%{translate:0 -8px}}
@keyframes st-tick{from{width:0}to{width:20px;margin-left:2px}}
@keyframes st-lost{from{opacity:1}to{opacity:.82;background:#fdf0f4;color:#a3264f;box-shadow:0 0 0 1px #f2c9d7,0 14px 30px -20px #c8326a59;transform:translateY(6px) rotate(-1.5deg)}}
/* twelve promises in loose pairs, each pair overlapping a little like a chat thread; the ones not kept turn red */
.st-bub0{left:5%;top:19%}.st-bub1{left:11%;top:24%}.st-bub2{left:2.5%;top:45%}.st-bub3{left:8%;top:49.5%}.st-bub4{left:6%;bottom:19%}.st-bub5{left:13%;bottom:14.5%}
.st-bub6{right:7%;top:17%}.st-bub7{right:13%;top:21.5%}.st-bub8{right:2.5%;top:43%}.st-bub9{right:9%;top:47.5%}.st-bub10{right:5%;bottom:23%}.st-bub11{right:14%;bottom:18.5%}
.st-bub.lost i{background:var(--rose)}
.st-bub.lost i{animation:st-tick .5s var(--ease) calc(2.6s + var(--i)*.25s) both}
.st-bub.lost b{animation:st-lost-b 1.2s ease calc(2.6s + var(--i)*.25s) both}
@keyframes st-lost-b{to{background:#f8dbe5;color:var(--rose)}}
.st-scroll{position:absolute;left:50%;bottom:28px;width:1px;height:44px;background:var(--thread);overflow:hidden}
.st-stage .st-scroll{bottom:6px;opacity:var(--c)}
.st-scroll i{position:absolute;left:-1px;top:0;width:3px;height:12px;border-radius:2px;background:var(--ink);animation:st-cue 1.8s ease-in-out infinite}
@keyframes st-cue{from{transform:translateY(-12px)}to{transform:translateY(44px)}}
/* 2 · where it began */
.st-origin{padding:clamp(80px,14vh,160px) 0 clamp(20px,4vh,40px)}
.st-origin h2{max-width:14ch}
.st-origin-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:clamp(24px,5vw,80px)}
.st-origin-top .st-origin-note{margin:0 0 .4em}
.st-frames{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,48px);margin-top:clamp(40px,7vh,72px)}
.st-frames::before{content:"";position:absolute;left:10%;right:10%;top:110px;border-top:1.5px dashed var(--thread)}
.st-frame{position:relative;z-index:1;display:grid;justify-items:start;gap:10px;opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease) calc(var(--i)*.25s),transform .9s var(--ease) calc(var(--i)*.25s)}
.st-origin.in .st-frame{opacity:1;transform:none}
.st-art{position:relative;width:100%;height:220px;margin-bottom:8px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 22px 50px -32px #10193559}
.st-frame>b{font:600 16px var(--ui);color:var(--ink)}
.st-tag{padding:4px 11px;border-radius:999px;font:600 12px var(--ui)}
.st-tag.blue{background:#e3ecf8;color:var(--blue)}.st-tag.violet{background:#ece6f7;color:var(--violet)}.st-tag.rose{background:#f8e3ea;color:var(--rose)}
.st-doc{padding:30px 34px}
.st-doc i{display:block;height:8px;margin-bottom:12px;border-radius:4px;background:#eceef2}
.st-doc i.s{width:55%}
.st-doc svg{position:absolute;left:34px;bottom:26px;width:150px;height:38px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.st-doc path{stroke-dasharray:260;stroke-dashoffset:260}
.st-origin.in .st-doc path{transition:stroke-dashoffset 1.6s ease .6s;stroke-dashoffset:0}
.st-said{display:grid;align-content:center;justify-items:start;gap:10px;padding:24px}
.st-said span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:14px;background:#e9eff8;color:var(--ink);font:500 14px var(--ui);opacity:0;transform:translateY(8px)}
.st-said span.chat{border-radius:14px 14px 14px 4px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.st-said .ico{width:16px;height:16px;color:var(--blue)}
.st-origin.in .st-said span{animation:st-rise .6s var(--ease) calc(.5s + var(--k)*.4s) both}
.st-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;padding:28px}
.st-cal i{border-radius:6px;background:#f1f2f5;transition:background-color .3s}
.st-origin.in .st-cal i{animation:st-day .3s ease calc(1s + var(--k,0)*1s) both}
.st-cal i.now{outline:2px solid var(--violet);outline-offset:1px}
@keyframes st-day{to{background:#dfe2ea}}
.st-chase{display:grid;align-content:center;justify-items:end;gap:10px;padding:24px}
.st-chase span{padding:9px 14px;border-radius:14px 14px 4px 14px;background:#f8e3ea;color:var(--ink);font:500 14px var(--ui);opacity:0;transform:translateY(8px)}
.st-origin.in .st-chase span{animation:st-rise .6s var(--ease) calc(1.4s + var(--k)*.55s) both}
.st-chase span:last-child{background:var(--rose);color:#fff}
.st-origin-note{max-width:62ch;margin:clamp(32px,5vh,48px) 0 0;font-size:clamp(15px,1.15vw,17px);line-height:1.55;color:var(--slate)}
/* 3 · the name */
.st-name{position:relative;height:230vh}
.st-stage{position:sticky;top:18vh;display:grid;place-items:center;height:64vh;overflow:hidden;--m:0;--a:0;--c:1}
.st-strings{position:absolute;inset:0;z-index:0;width:100%;height:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.st-str{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linecap:round;stroke-opacity:calc(.22 - var(--m)*.1)}
.st-str2{stroke:var(--blue)}.st-str3{stroke:var(--violet)}.st-str4{stroke:var(--rose)}
.st-str2,.st-str4{stroke-width:1.6;stroke-opacity:calc((.16 + var(--m)*.4)*(1 - var(--m)))}
.st-str0,.st-str1,.st-str5,.st-str6{stroke-opacity:calc(.22*(1 - var(--m)))}
.st-str3{stroke:url(#st-grad);stroke-width:calc(1.6px + var(--m)*3.6px);stroke-opacity:calc(.3 + var(--m)*.7)}
/* the glow behind the word: nothing until the two words meet, then a soft light from behind, breathing */
.st-glow{position:absolute;left:50%;top:50%;z-index:0;width:min(96vw,880px);height:clamp(112px,22vw,330px);transform:translate(-50%,-50%);opacity:calc(var(--m)*var(--m));pointer-events:none}
.st-glow i{position:absolute;inset:0;border-radius:50%;animation:st-glow 12s ease-in-out infinite}
.st-glow i:first-child{background:radial-gradient(50% 50% at 50% 50%,rgba(106,79,184,.30),rgba(35,100,168,.19) 44%,rgba(200,50,106,.11) 66%,transparent 78%);filter:blur(34px)}
.st-glow i+i{inset:16% 18%;background:radial-gradient(50% 50% at 50% 50%,rgba(106,79,184,.26),rgba(35,100,168,.12) 52%,transparent 76%);filter:blur(22px);animation-delay:-3.5s}
@keyframes st-glow{0%,100%{transform:scale(.95);opacity:.8}50%{transform:scale(1.05);opacity:1}}
.st-word{position:relative;z-index:1;display:flex;align-items:baseline;font:700 clamp(46px,8.4vw,136px)/1.15 NuvenaRound,var(--font);letter-spacing:.04em;color:var(--ink);white-space:pre;text-shadow:0 0 calc(var(--m)*34px) rgba(106,79,184,.22)}
.st-l{display:inline-flex;justify-content:center;white-space:pre}
.st-in{width:0;opacity:0}
.st-gap{color:var(--muted)}
.st-caps{position:absolute;left:0;right:0;top:calc(50% + clamp(50px,6.4vw,104px));display:flex;justify-content:center;gap:clamp(90px,24vw,420px);opacity:var(--c);transform:translateY(calc((1 - var(--c))*-10px))}
.st-caps p{margin:0;text-align:center;font-size:clamp(14px,1.2vw,17px);color:var(--slate)}
.st-caps b{display:block;margin-bottom:4px;font:600 11px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
.st-rhythm{position:absolute;left:0;right:0;top:calc(50% + clamp(50px,6.4vw,104px));margin:0;text-align:center;font-size:clamp(19px,2vw,28px);font-weight:500;letter-spacing:-.03em;color:var(--slate);opacity:var(--a);transform:translateY(calc((1 - var(--a))*18px))}
/* 4 · what we're for */
.st-why{padding:clamp(16px,3vh,32px) 0 clamp(56px,9vh,100px)}
.st-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:clamp(32px,5vh,52px)}
.st-why-card{display:flex;flex-direction:column;gap:clamp(28px,5vh,56px);min-height:clamp(170px,22vh,210px);padding:clamp(22px,2.2vw,30px);border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 24px 50px -36px #10193559;opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.st-why-card.in{opacity:1;transform:none}
.st-why-card span{display:flex;align-items:center;gap:10px;font:600 12px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}
.st-why-card span i{width:22px;height:3px;border-radius:2px;background:var(--blue)}
.st-why-card:nth-child(2) span i{background:var(--violet)}.st-why-card:nth-child(3) span i{background:var(--rose)}
.st-why-card p{margin:auto 0 0;font-size:clamp(21px,1.9vw,28px);font-weight:500;letter-spacing:-.03em;line-height:1.2;color:var(--ink)}
.st-why-card:first-child p{color:var(--blue)}
/* 5 · five strings, as boxes */
.st-values{padding:clamp(40px,7vh,80px) 0}
.st-vgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);margin-top:clamp(32px,5vh,52px)}
.st-vcard{display:flex;flex-direction:column;padding:clamp(18px,1.8vw,26px);border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 24px 50px -38px #10193559;opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .9s var(--ease),box-shadow .3s}
.st-vcard.in{opacity:1;transform:none}
.st-vcard:hover{box-shadow:0 28px 56px -32px #10193570}
.st-vstr{display:block;width:100%;height:24px;margin-bottom:18px;overflow:visible}
.st-vstr path{fill:none;stroke-width:2;stroke-linecap:round}
.st-vcard:nth-child(1) path{stroke:var(--blue)}.st-vcard:nth-child(2) path{stroke:#4a5bb3}.st-vcard:nth-child(3) path{stroke:var(--violet)}.st-vcard:nth-child(4) path{stroke:#9a4192}.st-vcard:nth-child(5) path{stroke:var(--rose)}
.st-vcard h3{margin:0;font-size:clamp(20px,1.7vw,26px);font-weight:500;letter-spacing:-.035em;color:var(--ink)}
.st-vcard b{margin-top:auto;padding-top:18px;font-size:15px;font-weight:600;color:var(--ink)}
.st-vcard span{margin-top:6px;font-size:14px;line-height:1.45;color:var(--slate)}
@media(max-width:1100px){.st-vgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.st-vgrid{grid-template-columns:1fr}.st-vcard b{padding-top:14px}}
/* 6 · the road so far */
.st-road{padding:clamp(80px,14vh,160px) 0 0}
.st-knots{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:clamp(40px,7vh,72px) 0 clamp(56px,9vh,96px);padding:0;list-style:none;--p:0}
.st-knots::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--violet),var(--rose));transform:scaleX(var(--p));transform-origin:left;transition:transform .9s var(--ease)}
.st-knots li{position:relative;opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease) calc(var(--i)*.1s),transform .8s var(--ease) calc(var(--i)*.1s)}
.st-knots li.in{opacity:1;transform:none}
.st-knots i{display:block;width:20px;height:20px;border:2px solid var(--blue);border-radius:50%;background:var(--bg)}
.st-knots li:nth-child(2) i{border-color:var(--violet)}
.st-knots li:nth-child(3) i{border-color:var(--rose);background:var(--rose)}
.st-knots li.next i{border:2px dashed var(--rose)}
.st-knots small{display:block;margin-top:18px;font:600 12px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.st-knots b{display:block;margin-top:6px;font-size:clamp(16px,1.3vw,19px);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.st-knots b a{color:var(--rose)}
.st-knots span{display:block;margin-top:4px;font-size:14px;line-height:1.4;color:var(--slate)}
/* 7 · sign-off */
.st-sign{padding:clamp(90px,15vh,170px) 0;text-align:center}
.st-sign-line{max-width:24ch;margin:0 auto;font-size:clamp(26px,3.2vw,46px);font-weight:500;letter-spacing:-.045em;line-height:1.08;color:var(--ink)}
.st-sign-line span{color:var(--blue)}
/* the signature is written, not revealed: the ink arrives along the line, at a pen's pace */
.st-signature{position:relative;display:inline-block;margin:44px 0 0;font:400 clamp(46px,5vw,76px)/1 NuvenaRound,var(--font);color:var(--ink)}
.st-signature span{display:inline-block;padding:.12em .1em .26em .06em;-webkit-mask-image:linear-gradient(90deg,#000 48.6%,transparent 51.4%);mask-image:linear-gradient(90deg,#000 48.6%,transparent 51.4%);-webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.st-sign.in .st-signature span{animation:st-write 2.6s linear .45s both}
@keyframes st-write{to{-webkit-mask-position:0 0;mask-position:0 0}}
.st-role{margin:6px 0 0;font-size:14px;color:var(--muted)}
.st-join{display:inline-flex;align-items:center;gap:10px;margin-top:38px;padding:12px 20px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:600;color:var(--ink);transition:box-shadow .25s}
.st-join:hover{box-shadow:0 10px 24px -12px #10193540}
.st-join .ico{width:16px;height:16px}
/* phones and tablets */
@media(max-width:900px){
  .st-origin-top{grid-template-columns:1fr}
  .st-frames{grid-template-columns:1fr;max-width:460px}.st-frames::before{left:24px;right:auto;top:0;bottom:0;border-top:0;border-left:1.5px dashed var(--thread)}
  .st-knots{grid-template-columns:1fr;gap:26px;padding-left:36px}.st-knots::before{left:9px;right:auto;top:0;bottom:0;width:2px;height:auto;transform:scaleY(var(--p));transform-origin:top;background:linear-gradient(var(--blue),var(--violet),var(--rose))}
  .st-knots i{position:absolute;left:-36px;top:2px}.st-knots small{margin-top:0}
  .st-why-grid{display:flex;grid-template-columns:none;gap:12px;margin-inline:calc(var(--gutter)*-1);padding:6px var(--gutter) 20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
  .st-why-grid::-webkit-scrollbar{display:none}
  .st-why-card{flex:0 0 min(78%,320px);min-height:0;gap:22px;scroll-snap-align:center}
  .st-bub3,.st-bub11{display:none}
  .st-bub0{left:4%;top:15%}.st-bub1{left:17%;top:19%}.st-bub6{right:4%;top:24%}.st-bub7{right:15%;top:28.5%}.st-bub2{left:5%;top:33%}.st-bub8{right:3%;top:37%}
  .st-bub9{right:5%;top:auto;bottom:25%}.st-bub4{left:4%;bottom:19%}.st-bub5{left:16%;bottom:14.5%}.st-bub10{right:6%;bottom:8%}}
@media(max-width:560px){.st-bub8{display:none}
  .st-bub0{left:4%;top:17%}.st-bub1{left:20%;top:21.5%}.st-bub6{right:4%;top:28%}.st-bub7{right:18%;top:32.5%}.st-bub2{left:5%;top:36.5%}
  .st-bub9{right:5%;bottom:27%}.st-bub4{left:4%;bottom:20%}.st-bub5{left:20%;bottom:15.5%}.st-bub10{right:5%;bottom:10.5%}}
@media(max-width:560px){.st-name{height:200vh}.st-glow i:first-child{filter:blur(20px)}.st-glow i+i{filter:blur(14px)}.st-word{font-size:clamp(26px,8.2vw,44px);letter-spacing:.03em}.st-caps{gap:18vw}.st-bub{font-size:12.5px;padding:6px 11px 6px 6px}.st-bub b{width:22px;height:22px}.st-art{height:190px}}
@media(prefers-reduced-motion:reduce){.st-name{height:auto}.st-stage{position:relative;height:auto;min-height:70vh;padding:100px 0}
  .st-hook *,.st-bub,.st-frame,.st-why-card,.st-vcard,.st-knots li,.st-knots::before{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
  .st-glow i{animation:none}
  .st-stage .st-scroll{display:none}
  .st-signature span{-webkit-mask:none;mask:none}}

.st-li{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;color:#0a66c2;font:600 14px var(--ui)}
.st-li svg{width:18px;height:18px;fill:currentColor}
.st-li:hover{text-decoration:underline;text-underline-offset:3px}
.st-sign .st-join{display:flex;width:fit-content;margin:30px auto 0}
.st-role+.st-li{display:flex;width:fit-content;margin:14px auto 0}

/* ============ INNER PAGES: one standard (page head · the page's blocks on cards · the footer's demo band) ============ */
.pg-head{padding:clamp(132px,19vh,180px) 0 clamp(36px,6vh,60px)}
.pg-head-in{display:flex;flex-direction:column;align-items:center;max-width:900px;margin:0 auto;text-align:center}
.pg-head .eyebrow{justify-content:center}
.pg-head h1{margin:18px 0 0;font-size:clamp(34px,4.4vw,62px);font-weight:500;letter-spacing:-.05em;line-height:1.06;color:var(--ink);text-wrap:balance}
.pg-sub{max-width:62ch;margin:18px 0 0;font-size:clamp(15px,1.25vw,18px);line-height:1.6;color:var(--slate);text-wrap:balance}
.pg-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:28px}
.pg-actions .button{margin:0}
.pg-head+.section,.pg-head+.products,.pg-head+.pg-body{padding-top:clamp(12px,2vh,24px)}
.pg-body{padding:clamp(28px,5vh,56px) 0 clamp(56px,9vh,100px)}
.pg-body+.pg-body{padding-top:clamp(32px,6vh,72px)}
.pg-card{padding:clamp(20px,2vw,28px);border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 24px 50px -38px #10193559}
.pg-card h3{margin:0;font-size:clamp(17px,1.35vw,20px);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.pg-card p{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--slate)}
.pg-ico{display:grid;place-items:center;width:42px;height:42px;margin-bottom:18px;border-radius:12px;background:#e7ecf4;color:var(--blue)}
.pg-ico .ico{width:20px;height:20px}
.pg-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.pg-form{display:grid;gap:14px}
.pg-form h2{margin:0 0 4px;font-size:clamp(20px,1.6vw,24px);font-weight:600;letter-spacing:-.02em}
.pg-form label{display:grid;gap:7px}
.pg-form label>span{font:500 13.5px var(--ui);color:var(--slate)}
.pg-form input:not([type=checkbox]):not([type=file]),.pg-form textarea{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fbfbfc;font:500 15px var(--font);color:var(--ink);transition:border-color .2s,background-color .2s}
.pg-form textarea{resize:vertical;min-height:110px}
.pg-form input:focus,.pg-form textarea:focus{outline:none;border-color:var(--blue);background:#fff}
.pg-form .button{justify-self:start;margin:4px 0 0}
.pg-form .button:disabled{opacity:.55;cursor:progress}
.pg-err{margin:0;font-size:14px;font-weight:600;color:#b42318}
.pg-note{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.pg-done{display:grid;justify-items:center;gap:8px;padding:28px 10px;text-align:center}
.pg-done h2{margin:6px 0 0;font-size:24px;font-weight:600;letter-spacing:-.02em}
.pg-done p{margin:0;color:var(--slate)}
.pg-done-ico{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#1d7a52;color:#fff}
.pg-done-ico .ico{width:20px;height:20px}
/* the headings the old pages carried */
.pg-head~.section .section-heading h2,.pg-head~.section .section-heading{text-wrap:balance}

/* contact */
.ct-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(14px,2vw,28px);align-items:start}
.ct-ways{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,18px)}
.ct-way{display:flex;flex-direction:column;color:var(--ink);transition:box-shadow .25s,transform .25s var(--ease)}
.ct-way:hover{transform:translateY(-2px);box-shadow:0 26px 50px -30px #10193566}
.ct-way b{font-size:18px;font-weight:600;letter-spacing:-.02em}
.ct-line{margin-top:4px;font-size:15px;color:var(--slate);word-break:break-word}
.ct-way em{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font:600 14px var(--ui);font-style:normal;color:var(--blue)}
.ct-way em .ico{width:14px;height:14px;transition:transform .25s var(--ease)}
.ct-way:hover em .ico{transform:translateX(3px)}
.ct-where{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:6px 0 0;font-size:14.5px;color:var(--slate)}
.ct-where .ico{width:16px;height:16px;color:var(--muted)}

/* book a demo */
.book-lead{margin:14px 0 0;font-size:clamp(16px,1.35vw,19px);color:var(--slate)}
.book-card-title{margin:0 0 18px;font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.book-thanks{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:12px 14px;border-radius:14px;background:#eef8f2}
.book-thanks b{display:block;font-size:16px;color:var(--ink)}
.book-thanks div>span{font-size:14px;color:var(--slate)}
.book-thanks .pg-done-ico{width:36px;height:36px}
/* the footer's form, light */
.df-light{grid-template-columns:1fr;gap:14px;animation:none}
.df-light label span,.df-light .f2-phone>label{color:var(--slate)}
.df-light input{height:52px;border-color:var(--line);background:#fbfbfc;color:var(--ink)}
.df-light input::placeholder{color:#a3a9b8}
.df-light input:focus{border-color:var(--blue);background:#fff}
.df-light .f2-phone-row{height:52px;border-color:var(--line);background:#fbfbfc}
.df-light .f2-phone-row:focus-within{border-color:var(--blue);background:#fff}
.df-light .f2-cc-wrap{border-right-color:var(--line)}
.df-light .f2-cc-face{color:var(--ink)}
.df-light .f2-cc-wrap:focus-within{background:#f0f2f6}
.df-light .f2-send{justify-self:start;--ring-fill:var(--action-dark);color:#fff}
.df-light .f2-send:hover{--ring-fill:var(--action-dark)}
.df-light .f2-send i{background:#fff;color:var(--ink)}
.df-light .f2-status{color:#b42318}

/* careers */
.cr2-traits{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:clamp(20px,3vh,32px) 0 0;padding:0;list-style:none}
.cr2-traits li{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font:500 14px var(--ui);color:var(--ink)}
.cr2-traits .ico{width:14px;height:14px;color:var(--blue)}
#roles{scroll-margin-top:90px}
.cr2-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;max-width:900px;margin:0 auto 18px}
.cr2-tools input{flex:1 1 260px;min-height:46px;padding:10px 16px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font:500 15px var(--font);color:var(--ink)}
.cr2-tools input:focus{outline:none;border-color:var(--blue)}
.cr2-chips{display:flex;flex-wrap:wrap;gap:8px}
.cr2-chips button{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font:600 13.5px var(--ui);color:var(--slate);cursor:pointer}
.cr2-chips button b{font-weight:600;color:var(--muted)}
.cr2-chips button[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff}
.cr2-chips button[aria-pressed=true] b{color:#aab3c8}
.cr2-jobs{display:grid;gap:12px;max-width:900px;margin:0 auto}
.cr2-job-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.cr2-job small{font:600 11px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cr2-job h3{margin:6px 0 0}
.cr2-job h3 a{color:var(--ink)}
.cr2-job h3 a:hover{color:var(--blue)}
.cr2-job-top p{margin:6px 0 0;max-width:56ch}
.cr2-facts{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:500 13.5px var(--ui);color:var(--slate)}
.cr2-facts .ico{width:14px;height:14px;color:var(--muted)}
.cr2-job-top .button,.cr2-job-top .cr2-line{flex:none;margin:0}
.cr2-line{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border:1.5px solid var(--line);border-radius:99px;background:#fff;font:600 14px var(--ui);color:var(--ink);cursor:pointer}
.cr2-job.is-open{border-color:#c9d6ea}
.cr2-flow{margin-top:20px;padding-top:20px;border-top:1px solid var(--line);max-width:560px}
.cr2-link{padding:0;border:0;background:none;font:inherit;color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.cr2-phone{display:grid;grid-template-columns:auto 1fr;align-items:center;border:1.5px solid var(--line);border-radius:12px;background:#fbfbfc;overflow:hidden}
.cr2-phone:focus-within{border-color:var(--blue);background:#fff}
.cr2-phone em{padding:0 12px;font:600 15px var(--font);font-style:normal;color:var(--slate);border-right:1px solid var(--line)}
.pg-form .cr2-phone input{border:0;border-radius:0;background:transparent}
.cr2-file input{position:absolute;width:1px;height:1px;opacity:0}
.cr2-file{position:relative}
.cr2-file-ui{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 14px;border:1.5px dashed #c9cfdb;border-radius:12px;background:#fbfbfc;cursor:pointer}
.cr2-file-ui .ico{width:18px;height:18px;color:var(--blue)}
.cr2-file-ui em{flex:1;font:500 14.5px var(--ui);font-style:normal;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr2-file-ui small{font-size:12.5px;color:var(--muted)}
.cr2-file:focus-within .cr2-file-ui{border-color:var(--blue)}
.cr2-file.has-file .cr2-file-ui{border-style:solid;border-color:#9cc0e8;background:#f3f7fd}
.cr2-consent{display:flex!important;align-items:flex-start;gap:10px}
.cr2-consent input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--ink)}
.cr2-consent span{font-size:13.5px!important;line-height:1.5;color:var(--slate)}
.cr2-trap{position:absolute!important;left:-9999px;width:1px;height:1px}
.cr2-done{display:flex;gap:14px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.cr2-done h4{margin:4px 0 0;font-size:19px;font-weight:600;letter-spacing:-.02em}
.cr2-done p{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--slate)}
.cr2-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.cr2-actions .button{margin:0}
.cr2-empty{padding:28px;border:1px dashed #cfd4de;border-radius:18px;text-align:center;color:var(--slate)}
.cr2-empty a,.cr2-mail a{color:var(--blue);font-weight:600}
.cr2-mail{margin:22px 0 0;text-align:center;font-size:14.5px;color:var(--slate)}
@media(max-width:900px){.pg-grid3{grid-template-columns:1fr 1fr}.ct-grid{grid-template-columns:1fr}}
@media(max-width:560px){.pg-grid3,.ct-ways{grid-template-columns:1fr}.cr2-job-top{flex-direction:column;gap:14px}.pg-head{padding-top:118px}}

@media(prefers-reduced-motion:no-preference){.strokes i{transform-origin:0 50%;animation:stroke-run 4.2s var(--ease) infinite}.strokes i:nth-child(2){animation-delay:.18s}.strokes i:nth-child(3){animation-delay:.36s}}
[data-motion=paused] .strokes i{animation-play-state:paused}

/* ============ The demo dialog: the same from every Book a Demo ============ */
.demo-dialog{width:min(410px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:0;overflow:auto;border:1px solid var(--line);border-radius:22px;background:#fff;color:var(--ink);box-shadow:0 40px 100px -30px #101935a0;overscroll-behavior:contain}
.demo-dialog[open]{animation:demo-in .45s var(--ease) both}
.demo-dialog::backdrop{background:#10193580;backdrop-filter:blur(5px)}
@keyframes demo-in{from{opacity:0;transform:translateY(18px) scale(.98)}}
.demo-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:26px 26px 0}
.demo-head h2{margin:12px 0 0;font-size:clamp(24px,2.4vw,30px);font-weight:500;letter-spacing:-.04em;line-height:1.1}
.demo-facts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:12px 0 0;font:500 13.5px var(--ui);color:var(--slate)}
.demo-facts .ico{width:15px;height:15px;color:var(--blue)}
.demo-facts{gap:6px 16px}
.demo-facts span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.demo-head .modal-close{flex:none;display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer}
.demo-head .modal-close .ico{width:16px;height:16px}
.demo-body{padding:22px 26px 26px}
.demo-body .f2-send{justify-self:stretch;justify-content:space-between}
.demo-pick .book-days{grid-template-columns:repeat(6,minmax(0,1fr))}
.demo-pick .book-times{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:560px){
  .demo-dialog{width:100vw;max-width:100vw;max-height:92dvh;margin:auto 0 0;border-radius:22px 22px 0 0;border-bottom:0}
  .demo-dialog[open]{animation:demo-up .45s var(--ease) both}
  .demo-head{padding:20px 18px 0}.demo-body{padding:18px 18px calc(22px + env(safe-area-inset-bottom,0px))}
  .demo-pick .book-days{gap:5px}.demo-pick .book-times{grid-template-columns:repeat(3,minmax(0,1fr))}}
@keyframes demo-up{from{transform:translateY(100%)}}
@media(prefers-reduced-motion:reduce){.demo-dialog[open]{animation:none}}

/* ============ We're hiring: a thin bar over every page ============ */
:root{--bar:34px}
.hire-bar{position:fixed;z-index:62;top:0;left:0;right:0;display:flex;align-items:flex-end;justify-content:center;height:calc(var(--bar) + env(safe-area-inset-top,0px));overflow:hidden;background:#fff;color:var(--slate);box-shadow:inset 0 -1px 0 var(--line)}
.hire-bar::after{display:none;content:"";position:absolute;top:0;bottom:0;left:-30%;width:30%;background:linear-gradient(90deg,transparent,#ffffff1f,transparent);pointer-events:none}
@keyframes hire-shine{0%{transform:translateX(0)}60%,100%{transform:translateX(450%)}}
.hire-link{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;height:var(--bar);padding:0 14px;font:500 13px var(--ui);color:var(--slate);white-space:nowrap}
.hire-link b{font-weight:600;color:var(--ink)}
.hire-link span{color:var(--slate);text-decoration:underline;text-decoration-color:#4d567240;text-underline-offset:3px;transition:color .2s}
.hire-link:hover span{color:var(--ink);text-decoration-color:var(--ink)}
.hire-link .ico{width:14px;height:14px;color:#c99535;transition:transform .25s var(--ease)}
.hire-link:hover .ico{transform:translateX(3px)}
.hire-dot{position:relative;width:8px;height:8px;border-radius:50%;background:#e6bf62}
.hire-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#e6bf62}
@keyframes hire-ping{to{transform:scale(2.6);opacity:0}}
/* everything else moves down by the bar */
.site{padding-top:var(--bar)}
.hdr{top:calc(var(--bar) + 12px + env(safe-area-inset-top,0px))}
.fold{height:calc(100vh - var(--bar));height:calc(100svh - var(--bar))}
html{scroll-padding-top:calc(116px + var(--bar))}
.msheet{padding-top:calc(92px + var(--bar) + env(safe-area-inset-top,0px))}
@media(max-width:900px){.hdr{top:calc(var(--bar) + 10px + env(safe-area-inset-top,0px))}}
@media(max-width:560px){:root{--bar:32px}.hire-link{font-size:12.5px;gap:7px}}
/* AI, named where it works (owner, 5 Oct): the Navio AI note in the draft screen, the trust banner on Security */
.dv-aiav{display:grid;place-items:center;background:linear-gradient(135deg,#2364a8,#6a4fb8 55%,#c8326a)!important;color:#fff}
.dv-aiav .ico{width:13px;height:13px}
.dv-ainote{background:#f5f2fc}
/* ===== Section 3: the eight parts, each with a drawn picture (640×440, scaled) ===== */
.parts .sec-head p{margin-top:10px}
.part em .ico{width:20px;height:20px;transform:translateY(3px)}
.part.on em{color:var(--blue)}
.part-tag{display:inline-block;margin:0 0 0 6px;padding:2px 9px;border-radius:999px;background:#e7ecf4;font:600 11.5px var(--ui);letter-spacing:.02em;color:var(--blue);vertical-align:middle}
.part.on button>span{max-height:140px}
.part button>span{display:block}
.part button>span .part-tag+.part-tag{margin-left:4px}
.part b{font-size:clamp(18px,1.5vw,23px)}
.part button{padding:12px 4px 13px}
.fa-box{position:absolute;inset:0;overflow:hidden}
.fa{position:absolute;left:0;top:0;width:640px;height:440px;transform-origin:0 0;transform:scale(var(--k,1));font-family:var(--ui);color:var(--ink);text-align:left}
.fa *{box-sizing:border-box}
.fa-card{position:absolute;padding:16px;border:1px solid #e6e9f1;border-radius:14px;background:#fff;box-shadow:0 18px 40px -26px #10193566,0 1px 3px #1019350f}
.fa small{display:block;font-size:11px;color:#80879b}
.fa .ico{width:15px;height:15px}
.fa-sk i{display:block;height:7px;margin:0 0 9px;border-radius:4px;background:#eceef3}
.fa-sk i.s{width:58%}
.fa-dh{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #eef0f5}
.fa-dh>.ico{width:28px;height:28px;padding:6px;border-radius:8px;background:#eef2f9;color:var(--blue)}
.fa-dh b{display:block;font-size:13px;font-weight:600}
.fa-cl{margin:12px 0 6px;font-size:11.5px;font-weight:700;color:var(--ink)}
.fa-txt{margin:0 0 9px;font-size:11.5px;line-height:1.5;color:#4d5672}
.fa-av{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:#e5e7ee;color:#4d5672;font:700 9.5px var(--ui)}
.fa-av.b{background:#e3ecf8;color:var(--blue)}.fa-av.v{background:#ece6f7;color:var(--violet)}.fa-av.r{background:#f8e3ea;color:var(--rose)}.fa-av.n{background:var(--ink);color:#fff}
/* anything that arrives: hidden until its part opens, then in at its own moment (--d seconds) */
.fa .fa-a{opacity:0}
.fa.on .fa-a{animation:fa-in .6s var(--ease) calc(var(--d,0)*1s) both}
@keyframes fa-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* 1 · Navio AI */
.fa-hl{position:relative;padding:4px 6px;margin-left:-6px;margin-right:-6px;border-radius:6px}
.fa.on .fa-hl{animation:fa-hl .6s ease calc(var(--d)*1s) both}
@keyframes fa-hl{from{background:transparent}to{background:#ece6f7;color:var(--ink)}}
.fa-scan{position:absolute;left:0;right:0;top:70px;height:46px;background:linear-gradient(180deg,transparent,#6a4fb81f 60%,#6a4fb84d);border-bottom:2px solid #6a4fb8;opacity:0;pointer-events:none}
.fa.on .fa-scan{animation:fa-scan 1.6s ease-in-out .2s both}
@keyframes fa-scan{0%{opacity:0;transform:translateY(0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateY(260px)}}
.fa-ai{display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,#fbfaff,#fff)}
.fa-aih{display:flex;align-items:center;gap:9px;padding-bottom:10px;border-bottom:1px solid #eef0f5}
.fa-aih b{font-size:13px}
.fa-aiic{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#2364a8,#6a4fb8 55%,#c8326a);color:#fff}
.fa-q{align-self:flex-end;max-width:86%;padding:8px 11px;border-radius:12px 12px 4px 12px;background:#eef1f6;font-size:12px;font-weight:500}
.fa-ans{align-self:flex-start;max-width:92%;padding:9px 11px;border-radius:12px 12px 12px 4px;background:#f1edfb;font-size:12px;line-height:1.45}
.fa-ans p{margin:0}
.fa-cite{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px #ddd6f3;font-size:10.5px;font-weight:600;color:var(--violet)}
.fa-draft{width:92%}
.fa-draft i{display:block;height:6px;margin:4px 0 7px;border-radius:3px;background:#d9d1f1}
.fa-draft i.s{width:55%}
.fa.on .fa-draft i{animation:fa-grow .8s ease calc(var(--d)*1s + .3s) both;transform-origin:left}
@keyframes fa-grow{from{transform:scaleX(0)}to{transform:none}}
.fa-ins{display:inline-block;margin-top:4px;padding:4px 10px;border-radius:999px;background:var(--ink);color:#fff;font-size:10.5px;font-weight:600}
/* 2 · Navio Studio */
.fa-bar{display:flex;align-items:center;gap:10px;padding:0 14px}
.fa-bar small{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em}
.fa-bar b{font-size:13.5px}
.fa-pub{margin-left:auto;padding:6px 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:11.5px;font-weight:600}
.fa.on .fa-pub{animation:fa-pulse 1s ease 3.4s 2}
@keyframes fa-pulse{50%{box-shadow:0 0 0 6px #2364a833}}
.fa-pal{display:flex;flex-direction:column;gap:8px;padding:14px 12px}
.fa-pal small{margin-bottom:2px;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em}
.fa-blk{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border:1px solid #e6e9f1;border-radius:9px;background:#fafbfc;font-size:12px;font-weight:500;color:var(--ink)}
.fa-blk i{width:8px;height:8px;border-radius:3px;background:#9aa1b5}
.fa-blk.v i{background:var(--violet)}.fa-blk.b i{background:var(--blue)}.fa-blk.g i{background:#25a35a}.fa-blk.a i{background:#d4a03c}.fa-blk.r i{background:var(--rose)}
.fa-canvas2{position:absolute;border:1px solid #e6e9f1;border-radius:14px;background:#fff radial-gradient(#dfe3ec 1px,transparent 1.2px) 0 0/16px 16px}
.fa-spine{position:absolute;left:50%;top:30px;bottom:30px;width:2px;margin-left:-1px;background:#cfd5e2}
.fa-node{position:absolute;left:50%;width:250px;height:38px;margin-left:-125px;display:flex;align-items:center;gap:9px;padding:0 12px;border:1px solid #e1e5ee;border-radius:10px;background:#fff;box-shadow:0 6px 16px -12px #10193566;font-size:12px;font-weight:500}
.fa-node em{padding:2px 7px;border-radius:6px;background:#eef1f6;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#4d5672}
.fa-node.n em{background:var(--ink);color:#fff}.fa-node.v em,.fa-filled em.v{background:#ece6f7;color:var(--violet)}.fa-node.b em{background:#e3ecf8;color:var(--blue)}.fa-node.r em{background:#f8e3ea;color:var(--rose)}
.fa-slot{border:1.5px dashed #b9c0d0;background:#f7f8fb;box-shadow:none}
.fa-filled{display:flex;align-items:center;gap:9px;opacity:0}
.fa-filled em{padding:2px 7px;border-radius:6px;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.fa.on .fa-slot{animation:fa-solid .3s ease 2.3s both}
@keyframes fa-solid{to{border-style:solid;border-color:#c9bdf0;background:#fbfaff;box-shadow:0 6px 16px -12px #10193566}}
.fa.on .fa-filled{animation:fa-in .4s ease 2.3s both}
.fa-ghost{position:absolute;left:40px;top:122px;width:126px;opacity:0;z-index:3}
.fa-ghost .fa-blk{box-shadow:0 14px 30px -14px #10193580;background:#fff}
.fa-cursor{position:absolute;right:-10px;bottom:-14px;width:16px;height:16px;fill:var(--ink);stroke:#fff;stroke-width:1}
.fa.on .fa-ghost{animation:fa-drag 1.6s cubic-bezier(.5,0,.2,1) .7s both}
/* Custom Workflows: a branching decision tree (not a straight line). Nodes positioned inline; the SVG draws the fork + join. */
.fa-wf-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fa-wf-link{fill:none;stroke:#cfd5e2;stroke-width:2}
.fa-wf-link.dev{stroke:#e2a6bc}
.fa-wn{position:absolute;height:38px;display:flex;align-items:center;gap:9px;padding:0 11px;border:1px solid #e1e5ee;border-radius:10px;background:#fff;box-shadow:0 6px 16px -12px #10193566;font-size:12px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden}
.fa-wn em{flex:none;padding:2px 7px;border-radius:6px;background:#eef1f6;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#4d5672}
.fa-wn.n em{background:var(--ink);color:#fff}
.fa-wn.v em{background:#ece6f7;color:var(--violet)}
.fa-wn.b em{background:#e3ecf8;color:var(--blue)}
.fa-wn.a{border-color:#ecd9ad}.fa-wn.a em{background:#f6edda;color:#9a7220}
.fa-wn.r em{background:#f8e3ea;color:var(--rose)}
.fa-wn.k{border-color:#bfe3cf}.fa-wn.k em{background:#ddf0e6;color:#1d7a52}
.fa-wf-lbl{position:absolute;z-index:2;font-size:9.5px;font-weight:600;color:var(--slate);background:#fff;padding:1px 7px;border:1px solid #e6e9f1;border-radius:99px}
.fa-wf-lbl.dev{color:var(--rose);border-color:#f0cdd9}
@keyframes fa-drag{0%{opacity:0;transform:none}12%{opacity:1;transform:none}85%{opacity:1;transform:translate(278px,140px)}100%{opacity:0;transform:translate(278px,140px)}}
/* 3 · Navio Track */
.fa-mark{position:relative;padding:4px 6px;margin:2px -6px 10px;border-radius:6px;color:var(--ink)}
.fa.on .fa-mark.b{animation:fa-mb .5s ease calc(var(--d)*1s) both}.fa.on .fa-mark.v{animation:fa-mv .5s ease calc(var(--d)*1s) both}.fa.on .fa-mark.r{animation:fa-mr .5s ease calc(var(--d)*1s) both}
@keyframes fa-mb{to{background:#e3ecf8}}@keyframes fa-mv{to{background:#ece6f7}}@keyframes fa-mr{to{background:#f8e3ea}}
.fa-found{position:absolute;right:14px;bottom:16px;padding:3px 9px;border-radius:999px;background:var(--ink);color:#fff;font-size:10.5px;font-weight:600}
.fa-links{position:absolute;inset:0;width:640px;height:440px;overflow:visible;pointer-events:none}
.fa-link{fill:none;stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1}
.fa-link.b{stroke:var(--blue)}.fa-link.v{stroke:var(--violet)}.fa-link.r{stroke:var(--rose)}
.fa.on .fa-link{animation:fa-draw .6s ease calc(var(--d)*1s) both}
@keyframes fa-draw{to{stroke-dashoffset:0}}
.fa-task{display:flex;flex-direction:column;gap:6px;padding:12px 14px}
.fa-task b{font-size:12.5px;font-weight:600}
.fa-tchip{align-self:flex-start;padding:1px 7px;border-radius:5px;background:#eef1f6;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#4d5672}
.fa-trow{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#4d5672}
.fa-trow em{margin-left:auto;padding:2px 8px;border-radius:999px;font-style:normal;font-size:10.5px;font-weight:600}
.fa-trow em.b{background:#e3ecf8;color:var(--blue)}.fa-trow em.v{background:#ece6f7;color:var(--violet)}.fa-trow em.r{background:#f8e3ea;color:var(--rose)}
/* 4 · Navio Follow-Up */
.fa-tl{padding:18px 20px}
.fa-tlh{margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid #eef0f5}
.fa-tlh b{display:block;font-size:13.5px}
.fa-rail{position:absolute;left:37px;top:96px;bottom:46px;width:2px;background:#e6e9f1}
.fa-rail.fa-fill{background:linear-gradient(var(--blue),#25a35a 35%,var(--rose) 65%,#25a35a);transform:scaleY(0);transform-origin:top}
.fa.on .fa-fill{animation:fa-fillY 3.2s ease .3s both}
@keyframes fa-fillY{to{transform:none}}
.fa-ev{position:relative;display:flex;align-items:center;gap:12px;height:58px;margin-bottom:12px}
.fa-ev b{display:block;font-size:12.5px;font-weight:600}
.fa-evi{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #e6e9f1}
.fa-evi.b{color:var(--blue)}.fa-evi.g{color:#25a35a}.fa-evi.r{color:var(--rose)}.fa-evi.k{background:#25a35a;color:#fff;box-shadow:none}
.fa-wa{display:flex;flex-direction:column;gap:10px;padding:0 0 14px;overflow:hidden;background:#efeae2}
.fa-wah{display:flex;align-items:center;gap:9px;padding:12px 14px;background:#075e54;color:#fff}
.fa-wah b{display:block;font-size:12.5px}.fa-wah small{color:#cfe9e4}
.fa-in,.fa-out{max-width:82%;margin:0 12px;padding:8px 10px;border-radius:10px;font-size:11.5px;line-height:1.45;box-shadow:0 1px 1px #0000001a}
.fa-in{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.fa-out{align-self:flex-end;background:#d9fdd3;border-top-right-radius:2px;font-weight:600}
/* 5 · Navio Sign */
.fa-chg del{margin:0 2px;color:var(--rose)}
.fa-chg ins{margin:0 2px;padding:0 3px;border-radius:3px;background:#dff3e6;color:#18794e;text-decoration:none;font-weight:700}
.fa.on .fa-chg ins{animation:fa-in .4s ease .4s both}
.fa-sigs{position:absolute;left:16px;right:16px;bottom:18px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fa-sigs svg{display:block;width:100%;height:34px;border-bottom:1px solid #cfd5e2}
.fa-sig{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.fa.on .fa-sig{animation:fa-draw 1s ease calc(var(--d)*1s) both}
.fa-sigs small{margin-top:5px}
.fa-appr{display:flex;flex-direction:column;gap:10px}
.fa-lbl{margin-bottom:2px;font-size:10.5px!important;text-transform:uppercase;letter-spacing:.1em}
.fa-ap{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid #eef0f5;border-radius:10px}
.fa-ap b{display:block;font-size:12px}
.fa-st{position:relative;margin-left:auto;font-size:10.5px;font-weight:600}
.fa-st i,.fa-st em{display:block;padding:2px 8px;border-radius:999px;font-style:normal}
.fa-st i{background:#f3f4f7;color:#80879b}
.fa-st em{position:absolute;right:0;top:0;background:#dff3e6;color:#18794e;opacity:0;white-space:nowrap}
.fa.on .fa-ap .fa-st em{animation:fa-in .4s ease calc(var(--d)*1s + .4s) both}
.fa.on .fa-ap .fa-st i{animation:fa-out .2s ease calc(var(--d)*1s + .4s) both}
@keyframes fa-out{to{opacity:0}}
.fa-signed{display:flex;align-items:center;gap:8px;margin-top:auto;padding:10px 12px;border-radius:10px;background:#18794e;color:#fff;font-size:12px;font-weight:600}
/* 6 · Navio On It */
.fa-say{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:20px}
.fa-live{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.fa-live i{width:7px;height:7px;border-radius:50%;background:var(--rose)}
.fa.on .fa-live i{animation:fa-blink 1s ease infinite}
@keyframes fa-blink{50%{opacity:.25}}
.fa-words{margin:0;font-size:19px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.fa-words span{opacity:0}
.fa.on .fa-words span{animation:fa-in .3s ease calc(var(--d)*1s) both}
.fa-wave{display:flex;align-items:center;gap:4px;height:44px;margin-top:auto}
.fa-wave i{width:4px;height:8px;border-radius:2px;background:linear-gradient(var(--blue),var(--violet))}
.fa.on .fa-wave i{animation:fa-wave 1s ease-in-out calc(var(--i)*-.09s) infinite}
@keyframes fa-wave{50%{height:36px}}
.fa-mic{display:grid;place-items:center;align-self:center;width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;box-shadow:0 0 0 8px #10193514}
.fa-mic .ico{width:20px;height:20px}
.fa-new{display:flex;flex-direction:column;gap:12px;padding:20px}
.fa-newh{display:flex;align-items:center;justify-content:space-between}
.fa-newh small{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em}
.fa-asg{padding:2px 9px;border-radius:999px;background:#e3ecf8;color:var(--blue);font-size:10.5px;font-weight:700}
.fa-tt{font-size:18px;font-weight:600;letter-spacing:-.01em}
.fa-kv{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid #eef0f5;font-size:12.5px}
.fa-kv span{display:flex;align-items:center;gap:8px;font-weight:500}
.fa-done{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:#18794e}
.fa-done .ico{padding:2px;border-radius:50%;background:#dff3e6}
/* 7 · Navio Pulse */
.fa-kpi{padding:14px 16px}
.fa-kpi b{display:block;margin-top:6px;font-size:28px;font-weight:600;letter-spacing:-.03em}
.fa-kpi b.k{color:#18794e}.fa-kpi b.r{color:var(--rose)}.fa-kpi b.b{color:var(--blue)}
.fa-ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.fa-ch b{font-size:12.5px}
.fa-ch span{display:flex;align-items:center;gap:5px;font-size:10.5px;color:#80879b}
.fa-ch span i{width:8px;height:8px;margin-left:6px;border-radius:2px}
.fa-ch i.k,.fa-col i.k{background:var(--blue)}.fa-ch i.r,.fa-col i.r{background:var(--rose)}
.fa-bars{display:flex;align-items:flex-end;justify-content:space-between;height:206px;padding:0 6px;border-bottom:1px solid #eef0f5}
.fa-col{display:flex;align-items:flex-end;gap:4px;height:100%;position:relative;padding-bottom:20px}
.fa-col i{width:18px;height:calc(var(--h)*1.9px);border-radius:4px 4px 0 0;transform-origin:bottom;transform:scaleY(0)}
.fa.on .fa-col i{animation:fa-up .7s var(--ease) calc(var(--d)*1s) both}
@keyframes fa-up{to{transform:none}}
.fa-col small{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-size:10px}
.fa-risk{display:flex;flex-direction:column}
.fa-rk{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid #f1f2f6;font-size:12px}
.fa-rk i{width:8px;height:8px;border-radius:50%}
.fa-rk i.r{background:var(--rose)}.fa-rk i.a{background:#d4a03c}
.fa-rk em{margin-left:auto;font-style:normal;font-size:11px;font-weight:600;color:#80879b}
.fa-spark{display:block;width:100%;height:50px;margin-top:auto}
.fa-line{fill:none;stroke:var(--violet);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.fa.on .fa-line{animation:fa-draw 1.2s ease 2.4s both}
.fa-fc{margin-top:4px}
/* 8 · Navio Connect */
.fa-flow{fill:none;stroke:#9fb0cf;stroke-width:1.5;stroke-dasharray:4 6}
.fa.on .fa-flow{animation:fa-flowing 1.2s linear infinite}
@keyframes fa-flowing{to{stroke-dashoffset:-20}}
.fa-hub{position:absolute;left:320px;top:178px;display:grid;place-content:center;justify-items:center;gap:3px;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 8px #fff,0 0 0 9px #dfe4ee,0 22px 40px -18px #10193599;color:#fff}
.fa-hub b{font:700 15px NuvenaRound,var(--ui);letter-spacing:.12em;text-transform:uppercase}
.fa-hub small{font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#9fb4d6}
.fa.on .fa-hub{animation:fa-hub 3s ease-in-out infinite}
@keyframes fa-hub{50%{box-shadow:0 0 0 12px #fff,0 0 0 13px #dfe4ee,0 22px 40px -18px #10193599}}
.fa-sat{position:absolute;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border:1px solid #e1e5ee;border-radius:999px;background:#fff;box-shadow:0 10px 24px -16px #10193566;font-size:12px;font-weight:600;white-space:nowrap;translate:-50% -50%}
.fa-sat i{width:8px;height:8px;border-radius:50%;background:var(--blue)}
.fa-sat:nth-of-type(3n) i{background:var(--violet)}.fa-sat:nth-of-type(3n+1) i{background:var(--rose)}
.fa-deploy{display:flex;align-items:center;gap:14px;padding:0 14px}
.fa-deploy small{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em}
.fa-seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);flex:1;height:36px;padding:3px;border-radius:999px;background:#f1f3f7}
.fa-seg span{position:relative;z-index:1;display:grid;place-items:center;font-size:12px;font-weight:600;color:#4d5672}
.fa-segon{position:absolute;left:3px;top:3px;bottom:3px;width:calc((100% - 6px)/3);border-radius:999px;background:#fff;box-shadow:0 4px 10px -4px #10193559,0 0 0 1px #e1e5ee}
.fa.on .fa-segon{animation:fa-seg 6s ease-in-out .6s infinite}
@keyframes fa-seg{0%,22%{transform:none}33%,55%{transform:translateX(100%)}66%,88%{transform:translateX(200%)}100%{transform:none}}
/* the stage: the picture fills it on the light blue ground */
.parts-frame .fa-box,.part-inline .fa-box{background:#e7ecf4}
.parts-stage{background:#e7ecf4}
@media(prefers-reduced-motion:reduce){.fa .fa-a,.fa-words span,.fa-filled{opacity:1!important;animation:none!important}.fa *{animation:none!important}.fa-link,.fa-sig,.fa-line{stroke-dashoffset:0}.fa-col i,.fa-rail.fa-fill{transform:none}}
.fa-arrow{position:absolute;left:310px;top:206px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 6px 14px -8px #10193580;color:var(--violet);z-index:2}
.fa-arrow .ico{width:14px;height:14px}
.fa-seg span{color:var(--ink)}
/* the pictures keep moving gently once they have played in (owner, 5 Oct: no static diagrams) */
.fa.on .fa-scan{animation:fa-scan 1.6s ease-in-out .2s both,fa-scan 2.4s ease-in-out 4.6s infinite}
.fa.on .fa-aiic{animation:fa-glow 2.6s ease-in-out infinite}
@keyframes fa-glow{50%{box-shadow:0 0 0 6px #6a4fb829}}
.fa.on .fa-draft i{animation:fa-grow .8s ease calc(var(--d)*1s + .3s) both,fa-shim 2.2s ease-in-out 5s infinite}
@keyframes fa-shim{0%,100%{opacity:1}50%{opacity:.55}}
.fa-token{position:absolute;left:50%;top:30px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 4px #6a4fb833;opacity:0;z-index:1}
.fa.on .fa-token{animation:fa-token 4.2s ease-in-out 2.8s infinite}
@keyframes fa-token{0%{opacity:0;transform:none}8%{opacity:1}92%{opacity:1;transform:translateY(270px)}100%{opacity:0;transform:translateY(270px)}}
.fa.on .fa-pub{animation:fa-pulse 2.4s ease 3.4s infinite}
.fa.on .fa-task{animation:fa-in .6s var(--ease) calc(var(--d)*1s) both,fa-bob 4s ease-in-out calc(var(--d)*1s + 1s) infinite}
@keyframes fa-bob{0%,100%{transform:none}50%{transform:translateY(-4px)}}
.fa.on .fa-found{animation:fa-in .6s var(--ease) 2.2s both,fa-pulse 2.4s ease 3.2s infinite}
.fa-runner{position:absolute;left:33px;top:96px;width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px #2364a833;opacity:0}
.fa.on .fa-runner{animation:fa-run 3.6s ease-in-out 3.6s infinite}
@keyframes fa-run{0%{opacity:0;transform:none}10%{opacity:1}85%{opacity:1;transform:translateY(222px)}100%{opacity:0;transform:translateY(222px)}}
.fa.on .fa-evi.b .ico{animation:fa-ring 2.8s ease 1s infinite;transform-origin:50% 10%}
@keyframes fa-ring{0%,60%,100%{transform:none}65%{transform:rotate(14deg)}72%{transform:rotate(-12deg)}79%{transform:rotate(8deg)}86%{transform:rotate(-4deg)}}
.fa.on .fa-out{animation:fa-in .6s var(--ease) 2.9s both,fa-bob 3.4s ease-in-out 4s infinite}
/* one-tap approvals: the first request is tapped and approved, over and over */
.fa-inbox{display:flex;flex-direction:column;gap:10px}
.fa-ibh{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid #eef0f5}
.fa-ibh b{font-size:13.5px}
.fa-cnt{position:relative;display:grid;place-items:center;min-width:24px;height:22px;padding:0 7px;border-radius:999px;background:var(--ink);color:#fff;font-size:11px;font-weight:700}
.fa-cnt i,.fa-cnt em{font-style:normal}
.fa-cnt em{position:absolute;opacity:0}
.fa-req{position:relative;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #eef0f5;border-radius:12px;opacity:0}
.fa.on .fa-req{animation:fa-in .5s var(--ease) calc(var(--d)*1s) both}
.fa-req b{display:block;font-size:12px;font-weight:600}
.fa-req>div{flex:1;min-width:0}
.fa-rbtn{position:relative;flex:none;font-size:11px;font-weight:600}
.fa-rbtn i,.fa-rbtn em{display:flex;align-items:center;gap:4px;padding:5px 11px;border-radius:999px;font-style:normal;white-space:nowrap}
.fa-rbtn i{background:var(--ink);color:#fff}
.fa-rbtn em{position:absolute;right:0;top:0;background:#dff3e6;color:#18794e;opacity:0}
.fa-rbtn em .ico{width:12px;height:12px}
.fa-tap{position:absolute;right:30px;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;background:#2364a840;opacity:0;pointer-events:none}
.fa.on .fa-inbox:not(.touched) .fa-req.first .fa-tap{animation:fa-tap 6s ease 1.6s infinite}
.fa.on .fa-inbox:not(.touched) .fa-req.first .fa-rbtn em{animation:fa-yes 6s ease 1.6s infinite}
.fa.on .fa-inbox:not(.touched) .fa-req.first .fa-rbtn i{animation:fa-no 6s ease 1.6s infinite}
.fa.on .fa-inbox:not(.touched) .fa-req.first{animation:fa-in .5s var(--ease) .3s both,fa-green 6s ease 1.6s infinite}
.fa.on .fa-inbox:not(.touched) .fa-cnt i{animation:fa-no 6s ease 1.6s infinite}
.fa.on .fa-inbox:not(.touched) .fa-cnt em{animation:fa-yes 6s ease 1.6s infinite}
@keyframes fa-tap{0%{opacity:0;transform:scale(.4)}6%{opacity:1;transform:scale(1)}14%{opacity:0;transform:scale(1.5)}100%{opacity:0}}
@keyframes fa-yes{0%,10%{opacity:0}16%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes fa-no{0%,10%{opacity:1}16%,88%{opacity:0}96%,100%{opacity:1}}
@keyframes fa-green{0%,10%{background:#fff;border-color:#eef0f5}16%,88%{background:#f3fbf6;border-color:#cdebd8}96%,100%{background:#fff;border-color:#eef0f5}}
.fa-mail{display:flex;flex-direction:column;gap:12px}
.fa-mh{display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid #eef0f5;color:var(--blue)}
.fa-mh b{font-size:12.5px;color:var(--ink)}
.fa-mail p{margin:0;font-size:12px;line-height:1.5;color:#4d5672}
.fa-mbtns{display:flex;gap:8px}
.fa-mbtns span{padding:7px 14px;border-radius:999px;border:1px solid #e1e5ee;font-size:11.5px;font-weight:600}
.fa-mbtns .go{background:var(--ink);border-color:var(--ink);color:#fff}
.fa.on .fa-mbtns .go{animation:fa-pulse 2.4s ease 2s infinite}
.fa-rec{position:absolute;left:400px;top:388px;width:212px;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#18794e}
.fa-rec .ico{width:13px;height:13px}
/* audit trail: the log keeps scrolling, every action time-stamped */
.fa-log{display:flex;flex-direction:column;gap:12px}
.fa-lgh b{display:block;font-size:13.5px}
.fa-chips{display:flex;gap:6px}
.fa-chips span{padding:4px 10px;border-radius:999px;background:#f1f3f7;font-size:10.5px;font-weight:600;color:#4d5672}
.fa-chips span.on{background:var(--ink);color:#fff}
.fa-roll{position:relative;flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 85%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 85%,transparent)}
.fa-rows{display:flex;flex-direction:column}
.fa.on .fa-rows{animation:fa-roll 22s linear infinite}
@keyframes fa-roll{to{transform:translateY(-50%)}}
.fa-row{display:flex;align-items:center;gap:10px;height:46px;border-bottom:1px solid #f1f2f6;font-size:12px}
.fa-row em{width:38px;flex:none;font-style:normal;font-size:10.5px;font-weight:600;color:#80879b;font-variant-numeric:tabular-nums}
.fa-exp{display:flex;flex-direction:column;gap:12px}
.fa-xp{display:flex;align-items:flex-start;gap:8px}
.fa-xp>.ico{flex:none;margin-top:2px;padding:2px;border-radius:50%;background:#dff3e6;color:#18794e}
.fa-xp b{display:block;font-size:12px}
.fa-dl{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:auto;padding:9px 0;border-radius:999px;background:var(--ink);color:#fff;font-size:11.5px;font-weight:600}
.fa.on .fa-dl{animation:fa-pulse 2.6s ease 2s infinite}
/* data analytics: bars breathe, the forecast redraws, the risk dot blinks */
.fa.on .fa-col i{animation:fa-up .7s var(--ease) calc(var(--d)*1s) both,fa-breathe 3.2s ease-in-out calc(var(--d)*1s + 1.4s) infinite}
@keyframes fa-breathe{0%,100%{transform:none}50%{transform:scaleY(.92)}}
.fa.on .fa-line{animation:fa-draw 1.2s ease 2.4s both,fa-redraw 4s ease-in-out 5s infinite}
@keyframes fa-redraw{0%{stroke-dashoffset:1}40%,100%{stroke-dashoffset:0}}
.fa.on .fa-rk i.r{animation:fa-blink 1.4s ease infinite}
/* integrations: the vendors float gently around the hub */
.fa.on .fa-sat{animation:fa-in .6s var(--ease) calc(var(--d)*1s) both,fa-bob 4.4s ease-in-out calc(var(--d)*1s + 1s) infinite}
.fa-sat{font-size:11.5px;padding:0 12px;height:32px}
/* one-tap approvals you can try: the visitor's taps approve for real in the picture */
.parts-frame:not(.on){pointer-events:none}
.fa-rbtn i,.fa-mbtns .go{cursor:pointer}
.fa-rbtn i:hover,.fa-mbtns .go:hover{background:var(--action-dark)}
.fa-rbtn i,.fa-rbtn em{transition:opacity .3s}
.fa-req{transition:background-color .3s,border-color .3s}
.fa-req.done{opacity:1;background:#f3fbf6;border-color:#cdebd8}
.fa-req.done .fa-rbtn i{opacity:0;pointer-events:none}
.fa-req.done .fa-rbtn em{opacity:1}
.fa-inbox.touched .fa-cnt i{animation:fa-in .3s ease both}
.fa-mbtns .ok{display:inline-flex;align-items:center;gap:5px;background:#dff3e6;border-color:#cdebd8;color:#18794e}
.fa-mbtns .ok .ico{width:12px;height:12px}
/* integrations: each vendor's own mark */
.fa-bm{flex:none;width:16px;height:16px}
.fa-bm-im{display:grid;place-items:center;border-radius:4px;background:#0b3d6e;color:#fff;font:800 8px var(--ui);letter-spacing:-.02em}
.fa-bm-ico{display:grid;place-items:center;border-radius:4px;background:#eef1f6;color:var(--ink)}
.fa-bm-ico .ico{width:11px;height:11px}
.fa-sat{gap:8px}
/* each feature stays at two lines, its tags included, on smaller screens too */
@media(max-width:1300px){.part button>span{font-size:14px}.part-tag{font-size:11px;padding:2px 8px}}
@media(max-width:560px){.part button>span{font-size:13.5px;line-height:1.45}.part-tag{font-size:10.5px;padding:1px 7px;margin-left:4px}}
@media(min-width:901px) and (max-width:1180px){.parts-grid{grid-template-columns:minmax(0,.42fr) minmax(0,.58fr)}}
@media(max-width:380px){.part button>span{font-size:13px}.part-tag{font-size:10px;padding:1px 6px}}
@media(max-width:400px){.part button{column-gap:10px}.part em .ico{width:17px;height:17px}.part button>span{font-size:12.8px;letter-spacing:-.005em}}

/* cookie strip (src/consent.js): thin, at the foot, never blocks the page */






@media(max-width:600px){}
/* pages built around the shell (App.js, ShellTop): the header and footer holders take no box of their own */
.nv-shell{display:contents}

/* ============ The product pages: Navio OS and On It ============
   Same brand, two behaviours. A section shows one idea and one picture; the picture reads before anything moves, and
   what moves is the work. The parts below (frames, scene bar, drawer, tabs) are shared by both pages. */
.pp-hero{padding:clamp(130px,16vh,185px) 0 clamp(50px,7vh,80px)}
.pp-hero-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(28px,4vw,64px);align-items:center}
.pp-hero-copy h1{margin:22px 0 0;font-size:clamp(38px,4.3vw,62px);font-weight:500;letter-spacing:-.055em;line-height:1.04;color:var(--ink)}
.pp-lead{margin:22px 0 0;max-width:46ch;font-size:clamp(16px,1.25vw,18.5px);line-height:1.6;color:var(--slate)}
.pp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.pp-aside{margin:20px 0 0;font:400 12.5px/1.6 var(--ui);color:var(--muted)}
.pp-hero-art{min-width:0}
.pp-close{text-align:center}
.pp-close-in{max-width:40ch;margin-inline:auto}
.pp-close-in h2{font-size:clamp(28px,3.1vw,44px);font-weight:500;letter-spacing:-.04em;line-height:1.08}
.pp-close-in p{margin:16px 0 26px;color:var(--slate)}
.pp-close-note{margin:20px 0 0!important;font:400 12.5px/1.7 var(--ui);color:var(--muted)}
.pp-close-note .text-link{display:inline-flex;margin-left:4px}

/* the scene bar: what is happening, where you are, and a way to see it again */
.kit-bar{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px 18px;margin-top:16px;padding:12px 4px 0}
.kit-now{margin:0;display:flex;align-items:center;gap:9px;font:500 13px var(--ui);color:var(--ink)}
.kit-now i{width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none}
.kit-dots{display:flex;gap:6px}
.kit-dot{width:26px;height:4px;padding:0;border-radius:3px;background:var(--thread);transition:background .3s}
.kit-dot.past{background:#9fb4cf}.kit-dot.on{background:var(--blue)}
.kit-replay{display:inline-flex;align-items:center;gap:7px;padding:0;background:none;font:500 12px var(--ui);color:var(--slate)}
.kit-replay .ico{width:14px;height:14px}
.kit-replay:hover{color:var(--ink)}
.kit-note{grid-column:1/-1;margin:0;font:400 11.5px/1.6 var(--ui);color:var(--muted)}
.kit-sample{display:flex;align-items:center;gap:7px;margin:14px 0 0;font:400 11.5px var(--ui);color:var(--muted)}
.kit-sample .ico{width:13px;height:13px}
.kit-tabs{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:99px;background:#fff}
.kit-tab{min-height:38px;padding:0 16px;border-radius:99px;background:none;font:500 13px var(--ui);color:var(--slate)}
.kit-tab.on{background:var(--ink);color:#fff}
.kit-drawer{position:absolute;right:0;top:0;bottom:0;width:min(360px,86%);z-index:3;display:flex;flex-direction:column;background:#fff;border-left:1px solid var(--line);box-shadow:-26px 0 60px -40px #10193566;animation:kit-slide .32s var(--ease) both}
@keyframes kit-slide{from{transform:translateX(14px);opacity:0}}
.kit-drawer-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.kit-drawer-top h4{margin:0;font-size:14px;font-weight:600;letter-spacing:-.02em}
.kit-x{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--bg);color:var(--slate)}
.kit-drawer-body{padding:18px;overflow:auto}
.kit-file{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.kit-file .ico{width:20px;height:20px;color:var(--blue);flex:none}
.kit-file b{display:block;font-size:13px}.kit-file small{color:var(--slate);font-size:11.5px}
.kit-hist{list-style:none;margin:18px 0 0;padding:0 0 0 16px;border-left:1.5px solid var(--line)}
.kit-hist li{position:relative;padding:0 0 16px}
.kit-hist li::before{content:'';position:absolute;left:-21px;top:5px;width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid var(--blue)}
.kit-hist b{display:block;font-size:12.5px}.kit-hist small{color:var(--slate);font-size:11.5px;line-height:1.5}

/* ---- Navio OS: a workspace you can read ---- */
.nv-app{position:relative;overflow:hidden;background:#fff;border:1px solid #dfe1e8;border-radius:18px;box-shadow:0 30px 60px -38px #10193555,0 3px 8px -5px #1019350f}
.nv-chrome{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid #eef0f4;background:#fcfcfd}
.nv-dots{display:flex;gap:5px}.nv-dots i{width:9px;height:9px;border-radius:50%;background:#e2e4ea}
.nv-brand{display:inline-flex;align-items:center;gap:7px;font:650 12.5px var(--ui);letter-spacing:-.01em;white-space:nowrap}
.nv-brand .ico{width:15px;height:15px;color:var(--blue)}
.nv-path{display:flex;align-items:center;gap:7px;font:400 11px var(--ui);color:var(--muted);overflow:hidden;white-space:nowrap}
.nv-path b{color:var(--thread)}
.nv-path span:last-child{color:var(--slate)}
.nv-body{display:grid;grid-template-columns:142px minmax(0,1fr)}
.nv-rail{display:flex;flex-direction:column;gap:2px;padding:14px 10px;border-right:1px solid #eef0f4;background:#fbfbfc}
.nv-rail-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font:500 11.5px var(--ui);color:var(--slate)}
.nv-rail-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.nv-rail-n{flex:none;font:600 10px var(--ui);color:var(--slate);background:#1019350a;padding:1px 7px;border-radius:99px}
.nv-rail-item.on .nv-rail-n{color:var(--blue);background:#2364a814}
.nv-rail-item .ico{width:14px;height:14px}
.nv-rail-item.on{background:#2364a80f;color:var(--blue)}
.nv-main{padding:18px 20px 20px;min-width:0}
.nv-doc{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:14px;border-bottom:1px solid #eef0f4}
.nv-doc h3{margin:0;font-size:15.5px;font-weight:650;letter-spacing:-.025em}
.nv-doc-sub{margin:5px 0 0;font:400 11.5px var(--ui);color:var(--slate)}
.nv-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;font:600 10.5px var(--ui);white-space:nowrap}
.nv-chip .ico{width:12px;height:12px}
.nv-chip.blue{background:#2364a80f;color:var(--blue)}
.nv-chip.green{background:#16794a12;color:#16794a}
.nv-chip.amber{background:#b2740012;color:#9a6400}
.nv-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.nv-col h4{margin:0 0 10px;font:600 9.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nv-row{display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 9px;align-items:center;padding:8px 0;border-bottom:1px solid #f3f4f7}
.nv-row b{font-size:12px;font-weight:600;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nv-row small{grid-column:2;font:400 10.5px var(--ui);color:var(--slate)}
.nv-tick{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--bg);color:var(--slate)}
.nv-tick .ico{width:12px;height:12px}
.nv-row.done .nv-tick{background:#16794a12;color:#16794a}
.nv-tick.blue{background:#2364a80f;color:var(--blue)}
.nv-row.idle{opacity:.55}
.nv-row.in{animation:nv-rise .55s var(--ease) calc(var(--n,0)*.12s) both}
.nv-row.lit{background:#2364a807;border-radius:8px}
@keyframes nv-rise{from{opacity:0;transform:translateY(8px)}}
.nv-empty{margin:8px 0 0;font:400 11px var(--ui);color:var(--muted)}
.nv-flash{display:flex;align-items:center;gap:7px;margin:10px 0 0;padding:8px 10px;border-radius:9px;background:#2364a80a;font:500 10.5px var(--ui);color:var(--blue);animation:nv-rise .5s var(--ease) both}
.nv-flash .ico{width:13px;height:13px}

/* the clause that becomes work */
.nv-clause-sec{padding-top:clamp(40px,6vh,70px)}
.pp-sec{max-width:54ch;margin-bottom:clamp(26px,4vh,44px)}
.pp-sec h2{margin:14px 0 0;font-size:clamp(27px,3vw,42px);font-weight:500;letter-spacing:-.04em;line-height:1.1}
.pp-sec p{margin:14px 0 0;color:var(--slate);line-height:1.6}
.nv-clause-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(16px,2vw,28px);align-items:center}
.nv-paper{position:relative;padding:clamp(20px,2.2vw,30px);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 50px -40px #10193555;transition:box-shadow .3s}
.nv-paper.lit{box-shadow:0 0 0 2px #2364a822,0 24px 50px -40px #10193555}
.nv-paper-top{display:flex;align-items:center;gap:9px;margin:0 0 18px;font:600 11.5px var(--ui);color:var(--slate)}
.nv-paper-top .ico{width:15px;height:15px;color:var(--blue)}
.nv-paper-top small{margin-left:auto;font:500 10.5px var(--ui);color:var(--muted)}
.nv-para{margin:0 0 14px;font-size:14.5px;line-height:1.75;color:var(--ink)}
.nv-para.dim{color:var(--muted)}
.nv-para.mark{padding:10px 12px;border-radius:10px;background:#2364a80d;box-shadow:inset 2px 0 0 var(--blue)}
.nv-source{display:flex;align-items:center;gap:8px;margin:4px 0 0;font:500 11.5px var(--ui);color:var(--blue);animation:nv-rise .4s var(--ease) both}
.nv-source .ico{width:13px;height:13px}
.nv-exec{position:relative;overflow:hidden;padding:clamp(18px,2vw,26px);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 50px -40px #10193555}
.nv-exec-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid #eef0f4}
.nv-exec-top h3{margin:0;font-size:15px;font-weight:650;letter-spacing:-.02em}
.nv-steps{list-style:none;margin:14px 0 0;padding:0}
.nv-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 12px;align-items:center;padding:10px 0;opacity:.32;transition:opacity .45s var(--ease)}
.nv-steps li.in{opacity:1}
.nv-steps li b{font-size:13px;font-weight:600;letter-spacing:-.015em}
.nv-steps li small{grid-column:2;font:400 11.5px/1.5 var(--ui);color:var(--slate)}
.nv-step-ico{grid-row:span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--bg);color:var(--slate)}
.nv-steps li.in .nv-step-ico{background:#2364a80f;color:var(--blue)}
.nv-steps li:last-child.in .nv-step-ico{background:#16794a12;color:#16794a}
.nv-step-ico .ico{width:14px;height:14px}
.nv-exec-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.nv-exec-actions .button{min-height:42px;font-size:12.5px}
.nv-exec-actions .button[disabled]{opacity:.45}

/* ---- On It: a phone you can read, and both ends of the handover ---- */
.oi-phone{width:min(100%,320px);margin-inline:auto;background:#fff;border:1px solid #dfe1e8;border-radius:30px;box-shadow:0 30px 60px -38px #10193566,0 3px 8px -5px #1019350f;overflow:hidden}
.oi-status{display:flex;align-items:center;justify-content:space-between;padding:12px 20px 4px;font:600 11px var(--ui);color:var(--ink)}
.oi-sig{display:flex;align-items:flex-end;gap:2px}
.oi-sig i{width:3px;height:6px;border-radius:1px;background:var(--ink)}
.oi-sig i:nth-child(2){height:9px}.oi-sig i:nth-child(3){height:12px}
.oi-head{display:flex;align-items:center;justify-content:space-between;padding:8px 20px 12px}
.oi-mark{font:650 16px var(--ui);letter-spacing:-.03em;white-space:nowrap}
.oi-head-note{display:inline-flex;align-items:center;gap:7px;font:500 10.5px var(--ui);color:var(--muted)}
.oi-head-note .ico{width:15px;height:15px}
.oi-screen{padding:0 16px 20px;background:var(--bg);min-height:270px}
.oi-voice{padding:14px;margin-top:14px;border-radius:14px 14px 14px 4px;background:#fff;border:1px solid var(--line)}
.oi-wave{display:flex;align-items:center;gap:2px;height:30px}
.oi-wave i{width:2.5px;border-radius:2px;background:var(--rose);opacity:.75;animation:oi-breathe 1.5s ease-in-out infinite;animation-delay:calc(var(--n)*.08s)}
.oi-voice.heard .oi-wave i{animation:none;opacity:.3}
@keyframes oi-breathe{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.oi-voice p{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink)}
.oi-waiting{margin:14px 0 0;padding:26px 14px;border:1px dashed var(--thread);border-radius:14px;text-align:center;font:400 12px var(--ui);color:var(--muted)}
.oi-task{margin-top:14px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:14px}
.oi-task.in{animation:nv-rise .5s var(--ease) both}
.oi-task b{display:block;font-size:14px;font-weight:650;letter-spacing:-.02em}
.oi-task dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:12px 0 0}
.oi-task dt{font:500 10.5px var(--ui);color:var(--muted)}
.oi-task dd{margin:0;font:500 11.5px var(--ui);color:var(--ink)}
.oi-line{margin:6px 0 0;font:400 11.5px var(--ui);color:var(--slate)}
.oi-chip{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:5px 10px;border-radius:99px;font:600 10.5px var(--ui)}
.oi-chip .ico{width:12px;height:12px}
.oi-chip.blue{background:#2364a80f;color:var(--blue)}
.oi-chip.green{background:#16794a12;color:#16794a}
.oi-chip.amber{background:#b2740012;color:#9a6400}
.oi-ping{display:flex;align-items:center;gap:8px;margin:12px 0 0;padding:9px 11px;border-radius:10px;background:#c8326a0d;font:500 11px var(--ui);color:var(--rose);animation:nv-rise .5s var(--ease) both}
.oi-ping .ico{width:13px;height:13px}
.oi-say{margin:12px 2px 0;font:400 12px/1.6 var(--ui);color:var(--slate)}
.oi-file{display:flex;align-items:center;gap:8px;margin:12px 0 0;padding:10px 12px;border-radius:10px;background:#fff;border:1px solid var(--line);font:500 11.5px var(--ui)}
.oi-file .ico{width:14px;height:14px;color:var(--blue)}
.oi-switch{display:none;margin-bottom:18px}
.oi-art-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,2.4vw,34px);align-items:center}
.oi-said{padding:clamp(18px,2vw,24px);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 50px -42px #10193555}
.oi-said-who{display:flex;align-items:center;gap:8px;margin:0 0 14px;font:600 10.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.oi-said-who .ico{width:14px;height:14px;color:var(--rose)}
.oi-said .oi-wave{height:34px}
.oi-said-line{margin:14px 0 0;font-size:clamp(16px,1.5vw,21px);line-height:1.45;letter-spacing:-.025em;color:var(--ink)}
.oi-said-note{display:flex;align-items:center;gap:8px;margin:16px 0 0;font:500 11.5px var(--ui);color:#16794a;animation:nv-rise .5s var(--ease) both}
.oi-said-note .ico{width:13px;height:13px}
.oi-sides{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,56px);max-width:860px;margin-inline:auto}
.oi-side-top{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:600 13px var(--ui);color:var(--ink)}
.oi-who{padding:4px 9px;border-radius:99px;background:var(--bg);border:1px solid var(--line);font:600 9.5px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.oi-side.mine .oi-who{background:#2364a80f;border-color:#2364a81f;color:var(--blue)}

@media(max-width:1000px){
  .pp-hero-grid{grid-template-columns:1fr;gap:clamp(30px,5vh,48px)}
  .pp-hero{padding-top:clamp(110px,14vh,150px)}
  .nv-clause-grid{grid-template-columns:1fr}
  .nv-cols{grid-template-columns:1fr 1fr}
  .nv-cols .nv-col:last-child{grid-column:1/-1}}
@media(max-width:700px){
  .oi-art-grid{grid-template-columns:1fr}
  .nv-body{grid-template-columns:1fr}
  .nv-rail{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid #eef0f4;scrollbar-width:none}
  .nv-rail::-webkit-scrollbar{display:none}
  .nv-rail-item{white-space:nowrap}
  .nv-path span:not(:last-child),.nv-path b{display:none}
  .nv-cols{grid-template-columns:1fr}
  .nv-cols .nv-col:last-child{grid-column:auto}
  .kit-bar{grid-template-columns:1fr auto}
  .kit-replay{grid-column:2}
  .kit-dots{grid-column:1;grid-row:2}
  .kit-drawer{width:100%;border-left:0}
  .oi-switch{display:inline-flex}
  .oi-sides{grid-template-columns:1fr}
  .oi-sides[data-side=you] .oi-side:not(.mine),.oi-sides[data-side=priya] .oi-side.mine{display:none}}
@media(prefers-reduced-motion:reduce){
  .nv-row.in,.nv-flash,.oi-task.in,.oi-ping,.nv-source,.kit-drawer{animation:none!important}
  .oi-wave i{animation:none!important}}

/* ---- Navio: the lifecycle, the control room, the practical questions ---- */
.nv-life-tabs{margin-bottom:18px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.nv-life-tabs::-webkit-scrollbar{display:none}
.nv-life-tabs .kit-tab{white-space:nowrap}
.nv-life-body{padding:clamp(16px,2vw,26px)}
.nv-life-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid #eef0f4}
.nv-life-head h3{margin:0;font-size:clamp(16px,1.5vw,20px);font-weight:650;letter-spacing:-.03em}
.nv-life-head p{margin:6px 0 0;max-width:52ch;font-size:13px;line-height:1.55;color:var(--slate)}
.nv-life-rows{margin-top:6px}
.nv-life-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:13px 0;border-bottom:1px solid #f3f4f7;animation:nv-rise .5s var(--ease) calc(var(--n)*.07s) both}
.nv-life-row b{font-size:13.5px;font-weight:600;letter-spacing:-.015em}
.nv-life-row small{grid-column:2;font:400 11.5px var(--ui);color:var(--slate)}
.nv-life-row .nv-state{grid-row:span 2;justify-self:end;padding:4px 9px;border-radius:99px;background:var(--bg);font:600 9.5px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--slate);white-space:nowrap}
.nv-life-row.done .nv-tick{background:#16794a12;color:#16794a}
.nv-life-row.now .nv-tick{background:#2364a80f;color:var(--blue)}
.nv-life-row.wait .nv-tick{background:#b2740014;color:#9a6400}
.nv-life-row.wait .nv-state{background:#b2740010;color:#9a6400}
.nv-life-row.edit .nv-tick,.nv-life-row.note .nv-tick{background:#6a4fb812;color:var(--violet)}
.nv-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);margin-bottom:clamp(16px,2vh,24px)}
.nv-tile{padding:clamp(16px,1.8vw,22px);background:#fff;border:1px solid var(--line);border-radius:16px}
.nv-tile b{display:block;font-size:clamp(26px,2.6vw,36px);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--blue)}
.nv-tile.rose b{color:var(--rose)}.nv-tile.violet b{color:var(--violet)}
.nv-tile span{display:block;margin-top:10px;font:500 12px/1.4 var(--ui);color:var(--slate)}
.nv-control{padding-top:clamp(20px,3vh,40px)}
.nv-control-card{position:relative;overflow:hidden;padding:clamp(18px,2vw,26px);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 50px -42px #10193555}
.nv-control-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid #eef0f4}
.nv-control-top h3{margin:0;font-size:15px;font-weight:650;letter-spacing:-.02em}
.nv-control-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid #f3f4f7;animation:nv-rise .5s var(--ease) calc(var(--n)*.08s) both}
.nv-control-row b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.015em}
.nv-control-row small{display:block;margin-top:4px;font:400 11.5px var(--ui);color:var(--slate)}
.nv-control-row .button{min-height:40px;font-size:12px;white-space:nowrap}
.kit-pairs{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:18px 0 0}
.kit-pairs dt{font:500 10.5px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kit-pairs dd{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink)}
.nv-trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.nv-trust-card{padding:clamp(18px,2vw,26px);background:#fff;border:1px solid var(--line);border-radius:18px}
.nv-trust-card h3{margin:0 0 12px;font-size:15.5px;font-weight:650;letter-spacing:-.025em}
.nv-trust-line{margin:0 0 16px;font-size:12.5px;line-height:1.6;color:var(--slate)}
.nv-route{list-style:none;margin:18px 0 0;padding:0 0 0 18px;border-left:1.5px solid var(--line)}
.nv-route li{position:relative;padding:0 0 16px;animation:nv-rise .45s var(--ease) calc(var(--n)*.08s) both}
.nv-route li::before{content:'';position:absolute;left:-24px;top:3px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--blue)}
.nv-route b{display:block;font-size:13px}
.nv-route small{display:block;margin-top:2px;font:400 11.5px var(--ui);color:var(--slate)}
.nv-rt-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nv-rt.nv-skip{opacity:.5}
.nv-rt.nv-skip::before{border-color:var(--thread)}
.nv-rt.nv-dev::before{border-color:var(--rose);box-shadow:0 0 0 3px #c8326a1a}
.nv-rt-tag{font:600 9px var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--rose);background:#c8326a12;padding:2px 7px;border-radius:99px}
.nv-rt-tag.muted{color:var(--muted);background:#1019350f}
.nv-conn{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.nv-conn li{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--line);border-radius:99px;font:500 11.5px var(--ui);color:var(--slate)}
.nv-conn .ico{width:13px;height:13px;color:var(--violet)}
.nv-trust-list{list-style:none;margin:0 0 18px;padding:0}
.nv-trust-list li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid #f3f4f7}
.nv-trust-list .ico{width:16px;height:16px;color:var(--blue);flex:none;margin-top:2px}
.nv-trust-list b{display:block;font-size:13px}
.nv-trust-list span{font:400 11.5px/1.55 var(--ui);color:var(--slate)}

/* ---- On It: who needs what, four views, the work people recognise ---- */
.oi-access-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px)}
.oi-access-card{padding:clamp(20px,2.2vw,30px);background:#fff;border:1px solid var(--line);border-radius:18px}
.oi-access-card.mine{background:#2364a806;border-color:#2364a81f}
.oi-access-card h3{margin:14px 0 16px;font-size:clamp(17px,1.7vw,22px);font-weight:600;letter-spacing:-.03em}
.oi-access-card ul{list-style:none;margin:0;padding:0}
.oi-access-card li{display:flex;align-items:flex-start;gap:11px;padding:9px 0;font-size:13.5px;line-height:1.5;color:var(--slate)}
.oi-access-card .ico{width:15px;height:15px;color:var(--blue);flex:none;margin-top:3px}
.oi-access-note{margin:14px 0 0;font:400 11.5px/1.6 var(--ui);color:var(--muted)}
/* the recipient's side as a neutral message thread (no WhatsApp branding) */
.oi-chat{grid-column:1/-1;margin-top:clamp(14px,1.8vw,22px);padding:clamp(20px,2.4vw,30px);background:#fff;border:1px solid var(--line);border-radius:18px}
.oi-chat-k{margin:0 0 18px;font:600 11px var(--ui);letter-spacing:.03em;color:var(--slate);text-align:center}
.oi-thread{display:flex;flex-direction:column;gap:13px;max-width:560px;margin:0 auto}
.oi-msg{display:flex;flex-direction:column;max-width:84%}
.oi-msg.oi-in{align-items:flex-start;align-self:flex-start}
.oi-msg.oi-out{align-items:flex-end;align-self:flex-end}
.oi-msg-k{margin:0 0 5px 3px;font:600 9.5px var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}
.oi-bub{margin:0;padding:11px 15px;font-size:14px;line-height:1.45;border-radius:16px;max-width:100%}
.oi-in .oi-bub{background:#f1f3f7;color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:5px}
.oi-out .oi-bub{background:var(--blue);color:#fff;border-bottom-right-radius:5px}
.oi-bub-file{display:inline-flex;align-items:center;gap:7px;margin-top:9px;padding:7px 11px;border-radius:10px;background:#ffffff2b;font:500 12px var(--ui)}
.oi-bub-file .ico{width:13px;height:13px;flex:none}
@media(prefers-reduced-motion:no-preference){
  .oi-chat.in .oi-msg{animation:nv-rise .5s var(--ease) both}
  .oi-chat.in .oi-msg:nth-child(2){animation-delay:.12s}
  .oi-chat.in .oi-msg:nth-child(3){animation-delay:.24s}
  .oi-chat.in .oi-msg:nth-child(4){animation-delay:.36s}
  .oi-chat.in .oi-msg:nth-child(5){animation-delay:.48s}
}
.oi-views-grid{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,3vw,56px);align-items:center}
.oi-views-tabs{margin-bottom:clamp(22px,3vh,34px);max-width:100%;overflow-x:auto;scrollbar-width:none}
.oi-views-tabs::-webkit-scrollbar{display:none}
.oi-views-copy h3{margin:0;font-size:clamp(19px,1.9vw,26px);font-weight:600;letter-spacing:-.03em}
.oi-views-copy p{margin:12px 0 0;max-width:46ch;line-height:1.6;color:var(--slate)}
.oi-list{padding-top:14px}
.oi-item{position:relative;padding:13px 26px 13px 14px;margin-bottom:10px;background:#fff;border:1px solid var(--line);border-radius:13px;animation:nv-rise .45s var(--ease) calc(var(--n)*.08s) both}
.oi-item b{display:block;font-size:13.5px;font-weight:650;letter-spacing:-.02em}
.oi-item small{display:block;margin-top:4px;font:400 11.5px var(--ui);color:var(--slate)}
.oi-dot{position:absolute;right:13px;top:17px;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.oi-dot.amber{background:#c99000}.oi-dot.green{background:#16794a}
.oi-case{margin-top:22px;padding:clamp(20px,2.4vw,32px);background:#fff;border:1px solid var(--line);border-radius:18px;animation:nv-rise .45s var(--ease) both}
.oi-case-said{display:flex;align-items:flex-start;gap:12px;margin:0;font-size:clamp(17px,1.8vw,24px);line-height:1.4;letter-spacing:-.03em;color:var(--ink)}
.oi-case-said .ico{width:18px;height:18px;color:var(--rose);flex:none;margin-top:6px}
.oi-case-end{display:flex;align-items:center;gap:12px;margin:18px 0 0;padding-top:18px;border-top:1px solid #f3f4f7;font-size:14px;color:var(--slate)}
.oi-case-end .ico{width:16px;height:16px;color:#16794a;flex:none}

@media(max-width:1000px){
  .nv-tiles{grid-template-columns:1fr 1fr}
  .nv-trust-grid{grid-template-columns:1fr}
  .oi-views-grid{grid-template-columns:1fr;gap:28px}
  .oi-views-copy{order:-1}}
@media(max-width:700px){
  .oi-access-grid{grid-template-columns:1fr}
  .nv-life-row{grid-template-columns:28px minmax(0,1fr)}
  .nv-life-row .nv-state{grid-row:auto;grid-column:2;justify-self:start;margin-top:6px}
  .nv-control-row{flex-direction:column;align-items:flex-start;gap:12px}
  .nv-control-row .button{width:100%}}
@media(prefers-reduced-motion:reduce){
  .nv-life-row,.nv-control-row,.nv-route li,.oi-item,.oi-case{animation:none!important}}

/* On It hero: the voice wave breathes only while listening; once the line is heard it comes to rest */
.oi-said.heard .oi-wave i{animation:none;transform:scaleY(.65)}

/* ===== Home: trust band (longevity, specifics, founder) ===== */
.trustband{padding-block:clamp(64px,9vh,104px)}
.tb-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:center;max-width:1180px;margin:0 auto}
.tb-copy h2{margin:16px 0 0;font-size:clamp(30px,3.4vw,48px);font-weight:500;letter-spacing:-.045em;line-height:1.08}
.tb-copy>p:not(.eyebrow){margin:18px 0 0;font-size:clamp(15px,1.2vw,17px);line-height:1.6;color:var(--slate);max-width:52ch}
@media(max-width:900px){.tb-grid{grid-template-columns:1fr;gap:38px}}
.tb-grid.solo{grid-template-columns:1fr;max-width:760px;text-align:center}.tb-grid.solo .eyebrow{justify-content:center}.tb-grid.solo .tb-copy>p:not(.eyebrow){margin-inline:auto}

/* ===== Book a Demo: the risk-free line + "what happens next" ===== */
.demo-risk{margin:0 0 4px;font:500 12.5px/1.5 var(--ui);color:var(--slate)}
.demo-next{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:12px}
.demo-next li{display:flex;align-items:center;gap:12px}
.demo-next-n{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font:600 12px var(--ui)}
.demo-next b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.demo-next small{display:block;margin-top:1px;font:400 12px var(--ui);color:var(--slate)}
.book-copy .demo-risk{margin-top:22px}
.book-copy .demo-next{max-width:360px}

/* ===== Trust band: client references as a stacked deck of big square cards; the top one flashes to the next ===== */
.tb-sign{margin:18px 0 0;font:500 13px var(--ui);color:var(--slate)}
.tb-clients{align-self:center;min-width:0;width:100%}
.tb-clients-k{margin:0 0 16px;font:600 10px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--slate);text-align:center}
.tb-deck{position:relative;width:min(360px,100%);aspect-ratio:1/1;margin:0 auto}
.tb-card{position:absolute;left:0;right:0;top:34px;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding:clamp(26px,3vw,36px);border:1px solid var(--line);border-radius:24px;background:linear-gradient(176deg,#fff,#f7f9fc);box-shadow:0 34px 64px -42px #10193566;transform-origin:50% 50%;transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .8s ease;will-change:transform,opacity}
.tb-card::before{content:"";position:absolute;top:22px;left:50%;width:22px;height:3px;border-radius:3px;transform:translateX(-50%);background:linear-gradient(90deg,var(--blue),#8bb4ea)}
.tb-quote{margin:0;font-size:clamp(15px,1.45vw,18px);line-height:1.5;font-weight:500;letter-spacing:-.012em;color:var(--ink);transition:opacity .5s ease;text-wrap:balance}
.tb-by b{display:block;font-size:14px;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
.tb-by small{display:block;margin-top:3px;font:500 12px var(--ui);color:var(--slate)}
.tb-by{transition:opacity .5s ease}
.tb-card:not([data-pos="0"]) .tb-quote,.tb-card:not([data-pos="0"]) .tb-by,.tb-card:not([data-pos="0"])::before{opacity:0}
.tb-card[data-pos="0"]{z-index:40;transform:translateY(0) scale(1);opacity:1}
.tb-card[data-pos="1"]{z-index:30;transform:translateY(-15px) scale(.945);opacity:.5}
.tb-card[data-pos="2"]{z-index:20;transform:translateY(-27px) scale(.89);opacity:.24}
.tb-card[data-pos="back"]{z-index:1;transform:translateY(-27px) scale(.89);opacity:0}
@media(max-width:900px){.tb-deck{width:min(340px,90%)}}
/* real client brands beneath the reviews */
.tb-logos{margin-top:clamp(44px,5vw,68px);border-top:1px solid var(--line);padding-top:clamp(28px,3vw,40px)}
.tb-logos-k{text-align:center;margin:0 0 22px;font:600 10px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}
.tb-logos .cust-roll{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* ===== Built to scale (home): a company's teams around one Navio, four proofs of scale (classes sc-*) ===== */
.scale{padding:clamp(56px,9vh,104px) 0 0}
.sc-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}
.sc-card{display:grid;place-items:center;padding:clamp(16px,2.4vw,32px);border:1px solid var(--line);border-radius:22px;background:#fff}
.sc-art{width:100%;max-width:560px;height:auto;overflow:visible}
.sc-art text{font-family:var(--ui)}
.sc-art .ico{width:18px;height:18px;color:var(--blue)}
.sc-ring{fill:none;stroke:#c9d3e4;stroke-width:1.2;stroke-dasharray:4 7;animation:sc-turn 30s linear infinite}
.sc-spoke{stroke:#dfe5ef;stroke-width:1.5}
.sc-pulse{fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:10 200;stroke-dashoffset:10;opacity:0;animation:sc-in 7.2s linear infinite;animation-delay:calc(var(--i)*1.2s)}
.sc-hub{fill:var(--ink)}
.sc-wave{fill:none;stroke:var(--blue);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;animation:sc-wave 1.2s ease-out infinite}
.sc-hub-t{font-size:19px;font-weight:700;letter-spacing:-.01em;fill:#fff}
.sc-hub-s{font-size:11px;fill:#aab3ca}
.sc-team rect{fill:#fff;stroke:#d6deeb;stroke-width:1.2;animation:sc-team 7.2s infinite;animation-delay:calc(var(--i)*1.2s)}
.sc-team text{font-size:13.5px;font-weight:600;fill:var(--ink)}
@keyframes sc-turn{to{stroke-dashoffset:-220}}
@keyframes sc-in{0%{stroke-dashoffset:10;opacity:1}15%{stroke-dashoffset:-100;opacity:1}15.1%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes sc-wave{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}
@keyframes sc-team{0%,13%{fill:#eef3fb;stroke:var(--blue)}20%,100%{fill:#fff;stroke:#d6deeb}}
.sc-proofs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.sc-proofs li{display:flex;flex-direction:column;gap:8px;padding:24px;border:1px solid var(--line);border-radius:20px;background:#fff}
.sc-ico{display:grid;place-items:center;width:42px;height:42px;margin-bottom:10px;border-radius:12px;background:#e7ecf4;color:var(--blue)}
.sc-proofs b{font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.sc-proofs li>span:last-child{font-size:15px;line-height:1.5;color:var(--slate)}
/* ===== How you start (home + product pages): three steps, then live; do it yourself or we do it (classes hs-*) ===== */
.hs{padding-block:clamp(48px,8vh,96px)}
.hs-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.hs-steps li{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px;border:1px solid var(--line);border-radius:20px;background:#fff;animation:hs-lit 6s infinite;animation-delay:calc(var(--i)*1.2s)}
.hs-steps li+li:before{content:"";position:absolute;left:-11px;top:50%;width:7px;height:7px;border-top:2px solid #a9b6cc;border-right:2px solid #a9b6cc;transform:translate(-50%,-50%) rotate(45deg)}
.hs-n{position:absolute;top:18px;right:20px;font:600 11px/1 var(--ui);letter-spacing:.08em;color:var(--muted)}
.hs-ico{display:grid;place-items:center;width:42px;height:42px;margin-bottom:10px;border-radius:12px;background:#e7ecf4;color:var(--blue)}
.hs-steps b{font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.hs-steps li>span:last-child{font-size:15px;line-height:1.5;color:var(--slate)}
.hs-steps .hs-live{border-color:var(--ink);background:var(--ink);animation-name:hs-live}
.hs-steps .hs-live .hs-ico{background:#ffffff1a;color:#7fd3a8}
.hs-steps .hs-live b{color:#fff}
.hs-steps .hs-live>span:last-child{color:#c9cfe0}
.hs-ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.hs-ways div{display:flex;flex-direction:column;gap:4px;padding:18px 22px;border-radius:16px;background:#e7ecf4}
.hs-ways b{font-size:16px;font-weight:600;color:var(--ink)}
.hs-ways span{font-size:14.5px;line-height:1.5;color:var(--slate)}
@keyframes hs-lit{0%,4%{border-color:var(--line);box-shadow:none}10%,22%{border-color:#9fbbe3;box-shadow:0 0 0 4px #2364a814}30%,100%{border-color:var(--line);box-shadow:none}}
@keyframes hs-live{0%,4%{box-shadow:none}10%,22%{box-shadow:0 0 0 6px #2364a826}30%,100%{box-shadow:none}}
.ind-ready{display:flex;align-items:center;gap:8px;margin:16px 0 4px;font-size:14px;font-weight:600;color:var(--ink)}
.ind-ready .ico{width:16px;height:16px;color:#1f7a4d}
@media(max-width:1000px){.sc-grid{grid-template-columns:1fr}.hs-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.hs-steps li:nth-child(3):before{display:none}}
@media(max-width:560px){.sc-proofs,.hs-steps,.hs-ways{grid-template-columns:1fr}.sc-proofs li,.hs-steps li{padding:20px}.hs-steps li+li:before{display:block!important;left:50%;top:-11px;transform:translate(-50%,-50%) rotate(135deg)}}
.sc-art.big .sc-team text{font-size:19.5px}.sc-art.big .ico{width:26px;height:26px}.sc-art.big .sc-hub-t{font-size:24px}.sc-art.big .sc-hub-s{font-size:14px}

.hero-copy .intro b{font-weight:600;color:var(--ink)}

/* ===== Navio AI (owner, 6 Oct): the "Ask Navio AI" badge on every Navio OS screen, the "AI processing" wire where AI
   turns what was said or signed into work, and the Navio AI section on the Navio OS page ===== */
.ai-mark{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,var(--blue),var(--violet) 55%,var(--rose));color:#fff;box-shadow:0 2px 6px -2px #6a4fb880}
.ai-mark svg{width:12px;height:12px;fill:currentColor}
.ask-ai{display:inline-flex;align-items:center;gap:7px;flex:none;padding:3px 11px 3px 3px;border-radius:99px;background:#fff;border:1px solid #e5e0f4;box-shadow:0 4px 14px -8px #6a4fb873;font:600 11px/1.6 var(--ui);color:var(--ink);white-space:nowrap}
.nv-chrome .ask-ai{margin-left:auto}
.dv-top-r .ask-ai{gap:8px;padding:4px 13px 4px 4px;font-size:13px}
.dv-top-r .ask-ai .ai-mark{width:22px;height:22px;border-radius:7px}.dv-top-r .ask-ai .ai-mark svg{width:14px;height:14px}
.ai-pipe{position:relative;height:66px;--reach:28px}
.ai-pipe-v{position:absolute;left:34px;top:0;width:2px;height:34px;background:repeating-linear-gradient(180deg,var(--blue) 0 5px,transparent 5px 10px)}
.ai-pipe-v:before{content:'';position:absolute;left:-3px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.ai-pipe-h{position:absolute;left:34px;right:calc(-1*var(--reach));top:33px;height:2px;background:repeating-linear-gradient(90deg,var(--violet) 0 6px,transparent 6px 12px)}
.ai-pipe-h:after{content:'';position:absolute;right:-1px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--rose)}
.ai-chip{position:absolute;left:55%;top:34px;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:99px;background:#fff;border:1px solid #e5e0f4;box-shadow:0 12px 26px -14px #6a4fb899;font:600 11.5px/1.6 var(--ui);color:var(--ink);white-space:nowrap}
.ai-chip .ai-mark{width:22px;height:22px;border-radius:7px}.ai-chip .ai-mark svg{width:14px;height:14px}
.ai-dots{display:inline-flex;gap:3px;margin-left:1px}.ai-dots b{width:4px;height:4px;border-radius:50%;background:var(--violet);opacity:.35}
.nv-pipe{--reach:clamp(16px,2vw,28px)}.oi-pipe{--reach:clamp(18px,2.4vw,34px)}
.ai-from{min-width:0}
@media(prefers-reduced-motion:no-preference){
  .ai-pipe-v{animation:ai-flow-v .9s linear infinite}.ai-pipe-h{animation:ai-flow-h .9s linear infinite}
  .ai-chip .ai-mark,.ask-ai .ai-mark{animation:ai-glow 2.8s ease-in-out infinite}
  .ai-dots b{animation:ai-dot 1.2s ease-in-out infinite}.ai-dots b:nth-child(2){animation-delay:.2s}.ai-dots b:nth-child(3){animation-delay:.4s}}
@keyframes ai-flow-v{to{background-position:0 10px}}
@keyframes ai-flow-h{to{background-position:12px 0}}
@keyframes ai-glow{0%,100%{box-shadow:0 2px 6px -2px #6a4fb880}50%{box-shadow:0 0 0 4px #6a4fb81c,0 2px 12px -2px #c8326a8c}}
@keyframes ai-dot{0%,100%{opacity:.3;transform:none}50%{opacity:1;transform:translateY(-2px)}}
/* stacked layouts: the wire runs straight down into the card below */
@media(max-width:1000px){.nv-pipe .ai-pipe-v{left:50%;height:100%}.nv-pipe .ai-pipe-h{display:none}.nv-pipe .ai-chip{left:50%}.nv-pipe{height:clamp(56px,9vw,72px);margin-bottom:calc(-1*clamp(16px,2vw,28px))}}
@media(max-width:700px){.oi-pipe .ai-pipe-v{left:50%;height:100%}.oi-pipe .ai-pipe-h{display:none}.oi-pipe .ai-chip{left:50%}.oi-pipe{margin-bottom:calc(-1*clamp(18px,2.4vw,34px))}}
/* the home hero: the chip the four threads run through */
.hd-ai{opacity:0;transform-box:fill-box;transform-origin:center}
.hd-ai-pill{fill:#fff;stroke:#e1dbf3;stroke-width:1;filter:drop-shadow(0 6px 9px #6a4fb833)}
.hd-ai-spark{fill:#fff}.hd-ai-text{font:600 11.5px var(--ui);fill:var(--ink)}.hd-ai-dot{fill:var(--violet);opacity:.35}
@media(prefers-reduced-motion:no-preference){
  .hd-ai{animation:hd-ai 16s ease infinite both}
  .hd-ai-dot{animation:ai-dot 1.2s ease-in-out infinite}.hd-ai-dot1{animation-delay:.2s}.hd-ai-dot2{animation-delay:.4s}}
@keyframes hd-ai{0%,27%{opacity:0;transform:scale(.8)}29.5%,41%{opacity:1;transform:scale(1)}44%,100%{opacity:0;transform:scale(.9)}}
/* "Your Workflows. Your Approval Rules." stays on one line wherever it fits */
@media(min-width:900px){.pp-sec h2.one-line{white-space:nowrap}}
/* the Navio AI section */
.nv-ai-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center}
.nv-ai-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nv-ai-list li{display:flex;gap:12px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:14px}
.nv-ai-list b{display:block;font:600 14px var(--ui);color:var(--ink)}.nv-ai-list small{display:block;margin-top:4px;font:400 12.5px/1.5 var(--ui);color:var(--slate)}
.nv-ai-ico{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:#6a4fb812;color:var(--violet)}
.nv-ai-ico .ico{width:16px;height:16px}
.nv-ai-foot{margin-top:16px;font:400 12px var(--ui);color:var(--muted)}
.nv-ask{padding:clamp(18px,2vw,24px);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 60px -44px #10193566}
.nv-ask-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid #eef0f4}
.nv-ask-top small{font:400 11px var(--ui);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nv-ask-q{width:fit-content;max-width:85%;margin:16px 0 0 auto;padding:10px 14px;border-radius:14px 14px 4px 14px;background:var(--ink);color:#fff;font:500 13px/1.45 var(--ui)}
.nv-ask-a{margin-top:12px;padding:14px;border-radius:14px 14px 14px 4px;background:#f6f4fc;border:1px solid #ebe6f7}
.nv-ask-a>p:first-child{font:500 13px var(--ui);color:var(--ink)}
.nv-ask-a ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.nv-ask-a li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#fff;border-radius:10px;border:1px solid #eeeaf8}
.nv-ask-a li b{display:block;font:600 12.5px var(--ui)}.nv-ask-a li small{display:block;font:400 11px var(--ui);color:var(--muted)}
.nv-chip.violet{background:#6a4fb812;color:var(--violet)}
.nv-ask-src{display:flex;align-items:center;gap:6px;margin-top:10px;font:400 11px var(--ui);color:var(--muted)}.nv-ask-src .ico{width:12px;height:12px}
.nv-ask .kit-sample{margin-top:12px}
@media(prefers-reduced-motion:no-preference){
  .nv-ai .nv-ask-a li{opacity:0;transform:translateY(8px)}
  .nv-ai.in-view .nv-ask-a li{opacity:1;transform:none;animation:nv-rise .5s var(--ease) both}
  .nv-ai.in-view .nv-ask-a li:nth-child(2){animation-delay:.25s}.nv-ai.in-view .nv-ask-a li:nth-child(3){animation-delay:.5s}}
@media(max-width:1000px){.nv-ai-grid{grid-template-columns:1fr}}
@media(max-width:560px){.nv-ai-list{grid-template-columns:1fr}}

/* ===== industry pages (owner, 6 Oct 2026): src/industry.js. One storyline, a different layout per industry ===== */
.ind-hero{padding-block:clamp(120px,15vh,160px) clamp(36px,6vh,64px)}
.ind-hero-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(30px,4vw,64px);align-items:center}
.ind-hero-copy{min-width:0}.ind-hero-copy .breadcrumb{margin-bottom:22px}
.ind-hero-copy h1{margin:16px 0 0;font-size:clamp(40px,4.6vw,66px);font-weight:500;letter-spacing:-.055em;line-height:1.02}
.ind-lead{margin-top:20px;max-width:52ch;font-size:clamp(16px,1.25vw,18.5px);line-height:1.6;color:var(--slate)}
.ind-actions{margin-top:28px}
.ind-ready{display:flex;align-items:center;gap:9px;margin-top:18px;font:500 12.5px var(--ui);color:var(--slate)}
.ind-hero-art{min-width:0}
.ind-art svg{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px #1019351c)}
.ind-sec{max-width:62ch;margin-bottom:clamp(24px,4vh,40px)}
.ind-sec h2{margin:14px 0 0;font-size:clamp(27px,3vw,42px);font-weight:500;letter-spacing:-.04em;line-height:1.1}
.ind-sec p{margin-top:14px;color:var(--slate);line-height:1.6}.ind-sec p b{color:var(--ink);font-weight:600}
/* the pictures */
.ia-sheet{fill:#fff;stroke:#e3e5ec}.ia-ink{fill:var(--ink)}.ia-line{fill:#e9e7e1}.ia-rule{stroke:#d9dbe3;stroke-width:1.2}
.ia-h{font:600 15px var(--ui);fill:var(--ink)}.ia-sub{font:400 11.5px var(--ui);fill:var(--muted)}
.ia-old{transition:opacity .4s}.ia-old.on{opacity:.35}
.ia-strike{stroke:var(--rose);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--ease)}.ia-strike.on{stroke-dashoffset:0}
.ia-insert{fill:#2f9e6b;opacity:0;transform-box:fill-box;transform-origin:left;transform:scaleX(0);transition:transform .6s .35s var(--ease),opacity .2s .35s}.ia-insert.on{opacity:.85;transform:none}
.ia-sig{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s ease}.ia-sig.on{stroke-dashoffset:0}
.ia-stamp .ia-stamp-in{opacity:0;transform:scale(1.9);transform-box:fill-box;transform-origin:center;transition:opacity .15s,transform .45s cubic-bezier(.34,1.7,.5,1)}.ia-stamp.on .ia-stamp-in{opacity:1;transform:none}
.ia-seal{fill:#fff;stroke:#1d7a52;stroke-width:2.4}.ia-seal-in{fill:#1d7a5212;stroke:#1d7a52;stroke-width:1;stroke-dasharray:3 3}.ia-seal-t{font:800 10.5px var(--ui);fill:#1d7a52;text-anchor:middle;letter-spacing:.08em}
.ia-pop .ia-pop-in{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center;transition:opacity .2s,transform .45s cubic-bezier(.34,1.56,.64,1)}.ia-pop.on .ia-pop-in{opacity:1;transform:none}
.ia-chip{fill:#fff;stroke:#e1dbf3;filter:drop-shadow(0 6px 10px #6a4fb833)}.ia-ai-spark{fill:#fff}.ia-chip-text{font:600 12px var(--ui);fill:var(--ink)}
.ia-nudge{fill:#fff;stroke:#f1d7e2;filter:drop-shadow(0 8px 14px #c8326a26)}.ia-nudge-ico{fill:var(--rose)}
.ia-bell{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ia-nudge-k{font:700 8.5px var(--ui);fill:var(--rose);letter-spacing:.12em}.ia-nudge-t{font:600 11.5px var(--ui);fill:var(--ink)}
.ia-slide{opacity:0;transform:translateX(-26px);transition:opacity .35s,transform .5s var(--ease)}.ia-slide.on{opacity:1;transform:none}
.ia-pill{fill:#fff;stroke:#e6e6eb}.ia-pill-t{font:600 12.5px var(--ui);fill:var(--ink)}.ia-pill-s{font:400 11px var(--ui);fill:var(--muted)}
.ia-tick{fill:#1d7a52}.ia-tick-mark{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ia-arc{fill:none;stroke-width:12;stroke-linecap:round}.ia-arc-g{stroke:#2f9e6b}.ia-arc-a{stroke:#e8a93a}.ia-arc-r{stroke:var(--rose)}
.ia-needle{transition:transform .9s cubic-bezier(.34,1.8,.5,1)}.ia-needle-p,.ia-hub{fill:var(--ink)}
.ia-dial-t{font:600 11px var(--ui);fill:#9a6400;text-anchor:middle}.ia-dial-t.ok{fill:#1d7a52}
.ia-row{fill:#fafafb;stroke:#eceef3}.ia-row-t{font:500 12.5px var(--ui);fill:var(--ink)}
.ia-st{fill:#fdf1dc;transition:fill .4s}.ia-st.ok{fill:#e3f5ec}.ia-st-t{font:600 10.5px var(--ui);fill:#96560a;text-anchor:middle}.ia-st-t.ok{fill:#1d7a52}
.ia-ground{stroke:#e3e5ec;stroke-width:2}
.ia-pylon{fill:none;stroke:#9aa1b5;stroke-width:2;stroke-linejoin:round}
.ia-wire{fill:none;stroke:#c9ccd6;stroke-width:1.6;transition:stroke .5s}.ia-wire.live{stroke:#e8a93a}
.ia-pulse{opacity:0;transition:opacity .3s,transform .9s var(--ease)}.ia-pulse.on{opacity:1}.ia-glow{fill:#f5c04a55}.ia-spark-dot{fill:#e8a93a}
.ia-bird{transform-box:fill-box;transform-origin:center bottom;transition:transform .45s cubic-bezier(.3,1.6,.5,1)}.ia-bird.hop{transform:translateY(-16px) rotate(-10deg)}
.ia-bird-b{fill:var(--ink)}.ia-bird-eye{fill:#fff}
.ia-tag{fill:#f4f5f8;stroke:#e6e7ee;transition:fill .4s,stroke .4s}.ia-tag.lit{fill:#e3f5ec;stroke:#bfe5cf}
.ia-tag-t{font:600 10.5px var(--ui);fill:var(--slate);text-anchor:middle}.ia-tag-t.lit{fill:#1d7a52}
.ia-arm{fill:#c9ccd6}.ia-stamp-head{fill:var(--ink)}.ia-stamp-foot{fill:var(--rose)}
.ia-belt{fill:#2b3550}.ia-roll{fill:#4a5577;stroke:#2b3550}.ia-roll-x{stroke:#9aa1b5;stroke-width:1.4}.ia-roller{transform-box:fill-box;transform-origin:center}
.ia-card{opacity:0;transition:transform 1s var(--ease),opacity .4s}.ia-card.on{opacity:1}.ia-card-p{fill:#fff;stroke:#d9dbe3}
.ia-mini{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .2s .35s,transform .4s .35s cubic-bezier(.34,1.56,.64,1)}.ia-mini.on{opacity:1;transform:none}
.ia-bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(.06);transition:transform .7s var(--ease)}.ia-bar.on{transform:none}
.ia-bar0{fill:#2364a855}.ia-bar1{fill:#2364a888}.ia-bar2{fill:#6a4fb8bb}.ia-bar3{fill:var(--violet)}
.ia-up{fill:none;stroke:#1d7a52;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ia-crane{transform-box:fill-box;transform-origin:50% 0}.ia-crane-p{fill:none;stroke:#e8a93a;stroke-width:3;stroke-linecap:round}.ia-load{fill:var(--ink)}
.ia-track{fill:#f1f2f6}.ia-fill{transform-box:fill-box;transform-origin:left;transform:scaleX(0);transition:transform .8s var(--ease)}.ia-fill.on{transform:none}
.ia-fill0{fill:var(--blue)}.ia-fill1{fill:#4a6fc0}.ia-fill2{fill:var(--violet)}.ia-fill3{fill:var(--rose)}
.ia-flag{fill:#2f9e6b;stroke:#1d7a52;stroke-width:1.4;stroke-linejoin:round}
.ia-guar{fill:#fdf6e8;stroke:#f1d9a8;transition:fill .5s,stroke .5s}.ia-guar.ok{fill:#e9f7ef;stroke:#bfe5cf}.ia-guar-s{fill:#96560a}.ia-guar-s.ok{fill:#1d7a52}
.ia-head{fill:#d9dbe3}.ia-body{fill:#e6e8ee}.ia-desk{fill:#8a6a4a}.ia-leg{stroke:#8a6a4a;stroke-width:4;stroke-linecap:round}
.ia-z{font-weight:700;font-family:var(--ui);fill:var(--violet);opacity:0;transition:opacity .4s}.ia-zzz.on .ia-z{opacity:.85}
.ia-file{transition:transform 1s var(--ease)}.ia-folder{fill:#e8a93a}.ia-folder-f{fill:#f2c060}
.ia-done{fill:#e3f5ec;stroke:#1d7a52;stroke-width:2}.ia-done-t{font:800 13px var(--ui);fill:#1d7a52;text-anchor:middle;letter-spacing:.06em}
@media(prefers-reduced-motion:no-preference){
  .ia-press.go{animation:ia-press .6s ease both}
  .ia-roller{animation:ia-spin 1.6s linear infinite}
  .ia-crane{animation:ia-swing 3.6s ease-in-out infinite alternate}
  .ia-zzz.on .ia-z{animation:ia-float 1.4s ease-in-out infinite alternate}
  .ia-pop.on .ia-wiggle{animation:ia-wiggle .7s .45s ease both}}
@media(prefers-reduced-motion:reduce){.ind-art *{transition:none!important;animation:none!important}}
@keyframes ia-press{0%,100%{transform:none}45%{transform:translateY(50px)}60%{transform:translateY(46px)}}
@keyframes ia-spin{to{transform:rotate(360deg)}}
@keyframes ia-swing{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes ia-float{from{transform:none}to{transform:translateY(-5px)}}
@keyframes ia-wiggle{0%,100%{transform:none}25%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}75%{transform:rotate(-1.5deg)}}
/* story: before and after */
.ind-ba{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch}
.ind-ba-col{padding:clamp(20px,2.2vw,28px);border-radius:18px;border:1px solid var(--line);background:#fff}
.ind-ba-col.before{background:#f1f1ee}.ind-ba-col.after{border-color:#d9e7f6;box-shadow:0 30px 60px -48px #2364a866}
.ind-ba-k{font:700 11px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.after .ind-ba-k{color:var(--blue)}
.ind-ba ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px}
.ind-ba li{display:flex;gap:12px;font-size:15px;line-height:1.5;color:var(--slate)}.ind-ba .after li{color:var(--ink)}
.ind-ba li .ico{flex:none;width:18px;height:18px;margin-top:2px}.ind-ba .before li .ico{color:#b0b4c2}.ind-ba .after li .ico{color:#1d7a52}
.ind-ba-arrow{display:grid;place-items:center}.ind-ba-arrow .ico{width:28px;height:28px;color:var(--blue)}
/* story: the board (found, followed up, closed) */
.ind-board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ind-board-col{padding:20px;border-radius:18px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--blue)}
.ind-board-col.c1{border-top-color:var(--rose)}.ind-board-col.c2{border-top-color:#1d7a52}
.ind-board-k{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.ind-board-k b{font:600 18px var(--ui)}
.ind-board-k span{font:600 10.5px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ind-board ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.ind-board li{padding:12px 14px;border-radius:12px;background:#f7f7f9;font-size:14px;line-height:1.5}
/* story: the flow */
.ind-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ind-flow li{position:relative;padding:22px 20px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.ind-flow li:not(:last-child):after{content:'';position:absolute;top:34px;right:-14px;width:14px;height:2px;background:repeating-linear-gradient(90deg,var(--violet) 0 4px,transparent 4px 7px)}
.ind-flow-n{font:600 12px var(--ui);color:var(--muted)}
.ind-flow b{display:block;margin-top:10px;font:600 17px var(--ui)}.ind-flow p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--slate)}
.ind-tag{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:4px 10px;border-radius:99px;background:#2364a80f;color:var(--blue);font:600 11px var(--ui);font-style:normal}
.ind-tag.onit{background:#c8326a12;color:var(--rose)}.ind-tag.ai{background:#6a4fb812;color:var(--violet);padding-left:4px}
.ind-tag .ai-mark{width:16px;height:16px;border-radius:5px}.ind-tag .ai-mark svg{width:10px;height:10px}
/* story: the timeline */
.ind-time{list-style:none;margin:0;padding:0;max-width:760px}
.ind-time li{position:relative;display:flex;gap:18px;padding-bottom:26px}
.ind-time li:not(.last):before{content:'';position:absolute;left:19px;top:40px;bottom:0;width:2px;background:linear-gradient(var(--blue),var(--violet))}
.ind-time-dot{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--blue);font:600 14px var(--ui);color:var(--blue)}
.ind-time li.last .ind-time-dot{background:#1d7a52;border-color:#1d7a52;color:#fff}.ind-time-dot .ico{width:18px;height:18px}
.ind-time b{display:block;margin-top:8px;font:600 18px var(--ui)}.ind-time p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--slate)}.ind-time li.last b{color:#1d7a52}
/* story: the milestone track */
.ind-track{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.ind-track:before{content:'';position:absolute;left:18px;right:18px;top:17px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--violet),#1d7a52)}
.ind-track-step{position:relative;padding-right:18px}
.ind-track-flag{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid var(--violet);color:var(--violet)}
.ind-track-step:last-child .ind-track-flag{background:#1d7a52;border-color:#1d7a52;color:#fff}.ind-track-flag .ico{width:16px;height:16px}
.ind-track b{display:block;margin-top:16px;font:600 17px var(--ui)}.ind-track p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--slate)}
/* story: desk to desk */
.ind-desks{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ind-desk{position:relative;padding:20px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.ind-desk:not(:last-child):after{content:'';position:absolute;right:-12px;top:50%;width:8px;height:8px;border-top:2px solid #b9bdc9;border-right:2px solid #b9bdc9;transform:translateY(-50%) rotate(45deg)}
.ind-desk-n{display:inline-block;padding:3px 9px;border-radius:6px;background:#f3efe6;color:#8a6a4a;font:600 10.5px var(--ui);letter-spacing:.08em;text-transform:uppercase}
.ind-desk b{display:block;margin-top:12px;font:600 17px var(--ui)}.ind-desk p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--slate)}
.ind-desk:last-child{border-color:#bfe5cf;background:#f4fbf7}
/* Navio OS starts it, On It finishes it */
.ind-pair-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
.ind-prod{display:block;height:100%;padding:clamp(22px,2.4vw,30px);border-radius:20px;border:1px solid var(--line);color:inherit;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.ind-prod:hover{border-color:#c9d6ea;box-shadow:0 30px 60px -46px #10193566}
.ind-prod.os{background:linear-gradient(180deg,#eef3fa,#fff 60%)}.ind-prod.onit{background:linear-gradient(180deg,#f7f0f6,#fff 60%)}
.ind-prod-k{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font:600 22px var(--font);letter-spacing:-.03em}
.ind-prod-k span{font:600 10.5px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}.ind-prod.onit .ind-prod-k span{color:var(--rose)}
.ind-prod ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.ind-prod li{display:flex;gap:10px;font-size:15px;line-height:1.5}.ind-prod li .ico{flex:none;width:17px;height:17px;margin-top:2px;color:#1d7a52}
.ind-more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font:600 13px var(--ui);color:var(--ink)}.ind-more .ico{width:14px;height:14px}
.ind-pair-ai{display:flex;flex-direction:column;align-items:center;gap:8px;font:600 11px var(--ui);color:var(--violet);white-space:nowrap}
.ind-pair-ai .ai-mark{width:34px;height:34px;border-radius:11px}.ind-pair-ai .ai-mark svg{width:20px;height:20px}
/* what changed */
.ind-gc{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ind-gc-item{padding:22px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.ind-gc-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#2364a80f;color:var(--blue)}.ind-gc-ico .ico{width:19px;height:19px}
.ind-gc-item b{display:block;margin-top:16px;font:600 17px var(--ui)}.ind-gc-item p{margin-top:6px;font-size:14px;line-height:1.55;color:var(--slate)}
.ind-gc.strip{gap:0;border:1px solid var(--line);border-radius:20px;background:#fff;overflow:hidden}
.ind-gc.strip .ind-gc-item{border:0;border-radius:0;border-right:1px solid var(--line);background:transparent}.ind-gc.strip .ind-gc-item:last-child{border-right:0}
.ind-gl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;max-width:900px}
.ind-gl li{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.45}
.ind-gl-ico{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#1d7a52;color:#fff}.ind-gl-ico .ico{width:15px;height:15px}
.ind-short-long{margin-top:26px;font-size:14px;color:var(--slate)}.ind-short-long b{color:var(--ink)}
.ind-back{padding-block:10px 40px}
@media(max-width:1000px){.ind-hero-grid{grid-template-columns:1fr}.ind-hero{padding-top:clamp(110px,14vh,140px)}}
@media(max-width:900px){
  .ind-board,.ind-ba{grid-template-columns:1fr}.ind-ba-arrow .ico{transform:rotate(90deg)}
  .ind-flow,.ind-desks,.ind-track,.ind-gc{grid-template-columns:1fr 1fr}.ind-flow li:after,.ind-desk:after,.ind-track:before{display:none}.ind-track{row-gap:28px}
  .ind-gc.strip .ind-gc-item{border-right:0;border-bottom:1px solid var(--line)}
  .ind-pair-grid{grid-template-columns:1fr}.ind-pair-ai{flex-direction:row;justify-content:center}}
@media(max-width:560px){.ind-flow,.ind-desks,.ind-track,.ind-gc,.ind-gl{grid-template-columns:1fr}}
.ia-back{fill:#fcfcfb}
/* connectors that are next, not live yet (owner, 6 Oct night: say only what works today): faded, dashed, marked */
.fa-sat.fa-next{filter:grayscale(1);color:var(--muted);border-style:dashed;background:#f7f8fa;box-shadow:none}
.fa-flow.next{stroke-dasharray:2 7;stroke-opacity:.4;animation:none}
.fa-legend{position:absolute;left:22px;top:16px;font:500 11px var(--ui);color:var(--muted)}
.nv-conn li.next{color:var(--muted);border-style:dashed}
.nv-conn li.next .ico{color:var(--muted)}
.nv-conn li em{font:600 9px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-style:normal}
.tc-crow li.next{opacity:.5;filter:grayscale(1)}
/* ============ The home page as one journey (owner, 6 Oct night): one idea per screen, centred, read straight down ============ */
.sec-num{margin:0 auto 14px;font:600 11px var(--ui);letter-spacing:.2em;color:var(--muted);text-align:center}
.sec-num:before{content:'';display:block;width:1px;height:26px;margin:0 auto 10px;background:linear-gradient(transparent,var(--muted))}
.hero-c .sec-num{margin-bottom:12px}.hero-c .sec-num:before{display:none}
.hero-c .hero-layout.c{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(12px,2.4vh,26px);max-width:none}
.hero-c .hero-copy{display:flex;flex-direction:column;align-items:center;max-width:980px;padding:0}
.hero-c .hero-copy .eyebrow{margin:0 auto}
.hero-c .hero-copy h1{margin-top:clamp(12px,2.4vh,22px);font-size:clamp(38px,min(5.1vw,8.4vh),86px);line-height:1.02;white-space:nowrap}
.hero-c .delivered{display:inline-block;padding-bottom:4px}
.hero-c .hero-copy .intro{margin:clamp(10px,2vh,18px) auto 0;max-width:42em;text-align:center}
.hero-c .hero-actions{justify-content:center;margin-top:clamp(14px,2.6vh,26px)}
.hero-c .fit-slot{flex:1 1 0;min-height:0;width:100%;max-width:1040px}
.hero-c .threads{display:none}
@media(max-width:900px){.hero-c .hero-copy h1{white-space:normal;font-size:clamp(36px,10.4vw,64px)}.hero-c .delivered{display:block;margin:0 auto}.hero-c .hero-copy .intro{max-width:34em}}
/* 02 on the home page */
.nv-life-home{padding-top:clamp(56px,9vh,110px)}
.nv-life-home .nv-life-tabs{justify-content:center}
.nv-life-home .nv-life-app{max-width:1040px;margin:0 auto}
/* 03: names in a row, the picture centred, one line under it */
.parts-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:1040px;margin:0 auto clamp(16px,2.6vh,26px);padding:4px 0}
.parts-chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1px solid var(--line);border-radius:99px;background:#fff;font:500 13.5px var(--ui);color:var(--slate);white-space:nowrap;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.parts-chip .ico{width:15px;height:15px}
.parts-chip:hover{color:var(--ink);border-color:var(--thread)}
.parts-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.parts-c .parts-stage{max-width:1040px;margin:0 auto;display:block}
.parts-line{max-width:62ch;margin:clamp(16px,2.6vh,24px) auto 0;text-align:center;font-size:clamp(15px,1.2vw,18px);line-height:1.55;color:var(--slate)}
.parts-line b{color:var(--ink);font-weight:600}
@media(max-width:900px){.parts-chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);max-width:none}.parts-chips::-webkit-scrollbar{display:none}.parts-c .parts-stage{display:block}}
/* 04: the wheel, then the steps in a row */
.fit-card{max-width:720px;margin:0 auto clamp(22px,4vh,40px)}
.fit-steps{max-width:1080px;margin:0 auto}
@media(max-width:900px){.fit-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.fit-steps{grid-template-columns:1fr}}
/* 05: four facts in a row under the logos */
.tb-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:1080px;margin:clamp(28px,4vh,44px) auto 0;padding:0;list-style:none}
.tb-facts li{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 12px;border:1px solid var(--line);border-radius:16px;background:#fff;text-align:center}
.tb-facts b{font-size:clamp(18px,1.5vw,22px);font-weight:600;letter-spacing:-.02em}
.tb-facts span{font-size:13px;color:var(--slate)}
@media(max-width:700px){.tb-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the menu: three links, lit on their own page */
.hdr .nav-btn.on{color:var(--ink);background:#eef0f4}
.msheet .macc-link.on{color:var(--ink);background:#eef0f4;border-radius:12px;padding-inline:12px}
/* the footer's quiet line about the second product */
.foot-also{margin:0 0 12px;font:400 12.5px var(--ui);color:#8f97ad}
.foot-also a{color:#c9cfe0;text-decoration:underline;text-underline-offset:3px}
@media(max-width:680px){.foot-also{text-align:center}}
/* Company page foot: trust, careers, contact */
.co-foot{padding-top:0}
.co-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1080px;margin:0 auto}
.co-card{display:flex;flex-direction:column;gap:10px;padding:26px;border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--ink);transition:transform .3s var(--ease),box-shadow .3s}
.co-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -28px #10193566}
.co-card b{font-size:20px;font-weight:500;letter-spacing:-.02em}
.co-card>span:not(.tc-ico){font-size:14.5px;line-height:1.5;color:var(--slate)}
.co-card em{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font:600 13px var(--ui);font-style:normal}
.co-card em .ico{width:14px;height:14px}
@media(max-width:800px){.co-grid{grid-template-columns:1fr}}
/* industry pages: one product, two halves of the same story */
.ind-pair-grid.one .ind-prod{cursor:default}
.ind-pair-more{margin:18px 0 0;text-align:center}
.ind-pair-more .ind-more{display:inline-flex}
/* trust: the connector rows now carry icons as well as logos */
.tc-crow li .tc-ico{width:32px;height:32px;display:grid;place-items:center;border-radius:10px}
/* the hero gives its height to the card: tighter words above, a wider card below (owner: the product must be big) */
.fold .hero-c{padding-top:calc(16px + 60px + clamp(8px,1.6vh,20px) + env(safe-area-inset-top,0px))}
.hero-c .hero-layout.c{gap:clamp(10px,1.8vh,20px)}
.hero-c .hero-copy h1{margin-top:clamp(10px,1.6vh,16px);font-size:clamp(36px,min(4.6vw,7.6vh),78px)}
.hero-c .hero-copy .intro{margin-top:clamp(8px,1.4vh,12px);font-size:clamp(14px,min(1.25vw,2.2vh),20px);line-height:1.5}
.hero-c .hero-actions{margin-top:clamp(12px,1.8vh,18px)}
.hero-c .fit-slot{max-width:1120px}
.nv-life-home .nv-life-tabs{display:flex;width:fit-content;max-width:100%;margin-inline:auto}
.nv-life-home .kit-sample{justify-content:center;text-align:center}
@media(max-width:900px){.nv-life-home .nv-life-tabs{width:100%;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;border-radius:16px}.nv-life-home .nv-life-tabs::-webkit-scrollbar{display:none}}
/* ============ One screen per scroll (owner, 6 Oct night): each section is the height of the screen, its words at the
   top and its picture sized to the room that is left, so nothing is ever cut in half ============ */
.j{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(60px + 30px + env(safe-area-inset-top,0px)) 0 28px;box-sizing:border-box}
.j.parts,.j.scale,.j.trustband,.j-os{padding:calc(60px + 30px + env(safe-area-inset-top,0px)) 0 28px}
.j>.container{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;width:100%}
.j .sec-head{flex:none;margin-bottom:clamp(12px,2.2vh,24px)}
.j .sec-head h2{font-size:clamp(28px,min(3.1vw,5.6vh),50px)}
.j .sec-head p{margin-top:clamp(6px,1.2vh,12px);font-size:clamp(14px,min(1.1vw,2vh),17px)}
.j .sec-num{margin-bottom:10px;letter-spacing:.12em}
.j .sec-num:before{height:18px;margin-bottom:8px}
/* 02: the workspace on an iPad, the step pills beside it, the whole group centred */
.j-slot{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.j-door{flex:none;min-height:0;width:min(100%,900px);margin:0 auto;flex-direction:row;align-items:center;overflow:visible;border-radius:0;background:transparent}
.j-door .door-shot{flex:none;align-self:center;margin:0;width:min(100%,560px,calc(50vh * 840 / 584))}
@media(max-width:900px){.j-door{width:100%}.j-door .door-shot{width:min(100%,520px);margin:0 auto;border-width:8px;border-radius:20px}.j-door .door-shot img{border-radius:12px}}
/* 03: the picture takes the room left under the names, never more */
.j-parts .parts-chips{max-width:none;margin-bottom:clamp(10px,2vh,18px)}
.j-parts .parts-chip{height:34px;padding:0 12px;font-size:13px}
.j-parts .parts-stage{width:min(100%,1040px,calc(48vh * 16 / 11));margin:0 auto}
.j-parts .parts-line{margin-top:clamp(10px,1.8vh,16px)}
@media(max-width:900px){.j-parts .parts-stage{width:100%}}
/* 04: the wheel sized to the room, the four steps in one slim row */
.j-fit .fit-card{padding:10px 16px;margin-bottom:clamp(14px,2.4vh,24px)}
.j-fit .sc-art{height:min(36vh,400px);width:auto;max-width:100%}
.j-fit .hs-steps li{padding:14px 16px 14px;gap:3px}
.j-fit .hs-ico{width:34px;height:34px;margin-bottom:6px}
.j-fit .hs-steps li b{font-size:15px}
.j-fit .hs-steps li>span:last-child{font-size:13px;line-height:1.4}
/* 05: tighter stack */
.j-trust .tb-logos{margin-top:clamp(18px,3vh,32px);padding-top:clamp(16px,2.4vh,26px)}
.j-trust .tb-facts{margin-top:clamp(16px,2.4vh,26px)}
.j-trust .tb-copy h2{font-size:clamp(28px,min(3.1vw,5.6vh),46px)}
.j-trust .tb-copy>p:not(.eyebrow){margin-top:12px}
.j-trust .tb-facts li{padding:12px 10px}
/* the last few pixels: names in one row on laptops, the pictures a touch smaller on short screens */
.j-parts .parts-chip{height:32px;padding:0 11px;font-size:12.5px;gap:6px}
.j-parts .parts-chip .ico{width:14px;height:14px}
.j-parts .parts-stage{width:min(100%,1040px,calc(43vh * 16 / 11))}
.j-parts .parts-line{font-size:clamp(14px,min(1.1vw,2vh),17px)}
.j-fit .sc-art{height:min(33vh,400px)}
.j-fit .hs-steps li{padding:12px 14px}
@media(max-width:900px){.j{min-height:0;padding-top:calc(60px + 24px)}.j-fit .sc-art{height:min(30vh,300px)}.fit-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
@media(max-width:560px){.fit-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.j-fit .hs-steps li b{font-size:14px}.j-fit .hs-steps li>span:last-child{font-size:12px}}
.j-parts .parts-stage{width:min(100%,1040px,calc(40vh * 16 / 11))}
.j.parts{padding-bottom:20px}
.j-parts .sec-head{margin-bottom:clamp(8px,1.6vh,18px)}
/* 02: the iPad and its pills as one centred group (the door used to grow to fill the row) */
.j-door{flex:0 0 auto;width:min(100%,800px)}
/* 03: the eight names as two even rows of four; the picture takes what is left */
@media(min-width:901px){.j-parts .parts-chips{display:grid;grid-template-columns:repeat(4,max-content);justify-content:center;gap:6px 8px}}
.j-parts .parts-stage{width:min(100%,1040px,calc(42vh * 16 / 11))}
/* 04: the wheel big enough to read, the card around it slim */
.j-fit .fit-card{padding:4px 12px;border:0;background:transparent}
.j-fit .sc-art{height:min(45vh,420px)}
/* 05: the logo roll fades out at both edges, so no logo is ever cut */
.j-trust .cust-roll{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}

.j-fit .sc-art{height:min(37vh,400px)}
/* the old two-card rule (.door.door-ipad{flex-grow:1.5}) must not stretch the lone iPad: the group stays 800px and centred */
.j-slot .door.j-door{flex:0 0 auto;width:min(100%,800px)}

/* ============ v3 home: the scroll journey (from nuvena-scroll-journey-v2.html), scoped to #nvj ============ */
#nvj{--nv-bg:#f7f7f5;--nv-ink:#101935;--nv-blue:#2364a8;--nv-violet:#6a4fb8;--nv-rose:#c8326a;--nv-muted:#80879b;--nv-header-clearance:0px;color:var(--nv-ink);font-family:var(--font);background:var(--nv-bg);isolation:isolate;position:relative}
#nvj,#nvj *{box-sizing:border-box}
#nvj button,#nvj a{-webkit-tap-highlight-color:transparent}
#nvj button{font:inherit;color:inherit;cursor:pointer}
#nvj button:focus-visible,#nvj a:focus-visible{outline:2px solid var(--nv-blue);outline-offset:5px}
#nvj .nvj-story{position:relative;height:690svh;min-height:3500px}
#nvj .nvj-pin{height:calc(100svh - var(--nv-header-clearance));min-height:530px;position:sticky;top:var(--nv-header-clearance);display:grid;grid-template-rows:32px 138px minmax(0,1fr) 56px;align-items:center;padding:26px 34px 16px;overflow:hidden;background:radial-gradient(ellipse at 49% 56%,#eeeaf240,transparent 48%),var(--nv-bg)}
#nvj .nvj-eyebrow{margin:0;text-align:center;font-size:11px;font-weight:650;letter-spacing:.22em;color:#69718a;text-transform:uppercase;z-index:2;align-self:start;display:flex;align-items:center;justify-content:center;gap:10px}
#nvj .nvj-eyebrow:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--nv-rose)}
#nvj .nvj-titlebox{height:138px;position:relative;text-align:center;z-index:2;pointer-events:none}
#nvj .nvj-title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;margin:0;font-size:clamp(45px,5.2vw,76px);line-height:.99;letter-spacing:-.058em;font-weight:550;opacity:0;will-change:opacity,transform}
#nvj .nvj-title:first-child{opacity:1}
#nvj .nvj-title span{display:block;color:var(--nv-blue)}
#nvj .nvj-title:nth-child(3) span{color:var(--nv-violet)}
#nvj .nvj-figure{position:relative;height:100%;min-height:0;width:min(1390px,100%);margin:auto;z-index:1}
#nvj .nvj-art{display:block;width:100%;height:100%;overflow:visible;font-family:var(--font)}
#nvj .nvj-art text{fill:#101935;user-select:none}
#nvj .nvj-art .nvj-soft{fill:#737d96}
#nvj .nvj-art .nvj-blue{fill:#2364a8}
#nvj .nvj-art .nvj-violet{fill:#6a4fb8}
#nvj .nvj-art .nvj-rose{fill:#c8326a}
#nvj .nvj-art .nvj-white{fill:#fff}
#nvj .nvj-art .nvj-fine{font-size:10px;letter-spacing:1.3px;font-weight:650}
#nvj .nvj-art .nvj-small{font-size:12px}
#nvj .nvj-art .nvj-medium{font-size:15px;font-weight:550}
#nvj .nvj-art .nvj-bold{font-size:18px;font-weight:600;letter-spacing:-.5px}
#nvj .nvj-cardface{fill:#fff;stroke:#e2e4ed;stroke-width:1}
#nvj .nvj-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;width:min(1180px,100%);margin:auto;position:relative;z-index:4}
#nvj .nvj-hint{font-size:12px;color:#778198;display:flex;align-items:center;gap:10px;white-space:nowrap}
#nvj .nvj-mouse{width:13px;height:20px;border:1px solid #8d95a8;border-radius:8px;position:relative;display:inline-block}
#nvj .nvj-mouse:after{content:'';position:absolute;left:5px;top:4px;height:4px;width:1px;background:#66728e}
#nvj .nvj-rail{position:relative;display:flex;gap:21px;align-items:center;padding:0;list-style:none;margin:0}
#nvj .nvj-rail:before{position:absolute;content:'';height:1px;top:50%;left:0;right:0;background:#dadee8;z-index:-1}
#nvj .nvj-stop{border:0;background:var(--nv-bg);padding:9px 4px;min-width:28px;min-height:36px;display:flex;gap:6px;align-items:center;color:#98a0b3;font-size:11px;transition:color .2s}
#nvj .nvj-stop i{width:5px;height:5px;border:1px solid currentColor;background:var(--nv-bg);border-radius:50%;display:block}
#nvj .nvj-stop[aria-current=true]{color:var(--nv-blue);font-weight:650}
#nvj .nvj-stop[aria-current=true] i{background:var(--nv-blue)}
#nvj .nvj-watch{justify-self:end;display:inline-flex;align-items:center;gap:8px;border:1px solid #dce0e8;border-radius:999px;background:#ffffff90;padding:9px 14px;font-size:12px;min-height:38px;box-shadow:0 3px 10px #10193503;white-space:nowrap}
#nvj .nvj-watch:hover{border-color:#8a98b5;background:#fff}
#nvj .nvj-watch svg{width:12px;height:12px;fill:currentColor}
#nvj .nvj-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#10193506}
#nvj .nvj-progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--nv-blue),var(--nv-violet),var(--nv-rose));transform:scaleX(0);transform-origin:left}
#nvj .nvj-sample{position:absolute;left:4px;bottom:2px;font-size:9px;letter-spacing:.05em;color:#959bad;pointer-events:none}
#nvj .nvj-end{height:130px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:#69718a;font-size:12px}
#nvj .nvj-end strong{font-size:19px;font-weight:500;color:#101935;letter-spacing:-.5px}
#nvj .nvj-end button{background:none;border:0;font-size:12px;color:#2364a8;padding:8px}
#nvj .nvj-static{display:none}
@media(min-width:1600px){#nvj .nvj-pin{padding-top:44px;grid-template-rows:32px 160px minmax(0,1fr) 65px}#nvj .nvj-titlebox{height:160px}#nvj .nvj-title{font-size:88px}}
@media(max-width:700px){#nvj .nvj-story{height:630svh;min-height:2800px}#nvj .nvj-pin{padding:18px 15px 12px;grid-template-rows:25px 108px minmax(0,1fr) 55px;min-height:510px}#nvj .nvj-eyebrow{font-size:10px;letter-spacing:.18em}#nvj .nvj-titlebox{height:108px}#nvj .nvj-title{font-size:clamp(34px,10.2vw,52px);letter-spacing:-.055em;line-height:1.02}#nvj .nvj-controls{grid-template-columns:1fr auto;gap:4px}#nvj .nvj-hint{display:none}#nvj .nvj-rail{gap:8px}#nvj .nvj-stop{font-size:10px;gap:4px;padding:7px 0;min-width:20px}#nvj .nvj-watch{font-size:10px;padding:8px 10px;gap:5px;min-height:36px}#nvj .nvj-sample{font-size:8px;bottom:0;left:3px}#nvj .nvj-end{height:100px}}
@media(max-height:650px) and (min-width:701px){#nvj .nvj-pin{padding-top:12px;grid-template-rows:18px 90px minmax(0,1fr) 38px;min-height:450px}#nvj .nvj-titlebox{height:90px}#nvj .nvj-title{font-size:46px}#nvj .nvj-eyebrow{font-size:9px}#nvj .nvj-sample{bottom:0}}
@media(max-height:610px) and (max-width:700px){#nvj .nvj-pin{padding-top:10px;grid-template-rows:19px 84px minmax(0,1fr) 44px;min-height:480px}#nvj .nvj-titlebox{height:84px}#nvj .nvj-title{font-size:34px}}
@media(prefers-reduced-motion:reduce){#nvj .nvj-story{height:auto!important;min-height:0!important}#nvj .nvj-pin{display:none}#nvj .nvj-static{display:grid;gap:28px;max-width:760px;margin:auto;padding:60px 24px}#nvj .nvj-static .nvj-static-title{font-weight:550;font-size:42px;letter-spacing:-2px;margin:0 0 20px}#nvj .nvj-static article{border-top:1px solid #e2e4ed;padding-top:24px}#nvj .nvj-static h2{font-size:24px;margin:0 0 14px;letter-spacing:-.7px}#nvj .nvj-static p{color:#4d5672;font-size:16px;margin:0;line-height:1.6}#nvj .nvj-static small{color:#80879b;font-size:11px}}
/* the floating pill header sits over the top of the pinned stage; the stage starts under it */
#nvj .nvj-pin{padding-top:calc(16px + 60px + 14px + env(safe-area-inset-top,0px))}
@media(max-width:700px){#nvj .nvj-pin{padding-top:calc(12px + 54px + 10px + env(safe-area-inset-top,0px))}}
@media(max-height:650px) and (min-width:701px){#nvj .nvj-pin{padding-top:calc(16px + 60px + 6px)}}
/* the stage rail stands alone (owner, 7 Oct: no hint, no sample label, no auto-scroll) */
#nvj .nvj-controls{grid-template-columns:1fr;justify-items:center}
@media(max-width:700px){#nvj .nvj-controls{grid-template-columns:1fr}}
#nvj .nvj-pin{grid-template-rows:138px minmax(0,1fr) 56px}
@media(min-width:1600px){#nvj .nvj-pin{grid-template-rows:160px minmax(0,1fr) 65px}}
@media(max-width:700px){#nvj .nvj-pin{grid-template-rows:108px minmax(0,1fr) 55px}}
@media(max-height:650px) and (min-width:701px){#nvj .nvj-pin{grid-template-rows:90px minmax(0,1fr) 38px}}
@media(max-height:610px) and (max-width:700px){#nvj .nvj-pin{grid-template-rows:84px minmax(0,1fr) 44px}}
/* Sign in: a text link beside the button at the top right; in the phone sheet instead on small screens */
.hdr-signin{display:inline-flex;align-items:center;height:44px;padding:0 10px;font:500 15px var(--font);color:var(--slate);white-space:nowrap}
.hdr-signin:hover{color:var(--ink)}
@media(max-width:900px){.hdr-signin{display:none}}


/* 7 Oct, owner: clear the menu pill, sharper stage, the rail easy to read */
#nvj .nvj-pin{padding-top:calc(16px + 60px + 40px + env(safe-area-inset-top,0px))}
@media(max-width:700px){#nvj .nvj-pin{padding-top:calc(12px + 54px + 30px + env(safe-area-inset-top,0px))}}
@media(max-height:650px) and (min-width:701px){#nvj .nvj-pin{padding-top:calc(16px + 60px + 24px)}}
#nvj .nvj-title{font-weight:600;letter-spacing:-.055em;color:var(--ink)}
#nvj .nvj-pin{background:var(--nv-bg)}
#nvj .nvj-stop{font-size:12px;color:#7d859a}
#nvj .nvj-stop[aria-current=true]{color:var(--ink);font-weight:700}
#nvj .nvj-stop[aria-current=true] i{background:var(--nv-blue);border-color:var(--nv-blue)}
@media(max-width:700px){#nvj .nvj-rail{gap:6px}#nvj .nvj-stop{font-size:9.5px;gap:3px;min-width:0}}

/* ============ Sign in (owner, 7 Oct 2026, after claude.ai/login): a card on the left, a light brand panel on the right ============ */
.lg{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:1fr auto;min-height:100svh;background:#fff}
.lg-logo{position:absolute;left:clamp(22px,4vw,56px);top:clamp(22px,3.6vh,36px);z-index:2}
.lg-logo img{display:block;height:20px;width:auto}
.lg-left{display:flex;align-items:center;justify-content:center;padding:96px clamp(22px,5vw,72px) 56px}
.lg-form{width:100%;max-width:420px;text-align:center}
.lg h1{margin:0;font:500 clamp(32px,3vw,44px)/1.06 var(--font);letter-spacing:-.05em;color:var(--ink)}
.lg-sub{margin:12px auto 0;max-width:30ch;font:400 16px/1.5 var(--font);color:var(--slate)}
.lg-sub b{font-weight:600;color:var(--ink)}
.lg-card{display:grid;gap:12px;margin-top:30px;padding:26px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 24px 50px -40px #10193566;text-align:left}
.lg-sso{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:50px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font:600 15px var(--font);transition:border-color .2s,box-shadow .2s,background .2s}
.lg-sso:hover{border-color:var(--thread);background:#fafbfd;box-shadow:0 8px 20px -16px #10193540}
.lg-g{width:19px;height:19px;flex:none}
.lg-or{display:flex;align-items:center;gap:14px;margin:4px 0;font:500 11.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lg-or:before,.lg-or:after{content:'';flex:1;height:1px;background:var(--line)}
.lg-email{display:block;width:100%;height:50px;padding:0 16px;border:1px solid var(--line);border-radius:14px;background:var(--bg);font:500 16px var(--ui);color:var(--ink);transition:border-color .2s,box-shadow .2s,background .2s}
.lg-email:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px #2364a814;background:#fff}
.lg-email.bad,.lg-otp.bad input{border-color:var(--rose)}
.lg-err{margin:8px 0 0;font:500 13px var(--ui);color:var(--rose)}
.lg-btn{display:flex;align-items:center;justify-content:center;width:100%;height:50px;margin-top:12px;border:0;border-radius:14px;background:var(--action-dark);color:#fff;font:600 15px var(--font);transition:background .2s}
.lg-btn:hover{background:var(--action-dark)}
.lg-otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.lg-otp input{height:56px;width:100%;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--bg);text-align:center;font:600 22px var(--ui);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.lg-otp input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px #2364a814;background:#fff}
.lg-help{margin:4px 0 0;text-align:center;font:400 13px var(--ui);color:var(--muted)}
.lg-back{justify-self:center;padding:0;background:none;border:0;font:500 13px var(--ui);color:var(--slate);text-decoration:underline;text-underline-offset:3px}
.lg-link{padding:0;background:none;border:0;font:600 13.5px var(--ui);color:var(--blue);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lg-note{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:var(--bg);font:500 13px/1.5 var(--ui);color:var(--slate)}
.lg-foot{margin:22px 0 0;font:400 14px var(--ui);color:var(--slate)}
.lg-legal{margin-top:16px;font:400 13px var(--ui);color:var(--slate)}
.lg-legal nav{display:flex;justify-content:center;align-items:center;gap:12px}
.lg-legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* the light brand panel, a rounded card like Claude's picture */
.lg-right{display:flex;padding:clamp(14px,2.2vw,28px)}
.lg-panel{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;overflow:hidden;border-radius:28px;padding:clamp(40px,8vh,84px) 0 0;
  background:radial-gradient(70% 45% at 50% 22%,#ece8fb 0%,transparent 70%),linear-gradient(170deg,#f6f5fc 0%,#eef2fb 55%,#f8f1f5 100%)}
.lg-brand{width:100%;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.2vh,22px)}
.lg-mark{position:relative;display:flex;align-items:center;width:100%}
.lg-word{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;padding:0 clamp(18px,2.2vw,34px);font:700 clamp(46px,5.4vw,92px)/1.1 NuvenaRound,var(--font);letter-spacing:.05em;color:#3a4f9e}
.lg-ch{background:linear-gradient(90deg,#2364a8,#6a4fb8);-webkit-background-clip:text;background-clip:text;color:transparent}
.lg-line{position:relative;z-index:1;flex:1;height:2px;border-radius:2px}
.lg-line.l{background:linear-gradient(90deg,transparent,#2364a8 60%,#5e7fe0);transform-origin:left center}
.lg-line.r{background:linear-gradient(90deg,#d0457d,#c8326a 40%,transparent);transform-origin:right center}
.lg-glow{position:absolute;left:50%;top:50%;z-index:0;width:min(92%,680px);height:clamp(130px,18vw,250px);transform:translate(-50%,-50%);pointer-events:none}
.lg-glow i{position:absolute;inset:0;border-radius:50%}
.lg-glow i:first-child{background:radial-gradient(50% 50% at 50% 50%,rgba(106,79,184,.32),rgba(35,100,168,.2) 44%,rgba(200,50,106,.12) 66%,transparent 78%);filter:blur(36px)}
.lg-glow i+i{inset:18% 20%;background:radial-gradient(50% 50% at 50% 50%,rgba(106,79,184,.28),rgba(35,100,168,.12) 52%,transparent 76%);filter:blur(22px)}
.lg-tag{position:relative;z-index:1;margin:0;font:500 clamp(20px,1.9vw,28px)/1.2 var(--font);letter-spacing:-.035em;color:var(--ink)}
.lg-tag span{color:var(--blue)}
.lg-caret{display:inline-block;width:3px;height:.78em;margin-left:6px;border-radius:2px;background:#6a4fb8;opacity:0}
.lg-desk{width:min(92%,620px);margin-top:auto}
.lg-scene{display:block;width:100%;height:auto}
/* the sequence: the name types in, then the lines draw in from the sides, then the glow, then the line under it */
@media(prefers-reduced-motion:no-preference){
  .lg-ch{opacity:0;animation:lg-type .03s linear forwards;animation-delay:calc(.35s + var(--i)*.16s)}
  .lg-caret{animation:lg-caret .9s steps(1) .2s 3,lg-caret-out .3s 1.6s forwards}
  .lg-line{transform:scaleX(0);animation:lg-draw 1s cubic-bezier(.3,.7,.2,1) 1.45s forwards}
  .lg-glow{opacity:0;animation:lg-in 1.4s ease 2.1s forwards}
  .lg-glow i{animation:st-glow 12s ease-in-out 3.5s infinite}
  .lg-tag{opacity:0;transform:translateY(8px);animation:lg-up .8s ease 2.4s forwards}
  .lg-line:after{content:'';position:absolute;top:-1px;height:4px;width:22%;border-radius:4px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);opacity:0}
  .lg-line.l:after{animation:lg-run-l 5s ease-in-out 3s infinite}
  .lg-line.r:after{animation:lg-run-r 5s ease-in-out 3s infinite}
  .lg-head{animation:lg-breath 4.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}
  .lg-body{animation:lg-breath 4.6s ease-in-out infinite}
  .lg-eyes{animation:lg-blink 5.2s infinite;transform-box:fill-box;transform-origin:center}
  .lg-steam path{animation:lg-steam 3.2s ease-in-out infinite}
  .lg-steam path+path{animation-delay:-1.6s}
  .lg-pop{opacity:0;animation:lg-pop 9s ease-in-out infinite;animation-delay:calc(2.6s + var(--i)*1.5s)}}
@keyframes lg-type{to{opacity:1}}
@keyframes lg-caret{0%{opacity:1}50%{opacity:0}}
@keyframes lg-caret-out{to{opacity:0;width:0;margin:0}}
@keyframes lg-draw{to{transform:scaleX(1)}}
@keyframes lg-in{to{opacity:1}}
@keyframes lg-up{to{opacity:1;transform:none}}
@keyframes lg-run-l{0%{left:-22%;opacity:.9}60%,100%{left:100%;opacity:.9}}
@keyframes lg-run-r{0%{left:100%;opacity:.9}60%,100%{left:-22%;opacity:.9}}
@keyframes lg-breath{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
@keyframes lg-blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
@keyframes lg-steam{0%{opacity:0;transform:translateY(4px)}40%{opacity:.9}100%{opacity:0;transform:translateY(-8px)}}
@keyframes lg-pop{0%{opacity:0;transform:translateY(8px)}6%,70%{opacity:1;transform:none}78%,100%{opacity:0;transform:translateY(-4px)}}
.lg-pop{transform-box:fill-box}
/* the cookie strip becomes a small box at the bottom right on this page, as on Claude's sign-in */





/* phones: the brand panel becomes a band on top (the name, the lines and the line under it), the form under it */
@media(max-width:900px){
  .lg{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .lg-right{order:-1;padding:12px 12px 0}
  .lg-panel{padding:64px 0 26px;border-radius:22px}
  .lg-desk{display:none}
  .lg-word{font-size:clamp(38px,11vw,60px);padding:0 16px}
  .lg-tag{font-size:clamp(17px,4.6vw,22px)}
  .lg-logo{top:28px;left:28px}
  .lg-left{align-items:flex-start;padding:28px 18px 40px}
  .lg-card{padding:20px}
  }
@media(max-width:380px){.lg-otp{gap:6px}.lg-otp input{height:50px;font-size:20px}}
/* the brand and the desk sit together in the middle of the panel; the picture never runs off the bottom */
.lg-panel{justify-content:center;gap:clamp(18px,4vh,46px);padding:clamp(28px,5vh,56px) 0}
.lg-desk{margin-top:0;width:auto;display:flex;justify-content:center}
.lg-scene{width:min(560px,40vw);max-height:52vh;height:auto}
.lg-sub{max-width:36ch}
@media(max-width:900px){.lg-logo{display:none}.lg-panel{padding:30px 0 24px}}
/* the photo panel: the brand on top, the person below in a rounded frame, the follow-ups as small toasts over the photo */
.lg-panel{justify-content:flex-start;gap:clamp(16px,3vh,30px);padding:clamp(30px,6vh,60px) 0 0}
.lg-photo{position:relative;flex:1 1 auto;min-height:0;width:calc(100% - clamp(28px,4vw,56px));margin:0 auto clamp(14px,2vw,28px);overflow:hidden;border-radius:22px;box-shadow:0 30px 60px -40px #10193580}
.lg-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.lg-toast{position:absolute;z-index:1;display:inline-flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 14px 34px -14px #10193566;font:600 13px var(--ui);color:var(--ink);white-space:nowrap}
.lg-toast i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#e6f4ec;color:#2f8a5b}
.lg-toast i .ico{width:13px;height:13px}
.lg-toast-a{left:18px;bottom:46%}
.lg-toast-b{right:18px;bottom:28%}
.lg-toast-c{left:18px;bottom:12%}
@media(prefers-reduced-motion:no-preference){
  .lg-photo img{animation:lg-zoom 26s ease-in-out infinite alternate}
  .lg-toast{opacity:0;animation:lg-toast 10s ease-in-out infinite;animation-delay:calc(2.8s + var(--i)*1.6s)}}
@keyframes lg-zoom{from{transform:scale(1)}to{transform:scale(1.06)}}
@keyframes lg-toast{0%{opacity:0;transform:translateY(10px) scale(.98)}6%,72%{opacity:1;transform:none}80%,100%{opacity:0;transform:translateY(-6px)}}
@media(max-width:900px){.lg-photo{display:none}.lg-panel{padding:30px 0 24px}}
/* Sign-in: email first, a shared-work visual, and a quiet full-width legal footer. */
.lg .lg-form{max-width:400px;text-align:left}
.lg .lg-sub{margin:14px 0 0;max-width:33ch}
.lg .lg-card{padding:0;border:0;border-radius:0;box-shadow:none;margin-top:30px;gap:12px}
.lg-email-label{display:block;margin:0 0 9px;font:600 14px var(--font);color:var(--ink)}
.lg .lg-or{margin:12px 0;font-size:11px;letter-spacing:.08em}
.lg .lg-foot{text-align:center;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.lg .lg-right{padding:24px 24px 24px 0}
.lg .lg-panel{padding:0;gap:0;align-items:stretch;justify-content:flex-start;background:#101935;border-radius:24px;min-height:590px}
.lg-team-copy{padding:42px 42px 32px;color:#fff}
.lg-team-copy>p:first-child{margin:0 0 24px;color:#e2b95f;font-size:13px;letter-spacing:.04em;font-weight:600}
.lg-team-copy h2{margin:0;font:600 clamp(36px,3.4vw,52px)/1.08 var(--font);letter-spacing:-.04em;max-width:12ch}
.lg-team-copy h2 span{color:#a6c8ef}
.lg-team-copy>p:last-child{margin:20px 0 0;max-width:32ch;color:#c4cedf;font-size:16px;line-height:1.5}
.lg-team-photo{position:relative;flex:1;min-height:280px;overflow:hidden}
.lg-team-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;display:block}
.lg-bottom{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px 24px;margin:0 32px;padding:14px 0;border-top:1px solid var(--line);font:400 12px/1.5 var(--font);color:var(--slate)}
.lg-bottom p{margin:0}.lg-bottom nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.lg-bottom a,.lg-bottom button{display:inline-flex;align-items:center;min-height:36px;padding:0;border:0;background:none;color:var(--ink);font:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
@media(max-width:900px){
 .lg{grid-template-columns:1fr;grid-template-rows:auto auto auto}
 .lg .lg-logo{display:block;top:28px;left:28px}
 .lg .lg-left{padding:104px 24px 40px;align-items:center}
 .lg .lg-right{order:0;padding:0 24px 24px}
 .lg .lg-panel{min-height:0;display:grid;grid-template-columns:1fr 1fr}
 .lg-team-copy{padding:30px}.lg-team-copy h2{font-size:36px}.lg-team-copy>p:first-child{margin-bottom:18px}
 .lg-team-photo{min-height:270px}
 .lg-bottom{margin:0 24px;flex-direction:column;text-align:center;gap:8px;padding:16px 0}.lg-bottom nav{justify-content:center}
}
@media(max-width:520px){
 .lg .lg-form{max-width:360px}.lg h1{font-size:36px}.lg .lg-panel{display:flex}
 .lg-team-copy{padding:28px}.lg-team-copy h2{max-width:15ch;font-size:34px}
 .lg-team-photo{min-height:220px}.lg-bottom a,.lg-bottom button{min-height:44px}
}

.lg-photo img{object-position:50% 16%}
.lg-sub{text-wrap:balance}

/* ============ v3 opening screen (owner, 7 Oct): the line types in on the left, people at work on the right ============ */
.hh{min-height:100svh;display:flex;align-items:center;padding:calc(16px + 60px + 34px + env(safe-area-inset-top,0px)) 0 clamp(24px,4vh,48px);background:var(--bg)}
.hh>.container{width:100%}
.hh-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,4vw,64px);align-items:center}
.hh-copy{min-width:0}
.hh h1{margin:clamp(14px,2.4vh,24px) 0 0;font:500 clamp(44px,min(5.4vw,9.4vh),92px)/1.02 var(--font);letter-spacing:-.06em;color:var(--ink)}
.hh-l1,.hh-l2{display:block;white-space:nowrap}
.hh-l2{width:fit-content;color:var(--blue)}
.hh-sub{margin:clamp(14px,2.6vh,26px) 0 0;max-width:30em;font:400 clamp(15px,min(1.2vw,2.2vh),19px)/1.6 var(--font);color:var(--slate)}
.hh-sub b{font-weight:600;color:var(--ink)}
.hh-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:clamp(18px,3.2vh,32px)}
.hh-caret{display:inline-block;width:.06em;min-width:3px;height:.8em;margin-left:.06em;border-radius:2px;background:var(--violet);vertical-align:-.05em;opacity:0}
@media(prefers-reduced-motion:no-preference){
  .hh-ch{opacity:0;animation:lg-type .03s linear forwards;animation-delay:calc(.35s + var(--i)*.075s)}
  .hh-caret{animation:lg-caret .8s steps(1) .3s 3,lg-caret-out .3s 2.6s forwards}
  .hh-l2.delivered:after{opacity:0;animation:lg-in .6s ease 2.3s forwards}
  .hh-sub,.hh-actions{opacity:0;transform:translateY(8px);animation:lg-up .7s ease forwards}
  .hh-sub{animation-delay:2.3s}.hh-actions{animation-delay:2.55s}
}
@media(max-width:900px){
  .hh{min-height:0;padding-top:calc(12px + 54px + 28px)}
  .hh-grid{grid-template-columns:1fr;gap:24px}
  .hh h1{font-size:clamp(40px,11.5vw,64px)}
  .hh-l1,.hh-l2{white-space:normal}
}


/* ============ Cookie choices (owner, 7 Oct 2026): Ironclad's way — a small white card bottom left, three plain buttons ============ */
.ck2{position:fixed;left:16px;bottom:16px;z-index:300;width:min(560px,calc(100vw - 32px));padding:20px 22px 18px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 18px 44px -20px #10193566;font:400 13.5px/1.55 var(--ui);color:var(--slate)}
.ck2 p{margin:0;padding-right:24px}
.ck2 a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ck2-x{position:absolute;right:10px;top:8px;width:30px;height:30px;padding:0;border:0;background:none;font-size:20px;line-height:1;color:var(--muted);cursor:pointer}
.ck2-x:hover{color:var(--ink)}
.ck2-acts{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.ck2-pair{display:flex;gap:8px}
.ck2 .ck2-acts button{min-height:38px;padding:0 16px;border-radius:8px;font:600 13px/1 var(--ui);cursor:pointer}
.ck2 .ck2-set{border:1px solid var(--thread);background:#fff;color:var(--ink)}
.ck2 .ck2-set:hover{border-color:var(--ink)}
.ck2 .ck2-no,.ck2 .ck2-yes{border:1px solid var(--ink);background:var(--action-dark);color:#fff}
.ck2 .ck2-no:hover,.ck2 .ck2-yes:hover{background:var(--action-dark)}
@media(prefers-reduced-motion:no-preference){.ck2{animation:ck-up .35s cubic-bezier(.2,.7,.2,1)}}
@keyframes ck-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:560px){.ck2{left:10px;right:10px;bottom:10px;width:auto;padding:16px 16px 14px}.ck2-acts{flex-wrap:wrap}.ck2 .ck2-set{width:100%}.ck2-pair{width:100%}.ck2-pair button{flex:1}}
/* edge to edge (owner, 7 Oct): one white bar fixed along the foot of the screen, text left, buttons right */
html{--ck-h:0px}
body{padding-bottom:var(--ck-h)}
.ck2,.on-signin .ck2{left:0;right:0;bottom:0;width:auto;display:flex;align-items:center;gap:16px 28px;padding:14px clamp(20px,4vw,56px) calc(14px + env(safe-area-inset-bottom,0px));border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:0 -10px 30px -22px #10193566}
.ck2 p{flex:1;padding-right:0}
.ck2-acts{flex:none;margin-top:0;justify-content:flex-end}
.ck2-x{position:static;order:3;flex:none}
@media(prefers-reduced-motion:no-preference){.ck2{animation:ck-rise .35s cubic-bezier(.2,.7,.2,1)}}
@keyframes ck-rise{from{transform:translateY(100%)}to{transform:none}}
@media(max-width:760px){.ck2,.on-signin .ck2{display:grid;grid-template-columns:1fr auto;gap:12px;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px))}.ck2 p{grid-column:1;grid-row:1}.ck2-x{grid-column:2;grid-row:1;align-self:start}.ck2-acts{grid-column:1/-1;flex-wrap:wrap}.ck2 .ck2-set{width:100%}.ck2-pair{width:100%}.ck2-pair button{flex:1}}
/* Cookie Settings: a plain white panel */
.ck-open{overflow:hidden}
.ckc{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:16px}
.ckc-back{position:absolute;inset:0;background:#10193566}
.ckc-box{position:relative;display:flex;flex-direction:column;width:min(520px,100%);max-height:min(680px,calc(100svh - 32px));overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 40px 80px -30px #10193599;color:var(--ink);font:400 14px/1.6 var(--ui)}
.ckc-top{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 6px}
.ckc-top h2{margin:0;font:600 19px var(--font);letter-spacing:-.02em}
.ckc-x{width:34px;height:34px;border:0;border-radius:50%;background:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
.ckc-x:hover{background:var(--bg);color:var(--ink)}
.ckc-body{overflow-y:auto;padding:4px 22px 6px}
.ckc-body h3{margin:18px 0 10px;font:600 15px var(--font)}
.ckc-body p{margin:0 0 8px;color:var(--slate)}
.ckc-body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ckc-all{min-height:38px;margin-top:4px;padding:0 18px;border:1px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink);font:600 13px var(--ui);cursor:pointer}
.ckc-all:hover{background:var(--bg)}
.ckc-row{border-bottom:1px solid var(--line)}
.ckc-row:first-of-type{border-top:1px solid var(--line)}
.ckc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px}
.ckc-open{display:flex;align-items:center;gap:10px;flex:1;min-height:52px;padding:0;border:0;background:none;text-align:left;font:600 14px var(--ui);color:var(--ink);cursor:pointer}
.ckc-plus{position:relative;width:12px;height:12px;flex:none}
.ckc-plus:before,.ckc-plus:after{content:'';position:absolute;left:0;right:0;top:5px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s}
.ckc-plus:after{transform:rotate(90deg)}
.ckc-open[aria-expanded=true] .ckc-plus:after{transform:rotate(0)}
.ckc-always{font:600 12.5px var(--ui);color:var(--slate);white-space:nowrap}
.ckc-about{padding:0 0 14px 22px;color:var(--slate);font-size:13.5px}
.ckc-switch{position:relative;display:inline-flex;flex:none;cursor:pointer}
.ckc-switch input{position:absolute;opacity:0;width:42px;height:24px;margin:0;cursor:pointer}
.ckc-switch span{width:42px;height:24px;border-radius:99px;background:#c9cfdc;transition:background .2s}
.ckc-switch span:after{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #10193540;transition:transform .2s}
.ckc-switch input:checked+span{background:var(--ink)}
.ckc-switch input:checked+span:after{transform:translateX(18px)}
.ckc-switch input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.ckc-none{margin-top:12px!important;font-size:13px}
.ckc-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px 18px}
.ckc-btn{min-height:38px;padding:0 16px;border:1px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink);font:600 13px var(--ui);cursor:pointer}
.ckc-main{background:var(--action-dark);color:#fff}
.ckc-main:hover{background:var(--action-dark)}
@media(max-width:560px){.ckc{padding:0;align-items:end}.ckc-box{width:100%;max-height:90svh;border-radius:16px 16px 0 0}.ckc-foot{display:grid;grid-template-columns:1fr 1fr}}
/* the footer's way back to the choice */
.foot-left button{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* the opening, centred (owner, 7 Oct: video removed — Ironclad's simplicity) */
.hh-solo{min-height:0;padding:calc(16px + 60px + clamp(70px,14vh,150px) + env(safe-area-inset-top,0px)) 0 clamp(36px,7vh,80px)}
.hh-solo .hh-copy{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:980px;margin:0 auto}
.hh-solo .eyebrow{justify-content:center}
.hh-solo h1{font-size:clamp(46px,min(6.6vw,11vh),112px)}
.hh-solo .hh-l1{white-space:nowrap}
.hh-solo .hh-l2{margin:0 auto}
.hh-solo .hh-sub{max-width:34em;margin-inline:auto;text-align:center}
.hh-solo .hh-actions{justify-content:center}
@media(max-width:900px){.hh-solo{padding-top:calc(12px + 54px + 56px)}.hh-solo h1{font-size:clamp(40px,11.5vw,64px)}.hh-solo .hh-l1{white-space:normal}}
/* the bar's top corners round off like the footer's (28 px, 22 px on phones); it rises and leaves slowly (owner, 7 Oct) */
.ck2,.on-signin .ck2{border:1px solid var(--line);border-bottom:0;border-radius:28px 28px 0 0}
@media(max-width:680px){.ck2,.on-signin .ck2{border-radius:22px 22px 0 0}}
@media(prefers-reduced-motion:no-preference){.ck2{animation:ck-rise .6s cubic-bezier(.22,.8,.24,1)}.ck2.ck2-out{animation:ck-sink .6s cubic-bezier(.5,0,.75,0) forwards}}
@keyframes ck-sink{from{transform:none;opacity:1}to{transform:translateY(100%);opacity:0}}

/* ============ Phone header (owner, 7 Oct): the wordmark left; on the right a round menu "droplet" and Book a Demo at the very
   edge, each on its own (no shared white pill); the menu grows out of the droplet like a drop spreading ============ */
@media(max-width:900px){
  .hdr{justify-content:flex-end}
  .hdr .pill,.hdr.scrolled .pill,.hdr.menu-on .pill{height:auto;padding:0;gap:0;background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .pill-slot{display:none}
  .act{gap:10px;border:0;padding:0}
  .burger{order:-1;position:relative;z-index:61;width:48px;height:48px;border-radius:50%;background:#fffffff2;box-shadow:0 0 0 1px #10193514,0 12px 26px -14px #10193580;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
  .burger:active{transform:scale(.92)}
  .act .hdr-cta{height:48px;padding:0 20px}
  /* once the page scrolls, a soft frosted band sits behind the three pieces so they stay readable */
  .hdr:before{content:'';position:absolute;left:0;right:0;top:calc(-16px - env(safe-area-inset-top,0px));height:calc(100% + 32px + env(safe-area-inset-top,0px));background:linear-gradient(#f7f7f5f2 70%,#f7f7f500);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .3s;pointer-events:none;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
  .hdr.scrolled:before{opacity:1}
  .hdr.menu-on:before{opacity:0}
  /* the sheet spreads out of the droplet */
  .msheet{opacity:1;visibility:hidden;transform:none;background:#fff;clip-path:circle(0px at var(--dx,calc(100% - 150px)) var(--dy,44px));transition:clip-path .55s cubic-bezier(.65,0,.25,1),visibility 0s linear .55s}
  .menu-open .msheet{visibility:visible;clip-path:circle(160vmax at var(--dx,calc(100% - 150px)) var(--dy,44px));transition:clip-path .65s cubic-bezier(.65,0,.25,1),visibility 0s}
  .msheet .macc-link{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
  .menu-open .msheet .macc-link{opacity:1;transform:none;transition:opacity .4s ease .25s,transform .4s ease .25s}
  .menu-open .msheet .macc-link:nth-child(2){transition-delay:.31s}
  .menu-open .msheet .macc-link:nth-child(3){transition-delay:.37s}
  .menu-open .msheet .macc-link:nth-child(4){transition-delay:.43s}
  .menu-open .burger{box-shadow:0 0 0 1px #10193514}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){.msheet,.menu-open .msheet{transition:none}.msheet .macc-link{opacity:1;transform:none}}
@media(max-width:640px){.burger,.act .hdr-cta{height:46px}.burger{width:46px}.act .hdr-cta{padding:0 18px;font-size:14px}}

/* social icons as they are, no round chips (owner, 7 Oct) */
.foot-soc{gap:18px;align-items:center}
.foot-soc a,.f2 .foot-soc a{width:auto;height:auto;padding:4px;border-radius:0;background:none;color:#c9cfe0;transition:color .2s,opacity .2s}
.foot-soc a:hover,.f2 .foot-soc a:hover{background:none;color:#fff}
.foot-soc svg{width:18px;height:18px}
/* the small print: full on a laptop, one line on a phone */
.foot-short{display:none}
@media(max-width:680px){
  .foot-long{display:none}
  .foot-short{display:inline}
  .foot-left{flex-wrap:nowrap;white-space:nowrap;gap:8px;font-size:12px}
  .foot-soc{gap:20px}}

/* phones: the wordmark lines up with the droplet and the button (same 46-48 px row) */
@media(max-width:900px){.hdr-logo{height:48px}}
@media(max-width:640px){.hdr-logo{height:46px}}
/* phones (owner, 7 Oct): Book a Demo keeps only its gold border line — no glow layer over it; the menu droplet moves to the
   left edge, the wordmark beside it, Book a Demo alone at the right edge */
@media(max-width:900px){
  .hdr-cta.ring::before{display:none}
  .burger{position:fixed;left:var(--gutter);top:calc(10px + env(safe-area-inset-top,0px));margin:0}
  .hdr-logo{left:calc(var(--gutter) + 48px + 8px - 14px)}}
@media(max-width:640px){
  .burger{top:calc(10px + env(safe-area-inset-top,0px))}
  .hdr-logo{left:calc(var(--gutter) + 46px + 6px - 14px)}}
/* phones (owner, 7 Oct, after Ironclad's phone view): NUVENA left, the menu droplet right, no Book a Demo in the header —
   it stands centred in the page instead, under the journey's rail, in view the whole way through */
#nvj .nvj-cta{display:none}
@media(max-width:900px){
  .act .hdr-cta{display:none}
  .burger{left:auto;right:var(--gutter)}
  .hdr-logo{left:calc(var(--gutter) - 14px)}
  #nvj .nvj-pin{grid-template-rows:108px minmax(0,1fr) 46px 72px}
  #nvj .nvj-cta{display:flex;justify-content:center;align-items:center}
  #nvj .nvj-demo{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 28px;border:2px solid #d4a03c;border-radius:99px;background:var(--ink);color:#fff;font:600 16px var(--font);cursor:pointer}
  #nvj .nvj-demo svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  #nvj .nvj-demo:active{transform:scale(.97)}}
@media(max-width:640px){.hdr-logo{left:calc(var(--gutter) - 14px)}}
@media(min-width:701px) and (max-width:900px){#nvj .nvj-pin{grid-template-rows:138px minmax(0,1fr) 50px 76px}}
/* the phone cookie bar: one thin row (owner, 7 Oct: "under 10% of the screen") — "We use cookies." with the Policy and
   Settings links, then a cross (reject) and a tick (accept); the laptop bar is unchanged */
.ck2-short,.ck2-sep,.ck2-link,.ck2-icons{display:none}
@media(max-width:760px){
  .ck2,.on-signin .ck2{display:flex;align-items:center;gap:12px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px)) 18px;border-radius:18px 18px 0 0}
  .ck2-long,.ck2-acts,.ck2-x{display:none}
  .ck2-short{display:block;color:var(--ink);font-weight:600}
  .ck2 p{flex:1;min-width:0;font-size:12.5px;line-height:1.45}
  .ck2-sep{display:inline;color:var(--muted)}
  .ck2-link{display:inline;padding:0;border:0;background:none;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  .ck2-icons{display:flex;gap:8px;flex:none}
  .ck2-ico{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--thread);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer}
  .ck2-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .ck2-ico.ck2-ok{background:var(--ink);border-color:var(--ink);color:#fff}
  .ck2-ico:active{transform:scale(.94)}}

/* while the cookie bar shows, the journey stage ends above it, so the rail and Book a Demo stay in view */
#nvj .nvj-pin{height:calc(100svh - var(--nv-header-clearance) - var(--ck-h,0px))}
/* phones (owner, 7 Oct, Ironclad's phone hero): Book a Demo sits right under the headline, the picture below it, the rail last */
@media(max-width:900px){
  #nvj .nvj-pin{grid-template-rows:108px 74px minmax(0,1fr) 46px}
  #nvj .nvj-titlebox{grid-row:1}
  #nvj .nvj-cta{grid-row:2;align-items:flex-start;padding-top:6px}
  #nvj .nvj-figure{grid-row:3}
  #nvj .nvj-controls{grid-row:4}}
@media(min-width:701px) and (max-width:900px){#nvj .nvj-pin{grid-template-rows:138px 80px minmax(0,1fr) 50px}}

/* ============ Phones (owner, 7 Oct: the moving picture "phat raha hai" on a phone): the same story as six stacked steps —
   a step label, the two-line title, one clean card each, nothing overlapping. Laptops and tablets keep the scroll film. ============ */
#nvj .nvj-phone{display:none}
@media(max-width:700px){
  .nvp-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 0 56px}
  .nvp-step+.nvp-step{position:relative;padding-top:44px}
  .nvp-step+.nvp-step:before{content:'';position:absolute;top:0;left:50%;width:1px;height:30px;background:linear-gradient(transparent,#c9cfdc)}
  .nvp-k{display:inline-flex;align-items:center;gap:8px;margin:0;font:600 11px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .nvp-k b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:10.5px;letter-spacing:0}
  .nvp-t{margin:12px 0 0;font:600 clamp(32px,9.4vw,42px)/1.04 var(--font);letter-spacing:-.05em;color:var(--ink)}
  .nvp-t span{display:block}
  .nvp-t .blue{color:var(--blue)}.nvp-t .violet{color:var(--violet)}
  .nvp-cta{margin:20px 0 4px}
  .nvp-card{width:100%;max-width:400px;margin-top:22px;padding:18px;border:1px solid #e2e4ed;border-radius:18px;background:#fff;box-shadow:0 18px 40px -30px #10193566;text-align:left;font:400 14px/1.45 var(--ui);color:var(--ink)}
  .nvp-card+.nvp-card{margin-top:12px}
  .nvp-soft{margin:2px 0 0;color:#737d96;font-size:12.5px}
  .nvp-i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .nvp-i.v{color:var(--violet);fill:currentColor;stroke:none}
  .nvp-doc-top{display:flex;align-items:center;gap:10px;font-size:11px;color:#737d96}
  .nvp-doc-top small{display:block;font-weight:700;letter-spacing:.12em;color:#737d96;font-size:9.5px}
  .nvp-n{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--ink);color:#fff;font:700 17px NuvenaRound,var(--font)}
  .nvp-doc-title{margin:14px 0 0;font:600 20px var(--font);letter-spacing:-.03em}
  .nvp-clause{display:flex;align-items:center;gap:9px;margin:8px 0 0;padding:9px 11px;border-radius:9px;font-size:13px;font-weight:500}
  .nvp-clause:first-of-type{margin-top:14px}
  .nvp-clause i{width:6px;height:6px;border-radius:50%;flex:none}
  .nvp-clause em{margin-left:auto;font-style:normal;font-size:11px;color:#8791a8}
  .nvp-clause.blue{background:#2364a812}.nvp-clause.blue i{background:var(--blue)}
  .nvp-clause.violet{background:#6a4fb812}.nvp-clause.violet i{background:var(--violet)}
  .nvp-clause.rose{background:#c8326a0f}.nvp-clause.rose i{background:var(--rose)}
  .nvp-signed{display:inline-flex;align-items:center;gap:6px;margin:12px 0 0;padding:4px 11px;border-radius:99px;background:#edf2fa;color:var(--blue);font-size:12px;font-weight:600}
  .nvp-signed .nvp-i{width:13px;height:13px}
  .nvp-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
  .nvp-chips span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid #e2e4ed;border-radius:99px;background:#fff;font:500 12.5px var(--ui);color:var(--slate)}
  .nvp-chips .nvp-i{width:14px;height:14px;color:var(--blue)}
  .nvp-ai{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:8px 12px;border-radius:12px;background:#f3f0fb;font-size:13px;color:var(--ink)}
  .nvp-ai b{color:var(--violet);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
  .nvp-row{display:flex;align-items:center;gap:11px;margin:0;padding:12px 2px;border-bottom:1px solid #eef0f5;font-size:14px;font-weight:600}
  .nvp-row:last-child{border-bottom:0;padding-bottom:2px}
  .nvp-row>i{width:3px;height:30px;border-radius:2px;flex:none}
  .nvp-row>i.blue{background:var(--blue)}.nvp-row>i.violet{background:var(--violet)}.nvp-row>i.rose{background:var(--rose)}
  .nvp-row span{flex:1;min-width:0}
  .nvp-row small{display:flex;align-items:center;gap:7px;margin-top:5px;font-weight:500;font-size:12.5px;color:var(--slate)}
  .nvp-av{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:8.5px;font-weight:700}
  .nvp-av.blue{background:#2364a817;color:var(--blue)}.nvp-av.violet{background:#6a4fb817;color:var(--violet)}.nvp-av.rose{background:#c8326a17;color:var(--rose)}
  .nvp-row em{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-weight:500;font-size:12px;color:#737d96;white-space:nowrap}
  .nvp-row em .nvp-i{width:13px;height:13px}
  .nvp-note{display:flex;align-items:flex-start;gap:12px}
  .nvp-note b{font-size:14.5px}
  .nvp-ico{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;background:#edf2fa;color:var(--blue)}
  .nvp-ico.v{background:#f2eff8;color:var(--violet)}
  .nvp-by{display:flex;align-items:center;gap:6px;margin:6px 0 0;color:var(--violet);font-size:12px;font-weight:600}
  .nvp-by .nvp-i{width:12px;height:12px}
  .nvp-verified{display:flex;align-items:center;gap:8px;margin:14px 0 0;padding-top:12px;border-top:1px solid #eef0f5;color:var(--blue);font-weight:600;font-size:14px}
  .nvp-verified .nvp-i{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--blue);color:#fff;stroke-width:2.4}
  .nvp-ins{display:flex;align-items:center;gap:16px}
  .nvp-ring{position:relative;width:84px;height:84px;flex:none}
  .nvp-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
  .nvp-ring circle{fill:none;stroke:#e9ecf3;stroke-width:8}
  .nvp-ring circle.on{stroke:var(--blue);stroke-linecap:round;stroke-dasharray:84 252}
  .nvp-ring b{position:absolute;inset:0;display:grid;place-items:center;font:600 22px var(--font)}
  .nvp-ring b small{font-size:12px;color:#737d96}
  .nvp-ins>div>b{color:var(--blue)}
  /* each step rises in once */
  .nvp-step[data-nvp]>*{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  .nvp-step.in>*{opacity:1;transform:none}
  .nvp-step.in>*:nth-child(2){transition-delay:.06s}.nvp-step.in>*:nth-child(3){transition-delay:.14s}.nvp-step.in>*:nth-child(4){transition-delay:.22s}.nvp-step.in>*:nth-child(5){transition-delay:.3s}}
@media(max-width:700px) and (prefers-reduced-motion:reduce){.nvp-step[data-nvp]>*{opacity:1;transform:none;transition:none}}

/* ============ Phone header (owner, 7 Oct): one white bar with a thin grey line and rounded bottom corners — the footer's curve,
   mirrored — holding NUVENA on the left and a plain two-line menu at the right edge ============ */
@media(max-width:900px){
  .hdr,.hdr.scrolled{top:var(--bar);height:calc(60px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);align-items:center;background:#fff;border-bottom:1px solid var(--line);border-radius:0 0 22px 22px;box-shadow:0 10px 26px -22px #10193566;pointer-events:auto}
  .hdr::before,.hdr:before{display:none}
  .hdr-logo{top:env(safe-area-inset-top,0px);height:60px!important}
  .burger{top:calc(var(--bar) + 7px + env(safe-area-inset-top,0px));right:calc(var(--gutter) - 10px);width:46px!important;height:46px!important;border-radius:10px;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;gap:6px}
  .burger span{width:22px;height:2px}
  .menu-open .burger{box-shadow:none}
  .msheet{padding-top:calc(var(--bar) + 60px + 28px + env(safe-area-inset-top,0px))}}

@media(max-width:900px){.menu-open .burger span:first-child{transform:translateY(4px) rotate(45deg)}.menu-open .burger span:last-child{transform:translateY(-4px) rotate(-45deg)}}
@media(max-width:700px){.nvp-t span{background:none}.nvp-t .nvp-tb{color:var(--blue)}.nvp-t .nvp-tv{color:var(--violet)}.nvp-ring b{display:flex;align-items:baseline;justify-content:center;padding-top:28px;gap:1px}}

/* ============ Phones, revised (owner, 7 Oct: "don't make the phone a different website"): the same scroll film as the laptop,
   but its picture is one clean card per stage, with small moving icons — nothing overlapping. ============ */
#nvj .nvj-mcards{display:none}
.nvp-d0{--i:0}.nvp-d1{--i:1}.nvp-d2{--i:2}
@media(max-width:700px){
  #nvj .nvj-story{height:520svh;min-height:2300px}
  #nvj .nvj-art{display:none}
  #nvj .nvj-mcards{display:block;position:absolute;inset:0}
  #nvj .nvj-mc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:0 4px;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.7,.2,1);pointer-events:none}
  #nvj .nvj-mc .nvp-card{margin:0;width:100%;max-width:380px}
  #nvj .nvj-mc .nvp-chips{margin-top:2px}
  #nvj[data-stage="0"] .nvj-mc[data-k="0"],#nvj[data-stage="1"] .nvj-mc[data-k="1"],#nvj[data-stage="2"] .nvj-mc[data-k="2"],
  #nvj[data-stage="3"] .nvj-mc[data-k="3"],#nvj[data-stage="4"] .nvj-mc[data-k="4"],#nvj[data-stage="5"] .nvj-mc[data-k="5"]{opacity:1;transform:none}
  #nvj:not([data-stage]) .nvj-mc[data-k="0"]{opacity:1;transform:none}
  /* short phones: the cards come down a size */
  @media(max-height:760px){#nvj .nvj-mc .nvp-card{padding:14px;font-size:13px}#nvj .nvj-mc .nvp-doc-title{font-size:17px;margin-top:10px}#nvj .nvj-mc .nvp-clause{padding:7px 10px;margin-top:6px;font-size:12px}#nvj .nvj-mc .nvp-row{padding:9px 2px}}}
/* the small moving icons, played each time their stage comes in */
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
  #nvj[data-stage="0"] [data-k="0"] .nvp-clause{animation:mc-lit 2.4s ease calc(.3s + var(--i)*.45s) both}
  #nvj[data-stage="0"] [data-k="0"] .nvp-signed{animation:mc-pop .5s cubic-bezier(.3,1.6,.5,1) 1.8s both}
  #nvj[data-stage="0"] [data-k="0"] .nvp-chips span{animation:mc-up .5s ease calc(.2s + var(--i)*.15s) both}
  #nvj[data-stage="1"] [data-k="1"] .nvp-spin{animation:mc-spin 2.4s ease-in-out infinite}
  #nvj[data-stage="1"] [data-k="1"] .nvp-row{animation:mc-up .5s ease calc(.35s + var(--i)*.3s) both}
  #nvj[data-stage="2"] [data-k="2"] .nvp-av{animation:mc-pop .45s cubic-bezier(.3,1.6,.5,1) calc(.3s + var(--i)*.3s) both}
  #nvj[data-stage="3"] [data-k="3"] .nvp-ring-bell{animation:mc-bell 1.4s ease .2s 2}
  #nvj[data-stage="3"] [data-k="3"] .nvp-n2{animation:mc-up .55s ease 1.1s both}
  #nvj[data-stage="4"] [data-k="4"] .nvp-verified .nvp-i{animation:mc-pop .5s cubic-bezier(.3,1.6,.5,1) .5s both,mc-halo 1.6s ease 1s 2}
  #nvj[data-stage="5"] [data-k="5"] .nvp-ring circle.on{animation:mc-fill 1.2s cubic-bezier(.3,.7,.2,1) .2s both}}
@keyframes mc-lit{0%{box-shadow:inset 0 0 0 0 transparent}30%{box-shadow:inset 3px 0 0 0 currentColor}100%{box-shadow:inset 3px 0 0 0 currentColor}}
@keyframes mc-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes mc-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes mc-spin{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(90deg) scale(1.2)}}
@keyframes mc-bell{0%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-4deg)}}
@keyframes mc-halo{0%{box-shadow:0 0 0 0 #2364a855}100%{box-shadow:0 0 0 12px #2364a800}}
@keyframes mc-fill{from{stroke-dasharray:0 252}to{stroke-dasharray:84 252}}

/* ============ Phone menu (owner, 7 Oct): not a full screen — a panel that drops out of the header with just the options and
   Book a Demo, ends with the same rounded curve, and slides open and shut smoothly; the page dims a little behind it ============ */
@media(max-width:900px){
  .msheet{inset:0 0 auto 0;height:auto;max-height:100svh;overflow-y:auto;padding:calc(var(--bar,0px) + 60px + 6px + env(safe-area-inset-top,0px)) 18px 20px;background:#fff;border-bottom:1px solid var(--line);border-radius:0 0 22px 22px;box-shadow:0 30px 50px -30px #10193580;
    clip-path:inset(0 0 100% 0 round 0 0 22px 22px);visibility:hidden;transition:clip-path .45s cubic-bezier(.65,0,.25,1),visibility 0s linear .45s}
  .menu-open .msheet{visibility:visible;clip-path:inset(0 0 0 0 round 0 0 22px 22px);transition:clip-path .55s cubic-bezier(.65,0,.25,1),visibility 0s}
  .msheet .macc-link{padding:14px 4px;font-size:19px}
  .msheet .m-cta-wrap{margin-top:16px}
  .msheet .m-cta{height:50px}
  body::after{content:'';position:fixed;inset:0;z-index:58;background:#10193540;opacity:0;pointer-events:none;transition:opacity .45s ease}
  .menu-open body::after{opacity:1}}
@media(max-width:900px) and (prefers-reduced-motion:reduce){.msheet,.menu-open .msheet{transition:none}body::after{transition:none}}

/* ============ The film's frame, final (owner, 7 Oct): a thin capital badge on top, the title, the picture; on phones and
   tablets Book a Demo sits low in the thumb's reach (about an inch above the bottom on any phone) with "Learn more" under it ============ */
#nvj .nvj-badge{grid-row:1;justify-self:center;align-self:center;margin:0;padding:5px 13px;border:1px solid #d9dde7;border-radius:99px;background:#fff;font:600 10.5px/1.2 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:#4d5672;white-space:nowrap;z-index:2}
#nvj .nvj-titlebox{grid-row:2}
#nvj .nvj-figure{grid-row:3}
#nvj .nvj-controls{grid-row:4}
#nvj .nvj-learn,#nvj .nvj-cta{display:none}
#nvj .nvj-pin{grid-template-rows:30px 138px minmax(0,1fr) 56px}
@media(min-width:1600px){#nvj .nvj-pin{grid-template-rows:32px 160px minmax(0,1fr) 65px}}
@media(max-height:650px) and (min-width:901px){#nvj .nvj-pin{grid-template-rows:24px 90px minmax(0,1fr) 38px}}
@media(max-width:900px){
  #nvj .nvj-pin{grid-template-rows:30px 138px minmax(0,1fr) 60px 36px 40px;padding-bottom:calc(4svh + env(safe-area-inset-bottom,0px))}
  #nvj .nvj-titlebox{grid-row:2}
  #nvj .nvj-figure{grid-row:3}
  #nvj .nvj-cta{grid-row:4;display:flex;align-items:center;justify-content:center;padding-top:0}
  #nvj .nvj-learn{grid-row:5;display:flex;align-items:center;justify-content:center}
  #nvj .nvj-learn a{font:500 13.5px var(--ui);color:var(--slate);text-decoration:underline;text-underline-offset:4px;text-decoration-color:#c9cfdc;padding:6px 10px}
  #nvj .nvj-controls{grid-row:6}
  #nvj .nvj-mc{justify-content:flex-start;padding-top:8px}}
@media(max-width:700px){
  #nvj .nvj-pin{grid-template-rows:28px 104px minmax(0,1fr) 58px 34px 38px}
  #nvj .nvj-badge{font-size:9.5px;letter-spacing:.13em;padding:5px 11px}}
@media(max-width:700px) and (max-height:700px){#nvj .nvj-pin{grid-template-rows:26px 90px minmax(0,1fr) 54px 30px 34px}#nvj .nvj-title{font-size:34px}}

/* short phones (iPhone SE size): the first card drops its three chips so the picture never touches Book a Demo */
@media(max-width:700px) and (max-height:700px){#nvj .nvj-mc .nvp-chips{display:none}#nvj .nvj-mc .nvp-card{padding:12px 14px}#nvj .nvj-mc .nvp-doc-title{font-size:16px;margin-top:8px}#nvj .nvj-mc .nvp-clause{padding:6px 10px;margin-top:5px}}
/* the label above the title: no badge — plain bold blue capitals, same size (owner, 7 Oct) */
#nvj .nvj-badge{padding:0;border:0;border-radius:0;background:none;font-weight:700;color:var(--blue)}
/* the step names under the film are gone (owner, 7 Oct); Book a Demo and Learn more get room between them, both carry an arrow,
   and the arrows nudge forward on their own now and then — and on hover — so they read as "tap me" */
#nvj .nvj-controls{display:none!important}
#nvj .nvj-pin{grid-template-rows:30px 138px minmax(0,1fr)}
@media(min-width:1600px){#nvj .nvj-pin{grid-template-rows:32px 160px minmax(0,1fr)}}
@media(max-height:650px) and (min-width:901px){#nvj .nvj-pin{grid-template-rows:24px 90px minmax(0,1fr)}}
@media(max-width:900px){#nvj .nvj-pin{grid-template-rows:30px 138px minmax(0,1fr) 60px 52px}
  #nvj .nvj-learn{align-items:flex-end;padding-bottom:2px}
  #nvj .nvj-learn a{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);text-decoration:none;padding:8px 12px}
  #nvj .nvj-learn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}}
@media(max-width:700px){#nvj .nvj-pin{grid-template-rows:28px 104px minmax(0,1fr) 58px 50px}}
@media(max-width:700px) and (max-height:700px){#nvj .nvj-pin{grid-template-rows:26px 90px minmax(0,1fr) 54px 46px}}
@media(prefers-reduced-motion:no-preference){
  #nvj .nvj-learn svg{animation:nv-nudge 2.8s ease-in-out infinite}
  #nvj .nvj-learn svg{animation-delay:1.4s}
  #nvj .nvj-learn a:hover svg,.button:hover .ico,.f2-btn:hover i .ico{animation:nv-nudge-fast .7s ease-in-out infinite}}
/* Book a Demo's arrow stays still (owner, 10 Oct). */
@keyframes nv-nudge{0%,62%,100%{transform:translateX(0)}70%{transform:translateX(5px)}78%{transform:translateX(0)}86%{transform:translateX(3px)}}
@keyframes nv-nudge-fast{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

@media(max-width:900px){#nvj .nvj-pin{padding-bottom:calc(6svh + env(safe-area-inset-bottom,0px))}#nvj .nvj-learn{align-items:flex-start;padding-top:16px}}
/* the progress line sits just under Learn more on phones, not at the very foot of the screen (owner, 7 Oct) */
@media(max-width:900px){#nvj .nvj-progress{bottom:max(18px,calc(6svh + env(safe-area-inset-bottom,0px) - 12px));left:24px;right:24px;border-radius:2px;overflow:hidden}}
/* the section after the journey: an empty "Coming soon" screen for now (owner, 7 Oct) */
.soon{min-height:70svh;padding:80px var(--gutter)}
/* phones (owner, 7 Oct): more air under the title, a bigger card centred in the space with equal room above and below
   (no big gap over Book a Demo), and the request → review → approval line as plain text inside the card, not pills */
@media(max-width:700px){
  #nvj .nvj-pin{grid-template-rows:28px 122px minmax(0,1fr) 58px 50px}
  #nvj .nvj-mc{justify-content:center;padding:0}
  #nvj .nvj-mc .nvp-card{max-width:420px;padding:22px 20px;font-size:15px}
  #nvj .nvj-mc .nvp-doc-title{font-size:22px;margin-top:16px}
  #nvj .nvj-mc .nvp-clause{padding:12px 13px;margin-top:9px;font-size:14.5px}
  #nvj .nvj-mc .nvp-clause:first-of-type{margin-top:16px}
  #nvj .nvj-mc .nvp-row{padding:15px 2px;font-size:15px}
  #nvj .nvj-mc .nvp-note b{font-size:15.5px}
  .nvp-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid #eef0f5}
  .nvp-flow{display:flex;align-items:center;gap:6px;margin:0;font:500 12.5px var(--ui);color:#737d96}
  .nvp-flow b{display:inline-flex;align-items:center;gap:4px;font-weight:500}
  .nvp-flow .nvp-i{width:13px;height:13px;color:var(--blue)}
  .nvp-flow i{font-style:normal;color:#b3b9c9}
  .nvp-foot .nvp-signed{margin:0}}
@media(max-width:700px) and (max-height:760px){
  #nvj .nvj-pin{grid-template-rows:26px 100px minmax(0,1fr) 54px 46px}
  #nvj .nvj-mc .nvp-card{padding:16px;font-size:13.5px}
  #nvj .nvj-mc .nvp-doc-title{font-size:18px;margin-top:10px}
  #nvj .nvj-mc .nvp-clause{padding:8px 11px;margin-top:6px;font-size:13px}
  #nvj .nvj-mc .nvp-row{padding:10px 2px;font-size:14px}
  .nvp-foot{margin-top:10px;padding-top:10px}}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){#nvj[data-stage="0"] [data-k="0"] .nvp-flow b{animation:mc-up .5s ease calc(1.4s + var(--i)*.25s) both}}

@media(max-width:700px) and (max-height:700px){#nvj .nvj-pin{grid-template-rows:24px 86px minmax(0,1fr) 52px 44px}#nvj .nvj-mc .nvp-card{padding:12px 14px}#nvj .nvj-mc .nvp-doc-title{font-size:16px;margin-top:8px}#nvj .nvj-mc .nvp-clause{padding:6px 10px;margin-top:5px;font-size:12.5px}#nvj .nvj-mc .nvp-clause:first-of-type{margin-top:10px}.nvp-foot{margin-top:8px;padding-top:8px}.nvp-flow{font-size:11.5px}}

/* ============ Phone stage cards, v3 (owner, 7 Oct): narrower, taller, with a bleed — the card keeps the same side margins as
   the title — and each card explains its step in plain words: Step 1 the contract is drafted, reviewed and signed; then Navio
   AI takes over (reads, assigns, follows up, proves, shows). Phones only. ============ */
@media(max-width:700px){
  #nvj .nvj-mc{padding:14px 0}
  #nvj .nvj-mc .nvp-card.nvp-tall{display:flex;flex-direction:column;justify-content:space-between;gap:14px;width:min(320px,calc(100% - 52px));max-width:none;height:100%;max-height:470px;padding:22px 20px;font-size:14.5px}
  .nvp-cap{display:flex;align-items:center;gap:8px;margin:0;font:600 11px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:#737d96}
  .nvp-cap b{padding:3px 8px;border-radius:6px;background:var(--ink);color:#fff;font-weight:600;letter-spacing:.06em}
  #nvj .nvj-mc .nvp-doc-title{margin:0;font-size:21px}
  #nvj .nvj-mc .nvp-doc-title+.nvp-soft{margin-top:-10px}
  .nvp-steps{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
  .nvp-steps li{position:relative;display:flex;gap:12px;padding:10px 0}
  .nvp-steps li:not(:last-child):after{content:'';position:absolute;left:17px;top:46px;bottom:-8px;width:2px;border-radius:2px;background:#e3e7f0}
  .nvp-dot{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;background:#edf2fa;color:var(--blue)}
  .nvp-dot.ai{background:#f2eff8;color:var(--violet)}
  .nvp-dot.ok{background:var(--blue);color:#fff}
  .nvp-dot .nvp-i{width:17px;height:17px}
  .nvp-steps b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
  .nvp-steps small{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:#737d96}
  #nvj .nvj-mc .nvp-row{padding:13px 2px}
  .nvp-row span small{display:block;margin-top:3px;font-weight:500;font-size:12.5px;color:#737d96}
  .nvp-end{margin:0;padding-top:12px;border-top:1px solid #eef0f5;font:600 13px var(--ui);color:var(--blue)}
  #nvj .nvj-mc .nvp-ai{margin:0}
  #nvj .nvj-mc .nvp-ins{gap:18px}}
@media(max-width:700px) and (max-height:760px){
  #nvj .nvj-mc .nvp-card.nvp-tall{padding:16px;gap:10px;font-size:13.5px}
  .nvp-steps li{padding:7px 0}
  .nvp-steps li:not(:last-child):after{top:40px}
  .nvp-dot{width:32px;height:32px}
  #nvj .nvj-mc .nvp-row{padding:9px 2px}
  #nvj .nvj-mc .nvp-doc-title{font-size:18px}}
@media(max-width:700px) and (max-height:700px){
  #nvj .nvj-mc{padding:6px 0}
  #nvj .nvj-mc .nvp-card.nvp-tall{padding:12px 14px;gap:8px}
  .nvp-steps li{padding:5px 0}.nvp-steps small{display:none}.nvp-steps li:not(:last-child):after{top:36px}
  .nvp-row span small{display:none}}
/* each card's rows come in one after another, every time its step arrives */
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
  #nvj[data-stage="0"] [data-k="0"] .nvp-steps li,#nvj[data-stage="3"] [data-k="3"] .nvp-steps li,#nvj[data-stage="4"] [data-k="4"] .nvp-steps li{animation:mc-up .5s ease calc(.25s + var(--i)*.35s) both}
  #nvj[data-stage="0"] [data-k="0"] .nvp-dot.ok,#nvj[data-stage="4"] [data-k="4"] .nvp-dot.ok{animation:mc-pop .5s cubic-bezier(.3,1.6,.5,1) 1s both}
  #nvj[data-stage="3"] [data-k="3"] .nvp-steps li:first-child .nvp-dot{animation:mc-up .5s ease .25s both,mc-bell 1.4s ease .8s 2}
  #nvj .nvj-mc .nvp-end{opacity:1}
  #nvj[data-stage] .nvj-mc .nvp-end{animation:mc-up .5s ease 1.3s both}}

@media(max-width:700px) and (max-height:760px){#nvj .nvj-mc{padding:16px 0}#nvj .nvj-mc .nvp-card.nvp-tall{gap:8px}#nvj .nvj-mc .nvp-row{padding:7px 2px}.nvp-end{padding-top:8px;font-size:12.5px}}
@media(max-width:700px) and (max-height:700px){#nvj .nvj-mc{padding:18px 0}#nvj .nvj-mc .nvp-ai{padding:6px 10px}.nvp-cap{font-size:10px}}
/* the card: step label on top, its content centred in the middle, one closing line at the foot */
@media(max-width:700px){
  .nvp-mid{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:0}
  #nvj .nvj-mc .nvp-mid .nvp-doc-title+.nvp-soft{margin-top:-8px}
  #nvj .nvj-mc .nvp-mid .nvp-steps{margin-top:6px}
  .nvp-row span small{display:flex;align-items:center;gap:7px}}

/* ============ Phone stages without boxes (owner, 7 Oct: "dabbe mat daal, background ke saath blend kar, chhote elements"):
   no white card around the step — its pieces sit straight on the page: a small step label, small soft tiles for the
   promises and owners, the timeline steps on the background, the closing line in blue ============ */
@media(max-width:700px){
  #nvj .nvj-mc .nvp-card.nvp-tall{background:none;border:0;box-shadow:none;padding:4px 0;gap:12px}
  #nvj .nvj-mc .nvp-mid{gap:8px}
  .nvp-cap{justify-content:center}
  .nvp-cap b{background:none;color:var(--blue);padding:0}
  #nvj .nvj-mc .nvp-row{margin:0;padding:11px 13px;border:1px solid #e6e9f1;border-bottom:1px solid #e6e9f1;border-radius:14px;background:#ffffffb3;box-shadow:0 8px 20px -18px #10193566}
  #nvj .nvj-mc .nvp-row:last-child{padding-bottom:11px}
  #nvj .nvj-mc .nvp-ai{justify-content:center;background:none;padding:0 0 4px}
  #nvj .nvj-mc .nvp-mid>.nvp-doc-title{text-align:center}
  #nvj .nvj-mc .nvp-mid>.nvp-doc-title+.nvp-soft{text-align:center}
  #nvj .nvj-mc .nvp-mid>.nvp-note{padding:11px 13px;border:1px solid #e6e9f1;border-radius:14px;background:#ffffffb3;align-items:center}
  .nvp-steps{width:fit-content;max-width:100%;margin-inline:auto!important}
  .nvp-end{border-top:0;padding-top:2px;text-align:center}
  #nvj .nvj-mc .nvp-ins{justify-content:center}}

/* without a box, the label, the content and the closing line stay together as one group, centred in the space */
@media(max-width:700px){#nvj .nvj-mc{justify-content:center}#nvj .nvj-mc .nvp-card.nvp-tall{height:auto;justify-content:flex-start;gap:16px}#nvj .nvj-mc .nvp-mid{flex:0 0 auto}}
@media(max-width:700px) and (max-height:700px){#nvj .nvj-mc .nvp-card.nvp-tall{gap:10px}#nvj .nvj-mc .nvp-row{padding:8px 11px}}

/* ============ Phone stages as a drawing (owner, 7 Oct: "less text, a moving dashboard SVG, no white box"): one small Navio OS
   picture per stage, drawn in code, sitting straight on the page right under the title — the contract signed, the AI scan,
   owners, a reminder and the report coming back, the proof, the dashboard ============ */
@media(max-width:700px){
  #nvj .nvj-mcards{display:flex;align-items:center;justify-content:center}
  #nvj .nvq{width:min(340px,calc(100% - 36px));height:100%;max-height:380px;overflow:visible;font-family:var(--ui)}
  #nvj .nvj-pin{grid-template-rows:28px 108px minmax(0,1fr) 58px 50px}
  .nvq-s{opacity:0;transition:opacity .45s ease}
  #nvj:not([data-stage]) .nvq-s0,#nvj[data-stage="0"] .nvq-s0,#nvj[data-stage="1"] .nvq-s1,#nvj[data-stage="2"] .nvq-s2,
  #nvj[data-stage="3"] .nvq-s3,#nvj[data-stage="4"] .nvq-s4,#nvj[data-stage="5"] .nvq-s5{opacity:1}
  .nvq-arc{stroke-dasharray:33.3 100}
  .nvq-sign{stroke-dasharray:1;stroke-dashoffset:0}
  .nvq-pop,.nvq-up,.nvq-in,.nvq-bell{transform-box:fill-box;transform-origin:center}}
@media(max-width:700px) and (max-height:700px){#nvj .nvj-pin{grid-template-rows:24px 86px minmax(0,1fr) 52px 44px}}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
  .nvq-d1{--d:.35s}.nvq-d2{--d:.7s}.nvq-d3{--d:1.05s}
  [data-stage="0"] .nvq-s0 .nvq-sign{animation:nvq-write 1.2s ease .3s both}
  [data-stage="0"] .nvq-s0 .nvq-pop{animation:nvq-pop .5s cubic-bezier(.3,1.6,.5,1) 1.4s both}
  [data-stage="0"] .nvq-s0 .nvq-up{animation:nvq-up .5s ease 1.8s both}
  [data-stage="1"] .nvq-s1 .nvq-scan{animation:nvq-scan 2.4s ease-in-out .2s infinite}
  [data-stage="1"] .nvq-s1 .nvq-hl{animation:nvq-fade .4s ease calc(.5s + var(--d,0s)) both}
  [data-stage="1"] .nvq-s1 .nvq-link{animation:nvq-write .5s ease calc(.7s + var(--d,0s)) both}
  [data-stage="1"] .nvq-s1 .nvq-up{animation:nvq-up .45s ease calc(.9s + var(--d,0s)) both}
  [data-stage="2"] .nvq-s2 .nvq-in{animation:nvq-in .55s cubic-bezier(.2,.7,.2,1) calc(.15s + var(--d,0s)) both}
  [data-stage="3"] .nvq-s3 .nvq-up{animation:nvq-up .5s ease calc(.15s + var(--d,0s)) both}
  [data-stage="3"] .nvq-s3 .nvq-bell{animation:nvq-ring 1.2s ease .3s 2}
  [data-stage="3"] .nvq-s3 .nvq-pop{animation:nvq-pop .5s cubic-bezier(.3,1.6,.5,1) 1.3s both}
  [data-stage="4"] .nvq-s4 .nvq-link{animation:nvq-write .6s ease .2s both}
  [data-stage="4"] .nvq-s4 .nvq-up{animation:nvq-up .5s ease calc(.2s + var(--d,0s)) both}
  [data-stage="4"] .nvq-s4 .nvq-pop{animation:nvq-pop .5s cubic-bezier(.3,1.6,.5,1) .9s both}
  [data-stage="4"] .nvq-s4 .nvq-halo{animation:nvq-halo 1.6s ease 1.4s 2}
  [data-stage="5"] .nvq-s5 .nvq-arc{animation:nvq-arc 1.2s cubic-bezier(.3,.7,.2,1) .2s both}
  [data-stage="5"] .nvq-s5 .nvq-bar{animation:nvq-grow .8s cubic-bezier(.3,.7,.2,1) calc(.3s + var(--d,0s)) both}
  [data-stage="5"] .nvq-s5 .nvq-up{animation:nvq-up .5s ease calc(.1s + var(--d,0s)) both}}
@keyframes nvq-write{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes nvq-pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes nvq-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes nvq-in{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes nvq-fade{from{opacity:0}to{opacity:1}}
@keyframes nvq-scan{0%{transform:translateY(0);opacity:0}10%{opacity:1}85%{opacity:1}100%{transform:translateY(190px);opacity:0}}
@keyframes nvq-ring{0%,100%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-14deg)}45%{transform:rotate(9deg)}60%{transform:rotate(-5deg)}}
@keyframes nvq-halo{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.6)}}
@keyframes nvq-arc{from{stroke-dasharray:0 100}to{stroke-dasharray:33.3 100}}
@keyframes nvq-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.nvq-bar{transform-box:fill-box;transform-origin:left center}
.nvq-halo{transform-box:fill-box;transform-origin:center}

/* ============ Phone stages, final idea (owner, 7 Oct: "invent new elements, less text, no boxes"): Navio OS speaks the story as a
   live notification stack — each step lands on top as a new notification, the earlier ones slide down under it, so by the
   end the phone holds the whole journey: signed → AI found the promises → owners → reminder → verified → in view ============ */
@media(max-width:700px){
  #nvj .nvj-mcards{display:flex;align-items:center;justify-content:center}
  #nvj .nvq{display:none}
  .nvn-stack{position:relative;width:min(330px,calc(100% - 40px));height:300px}
  .nvn-app{position:absolute;left:0;right:0;top:-30px;display:flex;align-items:center;justify-content:center;gap:7px;margin:0;font:600 10.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:#8a92a8}
  .nvn-app i{width:7px;height:7px;border-radius:50%;background:#2f9e6a;box-shadow:0 0 0 0 #2f9e6a66;animation:nvn-live 2s ease-out infinite}
  .nvn{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:12px;height:62px;padding:0 14px 0 12px;border-radius:18px;background:#ffffffd9;border:1px solid #ffffff;box-shadow:0 12px 30px -16px #1019354d,0 1px 0 #10193508;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transform:translateY(-26px) scale(.96);transform-origin:top center;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .45s ease}
  .nvn-ico{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;color:#fff}
  .nvn-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .nvn-ico.ink{background:#101935}.nvn-ico.vio{background:#6a4fb8}.nvn-ico.blue{background:#2364a8}.nvn-ico.ok{background:#2f9e6a}
  .nvn-ico.vio svg{fill:currentColor;stroke:none}
  .nvn-txt{flex:1;min-width:0}
  .nvn-txt b{display:block;font:600 14px/1.25 var(--font);color:#101935;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nvn-txt small{display:block;margin-top:2px;font:400 11.5px/1.3 var(--ui);color:#737d96;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nvn em{align-self:flex-start;margin-top:12px;font:500 10.5px var(--ui);font-style:normal;color:#9aa1b4}
  #nvj[data-stage="0"] .nvn-0{opacity:1;transform:translateY(0px) scale(1.0)}
  #nvj[data-stage="0"] .nvn-1{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="0"] .nvn-2{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="0"] .nvn-3{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="0"] .nvn-4{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="0"] .nvn-5{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="1"] .nvn-0{opacity:.9;transform:translateY(70px) scale(0.965)}
  #nvj[data-stage="1"] .nvn-1{opacity:1;transform:translateY(0px) scale(1.0)}
  #nvj[data-stage="1"] .nvn-2{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="1"] .nvn-3{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="1"] .nvn-4{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="1"] .nvn-5{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="2"] .nvn-0{opacity:.7;transform:translateY(140px) scale(0.93)}
  #nvj[data-stage="2"] .nvn-1{opacity:.9;transform:translateY(70px) scale(0.965)}
  #nvj[data-stage="2"] .nvn-2{opacity:1;transform:translateY(0px) scale(1.0)}
  #nvj[data-stage="2"] .nvn-3{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="2"] .nvn-4{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="2"] .nvn-5{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="3"] .nvn-0{opacity:.45;transform:translateY(210px) scale(0.895)}
  #nvj[data-stage="3"] .nvn-1{opacity:.7;transform:translateY(140px) scale(0.93)}
  #nvj[data-stage="3"] .nvn-2{opacity:.9;transform:translateY(70px) scale(0.965)}
  #nvj[data-stage="3"] .nvn-3{opacity:1;transform:translateY(0px) scale(1.0)}
  #nvj[data-stage="3"] .nvn-4{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="3"] .nvn-5{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="4"] .nvn-0{opacity:0;transform:translateY(224px) scale(.88)}
  #nvj[data-stage="4"] .nvn-1{opacity:.45;transform:translateY(210px) scale(0.895)}
  #nvj[data-stage="4"] .nvn-2{opacity:.7;transform:translateY(140px) scale(0.93)}
  #nvj[data-stage="4"] .nvn-3{opacity:.9;transform:translateY(70px) scale(0.965)}
  #nvj[data-stage="4"] .nvn-4{opacity:1;transform:translateY(0px) scale(1.0)}
  #nvj[data-stage="4"] .nvn-5{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="5"] .nvn-0{opacity:0;transform:translateY(224px) scale(.88)}
  #nvj[data-stage="5"] .nvn-1{opacity:0;transform:translateY(224px) scale(.88)}
  #nvj[data-stage="5"] .nvn-2{opacity:.45;transform:translateY(210px) scale(0.895)}
  #nvj[data-stage="5"] .nvn-3{opacity:.7;transform:translateY(140px) scale(0.93)}
  #nvj[data-stage="5"] .nvn-4{opacity:.9;transform:translateY(70px) scale(0.965)}
  #nvj[data-stage="5"] .nvn-5{opacity:1;transform:translateY(0px) scale(1.0)}
  #nvj:not([data-stage]) .nvn-0{opacity:1;transform:none}}
@media(max-width:700px) and (max-height:700px){.nvn-stack{height:250px}.nvn{height:56px}}
/* the newest notification's icon does its small thing as it lands */
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
  #nvj[data-stage="0"] .nvn-0 .nvn-ico svg path{stroke-dasharray:60;animation:nvn-draw 1s ease .4s both}
  #nvj[data-stage="1"] .nvn-1 .nvn-ico svg{animation:nvn-twinkle 1.6s ease-in-out .3s 2}
  #nvj[data-stage="2"] .nvn-2 .nvn-ico svg{animation:nvn-pop .5s cubic-bezier(.3,1.6,.5,1) .3s both}
  #nvj[data-stage="3"] .nvn-3 .nvn-ico svg{animation:nvn-ring 1.1s ease .35s 2;transform-origin:50% 15%}
  #nvj[data-stage="4"] .nvn-4 .nvn-ico svg path{stroke-dasharray:24;animation:nvn-draw .6s ease .4s both}
  #nvj[data-stage="5"] .nvn-5 .nvn-ico svg{animation:nvn-spin 1.2s cubic-bezier(.3,.7,.2,1) .3s both}
  #nvj[data-stage] .nvn{will-change:transform}}
@media(max-width:700px) and (prefers-reduced-motion:reduce){.nvn{transition:none}.nvn-app i{animation:none}}
@keyframes nvn-live{0%{box-shadow:0 0 0 0 #2f9e6a66}100%{box-shadow:0 0 0 8px #2f9e6a00}}
@keyframes nvn-draw{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
@keyframes nvn-twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.25) rotate(45deg)}}
@keyframes nvn-pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes nvn-ring{0%,100%{transform:rotate(0)}15%{transform:rotate(18deg)}30%{transform:rotate(-15deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-5deg)}}
@keyframes nvn-spin{from{transform:rotate(-180deg);opacity:.2}to{transform:rotate(0);opacity:1}}
/* the stack keeps itself centred between the title and Book a Demo as it grows; short phones show three at a time */
@media(max-width:700px){
  .nvn-stack{--sh:300px;--nh:62px;--slot:70px;height:var(--sh);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
  .nvn-app{top:-26px}
  #nvj[data-stage="0"] .nvn-stack{transform:translateY(calc((var(--sh) - var(--nh) - 0*var(--slot)) / 2))}
  #nvj[data-stage="0"] .nvn-0{opacity:1;transform:translateY(calc(0*var(--slot))) scale(1.0)}
  #nvj[data-stage="0"] .nvn-1{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="0"] .nvn-2{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="0"] .nvn-3{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="0"] .nvn-4{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="0"] .nvn-5{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="1"] .nvn-stack{transform:translateY(calc((var(--sh) - var(--nh) - 1*var(--slot)) / 2))}
  #nvj[data-stage="1"] .nvn-0{opacity:.9;transform:translateY(calc(1*var(--slot))) scale(0.965)}
  #nvj[data-stage="1"] .nvn-1{opacity:1;transform:translateY(calc(0*var(--slot))) scale(1.0)}
  #nvj[data-stage="1"] .nvn-2{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="1"] .nvn-3{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="1"] .nvn-4{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="1"] .nvn-5{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="2"] .nvn-stack{transform:translateY(calc((var(--sh) - var(--nh) - 2*var(--slot)) / 2))}
  #nvj[data-stage="2"] .nvn-0{opacity:.7;transform:translateY(calc(2*var(--slot))) scale(0.93)}
  #nvj[data-stage="2"] .nvn-1{opacity:.9;transform:translateY(calc(1*var(--slot))) scale(0.965)}
  #nvj[data-stage="2"] .nvn-2{opacity:1;transform:translateY(calc(0*var(--slot))) scale(1.0)}
  #nvj[data-stage="2"] .nvn-3{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="2"] .nvn-4{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="2"] .nvn-5{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="3"] .nvn-stack{transform:translateY(calc((var(--sh) - var(--nh) - 3*var(--slot)) / 2))}
  #nvj[data-stage="3"] .nvn-0{opacity:.45;transform:translateY(calc(3*var(--slot))) scale(0.895)}
  #nvj[data-stage="3"] .nvn-1{opacity:.7;transform:translateY(calc(2*var(--slot))) scale(0.93)}
  #nvj[data-stage="3"] .nvn-2{opacity:.9;transform:translateY(calc(1*var(--slot))) scale(0.965)}
  #nvj[data-stage="3"] .nvn-3{opacity:1;transform:translateY(calc(0*var(--slot))) scale(1.0)}
  #nvj[data-stage="3"] .nvn-4{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="3"] .nvn-5{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="4"] .nvn-stack{transform:translateY(calc((var(--sh) - var(--nh) - 3*var(--slot)) / 2))}
  #nvj[data-stage="4"] .nvn-0{opacity:0;transform:translateY(calc(3*var(--slot) + 14px)) scale(.88)}
  #nvj[data-stage="4"] .nvn-1{opacity:.45;transform:translateY(calc(3*var(--slot))) scale(0.895)}
  #nvj[data-stage="4"] .nvn-2{opacity:.7;transform:translateY(calc(2*var(--slot))) scale(0.93)}
  #nvj[data-stage="4"] .nvn-3{opacity:.9;transform:translateY(calc(1*var(--slot))) scale(0.965)}
  #nvj[data-stage="4"] .nvn-4{opacity:1;transform:translateY(calc(0*var(--slot))) scale(1.0)}
  #nvj[data-stage="4"] .nvn-5{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="5"] .nvn-stack{transform:translateY(calc((var(--sh) - var(--nh) - 3*var(--slot)) / 2))}
  #nvj[data-stage="5"] .nvn-0{opacity:0;transform:translateY(calc(3*var(--slot) + 14px)) scale(.88)}
  #nvj[data-stage="5"] .nvn-1{opacity:0;transform:translateY(calc(3*var(--slot) + 14px)) scale(.88)}
  #nvj[data-stage="5"] .nvn-2{opacity:.45;transform:translateY(calc(3*var(--slot))) scale(0.895)}
  #nvj[data-stage="5"] .nvn-3{opacity:.7;transform:translateY(calc(2*var(--slot))) scale(0.93)}
  #nvj[data-stage="5"] .nvn-4{opacity:.9;transform:translateY(calc(1*var(--slot))) scale(0.965)}
  #nvj[data-stage="5"] .nvn-5{opacity:1;transform:translateY(calc(0*var(--slot))) scale(1.0)}}
@media(max-width:700px) and (max-height:760px){
  .nvn-stack{--sh:220px;--nh:56px;--slot:62px}
  .nvn{height:56px}
  #nvj[data-stage="0"] .nvn-stack{transform:translateY(calc((var(--sh) - var(--nh) - 0*var(--slot)) / 2))}
  #nvj[data-stage="0"] .nvn-0{opacity:1;transform:translateY(calc(0*var(--slot))) scale(1.0)}
  #nvj[data-stage="0"] .nvn-1{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="0"] .nvn-2{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="0"] .nvn-3{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="0"] .nvn-4{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="0"] .nvn-5{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="1"] .nvn-stack{transform:translateY(calc((var(--sh) - var(--nh) - 1*var(--slot)) / 2))}
  #nvj[data-stage="1"] .nvn-0{opacity:.9;transform:translateY(calc(1*var(--slot))) scale(0.965)}
  #nvj[data-stage="1"] .nvn-1{opacity:1;transform:translateY(calc(0*var(--slot))) scale(1.0)}
  #nvj[data-stage="1"] .nvn-2{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="1"] .nvn-3{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="1"] .nvn-4{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="1"] .nvn-5{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="2"] .nvn-stack{transform:translateY(calc((var(--sh) - var(--nh) - 2*var(--slot)) / 2))}
  #nvj[data-stage="2"] .nvn-0{opacity:.7;transform:translateY(calc(2*var(--slot))) scale(0.93)}
  #nvj[data-stage="2"] .nvn-1{opacity:.9;transform:translateY(calc(1*var(--slot))) scale(0.965)}
  #nvj[data-stage="2"] .nvn-2{opacity:1;transform:translateY(calc(0*var(--slot))) scale(1.0)}
  #nvj[data-stage="2"] .nvn-3{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="2"] .nvn-4{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="2"] .nvn-5{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="3"] .nvn-stack{transform:translateY(calc((var(--sh) - var(--nh) - 2*var(--slot)) / 2))}
  #nvj[data-stage="3"] .nvn-0{opacity:0;transform:translateY(calc(2*var(--slot) + 14px)) scale(.88)}
  #nvj[data-stage="3"] .nvn-1{opacity:.7;transform:translateY(calc(2*var(--slot))) scale(0.93)}
  #nvj[data-stage="3"] .nvn-2{opacity:.9;transform:translateY(calc(1*var(--slot))) scale(0.965)}
  #nvj[data-stage="3"] .nvn-3{opacity:1;transform:translateY(calc(0*var(--slot))) scale(1.0)}
  #nvj[data-stage="3"] .nvn-4{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="3"] .nvn-5{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="4"] .nvn-stack{transform:translateY(calc((var(--sh) - var(--nh) - 2*var(--slot)) / 2))}
  #nvj[data-stage="4"] .nvn-0{opacity:0;transform:translateY(calc(2*var(--slot) + 14px)) scale(.88)}
  #nvj[data-stage="4"] .nvn-1{opacity:0;transform:translateY(calc(2*var(--slot) + 14px)) scale(.88)}
  #nvj[data-stage="4"] .nvn-2{opacity:.7;transform:translateY(calc(2*var(--slot))) scale(0.93)}
  #nvj[data-stage="4"] .nvn-3{opacity:.9;transform:translateY(calc(1*var(--slot))) scale(0.965)}
  #nvj[data-stage="4"] .nvn-4{opacity:1;transform:translateY(calc(0*var(--slot))) scale(1.0)}
  #nvj[data-stage="4"] .nvn-5{opacity:0;transform:translateY(-26px) scale(.96)}
  #nvj[data-stage="5"] .nvn-stack{transform:translateY(calc((var(--sh) - var(--nh) - 2*var(--slot)) / 2))}
  #nvj[data-stage="5"] .nvn-0{opacity:0;transform:translateY(calc(2*var(--slot) + 14px)) scale(.88)}
  #nvj[data-stage="5"] .nvn-1{opacity:0;transform:translateY(calc(2*var(--slot) + 14px)) scale(.88)}
  #nvj[data-stage="5"] .nvn-2{opacity:0;transform:translateY(calc(2*var(--slot) + 14px)) scale(.88)}
  #nvj[data-stage="5"] .nvn-3{opacity:.7;transform:translateY(calc(2*var(--slot))) scale(0.93)}
  #nvj[data-stage="5"] .nvn-4{opacity:.9;transform:translateY(calc(1*var(--slot))) scale(0.965)}
  #nvj[data-stage="5"] .nvn-5{opacity:1;transform:translateY(calc(0*var(--slot))) scale(1.0)}}

/* ============ The last step on phones (owner, 7 Oct): the notifications give way and an iPad rises from lying flat — on its
   screen the Navio OS dashboard holds the whole story: four numbers, a progress line, and the same events as an activity feed.
   Sized to the space, drawn in code, everything inside scales with the device (container units). ============ */
.nvi{display:none}
@media(max-width:700px){
  .nvi{display:flex;position:absolute;inset:0;align-items:center;justify-content:center;perspective:900px;pointer-events:none}
  .nvi-dev{height:min(390px,96%);aspect-ratio:3/4;container-type:inline-size;padding:3.2cqw;border-radius:7cqw;background:#0d0f17;box-shadow:0 30px 60px -28px #10193599,inset 0 0 0 1px #2a2e3c;
    opacity:0;transform:rotateX(72deg) translateY(30%) scale(.85);transform-origin:50% 100%;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .5s ease}
  .nvi-scr{height:100%;overflow:hidden;border-radius:4.4cqw;background:#f6f7fb;padding:5cqw 5cqw 4cqw;font-family:var(--ui);color:#101935;display:flex;flex-direction:column;gap:3.4cqw}
  .nvi-top{display:flex;align-items:center;gap:2.6cqw}
  .nvi-n{display:grid;place-items:center;width:8cqw;height:8cqw;border-radius:2.4cqw;background:#101935;color:#fff;font:700 5cqw/1 NuvenaRound,var(--font)}
  .nvi-top b{font:700 4.6cqw var(--font)}
  .nvi-top em{margin-left:auto;font:500 3.3cqw var(--ui);font-style:normal;color:#737d96}
  .nvi-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4cqw}
  .nvi-kpis div{padding:2.8cqw 2.4cqw;border-radius:3.2cqw;background:#fff;box-shadow:0 0 0 1px #e6e9f1}
  .nvi-kpis b{display:block;font:700 7cqw/1 var(--font)}
  .nvi-kpis .ok b{color:#2f9e6a}
  .nvi-kpis small{display:block;margin-top:1.2cqw;font:500 2.9cqw var(--ui);color:#737d96}
  .nvi-bar{height:2cqw;border-radius:2cqw;background:#e6e9f1;overflow:hidden}
  .nvi-bar i{display:block;height:100%;width:33.3%;border-radius:inherit;background:linear-gradient(90deg,#2364a8,#6a4fb8)}
  .nvi-h{margin:0;font:700 3.3cqw var(--ui);letter-spacing:.12em;text-transform:uppercase;color:#8a92a8}
  .nvi-feed{display:flex;flex-direction:column;gap:2.2cqw;margin:0;padding:0;list-style:none}
  .nvi-feed li{display:flex;align-items:center;gap:3cqw;padding:2.4cqw 3cqw;border-radius:3.4cqw;background:#fff;box-shadow:0 0 0 1px #eceef4}
  .nvi-feed .nvn-ico{width:8.6cqw;height:8.6cqw;border-radius:2.6cqw}
  .nvi-feed .nvn-ico svg{width:4.8cqw;height:4.8cqw}
  .nvi-feed b{flex:1;min-width:0;font:600 3.9cqw var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nvi-feed em{font:500 3cqw var(--ui);font-style:normal;color:#9aa1b4}
  /* step 6: the stack steps back, the iPad stands up */
  #nvj[data-stage="5"] .nvn-stack{opacity:0;transform:translateY(-10px) scale(.92)!important;transition:transform .5s ease,opacity .4s ease}
  #nvj[data-stage="5"] .nvi-dev{opacity:1;transform:none}
  #nvj[data-stage="5"] .nvn-app{opacity:0}}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
  #nvj[data-stage="5"] .nvi-feed li{animation:nvq-up .45s ease both}
  #nvj[data-stage="5"] .nvi-f0{animation-delay:.7s!important}#nvj[data-stage="5"] .nvi-f1{animation-delay:.85s!important}#nvj[data-stage="5"] .nvi-f2{animation-delay:1s!important}
  #nvj[data-stage="5"] .nvi-f3{animation-delay:1.15s!important}#nvj[data-stage="5"] .nvi-f4{animation-delay:1.3s!important}
  #nvj[data-stage="5"] .nvi-bar i{animation:nvi-fill 1.2s cubic-bezier(.3,.7,.2,1) .8s both}}
@media(max-width:700px) and (prefers-reduced-motion:reduce){.nvi-dev{transition:none}}
/* the journey's closing iPad wears the same drawn frame as the Navio OS reveal: a silver edge round the black glass, and a camera */
@media(max-width:700px){
  .nvi-dev{position:relative;border:3px solid transparent;background:linear-gradient(#06070a,#06070a) padding-box,linear-gradient(155deg,#f1f2f5 0%,#bcc0c8 16%,#8f949e 38%,#cdd0d6 58%,#868b95 80%,#dfe1e6 100%) border-box;
    box-shadow:0 30px 60px -28px #10193599,inset 0 0 0 1px #23252c}
  .nvi-dev::before{content:'';position:absolute;left:50%;top:1.2%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:radial-gradient(circle at 36% 34%,#5a6c94 0 12%,#1c2130 34%,#0b0c10 70%)}}
@keyframes nvi-fill{from{width:0}to{width:33.3%}}

@media(max-width:700px) and (max-height:760px){.nvi-dev{height:86%}}

/* ============ The two bands after the journey (owner, 7 Oct): a photo melting into the page on one side, words and marks on the
   other — no panel, no frame. Laptop: side by side. Phone: the photo on top fading into the page, the words under it. ============ */
.bd{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:min(78svh,680px);overflow:hidden;background:var(--bg)}
.bd-photo{position:absolute;top:0;bottom:0;width:62%;pointer-events:none}
.bd-left .bd-photo{right:0}
.bd-right .bd-photo{left:0}
.bd-photo img{width:100%;height:100%;object-fit:cover}
.bd-left .bd-photo img{object-position:30% 45%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 42%);mask-image:linear-gradient(90deg,transparent 0%,#000 42%)}
.bd-right .bd-photo img{object-position:60% 40%;-webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 42%);mask-image:linear-gradient(270deg,transparent 0%,#000 42%)}
.bd-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--bg),transparent 14%,transparent 86%,var(--bg))}
.bd-copy{position:relative;z-index:1;max-width:520px;padding:clamp(56px,10vh,96px) var(--gutter)}
.bd-left .bd-copy{grid-column:1;justify-self:end;padding-right:clamp(24px,4vw,64px)}
.bd-right .bd-copy{grid-column:2;justify-self:start;padding-left:clamp(24px,4vw,64px)}
.bd-copy h2{margin:0;font:500 clamp(34px,3.6vw,52px)/1.06 var(--font);letter-spacing:-.05em;color:var(--ink)}
.bd-copy h2 span{color:var(--blue)}
.bd-copy>p{margin:20px 0 0;font:400 clamp(15px,1.15vw,17.5px)/1.65 var(--font);color:var(--slate)}
.bd-link{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font:600 15px var(--font);color:var(--ink)}
.bd-link .ico{width:17px;height:17px}
.bd-marks{display:flex;flex-wrap:wrap;gap:22px 26px;margin:clamp(30px,5vh,48px) 0 0;padding:0;list-style:none}
.bd-marks li{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:56px}
.bd-mark{display:grid;place-items:center;height:36px}
.bd-mark img{height:32px;width:auto}
.bd-mark img.wide{height:15px}
.bd-mark .ico,.bd-mark svg{width:30px;height:30px}
.bd-mark svg.wa{fill:#25d366}
.bd-mark .ico{color:var(--blue)}
.bd-mark .fa-bm{width:34px;height:34px}
.bd-mark .ai-mark{width:32px;height:32px}
.bd-marks small{font:500 12.5px var(--ui);color:var(--slate);white-space:nowrap}
.bd-marks li.next{opacity:.45;filter:grayscale(1)}
.bd-marks li.own small{color:var(--violet);font-weight:600}
.bd-note{margin:14px 0 0!important;font:400 12px var(--ui)!important;color:var(--muted)!important}
/* the words rise in once the band is reached */
@media(prefers-reduced-motion:no-preference){.bd-copy>*{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .bd.in .bd-copy>*{opacity:1;transform:none}.bd.in .bd-copy>*:nth-child(2){transition-delay:.08s}.bd.in .bd-copy>*:nth-child(3){transition-delay:.16s}.bd.in .bd-copy>*:nth-child(4){transition-delay:.24s}.bd.in .bd-copy>*:nth-child(5){transition-delay:.3s}}
@media(max-width:900px){
  .bd{display:block;min-height:0}
  .bd-photo{position:relative;width:100%;height:min(46svh,360px)}
  .bd-left .bd-photo img,.bd-right .bd-photo img{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .bd-left .bd-photo img{object-position:40% 40%}
  .bd-right .bd-photo img{object-position:62% 35%}
  .bd-photo:after{background:linear-gradient(180deg,var(--bg),transparent 12%)}
  .bd-copy,.bd-left .bd-copy,.bd-right .bd-copy{max-width:560px;margin:-36px auto 0;padding:0 var(--gutter) 64px}
  .bd-copy h2{font-size:clamp(30px,8.4vw,40px)}
  .bd-marks{gap:18px 20px;justify-content:flex-start}}
/* marks in an even grid: four across on the AI band, a row of three live + a row of four next on the work band */
.bd-marks{display:grid;grid-template-columns:repeat(4,minmax(64px,auto));justify-content:start;gap:22px 26px}
.bd-marks li{min-width:0}
.bd-mark .fa-bm{width:32px;height:32px}
.bd-mark .fa-bm[class*=google],.bd-mark svg.fa-bm{width:30px;height:30px}
@media(max-width:900px){.bd-marks{grid-template-columns:repeat(4,1fr);gap:20px 8px}.bd-marks small{font-size:11.5px}.bd-mark img.wide{height:12px}}

/* the last step holds a full screen of scroll: a little more room so the six steps keep their pace */
#nvj .nvj-story{height:780svh;min-height:3900px}
@media(max-width:700px){#nvj .nvj-story{height:620svh;min-height:2750px}}

/* ============ Tap to approve (owner, 7 Oct): at "Follow-ups" one notification asks for YOUR ok — a finger pulses over Approve,
   the visitor's own thumb taps it, it turns green ("Renewal approved · Rahul notified"), and the iPad at the end says "by you" ============ */
.nvn-done,.nvn-done-ico,.nvn-ok{display:none}
#nvj[data-approved] .nvn-wait,#nvj[data-approved] .nvn-wait-ico,#nvj[data-approved] .nvn-btn,#nvj[data-approved] .nvn-tap{display:none}
#nvj[data-approved] .nvn-done{display:inline}
#nvj[data-approved] .nvn-done-ico{display:grid}
#nvj[data-approved] .nvn-ok{display:inline-flex}
@media(max-width:700px){
  .nvn-act{background:#fff;box-shadow:0 0 0 1.5px #2364a8,0 16px 34px -16px #2364a866}
  #nvj[data-approved] .nvn-act{box-shadow:0 0 0 1.5px #2f9e6a,0 16px 34px -16px #2f9e6a66}
  .nvn-act em{display:none}
  .nvn-btn{position:relative;z-index:2;flex:none;height:34px;padding:0 14px;border:0;border-radius:99px;background:var(--action-dark);color:#fff;font:600 13px var(--ui);cursor:pointer;pointer-events:auto;touch-action:manipulation}
  .nvn-btn:active{transform:scale(.94)}
  .nvn-ok{flex:none;align-items:center;height:28px;padding:0 11px;border-radius:99px;background:#e6f4ec;color:#2f9e6a;font:700 12px var(--ui)}
  .nvn-tap{position:absolute;right:20px;top:30px;width:44px;height:44px;pointer-events:none;opacity:0}
  .nvn-tap i{position:absolute;left:4px;top:-8px;width:26px;height:26px;border-radius:50%;border:2px solid #2364a8;opacity:0}
  .nvn-hand{position:absolute;left:8px;top:2px;width:30px;height:30px;fill:#fff;stroke:#101935;stroke-width:1.3;stroke-linejoin:round;filter:drop-shadow(0 4px 6px #10193540)}
  #nvj[data-stage="3"] .nvn-tap{opacity:1}
  #nvj[data-approved] .nvn-act .nvn-done-ico{animation:nvn-pop .5s cubic-bezier(.3,1.6,.5,1) both}
  #nvj[data-approved] .nvn-act{animation:nvn-yes .6s ease both}}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
  #nvj[data-stage="3"] .nvn-hand{animation:nvn-press 1.6s ease-in-out .6s infinite}
  #nvj[data-stage="3"] .nvn-tap i{animation:nvn-ripple 1.6s ease-out .9s infinite}
  #nvj[data-stage="3"] .nvn-tap i+i{animation-delay:1.15s}}
@keyframes nvn-press{0%,100%{transform:translate(0,0)}35%{transform:translate(-4px,-6px)}50%{transform:translate(-4px,-6px) scale(.92)}65%{transform:translate(-4px,-6px)}}
@keyframes nvn-ripple{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:scale(1.6)}}
@keyframes nvn-yes{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
/* the iPad feed line follows the visitor's choice */
.nvi-feed .nvn-done{display:none}
#nvj[data-approved] .nvi-feed .nvn-wait{display:none}
#nvj[data-approved] .nvi-feed .nvn-done{display:inline;color:#2f9e6a}

/* only the Approve button takes a touch: notifications waiting off-stage (opacity 0) must never sit on top of it */
.nvn{pointer-events:none}.nvn-btn{pointer-events:auto}
/* #nvj button{color:inherit} outranks .nvn-btn — scope it so the label shows */
@media(max-width:700px){#nvj .nvn-btn{color:#fff;font:600 13px var(--ui)}#nvj .nvn-tap{right:14px;top:34px}}

/* ============ Navio OS revealed, second pass (owner, 7 Oct): no pin — the iPad rises, tilts up and settles as the section scrolls in.
   A drawn iPad (silver edge, black glass bezel, camera, buttons, glare, contact shadow), ONE live Navio OS screen inside it, and four
   feature badges with strings to the screen: beside the iPad on a laptop (JS places them level with what they point at), two above
   and two below it on phones and tablets. The iPad's parts are sized in cqw so it keeps its proportions at every width. ============ */
/* Typography-led opening with a quiet drafting-to-delivery flow. */
#nvj.nvj-simple{--font:NuvenaFigtree,Figtree,NuvenaRound,Quicksand,sans-serif;--ui:var(--font);position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;min-height:100svh;padding:150px 24px 100px;text-align:center;background:var(--bg)}
.nvj-simple-copy{position:relative;z-index:1;width:100%;max-width:1180px}
.nvj-ambient-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:#2364a8;stroke-width:1;stroke-opacity:.14;mask-image:linear-gradient(90deg,#000,transparent 35%,transparent 65%,#000)}
.nvj-ambient-mobile{display:none}
.nvj-ambient-lines .nvj-ambient-gold{stroke:#c99535;stroke-opacity:.25}
.nvj-ambient-signal{display:none}
.nvj-outcomes-underline{display:none}
/* Desktop-only finishing: slightly stronger navigation and quiet line signals. */
@media(min-width:901px){
 .hdr .nav-btn,.hdr .hdr-signin,.hdr .hdr-cta{font-family:NuvenaFigtree,Figtree,NuvenaRound,Quicksand,sans-serif}
 .hdr .nav-btn,.hdr .hdr-signin{font-weight:575}
 .hdr .hdr-cta{font-weight:650}
 #nvj.nvj-simple{min-height:calc(100svh - var(--bar,0px))}
 #nvj .nvj-simple-copy{top:-28px}
 /* owner, 9 Oct: the headline sits 5 mm lower on laptops (the description and buttons stay where they are) */
 #nvj #nvj-simple-title{transform:translateY(calc(5mm - clamp(0px,calc(100dvh - 600px),38px)))}
 /* Move the headline and description together; leave the intro and CTAs in place. */
 #nvj #nvj-simple-title,#nvj .nvj-simple-sub{translate:0 calc(-1 * clamp(0px,calc(100dvh - 650px),1cm))}
 .nvj-ambient-lines{transform:translateY(20px);stroke-opacity:.22;mask-image:linear-gradient(180deg,transparent 10%,#000 32%)}
 .nvj-ambient-lines .nvj-ambient-gold{stroke-opacity:.33}
 #nvj-simple-title em{position:relative;display:inline-block}
 #nvj-simple-title .nvj-outcomes-underline{display:block;position:absolute;left:2%;bottom:-.09em;width:95%;height:.16em;overflow:visible;pointer-events:none}
 .nvj-outcomes-underline path{fill:none;stroke:#c99535;stroke-width:3;stroke-opacity:.8;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
 .nvj-ambient-signal{display:block;stroke:#2364a8;stroke-width:2.4;stroke-opacity:.5;stroke-linecap:round;stroke-dasharray:1.1 98.9;animation:nvj-signal-travel 14s linear infinite;animation-delay:var(--signal-delay)}
 .nvj-ambient-signal.nvj-signal-gold{stroke:#c99535;stroke-opacity:.6}
 .nvj-outcomes-underline path{animation:nvj-outcomes-underline 1.7s cubic-bezier(.25,.55,.3,1) .4s both}
}
@keyframes nvj-signal-travel{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes nvj-outcomes-underline{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
[data-motion=paused] .nvj-ambient-signal{display:none}
.nvj-execution-flow{display:none;position:relative;width:min(100%,500px);margin:0 auto;font-family:var(--font)}
.nvj-flow-arcs,.nvj-flow-hub{display:none}
.nvj-flow-steps{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0}
.nvj-flow-steps::before{content:'';position:absolute;z-index:-1;left:12.5%;right:12.5%;top:19px;height:1px;background:linear-gradient(90deg,#b6cce3,#2364a866,#d4a03c88)}
.nvj-flow-steps li{display:flex;flex-direction:column;align-items:center;gap:9px;font:600 12px/1.3 var(--font);color:#52627c}
.nvj-flow-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid #dbe4ee;border-radius:12px;background:#fcfcfb;box-shadow:0 5px 15px -10px #2364a850;color:var(--blue)}
.nvj-flow-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nvj-flow-steps li:last-child .nvj-flow-icon{background:#eef5f3;color:#367565;border-color:#cfe1db}
@media(prefers-reduced-motion:no-preference){.nvj-flow-icon{animation:nvj-flow-arrive 1.4s ease-out both;animation-delay:calc(.3s + var(--step)*.35s)}.nvj-flow-spark{animation:nvj-flow-glimmer 3s ease-in-out 2}}
@keyframes nvj-flow-arrive{from{opacity:.35;transform:translateY(5px);box-shadow:0 0 0 5px #2364a812}to{opacity:1;transform:translateY(0)}}
@keyframes nvj-flow-glimmer{50%{opacity:.35}}
/* Learn More sits under Book a Demo (owner, 10 Oct). */
.nvj-simple-actions{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
#nvj .nvj-simple-learn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 12px;font:600 14px var(--font);color:var(--ink);text-decoration:none}
#nvj .nvj-simple-learn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#nvj .nvj-simple-learn:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:8px}
#nvj .nvj-simple-eyebrow{margin:0 0 32px;font:800 clamp(15px,1.4vw,20px)/1.3 var(--ui);letter-spacing:.16em;color:var(--blue)}
#nvj .nvj-eyebrow-category{font-weight:600;letter-spacing:.02em}
#nvj #nvj-simple-title{margin:0;font:750 clamp(44px,6.1vw,88px)/1.08 var(--font);letter-spacing:-.045em;color:var(--ink)}
.nvj-simple-line{display:block}
#nvj-simple-title em{font-family:var(--font);font-style:italic;font-weight:700;letter-spacing:inherit;color:var(--blue)}
#nvj .nvj-simple-sub{max-width:64ch;margin:28px auto 30px;font:500 clamp(15.3px,1.71vw,23.4px)/1.45 var(--font);color:var(--slate)}
#nvj .nvj-simple-sub>span{display:block}
#nvj .nvj-sub-highlight{color:inherit}
#nvj .nvj-simple-sub>.nvj-sub-mobile{display:none}
#nvj.nvj-simple .nvj-demo{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 28px;border:2px solid #d4a03c;border-radius:99px;background:var(--ink);color:#fff;font:600 16px var(--font);cursor:pointer}
#nvj.nvj-simple .nvj-demo svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#nvj.nvj-simple .nvj-demo:active{transform:scale(.97)}
#nvj.nvj-simple .nvj-demo:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
@media(max-width:700px){
  #nvj.nvj-simple{align-items:stretch;min-height:calc(100svh - var(--bar,0px) - var(--ck-h,0px));padding:clamp(100px,calc(14svh - 20px),128px) 24px calc(24px + env(safe-area-inset-bottom,0px))}
  #nvj .nvj-simple-copy{display:flex;flex-direction:column;align-items:center}
  #nvj .nvj-simple-actions{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;margin-top:0;padding-top:0}
  #nvj .nvj-ambient-lines{display:none}
  #nvj .nvj-execution-flow{display:block;flex:none;width:min(100%,330px);height:auto;margin:auto}
  #nvj .nvj-cycle-svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--font)}
  .nvj-cycle-orbit{fill:none;stroke:#2364a81c;stroke-width:1;stroke-dasharray:2 6}
  .nvj-cycle-track-bed{fill:none;stroke:#fff;stroke-width:12;stroke-linejoin:round}
  .nvj-cycle-track{fill:none;stroke:#c4d5e6;stroke-width:4}
  .nvj-cycle-progress{fill:none;stroke:#2364a8;stroke-width:4;stroke-linecap:round}
  .nvj-cycle-core{fill:#fff;stroke:#dfe7f0;stroke-width:1;filter:drop-shadow(0 8px 10px #1b2a4a08)}
  .nvj-cycle-n{fill:none;stroke:#1b2a4a;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
  .nvj-cycle-brand{text-anchor:middle;fill:var(--ink);font-size:20px;font-weight:750;letter-spacing:-.5px}
  .nvj-cycle-tag{text-anchor:middle;fill:var(--slate);font-size:10px;font-weight:500}
  .nvj-cycle-stage{cursor:pointer;outline:none;touch-action:pan-y}.nvj-cycle-stage text{fill:var(--slate);font-size:12px;font-weight:600}
  .nvj-cycle-node{fill:#f7f7f5;stroke:#8cabc9;stroke-width:1.7}
  .nvj-cycle-stage.is-active text{fill:var(--blue);font-weight:750}
  .nvj-cycle-stage.is-active .nvj-cycle-node{fill:#2364a8;stroke:#2364a8}
  .nvj-cycle-stage.is-reached .nvj-cycle-node{fill:#2364a8;stroke:#2364a8}
  .nvj-cycle-arrow{pointer-events:none;filter:drop-shadow(0 3px 5px #2364a833)}
  .nvj-cycle-arrow circle{fill:#2364a8;stroke:#fff;stroke-width:3}
  .nvj-cycle-arrow path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .nvj-cycle-stage:focus-visible .nvj-cycle-node{stroke:#d4a03c;stroke-width:5}
  .nvj-cycle-marker{fill:#d4a03c;fill-opacity:.22;stroke:#d4a03c;stroke-width:1.5;pointer-events:none}
  #nvj .nvj-cycle-detail{min-height:67px;padding:6px 10px 0;text-align:center}
  #nvj .nvj-cycle-detail b{font:700 12px var(--font);color:var(--blue)}
  #nvj .nvj-cycle-detail p{max-width:31ch;margin:7px auto 0;font:400 13px/1.4 var(--font);color:var(--slate)}
  #nvj .nvj-cycle-hint{margin:7px 0 0;font:500 10px var(--font);color:#64738a;letter-spacing:.02em}
  #nvj .nvj-flow-arcs{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  #nvj .nvj-flow-hub{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--ink);font:700 12px var(--font)}
  #nvj .nvj-flow-hub>svg{width:48px;height:48px;padding:10px;box-sizing:content-box;border:1px solid #dfe7f0;border-radius:20px;background:#ffffffd9;box-shadow:0 10px 26px -16px #2364a845}
  #nvj .nvj-flow-steps{position:absolute;bottom:0;left:0;right:0}
  #nvj .nvj-flow-steps li{font-size:11px}
  #nvj .nvj-simple-learn{position:relative;top:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px;font:600 14px var(--font);color:var(--ink);text-decoration:none}
  #nvj .nvj-simple-learn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  #nvj .nvj-simple-learn:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:8px}
  #nvj .nvj-simple-eyebrow{margin-bottom:28px;font-size:15px;letter-spacing:.13em}
  #nvj .nvj-eyebrow-category{display:block;margin-top:4px}
  #nvj #nvj-simple-title{font-size:clamp(22px,7.2vw,48px);line-height:1.15}
  #nvj .nvj-title-business{display:none}
  #nvj .nvj-simple-sub{margin:24px 0 22px;font-size:18px}
  #nvj .nvj-simple-sub>.nvj-sub-full{display:none}
  #nvj .nvj-simple-sub>.nvj-sub-mobile{display:block}
}
.mh{display:none}
@media(max-width:700px){
  #nvj .nvj-story,#nvj .nvj-static{display:none!important}
  #nvj .mh{display:block;padding:calc(88px + env(safe-area-inset-top,0px)) 24px 30px;background:radial-gradient(ellipse at 100% 60%,#e5edf6,transparent 65%);color:#101935}
  .mh-eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 18px;font:700 9px var(--ui);letter-spacing:.14em;color:#496787}
  .mh-eyebrow>span{width:6px;height:6px;border-radius:50%;background:#357966}
  #nvj .mh h1{margin:0;font:600 clamp(32px,8.6vw,42px)/1.07 var(--font);letter-spacing:-.045em}
  .mh h1>span{color:#2867a7}
  .mh-intro{margin:16px 0 20px;font:400 14px/1.55 var(--ui);color:#606c82}
  #nvj .mh-demo{display:flex;align-items:center;justify-content:space-between;gap:32px;min-height:48px;padding:0 20px;border:1px solid #c49642;border-radius:12px;background:#101935;color:#fff;font:600 14px var(--ui);cursor:pointer}
  .mh-demo>span{font-size:21px}
  .mh-preview{margin-top:28px;padding:13px;border:1px solid #dbe2ec;border-radius:20px;background:#edf1f6;box-shadow:0 20px 40px -30px #17274466}
  .mh-preview-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 13px}
  .mh-preview-head>b{display:flex;align-items:center;gap:7px;font:650 11px var(--ui)}
  .mh-preview-head i{display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:#101935;color:#fff;font:700 15px var(--font);font-style:normal}
  .mh-preview-head>span{font:650 7px var(--ui);letter-spacing:.09em;color:#738099}
  .mh-card{padding:16px;border:1px solid #e0e5ee;border-radius:13px;background:#fff}
  .mh-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .mh-attention{font:650 10px var(--ui);color:#946322}.mh-number{font:500 10px var(--ui);color:#949eb0}
  #nvj .mh-card h2{margin:13px 0 4px;font:650 21px/1.2 var(--font);letter-spacing:-.025em}
  .mh-context{margin:0;font:400 10px/1.5 var(--ui);color:#7d889c}
  .mh-person{display:flex;align-items:center;gap:9px;padding:15px 0;margin-top:9px;border-top:1px solid #eff1f5}
  .mh-person>span{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#e9eefb;color:#386baa;font:700 9px var(--ui)}
  .mh-person p,.mh-follow p{margin:0}.mh-person b,.mh-follow b{display:block;font:600 10.5px/1.5 var(--ui)}
  .mh-person small,.mh-follow small{display:block;font:400 10px/1.5 var(--ui);color:#78849a}
  #nvj .mh-card button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:42px;padding:0 13px;border:1px solid #cbd9ee;border-radius:8px;background:#eef4fb;color:#215d9b;font:650 12px var(--ui);cursor:pointer}
  #nvj .mh-card.approved button{background:#e6f3ed;border-color:#c8e3d4;color:#267555;cursor:default}
  .mh-result{min-height:24px;margin:9px 0 0;font:400 9px/1.4 var(--ui);color:#8892a4}
  .mh-follow{display:flex;align-items:center;gap:9px;padding:13px 4px 1px}.mh-follow>span{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:#dfebe5;color:#30775c;font-size:12px}
  .mh-next{display:flex;align-items:center;justify-content:space-between;padding:18px 2px 0;color:#637088;font:600 11px var(--ui);text-decoration:none}
  .mh button:focus-visible,.mh a:focus-visible{outline:2px solid #2867a7;outline-offset:4px}
}
.rv{position:relative;padding:clamp(64px,11svh,130px) var(--gutter) clamp(72px,11svh,130px);background:var(--bg);overflow:hidden}
@media(max-width:700px){.rv{padding-top:86px;padding-bottom:48px}.rv-sub{max-width:20em;margin-inline:auto;font-size:15px}.rv-stage{margin-top:22px}}
.rv-head{text-align:center;opacity:calc(.15 + var(--p,1)*.85);transform:translateY(calc((1 - var(--p,1))*28px))}
.rv-title{margin:0;font:600 clamp(28px,2.8vw,40px)/1.1 var(--font);letter-spacing:-.04em;color:var(--ink)}
.rv-trademark{margin-left:.1em;font-size:.28em;font-weight:500;line-height:0;vertical-align:super;letter-spacing:0}
.rv-sub{margin:clamp(10px,1.6svh,16px) 0 0;font:500 clamp(16px,1.4vw,20px)/1.4 var(--font);color:var(--slate)}
.rv-sub.rv-byline{max-width:none;margin-top:8px;font-size:clamp(14px,1.25vw,18px);font-weight:400;line-height:1.3}
.rv-product-copy{max-width:24ch;margin:28px 0 0;color:#536079;font:500 clamp(15px,1.35vw,19px)/1.5 var(--font)}
.rv-stage{--pw:200px;--pg:40px;position:relative;max-width:1280px;margin:clamp(30px,5.5svh,60px) auto 0;transform-origin:50% 0;
  transform:perspective(1800px) translateY(calc((1 - var(--p,1))*14svh)) rotateX(calc((1 - var(--p,1))*16deg)) scale(calc(.9 + var(--p,1)*.1));opacity:calc(.3 + var(--p,1)*.7);will-change:transform}
/* phones and tablets: two badges above the iPad, two below */
.rv-stage:not(.side){display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"tl tr" "dev dev" "bl br";gap:18px 10px;align-items:center}
.rv-stage:not(.side) .rvd{grid-area:dev;justify-self:center}
.rv-tl{grid-area:tl}.rv-tr{grid-area:tr}.rv-bl{grid-area:bl}.rv-br{grid-area:br}
.rv-stage:not(.side) .rv-tl,.rv-stage:not(.side) .rv-bl{justify-self:end}
.rv-stage:not(.side) .rv-tr,.rv-stage:not(.side) .rv-br{justify-self:start}
/* laptops: badges beside it, placed by JS level with their target */
.rv-stage.side .rv-pill{position:absolute;left:0;top:0}
.rv-stage.side:not([data-laid]) .rv-pill{visibility:hidden}

/* the iPad */
.rvd{position:relative;container-type:inline-size;width:min(760px,100%,calc((100svh - 300px)*1.42))}
.rv-stage.side .rvd{width:min(820px,calc(100% - 2*(var(--pw) + var(--pg))),calc((100svh - 190px)*1.4));margin:0 auto}
.rvd.port{width:min(100%,304px,calc((100svh - 315px)*.64))}
.rvd::after{content:'';position:absolute;z-index:-1;left:7%;right:7%;bottom:-5cqw;height:8cqw;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,#10193547,#10193500)}
.rvd-body{position:relative;padding:.24cqw;border-radius:4.1cqw;background:linear-gradient(155deg,#f1f2f5 0%,#bcc0c8 16%,#8f949e 38%,#cdd0d6 58%,#868b95 80%,#dfe1e6 100%);
  box-shadow:inset 0 .14cqw 0 #ffffffc0,inset 0 0 0 .08cqw #6b707a,0 1.4cqw 2.4cqw -1.2cqw #10193552,0 6cqw 10cqw -5cqw #10193585}
/* volume buttons on the top edge, the top button on the left edge (landscape, camera on the long edge) */
.rvd-body::before{content:'';position:absolute;top:-.3cqw;left:10%;width:4.4cqw;height:.36cqw;border-radius:.5cqw .5cqw 0 0;background:linear-gradient(#c9ccd2,#8c919a);box-shadow:5.4cqw 0 0 #a3a7af}
.rvd-body::after{content:'';position:absolute;left:-.36cqw;top:9%;width:.44cqw;height:4.4cqw;border-radius:.5cqw 0 0 .5cqw;background:linear-gradient(90deg,#d6d9de,#8c919a)}
.rvd-bez{position:relative;padding:.72cqw;border-radius:3.9cqw;background:#06070a;box-shadow:inset 0 0 0 .12cqw #292c33,inset 0 0 0 .2cqw #000}
.rvd-cam{position:absolute;z-index:8;left:50%;top:.18cqw;width:.42cqw;height:.42cqw;margin-left:-.21cqw;border-radius:50%;background:radial-gradient(circle at 36% 34%,#6f83ad 0 12%,#202636 34%,#090a0d 70%);box-shadow:0 0 0 .08cqw #17191f}
.rvd-scr{position:relative;aspect-ratio:840/584;overflow:hidden;border-radius:3.15cqw;background:#f5f6f9;box-shadow:0 0 0 .08cqw #000}
.rvd-glare{position:absolute;inset:0;z-index:7;pointer-events:none;border-radius:inherit;background:linear-gradient(118deg,#ffffff4d 0%,#ffffff14 30%,#ffffff00 46%)}
.rvd.port .rvd-body{border-radius:6.2cqw;padding:.38cqw}
.rvd.port .rvd-body::before{top:-.62cqw;left:auto;right:12%;width:9cqw;height:.74cqw;box-shadow:none}
.rvd.port .rvd-body::after{left:auto;right:-.62cqw;top:12%;width:.74cqw;height:8cqw;border-radius:0 .6cqw .6cqw 0;background:linear-gradient(90deg,#8c919a,#d6d9de);box-shadow:0 10cqw 0 #9fa3ac}
.rvd.port .rvd-bez{border-radius:5.8cqw;padding:1.2cqw}
.rvd.port .rvd-cam{top:.34cqw;width:.72cqw;height:.72cqw;margin-left:-.36cqw}
.rvd.port .rvd-scr{aspect-ratio:420/604;border-radius:4.9cqw}

/* the badges */
.rv-pill{position:relative;z-index:3;display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:4px 6px;border:0;border-radius:0;background:transparent;color:#536079;font:650 12px/1.2 var(--ui);letter-spacing:.01em;white-space:nowrap;cursor:pointer;overflow:visible;box-shadow:none;transition:color .35s,transform .35s var(--ease)}
.rv-pill:hover{color:var(--blue);transform:translateY(-1px);box-shadow:none}
.rv-pill:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.rv-pill-i{display:grid;place-items:center;flex:none;width:25px;height:25px;border:1px solid #d4e0ec;border-radius:50%;background:#f8fbfe;color:var(--blue);transition:background .4s,color .4s,border-color .4s}
.rv-pill-i .ico{width:13px;height:13px;stroke-width:1.9}
.rv-pill.on{background:transparent;color:var(--ink);box-shadow:none}
.rv-pill.on .rv-pill-i{border-color:#6ca2d7;background:#e8f2fb;color:var(--blue);box-shadow:0 0 0 5px #2b70b20b}
.rv-pill-bar{position:absolute;left:47px;right:18px;bottom:5px;height:2px;border-radius:2px;background:#ffffff26;opacity:0;transition:opacity .3s}
.rv-pill-bar::after{content:'';display:block;width:100%;height:100%;border-radius:inherit;background:#ffffffb8;transform:scaleX(0);transform-origin:left}
.rv-pill.on .rv-pill-bar{opacity:1}
.rv-stage.run .rv-pill.on .rv-pill-bar::after{animation:rv-bar 5.2s linear both}
@keyframes rv-bar{to{transform:scaleX(1)}}
@media(max-width:1179px){.rv-pill{font-size:13.5px;padding:6px 15px 6px 6px;gap:8px}.rv-pill-i{width:26px;height:26px}.rv-pill-i .ico{width:14px;height:14px}.rv-pill-bar{left:40px;right:15px;bottom:4px}}
@media(max-width:700px){.rv-stage:not(.side){gap:14px 8px}.rv-pill{font-size:12.5px;padding:5px 12px 5px 5px;gap:7px}.rv-pill-i{width:22px;height:22px}.rv-pill-i .ico{width:12px;height:12px}.rv-pill-bar{left:34px;right:12px;bottom:3px}}
@media(max-width:340px){.rv-pill{white-space:normal;text-align:left}}

/* the strings: faint dotted ones to every feature (laptop), the live one drawn in blue with a pulsing end */
.rv-lines{position:absolute;left:0;top:0;z-index:2;overflow:visible;pointer-events:none}
.rv-ln{fill:none;stroke:#6993bd;stroke-opacity:.25;stroke-width:1.05;stroke-linecap:round;transition:opacity .3s}
.rv-dt circle{fill:#fff;stroke:var(--ink);stroke-opacity:.32;stroke-width:1.2}
.rv-ln.on,.rv-dt.on{opacity:0}
.rv-stage:not(.side) .rv-ln,.rv-stage:not(.side) .rv-dt{display:none}
@media(max-width:1179px){.rv-lines{display:none}}
.rv-act-h{fill:none;stroke:#fff;stroke-opacity:.9;stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.rv-act{fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.rv-end-d{fill:var(--blue);stroke:#fff;stroke-width:2}
.rv-end-r{fill:none;stroke:var(--blue);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:rv-ring 1.8s ease-out infinite}
@keyframes rv-ring{from{transform:scale(.4);opacity:.9}to{transform:scale(1.5);opacity:0}}
.rv-stage:not(.live) .rv-act,.rv-stage:not(.live) .rv-act-h,.rv-stage:not(.live) .rv-end{opacity:0}

/* ---- the Navio OS screen: laid out at 840×584 (420×604 upright on phones) and scaled to the glass ---- */
.rv-canvas{position:absolute;left:0;top:0;width:840px;height:584px;transform-origin:0 0;transform:scale(var(--k,1));font-family:var(--ui);color:#101935;-webkit-font-smoothing:antialiased}
.rv-canvas.port{width:420px;height:604px}
.rv-canvas *{box-sizing:border-box}
.rvs{position:absolute;inset:0;display:grid;grid-template-columns:158px 1fr;background:#f5f6f9;font:400 12px/1.35 var(--ui);color:#101935}

/* Product reveal: the software itself is the hero. No tablet hardware and no
   floating feature pills; the Navio workspace opens directly in the page. */
.rv .rv-pill,.rv .rv-lines{display:none!important}
.rvs p{margin:0}
.rvs .ico{width:15px;height:15px;flex:none}
.rvs-side{display:flex;flex-direction:column;gap:2px;padding:18px 12px 14px;background:#fff;border-right:1px solid #eceef3}
.rvs-brand{display:flex;align-items:center;gap:9px;padding:0 6px 54px;font:700 14.5px var(--font);letter-spacing:-.01em}
.rvs-brand b{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#101935;color:#fff;font:700 16px/1 NuvenaRound,var(--font)}
.rvs-nav{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.rvs-nav li{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:9px;font:500 12.5px var(--ui);color:#5b6480}
.rvs-nav li.on{background:#eef2f9;color:#101935;font-weight:600}
.rvs-nav li.on .ico{color:var(--blue)}
.rvs-nav em{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--rose);color:#fff;font:700 10px/18px var(--ui);font-style:normal;text-align:center;transition:transform .4s var(--ease),opacity .3s}
.rvs.a2 .rvs-nav em{transform:scale(0);opacity:0}
.rvs-me{display:flex;align-items:center;gap:9px;margin-top:auto;padding:12px 6px 0;border-top:1px solid #eef0f4}
.rvs-me p{display:flex;flex-direction:column}
.rvs-me b{font:600 12px var(--ui)}
.rvs-me small{font:500 10.5px var(--ui);color:#8a92a8}
.rvs-av{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#e9e4f6;color:#6a4fb8;font:700 10.5px var(--ui)}
.rvs-av.s{width:22px;height:22px;font-size:8.5px}
.rvs-av.c0{background:#efe9fb;color:#6a4fb8}.rvs-av.c1{background:#e6eef9;color:#2364a8}.rvs-av.c2{background:#fbe8ef;color:#c8326a}.rvs-av.c3{background:#e5f4ec;color:#2f8a5f}.rvs-av.c4{background:#fbf0de;color:#a8660b}
.rvs-main{position:relative;display:flex;flex-direction:column;gap:13px;min-width:0;padding:18px 22px}
.rvs-hd{display:flex;align-items:center;gap:10px}
.rvs-hi{flex:1;min-width:0}
.rvs-hi h4{margin:0;font:650 19px/1.2 var(--font);letter-spacing:-.02em}
.rvs-hi small{font:500 11.5px var(--ui);color:#8a92a8}
.rvs-bell{position:relative;display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #e6e9f1;color:#5b6480}
.rvs-bell i{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 2px #fff}
.rvs-new{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:9px;background:#101935;color:#fff;font:600 12px var(--ui)}
/* Ask Navio AI: the question types itself, the answer drops in under it */
.rvs-ask{position:relative;z-index:4;display:flex;align-items:center;height:42px;padding:0 8px 0 7px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #e3def3,0 6px 18px -12px #6a4fb866;transition:box-shadow .3s}
.rvs-ask .ai-mark{width:28px;height:28px;border-radius:8px}.rvs-ask .ai-mark svg{width:16px;height:16px}
.rvs-ask-ph,.rvs-ask-q{position:absolute;left:46px;top:50%;margin-top:-9px;font:500 13px/18px var(--ui);white-space:nowrap;transition:opacity .25s}
.rvs-ask-ph{color:#9aa1b4}
.rvs-ask-q{opacity:0;color:#101935}
.rvs-ask-q::after{content:'';display:inline-block;width:1.5px;height:15px;margin-left:2px;vertical-align:-3px;background:var(--violet);animation:rvs-blink 1s steps(2,start) infinite}
.rvs-ask kbd{margin-left:auto;padding:3px 7px;border-radius:6px;background:#f2f3f7;font:600 10.5px var(--ui);color:#8a92a8}
.rvs.ans .rvs-ask{box-shadow:0 0 0 1.5px #9a86da,0 8px 22px -12px #6a4fb899}
.rvs.ans .rvs-ask-ph{opacity:0}
.rvs.ans .rvs-ask-q{opacity:1;animation:rvs-type .8s linear both}
.rvs-ans{position:absolute;left:0;top:calc(100% + 8px);width:410px;padding:14px 16px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px #e8e4f5,0 24px 46px -22px #10193580;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top left;transition:opacity .3s,transform .4s var(--ease);pointer-events:none}
.rvs.ans .rvs-ans{opacity:1;transform:none;transition-delay:.85s}
.rvs-ans-h{display:flex;align-items:center;gap:7px;font:600 12px var(--ui)}
.rvs-ans-h .ai-mark{width:18px;height:18px;border-radius:6px}.rvs-ans-h .ai-mark svg{width:11px;height:11px}
.rvs-ans-h small{margin-left:auto;font:500 10.5px var(--ui);color:#9aa1b4}
.rvs-ans-t{margin-top:8px!important;font:500 13px/1.5 var(--ui);color:#2a3350}
.rvs-ans-l{display:flex;gap:8px;margin-top:10px!important}
.rvs-ans-l span{padding:5px 10px;border-radius:8px;background:#f1eefa;color:#5a3fa6;font:600 11px var(--ui)}
.rvs.ans .rvs-ans-t{animation:rvs-in .5s var(--ease) 1.05s both}
.rvs.ans .rvs-ans-l{animation:rvs-in .5s var(--ease) 1.3s both}
/* the four numbers */
.rvs-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rvs-kpis>div{position:relative;padding:11px 13px 12px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #e8eaf1;transition:box-shadow .5s}
.rvs-kpis small{display:block;font:500 11px var(--ui);color:#7a839a;white-space:nowrap}
.rvs-kpis b{display:block;margin-top:5px;font:700 24px/1 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rvs-kpis .risk b{color:var(--rose)}
.rvs-kpis .done b{color:#2f9e6a}
.rvs-kpis em{position:absolute;right:11px;bottom:12px;padding:2px 7px;border-radius:7px;background:#e6f5ee;color:#2f9e6a;font:700 10px var(--ui);font-style:normal;opacity:0;transform:translateY(4px);transition:opacity .35s,transform .4s var(--ease)}
.rvs.a3 .rvs-kpis em{opacity:1;transform:none}
.rvs.a3 .rvs-kpis .done{box-shadow:0 0 0 1.5px #8fd1b2,0 8px 20px -12px #2f9e6a80}
/* cards */
.rvs-grid{flex:1;min-height:0;display:grid;grid-template-columns:214px 1fr;gap:12px}
.rvs-col{display:flex;flex-direction:column;gap:12px;min-height:0}
.rvs-card{position:relative;padding:12px 14px;border-radius:13px;background:#fff;box-shadow:0 0 0 1px #e8eaf1}
.rvs-ct{display:flex;align-items:center;gap:7px;margin-bottom:9px!important;font:650 12.5px var(--ui)}
.rvs-ct em{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#fdecf2;color:var(--rose);font:700 10px/18px var(--ui);font-style:normal;text-align:center;transition:background .4s,color .4s}
.rvs.a2 .rvs-ct em{background:#eef0f4;color:#8a92a8}
.rvs-ct small{margin-left:auto;font:500 10.5px var(--ui);color:#9aa1b4}
.rvs-ct .rvs-all{margin-left:auto;font:600 11px var(--ui);color:var(--blue)}
.rvs-sw{display:inline-grid;vertical-align:middle}
.rvs-sw>span{grid-area:1/1;display:inline-flex;align-items:center;gap:5px;transition:opacity .35s ease,transform .45s var(--ease)}
.rvs-sw>.y{opacity:0;transform:translateY(6px)}
.rvs.a1 .sw1>.x,.rvs.a2 .sw2>.x,.rvs.a3 .sw3>.x{opacity:0;transform:translateY(-6px)}
.rvs.a1 .sw1>.y,.rvs.a2 .sw2>.y,.rvs.a3 .sw3>.y{opacity:1;transform:none}
.rvs-need-t{display:block;font:650 14px/1.25 var(--font)}
.rvs-need-b>small{display:block;margin-top:3px;font:500 11px var(--ui);color:#7a839a}
.rvs-by{display:grid;margin:10px 0 11px;font:500 11px var(--ui);color:#5b6480}
.rvs-by>span{gap:7px;height:22px}
.rvs-by>.y{color:#2f9e6a;font-weight:600}
.rvs-by .ico{width:13px;height:13px;stroke-width:2.4}
.rvs-ap{display:grid;width:100%;height:34px;border-radius:10px;background:#101935;color:#fff;font:600 12.5px var(--ui);transition:background .45s}
.rvs-ap>span{justify-content:center;gap:6px}
.rvs-ap .ico{width:14px;height:14px;stroke-width:2.6}
.rvs.a2 .rvs-ap{background:#2f9e6a}
.rvs-chart{flex:1;display:flex;flex-direction:column;min-height:0}
.rvs-chart svg{display:block;width:100%;height:auto;margin-top:auto;overflow:visible}
.rvs-chart .ar{fill:url(#rvs-g);opacity:0;transition:opacity 1s ease .9s}
.rvs-chart .ln{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.rvs-chart .pt{fill:var(--blue);stroke:#fff;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .3s 1.6s}
.rvs.run .rvs-chart .ar,.rvs.still .rvs-chart .ar,.rvs.run .rvs-chart .pt,.rvs.still .rvs-chart .pt{opacity:1}
.rvs.run .rvs-chart .ln{animation:rvs-draw 1.6s var(--ease) .4s both}
.rvs.still .rvs-chart .ln{stroke-dashoffset:0}
.rvs.a3 .rvs-chart .pt{animation:rvs-pop .7s cubic-bezier(.3,1.6,.5,1)}
.rvs-mo{display:flex;justify-content:space-between;margin-top:6px!important;font:500 9.5px var(--ui);color:#a3a9ba}
.rvs-pr{display:flex;flex-direction:column}
.rvs-r{flex:1;display:grid;grid-template-columns:1fr 84px 104px;align-items:center;gap:8px;min-height:0;border-top:1px solid #f0f1f5}
.rvs-r-t{min-width:0}
.rvs-r-t b{display:block;font:600 12.5px var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvs-r-s{display:block;margin-top:2px;font:500 10.5px var(--ui);color:#8a92a8;white-space:nowrap}
.rvs-sw.rvs-r-s{display:grid}
.rvs-r-s>.y{color:#2f9e6a;font-weight:600}
.rvs-r-s .ico{width:12px;height:12px}
.rvs-o{display:flex;align-items:center;gap:6px;font:500 11.5px var(--ui);color:#3b4460}
.rvs-chip{justify-self:end;display:inline-grid;font:600 10.5px var(--ui)}
.rvs-chip>span{grid-area:1/1;justify-self:end;display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:7px;white-space:nowrap}
.rvs-chip .ico{width:12px;height:12px;stroke-width:2.4}
.k-due{background:#fdf3e2;color:#a8660b}.k-sch{background:#f1f2f6;color:#5b6480}.k-ok{background:#eef2f9;color:#2364a8}.k-sent{background:#e6effb;color:#2364a8}.k-done{background:#e4f4ec;color:#2f8a5f}
.rvs.a1 .sw1.rvs-chip>.y,.rvs.a3 .sw3.rvs-chip>.y{animation:rvs-flash 1s ease .2s}
/* the reminder that went out by itself */
.rvs-toast{position:absolute;right:22px;bottom:18px;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:13px;background:#101935;color:#fff;box-shadow:0 20px 40px -18px #101935b3;opacity:0;transform:translateY(16px) scale(.97);transition:opacity .35s,transform .5s var(--ease);pointer-events:none}
.rvs.toast .rvs-toast{opacity:1;transform:none}
.rvs-toast-i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#2364a8}
.rvs-toast b{display:block;font:600 12px var(--ui)}
.rvs-toast small{display:block;margin-top:1px;font:500 10.5px var(--ui);color:#b9c0d4}
.rvs.toast .rvs-toast-i .ico,.rvs.toast .rvs-bell .ico{animation:nvn-ring 1.1s ease .25s 1;transform-origin:50% 15%}
/* the pointer (laptop) and the fingertip (phone) */
.rvs-cur{position:absolute;left:0;top:0;z-index:6;width:0;height:0;pointer-events:none;opacity:0;transform:translate(var(--cx,720px),var(--cy,660px));transition:transform 1s cubic-bezier(.5,0,.15,1),opacity .45s ease}
.rvs-cur.on{opacity:1}
.rvs-cur svg{position:absolute;left:-3px;top:-2px;width:22px;height:22px;fill:#101935;stroke:#fff;stroke-width:1.5;stroke-linejoin:round;filter:drop-shadow(0 3px 4px #1019354d)}
.rvs-cur::after{content:'';position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;background:#2364a838;opacity:0}
.rvs-cur.press::after{animation:rvs-press .7s ease-out both}
.rvs-cur.press svg{animation:rvs-click .3s ease both}
.rvs.port .rvs-cur::before{content:'';position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;background:#ffffffa8;box-shadow:0 0 0 1.5px #10193533,0 8px 18px -8px #10193599}
.rvs.port .rvs-cur.press::before{animation:rvs-click .3s ease both}
@keyframes rvs-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -4px 0 0)}}
@keyframes rvs-blink{50%{opacity:0}}
@keyframes rvs-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes rvs-press{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.9)}}
@keyframes rvs-click{50%{transform:scale(.8)}}
@keyframes rvs-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes rvs-flash{0%{box-shadow:0 0 0 0 #2364a855}100%{box-shadow:0 0 0 8px #2364a800}}
@keyframes rvs-pop{0%{transform:scale(1)}40%{transform:scale(1.9)}100%{transform:scale(1)}}
/* upright on phones: no sidebar, the brand on top, the same parts in one column */
.rvs.port{grid-template-columns:1fr}
.rvs.port .rvs-main{gap:11px;padding:14px 16px 16px}
.rvs-top{display:flex;align-items:center;gap:8px}
.rvs-top .rvs-brand{margin-right:auto;padding:0}
.rvs.port .rvs-ans{width:auto;right:0}
.rvs.port .rvs-kpis{gap:7px}
.rvs.port .rvs-kpis>div{padding:9px 9px 10px}
.rvs.port .rvs-kpis small{font-size:9.5px}
.rvs.port .rvs-kpis b{margin-top:4px;font-size:20px}
.rvs.port .rvs-kpis em{right:7px;bottom:10px;padding:1px 5px;font-size:8.5px}
/* badges above and below (phones, tablets): the approval sits at the foot of its column, so its string comes straight up */
.rvs.stack .rvs-need{order:1}
/* the list first, the approval at the foot of the screen, so every string on a phone has a short, clear way in */
.rvs.port .rvs-grid{grid-template-columns:1fr;grid-template-rows:1fr auto}
.rvs.port .rvs-pr{order:-1}
.rvs.port .rvs-ap{height:38px}
.rvs.port .rvs-toast{left:16px;right:16px;bottom:16px}
.rvs.port .rvs-r{grid-template-columns:1fr 74px 104px}
@media(prefers-reduced-motion:reduce){.rv-head,.rv-stage{transform:none!important;opacity:1!important}.rvs *,.rvs *::before,.rvs *::after{animation:none!important;transition:none!important}.rv-end-r,.rv-pill-bar::after{animation:none!important}}

/* ============ Get the highlights: big cards in a row that plays itself, swipes, and has dots + play/pause like Apple's ============ */
.hl{padding:clamp(48px,9vh,96px) 0 clamp(48px,8vh,88px);background:var(--bg)}
.hl-title{margin:0 0 clamp(22px,4vh,40px);font:600 clamp(34px,4.4vw,60px)/1.05 var(--font);letter-spacing:-.05em;color:var(--ink)}
.hl-row{position:relative;display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(var(--gutter),calc((100vw - 1424px)/2 + var(--gutter)));scroll-padding:0 max(var(--gutter),calc((100vw - 1424px)/2 + var(--gutter)));scrollbar-width:none;overscroll-behavior-x:contain}
.hl-row::-webkit-scrollbar{display:none}
.hl-card{position:relative;flex:0 0 min(84vw,820px);height:clamp(460px,66svh,640px);scroll-snap-align:start;overflow:hidden;border-radius:clamp(22px,2.4vw,32px);background:#fff;box-shadow:0 0 0 1px #e8eaf0;padding:clamp(24px,3.2vw,44px)}
.hl-ai{background:linear-gradient(170deg,#fff 40%,#f1edfb)}.hl-own{background:linear-gradient(170deg,#fff 40%,#eef3fb)}.hl-chase{background:linear-gradient(170deg,#fff 40%,#eef6f1)}
.hl-tap{background:linear-gradient(170deg,#fff 40%,#eef3fb)}.hl-proof{background:linear-gradient(170deg,#fff 40%,#edf6f1)}.hl-view{background:linear-gradient(170deg,#fff 40%,#f3f0fb)}
.hl-cap{position:relative;z-index:1;max-width:32ch;margin:0;font:500 clamp(17px,1.65vw,24px)/1.35 var(--font);letter-spacing:-.02em;color:var(--slate)}
.hl-cap b{color:var(--ink);font-weight:600}
.hl-art{position:absolute;left:0;right:0;bottom:0;top:34%;display:flex;align-items:center;justify-content:center;padding:0 clamp(18px,3vw,48px) clamp(18px,3vw,40px)}
.hl-ctl{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:clamp(18px,3vh,28px)}
.hl-dots{display:flex;align-items:center;gap:10px;height:48px;padding:0 20px;border-radius:99px;background:#e6e8ee}
.hl-dot{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:99px;background:#9aa1b4;overflow:hidden;cursor:pointer;transition:width .4s ease,background .3s}
.hl-dot.on{width:44px;background:#c3c8d6}
.hl-dot i{position:absolute;inset:0;width:0;border-radius:inherit;background:var(--ink)}
.hl.playing .hl-dot.on i{animation:hl-fill 5.5s linear forwards}
.hl:not(.playing) .hl-dot.on i{width:100%}
.hl-play{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:#e6e8ee;color:var(--ink);cursor:pointer}
.hl-play .ico{width:18px;height:18px}
@keyframes hl-fill{from{width:0}to{width:100%}}
/* the six pictures */
.hla-doc{position:relative;width:min(300px,78%)}
.hla-page{display:flex;flex-direction:column;gap:11px;padding:24px 22px;border-radius:16px;background:#fff;box-shadow:0 24px 50px -30px #10193566,0 0 0 1px #eceef4}
.hla-page i{height:8px;border-radius:4px;background:#e9ecf3;width:80%}
.hla-page i:nth-child(2n){width:64%}.hla-page i:nth-child(3n){width:90%}
.hla-page i.hl0,.hla-page i.hl1,.hla-page i.hl2{height:14px;width:94%}
.hla-page i.hl0{background:#2364a833}.hla-page i.hl1{background:#6a4fb833}.hla-page i.hl2{background:#c8326a2e}
.hla-chip{position:absolute;right:-14px;bottom:-16px;display:flex;align-items:center;gap:7px;margin:0;padding:10px 14px;border-radius:99px;background:#fff;box-shadow:0 14px 30px -14px #10193566;font:600 13px var(--ui);color:var(--violet);white-space:nowrap}
.hla-chip .ico{width:15px;height:15px}
.hla-rows{display:flex;flex-direction:column;gap:12px;width:min(420px,100%)}
.hla-row{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:16px;background:#fff;box-shadow:0 14px 30px -22px #10193566,0 0 0 1px #eceef4}
.hla-row>i{width:4px;height:36px;border-radius:2px;flex:none}
.hla-row>i.blue,.hla-row em.blue{background:var(--blue)}.hla-row>i.violet,.hla-row em.violet{background:var(--violet)}.hla-row>i.rose,.hla-row em.rose{background:var(--rose)}
.hla-row>div{flex:1;min-width:0}
.hla-row b{display:block;font:600 15px var(--font);color:var(--ink)}
.hla-row small{display:flex;align-items:center;gap:7px;margin-top:5px;font:500 13px var(--ui);color:var(--slate)}
.hla-row em{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:#fff;font:700 8.5px var(--ui);font-style:normal}
.hla-row span{display:flex;align-items:center;gap:5px;font:500 12.5px var(--ui);color:#737d96;white-space:nowrap}
.hla-row span .ico{width:14px;height:14px}
.hla-chat{display:flex;flex-direction:column;gap:10px;width:min(360px,100%)}
.hla-from{display:flex;align-items:center;gap:6px;margin:0;font:600 12px var(--ui);color:var(--violet)}
.hla-from .ico{width:13px;height:13px}
.hla-b{max-width:86%;padding:12px 15px;border-radius:18px;font:400 14.5px/1.45 var(--ui)}
.hla-b.in{align-self:flex-start;background:#fff;color:var(--ink);border-bottom-left-radius:6px;box-shadow:0 12px 26px -18px #10193566,0 0 0 1px #eceef4}
.hla-b.out{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:6px}
.hla-read{align-self:flex-end;margin:0;font:500 11.5px var(--ui);color:#9aa1b4}
.hla-tap{position:relative;display:grid;place-items:center;width:200px;height:200px}
.hla-btn{position:relative;z-index:1;display:grid;place-items:center;height:64px;min-width:176px;padding:0 30px;border-radius:99px;background:var(--ink);color:#fff;font:600 19px var(--font);box-shadow:0 24px 40px -20px #101935aa}
.hla-btn em{display:none;align-items:center;gap:8px;font-style:normal}
.hla-btn .ico{width:20px;height:20px}
.hla-tap>i{position:absolute;inset:40px;border-radius:50%;border:2px solid var(--blue);opacity:0}
.hla-proof{display:flex;flex-direction:column;align-items:center;gap:0;width:min(360px,100%)}
.hla-file,.hla-clause,.hla-ok{display:flex;align-items:center;gap:9px;margin:0;padding:13px 18px;border-radius:14px;background:#fff;box-shadow:0 14px 30px -22px #10193566,0 0 0 1px #eceef4;font:600 14.5px var(--font);color:var(--ink)}
.hla-file .ico{width:18px;height:18px;color:var(--blue)}
.hla-line{width:2px;height:28px;background:repeating-linear-gradient(#c3c8d6 0 4px,transparent 4px 8px)}
.hla-ok{margin-top:16px;background:#2f9e6a;color:#fff;box-shadow:0 18px 30px -18px #2f9e6aaa}
.hla-ok .ico{width:18px;height:18px}
.hla-view{display:flex;align-items:center;gap:clamp(18px,3vw,36px)}
.hla-ring{position:relative;width:clamp(120px,14vw,160px);aspect-ratio:1}
.hla-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.hla-ring circle{fill:none;stroke:#e6e8ef;stroke-width:9}
.hla-ring circle.on{stroke:var(--blue);stroke-linecap:round;stroke-dasharray:33.3 100}
.hla-ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 clamp(30px,3.4vw,40px) var(--font);color:var(--ink)}
.hla-ring small{font-size:.5em;color:#737d96}
.hla-view ul{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;font:500 14px var(--ui);color:var(--slate)}
.hla-view li b{display:inline-block;min-width:30px;font:700 22px var(--font);color:var(--ink)}
.hla-view li b.ok{color:#2f9e6a}.hla-view li b.blue{color:var(--blue)}
/* each picture plays when its card is the one in view */
@media(prefers-reduced-motion:no-preference){
  .hl-card.on .hla-page i.hl0,.hl-card.on .hla-page i.hl1,.hl-card.on .hla-page i.hl2{animation:hla-lit .6s ease both}
  .hl-card.on .hla-page i.hl1{animation-delay:.35s}.hl-card.on .hla-page i.hl2{animation-delay:.7s}
  .hl-card.on .hla-chip{animation:hla-up .5s ease 1.1s both}
  .hl-card.on .hla-row{animation:hla-in .55s cubic-bezier(.2,.7,.2,1) both}.hl-card.on .hla-row.r1{animation-delay:.2s}.hl-card.on .hla-row.r2{animation-delay:.4s}
  .hl-card.on .hla-b.in{animation:hla-up .5s ease .2s both}.hl-card.on .hla-b.out{animation:hla-up .5s ease 1.2s both}.hl-card.on .hla-read{animation:hla-up .4s ease 1.7s both}
  .hl-card.on .hla-btn b{animation:hla-hide 2.6s ease .2s both}.hl-card.on .hla-btn em{display:inline-flex;position:absolute;animation:hla-show 2.6s ease .2s both}
  .hl-card.on .hla-btn{animation:hla-btn 2.6s ease .2s both}
  .hl-card.on .hla-tap>i{animation:hla-ripple 1.3s ease-out 1s 2}.hl-card.on .hla-tap>i+i{animation-delay:1.25s}
  .hl-card.on .hla-file{animation:hla-up .45s ease .1s both}.hl-card.on .hla-line{animation:hla-grow .45s ease .5s both}.hl-card.on .hla-clause{animation:hla-up .45s ease .8s both}.hl-card.on .hla-ok{animation:hla-pop .5s cubic-bezier(.3,1.6,.5,1) 1.3s both}
  .hl-card.on .hla-ring circle.on{animation:hla-arc 1.2s cubic-bezier(.3,.7,.2,1) .2s both}.hl-card.on .hla-view li{animation:hla-in .5s ease both}.hl-card.on .hla-view li:nth-child(2){animation-delay:.2s}.hl-card.on .hla-view li:nth-child(3){animation-delay:.4s}}
@media(prefers-reduced-motion:reduce){.hla-btn em{display:inline-flex;position:absolute}.hla-btn b{visibility:hidden}.hla-btn{background:#2f9e6a}}
@keyframes hla-lit{from{opacity:.2;transform:scaleX(.3);transform-origin:left}to{opacity:1;transform:none}}
@keyframes hla-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes hla-in{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes hla-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes hla-grow{from{transform:scaleY(0);transform-origin:top}to{transform:none}}
@keyframes hla-ripple{from{opacity:.8;transform:scale(.6)}to{opacity:0;transform:scale(1.5)}}
@keyframes hla-arc{from{stroke-dasharray:0 100}to{stroke-dasharray:33.3 100}}
@keyframes hla-btn{0%,45%{background:#101935;transform:scale(1)}50%{transform:scale(.94)}58%,100%{background:#2f9e6a;transform:scale(1)}}
@keyframes hla-hide{0%,48%{opacity:1}55%,100%{opacity:0}}
@keyframes hla-show{0%,50%{opacity:0}60%,100%{opacity:1}}
@media(max-width:700px){.hl-card{flex-basis:86vw;height:min(520px,72svh)}.hl-art{top:38%}.hl-cap{font-size:17px}}

/* the work band blends in at both edges — no seam where one section meets the next (owner, 7 Oct) */
.bd-right .bd-photo img{-webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 42%),linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(270deg,transparent 0%,#000 42%),linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);mask-composite:intersect}
.bd-photo:after{display:none}
@media(max-width:900px){.bd-right .bd-photo img{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 58%,transparent 100%);-webkit-mask-composite:source-over;mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 58%,transparent 100%);mask-composite:add}}

/* on laptops the pictures fill their big cards */
@media(min-width:901px){.hl-art>*{transform:scale(1.4)}.hl-art{top:30%}}

/* Teams: one useful example at a time, with manually selected accessible tabs. */
.team-work{--font:NuvenaFigtree,Figtree,NuvenaRound,Quicksand,sans-serif;padding:80px 24px;background:var(--bg);color:var(--ink);font-family:var(--font)}
.team-work-inner{max-width:1180px;margin:auto}
.team-work-heading{text-align:center;max-width:900px;margin:0 auto 32px}
.team-work-heading h2{font:700 clamp(34px,3.8vw,54px)/1.12 var(--font);letter-spacing:-.04em}
.team-work-heading h2 span{display:block;color:var(--blue)}
.team-work-heading p{margin:18px 0 0;color:var(--slate);font:400 18px/1.5 var(--font)}
.team-work-tabs{position:relative;display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#cbd5e3 transparent;padding:4px 4px 14px;margin:0 0 14px;overscroll-behavior-x:contain}
.team-work-tabs button{flex:1 0 auto;min-height:44px;padding:0 18px;border:1px solid #dfe3eb;border-radius:999px;background:#fff;color:var(--slate);font:600 14px var(--font);white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.team-work-tabs button:hover{color:var(--ink);border-color:#b5c6dc}
.team-work-tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:inset 0 -2px #d4a03c}
.team-work-panel{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);align-items:center;gap:44px;min-height:360px;padding:36px;border:1px solid #e1e6ee;border-radius:28px;background:linear-gradient(120deg,#fff,#f0f4fa);box-shadow:0 20px 50px -42px #10193555}
.team-work-panel[hidden]{display:none}
.team-work-copy{min-width:0}
.team-work-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:18px;border:1px solid #dce5f0;border-radius:14px;background:#edf3fb;color:var(--blue)}
.team-work-icon .ico{width:23px;height:23px}
.team-work-copy h3{max-width:19ch;font:650 clamp(25px,2.2vw,32px)/1.18 var(--font);letter-spacing:-.035em}
.team-work-copy>p{max-width:36ch;margin:16px 0 0;font:400 16px/1.5 var(--font);color:var(--slate)}
.team-work-next{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:18px;font:600 14px var(--font);color:var(--blue)}
.team-work-next .ico{width:17px;height:17px;transition:transform .2s}
.team-work-next:hover .ico{transform:translateX(3px)}
.team-work-preview{min-width:0;overflow:hidden;border:1px solid #e1e5ed;border-radius:20px;background:#fff;box-shadow:0 20px 36px -28px #1b2a4a55}
.team-work-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;border-bottom:1px solid #e9edf3;background:#fafbfd}
.team-work-preview-head>span{display:flex;align-items:center;gap:9px;font:650 13px var(--font)}
.team-work-preview-head .n-mark{width:22px;height:22px}
.team-work-preview-head small{font:400 11px var(--font);color:var(--slate)}
.team-work-record{padding:23px 22px 0}
.team-work-record h4{font:650 18px/1.3 var(--font);letter-spacing:-.015em}
.team-work-record p{display:flex;align-items:center;gap:7px;margin-top:8px;font:400 12px var(--font);color:var(--slate)}
.team-work-record .ico{width:14px;height:14px}
.team-work-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:24px 22px;padding:0;list-style:none}
.team-work-steps li{position:relative;min-width:0}
.team-work-steps li:not(:last-child)::after{content:'';position:absolute;top:16px;left:40px;width:calc(100% - 36px);height:1px;background:#b8cce3}
.team-work-steps li>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#edf3fb;border:1px solid #d7e4f4;font:600 11px var(--font);color:var(--blue)}
.team-work-steps li:last-child>span{background:#edf7f1;border-color:#cfe8da;color:#26724f}
.team-work-steps .ico{width:16px;height:16px}
.team-work-steps b{display:block;margin-top:9px;font:500 12px/1.4 var(--font)}
.team-work-proof{display:flex;align-items:center;gap:8px;margin:0 22px 22px;padding:12px;border-radius:10px;background:#f5f8fb;color:var(--slate);font:400 11px/1.4 var(--font)}
.team-work-proof>.ico{flex:none;width:16px;height:16px;color:var(--blue)}
.team-work-complete{display:inline-flex;align-items:center;gap:4px;margin-left:auto;white-space:nowrap;color:#26724f;font-weight:600}
.team-work-complete .ico{width:13px;height:13px}
@media(min-width:701px) and (max-width:1000px){.team-work-panel{gap:24px;padding:26px;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.team-work-steps{gap:8px;margin-inline:16px}.team-work-tabs button{padding-inline:15px}}
@media(max-width:700px){
 .team-work{padding:46px 20px}
 .team-work-heading{margin-bottom:24px}
 .team-work-heading h2{font-size:clamp(28px,7.3vw,36px)}
 .team-work-heading p{max-width:29ch;margin:14px auto 0;font-size:15px}
 .team-work-tabs{margin-right:-20px;padding-right:20px;gap:8px}
 .team-work-tabs button{flex:0 0 auto;padding-inline:17px;font-size:13px}
 .team-work-panel{grid-template-columns:minmax(0,1fr);min-height:0;gap:22px;padding:22px 16px 16px;border-radius:22px}
 .team-work-icon{display:none}
 .team-work-copy h3{max-width:23ch;font-size:24px}
 .team-work-copy>p{margin-top:10px;font-size:14px}
 .team-work-next{margin-top:8px;font-size:13px}
 .team-work-preview{border-radius:16px}
 .team-work-preview-head{padding:12px}.team-work-preview-head small{font-size:9px}
 .team-work-record{padding:16px 14px 0}.team-work-record h4{font-size:16px}
 .team-work-steps{grid-template-columns:minmax(0,1fr);gap:0;margin:16px 14px}
 .team-work-steps li{display:flex;align-items:center;gap:12px;padding-bottom:14px}
 .team-work-steps li:last-child{padding-bottom:0}
 .team-work-steps li>span{flex:none;width:28px;height:28px;font-size:10px}
 .team-work-steps li:not(:last-child)::after{left:13.5px;top:30px;width:1px;height:10px}
 .team-work-steps b{margin:0;font-size:12px}
 .team-work-proof{margin:0 12px 12px;padding:10px 8px;gap:6px;font-size:10px}}

/* Team stories: contained desktop gestures, a touch-first card deck on smaller screens. */
.team-stories{padding:56px 24px 64px}
.team-stories .team-work-heading{margin-bottom:28px}
.team-stories .team-work-heading h2{font-size:clamp(32px,3.5vw,48px)}
.team-desktop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);min-height:390px;height:clamp(390px,calc(100svh - 330px - var(--ck-h,0px)),560px);border:1px solid #e1e6ee;border-radius:30px;background:#fff;overflow:hidden;box-shadow:0 24px 60px -48px #1b2a4a50}
.team-sidebar{min-width:0;display:flex;flex-direction:column;padding:30px 32px 20px}
.team-selectors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:26px}
.team-selectors button{min-height:40px;padding:6px 8px;border:1px solid #e0e5ed;border-radius:999px;background:#f8f9fb;font:600 12px var(--font);color:var(--slate)}
.team-selectors button:hover{border-color:#9cb5d3;color:var(--blue)}
.team-selectors button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:inset 0 -2px #d4a03c}
.team-story-copy{margin:auto 0;min-width:0}
.team-story-copy h3{font:700 clamp(30px,3vw,42px)/1.1 var(--font);letter-spacing:-.035em;color:var(--blue)}
.team-story-copy h4{margin:14px 0 0;font:650 clamp(19px,1.7vw,24px)/1.25 var(--font);letter-spacing:-.02em}
.team-story-copy p{max-width:38ch;margin:12px 0 0;font:400 16px/1.55 var(--font);color:var(--slate)}
.team-scroll-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:24px;color:var(--slate);font:500 11px var(--font)}
.team-scroll-footer>span{display:flex;align-items:center;gap:7px}
.team-scroll-footer>span .ico{width:14px;height:14px;transform:rotate(180deg)}
.team-desktop-controls{display:flex;align-items:center;gap:8px;white-space:nowrap}
.team-desktop-controls button,.team-deck-controls button{display:grid;place-items:center;width:40px;height:40px;border:1px solid #dce3ed;border-radius:50%;background:#fff;color:var(--ink)}
.team-desktop-controls button:disabled{opacity:.3}
.team-desktop-controls button:last-child .ico{transform:rotate(180deg)}
.team-desktop-controls .ico{width:16px;height:16px}
.team-desktop-visual{min-width:0;height:100%;overflow:hidden;border-left:1px solid #e4e8ef}
.team-photo-frame{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate;background:#e0e8ef;container-type:size}
.team-photo{position:absolute;top:50%;left:50%;width:max(100cqw,100cqh);height:max(100cqw,100cqh);transform:translate(-50%,-50%);background-image:url('/people/team-stories-atlas.png');background-size:300% 300%;background-position:var(--photo-x) var(--photo-y);background-repeat:no-repeat}
.team-photo-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#10193508 40%,#101935b8 100%);pointer-events:none}
.team-photo-label{position:absolute;z-index:1;top:22px;left:22px;display:flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid #ffffffaa;border-radius:999px;background:#ffffffeb;color:var(--ink);font:600 12px var(--font)}
.team-photo-label .ico{width:15px;height:15px;color:var(--blue)}
.team-photo-caption{position:absolute;z-index:1;bottom:28px;left:28px;right:24px;color:#fff}
.team-photo-caption small{display:block;margin-bottom:8px;font:500 10px var(--font);letter-spacing:.1em;text-transform:uppercase;color:#e0e8f4}
.team-photo-caption>span{font:600 23px/1.2 var(--font);letter-spacing:-.02em}
.team-mobile{display:none}
@media(prefers-reduced-motion:no-preference){
 .team-story-copy,.team-desktop-visual{animation:team-story-enter .45s var(--ease) both}}
@keyframes team-story-enter{from{opacity:.35;translate:0 10px}to{opacity:1;translate:0 0}}
@media(min-width:901px) and (max-width:1100px){.team-sidebar{padding:24px 22px 18px}.team-selectors{gap:6px;margin-bottom:18px}.team-selectors button{font-size:11px}.team-scroll-footer>span{max-width:90px;line-height:1.4}.team-story-copy p{font-size:15px}}
@media(min-width:901px) and (max-height:850px){
 .team-sidebar{padding:20px 26px 16px}.team-selectors{gap:6px;margin-bottom:16px}.team-selectors button{min-height:34px}
 .team-story-copy h3{font-size:32px}.team-story-copy h4{margin-top:10px;font-size:20px}.team-story-copy p{margin-top:8px;font-size:15px}
 .team-scroll-footer{margin-top:12px}.team-desktop-controls button{width:36px;height:36px}}
@media(max-width:900px){
 .team-stories{padding:42px 24px 40px;overflow:hidden}
 .team-stories .team-work-heading{margin-bottom:44px}
 .team-stories .team-work-heading h2{font-size:clamp(27px,6.9vw,40px)}
 .team-stories .team-work-heading p{max-width:29ch;margin:14px auto 0;font-size:15px}
 .team-desktop{display:none}.team-mobile{display:block;max-width:440px;margin:auto}
 .team-card-deck{display:grid;position:relative;isolation:isolate;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
 .team-story-card{grid-area:1/1;position:relative;z-index:calc(3 - var(--stack));border:1px solid #dce4ef;border-radius:24px;background:#fff;overflow:hidden;transform:translate(calc(var(--stack)*7px),calc(var(--stack)*-13px)) scale(calc(1 - var(--stack)*.035));transform-origin:50% 0;box-shadow:0 18px 35px -28px #1b2a4a66;transition:transform .3s var(--ease),opacity .3s}
 .team-story-card[aria-hidden=true]{pointer-events:none;filter:saturate(.65);opacity:.8}
 .team-story-card[data-front=true]{transform:translateX(var(--drag-x,0px));opacity:1}
 .team-card-deck.is-dragging{cursor:grabbing}.team-card-deck.is-dragging .team-story-card[data-front=true]{transition:none}
 .team-story-card .team-photo-frame{height:clamp(175px,52vw,235px)}
 .team-story-card .team-photo-label{top:16px;left:16px;font-size:11px;padding:8px 12px}
 .team-story-card .team-photo-caption{left:18px;bottom:18px;right:18px}
 .team-story-card .team-photo-caption small{display:none}.team-story-card .team-photo-caption>span{font-size:18px}
 .team-card-copy{padding:22px;min-height:214px}
 .team-card-copy h3{font:700 26px/1.1 var(--font);letter-spacing:-.03em;color:var(--blue)}
 .team-card-copy h4{margin:12px 0 0;font:650 18px/1.3 var(--font);letter-spacing:-.02em}
 .team-card-copy p{margin:10px 0 0;font:400 14px/1.5 var(--font);color:var(--slate)}
 .team-deck-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:22px}
 .team-deck-controls button{width:44px;height:44px;flex:none}.team-deck-controls button:first-child .ico{transform:rotate(180deg)}
 .team-deck-controls .ico{width:18px;height:18px}.team-deck-controls>div{text-align:center;min-width:130px}
 .team-deck-controls b{display:block;font:600 13px var(--font);color:var(--ink)}
 .team-deck-controls span{display:block;margin-top:4px;font:400 11px var(--font);color:var(--slate)}}
@media(max-width:360px){.team-stories{padding-inline:20px}.team-card-copy{padding:18px;min-height:230px}.team-card-copy h4{font-size:17px}.team-deck-controls{gap:12px}}
.team-stories.team-title-only .team-work-heading{margin-bottom:0}

/* Integrations: a quiet, connected tool stream around the existing Nuvena mark. */
.connect{--font:NuvenaFigtree,Figtree,NuvenaRound,Quicksand,sans-serif;position:relative;overflow:hidden;padding:76px 0 60px;background:radial-gradient(ellipse at 50% 42%,#e8eff9 0%,#f7f7f5 58%);color:var(--ink);font-family:var(--font)}
.connect-heading{position:relative;z-index:1;max-width:820px;margin:auto;padding:0 24px;text-align:center}
.connect-eyebrow{margin:0 0 20px;color:var(--blue);font:700 11px var(--font);letter-spacing:.17em}
.connect-heading h2{font:700 clamp(36px,4.5vw,64px)/1.08 var(--font);letter-spacing:-.045em}
.connect-heading h2 span{color:var(--blue)}
.connect-intro{max-width:560px;margin:20px auto 0;font:400 18px/1.5 var(--font);color:var(--slate)}
.connect-stage{position:relative;height:300px;margin:18px auto 0;max-width:1800px}
.connect-paths{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#2364a8;stroke-opacity:.28;stroke-width:1.2;pointer-events:none}
.connect-paths path{vector-effect:non-scaling-stroke}
.connect-signal{stroke:#c99535;stroke-opacity:.8;stroke-width:3;stroke-linecap:round;stroke-dasharray:1 99;stroke-dashoffset:0}
.connect-network{position:absolute;inset:0;display:grid;place-items:center;--connect-tile:64px;--connect-gap:24px}
.connect-lane{position:absolute;top:50%;width:calc(50% - var(--connect-clearance,116px));overflow:hidden;transform:translateY(-50%);padding:24px 0;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.connect-lane-left{left:0}.connect-lane-right{right:0}
.connect-track{display:flex;width:max-content;animation:connect-drift 64s linear infinite;animation-play-state:paused;will-change:transform}
.connect-lane-left .connect-track{animation-direction:reverse}
.connect-group{display:flex;align-items:center;gap:var(--connect-gap);padding-right:var(--connect-gap);flex-shrink:0}
.connect-tool{display:grid;place-items:center;flex:0 0 var(--connect-tile);width:var(--connect-tile);height:var(--connect-tile);border:1px solid #e3e7ef;border-radius:16px;background:#ffffffed;box-shadow:0 8px 20px -17px #10193555}
.connect-tool img,.connect-tool svg,.connect-tool .fa-bm{width:34px;height:34px;object-fit:contain}
.connect-tool .ig-ai{fill:#1b2a4a}.connect-tool .ig-word{font:700 12px var(--font)}
.connect-hub{position:relative;z-index:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;width:176px;height:82px;border:1px solid #cddcec;border-radius:24px;background:#fff;box-shadow:0 0 0 5px #ffffff66,0 16px 40px -24px #2364a859}
.connect-hub::before,.connect-hub::after{content:'';position:absolute;top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#c99535;box-shadow:0 0 0 4px #f7f7f5}
.connect-hub::before{right:calc(100% - 2px)}.connect-hub::after{left:calc(100% - 2px)}
.connect-hub .n-mark{width:44px;height:44px;flex-shrink:0}
.connect-hub>span{font:700 12px var(--font);letter-spacing:.04em;color:#1b2a4a}
.connect-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin:-8px 24px 30px;color:var(--slate);font:500 12px var(--font)}
.connect-pause{display:grid;place-items:center;width:44px;height:44px;border:1px solid #dfe4ec;border-radius:50%;background:#ffffffb3;color:var(--ink)}
.connect-pause svg{width:18px;height:18px}.connect-pause:hover{background:#fff;border-color:#a6b8d0}
.connect-features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;max-width:1120px;padding:0 32px;margin:0 auto}
.connect-features article{position:relative;border-left:1px solid #dfe1e7;padding:0 0 0 20px}
.connect-features article::before{content:'';position:absolute;left:-1px;top:0;width:2px;height:32px;background:#d4a03c}
.connect-feature-number{display:block;margin-bottom:12px;font:600 10px var(--font);color:var(--blue);letter-spacing:.1em}
.connect-features h3{margin:0 0 9px;font:650 17px/1.3 var(--font);letter-spacing:-.02em}
.connect-features p{font:400 15px/1.5 var(--font);color:var(--slate)}
.connect-cta{margin:34px 24px 0;text-align:center}
.connect.is-running .connect-track{animation-play-state:running}
.connect-stage:hover .connect-track{animation-play-state:paused}
@keyframes connect-drift{to{transform:translateX(-50%)}}
@keyframes connect-signal-flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:no-preference){.connect.is-running .connect-signal{animation:connect-signal-flow 7s linear infinite;animation-delay:var(--signal-delay)}}
@media(max-width:700px){
  .connect{padding:48px 0 40px;background:radial-gradient(ellipse at 50% 34%,#e8eff9 0%,#f7f7f5 60%)}
  .connect-eyebrow{margin-bottom:16px;font-size:10px}
  .connect-heading h2{font-size:clamp(32px,8.5vw,44px)}
  .connect-heading h2 span{display:block}
  .connect-intro{margin-top:16px;max-width:29ch;font-size:16px}
  .connect-stage{height:200px;margin-top:12px}
  .connect-network{--connect-tile:46px;--connect-gap:14px}
  .connect-lane{mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
  .connect-tool{border-radius:13px}.connect-tool img,.connect-tool svg,.connect-tool .fa-bm{width:25px;height:25px}.connect-tool .ig-word{font-size:9px}
  .connect-hub{flex-direction:column;width:86px;height:82px;border-radius:20px;gap:7px;box-shadow:0 0 0 4px #ffffff80,0 12px 30px -22px #2364a85c}
  .connect-hub .n-mark{width:34px;height:34px}.connect-hub>span{font-size:9px;letter-spacing:.06em}
  .connect-controls{margin:-8px 20px 24px;font-size:11px;gap:8px}
  .connect-features{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px;padding:0 24px}
  .connect-features article{padding-left:12px}.connect-feature-number{margin-bottom:8px}
  .connect-features h3{font-size:15px}.connect-features p{font-size:13px;line-height:1.45}
  .connect-cta{margin-top:28px}}
@media(prefers-reduced-motion:reduce){.connect-track{animation:none;will-change:auto}}
[data-motion=paused] .connect .connect-track{animation-play-state:paused}

/* Closing proof and conversion chapter: real customer marks, no invented
   metrics or decorative product diagram. */
.proof-close{position:relative;overflow:hidden;background:linear-gradient(145deg,#fbfbf9 0%,#f2f6fb 58%,#eaf1fa 100%);color:var(--ink)}
.proof-close::before{content:'';position:absolute;inset:-35% -10% auto 35%;height:95%;background:radial-gradient(circle,#8bb8e338 0%,#8bb8e312 38%,transparent 70%);pointer-events:none}
.proof-close>.container{position:relative;z-index:1;display:flex;flex-direction:column;height:100%}
.proof-close-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);gap:clamp(54px,7vw,110px);align-items:center;flex:1;min-height:0}
.proof-close-eyebrow{margin:0 0 18px;color:#86baf0;font:750 10.5px var(--ui);letter-spacing:.18em}
.proof-close-copy h2{max-width:720px;margin:0;color:var(--ink);font:650 clamp(38px,4.25vw,64px)/1.04 var(--font);letter-spacing:-.055em}
.proof-close-copy h2 em{color:#2b70b7;font-family:var(--serif);font-weight:500}
.proof-close-intro{max-width:620px;margin:24px 0 0;color:var(--slate);font:450 clamp(15px,1.25vw,18px)/1.62 var(--font)}
.proof-close-actions{display:flex;align-items:center;gap:24px;margin-top:30px}.proof-close-actions .button{background:var(--action-dark);color:#fff}.proof-close-actions .button:hover{background:var(--action-dark)}
.proof-close-link{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font:650 14px var(--font)}.proof-close-link .ico{width:15px;height:15px}.proof-close-link:hover{color:var(--blue)}
.proof-close-trust{padding:30px;border:1px solid #d4deea;border-radius:28px;background:#ffffffc9;box-shadow:0 30px 70px -50px #12224466}
.proof-close-trust-head{display:flex;align-items:center;gap:10px;margin-bottom:20px;color:#53617a;font:650 12px var(--font);letter-spacing:.02em}.proof-close-dot{width:7px;height:7px;border-radius:50%;background:#d7a53d;box-shadow:0 0 0 6px #d7a53d16}
.proof-close-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.proof-close-logo{display:grid;place-items:center;min-width:0;height:74px;overflow:hidden;border:1px solid #dce4ee;border-radius:15px;background:#f8fafc;color:#29354e;text-align:left;perspective:700px}
.proof-board-face{display:flex;width:100%;height:100%;flex-direction:column;justify-content:center;padding:12px 15px;transform-origin:50% 0;animation:proof-board-in .72s cubic-bezier(.2,.75,.25,1) both}
.proof-board-face small{margin-bottom:5px;color:#8390a4;font:750 7px var(--ui);letter-spacing:.12em;text-transform:uppercase}.proof-board-face strong{font:650 13px/1.2 var(--font);letter-spacing:-.018em}
.proof-close-note{margin:18px 0 0;color:#7d899d;font:550 10px/1.5 var(--ui);text-align:center;letter-spacing:.035em}
@keyframes proof-board-in{0%{opacity:.25;transform:rotateX(-76deg);background:#dfe9f5}55%{opacity:1;transform:rotateX(7deg)}100%{transform:rotateX(0);background:transparent}}
@media(prefers-reduced-motion:reduce){.proof-board-face{animation:none}}
@media(max-width:900px){.proof-close-grid{grid-template-columns:1fr;gap:34px}.proof-close-copy{text-align:center}.proof-close-copy h2,.proof-close-intro{margin-left:auto;margin-right:auto}.proof-close-actions{justify-content:center}.proof-close-trust{max-width:700px;width:100%;margin:auto}}
@media(max-width:700px){.proof-close>.container{height:auto}.proof-close-grid{gap:30px}.proof-close-copy h2{font-size:clamp(34px,9.5vw,44px)}.proof-close-intro{margin-top:18px;font-size:15px}.proof-close-actions{flex-direction:column;gap:17px;margin-top:24px}.proof-close-actions .button{width:100%;justify-content:center}.proof-close-trust{padding:20px;border-radius:22px}.proof-close-trust-head{justify-content:center;text-align:center}.proof-close-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.proof-close-logo{height:62px}.proof-board-face{padding:9px 11px}.proof-board-face strong{font-size:11.5px}.proof-close-note{font-size:9px}}

/* ============ Legacy integration arc styles (other previews) ============ */
.ig{--R:min(600px,44vw);--tile:84px;position:relative;height:calc(var(--R) + 150px);overflow:hidden;background:linear-gradient(180deg,#e9effb 0%,var(--bg) 70%)}
.ig-ring{position:absolute;left:50%;top:calc(100% - 30px);width:0;height:0;animation:ig-turn 140s linear infinite}
.ig-tool{position:absolute;left:calc(var(--tile) / -2);top:calc(var(--tile) / -2);width:var(--tile);display:flex;flex-direction:column;align-items:center;gap:7px;transform:rotate(var(--a)) translateY(calc(-1 * var(--R)))}
.ig-mark{display:grid;place-items:center;width:var(--tile);height:var(--tile);border-radius:24px;background:#fff;box-shadow:0 18px 34px -20px #10193566,0 0 0 1px #e8ebf2}
.ig-mark img,.ig-mark svg{width:46%;height:46%;object-fit:contain}
.ig-mark .fa-bm{width:46%;height:46%}
.ig-wa{fill:#25d366}.ig-zoho{fill:#e42527}
.ig-ico{display:grid;place-items:center;width:52%;height:52%;border-radius:14px;background:#edf2fa;color:var(--blue)}
.ig-ico .ico{width:60%;height:60%}
.ig-word{font:700 13px var(--font);letter-spacing:-.02em;color:#1d4f91}
.ig-tool small{font:600 11.5px var(--ui);color:var(--slate);white-space:nowrap}
.ig-copy{position:absolute;left:50%;bottom:clamp(40px,7vh,72px);width:min(720px,88vw);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;z-index:1}
.ig-desktop-brand{position:absolute;bottom:calc(100% + 24px);display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px #e3e8f2,0 18px 30px -14px #10193555}
.ig-desktop-brand .n-mark{width:38px;height:38px}
@media(max-width:700px){.ig-desktop-brand{display:none}}
.ig-copy h2{margin:0;font:600 clamp(34px,4.4vw,62px)/1.05 var(--font);letter-spacing:-.05em;color:var(--ink)}
.ig-copy h2 span{display:block;color:var(--blue)}
.ig-copy p{margin:16px 0 26px;max-width:36em;font:400 clamp(15px,1.2vw,18px)/1.6 var(--font);color:var(--slate)}
.ig-list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@keyframes ig-turn{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@media(prefers-reduced-motion:reduce){.ig-ring{animation:none}}
[data-motion=paused] .ig-ring{animation-play-state:paused}
@media(max-width:700px){.ig{--R:78vw;--tile:58px;height:calc(var(--R) + 260px)}.ig-mark{border-radius:17px}.ig-tool small{font-size:10px}.ig-copy{bottom:40px}.ig-copy h2{font-size:clamp(30px,8.6vw,38px)}.ig-copy p{margin:12px 0 20px;font-size:14.5px}}
.ig-arc{position:absolute;inset:0}
/* phones: the arc sits above the words; logos sink away behind a soft fade at its foot instead of crossing the text */
@media(max-width:700px){
  .ig{--R:44vw;--tile:56px;height:auto;padding-bottom:44px}
  .ig-arc{position:relative;height:calc(var(--R) + var(--tile) + 54px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent);mask-image:linear-gradient(180deg,#000 74%,transparent)}
  .ig-ring{top:calc(100% - 14px)}
  .ig-copy{position:relative;left:auto;bottom:auto;transform:none;margin:4px auto 0}}
@media(max-width:700px){.ig{--R:50vw;--tile:52px}.ig-tool small{display:none}.ig-tool.lbl small{display:block}.ig-mark{border-radius:15px}}

/* ============ Whatever your contracts promise — the Duo-style gallery ============ */
.du{padding:clamp(48px,9vh,96px) 0 clamp(44px,8vh,80px);background:var(--bg)}
.du-title{margin:0 0 clamp(24px,4.5vh,48px);font:600 clamp(36px,5vw,72px)/1.04 var(--font);letter-spacing:-.055em;color:var(--ink)}
.du-view{overflow:hidden;padding:0 max(var(--gutter),calc((100vw - 1424px)/2 + var(--gutter)));touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.du-view:active{cursor:grabbing}
.du-track{display:flex;gap:clamp(14px,2vw,34px);transition:transform .9s cubic-bezier(.65,0,.25,1);will-change:transform}
.du-card{flex:0 0 min(1040px,64vw);margin:0;cursor:pointer}
.du-card.on{cursor:inherit}
.du-stage{position:relative;aspect-ratio:11/9;overflow:hidden;border-radius:clamp(22px,2.6vw,36px);background:#141a33;box-shadow:0 40px 70px -46px #10193599}
.du-stage .hl-card{position:absolute;inset:0;height:auto;flex:none;padding:0;border-radius:0;box-shadow:none;background:none}
.du-stage .hl-art{top:0;padding:0}
.du-stage:after{content:'';position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(transparent,#00000026);pointer-events:none}
.duc-ai .du-stage{background:radial-gradient(70% 60% at 50% 48%,#3b3384 0%,#1a1d3d 62%,#0f1226 100%)}
.duc-own .du-stage{background:radial-gradient(70% 60% at 50% 48%,#24508f 0%,#152446 62%,#0e1529 100%)}
.duc-chase .du-stage{background:radial-gradient(70% 60% at 50% 48%,#226152 0%,#132b26 62%,#0d1a17 100%)}
.duc-tap .du-stage{background:radial-gradient(70% 60% at 50% 48%,#2f3e86 0%,#181f45 62%,#0e1229 100%)}
.duc-proof .du-stage{background:radial-gradient(70% 60% at 50% 48%,#2a6040 0%,#16301f 62%,#0d1b12 100%)}
.duc-view .du-stage{background:radial-gradient(70% 60% at 50% 48%,#4a3a8a 0%,#1d1a3d 62%,#110f26 100%)}
.du-cap{max-width:34ch;margin:clamp(18px,3vh,30px) 0 0;padding:0 clamp(4px,1vw,14px);font:500 clamp(17px,1.7vw,26px)/1.36 var(--font);letter-spacing:-.02em;color:#86868b}
.du-cap b{color:var(--ink);font-weight:600}
.du-card:not(.on) .du-stage{opacity:.92}
.du-ctl{margin-top:clamp(18px,3vh,28px)}
/* the pictures on a dark stage: brighter text, white button */
.du-stage .hl-art>*{transform:scale(1.5)}
.du-stage .hla-view ul{color:#c9cfe0}.du-stage .hla-view li b{color:#fff}.du-stage .hla-view li b.ok{color:#5fd39a}.du-stage .hla-view li b.blue{color:#8fb8ef}
.du-stage .hla-ring b{color:#fff}.du-stage .hla-ring small{color:#aab1c6}.du-stage .hla-ring circle{stroke:#ffffff26}.du-stage .hla-ring circle.on{stroke:#8fb8ef}
.du-stage .hla-from{color:#c4b5fd}.du-stage .hla-read{color:#8b93ad}
.du-stage .hla-btn{background:#fff;color:#101935}
.du-stage .hla-btn em{color:#fff}
.du-stage .hla-tap>i{border-color:#8fb8ef}
@media(prefers-reduced-motion:no-preference){.du-stage .hl-card.on .hla-btn{animation:du-btn 2.6s ease .2s both}}
@keyframes du-btn{0%,45%{background:#fff;transform:scale(1)}50%{transform:scale(.94)}58%,100%{background:#2f9e6a;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.du-track{transition:none}.du-stage .hla-btn{background:#2f9e6a}}
@media(max-width:900px){.du-card{flex-basis:84vw}.du-stage{aspect-ratio:4/5;max-height:64svh}.du-stage .hl-art>*{transform:scale(1.05)}.du-cap{max-width:none;font-size:16px;line-height:1.35}}
@media(max-width:700px){.du{padding-top:42px}.du-title{margin-bottom:24px;font-size:clamp(23px,6.2vw,27px);letter-spacing:-.04em;white-space:nowrap}.du-cap{display:-webkit-box;min-height:2.7em;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}}
/* the dot of the playing card fills afresh each time (the key on <i> restarts it) */
.du.playing .hl-dot.on i{animation:hl-fill 6s linear forwards}
.du:not(.playing) .hl-dot.on i{width:100%}

/* ============ Integrations, refreshed: no names under the marks; drag to spin; on phones an N hub with live wires ============ */
.ig-ring{animation:none!important}
.ig-tool small{display:none}
.ig-word{font:700 14px var(--font);letter-spacing:-.01em;color:#1d4f91}
.ig-mark svg.ig-ai{fill:#191919}
.ig{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ig.grabbing{cursor:grabbing}
.ig a,.ig button{cursor:pointer}
.ig-hub,.ig-wire{display:none}
@media(max-width:700px){
  .ig-copy p{display:none}
  .ig-copy h2{margin-top:6px}
  .ig-copy .button{margin-top:22px}
  .ig-arc{height:calc(var(--R) + var(--tile) + 60px);-webkit-mask-image:linear-gradient(180deg,#000 86%,transparent);mask-image:linear-gradient(180deg,#000 86%,transparent)}
  .ig-ring{top:calc(100% - 34px)}
  .ig-wire{display:block;position:absolute;left:calc(50% - .75px);top:calc(var(--tile) + 2px);width:1.5px;height:calc(var(--R) - var(--tile) / 2 - 32px);background:linear-gradient(180deg,#9fb6dd,#c9d3e8 70%,transparent);border-radius:1px}
  .ig-wire i{position:absolute;left:-2.5px;top:0;width:6.5px;height:6.5px;border-radius:50%;background:#2364a8;box-shadow:0 0 0 3px #2364a822;opacity:0}
  /* the owner's dotted N logo on a white tile (owner, 7 Oct night: "mera wo logo hai, mujhe wahi chahiye") */
  .ig-hub{display:grid;place-items:center;position:relative;z-index:2;width:64px;height:64px;margin:-66px auto 0;border-radius:20px;background:#fff;box-shadow:0 0 0 6px #ffffffcc,0 0 0 7px #e3e8f2,0 18px 30px -14px #101935aa}
  .ig-hub .n-mark{width:38px;height:38px}}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
  .ig.in .ig-wire i{animation:ig-signal 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.41s)}
  .ig.in .ig-hub{animation:ig-pulse 2.4s ease-in-out infinite}}
@keyframes ig-signal{0%{opacity:0;transform:translateY(0)}12%{opacity:1}48%{opacity:1;transform:translateY(calc(var(--R) - var(--tile) / 2 - 40px))}52%{opacity:0;transform:translateY(calc(var(--R) - var(--tile) / 2 - 40px))}60%{opacity:0;transform:translateY(calc(var(--R) - var(--tile) / 2 - 40px))}64%{opacity:1}96%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@keyframes ig-pulse{0%,100%{box-shadow:0 0 0 6px #ffffffcc,0 0 0 7px #e3e8f2,0 0 0 7px #2364a800,0 18px 30px -14px #101935aa}50%{box-shadow:0 0 0 6px #ffffffcc,0 0 0 7px #e3e8f2,0 0 0 17px #2364a81f,0 18px 30px -14px #101935aa}}
/* laptops: a card and its caption fit one screen */
@media(min-width:901px){.du-card{flex-basis:min(1040px,64vw,calc(60svh * 11 / 9))}}
@media(min-width:901px){.du-card{flex-basis:min(1040px,64vw,calc(50svh * 11 / 9))}.du-title{font-size:clamp(36px,4.2vw,60px);margin-bottom:clamp(18px,3vh,30px)}.du-cap{font-size:clamp(17px,1.4vw,21px);margin-top:clamp(14px,2.2vh,22px)}.du{padding-top:clamp(36px,6vh,72px)}}
/* the pictures size with their card: a little larger on big screens, normal on short laptops */
@media(min-width:901px){.du-stage .hl-art>*{transform:scale(1.15)}}
@media(min-width:901px) and (max-height:820px){.du-stage .hl-art>*{transform:scale(.98)}}
@media(min-width:1700px) and (min-height:1000px){.du-stage .hl-art>*{transform:scale(1.32)}}
@media(max-width:900px){.du-stage .hl-art{padding:0 16px}.du-stage .hl-art>*{transform:none;max-width:100%}}

/* ============ The opening, rebuilt as blocks (owner, 7 Oct night): one focused board instead of the drawing, the thin cards and the
   iPad. The contract drafts itself and is signed (it plays on arrival), Navio AI pulls three promises out along one connector into a
   simple list, then owner and date pieces snap onto each row, a bell piece rings again and again, and the bells turn into ticks.
   Pieces join like building blocks. Driven by #nvj[data-stage] that the scroll already sets; scrolling back rewinds it. ============ */
#nvj .nvj-art,#nvj .nvj-mcards{display:none!important}
.nvb{position:absolute;inset:0;font-family:var(--ui);color:#101935;pointer-events:none}
.nvb-grid{position:absolute;inset:-4% -8%;background-image:radial-gradient(#1019352e 1.1px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent);mask-image:radial-gradient(closest-side,#000 30%,transparent)}
.nvb-in{position:absolute;left:50%;top:50%;width:min(940px,100%);height:min(400px,100%);transform:translate(-50%,-50%)}
.nvb-glow{position:absolute;left:50%;top:50%;width:440px;height:440px;margin:-220px 0 0 -220px;border-radius:50%;background:radial-gradient(closest-side,#2364a830,#6a4fb818 55%,transparent);transition:left 1s var(--ease)}
/* the contract */
.nvb-doc{position:absolute;left:8px;top:50%;z-index:2;width:250px;height:196px;padding:16px 18px;border-radius:18px;background:#fff;border:1px solid #e3e7f0;box-shadow:0 3px 0 #e6e9f1,0 30px 60px -34px #10193570;transform-origin:50% 50%;
  transform:translateY(-50%) scale(1.06);transition:left 1s var(--ease),top 1s var(--ease),transform 1s var(--ease)}
.nvb-tag{position:absolute;right:14px;top:14px;display:grid;margin:0}
.nvb-tag i{grid-area:1/1;justify-self:end;padding:3px 9px;border-radius:7px;font:700 10px/1.4 var(--ui);font-style:normal;letter-spacing:.06em;text-transform:uppercase;transition:opacity .3s,transform .4s var(--ease)}
.nvb-tag .ta{background:#f1f2f6;color:#5b6480}.nvb-tag .tb{background:#e8f0fb;color:#2364a8;opacity:0}.nvb-tag .tc{background:#e4f4ec;color:#2f8a5f;opacity:0}
.nvb-doc-t{display:block;font:650 16px/1.2 var(--font);letter-spacing:-.02em}
.nvb-doc-s{display:block;margin:3px 0 12px;font:500 10.5px var(--ui);color:#8a92a8}
.nvb-ln{display:block;height:6px;margin-top:8px;border-radius:4px;background:#e8ebf2;transform-origin:left;transform:scaleX(0);transition:transform .5s var(--ease),background .5s}
.nvb-ln.l0{width:92%}.nvb-ln.l1{width:78%}.nvb-ln.l2{width:86%}.nvb-ln.l3{width:64%}.nvb-ln.l4{width:82%}
.nvb-sig{position:absolute;left:14px;bottom:10px;width:120px;height:30px;fill:none;stroke:#3a4a70;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s ease}
.nvb-stamp{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:#e8f0fb;color:#2364a8;font:700 11px var(--ui);opacity:0;transform:scale(1.6) rotate(-8deg);transition:opacity .25s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.nvb-stamp svg,.nvb-count svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.nvb-scan{position:absolute;left:10px;right:10px;top:52px;height:34px;border-radius:8px;background:linear-gradient(180deg,#6a4fb800,#6a4fb82e);border-bottom:2px solid #6a4fb8aa;opacity:0}
/* the connector, with Navio AI on it and signals running along */
.nvb-link{position:absolute;left:266px;top:50%;width:calc(100% - 736px);height:2px;margin-top:-1px;border-radius:2px;background:linear-gradient(90deg,#2364a8,#6a4fb8);transform-origin:left;transform:scaleX(0);transition:transform .6s var(--ease)}
.nvb-link>i{position:absolute;left:0;top:-3px;width:8px;height:8px;border-radius:50%;background:#6a4fb8;box-shadow:0 0 0 4px #6a4fb822;opacity:0}
.nvb-ai{position:absolute;left:50%;top:50%;display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 7px;border-radius:999px;background:#fff;border:1px solid #e2dcf3;box-shadow:0 10px 24px -14px #6a4fb8aa;font:700 11.5px var(--ui);white-space:nowrap;color:#101935;
  transform:translate(-50%,-50%) scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.nvb-ai svg{width:20px;height:20px;padding:3px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--violet));fill:#fff}
/* the list */
.nvb-list{position:absolute;right:0;top:50%;z-index:2;width:470px;padding:14px 14px 16px;border-radius:22px;background:#ffffffed;border:1px solid #e3e7f0;box-shadow:0 3px 0 #e6e9f1,0 40px 70px -40px #10193580;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transform:translate(24px,-50%) scale(.96);transition:opacity .5s,transform .7s var(--ease),box-shadow .6s}
.nvb-lh{display:flex;align-items:center;justify-content:space-between;margin:0 4px 4px;font:650 13px var(--ui)}
.nvb-lh>b{font-size:0}.nvb-lh>b::before{content:'Contract promises';font-size:13px}.nvb-lh>b::after{content:'NS–042';display:inline-block;margin-left:8px;color:#8a92a8;font:600 9px var(--ui);letter-spacing:.06em}
.nvb-count{display:grid}
.nvb-count i{grid-area:1/1;justify-self:end;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:#eef2f9;color:#2364a8;font:700 11px var(--ui);font-style:normal;opacity:0;transition:opacity .3s}
.nvb-count .k4{background:#e4f4ec;color:#2f8a5f}
.nvb-count u{width:7px;height:7px;border-radius:50%;background:#2364a8;animation:nvn-live 1.6s ease-out infinite}
.nvb-row{display:flex;gap:5px;height:50px;margin-top:9px}
.nvb-pc{position:relative;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:13px;background:#fff;border:1px solid #e3e7f0;box-shadow:0 2px 0 #e6e9f1,0 10px 18px -14px #10193555;font:600 13.5px var(--ui);white-space:nowrap;
  opacity:0;transform:translateX(22px) scale(.82);transition:opacity .3s ease,transform .6s cubic-bezier(.3,1.45,.5,1),background .4s,border-color .4s}
/* the knob where two pieces join */
.nvb-pc+.nvb-pc::before{content:'';position:absolute;left:-8px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#fff;border:1px solid #dfe3ec;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px #eef1f6}
.nvb-p{flex:1;min-width:0;transform:translateX(-40px) scale(.9)}
.nvb-p i{width:4px;height:22px;border-radius:2px;background:#2364a8}.nvb-p.nvb-cv i{background:#6a4fb8}.nvb-p.nvb-cr i{background:#c8326a}
.nvb-p b{overflow:hidden;text-overflow:ellipsis}.nvb-p .nvb-ts{display:none}
.nvb-own em{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font:700 9.5px var(--ui);font-style:normal}
.nvb-own em.nvb-cb{background:#e6eef9;color:#2364a8}.nvb-own em.nvb-cv{background:#efe9fb;color:#6a4fb8}.nvb-own em.nvb-cr{background:#fbe8ef;color:#c8326a}
.nvb-due{color:#5b6480;font-weight:550}
.nvb-due svg,.nvb-st svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nvb-st{justify-content:center;width:50px;padding:0;color:#2364a8}
.nvb-st svg{position:absolute;width:20px;height:20px;transition:opacity .3s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.nvb-tick{opacity:0;transform:scale(.3);stroke-width:2.8!important}
.nvb-bell{transform-origin:50% 15%}
.nvb-wave{position:absolute;inset:-1px;border-radius:inherit;border:2px solid #2364a8;opacity:0}

/* ---- stage 0, on arrival: the contract drafts itself and is signed, centre stage ---- */
#nvj[data-stage="0"] .nvb-doc{left:calc(50% - 125px);transform:translateY(-50%) scale(1.32)}
@media(min-width:1600px){#nvj[data-stage="0"] .nvb-doc{transform:translateY(-50%) scale(1.45)}}
#nvj[data-stage] .nvb-ln{transform:none}
#nvj[data-stage] .nvb-sig{stroke-dashoffset:0}
#nvj[data-stage] .nvb-stamp{opacity:1;transform:none}
#nvj[data-stage] .nvb-tag .ta{opacity:0}
#nvj[data-stage] .nvb-tag .tb{opacity:1}
#nvj[data-stage="0"] .nvb-ln.l1{transition-delay:.15s}#nvj[data-stage="0"] .nvb-ln.l2{transition-delay:.3s}#nvj[data-stage="0"] .nvb-ln.l3{transition-delay:.45s}#nvj[data-stage="0"] .nvb-ln.l4{transition-delay:.6s}
#nvj[data-stage="0"] .nvb-sig{transition-delay:1s}#nvj[data-stage="0"] .nvb-stamp{transition-delay:1.9s}#nvj[data-stage="0"] .nvb-tag .ta{transition-delay:1.9s}#nvj[data-stage="0"] .nvb-tag .tb{transition-delay:1.9s}
/* ---- stage 1: Navio AI reads it; three promises travel along the connector into the list ---- */
#nvj:is([data-stage="1"],[data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"]) .nvb-glow{left:72%}
#nvj:is([data-stage="1"],[data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"]) .nvb-link{transform:none;transition-delay:.25s}
#nvj:is([data-stage="1"],[data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"]) .nvb-ai{transform:translate(-50%,-50%) scale(1);transition-delay:.5s}
#nvj:is([data-stage="1"],[data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"]) .nvb-list{opacity:1;transform:translate(0,-50%);transition-delay:.35s}
#nvj:is([data-stage="1"],[data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"]) .nvb-p{opacity:1;transform:none}
#nvj[data-stage="1"] .nvb-r0 .nvb-p,#nvj[data-stage="1"] .r0 .nvb-p{transition-delay:.9s}#nvj[data-stage="1"] .r1 .nvb-p{transition-delay:1.15s}#nvj[data-stage="1"] .r2 .nvb-p{transition-delay:1.4s}
#nvj[data-stage="1"] .nvb-scan{animation:nvb-scan 1.1s ease-in-out .1s 2}
#nvj[data-stage="1"] .nvb-ln.l1{background:#2364a833}#nvj[data-stage="1"] .nvb-ln.l3{background:#6a4fb833}#nvj[data-stage="1"] .nvb-ln.l4{background:#c8326a2e}
#nvj:is([data-stage="1"],[data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"]) .nvb-link>i{animation:nvb-run 1.8s ease-in-out infinite}#nvj:is([data-stage="1"],[data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"]) .nvb-link>.s1{animation-delay:.6s}#nvj:is([data-stage="1"],[data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"]) .nvb-link>.s2{animation-delay:1.2s}
#nvj[data-stage="1"] .nvb-count .k1{opacity:1}#nvj[data-stage="2"] .nvb-count .k2{opacity:1}#nvj[data-stage="3"] .nvb-count .k3{opacity:1}#nvj:is([data-stage="4"],[data-stage="5"]) .nvb-count .k4{opacity:1}
/* ---- stage 2: an owner and a date snap onto every row ---- */
#nvj:is([data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"]) .nvb-own,#nvj:is([data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"]) .nvb-due{opacity:1;transform:none}
#nvj[data-stage="2"] .r0 .nvb-own{transition-delay:.15s}#nvj[data-stage="2"] .r1 .nvb-own{transition-delay:.35s}#nvj[data-stage="2"] .r2 .nvb-own{transition-delay:.55s}
#nvj[data-stage="2"] .r0 .nvb-due{transition-delay:.6s}#nvj[data-stage="2"] .r1 .nvb-due{transition-delay:.8s}#nvj[data-stage="2"] .r2 .nvb-due{transition-delay:1s}
/* ---- stage 3: the follow-up piece snaps on and the bell rings, again and again ---- */
#nvj:is([data-stage="3"],[data-stage="4"],[data-stage="5"]) .nvb-st{opacity:1;transform:none}
#nvj[data-stage="3"] .r1 .nvb-st{transition-delay:.15s}#nvj[data-stage="3"] .r2 .nvb-st{transition-delay:.3s}
#nvj[data-stage="3"] .nvb-bell{animation:nvb-ring 1.6s ease .5s infinite}#nvj[data-stage="3"] .r1 .nvb-bell{animation-delay:.9s}#nvj[data-stage="3"] .r2 .nvb-bell{animation-delay:1.3s}
#nvj[data-stage="3"] .nvb-wave{animation:nvb-wave 1.6s ease-out .5s infinite}#nvj[data-stage="3"] .r1 .nvb-wave{animation-delay:.9s}#nvj[data-stage="3"] .r2 .nvb-wave{animation-delay:1.3s}
/* ---- stage 4: the work comes in; each bell turns into a tick ---- */
#nvj:is([data-stage="4"],[data-stage="5"]) .nvb-bell{opacity:0;transform:scale(.3)}
#nvj:is([data-stage="4"],[data-stage="5"]) .nvb-tick{opacity:1;transform:none}
#nvj:is([data-stage="4"],[data-stage="5"]) .nvb-st{background:#2f9e6a;border-color:#2f9e6a;color:#fff}
#nvj:is([data-stage="4"],[data-stage="5"]) .nvb-p{background:#f3fbf7;border-color:#cfeadc}
#nvj[data-stage="4"] .r1 .nvb-st,#nvj[data-stage="4"] .r1 .nvb-tick,#nvj[data-stage="4"] .r1 .nvb-bell,#nvj[data-stage="4"] .r1 .nvb-p{transition-delay:.45s}
#nvj[data-stage="4"] .r2 .nvb-st,#nvj[data-stage="4"] .r2 .nvb-tick,#nvj[data-stage="4"] .r2 .nvb-bell,#nvj[data-stage="4"] .r2 .nvb-p{transition-delay:.9s}
/* ---- stage 5: everything delivered — the contract says so, the list glows ---- */
#nvj[data-stage="5"] .nvb-tag .tb{opacity:0}#nvj[data-stage="5"] .nvb-tag .tc{opacity:1}
#nvj[data-stage="5"] .nvb-list{box-shadow:0 0 0 2px #8fd1b2,0 40px 70px -40px #2f9e6a80}
#nvj[data-stage="5"] .nvb-glow{left:50%;background:radial-gradient(closest-side,#2f9e6a2a,#2364a814 55%,transparent)}
@keyframes nvb-scan{0%{opacity:0;transform:translateY(-10px)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateY(84px)}}
@keyframes nvb-run{0%{opacity:0;left:0}15%{opacity:1}85%{opacity:1}100%{opacity:0;left:calc(100% - 8px)}}
@keyframes nvb-ring{0%,46%,100%{transform:rotate(0)}6%{transform:rotate(20deg)}14%{transform:rotate(-17deg)}22%{transform:rotate(12deg)}30%{transform:rotate(-7deg)}38%{transform:rotate(3deg)}}
@keyframes nvb-wave{0%{opacity:.7;transform:scale(1)}60%,100%{opacity:0;transform:scale(1.35)}}

/* ---- phones and tablets: the same board, top to bottom — the contract on top, the connector down, the list below ---- */
@media(max-width:900px){
  .nvb-in{width:min(390px,calc(100% - 28px));height:100%}
  .nvb-glow{left:50%;top:62%}
  .nvb-doc{left:50%;top:0;transform-origin:50% 0;transform:translateX(-50%) scale(.82)}
  #nvj[data-stage="0"] .nvb-doc{left:50%;top:50%;transform:translate(-50%,-50%) scale(1.05)}
  #nvj .nvb-in .nvb-doc{transition:top 1s var(--ease),transform 1s var(--ease)}
  .nvb-link{left:50%;top:160px;width:2px;height:30px;margin:0 0 0 -1px;background:linear-gradient(180deg,#2364a8,#6a4fb8);transform-origin:top;transform:scaleY(0)}
  .nvb-link>i{left:-3px;top:0}
  .nvb-list{left:50%;right:auto;top:194px;width:min(330px,100%);padding:10px 9px 12px;transform:translate(-50%,24px) scale(.96)}
  #nvj:is([data-stage="1"],[data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"]) .nvb-list{transform:translateX(-50%)}
  #nvj:is([data-stage="1"],[data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"]) .nvb-glow{left:50%}
  .nvb-row{height:40px;gap:3px;margin-top:6px}
  .nvb-pc{padding:0 7px;gap:5px;font-size:11.5px;border-radius:10px}
  .nvb-p .nvb-tl{display:none}.nvb-p .nvb-ts{display:block}
  .nvb-own em{width:22px;height:22px;font-size:8.5px}
  .nvb-due svg{display:none}
  .nvb-st{width:36px}}
@media(max-width:900px){@keyframes nvb-run{0%{opacity:0;top:0}15%{opacity:1}85%{opacity:1}100%{opacity:0;top:calc(100% - 8px)}}}
@media(max-width:380px){.nvb-own span{display:none}}
/* laptops: the board fills its stage */
@media(min-width:1180px) and (min-height:760px){.nvb-in{transform:translate(-50%,-50%) scale(1.14)}}
@media(min-width:1600px) and (min-height:900px){.nvb-in{transform:translate(-50%,-50%) scale(1.3)}}
/* Compact-height phones also lose usable stage height while the consent bar is open. Keep the board clear of the CTA. */
@media(max-width:700px) and (max-height:850px){.nvb-doc{transform:translateX(-50%) scale(.72)}.nvb-row{height:37px;margin-top:5px}.nvb-link{top:141px;height:26px}.nvb-list{top:171px}}

/* ============ Calm enterprise rhythm: one stable message, one interaction and one clear next step per section. ============ */
.rv-pill-bar{display:none}
.section-next{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:max-content;margin:30px auto 0;padding:10px 14px;color:var(--ink);font:650 13px var(--ui);text-decoration:none;border-bottom:1px solid #cbd1dd}
.section-next>span{color:#8991a4;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.section-next .ico{width:15px;height:15px;transition:transform .25s var(--ease)}
.section-next:hover .ico{transform:translateX(4px)}
.du-hint,.ig-hint{margin:0;color:#7d869b;font:600 10.5px var(--ui);letter-spacing:.1em;text-transform:uppercase}
.hl-ctl{flex-direction:column;gap:10px}
.ig-copy .ig-hint{margin:0 0 18px}
.ig-copy .button{margin-top:0}
@media(max-width:900px){
  #nvj .nvj-pin{grid-template-rows:30px 138px minmax(0,1fr) 64px}
  #nvj .nvj-cta{grid-row:4}
  .section-next{margin-top:22px}}
@media(max-width:700px){
  #nvj .nvj-pin{grid-template-rows:28px 122px minmax(0,1fr) 60px}
  .section-next{font-size:12.5px}
  .ig-copy .ig-hint{display:block;margin-top:14px;margin-bottom:0}
  .ig-copy .button{margin-top:20px}}
@media(max-width:700px) and (max-height:760px){#nvj .nvj-pin{grid-template-rows:26px 100px minmax(0,1fr) 56px}}

/* ============ Visible chapter redesign: product story, capability chapter, connection chapter. ============ */
.product-detail-shell{padding:40px 0 48px;background:
 radial-gradient(55% 70% at 50% 58%,#dce9f887 0%,transparent 72%),
 linear-gradient(180deg,#fbfbfa 0%,#f4f7fa 100%);overflow:hidden}
.product-detail-label{margin:0 0 16px;color:var(--blue);font:750 10.5px var(--ui);letter-spacing:.18em}
.product-journey-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:clamp(20px,3vh,32px)}
.product-journey-heading h2{max-width:850px;margin:0;color:var(--ink);font:650 clamp(34px,4.1vw,60px)/1.03 var(--font);letter-spacing:-.055em}
.product-journey-heading h2 em{color:var(--blue);font-family:var(--serif);font-weight:500}
.product-journey-heading>p{max-width:360px;margin:0 0 5px;color:var(--slate);font:500 clamp(14px,1.2vw,17px)/1.45 var(--font);text-align:right}
.product-journey-board{position:relative;display:flex;align-items:center;flex:1;min-height:0;padding:clamp(30px,4.6vh,50px) clamp(70px,6.5vw,108px);border:1px solid #d8e1ec;border-radius:32px;background:linear-gradient(135deg,#ffffffd9,#f7f9fce8);box-shadow:0 30px 70px -52px #162847;isolation:isolate}
.product-journey-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.5vw,24px);width:100%}
.product-journey-track{position:absolute;z-index:1;left:5.5%;right:5.5%;top:50%;height:2px;background:linear-gradient(90deg,#c9d9ea,#d9aa4b 48%,#8eb9e0);transform:translateY(-50%)}
.product-journey-track::before,.product-journey-track::after{content:'';position:absolute;top:50%;width:8px;height:8px;border:2px solid #6e9ecc;border-radius:50%;background:#fff;transform:translateY(-50%)}
.product-journey-track::before{left:0}.product-journey-track::after{right:0;background:#1f9b6c;border-color:#1f9b6c}
.product-journey-signal{position:absolute;top:50%;left:0;width:12px;height:12px;border:3px solid #fff;border-radius:50%;background:#d7a53d;box-shadow:0 0 0 5px #d7a53d26,0 0 20px #d7a53d;transform:translate(-50%,-50%)}
.product-journey-card{position:relative;display:flex;flex-direction:column;min-height:238px;padding:22px 20px 19px;border:1px solid #d9e2ed;border-radius:22px;background:#fff;box-shadow:0 22px 42px -34px #0b183a80}
.product-journey-card::after{content:'';position:absolute;left:50%;bottom:-8px;width:14px;height:14px;border:2px solid #80a8d0;border-radius:50%;background:#fff;transform:translateX(-50%)}
.product-journey-card.verify::after{border-color:#2f9d73;background:#2f9d73}
.product-journey-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}
.product-journey-icon{display:grid;width:38px;height:38px;place-items:center;border-radius:12px;color:#2467aa;background:#eaf3fc}
.product-journey-icon .ico{width:18px;height:18px}.product-journey-card-top>small{color:#8c9ab0;font:750 10px var(--ui);letter-spacing:.14em}
.product-journey-card h3{margin:0 0 8px;color:var(--ink);font:650 clamp(19px,1.5vw,24px)/1.08 var(--font);letter-spacing:-.035em}
.product-journey-card>p{min-height:44px;margin:0;color:#65728b;font:500 13.5px/1.55 var(--font)}
.product-journey-mini{display:flex;align-items:center;gap:10px;min-height:50px;margin-top:17px;padding:10px 11px;border:1px solid #e0e7f0;border-radius:14px;background:#f6f8fb}
.product-journey-mini .pj-doc-line{display:block;width:28px;height:4px;border-radius:3px;background:#b8c7da}.product-journey-mini .pj-doc-line.hot{width:46px;background:#e0b358}.product-journey-mini .pj-doc-line.short{width:18px}
.product-journey-mini>span:last-child:not(.pj-owner){margin-left:auto;color:#426c98;font:700 10px var(--ui);white-space:nowrap}
.pj-avatar,.pj-proof,.pj-follow{display:grid;flex:0 0 30px;width:30px;height:30px;place-items:center;border-radius:50%;color:#fff;background:#245f9d;font:700 9px var(--ui)}
.pj-follow{background:#d8a33d}.pj-follow .ico{width:14px;height:14px}.pj-proof{background:#288e68}.pj-proof .ico{width:15px;height:15px}.pj-owner{display:flex;min-width:0;flex-direction:column}.pj-owner b{color:#23314b;font:650 11px var(--font);white-space:nowrap}.pj-owner small{color:#7b879b;font:500 9px var(--font);white-space:nowrap}.product-journey-mini>.ico{width:14px;height:14px;margin-left:auto;color:#5f88b2}
.product-journey-result{margin-top:auto;padding-top:15px;color:#254f7f;font:700 10.5px var(--ui);letter-spacing:.03em}
.product-journey-card.verify .product-journey-result{color:#278462}
.product-journey-source,.product-journey-finish{position:absolute;z-index:3;top:50%;display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid #d9e2ed;border-radius:14px;background:#fff;box-shadow:0 15px 28px -24px #101d38;transform:translateY(-50%)}
.product-journey-source{left:14px}.product-journey-finish{right:14px}.product-journey-source>.ico,.product-journey-finish>.ico{width:16px;height:16px;color:#2a68a8}.product-journey-finish>.ico{color:#278c67}
.product-journey-source span,.product-journey-finish span{display:flex;flex-direction:column}.product-journey-source small,.product-journey-finish small{color:#8995a8;font:750 7px var(--ui);letter-spacing:.11em}.product-journey-source b,.product-journey-finish b{color:#25314a;font:650 9px var(--font);white-space:nowrap}
@keyframes product-journey-signal{0%{left:0}100%{left:100%}}
@media(prefers-reduced-motion:no-preference){.product-journey.is-running .product-journey-signal{animation:product-journey-signal 4.6s cubic-bezier(.35,.05,.3,1) infinite}}
.site[data-motion=paused] .product-journey-signal{animation:none!important}
@media(max-width:700px){
 .product-detail-shell{padding:34px 0 40px}
 .product-detail-label{margin-bottom:12px;font-size:9.5px}
 .product-journey-heading{display:block;margin-bottom:20px}
 .product-journey-heading h2{font-size:clamp(30px,8vw,38px);line-height:1.08}
 .product-journey-heading>p{max-width:31ch;margin:12px 0 0;font-size:14px;text-align:left}
 .product-journey-board{display:block;padding:42px 16px;border-radius:25px}
 .product-journey-grid{grid-template-columns:1fr;gap:16px}
 .product-journey-track{left:30px;right:auto;top:28px;bottom:28px;width:2px;height:auto;background:linear-gradient(180deg,#c9d9ea,#d9aa4b 48%,#8eb9e0);transform:none}
 .product-journey-track::before,.product-journey-track::after{top:auto;left:50%;transform:translateX(-50%)}.product-journey-track::before{top:0}.product-journey-track::after{top:auto;right:auto;bottom:0}
 .product-journey-signal{top:0;left:50%;transform:translate(-50%,-50%)}
 .product-journey-card{min-height:0;padding:20px 20px 17px 56px;border-radius:20px}
 .product-journey-card::after{left:-9px;bottom:50%;transform:translateY(50%)}
 .product-journey-card-top{margin-bottom:12px}.product-journey-card h3{font-size:22px}.product-journey-card>p{min-height:0;font-size:13px}.product-journey-mini{margin-top:13px}.product-journey-result{padding-top:12px}
 .product-journey-source,.product-journey-finish{display:none}
 @keyframes product-journey-signal{0%{top:0}100%{top:100%}}
}
.section-next{min-height:46px;padding:0 17px;border:1px solid #d7dce6;border-radius:999px;background:#fff;box-shadow:0 12px 26px -22px #10193580}
.section-next:hover{border-color:#aeb7c9;background:#f9fafc}
.rv{background:
  radial-gradient(70% 90% at 88% 48%,#dce8f7 0%,#edf2f8 42%,transparent 72%),
  linear-gradient(180deg,#f8f8f6 0%,#f2f5f8 100%)}
/* the '02 / PRODUCT' label was removed (owner, 10 Oct) */
.du{position:relative;background:#0d142b;color:#fff;overflow:hidden;border-radius:clamp(32px,4vw,64px) clamp(32px,4vw,64px) 0 0}
/* section numbers (02–06) removed from the home page (owner, 10 Oct: minimum text) */
.du-title{color:#fff}.du-title span{color:#72aeea}
.du-stage{border:1px solid #ffffff1f;box-shadow:0 42px 80px -42px #000}
.du-cap{color:#aeb7ca}.du-cap b{color:#fff}
.du-hint{color:#aeb8ce}
.du .hl-dots{background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff12}
.du .hl-dot{background:#74809a}.du .hl-dot.on{background:#ffffff2b}.du .hl-dot i{background:#fff}
.du .section-next{color:#fff;border-color:#ffffff2b;background:#ffffff0c;box-shadow:none}
.du .section-next:hover{border-color:#ffffff66;background:#ffffff14}
.du .section-next>span{color:#8fa0bd}
.ig-copy::before{content:'04 / CONNECT';display:block;margin:0 0 16px;color:var(--blue);font:750 10.5px var(--ui);letter-spacing:.18em}
@media(min-width:1280px){
  .rv{min-height:100svh;padding-top:clamp(90px,11svh,124px);padding-bottom:clamp(74px,9svh,104px)}
  .rv-in{display:grid;grid-template-columns:minmax(300px,25%) minmax(0,1fr);grid-template-rows:auto;grid-template-areas:'copy product';align-content:center;align-items:start;column-gap:clamp(28px,3.2vw,54px);width:min(1480px,100%);min-height:calc(100svh - 210px);margin:0 auto}
  .rv-head{grid-area:copy;align-self:start;text-align:left}
  .rv-sub{max-width:16ch;margin-top:22px;font-size:clamp(18px,1.45vw,22px);line-height:1.45}
  .rv-stage{grid-area:product;align-self:start;width:100%;margin:0;--pw:108px;--pg:8px}
  .rv-stage.side .rvd{width:min(900px,calc(100% - 2*(var(--pw) + var(--pg))),calc((100svh - 138px)*1.4))}
  .du{padding-top:clamp(68px,8vh,92px)}
  .du::before{margin-bottom:22px}
  .du-title{max-width:none;font-size:clamp(46px,4.3vw,64px);white-space:nowrap}
  .ig-copy::before{margin-bottom:20px}}
@media(max-width:700px){
  .rv-head::before,.du::before,.ig-copy::before{font-size:9.5px;letter-spacing:.15em}
  .rv-head::before{margin-bottom:13px}
  .du{border-radius:30px 30px 0 0;padding-top:32px}
  .du::before{margin-bottom:14px}}

/* ============ "One OS. Many capabilities." — four new pictures (owner, 7 Oct night) ============ */
.du-title span{color:var(--blue)}
.duc-flow .du-stage{background:radial-gradient(70% 60% at 50% 48%,#3b3384 0%,#1a1d3d 62%,#0f1226 100%)}
.duc-play .du-stage{background:radial-gradient(70% 60% at 50% 48%,#24508f 0%,#152446 62%,#0e1529 100%)}
.duc-risk .du-stage{background:radial-gradient(70% 60% at 50% 48%,#5a2a4e 0%,#2a1630 62%,#160d1b 100%)}
.duc-sync .du-stage{background:radial-gradient(70% 60% at 50% 48%,#226152 0%,#132b26 62%,#0d1a17 100%)}

/* Four deliberately empty capability panels: desktop split, mobile stacked slots. */
.cap-shell-section{--font:NuvenaFigtree,Figtree,NuvenaRound,Quicksand,sans-serif;overflow:clip;padding-bottom:24px}
.cap-shell-section .du-title{white-space:normal}
/* No scroll travel of its own (owner, 10 Oct: natural scrolling): the page scrolls past the deck; cards change by dots,
   arrow keys or a sideways swipe/drag. pan-y hands vertical finger moves to the page. */
.cap-shell-scroll{--cap-panel-height:clamp(180px,calc(100svh - var(--bar,0px) - 190px),400px);--cap-step:clamp(180px,30svh,300px);height:calc(var(--cap-panel-height) + 36px);overflow:hidden;overscroll-behavior-x:contain;touch-action:pan-y;scrollbar-width:none;border-radius:28px}
.cap-shell-scroll::-webkit-scrollbar{display:none}
.cap-shell-scroll:focus-visible{outline:2px solid #82b7ef;outline-offset:5px}
.cap-shell-track{position:relative;height:calc(var(--cap-panel-height) + 36px)}
.cap-dots{display:flex;justify-content:center;gap:10px;flex-shrink:0;margin-top:16px}
.cap-dot{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:99px;background:#ffffff47;cursor:pointer;transition:width .35s var(--ease),background .35s var(--ease)}
.cap-dot::after{content:"";position:absolute;inset:-14px -7px}
.cap-dot.on{width:26px;background:#fff}
.cap-dot:focus-visible{outline:2px solid #82b7ef;outline-offset:4px}
/* All four cards occupy the SAME grid cell from the first frame, not separate rows. */
.cap-shell-stack{position:sticky;top:0;isolation:isolate;display:grid;padding-top:36px}
.cap-shell{grid-area:1/1;position:relative;z-index:calc(4 - var(--deck-depth));display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);height:var(--cap-panel-height);min-width:0;padding:clamp(24px,3.5vw,48px);border:1px solid #ffffff29;border-radius:28px;background:#141e36;box-shadow:0 -18px 40px -28px #0009;transform:translateY(calc(var(--deck-depth)*-12px)) scale(calc(1 - var(--deck-depth)*.022));transform-origin:50% 0;transition:transform .45s cubic-bezier(.22,1,.36,1);pointer-events:none}
.cap-shell[data-front="true"]{pointer-events:auto}
.cap-shell:nth-child(even){background:#172139}
.cap-shell-copy,.cap-shell-visual{min-width:0;border:1px solid #ffffff12;border-radius:18px}
.cap-shell-copy{align-self:center;min-height:0;height:65%;background:#ffffff02}
.cap-shell-visual{min-height:0;height:100%;background:#0d142b66}
@media(max-width:900px){
 .cap-shell-scroll{border-radius:24px}
 .cap-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,2.4fr);gap:20px;padding:22px;border-radius:24px}
 .cap-shell-copy{height:100%;border-radius:14px}
 .cap-shell-visual{border-radius:16px}
 .cap-shell-section .du-title{white-space:normal;font-size:clamp(26px,6.2vw,42px);line-height:1.15}
 .cap-shell-section .du-title span{display:block}
}
/* Keep the stack active in short laptop/landscape windows; fit the empty slots instead. */
@media(max-height:600px){
 .cap-shell{padding:18px;gap:16px}
}
@media(prefers-reduced-motion:reduce){.cap-shell{transition:none}}
.site[data-motion="paused"] .cap-shell{transition:none}
/* a real workflow view: trigger, AI extraction, ownership, follow-up and verified close */
.hla-flow{position:relative;width:min(430px,100%);padding:16px;border-radius:22px;background:#f8f9fc;color:#101935;box-shadow:0 28px 54px -28px #000b,0 0 0 1px #ffffff1f}
.hla-wf-head{display:flex;align-items:center;justify-content:space-between;padding:2px 3px 13px;border-bottom:1px solid #e3e6ee}
.hla-wf-head>div{display:grid;gap:2px}.hla-wf-head small{font:700 9px var(--ui);letter-spacing:.12em;color:#838ba0}.hla-wf-head b{font:650 14px var(--ui)}
.hla-wf-head>span{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:99px;background:#e7f5ed;color:#26825a;font:700 10px var(--ui)}
.hla-wf-head>span i{width:6px;height:6px;border-radius:50%;background:#2f9e6a}
.hla-wf{display:flex;flex-direction:column;align-items:center;padding:12px 7px 8px}
.hla-wf-node{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:48px;padding:7px 11px;border:1px solid #dfe3ec;border-radius:13px;background:#fff;box-shadow:0 2px 0 #e2e5ec,0 10px 20px -18px #10193580}
.hla-wf-node em{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#edf2fa;color:var(--blue);font-style:normal}.hla-wf-node em .ico{width:16px;height:16px}
.hla-wf-node>span{display:grid;gap:1px}.hla-wf-node b{font:650 12.5px var(--ui)}.hla-wf-node small{font:500 10px var(--ui);color:#7b849a}
.hla-wf-node strong{padding:4px 7px;border-radius:8px;background:#e7f5ed;color:#26825a;font:700 9px var(--ui)}
.hla-wf-node.n1 em{background:#eeeafd;color:var(--violet)}.hla-wf-node.n3{border-color:#cfc4f1}.hla-wf-node.n3 em{background:#f0ebfb;color:var(--violet)}.hla-wf-node.n4{border-color:#cde7d8}
.hla-wf-line{position:relative;width:2px;height:12px;background:linear-gradient(#8fa6d6,#a999d4)}.hla-wf-line::after{content:'';position:absolute;left:-2px;bottom:-1px;width:6px;height:6px;border-right:1.5px solid #8174b8;border-bottom:1.5px solid #8174b8;transform:rotate(45deg)}
.hla-wf-line i{position:absolute;left:-2px;top:1px;width:6px;height:6px;border-radius:50%;background:#6a4fb8;opacity:0}
.hla-wf-foot{display:flex;align-items:center;justify-content:center;gap:7px;margin:2px 0 0;color:#6f7890;font:600 10.5px var(--ui)}.hla-wf-foot .ico{width:14px;height:14px}
/* playbooks: pick one, import it, live in days */
.hla-play{display:flex;flex-direction:column;align-items:center;gap:22px;width:min(440px,100%)}
@media(min-width:701px){.hla-play .hla-books{grid-template-columns:repeat(2,1fr)}}
.hla-books{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.hla-book{display:flex;align-items:center;gap:8px;padding:13px 14px;border-radius:13px;background:#ffffff14;border:1px solid #ffffff24;color:#e8ecf7;font:600 13px var(--ui);white-space:nowrap;overflow:hidden}
.hla-book .ico{width:16px;height:16px;flex:none}
.hla-book.pick{background:#fff;color:#101935;box-shadow:0 0 0 2px #7fa6e6,0 20px 34px -18px #000c}
.hla-book.pick .ico{color:var(--blue)}
.hla-imp{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:15px;background:#fff;color:#101935;font:600 14px var(--ui);box-shadow:0 22px 40px -22px #000c}
.hla-bar{flex:1;height:6px;border-radius:4px;background:#e8ebf2;overflow:hidden}
.hla-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--blue),var(--violet));transform-origin:left}
.hla-imp-b{display:grid}
.hla-imp-b em{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 13px;border-radius:10px;font:700 12.5px var(--ui);font-style:normal;white-space:nowrap}
.hla-imp-b .x{background:#101935;color:#fff}.hla-imp-b .y{background:#2f9e6a;color:#fff;opacity:0}
.hla-imp-b .ico{width:14px;height:14px;stroke-width:2.6}
/* risk: bars fall once automation is on */
.hla-risk{display:flex;flex-direction:column;gap:12px;width:min(420px,100%);padding:20px 22px;border-radius:20px;background:#fff;color:#101935;box-shadow:0 26px 50px -26px #000c}
.hla-rh{display:flex;align-items:center;justify-content:space-between;margin:0 0 4px;font:650 15px var(--ui)}
.hla-auto{display:inline-flex;align-items:center;gap:7px;font:600 12px var(--ui);color:#2f8a5f}
.hla-auto i{position:relative;width:30px;height:18px;border-radius:9px;background:#2f9e6a}
.hla-auto i::after{content:'';position:absolute;top:2px;left:14px;width:14px;height:14px;border-radius:50%;background:#fff}
.hla-rk{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:12px}
.hla-rk small{font:500 12.5px var(--ui);color:#5b6480}
.hla-rk span{height:10px;border-radius:6px;background:#f0f1f5;overflow:hidden}
.hla-rk span i{display:block;height:100%;width:var(--b);border-radius:inherit;background:linear-gradient(90deg,#2f9e6a,#7cc49f)}
.hla-rf{display:inline-flex;align-items:center;gap:7px;margin:6px 0 0;font:600 12.5px var(--ui);color:#2f8a5f}
.hla-rf .ico{width:16px;height:16px}
/* cases: the portal syncs, hearing dates arrive */
.hla-sync{display:flex;flex-direction:column;gap:11px;width:min(400px,100%)}
.hla-sh{display:flex;align-items:center;gap:9px;margin:0 0 4px;color:#e8ecf7;font:600 14px var(--ui)}
.hla-sh>.ico{width:20px;height:20px}
.hla-spin{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;background:#ffffff1a;font:600 12px var(--ui)}
.hla-spin .ico{width:14px;height:14px}
.hla-case{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:15px;background:#fff;color:#101935;box-shadow:0 18px 32px -22px #000c}
.hla-case>.ico{width:20px;height:20px;color:var(--blue)}
.hla-case div{flex:1}
.hla-case b{display:block;font:600 14.5px var(--ui)}
.hla-case small{font:500 11.5px var(--ui);color:#8a92a8}
.hla-date{display:grid;font:700 13.5px var(--ui)}
.hla-date em{grid-area:1/1;justify-self:end;font-style:normal;padding:5px 10px;border-radius:9px}
.hla-date .x{color:#9aa1b4}.hla-date .y{background:#e6effb;color:#2364a8;opacity:0}
@media(prefers-reduced-motion:no-preference){
  .hl-card.on .hla-blk{animation:hla-in .5s cubic-bezier(.3,1.4,.5,1) both}.hl-card.on .hla-blk.b1{animation-delay:.12s}.hl-card.on .hla-blk.b2{animation-delay:.24s}.hl-card.on .hla-blk.b4{animation-delay:.36s}
  .hl-card.on .hla-drag{animation:hla-dragin 2.8s cubic-bezier(.5,0,.2,1) .7s both}
  .hl-card.on .hla-slot{animation:hla-slotfade 2.8s ease .7s both}
  .hl-card.on .hla-book{animation:hla-up .45s ease both}.hl-card.on .hla-book:nth-child(2){animation-delay:.08s}.hl-card.on .hla-book:nth-child(3){animation-delay:.16s}.hl-card.on .hla-book:nth-child(4){animation-delay:.24s}.hl-card.on .hla-book:nth-child(5){animation-delay:.32s}.hl-card.on .hla-book:nth-child(6){animation-delay:.4s}
  .hl-card.on .hla-bar i{animation:hla-fill 1.6s cubic-bezier(.4,0,.2,1) 1.1s both}
  .hl-card.on .hla-imp-b .x{animation:hla-out .3s ease 2.7s both}.hl-card.on .hla-imp-b .y{animation:hla-popin .45s cubic-bezier(.3,1.6,.5,1) 2.75s both}
  .hl-card.on .hla-rk span i{animation:hla-fall 1.8s cubic-bezier(.4,0,.2,1) 1.2s both}
  .hl-card.on .hla-auto i::after{animation:hla-toggle .4s ease .7s both}
  .hl-card.on .hla-spin .ico{animation:hla-rot 1s linear 3}
  .hl-card.on .hla-case{animation:hla-in .5s ease both}.hl-card.on .hla-case.c1{animation-delay:.12s}.hl-card.on .hla-case.c2{animation-delay:.24s}
  .hl-card.on .hla-date .x{animation:hla-out .3s ease 1.6s both}.hl-card.on .hla-date .y{animation:hla-popin .45s cubic-bezier(.3,1.6,.5,1) 1.65s both}
  .hl-card.on .hla-case.c1 .hla-date .x{animation-delay:1.9s}.hl-card.on .hla-case.c1 .hla-date .y{animation-delay:1.95s}.hl-card.on .hla-case.c2 .hla-date .x{animation-delay:2.2s}.hl-card.on .hla-case.c2 .hla-date .y{animation-delay:2.25s}}
@media(prefers-reduced-motion:reduce){.hla-imp-b .x,.hla-date .x{opacity:0}.hla-imp-b .y,.hla-date .y{opacity:1}.hla-slot{display:none}}
@keyframes hla-dragin{0%{transform:translate(80px,120px) rotate(5deg)}60%{transform:translate(4px,-5px) rotate(-1deg)}75%,100%{transform:none}}
@keyframes hla-slotfade{0%,60%{border-color:#ffffff55}75%,100%{border-color:#ffffff00}}
@keyframes hla-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hla-out{to{opacity:0;transform:scale(.8)}}
@keyframes hla-popin{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes hla-fall{from{width:var(--a);background:linear-gradient(90deg,#c8326a,#e38aa9)}to{width:var(--b)}}
@keyframes hla-toggle{from{left:2px}to{left:14px}}
@keyframes hla-rot{to{transform:rotate(360deg)}}
@media(max-width:700px){.hla-books{grid-template-columns:repeat(2,1fr)}.hla-book{font-size:12px;padding:10px}.hla-blk,.hla-drag{height:38px;font-size:12px;padding:0 11px}.hla-slot{width:156px;height:38px}
  .hla-chain{gap:8px 12px}.hla-rk{grid-template-columns:80px 1fr}.hla-risk{padding:16px}.hla-case{padding:11px 13px}.hla-case b{font-size:13px}}


/* the progress line under Learn more is gone (owner, 8 Oct: "gandi si lag rahi hai") */
#nvj .nvj-progress{display:none!important}

/* Each chapter is one viewport, including the fixed header's reserved space.
   Anchor padding is ONLY the hiring bar: the chapter itself reserves the menu.
   Size the content to this frame, never enlarge every chapter to the tallest child. */
html.home-story{scroll-padding-top:var(--bar,0px);scroll-padding-bottom:0;scroll-snap-type:none}
.home-chapters{--chapter-height:calc(100dvh - var(--bar,0px));--chapter-top:100px;--chapter-bottom:max(28px,calc(var(--ck-h,0px) + 16px));--chapter-room:calc(var(--chapter-height) - var(--chapter-top) - var(--chapter-bottom));display:block}
.home-chapters>section{height:var(--chapter-height);min-height:0;min-width:0;margin-block:0;scroll-margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.home-chapters>#nvj.nvj-simple{height:var(--chapter-height);min-height:0;padding-top:var(--chapter-top);padding-bottom:var(--chapter-bottom)}
.home-chapters>section:not(#nvj){padding-top:var(--chapter-top);padding-bottom:var(--chapter-bottom)}
.home-chapters>.rv{display:flex;align-items:flex-start}
.home-chapters .rv-in{min-height:0;width:100%;height:100%;align-content:start}
.home-chapters .rv-head,.home-chapters .rv-stage{transform:none;opacity:1}
.home-chapters .rv-stage{margin-top:20px}
.home-chapters .rvd{width:min(760px,100%,calc((var(--chapter-room) - 200px)*1.36))}
.home-chapters .rv-stage.side .rvd{width:min(900px,calc(100% - 2*(var(--pw) + var(--pg))),calc((var(--chapter-room) + 10px)*1.36))}
.home-chapters .rvd.port{width:min(304px,100%,calc((var(--chapter-room) - 186px)*.64))}
.home-chapters>.product-detail-shell{display:flex;flex-direction:column}
.home-chapters>.product-detail-shell>.container{display:flex;flex-direction:column;flex:1;min-height:0;width:100%}
.home-chapters .product-journey-heading{flex-shrink:0}
.home-chapters .product-journey-board{flex:1;min-height:0}
.home-chapters>.cap-shell-section{display:flex;flex-direction:column}
.home-chapters>.cap-shell-section::before{flex-shrink:0;margin-bottom:16px}
.home-chapters>.cap-shell-section>.container{display:flex;flex-direction:column;flex:1;min-height:0;width:100%}
.home-chapters .du-title{flex-shrink:0;font-size:clamp(28px,4vw,58px);line-height:1.1;margin-bottom:24px}
.home-chapters .cap-shell-scroll{container-type:size;flex:1;min-height:0;height:auto}
.home-chapters .cap-shell-track{--cap-panel-height:calc(100cqh - 36px)}
.home-chapters>.team-work>.team-work-inner{width:100%;margin:0 auto}
.home-chapters .team-work-heading{margin-top:0}
.home-chapters>.connect{display:flex;flex-direction:column}
.home-chapters .connect-heading,.home-chapters .connect-features,.home-chapters .connect-cta{flex-shrink:0}
.home-chapters .connect-heading{margin:0 auto}
.home-chapters .connect-eyebrow{color:var(--blue);font-weight:750}
.home-chapters .connect-stage{width:100%;flex:1 1 200px;min-height:110px;max-height:300px}
.home-chapters .connect-cta{margin-top:auto;padding-top:20px}
@media(min-width:1280px){.home-chapters .rv-stage{margin-top:0}}
@media(max-width:359px){#nvj .nvj-simple-actions{flex-wrap:wrap}}
@media(max-width:700px){
 .home-chapters{--chapter-top:88px;--chapter-bottom:max(20px,calc(var(--ck-h,0px) + 12px))}
 .home-chapters #nvj .nvj-simple-copy{height:100%;min-height:0;gap:0}
 .home-chapters #nvj .nvj-simple-sub{margin:20px auto 12px}
 .home-chapters #nvj .nvj-execution-flow{flex:1;min-height:0;max-height:280px;width:100%;margin:8px auto}
 .home-chapters #nvj .nvj-cycle-svg{height:100%;max-height:280px}
 .home-chapters #nvj .nvj-simple-actions{flex-shrink:0;margin-top:auto}
 .home-chapters .du-title{font-size:clamp(26px,6.2vw,38px);margin-bottom:18px}
 .home-chapters .connect-stage{flex-basis:150px;max-height:200px}
 .home-chapters .connect-cta{padding-top:16px}
}
@media(max-height:780px){
 .home-chapters .connect-eyebrow{margin-bottom:12px}
 .home-chapters .connect-heading h2{font-size:clamp(30px,4vw,48px)}
 .home-chapters .connect-intro{margin-top:12px;font-size:16px;line-height:1.35}
 .home-chapters .connect-stage{margin-top:10px}
 .home-chapters .connect-features{gap:16px}
 .home-chapters .connect-feature-number{margin-bottom:5px}
 .home-chapters .connect-features h3{margin-bottom:5px}
 .home-chapters .connect-features p{font-size:13px;line-height:1.35}
 .home-chapters .connect-cta{padding-top:12px}
 .home-chapters #nvj .nvj-simple-copy{top:0}
 .home-chapters #nvj .nvj-simple-sub{margin-top:18px;margin-bottom:18px}
}
@media(min-width:701px) and (max-height:650px){
 .home-chapters .connect-hub{flex-direction:column;width:100px;height:100px;border-radius:24px;gap:8px}
 .home-chapters .connect-hub .n-mark{width:44px;height:44px}
 .home-chapters .connect-network{--connect-tile:56px;--connect-gap:20px}
 .home-chapters .connect-tool img,.home-chapters .connect-tool svg{width:30px;height:30px}
}
/* Short mobile windows still keep the original CTAs and all copy in the frame. */
@media(max-width:700px) and (max-height:740px){
 .home-chapters{--chapter-top:76px;--chapter-bottom:max(16px,calc(var(--ck-h,0px) + 8px))}
 .home-chapters #nvj .nvj-simple-sub{font-size:16px;margin:12px auto 6px}
 .home-chapters .connect-eyebrow{margin-bottom:8px}
 .home-chapters .connect-intro{font-size:14px}
 .home-chapters .connect-stage{min-height:108px}
 .home-chapters .connect-features h3{font-size:14px}
 .home-chapters .connect-features p{font-size:12px}
}
@media(max-width:700px) and (max-height:620px){
 .home-chapters .connect-heading{padding-inline:16px}
 .home-chapters .connect-heading h2{font-size:26px}
 .home-chapters .connect-eyebrow{font-size:9px;margin-bottom:6px}
 .home-chapters .connect-intro{font-size:13px;margin-top:8px}
 .home-chapters .connect-stage{min-height:80px;margin-top:6px}
 .home-chapters .connect-hub{width:72px;height:72px;gap:5px;border-radius:20px}
 .home-chapters .connect-hub .n-mark{width:32px;height:32px}
 .home-chapters .connect-features{padding-inline:16px;gap:12px}
 .home-chapters .connect-features article{padding-left:8px}
 .home-chapters .connect-feature-number{display:none}
 .home-chapters .connect-features h3{font-size:13px}
 .home-chapters .connect-features p{line-height:1.3}
 .home-chapters .connect-cta{padding-top:8px}
}
/* Landscape phones / short windows use two columns rather than cropping a
   portrait composition. Content and actions remain present. */
@media(min-width:701px) and (max-height:500px){
 .home-chapters{--chapter-top:76px;--chapter-bottom:max(16px,calc(var(--ck-h,0px) + 12px))}
 .home-chapters #nvj .nvj-simple-copy{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:'title sub' 'actions intro';align-items:center;gap:10px 24px}
 .home-chapters #nvj #nvj-simple-title{grid-area:title;font-size:clamp(24px,3.3vw,36px)}
 .home-chapters #nvj .nvj-simple-sub{grid-area:sub;font-size:11.7px;line-height:1.35;margin:0}
 .home-chapters #nvj .nvj-simple-actions{grid-area:actions;gap:10px}
 .home-chapters .rv-in{display:grid;grid-template-columns:22% minmax(0,1fr);gap:16px;align-items:start}
 .home-chapters .rv-head{text-align:left}
 .home-chapters .rv-head::before{margin-bottom:10px}
 .home-chapters .rv-stage:not(.side){margin:0;grid-template-areas:'tl dev tr' 'bl dev br';grid-template-columns:1fr 1.3fr 1fr;gap:12px 8px}
 .home-chapters .rv-stage:not(.side) .rvd{width:min(100%,calc((var(--chapter-room) - 16px)*1.36))}
 .home-chapters .rv-pill{font-size:11px;padding:6px;gap:5px;white-space:normal;text-align:left}
 .home-chapters .rv-pill-i{width:22px;height:22px}
 .home-chapters .du-title{font-size:26px;margin-bottom:10px}
 .home-chapters .du-title span{display:inline}
 .home-chapters>.cap-shell-section::before{margin-bottom:8px}
 .home-chapters .cap-shell{grid-template-columns:1fr 1.2fr;grid-template-rows:1fr;padding:12px;gap:12px}
 .home-chapters>.connect{display:grid;grid-template-columns:40% 60%;grid-template-rows:auto minmax(0,1fr);gap:8px 0;padding-inline:24px}
 .home-chapters .connect-heading{grid-column:1;grid-row:1;padding-inline:12px}
 .home-chapters .connect-heading h2{font-size:24px}
 .home-chapters .connect-eyebrow{font-size:9px;margin-bottom:6px}
 .home-chapters .connect-intro{font-size:12px;margin-top:6px}
 .home-chapters .connect-stage{grid-column:2;grid-row:1;min-height:80px;height:80px;max-height:80px;margin:0}
 .home-chapters .connect-hub{width:68px;height:68px;gap:4px;border-radius:18px}
 .home-chapters .connect-hub .n-mark{width:30px;height:30px}
 .home-chapters .connect-hub>span{font-size:8px}
 .home-chapters .connect-features{grid-column:2;grid-row:2;gap:10px;padding-inline:0}
 .home-chapters .connect-features article{padding-left:8px}
 .home-chapters .connect-feature-number{display:none}
 .home-chapters .connect-features h3{font-size:12px}
 .home-chapters .connect-features p{font-size:11px;line-height:1.25}
 .home-chapters .connect-cta{grid-column:1;grid-row:2;align-self:center;margin:0;padding:0}
}

/* Phone story: compact, content-led chapters rather than six forced screens.
   Keep the desktop content and hierarchy; let larger text grow naturally. */
@media(max-width:700px){
 html.home-story{scroll-padding-top:calc(var(--bar,0px) + 68px)}
 .home-chapters{--chapter-top:36px;--chapter-bottom:36px}
 .home-chapters>section{height:auto;min-height:0;scroll-snap-align:none;scroll-snap-stop:normal}
 .home-chapters>#nvj.nvj-simple{height:auto;min-height:0;padding:108px 24px 80px;align-items:start}
 .home-chapters #nvj .nvj-simple-copy{height:auto;top:0;gap:0}
 .home-chapters #nvj #nvj-simple-title{width:100%;font-size:clamp(17px,5.65vw,34px);line-height:1.2;transform:none;translate:none}
 #nvj .nvj-simple-line{white-space:nowrap}
 #nvj .nvj-title-business{display:inline}
 .home-chapters #nvj .nvj-simple-sub{max-width:36ch;margin:28px auto 30px;font-size:15px;line-height:1.6;translate:none}
 .home-chapters #nvj .nvj-simple-actions{margin-top:0;gap:12px;flex-wrap:wrap}
 #nvj.nvj-simple .nvj-demo{height:48px;padding-inline:22px;font-size:15px}
 #nvj .nvj-ambient-desktop{display:none}
 #nvj .nvj-ambient-mobile{display:block;inset:auto 0 18px;width:100%;height:160px;transform:none;stroke-opacity:.26;mask-image:linear-gradient(180deg,transparent,#000 30%)}
 #nvj .nvj-ambient-lines .nvj-ambient-gold{stroke-opacity:.33}
 #nvj-simple-title em{position:relative;display:inline-block}
 #nvj-simple-title .nvj-outcomes-underline{display:block;position:absolute;left:2%;bottom:-.09em;width:95%;height:.16em;overflow:visible;pointer-events:none}
 .nvj-outcomes-underline path{fill:none;stroke:#c99535;stroke-width:3;stroke-opacity:.8;stroke-linecap:round}
 .home-chapters .rv-in{height:auto;min-height:0}
 .home-chapters .rv-product-copy{max-width:28ch;margin:18px auto 0;font-size:14px;text-align:center}
 .home-chapters .rv-stage{margin-top:24px}
 .home-chapters .rvd{width:min(100%,360px)}
 .home-chapters .rvd.port{width:min(100%,320px)}
 .home-chapters .product-journey-board{flex:none;min-height:0}
 .home-chapters .cap-shell-scroll{flex:none;height:336px}
 .home-chapters .cap-shell-track{--cap-panel-height:300px;--cap-step:180px}
 .home-chapters .team-work-heading h2{font-size:clamp(28px,7.4vw,38px);line-height:1.12}
 .home-chapters .connect-stage{flex:none;height:150px;min-height:0;margin:16px auto}
 .home-chapters .connect-features{gap:22px 18px}
 .home-chapters .connect-features h3{font-size:15px}
 .home-chapters .connect-features p{font-size:13px;line-height:1.45}
 .home-chapters .connect-cta{margin-top:24px;padding-top:0}
}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
 .nvj-ambient-mobile .nvj-ambient-signal{display:block;stroke:#2364a8;stroke-width:2.3;stroke-opacity:.65;stroke-linecap:round;stroke-dasharray:1.8 98.2;animation:nvj-signal-travel 7s linear infinite;animation-delay:var(--signal-delay)}
 .nvj-ambient-signal.nvj-signal-gold{stroke:#c99535;stroke-opacity:.6}
}
.site[data-motion=paused] .nvj-ambient-mobile .nvj-ambient-signal{animation:none;display:none}

/* Capability 01: Workflow Studio. The SVG stays readable without motion. */
.home-chapters .cap-shell-section .du-title{font-size:clamp(28px,3vw,42px);margin-bottom:20px}
.home-chapters .cap-shell-section .du-title span{color:#f2f5fc}
.cap-done{position:relative;display:inline-block;font-style:italic;white-space:nowrap}
.cap-done-underline{position:absolute;left:2%;bottom:-.09em;width:95%;height:.16em;overflow:visible;pointer-events:none}
.cap-done-underline path{fill:none;stroke:#c99535;stroke-width:1.8;stroke-opacity:.9;stroke-linecap:round;vector-effect:non-scaling-stroke}
.cap-shell[data-filled=true]{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:24px;padding:28px}
.cap-shell[data-filled=true] .cap-shell-copy{height:auto;background:none;border:0;border-radius:0}
.cap-shell-copy h3{margin:0 0 30px;font:650 clamp(28px,2.8vw,42px)/1.12 var(--font);letter-spacing:-.035em;color:#fff}
.cap-shell[data-filled=true] .cap-shell-copy{container-type:inline-size}
.cap-shell[data-filled=true] .cap-shell-copy h3{font-size:clamp(14px,7cqi,26px);white-space:nowrap}
.cap-shell-copy p{position:relative;margin:0;padding-left:18px;font:450 clamp(13px,1.18vw,17px)/1.65 var(--font);color:#b9c7de}
.cap-shell-copy p::before{content:'';position:absolute;left:0;inset-block:3px;width:2px;border-radius:2px;background:linear-gradient(#d4a03c 0 35%,#6994c2 70%,#6994c220)}
.cap-shell-copy p{text-align:left;text-align-last:auto}
.cap-shell[data-filled=true] .cap-shell-visual{overflow:hidden;background:radial-gradient(circle,#8ca6cb26 .7px,transparent 1px) 0 0/16px 16px,#10192d;border-color:#8ca6cb26}
.studio-art{display:flex;flex-direction:column;width:100%;height:100%;padding:14px 8px 8px}
.studio-art-top{display:flex;align-items:center;gap:8px;padding:0 6px 10px;color:#acbdd5;font:650 10px/1.4 var(--font);letter-spacing:.05em}
.studio-art-top>span{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.studio-art-top b{font-weight:650;color:#edcd90}
.studio-art-top i{width:5px;height:5px;border-radius:50%;background:#d4a03c}
.studio-art-top small{font:450 10px/1.3 var(--font);letter-spacing:0;color:#8296b5}
.studio-svg{display:block;width:100%;flex:1;min-height:0;overflow:visible;font-family:var(--font)}
.studio-svg-phone{display:none}
.studio-node-box{fill:#1b2941;stroke:#49607d;stroke-width:1}
.studio-icon-bg{fill:#293e5d}
.studio-icon{color:#a9d0fc}
.studio-step{fill:#8298b8;font-size:9px;font-weight:600;letter-spacing:.06em}
.studio-node-title{fill:#f1f5fc;font-size:12.5px;font-weight:650}
.studio-node-detail{fill:#b4c4db;font-size:10px}
.studio-delivered .studio-node-box{fill:#153930;stroke:#4a9c7d}
.studio-delivered .studio-icon-bg{fill:#255342}
.studio-delivered .studio-icon{color:#96e4be}
.studio-delivered .studio-node-detail{fill:#96e4be}
.studio-followup .studio-node-box{stroke:#b99758}
.studio-followup .studio-node-detail{fill:#edcd90}
.studio-link{fill:none;stroke:#8298b8;stroke-width:1.4}
.studio-loop{fill:none;stroke:#b99758;stroke-width:1;stroke-dasharray:3 4;opacity:.8}
.studio-loop-label{fill:#c5ad83;font-size:11px}
.studio-pulse{fill:none;stroke:#e7bd65;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:12 100;stroke-dashoffset:112;opacity:0}
@keyframes studio-node-build{from{opacity:0}to{opacity:1}}
@keyframes studio-connection-build{from{stroke-dashoffset:100;opacity:0}10%{opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes studio-link-travel{0%{stroke-dashoffset:112;opacity:0}10%{opacity:1}85%{stroke-dashoffset:-12;opacity:1}100%{stroke-dashoffset:-12;opacity:0}}
@media(prefers-reduced-motion:no-preference){
 .studio-art.can-animate .studio-node,.studio-art.can-animate .studio-retry{opacity:0}
 .studio-art.can-animate .studio-link{stroke-dasharray:100;stroke-dashoffset:100;opacity:0}
 .studio-art.can-animate.has-started .studio-node{animation:studio-node-build .35s ease-out both;animation-delay:calc(var(--step)*.65s + .2s)}
 .studio-art.can-animate.has-started .studio-link{animation:studio-connection-build .45s ease-out both;animation-delay:calc(var(--step)*.65s + .5s)}
 .studio-art.can-animate.has-started .studio-pulse{animation:studio-link-travel .55s linear both;animation-delay:calc(var(--step)*.65s + .5s)}
 .studio-art.can-animate.has-started .studio-retry{animation:studio-node-build .6s ease-out 5.2s both}
 .studio-art.can-animate.has-started :is(.studio-node,.studio-link,.studio-pulse,.studio-retry){animation-play-state:paused}
 .studio-art.can-animate.has-started.is-running :is(.studio-node,.studio-link,.studio-pulse,.studio-retry){animation-play-state:running}
}
@media(max-width:900px){
 .cap-shell[data-filled=true]{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:16px;padding:20px}
 .cap-shell-copy h3{margin-bottom:18px;font-size:25px}
 .cap-shell-copy p{font-size:13px;line-height:1.5}
 .studio-svg-wide{display:none}.studio-svg-phone{display:block}
 .studio-art{padding:12px 6px 4px}
 .studio-art-top{font-size:8px;letter-spacing:.025em}
}
@media(max-width:700px){
 .home-chapters .cap-shell-section .du-title{font-size:28px;margin-bottom:18px}
 .home-chapters .cap-shell-scroll{height:clamp(480px,calc((100vw - 72px)*1.061 + 208px),584px)}
 .home-chapters .cap-shell-track{--cap-panel-height:calc(100cqh - 36px)}
 .home-chapters>.cap-shell-section>.container{padding-inline:16px}
 .cap-shell[data-filled=true]{padding:12px;gap:16px}
 .cap-shell-copy h3{font-size:24px;margin-bottom:16px}
 .cap-shell-copy p{font-size:13px;letter-spacing:-.01em}
}
@media(min-width:701px) and (max-height:500px){
 .cap-shell[data-filled=true]{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);grid-template-rows:minmax(0,1fr);padding:12px;gap:14px}
 .studio-svg-wide{display:block}.studio-svg-phone{display:none}
 .cap-shell-copy h3{font-size:22px;margin-bottom:8px}.cap-shell-copy p{font-size:12px;line-height:1.4}
 .studio-art{padding:8px}.studio-art-top{display:none}
}

/* Capability 02: scan the source, then extract Clause, Obligation and Task. */
.navio-ai-art{height:100%;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:18px;color:#dce7f7;font:450 13px/1.45 var(--font)}
.ai-art-label{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#8ea9ca;font-size:10px}
.ai-art-label>span{display:flex;align-items:center;gap:6px;letter-spacing:.12em;font-weight:650;color:#b8d5fb}
.ai-art-label svg{width:15px;height:15px}.ai-art-label small{font-size:10px}
.ai-review-layout{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) 54px minmax(0,1.2fr);grid-template-rows:minmax(0,1fr);align-items:center;flex:1;min-height:0}
.ai-document{display:block;justify-self:end;width:auto;height:100%;max-width:100%;min-width:0;min-height:0;aspect-ratio:210/297;overflow:hidden;filter:drop-shadow(0 8px 12px #0003);font-family:var(--font)}
.ai-paper-title{fill:#18283f;font-size:12px;font-weight:700;letter-spacing:.4px}
.ai-paper-kicker{fill:#758297;font-size:5px;font-weight:600;letter-spacing:.7px}
.ai-paper-heading{fill:#25394f;font-size:6.5px;font-weight:700;letter-spacing:.4px}
.ai-paper-body{fill:#4b5b70;font-size:6.3px}
.ai-clause-review rect{fill:#f2d58f;fill-opacity:.45}
.ai-clause-obligation rect{fill:#92c7f4;fill-opacity:.35}
.ai-connectors{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none;color:#9fb9dc}
.ai-connection{fill:none;stroke-width:1.5;stroke:#9fb9dc}.ai-connection-review{stroke:#dabb80}
.ai-outputs{position:relative;grid-column:3;display:grid;gap:8px;min-width:0}
.ai-output{position:relative;border:1px solid;border-radius:12px;padding:8px 10px;background:#1b2a41}
.ai-extracted-clause{border-color:#d2ad695e}.ai-obligations{border-color:#71b2ee5e}.ai-task{border-color:#8aceb35e}
.ai-output-title{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.ai-output-title svg{width:15px;height:15px;color:#dabb80}.ai-output-title b{font-size:14px;color:#f0f5fe}
.ai-obligations .ai-output-title svg{color:#9acbff}.ai-task .ai-output-title svg{color:#a0dfc2}
.ai-output p{margin:6px 0 0;font-size:13px;line-height:1.45}
.ai-task-owner{display:block;margin-top:4px;font-size:10px;color:#a0c7b8}
.ai-connection-task{stroke:#8aceb3}
.ai-insights{margin-top:12px;border-color:#b4a4e66b;background:#242b46}
.ai-insights .ai-output-title svg,.ai-connection-insights{color:#cbb9ff;stroke:#cbb9ff}
.ai-insight-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:6px}
.ai-insight-metrics>div{display:flex;align-items:center;gap:6px;min-width:0}
.ai-insight-metrics b{font-size:18px;line-height:1;color:#f0eaff;font-weight:650}
.ai-insight-metrics span{font-size:10px;line-height:1.25;color:#c0cbe0;max-width:90px}
.ai-art-footer{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;font-size:10px;color:#91aac9}.ai-art-footer b{font-weight:550;color:#e4c486}
.ai-scan{display:none;pointer-events:none;transform-box:view-box}
@keyframes ai-scan-pass{0%{transform:translateY(0);opacity:0}8%{opacity:1}90%{opacity:1}100%{transform:translateY(297px);opacity:0}}
@keyframes ai-clause-reveal{from{opacity:0}to{opacity:1}}
@keyframes ai-output-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){
 .navio-ai-art.can-animate .ai-scan{display:block;opacity:0}
 .navio-ai-art.can-animate :is(.ai-output,.ai-art-footer){opacity:0}
 .navio-ai-art.can-animate .ai-clause rect{opacity:0}
 .navio-ai-art.can-animate .ai-connection{stroke-dasharray:100;stroke-dashoffset:100;opacity:0}
 .navio-ai-art.can-animate.has-started .ai-scan{animation:ai-scan-pass 2.6s ease-in-out .2s both}
 .navio-ai-art.can-animate.has-started .ai-clause rect{animation:ai-clause-reveal .4s ease-out both}
 .navio-ai-art.can-animate.has-started .ai-clause-review rect{animation-delay:1.5s}
 .navio-ai-art.can-animate.has-started .ai-clause-obligation rect{animation-delay:2s}
 .navio-ai-art.can-animate.has-started .ai-connection{animation:studio-connection-build .55s ease-out both}
 .navio-ai-art.can-animate.has-started .ai-connection-review{animation-delay:1.7s}.navio-ai-art.can-animate.has-started .ai-connection-obligation{animation-delay:2.2s}.navio-ai-art.can-animate.has-started .ai-connection-task{animation-delay:2.8s}
 .navio-ai-art.can-animate.has-started .ai-connection-insights{animation-delay:3.7s}
 .navio-ai-art.can-animate.has-started :is(.ai-output,.ai-art-footer){animation:ai-output-reveal .5s ease-out both}
 .navio-ai-art.can-animate.has-started .ai-extracted-clause{animation-delay:2.1s}.navio-ai-art.can-animate.has-started .ai-obligations{animation-delay:2.7s}.navio-ai-art.can-animate.has-started .ai-task{animation-delay:3.3s}.navio-ai-art.can-animate.has-started .ai-art-footer{animation-delay:3.9s}
 .navio-ai-art.can-animate.has-started .ai-insights{animation-delay:4.1s}
 .navio-ai-art.can-animate.has-started :is(.ai-scan,.ai-clause rect,.ai-connection,.ai-output,.ai-art-footer){animation-play-state:paused}
 .navio-ai-art.can-animate.has-started.is-running :is(.ai-scan,.ai-clause rect,.ai-connection,.ai-output,.ai-art-footer){animation-play-state:running}
}
@media(max-width:900px){
 .navio-ai-art{padding:12px;gap:8px;font-size:12px}
 .ai-review-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:22px}
 .ai-document{justify-self:center}
 .ai-outputs{grid-column:1;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .ai-output{padding:8px 6px;border-radius:9px}.ai-output-title{gap:4px}.ai-output-title b{font-size:11px}.ai-output-title svg{width:12px;height:12px}
 .ai-output p{font-size:10px;margin:7px 0 0;line-height:1.4}.ai-task-owner{font-size:9px}
 .ai-insights{grid-column:1/-1;margin-top:16px}
 .ai-insight-metrics{gap:6px}.ai-insight-metrics>div{gap:4px}.ai-insight-metrics b{font-size:16px}.ai-insight-metrics span{font-size:9px}
 .ai-art-footer{font-size:9px}
}
@media(min-width:901px) and (max-height:760px){
 .navio-ai-art{padding:12px;gap:8px}.ai-review-layout{grid-template-columns:minmax(0,.8fr) 38px minmax(0,1.2fr)}
 .ai-outputs{gap:8px}.ai-output{padding:8px 10px}
}
@media(max-width:360px){
 .home-chapters .cap-shell-scroll{height:600px}
 .ai-output-title svg{display:none}
}

/* Capability 03: an automatic handoff to On it, then follow-ups to completion. */
.onit-art{display:flex;align-items:center;width:100%;height:100%;padding:12px}
.onit-svg{display:block;width:100%;height:100%;min-height:0;font-family:var(--font)}
.onit-svg-phone{display:none}
.onit-source-box{fill:#1b2941;stroke:#4e6685}
.onit-panel-box{fill:#18263d;stroke:#34445e}
.onit-phone-frame{fill:#090f1e;stroke:#71809a;stroke-width:1.4}
.onit-phone-button{fill:#71809a}
.onit-phone-notch{fill:#080e1b}
.onit-phone-time{fill:#d8e3f2;font-size:9px;font-weight:650}
.onit-phone-status{fill:none;stroke:#d8e3f2;stroke-width:1.4;stroke-linecap:round}
.onit-home-indicator{fill:#71809a}
.onit-channel-box{fill:#22354f;stroke:#486581;stroke-width:.6}
.onit-channel-icon{fill:none;stroke:#a7c7ec;stroke-width:1.15;stroke-linejoin:round;stroke-linecap:round}
.onit-channel-icon-0{stroke:#86d6ae}
.onit-channel-label{fill:#f0f5fc;font-size:12px;font-weight:650}
.onit-channel-inline-label{fill:#e5edf9;font-size:9px;font-weight:600}
.onit-channel-divider{fill:none;stroke:#60738e;stroke-width:.7}
.onit-channel-message{fill:#bdcde0;font-size:9px}
.onit-feature-label{fill:#e2c589;font-size:12px;font-weight:550}
.onit-app-label{fill:#bdcde0;font-size:9px;letter-spacing:.07em}
.onit-sent-label{fill:#99c9b0;font-size:9px}
.onit-following-box{fill:#302d28;stroke:#b69a4b44}
.onit-task-box{fill:#22334d;stroke:#4a6383}
.onit-brand{fill:#f1f5fc;font-size:16px;font-weight:650;letter-spacing:.02em}
.onit-detail{fill:#acbed6;font-size:10px}
.onit-task-title{fill:#f1f5fc;font-size:14px;font-weight:600}
.onit-auto-label{fill:#98b9dd;font-size:9px}
.onit-status{fill:#dfc38c;font-size:11px}
.onit-connector{fill:none;stroke:#8daaca;stroke-width:1.3}
.onit-transfer{fill:none;stroke:#e4ba65;stroke-width:3;stroke-linecap:round;opacity:0;stroke-dasharray:12 100}
.onit-chase{fill:none;stroke:#e4ba65;stroke-width:2;stroke-linecap:round;stroke-dasharray:10 90;opacity:0}
.onit-result-box{fill:#173b34;stroke:#4c9a7f}
.onit-check{fill:none;stroke:#98e0bc;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.onit-result-label,.onit-done-label{fill:#a7e6c6;font-size:12px;font-weight:600}
.onit-live-state{opacity:0}
@keyframes onit-chase-travel{0%{stroke-dashoffset:100;opacity:0}10%,90%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes onit-following{0%{opacity:0}5%,99%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:no-preference){
 .onit-art.can-animate :is(.onit-task,.onit-result,.onit-done-state,.onit-outgoing){opacity:0}
 .onit-art.can-animate .onit-channel-sent{opacity:0}
 .onit-art.can-animate.has-started .onit-channel-sent{animation:studio-node-build .4s ease-out var(--channel-delay) both;animation-play-state:paused}
 .onit-art.can-animate.has-started.is-running .onit-channel-sent{animation-play-state:running}
 .onit-art.can-animate.has-started .onit-transfer{animation:studio-link-travel .9s ease-in-out .4s both}
 .onit-art.can-animate.has-started .onit-task{animation:studio-node-build .5s ease-out 1.2s both}
 .onit-art.can-animate.has-started .onit-chase{animation:onit-chase-travel 1.5s linear 1.8s 3 both}
 .onit-art.can-animate.has-started .onit-live-state{animation:onit-following 4.8s linear 1.5s both}
 .onit-art.can-animate.has-started .onit-done-state{animation:studio-node-build .4s ease-out 6.3s both}
 .onit-art.can-animate.has-started .onit-outgoing{stroke-dasharray:100;animation:studio-connection-build .4s ease-out 6.5s both}
 .onit-art.can-animate.has-started .onit-result{animation:studio-node-build .5s ease-out 6.8s both}
 .onit-art.can-animate.has-started :is(.onit-transfer,.onit-task,.onit-chase,.onit-live-state,.onit-done-state,.onit-outgoing,.onit-result){animation-play-state:paused}
 .onit-art.can-animate.has-started.is-running :is(.onit-transfer,.onit-task,.onit-chase,.onit-live-state,.onit-done-state,.onit-outgoing,.onit-result){animation-play-state:running}
}
@media(max-width:900px){.onit-art{padding:10px}.onit-svg-wide{display:none}.onit-svg-phone{display:block}}
@media(min-width:701px) and (max-height:500px){.onit-svg-wide{display:block}.onit-svg-phone{display:none}.onit-art{padding:6px}}

/* Six teams, one shared connection: content stays in the normal page flow. */
.home-chapters>.team-network-section>.team-work-inner{height:100%;min-height:0;display:flex;flex-direction:column;max-width:1280px}
.team-network-section .team-work-heading{flex:none;width:100%;margin:0 auto 24px}
.team-network-section .team-work-heading p{margin:16px auto 0;color:var(--slate);font:450 clamp(14px,1.3vw,18px)/1.5 var(--font)}
.team-network{position:relative;width:100%;min-height:0;max-height:340px;flex:1;display:flex;flex-direction:column;justify-content:space-between;margin:auto 0;isolation:isolate}
.team-network-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.team-network-wire{fill:none;stroke:#b9cbe0;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.team-network-port{fill:#f7f7f5;stroke:#7599c4;stroke-width:1.4}
.team-network-junction{fill:#d3a546;stroke:#f7f7f5;stroke-width:2}
.team-network-signal{fill:none;stroke:#2b6baf;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:5 195;stroke-dashoffset:5;opacity:0}
.team-network-signal.gold{stroke:#c49a45}
.connected-team-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;position:relative;z-index:1}
.connected-team{min-width:0;height:clamp(150px,26vh,196px);display:flex;flex-direction:column;overflow:hidden;padding:0 0 13px;text-align:center;border:1px solid #dce4ee;border-radius:18px;background:#fff;box-shadow:0 14px 30px -24px #1b2a4a50}
.connected-team-visual{position:relative;width:100%;height:0;min-height:0;flex:1;overflow:hidden}
.connected-team-scene{width:100%;height:100%;padding:13px 14px 10px;text-align:left;background:linear-gradient(145deg,#f6f9fd,#eaf2fb);color:#203657}
.team-scene-top{display:flex;align-items:center;justify-content:space-between;gap:5px;color:#68809d;font:650 7px/1 var(--font);letter-spacing:.08em;white-space:nowrap}
.team-scene-top b{padding:4px 6px;border-radius:999px;background:#dceaf8;color:#2866a4;font-size:6px;letter-spacing:.05em}
.connected-team-scene small{display:block;color:#6d8099;font:500 8px/1.15 var(--font)}
.team-scene-progress{height:4px;margin:9px 0 7px;border-radius:9px;background:#d8e2ee;overflow:hidden}.team-scene-progress span{display:block;width:82%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2b6eb3,#5e91c8)}
.team-scene-people{display:flex;align-items:center;margin-top:14px}.team-scene-people i{width:22px;height:22px;margin-right:-5px;border:2px solid #f5f8fc;border-radius:50%;background:#7695b9}.team-scene-people i:nth-child(2){background:#d7aa62}.team-scene-people i:nth-child(3){background:#496d99}.team-scene-people strong{margin-left:10px;color:#59718f;font:650 8px/1 var(--font)}
.team-scene-document{position:relative;width:62px;height:47px;margin:10px auto 6px;padding:10px 8px;border:1px solid #cfdaea;border-radius:5px;background:#fff;box-shadow:0 5px 12px #253f6820}.team-scene-document i{display:block;height:3px;margin-bottom:5px;border-radius:5px;background:#d5e1ee}.team-scene-document i:nth-child(2){width:74%}.team-scene-document em{position:absolute;right:-9px;bottom:-7px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#2b6baf;color:#fff;font-style:normal;font-size:12px}
.team-scene-supplier,.team-scene-access{display:flex;align-items:center;gap:9px;margin:13px 0 3px}.team-scene-supplier>i{width:28px;height:25px;border:1px solid #aabed6;border-radius:6px;background:linear-gradient(135deg,#fff 50%,#d8e6f5 51%)}.team-scene-supplier strong,.team-scene-access strong{display:block;font:650 9px/1.2 var(--font)}.team-scene-supplier small,.team-scene-access small{margin-top:3px;font-size:7px}
.team-scene-chart{height:48px;margin:10px 3px 5px;display:flex;align-items:end;gap:6px;border-bottom:1px solid #bdcee2}.team-scene-chart i{flex:1;min-height:8px;border-radius:3px 3px 0 0;background:#7da4cf}.team-scene-chart i:nth-child(4),.team-scene-chart i:nth-child(5){background:#d0a34a}
.team-scene-route{display:flex;align-items:center;margin:26px 2px 20px}.team-scene-route i{width:12px;height:12px;border:3px solid #f5f8fc;border-radius:50%;background:#2b6baf;box-shadow:0 0 0 1px #7fa3ca}.team-scene-route i:last-child{background:#d3a546}.team-scene-route span{height:2px;flex:1;background:#9eb7d3}
.team-scene-access>i{width:31px;height:31px;border-radius:10px;background:linear-gradient(145deg,#7899c0,#335e91);box-shadow:inset 0 0 0 7px #ffffff24}.team-scene-access+em{float:right;display:grid;place-items:center;width:20px;height:20px;margin-top:-24px;border-radius:50%;background:#d9eee3;color:#31845a;font:700 11px/1 var(--font)}
.connected-team h3{flex:none;margin:12px 5px 0;color:var(--ink);font:650 clamp(11px,1.2vw,17px)/1.2 var(--font);letter-spacing:-.02em}
.team-network-hub{position:relative;z-index:1;display:flex;align-items:center;align-self:center;gap:14px;flex-shrink:0;margin-top:36px;padding:16px 24px;border:1px solid #d1deee;border-radius:20px;background:#fff;box-shadow:0 0 0 8px #eaf1f880,0 14px 35px -24px #275eae50}
.team-network-hub .n-mark{width:35px;height:35px;flex-shrink:0}
.team-network-hub b{display:block;font:650 18px/1.2 var(--font);letter-spacing:-.02em;color:var(--ink)}
.team-network-hub span{display:block;margin-top:5px;color:var(--slate);font:450 11px/1.3 var(--font)}
.team-network-caption{flex:none;margin:24px 0 0;text-align:center;color:var(--slate);font:500 13px/1.4 var(--font)}
.team-network-caption span{color:#bf9547;padding-inline:5px}
@keyframes team-network-travel{0%{stroke-dashoffset:5;opacity:0}8%{opacity:1}84%{opacity:1}100%{stroke-dashoffset:-100;opacity:0}}
@keyframes team-network-receive{0%,65%,100%{border-color:#dce4ee;box-shadow:0 14px 30px -24px #1b2a4a50}78%{border-color:#91b3d8;box-shadow:0 0 0 3px #dbe9f755}}
@media(prefers-reduced-motion:no-preference){
 .team-network-signal{animation:team-network-travel 8s linear var(--signal-delay) infinite;animation-play-state:paused}
 .connected-team{animation:team-network-receive 8s ease-in-out var(--team-delay) infinite;animation-play-state:paused}
 .team-network.is-running :is(.team-network-signal,.connected-team){animation-play-state:running}
}
@media(min-width:701px) and (max-height:650px){
 .home-chapters>.team-network-section>.team-work-inner{padding-bottom:16px}
 .team-network-section .team-work-heading{margin-bottom:16px}.team-network-section .team-work-heading h2{font-size:30px}
 .team-network-section .team-work-heading p{margin-top:8px;font-size:13px}
 .connected-team{height:126px;padding:0 0 9px}.connected-team h3{margin-top:8px}
 .connected-team p{font-size:9px;margin-top:4px}.team-network-hub{padding:10px 20px;margin-top:26px;border-radius:16px}
 .team-network-hub .n-mark{width:28px;height:28px}.team-network-hub b{font-size:15px}
 .team-network-caption{margin-top:12px;font-size:11px}
}
@media(min-width:701px) and (max-height:500px){
 .team-network-section .team-work-heading h2{font-size:24px}.team-network-section .team-work-heading p,.connected-team p,.team-network-caption{display:none}
 .connected-team{height:108px;padding:0 0 8px}.connected-team h3{margin-top:7px}
 .team-network-hub{padding:6px 18px;margin-top:22px}.team-network-hub span{margin-top:2px;font-size:9px}
}
@media(max-width:700px){
 .home-chapters>.team-network-section{padding-inline:20px}
 .home-chapters>.team-network-section>.team-work-inner{height:auto}
 .team-network-section .team-work-heading{margin-bottom:28px}.team-network-section .team-work-heading p{max-width:32ch;font-size:14px;line-height:1.5;margin-top:14px}
 .team-network{flex:none;max-height:none;margin:0}
 .connected-team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 38px}
 .connected-team{height:148px;padding:0 0 10px;border-radius:15px}
 .connected-team h3{font-size:14px;margin-top:10px}.connected-team p{font-size:10px;margin-top:5px}
 .team-network-hub{margin-top:34px;padding:14px 22px;border-radius:18px}.team-network-hub b{font-size:17px}
 .team-network-caption{font-size:11px;margin-top:24px;letter-spacing:-.01em}.team-network-caption span{padding-inline:2px}
}
/* Team outcomes, not another connection diagram. The following integrations
   chapter owns the moving signal metaphor; this chapter stays calm and useful. */
.team-network-section .team-work-heading{margin-bottom:28px}
.team-network-section .team-work-heading p{max-width:620px}
.team-network.team-benefits{display:block;max-height:none;margin:auto 0;flex:0 0 auto}
.team-benefit-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.team-benefit-group{overflow:hidden;border:1px solid #d8e2ee;border-radius:22px;background:linear-gradient(145deg,#fff,#f6f9fc);box-shadow:0 24px 50px -42px #17335d80}
.team-benefit-group-title{display:flex;align-items:center;height:42px;padding:0 18px;border-bottom:1px solid #e2e8f0;background:#f8fafc}
.team-benefit-group-title b{color:#536b88;font:700 10px var(--ui);letter-spacing:.12em;text-transform:uppercase}
.team-benefit-list{display:flex;flex-direction:column}
.team-benefits .connected-team{position:relative;display:grid;grid-template-columns:34px 118px minmax(0,1fr);align-items:center;gap:12px;height:70px;padding:9px 16px;text-align:left;border:0;border-bottom:1px solid #e7ecf2;border-radius:0;background:transparent;box-shadow:none;animation:none!important}
.team-benefits .connected-team:last-child{border-bottom:0}
.team-benefits .connected-team::after{display:none}
.team-benefit-icon{display:grid;width:32px;height:32px;place-items:center;border:1px solid #d5e2f0;border-radius:10px;background:#ebf3fb;color:#2366a8}
.team-benefit-icon .ico{width:16px;height:16px;stroke-width:1.8}
.team-benefits .connected-team h3{margin:0;color:#4f6784;font:700 9px/1.2 var(--ui);letter-spacing:.1em;text-transform:uppercase}
.team-benefit-title{display:block;overflow:hidden;color:var(--ink);font:650 14px/1.25 var(--font);letter-spacing:-.02em;white-space:nowrap;text-overflow:ellipsis}
@media(min-width:701px) and (max-height:650px){
 .team-network-section .team-work-heading{margin-bottom:18px}
 .team-benefit-group-title{height:34px}.team-benefits .connected-team{height:58px;grid-template-columns:28px 100px minmax(0,1fr);padding:6px 11px;gap:9px}
 .team-benefit-icon{width:26px;height:26px}.team-benefit-icon .ico{width:13px;height:13px}.team-benefit-title{font-size:12.5px}
}
@media(min-width:701px) and (max-height:500px){
 .team-network-section .team-work-heading p{display:block;font-size:11px}
 .team-benefit-group-title{display:none}.team-benefits .connected-team{height:48px}
}
@media(max-width:700px){
 .team-network-section .team-work-heading{margin-bottom:24px}
 .team-benefit-columns{grid-template-columns:1fr;gap:14px}.team-benefit-group{border-radius:18px}.team-benefit-group-title{height:38px;padding-inline:14px}
 .team-benefits .connected-team{grid-template-columns:32px 82px minmax(0,1fr);height:66px;padding:8px 11px;gap:8px}
 .team-benefit-icon{width:30px;height:30px}.team-benefit-icon .ico{width:15px;height:15px}.team-benefits .connected-team h3{font-size:8px}
 .team-benefit-title{display:-webkit-box;font-size:12px;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}
}
/* Chapter 05: a before/after business story instead of another feature or
   department directory. It stays deliberately static so Connect can own motion. */
.execution-shift{background:radial-gradient(55% 80% at 50% 65%,#e6eef888,transparent 72%),var(--bg);overflow:hidden}
.home-chapters>.execution-shift{display:flex;flex-direction:column}
.execution-shift-inner{display:flex;flex:1;min-height:0;width:min(1280px,100%);margin:0 auto;flex-direction:column}
.execution-shift-heading{flex:none;text-align:center}
.execution-shift-heading>p{margin:0 0 13px;color:var(--blue);font:750 10px var(--ui);letter-spacing:.18em}
.execution-shift-heading h2{max-width:980px;margin:0 auto;color:var(--ink);font:700 clamp(34px,4vw,56px)/1.08 var(--font);letter-spacing:-.05em}
.execution-shift-heading h2 span{color:var(--blue)}
.execution-shift-heading>small{display:block;max-width:620px;margin:16px auto 0;color:var(--slate);font:450 clamp(14px,1.25vw,17px)/1.45 var(--font)}
.execution-shift-board{display:grid;grid-template-columns:minmax(0,1fr) 118px minmax(0,1fr);align-items:center;gap:18px;flex:1;min-height:0;margin-top:28px}
.execution-shift-panel{height:280px;padding:18px;border:1px solid #d9e2ed;border-radius:24px;background:#fff;box-shadow:0 24px 48px -40px #132b5580}
.execution-shift-panel.before{background:linear-gradient(145deg,#f8f8f7,#f1f2f4);border-color:#e1e2e5}
.execution-shift-label{margin:0 0 14px;color:#758197;font:750 10px var(--ui);letter-spacing:.14em;text-transform:uppercase}
.execution-shift-panel.after .execution-shift-label{color:#2670b5}
.execution-shift-list{display:flex;height:calc(100% - 25px);flex-direction:column;justify-content:space-between;gap:10px}
.execution-shift-card{display:flex;align-items:center;gap:13px;min-height:65px;padding:11px 14px;border:1px solid #e2e6ec;border-radius:16px;background:#fff}
.execution-shift-panel.before .execution-shift-card{color:#6f7888;background:#ffffffa8;box-shadow:0 8px 18px -18px #17243c}
.execution-shift-panel.before .execution-shift-card.c0{transform:translateX(8px) rotate(-.5deg)}.execution-shift-panel.before .execution-shift-card.c1{transform:translateX(-5px) rotate(.4deg)}.execution-shift-panel.before .execution-shift-card.c2{transform:translateX(5px) rotate(-.3deg)}
.execution-shift-panel.after .execution-shift-card{border-color:#d5e3f2;background:#f8fbfe}
.execution-shift-card>span{display:grid;flex:0 0 34px;width:34px;height:34px;place-items:center;border-radius:11px;background:#e9edf2;color:#727d8e}
.execution-shift-panel.after .execution-shift-card>span{background:#e7f2fc;color:#2469aa}
.execution-shift-card .ico{width:17px;height:17px}.execution-shift-card>div{min-width:0}.execution-shift-card b{display:block;color:var(--ink);font:650 15px/1.2 var(--font)}
.execution-shift-card small{display:block;margin-top:4px;color:#778397;font:450 11px/1.3 var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.execution-shift-bridge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--blue)}
.execution-shift-bridge .n-mark{width:54px;height:54px;padding:10px;border:1px solid #d4dfec;border-radius:17px;background:#fff;box-shadow:0 0 0 8px #eaf1f780,0 18px 32px -24px #183a6d}
.execution-shift-bridge b{color:var(--ink);font:650 13px var(--font)}.execution-shift-bridge>.ico{width:18px;height:18px;margin-top:3px;transform:rotate(0deg)}
.execution-shift-outcome{display:flex;align-items:center;justify-content:center;gap:14px;flex:none;margin:20px 0 0;color:#435470;font:650 12px var(--ui)}
.execution-shift-outcome i{width:4px;height:4px;border-radius:50%;background:#d2a442}
@media(min-width:701px) and (max-height:650px){
 .execution-shift-heading>p{margin-bottom:8px}.execution-shift-heading h2{font-size:32px}.execution-shift-heading>small{margin-top:8px;font-size:12px}
 .execution-shift-board{margin-top:16px}.execution-shift-panel{height:218px;padding:13px}.execution-shift-label{margin-bottom:9px}.execution-shift-card{min-height:49px;padding:7px 10px}.execution-shift-card>span{width:27px;height:27px;flex-basis:27px}.execution-shift-card b{font-size:13px}.execution-shift-card small{font-size:9.5px}
 .execution-shift-outcome{margin-top:10px;font-size:10px}
}
@media(min-width:701px) and (max-height:500px){
 .execution-shift-inner{display:grid;grid-template-columns:32% 68%;grid-template-rows:1fr auto;align-items:center;gap:10px 22px}.execution-shift-heading{text-align:left}.execution-shift-heading h2{font-size:26px}.execution-shift-heading>small{font-size:10px}.execution-shift-board{grid-column:2;grid-row:1/3;margin:0;grid-template-columns:1fr 76px 1fr;gap:9px}.execution-shift-panel{height:190px}.execution-shift-card small{display:none}.execution-shift-outcome{grid-column:1;grid-row:2;flex-wrap:wrap;justify-content:flex-start;margin:0}
}
@media(max-width:700px){
 .home-chapters>.execution-shift{padding-inline:20px}.execution-shift-inner{height:auto}.execution-shift-heading h2{font-size:clamp(30px,8.1vw,40px)}.execution-shift-heading>small{max-width:32ch;font-size:14px}
 .execution-shift-board{grid-template-columns:1fr;gap:14px;margin-top:26px}.execution-shift-panel{height:auto;min-height:276px;padding:15px;border-radius:20px}.execution-shift-bridge{flex-direction:row;padding:5px 0}.execution-shift-bridge .n-mark{width:44px;height:44px;border-radius:14px}.execution-shift-bridge>.ico{transform:rotate(90deg);margin:0 0 0 3px}
 .execution-shift-card{min-height:64px;padding:10px 12px}.execution-shift-card small{white-space:normal}.execution-shift-outcome{flex-wrap:wrap;gap:9px;margin-top:22px;font-size:11px}
}
/* Capability 04: configure, launch, then adapt without a rebuild. */
.no-code-setup{height:100%;width:100%;padding:12px;display:flex;align-items:center;justify-content:center}
.setup-svg{display:block;width:100%;height:100%;min-height:0;font-family:var(--font)}
.setup-svg-phone{display:none}
.setup-panel{fill:#15223a;stroke:#829cbd40;stroke-width:.8}
.setup-title{fill:#eff5ff;font-size:19px;font-weight:650;letter-spacing:-.02em}
.setup-subtitle{fill:#8faacb;font-size:9px;font-weight:600;letter-spacing:.12em}
.setup-no-code-bg{fill:#243752}.setup-no-code{fill:#bcd4f3;font-size:10px;font-weight:600}
.setup-step-line{fill:none;stroke:#3b4b66;stroke-width:1}
.setup-step-circle{fill:#22334c;stroke:#7895ba55;stroke-width:1}.setup-step-number{fill:#bbcee7;font-size:10px}
.setup-step-label{fill:#c4d2e6;font-size:12px;font-weight:550}.setup-step-complete{fill:#244c40}
.setup-check{fill:none;stroke:#9ce0ba;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.setup-field{fill:#f5f7fb;stroke:#d5e0ed;stroke-width:.7}
.setup-field-label{fill:#60738e;font-size:10px}.setup-field-value{fill:#1c304f;font-size:14px;font-weight:600}
.setup-placeholder{fill:#8495ad;font-size:13px;opacity:0}.setup-field-check-bg{fill:#315e49}
.setup-launch-base{fill:#243751}.setup-launch-pending{fill:#aec3df;font-size:13px;font-weight:600;opacity:0}
.setup-launch-bg{fill:#274d42;stroke:#5a9d8055;stroke-width:1}.setup-launch-text{fill:#c1edd4;font-size:14px;font-weight:600}
.setup-cadence-old,.setup-adapt-prompt{opacity:0}.setup-cadence-new{opacity:1}
.setup-adapt-prompt{fill:#a7bad5;font-size:11px}.setup-applied{fill:#ddbd77;font-size:11px;font-weight:550}
.setup-edit-highlight{fill:none;stroke:#d7b461;stroke-width:2;opacity:0}
@keyframes setup-edit{0%,100%{opacity:0}20%,75%{opacity:1}}
@media(max-width:900px){
 .setup-svg-wide{display:none}.setup-svg-phone{display:block}.no-code-setup{padding:8px}
 .setup-svg-phone .setup-title{font-size:17px}.setup-svg-phone .setup-field-value{font-size:13px}
}
@media(min-width:701px) and (max-height:500px){.setup-svg-wide{display:block}.setup-svg-phone{display:none}.no-code-setup{padding:4px}}
@media(prefers-reduced-motion:no-preference){
 .no-code-setup.can-animate :is(.setup-field-ready,.setup-launch-ready,.setup-cadence-new,.setup-applied){opacity:0}
 .no-code-setup.can-animate :is(.setup-placeholder,.setup-launch-pending,.setup-cadence-old,.setup-adapt-prompt){opacity:1}
 .no-code-setup.can-animate.has-started .setup-field-ready{animation:studio-node-build .4s ease-out var(--setup-delay) both}
 .no-code-setup.can-animate.has-started .setup-placeholder{animation:onit-state-hide .2s ease-out var(--setup-delay) both}
 .no-code-setup.can-animate.has-started .setup-launch-ready{animation:studio-node-build .5s ease-out 3.2s both}
 .no-code-setup.can-animate.has-started .setup-launch-pending{animation:onit-state-hide .2s ease-out 3.2s both}
 .no-code-setup.can-animate.has-started .setup-edit-highlight{animation:setup-edit 1.4s ease-in-out 4.8s both}
 .no-code-setup.can-animate.has-started .setup-cadence-old{animation:onit-state-hide .2s ease-out 5.25s both}
 .no-code-setup.can-animate.has-started .setup-cadence-new{animation:studio-node-build .35s ease-out 5.45s both}
 .no-code-setup.can-animate.has-started .setup-adapt-prompt{animation:onit-state-hide .2s ease-out 6.1s both}
 .no-code-setup.can-animate.has-started .setup-applied{animation:studio-node-build .4s ease-out 6.3s both}
 .no-code-setup.can-animate.has-started :is(.setup-field-ready,.setup-placeholder,.setup-launch-ready,.setup-launch-pending,.setup-edit-highlight,.setup-cadence-old,.setup-cadence-new,.setup-adapt-prompt,.setup-applied){animation-play-state:paused}
 .no-code-setup.can-animate.has-started.is-running :is(.setup-field-ready,.setup-placeholder,.setup-launch-ready,.setup-launch-pending,.setup-edit-highlight,.setup-cadence-old,.setup-cadence-new,.setup-adapt-prompt,.setup-applied){animation-play-state:running}
}
/* On It: a team queue hands work to people, not departments. */
.onit-handoff{padding:8px}
.onit-scene-caption{fill:#edf3fc;font-size:14px;font-weight:600}
.onit-scene-small{fill:#b9c9df;font-size:10px}
.onit-handoff-path{fill:none;stroke:#b8a16e;stroke-width:1.4}
.onit-recipient-screen{font-family:var(--font)}
.onit-demo-time{fill:#222c26;font-size:8px;font-weight:600}
.onit-demo-status{fill:none;stroke:#222c26;stroke-width:1}
.onit-demo-brand{fill:#26372e;font-size:18px;font-weight:650}
.onit-demo-small{fill:#657368;font-size:8px}
.onit-demo-avatar{fill:#fff;font-size:9px;font-weight:600}
.onit-demo-name{fill:#26372e;font-size:12px;font-weight:600}
.onit-demo-task{fill:#fff;stroke:#dedfd7;stroke-width:.8}
.onit-demo-task-title{fill:#26372e;font-size:13px;font-weight:650}
.onit-demo-due{fill:#947731;font-size:9px;font-weight:600}
.onit-notification-box{fill:#f0f2ea;stroke:#e1e5da;stroke-width:.7}
.onit-notification-title{fill:#354638;font-size:9px;font-weight:650}
.onit-demo-button{fill:#fff;font-size:11px;font-weight:600}
.onit-demo-done{fill:#3b7254;font-size:11px;font-weight:600}
.onit-demo-check{fill:none;stroke:#3b7254;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.onit-tap-indicator{fill:#bc9b4b35;stroke:#b28d3b;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.onit-recipient-pending{opacity:0}
.onit-channel-icon{fill:none;stroke:#66836a;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.onit-route-icon-bg{fill:#202e43;stroke:#526078;stroke-width:.8}
.onit-route-channel .onit-channel-icon{stroke:#c8d6e8}
.onit-route-label{fill:#bdcce0;font-size:7px}
.onit-bell-count{fill:white;font-size:8px;font-weight:700}
.onit-push-banner{opacity:0;pointer-events:none}
@keyframes onit-vibrate{0%,100%{transform:translateX(0)}15%,45%,75%{transform:translateX(-1.8px)}30%,60%,90%{transform:translateX(1.8px)}}
@keyframes onit-push-arrive{0%{opacity:0;transform:translateY(-16px)}14%,80%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-12px)}}
@keyframes onit-origin-left{from{transform:translateX(332px)}to{transform:translateX(0)}}
@keyframes onit-phone-enter{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}
@keyframes onit-origin-exit{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-320px)}}
@keyframes onit-mobile-visit{0%{opacity:0;transform:translateX(320px)}15%,85%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-320px)}}
@keyframes onit-state-hide{from{opacity:1}to{opacity:0}}
@keyframes onit-demo-tap{0%{opacity:0;transform:scale(1.4)}35%{opacity:1;transform:scale(.7)}65%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}
@media(max-width:900px){
 .onit-svg-phone .onit-origin-stage,.onit-svg-phone .onit-recipient-0{display:none}
}
@media(prefers-reduced-motion:no-preference){
 .onit-handoff.can-animate .onit-origin-stage{transform:translateX(332px)}
 .onit-handoff.can-animate :is(.onit-recipient-stage,.onit-notification,.onit-recipient-complete,.onit-channel-confirm,.onit-handoff-link){opacity:0}
 .onit-handoff.can-animate .onit-recipient-pending{opacity:1}
 .onit-handoff.can-animate :is(.onit-bell-badge,.onit-route-channel){opacity:0}
 .onit-handoff.can-animate.has-started .onit-phone-vibration{animation:onit-vibrate .48s linear var(--push-arrival) both}
 .onit-handoff.can-animate.has-started .onit-bell-badge{animation:studio-node-build .25s ease-out var(--push-arrival) both}
 .onit-handoff.can-animate.has-started .onit-push-banner{animation:onit-push-arrive 2.1s ease-out var(--push-arrival) both}
 .onit-handoff.can-animate.has-started .onit-route-channel{animation:studio-node-build .3s ease-out var(--notification-delay) both}
 .onit-handoff.can-animate.has-started :is(.onit-phone-vibration,.onit-bell-badge,.onit-push-banner,.onit-route-channel){animation-play-state:paused}
 .onit-handoff.can-animate.has-started.is-running :is(.onit-phone-vibration,.onit-bell-badge,.onit-push-banner,.onit-route-channel){animation-play-state:running}
 .onit-handoff.can-animate.has-started .onit-origin-stage{animation:onit-origin-left .9s ease-in-out 1.3s both}
 .onit-handoff.can-animate.has-started .onit-recipient-stage{animation:onit-phone-enter .75s ease-out var(--recipient-enter) both}
 .onit-handoff.can-animate.has-started .onit-handoff-link{animation:studio-node-build .5s ease-out var(--link-delay) both}
 .onit-handoff.can-animate.has-started .onit-notification{animation:ai-output-reveal .4s ease-out var(--notification-delay) both}
 .onit-handoff.can-animate.has-started .onit-channel-confirm{animation:studio-node-build .3s ease-out var(--notification-delay) both}
 .onit-handoff.can-animate.has-started .onit-recipient-pending{animation:onit-state-hide .2s ease-out var(--recipient-done) both}
 .onit-handoff.can-animate.has-started .onit-recipient-complete{animation:studio-node-build .35s ease-out var(--recipient-done) both}
 .onit-handoff.can-animate.has-started .onit-tap-indicator{animation:onit-demo-tap .7s ease-out var(--recipient-tap) both}
 .onit-handoff.can-animate.has-started :is(.onit-origin-stage,.onit-recipient-stage,.onit-handoff-link,.onit-notification,.onit-channel-confirm,.onit-recipient-pending,.onit-recipient-complete,.onit-tap-indicator){animation-play-state:paused}
 .onit-handoff.can-animate.has-started.is-running :is(.onit-origin-stage,.onit-recipient-stage,.onit-handoff-link,.onit-notification,.onit-channel-confirm,.onit-recipient-pending,.onit-recipient-complete,.onit-tap-indicator){animation-play-state:running}
}
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
 .onit-handoff.can-animate .onit-svg-phone .onit-origin-stage{display:block;transform:none}
 .onit-handoff.can-animate .onit-svg-phone .onit-recipient-0{display:block}
 .onit-handoff.can-animate.has-started .onit-svg-phone .onit-origin-stage{animation-name:onit-origin-exit}
 .onit-handoff.can-animate.has-started .onit-svg-phone .onit-recipient-0{animation-name:onit-mobile-visit;animation-duration:5.3s}
}
/* One Book a Demo in view at a time (owner, 10 Oct): on laptops the header's button steps aside while the opening's own
   button is on screen (.hdr.hero-cta-on, set by Header), and slides back into the pill once the visitor scrolls past it. */
@media(min-width:901px){
 .act .hdr-cta{max-width:240px;transition:max-width .5s var(--ease),padding .5s var(--ease),margin .5s var(--ease),border-width .5s var(--ease),opacity .3s ease .12s,visibility 0s}
 .hdr.hero-cta-on .act .hdr-cta{max-width:0;padding-inline:0;border-width:0;margin-left:-10px;opacity:0;visibility:hidden;overflow:hidden;pointer-events:none;
  transition:max-width .5s var(--ease),padding .5s var(--ease),margin .5s var(--ease),border-width .5s var(--ease),opacity .2s ease,visibility 0s linear .5s}
 .hdr.hero-cta-on .act .hdr-cta::before{opacity:0}
}
@media(prefers-reduced-motion:reduce){.act .hdr-cta,.hdr.hero-cta-on .act .hdr-cta{transition:none}}
/* Section 6: the real customer logos in a clean grid (owner, 10 Oct), quiet grey until hovered. */
.proof-logo-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
.proof-logo-grid .proof-close-logo{height:70px;padding:0 12px;background:#fff}
.proof-logo-grid img{display:block;width:auto;max-width:100%;height:28px;object-fit:contain;filter:grayscale(1);opacity:.78;transition:filter .3s,opacity .3s}
.proof-logo-grid .proof-close-logo:hover img{filter:none;opacity:1}
@media(max-width:520px){.proof-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.proof-logo-grid .proof-close-logo{height:60px}}
/* Certificate marks (MOCKUP, unconfirmed: see CERT_MARKS in App.js): under the logos in section 6, and above the footer's last line. */
.cert-marks{display:flex;flex-wrap:wrap;align-items:center;gap:8px;text-decoration:none}
.cert-mark{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:99px;font:650 11.5px var(--ui);letter-spacing:.01em;white-space:nowrap;transition:border-color .2s}
.cert-mark .ico{width:13px;height:13px}
.cert-proof{justify-content:center;margin-top:12px}
.cert-proof .cert-mark{border:1px solid #d4deea;background:#fff;color:#33415c}
.cert-proof .cert-mark .ico{color:#2b70b7}
.cert-proof:hover .cert-mark{border-color:#9fb6d3}
.cert-foot{padding-top:16px}
.cert-foot .cert-mark{border:1px solid #ffffff26;background:#ffffff0d;color:#dfe5f1}
.cert-foot .cert-mark .ico{color:#e6bf62}
.cert-foot:hover .cert-mark{border-color:#ffffff59}
@media(max-width:680px){.cert-foot{justify-content:center}}
/* App download badges (MOCKUP artwork, see APP_LINKS in App.js): footer row and phone menu. */
.store-badges{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.store-badge{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 10px;border:1px solid #a6a6a6;border-radius:9px;background:#000;color:#fff;text-decoration:none;line-height:1;transition:border-color .2s}
a.store-badge:hover{border-color:#fff}
.store-badge.is-soon{cursor:default}
.sb-logo{flex:none;width:21px;height:21px;fill:currentColor}
.sb-text{display:flex;flex-direction:column;gap:2px;text-align:left}
.sb-text small{font:500 9px/1 var(--font);letter-spacing:.02em}
.sb-text b{font:600 15px/1 var(--font);letter-spacing:-.01em}
.foot-badges{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding-top:16px}
.foot-badges .cert-foot{padding-top:0}
@media(max-width:680px){.foot-badges{flex-direction:column;justify-content:center}}
.m-store{justify-content:center;margin-top:14px}
/* Footer store badges: together exactly the width of the social icons (--soc-w, set by Footer), two equal halves. */
.foot-badges .store-badges{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:var(--soc-w,auto)}
.foot-badges .store-badge{min-width:0;justify-content:center;gap:6px;padding:0 8px}
.foot-badges .sb-logo{width:18px;height:18px}
.foot-badges .sb-text small{font-size:8.5px}
.foot-badges .sb-text b{font-size:13.5px;white-space:nowrap}
.sb-logo.sb-play{fill:initial}
/* "Trusted by Leaders": the real customer logos along the foot of the opening screen, rolling slowly right to left on every
   screen (owner, 10 Oct), with wide gaps between brands. */
#nvj .hero-trust{display:flex;align-items:center;justify-content:center;gap:clamp(20px,3vw,40px);width:100%;min-width:0}
.hero-trust-label{flex:none;margin:0;font:600 13px var(--font);letter-spacing:.01em;color:var(--slate);white-space:nowrap}
.hero-trust-roll{display:flex;flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hero-trust-track{display:flex;flex:none;align-items:center;gap:clamp(40px,4.4vw,68px);margin:0;padding:0 clamp(40px,4.4vw,68px) 0 0;list-style:none;animation:cust-roll 55s linear infinite}
.hero-trust-track li{flex:none}
.hero-trust-track img{display:block;width:auto;height:26px;filter:grayscale(1);opacity:.62;transition:filter .3s,opacity .3s}
.hero-trust-track img:hover{filter:none;opacity:1}
@media(min-width:701px){#nvj .hero-trust{position:absolute;left:0;right:0;bottom:calc(clamp(16px,3vh,32px) + var(--ck-h,0px));padding:0 var(--gutter,24px);transition:bottom .35s var(--ease)}}
@media(max-width:700px){#nvj .hero-trust{flex-direction:column;gap:12px;margin-top:28px}#nvj .hero-trust .hero-trust-roll{width:100%;flex:none}.hero-trust-track img{height:22px}}
@media(prefers-reduced-motion:reduce){.hero-trust-track{animation:none}}
[data-motion=paused] .hero-trust-track{animation-play-state:paused}
/* Phones: the headline is the biggest text again (owner, 10 Oct: font sizes looked mismatched — the h1 had shrunk to 22 px to
   stay on two lines, smaller than the next section's 28 px title). Three balanced lines at ~33 px; a short 16 px line. */
@media(max-width:700px){
 .home-chapters #nvj #nvj-simple-title{font-size:clamp(30px,8.6vw,38px);line-height:1.1;text-wrap:balance}
 #nvj .nvj-simple-line{display:inline;white-space:normal}
 #nvj .nvj-simple-line+.nvj-simple-line::before{content:" "}
 .home-chapters #nvj .nvj-simple-sub{margin:20px auto 22px;font-size:16px;line-height:1.5}
}
#nvj .nvj-simple-sub{text-wrap:balance}
#nvj .nvj-sub-l{display:block}
/* "Trusted by Leaders" band between Navio OS and the next section (owner, 10 Oct: one section lower than the opening). */
.trust-band{padding:clamp(26px,5vh,48px) var(--gutter,24px)}
.trust-band .hero-trust{display:flex;align-items:center;justify-content:center;gap:clamp(20px,3vw,40px);max-width:1424px;margin:0 auto}
@media(max-width:700px){.trust-band .hero-trust{flex-direction:column;gap:12px}.trust-band .hero-trust-roll{width:100%;flex:none}}
#nvj .nvj-sub-bal{text-wrap:balance}
#nvj .nvj-sub-bal+.nvj-sub-bal{margin-top:6px}
/* The simple opening (owner, 10 Oct): a quiet category line, the headline a touch lower, then the two buttons. The
   background is a very light wash — soft blue from the top, warm gold low on the left — nothing that moves. */
#nvj.nvj-simple::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(60% 55% at 50% 0%,#2364a812,transparent 70%),radial-gradient(45% 45% at 8% 92%,#d4a03c14,transparent 70%),radial-gradient(40% 40% at 94% 70%,#2364a80b,transparent 70%);
 -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 66%,transparent 100%);
 mask-image:linear-gradient(to bottom,#000 0%,#000 66%,transparent 100%)}
/* Let the hero wash resolve to the same canvas the next chapter begins on. */
.home-chapters>#nvj.nvj-simple{background:#f8f8f6}
/* (.nvj-eyebrow is taken by the old journey markup, so the category line has its own class) */
#nvj .nvj-category{position:static;margin:0 0 22px;font:500 clamp(15px,1.25vw,19px)/1.3 var(--font);letter-spacing:-.005em;text-transform:none;color:var(--slate)}
.home-chapters #nvj .nvj-simple-actions,#nvj .nvj-simple-actions{margin-top:clamp(36px,5.5vh,56px)}
@media(min-width:901px){#nvj .nvj-simple-copy{top:clamp(0px,2.2vh,24px)}
 /* the headline is lifted on laptops (transform + translate above); the category line rides with it */
 #nvj .nvj-category{transform:translateY(calc(5mm - clamp(0px,calc(100dvh - 600px),38px)));translate:0 calc(-1 * clamp(0px,calc(100dvh - 650px),1cm))}}
@media(max-width:700px){#nvj .nvj-category{margin-bottom:16px;font-size:15px}.home-chapters>#nvj.nvj-simple{padding-top:150px}.home-chapters #nvj .nvj-simple-actions{margin-top:40px}}
/* The statement as faint strands (Strands in journey.js): hairlines at a whisper, the out-line a little warmer, a gold dot. */
#nvj .nvj-strands{position:absolute;inset:0;z-index:-1;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none}
.nvj-strand{stroke:#2364a8;stroke-opacity:.16;stroke-width:1.2;stroke-linecap:round}
.nvj-strand-out{stroke:#c99535;stroke-opacity:.42;stroke-width:1.6}
.nvj-strand-dot{fill:#d4a03c;opacity:.85}
@media(prefers-reduced-motion:no-preference){
 .nvj-strand{stroke-dasharray:1;stroke-dashoffset:1;animation:nvj-strand-draw 1.4s cubic-bezier(.5,0,.3,1) calc(.3s + var(--i,0)*.15s) forwards}
 .nvj-strand-out{animation-delay:1.2s;animation-duration:1.2s}
 .nvj-strand-dot{opacity:0;animation:nvj-strand-dot .5s ease-out 2.3s forwards}
}
@keyframes nvj-strand-draw{to{stroke-dashoffset:0}}
@keyframes nvj-strand-dot{to{opacity:.85}}
/* laptops: the category line, headline and statement sit 1 cm lower; the buttons stay where they are (owner, 10 Oct) */
@media(min-width:901px){#nvj .nvj-category,#nvj #nvj-simple-title,#nvj .nvj-simple-sub{position:relative;top:1cm}}
/* laptops: the category line in bold capitals (owner, 10 Oct); phones keep it in normal case */
@media(min-width:901px){#nvj .nvj-category{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(13px,1.05vw,16px);color:var(--ink)}}
/* phones and tablets too (owner, 10 Oct): the category line in bold capitals; on phones it sits 10 mm higher */
@media(max-width:900px){#nvj .nvj-category{font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:12.5px;color:var(--ink)}}
@media(max-width:700px){#nvj .nvj-category{position:relative;top:-10mm}}
/* phones: the headline sits 5 mm higher (owner, 10 Oct) */
@media(max-width:700px){.home-chapters #nvj #nvj-simple-title{position:relative;top:-5mm}}
/* phones: the owner's full statement in three set lines (10 Oct) */
#nvj .nvj-sub-three>span{display:block}
@media(max-width:700px){.home-chapters #nvj .nvj-simple-sub:has(.nvj-sub-three){max-width:none;font-size:clamp(12px,3.55vw,15px);line-height:1.55;letter-spacing:-.005em}}
/* "The AI Execution OS Platform…" (owner, 10 Oct) is longer: the three set lines keep to three by scaling the type to the
   longest line (27 em) and using 8px more of each side */
@media(max-width:700px){.home-chapters #nvj .nvj-simple-sub:has(.nvj-sub-three){font-size:clamp(11px,calc((100vw - 32px) / 27.2),15px);margin-left:-8px;margin-right:-8px}}
/* Book a Demo dialog (owner, 10 Oct): one type size everywhere — every label the same, every field and placeholder the same
   (the mobile field had fallen back to the system font), the country code matching the number. */
.demo-dialog .f2-form label>span,.demo-dialog .f2-phone>label{font:500 13.5px/1.3 var(--font);color:var(--slate)}
.demo-dialog .f2-form input,.demo-dialog .f2-cc-face{font:500 16px var(--font);color:var(--ink)}
.demo-dialog .f2-form input::placeholder{font:500 16px var(--font);color:#9aa1b3;opacity:1}
.demo-dialog .f2-send{font:600 16px var(--font)}
.demo-dialog .demo-head h2{margin-bottom:6px}
/* The hiring bar only at the very top (owner, 10 Oct): html.bar-away (set by Header once the page scrolls) slides it up and
   lifts the menu into its place; back at the top both return. --bar itself never changes, so nothing on the page jumps. */
.hire-bar{transition:transform .35s var(--ease)}
.hdr{transition:top .35s var(--ease)}
html.bar-away .hire-bar{transform:translateY(-100%)}
html.bar-away .hdr{top:calc(12px + env(safe-area-inset-top,0px))}
@media(max-width:900px){
 .burger{transition:top .35s var(--ease)}
 html.bar-away .hdr,html.bar-away .hdr.scrolled{top:0}
 html.bar-away .burger{top:calc(7px + env(safe-area-inset-top,0px))}
 html.bar-away .msheet{padding-top:calc(60px + 6px + env(safe-area-inset-top,0px))}
}
/* the bar is away whenever a section is reached by a link, so jumps leave room for the menu only */
html.home-story.bar-away{scroll-padding-top:0}
@media(max-width:700px){html.home-story.bar-away{scroll-padding-top:68px}}
/* ===== Section 2, "Meet Navio OS" (owner, 10 Oct): four pointers beside the device; an iPad on laptops and tablets,
   a real phone on phones; the Navio N in the app. ===== */
.rv-points{display:grid;gap:14px;margin:26px 0 0;padding:0;list-style:none}
.rv-points li{display:flex;align-items:center;gap:12px;font:550 clamp(15px,1.2vw,18px)/1.3 var(--font);color:var(--ink)}
.rv-point-i{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px #dfe5ee,0 6px 14px -10px #12224466;color:var(--blue)}
.rv-point-i .ico{width:17px;height:17px}
@media(max-width:1279px){.rv-points{grid-template-columns:repeat(4,auto);justify-content:center;gap:12px 22px}.rv-points li{font-size:14.5px}}
@media(max-width:900px){.rv-points{grid-template-columns:repeat(2,auto);gap:12px 18px}}
@media(max-width:700px){.rv-points{grid-template-columns:1fr 1fr;gap:10px 12px;margin-top:18px;text-align:left}.rv-points li{gap:9px;font-size:13px}.rv-point-i{width:28px;height:28px;border-radius:8px}.rv-point-i .ico{width:14px;height:14px}}
/* the Navio N in the app's own bar */
.rvs-nmark{flex:none;width:26px;height:26px}
/* (.phone is an older global class, hence .rvd-phone) the phone frame: titanium edge, thin black bezel, a dynamic island, side buttons */
.rvd.rvd-phone .rvd-body{padding:.9cqw;border-radius:15cqw}
.rvd.rvd-phone .rvd-body::before{top:20%;left:-.9cqw;right:auto;width:.9cqw;height:9cqw;border-radius:.6cqw 0 0 .6cqw;background:linear-gradient(90deg,#8c919a,#d6d9de);box-shadow:0 12cqw 0 #a3a7af}
.rvd.rvd-phone .rvd-body::after{left:auto;right:-.9cqw;top:26%;width:.9cqw;height:15cqw;border-radius:0 .6cqw .6cqw 0;background:linear-gradient(90deg,#d6d9de,#8c919a);box-shadow:none}
.rvd.rvd-phone .rvd-bez{padding:2.6cqw;border-radius:14.2cqw}
.rvd.rvd-phone .rvd-scr{aspect-ratio:420/880;border-radius:11.8cqw}
.rvd.rvd-phone .rvd-cam{top:4.6cqw;width:27cqw;height:7.6cqw;margin-left:-13.5cqw;border-radius:99px;background:#000;box-shadow:none}
.rv-canvas.port{height:880px}
.home-chapters .rvd.rvd-phone,.rvd.rvd-phone{width:min(74%,300px);margin-inline:auto}
/* the phone app: status bar, content, tab bar */
.rvs.port{grid-template-rows:auto 1fr auto}
.rvs-status{display:flex;align-items:center;justify-content:space-between;height:54px;padding:12px 32px 0 40px;font:650 15px var(--ui);color:#101935}
.rvs-status-i{display:flex;align-items:center;gap:6px}
.rvs-status-i i{display:block;background:#101935}
.rvs-status-i .sig{width:17px;height:11px;clip-path:polygon(0 100%,0 75%,22% 75%,22% 100%,26% 100%,26% 50%,48% 50%,48% 100%,52% 100%,52% 25%,74% 25%,74% 100%,78% 100%,78% 0,100% 0,100% 100%)}
.rvs-status-i .wifi{width:15px;height:11px;clip-path:polygon(50% 100%,0 30%,10% 18%,50% 0,90% 18%,100% 30%)}
.rvs-status-i .bat{width:25px;height:12px;border-radius:3.5px;background:linear-gradient(90deg,#101935 76%,#10193540 76%)}
.rvs-tabs{display:grid;grid-template-columns:repeat(4,1fr);padding:9px 8px 26px;border-top:1px solid #e3e7ee;background:#ffffffee}
.rvs-tabs span{display:flex;flex-direction:column;align-items:center;gap:4px;font:600 10.5px var(--ui);color:#8a93a6}
.rvs-tabs span .ico{width:21px;height:21px}
.rvs-tabs span.on{color:#2364a8}
.rvs.port .rvs-toast{bottom:92px}
/* ===== Section 2 "Meet Navio OS" (Reveal: .nvs) — a drawn Navio OS board (SVG, .nvb) sized to the screen height, four
   feature badges strung to it on wide screens. ===== */
.home-chapters>#navio-os.nvs,#navio-os.nvs{display:block;padding:var(--nvs-top,150px) var(--gutter) 24px}
.nvs-in{display:flex;flex-direction:column;align-items:center;width:min(1320px,100%);height:100%;margin:0 auto}
.nvs-head{text-align:center}
.nvs-title{margin:0;font:600 clamp(36px,3.6vw,56px)/1.05 var(--font);letter-spacing:-.045em;color:var(--ink);text-align:center}
.nvs-sub{margin:10px 0 0;font:650 clamp(11.5px,.9vw,13px)/1.3 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.nvs-stage{--bw:230px;--bg:34px;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;margin-top:clamp(20px,3.4vh,36px)}
/* the live board (NavioFlow .nvf): four lanes, commitments moving on by themselves */
.nvs-device{position:relative;width:min(860px,100%,calc((100svh - var(--nvs-top,150px) - 150px) * 1.5))}
.home-chapters .nvs-device{width:min(860px,100%,calc((var(--chapter-height,100svh) - var(--nvs-top,150px) - 150px) * 1.5))}
.nvf{--u:calc(min(860px,100cqw) / 860);container-type:inline-size;overflow:hidden;border-radius:24px;background:linear-gradient(180deg,#ffffff 0%,#f6f8fc 100%);
 box-shadow:0 0 0 1px #e1e6ee,0 44px 80px -48px #12224480,0 18px 36px -28px #1222444d;font-family:var(--font);color:var(--ink)}
.nvf-top{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid #edf0f5}
.nvf-n{width:24px;height:24px;flex:none}
.nvf-top>b{font:650 14.5px var(--font)}
.nvf-live{display:inline-flex;align-items:center;gap:8px;margin-left:14px;padding:5px 12px;border-radius:99px;background:linear-gradient(90deg,#eef4fb,#f2eefb);color:#3c4f8a;font:600 12.5px var(--font)}
.nvf-live i{width:7px;height:7px;border-radius:50%;background:#31a478;box-shadow:0 0 0 0 #31a47866}
.nvf.run .nvf-live i{animation:nvf-pulse 1.8s ease-out infinite}
@keyframes nvf-pulse{0%{box-shadow:0 0 0 0 #31a47866}100%{box-shadow:0 0 0 8px #31a47800}}
.nvf-count{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:5px 12px;border-radius:99px;background:#e6f5ee;color:#24855a;font:650 12.5px var(--font)}
.nvf-count .ico{width:14px;height:14px}
.nvf.run .nvf-count{animation:nvf-bump .5s cubic-bezier(.2,.9,.3,1.5) 1.5s}
@keyframes nvf-bump{50%{transform:scale(1.08)}}
/* a gold dot runs along the top of the lanes every step */
.nvf-rail{position:relative;height:2px;margin:14px calc(12.5% - 6px) 0;background:linear-gradient(90deg,#cfe0f5,#ded5f3,#f3dca4,#bfe6d1);border-radius:2px}
.nvf-run{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:#d4a03c;box-shadow:0 0 0 4px #d4a03c2e;opacity:0}
.nvf.run .nvf-run{animation:nvf-run 2.2s cubic-bezier(.45,0,.3,1) both}
@keyframes nvf-run{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}
.nvf-lanes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:10px 14px 16px}
.nvf-lane{min-width:0;border-radius:16px;background:#f2f5f9;padding:10px}
.nvf-head{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:2px 4px;font:650 13px var(--font);color:#3c4560}
.nvf-dot{width:9px;height:9px;flex:none;border-radius:50%}
.nvf-dot.nvf-found{background:#2364a8}.nvf-dot.nvf-owned{background:#6a4fb8}.nvf-dot.nvf-follow{background:#d4a03c}.nvf-dot.nvf-done{background:#2f9e6a}
.nvf-slot{position:relative;display:grid;gap:10px;min-height:236px;align-content:start}
.nvf-second{min-width:0;opacity:.62}
.nvf-slot>*,.nvf-card{min-width:0}
.nvf.run .nvf-second .nvf-card{animation-delay:.18s}
.nvf-card{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;padding:14px 13px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #e6eaf0,0 10px 20px -16px #12224466}
.nvf.run .nvf-card{animation:nvf-in .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes nvf-in{from{opacity:0;transform:translateX(-26px) scale(.97)}to{opacity:1;transform:none}}
.nvf-card b{overflow:hidden;font:650 13.5px/1.3 var(--font);white-space:nowrap;text-overflow:ellipsis}
.nvf-card small{overflow:hidden;font:500 11.5px var(--font);color:#7b8498;white-space:nowrap;text-overflow:ellipsis}
.nvf-card>span{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font:600 11.5px var(--font);white-space:nowrap}
.nvf-card .ico{width:13px;height:13px;flex:none}
.nvf-ai{width:fit-content;padding:4px 9px;border-radius:99px;background:linear-gradient(90deg,#eaf1fa,#f0ebfa);color:#4b3fa0}
.nvf-own{color:var(--ink)}.nvf-own i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:#fff;font:700 10px var(--font);font-style:normal}
.nvf-own em,.nvf-ok em{font-style:normal;font-weight:500;color:#7b8498}
.nvf-ping{width:fit-content;padding:4px 9px;border-radius:99px;background:#fff4dd;color:#a5741b}
.nvf.run .nvf-ping .ico{transform-origin:50% 10%;animation:nvf-ring .9s ease .5s 2}
@keyframes nvf-ring{0%,100%{rotate:0deg}20%{rotate:16deg}40%{rotate:-14deg}60%{rotate:9deg}80%{rotate:-5deg}}
.nvf-ok{color:#24855a}.nvf-ok i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#2f9e6a;color:#fff}.nvf-ok i .ico{width:11px;height:11px}
.nvf-ok em{display:inline-flex;align-items:center;gap:4px;margin-left:4px}
.nvf-done-card,.nvf-card.nvf-done{box-shadow:0 0 0 1px #bfe6d1,0 10px 20px -16px #24855a66}
/* the Done lane keeps a stack behind the newest card */
.nvf-stack{position:absolute;left:6px;right:6px;bottom:-8px;height:40%;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #e6eaf0,0 8px 0 -2px #fff,0 8px 0 -1px #e6eaf0}
/* phones: two lanes a row */
@media(max-width:700px){
 .nvs-device,.home-chapters .nvs-device{width:min(380px,100%)}
 .nvf{border-radius:20px}
 .nvf-top{padding:12px 14px;gap:8px}.nvf-live{display:none}
 .nvf-rail{display:none}
 .nvf-lanes{grid-template-columns:1fr 1fr;gap:8px;padding:10px}
 .nvf-lane{padding:8px;border-radius:14px}
 .nvf-head{font-size:12px;margin-bottom:8px}
 .nvf-slot{min-height:212px;gap:8px}
 .nvf-card{padding:10px}
 .nvs-feats{display:none}
}
/* the feature badges */
.nvs-feats{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:10px 14px;margin:22px 0 0;padding:0;list-style:none}
.nvs-feat{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px #e1e6ee,0 10px 24px -16px #12224466;font:600 14.5px var(--font);color:var(--ink);white-space:nowrap}
.nvs-feat-i{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#eef4fb;color:var(--blue)}
.nvs-feat-i .ico{width:15px;height:15px}
.nvs-strings{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;fill:none}
.nvs-strings path{stroke:#2364a8;stroke-opacity:.45;stroke-width:1.4;stroke-dasharray:2 5;stroke-linecap:round}
.nvs-strings circle{fill:#d4a03c;stroke:#fff;stroke-width:2}
/* wide screens: badges beside the board, strung to it */
@media(min-width:1180px){
 .nvs-stage{--nvs-strings:1}
 /* leave room for a badge each side */
 .nvs-device,.home-chapters .nvs-device{max-width:calc(100% - 2*(var(--bw) + var(--bg)))}
 .nvs-feats{position:absolute;inset:0;display:block;margin:0}
 .nvs-feat{position:absolute;left:0;top:0;opacity:0;transition:opacity .4s ease}
 .nvs-stage[data-laid] .nvs-feat{opacity:1;transition-delay:calc(.25s + var(--i)*.15s)}
 .nvs-strings g{opacity:0;transition:opacity .5s ease calc(.4s + var(--i)*.15s)}
 .nvs-stage.seen .nvs-strings g{opacity:1}
}
/* phones: the compact board, the features as a 2 × 2 list */
@media(max-width:700px){
 .home-chapters>#navio-os.nvs,#navio-os.nvs{height:auto;padding-top:86px;padding-bottom:40px}
 .nvs-feats{grid-template-columns:1fr 1fr;width:100%;gap:8px}
 .nvs-feat{gap:8px;padding:6px 10px 6px 6px;font-size:12.5px;white-space:normal;line-height:1.25}
 .nvs-feat-i{width:26px;height:26px}.nvs-feat-i .ico{width:13px;height:13px}
}
/* the two emptied chapters (owner, 10 Oct): blank, plain background */
.empty-chapter{background:var(--bg)}
@media(max-width:700px){.home-chapters>.empty-chapter{min-height:50svh}}
/* "Built to get work done." sits 5 mm higher (owner, 10 Oct) */
.cap-shell-section .du-title{position:relative;top:-5mm}
/* narrow lanes: chips never spill out of their card */
.nvf-lane{container-type:inline-size}
.nvf-card>span{max-width:100%;overflow:hidden}
@container (max-width:150px){.nvf-ok em{display:none}.nvf-ping,.nvf-ai{padding-inline:7px}.nvf-own em{display:none}}
/* the blue section's two-line heading: "Meet Navio™ OS" over "Built to Get Work Done." */
.home-chapters .cap-shell-section .du-title.du-two span,.du-title.du-two span{display:block}
.home-chapters .cap-shell-section .du-title .du-meet,.du-title .du-meet{color:#8fbbe9}
.du-meet sup{font-size:.42em;vertical-align:.95em;margin-left:.04em}
/* "We're hiring" in n8n's manner (owner, 10 Oct): a rounded card hanging from the top edge, as wide as the page content,
   white with a soft gold-and-blue glow, a small Apply now button inside. It and the menu move as one: on scroll the card
   slides up and the menu rises into its place in the same 0.3 s; back at the top both return. */
:root{--bar:44px}
.hire-bar{left:0;right:0;width:min(1424px,calc(100% - 2*var(--gutter,24px)));margin-inline:auto;align-items:center;border:1px solid #e3e7ee;border-top:0;border-radius:0 0 16px 16px;
 background:radial-gradient(55% 160% at 18% -40%,#f3dca466,transparent 70%),radial-gradient(50% 160% at 86% -50%,#cfe0f566,transparent 70%),#ffffffeb;
 -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 12px 28px -22px #10193566;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.hire-link{gap:12px;height:var(--bar);font:500 13.5px var(--ui)}
.hire-link .hire-copy{color:var(--slate);text-decoration:none}
.hire-btn{display:inline-flex;align-items:center;gap:6px;height:28px;margin-left:4px;padding:0 12px;border-radius:9px;background:var(--ink);color:#fff;font:600 12.5px var(--ui);transition:background .2s}
.hire-btn .ico{width:13px;height:13px;color:#e6bf62}
.hire-link:hover .hire-btn{background:#24305a}
.hire-link:hover span.hire-copy{color:var(--ink)}
.hdr{transition:top .3s cubic-bezier(.4,0,.2,1)}
html.bar-away .hire-bar{transform:translateY(calc(-100% - 2px))}
@media(max-width:900px){.burger{transition:top .3s cubic-bezier(.4,0,.2,1)}}
@media(max-width:700px){
 :root{--bar:40px}
 .hire-bar{width:calc(100% - 20px);border-radius:0 0 14px 14px}
 .hire-link{gap:8px;font-size:12.5px;padding:0 10px}
 .hire-link .hire-copy{display:none}
 .hire-btn{height:26px;padding:0 10px;font-size:12px}
}
.hire-link .hire-btn,.hire-link:hover .hire-btn{color:#fff;text-decoration:none}
/* ===== Workflow Automation Studio, n8n-style (WorkflowStudioArt .wfs): dark nodes, grey connectors, dashed AI helpers, a
   Yes / No decision and a tiered approval; the run lights the path node by node. ===== */
.studio-art.wfs{display:flex;align-items:center;justify-content:center;padding:18px 14px}
.wfs-svg{display:block;width:100%;height:100%;max-height:100%;overflow:visible;font-family:var(--font)}
.wfs-tall{display:none}
.wfs-box{fill:#1b2440;stroke:#8ca6cb40;stroke-width:1.2;transition:stroke .3s,fill .3s}
.wfs-node.done .wfs-box{stroke:#5fbf92;fill:#1b2a3e}
.wfs-node.active .wfs-box{stroke:#e6bf62;stroke-width:1.8}
.wfs-ic{color:#c9d6ec}.wfs-node.done .wfs-ic{color:#fff}
.wfs-ic.light{color:#fff}
.wfs-ai-ic{fill:url(#wfs-ai-grad);fill:#4b5fc0}
.wfs-title{font:650 15px var(--font);fill:#fff}
.wfs-sub-t{font:500 11.5px var(--font);fill:#9fb0cc}
.wfs-label{font:550 11.5px var(--font);fill:#9fb0cc}
.wfs-node.done .wfs-label{fill:#e4ebf7}
.wfs-tick{opacity:0;transition:opacity .25s}
.wfs-tick circle{fill:#2f9e6a;stroke:#10192d;stroke-width:2}
.wfs-tick path{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wfs-node.done .wfs-tick{opacity:1}
.wfs-edge path{fill:none;stroke:#8ca6cb59;stroke-width:1.5;transition:stroke .3s}
.wfs-edge.on path{stroke:#e6bf62;stroke-width:2;stroke-dasharray:6 5;animation:wfs-flow .6s linear infinite}
@keyframes wfs-flow{to{stroke-dashoffset:-11}}
.wfs-port-label rect{fill:#0d142b;stroke:#8ca6cb40}
.wfs-port-label text{font:650 10.5px var(--font);fill:#9fb0cc}
.wfs-port-label.on rect{fill:#e6bf62;stroke:#e6bf62}.wfs-port-label.on text{fill:#10192d}
.wfs-sub circle{fill:#141d36;stroke:#8ca6cb40}
.wfs-sub .wfs-dash{fill:none;stroke:#8ca6cb59;stroke-width:1.2;stroke-dasharray:4 4}
.wfs-sub .wfs-port{fill:#8ca6cb80}
.wfs-sub.on circle{stroke:#8fbbe9}.wfs-sub.on .wfs-dash{stroke:#8fbbe9a6;animation:wfs-flow .8s linear infinite}
.wfs-sublabel{font:500 11px var(--font);fill:#8193b3}
@media(max-width:900px){.wfs-wide{display:none}.wfs-tall{display:block}}
@media(prefers-reduced-motion:reduce){.wfs-edge.on path,.wfs-sub.on .wfs-dash{animation:none}}
/* the workflow card's four lines */
.cap-lines{display:grid;gap:10px;margin:0;padding:0 0 0 18px;list-style:none;position:relative}
.cap-lines::before{content:'';position:absolute;left:0;inset-block:3px;width:2px;border-radius:2px;background:linear-gradient(#d4a03c 0 35%,#6994c2 70%,#6994c220)}
.cap-lines li{font:450 clamp(13px,1.12vw,16.5px)/1.5 var(--font);color:#b9c7de}
.wfs-tall .wfs-label{font-size:12.5px}.wfs-tall .wfs-label.side{font-size:13.5px;font-weight:600;fill:#c9d6ec}
.wfs-tall .wfs-title{font-size:14px}
/* the empty "Meet Navio OS" section (MeetNavio): a light, quiet chapter until its picture arrives */
.nvs-empty{background:var(--bg)}
/* ===== The dome (MeetNavio .dome): light rings, a blue-violet core, a white base bar; rises in, then the middle ring
   lights Capture → Execute → Prove in turn. ===== */
.dome-wrap{position:relative;width:min(1080px,100%,calc((var(--chapter-height,100svh) - var(--nvs-top,150px) - 150px - var(--ck-h,0px)) * 1200 / 640));transition:width .35s ease;margin:clamp(14px,2.4vh,26px) auto 0}
.dome{display:block;width:100%;height:auto;overflow:visible;font-family:var(--font)}
.dome-tall,.dome-chips{display:none}
.dome-seg{stroke:#f7f7f5;stroke-width:5;stroke-linejoin:round}
.dome-ring{filter:drop-shadow(0 -6px 14px #1222440f)}
.dome-rim{fill:none;stroke:#ffffff;stroke-opacity:.85;stroke-width:2}
.dome-hlo{opacity:0;stroke:#f7f7f5;stroke-width:5}
.dome-badge{fill:#fff;stroke:#dfe5ee;stroke-width:1.5;filter:drop-shadow(0 6px 12px #1222441f)}
.dome-core-rim{fill:none;stroke:#ffffff;stroke-opacity:.22;stroke-width:2}
.dome-base-tile{fill:#eef4fb;stroke:none!important}
.dome-t{fill:#101935;font-weight:650;letter-spacing:-.01em}
.dome-t.big{font-weight:700;letter-spacing:-.02em}
.dome-t.sub{fill:#5a6378;font-weight:550;letter-spacing:.04em}
.dome-core{filter:drop-shadow(0 -6px 22px #2364a81c)}
.dome-core-t{fill:#fff;font-weight:700;letter-spacing:-.02em}
.dome-core-s{fill:#eef2fb;font-weight:500}
.dome-dotted{fill:none;stroke:#a9bfdd;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:.002 .011}
.dome-runner{fill:#d4a03c;filter:drop-shadow(0 0 6px #d4a03caa)}
.dome-base rect{fill:#fff;stroke:#dfe5ee;filter:drop-shadow(0 18px 28px #1222441f)}
.dome-base line{stroke:#e3e7ee}
.dome-base text{fill:#101935;font-weight:600}
.dome-base-i{color:#2364a8}
/* rise in: core, then the rings outwards, then the base and the dotted arc */
.dome-ring,.dome-base,.dome-dots,.dome-glow{transform-box:view-box;transform-origin:50% 87%}
@media(prefers-reduced-motion:no-preference){
 .dome-wrap .dome-ring,.dome-wrap .dome-base,.dome-wrap .dome-dots{opacity:0}
 .dome-wrap.seen .dome-ring,.dome-wrap.seen .dome-base,.dome-wrap.seen .dome-dots{animation:dome-rise .7s cubic-bezier(.2,.8,.2,1) forwards}
 .dome-wrap.seen .dome-r0{animation-delay:.1s}.dome-wrap.seen .dome-r1{animation-delay:.32s}.dome-wrap.seen .dome-r2{animation-delay:.54s}
 .dome-wrap.seen .dome-r3{animation-delay:.76s}.dome-wrap.seen .dome-base{animation-delay:.98s}.dome-wrap.seen .dome-dots{animation-delay:1.15s}
 /* after the rise every part lights in process order (owner, 10 Oct): Playbooks → Workflows → Templates → Execution →
    Follow-ups → Delivered → Every Promise, Delivered; 1.4 s a step, one 11.2 s round */
 .dome-wrap.run .dome-step>.dome-hlo{animation:dome-hl 11.2s ease-in-out infinite}
 .dome-wrap.run .dome-step>.dome-t{animation:dome-hlt 11.2s ease-in-out infinite}
 .dome-wrap.run .dome-step.s0>*{animation-delay:1.8s}.dome-wrap.run .dome-step.s1>*{animation-delay:3.2s}.dome-wrap.run .dome-step.s2>*{animation-delay:4.6s}
 .dome-wrap.run .dome-step.s3>*{animation-delay:6s}.dome-wrap.run .dome-step.s4>*{animation-delay:7.4s}.dome-wrap.run .dome-step.s5>*{animation-delay:8.8s}
 .dome-wrap.run .dome-step.s6>*{animation-delay:10.2s}
 .dome-wrap.run .dome-core{animation:dome-breathe 4s ease-in-out 1.5s infinite}
}
@keyframes dome-rise{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}
@keyframes dome-hl{0%,18%,100%{opacity:0}4%,13%{opacity:1}}
@keyframes dome-hlt{0%,18%,100%{fill:var(--t-ink)}4%,13%{fill:var(--hl-ink)}}
@keyframes dome-breathe{0%,100%{filter:drop-shadow(0 -6px 22px #2364a81c)}50%{filter:drop-shadow(0 -8px 30px #6a4fb833)}}
/* each part's label takes its own glow colour */
.dome-t{--t-ink:#101935}.dome-t.sub{--t-ink:#5a6378}
.dome-step.i0{--hl-ink:#5a3d9e}.dome-step.i1{--hl-ink:#146a72}.dome-step.i2{--hl-ink:#9c4a2a}
.dome-step.m0{--hl-ink:#8a5d10}.dome-step.m1{--hl-ink:#1f5aa0}.dome-step.m2{--hl-ink:#1e7a4f}.dome-step.s6{--hl-ink:#7a5410}
[data-motion=paused] .dome-wrap *{animation-play-state:paused}
/* phones: the simpler dome, the base as chips */
@media(max-width:700px){
 .dome-wrap{width:100%;margin-top:22px}
 .dome-wide{display:none}.dome-tall{display:block}
 .dome-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
 .dome-chips li{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px #dfe5ee;font:600 13px var(--font);color:var(--ink)}
 .dome-chips .ico{width:15px;height:15px;color:var(--blue)}
}
.dome-tall .dome-glow{display:none}
/* Meet Navio OS ends right under the dome (owner, 10 Oct: "reduce this space"); the logo band follows closely */
.home-chapters>#navio-os.nvs-empty{height:auto;padding-bottom:clamp(18px,3vh,34px)}
.trust-band{padding-top:clamp(10px,2vh,22px)}
/* "Apply now" as a plain link, not a button (owner, 10 Oct) */
.hire-link .hire-btn,.hire-link:hover .hire-btn{height:auto;margin-left:2px;padding:0;border-radius:0;background:none;color:var(--ink);font:600 13.5px var(--ui);text-decoration:underline;text-decoration-color:#10193566;text-underline-offset:3px}
.hire-link:hover .hire-btn{text-decoration-color:var(--ink)}
.hire-btn .ico{width:13px;height:13px;color:#c99535}
@media(max-width:700px){.hire-link .hire-btn,.hire-link:hover .hire-btn{font-size:12.5px}}
/* the tools ring and the four columns sit a little lower, centred in the space the removed button left (owner, 10 Oct) */
@media(min-width:701px) and (min-height:501px){.home-chapters .connect-stage{margin-top:auto}.home-chapters .connect-features{margin-bottom:auto}}
/* the tools section ends under its four columns (owner, 10 Oct: "remove the white space") */
@media(min-width:701px){.home-chapters>.connect{height:auto;padding-bottom:clamp(36px,6vh,64px)}.home-chapters .connect-stage{flex:none;height:clamp(200px,32vh,300px)}}
/* hiring strip text a size smaller (owner, 10 Oct) */
.hire-link{font-size:12px}.hire-link b{font-size:12px}.hire-link .hire-copy{font-size:12px}
.hire-link .hire-btn,.hire-link:hover .hire-btn{font-size:12px}.hire-dot{width:7px;height:7px}
@media(max-width:700px){.hire-link,.hire-link b,.hire-link .hire-btn,.hire-link:hover .hire-btn{font-size:11.5px}}

/* ============ FOOTER LINKS (owner, 10 Oct): one footer on every page — the band, then wordmark + socials and two link columns, then
   Terms · Privacy · Cookie Settings with the copyright on the right. Same navy style as the band. ============ */
.f2-grid{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(2,minmax(0,1fr));gap:30px 40px;padding:clamp(28px,3vw,42px) 0 clamp(24px,2.6vw,34px);border-bottom:1px solid #ffffff1f}
.f2-logo{display:inline-block}
.f2-logo img{display:block;width:auto;height:22px;filter:brightness(0) invert(1)}
.f2-brand p{margin:12px 0 18px;font-size:15px;color:#aab3c8}
.f2-brand .foot-soc{justify-content:flex-start;margin-left:-4px}
.f2-col h3{margin:0 0 14px;font:600 12px var(--font);letter-spacing:.12em;text-transform:uppercase;color:#8b96ae}
.f2-col ul{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.f2-col li{display:flex;align-items:center;gap:10px}
.f2-col a{font-size:15px;color:#eef1f7;text-decoration:none;transition:color .2s}
.f2-col a:hover{color:#8fb8ef}
.f2-tag{padding:3px 9px;border-radius:99px;background:#ffffff17;font:600 11.5px/1.2 var(--font);color:#e8c97a}
.f2 .foot-copy{margin:0;font-size:13px;color:#8b96ae}
.f2 .foot-line>.foot-copy{align-self:flex-start;text-align:left}
.f2 .foot-line>.foot-legal{margin-left:auto;justify-content:flex-end;align-self:flex-end;text-align:right}
.f2 .foot-line{margin-top:clamp(8px,1.2vw,16px);padding-top:16px;border-top:1px solid #ffffff1f}
.f2 .foot-left button{font-weight:500;color:#eef1f7;text-decoration-color:#ffffff40}
.sp-ways{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1100px;margin-inline:auto}
@media(max-width:680px){
 .f2-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
 .f2-brand{grid-column:1/-1;text-align:center}
 .f2-brand .foot-soc{justify-content:center;margin-left:0}
 .f2-col h3{margin-bottom:12px}
 .f2 .foot-line{flex-direction:column;gap:8px}
 .f2 .foot-left{flex-wrap:wrap;white-space:normal;justify-content:center}
 .f2 .foot-copy{font-size:12px}
 .sp-ways{grid-template-columns:1fr}
}
/* without the band the footer opens straight on the links; a compact Book a Demo sits under the wordmark line */
.f2-grid{padding-top:clamp(34px,3.6vw,52px)}
.f2-btn.f2-btn-sm{height:46px;gap:14px;margin:0 0 22px;padding:0 6px 0 20px;font-size:15px}
.f2-btn.f2-btn-sm i{width:34px;height:34px}
.f2-btn.f2-btn-sm i .ico{width:15px;height:15px}
.f2-brand{scroll-margin-top:120px}
@media(max-width:900px){.f2-btn.f2-btn-sm{width:auto;justify-content:center}}

/* ============ FOOTER, LIGHT (owner, 10 Oct, after sarvam.ai): white panel, ink type, the brand column (wordmark, "Every Promise,
   Delivered.", Book a Demo, socials), Product / Company, one legal line, then a giant NUVENA in navy → blue → gold ============ */
.site-footer.f2.f2-light{background:#fff;color:var(--ink);box-shadow:0 -1px 0 #10193512,0 -24px 60px -40px #1019352e}
.f2-light .f2-grid{border-bottom-color:#1019351a}
.f2-light .f2-logo img{height:26px;filter:none}
.f2-light .f2-brand p{color:#4a5470;font-size:16px;font-weight:500}
.f2-light .f2-col h3{color:#7a8399}
.f2-light .f2-col a{color:#101935}
.f2-light .f2-col a:hover{color:#2364a8}
.f2-light .f2-tag{background:#fbf3e1;color:#8a5d10}
.f2-light .foot-soc a{color:#4a5470}
.f2-light .foot-soc a:hover{color:#101935}
.f2-light .f2-btn{background:#101935;color:#fff}
.f2-light .f2-btn i{background:#fff;color:#101935}
.f2-light .f2-btn:hover{background:var(--action-dark)}
.f2.f2-light .foot-left{color:#7a8399}
.f2.f2-light .foot-left a{color:#101935;text-decoration-color:#10193533}
.f2.f2-light .foot-left a:hover{text-decoration-color:#2364a8}
.f2.f2-light .foot-dot{color:#b4bbcb}
.f2.f2-light .foot-copy{font-size:inherit;color:#7a8399}
.f2.f2-light .foot-line{justify-content:flex-start}
/* the giant wordmark: the real NUVENA drawing as a mask over a slow navy → blue → gold sweep */
.f2-giant{width:100%;aspect-ratio:900/161;margin:clamp(22px,3vw,40px) 0 clamp(4px,1vw,12px);background:linear-gradient(100deg,#101935 0%,#1f4f8f 30%,#2f6db8 48%,#8fb8ef 62%,#d4a03c 82%,#b8862e 100%);background-size:220% 100%;background-position:0 0;
  -webkit-mask:url('/product/nuvena-wordmark.png') center/contain no-repeat;mask:url('/product/nuvena-wordmark.png') center/contain no-repeat}
@media(prefers-reduced-motion:no-preference){.f2-giant{animation:f2-giant 16s ease-in-out infinite alternate}}
@keyframes f2-giant{to{background-position:100% 0}}
[data-motion=paused] .f2-giant{animation-play-state:paused}
@media(max-width:680px){.f2.f2-light .foot-line{justify-content:center}.f2-giant{margin-top:24px}}
.f2-light .f2-grid{border-bottom:0;padding-bottom:0}
/* the dark footer (owner, 10 Oct): no legal line, so no rule under the links; the giant NUVENA sweeps light blue → blue → gold on navy */
.f2:not(.f2-light) .f2-grid{border-bottom:0;padding-bottom:0}
.f2:not(.f2-light) .f2-brand p{font-size:16px;font-weight:500;color:#c3cadb}
.f2:not(.f2-light) .f2-giant{background-image:linear-gradient(100deg,#dfe9f8 0%,#8fb8ef 28%,#4f86cc 50%,#8fb8ef 66%,#d4a03c 84%,#f0c46a 100%)}
/* without the giant wordmark the links close the footer: room under them */
.f2:not(.f2-light) .f2-grid{padding-bottom:clamp(30px,3.4vw,48px)}
/* less room under the links (owner, 10 Oct: "height niche se kam") */
.f2:not(.f2-light) .f2-grid{padding-bottom:clamp(8px,1vw,14px)}
/* all footer text ends on one line (owner, 10 Oct): the brand column is a flex column whose socials sit at its foot, level with the
   last link row (Trust Center / Legal) */
@media(min-width:681px){
 .f2:not(.f2-light) .f2-brand{display:flex;flex-direction:column;align-items:flex-start}
 .f2:not(.f2-light) .f2-brand p{margin-bottom:22px}
 .f2:not(.f2-light) .f2-brand .foot-soc{margin-top:auto;margin-bottom:-3px}
}

/* ============ HOME CTA CARD (owner, 10 Oct, after Icertis + Ironclad, in our light colours): resting over the navy footer ============ */
.home-cta{--hcta-over:clamp(90px,9vw,130px);position:relative;z-index:2;margin-bottom:calc(-1 * var(--hcta-over));padding-top:clamp(24px,4vw,56px)}
body:has(.home-cta) .site-footer.f2{padding-top:var(--hcta-over-f,clamp(90px,9vw,130px))!important}
.hcta{position:relative;display:flex;align-items:center;min-height:clamp(300px,30vw,400px);padding:clamp(40px,5vw,72px) clamp(28px,6vw,88px);overflow:hidden;border-radius:clamp(26px,3vw,40px);border:1px solid #1019350f;
  background:radial-gradient(#10193512 1px,transparent 1.3px) 0 0/16px 16px,radial-gradient(70% 120% at 82% 100%,#dce8f8 0%,#dce8f800 70%),linear-gradient(115deg,#f6f8fc 0%,#eef3fb 48%,#fbf4e6 100%);
  box-shadow:0 30px 70px -40px #10193559,0 2px 6px #1019350a}
.hcta-copy{position:relative;z-index:1;max-width:min(560px,52%)}
.hcta h2{margin:0;font:750 clamp(34px,4vw,60px)/1.06 var(--font);letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.hcta h2 em{position:relative;display:inline-block;font-style:italic;color:var(--blue)}
.hcta-underline{position:absolute;left:2%;bottom:-.09em;width:95%;height:.16em;overflow:visible;pointer-events:none}
.hcta-underline path{fill:none;stroke:#c99535;stroke-width:3;stroke-opacity:.8;stroke-linecap:round}
.hcta-btn{display:inline-flex;align-items:center;gap:12px;height:52px;margin-top:clamp(24px,2.6vw,34px);padding:0 28px;border:2px solid #d4a03c;border-radius:99px;background:var(--action-dark);color:#fff;font:600 16px var(--font);cursor:pointer;transition:background-color .2s}
.hcta-btn:hover{background:var(--action-dark)}
.hcta-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.hcta-btn:hover svg{transform:translateX(3px)}
/* the arch: the dome's shape, a photo inside, two rings around it (gold, then blue) */
.hcta-art{position:absolute;right:clamp(28px,8vw,130px);bottom:0;width:clamp(210px,21vw,300px);aspect-ratio:5/6}
.hcta-art::before,.hcta-art::after{content:"";position:absolute;border:1.5px solid;border-bottom:0;border-radius:999px 999px 0 0;pointer-events:none}
.hcta-art::before{inset:-18px -18px 0;border-color:#d4a03c80}
.hcta-art::after{inset:-44px -44px 0;border-color:#2364a833}
.hcta-arch{position:absolute;inset:0;overflow:hidden;border-radius:999px 999px 0 0;background:linear-gradient(#e3ecf8,#cddcf1)}
.hcta-arch img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
@media(max-width:760px){
 .home-cta{--hcta-over:80px}
 body:has(.home-cta) .site-footer.f2{--hcta-over-f:80px}
 .hcta{flex-direction:column;align-items:center;padding:36px 22px 0;text-align:center}
 .hcta-copy{max-width:none}
 .hcta h2{font-size:clamp(30px,8.4vw,40px)}
 .hcta-art{position:relative;right:auto;width:min(210px,60%);margin-top:52px}
}
.hcta h2>span{display:block;white-space:nowrap}
.hcta-art{width:clamp(190px,18vw,262px)}
.hcta-art::before{inset:-16px -16px 0}
.hcta-art::after{inset:-36px -36px 0}
.hcta-arch img{object-position:50% 18%}
@media(max-width:760px){.hcta-art{width:min(196px,56%);margin-top:46px}}
/* the window is the dome's own shape: wide, a half-circle top (two colleagues fit side by side) */
.hcta-art{width:clamp(300px,32vw,470px);aspect-ratio:4/3}
.hcta-arch img{object-position:50% 40%}
.hcta-arch img[src*="home-cta-team"]{object-position:50% 30%}
@media(max-width:760px){.hcta-art{width:min(330px,92%);margin-top:48px}}
/* the rings are SVG now (a dot travels each); the CSS border rings are off */
.hcta-art::before,.hcta-art::after{content:none}
.hcta-rings{position:absolute;left:-40px;top:-40px;overflow:visible;pointer-events:none}
.hcta-ring{fill:none;stroke-width:1.5}
.hcta-ring.g{stroke:#d4a03c80}
.hcta-ring.b{stroke:#2364a833}
.hcta-dot.g{fill:#d4a03c;filter:drop-shadow(0 0 5px #d4a03caa)}
.hcta-dot.b{fill:#2364a8;filter:drop-shadow(0 0 5px #2364a888)}
/* two people (owner, 10 Oct, after Ironclad): two dome-topped windows of different heights rising from the card's base */
.hcta-duo{position:absolute;right:clamp(28px,7vw,110px);bottom:0;width:clamp(330px,32vw,460px);height:calc(100% - clamp(28px,3vw,44px))}
.hcta-p{position:absolute;bottom:0;width:45%;overflow:hidden;border-radius:999px 999px 0 0}
.hcta-p.p1{left:0;height:76%;background:#dbe6f6}
.hcta-p.p2{right:0;height:100%;background:#f3e6cc}
.hcta-p img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hcta-rings2{position:absolute;inset:0;overflow:visible;pointer-events:none}
@media(max-width:760px){
 .hcta-duo{position:relative;right:auto;width:min(330px,94%);height:280px;margin-top:44px}
}
.hcta-arch img[src*="home-cta-meeting"]{object-position:60% 30%}
.hcta-art{width:clamp(320px,34vw,500px)}
@media(max-width:760px){.hcta-art{width:min(340px,94%)}}
/* the card melts into its surroundings (owner, 10 Oct): no border or shadow; its top is the page colour, its bottom the footer navy, so
   it opens out of the section above and runs into the footer below. The dot grid fades in and out with it. */
.hcta{border:0;box-shadow:none;isolation:isolate;
  background:linear-gradient(180deg,#f7f7f5 0%,#f1f5fb 22%,#e8eff9 46%,#dce5f2 60%,#9aa6c0 78%,#3c4868 91%,#101935 100%)}
.hcta::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(#10193514 1px,transparent 1.3px) 0 0/16px 16px;
  -webkit-mask:linear-gradient(180deg,transparent 0%,#000 22%,#000 55%,transparent 74%);mask:linear-gradient(180deg,transparent 0%,#000 22%,#000 55%,transparent 74%)}
.hcta-copy{z-index:1}
/* navy exactly from the footer's top line down, so the part of the card over the footer IS the footer; the words sit in the light part */
.hcta{min-height:clamp(340px,34vw,470px);align-items:flex-start;padding-top:clamp(40px,4.4vw,64px);
  background:linear-gradient(180deg,#f7f7f5 0%,#eef3fb 26%,#e3ebf7 calc(100% - var(--hcta-over) - 100px),#8e9ab5 calc(100% - var(--hcta-over) - 45px),#101935 calc(100% - var(--hcta-over)),#101935 100%)}
.hcta::before{-webkit-mask:linear-gradient(180deg,transparent 0%,#000 22%,#000 calc(100% - var(--hcta-over) - 130px),transparent calc(100% - var(--hcta-over) - 50px));
  mask:linear-gradient(180deg,transparent 0%,#000 22%,#000 calc(100% - var(--hcta-over) - 130px),transparent calc(100% - var(--hcta-over) - 50px))}
@media(max-width:760px){.hcta{padding-top:34px}}
/* Full-bleed homepage transition; keep content on the shared alignment grid. */
#main:has(.home-simple) .home-cta{padding-top:12px;background:linear-gradient(180deg,#edf2f8 0%,#edf2f8 26%,#e3ebf7 calc(100% - var(--hcta-over) - 100px),#8e9ab5 calc(100% - var(--hcta-over) - 45px),#101935 calc(100% - var(--hcta-over)),#101935 100%)}
#main .home-chapters.home-simple>#integrations.home-connections{padding-bottom:24px}
#main:has(.home-simple) .hcta{background:transparent}
/* Keep both homepage edges on the same shared gutter. */
@media(min-width:1101px){
 #main:has(.home-simple) :is(#capabilities,#integrations,.home-cta)>.container,
 .site:has(.home-simple) .site-footer>.container{padding-inline:var(--gutter)}
 #main:has(.home-simple) #integrations>.container{width:100%}
 #main .home-simple .trust-band{padding-inline:var(--gutter)}
 #main:has(.home-simple) .hcta-art{right:40px}
 /* Product starts at the arch's left guide; Company stays on the right gutter.
    120px = artwork right inset + SVG outset + the first grid gap. */
 .site:has(.home-simple) .site-footer .f2-grid{grid-template-columns:minmax(0,calc(100% - clamp(320px,34vw,500px) - 120px)) minmax(190px,1fr) max-content}
}

/* ============ phone fixes (owner, 10 Oct) ============ */
/* the capability deck: only the front card shows its contents; the cards behind stay as empty stacked frames. On some phones (iOS
   Safari) the animated pictures of the back cards painted through the front card and the cards looked jumbled */
.cap-shell>*{transition:opacity .3s ease}
.cap-shell[aria-hidden="true"]>*{visibility:hidden;opacity:0}
@media(max-width:760px){
 /* "Built to Get Work Done." centred and a little lower */
 .home-chapters .cap-shell-section .du-title,.cap-shell-section .du-title{top:0;margin-top:14px;text-align:center}
 /* the closing card: everything centred — "See Navio OS in action." on one smaller line, Book a Demo under it, the photo under that */
 .hcta{align-items:center;text-align:center}
 .hcta-copy{display:flex;flex-direction:column;align-items:center;width:100%}
 .hcta h2{font-size:clamp(21px,6.4vw,28px);white-space:nowrap}
 .hcta h2>span{display:inline}
 .hcta-btn{margin-top:20px}
 .hcta-art{margin-left:auto;margin-right:auto}
}
/* Automated Follow-ups picture (owner, 10 Oct: "mumble jumble" on phones): the push banner slides in solid from the top edge and back
   out (no fade over the screen); on phones the screens change as one sideways swipe — the next screen arrives as the last one leaves,
   so the picture is never blank and two screens never sit on top of each other */
@keyframes onit-push-slide{0%{opacity:1;transform:translateY(-80px)}14%,80%{opacity:1;transform:translateY(0)}97%{opacity:1;transform:translateY(-80px)}100%{opacity:0;transform:translateY(-80px)}}
.onit-push-box{filter:drop-shadow(0 6px 10px #1019351f)}
@keyframes onit-mobile-visit2{0%{opacity:0;transform:translateX(320px)}13%,87%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-320px)}}
@keyframes onit-mobile-enter{from{opacity:0;transform:translateX(320px)}to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:no-preference){
 .onit-handoff.can-animate.has-started .onit-push-banner{animation-name:onit-push-slide}
}
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
 .onit-handoff.can-animate.has-started .onit-svg-phone .onit-origin-stage{animation-delay:2.6s;animation-duration:.8s}
 .onit-handoff.can-animate.has-started .onit-svg-phone .onit-recipient-0{animation-name:onit-mobile-visit2;animation-duration:6.1s}
 .onit-handoff.can-animate.has-started .onit-svg-phone .onit-recipient-1{animation-name:onit-mobile-enter;animation-duration:.8s}
}
.hcta-arch img[src*="home-cta-istock"]{object-position:56% 34%}
/* the Navio AI page is sized in px by its measure() (Safari-safe); align it to the top of its row on phones */
@media(max-width:900px){.ai-document{align-self:center;max-height:none}}

/* ============ MEET NAVIO OS, teams + iPad (owner, 10 Oct, after n8n): less room above the title; under the dome a 50/50 block ============ */
.home-chapters>#navio-os.nvs,#navio-os.nvs{padding-top:calc(var(--nvs-top,150px) * .58)}
@media(max-width:760px){.home-chapters>#navio-os.nvs,#navio-os.nvs{padding-top:62px}}
.nt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,80px);width:min(1180px,100%);margin:clamp(48px,7vh,84px) auto 0;text-align:left}
/* the list: one row per team, the active one on a white card with a gold bar that fills while it is shown */
.nt-list{display:grid;gap:6px;justify-self:end;width:min(460px,100%)}
.nt-row{position:relative;display:grid;gap:4px;padding:16px 20px 16px 26px;border:0;border-radius:14px;background:none;font:inherit;text-align:left;color:var(--slate);cursor:pointer;transition:background-color .25s,box-shadow .25s}
.nt-row:hover{background:#ffffff8c}
.nt-row.on{background:#fff;box-shadow:0 14px 34px -22px #10193547,0 0 0 1px #1019350d}
.nt-row:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.nt-bar-v{position:absolute;left:10px;top:16px;bottom:16px;width:3px;border-radius:3px;background:#1019351a;overflow:hidden}
.nt-row:not(.on) .nt-bar-v{background:transparent}
.nt-bar-v i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(#e2b552,#c99535);transform-origin:top}
.nt-row:not(.on) .nt-bar-v i{display:none}
@media(prefers-reduced-motion:no-preference){.nt.run .nt-row.on .nt-bar-v i{animation:nt-fill 5s linear both}}
@keyframes nt-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.nt-who{font:500 19px/1.2 var(--font);letter-spacing:-.02em;color:#7a8399}
.nt-who b{font-weight:700;color:var(--ink)}
.nt-what{font-size:15.5px;line-height:1.4;color:#5a6378}
.nt-row:not(.on) .nt-what{color:#8b93a7}
/* the iPad (landscape): silver edge, black bezel, camera, a light screen with only the one thing that matters */
.nt-ipad{container-type:inline-size;width:min(560px,100%);justify-self:start}
.nt-body{position:relative;padding:.9cqw;border-radius:5.2cqw;background:linear-gradient(155deg,#f1f2f5 0%,#bcc0c8 16%,#8f949e 38%,#cdd0d6 58%,#868b95 80%,#dfe1e6 100%);box-shadow:0 40px 70px -40px #10193580,0 8px 20px -12px #10193540}
.nt-bez{position:relative;padding:2.4cqw;border-radius:4.6cqw;background:#06070a}
.nt-cam{position:absolute;z-index:3;left:50%;top:.85cqw;width:.8cqw;height:.8cqw;margin-left:-.4cqw;border-radius:50%;background:radial-gradient(circle at 36% 34%,#6f83ad 0 12%,#202636 34%,#090a0d 70%)}
.nt-scr{position:relative;display:flex;flex-direction:column;aspect-ratio:4/3;overflow:hidden;border-radius:2.6cqw;background:radial-gradient(90% 70% at 70% 0%,#e9f0fa 0%,#f6f7fa 60%)}
.nt-glare{position:absolute;inset:2.4cqw;z-index:2;pointer-events:none;border-radius:2.6cqw;background:linear-gradient(118deg,#ffffff40 0%,#ffffff0d 30%,#ffffff00 46%)}
.nt-top{display:flex;align-items:center;gap:1.6cqw;padding:3.2cqw 4cqw 0;font:600 2.5cqw/1 var(--font);color:var(--ink)}
.nt-n{width:3.6cqw;height:3.6cqw}
.nt-top em{margin-left:auto;padding:1cqw 2.2cqw;border-radius:99px;background:#1019350d;font-style:normal;font-weight:600;color:#5a6378}
.nt-stage{flex:1;display:grid;place-items:center;padding:3cqw 6cqw 5cqw}
.nt-card{display:grid;justify-items:start;gap:2.6cqw;width:100%;max-width:70cqw;padding:5cqw 5.4cqw;border-radius:3.6cqw;background:#fff;box-shadow:0 2.4cqw 6cqw -3cqw #10193533,0 0 0 .2cqw #1019350f}
.nt-t{font:700 4.4cqw/1.1 var(--font);letter-spacing:-.03em;color:var(--ink)}
.nt-s{margin-top:-1.4cqw;font-size:2.9cqw;color:#7a8399}
.nt-steps{display:flex;gap:1.6cqw;flex-wrap:wrap}
.nt-step,.nt-pill,.nt-done{display:inline-flex;align-items:center;gap:1.2cqw;padding:1.3cqw 2.6cqw;border-radius:99px;font:600 2.9cqw/1 var(--font)}
.nt-step{background:#fbf3e1;color:#8a5d10}
.nt-pill.gold{background:#fbf3e1;color:#8a5d10}.nt-pill.blue{background:#e8f1ff;color:#1f5aa0}
.nt-done{background:#e6f5ec;color:#1e7a4f}
.nt-step svg,.nt-done svg{width:2.8cqw;height:2.8cqw;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.nt-pill .ico{width:2.8cqw;height:2.8cqw}
.nt-bar{width:100%;height:1.6cqw;border-radius:99px;background:#1019350f;overflow:hidden}
.nt-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2364a8,#3f9b6e)}
.nt-owner{display:flex;align-items:center;gap:2cqw;font:600 3cqw/1.2 var(--font);color:var(--ink)}
.nt-owner small{display:block;font-weight:500;font-size:2.5cqw;color:#7a8399}
.nt-av{display:grid;place-items:center;width:6.4cqw;height:6.4cqw;border-radius:50%;background:#5b6e8d;color:#fff;font-size:2.4cqw;font-weight:700}
.nt-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4cqw;width:100%}
.nt-tile{display:grid;gap:1.4cqw;padding:4.4cqw 3cqw;border-radius:3cqw;background:#fff;box-shadow:0 2cqw 5cqw -3cqw #10193533,0 0 0 .2cqw #1019350f}
.nt-tile b{font:700 7.6cqw/1 var(--font);letter-spacing:-.04em}
.nt-tile span{font-size:2.6cqw;font-weight:600;color:#5a6378}
.nt-tile.blue b{color:#1f5aa0}.nt-tile.gold b{color:#b07a17}.nt-tile.green b{color:#1e7a4f}
/* a screen arrives softly; its pieces land one after another */
@media(prefers-reduced-motion:no-preference){
 .nt-stage>*{animation:nt-arrive .45s cubic-bezier(.2,.8,.2,1) both}
 .nt-in{animation:nt-pop .4s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
 .nt-bar i{animation:nt-bar 1.3s cubic-bezier(.3,.7,.2,1) .3s both}
}
.nt-bar i{width:100%}
@keyframes nt-arrive{from{opacity:0;transform:translateY(2.4cqw) scale(.98)}to{opacity:1;transform:none}}
@keyframes nt-pop{from{opacity:0;transform:translateY(1.2cqw)}to{opacity:1;transform:none}}
@keyframes nt-bar{from{width:0}to{width:100%}}
[data-motion=paused] .nt *{animation-play-state:paused}
/* phones and tablets: the list on top (only the active row shows its line), the iPad under it */
@media(max-width:900px){
 .nt{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:40px}
 .nt-list{justify-self:stretch;width:100%;gap:2px}
 .nt-row{padding:11px 16px 11px 24px}
 .nt-who{font-size:16.5px}
 .nt-what{font-size:14px}
 .nt-row:not(.on) .nt-what{display:none}
 .nt-ipad{justify-self:center;width:min(520px,100%)}
}
/* the dome's glow stops at the dome's base, so it no longer spills behind the teams list below (owner, 10 Oct) */
.dome-glow{clip-path:inset(0 0 50% 0)}

/* Meet Navio OS order (owner, 10 Oct): title → teams + iPad → dome */
.nvs-in>.nt{margin-top:clamp(30px,4.6vh,54px)}
.nvs-in>.nt+.dome-wrap{margin-top:clamp(64px,9vh,110px)}
@media(max-width:900px){.nvs-in>.nt{margin-top:26px}.nvs-in>.nt+.dome-wrap{margin-top:48px}}

/* ============ NAVIO AI AT WORK (owner, 10 Oct, after Ironclad): a card where the AI works, then shows its result; one line + 3 points ============ */
.nx{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(32px,6vw,96px);width:min(1180px,calc(100% - 2 * var(--gutter,24px)));margin:0 auto;padding:clamp(56px,9vh,110px) 0 clamp(40px,7vh,90px)}
.nx-art{position:relative;container-type:inline-size;aspect-ratio:11/10;overflow:hidden;border-radius:clamp(20px,2.2vw,28px);isolation:isolate}
/* working: our colours, a soft moving gradient, a thin line into a glass pill that names each step */
.nx-work{position:absolute;inset:0;display:flex;align-items:center;background:radial-gradient(60% 55% at 0% 100%,#e8c98a 0%,#e8c98a00 70%),linear-gradient(140deg,#5d6fc4 0%,#7a62c6 34%,#3f74bd 66%,#22518f 100%);background-size:100% 100%,160% 160%;transition:opacity .7s ease}
@media(prefers-reduced-motion:no-preference){.nx-work{animation:nx-drift 12s ease-in-out infinite alternate}}
@keyframes nx-drift{from{background-position:0 0,0% 0%}to{background-position:0 0,100% 100%}}
.nx-line{width:22cqw;height:2px;background:linear-gradient(90deg,#ffffff00,#ffffffcc)}
.nx-pill{display:flex;align-items:center;gap:2.6cqw;min-width:58cqw;padding:4cqw 5cqw;border-radius:4cqw;background:linear-gradient(110deg,#ffffffe6,#ffffffb3);box-shadow:0 2cqw 6cqw -2cqw #10193540;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font:500 3.9cqw/1.2 var(--font);color:#3d4660}
.nx-pill .ico{width:4.4cqw;height:4.4cqw;color:#7a8399}
@media(prefers-reduced-motion:no-preference){.nx-say{animation:nx-say .5s cubic-bezier(.2,.8,.2,1) both}}
@keyframes nx-say{from{opacity:0;transform:translateY(1.6cqw)}to{opacity:1;transform:none}}
/* result: the card turns light; a white card rises with what is due, a second one peeks below */
.nx-result{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:6cqw 8.5cqw 0;background:#ebeef4;opacity:0;transition:opacity .7s ease}
.nx-art[data-phase=result] .nx-result{opacity:1}
.nx-art[data-phase=result] .nx-work{opacity:0}
.nx-card{width:100%;padding:6cqw 7cqw;border-radius:4.4cqw;background:#fff;box-shadow:0 2cqw 6cqw -3cqw #10193526}
.nx-h{display:block;font:700 4.1cqw/1.2 var(--font);color:var(--ink)}
.nx-card p{margin:3.4cqw 0 5.4cqw;font-size:3.5cqw;line-height:1.45;color:#3d4660}
.nx-card p b{color:var(--ink)}
.nx-card ul{display:grid;gap:3.4cqw;margin:0;padding:0;list-style:none}
.nx-card li{display:grid;gap:.9cqw}
.nx-row-t{display:flex;align-items:center;gap:2cqw;font:600 3.4cqw/1.2 var(--font);color:var(--ink)}
.nx-row-t u{text-decoration-color:#10193540;text-underline-offset:.6cqw}
.nx-row-t em{padding:.7cqw 1.6cqw;border-radius:1.2cqw;background:#fbf3e1;font:700 2.1cqw/1 var(--font);letter-spacing:.06em;text-transform:uppercase;font-style:normal;color:#8a5d10}
.nx-card small{font-size:2.8cqw;color:#7a8399}
.nx-peek{height:20cqw;margin-top:4cqw;padding:0}
@media(prefers-reduced-motion:no-preference){
 .nx-art[data-phase=result] .nx-card:not(.nx-peek){animation:nx-rise .7s cubic-bezier(.2,.8,.2,1) .15s both}
 .nx-art[data-phase=result] .nx-card li{animation:nx-say .45s cubic-bezier(.2,.8,.2,1) calc(.6s + var(--i) * .2s) both}
}
@keyframes nx-rise{from{opacity:0;transform:translateY(8cqw)}to{opacity:1;transform:none}}
[data-motion=paused] .nx *{animation-play-state:paused}
/* the words: one line in the home voice (blue italic, gold underline), three points, Learn More */
.nx-copy h2{margin:0;font:750 clamp(34px,3.7vw,56px)/1.08 var(--font);letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.nx-copy h2 em{position:relative;font-style:italic;color:var(--blue)}
.nx-points{display:grid;gap:14px;margin:clamp(22px,2.6vw,32px) 0 0;padding:0;list-style:none}
.nx-points li{position:relative;padding-left:26px;font-size:clamp(15.5px,1.15vw,17px);line-height:1.45;color:#3d4660}
.nx-points li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,#d4a03c,#2364a8)}
.nx-btn{display:inline-flex;align-items:center;gap:12px;height:52px;margin-top:clamp(26px,2.8vw,36px);padding:0 28px;border:2px solid #d4a03c;border-radius:99px;background:var(--action-dark);color:#fff;font:600 16px var(--font);text-decoration:none;transition:background-color .2s}
.nx-btn:hover{background:var(--action-dark)}
.nx-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.nx-btn:hover svg{transform:translateX(3px)}
@media(max-width:900px){
 .nx{grid-template-columns:minmax(0,1fr);gap:30px;padding:56px 0 40px}
 .nx-copy{order:-1;text-align:center}
 .nx-copy h2{font-size:clamp(28px,7.6vw,40px)}
 .nx-points{justify-items:center}
 .nx-points li{text-align:left}
 .nx-art{width:min(520px,100%);justify-self:center}
}

/* ============ STEPS + iPAD, 30/70 (owner, 10 Oct): five steps on the left, a near bezel-less iPad playing one drawn screen per step ============ */
.nt{grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:clamp(24px,3.4vw,56px);width:min(1240px,100%)}
.nt-list{justify-self:stretch;width:100%}
.nt-row{padding:14px 16px 14px 26px}
.nt-who{display:flex;align-items:baseline;gap:10px;font-size:20px}
.nt-who small{font:600 11.5px/1 var(--font);letter-spacing:.12em;color:#9aa1b3}
.nt-row.on .nt-who small{color:#c99535}
.nt-line-m{display:none}
@media(prefers-reduced-motion:no-preference){.nt.run .nt-row.on .nt-bar-v i{animation-duration:6s}}
/* the iPad: a thin aluminium edge, a slim black bezel, a 10:7 screen */
.nt-ipad{justify-self:stretch;width:100%;max-width:calc((100svh - 230px) * 1.43);margin-left:auto}
.nt-body{padding:.42cqw;border-radius:3.1cqw}
.nt-bez{padding:1.05cqw;border-radius:2.75cqw}
.nt-cam{top:.32cqw;width:.42cqw;height:.42cqw;margin-left:-.21cqw}
.nt-scr{aspect-ratio:1000/700;border-radius:1.8cqw;background:#f5f6f9}
.nt-glare{inset:1.05cqw;border-radius:1.8cqw}
.ns-svg{display:block;width:100%;height:100%}
.ns-svg text{font-family:var(--font)}
.ns-page{fill:#fff;stroke:#e3e7ee;stroke-width:1.5;filter:drop-shadow(0 14px 22px #10193514)}
.ns-title{font-size:27px;font-weight:700;letter-spacing:-.02em;fill:#101935}
.ns-head{font-size:18px;font-weight:700;fill:#25304f}
.ns-bar{fill:#e4e8ef}
.ns-chip{font-size:16px;font-weight:650}
.ns-big{font-size:26px;font-weight:700;letter-spacing:-.02em;fill:#101935}
.ns-card{fill:#fff;stroke:#e6e9f0;stroke-width:1.5;filter:drop-shadow(0 10px 16px #10193510)}
.ns-label{font-size:16px;font-weight:500;fill:#7a8399}
.ns-value{font-size:21px;font-weight:700;letter-spacing:-.01em;fill:#101935}
.ns-clause{font-size:30px;font-weight:600;fill:#25304f}
.ns-del{fill:#c8326a}.ns-ins{fill:#1e7a4f;font-weight:700}
.ns-av{font-size:16px;font-weight:700;fill:#fff}
.ns-say{font-size:18px;font-weight:600;fill:#25304f}
.ns-sigbox{fill:#fafbfd;stroke:#d5dae3;stroke-width:1.5;stroke-dasharray:6 6}
.ns-sig{fill:none;stroke:#1f3f7a;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.ns-ring{stroke-dasharray:1 1;stroke-dashoffset:0}
.ns-ringn{font-size:52px;font-weight:750;letter-spacing:-.03em;fill:#101935}
.ns-hl{opacity:1}.ns-hl.gold{fill:#fbefd2}.ns-hl.blue{fill:#e2edfb}.ns-hl.violet{fill:#efe9fb}
.ns-beam{display:none;fill:#3c9cff;opacity:.14}
.ns-out{opacity:0}
.ns-caret{fill:#7a62c6;opacity:0}
@media(prefers-reduced-motion:no-preference){
 .ns-type{transform-box:fill-box;transform-origin:left center;animation:ns-type .45s ease-out var(--d,0s) both}
 .ns-fade{animation:ns-fade .45s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
 .ns-hl{animation:ns-hl .5s ease-out var(--d,0s) both}
 .ns-beam{display:block;animation:ns-beam 2.2s ease-in-out .2s both}
 .ns-sig{stroke-dasharray:1 1;animation:ns-draw 1s ease-in-out var(--d,0s) both}
 .ns-ring{animation:ns-draw 1.4s cubic-bezier(.4,.1,.2,1) var(--d,0s) both}
 .ns-out{animation:ns-out .3s ease var(--d,0s) both}
 .ns-caret{animation:ns-blink 1s steps(1) 2.3s infinite}
 .nt-scr>.ns-svg{animation:ns-in .45s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes ns-type{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ns-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ns-hl{from{opacity:0}to{opacity:1}}
@keyframes ns-beam{0%{transform:translateY(0);opacity:0}10%{opacity:.16}90%{opacity:.16}100%{transform:translateY(550px);opacity:0}}
@keyframes ns-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ns-out{from{opacity:1}to{opacity:0}}
@keyframes ns-blink{0%{opacity:1}50%{opacity:0}}
@keyframes ns-in{from{opacity:.2;transform:scale(.985)}to{opacity:1;transform:none}}
.ns-fade,.ns-type,.ns-sig{transform-box:fill-box}
[data-motion=paused] .nt-scr *{animation-play-state:paused}
/* the AI block now sits between the steps and the dome */
.nvs-in>.nx{padding:clamp(56px,8vh,100px) 0 clamp(24px,4vh,48px);text-align:left}
.nvs-in>.nx+.dome-wrap{margin-top:clamp(36px,6vh,72px)}
/* phones and tablets: the five steps as one row of pills, the active step's line under it, then the iPad */
@media(max-width:900px){
 .nt{grid-template-columns:minmax(0,1fr);gap:14px}
 .nt-list{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px;margin:0 -2px}
 .nt-list::-webkit-scrollbar{display:none}
 .nt-row{flex:none;padding:9px 14px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px #1019351a}
 .nt-row.on{background:var(--ink);box-shadow:none}
 .nt-row.on .nt-who b{color:#fff}.nt-row.on .nt-who small{color:#e2b552}
 .nt-bar-v,.nt-what{display:none!important}
 .nt-who{font-size:15px;gap:6px}
 .nt-line-m{display:block;margin:0;text-align:center;font-size:14.5px;color:#5a6378}
 .nt-ipad{max-width:none;margin:4px 0 0}
 .nvs-in>.nx{padding-top:48px}
 .nvs-in>.nx .nx-copy{text-align:center}
}
.nt-ipad{max-width:calc((100svh - 300px) * 1.43)}

/* ============ one set of edges for the home blocks (owner, 10 Oct: "bleed lines"): the site container's content edges ============ */
.nvs-in{width:100%}
.nvs-in>.nt,.nvs-in>.nx{width:min(calc(1424px - 2 * var(--gutter)),100%)}
/* steps + iPad: 40/60, the steps larger so they fill their column */
.nt{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:clamp(28px,3.4vw,56px)}
.nt-row{padding:18px 22px 18px 32px}
.nt-who{font-size:clamp(20px,1.7vw,25px);gap:12px}
.nt-what{font-size:clamp(15.5px,1.15vw,17.5px)}
.nt-bar-v{left:12px;top:18px;bottom:18px}
.nt-ipad{max-width:none}
/* more room above the Execution OS block, so it reads as its own part */
.nvs-in>.nx{padding:clamp(96px,13vh,150px) 0 clamp(28px,5vh,56px);grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
/* ============ THE EXECUTION OS (owner, 10 Oct): contract → Execution OS → each promise run to done, on a deep navy card ============ */
.ex-art{aspect-ratio:auto;padding:0;background:radial-gradient(#8ca6cb1f 1px,transparent 1.3px) 0 0/22px 22px,radial-gradient(70% 60% at 30% 40%,#1f3a72 0%,#1f3a7200 70%),linear-gradient(150deg,#14214a 0%,#0f1838 100%);box-shadow:0 40px 80px -50px #101935a6}
.ex-svg{display:block;width:100%;height:auto}
.ex-svg text{font-family:var(--font)}
.ex-art>svg.ex-w{display:block}.ex-art>svg.ex-t{display:none}
@media(max-width:700px){.ex-art>svg.ex-w{display:none}.ex-art>svg.ex-t{display:block}}
.ex-paper{fill:#f4f6fb}
.ex-paper-t{font-size:22px;font-weight:700;fill:#101935}
.ex-bar{fill:#dde3ee}
.ex-signed{fill:#e6f5ec}.ex-signed-t{font-size:17px;font-weight:700;fill:#1e7a4f}
.ex-tick{fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.ex-con .ex-tick{color:#1e7a4f}
.ex-wire{fill:none;stroke:#8ca6cb40;stroke-width:2.4;stroke-dasharray:6 8;transition:stroke .4s}
.ex-wire.on{stroke:#8fb8ef8c}
.ex-pulse{fill:none;stroke:#e2b552;stroke-width:4;stroke-linecap:round;stroke-dasharray:.14 1;stroke-dashoffset:1.14;filter:drop-shadow(0 0 6px #e2b552)}
@media(prefers-reduced-motion:no-preference){.ex-pulse{animation:ex-pulse .75s ease-out both}}
@keyframes ex-pulse{from{stroke-dashoffset:1.14}to{stroke-dashoffset:0}}
.ex-card{fill:#ffffff0f;stroke:#ffffff1f;stroke-width:1.5;transition:fill .4s,stroke .4s}
.ex-card.ok{fill:#3f9b6e1f;stroke:#6fd0a080}
.ex-ini{font-size:17px;font-weight:700;fill:#fff}
text.ex-t{display:inline;font-size:25px;font-weight:700;letter-spacing:-.01em;fill:#fff}
.ex-s{font-size:19px;font-weight:500;fill:#aab3c8}
.ex-chip text{font-size:17px;font-weight:700}
.ex-chip.slate rect{fill:#ffffff1f}.ex-chip.slate text{fill:#e6ebf5}
.ex-chip.blue rect{fill:#2364a859}.ex-chip.blue text{fill:#cfe1fb}
.ex-chip.gold rect{fill:#d4a03c40}.ex-chip.gold text{fill:#f4d58f}
.ex-chip.violet rect{fill:#7a62c650}.ex-chip.violet text{fill:#ddd2fb}
.ex-chip.green rect{fill:#3f9b6e66}.ex-chip.green text{fill:#c9f2dc}.ex-chip.green .ex-tick{color:#c9f2dc}
@media(prefers-reduced-motion:no-preference){
 .ex-chip{animation:ex-chip .35s cubic-bezier(.2,.8,.2,1) both}
 .ex-lane{opacity:0;transform:translateX(14px);transition:opacity .5s ease calc(var(--i) * .12s),transform .5s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .12s)}
 .ex-lane.in{opacity:1;transform:none}
 .ex-core.live .ex-core-ring{animation:ex-ring 2.2s ease-in-out infinite}
}
@keyframes ex-chip{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ex-ring{0%,100%{opacity:.25}50%{opacity:.9}}
.ex-core-box{fill:#1d2f63;stroke:#d4a03c;stroke-width:2}
.ex-core-ring{fill:none;stroke:#d4a03c;stroke-width:1.5;opacity:.4}
.ex-core.done .ex-core-box{stroke:#6fd0a0}.ex-core.done .ex-core-ring{stroke:#6fd0a0}
.ex-core-t{font-size:22px;font-weight:750;letter-spacing:-.01em;fill:#fff}
.ex-core-s{font-size:16px;font-weight:600;fill:#c4cde0}
.ex-core.done .ex-core-s{fill:#9ee6c0}
.ex-step rect{fill:#ffffff0d;stroke:#ffffff1f;stroke-width:1.2;transition:fill .3s,stroke .3s}
.ex-step text{font-size:17px;font-weight:600;fill:#8b96ae;transition:fill .3s}
.ex-step.past text{fill:#c4cde0}
.ex-step.on rect{fill:#d4a03c;stroke:#d4a03c}.ex-step.on text{fill:#101935}
[data-motion=paused] .ex-art *{animation-play-state:paused}
/* the words */
.nx-def{margin:16px 0 0;font-size:clamp(16px,1.2vw,18px);line-height:1.5;color:#4a5470;max-width:46ch}
@media(max-width:900px){
 .nvs-in>.nx{grid-template-columns:minmax(0,1fr);padding-top:72px}
 .nx-def{margin-inline:auto}
 .nt-row{padding:9px 14px}
}
.ex-t .ex-step text{font-size:15px}
/* ============ Execution OS block, light and 50/50 (owner, 10 Oct: "equal section de, light kar left wale ko, less text") ============ */
.nvs-in>.nx{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ex-art{background:radial-gradient(#1019350f 1px,transparent 1.3px) 0 0/22px 22px,radial-gradient(70% 60% at 30% 40%,#e3ecf8 0%,#e3ecf800 70%),linear-gradient(150deg,#f5f7fb 0%,#eaeff7 100%);box-shadow:0 30px 70px -50px #10193559,0 0 0 1px #1019350d}
.ex-paper{fill:#fff;stroke:#e3e7ee;stroke-width:1.5}
.ex-wire{stroke:#10193524}.ex-wire.on{stroke:#6f8fbf99}
.ex-card{fill:#fff;stroke:#e3e7ee;filter:drop-shadow(0 8px 14px #1019350d)}
.ex-card.ok{fill:#f2fbf6;stroke:#a8dcc0}
text.ex-t{fill:#101935}
.ex-s{fill:#6b7590}
.ex-chip.slate rect{fill:#1019350d}.ex-chip.slate text{fill:#4a5470}
.ex-chip.blue rect{fill:#e8f1ff}.ex-chip.blue text{fill:#1f5aa0}
.ex-chip.gold rect{fill:#fbf3e1}.ex-chip.gold text{fill:#8a5d10}
.ex-chip.violet rect{fill:#efe9fb}.ex-chip.violet text{fill:#5a3d9e}
.ex-chip.green rect{fill:#e6f5ec}.ex-chip.green text{fill:#1e7a4f}.ex-chip.green .ex-tick{color:#1e7a4f}
.ex-core-box{fill:#fff;stroke:#d4a03c;filter:drop-shadow(0 12px 22px #10193518)}
.ex-n{stroke:#1b2a4a}
.ex-core-t{fill:#101935}
.ex-core-s{fill:#6b7590}
.ex-core.done .ex-core-s{fill:#1e7a4f}
.ex-step rect{fill:#fff;stroke:#e3e7ee}
.ex-step text{fill:#8b93a7}
.ex-step.past text{fill:#4a5470}
.ex-step.on rect{fill:#d4a03c;stroke:#d4a03c}.ex-step.on text{fill:#101935}
.nx-points{gap:12px}
/* phones and tablets, restated last so the laptop splits above (40/60, 50/50) never reach them */
@media(max-width:900px){
 .nt{grid-template-columns:minmax(0,1fr);gap:14px}
 .nt-row{padding:9px 14px}
 .nt-who{font-size:15px;gap:6px}
 .nvs-in>.nx{grid-template-columns:minmax(0,1fr)}
}
/* the Execution OS words start level with the top of the card (owner, 10 Oct markup) */
@media(min-width:901px){.nvs-in>.nx{align-items:start}.nvs-in>.nx .nx-copy{padding-top:clamp(8px,1.4vw,22px)}}

/* ============ PRODUCTS PANEL (owner, 10 Oct, after Ironclad's Products menu): the pill's width, Navio OS 70% · Navio On It 30% ============ */
.pm{position:absolute;z-index:3;top:calc(100% + 10px);left:0;right:0;display:grid;grid-template-columns:7fr 3fr;gap:10px;padding:10px;border-radius:24px;background:#fff;border:1px solid #10193514;
  box-shadow:0 30px 60px -28px #10193573,0 4px 12px -6px #1019351f;opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s}
.pm.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s}
.pm-main,.pm-side{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:20px 22px 18px;border-radius:16px;text-decoration:none;color:var(--ink);transition:background-color .2s,box-shadow .2s}
.pm-main{background:#f4f5f9}
.pm-side{background:linear-gradient(160deg,#ffffff 0%,#f7f3ea 100%);box-shadow:inset 0 0 0 1px #10193512}
.pm-main:hover{background:#eef1f7}.pm-side:hover{box-shadow:inset 0 0 0 1px #d4a03c80}
.pm-main:focus-visible,.pm-side:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.pm-name{display:flex;align-items:center;gap:9px;font:700 19px/1.15 var(--font);letter-spacing:-.02em}
.pm-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px #10193514}
.pm-mark svg{width:18px;height:18px}
.pm-line{font-size:13.5px;line-height:1.4;color:#5a6378}
/* a small drawn flow in the corner of the Navio OS card: document → AI → check → signature */
.pm-flow{position:absolute;top:16px;right:18px;display:flex;align-items:center;gap:0}
.pm-flow>span{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#fff;box-shadow:0 4px 10px -6px #10193540,0 0 0 1px #1019350f}
.pm-flow>span .ico{width:15px;height:15px}
.pm-flow>i{width:12px;height:1.5px;background:#10193526}
.pm-doc .ico{color:#7a8399}.pm-ai .ico{color:#c99535}.pm-ok .ico{color:#1e7a4f}.pm-sig .ico{color:#6a4fb8}
.pm-steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pm-steps em{padding:5px 10px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px #10193512;font:600 12px/1 var(--font);font-style:normal;color:#4a5470}
.pm-more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:8px;font:600 13px/1 var(--font);color:var(--blue)}
.pm-more .ico{width:14px;height:14px;transition:transform .2s}
.pm-main:hover .pm-more .ico{transform:translateX(3px)}
/* the On It card: a "say a task" box, like Ironclad's agent prompt, in our colours */
.pm-ask{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding:10px 12px;border-radius:12px;background:#fff;
  border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#2364a8,#7a62c6,#d4a03c) border-box;font-size:12.5px;color:#8b93a7}
.pm-ask .ico{width:15px;height:15px;color:#4a5470}
@media(max-width:900px){.pm{display:none}}
/* the panel is the pill's width, never narrower than 520px (at the top of home the pill is short while Book a Demo steps aside) */
.pm{left:50%;right:auto;width:max(100%,520px);transform:translate(-50%,-6px)}
.pm.open{transform:translate(-50%,0)}
.pm-main,.pm-side{padding:16px 16px 14px;gap:7px}
.pm-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pm-name{font-size:17px;gap:8px}
.pm-side .pm-name{flex-direction:column;align-items:flex-start;gap:8px;font-size:16px}
.pm-mark{width:28px;height:28px;border-radius:8px}.pm-mark svg{width:16px;height:16px}
.pm-line{font-size:12.5px}
.pm-flow{position:static}
.pm-flow>span{width:24px;height:24px;border-radius:8px}
.pm-flow>span .ico{width:12px;height:12px}
.pm-flow>i{width:8px}
.pm-steps{gap:5px;margin-top:4px}
.pm-steps em{padding:4px 8px;font-size:11.5px}
.pm-more{font-size:12.5px}
.pm-ask{padding:8px 10px;font-size:11.5px;border-radius:10px}
.pm-ask .ico{width:13px;height:13px}
/* products panel 60/40 (owner, 10 Oct) */
.pm{grid-template-columns:3fr 2fr}
/* the panel stands exactly between the pill's edges (owner's red lines, 10 Oct); simpler cards */
.pm{left:0;right:0;width:auto;transform:translateY(-6px);padding:8px;gap:8px}
.pm.open{transform:none}
.pm-main,.pm-side{padding:14px 14px 12px;gap:6px}
.pm-name,.pm-side .pm-name{flex-direction:row;align-items:center;gap:8px;font-size:16px}
.pm-side .pm-name{font-size:15px;gap:7px}
.pm-mark{width:26px;height:26px;flex:none}.pm-mark svg{width:15px;height:15px}
.pm-line{font-size:12.5px}
.pm-more{align-self:flex-end;margin-top:auto;padding-top:10px;white-space:nowrap}
.pm-side .pm-ask{margin-top:8px}
/* wider dropdown (owner's red lines, 10 Oct): about 560px, centred under the pill; never narrower than the pill, never off screen */
.pm{left:50%;right:auto;width:min(max(100%,560px),calc(100vw - 32px));transform:translate(-50%,-6px)}
.pm.open{transform:translate(-50%,0)}
/* the two marks without their tiles, larger, sitting on the name's line (owner, 10 Oct) */
.pm-mark{width:auto;height:auto;border-radius:0;background:none;box-shadow:none}
.pm-mark svg{display:block;width:30px;height:30px}
.pm-name,.pm-side .pm-name{gap:10px;font-size:18px}
.pm-mark .oi-mark{width:30px;height:30px}
/* On It's line */
.pm-say{margin-top:10px;font:500 15px/1.3 var(--font);letter-spacing:-.01em;color:#4a5470}
.pm-say b{font-weight:700;color:#8a5d10}
/* the iPad is bezel-less (owner, 10 Oct): a hairline aluminium edge and a hairline of black, the screen runs to the edge; no camera dot */
.nt-body{padding:.28cqw;border-radius:2.4cqw}
.nt-bez{padding:.32cqw;border-radius:2.12cqw}
.nt-cam{display:none}
.nt-scr{border-radius:1.8cqw}
.nt-glare{inset:.32cqw;border-radius:1.8cqw}
/* the products panel picture (owner, 10 Oct, after Ironclad): grey rails, white chips, our colours */
.pm-art{display:block;width:100%;height:auto;margin:6px 0 -2px}
.pf-line{fill:none;stroke:#10193517;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.pf-chip{fill:#fff;filter:drop-shadow(0 3px 0 #1019350d) drop-shadow(0 6px 10px #10193512)}
.pf-plus{fill:none;stroke:#5b6fc4;stroke-width:4.5;stroke-linecap:round}
.pf-page{fill:#fff;filter:drop-shadow(0 4px 8px #10193514)}
.pf-fold{fill:#dfe3ea}
.pf-txt{fill:#d7dbe3}
.pf-spark{fill:#d4a03c}
.pf-tick{fill:none;stroke:#1e7a4f;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.pf-sig{fill:none;stroke:#6a4fb8;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.pf-ring{fill:#fff;filter:drop-shadow(0 4px 8px #1019351f)}
@media(prefers-reduced-motion:no-preference){
 .pm .pf-line{stroke-dasharray:640;stroke-dashoffset:640}
 .pm.open .pf-line{animation:pf-draw .9s cubic-bezier(.4,.1,.2,1) .1s forwards}
 .pm.open .pf-sig{stroke-dasharray:120;animation:pf-sign 1s ease-in-out .55s both}
}
@keyframes pf-draw{to{stroke-dashoffset:0}}
@keyframes pf-sign{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
.pm-say{margin-top:2px}
/* ============ products panel story, step by step and slow (owner, 10 Oct): OS card → wire → On It tasks ticked ============ */
.pm .pf-line,.pm.open .pf-line,.pm.open .pf-sig{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
.pf-glow{fill:#d4a03c;opacity:0}
/* On It: the tasks the contract created */
.pm-tasks{display:grid;gap:6px;margin-top:12px}
.pm-task{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px #10193510,0 4px 10px -8px #10193540;font:600 12px/1.2 var(--font);color:var(--ink)}
.pm-task>i{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;font:700 8.5px/1 var(--font);font-style:normal;color:#fff}
.pm-task>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-tick{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:#e6f5ec}
.pm-tick svg{width:12px;height:12px;fill:none;stroke:#1e7a4f;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* the wire between the cards */
.pm-wire{position:absolute;inset:0;z-index:1;overflow:visible;pointer-events:none}
.pw-base{fill:none;stroke:#10193524;stroke-width:2;stroke-linecap:round}
.pw-run{fill:none;stroke:#d4a03c;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0;filter:drop-shadow(0 0 4px #d4a03c99)}
.pw-plug{fill:#fff;stroke:#d4a03c;stroke-width:2}
@media(prefers-reduced-motion:no-preference){
 .pm .pf-draw{stroke-dasharray:1 1;stroke-dashoffset:1}
 .pm.open .pf-draw{animation:pf-rail var(--t,.4s) ease-in-out var(--d,0s) forwards}
 .pm .pf-pop,.pm .pf-grow,.pm .pf-type{opacity:0}
 .pm.open .pf-pop{animation:pf-pop .45s cubic-bezier(.2,.8,.2,1) var(--d,0s) forwards}
 .pm.open .pf-grow{animation:pf-grow .6s cubic-bezier(.3,1.6,.4,1) var(--d,0s) forwards}
 .pm.open .pf-type{animation:pf-type .3s ease-out var(--d,0s) forwards}
 .pm .pf-ink{stroke-dasharray:1 1;stroke-dashoffset:1}
 .pm.open .pf-ink{animation:pf-rail var(--t,.45s) ease-in-out var(--d,0s) forwards}
 .pm.open .pf-tw{animation:pf-twinkle 1.1s ease-in-out var(--d,0s) 2}
 .pm.open .pf-glow{animation:pf-glow 1.6s ease-out 3s 2}
 .pm .pw-run{stroke-dashoffset:1}
 .pm.open .pw-run{animation:pf-rail .7s ease-in-out 7.75s forwards}
 .pm .pw-plug{opacity:0}
 .pm.open .pw-plug{animation:pf-pop .3s ease-out 7.9s forwards}
}
.pf-pop,.pf-grow,.pf-type,.pf-tw{transform-box:fill-box;transform-origin:center}
.pf-type{transform-origin:left center}
.pm-task.pf-pop,.pm-tick.pf-grow{transform-box:border-box}
@keyframes pf-rail{to{stroke-dashoffset:0}}
@keyframes pf-pop{from{opacity:0;transform:translateY(5px) scale(.94)}to{opacity:1;transform:none}}
@keyframes pf-grow{0%{opacity:0;transform:scale(.3)}70%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
@keyframes pf-type{from{opacity:1;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes pf-twinkle{0%,100%{transform:scale(1) rotate(0)}40%{transform:scale(1.35) rotate(18deg);filter:drop-shadow(0 0 6px #f0c46a)}}
@keyframes pf-glow{0%{opacity:.35;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}
.pf-glow{transform-box:fill-box;transform-origin:center}
/* (specificity) the step-by-step drawing beats the older whole-line rules above */
@media(prefers-reduced-motion:no-preference){
 .pm .pf-line.pf-draw,.pm .pf-sig.pf-ink,.pm .pf-tick.pf-ink{stroke-dasharray:1 1;stroke-dashoffset:1;animation:none}
 .pm.open .pf-line.pf-draw,.pm.open .pf-sig.pf-ink,.pm.open .pf-tick.pf-ink{animation:pf-rail var(--t,.45s) ease-in-out var(--d,0s) forwards}
}
/* ============ phones: four colour cards instead of the diagram (owner, 10 Oct, after Icertis "Meet Vera") ============ */
.nx-cards{display:none}
@media(max-width:700px){
 .nx .ex-art{display:none}
 .nx .nx-points{display:none}
 .nx-cards{display:grid;gap:12px;width:100%}
 .nvs-in>.nx{gap:22px}
 .nxc{position:relative;overflow:hidden;display:grid;gap:8px;padding:26px 22px 24px;border-radius:22px;color:#fff;text-align:left;
   background-image:radial-gradient(#ffffff14 1px,transparent 1.3px);background-size:9px 9px;isolation:isolate}
 .nxc.b{background-color:#2c5a93}
 .nxc.v{background-color:#57478f}
 .nxc b{position:relative;z-index:1;max-width:82%;font:700 25px/1.12 var(--font);letter-spacing:-.03em}
 .nxc span{position:relative;z-index:1;max-width:84%;font-size:15px;line-height:1.45;color:#e7ebf6}
 .nxc-pat{position:absolute;right:-6px;bottom:-6px;z-index:0;width:132px;height:132px;fill:none;stroke:#ffffff47;stroke-width:1.4}
 .nxc:nth-child(odd) .nxc-pat{top:-6px;bottom:auto;transform:scaleY(-1)}
 .nxc-pat .f{fill:#ffffff4d;stroke:none}
}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
 .nx .nxc{opacity:0;transform:translateY(16px)}
 .nx.seen .nxc{animation:nx-card .6s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .12s) forwards}
}
@keyframes nx-card{to{opacity:1;transform:none}}
/* the wire between the cards comes later (owner, 10 Oct): hidden until the signature is done, then it draws in and the gold runs through */
.pm .pw-base{opacity:0}
.pm.open .pw-base{opacity:1;stroke-dasharray:1 1;stroke-dashoffset:1;animation:pf-rail .45s ease-in-out 7.4s forwards}
@media(prefers-reduced-motion:reduce){.pm.open .pw-base{stroke-dasharray:none;animation:none}}
/* the gold run stays fully hidden until it starts (its round cap showed as a dot early) */
@media(prefers-reduced-motion:no-preference){
 .pm .pw-run{visibility:hidden}
 .pm.open .pw-run{animation:pw-go .7s ease-in-out 7.75s forwards}
}
@keyframes pw-go{from{visibility:visible;stroke-dashoffset:1}to{visibility:visible;stroke-dashoffset:0}}
@media(prefers-reduced-motion:no-preference){
 .pm .pw-base,.pm.open .pw-base{visibility:hidden}
 .pm.open .pw-base{animation:pw-go .45s ease-in-out 7.4s forwards}
}
/* three branches from the plug, one to each task (owner, 10 Oct); each piece draws on its own delay */
.pm-tasks{margin-left:14px}
@media(prefers-reduced-motion:no-preference){
 .pm.open .pw-base{animation:pw-go .4s ease-in-out var(--d,7.4s) forwards}
 .pm.open .pw-run{animation:pw-go .55s ease-in-out var(--d,7.75s) forwards}
}
/* faster story (owner, 10 Oct): the timings set in CSS follow the same 0.7 scale */
@media(prefers-reduced-motion:no-preference){
 .pm.open .pf-glow{animation:pf-glow 1.3s ease-out 2.1s 2}
 .pm.open .pw-plug{animation:pf-pop .3s ease-out var(--d,5.5s) forwards}
}
.pm-say b.blue{color:var(--blue)}
.pm-main .pm-say{margin-top:2px}

/* ============ iPAD SCREENS, app style (owner, 10 Oct): one scene per step, base styles = the finished scene ============ */
@media(prefers-reduced-motion:no-preference){.nt.run .nt-row.on .nt-bar-v i{animation:nt-fill var(--ms,6s) linear both}}
.ipx{position:relative;display:flex;flex-direction:column;height:100%;background:#f5f6f9;font-family:var(--font);color:var(--ink);text-align:left;overflow:hidden}
.ipx-bar{display:flex;align-items:center;gap:1.3cqw;height:4.8cqw;flex:none;padding:0 2.2cqw;background:#fff;border-bottom:1px solid #1019350f}
.ipx-n{width:2.1cqw;height:2.1cqw}
.ipx-crumb{display:flex;align-items:center;gap:.8cqw;font-size:1.3cqw;color:#7a8399}
.ipx-crumb i{font-style:normal;color:#c0c6d2}.ipx-crumb b{font-weight:600;color:var(--ink)}
.ipx-ask{display:inline-flex;align-items:center;gap:.6cqw;margin-left:auto;padding:.55cqw 1.2cqw;border-radius:99px;font:600 1.2cqw/1 var(--font);color:var(--ink);
  border:1px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#2364a8,#7a62c6,#d4a03c) border-box}
.ipx-ask .ico{width:1.4cqw;height:1.4cqw;color:#7a62c6}
.ipx-body{position:relative;display:flex;flex:1;min-height:0}
.ipx-main{position:relative;flex:1;min-width:0;padding:1.8cqw 2.2cqw;overflow:hidden}
.ipx-side{display:flex;flex-direction:column;gap:.9cqw;flex:none;padding:1.8cqw 1.6cqw;background:#fff;border-left:1px solid #1019350f;overflow:hidden}
.ipx-draft .ipx-side{width:23%}.ipx-scan .ipx-side{width:33%}.ipx-neg .ipx-side{width:37%}.ipx-sign .ipx-side{width:30%}.ipx-del .ipx-side{width:42%}
.ipx-side-h{display:flex;align-items:center;gap:.6cqw;font:700 1.05cqw/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:#7a8399}
.ipx-side-h .ico{width:1.3cqw;height:1.3cqw;color:#c99535}
/* the agreement page */
.ipx-page{position:relative;isolation:isolate;height:100%;padding:2.2cqw 2.8cqw;overflow:hidden;border-radius:1.2cqw;background:#fff;box-shadow:0 .6cqw 1.8cqw -.8cqw #10193526,0 0 0 1px #1019350d}
.ipx-flow{display:grid;gap:.62cqw}
.ipx-l{position:relative;font-size:1.3cqw;line-height:1.45;color:#4a5470;white-space:nowrap}
.ipx-l>span{display:inline-block}
.ipx-h1{font:700 2.3cqw/1.2 var(--font);letter-spacing:-.02em;color:var(--ink)}
.ipx-meta{font-size:1.1cqw;color:#8b93a7;margin-bottom:.6cqw}
.ipx-h{margin-top:.8cqw;font-weight:700;font-size:1.4cqw;color:var(--ink)}
/* Draft: the prompt types, slides into the side panel, the MSA writes itself and scrolls */
.ipx-prompt{position:absolute;left:50%;bottom:3cqw;width:62%;display:flex;align-items:center;gap:1cqw;padding:1.2cqw 1.4cqw;border-radius:1.6cqw;transform:translateX(-50%);
  font-size:1.35cqw;color:var(--ink);border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#2364a8,#7a62c6,#d4a03c) border-box;
  box-shadow:0 1.2cqw 3cqw -1.2cqw #10193559;opacity:0;visibility:hidden}
.ipx-prompt>.ico{flex:none;width:1.6cqw;height:1.6cqw;color:#7a62c6}
.ipx-typed{flex:1;min-width:0;white-space:nowrap;overflow:hidden}
.ipx-send{display:grid;place-items:center;flex:none;width:2.6cqw;height:2.6cqw;border-radius:50%;background:var(--ink);color:#fff}
.ipx-send .ico{width:1.4cqw;height:1.4cqw}
.ipx-msg{padding:.9cqw 1.1cqw;border-radius:1cqw;font-size:1.15cqw;line-height:1.4}
.ipx-msg.me{align-self:flex-end;max-width:92%;background:#2364a8;color:#fff;border-bottom-right-radius:.3cqw}
.ipx-msg.ai{background:#f3f0fb;color:#3d3566}.ipx-msg.ai b{display:block;font-weight:600}
.ipx-dots{display:inline-flex;gap:.35cqw;margin-top:.5cqw}.ipx-dots i{width:.55cqw;height:.55cqw;border-radius:50%;background:#7a62c6}
/* Scan: four sections lit, what is found and what needs attention */
.ipx-scan .ipx-l[class*="ipx-sec-"]::before{content:"";position:absolute;z-index:-1;left:-1cqw;right:-1cqw;top:-.4cqw;height:7.2cqw;border-radius:.8cqw;border-left:.35cqw solid}
.ipx-sec-pay::before{background:#fbefd2;border-color:#d4a03c}.ipx-sec-sow::before{background:#e2edfb;border-color:#2364a8}
.ipx-sec-sla::before{background:#efe9fb;border-color:#7a62c6}.ipx-sec-ren::before{background:#e3f4ea;border-color:#3f9b6e}
.ipx-sec-conf::before{display:none}
.ipx-scan .ipx-gap span{border-radius:.3cqw;background:#fde3e1;box-shadow:0 0 0 .25cqw #fde3e1}
.ipx-beam{position:absolute;left:2.2cqw;right:2.2cqw;top:1.8cqw;height:6cqw;pointer-events:none;background:linear-gradient(#3c9cff00,#3c9cff2e);border-bottom:2px solid #3c9cff;opacity:0}
.ipx-big{font:700 2cqw/1.15 var(--font);letter-spacing:-.02em;color:var(--ink)}
.ipx-list{display:grid;gap:.6cqw}
.ipx-found{display:flex;align-items:center;gap:.8cqw;padding:.75cqw .9cqw;border-radius:.8cqw;background:#f6f7fa;font:600 1.2cqw/1.2 var(--font)}
.ipx-found i{width:.9cqw;height:.9cqw;border-radius:50%;flex:none}
.ipx-found span{flex:1}.ipx-found em{font-style:normal;color:#1e7a4f;font-weight:700}
.c-pay i{background:#d4a03c}.c-sow i{background:#2364a8}.c-sla i{background:#7a62c6}.c-ren i{background:#3f9b6e}
.ipx-sub{margin-top:.6cqw;font:700 1.05cqw/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:#7a8399}
.ipx-flag{display:flex;align-items:center;gap:.8cqw;padding:.75cqw .9cqw;border-radius:.8cqw;font-size:1.15cqw;line-height:1.3}
.ipx-flag b{flex:none;padding:.3cqw .7cqw;border-radius:99px;font-size:.95cqw;letter-spacing:.06em;text-transform:uppercase}
.ipx-flag.gold{background:#fdf6e7;color:#6b4a0c}.ipx-flag.gold b{background:#f6e3b4}
.ipx-flag.red{background:#fdf0ef;color:#8f2a24}.ipx-flag.red b{background:#f8cfcb}
/* Negotiate: the clause lifts out into the thread; redlines */
.ipx-neg .ipx-main{overflow:visible}
.ipx-target{white-space:normal}
.ipx-target::before{content:"";position:absolute;z-index:-1;inset:-.35cqw -.8cqw;border-radius:.6cqw;background:#fdf3d8}
.ipx-del{color:#c8326a;text-decoration:line-through;text-decoration-thickness:.12cqw}
.ipx-ins{margin-left:.5cqw;color:#1e7a4f;font-weight:600;text-decoration:underline;text-decoration-thickness:.12cqw;text-underline-offset:.25cqw}
.ipx-lift{position:absolute;left:12cqw;top:12.4cqw;padding:.6cqw 1cqw;border-radius:.7cqw;background:#fff4d6;box-shadow:0 1cqw 2.4cqw -1cqw #10193566;font-size:1.25cqw;white-space:nowrap;color:#5c4210;opacity:0;pointer-events:none}
.ipx-link{position:absolute;right:-1.4cqw;top:13cqw;width:3.6cqw;border-top:.18cqw dashed #d4a03c}
.ipx-cm{display:flex;gap:.8cqw;align-items:flex-start;padding:.8cqw .9cqw;border-radius:.9cqw;background:#f6f7fa;font-size:1.13cqw;line-height:1.35;color:#3d4660}
.ipx-cm>i{display:grid;place-items:center;flex:none;width:2.2cqw;height:2.2cqw;border-radius:50%;font:700 1cqw/1 var(--font);font-style:normal;color:#fff}
.ipx-cm>i.ai{background:linear-gradient(135deg,#7a62c6,#2364a8)}
.ipx-cm b{display:block;font-size:1.05cqw;color:var(--ink)}
.ipx-resolved{align-self:flex-start;padding:.45cqw 1cqw;border-radius:99px;background:#e6f5ec;font:700 1.1cqw/1 var(--font);color:#1e7a4f}
/* Sign */
.ipx-sigs{display:grid;grid-template-columns:1fr 1fr;gap:2cqw;margin-top:2.4cqw}
.ipx-sigbox{display:grid;gap:.6cqw;padding:1.2cqw;border-radius:1cqw;border:1.5px dashed #d5dae3;background:#fafbfd}
.ipx-sigbox svg{width:100%;height:5.4cqw}
.ipx-sigbox small{font-size:1.05cqw;color:#7a8399}
.ipx-sig{fill:none;stroke:#1f3f7a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ipx-signer{display:flex;align-items:center;gap:.8cqw;padding:.8cqw .9cqw;border-radius:.9cqw;background:#f6f7fa;font-size:1.1cqw;color:#7a8399}
.ipx-signer span{flex:1}.ipx-signer b{display:block;font-size:1.2cqw;color:var(--ink)}
.ipx-signer em{display:grid;place-items:center;width:2cqw;height:2cqw;border-radius:50%;background:#e6f5ec;color:#1e7a4f;font-style:normal;font-weight:800;font-size:1.1cqw}
.ipx-chip{align-self:flex-start;padding:.5cqw 1.1cqw;border-radius:99px;font:700 1.15cqw/1 var(--font)}
.ipx-chip.green{background:#e6f5ec;color:#1e7a4f}
/* Deliver: commitments followed up, notifications arrive */
.ipx-commit{display:flex;flex-direction:column;gap:1cqw}
.ipx-row{display:flex;align-items:center;gap:1cqw;padding:1.1cqw 1.2cqw;border-radius:1.1cqw;background:#fff;box-shadow:0 0 0 1px #1019350d,0 .6cqw 1.4cqw -1cqw #1019352e}
.ipx-row>i{display:grid;place-items:center;flex:none;width:3cqw;height:3cqw;border-radius:50%;font:700 1.05cqw/1 var(--font);font-style:normal;color:#fff}
.ipx-row>span{flex:1;min-width:0;font-size:1.1cqw;color:#7a8399}.ipx-row b{display:block;font-size:1.35cqw;color:var(--ink)}
.ipx-st{position:relative;font-style:normal}
.ipx-st span{display:inline-block;padding:.45cqw .9cqw;border-radius:99px;font:700 1.05cqw/1 var(--font);white-space:nowrap}
.ipx-st-a{background:#fbf3e1;color:#8a5d10}
.ipx-st-b{position:absolute;right:0;top:0;background:#e6f5ec;color:#1e7a4f}
.ipx-note{display:flex;gap:.9cqw;align-items:flex-start;padding:.9cqw 1cqw;border-radius:1cqw;background:#f6f7fa;font-size:1.12cqw;line-height:1.35;color:#4a5470;box-shadow:0 .5cqw 1.2cqw -1cqw #10193540}
.ipx-note .ico{flex:none;width:1.7cqw;height:1.7cqw;color:#c99535}
.ipx-note.ok .ico{color:#1e7a4f}
.ipx-note b{display:block;font-size:1.2cqw;color:var(--ink)}
/* ---- motion ---- */
@media(prefers-reduced-motion:no-preference){
 .ipx-in{animation:ipx-in .45s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
 .ipx-draft .ipx-l>span{animation:ipx-write .32s steps(16) var(--d,0s) both}
 .ipx-draft .ipx-flow{animation:ipx-scroll 3.6s ease-in-out 5s both}
 .ipx-prompt{animation:ipx-prompt-in .4s ease-out .2s both,ipx-prompt-go .65s cubic-bezier(.5,0,.3,1) 2.35s forwards}
 .ipx-typed{animation:ipx-write 1.6s steps(48) .55s both}
 .ipx-send{animation:ipx-press .3s ease 2.15s both}
 .ipx-draft .ipx-side{animation:ipx-side-in .55s cubic-bezier(.2,.8,.2,1) 2.55s both}
 .ipx-draft .ipx-msg.me{animation:ipx-in .4s ease-out 2.8s both}
 .ipx-draft .ipx-msg.ai:not(.ipx-late){animation:ipx-in .4s ease-out 3.1s both}
 .ipx-dots i{animation:ipx-dot 1s ease-in-out infinite}.ipx-dots i:nth-child(2){animation-delay:.15s}.ipx-dots i:nth-child(3){animation-delay:.3s}
 .ipx-late{animation:ipx-in .45s ease-out var(--d,6.6s) both}
 .ipx-scan .ipx-l[class*="ipx-sec-"]::before{animation:ipx-fade .45s ease-out both}
 .ipx-sec-pay::before{animation-delay:1s!important}.ipx-sec-sow::before{animation-delay:1.5s!important}.ipx-sec-sla::before{animation-delay:2s!important}.ipx-sec-ren::before{animation-delay:2.5s!important}
 .ipx-scan .ipx-gap span{animation:ipx-flash .6s ease-out 3.5s both}
 .ipx-beam{animation:ipx-beam 2.6s ease-in-out .2s both}
 .ipx-target::before{animation:ipx-fade .4s ease-out .5s both}
 .ipx-lift{animation:ipx-lift 1.3s cubic-bezier(.4,.1,.2,1) .9s both}
 .ipx-link{animation:ipx-fade .3s ease-out 1.8s both}
 .ipx-del{animation:ipx-strike .4s ease-out 4.4s both}
 .ipx-ins{animation:ipx-fade .45s ease-out 4.8s both}
 .ipx-sig{stroke-dasharray:1 1;animation:ipx-draw 1.1s ease-in-out var(--d,0s) both}
 .ipx-grow{animation:ipx-grow .5s cubic-bezier(.3,1.6,.4,1) var(--d,0s) both}
 .ipx-st span{animation:ipx-in .4s ease-out var(--d,0s) both}
 .ipx-note{animation:ipx-note .5s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
}
@keyframes ipx-in{from{opacity:0;transform:translateY(1cqw)}to{opacity:1;transform:none}}
@keyframes ipx-fade{from{opacity:0}to{opacity:1}}
@keyframes ipx-write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ipx-scroll{to{transform:translateY(-15cqw)}}
@keyframes ipx-prompt-in{from{opacity:0;visibility:visible;transform:translate(-50%,2cqw)}to{opacity:1;visibility:visible;transform:translate(-50%,0)}}
@keyframes ipx-prompt-go{from{opacity:1;visibility:visible;left:50%;bottom:3cqw;width:62%}70%{opacity:.9}to{opacity:0;visibility:visible;left:88%;bottom:64%;width:21%}}
@keyframes ipx-press{50%{transform:scale(.82)}}
@keyframes ipx-side-in{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:none}}
@keyframes ipx-dot{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes ipx-flash{0%{box-shadow:0 0 0 .25cqw #fde3e1;background:#fde3e1;opacity:0}40%{opacity:1;box-shadow:0 0 0 .7cqw #f6b5ae}100%{opacity:1}}
@keyframes ipx-beam{0%{opacity:0;transform:translateY(0)}8%{opacity:1}92%{opacity:1}100%{opacity:0;transform:translateY(46cqw)}}
@keyframes ipx-lift{0%{opacity:0;transform:none}18%{opacity:1;transform:translateY(-1.4cqw) scale(1.04)}100%{opacity:0;transform:translate(42cqw,-6cqw) scale(.8)}}
@keyframes ipx-strike{from{color:#4a5470;text-decoration-color:transparent}to{color:#c8326a;text-decoration-color:#c8326a}}
@keyframes ipx-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ipx-grow{0%{opacity:0;transform:scale(.3)}70%{opacity:1;transform:scale(1.2)}100%{opacity:1;transform:scale(1)}}
@keyframes ipx-note{from{opacity:0;transform:translateX(3cqw)}to{opacity:1;transform:none}}
[data-motion=paused] .ipx *{animation-play-state:paused}
/* larger type in the iPad scenes (the first pass read too small) */
.ipx-bar{height:5.4cqw}.ipx-n{width:2.5cqw;height:2.5cqw}.ipx-crumb{font-size:1.6cqw}.ipx-ask{font-size:1.45cqw;padding:.7cqw 1.4cqw}.ipx-ask .ico{width:1.7cqw;height:1.7cqw}
.ipx-l{font-size:1.75cqw}.ipx-h1{font-size:3cqw}.ipx-meta{font-size:1.4cqw}.ipx-h{font-size:1.9cqw}.ipx-flow{gap:.7cqw}
.ipx-side{padding:2cqw 1.7cqw;gap:1.1cqw}.ipx-side-h{font-size:1.3cqw}.ipx-side-h .ico{width:1.6cqw;height:1.6cqw}
.ipx-msg{font-size:1.5cqw}.ipx-prompt{font-size:1.75cqw;padding:1.4cqw 1.6cqw}.ipx-prompt>.ico{width:2cqw;height:2cqw}.ipx-send{width:3.2cqw;height:3.2cqw}
.ipx-big{font-size:2.5cqw}.ipx-found{font-size:1.5cqw;padding:.9cqw 1cqw}.ipx-found i{width:1.1cqw;height:1.1cqw}.ipx-sub{font-size:1.25cqw}
.ipx-flag{font-size:1.45cqw}.ipx-flag b{font-size:1.15cqw}
.ipx-scan .ipx-l[class*="ipx-sec-"]::before{height:9.3cqw}
.ipx-lift{font-size:1.65cqw;top:15.6cqw}.ipx-link{top:16.4cqw}
.ipx-cm{font-size:1.42cqw}.ipx-cm>i{width:2.7cqw;height:2.7cqw;font-size:1.2cqw}.ipx-cm b{font-size:1.3cqw}.ipx-resolved{font-size:1.35cqw}
.ipx-sigbox small{font-size:1.3cqw}.ipx-sigbox svg{height:6.4cqw}.ipx-signer{font-size:1.35cqw}.ipx-signer b{font-size:1.5cqw}.ipx-signer em{width:2.5cqw;height:2.5cqw;font-size:1.35cqw}.ipx-chip{font-size:1.4cqw}
.ipx-row>i{width:3.6cqw;height:3.6cqw;font-size:1.3cqw}.ipx-row>span{font-size:1.35cqw}.ipx-row b{font-size:1.65cqw}.ipx-st span{font-size:1.3cqw;padding:.55cqw 1.1cqw}
.ipx-note{font-size:1.38cqw}.ipx-note b{font-size:1.5cqw}.ipx-note .ico{width:2cqw;height:2cqw}
@keyframes ipx-scroll{to{transform:translateY(-30cqw)}}
@media(prefers-reduced-motion:no-preference){.ipx-draft .ipx-flow{animation:ipx-scroll 4.2s ease-in-out 4.4s both}}
@keyframes ipx-scroll{to{transform:translateY(-33cqw)}}
/* Deliver: the root class no longer clashes with the redline strike; "Reminder sent" gives way to "✓ Done" */
.ipx-deliver .ipx-side{width:42%}
.ipx-st{display:inline-grid}
.ipx-st>span{grid-area:1/1;justify-self:end}
.ipx-st-b{position:static}
.ipx-st-a{opacity:0}
@media(prefers-reduced-motion:no-preference){
 .ipx-st .ipx-st-a{animation:ipx-in .4s ease-out var(--d,0s) both,ipx-gone .25s ease var(--d2,3s) forwards}
}
@keyframes ipx-gone{from{opacity:1}to{opacity:0}}
.ipx-sum{display:grid;gap:.6cqw;margin-top:auto;padding:1.6cqw 1.8cqw;border-radius:1.2cqw;background:#fff;box-shadow:0 0 0 1px #1019350d,0 .8cqw 2cqw -1.2cqw #1019353d}
.ipx-sum b{font:750 2.6cqw/1.1 var(--font);letter-spacing:-.03em;color:#1e7a4f}
.ipx-sum span{font-size:1.4cqw;color:#5a6378}
.ipx-bar-f{display:block;height:1cqw;margin-top:.4cqw;border-radius:99px;background:#1019350f;overflow:hidden}
.ipx-bar-f u{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2364a8,#3f9b6e)}
@media(prefers-reduced-motion:no-preference){.ipx-bar-f u{animation:ipx-barfill 1.2s cubic-bezier(.3,.7,.2,1) 6.4s both}}
@keyframes ipx-barfill{from{width:0}to{width:100%}}

/* ============ BEFORE → AFTER (owner, 10 Oct): today's chase beside the same work run by Navio OS ============ */
.ba{position:relative;container-type:inline-size;display:grid;grid-template-columns:1fr 1fr;aspect-ratio:11/10;overflow:hidden;border-radius:clamp(20px,2.2vw,28px);box-shadow:0 30px 70px -50px #10193559,0 0 0 1px #1019350d}
.ba-half{position:relative;padding:5cqw 4cqw}
.ba-before{background:radial-gradient(#10193512 1px,transparent 1.3px) 0 0/16px 16px,#eceef2}
.ba-after{background:radial-gradient(#2364a812 1px,transparent 1.3px) 0 0/16px 16px,linear-gradient(160deg,#f4f8fd,#e9f1fb);display:flex;flex-direction:column;gap:2.2cqw}
.ba-tag{display:inline-block;margin-bottom:3cqw;padding:1cqw 2.2cqw;border-radius:99px;background:#1019350f;font:700 2.1cqw/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:#7a8399}
.ba-tag.on{align-self:flex-start;margin-bottom:.8cqw;background:var(--ink);color:#fff}
/* the mess: tilted, overlapping scraps */
.ba-before>div{position:absolute;border-radius:2cqw;background:#fff;box-shadow:0 1.4cqw 3cqw -1.6cqw #10193547}
.ba-mail{left:4cqw;top:15cqw;width:38cqw;padding:2.4cqw;rotate:-4deg;display:grid;gap:.8cqw}
.ba-mail b{font:700 2.3cqw/1.2 var(--font);color:var(--ink)}.ba-mail span{font-size:2cqw;color:#5a6378}
.ba-mail em{justify-self:start;padding:.5cqw 1.4cqw;border-radius:99px;background:#fde3e1;font:700 1.7cqw/1 var(--font);font-style:normal;color:#b3261e}
.ba-sheet{left:9cqw;top:36cqw;width:34cqw;padding:2.2cqw;rotate:3deg}
.ba-sheet b{display:block;margin-bottom:1.4cqw;font:600 1.9cqw/1 var(--font);color:#1e7a4f}
.ba-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5cqw}
.ba-grid u{height:2.4cqw;border-radius:.4cqw;background:#e9ecf1}.ba-grid u.red{background:#f8cfcb}
.ba-note{left:24cqw;top:56cqw;width:22cqw;padding:2.2cqw;rotate:-6deg;background:#fff3c4!important;font:600 2.2cqw/1.3 var(--font);color:#6b4a0c}
.ba-cal{left:3cqw;top:63cqw;width:20cqw;padding:2cqw;rotate:5deg;display:grid;justify-items:center;gap:.4cqw;text-align:center}
.ba-cal small{font:700 1.6cqw/1 var(--font);letter-spacing:.1em;color:#b3261e}
.ba-cal b{font:750 5cqw/1 var(--font);color:var(--ink)}.ba-cal span{font-size:1.7cqw;color:#5a6378}
.ba-stamp{position:absolute;top:40%;left:50%;translate:-50% 0;rotate:-14deg;padding:.6cqw 1.6cqw;border:.35cqw solid #c8326a;border-radius:1cqw;font:800 2.6cqw/1 var(--font);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:#c8326a;background:#fffffff0}
.ba-risk{right:3cqw;top:84cqw;padding:1.2cqw 2.2cqw!important;rotate:-3deg;background:#c8326a!important;color:#fff;font:700 2cqw/1 var(--font)}
/* the divider: the Navio N */
.ba-mid{position:absolute;left:50%;top:0;bottom:0;width:0;border-left:.3cqw dashed #10193526}
.ba-badge{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:9cqw;height:9cqw;margin:-4.5cqw 0 0 -4.5cqw;border-radius:50%;background:#fff;box-shadow:0 0 0 .5cqw #d4a03c55,0 1.6cqw 3.4cqw -1.4cqw #10193566}
.ba-n{width:5cqw;height:5cqw}
/* the order: one list, an owner each, done */
.ba-row{display:flex;align-items:center;gap:1.6cqw;padding:2cqw;border-radius:2cqw;background:#fff;box-shadow:0 0 0 1px #1019350d,0 1cqw 2.4cqw -1.6cqw #10193538}
.ba-row>i{display:grid;place-items:center;flex:none;width:5cqw;height:5cqw;border-radius:50%;font:700 1.8cqw/1 var(--font);font-style:normal;color:#fff}
.ba-row>span{flex:1;min-width:0;font-size:1.8cqw;color:#7a8399}.ba-row b{display:block;font-size:2.3cqw;color:var(--ink)}
.ba-st{display:none}
.ba-ok{display:grid;place-items:center;flex:none;width:4cqw;height:4cqw;border-radius:50%;background:#e6f5ec;color:#1e7a4f;font-size:2.2cqw}
.ba-sum{margin-top:auto;padding:2.4cqw;border-radius:2cqw;background:#fff;font-size:2.2cqw;color:#4a5470;box-shadow:0 0 0 1px #1019350d}
.ba-sum b{font:750 3.4cqw/1 var(--font);letter-spacing:-.03em;color:#1e7a4f}
@media(prefers-reduced-motion:no-preference){
 .nx .ba .ba-pop,.nx .ba .ba-grow{opacity:0}
 .nx.seen .ba .ba-pop{animation:ba-pop .5s cubic-bezier(.2,.8,.2,1) var(--d,0s) forwards}
 .nx.seen .ba .ba-grow{animation:ipx-grow .5s cubic-bezier(.3,1.6,.4,1) var(--d,0s) forwards}
 .nx.seen .ba-stamp{animation:ba-stamp .45s cubic-bezier(.3,1.6,.4,1) 1.8s both}
}
.ba-before>div.ba-pop{translate:0 0}
@keyframes ba-pop{from{opacity:0;transform:translateY(2cqw) scale(.96)}to{opacity:1;transform:none}}
@keyframes ba-stamp{from{opacity:0;scale:1.6}to{opacity:1;scale:1}}
@media(max-width:700px){.nx .ba{display:none}}
.ba-mid{z-index:3}
.ba-after{justify-content:center;gap:2.4cqw}
.ba-after .ba-tag.on{position:absolute;top:5cqw;left:4cqw}
.ba-row{padding:2.4cqw 2.2cqw;flex-wrap:wrap}
.ba-st{display:inline-block;order:3;flex-basis:100%;margin-left:6.6cqw;margin-top:-.4cqw}
.ba-st{padding:0;background:none;font:700 1.75cqw/1 var(--font);font-style:normal}
.ba-st.blue{color:#1f5aa0}.ba-st.green{color:#1e7a4f}.ba-st.violet{color:#5a3d9e}
.ba-sum{margin-top:1cqw}

/* ============ option for laptops (owner, 10 Oct, after Icertis "Meet Vera"): the four colour cards in an uneven 2×2 under a centred heading ============ */
@media(min-width:701px){
 .nx.nx-cardsmode{grid-template-columns:minmax(0,1fr);justify-items:center}
 .nx.nx-cardsmode .ba,.nx.nx-cardsmode .ex-art,.nx.nx-cardsmode .nx-points{display:none}
 .nx.nx-cardsmode .nx-copy{order:-1;text-align:center;padding-top:0}
 .nx.nx-cardsmode .nx-cards{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:18px;width:100%}
 .nx.nx-cardsmode .nxc{position:relative;overflow:hidden;display:grid;align-content:end;gap:12px;min-height:clamp(220px,20vw,290px);padding:clamp(28px,3vw,44px);border-radius:26px;color:#fff;text-align:left;
   background-image:radial-gradient(#ffffff14 1px,transparent 1.3px);background-size:9px 9px;isolation:isolate}
 .nx.nx-cardsmode .nxc:nth-child(1),.nx.nx-cardsmode .nxc:nth-child(4){grid-column:span 6}
 .nx.nx-cardsmode .nxc:nth-child(2),.nx.nx-cardsmode .nxc:nth-child(3){grid-column:span 4}
 .nx.nx-cardsmode .nxc.b{background-color:#2c5a93}.nx.nx-cardsmode .nxc.v{background-color:#57478f}
 .nx.nx-cardsmode .nxc b{position:relative;z-index:1;max-width:80%;font:700 clamp(28px,2.6vw,40px)/1.08 var(--font);letter-spacing:-.035em}
 .nx.nx-cardsmode .nxc span{position:relative;z-index:1;max-width:70%;font-size:clamp(15px,1.15vw,17px);line-height:1.45;color:#e7ebf6}
 .nx.nx-cardsmode .nxc-pat{position:absolute;right:-8px;top:-8px;z-index:0;width:clamp(150px,13vw,200px);height:clamp(150px,13vw,200px);fill:none;stroke:#ffffff47;stroke-width:1.3}
 .nx.nx-cardsmode .nxc-pat .f{fill:#ffffff4d;stroke:none}
}

/* ============ BEFORE ↔ AFTER SLIDER (owner, 10 Oct: "dragger dede"): two full layers, drag the N to compare ============ */
.ba{display:block;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ba-layer{position:absolute;inset:0;padding:5cqw}
.ba-after{clip-path:inset(0 0 0 var(--x,50%));display:flex;align-items:center;justify-content:center}
.ba-before .ba-tag{position:absolute;top:4.4cqw;left:4.4cqw;margin:0}
.ba-after .ba-tag.on{top:4.4cqw;left:auto;right:4.4cqw}
/* the mess, spread over the whole picture */
.ba-mail{left:6cqw;top:14cqw;width:50cqw;padding:2.8cqw}
.ba-mail b{font-size:2.9cqw}.ba-mail span{font-size:2.4cqw}.ba-mail em{font-size:2cqw}
.ba-sheet{left:46cqw;top:32cqw;width:44cqw;padding:2.6cqw}
.ba-sheet b{font-size:2.3cqw}.ba-grid u{height:3cqw}
.ba-note{left:9cqw;top:52cqw;width:30cqw;font-size:2.7cqw}
.ba-cal{left:58cqw;top:63cqw;width:25cqw}
.ba-cal small{font-size:2cqw}.ba-cal b{font-size:6cqw}.ba-cal span{font-size:2cqw}.ba-stamp{font-size:3cqw}
.ba-risk{left:16cqw;right:auto;top:80cqw;font-size:2.5cqw!important}
/* the order, in the middle */
.ba-list{display:grid;gap:2.4cqw;width:74cqw}
.ba-row{padding:2.6cqw 2.8cqw;gap:2.2cqw}
.ba-row>i{width:6cqw;height:6cqw;font-size:2.2cqw}
.ba-row>span{font-size:2.2cqw}.ba-row b{font-size:2.9cqw}
.ba-st{margin-left:8.2cqw;font-size:2.1cqw}
.ba-ok{width:4.6cqw;height:4.6cqw;font-size:2.5cqw}
.ba-sum{margin-top:.6cqw;padding:2.8cqw;font-size:2.6cqw}.ba-sum b{font-size:4cqw}
/* the handle: a line with the N in a knob, arrows either side */
.ba-handle{position:absolute;z-index:4;top:0;bottom:0;left:var(--x,50%);width:0;outline:none}
.ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:#fff;box-shadow:0 0 0 1px #10193514,0 0 18px #10193533}
.ba-knob{position:absolute;left:0;top:50%;display:flex;align-items:center;gap:.8cqw;padding:1.4cqw 1.8cqw;border-radius:99px;transform:translate(-50%,-50%);
  background:#fff;box-shadow:0 0 0 .45cqw #d4a03c66,0 1.6cqw 3.6cqw -1.4cqw #10193580;font:700 3cqw/1 var(--font);color:#7a8399}
.ba-knob i{font-style:normal}
.ba-knob .ba-n{width:4.4cqw;height:4.4cqw}
.ba-handle:focus-visible .ba-knob{box-shadow:0 0 0 .45cqw var(--blue),0 1.6cqw 3.6cqw -1.4cqw #10193580}
.ba:not(:active) .ba-after,.ba:not(:active) .ba-handle{transition:clip-path .7s cubic-bezier(.4,.1,.2,1),left .7s cubic-bezier(.4,.1,.2,1)}
@media(prefers-reduced-motion:reduce){.ba .ba-after,.ba .ba-handle{transition:none}}
/* ============ five small colour cards under the points (owner's markup, after Icertis) ============ */
.nx-mini{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px;margin-top:clamp(22px,2.6vw,34px)}
.nxm{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(84px,7.4vw,110px);padding:14px 16px;border-radius:16px;color:#fff;isolation:isolate;
  background-image:radial-gradient(#ffffff14 1px,transparent 1.3px);background-size:8px 8px}
.nxm.b{background-color:#2c5a93}.nxm.v{background-color:#57478f}
.nxm:nth-child(1){grid-column:span 7}.nxm:nth-child(2){grid-column:span 5}
.nxm:nth-child(3),.nxm:nth-child(4){grid-column:span 3}.nxm:nth-child(5){grid-column:span 6}
.nxm b{position:relative;z-index:1;font:700 clamp(14px,1.15vw,17px)/1.15 var(--font);letter-spacing:-.015em}
.nxm .nxc-pat{position:absolute;right:-6px;top:-6px;z-index:0;width:84px;height:84px;fill:none;stroke:#ffffff47;stroke-width:1.4}
.nxm .nxc-pat .f{fill:#ffffff4d;stroke:none}
@media(prefers-reduced-motion:no-preference){
 .nx .nxm{opacity:0;transform:translateY(10px)}
 .nx.seen .nxm{animation:nx-card .5s cubic-bezier(.2,.8,.2,1) calc(.4s + var(--i) * .1s) forwards}
}
@media(max-width:700px){.nx-mini{display:none}}
/* the After layer in two halves, so any handle position reads cleanly */
.ba-after{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:6cqw;padding:12cqw 4.4cqw 5cqw}
.ba-list{width:auto;gap:2cqw}
.ba-row{padding:2.2cqw 2.2cqw;gap:1.8cqw}
.ba-row>i{width:5.2cqw;height:5.2cqw;font-size:1.9cqw}
.ba-row>span{font-size:1.9cqw}.ba-row b{font-size:2.5cqw}
.ba-st{margin-left:7cqw;font-size:1.85cqw}
.ba-ok{width:4cqw;height:4cqw;font-size:2.2cqw}
.ba-done{display:grid;justify-items:center;gap:1cqw;padding:4cqw 3cqw;border-radius:2.4cqw;background:#fff;box-shadow:0 0 0 1px #1019350d,0 1.4cqw 3.4cqw -2cqw #10193540;text-align:center}
.ba-done svg{width:20cqw;height:20cqw;margin-bottom:1cqw}
.ba-ring-b{fill:none;stroke:#1019350f;stroke-width:12}
.ba-ring{fill:none;stroke:#3f9b6e;stroke-width:12;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.ba-done b{font:750 5.4cqw/1 var(--font);letter-spacing:-.04em;color:#1e7a4f}
.ba-done span{font-size:2.5cqw;color:#4a5470}
.ba-done small{font-size:1.9cqw;color:#8b93a7}
@media(prefers-reduced-motion:no-preference){.nx.seen .ba-ring{animation:ipx-draw 1.4s cubic-bezier(.4,.1,.2,1) .6s both}}
/* ============ the colour cards in brand colours with soft icons (owner, 10 Oct: "brand related colors, icons, more subtle") ============ */
.nxm,.nxc{background-image:none!important;box-shadow:0 0 0 1px #1019350d,0 14px 30px -24px #10193540}
.nxm.navy,.nxc.navy{background-color:#101935!important;color:#fff}
.nxm.blue,.nxc.blue{background-color:#1f4f8f!important;color:#fff}
.nxm.cream,.nxc.cream{background-color:#f7eedc!important;color:#101935}
.nxm.sky,.nxc.sky{background-color:#e7eef9!important;color:#101935}
.nxm.paper,.nxc.paper{background-color:#fff!important;color:#101935}
/* the icon: large, thin and faint in the top-right corner */
.nxm-ic{position:absolute;right:12px;top:12px;width:30px;height:30px;stroke-width:1.4;opacity:.9}
.nxm.navy .nxm-ic,.nxc.navy .nxm-ic{color:#d4a03c}
.nxm.blue .nxm-ic,.nxc.blue .nxm-ic{color:#bcd3f2}
.nxm.cream .nxm-ic,.nxc.cream .nxm-ic{color:#b07a17}
.nxm.sky .nxm-ic,.nxc.sky .nxm-ic{color:#2364a8}
.nxm.paper .nxm-ic,.nxc.paper .nxm-ic{color:#7a62c6}
.nxc.cream span,.nxc.sky span,.nxc.paper span{color:#4a5470}
.nxc.navy span,.nxc.blue span{color:#c9d3e6}
@media(max-width:700px){.nxc .nxm-ic{right:18px;top:18px;width:34px;height:34px}}
.nxm.paper .nxm-ic,.nxc.paper .nxm-ic{color:#1b2a4a}
/* ============ phones, simpler (owner, 10 Oct): one white card, four rows — a round icon, a bold title, one short line ============ */
@media(max-width:700px){
 .nx-cards{gap:0;padding:4px 18px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px #1019350f,0 18px 40px -30px #10193559}
 .nxc,.nxc.navy,.nxc.blue,.nxc.cream,.nxc.sky,.nxc.paper{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px;row-gap:3px;align-items:start;
   padding:16px 0;border-radius:0;background:none!important;box-shadow:none;color:var(--ink);text-align:left;overflow:visible}
 .nxc+.nxc{border-top:1px solid #1019350f}
 .nxc .nxm-ic{position:static;grid-row:1/span 2;width:42px;height:42px;padding:10px;border-radius:50%;stroke-width:1.6;opacity:1}
 .nxc.navy .nxm-ic{background:#fbf3e1;color:#b07a17}
 .nxc.cream .nxm-ic{background:#e8f0fb;color:#2364a8}
 .nxc.sky .nxm-ic{background:#fbf3e1;color:#b07a17}
 .nxc.blue .nxm-ic{background:#e6f5ec;color:#1e7a4f}
 .nxc b{max-width:none;font:700 17px/1.25 var(--font);letter-spacing:-.015em;color:var(--ink)}
 .nxc span,.nxc.navy span,.nxc.blue span,.nxc.cream span,.nxc.sky span{max-width:none;font-size:14px;line-height:1.45;color:#5a6378}
}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
 .nx .nxc{transform:translateY(8px)}
}
/* ============ our own icons (owner, 10 Oct): thick rounded navy strokes and one gold dot, as in the N mark ============ */
.nv-ic{display:block;width:44px;height:44px;overflow:visible}
.nv-ic-l{fill:none;stroke:#1b2a4a;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.nv-ic-d{fill:#d4a03c}
/* laptops: five icons over short labels under the points, hairlines between, no boxes */
.nx-feats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:clamp(26px,3vw,40px);padding-top:clamp(20px,2.2vw,28px);border-top:1px solid #10193514}
.nx-feat{display:grid;justify-items:start;align-content:start;gap:12px;padding:0 14px}
.nx-feat:first-child{padding-left:0}
.nx-feat+.nx-feat{border-left:1px solid #10193514}
.nx-feat b{font:650 14.5px/1.3 var(--font);letter-spacing:-.01em;color:var(--ink)}
@media(prefers-reduced-motion:no-preference){
 .nx .nx-feat{opacity:0;transform:translateY(8px)}
 .nx.seen .nx-feat{animation:nx-card .5s cubic-bezier(.2,.8,.2,1) calc(.3s + var(--i) * .1s) forwards}
 .nx.seen .nx-feat .nv-ic-l{stroke-dasharray:120;stroke-dashoffset:120;animation:nv-ic-draw .9s ease-out calc(.4s + var(--i) * .1s) forwards}
}
@keyframes nv-ic-draw{to{stroke-dashoffset:0}}
@media(max-width:700px){.nx-feats{display:none}}
/* phones: the same icons in the list, plain — no tinted circles */
@media(max-width:700px){
 .nxc .nxm-ic.nv-ic,.nxc.navy .nxm-ic,.nxc.cream .nxm-ic,.nxc.sky .nxm-ic,.nxc.blue .nxm-ic{width:40px;height:40px;padding:0;border-radius:0;background:none}
}
/* two-word labels, a touch bolder (owner, 10 Oct: punchy) */
.nx-feat b{font:700 15.5px/1.25 var(--font);letter-spacing:-.015em}
/* the three points get a tick instead of a dot (owner, 10 Oct): our green tick in a soft circle, as everywhere else on the site */
.nx-points li{padding-left:34px}
.nx-points li::before{left:0;top:.08em;width:22px;height:22px;border-radius:50%;background:#e6f5ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e7a4f' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 12.5 3.6 3.6 7.4-8.2'/%3E%3C/svg%3E") center/14px 14px no-repeat}
/* ============ the areas Navio OS runs (owner, 10 Oct): tabs under the Before ↔ After picture ============ */
.ba-wrap{display:grid;gap:16px;min-width:0}
.ba-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ba-tab{height:36px;padding:0 15px;border:0;border-radius:99px;background:#fff;box-shadow:0 0 0 1px #10193517;font:600 13.5px/1 var(--font);color:#4a5470;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.ba-tab:hover{box-shadow:0 0 0 1px #10193540;color:var(--ink)}
.ba-tab.on{background:var(--ink);color:#fff;box-shadow:0 0 0 2px #d4a03c66}
.ba-tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.nx-covers{display:none}
@media(max-width:700px){
 .nx .ba-wrap{display:none}
 .nx-covers{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:4px 0 0}
 .nx-covers b{margin-right:4px;font:700 11.5px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:#7a8399}
 .nx-covers span{padding:6px 11px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px #10193514;font:600 12.5px/1 var(--font);color:#4a5470}
}
/* ============ the area tabs on the right (owner's markup, 10 Oct): Matters · IP · Notices · Drafting · Compliance ============ */
.nx-area{position:relative;border:0;background:none;font:inherit;text-align:left;cursor:pointer;padding-bottom:14px}
.nx-area .nv-ic{opacity:.42;transition:opacity .25s}
.nx-area b{color:#8b93a7;transition:color .25s}
.nx-area:hover .nv-ic,.nx-area.on .nv-ic{opacity:1}
.nx-area:hover b,.nx-area.on b{color:var(--ink)}
.nx-area:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:6px}
.nx-area-bar{position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px;background:transparent;overflow:hidden}
.nx-area:first-child .nx-area-bar{left:0}
.nx-area.on .nx-area-bar{background:#10193512}
.nx-area-bar u{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#e2b552,#c99535);transform-origin:left;transform:scaleX(0)}
.nx-area.on .nx-area-bar u{transform:scaleX(1)}
@media(prefers-reduced-motion:no-preference){.nx-area.on .nx-area-bar u{animation:nx-area-fill var(--ms,6s) linear both}}
@keyframes nx-area-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* the heading and ticks change softly with the area */
@media(prefers-reduced-motion:no-preference){.nx-swap{animation:nx-swap .5s cubic-bezier(.2,.8,.2,1) both}}
@keyframes nx-swap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* ============ the area panel on the left (owner, 10 Oct): replaces the Today ↔ Navio OS slider; follows the tab ============ */
.ap{container-type:inline-size;display:flex;flex-direction:column;gap:3.2cqw;aspect-ratio:auto;padding:4.4cqw;border-radius:clamp(20px,2.2vw,28px);
  background:radial-gradient(#2364a810 1px,transparent 1.3px) 0 0/16px 16px,linear-gradient(160deg,#f6f9fd,#eaf1fa);box-shadow:0 30px 70px -50px #10193559,0 0 0 1px #1019350d}
.ap-head{display:flex;align-items:center;gap:2.2cqw}
.ap-ic{width:7.4cqw;height:7.4cqw}
.ap-head b{font:750 4.2cqw/1 var(--font);letter-spacing:-.03em;color:var(--ink)}
.ap-ok{margin-left:auto;padding:1.3cqw 2.4cqw;border-radius:99px;background:#e6f5ec;font:700 2.3cqw/1 var(--font);color:#1e7a4f}
.ap-stat{display:flex;align-items:center;justify-content:space-between;gap:3cqw;padding:3.6cqw 4cqw;border-radius:3cqw;background:#fff;box-shadow:0 0 0 1px #1019350d,0 1.4cqw 3.4cqw -2cqw #10193540}
.ap-stat b{display:block;font:750 7.4cqw/1 var(--font);letter-spacing:-.04em;color:var(--ink)}
.ap-stat small{display:block;margin-top:1.2cqw;font-size:2.6cqw;color:#5a6378}
.ap-stat svg{width:15cqw;height:15cqw;flex:none}
.ap-ring-t{font:750 24px/1 var(--font);fill:#1e7a4f}
.ap-list{display:grid;gap:2cqw}
.ap .ba-row{padding:2.6cqw 2.8cqw;gap:2.2cqw;flex-wrap:nowrap}
.ap .ba-row>i{width:6.4cqw;height:6.4cqw;font-size:2.2cqw}
.ap .ba-row>span{font-size:2.3cqw}.ap .ba-row b{font-size:2.9cqw}
.ap .ba-st{order:0;flex-basis:auto;margin:0 0 0 auto;padding:1cqw 1.8cqw;border-radius:99px;font-size:2.2cqw;white-space:nowrap}
.ap .ba-st.blue{background:#e8f1ff}.ap .ba-st.green{background:#e6f5ec}.ap .ba-st.violet{background:#efe9fb}
.ap .ba-ok{width:5cqw;height:5cqw;font-size:2.6cqw;flex:none}
@media(prefers-reduced-motion:no-preference){
 .nx .ap .ba-pop{animation:ba-pop .5s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
 .nx .ap .ap-ring{animation:ipx-draw 1.2s cubic-bezier(.4,.1,.2,1) .4s both}
}
/* the right column: tabs on top, then the heading, then five ticks */
.nx-copy>.nx-areas{margin:0 0 clamp(26px,3vw,38px);padding:0 0 0;border-top:0}
.nx-areas .nx-area{padding-bottom:16px}
.nx-copy>.nx-areas+h2{margin-top:0}
.nx-points{gap:13px}
/* phones: the same story — tabs as a scrolling row, heading, five ticks, then the panel; the old list card and covers row are off */
@media(max-width:700px){
 .nx .nx-cards,.nx .nx-covers{display:none}
 .nx .nx-points{display:grid;justify-items:start;text-align:left;width:max-content;max-width:100%;margin-inline:auto}
 .nx .nx-areas{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 22px;padding:2px 16px;border:0}
 .nx .nx-areas::-webkit-scrollbar{display:none}
 .nx .nx-area{flex:none;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border:0!important;border-radius:99px;background:#fff;box-shadow:0 0 0 1px #10193514}
 .nx .nx-area .nv-ic{width:22px;height:22px;opacity:.7}
 .nx .nx-area b{font-size:13.5px;color:#4a5470}
 .nx .nx-area.on{background:var(--ink)}
 .nx .nx-area.on b{color:#fff}
 .nx .nx-area.on .nv-ic-l{stroke:#fff}
 .nx .nx-area-bar{display:none}
 .nx .ap{padding:18px;gap:12px}
}

/* ============ six steps (owner, 10 Oct): smaller rows so all six fit beside the iPad ============ */
.nt-list{gap:2px}
.nt-row{padding:12px 18px 12px 30px;gap:2px}
.nt-who{font-size:clamp(17px,1.35vw,20px)}
.nt-what{font-size:clamp(13.5px,1vw,15px)}
.nt-bar-v{top:13px;bottom:13px}
@media(max-width:900px){.nt-row{padding:8px 13px}.nt-who{font-size:14.5px}}
/* Assign: a clause lights, its commitment lands on the right with an owner and a date */
.ipx-assign .ipx-side{width:44%}
.ipx-assign .ipx-pick::before{content:"";position:absolute;z-index:-1;left:-1cqw;right:-1cqw;top:-.4cqw;height:5.6cqw;border-radius:.8cqw;border-left:.35cqw solid}
.ipx-assign .ipx-flow{gap:.9cqw}
.ipx-as{display:flex;align-items:center;gap:1.1cqw;padding:1.2cqw;border-radius:1.1cqw;background:#f6f7fa}
.ipx-as>i{display:grid;place-items:center;flex:none;width:3.4cqw;height:3.4cqw;border-radius:50%;font:700 1.2cqw/1 var(--font);font-style:normal;color:#fff}
.ipx-as>span{flex:1;min-width:0;font-size:1.3cqw;color:#7a8399}.ipx-as b{display:block;font-size:1.5cqw;color:var(--ink)}
.ipx-as em{flex:none;padding:.5cqw 1cqw;border-radius:99px;background:#e8f1ff;font:700 1.15cqw/1 var(--font);font-style:normal;color:#1f5aa0}
.ipx-as em.done{background:#e6f5ec;color:#1e7a4f}
@media(prefers-reduced-motion:no-preference){.ipx-assign .ipx-pick::before{animation:ipx-fade .45s ease-out var(--d,0s) both}}
.ipx-assign .ipx-pick{--d:0s}
/* Deliver: the follow-up timeline */
.ipx-deliver .ipx-side{width:36%}
.ipx-tl{position:relative;display:grid;gap:.9cqw;padding-left:1.4cqw}
.ipx-tl::before{content:"";position:absolute;left:3.15cqw;top:1.6cqw;bottom:1.6cqw;width:.2cqw;background:#1019351a}
.ipx-ev{position:relative;display:flex;align-items:center;gap:1.4cqw;font-size:1.3cqw;line-height:1.3;color:#5a6378}
.ipx-ev-i{position:relative;display:grid;place-items:center;flex:none;width:3.6cqw;height:3.6cqw;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #10193514;color:#2364a8}
.ipx-ev-i .ico{width:1.8cqw;height:1.8cqw}
.ipx-ev.gold .ipx-ev-i{background:#fbf3e1;color:#b07a17;box-shadow:none}
.ipx-ev.violet .ipx-ev-i{background:#efe9fb;color:#5a3d9e;box-shadow:none}
.ipx-ev.green .ipx-ev-i{background:#e6f5ec;color:#1e7a4f;box-shadow:none}
.ipx-ev b{display:flex;align-items:baseline;gap:1cqw;font-size:1.5cqw;color:var(--ink)}
.ipx-ev b small{font-size:1.1cqw;font-weight:600;color:#8b93a7}
.ipx-count{display:flex;align-items:baseline;gap:1cqw;padding:1.4cqw 1.6cqw;border-radius:1.2cqw;background:#fbf3e1}
.ipx-count b{font:750 4.4cqw/1 var(--font);letter-spacing:-.04em;color:#8a5d10}
.ipx-count span{font-size:1.3cqw;color:#6b4a0c}
.ipx-deliver .ipx-sum{margin-top:auto}
@media(prefers-reduced-motion:no-preference){.ipx-deliver .ipx-ev.ipx-in .ipx-ev-i{animation:ipx-ping .9s ease-out var(--d,0s) both}}
@keyframes ipx-ping{0%{box-shadow:0 0 0 0 #d4a03c66}100%{box-shadow:0 0 0 1.4cqw #d4a03c00}}
/* ============ Track and Sign, fixed (owner, 10 Oct): clauses boxed whole; distinct signatures, a seal, a signature trail ============ */
.ipx-clause{position:relative;display:grid;gap:.4cqw;margin-top:.4cqw;padding:1.1cqw 1.4cqw;border-radius:.9cqw;border-left:.35cqw solid;font-size:1.65cqw;line-height:1.4;color:#4a5470}
.ipx-clause b{font-size:1.85cqw;color:var(--ink)}
.ipx-clause.c-pay{background:#fbefd2;border-color:#d4a03c}.ipx-clause.c-sla{background:#efe9fb;border-color:#7a62c6}.ipx-clause.c-ren{background:#e3f4ea;border-color:#3f9b6e}
.ipx-tag{position:absolute;right:1cqw;top:1cqw;padding:.45cqw 1cqw;border-radius:99px;background:#fff;font:700 1.15cqw/1 var(--font);font-style:normal;color:var(--ink);box-shadow:0 .3cqw .8cqw -.4cqw #10193540}
.ipx-dim{opacity:.45}
.ipx-trk{display:grid;gap:.6cqw;padding:1.1cqw;border-radius:1.1cqw;background:#f6f7fa}
.ipx-trk .ipx-as{padding:0;background:none}
.ipx-trk small{display:flex;align-items:center;gap:.6cqw;margin-left:4.5cqw;font-size:1.15cqw;color:#8a5d10}
.ipx-trk small .ico{width:1.4cqw;height:1.4cqw}
@media(prefers-reduced-motion:no-preference){.ipx-clause{animation:ipx-in .45s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}}
/* Sign */
.ipx-bar-l{display:block;height:1cqw;margin:.35cqw 0;border-radius:99px;background:#e9ecf1}
.ipx-sign .ipx-sigs{margin-top:1.8cqw}
.ipx-sigbox{gap:.3cqw}
.ipx-sigbox b{font-size:1.45cqw;color:var(--ink)}
.ipx-seal{position:absolute;right:3cqw;bottom:3cqw;display:grid;place-items:center;width:10cqw;height:10cqw;border-radius:50%;border:.35cqw solid #1e7a4f;rotate:-12deg;
  font:800 1.6cqw/1 var(--font);letter-spacing:.12em;color:#1e7a4f;background:#e6f5ecd9;box-shadow:inset 0 0 0 .5cqw #e6f5ec,inset 0 0 0 .7cqw #1e7a4f55}
.ipx-trail{display:flex;gap:1cqw;align-items:flex-start;font-size:1.2cqw;color:#8b93a7}
.ipx-trail i{flex:none;width:1.4cqw;height:1.4cqw;margin-top:.3cqw;border-radius:50%;background:#d5dae3}
.ipx-trail i.ok{background:#3f9b6e}
.ipx-trail b{display:block;font-size:1.4cqw;color:var(--ink)}
@media(prefers-reduced-motion:no-preference){.ipx-sign .ipx-sig{animation-duration:var(--t,1.1s)}}
/* "Capabilities" above "Built to Get Work Done." (owner's markup, 10 Oct): small caps in gold, like the label under Meet Navio OS */
.du-kicker{position:relative;top:-5mm;margin:0 0 10px;font:700 13px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:#e2b552}
@media(max-width:760px){.du-kicker{top:0;text-align:center;font-size:12px;margin-bottom:8px}}

/* ============ iPad scenes, round 3 (owner, 10 Oct) ============ */
/* the MSA by sections; scan highlights wrap a whole section */
.ipx-sec{position:relative;display:grid;gap:.5cqw;margin-top:.4cqw;padding:.6cqw 1cqw;border-radius:.8cqw;border-left:.35cqw solid transparent}
.ipx-sec .ipx-h{margin-top:0}
.ipx-hit.c-sow{background:#e2edfb;border-color:#2364a8}.ipx-hit.c-pay{background:#fbefd2;border-color:#d4a03c}
.ipx-hit.c-sla{background:#efe9fb;border-color:#7a62c6}.ipx-hit.c-ren{background:#e3f4ea;border-color:#3f9b6e}
.ipx-scan .ipx-l[class*="ipx-sec-"]::before{display:none}
@media(prefers-reduced-motion:no-preference){
 .ipx-hit{animation:ipx-hit .5s ease-out both}
 .ipx-hit.c-sow{animation-delay:1s}.ipx-hit.c-pay{animation-delay:1.5s}.ipx-hit.c-sla{animation-delay:2s}.ipx-hit.c-ren{animation-delay:2.5s}
}
@keyframes ipx-hit{from{background-color:transparent;border-left-color:transparent}}
.ipx-scan .ipx-gap span{display:inline}
/* Negotiate: clauses joined to their threads by drawn lines */
.ipx-neg{position:relative}
.ipx-clz{position:relative;padding:.7cqw 1cqw;margin:.2cqw -1cqw;border-radius:.7cqw;font-size:1.75cqw;line-height:1.45;color:#4a5470;white-space:normal}
.ipx-clz.gold{background:#fdf3d8}.ipx-clz.green{background:#e8f6ee}.ipx-clz.blue{background:#e6effb}
.ipx-ins-now{color:#1e7a4f}
.ipx-thr{display:grid;gap:.6cqw;padding-left:1cqw;border-left:.3cqw solid}
.ipx-thr.gold{border-color:#d4a03c}.ipx-thr.green{border-color:#3f9b6e}.ipx-thr.blue{border-color:#2364a8}
.ipx-thr>small{justify-self:start;padding:.3cqw .9cqw;border-radius:99px;font:700 1.1cqw/1 var(--font);letter-spacing:.06em;color:#fff}
.ipx-thr.gold>small{background:#c99535}.ipx-thr.green>small{background:#3f9b6e}.ipx-thr.blue>small{background:#2364a8}
.ipx-thread .ipx-cm{padding:.7cqw .9cqw;font-size:1.3cqw}
.ipx-thread{gap:1.2cqw}
.ipx-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.ipx-lk{fill:none;stroke-width:1.6;stroke-dasharray:1 1;stroke-dashoffset:0}
.ipx-lk.gold{stroke:#c99535}.ipx-lk.green{stroke:#3f9b6e}.ipx-lk.blue{stroke:#2364a8}
@media(prefers-reduced-motion:no-preference){
 .ipx-clz{animation:ipx-fade .45s ease-out var(--d,0s) both}
 .ipx-lk{stroke-dashoffset:1;animation:ipx-draw .6s ease-out var(--d,0s) forwards}
 .ipx-ins-now{animation:ipx-fade .45s ease-out var(--d,0s) both}
}
.ipx-neg .ipx-link{display:none}
/* Sign: an execution page like a certificate */
.ipx-cert{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.9cqw;padding:2.4cqw 3cqw;box-shadow:0 .6cqw 1.8cqw -.8cqw #10193526,0 0 0 1px #1019350d,inset 0 0 0 .5cqw #fff,inset 0 0 0 .65cqw #d4a03c66}
.ipx-cert-top{display:flex;justify-content:space-between;width:100%;font-size:1.25cqw;color:#7a8399}
.ipx-cert-t{margin-top:1cqw;font:800 2.6cqw/1.1 var(--font);letter-spacing:.14em;color:var(--ink)}
.ipx-cert-s{font-size:1.5cqw;color:#5a6378}
.ipx-cert-rule{display:block;width:30%;height:.2cqw;margin:.6cqw 0;background:#d4a03c}
.ipx-cert-p{margin:0;max-width:86%;font-size:1.55cqw;line-height:1.5;color:#4a5470}
.ipx-cert .ipx-sigs{width:100%;margin-top:1.2cqw;text-align:left}
.ipx-cert .ipx-seal{right:2.4cqw;bottom:2.4cqw}
/* Deliver: the timeline runs down the whole page */
.ipx-deliver .ipx-commit{display:flex;flex-direction:column}
.ipx-deliver .ipx-tl{flex:1;align-content:space-between;padding-top:1.4cqw;padding-bottom:.6cqw}
.ipx-deliver .ipx-ev{font-size:1.45cqw}.ipx-deliver .ipx-ev b{font-size:1.65cqw}
.ipx-deliver .ipx-ev-i{width:4.2cqw;height:4.2cqw}.ipx-deliver .ipx-tl::before{left:3.45cqw}
/* steps line up with the iPad: 01 level with its top, 06 level with its bottom */
.nt{align-items:stretch}
.nt-list{display:flex;flex-direction:column;justify-content:space-between}
@media(max-width:900px){.nt-list{flex-direction:row;justify-content:flex-start}}
.ipx-clause.c-sow{background:#e2edfb;border-color:#2364a8}
.ipx-ev.violet,.ipx-ev.gold,.ipx-ev.green{background:none}
/* (the one-screen squeeze of Meet Navio OS + logos was undone on the owner's word, 10 Oct; the softer iPad shadow stays) */
.nt-body{box-shadow:0 22px 34px -26px #10193552,0 4px 10px -8px #10193526}

/* ============ the Execution OS scenes (owner, 10 Oct): Capture · Assign · Follow-up · Escalate · Prove · Report ============ */
.ipx-capture .ipx-side,.ipx-assign2 .ipx-side,.ipx-prove .ipx-side,.ipx-report .ipx-side{width:38%}
.ipx-esc .ipx-side,.ipx-follow .ipx-side{width:36%}
.ipx-srcs{display:flex;flex-direction:column;gap:1.3cqw}
.ipx-src{display:flex;align-items:center;gap:1.4cqw;padding:1.4cqw 1.6cqw;border-radius:1.3cqw;background:#fff;box-shadow:0 0 0 1px #1019350d,0 .6cqw 1.6cqw -1.2cqw #10193540;font-size:1.55cqw;line-height:1.4;color:#4a5470}
.ipx-src>span:nth-child(2){flex:1;min-width:0}
.ipx-src small{display:block;margin-bottom:.3cqw;font:700 1.1cqw/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:#8b93a7}
.ipx-src mark{padding:.1cqw .4cqw;border-radius:.4cqw;background:#fbefd2;color:var(--ink);font-weight:600}
.ipx-src-i{display:grid;place-items:center;flex:none;width:4cqw;height:4cqw;border-radius:1cqw;background:#eef2f8;color:#1b2a4a}
.ipx-src-i .ico{width:2.2cqw;height:2.2cqw}
.ipx-src-i.sm{width:3.4cqw;height:3.4cqw}.ipx-src-i.sm .ico{width:1.8cqw;height:1.8cqw}
.ipx-ai{display:grid;place-items:center;flex:none;width:3cqw;height:3cqw;border-radius:50%;background:linear-gradient(135deg,#7a62c6,#2364a8);color:#fff;font-style:normal;font-size:1.4cqw}
.ipx-cap{display:grid;gap:.4cqw;padding:1.1cqw 1.2cqw;border-radius:1.1cqw;background:#f6f7fa}
.ipx-cap b{font-size:1.45cqw;color:var(--ink)}
.ipx-cap small{display:flex;align-items:center;gap:.6cqw;font-size:1.15cqw;color:#7a8399}
.ipx-cap small .ico{width:1.4cqw;height:1.4cqw}
@media(prefers-reduced-motion:no-preference){.ipx-src mark{animation:ipx-mark .5s ease-out var(--d,0s) both}}
@keyframes ipx-mark{from{background:transparent}}
/* Assign */
.ipx-assign2 .ipx-row{gap:1.4cqw}
.ipx-own{display:inline-flex;align-items:center;gap:.7cqw;padding:.4cqw 1cqw .4cqw .4cqw;border-radius:99px;background:#eef2f8;font:700 1.25cqw/1 var(--font);color:var(--ink);white-space:nowrap}
.ipx-own i{display:grid;place-items:center;width:2.6cqw;height:2.6cqw;border-radius:50%;font:700 1cqw/1 var(--font);font-style:normal;color:#fff}
.ipx-due{padding:.5cqw 1cqw;border-radius:99px;background:#fbf3e1;font:700 1.15cqw/1 var(--font);font-style:normal;color:#8a5d10;white-space:nowrap}
.ipx-note2{font-size:1.2cqw;line-height:1.4;color:#5a3d9e}
/* Follow-up / Escalate */
.ipx-count.zero{background:#e6f5ec}.ipx-count.zero b{color:#1e7a4f}.ipx-count.zero span{color:#1e5a3a}
.ipx-st-a.late{background:#fde3e1;color:#b3261e}
.ipx-ev.rose{background:none}.ipx-ev.rose .ipx-ev-i{background:#fde3e1;color:#b3261e;box-shadow:none}
.ipx-ladder{position:relative}
.ipx-ladder.on{background:#fbf3e1;box-shadow:inset 0 0 0 .2cqw #d4a03c}
.ipx-ladder+.ipx-ladder::before{content:"";position:absolute;left:2.8cqw;top:-1.1cqw;height:1cqw;border-left:.2cqw dashed #10193530}
/* Prove */
.ipx-drop{display:flex;align-items:center;gap:1.4cqw;margin-top:1.4cqw;padding:1.6cqw;border-radius:1.2cqw;border:.2cqw dashed #2364a866;background:#f2f7fd;font-size:1.3cqw;color:#5a6378}
.ipx-drop .ico{width:3cqw;height:3cqw;color:#2364a8}
.ipx-drop b{display:block;font-size:1.55cqw;color:var(--ink)}
.ipx-check{display:flex;align-items:center;gap:1.2cqw;padding:1.1cqw 1.3cqw;border-radius:1.1cqw;background:#fff;box-shadow:0 0 0 1px #1019350d;font-size:1.25cqw;color:#7a8399}
.ipx-check strong{display:grid;place-items:center;flex:none;width:2.8cqw;height:2.8cqw;border-radius:50%;background:#e6f5ec;color:#1e7a4f;font-size:1.4cqw}
.ipx-check b{display:block;font-size:1.5cqw;color:var(--ink)}
.ipx-prove .ipx-commit{position:relative}
.ipx-prove .ipx-seal{right:2cqw;bottom:2cqw}
/* Report */
.ipx-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2cqw}
.ipx-tile{display:grid;gap:.4cqw;padding:1.6cqw;border-radius:1.2cqw;background:#fff;box-shadow:0 0 0 1px #1019350d}
.ipx-tile b{font:750 3.8cqw/1 var(--font);letter-spacing:-.04em}
.ipx-tile span{font-size:1.25cqw;color:#5a6378}
.ipx-tile.green b{color:#1e7a4f}.ipx-tile.gold b{color:#b07a17}.ipx-tile.blue b{color:#1f5aa0}
.ipx-tile.green,.ipx-tile.gold,.ipx-tile.blue{background:#fff}
.ipx-report .ipx-side-h{margin-top:.8cqw}
.ipx-bar2{display:grid;grid-template-columns:13cqw 1fr 5cqw;align-items:center;gap:1.2cqw;font-size:1.35cqw;color:#4a5470}
.ipx-bar2 i{height:1.2cqw;border-radius:99px;background:#1019350f;overflow:hidden}
.ipx-bar2 u{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2364a8,#3f9b6e)}
.ipx-bar2 b{font-size:1.35cqw;color:var(--ink);text-align:right}
@media(prefers-reduced-motion:no-preference){.ipx-bar2 u{animation:ipx-barw 1s cubic-bezier(.3,.7,.2,1) var(--d,0s) both}}
@keyframes ipx-barw{from{width:0}}
.ipx-commit{gap:1.2cqw}
.ipx-row>.ipx-src-i{flex:none}
.ipx-capture .ipx-srcs,.ipx-assign2 .ipx-commit{justify-content:space-evenly}
.ipx-capture .ipx-src{padding:1.8cqw 1.8cqw}
.ipx-assign2 .ipx-row{padding:1.6cqw 1.6cqw}
.ipx-own{flex:none;width:auto}
.ipx-assign2 .ipx-row>span:nth-child(2){flex:1;min-width:0}

/* ============ execution scenes with real volume (owner, 10 Oct): self-scrolling lists, channels, a phone, the proof pop-up, benefits ============ */
.ipx-follow2 .ipx-side,.ipx-esc2 .ipx-side{width:34%}
.ipx-col{display:flex;flex-direction:column;gap:1.2cqw}
.ipx-auto{position:relative;flex:1;min-height:0;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 3%,#000 86%,transparent);mask:linear-gradient(transparent,#000 3%,#000 86%,transparent)}
.ipx-auto-in{display:grid;gap:1cqw;padding:.4cqw .2cqw 3cqw}
@media(prefers-reduced-motion:no-preference){.ipx-auto-in{animation:ipx-autoscroll var(--dur,7s) cubic-bezier(.45,.05,.4,1) var(--d,2s) both}}
@keyframes ipx-autoscroll{from{transform:translateY(0)}to{transform:translateY(var(--dist,0px))}}
.ipx-av{display:grid;place-items:center;flex:none;width:2.9cqw;height:2.9cqw;border-radius:50%;font:700 1.05cqw/1 var(--font);font-style:normal;color:#fff}
.ipx-li{display:flex;align-items:center;gap:1.2cqw;padding:1cqw 1.2cqw;border-radius:1.1cqw;background:#fff;box-shadow:0 0 0 1px #1019350d,0 .4cqw 1cqw -.8cqw #10193540;font-size:1.2cqw;color:#7a8399}
.ipx-li>span:nth-child(2){flex:1;min-width:0}
.ipx-li b{display:block;font-size:1.45cqw;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ipx-srcrow{display:flex;gap:.8cqw;flex-wrap:wrap}
.ipx-srcchip{display:inline-flex;align-items:center;gap:.6cqw;padding:.6cqw 1cqw;border-radius:99px;background:#fff;box-shadow:0 0 0 1px #10193514;font:600 1.2cqw/1 var(--font);color:#4a5470}
.ipx-srcchip .ico{width:1.5cqw;height:1.5cqw}
.ipx-srcchip b{padding:.25cqw .6cqw;border-radius:99px;background:#eef2f8;color:var(--ink)}
.ipx-own span{display:grid;gap:.2cqw;line-height:1.1}
.ipx-own small{font:600 .95cqw/1 var(--font);color:#8b93a7}
.ipx-own .ipx-av{width:2.6cqw;height:2.6cqw}
/* follow-ups: email, push to the app, WhatsApp last */
.ipx-fu{display:grid;grid-template-columns:7cqw auto minmax(0,1fr) auto;align-items:center;gap:1cqw;padding:1cqw 1.2cqw;border-radius:1.1cqw;background:#fff;box-shadow:0 0 0 1px #1019350d;font-size:1.15cqw;color:#7a8399}
.ipx-fu>small{font:600 1.05cqw/1.2 var(--font);color:#8b93a7}
.ipx-fu b{display:block;font-size:1.4cqw;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ipx-fu.reply{background:#f6f3fd}.ipx-fu.done{background:#f2fbf6}.ipx-fu.done b{color:#1e7a4f}
.ipx-ch{display:flex;gap:.4cqw}
.ipx-ch span{padding:.4cqw .7cqw;border-radius:99px;font:700 .95cqw/1 var(--font);white-space:nowrap}
.ipx-ch .mail{background:#e8f1ff;color:#1f5aa0}.ipx-ch .push{background:#efe9fb;color:#5a3d9e}.ipx-ch .wa{background:#e6f5ec;color:#1e7a4f}
.ipx-bar2 u.mail{background:#2364a8}.ipx-bar2 u.push{background:#7a62c6}.ipx-bar2 u.wa{background:#3f9b6e}
.ipx-phone{position:relative;align-self:center;display:flex;flex-direction:column;gap:.8cqw;width:17cqw;height:21cqw;padding:3cqw 1cqw 1cqw;border-radius:2.6cqw;
  background:linear-gradient(160deg,#2c3f72,#151c36);box-shadow:0 0 0 .45cqw #0d111d,0 1.6cqw 3cqw -1.6cqw #10193580}
.ipx-ph-notch{position:absolute;top:.8cqw;left:50%;width:5cqw;height:1.2cqw;margin-left:-2.5cqw;border-radius:99px;background:#0d111d}
.ipx-ph-time{position:absolute;top:.85cqw;left:1.6cqw;font:600 .95cqw/1 var(--font);color:#fff}
.ipx-push{display:grid;gap:.3cqw;padding:.9cqw 1cqw;border-radius:1.2cqw;background:#ffffffe8;font-size:1.05cqw;line-height:1.3;color:#3d4660}
.ipx-push b{font-size:.95cqw;color:#7a8399}
/* escalations */
.ipx-esc-li{display:flex;align-items:center;gap:1.1cqw;padding:1cqw 1.2cqw;border-radius:1.1cqw;background:#fff;box-shadow:0 0 0 1px #1019350d;font-size:1.15cqw}
.ipx-esc-li>span:nth-child(2){flex:1;min-width:0}
.ipx-esc-li b{display:block;font-size:1.4cqw;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ipx-why{display:block;color:#5a6378;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ipx-why em{font-style:normal;font-weight:700;color:#b3261e}
.ipx-up{flex:none;padding:.5cqw 1cqw;border-radius:99px;background:#fbf3e1;font:700 1.05cqw/1 var(--font);color:#8a5d10;white-space:nowrap}
.ipx-tiles2{display:grid;grid-template-columns:1fr 1fr;gap:1cqw}
.ipx-tiles2>div{display:grid;gap:.3cqw;padding:1.2cqw;border-radius:1.1cqw;background:#fbf3e1}
.ipx-tiles2>div.ok{background:#e6f5ec}
.ipx-tiles2 b{font:750 3.2cqw/1 var(--font);letter-spacing:-.04em;color:#8a5d10}.ipx-tiles2 .ok b{color:#1e7a4f}
.ipx-tiles2 span{font-size:1.1cqw;color:#5a6378}
/* proof: the client's review pop-up */
.ipx-pop{position:absolute;left:7%;right:7%;top:20%;z-index:5;display:grid;gap:.9cqw;padding:2.2cqw;border-radius:1.6cqw;background:#fff;box-shadow:0 2.4cqw 5cqw -1.6cqw #10193570,0 0 0 1px #10193514;opacity:0;visibility:hidden}
.ipx-pop>small{font:700 1.05cqw/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:#8b93a7}
.ipx-pop>b{font:750 2cqw/1.1 var(--font);letter-spacing:-.02em;color:var(--ink)}
.ipx-pop-file{display:flex;align-items:center;gap:.8cqw;padding:1cqw;border-radius:1cqw;background:#f2f7fd;font:600 1.3cqw/1 var(--font);color:var(--ink)}
.ipx-pop-file .ico{width:2cqw;height:2cqw;color:#2364a8}
.ipx-pop-file em{margin-left:auto;padding:.4cqw .8cqw;border-radius:99px;background:#e8f1ff;font:700 1cqw/1 var(--font);font-style:normal;color:#1f5aa0}
.ipx-pop-btns{position:relative;display:flex;justify-content:flex-end;gap:1cqw;margin-top:.6cqw}
.ipx-pop-btns>span{display:grid;place-items:center;height:3.6cqw;padding:0 1.8cqw;border-radius:99px;font:700 1.3cqw/1 var(--font)}
.ipx-pop-btns .rej{box-shadow:inset 0 0 0 1px #10193526;color:#5a6378}
.ipx-pop-btns .acc{background:#1e7a4f;color:#fff}
.ipx-pop-btns .acc>span{grid-area:1/1}
.ipx-pop-btns .acc .b{opacity:0}
.ipx-tap{position:absolute;right:4cqw;top:50%;width:4cqw;height:4cqw;margin-top:-2cqw;border-radius:50%;background:#2364a855;opacity:0}
@media(prefers-reduced-motion:no-preference){
 .ipx-pop{animation:ipx-popin .4s cubic-bezier(.2,.8,.2,1) 1.6s forwards,ipx-popout .35s ease 4.8s forwards}
 .ipx-pop-btns .acc .a{animation:ipx-gone .2s ease 3.8s forwards}
 .ipx-pop-btns .acc .b{animation:ipx-fade .25s ease 3.8s forwards}
 .ipx-pop-btns .acc{animation:ipx-press .3s ease 3.6s both}
 .ipx-tap{animation:ipx-tapk .7s ease-out 3.4s both}
}
@keyframes ipx-popin{from{opacity:0;visibility:visible;transform:translateY(1.2cqw) scale(.97)}to{opacity:1;visibility:visible;transform:none}}
@keyframes ipx-popout{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}
@keyframes ipx-tapk{0%{opacity:0;transform:scale(1.6)}40%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1.4)}}
/* report: totals, delivered vs open, benefits */
.ipx-dline{display:grid;gap:.7cqw;font-size:1.3cqw;color:#4a5470}
.ipx-dline b{font:750 2.2cqw/1 var(--font);color:#1e7a4f}
.ipx-dbar{display:flex;height:1.4cqw;border-radius:99px;overflow:hidden;background:#1019350f}
.ipx-dbar u{display:block;height:100%}.ipx-dbar .g{background:linear-gradient(90deg,#2364a8,#3f9b6e)}.ipx-dbar .o{background:#e2b552}
.ipx-ben-h{color:#8a5d10}
.ipx-ben{display:grid;grid-template-columns:repeat(4,1fr);gap:1cqw}
.ipx-ben>div{display:grid;gap:.5cqw;padding:1.3cqw;border-radius:1.2cqw;background:#e6f5ec}
.ipx-ben b{font:750 2.5cqw/1 var(--font);letter-spacing:-.03em;color:#1e7a4f}
.ipx-ben span{font-size:1.1cqw;line-height:1.3;color:#1e5a3a}
.ipx-report .ipx-tile b{font-size:3.4cqw}
.ipx-report .ipx-bar2{font-size:1.25cqw}
.ipx-report .ipx-col{justify-content:space-between}
.ipx-report .ipx-ben>div{padding:1.8cqw 1.5cqw;gap:.7cqw}
.ipx-report .ipx-ben b{font-size:3cqw}
.ipx-report .ipx-ben span{font-size:1.25cqw}
.ipx-report .ipx-ben-h{font-size:1.45cqw}
/* ============ a proper iPhone on the Follow-up scene (owner, 10 Oct): titanium edge, Dynamic Island, lock screen, three notifications ============ */
.ipx-follow2 .ipx-side{gap:.9cqw}
.ipx-iph{position:relative;align-self:center;width:19cqw;aspect-ratio:9/19.3;padding:.45cqw;border-radius:3.6cqw;
  background:linear-gradient(150deg,#e9ebef 0%,#b7bcc6 22%,#8e939d 45%,#d4d7dc 62%,#8a8f99 82%,#dfe1e6 100%);box-shadow:0 1.8cqw 3.4cqw -1.6cqw #10193570}
.ipx-iph-btn{position:absolute;width:.32cqw;border-radius:.3cqw;background:linear-gradient(90deg,#9ca1ab,#d6d9de)}
.ipx-iph-btn.a{left:-.28cqw;top:18%;height:2.6cqw}.ipx-iph-btn.b{left:-.28cqw;top:27%;height:4.4cqw}.ipx-iph-btn.c{right:-.28cqw;top:24%;height:6cqw}
.ipx-iph-scr{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:.6cqw;height:100%;padding:3.6cqw 1cqw 1.4cqw;border-radius:3.2cqw;overflow:hidden;
  background:radial-gradient(120% 60% at 30% 10%,#5f7cc4 0%,#2b3f7c 45%,#121a38 100%);box-shadow:inset 0 0 0 .35cqw #05070c}
.ipx-iph-island{position:absolute;top:1cqw;left:50%;width:5.6cqw;height:1.6cqw;margin-left:-2.8cqw;border-radius:99px;background:#05070c}
.ipx-iph-bar{position:absolute;top:1.15cqw;left:1.8cqw;right:1.6cqw;display:flex;justify-content:space-between;align-items:center;font:600 .95cqw/1 var(--font);color:#fff}
.ipx-iph-bat{display:inline-block;width:2cqw;height:.95cqw;padding:.12cqw;border:.12cqw solid #ffffffcc;border-radius:.3cqw}
.ipx-iph-bat i{display:block;width:80%;height:100%;border-radius:.15cqw;background:#fff}
.ipx-iph-date{margin-top:.6cqw;text-align:center;font:600 1.1cqw/1 var(--font);color:#dfe7ff}
.ipx-iph-clock{text-align:center;font:600 5.2cqw/1 var(--font);letter-spacing:-.04em;color:#fff;margin-bottom:.8cqw}
.ipx-iph-n{display:flex;gap:.7cqw;align-items:flex-start;padding:.8cqw .8cqw;border-radius:1.3cqw;background:#ffffffd9;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:.95cqw;line-height:1.3;color:#2b3350}
.ipx-iph-n b{display:flex;justify-content:space-between;gap:.4cqw;font-size:.95cqw;color:#101935}
.ipx-iph-n small{font-weight:500;color:#7a8399}
.ipx-iph-n>span{flex:1;min-width:0}
.ipx-iph-ic{flex:none;width:2.2cqw;height:2.2cqw;border-radius:.6cqw}
.ipx-iph-ic.app{background:#101935 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M118 440V95L395 440V95' fill='none' stroke='white' stroke-width='68' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='458' cy='50' r='34' fill='%23d4a03c'/%3E%3C/svg%3E") center/62% no-repeat}
.ipx-iph-ic.mail{background:linear-gradient(#5aa9ff,#2364a8) }
.ipx-iph-ic.wa{background:#3f9b6e}
.ipx-iph-home{position:absolute;bottom:.7cqw;left:50%;width:6cqw;height:.32cqw;margin-left:-3cqw;border-radius:99px;background:#ffffffcc}
/* the report: the whole OS in one line, and delivery by week */
.ipx-flowline{display:flex;align-items:stretch;gap:.4cqw}
.ipx-flowline span{position:relative;flex:1;display:grid;gap:.2cqw;padding:.9cqw .8cqw;border-radius:1cqw;background:#eef2f8;font-size:1.05cqw;color:#5a6378;text-align:center}
.ipx-flowline span b{font:750 1.9cqw/1 var(--font);color:var(--ink)}
.ipx-flowline span.last{background:#e6f5ec}.ipx-flowline span.last b{color:#1e7a4f}
.ipx-weeks{display:flex;align-items:flex-end;gap:.7cqw;height:9cqw;padding:.8cqw;border-radius:1.1cqw;background:#f6f7fa}
.ipx-weeks i{flex:1;border-radius:.4cqw .4cqw .15cqw .15cqw;background:linear-gradient(#3f9b6e,#2364a8)}
@media(prefers-reduced-motion:no-preference){.ipx-weeks i{transform-origin:bottom;animation:ipx-grow-y .6s cubic-bezier(.3,.7,.2,1) var(--d,0s) both}}
@keyframes ipx-grow-y{from{transform:scaleY(0)}}
/* customer logos in their own colours (owner, 10 Oct: "colourful kar, black-white kyun") */
.hero-trust-track img,.cust-track img,.proof-logo-grid img{filter:none;opacity:1}
/* the products panel picture: sources in, not a contract signed (owner, 10 Oct) */
.pf-src{fill:none;stroke:#1b2a4a;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pf-src-t{font:600 10.5px/1 var(--font);fill:#7a8399}
@media(prefers-reduced-motion:no-preference){.pm.open .pf-glow{animation:pf-glow 1.3s ease-out 1.3s 2}}

/* ============ NAVIO OS PAGE AS ONE MOVIE (owner, 10 Oct): a pinned stage, one scene per scroll ============ */
.nm{position:relative;height:calc(var(--n) * 82svh)}
.nm-stick{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2.2vh,26px);padding:clamp(86px,12vh,116px) var(--gutter,24px) clamp(14px,2.6vh,30px);overflow:hidden}
.nm-copy{text-align:center;min-height:clamp(96px,14vh,140px)}
.nm-act{display:block;margin-bottom:10px;font:700 12px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:#c99535}
.nm-h{margin:0;font:750 clamp(34px,4.4vw,66px)/1.04 var(--font);letter-spacing:-.045em;color:var(--ink)}
.nm-l{margin:12px 0 0;font-size:clamp(16px,1.3vw,20px);color:#5a6378}
.nm-l.pivot{font:750 clamp(26px,3vw,44px)/1.1 var(--font);font-style:italic;letter-spacing:-.035em;color:var(--blue)}
.nm-h.pivot{color:#8b93a7}
.nm-cta{display:inline-flex;align-items:center;gap:12px;height:52px;margin-top:20px;padding:0 28px;border:2px solid #d4a03c;border-radius:99px;background:var(--ink);color:#fff;font:600 16px var(--font);cursor:pointer}
.nm-cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:no-preference){.nm-copy{animation:nm-copy .5s cubic-bezier(.2,.8,.2,1) both}}
@keyframes nm-copy{from{opacity:0;transform:translateY(12px)}}
.nm-stage{position:relative;flex:none;container-type:inline-size;width:min(1100px,100%,calc((100svh - 300px) * 1.9));aspect-ratio:1.9}
.nm-dots{position:absolute;right:clamp(10px,2vw,28px);top:50%;display:grid;gap:9px;transform:translateY(-50%)}
.nm-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#10193524;cursor:pointer;transition:background-color .3s,transform .3s}
.nm-dots button.past{background:#10193555}.nm-dots button.on{background:#c99535;transform:scale(1.35)}
/* the paper */
.nm-paper{position:absolute;top:1.6cqw;left:50%;width:32cqw;height:49cqw;display:flex;flex-direction:column;gap:1.1cqw;padding:3cqw;border-radius:1.6cqw;background:#fff;
  box-shadow:0 2cqw 4cqw -2.4cqw #10193566,0 0 0 1px #1019350f;transform:translateX(-50%);transition:left .8s cubic-bezier(.6,0,.2,1),transform .8s cubic-bezier(.6,0,.2,1),opacity .6s}
.nm-cursor{position:absolute;top:3.2cqw;left:3cqw;width:.25cqw;height:2.2cqw;background:var(--ink);animation:nm-blink 1s steps(1) infinite}
.h-draft .nm-cursor{display:none}
@keyframes nm-blink{50%{opacity:0}}
.nm-p-t{font:800 1.6cqw/1.2 var(--font);letter-spacing:.1em;color:var(--ink);opacity:0;transition:opacity .4s}
.nm-p-m{font-size:1.05cqw;color:#8b93a7;opacity:0;transition:opacity .4s .15s;margin-bottom:.6cqw}
.h-draft .nm-p-t,.h-draft .nm-p-m{opacity:1}
.nm-ln{display:block;height:.9cqw;border-radius:99px;background:#e4e8ef;transform:scaleX(0);transform-origin:left;transition:transform .35s ease calc(.2s + var(--i) * .09s)}
.h-draft .nm-ln{transform:none}
.nm-clz{display:grid;gap:.4cqw;margin:.2cqw -1cqw;padding:.7cqw 1cqw;border-radius:.8cqw;font-size:1.25cqw;line-height:1.35;color:#4a5470;opacity:0;transition:opacity .4s .5s,background-color .4s}
.h-draft .nm-clz{opacity:1}.k-neg .nm-clz{background:#fdf3d8}
.nm-del{transition:color .4s .4s}.h-neg .nm-del{color:#c8326a;text-decoration:line-through}
.nm-ins{color:#1e7a4f;font-weight:600;opacity:0;transform:translateY(-.5cqw);transition:opacity .45s .9s,transform .45s .9s}
.h-neg .nm-ins{opacity:1;transform:none}
.nm-sigs{display:grid;grid-template-columns:1fr 1fr;gap:1.2cqw;margin-top:auto;opacity:0;transition:opacity .4s}
.h-sign .nm-sigs{opacity:1}
.nm-sig{display:grid;gap:.3cqw;padding:.8cqw;border:1px dashed #d5dae3;border-radius:1cqw;background:#fafbfd}
.nm-sig svg{width:100%;height:4.2cqw}
.nm-sig path{fill:none;stroke:#1f3f7a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1s ease calc(.3s + var(--i) * 1s)}
.h-sign .nm-sig path{stroke-dashoffset:0}
.nm-sig small{font-size:1cqw;color:#8b93a7}
.nm-seal{position:absolute;right:2.4cqw;bottom:9.5cqw;display:grid;place-items:center;width:9cqw;height:9cqw;border-radius:50%;border:.35cqw solid #1e7a4f;font:800 1.5cqw/1 var(--font);letter-spacing:.12em;color:#1e7a4f;background:#e6f5ecd9;
  opacity:0;transform:rotate(-12deg) scale(1.6);transition:opacity .35s 2.3s,transform .45s cubic-bezier(.3,1.6,.4,1) 2.3s}
.h-sign .nm-seal{opacity:1;transform:rotate(-12deg)}
.k-pivot .nm-paper{left:28%}
.k-found .nm-paper{left:9cqw;transform:translateX(-50%) scale(.45);opacity:1}
.h-own .nm-paper{opacity:0}
/* the six commitment cards */
.nm-cards{position:absolute;top:2cqw;left:31cqw;width:66cqw;display:grid;grid-template-columns:1fr 1fr;gap:1.4cqw;transition:left .8s cubic-bezier(.6,0,.2,1),width .8s cubic-bezier(.6,0,.2,1),transform .8s,opacity .5s}
.nm-card{position:relative;display:grid;align-content:start;gap:.8cqw;min-height:13cqw;padding:1.6cqw 1.8cqw;border-radius:1.4cqw;background:#fff;box-shadow:0 1.4cqw 3cqw -2cqw #10193559,0 0 0 1px #1019350d;
  opacity:0;transform:translateX(-16cqw) scale(.8);transition:opacity .5s calc(var(--i) * .12s),transform .7s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .12s),box-shadow .4s}
.h-found .nm-card{opacity:1;transform:none}
.nm-card-src{display:inline-flex;align-items:center;gap:.6cqw;font:700 1cqw/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:#8b93a7}
.nm-src-ic{width:1.7cqw;height:1.7cqw;fill:none;stroke:#1b2a4a;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nm-card>b{font:700 1.7cqw/1.2 var(--font);letter-spacing:-.01em;color:var(--ink)}
.nm-card-own{display:flex;align-items:center;gap:.8cqw;font-size:1.2cqw;color:#5a6378;opacity:0;transform:translateY(.6cqw);transition:opacity .4s calc(.2s + var(--i) * .15s),transform .4s calc(.2s + var(--i) * .15s)}
.h-own .nm-card-own{opacity:1;transform:none}
.nm-card-own i{display:grid;place-items:center;flex:none;width:2.6cqw;height:2.6cqw;border-radius:50%;font:700 1cqw/1 var(--font);font-style:normal;color:#fff}
.nm-card-own em{margin-left:auto;padding:.4cqw .9cqw;border-radius:99px;background:#fbf3e1;font:700 1.05cqw/1 var(--font);font-style:normal;color:#8a5d10}
.nm-card-st{position:absolute;top:1.3cqw;right:1.5cqw;padding:.4cqw .9cqw;border-radius:99px;font:700 1cqw/1 var(--font)}
.nm-card-st.blue{background:#e8f1ff;color:#1f5aa0}.nm-card-st.red{background:#fde3e1;color:#b3261e}.nm-card-st.green{background:#e6f5ec;color:#1e7a4f}
.nm-card-ok{position:absolute;right:1.5cqw;top:1.3cqw;display:grid;place-items:center;width:2.6cqw;height:2.6cqw;border-radius:50%;background:#e6f5ec;color:#1e7a4f;font-size:1.3cqw;opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.4,1)}
.lay-left .nm-cards{left:2cqw;width:52cqw}
.k-esc .nm-card:not(.hot),.k-proof .nm-card:not(.hot){opacity:.42}
.k-esc .nm-card.hot{box-shadow:0 0 0 .25cqw #e0574f,0 1.4cqw 3cqw -2cqw #10193559}
.k-proof .nm-card.hot{box-shadow:0 0 0 .25cqw #3f9b6e,0 1.4cqw 3cqw -2cqw #10193559}
.lay-hide .nm-cards{opacity:0;transform:scale(.96)}
.lay-done .nm-cards{left:50%;width:76cqw;transform:translateX(-50%);grid-template-columns:repeat(3,1fr)}
.lay-done .nm-card-ok{opacity:1;transform:none;transition-delay:calc(.2s + var(--i) * .12s)}
.lay-done .nm-card{box-shadow:0 0 0 .2cqw #a8dcc0,0 1.4cqw 3cqw -2cqw #10193540}
/* each scene's own pieces */
.nm-ov{position:absolute}
.nm-pop,.nm-cm,.nm-srcs>span{animation:nm-pop .45s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
@keyframes nm-pop{from{opacity:0;transform:translateY(1.2cqw)}}
.nm-prompt{left:50%;bottom:2cqw;display:flex;align-items:center;gap:1cqw;width:46cqw;padding:1.4cqw 1.8cqw;border-radius:1.8cqw;transform:translateX(-50%);font-size:1.5cqw;color:var(--ink);
  border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#2364a8,#7a62c6,#d4a03c) border-box;box-shadow:0 1.6cqw 3.4cqw -1.6cqw #10193566;animation:nm-pop .45s ease-out both}
.nm-prompt>span:first-child{color:#7a62c6}
.nm-typed{white-space:nowrap;overflow:hidden;animation:ipx-write 1.6s steps(52) .4s both}
.nm-comments{left:69cqw;top:10cqw;display:grid;gap:1.2cqw;width:28cqw}
.nm-cm{display:flex;gap:1cqw;padding:1.2cqw 1.3cqw;border-radius:1.2cqw;background:#fff;box-shadow:0 1cqw 2.4cqw -1.6cqw #10193559,0 0 0 1px #1019350d;font-size:1.25cqw;line-height:1.35;color:#3d4660}
.nm-cm>i{display:grid;place-items:center;flex:none;width:2.8cqw;height:2.8cqw;border-radius:50%;font:700 1.1cqw/1 var(--font);font-style:normal;color:#fff}
.nm-cm>i.ai{background:linear-gradient(135deg,#7a62c6,#2364a8)}
.nm-cm b{display:block;font-size:1.2cqw;color:var(--ink)}
.nm-beam{left:45cqw;top:24cqw;display:flex;align-items:center;gap:1.4cqw;width:52cqw}
.nm-beam>i{flex:1;height:.35cqw;border-radius:99px;background:linear-gradient(90deg,#d4a03c00,#d4a03c);transform-origin:left;animation:nm-grow 1s cubic-bezier(.6,0,.2,1) .2s both}
@keyframes nm-grow{from{transform:scaleX(0)}}
.nm-badge{display:flex;align-items:center;gap:1cqw;padding:1.2cqw 2cqw 1.2cqw 1.2cqw;border-radius:99px;background:var(--ink);color:#fff;font:700 1.6cqw/1 var(--font);white-space:nowrap;
  box-shadow:0 0 0 .5cqw #d4a03c55;animation:nm-pop .5s cubic-bezier(.3,1.6,.4,1) 1s both}
.nm-badge svg{width:3cqw;height:3cqw}
.nm-badge path{fill:none;stroke:#fff;stroke-width:64;stroke-linecap:round;stroke-linejoin:round}.nm-badge circle{fill:#d4a03c}
.nm-srcs{left:31cqw;bottom:0;display:flex;gap:1cqw}
.nm-srcs>span{display:inline-flex;align-items:center;gap:.6cqw;padding:.7cqw 1.2cqw;border-radius:99px;background:#fff;box-shadow:0 0 0 1px #10193514;font:600 1.2cqw/1 var(--font);color:#4a5470}
.nm-phone{right:9cqw;top:0}
.nm-phone .ipx-iph{width:20cqw}
.nm-esc,.nm-proof{left:57cqw;top:2cqw;width:40cqw;display:grid;gap:1.1cqw;padding:2cqw;border-radius:1.6cqw;background:#fff;box-shadow:0 1.6cqw 3.6cqw -2cqw #10193566,0 0 0 1px #1019350d;animation:nm-pop .45s ease-out both}
.nm-esc>small,.nm-proof>small{font:700 1.05cqw/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:#8b93a7}
.nm-ev{display:flex;align-items:flex-start;gap:1.2cqw;font-size:1.15cqw;color:#8b93a7}
.nm-ev>i{flex:none;width:1.6cqw;height:1.6cqw;margin-top:.3cqw;border-radius:50%;background:#d5dae3}
.nm-ev.gold>i{background:#e2b552}.nm-ev.red>i{background:#e0574f}.nm-ev.green>i{background:#3f9b6e}
.nm-ev b{display:block;font-size:1.45cqw;color:var(--ink)}
.nm-proof>b{font:750 2cqw/1.1 var(--font);color:var(--ink)}
.nm-file{display:flex;align-items:center;gap:.8cqw;padding:1cqw;border-radius:1cqw;background:#f2f7fd;font:600 1.3cqw/1 var(--font);color:var(--ink)}
.nm-file svg{width:2cqw;height:2cqw;fill:none;stroke:#2364a8;stroke-width:1.8}
.nm-file em{margin-left:auto;padding:.4cqw .8cqw;border-radius:99px;background:#e8f1ff;font:700 1cqw/1 var(--font);font-style:normal;color:#1f5aa0}
.nm-pl{display:block;height:.9cqw;border-radius:99px;background:#e9ecf1}
.nm-btns{position:relative;display:flex;justify-content:flex-end;gap:1cqw}
.nm-btns>span{display:grid;place-items:center;height:3.6cqw;padding:0 1.8cqw;border-radius:99px;font:700 1.3cqw/1 var(--font)}
.nm-btns .rej{box-shadow:inset 0 0 0 1px #10193526;color:#5a6378}
.nm-btns .acc{background:#1e7a4f;color:#fff}.nm-btns .acc>span{grid-area:1/1}
.nm-btns .acc .b{opacity:0;animation:ipx-fade .25s ease 2.2s forwards}
.nm-btns .acc .a{animation:ipx-gone .2s ease 2.2s forwards}
.nm-tap{position:absolute;right:4cqw;top:50%;width:4cqw;height:4cqw;margin-top:-2cqw;border-radius:50%;background:#2364a855;opacity:0;animation:ipx-tapk .7s ease-out 1.8s both}
.nm-done{position:absolute;right:2cqw;top:-2cqw;display:grid;place-items:center;width:9cqw;height:9cqw;border-radius:50%;border:.35cqw solid #1e7a4f;rotate:-12deg;font:800 1.5cqw/1 var(--font);letter-spacing:.12em;color:#1e7a4f;background:#e6f5ecf2;
  animation:nm-stamp .45s cubic-bezier(.3,1.6,.4,1) 2.8s both}
@keyframes nm-stamp{from{opacity:0;scale:1.7}}
.nm-report{left:50%;top:0;display:grid;gap:1.6cqw;width:86cqw;padding:2.4cqw;border-radius:1.8cqw;background:#fff;box-shadow:0 2cqw 4cqw -2.4cqw #10193566,0 0 0 1px #1019350d;transform:translateX(-50%);animation:nm-pop .45s ease-out both}
.nm-report .ipx-tiles{gap:1.4cqw}.nm-report .ipx-tile{padding:1.8cqw;box-shadow:0 0 0 1px #1019350f}
.nm-report .ipx-tile b{font-size:4.4cqw}.nm-report .ipx-tile span{font-size:1.4cqw}
.nm-report .ipx-dline{font-size:1.4cqw}.nm-report .ipx-dline b{font-size:2.6cqw}
.nm-report .ipx-flowline span{font-size:1.2cqw}.nm-report .ipx-flowline span b{font-size:2.3cqw}
.nm-report .ipx-ben b{font-size:3cqw}.nm-report .ipx-ben span{font-size:1.3cqw}
@media(prefers-reduced-motion:reduce){.nm *{transition:none!important;animation:none!important}}
/* phones: a taller stage, one column, each scene's piece centred */
@media(max-width:700px){
 .nm{height:calc(var(--n) * 76svh)}
 .nm-stick{padding-top:84px;gap:10px}
 .nm-copy{min-height:96px}
 .nm-h{font-size:clamp(28px,8.4vw,40px)}
 .nm-l{font-size:15px;margin-top:8px}.nm-l.pivot{font-size:24px}
 .nm-stage{width:min(100%,calc((100svh - 250px) * .78));aspect-ratio:.78}
 .nm-dots{display:none}
 .nm-paper{width:64cqw;height:92cqw;padding:5cqw;gap:2cqw}
 .nm-p-t{font-size:3.3cqw}.nm-p-m{font-size:2.2cqw}.nm-ln{height:1.8cqw}.nm-clz{font-size:2.6cqw}.nm-sig svg{height:8cqw}.nm-sig small{font-size:2cqw}
 .nm-seal{width:17cqw;height:17cqw;font-size:2.8cqw;bottom:19cqw}
 .k-pivot .nm-paper{left:50%;transform:translateX(-50%) scale(.8)}
 .h-found .nm-paper{opacity:0}
 .nm-cards,.lay-left .nm-cards,.lay-done .nm-cards{left:3cqw;width:94cqw;transform:none;grid-template-columns:1fr;gap:2cqw;top:0}
 .nm-card{min-height:0;padding:2.6cqw 3cqw;gap:1.2cqw}
 .nm-card-src{font-size:2.2cqw}.nm-src-ic{width:3.4cqw;height:3.4cqw}.nm-card>b{font-size:3.6cqw}
 .nm-card-own{font-size:2.6cqw}.nm-card-own i{width:5.4cqw;height:5.4cqw;font-size:2cqw}.nm-card-own em{font-size:2.2cqw}
 .nm-card-st{font-size:2.1cqw;top:2.4cqw;right:2.6cqw}.nm-card-ok{width:5cqw;height:5cqw;font-size:2.6cqw;top:2.4cqw;right:2.6cqw}
 .lay-left .nm-cards{opacity:0}
 .nm-prompt{width:92cqw;font-size:3cqw;bottom:3cqw}
 .nm-comments{left:4cqw;top:auto;bottom:2cqw;width:92cqw;gap:2cqw}
 .nm-cm{font-size:2.8cqw}.nm-cm b{font-size:2.8cqw}.nm-cm>i{width:6cqw;height:6cqw;font-size:2.2cqw}
 .nm-beam{display:none}
 .nm-srcs{display:none}
 .nm-phone{left:50%;right:auto;transform:translateX(-50%)}.nm-phone .ipx-iph{width:52cqw}
 .nm-phone .ipx-iph-n,.nm-phone .ipx-iph-n b{font-size:2.4cqw}.nm-phone .ipx-iph-date{font-size:2.6cqw}.nm-phone .ipx-iph-clock{font-size:12cqw}
 .nm-esc,.nm-proof{left:3cqw;width:94cqw;padding:4cqw;gap:2.4cqw}
 .nm-esc>small,.nm-proof>small{font-size:2.2cqw}.nm-ev{font-size:2.6cqw}.nm-ev b{font-size:3.2cqw}.nm-ev>i{width:3cqw;height:3cqw}
 .nm-proof>b{font-size:4.4cqw}.nm-file{font-size:3cqw}.nm-file em{font-size:2.2cqw}.nm-btns>span{height:8cqw;font-size:3cqw}.nm-done{width:18cqw;height:18cqw;font-size:3cqw}
 .nm-report{width:96cqw;padding:4cqw;gap:3cqw}
 .nm-report .ipx-tile b{font-size:8cqw}.nm-report .ipx-tile span{font-size:2.6cqw}.nm-report .ipx-dline{font-size:2.8cqw}.nm-report .ipx-dline b{font-size:5cqw}
 .nm-report .ipx-flowline{flex-wrap:wrap}.nm-report .ipx-flowline span{flex:1 1 30%;font-size:2.4cqw}.nm-report .ipx-flowline span b{font-size:4.4cqw}
 .nm-report .ipx-ben{grid-template-columns:1fr 1fr}.nm-report .ipx-ben b{font-size:6cqw}.nm-report .ipx-ben span{font-size:2.6cqw}
}
.nm-srcs{display:none}

/* the movie plays by itself (owner, 10 Oct): one screen tall, a control bar to pause, jump or replay */
.nm{height:auto}
.nm-stick{position:relative;height:100svh;min-height:620px}
.nm-stage{width:min(1100px,100%,calc((100svh - 340px) * 1.9))}
.nm-ctrl{display:flex;align-items:center;gap:14px;width:min(560px,100%)}
.nm-pp{display:grid;place-items:center;flex:none;width:38px;height:38px;border:0;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer}
.nm-pp svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.nm-pp svg path[d^="m9"]{fill:currentColor}
.nm-bars{flex:1;display:flex;gap:5px}
.nm-bar{flex:1;height:22px;padding:9px 0;border:0;background:none;cursor:pointer}
.nm-bar i{display:block;height:4px;border-radius:99px;background:#10193520;overflow:hidden;position:relative}
.nm-bar.past i{background:#1019355e}
.nm-bar.on i{background:#10193520}
.nm-bar.on i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#c99535;transform-origin:left}
.nm-bar.on i.run::after{animation:nm-fill var(--t,4s) linear both}
@keyframes nm-fill{from{transform:scaleX(0)}}
.nm-bar:focus-visible,.nm-pp:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* the workflow scene: blocks drop in, wires draw, a run lights the path */
.nm-flow{inset:0}
.nm-flow-tag{position:absolute;left:50%;top:0;transform:translateX(-50%);padding:.6cqw 1.4cqw;border-radius:99px;background:#efe9fb;font:700 1.2cqw/1 var(--font);color:#5a3d9e;animation:nm-pop .4s ease-out both}
.nm-flow-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nmf-e{fill:none;stroke:#1019352e;stroke-width:2.4;stroke-dasharray:1 1;stroke-dashoffset:1;animation:nmf-draw .5s ease-out var(--d,0s) forwards}
.nmf-run{fill:none;stroke:#d4a03c;stroke-width:4;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;filter:drop-shadow(0 0 5px #d4a03c99);animation:nmf-draw .45s ease-in-out var(--d,0s) forwards}
@keyframes nmf-draw{to{stroke-dashoffset:0}}
.nmf-lab{font:700 14px/1 var(--font);opacity:0;animation:ipx-fade .3s ease var(--d,0s) forwards}
.nmf-lab.yes{fill:#1e7a4f}.nmf-lab.no{fill:#8a5d10}
.nmf-n{position:absolute;display:grid;align-content:center;gap:.4cqw;width:13cqw;height:7.2cqw;padding:0 1.2cqw;border-radius:1.2cqw;background:#fff;box-shadow:0 1.2cqw 2.6cqw -1.6cqw #10193566,0 0 0 1px #10193514;
  animation:nmf-drop .5s cubic-bezier(.3,1.4,.4,1) var(--d,0s) both}
.nmf-n small{font:800 .95cqw/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:#8b93a7}
.nmf-n b{font:700 1.35cqw/1.2 var(--font);color:var(--ink)}
.nmf-n.t small{color:#2364a8}.nmf-n.if small{color:#8a5d10}.nmf-n.a small,.nmf-n.b small{color:#5a3d9e}.nmf-n.r small{color:#1f5aa0}.nmf-n.e small{color:#b3261e}.nmf-n.d small{color:#1e7a4f}
.nmf-n.on{animation:nmf-drop .5s cubic-bezier(.3,1.4,.4,1) var(--d,0s) both,nmf-lit .4s ease var(--r,4s) forwards}
@keyframes nmf-drop{from{opacity:0;transform:translateY(-3cqw) scale(.9)}}
@keyframes nmf-lit{to{box-shadow:0 0 0 .22cqw #d4a03c,0 1.2cqw 2.6cqw -1.6cqw #10193566}}
@media(prefers-reduced-motion:reduce){.nmf-e,.nmf-run{stroke-dashoffset:0}}
@media(max-width:700px){
 .nm-stick{min-height:0}
 .nm-stage{width:min(100%,calc((100svh - 290px) * .78))}
 .nm-ctrl{gap:10px}
 .nm-bars{gap:3px}
 /* the workflow on phones: the same graph, rotated into a column */
 .nm-flow-tag{font-size:2.6cqw;padding:1.2cqw 2.6cqw}
 .nm-flow-svg{display:none}
 .nm-flow{display:grid;align-content:start;justify-items:center;gap:2cqw;padding-top:9cqw}
 .nmf-n{position:relative;left:auto!important;top:auto!important;width:70cqw;height:auto;padding:2.4cqw 3cqw;gap:.8cqw}
 .nmf-n small{font-size:2.2cqw}.nmf-n b{font-size:3.4cqw}
 .nmf-n.b{display:none}
}
/* the controls stay clear of the cookie strip while it shows */
.nm-stick{padding-bottom:calc(clamp(14px,2.6vh,30px) + var(--ck-h,0px))}
.nm-stage{width:min(1100px,100%,calc((100svh - 340px - var(--ck-h,0px)) * 1.9))}
@media(max-width:700px){.nm-stage{width:min(100%,calc((100svh - 290px - var(--ck-h,0px)) * .78))}}

/* ============ movie, round 2 (owner, 10 Oct) ============ */
/* the page rises as it is written, as if printed; it comes up from the bottom of the stage */
.nm-paper{transform-origin:50% 0}
.k-boot .nm-paper{transform:translateX(-50%) translateY(56cqw);transition:none}
.k-draft .nm-paper{transition:transform 3.4s cubic-bezier(.22,.7,.3,1),left .8s,opacity .6s}
.k-draft .nm-ln{transition-delay:calc(.5s + var(--i) * .28s)}
.k-draft .nm-clz{transition-delay:1.6s}
.nm-stage{overflow:clip;overflow-clip-margin:3cqw}
/* the approval workflow sits between negotiate and sign; the page steps aside while it runs */
.k-flow .nm-paper{opacity:0;transform:translateX(-50%) scale(.92)}
/* every promise, found: a list with arrows from each source; each tagged by kind */
.nm-kind{display:none;padding:.35cqw .8cqw;border-radius:99px;font:700 .95cqw/1 var(--font);font-style:normal;white-space:nowrap}
.nm-kind.delivery{background:#e6f5ec;color:#1e7a4f}.nm-kind.payment{background:#fbf3e1;color:#8a5d10}.nm-kind.contractual{background:#e8f1ff;color:#1f5aa0}
.nm-kind.commercial{background:#eef0f4;color:#4a5470}.nm-kind.meeting{background:#efe9fb;color:#5a3d9e}
.lay-list .nm-cards{left:31cqw;top:1.4cqw;width:64cqw;grid-template-columns:1fr;gap:1cqw}
.lay-list .nm-card{display:flex;align-items:center;gap:1.4cqw;min-height:0;height:7.4cqw;padding:0 1.8cqw}
.lay-list .nm-card>b{flex:1;min-width:0}
.lay-list .nm-kind,.lay-center .nm-kind{display:inline-block}
.lay-list .nm-card-own{display:none}
.lay-center .nm-cards{left:50%;width:78cqw;transform:translateX(-50%);grid-template-columns:repeat(3,1fr)}
.lay-center .nm-kind{justify-self:start}
.nm-found{inset:0}
.nm-srcchip{position:absolute;left:1.6cqw;display:flex;align-items:center;gap:.8cqw;width:15cqw;height:5.6cqw;padding:0 1.2cqw;border-radius:1.2cqw;background:#fff;
  box-shadow:0 1cqw 2.4cqw -1.6cqw #10193559,0 0 0 1px #1019350f;font:700 1.25cqw/1 var(--font);color:var(--ink);animation:nm-pop .45s ease-out var(--d,0s) both}
.nm-arrows{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.nm-arrow{fill:none;stroke-width:2.2;stroke-dasharray:1 1;stroke-dashoffset:1;animation:nmf-draw .55s ease-out var(--d,0s) forwards}
/* followed up: bells ring on every card; the phone shows 7, 3 and 1 day before; a counter */
.nm-bells{display:none;position:absolute;top:1.55cqw;right:10.4cqw;gap:.35cqw}
.k-follow .nm-bells{display:flex}
.nm-bells i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#e2b552 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 15v-4a5 5 0 0 1 10 0v4l1.5 2h-13zM10.5 20h3'/%3E%3C/svg%3E") center/80% no-repeat;
  animation:nm-ring .45s cubic-bezier(.3,1.6,.4,1) var(--d,0s) both}
@keyframes nm-ring{from{opacity:0;transform:scale(.3) rotate(-30deg)}}
.nm-count{position:absolute;right:4cqw;top:45.5cqw;padding:.8cqw 1.4cqw;border-radius:99px;background:#e6f5ec;font:600 1.15cqw/1 var(--font);color:#1e5a3a}
.nm-count b{font-size:1.5cqw;color:#1e7a4f}
/* escalation and proof end in Done on the card */
.nm-card-st.sw{display:grid;padding:0;background:none}
.nm-card-st.sw>span{grid-area:1/1;padding:.4cqw .9cqw;border-radius:99px}
.nm-card-st.sw .red{background:#fde3e1;color:#b3261e}.nm-card-st.sw .blue{background:#e8f1ff;color:#1f5aa0}.nm-card-st.sw .green{background:#e6f5ec;color:#1e7a4f}
.nm-card-st.sw .b{opacity:0;animation:ipx-fade .3s ease 2.9s forwards}
.nm-card-st.sw .a{animation:ipx-gone .2s ease 2.9s forwards}
.nm-card-st.sw.p .b{animation-delay:2.6s}.nm-card-st.sw.p .a{animation-delay:2.6s}
.k-esc .nm-card.hot{animation:nm-hot-ok .4s ease 2.9s forwards}
.k-proof .nm-card.hot{animation:nm-hot-ok .4s ease 2.6s forwards}
@keyframes nm-hot-ok{to{box-shadow:0 0 0 .25cqw #3f9b6e,0 1.4cqw 3cqw -2cqw #10193559}}
/* the closing line: the hero's line */
.nm-h.close em{font-style:italic;color:var(--blue)}
.nm-outc{position:relative;display:inline-block}
.nm-outc-u{position:absolute;left:2%;bottom:-.09em;width:95%;height:.16em;overflow:visible;pointer-events:none}
.nm-outc-u path{fill:none;stroke:#c99535;stroke-width:3;stroke-opacity:.8;stroke-linecap:round;stroke-dasharray:100;animation:nvj-outcomes-underline 1.7s cubic-bezier(.25,.55,.3,1) .5s both}
@media(max-width:700px){
 .k-boot .nm-paper{transform:translateX(-50%) translateY(130cqw)}
 .k-found .nm-paper{opacity:0}
 .nm-found,.nm-count{display:none}
 .lay-list .nm-cards{left:3cqw;width:94cqw;top:0;gap:2cqw}
 .lay-list .nm-card{height:auto;padding:3cqw}
 .lay-center .nm-cards{left:3cqw;width:94cqw;transform:none;grid-template-columns:1fr}
 .nm-kind{font-size:2.1cqw;padding:.8cqw 1.6cqw}
 .nm-bells{top:2.6cqw;right:24cqw}.nm-bells i{width:3.2cqw;height:3.2cqw}
}
/* the closing scene has a two-line line and a button: a smaller stage keeps the button clear of the cards */
.nm-stick.is-close .nm-stage{width:min(860px,100%,calc((100svh - 470px - var(--ck-h,0px)) * 1.9))}
.nm-h.close{font-size:clamp(30px,3.6vw,54px)}
.nm-hero .nm-product-name{font:650 16px/1.4 var(--font);text-transform:none;letter-spacing:0;color:var(--blue);margin-bottom:14px}
.nm-hero .nm-h.pivot{color:var(--ink)}
.nm-hero .nm-l.pivot{font:500 clamp(16px,1.3vw,20px)/1.5 var(--font);letter-spacing:0;color:var(--slate)}
.nm-hero .k-draft .nm-paper{transition:transform 2.2s cubic-bezier(.22,.7,.3,1),left .6s,opacity .4s}
.nm-hero .k-draft .nm-ln{transition-delay:calc(.3s + var(--i) * .2s)}
.nm-hero .k-draft .nm-clz{transition-delay:1.1s}
@media(max-width:700px){.nm-stick.is-close .nm-stage{width:min(100%,calc((100svh - 400px - var(--ck-h,0px)) * .78))}.nm-h.close{font-size:clamp(24px,7vw,34px)}}

/* ============ Navio OS page, after the movie (owner, 11 Oct: at least eight sections, each relevant): the index and nine parts.
   np-arm = near the screen, pieces wait at their first frame; np-go = playing. With reduced motion or motion paused every
   animation is off, so each section shows its finished picture. ============ */
.np{padding-block:clamp(64px,10vh,118px)}
.np-head{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:860px;margin:0 auto clamp(30px,5vh,54px)}
.np-head-ic .np-ic{width:50px;height:50px;margin-bottom:14px}
.np-h{margin:0;font:750 clamp(34px,4vw,60px)/1.04 var(--font);letter-spacing:-.045em;color:var(--ink)}
.np-l{margin-top:14px;font-size:clamp(16px,1.3vw,20px);line-height:1.5;color:var(--slate);max-width:660px}
.np-g{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.np-av{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;font:700 10.5px/1 var(--ui);color:#fff;background:#5b6e8d}
.np-av.c1{background:#8a6d3b}.np-av.c2{background:#6d5a8c}.np-av.c3{background:#5f7d6c}.np-av.c4{background:#716887}.np-av.c5{background:#5a6378}
.np-chip{display:inline-flex;align-items:center;padding:5px 10px;border-radius:99px;font:650 11px/1.2 var(--ui);white-space:nowrap}
.np-chip.amber{background:#b274001a;color:#8a5a00}.np-chip.rose{background:#c8326a14;color:#b02a5c}.np-chip.blue{background:#2364a812;color:var(--blue)}.np-chip.green{background:#16794a14;color:#16794a}
.np-list-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;font:700 15px/1.3 var(--ui);color:var(--ink)}
.np-list-h>span{font:600 12px var(--ui);color:var(--muted)}
.np-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto 64px;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#fff}
.np-row+.np-row{margin-top:8px}
.np-row-src{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eef1f6;color:#1b2a4a}
.np-row b{font:600 14.5px/1.3 var(--ui);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-row em{font:600 12px var(--ui);font-style:normal;color:var(--slate);text-align:right;white-space:nowrap}
@keyframes np-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes np-fade{from{opacity:0}to{opacity:1}}
@keyframes np-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes np-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes np-strk{from{background-size:0 1.5px}to{background-size:100% 1.5px}}
@keyframes np-grow{from{transform:scaleX(0)}to{transform:none}}
@keyframes np-run{from{stroke-dashoffset:.08}to{stroke-dashoffset:-1}}
@keyframes np-type{0%{opacity:0}15%,82%{opacity:1}100%{opacity:0}}
@keyframes np-dot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-3px);opacity:1}}
@keyframes np-stamp{from{opacity:0;transform:scale(1.7) rotate(-14deg)}to{opacity:1;transform:rotate(-8deg)}}
@keyframes np-lit{0%{border-color:#dfe3eb}35%{border-color:#2364a8;box-shadow:0 0 0 5px #2364a824}100%{border-color:#9fc0e6;box-shadow:0 10px 20px -16px #10193560}}
.np-arm .np-a{animation:np-in .7s var(--ease) var(--d,0s) both;animation-play-state:paused}
.np-arm .np-fd{animation:np-fade .8s ease var(--d,0s) both;animation-play-state:paused}
.np-arm .np-dw{animation:np-draw .9s ease var(--d,0s) both;animation-play-state:paused}
.np-arm .np-type{animation:np-wipe .5s ease-out var(--d,0s) both;animation-play-state:paused}
.np-arm .np-strike{animation:np-strk .5s ease var(--d,0s) both;animation-play-state:paused}
.np-arm .np-grow{animation:np-grow 1s var(--ease) var(--d,0s) both;animation-play-state:paused}
.np-arm .np-typing{animation:np-type .95s linear var(--d,0s) both;animation-play-state:paused}
.np-arm .np-pf-stamp.np-a{animation-name:np-stamp}
.np-arm .np-wf-node.np-a{animation:np-in .7s var(--ease) var(--d,0s) both,np-lit 1.4s ease var(--r,0s) both;animation-play-state:paused}
.np-go .np-a,.np-go .np-fd,.np-go .np-dw,.np-go .np-type,.np-go .np-strike,.np-go .np-grow,.np-go .np-typing,.np-go .np-wf-node.np-a{animation-play-state:running}

/* the opening screen (owner, 12 Oct): one full screen above the movie, words on top, the picture under them */
.np-tell{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(96px,13vh,132px) 0 calc(clamp(36px,6vh,72px) + var(--ck-h,0px));text-align:center}
.np-tell>.container{width:100%;min-width:0}
.np-tell-k{margin:0 0 14px;font:750 12px/1.2 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.np-tell-h{max-width:1180px;margin:0 auto;font:750 clamp(36px,4.3vw,66px)/1.06 var(--font);letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.np-tell-h>span{display:block}.np-tell-h>span+span{color:#8a93a6}
.np-tell-sub{max-width:900px;margin:clamp(16px,2.6vh,28px) auto 0;font:400 clamp(16px,1.3vw,20px)/1.55 var(--font);color:var(--slate)}
.np-tell-sub>span{display:block}.np-tell-sub b{font-weight:620;color:var(--ink)}
.np-tell-actions{display:flex;align-items:center;justify-content:center;gap:24px;margin:clamp(20px,3vh,30px) auto 0}
.np-tell-actions .button{min-height:48px}
.np-tell-actions .text-link{display:inline-flex;align-items:center;gap:8px;font:700 14px var(--ui);color:var(--ink)}
.np-tell-actions .text-link .ico{width:16px;height:16px}
.np-tell-ask{display:flex;align-items:center;gap:12px;width:min(560px,100%);padding:9px 9px 9px 18px;border-radius:99px;text-align:left;font:500 clamp(14px,1.1vw,16px)/1.3 var(--ui);color:var(--ink);
  border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#2364a8,#7a62c6,#d4a03c) border-box;box-shadow:0 18px 34px -22px #10193566}
.np-tell-ask>.np-g{color:#7a62c6}
.np-tell-ask>i{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;background:var(--ink);color:#fff}.np-tell-ask>i .np-g{width:15px;height:15px}
/* the four steps: describe, answer, test, activate */
.nvt-card{width:min(700px,100%);margin:clamp(26px,4.6vh,52px) auto 0;padding:10px 10px 14px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:0 34px 70px -50px #10193570;text-align:left}
.nvt-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border-radius:17px;background:#f2f4f8}
.nvt-step{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;border-radius:13px;background:none;font:650 14px var(--ui);color:var(--slate);transition:background .25s,color .25s}
.nvt-step:hover{color:var(--ink)}
.nvt-step.on{background:var(--ink);color:#fff}
.nvt-step.done{color:#16794a}
.nvt-step .np-g{width:16px;height:16px}
.nvt-body{display:flex;align-items:center;justify-content:center;height:clamp(150px,20vh,176px);padding:12px 12px 0}
.nvt-b{width:100%;max-width:560px;min-width:0}
.nvt-desc .np-tell-ask{min-width:0;max-width:100%}
.nvt-in{animation:np-in .6s var(--ease) var(--d,0s) both}
.nvt-desc{display:flex;flex-direction:column;align-items:center;gap:14px}
.nvt-typed{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:np-wipe 1.3s steps(38) .3s both}
.nvt-note{font:500 13.5px var(--ui);color:var(--muted)}
.nvt-mic{display:grid;place-items:center;flex:none;color:var(--muted)}.nvt-mic .np-g{width:18px;height:18px}
.nvt-qs{display:flex;flex-direction:column;gap:8px}
.nvt-q{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 6px 6px 14px;border-radius:14px;background:#f6f7fa}
.nvt-q>span{display:flex;align-items:center;gap:8px;font:600 14px var(--ui);color:var(--ink)}
.nvt-q>span .np-g{width:16px;height:16px;color:#7a62c6}
.nvt-q>b{padding:7px 12px;border-radius:99px;background:var(--ink);color:#fff;font:650 13px var(--ui);white-space:nowrap}
.nvt-test{display:flex;flex-direction:column;gap:10px}
.nvt-k{font:600 13px var(--ui);color:var(--muted)}
.nvt-t{display:flex;align-items:center;gap:10px;font:600 14.5px var(--ui);color:var(--ink)}
.nvt-t i{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;background:#16794a;color:#fff}.nvt-t i .np-g{width:14px;height:14px;stroke-width:2.6}
.nvt-live{display:flex;flex-direction:column;align-items:center;gap:18px}
.nvt-switch{display:flex;align-items:center;gap:12px}
.nvt-sw{position:relative;width:52px;height:30px;flex:none;border-radius:99px;background:#16794a;animation:nvt-sw-bg .4s ease .3s both}
.nvt-sw i{position:absolute;top:3px;left:25px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #10193540;animation:nvt-sw-k .4s var(--ease) .3s both}
@keyframes nvt-sw-bg{from{background:#c3c9d6}}
@keyframes nvt-sw-k{from{left:3px}}
.nvt-switch b{font:750 20px var(--font);color:#16794a}
.nvt-switch small{font:500 14px var(--ui);color:var(--slate)}
.nvt-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.nvt-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:#fff;font:500 13px var(--ui);color:var(--slate)}
.nvt-chip b{font-weight:650;color:var(--ink)}
.nvt-chip .np-g{width:15px;height:15px;color:#1b2a4a}
@media(max-width:700px){
 .np-tell{min-height:0;padding-top:104px}
 .np-tell-h{font-size:clamp(30px,8.4vw,40px)}
 .np-tell-k{margin-bottom:10px;font-size:11px}
 .np-tell-sub{font-size:15.5px}.np-tell-sub>span{display:inline}
 .np-tell-actions{gap:18px;margin-top:20px}.np-tell-actions .button{min-height:46px;padding-inline:20px}.np-tell-actions .text-link{font-size:13px}
 .np-tell-ask{font-size:13px;padding-left:14px}
 .nvt-desc .np-tell-ask{gap:8px;border-radius:22px}.nvt-typed{white-space:normal;line-height:1.35}
 .nvt-step{font-size:12.5px;height:36px}.nvt-step .np-g{display:none}
 .nvt-body{height:auto;min-height:196px;padding:14px 4px 0}
 .nvt-q{flex-wrap:wrap;padding:8px 10px}.nvt-q>span{font-size:13.5px}
 .nvt-switch{flex-wrap:wrap;justify-content:center}}

/* 0 · index */
.np-index{padding-top:clamp(56px,9vh,104px)}
.np-tiles{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:12px;max-width:1300px;margin:0 auto}
.np-tile{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 8px 14px;border-radius:20px;background:#fff;border:1px solid var(--line);text-align:center;transition:transform .25s var(--ease),box-shadow .25s}
.np-tile:hover{transform:translateY(-3px);box-shadow:0 18px 30px -22px #10193560}
.np-tile .np-ic{width:40px;height:40px}
.np-tile b{font:650 14px/1.25 var(--ui);color:var(--ink);min-height:2.5em;display:grid;place-items:center}
.np-tile-go{color:#a3abbd}.np-tile-go .np-g{width:14px;height:14px}

/* 1 · capture */
.np-cap-stage{display:grid;grid-template-columns:220px 200px minmax(0,520px);justify-content:center;align-items:center}
.np-cap-src{list-style:none;margin:0;padding:6px 0;display:flex;flex-direction:column;gap:12px}
.np-cap-src li{height:48px;display:flex;align-items:center;gap:10px;padding:0 16px;border-radius:14px;background:#fff;border:1px solid var(--line);font:600 14px var(--ui);color:var(--ink);box-shadow:0 10px 20px -18px #10193540}
.np-cap-src .np-g{color:#1b2a4a}
.np-cap-mid{position:relative;height:360px}
.np-cap-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.np-wire{fill:none;stroke:#c9d2e2;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:0}
.np-pulse{fill:none;stroke:#d4a03c;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:.08 1.2;stroke-dashoffset:.08}
.np-go .np-pulse{animation:np-run 3.3s linear var(--d,0s) infinite}
.np-hub{position:absolute;left:68px;top:148px;width:64px;height:64px;border-radius:50%;background:var(--ink);display:grid;place-items:center;box-shadow:0 0 0 9px #1019350f,0 16px 30px -12px #10193580}
.np-hub svg{width:34px;height:34px}.np-hub path{fill:none;stroke:#fff;stroke-width:4.6;stroke-linecap:round;stroke-linejoin:round}.np-hub circle{fill:#d4a03c}
.np-cap-list{padding:20px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -42px #10193555}

/* 2 · Navio AI */
.np-ai-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px) minmax(0,1fr);grid-template-rows:auto auto;gap:18px 28px;align-items:center;max-width:1180px;margin:0 auto}
.np-chat{grid-column:2;grid-row:1/3;padding:18px 20px 16px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -50px #10193570}
.np-ai-chip{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;width:100%;max-width:250px;padding:14px 16px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.np-ai-chip.c0{grid-column:1;grid-row:1;justify-self:end}.np-ai-chip.c1{grid-column:1;grid-row:2;justify-self:end}.np-ai-chip.c2{grid-column:3;grid-row:1}.np-ai-chip.c3{grid-column:3;grid-row:2}
.np-ai-chip .np-g{grid-row:1/3;width:22px;height:22px;color:var(--violet)}
.np-ai-chip b{font:700 15px/1.2 var(--ui);color:var(--ink)}
.np-ai-chip span{font:500 12.5px/1.35 var(--ui);color:var(--slate)}
.np-chat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.np-chat-top small{font:600 12px var(--ui);color:var(--muted)}
.np-q{margin-left:auto;width:fit-content;max-width:86%;padding:11px 15px;border-radius:18px 18px 4px 18px;background:var(--ink);color:#fff;font:500 14.5px/1.4 var(--ui)}
.np-ans{position:relative;margin-top:14px;padding:14px;border-radius:18px 18px 18px 4px;background:#f4f5f9;min-height:150px}
.np-typing{position:absolute;left:16px;top:18px;display:flex;gap:4px;opacity:0}
.np-typing i{width:7px;height:7px;border-radius:50%;background:#9aa3b8;animation:np-dot 1s infinite}.np-typing i:nth-child(2){animation-delay:.15s}.np-typing i:nth-child(3){animation-delay:.3s}
.np-ans-h{margin:0 0 10px;font:600 14px var(--ui);color:var(--ink)}
.np-ans-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border-radius:12px;background:#fff}
.np-ans-row+.np-ans-row{margin-top:6px}
.np-ans-row b{display:block;font:600 13.5px/1.3 var(--ui);color:var(--ink)}.np-ans-row small{font:500 12px var(--ui);color:var(--slate)}
.np-src{display:flex;align-items:center;gap:6px;margin-top:10px;font:500 12px var(--ui);color:var(--muted)}.np-src .np-g{width:14px;height:14px}
.np-ask-in{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding:7px 7px 7px 16px;border:1px solid var(--line);border-radius:99px;font:500 13.5px var(--ui);color:var(--muted)}
.np-ask-in i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff}.np-ask-in .np-g{width:15px;height:15px}
.np-foot{margin-top:26px;text-align:center;font:500 13.5px var(--ui);color:var(--muted)}

/* 3 · workflows */
.np-wf-app{max-width:1180px;margin:0 auto;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -55px #10193570;overflow:hidden}
.np-wf-top{display:flex;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line)}
.np-wf-tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:#f2f3f7}
.np-wf-tabs span{padding:7px 12px;border-radius:9px;font:600 13px var(--ui);color:var(--slate)}
.np-wf-tabs span.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px #10193520}
.np-wf-name{margin-left:auto;font:600 14px var(--ui);color:var(--ink)}
.np-wf-pub{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:99px;background:#16794a14;color:#16794a;font:700 12.5px var(--ui)}.np-wf-pub .np-g{width:14px;height:14px;stroke-width:2.4}
.np-wf-body{display:grid;grid-template-columns:190px minmax(0,1fr)}
.np-wf-pal{list-style:none;margin:0;padding:16px;display:flex;flex-direction:column;gap:8px;border-right:1px solid var(--line);background:#fbfbfc}
.np-wf-pal li{display:flex;align-items:center;gap:8px;padding:10px;border-radius:12px;background:#fff;border:1px solid var(--line);font:600 13px var(--ui);color:var(--ink)}
.np-wf-pal .np-g{width:16px;height:16px;color:#1b2a4a}.np-wf-pal .grip{width:14px;height:14px;color:#b5bccb;stroke-width:3.2}
.np-wf-canvas{position:relative;margin:14px;min-height:400px;border-radius:16px;background-color:#f6f7fa;background-image:radial-gradient(#d3d8e2 1px,transparent 1.3px);background-size:18px 18px}
.np-wf-edges{position:absolute;inset:0;width:100%;height:100%}
.np-wf-edge{fill:none;stroke:#aab6cc;stroke-width:2;vector-effect:non-scaling-stroke}
.np-wf-node{position:absolute;left:var(--x);top:var(--y);width:13%;min-width:118px;margin:-31px 0 0 -6.5%;padding:10px 12px;border-radius:14px;background:#fff;border:1.5px solid #dfe3eb;box-shadow:0 10px 20px -16px #10193560}
.np-wf-node small{display:block;font:700 10px/1.2 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.np-wf-node b{display:block;margin-top:3px;font:600 13px/1.3 var(--ui);color:var(--ink)}
.np-wf-node.n-if small{color:#9a6a1c}.np-wf-node.n-a small,.np-wf-node.n-b small{color:var(--violet)}.np-wf-node.n-e small{color:#b02a5c}.np-wf-node.n-d small{color:#16794a}

/* 4 · contracts */
.np-ct-steps{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-width:1240px}
.np-ct-steps>li{display:flex;flex-direction:column;gap:6px}
.np-ct-pic{position:relative;height:260px;margin-bottom:12px;padding:22px;border-radius:22px;background:#eef1f6;display:grid;place-items:center;overflow:hidden}
.np-ct-steps>li>b{font:700 21px/1.2 var(--font);letter-spacing:-.02em;color:var(--ink)}
.np-ct-steps>li>span{font:500 14.5px/1.45 var(--ui);color:var(--slate)}
.np-doc{position:relative;width:100%;max-width:230px;height:100%;padding:18px 16px;border-radius:12px;background:#fff;box-shadow:0 16px 30px -20px #10193560;display:flex;flex-direction:column;gap:9px}
.np-doc-t{display:block;width:55%;height:9px;margin-bottom:6px;border-radius:5px;background:#1b2a4a}
.np-doc-l{display:block;height:7px;border-radius:4px;background:#dfe3eb}
.np-ct-chip{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px;background:#f1edfa;color:#5b3fa6;font:650 11.5px var(--ui)}.np-ct-chip .np-g{width:13px;height:13px}
.np-red{display:flex;flex-direction:column;gap:4px;font:600 11.5px/1.3 var(--ui)}
.np-red s{width:fit-content;color:#b02a5c;text-decoration:none;background:linear-gradient(#b02a5c,#b02a5c) left 55%/100% 1.5px no-repeat}
.np-red ins{width:fit-content;padding:1px 5px;border-radius:4px;background:#16794a14;color:#16794a;text-decoration:none}
.np-cmt{position:absolute;right:10px;bottom:14px;display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:12px;background:#fff;box-shadow:0 10px 24px -12px #10193570;font:600 11.5px var(--ui);color:var(--ink)}
.np-cmt .np-av{width:22px;height:22px;font-size:9px}.np-cmt em{font-style:normal;font-weight:700;color:#16794a}
.np-sigs{width:100%;margin-top:auto;overflow:visible}
.np-sig{fill:none;stroke:#1b2a4a;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.np-sig-line{fill:none;stroke:#c9cfdb;stroke-width:1.5}
.np-seal{position:absolute;right:12px;top:12px;display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:99px;background:#16794a;color:#fff;font:700 11.5px var(--ui)}.np-seal .np-g{width:13px;height:13px;stroke-width:2.6}
.np-repo{width:100%;max-width:240px;display:flex;flex-direction:column;gap:8px}
.np-repo-s{display:flex;align-items:center;gap:8px;margin:0;padding:9px 12px;border-radius:12px;background:#fff;border:1px solid #dfe3eb;font:500 12.5px var(--ui);color:var(--muted)}.np-repo-s .np-g{width:15px;height:15px}
.np-repo-r{display:grid;grid-template-columns:16px minmax(0,1fr);gap:2px 8px;margin:0;padding:9px 12px;border-radius:12px;background:#fff}
.np-repo-r .np-g{grid-row:1/3;width:16px;height:16px;color:#5b6e8d}
.np-repo-r b{font:600 12.5px/1.3 var(--ui);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-repo-r em{font:650 11px var(--ui);font-style:normal;color:#16794a}.np-repo-r.warn em{color:#9a6400}
.np-ct-then{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:36px}
.np-ct-then span{font:700 12px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:#b0832a}
.np-ct-then b{padding:9px 16px;border-radius:99px;background:var(--ink);color:#fff;font:600 14px var(--ui)}

/* 5 · follow-ups */
.np-fu-stage{position:relative;max-width:1240px;margin:0 auto}
.np-fu-track{position:absolute;left:calc(100% / 12);right:calc(100% / 12);top:45px;height:4px;border-radius:2px;background:#e3e6ee;overflow:hidden}
.np-fu-fill{display:block;height:100%;background:linear-gradient(90deg,var(--blue) 0 60%,#c27c0e 72% 82%,#16794a 94%);transform-origin:left}
.np-arm .np-fu-fill{animation:np-grow 2.4s linear .5s both;animation-play-state:paused}.np-go .np-fu-fill{animation-play-state:running}
.np-fu-stops{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.np-fu-stops>li{display:flex;flex-direction:column;align-items:center;text-align:center}
.np-fu-stops small{order:-1;height:22px;font:700 12.5px/22px var(--ui);color:var(--slate);white-space:nowrap}
.np-fu-dot{display:grid;place-items:center;width:30px;height:30px;margin:8px 0 14px;border-radius:50%;background:#fff;border:3px solid var(--blue);color:#fff}
.np-fu-dot .np-g{width:15px;height:15px;stroke-width:2.8}
.np-fu-stops .late .np-fu-dot{border-color:#c27c0e;background:#c27c0e}.np-fu-stops .done .np-fu-dot{border-color:#16794a;background:#16794a}
.np-fu-card{width:100%;padding:14px 10px;border-radius:18px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:8px}
.np-fu-stops .late .np-fu-card{border-color:#e8c98f}.np-fu-stops .done .np-fu-card{border-color:#9fd3b5}
.np-fu-ch{display:flex;gap:5px;justify-content:center}
.np-fu-ch span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px}.np-fu-ch .np-g{width:15px;height:15px}
.ch-app{background:#eaf1fa;color:var(--blue)}.ch-email{background:#f1edfa;color:var(--violet)}.ch-push{background:#fbf3e3;color:#9a6a1c}.ch-wa{background:#e8f6ee;color:#1d8a4e}.ch-ok{background:#e8f6ee;color:#16794a}
.np-fu-card b{font:650 13.5px/1.2 var(--ui);color:var(--ink)}
.np-fu-card em{padding:3px 8px;border-radius:99px;font:700 11px var(--ui);font-style:normal}
.np-fu-stops .late em{background:#b274001a;color:#8a5a00}.np-fu-stops .done em{background:#16794a14;color:#16794a}
.np-fu-ways{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:32px}
.np-fu-ways span{display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 8px;border-radius:99px;font:600 13.5px var(--ui)}.np-fu-ways .np-g{width:16px;height:16px}
.np-fu-ways b{margin-left:6px;padding:8px 15px;border-radius:99px;background:var(--ink);color:#fff;font:650 13.5px var(--ui)}

/* 6 · proof */
.np-pf-stage{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:center;max-width:1080px;margin:0 auto}
.np-pf-log{padding:22px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -45px #10193560}
.np-pf-log ol{position:relative;list-style:none;margin:0;padding:0}
.np-pf-log ol:before{content:"";position:absolute;left:17px;top:20px;bottom:20px;border-left:2px dashed #d5dae4}
.np-pf-log li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0}
.np-pf-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#eef1f6;color:#1b2a4a;box-shadow:0 0 0 3px #fff}
.np-pf-ic .np-g{width:16px;height:16px}
.np-pf-log li.ok .np-pf-ic{background:#16794a;color:#fff}
.np-pf-log li b{display:block;font:650 14.5px/1.3 var(--ui);color:var(--ink)}.np-pf-log li small{font:500 12.5px var(--ui);color:var(--slate)}
.np-pf-log li em{font:600 12px var(--ui);font-style:normal;color:var(--muted)}
.np-pf-file{display:flex;flex-direction:column;align-items:center;gap:14px}
.np-pf-page{position:relative;width:min(100%,290px);aspect-ratio:3/3.7;padding:26px 22px;border-radius:14px;background:#fff;box-shadow:0 30px 60px -36px #10193570;display:flex;flex-direction:column;gap:11px;transform:rotate(-2deg)}
.np-pf-page p{margin:0 0 6px;font:700 13px var(--ui);color:var(--ink)}
.np-pf-page i{display:block;height:7px;border-radius:4px;background:#e2e6ee}
.np-pf-stamp{position:absolute;right:16px;bottom:24px;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:2.5px solid #16794a;border-radius:10px;background:#ffffffe6;color:#16794a;font:800 14px var(--ui);letter-spacing:.06em;text-transform:uppercase;transform:rotate(-8deg)}
.np-pf-stamp .np-g{width:16px;height:16px;stroke-width:2.8}
.np-pf-name{display:flex;align-items:center;gap:6px;margin:0;font:600 13px var(--ui);color:var(--slate)}.np-pf-name .np-g{width:15px;height:15px}
.np-pf-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:99px;background:var(--action-dark);color:#fff;font:650 13.5px var(--ui)}.np-pf-btn .np-g{width:15px;height:15px}

/* 7 · dashboards, on navy */
.np-db{margin-inline:clamp(0px,1.4vw,22px);border-radius:clamp(28px,3vw,44px);background:var(--ink)}
.np-db .np-h{color:#fff}.np-db .np-l{color:#b9c1d6}.np-db .np-head-ic .nv-ic-l{stroke:#fff}
.np-db-app{max-width:1180px;margin:0 auto;padding:20px;border-radius:26px;background:#ffffff0b;border:1px solid #ffffff1c}
.np-db-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.np-db-top b{font:700 16px var(--ui);color:#fff}.np-db-top>span{margin-right:auto;font:500 13px var(--ui);color:#9aa4bf}
.np-db-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
.np-db-kpis>div{padding:16px 18px;border-radius:18px;background:#ffffff10}
.np-db-kpis b{display:block;font:750 34px/1.05 var(--font);letter-spacing:-.03em;color:#fff}.np-db-kpis span{font:600 13px var(--ui);color:#aeb7cc}
.np-db-kpis .g b{color:#7fd3a8}.np-db-kpis .a b{color:#f2c46b}.np-db-kpis .r b{color:#f59ab8}
.np-db-grid{display:grid;grid-template-columns:1.3fr 1fr 1.1fr;gap:12px}
.np-db-card{padding:16px 18px;border-radius:18px;background:#ffffff10}
.np-db-card>p{margin:0 0 12px;font:650 13.5px var(--ui);color:#d5dbea}
.np-db-bar{display:grid;grid-template-columns:92px minmax(0,1fr) 38px;gap:10px;align-items:center;margin-top:10px;font:600 12.5px var(--ui);color:#c7cee0}
.np-db-bar i{height:8px;border-radius:4px;background:#ffffff16;overflow:hidden}
.np-db-bar u{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#4f8fd6,#7fd3a8);transform-origin:left}
.np-db-bar b{text-align:right;color:#fff}
.np-db-donut{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0 16px;align-items:center}
.np-db-donut>p{grid-column:1/3}
.np-db-donut svg{width:120px;height:120px}
.np-dn-bg{fill:none;stroke:#ffffff14;stroke-width:14}
.np-dn{fill:none;stroke-width:14;transform:rotate(-90deg);transform-origin:60px 60px}
.np-dn.g{stroke:#7fd3a8}.np-dn.b{stroke:#4f8fd6}.np-dn.a{stroke:#f2c46b}.np-dn.r{stroke:#f59ab8}
.np-dn-n{fill:#fff;font:750 22px var(--font);text-anchor:middle}.np-dn-t{fill:#9aa4bf;font:600 9px var(--ui);text-anchor:middle}
.np-db-donut ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.np-db-donut li{display:flex;align-items:center;gap:8px;font:600 12.5px var(--ui);color:#c7cee0}.np-db-donut li b{margin-left:auto;color:#fff}
.np-db-donut li i{width:9px;height:9px;border-radius:3px}
.np-db-donut i.g{background:#7fd3a8}.np-db-donut i.b{background:#4f8fd6}.np-db-donut i.a{background:#f2c46b}.np-db-donut i.r{background:#f59ab8}
.np-db-row{display:grid;grid-template-columns:28px minmax(0,1fr) 10px;gap:10px;align-items:center;padding:9px 0;border-top:1px solid #ffffff12}
.np-db-late>p+.np-db-row{border-top:0}
.np-db-row b{display:block;font:600 13px/1.3 var(--ui);color:#fff}.np-db-row small{font:500 12px var(--ui);color:#9aa4bf}
.np-db-row>i{width:9px;height:9px;border-radius:50%}.np-db-row>i.r{background:#f59ab8}.np-db-row>i.a{background:#f2c46b}.np-db-row>i.b{background:#4f8fd6}

/* 8 · teams */
.np-tm-wrap{max-width:820px;margin:0 auto}
.np-tm-tabs{display:flex;gap:4px;width:fit-content;max-width:100%;margin:0 auto 18px;padding:5px;border-radius:99px;background:#fff;border:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.np-tm-tabs::-webkit-scrollbar{display:none}
.np-tm-tabs button{flex:none;border:0;background:none;padding:9px 16px;border-radius:99px;font:650 14px var(--ui);color:var(--slate);cursor:pointer;transition:background .2s,color .2s}
.np-tm-tabs button.on{background:var(--ink);color:#fff}
.np-tm-card{min-height:250px;padding:22px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -45px #10193560}
.np-tm-row{animation:np-in .5s var(--ease) var(--d,0s) both}

/* 9 · connected and secure */
.np-sc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1080px;margin:0 auto}
.np-sc-card{padding:24px;border-radius:24px;background:#fff;border:1px solid var(--line)}
.np-sc-tools{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.np-sc-tools li{display:grid;place-items:center;aspect-ratio:1.45;border-radius:16px;background:#f6f7fa}
.np-sc-tools img{width:34px;height:34px;object-fit:contain}
.np-sc-safe{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.np-sc-safe li{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;background:#f6f7fa;font:600 14.5px var(--ui);color:var(--ink)}
.np-sc-safe span{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;background:#fff;color:#1b2a4a}
.np-sc-link{display:inline-flex;align-items:center;gap:6px;font:650 13px var(--ui);color:var(--blue)}.np-sc-link .ico{width:14px;height:14px}

@media(max-width:1180px){
 .np-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
 .np-cap-stage{grid-template-columns:200px 160px minmax(0,1fr)}
 .np-cap-mid{transform:scaleX(.8);transform-origin:left}
 .np-ai-stage{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .np-chat{grid-column:1/3;grid-row:1;max-width:600px;width:100%;justify-self:center}
 .np-ai-chip.c0,.np-ai-chip.c1,.np-ai-chip.c2,.np-ai-chip.c3{grid-column:auto;grid-row:auto;justify-self:stretch;max-width:none}
 .np-ct-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
 .np-db-grid{grid-template-columns:1fr 1fr}.np-db-late{grid-column:1/3}
}
@media(max-width:760px){
 .np{padding-block:56px}
 .np-head-ic .np-ic{width:42px;height:42px;margin-bottom:10px}
 .np-h{font-size:clamp(30px,8.6vw,40px)}
 .np-l{font-size:15.5px}
 .np-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .np-tile{padding:16px 6px 10px;border-radius:16px;gap:6px}.np-tile .np-ic{width:34px;height:34px}.np-tile b{font-size:12.5px}
 .np-cap-stage{grid-template-columns:1fr}
 .np-cap-src{flex-direction:row;flex-wrap:wrap;justify-content:center;padding:0;gap:8px}
 .np-cap-src li{height:38px;padding:0 12px;font-size:13px;gap:7px}.np-cap-src .np-g{width:16px;height:16px}
 .np-cap-mid{height:84px;transform:none}.np-cap-wires{display:none}
 .np-cap-mid:before{content:"";position:absolute;left:50%;top:6px;bottom:6px;border-left:2px dashed #c9d2e2}
 .np-hub{left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px}.np-hub svg{width:28px;height:28px}
 .np-cap-list{padding:14px;border-radius:20px}
 .np-row{grid-template-columns:30px minmax(0,1fr) auto;gap:10px;padding:9px 10px}.np-row em{grid-column:2/4;grid-row:2;text-align:left;margin-top:-4px}
 .np-row .np-av{grid-column:3;grid-row:1}.np-row-src{width:30px;height:30px;grid-row:1/3}
 .np-row b{font-size:13.5px;white-space:normal}
 .np-chat{padding:14px 14px 12px;border-radius:22px}
 .np-ai-chip{padding:12px;gap:2px 8px}.np-ai-chip .np-g{width:18px;height:18px}.np-ai-chip b{font-size:14px}.np-ai-chip span{font-size:11.5px}
 .np-ans-row{grid-template-columns:26px minmax(0,1fr)}.np-ans-row .np-chip{grid-column:2;width:fit-content}
 .np-wf-top{flex-wrap:wrap;gap:10px}.np-wf-name{display:none}.np-wf-pub{margin-left:auto}
 .np-wf-tabs span{padding:6px 9px;font-size:12px}
 .np-wf-body{grid-template-columns:1fr}
 .np-wf-pal{flex-direction:row;overflow-x:auto;padding:10px;border-right:0;border-bottom:1px solid var(--line);scrollbar-width:none}.np-wf-pal li{flex:none}
 .np-wf-canvas{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px;min-height:0;margin:10px;padding:16px 12px}
 .np-wf-edges{display:none}
 .np-wf-node{position:relative;left:auto;top:auto;width:auto;min-width:0;margin:0;grid-column:1/3}
 .np-wf-node.n-a{grid-column:1}.np-wf-node.n-b{grid-column:2}
 .np-wf-node:not(.n-t):before{content:"";position:absolute;left:50%;top:-15px;height:14px;border-left:2px solid #aab6cc}
 .np-ct-steps{grid-template-columns:1fr;gap:26px}
 .np-ct-pic{height:220px}
 .np-ct-then b{font-size:13px;padding:8px 13px}
 .np-fu-track{display:none}
 .np-fu-stops{grid-template-columns:1fr;gap:10px}
 .np-fu-stops>li{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:14px;align-items:center;text-align:left}
 .np-fu-stops small{order:0;grid-column:2;height:auto;line-height:1.3}
 .np-fu-dot{grid-column:1;grid-row:1/3;margin:0}
 .np-fu-card{grid-column:2;flex-direction:row;justify-content:flex-start;padding:10px 12px;gap:10px}
 .np-fu-card em{margin-left:auto}
 .np-fu-ways{gap:8px}.np-fu-ways b{margin-left:0}
 .np-pf-stage{grid-template-columns:1fr}
 .np-pf-log{padding:16px}.np-pf-log li{grid-template-columns:34px minmax(0,1fr) auto;gap:10px}
 .np-pf-page{width:min(100%,250px)}
 .np-db{margin-inline:10px;border-radius:28px}
 .np-db-app{padding:12px;border-radius:20px}
 .np-db-top{flex-wrap:wrap}.np-db-top .ask-ai{display:none}
 .np-db-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.np-db-kpis>div{padding:12px 14px}.np-db-kpis b{font-size:28px}
 .np-db-grid{grid-template-columns:1fr;gap:8px}.np-db-late{grid-column:auto}
 .np-db-bar{grid-template-columns:84px minmax(0,1fr) 36px}
 .np-tm-tabs{border-radius:16px}
 .np-tm-tabs button{padding:8px 12px;font-size:13px}
 .np-tm-card{padding:14px;border-radius:20px}
 .np-sc-grid{grid-template-columns:1fr;gap:12px}.np-sc-card{padding:16px}
 .np-sc-tools img{width:28px;height:28px}
 .np-sc-safe li{font-size:13.5px;padding:9px 12px}
}
/* np fixes after the first look (11 Oct) */
.np-ai-chip.c0,.np-ai-chip.c2{align-self:end}.np-ai-chip.c1,.np-ai-chip.c3{align-self:start}
.np-seal{left:0;right:0;top:40%;width:fit-content;margin:auto}
.np-db-live{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;background:#7fd3a81a;color:#7fd3a8;font:700 12px var(--ui);font-style:normal}
.np-db-live i{width:7px;height:7px;border-radius:50%;background:#7fd3a8;box-shadow:0 0 0 4px #7fd3a826}
.np-db-card:first-child{display:flex;flex-direction:column;justify-content:space-between}
.np-db-card:first-child .np-db-bar{margin-top:0}
.np-row{grid-template-columns:34px minmax(0,1fr) auto minmax(64px,auto)}
@media(max-width:1180px){.np-ai-chip.c0,.np-ai-chip.c1,.np-ai-chip.c2,.np-ai-chip.c3{align-self:stretch}}
@media(max-width:760px){.np-row{grid-template-columns:30px minmax(0,1fr) auto}}
.np-db-card:first-child{gap:10px}

/* ============ Industry chapters (owner, 11 Oct: longer industry pages — contracts first, then matters, the reports they produce,
   and the money): copy on one side, one picture on the other, sides alternate. Motion via the np-arm / np-go classes. ============ */
.ich{padding-block:clamp(48px,8vh,96px)}
.ich-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,5vw,80px);align-items:center}
.ich.flip .ich-copy{order:2}
.ich-copy h2{margin:0;font-size:clamp(30px,3.4vw,50px);font-weight:500;letter-spacing:-.045em;line-height:1.06;color:var(--ink)}
.ich-copy p{margin-top:16px;max-width:44ch;font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:var(--slate)}
.ich-card{padding:clamp(18px,2vw,26px);border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:0 34px 70px -50px #10193570}
.ich-card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;font:700 15px var(--ui);color:var(--ink)}
.ich-card-h span{font:600 12px var(--ui);color:var(--muted)}
.ich-types{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.ich-types span{padding:7px 13px;border-radius:99px;background:#f2f4f8;font:600 13px var(--ui);color:var(--slate)}
.ich-types span.on{background:var(--ink);color:#fff}
.ich-flow{position:relative;list-style:none;margin:0;padding:0}
.ich-flow:before{content:"";position:absolute;left:15px;top:18px;bottom:18px;border-left:2px solid #e3e6ee}
.ich-flow li{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:14px;align-items:center;padding:8px 0}
.ich-dot{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#16794a;box-shadow:0 0 0 4px #fff}
.ich-dot svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ich-flow b{font:650 15px/1.3 var(--ui);color:var(--ink)}
.ich-flow small{font:500 13px var(--ui);color:var(--slate);text-align:right}
.ich-then,.ich-ai,.ich-auto,.ich-done{display:flex;align-items:center;gap:10px;margin:16px 0 0;padding:12px 14px;border-radius:14px;background:#f4f2fb;font:600 13.5px/1.4 var(--ui);color:#4b3a8c}
.ich-then .ai-mark,.ich-ai .ai-mark{flex:none}
.ich-m{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:12px 14px 12px 16px;border-radius:16px;border:1px solid var(--line);border-left:4px solid var(--tone);background:#fff}
.ich-m+.ich-m{margin-top:8px}
.ich-m-src{grid-column:1/3;font:700 10.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--tone)}
.ich-m b{font:650 15px/1.3 var(--ui);color:var(--ink)}
.ich-m small{grid-column:1;font:500 13px var(--ui);color:var(--slate)}
.ich-m em{grid-column:2;grid-row:2/4;align-self:center;padding:6px 11px;border-radius:99px;background:color-mix(in srgb,var(--tone) 12%,#fff);color:var(--tone);font:700 12px var(--ui);font-style:normal;white-space:nowrap}
.ich-report{background:var(--ink);border-color:var(--ink)}
.ich-report .ich-card-h{color:#fff}.ich-report .ich-card-h span{color:#9aa4bf}
.ich-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ich-kpis>div{padding:14px 16px;border-radius:16px;background:#ffffff10}
.ich-kpis b{display:block;font:750 32px/1.05 var(--font);letter-spacing:-.03em;color:#fff}
.ich-kpis span{font:600 12.5px/1.3 var(--ui);color:#aeb7cc}
.ich-kpis .a b{color:#f2c46b}.ich-kpis .g b{color:#7fd3a8}
.ich-bars-h{margin:18px 0 4px;font:650 13px var(--ui);color:#d5dbea}
.ich-bar{display:grid;grid-template-columns:120px minmax(0,1fr) 40px;gap:10px;align-items:center;margin-top:10px;font:600 13px var(--ui);color:#c7cee0}
.ich-bar i{height:9px;border-radius:5px;background:#ffffff16;overflow:hidden}
.ich-bar u{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#4f8fd6,#7fd3a8);transform-origin:left}
.ich-bar b{text-align:right;color:#fff}
.ich-report .ich-auto{background:#ffffff12;color:#d5dbea}
.ich-auto svg,.ich-done svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ich-pay ol{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.ich-pay ol:before{content:"";position:absolute;left:10%;right:10%;top:18px;border-top:2px solid #e3e6ee}
.ich-pay li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.ich-pay .ich-dot{width:38px;height:38px;background:var(--blue)}
.ich-pay li.last .ich-dot{background:#16794a}
.ich-pay li b{margin-top:6px;font:650 14px/1.25 var(--ui);color:var(--ink)}
.ich-pay li small{font:500 12px/1.35 var(--ui);color:var(--slate)}
.ich-done{justify-content:center;background:#e8f6ee;color:#16794a}
@media(max-width:900px){
 .ich-grid{grid-template-columns:1fr;gap:26px}
 .ich.flip .ich-copy{order:0}
}
@media(max-width:620px){
 .ich-copy h2{font-size:clamp(28px,8vw,36px)}
 .ich-card{border-radius:22px;padding:16px}
 .ich-flow li{grid-template-columns:32px minmax(0,1fr);gap:2px 12px}.ich-flow small{grid-column:2;text-align:left}
 .ich-flow li .ich-dot{grid-row:1/3}
 .ich-kpis b{font-size:26px}.ich-kpis>div{padding:12px}
 .ich-bar{grid-template-columns:96px minmax(0,1fr) 34px}
 .ich-pay ol{grid-template-columns:1fr;gap:12px}
 .ich-pay ol:before{left:18px;right:auto;top:20px;bottom:20px;border-top:0;border-left:2px solid #e3e6ee}
 .ich-pay li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:0 12px;text-align:left;align-items:center}
 .ich-pay li .ich-dot{grid-row:1/3}.ich-pay li b{margin:0}
}
.ich.flip .ich-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.ich-rs{font:700 18px/1 var(--ui);color:#fff}
@media(max-width:900px){.ich.flip .ich-grid{grid-template-columns:1fr}}
.ich-kpis span,.np-db-kpis span{display:block;line-height:1.3}

/* ============ Navio OS page, round 2 (owner, 11 Oct): ten index tiles, eight teams with centred tabs, tools that flip like an
   airport board, the adaptive block under Workflows, Reports your way, and Other modules above How you start ============ */
.np-tiles{grid-template-columns:repeat(10,minmax(0,1fr));max-width:1360px}
@keyframes np-rise{from{transform:scaleY(0)}to{transform:none}}
@keyframes np-flapin{0%{transform:rotateX(88deg);opacity:.15}62%{transform:rotateX(-14deg);opacity:1}100%{transform:none;opacity:1}}
.np-arm .np-rise{animation:np-rise .9s var(--ease) var(--d,0s) both;animation-play-state:paused}.np-go .np-rise{animation-play-state:running}
/* teams: eight, the tab row centred and wrapping evenly */
.np-tm-wrap{max-width:980px}
.np-tm-tabs{flex-wrap:wrap;justify-content:center;border-radius:24px;overflow:visible}
.np-tm-card{max-width:820px;margin-inline:auto}
/* tools: split-flap tiles */
.np-sc-tools li{position:relative;perspective:420px;overflow:hidden}
.np-sc-tools li:after{content:"";position:absolute;left:8px;right:8px;top:50%;border-top:1px solid #1019350d;pointer-events:none}
.np-flap{display:grid;place-items:center;width:100%;height:100%;transform-origin:50% 50%;backface-visibility:hidden;animation:np-flapin .6s cubic-bezier(.3,.6,.3,1) both}
/* workflows: adaptive, not a fixed box */
.np-adapt{max-width:1180px;margin:18px auto 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:18px;align-items:center;padding:20px 22px;border-radius:24px;background:#eef1f6}
.np-adapt-h b{display:block;font:750 22px/1.15 var(--font);letter-spacing:-.025em;color:var(--ink)}
.np-adapt-h span{display:block;margin-top:6px;font:500 14px/1.45 var(--ui);color:var(--slate)}
.np-adapt ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.np-adapt li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:center;padding:12px;border-radius:16px;background:#fff}
.np-adapt li>span{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eef1f6;color:#1b2a4a}
.np-adapt li b{font:650 14px/1.2 var(--ui);color:var(--ink)}.np-adapt li small{font:500 12px/1.35 var(--ui);color:var(--slate)}
/* reports, your way */
.np-rp-app{max-width:1180px;margin:0 auto;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -55px #10193570;overflow:hidden}
.np-rp-top{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.np-rp-top>b{font:700 15px var(--ui);color:var(--ink)}
.np-rp-tag{padding:5px 10px;border-radius:99px;background:#f1edfa;color:#5b3fa6;font:650 11.5px var(--ui)}
.np-rp-acts{display:flex;gap:6px;margin-left:auto}
.np-rp-acts span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:99px;border:1px solid var(--line);font:650 12.5px var(--ui);color:var(--ink)}
.np-rp-acts span.on{background:var(--ink);border-color:var(--ink);color:#fff}.np-rp-acts .np-g{width:14px;height:14px}
.np-rp-body{display:grid;grid-template-columns:270px minmax(0,1fr)}
.np-rp-build{display:flex;flex-direction:column;gap:10px;padding:16px;border-right:1px solid var(--line);background:#fbfbfc}
.np-rp-f{padding:10px 12px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.np-rp-f small{display:block;margin-bottom:6px;font:700 10px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.np-rp-f div{display:flex;flex-wrap:wrap;gap:5px}
.np-rp-f span{padding:5px 9px;border-radius:8px;background:#eaf1fa;color:var(--blue);font:650 12px var(--ui)}
.np-rp-view{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:18px}
.np-rp-chart{display:flex;align-items:flex-end;justify-content:space-around;gap:10px;height:230px;padding:14px 10px 8px;border-radius:16px;background:#f6f7fa}
.np-rp-chart>div{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%}
.np-rp-chart i{flex:1;width:100%;max-width:34px;display:flex;align-items:flex-end}
.np-rp-chart u{display:block;width:100%;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#f2c46b,#c27c0e);transform-origin:bottom}
.np-rp-chart b{font:750 15px var(--ui);color:var(--ink)}.np-rp-chart span{font:600 10.5px var(--ui);color:var(--slate);white-space:nowrap}
.np-rp-table p{display:grid;grid-template-columns:minmax(0,1.4fr) .6fr .8fr;gap:8px;margin:0;padding:10px 12px;border-bottom:1px solid var(--line);font:600 13.5px var(--ui);color:var(--ink)}
.np-rp-table p.hd{font:700 11px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.np-rp-table p span:nth-child(n+2){text-align:right}
.np-rp-toast{display:flex;align-items:center;gap:8px;width:fit-content;margin:0 18px 18px auto;padding:10px 14px;border-radius:99px;background:#e8f6ee;color:#16794a;font:650 13px var(--ui)}
.np-rp-toast .np-g{width:16px;height:16px;stroke-width:2.4}
/* other modules: small and plain */
.np-mod{padding-block:clamp(40px,7vh,80px)}
.np-mod-box{max-width:860px;margin:0 auto;padding:clamp(22px,3vw,34px);border-radius:28px;background:#fff;border:1px solid var(--line);text-align:center}
.np-mod-box h2{margin:0;font:750 clamp(24px,2.4vw,34px)/1.1 var(--font);letter-spacing:-.035em;color:var(--ink)}
.np-mod-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:18px auto 0}
.np-mod-tabs button{border:1px solid var(--line);background:#fff;padding:9px 18px;border-radius:99px;font:650 14px var(--ui);color:var(--slate);cursor:pointer}
.np-mod-tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.np-mod-panel{margin-top:22px;animation:np-in .4s var(--ease) both}
.np-mod-panel>p:first-child{font:600 clamp(17px,1.5vw,20px)/1.4 var(--ui);color:var(--ink)}
.np-mod-panel ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.np-mod-panel li{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:99px;background:#f4f5f9;font:600 13.5px var(--ui);color:var(--ink)}
.np-mod-panel li .np-g{width:15px;height:15px;color:#16794a;stroke-width:2.4}
.np-mod-sync{display:inline-flex;align-items:center;gap:8px;margin:16px auto 0;padding:9px 16px;border-radius:14px;background:#fbf3e3;color:#7a5410;font:500 13px var(--ui)}
.np-mod-sync b{font-weight:700}.np-mod-sync .np-g{width:16px;height:16px;color:#c27c0e}
@media(max-width:1180px){
 .np-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
 .np-adapt{grid-template-columns:1fr}
 .np-adapt ul{grid-template-columns:repeat(2,minmax(0,1fr))}
 .np-rp-body{grid-template-columns:230px minmax(0,1fr)}.np-rp-view{grid-template-columns:1fr}
}
@media(max-width:760px){
 .np-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .np-tile{flex-direction:row;justify-content:flex-start;gap:10px;padding:10px 12px;text-align:left}
 .np-tile .np-ic{width:30px;height:30px;flex:none}.np-tile b{min-height:0;display:block;font-size:13px}.np-tile-go{display:none}
 .np-tm-tabs{gap:4px;padding:5px;border-radius:20px}
 .np-tm-tabs button{padding:8px 11px;font-size:12.5px}
 .np-adapt{padding:14px;border-radius:20px}.np-adapt-h b{font-size:19px}
 .np-adapt ul{grid-template-columns:1fr}
 .np-rp-top{flex-wrap:wrap}.np-rp-acts{margin-left:0;width:100%}
 .np-rp-body{grid-template-columns:1fr}.np-rp-build{border-right:0;border-bottom:1px solid var(--line);padding:12px}
 .np-rp-view{padding:12px}.np-rp-chart{height:190px}
 .np-rp-toast{margin:0 12px 12px;width:auto;border-radius:14px;font-size:12.5px}
 .np-mod-box{border-radius:22px}
 .np-mod-tabs button{padding:8px 14px;font-size:13px}
 .np-mod-sync{flex-wrap:wrap;justify-content:center;text-align:center}
}
.np-sc-tools img.w{width:76%;height:auto;max-height:26px}
@media(max-width:760px){.np-mod-tabs{gap:4px}.np-mod-tabs button{padding:8px 11px;font-size:12.5px}}

/* ============ Navio OS page, round 3 (owner, 11 Oct): Capture, Navio AI and Workflows become interactive ============ */
.np-swap{animation:np-in .45s var(--ease) var(--d,0s) both}
/* capture: tap a source */
.np-cap-left{position:relative}
.np-cap-src li{padding:0;border:0;background:none;box-shadow:none}
.np-cap-src button{display:flex;align-items:center;gap:10px;width:100%;height:100%;padding:0 14px 0 16px;border-radius:14px;border:1px solid var(--line);background:#fff;font:600 14px var(--ui);color:var(--ink);cursor:pointer;box-shadow:0 10px 20px -18px #10193540;transition:background .2s,color .2s,border-color .2s}
.np-cap-src button:hover{border-color:#b9c3d6}
.np-cap-src button i{display:grid;margin-left:auto;opacity:0;transform:rotate(-90deg);color:#d4a03c;transition:opacity .2s}
.np-cap-src button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.np-cap-src button[aria-pressed=true] .np-g{color:#fff}.np-cap-src button[aria-pressed=true] i{opacity:1}.np-cap-src button[aria-pressed=true] i .np-g{color:#d4a03c}
.np-cap-hint{position:absolute;left:0;right:0;top:calc(100% + 6px);margin:0;text-align:center;font:600 12.5px var(--ui);color:var(--muted)}
.np-cap-hint button{border:0;background:none;padding:0;font:inherit;color:var(--blue);cursor:pointer}
.np-wire{transition:stroke .3s,stroke-width .3s,opacity .3s}
.np-wire.on{stroke:#d4a03c;stroke-width:3}.np-wire.dim{opacity:.28}
.np-pulse{transition:opacity .3s}.np-pulse.dim{opacity:0}.np-pulse.on{stroke-width:4.5}
.np-hub{transition:box-shadow .3s}.np-hub.on{box-shadow:0 0 0 10px #d4a03c30,0 16px 30px -12px #10193580}
.np-cap-list{min-height:476px}
.np-cap-snip{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;padding:11px 13px;border-radius:14px;background:#fbf6ea;border:1px dashed #e2c98f;font:500 13px/1.45 var(--ui);color:#5b4512;animation:np-in .4s var(--ease) both}
.np-cap-snip .np-g{width:16px;height:16px;margin-top:1px;color:#9a6a1c}
/* Navio AI: actions on the left, a chat that types by itself */
.np-ai-stage{grid-template-columns:240px minmax(0,600px);grid-template-rows:none;justify-content:center;align-items:start;gap:24px;max-width:none}
.np-ai-acts{display:flex;flex-direction:column;gap:8px;padding-top:58px}
.np-ai-acts button{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:#fff;font:650 14px var(--ui);color:var(--ink);cursor:pointer;text-align:left;transition:background .2s,color .2s,border-color .2s}
.np-ai-acts button:hover{border-color:#b9c3d6}
.np-ai-acts .np-g{color:var(--violet)}
.np-ai-acts button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}.np-ai-acts button[aria-pressed=true] .np-g{color:#d4a03c}
.np-chat{grid-column:auto;grid-row:auto;display:flex;flex-direction:column}
.np-chat-body{min-height:392px;display:flex;flex-direction:column}
.np-chat-empty{margin:auto;display:flex;align-items:center;gap:8px;font:500 14px var(--ui);color:var(--muted)}.np-chat-empty .np-g{color:var(--violet)}
.np-q-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:6px;animation:np-in .35s var(--ease) both}
.np-q-wrap .np-q{margin-left:0}
.np-att{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:12px;background:#f1edfa;color:#5b3fa6;font:650 12.5px var(--ui)}.np-att .np-g{width:15px;height:15px}
.np-att-in{align-self:flex-start;margin-top:12px;animation:np-in .35s var(--ease) both}
.np-typing2{display:flex;gap:4px;width:fit-content;margin-top:14px;padding:13px 15px;border-radius:16px 16px 16px 4px;background:#f4f5f9}
.np-typing2 i{width:7px;height:7px;border-radius:50%;background:#9aa3b8;animation:np-dot 1s infinite}.np-typing2 i:nth-child(2){animation-delay:.15s}.np-typing2 i:nth-child(3){animation-delay:.3s}
.np-chat .np-ans{min-height:0;animation:np-in .4s var(--ease) both}
.np-ans-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.np-ans-acts span{padding:7px 12px;border-radius:99px;border:1px solid var(--line);background:#fff;font:650 12.5px var(--ui);color:var(--ink)}
.np-ans-acts span.pri{background:var(--ink);border-color:var(--ink);color:#fff}
.np-alert{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border-radius:14px;background:#fff}
.np-alert-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#fbf3e3;color:#9a6a1c}
.np-alert b{display:block;font:650 14px/1.3 var(--ui);color:var(--ink)}.np-alert small{font:500 12.5px var(--ui);color:var(--slate)}
.np-tog{position:relative;display:inline-block;flex:none;width:34px;height:20px;border-radius:99px;background:#16794a}
.np-tog:after{content:"";position:absolute;right:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff}
.np-alert-to{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.np-alert-to span{padding:6px 10px;border-radius:99px;background:#eaf1fa;color:var(--blue);font:650 12px var(--ui)}
.np-draft{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;background:#fff}
.np-draft b{font:700 13.5px var(--ui);color:var(--ink)}.np-draft i{display:block;height:7px;border-radius:4px;background:#e2e6ee}.np-draft small{font:500 12px var(--ui);color:var(--muted)}
.np-sum{list-style:none;margin:0;padding:12px;border-radius:14px;background:#fff;display:flex;flex-direction:column;gap:8px}
.np-sum li{display:flex;align-items:center;gap:8px;font:600 13.5px var(--ui);color:var(--ink)}.np-sum .np-g{width:15px;height:15px;color:#16794a;stroke-width:2.4}
.np-ask-in{position:relative;gap:10px}
.np-ask-clip{display:grid;color:var(--muted)}.np-ask-clip .np-g{width:17px;height:17px}
.np-ask-txt{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.np-ask-in.typing .np-ask-txt{color:var(--ink)}
.np-caret{display:inline-block;width:2px;height:16px;margin-left:2px;vertical-align:-3px;background:var(--violet);animation:np-blink 1s steps(1) infinite}
@keyframes np-blink{50%{opacity:0}}
.np-ask-in i{background:#c3c9d6;transition:background .2s}.np-ask-in i.go{background:var(--ink)}
.np-ask-in.drop{border:2px dashed var(--violet);background:#f6f3fd}
.np-drop-hint{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:99px;background:#f6f3fdee;font:650 13.5px var(--ui);color:var(--violet)}
.np-drop-hint .np-g{width:16px;height:16px}
.np-drop-file{position:absolute;right:34px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:#fff;box-shadow:0 18px 30px -12px #10193566;font:650 13px var(--ui);color:var(--ink);white-space:nowrap;animation:np-dropin 1.7s var(--ease) both}
.np-drop-file .np-g{color:#b02a5c}
@keyframes np-dropin{0%{opacity:0;transform:translate(140px,-170px) rotate(10deg)}25%{opacity:1}68%{transform:translate(0,-8px) rotate(-2deg)}84%{opacity:1;transform:none}100%{opacity:0;transform:scale(.6)}}
/* workflows: tabs, a template dropdown, clickable blocks, steps and rules */
.np-wf-tabs button{border:0;background:none;padding:7px 12px;border-radius:9px;font:600 13px var(--ui);color:var(--slate);cursor:pointer}
.np-wf-tabs button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px #10193520}
.np-wf-dd{position:relative}
.np-wf-ddb{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:#fff;font:650 13px var(--ui);color:var(--ink);cursor:pointer}
.np-wf-ddb.on{border-color:var(--ink)}.np-wf-ddb i{display:grid}.np-wf-ddb .np-g{width:14px;height:14px}
.np-wf-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:6;list-style:none;margin:0;padding:6px;min-width:270px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 40px -20px #10193566}
.np-wf-menu button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:none;cursor:pointer;text-align:left}
.np-wf-menu b{font:650 13.5px var(--ui);color:var(--ink)}.np-wf-menu small{font:600 11.5px var(--ui);color:var(--muted);white-space:nowrap}
.np-wf-menu button.on,.np-wf-menu button:hover{background:#f2f4f8}
.np-wf-app{overflow:visible}.np-wf-top{border-radius:26px 26px 0 0}
.np-wf-pal li{padding:0;border:0;background:none}
.np-wf-pal button{display:flex;align-items:center;gap:8px;width:100%;padding:10px;border-radius:12px;border:1px solid var(--line);background:#fff;font:600 13px var(--ui);color:var(--ink);cursor:pointer;text-align:left}
.np-wf-pal button:hover{border-color:#b9c3d6}.np-wf-pal button.on{border-color:var(--ink);box-shadow:0 0 0 3px #10193514}
.np-wf-canvas{min-height:440px}
.np-wf-node{font:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none}
.np-wf-node:hover{border-color:#8fa3c4}
.np-wf-node.on{border-color:var(--ink)!important;box-shadow:0 0 0 4px #10193522!important}
.np-wf-hint{position:absolute;right:14px;bottom:12px;margin:0;font:600 12px var(--ui);color:var(--muted)}
.np-wf-insp{position:absolute;top:14px;right:14px;z-index:3;width:min(300px,calc(100% - 28px));padding:14px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 40px -20px #10193566;animation:np-in .3s var(--ease) both;text-align:left}
.np-wf-insp-h{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:start}
.np-wf-insp-h small{grid-column:1;font:700 10px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.np-wf-insp-h b{grid-column:1;font:700 15px/1.3 var(--ui);color:var(--ink)}
.np-wf-insp-h button{grid-column:2;grid-row:1/3;width:28px;height:28px;border:0;border-radius:50%;background:#f2f4f8;font:600 17px/1 var(--ui);color:var(--slate);cursor:pointer}
.np-wf-insp ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.np-wf-insp li{display:flex;align-items:center;gap:10px;font:500 13px/1.35 var(--ui);color:var(--ink)}
.np-wf-insp p{display:flex;align-items:center;gap:6px;margin:12px 0 0;font:650 12px var(--ui);color:var(--violet)}.np-wf-insp p .np-g{width:14px;height:14px}
.np-wf-canvas.pb{background:#fff;background-image:none;border:1px solid var(--line)}
.np-pb{padding:18px}
.np-pb-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.np-pb-h b{font:700 16px var(--ui);color:var(--ink)}.np-pb-h span{font:600 12px var(--ui);color:var(--muted)}
.np-pb-row{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:10px;align-items:center;width:100%;margin-top:8px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;text-align:left;font:600 13px var(--ui);color:var(--ink);cursor:pointer}
.np-pb-row.hd{margin-top:0;padding:0 14px 2px;border:0;background:none;cursor:default;font:700 10.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.np-pb-row b{font-weight:700}.np-pb-row .g{color:#16794a}.np-pb-row .a{color:#9a6400}.np-pb-row .r{color:#b02a5c}
.np-pb-row:not(.hd):hover{border-color:#b9c3d6}.np-pb-row.on{border-color:var(--ink);box-shadow:0 0 0 3px #10193514}
.np-wf-canvas.pb .np-wf-insp{position:relative;top:auto;right:auto;width:auto;margin:0 18px 18px}
.np-wf-canvas.pb .np-wf-hint{position:static;padding:0 18px 16px;text-align:right}
@media(max-width:1180px){
 .np-ai-stage{grid-template-columns:220px minmax(0,1fr)}
 .np-chat{grid-column:auto;grid-row:auto;max-width:none}
}
@media(max-width:760px){
 .np-cap-src li{height:38px;padding:0}
 .np-cap-src button{padding:0 12px;font-size:13px;gap:7px}.np-cap-src button i{display:none}
 .np-cap-hint{position:static;margin-top:10px}
 .np-cap-list{min-height:0}
 .np-ai-stage{grid-template-columns:1fr;gap:14px}
 .np-ai-acts{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px;padding-top:0}
 .np-ai-acts button{padding:8px 11px;font-size:12.5px;gap:6px}.np-ai-acts .np-g{width:15px;height:15px}
 .np-chat-body{min-height:380px}
 .np-drop-file{right:12px}
 .np-wf-top{gap:8px}
 .np-wf-menu{left:auto;right:0;min-width:240px}
 .np-wf-canvas.pb{display:block}
 .np-wf-insp{position:relative;top:auto;right:auto;grid-column:1/3;width:auto}
 .np-wf-hint{position:static;grid-column:1/3;text-align:center}
 .np-pb{padding:12px}
 .np-pb-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 8px;padding:10px 12px;font-size:12px}
 .np-pb-row b{grid-column:1/4;font-size:13.5px}.np-pb-row.hd{display:none}
}

/* ============ Navio OS page, round 4 (owner, 11 Oct): before / during / after contracts, icons in follow-ups, clickable proof with
   attachments, a download you can see, and moving screens in Other modules ============ */
/* contracts: three phases */
.np-ct3{position:relative;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:1240px}
.np-ct3:before{content:"";position:absolute;left:0;right:0;top:8px;border-top:2px dashed #e2c98f}
.np-ct-k{position:relative;width:fit-content;margin-bottom:12px;padding-right:12px;background:var(--bg);font:800 12px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:#b0832a}
.np-ct3 .np-ct-pic{height:300px}
.np-ct3 .np-doc{max-width:260px}
.np-ct3 .np-seal{top:auto;bottom:66px;left:auto;right:14px;margin:0}
.np-ct-box{width:100%;max-width:310px;display:flex;flex-direction:column;gap:8px}
.np-ct-box>p{margin:0 0 2px;font:700 12.5px var(--ui);color:var(--slate)}
.np-ct-row{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px 10px;border-radius:12px;background:#fff}
.np-ct-row .np-av{width:26px;height:26px;font-size:9.5px}
.np-ct-row b{font:600 12.5px var(--ui);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-ct-row em{padding:4px 8px;border-radius:99px;font:700 10.5px var(--ui);font-style:normal;white-space:nowrap}
.np-ct-row em.g{background:#16794a14;color:#16794a}.np-ct-row em.b{background:#2364a812;color:var(--blue)}.np-ct-row em.a{background:#b274001a;color:#8a5a00}
.np-ct-af{--c:var(--blue);display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center;padding:12px;border-radius:14px;background:#fff;border-left:4px solid var(--c)}
.np-ct-af.r{--c:#b02a5c}.np-ct-af.g{--c:#16794a}
.np-ct-af>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c)}
.np-ct-af b{display:block;font:700 13.5px var(--ui);color:var(--ink)}.np-ct-af small{font:500 12px/1.35 var(--ui);color:var(--slate)}
.np-ct-one{display:flex;align-items:center;justify-content:center;gap:8px;width:fit-content;margin:34px auto 0;padding:11px 18px;border-radius:99px;background:var(--ink);color:#fff;font:600 14.5px var(--ui)}
.np-ct-one .np-g{color:#d4a03c}
/* follow-ups: icons and counts */
.ch-warn{background:#fbf0dc;color:#b26b00}.ch-file{background:#eef1f6;color:#1b2a4a}.ch-tick{background:#16794a;color:#fff}.ch-tick .np-g{stroke-width:2.6}
.np-fu-ways em{margin-left:2px;padding:2px 7px;border-radius:99px;background:#ffffffcc;font:700 11.5px var(--ui);font-style:normal;color:inherit}
/* proof: a clickable log and what each step holds */
.np-pf-log ol:before{left:27px}
.np-pf-log li{display:block;padding:2px 0}
.np-pf-log li button{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:8px 10px;border:1px solid transparent;border-radius:14px;background:none;font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}
.np-pf-log li button:hover{background:#f6f7fa}.np-pf-log li button.on{background:#f2f4f8;border-color:#dfe3eb}
.np-pf-side{min-height:390px;display:flex;align-items:center;justify-content:center}
.np-pv{width:100%;max-width:400px;display:flex;flex-direction:column;gap:12px}
.np-pv-k{display:flex;align-items:center;gap:8px;margin:0;font:700 13px var(--ui);color:var(--slate)}
.np-pv blockquote{margin:0;padding:18px 20px;border-radius:16px;background:#fff;border:1px solid var(--line);font:500 17px/1.55 var(--font);color:var(--ink)}
.np-pv mark{padding:0 3px;border-radius:4px;background:#fbe7b5;color:inherit}
.np-pv>small{font:500 12.5px var(--ui);color:var(--muted)}
.np-pv-own{display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.np-av.big{width:48px;height:48px;font-size:15px}
.np-pv-own b{display:block;font:700 16px var(--ui);color:var(--ink)}.np-pv-own small{font:500 13px var(--ui);color:var(--slate)}
.np-pv-kv{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;padding:16px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.np-pv-kv span{font:600 12.5px var(--ui);color:var(--muted)}.np-pv-kv b{font:600 13.5px var(--ui);color:var(--ink)}
.np-pv-msg{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.np-pv-msg>span{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#eaf1fa;color:var(--blue)}
.np-pv-msg small{font:600 12px var(--ui);color:var(--muted)}.np-pv-msg p{margin:2px 0 0;font:500 14px/1.4 var(--ui);color:var(--ink)}
.np-pv-files{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.np-pv-file{display:flex;flex-direction:column;gap:3px;padding:10px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.np-pv-file b{font:650 12.5px var(--ui);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-pv-file small{font:500 11.5px var(--ui);color:var(--muted)}
.np-pv-pdf{position:relative;height:150px;margin-bottom:6px;padding:16px 14px;border-radius:10px;background:#f6f7fa;display:flex;flex-direction:column;gap:8px}
.np-pv-pdf i{display:block;height:6px;border-radius:3px;background:#dde2ea}
.np-pv-pdf em{position:absolute;right:8px;bottom:8px;padding:3px 7px;border-radius:6px;background:#b02a5c;color:#fff;font:800 10px var(--ui);font-style:normal}
.np-pv-img{height:150px;margin-bottom:6px;border-radius:10px;overflow:hidden;background:linear-gradient(180deg,#cfe0f2,#eef3f9)}
.np-pv-img svg{display:block;width:100%;height:100%}.np-pv-img .m{fill:#7d9c86}.np-pv-img .s{fill:#f2c46b}
.np-pv-note{display:flex;align-items:center;gap:8px;margin:0;font:600 13px var(--ui);color:#16794a}.np-pv-note .np-g{width:15px;height:15px}
.np-pv .np-pf-page{align-self:center;width:min(100%,260px)}
.np-pv .np-pf-btn{align-self:center}
/* reports: buttons that download */
.np-rp-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:99px;border:1px solid var(--line);background:#fff;font:650 12.5px var(--ui);color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.np-rp-btn:hover{border-color:#b9c3d6}.np-rp-btn .np-g{width:14px;height:14px}
.np-rp-btn.run{border-color:var(--blue);color:var(--blue)}
.np-rp-btn.done{background:#16794a;border-color:#16794a;color:#fff}
.np-rp-btn.sch.on{background:var(--ink);border-color:var(--ink);color:#fff}
.np-rp-prog{position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--blue);text-decoration:none;transform-origin:left;animation:np-grow 1.5s linear both}
.np-rp-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;min-height:62px;padding:0 18px 18px}
.np-rp-foot .np-rp-toast{margin:0}
.np-rp-file{display:flex;align-items:center;gap:12px;margin:0;padding:8px 14px 8px 8px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 30px -18px #10193566;animation:np-in .4s var(--ease) both}
.np-rp-fi{display:grid;place-items:center;width:38px;height:44px;border-radius:8px;background:#b02a5c;color:#fff;font:800 10.5px var(--ui)}.np-rp-fi.x{background:#16794a}
.np-rp-file b{display:block;font:650 13px var(--ui);color:var(--ink)}.np-rp-file small{font:500 11.5px var(--ui);color:var(--muted)}
.np-rp-file>.np-g{width:18px;height:18px;color:#16794a;stroke-width:2.4}
/* other modules: copy and a small moving screen */
.np-mod-box{max-width:1000px}
.np-mod-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;text-align:left}
.np-mod-copy>p:first-child{margin:0;font:600 clamp(17px,1.5vw,20px)/1.4 var(--ui);color:var(--ink)}
.np-mod-panel ul{justify-content:flex-start}
.np-mod-copy .np-mod-sync{margin:16px 0 0;flex-wrap:wrap}
@keyframes np-spin{to{transform:rotate(360deg)}}
.np-ms{min-height:262px;padding:14px;border-radius:20px;background:var(--ink);color:#fff}
.np-ms-h{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:700 13.5px var(--ui)}
.np-ms-h span{margin-left:auto;font:600 11px var(--ui);color:#9aa4bf}.np-ms-h .np-g{width:16px;height:16px;color:#d4a03c}
.np-ms-sync{display:grid;animation:np-spin 1.6s linear infinite}
.np-ms-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:#ffffff10}
.np-ms-row+.np-ms-row{margin-top:6px}
.np-ms-row b{display:block;font:650 13px var(--ui);color:#fff}.np-ms-row small{font:500 11.5px var(--ui);color:#9aa4bf}
.np-ms-row em{padding:4px 9px;border-radius:99px;font:700 11px var(--ui);font-style:normal;white-space:nowrap}
.np-ms-row em.g{background:#7fd3a826;color:#7fd3a8}.np-ms-row em.b{background:#4f8fd626;color:#9cc3ef}.np-ms-row em.a{background:#f2c46b26;color:#f2c46b}.np-ms-row em.r{background:#f59ab826;color:#f59ab8}
@media(max-width:1180px){.np-ct3{grid-template-columns:1fr 1fr}.np-ct3>li:last-child{grid-column:1/3}}
@media(max-width:760px){
 .np-ct3{grid-template-columns:1fr}.np-ct3>li:last-child{grid-column:auto}.np-ct3:before{display:none}
 .np-ct3 .np-ct-pic{height:270px}
 .np-ct-one{font-size:13px;text-align:center}
 .np-pf-side{min-height:0}
 .np-rp-foot{justify-content:center;padding:0 12px 12px}
 .np-mod-panel{grid-template-columns:1fr;gap:16px}
}
/* workflows round 2 (owner, 11 Oct): the left list changes with the tab; real templates */
.np-wf-pal button>span{display:flex;flex-direction:column;line-height:1.25}
.np-wf-pal button small{font:500 11.5px var(--ui);color:var(--muted)}
.side-playbooks button.on,.side-templates button.on{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none}
.side-playbooks button.on small,.side-templates button.on small{color:#c3c9d6}
.side-playbooks button.on .np-g,.side-templates button.on .np-g{color:#d4a03c}
.np-wf-pal{animation:np-in .35s var(--ease) both}
.np-wf-canvas.tp{display:flex;flex-direction:column;align-items:center;padding:22px;background:#eef1f6;background-image:none}
.np-tp{width:100%;max-width:560px}
.np-tp-doc{padding:24px 26px;border-radius:14px;background:#fff;box-shadow:0 24px 40px -28px #10193566}
.np-tp-k{margin:0;font:700 10.5px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.np-tp-t{display:block;margin:4px 0 10px;font:800 22px var(--font);letter-spacing:-.02em;color:var(--ink)}
.np-tp-fields{margin:0 0 14px;font:500 14px/1.7 var(--font);color:var(--slate)}
.np-tp-fields mark{padding:1px 6px;border-radius:6px;background:#eaf1fa;color:var(--blue);font-weight:650}
.np-tp-cl{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;text-align:left;cursor:pointer}
.np-tp-cl span{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#f2f4f8;font:700 11.5px var(--ui);color:var(--slate)}
.np-tp-cl b{font:600 13.5px var(--ui);color:var(--ink)}
.np-tp-cl em{padding:4px 9px;border-radius:99px;font:700 11px var(--ui);font-style:normal;white-space:nowrap}
.np-tp-cl em.f{background:#eef1f6;color:var(--slate)}.np-tp-cl em.e{background:#2364a812;color:var(--blue)}.np-tp-cl em.p{background:#f1edfa;color:#5b3fa6}
.np-tp-cl:hover{border-color:#b9c3d6}.np-tp-cl.on{border-color:var(--ink);box-shadow:0 0 0 3px #10193514}
.np-tp-used{display:flex;align-items:center;gap:6px;margin:12px 0 0;font:500 12.5px var(--ui);color:var(--slate)}.np-tp-used .np-g{width:14px;height:14px;color:var(--violet)}.np-tp-used b{color:var(--ink)}
.np-wf-canvas.tp .np-wf-insp{position:relative;top:auto;right:auto;width:100%;max-width:560px;margin-top:12px}
.np-wf-canvas.tp .np-wf-hint{position:static;margin-top:10px}
@media(max-width:760px){.np-wf-canvas.tp{display:flex;padding:12px}.np-tp-doc{padding:16px}.np-tp-t{font-size:19px}}

/* Configure. Launch. Adapt. as a settings screen (owner, 11 Oct): Workspace · Navio AI · Alerts · Access & data */
.cfg{height:100%;width:100%;padding:14px;display:flex;align-items:center;justify-content:center}
.cfg-panel{width:100%;max-width:680px;padding:18px;border-radius:18px;background:#15223a;border:1px solid #829cbd40;color:#fff}
.cfg-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cfg-top b{font:700 19px var(--font);letter-spacing:-.01em;color:#fff}
.cfg-top span{font:600 10.5px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:#8ea2c4}
.cfg-top em{margin-left:auto;padding:4px 11px;border-radius:99px;background:#ffffff14;color:#dbe5f4;font:650 11.5px var(--ui);font-style:normal}
.cfg-tabs{display:flex;gap:4px;margin-bottom:12px;padding:4px;border-radius:12px;background:#0e182c;overflow-x:auto;scrollbar-width:none}
.cfg-tabs::-webkit-scrollbar{display:none}
.cfg-tabs button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 10px;border:0;border-radius:9px;background:none;color:#9fb0cc;font:650 12.5px var(--ui);white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.cfg-tabs button.on{background:#f5f7fb;color:#101935}
.cfg-ai{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#2364a8,#6a4fb8,#c8326a)}
.cfg-rows{display:flex;flex-direction:column;gap:7px;min-height:248px}
.cfg-row{display:grid;grid-template-columns:128px minmax(0,1fr) 34px;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:#f5f7fb;color:#101935}
.cfg.can-animate .cfg-row{animation:np-in .45s var(--ease) var(--d,0s) both}
.cfg-k{font:600 12px var(--ui);color:#5d6b85}
.cfg-v{display:flex;align-items:center;gap:8px;min-width:0;font:650 13.5px var(--ui);color:#101935}
.cfg-v>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfg-v small{flex:none;padding:2px 8px;border-radius:99px;background:#f1edfa;color:#5b3fa6;font:700 10.5px var(--ui)}
.cfg-ok,.cfg-add{display:grid;place-items:center;justify-self:end;width:22px;height:22px;border-radius:50%;background:#2f7d5b;color:#fff;font:700 12px/1 var(--ui);font-style:normal}
.cfg-add{background:#2364a8;font-size:15px}
.cfg-tog{position:relative;justify-self:end;width:34px;height:20px;border-radius:99px;background:#2f7d5b}
.cfg-tog:after{content:"";position:absolute;right:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff}
.cfg-lock{display:grid;place-items:center;justify-self:end;width:22px;height:22px}
.cfg-lock svg{width:16px;height:16px;fill:none;stroke:#5d6b85;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cfg-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.cfg-saved{font:650 12.5px var(--ui);color:#e5c27a}
.cfg.can-animate .cfg-saved{animation:np-fade .6s .9s both}
.cfg-foot b{padding:10px 16px;border-radius:11px;background:#274d42;border:1px solid #5a9d8055;color:#c1edd4;font:650 13px var(--ui)}
.np-adapt ul{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1180px){.np-adapt ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.np-adapt ul{grid-template-columns:1fr}}
@media(max-width:700px){
 .cfg{padding:8px}.cfg-panel{padding:12px;border-radius:14px}
 .cfg-top b{font-size:16px}
 .cfg-tabs button{flex:none;padding:7px 9px;font-size:11.5px}
 .cfg-rows{min-height:0;gap:6px}
 .cfg-row{grid-template-columns:minmax(0,1fr) 34px;gap:2px 8px;padding:8px 10px}
 .cfg-k{grid-column:1;font-size:11px}.cfg-v{grid-column:1;font-size:12.5px;flex-wrap:wrap;gap:4px 6px}
 .cfg-v>span{white-space:normal}
 .cfg-row>i{grid-column:2;grid-row:1/3}
 .cfg-foot b{padding:8px 12px;font-size:12px}.cfg-saved{font-size:11.5px}
}
@media(max-width:700px){
 .cfg-top{display:none}
 .cfg-tabs{margin-bottom:8px}
 .cfg-row{grid-template-columns:84px minmax(0,1fr) 30px;gap:8px;padding:9px 10px}
 .cfg-k,.cfg-v{grid-column:auto}.cfg-k{font-size:11px;line-height:1.25}
 .cfg-v{flex-wrap:nowrap;font-size:12.5px}.cfg-v>span{white-space:nowrap}.cfg-v small{display:none}
 .cfg-row>i{grid-column:auto;grid-row:auto}
 .cfg-ok,.cfg-add,.cfg-lock{width:20px;height:20px}.cfg-tog{width:30px;height:18px}.cfg-tog:after{width:12px;height:12px}
 .cfg-foot{margin-top:8px}
}
/* the settings card fits any card height (owner, 11 Oct: "cut ho raha hai") */
.cfg-panel{transform-origin:center;flex:none}
.cfg-short{display:none}
.cfg.compact .cfg-top{display:none}
.cfg.compact .cfg-panel{padding:12px}
.cfg.compact .cfg-tabs{margin-bottom:8px}.cfg.compact .cfg-tabs button{padding:6px 8px}
.cfg.compact .cfg-rows{gap:5px;min-height:186px}
.cfg.compact .cfg-row{padding:7px 10px}
.cfg.compact .cfg-foot{margin-top:8px}.cfg.compact .cfg-foot b{padding:7px 12px;font-size:12px}
@media(max-width:700px){
 .cfg-full{display:none}.cfg-short{display:inline}
 .cfg-tabs button{flex:1 1 auto;padding:7px 8px;font-size:11.5px}
 .cfg-row{grid-template-columns:78px minmax(0,1fr) 28px}
 .cfg-v>span{white-space:normal;line-height:1.3}
}
@media(max-width:380px){.cfg-tabs{gap:2px}.cfg-tabs button{padding:6px 5px;font-size:10.5px;gap:4px}.cfg-ai{width:6px;height:6px}}

/* ============ /configurable (owner, 11 Oct): the whole configuration engine, no code ============ */
.f2-col li.f2-sep{height:1px;width:132px;margin:2px 0;background:#ffffff26}
.cf-hero{padding-block:clamp(128px,16vh,168px) clamp(40px,6vh,72px)}
.cf-hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,4vw,64px);align-items:center}
.cf-hero-copy h1{margin:0;font:750 clamp(40px,4.8vw,70px)/1.02 var(--font);letter-spacing:-.05em;color:var(--ink)}
.cf-hero-copy h1 em{font-style:italic;color:var(--blue)}
.cf-hero-copy>p{margin-top:18px;max-width:46ch;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--slate)}
.cf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:28px}
.cf-panel{height:auto;padding:0}
.cf-panel .cfg-panel{max-width:none;box-shadow:0 40px 80px -45px #10193590}
.cf-panel .cfg-tabs{flex-wrap:wrap}
.cf-grid{list-style:none;margin:0 auto;padding:0;max-width:1240px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cf-tile{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:22px;background:#fff;border:1px solid var(--line);transition:transform .25s var(--ease),box-shadow .25s}
.cf-tile:hover{box-shadow:0 22px 40px -30px #10193566}
.cf-ic{display:grid;place-items:center;width:42px;height:42px;margin-bottom:6px;border-radius:12px;background:#eef1f6;color:#1b2a4a}
.cf-ic .np-g{width:20px;height:20px}
.cf-tile b{font:700 16.5px/1.25 var(--ui);color:var(--ink)}
.cf-tile p{margin:0;font:500 13.5px/1.45 var(--ui);color:var(--slate)}
.cf-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:10px}
.cf-chips span{padding:5px 9px;border-radius:99px;background:#f2f4f8;font:650 11.5px var(--ui);color:var(--ink)}
.cf-steps{list-style:none;margin:0 auto;padding:0;max-width:1080px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cf-steps>li{display:flex;flex-direction:column;gap:10px}
.cf-steps small{font:800 12px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:#b0832a}
.cf-card{position:relative;min-height:190px;padding:20px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -45px #10193560}
.cf-k{margin:0 0 10px;font:700 13px var(--ui);color:var(--slate)}
.cf-swap{display:flex;flex-direction:column;gap:4px;margin:0;font:700 20px var(--font);color:var(--ink)}
.cf-swap s{font-size:15px;font-weight:600;color:#9aa3b8}
.cf-card>.cfg-tog{position:absolute;right:20px;top:20px}
.cf-test{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:600 14px var(--ui);color:var(--ink)}
.cf-test .np-g{width:18px;height:18px;padding:3px;border-radius:50%;background:#16794a;color:#fff;stroke-width:3}
.cf-live{display:flex;align-items:center;gap:8px;margin:0;font:700 20px var(--font);color:var(--ink)}
.cf-live i{width:10px;height:10px;border-radius:50%;background:#16794a;box-shadow:0 0 0 5px #16794a22}
.cf-undo{display:inline-flex;align-items:center;gap:6px;margin:16px 0 0;padding:8px 12px;border-radius:99px;background:#f2f4f8;font:650 13px var(--ui);color:var(--blue)}
.cf-undo .np-g{width:15px;height:15px}
@media(max-width:1180px){.cf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.cf-hero-grid{grid-template-columns:1fr}.cf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.cf-steps{grid-template-columns:1fr}.cf-card{min-height:0}}
@media(max-width:560px){.cf-grid{grid-template-columns:1fr}.cf-hero-copy h1{font-size:clamp(36px,10vw,48px)}}
@media(max-width:560px){.cf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.cf-tile{padding:14px;border-radius:18px;gap:4px}.cf-ic{width:36px;height:36px;margin-bottom:4px}.cf-tile b{font-size:14.5px}.cf-tile p{font-size:12.5px}.cf-chips span{font-size:10.5px;padding:4px 7px}}
/* footer: Compliance under the brand line (owner, 11 Oct) */
.f2-comp{margin-top:22px}
.f2-comp h3{margin:0 0 10px;font:600 12px var(--font);letter-spacing:.12em;text-transform:uppercase;color:#8b96ae}
.f2-comp ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.f2-comp a{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;border:1px solid #ffffff24;color:#eef1f7;font:500 13.5px var(--ui);text-decoration:none;transition:border-color .2s,color .2s}
.f2-comp a:hover{border-color:#8fb8ef;color:#8fb8ef}
.f2-comp .ico{width:14px;height:14px;color:#d4a03c}
.f2-comp{margin-bottom:24px}@media(max-width:700px){.f2-comp ul{justify-content:center}}

/* DPDP consent on the demo form (owner, 11 Oct) */
.f2-form{position:relative}
.cn{grid-column:1/-1;display:flex;align-items:flex-start;gap:11px;font:500 13.5px/1.5 var(--ui);color:var(--slate)}
.cn-box{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;padding:0;border-radius:6px;border:1.8px solid #b5bdcc;background:#fff;cursor:pointer;transition:background .15s,border-color .15s}
.cn-box svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.cn-box.on{background:var(--ink);border-color:var(--ink)}.cn-box.on svg{opacity:1}
.cn-box:focus-visible,.cn-read:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.cn-read{display:inline;padding:0;border:0;background:none;color:var(--blue);font:inherit;font-weight:650;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cn-req{margin-left:8px;padding:2px 8px;border-radius:99px;background:#fbf0dc;color:#9a6400;font:700 10.5px var(--ui);font-style:normal;white-space:nowrap}
/* until the tick: a plain muted pill. Not see-through (owner, 12 Oct: at 55% opacity the gold ring's glow showed through the
   button and smeared across it); the gold ring comes with the tick. */
.f2-send.cn-off,.f2-send.cn-off:hover{opacity:1;background:#a7afc0;border-color:transparent;animation:none;cursor:not-allowed}
.f2-send.cn-off::before{display:none}
.f2-send.cn-off i{color:#a7afc0}
.cn-notice{position:absolute;inset:-6px;z-index:6;display:flex;flex-direction:column;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -30px #10193570;animation:np-in .3s var(--ease) both;text-align:left}
.cn-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.cn-head b{font:700 18px var(--font);color:var(--ink)}.cn-head small{font:600 11.5px var(--ui);color:var(--muted)}
.cn-body{flex:1;min-height:0;overflow-y:auto;padding:14px 18px;outline:none}
.cn-lead{margin:0 0 12px;font:600 14px var(--ui);color:var(--ink)}
.cn-item{margin-bottom:12px}.cn-item b{display:block;font:700 13px var(--ui);color:var(--ink)}
.cn-item p{margin:2px 0 0;font:500 13.5px/1.55 var(--ui);color:var(--slate)}
.cn-end{margin:6px 0 0;padding:10px 12px;border-radius:12px;background:#f2f4f8;font:600 13px/1.5 var(--ui);color:var(--ink)}
.cn-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-top:1px solid var(--line)}
.cn-foot small{font:600 12px var(--ui);color:var(--muted)}.cn-foot small.ok{color:#16794a}
.cn-foot>div{display:flex;gap:8px}
.cn-ghost,.cn-agree{padding:10px 16px;border-radius:99px;font:650 13.5px var(--ui);cursor:pointer}
.cn-ghost{border:1px solid var(--line);background:#fff;color:var(--ink)}
.cn-agree{border:0;background:var(--ink);color:#fff}.cn-agree:disabled{opacity:.4;cursor:not-allowed}
.f2-form:not(.df-light) .cn{color:#aab3c8}.f2-form:not(.df-light) .cn-read{color:#8fb8ef}
.cn-ghost,.cn-agree{white-space:nowrap}@media(max-width:700px){.cn-foot{padding:10px 14px}.cn-ghost,.cn-agree{padding:9px 13px;font-size:13px}.cn-head,.cn-body{padding-left:14px;padding-right:14px}}

/* ============ nuvena.co/my-data (owner, 11 Oct): DPDP rights, OTP sign-in ============ */
.pv{padding-block:clamp(120px,15vh,160px) clamp(60px,9vh,100px);min-height:80vh}
.pv-load{color:var(--muted)}
.pv-front{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);grid-template-areas:"copy sign" "how sign";gap:24px 56px;align-items:start;max-width:1100px;margin:0 auto}
.pv-front-copy{grid-area:copy}.pv-sign{grid-area:sign}.pv-how{grid-area:how}
.pv-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 12px;border-radius:99px;background:#fbf3e3;color:#7a5410;font:700 12px var(--ui)}
.pv-kicker .ico{width:15px;height:15px}
.pv-front h1,.pv-hi h1{margin:0;font:750 clamp(38px,4.6vw,64px)/1.03 var(--font);letter-spacing:-.05em;color:var(--ink)}
.pv-front h1 em{font-style:italic;color:var(--blue)}
.pv-front-copy>p{margin-top:16px;max-width:46ch;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--slate)}
.pv-card{padding:22px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -48px #10193560}
.pv-card h2{margin:0 0 14px;font:700 18px var(--ui);color:var(--ink)}
.pv-sign form,.pv-form{display:flex;flex-direction:column;gap:12px}
.pv-sign label,.pv-form label{display:flex;flex-direction:column;gap:6px;font:600 13.5px var(--ui);color:var(--slate)}
.pv-sign input,.pv-form input,.pv-form select,.pv-form textarea{width:100%;padding:13px 14px;border-radius:14px;border:1.5px solid var(--line);background:#fafafa;font:500 16px var(--font);color:var(--ink)}
.pv-sign input:focus,.pv-form input:focus,.pv-form select:focus,.pv-form textarea:focus{outline:none;border-color:var(--blue);background:#fff}
.pv-code{letter-spacing:.5em;font-size:24px!important;text-align:center}
.pv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 20px;border:0;border-radius:99px;background:var(--action-dark);color:#fff;font:650 15px var(--ui);cursor:pointer}
.pv-btn .ico{width:16px;height:16px}.pv-btn:disabled{opacity:.6}
.pv-btn.sm{padding:9px 14px;font-size:13px}.pv-btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}.pv-btn.danger{background:#b02a5c}
.pv-link{padding:0;border:0;background:none;color:var(--blue);font:600 13.5px var(--ui);cursor:pointer;text-align:left}.pv-link:disabled{color:var(--muted);cursor:default}
.pv-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.pv-small{margin:0;font:500 13px/1.5 var(--ui);color:var(--muted)}
.pv-small a,.pv-how a{color:var(--blue)}
.pv-sent,.pv-ok{display:flex;align-items:flex-start;gap:8px;margin:0;padding:11px 13px;border-radius:14px;background:#e8f6ee;color:#16794a;font:600 13.5px/1.45 var(--ui)}
.pv-sent .ico,.pv-ok .ico{width:16px;height:16px;flex:none;margin-top:2px}
.pv-ok{margin-top:14px}
.pv-err{min-height:1em;margin:6px 0 0;font:600 13.5px var(--ui);color:#b02a5c}
.pv-preview{margin:12px 0 0;padding:8px 12px;border-radius:10px;background:#fbf3e3;color:#7a5410;font:600 12.5px var(--ui)}
.pv-warn{margin:0;padding:12px 14px;border-radius:14px;background:#fdecef;color:#8f2149;font:600 13.5px/1.5 var(--ui)}
.pv-how{display:flex;flex-direction:column;gap:10px;max-width:520px}
.pv-how>div{display:flex;gap:12px;align-items:flex-start}
.pv-how .ico{flex:none;width:18px;height:18px;margin-top:3px;color:var(--blue)}
.pv-how p{margin:0;font:500 14px/1.55 var(--ui);color:var(--slate)}.pv-how b{color:var(--ink)}
.pv-home{max-width:1100px;margin:0 auto}
.pv-hi{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.pv-hi p{margin-top:10px;font-size:17px;color:var(--slate)}
.pv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:26px}
.pv-wide{grid-column:1/-1}
.pv-held{display:grid;grid-template-columns:max-content 1fr;gap:10px 16px;margin:0 0 14px}
.pv-held dt{font:600 13px var(--ui);color:var(--muted)}.pv-held dd{margin:0;font:600 14px var(--ui);color:var(--ink);overflow-wrap:anywhere}
.pv-consent{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:16px;background:#f6f7fa}
.pv-consent+.pv-consent{margin-top:8px}
.pv-c-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pv-c-top b{font:650 14.5px/1.35 var(--ui);color:var(--ink)}
.pv-chip{flex:none;padding:4px 10px;border-radius:99px;background:#eef1f6;color:var(--slate);font:700 11.5px var(--ui);font-style:normal;white-space:nowrap}
.pv-chip.given{background:#16794a14;color:#16794a}.pv-chip.withdrawn,.pv-chip.erased{background:#c8326a14;color:#b02a5c}.pv-chip.open{background:#b274001a;color:#8a5a00}
.pv-consent .pv-btn{align-self:flex-start}
.pv-time{position:relative;list-style:none;margin:0;padding:0}
.pv-time:before{content:"";position:absolute;left:6px;top:8px;bottom:8px;border-left:2px solid #e3e6ee}
.pv-time li{position:relative;display:flex;gap:14px;padding:7px 0}
.pv-time i{flex:none;width:14px;height:14px;margin-top:3px;border-radius:50%;background:#fff;border:3px solid var(--blue)}
.pv-time b{display:block;font:600 14px var(--ui);color:var(--ink)}.pv-time small{font:500 12.5px var(--ui);color:var(--muted)}
.pv-who{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pv-who li{padding:12px 14px;border-radius:14px;background:#f6f7fa}
.pv-who p{margin:6px 0 2px;font:600 13px var(--ui);color:var(--ink)}.pv-who small{font:500 12.5px var(--ui);color:var(--muted)}
.pv-acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.pv-act{display:flex;align-items:center;gap:10px;padding:14px;border-radius:16px;border:1px solid var(--line);background:#fff;font:650 14px var(--ui);color:var(--ink);cursor:pointer;text-align:left}
.pv-act .ico{width:18px;height:18px;color:var(--blue)}.pv-act.danger .ico{color:#b02a5c}
.pv-act.on{border-color:var(--ink);box-shadow:0 0 0 3px #10193514}
.pv-form{margin-bottom:16px;padding:16px;border-radius:16px;background:#f6f7fa}
.pv-reqs{margin:4px 0 14px}.pv-reqs h3{margin:0 0 8px;font:700 14px var(--ui);color:var(--ink)}
.pv-req{display:grid;grid-template-columns:140px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line);font:500 13.5px var(--ui);color:var(--slate)}
.pv-req b{color:var(--ink);font-weight:650}
.f2-comp a .ico,.tc-mine .ico{flex:none}
.tc-mine{display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:12px 16px;border-radius:14px;background:#eef3fb;font:600 14px/1.5 var(--ui);color:var(--ink)}
.tc-mine .ico{width:18px;height:18px;color:var(--blue)}.tc-mine a{color:var(--blue);text-decoration:underline}
@media(max-width:560px){.tc-mine{display:block}.tc-mine .ico{display:inline-block;margin-right:8px;vertical-align:-4px}.tc-mine a{overflow-wrap:anywhere}}
@media(max-width:900px){.pv-front{grid-template-columns:1fr;grid-template-areas:"copy" "sign" "how"}.pv-grid{grid-template-columns:1fr}.pv-acts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.pv-card{padding:16px;border-radius:20px}.pv-hi{flex-direction:column;align-items:flex-start}.pv-req{grid-template-columns:1fr;gap:4px}.pv-acts{grid-template-columns:1fr}}
.pv-held{grid-template-columns:max-content minmax(0,1fr)}@media(max-width:900px){.pv-grid{grid-template-columns:minmax(0,1fr)}}@media(max-width:560px){.pv-held{grid-template-columns:minmax(0,1fr);gap:2px}.pv-held dd{margin-bottom:8px}}

/* ============ An industry page with its own movie (owner, 12 Oct, FMCG first): the Navio OS page's look. Centred, bold headings,
   gold act labels (as in the movie) instead of grey eyebrows, one idea per screen; the movie sits right under the top picture. ============ */
.ind-np .eyebrow{justify-content:center;font:700 12px/1 var(--font);letter-spacing:.18em;color:#c99535}
.ind-np .eyebrow .strokes{display:none}
.ind-np .ind-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(96px,12vh,124px) clamp(28px,4vh,48px)}
.ind-np .ind-hero-grid{grid-template-columns:minmax(0,1fr);justify-items:center;gap:clamp(18px,3vh,34px);text-align:center}
.ind-np .ind-hero-copy{display:flex;flex-direction:column;align-items:center;max-width:1100px}
.ind-np .ind-hero-copy .breadcrumb{margin-bottom:14px}
.ind-np .ind-hero-copy h1{margin-top:12px;font:750 clamp(40px,4.6vw,66px)/1.04 var(--font);letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.ind-np .ind-lead{margin-top:clamp(12px,2vh,20px);max-width:64ch;font-size:clamp(16px,1.3vw,19px);line-height:1.5}
.ind-np .ind-actions{margin-top:clamp(16px,2.6vh,26px)}
.ind-np .ind-ready{justify-content:center;margin-top:12px;text-align:center}
.ind-np .ind-hero-art{width:min(100%,clamp(300px,calc((100svh - 560px) * 1.3),520px))}
.ind-np .ich-grid,.ind-np .ich.flip .ich-grid{grid-template-columns:minmax(0,1fr);gap:clamp(26px,4.5vh,50px);justify-items:center}
.ind-np .ich.flip .ich-copy{order:0}
.ind-np .ich-copy{text-align:center;max-width:860px}
.ind-np .ich-copy h2,.ind-np .ind-sec h2{margin-top:12px;font:750 clamp(34px,4vw,60px)/1.04 var(--font);letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.ind-np .ich-copy h2{margin-top:0}
.ind-np .ich-copy p{margin:14px auto 0;max-width:660px;font-size:clamp(16px,1.3vw,20px);line-height:1.5}
.ind-np .ich-vis{width:min(760px,100%)}
.ind-np .ind-sec{max-width:900px;margin-inline:auto;text-align:center}
.ind-np .ind-sec p:not(.eyebrow){max-width:680px;margin-inline:auto;font-size:clamp(16px,1.3vw,19px);line-height:1.5}
.ind-np .ind-short-long{text-align:center}
.ind-np .ind-back .container{display:flex;justify-content:center}
@media(max-width:700px){
 .ind-np .ind-hero{min-height:0}
 .ind-np .ind-hero-copy h1{font-size:clamp(32px,9vw,42px)}
 .ind-np .ich-copy h2,.ind-np .ind-sec h2{font-size:clamp(30px,8.6vw,40px)}
 .ind-np .ind-hero-art{width:100%}}
/* footer: the city line under "Every Promise, Delivered." (owner, 12 Oct) */
.f2 .f2-brand p.f2-loc{margin:-12px 0 22px;font:500 13.5px var(--ui);letter-spacing:.02em;color:#8b96ae}
/* Contact (owner, 14 Oct): the form ends level with the four boxes. Both sides stretch to the taller one; the message box takes the
   room left; name and email share a row where the card is wide enough. The company line sits under the row. Consent as on the
   demo form, and the same muted button until the tick. */
.ct-grid{align-items:stretch}
.ct-ways{grid-auto-rows:1fr}
.ct-way em{margin-top:auto;padding-top:18px}
.ct-form-card{display:flex;flex-direction:column}
.ct-form{position:relative;flex:1;display:flex;flex-direction:column;gap:14px}
.ct-form h2{margin-bottom:0}
.ct-two{display:grid;grid-template-columns:1fr;gap:14px}
.ct-msg{flex:1;display:flex!important;flex-direction:column}
.ct-msg textarea{flex:1;min-height:84px;resize:none}
.ct-form .button{align-self:flex-start;margin:2px 0 0}
.ct-form .button.cn-off,.ct-form .button.cn-off:hover{background:#a7afc0;border-color:transparent;box-shadow:none;cursor:not-allowed;transform:none}
.ct-form .cn{grid-column:auto}
.ct-where{margin:clamp(14px,1.6vw,20px) 0 0}
@media(min-width:1180px){.ct-two{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.ct-ways{grid-auto-rows:auto}.ct-msg textarea{min-height:120px;resize:vertical}}
/* the consent notice inside the Contact card keeps the demo form's type (.pg-card p would make it larger) */
.ct-form .cn-lead{margin:0 0 12px;font:600 14px var(--ui);color:var(--ink)}
.ct-form .cn-item p{margin:2px 0 0;font:500 13.5px/1.55 var(--ui);color:var(--slate)}
.ct-form .cn-end{margin:6px 0 0;font:600 13px/1.5 var(--ui);color:var(--ink)}

/* Solutions index: industry-specific entry points, followed by the shared execution path. */
.sol-hero{padding:clamp(120px,16vh,160px) 0 clamp(70px,10vh,112px);overflow:hidden;background:radial-gradient(55% 75% at 86% 52%,#dbe9f8 0,transparent 72%)}
.sol-hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);gap:clamp(40px,6vw,92px);align-items:center}
.sol-hero-copy h1{max-width:760px;margin:20px 0 0;font:750 clamp(44px,5.2vw,74px)/1.02 var(--font);letter-spacing:-.052em;color:var(--ink);text-wrap:balance}
.sol-hero-copy>p{max-width:610px;margin:22px 0 0;font:400 clamp(16px,1.3vw,19px)/1.6 var(--font);color:var(--slate)}
.sol-actions{display:flex;align-items:center;gap:24px;margin-top:30px}.sol-actions .text-link{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.sol-signal{position:relative;min-height:410px}
.sol-signal-lines{position:absolute;inset:20px 0 0;width:100%;height:360px;overflow:visible}.sol-signal-lines path{fill:none;stroke:#9eb9dc;stroke-width:1.5;stroke-dasharray:5 7}
.sol-signal-core{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:148px;height:148px;border-radius:40px;background:var(--ink);color:#fff;transform:translate(-50%,-50%) rotate(2deg);box-shadow:0 28px 60px -30px #101935aa}
.sol-signal-core span{font:750 58px/1 var(--font);letter-spacing:-.08em}.sol-signal-core span:after{content:"";display:inline-block;width:8px;height:8px;margin:0 0 36px 3px;border-radius:50%;background:#d4a03c}.sol-signal-core b{margin-top:-18px;font:700 14px var(--ui)}.sol-signal-core small{font:500 10px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:#aeb7cc}
.sol-signal-node{position:absolute;z-index:1;display:flex;align-items:center;gap:10px;width:210px;min-height:68px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 22px 45px -34px #10193580;font:650 13.5px/1.3 var(--ui);color:var(--ink)}
.sol-signal-node .ico{width:20px;height:20px;flex:none;color:var(--blue)}.sol-signal-node.tl{left:0;top:28px}.sol-signal-node.tr{right:0;top:28px}.sol-signal-node.bl{left:0;bottom:22px}.sol-signal-node.br{right:0;bottom:22px}
.sol-playbooks{padding:clamp(72px,10vh,116px) 0;background:#0e1835;color:#fff}
.sol-head{max-width:820px;margin:0 auto clamp(34px,5vh,54px);text-align:center}.sol-head .eyebrow{justify-content:center;color:#7db4ef}.sol-head .eyebrow .strokes{display:none}.sol-head h2{margin:16px 0 0;font:750 clamp(36px,4.6vw,64px)/1.03 var(--font);letter-spacing:-.048em;text-wrap:balance}.sol-head>p{max-width:650px;margin:16px auto 0;font-size:clamp(15.5px,1.25vw,18px);line-height:1.55;color:#b7c0d5}
.sol-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.sol-card{position:relative;grid-column:span 4;min-height:246px;padding:24px;border:1px solid #ffffff18;border-radius:24px;background:#ffffff0b;color:#fff;overflow:hidden;transition:transform .25s var(--ease),background .25s,border-color .25s}
.sol-card:nth-child(n+4){grid-column:span 3;min-height:224px}.sol-card:hover{transform:translateY(-4px);background:#ffffff11;border-color:#ffffff32}
.sol-card:after{content:"";position:absolute;right:-40px;bottom:-55px;width:150px;height:150px;border:1px solid #5f8fc94f;border-radius:50%;box-shadow:0 0 0 22px #5f8fc91a,0 0 0 44px #5f8fc90c;pointer-events:none}
.sol-card-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#fff;color:var(--blue)}.sol-card-icon .ico{width:21px;height:21px}.sol-card-go{position:absolute;right:22px;top:24px;color:#8fa0c2}.sol-card-go .ico{width:17px;height:17px}
.sol-card h3{margin:24px 0 0;font:720 clamp(23px,2vw,30px)/1.1 var(--font);letter-spacing:-.035em}.sol-card>p{margin:10px 0 0;font:500 14px/1.45 var(--ui);color:#bdc6da}
.sol-card ul{position:relative;z-index:1;list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px}.sol-card li{display:flex;align-items:center;gap:8px;font:600 12.5px/1.35 var(--ui);color:#eef2fa}.sol-card li .ico{width:14px;height:14px;color:#73d3a4}
.sol-execution{padding:clamp(76px,10vh,116px) 0;background:#f4f6f9}.sol-execution-head{text-align:center;max-width:820px;margin:0 auto 48px}.sol-execution-head .eyebrow{justify-content:center}.sol-execution-head .eyebrow .strokes{display:none}.sol-execution-head h2{margin:16px 0 0;font:750 clamp(36px,4.4vw,62px)/1.04 var(--font);letter-spacing:-.047em;text-wrap:balance}.sol-execution-head>p{margin:14px auto 0;font-size:17px;line-height:1.55;color:var(--slate)}
.sol-execution-flow{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.sol-execution-flow:before{content:"";position:absolute;left:8%;right:8%;top:54px;border-top:2px solid #b9cbe1}
.sol-execution-flow li{position:relative;padding:18px 16px 22px;border:1px solid var(--line);border-radius:20px;background:#fff}.sol-execution-n{font:700 10px var(--ui);letter-spacing:.1em;color:var(--muted)}.sol-execution-icon{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;margin:12px 0 20px;border-radius:50%;background:var(--ink);color:#fff;box-shadow:0 0 0 8px #f4f6f9}.sol-execution-icon .ico{width:20px;height:20px}.sol-execution-flow li:last-child .sol-execution-icon{background:#16794a}
.sol-execution-flow b{display:block;font:700 16px/1.25 var(--ui);color:var(--ink)}.sol-execution-flow p{margin:8px 0 0;font:500 13.5px/1.5 var(--ui);color:var(--slate)}
.sol-close{padding:clamp(56px,8vh,90px) 0}.sol-close-in{display:flex;align-items:center;justify-content:space-between;gap:44px;padding:clamp(28px,4vw,48px);border-radius:30px;background:linear-gradient(120deg,#e7eef8,#f8f6ef);border:1px solid #dce2eb}.sol-close-in>div{max-width:760px}.sol-close .eyebrow .strokes{display:none}.sol-close h2{margin:14px 0 0;font:750 clamp(30px,3.6vw,50px)/1.06 var(--font);letter-spacing:-.044em;color:var(--ink);text-wrap:balance}.sol-close p{margin:14px 0 0;font-size:16px;line-height:1.55;color:var(--slate)}.sol-close .button{flex:none}
@media(max-width:1050px){.sol-hero-grid{grid-template-columns:1fr}.sol-hero-copy{text-align:center}.sol-hero-copy .eyebrow{justify-content:center}.sol-hero-copy .eyebrow .strokes{display:none}.sol-hero-copy h1,.sol-hero-copy>p{margin-left:auto;margin-right:auto}.sol-actions{justify-content:center}.sol-signal{width:min(680px,100%);margin:auto}.sol-card,.sol-card:nth-child(n+4){grid-column:span 6}.sol-execution-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.sol-execution-flow:before{display:none}.sol-execution-flow li:last-child{grid-column:1/-1}}
@media(max-width:620px){.sol-hero{padding:112px 0 58px;background:radial-gradient(90% 45% at 50% 88%,#dbe9f8,transparent 76%)}.sol-hero-grid{gap:42px}.sol-hero-copy h1{font-size:clamp(38px,10.5vw,49px)}.sol-actions{flex-direction:column;gap:16px}.sol-actions .button{width:100%;justify-content:space-between}.sol-signal{min-height:420px}.sol-signal-lines{display:none}.sol-signal-core{top:50%;width:126px;height:126px;border-radius:34px}.sol-signal-core span{font-size:48px}.sol-signal-core b{font-size:13px}.sol-signal-node{width:calc(50% - 8px);min-height:78px;padding:12px;font-size:12px}.sol-signal-node.tl,.sol-signal-node.bl{left:0}.sol-signal-node.tr,.sol-signal-node.br{right:0}.sol-signal-node.tl,.sol-signal-node.tr{top:0}.sol-signal-node.bl,.sol-signal-node.br{bottom:0}.sol-signal-node .ico{width:18px;height:18px}.sol-playbooks{padding-block:60px}.sol-grid{grid-template-columns:1fr}.sol-card,.sol-card:nth-child(n+4){grid-column:auto;min-height:0;padding:20px;border-radius:20px}.sol-card h3{margin-top:18px}.sol-card ul{margin-top:15px}.sol-execution{padding-block:60px}.sol-execution-head{margin-bottom:30px}.sol-execution-flow{grid-template-columns:1fr}.sol-execution-flow li:last-child{grid-column:auto}.sol-execution-flow li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:3px 14px;align-items:center;padding:16px}.sol-execution-n{display:none}.sol-execution-icon{grid-row:1/3;margin:0;box-shadow:none}.sol-execution-flow p{margin:0}.sol-close-in{display:block;border-radius:24px;text-align:center}.sol-close .eyebrow{justify-content:center}.sol-close p{font-size:15px}.sol-close .button{width:100%;justify-content:space-between;margin-top:24px}}
/* Keep the approved opening phrase together on every screen. */
.home-chapters #nvj .nvj-simple-line{display:block}
.home-chapters #nvj .nvj-draft-line{white-space:nowrap}
.home-chapters #nvj .nvj-simple-line+.nvj-simple-line::before{content:none}
/* Mobile hero: two complete headline lines and two concise supporting lines. */
@media(max-width:700px){
 .home-chapters #nvj #nvj-simple-title{font-size:clamp(26px,8.2vw,48px);line-height:1.15}
 .home-chapters #nvj .nvj-simple-line{white-space:nowrap}
 .home-chapters #nvj .nvj-simple-sub:has(.nvj-sub-two){max-width:none;width:100%;font-size:clamp(13px,4.05vw,17px);line-height:1.6;margin-inline:0}
 #nvj .nvj-sub-two>span{display:block;white-space:normal;text-wrap:pretty}
}
.mobile-refine-only{display:none}
.nph-review-status{display:contents}
/* Homepage positioning & end-to-end product story, 17 Oct 2026. */
.nvj-category{white-space:normal;text-wrap:balance}
#nvj.nvj-simple .nvj-category{font-weight:750}
.nvs-head .nvs-sub{letter-spacing:.06em;text-transform:none;font-size:clamp(12px,1.2vw,16px)}
.contract-journey{width:100%;max-width:1240px;margin:28px auto 0;text-align:left;color:var(--ink);font-family:var(--ui)}
@media(min-width:901px){.home-chapters>#navio-os.nvs{padding-top:max(100px,calc(var(--nvs-top,150px) * .58))}}
.cj-example{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;font-size:13px;color:var(--slate)}
.cj-example b{display:block;color:var(--ink);margin-bottom:4px;font-size:15px}
.cj-play,.cj-next{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;min-height:44px;padding:9px 14px;border:1px solid #d9e1ed;border-radius:12px;background:#fff;color:var(--ink);font:650 13px var(--ui);cursor:pointer}
.cj-play[aria-pressed=true]{background:#e9f1fc}.cj-play .ico,.cj-next .ico{width:16px;height:16px}
.cj-layout{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(0,1.7fr);gap:28px;align-items:stretch}
.cj-tabs{display:grid;gap:5px}
.cj-tab{display:flex;gap:13px;align-items:center;padding:11px 15px;text-align:left;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--slate);cursor:pointer;min-height:57px}
.cj-tab small{font:600 12px var(--ui);color:#76839b}
.cj-tab b{display:block;font:700 16px/1.2 var(--ui);color:var(--ink)}
.cj-tab-description{display:block;font:450 12px/1.4 var(--ui);margin-top:5px}
.cj-tab.selected{background:white;border-color:#d7e0ec;box-shadow:0 8px 22px -15px #10193540}
.cj-tab.selected small{color:#a16b13}.cj-tab.selected{box-shadow:inset 3px 0 #d9a333,0 8px 22px -15px #10193540}
.cj-tab:hover{background:#edf2fa}
.cj-tab:focus-visible,.cj-play:focus-visible,.cj-next:focus-visible,.cj-panel:focus-visible{outline:2px solid #2868af;outline-offset:3px}
.cj-panel{min-width:0;border:1px solid #d5ddea;border-radius:22px;background:#f0f4f9;box-shadow:0 24px 48px -34px #13244360;display:flex;flex-direction:column;overflow:hidden}
.cj-app-bar{display:flex;align-items:center;gap:12px;padding:16px 20px;background:#fff;border-bottom:1px solid #e0e5ed;font-size:12px;min-height:53px}
.cj-app-bar>b{font-size:15px}.cj-app-bar>span{color:var(--slate)}.cj-app-bar>small{margin-left:auto;color:var(--muted);font-size:10px}
.cj-scene-wrap{display:flex;flex:1;min-height:410px;padding:24px}
.cj-scene{width:100%;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:18px;font-size:14px;line-height:1.55}
.cj-scene h3{margin:0;color:var(--ink);font:750 22px/1.18 var(--font);letter-spacing:-.025em}
.cj-scene h4{margin:0;font:700 15px/1.35 var(--ui)}.cj-scene h5{font:700 11px/1.4 var(--ui);letter-spacing:.05em;margin:20px 0 6px;color:#324765}
.cj-scene p{margin:0;color:var(--slate);font-size:14px;line-height:1.55}.cj-scene small{font-size:12px;color:var(--slate)}
.cj-scene-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cj-pill{display:inline-flex;width:fit-content;align-items:center;padding:5px 9px;border-radius:8px;font:600 11px/1.35 var(--ui);background:#e7edf5;color:#43566f}
.cj-pill.green{background:#e1f2e9;color:#126b45}.cj-pill.blue{background:#e4eefb;color:#235e9e}.cj-pill.amber{background:#fbefd5;color:#8a611c}
.cj-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cj-flow-node{position:relative;background:#fff;border:1px solid #d7e1ed;padding:14px;border-radius:12px;display:flex;flex-direction:column;gap:8px;min-height:76px}
.cj-flow-node small{color:#a47823;font-size:10px}.cj-flow-node b{font-size:14px}.cj-flow-node .ico{position:absolute;right:10px;top:12px;width:14px;color:#7e9dbb}
.cj-flow-node:last-child{border-color:#6fae8d;background:#eef8f2}
.cj-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.cj-field{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:11px 0;border-bottom:1px solid #dde4ed;font-size:12px}
.cj-field>span{color:var(--slate)}.cj-field>b{font-weight:650;color:var(--ink)}
.cj-note{display:flex;align-items:flex-start;gap:9px;font-size:12px!important;color:#4b607b!important;line-height:1.45!important}
.cj-note .ico{flex:none;width:17px;height:17px;color:#2e75ad;margin-top:1px}
.cj-split{display:grid;grid-template-columns:1.05fr 1fr;gap:24px;align-items:center}
.cj-split aside{display:flex;flex-direction:column;gap:16px;min-width:0}.cj-split aside h3{font-size:21px}
.cj-document{padding:23px;background:#fff;border:1px solid #dce2e9;box-shadow:0 12px 20px -16px #13244350;min-width:0}
.cj-overline{display:block;font-size:9px;letter-spacing:.14em;color:#677b93;margin-bottom:12px}
.cj-document h4{font-size:23px;letter-spacing:-.03em}.cj-parties{font-size:11px!important;padding:6px 0 16px;border-bottom:1px solid #e2e7ed;margin-bottom:12px!important}
.cj-document p{font-size:12px}.cj-clause{padding:10px;background:#eef4fc;border-left:2px solid #619bd1}
.cj-redline{font-size:14px!important;line-height:1.8!important;margin-bottom:15px!important}
.cj-redline del{display:block;background:#fde9ee;color:#a43e5c;padding:4px 7px}.cj-redline ins{display:block;background:#e5f4eb;color:#187447;padding:4px 7px;text-decoration:none}
.cj-small{font-size:11px!important}.cj-document .cj-note{margin-top:16px;font-size:11px!important}
.cj-comment{padding:13px;border-radius:12px;background:#fff;border:1px solid #e1e7f0}.cj-comment b{display:block;font-size:12px;margin-bottom:5px}.cj-comment p{font-size:13px}
.cj-signatures{display:flex;gap:18px;margin-top:28px;flex-wrap:wrap}.cj-signatures>div{flex:1;min-width:85px}
.cj-signature{display:block;border-bottom:1px solid #a8b5c5;padding-bottom:8px;font:italic 20px var(--font);color:#31547a}.cj-signatures small{display:block;font-size:9px;margin-top:6px}
.cj-checklist,.cj-timeline{list-style:none;padding:0;margin:0;display:grid;gap:17px}
.cj-checklist li{display:flex;gap:10px;font-size:13px;color:var(--slate)}.cj-checklist .ico{flex:none;width:17px;color:#228358}
.cj-source{display:flex;align-items:center;gap:8px;font-size:12px!important}.cj-source .ico{width:17px;height:17px}
.cj-work-items{display:grid;gap:10px}.cj-work-items article{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px;background:#fff;border:1px solid #dee6ee;border-radius:12px}
.cj-work-items article small{display:block;font-size:11px;margin:3px 0}.cj-work-meta{display:flex;align-items:center;gap:12px;font-size:12px;flex-wrap:wrap;justify-content:flex-end}.cj-work-meta>span:first-child{color:var(--slate)}
.cj-task-card{padding:22px;background:#fff;border:1px solid #dbe3ed;border-radius:16px}.cj-task-card>h3{margin:18px 0}
.cj-message{margin-top:20px;padding:14px;border-radius:12px;background:#f2f7ee;display:flex;align-items:flex-start;gap:10px}.cj-message .ico{width:18px;flex:none;color:#a3792f}.cj-message p{font-size:12px}
.cj-timeline li{position:relative;padding:0 0 12px 15px;border-left:2px solid #b3c8e1}.cj-timeline li>b,.cj-timeline li>span{display:block;font-size:12px}.cj-timeline li>span{color:var(--slate);margin-top:5px}
.cj-evidence{display:flex;gap:10px;align-items:center;border:1px solid #dce4ed;border-radius:10px;padding:14px;margin:18px 0}.cj-evidence>.ico{width:24px;flex:none;color:#2c70ae}.cj-evidence b{font-size:12px;overflow-wrap:anywhere}.cj-evidence small{display:block;margin-top:6px;font-size:11px}
.cj-scene blockquote{margin:0;padding:14px;border-left:2px solid #d8aa47;background:#fff;font-size:14px;color:#384e68}
.cj-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.cj-metrics>div{padding:17px 12px;border:1px solid #cfe4d9;background:#f5fcf8;border-radius:12px}
.cj-metrics strong{display:block;font:750 32px/1 var(--font);color:#16764e}.cj-metrics span{display:block;font-size:11px;margin-top:10px;color:#4a665b}
.cj-panel-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;background:#fff;border-top:1px solid #dfe5ee;font-size:12px;color:#3c536e}
.cj-next{min-height:40px;background:var(--ink);color:white;border-color:var(--ink)}
.cj-bridge{max-width:900px;margin:23px auto 4px;text-align:center;font-size:14px;line-height:1.6;color:var(--slate)}.cj-bridge>b{color:var(--ink)}
.np-positioning{max-width:760px;margin:15px auto 0;font:450 14px/1.5 var(--ui);color:var(--slate);text-wrap:balance}
.cap-tabs{justify-content:flex-start;gap:8px;margin:0 0 14px;position:relative;z-index:5}
.cap-tabs .cap-dot,.cap-tabs .cap-dot.on{width:auto;height:auto;min-height:42px;padding:10px 18px;border:1px solid #ffffff30;background:#ffffff08;border-radius:10px;color:#c7d5e8;font:600 13px/1.2 var(--ui);transition:background .2s,color .2s}
.cap-tabs .cap-dot.on{background:#ecf2fc;color:#111c32;border-color:#ecf2fc}.cap-tabs .cap-dot::after{display:none}
.cap-tabs .cap-dot:hover{border-color:#9bbbe2}
.integration-availability{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:min(1100px,calc(100% - 2 * var(--gutter)));margin:10px auto 0;text-align:left}
.integration-status{padding:20px;border:1px solid #dce3ec;border-radius:16px;background:#fff}
.integration-status h3{font:700 16px/1.2 var(--ui);margin:0 0 8px;color:var(--ink)}
.integration-status p{font:450 13px/1.45 var(--ui);margin:0 0 14px;color:var(--slate)}
.integration-status ul{display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0;list-style:none}
.integration-status li{border-radius:7px;padding:6px 8px;background:#eaf3ed;color:#246b4a;font:550 11px/1.4 var(--ui)}
.integration-status.api li{background:#e9f1fc;color:#2b629d}.integration-status.planned{background:#f5f5f3}.integration-status.planned li{background:#e9e9e6;color:#586271}
.np-sc-card .integration-availability{width:100%;grid-template-columns:1fr;margin:0;gap:12px}
.np-sc-card .integration-status{padding:14px}.np-sc-card .integration-status h3{font-size:14px}
.connect-status-link{display:flex;justify-content:center;gap:8px;align-items:center;font:600 13px var(--ui);color:#285f9b;margin:20px auto 0}
.connect-status-link .ico{width:16px;height:16px}
.home-chapters .connect-available-stage{height:clamp(170px,23vh,230px);min-height:170px;flex:none}
.connect-available-tools{position:absolute;top:50%;transform:translateY(-50%);display:flex;justify-content:center;gap:14px;width:calc(50% - 115px)}
.connect-available-tools.left{left:0}.connect-available-tools.right{right:0}
.connect-available-tool{width:75px;display:flex;align-items:center;flex-direction:column;gap:10px;background:#fff;padding:15px 7px;border:1px solid #dde5ef;border-radius:16px;box-shadow:0 9px 20px -15px #243b5d60}
.connect-available-tool .ico{width:25px;height:25px;color:#3373b2}.connect-available-tool span{font:600 11px var(--ui);color:var(--slate)}
/* AI outputs must be visible even before the scan animation starts. */
.navio-ai-art.can-animate :is(.ai-output,.ai-connection,.ai-clause rect),
.navio-ai-art.can-animate.has-started :is(.ai-output,.ai-connection,.ai-clause rect){opacity:1;animation:none;transform:none;stroke-dashoffset:0}
.cap-mobile-summary{display:none}
@media(min-width:901px){
 .onit-handoff.can-animate .onit-recipient-stage,.onit-handoff.can-animate.has-started .onit-recipient-stage,
 .onit-handoff.can-animate .onit-handoff-link,.onit-handoff.can-animate.has-started .onit-handoff-link,
 .onit-handoff.can-animate .onit-route-channel,.onit-handoff.can-animate.has-started .onit-route-channel{opacity:1;animation:none;transform:none}
}
@media(max-width:900px){
 .cj-layout{grid-template-columns:1fr;gap:16px}.cj-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 .cj-tab{flex-direction:column;align-items:flex-start;gap:5px;padding:10px;min-height:66px}.cj-tab b{font-size:12px;line-height:1.3}.cj-tab-description{display:none}
 .cj-example{align-items:flex-start;font-size:11px}.cj-example b{font-size:13px}.cj-play{font-size:11px;padding:8px;min-height:40px}
 .cj-scene-wrap{padding:20px;min-height:410px}.cj-scene-heading{align-items:flex-start;flex-direction:column}
 .cj-scene h3{font-size:21px}.cj-split aside h3{font-size:19px}.cj-app-bar>small{display:none}
 .cap-tabs{justify-content:center;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.cap-tabs .cap-dot,.cap-tabs .cap-dot.on{padding:10px 5px;font-size:11px}
 .cap-mobile-summary{display:flex;flex-direction:column;justify-content:center;gap:10px;height:100%;padding:18px;color:#e5edf9;font:500 14px/1.45 var(--ui)}
 .home-chapters .cap-shell-scroll{height:760px}
 .ai-output-title b{font-size:13px}.ai-output p{font-size:12px}.ai-task-owner{font-size:11px}
 .ai-insight-metrics span{font-size:11px}
 .cap-mobile-summary>h4{margin:0;font-size:18px}.cap-mobile-summary>p{margin:0;color:#b7c8de;font-size:13px}
 .cap-mobile-summary ol{list-style:none;display:grid;gap:9px;padding:0;margin:0}.cap-mobile-summary li{padding:11px 13px;background:#1c2d46;border:1px solid #425873;border-radius:10px;display:flex;align-items:center;gap:10px;font-size:14px}
 .cap-mobile-summary li .ico{width:19px;height:19px;flex:none;color:#9bc6f1}.cap-mobile-summary li:last-child{border-color:#479a74;background:#143d34}
 .cap-mobile-summary small{display:block;font-size:12px;color:#b7c8de;margin-top:3px}
 .cap-shell[data-capability=workflow] .studio-art,.cap-shell[data-capability=follow-ups] .onit-art{display:none}
 .cap-phone{background:#f7f8f5;color:#1d3029;padding:25px 16px 17px;border:4px solid #87918f;box-shadow:0 0 0 2px #101b2e;border-radius:28px;max-width:260px;width:100%;margin:0 auto;position:relative}
 .cap-phone:before{content:'';position:absolute;top:8px;left:calc(50% - 25px);width:50px;height:8px;background:#17221e;border-radius:10px}
 .cap-phone>small{color:#586b62;margin:8px 0}.cap-phone>h4{font-size:19px;margin:18px 0 10px;line-height:1.2}
 .cap-phone p{font-size:13px;color:#465c50;line-height:1.5;margin:9px 0}.cap-phone .cap-notice{padding:10px;background:#e8eddf;border-radius:10px;font-size:12px}
 .cap-phone-channels{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;font-size:11px;color:#287153;margin:12px 0}
 .cap-phone-proof{display:block;background:#dff0e5;padding:10px;text-align:center;font-size:13px;color:#206447;border-radius:10px;margin-top:14px}
 .cap-mobile-summary .cap-phone-label{font-size:12px;color:#b7c8de;text-align:center;margin-top:10px}
 .connect-available-tools{width:calc(50% - 75px);gap:6px;flex-wrap:wrap}.connect-available-tool{width:57px;padding:9px 4px;gap:5px}.connect-available-tool span{font-size:9px}
 .connect-available-tool .ico{width:20px;height:20px}
 .integration-availability{gap:10px}.integration-status{padding:14px}.integration-status h3{font-size:14px}
}
@media(max-width:600px){
 .contract-journey{margin-top:22px}.cj-example>span{max-width:210px}
 .cj-scene-wrap{padding:16px;min-height:450px}.cj-split{grid-template-columns:1fr;gap:18px}
 .cj-scene{font-size:14px}.cj-scene p{font-size:14px}.cj-scene h3{font-size:20px}
 .cj-document{padding:18px}.cj-document h4{font-size:23px}.cj-document p{font-size:13px}
 .cj-document h5{font-size:11px;margin-top:14px}.cj-parties{font-size:11px!important}
 .cj-fields{grid-template-columns:1fr}.cj-flow{gap:8px}.cj-flow-node{padding:10px;min-height:70px}.cj-flow-node b{font-size:12px}
 .cj-split aside{gap:12px}.cj-split aside .cj-field{padding:7px 0}.cj-scene .cj-note{font-size:12px!important}
 .cj-work-items article{padding:13px;flex-wrap:wrap;gap:8px}.cj-work-meta{justify-content:flex-start;width:100%}
 .cj-work-items h4{font-size:15px}.cj-work-items small{font-size:12px}.cj-work-meta{font-size:13px}
 .cj-panel-foot{padding:12px;font-size:12px}.cj-next{padding:8px 10px;font-size:12px}.cj-panel-foot>span{max-width:200px}
 .cj-app-bar{padding:13px;font-size:11px}.cj-app-bar>b{font-size:13px}
 .cj-metrics{gap:7px}.cj-metrics>div{padding:14px 9px}.cj-metrics strong{font-size:27px}
 .cj-bridge{font-size:13px;margin-top:20px;line-height:1.6}.cj-bridge b{display:block;margin-bottom:4px}
 .integration-availability{grid-template-columns:1fr}.integration-status{padding:15px}
 .integration-status p{margin-bottom:10px}.integration-status h3{font-size:15px}
 .home-chapters .connect-available-stage{height:170px}.connect-available-tools{width:calc(50% - 62px)}
 .home-chapters .cap-shell-copy .cap-copy{font-size:14px;line-height:1.5}
 .cap-tabs .cap-dot,.cap-tabs .cap-dot.on{font-size:10.5px}
 .nvj-category{font-size:11px;line-height:1.5;max-width:330px;margin-inline:auto}
}
@media(prefers-reduced-motion:no-preference){
 .cj-scene-wrap{animation:cj-appear .2s ease-out}
 @keyframes cj-appear{from{opacity:.7;transform:translateY(3px)}to{opacity:1;transform:none}}
}
/* The second hero introduces the product before its detailed walkthrough. */
.home-chapters>#navio-intro.navio-product-hero{height:calc(100dvh - var(--bar,0px));min-height:0;padding:96px var(--gutter) max(22px,calc(var(--ck-h,0px) + 14px));display:flex;flex-direction:column;align-items:center;gap:20px;background:radial-gradient(ellipse at 50% 65%,#dceaf9 0, #f0f5fb 44%,#f7f7f5 80%);color:var(--ink)}
.nph-heading{text-align:center;flex:none}
.nph-brand{margin:0 0 14px;font:700 15px/1.3 var(--ui);letter-spacing:.01em}
.nph-brand sup{font-size:8px;vertical-align:super}
.nph-brand>span{font-weight:450;color:var(--slate);margin-left:10px;padding-left:10px;border-left:1px solid #bdc8d7}
.nph-stage-heading{margin:0;font:650 clamp(36px,4.4vw,65px)/1.08 var(--font);letter-spacing:-.045em}
.nph-heading em{color:#2867aa;font-style:italic}
.nph-description{margin:15px auto 0;max-width:720px;font:450 clamp(14px,1.4vw,18px)/1.5 var(--ui);color:var(--slate);text-wrap:balance}
.nph-canvas{position:relative;isolation:isolate;flex:1;min-height:0;max-height:430px;width:min(1060px,100%);display:grid;grid-template-columns:24% 30% 27%;grid-template-rows:1fr 1fr;column-gap:9.5%;row-gap:18px;align-content:center;align-items:center;margin:auto 0}
.nph-wires{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}
.nph-wires path{fill:none;stroke:#cda454;stroke-width:1.5;vector-effect:non-scaling-stroke}
.nph-wires circle{fill:#d3a142;stroke:#f4f8fc;stroke-width:2}
.nph-node{padding:22px;border:1px solid #d9e2ee;border-radius:18px;background:#ffffffed;box-shadow:0 12px 35px -25px #1c375e50;text-align:left}
.nph-label{display:block;margin-bottom:14px;color:#687c97;font:650 10px/1.3 var(--ui);letter-spacing:.12em}
.nph-node h3{font:650 18px/1.3 var(--ui);letter-spacing:-.02em;margin:0;color:var(--ink)}
.nph-node p{font:450 12px/1.4 var(--ui);color:var(--slate);margin:5px 0 0}
.nph-owner{grid-column:1;grid-row:1/3}
.nph-person{display:flex;align-items:center;gap:12px}
.nph-avatar{display:grid;place-items:center;flex:none;width:42px;height:42px;background:#e7eef9;border-radius:50%;color:#376292;font:650 13px var(--ui)}
.nph-agreement{grid-column:2;grid-row:1/3;background:#fff;border:1px solid #d8e0ea;border-radius:5px 5px 18px 18px;box-shadow:0 22px 45px -20px #2a4b7040;padding:25px;transform:rotate(-2deg);text-align:left}
.nph-paper-top{display:flex;gap:8px;align-items:center;font:550 10px var(--ui);color:#6e7e95}
.nph-paper-top>.ico{width:18px;height:18px;color:#507db1}
.nph-signed{margin-left:auto;display:flex;align-items:center;gap:3px;color:#287557;font-size:10px}
.nph-signed .ico{width:13px;height:13px}
.nph-agreement h3{font:600 30px/1.08 var(--font);letter-spacing:-.035em;margin:25px 0 10px}
.nph-parties{font:450 10px/1.5 var(--ui);color:var(--slate);margin:0}
.nph-paper-lines{margin:18px 0;display:grid;gap:7px}
.nph-paper-lines i{height:3px;border-radius:4px;background:#edf0f5}.nph-paper-lines i:last-child{width:65%}
.nph-agreement blockquote{margin:0;padding:13px;background:#edf4fc;border-left:2px solid #7ca8d3;font:500 13px/1.5 var(--ui);color:#2d4b6f}
.nph-agreement blockquote small{display:block;font-size:8px;letter-spacing:.08em;margin-bottom:7px;color:#6383a5}
.nph-paper-sign{display:flex;justify-content:space-between;gap:12px;margin-top:22px;padding-top:10px;border-top:1px solid #e4e9ef;font:500 12px var(--font);color:#536b88}
.nph-deliverable{grid-column:3;grid-row:1;align-self:end;transition:border-color .7s,box-shadow .7s}
.nph-status{display:flex;align-items:center;gap:6px;margin-top:15px;font:600 12px var(--ui);color:#946e25;min-height:23px;transition:color .7s}
.nph-status .ico,.nph-proof .ico{width:15px;height:15px;flex:none}
.nph-node .nph-proof{display:flex;align-items:center;gap:6px;font-size:11px;margin-top:5px}
.is-delivered .nph-deliverable{border-color:#99c9af;box-shadow:0 12px 40px -25px #34946660}
.is-delivered .nph-status{color:#217b51}
.nph-deadline{grid-column:3;grid-row:2;align-self:start}
.nph-example{position:absolute;bottom:-9px;left:0;font:450 10px var(--ui);color:#72819a}
.nph-explore{display:inline-flex;align-items:center;gap:10px;min-height:40px;font:650 14px var(--ui);color:var(--ink);text-decoration:none;flex:none}
.nph-explore .ico{width:17px;height:17px;transform:rotate(90deg)}
.nph-explore:hover{color:#2867aa}.nph-explore:focus-visible{outline:2px solid #2867aa;outline-offset:5px;border-radius:3px}
@media(max-height:800px) and (min-width:701px){
 .home-chapters>#navio-intro.navio-product-hero{padding-top:88px;gap:12px}
 .nph-stage-heading{font-size:clamp(34px,4vw,54px)}.nph-brand{margin-bottom:8px}.nph-description{margin-top:10px}
 .nph-agreement{padding:18px}.nph-agreement h3{margin-top:15px;font-size:26px}.nph-paper-lines{margin:12px 0}.nph-paper-sign{margin-top:14px}
 .nph-node{padding:18px}.nph-label{margin-bottom:10px}.nph-canvas{row-gap:12px}
}
@media(max-width:700px){
 .home-chapters>#navio-intro.navio-product-hero{padding:78px 20px max(16px,calc(var(--ck-h,0px) + 10px));gap:14px;scroll-margin-top:-68px}
 .nph-brand{font-size:12px;margin-bottom:10px}.nph-stage-heading{font-size:clamp(31px,8vw,42px);text-wrap:balance}
 .nph-heading em{display:block}.nph-description{font-size:13px;line-height:1.5;margin-top:10px;max-width:340px}
 .nph-canvas{width:min(390px,100%);grid-template-columns:1fr 1fr;grid-template-rows:1fr auto auto;gap:10px;max-height:490px;align-items:stretch}
 .nph-agreement{grid-column:1/3;grid-row:1;transform:none;padding:16px 20px;max-width:290px;width:90%;justify-self:center;align-self:center}
 .nph-agreement h3{font-size:24px;margin:10px 0 6px}.nph-agreement h3 br{display:none}.nph-agreement h3 br:after{content:' '}
 .nph-agreement h3{max-width:180px}.nph-paper-lines{display:none}.nph-agreement blockquote{margin-top:10px;padding:10px;font-size:12px}
 .nph-paper-sign{margin-top:12px;padding-top:8px;font-size:13px}
 .nph-owner{grid-column:1;grid-row:2}.nph-deadline{grid-column:2;grid-row:2;align-self:stretch}
 .nph-deliverable{grid-column:1/3;grid-row:3;display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-self:stretch}
 .nph-node{padding:13px;border-radius:13px}.nph-label{font-size:9px;margin-bottom:8px}.nph-node h3{font-size:14px}.nph-node p{font-size:10px}
 .nph-avatar{width:28px;height:28px;font-size:10px}.nph-person{gap:7px}
 .nph-deliverable .nph-label{grid-column:1/3;margin:0}.nph-status{margin:0;font-size:10px;grid-column:2;grid-row:2}.nph-node .nph-proof{grid-column:1/3;font-size:10px;margin-top:2px}
 .nph-wires{display:none}.nph-agreement:after{content:'';position:absolute;height:18px;width:1px;background:#cda454;bottom:-19px;left:50%}.nph-agreement{position:relative}
 .nph-example{display:none}.nph-explore{font-size:12px;min-height:36px}
}
@media(max-width:700px) and (max-height:740px){
 .home-chapters>#navio-intro.navio-product-hero{gap:8px;padding-top:72px}
 .nph-stage-heading{font-size:30px}.nph-brand{margin-bottom:6px}.nph-description{font-size:12px;margin-top:6px}
 .nph-agreement{padding:11px 16px}.nph-agreement h3{font-size:20px;margin:7px 0 4px}.nph-agreement blockquote{margin-top:7px;padding:8px;line-height:1.35}
 .nph-paper-sign{margin-top:8px;padding-top:6px;font-size:11px}.nph-node{padding:10px}.nph-label{margin-bottom:5px}.nph-canvas{gap:8px}
}
@media(min-width:701px) and (max-height:550px){
 .home-chapters>#navio-intro.navio-product-hero{height:auto;min-height:100dvh}.nph-canvas{flex:none;height:320px;margin:12px 0}
}
@media(prefers-reduced-motion:reduce){.nph-deliverable,.nph-status{transition:none}}
/* One continuous draft-to-delivery demonstration, with stable layout bounds. */
.nph-animated .nph-heading{width:100%}
.nph-headline-swap{display:block;animation:nph-heading-in .6s ease both}
.nph-animated .nph-canvas{max-height:430px}
.nph-animated .nph-agreement{transition:transform .85s cubic-bezier(.2,.7,.2,1);transform:rotate(-2deg) scale(1.06)}
.nph-animated .has-work .nph-agreement{transform:rotate(-2deg)}
.nph-animated .nph-node,.nph-animated .nph-wires{opacity:0;visibility:hidden;transition:opacity .7s,transform .85s,visibility .7s}
.nph-animated .nph-owner{transform:translateX(35px)}
.nph-animated .nph-deliverable,.nph-animated .nph-deadline{transform:translateX(-35px)}
.nph-animated .has-work .nph-node,.nph-animated .has-work .nph-wires{opacity:1;visibility:visible;transform:none}
.nph-animated .has-work .nph-owner{transition-delay:.12s}
.nph-animated .has-work .nph-deadline{transition-delay:.3s}
.nph-animated .nph-live-clause{min-height:130px;animation:nph-clause-in .65s ease both}
.nph-live-clause del,.nph-live-clause ins{display:block;padding:2px 4px;font-size:11px;line-height:1.5}
.nph-live-clause del{background:#fbe3e9;color:#a44660;margin-top:5px}
.nph-live-clause ins{background:#dff2e7;color:#256a4b;text-decoration:none;animation:nph-clause-in .8s .2s both}
.nph-sign-area{height:48px;margin-top:8px}
.nph-sign-area .nph-paper-sign{margin-top:0}
.nph-sign-area .nph-paper-sign span{animation:nph-sign-in 1.1s ease both}
.nph-sign-area .nph-paper-sign span+span{animation-delay:.5s}
.nph-review-note{font:500 11px/1.5 var(--ui);margin:0;padding-top:10px;color:#73819a}
.nph-animated[data-stage='0'] .nph-signed{color:#6e7e95}
.nph-animated[data-stage='1'] .nph-signed{color:#986e23}
.nph-controls{display:flex;align-items:center;justify-content:center;gap:16px;flex:none}
.nph-stages{display:flex;align-items:center;gap:14px}
.nph-stages button{display:flex;align-items:center;gap:6px;min-height:36px;padding:7px 2px;border:0;background:none;color:#7a899e;font:550 12px var(--ui);cursor:pointer}
.nph-stage-dot{width:5px;height:5px;border-radius:50%;background:#bcc8d7}
.nph-stages button.active{color:#235e9e;font-weight:700}
.nph-stages button.active .nph-stage-dot{background:#c99b3e;box-shadow:0 0 0 4px #d1a13b1c}
.nph-stages button.complete .nph-stage-dot{background:#609b87}
.nph-playback{display:grid;place-items:center;width:36px;height:36px;border:1px solid #d8e1eb;border-radius:50%;color:#42688d;background:#ffffffb0;cursor:pointer}
.nph-playback .ico{width:14px;height:14px}
.nph-controls button:focus-visible{outline:2px solid #2867aa;outline-offset:3px}
@keyframes nph-heading-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes nph-clause-in{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes nph-sign-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@media(max-width:700px){
 .nph-animated .nph-agreement,.nph-animated .has-work .nph-agreement{transform:none}
 .nph-animated .nph-live-clause{min-height:105px}
 .nph-animated .nph-sign-area{height:30px;margin-top:8px}
 .nph-review-note{font-size:10px;padding-top:4px}
 .nph-animated .nph-canvas{max-height:490px}
 .nph-animated:not([data-stage='3']):not([data-stage='4']) .nph-agreement{transform:translateY(55px) scale(1.03)}
 .nph-animated:not([data-stage='3']):not([data-stage='4']) .nph-agreement:after{opacity:0}
 .nph-controls{gap:10px;width:100%}.nph-stages{gap:10px}.nph-stages button{font-size:10px;gap:4px;min-height:40px}
 .nph-playback{flex:none;width:32px;height:32px}
}
@media(max-width:700px) and (max-height:740px){
 .nph-animated .nph-live-clause{min-height:94px;font-size:11px}
 .nph-animated .nph-live-clause small{margin-bottom:4px}
 .nph-animated .nph-paper-sign{font-size:11px}
 .nph-animated .nph-sign-area{height:24px;margin-top:4px}
 .nph-animated .nph-canvas{row-gap:6px}
 .nph-animated .nph-stages button{min-height:32px}
}
@media(prefers-reduced-motion:reduce){
 .nph-animated *, .nph-animated *:before,.nph-animated *:after{animation:none!important;transition:none!important}
}
[data-motion=paused] .nph-animated *{animation-play-state:paused!important}
/* Typed agreement becomes people and dated deliverables; no playback chrome. */
.nph-sequence .nph-brand{font:600 clamp(28px,3.2vw,46px)/1.05 var(--font);letter-spacing:-.045em;margin-bottom:16px}
.nph-sequence .nph-stage-heading{font:500 clamp(18px,1.8vw,25px)/1.3 var(--font);letter-spacing:-.02em}
.nph-sequence.nph-animated .nph-canvas{display:block;max-height:480px;min-height:0}
.nph-sequence.nph-animated .nph-agreement{position:absolute;left:50%;top:50%;width:36%;max-width:365px;margin:0;transform:translate(-50%,-50%);transition:left .7s cubic-bezier(.2,.7,.2,1),transform .7s}
.nph-sequence.nph-animated .has-work .nph-agreement{left:19%;transform:translate(-50%,-50%)}
.nph-sequence .nph-agreement h3{font-size:27px;margin:16px 0 8px}
.nph-sequence .nph-document-body{height:225px;margin-top:15px;font:450 12px/1.6 var(--ui);color:#405670}
.nph-typing{white-space:pre-wrap;overflow-wrap:anywhere;font:450 12px/1.6 var(--ui)}
.nph-typing-caret{display:inline-block;width:1px;height:1em;margin-left:2px;vertical-align:-.1em;background:#55728e;animation:nph-caret .9s steps(1,end) infinite}
@keyframes nph-caret{50%{opacity:0}}
.nph-sequence .nph-headline-swap,.nph-sequence .nph-live-clause,.nph-sequence .nph-live-clause ins{animation-name:nph-quiet-fade}
@keyframes nph-quiet-fade{from{opacity:0}to{opacity:1}}
.nph-sequence .nph-scope{margin:0 0 10px;font-size:11px}
.nph-sequence.nph-animated .nph-live-clause{min-height:110px;padding:11px;font-size:12px;line-height:1.5}
.nph-live-clause mark{background:#fff0c4;color:#735a1c;box-decoration-break:clone;padding:1px 3px}
.nph-sequence .nph-insurance{font-size:11px;margin:12px 0 0;line-height:1.5}
.nph-insurance small{display:block;font-size:8px;letter-spacing:.06em;color:#6b82a0;margin-bottom:5px}
.nph-sequence .nph-sign-area{height:52px;margin-top:0}
.nph-sequence .nph-review-note{padding:0;font-size:10px}
.nph-output-stack{position:absolute;left:54%;right:0;top:50%;transform:translateY(-50%);display:grid;gap:14px}
.nph-sequence .nph-owner,.nph-sequence .nph-deliverable{transform:translateX(-14px)}
.nph-sequence .nph-output-stack .nph-node{position:relative;grid-area:auto;display:block;width:100%;padding:18px;align-self:auto}
.nph-sequence .nph-people{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.nph-sequence .nph-person,.nph-sequence .nph-person>div{min-width:0}
.nph-sequence .nph-person{gap:10px}
.nph-sequence .nph-person h3{font-size:14px}
.nph-sequence .nph-avatar{width:32px;height:32px;font-size:10px}
.nph-sequence .nph-label{margin-bottom:10px;font-size:9px}
.nph-deliverable-top{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}
.nph-deliverable-top .nph-label{margin:0}
.nph-due{font:600 11px var(--ui);color:#386a9d;background:#edf4fc;padding:5px 8px;border-radius:6px;white-space:nowrap}
.nph-sequence .nph-node h3{font-size:17px}
.nph-sequence .nph-node .nph-task-owner{font-size:11px;margin-top:8px}
.nph-sequence .nph-status{margin-top:10px;font-size:11px;min-height:18px}
.nph-sequence .has-work .nph-deliverable:nth-child(2){transition-delay:.3s}
.nph-sequence .has-work .nph-deliverable:nth-child(3){transition-delay:.6s}
@media(max-width:1000px) and (min-width:701px){
 .nph-sequence.nph-animated .nph-agreement{width:42%}
 .nph-sequence.nph-animated .has-work .nph-agreement{left:23%}
 .nph-sequence .nph-output-stack{left:54%}
 .nph-sequence .nph-output-stack .nph-node{padding:12px}
 .nph-sequence .nph-people{gap:8px}.nph-sequence .nph-person{gap:5px}.nph-sequence .nph-person h3{font-size:12px}
}
@media(max-width:700px){
 .nph-sequence .nph-brand{font-size:30px;margin-bottom:12px}
 .nph-sequence .nph-stage-heading{font-size:19px}
 .nph-sequence .nph-heading em{display:inline}
 .nph-sequence.nph-animated .nph-canvas{max-height:600px}
 .nph-sequence.nph-animated .nph-agreement,.nph-sequence.nph-animated:not([data-stage='3']):not([data-stage='4']) .nph-agreement{width:90%;max-width:320px;left:50%;top:50%;transform:translate(-50%,-50%);padding:18px;transition:top .9s,transform .9s,left .9s}
 .nph-sequence.nph-animated .has-work .nph-agreement,.nph-sequence.nph-animated[data-stage='5'] .has-work .nph-agreement{left:50%;top:0;transform:translateX(-50%);padding:12px 16px}
 .nph-sequence .nph-agreement h3{font-size:24px;margin:12px 0 8px;max-width:none}
 .nph-sequence .nph-document-body{height:225px}
 .nph-sequence .nph-agreement:after{display:none}
 .nph-sequence .has-work .nph-document-body{height:auto;margin-top:8px}
 .nph-sequence .has-work .nph-document-body .nph-scope,.nph-sequence .has-work .nph-document-body .nph-insurance{display:none}
 .nph-sequence.nph-animated .has-work .nph-live-clause{min-height:0;padding:8px;font-size:11px}
 .nph-sequence .has-work .nph-agreement h3{font-size:19px;margin:6px 0 4px}
 .nph-sequence .has-work .nph-sign-area{height:22px;margin-top:6px}
 .nph-sequence .has-work .nph-paper-sign{font-size:11px;padding-top:5px}
 .nph-sequence .nph-output-stack{left:0;right:0;top:auto;bottom:0;transform:none;gap:9px}
 .nph-sequence .nph-output-stack .nph-node{padding:12px}
 .nph-sequence .nph-output-stack .nph-owner{padding:10px 12px}
 .nph-sequence .nph-people{gap:8px}.nph-sequence .nph-person h3{font-size:12px}.nph-sequence .nph-person p{font-size:10px}
 .nph-sequence .nph-label{font-size:8px;margin-bottom:6px}
 .nph-sequence .nph-deliverable-top{margin-bottom:6px}
 .nph-sequence .nph-deliverable-top .nph-label{margin:0}
 .nph-sequence .nph-due{font-size:10px;padding:4px 7px}
 .nph-sequence .nph-node h3{font-size:14px}
 .nph-sequence .nph-node .nph-task-owner{font-size:10px;margin-top:4px}
 .nph-sequence .nph-status{font-size:10px;margin-top:5px}
}
@media(max-width:700px) and (max-height:740px){
 .nph-sequence .nph-brand{font-size:30px;margin-bottom:10px}
 .nph-sequence .nph-stage-heading{font-size:18px}
 .nph-sequence .nph-heading em{display:inline}
 .nph-sequence .nph-document-body{height:225px}
 .nph-sequence .nph-agreement h3{font-size:21px}
 .nph-sequence .nph-output-stack .nph-node{padding:9px 12px}
 .nph-sequence .nph-output-stack .nph-owner{padding:7px 12px}
 .nph-sequence .nph-status{min-height:15px;margin-top:3px}
 .nph-sequence .nph-avatar{width:25px;height:25px}
 .nph-sequence .has-work .nph-agreement .nph-parties{display:none}
 .nph-sequence .has-work .nph-sign-area{height:19px;margin-top:3px}
 .nph-sequence .has-work .nph-agreement h3{font-size:17px}
 .nph-sequence .has-work .nph-paper-top{font-size:9px}
}
@media(min-width:701px) and (max-height:650px){.nph-sequence.nph-animated .nph-canvas{height:460px;flex:none}}
@media(min-width:901px) and (max-height:800px){.nph-sequence .nph-brand{font-size:38px}}
@media(max-height:700px){.nph-sequence .nph-brand{font-size:28px}}
@media(min-width:600px) and (max-height:500px){.nph-sequence .nph-brand{font-size:28px}}
/* Product-intro typography and On It task rows stay within our brand system. */
.nph-sequence{--font:NuvenaFigtree,Figtree,NuvenaRound,Quicksand,sans-serif;--ui:var(--font)}
.nph-sequence .nph-brand sup{font-size:.25em;vertical-align:super;letter-spacing:0}
.nph-sequence .nph-paper-sign{margin:0;padding-top:5px;gap:12px;font:500 10px var(--font)}
.nph-company-sign{flex:1;min-width:0}
.nph-company-sign svg{display:block;width:112px;max-width:100%;height:30px;overflow:visible}
.nph-company-sign>svg path{fill:none;stroke:#284e78;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation:nph-signature-draw .9s .15s both}
.nph-company-sign:nth-child(2)>svg path{animation-delay:.8s}
.nph-company-sign small{display:block;font:500 9px/1.4 var(--font);white-space:nowrap;color:#5a6a80}
@keyframes nph-signature-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.nph-sequence[data-running=false] .nph-company-sign>svg path{animation-play-state:paused}
.nph-sequence .nph-output-stack{gap:12px}
.nph-sequence .nph-output-stack .nph-owner{background:#f9faf7;border-color:#dae2dc;border-radius:16px;padding:16px 18px}
.nph-work-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.nph-work-heading>span:first-child{display:flex;align-items:center;gap:7px;font:700 18px NuvenaRound,Quicksand,var(--font);color:#23392f}
.nph-work-heading .ico{width:20px;height:20px;color:#9c7c39}
.nph-work-count{border-radius:20px;background:#e9eee8;padding:5px 9px;font:600 10px var(--font);color:#496153}
.nph-sequence .nph-person h3{font-size:13px}
.nph-sequence .nph-output-stack .nph-deliverable{padding:0;overflow:hidden;border-color:#dce3de;border-radius:16px;background:#fff}
.nph-task-row{display:flex;align-items:center;gap:12px;padding:20px 18px}
.nph-task-avatar{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#526d8b;color:white;font:600 11px var(--font)}
.nph-task-avatar .ico{width:19px;height:19px}
.nph-deliverable:last-child .nph-task-avatar{background:#7a6a88}
.is-delivered .nph-deliverable .nph-task-avatar{background:#3b8062}
.nph-task-copy{flex:1;min-width:0}
.nph-task-copy .nph-task-owner{display:block;color:#68766e;font:500 11px/1.4 var(--font);margin:0 0 3px}
.nph-sequence .nph-task-copy h3{font:650 16px/1.3 var(--font);letter-spacing:-.025em}
.nph-task-row .nph-due{background:#eef1eb;color:#4b6052;border-radius:20px;font-size:11px;padding:6px 9px}
.nph-task-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #edf0eb;padding:10px 18px;background:#fcfdfa}
.nph-task-source{font:500 10px var(--font);color:#7e8b81}
.nph-sequence .nph-task-footer .nph-status{margin:0;font:550 11px var(--font);color:#947633}
.nph-sequence .is-delivered .nph-task-footer .nph-status{color:#287453}
@media(max-width:1000px){
 .nph-task-row{padding:14px 12px;gap:8px}.nph-task-avatar{width:29px;height:29px;font-size:9px}
 .nph-sequence .nph-task-copy h3{font-size:13px}.nph-task-row .nph-due{font-size:9px;padding:5px 7px}
 .nph-task-footer{padding:8px 12px}.nph-sequence .nph-task-footer .nph-status{font-size:10px}
}
@media(max-width:700px){
 .nph-work-heading{margin-bottom:8px}.nph-work-heading>span:first-child{font-size:15px}.nph-work-count{font-size:9px}
 .nph-sequence .nph-output-stack{gap:8px}
 .nph-sequence .nph-output-stack .nph-owner{padding:10px 12px}
 .nph-sequence .has-work .nph-sign-area{height:35px}
 .nph-sequence .has-work .nph-company-sign svg{height:18px;width:82px}
 .nph-sequence .has-work .nph-company-sign small{font-size:8px}
 .nph-task-row{padding:12px}.nph-task-footer{padding:7px 12px}
}
@media(max-width:700px) and (max-height:740px){
 .nph-sequence .nph-document-body{height:205px}
 .nph-work-heading{margin-bottom:5px}.nph-work-heading>span:first-child{font-size:13px}
 .nph-sequence .nph-output-stack .nph-owner{padding:7px 10px}
 .nph-task-row{padding:9px 10px}.nph-task-footer{padding:5px 10px}
 .nph-sequence .has-work .nph-sign-area{height:30px}
 .nph-sequence .has-work .nph-company-sign svg{height:14px}
}
/* Curved, element-anchored callouts: one agreement becomes one work list. */
.nph-curves{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
.nph-curves path{fill:none;stroke:#a6b4c4;stroke-width:1.2;stroke-linecap:round}
.nph-curves circle{fill:#f8fbff;stroke:#7995b4;stroke-width:1.4}
.has-work .nph-curves path{stroke:#b99859}
.nph-callout{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;max-width:210px;padding:11px 14px;border-radius:30px;background:#fff;box-shadow:0 8px 26px -12px #283d6150;font:600 12px/1.3 var(--font);color:#374d6b;white-space:nowrap;animation:nph-quiet-fade .3s both}
.nph-callout .ico{width:17px;height:17px;color:#6e63a7}
.nph-sequence .nph-typing{padding-left:10px;border-left:2px solid #b3c6e3;background:linear-gradient(90deg,#eef4fc90,transparent)}
.nph-sequence[data-stage='4'] .nph-live-clause{box-shadow:0 0 0 2px #a6b9df;transition:box-shadow .4s}
.nph-sequence .nph-company-sign{position:relative}
.nph-sequence .nph-company-sign svg{width:82px}
.nph-esign-stamp{position:absolute;right:0;top:4px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:3px;border:1px solid #8ab3aa;outline:1px solid #c9dfd9;outline-offset:2px;border-radius:3px;color:#46776b;font:700 5px/1.2 var(--font);letter-spacing:.03em;transform:rotate(-7deg);animation:nph-stamp .3s 1.1s both}
.nph-company-sign:nth-child(2) .nph-esign-stamp{animation-delay:1.75s}
.nph-sequence .nph-esign-stamp .ico{width:13px;height:13px}
@keyframes nph-stamp{from{opacity:0;transform:rotate(-7deg) scale(1.15)}to{opacity:1;transform:rotate(-7deg) scale(1)}}
.nph-sequence .nph-output-stack{gap:0;border:1px solid #dbe4df;border-radius:19px;background:#fff;box-shadow:0 18px 40px -28px #233a5c60;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.nph-sequence .has-work .nph-output-stack{opacity:1;visibility:visible}
.nph-sequence .nph-output-stack .nph-owner{border:0;border-radius:18px 18px 0 0;padding:18px 20px;background:#f8faf7;box-shadow:none}
.nph-work-heading{margin-bottom:6px}
.nph-work-heading>span:first-child{font:650 17px var(--font)}
.nph-sequence .nph-list-caption{margin:0;font:450 11px/1.4 var(--font);color:#708176}
.nph-sequence .nph-output-stack .nph-deliverable{border:0;border-top:1px solid #e6ebe6;border-radius:0;box-shadow:none}
.nph-sequence .nph-task-row{padding:18px 20px 10px}
.nph-sequence .nph-task-footer{border:0;background:transparent;padding:0 20px 14px 70px}
.nph-list-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 20px;border-top:1px solid #e6ebe6;font:550 11px var(--font);color:#65776b}
.nph-channels{display:flex;align-items:center;gap:14px}
.nph-channel{position:relative;display:grid;place-items:center;width:25px;height:25px;color:#89968f}
.nph-channel>svg{width:19px;height:19px}
.nph-channel i{position:absolute;right:-4px;bottom:-1px;display:grid;place-items:center;width:12px;height:12px;background:#e5f3ea;border-radius:50%;color:#337652;opacity:0}
.nph-channel i .ico{width:10px;height:10px}
.is-sending .nph-channel{animation:nph-channel-send .6s var(--channel-delay) both}
.is-sending .nph-channel i{animation:nph-quiet-fade .3s calc(var(--channel-delay) + .45s) both}
.is-sent .nph-channel{color:#557164;animation:none}
.is-sent .nph-channel i{opacity:1;animation:none}
@keyframes nph-channel-send{0%{color:#89968f;transform:translateY(0)}50%{color:#306bb0;transform:translateY(-3px)}100%{color:#557164;transform:none}}
.nph-sequence[data-running=false] .nph-channels *,.nph-sequence[data-running=false] .nph-esign-stamp{animation-play-state:paused}
@media(min-width:701px) and (max-width:1000px){
 .nph-callout{font-size:10px;padding:9px;gap:5px}
 .nph-work-heading>span:first-child{font-size:13px}.nph-work-count{font-size:8px;padding:4px 6px}
 .nph-sequence .nph-task-row{padding:14px 12px 9px}.nph-sequence .nph-task-footer{padding:0 12px 12px 49px}
 .nph-list-foot{padding:10px 12px;font-size:10px}
}
@media(max-width:700px){
 .nph-callout{font-size:10px;padding:8px 11px;gap:5px}.nph-callout .ico{width:14px;height:14px}
 .nph-sequence.nph-animated[data-stage='6'] .has-work .nph-agreement{left:50%;top:0;transform:translateX(-50%);padding:12px 16px}
 .nph-sequence .nph-output-stack .nph-owner{padding:10px 12px}
 .nph-work-heading>span:first-child{font-size:13px}.nph-work-heading{margin-bottom:4px}
 .nph-work-count{font-size:8px;padding:4px 6px}.nph-sequence .nph-list-caption{font-size:10px}
 .nph-sequence .nph-task-row{padding:12px 12px 7px}.nph-sequence .nph-task-footer{padding:0 12px 10px 49px}
 .nph-list-foot{padding:9px 12px;font-size:10px}.nph-channels{gap:12px}
 .nph-sequence .has-work .nph-esign-stamp{top:0;padding:2px;font-size:4px;outline-offset:1px}
 .nph-sequence .has-work .nph-esign-stamp .ico{width:9px;height:9px}
}
@media(max-width:700px) and (max-height:740px){
 .nph-sequence .nph-task-row{padding:9px 10px 5px}.nph-sequence .nph-task-footer{padding:0 10px 7px 47px}
 .nph-sequence .nph-output-stack .nph-owner{padding:8px 10px}.nph-list-foot{padding:6px 10px}
}
/* The brief precedes drafting; extraction, ownership and proof are separate beats. */
.nph-detailed[data-stage='-1'] .nph-agreement{display:none}
.nph-brief-scene{width:min(590px,100%);height:100%;margin:auto;display:flex;flex-direction:column;justify-content:center;gap:40px}
.nph-brief-intro{text-align:center}.nph-brief-intro>.ico{width:30px;height:30px;color:#667bb4;margin:0 auto 12px}
.nph-brief-intro h3{margin:0;font:600 24px/1.2 var(--font);letter-spacing:-.03em}
.nph-brief-intro p{margin:10px 0 0;color:#78869c;font:450 14px var(--font)}
.nph-composer{padding:20px 24px;background:#fff;border:1px solid #dbe3ee;border-radius:24px;box-shadow:0 18px 45px -28px #304f7760}
.nph-voice-status{display:flex;align-items:center;gap:8px;color:#697d9b;font:550 12px var(--font)}
.nph-voice-status>.ico{width:16px;height:16px}.nph-wave{display:flex;gap:3px;align-items:center;height:20px;margin-left:auto}
.nph-wave i{height:14px;width:2px;border-radius:2px;background:#738bb5;animation:nph-wave .65s var(--beat) infinite alternate}
@keyframes nph-wave{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.nph-brief-text{min-height:70px;margin:20px 0;font:450 17px/1.55 var(--font);color:#2a3f5f}
.nph-composer-foot{display:flex;align-items:center;justify-content:space-between;font:550 11px var(--font);color:#7f8ca2}
.nph-submit{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--action-dark);color:white}.nph-submit .ico{width:17px;height:17px}
.nph-detailed[data-running=false] .nph-wave i{animation-play-state:paused}
.nph-detailed .nph-callout{white-space:normal;width:190px;max-width:190px;padding:10px 13px;gap:9px}
.nph-detailed .nph-typing{font-size:11px;line-height:1.4}
.nph-callout b{display:block;font:600 12px/1.3 var(--font)}.nph-callout small{display:block;font:450 10px/1.4 var(--font);color:#8090a3;margin-top:3px}
.nph-detailed .nph-callout-left .ico{color:#b18b47}
.nph-detailed .nph-esign-stamp{left:51px;right:auto;top:1px;background:#eff9f350;transform:rotate(-10deg);mix-blend-mode:multiply}
.nph-detailed .nph-company-sign>svg{width:105px}
.nph-detailed .nph-company-sign small{position:relative;z-index:1}
.nph-detailed .nph-output-stack .nph-owner{padding:13px 16px}
.nph-detailed .nph-work-heading>span:first-child{font-size:15px}
.nph-detailed .nph-task-row{padding:9px 16px;gap:9px}
.nph-detailed .nph-task-avatar{width:28px;height:28px;font-size:9px;background:#eaf0f8;color:#5b7598}
.nph-detailed .is-delivered .nph-task-avatar{background:#e4f3e9;color:#317351}
.nph-detailed .nph-task-copy h3{font:600 13px/1.25 var(--font)}
.nph-detailed .nph-task-copy .nph-task-owner{font-size:10px;line-height:1.25;margin:3px 0 0;color:#8995a6}
.nph-detailed .nph-task-copy .is-assigned{color:#516d8d;animation:nph-quiet-fade .45s both}
.nph-detailed .nph-due{font-size:10px;padding:4px 7px}
.nph-detailed .nph-list-foot{padding:9px 16px;min-height:40px}
.nph-detailed .nph-curves path{stroke-width:1;opacity:.65}.nph-detailed .nph-curves circle{r:2;stroke-width:1}
.nph-detailed .nph-output-stack .nph-deliverable{transition-delay:0s}
.nph-detailed[data-stage='4'] .nph-deliverable{animation:nph-quiet-fade .35s both}
.nph-detailed[data-stage='4'] .nph-deliverable:nth-child(3){animation-delay:.12s}
.nph-detailed[data-stage='4'] .nph-deliverable:nth-child(4){animation-delay:.24s}
.nph-detailed[data-stage='4'] .nph-deliverable:nth-child(5){animation-delay:.36s}
.nph-detailed[data-stage='4'] .nph-deliverable:nth-child(6){animation-delay:.48s}
.nph-detailed[data-stage='4'] .nph-deliverable:nth-child(7){animation-delay:.6s}
.nph-proof-panel{position:absolute;right:0;top:50%;transform:translateY(-50%);width:22%;padding:20px;border:1px solid #d4e2d8;border-radius:18px;background:#f7fbf7;box-shadow:0 15px 35px -28px #274b3860;animation:nph-quiet-fade .5s .3s both}
.nph-proof-icon{display:grid;place-items:center;width:34px;height:34px;background:#e5f1e9;border-radius:50%;color:#407659;margin-bottom:12px}.nph-proof-icon .ico{width:19px;height:19px}
.nph-proof-panel h3{margin:0;font:650 18px var(--font);letter-spacing:-.03em}.nph-proof-panel p{font:450 12px/1.5 var(--font);color:#718577;margin:8px 0 14px}
.nph-evidence{display:flex;gap:6px;align-items:center;font:500 10px var(--font);padding-top:12px;border-top:1px solid #dfe9e0;color:#507260}.nph-evidence .ico{width:15px;height:15px;flex:none}
.nph-proof-panel small{display:block;font:450 9px/1.4 var(--font);color:#7e9285;margin-top:7px}
@media(min-width:701px){
 .nph-detailed.nph-animated .has-proof .nph-agreement{left:15%;width:29%;padding:18px}
 .nph-detailed .has-proof .nph-agreement h3{font-size:24px}
 .nph-detailed .has-proof .nph-output-stack{left:38%;right:27%;transition:left .65s,right .65s,opacity .5s}
 .nph-detailed .has-proof .nph-task-row{padding-left:12px;padding-right:12px}
 .nph-detailed .has-proof .nph-task-copy h3{font-size:12px}.nph-detailed .has-proof .nph-due{font-size:9px}
 .nph-detailed .has-proof .nph-list-caption{font-size:10px}
}
@media(min-width:701px) and (max-width:1000px){
 .nph-detailed .nph-callout{max-width:155px;padding:8px}.nph-callout b{font-size:11px}.nph-callout small{font-size:9px}
 .nph-detailed .nph-task-row{padding:9px 10px;gap:6px}.nph-detailed .nph-task-copy h3{font-size:12px}
 .nph-detailed .has-proof .nph-output-stack{left:37%;right:0;top:0;transform:none}
 .nph-detailed .has-proof .nph-task-row{padding-top:6px;padding-bottom:6px}
 .nph-detailed .has-proof .nph-document-body{height:245px}
 .nph-detailed .has-proof .nph-insurance{font-size:9px}
 .nph-detailed.nph-animated .has-proof .nph-agreement{left:16%;width:31%;padding:12px}
 .nph-detailed .has-proof .nph-proof-panel{width:63%;top:auto;bottom:0;transform:none;padding:10px 14px}
 .nph-detailed .has-proof .nph-proof-icon{display:none}
 .nph-detailed .has-proof .nph-proof-panel h3{font-size:14px}.nph-detailed .has-proof .nph-proof-panel p{margin:3px 0;font-size:10px}
 .nph-detailed .has-proof .nph-evidence{display:inline-flex;padding:0;border:0}.nph-detailed .has-proof .nph-proof-panel small{display:inline;margin-left:8px}
}
@media(max-width:700px){
 .nph-brief-scene{gap:28px}.nph-brief-intro h3{font-size:21px}.nph-composer{padding:18px;border-radius:19px}.nph-brief-text{font-size:15px;min-height:110px}
 .nph-detailed .nph-callout{width:46%;max-width:46%;padding:7px 9px;gap:5px;border-radius:12px}.nph-detailed .nph-callout b{font-size:10px}.nph-detailed .nph-callout small{font-size:8px;margin-top:2px}
 .nph-detailed.nph-animated .has-work.nph-canvas{display:flex;flex-direction:column;justify-content:center;gap:16px}
 .nph-detailed.nph-sequence.nph-animated .has-work .nph-agreement{position:relative;inset:auto;width:90%;max-width:320px;transform:none!important;align-self:center;padding:10px 14px}
 .nph-detailed .has-work .nph-parties{display:none}.nph-detailed .has-work .nph-agreement h3{font-size:17px;margin:4px 0}
 .nph-detailed .has-work .nph-live-clause small{display:none}
 .nph-detailed.nph-animated .has-work .nph-live-clause{padding:5px 7px;font-size:10px;line-height:1.3;margin:0}
 .nph-detailed .has-work .nph-document-body{margin-top:5px}
 .nph-detailed .has-work .nph-company-sign>svg{width:78px;height:15px}
 .nph-detailed .has-work .nph-sign-area{height:31px;margin-top:5px}
 .nph-detailed .has-work .nph-esign-stamp{left:39px;top:0}
 .nph-detailed .has-work .nph-output-stack{position:relative;inset:auto;width:100%;transform:none}
 .nph-detailed .nph-output-stack .nph-owner{padding:8px 10px}
 .nph-detailed .nph-work-heading>span:first-child{font-size:13px}.nph-detailed .nph-list-caption{font-size:9px}
 .nph-detailed .nph-task-row{padding:6px 10px;gap:7px}.nph-detailed .nph-task-copy h3{font-size:12px;line-height:1.2}
 .nph-detailed .nph-task-copy .nph-task-owner{font-size:9px;line-height:1.2;margin-top:2px}
 .nph-detailed .nph-task-avatar{width:24px;height:24px;font-size:8px}.nph-detailed .nph-due{font-size:9px;padding:3px 6px}
 .nph-detailed .nph-list-foot{min-height:28px;padding:5px 10px;font-size:9px}.nph-detailed .nph-channel{width:20px;height:20px}.nph-detailed .nph-channel>svg{width:15px;height:15px}
 .nph-detailed .has-proof .nph-document-body{display:none}.nph-detailed .has-proof .nph-agreement h3{font-size:15px}
 .nph-detailed .nph-proof-panel{position:relative;inset:auto;transform:none;width:100%;padding:9px 12px;display:grid;grid-template-columns:auto 1fr;gap:3px 9px;align-items:center}
 .nph-proof-icon{grid-row:1/4;margin:0;width:28px;height:28px}.nph-proof-panel h3{font-size:14px}
 .nph-proof-panel p{font-size:10px;margin:0}.nph-evidence{border:0;padding:0;font-size:9px}.nph-proof-panel small{grid-column:2;font-size:8px;margin:0}
}
@media(max-width:700px) and (max-height:740px){
 .nph-detailed.nph-animated .has-work.nph-canvas{gap:11px}
 .nph-detailed .nph-task-row{padding-top:5px;padding-bottom:5px}
 .nph-detailed .nph-list-caption{display:none}
 .nph-detailed .nph-work-heading{margin:0}
 .nph-detailed .has-proof .nph-agreement{padding:7px 12px}
 .nph-detailed .has-proof .nph-sign-area{height:28px;margin-top:2px}
}
/* Contract detail stays on the same paper; signals travel along measured curves. */
.nph-detailed .nph-agreement>h3{white-space:nowrap;max-width:none}
.nph-detailed .nph-document-body{height:253px}
.nph-detailed .nph-clause-detail{display:block;margin-top:6px;font-size:10px;line-height:1.4;color:#617893}
.nph-detailed .nph-insurance{margin-top:10px;font-size:10px;line-height:1.45}
.nph-detailed .nph-insurance p{margin:0 0 2px;display:flex;gap:7px}
.nph-detailed .nph-scope{margin-bottom:6px}
.nph-detailed .nph-live-clause del,.nph-detailed .nph-live-clause ins{padding:1px 4px;font-size:10px;line-height:1.4}
.nph-detailed .nph-insurance b{flex:none;font-size:9px;font-weight:500;color:#7b8ea7;min-width:23px}
.nph-decision{display:table;margin-top:5px;padding:2px 6px;border-radius:4px;font:600 9px/1.4 var(--font)}
.nph-decision.is-rejected{background:#fbe8ed;color:#ab405c}.nph-decision.is-approved{background:#e6f4eb;color:#2f7553}
.nph-detailed .nph-curves .nph-flow{stroke:#cd9b38;stroke-width:2;opacity:1;stroke-dasharray:.07 .93;stroke-dashoffset:1;animation:nph-signal 1.5s linear infinite}
@keyframes nph-signal{to{stroke-dashoffset:0}}
.nph-detailed[data-running=false] .nph-flow{animation-play-state:paused}
.nph-detailed[data-stage='7'] .nph-flow{display:none}
@media(prefers-reduced-motion:reduce){.nph-detailed .nph-flow{display:none}}
@media(min-width:701px) and (max-width:1000px){
 .nph-detailed .nph-agreement>h3{font-size:23px}
 .nph-detailed .has-proof .nph-agreement>h3{font-size:18px}
 .nph-detailed .has-proof .nph-document-body{height:273px}
 .nph-detailed .has-proof .nph-insurance{font-size:9px;line-height:1.35}
}
@media(max-width:700px){
 .nph-detailed .nph-document-body{height:253px}
 .nph-detailed .nph-decision{font-size:8px;margin-top:3px}
 .nph-detailed .nph-typing{font-size:10px;line-height:1.4}
 .nph-detailed .has-work .nph-document-body{height:auto}
 .nph-detailed .has-work .nph-clause-detail{display:none}
}
@media(max-width:700px) and (max-height:740px){
 .nph-detailed .nph-document-body{height:235px}
 .nph-detailed.nph-animated .nph-live-clause{min-height:0;padding:8px;font-size:11px}
 .nph-detailed .nph-insurance{font-size:9px;line-height:1.35;margin-top:8px}
 .nph-detailed .nph-insurance p{margin-bottom:3px}
 .nph-detailed .has-work .nph-document-body{height:auto}
}
/* A first-visit homepage: every benefit is visible, with no hidden card deck. */
.home-chapters.home-simple>#navio-intro{height:auto;min-height:calc(100dvh - var(--bar,0px));scroll-margin-top:0;background:linear-gradient(180deg,#f7f7f5 0%,#edf2f8 70%)}
.home-simple .nph-sequence.nph-animated .nph-canvas{flex:none;height:480px;margin:12px 0;max-height:none}
.home-simple .nph-controls{display:flex;align-items:center;justify-content:center;gap:24px;min-height:44px;flex-wrap:wrap;font:500 13px/1.4 var(--font);color:#52647c}
.nph-controls a,.nph-controls button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 10px;border:0;border-radius:8px;background:none;font:600 14px/1.4 var(--font);color:#275f99}
.nph-controls button:hover,.nph-controls a:hover{background:#e8f0fa}.nph-controls button:disabled{opacity:.6;cursor:default}.nph-controls .ico{width:16px;height:16px}
.home-simple .nph-controls button{border:1px solid #cedbea;background:#fff}
@media(max-width:700px){.home-simple .nph-sequence.nph-animated .nph-canvas{height:560px}.home-simple .nph-controls{gap:8px 12px}.home-simple .nph-controls>span{flex-basis:100%;text-align:center;font-size:12px}.home-simple .nph-controls a,.home-simple .nph-controls button{font-size:13px}}
.home-simple .nph-detailed[data-running=false] :is(.nph-typing-caret,.nph-company-sign>svg path,.nph-esign-stamp,.nph-headline-swap,.nph-live-clause,.nph-live-clause ins){animation-play-state:paused}
/* The completed story stops its timers; its final headline must not freeze at opacity zero. */
.home-simple .nph-detailed[data-stage='7'] .nph-headline-swap{animation:none;opacity:1}
.home-simple .trust-band{padding:16px var(--gutter);border:0;background:#edf2f8}
.home-simple .hero-trust{flex-direction:column;gap:12px}
.home-simple .hero-trust-label{align-self:flex-start;text-align:left;font:600 16px/1.4 var(--font);color:#4d5672}
.home-simple .hero-trust-roll{width:100%;max-width:1150px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.home-simple .hero-trust-track{animation:cust-roll 55s linear infinite;display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:34px;width:max-content;min-width:100%;padding:0 34px 0 0}
.home-simple .hero-trust-track[aria-hidden=true]{display:flex}
.home-simple .hero-trust-track li{width:150px;height:48px;flex:none;display:flex;align-items:center;justify-content:center}
.customer-mark{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:150px;text-align:center;color:#5a6178}
.customer-name{font-size:17px;font-weight:600;line-height:1.2;text-wrap:balance}
.customer-mark img{max-width:130px;object-fit:contain;filter:none!important;opacity:1!important;mix-blend-mode:multiply}
.customer-caption{font-size:11px;font-weight:600;line-height:1.1}
.customer-mark:has(.customer-caption) img{max-height:25px!important;width:auto}
.home-simple .hero-trust-track img{max-width:110px;max-height:38px;width:auto;height:auto;opacity:1;filter:none}
.home-chapters.home-simple>.home-benefits,.home-chapters.home-simple>.home-connections{height:auto;min-height:0;padding:80px 0;scroll-margin-top:80px;scroll-snap-align:none;scroll-snap-stop:normal}
.home-benefits{background:#edf2f8;color:var(--ink);--ui:var(--font)}
.home-chapters.home-simple>#capabilities.home-benefits{padding-top:38px}
.hb-heading{margin-bottom:64px;text-align:center}.hb-eyebrow{font:600 14px/1.5 var(--font);color:#4e6785;margin-bottom:12px}
.hb-heading h2,.hc-copy h2{font:600 clamp(30px,3.2vw,46px)/1.13 var(--font);letter-spacing:-.045em;text-wrap:balance}
.hb-heading em,.hc-copy em{font-style:normal;color:#2364a8}
.hb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.hb-card{display:flex;flex-direction:column;align-items:stretch;padding:28px 24px;background:#fff;border:1px solid #dce4ee;border-radius:22px;min-width:0}
.hb-card>h3{font:650 clamp(21px,1.7vw,26px)/1.18 var(--font);letter-spacing:-.025em;min-height:1.18em}
.hb-card>p{font:400 16px/1.55 var(--font);color:#4d5672;margin:12px 0 26px;min-height:3.1em}
.hb-example{padding:23px 20px;border:1px solid #dce4ee;border-radius:12px;background:#f8fafc;margin:auto 0;box-shadow:0 12px 24px -24px #233a62}
.hb-example-top{display:flex;align-items:center;gap:9px;font:600 19px/1.3 var(--font);letter-spacing:-.02em}.hb-example-top .ico{color:#4774a9}
.hb-contract>p{font:400 12px/1.5 var(--font);color:#5d6f85;margin-top:8px}
.hb-ai-example .hb-example-top>.ai-mark{width:26px;height:26px;border-radius:8px}
.hb-ai-example .hb-example-top>.ai-mark svg{width:17px;height:17px}
.hb-provider-choice{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding-top:16px;border-top:1px solid #dce4ee;font:550 13px/1.4 var(--font);color:#4d5672}
.hb-provider-choice .text-link{font-size:12px;color:#2364a8;gap:6px}
.hb-provider-choice .ico{width:14px;height:14px}
.hb-workflow-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font:600 15px/1.3 var(--font)}
.hb-no-code{font:550 10px/1.4 var(--font);padding:4px 7px;border-radius:6px;background:#e8eff8;color:#366399}
.hb-workflow-steps{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:19px}
.hb-workflow-steps li{position:relative;display:flex;align-items:center;gap:10px;min-width:0}
.hb-workflow-steps li:not(:last-child)::after{content:'';position:absolute;left:15px;top:35px;height:16px;border-left:1px solid #9db5d1}
.hb-step-icon{position:relative;display:grid;place-items:center;flex:none;width:32px;height:32px;background:#e8eff8;border:1px solid #d5e1ef;border-radius:9px;color:#4774a9}
.hb-step-icon .ico{width:16px;height:16px}
.hb-workflow-steps li:last-child .hb-step-icon{background:#e3f3eb;border-color:#c8e3d5;color:#31825b}
.hb-workflow-steps strong{display:block;font:600 14px/1.3 var(--font)}
.hb-workflow-steps small{display:block;margin-top:3px;font:400 11px/1.4 var(--font);color:#5d6f85}
.hb-checklist{padding:0;margin:26px 0;list-style:none;display:grid;gap:16px;font-size:15px}.hb-checklist li{display:flex;align-items:center;gap:10px}.hb-checklist .ico{width:18px;height:18px;color:#31825b}
.hb-seal{display:flex;gap:7px;align-items:center;padding-top:17px;border-top:1px solid #dfe7e1;font:550 13px/1.4 var(--font);color:#2b7352}.hb-seal .ico{width:18px;height:18px}
.hb-source{font:500 12px/1.4 var(--font);color:#526b87}.hb-task h4{font:600 21px/1.3 var(--font);margin:12px 0 22px;letter-spacing:-.02em}
.hb-task dl{margin:0;display:grid;gap:18px}.hb-task dt{font-size:12px;color:#526b87;margin-bottom:5px}.hb-task dd{margin:0;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:550}.hb-task dd .ico{width:18px;height:18px;color:#54729b}
.hb-avatar{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#e4eaf7;color:#34578f;font:650 10px var(--font)}
.hb-source-foot{display:flex;gap:7px;align-items:center;margin-top:24px;padding-top:16px;border-top:1px solid #dce4ee;font-size:12px;color:#526b87}.hb-source-foot .ico{width:16px;height:16px}
.hb-phone{position:relative;align-self:center;width:222px;max-width:100%;min-height:300px;margin:auto 0 0;padding:36px 12px 18px;border:4px solid #17233b;border-radius:30px;background:#f6f8fb;box-shadow:0 14px 24px -22px #17233b;color:var(--ink)}
.hb-phone:after{content:'';position:absolute;bottom:7px;left:35%;width:30%;height:3px;border-radius:3px;background:#17233b}
.hb-phone-island{position:absolute;top:8px;left:35%;width:30%;height:12px;border-radius:9px;background:#17233b}
.hb-phone-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font:600 13px/1.4 var(--font);padding-bottom:12px}.hb-phone-head .ico{height:17px;width:17px}
.hb-notification{padding:12px 10px;background:#fff;border:1px solid #d9e4ef;border-radius:12px;min-height:122px;animation:nph-quiet-fade .45s both}
.hb-note-brand{display:flex;align-items:center;gap:5px;font:600 10px/1.4 var(--font);color:#3c658d}.hb-note-brand .ico{width:13px;height:13px}.hb-notification strong{display:block;font:600 14px/1.25 var(--font);margin-top:9px}.hb-notification p{font:400 12px/1.4 var(--font);color:#4c5f75;margin-top:6px}
.hb-file{display:flex;align-items:center;gap:4px;font:500 10px/1.4 var(--font);margin-top:7px;color:#2d7755;overflow-wrap:anywhere}.hb-file .ico{width:13px;height:13px}
.hb-phone-history{display:grid;gap:8px;margin-top:15px;font:500 11px/1.4 var(--font);color:#52647a}.hb-phone-history>span{display:flex;align-items:center;gap:6px}.hb-phone-history .ico{width:14px;height:14px}.hb-phone-history>span:first-child,.hb-phone-history .is-done{color:#2d7755}
.hb-phone-app{display:block;font:450 9px/1.4 var(--font);color:#5b6e82;margin-top:14px;text-align:center}
.hb-bottom{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:24px}.hb-bottom p{font:400 13px/1.5 var(--font);color:#53667e}.hb-bottom .text-link{font-size:15px;color:#2364a8;flex:none}
/* Three small, finite demonstrations. They run only while their card is visible. */
.hb-card>.hb-demo{margin-top:auto;width:100%;min-width:0}
.hb-demo{position:relative;height:380px;box-sizing:border-box}
.hb-ai-demo,.hb-workflow.hb-demo{padding:20px 16px;background:#f8fafc;border:1px solid #dce4ee;border-radius:15px}
.hb-demo-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:20px}
.hb-demo-bar>span{display:flex;align-items:center;gap:7px;font:650 15px/1.3 var(--font)}
.hb-demo-bar small{font:500 10px/1.3 var(--font);color:#6c6091}
.hb-ai-paper{position:relative;overflow:hidden;background:white;border:1px solid #dce4ee;border-radius:5px 5px 12px 12px;padding:18px 14px;box-shadow:0 12px 22px -20px #19365d}
.hb-paper-label{display:flex;align-items:center;gap:5px;color:#6a7e98;font:600 9px/1.4 var(--font);letter-spacing:.05em}
.hb-paper-label .ico{width:13px;height:13px}
.hb-paper-rules{display:grid;gap:6px;margin:16px 0}
.hb-paper-rules i{height:3px;background:#e9edf4;border-radius:2px;width:100%}
.hb-paper-rules i:last-child{width:65%}
.hb-ai-clause{font:500 11px/1.7 var(--font);color:#344a69;margin:0;padding:6px 0}
.hb-ai-typed{display:block;animation:hb-type-clause 1.35s steps(32,end) both}
.hb-ai-clause mark{color:inherit;background:transparent;padding:2px 3px;transition:background .4s}
.hb-ai-demo:not([data-beat='0']) .hb-ai-clause mark{background:#e8defb}
.hb-ai-scan{position:absolute;inset:0 0 auto;height:30px;background:linear-gradient(transparent,#5372cd14);border-bottom:1px solid #7794d880;animation:hb-scan-paper 1.5s ease-in-out 3 both;pointer-events:none}
.hb-ai-demo[data-beat='3'] .hb-ai-scan{display:none}
.hb-ai-extract-line{display:block;width:100%;height:34px;fill:none;stroke:#9b8fc1;stroke-width:1.3;stroke-dasharray:160;stroke-dashoffset:160;transition:stroke-dashoffset .6s}
.hb-ai-result{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #dcd5ec;border-radius:10px;padding:12px 10px;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s;min-width:0}
.hb-ai-result>div{min-width:0;flex:1}.hb-ai-result strong{display:block;font:600 12px/1.4 var(--font)}
.hb-ai-result small{display:block;font:400 9px/1.4 var(--font);color:#63758c;margin-top:3px}
.hb-ai-result>.ico{color:#31825b;width:15px;height:15px;flex:none}
.hb-ai-demo:is([data-beat='2'],[data-beat='3']) .hb-ai-result{opacity:1;transform:none}
.hb-ai-demo:is([data-beat='2'],[data-beat='3']) .hb-ai-extract-line{stroke-dashoffset:0}
.hb-workflow-canvas{position:relative;height:300px;margin-top:18px;container-type:inline-size;background-image:radial-gradient(#b9c9dc66 .7px,transparent .7px);background-size:12px 12px}
.hb-workflow-wires{position:absolute;inset:0;width:100%;height:300px;overflow:visible;fill:none;stroke:#7e9fc2;stroke-width:1.4}
.hb-workflow-wires path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .65s ease}
.hb-workflow-wires path.is-connected{stroke-dashoffset:0}
.hb-workflow-wires .hb-revision-wire{stroke:#be9551}
.hb-workflow-nodes{list-style:none;margin:0;padding:0}
.hb-workflow-node{position:absolute;height:42px;box-sizing:border-box;padding:4px;display:flex;align-items:center;justify-content:center;text-align:center;background:#fff;border:1px solid #cbd9e9;border-radius:8px;box-shadow:0 3px 7px #243d6110;opacity:0;transform:translate(10px,-6px) scale(.96);transition:opacity .4s,transform .5s}
.hb-workflow-node.is-built{opacity:1;transform:none}
.hb-workflow-node strong{display:block;font:650 clamp(9px,3.3cqw,11px)/1.2 var(--font);color:#263d5a}
.hb-workflow-node small{display:block;margin-top:3px;font:400 clamp(7px,2.65cqw,9px)/1.2 var(--font);color:#607087}
.hb-flow-icon{display:none}
.hb-workflow-node.is-delivered{background:#eaf6ef;border-color:#a9d3bb}
.hb-workflow-node.is-delivered strong{color:#28734e}
.hb-revision-label{position:absolute;top:44px;left:1%;padding:1px 3px;background:#f8fafc;color:#947037;font:600 8px/1.2 var(--font);opacity:0;transition:opacity .4s}
.hb-revision-label.is-built{opacity:1}
.hb-follow-scene{container-type:inline-size;max-width:330px;margin-inline:auto}
.hb-follow-scene .hb-phone{position:absolute;left:1%;top:3px;width:52%;max-width:174px;min-height:0;height:auto;aspect-ratio: .47;margin:0;padding:14px 9px 30px;border:3px solid #1d2527;border-radius:29px;background:#f8f9f6;box-shadow:0 0 0 2px #929792,0 18px 26px -18px #14242260;color:#26312c;font-size:clamp(8px,3cqw,10px)}
.hb-follow-scene .hb-phone:before{content:'';position:absolute;right:-5px;top:70px;height:30px;width:2px;background:#737d76;border-radius:2px}
.hb-follow-scene .hb-phone:after{bottom:7px;left:30%;width:40%;height:2px;background:#303934}
.hb-follow-scene .hb-phone-island{top:8px;left:33%;width:34%;height:10px;background:#131b18}
.hb-phone-status{display:flex;align-items:center;justify-content:space-between;font:600 .68em/1 var(--font);margin-bottom:18px;color:#24302b}
.hb-follow-scene .hb-phone-head{font-size:1.4em;padding-bottom:10px}
.hb-follow-scene .hb-phone-head>span{display:flex;gap:3px;align-items:center}
.hb-follow-scene .hb-phone-head .ico{width:12px;height:12px}
.hb-phone-greeting{font:600 1.1em/1.4 var(--font);margin:0 0 10px}
.hb-phone-tabs{display:flex;align-items:center;justify-content:space-between;gap:6px;font:.75em/1.4 var(--font);margin-bottom:12px;color:#647269}
.hb-phone-tabs b{padding:4px 7px;background:#28342d;border-radius:20px;color:white;font-weight:500}
.hb-follow-scene .hb-notification{padding:9px 7px;min-height:0;border-radius:9px;border-color:#dce5df}
.hb-follow-scene .hb-note-brand{font-size:.72em;color:#4a7762;gap:3px}
.hb-follow-scene .hb-note-brand .ico{width:10px;height:10px;flex:none}
.hb-follow-scene .hb-notification strong{font-size:1.08em;line-height:1.35;margin-top:7px}
.hb-follow-scene .hb-notification p{font-size:.75em;line-height:1.4;margin-top:6px}
.hb-phone-state{display:flex;align-items:center;gap:3px;font-size:.7em;color:#947c42;margin-top:8px}
.hb-phone-state .ico{width:10px;height:10px}
.hb-follow-scene[data-beat='2'] .hb-phone-state{color:#31825b}
.hb-follow-scene .hb-file{font-size:.64em;margin-top:6px;gap:2px}
.hb-follow-scene .hb-file .ico{width:9px;height:9px;flex:none}
.hb-phone-other{padding:12px 4px;font-size:.85em}
.hb-phone-other>span{display:block;color:#819086;font-size:.8em}
.hb-phone-other strong{display:block;font-weight:550;margin-top:8px;font-size:1em}
.hb-phone-other small{display:block;color:#87938b;font-size:.85em;margin-top:3px}
.hb-phone-mic{position:absolute;bottom:15px;left:calc(50% - 10px);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#28342d;color:#fff}
.hb-phone-mic .ico{width:12px;height:12px}
.hb-phone-tangents{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#a9bcb0;stroke-width:1.1;pointer-events:none}
.hb-phone-tangents path{stroke-dasharray:90;stroke-dashoffset:90;transition:stroke-dashoffset .65s}
.hb-phone-callout{position:absolute;right:0;width:33%;padding:11px 7px;background:#fff;border:1px solid #dce5df;border-radius:15px;box-shadow:0 9px 22px -15px #274b35;display:flex;flex-direction:column;align-items:flex-start;gap:6px;opacity:0;transform:translateX(6px);transition:opacity .45s .25s,transform .45s .25s}
.hb-phone-callout>.ico{width:17px;height:17px;color:#977839}
.hb-phone-callout b{font:600 clamp(9px,3.3cqw,12px)/1.3 var(--font)}
.hb-phone-callout small{font:400 clamp(8px,2.7cqw,10px)/1.4 var(--font);color:#668573}
.hb-nudge-callout{top:22%}.hb-proof-callout{top:64%;background:#f6fbf7}.hb-proof-callout>.ico{color:#31825b}
.hb-callout-channels{display:flex;align-items:center;gap:7px;color:#6c8576}
.hb-callout-channels svg{width:13px;height:13px}.hb-callout-channels svg:first-child{fill:currentColor}
.hb-follow-scene:not([data-beat='0']) .hb-nudge-callout,.hb-follow-scene[data-beat='2'] .hb-proof-callout{opacity:1;transform:none}
.hb-follow-scene:not([data-beat='0']) .hb-tangent-nudge,.hb-follow-scene[data-beat='2'] .hb-tangent-proof{stroke-dashoffset:0}
.hb-demo[data-running='false'] *{animation-play-state:paused}
.hb-follow-scene[data-beat='2'] .hb-notification{animation:none;opacity:1}
/* Compact capability cards: keep text sizes, reduce empty space and diagram gaps. */
.home-benefits .hb-card{padding-block:20px}
.home-benefits .hb-card>p{margin-block:10px 20px}
.home-benefits .hb-demo{height:290px}
.home-benefits .hb-ai-demo,.home-benefits .hb-workflow.hb-demo{padding:12px 16px}
.home-benefits .hb-demo-bar{margin-bottom:12px}
.home-benefits .hb-ai-paper{padding:12px 14px}
.home-benefits .hb-paper-rules{gap:4px;margin:10px 0}
.home-benefits .hb-ai-extract-line{height:22px}
.home-benefits .hb-ai-result{padding:9px 10px}
.home-benefits .hb-workflow-canvas{height:234px;margin-top:8px}
.home-benefits .hb-workflow-wires{height:234px}
.home-benefits .hb-workflow-node{height:38px}
.home-benefits .hb-revision-label{top:37px}
.home-benefits .hb-follow-scene{max-width:254px}
.home-benefits .hb-follow-scene .hb-phone{aspect-ratio:.47}
.home-benefits .hb-phone-status{margin-bottom:10px}
.home-benefits .hb-phone-other{padding:6px 4px}
.home-benefits .hb-phone-other strong{margin-top:4px}
@container (max-width:280px){
 .hb-follow-scene .hb-phone{aspect-ratio:.45}
 .hb-phone-status{margin-bottom:14px}.hb-phone-greeting{margin-bottom:8px}.hb-phone-tabs{margin-bottom:8px}
 .hb-phone-other{padding:8px 4px}
}
@container (max-width:240px){.hb-phone-other{display:none}}
@keyframes hb-type-clause{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes hb-scan-paper{from{transform:translateY(-30px)}to{transform:translateY(205px)}}
@media(prefers-reduced-motion:reduce){.hb-demo *{animation:none!important;transition:none!important}.hb-ai-typed{clip-path:none}.hb-ai-scan{display:none}}
/* Native animated overview: six compact stories, not another full-height chapter. */
.hb-bento{display:grid;grid-template-columns:1fr 1.4fr 1.1fr;gap:16px}
.hb-tile{position:relative;min-width:0;overflow:hidden;padding:20px;background:#fff;border:1px solid #dce5ef;border-radius:22px;box-shadow:0 12px 35px -28px #203d6950;display:flex;flex-direction:column}
.hb-tile h3{font:600 clamp(19px,1.65vw,24px)/1.2 var(--font);letter-spacing:-.035em;margin:0;text-wrap:balance}
.hb-tile>p,.hb-tags-tile>div>p{font:400 14px/1.5 var(--font);color:#53647d;margin:8px 0 0;text-wrap:pretty}
.hb-voice-tile{align-items:center;justify-content:center;text-align:center;background:radial-gradient(ellipse at 50% 30%,#eff2ff,transparent 60%),#fff}
.hb-voice-orb{width:78px;height:78px;display:grid;place-items:center;position:relative;isolation:isolate;margin-bottom:16px;color:white}
.hb-voice-orb::before{content:'';position:absolute;inset:0;border-radius:47% 53% 56% 44%;background:conic-gradient(from 30deg,#b6cfff,#507dca,#a49bdf,#d8c1dc,#b6cfff);box-shadow:inset 0 0 24px #ffffff70,0 12px 24px #597dc127;animation:hb-orb-turn 9s linear infinite;z-index:-1}
.hb-voice-orb .ico{width:30px;height:30px;filter:drop-shadow(0 2px 3px #36588445)}
.hb-voice-tile p{max-width:220px}
.hb-voice-wave{display:flex;align-items:center;justify-content:center;gap:5px;height:36px;margin-top:12px}
.hb-voice-wave i{display:block;width:3px;border-radius:3px;background:#7799c6;transform-origin:center;animation:hb-voice-level 1.4s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.13s)}
.hb-story-tile{background:linear-gradient(145deg,#f9fbff 15%,#edf4ff 75%,#fff9ed);justify-content:center;padding:24px}
.hb-bento-label{display:flex;align-items:center;gap:8px;font:600 15px/1.4 var(--font)}
.hb-story-dots{display:flex;gap:6px;margin:12px 0 10px}
.hb-story-dots i{width:7px;height:7px;border-radius:50%;background:#d0dbe9;transition:background .4s}
.hb-story-dots i.is-lit{background:#547fb5}
.hb-tile .hb-story-line{font-size:clamp(25px,2.5vw,36px);line-height:1.15;min-height:3.45em;letter-spacing:-.04em;color:#2364a8;animation:hb-story-enter .6s both;text-wrap:pretty}
.hb-story-tile p{font-size:13px;margin-top:10px}
.hb-story-steps{display:flex;gap:12px;margin-top:14px;font:550 12px/1.4 var(--font);color:#6b7d94}
.hb-story-steps span{display:flex;gap:12px;align-items:center;transition:color .3s}
.hb-story-steps span.is-lit{color:#2364a8}
.hb-story-steps .ico{height:13px;width:13px;color:#b39352}
.home-benefits .hb-workflow-tile .hb-workflow{background:transparent;border:0;padding:0;height:auto;margin-top:12px}
.hb-workflow-tile .hb-workflow-top{font-size:11px;color:#63758c}
.hb-workflow-tile .hb-no-code{font-size:9px;padding:3px 6px}
.hb-simple-steps{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.hb-simple-steps li{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding:5px 10px;border:1px solid #dce5ef;border-radius:10px;background:#f8fafc;opacity:.35;transform:translateY(5px);transition:opacity .4s,transform .4s}
.hb-simple-steps li.is-built{opacity:1;transform:none}
.hb-simple-steps li:not(:last-child)::after{content:'';position:absolute;left:23px;top:100%;height:9px;width:1px;background:#9cb5d3;transform:scaleY(0);transform-origin:top;transition:transform .5s}
.hb-simple-steps li.is-built:not(:last-child)::after{transform:scaleY(1)}
.hb-simple-number{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:#e8eff8;color:#426990;font:600 12px/1 var(--font)}
.hb-simple-number .ico{width:15px;height:15px}
.hb-simple-steps strong{display:block;font:600 13px/1.3 var(--font);color:#263d5a}
.hb-simple-steps small{display:block;margin-top:3px;font:400 11px/1.3 var(--font);color:#61738a}
.hb-simple-steps li.is-delivered{background:#edf7f0;border-color:#cce5d5}
.hb-simple-steps .is-delivered .hb-simple-number{background:#dcefe3;color:#2e7950}
.hb-simple-steps .is-delivered strong{color:#2e7950}
.hb-follow-tile{padding-bottom:0}
.home-benefits .hb-follow-tile .hb-follow-scene{width:100%;height:224px;max-width:234px;margin-top:12px;margin-bottom:8px}
.home-benefits .hb-follow-tile .hb-phone{width:52%;padding-inline:7px;aspect-ratio:.56}
.hb-follow-tile .hb-phone-greeting,.hb-follow-tile .hb-phone-other,.hb-follow-tile .hb-phone-mic,.hb-follow-tile .hb-proof-callout small{display:none}
.home-benefits .hb-follow-tile .hb-phone-status{margin-bottom:6px}
.hb-follow-tile .hb-phone-head{padding-bottom:6px}
.hb-follow-tile .hb-phone-tabs{margin-bottom:8px}
.hb-follow-tile .hb-proof-callout{top:67%}
.hb-tags-tile{justify-content:space-between;background:linear-gradient(155deg,#fff 25%,#f0f5fc);isolation:isolate}
.hb-tags-tile::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.45;background:repeating-radial-gradient(ellipse at 100% 0,transparent 0 17px,#cfddef 18px,transparent 19px 30px);mask-image:linear-gradient(transparent,#000)}
.hb-tag-board{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 7px;padding:20px 3px 16px;margin-top:auto;min-width:0}
.hb-stage-tag{border:0;padding:0;background:transparent;position:relative;cursor:grab;touch-action:pan-y;transform:translate(var(--x),var(--y));font:500 14px/1.3 var(--font);color:#284468;min-width:0;user-select:none}
.hb-stage-tag:active{cursor:grabbing;z-index:2}
.hb-stage-tag span{display:block;padding:12px 8px;border:1px solid #dce5f4;border-radius:24px;background:#e9effb;transform:rotate(var(--tilt));transition:transform .65s cubic-bezier(.2,.8,.3,1.15),opacity .4s;transition-delay:calc(var(--i)*.075s);box-shadow:0 3px 5px #34517406}
.hb-stage-tag:nth-child(3n+2) span{background:#efeaf6;border-color:#e5deee;color:#594f76}
.hb-stage-tag:nth-child(3n) span{background:#f8f1e4;border-color:#ece2ce;color:#7d6638}
.hb-stage-tag:last-child{grid-column:2/4}
.hb-tags-tile[data-beat='0'] .hb-stage-tag span{opacity:0;transform:translateY(-45px) rotate(0deg)}
.hb-stage-tag:hover span{transform:rotate(0deg) scale(1.04);transition-delay:0s}
.hb-stage-tag:focus-visible{outline:2px solid #2364a8;outline-offset:5px;border-radius:24px;z-index:3}
.hb-tag-hint{font:450 11px/1.4 var(--font);text-align:center;color:#607087;margin-top:4px}
.hb-proof-tile{background:linear-gradient(160deg,#fff 15%,#f3f9f6)}
.hb-proof-record{margin:auto 0 0;padding-top:20px}
.hb-proof-seal{width:44px;height:44px;background:#e4f2e9;border:1px solid #cce4d5;border-radius:50%;display:grid;place-items:center;color:#35815a;margin-bottom:16px;transition:transform .5s}
.hb-proof-tile[data-beat='2'] .hb-proof-seal{transform:rotate(-8deg)}
.hb-proof-record>strong{display:block;font:600 16px/1.3 var(--font)}
.hb-proof-record>small{display:block;font:400 12px/1.5 var(--font);color:#617487;margin-top:5px}
.hb-proof-progress{display:flex;flex-wrap:wrap;gap:12px;font:500 11px/1.5 var(--font);color:#3d7d59;margin:16px 0}
.hb-proof-progress span{display:flex;align-items:center;gap:4px}
.hb-proof-progress span:last-child{opacity:.3;transition:opacity .5s}
.hb-proof-progress span.is-ready{opacity:1}
.hb-proof-progress .ico{height:14px;width:14px}
.hb-evidence{display:flex;align-items:center;gap:7px;font:500 11px/1.4 var(--font);color:#39644d;border-top:1px solid #dce9df;padding-top:15px;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.hb-evidence.is-ready{opacity:1;transform:none}
.hb-evidence .ico{width:16px;height:16px;flex:none}
.hb-evidence .ico:last-child{margin-left:auto}
.hb-bento[data-running='false'] *{animation-play-state:paused!important}
@keyframes hb-orb-turn{to{transform:rotate(360deg)}}
@keyframes hb-voice-level{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
@keyframes hb-story-enter{from{opacity:0;transform:translateY(12px);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}
/* Fit the overview below the floating navigation on desktop. Small screens
   reflow the illustrations instead of scaling text or clipping the section. */
@media(min-width:1101px){
 .home-chapters.home-simple>#capabilities.home-benefits{padding-block:16px;scroll-margin-top:96px}
 .home-benefits .hb-heading{margin-bottom:56px}
 .home-benefits .hb-eyebrow{margin-bottom:8px}
 .home-benefits .hb-heading h2{font-size:clamp(28px,3.7svh,40px)}
 .hb-bento{grid-template-rows:repeat(2,clamp(184px,calc((100svh - 286px)/2),300px));gap:12px}
 .hb-tile,.hb-story-tile{padding:clamp(12px,1.8svh,18px)}
 .hb-tile h3{font-size:clamp(17px,2.4svh,22px)}
 .hb-tile>p,.hb-tags-tile>div>p{font-size:13px;margin-top:5px}
 .hb-voice-orb{width:clamp(52px,8svh,72px);height:clamp(52px,8svh,72px);margin-bottom:12px}
 .hb-voice-wave{height:26px;margin-top:10px}.hb-voice-wave i{max-height:28px}
 .hb-tile .hb-story-line{font-size:clamp(23px,3.4svh,30px);min-height:3.45em}
 .hb-story-dots{margin-block:8px}.hb-story-steps{margin-top:8px}.hb-story-tile p{margin-top:6px}
 .hb-simple-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .hb-simple-steps li{min-height:62px;padding:8px;gap:7px}
 .hb-simple-steps li::after{display:none}
 .hb-simple-steps strong{font-size:12px}.hb-simple-steps small{font-size:10px}
 .hb-simple-number{width:22px;height:22px}
 .home-benefits .hb-workflow-tile .hb-workflow{margin-block:auto}
 .home-benefits .hb-follow-tile .hb-follow-scene{height:calc(100% - 62px);max-width:280px;margin-top:10px;margin-bottom:0;min-height:0}
 .home-benefits .hb-follow-tile .hb-phone{width:54%;height:100%;aspect-ratio:auto;max-height:200px;padding:12px 8px 14px;border-width:2px;border-radius:20px;font-size:9px;top:0}
 .hb-follow-tile .hb-phone-status,.hb-follow-tile .hb-phone-island,.hb-follow-tile .hb-phone-tabs{display:none}
 .hb-follow-tile .hb-phone-head{padding-bottom:6px}
 .hb-follow-tile .hb-notification{padding:7px;min-height:0}
 .hb-follow-tile .hb-notification p{display:none}
 .hb-follow-tile .hb-phone-callout{padding:7px;gap:4px;border-radius:12px}
 .hb-follow-tile .hb-nudge-callout{top:10%}.hb-follow-tile .hb-proof-callout{top:58%}
 .hb-tag-board{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 6px;padding:16px 3px 10px}
 .hb-stage-tag{font-size:12px}.hb-stage-tag span{padding:10px 4px}.hb-stage-tag:last-child{grid-column:auto}
 .hb-proof-record{padding-top:10px}.hb-proof-seal{width:30px;height:30px;margin-bottom:8px}
 .hb-proof-record>strong{font-size:14px}.hb-proof-record>small{font-size:11px;margin-top:3px}
 .hb-proof-progress{margin-block:10px}.hb-evidence{padding-top:10px}
 .home-benefits .hb-bottom{margin-top:14px}
}
@media(min-width:1101px) and (max-height:740px){
 .home-benefits .hb-heading{margin-bottom:44px}
 .hb-story-dots,.hb-story-steps,.hb-proof-seal,.hb-tag-hint{display:none}
 .hb-tile .hb-story-line{margin-top:10px;min-height:0;font-size:24px}
 .hb-simple-steps li{min-height:48px;padding:5px;gap:6px}.hb-simple-steps small{display:none}
 .hb-voice-wave{height:20px;margin-top:6px}.hb-voice-wave i{max-height:20px}
 .hb-proof-record{padding-top:8px}.hb-proof-progress{margin-block:8px}
 .hb-tag-board{padding-block:10px}.hb-stage-tag span{padding-block:8px}
 .hb-follow-tile .hb-phone-callout>.ico,.hb-follow-tile .hb-callout-channels{display:none}
 .hb-follow-tile .hb-phone-callout b{font-size:10px}
 .hb-follow-tile .hb-phone-state{display:none}
 .home-benefits .hb-follow-tile .hb-phone{padding:8px 7px 12px}
 .hb-follow-tile .hb-phone::before{display:none}
 .hb-follow-tile .hb-phone-head{display:none}
 .hb-follow-tile .hb-notification strong{margin-top:4px;font-size:10px}
 .hb-follow-tile .hb-note-brand{font-size:7px}
 .hb-follow-tile .hb-file{font-size:7px}
 .hb-follow-tile .hb-notification{padding:5px}
}
@media(max-width:1100px) and (min-width:701px){
 .hb-bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.hb-tile{min-height:288px}
 .hb-story-tile{grid-column:2;grid-row:1}.hb-workflow-tile{grid-column:1;grid-row:2}.hb-follow-tile{grid-column:2;grid-row:2}
 .hb-tile .hb-story-line{font-size:29px;min-height:3.45em}.hb-tags-tile,.hb-proof-tile{min-height:278px}
}
@media(max-width:700px){
 .hb-bento{grid-template-columns:minmax(0,1fr);gap:12px}.hb-tile{padding:18px;border-radius:20px}.hb-tile h3{font-size:22px}.hb-tile>p{font-size:14px}
 .hb-voice-tile{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:20px;text-align:left;align-content:center;min-height:156px}
 .hb-voice-orb{grid-column:1;grid-row:1/4;width:70px;height:70px;margin:0}.hb-voice-tile h3,.hb-voice-tile p{grid-column:2}.hb-voice-tile p{max-width:none}.hb-voice-wave{grid-column:2;height:24px;margin-top:10px;justify-content:flex-start}.hb-voice-wave i{max-height:22px}
 .hb-story-tile{min-height:252px}.hb-story-dots{margin-block:16px 12px}.hb-tile .hb-story-line{font-size:27px;min-height:3.45em}.hb-story-tile p{font-size:13px;margin-top:8px}.hb-story-steps{margin-top:14px}
 .hb-workflow-tile{min-height:0}.home-benefits .hb-workflow-tile .hb-workflow{margin-top:12px}
 .hb-follow-tile{min-height:0}.home-benefits .hb-follow-tile .hb-follow-scene{margin-top:12px;margin-bottom:0}
 .hb-tags-tile{min-height:240px}.hb-tag-board{padding-top:20px;padding-bottom:12px;gap:8px 6px}.hb-stage-tag{font-size:13px}.hb-stage-tag span{padding:9px 6px}.hb-tag-hint{font-size:10px}
 .hb-proof-tile{min-height:260px}.hb-proof-record{padding-top:14px}.hb-proof-seal{width:32px;height:32px;margin-bottom:10px}.hb-proof-progress{margin-block:12px}.hb-evidence{padding-top:12px}
}
@media(prefers-reduced-motion:reduce){.hb-bento *{animation:none!important;transition:none!important}.hb-stage-tag span{transform:none}}
/* Concrete, always-visible examples. Only accents animate, never the content. */
.hb-bento-clear .hb-tile{justify-content:flex-start;align-items:stretch;text-align:left;min-height:0}
.hb-bento-clear .hb-voice-tile{display:flex;background:#f8faff}
.hb-bento-clear .hb-follow-tile{padding-bottom:clamp(12px,1.8svh,18px)}
.hb-bento-clear .hb-tags-tile::before{opacity:.18}
.hb-bento-clear .hb-simple-steps li{opacity:1;transform:none;background:#fff}
.hb-bento-clear .hb-simple-steps li.is-built{border-color:#9ebbdc;background:#f4f8fd}
.hb-bento-clear .hb-simple-steps li.is-delivered.is-built{border-color:#b5d8c2;background:#edf7f0}
.hb-ai-title{display:flex;align-items:center;gap:8px}
.hb-ai-title .ai-mark{width:22px;height:22px;flex:none}
.hb-brief-example{display:flex;align-items:center;gap:8px;padding:9px 10px;margin-top:auto;border:1px solid #dce5ef;border-radius:9px;background:#fff;font:500 12px/1.4 var(--font);color:#35577c}
.hb-brief-example>.ico{width:16px;height:16px;color:#617eaa;flex:none}
.hb-line-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:0;margin:16px 0 0;gap:8px}
.hb-line-flow li{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:0}
.hb-line-flow li:not(:first-child)::before{content:'';position:absolute;z-index:-1;top:13px;left:calc(-50% - 4px);width:calc(100% + 8px);border-top:1px solid #bbcddd;transition:border-color .5s}
.hb-line-flow li.is-current::before{border-color:#658cb9}
.hb-line-icon{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;border:1px solid #cfdae7;background:#fff;color:#667d98;transition:background .5s,color .5s,border-color .5s}
.hb-line-icon .ico{width:14px;height:14px}
.hb-line-flow .is-current .hb-line-icon{background:#eaf1fa;color:#2c639c;border-color:#96b6d9}
.hb-line-flow li:last-child.is-current .hb-line-icon{color:#35805a;background:#e8f4ec;border-color:#a9d1b8}
.hb-line-flow strong{font:550 11px/1.3 var(--font);color:#34516e}
.hb-redline-example{padding:10px 12px;border:1px solid #dce5ef;border-radius:9px;background:#fff;margin-top:auto;transition:border-color .5s}
.hb-redline-example[data-highlight='true']{border-color:#a9bad5}
.hb-redline-example>small{display:block;font:500 10px/1.3 var(--font);color:#61748e;margin-bottom:7px}
.hb-redline-example del,.hb-redline-example ins{display:block;padding:3px 6px;font:500 12px/1.4 var(--font);border-radius:3px}
.hb-redline-example del{color:#9b4e63;background:#fbeaf0;text-decoration:line-through}
.hb-redline-example ins{color:#2d7251;background:#e7f3eb;text-decoration:none;margin-top:3px}
.hb-ai-control{display:flex;align-items:center;gap:6px;font:500 11px/1.4 var(--font);color:#526683;margin-top:10px}
.hb-ai-control .ico{width:14px;height:14px;flex:none;color:#387b58}
.hb-task-strip{display:flex;align-items:center;gap:9px;margin-top:auto;padding:10px;border:1px solid #dbe5ee;border-radius:9px;background:#f8fafc}
.hb-task-avatar{display:grid;place-items:center;width:29px;height:29px;flex:none;border-radius:50%;background:#e8eff8;color:#426990;font:600 10px/1 var(--font)}
.hb-task-strip>div{min-width:0;flex:1}
.hb-task-strip strong{display:block;font:600 12px/1.4 var(--font)}
.hb-task-strip small{display:block;font:400 10px/1.4 var(--font);color:#60728b;margin-top:3px}
.hb-task-strip>.ico{width:15px;height:15px;color:#a17d3c;flex:none}
.hb-linked-record{display:flex;justify-content:center;align-items:center;gap:7px;position:relative;margin: auto auto 20px;padding:8px 12px;background:#fff;border:1px solid #cfdeef;border-radius:9px;max-width:100%;width:max-content}
.hb-linked-record::after{content:'';position:absolute;top:100%;left:50%;height:21px;border-left:1px solid #9db6d2}
.hb-linked-record>.ico{width:16px;height:16px;color:#4b77a7;flex:none}
.hb-linked-record strong{font:600 12px/1.4 var(--font)}
.hb-linked-record small{font:400 10px/1.3 var(--font);color:#61738b}
.hb-record-branches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:10px;position:relative}
.hb-record-branches::before{content:'';position:absolute;top:0;left:16.66%;right:16.66%;border-top:1px solid #9db6d2}
.hb-record-branches>div{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:5px;row-gap:3px;padding:8px;background:#fff;border:1px solid #d6e1ed;border-radius:8px;transition:background .5s,border-color .5s}
.hb-record-branches>div::before{content:'';position:absolute;bottom:100%;left:50%;height:11px;border-left:1px solid #9db6d2}
.hb-record-branches>div.is-current{background:#f1f6fc;border-color:#a9bfd9}
.hb-record-branches .ico{width:13px;height:13px;color:#547da7;align-self:center}
.hb-record-branches strong{font:600 12px/1.4 var(--font)}
.hb-record-branches small{grid-column:1/-1;font:400 10px/1.3 var(--font);color:#62758d}
.hb-proof-summary{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.hb-completed{display:flex;align-items:center;gap:5px;font:600 11px/1.4 var(--font);color:#2e7950}
.hb-completed .ico{width:16px;height:16px}
.hb-proof-summary>small{font:400 10px/1.4 var(--font);color:#61738b}
.hb-proof-detail{margin-top:10px}
.hb-proof-detail>strong{display:block;font:600 13px/1.4 var(--font)}
.hb-proof-detail>small{display:block;font:400 11px/1.4 var(--font);color:#61738b;margin-top:3px}
.hb-proof-attachment{display:flex;align-items:center;gap:7px;padding:9px 10px;border:1px solid #d5e6dc;background:#fff;border-radius:8px;margin-top:12px;font:500 11px/1.4 var(--font);color:#39644d}
.hb-proof-attachment>.ico{width:15px;height:15px;flex:none}
.hb-proof-attachment>small{margin-left:auto;font-size:10px;color:#61776a}
@media(min-width:1101px){
 .hb-bento-clear .hb-tile>p{margin-bottom:10px}
}
@media(min-width:1101px) and (max-width:1250px){
 .hb-bento-clear .hb-simple-steps small{display:none}
 .hb-bento-clear .hb-simple-steps li{min-height:50px}
}
@media(min-width:1101px) and (max-height:740px){
 .hb-bento-clear .hb-tile>p{font-size:12px;line-height:1.35;margin-bottom:7px}
 .hb-bento-clear .hb-line-flow{margin-top:10px}.hb-line-flow li{gap:4px}
 .hb-bento-clear .hb-brief-example{padding:7px 8px;font-size:11px}
 .hb-bento-clear .hb-redline-example{padding:7px 9px}.hb-redline-example>small{margin-bottom:4px}
 .hb-bento-clear .hb-redline-example del,.hb-bento-clear .hb-redline-example ins{font-size:11px;padding-block:2px}
 .hb-bento-clear .hb-ai-control{font-size:10px;margin-top:6px}
 .hb-bento-clear .hb-task-strip{padding:7px 8px}
 .hb-bento-clear .hb-linked-record{margin-bottom:13px;padding:6px 9px}.hb-linked-record::after{height:14px}
 .hb-bento-clear .hb-record-branches{gap:7px}.hb-record-branches>div{padding:6px}
 .hb-bento-clear .hb-proof-detail{margin-top:7px}.hb-bento-clear .hb-proof-attachment{margin-top:8px;padding:6px 8px}
}
@media(max-width:1100px){
 .hb-bento-clear .hb-tile{min-height:210px}
 .hb-bento-clear .hb-tile>p{margin-bottom:16px}
 .hb-bento-clear .hb-story-tile{min-height:230px}
 .hb-bento-clear .hb-workflow-tile{min-height:0}
 .hb-bento-clear .hb-follow-tile{padding-bottom:18px}
}
@media(max-width:700px){
 .hb-bento-clear .hb-tile{padding:18px;min-height:210px}
 .hb-bento-clear .hb-workflow-tile{min-height:0}
 .hb-bento-clear .hb-story-tile{min-height:230px}
 .hb-bento-clear .hb-linked-record{margin-top:4px}
 .hb-bento-clear .hb-record-branches{gap:7px}
}
/* Product snapshots: always readable, with motion confined to accents. */
.hb-bento-modern .hb-tile{isolation:isolate;justify-content:flex-start;text-align:left;border-color:#dce5ef;box-shadow:0 5px 20px -12px #263b6026;transition:box-shadow .25s,border-color .25s}
.hb-bento-modern .hb-tile>p{flex:none;line-height:1.4}
.hb-bento-modern .ico{width:16px;height:16px;flex:none}
.hb-bento-modern .mb-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex:none}
.hb-bento-modern .mb-card-heading>span{min-width:0}
.hb-bento-modern .mb-card-heading>.mb-corner-icon{width:21px;height:21px;margin-top:2px;color:#000;stroke:#000;flex:none}
.hb-bento-modern .mb-voice{background:linear-gradient(145deg,#fff 35%,#eef1ff)}
.mb-voice-scene{display:flex;flex-direction:column;justify-content:center;flex:1;min-height:0;padding-top:12px}
.mb-composer{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid #e2e6f2;border-radius:15px;background:#ffffffd9;box-shadow:0 8px 18px -12px #444c8a33;position:relative;margin-right:18px}
.mb-mic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:13px;background:linear-gradient(145deg,#437ac4,#7b63bb);color:white;box-shadow:0 4px 12px #6579bb33}
.mb-mic .ico{width:21px;height:21px}.mb-voice-prompt{min-width:0}
.mb-voice-prompt>span{display:block;font:500 11px/1.4 var(--font);color:#475776;margin-top:5px}
.mb-wave{height:25px;display:flex;align-items:center;gap:4px}
.mb-wave i{width:3px;height:var(--bar);max-height:25px;border-radius:4px;background:#7188cb;animation:mb-wave 1.1s calc(var(--i)*-.09s) ease-in-out infinite alternate}
.mb-draft-result{display:flex;align-items:center;gap:9px;padding:10px;background:#fff;border:1px solid #dce4f0;border-radius:12px;margin:10px 0 0 22px;position:relative;box-shadow:0 10px 20px -14px #344a7a50}
.mb-draft-result::before{content:'';position:absolute;left:-12px;bottom:50%;width:11px;height:22px;border:solid #b2bce0;border-width:0 0 1px 1px;border-radius:0 0 0 8px}
.mb-doc-icon{display:grid;place-items:center;width:28px;height:32px;flex:none;border-radius:7px;color:#4d6cb0;background:#edf1fd}
.mb-draft-result strong{display:block;font:600 12px/1.3 var(--font)}
.mb-draft-result small{display:block;font:400 10px/1.4 var(--font);color:#768298;margin-top:2px}
.mb-draft-result>.ico{margin-left:auto;color:#32836a}
.hb-bento-modern .mb-ai{background:linear-gradient(145deg,#fff,#f4f7fc);border-color:#dce5ef;color:var(--ink)}
.hb-bento-modern .mb-ai>p{color:#61728b}
.mb-ai-title{display:flex;align-items:center;gap:8px}
.mb-ai-title .ai-mark{width:23px;height:23px;flex:none}
.mb-ai-chip{margin-left:auto;padding:4px 7px;border:1px solid #7e9ac04d;border-radius:20px;background:#ffffff09;font:450 9px/1.2 var(--font);letter-spacing:0;color:#cedcf2;white-space:nowrap}
.mb-editor{border:1px solid #e4eaf2;border-radius:11px;overflow:hidden;margin:auto 0;background:#fff;box-shadow:none}
.mb-editor-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border-bottom:1px solid #edf1f6;font:500 10px/1.3 var(--font);color:#718199}
.mb-editor-bar>span,.mb-editor-bar>small{display:flex;align-items:center;gap:6px}
.mb-editor-bar>small{font-size:9px;color:#b9b3f2;white-space:nowrap}
.mb-editor-bar .ico{width:12px;height:12px}.mb-editor-bar i{width:5px;height:5px;border-radius:50%;background:#ae9ee9;box-shadow:0 0 7px #b1a4e9}
.mb-diff{padding:9px;display:grid;gap:4px}
.mb-diff del,.mb-diff ins{display:flex;align-items:center;gap:9px;font:450 12px/1.45 var(--font);padding:5px 8px;border-radius:4px}
.mb-diff del{color:#8b7780;background:transparent;text-decoration:line-through}
.mb-diff ins{color:#39745b;background:#f0f7f3;text-decoration:none}
.mb-diff span{font-size:14px;opacity:.7}
.mb-ai-footer{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font:400 10px/1.4 var(--font);color:#61728b;padding-top:6px}
.mb-ai-footer .ico{width:13px;height:13px;margin-right:3px;color:#7994b3}.mb-ai-footer strong{color:#61728b;font-weight:500}
.mb-workflow-canvas{position:relative;height:120px;flex:none;margin:auto 0;background-image:radial-gradient(#c7d5e5 0.7px,transparent .8px);background-size:12px 12px}
.mb-workflow-canvas>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mb-workflow-canvas>svg path{fill:none;stroke:#93accd;stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-dasharray:4 4;animation:mb-signal 4s linear infinite}
.mb-workflow-canvas ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:44% 44%;justify-content:space-between;row-gap:32px;position:relative}
.mb-workflow-canvas li{height:44px;display:flex;align-items:center;gap:7px;padding:6px;border-radius:9px;background:#fff;border:1px solid #dce4ef;box-shadow:0 3px 8px #243b6007;transition:border-color .4s,box-shadow .4s;min-width:0}
.mb-workflow-canvas li.is-current{border-color:#b0c6e3;box-shadow:0 3px 10px #426b9d10}
.mb-workflow-canvas li>span{display:grid;place-items:center;width:25px;height:25px;border-radius:7px;background:#edf2fb;color:#5478ac;flex:none}
.mb-workflow-canvas li .ico{width:13px;height:13px}
.mb-workflow-canvas strong{display:block;font:600 11px/1.25 var(--font);color:#2e4566}
.mb-workflow-canvas small{display:block;font:400 9px/1.3 var(--font);color:#7b899d;margin-top:3px}
.mb-workflow-canvas .mb-node-done{background:#f0f9f5;border-color:#c5e4d6}.mb-node-done>span{background:#ddf0e7!important;color:#2f8d69!important}
.mb-notification-scene{margin:auto 0;position:relative;padding:10px 0 3px}
.mb-reminder{display:flex;align-items:center;gap:10px;padding:13px 11px;border:1px solid #e1e6ee;border-radius:13px;background:#fff;box-shadow:0 8px 22px -13px #3c527a3d;margin-right:18px;transform:rotate(-2deg)}
.mb-bell{display:grid;place-items:center;width:32px;height:32px;background:#fff4df;border:1px solid #f0dfbb;border-radius:10px;color:#b68a3a;flex:none}
.mb-reminder small{display:block;font:500 9px/1.2 var(--font);color:#8b784f;text-transform:uppercase;letter-spacing:.04em}
.mb-reminder strong{display:block;font:600 12px/1.3 var(--font);margin:4px 0}
.mb-reminder div>span{display:block;font:400 10px/1.3 var(--font);color:#71819a}
.mb-reply{display:flex;align-items:center;gap:8px;width:max-content;max-width:95%;position:relative;margin:4px 0 0 auto;background:#edf8f3;border:1px solid #cde5d9;border-radius:11px 11px 3px 11px;padding:8px 10px;box-shadow:0 6px 16px -10px #28664840;font:500 11px/1.3 var(--font);color:#315d4f;transform:rotate(1deg)}
.mb-avatar{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;font-size:9px;background:#d6e9e2;color:#366652;flex:none}
.mb-reply>.ico{width:13px;height:13px;margin-left:6px}
.hb-bento-modern .mb-follow{background:linear-gradient(150deg,#fff 45%,#f7f9fd)}
.hb-bento-modern .mb-connected{background:linear-gradient(150deg,#fff,#f1f6fd)}
.mb-record-map{position:relative;height:126px;flex:none;margin:auto 0}
.mb-map-lines{position:absolute;inset:0;width:100%;height:100%}
.mb-map-lines path{fill:none;stroke:#bbcce2;stroke-width:1.3;vector-effect:non-scaling-stroke;transition:stroke .4s}
.mb-map-lines path.is-current{stroke:#6c96c9;stroke-dasharray:5 3;animation:mb-signal 3s linear infinite}
.mb-record-hub{position:absolute;left:0;top:50%;transform:translateY(-50%);width:36%;display:flex;flex-direction:column;align-items:center;padding:11px 5px;border:1px solid #d7e2f0;border-radius:12px;background:#fff;box-shadow:0 7px 18px -10px #345d9a35}
.mb-hub-icon{display:grid;place-items:center;width:29px;height:32px;border-radius:7px;background:#eaf1fb;color:#497bb7;margin-bottom:6px}
.mb-record-hub strong{font:600 11px/1.3 var(--font);text-align:center}.mb-record-hub small{font:450 9px/1.3 var(--font);color:#8b98aa;margin-top:3px}
.mb-record-links{position:absolute;inset:0 0 0 61.5%;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:6px}
.mb-record-link{display:grid;grid-template-columns:18px 1fr;align-content:center;column-gap:7px;border:1px solid #e0e8f2;border-radius:9px;padding:5px 9px;background:#fff;transition:border-color .4s}
.mb-record-link.is-current{border-color:#c0d2e8}.mb-record-link>.ico{grid-row:1/3;align-self:center;color:#6584ae;width:14px;height:14px}
.mb-record-link strong{font:600 11px/1.2 var(--font);color:#3c5576}.mb-record-link small{font:400 9px/1.3 var(--font);color:#8090a7;margin-top:2px;white-space:nowrap}
.hb-bento-modern .mb-proof{background:linear-gradient(145deg,#fff 25%,#edf7f2)}
.mb-receipt{position:relative;margin:auto 0;padding:12px;border:1px solid #d6e6de;border-radius:12px;background:#ffffffd9;box-shadow:0 7px 18px -13px #2d6f4833}
.mb-receipt-top{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-right:30px}
.mb-receipt-top>span{font:600 8px/1.2 var(--font);letter-spacing:.08em;color:#348261}.mb-receipt-top small{font:400 9px/1.2 var(--font);color:#89968e}
.mb-proof-stamp{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:26px;height:26px;background:#e2f3ea;border:1px solid #c9e6d8;border-radius:50%;color:#348263}
.mb-receipt>strong{display:block;font:600 13px/1.3 var(--font)}
.mb-receipt>p{font:400 10px/1.4 var(--font);color:#7a8b83;margin:3px 0 10px}
.mb-receipt-file{display:flex;align-items:center;gap:7px;border-top:1px dashed #d5e4dc;padding-top:8px;font:450 10px/1.3 var(--font);color:#507564}
.mb-receipt-file .ico{width:13px;height:13px}.mb-receipt-file small{margin-left:auto;font-size:9px;color:#3e8b69}
/* Quiet, staggered ambient motion. Headings and copy never disappear.
   Individual translate preserves each notification's resting rotation. */
.hb-bento-modern .mb-composer{animation:mb-drift 6s ease-in-out infinite}
.hb-bento-modern .mb-draft-result{animation:mb-drift 6s -3s ease-in-out infinite}
.hb-bento-modern .mb-mic{animation:mb-breathe 5s ease-in-out infinite}
.hb-bento-modern .mb-ai-title .ai-mark{animation:mb-drift 5.5s -1s ease-in-out infinite}
.hb-bento-modern .mb-editor{animation:mb-drift 7s -2s ease-in-out infinite}
.hb-bento-modern .mb-diff ins{animation:mb-redline-glow 6s -1s ease-in-out infinite}
.hb-bento-modern .mb-workflow-canvas li>span{animation:mb-breathe 6s ease-in-out infinite}
.hb-bento-modern .mb-workflow-canvas li:nth-child(2)>span{animation-delay:-4.5s}
.hb-bento-modern .mb-workflow-canvas li:nth-child(3)>span{animation-delay:-3s}
.hb-bento-modern .mb-workflow-canvas li:nth-child(4)>span{animation-delay:-1.5s}
.hb-bento-modern .mb-reminder{animation:mb-drift 6.5s -.7s ease-in-out infinite}
.hb-bento-modern .mb-reply{animation:mb-drift 6.5s -3.8s ease-in-out infinite}
.hb-bento-modern .mb-bell .ico{transform-origin:50% 15%;animation:mb-bell-sway 7s ease-in-out infinite}
.hb-bento-modern .mb-hub-icon{animation:mb-breathe 6s -2s ease-in-out infinite}
.hb-bento-modern .mb-record-link{animation:mb-record-drift 7s ease-in-out infinite}
.hb-bento-modern .mb-record-link:nth-child(2){animation-delay:-2.3s}
.hb-bento-modern .mb-record-link:nth-child(3){animation-delay:-4.6s}
.hb-bento-modern .mb-receipt{animation:mb-drift 7s -1.5s ease-in-out infinite}
.hb-bento-modern .mb-proof-stamp{animation:mb-breathe 5s -1s ease-in-out infinite}
.hb-bento-modern [data-running='false'] *{animation-play-state:paused!important}
@keyframes mb-drift{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes mb-record-drift{0%,100%{translate:0 0}50%{translate:-2px 0}}
@keyframes mb-breathe{0%,100%{scale:1}50%{scale:1.045}}
@keyframes mb-redline-glow{0%,100%{background-color:#f0f7f3}50%{background-color:#e1f1e8}}
@keyframes mb-bell-sway{0%,12%,100%{rotate:0deg}3%,9%{rotate:6deg}6%{rotate:-6deg}}
@keyframes mb-wave{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
@keyframes mb-signal{to{stroke-dashoffset:-32}}
@media(hover:hover) and (pointer:fine){.hb-bento-modern .hb-tile:hover{border-color:#afc1da;box-shadow:0 12px 28px -18px #263b6050}.hb-bento-modern .mb-ai:hover{border-color:#7091c0}}
@media(min-width:1101px){
 .mb-editor{margin-top:auto;margin-bottom:auto}.mb-ai>p{margin-bottom:10px}
 .mb-workflow-canvas,.mb-record-map{margin-bottom:auto;margin-top:auto}
 .mb-receipt,.mb-notification-scene{margin-bottom:auto;margin-top:auto}
}
@media(min-width:1101px) and (min-height:800px){
 .hb-bento-modern .hb-tile{padding:20px}
 .mb-composer{padding:16px 12px}.mb-draft-result{padding:13px 10px;margin-top:16px}
 .mb-voice-prompt>span{font-size:12px}.mb-draft-result strong{font-size:13px}.mb-draft-result small{font-size:11px}
 .mb-editor-bar{padding:12px;font-size:11px}.mb-editor-bar>small{font-size:10px}.mb-diff{padding:12px;gap:6px}.mb-diff del,.mb-diff ins{font-size:14px;padding:8px 10px}.mb-ai-footer{font-size:11px}
 .mb-workflow-canvas{height:148px}.mb-workflow-canvas ol{row-gap:40px}.mb-workflow-canvas li{height:54px;padding:8px}.mb-workflow-canvas strong{font-size:12px}.mb-workflow-canvas small{font-size:10px}.mb-workflow-canvas li>span{width:28px;height:28px}
 .mb-reminder{padding:16px 12px}.mb-reminder small{font-size:10px}.mb-reminder strong{font-size:14px}.mb-reminder div>span{font-size:11px}.mb-reply{padding:10px 12px;margin-top:10px;font-size:12px}
 .mb-record-map{height:154px}.mb-record-hub{padding:16px 8px}.mb-record-hub strong{font-size:12px}.mb-record-hub small{font-size:10px}.mb-record-link strong{font-size:12px}.mb-record-link small{font-size:10px}
 .mb-receipt{padding:16px}.mb-receipt>strong{font-size:15px}.mb-receipt>p{font-size:12px;margin:6px 0 14px}.mb-receipt-top{margin-bottom:15px}.mb-receipt-top>span{font-size:9px}.mb-receipt-top small{font-size:10px}.mb-receipt-file{padding-top:12px;font-size:12px}
}
@media(min-width:1101px) and (max-width:1250px){.mb-workflow-canvas small{display:none}.mb-workflow-canvas li{gap:5px}.mb-workflow-canvas strong{font-size:10px}.mb-ai-chip{display:none}}
@media(min-width:1101px) and (max-height:740px){
 .hb-bento-modern .hb-tile>p{font-size:11px;margin-top:4px}
 .mb-voice-scene{padding-top:6px}.mb-composer{padding:7px;gap:8px}.mb-mic{width:30px;height:30px}.mb-wave{height:17px}.mb-wave i{max-height:17px}.mb-voice-prompt>span{font-size:10px;margin-top:2px}.mb-draft-result{padding:6px;margin-top:7px}.mb-draft-result small{font-size:9px}
 .mb-ai>p{margin-bottom:6px}.mb-editor-bar{padding:6px 8px}.mb-diff{padding:6px;gap:3px}.mb-diff del,.mb-diff ins{padding:2px 5px;font-size:11px}.mb-ai-footer{font-size:9px;padding-top:5px}
 .mb-workflow-canvas{height:94px}.mb-workflow-canvas ol{row-gap:18px}.mb-workflow-canvas li{height:38px}.mb-workflow-canvas small{font-size:8px;margin-top:2px}
 .mb-reminder{padding:9px}.mb-reply{padding:5px 8px}.mb-notification-scene{padding:6px 0 0}
 .mb-record-map{height:108px}.mb-record-hub{padding:7px 4px}.mb-hub-icon{height:24px;width:24px;margin-bottom:4px}.mb-record-link{padding:4px 7px}.mb-record-links{gap:4px}
 .mb-receipt{padding:8px 10px}.mb-receipt-top{margin-bottom:6px}.mb-receipt>p{margin-bottom:6px}.mb-receipt-file{padding-top:6px}
}
@media(max-width:1100px){
 .hb-bento-modern .hb-tile{min-height:250px;padding:20px}
 .hb-bento-modern .mb-ai{min-height:270px}
 .mb-voice-scene{max-width:360px;width:100%;margin-inline:auto}
 .mb-editor{margin-top:20px;margin-bottom:12px}.mb-ai-footer{padding-top:0;margin-top:auto}
 .mb-workflow-canvas{margin-top:24px;margin-bottom:4px}
 .mb-record-map{margin-top:22px;margin-bottom:0}
 .mb-notification-scene{margin-top:18px;margin-bottom:0}
 .mb-receipt{margin-top:20px;margin-bottom:0}
}
@media(max-width:700px){
 .hb-bento-modern .hb-tile{min-height:240px;padding:18px}
 .hb-bento-modern .hb-tile h3{font-size:21px}.hb-bento-modern .hb-tile>p{font-size:13px}
 .hb-bento-modern .mb-ai{min-height:255px}.mb-ai-chip{font-size:8px}
 .mb-workflow-canvas small{font-size:8px}.mb-workflow-canvas strong{font-size:10px}
 .mb-receipt-top{gap:6px}.mb-receipt-top small{font-size:8px}
}
@media(max-width:360px){.mb-record-links{left:56%}.mb-record-link{padding:4px 6px;column-gap:4px;grid-template-columns:14px 1fr}.mb-record-link small{font-size:8px}.mb-workflow-canvas small{display:none}}
@media(prefers-reduced-motion:reduce){.hb-bento-modern *{animation:none!important;transition:none!important}}
.home-connections{background:#edf2f8}.home-chapters.home-simple>#integrations.home-connections{padding-block:48px}.home-connections>.container{display:flex;flex-direction:column;align-items:center}.home-connections#integrations>.container{gap:20px}
/* From scattered tools to one orchestrated flow. Geometry is re-laid vertically on phones. */
.hc-orchestration{--gather:0;--core:0;position:relative;isolation:isolate;width:100%;max-width:1120px;min-height:340px;aspect-ratio:1120/360;margin:0 auto;color:#334660}
.hc-orchestration::before{content:'';position:absolute;inset:-10px;background-image:radial-gradient(#7e9fc21c .8px,transparent .8px);background-size:19px 19px;mask-image:radial-gradient(ellipse,#000 35%,transparent 72%);pointer-events:none}
.hc-flow-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;pointer-events:none}
.hc-flow-tangle{stroke:#bc9474;stroke-width:1.15;opacity:.7}
.hc-flow-tangle path:nth-child(3n){stroke-dasharray:4 6}
.hc-flow-order{stroke:#7798b8;stroke-width:1.35}
.hc-flow-order path:nth-child(3n+1){stroke:#b49760}
.hc-flow-order path:nth-child(3n+2){stroke:#9585b1}
.hc-flow-packet{opacity:0;fill:#567fa7;stroke:none}
.hc-flow-packet.is-gold{fill:#c99c42}.hc-flow-packet.is-purple{fill:#9480b9}
.hc-flow-group{position:absolute;left:3.2%;width:27%;padding-bottom:6px;border-bottom:1px solid #9eb4cd38;font:600 13px/1.4 var(--font);letter-spacing:.02em;opacity:var(--gather);color:#526b87}
.hc-flow-teams{position:absolute;top:0;right:1.5%;font:600 13px/1.4 var(--font);opacity:var(--gather);color:#526b87}
.hc-flow-node{position:absolute;display:flex;align-items:center;justify-content:center;flex-direction:column;width:66px;transform:translate(-50%,-50%);will-change:left,top}
.hc-flow-node .hc-node-mark{width:34px;height:34px}
.hc-flow-name{position:absolute;top:calc(100% + 8px);width:94px;text-align:center;font:500 10px/1.3 var(--font);color:#52647a;opacity:var(--gather)}
.hc-flow-core{position:absolute;left:50%;top:50%;width:8.6%;min-width:76px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;border:1px solid #d6e0ed;border-radius:26%;background:#fff;box-shadow:0 0 0 10px #edf2f8b3,0 12px 35px -18px #29476d55;opacity:var(--core);transform:translate(-50%,-50%) scale(calc(.88 + var(--core)*.12))}
.hc-flow-core .hc-core-mark{width:43%;height:43%}.hc-flow-core strong{font:650 clamp(11px,1.1vw,15px)/1.2 var(--font);color:#1b2a4a}
@media(min-width:801px) and (max-width:1000px){.hc-flow-node .hc-node-mark{width:28px;height:28px}.hc-flow-group,.hc-flow-teams{font-size:11px}.hc-flow-name{font-size:9px;width:48px;text-wrap:balance}.hc-flow-core{gap:5px}}
@media(max-width:800px){
 .home-chapters.home-simple>#integrations.home-connections{padding-block:36px}
 .home-connections#integrations>.container{gap:20px}
 .hc-orchestration{max-width:400px;min-height:0;aspect-ratio:400/720}
 .hc-flow-group{left:4%;width:92%;padding-bottom:0;border:0;font-size:12px}
 .hc-flow-teams{top:75%;right:0;left:0;text-align:center;font-size:12px}
 .hc-flow-core{top:59.21%;width:24%;min-width:0;gap:7px;border-radius:24%}
 .hc-flow-core strong{font-size:12px}.hc-flow-node{width:48px}.hc-flow-node .hc-node-mark{width:29px;height:29px}
 .hc-flow-name{font-size:9px;width:72px;top:calc(100% + 5px)}
}
@media(prefers-reduced-motion:reduce){.hc-orchestration .hc-flow-packet{display:none}.hc-flow-node{will-change:auto}}
.hc-copy{max-width:800px;text-align:center}.hc-copy h2 em{display:block}.hc-copy>p{max-width:600px;font-size:18px;line-height:1.6;color:#4d5672;margin:18px auto 0}.hc-link{font-size:15px;color:#2364a8}
.hc-bridge{position:relative;width:100%;max-width:1060px!important;height:440px;margin:0 auto;isolation:isolate}
.hc-bridge-wires{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#91abc8;stroke-width:1;pointer-events:none}
.hc-bridge-wires path{vector-effect:non-scaling-stroke}.hc-bridge-wires .hc-wire{opacity:.4}.hc-bridge-wires .hc-bridge-systems{stroke:#b99a60}.hc-bridge-wires .hc-bridge-people{stroke:#789bbf}
.hc-mobile-wires{display:none}
.hc-bridge-node{position:absolute;left:var(--x);top:var(--y);width:48px;height:48px;transform:translate(-50%,-50%)}
.hc-bridge .hc-node-face{animation:none}
.hc-bridge-core{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;gap:12px;width:110px}
.hc-bridge-core .hc-core-mark{width:58px;height:58px}.hc-bridge-core strong{font:650 16px/1.2 var(--font);color:#1b2a4a}
.hc-network[data-running=false] .hc-signal{animation-play-state:paused}
.hc-bridge-wires .hc-bridge-ai{stroke:#8979b6}
.hc-ai-label{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:clamp(58px,10vw,112px);text-align:center;color:#4d5672;font:600 12px/1.5 var(--font)}
@media(min-width:601px) and (max-width:1100px){.hc-ai-label{font-size:10px}}
.nph-ai-attribution,.hb-ai-source{display:flex;align-items:center;gap:6px}
.nph-ai-attribution strong{font-weight:650;color:#665497}
.nph-ai-attribution .ai-mark{width:15px;height:15px;border-radius:5px}
.nph-ai-attribution .ai-mark svg{width:10px;height:10px}
.nph-callout>.ai-mark{width:24px;height:24px;border-radius:8px}
.nph-callout>.ai-mark svg{width:16px;height:16px}
@media(max-width:600px){.hc-bridge{height:500px}.hc-bridge-node{left:var(--mx);top:var(--my);width:32px;height:32px}.hc-mobile-wires{display:block}.hc-desktop-wires{display:none}.hc-bridge-core{top:54%;gap:8px}.hc-bridge-core .hc-core-mark{width:44px;height:44px}.hc-bridge-core strong{font-size:14px}.hc-ai-label{width:clamp(50px,20vw,80px);font-size:10px}.nph-callout>.ai-mark{width:18px;height:18px;border-radius:6px}.nph-callout>.ai-mark svg{width:12px;height:12px}}
.hc-network{min-width:0;width:100%;max-width:620px;margin:0 auto}
.hc-orbit{position:relative;width:100%;aspect-ratio:1;isolation:isolate}
.hc-ring{position:absolute;inset:0;animation:hc-orbit-turn var(--orbit-time) linear infinite}
.hc-ring-outer{--orbit-time:120s;--orbit-color:#ba9149}
.hc-ring-inner{--orbit-time:85s;--orbit-color:#5a89b8;animation-direction:reverse}
.hc-orbit-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--orbit-color);stroke-width:1;pointer-events:none}
.hc-orbit-track{opacity:.36;stroke-width:1.2}.hc-ring-outer .hc-orbit-track{stroke-dasharray:3 6}
.hc-wire{opacity:.18}.hc-signal{stroke-width:2.2;stroke-linecap:round;stroke-dasharray:2 98;animation:hc-orbit-signal 7s linear infinite;animation-delay:var(--signal-delay);opacity:.65}
.hc-signal-in{animation-direction:reverse;animation-delay:calc(var(--signal-delay) - 3.5s);stroke:#638db8;opacity:.45}
.hc-orbit-node{position:absolute;width:9%;height:9%;transform:translate(-50%,-50%)}
.hc-node-face{width:100%;height:100%;display:flex;align-items:center;justify-content:center;animation:hc-orbit-turn var(--orbit-time) linear infinite reverse}
.hc-ring-inner .hc-node-face{animation-direction:normal}
.hc-node-mark{display:flex;align-items:center;justify-content:center;width:clamp(26px,3vw,40px);height:clamp(26px,3vw,40px);color:#386da5}
.hc-node-mark svg,.hc-node-mark img,.hc-node-mark .fa-bm,.hc-node-mark .ico{width:100%;height:100%;object-fit:contain;display:block}
.hc-node-mark .hc-whatsapp{fill:#2aaf70}
.hc-node-label{font:550 clamp(10px,1vw,12px)/1.1 var(--font);letter-spacing:-.025em;white-space:nowrap;color:#334660}
.hc-orbit-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:20%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}
.hc-core-mark{width:43%;height:43%;overflow:visible}.hc-orbit-core strong{font:650 clamp(11px,1.1vw,14px)/1 var(--font);color:#1b2a4a}
.hc-network figcaption{text-align:center;padding:0 8px}
.hc-orbit-key{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;font:550 13px/1.5 var(--font);color:#435b76}
.hc-orbit-key>span{display:flex;align-items:center;gap:7px}.hc-orbit-key i{width:9px;height:9px;border:2px solid #5a89b8;border-radius:50%}.hc-orbit-key .hc-key-outer{border-color:#ba9149}
.hc-availability{max-width:460px;margin:12px auto 0;font:400 12px/1.6 var(--font);color:#58687b}
.hc-motion-toggle{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:8px 12px;border:0;background:none;color:#52647a;font:500 12px var(--font);cursor:pointer}.hc-motion-toggle .ico{width:13px;height:13px}.hc-motion-toggle:focus-visible{outline:2px solid #2364a8;outline-offset:2px;border-radius:6px}
.hc-network[data-running=false] .hc-ring,.hc-network[data-running=false] .hc-node-face,.hc-network[data-running=false] .hc-signal{animation-play-state:paused}
@keyframes hc-orbit-turn{to{transform:rotate(360deg)}}
@keyframes hc-orbit-signal{to{stroke-dashoffset:-100}}
@media(max-width:500px){.hc-node-mark{width:25px;height:25px}.hc-orbit-node{width:10%;height:10%}.hc-ring-outer{inset:4%}.hc-ring-inner{inset:4%}.hc-orbit-core{gap:6px}}
@media(prefers-reduced-motion:reduce){.hc-ring,.hc-node-face,.hc-signal{animation:none!important}.hc-signal,.hc-motion-toggle{display:none}}
@media(max-width:1100px){.hb-grid{gap:14px}.hb-card{padding:24px 18px}.hb-example{padding:18px 14px}.home-connections>.container{gap:35px}.hc-status{margin-left:31px}.hc-option{padding:22px}}
@media(max-width:800px){
 .home-chapters.home-simple>.home-benefits,.home-chapters.home-simple>.home-connections{padding:54px 0;scroll-margin-top:64px}
 .home-chapters.home-simple>#capabilities.home-benefits{padding-top:32px}
 .home-benefits .hb-heading{margin-bottom:56px}
 .hb-grid{grid-template-columns:1fr;gap:18px}.hb-card{padding:24px;display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-items:start}.hb-card>h3{min-height:0;grid-column:1}.hb-card>p{min-height:0;grid-column:1;margin:12px 0 0}.hb-example,.hb-phone,.hb-card>.hb-demo{grid-column:2;grid-row:1/4;margin:0;width:100%}.hb-phone{max-width:222px;justify-self:center}.hb-bottom{flex-direction:column;gap:8px;text-align:center}.home-connections>.container{grid-template-columns:1fr;gap:28px}.hc-copy{max-width:520px}.hc-status{margin-left:auto}
}
@media(max-width:500px){
 .home-simple .trust-band{padding:16px 20px}.home-simple .hero-trust-track{gap:16px;padding-right:16px}.home-simple .hero-trust-track li{width:130px}.home-simple .hero-trust-track img{max-width:90px;max-height:30px}
 .customer-mark{width:130px}.customer-name{font-size:15px}
 .hb-heading{text-align:left;margin-bottom:26px}.hb-heading h2{font-size:32px}.hb-card{display:flex;padding:24px}.hb-card>h3{font-size:24px}.hb-card>p{margin:12px 0 24px;font-size:16px}.hb-example{width:100%;padding:22px}.hb-phone{align-self:center;width:222px}.hc-option{padding:21px}.hc-option h3{font-size:17px}.hc-status{margin-left:31px}.hc-copy>p{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
 .home-simple .hero-trust-track{animation:none}
 .home-simple .hero-trust-track[aria-hidden=true]{display:none}
 .home-simple .hero-trust-roll{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
}
/* Meet Navio uses the available screen, not a fixed-height illustration. */
.home-chapters>#navio-os.nvs{
 height:calc(100dvh - var(--bar,0px));min-height:0;
 padding:100px var(--gutter) max(16px,calc(var(--ck-h,0px) + 12px));
}
#navio-os .nvs-in{min-height:0;gap:clamp(12px,2vh,22px)}
#navio-os .nvs-head{flex:none}
#navio-os .nvs-title{font-size:clamp(28px,3.2vw,46px)}
#navio-os .nvs-sub{margin-top:8px}
#navio-os .contract-journey{flex:1;min-height:0;margin:0;display:flex;flex-direction:column;gap:12px}
#navio-os .cj-example{flex:none;margin:0}
#navio-os .cj-layout{flex:1;min-height:0;gap:22px;grid-template-columns:minmax(200px,.7fr) minmax(0,1.7fr)}
#navio-os .cj-tabs{min-height:0;grid-template-rows:repeat(8,minmax(0,1fr));gap:3px}
#navio-os .cj-tab{min-height:0;padding:6px 12px}
#navio-os .cj-tab b{font-size:15px}
#navio-os .cj-tab-description{font-size:11px;margin-top:3px}
#navio-os .cj-panel{min-height:0}
#navio-os .cj-app-bar{min-height:38px;padding:9px 16px;flex:none}
#navio-os .cj-scene-wrap{min-height:0;padding:16px;overflow:auto;overscroll-behavior:contain}
.cj-full-scene{display:flex;width:100%;min-width:0}
#navio-os .cj-scene{gap:12px}
#navio-os .cj-scene h3{font-size:19px}
#navio-os .cj-scene p{font-size:13px}
#navio-os .cj-document{padding:16px}
#navio-os .cj-document h4{font-size:21px}
#navio-os .cj-document h5{margin-top:12px}
#navio-os .cj-document p{font-size:12px}
#navio-os .cj-document .cj-note{margin-top:10px}
#navio-os .cj-parties{padding-bottom:10px;margin-bottom:8px!important}
#navio-os .cj-flow-node{min-height:58px;padding:9px;gap:5px}
#navio-os .cj-field{padding:7px 0}
#navio-os .cj-split{gap:16px}
#navio-os .cj-split aside{gap:10px}
#navio-os .cj-signatures{margin-top:16px}
#navio-os .cj-work-items article{padding:10px}
#navio-os .cj-task-card{padding:15px}
#navio-os .cj-task-card>h3{margin:10px 0}
#navio-os .cj-message,#navio-os .cj-evidence{margin:12px 0 0;padding:10px}
#navio-os .cj-timeline,#navio-os .cj-checklist{gap:10px}
#navio-os .cj-panel-foot{padding:9px 14px;flex:none}
.cj-bottom{display:flex;align-items:center;justify-content:center;gap:14px;flex:none}
#navio-os .cj-bridge{margin:0;font-size:12px;line-height:1.4}
.cj-step-select,.cj-compact-scene,.cj-details{display:none}
.cj-details{border:0;background:transparent;color:#275f98;font:600 12px var(--ui);min-height:36px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cj-detail-dialog{width:min(850px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:22px;border:1px solid #d5ddea;border-radius:18px;background:#f0f4f9;color:var(--ink);overflow:auto}
.cj-detail-dialog::backdrop{background:#0f1935a8}
.cj-detail-head{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:20px}
.cj-detail-head h3{margin:0;font:650 20px var(--font)}
.cj-detail-head button{padding:12px;border:1px solid #cbd6e4;border-radius:10px;background:white;cursor:pointer}
@media(min-width:901px) and (max-height:800px){
 .home-chapters>#navio-os.nvs{padding-top:84px}
 #navio-os .nvs-title{font-size:38px}
 #navio-os .nvs-in{gap:10px}
 #navio-os .contract-journey{gap:8px}
 #navio-os .cj-tab-description{display:none}
 #navio-os .cj-scene{gap:9px}
 #navio-os .cj-scene h3{font-size:17px}
 #navio-os .cj-document{padding:12px}
 #navio-os .cj-redline{font-size:12px!important;margin-bottom:8px!important}
 #navio-os .cj-metrics>div{padding:10px}
 #navio-os .cj-metrics strong{font-size:25px}
}
@media(max-width:900px), (max-height:650px){
 #navio-os .cj-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:10px}
 #navio-os .cj-tabs,#navio-os .cj-full-scene{display:none}
 .cj-step-select{display:flex;align-items:center;gap:12px;font:600 12px var(--ui);color:var(--slate)}
 .cj-step-select>span{flex:none}
 .cj-step-select select{width:100%;min-width:0;min-height:44px;padding:9px 12px;border:1px solid #d3deeb;border-radius:10px;background:white;color:var(--ink);font:650 14px var(--ui)}
 .cj-compact-scene{display:flex;flex-direction:column;justify-content:center;gap:14px;width:100%;min-width:0;font:450 14px/1.45 var(--ui)}
 .cj-compact-scene p{margin:0;color:var(--slate)}
 .cj-compact-rows{display:grid;gap:0}
 .cj-compact-rows>div{display:flex;flex-direction:column;gap:4px;padding:12px 0;border-bottom:1px solid #dbe3ee}
 .cj-compact-rows>div:last-child{border:0}
 .cj-compact-rows span{font-size:12px;color:var(--slate)}
 .cj-compact-rows b{font-size:14px;font-weight:650;overflow-wrap:anywhere}
 #navio-os .cj-compact-scene .cj-document p{font-size:13px}
 #navio-os .cj-compact-scene .cj-document .cj-small{margin-top:12px}
 .cj-details{display:block;flex:none}
 .cj-bottom{justify-content:space-between;gap:10px}
 #navio-os .cj-bridge{text-align:left;max-width:240px}
 #navio-os .cj-example{align-items:center}
 #navio-os .cj-example>span{max-width:none}
 #navio-os .cj-scene-wrap{padding:14px}
}
@media(max-width:700px){
 .home-chapters>#navio-os.nvs{padding:78px 20px max(16px,calc(var(--ck-h,0px) + 10px));scroll-margin-top:-68px}
 #navio-os .nvs-in{gap:14px}
 #navio-os .nvs-title{font-size:30px}
 #navio-os .nvs-sub{font-size:12px;letter-spacing:0;line-height:1.4}
 #navio-os .cj-example b{font-size:12px}
 #navio-os .contract-journey{gap:10px}
 #navio-os .cj-play{min-height:44px;font-size:11px}
 #navio-os .cj-next{min-height:44px}
 .cj-detail-dialog .cj-split{grid-template-columns:1fr}
}
@media(max-height:700px){
 #navio-os .nvs-in{gap:8px}
 #navio-os .nvs-title{font-size:28px}
 #navio-os .nvs-sub{margin-top:4px}
 #navio-os .contract-journey{gap:6px}
 #navio-os .cj-example{font-size:10px}
 #navio-os .cj-example b{font-size:11px;margin:0}
 .cj-compact-scene{gap:8px}
 .cj-compact-rows>div{padding:7px 0}
 .cj-compact-rows>div{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
 .cj-compact-rows b{text-align:right;font-size:13px;max-width:60%}
 .cj-compact-rows span{max-width:45%}
 #navio-os .cj-compact-scene .cj-document{padding:8px 12px}
 #navio-os .cj-compact-scene .cj-document h4{font-size:18px;margin:4px 0}
 #navio-os .cj-compact-scene .cj-overline{margin-bottom:6px}
}
/* Landscape phones use the width instead of squeezing a portrait stack. */
@media(min-width:600px) and (max-height:500px){
 .home-chapters>#navio-os.nvs{padding:74px 20px max(10px,calc(var(--ck-h,0px) + 8px))}
 #navio-os .nvs-in{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;align-items:stretch}
 #navio-os .nvs-head{align-self:center;text-align:left}
 #navio-os .nvs-title{font-size:28px}
 #navio-os .nvs-sub{font-size:12px;line-height:1.5}
 #navio-os .cj-example,#navio-os .cj-app-bar{display:none}
 #navio-os .cj-layout{gap:6px}
 #navio-os .cj-scene-wrap{padding:8px 12px}
 #navio-os .cj-panel-foot{padding:4px 10px}
 #navio-os .cj-next{min-height:36px;padding:6px 10px}
 #navio-os .cj-bottom{min-height:28px}
 #navio-os .cj-details{min-height:28px}
 #navio-os .cj-bridge{font-size:10px}
 #navio-os .cj-compact-scene{gap:6px;justify-content:flex-start;font-size:12px}
 #navio-os .cj-compact-scene .cj-flow{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
 #navio-os .cj-flow-node{min-height:42px;padding:5px;gap:3px}
 #navio-os .cj-flow-node b{font-size:10px}
 #navio-os .cj-compact-rows{grid-template-columns:1fr 1fr;gap:0 16px}
 #navio-os .cj-compact-rows>div{padding:5px 0;gap:6px}
 #navio-os .cj-compact-rows span,#navio-os .cj-compact-rows b{font-size:11px}
 #navio-os .cj-compact-scene .cj-document{padding:8px 12px;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;align-items:center}
 #navio-os .cj-compact-scene .cj-document h4{font-size:16px;margin:0}
 #navio-os .cj-compact-scene .cj-document p{font-size:11px}
 #navio-os .cj-compact-scene .cj-document h5,#navio-os .cj-compact-scene .cj-document .cj-small{margin:0}
 #navio-os .cj-compact-scene .cj-signatures{margin:0;gap:10px}
 #navio-os .cj-compact-scene .cj-signature{font-size:16px}
 #navio-os .cj-compact-scene .cj-redline{font-size:11px!important;margin:0!important;line-height:1.4!important}
 #navio-os .cj-metrics>div{padding:5px 10px}
 #navio-os .cj-metrics strong{font-size:20px}
 #navio-os .cj-metrics span{margin-top:3px}
}
/* Phone type hierarchy: marketing copy, not the miniature product interfaces.
   Shared menu is quieter; homepage headings/body/actions use one scale. */
@media(max-width:700px){
 #main:has(.home-simple){--home-section-type:clamp(24px,7.7vw,32px);--home-card-type:22px;--home-body-type:16px;--home-action-type:15px}
 .msheet .macc-link{font-size:17px;line-height:1.4;min-height:48px;font-weight:600}
 .msheet .m-cta{font-size:15px}
 .home-simple .nph-heading .nph-brand,.home-simple .hb-heading h2,.home-simple .hc-copy h2{font-size:var(--home-section-type);line-height:1.15}
 .home-simple .hb-card>h3{font-size:var(--home-card-type);line-height:1.25}
 .home-simple .hb-card>p,.home-simple .hc-copy>p{font-size:var(--home-body-type);line-height:1.6}
 .home-simple .hb-eyebrow,.home-simple .cust-label{font-size:14px;line-height:1.5}
 .home-simple .text-link,.home-simple .nph-controls a,.home-simple #nvj .nvj-simple-learn,.home-simple #nvj.nvj-simple .nvj-demo{font-size:var(--home-action-type);line-height:1.4}
 #main:has(.home-simple) .hcta h2{font-size:var(--home-section-type);line-height:1.15;white-space:normal}
 #main:has(.home-simple) .hcta h2>span{white-space:nowrap}
 #main:has(.home-simple) .hcta-btn{font-size:var(--home-action-type);line-height:1.4}
}
/* Match the Meet Navio title/subtitle hierarchy, retaining the card gap. */
.home-simple .hb-heading{text-align:center}
.home-simple .hb-heading h2{font:600 clamp(28px,3.2vw,46px)/1.05 var(--font);letter-spacing:-.045em;margin:0 0 16px}
.home-simple .hb-heading .hb-subtitle{font:500 clamp(18px,1.8vw,25px)/1.3 var(--font);letter-spacing:-.02em;margin:0;color:var(--ink)}
.home-simple .hb-heading .hb-subtitle em{font-style:italic;color:#2867aa}
@media(min-width:901px) and (max-height:800px){.home-simple .hb-heading h2{font-size:38px}}
@media(max-height:700px){.home-simple .hb-heading h2{font-size:28px}}
@media(max-width:700px){
 .home-simple .hb-heading h2{font-size:var(--home-section-type);line-height:1.15;margin-bottom:12px}
 .home-simple .hb-heading .hb-subtitle{font-size:19px}
}
@media(max-width:700px) and (max-height:740px){
 .home-simple .hb-heading h2{margin-bottom:10px}
 .home-simple .hb-heading .hb-subtitle{font-size:18px}
}
/* Phone refinement: compact status cards instead of desktop leader lines. */
@media(max-width:700px){
 .mobile-refine-desktop{display:none}
 .mobile-refine-only{display:inline}
 #nvj .nvj-category{display:inline-flex;align-items:center;align-self:center;justify-content:center;gap:8px;width:auto;max-width:100%;padding:8px 14px;border:1px solid #dfc890;border-radius:999px;background:#fffaf0;font:650 12px/1.3 var(--font);letter-spacing:.06em;white-space:normal}
 #nvj .nvj-category:before{content:'';width:6px;height:6px;flex:none;border-radius:50%;background:#c99a35}
 .f2 .foot-line{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
 .f2 .foot-line>.foot-copy,.f2 .foot-line>.foot-legal{align-self:center;margin-inline:auto;text-align:center;width:100%;justify-content:center}
 .f2 .foot-line>.foot-legal{display:flex;flex-wrap:wrap;gap:8px 10px}
 .hb-follow-scene .hb-notification{animation:none;opacity:1;transform:none}
 .nph-detailed .nph-curves{display:none}
 .home-simple .nph-detailed.nph-animated .nph-canvas:not(.has-work){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
 .home-simple .nph-detailed.nph-animated .nph-canvas:not(.has-work) .nph-agreement{position:relative;inset:auto;left:auto;top:auto;transform:none!important;order:1;width:100%;max-width:350px;padding:18px;flex:none}
 .nph-detailed .nph-canvas:not(.has-work) .nph-review-status{display:flex;order:2;gap:8px;width:100%;max-width:350px;min-height:64px}
 .nph-detailed .nph-review-status .nph-callout{position:relative!important;inset:auto!important;transform:none!important;flex:1;max-width:none;width:auto;min-width:0;box-shadow:none;border:1px solid #dbe5ef;border-radius:12px;padding:10px;animation:none;opacity:1;align-items:flex-start}
 .nph-detailed .nph-review-status .nph-callout b{font-size:11px}
 .nph-detailed .nph-review-status .nph-callout small{font-size:9px;line-height:1.4}
 .home-simple .nph-detailed.nph-animated .has-work.nph-canvas{gap:0;justify-content:center}
 .home-simple .nph-detailed.nph-animated .has-work .nph-agreement{width:100%;max-width:none;border-radius:12px;margin:0 0 14px;padding:10px 14px;box-shadow:none}
 .nph-detailed .has-work .nph-agreement :is(.nph-document-body,.nph-sign-area,.nph-parties){display:none}
 .nph-detailed .has-work .nph-agreement>h3{font-size:16px;margin:6px 0 0}
 .nph-detailed .has-work .nph-paper-top{font-size:10px}
 .nph-detailed .has-work .nph-output-stack{box-shadow:none;border-radius:16px}
 .nph-detailed .has-proof .nph-output-stack{border-bottom:0;border-radius:16px 16px 0 0}
 .nph-detailed .has-proof .nph-proof-panel{position:relative;inset:auto;width:100%;box-sizing:border-box;border-radius:0 0 16px 16px;border-top:1px solid #dce8df;margin:0;box-shadow:none;padding:12px 14px;grid-template-columns:auto 1fr;gap:4px 9px}
 .nph-detailed .has-proof .nph-proof-panel p{display:none}
 .nph-detailed .has-proof .nph-proof-panel h3{font-size:13px}
 .nph-detailed .has-proof .nph-proof-panel .nph-evidence{display:flex;font-size:10px;grid-column:2}
 .nph-detailed .has-proof .nph-proof-panel small{margin:0;grid-column:2}
 .nph-detailed .has-proof .nph-proof-icon{display:flex;grid-row:1/4;width:28px;height:28px}
}

/* One demo CTA treatment across home, product, solutions and company.
   Page-specific fills must not paint over the gold border. Keep responsive sizing
   and the form's unconsented/disabled state owned by their existing components. */
:is(.site,#nvj.nvj-simple) .demo-cta:not(.cn-off),.site .demo-dialog .demo-cta{
 position:relative;border:2px solid transparent;border-radius:99px;
 background:linear-gradient(var(--ring-fill,var(--action-dark)),var(--ring-fill,var(--action-dark))) padding-box,
  conic-gradient(from var(--spin),#c99a3c 0turn,#c99a3c .62turn,#e6bf62 .76turn,#fff4d2 .86turn,#e6bf62 .95turn,#c99a3c 1turn) border-box;
 color:#fff;white-space:nowrap;text-decoration:none;font-weight:600;
}
:is(.site,#nvj.nvj-simple) .demo-cta::before{content:none}
:is(.site,#nvj.nvj-simple) .demo-cta:not(.cn-off):hover{--ring-fill:var(--action-dark);transform:none}
:is(.site,#nvj.nvj-simple) .demo-cta:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.site .demo-cta:not(.hdr-cta):not(.ct-demo-action){min-height:52px;font-size:16px}
.site .f2-btn.demo-cta:not(.f2-send){--ring-fill:#fff;color:var(--ink)}
.site .f2-btn.demo-cta:not(.f2-send):hover{--ring-fill:#eef2fb}
.site .ct-demo-action{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:0 20px;font:600 15px/1.4 var(--font);width:fit-content}
.ct-way:hover .ct-demo-action{--ring-fill:var(--action-dark)}
/* Compact shared demo modal; retain the familiar CTA even before consent.
   aria-disabled, required consent and submit validation remain unchanged. */
.demo-dialog .demo-head{padding:18px 22px 0;align-items:center;gap:12px}
.demo-dialog .demo-head h2{font-size:22px;line-height:1.2;margin:0}
.demo-dialog .modal-close{width:40px;height:40px}
.demo-dialog .demo-body{padding:16px 22px 22px}
.demo-dialog .df-light{gap:12px}
.demo-dialog .f2-form label{gap:6px}
.demo-dialog .df-light input,.demo-dialog .df-light .f2-phone-row{height:46px}
.demo-dialog .cn{font-size:12px;gap:9px}
.demo-dialog .f2-status:empty{display:none}
.site .demo-dialog .f2-send{width:fit-content;height:52px;min-height:52px;padding:0 24px;gap:14px;justify-self:center;justify-content:center;--ring-fill:var(--action-dark)}
.site .demo-dialog .f2-send:hover{--ring-fill:var(--action-dark)}
.site .demo-dialog .f2-send i{width:17px;height:17px;background:none;color:inherit;border-radius:0}
@media(max-width:560px){.demo-dialog{width:min(410px,calc(100vw - 24px));margin:auto;max-height:calc(100dvh - 24px);border-radius:22px;border-bottom:1px solid var(--line)}.demo-dialog .demo-head{padding:16px 18px 0}.demo-dialog .demo-body{padding:14px 18px 20px}.demo-dialog .demo-head h2{font-size:20px}.demo-dialog .modal-close{width:44px;height:44px}.site .demo-dialog .f2-send{height:48px;min-height:48px}}
@media(max-width:700px){.site .demo-cta:not(.hdr-cta):not(.ct-demo-action){min-height:48px;font-size:15px}}
.lg-foot .demo-cta{display:flex;width:fit-content;margin:12px auto 0}

/* Sign-in follows the homepage container, with the real shared header above it. */
.lg.container{width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,72px);row-gap:24px;padding-top:150px;background:var(--bg);min-height:100svh}
.lg .lg-left{padding:24px 0 40px;justify-content:flex-start;align-items:center}
.lg .lg-form{max-width:none;width:100%}
.lg .lg-sub{max-width:none;white-space:nowrap;font-size:clamp(13px,1.12vw,16px)}
.lg .lg-card{max-width:440px;background:transparent}
.lg .lg-sso-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lg .lg-sso{gap:10px;white-space:nowrap;background:transparent}
.lg .lg-foot{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:0;margin-top:24px}
.lg .lg-foot .demo-cta{margin:12px 0 0}
.lg .lg-right{padding:16px 0 0;align-items:center}
.lg .lg-panel{display:flex;min-height:0;width:100%;gap:20px;background:none;border:0;border-radius:0;overflow:visible}
.lg-team-copy{padding:0;color:var(--ink)}
.lg-team-copy>p:first-child{color:var(--blue);margin-bottom:18px}
.lg-team-copy h2{max-width:15ch;font-size:clamp(36px,3.3vw,48px)}
.lg-team-copy h2 span{color:var(--blue)}
.lg-team-copy>p:last-child{color:var(--slate);max-width:none;margin-top:16px}
.lg-team-photo{flex:none;min-height:0;width:100%;aspect-ratio:1.45;mask-image:radial-gradient(ellipse 69% 72% at 50% 48%,#000 59%,transparent 100%)}
.lg-team-photo img{object-position:center 55%}
.lg .lg-bottom{margin:0;padding:6px 0 10px;min-height:0;border:0;background:transparent;gap:8px 18px;align-self:end;font-size:12px}
.lg-bottom a,.lg-bottom button{min-height:32px}
.hdr-cta.demo-cta{gap:10px}.hdr-cta.demo-cta>.ico{width:16px;height:16px}
@media(max-width:1100px) and (min-width:901px){.lg .lg-sub{font-size:13px;letter-spacing:-.02em}}
@media(max-width:900px){
 .lg.container{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding-top:120px;row-gap:32px}
 .lg .lg-left{padding:16px 0 0}.lg .lg-form{max-width:560px;margin-inline:0}
 .lg .lg-sub{font-size:15px;white-space:normal}.lg .lg-card{max-width:none}
 .lg .lg-right{padding:16px 0 0}.lg .lg-panel{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px}
 .lg-team-copy{padding:0}.lg-team-copy h2{font-size:34px}.lg-team-photo{aspect-ratio:1;min-height:0}
 .lg .lg-bottom{padding:0 0 12px;gap:4px}.lg-bottom a,.lg-bottom button{min-height:44px}
}
@media(max-width:520px){
 .lg .lg-sub-prefix{display:none}.lg .lg-sub{white-space:nowrap;font-size:14px}
 .lg .lg-panel{display:flex;gap:16px}.lg-team-copy h2{max-width:16ch;font-size:34px}
 .lg-team-photo{aspect-ratio:1.5}.lg .lg-bottom{font-size:11px}
}

/* Reference-led sign-in: a single white/navy split surface inside the shared gutter. */
.lg-reference.container{display:flex;flex-direction:column;gap:0;padding-block:clamp(24px,5vh,48px);min-height:100svh}
.lg-split{display:grid;grid-template-columns:1fr 1fr;flex:1;min-height:620px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 14px 50px -36px #10193535}
.lg-reference .lg-left{padding:48px clamp(28px,3.5vw,52px);align-items:center}
.lg-reference .lg-form{width:100%;max-width:none;margin:0}
.lg-brand-home{display:inline-flex;margin-bottom:38px;align-items:center;min-height:32px}.lg-brand-home img{width:144px;height:auto}
.lg-reference>.cust{border:0;border-radius:0 0 12px 12px}.lg-reference>.cust>.container{padding-inline:28px}.lg-reference>.cust .cust-row{height:80px}.lg-reference .lg-split{border-radius:12px 12px 0 0}
@media(max-width:700px){.lg-reference>.cust>.container{padding-inline:18px}.lg-reference>.cust .cust-row{height:96px}.lg-brand-home{margin-bottom:30px}}
@media(prefers-reduced-motion:reduce){.lg-reference>.cust .cust-row{height:auto;padding-block:18px}}
.lg-reference h1{font-size:clamp(32px,3vw,42px);font-weight:550}
.lg-reference .lg-sub{font-size:14px;line-height:1.6;white-space:normal;max-width:40ch}
.lg-reference .lg-sub-prefix{display:none}
.lg-reference .lg-card{max-width:none;margin-top:30px}
.lg-reference .lg-email{background:#fff;border-radius:10px}
.lg-reference .lg-btn,.lg-reference .lg-sso{border-radius:10px}
.lg-reference .lg-foot{margin-top:26px;align-items:center;text-align:center}
.lg-reference .lg-foot .demo-cta{margin:12px 0 0}
.lg-reference .lg-right{padding:0;align-items:stretch;min-width:0;background:radial-gradient(ellipse at 100% 0%,#315573 0,transparent 58%),#101935}
.lg-reference .lg-panel{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;gap:60px;padding:clamp(36px,4vw,60px);background:none;width:100%;min-height:0;border-radius:0;overflow:hidden}
.lg-brand-message{margin-block:auto;color:#fff}
.lg-brand-kicker{font:600 12px/1.5 var(--font);color:#b5cce4;letter-spacing:.1em;text-transform:uppercase;margin-bottom:30px}
.lg-brand-message h2{font:500 clamp(36px,3.7vw,54px)/1.1 var(--font);letter-spacing:-.035em;margin:0}
.lg-brand-message h2 span{display:block;color:#a7caf3;font-style:italic;font-weight:700}
.lg-brand-description{font-size:20px;line-height:1.45;color:#f0f4fa;margin:26px 0 14px;max-width:25ch}
.lg-brand-detail{font-size:15px;line-height:1.65;color:#bdc9db;max-width:36ch}
.lg-trust-title{display:flex;align-items:center;gap:16px;font:600 11px/1.5 var(--font);letter-spacing:.08em;text-transform:uppercase;color:#c4d4e6;margin-bottom:18px}
.lg-trust-title::after{content:'';height:1px;flex:1;background:#ffffff25}
.lg-client-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0}
.lg-client-grid li{min-width:0;min-height:54px;padding:8px;background:#f7f8fb;border-radius:5px;display:flex;align-items:center;justify-content:center}
.lg-client-grid .customer-mark{width:100%;gap:0}
.lg-client-grid .customer-mark img{width:auto;max-width:100%;height:auto;max-height:32px;object-fit:contain}
.lg-client-grid .customer-name{font-size:12px;color:var(--ink);line-height:1.25}
.lg-client-grid .lg-client-more{background:transparent;color:#bdc9db;font-size:11px;text-align:center;line-height:1.4}
.lg-reference .lg-bottom{width:100%;flex:none;padding:0 0 10px}
@media(max-width:1100px) and (min-width:901px){.lg-reference .lg-panel{padding:32px}.lg-client-grid{gap:8px}.lg-client-grid li{padding:6px}.lg-brand-message h2{font-size:38px}}
@media(max-width:900px){
 .lg-reference.container{padding-block:24px;gap:0}.lg-split{grid-template-columns:1fr;min-height:0;flex:none}
 .lg-reference .lg-left{padding:36px clamp(22px,6vw,48px)}
 .lg-reference .lg-panel{padding:32px clamp(22px,6vw,48px);gap:32px}
 .lg-brand-kicker{margin-bottom:18px}.lg-brand-message h2{font-size:38px}.lg-brand-description{font-size:18px;max-width:none;margin:18px 0 0}.lg-brand-detail{display:none}
 .lg-reference .lg-bottom{margin-top:auto}.lg-client-grid li{min-height:50px}
}
@media(max-width:380px){.lg-reference .lg-left,.lg-reference .lg-panel{padding:28px 18px}.lg-brand-message h2{font-size:32px}.lg-client-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.lg-client-grid .lg-client-more{grid-column:span 2}.lg-reference .lg-sso{font-size:13px;gap:8px}}

/* Passwordless sign-in: a light, atmospheric card rather than a split banner. */
.lg.lg-sky{display:flex;flex-direction:column;isolation:isolate;overflow:hidden;min-height:100svh;background:linear-gradient(180deg,#8ac9e8 0%,#c8e9f5 37%,#d8e8f4 75%,#eaf2f9 100%);padding:0;color:#101935}
.lg-sky-atmosphere{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.lg-sky-atmosphere:after{content:'';position:absolute;inset:58% -10% -10%;background:radial-gradient(ellipse at 25% 90%,#fff 0,transparent 54%),radial-gradient(ellipse at 80% 95%,#fff 0,transparent 50%)}
.lg-cloud{position:absolute;width:640px;height:320px;bottom:5%;filter:blur(15px);opacity:.85;background:radial-gradient(ellipse at 18% 67%,#fff 0 14%,transparent 35%),radial-gradient(ellipse at 41% 47%,#fff 0 15%,transparent 33%),radial-gradient(ellipse at 64% 67%,#fff 0 19%,transparent 42%),radial-gradient(ellipse at 85% 77%,#fff 0 19%,transparent 42%)}.lg-cloud.cloud-left{left:-190px;transform:rotate(8deg)}.lg-cloud.cloud-right{right:-170px;bottom:1%;transform:scale(1.25) rotate(-12deg)}
/* Soft cloud banks beneath the shared homepage strands. */
.lg-sky-atmosphere:after{inset:80% -10% -16%;background:linear-gradient(0deg,#fff 12%,#ffffff00 90%)}
.lg-cloud{width:clamp(500px,52vw,860px);height:clamp(260px,34vh,390px);bottom:-3%;opacity:.9;background:radial-gradient(ellipse at 15% 72%,#fff 0 18%,transparent 36%),radial-gradient(ellipse at 36% 50%,#ffffffed 0 20%,transparent 38%),radial-gradient(ellipse at 59% 68%,#fff 0 24%,transparent 43%),radial-gradient(ellipse at 83% 55%,#fffffff0 0 17%,transparent 38%);filter:blur(8px) drop-shadow(0 -10px 18px #78a9c31c)}
.lg-cloud.cloud-left{left:-12%;transform:rotate(8deg)}
.lg-cloud.cloud-right{right:-12%;bottom:-5%;transform:scale(1.1) rotate(-9deg)}
.lg-cloud.cloud-low{width:80%;left:10%;bottom:-15%;height:300px;opacity:.85}
.lg-home-lines{position:absolute;inset:0;z-index:1;pointer-events:none}
.lg-home-lines .nvj-strands{display:block;width:100%;height:100%;fill:none;overflow:visible}
@keyframes lg-cloud-drift{from{translate:-10px 3px}to{translate:14px -5px}}
@media(prefers-reduced-motion:no-preference){.lg-cloud{animation:lg-cloud-drift 18s ease-in-out infinite alternate}.lg-cloud.cloud-right{animation-duration:24s;animation-delay:-9s}}
[data-motion=paused] .lg-cloud{animation-play-state:paused}
@media(max-width:600px){.lg-cloud.cloud-left{left:-280px}.lg-cloud.cloud-right{right:-280px}.lg-cloud.cloud-low{left:-20%;width:140%}}
.lg-sky-brand{position:relative;margin:0 auto 22px;display:inline-flex;min-height:28px;align-items:center;z-index:1}
.lg-sky-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:38px 24px 58px;min-height:690px}
.lg-glass{position:relative;width:100%;max-width:440px;padding:30px 32px 26px;border-radius:28px;background:linear-gradient(160deg,#d4f7ffb0 0%,#ffffffd9 35%,#ffffffed 100%);border:1px solid transparent;box-shadow:0 2px 4px #3c789512,0 18px 40px -28px #3983b077,0 0 18px #c99a3c0d,inset 0 1px 0 #ffffffa3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.lg-glass::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;--spin:0deg;background:conic-gradient(from var(--spin),#c99a3c66 0turn,#c99a3c66 .65turn,#d5a348 .77turn,#fff0bf .85turn,#e6bf62 .91turn,#c99a3c66 1turn);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@media(prefers-reduced-motion:no-preference){.lg-glass::before{animation:ring-spin 8s linear infinite}}
[data-motion=paused] .lg-glass::before{animation-play-state:paused}
.lg-sky .lg-form{max-width:none;text-align:center;margin:0;width:100%}.lg-entry-icon{display:grid;place-items:center;width:66px;height:66px;margin:0 auto 28px;border-radius:22px;color:#233444;background:linear-gradient(145deg,#fff,#eaf4f8);border:1px solid #ffffffa8;box-shadow:0 12px 20px -12px #4a9bbf88,inset 0 1px 0 #fff}.lg-entry-icon svg{width:30px;height:30px}
.lg-sky h1{font:600 30px/1.2 var(--font);letter-spacing:-.035em;margin:0}.lg-sky,.lg-sky input,.lg-sky button,.lg-sky label{font-family:var(--font)}.lg-sky .lg-sub{font:400 15px/1.6 var(--font);color:#657486;margin:12px auto 0;max-width:none;overflow-wrap:anywhere}.lg-sky .lg-card{display:grid;gap:12px;padding:0;margin:28px 0 0;max-width:none;border:0;border-radius:0;background:none;box-shadow:none;text-align:left}
.lg-sky .lg-email-label{display:block;font-size:12px;color:#5c6e81;margin-bottom:8px;text-align:left}.lg-input-wrap{position:relative}.lg-input-wrap>.ico{position:absolute;left:16px;top:17px;width:19px;height:19px;color:#8291a0;pointer-events:none}.lg-sky .lg-email{height:54px;border:1px solid #dfe8ed;border-radius:13px;padding-left:46px;background:#ecf2f6d9;font:400 16px var(--font)}.lg-sky .lg-email:focus{background:#fff;border-color:#6cabc9;box-shadow:0 0 0 3px #83c3e426}.lg-sky .lg-email.bad,.lg-sky .lg-otp.bad input{border-color:var(--rose)}
.lg-sky .lg-btn{height:52px;gap:16px;margin-top:16px;border:1px solid #343b51;border-radius:13px;background:var(--action-dark);box-shadow:0 2px 2px #10193516;font-size:15px}.lg-sky .lg-btn:hover{background:var(--action-dark)}.lg-sky .lg-btn>.ico{width:17px;height:17px}
.lg-sky .lg-or{font:400 12px var(--font);text-transform:none;letter-spacing:0;margin:10px 0;color:#728092}.lg-sky .lg-or:before,.lg-sky .lg-or:after{height:3px;background:radial-gradient(circle,#cbd7df 1px,transparent 1.5px) 0 50% / 9px 3px repeat-x}
.lg-sky .lg-sso-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lg-sky .lg-sso{height:48px;border:1px solid #e0eaf1;border-radius:13px;background:#ffffffae;box-shadow:0 2px 2px #608cb50c;font-size:14px;gap:10px}.lg-sky .lg-sso:hover{background:#fff;border-color:#a5c6d8}
.lg-sky .lg-foot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin:24px 0 0;font-size:13px;text-align:center}.lg-sky .lg-foot p{margin:0}.lg-sky .lg-foot .demo-cta{margin:0}
.lg-sky .lg-note{font-size:12px;line-height:1.5;background:#eef5facc;text-align:left;border:1px solid #dce8f1;margin-top:18px}.lg-sky .lg-help{font-size:12px;margin-top:8px}.lg-sky .lg-back{min-height:36px}.lg-sky .lg-otp{gap:8px}.lg-sky .lg-otp input{height:54px;border-radius:12px;background:#edf4f8;font-family:var(--font)}
.lg-sky>.cust{position:relative;background:#ffffff65;border:0;width:100%;z-index:1}.lg-sky>.cust .cust-row{height:80px}.lg-sky>.cust .cust-label{font-size:11px}.lg-sky>.cust .customer-mark{width:130px}.lg-sky>.cust .cust-track{gap:40px;padding-right:40px}
@media(max-width:600px){.lg-sky-stage{padding:32px 18px 38px;min-height:610px}.lg-glass{padding:28px 24px 22px;border-radius:28px}.lg-sky h1{font-size:27px}.lg-sky .lg-sub{font-size:14px}.lg-entry-icon{width:60px;height:60px;margin-bottom:24px;border-radius:20px}.lg-sky .lg-card{margin-top:24px}.lg-sky>.cust .cust-row{height:92px}.lg-cloud{opacity:.6}}
@media(max-width:360px){.lg-sky-stage{padding-inline:14px}.lg-glass{padding-inline:18px}.lg-sky h1{font-size:25px}.lg-sky .lg-sub{font-size:13px}.lg-sky .lg-otp{gap:5px}.lg-sky .lg-otp input{height:45px;font-size:20px}.lg-sky .lg-sso{font-size:13px;gap:7px}}
@media(prefers-reduced-motion:reduce){.lg-sky>.cust .cust-row{height:auto;padding-block:18px}}
/* Compact sign-in type; keep 16px inputs to avoid iOS focus zoom. */
.lg-sky h1{font-size:16px;letter-spacing:-.02em}
.lg-sky .lg-sub{font-size:13px}
.lg-sky .lg-card{margin-top:22px}
.lg-sky .lg-btn,.lg-sky .lg-sso{font-size:12px;height:40px;border-radius:10px;gap:8px}
.lg-sky .lg-btn>.ico,.lg-sky .lg-g{width:16px;height:16px}
.site .lg-sky .lg-foot .demo-cta{min-height:40px;padding:0 18px;gap:12px;font-size:13px}
.site .lg-sky .lg-foot .demo-cta>.ico{width:15px;height:15px}
@media(pointer:coarse){.lg-sky .lg-btn,.lg-sky .lg-sso{height:44px}.site .lg-sky .lg-foot .demo-cta{min-height:44px}}
.lg-sky .lg-foot{font-size:12px;margin-top:20px}
.lg-sky .lg-otp input{font-size:20px}
.lg-sky-stage{min-height:100svh;padding-block:32px}
.lg-phone-entry{display:flex;align-items:stretch;border:1px solid #dfe8ed;border-radius:13px;background:#ecf2f6d9}
.lg-phone-entry:focus-within{border-color:#6cabc9;box-shadow:0 0 0 3px #83c3e426;background:#fff}
.lg-sky .lg-phone-entry .lg-email{min-width:0;flex:1;width:0;padding:0 12px;border:0;border-radius:0 13px 13px 0;background:none;box-shadow:none}
.lg-country-wrap{position:relative;display:flex;align-items:center;flex:none;width:99px;border-right:1px solid #dfe8ed}
.lg-country-face{padding:0 22px 0 10px;font:500 13px var(--font);white-space:nowrap}
.lg-country-wrap:after{content:'';position:absolute;right:10px;top:23px;width:6px;height:6px;border-right:1.5px solid #657486;border-bottom:1.5px solid #657486;transform:rotate(45deg);pointer-events:none}
.lg-country{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.lg-country-wrap:focus-within{outline:2px solid var(--blue);outline-offset:2px;border-radius:10px}
.lg-sky .lg-phone-hint{margin:7px 0 0;font:400 11px/1.4 var(--font);color:#657486}
/* Navio OS product overview. Scoped independently of home and industry movies. */
.npx-page{--npx-line:#dce4ed;color:var(--ink)}
.npx-page .container{max-width:1320px}
.npx-kicker{margin:0 0 18px;color:var(--blue);font:650 13px/1.45 var(--font);letter-spacing:.06em}
.npx-hero{padding:142px 0 70px;background:radial-gradient(ellipse at 86% 48%,#dfeaf8 0,transparent 60%)}
.npx-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,76px);align-items:center}
.npx-hero-copy{min-width:0}
.npx-hero-copy .npx-kicker{font-size:18px;letter-spacing:0}
.npx-hero h1{margin:0;font:750 clamp(38px,3.85vw,56px)/1.08 var(--font);letter-spacing:-.045em}
.npx-hero h1>span,.npx-section-head h2>span,.npx-value-copy h2>span,.npx-faq h2>span{color:var(--blue)}
.npx-intro{margin:24px 0 28px;font:450 17px/1.65 var(--font);color:var(--slate)}
.npx-intro>span{display:block}
.npx-down{display:flex;align-items:center;gap:9px;width:fit-content;margin-top:24px;color:var(--blue);font:600 14px/1.4 var(--font)}
.npx-down .ico{width:15px;height:15px;transform:rotate(90deg)}
.npx-film{min-width:0;border:1px solid #d1ddeb;border-radius:22px;background:#f1f5fb;box-shadow:0 28px 65px -40px #183b6770;overflow:hidden}
.npx-film-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:17px 22px;background:#fff;border-bottom:1px solid var(--npx-line);font:650 14px var(--font)}
.npx-film-bar>span{font-size:11px;font-weight:500;color:#74819a}
.npx-film-heading{padding:20px 24px 14px;display:flex;align-items:center;gap:12px;min-height:72px}
.npx-film-heading>span{font:650 10px var(--font);color:#6f819b;white-space:nowrap}
.npx-film-heading h2{margin:0;font:700 21px/1.25 var(--font);letter-spacing:-.035em}
.npx-film-stage{padding:0 24px;min-height:358px}
.npx-paper,.npx-work-sheet{min-height:358px;background:#fff;border:1px solid var(--npx-line);border-radius:12px;box-shadow:0 12px 30px -24px #10193566}
.npx-paper{padding:22px;display:flex;flex-direction:column}
.npx-paper-meta{display:flex;justify-content:space-between;font:550 10px var(--font);color:#74819a}
.npx-paper h3{margin:18px 0 7px;font:700 24px/1.15 var(--font);letter-spacing:-.035em}
.npx-parties{margin:0;font:500 11px/1.4 var(--font);color:var(--slate)}
.npx-document-lines{display:grid;gap:7px;margin:20px 0 16px}
.npx-document-lines i{height:5px;border-radius:3px;background:#e9edf3;width:100%}.npx-document-lines i:nth-child(2){width:87%}.npx-document-lines i:nth-child(3){width:62%}
.npx-clause{padding:12px;border-left:2px solid #95b4dc;background:#eff5fc;font:500 12px/1.55 var(--font)}
.npx-clause>small{display:block;font-size:10px;color:#607a9c}.npx-clause>small:first-child{text-transform:uppercase;letter-spacing:.06em}
.npx-clause p{margin:7px 0}.npx-clause .npx-typing{min-height:56px}
.npx-clause del,.npx-clause ins{display:block;padding:2px 5px}
.npx-clause del{background:#fae5ec;color:#a93c5b}.npx-clause ins{background:#e0f1e8;color:#27744e;text-decoration:none}
.npx-clause>small:last-child{margin-top:7px}
.npx-typing i{display:inline-block;width:2px;height:12px;margin-left:3px;vertical-align:middle;background:var(--blue)}
.npx-ai-note{display:flex;gap:8px;align-items:center;margin-top:auto;padding-top:18px;font:550 10px/1.5 var(--font);color:#6b55a3}
.npx-ai-note .ico{width:15px;height:15px;flex:none}
.npx-signatures{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:auto;padding-top:10px}
.npx-signatures>div{position:relative;min-width:0}
.npx-signatures>div>svg{width:90px;height:34px;display:block}
.npx-signatures>div>svg path{fill:none;stroke:#315f8e;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.npx-signatures small{font-size:9px;color:var(--slate)}
.npx-signed{position:absolute;top:12px;left:45px;transform:rotate(-8deg);display:flex;gap:2px;align-items:center;padding:3px;border:1px solid #659b84;border-radius:3px;background:#edf7f2a8;color:#34745a;font:650 7px var(--font)}
.npx-signed .ico{width:10px;height:10px}
.npx-approvals{display:flex;gap:8px;padding-top:15px;margin-top:auto}
.npx-approvals>div{flex:1;display:grid;justify-items:center;gap:5px;padding:8px 5px;border:1px solid #cde3d8;border-radius:7px;background:#f3f9f5;font:600 9px/1.4 var(--font);text-align:center;color:#34745a}
.npx-approvals .ico{width:14px;height:14px}
.npx-work-sheet{overflow:hidden}
.npx-work-top{display:flex;gap:8px;align-items:center;min-height:48px;padding:12px;background:#f5f9f6;border-bottom:1px solid #e0e9e4;font:650 12px/1.3 var(--font)}
.npx-work-top>.ico{width:15px;height:15px;color:#b38b38;flex:none}.npx-work-top>span{font-size:9px;white-space:nowrap;color:#617d6b;margin-left:auto}
.npx-task-list{list-style:none;padding:0;margin:0}
.npx-task-list li{display:flex;align-items:center;gap:9px;padding:9px 12px;min-height:44px;border-bottom:1px solid #e5eae8}
.npx-task-list li>div{flex:1;min-width:0;display:grid;gap:3px}.npx-task-list b{font:650 11px/1.25 var(--font)}.npx-task-list small{font:500 9px/1.2 var(--font);color:#68819f}
.npx-task-tick{display:grid;place-items:center;flex:none;width:23px;height:23px;background:#edf2fa;border-radius:50%;color:#6783a6;font:650 9px var(--font)}
.npx-task-tick.done{background:#e3f3e9;color:#36845e}.npx-task-tick .ico{width:13px;height:13px}
.npx-task-list time{flex:none;font:600 9px var(--font);color:#617568;background:#eff3ed;border-radius:99px;padding:4px 6px}
.npx-work-foot{display:flex;gap:8px;align-items:center;min-height:43px;padding:10px 12px;color:#547160;font:550 10px/1.4 var(--font)}
.npx-work-foot .ico{width:14px;height:14px;flex:none}
.npx-film-controls{display:flex;align-items:center;gap:12px;padding:18px 22px}
.npx-play{display:grid;place-items:center;width:30px;height:30px;flex:none;border:1px solid #d1ddeb;border-radius:50%;background:#fff;color:var(--ink);cursor:pointer}.npx-play .ico{width:12px;height:12px}
.npx-steps{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;flex:1}
.npx-steps button{min-width:0;min-height:30px;display:grid;gap:6px;align-content:center;padding:0;border:0;background:none;color:#7a879b;cursor:pointer}
.npx-steps button>span{display:block;height:3px;border-radius:4px;background:#d9e1ed}.npx-steps button.on>span{background:#c99a3c}.npx-steps button[aria-current]{color:var(--ink)}
.npx-steps small{font:600 8px/1 var(--font);white-space:nowrap}
.npx-film button:focus-visible,.npx-faq summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.npx-clients{padding:22px 0 34px;border-bottom:1px solid var(--npx-line)}
.npx-clients .container>p{margin:0 0 22px;color:var(--slate);font:600 13px var(--font)}
.npx-client-marks{display:flex;justify-content:space-between;align-items:center;gap:28px}
.npx-client-marks>div{flex:1;min-width:0;display:flex;justify-content:center;align-items:center;height:54px}
.npx-client-marks img{display:block;max-width:100%;max-height:48px;object-fit:contain;mix-blend-mode:multiply}.npx-client-marks span{font:650 13px/1.3 var(--font);text-align:center}
.npx-outcomes,.npx-value,.npx-execution,.npx-reasons,.npx-faq{padding:90px 0}
.npx-section-head{max-width:780px;margin:0 auto 42px;text-align:center}
.npx-section-head h2,.npx-value-copy h2,.npx-faq h2{margin:0;font:730 clamp(32px,3.2vw,46px)/1.14 var(--font);letter-spacing:-.04em}
.npx-section-head>p:not(.npx-kicker){max-width:650px;margin:20px auto 0;font:450 17px/1.6 var(--font);color:var(--slate)}
.npx-outcomes{background:#eef3fa}
.npx-example-label{margin:0 0 26px;font:500 12px var(--font);color:#6a7e98;text-align:center}
.npx-numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
.npx-numbers>div{padding:10px 25px;border-left:1px solid #d2ddea}.npx-numbers>div:first-child{border-left:0}
.npx-numbers dt{font:650 16px/1.4 var(--font)}.npx-numbers strong{display:block;font:650 64px/1 var(--font);letter-spacing:-.055em;color:var(--blue);margin-bottom:14px}
.npx-numbers dd{margin:9px 0 0;font:450 14px/1.5 var(--font);color:var(--slate)}
.npx-value-row{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(40px,6vw,90px)}
.npx-value .npx-section-head{margin-bottom:66px}
.npx-value-copy h3{margin:0;font:700 clamp(28px,2.7vw,38px)/1.15 var(--font);letter-spacing:-.035em}
.npx-value-copy>p:not(.npx-kicker){font:450 17px/1.65 var(--font);color:var(--slate);margin:22px 0}
.npx-value-copy ul{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:14px}
.npx-value-copy li{position:relative;padding-left:23px;font:500 14px/1.55 var(--font);color:var(--slate)}
.npx-value-copy li::before{content:'✓';position:absolute;left:0;color:#3c8865}
.npx-value-copy .text-link{margin-top:28px;font-size:15px}
.npx-review-example,.npx-delivery-example{border:1px solid #d8e2ee;border-radius:20px;background:#fff;box-shadow:0 24px 60px -44px #10193566;overflow:hidden}
.npx-mini-bar{display:flex;align-items:center;gap:8px;padding:18px 24px;background:#f1f5fa;border-bottom:1px solid #dce5ee;font:650 14px var(--font)}
.npx-mini-bar>.ico{color:#7c60b3;width:19px;height:19px}.npx-mini-bar>span{margin-left:auto;font:500 11px var(--font);color:#73849e}
.npx-review-example h4{margin:30px 26px 22px;font:650 20px/1.4 var(--font);letter-spacing:-.02em}
.npx-review-example blockquote{margin:0 26px;padding:14px;border-left:2px solid #a9bfe0;background:#f3f6fb;font:500 16px/1.5 var(--font)}
.npx-review-example del,.npx-review-example ins{display:block;padding:7px 9px}.npx-review-example del{background:#fae6ed;color:#a74261}.npx-review-example ins{background:#e5f3e9;color:#327c56;text-decoration:none}
.npx-review-example>p{margin:22px 26px;font:450 14px/1.6 var(--font);color:var(--slate)}
.npx-review-accepted{display:flex;align-items:center;gap:9px;padding:16px 26px;background:#f5f9f5;font:550 12px/1.4 var(--font);color:#3b795a}.npx-review-accepted .ico{width:15px;height:15px}
.npx-workflow-section{background:#f0f4fa;padding:0 0 14px}
.npx-workflow-section .np{padding-block:80px}
.npx-workflow-section .np-head{margin-bottom:32px}.npx-workflow-section .np-head-ic{display:none}
.npx-workflow-section .np-h{font-size:clamp(32px,3.2vw,46px)}
.npx-workflow-section .np-head::before{content:'02 / Workflow Orchestration';display:block;margin-bottom:18px;color:var(--blue);font:650 13px/1.45 var(--font);letter-spacing:.06em}
.npx-workflow-section .np-adapt{display:none}
.npx-execution .reverse .npx-value-copy{order:2}
.npx-visibility{padding:90px 0;background:#eef3fa}
.npx-overview{border:1px solid #d8e2ee;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 20px 50px -40px #10193566}
.npx-overview dl{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:20px 24px;margin:0;border-bottom:1px solid #e5eae8}
.npx-overview dt{font:500 11px/1.4 var(--font);color:var(--slate)}.npx-overview dd{font:700 29px/1.2 var(--font);color:#34745a;margin:6px 0 0}
.npx-overview .npx-task-list li{min-height:56px;padding:10px 20px}.npx-overview .npx-task-list b{font-size:13px}.npx-overview .npx-task-list small,.npx-overview .npx-task-list time{font-size:11px}
.npx-delivery-owner{display:flex;align-items:center;gap:12px;padding:26px}
.npx-delivery-owner>span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#eaf0fa;color:#557ca8;font:650 14px var(--font)}
.npx-delivery-owner>div{display:grid;gap:5px}.npx-delivery-owner b{font:650 17px var(--font)}.npx-delivery-owner small{font:500 12px var(--font);color:var(--slate)}
.npx-delivery-events{list-style:none;margin:0;padding:0 26px 28px;display:grid;gap:0}
.npx-delivery-events li{display:flex;gap:16px;align-items:center;position:relative;padding:16px 0}
.npx-delivery-events li+li{border-top:1px solid #e4ebe6}.npx-delivery-events .ico{width:20px;height:20px;color:#51816a;flex:none}.npx-delivery-events li>div{display:grid;gap:5px}
.npx-delivery-events b{font:650 14px/1.4 var(--font)}.npx-delivery-events small{font:450 12px/1.4 var(--font);color:#728b7a}
.npx-reasons{background:#101935;color:#fff}
.npx-reasons .npx-section-head h2>span{color:#97bce8}.npx-reasons .npx-kicker{color:#9bbce4}
.npx-reason-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.npx-reason-grid article{padding:30px 0;border-top:1px solid #ffffff25}
.npx-reason-grid article>.ico{width:27px;height:27px;color:#d4aa57;margin-bottom:20px}
.npx-reason-grid h3{margin:0;font:650 25px/1.25 var(--font);letter-spacing:-.025em}
.npx-reason-grid p{margin:14px 0 22px;max-width:470px;font:450 16px/1.65 var(--font);color:#bbc6da}
.npx-reason-grid .text-link{color:#a6c7ed;font-size:14px}
.npx-models{display:flex;align-items:center;gap:32px;justify-content:space-between;padding-top:30px;margin-top:24px;border-top:1px solid #ffffff25}
.npx-models b{font:650 17px/1.4 var(--font)}.npx-models p{font:450 13px/1.5 var(--font);color:#bbc6da;margin:7px 0 0}
.npx-models ul{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:0;padding:0}.npx-models li{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fff;border-radius:9px;color:var(--ink);font:650 12px var(--font)}.npx-models img{width:23px;height:23px;object-fit:contain}
.npx-faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px}
.npx-faq-grid>div:first-child>p:not(.npx-kicker){margin:22px 0;font:450 16px/1.6 var(--font);color:var(--slate)}.npx-faq-grid .text-link{font-size:15px}
.npx-faq details{border-bottom:1px solid #d7e0ea}.npx-faq details:first-child{border-top:1px solid #d7e0ea}
.npx-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font:650 17px/1.45 var(--font);cursor:pointer}
.npx-faq summary::-webkit-details-marker{display:none}.npx-faq summary>span{flex:none;font-size:23px;font-weight:400;color:var(--blue)}.npx-faq details[open] summary>span{transform:rotate(45deg)}
.npx-faq details>p{margin:0;padding:0 30px 24px 0;color:var(--slate);font:450 15px/1.7 var(--font)}
@media(prefers-reduced-motion:no-preference){
 .npx-signatures>div>svg path{animation:npx-sign 1.05s ease calc(var(--i)*.9s) both}
 .npx-signed{animation:np-in .35s ease 2.1s both}
 .npx-approvals>div{animation:np-in .4s ease calc(var(--i)*.55s) both}
 .npx-task-list li{animation:np-in .35s ease calc(var(--i)*.1s) both}
 .npx-work-foot{animation:np-in .4s ease both}
}
@keyframes npx-sign{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(max-width:1100px){.npx-hero-grid{gap:28px}.npx-hero h1{font-size:clamp(35px,4vw,44px)}.npx-intro{font-size:15px}.npx-film-stage{padding-inline:16px}.npx-paper{padding:18px}.npx-film-heading{padding-inline:16px}.npx-film-heading h2{font-size:19px}.npx-models{align-items:flex-start;flex-direction:column}}
@media(max-width:900px){.npx-hero{padding-top:125px}.npx-hero-grid{grid-template-columns:1fr;gap:38px}.npx-hero-copy{max-width:620px}.npx-hero h1{font-size:clamp(38px,6vw,52px)}.npx-intro{font-size:17px}.npx-film{width:100%;max-width:560px;justify-self:center}.npx-client-marks{flex-wrap:wrap;justify-content:center;gap:20px 28px}.npx-client-marks>div{flex:0 0 calc(25% - 28px)}.npx-value-row{gap:30px}.npx-faq-grid{gap:34px;grid-template-columns:1fr}.npx-hero-copy .npx-down{display:inline-flex;margin-left:20px}.npx-section-head{max-width:680px}}
@media(max-width:700px){
 .npx-workflow-section .np-wf-tabs{max-width:100%;gap:3px}.npx-workflow-section .np-wf-tabs button{padding-inline:10px}
 .npx-hero{padding:119px 0 38px}.npx-hero-copy{text-align:center}.npx-hero-copy .npx-kicker{font-size:16px;margin-bottom:14px}.npx-hero h1{font-size:clamp(30px,8.6vw,46px)}.npx-intro{font-size:15px;line-height:1.65;margin:22px 0 26px}.npx-intro>span+span{margin-top:3px}.npx-hero-copy .npx-down{display:flex;margin:20px auto 0;font-size:13px}
 .npx-film{border-radius:17px}.npx-film-bar{padding:14px 16px}.npx-film-heading{min-height:67px;padding:15px 14px}.npx-film-heading h2{font-size:18px}.npx-film-heading>span{font-size:9px}.npx-film-stage{padding:0 12px;min-height:356px}.npx-paper,.npx-work-sheet{min-height:356px}.npx-paper{padding:16px}.npx-paper h3{font-size:22px}.npx-film-controls{padding:14px 12px;gap:8px}.npx-steps{gap:4px}.npx-steps small{font-size:7px}.npx-task-list li{gap:7px;padding:9px}.npx-task-list b{font-size:10.5px}.npx-task-list time{font-size:8px;padding-inline:5px}.npx-task-tick{width:20px;height:20px;font-size:8px}.npx-work-top{padding:10px;font-size:11px}.npx-work-foot{font-size:9px}.npx-signatures{gap:12px}
 .npx-clients{padding:20px 0 28px}.npx-clients .container>p{font-size:12px}.npx-client-marks{gap:18px 22px}.npx-client-marks>div{flex:0 0 calc(33.333% - 22px);height:44px}.npx-client-marks img{max-height:38px}.npx-client-marks span{font-size:10px}
 .npx-outcomes,.npx-value,.npx-execution,.npx-visibility,.npx-reasons,.npx-faq{padding-block:56px}.npx-section-head{margin-bottom:30px}.npx-kicker{font-size:11px;margin-bottom:14px}.npx-section-head h2,.npx-value-copy h2,.npx-faq h2,.npx-workflow-section .np-h{font-size:32px}.npx-section-head>p:not(.npx-kicker){font-size:15px;margin-top:18px}.npx-numbers{grid-template-columns:1fr 1fr;row-gap:26px}.npx-numbers>div{padding:5px 16px}.npx-numbers>div:nth-child(3){border-left:0}.npx-numbers strong{font-size:50px;margin-bottom:10px}.npx-numbers dt{font-size:14px}.npx-numbers dd{font-size:12px}.npx-example-label{font-size:10px;line-height:1.5}
 .npx-overview .npx-task-list li{padding:10px 12px}.npx-overview .npx-task-list b{font-size:12px}.npx-overview .npx-task-list small,.npx-overview .npx-task-list time{font-size:10px}
 .npx-value-row{grid-template-columns:1fr;gap:30px}.npx-value .npx-section-head{margin-bottom:40px}.npx-value-copy h3{font-size:28px}.npx-value-copy>p:not(.npx-kicker){font-size:15px;margin:18px 0}.npx-value-copy li{font-size:13px}.npx-mini-bar{padding:15px 18px;font-size:12px}.npx-review-example h4{margin:22px 18px 18px;font-size:18px}.npx-review-example blockquote{margin-inline:18px;font-size:14px}.npx-review-example>p{margin:18px;font-size:13px}.npx-review-accepted{padding:14px 18px;font-size:11px}.npx-workflow-section .np{padding-block:56px}.npx-workflow-section .np-head::before{font-size:11px}.npx-execution .reverse .npx-value-copy{order:0}.npx-delivery-owner{padding:22px}.npx-delivery-events{padding-inline:22px}
 .npx-reason-grid{grid-template-columns:1fr;gap:0}.npx-reason-grid article{padding:24px 0}.npx-reason-grid h3{font-size:23px}.npx-reason-grid p{font-size:15px}.npx-reason-grid article>.ico{margin-bottom:14px}.npx-models{gap:24px}.npx-models ul{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:9px}.npx-models li{padding:10px;font-size:11px}.npx-faq summary{padding:20px 0;font-size:16px}.npx-faq details>p{font-size:14px;padding-right:12px}
}
/* Navio AI product story: reference-led composition, Nuvena identity. */
.nai-page{--nai-ink:#1c212b;--nai-paper:#f2f0ec;--npx-line:#dce2e8;background:var(--nai-paper);color:var(--nai-ink);font-family:var(--font)}
@media(min-width:901px){.site:has(.nai-page) .hdr:not(.scrolled):not(.menu-on) .hdr-logo img{filter:brightness(0) invert(1)}}
.nai-page .container{max-width:1360px}.nai-page h1,.nai-page h2,.nai-page h3,.nai-page h4{font-family:var(--font);font-weight:600;letter-spacing:-.045em}.nai-page p{line-height:1.6}.nai-page .ico{flex-shrink:0}
.nai-hero{background:#1c212b;color:#fff;padding:185px 0 70px;text-align:center}.nai-eyebrow{font-size:14px;letter-spacing:.09em;text-transform:uppercase;font-weight:650;margin:0 0 24px}.nai-hero>.container>.nai-eyebrow{color:#c7dfb2}.nai-hero h1{font-size:clamp(42px,4.8vw,68px);line-height:1.1;margin:0 auto 28px;max-width:1100px}.nai-hero-intro{font-size:21px;max-width:820px;margin:0 auto 30px;color:#dce0e3}.nai-hero-media{display:grid;grid-template-columns:.82fr 1fr;gap:42px;align-items:center;text-align:left;background:#e8e4dc;color:var(--nai-ink);border-radius:16px;padding:52px;margin-top:64px;min-height:610px;overflow:hidden}.nai-media-intro>span{font-size:11px;letter-spacing:.14em;font-weight:650}.nai-media-intro h2{font-size:clamp(32px,3.4vw,48px);line-height:1.12;margin:28px 0}.nai-media-intro h2 em{color:#28634e}.nai-media-intro p{font-size:18px;color:#53605d;max-width:330px}.nai-media-intro small{display:block;font-size:12px;color:#64736c;margin-top:35px}.nai-hero-media .npx-film{width:100%;max-width:none;text-align:left;color:#101935;box-shadow:0 24px 60px -30px #17292066;transform:rotate(-1deg)}
.nai-clients{overflow:hidden;padding:46px 0;background:var(--nai-paper)}.nai-client-rail{display:flex;width:max-content;animation:nai-marquee 55s linear infinite}.nai-client-track{display:flex;align-items:center;gap:64px;padding-right:64px}.nai-client-track>div{width:140px;height:60px;display:flex;align-items:center;justify-content:center}.nai-client-track img{max-width:140px;max-height:55px;object-fit:contain;mix-blend-mode:multiply}.nai-client-track span{font-size:18px;font-weight:650;text-align:center}.nai-clients:hover .nai-client-rail{animation-play-state:paused}@keyframes nai-marquee{to{transform:translateX(-50%)}}
.nai-section{padding:88px 0}.nai-head{text-align:center;max-width:980px;margin:0 auto 56px}.nai-head h2{font-size:clamp(36px,4.2vw,60px);line-height:1.12;margin:0}.nai-head h2 em{font-weight:500;display:inline}.nai-approach .nai-head h2 em{display:block}.nai-head p{font-size:20px;color:#606568;margin:24px auto 0;max-width:820px}.nai-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.nai-three h3{font-size:27px;line-height:1.2;margin:0 0 18px}.nai-three p{font-size:17px;color:#606568;margin:0}.nai-approach-card,.nai-trust-card{background:white;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}.nai-approach-card>div:last-child,.nai-trust-card>div{padding:32px}.nai-sketch{height:230px;background:#e5e1d9;display:flex;align-items:center;justify-content:center;overflow:hidden}.nai-context{display:flex;align-items:center;width:85%;gap:12px}.nai-context>.ico{width:42px;height:42px;color:#587563}.nai-context>i{height:1px;background:#9aa99a;flex:1}.nai-context>span{background:#243e33;color:#d6f0bc;padding:24px;border-radius:18px}.nai-context>span .ico{width:32px;height:32px}.nai-mini-flow{display:grid;grid-template-columns:1fr 1fr;gap:20px 14px;position:relative}.nai-mini-flow:before{content:'';position:absolute;inset:20px 35px;border:1px solid #8f9d8e}.nai-mini-flow>span{position:relative;background:#f8f9f4;border:1px solid #bdc7b8;border-radius:7px;padding:14px;font-size:12px;box-shadow:0 4px 12px #36452c0c}.nai-shield{position:relative;color:#31553e}.nai-shield>.ico{width:100px;height:100px;stroke-width:1}.nai-shield>span{position:absolute;bottom:0;right:-20px;padding:14px;background:#c8d5ba;border-radius:50%;border:5px solid #e5e1d9}.nai-shield>span>.ico{width:25px;height:25px}
.nai-suite{padding-top:60px}.nai-feature{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px;margin-top:72px}.nai-feature+.nai-feature{margin-top:100px}.nai-feature-copy{padding:20px 0}.nai-feature-copy h3{font-size:clamp(30px,2.8vw,40px);line-height:1.15;margin:0 0 28px}.nai-feature-copy ul{padding-left:22px;margin:0 0 32px}.nai-feature-copy li{font-size:18px;line-height:1.6;margin:14px 0;padding-left:5px}.nai-feature.reverse .nai-feature-copy{order:2}.nai-feature.reverse .nai-art{order:1}.nai-link{display:inline-flex;align-items:center;gap:20px;font-size:15px;font-weight:650;background:#e5e2db;padding:13px 18px;border-radius:5px;color:var(--nai-ink)}.nai-link .ico{width:18px;height:18px}.nai-art{border-radius:12px;min-width:0;position:relative;aspect-ratio:1.15;overflow:hidden;background:#e4e0d8}.nai-ask{display:flex;justify-content:center;align-items:center;padding:44px 28px}.nai-sample{position:absolute;top:18px;left:24px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#69756c}.nai-ask-card{width:100%;background:#fff;border:1px solid #d5d9ce;border-radius:12px;box-shadow:0 22px 45px -20px #4b584d38;padding:24px}.nai-ask-question{display:flex;align-items:center;gap:12px}.nai-ask-question>.ico{color:#657b4b;width:23px}.nai-ask-question p{margin:0;font-size:18px;font-weight:600;line-height:1.4}.nai-answer{background:#f1f4ed;padding:22px;margin-top:20px;border-radius:8px;animation:np-in .3s ease}.nai-answer b{font-size:12px;color:#5e7153}.nai-answer p{font-size:16px;margin:12px 0}.nai-answer small{font-size:10px;color:#617160}.nai-question-choices{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.nai-question-choices button{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border:1px solid #d8ddd2;padding:10px;border-radius:5px;font:500 11px var(--font);color:#2e4738;cursor:pointer}.nai-question-choices button[aria-pressed=true]{background:#e4edda}.nai-question-choices .ico{width:13px;height:13px}
.nai-flow{background:#173f40}.nai-flow>svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#b8d8bc;stroke-width:1.5}.nai-flow path{stroke-dasharray:.05 .025;animation:nai-flow 7s linear infinite;animation-delay:calc(var(--i)*-.6s)}@keyframes nai-flow{to{stroke-dashoffset:-1}}.nai-flow-hub{position:absolute;left:17.5%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:14px;background:#d5edb9;display:grid;place-items:center;color:#254436;box-shadow:0 0 0 10px #ffffff08}.nai-flow-hub>.ico{width:32px;height:32px}.nai-flow-nodes{position:absolute;left:41.66%;right:7%;top:5%;bottom:5%;display:flex;flex-direction:column;justify-content:space-around}.nai-flow-nodes>span{display:flex;align-items:center;gap:12px;background:#f5f8f0;border:1px solid #dbe7d4;border-radius:7px;padding:17px 18px;color:#31513c;font-size:14px}.nai-flow-nodes i{width:8px;height:8px;border-radius:50%;background:#8cad6b;flex:none}
.nai-orbit{background:#e1e7dc;--orbit-radius:clamp(105px,12.4vw,178px)}.nai-orbit-ring{position:absolute;left:50%;top:50%;width:calc(var(--orbit-radius)*2);height:calc(var(--orbit-radius)*2);transform:translate(-50%,-50%);border:1px solid #a7b8a4;border-radius:50%}.nai-orbit-ring:after{content:'';position:absolute;inset:20%;border:1px dashed #bec9b7;border-radius:50%}.nai-orbit-centre{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:112px;height:112px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;box-shadow:0 10px 20px #39533612;color:#101935;font-size:55px;font-weight:650;line-height:1}.nai-orbit-centre small{font-size:12px;margin-top:8px}.nai-orbit-logo{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px;background:#f9faf7;border:1px solid #cfd9c7;border-radius:14px;display:grid;place-items:center;transform:rotate(var(--angle)) translateX(var(--orbit-radius)) rotate(calc(-1 * var(--angle)))}.nai-orbit-logo img{width:32px;height:32px;object-fit:contain}
.nai-system{text-align:center}.nai-system-board{display:flex;text-align:left;background:#e2ded5;border-radius:16px;padding:32px;gap:26px;margin-bottom:38px}.nai-system-spine{writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;font-size:18px;font-weight:650;letter-spacing:.18em;padding:10px}.nai-system-bands{display:flex;flex-direction:column;gap:18px;flex:1;min-width:0}.nai-system-band{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:24px;border-radius:12px;padding:36px;background:#c7d9b1}.nai-system-band.band-1{background:#d7d0e8}.nai-system-band.band-2{background:#c3d9e9}.nai-system-band h3{font-size:30px;margin:0 0 8px}.nai-system-band p{font-size:15px;margin:0}.nai-system-tags{display:flex;flex-wrap:wrap;gap:10px}.nai-system-tags span{background:#ffffffb8;padding:12px 18px;border-radius:30px;font-size:14px}.nai-trust-card>img{width:100%;height:230px;object-fit:cover}.nai-trust-card>div{display:flex;flex:1;flex-direction:column;align-items:flex-start}.nai-trust-card p{margin-bottom:28px}.nai-trust-card .nai-link{margin-top:auto;background:transparent;padding:0}
.nai-examples{padding:90px 0;background:#e7e5df}.nai-example-card{display:grid;grid-template-columns:1.1fr 1fr;min-height:440px;border-radius:16px;background:#1c212b;color:#fff;overflow:hidden;animation:np-in .3s ease}.nai-example-copy{padding:60px}.nai-example-copy h3{font-size:40px;line-height:1.15;margin:0 0 24px}.nai-example-copy>p:not(.nai-eyebrow){font-size:18px;color:#d0d6d5;margin-bottom:30px}.nai-example-copy .nai-eyebrow{color:#c8e1b5}.nai-example-copy .nai-link{background:#c8e1b5}.nai-example-proof{display:flex;align-items:center;justify-content:center;padding:50px;background:#244748}.nai-proof-sheet{width:100%;max-width:340px;padding:32px;background:#f7f7f0;border-radius:8px;color:#263f36;transform:rotate(3deg);box-shadow:0 20px 30px #152c3930}.nai-proof-sheet>.ico{width:30px;height:30px;display:block;margin-bottom:28px}.nai-proof-sheet small{display:block;font-size:12px}.nai-proof-sheet h4{font-size:26px;line-height:1.3;margin:12px 0 26px;overflow-wrap:anywhere}.nai-proof-sheet p{font-size:12px;margin:24px 0 0}.nai-proof-lines{display:grid;gap:9px}.nai-proof-lines i{height:5px;border-radius:10px;background:#d8dfd4}.nai-proof-lines i:last-child{width:65%}.nai-carousel-controls{display:flex;align-items:center;justify-content:flex-end;gap:18px;margin-top:24px}.nai-carousel-controls button{border:1px solid #72796f;background:transparent;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;color:var(--nai-ink);cursor:pointer}.nai-carousel-controls button:first-child svg{transform:rotate(180deg)}.nai-carousel-controls span{font-size:13px}.nai-teams>.container{background:#fff;border-radius:18px;padding-block:60px}.nai-teams .nai-three{padding-inline:32px}.nai-teams article{background:#efede7;border-radius:10px;padding:32px;display:flex;align-items:flex-start;flex-direction:column}.nai-teams article>.ico{width:38px;height:38px;margin-bottom:38px;color:#5e7551}.nai-teams article p{margin-bottom:28px}.nai-teams article .nai-link{margin-top:auto;background:transparent;padding:0}.nai-faq{padding-top:50px;padding-bottom:110px}.nai-faq-list{max-width:930px;margin:auto}.nai-faq details{background:#fff;border-radius:10px;margin:12px 0;border:1px solid #e1e1d9}.nai-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 30px;font-size:19px;font-weight:550;cursor:pointer;list-style:none}.nai-faq summary::-webkit-details-marker{display:none}.nai-faq summary span{font-size:24px;font-weight:400;transition:transform .2s}.nai-faq details[open] summary span{transform:rotate(45deg)}.nai-faq details>p{font-size:17px;color:#59625e;margin:0;padding:0 30px 28px}.nai-page a:focus-visible,.nai-page button:focus-visible,.nai-page summary:focus-visible{outline:3px solid #4684bc;outline-offset:4px}
@media(max-width:1100px){.nai-hero-media{padding:32px;gap:24px}.nai-feature{gap:40px}.nai-three{gap:16px}.nai-approach-card>div:last-child,.nai-trust-card>div{padding:24px}.nai-three h3{font-size:24px}.nai-example-copy{padding:40px}.nai-system-band{grid-template-columns:1fr}.nai-art{aspect-ratio:1}.nai-flow-nodes>span{padding:13px 10px;font-size:12px}.nai-mini-flow{gap:16px 10px}.nai-mini-flow>span{padding:12px 8px;font-size:10px}}
@media(max-width:760px){.nai-hero{padding:138px 0 42px}.nai-hero h1{font-size:clamp(32px,7.8vw,52px);line-height:1.12}.nai-hero-intro{font-size:17px}.nai-hero-media{grid-template-columns:1fr;padding:26px;gap:30px;margin-top:44px}.nai-media-intro{text-align:center}.nai-media-intro h2{font-size:36px;margin:20px 0}.nai-media-intro p{margin:auto;font-size:16px;max-width:420px}.nai-media-intro small{margin-top:18px}.nai-hero-media .npx-film{transform:none;max-width:540px;margin:auto}.nai-clients{padding:28px 0}.nai-client-track{gap:32px;padding-right:32px}.nai-client-track>div{width:110px}.nai-client-track img{max-width:110px;max-height:45px}.nai-client-track span{font-size:15px}.nai-section,.nai-examples{padding:55px 0}.nai-head{margin-bottom:34px}.nai-head h2{font-size:36px}.nai-head p{font-size:17px;margin-top:20px}.nai-three{grid-template-columns:1fr;gap:22px}.nai-sketch{height:200px}.nai-approach-card>div:last-child,.nai-trust-card>div{padding:28px}.nai-three h3{font-size:26px}.nai-three p{font-size:16px}.nai-context{max-width:300px}.nai-mini-flow{gap:24px}.nai-mini-flow>span{padding:15px;font-size:13px}.nai-feature,.nai-feature.reverse{grid-template-columns:1fr;gap:24px;margin-top:40px}.nai-feature+.nai-feature{margin-top:64px}.nai-feature.reverse .nai-feature-copy,.nai-feature.reverse .nai-art{order:initial}.nai-feature-copy{padding:0}.nai-feature-copy h3{font-size:32px;margin-bottom:22px}.nai-feature-copy li{font-size:16px}.nai-art{aspect-ratio:1.12;max-width:600px;width:100%;justify-self:center}.nai-eyebrow{font-size:12px;margin-bottom:18px}.nai-ask{padding:46px 22px 24px}.nai-ask-card{padding:20px}.nai-orbit{--orbit-radius:clamp(94px,31vw,175px)}.nai-flow-nodes>span{font-size:14px;padding:16px 12px}.nai-system-board{padding:18px;gap:10px}.nai-system-spine{font-size:11px;padding:0}.nai-system-band{padding:24px 18px;gap:20px}.nai-system-band h3{font-size:26px}.nai-system-band p{font-size:14px}.nai-system-tags{gap:7px}.nai-system-tags span{font-size:12px;padding:9px 12px}.nai-trust-card>img{height:230px}.nai-example-card{grid-template-columns:1fr}.nai-example-copy{padding:32px}.nai-example-copy h3{font-size:32px}.nai-example-copy>p:not(.nai-eyebrow){font-size:16px}.nai-example-proof{padding:35px}.nai-teams>.container{padding-block:38px}.nai-teams .nai-head{padding-inline:18px}.nai-teams .nai-three{padding-inline:18px}.nai-teams article{padding:28px}.nai-faq summary{padding:20px;font-size:17px}.nai-faq details>p{font-size:15px;padding:0 20px 22px}}
@media(max-width:400px){.nai-hero-media{padding:18px 10px}.nai-media-intro{padding-inline:8px}.nai-media-intro h2{font-size:30px}.nai-hero h1{font-size:30px}.nai-hero-intro{font-size:16px}.nai-head h2{font-size:31px}.nai-ask{padding:42px 14px 18px;aspect-ratio:auto;min-height:375px}.nai-ask-card{padding:16px}.nai-answer{padding:16px}.nai-ask-question p{font-size:16px}.nai-answer p{font-size:14px}.nai-flow-hub{width:46px;height:46px}.nai-flow-nodes>span{font-size:11px;padding:12px 8px;gap:8px}.nai-orbit-logo{width:46px;height:46px;margin:-23px;border-radius:11px}.nai-orbit-logo img{width:26px;height:26px}.nai-orbit-centre{width:88px;height:88px;font-size:42px}.nai-orbit-centre small{font-size:10px}.nai-system-board{padding:12px}.nai-system-band{padding:20px 12px}.nai-example-copy{padding:26px}.nai-proof-sheet{padding:24px}}
@media(prefers-reduced-motion:reduce){.nai-client-rail,.nai-flow path{animation:none}.nai-clients{overflow-x:auto}.nai-client-track[aria-hidden=true]{display:none}.nai-answer,.nai-example-card{animation:none}}
/* Product accents share the footer navy; soft surfaces use its blue palette.
   Scoped to Navio OS so vendor/customer logos and other pages stay unchanged. */
.nai-page{--nai-navy:#101935;--nai-blue:#2364a8;--nai-blue-soft:#edf2f8;--nai-blue-line:#c7d7ea;--nai-blue-muted:#53617a}
.nai-hero>.container>.nai-eyebrow,.nai-example-copy .nai-eyebrow{color:#b9d2ef}
.nai-media-intro h2 em,.nai-context>.ico,.nai-shield,.nai-ask-question>.ico,.nai-teams article>.ico{color:var(--nai-navy)}
.nai-media-intro p,.nai-media-intro small,.nai-sample,.nai-answer small,.nai-faq details>p{color:var(--nai-blue-muted)}
.nai-hero-media .npx-film{box-shadow:0 24px 60px -30px #10193566}
.nai-context>i{background:var(--nai-blue-line)}
.nai-context>span,.nai-flow,.nai-example-proof{background:var(--nai-navy);color:#fff}
.nai-mini-flow:before{border-color:var(--nai-blue-line)}
.nai-mini-flow>span{background:#f7f9fd;border-color:var(--nai-blue-line);box-shadow:0 4px 12px #1019350c}
.nai-shield>span{background:#dce8f6}
.nai-ask-card{border-color:var(--nai-blue-line);box-shadow:0 22px 45px -20px #10193538}
.nai-answer,.nai-question-choices button[aria-pressed=true]{background:var(--nai-blue-soft)}
.nai-answer b,.nai-question-choices button{color:var(--nai-navy)}
.nai-question-choices button{border-color:var(--nai-blue-line)}
.nai-flow>svg{stroke:#a9c5e8}
.nai-flow-hub{background:#dce8f6;color:var(--nai-navy)}
.nai-flow-nodes>span{background:#f7f9fd;border-color:var(--nai-blue-line);color:var(--nai-navy)}
.nai-flow-nodes i{background:var(--nai-blue)}
.nai-orbit{background:var(--nai-blue-soft)}
.nai-orbit-ring,.nai-orbit-ring:after{border-color:var(--nai-blue-line)}
.nai-orbit-centre{box-shadow:0 10px 20px #10193512}
.nai-orbit-logo{background:#f7f9fd;border-color:var(--nai-blue-line)}
.nai-system-band.band-0{background:#dce8f6}
.nai-example-copy .nai-link{background:#dce8f6;color:var(--nai-navy)}
.nai-example-copy>p:not(.nai-eyebrow){color:#d0d9e8}
.nai-proof-sheet{background:#f7f9fd;color:var(--nai-navy);box-shadow:0 20px 30px #10193530}
.nai-proof-lines i{background:var(--nai-blue-line)}
.nai-carousel-controls button{border-color:var(--nai-blue-muted)}
.nai-page .npx-clause ins,.nai-page .npx-signed,.nai-page .npx-approvals>div,
.nai-page .npx-task-tick.done,.nai-page .npx-task-list time{background:var(--nai-blue-soft);color:var(--nai-navy);border-color:var(--nai-blue-line)}
.nai-page .npx-work-top{background:#f7f9fd;border-color:var(--nai-blue-line)}
.nai-page .npx-work-top>span,.nai-page .npx-work-foot{color:var(--nai-blue-muted)}
.nai-page .npx-task-list li{border-color:var(--nai-blue-line)}
/* Compact product story: one example, shared brand, readable controls. */
.nai-refined{--nai-ink:#101935;--nai-paper:#edf2f8;background:var(--nai-paper)}
.nai-refined .container{max-width:1424px}
.site:has(.nai-refined) .hdr:not(.scrolled):not(.menu-on) .hdr-logo img{filter:none}
.nai-refined .nai-hero{padding:118px 0 40px;background:linear-gradient(180deg,#f7f7f5,#edf2f8);color:var(--nai-ink);text-align:left}
.nai-refined .nai-hero>.container{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:48px;align-items:center}
.nai-refined .nai-hero-copy{min-width:0}
.nai-refined .nai-hero .nai-eyebrow{color:#53617a;font-size:12px;line-height:1.6;margin-bottom:20px;letter-spacing:.07em}
.nai-refined .nai-hero h1{font-size:clamp(36px,3.65vw,54px);font-weight:750;line-height:1.1;margin:0 0 24px;letter-spacing:-.045em}
.nai-refined .nai-hero h1 em{color:#2364a8}
.nai-refined .nai-hero-intro{color:#53617a;font-size:18px;line-height:1.65;margin:0 0 26px;max-width:520px}
.nai-hero-more{display:flex;align-items:center;gap:10px;width:fit-content;min-height:44px;margin-top:14px;font-size:14px;color:#2364a8;font-weight:600}
.nai-hero-more .ico{width:18px;height:18px}
.nai-refined .nai-hero-media{display:block;background:transparent;border-radius:0;padding:0;margin:0;min-height:0;overflow:visible;min-width:0}
.nai-refined .nai-hero-media .npx-film{transform:none;box-shadow:0 20px 48px -30px #10193550}
.nai-refined .npx-film-controls{padding:12px;gap:10px;align-items:center}
.nai-refined .npx-play{width:44px;height:44px}
.nai-refined .npx-play .ico{width:16px;height:16px}
.nai-refined .npx-steps{display:flex;overflow-x:auto;min-width:0;gap:6px;padding:5px 3px;scrollbar-width:thin;scrollbar-color:#a9bfdc transparent;overscroll-behavior-x:contain}
.nai-refined .npx-steps button{flex:0 0 68px;min-height:44px;padding:8px 4px;border:1px solid #dce5ef;border-radius:8px;color:#53617a;background:#fff;gap:8px}
.nai-refined .npx-steps small{font-size:11px;line-height:1.2}
.nai-refined .npx-steps button[aria-current]{background:#edf2f8;border-color:#2364a8;color:#101935}
.nai-refined .nai-clients{padding:25px 0 35px;background:#edf2f8}
.nai-refined .hero-trust{display:flex;flex-direction:column;align-items:stretch;gap:16px}
.nai-refined .hero-trust-label{font-size:16px;text-align:left}
.nai-refined .hero-trust-roll{width:100%;flex:auto}
.nai-refined .nai-section,.nai-refined .nai-examples{padding:60px 0}
.nai-refined .nai-head{margin-bottom:32px;max-width:870px}
.nai-refined .nai-head h2{font-size:clamp(30px,3.1vw,44px);font-weight:700}
.nai-refined .nai-head h2 em{color:#2364a8;font-weight:650}
.nai-refined .nai-head p{font-size:17px;margin-top:18px;color:#53617a}
.nai-refined .nai-delivery{background:#fff;scroll-margin-top:100px}
.nai-evidence-path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.nai-evidence-path>li{position:relative;display:flex;flex-direction:column;min-width:0;padding:24px 20px;background:linear-gradient(145deg,#fff,#f1f6fc);border:1px solid #d4e0ef;border-radius:18px}
.nai-evidence-path>li:not(:last-child):after{content:'→';position:absolute;right:-15px;top:48%;z-index:1;color:#a87e2e;background:#fff;font-size:19px;line-height:24px}
.nai-evidence-label{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:650;color:#53617a;text-transform:uppercase;letter-spacing:.05em}
.nai-evidence-label .ico{width:18px;height:18px;color:#101935}
.nai-evidence-path h3{font-size:21px;line-height:1.25;margin:18px 0}
.nai-evidence-content{display:grid;gap:9px;padding:15px 12px;background:#fff;border:1px solid #dce5ef;border-radius:10px;margin-top:auto;font-size:13px;min-height:112px;align-content:center}
.nai-evidence-content small{font-size:11px;color:#53617a}
.nai-evidence-content span{font-size:12px;color:#53617a}
.nai-evidence-content del{font-size:12px;color:#975064}
.nai-evidence-content ins{text-decoration:none;background:#edf2f8;color:#101935;padding:5px;border-radius:4px}
.nai-evidence-path>li>p{font-size:12px;color:#53617a;margin:15px 0 0;min-height:39px}
.nai-delivery-actions{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap;margin-top:30px}
.nai-refined .nai-link{background:#e4edf8;color:#101935;min-height:44px;border-radius:8px}
.nai-refined .nai-feature{gap:56px;margin-top:40px;scroll-margin-top:100px}
.nai-refined .nai-feature+.nai-feature{margin-top:52px}
.nai-refined .nai-feature-copy h3{font-size:clamp(28px,2.5vw,36px);margin-bottom:22px}
.nai-refined .nai-feature-copy li{font-size:16px;margin:10px 0}
.nai-refined .nai-art{width:100%;max-width:460px;justify-self:center;background:#e2ecf8}
.nai-refined .nai-ask{aspect-ratio:auto;min-height:360px;height:auto;overflow:visible;padding:48px 24px 24px}
.nai-refined .nai-ask-card{padding:20px}
.nai-refined .nai-answer{padding:18px}
.nai-refined .nai-answer p{font-size:15px}
.nai-refined .nai-question-choices button{font-size:12px;min-height:44px;flex:1 1 135px}
.nai-refined .nai-flow{background:#101935}
.nai-refined .nai-orbit{--orbit-radius:clamp(100px,12vw,145px);background:#e2ecf8}
.nai-refined .nai-control{background:#fff}
.nai-control .nai-three article{padding:25px;border:1px solid #d4e0ef;border-radius:16px;background:#f7f9fd}
.nai-control .nai-three article>.ico{width:24px;height:24px;color:#101935;margin-bottom:16px}
.nai-control .nai-three h3{font-size:23px;margin-bottom:12px}
.nai-control .nai-three p{font-size:16px;color:#53617a}
.nai-control>.container>.nai-link{display:flex;width:fit-content;margin:24px auto 0}
.nai-refined .nai-examples{background:#edf2f8}
.nai-refined .nai-example-card{background:#101935;min-height:340px}
.nai-refined .nai-example-copy{padding:36px}
.nai-refined .nai-example-copy h3{font-size:32px}
.nai-refined .nai-example-copy>p:not(.nai-eyebrow){font-size:16px}
.nai-refined .nai-example-proof{background:#e0eaf7;padding:32px}
.nai-refined .nai-proof-sheet{transform:none;padding:24px;box-shadow:0 15px 32px -20px #10193555;border:1px solid #c7d7ea}
.nai-refined .nai-faq{background:#edf2f8;padding-bottom:50px}
.nai-refined .nai-faq summary{font-size:17px;padding:20px 24px;min-height:56px}
.nai-refined .nai-faq details>p{font-size:16px;padding:0 24px 24px}
.site:has(.nai-refined) .home-cta{background:linear-gradient(180deg,#edf2f8 0%,#edf2f8 26%,#e3ebf7 calc(100% - var(--hcta-over) - 100px),#8e9ab5 calc(100% - var(--hcta-over) - 45px),#101935 calc(100% - var(--hcta-over)),#101935 100%);padding-top:12px}
.site:has(.nai-refined) .hcta{background:transparent}
@media(max-width:1100px){.nai-refined .nai-hero>.container{gap:28px}.nai-evidence-path{grid-template-columns:repeat(2,minmax(0,1fr))}.nai-evidence-path>li:nth-child(2):after{display:none}}
@media(max-width:980px){
 .nai-refined .nai-hero>.container{grid-template-columns:1fr;gap:30px}
 .nai-refined .nai-hero{padding-top:110px;text-align:center}
 .nai-refined .nai-hero h1{font-size:clamp(34px,5vw,46px)}
 .nai-refined .nai-hero-intro{margin-inline:auto;max-width:600px}
 .nai-refined .nai-hero-more{margin-inline:auto}
 .nai-refined .nai-hero-media{width:100%;max-width:620px;justify-self:center}
 .nai-refined .nai-feature,.nai-refined .nai-feature.reverse{grid-template-columns:1fr 1fr;gap:28px}
 .nai-refined .nai-ask{padding:44px 16px 18px}
 .nai-refined .nai-ask-card{padding:16px}
 .nai-refined .nai-orbit{--orbit-radius:clamp(90px,12vw,120px)}
}
@media(max-width:760px){
 .nai-refined .nai-hero{padding:96px 0 30px}
 .nai-refined .nai-hero .nai-eyebrow{font-size:11px;max-width:310px;margin:0 auto 14px}
 .nai-refined .nai-hero h1{font-size:clamp(30px,7.5vw,44px);margin-bottom:18px}
 .nai-refined .nai-hero-intro{font-size:16px;margin-bottom:20px}
 .nai-refined .nai-hero-more{font-size:12px;margin-top:8px}
 .nai-refined .nai-section,.nai-refined .nai-examples{padding:40px 0}
 .nai-refined .nai-head h2{font-size:30px}
 .nai-refined .nai-head p{font-size:16px}
 .nai-refined .nai-feature,.nai-refined .nai-feature.reverse{grid-template-columns:1fr;gap:24px}
 .nai-refined .nai-feature+.nai-feature{margin-top:40px}
 .nai-refined .nai-feature.reverse .nai-feature-copy,.nai-refined .nai-feature.reverse .nai-art{order:initial}
 .nai-refined .nai-feature-copy h3{font-size:28px}
 .nai-refined .nai-orbit{--orbit-radius:clamp(86px,29vw,140px)}
 .nai-refined .nai-example-copy{padding:26px}
 .nai-refined .nai-example-copy h3{font-size:28px}
 .nai-refined .nai-example-proof{padding:26px}
 .nai-refined .nai-clients{padding:22px 0}
 .nai-refined .nai-control .nai-three{gap:14px}
}
@media(max-width:540px){.nai-evidence-path{grid-template-columns:1fr;gap:20px}.nai-evidence-path>li:not(:last-child):after{display:block;content:'↓';top:auto;right:auto;bottom:-22px;left:calc(50% - 10px);width:20px;text-align:center}.nai-evidence-content{min-height:0}.nai-evidence-path>li>p{min-height:0}.nai-evidence-path h3{margin:12px 0}.nai-evidence-path>li{padding:20px}.nai-delivery-actions{gap:12px}}
/* Imported On It story: original product demonstration, Nuvena presentation. */
.onit-integrated{--paper:#f7f7f5;--ink:#101935;--muted:#53617a;--accent:#2668ad;--gold:#c99a3c;background:var(--paper);font-family:var(--font);overflow:clip}
.onit-integrated .stage{background:radial-gradient(ellipse at 68% 54%,#e6effb 0,transparent 62%);min-height:640px}
.onit-integrated .background-word{color:#dbe6f4;opacity:.3}
.onit-integrated .onit-product-bar{position:absolute;left:7%;right:7%;top:105px;display:flex;align-items:center;justify-content:space-between;z-index:8}
.onit-product-bar>span{font:700 20px/1.3 var(--font);letter-spacing:-.025em}
.onit-integrated .get-link{border:2px solid var(--gold);height:42px;background:#101935;color:white}
.onit-integrated .story-copy{top:32%;left:8%;width:37%}
.onit-integrated .story-copy h1{font:700 clamp(44px,4.8vw,76px)/1.07 var(--font);letter-spacing:-.045em;margin:24px 0}
.onit-integrated .story-copy>p{font-size:clamp(16px,1.4vw,20px);line-height:1.6;max-width:380px}
.onit-integrated .eyebrow{color:var(--accent);font-family:var(--font);font-size:11px;font-weight:650;letter-spacing:.14em}
.onit-integrated .person-avatar{border-color:#c9d9ed;background:#eef3fb}
.onit-integrated .device-scene{top:160px;left:68vw;right:auto;translate:-50% 0;width:min(420px,32vw,calc((100svh - 220px) * .52))}
.onit-integrated .onit-scroll-hint{position:absolute;bottom:24px;left:8%;right:8%;display:flex;align-items:center;justify-content:space-between;gap:16px;font:550 13px/1.4 var(--font);color:var(--muted);z-index:8}
.onit-scroll-hint span,.onit-scroll-hint a{display:inline-flex;align-items:center;gap:8px}.onit-scroll-hint svg{width:16px;height:16px}.onit-scroll-hint a{color:var(--accent)}
.onit-integrated .explainer{background:#edf3fa;border:0;padding:90px 24px}
.onit-integrated .explainer-inner{max-width:1180px}.onit-integrated .explainer h2{font-weight:700;max-width:850px}.onit-integrated .steps li{border-color:#c5d6e9}.onit-integrated .steps li>span{color:var(--accent)}
.onit-integrated .explainer-lead,.onit-integrated .steps p{color:var(--muted)}
.onit-integrated .safety{background:#101935;min-height:0;padding:95px 24px}.onit-integrated .safety-inner{max-width:1180px}.onit-integrated .safety-head h2{font-weight:700}.onit-integrated .safety-head .eyebrow{color:#d9ad57}.onit-integrated .safety-list b{font-size:16px}.onit-integrated .safety-list li>span:last-child{font-size:14px;color:#c3cddd}
.onit-integrated .ending{background:#f0f4fa;padding:80px 24px}.onit-integrated .ending h2{font-weight:700;font-size:clamp(44px,5vw,70px)}.onit-integrated .ending>p{color:var(--muted);font-size:18px}.onit-integrated .store-links>a{border:2px solid var(--gold);font-size:19px}.onit-integrated .store-soon{font-size:19px;border-color:#c7d1df;min-width:190px}.onit-integrated .contact-toggle{color:var(--accent);border-color:#a6bdd8}
@media(max-width:1000px) and (min-width:601px){.onit-integrated .story-copy{left:5%;width:40%;top:30%}.onit-integrated .story-copy h1{font-size:46px}.onit-integrated .device-scene{left:71vw;width:min(33vw,calc((100svh - 230px)*.52));top:195px}.onit-integrated .callout{font-size:11px;padding:8px 10px}}
@media(max-width:600px){
 .onit-integrated .stage{height:100svh;min-height:620px}.onit-integrated .onit-product-bar{top:85px;left:6%;right:6%}.onit-product-bar>span{font-size:16px}.onit-integrated .get-link{height:38px;font-size:12px}
 .onit-integrated .story-copy{top:150px;left:7%;width:86%}.onit-integrated .story-copy h1{font-size:clamp(34px,10vw,44px);margin:12px 0}.onit-integrated .story-copy>p{font-size:14px;line-height:1.45;max-width:290px}.onit-integrated .person{margin-top:12px}.onit-integrated .person-avatar{width:28px;height:28px}.onit-integrated .person b{font-size:12px}.onit-integrated .person small{font-size:10px}
 .onit-integrated .device-scene{top:390px;left:50%;right:auto;translate:-50% 0;margin:0;width:min(52vw,220px,calc((100svh - 445px)*.55))}.onit-integrated .background-word{font-size:160px;bottom:18%}.onit-integrated .callout{font-size:9px;padding:6px 8px;gap:5px}
 .onit-integrated .onit-scroll-hint{left:6%;right:6%;bottom:15px;font-size:10px;gap:8px}.onit-scroll-hint svg{width:13px;height:13px}
 .onit-integrated .explainer,.onit-integrated .safety,.onit-integrated .ending{padding:56px 22px}.onit-integrated .explainer h2,.onit-integrated .safety-head h2{font-size:32px}.onit-integrated .steps{display:grid;grid-template-columns:1fr 1fr;margin:0;padding:0;gap:24px 18px;overflow:visible}.onit-integrated .steps li{min-width:0}.onit-integrated .steps h3{font-size:18px}.onit-integrated .steps p{font-size:14px}.onit-integrated .store-links{flex-direction:column;width:min(270px,100%)}.onit-integrated .store-links>a,.onit-integrated .store-soon{min-width:0;width:100%;justify-content:center}.onit-integrated .ending>p{font-size:16px}
}

/* Home hero: a little more air between the two headline lines (owner, 23 Oct). */
.home-chapters #nvj .nvj-simple-line+.nvj-simple-line{margin-top:.14em}
/* Home hero: the gold line rises left to right and ends tipped up under the full stop (owner, 24 Oct). */
#nvj-simple-title .nvj-outcomes-underline{left:.5%;width:99.5%;bottom:-.17em;height:.26em}
/* phones: "Get Commitments Delivered." is long; a touch smaller so it never meets the screen edge */
@media(max-width:700px){.home-chapters #nvj #nvj-simple-title{font-size:clamp(19px,7.2vw,44px)}}
/* phones (owner, 24 Oct): the label is plain text — no pill, no gold dot — "AI-Powered CLM" with the lifecycle icon */
.nvj-cat-short{display:none}
@media(max-width:700px){#nvj .nvj-category{display:block;width:auto;padding:0;border:0;border-radius:0;background:none;text-align:center;font:750 12.5px/1.3 var(--font);letter-spacing:.08em}
 #nvj .nvj-category:before{content:none}#nvj .nvj-category .nvj-clm{margin:0 .5em 0 0}
 .nvj-cat-full{display:none}.nvj-cat-short{display:inline}
 #nvj .nvj-sub-two>span{text-wrap:balance}}
/* the lifecycle icon before the hero label: one letter tall; draft → sign → track → done, 1.2 s each (owner, 24 Oct) */
#nvj .nvj-category .nvj-clm{display:inline-block;width:1em;height:1em;margin:0 .5em 0 0;vertical-align:-.14em;overflow:visible}
.nvj-clm .st{opacity:0}.nvj-clm .st-done{opacity:1}
.nvj-clm .st,.nvj-clm .hand,.nvj-clm-ai{transform-box:fill-box;transform-origin:center}
.nvj-clm .hand{transform-box:view-box;transform-origin:10.5px 13px}
@media(prefers-reduced-motion:no-preference){
 .nvj-clm .st{animation:nvj-clm-step 4.8s ease-in-out infinite both}
 .nvj-clm .st-sign{animation-delay:1.2s}.nvj-clm .st-track{animation-delay:2.4s}.nvj-clm .st-done{animation-delay:3.6s}
 .nvj-clm .ln{stroke-dasharray:24;animation:nvj-clm-write 4.8s ease-out infinite both}
 .nvj-clm .st-sign .ln{animation-delay:1.2s}.nvj-clm .st-done .ln{animation-delay:3.6s}
 .nvj-clm .hand{animation:nvj-clm-hand 4.8s linear 2.4s infinite both}
 .nvj-clm-ai{animation:nvj-clm-ai 2.4s ease-in-out infinite}}
@keyframes nvj-clm-step{0%{opacity:0;transform:translateY(2px)}5%,21%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-2px)}}
@keyframes nvj-clm-write{0%{stroke-dashoffset:24}14%,100%{stroke-dashoffset:0}}
@keyframes nvj-clm-hand{0%{transform:rotate(-90deg)}22%,100%{transform:rotate(30deg)}}
@keyframes nvj-clm-ai{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55) rotate(45deg);opacity:.6}}
/* hero sub-line on laptops: exactly two lines, one sentence each, sized to always fit (owner, 24 Oct) */
@media(min-width:901px){#nvj .nvj-simple-sub{max-width:none;font-size:clamp(15px,1.62vw,24px)}#nvj .nvj-sub-l{white-space:nowrap}}
/* phones only: "Get Commitments" / "Delivered." on two lines, the gold line under "Delivered." alone; laptops unchanged (owner, 24 Oct) */
.nvj-m-br,#nvj-simple-title .nvj-ul-m{display:none}
@media(max-width:700px){
 .nvj-m-br{display:inline}
 #nvj-simple-title .nvj-ul-d{display:none}
 #nvj-simple-title .nvj-ul-m{display:block;left:-4%;width:108%;height:.1em;bottom:-.1em}
 #nvj-simple-title .nvj-ul-m path{stroke-width:5}
 #nvj-simple-title .nvj-deliv{position:relative;display:inline-block}
 .home-chapters #nvj #nvj-simple-title{font-size:clamp(26px,9.6vw,44px)}}
/* phones: the two sentences run on as one paragraph in three even lines (owner, 24 Oct) */
@media(max-width:700px){.home-chapters #nvj .nvj-sub-two>span{display:inline}.home-chapters #nvj .nvj-simple-sub:has(.nvj-sub-two){text-wrap:balance;font-size:clamp(12px,3.8vw,16.5px);padding-inline:0;margin-left:-8px;margin-right:-8px;width:calc(100% + 16px)}.home-chapters #nvj .nvj-sub-two{text-wrap:balance}}
/* phones (owner, 24 Oct): the label sits a little lower, nearer the headline; the buttons come up closer to the text */
@media(max-width:700px){html body .home-chapters #nvj .nvj-category{top:calc(-10mm + 14px)}html body .home-chapters #nvj .nvj-simple-actions{margin-top:8px}}
/* phones (owner, 24 Oct): "Meet Navio OS" comes up, close under the hero's strands */
@media(max-width:700px){html body .home-chapters>#nvj.nvj-simple{padding-bottom:30px}html body .home-chapters>#navio-intro.navio-product-hero{padding-top:36px}}
/* "Meet Navio OS" step cards: phones only (owner, 24 Oct). Laptops never see them; phones never see the animated contract.
   Each card: a small product scene in a tinted panel, then "Step n", the word, one line. Scenes play when their card is centred. */
.nph-cards{display:none}
@media(max-width:700px){
 html body .home-chapters>#navio-intro .nph-stage-heading,html body .home-chapters>#navio-intro .nph-canvas{display:none}
 .nph-cards{display:block;width:calc(100% + 40px);margin:18px -20px 0}
 .nph-cards-track{display:flex;gap:12px;margin:0;padding:6px 20px 20px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;overscroll-behavior-x:contain;scrollbar-width:none}
 .nph-cards-track::-webkit-scrollbar{display:none}
 .nph-card{flex:0 0 80%;scroll-snap-align:center;padding:10px;border:1px solid #e6e9f0;border-radius:26px;background:#fff;box-shadow:0 24px 48px -32px #10193555,0 2px 6px -4px #1019351a;transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .5s}
 .nph-card:not(.is-on){transform:scale(.94);opacity:.5}
 .nph-card-art{position:relative;height:178px;border-radius:18px;overflow:hidden;background:radial-gradient(120% 90% at 0% 0%,#e8f0fb 0%,transparent 60%),radial-gradient(110% 90% at 100% 100%,#f1ebfb 0%,transparent 60%),#f6f8fc}
 .nph-card:last-child .nph-card-art{background:radial-gradient(120% 90% at 50% 0%,#e6f5ec 0%,transparent 65%),#f5faf7}
 .nph-card-copy{padding:18px 12px 12px}
 .nph-card-n{display:inline-block;font:650 11px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:#6a4fb8}
 .nph-card h3{margin:8px 0 0;font:750 27px/1.1 var(--font);letter-spacing:-.03em;color:var(--ink)}
 .nph-card p{margin:6px 0 0;font:500 15.5px/1.45 var(--font);color:var(--slate)}
 .nph-cards-dots{display:flex;justify-content:center;gap:8px;margin-top:2px}
 .nph-cards-dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:#cfd5e1;transition:width .35s,background .35s}
 .nph-cards-dots button[aria-current]{width:22px;background:var(--blue)}
 /* scenes */
 .sc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font)}
 .sc-doc{position:relative;width:104px;height:132px;padding:26px 14px 0;border-radius:10px;background:#fff;box-shadow:0 14px 30px -18px #10193566,0 0 0 1px #e4e8f0;display:flex;flex-direction:column;gap:9px}
 .sc-doc-t{position:absolute;top:12px;left:14px;width:46px;height:6px;border-radius:3px;background:#1f2a44}
 .sc-ln{display:block;height:5px;border-radius:3px;background:#d5dbe6;width:100%;transform-origin:left}
 .sc-ln.s{width:60%}.sc-ln.g{background:#d9a441}
 .sc-ai,.sc-stamp,.sc-proof{position:absolute;padding:7px 11px;border-radius:99px;background:#fff;box-shadow:0 8px 20px -12px #10193566,0 0 0 1px #e4e8f0;font:650 11.5px/1 var(--font);color:var(--ink);white-space:nowrap}
 .sc-ai{right:18px;bottom:22px}.sc-ai em{font-style:normal;margin-right:6px;background:linear-gradient(135deg,#2364a8,#6a4fb8,#c8326a);-webkit-background-clip:text;background-clip:text;color:transparent}
 .sc-sig{width:76px;height:22px;margin-top:6px;overflow:visible}.sc-sig path{fill:none;stroke:#2364a8;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
 .sc-stamp{right:16px;top:20px;color:#1d7a46;background:#eaf7ef;box-shadow:0 0 0 1px #bfe5cd;transform:rotate(-6deg)}
 .sc-extract{justify-content:flex-start;padding-left:20px;gap:14px}.sc-extract .sc-doc{width:80px;height:110px;padding-top:24px;flex:none}
 .sc-chips{display:flex;flex-direction:column;gap:7px}
 .sc-chip,.sc-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:12px;background:#fff;box-shadow:0 8px 18px -14px #10193566,0 0 0 1px #e8e3d2;font-size:11.5px;color:var(--ink)}
 .sc-chip b,.sc-row b{font-weight:650}.sc-chip small,.sc-row small{color:var(--slate);font-size:10.5px}
 .sc-chip small{margin-left:auto;padding-left:8px;color:#a67614;font-weight:600}
 .sc-assign{flex-direction:column;gap:8px}.sc-row{width:72%;box-shadow:0 8px 18px -14px #10193566,0 0 0 1px #e4e8f0}.sc-row>span:last-child{display:flex;flex-direction:column;gap:1px}
 .sc-av{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font:700 10px/1 var(--font);color:#fff;background:linear-gradient(135deg,#2364a8,#6a4fb8)}
 .sc-row:nth-child(2) .sc-av{background:linear-gradient(135deg,#6a4fb8,#c8326a)}.sc-row:nth-child(3) .sc-av{background:linear-gradient(135deg,#c99535,#c8326a)}
 .sc-follow{flex-direction:column;gap:10px;padding:0 18px}
 .sc-note{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:16px;background:#ffffffee;box-shadow:0 12px 24px -16px #10193577,0 0 0 1px #e4e8f0;font-size:11.5px;color:var(--ink)}
 .sc-note>span:last-child{display:flex;flex-direction:column;gap:2px}.sc-note b{font-weight:650}.sc-note small{color:var(--slate);font-size:10.5px}
 .sc-note.late{box-shadow:0 12px 24px -16px #10193577,0 0 0 1px #f2cdd9}.sc-note.late b{color:#b4235a}
 .sc-bell{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:#eef3fb;font-size:15px}.sc-note.late .sc-bell{background:#fbeef3}
 .sc-done{flex-direction:column;gap:10px}
 .sc-tick{width:56px;height:56px}.sc-tick circle{fill:#e3f4ea;stroke:#1d7a46;stroke-width:2.5;stroke-dasharray:1}.sc-tick path{fill:none;stroke:#1d7a46;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
 .sc-done .sc-proof{position:static;color:#1d7a46}
 .sc-bar{display:flex;align-items:center;gap:8px}.sc-bar i{position:relative;width:96px;height:6px;border-radius:3px;background:#d9ecdf;overflow:hidden}.sc-bar i:after{content:'';position:absolute;inset:0;background:#1d7a46;transform-origin:left}
 .sc-bar small{font:600 11px/1 var(--font);color:#1d7a46}
 /* motion: each scene plays when its card is centred; still and complete under reduced motion */
 @media(prefers-reduced-motion:no-preference){
  .is-on .sc-draft .sc-ln{animation:sc-grow .5s ease-out both;animation-delay:calc(.25s + var(--k)*.35s)}
  .is-on .sc-ai{animation:sc-pop .5s cubic-bezier(.3,1.4,.5,1) both .1s,sc-breathe 2s ease-in-out 1.4s infinite}
  .is-on .sc-sig path{animation:sc-draw 1.2s ease-in-out .3s both}
  .is-on .sc-stamp{animation:sc-stamp .45s cubic-bezier(.3,1.5,.5,1) 1.4s both}
  .is-on .sc-extract .sc-ln{animation:sc-glow 1.2s ease-in-out both;animation-delay:calc(var(--k)*.3s)}
  .is-on .sc-chip,.is-on .sc-row{animation:sc-slide .5s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(.35s + var(--k)*.28s)}
  .is-on .sc-note{animation:sc-drop .55s cubic-bezier(.22,.61,.36,1) both .2s}.is-on .sc-note.late{animation-delay:1.3s}
  .is-on .sc-tick circle{animation:sc-draw .7s ease-out .15s both}.is-on .sc-tick path{animation:sc-draw .45s ease-out .75s both}
  .is-on .sc-done .sc-proof{animation:sc-pop .45s cubic-bezier(.3,1.4,.5,1) 1.1s both}.is-on .sc-bar i:after{animation:sc-grow .9s ease-out 1.3s both}}
}
@keyframes sc-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sc-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sc-pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes sc-breathe{50%{transform:translateY(-2px)}}
@keyframes sc-stamp{from{opacity:0;transform:rotate(-6deg) scale(1.6)}to{opacity:1;transform:rotate(-6deg) scale(1)}}
@keyframes sc-glow{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes sc-slide{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes sc-drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@media(max-width:700px){html body .home-chapters.home-simple>#navio-intro{min-height:0;padding-bottom:44px}}
.sc-bell .ico,.sc-proof .ico{width:15px;height:15px}.sc-bell{color:#2364a8}.sc-note.late .sc-bell{color:#b4235a}.sc-proof .ico{vertical-align:-3px;margin-right:4px}
.sc-done .sc-proof{display:inline-flex;align-items:center;gap:5px}.sc-done .sc-proof .ico{margin:0}
.sc-extract{padding-left:14px;gap:10px}.sc-extract .sc-doc{width:72px}.sc-chip{padding:7px 9px}
.nph-card h3{margin-top:0}
/* Redline and Negotiate scenes (owner, 24 Oct) */
@media(max-width:700px){
 .sc-del{background:#f3c2cf;position:relative}.sc-del:after{content:'';position:absolute;left:-3px;right:-3px;top:2px;height:1.5px;background:#c8326a;transform-origin:left}
 .sc-ins{background:#bfe5cd;width:85%}
 .sc-flag{position:absolute;right:16px;top:30px;padding:7px 11px;border-radius:12px 12px 12px 4px;background:#fff;box-shadow:0 8px 20px -12px #10193566,0 0 0 1px #f2cdd9;font:650 11.5px/1 var(--font);color:#b4235a;white-space:nowrap}
 .sc-flag em{font-style:normal;margin-right:5px;color:#6a4fb8}
 .sc-nego{flex-direction:column;align-items:stretch;gap:8px;padding:0 18px}
 .sc-msg{display:flex;flex-direction:column;gap:3px;max-width:72%;padding:9px 12px;font:600 12.5px/1.3 var(--font);color:var(--ink);box-shadow:0 8px 18px -14px #10193566,0 0 0 1px #e4e8f0;background:#fff}
 .sc-msg small{font:600 10px/1 var(--font);color:var(--slate);letter-spacing:.02em}
 .sc-msg.them{align-self:flex-start;border-radius:14px 14px 14px 4px}
 .sc-msg.us{align-self:flex-end;border-radius:14px 14px 4px 14px;background:#2364a8;color:#fff;box-shadow:0 10px 20px -12px #2364a8aa}.sc-msg.us small{color:#ffffffb3}
 .sc-ver{align-self:center;margin-top:2px;padding:5px 10px;border-radius:99px;background:#eef3fb;font:650 10.5px/1 var(--font);color:#2364a8}
 @media(prefers-reduced-motion:no-preference){
  .is-on .sc-del:after{animation:sc-grow .45s ease-out .4s both}
  .is-on .sc-ins{animation:sc-grow .5s ease-out .9s both}
  .is-on .sc-flag{animation:sc-pop .45s cubic-bezier(.3,1.4,.5,1) 1.3s both}
  .is-on .sc-msg.them{animation:sc-slide-l .45s cubic-bezier(.22,.61,.36,1) .2s both}
  .is-on .sc-msg.us{animation:sc-slide .45s cubic-bezier(.22,.61,.36,1) 1s both}
  .is-on .sc-ver{animation:sc-pop .4s cubic-bezier(.3,1.4,.5,1) 1.6s both}}
}
@keyframes sc-slide-l{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
/* phones (owner, 25 Oct): taller picture that fills the card; the word and line always sit at the bottom */
@media(max-width:700px){.nph-card{display:flex;flex-direction:column}.nph-card .nph-card-art{flex:1 0 auto;height:auto;min-height:214px}.nph-card-copy{padding:16px 12px 14px}}
/* Redline scene shows a real clause with its redline (owner, 25 Oct) */
@media(max-width:700px){
 .sc-clause{width:76%;padding:16px 16px 18px;border-radius:12px;background:#fff;box-shadow:0 14px 30px -18px #10193566,0 0 0 1px #e4e8f0;font-family:var(--font);color:var(--ink)}
 .sc-clause b{display:block;font:700 12px/1 var(--font);letter-spacing:.01em;margin-bottom:9px}
 .sc-clause p{margin:0;font:500 13.5px/1.55 var(--font);color:#3b4660}
 .sc-clause del{color:#c8326a;text-decoration:line-through;text-decoration-thickness:1.5px;background:#fbe9ef;border-radius:3px;padding:0 2px}
 .sc-clause ins{color:#1d7a46;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px;background:#e7f5ec;border-radius:3px;padding:0 2px}
 .sc-redline .sc-flag{top:16px;right:14px}
 @media(prefers-reduced-motion:no-preference){
  .is-on .sc-clause del{animation:sc-mark .5s ease-out .5s both}
  .is-on .sc-clause ins{animation:sc-fade .5s ease-out 1.1s both}}
}
@keyframes sc-mark{from{background:transparent;color:#3b4660;text-decoration-color:transparent}to{}}
@keyframes sc-fade{from{opacity:0}to{opacity:1}}
/* Sign scene: both parties sign, left then right (owner, 25 Oct) */
@media(max-width:700px){
 .sc-signdoc{display:flex;flex-direction:column;gap:8px}.sc-signdoc b{margin-bottom:4px}
 .sc-parties{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
 .sc-party{display:flex;flex-direction:column;gap:4px}
 .sc-party .sc-sig{width:100%;height:24px;margin:0}
 .sc-party i{display:block;height:1px;background:#cfd5e1}
 .sc-party small{font:600 10px/1 var(--font);color:var(--slate)}
 .sc-sign .sc-stamp{top:14px;right:12px}
 @media(prefers-reduced-motion:no-preference){.is-on .sc-party .sc-sig path{animation:sc-draw 1s ease-in-out both;animation-delay:calc(.3s + var(--k)*1.05s)}.is-on .sc-sign .sc-stamp{animation-delay:2.4s}}
}
/* phones only: "AI-POWERED CLM" in small bold caps under "Meet Navio OS" (owner, 25 Oct) */
.nph-kicker{display:none}
@media(max-width:700px){.nph-kicker{display:block;margin:8px 0 0;text-align:center;font:750 12px/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}}
/* phones: room under the cards so their soft shadow fades out instead of being cut by the swipe strip (owner, 25 Oct) */
@media(max-width:700px){.nph-cards-track{padding-bottom:48px;margin-bottom:-28px}.nph-card{box-shadow:0 22px 40px -30px #10193540,0 2px 6px -4px #10193514}}
/* phones (owner, 25 Oct): every short section fills exactly one screen of the visitor's phone, content centred.
   svh = the phone's own height with its browser bars showing, so nothing jumps while scrolling; the 68px is the top menu bar,
   which each section lands under (the hero starts behind it, so it takes the full screen). */
@media(max-width:700px){
 html body .home-chapters>#nvj.nvj-simple{min-height:100vh;min-height:100svh;padding-top:84px;padding-bottom:24px;align-content:center}
 html body .home-chapters.home-simple>#navio-intro{min-height:calc(100vh - 68px);min-height:calc(100svh - 68px);justify-content:center;padding-top:24px;padding-bottom:24px}
}
/* phones (owner, 25 Oct): "Meet Navio OS" starts near the top and the cards grow to fill whatever height the phone has —
   the extra height goes to the picture, the word and line stay at the bottom of each card */
@media(max-width:700px){
 html body .home-chapters.home-simple>#navio-intro{justify-content:flex-start;padding-top:18px;padding-bottom:18px}
 html body .home-chapters>#navio-intro .nph-cards{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
 .nph-cards-track{flex:1 1 auto;align-items:stretch}
 .nph-cards-dots{flex:none}
 html body .home-chapters>#navio-intro .nph-controls{flex:none;margin-top:6px}
}
/* the scene grows with its picture panel on taller phones */
@media(max-width:700px){
 .nph-card-art{container-type:size}
 .nph-card-art>.sc{--z:1;inset:auto;left:50%;top:50%;width:calc(100% / var(--z));height:calc(100% / var(--z));transform:translate(-50%,-50%) scale(var(--z))}
 /* grow only as far as the panel's width allows, so no scene ever wraps or crowds */
 @container (min-height:330px) and (min-width:300px){.nph-card-art>.sc{--z:1.06}}
 @container (min-height:400px) and (min-width:318px){.nph-card-art>.sc{--z:1.1}}
}
/* the flag and the stamp ride on their contract card, at any picture height */
@media(max-width:700px){.sc-clause{position:relative}.sc-redline .sc-flag{top:-16px;right:-12px}.sc-sign .sc-stamp{top:-14px;right:-12px}}
/* phones (owner, 25 Oct): the hero uses the whole screen — label and headline up top, the typed line under them,
   Book a Demo · See how it works and the strands down at the bottom */
.tw-rest{visibility:hidden}
.tw-caret{display:inline-block;width:2px;height:1.05em;margin:0 1px -.18em;background:var(--blue);animation:tw-blink 1s steps(1) infinite}
@keyframes tw-blink{50%{opacity:0}}
@media(max-width:700px){
 html body .home-chapters>#nvj.nvj-simple{display:flex;flex-direction:column;align-content:normal;padding-top:96px;padding-bottom:0}
 html body .home-chapters>#nvj .nvj-simple-copy{flex:1 1 auto;display:flex;flex-direction:column;height:auto;top:0}
 html body .home-chapters #nvj .nvj-category{top:0}
 html body .home-chapters #nvj .nvj-simple-actions{margin-top:auto;margin-bottom:clamp(64px,13svh,120px)}
 /* wider swipe cards: the active card nearly fills the screen, the next one still peeks in */
 .nph-card{flex-basis:86%}
}
@media(max-width:700px){html body .home-chapters #nvj .nvj-category{margin-bottom:22px}}
@media(max-width:700px){html body .home-chapters #nvj #nvj-simple-title{top:0}html body .home-chapters #nvj .nvj-category{margin-bottom:18px}}
/* phones (owner, 25 Oct): truly wide cards — ~88% of the screen, 12px side margin, a slim peek of the next card */
@media(max-width:700px){.nph-cards-track{padding-left:12px;padding-right:12px;scroll-padding-inline:12px;gap:10px}.nph-card{flex-basis:calc(100vw - 58px)}}
/* fuller scenes (owner, 25 Oct): extra items (sc-x) show only when the picture panel is tall enough */
@media(max-width:700px){
 .sc .sc-x{display:none}
 @container (min-height:340px){.sc .sc-x{display:revert}.sc i.sc-ln.sc-x{display:block}.sc .sc-chip.sc-x,.sc .sc-row.sc-x,.sc .sc-note.sc-x,.sc .sc-msg.sc-x,.sc .sc-audit.sc-x,.sc .sc-tlist.sc-x,.sc .sc-prompt.sc-x{display:flex}.sc .sc-clause.sc-x{display:block}}
 .sc-col{flex-direction:column;gap:14px}
 .sc-docwrap{position:relative}
 .sc-doc-l{width:156px;height:auto;padding:28px 16px 20px}
 .sc-ln.m{width:80%}
 .sc-draft .sc-ai{right:-34px;bottom:-14px}
 .sc-prompt{flex-direction:column;gap:3px;align-self:center;max-width:78%;padding:9px 12px;border-radius:14px 14px 4px 14px;background:#2364a8;color:#fff;font:600 12.5px/1.3 var(--font);box-shadow:0 10px 20px -12px #2364a8aa}
 .sc-prompt small{font:600 10px/1 var(--font);color:#ffffffb3}
 .sc-clause2{padding:13px 16px 14px}.sc-clause2 p{font-size:12.5px}
 .sc-ok{position:absolute;top:-12px;right:-10px;display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:99px;background:#eaf7ef;box-shadow:0 0 0 1px #bfe5cd;font:650 11px/1 var(--font);color:#1d7a46}
 .sc-ok .ico,.sc-audit .ico,.sc-trow .ico{width:13px;height:13px}
 .sc-audit{flex-direction:column;gap:6px;width:76%}
 .sc-audit>span,.sc-trow{display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px #e4e8f0;font:600 11.5px/1 var(--font);color:var(--ink)}
 .sc-audit .ico,.sc-trow .ico{color:#1d7a46}.sc-audit small{margin-left:auto;color:var(--slate);font-weight:500}
 .sc-tlist{flex-direction:column;gap:6px;width:62%}
 .sc-note.ok b{color:#1d7a46}.sc-note.ok .sc-bell{background:#eaf7ef;color:#1d7a46}
 @media(prefers-reduced-motion:no-preference){
  .is-on .sc-prompt{animation:sc-drop .5s cubic-bezier(.22,.61,.36,1) both}
  .is-on .sc-draft .sc-ln{animation-delay:calc(.6s + var(--k)*.3s)}
  .is-on .sc-clause2{animation:sc-slide .5s cubic-bezier(.22,.61,.36,1) 1.5s both}
  .is-on .sc-msg{animation:sc-slide .45s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(.2s + var(--k)*.6s)}
  .is-on .sc-msg.them{animation-name:sc-slide-l}
  .is-on .sc-nego .sc-ver{animation-delay:2.6s}
  .is-on .sc-audit>span{animation:sc-slide .45s cubic-bezier(.22,.61,.36,1) both}.is-on .sc-audit>span:nth-child(1){animation-delay:1.4s}.is-on .sc-audit>span:nth-child(2){animation-delay:2.4s}
  .is-on .sc-note{animation-delay:calc(.2s + var(--k)*.8s)}
  .is-on .sc-trow{animation:sc-slide .4s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(1.2s + var(--k)*.2s)}
  .is-on .sc-done .sc-bar i:after{animation-delay:1.9s}}
}
/* phones (owner, 25 Oct): the closing card and the footer make the last screen together — less space between the photo and
   NUVENA, no Product / Company lists, and one line at the bottom: © 2026 Nuvena Systems Private Limited · Terms */
@media(max-width:700px){
 html body .home-cta{--hcta-over:36px;padding-top:28px}
 html body:has(.home-cta) .site-footer.f2{--hcta-over-f:44px}
 html body .site-footer .f2-col{display:none}
 html body .site-footer .f2-grid{gap:0}
 html body .site-footer .foot-line{flex-direction:row;justify-content:space-between;gap:12px;text-align:left;margin-top:20px;padding-top:16px}
 html body .site-footer .foot-legal>:not(:first-child){display:none}
 html body .site-footer.f2{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:700px){html body footer.site-footer.f2 .foot-line{display:flex;flex-direction:row;justify-content:space-between;align-items:center;text-align:left}html body footer.site-footer.f2 .foot-line>*{margin:0}}
/* phones (owner, 25 Oct): one line — Terms on the left, © 2026 Nuvena Systems Private Limited on the right */
@media(max-width:700px){html body footer.site-footer.f2 .foot-line{flex-wrap:nowrap}html body footer.site-footer.f2 .foot-line>*{width:auto;flex:none}
 html body footer.site-footer.f2 .foot-legal{order:-1}html body footer.site-footer.f2 .foot-copy{font-size:12px;white-space:nowrap;text-align:right}}
/* phones (owner, 25 Oct): the home page is a stack of full screens, one glide each —
   1 hero · 2 Meet Navio OS · 3 AI Put to Work + 2 tiles · 4 two tiles · 5 two tiles + Explore · 6 Keep your tools · 7 closing card + footer.
   --ph is one screen under the 68px menu bar, on the visitor's own phone. */
@media(max-width:700px){
 html{--ph:calc(100vh - 68px)}
 @supports(height:100svh){html{--ph:calc(100svh - 68px)}}
 html body .home-chapters.home-simple>.home-benefits{padding:16px 0 0;min-height:0;height:auto}
 html body .home-benefits>.container{padding-top:0;padding-bottom:0}
 html body .home-benefits .hb-heading{height:72px;margin:0 0 16px;display:flex;flex-direction:column;justify-content:center;align-items:center}
 html body .home-benefits .hb-bento{margin:0;gap:12px}
 html body .home-benefits .hb-bento>.hb-tile{min-height:0;margin:0}
 html body .home-benefits .hb-bento>.hb-tile:nth-child(1),html body .home-benefits .hb-bento>.hb-tile:nth-child(2){height:calc((var(--ph) - 148px) / 2)}
 html body .home-benefits .hb-bento>.hb-tile:nth-child(3),html body .home-benefits .hb-bento>.hb-tile:nth-child(4){height:calc((var(--ph) - 44px) / 2)}
 html body .home-benefits .hb-bento>.hb-tile:nth-child(5),html body .home-benefits .hb-bento>.hb-tile:nth-child(6){height:calc((var(--ph) - 104px) / 2)}
 html body .home-benefits .hb-bento>.hb-tile:nth-child(3),html body .home-benefits .hb-bento>.hb-tile:nth-child(5){margin-top:20px}
 html body .home-benefits .hb-bottom{height:44px;margin:12px 0 0;padding:0}
 html body .home-chapters.home-simple>.home-connections{height:var(--ph);min-height:0;padding:16px 0;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
 html body .home-connections>.container{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:0;padding-bottom:0}
 html body .home-connections .hc-copy{margin:0}
 html body .home-connections .hc-orchestration{width:min(100%,calc((var(--ph) - 250px) * .5556));margin:0 auto}
 html body .home-connections .hc-link{margin:0}
}
@media(max-width:700px){
 /* the picture in each tile sits in the middle of the space under its title */
 html body .home-benefits .hb-bento>.hb-tile{display:flex;flex-direction:column}
 html body .home-benefits .hb-bento>.hb-tile>:last-child{margin-top:auto;margin-bottom:auto}
 /* the last screen (logo strip + closing card + footer) fits one screen: a slightly smaller photo */
 html body .home-cta .hcta-art{width:min(70%,250px);margin-left:auto;margin-right:auto}
 html body .home-cta{padding-top:16px}
}
/* short phones (SE-size): section 6 drops its one-line description so the picture has room */
@media(max-width:700px) and (max-height:720px){html body .home-connections .hc-copy p{display:none}html body .home-connections .hc-orchestration{width:min(100%,calc((var(--ph) - 180px) * .5556))}}
/* phones (owner, 25 Oct): section 3 = "AI Put to Work" + its first two tiles + Explore, one screen; the other four tiles wait
   for sections 4 and 5, which show "Coming soon" for now. Laptops: unchanged, the placeholders never show. */
.phone-soon{display:none}
@media(max-width:700px){
 html body .home-benefits .hb-bento>.hb-tile:nth-child(n+3){display:none}
 html body .home-benefits .hb-bento>.hb-tile:nth-child(1),html body .home-benefits .hb-bento>.hb-tile:nth-child(2){height:calc((var(--ph) - 188px) / 2)}
 html body .home-benefits .hb-bottom{margin:12px 0 0}
 html body .home-chapters.home-simple>.home-benefits{padding:16px 0;height:var(--ph);box-sizing:border-box;overflow:hidden}
 html body .home-chapters>.phone-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:var(--ph);margin:0;padding:24px;box-sizing:border-box;text-align:center;background:linear-gradient(180deg,#edf2f8,#e8eef7)}
 .phone-soon-n{margin:0;font:750 12px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:#6a4fb8}
 .phone-soon h2{margin:0;font:700 34px/1.1 var(--font);letter-spacing:-.03em;color:var(--ink)}
}
/* very short phones (iPhone SE 1st gen etc.): smaller card pictures so "Meet Navio OS" fits one screen */
@media(max-width:700px) and (max-height:600px){.nph-card .nph-card-art{min-height:150px}html body .home-chapters>#navio-intro .nph-kicker{margin-top:4px}}
/* very short phones: section 3 drops its Explore link so both tiles have room for their title and picture */
@media(max-width:700px) and (max-height:600px){html body .home-benefits .hb-bottom{display:none}html body .home-benefits .hb-bento>.hb-tile:nth-child(1),html body .home-benefits .hb-bento>.hb-tile:nth-child(2){height:calc((var(--ph) - 132px) / 2)}}
/* short phones: the pictures inside the section 3 tiles at ~80%, so title and picture both fit the shorter tile */
@media(max-width:700px) and (max-height:700px){html body .home-benefits .hb-bento>.hb-tile{padding-top:14px;padding-bottom:12px}html body .home-benefits .hb-bento>.hb-tile>:last-child{zoom:.8}}
@media(max-width:700px) and (max-height:600px){html body .home-benefits .hb-bento>.hb-tile>:last-child{zoom:.72}}
@media(max-width:700px) and (max-height:700px){html body .home-benefits .mb-ai .mb-ai-footer{zoom:1}html body .home-benefits .mb-ai .mb-editor{zoom:.8;flex:none}}
@media(max-width:700px) and (max-height:600px){html body .home-benefits .mb-ai .mb-editor{zoom:.68}html body .home-benefits .mb-ai>p{display:none}}
@media(max-width:700px) and (max-height:650px){html body .home-benefits .mb-ai>p{display:none}}

/* phones only (owner, 25 Oct): "Keep your tools" = a circle around Navio OS; laptops keep the connected flow */
.hc-phone-orbit{display:none}
@media(max-width:700px){
 html body .home-connections .hc-orchestration{display:none}
 html body .home-connections .hc-phone-orbit{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0 auto;width:min(100%,calc(var(--ph) - 250px))}
 .hcp-circle{position:relative;width:100%;aspect-ratio:1}
 .hcp-ring{position:absolute;inset:0;animation:hcp-turn var(--t) linear infinite}
 .hcp-outer{--t:90s;--c:#ba9149}.hcp-inner{--t:70s;--c:#5a89b8;animation-direction:reverse}
 .hcp-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--c)}
 .hcp-track{stroke-width:.35;opacity:.45}.hcp-outer .hcp-track{stroke-dasharray:1 1.6}
 .hcp-spoke{stroke-width:.25;opacity:.22}
 .hcp-inner .hcp-spoke{stroke-dasharray:3 97;stroke-width:.9;stroke-linecap:round;opacity:.7;animation:hcp-signal 7s linear infinite reverse;animation-delay:var(--d)}
 .hcp-outer .hcp-spoke{stroke-dasharray:3 97;stroke-width:.8;stroke-linecap:round;opacity:.6;animation:hcp-signal 7s linear infinite;animation-delay:var(--d)}
 .hcp-node{position:absolute;width:13.5%;aspect-ratio:1;transform:translate(-50%,-50%)}
 .hcp-inner .hcp-node{width:15%}
 html body .hcp-face{width:100%;height:100%;box-sizing:border-box;padding:22%;border-radius:50%;background:#fff;border:1px solid #dfe7f1;box-shadow:0 6px 16px -10px #29476d66;animation:hcp-turn var(--t) linear infinite reverse}
 .hcp-inner .hcp-face{animation-direction:normal}
 .hcp-core{position:absolute;left:50%;top:50%;width:27%;aspect-ratio:1;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid #d6e0ed;border-radius:26%;background:#fff;box-shadow:0 0 0 7px #edf2f8b3,0 12px 30px -16px #29476d66}
 .hcp-core .hc-core-mark{width:40%;height:40%}.hcp-core strong{font:650 12px/1.1 var(--font);color:#1b2a4a}
 .hcp-key{display:flex;justify-content:center;gap:18px;font:550 12px/1.4 var(--font);color:#435b76}
 .hcp-key span{display:flex;align-items:center;gap:6px}.hcp-key i{width:8px;height:8px;border:2px solid #5a89b8;border-radius:50%}.hcp-key .hcp-key-outer{border-color:#ba9149}
 .hc-phone-orbit[data-running=false] .hcp-ring,.hc-phone-orbit[data-running=false] .hcp-face,.hc-phone-orbit[data-running=false] .hcp-spoke{animation-play-state:paused}
}
@media(max-width:700px) and (max-height:720px){html body .home-connections .hc-phone-orbit{width:min(100%,calc(var(--ph) - 190px))}}
@keyframes hcp-turn{to{transform:rotate(360deg)}}
@keyframes hcp-signal{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@media(prefers-reduced-motion:reduce){.hcp-ring,.hcp-face,.hcp-spoke{animation:none!important}}
@media(max-width:700px){html body .home-connections>.container{width:100%;box-sizing:border-box;padding-inline:20px}}
/* phones (owner, 25 Oct): sections 2–6 share one header — same size, same place, same area:
   the title on one line 18px under the menu bar, then one small capitals line, then the section's content */
@media(max-width:700px){
 html body #main .home-chapters.home-simple>#navio-intro,html body #main .home-chapters.home-simple>.home-benefits,html body #main .home-chapters.home-simple>.home-connections,html body #main .home-chapters>.phone-soon{padding-top:18px}
 html body #navio-intro .nph-heading,html body .home-benefits .hb-heading,html body .home-connections .hc-copy,html body .phone-soon .phone-soon-head{height:58px;margin:0 0 16px;padding:0;display:block;text-align:center;flex:none}
 html body #navio-intro .nph-heading .nph-brand,html body .home-benefits .hb-heading h2,html body .home-connections .hc-copy h2,html body .phone-soon .phone-soon-head h2{margin:0;padding:0;font:600 var(--home-section-type,clamp(24px,7.7vw,32px))/1.15 var(--font);letter-spacing:-.045em;white-space:nowrap;color:var(--ink)}
 html body #navio-intro .nph-heading .nph-kicker,html body .home-benefits .hb-heading .hb-subtitle,html body .home-connections .hc-copy h2 em,html body .phone-soon .phone-soon-head .phone-soon-n{display:block;margin:8px 0 0;font:750 12px/1.2 var(--font);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
 html body .home-benefits .hb-heading .hb-subtitle em{font-style:normal;color:inherit}
 /* section 3: the two tiles share what is left under the header */
 html body .home-benefits .hb-bento>.hb-tile:nth-child(1),html body .home-benefits .hb-bento>.hb-tile:nth-child(2){height:calc((var(--ph) - 176px) / 2)}
 /* section 6: header at the top, circle in the middle of the rest, link at the bottom */
 html body .home-chapters.home-simple>.home-connections{justify-content:flex-start;padding-bottom:16px}
 html body .home-connections>.container{flex:1;min-height:0;gap:0}
 html body .home-connections .hc-copy>p{margin:12px 0 0;font-size:15px;line-height:1.45}
 html body .home-connections .hc-copy:has(>p){height:auto}
 html body .home-connections .hc-phone-orbit{margin:auto}
 html body .home-connections .hc-link{margin:0;height:44px;display:flex;align-items:center}
 /* sections 4 and 5: empty tiles in the same places as section 3's */
 html body .home-chapters>.phone-soon{justify-content:flex-start;align-items:stretch;gap:0;padding:18px 20px 16px}
 .phone-soon-tile{height:calc((var(--ph) - 176px) / 2);margin:0 0 12px;border:1.5px dashed #b9c8da;border-radius:22px;background:#ffffff8c}
 .phone-soon-link{height:44px}
}
@media(max-width:700px) and (max-height:600px){
 html body .home-chapters>#navio-intro .nph-kicker{margin-top:8px}
 html body .home-benefits .hb-bento>.hb-tile:nth-child(1),html body .home-benefits .hb-bento>.hb-tile:nth-child(2),.phone-soon-tile{height:calc((var(--ph) - 120px) / 2)}
 .phone-soon-link{display:none}
}
@media(max-width:700px) and (max-height:600px){html body #navio-intro .nph-card .nph-card-art{min-height:136px}}
/* phones (owner, 25 Oct): section 6 — the description in three lines; the tools on a tall oval that fills the rest of the screen */
@media(max-width:700px){
 html body .home-connections .hc-copy>p{max-width:16.5em;margin-left:auto;margin-right:auto;text-wrap:balance}
 html body .home-connections .hc-phone-orbit{flex:1;min-height:0;width:100%;margin:14px 0 0;gap:10px}
 html body .home-connections .hcp-circle{flex:1;min-height:0;width:100%;aspect-ratio:auto}
 .hcp-ring{position:absolute;inset:0;animation:none}
 .hcp-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none}
 .hcp-outer{--c:#ba9149}.hcp-inner{--c:#5a89b8}
 .hcp-wires g{stroke:var(--c)}
 .hcp-wires .hcp-track{stroke-width:1.2;opacity:.45}.hcp-wires .hcp-outer-track{stroke-dasharray:3 6}
 .hcp-wires .hcp-spoke{stroke-width:.8;opacity:.22}
 .hcp-wires .hcp-inner-spoke{stroke-dasharray:4 96;stroke-width:2.6;stroke-linecap:round;opacity:.7;animation:hcp-signal 7s linear infinite reverse;animation-delay:var(--d)}
 .hcp-wires .hcp-outer-spoke{stroke-dasharray:4 96;stroke-width:2.4;stroke-linecap:round;opacity:.6;animation:hcp-signal 7s linear infinite;animation-delay:var(--d)}
 html body .hcp-node{left:0;top:0;width:clamp(38px,12vw,50px);will-change:transform}
 html body .hcp-inner .hcp-node{width:clamp(40px,12.8vw,54px)}
 html body .hcp-face{animation:none}
 html body .hcp-core{width:clamp(84px,26vw,108px)}
 .hc-phone-orbit[data-running=false] .hcp-spoke{animation-play-state:paused}
}
@media(max-width:700px) and (max-height:720px){html body .home-connections .hc-phone-orbit{width:100%}}
@media(max-width:700px){html body #main .home-connections .hc-phone-orbit{margin:14px 0 6px}}
/* phones (owner, 25 Oct): the Meet Navio OS card is wider and taller — it starts right under the header like every other section */
@media(max-width:700px){
 html body #main #navio-intro .nph-cards{margin-top:0}
 html body #main #navio-intro .nph-cards-track{padding-top:4px;padding-left:10px;padding-right:10px;scroll-padding-inline:10px;gap:8px}
 html body #main #navio-intro .nph-card{flex-basis:calc(100vw - 38px)}
}
.hc-copy .hc-phone{display:none}
@media(max-width:700px){.hc-copy .hc-desk{display:none}.hc-copy .hc-phone{display:inline}html body .home-connections .hc-copy>p{max-width:15em}}
@media(max-width:700px){html body #main #navio-intro .nph-heading{margin-bottom:6px}html body #main #navio-intro .nph-cards-track{padding-top:2px}}
/* phones (owner, 25 Oct): sections 3 · 4 · 5 = one contract, three screens (StoryAct). Laptops: unchanged, none of this shows. */
.act,.ph-only{display:none}
@media(max-width:700px){
 .dk-only{display:none}.ph-only{display:inline}
 html body .home-benefits .hb-bento,html body .home-benefits .hb-bottom{display:none}
 html body #main .home-chapters>.phone-act{padding:18px 16px 16px;background:linear-gradient(180deg,#eef3f9,#e9eff7)}
 html body #main .home-chapters>.phone-act-2{background:linear-gradient(180deg,#0e1a33 0%,#13254a 100%)}
 html body #main .home-chapters>.phone-act-2 .phone-soon-head h2{color:#fff}
 html body #main .home-chapters>.phone-act-2 .phone-soon-head .phone-soon-n{color:#e2bd6e}
 /* the gold thread running down through all three screens */
 html body #main .home-chapters>.home-benefits,html body #main .home-chapters>.phone-act{position:relative}
 html body #main .home-chapters>.home-benefits::before,html body #main .home-chapters>.phone-act::before{content:"";position:absolute;left:21px;top:0;bottom:0;width:2px;background:linear-gradient(#c99c42,#c99c4299);opacity:.55}
 html body #main .home-chapters>.home-benefits::before{top:96px}
 html body #main .home-chapters>.phone-act-2::before{opacity:.8}
 .act{display:flex;flex-direction:column;gap:clamp(8px,1.5svh,14px);height:calc(var(--ph) - 108px);padding:0 2px 0 22px;box-sizing:border-box;text-align:left;font-family:var(--font)}
 html body .home-benefits>.container{padding-left:16px;padding-right:16px}
 /* the contract card */
 .act-contract{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #d9e3ef;border-radius:16px;background:#fff;box-shadow:0 10px 26px -18px #1b2a4a66;flex:none}
 .act-contract::before{content:"";position:absolute;left:-17px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#c99c42;box-shadow:0 0 0 4px #c99c4233}
 .act-doc{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eaf1fa;color:#2364a8;flex:none}.act-doc .ico{width:18px;height:18px}
 .act-name{display:flex;flex-direction:column;min-width:0;flex:1}.act-name b{font:650 14px/1.2 var(--font);color:var(--ink)}.act-name small{font:500 11.5px/1.3 var(--font);color:#5f7088}
 .act-status{flex:none;padding:5px 9px;border-radius:99px;font:700 10.5px/1 var(--font);letter-spacing:.02em;white-space:nowrap;transition:background .4s,color .4s}
 .act-status.is-draft{background:#eef1f5;color:#56657a}.act-status.is-review{background:#fff4dc;color:#94650f}.act-status.is-ready{background:#e3f1ff;color:#1d5fa3}
 .act-status.is-signed{background:#e2bd6e;color:#1b2a4a}.act-status.is-done{background:#dff3e6;color:#1d7a43}
 /* appear one by one */
 .act-i{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
 .act-i.is-in{opacity:1;transform:none}
 /* act 1: the chat */
 .act-feed{display:flex;flex-direction:column;gap:clamp(8px,1.4svh,12px);flex:1;min-height:0}
 .act-msg{max-width:88%;padding:10px 12px;border-radius:16px;font:500 13.5px/1.4 var(--font);color:var(--ink);background:#fff;border:1px solid #dfe7f1;box-shadow:0 8px 20px -16px #1b2a4a55}
 .act-you{align-self:flex-end;background:#2364a8;border-color:#2364a8;color:#fff;border-bottom-right-radius:6px}
 .act-ai{align-self:flex-start;border-bottom-left-radius:6px}
 .act-ai-tag{display:flex;align-items:center;gap:4px;margin-bottom:3px;font:700 10.5px/1 var(--font);letter-spacing:.04em;color:#6a4fb8}.act-ai-tag .ico{width:12px;height:12px}
 .act-risk{border-color:#f1d9a8;background:#fffaf0}.act-risk>span:not(.act-ai-tag):not(.act-btns){display:block}
 .act-btns{display:flex;gap:8px;margin-top:9px}
 .act-btn{padding:6px 14px;border-radius:99px;background:#1b2a4a;color:#fff;font:650 12px/1 var(--font);transition:transform .25s,background .25s,box-shadow .25s}
 .act-btn.is-pressed{background:#1d7a43;transform:scale(.94);box-shadow:0 0 0 4px #1d7a4326}
 .act-btn-ghost{background:transparent;color:#1b2a4a;border:1px solid #c9d5e3}
 .act-ok{display:flex;align-items:center;gap:8px;background:#effaf3;border-color:#bfe5cd;color:#17603a;font-weight:600}.act-ok .ico{width:16px;height:16px}
 /* acts 2 and 3: the deliverables */
 .act-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(6px,1.1svh,9px)}
 .act-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:14px;background:#ffffff12;border:1px solid #ffffff1f}
 .act-tick{width:18px;height:18px;border-radius:50%;border:2px solid #e2bd6e;flex:none;display:grid;place-items:center}
 .act-row-t{display:flex;flex-direction:column;min-width:0;flex:1}.act-row-t b{font:650 13.5px/1.25 var(--font);color:#fff}.act-row-t small{font:500 11.5px/1.3 var(--font);color:#aebbd0}
 .act-owner{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#2c4d82;color:#fff;font:700 12px/1 var(--font);flex:none}
 .act-more{font:600 12px/1 var(--font);color:#8fa0bb;padding-left:4px}
 .act-2 .act-contract{background:#ffffff0f;border-color:#ffffff26;box-shadow:none}.act-2 .act-name b{color:#fff}.act-2 .act-name small{color:#aebbd0}.act-2 .act-doc{background:#ffffff1a;color:#e2bd6e}
 .act-alerts{display:flex;flex-direction:column;gap:clamp(6px,1.1svh,9px);margin-top:auto}
 .act-alert{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#fff;font:500 12.5px/1.35 var(--font);color:#33445c}
 .act-alert .ico{width:17px;height:17px;flex:none;color:#2364a8}.act-alert b{color:var(--ink)}
 .act-alert.is-late{background:#fff3e0}.act-alert.is-late .ico{color:#c4570c}
 .act-3 .act-row{background:#fff;border-color:#dfe7f1;box-shadow:0 8px 20px -18px #1b2a4a55}.act-3 .act-row-t b{color:var(--ink)}.act-3 .act-row-t small{color:#1d7a43}
 .act-3 .act-tick{border-color:#1d7a43;background:#1d7a43;color:#fff}.act-3 .act-tick .ico{width:11px;height:11px}
 .act-3 .act-more{color:#5f7088}
 .act-proof{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:8px;background:#eef3f9;font:600 10.5px/1 var(--font);color:#3b5878;white-space:nowrap;flex:none}.act-proof .ico{width:12px;height:12px}
 .act-end{display:flex;flex-direction:column;gap:10px;margin-top:auto}
 .act-count{padding:12px 14px;border-radius:16px;background:#1b2a4a;color:#fff}.act-count b{display:block;font:700 15px/1.2 var(--font);margin-bottom:8px}
 .act-bar{display:block;height:6px;border-radius:9px;background:#ffffff26;overflow:hidden}.act-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e2bd6e,#7fd4a0);border-radius:inherit;transition:width 1.2s ease .2s}
 .act-count.is-in .act-bar i{width:100%}
 .act-history{display:flex;align-items:center;gap:7px;margin:0;font:550 12.5px/1.3 var(--font);color:#4a5d77}.act-history .ico{width:15px;height:15px;color:#1d7a43}
 .act-link{align-self:center;height:36px;display:flex;align-items:center;gap:6px}
}
/* short phones: one deliverable fewer so each screen still fits */
@media(max-width:700px) and (max-height:700px){
 .act-list .act-row:nth-child(4){display:none}
 .act-msg{padding:8px 11px;font-size:12.5px}
 .act-history{display:none}
}
@media(prefers-reduced-motion:reduce){.act-i{transition:none}}
@media(max-width:700px){
 html body .act>*,html body .act-end>*{align-self:stretch;width:auto;max-width:none;margin-left:0;margin-right:0}
 html body .act .act-list{width:100%}
 html body .act .act-link{align-self:center}
 .act-name b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .act-compose{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid #d6e0ed;border-radius:99px;background:#fff;font:500 13px/1 var(--font);color:#8a99ad;flex:none}
 .act-compose .ico{width:18px;height:18px;color:#2364a8}
}
@media(max-width:700px) and (max-height:700px){.act-compose{display:none}}
@media(max-width:700px){.act-row{padding-block:clamp(9px,1.5svh,15px)}.act-msg{padding-block:clamp(10px,1.4svh,13px)}}
/* phones (owner, 26 Oct): the hero ring — Draft → Sign → Extract → Assign → Get Done, picture changes in the middle */
.nvj-ring{display:none}
@media(max-width:700px){
 html body #nvj .nvj-ring{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;flex:1 1 auto;min-height:0;width:100%;margin:clamp(10px,2svh,22px) 0;container-type:size}
 html body #nvj .nvj-simple-actions{margin-top:0}
 .nvj-ring-o{position:relative;width:min(calc(100cqh - 34px),58vw,230px);aspect-ratio:1}
 .nvj-ring-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
 .nr-track{fill:none;stroke:#e3e9f1;stroke-width:3.2}
 .nr-seg{fill:none;stroke:transparent;stroke-width:3.2;stroke-linecap:round;transition:stroke .4s}
 .nr-seg.is-full{stroke:#2364a8}
 .nr-seg.is-now{stroke:#c99c42;animation:nr-fill 1.9s cubic-bezier(.4,0,.2,1) both}
 @keyframes nr-fill{from{stroke-dasharray:0 300}}
 .nvj-ring-scene{position:absolute;inset:16%;width:68%;height:68%;overflow:visible;animation:hr-in .5s cubic-bezier(.2,.8,.2,1) both}
 @keyframes hr-in{from{opacity:0;transform:scale(.88)}}
 .nvj-ring-o::after{content:"";position:absolute;inset:11%;border-radius:50%;background:radial-gradient(circle,#fff 55%,#f3f6fa);box-shadow:0 14px 34px -22px #1b2a4a66;z-index:-1}
 .nvj-ring-label{margin:0;font:500 13.5px/1.3 var(--font);color:#4a5d77;animation:hr-in .5s both}
 .nvj-ring-label b{font-weight:700;color:var(--ink)}
 /* the pictures */
 .hr-doc{fill:#fff;stroke:#c9d5e3;stroke-width:1.4}
 .hr-line{fill:none;stroke:#d5dee9;stroke-width:2.4;stroke-linecap:round}
 .hr-w{fill:none;stroke:#2364a8;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;animation:hr-draw .45s ease-out forwards}
 .hr-w2{animation-delay:.35s}.hr-w3{animation-delay:.7s}.hr-w4{animation-delay:1.05s}
 @keyframes hr-draw{to{stroke-dashoffset:0}}
 .hr-spark{fill:#7a5bd0;transform-origin:72px 20px;animation:hr-pulse 1.2s ease-in-out infinite}
 @keyframes hr-pulse{50%{transform:scale(.7);opacity:.6}}
 .hr-sig{fill:none;stroke:#1b2a4a;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;animation:hr-draw .6s ease-out forwards}
 .hr-sig1{animation-delay:.2s}.hr-sig2{animation-delay:.8s}
 .hr-stamp circle{fill:#1d7a43}.hr-stamp path{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 .hr-stamp{transform-origin:68px 24px;animation:hr-pop .35s 1.4s cubic-bezier(.3,1.6,.5,1) both}
 @keyframes hr-pop{from{transform:scale(0);opacity:0}}
 .hr-hl{fill:none;stroke:#e2bd6e;stroke-width:3;stroke-linecap:round;opacity:0;animation:hr-fade .3s forwards}
 .hr-hl{animation-delay:.6s}
 @keyframes hr-fade{to{opacity:.9}}
 .hr-scan{fill:#c99c42;opacity:.55;animation:hr-scan 1s ease-in-out both}
 @keyframes hr-scan{from{transform:translateY(0)}to{transform:translateY(48px);opacity:0}}
 .hr-chip rect{fill:#fff7e6;stroke:#e2bd6e;stroke-width:1}.hr-chip circle{fill:#c99c42}
 .hr-chip{opacity:0;animation:hr-fly .45s cubic-bezier(.2,.8,.2,1) forwards}
 .hr-chip0{animation-delay:.9s}.hr-chip1{animation-delay:1.1s}.hr-chip2{animation-delay:1.3s}
 @keyframes hr-fly{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
 .hr-pill{fill:#fff;stroke:#d5dee9;stroke-width:1.2}.hr-pill-t{stroke:#8da0b7;stroke-width:2.4;stroke-linecap:round}
 .hr-row{opacity:0;animation:hr-fly .4s forwards}.hr-row1{animation-delay:.15s}.hr-row2{animation-delay:.3s}
 .hr-av{opacity:0;animation:hr-fade2 .3s forwards}.hr-av0{fill:#2364a8;animation-delay:.6s}.hr-av1{fill:#6a4fb8;animation-delay:.9s}.hr-av2{fill:#c99c42;animation-delay:1.2s}
 .hr-av-t{fill:#fff;font:700 6.5px var(--font);text-anchor:middle}
 @keyframes hr-fade2{to{opacity:1}}
 .hr-done{fill:#e6f5ec;stroke:#1d7a43;stroke-width:1.6;transform-origin:50px 46px;animation:hr-pop .4s cubic-bezier(.3,1.6,.5,1) both}
 .hr-tick{fill:none;stroke:#1d7a43;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;animation:hr-draw .5s .35s ease-out forwards}
 .hr-dot{fill:#1d7a43;opacity:0;animation:hr-fade2 .25s forwards}.hr-dot0{animation-delay:.8s}.hr-dot1{animation-delay:1s}.hr-dot2{animation-delay:1.2s}
}
@media(prefers-reduced-motion:reduce){.nvj-ring *{animation:none!important;opacity:1!important;stroke-dashoffset:0!important}}
@media(max-width:700px){html body #main #nvj .nvj-simple-copy>.nvj-simple-actions{margin-top:0}html body #main #nvj .nvj-simple-copy>.nvj-ring{flex:1 1 0}}
@media(max-width:700px) and (max-height:700px){html body #main .home-chapters #nvj .nvj-simple-copy>.nvj-simple-actions{margin-bottom:30px}html body #main #nvj .nvj-simple-copy>.nvj-ring{margin:8px 0 12px;gap:6px}.nvj-ring-label{font-size:12.5px}}
/* the oldest small phones (568px tall) have no room for a ring that can be read: the hero stays as it was there */
@media(max-width:700px) and (max-height:600px){html body #main #nvj .nvj-simple-copy>.nvj-ring{display:none}html body #main .home-chapters #nvj .nvj-simple-copy>.nvj-simple-actions{margin-top:auto;margin-bottom:clamp(64px,13svh,120px)}}
@media(max-width:700px){.nvj-ring,.nvj-ring *{overflow-anchor:none}}
/* the ring's picture is replaced every two seconds: a swipe that starts on it must belong to the page, not to a node that disappears */
.nvj-ring,.nvj-ring *{pointer-events:none}
@media(max-width:700px){.nvj-sub-in{animation:nvj-sub-in .6s .25s ease-out both}}
@keyframes nvj-sub-in{from{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.nvj-sub-in{animation:none}}
/* the morphing drawing (owner, 26 Oct): one set of shapes moved by script — no fade between pictures */
@media(max-width:700px){
 .nvj-ring-scene.nvj-morph{animation:none}
 .hm-r{stroke-width:1.3}
 .hm-sig{fill:none;stroke:#1b2a4a;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0}
 .hm-av0{fill:#2364a8}.hm-av1{fill:#6a4fb8}.hm-av2{fill:#c99c42}
 .hm-av-t{fill:#fff;font:700 7px var(--font);text-anchor:middle;opacity:0}
 .hm-tick{fill:none;stroke:#1d7a43;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1}
 .hm-spark{fill:#7a5bd0;transform-origin:72px 17px;animation:hr-pulse 1.2s ease-in-out infinite}
}
/* phones (owner, 26 Oct): a little more air between label · headline · sub-line · ring · Book a Demo (scales with the phone's height) */
@media(max-width:700px){
 html body #main #nvj .nvj-simple-copy>.nvj-category{margin-bottom:clamp(18px,3.1svh,28px)}
 html body #main #nvj .nvj-simple-copy>.nvj-simple-sub{margin-top:clamp(20px,3.5svh,32px)}
 html body #main #nvj .nvj-simple-copy>.nvj-ring{margin-top:clamp(14px,3.4svh,34px);margin-bottom:clamp(14px,3.6svh,34px);gap:clamp(8px,1.4svh,14px)}
 html body #main .home-chapters #nvj .nvj-simple-copy>.nvj-simple-actions{margin-bottom:clamp(30px,9.5svh,92px)}
}
@media(max-width:700px) and (max-height:700px){html body #main .home-chapters #nvj .nvj-simple-copy>.nvj-simple-actions{margin-bottom:26px}html body #main #nvj .nvj-simple-copy>.nvj-ring{margin-top:12px;margin-bottom:14px}}
@media(max-width:700px) and (max-height:600px){html body #main .home-chapters #nvj .nvj-simple-copy>.nvj-simple-actions{margin-bottom:clamp(64px,13svh,120px)}}
/* phones (owner, 26 Oct): section 4 = a phone lock screen at night; section 5 = proof drops in, DELIVERED stamp lands, cards pile up */
@media(max-width:700px){
 .act-2{padding-left:22px}
 .act-lock{flex:1;min-height:0;display:flex;flex-direction:column;gap:clamp(10px,2svh,18px);padding:clamp(16px,3svh,28px) 12px clamp(14px,2.4svh,22px);border-radius:30px;border:1px solid #ffffff1f;background:radial-gradient(120% 70% at 30% 0%,#2c4380 0%,#13234a 45%,#0a1430 100%);box-shadow:inset 0 1px 0 #ffffff1a,0 24px 50px -30px #000;overflow:hidden}
 .act-lock-time{display:flex;flex-direction:column;align-items:center;color:#fff}
 .act-lock-time b{font:300 clamp(48px,9svh,76px)/1 var(--font);letter-spacing:-.02em}
 .act-lock-time span{margin-top:6px;font:500 13px/1.2 var(--font);color:#c3cee3}
 .act-notes{display:flex;flex-direction:column;gap:8px;margin-top:clamp(4px,2svh,18px)}
 .act-note{display:flex;gap:10px;padding:10px 11px;border-radius:18px;background:#ffffff26;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid #ffffff1c;color:#fff;transform:translateY(-14px) scale(.96)}
 .act-note.is-in{transform:none}
 .act-note-app{width:30px;height:30px;border-radius:8px;background:#fff;display:grid;place-items:center;flex:none}
 .act-note-mark{width:18px;height:18px}
 .act-note-body{display:flex;flex-direction:column;min-width:0;font:400 12.5px/1.35 var(--font);color:#e6ecf6}
 .act-note-body small{display:flex;justify-content:space-between;font:600 10.5px/1.2 var(--font);letter-spacing:.03em;text-transform:uppercase;color:#b7c3da;margin-bottom:2px}
 .act-note-body small i{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500}
 .act-note-body b{font:650 13px/1.3 var(--font);color:#fff}
 .act-note.is-late{background:#ff9f4333;border-color:#ffb36b55}
 .act-note.is-late .act-note-body b{color:#ffd2a6}
 .act-lock-foot{margin:auto 0 0;text-align:center;font:600 12.5px/1.3 var(--font);letter-spacing:.02em;color:#e2bd6e}
 /* act 3 */
 .act-stack{position:relative;flex:1;min-height:150px}
 .act-dcard{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-height:96px;padding:14px;border-radius:18px;background:#fff;border:1px solid #dfe7f1;box-shadow:0 14px 30px -22px #1b2a4a88;box-sizing:border-box;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .5s}
 .act-dcard.is-wait{opacity:0;transform:translateY(40px) scale(.96)}
 .act-dcard.is-now{opacity:1;transform:none;z-index:6}
 .act-dcard.is-filed{opacity:calc(1 - var(--d) * .22);transform:translateY(calc(var(--d) * -14px)) scale(calc(1 - var(--d) * .045));z-index:calc(5 - var(--d))}
 .act-dcard.is-filed .act-drop{opacity:0}
 .act-dcard-t{display:flex;flex-direction:column}.act-dcard-t b{font:650 15px/1.25 var(--font);color:var(--ink)}.act-dcard-t small{font:500 12px/1.3 var(--font);color:#5f7088;margin-top:2px}
 .act-drop{display:flex;align-items:center;gap:5px;padding:6px 9px;border-radius:10px;background:#eef3f9;font:600 11px/1 var(--font);color:#3b5878;white-space:nowrap;opacity:0;transform:translateY(-34px)}
 .act-drop .ico{width:13px;height:13px}
 .act-dcard.is-now .act-drop{animation:act-drop .55s .15s cubic-bezier(.3,1.4,.5,1) forwards}
 @keyframes act-drop{to{opacity:1;transform:none}}
 .act-stamp{position:absolute;right:14px;bottom:12px;padding:5px 10px;border:2px solid #1d7a43;border-radius:8px;font:800 11.5px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:#1d7a43;background:#effaf3;transform:rotate(-8deg);opacity:0}
 .act-dcard.is-now .act-stamp{animation:act-stamp .4s .65s cubic-bezier(.3,1.5,.5,1) forwards}
 .act-dcard.is-filed .act-stamp{opacity:1}
 @keyframes act-stamp{from{opacity:0;transform:rotate(-8deg) scale(2.2)}to{opacity:1;transform:rotate(-8deg) scale(1)}}
 .act-tally{padding:12px 14px;border-radius:16px;background:#1b2a4a;color:#fff;flex:none}.act-tally b{display:block;font:700 15px/1.2 var(--font);margin-bottom:8px}
 .act-tally .act-bar i{transition:width .6s ease}
 .act-trail{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px;margin:0;font:600 11px/1 var(--font);color:#4a5d77}
 .act-trail span{padding:5px 8px;border-radius:99px;background:#fff;border:1px solid #dfe7f1}
 .act-trail span:last-child{background:#dff3e6;border-color:#bfe5cd;color:#1d7a43}
 /* logo strip above the closing card: centred small-capitals label, logos rolling on white pills */
 html body #main .home-simple .trust-band{padding:clamp(18px,3svh,28px) 0}
 html body #main .home-simple .trust-band .hero-trust{gap:14px}
 html body #main .home-simple .trust-band .hero-trust-label{width:100%;margin:0;text-align:center;font:750 12px/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
 html body #main .home-simple .trust-band .hero-trust-track{animation:cust-roll 28s linear infinite;gap:12px;padding:6px 12px 10px 0}
 html body #main .home-simple .trust-band .hero-trust-track li{width:auto;min-width:118px;height:56px;padding:0 18px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:#fff;border:1px solid #e1e8f1;box-shadow:0 8px 20px -16px #1b2a4a55;box-sizing:border-box}
}
@media(max-width:700px) and (max-height:700px){.act-lock-time b{font-size:44px}.act-notes .act-note:nth-child(2){display:none}.act-trail{display:none}.act-stack{min-height:110px}.act-dcard{min-height:84px}}
@media(prefers-reduced-motion:reduce){.act-dcard,.act-note{transition:none}.act-drop,.act-stamp{animation:none!important;opacity:1;transform:rotate(-8deg)}.act-drop{transform:none}.html body .home-simple .trust-band .hero-trust-track{animation:none}}
@media(max-width:700px){
 .act-dcard.is-filed>*{opacity:0!important;transition:opacity .3s}
 .act-dcard.is-filed{background:linear-gradient(#fff,#f4f8fc)}
 .act-dcard{bottom:calc(50% - 64px);min-height:118px;padding:16px}
 .act-dcard-t b{font-size:16px}
 .act-dcard .act-drop{position:absolute;left:16px;bottom:16px}
}
@media(max-width:700px) and (max-height:700px){.act-dcard{bottom:calc(50% - 50px);min-height:96px;padding:13px}.act-dcard .act-drop{left:13px;bottom:12px}}
/* phones (owner, 26 Oct, v2): no vertical thread; section 3 types into the box then sends; section 4 phone full width with more notes;
   section 5 = six deliverables turning green one by one */
@media(max-width:700px){
 html body #main .home-chapters>.home-benefits::before,html body #main .home-chapters>.phone-act::before,.act-contract::before{display:none}
 .act,.act-2{padding:0}
 /* act 1: a chat that grows from the bottom, the newest message just above the box */
 .act-feed{justify-content:flex-end;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 22px);mask-image:linear-gradient(transparent,#000 22px)}
 .act-feed>.act-i:not(.is-in){display:none}
 .act-feed>.act-i.is-in{animation:act-pop .45s cubic-bezier(.2,.8,.2,1) both}
 @keyframes act-pop{from{opacity:0;transform:translateY(16px) scale(.97)}}
 html body .act-compose{display:flex;margin-top:4px;gap:10px;padding:8px 8px 8px 16px;border-color:#c9d5e3;color:#8a99ad;min-height:46px;box-sizing:border-box}
 .act-compose>span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .act-compose.is-typing{border-color:#2364a8;color:var(--ink);box-shadow:0 0 0 3px #2364a81f}
 .act-compose.is-typing>span:first-child{white-space:normal;line-height:1.35;font-size:12.5px}
 .act-caret{display:inline-block;width:1.5px;height:1em;margin-left:1px;vertical-align:-2px;background:#2364a8;animation:act-blink .8s steps(1) infinite}
 @keyframes act-blink{50%{opacity:0}}
 .act-send{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#eaf1fa;flex:none}.act-send .ico{width:16px;height:16px;color:#2364a8}
 .act-compose.is-typing .act-send{background:#2364a8}.act-compose.is-typing .act-send .ico{color:#fff}
 /* act 2: the phone uses the full width and holds five notes */
 .act-lock{padding-inline:10px}
 .act-notes{gap:7px}
 .act-note{padding:9px 10px}
 /* act 3: the grid */
 .act-grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:10px}
 .act-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:3px;padding:12px;border-radius:16px;background:#fff;border:1px solid #dfe7f1;box-shadow:0 10px 24px -20px #1b2a4a66;min-height:0;overflow:hidden;transition:background .45s,border-color .45s}
 .act-tile b{font:650 14px/1.2 var(--font);color:var(--ink);padding-right:26px}
 .act-tile small{font:500 11.5px/1.3 var(--font);color:#5f7088}
 .act-tile-tick{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#eef1f5;color:#8a99ad}
 .act-tile-tick .ico{width:13px;height:13px}
 .act-tile-proof{margin-top:auto;align-self:flex-start;display:flex;align-items:center;gap:4px;max-width:100%;padding:5px 8px;border-radius:9px;background:#fff;border:1px solid #bfe5cd;font:600 10.5px/1 var(--font);color:#17603a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(10px);transition:opacity .4s .25s,transform .45s .25s cubic-bezier(.3,1.4,.5,1)}
 .act-tile-proof .ico{width:12px;height:12px;flex:none}
 .act-tile.is-done{background:#effaf3;border-color:#bfe5cd}
 .act-tile.is-done .act-tile-tick{background:#1d7a43;color:#fff;animation:act-tick .4s cubic-bezier(.3,1.6,.5,1)}
 .act-tile.is-done small{color:#1d7a43}
 .act-tile.is-done .act-tile-proof{opacity:1;transform:none}
 @keyframes act-tick{from{transform:scale(.3)}}
 .act-3 .act-link{flex:none}
 /* logo strip: lower pills so the last screen still fits one glide */
 html body #main .home-simple .trust-band{padding:14px 0}
 html body #main .home-simple .trust-band .hero-trust{gap:10px}
 html body #main .home-simple .trust-band .hero-trust-track{padding:4px 12px 8px 0}
 html body #main .home-simple .trust-band .hero-trust-track li{height:44px;min-width:104px;padding:0 14px;border-radius:13px}
}
@media(max-width:700px) and (max-height:700px){
 .act-notes .act-note:nth-child(2),.act-notes .act-note:nth-child(5){display:none}
 .act-tile{padding:9px 10px}.act-tile b{font-size:13px}.act-tile small{font-size:10.5px}
 html body #main #nvj .nvj-simple-copy>.nvj-ring{margin-top:8px;margin-bottom:10px}
}
@media(max-width:700px) and (max-height:600px){.act-tile-proof{display:none}}
@media(max-width:700px){
 .act-tile-thumb{flex:1;min-height:0;max-height:96px;margin:8px 0 6px;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:8px 10px;border-radius:10px;border:1.5px dashed #c9d5e3;background:#f7f9fc;transition:background .4s,border-color .4s}
 .act-tile-thumb i{display:block;height:4px;border-radius:3px;background:#dbe3ed}.act-tile-thumb i:nth-child(2){width:80%}.act-tile-thumb i:nth-child(3){width:55%}
 .act-tile-thumb em{font:600 10px/1.2 var(--font);font-style:normal;color:#8a99ad;margin-top:2px}
 .act-tile.is-done .act-tile-thumb{border-style:solid;border-color:#bfe5cd;background:#fff}
 .act-tile.is-done .act-tile-thumb i{background:#cfe9d9}.act-tile.is-done .act-tile-thumb em{color:#1d7a43}
 .act-tile .act-tile-proof{margin-top:0}
}
@media(max-width:700px) and (max-height:700px){.act-tile-thumb{display:none}.act-tile .act-tile-proof{margin-top:auto}}
/* section 3 (phones): Navio AI's welcome at the top of the chat */
@media(max-width:700px){
 .act-hello{flex:none;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin:auto 0 clamp(6px,2svh,22px);padding:0 6px}
 .act-orb{display:grid;place-items:center;width:clamp(44px,7svh,64px);height:clamp(44px,7svh,64px);border-radius:50%;background:conic-gradient(from 200deg,#2364a8,#7a5bd0,#c99c42,#2364a8);box-shadow:0 12px 30px -14px #7a5bd0aa;animation:act-orb 6s linear infinite;margin-bottom:4px}
 .act-orb .ico{width:46%;height:46%;color:#fff;animation:act-orb 6s linear infinite reverse}
 @keyframes act-orb{to{transform:rotate(360deg)}}
 .act-hello b{font:700 17px/1.2 var(--font);color:var(--ink)}
 .act-hello>span:not(.act-orb):not(.act-sugs){font:500 13px/1.4 var(--font);color:#5f7088;max-width:19em}
 .act-sugs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:6px}
 .act-sug{padding:7px 11px;border-radius:99px;background:#fff;border:1px solid #d6e0ed;font:600 11.5px/1 var(--font);color:#33445c;transition:background .3s,color .3s,border-color .3s,transform .3s}
 .act-sug.is-picked{background:#2364a8;border-color:#2364a8;color:#fff;transform:scale(1.04)}
 .act-feed>.act-hello~.act-i.is-in:first-of-type{margin-top:0}
}
@media(max-width:700px) and (max-height:700px){.act-hello>span:not(.act-orb):not(.act-sugs){display:none}.act-sug:nth-child(3){display:none}}
@media(max-width:700px){.act-feed>.act-hello{margin:auto 0}.act-feed>.act-hello+.act-i{margin-top:0}
 .act-orb{width:clamp(48px,9svh,78px);height:clamp(48px,9svh,78px)}.act-hello b{font-size:clamp(16px,2.4svh,20px)}}
/* section 4 (phones): it reads as a real phone — frame, Dynamic Island with a ringing bell, status bar, lock, home bar */
@media(max-width:700px){
 html body .act-lock{position:relative;border:7px solid #02050b;border-radius:44px;padding:52px 10px 26px;box-shadow:0 0 0 1.5px #4a5a7c,0 0 0 4px #1a2440,0 30px 60px -30px #000;background:radial-gradient(120% 70% at 30% 0%,#3a4f92 0%,#17295a 42%,#0a1430 100%)}
 .act-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);height:26px;width:92px;border-radius:99px;background:#000;display:flex;align-items:center;gap:8px;padding:0 6px;box-sizing:border-box;overflow:hidden;z-index:3;transition:width .45s cubic-bezier(.3,1.3,.5,1)}
 .act-island>*{opacity:0;transition:opacity .25s}
 .act-island.is-ring{animation:act-island 1.25s cubic-bezier(.3,1.2,.5,1) both}
 .act-island.is-ring>*{animation:act-island-in 1.25s both}
 @keyframes act-island{0%{width:92px}18%,78%{width:178px;height:30px}100%{width:92px;height:26px}}
 @keyframes act-island-in{0%,12%{opacity:0}22%,72%{opacity:1}86%,100%{opacity:0}}
 .act-island-bell{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e2bd6e;color:#1b2a4a;flex:none}
 .act-island-bell .ico{width:12px;height:12px;transform-origin:50% 10%;animation:act-bell .5s ease-in-out 3}
 @keyframes act-bell{0%,100%{transform:rotate(0)}25%{transform:rotate(18deg)}75%{transform:rotate(-18deg)}}
 .act-island-t{display:flex;justify-content:space-between;flex:1;font:600 11px/1 var(--font);color:#fff;white-space:nowrap}
 .act-island-t i{font-style:normal;color:#e2bd6e;margin-right:4px}
 .act-status-bar{position:absolute;top:15px;right:18px;display:flex;align-items:center;gap:5px;fill:#fff;color:#fff}
 .act-status-bar svg{width:15px;height:10px}
 .act-batt{position:relative;width:22px;height:11px;border:1.3px solid #ffffffcc;border-radius:3.5px;box-sizing:border-box;padding:1.2px}
 .act-batt::after{content:"";position:absolute;right:-3.5px;top:3px;width:1.6px;height:3.5px;border-radius:1px;background:#ffffffcc}
 .act-batt i{display:block;width:72%;height:100%;border-radius:1.5px;background:#fff}
 .act-lock-icon{align-self:center;color:#fff;opacity:.9;margin-bottom:-4px}.act-lock-icon .ico{width:16px;height:16px}
 .act-homebar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:34%;height:4px;border-radius:9px;background:#ffffffb3}
 .act-lock .act-lock-foot{margin-bottom:6px}
 .act-note-app{position:relative}
 .act-note-app::after{content:"";position:absolute;right:-4px;top:-4px;width:12px;height:12px;border-radius:50%;background:#e5484d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0v7l2 3H4l2-3V8'/%3E%3C/svg%3E") center/8px no-repeat;border:1.5px solid #13234a}
 .act-lock.is-buzz{animation:act-buzz .5s linear}
 @keyframes act-buzz{0%,100%{transform:none}10%,50%,90%{transform:translateX(-3px) rotate(-.6deg)}30%,70%{transform:translateX(3px) rotate(.6deg)}}
}
@media(max-width:700px) and (max-height:700px){html body .act-lock{padding-top:44px;border-width:6px;border-radius:36px}.act-lock-icon{display:none}}
@media(prefers-reduced-motion:reduce){.act-island.is-ring,.act-island.is-ring>*,.act-lock.is-buzz,.act-island-bell .ico{animation:none}}
@media(max-width:700px){
 .act-island.is-ring+.act-status-bar{animation:act-sb-hide 1.25s both}
 @keyframes act-sb-hide{0%,8%{opacity:1}16%,80%{opacity:0}92%,100%{opacity:1}}
}
@media(max-width:700px) and (max-height:600px){.act-notes .act-note:nth-child(4){display:none}}
@media(max-width:700px){
 .act-feed{-webkit-mask-image:none;mask-image:none}
 .act-feed:has(.act-hello.is-fold2){-webkit-mask-image:linear-gradient(transparent,#000 22px);mask-image:linear-gradient(transparent,#000 22px)}
 .act-hello.is-fold1>span:not(.act-orb),.act-hello.is-fold2>span:not(.act-orb){display:none}
 .act-hello.is-fold1 .act-orb{width:40px;height:40px}
 .act-hello.is-fold1 b{font-size:15px}
 .act-hello.is-fold2{display:none}
}
@media(max-width:700px) and (max-height:600px){.act-feed{gap:6px}.act-msg{padding:6px 10px;font-size:12px;line-height:1.3}.act-ai-tag{margin-bottom:1px}.act-btns{margin-top:5px}.act-btn{padding:5px 12px}.act-1 .act-contract{padding:7px 10px}html body .act-compose{min-height:40px;padding-block:5px}}
/* section 5 (phones, owner 26 Oct v3): the delivery receipt */
@media(max-width:700px){
 .act-printer{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center}
 .act-slot{position:relative;z-index:2;width:100%;height:14px;border-radius:99px;background:linear-gradient(#1b2a4a,#0e1a33);box-shadow:inset 0 -3px 0 #000,0 8px 16px -10px #0e1a33;flex:none}
 .act-receipt{position:relative;width:calc(100% - 22px);margin-top:-7px;padding:16px 14px 22px;background:#fff;box-shadow:0 18px 30px -22px #1b2a4a88;box-sizing:border-box;font-family:var(--font);
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x;
  mask:linear-gradient(#000,#000) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x;
  animation:act-feed-paper .6s ease-out both}
 @keyframes act-feed-paper{from{transform:translateY(-30px);opacity:0}}
 .act-rc-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1.5px dashed #d5dee9}
 .act-rc-mark{width:26px;height:26px;flex:none}
 .act-rc-head span{display:flex;flex-direction:column}.act-rc-head b{font:750 13px/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}.act-rc-head small{font:500 11.5px/1.3 var(--font);color:#5f7088}
 .act-rc-lines{list-style:none;margin:0;padding:4px 0 0}
 .act-rc-lines li{display:flex;align-items:center;gap:8px;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .35s .1s,padding .45s}
 .act-rc-lines li.is-in{max-height:60px;opacity:1;padding:clamp(5px,1.1svh,9px) 0}
 .act-rc-t{display:flex;flex-direction:column;min-width:0}.act-rc-t b{font:650 13px/1.2 var(--font);color:var(--ink);white-space:nowrap}.act-rc-t small{font:500 10.5px/1.2 var(--font);color:#7a8aa0}
 .act-rc-dots{flex:1;min-width:10px;height:0;border-bottom:2px dotted #cfd8e3;transform:translateY(4px)}
 .act-rc-p{display:flex;align-items:center;gap:4px;font:600 11px/1 var(--font);color:#17603a;white-space:nowrap}
 .act-rc-p .ico{width:13px;height:13px;padding:2px;border-radius:50%;background:#1d7a43;color:#fff;box-sizing:border-box}
 .act-rc-total,.act-rc-foot{max-height:0;opacity:0;overflow:hidden;transition:max-height .5s,opacity .4s .1s}
 .act-rc-total.is-in,.act-rc-foot.is-in{max-height:80px;opacity:1}
 .act-rc-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;border-top:1.5px dashed #d5dee9}
 .act-rc-total.is-in{padding-top:10px}
 .act-rc-total b{font:800 15px/1.2 var(--font);color:var(--ink)}.act-rc-total span{font:600 11px/1 var(--font);color:#1d7a43}
 .act-rc-foot{display:flex;align-items:center;gap:10px}.act-rc-foot.is-in{padding-top:10px}
 .act-rc-bars{width:70px;height:22px;flex:none;background:repeating-linear-gradient(90deg,#1b2a4a 0 2px,#0000 2px 4px,#1b2a4a 4px 5px,#0000 5px 8px,#1b2a4a 8px 11px,#0000 11px 12px)}
 .act-rc-foot small{font:500 10.5px/1.3 var(--font);color:#5f7088}
 .act-rc-stamp{position:absolute;right:16px;top:44%;padding:8px 14px;border:3px solid #1d7a43;border-radius:10px;font:900 18px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:#1d7a43;background:#effaf3e6;transform:rotate(-12deg) scale(2.4);opacity:0;pointer-events:none}
 .act-receipt.is-stamped .act-rc-stamp{animation:act-slam .45s cubic-bezier(.3,1.5,.5,1) forwards}
 @keyframes act-slam{to{opacity:.95;transform:rotate(-12deg) scale(1)}}
 .act-3 .act-link{margin-top:6px}
}
@media(max-width:700px) and (max-height:700px){.act-rc-t small{display:none}.act-rc-foot{display:none}.act-receipt{padding:12px 12px 18px}.act-rc-head{padding-bottom:7px}}
@media(max-width:700px) and (max-height:600px){.act-rc-lines li:nth-child(n+5){display:none}.act-rc-head small{display:none}}
@media(prefers-reduced-motion:reduce){.act-receipt,.act-rc-stamp{animation:none!important}.act-receipt.is-stamped .act-rc-stamp{opacity:.95;transform:rotate(-12deg)}}
@media(max-width:700px){
 .act-receipt{padding:clamp(14px,2.6svh,26px) clamp(14px,4vw,20px) clamp(20px,3svh,30px)}
 .act-rc-head{padding-bottom:clamp(8px,1.8svh,16px)}
 .act-rc-mark{width:clamp(24px,3.6svh,34px);height:clamp(24px,3.6svh,34px)}
 .act-rc-head b{font-size:clamp(12px,1.75svh,15px)}
 .act-rc-lines li.is-in{max-height:80px;padding:clamp(5px,1.75svh,15px) 0}
 .act-rc-t b{font-size:clamp(13px,1.85svh,16px)}.act-rc-t small{font-size:clamp(10.5px,1.4svh,12px)}
 .act-rc-p{font-size:clamp(11px,1.4svh,12.5px)}
 .act-rc-total b{font-size:clamp(15px,2.2svh,19px)}
 .act-rc-total.is-in{padding-top:clamp(10px,1.8svh,16px)}
 .act-rc-foot.is-in{padding-top:clamp(10px,1.8svh,16px)}
 .act-rc-stamp{top:auto;bottom:clamp(54px,8svh,78px);right:12px}
 .act-3 .act-link{margin-top:auto}
}
@media(max-width:700px) and (max-height:700px){.act-rc-stamp{bottom:24px;font-size:15px;padding:6px 11px}}
@media(max-width:700px){.act-receipt{overflow:hidden;contain:paint}html body #main .home-chapters>.phone-act{overflow:clip}}
/* phones: the glide owns the scroll — the browser must never shift it when something above the screen changes size */
@media(max-width:700px){html,body{overflow-anchor:none}}
/* phones (owner, 26 Oct): one equal side margin on every section, about 1 cm (24px) left and right, top to bottom */
@media(max-width:700px){
 html body #main #navio-intro .nph-cards-track{padding-left:24px;padding-right:24px;scroll-padding-inline:24px;gap:10px}
 html body #main #navio-intro .nph-card{flex-basis:calc(100vw - 48px)}
 html body #main .home-benefits>.container{padding-left:24px;padding-right:24px}
 html body #main .home-chapters>.phone-act{padding-left:24px;padding-right:24px}
 html body #main .act-lock{margin-left:4px;margin-right:4px}
 html body #main .home-connections>.container{padding-left:24px;padding-right:24px}
}
@media(max-width:700px){@keyframes act-island{0%{width:92px}18%,78%{width:min(150px,52%);height:28px}100%{width:92px;height:26px}}.act-island-t{font-size:10.5px}}
/* the story scenes redraw while they play: swipes on them belong to the page (only the link stays tappable) */
@media(max-width:700px){.act,.act *{pointer-events:none}.act .act-link,.act .act-link *{pointer-events:auto}}