/*============================================================================================================================*/
/* 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.                                                                    */
/*============================================================================================================================*/

/*----------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------*/
/*----------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: 700;
  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: 1px;

  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;
  }
}

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

   MANOLIN DATA PROBLEM SECTION TEST
   "FISH RECORDS BREAK BEFORE THE ANALYSIS BEGINS."

   Complete standalone CSS for the dark navy data-problem section.
   Includes Hex-style vertical border rails, responsive behavior,
   and the animated trace graphic.

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

.manolin-data-problem-test {
  --manolin-data-problem-navy-test:
    #071924;

  --manolin-data-problem-navy-mid-test:
    #09212f;

  --manolin-data-problem-frame-test:
    #0b2433;

  --manolin-data-problem-cyan-test:
    #b2dafb;

  --manolin-data-problem-teal-test:
    #68d7c7;

  --manolin-data-problem-danger-test:
    #e97972;

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

  --manolin-data-problem-line-strong-test:
    rgba(184, 222, 235, 0.22);

  position:
    relative;

  left:
    50%;

  width:
    100vw;

  margin-left:
    -50vw;

  overflow:
    hidden;

  color:
    #effbff;

  background:
    radial-gradient(
      circle at 74% 18%,
      rgba(76, 157, 184, 0.09),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      var(--manolin-data-problem-navy-test),
      var(--manolin-data-problem-navy-mid-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-data-problem-test *,
.manolin-data-problem-test *::before,
.manolin-data-problem-test *::after {
  box-sizing:
    border-box;
}


/* ------------------------------------------------------------------------
   SECTION BACKGROUND GRID
   Adds the subtle technical grid beneath the section content.
   ------------------------------------------------------------------------ */

.manolin-data-problem-test::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  opacity:
    0.38;

  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
   Creates the Hex-style vertical rails on both sides of the content.
   ------------------------------------------------------------------------ */

.manolin-data-problem-container-test {
  position:
    relative;

  z-index:
    1;

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

  margin:
    0
    auto;

  padding:
    108px
    34px;

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

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


/* ------------------------------------------------------------------------
   SECTION INTRODUCTION
   Places the headline and description on opposite sides of the dashed
   vertical divider.
   ------------------------------------------------------------------------ */

.manolin-data-problem-intro-test {
  display:
    grid;

  grid-template-columns:
    0.84fr
    1px
    1.16fr;

  gap:
    42px;

  align-items:
    end;

  margin-bottom:
    31px;
}

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

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

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    0.15em;

  line-height:
    1.45;

  text-transform:
    uppercase;
}

.manolin-data-problem-heading-test {
  max-width:
    720px;

  margin:
    10px
    0
    0;

  color:
    #f5fcff;

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

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

  font-weight:
    700;

  letter-spacing:
    -0.073em;

  line-height:
    0.98;
}

.manolin-data-problem-intro-divider-test {
  align-self:
    stretch;

  min-height:
    156px;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(178, 218, 251, 0.38) 0 5px,
      transparent 5px 11px
    );
}

.manolin-data-problem-description-test {
  margin:
    0
    0
    3px;

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

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

  font-size:
    17px;

  font-weight:
    400;

  line-height:
    1.7;
}


/* ------------------------------------------------------------------------
   TRACE FRAME
   Contains the source systems, animated trace, and ICP question lanes.
   ------------------------------------------------------------------------ */

.manolin-data-problem-trace-frame-test {
  position:
    relative;

  overflow:
    hidden;

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

  color:
    #effbff;

  background:
    radial-gradient(
      circle at 78% 22%,
      rgba(76, 157, 184, 0.1),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      var(--manolin-data-problem-navy-test),
      var(--manolin-data-problem-frame-test)
    );
}

.manolin-data-problem-trace-frame-test::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  opacity:
    0.52;

  pointer-events:
    none;

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

  background-size:
    46px
    46px;
}


/* ------------------------------------------------------------------------
   TRACE FRAME HEADER
   Displays the technical interface title and monitor status.
   ------------------------------------------------------------------------ */

.manolin-data-problem-trace-top-test {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    13px
    15px;

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

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

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

  font-size:
    9px;

  font-weight:
    400;

  letter-spacing:
    0.12em;

  line-height:
    1.4;

  text-transform:
    uppercase;
}

