/* The Regulayer(TM) site header and footer: one component on every page of the preview (her decision, 28 Sep 2026).
   Dark navy ground, platinum wordmark, champagne accent. The builder stamps the same markup on every page and links
   this file last in the head, so every rule is scoped to .rlx / .rlx-foot / .rlx-note / .rlx-sec and carries at least
   one class more than the page rules it has to beat.
   Desktop, 1100px and up: a brand row (wordmark, standing line, Search, Book a live demo) over a menu row (the eight
   items). Each row is one line and never wraps. Below 1100px: the brand, Book a live demo (in the bar from 600px, at
   the foot of the open panel below that) and a Menu button that opens a full panel. The standing line shows from 900px.
   Source order (brand, menu, Search, Book a live demo, Menu button) is the keyboard order at every width. */

.rlx, .rlx-foot, .rlx-note, .rlx-sec{
  --rlx-ground:#0A0F16; --rlx-panel:#121A24; --rlx-hair:rgba(255,255,255,.08); --rlx-hair2:rgba(255,255,255,.16);
  --rlx-ink:#EEF3FA; --rlx-ink2:#A3B1C2; --rlx-ink3:#7D8C9F; --rlx-cham:#C9B98F; --rlx-cham2:#D8CBA6;
  --rlx-gutter:clamp(16px, 4vw, 40px);
  --rlx-sans:"Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rlx-serif:"Instrument Serif", "Times New Roman", Georgia, serif;
}
.rlx, .rlx *, .rlx *::before, .rlx *::after,
.rlx-foot, .rlx-foot *, .rlx-foot *::before, .rlx-foot *::after,
.rlx-note, .rlx-note *, .rlx-sec, .rlx-sec *{box-sizing:border-box}
html.rlx-lock{overflow:hidden}
@media (min-width:1100px){ html.rlx-lock{overflow:visible} }

