/* NUVENA — original brand, considered motion. No new colour scheme. */
@font-face{font-family:NuvenaFigtree;src:local('Figtree'),url('/fonts/Figtree.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:local('Inter'),url('/fonts/Inter.woff2') format('woff2');font-weight:400 700;font-style:normal;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,Inter,Arial,sans-serif;--ui:Inter,NuvenaFigtree,Arial,sans-serif;--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(--ink);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:#1d2850;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)}}
[data-motion=paused] *,[data-motion=paused] *:before,[data-motion=paused] *:after{animation-play-state:paused!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{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 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(680px,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{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{display:none}
}
@media(max-width:680px) and (max-height:760px){.fold .hero-copy .intro{display:none}}
/* 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-manappuram{height:26px!important}.cust-siemens{height:17px!important}.cust-star{height:32px!important}.cust-kseb{height:31px!important}.cust-patanjali{height:27px!important}.cust-wcl{height:34px!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}
@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-star,.cust-kseb{height:25px!important}.cust-patanjali{height:21px!important}.cust-wcl,.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}
}

/* ============ 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(900px,calc(100vw - 32px))}
.mm-ind{width:min(1080px,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(820px,calc(100vw - 32px))}
.mm-ind{width:min(940px,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(22px + env(safe-area-inset-bottom,0px))!important;border-top:0;border-radius:28px 28px 0 0;background:#101935;color:#eef1f7}
.f2-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;padding:clamp(44px,6vw,76px) 0 clamp(36px,4.6vw,56px);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(32px,4vw,56px);font-weight:500;line-height:1.04;letter-spacing:-.045em;color:#fff}
.f2-gold{position:relative;color:#8fb8ef}
.f2-copy p{margin:12px 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:22px}
.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 ============ */
@font-face{font-family:NuvenaScript;src:url('/fonts/DancingScript.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
/* 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 NuvenaScript,cursive;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)}
@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}
.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(--ink);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:#1d2850}
.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}

/* Security page: six facts as tiles, the app's own protections, then your rights */
.sec-page{padding-top:clamp(24px,4vh,48px)}
.sec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sec-card{padding:26px 24px 28px;border:1px solid var(--line);border-radius:18px;background:#fff}
.sec-ico{display:grid;place-items:center;width:44px;height:44px;margin-bottom:22px;border-radius:12px;background:#e7ecf4;color:var(--blue)}
.sec-ico .ico{width:21px;height:21px}
.sec-card h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.sec-card p{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--slate)}
.sec-app{display:flex;flex-wrap:wrap;align-items:center;gap:14px 40px;margin-top:16px;padding:22px 24px;border:1px solid var(--line);border-radius:18px;background:#fff}
.sec-app h2{margin:0;font-size:16px;font-weight:600;color:var(--ink)}
.sec-app ul{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0;padding:0;list-style:none}
.sec-app li{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--slate)}
.sec-app li .ico{width:16px;height:16px;color:var(--blue)}
.sec-rights{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:28px 48px;margin-top:clamp(48px,8vh,88px);padding:clamp(28px,4vw,48px);border-radius:20px;background:#e7ecf4}
.sec-rights h2{margin:14px 0 0;font-size:clamp(28px,3vw,40px);font-weight:500;letter-spacing:-.04em;line-height:1.1}
.sec-rights p{max-width:52ch;margin:12px 0 0;font-size:16px;line-height:1.55;color:var(--slate)}
.sec-contacts{display:grid;gap:10px}
.sec-contacts a{display:grid;gap:2px;min-width:260px;padding:14px 18px;border-radius:14px;background:#fff;transition:box-shadow .25s}
.sec-contacts a:hover{box-shadow:0 8px 22px #10193514}
.sec-contacts small{font-size:12px;color:var(--muted)}
.sec-contacts b{font-size:16px;font-weight:600;color:var(--ink)}
@media(max-width:900px){.sec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sec-rights{grid-template-columns:1fr}}
@media(max-width:560px){.sec-grid{grid-template-columns:1fr}.sec-card{padding:20px}.sec-ico{margin-bottom:14px}.sec-contacts a{min-width:0}.sec-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 Georgia,'Times New Roman',serif;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}
.st-hook h1{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 7s 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(5,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,.st-knots li:nth-child(3) i{border-color:var(--violet)}
.st-knots li:nth-child(4) 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)}
@font-face{font-family:NuvenaSign;src:url('/fonts/AlexBrush.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* 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 NuvenaSign,NuvenaScript,cursive;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(--ink);color:#fff}
.df-light .f2-send:hover{--ring-fill:#1d2850}
.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(560px,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:var(--ink);color:#fff}
.hire-bar::after{content:"";position:absolute;top:0;bottom:0;left:-30%;width:30%;background:linear-gradient(90deg,transparent,#ffffff1f,transparent);pointer-events:none}
@media(prefers-reduced-motion:no-preference){.hire-bar::after{animation:hire-shine 5s ease-in-out 1.2s infinite}}
@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 13.5px var(--ui);color:#fff;white-space:nowrap}
.hire-link b{font-weight:600}
.hire-link span{color:#c9d2e6;text-decoration:underline;text-decoration-color:#ffffff4d;text-underline-offset:3px;transition:color .2s}
.hire-link:hover span{color:#fff;text-decoration-color:#fff}
.hire-link .ico{width:14px;height:14px;color:#e6bf62;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}
@media(prefers-reduced-motion:no-preference){.hire-dot::after{animation:hire-ping 1.8s ease-out infinite}}
@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}
.sec-ai{display:flex;align-items:center;gap:20px;margin-bottom:16px;padding:22px 24px;border:1px solid #ddd6f3;border-radius:18px;background:linear-gradient(110deg,#f3f6fc,#f5f1fc 60%,#fcf1f5);text-decoration:none;transition:box-shadow .25s,border-color .25s}
.sec-ai:hover{border-color:#c9bdf0;box-shadow:0 22px 44px -32px #10193580}
.sec-ai .sec-ico{flex:none;margin:0;background:linear-gradient(135deg,#2364a8,#6a4fb8 55%,#c8326a);color:#fff}
.sec-ai div{flex:1;min-width:0}
.sec-ai h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.sec-ai p{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--slate)}
.sec-ai-go{display:inline-flex;align-items:center;gap:8px;flex:none;font:600 14px var(--ui);color:var(--ink)}
.sec-ai-go .ico{width:16px;height:16px;transition:transform .2s}
.sec-ai:hover .sec-ai-go .ico{transform:translateX(3px)}
@media(max-width:700px){.sec-ai{flex-wrap:wrap;align-items:flex-start}.sec-ai-go{width:100%;padding-left:64px}}
/* ===== 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}
@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:#24304f}
.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 */
.ck2{position:fixed;left:0;right:0;bottom:0;z-index:300;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 18px;padding:10px var(--gutter);background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px #1019350f;font:400 13px/1.45 var(--ui);color:var(--slate)}
.ck2 p{margin:0}.ck2 b{color:var(--ink);font-weight:600}.ck2 a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ck2-acts{display:flex;align-items:center;gap:8px}
.ck2 button{min-height:34px;padding:0 16px;border-radius:99px;border:1px solid var(--thread);background:#fff;color:var(--ink);font:600 13px/1 var(--ui)}
.ck2 .ck2-yes{background:var(--ink);border-color:var(--ink);color:#fff}
.ck2 .ck2-x{width:34px;padding:0;border:0;background:none;font-size:20px;color:var(--muted)}
@media(max-width:600px){.ck2 .ck2-long{display:none}.ck2{font-size:12px;padding:8px 14px}}
/* 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 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-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-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{font:400 11.5px var(--ui);color:var(--slate)}
.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)}
.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}}