#brx-content .brxe-rlcazu:nth-of-type(even) {
    flex-direction: row-reverse;
}
@media (max-width: 767px) {
    #brx-content .brxe-rlcazu,
    #brx-content .brxe-rlcazu:nth-of-type(even) {
        flex-direction: column;
    }
}

/* =========================================================
   UNWIRED: Bricks + ACSS System Layer (single stylesheet)
   - ACSS is source of truth for tokens
   - This file adds: locked palette map, alias tokens, global layout recipes,
     variable classes, button component system (responsive sizing),
     and LP S01 hero styles.
   ========================================================= */

/* =========================================================
   Header - desktop
========================================================= */

#brx-header {
  position: sticky;
  top: 24px;
  z-index: 1100;
  width: 100%;
  margin-top: 24px;
}

.c-header {
  width: 100%;
  background: transparent;
  overflow: visible;
}

/* width wrapper stays controlled by the system */
#brx-header .l-container.v-container--header {
  width: 100%;
  max-width: var(--uw-container-header);
  margin-inline: auto;
}

/* shell */
.c-header__shell {
  position: relative;
  background: var(--G700);
  border-radius: calc(var(--uw-radius-8) * 2);
  min-height: 80px;
  padding: 16px 24px;
  width: 100%;   /* changed from 1112px */
  background: rgba(31, 31, 31, 0.3);
  border-radius: 16px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);

  /* optional subtle glass edge */
  border: 1px solid color-mix(in srgb, var(--G50) 12%, transparent);
}

/* keep dropdowns visible */
.c-header__frame,
.c-header__stage,
.c-header__bar {
  overflow: visible;
}

/* frame */
.c-header__frame {
  display: flex;
  align-items: center;
  gap: var(--uw-space-48);
  min-height: 48px;
  width: 100%;
}

/* brand */
.c-header__brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.c-header__brand-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  width: 78px;
  height: 43px;
}

.c-header__logo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    filter 0.45s ease;
}

.c-header__logo--top {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

.c-header__logo--sticky {
  opacity: 0;
  transform: scale(0.94);
  filter: blur(3px);
  pointer-events: none;
}

.c-header__shell.is-sticky .c-header__logo--top {
  opacity: 0;
  transform: scale(0.94);
  filter: blur(3px);
  pointer-events: none;
}

.c-header__shell.is-sticky .c-header__logo--sticky {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  pointer-events: auto;
}

/* stage */
.c-header__stage {
  flex: 1 1 auto;
  min-width: 0;
}

.c-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uw-space-32);
  min-height: 48px;
}

/* nav menu */
.c-header__nav .bricks-mobile-menu-toggle,
.c-header__nav .bricks-mobile-menu-wrapper,
.c-header__nav .bricks-mobile-menu-overlay {
  display: none;
}

.c-header__nav .bricks-nav-menu-wrapper {
  display: block;
}

.c-header__nav .bricks-nav-menu {
  display: flex;
  align-items: center;
  gap: var(--uw-space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-header__nav .bricks-nav-menu > li {
  margin: 0;
}

.c-header__nav .bricks-nav-menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: var(--uw-space-8);
  color: var(--G50);
  text-decoration: none;
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: 400;
  white-space: nowrap;
}

.c-header__nav .bricks-nav-menu > li > a:hover {
  color: var(--G200);
}

/* solutions chevron */
.c-header__dd > a::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--G200);
  border-bottom: 1.5px solid var(--G200);
  transform: rotate(45deg) translateY(-1px);
  margin-left: 2px;
}

/* actions */
.c-header__actions {
  display: flex;
  align-items: center;
  gap: var(--uw-space-16);
  flex: 0 0 auto;
}

.c-header__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  padding-inline: 0;
  border: none;
}

.c-header__icon-btn:hover {
  color: var(--G200);
}

.c-header__login {
  color: var(--G50);
  text-decoration: none;
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: var(--uw-fw-500);
  cursor: pointer;
  white-space: nowrap;
}

.c-header__login:hover {
  color: var(--G200);
}

.c-header__cta {
  min-height: 48px;
  padding: 8px 16px;
  white-space: nowrap;
}

/* search layer */
.c-header__search {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 5;
}

.c-header__shell.is-search-open .c-header__nav,
.c-header__shell.is-search-open .c-header__actions {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.c-header__shell.is-search-open .c-header__search {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.c-header__search-form,
.c-header__search-form-el {
  width: 100%;
}

.c-header__search-form-el {
  display: flex;
  align-items: center;
  gap: var(--uw-space-16);
  width: 100%;
}

.c-header__search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 8px;
  border: 1px solid var(--G600);
  border-radius: calc(var(--uw-radius-8) * 2); /* 16px */
  background: var(--G700);
}

.c-header__search-icon,
.c-header__search-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: var(--G50);
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
}

.c-header__search-icon svg,
.c-header__search-close svg {
  width: 24px;
  height: 24px;
}

.c-header__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--G50);
  outline: none;
  box-shadow: none;
  padding: 0 8px;
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
}

.c-header__search-input::placeholder {
  color: var(--G400);
  opacity: 1;
}

.c-header__search-submit {
  min-height: 48px;
  padding: 8px 16px;
  white-space: nowrap;
}

/* mega menu template root */
.c-header__mega {
  width: min(944px, calc(100vw - 48px));
  background: var(--G700);
  border-radius: calc(var(--uw-radius-8) * 2); /* 16px */
  padding: var(--uw-space-24);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
  margin-top: var(--uw-space-32);
}

.c-header__mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--uw-space-48);
}

.c-header__mega-col {
  display: flex;
  flex-direction: column;
  gap: var(--uw-space-24);
}

.c-header__mega-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--uw-space-16);
  align-items: start;
}

.c-header__mega-item-icon {
  width: 48px;
  height: 48px;
}

.c-header__mega-item-title {
  color: var(--G50);
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: var(--uw-fw-600);
}

.c-header__mega-item-desc {
  margin: 0;
  color: var(--G100);
  font-size: var(--text-s);
  line-height: var(--text-s-line-height);
}

.v-mega-icon-green { --mega-icon-color: var(--P700); }
.v-mega-icon-blue  { --mega-icon-color: var(--B600); }
.v-mega-icon-yellow{ --mega-icon-color: var(--Y600); }

/* apply color to icon wrapper */
.v-mega-icon-green .c-header__mega-item-icon,
.v-mega-icon-blue .c-header__mega-item-icon,
.v-mega-icon-yellow .c-header__mega-item-icon {
  color: var(--mega-icon-color);
}

/* override inline path fills in custom SVGs */
.v-mega-icon-green .c-header__mega-item-icon svg path,
.v-mega-icon-blue .c-header__mega-item-icon svg path,
.v-mega-icon-yellow .c-header__mega-item-icon svg path {
  fill: var(--mega-icon-color);
}


/* =========================================================
   HEADER SEARCH - GENERAL
========================================================= */

.c-header__shell {
  position: relative;
  overflow: visible;
}

.c-header__search {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 5;
  background: transparent;
  overflow: visible;
}

.c-header__shell.is-search-open .c-header__nav,
.c-header__shell.is-search-open .c-header__actions {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.c-header__shell.is-search-open .c-header__search {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.c-header__search-form,
.c-header__search-form-el {
  width: 100%;
  overflow: visible;
}

.c-header__search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  width: 100%;
}

.c-header__search-stack {
  position: relative;
  min-width: 0;
}

.c-header__search-field {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  padding: 10px 8px;
  gap: 8px;
  background: var(--G700);
  border: 1px solid var(--G600);
  border-radius: 16px;
}

.c-header__search-icon,
.c-header__search-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--G50);
  cursor: pointer;
  flex: 0 0 auto;
}

.c-header__search-icon svg,
.c-header__search-close svg {
  display: block;
  width: 24px;
  height: 24px;
}

.c-header__search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--G50);
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  box-shadow: none;
}

.c-header__search-input::placeholder {
  color: var(--G400);
  opacity: 1;
}

body.bricks-is-frontend.bricks-is-frontend .c-header__search-input:focus,
body.bricks-is-frontend.bricks-is-frontend .c-header__search-input:focus-visible,
body.bricks-is-frontend.bricks-is-frontend .c-header__search-icon:focus,
body.bricks-is-frontend.bricks-is-frontend .c-header__search-icon:focus-visible,
body.bricks-is-frontend.bricks-is-frontend .c-header__search-close:focus,
body.bricks-is-frontend.bricks-is-frontend .c-header__search-close:focus-visible,
body.bricks-is-frontend.bricks-is-frontend .c-header__search-submit:focus,
body.bricks-is-frontend.bricks-is-frontend .c-header__search-submit:focus-visible {
  outline: none;
  box-shadow: none;
}

body.bricks-is-frontend.bricks-is-frontend .c-header__search-field:focus-within {
  border-color: #F9FFFB;
  box-shadow: 0 0 0 1px #F9FFFB;
}

.c-header__search-submit {
  min-height: 48px;
  padding: 8px 16px;
  white-space: nowrap;
}

.c-header__search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  background: var(--G700);
  border-radius: 16px;
  overflow: hidden;
  z-index: 30;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}

.c-header__search-results[hidden] {
  display: none;
}

.c-header__search-result,
.c-header__search-empty {
  display: block;
  padding: 8px;
  color: var(--G50);
  text-decoration: none;
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
}

.c-header__search-result:hover {
  background: color-mix(in srgb, var(--G50) 4%, transparent);
}

.c-header__search-empty {
  color: var(--G200);
}



/* =========================================================
   Background API (locked)
   - surface color comes from ACSS bg--* / text--*
   - pattern is optional
   - overlay is optional
   - apply on wrappers only
========================================================= */

:root {
  --uw-pattern-artboard-width: 1440px;
  --uw-pattern-content-width: var(--uw-container-content); /* 944px */
  --uw-pattern-content-inset: 60px;
  --uw-pattern-radial-size: min(100vw, 1440px);

  --uw-pattern-side-width: max(
    0px,
    calc(((100vw - var(--uw-pattern-content-width)) / 2) + var(--uw-pattern-content-inset))
  );

  --uw-pattern-fade-span: calc(
    ((var(--uw-pattern-artboard-width) - var(--uw-pattern-content-width)) / 2) +
      var(--uw-pattern-content-inset)
  );

  --uw-pattern-major-step: 60px;
  --uw-pattern-line-major: color-mix(in srgb, var(--G600) 30%, transparent);

  /* surface + fade target */
  --uw-pattern-bg: var(--G800);
  --uw-surface-bg: var(--G800);

  /* stackable section overlays */
  --uw-pattern-overlay-radial: linear-gradient(transparent, transparent);
  --uw-pattern-overlay-y: linear-gradient(transparent, transparent);

  /* full-screen grid for radial modes */
  --uw-pattern-full-grid-v: linear-gradient(transparent, transparent);
  --uw-pattern-full-grid-h: linear-gradient(transparent, transparent);

  /* pattern-only vertical fade for side-grid mode */
  --uw-pattern-y-overlay: linear-gradient(transparent, transparent);
  --uw-pattern-y-stop: 20%;

  /* optional cut shape */
  --uw-pattern-cut-top: 33.333%;
  --uw-pattern-cut-bottom: 88.505%;
  --uw-pattern-cut-inner-visible: 34.8%;
}

@layer uw-vars {
  .v-pattern-bg-700 {
    --uw-pattern-bg: var(--G700);
    --uw-surface-bg: var(--G700);
  }

  .v-pattern-bg-800 {
    --uw-pattern-bg: var(--G800);
    --uw-surface-bg: var(--G800);
  }

  .v-pattern-inset-134 {
    --uw-pattern-content-inset: 134px;
  }
}

:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--uw-surface-bg);
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  /* background-size: 100% 100%, 100% 100%, auto auto, auto auto; */
}

:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
) > * {
  position: relative;
  z-index: 2;
}

/* reset */
.u-pattern-fade-none,
.u-pattern-side-grid {
  --uw-pattern-overlay-radial: linear-gradient(transparent, transparent);
  --uw-pattern-overlay-y: linear-gradient(transparent, transparent);
  --uw-pattern-full-grid-v: linear-gradient(transparent, transparent);
  --uw-pattern-full-grid-h: linear-gradient(transparent, transparent);
  --uw-pattern-y-overlay: linear-gradient(transparent, transparent);
}

/* stackable Y fade */
.u-pattern-fade-y {
  --uw-pattern-overlay-y: linear-gradient(
    to bottom,
    var(--uw-pattern-bg) 0%,
    transparent 20%,
    transparent 80%,
    var(--uw-pattern-bg) 100%
  );

  --uw-pattern-y-overlay: linear-gradient(
    to bottom,
    var(--uw-pattern-bg) 0%,
    transparent var(--uw-pattern-y-stop),
    transparent calc(100% - var(--uw-pattern-y-stop)),
    var(--uw-pattern-bg) 100%
  );
}

/* radial modes use a fixed 1440px field */
.u-pattern-fade-radial-out,
.u-pattern-fade-radial-in {
  --uw-pattern-overlay-radial: linear-gradient(transparent, transparent);
}

/* radial-out:
   grid exists only inside the centered 1440 field,
   fades from center out,
   outside that field stays at 0% */
.u-pattern-fade-radial-out::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--uw-pattern-radial-size);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;

  background-image:
    var(--uw-pattern-y-overlay),
    repeating-linear-gradient(
      to right,
      var(--uw-pattern-line-major) 0 1px,
      transparent 1px var(--uw-pattern-major-step)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--uw-pattern-line-major) 0 1px,
      transparent 1px var(--uw-pattern-major-step)
    );

  background-repeat: no-repeat, repeat, repeat;
  background-size: 100% 100%, auto auto, auto auto;

  -webkit-mask-image: radial-gradient(
    circle at 50% 50%,
    #000 0%,
    #000 22%,
    rgba(0, 0, 0, 0.92) 46%,
    rgba(0, 0, 0, 0.45) 72%,
    transparent 100%
  );
  mask-image: radial-gradient(
    circle at 50% 50%,
    #000 0%,
    #000 22%,
    rgba(0, 0, 0, 0.92) 46%,
    rgba(0, 0, 0, 0.45) 72%,
    transparent 100%
  );
}

/* radial-in:
   full section has grid,
   centered 1440 field fades from edges inward to center,
   outside 1440 stays the same as the 1440 edge */
.u-pattern-fade-radial-in::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image:
    var(--uw-pattern-y-overlay),
    repeating-linear-gradient(
      to right,
      var(--uw-pattern-line-major) 0 1px,
      transparent 1px var(--uw-pattern-major-step)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--uw-pattern-line-major) 0 1px,
      transparent 1px var(--uw-pattern-major-step)
    );

  background-repeat: no-repeat, repeat, repeat;
  background-size: 100% 100%, auto auto, auto auto;
}

.u-pattern-fade-radial-in::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--uw-pattern-radial-size);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;

  background: radial-gradient(
    circle at 50% 50%,
    var(--uw-pattern-bg) 0%,
    color-mix(in srgb, var(--uw-pattern-bg) 96%, transparent) 20%,
    color-mix(in srgb, var(--uw-pattern-bg) 68%, transparent) 44%,
    color-mix(in srgb, var(--uw-pattern-bg) 18%, transparent) 72%,
    transparent 100%
  );
}

/* side-grid mode only */
.u-pattern-side-grid::before,
.u-pattern-side-grid::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--uw-pattern-side-width);
  pointer-events: none;
  z-index: 0;
}

/* left side */
.u-pattern-side-grid::before {
  left: 0;

  background-image:
    var(--uw-pattern-y-overlay),
    linear-gradient(
      to right,
      transparent 0,
      transparent calc(100% - var(--uw-pattern-fade-span)),
      var(--uw-pattern-bg) 100%
    ),
    repeating-linear-gradient(
      to right,
      var(--uw-pattern-line-major) 0 1px,
      transparent 1px var(--uw-pattern-major-step)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--uw-pattern-line-major) 0 1px,
      transparent 1px var(--uw-pattern-major-step)
    );

  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-size: 100% 100%, 100% 100%, auto auto, auto auto;
}

/* right side */
.u-pattern-side-grid::after {
  right: 0;

  background-image:
    var(--uw-pattern-y-overlay),
    linear-gradient(
      to right,
      var(--uw-pattern-bg) 0,
      transparent var(--uw-pattern-fade-span),
      transparent 100%
    ),
    repeating-linear-gradient(
      to right,
      var(--uw-pattern-line-major) 0 1px,
      transparent 1px var(--uw-pattern-major-step)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--uw-pattern-line-major) 0 1px,
      transparent 1px var(--uw-pattern-major-step)
    );

  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-size: 100% 100%, 100% 100%, auto auto, auto auto;
}

/* hide side-grid strips when radial mode is active */
.u-pattern-side-grid.u-pattern-fade-radial-out::before,
.u-pattern-side-grid.u-pattern-fade-radial-out::after,
.u-pattern-side-grid.u-pattern-fade-radial-in::before,
.u-pattern-side-grid.u-pattern-fade-radial-in::after {
  display: none;
}

/* optional cut shape */
.u-pattern-side-cut.u-pattern-side-grid::before {
  clip-path: polygon(
    0 0,
    100% 0,
    100% var(--uw-pattern-cut-top),
    var(--uw-pattern-cut-inner-visible) var(--uw-pattern-cut-top),
    var(--uw-pattern-cut-inner-visible) var(--uw-pattern-cut-bottom),
    100% var(--uw-pattern-cut-bottom),
    100% 100%,
    0 100%
  );
}

.u-pattern-side-cut.u-pattern-side-grid::after {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 100%,
    0 var(--uw-pattern-cut-bottom),
    calc(100% - var(--uw-pattern-cut-inner-visible))
      var(--uw-pattern-cut-bottom),
    calc(100% - var(--uw-pattern-cut-inner-visible)) var(--uw-pattern-cut-top),
    0 var(--uw-pattern-cut-top)
  );
}

/* surface override inside pattern sections */
:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
)
  .c-card,
:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
)
  .c-card--bg-800,
:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
)
  .c-blog-card,
:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
)
  .c-event-card,
:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
)
  .c-banner,
:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
)
  .c-calc,
:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
)
  .c-calc__layout,
:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
)
  .c-calc__results,
:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
)
  .c-compare__table,
:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
)
  .c-success-story-card,
:is(
  .u-pattern-side-grid,
  .u-pattern-fade-none,
  .u-pattern-fade-y,
  .u-pattern-fade-radial-out,
  .u-pattern-fade-radial-in
)
  .c-success-story-card-grid > .c-card {
  background: var(--uw-surface-bg);
}

/* =========================================================
   TYPOGRAPHY LOCK (Figma exact)
   Forces exact sizes + line-heights per breakpoint.
   (DO NOT redefine these later with clamp)
   ========================================================= */

/* Font-weight helpers (text only) */
body .fw-500 {
    font-weight: var(--uw-fw-500);
}
body .fw-600 {
    font-weight: var(--uw-fw-600);
}

/* Desktop */
:root {
    /* Headings */
    --h1: 48px;
    --h1-line-height: 56px;
    --h2: 28px;
    --h2-line-height: 36px;
    --h3: 24px;
    --h3-line-height: 32px;
    --h4: 20px;
    --h4-line-height: 28px;
    --h5: 18px;
    --h5-line-height: 26px;

    /* Text */
    --text-m: 16px;
    --text-m-line-height: 24px; /* Body 1 */

    --text-s: 14px;
    --text-s-line-height: 22px; /* Body 2 */

    --text-xs: 12px;
    --text-xs-line-height: 16px; /* Body 3 */
}

/* Card Animations */
:root {
    --card-highlight-scale: 1.02;
    --card-highlight-ring-width: 1px;
    --card-highlight-glow-size: 24px;
    --card-highlight-glow-strength: 25%;
    --card-highlight-color: var(--P700);
    --card-highlight-speed: 0.3s;
    --card-highlight-ease: ease;
}

/* Mobile */
@media (max-width: 767px) {
    :root {
        --h1: 28px;
        --h1-line-height: 36px;
        --h2: 24px;
        --h2-line-height: 32px;
        --h3: 20px;
        --h3-line-height: 28px;
        --h4: 18px;
        --h4-line-height: 26px;
        --h5: 16px;
        --h5-line-height: 24px;

        --text-m: 14px;
        --text-m-line-height: 22px;

        --text-s: 14px;
        --text-s-line-height: 22px;

        --text-xs: 12px;
        --text-xs-line-height: 16px;
    }
}

