:root {
  --flx-bg: #f6f9fb;
  --flx-surface: #ffffff;
  --flx-surface-2: #eaf2f5;
  --flx-text: #12202a;
  --flx-muted: #5d6d78;
  --flx-border: rgba(18, 32, 42, 0.12);
  --flx-primary: #08a8a8;
  --flx-primary-strong: #07898f;
  --flx-primary-soft: rgba(8, 168, 168, 0.12);
  --flx-navy: #07131b;
  --flx-shadow: 0 24px 60px rgba(20, 45, 60, 0.12);
  --flx-radius: 24px;
  --flx-radius-sm: 14px;
  --flx-container: 1220px;
  --flx-header: 84px;
}

html[data-theme="dark"] {
  --flx-bg: #07131b;
  --flx-surface: #0d1c26;
  --flx-surface-2: #102631;
  --flx-text: #f3f8fa;
  --flx-muted: #a7b8c1;
  --flx-border: rgba(255, 255, 255, 0.12);
  --flx-primary: #13b8b7;
  --flx-primary-strong: #39d0ca;
  --flx-primary-soft: rgba(19, 184, 183, 0.12);
  --flx-shadow: 0 28px 70px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --flx-bg: #07131b;
    --flx-surface: #0d1c26;
    --flx-surface-2: #102631;
    --flx-text: #f3f8fa;
    --flx-muted: #a7b8c1;
    --flx-border: rgba(255, 255, 255, 0.12);
    --flx-primary: #13b8b7;
    --flx-primary-strong: #39d0ca;
    --flx-primary-soft: rgba(19, 184, 183, 0.12);
    --flx-shadow: 0 28px 70px rgba(0, 0, 0, 0.3);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--flx-text);
  background: var(--flx-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  transition: color 180ms ease, background 180ms ease;
}

body.nav-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--flx-primary-strong);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
}

button {
  color: inherit;
}

h1, h2, h3, h4 {
  margin: 0 0 0.55em;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

h1 {
  font-size: clamp(2.7rem, 6vw, 5.7rem);
}

h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
}

h3 {
  font-size: clamp(1.3rem, 2vw, 1.65rem);
}

p {
  margin: 0 0 1.25em;
}

ul, ol {
  padding-left: 1.2em;
}

:focus-visible {
  outline: 3px solid var(--flx-primary);
  outline-offset: 4px;
}

::selection {
  color: #07131b;
  background: #7ce5df;
}

.flx-container {
  width: min(calc(100% - 40px), var(--flx-container));
  margin-inline: auto;
}

.flx-section {
  position: relative;
  padding: clamp(80px, 9vw, 140px) 0;
}

.flx-section--compact {
  padding: 0 0 64px;
}

.flx-section--tinted {
  background: var(--flx-surface-2);
}

.flx-section--cta {
  padding-top: 36px;
}

.flx-narrow-copy {
  max-width: 780px;
  margin: 32px auto 0;
  text-align: center;
  color: var(--flx-muted);
}

.flx-sr-only, .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.flx-skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
  transform: translateY(-150%);
  padding: 10px 16px;
  color: #fff;
  background: #07131b;
  border-radius: 8px;
}

.flx-skip-link:focus {
  transform: none;
}

.flx-eyebrow {
  margin-bottom: 16px;
  color: var(--flx-primary-strong);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.flx-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: var(--flx-header);
  background: color-mix(in srgb, var(--flx-bg) 86%, transparent);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(18px);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.flx-header.is-scrolled {
  border-color: var(--flx-border);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.flx-header__inner {
  min-height: var(--flx-header);
  display: flex;
  align-items: center;
  gap: 28px;
}

.flx-brand {
  display: inline-flex;
  flex: 0 0 auto;
  width: 180px;
  text-decoration: none;
}

.flx-logo {
  width: 100%;
  max-height: 58px;
  object-fit: contain;
  object-position: left center;
}

.flx-logo--dark-theme {
  display: none;
}

html[data-theme="dark"] .flx-logo--light-theme {
  display: none;
}

html[data-theme="dark"] .flx-logo--dark-theme {
  display: block;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .flx-logo--light-theme {
    display: none;
  }

  html[data-theme="system"] .flx-logo--dark-theme {
    display: block;
  }
}

.flx-nav {
  margin-left: auto;
}

.flx-nav__list {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flx-nav__list a {
  display: inline-flex;
  padding: 12px 0;
  color: var(--flx-muted);
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
}

.flx-nav__list a:hover, .flx-nav__list .current-menu-item > a, .flx-nav__list .is-current > a {
  color: var(--flx-primary-strong);
}

.flx-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.flx-theme-toggle {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--flx-border);
  border-radius: 50%;
  background: var(--flx-surface);
  cursor: pointer;
}

.flx-theme-toggle__moon {
  display: none;
}

html[data-theme="dark"] .flx-theme-toggle__sun {
  display: none;
}

html[data-theme="dark"] .flx-theme-toggle__moon {
  display: inline;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .flx-theme-toggle__sun {
    display: none;
  }

  html[data-theme="system"] .flx-theme-toggle__moon {
    display: inline;
  }
}

.flx-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--flx-border);
  border-radius: 12px;
  background: var(--flx-surface);
  cursor: pointer;
}

.flx-nav-toggle span:not(.flx-sr-only) {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: currentColor;
  border-radius: 4px;
  transition: transform 180ms ease, opacity 180ms ease;
}

.flx-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  color: #041417;
  background: var(--flx-primary);
  border: 1px solid var(--flx-primary);
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(8,168,168,.18);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.flx-button:hover {
  color: #041417;
  background: var(--flx-primary-strong);
  transform: translateY(-2px);
  box-shadow: 0 18px 32px rgba(8,168,168,.24);
}

.flx-button:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.flx-button--small {
  min-height: 42px;
  padding: 0 18px;
  font-size: .88rem;
}

.flx-button--outline {
  color: var(--flx-text);
  background: transparent;
  border-color: var(--flx-border);
  box-shadow: none;
}

.flx-button--outline:hover {
  color: var(--flx-text);
  background: var(--flx-primary-soft);
  border-color: var(--flx-primary);
}

.flx-button--ghost {
  color: var(--flx-text);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.flx-button--ghost:hover {
  color: var(--flx-primary-strong);
  background: var(--flx-primary-soft);
}

.flx-button--light {
  color: #07131b;
  background: #fff;
  border-color: #fff;
}

.flx-button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}

.flx-text-link {
  display: inline-flex;
  align-items: center;
  color: var(--flx-primary-strong);
  font-weight: 800;
  text-decoration: none;
}

.flx-hero {
  position: relative;
  min-height: calc(100vh - var(--flx-header));
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: clamp(70px, 9vw, 130px) 0 100px;
  isolation: isolate;
}

.flx-hero::before {
  content: "";
  position: absolute;
  inset: auto -5% 0;
  z-index: -2;
  height: 48%;
  background: url("../images/banner-light.svg") center bottom / cover no-repeat;
  opacity: .16;
  pointer-events: none;
}

html[data-theme="dark"] .flx-hero::before {
  background-image: url("../images/banner-dark.svg");
  opacity: .2;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .flx-hero::before {
    background-image: url("../images/banner-dark.svg");
    opacity: .2;
  }
}

.flx-hero__glow {
  position: absolute;
  top: -15%;
  right: -10%;
  z-index: -3;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8,168,168,.22), transparent 65%);
  filter: blur(20px);
}

.flx-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr);
  gap: clamp(50px, 8vw, 110px);
  align-items: center;
}

.flx-hero__content h1 {
  max-width: 860px;
}

.flx-hero__lead {
  max-width: 720px;
  color: var(--flx-muted);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.flx-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin: 34px 0 0;
  padding: 0;
  color: var(--flx-muted);
  list-style: none;
}

.flx-hero__proof li::before {
  content: "✓";
  margin-right: 8px;
  color: var(--flx-primary-strong);
  font-weight: 900;
}

.flx-hero__visual {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
}

.flx-orbit {
  position: absolute;
  border: 1px solid rgba(8,168,168,.25);
  border-radius: 50%;
  animation: flx-spin 26s linear infinite;
}

.flx-orbit::before, .flx-orbit::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--flx-primary);
  box-shadow: 0 0 18px var(--flx-primary);
}

.flx-orbit::before {
  top: 8%;
  left: 18%;
}

.flx-orbit::after {
  right: 4%;
  bottom: 25%;
}

.flx-orbit--one {
  width: 430px;
  height: 430px;
}

.flx-orbit--two {
  width: 330px;
  height: 330px;
  animation-direction: reverse;
  animation-duration: 20s;
}

.flx-system-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--flx-surface) 88%, transparent);
  border: 1px solid var(--flx-border);
  border-radius: 18px;
  box-shadow: var(--flx-shadow);
  backdrop-filter: blur(16px);
}

.flx-system-card--main {
  position: relative;
  z-index: 2;
  width: 230px;
  min-height: 230px;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-color: rgba(8,168,168,.35);
}

.flx-system-card--main img {
  width: 84px;
  margin-bottom: 12px;
}

.flx-system-card--main strong {
  font-size: 1.5rem;
}

