/* =========================================================
   SixFifty site header + footer (header.php / footer.php) — loaded on every page (functions.php sixfifty_enqueue_v2_assets()).
   Header: one markup, two skins. Light by default (white bar, dark text); .site-header--dark (section 7) on the templates
   listed in sixfifty_dark_header_templates() (FrontPage v2, Pricing v2). The mobile menu (.sfm) is white in both skins.
   Footer: dark, same on every page (section 8).
   Loaded after style.min.css / style.css / colorsnew.css, so everything is scoped to .site-header / .sfm / .site-footer and resets
   the legacy element rules (a, ul, li, p, h3, img, button, .btn) inside them. Mobile menu = .sfm (not .mbnav: scripts.min.js binds .mbnav).
   Sections: 1. Tokens  2. Legacy resets  3. Buttons  4. Header bar + search  5. Desktop nav + mega menu  6. Mobile menu
             7. Dark header skin  8. Footer
   ========================================================= */

/* ---------- 1. TOKENS (same values as hp-v2.css, scoped) ---------- */
.site-header, .sfm, .site-footer {
  --clr-purple-700: #6d28d9; --clr-purple-600: #7c3aed; --clr-purple-500: #9333ea; --clr-purple-400: #a78bfa;
  --clr-text-on-light: #17111f; --clr-brand: #532489; --clr-brand-dark: #24143D; --clr-text-on-light-muted: #6b6478; --clr-text-on-dark: #ffffff;
  --clr-badge-bg: #efe8ff; --clr-lilac: #f6f0fe; --clr-line: #ebe5f3; --clr-input-bg: #f4f1f8;
  --clr-bg-dark-900: #120821; --clr-purple-300: #c4b5fd; --clr-text-on-dark-muted: #c3b8dc; --clr-border-dark: rgba(255,255,255,0.12);
  --space-3xs: clamp(0.25rem, 0.22rem + 0.15vw, 0.375rem); --space-2xs: clamp(0.5rem, 0.45rem + 0.2vw, 0.625rem); --space-xs: clamp(0.75rem, 0.68rem + 0.3vw, 1rem); --space-sm: clamp(1rem, 0.88rem + 0.5vw, 1.5rem); --space-md: clamp(1.5rem, 1.3rem + 0.9vw, 2.25rem); --space-lg: clamp(2rem, 1.6rem + 1.8vw, 3.25rem); --space-2xl: clamp(4rem, 2.9rem + 4.8vw, 6.5rem);
  --radius-sm: 8px; --radius-md: 14px; --radius-full: 999px;
  --shadow-sm: 0 2px 10px rgba(20,10,40,0.07); --shadow-md: 0 10px 30px rgba(20,10,40,0.12); --shadow-panel: 0 20px 50px rgba(20,10,40,0.14); --shadow-lg: 0 25px 70px rgba(20,10,40,0.22);
  --ease: cubic-bezier(.4,0,.2,1); --transition: 0.3s var(--ease);
  --font-sans: "lato", "Arial", sans-serif; --font-heading: "alverata", "Arial", sans-serif;
  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --fs-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem); --fs-body: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem); --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --lh-tight: 1.15; --lh-normal: 1.6;
  --container-max: 1280px; --container-pad: clamp(1.25rem, 1rem + 2vw, 3rem); --header-h: 84px;
}

/* ---------- 2. LEGACY RESETS (inside the header, mobile menu and footer only) ---------- */
.site-header, .sfm, .site-footer {font-family: var(--font-sans); line-height: 1.6; -webkit-font-smoothing: antialiased}
.site-header *, .site-header *::before, .site-header *::after, .sfm *, .sfm *::before, .sfm *::after, .site-footer *, .site-footer *::before, .site-footer *::after {box-sizing: border-box}
.site-header ul, .sfm ul, .site-footer ul {margin: 0; padding: 0; list-style: none}
.site-header li, .sfm li {padding: 0}
.site-header p, .sfm p {margin: 0}
.site-header img, .sfm img, .site-footer img {display: block; max-width: 100%; height: auto}
:where(.site-header, .sfm, .site-footer) a {color: inherit}
.site-header a, .sfm a, .site-footer a {border-bottom: 0; text-decoration: none}
.site-header a:is(:hover, :focus), .sfm a:is(:hover, :focus), .site-footer a:is(:hover, :focus) {text-decoration: none}
:where(.site-header, .sfm) :is(button, input) {margin: 0; padding: 0; font: inherit; color: inherit; background: none; border: 0; border-radius: 0; box-shadow: none}
:where(.site-header, .sfm) button {cursor: pointer}
.site-header :focus-visible, .sfm :focus-visible, .site-footer :focus-visible {outline: 2px solid var(--clr-purple-500); outline-offset: 3px}
/* Footer: same spacing as the FrontPage v2 reset (margin 0 on everything); .fmenuspace (section 8) adds space back on chosen menu items */
.site-footer :is(li, p, h3) {margin: 0; padding: 0}
.site-header .visually-hidden, .sfm .visually-hidden {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap}