@layer uw-tokens, uw-base, uw-layout, uw-vars, uw-states;

/* =========================================================
   LAYOUT LOCKS (unlayered, beats Bricks/theme defaults)
   Keep split + containers inside content width and prevent overflow
   ========================================================= */

/* Ensure our container width always applies */
.brxe-container.l-container,
.l-container {
    width: 100%;
    max-width: var(--uw-container-width, var(--content-width, 944px));
    margin-inline: auto;
    /* padding-inline: var(--uw-gutter, var(--gutter, 24px)); */
}

/* Make split columns shrink correctly instead of overflowing */
.l-split {
    width: 100%;
}

@media (min-width: 992px) {
    .l-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .l-split > * {
        min-width: 0; /* critical for grid overflow bugs */
    }
}

/* Ensure images never push the grid wider */
.l-split img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ----------------------------
   1) TOKENS (aliases + locked palette)
   ---------------------------- */

@layer uw-tokens {
    :root {
        /* =====================================================
       Locked Palette Map (Use var(--G800), var(--P700), etc.)
       ===================================================== */

        /* Primary (P) */
        --P900: #108b3e;
        --P800: #16ac4e;
        --P700: #1bd761;
        --P600: #49df81;
        --P500: #76e7a0;
        --P400: #a4efc0;
        --P300: #bbf3d0;
        --P200: #d1f7df;
        --P100: #e8fbef;
        --P50: #f9fffb;

        /* Grays (G) */
        --G800: #121212;
        --G700: #1f1f1f;
        --G600: #3d3d3d;
        --G500: #5a5a5a;
        --G400: #787878;
        --G300: #959595;
        --G200: #bdbdbd;
        --G100: #e0e0e0;
        --G50: #ffffff;

        /* Error (R) */
        --R800: #d8001a;
        --R700: #f91b29;
        --R600: #ff2725;
        --R500: #ff4149;
        --R400: #f76a6f;
        --R300: #fd9598;
        --R200: #ffcbd2;
        --R100: #ffd8df;
        --R50: #ffeaee;

        /* Tertiary Blue (B) */
        --B800: #006e99;
        --B700: #0092cc;
        --B600: #00b7ff;
        --B500: #33c5ff;
        --B400: #66d4ff;
        --B300: #99e2ff;
        --B200: #b2e9ff;
        --B100: #ccf1ff;
        --B50: #e5f8ff;

        /* Tertiary Yellow (Y) */
        --Y800: #998700;
        --Y700: #ccb400;
        --Y600: #ffe100;
        --Y500: #ffe733;
        --Y400: #ffed66;
        --Y300: #fff399;
        --Y200: #fff6b2;
        --Y100: #fff9cc;
        --Y50: #fffce5;

        /* Weights */
        --uw-fw-500: 500;
        --uw-fw-600: 600;

        /* =====================================================
       Figma layout tokens
       ===================================================== */
        --uw-container-content: 944px;
        --uw-container-header: 1112px;
        --uw-container-footer: 1184px;

        --uw-container-width: var(--uw-container-content);

        /* Gutter target: 16 mobile / 24 desktop */
        --uw-gutter: clamp(16px, 2vw, 24px);

        /* Radii */
        --uw-radius-8: 8px;
        --uw-radius-12: 12px;
        --uw-radius-24: 24px;
        --uw-radius-pill: 100px;

        /* Spacing aliases (ACSS base 16, scale 2) */
        --uw-space-0: var(--space-xxxs, 0px);
        --uw-space-4: var(--space-xs, 4px);
        --uw-space-8: var(--space-s, 8px);
        --uw-space-12: calc(var(--space-s, 8px) * 1.5);
        --uw-space-15: 15px; /* one-off: required by design */

        --uw-space-16: var(--space-m, 16px);
        --uw-space-24: calc(var(--space-m, 16px) * 1.5);
        --uw-space-32: calc(var(--uw-space-16) * 2);
        --uw-space-40: calc(var(--space-l, 32px) * 1.25);
        --uw-space-48: calc(var(--space-m, 16px) * 3);

        --uw-space-64: var(--space-xl, 64px);
        --uw-space-65: calc(var(--uw-space-64) + 1px);

        --uw-space-96: calc(var(--space-xl, 64px) * 1.5);
        --uw-space-128: var(--space-xxl, 128px);

        /* Text colors (Figma) */
        --uw-text-body: var(--G100);
        --uw-text-heading: var(--G50);

        /* =====================================================
       Button sizing (responsive: one button for all devices)
       Desktop: 12px 16px + Body 1
       Mobile: 8px 16px + Body 2
       ===================================================== */
        --btn-py: 12px;
        --btn-px: 16px;
        --btn-font-size: var(--text-m); /* Body 1 */
        --btn-line-height: var(--text-m-line-height);
        --btn-icon-gap: var(--uw-space-8);
    }

    @media (max-width: 767px) {
        :root {
            --btn-py: 8px;
            --btn-px: 16px;
            --btn-font-size: var(--text-s); /* Body 2 */
            --btn-line-height: var(--text-s-line-height);
        }
    }
}

/* ----------------------------
   2) BASE
   ---------------------------- */
@layer uw-base {
    body {
        background: var(--body-bg-color, var(--G800));
        color: var(--body-color, var(--G50));
    }
}

/* ----------------------------
   3) GLOBAL LAYOUT CLASSES
   ---------------------------- */
@layer uw-layout {
    .l-section {
        width: 100%;
        padding-block: var(
            --section-pad,
            var(--section-space-m, var(--uw-space-96))
        );
    }

    /* Full-bleed guarantee for section bands */
    .brxe-section.l-section {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding-inline: 0; /* gutters belong to .l-container */
    }

    .l-container {
        width: 100%;
        max-width: var(--uw-container-width, var(--content-width, 944px));
        margin-inline: auto;
    }

    .l-stack {
        display: flex;
        flex-direction: column;
        gap: var(--gap, var(--uw-space-24));
    }

    .l-cluster {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--gap, var(--uw-space-16));
    }

    .l-row {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: var(--gap, var(--uw-space-24));
    }

    .l-grid {
        display: grid;
        gap: var(--gap, var(--uw-space-24));
        grid-template-columns: repeat(
            auto-fit,
            minmax(min(var(--min, 280px), 100%), 1fr)
        );
    }

    .l-grid-fixed {
        display: grid;
        gap: var(--gap, var(--uw-space-24));
        grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
    }

    @media (max-width: 767px) {
        .l-grid-fixed {
            grid-template-columns: 1fr;
        }
    }

    .l-split {
        display: grid;
        align-items: center;
        gap: var(--gap, var(--uw-space-64));
        grid-template-columns: 1fr;
    }

    @media (min-width: 992px) {
        .l-split {
            grid-template-columns: 1fr 1fr;
        }
    }

    /* NEW: Center only on desktop and up */
    .l-center {
        margin-inline: auto;
    }

    @media (min-width: 768px) {
        .l-center {
            text-align: center;
            align-items: center;
        }

        .l-center .brxe-heading,
        .l-center .brxe-text-basic,
        .l-center .brxe-list {
            text-align: center;
        }
    }

    body .u-left {
    text-align: left;
    }

    body .l-stack.u-left {
    align-items: flex-start;
    }

    body .l-row.u-left,
    body .l-cluster.u-left {
    justify-content: flex-start;
    }

    body .u-left .brxe-heading,
    body .u-left .brxe-text-basic,
    body .u-left .brxe-list {
    text-align: inherit;
    }

    .u-center {
        margin-inline: auto;
        text-align: center;
    }

    .u-center .brxe-heading,
    .u-center .brxe-text-basic {
        text-align: center;
    }

    .u-full-bleed {
        width: 100vw;
        margin-left: 50%;
        transform: translateX(-50%);
    }
}

/* ----------------------------
   4) VARIABLE CLASSES (ONLY set CSS variables)
   ---------------------------- */
@layer uw-vars {
    .v-container--content {
        --uw-container-width: var(--uw-container-content);
    }

    .v-container--header {
        --uw-container-width: var(--uw-container-header);
    }

    .v-container--footer {
        --uw-container-width: var(--uw-container-footer);
    }

    .v-gap-0 {
        --gap: var(--uw-space-0);
    }
    .v-gap-4 {
        --gap: var(--uw-space-4);
    }
    .v-gap-8 {
        --gap: var(--uw-space-8);
    }
    .v-gap-12 {
        --gap: var(--uw-space-12);
    }
    .v-gap-16 {
        --gap: var(--uw-space-16);
    }
    .v-gap-24 {
        --gap: var(--uw-space-24);
    }
    .v-gap-32 {
        --gap: var(--uw-space-32);
    }
    .v-gap-40 {
        --gap: var(--uw-space-40);
    }
    .v-gap-48 {
        --gap: var(--uw-space-48);
    }
    .v-gap-64 {
        --gap: var(--uw-space-64);
    }
    .v-gap-96 {
        --gap: var(--uw-space-96);
    }
    .v-gap-128 {
        --gap: var(--uw-space-128);
    }
    .v-section-pad-0 {
        --section-pad: var(--uw-space-0);
    }
    .v-section-pad-48 {
        --section-pad: var(--uw-space-48);
    }
    .v-section-pad-64 {
        --section-pad: var(--uw-space-64);
    }
    .v-section-pad-96 {
        --section-pad: var(--uw-space-96);
    }
    .v-section-pad-128 {
        --section-pad: var(--uw-space-128);
    }

    .v-min-220 {
        --min: 220px;
    }
    .v-min-260 {
        --min: 260px;
    }
    .v-min-280 {
        --min: 280px;
    }
    .v-min-300 {
        --min: 300px;
    }
    .v-min-320 {
        --min: 320px;
    }
    .v-min-360 {
        --min: 360px;
    }
    .v-min-420 {
        --min: 420px;
    }

    .v-cols-2 {
        --cols: 2;
    }
    .v-cols-3 {
        --cols: 3;
    }
    .v-cols-4 {
        --cols: 4;
    }

    .v-radius-8 {
        --radius: var(--uw-radius-8);
    }
    .v-radius-12 {
        --radius: var(--uw-radius-12);
    }
    .v-radius-24 {
        --radius: var(--uw-radius-24);
    }
    .v-radius-pill {
        --radius: var(--uw-radius-pill);
    }
}

/* ----------------------------
   5) STATE HOOKS (empty)
   ---------------------------- */
@layer uw-states {
}

/* =========================================================
   BUTTON SYSTEM (global)
   NOTE: We avoid "btn--" in class names to prevent wildcard selector collisions.
   ========================================================= */
.c-btn,
.brxe-button.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-icon-gap);
    padding: var(--btn-py) var(--btn-px);

    border-radius: var(--uw-radius-pill);
    border: 1px solid;

    text-decoration: none;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
    font-weight: var(--uw-fw-500); /* LOCK: all buttons 500 */
    font-size: var(--btn-font-size);
    line-height: var(--btn-line-height);

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        opacity 0.18s ease;
}

/* Icon placement */
.c-btn-icon-right {
    flex-direction: row-reverse;
}

.c-btn__icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
}

.has-icon .c-btn__icon {
    display: inline-flex;
}

.c-btn:not(.has-icon) .c-btn__icon {
    display: none;
}

/* Primary */
.c-btn-primary {
    background: var(--P700);
    color: var(--G800);
}
.c-btn-primary:hover {
    background: var(--P500);
    color: var(--G800);
}
.c-btn-primary.is-disabled,
.c-btn-primary:disabled {
    background: var(--P900);
    color: var(--G700);
    cursor: not-allowed;
    pointer-events: none;
}

/* Secondary */
.c-btn-secondary {
    background: var(--G50);
    color: var(--G800);
}
.c-btn-secondary:hover {
    background: var(--G200);
    color: var(--G800);
}
.c-btn-secondary.is-disabled,
.c-btn-secondary:disabled {
    background: var(--G200);
    color: var(--G400);
    cursor: not-allowed;
    pointer-events: none;
}

/* Tertiary */
.c-btn-tertiary {
    background: transparent;
    border-color: var(--G50);
    color: var(--G50);
}
.c-btn-tertiary:hover {
    border-color: var(--G200);
    color: var(--G200);
}
.c-btn-tertiary.is-disabled,
.c-btn-tertiary:disabled {
    border-color: var(--G400);
    color: var(--G400);
    cursor: not-allowed;
    pointer-events: none;
}

/* Text */
.c-btn-text {
    padding: 0;
    background: transparent;
    border-color: transparent;
    color: var(--G50);
}
.c-btn-text:hover {
    color: var(--G200);
}
.c-btn-text.is-disabled,
.c-btn-text:disabled {
    color: var(--G400);
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading dots */
.c-btn.is-loading {
    pointer-events: none;
}

.c-btn__dots {
    display: none;
    width: 32px;
    height: 18px;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.c-btn.is-loading .c-btn__dots {
    display: inline-flex;
}

.c-btn__dots::before,
.c-btn__dots::after,
.c-btn__dots span {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.35;
    animation: uwBtnDots 1s infinite ease-in-out;
}

.c-btn__dots span {
    animation-delay: 0.15s;
    opacity: 0.6;
}

.c-btn__dots::after {
    animation-delay: 0.3s;
    opacity: 0.85;
}

@keyframes uwBtnDots {
    0%,
    80%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-4px);
    }
}

/* =========================================================
   LP | S01 Hero (MOBILE FIRST = LEFT)
   ========================================================= */

/* MOBILE default: left aligned */
.c-hero__wrap {
    align-items: stretch;
}

.c-hero__intro {
    text-align: left;
    align-items: flex-start;
    margin-inline: 0;
    max-width: none;
    width: 100%;
}

.c-hero__intro .brxe-heading {
    color: var(--uw-text-heading);
}

.c-hero__intro .brxe-text-basic {
    color: var(--uw-text-body);
}

.brxe-list.c-hero__points {
    margin: 0;
    padding: 0;
    list-style: none;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    width: 100%;
    gap: var(--gap, var(--uw-space-24));
}

.brxe-list.c-hero__points > li .content {
    display: inline-flex;
    align-items: center;
    gap: var(--uw-space-8);
}

.c-hero__cta {
    width: 100%;
    justify-content: flex-start;
}

@media (min-width: 768px) {
    /* Desktop only centering */
    .c-hero__wrap {
        align-items: center;
    }

    .c-hero__intro {
        text-align: center;
        align-items: center;
        margin-inline: auto;
        max-width: 70ch;
    }

    .brxe-list.c-hero__points {
        justify-content: center;
    }

    .c-hero__cta {
        justify-content: center;
    }
}

.c-hero__frame {
    background: none;
    border: 0;
    padding: 0;
    box-shadow: none;
}

.c-hero__media {
    position: relative;
    overflow: visible;
    background: var(--G800);
    border-radius: var(--uw-radius-24);
    padding: var(--uw-space-24);
    background: var(--G800);
    border: 1px solid var(--G50);
}

.c-hero__image {
    display: none;
    width: 100%;
    height: auto;
}

.c-hero__image.is-active {
    display: block;
}

.c-hero__toggles {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--uw-space-15) * 5);
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--uw-space-24);
}

.c-hero__toggle {
    position: relative;
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    overflow: visible;
}

.c-hero__toggle svg.c-hero__toggle-ico--base {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    display: block;
}

.c-hero__toggle svg.c-hero__toggle-ico--hover {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateY(-4px);
    width: 72px;
    height: 72px;
    display: block;
}

.c-hero__toggle .c-hero__toggle-ico--base {
    opacity: 1;
}
.c-hero__toggle .c-hero__toggle-ico--hover {
    opacity: 0;
}

.c-hero__toggle:hover .c-hero__toggle-ico--base {
    opacity: 0;
}
.c-hero__toggle:hover .c-hero__toggle-ico--hover {
    opacity: 1;
}

.c-hero__toggle.is-active .c-hero__toggle-ico--base {
    opacity: 0;
}
.c-hero__toggle.is-active .c-hero__toggle-ico--hover {
    opacity: 1;
}

.c-hero__toggle::before {
    content: attr(data-label);
    position: absolute;
    bottom: calc(100% + var(--uw-space-8));
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    opacity: 0;
    pointer-events: none;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: var(--uw-space-4) var(--uw-space-8);
    gap: var(--uw-space-8);

    background: var(--P700);
    border: 1px solid var(--G50);
    border-radius: var(--uw-radius-8);

    font-weight: var(--uw-fw-500);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    color: var(--G800);
    white-space: nowrap;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

.c-hero__toggle:hover::before {
    /* removed .c-hero__toggle.is-active::before so the label only appears on hover */
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* =========================================
   Hero toggle label hard fix
========================================= */

/* let the label escape all hero toggle wrappers */
.c-hero__frame,
.c-hero__media,
.c-hero__toggles,
.c-hero__toggle {
  overflow: visible;
}

/* keep the toggle group above nearby media content */
.c-hero__toggles {
  z-index: 30;
}

/* create a clean local stacking context */
.c-hero__toggle {
  isolation: isolate;
}

/* tooltip label must sit above icon + shine layer */
.c-hero__toggle::before {
  z-index: 50;
}

.c-hero__trusted {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--uw-space-65);
  width: 100%;
}

.c-hero__trusted-label {
  white-space: nowrap;
  font-size: var(--text-s);
  line-height: var(--text-s-line-height);
  font-weight: var(--uw-fw-500);
  color: var(--uw-text-body);
  flex: 0 0 auto;
}

.c-hero__trusted-logos {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 12%,
    black 76%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 12%,
    black 76%,
    transparent 100%
  );
}

.c-hero__trusted-track {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--uw-space-32);
  width: max-content;
  will-change: transform;
  transform: translateX(0);
}

.c-hero__trusted-track > * {
  flex: 0 0 auto;
}

.c-hero__trusted-logo {
  display: block;
  flex: 0 0 120px;
  width: 120px;
  height: 32px;
  object-fit: contain;
  object-position: center;
  max-width: none;
  max-height: none;
  border-radius: 0;
}

.c-hero .c-hero__image,
.c-hero .c-hero__video,
.c-hero .c-hero__shortcode {
  display: none;
}

.c-hero.is-media-image .c-hero__image {
  display: block;
}

.c-hero.is-media-video .c-hero__video {
  display: block;
}

.c-hero.is-media-shortcode .c-hero__shortcode {
  display: block;
}

.c-hero.is-media-none .c-hero__image,
.c-hero.is-media-none .c-hero__video,
.c-hero.is-media-none .c-hero__shortcode {
  display: none;
}

/* =========================================================
   TYPO UTILITIES (unlayered)
   ========================================================= */
.c-eyebrow {
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    font-weight: var(--uw-fw-600);
    color: var(--P700);
}

/* =========================================================
   TEXT UTILITIES
   ========================================================= */
/* Muted text (global) */
.u-text-muted,
.brxe-text-basic.u-text-muted,
.brxe-heading.u-text-muted {
    color: var(--uw-text-muted, var(--uw-text-body));
}

/* Optional: set the default muted token (dark theme baseline) */
:root {
    --uw-text-muted: var(--G100);
}

/* =========================================================
   S01 HERO - Mobile exact spacing from Figma exports
   ========================================================= */
@media (max-width: 767px) {
    /* overall vertical rhythm inside hero = 24 */
    .c-hero__wrap {
        --gap: var(--uw-space-24);
        align-items: stretch;
    }

    .c-hero__main {
        --gap: var(--uw-space-24);
        width: 100%;
    }

    /* heading->body micro spacing = 8 */
    .c-hero__intro {
        --gap: var(--uw-space-8);
    }

    /* list wrap gap = 8 */
    .brxe-list.c-hero__points {
        gap: var(--uw-space-8);
    }

    /* CTA row gap = 16 */
    .c-hero__cta {
        gap: var(--uw-space-16);
    }

    /* media frame padding 8 + radius 12 */
    .c-hero__media {
        width: 100%;
        max-width: 100%;
        padding: var(--uw-space-8);
        border-radius: var(--uw-radius-12);
    }

    /* Trusted row: mobile wraps */
    .c-hero__trusted {
        width: 100%;
        justify-content: flex-start; /* MOBILE DEFAULT LEFT */
        gap: var(--uw-space-24);
        flex-wrap: wrap;
    }

    .c-hero__trusted-logos {
        gap: var(--uw-space-24);
        flex-wrap: wrap;
        justify-content: flex-start; /* MOBILE DEFAULT LEFT */
        opacity: 0.5;
    }

    .c-hero__trusted-logo {
        max-height: 18px; /* mobile cap */
        opacity: 1;
    }
}