.flx-system-card--main span {
  color: var(--flx-muted);
  font-size: .9rem;
}

.flx-system-card--a {
  top: 8%;
  left: 0;
}

.flx-system-card--b {
  top: 22%;
  right: -2%;
}

.flx-system-card--c {
  right: 6%;
  bottom: 5%;
}

@keyframes flx-spin {
  to {
    transform: rotate(360deg);
  }
}

.flx-metric-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: var(--flx-radius);
  box-shadow: var(--flx-shadow);
}

.flx-metric-strip > div {
  padding: 28px;
  border-right: 1px solid var(--flx-border);
}

.flx-metric-strip > div:last-child {
  border-right: 0;
}

.flx-metric-strip strong, .flx-metric-strip span {
  display: block;
}

.flx-metric-strip strong {
  color: var(--flx-primary-strong);
  font-size: 1.25rem;
}

.flx-metric-strip span {
  color: var(--flx-muted);
  font-size: .92rem;
}

.flx-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 48px;
}

.flx-section-heading > div {
  max-width: 780px;
}

.flx-card-grid {
  display: grid;
  gap: 24px;
}

.flx-card-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.flx-card {
  position: relative;
  padding: 30px;
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: var(--flx-radius);
  box-shadow: 0 12px 32px rgba(0,0,0,.04);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.flx-card:hover {
  transform: translateY(-5px);
  border-color: rgba(8,168,168,.35);
  box-shadow: var(--flx-shadow);
}

.flx-card h2, .flx-card h3 {
  margin-top: 18px;
}

.flx-card p {
  color: var(--flx-muted);
}

.flx-service-card {
  min-height: 310px;
  display: flex;
  flex-direction: column;
}

.flx-service-card__top {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.flx-service-card h3 a {
  text-decoration: none;
}

.flx-service-card .flx-text-link {
  margin-top: auto;
}

.flx-icon {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  background: var(--flx-primary-soft);
  border-radius: 12px;
}

.flx-icon::before {
  content: "✦";
  color: var(--flx-primary-strong);
  font-weight: 900;
}

.flx-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  padding: 3px 11px;
  color: var(--flx-primary-strong);
  background: var(--flx-primary-soft);
  border: 1px solid rgba(8,168,168,.24);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.flx-status--coming_soon, .flx-status--in_development {
  color: #a76800;
  background: rgba(242,164,24,.13);
  border-color: rgba(242,164,24,.28);
}

html[data-theme="dark"] .flx-status--coming_soon, html[data-theme="dark"] .flx-status--in_development {
  color: #ffd27a;
}

.flx-status--temporarily_unavailable, .flx-status--retired {
  color: #a93c44;
  background: rgba(211,74,83,.12);
  border-color: rgba(211,74,83,.25);
}

.flx-status--beta {
  color: #6554b9;
  background: rgba(112,91,205,.13);
  border-color: rgba(112,91,205,.25);
}

.flx-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(54px, 8vw, 110px);
  align-items: center;
}

.flx-split--reverse > :first-child {
  order: 2;
}

.flx-split__content > p:not(.flx-eyebrow) {
  color: var(--flx-muted);
}

.flx-check-list {
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.flx-check-list li {
  position: relative;
  padding-left: 30px;
  margin: 12px 0;
}

.flx-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--flx-primary-strong);
  font-weight: 900;
}

.flx-dashboard-mock {
  overflow: hidden;
  min-height: 430px;
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: 26px;
  box-shadow: var(--flx-shadow);
  transform: perspective(900px) rotateY(-5deg) rotateX(2deg);
}

.flx-dashboard-mock__top {
  height: 58px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  background: var(--flx-navy);
  color: #d5e5eb;
}

.flx-dashboard-mock__top i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #13b8b7;
}

.flx-dashboard-mock__top span {
  margin-left: 10px;
  font-size: .82rem;
}

.flx-dashboard-mock__body {
  min-height: 372px;
  display: grid;
  grid-template-columns: 84px 1fr;
}

.flx-dashboard-mock__side {
  background: var(--flx-surface-2);
  border-right: 1px solid var(--flx-border);
}

.flx-dashboard-mock__content {
  padding: 24px;
}

.flx-dashboard-mock__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.flx-dashboard-mock__cards i {
  height: 82px;
  background: linear-gradient(145deg, var(--flx-primary-soft), var(--flx-surface-2));
  border: 1px solid var(--flx-border);
  border-radius: 15px;
}

.flx-dashboard-mock__chart {
  position: relative;
  height: 210px;
  margin-top: 22px;
  overflow: hidden;
  background: var(--flx-surface-2);
  border: 1px solid var(--flx-border);
  border-radius: 18px;
}

.flx-dashboard-mock__chart::before {
  content: "";
  position: absolute;
  inset: 25% -10% auto;
  height: 3px;
  background: var(--flx-primary);
  box-shadow: 80px 30px 0 -1px var(--flx-primary), 170px -10px 0 -1px var(--flx-primary), 260px 45px 0 -1px var(--flx-primary);
  transform: rotate(-7deg);
}

.flx-hosting-visual {
  position: relative;
  min-height: 400px;
  display: grid;
  place-items: center;
}

.flx-server {
  position: absolute;
  width: 260px;
  padding: 18px;
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: 20px;
  box-shadow: var(--flx-shadow);
}

.flx-server span {
  display: block;
  height: 46px;
  margin: 10px 0;
  background: linear-gradient(90deg, var(--flx-primary-soft), transparent);
  border: 1px solid var(--flx-border);
  border-radius: 10px;
}

.flx-server span::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 18px;
  background: var(--flx-primary);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--flx-primary);
}

.flx-server--one {
  left: 7%;
  transform: rotate(-5deg);
}

.flx-server--two {
  right: 7%;
  transform: rotate(6deg);
}

.flx-domain-pill {
  position: relative;
  z-index: 2;
  padding: 16px 24px;
  background: var(--flx-navy);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  box-shadow: var(--flx-shadow);
  font-weight: 800;
}

.flx-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: clamp(36px, 6vw, 70px);
  color: #fff;
  background: radial-gradient(circle at 80% 20%, rgba(42,222,213,.28), transparent 30%), linear-gradient(135deg, #07131b, #0a3b43);
  border-radius: 32px;
  box-shadow: var(--flx-shadow);
}

.flx-cta > div {
  max-width: 800px;
}

.flx-cta .flx-eyebrow {
  color: #72e5df;
}

.flx-cta p:not(.flx-eyebrow) {
  color: #bcd1d8;
}

.flx-cta-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.flx-page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 10vw, 150px) 0;
  background: linear-gradient(150deg, var(--flx-surface-2), var(--flx-bg));
  border-bottom: 1px solid var(--flx-border);
}

.flx-page-hero::after {
  content: "";
  position: absolute;
  right: -10%;
  bottom: -60%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(8,168,168,.18), transparent 62%);
  pointer-events: none;
}

.flx-page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: 70px;
  align-items: end;
}

.flx-page-hero__grid > p {
  margin-bottom: .4em;
  color: var(--flx-muted);
  font-size: 1.15rem;
}

.flx-page-hero h1 {
  max-width: 980px;
  font-size: clamp(2.7rem, 6vw, 5rem);
}

.flx-page-hero--platform {
  padding-bottom: 120px;
}

.flx-page {
  min-height: 70vh;
}

.flx-content {
  max-width: 900px;
  padding-top: 80px;
  padding-bottom: 110px;
}

.flx-content > *:first-child {
  margin-top: 0;
}

.flx-content h2 {
  margin-top: 1.5em;
}

.flx-content p, .flx-content li {
  color: var(--flx-muted);
}

.flx-post-list {
  display: grid;
  gap: 24px;
  padding: 80px 0 120px;
}

.flx-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}

.flx-filter-bar button {
  padding: 9px 16px;
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: 999px;
  cursor: pointer;
}

.flx-filter-bar button.is-active {
  color: #041417;
  background: var(--flx-primary);
  border-color: var(--flx-primary);
}

[data-service-grid] > [hidden] {
  display: none !important;
}

.flx-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.flx-feature-grid .flx-card {
  min-height: 240px;
}

.flx-layer-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.flx-layer-stack span {
  display: block;
  padding: 24px;
  text-align: center;
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.05);
  font-weight: 800;
}

.flx-layer-stack span:nth-child(1) {
  margin-inline: 48px;
}

.flx-layer-stack span:nth-child(2) {
  margin-inline: 32px;
}

.flx-layer-stack span:nth-child(3) {
  margin-inline: 16px;
}

.flx-login-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  padding: 42px;
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: var(--flx-radius);
  box-shadow: var(--flx-shadow);
}

.flx-login-panel > div {
  max-width: 760px;
}

.flx-integration-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.flx-integration-flow span {
  padding: 16px 20px;
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: 14px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}

.flx-integration-flow i {
  width: 48px;
  height: 2px;
  background: var(--flx-primary);
}

.flx-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.flx-project-card {
  overflow: hidden;
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: var(--flx-radius);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.flx-project-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--flx-shadow);
}

.flx-project-card a {
  text-decoration: none;
}

.flx-project-card img, .flx-project-card__placeholder {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  background: var(--flx-surface-2);
}