.manolin-data-problem-trace-top-test b {
  color:
    var(--manolin-data-problem-cyan-test);

  font-weight:
    600;
}

.manolin-data-problem-trace-body-test {
  position:
    relative;

  z-index:
    2;

  padding:
    21px
    24px
    23px;
}


/* ------------------------------------------------------------------------
   SOURCE SYSTEM GRID
   Displays the six disconnected data-source records.
   ------------------------------------------------------------------------ */

.manolin-data-problem-source-grid-test {
  display:
    grid;

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

  gap:
    9px;
}

.manolin-data-problem-source-test {
  min-height:
    58px;

  padding:
    10px;

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

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

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

  color:
    rgba(212, 236, 244, 0.52);

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

  font-size:
    8px;

  font-weight:
    400;

  letter-spacing:
    0.08em;

  line-height:
    1.38;

  text-transform:
    uppercase;
}

.manolin-data-problem-source-test strong {
  display:
    block;

  margin-top:
    5px;

  color:
    #f0fbfd;

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1.35;
}


/* ------------------------------------------------------------------------
   ANIMATED TRACE CANVAS
   Shows the record history splitting into different investigative paths.
   ------------------------------------------------------------------------ */

.manolin-data-problem-trace-canvas-test {
  position:
    relative;

  height:
    196px;

  margin-top:
    5px;
}

.manolin-data-problem-trace-canvas-test svg {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;
}

.manolin-data-problem-line-test {
  fill:
    none;

  stroke:
    var(--manolin-data-problem-cyan-test);

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-dasharray:
    540;

  stroke-dashoffset:
    540;

  animation:
    manolin-data-problem-draw-test
    3.8s
    ease
    forwards;
}

.manolin-data-problem-line-branch-test {
  stroke:
    var(--manolin-data-problem-teal-test);

  animation-delay:
    1.45s;
}

.manolin-data-problem-drift-test {
  fill:
    none;

  stroke:
    rgba(104, 215, 199, 0.82);

  stroke-width:
    1.45;

  stroke-linecap:
    round;

  stroke-dasharray:
    6
    8;

  animation:
    manolin-data-problem-drift-animation-test
    10s
    linear
    infinite;
}

.manolin-data-problem-node-test {
  fill:
    var(--manolin-data-problem-cyan-test);

  opacity:
    0;

  animation:
    manolin-data-problem-node-animation-test
    0.32s
    ease
    forwards;
}

.manolin-data-problem-node-1-test {
  animation-delay:
    0.62s;
}

.manolin-data-problem-node-2-test {
  animation-delay:
    1.05s;
}

.manolin-data-problem-node-3-test {
  animation-delay:
    1.48s;
}

.manolin-data-problem-node-4-test {
  animation-delay:
    2.1s;
}

.manolin-data-problem-node-5-test {
  animation-delay:
    2.34s;
}

.manolin-data-problem-node-6-test {
  animation-delay:
    2.74s;
}

.manolin-data-problem-break-test {
  fill:
    var(--manolin-data-problem-navy-test);

  stroke:
    var(--manolin-data-problem-danger-test);

  stroke-width:
    1.45;

  transform-box:
    fill-box;

  transform-origin:
    center;

  animation:
    manolin-data-problem-pulse-test
    2.8s
    ease-in-out
    infinite;
}