/* =========================================================
   BRICKS CONTAINER OVERRIDES
   Only l-container should behave like a width wrapper.
   Layout-parent containers must be fluid (100%) inside the wrapper.
   ========================================================= */

/* 1) Width wrapper stays controlled by our system */
body .brxe-container.l-container,
body .l-container {
    width: 100%;
    max-width: var(--uw-container-width, var(--content-width, 944px));
    margin-inline: auto;
    /* padding-inline: var(--uw-gutter, 24px); */
}

/* 2) Any Container used as a layout parent should NOT clamp to content width */
body .brxe-container.l-stack,
body .brxe-container.l-row,
body .brxe-container.l-cluster,
body .brxe-container.l-split,
body .brxe-container.l-grid,
body .brxe-container.l-grid-fixed {
    width: 100%;
    max-width: none;
}

/* 3) Prevent grid/split overflow from “wide children” */
@media (min-width: 992px) {
    body .l-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    body .l-split > * {
        min-width: 0;
    }
}

body .l-split img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Nested Bricks containers inside our width wrapper must be fluid */
.l-container .brxe-container:not(.l-container) {
    width: 100%;
    max-width: none;
}

/* =========================================================
   Reusable gradient border
   Top: #1BD761 @ 32% -> Bottom: 0%
   ========================================================= */
.u-border-grad {
    position: relative;
}

.u-border-grad::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;

    background: linear-gradient(
        180deg,
        rgba(27, 215, 97, 0.32) 0%,
        rgba(27, 215, 97, 0) 100%
    );

    /* Border-only mask (WebKit) */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;

    /* Fallback border if mask unsupported */
    pointer-events: none;
}

@supports not (-webkit-mask-composite: xor) {
    .u-border-grad {
        border: 1px solid rgba(27, 215, 97, 0.32);
    }

    .u-border-grad::before {
        display: none;
    }
}

/* =========================================================
   Card system
   - Desktop padding: 24
   - Mobile padding: 16
   - Media: fixed height, cover, aligned to top (left top)
   ========================================================= */
.c-card {
    --card-pad: var(--uw-space-24);
    --card-media-h: 165px;
    /*--scard-media-h: 477px;*/

    background: var(--G700);
    border-radius: var(--radius, var(--uw-radius-12));
    overflow: hidden;

    display: flex;
    flex-direction: column;

    min-height: 301px; /* matches your Figma card height */
}

@media (max-width: 767px) {
    .c-card {
        --card-pad: var(--uw-space-16);
    }
}

.c-card__body {
    padding: var(--card-pad);
}

/* Text styles */
.c-card__num,
.c-card__title,
.c-card__desc {
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
}

.c-card__num {
    color: var(--G300);
    font-weight: 400;
    transition: color 0.3s ease;
}

.c-card__title {
    color: var(--G50);
    font-weight: var(--uw-fw-600);
}

/* desc color comes from u-text-muted */

/* Media sits at bottom, flush right + bottom, clipped by card */
.c-card__media {
    margin-top: auto;
    padding-left: var(--card-pad); /* keeps left alignment with content */
    padding-right: 0;
    padding-bottom: 0;
    width: 100%;
}

/* Media fills its own “window”, covers, aligned to top */
.c-card__media > img,
.c-card__media > video,
.c-card__media > iframe {
    display: block;
    height: var(--card-media-h);
    width: calc(100% + var(--card-pad)); /* creates the right “overhang” */
    max-width: none;
    object-fit: cover;
    object-position: left top; /* if you truly want top-center, use: center top */
    border-radius: var(--uw-radius-12) 0 var(--uw-radius-12) 0;
}

.cs-card__media {
    margin-top: auto;
    padding-left: var(--card-pad); /* keeps left alignment with content */
    padding-right: 0;
    padding-bottom: 0;
    width: 100%;
    height: 477px;
}

.cs-card__media > img,
.cs-card__media > video,
.cs-card__media > iframe {
    display: block;
    height: var(--scard-media-h);
    width: calc(100% + var(--card-pad)); /* creates the right “overhang” */
    max-width: none;
    object-fit: cover;
    object-position: left top; /* if you truly want top-center, use: center top */
    border-radius: var(--uw-radius-12) 0 var(--uw-radius-12) 0;
}

/* =========================================================
   Card media: Bricks video support (.brxe-video wrapper)
   ========================================================= */
.c-card__media {
    overflow: hidden; /* clips video overhang */
}

/* The Bricks wrapper becomes the media window */
.c-card__media .brxe-video,
.c-card__media .bricks-video {
    width: calc(100% + var(--card-pad)); /* keeps the right edge flush */
    height: var(--card-media-h);
    margin: 0;
}

/* Make the actual <video> fill the window */
.c-card__media .brxe-video video,
.c-card__media .bricks-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top; /* top aligned */
}

/* Optional: keep the same corner treatment as images */
.c-card__media .brxe-video,
.c-card__media .bricks-video {
    border-radius: var(--uw-radius-12) 0 var(--uw-radius-12) 0;
}

/* u-center should center layout children too (not just text) */
body .u-center {
    text-align: center;
}

body .l-stack.u-center {
    align-items: center;
}

body .l-row.u-center,
body .l-cluster.u-center {
    justify-content: center;
}

/* Bricks sometimes sets text-align on elements; force inherit */
body .u-center .brxe-heading,
body .u-center .brxe-text-basic {
    text-align: inherit;
}

/* List reset (generic) */
.c-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--uw-space-8);
}

/* Checklist layout (generic) */
.c-checklist .content {
    display: inline-flex;
    align-items: start;
    gap: var(--uw-space-8);
    margin: 0;
}

.c-checklist .icon {
    display: inline-flex;
    padding-top: 2px;
}

.c-checklist .title {
    display: flex;
    margin: 0;
    text-align: left;
}

/* Grid span helpers (for 50/25/25 layouts) */
.v-span-2 {
    --span: 2;
}

/* Only span on desktop/tablet; avoid implicit columns on mobile 1-col grid */
@media (min-width: 768px) {
    .u-grid-span {
        grid-column: span var(--span, 1);
    }
}

/* =========================================================
   Tabs (Bricks native) – one class hook: .c-tabs
   - tab padding: 4px 12px
   - gap between tabs: 24px
   - gap to content: 24px
   - inactive tab surface is variable-driven per instance
========================================================= */

.c-tabs [role='tablist'] {
  display: flex;
  align-items: flex-start;
  gap: var(--uw-space-24);
  margin: 0 0 var(--uw-space-48) 0;
  padding: 0;
}

.c-tabs [role='tab'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 12px;
  height: 32px;

  border-radius: var(--uw-radius-pill);
  border: 0;

  background: var(--tabs-tab-bg, var(--G800));
  color: var(--tabs-tab-color, var(--G50));

  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: 400;
  min-width: 84px;
  cursor: pointer;
}

.c-tabs [role='tab'][aria-selected='true'] {
  background: var(--tabs-tab-active-bg, var(--P700));
  color: var(--tabs-tab-active-color, var(--G800));
  font-weight: var(--uw-fw-500);
}

.c-tabs [role='tab']:not([aria-selected='true']):hover {
  background: var(--tabs-tab-hover-bg, var(--P500));
  color: var(--tabs-tab-hover-color, var(--G800));
}

.c-tabs [role='tab']:focus-visible {
  outline: 2px solid var(--P700);
  outline-offset: 2px;
}

/* =========================================
   Tabs -> switcher style
   For 2 tabs only
========================================= */

.c-tabs--switcher .tab-menu,
.c-tabs--switcher[role='tablist'],
.c-tabs--switcher [role='tablist'] {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  background: var(--G700);
  border-radius: var(--uw-radius-pill);
  overflow: hidden;
  isolation: isolate;
}

/* sliding active pill */
.c-tabs--switcher .tab-menu::before,
.c-tabs--switcher [role='tablist']::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  background: var(--P700);
  border-radius: inherit;
  transition: transform 0.24s ease;
  z-index: 0;
}

/* move pill to tab 2 when tab 2 is active */
.c-tabs--switcher .tab-menu:has(> :nth-child(2)[aria-selected='true'])::before,
.c-tabs--switcher [role='tablist']:has(> :nth-child(2)[aria-selected='true'])::before {
  transform: translateX(100%);
}

/* individual tab buttons */
.c-tabs--switcher .tab-title,
.c-tabs--switcher [role='tab'] {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 16px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.24s ease;
}

/* kill any spacing wrappers inside */
.c-tabs--switcher .tab-title > *,
.c-tabs--switcher [role='tab'] > * {
  margin: 0;
}

/* text colors */
.c-tabs--switcher .tab-title[aria-selected='false'],
.c-tabs--switcher [role='tab'][aria-selected='false'] {
  color: var(--G50);
}

.c-tabs--switcher .tab-title[aria-selected='true'],
.c-tabs--switcher [role='tab'][aria-selected='true'] {
  color: var(--G800);
}

/* ensure text inherits the right color */
.c-tabs--switcher .tab-title .brxe-text-basic,
.c-tabs--switcher [role='tab'] .brxe-text-basic {
  color: inherit;
}

/* remove old tab component spacing if it is still applied */
.c-tabs--switcher.c-tabs [role='tablist'] {
  gap: 0;
  margin: 0;
}

/* optional hover */
.c-tabs--switcher .tab-title:hover,
.c-tabs--switcher [role='tab']:hover {
  color: inherit;
}

/* =========================================
   Price tabs -> switcher style
   Locked for 2 tabs
========================================= */

.c-tabs--switcher .tab-menu {
  position: relative;
  display: flex;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 auto;
  width: max-content;
  background: var(--G700);
  border-radius: var(--uw-radius-pill);
  overflow: hidden;
  isolation: isolate;
}

/* sliding active pill */
.c-tabs--switcher .tab-menu::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  bottom: 2px;
  width: calc(50% - 2px);
  background: var(--P700);
  border-radius: var(--uw-radius-pill);
  transition: transform 0.24s ease;
  z-index: 0;
}

/* move the pill when tab 2 is active */
.c-tabs--switcher .tab-menu:has(> .tab-title:nth-child(2)[aria-selected="true"])::before {
  transform: translateX(100%);
}

/* each side of the switcher */
.c-tabs--switcher .tab-title {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  padding: 4px 28px;
  margin: 0;

  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

/* inner text */
.c-tabs--switcher .tab-title .brxe-text-basic {
  margin: 0;
  color: inherit;
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: var(--uw-fw-500);
  white-space: nowrap;
}

/* keyboard focus */
.c-tabs--switcher .tab-title:focus-visible {
  outline: 2px solid var(--G50);
  outline-offset: 2px;
}


/* =========================================
   Price tabs switcher
   Scoped override for the pricing tabs only
========================================= */

/* tab list = centered dark pill track */
body .c-tabs--pricing-switcher .tab-menu[role="tablist"] {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;

  width: max-content;
  margin: 0 auto;
  padding: 0;

  background: var(--G700);
  border: 0;
  border-radius: var(--uw-radius-pill);
  box-shadow: none;
}

/* each tab title = auto width, no forced sizing */
body .c-tabs--pricing-switcher .tab-title[role="tab"] {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 4px 28px;
  gap: 0;

  background: transparent;
  border: 0;
  border-radius: var(--uw-radius-pill);
  box-shadow: none;
}

/* active side = full pill */
body .c-tabs--pricing-switcher .tab-title[role="tab"][aria-selected="true"],
body .c-tabs--pricing-switcher .tab-title[role="tab"].brx-open {
  background: var(--P700);
}

/* inactive side stays transparent so the parent dark pill shows through */
body .c-tabs--pricing-switcher .tab-title[role="tab"][aria-selected="false"] {
  background: transparent;
}

/* text reset */
body .c-tabs--pricing-switcher .tab-title .brxe-text-basic {
  margin: 0;
  padding: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: inherit;
  white-space: nowrap;
}

/* active label */
body .c-tabs--pricing-switcher .tab-title[role="tab"][aria-selected="true"] .brxe-text-basic,
body .c-tabs--pricing-switcher .tab-title[role="tab"].brx-open .brxe-text-basic {
  font-weight: 500;
  color: var(--G800);
}

/* inactive label */
body .c-tabs--pricing-switcher .tab-title[role="tab"][aria-selected="false"] .brxe-text-basic {
  font-weight: 400;
  color: var(--G50);
}

/* kill generic c-tabs spacing from the global component */
body .c-tabs.c-tabs--pricing-switcher [role="tablist"] {
  margin-bottom: 0;
}

body .c-tabs.c-tabs--pricing-switcher [role="tab"] {
  min-width: 0;
  height: auto;
}

/* =========================================================
   Height helpers for this tabs layout (desktop/tablet only)
========================================================= */
@media (min-width: 768px) {
    .u-minh-232 {
        height: 232px;
        min-height: 0; /* overrides .c-card min-height:301 */
    }
    .u-minh-488 {
        height: 488px;
        min-height: 0; /* overrides .c-card min-height:301 */
    }
}

/* Card background modifier */
.c-card--bg-800 {
    background: var(--G800);
}

/* Link-style button (Primary 700 text + icon) */
.c-btn-link {
    color: var(--P700);
}

/* Hover */
.c-btn-link:hover {
    color: var(--P500);
}

/* Utility: minimum width 178px (buttons, chips, etc.) */
.u-minw-178 {
    min-width: 178px;
}

/* Make svg icons follow text color */
.c-btn-link svg {
    fill: currentColor;
}

/* Card link-button should size to content and sit left */
.c-card__body .c-btn-link {
    align-self: flex-start; /* stops flex stretch */
    width: fit-content; /* keeps it tight like Figma */
    justify-content: flex-start;
}

/* Bricks button defaults can add padding. Kill it for text/link buttons. */
body .brxe-button.bricks-button.c-btn.c-btn-text,
body .brxe-button.bricks-button.c-btn.c-btn-text.c-btn-link {
    padding: 0;
    min-height: 0;
    height: auto;
}

/* Force system gaps to win over Bricks :where(.brxe-div) gap */
body .l-stack {
    gap: var(--gap, var(--uw-space-24));
}

/* Force section vertical padding to win over Bricks defaults */
body .brxe-section.l-section,
body .l-section {
    padding-block: var(
        --section-pad,
        var(--section-space-m, var(--uw-space-96))
    );
}

/* =========================================================
   Datasheets / Product Card (Query-loop safe)
   Uses existing system: c-card + u-border-grad + c-btn
========================================================= */

.c-ds-card {
    height: 100%; /* helps equal-height cards in grid */
}

.c-ds-card__body {
    /* set component rhythm from one place (no v-gap needed) */
    --gap: var(--uw-space-16);
}

/* Icon sizing (matches the 48px icons in design) */
.c-ds-card__icon {
    width: 48px;
    height: 48px;
    display: block;
}

/* Ensure any editor-generated paragraphs don't add extra height */
.c-ds-card__desc,
.c-ds-card__desc p {
    margin: 0;
}

/* CTA sits left and sizes to content (not full width) */
.c-ds-card__cta {
    align-self: flex-start;
    width: fit-content;
}

/* Arrow follows button color (works even if SVG path had a hard fill) */
.c-ds-card__cta svg path {
    fill: currentColor;
}

/* =========================================================
   Product tile card (image + title + CTA)
========================================================= */
.c-prod-card__row {
    align-items: center; /* keeps image + text vertically aligned */
}

.c-prod-card__img {
    width: 108px;
    height: 108px;
    flex: 0 0 auto;
    object-fit: contain;
    display: block;
}

/* keep the CTA snug and left-aligned */
.c-prod-card__cta {
    align-self: flex-start;
    width: fit-content;
}

/* make arrow follow link color even if SVG has inline fills elsewhere */
.c-prod-card__cta svg path {
    fill: currentColor;
}

/* No-radius utility (for link-like CTAs) */
.u-radius-0 {
    border-radius: 0;
}
.u-radius-4 {
    border-radius: 4px;
}
.u-radius-5 {
    border-radius: 5px;
}
.u-radius-8 {
    border-radius: 8px;
}
.u-radius-12 {
    border-radius: 12px;
}
.u-radius-24 {
    border-radius: 24px;
}

/* Ensure Bricks doesn't re-inject background/border for text buttons */
body .brxe-button.bricks-button.c-btn.c-btn-text {
    background: transparent;
    border-color: transparent;
}

/* Product tile cards: no forced minimum height */
.c-card--auto-h {
    min-height: 0;
}

/* =========================================================
   Partner Card (query-loop)
   Matches Figma: padding 12, gap 16, frame 200h, radius 12/8
========================================================= */

.c-partner-card {
    min-height: 0;
} /* overrides .c-card min-height when needed */

.c-partner-card__body {
    --gap: 16px; /* works with your body .l-stack gap override */
}

.c-partner-card__frame {
    height: 200px;
    width: 100%;
    border-radius: 8px;
    background: #004280; /* from Figma */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo inside the frame */
.c-partner-card__logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* CTA: white, no background, tight to content */
.c-partner-card__cta {
    align-self: flex-start;
    width: fit-content;
    color: var(--G50);
}

/* Ensure arrow inherits CTA color */
.c-partner-card__cta svg path {
    fill: currentColor;
}

/* If Bricks wraps text in <p>, remove margins so heights stay consistent */
.c-partner-card__body p {
    margin: 0;
}

/* Optional: fixed card height like Figma (desktop/tablet only) */
@media (min-width: 768px) {
    .c-partner-card {
        height: 464px;
    }
}

/* partner CTA: white */
.c-partner-card__cta {
    color: var(--G50);
}
.c-partner-card__cta svg path {
    fill: currentColor;
}

/* =========================================================
   CTA Banner (matches Banner.pdf)
========================================================= */
.c-banner {
    position: relative;
    border-radius: var(--uw-radius-24);
    padding: var(--uw-space-64);
    overflow: hidden;

    background:
        radial-gradient(
            800px 450px at 18% 20%,
            rgba(27, 215, 97, 0.22) 0%,
            rgba(27, 215, 97, 0) 60%
        ),
        radial-gradient(
            900px 520px at 82% 30%,
            rgba(27, 215, 97, 0.18) 0%,
            rgba(27, 215, 97, 0) 55%
        ),
        linear-gradient(90deg, var(--G800) 0%, #0f2617 65%, #0f3a1e 100%);
}

.c-banner::before {
    content: '';
    position: absolute;
    inset: -10%;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;

    background:
        radial-gradient(
            800px 450px at 18% 20%,
            rgba(27, 215, 97, 0.3) 0%,
            rgba(27, 215, 97, 0) 60%
        ),
        radial-gradient(
            900px 520px at 82% 30%,
            rgba(27, 215, 97, 0.24) 0%,
            rgba(27, 215, 97, 0) 55%
        ),
        linear-gradient(90deg, var(--G800) 0%, #0f2617 65%, #0f3a1e 100%);

    opacity: 0.9;
    transform-origin: center;
    animation: uwBannerGradientDrift 10s ease-in-out infinite alternate;
    will-change: transform;
}

.c-banner > * {
    position: relative;
    z-index: 1;
}

@keyframes uwBannerGradientDrift {
    0% {
        transform: translateX(-6%) translateY(-3%) scale(1.08);
    }
    100% {
        transform: translateX(6%) translateY(3%) scale(1.14);
    }
}

/* Green headline like the PDF */
.c-banner .brxe-heading {
    color: var(--P700);
}

/* Body stays readable */
.c-banner .brxe-text-basic {
    color: var(--G50);
}

.c-banner__media {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.c-banner__img {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
}

@media (max-width: 767px) {
    .c-banner {
        padding: var(--uw-space-24);
    }
    .c-banner__media {
        justify-content: center;
    }
}

/* =========================================================
   FAQ (Bricks nested accordion)
   Hook: .c-faq on the accordion element
========================================================= */

.c-faq {
    width: 100%;
}

/* each accordion item wrapper */
.c-faq .listening {
    border-bottom: 1px solid var(--G600);
}

/* clickable title row */
.c-faq .accordion-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uw-space-24);

    padding-block: var(--uw-space-24);
    padding-inline: 0;

    background: transparent;
}

/* title styling */
.c-faq .accordion-title-wrapper .brxe-heading {
    margin: 0;
    font-weight: var(--uw-fw-600);
}

/* plus icon */
.c-faq .accordion-title-wrapper svg {
    flex: 0 0 auto;
    transition: transform 0.18s ease;
}

/* open state = turn + into x (rotate 45deg) */
.c-faq .accordion-title-wrapper[aria-expanded='true'] svg {
    transform: rotate(45deg);
}

/* content spacing */
.c-faq .accordion-content-wrapper {
    padding: 0 0 var(--uw-space-24) 0;
    background: transparent;
}

.c-faq .accordion-content-wrapper .brxe-text p {
    margin: 0;
    color: var(--G100);
}

/* FAQ spacing fix: 8px between title and content */
.c-faq .accordion-title-wrapper {
    padding-top: var(--uw-space-24);
    padding-bottom: var(--uw-space-24);
}

/* When open: keep 24px top, reduce bottom to 8px */
.c-faq .accordion-title-wrapper[aria-expanded='true'] {
    padding-bottom: var(--uw-space-8);
}

/* Content: add 8px breathing room from title, keep 24px at bottom */
.c-faq .accordion-content-wrapper {
    padding-top: var(--uw-space-8);
    padding-bottom: var(--uw-space-24);
}

/* =========================================================
   ADD-ON: Utilities needed for new templates
   (append at bottom of locked CSS)
========================================================= */

/* Button min-width utility */
.u-minw-178 {
    min-width: 178px;
}

/* Card modifier: remove c-card min-height when not desired */
.c-card--no-minh {
    min-height: 0;
}

/* =========================================================
   Certifications card (matches Figma layout)
   - Total height: 568
   - Media: 200 (logo band)
   - Body padding already from .c-card__body (24 desktop / 16 mobile)
   - Internal body spacing handled by l-stack + v-gap-16
========================================================= */
.c-cert-card {
    height: 568px;
}

/* Top media band */
.c-cert-card__media {
    height: 200px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CTA: lock to content, left aligned, Figma height */
.c-cert-card__cta {
    height: 24px;
    align-self: flex-start;
    width: fit-content;
    justify-content: flex-start;
}

/* Bricks can sneak padding into “button” elements: hard stop for text buttons */
body .brxe-button.c-btn.c-btn-text {
    padding: 0;
    min-height: 0;
    height: auto;
}

/* =========================================================
   CERTIFICATIONS CARD (matches Figma)
   - Card: fixed height 568
   - Media band: 200px, no padding (frame image fills it)
   - Body: fills remaining height
   - CTA: pinned to bottom
========================================================= */

/* Text buttons should not inherit pill radius */
.c-btn.c-btn-text {
    border-radius: 0;
}

/* The certification card */
.c-cert-card {
    height: 568px; /* all 3 equal height */
    display: flex; /* make card a flex column */
    flex-direction: column;
}

/* Media band */
.c-cert-card__media {
    height: 200px;
    padding: 0; /* IMPORTANT: no padding for frame images */
    overflow: hidden;
}

/* Frame image fills the band */
.c-cert-card__media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* safe even if image ratios vary */
    object-position: center;
    border-radius: 12px 12px 0 0px;
}

/* Body fills remaining height */
.c-cert-card .c-card__body {
    flex: 1; /* takes remaining space under media */
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* Let description be the flexible area */
.c-cert-card__desc {
    flex: 1;
}

/* CTA pinned to bottom-left */
.c-cert-card__cta {
    margin-top: auto; /* pushes CTA to bottom */
    align-self: flex-start;
    color: var(--G50); /* white text like Figma */
}

/* Make svg follow text color (optional but recommended) */
.c-cert-card__cta svg,
.c-cert-card__cta svg path {
    fill: currentColor;
}

/* =========================================================
   Cert card CTA: no border + left aligned content
   (Overrides base .c-btn centering + 1px border)
========================================================= */
body .c-cert-card__cta.c-btn,
body .brxe-button.c-cert-card__cta.c-btn {
    justify-content: flex-end; /* not centered */
    border: 0; /* kill the 1px */
    padding: 0; /* keep it “link” style */
    border-radius: 0; /* no pill shape */
    background: transparent;
    min-height: 0;
    height: auto;
    width: fit-content; /* keeps it tight (min-width still applies) */
    align-self: flex-start; /* ensures it sits left in stacks */
}

/* =========================
   TEAM CARD (Figma)
   ========================= */

/* Card */
.c-team-card {
    position: relative;
    height: 348px; /* Figma */
    padding: var(--uw-space-8);
    border-radius: var(--uw-radius-12);
    overflow: hidden;
    display: flex;
    align-items: flex-end; /* meta sits at bottom */
    justify-content: flex-end;
    background: var(--G700); /* fallback if image fails */
}

/* Image becomes background */
.c-team-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Meta overlay */
.c-team-card__meta {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 66px; /* Figma */
    padding: var(--uw-space-8);
    border-radius: var(--uw-radius-12);
    background: rgba(18, 18, 18, 0.8); /* #121212 @ 80% */
    display: flex;
    align-items: start;
}

/* Your name/role stack gap = 4px (since v-gap-4 doesn’t exist) */
.c-team-card__text {
    --gap: var(--uw-space-4);
}

/* Typography (works with your existing text--600 / text--s usage) */
.c-team-card__meta .text--600 {
    font-weight: var(--uw-fw-600);
    color: var(--G50);
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
}

.c-team-card__meta .text--s {
    font-weight: 400;
    color: var(--G100);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
}

/* =========================================================
   Text Block (TOC + Content) – matches Text Block.pdf
   Left TOC + right content + bottom meta row
========================================================= */

/* Use existing l-split, but make it "TOC fixed / content fluid" on desktop */
@media (min-width: 992px) {
    .c-textblock {
        grid-template-columns: 280px minmax(0, 1fr);
        align-items: start;
    }
}

/* TOC column */
.c-textblock__toc {
    width: 100%;
}

@media (min-width: 992px) {
    .c-textblock__toc {
        position: sticky;
        top: var(--uw-space-128);
        align-self: start;
    }
}

/* Bricks TOC styling */
.c-textblock__toc .toc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-12);
}

.c-textblock__toc .toc-link {
    text-decoration: none;
    color: var(--G100);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
}

.c-textblock__toc .toc-link:hover {
    color: var(--G50);
}

.c-textblock__toc .toc-list-item.is-active-li > .toc-link,
.c-textblock__toc .toc-link.is-active-link {
    color: var(--P700);
    font-weight: var(--uw-fw-500);
}

/* Checklist list in the content area (title + description) */
.c-textblock .brxe-list.display--list-item {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-16);
}

.c-textblock .brxe-list.display--list-item > li {
    margin: 0;
    padding: 0;
}

.c-textblock .brxe-list.display--list-item > li .content {
    display: flex;
    align-items: center;
    gap: var(--uw-space-8);
}

.c-textblock .brxe-list.display--list-item > li .description {
    margin-top: var(--uw-space-8);
    margin-left: calc(20px + var(--uw-space-8));
}

/* Bottom meta row: "20 min read" + socials */
.c-textblock__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uw-space-24);
}