.flx-project-card__placeholder {
  display: grid;
  place-items: center;
}

.flx-project-card__placeholder img {
  width: 86px;
  height: 86px;
  object-fit: contain;
}

.flx-project-card__content {
  padding: 26px;
}

.flx-project-card__content p {
  margin-bottom: 10px;
  color: var(--flx-primary-strong);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.flx-project-card__content span {
  color: var(--flx-primary-strong);
  font-weight: 800;
}

.flx-empty-state {
  grid-column: 1 / -1;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(42px, 7vw, 80px);
  text-align: center;
  background: var(--flx-surface);
  border: 1px dashed var(--flx-border);
  border-radius: 28px;
}

.flx-empty-state img {
  width: 90px;
  margin: 0 auto 24px;
}

.flx-empty-state p {
  color: var(--flx-muted);
}

.flx-values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.flx-values-grid > div {
  padding: 24px;
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: 16px;
}

.flx-values-grid strong, .flx-values-grid span {
  display: block;
}

.flx-values-grid strong {
  margin-bottom: 8px;
  color: var(--flx-primary-strong);
}

.flx-values-grid span {
  color: var(--flx-muted);
}

.flx-team-card img, .flx-avatar-placeholder {
  width: 100%;
  aspect-ratio: 1/1;
  margin-bottom: 24px;
  object-fit: cover;
  border-radius: 18px;
}

.flx-avatar-placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--flx-primary-soft), var(--flx-surface-2));
  color: var(--flx-primary-strong);
  font-size: 4rem;
  font-weight: 900;
}

.flx-team-card .flx-eyebrow {
  min-height: 42px;
}

.flx-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  gap: 60px;
  align-items: start;
}

.flx-contact-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 0;
  border-bottom: 1px solid var(--flx-border);
}

.flx-contact-card span {
  color: var(--flx-muted);
  font-size: .9rem;
}

.flx-contact-card a {
  color: var(--flx-primary-strong);
  font-weight: 800;
}

.flx-form-panel {
  padding: clamp(26px, 4vw, 44px);
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: var(--flx-radius);
  box-shadow: var(--flx-shadow);
}

.flx-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 34px;
  align-items: start;
}

.flx-form {
  display: grid;
  gap: 18px;
}

.flx-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.flx-field {
  display: grid;
  gap: 7px;
}

.flx-field label {
  font-size: .9rem;
  font-weight: 800;
}

.flx-field input, .flx-field select, .flx-field textarea {
  width: 100%;
  padding: 13px 15px;
  color: var(--flx-text);
  background: var(--flx-bg);
  border: 1px solid var(--flx-border);
  border-radius: 12px;
}

.flx-field textarea {
  min-height: 160px;
  resize: vertical;
}

.flx-field input:focus, .flx-field select:focus, .flx-field textarea:focus {
  border-color: var(--flx-primary);
  box-shadow: 0 0 0 4px var(--flx-primary-soft);
  outline: none;
}

.flx-honeypot {
  position: absolute !important;
  left: -9999px !important;
}

.flx-form-notice {
  padding: 16px 18px;
  border-radius: 12px;
  font-weight: 700;
}

.flx-form-notice--success {
  color: #0b665d;
  background: rgba(28,180,158,.13);
  border: 1px solid rgba(28,180,158,.26);
}

.flx-form-notice--error {
  color: #9b3039;
  background: rgba(211,74,83,.12);
  border: 1px solid rgba(211,74,83,.25);
}

.flx-form-notice--info {
  color: var(--flx-text);
  background: var(--flx-primary-soft);
  border: 1px solid var(--flx-border);
}

.flx-appointment-booking .flx-contact-card strong {
  display: block;
  margin-top: 4px;
}

.flx-appointment-booking select:disabled,
.flx-appointment-booking button:disabled {
  cursor: not-allowed;
  opacity: .62;
}

.flx-portal-shell {
  min-height: 420px;
}

.flx-footer {
  padding: 80px 0 24px;
  background: #07131b;
  color: #f2f8fa;
}

.flx-footer .flx-logo--light-theme {
  display: none;
}

.flx-footer .flx-logo--dark-theme {
  display: block;
}

.flx-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr .8fr 1fr .8fr;
  gap: 50px;
}

.flx-footer__brand .flx-brand {
  width: 210px;
}

.flx-footer__brand p {
  max-width: 390px;
  margin-top: 20px;
  color: #9fb4bd;
}

.flx-footer__heading {
  margin-bottom: 20px;
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.flx-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.flx-footer__links li {
  margin: 9px 0;
}

.flx-footer a {
  color: #b8cbd2;
  text-decoration: none;
}

.flx-footer a:hover {
  color: #4bd8d2;
}

.flx-socials {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flx-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 60px;
  padding-top: 24px;
  color: #8198a2;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .86rem;
}

.flx-footer__bottom p {
  margin: 0;
}

.flx-section--404 {
  min-height: 70vh;
  display: grid;
  place-items: center;
}

.flx-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.flx-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
  padding: 13px;
  color: var(--flx-text);
  background: var(--flx-bg);
  border: 1px solid var(--flx-border);
  border-radius: 10px;
}

.woocommerce button.button, .woocommerce a.button, .woocommerce input.button {
  color: #041417;
  background: var(--flx-primary);
  border-radius: 999px;
}

.woocommerce-MyAccount-navigation ul {
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 16px;
  border-bottom: 1px solid var(--flx-border);
  text-decoration: none;
}

@media (max-width: 1120px) {
  .flx-nav-toggle {
    display: block;
    margin-left: auto;
  }

  .flx-nav {
    position: fixed;
    inset: var(--flx-header) 0 auto;
    max-height: calc(100vh - var(--flx-header));
    overflow: auto;
    padding: 18px 20px 32px;
    background: var(--flx-bg);
    border-bottom: 1px solid var(--flx-border);
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 220ms ease, opacity 220ms ease;
  }

  .flx-nav.is-open {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  .flx-nav__list {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
  }

  .flx-nav__list a {
    padding: 14px 4px;
    border-bottom: 1px solid var(--flx-border);
  }

  .flx-header__actions .flx-button {
    display: none;
  }

  .flx-hero__grid {
    grid-template-columns: 1fr;
  }

  .flx-hero__visual {
    min-height: 470px;
    max-width: 620px;
    margin: 0 auto;
    width: 100%;
  }

  .flx-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .flx-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  :root {
    --flx-header: 72px;
  }

  body {
    font-size: 16px;
  }

  .flx-container {
    width: min(calc(100% - 28px), var(--flx-container));
  }

  .flx-brand {
    width: 185px;
  }

  .flx-header__inner {
    gap: 12px;
  }

  .flx-card-grid--3, .flx-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flx-split, .flx-page-hero__grid, .flx-contact-grid, .flx-form-layout {
    grid-template-columns: 1fr;
  }

  .flx-split--reverse > :first-child {
    order: initial;
  }

  .flx-metric-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .flx-metric-strip > div:nth-child(2) {
    border-right: 0;
  }

  .flx-metric-strip > div:nth-child(-n/**/+2) {
    border-bottom: 1px solid var(--flx-border);
  }

  .flx-section-heading, .flx-cta, .flx-cta-inline, .flx-login-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .flx-page-hero__grid {
    gap: 24px;
  }

  .flx-dashboard-mock {
    transform: none;
  }
}

@media (max-width: 560px) {
  .flx-theme-toggle {
    width: 40px;
    height: 40px;
  }

  .flx-card-grid--3, .flx-gallery-grid, .flx-feature-grid, .flx-values-grid, .flx-footer__grid, .flx-form__grid {
    grid-template-columns: 1fr;
  }

  .flx-hero {
    min-height: auto;
    padding-top: 60px;
  }

  .flx-hero__visual {
    min-height: 390px;
  }

  .flx-orbit--one {
    width: 330px;
    height: 330px;
  }

  .flx-orbit--two {
    width: 260px;
    height: 260px;
  }

  .flx-system-card--main {
    width: 190px;
    min-height: 190px;
  }

  .flx-system-card--a {
    top: 4%;
    left: 0;
  }

  .flx-system-card--b {
    top: auto;
    right: 0;
    bottom: 8%;
  }

  .flx-system-card--c {
    display: none;
  }

  .flx-metric-strip {
    grid-template-columns: 1fr;
  }

  .flx-metric-strip > div {
    border-right: 0;
    border-bottom: 1px solid var(--flx-border);
  }

  .flx-metric-strip > div:last-child {
    border-bottom: 0;
  }

  .flx-button-row {
    align-items: stretch;
    flex-direction: column;
  }

  .flx-button-row .flx-button {
    width: 100%;
  }

  .flx-server {
    width: 220px;
  }

  .flx-footer__bottom {
    flex-direction: column;
  }

  .flx-integration-flow {
    flex-direction: column;
  }

  .flx-integration-flow i {
    width: 2px;
    height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .flx-reveal {
    opacity: 1;
    transform: none;
  }
}

/*Customer portal and website invoicing*/

.flx-section--portal {
  padding-top: 56px;
}

.flx-auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

.flx-auth-panel {
  padding: clamp(26px, 4vw, 44px);
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: var(--flx-radius);
  box-shadow: var(--flx-shadow);
}

.flx-auth-panel h2 {
  font-size: clamp(1.8rem, 3vw, 2.7rem);
}

.flx-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--flx-muted);
  font-size: .92rem;
}

