/*============================================================================================================================*/
/* CLEANUP NOTE                                                                                                               */
/* - Legacy experimental sections are retained below because they may still be referenced by the test page.                  */
/* - The active 2026 homepage sections assume Montserrat, Source Sans 3, JetBrains Mono, and Comfortaa are loaded globally.   */
/* - Do not add per-section @import rules for brand fonts.                                                                    */
/*============================================================================================================================*/

/*----------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------x----------------------------------------------------------------------------------*/
/*----------HOMEPAGE TESTING CSS FILE-----------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------*/

/*----------Includes homepage sections on the test page only. Final will be migrated to homepage only css---------------------*/

/*----------------------------------------------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------*/
/*-------------------------------------------------------------*/
/*-------------------------------------------------------------*/
/*-------------------------------------------------------------*/
/*--------------- TESTING NEW HOMEPAGE ---------------*/
/*-------------------------------------------------------------*/
/*-------------------------------------------------------------*/
/*-------------------------------------------------------------*/
/*-------------------------------------------------------------*/

/*=======================================================
=========================================================
     MANOLIN Homepage Hero
=========================================================
========================================================*/


/* Brand fonts are loaded globally. Do not add per-section font imports here. */

.manolin-hero-test {
  --manolin-hero-navy-test: #06141f;
  --manolin-hero-cyan-test: #b2dafb;
  --manolin-hero-teal-test: #68d7c7;
  --manolin-hero-secondary-test: #2896ac;
  --manolin-hero-secondary-hover-test: #46b2c8;
  --manolin-hero-line-test: rgba(184, 222, 235, 0.18);
  --manolin-hero-line-strong-test: rgba(184, 222, 235, 0.34);

  position: relative;
  left: 50%;
  width: 100vw;
  min-height: 920px;
  margin-left: -50vw;
  overflow: hidden;

  color: #f7fdff;

  background:
    radial-gradient(
      circle at 78% 36%,
      rgba(66, 148, 179, 0.15),
      transparent 28%
    ),
    linear-gradient(
      122deg,
      #05131e 0%,
      #071924 50%,
      #0b2534 100%
    );

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif;
}

.manolin-hero-test *,
.manolin-hero-test *::before,
.manolin-hero-test *::after {
  box-sizing: border-box;
}

.manolin-hero-grid-test {
  position: absolute;
  inset: 0;
  opacity: 0.7;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(166, 209, 225, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(166, 209, 225, 0.042) 1px,
      transparent 1px
    );

  background-size: 52px 52px;
}

.manolin-hero-grid-test::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(3, 14, 21, 0.6),
      transparent 58%,
      rgba(4, 15, 22, 0.08)
    );
}

.manolin-hero-container-test {
  position: relative;
  z-index: 2;

  width: min(
    calc(100% - 40px),
    1280px
  );

  margin: 0 auto;
  padding-top: 125px;
  padding-bottom: 76px;
}

.manolin-hero-layout-test {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 36px;
  align-items: center;
}

.manolin-hero-eyebrow-test {
  margin-bottom: 13px;

  color: var(--manolin-hero-cyan-test);

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;

  font-size: 10px;
  font-weight: 200;
  letter-spacing: 0.15em;
  line-height: 1.45;
  text-transform: uppercase;
}

.manolin-hero-title-test {
  max-width: 930px;
  margin: 0 0 25px;

  color: #f7fdff;

  font-family:
    "Comfortaa",
    "Montserrat",
    Arial,
    sans-serif;

  font-size: clamp(58px, 7.7vw, 65px);
  font-weight: 700;
  letter-spacing: -0.084em;
  line-height: 0.94;
}

.manolin-hero-description-test {
  max-width: 760px;
  margin: 0 0 29px;

  color: rgba(221, 241, 247, 0.74);

  font-size: 15px;
  font-weight: 500;
  line-height: 1.72;
}

.manolin-hero-actions-test {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-bottom: 41px;
}