.c-textblock__meta .brxe-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Text Block split: 1/3 + 2/3 */
@media (min-width: 992px) {
    .c-textblock {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        align-items: start;
    }
}

/* Offset for anchor jumps inside the text block */
.c-textblock {
    --toc-offset: 200px;
}

.c-textblock__content :is(h2, h3, h4) {
    scroll-margin-top: var(--toc-offset);
}

/* =========================================================
   Text Block (TOC + Content)
   - Desktop: 1/3 + 2/3
   - TOC item gap: 12px
   - Sticky offset + scroll offset: 200px
========================================================= */

.c-textblock {
    --toc-offset: 200px;
}

/* 1/3 + 2/3 beats the default .l-split 1/1 */
@media (min-width: 992px) {
    .c-textblock.l-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        align-items: start;
    }
}

/* Sticky TOC, starting 200px from top */
@media (min-width: 992px) {
    .c-textblock__toc .brxe-post-toc {
        position: sticky;
        top: var(--toc-offset);
        max-height: calc(100vh - var(--toc-offset));
        overflow: auto;
    }
}

/* Clicking TOC: stop ~200px from top */
.c-textblock__content :is(h2, h3, h4) {
    scroll-margin-top: var(--toc-offset);
}

/* TOC list reset + 12px spacing */
.c-textblock__toc .toc-list {
    margin: 0;
    padding: 0;
    list-style: none;

    display: flex;
    flex-direction: column;
    gap: var(--uw-space-12);
}

/* If a list item contains a nested toc-list, give it a 12px separation */
.c-textblock__toc .toc-list-item > .toc-list {
    margin-top: var(--uw-space-12);
    padding-left: var(--uw-space-12); /* optional indent for H4 */
}

/* Link styling */
.c-textblock__toc .toc-link {
    text-decoration: none;
    color: var(--G50);
}

.c-textblock__toc .toc-link:hover {
    color: var(--P700);
}

/* Active */
.c-textblock__toc .toc-link.is-active-link {
    color: var(--P700);
}

/* =========================================================
   Blog section + blog card (component)
   FINAL (no duplicates)
   - Matches Blog.pdf
   - 2-col grid on desktop, 1-col on mobile (via l-grid-fixed + v-cols-2)
   - Media always shows (no absolute positioning needed)
========================================================= */

/* Header */
.c-blog__header {
    align-items: center;
    text-align: center;
}

/* “See All →” behaves like a link (NOT a button) */
body .c-blog__seeall {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--uw-space-8);

    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;

    color: var(--G50);
    text-decoration: none;

    width: fit-content;
    height: auto;
    min-height: 0;

    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
    font-weight: var(--uw-fw-500);
}
body .c-blog__seeall:hover {
    color: var(--G200);
}
body .c-blog__seeall svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Grid wrapper */
.c-blog__grid {
    width: 100%;
}

/* Card shell */
.c-blog-card {
    background: var(--G700);
    border-radius: var(--uw-radius-12);
    padding: var(--uw-space-12);

    display: flex;
    flex-direction: column;
    gap: var(--uw-space-12);

    text-decoration: none;
    color: inherit;

    position: relative; /* needed for u-border-grad */
    overflow: hidden; /* keeps corners clean */
}

/* Equal card heights on tablet/desktop (Figma: 391px) */
@media (min-width: 768px) {
    .c-blog-card {
        height: 391px;
    }
}

/* Media frame (Figma: 436x237 inside the 12px padded card) */
.c-blog-card__media {
    position: relative;
    height: 237px;
    border-radius: var(--uw-radius-8);
    overflow: hidden;
    padding: 0;

    /* if Bricks ever uses background-image here */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    background-color: var(--G600); /* fallback */
}

/* Image: keep it IN FLOW so it always shows */
.c-blog-card__media > img,
.c-blog-card__media .brxe-image,
.c-blog-card__img {
    width: 436px;
    height: 100%;
    max-width: none;
    display: block;

    object-fit: cover;
    object-position: center;
}

/* Optional tag pill (inside media, top-left) */
.c-blog-card__tag {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 2px 8px;
    height: 28px;

    border-radius: var(--uw-radius-pill);
    background: var(--tag-bg, var(--P200));
    color: var(--tag-fg, var(--P900));

    font-weight: var(--uw-fw-600);
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
    white-space: nowrap;
}

/* Variable tag variants (vars only) */
.v-tag--whitepaper {
    --tag-bg: var(--P200);
    --tag-fg: var(--P900);
}
.v-tag--news {
    --tag-bg: var(--R100);
    --tag-fg: var(--R800);
}

/* Body stack under media */
.c-blog-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-12);
    flex: 1;
    min-height: 0;
}

/* Remove default Bricks margins that can wreck vertical rhythm */
.c-blog-card__title,
.c-blog-card__date,
.c-blog-card__body .post-meta {
    margin: 0;
}

/* Date (your markup already has c-blog-card__date) */
.c-blog-card__date {
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    color: var(--G200);
}

/* Title */
.c-blog-card__title {
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
    font-weight: var(--uw-fw-600);
    color: var(--G50);

    /* keep cards visually even with longer titles */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Author row (your markup uses .post-meta) pinned to bottom */
.c-blog-card__body .post-meta {
    margin-top: auto;
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    font-weight: var(--uw-fw-500);
    color: var(--G100);
}

/* =========================================================
   CONTACT SECTION (c-contact)
   Matches Contact Us.pdf layout
========================================================= */

/* Split: make right column larger on desktop */
@media (min-width: 992px) {
    .c-contact.l-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
        align-items: start;
    }
}

/* Left column */
.c-contact__info .brxe-heading {
    text-align: left;
}
.c-contact__info .brxe-text-basic {
    text-align: left;
}

/* Contact list spacing + alignment */
.c-contact__list {
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-16);
    margin-top: var(--uw-space-8);
}
.c-contact__list .content {
    display: inline-flex;
    align-items: center;
    gap: var(--uw-space-12);
}
.c-contact__list .icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}
.c-contact__list a {
    color: inherit;
    text-decoration: none;
}
.c-contact__list a:hover {
    color: var(--G200);
}

/* =========================================================
   FORM (c-form) – 2 columns desktop, 1 column mobile
========================================================= */
.c-form {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--uw-space-24);
}

@media (min-width: 768px) {
    .c-form {
        grid-template-columns: 1fr 1fr;
    }
}

/* Each form-group behaves as a grid item */
.c-form .form-group {
    margin: 0; /* kill any theme spacing */
}

/* Make textarea row full width (modern browsers) */
@supports (selector(:has(*))) {
    .c-form .form-group:has(textarea) {
        grid-column: 1 / -1;
    }
}

/* Submit row full width */
.c-form .submit-button-wrapper {
    grid-column: 1 / -1;
    margin-top: var(--uw-space-24);
    height: 48px;
}

/* Labels */
.c-form label {
    display: block;
    margin-bottom: var(--uw-space-8);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    color: var(--G200);
    font-weight: 400;
}

/* Inputs + textarea */
.c-form input,
.c-form textarea {
    width: 100%;
    background: var(--G700);
    color: var(--G50);

    border: 1px solid var(--G600);
    border-radius: var(--uw-radius-12);

    padding: var(--uw-space-16);
    outline: none;
    box-shadow: none;
}

.c-form textarea {
    min-height: 200px;
    resize: vertical;
}

/* Placeholder */
.c-form input::placeholder,
.c-form textarea::placeholder {
    color: var(--G400);
}

/* Focus */
.c-form input:focus,
.c-form textarea:focus {
    border-color: var(--P700);
    box-shadow: 0 0 0 2px rgba(27, 215, 97, 0.18);
}

/* Submit button (big green bar) */
.c-form button.bricks-button {
    width: 100%;
    min-height: 48px;
    max-height: 48px;
    border: 0; /* no 1px border */
    border-radius: var(--uw-radius-pill);

    background: var(--P700);
    color: var(--G800);

    font-weight: var(--uw-fw-500);
    font-size: var(--btn-font-size);
    line-height: var(--btn-line-height);

    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.c-form button.bricks-button:hover {
    background: var(--P500);
}

/* =========================================================
   Contact section (component) – matches Contact Us.pdf
   - 1/3 info + 2/3 form (desktop)
   - form: 2-col grid, textarea full width, big pill submit
========================================================= */

/* --- Layout split: 1/3 + 2/3 --- */
@media (min-width: 992px) {
    body .c-contact {
        display: grid; /* override any flex from l-split */
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: var(--uw-space-96); /* feels like the PDF spacing */
        align-items: start;
    }
}

/* Mobile: stack */
@media (max-width: 991px) {
    body .c-contact {
        display: flex;
        flex-direction: column;
        gap: var(--uw-space-48);
    }
}

/* --- Left column spacing + contact list --- */
body .c-contact__info {
    align-items: flex-start;
}

body .c-contact__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-8);
}

body .c-contact__list .content {
    display: flex;
    align-items: center;
    gap: var(--uw-space-16);
}

body .c-contact__list .icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
}

body .c-contact__list a {
    color: var(--G50);
    text-decoration: none;
}

body .c-contact__list a:hover {
    color: var(--G200);
}

/* --- Form grid --- */
body .c-contact__form-el {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--uw-space-24);
    width: 100%;
    align-items: start;
}

/* Make each form-group “grid item” behave nicely */
body .c-contact__form-el .form-group {
    margin: 0; /* kill any theme margins */
}

/* Textarea group full width */
body .c-contact__form-el .form-group:has(textarea),
body .c-contact__form-el .form-group.submit-button-wrapper {
    grid-column: 1 / -1;
}

/* --- Labels (PDF style: uppercase, subtle) --- */
body .c-contact__form-el label {
    display: block;
    margin: 0 0 var(--uw-space-8) 0;
    color: var(--G200);
    font-weight: var(--uw-fw-500);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    letter-spacing: 0.08em;
}

/* --- Inputs + textarea (dark fields, rounded, bordered) --- */
body .c-contact__form-el input,
body .c-contact__form-el textarea {
    width: 100%;
    background: var(--G700);
    color: var(--G50);
    border: 1px solid var(--G600);
    border-radius: var(--uw-radius-12);
    padding: 14px 16px;
    outline: none;
}

/* Input height like the PDF boxes */
body .c-contact__form-el input {
    min-height: 52px;
}

/* Textarea size like the PDF */
body .c-contact__form-el textarea {
    min-height: 120px;
    padding: 12px;
    resize: vertical;
}

/* Placeholder tone */
body .c-contact__form-el input::placeholder,
body .c-contact__form-el textarea::placeholder {
    color: var(--G400);
}

/* Focus */
body .c-contact__form-el input:focus,
body .c-contact__form-el textarea:focus {
    border-color: var(--G500);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--P700) 35%, transparent);
}

/* --- Submit button: full-width green pill --- */
body .c-contact__form-el .submit-button-wrapper button.bricks-button {
    width: 100%;
    min-height: 72px;
    border: 0;
    border-radius: var(--uw-radius-pill);
    background: var(--P700);
    color: var(--G800);
    font-weight: var(--uw-fw-500);
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--uw-space-24);
}

body .c-contact__form-el .submit-button-wrapper button.bricks-button:hover {
    background: var(--P500);
}

/* =========================================================
   Contact section (PDF match)
   Hooks: .c-contact + .c-form--contact
========================================================= */

/* 2-col layout + ratio */
body .c-contact {
    width: 100%;
    display: grid;
    gap: var(--gap, var(--uw-space-48));
    align-items: start;
}

@media (min-width: 992px) {
    body .c-contact {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); /* info | form */
    }
}

/* Contact list */
body .c-contact__list,
body .c-contact__list .brxe-list {
    margin: 0;
    padding: 0;
}

body .c-contact__list li .content {
    display: flex;
    align-items: center;
    gap: var(--uw-space-12);
}

body .c-contact__list .icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: var(--G200);
}

body .c-contact__list .icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

body .c-contact__list a {
    color: var(--G50);
    text-decoration: none;
}
body .c-contact__list a:hover {
    color: var(--G200);
}

/* =========================================================
   Bricks form override (kills flex + per-field padding/width)
========================================================= */

body form.brxe-form.c-form--contact {
    width: 100%;
    display: grid; /* overrides Bricks flex */
    grid-template-columns: 1fr;
    gap: var(--uw-space-24);
    align-items: start;
}

@media (min-width: 768px) {
    body form.brxe-form.c-form--contact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Each field group becomes a small stack */
body .c-contact form.brxe-form.c-form--contact .form-group {
    margin: 0;
    padding: 0; /* kills Bricks “0 0 20px” padding */
    width: auto; /* kills old “width:50%” hacks */
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-8); /* label -> input gap */
}

/* Textarea row spans full width */
body .c-contact form.brxe-form.c-form--contact .form-group:has(textarea),
body .c-contact form.brxe-form.c-form--contact .submit-button-wrapper {
    grid-column: 1 / -1;
}