.flx-checkbox input {
  margin-top: .35em;
}

.flx-form-help {
  margin: 0;
  font-size: .9rem;
}

.flx-field small {
  color: var(--flx-muted);
}

.flx-customer-portal {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.flx-portal-nav {
  position: sticky;
  top: calc(var(--flx-header) + 24px);
  padding: 20px;
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: 20px;
  box-shadow: var(--flx-shadow);
}

.flx-portal-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--flx-border);
}

.flx-portal-user strong, .flx-portal-user span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flx-portal-user span {
  max-width: 170px;
  color: var(--flx-muted);
  font-size: .78rem;
  white-space: nowrap;
}

.flx-portal-avatar {
  width: 44px;
  height: 44px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: #041417;
  background: var(--flx-primary);
  border-radius: 50%;
  font-weight: 900;
}

.flx-portal-nav nav {
  display: grid;
  gap: 4px;
  margin: 16px 0;
}

.flx-portal-nav nav a, .flx-portal-signout {
  display: block;
  padding: 11px 12px;
  color: var(--flx-muted);
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 800;
  text-decoration: none;
}

.flx-portal-nav nav a:hover, .flx-portal-nav nav a.is-active {
  color: var(--flx-text);
  background: var(--flx-primary-soft);
}

.flx-portal-signout {
  color: #b33c45;
  border-top: 1px solid var(--flx-border);
  border-radius: 0;
}

.flx-portal-content {
  min-width: 0;
  padding: clamp(24px, 4vw, 42px);
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: var(--flx-radius);
  box-shadow: var(--flx-shadow);
}

.flx-portal-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.flx-portal-heading h2 {
  font-size: clamp(1.9rem, 3vw, 3rem);
}

.flx-portal-heading p:last-child {
  color: var(--flx-muted);
}

.flx-portal-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.flx-portal-stat {
  display: grid;
  gap: 6px;
  padding: 22px;
  background: var(--flx-bg);
  border: 1px solid var(--flx-border);
  border-radius: 16px;
  text-decoration: none;
}

.flx-portal-stat strong {
  color: var(--flx-primary-strong);
  font-size: 2rem;
  line-height: 1;
}

.flx-portal-stat span {
  color: var(--flx-muted);
  font-weight: 800;
}

.flx-portal-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.flx-portal-card {
  padding: 24px;
  background: var(--flx-bg);
  border: 1px solid var(--flx-border);
  border-radius: 16px;
}

.flx-portal-card h3 {
  font-size: 1.25rem;
}

.flx-portal-card p {
  color: var(--flx-muted);
}

.flx-portal-card__top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.flx-empty-state--compact {
  max-width: none;
  padding: 42px 28px;
}

.flx-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--flx-border);
  border-radius: 16px;
}

.flx-portal-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}

.flx-portal-table th, .flx-portal-table td {
  padding: 15px 16px;
  text-align: left;
  border-bottom: 1px solid var(--flx-border);
}

.flx-portal-table th {
  color: var(--flx-muted);
  background: var(--flx-bg);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.flx-portal-table tr:last-child td {
  border-bottom: 0;
}

.flx-profile-form {
  max-width: 900px;
}

.flx-invoice-actions {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.flx-invoice {
  padding: clamp(24px, 5vw, 54px);
  color: var(--flx-text);
  background: var(--flx-bg);
  border: 1px solid var(--flx-border);
  border-radius: 20px;
}

.flx-invoice__header {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--flx-border);
}

.flx-invoice__header h2 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.flx-invoice__company {
  display: grid;
  gap: 3px;
  max-width: 360px;
  text-align: right;
  color: var(--flx-muted);
  font-size: .9rem;
}

.flx-invoice__company strong {
  color: var(--flx-text);
  font-size: 1.05rem;
}

.flx-invoice__meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  padding: 30px 0;
}

.flx-invoice__meta span, .flx-invoice__meta strong {
  display: block;
}

.flx-invoice__meta span {
  color: var(--flx-muted);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.flx-invoice__meta p {
  margin: 4px 0;
}

.flx-invoice__totals {
  width: min(100%, 390px);
  display: grid;
  gap: 10px;
  margin: 26px 0 0 auto;
}

.flx-invoice__totals > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0;
}

.flx-invoice__grand {
  padding-top: 16px !important;
  border-top: 2px solid var(--flx-border);
  font-size: 1.2rem;
}

.flx-invoice__notes {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--flx-border);
}

.flx-status--active, .flx-status--paid, .flx-status--issued {
  color: #0b665d;
  background: rgba(28,180,158,.13);
}

.flx-status--pending, .flx-status--draft {
  color: #755c00;
  background: rgba(230,180,30,.16);
}

.flx-status--suspended, .flx-status--overdue {
  color: #9b3039;
  background: rgba(211,74,83,.12);
}

.flx-status--cancelled, .flx-status--expired, .flx-status--refunded {
  color: var(--flx-muted);
  background: var(--flx-surface-2);
}

.flx-request-layout {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(0, 1.4fr);
  gap: 24px;
  align-items: start;
}

.flx-request-layout > div > h3 {
  margin-bottom: 16px;
}

.flx-service-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--flx-border);
}

.flx-service-actions form {
  margin: 0;
}

.flx-text-button {
  padding: 0;
  color: var(--flx-primary-strong);
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: .86rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.flx-text-button--danger {
  color: #b33c45;
}

.flx-payment-area {
  margin-top: 26px;
  padding: clamp(22px, 4vw, 36px);
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: 20px;
}

.flx-payment-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.flx-payment-summary > div {
  display: grid;
  gap: 6px;
  padding: 18px;
  background: var(--flx-bg);
  border: 1px solid var(--flx-border);
  border-radius: 14px;
}

.flx-payment-summary span {
  color: var(--flx-muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.flx-payment-summary strong {
  font-size: 1.25rem;
}

.flx-payment-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.flx-payment-method {
  padding: 24px;
  background: var(--flx-bg);
  border: 1px solid var(--flx-border);
  border-radius: 16px;
}

.flx-payment-method h3 {
  font-size: 1.35rem;
}

.flx-bank-details {
  display: grid;
  gap: 7px;
  margin: 18px 0;
}

.flx-bank-details > div {
  display: grid;
  grid-template-columns: minmax(110px, .6fr) 1fr;
  gap: 12px;
  padding-bottom: 7px;
  border-bottom: 1px dashed var(--flx-border);
}

.flx-bank-details dt {
  color: var(--flx-muted);
  font-weight: 700;
}

.flx-bank-details dd {
  margin: 0;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.flx-payment-notice-form {
  margin-top: 24px;
}

.flx-payment-history {
  margin-top: 28px;
}

.flx-payment-history h3 {
  margin-bottom: 14px;
}

.flx-button:disabled {
  cursor: not-allowed;
  opacity: .58;
}

.flx-status--confirmed, .flx-status--completed, .flx-status--approved {
  color: #0b665d;
  background: rgba(28,180,158,.13);
}

.flx-status--pending_review, .flx-status--new, .flx-status--reviewing, .flx-status--awaiting_customer, .flx-status--quoted, .flx-status--provisioning {
  color: #755c00;
  background: rgba(230,180,30,.16);
}

.flx-status--rejected, .flx-status--declined {
  color: #9b3039;
  background: rgba(211,74,83,.12);
}

@media (max-width: 900px) {
  .flx-auth-grid, .flx-customer-portal, .flx-request-layout {
    grid-template-columns: 1fr;
  }

  .flx-portal-nav {
    position: static;
  }

  .flx-portal-nav nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flx-portal-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .flx-portal-stat-grid, .flx-portal-card-grid, .flx-payment-summary, .flx-payment-method-grid {
    grid-template-columns: 1fr;
  }

  .flx-portal-nav nav {
    grid-template-columns: 1fr;
  }

  .flx-portal-heading, .flx-invoice__header, .flx-invoice-actions {
    flex-direction: column;
  }

  .flx-invoice__company {
    text-align: left;
  }

  .flx-invoice__meta {
    grid-template-columns: 1fr;
  }
}

@media print {
  .flx-header, .flx-footer, .flx-page-hero, .flx-portal-nav, .flx-invoice-actions, .flx-payment-area {
    display: none !important;
  }

  .flx-section, .flx-section--portal {
    padding: 0 !important;
  }

  .flx-container, .flx-portal-shell, .flx-customer-portal, .flx-portal-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  .flx-invoice {
    border: 0;
    border-radius: 0;
  }
}

.flx-service-price {
  color: var(--flx-primary-strong) !important;
  font-size: 1.35rem;
  font-weight: 900;
}

/*Stage 4 quotations and customer approval*/

.flx-quote-document {
  position: relative;
}

.flx-quote-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 26px;
  padding: 18px 20px;
  background: var(--flx-primary-soft);
  border: 1px solid rgba(0,166,166,.22);
  border-radius: 14px;
}

.flx-quote-summary span {
  color: var(--flx-muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.flx-quote-summary strong {
  text-align: right;
}

.flx-quote-decision {
  display: grid;
  grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr);
  gap: 28px;
  margin-top: 24px;
  background: var(--flx-bg);
}

.flx-quote-decision__actions {
  display: grid;
  gap: 22px;
}

.flx-quote-decision__actions form {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: 14px;
}

.flx-status--sent, .flx-status--viewed {
  color: #075e65;
  background: rgba(0,166,166,.14);
}

.flx-status--accepted, .flx-status--converted {
  color: #0b665d;
  background: rgba(28,180,158,.13);
}

@media (max-width: 820px) {
  .flx-quote-decision {
    grid-template-columns: 1fr;
  }

  .flx-quote-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .flx-quote-summary strong {
    text-align: left;
  }
}

@media print {
  .flx-quote-decision {
    display: none !important;
  }
}

/*Stage 5 provisioning, fulfilment and service lifecycle*/

.flx-service-card {
  display: grid;
  gap: 14px;
}

.flx-service-card .flx-button {
  justify-self: start;
}

.flx-service-state-stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.flx-service-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.flx-service-detail-list {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
}

.flx-service-detail-list > div {
  display: grid;
  grid-template-columns: minmax(130px, .65fr) minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--flx-border);
}

.flx-service-detail-list dt {
  color: var(--flx-muted);
  font-weight: 800;
}

.flx-service-detail-list dd {
  margin: 0;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.flx-service-access-notes {
  margin-top: 18px;
  padding: 16px;
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: 12px;
}

.flx-service-progress, .flx-service-timeline {
  margin-top: 22px;
  padding: 26px;
  background: var(--flx-bg);
  border: 1px solid var(--flx-border);
  border-radius: 16px;
}

.flx-service-progress .flx-portal-heading {
  align-items: center;
  margin-bottom: 16px;
}

.flx-service-progress .flx-portal-heading > strong {
  color: var(--flx-primary-strong);
  font-size: 1.5rem;
}

.flx-progress-bar {
  height: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--flx-surface-2);
  border-radius: 999px;
}

.flx-progress-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--flx-primary), var(--flx-secondary));
  border-radius: inherit;
}