.manolin-hero-button-primary-test,
.manolin-hero-button-secondary-test,
.manolin-hero-button-primary-test:link,
.manolin-hero-button-primary-test:visited,
.manolin-hero-button-primary-test:hover,
.manolin-hero-button-primary-test:focus,
.manolin-hero-button-primary-test:active,
.manolin-hero-button-secondary-test:link,
.manolin-hero-button-secondary-test:visited,
.manolin-hero-button-secondary-test:hover,
.manolin-hero-button-secondary-test:focus,
.manolin-hero-button-secondary-test:active {
  box-sizing: border-box;

  width: max-content;
  min-width: max-content;
  min-height: 48px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  flex: 0 0 auto;

  padding: 0 17px;

  border-style: solid;
  border-width: .5px;

  font-family:
    "Montserrat",
    Arial,
    sans-serif;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;

  text-decoration: none !important;
  text-underline-offset: 0 !important;

  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.manolin-hero-button-primary-test,
.manolin-hero-button-primary-test:link,
.manolin-hero-button-primary-test:visited {
  border-color: var(--manolin-hero-cyan-test);
  background: var(--manolin-hero-cyan-test);
  color: var(--manolin-hero-navy-test) !important;
}

.manolin-hero-button-primary-test:hover,
.manolin-hero-button-primary-test:focus,
.manolin-hero-button-primary-test:active {
  border-color: #c9e8ff;
  background: #c9e8ff;
  color: var(--manolin-hero-navy-test) !important;
  transform: translateY(-2px);
}

.manolin-hero-button-secondary-test,
.manolin-hero-button-secondary-test:link,
.manolin-hero-button-secondary-test:visited {
  border-color: var(--manolin-hero-secondary-test);
  background: transparent;
  color: var(--manolin-hero-secondary-test) !important;
}

.manolin-hero-button-secondary-test:hover,
.manolin-hero-button-secondary-test:focus,
.manolin-hero-button-secondary-test:active {
  border-color: var(--manolin-hero-secondary-hover-test);
  background: rgba(40, 150, 172, 0.1);
  color: var(--manolin-hero-secondary-hover-test) !important;
  transform: translateY(-2px);
}

.manolin-hero-button-primary-test *,
.manolin-hero-button-secondary-test *,
.manolin-hero-button-primary-test:hover *,
.manolin-hero-button-primary-test:focus *,
.manolin-hero-button-secondary-test:hover *,
.manolin-hero-button-secondary-test:focus * {
  text-decoration: none !important;
}

.manolin-hero-arrow-down-test,
.manolin-hero-arrow-right-test {
  display: inline-block;
  flex: 0 0 auto;
  text-decoration: none !important;
  transition: transform 180ms ease;
}

.manolin-hero-button-primary-test:hover
  .manolin-hero-arrow-down-test,
.manolin-hero-button-primary-test:focus
  .manolin-hero-arrow-down-test {
  transform: translateY(3px);
}

.manolin-hero-button-secondary-test:hover
  .manolin-hero-arrow-right-test,
.manolin-hero-button-secondary-test:focus
  .manolin-hero-arrow-right-test {
  transform: translateX(4px);
}

.manolin-hero-meta-test {
  display: flex;
  flex-wrap: wrap;
  gap: 27px;

  max-width: 780px;
  padding-top: 19px;

  border-top:
    1px solid
    var(--manolin-hero-line-test);
}

.manolin-hero-meta-item-test {
  color: rgba(211, 237, 244, 0.62);

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;

  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.manolin-hero-meta-item-test b,
.manolin-hero-meta-item-test strong {
  color: var(--manolin-hero-cyan-test);
  font-weight: 700;
}

.manolin-hero-instrument-test {
  position: relative;
  min-height: 620px;
  overflow: hidden;

  border:
    1px solid
    var(--manolin-hero-line-strong-test);

  background:
    linear-gradient(
      145deg,
      rgba(3, 16, 24, 0.78),
      rgba(8, 35, 46, 0.52)
    );
}

.manolin-hero-instrument-top-test {
  position: absolute;
  z-index: 4;
  top: 17px;
  left: 22px;
  right: 22px;

  display: flex;
  justify-content: space-between;
  gap: 20px;

  color: rgba(213, 238, 246, 0.72);

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;

  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.manolin-hero-status-excellent-test {
  color: var(--manolin-hero-teal-test);
  font-weight: 600;
}

.manolin-hero-corner-test {
  position: absolute;
  z-index: 5;

  width: 17px;
  height: 17px;
}

.manolin-hero-corner-tl-test {
  top: 9px;
  left: 9px;

  border-top:
    1px solid
    var(--manolin-hero-line-strong-test);

  border-left:
    1px solid
    var(--manolin-hero-line-strong-test);
}

.manolin-hero-corner-tr-test {
  top: 9px;
  right: 9px;

  border-top:
    1px solid
    var(--manolin-hero-line-strong-test);

  border-right:
    1px solid
    var(--manolin-hero-line-strong-test);
}

.manolin-hero-corner-bl-test {
  bottom: 9px;
  left: 9px;

  border-bottom:
    1px solid
    var(--manolin-hero-line-strong-test);

  border-left:
    1px solid
    var(--manolin-hero-line-strong-test);
}

.manolin-hero-corner-br-test {
  right: 9px;
  bottom: 9px;

  border-right:
    1px solid
    var(--manolin-hero-line-strong-test);

  border-bottom:
    1px solid
    var(--manolin-hero-line-strong-test);
}

.manolin-hero-lottie-stage-test {
  position: absolute;
  inset: 56px 28px 28px;

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

  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(104, 215, 199, 0.08),
      transparent 34%
    ),
    linear-gradient(
      rgba(184, 222, 235, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(184, 222, 235, 0.028) 1px,
      transparent 1px
    );

  background-size:
    auto,
    42px 42px,
    42px 42px;
}

.manolin-hero-lottie-player-test {
  position: relative;
  z-index: 2;

  width: min(560px, 94%);
  height: min(470px, 92%);

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

.manolin-hero-lottie-player-test svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

@media (max-width: 1030px) {
  .manolin-hero-test {
    min-height: auto;
  }

  .manolin-hero-layout-test {
    grid-template-columns: 1fr;
  }

  .manolin-hero-instrument-test {
    min-height: 550px;
  }
}

@media (max-width: 700px) {
  .manolin-hero-container-test {
    width: min(
      calc(100% - 26px),
      1280px
    );

    padding-top: 123px;
    padding-bottom: 62px;
  }

  .manolin-hero-title-test {
    font-size: 61px;
  }

  .manolin-hero-description-test {
    font-size: 16px;
  }

  .manolin-hero-actions-test {
    align-items: stretch;
  }

  .manolin-hero-button-primary-test,
  .manolin-hero-button-primary-test:link,
  .manolin-hero-button-primary-test:visited,
  .manolin-hero-button-primary-test:hover,
  .manolin-hero-button-primary-test:focus,
  .manolin-hero-button-primary-test:active,
  .manolin-hero-button-secondary-test,
  .manolin-hero-button-secondary-test:link,
  .manolin-hero-button-secondary-test:visited,
  .manolin-hero-button-secondary-test:hover,
  .manolin-hero-button-secondary-test:focus,
  .manolin-hero-button-secondary-test:active {
    width: 100%;
    min-width: 0;
  }

  .manolin-hero-instrument-test {
    min-height: 438px;
  }

  .manolin-hero-lottie-stage-test {
    inset: 56px 18px 18px;
  }

  .manolin-hero-lottie-player-test {
    width: 100%;
    height: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .manolin-hero-test *,
  .manolin-hero-test *::before,
  .manolin-hero-test *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ========================================================================
HOMEPAGE SMOOTH ANCHOR SCROLLING

Adds a smooth transition when hero CTAs link to sections lower
on the homepage. Also preserves accessibility for visitors who
prefer reduced motion.
======================================================================== */

html {
scroll-behavior: smooth;
}

/* ------------------------------------------------------------------------
ANCHOR TARGET OFFSET

Adds a small amount of breathing room above the destination section.
Increase this value if your live navigation header overlaps the section.
------------------------------------------------------------------------ */

#applications,
#technology,
#integrations,
#insights,
#faq {
scroll-margin-top: 28px;
}

/* ------------------------------------------------------------------------
REDUCED-MOTION ACCESSIBILITY

Returns to an immediate jump when the visitor has requested less motion.
------------------------------------------------------------------------ */

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

/*----------- Logo Section Test -------------*/

/*=======================================================
=========================================================
     TESTING LOGO STRIP
=========================================================
========================================================*/


/* ==========================================================
   MANOLIN LOGO STRIP
   Displays selected customer and partner logos beneath the
   hero section. Preserves the original dark styling while
   balancing the visible size of each logo.
   ========================================================== */

.manolin-logo-strip-test {
  position: relative;
  left: 50%;

  width: 100vw;
  margin-left: -50vw;

  background: #081924;

  border-top:
    1px solid
    rgba(184, 222, 235, 0.18);

  border-bottom:
    1px solid
    rgba(184, 222, 235, 0.18);
}


/* ==========================================================
   MANOLIN LOGO STRIP CONTAINER
   Keeps the original layout proportions and spacing.
   ========================================================== */

.manolin-logo-strip-container-test {
  width: min(
    calc(100% - 40px),
    1280px
  );

  margin: 0 auto;
  padding: 34px 34px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-items: center;
  gap: 42px;
}


/* ==========================================================
   MANOLIN LOGO ITEMS
   Centers every logo within an evenly sized column.
   ========================================================== */

.manolin-logo-item-test {
  width: 100%;
  min-height: 58px;

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


/* ==========================================================
   MANOLIN LOGO IMAGES
   Preserves each logo's aspect ratio. Individual width rules
   below compensate for transparent padding inside the source
   files so the visible marks appear cohesive.
   ========================================================== */

.manolin-logo-image-test {
  display: block;

  width: auto;
  height: auto;
  max-width: 100%;

  object-fit: contain;
  opacity: 0.92;
}


/* ==========================================================
   INDIVIDUAL LOGO OPTICAL-SIZE ADJUSTMENTS
   These values balance the visible logo marks rather than the
   full image canvases, which contain different blank margins.
   ========================================================== */

  .manolin-logo-kvaroy-test {
    width: 125px;
  }

  .manolin-logo-hofseth-test {
    width: 125px;
  }

  .manolin-logo-cargill-test {
    width: 125px;
  }

  .manolin-logo-veramaris-test {
    width: 150px;
  }


/* ==========================================================
   MANOLIN LOGO STRIP — TABLET
   Reduces logo widths slightly while preserving four columns.
   ========================================================== */

@media (max-width: 1000px) {
  .manolin-logo-strip-container-test {
    padding: 30px 24px;
    gap: 28px;
  }

  .manolin-logo-kvaroy-test {
    width: 125px;
  }

  .manolin-logo-hofseth-test {
    width: 125px;
  }

  .manolin-logo-cargill-test {
    width: 125px;
  }

  .manolin-logo-veramaris-test {
    width: 150px;
  }
}


/* ==========================================================
   MANOLIN LOGO STRIP — MOBILE
   Converts the desktop row into a balanced two-column grid.
   ========================================================== */

@media (max-width: 700px) {
  .manolin-logo-strip-container-test {
    width: min(
      calc(100% - 26px),
      1280px
    );

    padding: 28px 18px;

    grid-template-columns: repeat(2, 1fr);
    gap: 26px 24px;
  }

  .manolin-logo-item-test {
    min-height: 46px;
  }

  .manolin-logo-kvaroy-test {
    width: 155px;
  }

  .manolin-logo-hofseth-test {
    width: 132px;
  }

  .manolin-logo-cargill-test {
    width: 118px;
  }

  .manolin-logo-veramaris-test {
    width: 142px;
  }
}

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Montserrat:wght@500;600;700&family=Source+Sans+3:wght@400;500;600&display=swap");

/* ========================================================================
   MANOLIN DATA PROBLEM — LIVE
   Unified direction: locked narrative + normalized technical visual
   Desktop: sticky 5-stage scroll story
   Mobile: dedicated vertical narrative (not a compressed desktop experience)
   ======================================================================== */

:root {
  --mdp-bg: #071924;
  --mdp-bg-soft: #0a202d;
  --mdp-text: #f4fbff;
  --mdp-copy: rgba(221, 239, 246, 0.70);
  --mdp-copy-soft: rgba(221, 239, 246, 0.50);
  --mdp-cyan: #b8dcf8;
  --mdp-teal: #68d7c7;
  --mdp-red: #e78076;
  --mdp-line: rgba(184, 222, 235, 0.16);
  --mdp-line-strong: rgba(184, 222, 235, 0.27);
  --mdp-panel: rgba(8, 26, 37, 0.76);
  --mdp-font-display: "Montserrat", Arial, sans-serif;
  --mdp-font-body: "Source Sans 3", Arial, sans-serif;
  --mdp-font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--mdp-bg);
  color: var(--mdp-text);
  font-family: var(--mdp-font-body);
  overflow-x: hidden;
}

.manolin-data-problem {
  position: relative;
  width: 100%;
  color: var(--mdp-text);
  background:
    radial-gradient(circle at 76% 14%, rgba(56, 113, 136, 0.105), transparent 31%),
    radial-gradient(circle at 24% 78%, rgba(35, 76, 93, 0.075), transparent 34%),
    linear-gradient(180deg, #071924 0%, #061721 100%);
  border-top: 1px solid rgba(184, 222, 235, 0.12);
  border-bottom: 1px solid rgba(184, 222, 235, 0.12);
}

.manolin-data-problem::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.40;
  background-image:
    linear-gradient(rgba(159, 201, 218, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159, 201, 218, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
}

.manolin-data-problem-rail {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 40px), 1320px);
  margin: 0 auto;
  border-left: 1px solid var(--mdp-line);
  border-right: 1px solid var(--mdp-line);
}

/* -------------------------- DESKTOP STORY ------------------------------- */

.manolin-data-problem-desktop-story {
  position: relative;
  height: 500vh;
}

.manolin-data-problem-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 700px;
  display: grid;
  grid-template-columns: 41.5% 58.5%;
  overflow: hidden;
}

.manolin-data-problem-copy {
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(46px, 7vh, 84px) clamp(30px, 3.4vw, 52px);
  border-right: 1px solid var(--mdp-line);
}

.manolin-data-problem-copy-inner {
  width: 100%;
  max-width: 520px;
  height: min(74vh, 650px);
  min-height: 540px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.manolin-data-problem-kicker {
  color: var(--mdp-cyan);
  font: 500 10px/1.4 var(--mdp-font-mono);
  letter-spacing: .17em;
  text-transform: uppercase;
  margin-bottom: 0;
  padding-top: 2px;
}

.manolin-data-problem-copy-states {
  position: relative;
  height: auto;
  min-height: 0;
}

.manolin-data-problem-copy-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 0;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .42s ease, transform .42s ease;
}

.manolin-data-problem-copy-state.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.manolin-data-problem-copy h2 {
  margin: 0 0 24px;
  max-width: 510px;
  font-family: var(--mdp-font-display);
  font-size: clamp(38px, 3.35vw, 54px);
  font-weight: 700;
  line-height: 1.01;
  letter-spacing: -0.061em;
  color: var(--mdp-text);
}

.manolin-data-problem-copy p {
  margin: 0;
  max-width: 455px;
  color: var(--mdp-copy);
  font-size: 18px;
  line-height: 1.62;
}

.manolin-data-problem-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  padding-bottom: 2px;
}

.manolin-data-problem-progress span {
  width: 40px;
  height: 2px;
  background: rgba(184, 222, 235, 0.12);
  transition: width .3s ease, background .3s ease;
}

.manolin-data-problem-progress span.is-on {
  width: 56px;
  background: var(--mdp-cyan);
}

.manolin-data-problem-progress [data-mdp-counter] {
  margin-left: 4px;
  color: rgba(221, 239, 246, .43);
  font: 500 9px/1 var(--mdp-font-mono);
  letter-spacing: .12em;
}

.manolin-data-problem-visual {
  position: relative;
  padding: clamp(34px, 6vh, 72px) clamp(30px, 3.4vw, 52px);
}

.manolin-data-problem-visual::before {
  content: "";
  position: absolute;
  inset: 9vh 4.2vw;
  pointer-events: none;
  background: radial-gradient(circle at 50% 44%, rgba(61, 121, 145, .10), transparent 54%);
}

.manolin-data-problem-visual-head {
  position: absolute;
  z-index: 30;
  top: clamp(28px, 5vh, 54px);
  left: clamp(30px, 3.4vw, 52px);
  right: clamp(30px, 3.4vw, 52px);
  display: flex;
  justify-content: space-between;
  color: rgba(221, 239, 246, .36);
  font: 500 8px/1.4 var(--mdp-font-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.manolin-data-problem-canvas {
  position: absolute;
  inset: clamp(66px, 10vh, 104px) clamp(26px, 3vw, 44px) clamp(44px, 7vh, 78px);
  overflow: hidden;
}

.manolin-data-problem-tech,
.manolin-data-problem-tech-label,
.manolin-data-problem-chip,
.manolin-data-problem-traces,
.manolin-data-problem-break-note,
.manolin-data-problem-reconstruct,
.manolin-data-problem-normalized,
.manolin-data-problem-final {
  transition: opacity .58s ease, transform .68s cubic-bezier(.2,.75,.2,1), filter .58s ease;
}

.manolin-data-problem-tech {
  position: absolute;
  object-fit: contain;
  opacity: .78;
  filter: brightness(1.25) contrast(1.05) drop-shadow(0 0 18px rgba(184, 220, 248, .035));
}

.manolin-data-problem-tech.pen { left: 2%; top: 3%; width: 36%; }
.manolin-data-problem-tech.wellboat { right: -1%; top: 2%; width: 43%; }
.manolin-data-problem-tech.feed { left: 5%; bottom: 2%; width: 17%; }
.manolin-data-problem-tech.sensor { right: 4%; bottom: 1%; width: 14%; }
.manolin-data-problem-tech.treatment { left: 38%; bottom: 7%; width: 26%; }

.manolin-data-problem-tech-label {
  position: absolute;
  color: rgba(219, 239, 247, .54);
  font: 500 9px/1.4 var(--mdp-font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.manolin-data-problem-label-pen { left: 5%; top: 44%; }
.manolin-data-problem-label-wellboat { right: 6%; top: 39%; }
.manolin-data-problem-label-feed { left: 5%; bottom: 0%; }
.manolin-data-problem-label-sensor { right: 4%; bottom: 0%; }
.manolin-data-problem-label-treatment { left: 43%; bottom: 1%; }

.manolin-data-problem-chip {
  position: absolute;
  z-index: 8;
  padding: 9px 11px;
  border: 1px solid rgba(184, 222, 235, .16);
  background: rgba(5, 20, 29, .80);
  color: rgba(235, 247, 251, .82);
  font: 500 9px/1.35 var(--mdp-font-mono);
  white-space: nowrap;
}

.manolin-data-problem-chip::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--mdp-teal);
  vertical-align: 1px;
}

.manolin-data-problem-chip.c1 { left: 8%; top: 19%; }
.manolin-data-problem-chip.c2 { right: 9%; top: 18%; }
.manolin-data-problem-chip.c3 { left: 11%; bottom: 20%; }
.manolin-data-problem-chip.c4 { right: 8%; bottom: 19%; }
.manolin-data-problem-chip.c5 { left: 43%; bottom: 19%; }

.manolin-data-problem-traces {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

.manolin-data-problem-trace {
  fill: none;
  stroke: rgba(184, 220, 248, .34);
  stroke-width: 1.35;
  stroke-dasharray: 6 10;
  vector-effect: non-scaling-stroke;
}

.manolin-data-problem-trace.teal { stroke: rgba(104, 215, 199, .36); }
.manolin-data-problem-trace.red { stroke: rgba(231, 128, 118, .72); opacity: 0; }

.manolin-data-problem-break-note {
  position: absolute;
  z-index: 11;
  left: 50%;
  top: 48%;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 10px));
  padding: 7px 9px;
  border: 1px solid rgba(231, 128, 118, .30);
  background: rgba(6, 20, 28, .94);
  color: #f2b5ae;
  font: 600 9px/1.2 var(--mdp-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Reconstruction state is intentionally simpler than v2. */
.manolin-data-problem-reconstruct {
  position: absolute;
  z-index: 12;
  left: 23%;
  right: 18%;
  top: 20%;
  bottom: 17%;
  opacity: 0;
  transform: translateY(18px);
}

.manolin-data-problem-reconstruct::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(to bottom, rgba(184,220,248,.42) 0 7px, transparent 7px 14px);
}

.manolin-data-problem-reconstruct-node {
  position: absolute;
  left: 50%;
  width: 250px;
  transform: translateX(-50%);
  padding: 10px 12px;
  border: 1px solid rgba(184, 222, 235, .15);
  background: rgba(5, 20, 29, .87);
  color: rgba(232, 246, 250, .76);
  font: 500 9px/1.4 var(--mdp-font-mono);
}

.manolin-data-problem-reconstruct-node:nth-child(1) { top: 4%; margin-left: -80px; }
.manolin-data-problem-reconstruct-node:nth-child(2) { top: 29%; margin-left: 58px; }
.manolin-data-problem-reconstruct-node:nth-child(3) { top: 54%; margin-left: -48px; }
.manolin-data-problem-reconstruct-node:nth-child(4) { top: 79%; margin-left: 76px; }

.manolin-data-problem-reconstruct-node::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 54px;
  height: 1px;
  background: rgba(184, 222, 235, .28);
}

.manolin-data-problem-reconstruct-node:nth-child(odd)::before { right: -54px; }
.manolin-data-problem-reconstruct-node:nth-child(even)::before { left: -54px; }

.manolin-data-problem-normalized {
  position: absolute;
  z-index: 14;
  left: 11%;
  right: 8%;
  top: 14%;
  opacity: 0;
  transform: translateY(22px);
  padding: 24px 26px 22px;
  border: 1px solid rgba(184, 222, 235, .24);
  background:
    radial-gradient(circle at 80% 10%, rgba(74, 146, 170, .08), transparent 35%),
    linear-gradient(180deg, rgba(8, 30, 42, .94), rgba(6, 22, 31, .94));
  box-shadow: 0 18px 60px rgba(0,0,0,.12);
}

.manolin-data-problem-normalized-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--mdp-line);
  color: rgba(220, 239, 246, .55);
  font: 500 9px/1.3 var(--mdp-font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.manolin-data-problem-norm-row {
  display: grid;
  grid-template-columns: 92px 1fr 88px;
  gap: 18px;
  align-items: center;
  padding: 17px 0;
  border-bottom: 1px solid rgba(184, 222, 235, .105);
  font: 500 10px/1.35 var(--mdp-font-mono);
}

.manolin-data-problem-norm-row:last-child { border-bottom: 0; }
.manolin-data-problem-norm-row span { color: var(--mdp-cyan); }
.manolin-data-problem-norm-row b { color: rgba(232, 246, 250, .82); font-weight: 500; }
.manolin-data-problem-norm-row i { color: var(--mdp-teal); font-style: normal; text-align: right; }

/* Final: normalized panel first, question cards below. No lines cross the cards. */
.manolin-data-problem-final {
  position: absolute;
  z-index: 18;
  inset: 7% 5% 4% 7%;
  opacity: 0;
  transform: translateY(18px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
}

.manolin-data-problem-final .manolin-data-problem-normalized {
  position: relative;
  inset: auto;
  opacity: 1;
  transform: none;
  padding: 20px 22px 18px;
}

.manolin-data-problem-final .manolin-data-problem-norm-row {
  padding: 12px 0;
}

.manolin-data-problem-final-questions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  min-height: 0;
}

.manolin-data-problem-question {
  padding: 20px 20px 18px;
  border: 1px solid rgba(184, 222, 235, .18);
  background: rgba(5, 20, 29, .985);
}

.manolin-data-problem-question small {
  display: block;
  color: var(--mdp-cyan);
  font: 500 8px/1.45 var(--mdp-font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.manolin-data-problem-question h3 {
  color: var(--mdp-text);
  margin: 10px 0 14px;
  color: var(--mdp-text);
  font: 700 20px/1.17 var(--mdp-font-display);
  letter-spacing: -.035em;
}

.manolin-data-problem-question p {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(184, 222, 235, .10);
  color: var(--mdp-copy);
  font-size: 13px;
  line-height: 1.42;
}

.manolin-data-problem-question p + p { margin-top: 10px; }
.manolin-data-problem-question p::before { content: "→ "; color: var(--mdp-teal); font-family: var(--mdp-font-mono); }

/* -------------------------- DESKTOP STATES ------------------------------ */

.manolin-data-problem-desktop-story.s1 .manolin-data-problem-tech { opacity: .80; }
.manolin-data-problem-desktop-story.s1 .manolin-data-problem-chip { opacity: .72; }
.manolin-data-problem-desktop-story.s1 .manolin-data-problem-traces { opacity: .90; }

.manolin-data-problem-desktop-story.s2 .manolin-data-problem-tech { opacity: .48; transform: scale(.985); }
.manolin-data-problem-desktop-story.s2 .manolin-data-problem-tech-label { opacity: .45; }
.manolin-data-problem-desktop-story.s2 .manolin-data-problem-trace { opacity: .28; }
.manolin-data-problem-desktop-story.s2 .manolin-data-problem-trace.red { opacity: 1; }
.manolin-data-problem-desktop-story.s2 .manolin-data-problem-break-note { opacity: 1; transform: translate(-50%, -50%); }
.manolin-data-problem-desktop-story.s2 .manolin-data-problem-chip { border-color: rgba(231,128,118,.22); }
.manolin-data-problem-desktop-story.s2 .manolin-data-problem-chip.c1 { transform: translate(34px, 24px) rotate(-1deg); }
.manolin-data-problem-desktop-story.s2 .manolin-data-problem-chip.c2 { transform: translate(-34px, 26px) rotate(1deg); }
.manolin-data-problem-desktop-story.s2 .manolin-data-problem-chip.c3 { transform: translate(40px, -24px) rotate(.6deg); }
.manolin-data-problem-desktop-story.s2 .manolin-data-problem-chip.c4 { transform: translate(-40px, -22px) rotate(-.6deg); }
.manolin-data-problem-desktop-story.s2 .manolin-data-problem-chip.c5 { transform: translateY(clamp(-190px, -19vh, -130px)); }

.manolin-data-problem-desktop-story.s3 .manolin-data-problem-tech,
.manolin-data-problem-desktop-story.s3 .manolin-data-problem-tech-label { opacity: .08; }
.manolin-data-problem-desktop-story.s3 .manolin-data-problem-traces { opacity: .12; }
.manolin-data-problem-desktop-story.s3 .manolin-data-problem-chip,
.manolin-data-problem-desktop-story.s3 .manolin-data-problem-break-note { opacity: .22; }
.manolin-data-problem-desktop-story.s3 .manolin-data-problem-reconstruct { opacity: 1; transform: translateY(0); }

.manolin-data-problem-desktop-story.s4 .manolin-data-problem-tech,
.manolin-data-problem-desktop-story.s4 .manolin-data-problem-tech-label { opacity: .045; filter: brightness(1.1); }
.manolin-data-problem-desktop-story.s4 .manolin-data-problem-traces,
.manolin-data-problem-desktop-story.s4 .manolin-data-problem-chip,
.manolin-data-problem-desktop-story.s4 .manolin-data-problem-break-note,
.manolin-data-problem-desktop-story.s4 .manolin-data-problem-reconstruct { opacity: .035; }
.manolin-data-problem-desktop-story.s4 .manolin-data-problem-normalized { opacity: 1; transform: translateY(0); }

.manolin-data-problem-desktop-story.s5 .manolin-data-problem-tech,
.manolin-data-problem-desktop-story.s5 .manolin-data-problem-tech-label { opacity: 0; filter: brightness(1.05); }
.manolin-data-problem-desktop-story.s5 .manolin-data-problem-traces,
.manolin-data-problem-desktop-story.s5 .manolin-data-problem-chip,
.manolin-data-problem-desktop-story.s5 .manolin-data-problem-break-note,
.manolin-data-problem-desktop-story.s5 .manolin-data-problem-reconstruct,
.manolin-data-problem-desktop-story.s5 > .manolin-data-problem-stage .manolin-data-problem-canvas > .manolin-data-problem-normalized { opacity: 0; }
.manolin-data-problem-desktop-story.s5 .manolin-data-problem-final { opacity: 1; transform: translateY(0); }


/* Desktop fit guards: keep long copy states clear of the progress rail. */
@media (min-width: 821px) and (max-width: 1180px) {
  .manolin-data-problem-stage { grid-template-columns: 44% 56%; }
  .manolin-data-problem-copy { padding-left: 34px; padding-right: 34px; }
  .manolin-data-problem-copy-inner { height: min(76vh, 620px); min-height: 510px; }
  .manolin-data-problem-copy h2 { font-size: clamp(36px, 3.7vw, 47px); line-height: 1.015; }
  .manolin-data-problem-copy p { font-size: 16.5px; line-height: 1.56; }
  .manolin-data-problem-kicker { font-size: 9px; }
  .manolin-data-problem-copy-state { padding: 20px 0; }
  .manolin-data-problem-progress span { width: 32px; }
  .manolin-data-problem-progress span.is-on { width: 44px; }
}

@media (min-width: 821px) and (max-height: 760px) {
  .manolin-data-problem-stage { min-height: 620px; }
  .manolin-data-problem-copy-inner { height: 82vh; min-height: 500px; max-height: 590px; }
  .manolin-data-problem-copy h2 { font-size: clamp(34px, 3.2vw, 45px); margin-bottom: 18px; }
  .manolin-data-problem-copy p { font-size: 16px; line-height: 1.48; }
  .manolin-data-problem-copy-state { padding: 16px 0; }
  .manolin-data-problem-visual { padding-top: 28px; padding-bottom: 28px; }
}

/* -------------------------- MOBILE STORY -------------------------------- */

.manolin-data-problem-mobile-story { display: none; }

@media (max-width: 820px) {
  .manolin-data-problem-rail {
    width: min(calc(100% - 24px), 1320px);
  }

  .manolin-data-problem-desktop-story { display: none; }
  .manolin-data-problem-mobile-story { display: block; }

  .manolin-data-problem-mobile-step {
    padding: 76px 18px 54px;
    border-bottom: 1px solid rgba(184, 222, 235, .10);
  }

  .manolin-data-problem-mobile-step:first-child { padding-top: 82px; }

  .manolin-data-problem-mobile-copy {
    max-width: 620px;
    margin: 0 auto 32px;
  }

  .manolin-data-problem-mobile-kicker {
    color: var(--mdp-cyan);
    font: 500 9px/1.4 var(--mdp-font-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 22px;
  }

  .manolin-data-problem-mobile-step h2 {
    margin: 0 0 20px;
    font: 700 clamp(38px, 11.5vw, 60px)/1.01 var(--mdp-font-display);
    letter-spacing: -.058em;
    color: var(--mdp-text);
  }

  .manolin-data-problem-mobile-step p {
    margin: 0;
    color: var(--mdp-copy);
    font-size: 18px;
    line-height: 1.56;
  }

  .manolin-data-problem-mobile-card {
    position: relative;
    min-height: 430px;
    max-width: 680px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--mdp-line-strong);
    border-radius: 26px;
    background:
      radial-gradient(circle at 74% 12%, rgba(57, 111, 132, .10), transparent 36%),
      linear-gradient(180deg, rgba(8, 27, 38, .92), rgba(5, 19, 28, .94));
  }

  .manolin-data-problem-mobile-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .32;
    background-image:
      linear-gradient(rgba(159,201,218,.03) 1px, transparent 1px),
      linear-gradient(90deg,rgba(159,201,218,.024) 1px,transparent 1px);
    background-size: 42px 42px;
  }

  .manolin-data-problem-mobile-card-head {
    position: relative;
    z-index: 3;
    padding: 18px 20px;
    border-bottom: 1px solid var(--mdp-line);
    color: rgba(221, 239, 246, .43);
    font: 500 8px/1.35 var(--mdp-font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  .manolin-data-problem-mobile-ecosystem {
    position: relative;
    z-index: 2;
    height: 390px;
  }

  .manolin-data-problem-mobile-ecosystem img {
    position: absolute;
    object-fit: contain;
    opacity: .78;
    filter: brightness(1.22) contrast(1.02);
  }

  .manolin-data-problem-mobile-ecosystem .pen { left: -4%; top: 2%; width: 47%; }
  .manolin-data-problem-mobile-ecosystem .wellboat { right: -6%; top: 3%; width: 58%; }
  .manolin-data-problem-mobile-ecosystem .feed { left: 6%; bottom: 2%; width: 24%; }
  .manolin-data-problem-mobile-ecosystem .sensor { right: 5%; bottom: 2%; width: 20%; }
  .manolin-data-problem-mobile-ecosystem .treatment { left: 33%; bottom: 10%; width: 38%; }

  .manolin-data-problem-mobile-chip {
    position: absolute;
    z-index: 4;
    padding: 8px 9px;
    border: 1px solid rgba(184,222,235,.16);
    background: rgba(5,20,29,.84);
    color: rgba(234,247,250,.79);
    font: 500 8px/1.3 var(--mdp-font-mono);
    white-space: nowrap;
  }

  .manolin-data-problem-mobile-chip.a { left: 7%; top: 28%; }
  .manolin-data-problem-mobile-chip.b { right: 6%; top: 28%; }
  .manolin-data-problem-mobile-chip.c { left: 11%; bottom: 24%; }
  .manolin-data-problem-mobile-chip.d { right: 8%; bottom: 23%; }
  .manolin-data-problem-mobile-chip.e { left: 50%; bottom: 24%; transform: translateX(-50%); }

  .manolin-data-problem-mobile-fragment .manolin-data-problem-mobile-chip.a { left: 7%; top: 23%; transform: rotate(-1deg); }
  .manolin-data-problem-mobile-fragment .manolin-data-problem-mobile-chip.b { right: 6%; top: 25%; transform: rotate(1deg); }
  .manolin-data-problem-mobile-fragment .manolin-data-problem-mobile-chip.c { left: 8%; bottom: 16%; transform: rotate(.5deg); }
  .manolin-data-problem-mobile-fragment .manolin-data-problem-mobile-chip.d { right: 7%; bottom: 15%; transform: rotate(-.5deg); }
  .manolin-data-problem-mobile-fragment .manolin-data-problem-mobile-chip.e { left: 50%; top: 58%; bottom: auto; transform: translateX(-50%); }
  .manolin-data-problem-mobile-fragment img { opacity: .27; }

  .manolin-data-problem-mobile-break {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 49%;
    transform: translate(-50%, -50%);
    color: #f2b5ae;
    background: rgba(5,20,29,.95);
    border: 1px solid rgba(231,128,118,.30);
    padding: 8px 10px;
    font: 600 8px/1.25 var(--mdp-font-mono);
    letter-spacing: .11em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .manolin-data-problem-mobile-reconstruct {
    position: relative;
    z-index: 2;
    min-height: 390px;
    padding: 34px 24px;
  }

  .manolin-data-problem-mobile-reconstruct-line {
    position: absolute;
    left: 50%;
    top: 46px;
    bottom: 46px;
    width: 1px;
    background: repeating-linear-gradient(to bottom, rgba(184,220,248,.45) 0 7px, transparent 7px 14px);
  }

  .manolin-data-problem-mobile-rnode {
    position: relative;
    width: min(76%, 330px);
    margin: 0 auto 24px;
    padding: 11px 12px;
    border: 1px solid rgba(184,222,235,.16);
    background: rgba(5,20,29,.9);
    color: rgba(232,246,250,.78);
    font: 500 8.5px/1.4 var(--mdp-font-mono);
  }

  .manolin-data-problem-mobile-rnode:nth-of-type(2),
  .manolin-data-problem-mobile-rnode:nth-of-type(4) { transform: translateX(-12%); }
  .manolin-data-problem-mobile-rnode:nth-of-type(3),
  .manolin-data-problem-mobile-rnode:nth-of-type(5) { transform: translateX(12%); }

  .manolin-data-problem-mobile-normalized {
    position: relative;
    z-index: 2;
    padding: 22px 18px 24px;
  }

  .manolin-data-problem-mobile-normalized .manolin-data-problem-normalized {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    padding: 20px 18px;
  }

  .manolin-data-problem-mobile-normalized .manolin-data-problem-normalized-head {
    display: block;
    line-height: 1.6;
  }

  .manolin-data-problem-mobile-normalized .manolin-data-problem-normalized-head span:last-child {
    display: block;
    margin-top: 3px;
    color: rgba(104,215,199,.75);
  }

  .manolin-data-problem-mobile-normalized .manolin-data-problem-norm-row {
    grid-template-columns: 78px 1fr;
    gap: 12px;
    padding: 14px 0;
    font-size: 9px;
  }

  .manolin-data-problem-mobile-normalized .manolin-data-problem-norm-row i {
    grid-column: 2;
    text-align: left;
    margin-top: -5px;
    font-size: 8px;
  }

  .manolin-data-problem-mobile-final {
    position: relative;
    z-index: 2;
    padding: 20px 16px 18px;
  }

  .manolin-data-problem-mobile-final .manolin-data-problem-normalized {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    padding: 18px 16px;
    margin-bottom: 14px;
  }

  .manolin-data-problem-mobile-final .manolin-data-problem-norm-row {
    grid-template-columns: 72px 1fr;
    gap: 10px;
    padding: 12px 0;
    font-size: 8.5px;
  }

  .manolin-data-problem-mobile-final .manolin-data-problem-norm-row i {
    display: none;
  }

  .manolin-data-problem-mobile-final .manolin-data-problem-final-questions {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .manolin-data-problem-mobile-final .manolin-data-problem-question {
    padding: 18px 16px;
  }

  .manolin-data-problem-mobile-final .manolin-data-problem-question h3 {
    font-size: 19px;
  }

  .manolin-data-problem-mobile-step {
    opacity: .55;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
  }

  .manolin-data-problem-mobile-step.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 430px) {
  .manolin-data-problem-mobile-step { padding-left: 14px; padding-right: 14px; }
  .manolin-data-problem-mobile-card { border-radius: 22px; }
  .manolin-data-problem-mobile-step h2 { font-size: clamp(36px, 11.6vw, 50px); }
  .manolin-data-problem-mobile-step p { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .manolin-data-problem *, .manolin-data-problem *::before, .manolin-data-problem *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/*=======================================================
=========================================================
     TESTING ICP SECTION
=========================================================
========================================================*/


/* ========================================================================
   ========================================================================
   ========================================================================

   MANOLIN APPLICATION SELECTOR TEST
   "CHOOSE THE QUESTION YOUR TEAM NEEDS TO ANSWER"

   Complete replacement CSS for the interactive Watershed and Harpoon
   section. Includes scoped HubSpot overrides and interface-detail fixes.

   ========================================================================
   ========================================================================
   ======================================================================== */

.manolin-app-selector-test {
  --manolin-app-navy-test: #071924;
  --manolin-app-navy-mid-test: #09212f;
  --manolin-app-ui-navy-test: #0a1e2a;

  --manolin-app-cyan-test: #b2dafb;
  --manolin-app-teal-test: #68d7c7;
  --manolin-app-yellow-test: #f2c96d;

  --manolin-app-line-test: rgba(184, 222, 235, 0.18);
  --manolin-app-line-strong-test: rgba(184, 222, 235, 0.26);

  position: relative;
  left: 50%;

  width: 100vw;
  margin-left: -50vw;
  padding: 104px 0;

  overflow: hidden;

  color: #f2fcff;

  background:
    linear-gradient(
      180deg,
      var(--manolin-app-navy-test),
      var(--manolin-app-navy-mid-test)
    );

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif;
}

.manolin-app-selector-test *,
.manolin-app-selector-test *::before,
.manolin-app-selector-test *::after {
  box-sizing: border-box;
}

.manolin-app-selector-test::before {
  content: "";
  position: absolute;
  inset: 0;

  opacity: 0.48;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(160, 204, 222, 0.044) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(160, 204, 222, 0.035) 1px,
      transparent 1px
    );

  background-size: 48px 48px;
}


/* ------------------------------------------------------------------------
   SECTION CONTAINER
   Aligns the selector with the other homepage sections.
   ------------------------------------------------------------------------ */

.manolin-app-container-test {
  position: relative;
  z-index: 2;

  width: min(
    calc(100% - 40px),
    1280px
  );

  margin: 0 auto;
}


/* ------------------------------------------------------------------------
   SECTION HEADER
   Preserves the original two-column layout and prevents the headline
   from becoming oversized or overly narrow inside HubSpot.
   ------------------------------------------------------------------------ */

.manolin-app-header-test {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.16fr)
    minmax(390px, 0.84fr) !important;

  gap: 74px !important;
  align-items: end !important;

  margin-bottom: 32px !important;
}

.manolin-app-eyebrow-test,
.manolin-app-product-eyebrow-test {
  color:
    var(--manolin-app-cyan-test) !important;

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace !important;

  font-size: 10px !important;
  font-weight: 200 !important;
  letter-spacing: 0.15em !important;
  line-height: 1.45 !important;
  text-transform: uppercase !important;
}

.manolin-app-selector-test
  h2.manolin-app-heading-test {
  width: auto !important;
  max-width: 880px !important;

  margin:
    10px
    0
    0 !important;

  padding: 0 !important;

  color: #f5fcff !important;

  font-family:
    "Montserrat",
    Arial,
    sans-serif !important;

  font-size: 60px !important;
  font-weight: 700 !important;
  letter-spacing: -0.073em !important;
  line-height: 0.98 !important;

  text-align: left !important;
  text-transform: none !important;
}

.manolin-app-selector-test
  p.manolin-app-intro-test {
  width: 100% !important;
  max-width: 560px !important;

  margin:
    0
    0
    4px !important;

  padding: 0 !important;

  color:
    rgba(217, 239, 246, 0.66) !important;

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif !important;

  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.7 !important;

  text-align: left !important;
  text-transform: none !important;
}


/* ------------------------------------------------------------------------
   APPLICATION TAB GRID
   Creates the Watershed and Harpoon audience selector.
   ------------------------------------------------------------------------ */

.manolin-app-tabs-test {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  border-top:
    1px solid
    var(--manolin-app-line-test);

  border-left:
    1px solid
    var(--manolin-app-line-test);
}


/* ------------------------------------------------------------------------
   APPLICATION TABS
   Resets HubSpot theme button styles and preserves the rectangular
   technical-tab layout from the original prototype.
   ------------------------------------------------------------------------ */

.manolin-app-selector-test
  button.manolin-app-tab-test,
.manolin-app-selector-test
  button.manolin-app-tab-test:hover,
.manolin-app-selector-test
  button.manolin-app-tab-test:focus,
.manolin-app-selector-test
  button.manolin-app-tab-test:focus-visible,
.manolin-app-selector-test
  button.manolin-app-tab-test:active {
  box-sizing: border-box !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 135px !important;

  display: block !important;

  margin: 0 !important;
  padding: 19px 20px !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  cursor: pointer !important;

  border: 0 !important;

  border-right:
    1px solid
    var(--manolin-app-line-test) !important;

  border-bottom:
    1px solid
    var(--manolin-app-line-test) !important;

  border-radius: 0 !important;

  background:
    rgba(255, 255, 255, 0.014) !important;

  background-image:
    none !important;

  box-shadow:
    none !important;

  color:
    rgba(220, 241, 248, 0.6) !important;

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif !important;

  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: normal !important;

  text-align: left !important;
  text-decoration: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  white-space: normal !important;

  transform: none !important;

  transition:
    background-color 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease !important;
}

.manolin-app-selector-test
  .manolin-app-tab-test small,
.manolin-app-selector-test
  .manolin-app-tab-test strong,
.manolin-app-selector-test
  .manolin-app-tab-test span {
  display: block !important;

  width: auto !important;
  max-width: 520px !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  padding: 0 !important;

  text-align: left !important;
  white-space: normal !important;
}

.manolin-app-selector-test
  .manolin-app-tab-test small {
  margin-top: 0 !important;

  color:
    var(--manolin-app-cyan-test) !important;

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace !important;

  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.45 !important;
  text-transform: uppercase !important;
}

.manolin-app-selector-test
  .manolin-app-tab-test strong {
  margin-top: 10px !important;

  color: inherit !important;

  font-family:
    "Montserrat",
    Arial,
    sans-serif !important;

  font-size: 21px !important;
  font-weight: 700 !important;
  letter-spacing: -0.034em !important;
  line-height: 1.15 !important;
}

.manolin-app-selector-test
  .manolin-app-tab-test span {
  margin-top: 7px !important;

  color:
    rgba(219, 240, 247, 0.58) !important;

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif !important;

  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.47 !important;
}

.manolin-app-selector-test
  button.manolin-app-tab-test:not(
    .manolin-app-tab-active-test
  ):hover,
.manolin-app-selector-test
  button.manolin-app-tab-test:not(
    .manolin-app-tab-active-test
  ):focus-visible {
  background:
    rgba(178, 218, 251, 0.045) !important;

  color:
    #ffffff !important;
}

.manolin-app-selector-test
  button.manolin-app-tab-test.manolin-app-tab-active-test,
.manolin-app-selector-test
  button.manolin-app-tab-test.manolin-app-tab-active-test:hover,
.manolin-app-selector-test
  button.manolin-app-tab-test.manolin-app-tab-active-test:focus,
.manolin-app-selector-test
  button.manolin-app-tab-test.manolin-app-tab-active-test:active {
  background:
    rgba(178, 218, 251, 0.085) !important;

  color:
    #ffffff !important;

  box-shadow:
    inset
    0
    -2px
    0
    var(--manolin-app-cyan-test) !important;
}


/* ------------------------------------------------------------------------
   APPLICATION PANEL WRAPPER
   Contains the active Watershed or Harpoon product panel.
   ------------------------------------------------------------------------ */

.manolin-app-panel-wrapper-test {
  position: relative;

  border-left:
    1px solid
    var(--manolin-app-line-test);

  border-right:
    1px solid
    var(--manolin-app-line-test);

  border-bottom:
    1px solid
    var(--manolin-app-line-test);
}

.manolin-app-panel-test {
  display: grid;

  grid-template-columns:
    0.87fr
    1.13fr;

  min-height: 613px;

  opacity: 0;

  transform:
    translateY(
      5px
    );

  transition:
    opacity 300ms ease,
    transform 300ms ease;
}

.manolin-app-panel-test[hidden] {
  display: none !important;
}

.manolin-app-panel-active-test {
  opacity: 1;

  transform:
    translateY(
      0
    );

  animation:
    manolin-app-panel-in-test
    300ms
    ease;
}

@keyframes manolin-app-panel-in-test {
  from {
    opacity: 0.15;

    transform:
      translateY(
        8px
      );
  }

  to {
    opacity: 1;

    transform:
      translateY(
        0
      );
  }
}


/* ------------------------------------------------------------------------
   APPLICATION COPY COLUMN
   Styles the active Watershed or Harpoon product narrative.
   ------------------------------------------------------------------------ */

.manolin-app-copy-test {
  padding:
    34px
    34px
    31px;

  border-right:
    1px solid
    var(--manolin-app-line-test);
}

.manolin-app-role-row-test {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;

  margin-bottom: 17px;
}

.manolin-app-role-test {
  padding:
    5px
    7px;

  border:
    1px solid
    rgba(184, 222, 235, 0.2);

  color:
    rgba(214, 238, 245, 0.62);

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;

  font-size: 8px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.manolin-app-selector-test
  h3.manolin-app-product-heading-test {
  max-width: 625px !important;

  margin:
    11px
    0
    15px !important;

  padding: 0 !important;

  color:
    #f5fcff !important;

  font-family:
    "Montserrat",
    Arial,
    sans-serif !important;

  font-size: 42px !important;
  font-weight: 700 !important;
  letter-spacing: -0.062em !important;
  line-height: 1.03 !important;

  text-align: left !important;
}

.manolin-app-selector-test
  p.manolin-app-product-description-test {
  margin:
    0
    0
    24px !important;

  padding: 0 !important;

  color:
    rgba(218, 239, 246, 0.7) !important;

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif !important;

  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}


/* ------------------------------------------------------------------------
   APPLICATION OUTCOME ROWS
   Lists the three primary outcomes for the selected product.
   ------------------------------------------------------------------------ */

.manolin-app-outcomes-test {
  margin:
    22px
    0
    27px;

  border-top:
    1px solid
    var(--manolin-app-line-test);
}

.manolin-app-outcome-test {
  display: grid;

  grid-template-columns:
    45px
    1fr;

  border-bottom:
    1px solid
    var(--manolin-app-line-test);
}

.manolin-app-outcome-test > div {
  padding:
    13px
    0;
}

.manolin-app-outcome-number-test {
  color:
    var(--manolin-app-cyan-test);

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;

  font-size: 9px;
}

.manolin-app-outcome-test strong {
  display: block;

  color:
    #effbff;

  font-family:
    "Montserrat",
    Arial,
    sans-serif;

  font-size: 14px;
  line-height: 1.35;
}

.manolin-app-outcome-test span {
  display: block;

  margin-top: 5px;

  color:
    rgba(212, 235, 243, 0.57);

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif;

  font-size: 12px;
  line-height: 1.52;
}


/* ------------------------------------------------------------------------
   APPLICATION TEXT LINKS
   Keeps the understated V2-style text CTA and animated arrow.
   ------------------------------------------------------------------------ */

.manolin-app-text-link-test,
.manolin-app-text-link-test:link,
.manolin-app-text-link-test:visited,
.manolin-app-text-link-test:hover,
.manolin-app-text-link-test:focus,
.manolin-app-text-link-test:active {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color:
    var(--manolin-app-cyan-test) !important;

  font-family:
    "Montserrat",
    Arial,
    sans-serif;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none !important;
  text-transform: uppercase;
}

.manolin-app-link-arrow-test {
  display: inline-block;

  transition:
    transform 180ms ease;
}

.manolin-app-text-link-test:hover
  .manolin-app-link-arrow-test,
.manolin-app-text-link-test:focus
  .manolin-app-link-arrow-test {
  transform:
    translateX(
      4px
    );
}


/* ------------------------------------------------------------------------
   VISUAL INTERFACE WRAPPER
   Contains the product-specific intelligence interface graphic.
   ------------------------------------------------------------------------ */

.manolin-app-ui-area-test {
  padding: 15px;

  background:
    rgba(2, 13, 20, 0.28);
}

.manolin-app-ui-shell-test {
  height: 100%;
  min-height: 581px;

  border:
    1px solid
    rgba(182, 221, 234, 0.22);

  background:
    var(--manolin-app-ui-navy-test);
}

.manolin-app-ui-top-test {
  min-height: 42px;
  padding: 0 13px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  border-bottom:
    1px solid
    var(--manolin-app-line-test);

  color:
    rgba(217, 239, 246, 0.68);

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace !important;

  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 0.11em !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
}

.manolin-app-ui-grid-test {
  height:
    calc(
      100%
      -
      42px
    );

  display: grid;

  grid-template-columns:
    1.12fr
    0.88fr;
}

.manolin-app-ui-panel-test {
  position: relative;
  overflow: hidden;

  padding: 12px;

  border-right:
    1px solid
    var(--manolin-app-line-test);

  border-bottom:
    1px solid
    var(--manolin-app-line-test);

  background: transparent;
}

.manolin-app-ui-panel-test:nth-child(even) {
  border-right: 0;
}

.manolin-app-ui-full-row-test {
  grid-column:
    1
    /
    -1;
}


/* ------------------------------------------------------------------------
   VISUAL INTERFACE PANEL TITLES
   Restores the green status labels:
   LIVE, +18%, 03 ACTIVE, QUARTERLY REPORT, FIELD SIGNALS,
   ACCOUNT LEVEL, and NEXT QUESTION.
   ------------------------------------------------------------------------ */

.manolin-app-ui-title-test {
  display: flex;
  justify-content: space-between;
  gap: 12px;

  color:
    rgba(214, 237, 244, 0.62) !important;

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace !important;

  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 0.11em !important;
  line-height: 1.45 !important;
  text-transform: uppercase !important;
}

.manolin-app-ui-title-test > span {
  color:
    rgba(214, 237, 244, 0.62) !important;

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace !important;

  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 0.11em !important;
  line-height: 1.45 !important;
  text-transform: uppercase !important;
}

.manolin-app-ui-title-test > b,
.manolin-app-ui-title-test > strong {
  color:
    var(--manolin-app-teal-test) !important;

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace !important;

  font-size: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.11em !important;
  line-height: 1.45 !important;
  text-transform: uppercase !important;
}


/* ------------------------------------------------------------------------
   WATERSHED MAP
   Displays the simplified area-intelligence site map.
   ------------------------------------------------------------------------ */

.manolin-app-ui-map-test {
  min-height: 285px;

  background:
    radial-gradient(
      circle at 65% 42%,
      rgba(76, 157, 184, 0.16),
      transparent 22%
    );
}

.manolin-app-ui-map-span-test {
  grid-row:
    span
    2;
}

.manolin-app-map-svg-test {
  position: absolute;
  left: 9%;
  top: 14%;

  width: 85%;
  height: 78%;
}

.manolin-app-site-dot-test {
  position: absolute;

  width: 9px;
  height: 9px;

  border:
    1px solid
    rgba(225, 247, 253, 0.8);

  border-radius: 50%;

  background:
    var(--manolin-app-cyan-test);

  box-shadow:
    0
    0
    0
    4px
    rgba(178, 218, 251, 0.12);
}

.manolin-app-site-dot-selected-test {
  background:
    var(--manolin-app-teal-test);

  box-shadow:
    0
    0
    0
    5px
    rgba(104, 215, 199, 0.16);

  animation:
    manolin-app-site-pulse-test
    2.8s
    ease-in-out
    infinite;
}

@keyframes manolin-app-site-pulse-test {
  0%,
  100% {
    box-shadow:
      0
      0
      0
      5px
      rgba(104, 215, 199, 0.16);
  }

  50% {
    box-shadow:
      0
      0
      0
      9px
      rgba(104, 215, 199, 0.06);
  }
}


/* ------------------------------------------------------------------------
   WATERSHED SITE POPUP
   Keeps selected-site values compact, including Tenacibaculum.
   ------------------------------------------------------------------------ */

.manolin-app-site-popup-test {
  position: absolute;
  left: 13%;
  top: 27%;
  z-index: 3;

  width: 172px;
  padding: 10px 11px;

  border:
    1px solid
    rgba(184, 222, 235, 0.24);

  background:
    rgba(4, 18, 27, 0.92);

  box-shadow:
    0
    12px
    24px
    rgba(0, 0, 0, 0.22);
}

.manolin-app-site-popup-test::after {
  content: "";

  position: absolute;
  left: 74%;
  top: 100%;

  width: 1px;
  height: 34px;

  background:
    rgba(178, 218, 251, 0.42);

  transform:
    rotate(
      24deg
    );

  transform-origin: top;
}

.manolin-app-site-popup-test small,
.manolin-app-site-popup-grid-test span {
  display: block;

  color:
    var(--manolin-app-cyan-test) !important;

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace !important;

  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 0.11em !important;
  line-height: 1.35 !important;
  text-transform: uppercase !important;
}

.manolin-app-site-popup-test strong {
  display: block;

  margin-top: 5px;

  color:
    #f2fbfd !important;

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
}

.manolin-app-site-popup-test em {
  display: block;

  margin-top: 3px;

  color:
    rgba(214, 237, 244, 0.62) !important;

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif !important;

  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

.manolin-app-site-popup-grid-test {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    6px
    10px;

  margin-top: 9px;
  padding-top: 8px;

  border-top:
    1px solid
    rgba(184, 222, 235, 0.12);
}

.manolin-app-site-popup-grid-test span {
  color:
    rgba(211, 235, 243, 0.48) !important;

  font-size: 7px !important;
  letter-spacing: 0.08em !important;
}

.manolin-app-site-popup-grid-test b,
.manolin-app-site-popup-grid-test strong {
  display: block;

  margin-top: 3px;

  color:
    #effbff !important;

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif !important;

  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;

  overflow-wrap:
    anywhere !important;
}


/* ------------------------------------------------------------------------
   WATERSHED PRESSURE CHART
   Displays the female-parasite-pressure sparkline.
   ------------------------------------------------------------------------ */

.manolin-app-spark-test {
  position: relative;

  height: 120px;
  margin-top: 16px;
}

.manolin-app-spark-test::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      rgba(176, 216, 230, 0.075) 1px,
      transparent 1px
    );

  background-size:
    100%
    24px;
}

.manolin-app-spark-test svg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
}


/* ------------------------------------------------------------------------
   WATERSHED DISEASE MODELS
   Keeps the outlook title and disease rows compact.
   ------------------------------------------------------------------------ */

.manolin-app-model-site-test {
  margin-top: 12px;
  padding-bottom: 8px;

  border-bottom:
    1px solid
    rgba(184, 222, 235, 0.12);
}

.manolin-app-model-site-test small {
  display: block;

  color:
    rgba(211, 235, 243, 0.5) !important;

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace !important;

  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 0.11em !important;
  line-height: 1.35 !important;
  text-transform: uppercase !important;
}

.manolin-app-model-site-test strong {
  display: block;

  margin-top: 4px;

  color:
    #f4fcff !important;

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
}

.manolin-app-model-list-test {
  margin-top: 4px;
}

.manolin-app-model-row-test {
  display: grid;

  grid-template-columns:
    1fr
    auto;

  gap: 10px;
  align-items: center;

  padding:
    7px
    0;

  border-top:
    1px solid
    rgba(184, 222, 235, 0.1);
}

.manolin-app-model-row-test b,
.manolin-app-model-row-test strong {
  color:
    #effbff !important;

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif !important;

  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

.manolin-app-model-row-test span {
  color:
    var(--manolin-app-teal-test) !important;

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace !important;

  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
}

.manolin-app-model-row-test
  .manolin-app-model-high-test {
  color:
    var(--manolin-app-yellow-test) !important;
}


/* ------------------------------------------------------------------------
   WATERSHED POPULATION RECORD
   Displays the trace-continuity summary row.
   ------------------------------------------------------------------------ */

.manolin-app-read-grid-test {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  margin-top: 14px;

  border-top:
    1px solid
    var(--manolin-app-line-test);

  border-left:
    1px solid
    var(--manolin-app-line-test);
}

.manolin-app-reading-test {
  padding: 11px;

  border-right:
    1px solid
    var(--manolin-app-line-test);

  border-bottom:
    1px solid
    var(--manolin-app-line-test);

  background: transparent;
}

.manolin-app-reading-test small {
  display: block;

  color:
    rgba(211, 235, 243, 0.53) !important;

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace !important;

  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.35 !important;
  text-transform: uppercase !important;
}

.manolin-app-reading-test strong {
  display: block;

  margin-top: 6px;

  color:
    #f4fcff !important;

  font-family:
    "Montserrat",
    Arial,
    sans-serif !important;

  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
}

.manolin-app-reading-test em {
  display: block;

  margin-top: 5px;

  color:
    var(--manolin-app-teal-test) !important;

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace !important;

  font-size: 8px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-transform: uppercase !important;
}


/* ------------------------------------------------------------------------
   HARPOON PRODUCT-PERFORMANCE CHART
   Displays the observational-study population bars.
   ------------------------------------------------------------------------ */

.manolin-app-bars-test {
  height: 188px;

  padding:
    19px
    7px
    0;

  display: flex;
  align-items: end;
  gap: 9px;
}

.manolin-app-bars-test span {
  position: relative;

  flex: 1;

  background:
    linear-gradient(
      var(--manolin-app-teal-test),
      rgba(104, 215, 199, 0.18)
    );
}

.manolin-app-bars-test span::before {
  content: "";

  position: absolute;
  left: 50%;
  bottom: 100%;

  width: 1px;
  height: 18px;

  background:
    rgba(181, 220, 233, 0.25);
}


/* ------------------------------------------------------------------------
   HARPOON CONTEXT VARIABLES
   Displays mortality, eFCR, and superior-quality field signals.
   ------------------------------------------------------------------------ */

.manolin-app-condition-test {
  padding:
    11px
    0;

  border-top:
    1px solid
    var(--manolin-app-line-test);
}

.manolin-app-condition-head-test {
  display: flex;
  justify-content: space-between;

  color:
    rgba(214, 237, 244, 0.63) !important;

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace !important;

  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 0.07em !important;
  line-height: 1.35 !important;
  text-transform: uppercase !important;
}

.manolin-app-condition-head-test span,
.manolin-app-condition-head-test b,
.manolin-app-condition-head-test strong {
  color:
    rgba(214, 237, 244, 0.63) !important;

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace !important;

  font-size: 8px !important;
  font-weight: 600 !important;
}

.manolin-app-condition-bar-test {
  height: 4px;
  margin-top: 8px;

  background:
    rgba(181, 220, 233, 0.1);
}

.manolin-app-condition-bar-test span {
  display: block;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      var(--manolin-app-cyan-test),
      var(--manolin-app-teal-test)
    );
}


/* ------------------------------------------------------------------------
   HARPOON EVIDENCE TABLE
   Removes HubSpot's white table background and restores the original
   transparent dark-interface treatment.
   ------------------------------------------------------------------------ */

.manolin-app-selector-test
  table.manolin-app-table-test,
.manolin-app-selector-test
  table.manolin-app-table-test
  tbody,
.manolin-app-selector-test
  table.manolin-app-table-test
  tr,
.manolin-app-selector-test
  table.manolin-app-table-test
  td {
  background:
    transparent !important;

  background-color:
    transparent !important;

  background-image:
    none !important;

  box-shadow:
    none !important;
}

.manolin-app-selector-test
  table.manolin-app-table-test {
  width: 100% !important;
  margin-top: 10px !important;

  border:
    0 !important;

  border-collapse:
    collapse !important;
}

.manolin-app-selector-test
  table.manolin-app-table-test
  tbody,
.manolin-app-selector-test
  table.manolin-app-table-test
  tr {
  border:
    0 !important;
}

.manolin-app-selector-test
  table.manolin-app-table-test
  td {
  padding:
    8px
    3px !important;

  border:
    0 !important;

  border-top:
    1px solid
    var(--manolin-app-line-test) !important;

  color:
    rgba(213, 236, 244, 0.57) !important;

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace !important;

  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;

  text-align: left !important;
  text-transform: none !important;
}

.manolin-app-selector-test
  table.manolin-app-table-test
  td:last-child {
  color:
    #effbff !important;

  text-align:
    right !important;
}


/* ------------------------------------------------------------------------
   HARPOON OBSERVATIONAL-STUDY NOTE
   Displays the next-question insight at the bottom of the report.
   ------------------------------------------------------------------------ */

.manolin-app-alert-test {
  padding:
    11px
    0;

  border-top:
    1px solid
    var(--manolin-app-line-test);

  color:
    rgba(215, 237, 245, 0.63) !important;

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif !important;

  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.manolin-app-alert-test b,
.manolin-app-alert-test strong {
  color:
    #ffffff !important;

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif !important;

  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

.manolin-app-alert-test i {
  display: inline-block;

  width: 6px;
  height: 6px;
  margin-right: 8px;

  background:
    var(--manolin-app-teal-test);
}


/* ------------------------------------------------------------------------
   TABLET LAYOUT
   Stacks the header and product content on narrower screens.
   ------------------------------------------------------------------------ */

@media (max-width: 1030px) {
  .manolin-app-selector-test {
    padding:
      86px
      0;
  }

  .manolin-app-header-test {
    grid-template-columns:
      1fr !important;

    gap:
      16px !important;
  }

  .manolin-app-selector-test
    h2.manolin-app-heading-test {
    max-width:
      820px !important;

    font-size:
      60px !important;
  }

  .manolin-app-selector-test
    p.manolin-app-intro-test {
    max-width:
      680px !important;
  }

  .manolin-app-panel-test {
    grid-template-columns:
      1fr;
  }

  .manolin-app-copy-test {
    border-right:
      0;

    border-bottom:
      1px solid
      var(--manolin-app-line-test);
  }
}


/* ------------------------------------------------------------------------
   MOBILE LAYOUT
   Converts the tabs and interface graphics into stacked layouts.
   ------------------------------------------------------------------------ */

@media (max-width: 700px) {
  .manolin-app-selector-test {
    padding:
      72px
      0;
  }

  .manolin-app-container-test {
    width:
      min(
        calc(100% - 26px),
        1280px
      );
  }

  .manolin-app-selector-test
    h2.manolin-app-heading-test {
    max-width:
      100% !important;

    font-size:
      46px !important;

    letter-spacing:
      -0.064em !important;

    line-height:
      1 !important;
  }

  .manolin-app-selector-test
    p.manolin-app-intro-test {
    max-width:
      100% !important;

    font-size:
      15px !important;
  }

  .manolin-app-tabs-test {
    grid-template-columns:
      1fr;
  }

  .manolin-app-selector-test
    button.manolin-app-tab-test,
  .manolin-app-selector-test
    button.manolin-app-tab-test:hover,
  .manolin-app-selector-test
    button.manolin-app-tab-test:focus,
  .manolin-app-selector-test
    button.manolin-app-tab-test:active {
    min-height:
      auto !important;
  }

  .manolin-app-copy-test {
    padding:
      25px
      20px;
  }

  .manolin-app-selector-test
    h3.manolin-app-product-heading-test {
    font-size:
      34px !important;
  }

  .manolin-app-ui-area-test {
    padding:
      9px;
  }

  .manolin-app-ui-shell-test {
    min-height:
      auto;
  }

  .manolin-app-ui-grid-test {
    height:
      auto;

    grid-template-columns:
      1fr;
  }

  .manolin-app-ui-panel-test,
  .manolin-app-ui-panel-test:nth-child(even) {
    border-right:
      0;
  }

  .manolin-app-ui-map-span-test {
    grid-row:
      auto;
  }

  .manolin-app-ui-map-test {
    min-height:
      330px;
  }

  .manolin-app-read-grid-test {
    grid-template-columns:
      1fr;
  }
}


/* ------------------------------------------------------------------------
   REDUCED-MOTION ACCESSIBILITY
   Minimizes animations when the visitor requests reduced motion.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .manolin-app-selector-test *,
  .manolin-app-selector-test *::before,
  .manolin-app-selector-test *::after {
    animation-duration:
      0.001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.001ms !important;
  }
}


/* ========================================================================
   MANOLIN COHERENT POPULATION RECORD SECTION
   "A COHERENT POPULATION RECORD BEFORE ANY MODEL RUNS."

   Complete replacement CSS for the shared-intelligence section.

   Includes:
   - Full-section looping background video
   - Dark navy readability overlay
   - Continuous left and right border rails
   - Four translucent architecture-step cards
   - Restrained hover highlight and accent-line animation
   - Responsive tablet and mobile layouts
   - Reduced-motion support
   - No font imports or duplicate global palette declarations
   ======================================================================== */


/* ------------------------------------------------------------------------
   SECTION WRAPPER
   ------------------------------------------------------------------------ */

.manolin-foundation-test {
  position: relative;
  left: 50%;

  width: 100vw;
  margin-left: -50vw;

  overflow: hidden;

  background:
    var(--navy, #06141f);

  color:
    #f5fcff;

  border-top:
    1px solid
    var(--line-light, rgba(184, 222, 235, 0.18));

  border-bottom:
    1px solid
    var(--line-light, rgba(184, 222, 235, 0.18));

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif;
}

.manolin-foundation-test *,
.manolin-foundation-test *::before,
.manolin-foundation-test *::after {
  box-sizing: border-box;
}


/* ------------------------------------------------------------------------
   BACKGROUND VIDEO
   ------------------------------------------------------------------------ */

.manolin-foundation-video-test {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0;

  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;

  display: block !important;

  object-fit: cover !important;
  object-position: center center !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  background:
    var(--navy, #06141f);
}


/* ------------------------------------------------------------------------
   VIDEO OVERLAY
   Adds a dark technical tint and preserves text contrast.
   ------------------------------------------------------------------------ */

.manolin-foundation-video-overlay-test {
  position: absolute;
  inset: 0;
  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(6, 20, 31, 0.94) 0%,
      rgba(6, 20, 31, 0.84) 42%,
      rgba(6, 20, 31, 0.72) 100%
    ),
    linear-gradient(
      180deg,
      rgba(6, 20, 31, 0.28) 0%,
      rgba(6, 20, 31, 0.6) 100%
    );
}

.manolin-foundation-video-overlay-test::after {
  content: "";

  position: absolute;
  inset: 0;

  opacity: 0.44;

  background-image:
    linear-gradient(
      rgba(160, 204, 222, 0.04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(160, 204, 222, 0.032) 1px,
      transparent 1px
    );

  background-size:
    48px
    48px;
}


/* ------------------------------------------------------------------------
   SECTION CONTAINER AND CONTINUOUS BORDER RAILS
   ------------------------------------------------------------------------ */

.manolin-foundation-container-test {
  position: relative;
  z-index: 2;

  width:
    min(
      calc(100% - 40px),
      1320px
    );

  margin:
    0
    auto;

  padding:
    108px
    34px;

  border-left:
    1px solid
    var(--line-light, rgba(184, 222, 235, 0.18));

  border-right:
    1px solid
    var(--line-light, rgba(184, 222, 235, 0.18));
}


/* ------------------------------------------------------------------------
   SECTION INTRODUCTION
   ------------------------------------------------------------------------ */

.manolin-foundation-header-test {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 0.72fr);

  gap:
    50px;

  align-items:
    end;

  margin-bottom:
    37px;
}

.manolin-foundation-eyebrow-test {
  color:
    var(--cyan, #b2dafb);

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;

  font-size:
    10px;

  font-weight:
    200;

  letter-spacing:
    0.15em;

  line-height:
    1.45;

  text-transform:
    uppercase;
}

.manolin-foundation-heading-test {
  max-width:
    820px;

  margin:
    10px
    0
    0 !important;

  padding:
    0 !important;

  color:
    #f5fcff !important;

  font-family:
    "Montserrat",
    Arial,
    sans-serif !important;

  font-size:
    clamp(
      39px,
      5.1vw,
      60px
    ) !important;

  font-weight:
    700 !important;

  letter-spacing:
    -0.073em !important;

  line-height:
    0.98 !important;

  text-align:
    left !important;
}

.manolin-foundation-description-test {
  margin:
    0
    0
    4px !important;

  padding:
    0 !important;

  color:
    rgba(222, 241, 247, 0.78) !important;

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif !important;

  font-size:
    16px !important;

  font-weight:
    400 !important;

  line-height:
    1.7 !important;
}


/* ------------------------------------------------------------------------
   INTELLIGENCE-FOUNDATION STEP GRID
   ------------------------------------------------------------------------ */

.manolin-foundation-steps-test {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  border-top:
    1px solid
    var(--line-light, rgba(184, 222, 235, 0.18));

  border-left:
    1px solid
    var(--line-light, rgba(184, 222, 235, 0.18));
}


/* ------------------------------------------------------------------------
   INTELLIGENCE-FOUNDATION STEP CARDS
   ------------------------------------------------------------------------ */

.manolin-foundation-step-test {
  position:
    relative;

  z-index:
    1;

  min-height:
    246px;

  padding:
    22px;

  overflow:
    hidden;

  border-right:
    1px solid
    var(--line-light, rgba(184, 222, 235, 0.18));

  border-bottom:
    1px solid
    var(--line-light, rgba(184, 222, 235, 0.18));

  background:
    rgba(6, 20, 31, 0.62);

  backdrop-filter:
    blur(3px);

  -webkit-backdrop-filter:
    blur(3px);

  transition:
    background-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}


/* ------------------------------------------------------------------------
   STEP-CARD HOVER ACCENT LINE
   ------------------------------------------------------------------------ */

.manolin-foundation-step-test::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    100%;

  height:
    3px;

  background:
    linear-gradient(
      90deg,
      var(--cyan, #b2dafb),
      var(--teal, #68d7c7)
    );

  transform:
    scaleX(0);

  transform-origin:
    left center;

  transition:
    transform 260ms ease;
}


/* ------------------------------------------------------------------------
   STEP-CARD BACKGROUND GLOW
   ------------------------------------------------------------------------ */

.manolin-foundation-step-test::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  z-index:
    -1;

  opacity:
    0;

  pointer-events:
    none;

  background:
    radial-gradient(
      circle at 14% 8%,
      rgba(178, 218, 251, 0.18),
      transparent 44%
    );

  transition:
    opacity 240ms ease;
}


/* ------------------------------------------------------------------------
   STEP-CARD HOVER STATE
   ------------------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {
  .manolin-foundation-step-test:hover {
    z-index:
      2;

    background:
      rgba(7, 25, 36, 0.82);

    box-shadow:
      0
      16px
      28px
      rgba(0, 0, 0, 0.2);

    transform:
      translateY(-4px);
  }

  .manolin-foundation-step-test:hover::before {
    transform:
      scaleX(1);
  }

  .manolin-foundation-step-test:hover::after {
    opacity:
      1;
  }
}


/* ------------------------------------------------------------------------
   STEP-CARD TYPOGRAPHY
   ------------------------------------------------------------------------ */

.manolin-foundation-step-test small {
  color:
    var(--cyan, #b2dafb);

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;

  font-size:
    9px;

  font-weight:
    200;

  letter-spacing:
    0.13em;

  line-height:
    1.4;

  text-transform:
    uppercase;
}

.manolin-foundation-step-test h3 {
  margin:
    55px
    0
    12px !important;

  padding:
    0 !important;

  color:
    #f5fcff !important;

  font-family:
    "Montserrat",
    Arial,
    sans-serif !important;

  font-size:
    24px !important;

  font-weight:
    700 !important;

  letter-spacing:
    -0.046em !important;

  line-height:
    1.05 !important;

  text-align:
    left !important;
}

.manolin-foundation-step-test p {
  margin:
    0 !important;

  padding:
    0 !important;

  color:
    rgba(222, 241, 247, 0.72) !important;

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif !important;

  font-size:
    13px !important;

  font-weight:
    400 !important;

  line-height:
    1.58 !important;

  text-align:
    left !important;
}


/* ------------------------------------------------------------------------
   TABLET LAYOUT
   ------------------------------------------------------------------------ */

@media (max-width: 1030px) {
  .manolin-foundation-container-test {
    padding:
      92px
      28px;
  }

  .manolin-foundation-header-test {
    grid-template-columns:
      1fr;

    gap:
      7px;
  }

  .manolin-foundation-description-test {
    max-width:
      720px;
  }

  .manolin-foundation-steps-test {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}


/* ------------------------------------------------------------------------
   MOBILE LAYOUT
   ------------------------------------------------------------------------ */

@media (max-width: 700px) {
  .manolin-foundation-container-test {
    width:
      min(
        calc(100% - 24px),
        1320px
      );

    padding:
      72px
      16px;
  }

  .manolin-foundation-heading-test {
    font-size:
      46px !important;

    letter-spacing:
      -0.064em !important;

    line-height:
      1 !important;
  }

  .manolin-foundation-description-test {
    font-size:
      15px !important;
  }

  .manolin-foundation-steps-test {
    grid-template-columns:
      1fr;
  }

  .manolin-foundation-step-test {
    min-height:
      188px;
  }
}


/* ------------------------------------------------------------------------
   REDUCED-MOTION ACCESSIBILITY
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .manolin-foundation-video-test {
    display:
      none !important;
  }

  .manolin-foundation-step-test,
  .manolin-foundation-step-test::before,
  .manolin-foundation-step-test::after {
    transition-duration:
      0.001ms !important;
  }

  .manolin-foundation-step-test:hover {
    transform:
      none;
  }
}


/* ========================================================================
   ========================================================================
   ========================================================================

   MANOLIN NETWORK STATS SECTION TEST
   "THE NETWORK THAT MAKES THE INTELLIGENCE POSSIBLE."

   Complete standalone CSS for the dark network-statistics section.

   Includes:
   - Scroll-triggered count-up metric layout
   - Continuous vertical border rails
   - Subtle technical background grid
   - Responsive tablet and mobile layouts
   - Locked Manolin typography system

   ========================================================================
   ========================================================================
   ======================================================================== */

.manolin-network-test {
  --manolin-network-navy-test:
    #091d2a;

  --manolin-network-navy-dark-test:
    #071924;

  --manolin-network-cyan-test:
    #b2dafb;

  --manolin-network-teal-test:
    #68d7c7;

  --manolin-network-line-test:
    rgba(184, 222, 235, 0.18);

  --manolin-network-line-soft-test:
    rgba(184, 222, 235, 0.12);

  position:
    relative;

  left:
    50%;

  width:
    100vw;

  margin-left:
    -50vw;

  overflow:
    hidden;

  color:
    #f5fcff;

  background:
    radial-gradient(
      circle at 74% 12%,
      rgba(76, 157, 184, 0.1),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      var(--manolin-network-navy-test),
      var(--manolin-network-navy-dark-test)
    );

  border-top:
    1px solid
    rgba(184, 222, 235, 0.14);

  border-bottom:
    1px solid
    rgba(184, 222, 235, 0.14);

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif;
}

.manolin-network-test *,
.manolin-network-test *::before,
.manolin-network-test *::after {
  box-sizing:
    border-box;
}


/* ------------------------------------------------------------------------
   SECTION BACKGROUND GRID
   Adds the same understated technical-grid texture used in the
   surrounding intelligence sections.
   ------------------------------------------------------------------------ */

.manolin-network-test::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  opacity:
    0.36;

  background-image:
    linear-gradient(
      rgba(160, 204, 222, 0.04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(160, 204, 222, 0.032) 1px,
      transparent 1px
    );

  background-size:
    48px
    48px;
}


/* ------------------------------------------------------------------------
   SECTION CONTAINER AND BORDER RAILS
   Matches the internal width and rail alignment used in the data
   problem and coherent-population-record sections.
   ------------------------------------------------------------------------ */

.manolin-network-container-test {
  position:
    relative;

  z-index:
    1;

  width:
    min(
      calc(100% - 40px),
      1320px
    );

  margin:
    0
    auto;

  padding:
    76px
    34px
    0;

  border-left:
    1px solid
    var(--manolin-network-line-test);

  border-right:
    1px solid
    var(--manolin-network-line-test);
}


/* ------------------------------------------------------------------------
   SECTION INTRODUCTION
   Places the headline and supporting statement in a two-column layout.
   ------------------------------------------------------------------------ */

.manolin-network-header-test {
  display:
    grid;

  grid-template-columns:
    0.86fr
    1.14fr;

  gap:
    58px;

  align-items:
    end;

  padding-bottom:
    30px;
}

.manolin-network-eyebrow-test {
  color:
    var(--manolin-network-cyan-test);

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;

  font-size:
    10px;

  font-weight:
    200;

  letter-spacing:
    0.15em;

  line-height:
    1.45;

  text-transform:
    uppercase;
}

.manolin-network-heading-test {
  max-width:
    820px;

  margin:
    10px
    0
    0;

  color:
    #f1fbfe;

  font-family:
    "Montserrat",
    Arial,
    sans-serif;

  font-size:
    clamp(
      36px,
      4.2vw,
      64px
    );

  font-weight:
    700;

  letter-spacing:
    -0.06em;

  line-height:
    0.99;
}

.manolin-network-description-test {
  margin:
    0
    0
    2px;

  color:
    rgba(216, 238, 245, 0.64);

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif;

  font-size:
    16px;

  font-weight:
    400;

  line-height:
    1.7;
}


/* ------------------------------------------------------------------------
   NETWORK STAT GRID
   Creates the five-column count-up metric row.
   ------------------------------------------------------------------------ */

.manolin-network-grid-test {
  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      1fr
    );

  border-top:
    1px solid
    var(--manolin-network-line-test);

  border-left:
    1px solid
    var(--manolin-network-line-test);
}


/* ------------------------------------------------------------------------
   NETWORK STAT CARDS
   Keeps each metric aligned and adds a restrained hover highlight.
   ------------------------------------------------------------------------ */

.manolin-network-stat-test {
  position:
    relative;

  min-height:
    142px;

  padding:
    20px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  overflow:
    hidden;

  border-right:
    1px solid
    var(--manolin-network-line-test);

  border-bottom:
    1px solid
    var(--manolin-network-line-test);

  background:
    rgba(255, 255, 255, 0.012);

  transition:
    background-color 220ms ease,
    box-shadow 220ms ease;
}

.manolin-network-stat-test::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    100%;

  height:
    2px;

  background:
    linear-gradient(
      90deg,
      var(--manolin-network-cyan-test),
      var(--manolin-network-teal-test)
    );

  transform:
    scaleX(
      0
    );

  transform-origin:
    left
    center;

  transition:
    transform 240ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .manolin-network-stat-test:hover {
    background:
      rgba(178, 218, 251, 0.052);

    box-shadow:
      inset
      0
      0
      28px
      rgba(178, 218, 251, 0.035);
  }

  .manolin-network-stat-test:hover::before {
    transform:
      scaleX(
        1
      );
  }
}


/* ------------------------------------------------------------------------
   NETWORK STAT NUMBERS
   Uses JetBrains Mono for stable-width count-up animation.
   ------------------------------------------------------------------------ */

.manolin-network-number-test {
  display:
    block;

  color:
    #f6fcfe;

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;

  font-size:
    36px;

  font-weight:
    700;

  font-variant-numeric:
    tabular-nums;

  letter-spacing:
    -0.06em;

  line-height:
    1;
}


/* ------------------------------------------------------------------------
   NETWORK STAT LABELS
   Uses the compact technical metadata treatment.
   ------------------------------------------------------------------------ */

.manolin-network-stat-test span {
  display:
    block;

  margin-top:
    10px;

  color:
    rgba(215, 238, 245, 0.57);

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;

  font-size:
    9px;

  font-weight:
    400;

  letter-spacing:
    0.12em;

  line-height:
    1.45;

  text-transform:
    uppercase;
}


/* ------------------------------------------------------------------------
   TABLET LAYOUT
   Stacks the heading above the supporting statement and converts the
   metric row into three columns.
   ------------------------------------------------------------------------ */

@media (max-width: 1030px) {
  .manolin-network-container-test {
    padding:
      66px
      28px
      0;
  }

  .manolin-network-header-test {
    grid-template-columns:
      1fr;

    gap:
      7px;
  }

  .manolin-network-description-test {
    max-width:
      720px;
  }

  .manolin-network-grid-test {
    grid-template-columns:
      repeat(
        3,
        1fr
      );
  }
}


/* ------------------------------------------------------------------------
   MOBILE LAYOUT
   Uses compact rail spacing and converts the metric row into two columns.
   ------------------------------------------------------------------------ */

@media (max-width: 700px) {
  .manolin-network-container-test {
    width:
      min(
        calc(100% - 24px),
        1320px
      );

    padding:
      62px
      16px
      0;
  }

  .manolin-network-heading-test {
    font-size:
      46px;

    letter-spacing:
      -0.064em;

    line-height:
      1;
  }

  .manolin-network-description-test {
    font-size:
      15px;
  }

  .manolin-network-grid-test {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }

  .manolin-network-stat-test {
    min-height:
      118px;

    padding:
      16px;
  }

  .manolin-network-number-test {
    font-size:
      30px;
  }

  .manolin-network-stat-test:last-child {
    grid-column:
      1
      /
      -1;
  }
}


/* ------------------------------------------------------------------------
   REDUCED-MOTION ACCESSIBILITY
   Displays the final metric values immediately when motion is reduced.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .manolin-network-test *,
  .manolin-network-test *::before,
  .manolin-network-test *::after {
    animation-duration:
      0.001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.001ms !important;
  }
}


/* ========================================================================
   ========================================================================
   ========================================================================

   MANOLIN CONNECT THE DATA SECTION TEST
   "CONNECT THE DATA ALREADY RUNNING YOUR OPERATION."

   Complete standalone V5.5 CSS.

   Includes:
   - Light-gray section background
   - Six clearly visible bordered boxes
   - No box hover effects
   - Continuous left and right border rails
   - Locked Manolin typography system
   - Responsive tablet and mobile layouts

   Delete older integration-section CSS before adding this block.

   ========================================================================
   ========================================================================
   ======================================================================== */

.manolin-integrations-test {
  --manolin-integrations-background-test:
    #edf3f4;

  --manolin-integrations-card-background-test:
    rgba(255, 255, 255, 0.58);

  --manolin-integrations-ink-test:
    #102230;

  --manolin-integrations-muted-test:
    #607884;

  --manolin-integrations-blue-test:
    #4b93ae;

  --manolin-integrations-line-test:
    rgba(16, 34, 48, 0.16);

  --manolin-integrations-rail-test:
    rgba(75, 147, 174, 0.2);

  position:
    relative;

  left:
    50%;

  width:
    100vw;

  margin-left:
    -50vw;

  overflow:
    hidden;

  background:
    var(--manolin-integrations-background-test) !important;

  color:
    var(--manolin-integrations-ink-test);

  border-top:
    1px solid
    rgba(75, 147, 174, 0.12);

  border-bottom:
    1px solid
    rgba(75, 147, 174, 0.12);

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif;
}

.manolin-integrations-test *,
.manolin-integrations-test *::before,
.manolin-integrations-test *::after {
  box-sizing:
    border-box;
}


/* ------------------------------------------------------------------------
   SECTION CONTAINER AND BORDER RAILS
   Aligns the vertical rails with the surrounding homepage sections.
   ------------------------------------------------------------------------ */

.manolin-integrations-test
  .manolin-integrations-container-test {
  position:
    relative;

  z-index:
    1;

  width:
    min(
      calc(100% - 40px),
      1320px
    );

  margin:
    0
    auto;

  padding:
    108px
    34px;

  border-left:
    1px solid
    var(--manolin-integrations-rail-test);

  border-right:
    1px solid
    var(--manolin-integrations-rail-test);
}


/* ------------------------------------------------------------------------
   SECTION INTRODUCTION
   Preserves the V5.5 two-column heading and description layout.
   ------------------------------------------------------------------------ */

.manolin-integrations-test
  .manolin-integrations-header-test {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    minmax(
      0,
      0.72fr
    );

  gap:
    50px;

  align-items:
    end;

  margin-bottom:
    36px;
}

.manolin-integrations-test
  .manolin-integrations-eyebrow-test {
  color:
    var(--manolin-integrations-blue-test);

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;

  font-size:
    10px;

  font-weight:
    200;

  letter-spacing:
    0.15em;

  line-height:
    1.45;

  text-transform:
    uppercase;
}

.manolin-integrations-test
  .manolin-integrations-heading-test {
  max-width:
    820px;

  margin:
    10px
    0
    0;

  padding:
    0;

  color:
    var(--manolin-integrations-ink-test);

  font-family:
    "Montserrat",
    Arial,
    sans-serif;

  font-size:
    clamp(
      39px,
      5.1vw,
      60px
    );

  font-weight:
    700;

  letter-spacing:
    -0.073em;

  line-height:
    0.98;

  text-align:
    left;
}

.manolin-integrations-test
  .manolin-integrations-description-test {
  margin:
    0
    0
    4px;

  padding:
    0;

  color:
    var(--manolin-integrations-muted-test);

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif;

  font-size:
    16px;

  font-weight:
    400;

  line-height:
    1.7;
}


/* ------------------------------------------------------------------------
   CONNECTED DATA SOURCE GRID
   Forces the original V5.5 three-column bordered-box layout.
   ------------------------------------------------------------------------ */

.manolin-integrations-test
  .manolin-integrations-grid-test {
  display:
    grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    ) !important;

  width:
    100%;

  border-top:
    1px solid
    var(--manolin-integrations-line-test) !important;

  border-left:
    1px solid
    var(--manolin-integrations-line-test) !important;
}


/* ------------------------------------------------------------------------
   CONNECTED DATA SOURCE BOXES
   Preserves the six visible boxes. These remain static on hover.
   ------------------------------------------------------------------------ */

.manolin-integrations-test
  .manolin-integrations-card-test,
.manolin-integrations-test
  .manolin-integrations-card-test:hover,
.manolin-integrations-test
  .manolin-integrations-card-test:focus,
.manolin-integrations-test
  .manolin-integrations-card-test:active {
  display:
    block !important;

  min-width:
    0;

  min-height:
    205px !important;

  margin:
    0 !important;

  padding:
    21px !important;

  border:
    0 !important;

  border-right:
    1px solid
    var(--manolin-integrations-line-test) !important;

  border-bottom:
    1px solid
    var(--manolin-integrations-line-test) !important;

  border-radius:
    0 !important;

  background:
    var(--manolin-integrations-card-background-test) !important;

  background-color:
    var(--manolin-integrations-card-background-test) !important;

  background-image:
    none !important;

  box-shadow:
    none !important;

  transform:
    none !important;

  transition:
    none !important;
}

.manolin-integrations-test
  .manolin-integrations-card-test::before,
.manolin-integrations-test
  .manolin-integrations-card-test::after {
  content:
    none !important;

  display:
    none !important;
}


/* ------------------------------------------------------------------------
   BOX TYPOGRAPHY
   Matches the original V5.5 visual hierarchy.
   ------------------------------------------------------------------------ */

.manolin-integrations-test
  .manolin-integrations-number-test {
  display:
    block;

  color:
    #4a91ab;

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.13em;

  line-height:
    1.4;
}

.manolin-integrations-test
  .manolin-integrations-card-test
  h3 {
  margin:
    42px
    0
    12px !important;

  padding:
    0 !important;

  color:
    var(--manolin-integrations-ink-test) !important;

  font-family:
    "Montserrat",
    Arial,
    sans-serif !important;

  font-size:
    21px !important;

  font-weight:
    700 !important;

  letter-spacing:
    -0.046em !important;

  line-height:
    1.05 !important;

  text-align:
    left !important;
}

.manolin-integrations-test
  .manolin-integrations-card-test
  p {
  margin:
    0 !important;

  padding:
    0 !important;

  color:
    var(--manolin-integrations-muted-test) !important;

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif !important;

  font-size:
    13px !important;

  font-weight:
    400 !important;

  line-height:
    1.58 !important;

  text-align:
    left !important;
}


/* ------------------------------------------------------------------------
   SECTION CTA
   Preserves the understated text CTA with the animated arrow.
   ------------------------------------------------------------------------ */

.manolin-integrations-test
  .manolin-integrations-link-test,
.manolin-integrations-test
  .manolin-integrations-link-test:link,
.manolin-integrations-test
  .manolin-integrations-link-test:visited,
.manolin-integrations-test
  .manolin-integrations-link-test:hover,
.manolin-integrations-test
  .manolin-integrations-link-test:focus,
.manolin-integrations-test
  .manolin-integrations-link-test:active {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  margin-top:
    22px;

  color:
    #397f99 !important;

  font-family:
    "Montserrat",
    Arial,
    sans-serif;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.12em;

  line-height:
    1.4;

  text-decoration:
    none !important;

  text-transform:
    uppercase;
}

.manolin-integrations-test
  .manolin-integrations-arrow-test {
  display:
    inline-block;

  transition:
    transform
    180ms
    ease;
}

.manolin-integrations-test
  .manolin-integrations-link-test:hover
  .manolin-integrations-arrow-test,
.manolin-integrations-test
  .manolin-integrations-link-test:focus
  .manolin-integrations-arrow-test {
  transform:
    translateX(
      4px
    );
}


/* ------------------------------------------------------------------------
   TABLET LAYOUT
   Converts the bordered grid into two columns.
   ------------------------------------------------------------------------ */

@media (max-width: 1030px) {
  .manolin-integrations-test
    .manolin-integrations-container-test {
    padding:
      92px
      28px;
  }

  .manolin-integrations-test
    .manolin-integrations-header-test {
    grid-template-columns:
      1fr;

    gap:
      7px;
  }

  .manolin-integrations-test
    .manolin-integrations-description-test {
    max-width:
      720px;
  }

  .manolin-integrations-test
    .manolin-integrations-grid-test {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      ) !important;
  }
}


/* ------------------------------------------------------------------------
   MOBILE LAYOUT
   Converts the bordered grid into a single-column stack.
   ------------------------------------------------------------------------ */

@media (max-width: 700px) {
  .manolin-integrations-test
    .manolin-integrations-container-test {
    width:
      min(
        calc(100% - 24px),
        1320px
      );

    padding:
      72px
      16px;
  }

  .manolin-integrations-test
    .manolin-integrations-heading-test {
    font-size:
      46px;

    letter-spacing:
      -0.064em;

    line-height:
      1;
  }

  .manolin-integrations-test
    .manolin-integrations-description-test {
    font-size:
      15px;
  }

  .manolin-integrations-test
    .manolin-integrations-grid-test {
    grid-template-columns:
      1fr !important;
  }

  .manolin-integrations-test
    .manolin-integrations-card-test {
    min-height:
      168px !important;
  }
}


/* ========================================================================
   ========================================================================
   ========================================================================

   MANOLIN INSIGHTS SECTION
   "EXPLAIN THE SYSTEM. PROVE THE THINKING."

   Complete replacement CSS for the article and insights section.

   Includes:
   - Original V5.5 section hierarchy and spacing
   - Continuous left and right border rails
   - Three-column bordered article-card layout
   - Hover-triggered full-card image reveal
   - Dark readability overlay
   - Full-width and full-height HubSpot image overrides
   - Approved global Manolin typography only
   - No font imports and no duplicate global color declarations

   ========================================================================
   ========================================================================
   ======================================================================== */


/* ------------------------------------------------------------------------
   SECTION WRAPPER
   Preserves the light concept-section background treatment.
   ------------------------------------------------------------------------ */

.mn-insights-section {
  position:
    relative;

  overflow:
    hidden;

  background:
    var(
      --paper,
      #f7f9f9
    );

  color:
    var(
      --ink,
      #102230
    );
}

.mn-insights-section *,
.mn-insights-section *::before,
.mn-insights-section *::after {
  box-sizing:
    border-box;
}


/* ------------------------------------------------------------------------
   SECTION CONTAINER AND CONTINUOUS BORDER RAILS
   Aligns with the internal width and padding used by the surrounding
   homepage sections.
   ------------------------------------------------------------------------ */

.mn-insights-section__container {
  position:
    relative;

  width:
    min(
      calc(
        100%
        -
        40px
      ),
      1320px
    ) !important;

  margin:
    0
    auto !important;

  padding:
    108px
    34px !important;

  border-left:
    1px
    solid
    var(
      --line-dark,
      rgba(
        16,
        34,
        48,
        0.13
      )
    ) !important;

  border-right:
    1px
    solid
    var(
      --line-dark,
      rgba(
        16,
        34,
        48,
        0.13
      )
    ) !important;
}


/* ------------------------------------------------------------------------
   SECTION INTRODUCTION
   Restores the V5.5 headline hierarchy and CTA alignment.
   ------------------------------------------------------------------------ */

.mn-insights-section__header {
  display:
    flex;

  align-items:
    end;

  justify-content:
    space-between;

  gap:
    32px;

  margin-bottom:
    29px;
}

.mn-insights-section__intro {
  max-width:
    920px;
}

.mn-insights-section__eyebrow {
  color:
    #4b93ae;

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;

  font-size:
    10px;

  font-weight:
    200;

  letter-spacing:
    0.15em;

  line-height:
    1.45;

  text-transform:
    uppercase;
}

.mn-insights-section__title {
  max-width:
    920px;

  margin:
    10px
    0
    18px !important;

  padding:
    0 !important;

  color:
    var(
      --ink,
      #102230
    ) !important;

  font-family:
    "Montserrat",
    Arial,
    sans-serif !important;

  font-size:
    clamp(
      39px,
      5.1vw,
      60px
    ) !important;

  font-weight:
    700 !important;

  letter-spacing:
    -0.073em !important;

  line-height:
    0.98 !important;

  text-align:
    left !important;
}

.mn-insights-section__description {
  max-width:
    680px;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    var(
      --muted,
      #6b7f89
    ) !important;

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif !important;

  font-size:
    16px !important;

  font-weight:
    400 !important;

  line-height:
    1.7 !important;
}


/* ------------------------------------------------------------------------
   SECTION CTA
   Restores the understated outlined-button treatment.
   ------------------------------------------------------------------------ */

.mn-insights-section__cta,
.mn-insights-section__cta:link,
.mn-insights-section__cta:visited,
.mn-insights-section__cta:hover,
.mn-insights-section__cta:focus,
.mn-insights-section__cta:active {
  flex-shrink:
    0;

  min-height:
    48px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    11px;

  padding:
    0
    17px;

  border:
    1px
    solid
    var(
      --line-dark,
      rgba(
        16,
        34,
        48,
        0.13
      )
    );

  background:
    transparent;

  color:
    var(
      --ink,
      #102230
    ) !important;

  font-family:
    "Montserrat",
    Arial,
    sans-serif !important;

  font-size:
    13px !important;

  font-weight:
    700 !important;

  line-height:
    1.2 !important;

  text-decoration:
    none !important;

  transform:
    none;

  transition:
    background-color
    180ms
    ease,
    border-color
    180ms
    ease,
    transform
    180ms
    ease;
}

.mn-insights-section__cta:hover,
.mn-insights-section__cta:focus-visible {
  border-color:
    rgba(
      16,
      34,
      48,
      0.32
    );

  background:
    #ffffff;

  transform:
    translateY(
      -2px
    );
}

.mn-insights-section__cta-arrow {
  display:
    inline-block;

  transition:
    transform
    180ms
    ease;
}

.mn-insights-section__cta:hover
  .mn-insights-section__cta-arrow,
.mn-insights-section__cta:focus-visible
  .mn-insights-section__cta-arrow {
  transform:
    translateX(
      4px
    );
}


/* ------------------------------------------------------------------------
   ARTICLE GRID
   Restores the original three-column bordered-card layout.
   ------------------------------------------------------------------------ */

.mn-insights-section__grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  border-top:
    1px
    solid
    var(
      --line-dark,
      rgba(
        16,
        34,
        48,
        0.13
      )
    ) !important;

  border-left:
    1px
    solid
    var(
      --line-dark,
      rgba(
        16,
        34,
        48,
        0.13
      )
    ) !important;
}


/* ------------------------------------------------------------------------
   ARTICLE CARDS
   Preserves the V5.5 dimensions and visible borders.
   ------------------------------------------------------------------------ */

.mn-insights-card,
.mn-insights-card:link,
.mn-insights-card:visited {
  position:
    relative !important;

  isolation:
    isolate;

  min-height:
    274px;

  padding:
    20px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  overflow:
    hidden !important;

  border-right:
    1px
    solid
    var(
      --line-dark,
      rgba(
        16,
        34,
        48,
        0.13
      )
    ) !important;

  border-bottom:
    1px
    solid
    var(
      --line-dark,
      rgba(
        16,
        34,
        48,
        0.13
      )
    ) !important;

  background:
    #fbfcfc;

  color:
    var(
      --ink,
      #102230
    );

  text-decoration:
    none !important;

  transform:
    translateY(
      0
    );

  transition:
    transform
    220ms
    ease,
    box-shadow
    220ms
    ease;
}


/* ------------------------------------------------------------------------
   ARTICLE PHOTO
   Forces each image to fill the full card container from edge to edge.
   The !important declarations override HubSpot responsive-image defaults.
   ------------------------------------------------------------------------ */

.mn-insights-card
  .mn-insights-card__image {
  position:
    absolute !important;

  top:
    0 !important;

  right:
    0 !important;

  bottom:
    0 !important;

  left:
    0 !important;

  z-index:
    -2;

  width:
    100% !important;

  max-width:
    none !important;

  height:
    100% !important;

  min-height:
    100% !important;

  display:
    block !important;

  object-fit:
    cover !important;

  object-position:
    center
    center !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  opacity:
    0;

  transform:
    scale(
      1.1
    );

  transition:
    opacity
    360ms
    ease,
    transform
    620ms
    ease;
}


/* ------------------------------------------------------------------------
   ARTICLE PHOTO OVERLAY
   Ensures text remains legible while the hover photo is visible.
   ------------------------------------------------------------------------ */

.mn-insights-card
  .mn-insights-card__overlay {
  position:
    absolute !important;

  inset:
    0 !important;

  z-index:
    -1;

  width:
    100% !important;

  height:
    100% !important;

  opacity:
    0;

  background:
    linear-gradient(
      180deg,
      rgba(
        6,
        20,
        31,
        0.5
      )
      0%,
      rgba(
        6,
        20,
        31,
        0.76
      )
      48%,
      rgba(
        6,
        20,
        31,
        0.94
      )
      100%
    );

  transition:
    opacity
    320ms
    ease;
}


/* ------------------------------------------------------------------------
   ARTICLE TYPOGRAPHY
   Keeps metadata and copy above the image overlay.
   ------------------------------------------------------------------------ */

.mn-insights-card__label,
.mn-insights-card__copy {
  position:
    relative;

  z-index:
    1;
}

.mn-insights-card__label {
  color:
    #488fa9;

  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.12em;

  line-height:
    1.45;

  text-transform:
    uppercase;

  transition:
    color
    220ms
    ease;
}

.mn-insights-card__title {
  margin:
    0
    0
    11px !important;

  padding:
    0 !important;

  color:
    var(
      --ink,
      #102230
    ) !important;

  font-family:
    "Montserrat",
    Arial,
    sans-serif !important;

  font-size:
    23px !important;

  font-weight:
    700 !important;

  letter-spacing:
    -0.046em !important;

  line-height:
    1.08 !important;

  text-align:
    left !important;

  transition:
    color
    220ms
    ease;
}

.mn-insights-card__description {
  margin:
    0 !important;

  padding:
    0 !important;

  color:
    var(
      --muted,
      #6b7f89
    ) !important;

  font-family:
    "Source Sans 3",
    Arial,
    sans-serif !important;

  font-size:
    13px !important;

  font-weight:
    400 !important;

  line-height:
    1.58 !important;

  text-align:
    left !important;

  transition:
    color
    220ms
    ease;
}


/* ------------------------------------------------------------------------
   ARTICLE HOVER STATE
   Reveals the full-card image and overlay while maintaining readability.
   ------------------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {
  .mn-insights-card:hover {
    z-index:
      2;

    box-shadow:
      0
      18px
      30px
      rgba(
        16,
        34,
        48,
        0.17
      );

    transform:
      translateY(
        -4px
      );
  }

  .mn-insights-card:hover
    .mn-insights-card__image {
    opacity:
      1;

    transform:
      scale(
        1.02
      );
  }

  .mn-insights-card:hover
    .mn-insights-card__overlay {
    opacity:
      1;
  }

  .mn-insights-card:hover
    .mn-insights-card__label {
    color:
      var(
        --cyan,
        #b2dafb
      );
  }

  .mn-insights-card:hover
    .mn-insights-card__title {
    color:
      #f5fcff !important;
  }

  .mn-insights-card:hover
    .mn-insights-card__description {
    color:
      rgba(
        225,
        242,
        248,
        0.82
      ) !important;
  }
}


/* ------------------------------------------------------------------------
   KEYBOARD-FOCUS STATE
   Mirrors the hover reveal for keyboard navigation.
   ------------------------------------------------------------------------ */

.mn-insights-card:focus-visible {
  z-index:
    2;

  outline:
    2px
    solid
    var(
      --cyan,
      #b2dafb
    );

  outline-offset:
    -2px;

  box-shadow:
    0
    18px
    30px
    rgba(
      16,
      34,
      48,
      0.17
    );

  transform:
    translateY(
      -4px
    );
}

.mn-insights-card:focus-visible
  .mn-insights-card__image,
.mn-insights-card:focus-visible
  .mn-insights-card__overlay {
  opacity:
    1;
}

.mn-insights-card:focus-visible
  .mn-insights-card__image {
  transform:
    scale(
      1.02
    );
}

.mn-insights-card:focus-visible
  .mn-insights-card__label {
  color:
    var(
      --cyan,
      #b2dafb
    );
}

.mn-insights-card:focus-visible
  .mn-insights-card__title {
  color:
    #f5fcff !important;
}

.mn-insights-card:focus-visible
  .mn-insights-card__description {
  color:
    rgba(
      225,
      242,
      248,
      0.82
    ) !important;
}


/* ------------------------------------------------------------------------
   TABLET LAYOUT
   Stacks the cards and preserves aligned outer rails.
   ------------------------------------------------------------------------ */

@media (max-width: 1030px) {
  .mn-insights-section__container {
    padding:
      92px
      28px !important;
  }

  .mn-insights-section__header {
    display:
      block;
  }

  .mn-insights-section__cta {
    margin-top:
      20px;
  }

  .mn-insights-section__grid {
    grid-template-columns:
      1fr;
  }

  .mn-insights-card {
    min-height:
      240px;
  }
}


/* ------------------------------------------------------------------------
   MOBILE LAYOUT
   Reduces internal padding while preserving the vertical rail treatment.
   ------------------------------------------------------------------------ */

@media (max-width: 700px) {
  .mn-insights-section__container {
    width:
      min(
        calc(100% - 24px),
        1320px
      ) !important;

    padding:
      72px
      16px !important;
  }

  .mn-insights-section__title {
    font-size:
      46px !important;

    letter-spacing:
      -0.064em !important;

    line-height:
      1 !important;
  }

  .mn-insights-section__description {
    font-size:
      15px !important;
  }

  .mn-insights-card {
    min-height:
      218px;

    padding:
      18px;
  }

  .mn-insights-card__title {
    font-size:
      21px !important;
  }
}


/* ------------------------------------------------------------------------
   REDUCED-MOTION ACCESSIBILITY
   Preserves the image reveal while removing pronounced movement.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .mn-insights-card,
  .mn-insights-card__image,
  .mn-insights-card__overlay,
  .mn-insights-section__cta,
  .mn-insights-section__cta-arrow {
    transition-duration:
      0.001ms !important;
  }

  .mn-insights-card:hover,
  .mn-insights-card:focus-visible,
  .mn-insights-section__cta:hover,
  .mn-insights-section__cta:focus-visible {
    transform:
      none;
  }
}


/* ========================================================================

MANOLIN FAQ SECTION
"UNDERSTAND WHAT SITS BENEATH THE INTERFACE."
=============================================

======================================================================== */

.mn-faq-section {
position: relative;
overflow: hidden;
background: #ffffff;
color: var(--ink, #102230);
}

.mn-faq-section *,
.mn-faq-section *::before,
.mn-faq-section *::after {
box-sizing: border-box;
}

/* ------------------------------------------------------------------------
SECTION CONTAINER AND CONTINUOUS BORDER RAILS
------------------------------------------------------------------------ */

.mn-faq-section__container {
width: min(
calc(100% - 40px),
1320px
) !important;

margin: 0 auto !important;
padding: 108px 34px !important;

border-left:
1px solid
var(--line-dark, rgba(16, 34, 48, 0.13));

border-right:
1px solid
var(--line-dark, rgba(16, 34, 48, 0.13));
}

/* ------------------------------------------------------------------------
FAQ TWO-COLUMN LAYOUT
------------------------------------------------------------------------ */

.mn-faq-section__layout {
display: grid;

grid-template-columns:
minmax(0, 0.74fr)
minmax(0, 1.26fr);

gap: 74px;
align-items: start;
}

/* ------------------------------------------------------------------------
FAQ INTRODUCTION
------------------------------------------------------------------------ */

.mn-faq-section__eyebrow {
color: #4b93ae;

font-family:
"JetBrains Mono",
ui-monospace,
monospace;

font-size: 10px;
font-weight: 200;
letter-spacing: 0.15em;
line-height: 1.45;
text-transform: uppercase;
}

.mn-faq-section__title {
max-width: 620px;

margin: 10px 0 16px !important;
padding: 0 !important;

color: var(--ink, #102230) !important;

font-family:
"Montserrat",
Arial,
sans-serif !important;

font-size: clamp(39px, 4.7vw, 60px) !important;
font-weight: 700 !important;
letter-spacing: -0.073em !important;
line-height: 0.99 !important;
text-align: left !important;
}

.mn-faq-section__description {
max-width: 560px;

margin: 0 !important;
padding: 0 !important;

color: var(--muted, #6b7f89) !important;

font-family:
"Source Sans 3",
Arial,
sans-serif !important;

font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.68 !important;
}

/* ------------------------------------------------------------------------
FAQ ACCORDION LIST
------------------------------------------------------------------------ */

.mn-faq-section__list {
border-top:
1px solid
var(--line-dark, rgba(16, 34, 48, 0.13));
}

.mn-faq-item {
border-bottom:
1px solid
var(--line-dark, rgba(16, 34, 48, 0.13));
}

/* ------------------------------------------------------------------------
FAQ QUESTION
------------------------------------------------------------------------ */

.mn-faq-item__question {
position: relative;
list-style: none;

padding: 20px 42px 20px 0;
cursor: pointer;

color: var(--ink, #102230) !important;

font-family:
"Montserrat",
Arial,
sans-serif !important;

font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: -0.015em !important;
line-height: 1.42 !important;

transition:
color 180ms ease;
}

.mn-faq-item__question::-webkit-details-marker {
display: none;
}

.mn-faq-item__question::after {
content: "+";

position: absolute;
top: 17px;
right: 4px;

color: #4b93ae;

font-family:
"JetBrains Mono",
ui-monospace,
monospace;

font-size: 18px;
font-weight: 500;
line-height: 1;
}

.mn-faq-item[open]
.mn-faq-item__question::after {
content: "–";
}

.mn-faq-item__question:hover,
.mn-faq-item__question:focus-visible {
color: #397f99 !important;
}

/* ------------------------------------------------------------------------
FAQ ANSWER
------------------------------------------------------------------------ */

.mn-faq-item__answer {
max-width: 760px;

margin: 0 !important;
padding: 0 38px 20px 0 !important;

color: var(--muted, #6b7f89) !important;

font-family:
"Source Sans 3",
Arial,
sans-serif !important;

font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.68 !important;
}

/* ------------------------------------------------------------------------
TABLET LAYOUT
------------------------------------------------------------------------ */

@media (max-width: 1030px) {
.mn-faq-section__container {
padding: 92px 28px !important;
}

.mn-faq-section__layout {
grid-template-columns: 1fr;
gap: 28px;
}

.mn-faq-section__description {
max-width: 680px;
}
}

/* ------------------------------------------------------------------------
MOBILE LAYOUT
------------------------------------------------------------------------ */

@media (max-width: 700px) {
.mn-faq-section__container {
width: min(
calc(100% - 24px),
1320px
) !important;

```
padding: 72px 16px !important;
```

}

.mn-faq-section__title {
font-size: 46px !important;
letter-spacing: -0.064em !important;
line-height: 1 !important;
}

.mn-faq-section__description {
font-size: 15px !important;
}

.mn-faq-item__question {
padding-right: 34px;
}

.mn-faq-item__answer {
padding-right: 24px !important;
}
}

/* ------------------------------------------------------------------------
   SECTION CTA
   Restores the understated outlined-button treatment.
   ------------------------------------------------------------------------ */

.mn-faq-section__cta,
.mn-faq-section__cta:link,
.mn-faq-section__cta:visited,
.mn-faq-section__cta:hover,
.mn-faq-section__cta:focus,
.mn-faq-section__cta:active {
  flex-shrink:
    0;

  min-height:
    48px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    11px;

  padding:
    0
    17px;

  border:
    1px
    solid
    var(
      --line-dark,
      rgba(
        16,
        34,
        48,
        0.13
      )
    );
  
  margin-top: 20px;

  background:
    transparent;

  color:
    var(
      --ink,
      #102230
    ) !important;

  font-family:
    "Montserrat",
    Arial,
    sans-serif !important;

  font-size:
    13px !important;

  font-weight:
    700 !important;

  line-height:
    1.2 !important;

  text-decoration:
    none !important;

  transform:
    none;

  transition:
    background-color
    180ms
    ease,
    border-color
    180ms
    ease,
    transform
    180ms
    ease;
}

.mn-faq-section__cta:hover,
.mn-faq-section__cta:focus-visible {
  border-color:
    rgba(
      16,
      34,
      48,
      0.32
    );

  background:
    #ffffff;

  transform:
    translateY(
      -2px
    );
}

.mn-faq-section__cta-arrow {
  display:
    inline-block;

  transition:
    transform
    180ms
    ease;
}

.mn-faq-section__cta:hover
  .mn-faq-section__cta-arrow,
.mn-faq-section__cta:focus-visible
  .mn-faq--section__cta-arrow {
  transform:
    translateX(
      4px
    );
}


/* ========================================================================

MANOLIN FINAL DUAL-ICP CTA SECTION
"BRING A CLEARER QUESTION TO YOUR NEXT DECISION."
=================================================

======================================================================== */

.mn-final-cta-section {
position: relative;
overflow: hidden;

background: #071824;
color: #effbff;

border-top:
1px solid
var(--line-light, rgba(184, 222, 235, 0.18));
}

.mn-final-cta-section *,
.mn-final-cta-section *::before,
.mn-final-cta-section *::after {
box-sizing: border-box;
}

/* ------------------------------------------------------------------------
TECHNICAL BACKGROUND GRID
------------------------------------------------------------------------ */

.mn-final-cta-section::before {
content: "";

position: absolute;
inset: 0;

pointer-events: none;
opacity: 0.42;

background-image:
linear-gradient(
rgba(160, 204, 222, 0.038) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(160, 204, 222, 0.03) 1px,
transparent 1px
);

background-size: 48px 48px;
}

/* ------------------------------------------------------------------------
SECTION CONTAINER AND CONTINUOUS BORDER RAILS
------------------------------------------------------------------------ */

.mn-final-cta-section__container {
position: relative;
z-index: 1;

width: min(
calc(100% - 40px),
1320px
) !important;

margin: 0 auto !important;
padding: 91px 34px 84px !important;

border-left:
1px solid
var(--line-light, rgba(184, 222, 235, 0.18));

border-right:
1px solid
var(--line-light, rgba(184, 222, 235, 0.18));
}

/* ------------------------------------------------------------------------
SECTION INTRODUCTION
------------------------------------------------------------------------ */

.mn-final-cta-section__header {
max-width: 900px;
margin-bottom: 35px;
}

.mn-final-cta-section__eyebrow {
color: var(--cyan, #b2dafb);

font-family:
"JetBrains Mono",
ui-monospace,
monospace;

font-size: 10px;
font-weight: 200;
letter-spacing: 0.15em;
line-height: 1.45;
text-transform: uppercase;
}

.mn-final-cta-section__title {
max-width: 900px;

margin: 10px 0 15px !important;
padding: 0 !important;

color: #f4fcfe !important;

font-family:
"Montserrat",
Arial,
sans-serif !important;

font-size: clamp(40px, 5vw, 60px) !important;
font-weight: 700 !important;
letter-spacing: -0.073em !important;
line-height: 0.99 !important;
text-align: left !important;
}

.mn-final-cta-section__description {
max-width: 780px;

margin: 0 !important;
padding: 0 !important;

color: rgba(217, 239, 246, 0.66) !important;

font-family:
"Source Sans 3",
Arial,
sans-serif !important;

font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
}

/* ------------------------------------------------------------------------
DUAL-ICP CTA GRID
------------------------------------------------------------------------ */

.mn-final-cta-section__grid {
display: grid;

grid-template-columns:
minmax(0, 1fr)
1px
minmax(0, 1fr);

gap: 36px;

padding-top: 27px;

border-top:
1px solid
var(--line-light, rgba(184, 222, 235, 0.18));
}

/* ------------------------------------------------------------------------
DASHED CENTER DIVIDER
------------------------------------------------------------------------ */

.mn-final-cta-section__divider {
align-self: stretch;
min-height: 180px;

background:
repeating-linear-gradient(
to bottom,
rgba(178, 218, 251, 0.38) 0 5px,
transparent 5px 11px
);
}

/* ------------------------------------------------------------------------
CTA LANES
------------------------------------------------------------------------ */

.mn-final-cta-section__lane {
padding: 0 8px;
}

.mn-final-cta-section__lane:first-child {
padding-left: 0;
}

.mn-final-cta-section__lane:last-child {
padding-right: 0;
}

.mn-final-cta-section__lane-label {
display: block;

color: var(--cyan, #b2dafb);

font-family:
"JetBrains Mono",
ui-monospace,
monospace;

font-size: 9px;
font-weight: 600;
letter-spacing: 0.14em;
line-height: 1.45;
text-transform: uppercase;
}

.mn-final-cta-section__lane-title {
max-width: 520px;

margin: 12px 0 11px !important;
padding: 0 !important;

color: #f5fcfe !important;

font-family:
"Montserrat",
Arial,
sans-serif !important;

font-size: 29px !important;
font-weight: 700 !important;
letter-spacing: -0.046em !important;
line-height: 1.08 !important;
text-align: left !important;
}

.mn-final-cta-section__lane-description {
max-width: 560px;

margin: 0 0 19px !important;
padding: 0 !important;

color: rgba(214, 237, 244, 0.62) !important;

font-family:
"Source Sans 3",
Arial,
sans-serif !important;

font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.62 !important;
}

/* ------------------------------------------------------------------------
TEXT LINKS AND ANIMATED ARROWS
------------------------------------------------------------------------ */

.mn-final-cta-section__link,
.mn-final-cta-section__link:link,
.mn-final-cta-section__link:visited,
.mn-final-cta-section__link:hover,
.mn-final-cta-section__link:focus,
.mn-final-cta-section__link:active {
display: inline-flex;
align-items: center;
gap: 9px;

color: var(--cyan, #b2dafb) !important;

font-family:
"JetBrains Mono",
ui-monospace,
monospace !important;

font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
line-height: 1.45 !important;
text-decoration: none !important;
text-transform: uppercase !important;
}

.mn-final-cta-section__arrow {
display: inline-block;

transition:
transform 180ms ease;
}

.mn-final-cta-section__link:hover
.mn-final-cta-section__arrow,
.mn-final-cta-section__link:focus-visible
.mn-final-cta-section__arrow {
transform: translateX(4px);
}

/* ------------------------------------------------------------------------
MOBILE LAYOUT
------------------------------------------------------------------------ */

@media (max-width: 700px) {
.mn-final-cta-section__container {
width: min(
calc(100% - 24px),
1320px
) !important;

```
padding: 76px 16px 70px !important;
```

}

.mn-final-cta-section__title {
font-size: 46px !important;
letter-spacing: -0.064em !important;
line-height: 1 !important;
}

.mn-final-cta-section__description {
font-size: 15px !important;
}

.mn-final-cta-section__grid {
grid-template-columns: 1fr;
gap: 23px;
}

.mn-final-cta-section__divider {
display: none;
}

.mn-final-cta-section__lane {
padding: 0;
}

.mn-final-cta-section__lane
+
.mn-final-cta-section__lane {
padding-top: 22px;

```
border-top:
  1px solid
  var(--line-light, rgba(184, 222, 235, 0.18));
```

}
}

/* ------------------------------------------------------------------------
REDUCED-MOTION ACCESSIBILITY
------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
.mn-final-cta-section__arrow {
transition-duration: 0.001ms !important;
}
}