/* ==========================================================================
   3DOptix redesign — site chrome.
   Depends on: dxr-tokens.css, dxr-components.css

   Contents
     §1 Announcement topbar (dismissible)
     §2 Sticky nav bar + active pill + spectrum rule + the 901-1075px fit band
     §3 Products dropdown (380px) and the narrow secondary menus
     §4 Mobile hamburger + drawer (< 900px), incl. the 320px fit
     §4a Auth-dependent chrome — the logged-in / logged-out branches
     §5 Footer

   Three widths in this file are load-bearing and each carries its arithmetic
   in a comment: 901px (narrowest desktop bar), 1076px (where the full-size bar
   resumes) and 320px (narrowest phone). Change a nav padding, gap, label or
   logo size and the sums have to be redone.

   The 7-stop --dxr-spectrum gradient appears in EXACTLY TWO rules in the whole
   codebase, and both are in this file: .dxr-nav__spectrum (2px) and
   .dxr-footer__spectrum (3px).
   ========================================================================== */

/* ==========================================================================
   §1 Announcement topbar
   ========================================================================== */
.dxr-topbar{
  background:var(--dxr-ink-deep);
  border-bottom:1px solid var(--dxr-border-on-dark-faint);
}
.dxr-topbar[hidden]{display:none}
.dxr-topbar__inner{
  max-width:var(--dxr-container);margin:0 auto;
  padding:11px var(--dxr-gutter);
  display:flex;align-items:center;gap:14px;
}
.dxr-topbar__msg{
  font:500 11px/1.4 var(--dxr-font-mono);letter-spacing:.04em;
  color:var(--dxr-on-dark-body-alt);
}
/* nowrap + no shrink, or the link is the flex item that gives way: at 360px it
   collapsed to 39px and broke "Join a beta ->" over four lines while the
   message beside it kept a comfortable measure. The message is the item that
   should absorb the squeeze — it wraps into prose, the link does not. */
.dxr-topbar__link{
  font:500 11px/1.4 var(--dxr-font-mono);color:var(--dxr-cyan-light);
  flex-shrink:0;white-space:nowrap;
}
.dxr-topbar__link:hover{color:var(--dxr-on-dark)}
/* Not in the prototype; required (README: "should be dismissible in production"). */
.dxr-topbar__close{
  margin-left:auto;flex-shrink:0;
  width:24px;height:24px;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;
  color:var(--dxr-on-dark-caption);
  font:400 14px/1 var(--dxr-font-sans);
}
.dxr-topbar__close:hover{color:var(--dxr-on-dark)}

/* ==========================================================================
   §2 Sticky nav bar
   ========================================================================== */

/* ANCHOR OFFSET — global, and deliberately on :root rather than on a redesign
   scope. The nav is position:sticky;top:0 at 76px tall, so without this EVERY
   in-page anchor jump lands its target underneath the bar: #FAQ-Section on
   /pricing/, the 14-entry table of contents on /privacy-policy/, and every
   heading link in an Academy article. Legacy Elementor pages sit under this
   same sticky bar, so they need the offset too — this is one of the few rules
   that must apply site-wide rather than behind .dxr-shell--dxr.
   The 12px is breathing room so the heading is not flush against the border. */
html{scroll-padding-top:calc(var(--dxr-nav-h) + 12px)}

.dxr-nav{
  position:sticky;top:0;z-index:var(--dxr-nav-z);
  background:var(--dxr-nav-bg);
  -webkit-backdrop-filter:var(--dxr-nav-blur);
  backdrop-filter:var(--dxr-nav-blur);
  border-bottom:1px solid var(--dxr-border);
  box-shadow:var(--dxr-shadow-nav);
}
.dxr-nav__inner{
  max-width:var(--dxr-container);margin:0 auto;padding:0 var(--dxr-gutter);
  height:var(--dxr-nav-h);
  display:flex;align-items:center;justify-content:space-between;
  /* Prototype value 36px, held from ~1440px up; fluid down to 18px so the bar
     still fits at the 901px edge, where the drawer has not taken over yet. */
  gap:clamp(18px,2.5vw,36px);
}

/* The logo is the ONE elastic piece of the bar. It keeps its intrinsic ratio
   while shrinking because the height is expressed as max-height and the width
   is auto: under max-width:100% a replaced element scales both axes, so it can
   never squash. min-width is a floor so it cannot be squeezed away entirely.
   --dxr-nav-logo-h is local to the shell; the token stays the 30px default. */