/* Sticky needs a non-scrolling ancestor: legacy .wrapper has overflow:hidden. clip keeps the horizontal clipping without creating a scroll container. */
@supports (overflow: clip) {.wrapper {overflow: clip}}
html {scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 84px)}
/* Legacy front-page promo banner was absolute over the fixed header; the header is now in the flow, so the banner sits above it. */
.home-promo-banner {position: relative}

/* ---------- 3. BUTTONS (.btn / .btn-primary / .btn-trial, overriding the legacy .btn) ---------- */
.site-header .btn, .sfm .btn {display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3xs); padding: var(--space-xs) var(--space-md); border: 0; border-radius: var(--radius-full); font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 400; line-height: 1.5; text-align: center; white-space: nowrap; transition: var(--transition)}
.site-header .btn-primary, .sfm .btn-primary {background: linear-gradient(135deg, var(--clr-purple-500), var(--clr-purple-600)); color: #fff; box-shadow: var(--shadow-sm)}
.site-header .btn-primary:is(:hover, :focus), .sfm .btn-primary:is(:hover, :focus) {background: linear-gradient(135deg, var(--clr-purple-500), var(--clr-purple-600)); color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: var(--shadow-md)}
.site-header .btn-trial, .sfm .btn-trial {background: radial-gradient(ellipse 70% 90% at 12% 30%, rgb(211,174,237) 0%, rgba(211,174,237,0)), radial-gradient(ellipse 60% 90% at 95% 85%, rgb(200,167,230) 0%, rgba(200,167,230,0)), radial-gradient(ellipse 55% 80% at 55% 10%, rgb(198,246,249) 0%, rgba(198,246,249,0)), rgb(241,235,252); color: #120821; border: 1px solid rgba(148,91,214,0.35); box-shadow: var(--shadow-sm)}
.site-header .btn-trial:is(:hover, :focus), .sfm .btn-trial:is(:hover, :focus) {background: radial-gradient(ellipse 70% 90% at 12% 30%, rgb(211,174,237) 0%, rgba(211,174,237,0)), radial-gradient(ellipse 60% 90% at 95% 85%, rgb(200,167,230) 0%, rgba(200,167,230,0)), radial-gradient(ellipse 55% 80% at 55% 10%, rgb(198,246,249) 0%, rgba(198,246,249,0)), rgb(241,235,252); color: #120821; border-color: rgba(148,91,214,0.6); transform: translateY(-2px); box-shadow: var(--shadow-md)}

/* ---------- 4. HEADER BAR ---------- */
.site-header {position: sticky; inset-block-start: var(--wp-admin--admin-bar--height, 0px); z-index: 999; width: 100%; background: #fff; border-block-end: 1px solid var(--clr-line); color: var(--clr-text-on-light)}
.site-header__inner {display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); width: min(100% - (var(--container-pad) * 2), var(--container-max)); min-height: var(--header-h); margin-inline: auto; padding-block: var(--space-xs)}
.site-header__logo {display: flex; align-items: center; flex-shrink: 0}
.site-header__logo img {width: auto; height: 26px}
.site-header .site-header__cta {flex-shrink: 0; padding: var(--space-2xs) var(--space-sm); font-size: var(--fs-xs)}
.site-header__actions {display: flex; align-items: center; gap: var(--space-xs); flex-shrink: 0}
.site-header .site-header__login {font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 500; color: var(--clr-brand); padding-inline: var(--space-2xs); transition: var(--transition)}
.site-header .site-header__login:is(:hover, :focus) {color: var(--clr-brand-dark)}
.site-header__toggle {display: none; flex-direction: column; justify-content: center; gap: 5px; flex-shrink: 0; width: 44px; height: 44px; padding: 0 10px; margin-inline-end: -10px}
.site-header__toggle span {display: block; height: 2px; background: var(--clr-brand); border-radius: var(--radius-full); transition: var(--transition)}

/* Search: icon button in the actions, panel under the bar (desktop); inside the mobile menu below 861px */
.site-header__search-toggle {display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--clr-brand); transition: var(--transition)}
.site-header__search-toggle svg {display: block; width: 18px; height: 18px}
.site-header__search-toggle:hover, .site-header__search-toggle[aria-expanded="true"] {background: var(--clr-lilac); color: var(--clr-brand-dark)}
.site-header__search {border-block-start: 1px solid var(--clr-line); background: #fff}
.site-header__search[hidden] {display: none}
.site-header .site-header__search-form {justify-content: flex-start; gap: var(--space-2xs); min-height: 0; padding-block: var(--space-sm)}
.site-header .site-header__search-input, .site-header .site-header__search-input:focus {flex: 1 1 auto; min-width: 0; height: 52px; border: 0; box-shadow: none; padding-inline: 1.5rem; border-radius: var(--radius-full); background: var(--clr-input-bg); font-size: var(--fs-base); color: var(--clr-text-on-light); -webkit-appearance: none; appearance: none}
.site-header .site-header__search-input::placeholder {color: var(--clr-text-on-light-muted)}
.site-header__search-btn {display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--clr-purple-500), var(--clr-purple-600)); transition: var(--transition)}
.site-header :is(.site-header__search-btn, .site-header__search-btn:hover) {color: #fff; background: linear-gradient(135deg, var(--clr-purple-500), var(--clr-purple-600))}
.site-header__search-btn:hover {transform: translateY(-2px); box-shadow: var(--shadow-md)}
.site-header__search-btn svg {width: 20px; height: 20px}

/* ---------- 5. DESKTOP NAV + MEGA MENU (light panels; dark overrides in 7) ---------- */
.site-header__nav {font-family: var(--font-heading)}
.site-header__nav .sub-menu {font-family: var(--font-sans)}
.site-header__nav .menu {display: flex; align-items: center; gap: var(--space-md)}
.site-header__nav .menu-item {position: relative}
.site-header__nav .menu > .menu-item > a {display: flex; align-items: center; gap: 5px; font-size: var(--fs-sm); font-weight: 500; line-height: 1.6; color: var(--clr-brand); padding-block: var(--space-2xs); transition: var(--transition)}
.site-header__nav .menu > .menu-item > a:is(:hover, :focus), .site-header__nav .menu > .menu-item.is-open > a, .site-header__nav .menu > .menu-item:hover > a {color: var(--clr-brand-dark)}
.site-header__nav .menu > :is(.current-menu-item, .current-menu-ancestor) > a {color: var(--clr-brand-dark)}
.site-header__nav .menu-item-has-children > a::after {content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: var(--transition); margin-block-start: -3px}
.site-header__nav .menu-item-has-children:hover > a::after, .site-header__nav .menu-item-has-children.is-open > a::after {transform: rotate(225deg); margin-block-start: 3px}
.site-header__nav .sub-menu {position: absolute; top: calc(100% + 16px); left: 50%; min-width: 220px; padding: var(--space-2xs); border-radius: var(--radius-md); background: rgba(255,255,255,0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--clr-line); box-shadow: var(--shadow-panel); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(8px); transition: var(--transition); z-index: 10}
.site-header__nav .sub-menu::before {content: ''; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; background: #fff; border-inline-start: 1px solid var(--clr-line); border-block-start: 1px solid var(--clr-line); transform: translateX(-50%) rotate(45deg)}
.site-header__nav .menu-item-has-children:hover > .sub-menu, .site-header__nav .menu-item-has-children:focus-within > .sub-menu, .site-header__nav .menu-item-has-children.is-open > .sub-menu {opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0)}
.site-header__nav .sub-menu .menu-item > a {display: block; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-sm); font-size: var(--fs-sm); line-height: 1.6; color: #000; white-space: nowrap; transition: var(--transition)}
/* Original theme scheme: black links, brand purple on hover, no background */
.site-header__nav .sub-menu .menu-item > a:is(:hover, :focus) {background: none; color: var(--clr-brand)}
.site-header__nav .sub-menu .sub-menu {top: -10px; left: calc(100% + 14px); transform: translateY(8px)}
.site-header__nav .sub-menu .sub-menu::before {top: 16px; left: -6px; transform: rotate(-45deg)}

/* Mega menu image cards (functions.php sixfifty_menu_image_markup()) */
.site-header__nav .sub-menu a.image-link {display: flex; align-items: center; gap: 16px; padding: 1.5rem; margin-block-end: 15px; border-radius: 20px; background: var(--clr-lilac); color: var(--clr-text-on-light); white-space: normal}
.site-header__nav a.image-link > img {flex: none; width: 64px; height: 64px; max-width: none; padding: 10px; border-radius: 10px; background: #fff; object-fit: contain; transition: var(--transition)}
.site-header__nav .link-content {display: flex; flex-direction: column; min-width: 0; font-size: 18px; font-weight: 700; line-height: 1.5; color: inherit}
.site-header__nav .menu-item-description {min-width: 0; margin: 0; padding-inline-end: 1.5rem; font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--clr-text-on-light-muted); white-space: normal; transition: var(--transition)}
.site-header__nav .custom-text {order: 3; display: flex; align-items: center; gap: 6px; font-size: 1rem; font-weight: 400; color: var(--clr-purple-600); transition: var(--transition)}
.site-header__nav .custom-text::after {content: ''; position: static; width: 13px; height: 11px; margin: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 15'%3E%3Cpath d='M1 7.5h14M10 1.5l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 15'%3E%3Cpath d='M1 7.5h14M10 1.5l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: var(--transition)}
.site-header__nav .sub-menu a.image-link:is(:hover, :focus-visible) {background: linear-gradient(135deg, var(--clr-purple-500), var(--clr-purple-600)); color: var(--clr-text-on-dark)}
.site-header__nav .sub-menu a.image-link:is(:hover, :focus-visible) > img {background: rgba(255,255,255,0.2); filter: brightness(0) invert(1)}
.site-header__nav .sub-menu a.image-link:is(:hover, :focus-visible) :is(.menu-item-description, .custom-text) {color: var(--clr-text-on-dark)}
.site-header__nav .sub-menu a.image-link:is(:hover, :focus-visible) .custom-text::after {transform: translateX(5px)}

/* Column titles + column layouts (ACF number_of_columns -> .column-number-N) */
.site-header__nav .sub-menu .submenu-title > a, .site-header__nav .menu > [class*="column-number-"] > .sub-menu > .menu-item > a:not(.hide_link) {font-size: 1.015rem; font-weight: 400; text-transform: uppercase; color: var(--clr-purple-600)}
.site-header__nav .sub-menu .submenu-title > a:is(:hover, :focus), .site-header__nav .menu > [class*="column-number-"] > .sub-menu > .menu-item > a:not(.hide_link):is(:hover, :focus) {background: none; color: var(--clr-purple-700)}
.site-header__nav .menu > [class*="column-number-"] .sub-menu a {white-space: normal}
.site-header__nav .menu > [class*="column-number-"] > .sub-menu > .menu-item {display: flex; flex-direction: column; min-width: 0}
.site-header__nav .menu > [class*="column-number-"] > .sub-menu > .menu-item > a:not(.image-link) {padding: 20px 30px 8px; line-height: 1.5}
.site-header__nav .menu > [class*="column-number-"] .sub-menu .sub-menu .menu-item > a:not(.image-link) {padding: 0.5rem 32px; line-height: 1.5; font-size: 1.1rem; font-weight: 700; color: #000}
.site-header__nav .menu > [class*="column-number-"] .sub-menu .sub-menu .menu-item > a:not(.image-link):is(:hover, :focus) {color: var(--clr-brand)}
.site-header__nav .menu > [class*="column-number-"] .sub-menu .sub-menu {position: static; min-width: 0; display: flex; flex-direction: column; padding: 0; max-height: none; overflow: visible; opacity: 1; visibility: inherit; pointer-events: inherit; transform: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none}
.site-header__nav .menu > [class*="column-number-"] .sub-menu .sub-menu::before {display: none}
.site-header__nav .menu > [class*="column-number-"] .sub-menu .menu-item-has-children > a::after {display: none}
@media (min-width: 861px) {
  .site-header__nav .menu > [class*="column-number-"] > .sub-menu {padding: var(--space-sm)}
  .site-header__nav .menu > .column-number-1 > .sub-menu {width: min(24rem, 100vw - var(--container-pad) * 2)}
  .site-header__nav .menu > :is(.column-number-2, .column-number-3, .column-number-4) {position: static}
  .site-header__nav .menu > :is(.column-number-2, .column-number-3, .column-number-4) > .sub-menu {top: calc(100% - 14px); display: grid; gap: 0; padding: 30px; width: min(56rem, 100% - var(--container-pad) * 2)}
  .site-header__nav .menu > .column-number-2 > .sub-menu {grid-template-columns: repeat(2, minmax(0, 1fr))}
  .site-header__nav .menu > .column-number-3 > .sub-menu {grid-template-columns: minmax(0, 1.21fr) repeat(2, minmax(0, 1fr))}
  .site-header__nav .menu > :is(.column-number-2, .column-number-3, .column-number-4) > .sub-menu > .menu-item:not(.submenu-title) {margin: 25px 17px 0 0}
  .site-header__nav .menu > .column-number-4 > .sub-menu {grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(76rem, 100% - var(--container-pad) * 2)}
  .site-header__nav .menu > :is(.column-number-2, .column-number-3, .column-number-4) > .sub-menu::before {display: none}
  .site-header__nav .menu > :is(.column-number-2, .column-number-3, .column-number-4) > .sub-menu::after {content: ''; position: absolute; inset-inline: 0; bottom: 100%; height: 8px}
  .site-header__nav .sub-menu a.hide_link {display: none}
}
@media (min-width: 861px) and (max-width: 1040px) {
  .site-header__nav .menu > :is(.column-number-3, .column-number-4) > .sub-menu {grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (max-width: 860px) {
  .site-header__toggle {display: flex}
  .site-header__nav, .site-header__search-toggle, .site-header__search {display: none}
  /* Logo left, actions + menu button right (the button stays at the right edge when the menu is open and the actions are hidden) */
  .site-header__actions {order: 2; margin-inline-start: auto}
  .site-header__toggle {order: 3}
  .site-header__toggle[aria-expanded="true"] {margin-inline-start: auto}
}

/* ---------- 6. MOBILE MENU (.sfm, same in both skins) ---------- */
.sfm {display: none}
@media (max-width: 860px) {
  .sfm {--mb-primary: #532489; --mb-accent: #945BD6; --mb-lilac: #f6f0fe; --mb-hover: #8864c5; --mb-line: rgba(112,112,112,0.5); --mb-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-h)); display: block; color: #000}
  html.sfm-lock body {overflow: hidden}
  .site-header__toggle[aria-expanded="true"] ~ .site-header__actions {display: none}
  .site-header .site-header__login {display: none}
  .site-header__toggle[aria-expanded="true"] span:nth-child(1) {transform: translateY(7px) rotate(45deg)}
  .site-header__toggle[aria-expanded="true"] span:nth-child(2) {opacity: 0}
  .site-header__toggle[aria-expanded="true"] span:nth-child(3) {transform: translateY(-7px) rotate(-45deg)}
  .sfm__backdrop {position: fixed; inset: var(--mb-top) 0 0; z-index: 997; background: rgba(0,0,0,0.55); opacity: 0; visibility: hidden; transition: opacity 0.4s ease-in, visibility 0s 0.4s}
  .sfm__state {position: fixed; inset: var(--mb-top) 0 0; z-index: 998; background: #fff; transform: translateX(100%); visibility: hidden; transition: transform 0.3s ease-in-out, visibility 0s 0.3s}
  .sfm.is-open .sfm__backdrop {opacity: 1; visibility: visible; transition: opacity 0.4s ease-in}
  .sfm.is-open .sfm__state {transform: none; visibility: visible; transition: transform 0.3s ease-in-out}
  .sfm__inner {position: relative; width: 100%; height: 100%; overflow: hidden}
  .sfm__panel, .sfm__sub {position: absolute; inset: 0; overflow: hidden auto; overscroll-behavior: contain; background: #fff; padding-block: 20px; transition: transform 0.4s ease, visibility 0s}
  .sfm__sub {transform: translateX(100%); visibility: hidden; transition: transform 0.4s ease, visibility 0s 0.4s}
  .sfm__sub.is-open {transform: none; visibility: visible; transition: transform 0.4s ease}
  .sfm__inner.has-open .sfm__panel {transform: translateX(-100%); visibility: hidden; transition: transform 0.4s ease, visibility 0s 0.4s}
  .sfm .menu, .sfm__sub > .sub-menu {padding-inline: 37px}
  .sfm li {display: flex; flex-wrap: wrap; justify-content: space-between; text-transform: uppercase}
  .sfm li > a {flex: 1 1 auto; display: flex; padding: 15px 0; font-size: 1.015rem; font-weight: 500; line-height: 1.3; color: var(--mb-accent); text-decoration: none}
  .sfm__caret {display: grid; align-items: center; justify-content: flex-end; width: 30px}
  .sfm__caret::before, .sfm__back::before {content: ''; width: 14px; height: 14px; border: 3px solid var(--mb-primary); border-left: 0; border-bottom: 0; transform: rotate(45deg); transition: 0.3s}
  .sfm__caret[aria-expanded="true"]::before {transform: rotate(-45deg)}
  .sfm__back {position: relative; display: block; width: 100%; padding: 15px 15px 15px 25px; font-size: 1rem; font-weight: 100; line-height: 1.5; text-transform: uppercase; color: #000; text-align: start}
  .sfm__sub > .sfm__back {width: auto; margin-inline: 37px}
  .sfm__back::before {position: absolute; inset-block-start: 50%; inset-inline-start: 0; transform: translateY(-50%) rotate(45deg) scale(-1)}
  .sfm .sub-menu {position: static; min-width: 0; margin: 0; opacity: 1; visibility: visible; pointer-events: auto; transform: none; background: none; border: 0; border-radius: 0; box-shadow: none}
  .sfm__acc {display: grid; grid-template-rows: 0fr; flex: 0 0 100%; visibility: hidden; transition: grid-template-rows 0.4s ease, visibility 0s 0.4s}
  .sfm .is-open > .sfm__acc {grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.4s ease}
  .sfm__acc-inner {min-height: 0; overflow: hidden}
  .sfm__acc-inner > .sub-menu {margin-block-end: 25px; padding-block: 20px; border-block: 1px solid var(--mb-line)}
  .sfm li > a.image-link {flex-wrap: nowrap; align-items: flex-start; gap: 15px; margin-block-end: 15px; padding: 1.5rem; border-radius: 20px; background: var(--mb-lilac); color: #000; transition: 0.5s}
  .sfm a.image-link > img {flex: none; width: 39px; height: 39px; max-width: none; border-radius: 5px; object-fit: cover; position: relative; top: 4px}
  .sfm .link-content {display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; font-size: 18px; font-weight: 700; color: #000; transition: 0.5s}
  .sfm .menu-item-description {display: none}
  .sfm .custom-text {order: 3; display: flex; align-items: center; font-size: 1rem; font-weight: 400; color: var(--mb-primary)}
  .sfm .custom-text::after {content: ''; position: static; width: 13px; height: 11px; margin: 0 0 0 6px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 15'%3E%3Cpath d='M1 7.5h14M10 1.5l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 15'%3E%3Cpath d='M1 7.5h14M10 1.5l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat}
  .sfm li > a.image-link:is(:hover, :focus-visible) {background: var(--mb-hover)}
  .sfm li > a.image-link:is(:hover, :focus-visible) :is(.link-content, .menu-item-description) {color: #fff}
  .sfm__footer {padding: 20px; font-family: var(--font-heading)}
  .sfm__footer-inner {display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding-block: 60px; text-align: center; border-top: 1px solid var(--mb-line)}
  .sfm__footer .btn-primary, .sfm__footer .btn-primary:is(:hover, :focus) {background: var(--mb-accent)}
  .sfm__footer .btn-trial {border: 1px solid var(--mb-accent)}
  .sfm__links a {font-size: 1.25rem; color: var(--mb-accent)}
  /* Search field at the top of the mobile menu (the header search icon is hidden at this width) */
  .sfm__search {display: flex; gap: 8px; margin: 0 37px 10px}
  .sfm .sfm__search-input, .sfm .sfm__search-input:focus {flex: 1 1 auto; min-width: 0; height: 46px; border: 0; box-shadow: none; padding-inline: 1.25rem; border-radius: var(--radius-full); background: var(--mb-lilac); font-size: 1rem; color: #000; -webkit-appearance: none; appearance: none}
  .sfm .sfm__search-btn {display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--mb-accent); color: #fff}
  .sfm__search-btn svg {width: 18px; height: 18px}
}
/* ---------- 7. DARK HEADER SKIN (.site-header--dark: templates in sixfifty_dark_header_templates(); same colors as the FrontPage v2 design) ---------- */
.site-header--dark {background: var(--clr-bg-dark-900); border-block-end-color: transparent; color: var(--clr-text-on-dark)}
.site-header--dark .site-header__login {color: var(--clr-text-on-dark-muted)}
.site-header--dark .site-header__login:is(:hover, :focus) {color: var(--clr-text-on-dark)}
.site-header--dark .site-header__toggle span {background: var(--clr-text-on-dark)}
.site-header--dark .site-header__search-toggle {color: var(--clr-text-on-dark-muted)}
.site-header--dark .site-header__search-toggle:hover, .site-header--dark .site-header__search-toggle[aria-expanded="true"] {background: rgba(255,255,255,0.08); color: var(--clr-text-on-dark)}
.site-header--dark .site-header__search {border-block-start-color: var(--clr-border-dark); background: var(--clr-bg-dark-900)}
.site-header.site-header--dark :is(.site-header__search-input, .site-header__search-input:focus) {background: rgba(255,255,255,0.06); color: var(--clr-text-on-dark)}
.site-header.site-header--dark .site-header__search-input::placeholder {color: var(--clr-text-on-dark-muted)}
/* Top-level links */
.site-header--dark .site-header__nav .menu > .menu-item > a {color: var(--clr-text-on-dark-muted)}
.site-header--dark .site-header__nav .menu > .menu-item > a:is(:hover, :focus), .site-header--dark .site-header__nav .menu > .menu-item.is-open > a, .site-header--dark .site-header__nav .menu > .menu-item:hover > a, .site-header--dark .site-header__nav .menu > :is(.current-menu-item, .current-menu-ancestor) > a {color: var(--clr-text-on-dark)}
/* Dropdown panels + links */
.site-header--dark .site-header__nav .sub-menu {background: rgba(26,15,46,0.85); border-color: var(--clr-border-dark); box-shadow: var(--shadow-lg)}
.site-header--dark .site-header__nav .sub-menu::before {background: rgba(26,15,46,0.85); border-color: var(--clr-border-dark)}
.site-header--dark .site-header__nav .sub-menu .menu-item > a {color: var(--clr-text-on-dark-muted)}
.site-header--dark .site-header__nav .sub-menu .menu-item > a:is(:hover, :focus) {background: rgba(139,92,246,0.16); color: var(--clr-text-on-dark)}
.site-header--dark .site-header__nav .sub-menu :is(.current-menu-item, .current-menu-ancestor) > a {color: var(--clr-text-on-dark)}
/* Mega menu image cards */
.site-header--dark .site-header__nav .sub-menu a.image-link {background: rgba(255,255,255,0.05); color: var(--clr-text-on-dark)}
.site-header--dark .site-header__nav a.image-link > img {background: var(--clr-badge-bg)}
.site-header--dark .site-header__nav .menu-item-description {color: var(--clr-text-on-dark-muted)}
.site-header--dark .site-header__nav .custom-text {color: var(--clr-purple-300)}
.site-header--dark .site-header__nav .sub-menu a.image-link:is(:hover, :focus-visible) {background: linear-gradient(135deg, var(--clr-purple-500), var(--clr-purple-600)); color: var(--clr-text-on-dark)}
.site-header--dark .site-header__nav .sub-menu a.image-link:is(:hover, :focus-visible) > img {background: rgba(255,255,255,0.2)}
.site-header--dark .site-header__nav .sub-menu a.image-link:is(:hover, :focus-visible) :is(.menu-item-description, .custom-text) {color: var(--clr-text-on-dark)}
/* Column titles + column links */
.site-header--dark .site-header__nav .sub-menu .submenu-title > a, .site-header--dark .site-header__nav .menu > [class*="column-number-"] > .sub-menu > .menu-item > a:not(.hide_link) {color: var(--clr-purple-400)}
.site-header--dark .site-header__nav .sub-menu .submenu-title > a:is(:hover, :focus), .site-header--dark .site-header__nav .menu > [class*="column-number-"] > .sub-menu > .menu-item > a:not(.hide_link):is(:hover, :focus) {background: none; color: var(--clr-purple-300)}
.site-header--dark .site-header__nav .menu > [class*="column-number-"] .sub-menu .sub-menu .menu-item > a:not(.image-link) {color: var(--clr-text-on-dark)}
.site-header--dark .site-header__nav .menu > [class*="column-number-"] .sub-menu .sub-menu .menu-item > a:not(.image-link):is(:hover, :focus) {background: none; color: var(--clr-purple-300)}

/* ---------- 8. FOOTER (footer.php: Theme Options > Footer fields + bottom_first/second/third and footer-policy-menu menus) ---------- */
.site-footer {display: block; width: 100%; padding-block: var(--space-2xl) var(--space-lg); color: #fff; background: radial-gradient(ellipse 50% 18% at 50% 100%, rgba(148,91,214,0.22), rgba(148,91,214,0) 100%), linear-gradient(180deg, #12032a 0%, #12032a 55%, #1f0f42 100%)}
/* Own width wrapper instead of .container (Customizer "Additional CSS" pads .container on phones) */
.site-footer__inner {width: min(100% - (var(--container-pad) * 2), var(--container-max)); margin-inline: auto}
.site-footer__top {display: grid; grid-template-columns: 1.1fr 2fr; gap: var(--space-2xl); padding-block-end: var(--space-2xl); border-block-end: 1px solid var(--clr-border-dark)}
.site-footer__brand img {width: auto; height: 26px}
.site-footer .site-footer__tagline {margin-block-start: var(--space-sm); max-width: 26ch; font-size: var(--fs-body); line-height: var(--lh-normal); color: #fff}
.site-footer__columns {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg)}
.site-footer .site-footer__column-title {margin: 0; font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: 700; line-height: var(--lh-tight); letter-spacing: 0.06em; text-transform: uppercase; color: #fff}
.site-footer .site-footer__links {margin-block-start: var(--space-sm); display: flex; flex-direction: column; align-items: flex-start; gap: max(0px, var(--space-xs) - 8px)}
/* Extra space after a footer menu item: add the CSS class "fmenuspace" to the item in Appearance > Menus */
.site-footer .site-footer__links .fmenuspace {margin-bottom: 1.1rem}
.site-footer .site-footer__links a {display: inline-block; padding-block: 4px; font-family: var(--font-heading); font-size: var(--fs-sm); line-height: var(--lh-normal); color: #fff; transition: var(--transition)}
.site-footer .site-footer__links a:is(:hover, :focus) {color: var(--clr-purple-300)}
.site-footer__bottom {display: flex; flex-direction: column; gap: var(--space-md); padding-block-start: var(--space-lg)}
.site-footer__bottom-row {display: flex; align-items: center; justify-content: space-between; gap: var(--space-md)}
.site-footer__social {display: flex; gap: var(--space-sm)}
.site-footer .site-footer__social-link {display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; transition: var(--transition)}
.site-footer .site-footer__social-link:is(:hover, :focus) {background: var(--clr-purple-600)}
.site-footer__social-icon {width: 16px; height: 16px; background-color: #fff; -webkit-mask-image: var(--icon-src); mask-image: var(--icon-src); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: var(--transition)}
.site-footer .site-footer__copyright {font-size: var(--fs-xs); color: #fff; white-space: nowrap}
.site-footer .site-footer__legal {font-size: var(--fs-xs); line-height: var(--lh-normal); color: #fff}
.site-footer .site-footer__policy-list {display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) var(--space-md)}
.site-footer .site-footer__policy-list a {font-size: var(--fs-xs); color: #fff; transition: var(--transition)}
.site-footer .site-footer__policy-list a:is(:hover, :focus) {color: var(--clr-purple-300)}
@media (max-width: 860px) {
  .site-footer__top {grid-template-columns: 1fr; gap: var(--space-lg)}
  .site-footer__columns {grid-template-columns: repeat(2, 1fr)}
  .site-footer__bottom-row {flex-direction: column-reverse; align-items: flex-start; gap: var(--space-sm)}
  .site-footer .site-footer__copyright {white-space: normal}
}
@media (max-width: 359px) {
  .site-footer__columns {grid-template-columns: 1fr}
}

/* Phones: the top bar only has room for Book a demo; Try for free moves into the menu */
@media (max-width: 479px) {
  .site-header__actions .btn-trial {display: none}
}
@media (prefers-reduced-motion: reduce) {
  .site-header *, .site-header *::before, .site-header *::after, .sfm *, .sfm *::before, .sfm *::after, .site-footer *, .site-footer *::before, .site-footer *::after {transition: none !important}
}