/* Labels (uppercase like the PDF) */
body .c-contact form.brxe-form.c-form--contact label {
    margin: 0;
    font-weight: 400;
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    color: var(--G200);
    letter-spacing: 0.08em;
    text-transform: none;
}

/* Inputs */
body .c-contact form.brxe-form.c-form--contact input,
body .c-contact form.brxe-form.c-form--contact textarea {
    width: 100%;
    border-radius: var(--uw-radius-12);
    border: 1px solid var(--G600);
    color: var(--G50);

    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    background-color: var(--G800);

    padding: 8px 12px;
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
}

body .c-contact form.brxe-form.c-form--contact input::placeholder,
body .c-contact form.brxe-form.c-form--contact textarea::placeholder {
    color: var(--G500);
}

body .c-contact form.brxe-form.c-form--contact input:focus,
body .c-contact form.brxe-form.c-form--contact textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--P700) 45%, transparent);
    outline-offset: 2px;
}

/* Textarea sizing (PDF has a big box) */
body .c-contact form.brxe-form.c-form--contact textarea {
    min-height: 120px;
    resize: vertical;
}

body .c-contact form.brxe-form.c-form--contact button[type='submit'] {
    width: 100%;
    min-height: 48px;
    border-radius: var(--uw-radius-pill);
    border: 0; /* no 1px border */
    background: var(--P700);
    color: var(--G800);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-weight: var(--uw-fw-500);
}
body .c-contact form.brxe-form.c-form--contact button[type='submit']:hover {
    background: var(--P500);
}

/* =========================================================
   Compare Plans (c-compare)
   - Append-only component styles
   - Uses existing tokens: --G*, --P*, --R*, --uw-space-*
========================================================= */

.c-compare__table {
    background: var(--G800);
    border: 1px solid var(--G600);
    border-radius: var(--radius, var(--uw-radius-24));
    overflow-x: auto; /* mobile: allow horizontal scroll */
    -webkit-overflow-scrolling: touch;
}

/* Inner sets the minimum “table width” so scroll actually happens */
.c-compare__inner {
    min-width: 820px; /* tweak if you want tighter */
}

/* Each row is a 4-col grid */
.c-compare__row {
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) repeat(3, minmax(0, 1fr));
    align-items: center;
}

/* Row separators */
.c-compare__row + .c-compare__row {
    border-top: 1px solid var(--G600);
}

/* Cells */
.c-compare__cell {
    padding: var(--uw-space-16) var(--uw-space-24);
    min-width: 0;
}

.c-compare__cell--feature {
    text-align: left;
    font-weight: var(--uw-fw-600);
    color: var(--G50);
}

.c-compare__cell--plan {
    text-align: center;
    color: var(--G100);
}

/* Plan header stack */
.c-compare__planhead {
    align-items: center; /* centers text + button inside the cell */
}

.c-compare__planname {
    margin: 0;
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    font-weight: var(--uw-fw-600);
    color: var(--G50);
}

/* Icons */
.c-compare__icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    color: var(--G100); /* fallback */
}
.c-compare__icon--yes {
    color: var(--P700);
}
.c-compare__icon--no {
    color: var(--R700);
}

/* Vertical separators ONLY on compare rows (not header row) */
.c-compare__row:not(.c-compare__row--head) .c-compare__cell + .c-compare__cell {
    border-left: 1px solid var(--G600);
}

/* Slightly tighter padding on mobile (table still scrolls) */
@media (max-width: 767px) {
    .c-compare__cell {
        padding: var(--uw-space-12) var(--uw-space-16);
    }
}

@layer uw-vars {
    .v-btn-sm {
        --btn-py: 8px;
        --btn-px: 12px;
        --btn-font-size: var(--text-s);
        --btn-line-height: var(--text-s-line-height);
    }
  .v-tabs-tab-bg-700 {
    --tabs-tab-bg: var(--G700);
  }
  .v-tabs-tab-bg-800 {
    --tabs-tab-bg: var(--G800);
  }
}

/* =========================================================
   Success Stories
   - CSS aligned to current Bricks markup
   - Featured card + 3 supporting cards
========================================================= */

/* Intro area */
.c-success-story-card-grid{
  width: 100%;
}

.c-success-story-card-grid > *{
  min-width: 0;
}

/* Top intro CTA */
.brxe-rntyth > .c-btn.c-btn-text{
  align-self: center;
  width: fit-content;
}

/* =========================================================
   Featured card
========================================================= */

.c-success-story-card--featured{
  min-height: 0;
  padding: var(--uw-space-24);
}

.c-success-story-card--featured > .l-split{
  align-items: stretch;
}

@media (min-width: 992px){
  .c-success-story-card--featured > .l-split{
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
    gap: var(--uw-space-24);
  }
}

/* Featured card inner content column */
.c-success-story-card--featured .c-success-story-card__content{
  min-width: 0;
  justify-content: space-between;
  height: 100%;
  text-align: left;
  align-items: flex-start;
}

/* The nested copy stack */
.c-success-story-card--featured .c-success-story-card__content > .l-stack{
  min-width: 0;
  text-align: left;
  align-items: flex-start;
}

/* Featured logo */
.c-success-story-card--featured .c-success-story-card__content > .l-stack > img{
  display: block;
  width: auto;
  max-width: 132px;
  height: auto;
  max-height: 48px;
  border-radius: 0;
}

/* Featured title */
.c-success-story-card--featured h4{
  margin: 0;
  text-align: left;
}

/* Featured description */
.c-success-story-card--featured .u-text-muted,
.c-success-story-card--featured .u-text-muted p{
  margin: 0;
  color: var(--G100);
  text-align: left;
}

/* Featured CTA */
.c-success-story-card--featured .c-btn.c-btn-text{
  align-self: flex-start;
  width: fit-content;
  justify-content: flex-start;
  color: var(--G50);
}

.c-success-story-card--featured .c-btn.c-btn-text:hover{
  color: var(--G200);
}

.c-success-story-card--featured .c-btn svg,
.c-success-story-card--featured .c-btn svg path{
  fill: currentColor;
}

/* Featured media */
.c-success-story-card--featured .c-success-story-card__media{
  width: 100%;
  min-width: 0;
  height: 100%;
}

.c-success-story-card--featured .c-success-story-card__media > img,
.c-success-story-card--featured .c-success-story-card__media .brxe-image,
.c-success-story-card--featured .c-success-story-card__media picture img{
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--uw-radius-12);
}

/* =========================================================
   Supporting cards
========================================================= */

.c-success-story-card-grid .c-success-story-card{
  min-height: 0;
  height: 100%;
}

@media (min-width: 768px){
  .c-success-story-card-grid .c-success-story-card{
    min-height: 192px;
  }
}

.c-success-story-card-grid .c-card__body{
  padding: var(--uw-space-16);
  min-height: 100%;
  justify-content: space-between;
  text-align: left;
  align-items: flex-start;
}

/* top stack in each small card */
.c-success-story-card-grid .c-card__body > .l-stack{
  min-width: 0;
  text-align: left;
  align-items: flex-start;
}

/* small card logos */
.c-success-story-card-grid .c-card__body > .l-stack > img{
  display: block;
  width: auto;
  max-width: 116px;
  height: auto;
  max-height: 40px;
  border-radius: 0;
}

/* small card titles */
.c-success-story-card-grid h4{
  margin: 0;
  text-align: left;
}

/* small card CTA */
.c-success-story-card-grid .c-btn.c-btn-text{
  align-self: flex-start;
  width: fit-content;
  justify-content: flex-start;
  color: var(--G50);
}

.c-success-story-card-grid .c-btn.c-btn-text:hover{
  color: var(--G200);
}

.c-success-story-card-grid .c-btn svg,
.c-success-story-card-grid .c-btn svg path{
  fill: currentColor;
}

/* =========================================================
   Left-align safety
   Prevent parent centering contexts from leaking in
========================================================= */

.c-success-story-card,
.c-success-story-card .c-card__body,
.c-success-story-card .l-stack,
.c-success-story-card h4,
.c-success-story-card .brxe-text-basic{
  text-align: left;
}

.c-success-story-card .c-card__body,
.c-success-story-card .l-stack{
  align-items: flex-start;
}

/* =========================================================
   Our Story (c-story + c-timeline) – FINAL (single block)
========================================================= */

/* =========================================================
   Our Story (c-story + c-timeline) – fixed
   Root fix: re-clamp timeline wrapper to 716px
========================================================= */

.c-story {
  background: radial-gradient(
    120% 90% at 50% 0%,
    var(--G700) 0%,
    var(--G800) 65%
  );
}

/* Timeline wrapper */
body .c-story .brxe-container.c-timeline,
body .c-story .c-timeline {
  position: relative;
  width: 100%;
  max-width: 716px;
  margin-inline: auto;
  padding-top: 80px;
  align-items: stretch;

  /* spacing between items */
  gap: 80px;

  /* geometry (Figma) */
  --tl-dot: 16px;
  --tl-gap-content: 37px;
  --tl-year-pad: 91px;
  --tl-line: 64px;
  --tl-gap-dot-line: 11px;
}

/* Center dashed line */
.c-story .c-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-0.5px);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--G50) 0 12px,
    transparent 12px 24px
  );
}

/* Each item: two halves */
.c-story .c-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  width: 100%;
}

/* YEAR default = left side */
.c-story .c-timeline__year {
  grid-column: 1;
  justify-self: end;
  width: fit-content;
  padding-right: var(--tl-year-pad);
  text-align: right;
}

/* Force year to green */
.c-story .c-timeline__year > .brxe-heading,
.c-story .c-timeline__year > h1,
.c-story .c-timeline__year > h2,
.c-story .c-timeline__year > h3,
.c-story .c-timeline__year > h4 {
  color: var(--P700);
  font-size: var(--h3);
  line-height: var(--h3-line-height);
  font-weight: var(--uw-fw-600);
  margin: 0;
}

/* CONTENT default = right side */
.c-story .c-timeline__content {
  grid-column: 2;
  justify-self: start;
  width: min(100%, 314px);
  min-width: 0;
  padding-left: calc((var(--tl-dot) / 2) + var(--tl-gap-content));
  text-align: left;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--uw-space-8);
}

.c-story .c-timeline__title {
  width: 100%;
  margin: 0;
  font-size: var(--h3);
  line-height: var(--h3-line-height);
  font-weight: var(--uw-fw-600);
  color: var(--G50);
  text-align: left;
}

.c-story .c-timeline__desc {
  width: 100%;
  margin: 0;
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: 400;
  color: var(--G100);
  text-align: left;
}

/* DOT: centered on timeline */
.c-story .c-timeline__dot {
  grid-column: 1 / -1;
  grid-row: 1;
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--tl-dot);
  height: var(--tl-dot);
  border-radius: 999px;
  background: var(--P700);
  transform: translateX(-50%);
  margin-top: calc((var(--h3-line-height) - var(--tl-dot)) / 2);
  z-index: 1;
}

/* odd rows: connector to the left */
.c-story .c-timeline__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + var(--tl-gap-dot-line));
  width: var(--tl-line);
  border-top: 1px solid var(--G50);
  transform: translateY(-50%);
}

.c-story .c-timeline__dot::after {
  content: "";
  display: none;
}

/* EVEN rows: swap sides */
.c-story .c-timeline__item:nth-child(even) .c-timeline__year {
  grid-column: 2;
  justify-self: start;
  padding-right: 0;
  padding-left: var(--tl-year-pad);
  text-align: left;
}

.c-story .c-timeline__item:nth-child(even) .c-timeline__content {
  grid-column: 1;
  justify-self: end;
  width: min(100%, 314px);
  min-width: 0;
  padding-left: 0;
  padding-right: calc((var(--tl-dot) / 2) + var(--tl-gap-content));
  text-align: right;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  gap: var(--uw-space-8);
}

.c-story .c-timeline__item:nth-child(even) .c-timeline__title,
.c-story .c-timeline__item:nth-child(even) .c-timeline__desc {
  text-align: right;
}

/* even rows: connector to the right */
.c-story .c-timeline__item:nth-child(even) .c-timeline__dot::before {
  display: none;
}

.c-story .c-timeline__item:nth-child(even) .c-timeline__dot::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: calc(100% + var(--tl-gap-dot-line));
  width: var(--tl-line);
  border-top: 1px solid var(--G50);
  transform: translateY(-50%);
}

/* Timeline content must start at the top of its cell */
.c-story .c-timeline__content {
  justify-content: flex-start;
}

/* Keep the mirrored alignment for even rows */
.c-story .c-timeline__item:nth-child(even) .c-timeline__content {
  justify-content: flex-start;
  align-items: flex-end;
}

/* =========================================================
   Calculator (c-calc)
   Component CSS (global stylesheet, append-only)
========================================================= */

.c-calc {
    /* optional background band */
    background: var(--G800);
}

/* Layout: left panel + right results */
.c-calc__layout {
    align-items: start;
    background: var(--G700);
    border-radius: var(--uw-radius-24, 24px);
}

.c-calc__section {
    min-width: 100%;
}

/* Panels */
.c-calc__panel {
    padding: var(--uw-space-24, 24px);
}

.c-calc__results {
    background: var(--G600);
    border-radius: var(--uw-radius-24, 24px);
    padding: var(--uw-space-24, 24px);
}

/* Generic states (scoped to calculator) */
.c-calc .is-hidden {
    display: none;
}
.c-calc .is-disabled {
    opacity: 0.55;
    pointer-events: none;
}
.c-calc .is-collapsed .c-calc__acc-body,
.c-calc .is-collapsed .c-calc__personal-body {
    display: none;
}

/* Section label */
.c-calc__label {
    font-weight: var(--uw-fw-600, 600);
    color: var(--G50);
    margin-bottom: var(--uw-space-12, 12px);
}

.c-calc__personal-body div {
    margin-bottom: 8px;
}

/* Toggle groups */
.c-calc__toggle,
.c-calc__deck-toggle {
    display: flex;
    gap: var(--uw-space-12, 12px);
    padding-bottom: var(--uw-space-16, 16px);
}

/* Make toggle pills match design (active green, inactive dark pill) */
.c-calc__toggle-btn.c-btn,
.c-calc__deck-btn.c-btn {
    /* overwrite any Bricks helper backgrounds */
    background: var(--G600);
    color: var(--G50);
    border: 1px solid transparent;
    border-radius: var(--uw-radius-pill, 999px);
    padding: 8px 16px;
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
}

/* Active state = green pill */
.c-calc__toggle-btn.is-active,
.c-calc__deck-btn.is-active {
    background: var(--P700);
    color: var(--G800);
}

/* If Bricks forces background via helper classes, this wins */
.c-calc__toggle .bricks-background-primary,
.c-calc__deck-toggle .bricks-background-primary {
    background: inherit;
}

/* Dividers between accordion sections */
.c-calc__section + .c-calc__rail,
.c-calc__rail + .c-calc__bus,
.c-calc__bus + .c-calc__personal {
    margin-top: var(--uw-space-16, 16px);
}

/* Accordion head */
.c-calc__acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--G50);
    font-weight: var(--uw-fw-600, 600);
    padding: var(--uw-space-16, 16px) 0;
    border-top: 1px solid var(--G600);
}

/* Accordion body */
.c-calc__acc-body {
    padding-bottom: var(--uw-space-16, 16px);
}

/* Inputs grid */
.c-calc__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--uw-space-16, 16px);
    margin-top: var(--uw-space-16, 16px);
}

/* Field label */
.c-calc__field > .brxe-text-basic {
    color: var(--G200);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    margin-bottom: var(--uw-space-8, 8px);
}

/* Inputs */
.c-calc__input {
    width: 100%;
    background: transparent;
    border: 1px solid var(--G600);
    border-radius: var(--uw-radius-12, 12px);
    padding: 12px 12px;
    color: var(--G50);
    outline: none;
}

.c-calc__input::placeholder {
    color: var(--G200);
}

/* Next + Calculate buttons (big white pill) */
.c-calc__next.c-btn,
.c-calc__calculate.c-btn {
    width: 100%;
    margin-top: var(--uw-space-16, 16px);

    /* make it the big pill style shown */
    background: var(--G50);
    color: var(--G800);
    border-radius: var(--uw-radius-pill, 999px);
    padding: 12px 16px;
    justify-content: center;
}

/* Personal info block */
.c-calc__personal {
    margin-top: var(--uw-space-16, 16px);
    padding-top: var(--uw-space-16, 16px);
}

.c-calc__personal > .brxe-text-basic {
    color: var(--G200);
    font-weight: var(--uw-fw-600, 600);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.c-calc__personal-body {
    margin-top: var(--uw-space-16, 16px);
    display: grid;
    gap: var(--uw-space-16, 16px);
}

/* ---------------------------------------------------------
   Right side (cards + inquire) for when you build it
--------------------------------------------------------- */

.c-calc__cards {
    display: grid;
    gap: var(--uw-space-16, 16px);
    min-width: 100%;
}

.c-calc__card {
    background: var(--G800);
    border: 1px solid var(--G600);
    border-radius: var(--uw-radius-24, 24px);
    padding: var(--uw-space-16, 16px);
    min-height: 192px;
}

.c-calc__card.is-featured {
    border-color: var(--P700);
}

/* top row */
.c-calc__cardhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.c-calc__cardtitle {
    font-weight: var(--uw-fw-600, 600);
    color: var(--G50);
}

.c-calc__card[data-package='premium'],
.c-calc__card[data-package='hardware'] {
    border-color: var(--P700);
}

.c-calc__badge {
    padding: 6px 12px;
    border-radius: var(--uw-radius-pill, 999px);
    background: var(--G600);
    color: var(--G50);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
}

.c-calc__badge.is-premium {
    background: var(--P700);
    color: var(--G800);
}

.c-calc__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--uw-space-16, 16px);
    width: 100%;
}

.c-calc__metriclabel {
    color: var(--G200);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    margin-bottom: 2px;
}

.c-calc__metricvalue {
    color: var(--G50);
    font-weight: var(--uw-fw-600, 600);
    font-size: 32px;
    line-height: 40px;
}

.c-calc__breakdown {
    color: var(--G200);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    text-decoration: underline;
    cursor: pointer;
}

.c-calc__inquire.c-btn {
    width: 100%;
    margin-top: var(--uw-space-16, 16px);
    background: var(--P700);
    color: var(--G800);
    border-radius: var(--uw-radius-pill, 999px);
    padding: 14px 16px;
    justify-content: center;
}

/* Chevron styling + rotate when collapsed */
.c-calc__acc-head .brxe-icon {
    width: 20px;
    height: 20px;
    flex: none;
    transition: transform 0.18s ease;
}

/* When the section is collapsed, chevron points down (default) */
.c-calc .is-collapsed .c-calc__acc-head .brxe-icon {
    transform: rotate(0deg);
}

/* When expanded, point up */
.c-calc__personal:not(.is-collapsed) .c-calc__acc-head .brxe-icon {
    transform: rotate(180deg);
}

.c-calc__metrics .c-calc__breakdown {
    grid-column: 1 / -1;
    margin-top: var(--uw-space-16, 16px);
}

/* Calculator breakdown modal */
.c-calc__modal {
    position: relative;
}
.c-calc__modal.is-hidden {
    display: none;
}

.c-calc__modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
}

.c-calc__modal__panel {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100% - 32px));
    background: var(--G800);
    border: 1px solid var(--G600);
    border-radius: var(--uw-radius-24, 24px);
    padding: var(--uw-space-24, 24px);
    z-index: 9999;
}

.c-calc__modal__close {
    width: 100%;
    margin-bottom: var(--uw-space-16, 16px);
    background: var(--G600);
    border: 0;
    border-radius: var(--uw-radius-pill, 999px);
    color: var(--G50);
    padding: 10px 16px;
    cursor: pointer;
}

.c-calc__modal-title {
    font-weight: var(--uw-fw-600, 600);
    color: var(--G50);
    margin-bottom: 8px;
}
.c-calc__modal-sub {
    color: var(--G200);
    margin-bottom: 16px;
}

.c-calc__modal-list {
    margin: 0;
    padding-left: 18px;
    color: var(--G200);
}
.c-calc__modal-list li {
    margin: 8px 0;
}

/* Locked criteria summary (after Next) */
.c-calc__summary {
    margin-top: var(--uw-space-24, 24px);
    display: grid;
    gap: var(--uw-space-12, 12px);
}