.dxr-nav__logo{display:flex;align-items:center;flex-shrink:1;min-width:88px}
.dxr-nav__logo img{
  height:auto;width:auto;min-width:0;display:block;
  max-height:var(--dxr-nav-logo-h,var(--dxr-logo-h-nav));
  max-width:100%;
}

.dxr-nav__items{display:flex;align-items:center;gap:2px}
.dxr-nav__item{position:relative}

/* THE ACTIVE PILL — behind the label, not an underline. An underline would
   collide with the spectrum rule 2px below. The pill is a sibling div BEFORE
   the link and the link is position:relative; that ordering is the whole
   mechanism. Do not reimplement as ::before. */
.dxr-nav__pill{
  position:absolute;inset:3px 4px;
  border-radius:var(--dxr-radius-pill);
  background:var(--dxr-primary-tint);
  pointer-events:none;
}
.dxr-nav__link{
  position:relative;                      /* lifts the label above the pill */
  display:flex;align-items:center;gap:7px;
  /* 15px is the prototype value (reached at ~1430px). Six unshrinkable labels
     sit in this row, so the horizontal padding is what gives way first as the
     viewport narrows towards 901px. Vertical padding never changes. */
  padding:12px clamp(8px,1.05vw,15px);
  font:600 14px/1 var(--dxr-font-sans);color:var(--dxr-body);
}
.dxr-nav__link:hover{color:var(--dxr-primary)}
.dxr-nav__caret{font-size:9px;opacity:.55}  /* typographic, not an icon */

/* right cluster */
.dxr-nav__actions{display:flex;align-items:center;gap:16px;flex-shrink:0}
.dxr-nav__login{white-space:nowrap;font:600 14px/1 var(--dxr-font-sans);color:var(--dxr-body)}
.dxr-nav__login:hover{color:var(--dxr-primary)}

/* SIGNATURE RULE — placement 1 of 2 site-wide */
.dxr-nav__spectrum{height:var(--dxr-spectrum-h-nav);background:var(--dxr-spectrum)}

/* --------------------------------------------------------------------------
   THE SQUEEZE BAND — 901px to 1075px.
   The drawer does not take over until 900px and that breakpoint is not
   moveable, so the full desktop bar has to survive this band. At the prototype
   sizes it does not: the bar needs 1068.8px of viewport, so everything from
   901px to 1068px scrolled the page sideways.

   All glyph widths below were measured from the shipped fonts (Plus Jakarta
   Sans v12, weights 600 and 700, at 14px), not estimated. Plus Jakarta Sans is
   the worst case: the Segoe UI fallback used during FOUT is ~30px narrower
   across the six labels.

   Arithmetic at the tightest point in the band, 901px
   (gutter = clamp(20px,4vw,40px) = 36.0px; logo ratio 330/69):
     available    901 - 2 x 36.0                                    = 829.0px
     logo         24px tall x 330/69                                = 114.8px
     labels       62.2 Products + 79.8 Technology + 63.4 Solutions
                  + 71.6 Resources + 46.8 Pricing + 42.1 About      = 365.8px
     carets       4 x (5.8px U+25BE at 9px + its 7px gap)           =  51.0px
     link padding 6 x 2 x 8px  +  5 x 2px item gap                  = 106.0px
     CTA          2 x 14px padding + 64.5px "Start free" + 2px border=  94.5px
     flex gaps    2 x 16px (logo | items | actions)                 =  32.0px
                                                              total = 764.2px
     764.2 < 829.0  ->  64.7px spare (8.5%), which is the headroom for a
     translated label or a different fallback face.
   "Log in" is the piece that does not fit (39.9px plus its 16px gap); it drops
   out below 1075px and stays reachable in the footer Company column. The
   primary CTA is never touched. Above the band the full-size bar needs 926.2px
   of the 996px available at 1076px, so the hand-off is safe on both sides.
   -------------------------------------------------------------------------- */
/* No lower bound on purpose. A (min-width:901px) floor here would leave a
   sub-pixel sliver at e.g. 900.5px — reachable with browser zoom and on
   fractional device widths — where neither this band nor the <=900px block
   matches, so the full-size desktop bar would render and scroll sideways.
   The <=900px block below is later in source order and overrides every
   declaration in here, so letting this band extend down is harmless. */