/* ---------- Header ---------- */
.rlx{
  position:relative; z-index:1000; display:block; float:none; clear:both;
  width:auto; max-width:none; margin:0; padding:0; border:0; border-bottom:1px solid var(--rlx-hair); border-radius:0;
  background:var(--rlx-ground); color:var(--rlx-ink); box-shadow:none;
  font-family:var(--rlx-sans); font-size:16px; font-weight:400; font-style:normal; line-height:1.3;
  letter-spacing:normal; text-align:left; text-transform:none; text-shadow:none;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
.rlx :is(a, button, nav, ul, li, div, span, img, svg){
  margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; float:none; outline-offset:3px;
  font:inherit; color:inherit; letter-spacing:inherit; text-transform:none; text-decoration:none; text-shadow:none;
  list-style:none; min-width:0; max-width:none; opacity:1; filter:none; transform:none;
}
.rlx .rlx-in{
  position:relative; max-width:1240px; margin:0 auto;
  padding-left:max(var(--rlx-gutter), env(safe-area-inset-left));
  padding-right:max(var(--rlx-gutter), env(safe-area-inset-right));
}
.rlx .rlx-brand{display:flex; align-items:center; min-width:0}
.rlx .rlx-wm{display:block; flex:0 1 auto; min-width:0; line-height:0; border:0}
.rlx .rlx-wm img{display:block; width:auto; height:27px; max-width:100%; border:0}
.rlx .rlx-standing{
  display:block; flex:none; margin-left:20px; padding-left:20px; border-left:1px solid var(--rlx-hair2);
  font-size:16px; font-weight:500; line-height:1.25; color:var(--rlx-cham); white-space:nowrap;
}
.rlx .rlx-nav ul{display:flex}
.rlx .rlx-nav a, .rlx .rlx-search, .rlx .rlx-toggle{color:var(--rlx-ink2); font-size:16px; font-weight:500; white-space:nowrap; cursor:pointer}
.rlx .rlx-nav a:hover, .rlx .rlx-search:hover, .rlx .rlx-toggle:hover{color:var(--rlx-ink)}
.rlx .rlx-nav a[aria-current]{color:var(--rlx-ink)}
.rlx .rlx-search{display:inline-flex; align-items:center; gap:8px; min-height:44px}
.rlx .rlx-search svg{display:block; flex:none; width:18px; height:18px}
.rlx .rlx-cta{
  display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 20px; border-radius:999px;
  background:var(--rlx-cham); color:var(--rlx-ground); font-size:16px; font-weight:600; line-height:1; white-space:nowrap;
  transition:background-color .2s ease;
}
.rlx .rlx-cta:hover{background:var(--rlx-cham2); color:var(--rlx-ground)}
.rlx .rlx-toggle{display:inline-flex; align-items:center; gap:10px; flex:none; min-height:44px; padding:0 16px;
  border:1px solid var(--rlx-hair2); border-radius:999px; color:var(--rlx-ink); -webkit-appearance:none; appearance:none}
.rlx .rlx-toggle svg{display:block; width:18px; height:18px; flex:none}
.rlx .rlx-toggle .rlx-x{display:none}
.rlx.rlx-open .rlx-toggle .rlx-bars{display:none}
.rlx.rlx-open .rlx-toggle .rlx-x{display:block}
.rlx :is(a, button):focus-visible{outline:2px solid var(--rlx-cham); outline-offset:3px; border-radius:8px}
.rlx .rlx-cta:focus-visible, .rlx .rlx-toggle:focus-visible{border-radius:999px}

/* Skip link: hidden until it has focus. */
.rlx .rlx-skip{
  position:absolute; z-index:3; left:max(var(--rlx-gutter), env(safe-area-inset-left)); top:10px;
  width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.rlx .rlx-skip:focus{
  width:auto; height:auto; overflow:visible; clip-path:none; padding:10px 18px; border-radius:999px;
  background:var(--rlx-cham); color:var(--rlx-ground); font-weight:600;
}
#rlx-content{display:block; height:0; outline:none}

/* Desktop: the brand row over the menu row. */
@media (min-width:1100px){
  .rlx{--rlx-r1:64px; --rlx-r2:48px}
  .rlx.rlx-compact{--rlx-r1:52px; --rlx-r2:42px}
  .rlx .rlx-in{display:grid; grid-template-columns:minmax(0, 1fr) auto auto; grid-template-rows:var(--rlx-r1) var(--rlx-r2); column-gap:24px}
  .rlx::after{content:""; position:absolute; left:0; right:0; top:var(--rlx-r1); height:1px; background:var(--rlx-hair); pointer-events:none}
  .rlx .rlx-brand{grid-column:1; grid-row:1}
  .rlx.rlx-compact .rlx-wm img{height:22px}
  .rlx .rlx-toggle{display:none}
  .rlx .rlx-panel{display:contents}
  .rlx .rlx-tools{grid-column:2; grid-row:1; display:flex; align-items:center}
  .rlx .rlx-cta{grid-column:3; grid-row:1; align-self:center}
  .rlx.rlx-compact .rlx-cta{min-height:36px; padding:0 18px}
  .rlx .rlx-nav{grid-column:1 / -1; grid-row:2; align-self:stretch; min-width:0}
  .rlx .rlx-nav ul{height:100%; align-items:stretch; gap:0 32px}
  .rlx .rlx-nav li{display:flex}
  .rlx .rlx-nav a{display:flex; align-items:center; height:100%; margin-bottom:-1px; padding-top:2px; border-bottom:2px solid transparent}
  .rlx .rlx-nav a[aria-current]{border-bottom-color:var(--rlx-cham)}
}

/* Below 1100px: the brand, Book a live demo and the Menu button; the button opens the full panel. */
@media (max-width:1099.98px){
  .rlx .rlx-in{display:flex; align-items:center; gap:16px; height:60px}
  .rlx .rlx-brand{flex:1 1 auto}
  .rlx .rlx-wm img{height:24px}
  .rlx .rlx-panel{display:none}
  .rlx .rlx-cta{flex:none; min-height:44px; padding:0 18px}
  .rlx.rlx-open{height:61px}  /* the bar keeps its place in the page while the panel covers the window */
  .rlx.rlx-open .rlx-in{
    position:fixed; inset:0; z-index:2147483000; display:grid; grid-template-columns:minmax(0, 1fr) auto auto;
    grid-template-rows:60px auto; align-content:start; column-gap:16px; height:auto; max-width:none;
    overflow-y:auto; overscroll-behavior:contain; background:var(--rlx-ground);
    padding-bottom:max(32px, env(safe-area-inset-bottom));
  }
  .rlx.rlx-open .rlx-brand{grid-column:1; grid-row:1; align-self:center}
  .rlx.rlx-open .rlx-cta{grid-column:2; grid-row:1; align-self:center}
  .rlx.rlx-open .rlx-toggle{grid-column:3; grid-row:1; align-self:center}
  .rlx.rlx-open .rlx-panel{
    display:flex; flex-direction:column; grid-column:1 / -1; grid-row:2; width:100%; max-width:640px;
    padding-top:8px; border-top:1px solid var(--rlx-hair);
  }
  .rlx.rlx-open .rlx-nav ul{display:block}
  .rlx.rlx-open .rlx-nav li{border-bottom:1px solid var(--rlx-hair)}
  .rlx.rlx-open .rlx-nav a{display:flex; align-items:center; gap:12px; min-height:58px; font-size:22px; color:var(--rlx-ink)}
  .rlx.rlx-open .rlx-nav a[aria-current]{color:var(--rlx-cham)}
  .rlx.rlx-open .rlx-nav a[aria-current]::before{content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--rlx-cham)}
  .rlx.rlx-open .rlx-tools{display:flex; flex-direction:column; align-items:stretch; gap:14px; margin-top:28px}
  .rlx.rlx-open .rlx-search{justify-content:flex-start; gap:12px; min-height:54px; padding:0 18px; border:1px solid var(--rlx-hair2); border-radius:14px; font-size:20px; color:var(--rlx-ink)}
  .rlx.rlx-open .rlx-search svg{width:20px; height:20px}
  /* Without the script the button cannot open anything, so the menu shows as a plain list under the bar. */
  html:not(.rlx-js) .rlx .rlx-toggle{display:none}
  html:not(.rlx-js) .rlx .rlx-in{height:auto; min-height:60px; flex-wrap:wrap; row-gap:10px; padding-top:10px; padding-bottom:14px}
  html:not(.rlx-js) .rlx .rlx-cta{display:inline-flex; order:1}
  html:not(.rlx-js) .rlx .rlx-panel{display:block; width:100%; order:2}
  html:not(.rlx-js) .rlx .rlx-nav ul, html:not(.rlx-js) .rlx .rlx-tools{display:flex; flex-wrap:wrap; gap:4px 20px}
}
@media (max-width:899.98px){
  .rlx .rlx-standing{display:none}
}
@media (max-width:639.98px){
  .rlx .rlx-wm img{height:20px}
}
/* Phones: the bar holds the brand and Menu; Book a live demo is the full-width button at the foot of the open panel. */
@media (max-width:599.98px){
  .rlx .rlx-cta{display:none}
  .rlx.rlx-open .rlx-in{grid-template-columns:minmax(0, 1fr) auto; grid-template-rows:60px auto auto}
  .rlx.rlx-open .rlx-toggle{grid-column:2}
  .rlx.rlx-open .rlx-cta{
    display:flex; grid-column:1 / -1; grid-row:3; align-self:start; width:100%; max-width:640px;
    min-height:56px; margin-top:14px; font-size:18px;
  }
}
@media (max-width:399.98px){
  .rlx .rlx-in{gap:12px}
  .rlx .rlx-wm img{height:auto; width:212px}
  .rlx .rlx-toggle{padding:0 14px; gap:8px}
}
@media (prefers-reduced-motion:no-preference){
  .rlx.rlx-open .rlx-panel{animation:rlx-panel .24s cubic-bezier(.2, .7, .2, 1)}
  @keyframes rlx-panel{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
}
@media print{ .rlx .rlx-toggle, .rlx .rlx-panel{display:none} }

/* ---------- Films: the compact header sits above the stage, and the stage still fills the window ---------- */
html.rlx-film{--rlx-h:61px}
@media (min-width:1100px){ html.rlx-film{--rlx-h:95px} }
html.rlx-film .rlx-stage{height:calc(100vh - var(--rlx-h)) !important; height:calc(100dvh - var(--rlx-h)) !important}
html.rlx-film .rlx-stage-min{min-height:calc(100vh - var(--rlx-h)) !important; min-height:calc(100dvh - var(--rlx-h)) !important}
/* The header lines up with each film's own column. */
html.rlx-frame-wide .rlx .rlx-in, html.rlx-frame-wide .rlx-foot .rlx-foot-in{max-width:calc(1240px + 2 * var(--rlx-gutter))}
html.rlx-frame-1200 .rlx .rlx-in, html.rlx-frame-1200 .rlx-foot .rlx-foot-in{max-width:1200px}

/* ---------- The enterprise section bar, under the header ---------- */
.subnav.rlx-sec{
  position:relative; z-index:900; display:block; margin:0; padding:0; border:0; border-bottom:1px solid var(--rlx-hair);
  background:#0F1620; font-family:var(--rlx-sans); -webkit-font-smoothing:antialiased;
}
.subnav.rlx-sec.driftnav{background:#0C121A}
.subnav.rlx-sec .in{
  display:flex; flex-wrap:nowrap; align-items:stretch; gap:0 28px; max-width:1240px; min-height:50px; margin:0 auto;
  padding:0 max(var(--rlx-gutter), env(safe-area-inset-right)) 0 max(var(--rlx-gutter), env(safe-area-inset-left));
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; border:0; background:none;
}
.subnav.rlx-sec .in::-webkit-scrollbar{display:none}
.subnav.rlx-sec a{
  display:inline-flex; align-items:center; flex:none; margin:0 0 -1px; padding:2px 0 0; border:0; border-bottom:2px solid transparent;
  font-family:var(--rlx-sans); font-size:16px; font-weight:500; font-style:normal; letter-spacing:normal; text-transform:none;
  color:var(--rlx-ink2); text-decoration:none; white-space:nowrap; background:none;
}
.subnav.rlx-sec a:hover{color:var(--rlx-ink); border-color:transparent}
.subnav.rlx-sec a[aria-current]{color:var(--rlx-ink); border-bottom-color:var(--rlx-cham)}
.subnav.rlx-sec a:focus-visible{outline:2px solid var(--rlx-cham); outline-offset:-2px; border-radius:6px}
/* Narrower windows: the row scrolls sideways, so its right edge fades to show there is more, and a spacer at the end
   lets the last item scroll clear of the fade. */
@media (max-width:1099.98px){
  .subnav.rlx-sec .in{-webkit-mask-image:linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 44px), transparent)}
  .subnav.rlx-sec .in::after{content:""; flex:none; width:16px}
}

/* ---------- A page's own note, just above the footer ---------- */
.rlx-note{
  display:block; max-width:1240px; margin:0 auto; padding:28px max(var(--rlx-gutter), env(safe-area-inset-right)) 28px max(var(--rlx-gutter), env(safe-area-inset-left));
  font-family:var(--rlx-sans); font-size:16px; line-height:1.5; color:var(--rlx-ink2); background:none; text-align:left;
}
.rlx-note p{margin:0; font:inherit; color:inherit}

/* ---------- Footer ---------- */
.rlx-foot{
  position:relative; display:block; float:none; clear:both; width:auto; max-width:none; margin:0; padding:0;
  border:0; border-top:1px solid var(--rlx-hair); border-radius:0; background:var(--rlx-ground); color:var(--rlx-ink3); box-shadow:none;
  font-family:var(--rlx-sans); font-size:16px; font-weight:400; font-style:normal; line-height:1.5;
  letter-spacing:normal; text-align:left; text-transform:none; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
.rlx-foot :is(a, nav, ul, li, div, p, span){
  margin:0; padding:0; border:0; background:none; box-shadow:none; float:none; font:inherit; color:inherit;
  letter-spacing:inherit; text-transform:none; text-decoration:none; list-style:none; text-align:left; max-width:none;
}
.rlx-foot .rlx-foot-in{
  max-width:1240px; margin:0 auto; padding-top:44px; padding-bottom:max(52px, env(safe-area-inset-bottom));
  padding-left:max(var(--rlx-gutter), env(safe-area-inset-left)); padding-right:max(var(--rlx-gutter), env(safe-area-inset-right));
}
.rlx-foot .rlx-statement{font-family:var(--rlx-serif); font-size:clamp(26px, 2.6vw, 34px); font-weight:400; line-height:1.15; color:var(--rlx-ink); text-wrap:balance}
.rlx-foot .rlx-foot-nav ul{display:flex; flex-wrap:wrap; gap:0 26px; margin-top:22px}
.rlx-foot .rlx-foot-nav a, .rlx-foot .rlx-foot-meta a{display:inline-flex; align-items:center; min-height:40px; font-size:16px; font-weight:500; color:var(--rlx-ink2)}
.rlx-foot .rlx-foot-meta{display:flex; flex-wrap:wrap; gap:0 26px; margin-top:6px}
.rlx-foot .rlx-foot-meta a{font-weight:400}
.rlx-foot a:hover{color:var(--rlx-ink)}
.rlx-foot a:focus-visible{outline:2px solid var(--rlx-cham); outline-offset:3px; border-radius:6px}
.rlx-foot .rlx-fine{margin-top:18px; font-size:16px; color:var(--rlx-ink3)}
@media print{ .rlx-foot .rlx-foot-nav{display:none} }

/* 30 Sep 2026, the review: a 24px tap target on the phone wordmark. */
@media (max-width:639.98px){ .rlx .rlx-wm{padding:3px 0} }