/* [hp-tail-flat] */ #reach{background:#191D26!important} #waitlist::after{display:none!important} /* [hp-tune-3] */ /* solution screenshots: white white */ .solshot,.solshot.itg,.solshot.brn,.solshot.wfb,.solshot.agl,.sv-shot>*{background-color:#FFFFFF!important} .solshot *[style*="FBFAF8"],.solshot *[style*="F7F5F2"]{background-color:#FFFFFF!important} /* security band: cleaner and a notch lighter */ #trust.sechome{background: radial-gradient(62% 92% at 94% 52%,rgba(246,220,182,.72),transparent 62%), radial-gradient(44% 62% at 74% 16%,rgba(176,204,204,.4),transparent 64%), radial-gradient(100% 130% at 24% 86%,rgba(216,230,246,.7),transparent 68%), linear-gradient(104deg,#95B2D8 0%,#A3BEDF 34%,#B8CDE7 58%,#CBD9E9 80%,#D8E0E6 100%)!important} /* [hp-no-grain] */ .opener::after{background-image:none!important;display:none!important} /* [hp-tune-4] */ /* the quote sits dead centre of its band, symbol pulled in */ #why .mstick{padding-top:clamp(120px,13vw,200px)!important;padding-bottom:clamp(120px,13vw,200px)!important;justify-content:center!important;align-items:center!important} #why .mbiglock{justify-self:center!important;padding-right:clamp(0px,2vw,40px)} #why .mq{justify-content:center} /* what's inside: model agnostic lighter, integrations its own colour */ #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4){background:radial-gradient(32rem 20rem at 18% 0%,rgba(122,158,214,.5),transparent 62%),linear-gradient(160deg,#1B2B45 0%,#24395C 58%,#2E4A73 100%)!important} #capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5):nth-child(5){background:radial-gradient(30rem 18rem at 82% 4%,rgba(226,168,120,.42),transparent 62%),linear-gradient(160deg,#F3EBE1 0%,#EADDCC 58%,#E0CEB8 100%)!important} #capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5) .cap-head h3,#capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5) .stk>h3{color:#2A2018!important} #capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5) .cap-head p,#capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5) .stk>.sub{color:rgba(42,32,24,.7)!important} /* security band: the pale sky, smooth and screen-wide */ #trust.sechome{background: radial-gradient(70% 90% at 82% 22%,rgba(150,186,224,.85),transparent 64%), radial-gradient(60% 70% at 22% 74%,rgba(250,246,236,.95),transparent 66%), radial-gradient(90% 80% at 52% 40%,rgba(226,236,248,.8),transparent 68%), linear-gradient(118deg,#E8EDF3 0%,#DCE6F1 28%,#C3D6EC 54%,#DEE7F1 78%,#EFEAE0 100%)!important} #trust.sechome .lsec,#trust.sechome .seclist h3,#trust.sechome .seclink,#trust.sechome .seccard h3{color:#101A2C!important} #trust.sechome .lsec span,#trust.sechome .sec-sub{color:rgba(16,26,44,.74)!important} #trust.sechome .sec-kick,#trust.sechome .kicker{color:rgba(16,26,44,.6)!important} #trust.sechome .seclist p,#trust.sechome .seccard p{color:rgba(16,26,44,.74)!important} /* [quote-map-pass] */ /* creed quote: the mark reads bigger and sits off the right edge */ #why .mbiglock{justify-self:center!important;padding-right:0!important;transform:translateX(clamp(-320px,-13vw,-90px))!important} #why .mbiglock svg{width:clamp(210px,21vw,380px)!important} /* the quote holds its authored two-line break on desktop */ @media(min-width:1200px){ #why .mbox{width:min(1600px,100%)!important;grid-template-columns:max-content minmax(0,1fr)!important;gap:clamp(24px,2.6vw,56px)!important} #why .mline{white-space:nowrap;font-size:clamp(38px,3.6vw,58px)!important} #why .mq{min-width:max-content} #why .mbiglock{justify-self:end!important;padding-right:0!important} } /* the mark sits further right, clear of the quote */ #why .mbiglock{justify-self:end!important;padding-right:0!important} /* no hairline between the map and get started */ #waitlist::before{display:none!important;content:none!important;background:none!important;height:0!important} /* [cap-tiles-pass] */ /* what's inside: tiles run a little wider */ #capabilities .capmosaic>.cap-tile{flex:0 0 min(34.5%,520px)!important} @media(max-width:1180px){#capabilities .capmosaic>.cap-tile{flex:0 0 min(49%,520px)!important}} @media(max-width:820px){#capabilities .capmosaic>.cap-tile{flex:0 0 78%!important}} @media(max-width:700px){#capabilities .capmosaic>.cap-tile{flex:0 0 88%!important}} #capabilities .capmosaic>.cap-tile:nth-child(1) .stk.chatp>.sub{margin:0 0 clamp(18px,1.8vw,26px)!important} @media(max-width:900px){#capabilities .capmosaic>.cap-tile:nth-child(1){min-height:620px!important}} /* === taken over from Hive Homepage reference: what's inside tiles === */ /* ============ investor-deck palette on the dark chapters ============ charcoal #1B1B1B · navy #16233A · olive #333A2A · deck blue #CFE0F5 */ /* ---- capability tiles: separate, wider, in colour ---- */ #capabilities.capsx .wrap.wide{--railpad:20px;max-width:1860px!important} #capabilities .capmosaic{gap:clamp(12px,1.2vw,18px)!important;background:transparent!important;border:0!important} #capabilities .cap-head h3::before{display:none!important} #capabilities .capmosaic>.cap-tile:nth-child(1):nth-child(1){background:radial-gradient(34rem 20rem at 18% 0%,rgba(77,110,156,.55),transparent 62%),linear-gradient(160deg,#0F1725 0%,#16233A 58%,#1d2f4c 100%)!important} #capabilities .capmosaic>.cap-tile:nth-child(6):nth-child(6){background:radial-gradient(32rem 18rem at 20% 0%,rgba(126,140,96,.45),transparent 64%),linear-gradient(160deg,#20241A 0%,#333A2A 60%,#3d452f 100%)!important} #capabilities .capmosaic>.cap-tile{border-radius:14px!important;overflow:hidden} #capabilities .capmosaic>.cap-tile:not(.ondark):nth-child(n){background:#FFFFFF!important} #capabilities .capmosaic>.cap-tile:not(.ondark):nth-child(2){background:linear-gradient(160deg,#dbe9f9 0%,#cfe0f5 60%,#c3d8f1 100%)!important} /* 01 navy, 06 olive — dark regardless of tagging */ #capabilities .capmosaic>.cap-tile:nth-child(1){background:radial-gradient(34rem 20rem at 18% 0%,rgba(77,110,156,.55),transparent 62%),linear-gradient(160deg,#0F1725 0%,#16233A 58%,#1d2f4c 100%)!important} #capabilities .capmosaic>.cap-tile:nth-child(6){background:radial-gradient(32rem 18rem at 20% 0%,rgba(126,140,96,.45),transparent 64%),linear-gradient(160deg,#20241A 0%,#333A2A 60%,#3d452f 100%)!important} #capabilities .capmosaic>.cap-tile:nth-child(1) .cap-head h3, #capabilities .capmosaic>.cap-tile:nth-child(6) .cap-head h3{color:#F7F5F2!important} #capabilities .capmosaic>.cap-tile:nth-child(1) .cap-head p, #capabilities .capmosaic>.cap-tile:nth-child(6) .cap-head p{color:rgba(247,245,242,.66)!important} #capabilities .capmosaic>.cap-tile:nth-child(1) .cap-head h3::before, #capabilities .capmosaic>.cap-tile:nth-child(6) .cap-head h3::before{color:rgba(247,245,242,.45)!important} #capabilities .capmosaic>.cap-tile:not(.ondark):nth-child(3){background:linear-gradient(160deg,#f0f0ee 0%,#e9e9e6 60%,#e2e2de 100%)!important} #capabilities .capmosaic>.cap-tile:not(.ondark):nth-child(5){background:linear-gradient(160deg,#e7e9e1 0%,#dee1d6 60%,#d5d9cb 100%)!important} /* 01 navy, 04 charcoal, 06 olive */ #capabilities .capmosaic>.cap-tile.ondark:nth-child(1){background:radial-gradient(34rem 20rem at 18% 0%,rgba(77,110,156,.55),transparent 62%),linear-gradient(160deg,#0F1725 0%,#16233A 58%,#1d2f4c 100%)!important} #capabilities .capmosaic>.cap-tile.ondark:nth-child(4){background:radial-gradient(32rem 18rem at 82% 0%,rgba(111,143,216,.28),transparent 64%),linear-gradient(160deg,#121212 0%,#1B1B1B 58%,#26262a 100%)!important} #capabilities .capmosaic>.cap-tile.ondark:nth-child(6){background:radial-gradient(32rem 18rem at 20% 0%,rgba(126,140,96,.45),transparent 64%),linear-gradient(160deg,#20241A 0%,#333A2A 60%,#3d452f 100%)!important} /* ---- section headlines: centred editorial, as on About ---- */ #capabilities .lhead,.solband .lhead,#explore .lhead,#reach .lhead, .section[data-screen-label="Live demo intro"] .lhead{text-align:center!important;margin-left:auto!important;margin-right:auto!important;max-width:1180px} #capabilities .lhead .lsec,.solband .lhead .lsec,#explore .lhead .lsec,#reach .lhead .lsec, .section[data-screen-label="Live demo intro"] .lhead .lsec{margin-left:auto!important;margin-right:auto!important;max-width:32ch;text-wrap:pretty} .solband .sv-sub{margin-left:auto!important;margin-right:auto!important;text-align:center} #capabilities .cap-head{text-align:left!important} /* ---- solution list: the same hairline rows as "where this goes" ---- */ .sv-tabs .sv-tabitem{border-top-color:rgba(27,27,27,.12)!important} .sv-tabs .sv-tabitem:last-child{border-bottom-color:rgba(27,27,27,.12)!important} .sv-tabs .sv-tab{color:var(--ink)!important} .sv-tabs .sv-tab b{color:var(--ink)!important;font-weight:460!important;font-size:clamp(19px,1.6vw,26px)!important} .sv-tabs:has(.sv-tab.on) .sv-tab:not(.on){color:var(--stone-4)!important} .sv-tabs:has(.sv-tab.on) .sv-tab:not(.on) b{color:var(--stone-4)!important} .sv-tabs .sv-tab.on,.sv-tabs .sv-tab.on b{color:var(--ink)!important} .sv-tabs .sv-tab i{display:block!important;position:static!important;width:auto!important;height:auto!important;border:0!important;background:none!important;flex:0 0 clamp(56px,5vw,84px);font-family:var(--f-ui)!important;font-size:11px!important;font-weight:500!important;letter-spacing:.16em!important;color:var(--stone-4)!important;place-items:start!important} .sv-tabs .sv-tab.on i{background:none!important;color:#4D6E9C!important} .sv-tabx p{color:var(--stone-6)!important} /* ---- security: blue again, no olive ---- */ main .section.sechome,.section.sechome{background:radial-gradient(48rem 22rem at 14% 0%,rgba(77,110,156,.55),transparent 64%),radial-gradient(40rem 20rem at 88% 100%,rgba(159,183,240,.22),transparent 66%),linear-gradient(160deg,#0F1725 0%,#16233A 58%,#1d2f4c 100%)!important} /* ---- the tail is one element: map → CTA → footer, no seams ---- */ #reach{background:linear-gradient(180deg,#1B1B1B 0%,#1a1d25 55%,#1a1e28 100%)!important;padding-bottom:0!important;margin-bottom:0!important} /* the transition keeps running through the footer */ footer{background:linear-gradient(180deg,#171b24 0%,#14171f 45%,#101318 100%)!important;margin-top:0!important} /* the opener: dark at the top, opening early into a light blue sky */ .opener{background:linear-gradient(180deg,#0A0F1A 0%,#101A2C 16%,#1D3050 32%,#3A5A86 48%,#6E97C6 64%,#A3C6E6 78%,#CDE3F5 89%,#E4F0FA 96%,#EDF5FC 100%)!important} .mist::after{background:linear-gradient(180deg,rgba(8,12,22,.7) 0%,rgba(10,16,28,.36) 24%,rgba(14,24,40,.16) 44%,rgba(20,34,56,.05) 64%,rgba(26,44,70,0) 80%)!important} .mist i:nth-child(1){top:40%!important;height:60%!important;background:radial-gradient(closest-side,rgba(140,175,225,.9),rgba(140,175,225,.34) 60%,transparent 88%)!important;opacity:.9} .mist i:nth-child(2){top:58%!important;height:56%!important;background:radial-gradient(closest-side,rgba(178,203,238,.85),rgba(178,203,238,.3) 58%,transparent 86%)!important;opacity:.75} .mist i:nth-child(3){top:74%!important;height:54%!important;background:radial-gradient(closest-side,rgba(212,228,248,.8),rgba(212,228,248,.28) 56%,transparent 84%)!important;opacity:.6} .mist i:nth-child(4){top:-18%!important;height:48%!important;background:radial-gradient(closest-side,rgba(7,10,18,.98),rgba(7,10,18,.45) 62%,transparent 88%)!important;opacity:.95} /* the film sits straight on the sky, no plate and no frame */ .opener #product .hvid,.opener #product .hvid>div{background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important;overflow:visible!important} .opener #product iframe{background:transparent!important} /* ---- the quote: blue-into-black, one continuous panel, more structure ---- */ #why,#why .mstick{background:radial-gradient(46rem 22rem at 22% 12%,rgba(77,110,156,.42),transparent 64%),radial-gradient(40rem 20rem at 84% 88%,rgba(159,183,240,.16),transparent 66%),linear-gradient(160deg,#0F1725 0%,#16233A 46%,#161821 78%,#131313 100%)!important} #why{height:112vh!important} #why .mbox{align-items:start!important;gap:clamp(30px,5vw,80px)!important} #why .mq{position:relative} #why .mlock{margin-top:clamp(30px,3.4vw,48px)!important;padding-top:clamp(22px,2.4vw,32px);border-top:1px solid rgba(247,245,242,.16)} /* what's inside: the rail runs the full width of the screen at any size */ #capabilities .capmosaic{width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;padding-left:var(--capgut)!important;padding-right:var(--capgut)!important;scroll-padding-left:var(--capgut);gap:clamp(12px,1.2vw,22px)!important;overscroll-behavior-x:contain} #capabilities{--capgut:clamp(18px,4.2vw,80px)} #capabilities .capmosaic>.cap-tile{flex:0 0 clamp(300px,25.5vw,520px)!important;height:clamp(520px,34vw,700px)!important;min-height:0!important} @media(max-width:1180px){#capabilities .capmosaic>.cap-tile{flex:0 0 clamp(300px,44vw,480px)!important}} @media(max-width:820px){#capabilities .capmosaic>.cap-tile{flex:0 0 min(78%,420px)!important}} @media(max-width:560px){#capabilities .capmosaic>.cap-tile{flex:0 0 88%!important}} /* content that reaches past the tile fades out instead of being sliced */ #capabilities .cap-tile .cap-vis{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 80%,rgba(0,0,0,.35) 94%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 80%,rgba(0,0,0,.35) 94%,transparent 100%)} /* panels read at full strength to the tile floor, no fade */ #capabilities .cap-tile .cap-vis{-webkit-mask-image:none!important;mask-image:none!important} /* the nav sits on the same gutter as the rail */ #capabilities .capnav{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:var(--capgut);padding-right:var(--capgut)} /* what's inside: tiles run a little wider */ #capabilities .capmosaic>.cap-tile{flex:0 0 min(33%,540px)!important} @media(max-width:1180px){#capabilities .capmosaic>.cap-tile{flex:0 0 min(48%,540px)!important}} @media(max-width:820px){#capabilities .capmosaic>.cap-tile{flex:0 0 70%!important}} @media(max-width:700px){#capabilities .capmosaic>.cap-tile{flex:0 0 82%!important}} /* chat tile: one calm column, nothing absolute over the heading */ #capabilities .capmosaic>.cap-tile:nth-child(1) .stk.chatp{display:flex!important;flex-direction:column!important;padding:30px 26px 104px!important} #capabilities .capmosaic>.cap-tile:nth-child(1) .stk.chatp>.sub{min-height:0!important} #capabilities .capmosaic>.cap-tile:nth-child(1) .stk.chatp .cp-ans{position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;gap:0} #capabilities .capmosaic>.cap-tile:nth-child(1) .stk.chatp .cp-q{max-width:88%!important;margin-bottom:16px!important} #capabilities .capmosaic>.cap-tile:nth-child(1) .stk.chatp .srcs{margin-top:12px!important;flex-wrap:wrap} #capabilities .capmosaic>.cap-tile:nth-child(1) .stk.chatp .cp-do{margin-top:14px!important} #capabilities .capmosaic>.cap-tile:nth-child(1) .stk.chatp .cp-act{margin-top:16px!important} /* composer: room for the send button, no crowding */ #capabilities .capmosaic>.cap-tile:nth-child(1) .stk.chatp .cp-chip.dim2, #capabilities .capmosaic>.cap-tile:nth-child(1) .stk.chatp .cp-mic{display:none!important} #capabilities .capmosaic>.cap-tile:nth-child(1) .stk.chatp .cp-row{padding-right:44px!important} @media(max-width:900px){#capabilities .capmosaic>.cap-tile:nth-child(1){min-height:620px!important}} /* integrations tile: its own shade of light blue */ #capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5):nth-child(5):nth-child(5){background: radial-gradient(30rem 18rem at 82% 4%,rgba(138,180,216,.4),transparent 62%), linear-gradient(160deg,#E7F1F7 0%,#D5E6F1 56%,#C0D9EA 100%)!important} #capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5):nth-child(5) .cap-head h3, #capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5):nth-child(5) .stk>h3{color:#14243A!important} #capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5):nth-child(5) .cap-head p, #capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5):nth-child(5) .stk>.sub{color:rgba(20,36,58,.7)!important} /* model agnostic: the panel IS the tile — light sky ground, picker centred, composer on the floor */ #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4):nth-child(4){background:linear-gradient(180deg,#E4EBF8 0%,#DCE4F3 100%)!important;border-color:rgba(36,56,78,.08)!important;padding:0!important;overflow:hidden!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .cap-head{display:none!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .cap-vis{position:absolute!important;inset:0!important;left:0!important;right:0!important;width:auto!important;padding:0!important;display:block!important;overflow:hidden!important;transform:none!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp{position:absolute!important;inset:0!important;width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;padding:clamp(30px,2.6vw,40px) clamp(26px,2.2vw,34px) 0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;display:flex!important;flex-direction:column!important;zoom:1!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp>*{zoom:1!important} /* heading, subline and the arrow read as the tile head */ #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp>h3{display:block!important;text-align:left!important;font-family:var(--f-display)!important;font-weight:500!important;font-size:clamp(24px,1.85vw,31px)!important;letter-spacing:-.015em!important;line-height:1.1!important;color:#141a2e!important;margin:0 0 10px!important;max-width:none!important;text-indent:.018em} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp>.sub{display:block!important;text-align:left!important;max-width:30ch!important;font-family:var(--f-ui)!important;font-size:15px!important;line-height:1.5!important;color:rgba(20,26,46,.66)!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp>.go{display:none!important} /* picker centred in the room that is left, flags on the arrow row */ #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp .mdl{position:relative!important;flex:1 1 0!important;min-height:0!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:center!important;margin:0!important;padding:0!important;height:auto!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp .mdl-pop{order:1!important;width:66%!important;margin:clamp(18px,1.8vw,28px) auto 0!important;flex:0 0 auto!important;max-height:none!important;height:min(100%,252px)!important;position:relative!important;overflow:hidden!important;padding-bottom:0!important;background:var(--paper)!important;border-radius:14px!important;box-shadow:0 14px 34px rgba(20,30,45,.13)!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp .mdl-regions{position:static!important;order:0!important;align-self:flex-end!important;top:auto!important;right:auto!important;left:auto!important;margin:clamp(16px,1.6vw,22px) 0 0!important;justify-content:flex-end!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .mdl-regions .figs .fl,#capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .mdl-regions .figs .gl{width:22px!important;height:22px!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .mdl-regions .figs{gap:8px!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .mdl-regions .figs .fl{clip-path:circle(50% at 50% 50%)!important;overflow:hidden!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .mdl-regions .figs .gl{background:transparent!important;padding:0!important;border:0!important;color:var(--stone-4)!important;stroke-width:1.6} /* composer band sits on the tile floor, edge to edge */ #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp .mdl-bar{display:flex!important;position:static!important;flex:0 0 auto!important;margin:0 calc(-1 * clamp(26px,2.2vw,34px))!important;padding:14px clamp(26px,2.2vw,34px) 16px!important;background:rgba(20,26,46,.045)!important;border-top:1px solid rgba(20,26,46,.09)!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp .mb-ph{color:rgba(20,26,46,.45)!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp .mb-plus{border-color:rgba(20,26,46,.22)!important;color:rgba(20,26,46,.6)!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp .mb-mic{color:rgba(20,26,46,.6)!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp .mb-chip{background:#fff!important;color:#141a2e!important;box-shadow:0 1px 3px rgba(20,30,45,.08)!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp .mb-send{background:#141a2e!important;color:#F7F5F2!important} /* the picker reads like a scrollable list: bigger names, a clipped row, a slim rail */ #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp .mp-r{padding:9px 14px!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp .mp-r.on{padding:10px 14px 12px!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp .mp-b b{font-size:12px!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp .mp-b b em{font-size:8.5px!important;padding:2px 7px!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp .mp-b span{font-size:9.5px!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp .mp-mi{width:24px!important;height:24px!important;font-size:12px!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp .mp-hg{width:26px!important;height:26px!important;border-radius:8px!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp .mp-hg svg{width:15px!important;height:15px!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp .mp-rad{width:10px!important;height:10px!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp .mp-ft{position:absolute!important;left:0!important;right:0!important;bottom:0!important;background:var(--paper)!important;font-size:10.5px!important;padding:8px 14px 9px!important;margin-top:0!important;border-top:1px solid var(--line-soft)!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp .mp-ft::before{content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:100%!important;height:30px!important;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.92) 72%,#fff 100%)!important;pointer-events:none} @media(max-width:820px){ #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp .mdl-pop{zoom:.92!important} } /* api: the panel IS the tile — head on the charcoal ground, code fills everything below it */ #capabilities .capmosaic>.cap-tile:nth-child(6):nth-child(6) .cap-head{display:none!important} #capabilities .capmosaic>.cap-tile:nth-child(6):nth-child(6){padding:0!important;overflow:hidden!important} #capabilities .capmosaic>.cap-tile:nth-child(6):nth-child(6) .cap-vis{position:absolute!important;inset:0!important;left:0!important;right:0!important;width:auto!important;padding:0!important;display:block!important;overflow:hidden!important;transform:none!important} #capabilities .capmosaic>.cap-tile:nth-child(6):nth-child(6) .stk.dk{position:absolute!important;inset:0!important;width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;padding:clamp(30px,2.6vw,40px) clamp(26px,2.2vw,34px) 0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;display:flex!important;flex-direction:column!important;zoom:1!important} #capabilities .capmosaic>.cap-tile:nth-child(6):nth-child(6) .stk.dk>*{zoom:1!important} #capabilities .capmosaic>.cap-tile:nth-child(6):nth-child(6) .stk.dk>h3{display:block!important;text-align:left!important;font-family:var(--f-display)!important;font-weight:500!important;font-size:clamp(24px,1.85vw,31px)!important;letter-spacing:-.015em!important;line-height:1.1!important;color:#F7F5F2!important;margin:0 0 10px!important;max-width:none!important;text-indent:.018em} #capabilities .capmosaic>.cap-tile:nth-child(6):nth-child(6) .stk.dk>.sub{display:block!important;text-align:left!important;max-width:30ch!important;font-family:var(--f-ui)!important;font-size:15px!important;line-height:1.5!important;color:rgba(247,245,242,.7)!important} #capabilities .capmosaic>.cap-tile:nth-child(6):nth-child(6) .stk.dk>.go{display:none!important} /* the code sheet takes every pixel left under the head */ #capabilities .capmosaic>.cap-tile:nth-child(6):nth-child(6) .stk.dk .api-code{position:static!important;flex:1 1 auto!important;min-height:0!important;top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;width:auto!important;margin:0 calc(-1 * clamp(26px,2.2vw,34px))!important;padding:clamp(18px,1.7vw,24px) clamp(22px,1.9vw,28px) 0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden!important} #capabilities .capmosaic>.cap-tile:nth-child(6):nth-child(6) .stk.dk .api-code pre{font-size:clamp(12.5px,.92vw,14px)!important;line-height:1.7!important;color:#D8D4CD!important;white-space:pre!important;overflow:hidden!important} #capabilities .capmosaic>.cap-tile:nth-child(6):nth-child(6) .stk.dk .api-code .ln{width:2.2em!important} /* shorter tiles: the whole listing scales to fit instead of losing its last lines */ @media(max-width:1180px){ #capabilities .capmosaic>.cap-tile:nth-child(6):nth-child(6) .stk.dk .api-code pre{zoom:.86!important} } /* agents: the timeline reads at size, evenly spaced in the room it has */ #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2) .agstk .agt{padding:6px 4px 0!important;gap:0!important;justify-content:flex-start!important;margin-top:clamp(-26px,-1.8vw,-10px)!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2) .ag-step{gap:17px!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2) .ag-dot{width:30px!important;height:30px!important;font-size:14px!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2) .ag-line{min-height:30px!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2) .ag-body{padding:4px 0 26px!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2) .ag-t{font-size:18.5px!important;gap:11px!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2) .ag-ms{font-size:11px!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2) .ag-chips{gap:8px!important;margin-top:11px!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2) .ag-chip{font-size:14.5px!important;padding:7px 12px!important;border-radius:9px!important;gap:9px!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2) .ag-chip .fi{width:19px!important;height:19px!important;border-radius:5px!important;font-size:11px!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2) .ag-chip svg{width:19px!important;height:19px!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2) .ag-find{font-size:14px!important;padding:8px 13px!important;border-radius:10px!important;margin-top:10px!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2) .ag-spin{width:18px!important;height:18px!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2) .ag-hd{display:none!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2) .ag-av{width:36px!important;height:36px!important;border-radius:10px!important;font-size:16px!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2) .ag-hb b{font-size:16px!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2) .ag-hb span{font-size:11.5px!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2) .ag-live{font-size:11px!important} /* shorter tiles: the whole timeline scales down rather than losing its last step */ @media(max-width:1180px){ #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2) .agstk .ag-hd, #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2) .agstk .agt{zoom:.82!important} } /* integrations: the constellation sits higher in the tile */ #capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5) .cap-vis.intvis{align-items:flex-start!important;padding-top:0!important} #capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5) .cap-vis.intvis .iw-orb{margin-top:0!important;transform:translateY(clamp(-96px,-5.8vw,-48px))!important} /* what's inside — one grounded palette: two dark bookends (the API charcoal-olive), then warm bone and cool mist alternating. Workflows and API keep their colour. */ #capabilities .capmosaic>.cap-tile:nth-child(1):nth-child(1):nth-child(1):nth-child(1):nth-child(1){background:#1E2A38!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2){background:#ECECEA!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4):nth-child(4):nth-child(4){background:#4A4945!important;border-color:transparent!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4):nth-child(4) .stk.mdlp>h3{color:#F7F5F2!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4):nth-child(4) .stk.mdlp>.sub{color:rgba(247,245,242,.68)!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4):nth-child(4) .mdl-regions .figs .gl{color:rgba(247,245,242,.6)!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4):nth-child(4) .mdl-regions{color:rgba(247,245,242,.7)!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4):nth-child(4) .stk.mdlp .mb-ph{color:rgba(247,245,242,.5)!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4):nth-child(4) .stk.mdlp .mb-plus{border-color:rgba(247,245,242,.3)!important;color:rgba(247,245,242,.7)!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4):nth-child(4) .stk.mdlp .mb-mic{color:rgba(247,245,242,.7)!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4):nth-child(4) .stk.mdlp .mb-send{background:#F7F5F2!important;color:#4A4945!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4):nth-child(4) .stk.mdlp .mdl-bar,#capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4):nth-child(4) .stk.mdlp .mb-box{background:rgba(255,255,255,.08)!important;border-color:rgba(247,245,242,.14)!important} #capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5):nth-child(5):nth-child(5):nth-child(5){background:#D3D2CF!important} #capabilities .capmosaic>.cap-tile:nth-child(3):nth-child(3):nth-child(3):nth-child(3):nth-child(3){background:#D3E0EF!important} #capabilities .capmosaic>.cap-tile:nth-child(6):nth-child(6):nth-child(6):nth-child(6):nth-child(6){background:#1B1B1B!important} /* ink on the two light families */ #capabilities .capmosaic>.cap-tile:nth-child(3):nth-child(3):nth-child(3):nth-child(3) .cap-head h3, #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4) .stk.mdlp>h3, #capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5):nth-child(5):nth-child(5) .cap-head h3{color:#171A1E!important} #capabilities .capmosaic>.cap-tile:nth-child(3):nth-child(3):nth-child(3):nth-child(3) .cap-head p, #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4) .stk.mdlp>.sub, #capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5):nth-child(5):nth-child(5) .cap-head p{color:rgba(23,26,30,.68)!important} /* integrations on the warm graphite ground */ #capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5):nth-child(5):nth-child(5):nth-child(5) .cap-head h3{color:#F7F5F2!important} #capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5):nth-child(5):nth-child(5):nth-child(5) .cap-head p{color:rgba(247,245,242,.72)!important} #capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5):nth-child(5):nth-child(5):nth-child(5) .iw-ring{border-color:rgba(247,245,242,.16)!important} #capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5):nth-child(5):nth-child(5):nth-child(5) .iw-hub{background:#F7F5F2!important;box-shadow:0 6px 18px rgba(0,0,0,.28)!important} /* chat now sits on the dark ground of the API tile */ #capabilities .capmosaic>.cap-tile:nth-child(1):nth-child(1):nth-child(1) .stk.chatp>h3{color:#F7F5F2!important} #capabilities .capmosaic>.cap-tile:nth-child(1):nth-child(1):nth-child(1) .stk.chatp>.sub{color:rgba(247,245,242,.68)!important} /* agents tile on the dark slate ground */ #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2) .cap-head h3{color:#EAF2FA!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2) .cap-head p{color:rgba(213,229,245,.66)!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-t{color:#E3EDF7!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-ms{color:rgba(189,215,239,.52)!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-dot{background:#BDD7EF!important;color:#1F2B38!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-dot.pend{background:transparent!important;border-color:rgba(189,215,239,.55)!important;color:#BDD7EF!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-line{background:rgba(189,215,239,.34)!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-chip{background:rgba(189,215,239,.12)!important;color:#BDD7EF!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-find{background:rgba(226,168,120,.16)!important;color:#E9B984!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-find b{color:#F0C9A0!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-spin{border-color:rgba(189,215,239,.3)!important;border-top-color:#BDD7EF!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-shimmer{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:#E3EDF7!important;color:#E3EDF7!important;animation:none!important} /* one head position in every tile: same top inset, same left rail, same title-to-subline gap */ #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2), #capabilities .capmosaic>.cap-tile:nth-child(3):nth-child(3), #capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5){padding:clamp(30px,2.4vw,38px) clamp(26px,2.2vw,34px) 0!important} #capabilities .capmosaic>.cap-tile .cap-head{gap:0!important;margin-bottom:0!important;padding:0!important} #capabilities .capmosaic>.cap-tile .cap-head h3{margin:0 0 10px!important} #capabilities .capmosaic>.cap-tile .cap-head p{margin:0!important} #capabilities .capmosaic>.cap-tile:nth-child(1):nth-child(1) .stk.chatp{padding:clamp(30px,2.4vw,38px) clamp(26px,2.2vw,34px) 104px!important;zoom:1!important} #capabilities .capmosaic>.cap-tile:nth-child(1):nth-child(1) .stk.chatp>*{zoom:1!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp, #capabilities .capmosaic>.cap-tile:nth-child(6):nth-child(6) .stk.dk{padding:clamp(30px,2.4vw,38px) clamp(26px,2.2vw,34px) 0!important} #capabilities .capmosaic>.cap-tile:nth-child(1):nth-child(1) .stk.chatp>h3, #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp>h3, #capabilities .capmosaic>.cap-tile:nth-child(6):nth-child(6) .stk.dk>h3{margin:0 0 10px!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4) .stk.mdlp>.sub{margin:0!important} /* chat: air under the subline, and a tighter answer stack so nothing reaches the composer */ #capabilities .capmosaic>.cap-tile:nth-child(1):nth-child(1) .stk.chatp>.sub{margin:0 0 clamp(26px,2.4vw,38px)!important} #capabilities .capmosaic>.cap-tile:nth-child(1):nth-child(1) .stk.chatp .cp-q{margin-bottom:10px!important} #capabilities .capmosaic>.cap-tile:nth-child(1):nth-child(1) .stk.chatp .srcs{margin-top:8px!important} #capabilities .capmosaic>.cap-tile:nth-child(1):nth-child(1) .stk.chatp .cp-do{margin-top:10px!important} #capabilities .capmosaic>.cap-tile:nth-child(1):nth-child(1) .stk.chatp .cp-act{margin-top:12px!important} @media(max-width:1180px){ #capabilities .capmosaic>.cap-tile:nth-child(1):nth-child(1) .stk.chatp>.sub{margin:0 0 24px!important} #capabilities .capmosaic>.cap-tile:nth-child(1):nth-child(1) .stk.chatp .cp-ans{zoom:.88!important} } #capabilities .capmosaic>.cap-tile:nth-child(6):nth-child(6) .stk.dk>.sub{margin:0 0 clamp(20px,2vw,30px)!important} /* the tile rail runs to the screen edges: panels slide off-screen, no gutter. vw-free: the wrap drops its own padding, the headline and arrows keep the rail. */ #capabilities.capsx .wrap.wide{padding-left:0!important;padding-right:0!important;max-width:none!important} #capabilities .capmosaic{width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important;padding-right:0!important;box-sizing:border-box} @media(min-width:1025px){ #capabilities .wrap.wide .lhead,#capabilities .capnav{padding-left:max(20px,calc((100% - 1860px)/2 + 20px))!important;padding-right:max(20px,calc((100% - 1860px)/2 + 20px))!important;margin-left:0!important;margin-right:0!important;max-width:none!important} #capabilities .capmosaic{padding-left:max(20px,calc((100% - 1860px)/2 + 20px))!important;scroll-padding-left:max(20px,calc((100% - 1860px)/2 + 20px))!important} } @media(max-width:1024px){ #capabilities .wrap.wide .lhead,#capabilities .capnav{padding-left:18px!important;padding-right:18px!important} #capabilities .capmosaic{padding-left:18px!important;scroll-padding-left:18px!important;display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important} } /* === opener: night ground dissolving into the white proof band === */ /* the opener dissolves into the white proof band instead of cutting */ .opener::after{content:""!important;display:block!important;position:absolute!important;inset:auto 0 0 0!important;height:clamp(620px,64vw,1080px)!important;z-index:1!important;pointer-events:none!important;opacity:1!important;mix-blend-mode:normal!important;background-image:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.04) 12%,rgba(255,255,255,.10) 22%,rgba(255,255,255,.19) 32%,rgba(255,255,255,.30) 42%,rgba(255,255,255,.43) 52%,rgba(255,255,255,.57) 61%,rgba(255,255,255,.71) 70%,rgba(255,255,255,.84) 78%,rgba(255,255,255,.93) 85%,rgba(255,255,255,.99) 91%,#FFFFFF 95%,#FFFFFF 100%)!important;background-size:auto!important} .opener .mist,.opener .mist::after{mask-image:linear-gradient(180deg,#000 0%,#000 24%,rgba(0,0,0,.88) 36%,rgba(0,0,0,.66) 46%,rgba(0,0,0,.44) 56%,rgba(0,0,0,.26) 64%,rgba(0,0,0,.12) 72%,rgba(0,0,0,.04) 78%,transparent 84%)!important;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 24%,rgba(0,0,0,.88) 36%,rgba(0,0,0,.66) 46%,rgba(0,0,0,.44) 56%,rgba(0,0,0,.26) 64%,rgba(0,0,0,.12) 72%,rgba(0,0,0,.04) 78%,transparent 84%)!important} .opener{background:linear-gradient(180deg,#07080B 0%,#07080B 4%,#090C12 11%,#0E131C 19%,#161E2B 28%,#22303F 38%,#374859 48%,#53687C 58%,#76899C 68%,#9BABBB 78%,#BECAD6 86%,#DCE3EA 92%,#F3F5F7 96%,#FFFFFF 100%)!important} /* [hp-tail-ink] */ /* the tail band keeps its soft gradient, rebased on ink #1B1B1B */ #reach{background:linear-gradient(180deg,#1B1B1B 0%,#1D1D1D 55%,#1F1F1F 100%)!important;padding-bottom:0!important;margin-bottom:0!important} #waitlist{background:linear-gradient(180deg,#1F1F1F 0%,#1D1D1D 45%,#1B1B1B 100%)!important} #waitlist::after{background:radial-gradient(70rem 30rem at 50% 74%,rgba(255,255,255,.055),transparent 70%),linear-gradient(180deg,#1F1F1F 0%,#1D1D1D 45%,#1B1B1B 100%)!important} #waitlist::before{background:radial-gradient(64rem 26rem at 50% 52%,rgba(255,255,255,.05),transparent 70%)!important} footer{background:linear-gradient(180deg,#1B1B1B 0%,#191919 50%,#171717 100%)!important;margin-top:0!important} /* [hive-footer-ink] */ footer{background:#1B1B1B!important;background-image:none!important} /* [sticky-fix] */ /* clip instead of hidden: keeps the hero blur trimmed without creating a scroll container, so sticky panels work */ .herowrap,#top{overflow:clip!important} /* [solstack-mobile] */ @media(max-width:900px),(prefers-reduced-motion:reduce){ .ss-stack{height:auto!important} .ss-pin{position:static!important} .ss-stage{position:static!important;height:auto!important;overflow:visible!important;box-shadow:none!important;display:flex!important;flex-direction:column!important;gap:14px!important} .ss-panel{position:relative!important;top:auto!important;bottom:auto!important;height:auto!important;transform:none!important;border-radius:20px!important;box-shadow:none!important;overflow:visible!important} .ss-body{height:auto!important;grid-template-columns:1fr!important} .ss-vis{height:auto!important;justify-content:stretch!important} .ss-vis .solshot{height:auto!important;width:100%!important;max-height:none!important} } /* [solstack-polish] */ /* more air on the left; a tighter copy column so the shot always has room */ .ss-kick{padding-left:clamp(36px,3.6vw,60px)!important} .ss-body{padding-left:clamp(36px,3.6vw,60px)!important;grid-template-columns:minmax(240px,.34fr) minmax(0,.66fr)!important} @media(max-width:1100px){.ss-body{grid-template-columns:minmax(200px,.4fr) minmax(0,.6fr)!important}.ss-copy h3{font-size:clamp(24px,3vw,32px)!important}.ss-copy p{font-size:14.5px!important}} /* the open card's screen comes alive */ @keyframes ssRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes ssPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}} @keyframes ssPulse{0%,100%{box-shadow:0 0 0 0 rgba(62,155,108,.45)}60%{box-shadow:0 0 0 .6cqw rgba(62,155,108,0)}} @keyframes ssDraw{to{stroke-dashoffset:0}} @keyframes ssPan{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.06) translate(-1.5%,-1%)}} @keyframes ssChip{0%,22%{background:#1B1B1B;color:#fff}30%,100%{background:transparent;color:inherit}} .ss-panel .itg-r,.ss-panel .wfb-nd,.ss-panel .wfb-note,.ss-panel .agl-c,.ss-panel .brn-stats>span{opacity:0} .ss-panel.is-on .itg-r{animation:ssRise .55s cubic-bezier(.2,.7,.2,1) both} .ss-panel.is-on .itg-r:nth-child(1){animation-delay:.10s} .ss-panel.is-on .itg-r:nth-child(2){animation-delay:.18s} .ss-panel.is-on .itg-r:nth-child(3){animation-delay:.26s} .ss-panel.is-on .itg-r:nth-child(4){animation-delay:.34s} .ss-panel.is-on .itg-r:nth-child(5){animation-delay:.42s} .ss-panel.is-on .itg-r:nth-child(6){animation-delay:.50s} .ss-panel.is-on .itg-r:nth-child(7){animation-delay:.58s} .ss-panel.is-on .itg-r:nth-child(8){animation-delay:.66s} .ss-panel.is-on .itg-r .st i{animation:ssPulse 2.4s ease-out infinite} .ss-panel.is-on .itg-r:nth-child(2n) .st i{animation-delay:1.2s} .ss-panel.is-on .brn-stats>span{animation:ssRise .5s cubic-bezier(.2,.7,.2,1) both} .ss-panel.is-on .brn-stats>span:nth-child(1){animation-delay:.1s} .ss-panel.is-on .brn-stats>span:nth-child(2){animation-delay:.2s} .ss-panel.is-on .brn-stats>span:nth-child(3){animation-delay:.3s} .ss-panel.is-on .brn-stats>span:nth-child(4){animation-delay:.4s} .ss-panel.is-on .brn-stats>span:nth-child(5){animation-delay:.5s} .ss-panel .brn-gfx img{transform-origin:50% 50%} .ss-panel.is-on .brn-gfx img{animation:ssPan 14s ease-in-out infinite alternate} .ss-panel.is-on .brn-pulse .ln{animation-play-state:running} .ss-panel.is-on .wfb-nd{animation:ssPop .55s cubic-bezier(.2,.7,.2,1) both} .ss-panel.is-on .wfb-nd.d1{animation-delay:.15s} .ss-panel.is-on .wfb-nd.d2{animation-delay:.45s} .ss-panel.is-on .wfb-nd.d3{animation-delay:.75s} .ss-panel.is-on .wfb-note{animation:ssRise .5s both} .ss-panel.is-on .wfb-note.n1{animation-delay:.3s} .ss-panel.is-on .wfb-note.n2{animation-delay:.6s} .ss-panel.is-on .wfb-note.n3{animation-delay:.9s} .ss-panel .wfb-wire path{stroke-dasharray:60;stroke-dashoffset:60} .ss-panel.is-on .wfb-wire path{animation:ssDraw .9s ease-out both} .ss-panel.is-on .wfb-wire path:nth-of-type(1){animation-delay:.4s} .ss-panel.is-on .wfb-wire path:nth-of-type(2){animation-delay:.7s} .ss-panel.is-on .agl-c{animation:ssRise .55s cubic-bezier(.2,.7,.2,1) both} .ss-panel.is-on .agl-c:nth-child(1){animation-delay:.10s} .ss-panel.is-on .agl-c:nth-child(2){animation-delay:.18s} .ss-panel.is-on .agl-c:nth-child(3){animation-delay:.26s} .ss-panel.is-on .agl-c:nth-child(4){animation-delay:.34s} .ss-panel.is-on .agl-c:nth-child(5){animation-delay:.42s} .ss-panel.is-on .agl-c:nth-child(6){animation-delay:.50s} .ss-panel.is-on .agl-ch span:not(.on){animation:ssChip 6s linear infinite} .ss-panel.is-on .agl-ch span:nth-child(2){animation-delay:1s} .ss-panel.is-on .agl-ch span:nth-child(3){animation-delay:2s} .ss-panel.is-on .agl-ch span:nth-child(4){animation-delay:3s} .ss-panel.is-on .agl-ch span:nth-child(5){animation-delay:4s} .ss-panel.is-on .agl-ch span:nth-child(6){animation-delay:5s} @media(prefers-reduced-motion:reduce){.ss-panel .itg-r,.ss-panel .wfb-nd,.ss-panel .wfb-note,.ss-panel .agl-c,.ss-panel .brn-stats>span{opacity:1;animation:none!important}.ss-panel .wfb-wire path{stroke-dashoffset:0}.ss-panel.is-on .brn-gfx img,.ss-panel.is-on .itg-r .st i,.ss-panel.is-on .agl-ch span{animation:none!important}} /* [solstack-shot-size] */ /* every screen has the same frame: height-driven, 1.73:1, content never widens it */ .ss-vis .solshot{contain:inline-size;overflow:hidden} .ss-vis .solshot>*{min-width:0;max-width:100%} .ss-vis .solshot.agl .agl-g{grid-template-columns:repeat(3,minmax(0,1fr))!important} .ss-vis .solshot.agl .agl-ch{flex-wrap:wrap} .ss-vis .solshot.agl .agl-c{min-width:0} /* [solstack-shot-size-2] */ .ss-vis .solshot,.ss-vis .solshot.agl{display:block!important;flex:0 0 auto!important;height:100%!important;width:auto!important;aspect-ratio:1.73!important} .ss-vis .solshot.agl .agl-in{height:100%;box-sizing:border-box} /* [solstack-shot-inner] */ /* the screens are block boxes now, so their inner columns need a real height to lay out their canvases */ .ss-vis .solshot>.itg-in,.ss-vis .solshot>.brn-in,.ss-vis .solshot>.wfb-in,.ss-vis .solshot>.agl-in{height:100%!important;display:flex!important;flex-direction:column!important;box-sizing:border-box;min-height:0} .ss-vis .solshot .brn-cv,.ss-vis .solshot .wfb-cv{flex:1 1 auto!important;min-height:0!important;position:relative} .ss-vis .solshot .brn-gfx{position:absolute;inset:0;overflow:hidden} .ss-vis .solshot .brn-gfx img{width:100%;height:100%;object-fit:cover;object-position:50% 40%} .ss-vis .solshot .brn-pulse{position:absolute;inset:0;width:100%;height:100%} .ss-vis .solshot .itg-g{flex:1 1 auto;min-height:0;align-content:start} /* [solstack-wfb] */ /* the workflow canvas keeps its full three-node layout inside the deck, whatever the frame width */ .ss-vis .solshot.wfb .wfb-nd.d3{display:flex!important} .ss-vis .solshot.wfb .wfb-note{display:block!important} .ss-vis .solshot.wfb .wfb-nd.d1{left:2.4cqw!important;width:23cqw!important;top:40%!important} .ss-vis .solshot.wfb .wfb-nd.d2{left:34.5cqw!important;width:26cqw!important;top:40%!important} .ss-vis .solshot.wfb .wfb-nd.d3{right:2.4cqw!important;width:27cqw!important;top:26%!important} /* [cta-centre] */ /* Get started sits halfway between the map and the footer rule */ #reach{padding-bottom:0!important;margin-bottom:0!important} #waitlist{padding-top:0!important;margin:0!important} #waitlist .cta-band{padding:clamp(140px,14.5vw,210px) 0 clamp(100px,11.5vw,170px)!important;margin:0!important} footer{padding-top:clamp(36px,3.6vw,56px)!important} /* [footer-centre] */ /* the footer sits on the page column, centred */ footer .fwrap{max-width:1360px!important;margin-left:auto!important;margin-right:auto!important;padding-left:var(--gut)!important;padding-right:var(--gut)!important;box-sizing:border-box} footer .fgrid{max-width:none!important;margin-left:0!important;margin-right:0!important} /* [explore-left] */ #explore .lhead{text-align:left!important;margin-left:0!important;margin-right:auto!important} #explore .lhead .lsec,#explore .lhead .kicker{margin-left:0!important;text-align:left!important} /* [plus-bare] */ /* plus toggles: bare crosses, never circled */ .uc-card .chev,.sv-plus,.bw-plus,.st-plus,.ub-plus,.mc-plus,.cp-plus,.mb-plus,.capsx .mb-plus,.capsx .cp-plus{border:0!important;background:none!important;border-radius:0!important;box-shadow:none!important} .uc-card .chev{width:auto!important;height:auto!important;font-size:20px!important;line-height:1!important;font-weight:300;color:var(--ink)!important} .uc-card.open .chev{color:#4D86C2!important} .sv-plus::before,.sv-plus::after,.bw-plus::before,.bw-plus::after{width:14px!important;height:1.5px!important} .sv-plus{color:var(--ink)!important} .sv-tab.on .sv-plus,.sv-tab[aria-selected="true"] .sv-plus{background:none!important;color:#4D86C2!important} .st-plus{background:none!important} /* [why-gap] */ #why#why.manifesto-pin{height:auto!important;min-height:0!important;background:none!important;padding:0!important} #why#why .mstick{position:relative!important;top:auto!important;min-height:100vh!important;height:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:clamp(280px,32vh,460px) var(--gut)!important;box-sizing:border-box} #why#why .mbox>*{margin-top:0!important;margin-bottom:0!important} #why#why .mline{margin:0!important} #why#why .mlock{margin-top:clamp(14px,1.6vw,22px)!important;padding-top:0!important} #why#why .mbox{margin:0 auto!important;align-items:center!important} #why#why::after,#why#why::before{display:none!important} /* [mdl-solution-fix] */ #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4) .stk.mdlp .mdl-pop{width:82%!important;margin-top:clamp(14px,1.4vw,22px)!important;margin-bottom:clamp(16px,1.6vw,26px)!important;height:auto!important;max-height:none!important;overflow:visible!important;display:flex!important;flex-direction:column!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4) .stk.mdlp .mdl-pop .mp-r:nth-of-type(n+4){opacity:.55} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4) .stk.mdlp .mdl-pop .mp-r:nth-of-type(n+5){opacity:.3} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4) .stk.mdlp .mdl-pop .mp-r:nth-of-type(n+6){opacity:.14} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4) .stk.mdlp .mdl-pop .mp-r{padding-top:6px!important;padding-bottom:6px!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4) .stk.mdlp .mdl-pop .mp-ft{position:relative;margin-top:2px} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4) .stk.mdlp .mdl-pop{border-radius:14px!important;overflow:hidden!important;padding-bottom:4px!important} #capabilities .capmosaic>.cap-tile:nth-child(4):nth-child(4):nth-child(4) .stk.mdlp{padding-bottom:0!important;justify-content:flex-start!important} @media(min-width:901px){ .ss-stage{border-radius:10px!important} .ss-panel{border-radius:10px 10px 0 0!important} .ss-vis .solshot,.solshot{border-radius:8px!important} .ss-panel .ss-kick{border-radius:0!important} .ss-body{grid-template-columns:minmax(240px,.32fr) minmax(0,.68fr)!important;gap:clamp(20px,2.6vw,44px)!important} .ss-vis{max-width:none!important;height:100%!important;align-items:center!important} .ss-vis .solshot{width:100%!important;aspect-ratio:1.6!important;max-height:100%!important;height:auto!important;object-fit:cover} .ss-vis .solshot>*{position:absolute;inset:0} } /* [ss-sticky] */ @media(min-width:1025px){ #solution .ss-stack{height:auto!important} #solution .ss-pin{position:static!important} #solution .ss-stage{position:static!important;height:auto!important;overflow:visible!important;box-shadow:none!important;display:flex!important;flex-direction:column!important;gap:28px!important;border-radius:0!important;background:none!important} #solution .ss-panel{position:sticky!important;top:calc(84px + var(--ss-i) * var(--ss-kick,52px))!important;bottom:auto!important;height:calc(min(880px,100vh - 108px) - 4 * var(--ss-kick,52px))!important;transform:none!important;border-radius:12px!important;box-shadow:none!important;overflow:hidden!important} .ss-panel:last-child{margin-bottom:0} #solution .ss-stack::after{content:"";display:block;height:0} #solution .ss-panel.ss-panel{box-shadow:none!important;border:0!important;height:calc(min(880px,100vh - 108px) - 4 * var(--ss-kick,52px))!important;min-height:0!important;max-height:none!important} #solution .ss-stage.ss-stage{gap:12px!important} #solution .ss-panel.ss-panel{display:flex!important;flex-direction:column!important;border-radius:12px!important} #solution .ss-panel.ss-panel .ss-body{height:auto!important;flex:1 1 auto!important;min-height:0!important;display:grid!important;align-items:center!important} #solution .ss-panel.ss-panel .ss-vis{height:100%!important;min-height:0!important;display:flex!important;align-items:center!important;justify-content:flex-end!important} #solution .ss-panel.ss-panel .ss-vis .solshot{height:100%!important;width:auto!important;max-width:100%!important;max-height:100%!important;aspect-ratio:1.6!important;flex:0 0 auto!important;display:block!important} } /* [ss-stack-tail] */ @media(min-width:1025px){ /* keep every card pinned until the last one has settled, then scroll the whole stack away */ #solution .ss-stage::after{content:"";display:block;flex:0 0 auto; height:calc(min(880px,100vh - 108px) - 4 * var(--ss-kick,52px) + 120px)} #solution .ss-panel{box-shadow:0 -18px 44px rgba(20,30,45,.10)!important} #solution .ss-panel:first-child{box-shadow:none!important} } /* [why-ink] */ #why#why.manifesto-pin,#why#why .mstick{background:#0B0B0C!important} #why#why .mstick .mline .w{transition:color .45s ease-out!important} #why#why .mstick .mline .w.k:not(.on),#why#why .mstick .mline .w.g:not(.on){color:rgba(247,245,242,.28)!important} #why#why .mstick .mline .w.k.on,#why#why .mstick .mline .w.g.on,#why#why.static .mstick .mline .w{color:#F7F5F2!important} #why#why .mlock,#why#why .mlock .mmark{color:#F7F5F2!important} #why#why .mstick::after,#why#why .mstick::before{display:none!important} /* [ss-v5] */ .ss-copy .ss-lead{font-family:var(--f-display);font-weight:420;font-size:clamp(17px,1.35vw,21px);line-height:1.35;color:var(--ink);margin:0 0 12px} .ss-copy .ss-lead strong{font-weight:560} .solshot.dep,.solshot.loop,.solshot.cht{background:#F7F5F1;font-family:var(--f-ui)} .dep-in,.cht-in{position:absolute;left:0;top:0;width:640px;height:400px;font-size:12px;transform-origin:top left;transform:scale(var(--fit,1));box-sizing:border-box} .dep-in{padding:18px 20px;display:flex;flex-direction:column;gap:10px;font-size:10.5px;color:#3d3a34} .dep-tabs{display:flex;gap:6px;align-items:center} .dep-tabs i{font-style:normal;padding:5px 10px;border-radius:999px;font-size:10px;color:#6b665d} .dep-tabs i.on{background:#1B1B1B;color:#fff} .dep-tabs em{margin-left:auto;font-style:normal;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.14em;color:#a29d93} .dep-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;flex:1;min-height:0} .dep-col{background:#fff;border:1px solid rgba(27,27,27,.08);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;min-height:0;overflow:hidden} .dep-t{font-weight:600;font-size:11px;color:#1B1B1B;margin-bottom:2px} .dep-conn{display:grid;grid-template-columns:1fr 1fr;gap:4px} .dep-c{display:flex;align-items:center;gap:5px;font-size:9.5px;border:1px solid rgba(27,27,27,.08);border-radius:6px;padding:4px 6px} .dep-c i{width:8px;height:8px;border-radius:2px;flex:0 0 auto} .dep-c b{margin-left:auto;font-weight:500;color:#2E8B57;font-size:8.5px} .dep-graph{margin-top:auto;text-align:center} .dep-graph svg{width:100%;height:auto;display:block} .dep-graph span{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.1em;color:#8a857c;text-transform:uppercase} .dep-step{display:flex;align-items:center;gap:6px;border:1px solid rgba(27,27,27,.08);border-radius:7px;padding:5px 7px;font-size:9.5px} .dep-step i{width:18px;height:18px;border-radius:5px;border:1px solid rgba(27,27,27,.12);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:7.5px;font-weight:600;flex:0 0 auto} .dep-step b{font-weight:500;color:#1B1B1B} .dep-step span{margin-left:auto;font-size:8.5px;color:#3F6FA3;white-space:nowrap} .dep-note{margin-top:auto;font-size:9px;color:#8a857c} .dep-pat{border:1px solid rgba(27,27,27,.08);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:4px;font-size:9.5px;color:#6b665d} .dep-pat b{color:#1B1B1B;font-weight:600;font-size:10px} .dep-btns{display:flex;gap:5px;margin-top:4px} .dep-btns i{background:#1B1B1B;color:#fff;border-radius:999px;padding:4px 9px;font-style:normal;font-size:9px} .dep-btns em{border:1px solid rgba(27,27,27,.14);border-radius:999px;padding:4px 9px;font-style:normal;font-size:9px} .dep-done{margin-top:auto;display:flex;gap:7px;align-items:flex-start;background:#E4F1E9;border-radius:8px;padding:7px 8px;font-size:9px;color:#3d3a34} .dep-done i{font-style:normal;color:#2E8B57;font-weight:700} .dep-done b{display:block;color:#1B1B1B;font-weight:600;font-size:10px} .loop-in{position:absolute;inset:0} .loop-ring{position:absolute;left:8%;top:6%;width:84%;height:76%} .loop-node{position:absolute;width:26%;text-align:center} .loop-node b{display:block;font-family:var(--f-display);font-weight:500;font-size:clamp(13px,1.1vw,17px);color:#1B1B1B;margin-bottom:3px} .loop-node span{display:block;font-size:9.5px;line-height:1.4;color:#6b665d} .loop-node.n1{left:37%;top:3%} .loop-node.n2{right:1%;top:38%;text-align:left} .loop-node.n3{left:37%;top:74%} .loop-node.n4{left:1%;top:38%;text-align:right} .loop-edge{position:absolute;font-family:var(--f-mono);font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:#3F6FA3;max-width:20%;line-height:1.4} .loop-edge.e1{left:68%;top:15%} .loop-edge.e2{left:68%;top:66%} .loop-edge.e3{left:12%;top:66%;text-align:right} .loop-edge.e4{left:12%;top:15%;text-align:right} .loop-core{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#1B1B1B;color:#fff;display:flex;align-items:center;justify-content:center} .loop-core svg{width:22px;height:22px} .loop-foot{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:10.5px;color:#3d3a34} .cht-in{padding:18px 22px;display:flex;flex-direction:column;font-size:10.5px;color:#3d3a34} .cht-top{display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid rgba(27,27,27,.08)} .cht-proj{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#1B1B1B;font-size:11px} .cht-proj i{width:12px;height:10px;border-radius:2px;background:#2F6FD0;display:inline-block} .cht-people{margin-left:auto;display:inline-flex} .cht-people b{width:18px;height:18px;border-radius:50%;background:#DCE6F4;color:#2F5FA8;font-size:7px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid #fff;margin-left:-5px} .cht-share{border:1px solid rgba(27,27,27,.12);border-radius:999px;padding:3px 9px;font-size:9.5px} .cht-u{align-self:flex-end;background:#1B1B1B;color:#fff;border-radius:12px;padding:7px 11px;font-size:10.5px;max-width:70%} .cht-a{display:flex;gap:8px;align-items:flex-start} .cht-av{width:18px;height:18px;border-radius:50%;background:#1B1B1B;flex:0 0 auto} .cht-model{font-size:8.5px;color:#8a857c;margin-bottom:3px} .cht-a p{margin:0;font-size:10.5px;line-height:1.5;color:#1B1B1B} .cht-a p b{font-weight:600} .cht-src{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap} .cht-src span{border:1px solid rgba(27,27,27,.1);border-radius:6px;padding:2px 7px;font-size:8.5px;background:#fff} .cht-hand{display:flex;align-items:center;gap:6px;font-size:9.5px;color:#6b665d;background:#EEF4FB;border-radius:8px;padding:6px 9px} .cht-hand i{width:7px;height:7px;border-radius:50%;background:#3F6FA3} .cht-comp{margin-top:auto;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(27,27,27,.1);border-radius:12px;padding:9px 12px;font-size:10.5px;color:#a29d93} .cht-comp em{font-style:normal;color:#3F6FA3;background:#EEF4FB;border-radius:6px;padding:1px 6px;font-size:9px;margin-left:auto} .cht-comp b{width:20px;height:20px;border-radius:50%;background:#1B1B1B;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10px} .cht-in{gap:9px} .cht-msg{display:flex;gap:8px;align-items:flex-start} .cht-msg.me{flex-direction:row-reverse;text-align:right} .cht-msg.me .cht-name{justify-content:flex-end} .cht-who{width:20px;height:20px;border-radius:50%;font-size:7.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .cht-who.p1,.cht-people .p1{background:#DCE6F4;color:#2F5FA8} .cht-who.p2,.cht-people .p2{background:#F1E3C8;color:#7A5A15} .cht-who.p3,.cht-people .p3{background:#DDEBE2;color:#2E6B4A} .cht-name{display:flex;gap:6px;align-items:baseline;font-size:9.5px;font-weight:600;color:#1B1B1B;margin-bottom:3px} .cht-name em{font-style:normal;font-weight:400;color:#8a857c} .cht-msg .cht-u{align-self:auto;max-width:none;display:inline-block} .cht-h{background:#fff;border:1px solid rgba(27,27,27,.08);border-radius:12px;padding:7px 11px;font-size:10.5px;color:#1B1B1B;line-height:1.45;max-width:78%} .cht-a p{max-width:88%} /* [explore-smooth] */ #work::after{display:none!important} @media(min-width:1025px){ #explore .expan{transition:flex-grow .7s cubic-bezier(.4,0,.2,1)!important;will-change:flex-grow} #explore .ex-c{position:absolute;left:0;top:0;bottom:0;right:0;width:auto;min-width:0!important;padding:clamp(30px,3.1vw,48px) clamp(34px,3.6vw,56px)!important;opacity:0!important;transform:translateY(6px)!important;transition:opacity .3s ease,transform .3s ease!important;pointer-events:none} .ex-h{max-width:22ch} .ex-p{max-width:52ch!important;text-wrap:pretty!important} .vz-bars.wide,.vz-bars{max-width:min(560px,70%)!important} .vz-chips{max-width:min(720px,90%)!important} #explore .expan.on .ex-c{opacity:1!important;transform:none!important;transition:opacity .35s ease .6s,transform .35s ease .6s!important;pointer-events:auto} #explore .ex-c>*{white-space:normal} #explore .ex-h,#explore .ex-p{text-wrap:balance} #explore .ex-tab{transition:opacity .2s ease!important} #explore .expan.on .ex-tab{transition:opacity .15s ease!important} } /* [ss-copy-clean] */ .ss-copy h3{font-family:var(--f-display)!important;font-weight:420!important;letter-spacing:-.02em!important} .ss-copy p{font-family:var(--f-ui)!important;font-size:clamp(15px,1.15vw,18px)!important;line-height:1.55!important;color:var(--stone-6)!important;max-width:36ch;text-wrap:pretty} .ss-copy .ss-go{font-family:var(--f-ui)!important;font-weight:500!important;font-size:14.5px!important} .ss-kick span{font-family:var(--f-mono)!important} /* [hero-seam] */ .opener::after{background-image:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.02) 30%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.22) 66%,rgba(255,255,255,.5) 80%,rgba(255,255,255,.82) 92%,#FFFFFF 100%)!important} .opener,.opener::after{border-radius:0!important} .opener{border:0!important;box-shadow:none!important} .logomq{border:0!important;box-shadow:none!important;background:transparent!important} .logomq::before,.logomq::after{display:none!important} /* [hero-nodrop] */ .opener #work .dispw,.opener #work .disp,.opener #work .disp::before,.opener #work .disp::after,.opener #work .chrome{box-shadow:none!important;filter:none!important} .opener #work .disp-stand,.opener #work .dispw::after,.opener #work .dispw::before{display:none!important;box-shadow:none!important;background:none!important} .opener #work{margin-bottom:0!important} .opener{overflow:visible!important} .opener::after{overflow:hidden} /* [depx-css] */ .solshot.depx{position:relative;overflow:hidden;background:linear-gradient(170deg,#F1F3F8 0%,#ECEFF5 55%,#F3F4F8 100%)!important;isolation:isolate} .depx-orb{position:absolute;pointer-events:none;border-radius:50%} /* main disc: violet-blue with lilac core, heavier at the base, edge fully dissolved */ .depx-orb.o1{left:50%;top:56%;width:64%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle at 50% 44%,#BBCDE6 0%,#9DB7D6 30%,#6F94C4 56%,#4D86C2 72%,rgba(77,134,194,.55) 84%,rgba(77,134,194,0) 100%);filter:blur(30px);opacity:.95} .depx-orb.o1::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 80%,#3F6FA3 0%,rgba(63,111,163,.55) 30%,rgba(63,111,163,0) 62%);filter:blur(16px)} /* warm coral core at the top */ .depx-orb.o2{left:50%;top:30%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,#E9D6B8 0%,#EEDFC6 38%,rgba(238,223,198,0) 74%);filter:blur(26px);opacity:.95;overflow:visible;mix-blend-mode:normal} /* sand smear top-left, cyan smear top-right */ .depx-orb.o3{display:block;left:36%;top:12%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,#F0E4CF 0%,rgba(240,228,207,0) 72%);filter:blur(28px);opacity:.9} .depx-orb.o4{display:block;left:70%;top:16%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,#C9DDF0 0%,rgba(201,221,240,0) 72%);filter:blur(28px);opacity:.8} .depx-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(8px,1vw,14px);padding:20px;z-index:1} .depx-k{font-family:var(--f-mono);font-size:clamp(9px,.75vw,12px);letter-spacing:.24em;text-transform:uppercase;color:#3F6FA3;font-weight:600} .depx-in b{font-family:var(--f-display);font-weight:420;letter-spacing:-.025em;font-size:clamp(26px,3.1vw,50px);line-height:1.05;color:#1B1B1B} /* [brn-shift] */ .ss-vis .solshot .brn-gfx img{object-position:78% 40%!important} .ss-vis .solshot .brn-pulse{transform:translateX(-14%)} /* [arc-css] */ .ss-vis .solshot.arc{background:#FFFFFF!important;position:relative;overflow:hidden} .ss-vis .solshot.arc .arc-in{position:absolute;inset:0;padding:4.5% 5%;box-sizing:border-box;container-type:inline-size;display:flex} .ss-vis .solshot.arc .arc-grid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr 1fr;column-gap:4.4cqw} .ss-vis .solshot.arc .arc-t{display:grid;grid-template-rows:4.1cqw 2.2cqw auto auto;align-content:center;gap:0;min-width:0;padding:2.8cqw 0 2.4cqw;border-top:1px solid rgba(27,27,27,.13);opacity:0;animation:arcFade .6s ease forwards} .ss-vis .solshot.arc .arc-t:nth-child(-n+3){border-top:0!important} .ss-vis .solshot.arc .arc-t svg{width:6.6cqw;height:4.1cqw;display:block;overflow:visible;grid-row:1} .ss-vis .solshot.arc .arc-t::before{content:"";grid-row:2} .ss-vis .solshot.arc .arc-t b{grid-row:3;font-family:var(--f-display);font-weight:500;font-size:clamp(13px,1.85cqw,22px);letter-spacing:-.012em;line-height:1.15;color:var(--ink);margin:0;text-wrap:balance;display:block} .ss-vis .solshot.arc .arc-t span{grid-row:4;align-self:start;font-family:var(--f-ui);font-size:clamp(11px,1.3cqw,15px);line-height:1.45;color:var(--stone-6);margin-top:.7cqw;max-width:30ch;text-wrap:pretty} .ss-vis .solshot.arc .arc-t:nth-child(1){animation-delay:.05s} .ss-vis .solshot.arc .arc-t:nth-child(2){animation-delay:.13s} .ss-vis .solshot.arc .arc-t:nth-child(3){animation-delay:.21s} .ss-vis .solshot.arc .arc-t:nth-child(4){animation-delay:.29s} .ss-vis .solshot.arc .arc-t:nth-child(5){animation-delay:.37s} .ss-vis .solshot.arc .arc-t:nth-child(6){animation-delay:.45s} @keyframes arcFade{to{opacity:1}} @media(prefers-reduced-motion:reduce){.ss-vis .solshot.arc .arc-t{animation:none;opacity:1}} /* [indl-css] */ .ss-vis .solshot.indl{background:#FFFFFF!important;position:relative;overflow:hidden} .ss-vis .solshot.indl .indl-in{position:absolute;inset:0;padding:5.2% 5.5%;display:flex;flex-direction:column;box-sizing:border-box;container-type:inline-size;gap:4.5cqw} .ss-vis .solshot.indl .indl-top{display:flex;justify-content:space-between;align-items:baseline;gap:2cqw;flex:0 0 auto} .ss-vis .solshot.indl .indl-k,.ss-vis .solshot.indl .indl-f{font-family:var(--f-mono);font-size:1.45cqw;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-6);white-space:nowrap} .ss-vis .solshot.indl .indl-grid{flex:1 1 auto;min-height:0;display:grid;row-gap:0} .ss-vis .solshot.indl .indl-r{justify-content:space-between;gap:1cqw;border:0;border-radius:0;background:transparent;text-decoration:none;color:var(--ink);min-width:0;opacity:0;transform:translateY(8px);animation:indlIn .6s cubic-bezier(.2,.7,.2,1) forwards;transition:color .25s} .ss-vis .solshot.indl .indl-r:nth-last-child(-n+3){border-bottom:1px solid rgba(27,27,27,.14)} .ss-vis .solshot.indl .indl-r span{font-family:var(--f-display);letter-spacing:-.02em;line-height:1.08;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ss-vis .solshot.indl .indl-r i{font-style:normal;line-height:1;color:var(--stone-6);flex:0 0 auto} .ss-vis .solshot.indl .indl-r:hover{color:#4D86C2} .ss-vis .solshot.indl .indl-r:hover i{transform:translateX(.4cqw);color:var(--ink)} .ss-vis .solshot.indl .indl-r:nth-child(1){animation-delay:.05s} .ss-vis .solshot.indl .indl-r:nth-child(2){animation-delay:.11s} .ss-vis .solshot.indl .indl-r:nth-child(3){animation-delay:.17s} .ss-vis .solshot.indl .indl-r:nth-child(4){animation-delay:.23s} .ss-vis .solshot.indl .indl-r:nth-child(5){animation-delay:.29s} .ss-vis .solshot.indl .indl-r:nth-child(6){animation-delay:.35s} .ss-vis .solshot.indl .indl-r:nth-child(7){animation-delay:.41s} .ss-vis .solshot.indl .indl-r:nth-child(8){animation-delay:.47s} .ss-vis .solshot.indl .indl-r:nth-child(9){animation-delay:.53s} @keyframes indlIn{to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.ss-vis .solshot.indl .indl-r{animation:none;opacity:1;transform:none}} /* [depx-ring] */ .ss-vis .solshot.depx{background:#FFFFFF url("../assets/depx-ring-v11.png") center/cover no-repeat!important} .ss-vis .depx .depx-orb{display:none!important} .ss-vis .depx .depx-k{color:#3F6FA3;font-size:clamp(10px,.95vw,15px)!important;letter-spacing:.22em!important;text-align:center}/* [brn-exp-sm] */ .ss-vis .solshot .brn-exp{transform:scale(.8)!important;transform-origin:top left!important} /* [brn-dots] */ .ss-vis .solshot .brn-cv{background:#FAF8F5!important} .ss-vis .solshot .brn-gfx img{mix-blend-mode:normal;filter:none} /* [cht-fit-cq] */ /* scale the 640x460 chat/deployment mock purely from the frame width, no script dependency */ .ss-vis .solshot.cht,.ss-vis .solshot.dep{container-type:inline-size} .ss-vis .solshot.cht>.cht-in,.ss-vis .solshot.dep>.dep-in{transform:scale(calc(100cqw / 640))!important;transform-origin:top left!important} /* [cht-fit-fix] */ .ss-vis .solshot>.cht-in,.ss-vis .solshot>.dep-in{max-width:none!important;width:640px!important;height:460px!important} .solshot.cht .cht-in{gap:7px!important;padding:14px 20px!important} .solshot.cht .cht-a p{font-size:10.5px!important;line-height:1.45!important;max-width:88%} .solshot.cht .cht-h,.solshot.cht .cht-u{font-size:10.5px!important} .solshot.cht .cht-share,.solshot.cht .cht-src span,.solshot.cht .cht-name{white-space:nowrap} .solshot.cht .cht-comp{padding:7px 12px!important} /* [ss-ind-css] */ .ss-ind{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;max-width:none} .ss-ind li{grid-template-columns:auto 1fr;gap:10px;align-items:baseline;line-height:1.35} .ss-ind li b{font-weight:600;color:var(--ink);white-space:nowrap} .ss-ind li span{color:rgba(27,27,27,.6)} .ss-copy .ss-ind+.ss-go,.ss-copy .ss-go{margin-top:16px} @media(max-width:1024px){.ss-ind li{grid-template-columns:1fr;gap:0}.ss-ind li span{font-size:11.5px}.ss-ind{gap:6px}#solution .ss-panel:nth-child(5) .ss-copy p{font-size:14px!important} .ss-copy p:not(.ss-lead){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}} /* [indg-css] */ .ss-ind{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px 18px!important;margin:16px 0 0!important} .ss-ind li{display:block!important;font-family:var(--f-ui)!important;font-weight:600!important;font-size:clamp(13px,1vw,15.5px)!important;color:var(--ink)!important;white-space:nowrap;padding-left:14px;position:relative} .ss-ind li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:#3F6FA3} .solshot.indg{background:#FFFDFB;font-family:var(--f-ui)} .indg-in{position:absolute;inset:0;padding:5% 5.5%;display:flex;flex-direction:column;gap:4%} .indg-top{display:flex;justify-content:space-between;align-items:center;font-size:clamp(9px,.8vw,12px)} .indg-cr{font-family:var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#8a857c} .indg-cnt{color:#6b665d} .indg-cnt b{color:#1B1B1B;font-weight:600} .indg-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:4%;min-height:0} .indg-t{background:var(--t);border-radius:12px;padding:8% 9%;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:0;position:relative;overflow:hidden} .indg-t::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 80% 0%,rgba(255,255,255,.55),transparent 70%)} .indg-ic{position:absolute;top:10%;left:9%;width:26%;aspect-ratio:1;opacity:.75} .indg-ic svg{width:100%;height:100%} .indg-t b{font-weight:600;font-size:clamp(9.5px,.85vw,13px);color:#1B1B1B;line-height:1.2;position:relative;z-index:1} .indg-t small{font-size:clamp(8px,.68vw,10.5px);color:rgba(27,27,27,.6);position:relative;z-index:1} @media(max-width:1024px){.ss-ind{grid-template-columns:1fr 1fr!important}.ss-ind li{white-space:normal;font-size:13px!important}} /* [solstack-run] */ @media(min-width:1025px){ /* after the last card lands, the whole stack holds for one viewport and then scrolls away together */ #solution .ss-stage.ss-stage{padding-bottom:calc(100vh - 292px - 663px + 40px)!important} #solution .ss-stage.ss-stage::after{content:"";display:block;height:60vh;flex:0 0 auto} } /* [tiles-light-ink] */ /* tiles 1+2 now sit on light grounds: revert every light-on-dark text/chip treatment to ink */ #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2) .cap-head h3{color:var(--ink)!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2) .cap-head p{color:var(--stone-6)!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-step,#capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-step b,#capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-hd,#capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-hd b{color:var(--ink)!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-step small,#capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-step i,#capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-t{color:var(--stone-6)!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-chip{background:rgba(255,255,255,.72)!important;color:var(--ink)!important;border-color:rgba(27,27,27,.08)!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-find{background:rgba(201,145,47,.12)!important;color:#8A5A14!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-find b{color:#8A5A14!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-shimmer{-webkit-text-fill-color:var(--ink)!important;color:var(--ink)!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-rail{background:transparent!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-line,#capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-rail::before{background:rgba(27,27,27,.14)!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-dot,#capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-ck{background:rgba(255,255,255,.8)!important;border-color:rgba(27,27,27,.12)!important;color:var(--sky-ink,#3F6FA3)!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-av{color:var(--ink)!important;background:rgba(255,255,255,.75)!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2) .ag-ms{color:var(--stone-4)!important} #capabilities .capmosaic>.cap-tile:nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2):nth-child(2) .stk .fi{color:#fff!important} #capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5):nth-child(5):nth-child(5):nth-child(5):nth-child(5) h3,#capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5):nth-child(5):nth-child(5):nth-child(5):nth-child(5) .cap-head h3,#capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5):nth-child(5):nth-child(5):nth-child(5):nth-child(5) .go,#capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5):nth-child(5):nth-child(5):nth-child(5):nth-child(5) .cap-head>*{color:var(--ink)!important} #capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5):nth-child(5):nth-child(5):nth-child(5):nth-child(5) .sub,#capabilities .capmosaic>.cap-tile:nth-child(5):nth-child(5):nth-child(5):nth-child(5):nth-child(5):nth-child(5) .cap-head p{color:var(--stone-6)!important} /* [quote-display-font] */ #why .mline,#why .mline .w,#why .mq p{font-family:var(--f-display)!important;font-weight:400!important;letter-spacing:-.012em!important} /* [hero-cta-equal] */ .hero .cta-row{gap:20px!important} .hero .btn.primary,.hero .btn.secondary{height:44px!important;min-height:44px!important;box-sizing:border-box!important;padding:0 26px!important;font-size:14.5px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important} .hero .btn.secondary{border:1px solid rgba(255,255,255,.22)!important;background:rgba(255,255,255,.08)!important} /* [brn-clean] */ .ss-vis .solshot.brn .brn-gfx img{object-fit:contain!important} .ss-vis .solshot.brn{background:#FFFFFF!important} .ss-vis .solshot.brn .brn-pulse{display:none!important} .ss-vis .solshot.brn .brn-in{display:flex!important;flex-direction:column!important;padding:0!important} .ss-vis .solshot.brn .brn-cv{flex:1 1 auto!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;height:100%!important} .ss-vis .solshot.brn .brn-gfx{height:100%!important} .ss-vis .solshot.brn .brn-gfx img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:56% 46%!important;display:block!important} .solshot.brn .brn-gfx{overflow:hidden!important;background:#FFFFFF!important;display:block!important;line-height:0!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important} .solshot.brn .brn-cv{overflow:hidden!important;padding:0!important;background:#FFFFFF!important} .solshot.brn .brn-in{gap:0!important;height:100%!important} #solution .ss-panel .ss-kick i{display:none!important} /* [expan-radius] */ .exrail .expan,.expan{border-radius:14px!important} /* [capnav-off] */ .capnav{display:none!important} /* [sol-final-tweaks] */ .ss-panel.ss-dark .ss-copy h3,.ss-panel.ss-dark .ss-kick span,.ss-panel.ss-dark .ss-kick i{color:#F7F5F2!important} .ss-panel.ss-dark .ss-copy p{color:rgba(247,245,242,.78)!important} .ss-panel.ss-dark .ss-go{color:#F7F5F2!important;border-color:rgba(247,245,242,.32)!important} .ss-panel.ss-dark .ss-kick{border-color:rgba(247,245,242,.22)!important} .sechome{background:#D3D2CF!important} #why .mlock .mmark{width:34px!important;height:34px!important} .solshot.depx .depx-k{line-height:1.18} /* [exprog-off] */ .expan .ex-prog{display:none!important} /* [scale-up-v2] */ @media(min-width:1025px){ .hero h1{font-size:clamp(66px,9.2vw,152px)!important} .hero .sub,.hero p.reveal{font-size:clamp(17px,1.3vw,23px)!important} #work.wrap{max-width:calc(100vw - 8px)!important} #solution>.ss-stack>.ss-pin>.ss-head>.lhead{padding-left:0;padding-right:0} #solution>.ss-stack{max-width:none!important;width:100%!important;padding-left:24px!important;padding-right:24px!important;box-sizing:border-box} #solution .ss-head,#solution .ss-head .lhead{max-width:1520px!important;margin-left:auto!important;margin-right:auto!important;padding-left:var(--gut,clamp(18px,3vw,40px))!important;padding-right:var(--gut,clamp(18px,3vw,40px))!important;box-sizing:border-box} #solution .ss-stage{max-width:none!important;width:100%!important} } /* [stack-seam-fix] */ @media(min-width:1025px){#solution .ss-stage{gap:0!important;padding-bottom:0!important}} /* every panel's stuck bottom lands on the same line, so the whole stack releases as one block instead of the last card riding up over the ones still pinned */ /* identical height for every card; the margin-bottom cascade makes each one's sticky constraint end at the same scroll point, so the stack releases as a single block */ @media(min-width:1025px){#solution .ss-panel.ss-panel.ss-panel{height:calc(min(880px,100vh - 108px) - 4 * var(--ss-kick,52px))!important;margin-bottom:calc((4 - var(--ss-i)) * var(--ss-kick,52px))!important}} #solution .ss-panel{margin:0!important;box-shadow:none!important} /* the kick bar paints 2px beyond its own box so no sub-pixel seam shows the card beneath */ #solution .ss-panel .ss-kick{position:relative;z-index:2;background:var(--ss-bg)!important;box-shadow:0 -2px 0 0 var(--ss-bg),0 2px 0 0 var(--ss-bg)!important} #solution .ss-panel .ss-body{position:relative;z-index:1} @media(min-width:1025px){ /* the shot is sized by the available height, so it never gets clipped, and sits with equal air above and below */ #solution .ss-body{align-items:center!important;padding-top:clamp(22px,2.2vw,36px)!important;padding-bottom:clamp(22px,2.2vw,36px)!important} #solution .ss-vis{height:100%!important;min-height:0!important;display:flex!important;align-items:center!important;justify-content:flex-end!important} /* fit both ways: as wide as the column allows, but never taller than the body's inner height */ #solution .ss-vis .solshot{--ss-avail:calc(min(880px,100vh - 108px) - 5 * var(--ss-kick,52px) - 2 * clamp(22px,2.2vw,36px));width:min(100%,calc(var(--ss-avail) * 1.6))!important;height:auto!important;max-width:100%!important;max-height:none!important;aspect-ratio:1.6!important;flex:0 0 auto!important} #solution.solband,#solution .ss-stack,#solution .ss-pin,#solution .ss-head{background:#FFFFFF!important;background-image:none!important} } #trust.sechome#trust{background:#D3D2CF!important} #trust.sechome .seccard h3{color:#1B1B1B!important} #trust.sechome .seccard p{color:rgba(27,27,27,.7)!important} #trust.sechome .kicker{color:rgba(27,27,27,.6)!important} #trust.sechome .seccard{border-top-color:rgba(27,27,27,.18)!important} #trust.sechome .seclink{color:#1B1B1B!important;border-bottom-color:rgba(27,27,27,.34)!important} .solshot.depx .depx-in{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.4cqw,18px)} .solshot.depx .depx-mark{display:block;width:clamp(38px,5cqw,64px);height:clamp(38px,5cqw,64px);color:#3F6FA3;transform:translateY(-19px)} .solshot.depx .depx-mark svg{width:100%;height:100%;fill:currentColor} .solshot.depx .depx-k{white-space:nowrap;text-align:center} .solshot.depx .depx-in{justify-content:center;text-align:center} /* [sectable-v1] */ #trust.sechome#trust{background:#FFFFFF!important} #trust .secpanel{max-width:none} #trust .sechead{text-align:center;margin:0 auto clamp(46px,5vw,78px);max-width:900px} #trust .sechead .sec-kick{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(16,26,44,.55);margin-bottom:18px} #trust .sechead h2{margin:0;color:#101A2C!important;font-size:clamp(30px,3.4vw,54px);line-height:1.06;letter-spacing:-.02em} #trust .sectable{border-top:1px solid rgba(16,26,44,.14)} #trust .secr{display:grid;grid-template-columns:minmax(180px,.22fr) minmax(220px,.34fr) minmax(0,.44fr);gap:clamp(20px,3vw,56px);align-items:center;padding:clamp(28px,3.1vw,46px) 0;border-bottom:1px solid rgba(16,26,44,.14)} #trust .secr-l{display:flex;align-items:center;gap:14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(16,26,44,.6)} #trust .secr-ic{display:block;width:clamp(38px,3vw,48px);height:clamp(38px,3vw,48px);flex:0 0 auto} #trust .secr-ic svg{width:100%;height:100%;display:block} #trust .secr-t{font-family:var(--f-display);font-weight:500;font-size:clamp(19px,1.65vw,27px);letter-spacing:-.015em;line-height:1.14;color:#101A2C} #trust .secr-d{font-family:var(--f-ui);font-size:clamp(14px,1.05vw,16.5px);line-height:1.6;color:rgba(16,26,44,.72);text-wrap:pretty} #trust .seclink{display:inline-block;margin-top:clamp(34px,3.6vw,54px);color:#101A2C!important;border-bottom:0!important} @media(max-width:900px){#trust .secr{grid-template-columns:1fr;gap:10px;padding:24px 0}#trust .sechead{text-align:left}} /* solution cards: identical padding on every side of the shot */ @media(min-width:1025px){ #solution .ss-body{padding:clamp(26px,2.5vw,40px) clamp(26px,2.5vw,40px) clamp(26px,2.5vw,40px) clamp(36px,3.6vw,60px)!important} #solution .ss-vis .solshot{--ss-avail:calc(min(880px,100vh - 108px) - 5 * var(--ss-kick,52px) - 2 * clamp(26px,2.5vw,40px))} } /* [work-taller] */ @media(min-width:701px){#work #hwApp,.opener #work #hwApp{height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:1.72/1!important}} @media(min-width:701px){#work.wrap{margin-top:-16px!important}} @media(min-width:701px){#work .chrome,#work .dispw,#work .disp{height:auto!important;max-height:none!important}} /* [sol-geom-final] */ @media(min-width:1025px){ #solution .ss-stage{gap:12px!important} #solution .ss-panel{height:calc(min(880px,100vh - 108px) - 5 * var(--ss-kick,52px))!important} #solution .ss-body{padding:44px 70px 44px clamp(36px,3.6vw,60px)!important;align-items:center!important} #trust.sechome{padding-top:clamp(24px,2.4vw,40px)!important;margin-top:60px!important} #solution .ss-stage{gap:12px!important} #solution .ss-panel.ss-panel.ss-panel{margin-bottom:45px!important} #solution .ss-stack{padding-bottom:0!important} #solution .ss-stack::after{display:none!important} #solution{padding-bottom:0!important;margin-bottom:0!important} #solution .ss-vis{height:100%!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;max-width:none!important;overflow:visible!important} #solution .ss-vis .solshot{height:100%!important;width:auto!important;max-width:100%!important;max-height:100%!important;aspect-ratio:1.6!important;flex:0 0 auto!important} } /* [sol-shot-inset] */ @media(min-width:1025px){ #solution .ss-panel.ss-panel .ss-vis{position:relative!important;z-index:1!important;margin-top:calc(-0.5 * var(--ss-kick,52px))!important;margin-bottom:calc(0.5 * var(--ss-kick,52px))!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;max-width:none!important} #solution .ss-panel.ss-panel .ss-vis .solshot{height:100%!important;width:auto!important;max-width:100%!important;max-height:none!important;aspect-ratio:1.6!important;flex:0 0 auto!important} } /* [nd-three] */ .ndpanel .ndcol.two,.ndpanel .ndcol{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:660px!important;gap:4px 28px!important} .ndd:has(>.ndl[href*="Industries"]) .ndpanel .ndcol{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:960px!important;gap:4px 24px!important} .ndd:has(>.ndl[href*="Industries"]) .ndwrap{grid-template-columns:1fr 320px!important} /* [footer-fluid] */ @media(min-width:1025px){ body footer .fwrap{max-width:min(2200px,calc(100vw - 2 * clamp(28px,4vw,120px)))!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important} body footer .ftop{max-width:none!important} body footer .fgrid{grid-template-columns:minmax(260px,1.1fr) minmax(0,3fr)!important;gap:clamp(40px,6vw,140px)!important} } /* [work-fluid-final] */ @media(min-width:721px){ #work.wrap{max-width:min(1660px,calc(100vw - 2 * clamp(24px,3vw,72px)))!important;padding-left:0!important;padding-right:0!important} #work .dispw,#work .disp{max-width:none!important} #work .dispw{width:100%!important} #work .disp{transform-origin:top center!important;margin:0 auto!important} #work .dispw{display:flex!important;justify-content:center!important} #work{margin-left:auto!important;margin-right:auto!important} } /* [logos-gap] */ @media(min-width:721px){.opener .logostrip{margin-top:28px!important}} /* [capdots-off] */ #capabilities .capdots,#capabilities .capnav{display:none!important} #capabilities .hslide-row{margin-top:clamp(22px,2.2vw,32px);padding-right:var(--railpad,var(--gut))} /* [cap-bigger] */ @media(min-width:1025px){ #capabilities .capmosaic>.cap-tile{flex:0 0 min(33%,560px)!important;height:auto!important;min-height:clamp(560px,42vw,660px)!important} } /* [indl-live] */ /* the index reads itself: one cell is live at a time, hover takes over */ .ss-vis .solshot.indl .indl-r{position:relative;overflow:hidden;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;padding-top:.6cqw!important} .ss-vis .solshot.indl .indl-r span{position:relative;z-index:1;transition:transform .32s cubic-bezier(.2,.7,.2,1),color .28s} .ss-vis .solshot.indl .indl-r i{right:.2cqw;top:50%} .ss-vis .solshot.indl .indl-r u{text-decoration:none;font-family:var(--f-mono);text-transform:uppercase;opacity:0;transform:translateY(.5cqw);transition:opacity .3s,transform .34s cubic-bezier(.2,.7,.2,1)} .ss-vis .solshot.indl .indl-r::before{left:0;right:0;top:0;transform-origin:left} .ss-vis .solshot.indl .indl-r::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#2F5F96;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)} .ss-vis .solshot.indl .indl-r:nth-last-child(-n+3)::after{opacity:1} .ss-vis .solshot.indl .indl-r:not(:nth-last-child(-n+3))::after{opacity:0} /* the cycling read: caption + rule + name lift, 1.5s per cell */ @keyframes indlRead{0%,4%{--on:0}8%,14%{--on:1}18%,100%{--on:0}} .ss-vis .solshot.indl .indl-grid:hover .indl-r{animation-play-state:paused} .ss-vis .solshot.indl .indl-r.live u,.ss-vis .solshot.indl .indl-r:hover u{opacity:1;transform:none} .ss-vis .solshot.indl .indl-r.live::before,.ss-vis .solshot.indl .indl-r:hover::before,.ss-vis .solshot.indl .indl-r.live::after,.ss-vis .solshot.indl .indl-r:hover::after{transform:scaleX(1)} @media(prefers-reduced-motion:reduce){.ss-vis .solshot.indl .indl-r.live span{transform:none}} /* [sec-align] */ /* three columns on one baseline: mono label · heading · one-line description */ @media(min-width:701px){ #trust .sectable .secr{grid-template-columns:minmax(200px,.26fr) minmax(0,.36fr) minmax(0,.38fr)!important;gap:clamp(28px,3.4vw,72px)!important;align-items:start!important;padding:clamp(26px,2.8vw,42px) 0!important} } #trust .sectable .secr-l{gap:16px!important;align-items:center!important} #trust .sectable .secr-l .secr-lx{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(16,26,44,.58);white-space:nowrap} #trust .sectable .secr-t{font-size:clamp(19px,1.6vw,26px)!important;line-height:1.15!important;padding-left:clamp(8px,1.6vw,34px)} #trust .sectable .secr-ic{width:clamp(52px,4.2vw,68px)!important;height:clamp(52px,4.2vw,68px)!important} #trust .sectable .secr-d{color:rgba(16,26,44,.7)!important;margin:0!important;padding-top:3px} /* [indl-editorial] */ /* editorial index: numbered two-column register, generous rows, live caption */ .ss-vis .solshot.indl .indl-in{padding:5.2% 5.6% 4.6%!important;gap:3.4cqw!important} .ss-vis .solshot.indl .indl-top{border-bottom:1px solid rgba(27,27,27,.2);padding-bottom:1.9cqw} .ss-vis .solshot.indl .indl-k{font-size:1.75cqw!important;letter-spacing:.22em!important;color:rgba(27,27,27,.62)!important} .ss-vis .solshot.indl .indl-f{font-size:1.6cqw!important;letter-spacing:.16em!important;color:rgba(27,27,27,.45)!important} .ss-vis .solshot.indl .indl-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(5,minmax(0,1fr))!important;grid-auto-flow:column!important;column-gap:7cqw!important;counter-reset:ind} .ss-vis .solshot.indl .indl-r{counter-increment:ind;border-top:0!important;border-bottom:1px solid rgba(27,27,27,.11)!important;display:grid!important;grid-template-columns:3.6cqw 1fr auto!important;align-items:center!important;padding:0!important;column-gap:1.2cqw} .ss-vis .solshot.indl .indl-r:last-child{border-bottom:0!important} .ss-vis .solshot.indl .indl-r::after{display:none!important} .ss-vis .solshot.indl .indl-r::before{content:counter(ind,decimal-leading-zero);position:static!important;height:auto!important;background:none!important;transform:none!important;font-family:var(--f-mono);font-size:1.5cqw;letter-spacing:.06em;color:rgba(27,27,27,.34);transition:color .24s} .ss-vis .solshot.indl .indl-r span{grid-column:2;font-size:2.75cqw!important;font-weight:430!important;transform:none!important} .ss-vis .solshot.indl .indl-r i{position:static!important;grid-column:3;transform:none!important;font-size:2cqw!important;opacity:.42!important;transition:opacity .22s,transform .3s cubic-bezier(.2,.7,.2,1)} .ss-vis .solshot.indl .indl-r u{position:absolute;left:4.8cqw;bottom:.55cqw;font-size:1.5cqw!important;letter-spacing:.14em!important;color:rgba(27,27,27,.62)!important} .ss-vis .solshot.indl .indl-r{position:relative;padding-top:.4cqw!important} .ss-vis .solshot.indl .indl-r.live::before,.ss-vis .solshot.indl .indl-r:hover::before{color:#2F5F96} .ss-vis .solshot.indl .indl-r.live span,.ss-vis .solshot.indl .indl-r:hover span{transform:translateY(-.7cqw)!important;color:#2F5F96!important} .ss-vis .solshot.indl .indl-r.live i,.ss-vis .solshot.indl .indl-r:hover i{opacity:1!important;transform:translateX(.35cqw)!important;color:#2F5F96} /* [solstack-fix] */ @media(min-width:901px){ .ss-stack{height:calc((var(--ss-n,5) + .75) * 78vh)!important} .ss-pin{position:sticky!important} .ss-stage{position:relative!important;overflow:visible!important;height:var(--ss-h)!important} .ss-panel{position:absolute!important;left:0!important;right:0!important; top:calc(var(--ss-i) * var(--ss-kick,52px))!important;bottom:auto!important; height:calc(var(--ss-h) - (var(--ss-n,5) - 1) * var(--ss-kick,52px))!important; transform:translateY(var(--ss-y,0px))!important;will-change:transform} .ss-panel:first-child{box-shadow:none!important} .ss-panel+.ss-panel{box-shadow:0 -18px 40px rgba(20,30,45,.10)!important} } /* [secgl-light-css] */ /* standards tiles, light: hairline rule, ink type, on the page canvas */ .section.sechome{background:#FFFFFF!important} .sechome .secgl-head{text-align:left!important;margin:0 0 clamp(48px,5.4vw,84px)!important;max-width:none;display:block} .sechome .secgl-head .lsec{margin:12px 0 0!important;max-width:24ch!important;text-align:left!important} .sechome .secgl-head .kicker{text-align:left!important} main .sechome .secgl-sub{font-family:var(--f-ui)!important;font-size:17px!important;line-height:1.6!important;color:var(--stone-6)!important;margin:clamp(18px,1.8vw,26px) 0 0!important;max-width:52ch;text-align:left!important} .secgl-light{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(32px,3.6vw,56px) clamp(24px,2.6vw,40px)} .secgl-light .secgl-c{position:relative;display:flex;flex-direction:column;background:none;border:0;border-radius:0;padding:clamp(24px,2.4vw,36px) 0 clamp(20px,2vw,30px) clamp(24px,2.4vw,36px);min-height:clamp(230px,21vw,290px)} .secgl-light .secgl-c::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(27,27,27,.28),rgba(27,27,27,.07))} .secgl-light .secgl-c::after{content:"";position:absolute;left:1px;top:0;bottom:0;width:120px;background:linear-gradient(90deg,rgba(27,27,27,.028),transparent);pointer-events:none} .secgl-light .secgl-c svg{width:28px;height:28px;color:var(--ink);flex:0 0 auto} main .secgl-light .secgl-c h3{font-family:var(--f-display)!important;font-weight:400!important;font-size:clamp(19px,1.5vw,23px)!important;letter-spacing:-.015em;line-height:1.2;color:var(--ink)!important;margin:auto 0 clamp(14px,1.4vw,20px)!important} main .secgl-light .secgl-c p{font-family:var(--f-ui)!important;font-size:15px!important;line-height:1.55!important;color:rgba(27,27,27,.62)!important;margin:0!important;max-width:36ch} .sechome .seclink{display:block;text-align:left;margin-top:clamp(40px,4.4vw,68px);font-family:var(--f-ui);font-size:14.5px;color:var(--ink)} @media(max-width:1024px){.secgl-light{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.secgl-light{grid-template-columns:1fr;gap:28px}.secgl-light .secgl-c{min-height:0}.secgl-light .secgl-c h3{margin-top:36px!important}} /* [sg6-css] */ /* solution: six hairline tiles on white */ .section.solband.solgrid6{background:#FFFFFF!important;padding:clamp(84px,8.6vw,136px) 0!important} .sg6-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end;margin:0 0 clamp(48px,5.4vw,84px)} .sg6-head .lsec{margin:clamp(14px,1.4vw,20px) 0 0!important;max-width:24ch!important;text-align:left!important} main .sg6-head .sg6-sub{font-family:var(--f-ui)!important;font-size:17px!important;line-height:1.6!important;color:var(--stone-6)!important;margin:0!important;max-width:46ch} .sg6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(34px,3.8vw,60px) clamp(24px,2.6vw,40px)} .sg6-c{position:relative;display:flex;flex-direction:column;padding:clamp(24px,2.4vw,36px) 0 clamp(20px,2vw,30px) clamp(24px,2.4vw,36px);min-height:clamp(250px,23vw,320px)} .sg6-c::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(27,27,27,.28),rgba(27,27,27,.07))} .sg6-c::after{content:"";position:absolute;left:1px;top:0;bottom:0;width:120px;background:linear-gradient(90deg,rgba(27,27,27,.028),transparent);pointer-events:none} .sg6-c svg{width:28px;height:28px;color:var(--ink);flex:0 0 auto} main .sg6-c h3{font-family:var(--f-display)!important;font-weight:400!important;font-size:clamp(19px,1.5vw,23px)!important;letter-spacing:-.015em;line-height:1.2;color:var(--ink)!important;margin:auto 0 clamp(14px,1.4vw,20px)!important} main .sg6-c p{font-family:var(--f-ui)!important;font-size:15px!important;line-height:1.55!important;color:rgba(27,27,27,.62)!important;margin:0!important;max-width:36ch} .sg6-go{display:inline-block;margin-top:clamp(40px,4.4vw,68px);font-family:var(--f-ui);font-size:14.5px;color:var(--ink)} @media(max-width:1024px){.sg6{grid-template-columns:repeat(2,minmax(0,1fr))}.sg6-head{grid-template-columns:1fr;align-items:start}} @media(max-width:640px){.sg6{grid-template-columns:1fr;gap:28px}.sg6-c{min-height:0}.sg6-c h3{margin-top:36px!important}}