@media (max-width:1075px){
  .dxr-nav{--dxr-nav-logo-h:24px}
  .dxr-nav__inner{gap:16px}
  .dxr-nav__link{padding:12px 8px}
  /* scoped to the nav so the shared .dxr-btn--nav size is unchanged elsewhere */
  .dxr-nav .dxr-btn--nav{padding:0 14px}

  /* The bar fitting is not enough: an OPEN panel also has to stay inside the
     viewport, or it re-creates the sideways scroll the moment it is used. At
     901px the last item (About) sits with its left edge at 618.9px, so its
     300px narrow panel at left:-8px would reach 910.9px — 9.9px past the
     901px edge. Anchoring the last item's panel to its right edge instead puts
     it at 397.7-697.7px. Only the last item can overflow: the next one in
     (Resources) reaches 743.7px. Above the band the left anchor fits, so the
     prototype's alignment is what ships at desktop width. */
  .dxr-nav__item:last-child > .dxr-dropdown{left:auto;right:-8px}
}

/* ==========================================================================
   §3 Products dropdown
   ========================================================================== */
.dxr-dropdown{
  position:absolute;top:100%;left:-8px;
  width:var(--dxr-dropdown-w);
  padding-top:12px;                       /* transparent bridge so the pointer can cross */
  display:none;
}
.dxr-nav__item--open > .dxr-dropdown{display:block}
.dxr-dropdown__panel{
  background:var(--dxr-surface);
  border:1px solid var(--dxr-border);
  border-radius:var(--dxr-radius-panel);
  padding:8px;
  box-shadow:var(--dxr-shadow-dropdown);
}
.dxr-dropdown__row{
  display:flex;gap:16px;padding:15px 14px;
  border-radius:var(--dxr-radius-md);color:var(--dxr-ink);
}
.dxr-dropdown__row:hover{background:var(--dxr-primary-tint-hover);color:var(--dxr-ink)}
/* IDENTITY BAND, not an ordinal. align-self:stretch is the whole trick — the bar
   takes the row height from the title+description stack beside it, so it never
   needs a height of its own and never drifts when a description wraps. */
.dxr-dropdown__band{width:3px;align-self:stretch;border-radius:2px;flex-shrink:0}
.dxr-dropdown__band--design{background:var(--dxr-product-band-design)}
.dxr-dropdown__band--optitwin{background:var(--dxr-product-band-optitwin)}
.dxr-dropdown__band--truescene{background:var(--dxr-product-band-truescene)}
/* Flex so the Beta chip sits on the title baseline-centre at a fixed 9px, which
   a margin on the chip could not hold once the title wraps. */
.dxr-dropdown__name{display:flex;align-items:center;gap:9px;font:700 14px/1.3 var(--dxr-font-sans);margin-bottom:5px}
/* SANS, not mono. Mono on this site means a measured or technical value; these
   are sentences, so mono here was decoration and diluted the signal elsewhere.
   Mono in this component is now reserved for the Beta chip. */
.dxr-dropdown__desc{display:block;font:400 13px/1.45 var(--dxr-font-sans);color:var(--dxr-text-muted)}
.dxr-dropdown__badge{flex-shrink:0}

/* Extension beyond the prototype, required so no real production page becomes
   unreachable: same panel, hairline-separated secondary list. */
.dxr-dropdown__divider{height:1px;background:var(--dxr-border-inner);margin:8px 6px}
.dxr-dropdown__label{
  padding:2px 14px 8px;
  font:500 10px/1 var(--dxr-font-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--dxr-text-subtle);
}
.dxr-dropdown__row--sub{padding:10px 14px;font:600 13px/1.3 var(--dxr-font-sans);align-items:center}
.dxr-dropdown--narrow{width:300px}      /* Solutions / Resources / About menus */

/* ==========================================================================
   §4 Mobile hamburger + drawer (< 900px)
   The media query — not JS — hides/shows these, so the layout is correct
   before JS runs. JS only manages data-open / aria-expanded.
   ========================================================================== */