.flx-checklist {
  display: grid;
  gap: 10px;
}

.flx-checklist__item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px;
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: 12px;
}

.flx-checklist__item p {
  margin: 4px 0 0;
  color: var(--flx-muted);
  font-size: .88rem;
}

.flx-checklist__item > span:last-child {
  color: var(--flx-muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.flx-checklist__mark {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 2px solid var(--flx-border);
  border-radius: 50%;
}

.flx-checklist__item--complete .flx-checklist__mark, .flx-checklist__item--skipped .flx-checklist__mark {
  border-color: var(--flx-primary);
  background: var(--flx-primary);
}

.flx-checklist__item--complete .flx-checklist__mark::after {
  content: "✓";
  color: #041417;
  font-size: .78rem;
  font-weight: 900;
}

.flx-checklist__item--in_progress {
  border-color: rgba(0,166,166,.38);
}

.flx-checklist__item--in_progress .flx-checklist__mark {
  border-color: var(--flx-primary);
  box-shadow: inset 0 0 0 4px var(--flx-surface);
  background: var(--flx-primary);
}

.flx-checklist__item--blocked {
  border-color: rgba(211,74,83,.35);
}

.flx-checklist__item--blocked .flx-checklist__mark {
  border-color: #b33c45;
}

.flx-timeline {
  position: relative;
  display: grid;
  gap: 0;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.flx-timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 16px;
  left: 8px;
  width: 2px;
  background: var(--flx-border);
}

.flx-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 16px;
  padding-bottom: 24px;
}

.flx-timeline__dot {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background: var(--flx-primary);
  border: 4px solid var(--flx-bg);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--flx-border);
}

.flx-timeline strong, .flx-timeline time {
  display: block;
}

.flx-timeline time {
  margin: 3px 0 6px;
  color: var(--flx-muted);
  font-size: .82rem;
}

.flx-timeline p {
  margin: 0;
  color: var(--flx-muted);
}

.flx-status--queued, .flx-status--assigned, .flx-status--retry_scheduled {
  color: #755c00;
  background: rgba(230,180,30,.16);
}

.flx-status--in_progress, .flx-status--waiting_provider, .flx-status--waiting_customer, .flx-status--ready_for_activation {
  color: #075e65;
  background: rgba(0,166,166,.14);
}

.flx-status--failed {
  color: #9b3039;
  background: rgba(211,74,83,.12);
}

@media (max-width: 820px) {
  .flx-service-detail-grid {
    grid-template-columns: 1fr;
  }

  .flx-service-state-stack {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .flx-service-detail-list > div, .flx-checklist__item {
    grid-template-columns: 1fr;
  }

  .flx-checklist__mark {
    display: none;
  }

  .flx-checklist__item > span:last-child {
    justify-self: start;
  }
}

/*Stage 6 placeholder reseller catalogue and checkout foundation*/

.flx-package-catalog {
  display: grid;
  gap: 28px;
}

.flx-package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.flx-package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
  padding: 26px;
  background: var(--flx-bg);
  border: 1px solid var(--flx-border);
  border-radius: 18px;
  box-shadow: var(--flx-shadow-sm);
}

.flx-package-card.is-featured {
  border-color: rgba(0,166,166,.5);
  box-shadow: 0 18px 50px rgba(0,166,166,.12);
}

.flx-package-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--flx-muted);
  font-size: .8rem;
  font-weight: 800;
}

.flx-package-card h3 {
  margin: 0;
  font-size: 1.45rem;
}

.flx-package-card > p {
  margin: 0;
  color: var(--flx-muted);
}

.flx-package-features {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flx-package-features li {
  position: relative;
  padding-left: 22px;
}

.flx-package-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--flx-primary-strong);
  font-weight: 900;
}

.flx-package-card__price {
  display: grid;
  gap: 3px;
  margin-top: auto;
  padding-top: 8px;
}

.flx-package-card__price strong {
  color: var(--flx-primary-strong);
  font-size: 1.35rem;
}

.flx-package-card__price span {
  color: var(--flx-muted);
  font-size: .84rem;
}

.flx-package-card form {
  margin: 0;
}

.flx-package-card .flx-button {
  width: 100%;
}

.flx-domain-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
  padding: clamp(24px, 5vw, 46px);
  background: linear-gradient(135deg, var(--flx-primary-soft), var(--flx-bg));
  border: 1px solid var(--flx-border);
  border-radius: 22px;
}

.flx-domain-search h2 {
  margin-bottom: 10px;
}

.flx-domain-search__form {
  display: flex;
  gap: 10px;
  padding: 8px;
  background: var(--flx-bg);
  border: 1px solid var(--flx-border);
  border-radius: 999px;
  box-shadow: var(--flx-shadow-sm);
}

.flx-domain-search__form input {
  min-width: 0;
  flex: 1;
  padding: 12px 18px;
  color: var(--flx-text);
  background: transparent;
  border: 0;
  outline: 0;
}

.flx-status--placeholder, .flx-status--draft, .flx-status--paused {
  color: var(--flx-muted);
  background: var(--flx-surface-2);
}

.flx-status--active {
  color: #0b665d;
  background: rgba(28,180,158,.13);
}

@media (max-width: 960px) {
  .flx-package-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flx-domain-search {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .flx-package-grid {
    grid-template-columns: 1fr;
  }

  .flx-domain-search__form {
    align-items: stretch;
    flex-direction: column;
    border-radius: 18px;
  }

  .flx-domain-search__form .flx-button {
    width: 100%;
  }
}

.flx-status--waiting_payment {
  color: #755c00;
  background: rgba(230,180,30,.16);
}

/*Stage 7 subscriptions, renewals, grace periods and expiry*/

.flx-form-notice--info {
  color: #075e65;
  background: rgba(0,166,166,.11);
  border: 1px solid rgba(0,166,166,.24);
}

.flx-renewal-detail {
  display: grid;
  gap: 24px;
}

.flx-renewal-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--flx-border);
}

.flx-renewal-hero h2 {
  margin-bottom: 6px;
}

.flx-renewal-hero p:last-child {
  margin: 0;
  color: var(--flx-muted);
}

.flx-renewal-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.flx-renewal-summary-grid > div {
  display: grid;
  gap: 6px;
  padding: 16px;
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: 13px;
}

