/* BUILD-CHECK: colours-in-divi-2 */

:root{--ns-shadow-rest:6px 6px 18px 0 rgba(255,255,255,.3);--ns-shadow-hover:9px 9px 24px 0 rgba(255,255,255,.3);--ns-accent:#58A7F9;--ns-btn-rim:211,222,232;--ns-btn-edge:rgba(211,222,232,.14);--ns-btn-scrim:rgba(9,26,69,.92);--ns-btn-body-a:rgba(18,42,82,.97);--ns-btn-body-b:rgba(6,19,48,.96);--ns-btn-lift:0 18px 34px rgba(1,8,26,.34);--ns-btn-bloom:0 0 28px rgba(211,222,232,.22);--ns-btn-inner:inset 0 0 0 1px rgba(255,255,255,.035);--ns-btn-radius:5px;--ns-btn-pad-y:14px;--ns-btn-pad-x:14px;--ns-btn-fs:clamp(13px,calc(2.16vw - 8.48px),16px);--ns-btn-fs-hover:calc(var(--ns-btn-fs) + 1px);--ns-btn-track:.5px;--ns-ink-heading:rgba(214,214,214,.88);--ns-ink-body:rgba(255,255,255,.8);--ns-card:#0E1834;--ns-band:#17203B;--ns-marker:#B3B3B3;--ns-sp-1:clamp(6px,.667vw,8px);--ns-sp-2:clamp(10px,1.167vw,14px);--ns-sp-3:clamp(14px,1.5vw,18px);--ns-sp-4:clamp(22px,2.5vw,30px);--ns-sp-5:clamp(32px,4vw,48px);--ns-sp-6:clamp(26px,3vw,36px);}

/* The button size below the single-column line (1.4.60). Above it the button
   lives in the aside column, whose measure is clamp(165px, calc(90vw - 730px),
   290px): 290px at 1133 and wider, ramping down to its 165px floor at 994. The
   rest size is that same ramp, so the type is at its 16px maximum exactly while
   the column is at its 290px maximum, and reaches its 13px floor exactly where
   the column reaches 165px - one curve, derived from the box, not a second
   guess at the viewport. Below 767 the row has stacked (1.4.59) and the column
   is the full page, so the button returns to its full 16px rather than holding
   a floor that was only ever there for a 165px box. The hover step derives
   itself from the rest size and follows both. */
@media (max-width:767px){:root{--ns-btn-fs:16px;}}.et_pb_code:not(:has(*)),.et_pb_code:has(>.et_pb_code_inner:empty){display:none!important}

body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .ns-panel{display:none}.ns-tabset :is(.et_pb_column,.nst-tile).hovergroup{cursor:pointer;transition:box-shadow .3s ease,background-color .3s ease}.ns-tabset .hovergroup h3{transition:font-size 1600ms cubic-bezier(.65,0,.35,1)}.ns-tabset .ns-tabset.is-tabbed :is(.et_pb_blurb_description,.nst-tile-body){max-height:0;opacity:0;padding-top:0!important}.ns-tabset.is-tabbed{margin-bottom:0!important}.ns-tabset.is-tabbed :is(.et_pb_column,.nst-tile).hovergroup{box-shadow:6px 6px 18px 0 rgba(255,255,255,.3)!important;opacity:1;transition:box-shadow .3s ease}.ns-tabset.is-tabbed :is(.et_pb_column,.nst-tile).hovergroup:not(.is-active) h3{opacity:.5;transition:opacity .7s ease}.ns-tabset.is-tabbed :is(.et_pb_column,.nst-tile).hovergroup:not(.is-active):hover{box-shadow:9px 9px 24px 0 rgba(255,255,255,.3)!important}.ns-tabset.is-tabbed :is(.et_pb_column,.nst-tile).hovergroup:not(.is-active):hover h3{opacity:.85}.ns-tabset.is-tabbed :is(.et_pb_column,.nst-tile).hovergroup.is-active{box-shadow:none!important;opacity:1;position:relative;z-index:2}.ns-tabset.is-tabbed :is(.et_pb_column,.nst-tile).hovergroup.is-active:not(.ns-pagebg){background:transparent!important}.ns-tabset .hovergroup :is(.et_pb_icon,.nst-tile-icon){transition:opacity .7s ease}.ns-tabset.is-tabbed :is(.et_pb_column,.nst-tile).hovergroup.is-active :is(.et_pb_icon,.nst-tile-icon){opacity:0!important}.ns-panel{overflow:hidden;transition:max-height 1600ms cubic-bezier(.65,0,.35,1)}.ns-panel.ns-panel{position:relative;--nsw:rgba(255,255,255,0.075)}/* The railing band is a decoration of the panel, not a surface that sits on
   the content. At z-index 8 it painted over the last FAQ item's box-shadow,
   so the bottom tile lost its glow while every tile above it kept one - the
   glow belongs to the tile, the band belongs to the panel, and only paint
   order made them fight. z-index 0 keeps it above the panel background and
   below the columns, which carry z-index 2. */
.ns-panel.ns-panel::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(var(--ns-railbg,var(--nsw)),var(--ns-railbg,var(--nsw))) left 24px bottom/calc(100% - 48px) 34px no-repeat;box-shadow:inset 10px 0 16px -10px rgba(255,255,255,0.08),inset 0 -10px 16px -10px rgba(0,0,0,0.30),inset -10px 0 16px -10px rgba(0,0,0,0.22)}.ns-panel.ns-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:var(--ns-panel-h,100%);z-index:-1;pointer-events:none;--nsw:rgba(255,255,255,0.075);background-image:linear-gradient(var(--nsw),var(--nsw)),linear-gradient(var(--nsw),var(--nsw)),linear-gradient(var(--nsw),var(--nsw)),linear-gradient(var(--nsw),var(--nsw));background-repeat:no-repeat;background-size:24px 100%,24px 100%,0px 0px,0px 0px;background-position:top left,top right,left 24px top,left var(--ns-cut-r,100%) top}.ns-tab-lead :is(.et_pb_blurb_description,.nst-tile-body){max-width:720px}.ns-panel.ns-panel .ns-tab-lead+.et_pb_row .et_pb_module{margin-top:0!important}.ns-tab-lead{padding:40px 32px 0 32px}.ns-tab-lead .ns-tab-lead :is(.et_pb_blurb_description,.nst-tile-body) p{padding-bottom:16px}.ns-panel.ns-panel>:is(.et_pb_row,.nst-panel-main-row,.nst-faq-row):not(:first-of-type):not(:has(.nsp-frame)):not(:has(.et_pb_group_carousel)){padding-left:32px!important;padding-right:32px!important}@media (min-width:1100px){body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .ns-panel.ns-panel>:is(.et_pb_row,.nst-panel-main-row):first-of-type{display:flex!important;align-items:stretch}
/* RAIL RISE. JS states the amount on the row as --ns-rail-rise and marks it
   .ns-rise; WHERE it applies is decided here, inside the same query that
   makes the rail a side column. Below this width the rail is stacked and the
   rise simply does not exist - it cannot pull the rail into the block above
   it, and it cannot leave a compensating padding reserving space nothing
   occupies. A resize re-evaluates the query on its own. */
.ns-panel.ns-panel>:is(.et_pb_row,.nst-panel-main-row).ns-rise{padding-top:var(--ns-rail-rise,0px)!important}
.ns-panel.ns-panel>:is(.et_pb_row,.nst-panel-main-row).ns-rise>:is(.et_pb_column,.nst-panel-content,.nst-rail):nth-child(2){margin-top:calc(-1 * var(--ns-rail-rise,0px))!important}body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .ns-panel.ns-panel>:is(.et_pb_row,.nst-panel-main-row):first-of-type>:is(.et_pb_column,.nst-panel-content,.nst-rail):last-child:not(:first-child){width:var(--ns-rail-w,calc((100% - 40px)/4 + 28px))!important;margin-right:-18px!important;align-self:stretch!important;flex:0 0 auto!important}body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .ns-panel.ns-panel>:is(.et_pb_row,.nst-panel-main-row):first-of-type>:is(.et_pb_column,.nst-panel-content,.nst-rail):first-child{flex:1 1 auto}body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .ns-panel.ns-panel>:is(.et_pb_row,.nst-panel-main-row):first-of-type:not(:has(>:is(.et_pb_column,.nst-panel-content,.nst-rail):nth-child(2))){display:block!important}body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .ns-panel.ns-panel>:is(.et_pb_row,.nst-panel-main-row):first-of-type>:is(.et_pb_column,.nst-panel-content,.nst-rail):first-child:last-child{width:100%!important;margin-left:0!important;flex:none!important}}.ns-panel.ns-panel :is(.et_pb_column,.nst-rail,.nst-panel-grid-col):last-child:not(:first-child) :is(.et_pb_text,.nst-rail-text,.nst-panel-grid-text){background:none!important;padding:0!important;width:100%!important;hyphens:auto;-webkit-hyphens:auto;text-align:justify}.ns-panel.ns-panel{hyphens:auto;-webkit-hyphens:auto}.ns-tab-lead{padding-left:0!important;padding-right:0!important}@media (max-width:1099px){body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .ns-panel.ns-panel>:is(.et_pb_row,.nst-panel-main-row):first-of-type>:is(.et_pb_column,.nst-panel-content,.nst-rail):last-child:not(:first-child){width:100%!important;margin:24px 0 0!important;padding:24px 18px!important}}.ns-tabset .et_pb_text:has(h2){transition:padding-left 1600ms cubic-bezier(.65,0,.35,1)}.ns-tabset :is(.et_pb_column,.nst-tile).hovergroup{position:relative;z-index:5}.ns-tabset.is-tabbed :is(.et_pb_column,.nst-tile).hovergroup.is-active{z-index:6}.ns-panel.ns-panel :is(.et_pb_column,.nst-rail,.nst-panel-grid-col,.nst-faq-col):last-child :is(.et_pb_text,.nst-rail-text,.nst-panel-grid-text,.nst-faq-heading) h2{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere;hyphenate-limit-chars:10 5 9;-webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:9}.ns-panel.ns-panel>:is(.et_pb_row,.nst-panel-main-row):first-of-type{margin-bottom:0!important}.ns-panel.ns-panel>:is(.et_pb_row,.nst-panel-main-row):first-of-type>:is(.et_pb_column,.nst-panel-content,.nst-rail):last-child:not(:first-child):has(:is(.et_pb_module,.nst-rail-text)){background-color:rgba(255,255,255,0.075)!important}.ns-panel.ns-panel .nsp-frame--transparent .nsp-frame-head{background:#17203B!important;margin-left:calc(var(--nsp-band-l,8px) - var(--nsp-inset,24px))!important;margin-right:calc(var(--nsp-band-r,15px) - var(--nsp-inset,24px))!important;padding:clamp(12px,1.333vw,16px) var(--nsp-inset,24px)!important}@media (max-width:980px){.ns-panel.ns-panel .nsp-frame--transparent .nsp-frame-head{margin-left:-34px!important;margin-right:-27px!important}}@media (max-width:640px){.ns-panel.ns-panel .nsp-frame--transparent .nsp-frame-head{margin-right:-34px!important}}

/* QUOTE-INDENT and the hero rhythm (two mobile-tier laws; >=768 is
   byte-identical to today everywhere in this block).

   Quotes come in two right-side species, and the law respects both. A quote
   with COMPETING COLUMN CONTENT (a neighbour in its row) has no right
   spacing of its own - it overhangs its column by a stored 20px toward the
   neighbour's gutter; only its LEFT indent joins the mobile tier, the
   overhang stays. A STANDALONE quote (only child of its row) carries a
   designed ragged-right measure, right ~2.2x the left; at the mobile tier
   both sides shrink together and keep that asymmetry - left one --ns-sp-4,
   right two - because shrinking only the left would slide the box and GROW
   the right. Post bodies (both embedded variants) trade their fixed 50px
   blockquote padding for the same token. Above the phone line every species
   keeps its stored values: the standalone's 10% still eases with the column,
   the posts keep their 50px, nothing moves at desktop.

   The hero: the h1-to-copy gap is owned by the FOLLOWING module's fixed
   top margin (24px stored; some pages add Divi's stock 30px phone margin on
   the title module) - fixed, while the h1 shrinks from 80px to 32px type,
   so relatively the gap doubled at phone. The follower's top margin now
   breathes with the viewport (24px from 800 up - today's value - down to
   10px) and owns the rhythm alone; the title module's own bottom margin
   retires inside the hero so the two sources cannot stack. */
@media (max-width:767px){
body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .et_pb_row:has(> .et_pb_column:only-child) .et_pb_module:has(> .et_pb_text_inner > blockquote){
  margin-left:var(--ns-sp-4)!important;margin-right:calc(2*var(--ns-sp-4))!important;width:auto!important}
body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .et_pb_row:not(:has(> .et_pb_column:only-child)) .et_pb_module:has(> .et_pb_text_inner > blockquote){
  margin-left:var(--ns-sp-4)!important}
body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .ns-post-display-body blockquote,
body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .nsj-pd-body blockquote{
  padding-left:var(--ns-sp-4)!important}
/* the structural twin declares its quote roles, so the structural :has()
   chains above are not needed there (DIVI-EXIT §3): same values, by class. */
.ns-ir .ns-quote-breaker{
  margin-left:var(--ns-sp-4)!important;margin-right:calc(2*var(--ns-sp-4))!important;width:auto!important}
.ns-ir .ns-hdr .ns-quote{margin-left:var(--ns-sp-4)!important;width:auto!important}
}
body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .ns-hdr .et_pb_module:has(h1){margin-bottom:0!important}
body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .ns-hdr .et_pb_module:has(h1) + .et_pb_module{margin-top:clamp(10px,3vw,24px)!important}

/* 1.5.0 - the width law applies to what its comment describes: sections and
   rows ("text rows, painted blocks and panels alike"), never a COLUMN. A
   column's siblings and its own right margin are Divi's to set: Divi zeroes
   margin-right on a row's last column, so an .ns-block column got one auto
   margin and one zero and the whole 54px of slack landed on the left - the
   box read as indented rather than centred. Only three elements on the site
   are .ns-block columns (the three tables on generative-ai-audit-framework);
   every other .ns-block is a section or a row and is unaffected. */
/* CONTENT-WIDTH. One width law for everything, two tiers, per the owner:
   95% down to the phone line, 90% on mobile - text rows, painted blocks and
   panels alike, all centred and all still capped by their stored
   max-width:1080, so from ~1137 up nothing changes at all.

   Why it exists: rows carried a ratio (theme width:90%) while the block and
   panel SECTIONS carried only the cap - and a cap stops insetting the moment
   the viewport reaches it, so blocks ran full-bleed below ~1137 while the
   text kept its gutter. Now every surface takes the same min(ratio, cap).

   What it deliberately does NOT touch: nested rows (.et_pb_row_nested - the
   ns-3up overhang and its kind size against their column, not the page) and
   any row inside a block or panel section (those are 100% of their section
   by design; the section carries the law for them).

   Two recorded notes. (1) Owner's direction: this lives in the framework FOR
   NOW; the lasting home is a Divi preset - one preset, not per-page values.
   (2) Finding, predating this rule: per-row stored widths at page level
   (ns-cta's 100% and friends) do not render on this site - divi-dynamic-css
   loads BEFORE the theme stylesheet, so equal-specificity per-row
   declarations lose by order. They were inert before this rule and remain
   inert under it. */
body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .ns-block:not(.et_pb_column),
body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .ns-panel:not(.et_pb_column){
  width:95%;margin-left:auto;margin-right:auto}
/* The text's gutter is not row width on this markup generation - it is the
   SECTION's horizontal padding, min(5%, 60px). Above the phone line the law
   halves the ratio: min(2.5%, 60px), so the text column runs at 95% until
   its own max-width:1080 cap takes over (~1137, where the desktop rendering
   is unchanged by arithmetic). Padding longhands only - the sections'
   vertical padding is SECTION-PADDING's business, not this rule's. The rows
   centre under their cap; today content equals row width and auto resolves
   to zero, so this only acts once the cap bites. */
@media (min-width:768px){
body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .et_pb_section:not(.ns-block):not(.ns-panel){
  padding-left:min(2.5%,60px)!important;padding-right:min(2.5%,60px)!important}
body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .et_pb_section:not(.ns-block):not(.ns-panel) > .et_pb_row:not(.et_pb_row_nested){
  margin-left:auto;margin-right:auto}
/* the structural twin: same law, keyed on the role class (DIVI-EXIT §3) */
.ns-ir .ns-sec:not(.ns-block):not(.ns-panel){
  padding-left:min(2.5%,60px)!important;padding-right:min(2.5%,60px)!important}
}
@media (max-width:767px){
body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .ns-block:not(.et_pb_column),
body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .ns-panel:not(.et_pb_column){
  width:90%}
}

@media (min-width:768px){body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .ns-tabset .ns-tiles{display:flex;flex-wrap:nowrap;align-items:stretch}body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .ns-tabset .ns-tiles .et_pb_column{flex:1 1 0;width:auto!important;margin-right:24px!important;margin-bottom:0!important;box-sizing:border-box;float:none!important}body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .ns-tabset .ns-tiles .et_pb_column:last-child{margin-right:0!important}body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .ns-tabset .et_pb_row_4col{display:flex;flex-wrap:nowrap;align-items:stretch}body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .ns-tabset .et_pb_row_4col .et_pb_column{flex:1 1 0;width:auto!important;margin-right:24px!important;margin-bottom:0!important;box-sizing:border-box;float:none!important}body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .ns-tabset .et_pb_row_4col .et_pb_column:last-child{margin-right:0!important}}.ns-tabset :is(.et_pb_blurb_container,.nst-tile-text){overflow:visible!important;display:block!important}/* Narrow items hyphenate on explicit limits, not on the UA default.
   A tile title has a 204px measure inside a 240px tile; `hyphens:auto`
   alone leaves the minimum word length and the before/after fragments to
   the browser, and the words that actually appear here - Knowledge,
   Management, Warehouse, processing, Insights - do not reliably break.
   6 3 3: break words of 6+ characters, at least 3 characters either side. */
.ns-tabset .hovergroup h3{line-height:1.15em!important;margin:0!important;padding:0!important;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;overflow-wrap:break-word}.ns-tabset .et_pb_main_blurb_image{float:left;margin:0 10px 0 0!important;width:auto!important;height:auto!important}.ns-block{box-shadow:inset 0 10px 16px -10px rgba(255,255,255,0.12),inset 10px 0 16px -10px rgba(255,255,255,0.08),inset 0 -10px 16px -10px rgba(0,0,0,0.30),inset -10px 0 16px -10px rgba(0,0,0,0.22)}.ns-block :is(.et_pb_text_inner,.nst-inner) h2+p{display:inline}.ns-panel+:is(.et_pb_section,.ns-sec):not(.ns-panel):not(.ns-block){padding-top:0!important}.ns-prose :is(.et_pb_text,.nst-prose-text):not(.ns-table) :is(.et_pb_text_inner,.nst-inner){max-width:700px}

/* The baseline never had a heading mid-paragraph-flow, so nothing gave one a
   top margin, and its 6-8px bottom margin left the heading detached from the
   text it introduces. A sub-heading needs a clear break above and a smaller,
   deliberate gap below, or it floats between the two paragraphs. */

.ns-prose :is(.et_pb_text,.nst-prose-text):not(.ns-table) :is(.et_pb_text_inner,.nst-inner){max-width:700px}/* one owner per gap: the row margin. Everything else that could add to it is zeroed. */.ns-prose>:is(.et_pb_row,.nst-prose-row):first-of-type{margin-top:0!important}.ns-prose .nsp-frame{margin-top:0!important;margin-bottom:0!important}

/* Page-level override, chatbot-audit. Same values as the shared ".ns-block"
   emboss in the Design Baseline; delete this module once the CSS moves to
   Theme Options to Custom CSS. */
.ns-emboss{background-color:rgba(255,255,255,0.075)!important;
box-shadow:inset 0 10px 16px -10px rgba(255,255,255,0.12),
           inset 10px 0 16px -10px rgba(255,255,255,0.08),
           inset 0 -10px 16px -10px rgba(0,0,0,0.30),
           inset -10px 0 16px -10px rgba(0,0,0,0.22)!important}

/* the four counters inside the audit-stats widget */
.asw-card .asw-ch{background-color:rgba(255,255,255,0.075)!important;
box-shadow:inset 0 10px 16px -10px rgba(255,255,255,0.12),
           inset 10px 0 16px -10px rgba(255,255,255,0.08),
           inset 0 -10px 16px -10px rgba(0,0,0,0.30),
           inset -10px 0 16px -10px rgba(0,0,0,0.22)!important}
.ns-emboss .asw-card{padding-left:0!important;padding-right:0!important}
/* 3-up row: tile gutter instead of Divi's 60px */
/* FAQ accordion on the tile model, matching .ns-faq on the other pages */

.ns-faqblock :is(.et_pb_toggle_title,.nst-faq-q):before{right:24px!important}

.ns-faqblock .et_pb_accordion_item.et_pb_toggle_open{box-shadow:none!important}

.ns-faqblock :is(.et_pb_toggle_title,.nst-faq-q):before{color:#B3B3B3!important;font-size:25px!important;
transition:transform 620ms cubic-bezier(.65,0,.35,1),color 620ms cubic-bezier(.65,0,.35,1)!important;
top:auto!important;right:0!important}

/* FAQ GESTURE — structural twin only (DIVI-EXIT §3).
   On a builder page every value below already exists: Divi's own toggle
   script slides the answer, and the accordion module states its rest and
   hover shadow per module. The twin has neither, so the same law is stated
   here, scoped to .ns-ir so no builder page can move. The defaults on the
   two tokens are the legacy chevron's timing, so the shared chevron rule
   above renders identically on both. */
.ns-ir .ns-faqblock{--ns-faq-dur:700ms;--ns-faq-ease:cubic-bezier(.65,0,.35,1)}
.ns-ir .ns-faqblock .nst-faq-q:before{
  transition:transform var(--ns-faq-dur) var(--ns-faq-ease),color var(--ns-faq-dur) var(--ns-faq-ease)!important}

/* Structural FAQ answers animate their INTRINSIC height. A 0fr -> 1fr
   grid track gives the browser an interpolable value without JS measuring a
   content-box height. The bottom inset and -5px pull use the same duration, so
   spacing is present throughout the movement rather than appearing after it. */
.ns-ir .ns-faqblock .nst-faq-a{
  display:grid;grid-template-rows:1fr;overflow:hidden;visibility:visible;
  transition:grid-template-rows var(--ns-faq-dur) var(--ns-faq-ease),
             padding-bottom var(--ns-faq-dur) var(--ns-faq-ease),
             margin-top var(--ns-faq-dur) var(--ns-faq-ease),
             visibility 0s linear 0s}
.ns-ir .ns-faqblock .nst-faq-a-inner{min-height:0;overflow:hidden}
.ns-ir .ns-faqblock .nst-faq-item:not(.nst-faq-open) .nst-faq-a{
  grid-template-rows:0fr;padding-bottom:0;margin-top:0;visibility:hidden;
  transition:grid-template-rows var(--ns-faq-dur) var(--ns-faq-ease),
             padding-bottom var(--ns-faq-dur) var(--ns-faq-ease),
             margin-top var(--ns-faq-dur) var(--ns-faq-ease),
             visibility 0s linear var(--ns-faq-dur)}

/* CARD LIFT: the tile's law — 6/18 at rest, 9/24 under the pointer. An open
   card is not a target and does not lift. */
.ns-ir .ns-faqblock .nst-faq-item{transition:box-shadow 300ms ease}
.ns-ir .ns-faqblock .nst-faq-item:not(.nst-faq-open):hover{
  box-shadow:9px 9px 24px 0 rgba(255,255,255,.3)}
.ns-faqblock :is(.et_pb_toggle_open,.nst-faq-open) :is(.et_pb_toggle_title,.nst-faq-q):before{color:#58A7F9!important}

@media (max-width:640px){
}
/* explainer: embossed block. The widget reserves a 410px scene on every step
   while ink ends at 300px at worst (measured across all six steps), so the
   body is capped at 320px and the block keeps a 36px gap to the tiles. */

/* audit counter tile: side air, and type capped so the card stops driving
   the row height. Its cqi units grow the type when the card is narrowed. */
/* the card keeps the plugin's own padding and type scale */
/* FAQ: heading and cards on the same text edge as the tiles above (278) */

.ns-faqblock :is(.et_pb_toggle_title,.nst-faq-q):before{content:'\33'!important;font-family:ETmodules!important;
font-weight:400!important;background:none!important;border:0!important;border-radius:0!important;
width:auto!important;height:auto!important;line-height:1!important;
transform:rotate(0deg)!important}
.ns-faqblock :is(.et_pb_toggle_open,.nst-faq-open) :is(.et_pb_toggle_title,.nst-faq-q):before{content:'\33'!important;
transform:rotate(180deg)!important}
.ns-faqblock :is(.et_pb_toggle_title,.nst-faq-q):before{position:absolute!important;top:50%!important;right:24px!important;
margin-top:0!important;transform:translateY(-50%) rotate(0deg)!important}
.ns-faqblock :is(.et_pb_toggle_open,.nst-faq-open) :is(.et_pb_toggle_title,.nst-faq-q):before{transform:translateY(-50%) rotate(180deg)!important}

.ns-faqblock .et_pb_toggle_content:not(.nst-faq-a){transition:none!important}

/* header: baseline typography */

/* the stats column gives its card the full width: the widget's cqi type wraps
   and grows the card taller when the container is narrowed */
/* the stats column keeps the block inset like its neighbours */
/* ONE OWNER PER GAP. A block never carries a top margin; the gap above a block
   is the bottom margin of the thing before it. 36px = --ns-sp-6. */

/* the stats card scales to the space it is given, so give it less */
/* The widget only responds to width, not height: capping its height clips it.
   Scaled down proportionally instead, kept full-width by pre-scaling the box. */
.ns-emboss .asw-card{height:auto!important;width:121.9%!important;
transform:scale(.82)!important;transform-origin:top left!important;margin-bottom:-54px!important}

/* Inset image (ns-figure) */
.ns-figure{float:right;max-width:min(300px,45%);margin:4px 0 12px 24px}
@media (max-width:640px){.ns-figure{float:none;max-width:100%;margin:12px 0}}
.ns-figure figcaption,.ns-figcaption{font-family:'Open Sans',sans-serif;
  font-size:clamp(12px,1.333vw,16px);color:#B3B3B3;padding-top:6px}

@media (max-width:640px){
  .ns-panel }

.et_pb_column.ns-linked{position:relative;cursor:pointer}
body:not(.ns-vb-canvas):not([class*="et-fb"]):not([class*="et_fb"]):not(:has(#et-fb-app-body-root)) .et_pb_column.ns-linked .et_pb_text:last-child a::after{content:"";position:absolute;inset:0}

.ns-emboss .et_pb_blurb_position_left :is(.et_pb_blurb_container,.nst-tile-text){flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.ns-emboss .et_pb_blurb+.et_pb_text{margin-top:14px!important}
.ns-emboss h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:normal!important;word-break:normal!important}

.ns-emboss :is(.et_pb_blurb_description,.nst-tile-body),.ns-emboss:not(.ns-table) .et_pb_text_inner{hyphens:auto;-webkit-hyphens:auto;text-align:justify;overflow-wrap:normal!important;word-break:normal!important}
.ns-emboss:not(.ns-table) .et_pb_text:not(:first-child):last-child .et_pb_text_inner{text-align:right}

.ns-table table.data{width:100%;border-collapse:collapse;margin:0!important;
  border:0!important;font-size:var(--ns-table-text)}

.ns-table table.data th,.ns-table table.data td{text-align:left;border:0!important;
  line-height:1.4;vertical-align:top;color:var(--gcid-body-color,rgba(255,255,255,0.8));
  font-family:'Open Sans',sans-serif;font-size:var(--ns-table-text)}
.ns-table table.data thead th{font-family:'Special Elite',fantasy;font-weight:400;
  color:#58A7F9;font-size:calc(var(--ns-table-text) + 2px);
  line-height:1.2;vertical-align:bottom}
.ns-table table.data tbody tr:nth-child(odd){background:#0E1834}
.ns-table table.data tbody tr:nth-child(even){background:none}

.ns-table figcaption,.ns-table .table-sources{display:block;font-size:11px;
  line-height:1.55;opacity:.7;margin-top:.5em}
@media (max-width:767px){
  .ns-table{--ns-table-text:11px}
  .ns-table table.data{display:block;overflow-x:auto}}

:is(.et_pb_text,.nst-inner) li+li{margin-top:2px}

.ns-block :is(.et_pb_text_inner,.nst-inner) h3+p{display:inline}

/* FAQ block on a page: the static box look (2.1 wash + 2.2 emboss). Its padding
   is a Divi setting on the column, not here. */
.ns-faqblock{box-shadow:inset 0 10px 16px -10px rgba(255,255,255,0.12),
           inset 10px 0 16px -10px rgba(255,255,255,0.08),
           inset 0 -10px 16px -10px rgba(0,0,0,0.30),
           inset -10px 0 16px -10px rgba(0,0,0,0.22)!important}
/* inside a panel the same block is flat, per 2.1 */

/* the only FAQ measurement Divi cannot express: the card's own inset */

/* the tile's closing link sits on the tile floor: a flex pin. Divi's margin
   field rejects `auto`, so this one declaration stays. */
.et_pb_column.ns-emboss>.et_pb_module:not(:first-child):last-child{margin-top:auto!important}
/* the h1 inside the builder canvas only: the fitter cannot run there (8.7) and a
   size typed into Divi would beat the fitter on the front end. */
body.ns-vb-canvas .ns-hdr h1,body[class*="et-fb"] .ns-hdr h1,
body[class*="et_fb"] .ns-hdr h1,body:has(#et-fb-app-body-root) .ns-hdr h1{font-size:clamp(32px,5vw,60px);line-height:1.15em}

/* The stock button border, cancelled in the head rather than per page.

   Divi's base stylesheet carries `.et_pb_button{border:2px solid}` with no
   colour, so it resolves to currentColor - white on this site. Every page's own
   button rule sets `border-width:0`, but that rule travels in the page's module
   CSS, which Divi delivers after the content on any page that registers styles
   late. So the button paints as a white outline first, and because the same
   base rule sets `transition:all .2s`, the correction is not a flip: the border
   ANIMATES from 2px white to nothing over ~600ms, measured on /legal/. A value
   arriving late is a flash; a value arriving late through a transition is an
   animation the visitor watches.

   Two classes, so it beats the base rule from a stylesheet enqueued earlier,
   and no !important, so a page that genuinely wants a border still wins with
   its own higher-specificity rule. The transition is deliberately left alone -
   `all` is what slides the hover arrow, and with the border correct from the
   first frame there is nothing left for it to animate. */
.et_pb_button.et_pb_button{border-width:1px;border-style:solid;border-color:var(--ns-btn-edge)}

/* ---- the design, shared ------------------------------------------------
   Two selectors, one definition. `.ns-btn` is the neutral hook: any plugin
   button that carries it inherits this material instead of cloning it. Doubled
   so it clears a plugin's own two-class rule without !important.
   What is NOT here: font-size, padding and text-align. Those are the two
   things a plugin button legitimately owns - the audit buy button is a
   three-line stack sized by container queries (8.8cqw / 7.2cqw / 4cqw) and the
   team download tile is a fixed 240x80 box. Forcing a size on either would
   break it. Face, weight, tracking and colour ARE here: they are the design,
   not the metrics. */
body:not(#ns-x) .et_pb_button.et_pb_button.et_pb_button.et_pb_button,
body:not(#ns-x) .ns-btn.ns-btn{
  position:relative;
  isolation:isolate;
  border:1px solid var(--ns-btn-edge);
  border-radius:var(--ns-btn-radius);
  /* The fallback is NOT `fantasy`. Special Elite is served locally with
     font-display:swap, so whatever stands second here paints for the whole
     download window, and `fantasy` resolves to Impact on Windows, Papyrus on
     macOS and a serif on Linux. Open Sans is also the closest by metrics,
     measured on the live label at 16px: Special Elite 335px, Open Sans 359px
     (+7.2%), Courier New 485px (+44.8%). */
  font-family:'Special Elite','Open Sans',Helvetica,Arial,sans-serif;
  font-weight:500;
  letter-spacing:var(--ns-btn-track);
  color:var(--ns-accent);
  background-color:var(--ns-btn-scrim);
  background-image:
    linear-gradient(145deg,var(--ns-btn-body-a),var(--ns-btn-body-b)),
    radial-gradient(circle at 18% 14%,rgba(var(--ns-btn-rim),.13),transparent 48%);
  box-shadow:var(--ns-btn-inner),var(--ns-btn-bloom),var(--ns-btn-lift),var(--ns-shadow-rest);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

/* Divi buttons only: the metrics. A Divi button has no layout of its own, so
   the framework supplies size, tracking weight and box. Plugin buttons keep
   theirs. !important because Divi's module CSS states these !important too and
   lands later in the body. */
body:not(#ns-x) .et_pb_button.et_pb_button.et_pb_button.et_pb_button{
  padding:var(--ns-btn-pad-y) var(--ns-btn-pad-x)!important;
  text-align:center;
  font-size:var(--ns-btn-fs)!important;
  letter-spacing:var(--ns-btn-track)!important;
  color:var(--ns-accent)!important;
}

/* Hover, shared: the old glow expands rest -> hover. No colour change - the
   accent is at full strength in both states. */
body:not(#ns-x) .et_pb_button.et_pb_button.et_pb_button.et_pb_button:hover,
body:not(#ns-x) .ns-btn.ns-btn:hover{
  box-shadow:var(--ns-btn-inner),var(--ns-btn-bloom),var(--ns-btn-lift),var(--ns-shadow-hover);
}

/* Hover, Divi only: the 1px step. Derived from the rest size rather than
   stated as a second clamp - as its own curve it drifted, measuring +0.84px at
   1200px because the two carried different slopes (1.6vw against 1.67vw). A
   plugin button that wants the same step derives it the same way from its own
   size; it cannot inherit a step from a size it does not use. */
body:not(#ns-x) .et_pb_button.et_pb_button.et_pb_button.et_pb_button:hover{
  font-size:var(--ns-btn-fs-hover)!important;
}

/* Outline-only rim - four 1px edge paints, no mask, no SVG. Divi kills both
   button pseudo-elements per module with
     body #page-container .et_pb_section .et_pb_button_N:before{display:none!important}
   at (1,2,2), and importance beats specificity, hence display:block!important.
   inset:-1px puts the rim on the border row: on the sample the rim rides the
   outer bubble and the border the inner grid, and a button is one element.

   FOUR classes on the Divi selector, not three. Divi's per-module HOVER
   selector is (1,3,1) - the :hover counts - and at three classes this rule tied
   and lost on source order. */
body:not(#ns-x) .et_pb_button.et_pb_button.et_pb_button.et_pb_button::before,
body:not(#ns-x) .ns-btn.ns-btn::before{
  content:"";
  display:block!important;
  position:absolute;
  inset:-1px;
  z-index:4;
  box-sizing:border-box;
  border-radius:inherit;
  pointer-events:none;
  opacity:1;
  transform:none;
  margin:0;
  background:
    linear-gradient(90deg,rgba(var(--ns-btn-rim),.16) 0%,rgba(255,255,255,.72) 17%,rgba(var(--ns-btn-rim),.48) 38%,rgba(255,255,255,.09) 68%,rgba(var(--ns-btn-rim),.18) 100%) top / 100% 1px no-repeat,
    linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(var(--ns-btn-rim),.28) 32%,rgba(255,255,255,.36) 68%,rgba(var(--ns-btn-rim),.12) 100%) right / 1px 100% no-repeat,
    linear-gradient(270deg,rgba(var(--ns-btn-rim),.14) 0%,rgba(255,255,255,.42) 23%,rgba(var(--ns-btn-rim),.34) 56%,rgba(255,255,255,.08) 82%,rgba(var(--ns-btn-rim),.14) 100%) bottom / 100% 1px no-repeat,
    linear-gradient(0deg,rgba(255,255,255,.10) 0%,rgba(var(--ns-btn-rim),.31) 36%,rgba(255,255,255,.21) 72%,rgba(var(--ns-btn-rim),.13) 100%) left / 1px 100% no-repeat;
  box-shadow:inset 0 0 0 1px rgba(var(--ns-btn-rim),.10);
}

/* ---- root defaults ------------------------------------------------------
   Divi's base stylesheet sets body and headings to font-weight 500. The design
   is 400 throughout, so it is corrected ONCE here instead of on every module.
   Scoped to the content area: that beats Divi's base rule on specificity
   without !important, so a component that genuinely wants another weight (the
   button, 500) still wins with its own setting.
   Colour is NOT here: body, heading, link and primary now come from Divi
   Global Colours, set 2026-08-06. ---------------------------------------- */
.et-l--post,.et-l--body,.ns-ir{font-weight:400}
.et-l--post h1,.et-l--post h2,.et-l--post h3,.et-l--post h4,.et-l--post h5,.et-l--post h6,.ns-ir h1,.ns-ir h2,.ns-ir h3,.ns-ir h4,.ns-ir h5,.ns-ir h6{font-weight:400}

/* the controller clones the tile description into .ns-tab-lead; the clone is
   outside its module's CSS scope, so its type has to be stated here. */
.ns-tab-lead,.ns-tab-lead p{line-height:1.7em}

.ns-faqblock :is(.et_pb_toggle_open,.nst-faq-open) :is(.et_pb_toggle_title,.nst-faq-q){color:#58A7F9!important}
/* An in-panel FAQ block cancels the emboss shadow. This is a reset of another
   CSS rule, not a Divi value - Divi emits nothing for "no shadow". The wash
   that used to live here is now a Divi background on the column. */
.ns-panel .ns-faqblock,.ns-panel.ns-panel .ns-faqblock{box-shadow:none!important}

.ns-tabset :is(.et-pb-icon,.nst-tile-glyph){line-height:1!important;display:block}

/* restored: the blurb's content box must be a block. Divi makes it flex, and a
   flex child does not animate its max-height, so the tile's description snapped
   shut instead of collapsing over 1600ms. Divi exposes no setting for this inner
   element, so it belongs here. */
.ns-tabset :is(.et_pb_blurb_content,.nst-tile-inner){display:block!important}

.ns-tabset :is(.et_pb_column,.nst-tile).hovergroup.ns-pagebg{
  background-color:var(--ns-bg-page,#050F2C)!important;
  background-image:linear-gradient(180deg,
    var(--ns-bg-page-top,#0B2050) calc(0px - var(--ns-tile-y,0px)),
    var(--ns-bg-page,#050F2C) calc(var(--ns-bg-fade,900px) - var(--ns-tile-y,0px)),
    var(--ns-bg-page,#050F2C) 100%)!important;
  background-repeat:no-repeat!important;
}

.ns-tabset.is-tabbed{box-shadow:inset 0 10px 16px -10px rgba(255,255,255,0.12),inset 10px 0 16px -10px rgba(255,255,255,0.08),inset -10px 0 16px -10px rgba(0,0,0,0.22)!important}

.ns-tabset.ns-tabset{transition:margin-bottom 0s linear 1600ms,box-shadow .5s ease}.ns-tabset.ns-tabset.is-tabbed{transition:margin-bottom 0s,box-shadow .5s ease}
.ns-panel.ns-panel{transition:max-height 1600ms cubic-bezier(.65,0,.35,1),padding-bottom 1600ms cubic-bezier(.65,0,.35,1)}
.ns-panel.ns-panel:not(.ns-open){padding-bottom:0!important}

.ns-fly p{padding-bottom:16px}

.ns-panel.ns-panel.ns-open:not(.ns-stage2) > :is(.et_pb_row,.nst-panel-main-row,.nst-faq-row){opacity:0}

/* The strip has no colour of its own: JS states the page colour at the
   tile's height. An unset variable must therefore paint NOTHING - the
   old literal fallback showed as top-of-page navy wherever the colour
   was not stated. */
.ns-tabset.is-tabbed .hovergroup.is-active::after{content:'';position:absolute;top:100%;left:0;right:0;height:var(--ns-bridgeh,0px);background:var(--ns-bridge,transparent)}

.ns-tabset .hovergroup :is(.et_pb_blurb_description,.nst-tile-body){overflow:hidden;transition:max-height 1600ms cubic-bezier(.65,0,.35,1),opacity 1600ms cubic-bezier(.65,0,.35,1)}

.ns-tabset.is-tabbed .hovergroup.is-active :is(.et_pb_blurb_description,.nst-tile-body){max-height:none!important;opacity:1!important}

.ns-tabset.is-tabbed .hovergroup:not(.is-active){align-self:flex-start}

.ns-tabset.is-tabbed .hovergroup.is-active{overflow:visible}

.ns-tabset.is-tabbed .hovergroup.is-active h3{position:relative;z-index:3}

.ns-panel.ns-panel{--ns-lead-top:24px}

.ns-panel.ns-panel::before{height:auto;bottom:0}
.ns-panel.ns-panel.ns-open.ns-stage2 > :is(.et_pb_row,.nst-panel-main-row,.nst-faq-row){opacity:1}
.ns-panel.ns-panel .ns-tab-lead{display:none!important}

/* the rail column sits flush to the window top, beside the flown lead */
.ns-panel.ns-panel.ns-open > :is(.et_pb_row,.nst-panel-main-row) > :is(.et_pb_column,.nst-panel-content,.nst-rail):nth-child(2){margin-top:calc(-1*var(--ns-lead-off,0px));transform:translateY(320px)}
.ns-panel.ns-panel.ns-open.ns-colgo > :is(.et_pb_row,.nst-panel-main-row) > :is(.et_pb_column,.nst-panel-content,.nst-rail):nth-child(2){transform:translateY(0);transition:transform 2600ms cubic-bezier(.5,0,.35,1)}

.ns-panel.ns-panel{overflow:hidden}

.ns-tabset.is-tabbed .hovergroup.is-active::after{transition:opacity 2600ms cubic-bezier(.5,0,.35,1)}
.ns-tabset.is-tabbed .hovergroup.is-active.ns-bridgefade::after{opacity:0}

.ns-panel.ns-panel.ns-open.ns-rev > :is(.et_pb_row,.nst-panel-main-row) > :is(.et_pb_column,.nst-panel-content,.nst-rail):nth-child(2){transform:translateY(var(--ns-railout,320px));transition:transform 1200ms cubic-bezier(.65,0,.5,1)}
.ns-tabset .hovergroup.is-active.ns-rev::after{transition:opacity 1200ms cubic-bezier(.65,0,.5,1)}

/* structural: the theme draws a rule under every dropdown link */
html:not(.ns-menu-off) #main-header .nav li ul.sub-menu a,
html:not(.ns-menu-off) #main-header .et_mobile_menu a{ border-bottom: 0 !important; }

/* Nothing here sets a padding, an offset or a size. The site header already
   lays its menu out correctly - the chevron spacing and alignment included -
   and the only thing wrong with it was its colours. A page that builds a second
   menu out of a Divi menu module inherits that module's own layout instead, and
   then needs numbers to put the chevron back where the header already had it.
   Use the header. */

/* Type and dropdown geometry.

   The menu asks for weight 600 and Special Elite ships only 400, so the browser
   synthesises the bold - the same smeared glyphs the left tabs had. 400 is not
   a choice, it is the only weight the face has.

   The dropdown then follows the bar it hangs from. Divi's stock version is a
   fixed 260px box of Open Sans 14px under a 3px accent rule, its items indented
   20px from the item they belong to.

   Three things have to be true at once, and they pull against each other:

     the items' text aligns with the parent item's text
     the hover highlight runs the full width of the panel
     the highlight still has air to the left of the text

   Removing the left inset satisfies the first two and breaks the third - the
   highlight then starts exactly at the glyphs. The inset is what gives the
   highlight its air, so it stays, and the PANEL moves left by the same amount
   instead: `padding-left: X` on the link, `margin-left: -X` on the list, one
   token so they cannot drift apart. The text lands where the parent's text is,
   the panel hangs slightly left of it, and the link still spans the panel.

   Measured on /foldout-test/: text delta 0px from the parent item (was 20px),
   panel extends 15px left of the text, highlight flush 0px at both ends.

   The 20px indent came from the theme's `padding-left` on the submenu LI, on top
   of the link's own - which is why the LI is zeroed and the link owns the inset.

   Width is `max-content` with `min-width:100%`: never narrower than the parent,
   never wider than it needs. A fixed width is what wrapped "Natural Language
   Processing" onto three lines once the type changed under it. */
html:not(.ns-menu-off) #main-header .nav li a{ font-weight:400 !important; }

html:not(.ns-menu-off) #main-header .nav li ul.sub-menu{
  --ns-sub-pad: clamp(12px, 1vw, 16px);
  border-top:0 !important;
  width:max-content !important; min-width:100% !important;
  padding:8px 0 !important;
  margin-left: calc(-1 * var(--ns-sub-pad)) !important;
}
html:not(.ns-menu-off) #main-header .nav li ul.sub-menu li{
  width:auto !important; padding:0 !important; margin:0 !important;
}
html:not(.ns-menu-off) #main-header .nav li ul.sub-menu li a{
  font-family:inherit !important; font-size:15px !important; font-weight:400 !important;
  line-height:1.25 !important; white-space:nowrap !important; display:block !important;
  width:auto !important; padding:7px var(--ns-sub-pad) !important;
}

/* structural: the theme clips the submenu; the panel's shadow and any
   overlay the surface owner adds must not be cut off */
html:not(.ns-menu-off) #main-header .nav li ul.sub-menu{
  overflow: visible !important;
}

/* Responsive type, and the whitespace gap.

   The menu ran a flat 16px from 1500px down to the 980px mobile switch, where
   the six items plus the logo have 200px less room than they started with. It
   now eases with the viewport on the site's own pattern - a clamp whose middle
   term is a vw expression, not a breakpoint - so nothing steps.

       16px at 1400 and above, 14px at 980 where the mobile menu takes over,
       continuous between. Derived from those two anchors rather than picked:
       slope (16-14)/(1400-980) = 0.476vw, intercept 9.333px.

   The dropdown follows one notch down, 15 -> 13.5.

   `word-spacing: -5px` on the list removes the gap between items. The menu is
   inline-block, so the newline between each <li> in the markup renders as a
   space - measured 5px between every pair. It is not a margin and there is no
   padding to remove; the only way to reach it is to collapse the whitespace
   itself, which is what this does. The items restore their own word-spacing so
   nothing inside them is affected. */
/* `:not(.my-account)` is load-bearing. The account item is an icon whose LABEL
   is hidden with `font-size: 0`; an !important size on every top-level link
   restored it to 15px, at which point "My account" appeared as text, wrapped to
   a second row and took the header from 90px to 134px - which in turn grew the
   logo from 49px to 72px, because the theme sizes the logo from the header. A
   font-size rule turned into a layout bug two steps away from itself. */
html:not(.ns-menu-off) #main-header{
  /* 16px at 1400 and above, 12px where Divi hands over to the hamburger at
     980, a straight line between. The old curve ran 16 to 14 - a 12.5% travel
     against a bar whose room shrinks far faster - so the menu reached a second
     line at about 1130 and the band went 69px to 110px in one step.

     Everything else in the header is a percentage of that band, so the whole
     bar stepped with it: the logo, sized `calc(100% - 12px)`, jumped 57px to
     98px, i.e. it grew as the window got NARROWER. That was diagnosed as a
     logo defect and it is not one - the logo tracked the band correctly and
     the band was wrong. Capping the logo would have hidden the step, not
     removed it. Fix the wrap and the logo holds 57px from 1920 to 980,
     measured, with no cap anywhere.

     The curve is continuous on purpose. Putting the shrink inside the media
     query below stepped the type 15.5px to 12.6px at 1250, which is the same
     defect one property along. Only the horizontal tightening is
     media-scoped, because it does not touch the band. */
  --ns-menu-fs: clamp(12px, calc(2.67px + 0.952vw), 16px);
  --ns-menu-fs-shrink: 2px;      /* taken off in the detached state */
}
/* Horizontal room, the other half. Type alone does not close the wrap; these
   two do the rest and cost nothing vertically. Below 1250 only - at wide
   widths the bar has room and the spacing is the design's. */
@media (max-width:1250px){
  html:not(.ns-menu-off) #main-header #top-menu > li{ padding-right: 8px !important; }
  html:not(.ns-menu-off) #main-header #top-menu{ word-spacing: -8px; }
}
html:not(.ns-menu-off) #main-header #top-menu > li:not(.my-account) > a{
  font-size: var(--ns-menu-fs) !important;
}
html:not(.ns-menu-off) #main-header.et-fixed-header #top-menu > li:not(.my-account) > a{
  /* max() floors it: with the base curve reaching 12px at the handover, a flat
     2px shrink would render the detached bar at 10px. */
  font-size: max(11px, calc(var(--ns-menu-fs) - var(--ns-menu-fs-shrink))) !important;
}
html:not(.ns-menu-off) #main-header .nav li ul.sub-menu li a{
  font-size: clamp(13.5px, calc(10px + 0.357vw), 15px) !important;
}
html:not(.ns-menu-off) #main-header #top-menu{ word-spacing: -5px; }
html:not(.ns-menu-off) #main-header #top-menu li{ word-spacing: normal; }

/* Band height. The bar's thickness is one symmetric value: the nav's
   `padding-top` and the same figure as `padding-bottom` on each top-level link.
   The theme runs 33px full / 20px detached, giving 87px and 61px.

   Narrowed to 24px / 8px, measured 69px and 37px - the asked-for 20% and 40%.
   Solved by measurement rather than arithmetic: the band is padding twice plus
   a line box, and the line box moves with the responsive type, so scaling the
   padding by .8 would not have produced a band .8 as tall.

   The logo follows, because the theme sizes it at `max-height: 54%` of the
   header: 47 -> 37 full, 33 -> 20 detached. That is the honest consequence of a
   narrower band, but 20px is small for a wordmark - raise --ns-logo-fixed if
   the mark matters more than the band at that size. */
html:not(.ns-menu-off) #main-header #et-top-navigation{ padding-top: 24px !important; }
html:not(.ns-menu-off) #main-header #top-menu > li > a{ padding-bottom: 24px !important; }
html:not(.ns-menu-off) #main-header.et-fixed-header #et-top-navigation{ padding-top: 8px !important; }
html:not(.ns-menu-off) #main-header.et-fixed-header #top-menu > li > a{ padding-bottom: 8px !important; }
/* The theme's `max-height: 54%` was sized for a 61px band and leaves the mark
   at 20px in a 37px one, where the circles around the 9 stop resolving. The
   mark is mostly whitespace, so it can take the full band less 1px of air top
   and bottom - nothing else in the bar is that tall. */
html:not(.ns-menu-off) #main-header .logo_container img{
  max-height: var(--ns-logo-air, calc(100% - 12px)) !important;
}
/* detached, the band is 37px and every pixel counts: 1px of air rather than 6 */
html:not(.ns-menu-off) #main-header.et-fixed-header .logo_container img{
  max-height: var(--ns-logo-air-fixed, calc(100% - 2px)) !important;
}

/* Collapse, animated. Divi swaps .et-fixed-header on a scroll threshold, so
   every value keyed to that class steps from one number to the other in a single
   frame: the band, the type, the logo and the veil all jump at once.

   Each of those properties is transitioned instead, on one token so they cannot
   drift out of step with each other. They must share a duration - a band that
   arrives before its type reads as two separate movements.

   `font-size` and a percentage `max-height` both animate; the header's own
   background already eases from the bar rules. The transition is suppressed
   until the derivation has run once ([data-ns-menu]), so the first paint arrives
   at its value instead of travelling to it. */
html:not(.ns-menu-off) #main-header{
  --ns-menu-ease: .30s cubic-bezier(.4, 0, .2, 1);
}
html:not(.ns-menu-off) #main-header[data-ns-menu] #et-top-navigation,
html:not(.ns-menu-off) #main-header[data-ns-menu] #top-menu > li > a,
html:not(.ns-menu-off) #main-header[data-ns-menu] .logo_container img,
html:not(.ns-menu-off) #main-header[data-ns-menu] .logo_container{
  transition: padding var(--ns-menu-ease), font-size var(--ns-menu-ease),
              max-height var(--ns-menu-ease), height var(--ns-menu-ease);
}

@media (max-width:980px){
  .ns-panel.ns-panel > :is(.et_pb_row,.nst-panel-main-row) > :is(.et_pb_column,.nst-panel-content,.nst-rail):last-child:not(:first-child){
    width:100%!important;max-width:none!important;margin-right:0!important}
}