.dxr-nav__burger{
  display:none;                           /* the media query reveals it */
  flex-direction:column;justify-content:center;gap:5px;
  /* Stated locally, not inherited: the components reset is scoped to
     .dxr-shell--dxr and so does not reach the chrome on legacy pages, and the
     44px in the 320px arithmetic below is a BORDER box — content-box would
     make this 66px wide (44 + 2x10 padding + 2x1 border) and overflow. */
  box-sizing:border-box;
  width:44px;height:44px;padding:0 10px;
  border-radius:var(--dxr-radius-md);
  border:1px solid var(--dxr-border-strong);
  background:none;flex-shrink:0;cursor:pointer;
}
.dxr-nav__burger:hover{border-color:var(--dxr-primary)}
.dxr-nav__burger span{display:block;height:2px;border-radius:1px;background:var(--dxr-body)}

.dxr-drawer{
  display:none;
  border-top:1px solid var(--dxr-border);
  background:var(--dxr-surface);
  padding:10px var(--dxr-gutter) 22px;
  max-height:var(--dxr-drawer-max-h);
  overflow-y:auto;
}
.dxr-drawer[data-open="true"]{display:block}
.dxr-drawer__heading{
  font:500 10px/1 var(--dxr-font-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--dxr-text-subtle);
  padding:16px 0 10px;
}
.dxr-drawer__group + .dxr-drawer__group .dxr-drawer__heading{padding-top:22px}
.dxr-drawer__link{
  display:flex;align-items:center;gap:12px;min-height:52px;
  border-top:1px solid var(--dxr-border-inner);
  font:700 15px/1.4 var(--dxr-font-sans);color:var(--dxr-ink);
}
.dxr-drawer__link:hover{color:var(--dxr-primary)}
.dxr-drawer__group .dxr-drawer__link:last-child{border-bottom:1px solid var(--dxr-border-inner)}
.dxr-drawer__login{
  display:flex;align-items:center;min-height:52px;
  font:600 14px/1.4 var(--dxr-font-sans);color:var(--dxr-body);
}
.dxr-drawer__login:hover{color:var(--dxr-primary)}
/* products are FLAT in the drawer with identity bands — never a nested dropdown.
   Fixed height here, unlike the dropdown's stretched bar: these rows are single
   line, so stretching would paint the bar over the full 52px tap target. */
.dxr-drawer__band{width:3px;height:20px;border-radius:2px;flex-shrink:0}
.dxr-drawer__band--design{background:var(--dxr-product-band-design)}
.dxr-drawer__band--optitwin{background:var(--dxr-product-band-optitwin)}
.dxr-drawer__band--truescene{background:var(--dxr-product-band-truescene)}

/* "Log in" leaves the bar in TWO different bands for two different reasons:
   below 900px it moves into the drawer, and between 901px and 1075px there is
   simply no room for it (see the arithmetic in §2). One rule covers both. It
   remains reachable in the footer Company column at every width.

   It applies to "Log in" ONLY, and that is why header.php deliberately does
   NOT give the logged-in account trigger this class (it uses .dxr-nav__link
   .dxr-nav__account-trigger instead). The account trigger must survive the
   band: there is no drawer above 900px, so between 901 and 1075px it is the
   only route to Log out. It stays, and gives way instead — see the cap. */
@media (max-width:1075px){
  .dxr-nav__login{display:none}

  /* The account name is the ONE label in the bar with no measured width — it
     is a person's name, and §2's arithmetic can only account for known glyph
     runs. So it is the only piece that can push the bar into a sideways
     scroll, and it is capped rather than trusted.

     The cap tracks the spare width §2 leaves. Reading that sum back: at 901px
     the bar needs 764.2px of the 829.0px available, so 64.7px is spare, and
     the trigger also owes the 16px flex gap — ~48.7px for itself. Spare grows
     ~1px per px of viewport, so `100vw - 852px` reproduces it across the band
     (901 -> 49px, 1032 -> 180px); max(0px,...) keeps it from going negative.

     It is stated on .dxr-nav__account-name and not on the trigger for two
     reasons. The name has its own span precisely so a cap cannot swallow the
     caret — clipping the trigger would slice the caret off first. And the
     trigger's parent .dxr-nav__account is the dropdown panel's containing
     block, so `overflow:hidden` up there would clip the open menu to a sliver
     instead of clipping the name. The span is a flex item of the trigger, so
     min-width:0 is what actually lets it shrink; a flex item's initial `auto`
     refuses to go below its content, and without it the cap is inert.

     ~49px is a clipped name, not a comfortable one. Clipped-but-reachable
     beats unreachable, but the better fix is for header.php to put a SHORT
     label (first name, or initials) in the bar and keep the full name in the
     menu — dxr_account() already owns that string. */
  .dxr-nav__actions>.dxr-nav__auth,
  .dxr-nav__auth-row,
  .dxr-nav__account{min-width:0}
  .dxr-nav__account-name{max-width:max(0px,min(180px,100vw - 852px))}
}