.c-calc__summary-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
    color: var(--G200);
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
}

.c-calc__summary-row strong {
    color: var(--G50);
    font-weight: var(--uw-fw-600, 600);
}

/* Make the “selected pill” feel fixed */
.c-calc__deck-btn.is-static {
    pointer-events: none;
}

/* Personal summary (after Calculate) */
.c-calc__personal-summary {
    margin-top: var(--uw-space-24, 24px);
    display: grid;
    gap: var(--uw-space-12, 12px);
}

/* =========================================================
   Events section + Event card (component)
   Matches Events.pdf (2-up grid, fixed card height, CTA pinned)
========================================================= */

/* Grid: prevent 3 columns in 944 content width */
.c-events__grid,
.brxe-hhmcce.l-grid {
    width: 100%;
}

/* Event card shell */
.c-event-card {
    background: var(--G700);
    border-radius: var(--uw-radius-12);
    padding: var(--uw-space-12);
    min-height: 600px; /* protect against any .c-card min-height rules */
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-24);
    overflow: hidden;
}

/* Media frame (top) */
.c-event-card__media {
    position: relative;
    height: 237px; /* Figma */
    border-radius: var(--uw-radius-8);
    overflow: hidden;

    /* if Bricks applies bg-image to the wrapper */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    /* fallback */
    background-color: var(--G600);
}

/* If Bricks outputs an <img> inside the media wrapper */
.c-event-card__media > img,
.c-event-card__media .brxe-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
}

/* Body area: takes remaining height */
.c-event-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-24);
    flex: 1;
    min-height: 0;
}

/* Optional: tighten title + description block (your HTML uses v-gap-16 already) */
.c-event-card__body h4 {
    margin: 0;
}

/* Meta list spacing (PDF has tight 8px rows) */
.c-event-card__body .c-checklist,
.c-event-card__body .c-list {
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-0);
}

/* CTA pinned to bottom, outlined white (matches PDF button) */
.c-event-card__cta {
    margin-top: auto; /* push to bottom */
    align-self: flex-start; /* left aligned */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--uw-space-8);

    height: 48px;
    padding: 8px 16px;

    background: transparent;
    border: 1px solid var(--G50);
    border-radius: var(--uw-radius-pill);
    color: var(--G50);
    text-decoration: none;
}

/* Make sure no “button system” adds centering/full-width here */
.c-event-card__cta {
    width: fit-content;
}
.c-event-card__cta:hover {
    background: color-mix(in srgb, var(--G50) 10%, transparent);
}

/* Icon sizing */
.c-event-card__cta svg {
    width: 20px;
    height: 20px;
}

/* =========================================================
   Events card
   - Fixed 591px height (desktop)
   - CTA pinned to bottom
========================================================= */

.c-event-card {
    display: flex;
    flex-direction: column;
}

/* Figma height: apply on desktop/tablet, keep mobile flexible for now */
@media (min-width: 768px) {
    .c-event-card {
        height: 591px;
    }
}

/* Main content (media + text) takes remaining space */
.c-event-card__main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Push CTA to the bottom of the card */
.c-event-card__cta-wrap {
    margin-top: auto;
}

/* =========================================================
   Calculator – Price Breakdown Popup (c-calc__bd)
========================================================= */

.c-calc__bd.is-hidden {
    display: none;
}

.c-calc__bd-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
}

.c-calc__bd-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(584px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    overflow: auto;

    background: var(--G700);
    border-radius: 16px;
    padding: 24px;
    z-index: 9999;

    display: flex;
    flex-direction: column;
    gap: 24px;
}

.c-calc__bd-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.c-calc__bd-title {
    flex: 1;
    font-weight: var(--uw-fw-600, 600);
    font-size: 20px;
    line-height: 28px;
    color: var(--G50);
}

.c-calc__bd-close {
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: var(--G200);
    cursor: pointer;
    font-size: 20px;
    line-height: 24px;
    padding: 0;
}

.c-calc__bd-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.c-calc__bd-label {
    flex: 1;
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
    color: var(--G100);
}

.c-calc__bd-val {
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
    font-weight: var(--uw-fw-600, 600);
    color: var(--G50);
}

.c-calc__bd-divider {
    border-top: 1px solid var(--G600);
    margin: 24px 0;
}

.c-calc__bd-body {
    display: flex;
    flex-direction: column;
}

.c-calc__bd-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.c-calc__bd-tile {
    background: var(--G600);
    border-radius: 12px;
    padding: 12px;
    display: grid;
    gap: 8px;
}

.c-calc__bd-tlabel {
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
    color: var(--G100);
}

.c-calc__bd-tvalue {
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
    color: var(--G50);
}

.c-calc__bd-cta.c-btn {
    width: 268px;
    align-self: flex-end;
    margin-top: 24px;
}

/* =========================================================
   SUPPORT REQUEST
   consolidated clean version
   completed steps render in external summary stack
   no !important
========================================================= */

/* top alignment */
.c-support-request {
    align-items: flex-start;
}

.c-support-request__aside,
.c-support-request__main {
    min-width: 0;
    align-self: flex-start;
}

.c-support-request__panel {
    align-self: flex-start;
    margin-top: 0;
}

/* hide native step header */
.c-support-request__form .ff-step-header {
    display: none;
}

/* main stack */
.c-support-request__form .ff-step-body {
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-24);
}

/* completed cards stack */
.c-support-request__stack-complete {
    display: grid;
    gap: var(--uw-space-24);
}

.c-support-request__stack-complete:empty {
    display: none;
}

/* base step card */
.c-support-request__form .fluentform-step {
    position: relative;
    border-radius: var(--uw-radius-24);
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--G50) 3%, transparent) 0%,
            color-mix(in srgb, var(--G50) 6%, transparent) 50%,
            color-mix(in srgb, var(--G50) 3%, transparent) 100%
        ),
        var(--G800);
    overflow: hidden;
}

/* active step */
.c-support-request__form .c-support-request__step.is-active {
    display: block;
    padding: var(--uw-space-24);
    padding-top: calc(var(--uw-space-96) + var(--uw-space-24));
}

.c-support-request__form .c-support-request__step.is-active::before {
    content: attr(data-step-label);
    position: absolute;
    top: var(--uw-space-24);
    left: var(--uw-space-24);
    color: var(--P700);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.c-support-request__form .c-support-request__step.is-active::after {
    content: attr(data-step-title);
    position: absolute;
    top: calc(
        var(--uw-space-24) + var(--text-s-line-height) + var(--uw-space-8)
    );
    left: var(--uw-space-24);
    right: var(--uw-space-24);
    color: var(--G50);
    font-size: var(--h2);
    line-height: var(--h2-line-height);
    font-weight: var(--uw-fw-600);
}

/* future closed steps */
.c-support-request__form .c-support-request__step.is-future {
    display: block;
    min-height: calc(
        var(--uw-space-24) + var(--text-s-line-height) + var(--uw-space-8) +
            var(--text-m-line-height) + var(--uw-space-24)
    );
    pointer-events: none;
}

.c-support-request__form .c-support-request__step.is-future::before {
    content: attr(data-step-label);
    position: absolute;
    top: var(--uw-space-24);
    left: var(--uw-space-24);
    color: var(--G200);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.c-support-request__form .c-support-request__step.is-future::after {
    content: attr(data-step-title);
    position: absolute;
    top: calc(
        var(--uw-space-24) + var(--text-s-line-height) + var(--uw-space-8)
    );
    left: var(--uw-space-24);
    right: var(--uw-space-24);
    color: var(--G50);
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
    font-weight: var(--uw-fw-600);
}

.c-support-request__form .c-support-request__step.is-future > * {
    display: none;
}

/* completed original plugin steps are hidden */
.c-support-request__form .c-support-request__step.is-complete {
    display: none;
}

/* hide old inline placeholders from the form markup */
.c-support-request__summary {
    display: none;
}

/* summary cards in external stack */
.c-support-request__summary-card {
    padding: var(--uw-space-24);
    border-radius: var(--uw-radius-24);
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--G50) 3%, transparent) 0%,
            color-mix(in srgb, var(--G50) 6%, transparent) 50%,
            color-mix(in srgb, var(--G50) 3%, transparent) 100%
        ),
        var(--G800);
}

.c-support-request__summary-kicker {
    margin-bottom: var(--uw-space-16);
    color: var(--P700);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.c-support-request__summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uw-space-16);
    margin-bottom: var(--uw-space-12);
}

.c-support-request__summary-title {
    color: var(--G50);
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
    font-weight: var(--uw-fw-600);
}

.c-support-request__summary-chevron {
    color: var(--G200);
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
}

.c-support-request__summary-lines {
    display: grid;
    gap: var(--uw-space-8);
}

.c-support-request__summary-line {
    color: var(--G100);
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
}

/* fields */
.c-support-request__form .c-support-request__step.is-active .ff-el-group {
    margin-bottom: var(--uw-space-16);
}

.c-support-request__form
    .c-support-request__step.is-active
    .ff-el-input--label
    label {
    display: block;
    margin: 0 0 var(--uw-space-8) 0;
    color: var(--G200);
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.c-support-request__form .c-support-request__step.is-active .ff-el-form-control,
.c-support-request__form .c-support-request__step.is-active input[type='text'],
.c-support-request__form .c-support-request__step.is-active input[type='email'],
.c-support-request__form .c-support-request__step.is-active input[type='tel'],
.c-support-request__form .c-support-request__step.is-active textarea,
.c-support-request__form .c-support-request__step.is-active select {
    width: 100%;
    min-height: var(--uw-space-48);
    padding: var(--uw-space-12) var(--uw-space-8);
    border: 1px solid var(--G600);
    border-radius: var(--uw-radius-8);
    background: var(--G700);
    color: var(--G50);
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
    box-shadow: none;
    outline: none;
    appearance: none;
}

.c-support-request__form .c-support-request__step.is-active textarea {
    min-height: var(--uw-space-96);
    resize: none;
}

.c-support-request__form
    .c-support-request__step.is-active
    .ff-el-form-control::placeholder,
.c-support-request__form .c-support-request__step.is-active input::placeholder,
.c-support-request__form
    .c-support-request__step.is-active
    textarea::placeholder {
    color: var(--G400);
    opacity: 1;
}

.c-support-request__form
    .c-support-request__step.is-active
    .ff-el-form-control:focus,
.c-support-request__form .c-support-request__step.is-active input:focus,
.c-support-request__form .c-support-request__step.is-active textarea:focus,
.c-support-request__form .c-support-request__step.is-active select:focus {
    background: var(--G700);
    color: var(--G50);
    border-color: var(--P50);
    box-shadow: none;
}

/* autofill */
.c-support-request__form
    .c-support-request__step.is-active
    input:-webkit-autofill,
.c-support-request__form
    .c-support-request__step.is-active
    input:-webkit-autofill:hover,
.c-support-request__form
    .c-support-request__step.is-active
    input:-webkit-autofill:focus,
.c-support-request__form
    .c-support-request__step.is-active
    textarea:-webkit-autofill,
.c-support-request__form
    .c-support-request__step.is-active
    textarea:-webkit-autofill:hover,
.c-support-request__form
    .c-support-request__step.is-active
    textarea:-webkit-autofill:focus,
.c-support-request__form
    .c-support-request__step.is-active
    select:-webkit-autofill,
.c-support-request__form
    .c-support-request__step.is-active
    select:-webkit-autofill:hover,
.c-support-request__form
    .c-support-request__step.is-active
    select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--G50);
    box-shadow: inset 0 0 0 1000px var(--G700);
    transition: background-color 9999s ease-out 0s;
}

/* phone */
.c-support-request__form .c-support-request__step.is-active .iti {
    width: 100%;
}

.c-support-request__form
    .c-support-request__step.is-active
    .iti__selected-country {
    height: var(--uw-space-48);
    border: 0;
    background: transparent;
}

.c-support-request__form .c-support-request__step.is-active .ff-el-phone {
    padding-left: calc(var(--uw-space-32) + var(--uw-space-16));
}

/* actions */
.c-support-request__form .c-support-request__step.is-active .step-nav {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--uw-space-24);
}

.c-support-request__form .ff-btn-prev {
    display: none;
}

.c-support-request__form .c-support-request__step.is-active .ff-btn-next,
.c-support-request__form .c-support-request__step.is-active .ff-btn-submit {
    display: inline-flex;
    width: 100%;
    min-height: var(--uw-space-48);
    align-items: center;
    justify-content: center;
    padding: var(--btn-py) var(--btn-px);
    border: 0;
    border-radius: var(--uw-radius-pill);
    font-size: var(--btn-font-size);
    line-height: var(--btn-line-height);
    font-weight: var(--uw-fw-500);
    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}

.c-support-request__form
    .c-support-request__step.is-active
    .ff-btn-next[disabled],
.c-support-request__form
    .c-support-request__step.is-active
    .ff-btn-submit[disabled] {
    background: var(--P900);
    color: var(--G700);
    cursor: not-allowed;
    opacity: 1;
}

.c-support-request__form
    .c-support-request__step.is-active
    .ff-btn-next:not([disabled]),
.c-support-request__form
    .c-support-request__step.is-active
    .ff-btn-submit:not([disabled]) {
    background: var(--P700);
    color: var(--G800);
}

.c-support-request__form
    .c-support-request__step.is-active
    .ff-btn-next:not([disabled]):hover,
.c-support-request__form
    .c-support-request__step.is-active
    .ff-btn-submit:not([disabled]):hover {
    background: var(--P500);
    color: var(--G800);
}

/* mobile */
@media (max-width: 767px) {
    .c-support-request__form .c-support-request__step.is-active {
        padding: var(--uw-space-16);
        padding-top: calc(var(--uw-space-96) + var(--uw-space-16));
    }

    .c-support-request__form .c-support-request__step.is-active::before,
    .c-support-request__form .c-support-request__step.is-future::before {
        top: var(--uw-space-16);
        left: var(--uw-space-16);
    }

    .c-support-request__form .c-support-request__step.is-active::after,
    .c-support-request__form .c-support-request__step.is-future::after {
        left: var(--uw-space-16);
        right: var(--uw-space-16);
        top: calc(
            var(--uw-space-16) + var(--text-s-line-height) + var(--uw-space-8)
        );
    }

    .c-support-request__form .c-support-request__step.is-active::after {
        font-size: var(--h2);
        line-height: var(--h2-line-height);
    }

    .c-support-request__form .c-support-request__step.is-future::after {
        font-size: var(--text-m);
        line-height: var(--text-m-line-height);
    }

    .c-support-request__form .c-support-request__step.is-active .ff-el-group {
        margin-bottom: var(--uw-space-12);
    }

    .c-support-request__form
        .c-support-request__step.is-active
        .ff-el-form-control,
    .c-support-request__form
        .c-support-request__step.is-active
        input[type='text'],
    .c-support-request__form
        .c-support-request__step.is-active
        input[type='email'],
    .c-support-request__form
        .c-support-request__step.is-active
        input[type='tel'],
    .c-support-request__form .c-support-request__step.is-active textarea,
    .c-support-request__form .c-support-request__step.is-active select {
        min-height: var(--uw-space-40);
        font-size: var(--text-s);
        line-height: var(--text-s-line-height);
    }

    .c-support-request__form
        .c-support-request__step.is-active
        .iti__selected-country {
        height: var(--uw-space-40);
    }

    .c-support-request__summary-card {
        padding: var(--uw-space-16);
    }
}

/* =========================================================
   Inquiry Popup (Calculator) – c-calc inquiry modal
   Append-only
========================================================= */

.c-calc__inq {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--uw-space-24);
}

.c-calc__inq.is-hidden {
    display: none;
}

.c-calc__inq-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.c-calc__inq-panel {
    position: relative;
    width: 584px;
    max-width: 94vw;
    background: var(--G700);
    border-radius: 16px;
    padding: var(--uw-space-24);
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-24);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.c-calc__inq-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uw-space-8);
}

.c-calc__inq-title {
    font-size: var(--h4);
    line-height: var(--h4-line-height);
    font-weight: var(--uw-fw-600);
    color: var(--G50);
}

.c-calc__inq-close {
    background: transparent;
    border: 0;
    color: var(--G200);
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.c-calc__inq-form {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--uw-space-24);
}

@media (min-width: 768px) {
    .c-calc__inq-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.c-calc__inq-form .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-8);
    margin: 0;
}

.c-calc__inq-form .form-group:has(textarea),
.c-calc__inq-form .submit-row {
    grid-column: 1 / -1;
}

.c-calc__inq-form label {
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    color: var(--G200);
    font-weight: 400;
}

.c-calc__inq-form input,
.c-calc__inq-form textarea {
    width: 100%;
    background: var(--G800);
    color: var(--G50);
    border: 1px solid var(--G600);
    border-radius: var(--uw-radius-12);
    padding: var(--uw-space-16);
    outline: none;
}

.c-calc__inq-form input[readonly] {
    opacity: 0.85;
}

.c-calc__inq-form textarea {
    min-height: 120px;
    resize: vertical;
}

