/* Nexus page (kit extension). Only values the homepage and the kit already use.
   .kx-nexus-tabs    = the tab switcher: the tab row is the kit's pill buttons (.k-actions + .nx-button); panels sit 3rem below it.
   .kx-nexus-dept    = the department label over a tab's headline; hidden once the switcher is on, because the selected tab says it.
   .kx-nexus-hub     = "Your business knowledge": the Nexus mark and two lines in a white card with the kit's 1px line and 1rem corners.
   #businesses       = the partner strip keeps its homepage markup; here it takes the site's section spacing.
   .kx-nexus-eyebrow = the kit's .k-label centred over its heading.  .kx-nexus-price = the price line, close to the link under it. */
.kx-nexus-tablist[hidden],.kx-nexus-panel[hidden]{display:none}
.kx-nexus-tablist{margin-top:2.5rem}
/* The .wf section resets buttons to font:inherit; the tabs keep the kit's pill-button type (600, line 1.3). */
.kx-nexus-tablist .nx-button{padding-inline:1.25rem;font-weight:600;line-height:1.3}
.kx-nexus-panel{margin-top:3rem}
.kx-nexus-panel .k-statement+.home-points{margin-top:2.5rem}
.kx-nexus-panel .home-points+.hd-label{margin-top:3rem}
.kx-nexus-tabs.is-tabbed .kx-nexus-dept{display:none}
.kx-nexus-tabs [role="tab"]:focus-visible,.kx-nexus-panel:focus-visible{outline:2px solid #2180b8;outline-offset:3px;border-radius:12px}
.k-section .kx-nexus-eyebrow,.kx-nexus-dept{text-align:center}

.kx-nexus-hub{display:flex;align-items:center;justify-content:center;gap:1rem;width:max-content;max-width:100%;margin:2.5rem auto 0;padding:1rem 1.5rem;border:1px solid #d6e2ea;border-radius:1rem;background:#fff;text-align:left}
.kx-nexus-hub img{flex:none;width:2.5rem;height:auto}
.kx-nexus-hub strong{display:block;font:600 1.125rem/1.4 NexusManrope,Manrope,system-ui,sans-serif;letter-spacing:-.01em;color:var(--site-ink)}
.kx-nexus-hub p{margin:0;font:400 1rem/1.7 var(--site-body);color:var(--site-muted)}

.kx-nexus-text h3{font:600 1.625rem/1.2 NexusManrope,Manrope,system-ui,sans-serif;letter-spacing:-.02em;color:var(--site-ink);text-wrap:balance}
.kx-nexus-text p{margin-top:1rem;font:400 1rem/1.7 var(--site-body);color:var(--site-muted)}

body main.homepage>#businesses{padding-block:var(--site-section-space)}
body main.homepage .k-note.kx-nexus-price{margin-top:2rem}
.kx-nexus-price+.home-links{margin-top:.25rem}

@media(max-width:900px){
  .kx-nexus-text h3{font-size:1.5rem}
 .k-section .kx-nexus-eyebrow,.kx-nexus-dept{text-align:left}
}
@media(max-width:640px){
 .kx-nexus-tablist .nx-button{padding-inline:1rem}
 .kx-nexus-panel{margin-top:2.5rem}
 .kx-nexus-hub{padding:1rem}
 .kx-nexus-hub strong{font-size:1rem}
}

/* The Nexus logo above the page title stays centred with the title on every width. */
.k-hero .home-product-name{justify-content:center}


/* The build price as a figure, as on the Pricing page (the section-heading size; the words in the small label style). */
body main.homepage .kx-nexus-price{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:2.5rem 0 0}
body main.homepage .kx-nexus-price span{font:600 13px/18.2px NexusInter,Inter,system-ui,sans-serif;color:#526b7e}
body main.homepage .kx-nexus-price strong{font:600 48px/52.8px NexusManrope,Manrope,system-ui,sans-serif;letter-spacing:-1.2px;color:#173249;font-variant-numeric:lining-nums tabular-nums}
@media(max-width:640px){body main.homepage .kx-nexus-price strong{font-size:30px;line-height:34.5px;letter-spacing:-.75px}}

/* "Knows your business. Gets real work done." is James's own scroll section again (kit_ext/sections/nexus-what.html, 13 Oct ~22:10 UTC).
   Its heading block takes the site's centred section heading (48px / 30px) in place of his 68px serif header. */
.nxi-preview .kx-nexus-what-head{max-width:46rem;margin:0 auto;text-align:center}
.nxi-preview .kx-nexus-what-head{margin-bottom:4rem}
/* Step titles sit a clear size below the section heading (30px computer, 24px phone), so the page keeps one hierarchy. */
body main.homepage .nxi-preview .step h2{font:600 30px/37.5px NexusManrope,Manrope,system-ui,sans-serif;letter-spacing:-.6px}
@media(max-width:640px){
  .nxi-preview .kx-nexus-what-head{margin-bottom:2.5rem}
  body main.homepage .nxi-preview .step h2{font-size:24px;line-height:28.8px;letter-spacing:-.48px}
}
/* Step words in the site's ink and body grey; the step being shown stands out by fading the others (opacity), not by a new grey. */
body main.homepage .nxi-preview .step h2{color:#202d32}
body main.homepage .nxi-preview .step p{color:#606b70}
body main.homepage .nxi-preview.js .step{transition:opacity .4s ease}
body main.homepage .nxi-preview.js .step:not(.on){opacity:.4}
@media(max-width:900px){body main.homepage .nxi-preview.js .step:not(.on){opacity:1}}
@media(prefers-reduced-motion:reduce){body main.homepage .nxi-preview.js .step{transition:none}}
body main.homepage .nxi-preview.js .step:not(.on) h2{color:#202d32}
body main.homepage .nxi-preview.js .step:not(.on)>p{color:#606b70}
/* Step numbers 01 to 05 (James, 13 Oct ~22:40 UTC: "can we number that section"): brand blue numerals above each step title,
   matching the stage's "1 of 5"; the step being shown carries its number at full strength like its words. */
body main.homepage .nxi-preview .kx-nexus-step-num{display:block;margin-bottom:12px;font:600 18px/25.2px NexusManrope,Manrope,system-ui,sans-serif;letter-spacing:-.18px;color:#2180b8;font-variant-numeric:lining-nums tabular-nums}
@media(max-width:640px){body main.homepage .nxi-preview .kx-nexus-step-num{margin-bottom:8px;font-size:16px;line-height:22.4px;letter-spacing:-.16px}}

/* ---- "Knows your business. Gets real work done." stage, all five steps (13 Oct ~22:00 UTC, James: "you didnt change the cards in
   this section: 03 Gets work done in your tools"): the same finish as the Slack panels (the viktor.com still). Desktop: the pinned
   column is the deep navy-to-blue backdrop; the stage is a window on it (three window dots, "Nexus at work", a very light body so
   the white cards inside stay crisp, a deep soft shadow). Phones: each step's own copy of the window gets the backdrop as a 10px
   frame. Content and motion unchanged. */
body main.nexus-page .nxi-preview .stage{border:0;border-radius:14px;background:#fafbfc;box-shadow:0 2px 6px rgba(2,10,24,.16),0 36px 70px -30px rgba(2,10,24,.7)}
.nxi-preview .stage::before{display:none}
.nxi-preview .stage-bar{justify-content:flex-start;gap:14px;height:56px;margin:0;padding:0 20px;border-bottom:1px solid #edf1f4;background-image:linear-gradient(#fff,#f7f9fb);color:#202d32}
.nxi-preview .stage-bar::before{content:"";flex:none;width:52px;height:12px;background:radial-gradient(circle at 6px 6px,#ff5f57 0 5.5px,transparent 6px),radial-gradient(circle at 26px 6px,#febc2e 0 5.5px,transparent 6px),radial-gradient(circle at 46px 6px,#28c840 0 5.5px,transparent 6px)}
.nxi-preview .stage-bar img{width:20px;height:20px}
.nxi-preview .stage-status{border-top-color:#edf1f4}
.nxi-preview .stage :is(.source-stack,.answer,.playbook,.work-document,.schedule,.brief,.workspace){border-color:#e3eaef;box-shadow:0 0 0 1px #e3eaef,0 14px 28px -22px rgba(23,50,73,.4)}
@media(min-width:901px){
 .nxi-preview .visual-column{top:max(88px,calc(50vh - 341px));padding:28px 28px 16px;border-radius:30px;background-image:radial-gradient(80% 55% at 12% 0%,rgba(98,216,255,.2) 0%,rgba(98,216,255,0) 62%),linear-gradient(150deg,#071a33 0%,#0f3a62 52%,#2180b8 100%);box-shadow:0 44px 90px -56px rgba(7,26,51,.8)}
 .nxi-preview .visual-footer{margin-top:14px;color:#dbeaf4}
 .nxi-preview .visual-footer :is(span,svg){color:#dbeaf4}
}
@media(max-width:900px){
 body main.nexus-page .nxi-preview .inline-stage{height:610px;border:10px solid transparent;border-radius:24px;background:linear-gradient(#fafbfc,#fafbfc) padding-box,linear-gradient(150deg,#071a33 0%,#0f3a62 52%,#2180b8 100%) border-box;box-shadow:0 30px 60px -40px rgba(7,26,51,.7)}
 .nxi-preview .inline-stage .stage-bar{height:50px;padding:0 14px;gap:10px;border-radius:14px 14px 0 0}
 .nxi-preview .inline-stage .stage-bar::before{width:40px;height:10px;background:radial-gradient(circle at 5px 5px,#ff5f57 0 4.5px,transparent 5px),radial-gradient(circle at 20px 5px,#febc2e 0 4.5px,transparent 5px),radial-gradient(circle at 35px 5px,#28c840 0 4.5px,transparent 5px)}
}