/* --------------------------------------------------------------------------
   Below 900px the bar is logo + primary CTA + burger. All three were
   unshrinkable and needed 370px of viewport, so 320px-360px phones scrolled
   sideways. 320px therefore has to be checked explicitly.

   Arithmetic at 320px (gutter = clamp(20px,4vw=12.8px,40px) = 20px;
   glyph widths measured from the shipped Plus Jakarta Sans):
     available    320 - 2 x 20                                      = 280.0px
     logo         clamp(22px,5.5vw=17.6px,30px) = 22px tall
                  -> 22 x 330/69                                    = 105.2px
     CTA          2 x clamp(14px,4vw=12.8px,22px) = 2 x 14
                  + 64.5px "Start free" + 2px border                =  94.5px
     burger       44 x 44, NOT reduced — it is the touch target     =  44.0px
     flex gaps    clamp(10px,3.2vw,16px) = 10.2
                  + clamp(8px,2.4vw,16px) = 8.0                     =  18.2px
                                                              total = 262.0px
     262.0 < 280.0  ->  18px spare at the narrowest supported width.
   Both fluid values reach their prototype size well before the breakpoint:
   the logo is back to 30px at 546px and the CTA to 22px padding at 550px, so
   only genuinely small phones see the reduced sizes.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .dxr-nav__items{display:none}
  .dxr-nav__burger{display:flex}

  /* The arithmetic above says "logo + primary CTA + burger", and that is the
     LOGGED-IN bar too: the account menu moves into the drawer here exactly as
     "Log in" does, leaving only the CTA — which is "Open App" in this state,
     within a pixel of "Start free", so the sum still holds. Without this the
     name sits in the bar as a fourth unshrinkable item and phones scroll
     sideways; measured at 444px before the rule existed.

     Log out stays reachable because header.php mirrors this cluster as the
     auth='in' "Account" group inside the drawer (name as the heading, then
     Warehouse, User settings, Log out). "Open App" is NOT mirrored there — it
     stays in the bar at every width, exactly like the CTA it replaces.

     No !important needed: .dxr-nav__account carries no auth classes of its own
     (the wrapper .dxr-nav__auth--in does), so jQuery .show() never reaches it
     and cannot write an inline display over this. */
  .dxr-nav__account{display:none}

  .dxr-nav{--dxr-nav-logo-h:clamp(22px,5.5vw,30px)}
  .dxr-nav__inner{gap:clamp(10px,3.2vw,16px)}
  .dxr-nav__actions{gap:clamp(8px,2.4vw,16px)}
  .dxr-nav .dxr-btn--nav{padding:0 clamp(14px,4vw,22px)}
}
/* 900.02px, not 901px: closes the same fractional-width gap as §2. */
@media (min-width:900.02px){
  .dxr-drawer{display:none!important}
}