.flx-renewal-summary-grid span {
  color: var(--flx-muted);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.flx-renewal-summary-grid strong {
  overflow-wrap: anywhere;
}

.flx-renewal-decision {
  display: grid;
  gap: 18px;
  padding: 22px;
  background: linear-gradient(135deg, var(--flx-primary-soft), var(--flx-bg));
  border: 1px solid rgba(0,166,166,.28);
  border-radius: 16px;
}

.flx-renewal-decision h3 {
  margin: 0;
}

.flx-renewal-decision > p {
  margin: 0;
  color: var(--flx-muted);
}

.flx-renewal-decision__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.flx-renewal-decision__actions form {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px;
  background: var(--flx-bg);
  border: 1px solid var(--flx-border);
  border-radius: 14px;
}

.flx-renewal-decision__actions textarea {
  width: 100%;
}

.flx-renewal-notes {
  padding: 18px;
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: 14px;
}

.flx-renewal-notes h3 {
  margin-bottom: 8px;
}

.flx-renewal-notes p {
  margin: 0;
  color: var(--flx-muted);
}

.flx-status--admin_review, .flx-status--scheduled, .flx-status--approved {
  color: #755c00;
  background: rgba(230,180,30,.16);
}

.flx-status--awaiting_approval, .flx-status--invoice_issued, .flx-status--awaiting_payment, .flx-status--provider_pending, .flx-status--ready_for_renewal {
  color: #075e65;
  background: rgba(0,166,166,.14);
}

.flx-status--paid, .flx-status--renewed {
  color: #0b665d;
  background: rgba(28,180,158,.13);
}

.flx-status--grace_period, .flx-status--overdue {
  color: #86570a;
  background: rgba(238,153,26,.15);
}

.flx-status--provider_failed, .flx-status--declined, .flx-status--expired, .flx-status--cancelled {
  color: #9b3039;
  background: rgba(211,74,83,.12);
}

@media (max-width: 820px) {
  .flx-renewal-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flx-renewal-decision__actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .flx-renewal-hero {
    flex-direction: column;
  }

  .flx-renewal-summary-grid {
    grid-template-columns: 1fr;
  }
}

/*Stage 8 customer activity history*/

.flx-activity-list {
  position: relative;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flx-activity-list::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 17px;
  width: 2px;
  background: var(--flx-border);
}

.flx-activity-item {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--flx-border);
}

.flx-activity-icon {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--flx-bg);
  border: 1px solid var(--flx-border);
  border-radius: 50%;
  box-shadow: var(--flx-shadow-sm);
}

.flx-activity-icon::after {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--flx-primary);
  border-radius: 50%;
}

.flx-activity-icon--financial::after {
  background: #7c5ce5;
}

.flx-activity-icon--security::after {
  background: #d59322;
}

.flx-activity-icon--status::after, .flx-activity-icon--decision::after {
  background: var(--flx-secondary);
}

.flx-activity-item strong, .flx-activity-item span, .flx-activity-item time {
  display: block;
}

.flx-activity-item div > span {
  margin-top: 5px;
  color: var(--flx-muted);
  font-size: .86rem;
}

.flx-activity-item time {
  color: var(--flx-muted);
  font-size: .82rem;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 660px) {
  .flx-activity-item {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .flx-activity-icon {
    width: 30px;
    height: 30px;
  }

  .flx-activity-list::before {
    left: 14px;
  }

  .flx-activity-item time {
    grid-column: 2;
    text-align: left;
  }
}

/*Standalone Lite additions*/

.flx-nav__list li.is-current > a {
  color: var(--flx-primary-strong);
}

.flx-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.flx-package-card {
  min-height: 290px;
  display: flex;
  flex-direction: column;
}

.flx-package-card .flx-button-row {
  margin-top: auto;
}

.flx-placeholder-note {
  margin-top: 20px;
  color: var(--flx-muted);
  font-size: .92rem;
}

.flx-static-notice {
  padding: 18px 20px;
  margin-bottom: 24px;
  border: 1px solid var(--flx-border);
  border-radius: 14px;
  background: var(--flx-surface-2);
}

.flx-legal {
  max-width: 900px;
}

.flx-legal h2 {
  margin-top: 1.8em;
}

.flx-service-intro {
  padding-top: 42px;
}

.flx-service-marketing-list {
  display: grid;
  gap: 28px;
}

.flx-service-detail {
  scroll-margin-top: calc(var(--flx-header) + 24px);
  padding: clamp(28px, 5vw, 52px);
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: var(--flx-radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.05);
}

.flx-service-detail__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--flx-border);
}

.flx-service-detail__heading > div {
  max-width: 820px;
}

.flx-service-detail__heading h2 {
  margin-top: 14px;
}

.flx-service-detail__heading p {
  color: var(--flx-muted);
}

.flx-service-detail__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  padding-top: 30px;
}

.flx-service-detail__grid h3 {
  font-size: 1.1rem;
}

.flx-service-detail__grid p,
.flx-service-detail__grid li {
  color: var(--flx-muted);
}

@media (max-width: 900px) {
  .flx-service-detail__heading {
    align-items: stretch;
    flex-direction: column;
  }

  .flx-service-detail__grid {
    grid-template-columns: 1fr;
  }
}

/* FundiLogix v1.2.0 refinements (retained) */
.flx-team-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 24px;
  object-fit: cover;
  border-radius: var(--flx-radius);
}

@media (max-width: 820px) {
  .flx-header .flx-brand {
    width: 150px;
  }

  .flx-header .flx-logo {
    max-height: 44px;
  }
}

@media (max-width: 560px) {
  .flx-header .flx-brand {
    width: 138px;
  }

  .flx-header .flx-logo {
    max-height: 40px;
  }
}

/* FundiLogix v1.2.2 classic-home refinements */
.flx-header .flx-brand {
  width: 160px;
}

.flx-header .flx-logo {
  max-height: 46px;
}

.flx-button--disabled {
  cursor: default;
  opacity: .72;
  pointer-events: none;
}

.flx-team-card img {
  width: min(100%, 190px);
  aspect-ratio: 1 / 1;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 820px) {
  .flx-header .flx-brand {
    width: 145px;
  }

  .flx-header .flx-logo {
    max-height: 40px;
  }
}

@media (max-width: 560px) {
  .flx-header .flx-brand {
    width: 132px;
  }

  .flx-header .flx-logo {
    max-height: 36px;
  }
}

/* FundiLogix v1.2.5 homepage refinements */
.flx-hero::before {
  background-image: url("../images/banner-light-clean-v125.svg");
}

html[data-theme="dark"] .flx-hero::before {
  background-image: url("../images/banner-dark-clean-v125.svg");
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .flx-hero::before {
    background-image: url("../images/banner-dark-clean-v125.svg");
  }
}

.flx-hero__title {
  max-width: 650px;
  font-size: clamp(2.4rem, 4.6vw, 3.85rem);
  line-height: 1.04;
}

.flx-hero__title-accent {
  color: var(--flx-primary-strong);
}

.flx-hero__visual {
  min-height: 520px;
}

.flx-orbit {
  z-index: 1;
}

.flx-orbit--one {
  width: 500px;
  height: 500px;
  animation-duration: 32s;
}

.flx-orbit--two {
  width: 395px;
  height: 395px;
  animation-duration: 26s;
}

.flx-orbit--three {
  width: 295px;
  height: 295px;
  animation-direction: reverse;
  animation-duration: 22s;
}

.flx-system-card--main {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 195px;
  min-height: 205px;
  padding: 10px 12px 14px;
  transform: translate(-50%, -50%);
}

.flx-system-card--main img {
  width: 168px;
  margin: -8px auto -14px;
}

.flx-system-card--main strong {
  font-size: 1.25rem;
}

.flx-system-card--main span {
  font-size: 0.78rem;
}

.flx-system-card--orbit {
  --flx-orbit-x: 0px;
  --flx-orbit-y: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: max-content;
  min-width: 126px;
  max-width: 166px;
  padding: 12px 15px;
  align-items: center;
  justify-content: center;
  color: var(--flx-text);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  transform: translate(-50%, -50%) translate(var(--flx-orbit-x), var(--flx-orbit-y));
  pointer-events: auto;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
  will-change: transform;
}

.flx-system-card--automation {
  --flx-orbit-x: -110px;
  --flx-orbit-y: -160px;
}

.flx-system-card--web {
  --flx-orbit-x: 110px;
  --flx-orbit-y: -160px;
}

.flx-system-card--platform {
  --flx-orbit-x: 205px;
  --flx-orbit-y: 0px;
}

.flx-system-card--optimisation {
  --flx-orbit-x: 110px;
  --flx-orbit-y: 160px;
}

.flx-system-card--spreadsheets {
  --flx-orbit-x: -110px;
  --flx-orbit-y: 160px;
}

.flx-system-card--software {
  --flx-orbit-x: -205px;
  --flx-orbit-y: 0px;
}

.flx-system-card--orbit:hover,
.flx-system-card--orbit:focus-visible {
  color: var(--flx-text);
  border-color: color-mix(in srgb, var(--flx-primary) 70%, var(--flx-border));
  box-shadow: 0 18px 45px color-mix(in srgb, var(--flx-primary) 18%, transparent);
}

.flx-header .flx-brand {
  width: 240px;
}

.flx-header .flx-logo {
  max-height: 69px;
}

@media (max-width: 1120px) {
  .flx-header .flx-brand {
    width: 225px;
  }

  .flx-header .flx-logo {
    max-height: 64px;
  }
}

@media (max-width: 820px) {
  .flx-header .flx-brand {
    width: 205px;
  }

  .flx-header .flx-logo {
    max-height: 58px;
  }
}