.c-calc__inq-form button[type='submit'] {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: var(--uw-radius-pill);
    background: var(--P700);
    color: var(--G800);
    font-weight: var(--uw-fw-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.c-calc__inq-form button[type='submit']:hover {
    background: var(--P500);
}

.c-calc__inq-note {
    font-size: var(--text-s);
    line-height: var(--text-s-line-height);
    color: var(--G200);
}

.c-calc__inq-success {
    color: var(--G50);
    font-size: var(--text-m);
    line-height: var(--text-m-line-height);
}

.fx-card-highlight {
    transition:
        transform var(--card-highlight-speed) var(--card-highlight-ease),
        box-shadow var(--card-highlight-speed) var(--card-highlight-ease),
        filter var(--card-highlight-speed) var(--card-highlight-ease);
}

.fx-card-highlight:hover,
.fx-card-highlight:focus-within,
.fx-card-highlight.is-anim-active {
    transform: scale(var(--card-highlight-scale));
    box-shadow:
        0 0 0 var(--card-highlight-ring-width) var(--card-highlight-color),
        0 0 var(--card-highlight-glow-size)
            color-mix(
                in srgb,
                var(--card-highlight-color) var(--card-highlight-glow-strength),
                transparent
            );
}

.c-card__num {
    transition: color var(--card-highlight-speed) var(--card-highlight-ease);
}

.fx-card-highlight:hover .c-card__num,
.fx-card-highlight:focus-within .c-card__num,
.fx-card-highlight.is-anim-active .c-card__num {
    color: var(--card-highlight-color);
}

.c-tabs .c-card {
    transition:
        transform var(--card-highlight-speed) var(--card-highlight-ease),
        box-shadow var(--card-highlight-speed) var(--card-highlight-ease),
        filter var(--card-highlight-speed) var(--card-highlight-ease);
}

.c-tabs .c-card:hover,
.c-tabs .c-card:focus-within,
.c-tabs .c-card.is-anim-active {
    transform: scale(var(--card-highlight-scale));
    box-shadow:
        0 0 0 var(--card-highlight-ring-width) var(--card-highlight-color),
        0 0 var(--card-highlight-glow-size)
            color-mix(
                in srgb,
                var(--card-highlight-color) var(--card-highlight-glow-strength),
                transparent
            );
}

.c-tabs .c-card .c-card__num {
    transition: color var(--card-highlight-speed) var(--card-highlight-ease);
}

.c-tabs .c-card:hover .c-card__num,
.c-tabs .c-card:focus-within .c-card__num,
.c-tabs .c-card.is-anim-active .c-card__num {
    color: var(--card-highlight-color);
}

.c-tabs .fx-card-highlight {
    text-align: left;
    align-items: stretch;
}

.c-tabs .fx-card-highlight .c-checklist,
.c-tabs .fx-card-highlight .c-checklist > li,
.c-tabs .fx-card-highlight .c-checklist .content,
.c-tabs .fx-card-highlight .c-checklist .description,
.c-tabs .fx-card-highlight .c-checklist .description ul,
.c-tabs .fx-card-highlight .c-checklist .description li {
    text-align: left;
}

.c-tabs .fx-card-highlight .c-checklist .content {
    justify-content: flex-start;
}

.c-tabs .fx-card-highlight .c-checklist .description {
    align-self: stretch;
}

.c-tabs .fx-card-highlight .c-checklist .description ul {
    margin: 0;
    padding-left: 20px;
}

/* =========================================================
   Trusted Devices logos
   Ambient motion + hover emphasis
========================================================= */

.c-device-logos__tile {
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        filter 0.28s ease;
    animation: uwLogoFloat 5.5s ease-in-out infinite;
    will-change: transform;
}

/* Stagger the floating a little */
.c-device-logos__row .c-device-logos__tile:nth-child(1) {
    animation-delay: 0s;
}

.c-device-logos__row .c-device-logos__tile:nth-child(2) {
    animation-delay: 0.9s;
}

.c-device-logos__row .c-device-logos__tile:nth-child(3) {
    animation-delay: 1.8s;
}

/* Hover / focus */
.c-device-logos__tile:hover,
.c-device-logos__tile:focus-within {
    transform: translateY(-6px) scale(1.015);
    box-shadow:
        0 0 0 1px var(--P700),
        0 0 24px color-mix(in srgb, var(--P700) 20%, transparent);
}

/* Optional: make the image itself feel a touch crisper on hover */
.c-device-logos__tile:hover img,
.c-device-logos__tile:focus-within img {
    filter: brightness(1.02);
}

/* Ambient floating */
@keyframes uwLogoFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .c-device-logos__tile {
        animation: none;
        transition: none;
    }

    .c-device-logos__tile:hover,
    .c-device-logos__tile:focus-within {
        transform: none;
        box-shadow:
            0 0 0 1px var(--P700),
            0 0 16px color-mix(in srgb, var(--P700) 16%, transparent);
    }
}

.c-device-logos,
.c-device-logos__row {
    overflow: visible;
}

/* =========================================================
   Breadcrumbs
   - wrapper should sit inside header-width container
   - top space 32 / bottom space 64
========================================================= */

.c-breadcrumbs {
  width: 100%;
  margin-top: var(--uw-space-32);
  margin-bottom: var(--uw-space-64);
}

/* common wrappers */
.c-breadcrumbs :is(ol, ul, .rank-math-breadcrumb, .breadcrumbs) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--uw-space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* list items / crumb items */
.c-breadcrumbs li,
.c-breadcrumbs .breadcrumb,
.c-breadcrumbs .crumb {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* link + text base */
.c-breadcrumbs a,
.c-breadcrumbs span,
.c-breadcrumbs li > * {
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: 400;
  color: var(--G200);
  text-decoration: none;
}

/* hover */
.c-breadcrumbs a:hover {
  color: var(--G50);
}

/* current item */
.c-breadcrumbs [aria-current="page"],
.c-breadcrumbs .current,
.c-breadcrumbs .current-item,
.c-breadcrumbs .breadcrumb_last,
.c-breadcrumbs li:last-child > span,
.c-breadcrumbs li:last-child > strong,
.c-breadcrumbs li:last-child > a {
  color: var(--P700);
  font-weight: var(--uw-fw-500);
}

/* separators for list-based breadcrumbs */
.c-breadcrumbs li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 19px;
  margin-left: var(--uw-space-12);
  background: var(--G500);
}

/* common plugin separators */
.c-breadcrumbs .separator,
.c-breadcrumbs .sep {
  display: inline-block;
  width: 1px;
  height: 19px;
  margin-inline: var(--uw-space-12);
  background: var(--G500);
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  vertical-align: middle;
}

/* if plugin outputs text separators directly, hide them when class exists */
.c-breadcrumbs .separator * ,
.c-breadcrumbs .sep * {
  display: none;
}

/* =========================================================
   Hero toggles
   Diagonal shine wipe
========================================================= */

.c-hero__toggle {
  position: relative;
  /* overflow: hidden; */
  border-radius: 10px;
}

.c-hero__toggle::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;

  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 22%,
    rgba(27, 215, 97, 0.00) 32%,
    rgba(27, 215, 97, 0.10) 40%,
    rgba(255, 255, 255, 0.30) 50%,
    rgba(27, 215, 97, 0.18) 60%,
    rgba(27, 215, 97, 0.06) 68%,
    transparent 78%,
    transparent 100%
  );

  transform: translateX(-160%) skewX(-18deg);
  animation: uwHeroToggleShine 5.4s ease-in-out infinite;
}

/* stagger */
.c-hero__toggle:nth-child(1)::after {
  animation-delay: 0s;
}

.c-hero__toggle:nth-child(2)::after {
  animation-delay: 1.8s;
}

.c-hero__toggle:nth-child(3)::after {
  animation-delay: 3.6s;
}

@keyframes uwHeroToggleShine {
  0%, 18%, 100% {
    opacity: 0;
    transform: translateX(-160%) skewX(-18deg);
  }

  6% {
    opacity: 1;
  }

  14% {
    opacity: 1;
    transform: translateX(160%) skewX(-18deg);
  }

  16% {
    opacity: 0;
    transform: translateX(160%) skewX(-18deg);
  }
}

/* hover / active wins */
.c-hero__toggle:hover::after,
.c-hero__toggle.is-active::after {
  animation-play-state: paused;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .c-hero__toggle::after {
    animation: none;
  }
}

/* =========================================================
   Hero 1 switcher
   Scoped only to heroes that opt in with .c-hero--switcher
   Safe with existing Hero 2 media_type logic
========================================================= */

/* hide all switcher media by default */
.c-hero--switcher .c-hero__media {
  display: none;
}

/* show active switcher media */
.c-hero--switcher .c-hero__media.is-active {
  display: block;
}

/* keep media types fluid inside the existing hero frame */
.c-hero--switcher .c-hero__image,
.c-hero--switcher .c-hero__video,
.c-hero--switcher .c-hero__shortcode {
  width: 100%;
  max-width: 100%;
}

/* common outputs */
.c-hero--switcher .c-hero__media > img,
.c-hero--switcher .c-hero__media iframe,
.c-hero--switcher .c-hero__media video,
.c-hero--switcher .c-hero__media .brxe-shortcode,
.c-hero--switcher .c-hero__media .brxe-code {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* shortcode safety */
.c-hero--switcher .c-hero__shortcode > * {
  max-width: 100%;
}

/* Scope the logic to this section only */
.c-feature-lists .brxe-list > li:nth-child(3n + 1) .icon {
    color: var(--B600);
}

.c-feature-lists .brxe-list > li:nth-child(3n + 2) .icon {
    color: var(--Y600);
}

.c-feature-lists .brxe-list > li:nth-child(3n) .icon {
    color: var(--P700);
}

/* Make SVGs follow the icon color */
.c-feature-lists .brxe-list > li .icon svg,
.c-feature-lists .brxe-list > li .icon svg path {
    fill: currentColor;
}

/* ---------------------------------
   1) Plain feature-card icons
--------------------------------- */
.brxe-yvrpcy > .c-card:nth-child(3n + 1) .brxe-ksjkbl {
  color: var(--B600);
}

.brxe-yvrpcy > .c-card:nth-child(3n + 2) .brxe-ksjkbl {
  color: var(--P700);
}

.brxe-yvrpcy > .c-card:nth-child(3n + 3) .brxe-ksjkbl {
  color: var(--Y600);
}

.brxe-yvrpcy > .c-card .brxe-ksjkbl,
.brxe-yvrpcy > .c-card .brxe-ksjkbl path {
  fill: currentColor !important;
}

/* ---------------------------------
   2) Icon badge icons
--------------------------------- */
.c-icon-badge {
  --badge-size: 40px;
  --badge-radius: 6px;
  --badge-bg: #3d3d3d;
  --badge-dot-size: 4px;
  --badge-dot-offset: 4px;
  --badge-dot-color: #5a5a5a;
  --badge-icon-size: 20px;
  --badge-icon-color: #fff;
  

  position: relative;
  width: var(--badge-size);
  height: var(--badge-size);
  border-radius: var(--badge-radius);
  background: var(--badge-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.c-icon-badge--48 {
  --badge-size: 48px;
}

.c-icon-badge::before,
.c-icon-badge::after {
  content: "";
  position: absolute;
  width: var(--badge-dot-size);
  height: var(--badge-dot-size);
  border-radius: 999px;
  background: var(--badge-dot-color);
}

.c-icon-badge::before {
  top: var(--badge-dot-offset);
  left: var(--badge-dot-offset);
  box-shadow:
    calc(var(--badge-size) - (2 * var(--badge-dot-offset)) - var(--badge-dot-size)) 0 0 var(--badge-dot-color),
    0 calc(var(--badge-size) - (2 * var(--badge-dot-offset)) - var(--badge-dot-size)) 0 var(--badge-dot-color);
}

.c-icon-badge::after {
  right: var(--badge-dot-offset);
  bottom: var(--badge-dot-offset);
}

.c-icon-badge__icon {
  width: var(--badge-icon-size);
  height: var(--badge-icon-size);
  color: var(--badge-icon-color);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.c-icon-badge__icon,
.c-icon-badge__icon svg,
.c-icon-badge__icon svg path {
  fill: currentColor !important;
}

/* =========================================================
   Solution 2
   New component API
   - fixed rows, property-driven visibility
   - per-row media can be image / video / shortcode / none
   - even rows auto-reverse on desktop
========================================================= */

.c-solution-2 {
  width: 100%;
}

.c-solution-2__rows {
  width: 100%;
}

.c-solution-2__row {
  width: 100%;
  align-items: center;
}

.c-solution-2__row > .c-solution-2__media-col,
.c-solution-2__row > .c-solution-2__content {
  min-width: 0;
}

/* auto reverse every even row on desktop */
@media (min-width: 768px) {
  .c-solution-2__row:nth-child(even) > .c-solution-2__media-col {
    order: 2;
  }

  .c-solution-2__row:nth-child(even) > .c-solution-2__content {
    order: 1;
  }
}

@media (max-width: 767px) {
  .c-solution-2__row > .c-solution-2__media-col,
  .c-solution-2__row > .c-solution-2__content {
    order: initial;
  }
}

/* =========================================================
   Media column
========================================================= */

.c-solution-2__media-col {
  width: 100%;
}

.c-solution-2__media {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--uw-radius-12);
}

.c-solution-2__media-item {
  display: none;
  width: 100%;
  min-width: 0;
}

.c-solution-2__media-item.is-active {
  display: block;
}

/* property-driven media type on the row */
.c-solution-2__row[visibility="is-row-hidden"] {
  display: none;
}

.c-solution-2__row[media-type="is-media-image"] .c-solution-2__media-item--image {
  display: block;
}

.c-solution-2__row[media-type="is-media-video"] .c-solution-2__media-item--video {
  display: block;
}

.c-solution-2__row[media-type="is-media-shortcode"] .c-solution-2__media-item--shortcode {
  display: block;
  position: relative;
}

.c-solution-2__row[media-type="is-media-none"] .c-solution-2__media-item--image,
.c-solution-2__row[media-type="is-media-none"] .c-solution-2__media-item--video,
.c-solution-2__row[media-type="is-media-none"] .c-solution-2__media-item--shortcode {
  display: none;
}

/* common media outputs */
.c-solution-2__media-item > img,
.c-solution-2__media-item iframe,
.c-solution-2__media-item video,
.c-solution-2__media-item .brxe-shortcode,
.c-solution-2__media-item .brxe-code,
.c-solution-2__media-item .brxe-image,
.c-solution-2__media-item picture,
.c-solution-2__media-item picture > img {
  display: block;
  width: 100%;
  max-width: 100%;
}

.c-solution-2__media-item video {
  height: auto;
}

.c-solution-2__media-item iframe {
  border: 0;
}

.c-solution-2__media-item--shortcode > * {
  max-width: 100%;
}

/* =========================================================
   Content column
========================================================= */

.c-solution-2__content {
  width: 100%;
  min-width: 0;
}

.c-solution-2__intro {
  width: 100%;
}

.c-solution-2__content .c-eyebrow {
  align-self: flex-start;
}

.c-solution-2__content .brxe-heading,
.c-solution-2__content .brxe-text-basic {
  max-width: 100%;
}

/* =========================================================
   Features list
========================================================= */

.c-solution-2__features {
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid;
  gap: var(--uw-space-12);
}

.c-solution-2__features > li {
  margin: 0;
  padding: 0;
}

.c-solution-2__features > li.is-feature-hidden {
  display: none;
}

.c-solution-2__features .content {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--uw-space-8);
  margin: 0;
}

.c-solution-2__features .icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 20px;
}
/* Solution 2 feature icon color cycle: P, B, Y */
.c-solution-2 .c-solution-2__features > li:nth-child(3n + 1) .icon {
  color: var(--Y600);
}

.c-solution-2 .c-solution-2__features > li:nth-child(3n + 2) .icon {
  color: var(--P700);
}

.c-solution-2 .c-solution-2__features > li:nth-child(3n + 3) .icon {
  color: var(--B600);
}
.c-solution-2__features .icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.c-solution-2__features .title {
  display: block;
  margin: 0;
  text-align: left;
}

/* =========================================================
   Optional button row
========================================================= */

.c-solution-2__content .c-btn {
  align-self: flex-start;
}

/* =========================================================
   Safe defaults for old scene wrappers inside shortcode media
========================================================= */

.c-solution-2__media .c-ui-scene {
  width: 100%;
  max-width: 100%;
}

/* =========================================================
   Mobile tightening
========================================================= */

@media (max-width: 767px) {
  .c-solution-2__media {
    border-radius: var(--uw-radius-12);
  }

  .c-solution-2__features {
    gap: var(--uw-space-8);
  }
}


/* =========================================================
   Footer (clean single block)
========================================================= */

body .c-footer {
  --section-pad: 32px;
    background: var(--G700);

}

.c-footer__shell {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}

.c-footer__top {
  width: 100%;
}

@media (min-width: 768px) {
  .c-footer__top {
    display: grid;
    grid-template-columns: 368px 224px 224px 224px;
    column-gap: 48px;
    row-gap: 0;
    align-items: start;
  }
}

.c-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.c-footer__logo {
  width: 64px;
  height: 64px;
  display: block;
}

.c-footer__lede {
  max-width: 26ch;
  color: var(--G50);
}

.c-footer__newsletter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-footer__newsletter-title,
.c-footer__nav-title {
  margin: 0;
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: var(--uw-fw-500);
  color: var(--G50);
}

.c-footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* menus */
.c-footer .bricks-mobile-menu-toggle,
.c-footer .bricks-mobile-menu-wrapper,
.c-footer .bricks-mobile-menu-overlay {
  display: none;
}

.c-footer .bricks-nav-menu-wrapper {
  display: block;
}

.c-footer .bricks-nav-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-footer .bricks-nav-menu a {
  color: var(--G50);
  text-decoration: none;
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: 400;
}

.c-footer .bricks-nav-menu a:hover {
  color: var(--G200);
}

/* newsletter form */
.c-footer__newsletter-form {
  --footer-send-icon: url("/wp-content/uploads/2026/04/send.svg");
  width: 100%;
  max-width: 368px;
}

.c-footer__newsletter-form form {
  position: relative;
}

.c-footer__newsletter-form .ff-el-group {
  margin: 0;
}

.c-footer__newsletter-form .ff-el-input--label {
  display: none;
}

.c-footer__newsletter-form input[type="email"],
.c-footer__newsletter-form .ff-el-form-control {
  width: 100%;
  height: 48px;
  min-height: 48px;
  padding: 12px 36px 12px 8px;
  background: var(--G600);
  border: 1px solid var(--G600);
  border-radius: 8px;
  color: var(--G50);
  box-shadow: none;
  outline: none;
}

.ff-default .ff-el-form-control {
  border: 1px solid var(--G600) !important;
}

.c-footer__newsletter-form input[type="email"]::placeholder,
.c-footer__newsletter-form .ff-el-form-control::placeholder {
  color: var(--G400);
  opacity: 1;
}

.c-footer__newsletter-form .ff_submit_btn_wrapper {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  margin: 0;
}

.c-footer__newsletter-form .ff-btn-submit {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  font-size: 0;
  line-height: 0;
  box-shadow: none;
}

.c-footer__newsletter-form .ff-btn-submit::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--P700);
  -webkit-mask: var(--footer-send-icon) center / 20px 20px no-repeat;
  mask: var(--footer-send-icon) center / 20px 20px no-repeat;
}

/* bottom row */
.c-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding-block: 20px;
  border-top: 1px solid var(--G600);
}

.c-footer__copyright {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--G50);
}

.c-footer__socials {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.c-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

@media (max-width: 767px) {
  .c-footer__shell {
    gap: 24px;
  }

  .c-footer__top {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .c-footer__newsletter-form {
    max-width: 100%;
  }

  .c-footer__bottom {
    align-items: flex-start;
  }
}

.c-footer__nav-col .menu-item.is-hiring > a,
.c-footer__nav-col .current-menu-item.is-hiring > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.c-footer__nav-col .menu-item.is-hiring > a::after {
  content: "We're hiring";
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  background: var(--P700);
  color: var(--G700);
  white-space: nowrap;
}


/* =========================================
   Footer width hard-lock
   Bypass variable/layer ambiguity for this instance
========================================= */

/* section owns the full-width band */
body #brx-footer > .l-section.c-footer {
  --section-pad: 32px;
  width: 100%;
  max-width: none;
}

/* hard-lock the footer wrapper to 1184px */
body #brx-footer .l-container.v-container--footer {
  width: 100%;
  max-width: 1184px;
  width: 1184px;
  margin-inline: auto;
}

/* make sure footer internals fill that wrapper */
body #brx-footer .c-footer__shell,
body #brx-footer .c-footer__top,
body #brx-footer .c-footer__bottom {
  width: 100%;
}

/* desktop top grid */
@media (min-width: 768px) {
  body #brx-footer .c-footer__top {
    display: grid;
    grid-template-columns: 368px 224px 224px 224px;
    column-gap: 48px;
    row-gap: 0;
    align-items: start;
  }
}

/* =========================================
   Footer section opt-out + local layout
========================================= */

/* footer section is just the full-width band */
body #brx-footer > section.l-section.c-footer.content-grid--off {
  --section-pad: 32px;
  width: 100%;
  max-width: none;
}

/* footer wrapper width */
body #brx-footer .l-container.v-container--footer {
  width: 100%;
  max-width: 1184px;
  margin-inline: auto;
}

/* footer internals fill the wrapper */
body #brx-footer .c-footer__shell,
body #brx-footer .c-footer__top,
body #brx-footer .c-footer__bottom {
  width: 100%;
}

/* desktop top grid */
@media (min-width: 768px) {
  body #brx-footer .c-footer__top {
    display: grid;
    grid-template-columns: 368px 224px 224px 224px;
    column-gap: 48px;
    row-gap: 0;
    align-items: start;
  }
}

body #brx-footer .c-footer .c-footer__menu .bricks-nav-menu > li {
  margin: 0;
}


/* =========================================
   Footer newsletter submit button cleanup
   Fluent Forms override
========================================= */

body #brx-footer .c-footer__newsletter-form .ff_submit_btn_wrapper {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  margin: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

body #brx-footer .c-footer__newsletter-form .ff-btn-submit,
body #brx-footer .c-footer__newsletter-form .ff-btn-submit:hover,
body #brx-footer .c-footer__newsletter-form .ff-btn-submit:focus,
body #brx-footer .c-footer__newsletter-form .ff-btn-submit:active {
  display: block;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  appearance: none;

  /* hide visible button text */
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;

  position: relative;
  cursor: pointer;
}

/* kill any plugin pseudo noise */
body #brx-footer .c-footer__newsletter-form .ff-btn-submit::after {
  content: none !important;
  display: none !important;
}

/* our send icon */
body #brx-footer .c-footer__newsletter-form .ff-btn-submit::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--P700);
  -webkit-mask: var(--footer-send-icon) center / 20px 20px no-repeat;
  mask: var(--footer-send-icon) center / 20px 20px no-repeat;

  position: absolute;
  inset: 0;
}

body #brx-footer .c-footer__newsletter-form .ff-btn-submit:hover::before,
body #brx-footer .c-footer__newsletter-form .ff-btn-submit:focus::before {
  background-color: var(--P500);
}

/* =========================================================
   Product tour form (Fluent Forms) - FINAL
========================================================= */