/* ==========================================================================
   §4a AUTH-DEPENDENT CHROME — the logged-in / logged-out branches

   BOTH branches are always in the HTML; exactly one is shown. Nothing here may
   be achieved by omitting markup server-side: on a page served from the page
   cache PHP never runs, so a branch that was never printed is unrecoverable in
   the browser, while a branch that was merely hidden is one attribute away.

   ---------------------------------------------------------------------------
   THE MARKUP CONTRACT — see the auth contract at the top of header.php
   ---------------------------------------------------------------------------
     .dxr-nav[data-dxr-auth-state="in|out|all"]   the state, from dxr_auth_state()
       [data-dxr-auth="in"]                       a LOGGED-IN-only element
       [data-dxr-auth="out"]                      a LOGGED-OUT-only element

   The drawer is a DESCENDANT of .dxr-nav, so that one attribute governs bar and
   drawer together — which is why every rule below is a single descendant match
   and there is no separate drawer branch. 'all' matches neither hide rule and
   therefore shows both (wp-admin; mirrors the isAdmin arm of custom_script.js).

   dxr_auth_class() puts the legacy classes on the very same elements
   (`dxr-auth dxr-auth--in login-dependent-block logged-out-hide` and the
   mirror), because js/custom_script.js:82-91 still runs and still reveals by
   those class names. This file does NOT key off them — see the [hidden] rule.

   ---------------------------------------------------------------------------
   NO FLASH, AND WHY THE SERVER OWNS THE FIRST PAINT
   ---------------------------------------------------------------------------
   data-dxr-auth-state is rendered by PHP, so the correct branch is in the very
   first frame of any request PHP handled — no JS at all, nothing to swap, and
   nothing for a logged-in visitor to see change. dxr-nav.js only intervenes
   when it DISAGREES (an SSO visitor on a cached page whose HTML says "out"),
   and it runs as a render-blocking footer script, before the first paint.

   Correspondingly there is no transition on any of this, deliberately: a fade
   would turn a swap nobody normally sees into a visible animation. Nothing here
   is animated, so there is nothing for a prefers-reduced-motion query to guard.

   ---------------------------------------------------------------------------
   THE [hidden] BACKSTOP — do not "simplify" it away
   ---------------------------------------------------------------------------
   js/custom_script.js reads the BAKED is3DoptixLoggedIn global, so it normally
   agrees with the server. When dxr-nav.js overrules both from the cookie they
   disagree, and jQuery .show() responds to a stylesheet-hidden element by
   writing an INLINE display (the tag default: `block` on these wrapper divs) —
   which outranks every normal rule in this file and would resurrect the branch
   that just lost. So dxr-nav.js marks the loser with the `hidden` attribute and
   this rule carries !important, the one weight an inline style cannot beat.

   Verified in a browser against the real jQuery rather than reasoned about: an
   earlier class-based version of this section let jQuery pin "Log in" back into
   a 375px bar. Scoped to [data-dxr-auth] so it can never reach page content,
   Elementor's own [hidden] usage included.
   ========================================================================== */

/* The two clusters are flex rows in their own right — .dxr-nav__actions holds
   the two wrappers plus the burger, each wrapper holds its own two controls.
   The gap matches the cluster's so the nesting is invisible. */
/* THE LAYOUT LIVES ON THE ROW, NOT THE BRANCH.
   js/custom_script.js reveals the current branch by writing style="display:block"
   inline on .login-dependent-block -- which is .dxr-nav__auth. An inline
   declaration outranks any rule here, so stating the flex on the branch itself
   was silently discarded: the cluster fell back to block flow, putting "Log in"
   on the same baseline as a 44px button, and stacking the account menu above
   "Open App" until it overflowed the fixed 76px bar. !important would have won
   the layout and lost the fail-closed hide rules in §4, which must be able to
   beat it. A nested row is immune to an inline display of any value.
   The branch keeps a flex of its own so the row is centred if that script never
   runs; the gap belongs to the row, which is what actually spaces the two. */
.dxr-nav__auth{display:flex;align-items:center}
.dxr-nav__auth-row{display:flex;align-items:center;gap:16px}
@media (max-width:900px){
  .dxr-nav__auth-row{gap:clamp(8px,2.4vw,16px)}   /* in step with .dxr-nav__actions */
}

/* Hide the branch the state says is not current. */
/* .dxr-footer is a second host: the Company column carries an auth-gated
   "Log in" row and it sits outside .dxr-nav, so without it the symptom just
   moves from the header to the footer. */
/* FAIL CLOSED. The previous pair only hid a branch when the state attribute was
   exactly "in" or "out", so ANY other value — missing, empty, "all" on a front
   end request, or anything a filter returns — matched neither rule and rendered
   BOTH clusters at once: "Log in / Start free" and the account menu together,
   overflowing the bar. Shipped that way and it is exactly what happened.

   Inverted: the logged-in branch is hidden unless the state explicitly says to
   show it, and the logged-out branch is hidden only when the state explicitly
   says "in". An unknown value therefore degrades to the logged-out chrome, which
   is the safe direction — never to both. */
body:not(.elementor-editor-active) .dxr-nav:not([data-dxr-auth-state="in"]) [data-dxr-auth="in"],
body:not(.elementor-editor-active) .dxr-footer:not([data-dxr-auth-state="in"]) [data-dxr-auth="in"],
body:not(.elementor-editor-active) .dxr-nav[data-dxr-auth-state="in"] [data-dxr-auth="out"],
body:not(.elementor-editor-active) .dxr-footer[data-dxr-auth-state="in"] [data-dxr-auth="out"]{display:none}