@media (max-width: 560px) {
  .flx-hero__title {
    max-width: 100%;
    font-size: clamp(2.05rem, 10vw, 2.85rem);
  }

  .flx-hero__visual {
    min-height: 440px;
  }

  .flx-orbit--one {
    width: 320px;
    height: 320px;
  }

  .flx-orbit--two {
    width: 250px;
    height: 250px;
  }

  .flx-orbit--three {
    width: 190px;
    height: 190px;
  }

  .flx-system-card--main {
    width: 154px;
    min-height: 164px;
    padding: 8px 9px 11px;
  }

  .flx-system-card--main img {
    width: 132px;
    margin: -8px auto -12px;
  }

  .flx-system-card--main strong {
    font-size: 1rem;
  }

  .flx-system-card--main span {
    font-size: 0.66rem;
  }

  .flx-system-card--orbit {
    min-width: 88px;
    max-width: 108px;
    padding: 7px 8px;
    border-radius: 12px;
    font-size: 0.63rem;
  }

  .flx-system-card--automation {
    --flx-orbit-x: -72px;
    --flx-orbit-y: -118px;
  }

  .flx-system-card--web {
    --flx-orbit-x: 72px;
    --flx-orbit-y: -118px;
  }

  .flx-system-card--platform {
    --flx-orbit-x: 136px;
    --flx-orbit-y: 0px;
  }

  .flx-system-card--optimisation {
    --flx-orbit-x: 72px;
    --flx-orbit-y: 118px;
  }

  .flx-system-card--spreadsheets {
    --flx-orbit-x: -72px;
    --flx-orbit-y: 118px;
  }

  .flx-system-card--software {
    --flx-orbit-x: -136px;
    --flx-orbit-y: 0px;
  }

  .flx-header .flx-brand {
    width: 175px;
  }

  .flx-header .flx-logo {
    max-height: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flx-orbit {
    animation: none !important;
  }

  .flx-system-card--orbit {
    will-change: auto;
  }
}

/* FundiLogix v1.2.6 content-driven vertical spacing */
.flx-hero {
  min-height: auto;
  height: auto;
  padding-top: clamp(34px, 3.5vw, 52px);
  padding-bottom: clamp(38px, 4vw, 60px);
}

.flx-section {
  min-height: 0;
  height: auto;
  padding-top: clamp(34px, 3.8vw, 58px);
  padding-bottom: clamp(34px, 3.8vw, 58px);
}

.flx-section--compact {
  padding-top: 0;
  padding-bottom: clamp(24px, 2.8vw, 42px);
}

.flx-section--cta {
  padding-top: clamp(24px, 2.8vw, 40px);
}

.flx-page-hero {
  min-height: 0;
  height: auto;
  padding-top: clamp(34px, 4vw, 58px);
  padding-bottom: clamp(34px, 4vw, 58px);
}

.flx-page-hero--platform {
  padding-bottom: clamp(38px, 4.5vw, 64px);
}

.flx-page {
  min-height: 0;
  height: auto;
}

.flx-content {
  padding-top: clamp(32px, 3.6vw, 52px);
  padding-bottom: clamp(38px, 4vw, 60px);
}

.flx-post-list {
  padding-top: clamp(32px, 3.6vw, 52px);
  padding-bottom: clamp(38px, 4vw, 60px);
}

.flx-section--portal {
  padding-top: clamp(30px, 3.5vw, 50px);
}

@media (max-width: 820px) {
  .flx-hero {
    padding-top: 30px;
    padding-bottom: 40px;
  }

  .flx-page-hero {
    padding-top: 30px;
    padding-bottom: 34px;
  }

  .flx-section {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .flx-section--compact {
    padding-top: 0;
    padding-bottom: 26px;
  }
}

@media (max-width: 560px) {
  .flx-hero {
    padding-top: 24px;
    padding-bottom: 32px;
  }

  .flx-page-hero {
    padding-top: 26px;
    padding-bottom: 28px;
  }

  .flx-section {
    padding-top: 26px;
    padding-bottom: 26px;
  }
}

/* FundiLogix v1.3.0 services, assessments and eight-service homepage orbit */
.flx-nav__services {
  position: relative;
}

.flx-nav__services-row {
  display: flex;
  align-items: center;
  gap: 3px;
}

.flx-nav__submenu-toggle {
  display: none;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  color: var(--flx-muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.flx-services-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 1100;
  width: min(780px, calc(100vw - 40px));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 22px;
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: 20px;
  box-shadow: var(--flx-shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -8px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.flx-nav__services:hover .flx-services-menu,
.flx-nav__services:focus-within .flx-services-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.flx-services-menu::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 0;
  width: 100%;
  height: 14px;
}

.flx-services-menu__group > strong {
  display: block;
  margin-bottom: 8px;
  color: var(--flx-primary-strong);
  font-size: .75rem;
  line-height: 1.25;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.flx-services-menu__group ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flx-services-menu__group li a,
.flx-nav__list .flx-services-menu__group li a {
  width: 100%;
  display: block;
  padding: 8px 0;
  color: var(--flx-text);
  border: 0;
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.32;
}

.flx-services-menu__group li a span {
  display: inline-block;
  margin-left: 4px;
  color: var(--flx-muted);
  font-size: .68rem;
  font-weight: 700;
}

.flx-service-subheading,
.flx-service-card__subheading {
  margin-top: -.2em;
  color: var(--flx-primary-strong);
  font-weight: 800;
}

.flx-service-subheading {
  margin-bottom: 1.15em;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.flx-service-card__subheading {
  margin-bottom: .85em;
  font-size: .92rem;
}

.flx-service-card--overview {
  display: flex;
  flex-direction: column;
}

.flx-service-card--overview > p:not(.flx-service-card__subheading) {
  flex: 1 1 auto;
}

.flx-service-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: auto;
  padding-top: 10px;
}

.flx-platform-interest {
  max-width: 980px;
  margin: 32px auto 0;
}

.flx-platform-interest__copy {
  max-width: 760px;
  margin-bottom: 22px;
}

.flx-service-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.flx-service-detail-grid .flx-card {
  min-height: 0;
}

.flx-service-list-grid,
.flx-service-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
}

.flx-service-list-item,
.flx-service-capability {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 16px 18px;
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: 14px;
}

.flx-service-list-item > span {
  color: var(--flx-primary-strong);
  font-weight: 900;
}

.flx-service-capability > span {
  width: 9px;
  height: 9px;
  margin-top: .55em;
  background: var(--flx-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--flx-primary-soft);
}

.flx-service-list-item p,
.flx-service-capability p {
  margin: 0;
}

.flx-section-heading__copy {
  max-width: 520px;
  color: var(--flx-muted);
}

.flx-assessment-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  padding: clamp(28px, 4vw, 46px);
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: var(--flx-radius);
  box-shadow: var(--flx-shadow);
}

.flx-assessment-cta > div {
  max-width: 820px;
}

.flx-section--assessment {
  overflow: clip;
}

.flx-assessment-shell {
  max-width: 930px;
}

.flx-assessment,
.flx-assessment-result,
.flx-assessment-followup {
  padding: clamp(24px, 4vw, 44px);
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: var(--flx-radius);
  box-shadow: var(--flx-shadow);
}

.flx-assessment-profile {
  display: grid;
  gap: 18px;
}

.flx-assessment-profile > p:not(.flx-eyebrow) {
  color: var(--flx-muted);
}

.flx-assessment-progress {
  margin-bottom: 28px;
}

.flx-assessment-progress__bar {
  width: 100%;
  height: 7px;
  overflow: hidden;
  background: var(--flx-surface-2);
  border-radius: 999px;
}

.flx-assessment-progress__bar span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--flx-primary);
  border-radius: inherit;
  transition: width 180ms ease;
}

.flx-assessment-progress > span {
  display: block;
  margin-top: 9px;
  color: var(--flx-muted);
  font-size: .84rem;
  font-weight: 750;
}

.flx-assessment-question {
  scroll-margin-top: calc(var(--flx-header) + 24px);
  padding: 4px 0 8px;
}

.flx-assessment-question[hidden],
.flx-assessment-progress[hidden],
.flx-assessment-nav[hidden],
.flx-assessment-questions[hidden],
.flx-assessment-profile[hidden] {
  display: none !important;
}

.flx-assessment-question__number {
  margin-bottom: 8px;
  color: var(--flx-primary-strong);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.flx-assessment-question h2 {
  font-size: clamp(1.55rem, 3vw, 2.25rem);
}

.flx-assessment-choices {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.flx-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 13px 15px;
  background: var(--flx-bg);
  border: 1px solid var(--flx-border);
  border-radius: 12px;
  cursor: pointer;
}

.flx-choice:hover {
  border-color: color-mix(in srgb, var(--flx-primary) 55%, var(--flx-border));
}

.flx-choice input {
  width: 18px;
  height: 18px;
  margin-top: .22em;
  accent-color: var(--flx-primary);
}

.flx-choice:has(input:checked) {
  background: var(--flx-primary-soft);
  border-color: var(--flx-primary);
}

.flx-choice--inline {
  min-width: min(100%, 310px);
}

.flx-choice--privacy {
  margin-top: 4px;
  font-size: .88rem;
  cursor: default;
}

.flx-choice--privacy a {
  color: var(--flx-primary-strong);
}

.flx-assessment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.flx-assessment-nav {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--flx-border);
}

.flx-assessment-error {
  margin: 14px 0 0;
  color: #a72e38;
  font-weight: 750;
}

.flx-assessment-result {
  display: grid;
  gap: 6px;
}

.flx-assessment-result__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--flx-border);
}