.c-tour-form {
  background: var(--G700);
  border-radius: var(--uw-radius-24);
  padding: var(--uw-space-40);
}

.c-tour-form__intro {
  margin-bottom: var(--uw-space-24);
}

.c-tour-form__title,
.c-tour-form__lede {
  margin: 0;
}

.c-tour-form__ff,
.c-tour-form__ff .fluentform,
.c-tour-form__ff form,
.c-tour-form__ff fieldset {
  width: 100%;
}

/* ---------------------------------------------------------
   Top-level field spacing = 24
   This is the key fix:
   FF name field is wrapped in .ff-field_container, not just .ff-el-group
--------------------------------------------------------- */
.c-tour-form__ff fieldset > .ff-field_container,
.c-tour-form__ff fieldset > .ff-el-group {
  margin-bottom: var(--uw-space-24);
}

.c-tour-form__ff fieldset > .ff-el-group:last-child,
.c-tour-form__ff fieldset > .ff-field_container:last-child {
  margin-bottom: 0;
}

/* prevent nested field wrappers from creating extra spacing */
.c-tour-form__ff .ff-field_container .ff-el-group,
.c-tour-form__ff .ff-t-cell .ff-el-group {
  margin-bottom: 0;
}

/* ---------------------------------------------------------
   Label spacing + style
--------------------------------------------------------- */
.c-tour-form__ff .ff-el-input--label,
.c-tour-form__ff .ff-el-form-check {
  margin-bottom: var(--uw-space-8);
}

.c-tour-form__ff .ff-el-input--label label,
.c-tour-form__ff .ff-el-form-check label,
.c-tour-form__ff label {
  display: block;
  margin: 0;
  font-size: var(--text-s);
  line-height: var(--text-s-line-height);
  font-weight: 400;
  color: var(--uw-text-muted, var(--G100));
  letter-spacing: 0;
  text-transform: none;
}

/* ---------------------------------------------------------
   Inputs + select
--------------------------------------------------------- */
.c-tour-form__ff input[type="text"],
.c-tour-form__ff input[type="email"],
.c-tour-form__ff input[type="tel"],
.c-tour-form__ff input[type="number"],
.c-tour-form__ff select,
.c-tour-form__ff textarea,
.c-tour-form__ff .ff-el-form-control {
  width: 100%;
  min-height: 48px;
  padding: 12px 8px;
  background: transparent;
  border: 1px solid var(--G600);
  border-radius: var(--uw-radius-12);
  color: var(--G50);
  box-shadow: none;
  outline: none;
}

/* placeholders */
.c-tour-form__ff input::placeholder,
.c-tour-form__ff textarea::placeholder,
.c-tour-form__ff .ff-el-form-control::placeholder {
  color: var(--G400);
  opacity: 1;
}

/* ---------------------------------------------------------
   Select styling
--------------------------------------------------------- */
.c-tour-form__ff select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 12px 40px 12px 8px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--G200) 50%),
    linear-gradient(135deg, var(--G200) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 3px),
    calc(100% - 16px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.c-tour-form__ff select:required:invalid,
.c-tour-form__ff select:not([required]):has(option:checked[value=""]) {
  color: var(--G400);
}

.c-tour-form__ff select:required:not(:invalid),
.c-tour-form__ff select option:not([value=""]) {
  color: var(--G50);
}

/* ---------------------------------------------------------
   Focus
--------------------------------------------------------- */
.c-tour-form__ff input:focus,
.c-tour-form__ff select:focus,
.c-tour-form__ff textarea:focus,
.c-tour-form__ff .ff-el-form-control:focus {
  border-color: var(--G500);
  box-shadow: none;
}

/* ---------------------------------------------------------
   Submit button
--------------------------------------------------------- */
.c-tour-form__ff .ff_submit_btn_wrapper,
.c-tour-form__ff .ff-btn-wrap {
  margin-top: var(--uw-space-24);
}

.c-tour-form__ff .ff-btn-submit,
.c-tour-form__ff button[type="submit"] {
  width: 100%;
  min-height: 0;
  padding: 12px 16px;
  border: 0 !important;
  border-radius: var(--uw-radius-pill);
  background: var(--P700) !important;
  color: var(--G800) !important;
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: var(--uw-fw-500);
  box-shadow: none !important;
  cursor: pointer;
}

.c-tour-form__ff .ff-btn-submit:hover,
.c-tour-form__ff button[type="submit"]:hover {
  background: var(--P500) !important;
  color: var(--G800) !important;
}

.c-tour-form__ff .ff-btn-submit .loading,
.c-tour-form__ff button[type="submit"] .loading {
  display: none;
}

/* ---------------------------------------------------------
   Optional logo row helper
--------------------------------------------------------- */
.c-tour-form__logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--uw-space-8);
}

/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */
@media (max-width: 767px) {
  .c-tour-form {
    padding: var(--uw-space-24);
  }
}

/* =========================================================
   Legal / policy rich text content
   Apply only to the Rich Text / Basic Text element
   that contains the legal body copy
========================================================= */

body .c-legal-content :is(h2, h3, h4, h5) {
  margin: 48px 0 24px;
}

/* first heading in the content should not get the 48px top space */
body .c-legal-content > :is(h2, h3, h4, h5):first-child,
body .c-legal-content :is(h2, h3, h4, h5):first-child {
  margin-top: 0;
}

/* reset paragraph margins */
body .c-legal-content p {
  margin: 0;
}

/* 24px after each paragraph,
   except when it is the last paragraph
   or when the next element is h2/h3/h4 */
body .c-legal-content p:not(:last-child):not(:has(+ :is(h2, h3, h4, h5))) {
  margin-bottom: 24px;
}

/* links */
body .c-legal-content a {
  color: var(--P700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body .c-legal-content a:hover {
  color: var(--P500);
}

/* =========================================================
   Datasheet cards - equal height + CTA pinned bottom
========================================================= */

.c-ds-card {
  height: 100%;
}

.c-ds-card__body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.c-ds-card__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* =========================================================
   Article meta line
   Example:
   Author: Philipp Van Berlekom | Head of Marketing
========================================================= */

body .c-article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--uw-space-0);
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
}

/* reset spacing from Bricks/meta output if any */
body .c-article-meta .item {
  margin: 0;
  white-space: nowrap;
}

/* label */
body .c-article-meta .item:first-child {
  color: var(--G200);
  font-weight: 400;
  margin-right: var(--uw-space-8);
}

/* name */
body .c-article-meta .item:nth-child(2) {
  color: var(--G50);
  font-weight: var(--uw-fw-500);
}

/* role */
body .c-article-meta .item:nth-child(3) {
  color: var(--G50);
  font-weight: var(--uw-fw-500);
}

/* pipe separator before role */
body .c-article-meta .item:nth-child(3)::before {
  content: "|";
  display: inline-block;
  color: var(--G200);
  font-weight: 400;
  margin-inline: var(--uw-space-4);
}


/* =========================================================
   Newsletter Form
   Reusable base form + page shell + popup shell
   Uses updated classes:
   - c-newsletter-form
   - c-newsletter-form-card
   - c-newsletter-popup
   - ff-newsletter-form__field
   - ff-newsletter-form__salutation
   - ff-newsletter-form__consent
   ========================================================= */

/* =========================================================
   PAGE SHELL
   Use when the form sits directly on a page
========================================================= */

body .c-newsletter-form-card,
body .c-newsletter-form-card.u-center {
  width: 100%;
  max-width: 496px;
  background: var(--G700);
  border-radius: calc(var(--uw-radius-8) * 2); /* 16 */
  padding: var(--uw-space-24);
  text-align: left;
}

body .c-newsletter-form-card.u-center,
body .c-newsletter-form-card.u-center .brxe-heading,
body .c-newsletter-form-card.u-center .brxe-text-basic,
body .c-newsletter-form-card.u-center .c-newsletter-form-card__title {
  text-align: left;
  align-items: flex-start;
}

.c-newsletter-form-card__title {
  margin: 0;
  color: var(--G50);
  font-size: var(--h4);
  line-height: var(--h4-line-height);
  font-weight: var(--uw-fw-600);
  text-align: left;
}

/* =========================================================
   POPUP SHELL
========================================================= */

.c-newsletter-popup {
  width: min(496px, calc(100vw - (var(--uw-space-16) * 2)));
  background: var(--G700);
  border-radius: calc(var(--uw-radius-8) * 2); /* 16 */
  padding: var(--uw-space-24);
}

.c-newsletter-popup__shell {
  display: flex;
  flex-direction: column;
  gap: var(--uw-space-24);
}

.c-newsletter-popup__head {
  display: flex;
  align-items: flex-start;
  gap: var(--uw-space-8);
}

.c-newsletter-popup__title {
  flex: 1 1 auto;
  margin: 0;
  color: var(--G50);
  font-size: var(--h4);
  line-height: var(--h4-line-height);
  font-weight: var(--uw-fw-600);
  text-align: left;
}

.c-newsletter-popup__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--uw-space-24);
  height: var(--uw-space-24);
  min-width: var(--uw-space-24);
  min-height: var(--uw-space-24);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--G200);
  cursor: pointer;
}

.c-newsletter-popup__close:hover {
  color: var(--G100);
}

.c-newsletter-popup__close svg,
.c-newsletter-popup__close i {
  display: block;
  width: var(--uw-space-24);
  height: var(--uw-space-24);
  fill: currentColor;
}

/* =========================================================
   REUSABLE FORM WRAPPER
========================================================= */

body .c-newsletter-form {
  width: 100%;
  text-align: left;
}

body .c-newsletter-form .fluentform,
body .c-newsletter-form .frm-fluent-form,
body .c-newsletter-form form.fluent_form_6,
body .c-newsletter-form form.fluentform {
  width: 100%;
  text-align: left;
}

body .c-newsletter-form fieldset {
  min-inline-size: 0;
}

body .c-newsletter-form .ff-el-group {
  margin-bottom: var(--uw-space-24);
  text-align: left;
}

body .c-newsletter-form .ff-el-group:last-child {
  margin-bottom: 0;
}

/* reset common FF spacing */
body .c-newsletter-form .ff-el-input--label,
body .c-newsletter-form .ff-el-input--content,
body .c-newsletter-form .ff-el-form-check,
body .c-newsletter-form .ff-el-form-check-label {
  text-align: left;
}

body .c-newsletter-form .ff-el-input--label {
  display: block;
  margin: 0 0 var(--uw-space-8) 0;
  padding: 0;
  color: var(--G200);
  font-size: var(--text-s);
  line-height: var(--text-s-line-height);
  font-weight: 400;
}

body .c-newsletter-form .ff-el-input--label label {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

/* =========================================================
   TEXT / EMAIL INPUTS
   Figma: border only, no visible fill
========================================================= */

body .c-newsletter-form .ff-newsletter-form__field {
  width: 100%;
}

body .c-newsletter-form .ff-newsletter-form__field .ff-el-form-control {
  width: 100%;
  min-height: 48px;
  height: 48px;
  padding: 10px 8px;
  background: transparent;
  background-image: none;
  border: 1px solid var(--G600);
  border-radius: var(--uw-radius-8);
  color: var(--G50);
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  box-shadow: none;
  outline: none;
}

body .c-newsletter-form .ff-newsletter-form__field .ff-el-form-control::placeholder {
  color: var(--G400);
  opacity: 1;
}

body .c-newsletter-form .ff-newsletter-form__field .ff-el-form-control:hover {
  border-color: var(--G500);
}

body .c-newsletter-form .ff-newsletter-form__field .ff-el-form-control:focus,
body .c-newsletter-form .ff-newsletter-form__field .ff-el-form-control:focus-visible {
  border-color: var(--G50);
  box-shadow: 0 0 0 1px var(--G50);
  outline: none;
}

/* =========================================================
   RADIO ROW
   Figma: left aligned, 24px gap between options,
   12px gap between control and label, 24px circular radios
========================================================= */

body .c-newsletter-form .ff-newsletter-form__salutation {
  width: 100%;
}

body .c-newsletter-form .ff-newsletter-form__salutation > .ff-el-input--label {
  display: none;
}

/* actual FF markup wrapper */
body .c-newsletter-form .ff-newsletter-form__salutation > .ff-el-input--content {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--uw-space-24);
  flex-wrap: wrap;
}

body .c-newsletter-form .ff-newsletter-form__salutation .ff-el-form-check {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

body .c-newsletter-form .ff-newsletter-form__salutation .ff-el-form-check-label,
body .c-newsletter-form .ff-newsletter-form__salutation .ff-el-form-check label {
  display: inline-flex;
  align-items: center;
  gap: var(--uw-space-12);
  margin: 0;
  color: var(--G100);
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
}

body .c-newsletter-form .ff-newsletter-form__salutation .ff-el-form-check-label > span,
body .c-newsletter-form .ff-newsletter-form__salutation .ff-el-form-check label > span {
  display: inline-block;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* circular radios */
body .c-newsletter-form .ff-newsletter-form__salutation input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  aspect-ratio: 1 / 1;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: 2px solid var(--G200);
  border-radius: 50%;
  background: transparent;
  background-image: none;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  flex: 0 0 24px;
}

body .c-newsletter-form .ff-newsletter-form__salutation input[type="radio"]:hover {
  border-color: var(--G100);
}

body .c-newsletter-form .ff-newsletter-form__salutation input[type="radio"]:checked {
  border-color: var(--G200);
  background:
    radial-gradient(circle at center, var(--G200) 0 5px, transparent 5.5px);
}

body .c-newsletter-form .ff-newsletter-form__salutation input[type="radio"]:focus,
body .c-newsletter-form .ff-newsletter-form__salutation input[type="radio"]:focus-visible {
  box-shadow: 0 0 0 1px var(--G50);
}

/* =========================================================
   CONSENT CHECKBOX
   Works with the intended class and also as fallback for the
   current markup if the class is not added yet
========================================================= */

body .c-newsletter-form .ff-newsletter-form__consent,
body .c-newsletter-form .ff-el-group:has(input[type="checkbox"]) {
  width: 100%;
}

body .c-newsletter-form .ff-newsletter-form__consent > .ff-el-input--label,
body .c-newsletter-form .ff-el-group:has(input[type="checkbox"]) > .ff-el-input--label {
  display: none;
}

body .c-newsletter-form .ff-newsletter-form__consent .ff-el-form-check,
body .c-newsletter-form .ff-el-group:has(input[type="checkbox"]) .ff-el-form-check {
  margin: 0;
}

body .c-newsletter-form .ff-newsletter-form__consent .ff-el-form-check-label,
body .c-newsletter-form .ff-newsletter-form__consent .ff-el-form-check label,
body .c-newsletter-form .ff-el-group:has(input[type="checkbox"]) .ff-el-form-check-label,
body .c-newsletter-form .ff-el-group:has(input[type="checkbox"]) .ff-el-form-check label {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: var(--uw-space-12);
  align-items: start;
  margin: 0;
  color: var(--G100);
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: 400;
  cursor: pointer;
}

body .c-newsletter-form .ff-newsletter-form__consent .ff-el-form-check-label > span,
body .c-newsletter-form .ff-newsletter-form__consent .ff-el-form-check label > span,
body .c-newsletter-form .ff-el-group:has(input[type="checkbox"]) .ff-el-form-check-label > span,
body .c-newsletter-form .ff-el-group:has(input[type="checkbox"]) .ff-el-form-check label > span {
  display: block;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

body .c-newsletter-form .ff-newsletter-form__consent input[type="checkbox"],
body .c-newsletter-form .ff-el-group:has(input[type="checkbox"]) input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: 2px solid var(--G200);
  border-radius: 4px;
  background: transparent;
  background-image: none;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  position: relative;
}

body .c-newsletter-form .ff-newsletter-form__consent input[type="checkbox"]:hover,
body .c-newsletter-form .ff-el-group:has(input[type="checkbox"]) input[type="checkbox"]:hover {
  border-color: var(--G100);
}

body .c-newsletter-form .ff-newsletter-form__consent input[type="checkbox"]:checked,
body .c-newsletter-form .ff-el-group:has(input[type="checkbox"]) input[type="checkbox"]:checked {
  background: transparent;
  border-color: var(--G200);
}

body .c-newsletter-form .ff-newsletter-form__consent input[type="checkbox"]:checked::after,
body .c-newsletter-form .ff-el-group:has(input[type="checkbox"]) input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid var(--G200);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

body .c-newsletter-form .ff-newsletter-form__consent input[type="checkbox"]:focus,
body .c-newsletter-form .ff-newsletter-form__consent input[type="checkbox"]:focus-visible,
body .c-newsletter-form .ff-el-group:has(input[type="checkbox"]) input[type="checkbox"]:focus,
body .c-newsletter-form .ff-el-group:has(input[type="checkbox"]) input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 1px var(--G50);
}

body .c-newsletter-form .ff-newsletter-form__consent a,
body .c-newsletter-form .ff-el-group:has(input[type="checkbox"]) a {
  color: var(--G50);
  text-decoration: underline;
}

body .c-newsletter-form .ff-newsletter-form__consent a:hover,
body .c-newsletter-form .ff-el-group:has(input[type="checkbox"]) a:hover {
  color: var(--G200);
}

/* =========================================================
   SUBMIT BUTTON
   Force primary button appearance
========================================================= */

body .c-newsletter-form .ff_submit_btn_wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0;
  text-align: left;
}

body .c-newsletter-form .ff_submit_btn_wrapper .ff-btn.ff-btn-submit,
body .c-newsletter-form .ff_submit_btn_wrapper button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 148px;
  height: 48px;
  min-height: 48px;
  padding: 8px 16px;
  margin: 0;
  border: 0;
  border-radius: var(--uw-radius-pill);
  background: var(--P700);
  background-image: none;
  box-shadow: none;
  color: var(--G800);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
  font-weight: var(--uw-fw-500);
  text-align: center;
  cursor: pointer;
}

body .c-newsletter-form .ff_submit_btn_wrapper .ff-btn.ff-btn-submit:hover,
body .c-newsletter-form .ff_submit_btn_wrapper button[type="submit"]:hover {
  background: var(--P500);
  color: var(--G800);
}

body .c-newsletter-form .ff_submit_btn_wrapper .ff-btn.ff-btn-submit:focus,
body .c-newsletter-form .ff_submit_btn_wrapper .ff-btn.ff-btn-submit:focus-visible,
body .c-newsletter-form .ff_submit_btn_wrapper button[type="submit"]:focus,
body .c-newsletter-form .ff_submit_btn_wrapper button[type="submit"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--G50);
}

/* =========================================================
   ERROR / SUPPORT TEXT
========================================================= */

body .c-newsletter-form .ff-el-is-error .text-danger,
body .c-newsletter-form .ff-el-is-error .error,
body .c-newsletter-form .ff-el-help-message,
body .c-newsletter-form .ff-message-error,
body .c-newsletter-form .text-danger {
  margin-top: var(--uw-space-8);
  color: var(--R500);
  font-size: var(--text-xs);
  line-height: var(--text-xs-line-height);
  text-align: left;
}

body .c-newsletter-form .ff-message-success {
  margin-top: var(--uw-space-16);
  color: var(--P700);
  font-size: var(--text-s);
  line-height: var(--text-s-line-height);
  text-align: left;
}

/* center the whole form card inside the content container */
body .c-newsletter-form-card {
  margin-inline: auto;
}

/* keep the inner stack full-width and left aligned */
body .c-newsletter-form-card > .l-stack,
body .c-newsletter-form-card .c-newsletter-form {
  width: 100%;
  align-items: stretch;
  text-align: left;
}

/* keep title and form text left aligned */
body .c-newsletter-form-card .c-newsletter-form-card__title,
body .c-newsletter-form-card .ff-el-group,
body .c-newsletter-form-card .ff-el-input--label,
body .c-newsletter-form-card .ff-el-input--content,
body .c-newsletter-form-card .ff-el-form-check,
body .c-newsletter-form-card .ff-el-form-check-label {
  text-align: left;
}

/* submit row aligned right */
body .c-newsletter-form .ff_submit_btn_wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  text-align: right;
}

/* keep the button itself tight, not stretched */
body .c-newsletter-form .ff_submit_btn_wrapper .ff-btn.ff-btn-submit,
body .c-newsletter-form .ff_submit_btn_wrapper button[type="submit"] {
  flex: 0 0 auto;
}