/* The Elementor editor shows BOTH branches, so the header is not half-empty
   while it is being edited. Written as an exclusion on the rule above rather
   than as an un-hiding rule of its own — un-hiding would have to name a display
   value per element, which this section avoids. Mirrors the pre-existing escape
   hatch at style.css:3873-3876, which was scoped to the <header> element and no
   longer matches this shell. dxr-nav.js sits the editor out for the same
   reason, so no `hidden` attribute appears there either. */

/* The backstop described above. */
.dxr-nav [data-dxr-auth][hidden],
.dxr-footer [data-dxr-auth][hidden]{display:none!important}

/* The account panel hangs off the RIGHT-hand cluster, so it is anchored to the
   right edge: the inherited left:-8px would put it off the side of the
   viewport. Width and chrome stay the shared --narrow ones. */
.dxr-dropdown--account{left:auto;right:-8px}

/* The name is the only unbounded string in the bar. Its own span exists so the
   caret cannot be clipped with it; these are the properties that make the cap
   in §4's 1075px block bite, and min-width:0 is the one that matters — as a
   flex item of .dxr-nav__link its initial `auto` would refuse to shrink. */
.dxr-nav__account-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:1075.02px){
  /* Above the band §2 leaves 230px spare, so the cap is only a long-name guard
     rather than a fitting constraint. Stated here and not with the others so it
     cannot collide with the band's tighter, load-bearing cap. */
  .dxr-nav__account-name{max-width:220px}
}

/* ==========================================================================
   §5 Footer
   ========================================================================== */
.dxr-footer{background:var(--dxr-ink-deep);padding:0;color:var(--dxr-on-dark)}
/* SIGNATURE RULE — placement 2 of 2 site-wide */
.dxr-footer__spectrum{height:var(--dxr-spectrum-h-footer);background:var(--dxr-spectrum)}
.dxr-footer__inner{
  max-width:var(--dxr-container);margin:0 auto;
  padding:var(--dxr-footer-y) var(--dxr-gutter) 30px;
}
/* The five groups are brand + four link columns. auto-fit cannot express that:
   it derives its column count from the MINIMUM, and five 190px columns need
   5x190 + 4x48 = 1142px of CONTENT box. The container is 1300px but its
   gutters take 80px of that, so 1142 is only available above a 1222px
   viewport — below it the grid silently dropped to four columns and COMPANY
   sat alone on a second row with three empty cells beside it. Lowering the
   minimum instead would let a SIXTH column in on wide screens, leaving a
   trailing empty cell, so the desktop steps are explicit.
   Below the five-column width the brand takes a row of its own, which leaves
   the four link columns dividing their row evenly at every step. */
.dxr-footer__cols{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--dxr-gap-col);                 /* 48px */
  padding-bottom:44px;
  border-bottom:1px solid var(--dxr-border-on-dark-soft);
}
@media (min-width:600px){
  .dxr-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dxr-footer__brand{grid-column:1/-1}
}
@media (min-width:900px){
  .dxr-footer__cols{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dxr-footer__brand{grid-column:1/-1}
}
@media (min-width:1222px){
  .dxr-footer__cols{grid-template-columns:minmax(0,1.15fr) repeat(4,minmax(0,1fr))}
  .dxr-footer__brand{grid-column:auto}
}
.dxr-footer__logo{height:var(--dxr-logo-h-footer);width:auto;display:block;margin-bottom:18px}
.dxr-footer__desc{
  margin:0;max-width:min(100%,300px);
  font:400 13px/1.7 var(--dxr-font-sans);color:var(--dxr-on-dark-caption);
}
/* footer heading tracking is 0.12em while the drawer heading and eyebrow are
   0.13em. Both are intentional; keep them distinct. */
.dxr-footer__heading{
  font:500 10px/1 var(--dxr-font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--dxr-on-dark-faint);
  margin-bottom:18px;
}
.dxr-footer__list{display:flex;flex-direction:column;gap:11px}
.dxr-footer__link{font:400 13px/1.3 var(--dxr-font-sans);color:var(--dxr-on-dark-body)}
.dxr-footer__link:hover{color:var(--dxr-on-dark)}
.dxr-footer__legal{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:22px;flex-wrap:wrap;
}
.dxr-footer__legal-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dxr-footer__legal span,
.dxr-footer__legal a{font:400 11px/1 var(--dxr-font-mono);color:var(--dxr-on-dark-mono)}
.dxr-footer__legal a:hover{color:var(--dxr-on-dark)}
.dxr-footer__legal-sep{opacity:.6}