.flx-assessment-reference {
  flex: 0 0 auto;
  padding: 10px 14px;
  background: var(--flx-surface-2);
  border: 1px solid var(--flx-border);
  border-radius: 12px;
  text-align: right;
}

.flx-assessment-reference span,
.flx-assessment-reference strong {
  display: block;
}

.flx-assessment-reference span {
  color: var(--flx-muted);
  font-size: .72rem;
  text-transform: uppercase;
}

.flx-assessment-reference strong {
  font-size: .83rem;
}

.flx-assessment-confidence {
  margin: 18px 0 4px;
  color: var(--flx-muted);
  font-weight: 700;
}

.flx-assessment-result__section {
  padding-top: 24px;
}

.flx-assessment-result__section + .flx-assessment-result__section {
  border-top: 1px solid var(--flx-border);
}

.flx-assessment-result__section h3 {
  font-size: 1.28rem;
}

.flx-assessment-next-steps {
  display: grid;
  gap: 10px;
}

.flx-assessment-service-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.flx-assessment-service-link {
  display: grid;
  gap: 5px;
  padding: 15px;
  background: var(--flx-bg);
  border: 1px solid var(--flx-border);
  border-radius: 12px;
  text-decoration: none;
}

.flx-assessment-service-link span {
  color: var(--flx-muted);
  font-size: .8rem;
}

.flx-assessment-result__note {
  color: var(--flx-muted);
}

.flx-assessment-followup {
  margin-top: 26px;
}

.flx-field__optional {
  color: var(--flx-muted);
  font-size: .8em;
  font-weight: 600;
}

/* Eight service cards use the existing FundiLogix orbit visual with tighter cards. */
.flx-system-card--orbit {
  width: 118px;
  min-width: 118px;
  max-width: 118px;
  padding: 10px 9px;
  font-size: .72rem;
  line-height: 1.16;
}

@media (min-width: 1121px) and (max-width: 1220px) {
  .flx-system-card--orbit {
    width: 108px;
    min-width: 108px;
    max-width: 108px;
    padding: 9px 7px;
    font-size: .68rem;
  }
}

@media (max-width: 1120px) {
  .flx-nav__services-row {
    width: 100%;
  }

  .flx-nav__services-row > a {
    flex: 1 1 auto;
  }

  .flx-nav__submenu-toggle {
    display: grid;
    flex: 0 0 auto;
  }

  .flx-services-menu {
    position: static;
    width: 100%;
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 22px;
    padding: 12px 4px 18px 18px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--flx-border);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .flx-nav__services:hover .flx-services-menu,
  .flx-nav__services:focus-within .flx-services-menu {
    display: none;
    transform: none;
  }

  .flx-nav__services.is-submenu-open .flx-services-menu,
  .flx-nav__services.is-submenu-open:hover .flx-services-menu,
  .flx-nav__services.is-submenu-open:focus-within .flx-services-menu {
    display: grid;
  }

  .flx-services-menu__group li a,
  .flx-nav__list .flx-services-menu__group li a {
    padding: 7px 0;
    border: 0;
  }
}

@media (max-width: 820px) {
  .flx-service-detail-grid,
  .flx-service-list-grid,
  .flx-service-capability-grid {
    grid-template-columns: 1fr;
  }

  .flx-assessment-cta,
  .flx-assessment-result__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .flx-assessment-service-links {
    grid-template-columns: 1fr;
  }

  .flx-assessment-reference {
    text-align: left;
  }
}

@media (max-width: 560px) {
  .flx-services-menu {
    grid-template-columns: 1fr;
  }

  .flx-hero__visual {
    min-height: 570px;
  }

  .flx-system-card--orbit {
    width: 72px;
    min-width: 72px;
    max-width: 72px;
    padding: 6px 5px;
    border-radius: 11px;
    font-size: .56rem;
    line-height: 1.06;
  }

  .flx-assessment,
  .flx-assessment-result,
  .flx-assessment-followup {
    padding: 21px 17px;
  }

  .flx-assessment-nav,
  .flx-assessment-actions,
  .flx-service-card__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .flx-assessment-nav .flx-button,
  .flx-assessment-actions .flx-choice,
  .flx-service-card__actions .flx-button {
    width: 100%;
  }
}

/* Resources hub, article and guide pages */
.flx-resource-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.flx-resource-topic-grid .flx-card,
.flx-resource-card {
  display: flex;
  flex-direction: column;
}

.flx-resource-card h3 a {
  text-decoration: none;
}

.flx-resource-card > .flx-text-link {
  margin-top: auto;
}

.flx-resource-card__image {
  display: block;
  margin: -2px -2px 22px;
  overflow: hidden;
  border-radius: calc(var(--flx-radius) - 2px);
}

.flx-resource-card__image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.flx-resource-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: auto;
}

.flx-resource-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 18px 0;
  color: var(--flx-muted);
  font-size: .9rem;
}

.flx-resource-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}

.flx-resource-filter a {
  padding: 8px 13px;
  color: var(--flx-muted);
  text-decoration: none;
  background: var(--flx-surface);
  border: 1px solid var(--flx-border);
  border-radius: 999px;
}

.flx-resource-filter a:hover,
.flx-resource-filter a.is-active {
  color: var(--flx-text);
  border-color: var(--flx-primary);
  background: var(--flx-primary-soft);
}

.flx-resource-list-grid {
  align-items: stretch;
}

.flx-resource-hero__inner {
  max-width: 920px;
}

.flx-resource-hero h1 {
  font-size: clamp(2.6rem, 5.7vw, 5.3rem);
}

.flx-resource-deck {
  max-width: 820px;
  color: var(--flx-muted);
  font-size: clamp(1.08rem, 2vw, 1.3rem);
}

.flx-resource-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
  color: var(--flx-muted);
  font-size: .92rem;
}

.flx-resource-featured-image {
  margin-top: 34px;
}

.flx-resource-featured-image img {
  width: 100%;
  max-height: 680px;
  object-fit: cover;
  border-radius: var(--flx-radius);
  box-shadow: var(--flx-shadow);
}

.flx-resource-content-section {
  padding-top: 72px;
}

.flx-resource-layout {
  display: grid;
  grid-template-columns: minmax(0, 820px) minmax(240px, 320px);
  justify-content: space-between;
  gap: 56px;
  align-items: start;
}

.flx-resource-content {
  min-width: 0;
  font-size: 1.04rem;
}

.flx-resource-content > :first-child {
  margin-top: 0;
}

.flx-resource-content h2 {
  margin-top: 1.45em;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
}

.flx-resource-content h3 {
  margin-top: 1.35em;
}

.flx-resource-content p,
.flx-resource-content li {
  color: color-mix(in srgb, var(--flx-text) 88%, var(--flx-muted));
}

.flx-resource-content blockquote {
  margin: 30px 0;
  padding: 18px 24px;
  background: var(--flx-primary-soft);
  border-left: 4px solid var(--flx-primary);
  border-radius: 0 var(--flx-radius-sm) var(--flx-radius-sm) 0;
}

.flx-resource-content pre,
.flx-resource-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.flx-resource-content pre {
  overflow-x: auto;
  padding: 18px;
  background: var(--flx-navy);
  color: #f4f8fa;
  border-radius: var(--flx-radius-sm);
}

.flx-resource-aside {
  position: sticky;
  top: calc(var(--flx-header) + 28px);
}

.flx-resource-service-card h2 {
  font-size: 1.55rem;
}

.flx-resource-preview-banner {
  padding: 10px 0;
  background: #eeeeee;
  color: #111111;
  border-bottom: 1px solid #cfcfcf;
}

.flx-resource-preview-banner .flx-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
}

@media (max-width: 900px) {
  .flx-resource-entry-grid,
  .flx-resource-layout {
    grid-template-columns: 1fr;
  }

  .flx-resource-aside {
    position: static;
  }
}

@media (max-width: 560px) {
  .flx-resource-filter {
    flex-direction: column;
  }

  .flx-resource-filter a {
    width: 100%;
  }
}

/* FundiLogix v1.5.5 header banner artwork.
   Scoped to the header only so footer branding and all other site images keep their existing sizing. */
.flx-header .flx-brand--header-banner {
  flex: 0 1 452px;
  width: 452px;
  max-width: calc(100% - 104px);
  height: var(--flx-header);
  min-width: 0;
  align-self: stretch;
  overflow: hidden;
  background-image: url("../images/FundiLogix_Website_Header_Banner_Light_Normal.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 100%;
}

html[data-theme="dark"] .flx-header .flx-brand--header-banner {
  background-image: url("../images/FundiLogix_Website_Header_Banner_Dark_Normal.png");
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .flx-header .flx-brand--header-banner {
    background-image: url("../images/FundiLogix_Website_Header_Banner_Dark_Normal.png");
  }
}

@media (max-width: 820px) {
  .flx-header .flx-brand--header-banner {
    flex-basis: 387px;
    width: 387px;
  }
}