.manolin-data-problem-break-label-test {
  position:
    absolute;

  left:
    43.7%;

  top:
    77px;

  padding:
    7px
    8px;

  border:
    1px solid
    rgba(233, 121, 114, 0.34);

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

  color:
    #f2b4af;

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

  font-size:
    8px;

  font-weight:
    400;

  letter-spacing:
    0.1em;

  line-height:
    1.35;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


/* ------------------------------------------------------------------------
   ICP QUESTION LANES
   Displays the farm and supplier questions created by fragmented records.
   ------------------------------------------------------------------------ */

.manolin-data-problem-question-grid-test {
  display:
    grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    16px;

  margin-top:
    -2px;
}

.manolin-data-problem-question-lane-test {
  min-height:
    174px;

  padding:
    15px
    16px;

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

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

  background:
    rgba(255, 255, 255, 0.015);
}

.manolin-data-problem-question-lane-test small {
  display:
    block;

  color:
    var(--manolin-data-problem-cyan-test);

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

  font-size:
    8px;

  font-weight:
    400;

  letter-spacing:
    0.13em;

  line-height:
    1.4;

  text-transform:
    uppercase;
}

.manolin-data-problem-question-lane-test h3 {
  margin:
    9px
    0
    11px;

  color:
    #f4fcfe;

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

  font-size:
    18px;

  font-weight:
    700;

  letter-spacing:
    -0.034em;

  line-height:
    1.22;
}

.manolin-data-problem-mini-question-test {
  display:
    flex;

  gap:
    8px;

  padding:
    7px
    0;

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

  color:
    rgba(213, 237, 244, 0.63);

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

  font-size:
    11px;

  line-height:
    1.44;
}

.manolin-data-problem-mini-question-test b {
  color:
    var(--manolin-data-problem-teal-test);

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

  font-weight:
    600;
}


/* ------------------------------------------------------------------------
   TRACE FOOTER
   Reinforces the shared intelligence-foundation narrative.
   ------------------------------------------------------------------------ */

.manolin-data-problem-trace-footer-test {
  display:
    flex;

  justify-content:
    center;

  margin-top:
    17px;

  color:
    var(--manolin-data-problem-cyan-test);

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

  font-size:
    9px;

  font-weight:
    400;

  letter-spacing:
    0.13em;

  line-height:
    1.4;

  text-transform:
    uppercase;
}

.manolin-data-problem-trace-footer-test span {
  padding:
    8px
    10px;

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

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


/* ------------------------------------------------------------------------
   TRACE ANIMATION KEYFRAMES
   ------------------------------------------------------------------------ */

@keyframes manolin-data-problem-draw-test {
  to {
    stroke-dashoffset:
      0;
  }
}

@keyframes manolin-data-problem-drift-animation-test {
  to {
    stroke-dashoffset:
      -150;
  }
}

@keyframes manolin-data-problem-node-animation-test {
  from {
    opacity:
      0;

    transform:
      scale(
        0.4
      );
  }

  to {
    opacity:
      1;

    transform:
      scale(
        1
      );
  }
}

@keyframes manolin-data-problem-pulse-test {
  0%,
  100% {
    opacity:
      1;
  }

  50% {
    opacity:
      0.42;
  }
}


/* ------------------------------------------------------------------------
   TABLET LAYOUT
   Stacks the section introduction and reduces internal rail padding.
   ------------------------------------------------------------------------ */

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

  .manolin-data-problem-intro-test {
    grid-template-columns:
      1fr;

    gap:
      16px;
  }

  .manolin-data-problem-intro-divider-test {
    display:
      none;
  }

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


/* ------------------------------------------------------------------------
   MOBILE LAYOUT
   Uses compact rail spacing, two-column sources, and stacked ICP lanes.
   ------------------------------------------------------------------------ */

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

    padding:
      72px
      16px;
  }

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

    letter-spacing:
      -0.064em;

    line-height:
      1;
  }

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

  .manolin-data-problem-trace-body-test {
    padding:
      17px
      14px
      18px;
  }

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

  .manolin-data-problem-trace-canvas-test {
    height:
      170px;
  }

  .manolin-data-problem-break-label-test {
    left:
      35%;

    top:
      68px;

    max-width:
      180px;

    white-space:
      normal;
  }

  .manolin-data-problem-question-grid-test {
    grid-template-columns:
      1fr;
  }

  .manolin-data-problem-trace-footer-test {
    font-size:
      8px;

    text-align:
      center;
  }
}


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

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

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.001ms !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: 600 !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),
      1280px
    );

  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:
    700;

  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:
    700;

  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% - 26px),
        1280px
      );

    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),
      1280px
    );

  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:
    600;

  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% - 26px),
        1280px
      );

    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),
      1280px
    );

  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:
    600;

  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% - 26px),
        1280px
      );

    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
      ),
      1280px
    ) !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:
    700;

  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%
          -
          26px
        ),
        1280px
      ) !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),
1280px
) !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: 700;
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% - 26px),
1280px
) !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),
1280px
) !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: 700;
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% - 26px),
1280px
) !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;
}
}