/* Kinett, V3: brought in line with the MPower4 pages. Loaded after the page's own styles.
   Two typefaces (Syne for headings, Manrope for everything else), plain white headings, gold labels,
   the MPower4 buttons, and boxes opened up into columns with a thin shiny line on top in the Kinett
   blue running into gold. The moving background, the top of the home page (intro, hero and its
   particle K) and the live demo widgets keep their own look. */
:root{
  --display:"Syne","Helvetica Neue",Arial,sans-serif;
  --body:"Manrope","Helvetica Neue",Arial,sans-serif;
  --mono:"Manrope","Helvetica Neue",Arial,sans-serif;
  --diagram:"Manrope","Helvetica Neue",Arial,sans-serif;--diagram-mono:"Manrope","Helvetica Neue",Arial,sans-serif;
  --fg-2:#AEB6C6;
  --gold:#E2C48D;--kb1:#1238C9;--kb2:#5B82FF;--kb3:#9DB4FF;
  --kline:linear-gradient(90deg,#1238C9,#5B82FF 45%,#C9B27E 80%,#E2C48D);
  --hair:rgba(220,230,255,.13)
}
/* the top of the home page, the intro and the live demo keep the fonts they were drawn with */
.hero.hx,#intro,.console{--display:"Archivo","Helvetica Neue",Arial,sans-serif;--body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;--diagram:"Geist","Helvetica Neue",Arial,sans-serif;--diagram-mono:"Geist Mono",ui-monospace,Menlo,monospace;--fg-2:#7894F0}
body{font-weight:400}

/* ---------- type ---------- */
main section:not(.hero) :is(h1,h2,h3,h4),footer :is(h2,h3,h4){font-family:var(--display)!important;font-stretch:100%!important;letter-spacing:-.01em!important}
main section:not(.hero) :is(h1,h2){font-weight:700!important;line-height:1.05!important}
main .page-hero h1{font-size:clamp(30px,4.2vw,62px)!important;max-width:20ch}
main .page-hero.split h1{font-size:clamp(30px,3.7vw,56px)!important}
main section:not(.hero):not(.page-hero):not(.statement) h2{font-size:clamp(27px,3.5vw,52px)!important}
main section:not(.hero) h3,main section:not(.hero) .bx h3{font-weight:700!important;font-size:clamp(17px,1.45vw,21px)!important;line-height:1.25!important;color:#fff}
/* headings in plain white, not chrome */
main section:not(.hero) .chrome{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:#fff!important;color:#fff!important;animation:none!important;text-shadow:none!important}
/* text under headings and in the columns: one calm grey */
main section:not(.hero) :is(.lede,.sec-head .lede,.page-hero .lede,.story,.fq-foot,.pin-desc p){font-family:var(--body)!important;font-size:clamp(15.5px,1.2vw,17.5px)!important;font-weight:400!important;line-height:1.75!important;color:var(--fg-2)!important;text-shadow:none!important}
main section:not(.hero) :is(.pillar,.bx,.moment,.feat,.dep,.case,.cmp,.side-box,.contact-tile,.dom,.stage,.glance) :is(p,span:not(.b),li){font-size:15px;line-height:1.7;color:var(--fg-2)!important}
/* small labels: Manrope in spaced capitals; the label itself in gold */
.eyebrow,.gl-lab,.moment .area,.moment .when,.dep small,.feat small,.case small{font-family:var(--body)!important;font-weight:600!important;font-size:11px!important;letter-spacing:.2em!important;text-transform:uppercase}
.eyebrow{color:#79839A!important;gap:12px!important}
.eyebrow .b{color:var(--gold)!important}
.sec-head .eyebrow::before,.page-hero .eyebrow::before{content:""!important;display:block!important;width:28px;height:1px;background:var(--gold);opacity:.55}
.side-c .sec-head .eyebrow::after{content:"";display:block;width:28px;height:1px;background:var(--gold);opacity:.55}

/* ---------- buttons, as on the MPower4 pages ---------- */
main .btn,footer .btn{border-radius:999px!important;font-family:var(--body)!important;font-weight:600!important;font-size:11px!important;letter-spacing:.14em!important;text-transform:uppercase!important;padding:13px 22px!important;line-height:1.2!important;border:0!important}
main .btn.primary,footer .btn.primary{background:linear-gradient(100deg,#1238C9,#3D6AF0 60%,#5B82FF)!important;color:#fff!important;box-shadow:0 12px 30px -12px rgba(70,120,255,.55)!important}
main .btn.ghost,footer .btn.ghost{background:rgba(255,255,255,.035)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)!important;color:#fff!important}
main .btn.ghost:hover{box-shadow:inset 0 0 0 1px rgba(226,196,141,.6)!important}
main .btn:hover{transform:translateY(-2px)}
main .hero .btn{border-radius:var(--r-btn)!important}

/* ---------- boxes become open columns ---------- */
body [data-view] :is(.pillar,.bx,.moment,.feat,.dep,.case,.cmp,.side-box,.contact-tile,.dom,.stage,.glance,.cta-box,.kv3.kv3.kv3){position:relative;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:26px 0 4px!important;overflow:visible!important}
body [data-view] :is(.pillar,.bx,.moment,.feat,.dep,.case,.cmp,.side-box,.contact-tile,.dom,.stage,.glance,.kv3.kv3.kv3)::after{content:""!important;display:block!important;position:absolute!important;inset:0 0 auto 0!important;height:1px!important;width:auto!important;background:var(--hair)!important;border:0!important;opacity:1!important;transform:none!important;animation:none!important}
body [data-view] :is(.pillar,.bx,.moment,.feat,.dep,.case,.cmp,.side-box,.contact-tile,.dom,.stage,.glance,.kv3.kv3.kv3)::before{content:""!important;display:block!important;position:absolute!important;inset:0 auto auto 0!important;width:72px!important;height:1.5px!important;z-index:1;border:0!important;border-radius:2px;opacity:1!important;transform:none!important;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.95) 50%,transparent 70%) -150% 0/250% 100% no-repeat,var(--kline)!important;box-shadow:0 0 10px rgba(91,130,255,.45)!important;animation:ksheen 4.5s ease-in-out infinite!important}
@keyframes ksheen{0%,35%{background-position:-150% 0,0 0}75%,100%{background-position:250% 0,0 0}}
main :is(.pillar,.bx,.moment,.feat,.dep,.case,.cmp,.side-box,.contact-tile,.dom,.stage):hover{transform:none!important;background:none!important}
/* the moment cards in Finance and Healthcare dropped their coloured top border */
main .moment{border-top:0!important}
/* the platform's deployment option that the diagram is showing gets a brighter line */
main .dep.on::after{background:linear-gradient(90deg,rgba(157,180,255,.6),var(--hair))!important}
/* "at a glance": an open list beside the opening words, under its particle picture */
main .glance{padding-top:18px!important}
main .glance .gl-row{border-color:var(--hair)!important;background:none!important}
main .glance .gl-row b{font-family:var(--display)!important;font-weight:700;color:#fff}
/* the closing panel: no box, the words centred under a particle picture */
main .close .cta-box{width:100%;max-width:none!important;margin:0 auto!important;grid-column:1/-1;text-align:center;display:flex;flex-direction:column;align-items:center;padding:0!important}
main .close .cta-box::before,main .close .cta-box::after{display:none!important}
main .close .cta-box h2{font-size:clamp(28px,4.1vw,62px)!important;max-width:16ch;margin-inline:auto}
main .close .cta-box p{max-width:60ch;margin-inline:auto;font-size:clamp(16px,1.3vw,19px);line-height:1.7;color:var(--fg-2)}
main .close .ctas{justify-content:center}
main .vchips span{background:none!important;border:0!important;box-shadow:inset 0 1px 0 var(--hair)!important;border-radius:0!important}

/* ---------- particle pictures ---------- */
.kp{display:block;width:100%;height:100%}
.kp-wrap{width:min(320px,70vw);height:clamp(150px,24vh,230px);margin:0 auto 20px;pointer-events:auto}
.page-hero .kp-wrap{margin-bottom:10px}
.page-hero.split .kp-wrap{width:100%;height:clamp(170px,26vh,250px);margin:0 0 6px}
.page-hero:not(.split) .kp-wrap{height:clamp(130px,20vh,200px)}
.close .kp-wrap{height:clamp(150px,24vh,230px);margin-bottom:28px}
@media (max-width:900px){.page-hero.split .kp-wrap{height:170px}}
@media (prefers-reduced-motion:reduce){body [data-view] :is(.pillar,.bx,.moment,.feat,.dep,.case,.cmp,.side-box,.contact-tile,.dom,.stage,.glance,.kv3.kv3.kv3)::before{animation:none!important}}
.kp-side{display:flex;flex-direction:column;min-width:0}
/* the close fills the width, so its words sit in the middle under the picture */
main .close .wrap{display:block!important}
main .close .cta-box .kp-wrap{width:min(420px,80vw)}
/* the industry columns: no cursor glow inside, and plain icons instead of icon tiles */
body [data-view] :is(.pillar,.bx,.moment,.feat,.dep,.case,.cmp,.side-box,.contact-tile,.dom,.stage,.glance,.kv3.kv3.kv3) .hg{display:none!important}
body [data-view] .dom .dh-ic{background:none!important;border:0!important;box-shadow:none!important;width:auto!important;height:auto!important}
body [data-view] .dom .dh-ic svg{width:24px;height:24px;stroke:#9DB4FF}
body [data-view] .dom .who{font-family:var(--body)!important;font-weight:600;font-size:10.5px!important;letter-spacing:.12em!important;text-transform:uppercase;color:var(--gold)!important}
body [data-view] .dom .go{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--kb3)}

/* ================= the top: header, opening screen and intro, as on the MPower4 pages ================= */
/* fonts here too now */
.hero.hx,#intro{--display:"Syne","Helvetica Neue",Arial,sans-serif;--body:"Manrope","Helvetica Neue",Arial,sans-serif;--mono:"Manrope","Helvetica Neue",Arial,sans-serif;--fg-2:#AEB6C6}

/* header: no bar, the mark and name on the left with the tagline under it, plain capitalised links */
body .nav .bar{background:none!important;background-image:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body .nav .bar::before,body .nav .bar::after{display:none!important}
body .nav::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 40px);pointer-events:none;background:linear-gradient(180deg,rgba(3,5,12,.88),rgba(3,5,12,.55) 60%,rgba(3,5,12,0));opacity:0;transition:opacity .4s}
body .nav.scrolled::before{opacity:1}
body .nav .brand{gap:12px!important;color:#fff!important}
body .nav .brand svg{color:#EEF1FD}
body .nav .brand b{font-family:"Syne",sans-serif!important;font-weight:700!important;font-size:15px!important;letter-spacing:.12em!important;color:#fff!important;font-stretch:100%!important}
body .nav .brand small,body .nav.scrolled .brand small{font-family:"Manrope",sans-serif!important;font-weight:600!important;font-size:9.5px!important;letter-spacing:.2em!important;text-transform:uppercase;color:#6F8FFF!important;opacity:1!important}
body .nav ul a,body .nav .dd-t,body .nav.scrolled .dd-t{font-family:"Manrope",sans-serif!important;font-weight:600!important;font-size:11px!important;letter-spacing:.16em!important;text-transform:uppercase;color:#AEB6C6!important;border-bottom:0!important}
body .nav ul a:hover,body .nav .dd-t:hover{color:#fff!important}
body .nav ul a[aria-current="page"],body .nav .dd.cur .dd-t,body .nav.scrolled .dd.cur .dd-t{color:#fff!important;box-shadow:0 1px 0 var(--gold);padding-bottom:4px!important}
body .nav .bar .btn,body .nav .btn.dark,body .nav.scrolled .btn.dark{background:none!important;box-shadow:none!important;border:0!important;padding:4px 0!important;font-family:"Manrope",sans-serif!important;font-weight:600!important;font-size:11px!important;letter-spacing:.16em!important;text-transform:uppercase;color:#AEB6C6!important;border-radius:0!important}
body .nav .bar .btn:hover{color:#fff!important}
body .nav .dd-m{background:rgba(6,8,16,.95)!important}
body .nav .dd-m .dd-tx b{font-family:"Syne",sans-serif;font-weight:700}
body .nav .dd-m .dd-tx small{font-family:"Manrope",sans-serif;color:#8FA2C8}
body .nav .menu span,body .nav .menu span::before,body .nav .menu span::after{background:#EEF1FD!important}
@media (max-width:920px){body .nav ul{background:rgba(6,8,16,.97)!important}body .nav ul a{color:#EEF1FD!important;border-color:rgba(255,255,255,.08)!important}}

/* the opening screen: the water shows through, the particle K above the words */
.hero.hx{background:transparent!important}
.hx-sky,.hx-sea,.hx-rays,.hx-reflect,.hero .hm-logo,.hx-lock .hx-word{display:none!important}
.hx-halo{opacity:.55;background:radial-gradient(circle,rgba(91,130,255,.22),rgba(18,56,201,.08) 45%,transparent 70%)!important}
.hero.hx .hx-obj{justify-content:center!important;padding:72px 24px 40px!important;gap:0!important}
.hx-lock{animation:none!important}
.hx-particles{width:min(440px,58vw,46vh)!important;height:min(440px,58vw,46vh)!important}
.hero .hx-tag{position:static!important;margin:4px auto 0!important;display:flex!important;flex-direction:column;align-items:center;gap:16px;background:none!important;-webkit-text-fill-color:#fff!important;color:#fff!important;text-shadow:none!important;font-family:"Syne",sans-serif!important;font-stretch:100%!important;font-weight:700!important;text-transform:uppercase;line-height:1!important;letter-spacing:-.01em!important;width:auto!important;max-width:none!important}
.hero .hx-tag span{display:block;white-space:nowrap!important;background:none!important;-webkit-text-fill-color:currentColor}
.hero .hx-tag span:first-child{font-size:min(56px,calc((100vw - 64px)/21))!important;color:#fff}
.hero .hx-tag span+span{font-size:clamp(13px,1.55vw,22px)!important;font-weight:500!important;letter-spacing:.06em!important;color:#C9D3E4!important;opacity:1!important;line-height:1.3}
.hx-lede{margin:clamp(26px,4vh,40px) auto 0;max-width:min(780px,100%);font:400 clamp(16px,1.36vw,19px)/1.75 "Manrope",sans-serif;color:#AEB6C6;text-align:center;text-wrap:balance}
.hx-cue{color:#79839A!important;font-family:"Manrope",sans-serif!important;font-weight:600;font-size:10px!important;letter-spacing:.2em!important}
@media (max-width:760px){.hero .hx-tag span:first-child{font-size:calc((100vw - 40px)/21)!important}.hero .hx-tag span+span{font-size:calc((100vw - 40px)/27)!important;letter-spacing:.05em!important}.hx-lede{font-size:16px}}

/* the intro: the mark and the name in Syne, a blue-into-gold line under them */
#intro{background:#05070F!important}
#intro .i-word{font-family:"Syne",sans-serif!important;font-stretch:100%!important;font-weight:700!important;letter-spacing:.1em!important}
#intro.leaving .i-lock{color:#EEF1FD!important}
#intro .i-thread{background:linear-gradient(90deg,transparent,#1238C9,#5B82FF 50%,#E2C48D,transparent)!important}
/* the header stays in place on the opening screen too, as on the MPower4 pages */
body.at-hero .nav{opacity:1!important;transform:none!important;pointer-events:auto!important}

/* ================= round three: the full mark, champagne with the blue and white, calmer info ================= */
/* the header mark: its white corners and K were coloured near-black for the old silver bar */
body .nav .brand svg,footer .brand svg,footer svg[style*="0A0A0B"]{color:#EEF1FD!important}

/* the closing section: the old liquid-metal panel is gone, the water shows through */
main .close{background:transparent!important}
main .close::before,main .close::after{display:none!important}

/* champagne, blue and white. The second sentence of a heading turns champagne */
:root{--champ:#E8D3A6;--champ-2:#D9B97F;--champ-grad:linear-gradient(90deg,#F7EAD0 0%,#E8D3A6 45%,#D4B074 100%)}
main section:not(.hero) :is(h1,h2).chrome .ln+.ln,main .statement .st-l+.st-l{background:var(--champ-grad)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:var(--champ)!important}
/* each section carries a faint champagne pool on one side and a blue one on the other, placed differently every time */
main section.bg-b::after,main section.bg-d::after{content:""!important;display:block!important;position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 34% at var(--cx,85%) var(--cy,28%),rgba(232,211,166,.085),transparent 70%),radial-gradient(42% 40% at calc(100% - var(--cx,85%)) calc(100% - var(--cy,28%)),rgba(70,110,255,.09),transparent 72%)!important}
main .statement{position:relative}
main .statement .st-light{background:radial-gradient(closest-side,rgba(232,211,166,.10),rgba(91,130,255,.06) 55%,transparent)!important}
/* the lines under the opening of the statement: white, then a champagne aside */
main .statement .st-sub{color:#C9D0DD!important;font-family:var(--body)!important;font-size:clamp(16px,1.3vw,19px)!important;line-height:1.75}
main .statement .st-sub2{color:#F3E9D2!important;opacity:1!important}
main .statement .st-sub2 *{color:inherit!important}
/* small marks in champagne: list dots, the Kinett column of the questions, the plane labels */
main .eyebrow .b{color:var(--champ)!important}
main .sec-head .eyebrow::before,main .page-hero .eyebrow::before,main .side-c .sec-head .eyebrow::after{background:var(--champ)!important}

/* buttons: Kinett blue running into champagne */
main .btn.primary,footer .btn.primary{background:linear-gradient(100deg,#1238C9 0%,#3A62E8 42%,#8C93C9 72%,#E2C48D 100%)!important;color:#fff!important;text-shadow:0 1px 6px rgba(10,20,60,.35);box-shadow:0 12px 30px -12px rgba(226,196,141,.45),0 10px 26px -14px rgba(70,120,255,.5)!important}
main .btn.ghost,footer .btn.ghost{box-shadow:inset 0 0 0 1px rgba(232,211,166,.45)!important;color:#F4ECDD!important}
main .btn.ghost:hover{box-shadow:inset 0 0 0 1px rgba(232,211,166,.85)!important}

/* the three planes: the plane names large, the K in champagne */
body [data-view] .pillar .k{font-family:var(--display)!important;font-weight:700!important;font-size:clamp(26px,2.4vw,34px)!important;line-height:1.1;color:var(--champ)!important;letter-spacing:-.01em}
body [data-view] .pillar .k .ct{font:inherit!important;font-size:inherit!important;color:#fff!important;background:none!important;-webkit-text-fill-color:#fff!important}
body [data-view] .pillar .role{font-family:var(--body)!important;font-weight:600!important;font-size:11px!important;letter-spacing:.2em!important;color:#9DB4FF!important}

/* the statement's four facts: an open row, not a box */
main .st-proof{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0!important;background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0!important;border-radius:0!important;margin-top:18px!important}
main .st-proof::before,main .st-proof::after{display:none!important}
main .st-proof>div{padding:4px clamp(14px,2vw,28px)!important;border:0!important;border-left:1px solid var(--hair)!important;background:none!important;text-align:left}
main .st-proof>div:first-child{border-left:0!important;padding-left:0!important}
main .st-proof b{display:block;font:700 clamp(18px,1.6vw,23px)/1.2 var(--display)!important;color:#fff!important;letter-spacing:-.01em;margin-bottom:6px}
main .st-proof b::before{content:"";display:block;width:26px;height:1.5px;margin-bottom:14px;background:var(--champ-grad)}
main .st-proof span{display:block;font:400 14.5px/1.55 var(--body)!important;color:#AEB6C6!important}
@media (max-width:760px){main .st-proof{grid-template-columns:1fr 1fr;row-gap:22px}main .st-proof>div:nth-child(odd){border-left:0!important;padding-left:0!important}}

/* the four questions: an open table, no panel. Question in white, the toolkit answer muted, Kinett's answer with a champagne mark */
main .qtable{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;overflow:visible!important}
main .qtable::before,main .qtable::after{display:none!important}
main .qrow{padding:22px 0!important;border-bottom:1px solid var(--hair)!important;background:none!important}
main .qrow:first-child{border-top:1px solid var(--hair)!important}
main .qrow.h{background:none!important;font-family:var(--body)!important;font-weight:600;font-size:10.5px!important;letter-spacing:.2em!important;color:#79839A!important;padding:12px 0!important}
main .qrow.h>*:last-child{color:var(--champ)!important}
main .qrow .q{font:700 clamp(18px,1.5vw,22px)/1.3 var(--display)!important;color:#fff}
main .qrow .tk{color:#7D8598!important;font-size:15px!important}
main .qrow .tk::before{border:1px solid rgba(174,182,198,.45)!important;background:none!important}
main .qrow .kn{color:#C9D0DD!important;font-size:15px!important}
main .qrow .kn b{color:#fff}
main .qrow .kn::before{background:var(--champ-grad)!important;box-shadow:0 0 10px rgba(232,211,166,.55)!important}
main .qrow:not(.h):hover{background:linear-gradient(90deg,rgba(232,211,166,.04),rgba(91,130,255,.04))!important}

/* the four questions, before and after: the question, the toolkit's answer struck through, an arrow, Kinett's answer */
main .qba{list-style:none;margin:8px 0 0;padding:0;counter-reset:q}
main .qba-row{counter-increment:q;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2.2fr);gap:clamp(18px,3vw,48px);align-items:start;padding:24px 0;border-top:1px solid var(--hair)}
main .qba-row:last-child{border-bottom:1px solid var(--hair)}
main .qba .qba-q{margin:0!important;font:700 clamp(19px,1.7vw,24px)/1.25 var(--display)!important;color:#fff!important}
main .qba .qba-q::before{content:counter(q,decimal-leading-zero);display:block;margin-bottom:8px;font:700 13px/1 var(--display);letter-spacing:.06em;color:rgba(232,211,166,.55)}
main .qba-pair{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1.15fr);gap:14px;align-items:start}
main .qba-lab{display:block;margin-bottom:6px;font:600 10px/1.4 var(--body);letter-spacing:.2em;text-transform:uppercase;color:#79839A}
main .qba-now .qba-lab{color:#7FA2FF}
main .qba-was{margin:0;font-size:15px;line-height:1.65;color:#7D8598}

main .qba-arrow{padding-top:26px;text-align:center;font-size:20px;line-height:1;color:var(--champ)}
main .qba-now{margin:0;font-size:15.5px;line-height:1.65;color:#D5DBE6}
main .qba-now b{font-weight:700;background:var(--champ-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--champ)}
@media (max-width:860px){main .qba-row{grid-template-columns:1fr;gap:14px}}
@media (max-width:560px){main .qba-pair{grid-template-columns:1fr;gap:6px}main .qba-arrow{padding:0;text-align:left;transform:rotate(90deg);width:20px}}
/* Built to guarantee: a particle picture above each property */
main .bento4 .bx-art .kp{width:100%;height:100%}
/* text and picture side by side in one row, centred on each other, so they sit at the same height */
main .bento4 .bx:not(.bx-wide){display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:clamp(16px,2.4vw,32px);min-height:0!important}
main .bento4 .bx:not(.bx-wide) .bx-art{position:relative!important;inset:auto!important;order:2;flex:0 0 42%;width:42%!important;height:118px!important;margin:0!important;z-index:0!important;transform:none!important}
main .bento4 .bx:not(.bx-wide) .bx-t{flex:1 1 auto;max-width:none!important}
@media (max-width:560px){main .bento4 .bx:not(.bx-wide){flex-direction:column!important;align-items:flex-start!important}main .bento4 .bx:not(.bx-wide) .bx-art{order:-1;width:100%!important;flex-basis:auto}}
main .bento4 .bx-art::after{display:none!important}

/* Who it's for: the three columns share rows, so labels, names, text, tags and links line up across them */
body [data-view] .domains{grid-template-rows:auto auto auto auto auto;row-gap:0!important}
body [data-view] .domains .dom{display:grid!important;grid-row:span 5;grid-template-rows:subgrid;row-gap:12px;align-content:start}
body [data-view] .domains .dom>.who{grid-row:1;align-self:end}
body [data-view] .domains .dom>.dh{grid-row:2}
body [data-view] .domains .dom>p{grid-row:3}
body [data-view] .domains .dom>ul{grid-row:4;align-self:start}
body [data-view] .domains .dom>.go{grid-row:5;align-self:end;margin-top:6px!important;padding-top:0!important}
/* the names and links in light champagne */
body [data-view] .domains .dom .go{color:#EEDDB8!important}
body [data-view] .domains .dom .dh{color:#EEDDB8!important}
body [data-view] .domains .dom .dh-ic svg{stroke:#EEDDB8!important}
@media (max-width:900px){body [data-view] .domains{grid-template-rows:none}body [data-view] .domains .dom{display:flex!important;grid-row:auto}}

/* the Verticals dropdown: a calm dark panel, names in normal case */
body .nav .dd-m{min-width:400px!important;padding:8px!important;border-radius:16px!important;background:rgba(6,9,20,.96)!important;border:1px solid rgba(220,230,255,.1)!important;box-shadow:0 30px 60px -24px rgba(0,0,0,.85)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
body .nav .dd-m a,body .nav .dd-m a *{text-transform:none!important;letter-spacing:0!important}
body .nav .dd-m a{display:grid!important;grid-template-columns:40px 1fr!important;gap:14px!important;align-items:center!important;padding:12px 14px!important;border-radius:12px!important;color:#fff!important;box-shadow:none!important}
body .nav .dd-m a:hover,body .nav .dd-m a[aria-current="page"]{background:linear-gradient(90deg,rgba(91,130,255,.12),rgba(232,211,166,.06))!important}
body .nav .dd-m .dd-ic{width:40px!important;height:40px!important;border-radius:10px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(232,211,166,.25)!important}
body .nav .dd-m .dd-ic svg{stroke:#EEDDB8!important}
body .nav .dd-m .dd-tx b{font:700 15px/1.25 "Syne",sans-serif!important;color:#fff!important}
body .nav .dd-m .dd-tx small{font:400 12.5px/1.5 "Manrope",sans-serif!important;color:#8FA2C8!important;text-transform:none!important}
@media (max-width:920px){body .nav .dd-m{min-width:0!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important}body .nav .dd-m a{display:block!important;padding:12px 0!important}body .nav .dd-m .dd-tx b{font:600 13px "Manrope",sans-serif!important}}

/* blue for the industry names, the K of each plane; light champagne for the plane labels */
body [data-view] .domains .dom .dh{color:#8FAEFF!important}
body [data-view] .domains .dom .dh-ic svg{stroke:#8FAEFF!important}
body [data-view] .pillar .k{color:#7FA2FF!important}
body [data-view] .pillar .role{color:#EEDDB8!important}
/* the second sentence of the big headings runs from the Kinett blue into champagne, rather than all gold */
main section:not(.hero) :is(h1,h2).chrome .ln+.ln,main .statement .st-l+.st-l{background:linear-gradient(90deg,#7FA2FF 0%,#AEB9E6 45%,#E8D3A6 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
/* The discipline: the harness ring in points between Guides and Sensors */
main .hz-art{display:flex;align-items:center;justify-content:center;min-width:0}
main .hz-art .kp{width:100%;height:clamp(220px,26vw,320px)}

/* Deployment: the diagram's blocks as clear gradients, one light and one deep, with a soft sheen */
main .dblk{font-family:var(--body)!important;font-weight:600!important;letter-spacing:.01em;overflow:hidden}
main .dblk::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 45%);pointer-events:none}
main .dblk.rt{background:linear-gradient(135deg,#FFFFFF 0%,#E4EAF8 40%,#A9BCF0 100%)!important;color:#0B1636!important;box-shadow:inset 0 1px 0 #fff,0 12px 30px -12px rgba(0,0,0,.8),0 0 28px -8px rgba(195,209,255,.55)!important}
main .dblk.dt{background:linear-gradient(135deg,#8FAEFF 0%,#4A72F0 40%,#1238C9 100%)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 30px -12px rgba(0,0,0,.8),0 0 30px -8px rgba(91,130,255,.75)!important}
main .dblk.src{background:linear-gradient(135deg,rgba(232,211,166,.22),rgba(13,14,16,.9) 70%)!important;border:1px solid rgba(232,211,166,.6)!important;color:#F3E9D2!important}

/* Deployment: the small label above each option back to label size; the options bigger and clearly clickable */
body [data-view] .dep .mono{display:block;margin-bottom:10px;font:600 10.5px/1.5 var(--body)!important;letter-spacing:.2em!important;text-transform:uppercase;color:#8A93A6!important}
body [data-view] .dep h3{font-size:clamp(24px,2.2vw,32px)!important;margin:0 0 10px!important;display:flex;align-items:center;gap:12px;color:#fff!important;transition:color .3s}
body [data-view] .dep h3::after{content:"→";font:400 .7em var(--body);color:#7FA2FF;opacity:.7;transform:translateX(0);transition:transform .3s,opacity .3s,color .3s}
body [data-view] .dep{cursor:pointer;transition:background .3s}
body [data-view] .dep:hover h3::after{transform:translateX(5px);opacity:1}
body [data-view] .dep:hover h3{color:#DCE5FF!important}
body [data-view] .dep:hover{background:linear-gradient(180deg,rgba(91,130,255,.06),transparent 70%)!important}
/* the option the diagram is showing: its line runs the full width in blue into champagne, and its title turns blue */
body [data-view] .dep.on::after{background:var(--kline)!important;height:2px!important;box-shadow:0 0 12px rgba(91,130,255,.5)}
body [data-view] .dep.on h3{color:#8FAEFF!important}
body [data-view] .dep.on h3::after{color:#E8D3A6;opacity:1}
body [data-view] .dep.on .mono{color:#EEDDB8!important}
body [data-view] .dep:focus-visible{outline:1.5px solid #7FA2FF;outline-offset:6px;border-radius:4px}

/* the opening line in normal case, a little smaller */
.hero .hx-tag{text-transform:none!important}
.hero .hx-tag span:first-child{font-size:min(50px,calc((100vw - 64px)/17))!important;letter-spacing:-.015em!important}
.hero .hx-tag span+span{letter-spacing:.01em!important;font-size:clamp(15px,1.7vw,24px)!important}
@media (max-width:760px){.hero .hx-tag span:first-child{font-size:calc((100vw - 40px)/17)!important}.hero .hx-tag span+span{font-size:calc((100vw - 40px)/22)!important;letter-spacing:0!important}}

/* the second section shows in full straight away, rather than piece by piece as the page scrolls */
main .statement{height:auto!important;min-height:0!important}
main .statement .st-stage{position:static!important;height:auto!important;min-height:0!important;padding-block:clamp(90px,14vh,150px)!important}
main .statement :is(.st-text,.st-sub,.st-sub2,.st-ctas,.st-proof,.st-points){opacity:1!important;transform:none!important;transition:none!important}

/* A platform, not an agentic toolkit: room between the two pictures, and the pictures a little smaller */
main .compare{gap:clamp(40px,6vw,96px)!important}
main .compare .cmp>svg,main .compare .cmp svg.ill{display:block;width:min(100%,380px)!important;max-height:240px;height:auto;margin:10px auto 14px!important}

/* the run-in-progress panels: a lighter blue throughout */
main .console{--fg-2:#C7D3F2;--fg-3:#9DB4FF;--blue:#BFD0FF;--forge:#8FAEFF;--context:#B7C8FF;--run:#DCE5FF;color:#DCE3F2}
main .console :is(.c-def dt,.steps .k,.steps small,.steps em,.c-top,.lab,.mono){color:#A9BDFB!important}
main .console :is(.steps b,.steps strong,.c-def dd){color:#E6ECFA!important}

/* the second half of single-sentence headings, picked out by the script, in the blue-to-champagne gradient */
main :is(h1,h2) .ln2,main .eyebrow .ln2{background:linear-gradient(90deg,#7FA2FF 0%,#AEB9E6 45%,#E8D3A6 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent!important}

/* room between anything placed side by side, so the columns read as separate and organised */
body [data-view] :is(div,section,ol,ul):has(> :is(.pillar,.bx,.moment,.feat,.dep,.case,.cmp,.dom,.stage,.side-box,.contact-tile,.ws,.person)){column-gap:clamp(32px,4.2vw,64px)!important;row-gap:clamp(28px,3.5vw,44px)!important}
body [data-view] .domains{column-gap:clamp(36px,4.6vw,72px)!important}
body [data-view] .arch{gap:clamp(32px,4vw,56px)!important}
body [data-view] .hz{column-gap:clamp(28px,3.6vw,52px)!important}

/* Why it pays off: agents on one glowing platform. Wires drop from each agent into the platform; in the toolkit view
   the platform fades and each agent grows its own controls */
main .cmp-toggle{gap:22px!important;margin-bottom:30px!important}
main .switch{border:0!important;border-radius:999px!important;padding:3px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
main .switch button{border-radius:999px!important;font:600 11px/1 var(--body)!important;letter-spacing:.14em!important;text-transform:uppercase;padding:10px 16px!important;color:#AEB6C6!important}
main .switch button[aria-pressed="true"]{background:linear-gradient(100deg,#1238C9,#3A62E8 42%,#8C93C9 72%,#E2C48D)!important;color:#fff!important}
main .count{font-size:14px!important;color:#AEB6C6!important}
main .count b{font:700 40px/1 var(--display)!important;background:linear-gradient(180deg,#9DB4FF,#E8D3A6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-right:10px!important;vertical-align:-8px!important}
main .agents{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;align-items:stretch!important}
main .agent::after{content:"";align-self:center;width:1px;height:26px;background:linear-gradient(#9DB4FF,rgba(232,211,166,.75));transition:opacity .4s}
main .mode-toolkit .agent::after{opacity:0}
main .a-card{flex:1;padding:16px 18px!important;border:0!important;border-radius:12px!important;background:linear-gradient(160deg,rgba(127,162,255,.18),rgba(127,162,255,.04))!important;box-shadow:inset 0 0 0 1px rgba(160,190,255,.25),0 14px 34px -22px rgba(91,130,255,.6)!important}
main .a-card.ask{background:linear-gradient(160deg,rgba(232,211,166,.12),rgba(232,211,166,.02))!important;box-shadow:inset 0 0 0 1px rgba(232,211,166,.35)!important}
main .a-card .mono{font:600 10px/1.4 var(--body)!important;letter-spacing:.18em!important;color:#E8D3A6!important}
main .a-card b{font:700 17px/1.25 var(--display)!important;color:#fff!important;margin:6px 0 4px!important}
main .a-card span:not(.mono){font-size:13.5px!important;color:#AEB6C6!important}
main .own li{font:600 11px/1.3 var(--body)!important;letter-spacing:.02em;border-radius:6px!important;border:1px solid rgba(240,140,160,.45)!important;background:rgba(240,140,160,.1)!important;color:#F5B3C1!important}
main .layer{margin-top:0!important;border-radius:14px!important;background:linear-gradient(90deg,rgba(18,56,201,.55),rgba(91,130,255,.35) 55%,rgba(232,211,166,.32))!important;box-shadow:0 0 40px -10px rgba(91,130,255,.6),inset 0 1px 0 rgba(255,255,255,.3)!important;border:0!important;transition:opacity .45s,filter .45s}
main .layer::after{opacity:.4}
main .layer .lab{font:700 15px/1.3 var(--display)!important;letter-spacing:0!important;text-transform:none!important;color:#fff!important}
main .layer li{font:500 13px/1 var(--body)!important;background:rgba(5,8,18,.45)!important;border:1px solid rgba(255,255,255,.18)!important;color:#F3F6FB!important}
main .mode-toolkit .layer{opacity:.14!important;filter:grayscale(1)}
@media (max-width:760px){main .agents{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* the footer: KINETT in white */
footer .brand b,footer .brand svg+b,footer b.wm,footer .brand{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important}

/* the intro name uses the header's spacing, and its colour stays white while it glides into place */
#intro .i-word{letter-spacing:.12em!important}
#intro.leaving .i-lock,#intro.leaving .i-mark{color:#EEF1FD!important}
#intro .i-sheen{display:none}