/* ------------------------------------------------------------------
   MJ Unlimited — overrides for labbit-compare
   Loaded AFTER the Webflow stylesheet. Never edit the Webflow CSS:
   it is served with a Subresource Integrity hash and any byte change
   makes the browser block the whole file.
   ------------------------------------------------------------------ */

/* 1 ---- Hero height: halve the section spacers ---- */
.main_hero_content > .u-section-spacer:first-child { height: 56px !important; }
.main_hero_content > .u-section-spacer:last-child  { height: 28px !important; }
.main_hero_wrap .main_hero_layout { align-items: center; }

@media (max-width: 991px) {
  .main_hero_content > .u-section-spacer:first-child { height: 64px !important; }
  .main_hero_content > .u-section-spacer:last-child  { height: 32px !important; }
}

/* 2 ---- Hero form (replaces the graph image) ---- */
.main_hero_img_wrap { align-items: center; justify-content: flex-end; }

.mj-form {
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  padding: 22px;
  border-radius: 14px;
  background: var(--_theme---background, #fff);
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  box-shadow: 0 18px 48px -24px rgb(0 0 0 / 35%);
}
/* Webflow applies line-height-trim ::before/::after with negative margins to
   every h1-h6/p on the page, which pulls our form copy into the line above.
   Neutralize it inside the form only. */
.mj-form :is(p, h1, h2, h3, h4, h5, h6)::before,
.mj-form :is(p, h1, h2, h3, h4, h5, h6)::after {
  content: none !important;
  display: none !important;
  margin: 0 !important;
}

.mj-form_title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 8px;
}
.mj-form_sub {
  font-size: 0.875rem;
  line-height: 1.5;
  opacity: 0.7;
  margin: 0 0 18px;
}
.mj-form_field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.mj-form_label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; opacity: 0.75; }
.mj-form_input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.9375rem;
  color: inherit;
  background: color-mix(in srgb, currentColor 4%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 9px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mj-form_input::placeholder { color: inherit; opacity: 0.4; }
.mj-form_input:focus {
  outline: none;
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 7%, transparent);
}
.mj-form_input[aria-invalid="true"] { border-color: #d94a4a; }
.mj-form_error { font-size: 0.75rem; color: #d94a4a; min-height: 0; }

.mj-form_submit {
  width: 100%;
  margin-top: 4px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--_theme---background, #fff);
  background: var(--_theme---text, #111);
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.mj-form_submit:hover { opacity: 0.88; }
.mj-form_submit:active { transform: translateY(1px); }
.mj-form_submit[disabled] { opacity: 0.55; cursor: default; }

.mj-form_note { margin: 10px 0 0; font-size: 0.75rem; line-height: 1.45; opacity: 0.55; text-align: center; }
.mj-form_status { margin-top: 14px; font-size: 0.875rem; }
.mj-form_status[data-state="ok"]  { color: #2e9e6b; }
.mj-form_status[data-state="err"] { color: #d94a4a; }

@media (max-width: 991px) {
  .mj-form { max-width: none; margin-left: 0; }
}

/* 3 ---- Logo marquee (below the hero) ---- */
.mj-logos { padding: 32px 0 64px; }
.mj-logos_inner { width: 100%; max-width: 1297px; margin: 0 auto; padding: 0 24px; }
.mj-logos_eyebrow {
  margin: 0 0 22px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.55;
  text-align: center;
}
.mj-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mj-marquee_track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 72px;
  animation: mj-marquee-scroll var(--mj-marquee-duration, 38s) linear infinite;
}
.mj-marquee:hover .mj-marquee_track { animation-play-state: paused; }
.mj-marquee_item { flex: 0 0 auto; display: flex; align-items: center; }
.mj-marquee_item img {
  height: 34px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.65;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.mj-marquee_item img:hover { filter: grayscale(0); opacity: 1; }

@keyframes mj-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* reduced-motion guard removed at client request — marquee always animates */
@media (max-width: 767px) {
  .mj-marquee_track { gap: 48px; }
  .mj-marquee_item img { height: 26px; }
}

/* ==================================================================
   COMPARISON TABLE — de-boxed, card-based
   Ports the Kardia layout system (card surfaces, hairline borders,
   large radius, soft shadow, tracked uppercase labels, top-aligned
   copy) but uses Labbit's own palette, not AliveCor's blues.
   ================================================================== */

.compare_grid_table {
  --mj-line:        #d8d3df;
  --mj-purple:      #a08bed;
  --mj-purple-mist: #ececfc;
  --mj-muted:       #76678e;
  --mj-ink:         #1f0e30;
  overflow: visible;
}

/* 1. strip every box: row borders, cell dividers, zebra fill */
.compare_grid_row,
.compare_grid_row.is-header,
.compare_grid_cell,
.compare_grid_cell:last-child {
  border: 0 !important;
}
.compare_grid_row_slot .compare_grid_row:nth-child(odd) {
  background-color: transparent !important;
}

/* 2. each row becomes a floating card */
.compare_grid_row:not(.is-header) {
  background: #fff !important;
  border: 1px solid var(--mj-line) !important;
  border-radius: 20px;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(31,14,48,.05), 0 6px 20px rgba(31,14,48,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.compare_grid_row:not(.is-header):hover {
  transform: translateY(-2px);
  border-color: #c9c2d6 !important;
  box-shadow: 0 16px 44px rgba(31,14,48,.11);
}

/* 3. roomier, top-aligned cells (was vertically centred + cramped) */
.compare_grid_row:not(.is-header) .compare_grid_cell {
  padding: 30px 32px;
  align-items: flex-start;
}

/* 4. header: no box, just tracked column labels */
.compare_grid_row.is-header {
  background: transparent !important;
  margin-bottom: 6px;
}
.compare_grid_row.is-header .compare_grid_cell { padding: 0 32px 14px; align-items: flex-end; }
.compare_grid_row_title {
  font-size: .8rem !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase;
  color: var(--mj-muted) !important;
}
.compare_grid_logo { max-height: 26px; width: auto; }

/* 5. row title column: tighter, mono index sits above the title */
.compare_grid_title_wrap { align-items: flex-start; gap: .7rem; }
.compare_grid_title {
  letter-spacing: -.01em !important;
  line-height: 1.18 !important;
}

/* 6. LabWare column reads as the "before" — muted, secondary */
.compare_grid_cell:has(> .compare_grid_text):not(.is-checkbox) .compare_grid_text {
  color: var(--mj-muted);
  font-size: .95rem;
  line-height: 1.62;
}

/* 7. Labbit column is the payoff — tinted panel, soft inner edge */
.compare_grid_cell.is-checkbox {
  background: linear-gradient(180deg, #f7f5fe 0%, var(--mj-purple-mist) 100%);
  border-left: 1px solid #e4dff5 !important;
  align-items: start;
}
.compare_grid_cell.is-checkbox .compare_grid_text {
  color: var(--mj-ink);
  font-size: .95rem;
  line-height: 1.62;
}
.compare_grid_check { width: 1.375rem; margin-top: .15rem; }

/* 8. stack instead of side-scrolling on small screens */
@media (max-width: 767px) {
  .compare_grid_row { width: auto !important; grid-template-columns: 1fr !important; }
  .compare_grid_row:not(.is-header) .compare_grid_cell { padding: 22px 22px; }
  .compare_grid_cell.is-checkbox {
    border-left: 0 !important;
    border-top: 1px solid #e4dff5 !important;
  }
  .compare_grid_row.is-header { display: none; }
}

/* ---- Hero benefit bullets ---- */
.mj-hero-bullets {
  list-style: none;
  margin: 2px 0 24px;
  padding: 0;
  display: grid;
  gap: 11px;
  max-width: 33rem;
}
.mj-hero-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.9375rem;
  line-height: 1.5;
  /* hero sits on the dark violet gradient — inherit resolves to dark ink here */
  color: rgba(255, 255, 255, 0.86);
}
.mj-hero-bullets strong { color: #fff; }
.mj-hero-bullets svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  color: #c9bcf7;
}
.mj-hero-bullets strong { font-weight: 600; }
.mj-hero-bullets li::before, .mj-hero-bullets li::after { content: none !important; }

@media (max-width: 767px) {
  .mj-hero-bullets { gap: 9px; margin-bottom: 20px; }
  .mj-hero-bullets li { font-size: 0.875rem; }
}

/* ---- Hero copy: restore rhythm after removing Webflow's spacer <p>s ----
   Webflow relied on empty paragraphs for gaps, and applies a negative-margin
   line-height trim to every <p>. With the spacers gone the trim collapsed the
   lines onto each other, so neutralize it and use real margins instead. */
.main_hero_text_wrap .u-text p::before,
.main_hero_text_wrap .u-text p::after {
  content: none !important;
  display: none !important;
  margin: 0 !important;
}
.main_hero_text_wrap .u-text p {
  margin: 0 0 14px !important;
  line-height: 1.55;
}
.main_hero_text_wrap .u-text p:last-child { margin-bottom: 0 !important; }
.main_hero_text_wrap .u-text p:first-child { margin-bottom: 16px !important; }
.main_hero_text_wrap .u-text { margin-bottom: 26px; }

/* ---- Hide announcement bar + nav entirely; ~20px above the hero ---- */
.navbar_wrapper { display: none !important; }
.main_hero_content > .u-section-spacer:first-child { height: 20px !important; }
@media (max-width: 991px) {
  .main_hero_content > .u-section-spacer:first-child { height: 20px !important; }
}

/* the 40px hatched divider that sat between page top and the hero —
   scoped with :has() so the other dividers further down are untouched */
.page_wrap > .section_divider_wrap:has(+ .main_hero_wrap) { display: none !important; }

/* ---- Hero left column: even vertical rhythm ----
   Webflow had this as space-between with an 80px gap, which pinned the H1 to
   the top of the column and dumped the rest at the bottom. Centre it and give
   every block the same 32px separation. */
.main_hero_text_wrap {
  justify-content: center !important;
  gap: 32px !important;
}
.hero_lower_content_wrapper { gap: 32px !important; }
.main_hero_text_wrap .u-text { margin-bottom: 0 !important; }
.mj-hero-bullets { margin: 0 !important; }

@media (max-width: 991px) {
  .main_hero_text_wrap { gap: 24px !important; }
  .hero_lower_content_wrapper { gap: 24px !important; }
}

/* ---- Hero: breathing room, corrected ----
   20px sits ABOVE the hero card (outside it), and the internal spacers are
   restored so the title and button aren't pinned to the card edges. */
.main_hero_wrap { margin-top: 20px; }
.main_hero_content > .u-section-spacer:first-child { height: 56px !important; }
.main_hero_content > .u-section-spacer:last-child  { height: 56px !important; }

@media (max-width: 991px) {
  .main_hero_wrap { margin-top: 16px; }
  .main_hero_content > .u-section-spacer:first-child { height: 40px !important; }
  .main_hero_content > .u-section-spacer:last-child  { height: 40px !important; }
}

/* ---- Hero bg inset + top margin ----
   .main_hero_bg is position:absolute with inset:8px, so margin has no effect
   on it — the 40px top/bottom is applied as inset instead. */
.main_hero_wrap { margin-top: 50px; }
.main_hero_bg { top: 40px !important; bottom: 40px !important; }

@media (max-width: 991px) {
  .main_hero_wrap { margin-top: 32px; }
  .main_hero_bg { top: 24px !important; bottom: 24px !important; }
}

/* ---- Top bar: logo left, Request Demo right ---- */
.mj-topbar { background: #fff; width: 100%; }
.mj-topbar_inner {
  max-width: 1297px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.mj-topbar_logo { display: flex; align-items: center; text-decoration: none; }
.mj-topbar_logo img { height: 30px; width: auto; display: block; }

.mj-topbar_cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border-radius: 10px;
  background: #a08bed;
  color: #fff !important;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mj-topbar_cta:hover {
  background: #8f78e8;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(160, 139, 237, .35);
}
.mj-topbar_cta:active { transform: translateY(0); }

/* anchor target shouldn't land flush against the viewport edge */
#request-demo { scroll-margin-top: 28px; }

@media (max-width: 767px) {
  .mj-topbar_inner { padding: 12px 18px; gap: 14px; }
  .mj-topbar_logo img { height: 24px; }
  .mj-topbar_cta { padding: 10px 16px; font-size: 0.875rem; }
}

/* ---- Match the site's own type system ----
   Eyebrow-style labels use the tertiary (JetBrains Mono) face, same as the
   native .u-eyebrow-text and the [1][2] row counters. */
.mj-logos_eyebrow,
.compare_grid_row_title {
  font-family: var(--_typography---font--tertiary-family, "JetBrains Mono", monospace) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .03rem !important;
  color: var(--_theme---text-eyebrow, #76678e) !important;
}
.mj-logos_eyebrow { font-size: .75rem; }
.compare_grid_row_title { font-size: .8rem !important; }

/* body/UI copy uses the primary face */
.mj-form,
.mj-hero-bullets,
.mj-topbar_cta {
  font-family: var(--_typography---font--primary-family, "Inter Variablefont Opsz Wght", Arial, sans-serif);
}
/* headings use the secondary face (Almarai) */
.mj-form_title,
.mj-logos_eyebrow + * {
  font-family: var(--_typography---font--secondary-family, Almarai, Arial, sans-serif);
}

/* ---- Drop the container's left/right rules on the comparison section ----
   .compare_grid_contain ships with border-style:none solid, which draws the
   vertical lines down each side. Cards carry the structure now. */
.compare_grid_contain { border-style: none !important; border-width: 0 !important; }

/* ---- Feature rows: even gutter between text and image ----
   The column gap is 16px in every row, but the visual gap isn't: when the text
   sits on the LEFT its ragged right edge stops short of the column, opening a
   big gutter; when it sits on the RIGHT its flush left edge butts the image at
   16px. Widen the gutter and push left-side text toward the image so both
   orientations read the same. */
.industry_layout { column-gap: 56px !important; }
.industry_wrap .u-content-wrapper { max-width: 32rem; }
.industry_layout > *:first-child .u-content-wrapper { margin-left: auto; }
.industry_wrap .u-heading h2,
.industry_wrap .u-text p { text-wrap: pretty; }

@media (max-width: 991px) {
  .industry_layout { column-gap: 24px !important; }
  .industry_wrap .u-content-wrapper { max-width: none; margin-left: 0 !important; }
}

/* ==================================================================
   TYPE SCALE ALIGNMENT
   The site tracks every face at -0.02em (16px->-0.32px, 48px->-0.96px)
   and sets headings at weight 400. My earlier values used POSITIVE
   tracking (+0.48px) and a smaller scale, which is why the same font
   files still read as a different typeface. Everything below matches
   the native computed values.
   ================================================================== */

/* eyebrows: native is 16px/24px, -0.02em, w700 mono */
.mj-logos_eyebrow,
.compare_grid_row_title {
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
}

/* headings: native Almarai is weight 400, -0.02em */
.mj-form_title {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* body: native is 16px/24px Inter, -0.02em */
.mj-hero-bullets li,
.mj-form_sub,
.mj-form_input,
.mj-form_status,
.compare_grid_cell:has(> .compare_grid_text):not(.is-checkbox) .compare_grid_text,
.compare_grid_cell.is-checkbox .compare_grid_text {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.02em;
}
.mj-hero-bullets li { line-height: 1.5; }

/* buttons: native is 16px/16px, w700, -0.02em */
.mj-topbar_cta,
.mj-form_submit {
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* remaining small text picks up the same tracking */
.mj-form_label { font-size: 13px; letter-spacing: -0.02em; }
.mj-form_note,
.mj-form_error { letter-spacing: -0.02em; }

/* ---- Kill the hatched divider above the top bar ----
   The earlier rule matched the divider sitting directly before the hero;
   the top bar now sits between them, so match either neighbour. */
.page_wrap > .section_divider_wrap:has(+ .mj-topbar),
.page_wrap > .section_divider_wrap:has(+ .main_hero_wrap) { display: none !important; }

/* tighter gap between the top bar and the hero card */
.main_hero_wrap { margin-top: 20px; }
@media (max-width: 991px) { .main_hero_wrap { margin-top: 14px; } }

/* ---- Hero form submit: bright purple, matching the top bar CTA ---- */
.mj-form_submit {
  background: #a08bed;
  color: #fff;
}
.mj-form_submit:hover:not([disabled]) {
  background: #8f78e8;
  opacity: 1;
  box-shadow: 0 8px 20px rgba(160, 139, 237, .35);
}

/* ---- Darker purple on both CTAs ---- */
.mj-form_submit,
.mj-topbar_cta { background: #7154d9; }
.mj-form_submit:hover:not([disabled]),
.mj-topbar_cta:hover {
  background: #5f43c4;
  box-shadow: 0 8px 20px rgba(113, 84, 217, .35);
}

/* ==================================================================
   HERO SPACING — final
   Grey between the white header and the purple card = 20px.
   Purple shows 64px above the H1 and 64px below the button.
   (bg is position:absolute, so its top/bottom are insets, and the
   internal spacers must clear the inset to create visible padding.)
   ================================================================== */
.main_hero_wrap { margin-top: 0 !important; }
.main_hero_bg { top: 20px !important; bottom: 40px !important; }
.main_hero_content > .u-section-spacer:first-child { height: 84px !important; }  /* 20 inset + 64 padding */
.main_hero_content > .u-section-spacer:last-child  { height: 104px !important; } /* 40 inset + 64 padding */

@media (max-width: 991px) {
  .main_hero_bg { top: 16px !important; bottom: 24px !important; }
  .main_hero_content > .u-section-spacer:first-child { height: 60px !important; }
  .main_hero_content > .u-section-spacer:last-child  { height: 68px !important; }
}

/* marquee keeps running even when the OS asks for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mj-marquee_track {
    animation: mj-marquee-scroll var(--mj-marquee-duration, 38s) linear infinite !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 72px !important;
  }
  .mj-marquee_item[aria-hidden="true"] { display: flex !important; }
}

/* ---- Tighten hero card -> "trusted by" strip to ~30px ----
   The old gap was 40px (bg bottom inset) + 32px (strip padding) = 72px.
   Drop the bottom inset to 0 so the card ends with the section, keep the
   64px of purple under the button, and let the strip own the 30px gap. */
.main_hero_bg { bottom: 0 !important; }
.main_hero_content > .u-section-spacer:last-child { height: 64px !important; }
.mj-logos { padding-top: 30px !important; }

/* bolder "trusted by leading labs" */
.mj-logos_eyebrow { font-weight: 800 !important; }

@media (max-width: 991px) {
  .main_hero_content > .u-section-spacer:last-child { height: 44px !important; }
  .mj-logos { padding-top: 24px !important; }
}

/* ---- Feature row images: 25% smaller ----
   Narrow the image column rather than shrinking the img inside a full-width
   cell, so the image stays flush to the outer container edge and the middle
   gutter stays controlled. 37.5% of the row = 75% of the old 50/50 split. */
.industry_layout > *:has(img) { flex: 0 0 37.5% !important; }
.industry_layout > *:not(:has(img)) { flex: 1 1 auto !important; }
.industry_wrap img { width: 100%; height: auto; }

@media (max-width: 991px) {
  .industry_layout > *:has(img),
  .industry_layout > *:not(:has(img)) { flex: 1 1 auto !important; }
}

/* ---- Feature rows: fill the container again ----
   flex:1 1 auto let the text cell shrink to its 32rem max-width, so the row
   stopped short of the container edge. flex:1 1 0 makes it absorb the
   remainder, putting the image back flush against the outer margin. */
.industry_layout > *:not(:has(img)) { flex: 1 1 0 !important; min-width: 0; }
.industry_layout > *:has(img) { flex: 0 0 37.5% !important; }

/* ---- Light purple band on the middle feature row ---- */
.industry_wrap.mj-band { background-color: #f1eefc; }

@media (max-width: 991px) {
  .industry_layout > *:not(:has(img)),
  .industry_layout > *:has(img) { flex: 1 1 auto !important; }
}

/* ---- Fix: cap the text MEASURE, not the flex cell ----
   .u-content-wrapper is the flex cell itself, so the earlier 32rem cap
   stopped the row filling the container. Let the cell grow and put the
   measure limit on the heading/paragraph blocks inside it instead. */
.industry_wrap .u-content-wrapper { max-width: none !important; margin-left: 0 !important; }
.industry_wrap .u-heading,
.industry_wrap .u-text { max-width: 42rem; }

/* text-left rows: push the copy toward the image so the gutter stays tight */
.industry_layout > *:first-child:not(:has(img)) .u-heading,
.industry_layout > *:first-child:not(:has(img)) .u-text { margin-left: auto; }

@media (max-width: 991px) {
  .industry_wrap .u-heading,
  .industry_wrap .u-text { max-width: none; margin-left: 0 !important; }
}

/* ---- Centre the comparison section header ---- */
.compare_grid_header { text-align: center; }
.compare_grid_header .u-content-wrapper {
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}
.compare_grid_header .u-eyebrow-wrapper,
.compare_grid_header .u-eyebrow-layout { justify-content: center; }
.compare_grid_header .u-heading { justify-content: center; }
.compare_grid_header .u-heading,
.compare_grid_header .u-eyebrow-wrapper { margin-left: auto; margin-right: auto; }
.compare_grid_header .u-text {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

/* Webflow's w-variant classes out-specify the rules above — force it. */
.compare_grid_header,
.compare_grid_header .u-heading,
.compare_grid_header .u-heading h2,
.compare_grid_header .u-text,
.compare_grid_header .u-text p,
.compare_grid_header .u-eyebrow-text,
.compare_grid_header .u-eyebrow-text p { text-align: center !important; }

.compare_grid_header .u-heading,
.compare_grid_header .u-text,
.compare_grid_header .u-eyebrow-wrapper {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.compare_grid_header .u-text { max-width: 46rem !important; }

/* ==================================================================
   STACKING CARDS
   Each feature row is a card that sticks at an incrementing offset;
   the next card scrolls up and over it, leaving a visible lip of the
   one beneath. After the last card the page scrolls on normally.
   --i is set per card by custom.js.
   ================================================================== */
.mj-stack { position: relative; padding-bottom: 12vh; }
.mj-stack_pin {                    /* was the 100vh pin — now a plain block */
  position: static;
  display: block;
  height: auto;
  overflow: visible;
}

.mj-stack .industry_wrap {
  position: sticky;
  top: calc(88px + (var(--i, 0) * 26px));
  z-index: calc(1 + var(--i, 0));
  background: transparent !important;
  margin-bottom: 40px;
}

/* the container is already the 1297px column — make it the card face */
.mj-stack .industry_contain {
  background: #fff;
  border: 1px solid #d8d3df;
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(31, 14, 48, .10);
  overflow: hidden;
  padding-left: 40px;
  padding-right: 40px;
}
.mj-stack .industry_wrap.mj-band .industry_contain { background: #f1eefc; }

/* trim the rows a little so a stacked card doesn't run past the viewport */
.mj-stack .industry_wrap .u-section-spacer { height: 36px !important; }
.mj-stack .industry_wrap img { max-height: 230px; width: auto; }
.mj-stack .industry_layout > *:has(img) { display: flex; }
.mj-stack .industry_layout > *:first-child:has(img) { justify-content: flex-start; }
.mj-stack .industry_layout > *:last-child:has(img) { justify-content: flex-end; }

/* no hatched dividers between stacked cards */
.mj-stack .section_divider_wrap { display: none !important; }

/* mobile / short screens: plain stacked cards, no sticking */
@media (max-width: 991px), (max-height: 700px) {
  .mj-stack { padding-bottom: 0; }
  .mj-stack .industry_wrap { position: static; margin-bottom: 16px; }
  .mj-stack .industry_wrap img { max-height: none; width: 100%; }
  .mj-stack .industry_contain { padding-left: 20px; padding-right: 20px; }
}

/* ---- Stacked cards: breathing room above the title ----
   Webflow's line-height trim pulls headings up by ~0.36em, which was eating
   most of the top spacer and leaving the title against the card edge. */
.mj-stack .industry_wrap .u-section-spacer { height: 56px !important; }
.mj-stack .industry_wrap .u-heading h2::before,
.mj-stack .industry_wrap .u-heading h2::after {
  content: none !important;
  display: none !important;
  margin: 0 !important;
}

/* ---- Images fill their half of the card ---- */
.mj-stack .industry_layout { align-items: stretch !important; }
.mj-stack .industry_layout > *:has(img) {
  align-self: stretch;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 14px;
}
.mj-stack .industry_wrap img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 991px), (max-height: 700px) {
  .mj-stack .industry_wrap .u-section-spacer { height: 32px !important; }
  .mj-stack .industry_wrap img { height: auto !important; object-fit: contain; }
}

/* ---- Correction: pad the card face, not the section ----
   .u-section-spacer sits OUTSIDE .industry_contain, so raising it only added
   gaps between cards. The card's own padding is what lifts the title. */
.mj-stack .industry_wrap .u-section-spacer { height: 0 !important; }
.mj-stack .industry_contain { padding: 48px 40px !important; }

@media (max-width: 991px), (max-height: 700px) {
  .mj-stack .industry_contain { padding: 28px 20px !important; }
}

/* ==================================================================
   SHIMMER  (ApeLogic recipe: 60% off-screen pause, then a fast sweep)
   Applied to the CTAs and to the side-by-side comparison cards.
   Deliberately NOT applied to the "why do labs choose" stack —
   those already have the sticky stacking motion.
   ================================================================== */
@keyframes mj-shimmer {
  0%, 60% { left: -100%; }
  100%    { left: 160%; }
}

/* --- buttons --- */
.mj-topbar_cta,
.mj-form_submit { position: relative; overflow: hidden; }
.mj-topbar_cta::after,
.mj-form_submit::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.40) 50%,
    transparent 100%);
  animation: mj-shimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}
.mj-form_submit::after { animation-delay: -1.6s; }

/* --- comparison cards: drop in one by one, each with a sweep --- */
/* Progressive enhancement: cards are VISIBLE by default. JS adds .mj-armed to
   the table, which hides them ready to animate. If the script ever fails the
   worst case is no animation rather than an invisible comparison table. */
.compare_grid_row:not(.is-header) { position: relative; }
.compare_grid_table.mj-armed .compare_grid_row:not(.is-header) {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .5s ease var(--d, 0s),
              transform .6s cubic-bezier(.22,.61,.36,1) var(--d, 0s);
}
.compare_grid_table.mj-armed .compare_grid_row:not(.is-header).mj-revealed {
  opacity: 1;
  transform: none;
}

.compare_grid_row:not(.is-header)::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(160,139,237,.14) 42%,
    rgba(255,255,255,.55) 50%,
    rgba(160,139,237,.14) 58%,
    transparent 100%);
  pointer-events: none;
  z-index: 2;
}
/* One card sweeps at a time, 2s apart, looping down the table.
   Cycle = 2s x number of cards (set by JS as --cycle); the sweep itself
   occupies ~9% of that, so it stays quick while the queue stays slow. */
@keyframes mj-card-shimmer {
  0%   { left: -100%; }
  9%   { left: 160%; }
  100% { left: 160%; }
}
/* Held until the table scrolls into view — otherwise the queue is already
   part-way through its cycle by the time the section is on screen. */
.compare_grid_row:not(.is-header)::after { opacity: 1; animation: none; }
.compare_grid_table.mj-armed .compare_grid_row:not(.is-header).mj-revealed::after {
  animation: mj-card-shimmer var(--cycle, 12s) linear calc(var(--i, 0) * 2s) infinite;
}

/* ---- Halve the gap under the logo strip, darken the eyebrow ---- */
.mj-logos { padding-bottom: 32px !important; }   /* was 64px */
.mj-logos_eyebrow { color: var(--_default---swatch--neutral-0, #1f0e30) !important; }

/* ---- Hero photo: right half, behind the form, fading in from the gradient ----
   Lives inside .main_hero_bg so it inherits the card's rounded corners and
   clipping, and stays behind the hero content. Mirrored copy of the upload
   (flipped at the file level, so no transform to fight with the mask).
   Blend mode keeps it in the purple family rather than a grey rectangle. */
/* removed: old right-half photo rule */

/* ---- Keep the section title on screen while the cards stack under it ----
   The title section and .mj-stack now share .mj-stackwrap, so the title can
   stick for the full length of the stack. Card sticky offsets are pushed
   below the title's measured height (--head-h, set by custom.js). */
.mj-stackwrap { position: relative; overflow: visible; }
.mj-stackwrap > .card_grid_divided_wrap {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--_theme---background, #f2f1f4);
}
/* trim the title block so it doesn't eat the viewport while pinned */
.mj-stackwrap > .card_grid_divided_wrap .u-section-spacer { height: 28px !important; }

.mj-stack .industry_wrap {
  top: calc(var(--head-h, 120px) + 16px + (var(--i, 0) * 26px));
}

@media (max-width: 991px), (max-height: 700px) {
  .mj-stackwrap > .card_grid_divided_wrap { position: static; }
  .mj-stack .industry_wrap { top: auto; }
}

/* ==================================================================
   CHAT BUBBLES — fixed lower-left, always on
   Row 1: video -> YouTube lightbox.  Row 2: question -> mini form.
   ================================================================== */
.mj-chat {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  font-family: var(--_typography---font--primary-family, Arial, sans-serif);
}
.mj-chat_row { display: flex; align-items: center; gap: 10px; }

.mj-chat_bubble {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  border: 1px solid #e2ddf0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 6px 18px rgba(31,14,48,.16);
  transition: transform .16s ease, box-shadow .16s ease;
}
.mj-chat_bubble svg { width: 26px; height: 19px; display: block; }
.mj-chat_bubble img { width: 28px; height: 28px; display: block; }
.mj-chat_bubble:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(31,14,48,.22); }

.mj-chat_label {
  border: 1px solid #e2ddf0;
  background: #fff;
  color: #1f0e30;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  padding: 11px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(31,14,48,.14);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.mj-chat_label:hover { transform: translateY(-2px); background: #faf9ff; }
.mj-chat_bubble:focus-visible,
.mj-chat_label:focus-visible { outline: 2px solid #7154d9; outline-offset: 2px; }

/* --- question panel --- */
.mj-ask {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 12px;
  width: 300px;
  padding: 18px;
  background: #fff;
  border: 1px solid #e2ddf0;
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(31,14,48,.22);
}
.mj-ask[hidden] { display: none; }
.mj-ask_close {
  position: absolute; top: 8px; right: 10px;
  border: 0; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: #76678e; padding: 4px;
}
.mj-ask_title {
  margin: 0 0 12px;
  font-family: var(--_typography---font--secondary-family, Almarai, sans-serif);
  font-size: 17px; font-weight: 400; letter-spacing: -0.02em; color: #1f0e30;
}
.mj-ask_title::before, .mj-ask_title::after { content: none !important; }
.mj-ask_label { display: block; font-size: 12px; font-weight: 500; color: #76678e; margin: 0 0 5px; }
.mj-ask_input {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 14px; color: #1f0e30;
  padding: 9px 11px; margin-bottom: 12px;
  background: #f7f6fb;
  border: 1px solid #e2ddf0; border-radius: 9px;
  resize: vertical;
}
.mj-ask_input:focus { outline: none; border-color: #7154d9; background: #fff; }
.mj-ask_error { display: block; font-size: 12px; color: #d94a4a; min-height: 14px; margin-bottom: 6px; }
.mj-ask_submit {
  width: 100%; padding: 11px 16px; border: 0; border-radius: 9px;
  background: #7154d9; color: #fff; font: inherit; font-size: 14px; font-weight: 700;
  letter-spacing: -0.02em; cursor: pointer;
}
.mj-ask_submit:hover { background: #5f43c4; }
.mj-ask_done { margin: 0; font-size: 14px; color: #2e9e6b; }
.mj-ask_done[hidden] { display: none; }

/* --- video lightbox --- */
.mj-lightbox { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; }
.mj-lightbox[hidden] { display: none; }
.mj-lightbox_backdrop { position: absolute; inset: 0; background: rgba(20,10,32,.78); }
.mj-lightbox_inner { position: relative; width: min(900px, 92vw); }
.mj-lightbox_frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.mj-lightbox_frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mj-lightbox_close {
  position: absolute; top: -44px; right: 0;
  background: none; border: 0; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; padding: 4px 8px;
}

@media (max-width: 767px) {
  .mj-chat { left: 14px; bottom: 14px; gap: 9px; }
  .mj-chat_bubble { width: 46px; height: 46px; flex-basis: 46px; }
  .mj-chat_label { font-size: 13px; padding: 9px 13px; }
  .mj-ask { width: min(300px, calc(100vw - 40px)); }
}

/* ==================================================================
   HERO PHOTO — full width, with a dark scrim on the left for legibility
   Reverses the left-half version. Photo moves to ::before and the scrim
   sits on ::after, because ::after paints ABOVE ::before — the scrim has
   to be on top of the photo to do anything.
   ================================================================== */

/* ==================================================================
   TESTIMONIALS — static review grid (Swiper destroyed in custom.js)
   ================================================================== */
.mj-reviews .tesimonial_slide_content_wrap,
.mj-reviews .tesimonial_slide_slider,
.mj-reviews .testimonial_button_wrap,
.mj-reviews .tesimonial_slide_holder {
  overflow: visible !important;
  height: auto !important;
}
.mj-reviews .tesimonial_slide_arrow,
.mj-reviews .tesimonial_slide_arrows_wrap { display: none !important; }

.mj-reviews .tesimonial_slide_list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  transform: none !important;
  width: 100% !important;
  cursor: auto !important;
  flex-wrap: wrap;
}

.mj-reviews .tesimonial_slide_item {
  width: auto !important;
  margin: 0 !important;
  height: auto !important;
  background: #fff;
  border: 1px solid #d8d3df;
  border-radius: 20px;
  padding: 0 28px 26px;
  box-shadow: 0 1px 2px rgba(31,14,48,.05), 0 10px 30px rgba(31,14,48,.07);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mj-reviews .tesimonial_slide_item:hover {
  transform: translateY(-3px);
  border-color: #c9c2d6;
  box-shadow: 0 18px 44px rgba(31,14,48,.12);
}

/* avatar overlaps the top edge of the card */
.mj-reviews .testimonial_image_wrap {
  width: 68px;
  height: 68px;
  margin: -34px 0 16px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(31,14,48,.14);
  background: #ececfc;
  flex: 0 0 68px;
}
.mj-reviews .testimonial_image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

.mj-reviews .tesimonial_slide_quote {
  font-family: var(--_typography---font--primary-family, Arial, sans-serif) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  letter-spacing: -0.02em !important;
  font-weight: 400 !important;
  color: #1f0e30 !important;
  margin: 0 0 18px !important;
}
.mj-reviews .tesimonial_slide_quote::before,
.mj-reviews .tesimonial_slide_quote::after { content: none !important; }

.mj-reviews .testimoniail_author_wrapper { margin-top: auto; }
.mj-reviews .testimonial_author {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #1f0e30 !important;
}
.mj-reviews .testimonial_position {
  font-family: var(--_typography---font--tertiary-family, monospace) !important;
  font-size: 12px !important;
  letter-spacing: -0.02em !important;
  color: #76678e !important;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  /* slider layout applied in the mobile block below */
  .mj-reviews .tesimonial_slide_item { padding: 0 20px 20px; }
}

/* ==================================================================
   REVIEWS — even spacing, bigger avatars, no container side rules
   Card structure is: item > content_wrap > (text_wrap | image_wrap),
   so the avatar is reordered to the top and the whole card becomes a
   single column with one consistent gap.
   ================================================================== */
.testimonial_section_contain { border: 0 !important; }

.mj-reviews .tesimonial_slide_item { padding: 28px !important; }

.mj-reviews .testimonial_slide_content_wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 20px !important;
  height: 100%;
  width: 100%;
}

/* avatar: top of the card, sized properly (Webflow's 8px padding removed) */
.mj-reviews .testimonial_image_wrap {
  order: -1;
  width: 88px !important;
  height: 88px !important;
  max-width: none !important;
  flex: 0 0 88px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(31,14,48,.14);
}
.mj-reviews .testimonial_image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 50% !important;
  display: block;
}

/* text column fills the rest so the author always sits on the baseline */
.mj-reviews .testimonial_slide_text_wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100%;
  flex: 1 1 auto;
}
.mj-reviews .tesimonial_slide_quote { margin: 0 !important; }
.mj-reviews .testimoniail_author_wrapper { margin-top: auto; }
.mj-reviews .testimonial_author { display: block; margin-bottom: 4px; }

/* the full-height side rules were on .tesimonial_slide_slider (note the
   single-t misspelling in Webflow's class), not the section container */
.mj-reviews .tesimonial_slide_slider,
.mj-reviews .tesimonial_slide_content_wrap,
.mj-reviews .testimonial_button_wrap,
.mj-reviews .tesimonial_slide_holder { border: 0 !important; }

/* ---- Match the "Why do labs choose" section's margins to the
   "Labbit vs LabWare" section (59px from section edge to text ink) ---- */
.mj-stackwrap > .card_grid_divided_wrap .u-section-spacer { height: 0 !important; }
/* padding must be !important: an inline <style> later in the document
   carries .u-section:has(> .u-section-spacer){padding:0} at equal specificity */
.mj-stackwrap > .card_grid_divided_wrap { padding-top: 59px !important; padding-bottom: 59px !important; }

/* the trim pseudo-elements were dragging this heading up out of its padding */
.mj-stackwrap > .card_grid_divided_wrap :is(h1,h2,h3,h4,h5,h6,p)::before,
.mj-stackwrap > .card_grid_divided_wrap :is(h1,h2,h3,h4,h5,h6,p)::after {
  content: none !important;
  display: none !important;
  margin: 0 !important;
}

/* ---- Testimonials heading ---- */
.mj-reviews_head { text-align: center; margin: 0; }
.mj-reviews_title::before, .mj-reviews_title::after { content: none !important; display: none !important; margin: 0 !important; }
.mj-reviews_title {
  margin: 0;
  font-family: var(--_typography---font--secondary-family, Almarai, Arial, sans-serif);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #1f0e30;
}
.mj-reviews_title::before, .mj-reviews_title::after { content: none !important; }
@media (max-width: 767px) { .mj-reviews_title { font-size: 30px; } }

/* the title-only section still carries an empty content column + flex gap,
   which added 64px of dead space under the heading */
.mj-stackwrap > .card_grid_divided_wrap .card_grid_divided_layout { gap: 0 !important; row-gap: 0 !important; }
.mj-stackwrap > .card_grid_divided_wrap .card_grid_divided_content { display: none !important; }

/* ---- Red X on LabWare cells, matching the purple check sizing ---- */
.compare_grid_cell .mj-x {
  width: 1.375rem;
  flex: 0 0 1.375rem;
  margin-top: .15rem;
}

/* ---- Testimonial section: 59px spacing to match all other sections ----
   Same !important override needed as the comparison section — the inline
   <style> block carries .u-section:has(>.u-section-spacer){padding:0} */
.testimonial_section_wrap.u-section { padding-top: 59px !important; padding-bottom: 59px !important; }
.testimonial_section_wrap .u-section-spacer { height: 0 !important; }

/* last review card's bottom margin was stacking with the section padding */
.mj-reviews .tesimonial_slide_list { margin-bottom: -48px; }

/* ---- LabWare cells: match the Labbit cell layout ----
   Labbit cells get their icon/text flex from .is-checkbox — LabWare cells
   need the same treatment so the red X sits like the purple check. */
/* LabWare cells match the Labbit cell layout exactly */
.compare_grid_cell:has(> .mj-x) {
  display: grid;
  grid-template-columns: 44.5px 1fr;
  align-items: start;
  gap: 32px;
}
.compare_grid_cell:has(> .mj-x) .mj-x { justify-self: center; }

.mj-stackwrap { position: relative; overflow: visible; }
.mj-stackwrap > .card_grid_divided_wrap { z-index: 20; overflow: visible; position: sticky; }
.mj-stack .industry_wrap { z-index: calc(1 + var(--i, 0)); }

@media (max-width: 991px) {  }

/* pull the review cards closer to the title — the nested wrappers between
   them carry margins and padding that can't be individually zeroed without
   breaking the Swiper-destroy layout */
.mj-reviews .tesimonial_slide_content_wrap { margin-top: -80px; }

/* ==================================================================
   DECORATIVE SQUARES — simple absolute boxes inside .mj-stackwrap
   Clipped by the stackwrap so they never touch the divider.
   ================================================================== */
.mj-stackwrap { clip-path: inset(0); }

.mj-sq {
  position: absolute;
  background: #E4DEF5;
  border: 2px solid #C0B4E4;
  border-radius: 10px;
  pointer-events: none;
  z-index: 0;
}

.mj-sq-1 { width: 72px; height: 72px; top: 40px;  left: 32px; }
.mj-sq-2 { width: 44px; height: 44px; top: 320px; left: 160px; transform: rotate(12deg); }
.mj-sq-3 { width: 88px; height: 88px; top: 20px;  right: 50px; transform: rotate(-8deg); }
.mj-sq-4 { width: 36px; height: 36px; top: 280px; right: 180px; }
.mj-sq-5 { width: 56px; height: 56px; top: 55%;   left: 80px; transform: rotate(18deg); }
.mj-sq-6 { width: 48px; height: 48px; top: 65%;   right: 100px; transform: rotate(-14deg); }

@media (max-width: 991px) { .mj-sq { display: none; } }

/* ==================================================================
   FAQ — Path 2 Purpose style: title left, accordions right
   ================================================================== */
.mj-faq-section {
  padding: 72px 0;
}
.mj-faq-inner {
  max-width: 1297px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 64px;
  align-items: start;
}

/* left column: title + sub */
.mj-faq-eyebrow {
  display: block;
  font-family: var(--_typography---font--tertiary-family, monospace);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #a08bed;
  margin-bottom: 16px;
}
.mj-faq-title {
  margin: 0 0 20px;
  font-family: var(--_typography---font--secondary-family, Almarai, sans-serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #1f0e30;
}
.mj-faq-title::before, .mj-faq-title::after { content: none !important; }
.mj-faq-sub {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: #76678e;
  margin: 0;
}
.mj-faq-link { color: #7154d9; text-decoration: underline; text-underline-offset: 3px; }
.mj-faq-link:hover { color: #5f43c4; }

/* right column: accordions */
.mj-faq_item {
  background: #fff;
  border: 1px solid #d8d3df;
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
}
.mj-faq_item:last-child { margin-bottom: 0; }
.mj-faq_item[open] { border-color: #c0b4e4; }

.mj-faq_q {
  width: 100%;
  text-align: left;
  padding: 22px 24px;
  font-family: var(--_typography---font--primary-family, sans-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #1f0e30;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  list-style: none;
}
.mj-faq_q::-webkit-details-marker { display: none; }
.mj-faq_q::after {
  content: "+";
  font-size: 24px;
  color: #7154d9;
  font-weight: 400;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.mj-faq_item[open] .mj-faq_q::after { content: "−"; }

.mj-faq_a {
  padding: 0 24px 22px;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: #76678e;
}

@media (max-width: 767px) {
  .mj-faq-inner { grid-template-columns: 1fr; gap: 32px; }
  .mj-faq-title { font-size: 30px; }
}

/* ---- Form submit arrow ---- */
.mj-form_arrow {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}


/* ==================================================================
   HERO PHOTO — real <img> inside .main_hero_bg (pseudo-elements were
   buried under Webflow's violet bubbles texture image).
   ================================================================== */
.mj-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .55;
  pointer-events: none;
}
.main_hero_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(28,12,46,.25) 0%, transparent 35%),
    linear-gradient(90deg,
      rgba(28,12,46,.95) 0%,
      rgba(28,12,46,.92) 25%,
      rgba(28,12,46,.7) 35%,
      rgba(28,12,46,.2) 42%,
      transparent 50%);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 991px) {
  .mj-hero-photo { opacity: .2; }
}

/* ---- Sticky top bar ---- */
.mj-topbar {
  position: sticky;
  top: 0;
  z-index: 9100;
}


/* ---- Highlighted "Labbit" in section titles ---- */
.mj-hl {
  background: rgba(160, 139, 237, .22);
  border-radius: 0;
  padding: 2px 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- Sticky top bar ---- */
.mj-topbar {
  position: sticky;
  top: 0;
  z-index: 9100;
}

/* ---- Top bar nav links ---- */
.mj-topbar_inner { gap: 0; }
.mj-topbar_nav {
  display: flex;
  align-items: center;
  gap: 52px;
  margin: 0 auto;
}
.mj-topbar_link {
  font-family: var(--_typography---font--primary-family, sans-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #4a4358;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}
.mj-topbar_link:hover { color: #1f0e30; }

@media (max-width: 767px) {
  .mj-topbar_nav { display: none; }
}

/* ---- Hero product screenshots: two tilted screens, overlapping ---- */
.mj-hero-screens {
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
  width: 42%;
  max-width: 560px;
  aspect-ratio: 9 / 10;
  z-index: 1;
  pointer-events: none;
}
.mj-hero-screen {
  position: absolute;
  width: 92%;
  height: auto;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.2);
  box-shadow:
    0 20px 56px rgba(0,0,0,.3),
    0 4px 10px rgba(0,0,0,.15);
}
.mj-hero-screen--back {
  top: 0;
  left: 0;
  transform: rotate(-4deg);
  opacity: 1;
  z-index: 1;
}
.mj-hero-screen--front {
  bottom: 0;
  right: 0;
  transform: rotate(3deg);
  opacity: 1;
  z-index: 2;
}

/* slight grey tint on the form so it pops off the screenshot */
.mj-form {
  background: rgba(248, 247, 252, .97) !important;
}

@media (max-width: 991px) {
  .mj-hero-screens { display: none; }
}

/* ==================================================================
   HERO: big demo CTA button + screenshots, form in a lightbox
   ================================================================== */

/* the right column now holds the screens + CTA instead of the form */
.mj-hero-cta-area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* screenshots: relative inside the CTA area, not absolute in the bg */
.mj-hero-cta-area .mj-hero-screens {
  position: relative;
  right: auto;
  top: auto;
  transform: none;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 9 / 10;
}

/* ---- big demo button: centered on the screenshots ---- */
.mj-demo-btn {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 32px;
  background: linear-gradient(135deg, #7154d9 0%, #5a3ec7 100%);
  color: #fff;
  border: 3px solid rgba(255,255,255,.25);
  border-radius: 18px;
  cursor: pointer;
  font-family: var(--_typography---font--primary-family, sans-serif);
  box-shadow:
    0 20px 56px rgba(113,84,217,.45),
    0 6px 16px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .18s ease, box-shadow .18s ease;
  text-decoration: none;
  white-space: nowrap;
}
.mj-demo-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 28px 64px rgba(113,84,217,.55),
    0 8px 20px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.mj-demo-btn:active { transform: translateY(0) scale(.99); }

.mj-demo-btn_icon { width: 40px; height: 40px; flex: 0 0 40px; opacity: .85; }
.mj-demo-btn_text { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.mj-demo-btn_text strong {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.mj-demo-btn_text small {
  font-size: 13px;
  font-weight: 400;
  opacity: .75;
  letter-spacing: -0.01em;
}
.mj-demo-btn_arrow { width: 24px; height: 24px; flex: 0 0 24px; }

/* shimmer on the demo button */
.mj-demo-btn { overflow: hidden; }
.mj-demo-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.3) 50%, transparent 100%);
  animation: mj-shimmer 5s ease-in-out infinite;
  pointer-events: none;
}

/* ---- form lightbox ---- */
.mj-form-lightbox { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; }
.mj-form-lightbox[hidden] { display: none; }
.mj-form-lightbox_backdrop { position: absolute; inset: 0; background: rgba(20,10,32,.75); }
.mj-form-lightbox_inner {
  position: relative;
  width: min(460px, 92vw);
  background: #fff;
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.mj-form-lightbox_close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: 0; cursor: pointer;
  font-size: 28px; line-height: 1; color: #76678e; padding: 4px;
}
.mj-form-lightbox .mj-form {
  background: transparent !important;
  border: 0;
  box-shadow: none;
  padding: 0;
  max-width: none;
  margin: 0;
  border-radius: 0;
}

@media (max-width: 991px) {
  .mj-hero-cta-area .mj-hero-screens { max-width: 340px; }
  .mj-demo-btn { padding: 16px 22px; gap: 12px; }
  .mj-demo-btn_text strong { font-size: 17px; }
  .mj-demo-btn_icon { width: 32px; height: 32px; flex-basis: 32px; }
}



/* ==================================================================
   MOBILE TESTIMONIALS: horizontal swipe slider instead of stacked grid
   ================================================================== */
@media (max-width: 767px) {
  .mj-reviews .tesimonial_slide_list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding-bottom: 12px;
    margin: 0 -24px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .mj-reviews .tesimonial_slide_item {
    flex: 0 0 85%;
    max-width: 85%;
    scroll-snap-align: center;
  }
  /* show a subtle scrollbar hint */
  .mj-reviews .tesimonial_slide_list::-webkit-scrollbar { height: 4px; }
  .mj-reviews .tesimonial_slide_list::-webkit-scrollbar-track { background: transparent; }
  .mj-reviews .tesimonial_slide_list::-webkit-scrollbar-thumb { background: #d8d3df; border-radius: 4px; }

  /* hero adjustments */
  .main_hero_text_wrap h2 { font-size: 32px !important; }
  .main_hero_text_wrap .u-text p { font-size: 14px !important; }
  .mj-hero-bullets li { font-size: 14px !important; }
  .mj-demo-btn { padding: 16px 20px; gap: 10px; border-radius: 14px; }
  .mj-demo-btn_text strong { font-size: 17px; }
  .mj-demo-btn_text small { font-size: 12px; }
  .mj-demo-btn_icon { width: 30px; height: 30px; flex-basis: 30px; }

  /* comparison cards: tighter on mobile */
  .compare_grid_row:not(.is-header) { border-radius: 14px; }
  .compare_grid_row:not(.is-header) .compare_grid_cell { padding: 18px 16px; }
  .compare_grid_title { font-size: 18px !important; }

  /* feature cards */
  .mj-stack .industry_contain { padding: 24px 18px !important; border-radius: 16px; }
  .mj-stack .industry_wrap { margin-bottom: 16px; }

  /* form lightbox: full width on mobile */
  .mj-form-lightbox_inner { width: 94vw; padding: 28px 20px; border-radius: 16px; }

  /* chat bubbles: smaller on mobile so they don't block content */
  .mj-chat_bubble { width: 42px; height: 42px; flex-basis: 42px; }
  .mj-chat_label { font-size: 12px; padding: 8px 12px; }
}

@media (max-width: 480px) {
  .mj-reviews .tesimonial_slide_item { flex: 0 0 88%; max-width: 88%; }
}


/* ==================================================================
   STARBURST DEMO BUTTON
   ================================================================== */
.mj-demo-btn--burst {
  position: absolute;
  z-index: 10;
  width: 210px;
  height: 210px;
  left: 50%;
  top: 58%;
  margin-left: -355px;
  margin-top: -105px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: scale .3s cubic-bezier(.22,.61,.36,1);
  scale: 1;
  animation: mj-burst-spin 25s linear infinite, mj-burst-breathe 3s ease-in-out infinite;
}
.mj-demo-btn--burst:hover {
  animation-play-state: paused;
  scale: 1.12;
}
.mj-demo-btn--burst::after { display: none; }

.mj-burst-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #7154d9;
  filter: drop-shadow(0 8px 28px rgba(113,84,217,.5));
  animation: mj-burst-spin 30s linear infinite;
}

.mj-burst-text {
  position: relative;
  z-index: 2;
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #fff;
  text-align: center;
  font-family: var(--_typography---font--primary-family, sans-serif);
  pointer-events: none;
  background: none !important;
  -webkit-text-fill-color: #fff;
}
.mj-demo-btn--burst::selection,
.mj-burst-text::selection,
.mj-burst-text *::selection { background: transparent; }
.mj-burst-text strong {
  font-size: 22px;
  text-shadow: 0 2px 12px rgba(30,10,60,.6), 0 1px 3px rgba(0,0,0,.4);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.mj-burst-text small {
  font-size: 13px;
  text-shadow: 0 1px 8px rgba(30,10,60,.5);
  font-weight: 600;
  opacity: .8;
  letter-spacing: 0.02em;
}

@keyframes mj-burst-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes mj-burst-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* the spin only applies to the SVG, the text stays still */
.mj-demo-btn--burst { animation: mj-burst-breathe 3s ease-in-out infinite; }


@media (max-width: 991px) {
  .mj-demo-btn--burst { display: none !important; }
  .mj-burst-arrow { display: none !important; }
  .mj-burst-text strong { font-size: 17px; }
}
@media (max-width: 480px) {
  /* starburst already hidden at 991px */
}

/* ---- Arrow from the starburst ---- */
.mj-burst-arrow {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 58%;
  margin-left: 70px;
  margin-top: 60px;
  width: 60px;
  height: 70px;
  opacity: .9;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.3));
  pointer-events: none;
  transform: rotate(-15deg);
}
@media (max-width: 991px) {
  .mj-burst-arrow { width: 45px; height: 55px; margin-left: 55px; margin-top: 50px; }
}
@media (max-width: 480px) {
  .mj-burst-arrow { display: none; }
}


/* ---- Mobile hero: inline CTA button instead of starburst ---- */
@media (max-width: 991px) {
  .mj-hero-cta-area {
    justify-content: center;
    padding: 24px 0 0;
  }
  /* simple mobile demo button */
  .mj-hero-cta-area::before {
    content: "Book a Live Demo →";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 24px;
    background: #7154d9;
    color: #fff;
    font-family: var(--_typography---font--primary-family, sans-serif);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    border-radius: 12px;
    cursor: pointer;
    pointer-events: none; /* the area itself is clickable via JS */
  }
  /* make the whole CTA area clickable */
  .mj-hero-cta-area { cursor: pointer; }

  /* hero needs more bottom space on mobile */
  .main_hero_content > .u-section-spacer:last-child { height: 80px !important; }

  /* hero photo: subtler on mobile */
  .mj-hero-photo { opacity: .15 !important; }
}

/* ---- Mobile testimonials spacing fix ---- */
@media (max-width: 767px) {
  .mj-reviews .tesimonial_slide_content_wrap { margin-top: -20px !important; }
  .mj-reviews .tesimonial_slide_list { margin-bottom: 0 !important; }
  .testimonial_section_wrap.u-section { padding-bottom: 10px !important; }
}

/* kill all outlines/borders on the starburst */
.mj-demo-btn--burst,
.mj-demo-btn--burst:hover,
.mj-demo-btn--burst:focus,
.mj-demo-btn--burst:focus-visible,
.mj-demo-btn--burst:active {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}


/* ---- Cell float: gentle wobble instead of full rotation ---- */
@keyframes mj-cell-float {
  0%   { transform: rotate(0deg)   scale(1); }
  25%  { transform: rotate(6deg)   scale(1.02); }
  50%  { transform: rotate(-3deg)  scale(0.98); }
  75%  { transform: rotate(4deg)   scale(1.01); }
  100% { transform: rotate(0deg)   scale(1); }
}

/* ---- Cell: instant appearance (hide until rendered, then fade in) ---- */
.mj-cell-bg {
  filter: drop-shadow(0 0 18px rgba(113,84,217,.5));
}


/* ---- V2: form back in the hero ---- */
.main_hero_img_wrap .mj-form {
  background: rgba(255, 255, 255, .97) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  box-shadow: 0 18px 48px -24px rgba(0,0,0,.35) !important;
  max-width: 420px;
  margin-left: auto;
}
.mj-hero-screens { display: none !important; }
.mj-demo-btn--burst { display: none !important; }
.mj-burst-arrow { display: none !important; }
.mj-hero-cta-area { display: none !important; }

/* ==================================================================
   BOTTOM CTA — matching form, clean layout
   ================================================================== */
.mj-bottom-cta { padding: 72px 0; }
.mj-bottom-cta_inner {
  max-width: 1297px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 64px;
  align-items: start;
}
.mj-bottom-cta_text { padding-top: 16px; }
.mj-bottom-cta_title {
  margin: 0 0 20px;
  font-family: var(--_typography---font--secondary-family, Almarai, sans-serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #1f0e30;
}
.mj-bottom-cta_title::before, .mj-bottom-cta_title::after { content: none !important; }
.mj-bottom-cta_sub {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: #76678e;
  margin: 0 0 32px;
  max-width: 32rem;
}
.mj-bottom-cta_sub::before, .mj-bottom-cta_sub::after { content: none !important; }
.mj-bottom-cta_logos { margin-top: 8px; }
.mj-bottom-logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
}
.mj-bottom-logos .mj-marquee_item img {
  height: auto;
  max-height: 36px;
  width: auto;
  max-width: 140px;
  filter: grayscale(1);
  opacity: .55;
  object-fit: contain;
}
/* normalize the outliers */
.mj-bottom-logos .mj-marquee_item:nth-child(3) img { max-height: 32px; min-width: 80px; } /* Helix */
.mj-bottom-logos .mj-marquee_item:nth-child(2) img { min-width: 120px; } /* LinusBio */
.mj-bottom-logos .mj-marquee_item:nth-child(4) img { max-width: 170px; } /* BTO - very wide */
.mj-bottom-cta_form .mj-form {
  background: #fff !important;
  border: 1px solid #d8d3df !important;
  border-radius: 20px !important;
  padding: 28px !important;
  box-shadow: 0 18px 48px -24px rgba(0,0,0,.2) !important;
  max-width: none;
  margin: 0;
}

@media (max-width: 767px) {
  .mj-bottom-cta_inner { grid-template-columns: 1fr; gap: 32px; }
  .mj-bottom-cta_title { font-size: 30px; }
}

/* ==================================================================
   STRIPPED FOOTER
   ================================================================== */
.mj-footer {
  background: #1f0e30;
  color: rgba(255,255,255,.75);
  padding: 40px 0;
}
.mj-footer_inner {
  max-width: 1297px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
.mj-footer_logo { height: 22px; width: auto; display: block; filter: brightness(0) invert(1); opacity: .8; }
.mj-footer_tagline {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  opacity: .55;
  max-width: 20rem;
}
.mj-footer_tagline::before, .mj-footer_tagline::after { content: none !important; }
.mj-footer_right { text-align: right; }
.mj-footer_address {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 6px;
  opacity: .6;
}
.mj-footer_address::before, .mj-footer_address::after { content: none !important; }
.mj-footer_copy {
  font-size: 12px;
  opacity: .4;
  margin: 0;
  font-family: var(--_typography---font--tertiary-family, monospace);
  letter-spacing: -0.02em;
}
.mj-footer_copy::before, .mj-footer_copy::after { content: none !important; }

@media (max-width: 767px) {
  .mj-footer_inner { flex-direction: column; text-align: center; }
  .mj-footer_right { text-align: center; }
}